/* Easy Breeze Air — site styles (Version 1.3)
   Brand: navy / deep blue / electric blue / sky / lime. Headings Archivo, body DM Sans.
   Structure: 1 tokens · 2 base · 3 buttons · 4 header · 5 hero · 6 brands · 7 sections · 8 services
              9 calculator · 10 process · 11 gallery · 12 reviews · 13 why · 14 areas · 15 faq · 16 enquiry
              17 footer · 18 legal pages · 19 motion */

/* ============ 1. Design tokens ============ */
:root{
  /* brand */
  --navy:#071f4d; --navy-900:#041431; --navy-950:#030d22; --blue:#0b3f99; --blue-2:#1356c4; --sky:#27b4f0;
  --lime:#d9f400; --lime-hover:#e6ff2e; --ice:#eef6fd; --ice-2:#f6fafe;
  /* neutrals */
  --ink:#0c1a33; --text:#33415a; --muted:#5a6880; --line:#dfe7f1; --line-2:#e9eff6; --white:#fff;
  --field-border:#7f91ad; /* form controls: 3.2:1 on white, so fields are easy to find */
  --on-navy:#c9d8f2; --on-navy-2:#93aedb; --on-blue-small:#c3d5f2; /* small text on #0b3f99: 6.5:1 */
  /* states */
  --danger:#b4232a; --danger-bg:#fdf0f0; --success:#0f7a44;
  /* type */
  --head:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --fs-h1:clamp(2.15rem,4.6vw,3.85rem);
  --fs-h2:clamp(1.8rem,3.1vw,2.55rem);
  --fs-h3:1.2rem;
  --fs-lead:clamp(1.03rem,1.35vw,1.16rem);
  /* space */
  --sec-y:clamp(4.25rem,8vw,7rem);
  --gap:clamp(1rem,2vw,1.5rem);
  /* shape */
  --r-sm:12px; --r:18px; --r-lg:26px;
  --shadow-sm:0 1px 2px rgba(7,31,77,.06),0 4px 14px -6px rgba(7,31,77,.12);
  --shadow:0 2px 4px rgba(7,31,77,.04),0 24px 60px -30px rgba(7,31,77,.35);
  --shadow-lg:0 4px 10px rgba(7,31,77,.05),0 40px 90px -40px rgba(7,31,77,.5);
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:72px;
}

/* ============ 2. Base ============ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--text);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--head);color:var(--ink);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}
@media (max-width:420px){.wrap{width:calc(100% - 2rem)}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:3px;border-radius:6px}
/* On dark surfaces the focus ring switches to lime (12.9:1 on navy); electric blue is 6.6:1 on white */
:is(.hero,.site-header,.calc-out,.areas-sec,.call-card,.svc-feature,.site-footer,.legal-hero,.lightbox) :focus-visible{outline-color:var(--lime)}
.skip-link{position:absolute;left:1rem;top:-100px;z-index:100;background:var(--lime);color:var(--navy);padding:.7rem 1rem;border-radius:10px;font-weight:700;text-decoration:none}
.skip-link:focus{top:1rem}

.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--head);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.eyebrow-lime{color:var(--lime)}

