/* =============================================================
   Ad Aircond Solution — Kuala Lumpur
   Design system: turquoise / cyan / charcoal, geometric sans,
   card-based UI, alternating white & colour blocks.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand ramp */
  --b-50:#effcfb;
  --b-100:#d3f6f3;
  --b-200:#a6ede9;
  --b-300:#6adfdb;
  --b-400:#2fcbc8;
  --b-500:#14bdb8;
  --b-600:#0ca0a3;
  --b-700:#0d818e;
  --b-800:#116775;
  --b-900:#134f5d;
  --b-950:#062733;

  /* neutrals */
  --ink:#112a3f;
  --ink-2:#25455e;
  --navy:#0f2740;
  --muted:#55727e;
  --muted-2:#7d949e;
  --line:#e2eef1;
  --line-2:#eef6f8;
  --surface:#ffffff;
  --surface-alt:#f3fafb;
  --surface-tint:#e9f6f7;

  /* effects */
  --sh-xs:0 1px 2px rgba(10,45,58,.05);
  --sh-sm:0 4px 14px -6px rgba(10,45,58,.16);
  --sh-md:0 16px 36px -18px rgba(10,45,58,.28);
  --sh-lg:0 34px 74px -34px rgba(8,40,52,.42);
  --sh-brand:0 18px 38px -18px rgba(12,160,163,.55);

  --r-xs:5px;
  --r-sm:6px;
  --r:8px;
  --r-lg:10px;
  --r-xl:12px;
  --r-btn:6px;

  --grad:linear-gradient(125deg,#17c9bd 0%,#0ba2b0 55%,#0b8296 100%);
  --grad-soft:linear-gradient(135deg,var(--b-50),#ffffff 70%);

  --wrap:1200px;
  --gut:clamp(20px,4vw,32px);
  --hdr:82px;

  --f-display:"Poppins","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.68;
  color:var(--muted);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);margin:0;line-height:1.16;letter-spacing:-.022em;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:20px;height:20px;flex:none;color:currentColor}
.ico--sm{width:16px;height:16px}

.skip-link{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-xs);
  transition:top .2s ease;
}
.skip-link:focus{top:12px}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--b-400);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 3. Typography scale ---------- */
.h2{font-size:clamp(1.72rem,1.15rem + 2.3vw,2.85rem);font-weight:600}
.h2--sm{font-size:clamp(1.45rem,1.1rem + 1.4vw,2.1rem)}
.h2--light{color:#fff}
.lede{font-size:clamp(1rem,.97rem + .2vw,1.09rem);color:var(--ink-2);line-height:1.72}
.body{color:var(--muted);line-height:1.78}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-weight:600;font-size:.735rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--b-700);
  margin-bottom:16px;
}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--b-500);box-shadow:0 0 0 4px rgba(20,189,184,.18)}
.eyebrow--light{color:#b8f4ee}
.eyebrow--light .eyebrow__dot{background:#7ff0e4;box-shadow:0 0 0 4px rgba(127,240,228,.2)}

.sec-head{max-width:660px;margin:0 auto clamp(38px,5vw,58px);text-align:center}
.sec-head--tight{margin-bottom:clamp(28px,3.5vw,40px)}
.sec-head__text{margin-top:16px;color:var(--muted);font-size:1.02rem}

.section{padding:clamp(64px,7.5vw,112px) 0}
.section--alt{background:var(--surface-alt)}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:600;font-size:.9rem;letter-spacing:-.01em;
  padding:11px 20px;border-radius:var(--r-btn);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .2s cubic-bezier(.3,.8,.4,1),box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:13px 22px;font-size:.95rem}
.btn--block{width:100%}
/* the tinted icon tile the hero CTA carries in the reference */
.btn__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:5px;background:rgba(255,255,255,.2);margin-left:-4px;
}
.btn__ico .ico{width:16px;height:16px}

