/* Brisbane North House Washing — site styles (hand-built by Netlinks) */
:root{
  --navy:#0A2342;--navy-2:#123661;--navy-3:#1B4A80;
  --blue:#1769B3;--blue-2:#1F7FD1;--sky:#4FB3F0;--aqua:#E8F4FD;--aqua-2:#D4EBFB;
  --coral:#D83A2D;--coral-2:#B92E23;
  --ink:#16263A;--muted:#5B6B7D;--line:#E1E9F2;--bg:#F5F9FD;--white:#fff;
  --radius:18px;--radius-sm:12px;--shadow:0 10px 30px -12px rgba(18,20,26,.20);--shadow-lg:0 30px 60px -20px rgba(18,20,26,.32);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1200px;--gutter:clamp(16px,4vw,32px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.7;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--navy)}
a[href^="mailto"]{overflow-wrap:anywhere}
h1,h2,h3,h4{font-family:var(--display,var(--font));font-weight:800;line-height:1.15;color:var(--navy);margin:0 0 .55em;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,1.3rem + 3.6vw,3.9rem)}
h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.7rem)}
h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul{padding-left:1.2em}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;z-index:999;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--coral)}
.lead{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--muted)}
.center{text-align:center}.center .eyebrow{justify-content:center}
.section{padding-block:clamp(64px,8vw,112px)}
#reviews{padding-bottom:clamp(44px,5vw,72px)}
.section--tint{background:var(--bg)}
.section--navy{background:var(--navy);color:color-mix(in srgb,#fff 84%,var(--blue))}
.section--navy h2,.section--navy h3{color:#fff}
.section-head{max-width:760px;margin:0 auto clamp(36px,5vw,56px)}
.section-head.left{margin-left:0}

/* Buttons */
.btn{--b:var(--coral);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:2px solid var(--b);background:var(--b);color:#fff;font:700 1rem/1 var(--font);text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.btn:hover{color:#fff;background:var(--coral-2);border-color:var(--coral-2);transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(216,58,45,.6)}
.btn svg{width:20px;height:20px;flex:none}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff;border-color:#fff;color:var(--navy);box-shadow:none}
.btn--navy{--b:var(--navy)}.btn--navy:hover{background:var(--navy-3);border-color:var(--navy-3);box-shadow:0 12px 24px -10px color-mix(in srgb,var(--navy) 50%,transparent)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--line)}
.btn--outline:hover{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:none}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none}
.link-arrow svg{width:18px;height:18px;transition:transform .2s}
.link-arrow:hover svg{transform:translateX(4px)}

/* Top bar + header */
.topbar{background:var(--navy);color:color-mix(in srgb,#fff 70%,var(--blue));font-size:.86rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:42px}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.topbar li{display:flex;align-items:center;gap:7px}
.topbar svg{width:15px;height:15px;color:var(--sky)}
@media (max-width:860px){.topbar{display:none}}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:box-shadow .25s,border-color .25s}
.header.is-stuck{box-shadow:0 8px 24px -16px color-mix(in srgb,var(--navy) 35%,transparent);border-color:var(--line)}
.header .wrap{display:flex;align-items:center;gap:20px;min-height:92px}
.brand{display:flex;align-items:center;flex:0 0 auto;min-width:0;max-width:min(42%,480px)}
/* A long trading name is the one case that must give way, or it pushes the
   quote button off the end of the header. */
.brand:has(.wordmark--long){flex:0 1 auto;max-width:min(34%,400px)}
/* -webkit-box collapses the flex item's intrinsic width, which squeezed the
   logotype into a narrow column and wrapped a two word name onto two lines.
   Ordinary names size to their text; only a long one gets the clamp. */
.header .wordmark{white-space:normal;overflow-wrap:normal;line-height:1.14;max-width:100%}
/* A short trading name stays on one line, so the flex item is measured at the
   width of its own text instead of being shrunk to a wrapped column. */
.header .wordmark--logo:not(.wordmark--long){white-space:nowrap}
.header .wordmark--long{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:break-word}
/* A hard ceiling as well as the line clamp. The clamp depends on the element
   keeping display:-webkit-box, which a later per-design rule can undo; the
   height cannot be undone by accident, and a header that grows to five lines
   pushes the quote button out of the page. */
.header .wordmark{max-height:76px;overflow:hidden}
/* A long trading name gets a smaller wordmark so the nav keeps its room. */
body[class*="a-"] .header .wordmark--long{font-size:clamp(1.0rem,.9rem + .28vw,1.14rem);line-height:1.16;letter-spacing:-.018em}
/* A long name needs the room the phone block was using. */
@media (max-width:1360px){.header:has(.wordmark--long) .header-phone{display:none}}
.brand img{width:150px;height:auto}
/* The nav sits just off the logotype rather than floating out on its own, so
   the mark reads as the anchor of the header. The buttons keep the right. */
.nav{margin-left:0}
.header-cta{margin-left:auto}
.nav>ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav a,.nav button{display:flex;align-items:center;gap:6px;padding:10px 11px;border-radius:10px;font:600 .94rem/1 var(--font);color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}
.nav a:hover,.nav button:hover,.nav [aria-current=page]{color:var(--blue);background:var(--aqua)}
.nav .caret{width:14px;height:14px;transition:transform .2s}
.has-sub{position:relative}
.sub{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;width:min(620px,90vw);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease;list-style:none;margin:0}
.sub::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{opacity:1;visibility:visible;transform:none}
.has-sub:hover .caret,.has-sub.open .caret{transform:rotate(180deg)}
.sub a{display:block;padding:12px 14px;line-height:1.3}
.sub a strong{display:block;color:var(--navy);font-size:.98rem}
.sub a span{display:block;font-weight:500;font-size:.84rem;color:var(--muted);margin-top:3px}
.sub .sub-label{grid-column:1/-1;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 14px 2px}
.header-cta{display:flex;align-items:center;gap:10px}
.header-phone{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font-weight:800;line-height:1.15}
.header-phone small{display:block;font-weight:600;font-size:.74rem;color:var(--muted);letter-spacing:.02em}
.header-phone .ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--aqua);color:var(--blue)}
.header-phone .ico svg{width:20px;height:20px}
.burger{display:none;margin-left:auto;width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy);align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:24px;height:24px}
@media (max-width:1180px){.header-phone{display:none}}
@media (max-width:980px){
  .header{backdrop-filter:none;background:#fff}
  .header .wrap{min-height:76px;gap:14px}
  .brand img{width:124px}
  .burger{display:inline-flex}
  .header-cta .btn{display:none}
  .nav{position:fixed;inset:0 0 0 auto;width:min(380px,88vw);background:#fff;margin:0;padding:88px 20px 32px;box-shadow:var(--shadow-lg);transform:translateX(105%);transition:transform .3s ease;overflow-y:auto;z-index:60}
  .nav.open{transform:none}
  .nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav a,.nav button{padding:14px;font-size:1.05rem;width:100%;justify-content:space-between}
  .sub{position:static;translate:none;width:auto;box-shadow:none;border:0;padding:0 0 0 10px;grid-template-columns:1fr;opacity:1;visibility:visible;transform:none;display:none}
  .has-sub.open .sub{display:grid}
  .has-sub:hover .sub{display:none}.has-sub.open:hover .sub{display:grid}
  .sub a span{display:none}
  .nav .nav-close{position:absolute;top:18px;right:18px;width:48px;height:48px;padding:0;justify-content:center;align-items:center;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy)}
  .nav .nav-close svg{width:24px;height:24px}
  .nav .mobile-only{display:block}
}
.nav .mobile-only{display:none}
.nav .nav-close{display:none}
@media (max-width:980px){.nav .nav-close{display:inline-flex}}
.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--navy) 50%,transparent);opacity:0;visibility:hidden;transition:.3s;z-index:49}
.scrim.show{opacity:1;visibility:visible}