/* ============ 3. Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;font-family:var(--head);font-weight:700;font-size:.98rem;letter-spacing:-.005em;line-height:1.2;padding:.8em 1.4em;border-radius:999px;text-decoration:none;border:0;cursor:pointer;text-align:center;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn .arrow{transition:transform .2s var(--ease)}
.btn-lg{min-height:56px;padding:.95em 1.6em;font-size:1.02rem}
.btn-lime{background:var(--lime);color:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 28px -14px rgba(196,220,0,.95)}
.btn-lime:hover{background:var(--lime-hover)}
.btn-ghost{background:rgba(255,255,255,.04);color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-2)}
.btn-soft{background:var(--ice);color:var(--navy)}
.btn-soft:hover{background:#e2effb}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}.btn:hover .arrow{transform:translateX(3px)}}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.75;cursor:progress;transform:none}

/* ============ 4. Header & navigation ============ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(5,24,62,.96);border-bottom:1px solid rgba(255,255,255,.06);transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
@supports (backdrop-filter:blur(8px)){.site-header{background:rgba(5,24,62,.86);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px)}}
.site-header.is-scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff;min-width:0}
.brand img{width:44px;height:44px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-name{font-family:var(--head);font-weight:800;font-size:1.02rem;letter-spacing:.02em;line-height:1;white-space:nowrap}
.brand-tag{color:var(--lime);font-family:var(--head);font-weight:700;font-size:.6rem;letter-spacing:.24em;margin-top:6px;white-space:nowrap}
.nav-links{display:flex;gap:.25rem;list-style:none}
.nav-links a{position:relative;display:block;color:var(--on-navy);text-decoration:none;font-weight:500;font-size:.93rem;padding:.55rem .75rem;border-radius:999px;transition:color .2s,background-color .2s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.nav-call{min-height:44px;padding:.6em 1.1em;font-size:.93rem}
.menu-toggle{display:none;width:46px;height:46px;border-radius:12px;border:1.5px solid rgba(255,255,255,.22);background:transparent;color:#fff;cursor:pointer;align-items:center;justify-content:center;transition:background-color .2s}
.menu-toggle:hover{background:rgba(255,255,255,.08)}
.menu-toggle svg{width:24px;height:24px}
.menu-toggle .i-close{display:none}
.menu-toggle[aria-expanded="true"] .i-open{display:none}
.menu-toggle[aria-expanded="true"] .i-close{display:block}
@media (max-width:1060px){.nav-links a{padding:.55rem .55rem;font-size:.9rem}}
@media (max-width:960px){
  .menu-toggle{display:inline-flex}
  .site-nav{position:fixed;left:0;right:0;top:var(--header-h);background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);padding:.5rem 1.25rem 1.5rem;display:none;max-height:calc(100dvh - var(--header-h));overflow:auto}
  .site-nav.is-open{display:block;animation:menu-in .22s var(--ease)}
  .nav-links{flex-direction:column;gap:0}
  .nav-links a{font-size:1.08rem;font-family:var(--head);font-weight:700;color:#fff;padding:1rem .25rem;border-radius:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-links a:hover{background:none;color:var(--lime)}
  .nav-links li:last-child a{border-bottom:0}
  .nav-call .label-long{display:none}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .nav-call .label-num{display:none}
  .nav-call{width:46px;height:46px;min-height:0;padding:0;border-radius:12px}
  .brand-name{font-size:.95rem}
  .brand img{width:40px;height:40px}
}
@media (max-width:350px){.brand-tag{display:none}}

/* ============ 5. Hero ============ */
.hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;
  background:
    radial-gradient(60% 75% at 78% 42%,rgba(39,180,240,.20),transparent 62%),
    radial-gradient(45% 60% at 8% 110%,rgba(19,86,196,.38),transparent 70%),
    linear-gradient(165deg,#0a3a8e 0%,#072a6c 38%,#061d4a 72%,#05173d 100%)}
/* fine top light + soft floor so the hero has depth without pattern noise */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%),radial-gradient(120% 60% at 50% 120%,rgba(3,13,34,.55),transparent 60%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(4rem,8vw,6.5rem) 0 clamp(6.5rem,10vw,8.5rem)}
.hero h1{color:#fff;font-size:var(--fs-h1);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin-top:1.3rem}
.hero h1 .h1-line{display:block}
.hero h1 em{display:block;font-style:normal;color:var(--lime);margin-top:.08em}
/* Hero location line: one line with a dot when the column has room, otherwise two clean lines without the dot.
   Decided by the hero column's own width (container query), not the screen width, because the column narrows on wide screens. */
.hero-copy{container-type:inline-size}
.hero-eyebrow{flex-wrap:wrap;row-gap:.25rem;column-gap:.55rem;letter-spacing:.12em}
@container (max-width:600px){.hero-eyebrow .sep{display:none}.hero-eyebrow span:last-child{flex-basis:100%}}
@media (max-width:340px){.hero h1{font-size:1.85rem}}   /* keeps the four headline lines intact on the narrowest phones */
.hero .lead{font-size:var(--fs-lead);color:var(--on-navy);max-width:34rem;margin:1.5rem 0 2.2rem;line-height:1.7}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-facts{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);list-style:none;color:var(--on-navy);font-size:.92rem;max-width:36rem}
.hero-facts li{display:flex;align-items:center;gap:.5rem}
.hero-facts svg{width:16px;height:16px;color:var(--lime);flex:none}
.hero-facts a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.hero-facts a:hover{color:#fff;text-decoration-color:var(--lime)}

/* Signature logo: still ring + spinning fan, framed by fine orbit lines and one soft light */
.hero-visual{position:relative;display:grid;place-items:center}
.hero-visual::before,.hero-visual::after{content:"";position:absolute;border-radius:50%;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%)}
.hero-visual::before{width:min(560px,118%);aspect-ratio:1;border:1px solid rgba(255,255,255,.09)}
.hero-visual::after{width:min(680px,142%);aspect-ratio:1;border:1px solid rgba(255,255,255,.05)}
.badge-wrap{position:relative;width:min(440px,100%);aspect-ratio:1}
.badge-wrap::before{content:"";position:absolute;inset:-12%;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,rgba(39,180,240,0),rgba(39,180,240,.30),rgba(217,244,0,.16),rgba(39,180,240,0) 70%);
  filter:blur(38px);opacity:.75;animation:spin 28s linear infinite}
.badge-wrap .badge-base{position:relative;width:100%;height:100%;border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 0 10px rgba(255,255,255,.035),0 40px 80px -30px rgba(0,0,0,.75),0 18px 40px -20px rgba(3,13,34,.8)}
/* Spinning fan: same size as the logo and centred on the fan hub, so it turns on the spot */
/* The one motion moment: the fan eases up from still, then turns at its steady 9s per turn.
   Spin-up: 0->60deg over 3s on a quadratic ease-in, whose end speed (40deg/s) equals the steady speed, so there is no jolt. */
.badge-wrap .badge-fan{position:absolute;inset:0;width:100%;height:100%;animation:fan-spinup 3s cubic-bezier(.333,0,.667,.333) both,fan-spin 9s linear 3s infinite;will-change:transform}
.badge-wrap.is-paused .badge-fan,.badge-wrap.is-paused::before{animation-play-state:paused}
@keyframes fan-spinup{from{transform:rotate(0deg)}to{transform:rotate(60deg)}}
@keyframes fan-spin{from{transform:rotate(60deg)}to{transform:rotate(420deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:1.6rem;padding:2.25rem 0 5.25rem;text-align:left}
  .hero-visual{order:-1;justify-self:center;margin-top:.4rem}
  .badge-wrap{width:clamp(140px,40vw,190px)}
  .hero-visual::before{width:126%}
  .hero-visual::after{display:none}
  .hero h1{margin-top:1rem}
  .hero .lead{margin:1.1rem 0 1.7rem}
  .hero-facts{margin-top:1.7rem}
}
@media (max-width:520px){
  .hero-facts{flex-direction:column;gap:.45rem}
  .ctas .btn{width:100%}
}

/* ============ 6. Brand strip (floats over the hero edge) ============ */
/* A slow, linear right-to-left loop. Two identical logo sets sit side by side; the track moves exactly one set
   (-50%), so the copy lands where the first set began and the loop never jumps. Kept quiet on purpose: the hero fan
   is the page's main motion. */
.brands{position:relative;z-index:2;margin-top:-3.6rem}
.brands-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.6rem;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.5rem 1.4rem 1.5rem 2.4rem;
  --logo-gap:clamp(2.6rem,4.6vw,4.4rem);--marquee-dur:56s}
