/* nannies.mt — desktop landing (built from the "Trusted Childcare in Malta" mockup, 941px → 1440px, ×1.53) */
:root{
  --plum:#4A0B24; --plum-2:#5E0C24; --ink:#3E1A22; --mute:#7A6A6E; --link:#8B6F76;
  --rose:#D33A5E; --rose-2:#BD2647; --eyebrow:#C0304A;
  --peach:#FDDDD1; --cream:#FEF8F3; --card:#FEF9F7; --line:rgba(201,90,100,.10);
  --shadow:0 10px 30px rgba(190,90,90,.08), 0 2px 6px rgba(190,90,90,.05);
  --r-lg:22px; --r-md:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.lp{margin:0; background:var(--cream); color:var(--ink); font-family:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.5}
:where(.lp) a{color:inherit; text-decoration:none}
.lp img{display:block; max-width:100%}
.lp :focus-visible{outline:3px solid rgba(211,58,94,.45); outline-offset:3px; border-radius:10px}
.wrap{width:min(1260px, calc(100% - 64px)); margin:0 auto}
.wrap-wide{width:min(1356px, calc(100% - 48px)); margin:0 auto}
.eyebrow{font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--eyebrow); margin:0}
.accent{color:var(--rose)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:12px; height:66px; padding:0 34px; border-radius:15px;
  font:800 18px/1 Nunito,sans-serif; white-space:nowrap; border:0; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn svg{flex:none}
.btn-rose{color:#fff; background:linear-gradient(180deg,#D63E63 0%,#C22B4F 100%); box-shadow:0 10px 22px rgba(196,43,79,.28), inset 0 1px 0 rgba(255,255,255,.18)}
.btn-rose:hover{transform:translateY(-1px); box-shadow:0 14px 26px rgba(196,43,79,.34)}
.btn-white{color:var(--plum); background:#FFFBF9; box-shadow:0 8px 22px rgba(190,90,90,.12)}
.btn-white:hover{transform:translateY(-1px)}
.btn-sm{height:44px; padding:0 22px; border-radius:11px; font-size:14px; gap:10px}
.btn-md{height:56px; padding:0 30px; border-radius:13px; font-size:17px}

/* header */
.lp-head{position:absolute; inset:0 0 auto 0; z-index:5}
.lp-head .wrap{display:flex; align-items:center; height:86px}
.lp-logo img{height:58px; width:auto; margin-left:-10px}
.lp-nav{display:flex; gap:34px; margin-left:auto; margin-right:auto; padding-left:40px}
.lp-nav a{position:relative; font-size:14px; font-weight:700; color:#764347; padding:8px 0}
.lp-nav a:hover{color:var(--plum)}
.lp-nav a.on{color:var(--plum)}
.lp-nav a.on::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--rose)}
.lp-tools{display:flex; align-items:center; gap:30px}
.lp-lang{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--plum)}

/* hero — composed scene: CSS room + separate 3D assets.
   Geometry measured from the mockup (941px -> 1440px, x1.53): scene box 700x574, horizon at 474px.
   The box scales with the viewport (--stW) and every object is placed in % of it. */
.hero{--stW:clamp(540px, 44.7vw, 740px); --stH:calc(var(--stW) * 0.82);
  position:relative; height:max(575px, var(--stH)); overflow:hidden; isolation:isolate;
  background:
    radial-gradient(55% 80% at 8% 0%, rgba(255,232,222,.9) 0%, rgba(255,232,222,0) 70%),
    radial-gradient(40% 60% at 100% 75%, rgba(238,160,135,.35) 0%, rgba(238,160,135,0) 70%),
    linear-gradient(90deg, #FDDACD 0%, #FDD5C6 42%, #FAC5B3 72%, #F7BEAA 100%)}
.hero::before{content:""; position:absolute; z-index:-1; top:-10%; right:8%; width:40%; height:120%;
  background:linear-gradient(115deg, rgba(255,250,246,0) 32%, rgba(255,250,246,.32) 47%, rgba(255,250,246,0) 62%);
  transform:skewX(-12deg); pointer-events:none}
.hero .floor{position:absolute; z-index:-1; left:0; right:0; bottom:0; height:calc(var(--stH) * 0.174);
  background:linear-gradient(90deg, rgba(255,255,255,0) 50%, rgba(238,170,145,.12) 100%),
             linear-gradient(180deg, #F8D3C4 0%, #FBDECF 12%, #FCE4D8 50%, #FDEEE7 100%);
  box-shadow:inset 0 12px 14px -10px rgba(196,96,74,.34);
  /* the floor belongs to the scene only: it fades out before the text column, so copy and buttons sit on a clean wall */
  --stL:calc(100% - max(16px, 50% - 640px) - var(--stW));
  -webkit-mask-image:linear-gradient(90deg, transparent calc(var(--stL) - 140px), #000 calc(var(--stL) + 60px));
          mask-image:linear-gradient(90deg, transparent calc(var(--stL) - 140px), #000 calc(var(--stL) + 60px))}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:36px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(254,248,243,0),rgba(254,248,243,.45))}
.stage{position:absolute; z-index:1; bottom:0; right:max(16px, calc(50% - 640px)); width:var(--stW); height:var(--stH); pointer-events:none}
.stage img{position:absolute; height:auto; max-width:none; user-select:none}
.stage .sh{position:absolute; border-radius:50%; filter:blur(1px);
  background:radial-gradient(46% 34% at 54% 50%, rgba(104,28,18,.55), rgba(104,28,18,0) 100%),
             radial-gradient(closest-side, rgba(178,74,56,.32), rgba(178,74,56,.12) 62%, rgba(178,74,56,0))}
.o-house{left:25.4%; bottom:12.4%; width:49.4%; filter:drop-shadow(24px 14px 26px rgba(226,100,74,.40)) drop-shadow(0 4px 5px rgba(140,40,30,.22))}
.sh-house{left:26%; bottom:9.8%; width:54%; height:6%}
.o-stack{left:8.6%; bottom:6.3%; width:19.9%; filter:drop-shadow(14px 8px 16px rgba(220,96,70,.34)) drop-shadow(0 3px 4px rgba(120,36,26,.24))}
.sh-stack{left:8%; bottom:4%; width:24%; height:5%}
.o-bear{left:65.4%; bottom:5%; width:25.4%; filter:drop-shadow(14px 8px 16px rgba(196,100,60,.34)) drop-shadow(0 3px 4px rgba(110,50,25,.24))}
.sh-bear{left:66%; bottom:2.8%; width:28%; height:5.5%}
.o-heart{left:21%; top:47%; width:4%; filter:drop-shadow(0 6px 8px rgba(196,82,72,.25))}
.cloud{filter:drop-shadow(4px 22px 20px rgba(214,108,78,.33))}
.c1{left:9.3%; top:21.2%; width:27.1%}
.c2{left:62%; top:21.6%; width:27.1%}
.c3{left:91%; top:47%; width:15%; opacity:.9}
.c4{left:90.5%; top:13.5%; width:10.5%; opacity:.7; filter:blur(.5px) drop-shadow(0 8px 12px rgba(205,120,105,.12))}
.c5{left:46.5%; top:13%; width:8.5%; opacity:.55; filter:blur(.7px)}
.c6{left:99%; top:66%; width:11%; opacity:.8}
@keyframes drift{from{transform:translate3d(0,0,0)} to{transform:translate3d(0,-7px,0)}}
@keyframes drift2{from{transform:translate3d(0,0,0)} to{transform:translate3d(-6px,-4px,0)}}
.c1{animation:drift 6.5s ease-in-out infinite alternate}
.c2{animation:drift 7.5s ease-in-out -2s infinite alternate}
.c3{animation:drift2 8s ease-in-out -1s infinite alternate}
.c4{animation:drift2 9s ease-in-out -4s infinite alternate}
.c5{animation:drift 10s ease-in-out -3s infinite alternate}
.c6{animation:drift 8.5s ease-in-out -5s infinite alternate}
.o-heart{animation:drift 3.2s ease-in-out infinite alternate}
.hero .wrap{position:relative; z-index:2; padding-left:32px; height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:100px; padding-bottom:calc(max(575px, var(--stH)) * 0.06)}
.hero h1{margin:14px 0 0; font-size:61px; line-height:1.1; font-weight:900; letter-spacing:-.025em; color:var(--plum)}
.hero h1 span{display:block; color:var(--rose)}
.hero .lead{margin:22px 0 0; font-size:23px; line-height:1.42; font-weight:500; color:#3B1219}
.hero .ctas{display:flex; gap:17px; margin-top:38px}
.hero .ctas .btn{width:246px}
.rated{display:flex; align-items:center; gap:12px; margin-top:22px; font-size:15px; font-weight:600; color:#6E4A50}
.stars{display:inline-flex; gap:5px}
.flag{display:inline-block; width:15px; height:15px; border-radius:2px; background:linear-gradient(90deg,#fff 50%,#CF142B 50%); box-shadow:0 0 0 1px rgba(0,0,0,.06)}

/* trust */
.trust{padding:36px 0 30px; text-align:center}
.trust h2,.how h2,.reviews h2{margin:8px 0 0; font-size:37px; line-height:1.15; font-weight:900; letter-spacing:-.02em; color:var(--plum)}
.sub{margin:12px auto 0; max-width:620px; font-size:17px; line-height:1.55; color:#4B2A31}
.tcards{display:grid; grid-template-columns:repeat(4,1fr); gap:17px; margin-top:32px}
.tcard{background:var(--card); border-radius:var(--r-md); box-shadow:var(--shadow); padding:24px 26px 30px; min-height:242px}
.ibub{width:90px; height:90px; margin:0 auto 8px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, #FFE3DA 0%, #FBD3C8 70%, #F6C4B8 100%); box-shadow:inset 0 -3px 8px rgba(210,110,100,.12)}
.ibub img{width:50px; height:auto}
.tcard h3{margin:10px 0 8px; font-size:18px; line-height:1.25; font-weight:800; color:#320713}
.tcard p{margin:0; font-size:15px; line-height:1.5; color:var(--mute)}

/* split */
.split{display:grid; grid-template-columns:713fr 617fr; gap:24px; margin-top:6px}
.panel{position:relative; border-radius:var(--r-lg); overflow:hidden; height:412px; padding:38px 37px}
.panel-fam{background:linear-gradient(135deg,#FFE7DF 0%,#FDE1D8 55%,#FBDAD2 100%)}
.panel-nan{background:linear-gradient(135deg,#FEF4EC 0%,#FDEDE5 100%)}
.panel .eyebrow{font-size:12px}
.panel h2{margin:14px 0 0; font-size:30px; line-height:1.18; font-weight:900; letter-spacing:-.02em; color:var(--plum)}
.panel h2 span{display:block; color:var(--rose)}
.panel .p{margin:16px 0 0; font-size:17px; line-height:1.55; color:#4B2A31}
.ticks{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px}
.ticks li{display:flex; align-items:center; gap:14px; font-size:16px; color:#4B2A31}
.ticks i{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,#F57789,#E9566C); box-shadow:0 2px 5px rgba(233,86,108,.3)}
.panel .btn{margin-top:22px}
.panel-copy{position:relative; z-index:2; max-width:430px}
.panel-nan .panel-copy{max-width:380px}
.art{position:absolute; z-index:1; pointer-events:none}
.art-fam{right:28px; bottom:-6px; width:286px}
.art-heart{position:absolute; right:250px; top:86px; width:46px; z-index:1}
.art-nan{right:36px; top:40px; width:190px}
.spark{position:absolute; right:22px; top:204px; z-index:1}

/* how */
.how{padding:44px 0 46px; text-align:center}
.steps{display:grid; grid-template-columns:1fr 50px 1fr 50px 1fr; align-items:center; margin-top:34px}
.step{position:relative; display:flex; align-items:center; gap:26px; text-align:left; background:var(--card); border-radius:var(--r-md);
  box-shadow:var(--shadow); padding:30px 30px; min-height:135px}
.step .num{position:absolute; left:-15px; top:-15px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:#FAC0BA; color:#A0172F; font-weight:900; font-size:21px; box-shadow:0 4px 10px rgba(220,110,110,.18)}
.step .ibub{flex:none; width:92px; height:92px; margin:0}
.step h3{margin:0 0 7px; font-size:17px; font-weight:800; color:#320713}
.step p{margin:0; font-size:14px; line-height:1.5; color:var(--mute)}
.chev{display:grid; place-items:center}

/* reviews */
.reviews{position:relative; margin-top:0; padding:40px 0 58px; background:linear-gradient(180deg,#FEEDE8 0%,#FEE8E3 100%); border-radius:40px 40px 0 0}
.rev-top{display:flex; justify-content:space-between; align-items:flex-end}
.rev-top .sub{margin:12px 0 0; max-width:none}
.score{text-align:right; padding-bottom:42px}
.score .big{display:flex; align-items:center; justify-content:flex-end; gap:14px; font-size:22px; font-weight:800; color:var(--plum)}
.score small{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:6px; font-size:13px; color:#6E4A50}
.rcards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px}
.rcard{display:grid; grid-template-columns:60px 1fr; column-gap:22px; background:var(--cream); border-radius:var(--r-md); box-shadow:var(--shadow); padding:30px 30px 26px 26px; min-height:211px}
.rcard .q{font:900 72px/0.8 Georgia,serif; color:#EE8A93; margin-top:6px}
.rcard blockquote{margin:0; font-size:15px; line-height:1.55; color:#4B2A31}
.rcard .who{grid-column:1/-1; display:grid; grid-template-columns:60px 1fr; column-gap:22px; align-items:center; margin-top:2px}
.rcard .rstars{grid-column:2; display:flex; gap:6px; margin:10px 0 6px}
.ava{width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:20px; color:#9C3348;
  background:radial-gradient(circle at 50% 35%,#FFE6DE,#F8CFC3)}
.who b{display:block; font-size:16px; color:#320713}
.who span{font-size:15px; color:var(--mute)}

/* cta */
.cta-band{position:relative; z-index:2; margin-top:-28px}
.cta{position:relative; overflow:hidden; text-align:center; color:#fff; border-radius:24px; padding:36px 20px 40px;
  background:linear-gradient(180deg,#D23F61 0%,#C23251 100%); box-shadow:0 18px 40px rgba(194,50,81,.25)}
.cta h2{margin:0; font-size:37px; font-weight:900; letter-spacing:-.01em}
.cta p{margin:8px 0 0; font-size:19px; color:rgba(255,255,255,.92)}
.cta .ctas{display:flex; justify-content:center; gap:17px; margin-top:22px}
.cta .btn{width:230px; height:56px; font-size:17px}
.btn-ghost{color:#fff; background:transparent; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.cta .cl{position:absolute; width:156px}
.cta .cl-l{left:56px; top:44px}
.cta .cl-r{right:56px; top:52px; width:146px}

/* footer */
.foot{padding:46px 0 0}
.fgrid{display:grid; grid-template-columns:1.55fr .8fr .66fr .98fr 1.3fr; gap:24px}
.foot .flogo img{height:44px; width:auto; margin-left:-8px}
.foot .tag{margin:16px 0 0; font-size:15px; line-height:1.55; color:#6E4A50}
.social{display:flex; gap:28px; margin-top:20px}
.social a{color:var(--plum-2)}
.foot h4{margin:0 0 12px; font-size:16px; font-weight:800; color:var(--plum-2)}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot li a,.foot li{font-size:15px; color:var(--link)}
.foot li a:hover{color:var(--plum)}
.contact li{display:flex; align-items:center; gap:18px}
.nl p{margin:0 0 16px; font-size:15px; color:#6E4A50}
.nl form{display:flex; height:48px; border-radius:12px; background:#FFF; box-shadow:0 6px 18px rgba(190,90,90,.08)}
.nl input{flex:1; min-width:0; border:0; background:transparent; padding:0 18px; font:500 15px Nunito,sans-serif; color:var(--ink); border-radius:12px 0 0 12px}
.nl input::placeholder{color:#A99197}
.nl input:focus{outline:none}
.nl button{flex:none; width:48px; border:0; border-radius:12px; cursor:pointer; display:grid; place-items:center; background:linear-gradient(180deg,#D63E63,#C22B4F)}
.nl .ok{margin-top:10px; font-size:14px; font-weight:700; color:#2E7D4F}
.nl .err{margin-top:10px; font-size:14px; font-weight:700; color:var(--rose-2)}
.fbar{display:flex; justify-content:space-between; align-items:center; margin-top:28px; padding:20px 0 24px; border-top:1px solid rgba(160,90,100,.12); font-size:14px; color:var(--link)}
.fbar nav{display:flex; gap:16px}
.fbar nav span{color:#C6AEB3}
.fbar a:hover{color:var(--plum)}

/* narrower desktops / tablets */
@media (max-width:1180px){
  .lp-nav{gap:22px; padding-left:20px}
    .hero h1{font-size:52px}
  .split{grid-template-columns:1fr 1fr}
  .art-fam{width:230px} .art-heart{right:210px}
  .art-nan{width:160px}
  .fgrid{grid-template-columns:1.4fr 1fr 1fr; row-gap:34px}
}
@media (max-width:900px){
  .lp-nav{display:none}
  .hero{height:auto}
  .hero .wrap{padding-top:120px; padding-left:0; height:auto; display:block}
  .hero .floor{-webkit-mask-image:none; mask-image:none}
  .hero{--stW:min(560px, 100vw); height:auto}
  .stage{position:relative; right:auto; margin:10px auto 0}
  .hero .ctas{flex-wrap:wrap}
  .tcards{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:26px}
  .chev{display:none}
  .rev-top{flex-direction:column; align-items:flex-start}
  .score{text-align:left; padding:18px 0 0}
  .score .big,.score small{justify-content:flex-start}
  .rcards{grid-template-columns:1fr}
  .cta .cl{display:none}
  .cta .ctas{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn{transition:none} .cloud,.o-heart{animation:none} }