/* Hero */
.hero{position:relative;color:#fff;background:var(--navy);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:30% 30%}
/* A film hero. The still sits underneath rather than only in the poster
   attribute, so there is something to look at when autoplay is refused, when
   the connection is too slow to start, and when the viewer has asked their
   system for less motion. Centred, not 30% 30%: a film is framed already. */
.hero__bg--film img,
.hero__bg--film video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.hero__bg--film video{z-index:1}
@media (prefers-reduced-motion:reduce){.hero__bg--film video{display:none}}
/* Phones get the still and skip the film entirely. A 16:9 clip cropped into a
   tall hero shows a strip of its own middle, and two megabytes on mobile data
   to show that strip is a poor trade. Pair it with a phone-shaped still and
   the small screen gets the better picture and the smaller page. */
@media (max-width:820px){.hero__bg--film video{display:none}}
/* The scrim exists to keep white text readable, not to hide the photograph.
   Light enough to see what is behind it, with the readability made up by a
   shadow on the text itself rather than by drowning the whole image. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,color-mix(in srgb,var(--navy) 63%,transparent) 0%,color-mix(in srgb,var(--navy) 39%,transparent) 46%,color-mix(in srgb,var(--navy) 11%,transparent) 100%)}

/* Carries the contrast the scrim gave up. A shadow costs nothing behind the
   letterforms and everything elsewhere stays visible. */
.hero:not(.hero--art) h1,
.hero:not(.hero--art) .lead,
.hero:not(.hero--art) .ticks li,
.hero:not(.hero--art) .eyebrow,
.hero:not(.hero--art) .hero-badge{text-shadow:0 1px 14px rgba(4,14,28,.85),0 1px 3px rgba(4,14,28,.7)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(56px,7vw,100px) clamp(72px,9vw,120px)}
.hero h1{font-family:var(--display,var(--font));color:#fff;margin-bottom:.4em}
.hero h1 em{font-style:normal;color:var(--sky)}
/* White, not a tint. Over a photograph there is no flat ground for a tinted
   grey to sit against, so anything short of white reads as washed out. */
.hero .lead{color:#fff;max-width:36em}
.ticks{list-style:none;padding:0;margin:26px 0 32px;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:600;line-height:1.4}
.ticks svg{flex:none;width:22px;height:22px;color:var(--sky);margin-top:1px}
.hero-badges{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.hero-badge{display:flex;align-items:center;gap:12px;line-height:1.2}
.hero-badge b{display:block;font-size:1.5rem;color:#fff}
.hero-badge span{font-size:.85rem;color:color-mix(in srgb,#fff 88%,var(--blue))}
.hero-badge .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(79,179,240,.14);color:var(--sky)}
.hero-badge .ico svg{width:24px;height:24px}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr}
  /* One column on a phone means the text sits over the middle of the photo,
     so it needs a little more help than the desktop layout does. */
  .hero::before{background:linear-gradient(180deg,color-mix(in srgb,var(--navy) 63%,transparent),color-mix(in srgb,var(--navy) 75%,transparent))}}
@media (max-width:520px){.ticks{grid-template-columns:1fr}.hero .btn,.page-hero .btn,.cta-band .btn{flex:1 1 100%;white-space:normal}}

/* Wave divider */
.wave{display:block;width:100%;height:clamp(28px,4vw,56px);margin-top:-1px;color:#fff}
.hero .wave{position:absolute;bottom:-1px;left:0}

/* Quote form card */
.quote{background:#fff;color:var(--ink);border-radius:24px;padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-lg);position:relative}
.quote h2,.quote h3{font-size:1.55rem;margin-bottom:4px}
.quote .sub-t{color:var(--muted);font-size:.95rem;margin-bottom:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;font:500 1rem/1.4 var(--font);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;transition:border-color .2s,background .2s,box-shadow .2s;min-height:50px}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;background:#fff;border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(31,127,209,.14)}
.hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}
.form-note{display:flex;align-items:center;gap:8px;justify-content:center;font-size:.8rem;color:var(--muted);margin:12px 0 0}
.form-note svg{width:15px;height:15px;color:#1E9E5A}
@media (max-width:520px){.form-grid{grid-template-columns:1fr}}

/* Trust strip */
/* The strip sat hard against the hero with a rule under it. The rule read as
   a stray line rather than a divider, and the strip needs air above it. */
.trust{background:#fff;padding-top:20px}
.trust ul{list-style:none;margin:0;padding:26px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* Top, not centre: the four claims run to different numbers of lines, and
   centring each one on its own height staggered all four titles. */
.trust li{display:flex;align-items:flex-start;gap:14px;font-weight:700;color:var(--navy);line-height:1.3}
.trust li span{display:block;font-weight:500;color:var(--muted);font-size:.86rem}
.trust .ico{flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--aqua);color:var(--blue)}
.trust .ico svg{width:24px;height:24px}
@media (max-width:900px){.trust ul{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.trust ul{grid-template-columns:1fr}}

/* Cards */
.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.grid-3{grid-template-columns:repeat(6,1fr)}
/* end, not the shorthand: the shorthand sets the start too, so the nudge
   below would replace the span instead of moving it. */
.grid-3>*{grid-column-end:span 2}
/* A last row that is short sits left, under the first column, and reads as a
   mistake. Six tracks of half a column each let the stragglers be nudged into
   the middle: two of them start at track 2, a lone one starts at track 3. */
.grid-3>:nth-child(3n+1):nth-last-child(2){grid-column-start:2}
.grid-3>:nth-child(3n+1):last-child{grid-column-start:3}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){
  /* Two columns, drawn as four half tracks so a lone card on the last row can
     be centred the same way the three column layout does it. */
  .grid-3,.grid-4{grid-template-columns:repeat(4,1fr)}
  .grid-3>*,.grid-4>*{grid-column-end:span 2}
  .grid-3>:nth-child(3n+1):nth-last-child(2),
  .grid-3>:nth-child(3n+1):last-child{grid-column-start:auto}
  .grid-3>:nth-child(2n+1):last-child,
  .grid-4>:nth-child(2n+1):last-child{grid-column-start:2}}
@media (max-width:640px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  /* One column, so the half track trick has to be unwound or every card
     asks for two tracks that are not there. */
  .grid-3>*,.grid-4>*{grid-column:auto}
  .grid-3>:nth-child(2n+1):last-child,
  .grid-4>:nth-child(2n+1):last-child,
  .grid-3>:nth-child(3n+1):nth-last-child(2),
  .grid-3>:nth-child(3n+1):last-child{grid-column-start:auto}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card__img{aspect-ratio:5/4;overflow:hidden;background:var(--aqua);position:relative}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .card__img img{transform:scale(1.06)}
.card__tag{position:absolute;left:16px;top:16px;background:#fff;color:var(--navy);font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.card__body{padding:26px;display:flex;flex-direction:column;flex:1}
.card__body p{color:var(--muted);font-size:.98rem}
/* One-line and two-line titles otherwise start the body copy at different
   heights, which is what makes a row of cards read as ragged. */
@media (min-width:641px){.card--icon h3{min-height:2.5em}}
.card__body .link-arrow{margin-top:auto}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card .link-arrow{position:relative;z-index:1}

.mini{display:flex;gap:16px;align-items:flex-start;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:.25s}
.mini:hover{border-color:var(--blue-2);box-shadow:var(--shadow);transform:translateY(-3px);color:var(--ink)}
.mini .ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--aqua);color:var(--blue);transition:.25s}
.mini:hover .ico{background:var(--blue-2);color:#fff}
.mini .ico svg{width:24px;height:24px}
.mini strong{display:block;color:var(--navy);font-size:1.02rem;line-height:1.3;margin-bottom:4px}
.mini span{display:block;font-size:.9rem;color:var(--muted);line-height:1.5}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split--wide{grid-template-columns:1.1fr .9fr}
@media (max-width:900px){.split,.split--wide{grid-template-columns:1fr}}
.media-stack{position:relative;padding:0 0 40px 40px}
.photo{border-radius:24px;box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--aqua)}
.media-stack .m1{border-radius:24px;box-shadow:var(--shadow-lg);width:100%;aspect-ratio:11/13;object-fit:cover}
.media-stack .m2{position:absolute;left:0;bottom:0;width:48%;border-radius:18px;border:6px solid #fff;box-shadow:var(--shadow);aspect-ratio:5/4;object-fit:cover}
.media-stack .badge{position:absolute;right:-12px;top:28px;background:var(--coral);color:#fff;border-radius:20px;padding:18px 22px;text-align:center;box-shadow:var(--shadow);line-height:1.1}
.media-stack .badge b{display:block;font-size:2.1rem}
.media-stack .badge span{font-size:.8rem;font-weight:600;letter-spacing:.04em}
@media (max-width:520px){.media-stack{padding:0 0 30px 18px}.media-stack .badge{right:8px}}
.checks{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.checks svg{flex:none;width:24px;height:24px;color:#fff;background:var(--blue-2);border-radius:50%;padding:4px;margin-top:1px}
.checks.two{grid-template-columns:1fr 1fr}
@media (max-width:600px){.checks.two{grid-template-columns:1fr}}

/* Process */
/* Column count comes from the markup. Three steps in a four-column grid
   left an empty column, which read as a centring bug rather than a layout. */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:24px;position:relative}
.steps::before{content:"";position:absolute;left:12%;right:12%;top:36px;border-top:2px dashed color-mix(in srgb,var(--sky) 40%,transparent)}
.step{position:relative;text-align:center;padding:0 8px}
.step .num{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--navy-2);border:2px solid var(--sky);color:#fff;position:relative}
.step .num svg{width:30px;height:30px}
.step .num::after{counter-increment:s;content:counter(s);position:absolute;top:-4px;right:-4px;width:26px;height:26px;border-radius:50%;background:var(--coral);font-size:.8rem;font-weight:800;display:grid;place-items:center}
.step p{color:color-mix(in srgb,#fff 66%,var(--blue));font-size:.96rem}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:36px}.steps::before{display:none}}
@media (min-width:861px){.steps{max-width:min(100%,calc(280px * var(--n,4)));margin-inline:auto}}
@media (max-width:460px){.steps{grid-template-columns:1fr}}

/* Stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(40px,6vw,64px);padding-top:clamp(32px,5vw,48px);border-top:1px solid rgba(255,255,255,.12)}
.stats div{text-align:center}
.stats b{display:block;font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem);color:#fff;line-height:1.1}
.stats span{color:color-mix(in srgb,#fff 66%,var(--blue));font-size:.9rem}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr}}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.gallery a{position:relative;border-radius:16px;overflow:hidden;display:block;background:var(--aqua)}
.gallery{grid-auto-flow:dense}
.gallery a.feat{grid-row:span 2;grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery a:hover img{transform:scale(1.06)}
.gallery a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--navy) 65%,transparent));opacity:0;transition:.3s}
.gallery a:hover::after{opacity:1}
.gallery figcaption{position:absolute;left:14px;bottom:12px;right:14px;color:#fff;font-weight:700;font-size:.92rem;z-index:1;opacity:0;transform:translateY(6px);transition:.3s}
.gallery a:hover figcaption{opacity:1;transform:none}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}}
@media (max-width:480px){.gallery{grid-auto-rows:150px;gap:10px}}
.lightbox{position:fixed;inset:0;background:rgba(6,20,40,.92);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.lightbox.show{display:flex}
.lightbox img{max-height:86vh;max-width:min(1100px,100%);border-radius:14px;box-shadow:var(--shadow-lg)}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:52px;height:52px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.lightbox button:hover{background:rgba(255,255,255,.25)}
.lightbox button svg{width:24px;height:24px}
.lb-close{top:18px;right:18px}.lb-prev{left:14px;top:50%;translate:0 -50%}.lb-next{right:14px;top:50%;translate:0 -50%}

/* Testimonials */
.reviews{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 22px;scrollbar-width:thin;scrollbar-color:var(--aqua-2) transparent}
.reviews::-webkit-scrollbar{height:6px}.reviews::-webkit-scrollbar-thumb{background:var(--aqua-2);border-radius:6px}
@media (max-width:980px){.reviews{grid-auto-columns:calc((100% - 24px)/2)}}
@media (max-width:640px){.reviews{grid-auto-columns:88%}}
.review{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;margin:0}
.review .stars{display:flex;gap:3px;color:#F5A623;margin-bottom:16px}
.review .stars svg{width:18px;height:18px}
.review blockquote{margin:0 0 22px;font-size:1rem;color:var(--ink);flex:1}
.review figcaption{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--navy)}
.review figcaption div span{display:block;font-weight:500;color:var(--muted);font-size:.84rem}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue-2),var(--sky));color:#fff;font-weight:800}
.carousel-nav{display:flex;gap:10px}
.carousel-nav button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:.2s}
.carousel-nav button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.carousel-nav svg{width:20px;height:20px}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.head-row .section-head{margin:0}

/* Areas */
.areas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.areas li{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 12px;font-weight:600;font-size:.93rem;color:var(--navy)}
.areas svg{width:16px;height:16px;color:var(--coral)}
.map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--aqua);aspect-ratio:4/3;width:100%;border:0}
.map iframe{width:100%;height:100%;border:0;display:block}

/* FAQ */
.faq{display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--aqua-2);box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;font-weight:700;color:var(--navy);display:flex;justify-content:space-between;gap:16px;align-items:center;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231769B3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 22px 20px;color:var(--muted)}
.faq .ans p:last-child{margin:0}

/* CTA band */
.cta-band{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(120deg,var(--blue) 0%,var(--navy-2) 60%,var(--navy) 100%);color:#fff;padding:clamp(36px,5vw,64px);display:grid;grid-template-columns:1.4fr auto;gap:28px;align-items:center;isolation:isolate}
.cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--sky) 35%,transparent),transparent 70%)}
.cta-band::before{width:420px;height:420px;right:-120px;top:-180px}
.cta-band::after{width:300px;height:300px;left:20%;bottom:-200px}
.cta-band>*{min-width:0}
.cta-band h2{color:#fff;margin-bottom:.3em}
.cta-band p{overflow-wrap:anywhere}
.cta-band p{color:color-mix(in srgb,#fff 84%,var(--blue));margin:0}
@media (max-width:860px){.cta-band{grid-template-columns:1fr}}

/* Page hero (inner) */
.page-hero{position:relative;background:var(--navy);color:#fff;isolation:isolate;overflow:hidden}
.page-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Inner-page hero. Follows the brand, and lighter than it was: at 97% the
   photograph behind it may as well not have been there. */
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,
  color-mix(in srgb,var(--navy) 80%,transparent) 0%,
  color-mix(in srgb,var(--navy) 66%,transparent) 55%,
  color-mix(in srgb,var(--navy) 42%,transparent) 100%)}
.page-hero .wrap{padding-block:clamp(44px,6vw,84px) clamp(60px,8vw,104px)}
.page-hero h1{color:#fff;max-width:18ch;margin-bottom:.35em}
.page-hero .lead{color:color-mix(in srgb,#fff 84%,var(--blue));max-width:40em;margin-bottom:28px}
.page-hero .wave{position:absolute;bottom:-1px;left:0}
/* The breadcrumb is a light band of spans, not a list on a dark one. The old
   rules targeted an <ol> that the markup has never produced and painted the
   link white, so "Home" was white text on a white bar on every page. */
/* White, not the page tint. The tint is derived from the brand colour, so on
   a red site the breadcrumb band came out pink under a white hero and read as
   a stripe rather than as part of the page. */
.crumbs{background:#fff;border-bottom:1px solid var(--line)}
.crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-block:13px;font-size:.86rem;color:var(--muted)}
.crumbs .sep{color:var(--muted);opacity:.55}
.crumbs a{color:var(--blue);text-decoration:none;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current=page]{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-size:.88rem;font-weight:600}
.chip svg{width:16px;height:16px;color:var(--sky)}

/* Content layout with sidebar */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(32px,5vw,64px);align-items:start}
.layout--contact{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media (max-width:1020px){.layout,.layout--contact{grid-template-columns:1fr}}
.sidebar{position:sticky;top:110px;display:grid;gap:20px}
@media (max-width:1020px){.sidebar{position:static}}
.prose{font-size:1.05rem}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em}
.prose ul:not(.checks),.prose ol{margin:0 0 1.3em;padding-left:1.3em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--blue-2);font-weight:700}
.prose img{border-radius:var(--radius);margin:1.6em 0}
.prose blockquote{margin:1.6em 0;padding:18px 24px;border-left:4px solid var(--sky);background:var(--bg);border-radius:0 14px 14px 0;font-weight:600;color:var(--navy)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.97rem}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.prose th{background:var(--bg);color:var(--navy)}
.table-scroll{overflow-x:auto}
.callout{display:flex;gap:16px;align-items:flex-start;background:var(--aqua);border-radius:var(--radius);padding:22px 24px;margin:1.6em 0}
.callout .ico{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;color:var(--blue);display:grid;place-items:center}
.callout .ico svg{width:22px;height:22px}
.callout p{margin:0;color:var(--navy)}
.side-card{background:var(--navy);color:color-mix(in srgb,#fff 84%,var(--blue));border-radius:var(--radius);padding:28px}
.side-card h3{color:#fff}
.side-card a.big{display:flex;align-items:center;gap:12px;color:#fff;font-size:1.45rem;font-weight:800;text-decoration:none;margin:10px 0 6px}
.side-card a.big svg{width:26px;height:26px;color:var(--sky)}
.side-card ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:.93rem}
.side-card li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(255,255,255,.12);padding-bottom:8px}
.img-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.8em 0}
.img-row img{margin:0;aspect-ratio:4/5;object-fit:cover;width:100%}

/* Blog */
.post-card .card__img{aspect-ratio:16/10}
.meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.86rem;color:var(--muted);margin-bottom:10px}
.meta span{display:inline-flex;align-items:center;gap:6px}
.meta svg{width:15px;height:15px}
.article-hero-img{border-radius:24px;box-shadow:var(--shadow-lg);margin-top:-70px;position:relative;aspect-ratio:16/8;object-fit:cover;width:100%;background:var(--aqua)}
.toc{background:var(--bg);border-radius:var(--radius);padding:24px}
.toc h3{font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.toc ol{margin:0;padding-left:1.2em;display:grid;gap:8px;font-size:.95rem}
.toc a{text-decoration:none;font-weight:600}

/* Contact */
.contact-cards{display:grid;gap:16px}
.contact-card{display:flex;gap:16px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-decoration:none;color:var(--ink)}
a.contact-card:hover{border-color:var(--blue-2);box-shadow:var(--shadow);color:var(--ink)}
.contact-card .ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--aqua);color:var(--blue)}
.contact-card .ico svg{width:24px;height:24px}
.contact-card small{display:block;color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.contact-card strong{color:var(--navy);font-size:1.05rem;word-break:break-word}
.hours{width:100%;border-collapse:collapse;font-size:.96rem}
.hours td{padding:10px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-weight:700;color:var(--navy)}
.hours tr.today td{color:var(--blue)}

/* Footer */
.footer{background:color-mix(in srgb,var(--navy) 84%,#000);color:color-mix(in srgb,#fff 58%,var(--blue));font-size:.95rem;padding-top:clamp(48px,6vw,72px)}
/* The closing CTA band carries its own generous padding, so the section
   around it does not need a second helping on either side. Two full
   section paddings back to back read as a hole in the page, not as air. */
.section:has(.cta-band){padding-block:clamp(28px,3.5vw,52px)}
.footer a{color:color-mix(in srgb,#fff 84%,var(--blue));text-decoration:none}
.footer a:hover{color:var(--sky)}
.footer-grid{display:grid;grid-template-columns:1.3fr .8fr 1fr 1.1fr;gap:clamp(28px,4vw,48px)}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer h3{color:#fff;font-size:1.05rem;margin-bottom:18px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
/* No logo plate here: the generated mark is inked from the client's own
   palette and a white chip fights whatever colour that turns out to be. */
.footer .foot-name{display:block;color:#fff;font-family:var(--display,var(--font));
  font-weight:800;font-size:1.24rem;letter-spacing:-.02em;line-height:1.25;
  margin-bottom:16px;max-width:22ch;text-decoration:none}
.footer .foot-name:hover{color:var(--sky)}
.footer .nap-email{overflow-wrap:break-word}
.footer .nap li{display:flex;gap:10px;align-items:flex-start}
.footer .nap svg{flex:none;width:18px;height:18px;color:var(--sky);margin-top:4px}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#fff;transition:.2s}
.socials a:hover{background:var(--blue-2);color:#fff}
.socials svg{width:18px;height:18px}
.footer .hours td{border-color:rgba(255,255,255,.08);padding:6px 0;font-size:.9rem}
.footer .hours td:last-child{color:#fff}
.footer-bottom{margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,255,255,.08);padding-block:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.85rem}
@media (max-width:980px){.footer{padding-bottom:76px}}

/* Mobile action bar */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(10px);box-shadow:0 -8px 24px -12px rgba(18,20,26,.3);transform:translateY(110%);transition:transform .3s ease}
.actionbar.show{transform:none}
.actionbar .btn{min-height:50px;padding:0 14px;font-size:.98rem}
@media (max-width:980px){.actionbar{display:grid}}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* Thank you / 404 */
.status-page{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:80px}
.status-page .ico{width:88px;height:88px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;background:var(--aqua);color:var(--blue)}
.status-page .ico svg{width:42px;height:42px}
.status-page .btn-row{justify-content:center}

/* ---------------------------------------------------------------- *
 * Section library                                                   *
 * ---------------------------------------------------------------- */
.prose--2col{column-count:2;column-gap:clamp(28px,4vw,56px)}
.prose--2col p{break-inside:avoid}
@media (max-width:760px){.prose--2col{column-count:1}}

.ticks--stack{grid-template-columns:1fr;gap:14px}

.timeline{list-style:none;margin:0;padding:0;counter-reset:tl}
.timeline li{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px);
  padding:clamp(22px,3vw,32px) 0;border-top:1px solid var(--line)}
.timeline li:first-child{border-top:0}
.tl-num{font-weight:800;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);color:var(--blue-2);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.timeline h3{margin-bottom:.35em}
.timeline p{color:var(--muted);margin:0;max-width:62ch}

.stats{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(18px,3vw,34px);text-align:center}
.stats li{padding:clamp(20px,3vw,30px) 14px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.stats b{display:block;font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);line-height:1;color:var(--navy);
  letter-spacing:-.035em;margin-bottom:.28em}
.stats span{color:var(--muted);font-size:.94rem}
.section--tint .stats li{background:#fff}

.shot{border-radius:var(--radius);overflow:hidden;background:var(--aqua);aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot--empty{background:linear-gradient(135deg,var(--aqua),var(--aqua-2))}
.split--flip>*:first-child{order:2}
@media (max-width:900px){.split--flip>*:first-child{order:0}}

.quoteband .wrap{max-width:900px;text-align:center}
.quoteband .qmark{width:44px;height:44px;color:var(--sky);margin-bottom:18px}
.quoteband blockquote{margin:0}
.quoteband blockquote p{font-size:clamp(1.3rem,1.05rem + 1.3vw,2rem);line-height:1.42;color:#fff;margin-bottom:.7em}
.quoteband cite{font-style:normal;color:color-mix(in srgb,#fff 66%,var(--blue));font-size:.95rem;letter-spacing:.04em}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(10px,1.6vw,18px)}
.gallery figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;background:var(--aqua)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.05)}

.pricelist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pricelist li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.pricelist b{display:block;color:var(--navy);font-size:1.05rem}
.pricelist span:not(.price){display:block;color:var(--muted);font-size:.92rem;margin-top:3px}
.pricelist .price{font-weight:800;color:var(--blue);white-space:nowrap;font-size:1.1rem}
.fineprint{margin-top:16px;color:var(--muted);font-size:.88rem}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.datatable,.timetable{width:100%;border-collapse:collapse;min-width:520px}
.datatable th,.datatable td,.timetable th,.timetable td{text-align:left;padding:14px 16px;
  border-bottom:1px solid var(--line);vertical-align:top}
.datatable thead th{background:var(--aqua);color:var(--navy);font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:800}
.timetable th{width:34%;color:var(--navy);font-weight:700;white-space:nowrap}
.tt-extra{color:var(--muted);white-space:nowrap}

.checklist{list-style:none;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,2vw,24px);
  /* Sits under a centred heading, so it is centred too, and capped rather than
     run edge to edge: four cards stretched across a wide screen stop reading as
     a group and start reading as a row of unrelated boxes. */
  max-width:min(100%,940px);margin:0 auto}
.checklist li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:18px 20px}
/* A last row with one card left over sits in the middle rather than the left. */
.checklist>:nth-child(2n+1):last-child{grid-column:1/-1;max-width:min(100%,460px);
  margin-inline:auto}
.checklist svg{width:22px;height:22px;color:var(--blue);flex:none;margin-top:2px}
.checklist b{display:block;color:var(--navy);margin-bottom:4px}
.checklist span{color:var(--muted);font-size:.94rem;line-height:1.55}

.callout{display:flex;gap:20px;align-items:flex-start;background:var(--aqua);
  border-left:4px solid var(--blue);border-radius:var(--radius-sm);padding:clamp(22px,3vw,32px)}
.callout .ico{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;color:var(--blue);
  display:grid;place-items:center}
.callout .ico svg{width:24px;height:24px}
.callout h3{margin-bottom:.4em}
.callout p{margin-bottom:.6em;color:var(--ink)}
.callout p:last-child{margin-bottom:0}

.callband{background:var(--navy);color:#fff;text-align:center;padding:22px 0}
.callband small{display:block;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;
  opacity:.8;margin-bottom:8px}
.callband a{color:#fff;font-weight:800;font-size:clamp(1.5rem,1rem + 2.4vw,2.4rem);text-decoration:none;
  display:inline-flex;align-items:center;gap:12px;line-height:1}
.callband svg{width:1em;height:1em}

.head-row .gbadge{margin-top:0}

.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(26px,4vw,52px)}
.menu-group h3{padding-bottom:12px;border-bottom:2px solid var(--line);margin-bottom:6px}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:13px 0;
  border-bottom:1px dashed var(--line)}
.menu-list strong{display:block;color:var(--navy)}
.menu-list span{display:block;color:var(--muted);font-size:.92rem;margin-top:2px}
.menu-list b{color:var(--blue);white-space:nowrap}

.who{text-align:center}
.who-pic{width:130px;height:130px;border-radius:50%;overflow:hidden;margin:0 auto 18px;background:var(--aqua)}
.who-pic img{width:100%;height:100%;object-fit:cover}
.who-pic--initial{display:grid;place-items:center;font-size:2.6rem;font-weight:800;color:var(--blue)}
.who h3{margin-bottom:.15em}
.who-role{color:var(--blue);font-weight:700;font-size:.92rem;margin-bottom:.7em}
.who p{color:var(--muted);font-size:.95rem}

.badges{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.badges li{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 18px}
.badges svg{width:26px;height:26px;color:var(--blue);flex:none}
.badges b{display:block;color:var(--navy);font-size:.98rem}
.badges span{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}

/* A section that lost its picture: centred and measure-limited, so it reads
   as a statement rather than as half a layout. */
.prose--mid{max-width:66ch;margin-inline:auto;text-align:center}
.prose--mid p{max-width:none}
.prose--mid .ticks{display:inline-grid;grid-template-columns:1fr;gap:10px;text-align:left;margin-top:26px}
@media (min-width:720px){.prose--mid .ticks{grid-template-columns:1fr 1fr}}

/* ---- centred narrow sections -------------------------------------------
   Sections with nothing beside them are centred on a comfortable measure
   rather than left-aligned across a wide page. List items keep their own
   text left-aligned inside the centred block: a tick and a centred line of
   text next to it never line up down a column.                            */
.ticks--mid{max-width:min(100%,740px);margin:30px auto 0;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));text-align:left}
.ticks--mid li{justify-content:flex-start}
.areas--mid{justify-content:center}
.callout--mid{max-width:820px;margin-inline:auto}

/* ---- lead text on dark ground ------------------------------------------
   .lead is the muted grey, which is right on white and wrong on everything
   else. On a dark band it was grey-on-navy: technically present, actually
   unreadable. These sections carry their own ground, so the lead follows it
   and takes a little weight to hold up against a strong background.        */
.section--navy .lead,
.section--navy .prose p,
.cta-band .lead,
.callband .lead,
.claim .claim-card .lead{color:color-mix(in srgb,#fff 90%,var(--blue));font-weight:600}
.section--navy .section-head .lead{color:color-mix(in srgb,#fff 86%,var(--blue));font-weight:600}

/* Same problem, smaller: muted text inside a dark band. */
.section--navy .prose,
.section--navy li{color:color-mix(in srgb,#fff 84%,var(--blue))}
.section--navy .ticks li{color:#fff}
.section--navy .step p,
.section--navy .step span,
.section--navy .timeline p{color:color-mix(in srgb,#fff 74%,var(--blue))}


/* ---------------------------------------------------------------------
   These were living in preview.css, which is not loaded on a sold site.
   They are not preview furniture though: the areas index, the contact
   details list, the page header padding and the rest are the site itself,
   so a live build came out with an unstyled bullet list where the cards
   should be. preview.css now holds only the claim bar and the claim
   section, which are the two things a client never sees.
   ------------------------------------------------------------------ */
/* preview-only additions */
/* No .wordmark rule here. preview.css loads after the theme, so anything it says
   about the wordmark silently beat every logotype size in brandmark.css and in
   the per-design files. That is what kept the logo small no matter what those
   files asked for. The logotype is the theme's business; this file styles the
   preview furniture only. */
.footer .wordmark{color:#fff}
.index-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.index-list a{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px;text-decoration:none;font-weight:600;color:var(--navy)}
.index-list a:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.index-list svg{width:18px;height:18px;color:var(--coral);flex:none}
.nap--big li{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.nap--big b{display:block;color:var(--navy)}
.prose p{max-width:68ch}
.page-head{padding-block:clamp(48px,6vw,80px);background:var(--aqua)}
.hero--sm{min-height:auto;padding-block:clamp(48px,6vw,86px)}
.gbadge{display:flex;align-items:center;gap:10px;margin:14px 0 0;flex-wrap:wrap}
.gbadge .stars{display:inline-flex;gap:2px;color:#F5A623}
.gbadge .stars svg{width:18px;height:18px}
.gbadge b{font-size:1.15rem;color:var(--navy)}
.gbadge span:last-child{color:var(--muted);font-size:.93rem}
.gattrib{margin:18px 0 0;font-size:.86rem;color:var(--muted)}
.gattrib a{font-weight:600}
.brand,.brand:hover{text-decoration:none}
.header-phone{white-space:nowrap}
.card--icon .card__body{padding-top:26px}
.chip{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:var(--aqua-2);color:var(--blue);margin-bottom:16px}
.chip svg{width:26px;height:26px}
.card--icon h3{margin-bottom:.4em}
.card--icon h3 a{text-decoration:none;color:var(--navy)}
.card--icon h3 a:hover{color:var(--blue)}
.trust .ico svg,.hero-badge .ico svg{width:22px;height:22px}
.ticks svg{width:20px;height:20px}


/* client palette */
:root{
  --navy:#1B303C;--navy-2:#233E4D;--navy-3:#2E5266;
  --blue:#2E5266;--blue-2:#3E6E89;--sky:#79B6D8;
  --aqua:#EFF5F8;--aqua-2:#DEE9F0;
  --coral:#B4582B;--coral-2:#A14F26;
  --ink:#1A272E;--bg:#F6F9FB;
}
:root{--font:"Archivo",system-ui,sans-serif;--display:"Archivo Black","Archivo",system-ui,sans-serif;}

/* design: cinematic */
/* Cinematic — full-bleed photography, huge condensed type, minimal chrome. */
.a-cinematic{--radius:2px;--radius-sm:2px;
  --shadow:0 24px 60px -30px rgba(0,0,0,.6);--shadow-lg:0 50px 120px -40px rgba(0,0,0,.75)}
.a-cinematic h1,.a-cinematic h2{letter-spacing:-.045em;text-transform:uppercase;line-height:.94}
.a-cinematic h1{font-size:clamp(2.4rem,1.3rem + 3.4vw,4.5rem)}
.a-cinematic h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,2.9rem)}
.a-cinematic h3{letter-spacing:-.01em;text-transform:none}
.a-cinematic .eyebrow{letter-spacing:.4em;font-size:.7rem}
.a-cinematic .eyebrow::before{display:none}

/* topbar disappears; the hero owns the screen */
.a-cinematic .topbar{display:none}
/* 50, not 20, to match every other design. The drawer lives inside the
   header, so its own z-index:60 only ranks it among its siblings: with
   the header at 20 the whole thing sat under the scrim at 49 and the
   open menu came out washed grey. Nothing sits between 20 and 50 that
   this header overlaps, so raising it costs nothing. */
.a-cinematic .header{position:absolute;top:0;left:0;right:0;background:transparent;border:0;box-shadow:none;z-index:50}
.a-cinematic .header.is-stuck{position:fixed;background:rgba(10,10,12,.82);backdrop-filter:blur(14px)}
.a-cinematic .nav>ul>li>a,.a-cinematic .has-sub>button{color:#fff;font-weight:600;letter-spacing:.02em}
/* The white above beats base's hover colour on specificity but not its hover
   background, which left white lettering on a near-white pill. The pill is
   light on every design, so on this one the hover ink has to come back down. */
.a-cinematic .nav>ul>li>a:hover,
.a-cinematic .has-sub>button:hover{color:var(--navy);background:var(--aqua)}
.a-cinematic .header-phone{color:#fff}
.a-cinematic .header-phone small{color:rgba(255,255,255,.62)}
.a-cinematic .brand .wordmark{color:#fff}
/* The header sits transparent over a dark hero here, so the menu button's
   white default fill made a white square with a white icon on it. The
   colour was overridden and the background it sits on was not. */
.a-cinematic .burger{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
.a-cinematic .header.is-stuck .burger{background:transparent}

.a-cinematic .hero{min-height:min(94vh,940px);display:grid;align-items:end;padding-bottom:clamp(40px,7vw,96px)}
.a-cinematic .hero::before{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 38%,rgba(0,0,0,.86) 100%)}
.a-cinematic .hero .wrap{grid-template-columns:1.15fr .85fr;align-items:end;gap:clamp(28px,5vw,72px);padding-block:clamp(120px,13vw,170px) 0}
.a-cinematic .hero .lead{max-width:46ch;font-size:clamp(1.05rem,1rem + .45vw,1.3rem)}
.a-cinematic .wave{display:none}
.a-cinematic .ticks{grid-template-columns:1fr 1fr;gap:10px 26px;margin:22px 0 28px}
.a-cinematic .hero-badges{border-top:1px solid rgba(255,255,255,.2);padding-top:22px;margin-top:26px}
.a-cinematic .quote{border:1px solid rgba(255,255,255,.16);background:rgba(16,16,18,.72);backdrop-filter:blur(18px);color:#fff}
.a-cinematic .quote h2,.a-cinematic .quote label{color:#fff}
.a-cinematic .quote .sub-t{color:rgba(255,255,255,.66)}
.a-cinematic .quote input,.a-cinematic .quote select,.a-cinematic .quote textarea{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}
.a-cinematic .quote input::placeholder,.a-cinematic .quote textarea::placeholder{color:rgba(255,255,255,.45)}

.a-cinematic .btn{border-radius:0;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;
  font-weight:700;min-height:58px;padding:0 34px}
.a-cinematic .section{padding-block:clamp(72px,9vw,140px)}
.a-cinematic .section--tint{background:#0E0F11;color:#C9CBD0}
.a-cinematic .section--tint h2,.a-cinematic .section--tint h3{color:#fff}
.a-cinematic .card{border-radius:0;border-color:rgba(0,0,0,.10);background:#fff}
.a-cinematic .section--tint .card{background:#15171A;border-color:rgba(255,255,255,.09)}
.a-cinematic .section--tint .card h3{color:#fff}
.a-cinematic .section--tint .card p{color:#9DA1A8}
.a-cinematic .chip{border-radius:0;background:transparent;border:1px solid currentColor;width:46px;height:46px}
.a-cinematic .card:hover{transform:none;border-color:var(--coral)}
.a-cinematic .steps{gap:0}
.a-cinematic .step{border-left:1px solid rgba(255,255,255,.16);padding:8px 26px}
.a-cinematic .step .num{border-radius:0;background:transparent;border:1px solid currentColor}
.a-cinematic .review{border-radius:0}
.a-cinematic .cta-band{border-radius:0;background:var(--navy)}
.a-cinematic .cta-band::before,.a-cinematic .cta-band::after{display:none}
.a-cinematic .footer{background:#0B0C0D}
.a-cinematic .crumbs{background:#0E0F11;color:#8B8F96;border-color:rgba(255,255,255,.08)}
.a-cinematic .page-head{background:#0E0F11;color:#C9CBD0}
.a-cinematic .page-head h1{color:#fff}
.a-cinematic .page-head .lead{color:#fff}
@media (max-width:980px){
  .a-cinematic .hero .wrap{grid-template-columns:1fr}
  .a-cinematic .hero{min-height:auto;padding-top:104px}
  .a-cinematic .step{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding:22px 0}
}

.a-cinematic .nav>ul>li>a[aria-current]{background:transparent;color:var(--sky);
  box-shadow:inset 0 -2px 0 var(--coral)}
.a-cinematic .quote h2{font-family:var(--font);text-transform:none;font-weight:700;
  font-size:1.45rem;letter-spacing:-.02em;line-height:1.2}


/* ---- Generated logotype -----------------------------------------------
   A business with no logo file still needs something to point at in the
   pitch. Their name is the honest answer: it claims nothing that is not
   true. The work here is making it read as a mark rather than as a line of
   text that wandered into the header, which comes down to three things:
   size, a weight break between the lead word and the rest, and colour
   doing something deliberate.                                            */

.brand{gap:14px;text-decoration:none;align-self:stretch;align-items:center}

.wordmark--logo{
  display:block;
  font-family:var(--display,var(--font));
  font-size:clamp(1.42rem,1.04rem + .92vw,1.84rem);
  line-height:1.02;
  letter-spacing:-.035em;
  text-transform:uppercase;
  font-feature-settings:"kern" 1,"liga" 1}
/* No text-wrap:balance. It changes the element's intrinsic width, so the flex
   item measured narrower than its own text and broke a two word name onto two
   lines in a header that had room for one. */

/* Each half wraps as a unit. Without this the base header rule lets a long
   name break mid-word, and "PLUMBIN / G & GAS" is not a logo. */
.wordmark--logo{overflow-wrap:normal;word-break:keep-all;hyphens:none}
.wordmark--logo .wm-lead,
.wordmark--logo .wm-rest{display:inline-block}
/* A long name cannot afford the inline-block, which forces the second half onto
   a line of its own before it has even started wrapping. It flows inline and
   wraps with the first half, so three lines hold the whole name. */
.wordmark--logo.wordmark--long .wm-lead,
.wordmark--logo.wordmark--long .wm-rest{display:inline}
.wordmark--logo .wm-lead{font-weight:900;color:var(--navy)}
.wordmark--logo .wm-rest{font-weight:500;color:var(--blue);margin-left:.32em;
  letter-spacing:-.01em}

/* Long names lose the size, not the structure. */
.wordmark--logo.wordmark--long{font-size:clamp(1.24rem,.98rem + .82vw,1.64rem);
  letter-spacing:-.025em;line-height:1.1}

/* ---- per design -------------------------------------------------------
   Each archetype has its own voice, and a logotype that ignores that reads
   as a sticker. These lean into the display face each one already loads. */

.a-editorial .wordmark--logo{text-transform:none;letter-spacing:-.012em;
  font-size:clamp(1.6rem,1.18rem + 1.15vw,2.24rem)}
.a-editorial .wordmark--logo .wm-lead{font-weight:700}
.a-editorial .wordmark--logo .wm-rest{font-weight:400;font-style:italic;color:var(--muted)}

.a-luxe .wordmark--logo{letter-spacing:.2em;font-size:clamp(1.14rem,.94rem + .56vw,1.46rem)}
.a-luxe .wordmark--logo .wm-lead{font-weight:400;color:#fff}
.a-luxe .wordmark--logo .wm-rest{font-weight:300;color:var(--sky);margin-left:.5em}

.a-brutalist .wordmark--logo{letter-spacing:-.05em;
  font-size:clamp(1.78rem,1.2rem + 1.6vw,2.7rem)}
.a-brutalist .wordmark--logo .wm-lead{font-weight:900;color:#111}
.a-brutalist .wordmark--logo .wm-rest{font-weight:900;color:var(--coral);margin-left:.22em}

.a-cinematic .wordmark--logo{letter-spacing:-.04em}
.a-cinematic .wordmark--logo .wm-lead{color:#fff}
.a-cinematic .wordmark--logo .wm-rest{color:var(--sky);font-weight:400}

.a-utility .wordmark--logo{letter-spacing:-.02em}
.a-utility .wordmark--logo .wm-rest{color:var(--coral);font-weight:700}

.a-organic .wordmark--logo{text-transform:none;letter-spacing:-.025em}
.a-organic .wordmark--logo .wm-rest{font-weight:600}

.a-clinic .wordmark--logo{text-transform:none;letter-spacing:-.022em}
.a-clinic .wordmark--logo .wm-rest{font-weight:500}

.footer .foot-name{font-family:var(--display,var(--font));letter-spacing:-.02em}

@media (max-width:600px){
  .brand{gap:10px}
  .wordmark--logo{font-size:1.4rem;letter-spacing:-.03em}
  .wordmark--logo.wordmark--long{font-size:1.12rem}
  .wordmark--logo .wm-rest{margin-left:.26em}
}


/* ---- Generated hero backgrounds --------------------------------------
   Used when the business has no photograph large or detailed enough to
   carry a full-bleed hero. Built from the client's own palette in pure
   CSS, so it is razor sharp at any screen density and weighs nothing.   */

.hero--art .hero__art{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero--art .hero__art::before,
.hero--art .hero__art::after{content:"";position:absolute;inset:0}
.hero--art::before{background:none}          /* the art supplies its own depth */

/* Default: a deep field lit from one side, with a fine ruled grid. */
.hero--art .hero__art{
  background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb,var(--blue) 62%, transparent) 0%, transparent 58%),
    radial-gradient(90% 70% at 4% 96%, color-mix(in srgb,var(--sky) 26%, transparent) 0%, transparent 60%),
    linear-gradient(168deg, var(--navy-2,var(--navy)) 0%, var(--navy) 62%, var(--navy-3,var(--navy)) 100%);
}
.hero--art .hero__art::before{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(120% 80% at 70% 10%, #000 10%, transparent 72%);
}
.hero--art .hero__art::after{
  background:radial-gradient(58% 46% at 50% 118%, rgba(0,0,0,.42), transparent 70%);
}

/* Cinematic: one hard shaft of light across a very dark stage. */
.a-cinematic .hero--art .hero__art{
  background:
    linear-gradient(102deg, transparent 34%, color-mix(in srgb,var(--sky) 20%, transparent) 46%,
                    color-mix(in srgb,var(--blue) 34%, transparent) 52%, transparent 64%),
    radial-gradient(90% 120% at 88% 0%, color-mix(in srgb,var(--coral) 26%, transparent), transparent 62%),
    linear-gradient(180deg,#05070c 0%, var(--navy) 100%);
}
.a-cinematic .hero--art .hero__art::before{
  background-image:repeating-linear-gradient(102deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px);
  mask-image:linear-gradient(102deg, transparent 30%, #000 50%, transparent 70%);
}

/* Editorial: pale paper, one wide arc, a hairline baseline grid. */
.a-editorial .hero--art .hero__art{
  background:
    radial-gradient(64% 80% at 88% 4%, color-mix(in srgb,var(--aqua) 92%, transparent), transparent 62%),
    linear-gradient(180deg,#fff 0%, var(--bg,#fbfaf8) 100%);
}
.a-editorial .hero--art .hero__art::before{
  border-radius:50%;
  inset:-46% -30% auto auto;width:132%;aspect-ratio:1;height:auto;
  border:1px solid color-mix(in srgb,var(--blue) 26%, transparent);
  background:none;mask-image:none;
}
.a-editorial .hero--art .hero__art::after{
  background-image:repeating-linear-gradient(to bottom, color-mix(in srgb,var(--ink) 8%, transparent) 0 1px, transparent 1px 38px);
  mask-image:linear-gradient(180deg,transparent, #000 30%, #000 70%, transparent);
}

/* Brutalist: flat blocks on paper, no blur, nothing apologetic. */
.a-brutalist .hero--art .hero__art{background:#F4F2ED}
.a-brutalist .hero--art .hero__art::before{
  background:
    linear-gradient(var(--coral),var(--coral)) 80% 0/22% 58% no-repeat,
    linear-gradient(var(--blue),var(--blue)) 97% 52%/14% 48% no-repeat,
    linear-gradient(#111,#111) 72% 80%/9% 20% no-repeat;
  mask-image:none;
}
.a-brutalist .hero--art .hero__art::after{
  background-image:
    linear-gradient(to right, rgba(17,17,17,.10) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(17,17,17,.10) 2px, transparent 2px);
  background-size:96px 96px;
}

/* Organic: soft overlapping washes on paper, nothing with a hard edge. */
.a-organic .hero--art .hero__art{
  background:
    radial-gradient(54% 60% at 14% 10%, color-mix(in srgb,var(--sky) 34%, transparent), transparent 68%),
    radial-gradient(44% 50% at 88% 22%, color-mix(in srgb,var(--coral) 16%, transparent), transparent 66%),
    radial-gradient(72% 66% at 64% 100%, color-mix(in srgb,var(--aqua) 90%, transparent), transparent 70%),
    linear-gradient(165deg, var(--aqua) 0%, #fff 72%);
}
.a-organic .hero--art .hero__art::before{
  background:radial-gradient(40% 46% at 32% 74%, color-mix(in srgb,var(--blue) 12%, transparent), transparent 72%);
  mask-image:none;
}
.a-organic .hero--art .hero__art::after{background:none}

/* Luxe: near black, one slow sheen, a single hairline. */
.a-luxe .hero--art .hero__art{
  background:
    linear-gradient(116deg, transparent 38%, color-mix(in srgb,var(--coral) 22%, transparent) 50%, transparent 62%),
    radial-gradient(80% 100% at 20% 0%, color-mix(in srgb,var(--blue) 26%, transparent), transparent 60%),
    linear-gradient(180deg,#0a0a0c 0%, var(--navy) 100%);
}
.a-luxe .hero--art .hero__art::before{
  inset:auto 0 12% 0;height:1px;
  background:linear-gradient(to right, transparent, color-mix(in srgb,var(--coral) 70%, transparent), transparent);
  mask-image:none;
}

/* Utility: a working drawing. Dots, not decoration. */
.a-utility .hero--art .hero__art{
  background:
    radial-gradient(100% 80% at 84% 12%, color-mix(in srgb,var(--blue) 44%, transparent), transparent 58%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-3,var(--navy)) 100%);
}
.a-utility .hero--art .hero__art::before{
  background-image:radial-gradient(rgba(255,255,255,.14) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  mask-image:linear-gradient(140deg,#000 10%, transparent 78%);
}
.a-utility .hero--art .hero__art::after{
  background:linear-gradient(var(--coral),var(--coral)) 0 0/100% 3px no-repeat;
}

/* Clinic: calm, clean, plenty of light. */
.a-clinic .hero--art .hero__art{
  background:
    radial-gradient(66% 84% at 88% 2%, rgba(255,255,255,.9), transparent 64%),
    radial-gradient(58% 66% at 8% 94%, color-mix(in srgb,var(--sky) 26%, transparent), transparent 68%),
    linear-gradient(176deg, var(--aqua) 0%, var(--aqua-2,var(--aqua)) 100%);
}
.a-clinic .hero--art .hero__art::before{
  background-image:
    linear-gradient(to right, color-mix(in srgb,var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(90% 70% at 80% 8%, #000, transparent 72%);
}
.a-clinic .hero--art .hero__art::after{background:none}

/* Phones: fewer, larger shapes. Detail at this size is just noise. */
@media (max-width:600px){
  .hero--art .hero__art::before{background-size:52px 52px}
  .a-brutalist .hero--art .hero__art::before{
    background:
      linear-gradient(var(--coral),var(--coral)) 68% 0/34% 46% no-repeat,
      linear-gradient(var(--blue),var(--blue)) 8% 76%/30% 30% no-repeat;
  }
  .a-utility .hero--art .hero__art::before{background-size:18px 18px}
  .a-editorial .hero--art .hero__art::before{inset:-30% -60% auto auto;width:190%}
}

/* ---- Light heroes ----------------------------------------------------
   Four designs put dark type on a pale hero. The ghost button is styled
   for a dark stage, so on those it has to be re-inked or it vanishes.   */
.a-organic .hero .btn--ghost,
.a-editorial .hero .btn--ghost,
.a-clinic .hero .btn--ghost{
  color:var(--navy);
  border-color:color-mix(in srgb,var(--navy) 32%, transparent);
  background:rgba(255,255,255,.62);
}
.a-organic .hero .btn--ghost:hover,
.a-editorial .hero .btn--ghost:hover,
.a-clinic .hero .btn--ghost:hover{background:#fff;border-color:var(--navy)}
.a-brutalist .hero .btn--ghost{color:#111;border:3px solid #111;background:transparent;border-radius:0}
.a-brutalist .hero .btn--ghost:hover{background:#111;color:#F4F2ED}

/* ---- hero eyebrow ink --------------------------------------------------
   This used to be a blanket inline style, which meant it also landed on the
   archetypes whose eyebrow is a solid chip: sky-blue lettering on an orange
   block. Colour belongs with the ground it sits on, so it lives here.      */

/* Over a photo, which always carries a dark scrim, and over the generated
   art on the archetypes whose ground is dark. */
.hero:not(.hero--art) .eyebrow,
.a-classic .hero--art .eyebrow,
.a-cinematic .hero--art .eyebrow,
.a-luxe .hero--art .eyebrow{color:var(--sky)}

/* Utility's eyebrow is a filled coral chip on any ground, so it is white
   whatever is behind it. Last, so it wins on source order. */
.a-utility .hero .eyebrow{color:#fff}

/* ---------------------------------------------------------------------------
   One hero treatment for every design: a picture behind it, a black veil over
   the picture, light text on top.

   This deliberately overrides four of the seven designs, which each had their
   own light hero with dark text and no veil. The cost is that the designs look
   more like one another at the top of the page. The gain is that hero text is
   legible over any photograph we are handed, including a generated one nobody
   has looked at yet, which is the situation almost every build is in.

   It lives here rather than in base.css because the per-design stylesheets are
   concatenated after base and would otherwise win.
   ------------------------------------------------------------------------ */
body[class*="a-"] .hero__bg{display:block}
body[class*="a-"] .hero::before{
  content:"";position:absolute;inset:0;z-index:-1;display:block;
  background:linear-gradient(100deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.5) 46%,rgba(0,0,0,.34) 100%)}
body[class*="a-"] .hero h1,
body[class*="a-"] .hero h2,
body[class*="a-"] .hero p,
body[class*="a-"] .hero .lead,
body[class*="a-"] .hero .ticks li,
body[class*="a-"] .hero .eyebrow{color:#fff}
/* The quote card is its own white panel on six of the seven designs, so the
   white hero text above must not reach into it. Cinematic is the exception:
   its card is dark glass with white type of its own, and re-inking that one
   put dark brown lettering on a near-black panel. Any future design with a
   dark card belongs in this list too. */
body[class*="a-"]:not(.a-cinematic) .hero .quote,
body[class*="a-"]:not(.a-cinematic) .hero .quote *{color:inherit}
body[class*="a-"]:not(.a-cinematic) .hero .quote{color:var(--ink)}
body[class*="a-"]:not(.a-cinematic) .hero .quote h2,
body[class*="a-"]:not(.a-cinematic) .hero .quote b,
body[class*="a-"]:not(.a-cinematic) .hero .quote label{color:var(--navy)}
@media (max-width:820px){
  /* Narrow screens stack the text over the middle of the picture, where a side
     to side gradient is at its weakest, so it goes top to bottom instead. */
  body[class*="a-"] .hero::before{
    background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.72) 100%)}
}


/* ---- Tablet and below (<=980px) --------------------------------------
   Three designs re-apply a backdrop-filter to the header. A filtered
   ancestor becomes the containing block for position:fixed children, so
   the slide-in nav gets clipped to the header instead of filling the
   screen. It has to be off at every width where the drawer is used.    */
@media (max-width:980px){
  body[class*="a-"] .header,
  body[class*="a-"] .header.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none}
  /* Push the menu button to the edge of the screen, not up against the name. */
  .header-cta{margin-left:auto}
}

/* ---- Phone (<=600px) -------------------------------------------------
   Loaded last, after the archetype, so a design's own display settings
   are tightened for a hand rather than overriding this file.            */
@media (max-width:600px){
  body{font-size:16px;line-height:1.62}
  body[class*="a-"] h1{line-height:1.12;letter-spacing:-.022em}
  body[class*="a-"] h2{line-height:1.18;letter-spacing:-.016em}
  body[class*="a-"] h3{line-height:1.26}
  body[class*="a-"] .lead{font-size:1.02rem;line-height:1.58}
  .eyebrow{font-size:.72rem;letter-spacing:.12em;margin-bottom:10px}

  /* Air, but not a canyon */
  .section{padding-block:clamp(44px,11vw,60px)}
  .section-head{margin-bottom:26px}
  .grid{gap:14px}

  /* The brand must yield to the menu button, never shove it off screen */
  .header .wrap{min-height:62px;gap:10px}
  .brand{flex:0 1 66%;max-width:66%;min-width:0}
  /* The desktop rule that narrows the brand for a long name must not follow
     it onto a phone, where 34% is a hundred and thirty pixels. */
  .brand:has(.wordmark--long){flex:0 1 66%;max-width:66%}
  .brand img{width:min(112px,100%)}
  /* Beats the per-design wordmark sizes, which are set for a desktop header. */
  body[class*="a-"] .header .wordmark{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    white-space:normal;overflow:hidden;overflow-wrap:break-word;
    max-width:100%;font-size:1.26rem;line-height:1.14;letter-spacing:-.02em}
  body[class*="a-"] .header .wordmark--long{font-size:.9rem;line-height:1.2}
  /* Three lines of the long size, so a long name is shown whole rather than
     cut off mid-word by the desktop ceiling. */
  .header .wordmark{max-height:52px}
  .burger{flex:none;margin-left:auto;width:44px;height:44px;border-radius:11px}

  /* Hero: reach the point sooner */
  .hero .wrap{padding-block:38px 46px;gap:26px}
  .hero-badge{display:none}
  .ticks li{font-size:.96rem}

  /* Touch targets, and 16px inputs so iOS stops zooming on focus */
  .btn{min-height:48px;font-size:.98rem}
  .field input,.field select,.field textarea{min-height:48px;font-size:16px}
  .quote{border-radius:18px;padding:20px}
  .quote h2,.quote h3{font-size:1.3rem}

  /* Density: these were laid out for a desktop column */
  .trust li{gap:12px}
  .trust li .ico,.trust li svg{width:36px;height:36px}
  .card__body p,.mini span{font-size:.94rem}
  .stats b{font-size:1.9rem}
  .steps{row-gap:26px}
  .media-stack{padding:0 0 22px 14px}
}

/* ---- 12. a hero you can actually get past on a phone ------------------
   The full seven-field form pushed every piece of proof about 900px down
   the page. On a phone the hero asks for the three fields a tradie needs
   to call someone back; the rest of the form still lives on /contact/. */
@media (max-width:600px){
  .hero .quote .field:has(#quote-suburb),
  .hero .quote .field:has(#quote-service){display:none}
  .hero .quote textarea{min-height:80px}
  .hero .quote .sub-t{margin-bottom:14px}
  /* Two up, so four proof points cost one line each instead of four. */
  .hero .ticks{grid-template-columns:1fr 1fr;gap:10px 14px}
  .hero .ticks li{font-size:.92rem;align-items:flex-start}
  .hero .ticks svg{margin-top:2px}
}

/* ---- The slide-in menu -------------------------------------------------
   The drawer is a white panel on every design. Two designs ink their top
   level nav links white, because their header sits transparent over a dark
   hero, and that ink follows the links into the drawer: white on white. The
   menu then reads as empty apart from the current page, which survives only
   because it is coloured separately. The links were always there and always
   clickable, which is the worst kind of broken.

   Last stylesheet in the build, so it does not have to out-specify each
   design one at a time. */
@media (max-width:980px){
  body[class*="a-"] .nav>ul>li>a,
  body[class*="a-"] .nav>ul>li>.has-sub>button,
  body[class*="a-"] .nav .has-sub>button{color:var(--navy)}
  body[class*="a-"] .nav>ul>li>a[aria-current]{color:var(--blue)}
  body[class*="a-"] .nav .sub a{color:var(--ink)}
  /* The call button in the drawer is a .btn, but the nav rules strip every
     link's background to keep the top bar flat. In the bar that is right; in
     the drawer it leaves a button with no button. Give it back. */
  body[class*="a-"] .nav .btn{background:var(--coral);border-color:var(--coral);color:#fff}
  body[class*="a-"] .nav .btn:hover{background:var(--coral-2,var(--coral));color:#fff}
  /* base.css turns this on inside its own mobile query and then off again on
     the line after it. Same specificity, and a media query adds none, so the
     later rule won at every width and the call button in the drawer has never
     once been shown. This file is last, so here it stays on. */
  .nav .mobile-only{display:block}
}