.brands-label{font-family:var(--head);font-weight:700;font-size:1rem;line-height:1.35;color:var(--ink);padding-right:2rem;border-right:1px solid var(--line)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:brand-scroll var(--marquee-dur) linear infinite;will-change:transform}
@keyframes brand-scroll{to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}
.marquee.is-paused .marquee-track{animation-play-state:paused}
.logo-set{display:flex;align-items:center;flex:none;gap:var(--logo-gap);padding-right:var(--logo-gap);list-style:none}
.logo-set li{display:flex;align-items:center;flex:none;height:64px}
.logo-set img{width:auto;max-width:none;height:var(--h,36px)}
/* optical sizing: each mark gets a height that makes them read as equal weight */
.b-kaden{--h:34px}.b-fg{--h:40px}.b-mhi{--h:34px}.b-lg{--h:46px}.b-samsung{--h:26px}.b-me{--h:40px}.b-rinnai{--h:33px}
.marquee-toggle{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s}
@media (hover:hover){.marquee-toggle:hover{color:var(--ink);border-color:var(--field-border)}}
.marquee-toggle svg{width:14px;height:14px}
.marquee-toggle .i-play,.marquee-toggle[aria-pressed="true"] .i-pause{display:none}
.marquee-toggle[aria-pressed="true"] .i-play{display:block}
@media (max-width:900px){
  .brands-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label toggle" "logos logos";gap:.6rem 1rem;padding:1.1rem 1.1rem 1rem 1.4rem;--marquee-dur:44s}
  .brands-label{grid-area:label;border-right:0;padding-right:0}
  .brands-label .br-desk{display:none}
  .marquee{grid-area:logos}
  .marquee-toggle{grid-area:toggle}
}
@media (max-width:640px){
  .brands{margin-top:-2.8rem}
  .brands-card{--logo-gap:2.4rem}
  .logo-set li{height:52px}
  .logo-set img{height:calc(var(--h,36px) * .85)}
  .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
}
/* Reduced motion: no movement at all; the seven logos sit still, wrapped and centred */
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;width:auto}
  .logo-set{flex:1;flex-wrap:wrap;justify-content:center;row-gap:.2rem;column-gap:2.2rem;padding-right:0}
  .logo-set[aria-hidden="true"],.marquee-toggle{display:none}
}

/* ============ 7. Sections & headings ============ */
section{scroll-margin-top:calc(var(--header-h) + 8px)}
.sec{padding:var(--sec-y) 0}
.sec-tint{background:linear-gradient(180deg,var(--ice-2),var(--ice))}
.sec-head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head h2{font-size:var(--fs-h2);font-weight:800;margin:.85rem 0 .9rem}
.sec-head p:not(.eyebrow){color:var(--muted);font-size:1.05rem;max-width:40rem}
.sec-head-center{margin-inline:auto;text-align:center}
.sec-head-center p{margin-inline:auto}
#services{padding-top:clamp(4.5rem,8vw,6.5rem)}