.btn--primary{background:var(--grad);color:#fff;box-shadow:var(--sh-brand)}
.btn--primary:hover{box-shadow:0 22px 44px -18px rgba(12,160,163,.72)}

.btn--white{background:#fff;color:var(--b-800);box-shadow:0 16px 34px -18px rgba(4,35,45,.5)}
.btn--white:hover{background:var(--b-50)}

.btn--ghost{background:transparent;color:var(--b-800);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--b-300);background:var(--b-50)}

.btn--ghost-dark{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost-dark:hover{border-color:var(--b-300);color:var(--b-700);background:var(--b-50)}

.btn--glass{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.btn--glass:hover{background:rgba(255,255,255,.22)}

.btn--outline{background:#fff;color:var(--b-800);border-color:var(--b-200)}
.btn--outline:hover{background:var(--b-50);border-color:var(--b-400)}

.btn--soft{background:var(--b-50);color:var(--b-800);font-size:.86rem;padding:10px 18px}

.btn--card{
  background:#fff;color:var(--navy);border-color:var(--line);
  box-shadow:0 12px 30px -18px rgba(15,39,64,.45);
}
.btn--card:hover{border-color:var(--b-300);color:var(--b-700)}

.btn--phone{
  background:#fff;color:var(--navy);border-color:var(--b-300);
  padding:10px 16px;font-size:.86rem;
}
.btn--phone .ico{color:var(--b-600)}
.btn--phone:hover{border-color:var(--b-400);background:var(--b-50)}
.btn--soft:hover{background:var(--b-100)}

.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-display);font-weight:600;font-size:.86rem;color:var(--b-700);
}
.link-arrow .ico{transition:transform .25s ease}
.link-arrow:hover .ico{transform:translateX(4px)}

/* ---------- 5. Accessibility helper ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 6. Header — SOLID WHITE, never transparent ---------- */
.site-header{
  position:sticky;top:0;z-index:90;
  background:#fff;                 /* solid, opaque — never over the hero */
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.site-header.is-stuck{box-shadow:0 10px 30px -20px rgba(15,39,64,.4)}
.site-header .wrap{max-width:1400px}
.site-header__inner{display:flex;align-items:center;gap:20px;min-height:var(--hdr)}

/* wordmark */
.brand{display:inline-flex;align-items:center;flex:none}
.brand__stack{position:relative;display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.brand__swoosh{
  position:absolute;top:-9px;right:-6px;width:64px;height:14px;
  color:var(--b-500);pointer-events:none;
}
.brand__name{
  font-family:var(--f-display);font-weight:700;font-size:1.5rem;
  color:var(--navy);letter-spacing:-.025em;white-space:nowrap;
}
.brand__sub{
  font-family:var(--f-display);font-weight:600;font-size:.6rem;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--b-600);margin-top:5px;
}

/* navigation: links sit in the middle, contact actions to the right */
.nav{flex:1;display:flex;align-items:center;gap:16px;min-width:0}
.nav__list{display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav__item{position:relative}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-body);font-weight:500;font-size:.92rem;color:var(--ink-2);
  padding:11px 12px;border-radius:6px;background:none;border:0;cursor:pointer;
  white-space:nowrap;transition:color .2s ease;
}
.nav__link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2.5px;border-radius:2px;
  background:var(--b-500);transform:scaleX(0);transform-origin:center;
  transition:transform .25s cubic-bezier(.3,.8,.4,1);
}
.nav__link:hover{color:var(--b-700)}
.nav__link.is-active{color:var(--b-700);font-weight:600}
.nav__link.is-active::after{transform:scaleX(1)}
.nav__toggle .ico{transition:transform .25s ease}
.has-sub.is-open .nav__toggle .ico{transform:rotate(180deg)}

.subnav{
  position:absolute;top:calc(100% + 8px);left:0;min-width:236px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-md);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.has-sub:hover .subnav,.has-sub.is-open .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.subnav a{
  display:block;padding:10px 14px;border-radius:6px;font-size:.9rem;color:var(--ink-2);
  transition:background-color .18s ease,color .18s ease;
}
.subnav a:hover{background:var(--b-50);color:var(--b-700)}

.nav__cta{display:flex;align-items:center;gap:10px;flex:none}

.burger{
  display:none;position:relative;z-index:96;margin-left:auto;width:46px;height:46px;
  align-items:center;justify-content:center;
  background:var(--b-50);border:1px solid var(--line);border-radius:6px;color:var(--b-800);cursor:pointer;
}
.burger .ico{width:22px;height:22px}
.burger__close{display:none}
.burger.is-open .burger__open{display:none}
.burger.is-open .burger__close{display:block}
.nav-scrim{position:fixed;inset:0;background:rgba(15,39,64,.45);z-index:88;backdrop-filter:blur(2px)}

/* ---------- 7. Hero ---------- */
.hero .wrap{max-width:1400px}
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(30px,3.6vw,52px) 0 clamp(44px,4.6vw,66px);
  background:#fff;
}
/* tinted ground */
.hero__wash{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(58% 46% at 8% 6%,rgba(255,255,255,.95),transparent 70%),
    radial-gradient(46% 40% at 86% 74%,rgba(95,212,228,.22),transparent 72%),
    linear-gradient(158deg,#fbfeff 0%,#e9f6fb 38%,#cfe8f3 100%);
}
.hero__photo{
  position:absolute;top:0;right:0;width:56%;z-index:-2;
  height:clamp(540px,60vw,880px);
  /* Swap in real photography by setting --photo, e.g.
     --photo:url("../img/hero-technician.jpg"); */
  --photo:none;
  background-image:var(--photo),url("../media/hero-service.svg");
  background-size:cover,cover;
  background-position:left center,left center;
  background-repeat:no-repeat,no-repeat;
  -webkit-mask-image:linear-gradient(96deg,transparent 0,rgba(0,0,0,.72) 11%,#000 22%,#000 100%);
  mask-image:linear-gradient(96deg,transparent 0,rgba(0,0,0,.72) 11%,#000 22%,#000 100%);
}
/* dissolve the panel's lower edge into the tinted ground */
.hero__photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30%;
  background:linear-gradient(180deg,rgba(211,233,244,0) 0%,rgba(211,233,244,.8) 62%,#d3e9f4 100%);
}
/* the wave carries the hero into the white section below */
.hero__wave{
  position:absolute;left:-1px;right:-1px;bottom:-1px;width:calc(100% + 2px);
  height:clamp(190px,24vw,340px);z-index:-1;display:block;pointer-events:none;
}

.hero__inner{
  position:static;
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  gap:clamp(20px,2.6vw,44px);align-items:start;
}
.hero__copy{position:relative;z-index:2;grid-column:1;grid-row:1;max-width:672px;padding-top:clamp(6px,1.6vw,22px)}
.hero__side{position:relative;z-index:3;grid-column:2;grid-row:1/3;align-self:end;justify-self:end;width:100%;max-width:366px}

.tagpill{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 20px 9px 16px;border-radius:999px;
  background:rgba(255,255,255,.8);border:1px solid rgba(20,189,184,.24);
  font-family:var(--f-display);font-weight:600;font-size:.83rem;color:var(--b-700);
  box-shadow:0 6px 18px -12px rgba(15,39,64,.35);backdrop-filter:blur(6px);
}
.tagpill__dot{width:7px;height:7px;border-radius:50%;background:var(--b-500);box-shadow:0 0 0 4px rgba(20,189,184,.18)}

.hero__title{
  margin-top:20px;
  font-size:clamp(2.15rem,1.1rem + 3.5vw,3.6rem);
  font-weight:700;line-height:1.1;letter-spacing:-.035em;color:var(--navy);
}
.hero__title em{
  font-style:normal;
  background:linear-gradient(96deg,#17b9c4,#0d9aa8 55%,#0b8aa0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brk-lg{display:none}
@media (min-width:1181px){.brk-lg{display:inline}}

.hero__lede{
  margin-top:18px;max-width:530px;
  font-size:clamp(1rem,.96rem + .3vw,1.1rem);line-height:1.72;color:var(--muted);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* lightweight credibility strip */
.trustrow{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px 0;margin-top:clamp(26px,2.8vw,36px);
}
.trustrow li{
  display:flex;align-items:flex-start;gap:10px;
  padding-inline:clamp(10px,1.1vw,15px);
}
.trustrow li:first-child{padding-left:0}
.trustrow li+li{border-left:1px solid rgba(17,42,63,.1)}
.trustrow__icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  background:#dff0f7;color:var(--b-600);
}
.trustrow__icon .ico{width:18px;height:18px}
.trustrow strong{display:block;font-family:var(--f-display);font-weight:600;font-size:.845rem;color:var(--navy);margin-bottom:2px;line-height:1.25;white-space:nowrap}
.trustrow span span,.trustrow li>span:last-child{font-size:.765rem;line-height:1.45;color:var(--muted)}

/* request card */
.reqcard{
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-xl);padding:clamp(22px,2.2vw,28px);
  box-shadow:0 40px 80px -40px rgba(15,39,64,.45),0 4px 16px -8px rgba(15,39,64,.14);
}
.reqcard__title{font-size:1.24rem;color:var(--b-700);margin-bottom:6px}
.reqcard__note{font-size:.86rem;color:var(--muted);line-height:1.55;margin-bottom:20px}
.reqfield{position:relative;margin-bottom:12px}
.reqfield>.ico{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--b-500);pointer-events:none;
}
.reqfield__chev{left:auto;right:14px;color:var(--muted-2)}
.reqfield input,.reqfield select{
  width:100%;padding:12px 16px 12px 42px;
  border:1.5px solid var(--line);border-radius:var(--r-btn);background:var(--surface-alt);
  font-size:.92rem;color:var(--ink);
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.reqfield select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.reqfield select:invalid,.reqfield select option[value=""]{color:var(--muted-2)}
.reqfield input::placeholder{color:var(--muted-2)}
.reqfield input:focus,.reqfield select:focus{
  outline:none;border-color:var(--b-400);background:#fff;box-shadow:0 0 0 4px rgba(20,189,184,.14);
}
.reqfield input.is-invalid{border-color:#e0645c;background:#fff6f5}
.reqcard__error{margin:0 0 10px;font-size:.83rem;color:#c9453c}
.reqcard__submit{position:relative;padding:14px 52px 14px 20px;margin-top:6px}
.reqcard__send{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.24);
}
.reqcard__send .ico{width:18px;height:18px}
.reqcard__alt{margin:14px 0 0;text-align:center;font-size:.78rem;color:var(--muted-2)}

/* ---------- 8. Floating USP cards over the curve ---------- */
.usp{
  position:relative;z-index:2;grid-column:1;grid-row:2;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(34px,4.2vw,58px);
}
.usp__card{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:0 14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,2vw,24px);padding-bottom:clamp(56px,5vw,64px);
  box-shadow:0 26px 54px -28px rgba(15,39,64,.34),0 2px 8px -4px rgba(15,39,64,.1);
  transition:transform .3s cubic-bezier(.3,.8,.4,1),box-shadow .3s ease,border-color .3s ease;
}
.usp__card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--b-200)}
.usp__icon{
  grid-row:1;grid-column:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:#ddeff6;color:var(--b-600);
  transition:background .3s ease,color .3s ease;
}
.usp__card:hover .usp__icon{background:var(--grad);color:#fff}
.usp__icon .ico{width:24px;height:24px}
.usp__title{grid-row:1;grid-column:2;font-size:1.06rem;color:var(--navy);line-height:1.25}
.usp__text{grid-row:2;grid-column:1/-1;margin-top:15px;font-size:.87rem;line-height:1.62}
.usp__go{
  position:absolute;right:clamp(18px,1.8vw,22px);bottom:clamp(16px,1.6vw,20px);
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--grad);color:#fff;box-shadow:var(--sh-brand);
  transition:transform .25s ease;
}
.usp__go .ico{width:17px;height:17px}
.usp__card:hover .usp__go{transform:translateX(3px)}

.scrolldown{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:clamp(26px,3vw,40px);
  font-family:var(--f-display);font-weight:500;font-size:.84rem;color:var(--muted);
  transition:color .2s ease;
}
.scrolldown:hover{color:var(--b-700)}
.scrolldown .ico:first-child{color:var(--b-500)}
.scrolldown .ico:last-child{animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- 9. Split sections ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
.split--reverse .split__media{order:-1}
.split__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.split__copy .lede{margin-top:20px}
.split__copy .body{margin-top:16px}

.ticks{display:grid;gap:12px;margin-top:26px}
.ticks li{display:flex;align-items:flex-start;gap:12px;color:var(--ink-2);font-size:.96rem}
.ticks .ico{
  width:22px;height:22px;padding:4px;border-radius:50%;
  background:#d5f4f2;color:var(--b-700);margin-top:2px;
}

.split__media{position:relative}
.frame{
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);
  aspect-ratio:6/5;border:1px solid var(--line);
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
}
/* Swap in real photography by setting --photo on the frame below. */
.frame--interior{--photo:none;background-image:var(--photo),url("../media/interior.svg")}
.frame--workshop{--photo:none;background-image:var(--photo),url("../media/workshop.svg")}

.frame__chip{
  position:absolute;left:-14px;bottom:26px;
  display:flex;align-items:center;gap:13px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 20px;box-shadow:var(--sh-md);max-width:82%;
}
.frame__chip--right{left:auto;right:-14px}
.frame__chip-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:8px;background:var(--grad);color:#fff;flex:none;
}
.frame__chip span strong,.frame__badge span strong{display:block;font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:.92rem}
.frame__chip span:last-child{font-size:.82rem;color:var(--muted);line-height:1.5}
.frame__badge{
  position:absolute;right:-10px;top:26px;
  display:flex;align-items:center;gap:11px;
  background:var(--b-950);color:#a9d2dc;border-radius:var(--r);
  padding:13px 18px;box-shadow:var(--sh-md);
}
.frame__badge .ico{color:var(--b-300)}
.frame__badge span strong{color:#fff}
.frame__badge span{font-size:.78rem;line-height:1.45}

/* ---------- 10. Promotional band ---------- */
.band{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(64px,7vw,100px) 0 clamp(110px,11vw,150px);
  background:var(--b-800);
}
.band__media{
  position:absolute;inset:0;z-index:-1;
  --photo:none;
  background-image:var(--photo),url("../media/band.svg");
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
}
.band__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(10,108,122,.88),rgba(13,145,152,.6) 58%,rgba(21,186,178,.42));
}
.band__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.band__text{color:#d3f0f4;margin-top:20px;max-width:560px;font-size:1.03rem;line-height:1.75}
.band__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.band__points{display:grid;gap:14px}
.band__points li{
  display:flex;align-items:flex-start;gap:15px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);padding:18px 22px;backdrop-filter:blur(8px);
}
.band__points .ico{color:#7ff0e4;margin-top:3px;width:23px;height:23px}
.band__points strong{display:block;font-family:var(--f-display);font-weight:600;color:#fff;font-size:.98rem}
.band__points span{font-size:.87rem;color:#c4e7ec;line-height:1.6}

/* ---------- 11. Trust strip (overlaps band) ---------- */
.trust{position:relative;z-index:4;margin-top:clamp(-96px,-7vw,-64px);padding-bottom:clamp(56px,6vw,84px)}
.trust__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.tcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px);box-shadow:var(--sh-md);
  transition:transform .3s ease,box-shadow .3s ease;
}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.tcard__icon{width:48px;height:48px;border-radius:10px;margin-bottom:14px}
.tcard__title{font-size:1.03rem;margin-bottom:7px}
.tcard__text{font-size:.89rem;line-height:1.6}

/* ---------- 12. Services bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.scard{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px);box-shadow:var(--sh-xs);
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.3,.8,.4,1),box-shadow .3s ease,border-color .3s ease;
}
.scard::after{
  content:"";position:absolute;inset:auto -40% -60% auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,189,184,.16),transparent 70%);
  opacity:0;transition:opacity .35s ease;
}
.scard:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--b-200)}
.scard:hover::after{opacity:1}
.scard__icon{width:50px;height:50px;border-radius:10px;margin-bottom:16px}
.scard__title{font-size:1.06rem;margin-bottom:9px;position:relative}
.scard__text{font-size:.885rem;line-height:1.65;margin-bottom:18px;flex:1;position:relative}
.scard__cta{
  display:inline-flex;align-items:center;gap:7px;position:relative;
  font-family:var(--f-display);font-weight:600;font-size:.83rem;color:var(--b-700);
}
.scard__cta .ico{transition:transform .25s ease}
.scard:hover .scard__cta .ico{transform:translateX(4px)}

/* ---------- 13. Approach feature list ---------- */
.feature-list{display:grid;gap:20px;margin-top:30px}
.feature-list li{display:flex;align-items:flex-start;gap:16px}
.feature-list__icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:10px;
  background:linear-gradient(150deg,#e8fbfa,#cdf2f0);
  border:1px solid rgba(20,189,184,.18);color:var(--b-600);
}
.feature-list strong{display:block;font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:1rem;margin-bottom:3px}
.feature-list span span,.feature-list li>span:last-child{font-size:.92rem;line-height:1.65}
.approach .btn{margin-top:32px}

/* ---------- 14. Support cards ---------- */
.support__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.pcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,36px);text-align:center;box-shadow:var(--sh-xs);
  display:flex;flex-direction:column;align-items:center;
  transition:transform .3s ease,box-shadow .3s ease;
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.pcard__icon{width:60px;height:60px;border-radius:12px}
.pcard__title{font-size:1.14rem;margin-bottom:10px}
.pcard__text{font-size:.92rem;line-height:1.65;margin-bottom:22px;flex:1}
.pcard--accent{background:var(--grad);border-color:transparent;box-shadow:var(--sh-brand)}
.pcard--accent .pcard__icon{background:rgba(255,255,255,.2);color:#fff}
.pcard--accent .pcard__title{color:#fff}
.pcard--accent .pcard__text{color:#dcf7f6}
.pcard--accent .btn--soft{background:#fff;color:var(--b-800)}

/* ---------- 15. Packages ---------- */
.packages__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px);align-items:center}
.pkg{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,3vw,40px);box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease;
}
.pkg:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.pkg__name{font-size:1.28rem;margin-bottom:8px}
.pkg__for{font-size:.9rem;line-height:1.6;min-height:44px}
.pkg__price{
  font-family:var(--f-display);font-weight:700;font-size:1.72rem;color:var(--ink);
  letter-spacing:-.03em;margin:22px 0 4px;
}
.pkg__price span{
  display:block;font-family:var(--f-body);font-weight:500;font-size:.76rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-top:6px;
}
.pkg__list{display:grid;gap:11px;margin:24px 0 28px;padding-top:24px;border-top:1px solid var(--line);flex:1}
.pkg__list li{display:flex;align-items:flex-start;gap:11px;font-size:.9rem;color:var(--ink-2)}
.pkg__list .ico{
  width:19px;height:19px;padding:3px;border-radius:50%;
  background:#d5f4f2;color:var(--b-700);margin-top:3px;flex:none;
}
.pkg--featured{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 40px 76px -34px rgba(11,130,150,.72);
  transform:scale(1.03);
}
.pkg--featured:hover{transform:scale(1.03) translateY(-5px)}
.pkg--featured .pkg__name,.pkg--featured .pkg__price{color:#fff}
.pkg--featured .pkg__for,.pkg--featured .pkg__list li{color:#e0f8f7}
.pkg--featured .pkg__price span{color:#bdefec}
.pkg--featured .pkg__list{border-top-color:rgba(255,255,255,.28)}
.pkg--featured .pkg__list .ico{background:rgba(255,255,255,.22);color:#fff}
.pkg__flag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--b-950);color:#7ff0e4;font-family:var(--f-display);font-weight:600;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 16px;border-radius:5px;white-space:nowrap;
}
.packages__note{
  max-width:640px;margin:clamp(30px,3.5vw,44px) auto 0;text-align:center;
  font-size:.87rem;color:var(--muted-2);
}

/* ---------- 16. Process ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);counter-reset:step}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,3vw,38px);box-shadow:var(--sh-xs);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--b-200)}
.step:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:calc(-1 * clamp(18px,2.4vw,30px));
  width:clamp(18px,2.4vw,30px);height:2px;
  background:repeating-linear-gradient(90deg,var(--b-300) 0 6px,transparent 6px 12px);
}
.step__num{
  font-family:var(--f-display);font-weight:700;font-size:2.6rem;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px var(--b-200);display:block;line-height:1;
}
.step__icon{width:54px;height:54px;border-radius:10px;margin:18px 0 16px}
.step:hover .step__icon{background:var(--grad);color:#fff}
.step__title{font-size:1.14rem;margin-bottom:10px}
.step__text{font-size:.92rem;line-height:1.68}

/* ---------- 17. Testimonials ---------- */
.testimonials__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,26px)}
.quote{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,3vw,36px);box-shadow:var(--sh-xs);
  display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease;
}
.quote:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.quote__mark{width:34px;height:34px;color:var(--b-200);margin-bottom:16px}
.quote blockquote{margin:0;font-size:.97rem;line-height:1.75;color:var(--ink-2);flex:1}
.quote figcaption{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.quote__avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(150deg,#e8fbfa,#cdf2f0);
  font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--b-600);
}
.quote figcaption strong{display:block;font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:.94rem}
.quote figcaption span{font-size:.82rem;color:var(--muted-2)}