/* ============ 8. Services (one featured + three supporting) ============ */
.services{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:repeat(3,auto);gap:var(--gap);list-style:none}
.svc article{position:relative;height:100%;display:flex;gap:1.2rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.6rem;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
@media (hover:hover){
  .svc article:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c9d9ee}
  .svc article:hover .svc-ic{background:var(--blue-2);color:#fff}
}
.svc-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--ice);color:var(--blue-2);flex:none;transition:background-color .25s,color .25s}
.svc-ic svg{width:26px;height:26px}
.svc h3{font-size:var(--fs-h3);font-weight:800;margin-bottom:.4rem}
.svc p{color:var(--muted);font-size:.97rem}
.svc-body{display:flex;flex-direction:column;min-width:0}
.svc-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.8rem;font-family:var(--head);font-weight:700;color:var(--blue-2);text-decoration:none;font-size:.93rem;min-height:44px;align-self:flex-start}
.svc-link span{transition:transform .2s var(--ease)}
.svc-link:hover span{transform:translateX(3px)}
.svc-link:hover{text-decoration:underline;text-underline-offset:3px}
/* featured installation card */
.svc-feature{grid-row:1/4}
.svc-feature article{flex-direction:column;gap:0;padding:clamp(1.8rem,3vw,2.6rem);border:0;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,#0b3f99,#071f4d 70%);box-shadow:var(--shadow-lg)}
.svc-feature .svc-ic{width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.08);color:var(--lime);border:1px solid rgba(255,255,255,.12);margin-bottom:1.6rem}
.svc-feature .svc-ic svg{width:30px;height:30px}
.svc-kicker{font-family:var(--head);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)!important;margin-bottom:.6rem}
.svc-feature h3{color:#fff;font-size:clamp(1.5rem,2.4vw,1.95rem);margin-bottom:.8rem}
.svc-feature p{color:var(--on-navy);font-size:1.03rem;max-width:30rem}
/* Seven brands as one quiet comma-separated line (pills would crowd the card on phones) */
.svc-brands{display:flex;flex-wrap:wrap;row-gap:.2rem;list-style:none;margin:1.3rem 0 auto;padding-bottom:1.8rem;font-size:.86rem;line-height:1.5;color:#dce8fc;max-width:34rem}
.svc-brands li:not(:last-child)::after{content:",";margin-right:.35em}
.svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;position:relative;z-index:1}
.svc-link-light{color:#fff;margin-top:0}
@media (hover:hover){.svc-feature article:hover{transform:translateY(-3px)}.svc-feature article:hover .svc-ic{background:rgba(255,255,255,.12);color:var(--lime)}}
@media (max-width:860px){
  .services{grid-template-columns:1fr;grid-template-rows:none}
  .svc-feature{grid-row:auto}
}
@media (max-width:420px){.svc article{flex-direction:column;gap:.9rem;padding:1.4rem}}

/* ============ 9. Calculator ============ */
.calc-sec{background:linear-gradient(180deg,var(--ice-2),var(--ice))}
.calc{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;border:1px solid var(--line-2)}
.calc-in{padding:clamp(1.5rem,3vw,2.6rem)}
fieldset{border:0;min-width:0}
.calc-group legend{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .6rem;font-family:var(--head);font-weight:800;font-size:1.08rem;color:var(--ink);margin-bottom:1.1rem;width:100%}
.step-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--lime);font-size:.8rem;font-weight:800}
.legend-hint{font-family:var(--body);font-weight:400;font-size:.88rem;color:var(--muted);margin-left:auto}
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.field label,.label{display:block;font-family:var(--body);font-weight:700;font-size:.86rem;color:var(--ink);margin-bottom:.4rem}
.field .opt{font-weight:400;color:var(--muted)}
.unit-in{position:relative}
.unit-in input{width:100%;font:700 1.35rem var(--head);letter-spacing:-.01em;color:var(--navy);padding:.65em 2em .65em .85em;border:1.5px solid var(--field-border);border-radius:14px;background:var(--ice-2);transition:border-color .2s,background-color .2s,box-shadow .2s;min-height:58px;font-variant-numeric:tabular-nums}
.unit-in input::placeholder{color:#a3afc2;font-weight:600}
.unit-in input:hover{border-color:#5f7290}
.unit-in input:focus{border-color:var(--blue-2);background:#fff;outline:none;box-shadow:0 0 0 4px rgba(19,86,196,.14)}
.unit-in .unit{position:absolute;right:.9em;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700;pointer-events:none}
.field-msg{font-size:.82rem;color:var(--muted);margin-top:.35rem;min-height:1.2em}
.is-invalid input,.is-invalid select,.is-invalid textarea{border-color:var(--danger)!important;background:var(--danger-bg)!important}
.is-invalid .field-msg,.is-invalid .err{color:var(--danger);font-weight:600}
.factors{margin-top:1.4rem;padding-top:1.6rem;border-top:1px solid var(--line-2)}
.factor-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem}
select{width:100%;padding:.75em 2.6em .75em .95em;border:1.5px solid var(--field-border);border-radius:12px;background:var(--ice-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231356c4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1em center;appearance:none;-webkit-appearance:none;min-height:50px;font-size:.98rem;color:var(--ink);cursor:pointer;transition:border-color .2s,box-shadow .2s,background-color .2s}
select:hover{border-color:#5f7290}
select:focus{border-color:var(--blue-2);outline:none;box-shadow:0 0 0 4px rgba(19,86,196,.14);background-color:#fff}
.calc-note{font-size:.86rem;color:var(--muted);margin-top:1.5rem;padding:.85rem 1rem;background:var(--ice-2);border-radius:var(--r-sm);border:1px solid var(--line-2)}
.calc-note b{color:var(--ink)}
/* result panel */
.calc-out{position:relative;overflow:hidden;color:#fff;padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;
  background:linear-gradient(165deg,#0b3f99,#071f4d 65%,#05173d)}
.calc-out>*{position:relative}
.out-label{font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-2)}
.out-kw{font-family:var(--head);font-weight:800;font-size:clamp(3.4rem,6.5vw,5rem);letter-spacing:-.04em;line-height:1;margin:.45rem 0 .55rem;color:var(--lime);font-variant-numeric:tabular-nums}
.out-kw small{font-size:.38em;margin-left:.1em;letter-spacing:0;color:#eaff7a}
.out-kw.is-text{font-size:clamp(2rem,4vw,2.7rem);letter-spacing:-.02em}
.out-kw.is-empty{color:rgba(217,244,0,.38);font-size:clamp(2.8rem,5vw,3.6rem)}
.out-kw.pop{animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
.out-sub{color:var(--on-navy);font-size:.95rem}
.out-sub b{color:#fff;font-weight:700}
.out-flag{margin-top:.9rem;font-size:.88rem;color:#fff;background:rgba(217,244,0,.1);border:1px solid rgba(217,244,0,.32);border-radius:12px;padding:.65rem .85rem}
.size-scale{margin-top:1.5rem}
.sizes{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:.6rem;list-style:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:4px}
.sizes li{text-align:center;font:700 .78rem var(--head);padding:.55em 0;border-radius:9px;color:var(--on-navy-2);transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.sizes li.on{background:var(--lime);color:var(--navy);box-shadow:0 6px 18px -8px rgba(217,244,0,.8)}
.out-price{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.12)}
.out-price strong{display:block;font-family:var(--head);font-weight:800;font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.02em;color:#fff;margin-top:.35rem}
.out-price p{font-size:.85rem;color:var(--on-navy-2);margin-top:.35rem}
/* Calculator brands: native disclosure, closed by default so the result stays the focus */
.out-brands{margin-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.out-brands summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;cursor:pointer;list-style:none;font-weight:700;font-size:.95rem;color:#fff}
.out-brands summary::-webkit-details-marker{display:none}
.out-brands summary::after{content:"";flex:none;width:8px;height:8px;margin-right:.35rem;border-right:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.out-brands[open] summary::after{transform:translateY(2px) rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.out-brands summary::after{transition:none}}
.out-brands ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1.2rem;list-style:none}
.out-brands li{font-size:.9rem;color:#e3eeff}
.out-brands-note{font-size:.82rem;line-height:1.5;margin:.7rem 0 .9rem}
.out-cta{margin-top:auto;padding-top:1.6rem}
.disclaimer{margin-top:1.1rem;font-size:.8rem;color:var(--on-navy-2);line-height:1.55}
@media (max-width:960px){.calc{grid-template-columns:1fr}.out-cta{margin-top:0}}
@media (max-width:520px){
  .dims{grid-template-columns:1fr 1fr}
  .dims .field:last-child{grid-column:1/-1}
  .factor-grid{grid-template-columns:1fr}
  .legend-hint{margin-left:0;width:100%}
  .out-cta .btn{width:100%}
  .sizes li{font-size:.7rem}
}

/* ============ 10. Process timeline ============ */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);list-style:none}
.steps::before{content:"";position:absolute;top:31px;left:calc(12.5% - 0px);right:12.5%;height:2px;background:linear-gradient(90deg,var(--blue-2),var(--sky));opacity:.25}
.step{position:relative;text-align:center;padding:0 .5rem}
.step-dot{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1.2rem;border-radius:50%;background:#fff;color:var(--blue-2);border:1.5px solid var(--line);box-shadow:0 0 0 8px #fff,var(--shadow-sm);transition:background-color .25s,color .25s,border-color .25s}
.step-dot svg{width:26px;height:26px}
@media (hover:hover){.step:hover .step-dot{background:var(--navy);color:var(--lime);border-color:var(--navy)}}
.step-n{font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);margin-bottom:.35rem}
.step h3{font-size:1.15rem;font-weight:800;margin-bottom:.45rem}
.step p{color:var(--muted);font-size:.95rem;max-width:16rem;margin-inline:auto}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:0;max-width:34rem}
  .steps::before{top:32px;bottom:32px;left:31px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--blue-2),var(--sky))}
  .step{display:grid;grid-template-columns:64px 1fr;column-gap:1.2rem;text-align:left;padding:0 0 1.8rem}
  .step:last-child{padding-bottom:0}
  .step-dot{grid-row:1/4;margin:0}
  .step p{margin:0;max-width:none}
}

/* ============ 11. Gallery ============ */
.placeholder{position:relative;border:1.5px dashed #a9bbd6!important;background:repeating-linear-gradient(135deg,#f7faff 0 12px,#eff4fb 12px 24px)!important}
.ph-tag{display:inline-block;font:800 .64rem var(--head);letter-spacing:.14em;text-transform:uppercase;background:#ffe9a8;color:#5a4300;border-radius:6px;padding:.25em .55em;margin-bottom:.6rem}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,220px);grid-auto-flow:dense;gap:var(--gap);list-style:none}
.shot{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ice)}
.shot-tall{grid-column:span 2;grid-row:span 2}
.shot-wide{grid-column:span 2}
.shot a{display:block;height:100%;cursor:zoom-in}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
@media (hover:hover){.shot a:hover img{transform:scale(1.035)}}
.shot-cap{position:absolute;left:.75rem;bottom:.75rem;font-size:.8rem;font-weight:500;color:#fff;background:rgba(4,20,49,.72);backdrop-filter:blur(6px);padding:.35em .75em;border-radius:999px;pointer-events:none}
.shot.placeholder .shot-cap{background:rgba(255,255,255,.85);color:var(--muted);border:1px dashed #a9bbd6}
.shot-ph{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;color:var(--muted);font-size:.88rem}
.shot-ph svg{width:36px;height:36px;color:#8ea2c2;margin-bottom:.4rem}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}}
@media (max-width:520px){.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:130px;gap:.6rem}.shot-wide{grid-column:span 2}.shot-ph{font-size:.78rem}.shot-ph svg{width:26px;height:26px}.shot-cap{font-size:.7rem;left:.45rem;bottom:.45rem}.shot-sq .shot-cap{display:none}}
/* lightbox */
.lightbox{margin:auto;padding:0;border:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh;overflow:visible}
.lightbox::backdrop{background:rgba(3,13,34,.88);backdrop-filter:blur(4px)}
.lightbox figure img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox figcaption{color:#fff;text-align:center;margin-top:.8rem;font-size:.95rem}
.lb-close{position:absolute;top:-52px;right:0;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.18)}

/* ============ 12. Reviews & credentials ============ */
.trust-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--gap);align-items:stretch}
.reviews{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);list-style:none}
.review{position:relative;border-radius:var(--r);padding:1.6rem 1.5rem 1.4rem;display:flex;flex-direction:column}
.review .ph-tag{align-self:flex-start}
.review .q{font-family:Georgia,"Times New Roman",serif;font-size:3.6rem;line-height:.7;color:var(--blue-2);opacity:.35;height:1.6rem;margin:.2rem 0 .4rem}
.review p{color:var(--text);font-size:1.02rem;line-height:1.6}
.review .review-by{margin-top:auto;padding-top:1rem;font-size:.86rem;font-weight:700;color:var(--muted)}
.creds{border-radius:var(--r);padding:1.6rem}
.creds-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--blue-2);border:1px solid var(--line);margin-bottom:1rem}
.creds-ic svg{width:24px;height:24px}
.creds h3{font-size:1.15rem;margin-bottom:1rem}
.creds dl{display:grid;gap:.85rem}
.creds dl>div{padding-bottom:.85rem;border-bottom:1px solid rgba(169,187,214,.45)}
.creds dl>div:last-child{border-bottom:0;padding-bottom:0}
.creds dt{font-family:var(--head);font-weight:700;color:var(--ink);font-size:.92rem}
.creds dd{color:var(--muted);font-size:.9rem}
@media (max-width:960px){.trust-grid{grid-template-columns:1fr}}
@media (max-width:640px){.reviews{grid-template-columns:1fr}}

/* ============ 13. Why Easy Breeze Air ============ */
.why{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.why .sec-head{margin-bottom:2rem}
.ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ticks li{display:flex;flex-direction:column;gap:.8rem;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:1.3rem 1.3rem 1.4rem;box-shadow:var(--shadow-sm)}
.ticks .tick{width:34px;height:34px;border-radius:10px;background:var(--navy);display:grid;place-items:center;color:var(--lime)}
.ticks .tick svg{width:16px;height:16px}
.ticks b{display:block;color:var(--ink);font-family:var(--head);font-weight:800;font-size:1.04rem;margin-bottom:.25rem}
.ticks span{color:var(--muted);font-size:.94rem;line-height:1.55}
.call-card{position:relative;overflow:hidden;color:#fff;border-radius:var(--r-lg);padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--shadow-lg);
  background:linear-gradient(160deg,#0b3f99,#071f4d 70%)}
.call-badge{width:56px;height:56px;border-radius:50%;margin-bottom:1.2rem;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.call-card h3{color:#fff;font-size:1.6rem;font-weight:800}
.call-card p{color:var(--on-navy);margin:.6rem 0 1.4rem}
.call-card .num{font-family:var(--head);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.5rem);letter-spacing:-.02em;color:var(--lime);text-decoration:none;display:inline-block}
.call-card .em{color:var(--on-navy);display:block;margin-top:.3rem;overflow-wrap:anywhere;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.call-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;position:relative;z-index:1}
@media (max-width:960px){.why{grid-template-columns:1fr}}
@media (max-width:560px){.ticks{grid-template-columns:1fr}.call-actions .btn{flex:1 1 auto}}

/* ============ 14. Service areas ============ */
.areas-sec{position:relative;color:#fff;background:linear-gradient(180deg,var(--navy),var(--navy-900))}
.areas-sec .sec-head h2{color:#fff}
.areas-sec .sec-head p:not(.eyebrow){color:var(--on-navy)}
.area-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.area-controls{position:sticky;top:calc(var(--header-h) + 1.5rem)}
.area-label{display:block;font-family:var(--head);font-weight:700;font-size:1.02rem;color:#fff;margin-bottom:.6rem}
.area-label-sm{font-size:.92rem;margin-top:1.6rem;color:var(--on-navy)}
/* The region picker is the section's one bold element: a large native select, so phones get their own picker */
.area-pick{position:relative}
.area-pin{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;color:var(--lime);pointer-events:none}
.area-pin svg{width:22px;height:22px}
.area-pick::after{content:"";position:absolute;right:1.3rem;top:50%;width:10px;height:10px;border-right:2.5px solid var(--lime);border-bottom:2.5px solid var(--lime);transform:translateY(-70%) rotate(45deg);pointer-events:none}
#area-select{appearance:none;-webkit-appearance:none;width:100%;min-height:66px;padding:.7rem 2.9rem .7rem 3rem;font-family:var(--head);font-weight:800;font-size:clamp(1.08rem,1.9vw,1.38rem);letter-spacing:-.01em;color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(217,244,0,.55);border-radius:var(--r);cursor:pointer;text-overflow:ellipsis;transition:border-color .2s,background-color .2s}
@media (hover:hover){#area-select:hover{border-color:var(--lime);background:rgba(255,255,255,.09)}}
#area-select:focus{box-shadow:none}
#area-select:focus-visible{outline:3px solid var(--lime);outline-offset:3px}   /* beats the generic select:focus{outline:none} used by the white form fields */
#area-select optgroup,#area-select option{color:var(--ink);background:#fff;font-family:var(--body);font-weight:500;font-size:1rem}
.area-search{width:100%;min-height:50px;padding:.6rem 1rem;font:inherit;font-size:1rem;color:#fff;background:rgba(255,255,255,.04);border:1px solid var(--field-border);border-radius:var(--r-sm)}
.area-search::placeholder{color:var(--on-navy-2);opacity:1}
.area-status{min-height:1.5em;margin-top:.55rem;font-size:.9rem;color:var(--on-navy)}
.area-status:empty{min-height:0;margin:0}
.area-results{list-style:none;margin-top:.5rem;display:grid;gap:.35rem}
.area-results:empty{display:none}
.area-results button{width:100%;min-height:48px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.15rem 1rem;padding:.55rem .9rem;text-align:left;font:inherit;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);cursor:pointer;transition:border-color .2s}
@media (hover:hover){.area-results button:hover{border-color:rgba(217,244,0,.6)}}
.area-results .r-sub{font-weight:700}
.area-results .r-region{font-size:.84rem;color:var(--on-navy-2)}
.area-panels{display:grid;gap:1rem}
.area-panel{padding:clamp(1.35rem,3vw,2.1rem);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);background:rgba(255,255,255,.035)}
.area-panel h3{font-family:var(--head);font-weight:800;font-size:clamp(1.45rem,2.6vw,1.95rem);letter-spacing:-.015em;line-height:1.15;color:#fff}
.area-panel h3:focus:not(:focus-visible){outline:none}
.area-tier{display:flex;align-items:center;gap:.55rem;margin-top:.6rem;font-size:.9rem;font-weight:700;color:var(--lime)}
.area-dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.tier-ask .area-tier{color:var(--sky)}
.tier-ask .area-dot{background:none;border:2px solid currentColor}
.area-blurb{margin-top:.8rem;color:var(--on-navy);max-width:60ch}
.area-suburbs{list-style:none;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);columns:3 8.5rem;column-gap:1.5rem}
.area-suburbs li{break-inside:avoid;padding:.2rem 0;font-size:.93rem;color:#dfe9fb}
.area-suburbs li.is-match{color:var(--lime);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.area-panel.is-entering{animation:area-in .28s var(--ease)}
@keyframes area-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.area-panel.is-entering{animation:none}}
.areas-note{margin-top:.9rem;color:var(--on-navy);font-size:.95rem}
.areas-note a{color:var(--lime);text-underline-offset:3px}
.area-ask{display:flex;align-items:center;width:fit-content;min-height:44px;font-weight:700;font-size:1.02rem}
@media (max-width:860px){.area-layout{grid-template-columns:1fr}.area-controls{position:static}}
@media (max-width:400px){#area-select{font-size:.98rem;padding-left:2.5rem;padding-right:2.3rem}.area-pin{left:.7rem}.area-pin svg{width:20px;height:20px}.area-pick::after{right:1rem}}
@media (max-width:340px){#area-select{font-size:.92rem}}

/* ============ 15. FAQ ============ */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.faq-side{position:sticky;top:calc(var(--header-h) + 2rem)}
.faq-side .sec-head{margin-bottom:1.6rem}
.faq-cta{background:var(--ice-2);border:1px solid var(--line-2);border-radius:var(--r);padding:1.2rem 1.3rem}
.faq-cta p{font-family:var(--head);font-weight:700;color:var(--ink)}
.faq-cta a{color:var(--blue-2);font-weight:700;text-underline-offset:3px}
.faq{display:grid;gap:.75rem}
.faq details{border:1px solid var(--line);border-radius:16px;background:#fff;transition:border-color .25s,box-shadow .25s}
.faq details:hover{border-color:#c9d9ee}
.faq details[open]{border-color:#c9d9ee;box-shadow:var(--shadow-sm)}
.faq summary{font-family:var(--head);font-weight:700;font-size:1.04rem;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.35rem;min-height:60px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%231356c4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;transition:transform .3s var(--ease),background-color .3s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:#dfeefc}
.faq details p{color:var(--muted);padding:0 1.35rem 1.25rem;max-width:62ch}
.faq details[open] p{animation:fade-down .3s var(--ease)}
@keyframes fade-down{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr}.faq-side{position:static}}

/* ============ 16. Enquiry ============ */
.enq-sec{background:linear-gradient(180deg,#fff,var(--ice))}
.enq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.enq-side h2{font-size:var(--fs-h2);font-weight:800;margin:.85rem 0 .9rem}
.enq-side>p{color:var(--muted);font-size:1.05rem}
.contact-list{list-style:none;margin-top:2rem;display:grid;gap:.75rem}
.contact-list li{display:flex;gap:.9rem;align-items:center;min-width:0;background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:.8rem 1rem}
.contact-list .ci{width:42px;height:42px;border-radius:12px;background:var(--navy);color:var(--lime);display:grid;place-items:center;flex:none}
.contact-list .ci svg{width:19px;height:19px}
.contact-list small{display:block;color:var(--muted);font-size:.78rem}
.contact-list a,.contact-list b{font-weight:700;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.contact-list a:hover{color:var(--blue-2)}
.form-card{background:#fff;border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.4rem);box-shadow:var(--shadow-lg);border:1px solid var(--line-2)}
.form-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem;margin-bottom:1.3rem;padding-bottom:1rem;border-bottom:1px solid var(--line-2)}
.form-title{font-size:1.25rem;font-weight:800}
.form-req{font-size:.84rem;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1.1rem}
.form-grid .full{grid-column:1/-1}
.form-grid input,.form-grid textarea{width:100%;font-size:1rem;padding:.8em 1em;border:1.5px solid var(--field-border);border-radius:12px;background:var(--ice-2);min-height:52px;transition:border-color .2s,box-shadow .2s,background-color .2s}
.form-grid input:hover,.form-grid textarea:hover{border-color:#5f7290}
.form-grid input:focus,.form-grid textarea:focus{border-color:var(--blue-2);outline:none;box-shadow:0 0 0 4px rgba(19,86,196,.14);background:#fff}
.form-grid textarea{min-height:120px;resize:vertical;line-height:1.5}
.req{color:var(--danger)}
.err{font-size:.82rem;margin-top:.3rem;min-height:1.25em;color:var(--danger)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.calc-attach{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;background:var(--ice);border:1px solid #cfe4f6;border-radius:12px;padding:.6rem .6rem .6rem .9rem;margin:.3rem 0 1rem;font-size:.92rem;color:var(--ink)}
.attach-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#fff;color:var(--blue-2);flex:none}
.attach-ic svg{width:16px;height:16px}
#calc-attach-text{flex:1 1 12rem}
.calc-attach button{background:none;border:0;color:var(--blue-2);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:.3rem .5rem;min-height:44px}
.btn-submit{width:100%;min-height:56px;font-size:1.04rem;color:#fff;background:linear-gradient(180deg,var(--blue-2),var(--blue));box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 14px 30px -16px rgba(11,63,153,.9)}
.btn-submit:hover{background:linear-gradient(180deg,#1a63d6,var(--blue-2))}
.form-status{margin-top:1rem;border-radius:12px;padding:.9rem 1rem;font-size:.94rem;display:none}
.form-status.show{display:block}
.form-status.error{background:var(--danger-bg);color:#7a1418;border:1px solid #f3c2c4}
.form-status.error a{color:#7a1418;font-weight:700}
.form-privacy{font-size:.84rem;color:var(--muted);margin-top:.9rem;text-align:center}
.form-privacy a{color:var(--blue-2);font-weight:700;text-underline-offset:2px}
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite;display:none}
.is-sending .spinner{display:inline-block}
.success{text-align:center;padding:1.5rem .5rem}
.success .ok-ic{width:68px;height:68px;border-radius:50%;background:#e4f7ec;color:var(--success);display:grid;place-items:center;margin:0 auto 1.2rem;box-shadow:0 0 0 10px #f2fbf6}
.success .ok-ic svg{width:30px;height:30px}
.success h3{font-size:1.5rem;font-weight:800;max-width:24rem;margin-inline:auto}
.success p{color:var(--muted);margin:.7rem auto 0;max-width:26rem}
.success a{color:var(--blue-2)}
@media (max-width:960px){.enq{grid-template-columns:1fr}}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}}

/* ============ 17. Footer & mobile call bar ============ */
.site-footer{background:var(--navy-950);color:#a9badb;padding:clamp(3rem,6vw,4.5rem) 0 2rem;font-size:.92rem;border-top:1px solid rgba(255,255,255,.05)}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem;align-items:start}
.foot .brand img{width:48px;height:48px}
.foot h2{font-family:var(--head);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.foot ul{list-style:none;display:grid;gap:.5rem}
.foot a{color:#d6e2f6;text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--lime)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;border-top:1px solid rgba(255,255,255,.07);margin-top:2.5rem;padding-top:1.5rem;font-size:.84rem}
.foot-legal a{color:#d6e2f6;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
.foot-legal a:hover{color:var(--lime)}
.foot-legal span{color:#5d7096;margin:0 .45rem}
@media (max-width:760px){.foot{grid-template-columns:1fr;gap:2rem}}
.mobile-call{display:none}
@media (max-width:700px){
  .mobile-call{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;box-shadow:0 14px 34px -10px rgba(0,0,0,.55),0 0 0 1px rgba(7,31,77,.08)}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .menu-open .mobile-call{display:none}
}

/* ============ 18. Legal pages ============ */
.legal-hero{position:relative;overflow:hidden;color:#fff;padding:clamp(2.6rem,6vw,4.2rem) 0 clamp(2.4rem,5vw,3.6rem);
  background:radial-gradient(55% 90% at 90% 0%,rgba(39,180,240,.22),transparent 60%),linear-gradient(165deg,#0a3a8e 0%,#072a6c 45%,#05173d 100%)}
.legal-hero::after{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;border:1px solid rgba(255,255,255,.07);box-shadow:0 0 0 60px rgba(255,255,255,.015);pointer-events:none}
.legal-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;letter-spacing:-.03em;margin:.8rem 0 .6rem}
.crumbs{font-size:.88rem;color:var(--on-navy-2)}
.crumbs a{color:var(--lime);text-decoration:none;font-weight:700}
.crumbs a:hover{text-decoration:underline}
.legal-meta{color:var(--on-navy);font-size:.95rem}
mark.ph{background:#ffe9a8;color:#4a3700;border-radius:4px;padding:.05em .3em;font-weight:500;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.draft-banner{position:relative;display:block;margin:2rem 0 0;background:#fff8e1;border:1px solid #f2d27a;border-radius:14px;padding:1rem 1.2rem 1rem 3.2rem;color:#4a3700;font-size:.93rem;line-height:1.6}
.draft-banner::before{content:"!";position:absolute;left:1.1rem;top:1.05rem;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e0ac00;color:#fff;font:800 .85rem var(--head)}
.draft-banner strong{font-family:var(--head)}
.legal-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);padding:2.5rem 0 5rem;align-items:start}
.legal-toc{position:sticky;top:calc(var(--header-h) + 1.5rem);font-size:.9rem;background:var(--ice-2);border:1px solid var(--line-2);border-radius:var(--r);padding:1.2rem 1rem 1.1rem}
.legal-toc h2{font-family:var(--head);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 .5rem .7rem}
.legal-toc ol{list-style:none;display:grid;gap:1px;counter-reset:toc}
.legal-toc li{counter-increment:toc}
.legal-toc a{display:flex;gap:.6rem;padding:.42rem .5rem;border-radius:8px;color:var(--text);text-decoration:none;line-height:1.4;transition:background-color .2s,color .2s}
.legal-toc a::before{content:counter(toc,decimal-leading-zero);font:700 .72rem var(--head);color:#9aa8bf;padding-top:.15rem;flex:none}
.legal-toc a:hover{background:#fff;color:var(--blue-2)}
.toc-back{margin:1rem .5rem 0;padding-top:.9rem;border-top:1px solid var(--line)}
.toc-back a{color:var(--blue-2);font-weight:700;text-decoration:none}
.legal-body{max-width:68ch;color:var(--text);font-size:1.03rem;line-height:1.78}
.legal-body section{padding-top:.5rem;margin-bottom:2.4rem;scroll-margin-top:calc(var(--header-h) + 16px)}
.legal-body h2{font-size:clamp(1.3rem,2.2vw,1.55rem);font-weight:800;margin-bottom:.85rem;padding-top:1.6rem;border-top:1px solid var(--line-2)}
.legal-body section:first-child h2{border-top:0;padding-top:0}
.legal-body p{margin-bottom:.95rem}
.legal-body ul,.legal-body ol{margin:0 0 1.1rem 1.3rem;display:grid;gap:.4rem}
.legal-body li::marker{color:var(--blue-2);font-weight:700}
.legal-body a{color:var(--blue-2);font-weight:500;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-body strong{color:var(--ink)}
.legal-body .note{font-size:.9rem;background:var(--ice);border-radius:12px;padding:.75rem 1rem;color:var(--muted)}
.legal-contact{font-style:normal;background:var(--ice-2);border:1px solid var(--line-2);border-radius:var(--r);padding:1.3rem 1.5rem;line-height:1.85}
.legal-back{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.legal-back .btn{text-decoration:none}
.legal-back .btn-blue{color:#fff}
@media (max-width:900px){
  .legal-layout{grid-template-columns:1fr;gap:1.5rem;padding-top:1.6rem}
  .legal-toc{position:static}
  .legal-toc ol{grid-template-columns:1fr 1fr;column-gap:.5rem}
  .legal-toc a{min-height:44px;align-items:center}
  .legal-toc a::before{padding-top:0}
}
@media (max-width:520px){
  .legal-toc ol{grid-template-columns:1fr}
  .legal-body{font-size:1rem}
  .legal-back .btn{width:100%}
}

/* ============ 19. Motion ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .badge-wrap::before{animation:none}
  .badge-wrap .badge-fan{animation:none}
}

/* Footer intro line (was an inline style; the security policy forbids inline styles) */
.foot-about{margin-top:1rem}

/* Small text on the calculator result panel needs 4.5:1 against its lighter top (#0b3f99) */
.calc-out .out-label,.calc-out .disclaimer,.calc-out .out-price p,.calc-out .out-brands-note{color:var(--on-blue-small)}

/* 404 page */
.notfound{padding:2.5rem 0 5rem}
.notfound>p:first-child{font-size:1.08rem;color:var(--muted)}

/* Hero text settles once on load (the page's single entrance), alongside the fan's spin-up */
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:hero-settle .6s var(--ease) both}
  .hero-copy>:nth-child(2){animation-delay:.08s}
  .hero-copy>:nth-child(3){animation-delay:.16s}
  .hero-copy>:nth-child(4){animation-delay:.24s}
  .hero-copy>:nth-child(5){animation-delay:.32s}
}
@keyframes hero-settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Lime is reserved for "Request a quote". The header call button is a navy outline. */
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* "Why us" and contact details as plain lists (fewer boxes, clearer hierarchy) */
.ticks{gap:1.6rem 2rem}
.ticks li{background:none;border:0;box-shadow:none;padding:0;flex-direction:row;gap:1rem}
.ticks .tick{flex:none;margin-top:.1rem}
.contact-list{gap:1.1rem}
.contact-list li{background:none;border:0;box-shadow:none;padding:0}

/* Calculator before any result: content centred, no large empty gap */
.calc-out.is-empty-state{justify-content:center}
.calc-out.is-empty-state .out-cta{margin-top:0}

/* Phones: on pages with a hero, the fixed call bar starts hidden (no flash at load) and appears once
   site.js reports the hero's call and quote buttons have scrolled away (body.hero-cta-gone) */
@media (max-width:700px){body:has(.hero .ctas):not(.hero-cta-gone) .mobile-call{display:none}}