/* ---------- 18. Brand wall ---------- */
.brands__wall{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
}
.brands__item{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:92px;padding:16px 12px;
  background:var(--surface-alt);border:1px solid var(--line-2);border-radius:var(--r);
  font-family:var(--f-display);font-weight:600;font-size:1.1rem;
  color:#6f8a95;letter-spacing:-.02em;
  transition:color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.brands__item:hover{color:var(--b-700);background:#fff;border-color:var(--b-200);transform:translateY(-3px);box-shadow:var(--sh-sm)}

/* ---------- 19. Final CTA + booking ---------- */
.finale{position:relative;isolation:isolate;overflow:hidden;background:var(--b-950);padding:clamp(64px,7.5vw,110px) 0}
.finale__media{
  position:absolute;inset:0;z-index:-1;
  --photo:none;
  background-image:var(--photo),url("../media/mesh.svg");
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
}
.finale__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(34px,4.5vw,64px);align-items:center}
.finale__text{color:#bfdfe7;margin-top:20px;max-width:520px;font-size:1.03rem;line-height:1.75}
.finale__contacts{display:grid;gap:18px;margin-top:36px}
.finale__contacts li{display:flex;align-items:flex-start;gap:15px}
.finale__ico{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:8px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#7ff0e4;
}
.finale__contacts strong{display:block;font-family:var(--f-display);font-weight:600;color:#fff;font-size:.95rem;margin-bottom:2px}
.finale__contacts span{font-size:.9rem;color:#a9d2dc;line-height:1.55}
.finale__contacts a{color:#a9d2dc;border-bottom:1px solid rgba(169,210,220,.35);transition:color .2s ease}
.finale__contacts a:hover{color:#7ff0e4}

.booking{background:#fff;border-radius:var(--r-xl);padding:clamp(26px,3vw,38px);box-shadow:var(--sh-lg)}
.booking__title{font-size:1.3rem;margin-bottom:8px}
.booking__note{font-size:.85rem;color:var(--muted-2);margin-bottom:24px}
.booking__form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--f-display);font-weight:500;font-size:.83rem;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 15px;border:1.5px solid var(--line);border-radius:var(--r-btn);
  background:var(--surface-alt);font-size:.92rem;color:var(--ink);
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.field textarea{resize:vertical;min-height:88px;font-family:var(--f-body)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--b-400);background:#fff;box-shadow:0 0 0 4px rgba(20,189,184,.14);
}
.field input.is-invalid,.field textarea.is-invalid{border-color:#e0645c;background:#fff6f5}
.booking__error{grid-column:1/-1;margin:0;font-size:.85rem;color:#c9453c}
.booking__form .btn{grid-column:1/-1;margin-top:4px}
.booking__alt{grid-column:1/-1;text-align:center;font-size:.85rem;color:var(--muted-2);margin:0}
.booking__alt a{color:var(--b-700);font-weight:600}

/* ---------- 20. Footer ---------- */
.footer{background:#08222c;color:#93b9c3;padding-top:clamp(56px,6vw,84px)}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.85fr)) minmax(0,1.25fr);
  gap:clamp(30px,4vw,54px);padding-bottom:clamp(40px,4.5vw,60px);
}
.brand--footer .brand__name{color:#fff}
.brand--footer .brand__sub{color:var(--b-300)}
.brand--footer .brand__swoosh{color:var(--b-400)}
.footer__about{margin-top:20px;font-size:.92rem;line-height:1.72;max-width:340px}
.footer__social{display:flex;gap:11px;margin-top:24px}
.footer__social a{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#bcdfe7;
  transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.footer__social a:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-3px)}
.footer__head{
  font-family:var(--f-display);font-weight:600;font-size:1rem;color:#fff;
  margin-bottom:20px;
}
.footer__col ul{display:grid;gap:12px}
.footer__col a{font-size:.92rem;transition:color .2s ease}
.footer__col a:hover{color:var(--b-300)}
.footer__contact li{display:flex;align-items:flex-start;gap:12px;font-size:.92rem;line-height:1.65}
.footer__contact .ico{color:var(--b-400);margin-top:3px}
.footer__bar{
  display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;justify-content:space-between;
  padding-block:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:#6f959f;
}
.footer__bar p{margin:0}
.footer__area{max-width:640px}

/* ---------- 21. Mobile quick bar ---------- */
.quickbar{display:none}

/* ---------- 22. Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.75,.35,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}

/* =============================================================
   23. Responsive
   ============================================================= */

/* nav density tightens in stages before it collapses */
@media (max-width:1360px){
  .nav{gap:12px}
  .nav__link{padding:11px 9px;font-size:.88rem}
  .nav__link::after{left:9px;right:9px}
}

@media (max-width:1240px){
  .btn--phone{padding:11px}
  .btn--phone .btn__label{display:none}
}

/* below this the seven nav items no longer fit, and the hero stacks.
   Both switch together so the copy never lands on top of the image. */
@media (max-width:1180px){
  :root{--hdr:74px}

  .burger{display:inline-flex}
  .nav{
    position:fixed;top:0;right:0;bottom:0;width:min(370px,86vw);
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;z-index:95;padding:26px 24px calc(26px + env(safe-area-inset-bottom));
    box-shadow:-20px 0 60px -30px rgba(15,39,64,.5);
    transform:translateX(102%);transition:transform .35s cubic-bezier(.3,.8,.4,1);
    overflow-y:auto;margin-left:0;
  }
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:2px;margin-top:56px}
  .nav__link{width:100%;justify-content:space-between;padding:14px 16px;font-size:1rem;border-radius:6px}
  /* a full-width underline reads as a divider in the stacked panel */
  .nav__link::after{display:none}
  .nav__link.is-active{background:var(--b-50)}
  .subnav{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--b-100);border-radius:0;
    margin:2px 0 6px 18px;padding:2px 0;display:none;
  }
  .has-sub.is-open .subnav{display:block}
  .nav__cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
  .nav__cta .btn{width:100%}
  .nav__cta .btn--phone{padding:12px 20px}
  .nav__cta .btn--phone .btn__label{display:inline}

  /* hero stacks: copy -> image -> form -> cards */
  .hero__inner{display:flex;flex-direction:column}
  .hero__copy{order:1;max-width:none}
  .hero__photo{
    order:2;position:relative;width:100%;height:clamp(300px,42vw,430px);
    inset:auto;margin-top:32px;border-radius:var(--r-xl);
    background-position:center 36%,center 36%;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero__photo::after{display:none}
  .hero__side{order:3;width:100%;max-width:520px;margin:26px auto 0 0}
  .usp{order:4;grid-column:auto;grid-row:auto}
  .hero__wave{height:clamp(80px,11vw,150px)}

  .split{grid-template-columns:minmax(0,1fr);gap:44px}
  .split--reverse .split__media{order:0}
  .band__inner{grid-template-columns:minmax(0,1fr)}
  .support__grid{grid-template-columns:minmax(0,1fr)}
  .packages__grid{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  .pkg--featured{transform:none}
  .pkg--featured:hover{transform:translateY(-5px)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step:not(:last-child)::after{display:none}
  .testimonials__grid{grid-template-columns:minmax(0,1fr)}
  .finale__inner{grid-template-columns:minmax(0,1fr)}
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1120px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the USP cards need room for the icon, title and arrow */
@media (max-width:980px){
  .usp{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .brand__name{font-size:1.28rem}
  .brand__swoosh{width:54px;top:-8px}
  .brand__sub{font-size:.55rem;letter-spacing:.36em;text-indent:.36em}
  .tagpill{font-size:.76rem;padding:8px 15px 8px 13px}
  .hero__photo{height:clamp(230px,54vw,320px)}
  .hero__side{max-width:none}
  .trustrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
  .trustrow li{padding-inline:0}
  .trustrow strong{white-space:normal}
  .trustrow li+li{border-left:0}
  .brands__wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frame{aspect-ratio:4/3}
  .frame__chip{left:12px;right:12px;bottom:14px;max-width:none}
  .frame__chip--right{left:12px;right:12px}
  .frame__badge{right:12px;top:14px}
  .booking__form{grid-template-columns:1fr}
  .footer__top{grid-template-columns:minmax(0,1fr);gap:34px}
  .footer__bar{flex-direction:column;align-items:flex-start}

  body{padding-bottom:70px}
  .quickbar{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .quickbar__btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:#fff;padding:14px 8px;
    font-family:var(--f-display);font-weight:600;font-size:.85rem;color:var(--ink-2);
  }
  .quickbar__btn .ico{width:18px;height:18px;color:var(--b-600)}
  .quickbar__btn--wa .ico{color:#25a55c}
  .quickbar__btn--book{background:var(--grad);color:#fff}
  .quickbar__btn--book .ico{color:#fff}
}

@media (max-width:640px){
  .usp{grid-template-columns:minmax(0,1fr)}
  .trustrow{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:520px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .trust__grid{grid-template-columns:minmax(0,1fr)}
  .hero__actions .btn{width:100%}
  .hero__title{letter-spacing:-.03em}
  .split__actions .btn{width:100%}
  .band__actions .btn{width:100%}
}

/* ---------- 24. Motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.quickbar,.scrolldown,.hero__wash,.hero__photo,.band__media,.finale__media{display:none!important}
  body{color:#000}
}