/* ============================================================================
   Refined Group — palette matches the live WordPress site: a WHITE page with a
   DARK header and dark section bands. The 2026-07 static export inverted this,
   painting the whole site in #222223 (which is the *band* colour, not the page
   colour). That inversion is what broke the blue links, the navy HIA badge and
   the project cards — all of them light-background assets.

   Sampled from https://refinedgroup.com.au :
     body #FFFFFF / text #333333 · header #222223 · primary CTA gold #C9A84C
     secondary button #222223 · in-body links #0B5AA9
   One deliberate deviation: the live gold CTA uses WHITE text (2.29:1 — fails
   WCAG). Dark text on the same gold is 5.96:1, so that is what is used here.
   ============================================================================ */
:root{
  --font-heading:'Poppins', sans-serif;
  --font-body:'Poppins', sans-serif;
  --bg:#ffffff; --bg-lift:#f6f6f4; --text:#333333; --text-dim:#5a5a5a;
  --accent:#C9A84C;          /* brand gold — primary CTA */
  --link:#0B5AA9;            /* brand blue — in-body links */
  --line:#dcdcdc;
  --dark:#222223;            /* the band / header colour */
  --dark-lift:#2b2b2d;       /* card surface inside a dark band */
  --on-dark:#f2f1ee;
  --on-dark-dim:#b9b8b4;
  --line-dark:rgba(255,255,255,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;font-weight:300}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}
/* text-wrap:balance evens out the lines of a heading so it can't strand a single
   word on the last line; :pretty does the same job for body copy without the
   line-count cap balance has. Both are progressive — older browsers just ignore
   them. Added after finding e.g. the "why" intro breaking 775 / 763 / 54px. */
/* 600, not 500: at display sizes Poppins Medium reads underweight against the photos
   and the dark bands. 600 is already in the font request on every page, so this costs
   no extra download. 700 would — and it closes up the counters at 40px. */
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;line-height:1.18;color:#222223;text-wrap:balance}
p,li,figcaption,blockquote{text-wrap:pretty}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow{max-width:840px}
.eyebrow{font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-dim);font-weight:500}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- buttons ----
   line-height:1 is the important bit. body sets 1.7, and a button inherits it, so
   13.6px text sat in a 23.12px line box: the pill came out 53px tall with only 26%
   of it glyph — 9.5px of dead air top and bottom. That is what made these look
   bloated and the label look lost. The live site uses line-height:1 for the same
   reason. Geometry below matches the live primary CTA: 14px / uppercase / tracked /
   ~48px tall / ~30% glyph.
   inline-flex + centring means the label is optically centred regardless of the
   label's own line box. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:17px 38px;
  font-family:var(--font-heading);
  font-size:.875rem;              /* 14px — the live CTA size */
  font-weight:500;
  line-height:1;
  letter-spacing:.1em;            /* live uses 1.5px at 14px ≈ .107em */
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  border:1px solid var(--accent);
  border-radius:999px;
  color:#2E2E2B;
  background:var(--accent);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
/* hover deepens the gold rather than hollowing the button out to an outline —
   the old transparent hover was a jarring jump and read as the button turning off.
   #BE9C40 keeps dark text at 5.20:1. */
.btn:hover{background:#BE9C40;border-color:#BE9C40;color:#2E2E2B}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--accent);color:#2E2E2B;border-color:var(--accent)}
.btn-solid:hover{background:#BE9C40;border-color:#BE9C40;color:#2E2E2B}

/* secondary = dark pill (the live site's "Explore Our ..." buttons). Only for use on
   LIGHT surfaces — on a dark band it would vanish, so bands keep the gold. */
.btn-dark{background:var(--dark);border-color:var(--dark);color:#fff}
.btn-dark:hover{background:#3d3d40;border-color:#3d3d40;color:#fff}

/* long labels ("LET'S TALK ABOUT YOUR PROJECT" is ~330px uppercase) must not
   overflow a narrow phone */
@media(max-width:560px){
  .btn{padding:15px 26px;font-size:.8rem;letter-spacing:.08em}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}

/* ---- dark bands. Everything inside one flips to the dark palette, so a band is
   self-contained rather than a pile of per-section overrides. ---- */
.band{background:var(--dark);color:var(--on-dark-dim);--text:var(--on-dark);--text-dim:var(--on-dark-dim);--line:var(--line-dark);--bg:var(--dark-lift);--bg-lift:var(--dark-lift)}
.band h1,.band h2,.band h3,.band h4{color:var(--on-dark)}
.band p,.band li{color:var(--on-dark-dim)}
.band .eyebrow{color:var(--on-dark-dim)}
.band a:not(.btn){color:var(--accent)}
.band .btn:hover{color:var(--on-dark);border-color:var(--on-dark)}

header{position:sticky;top:0;z-index:50;background:rgba(34,34,35,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-dark)}
.nav{display:flex;align-items:center;justify-content:space-between;height:82px;gap:16px}
/* Brand mark — must never distort.
   flex-shrink:0 stops the flex row squeezing the logo when space runs short (which,
   combined with the global img{max-width:100%}, squashed it to 186x44 on a 375px phone).
   object-fit:contain is the backstop: if any future layout does constrain the box, the
   mark scales down inside it instead of stretching. Heights step down by breakpoint so
   it fits alongside the CTA at full aspect rather than being crushed into it. */
.logo{flex-shrink:0}
.logo img{height:44px;width:auto;max-width:100%;object-fit:contain}
.nav>.btn{flex-shrink:0}
@media(max-width:1020px){
  .logo img{height:36px}
  .nav>.btn{padding:11px 22px;font-size:.78rem}
}
@media(max-width:430px){
  .logo img{height:30px}
  /* padding-y keeps this at a 44px tap target. It used to reach ~42px only because
     it inherited line-height 1.7; with line-height:1 it collapsed to 34px. */
  .nav>.btn{padding:16px 16px;font-size:.72rem;letter-spacing:.05em}
}
/* 320px: logo + CTA must both fit at full aspect. Neither shrinks, so make them
   genuinely smaller rather than let the flex row squash the mark. */
@media(max-width:360px){
  .wrap{padding:0 16px}
  .logo img{height:26px}
  /* padding-x shrinks to fit beside the logo; padding-y holds the 44px tap target */
  .nav>.btn{padding:16px 12px;font-size:.68rem;letter-spacing:.04em}
}
/* same guarantee for the other places the marks appear */
.foot img{object-fit:contain}
/* align-items:center — a flex row stretches items by default, so one two-line item
   ("About Us" wrapping) made every li 54.4px tall and pushed all the labels into the
   top line box, 12.4px above centre. nowrap stops the wrap; centre is the backstop. */
.nav-links{display:flex;align-items:center;gap:22px;list-style:none}
.nav-links li{display:flex;align-items:center}
/* the header is a dark band, so nav text is light regardless of the page palette */
.nav-links a{display:block;white-space:nowrap;text-decoration:none;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-dim);transition:color .2s}
.nav-links a:hover{color:var(--on-dark)}
.nav>.btn:hover{color:var(--on-dark);border-color:var(--on-dark)}
/* 1080, not 1020: logo(250) + links(556) + CTA(165) + gaps(32) + wrap padding(48)
   needs ~1051px of viewport, and media queries count the scrollbar the layout doesn't
   get. At 1020 the links showed but the CTA overflowed and the page scrolled sideways. */
@media(max-width:1080px){.nav-links{display:none}}

/* ---- mobile menu ------------------------------------------------------------
   Below 1080px the nav links are hidden and, until now, nothing replaced them:
   phones had footer-only navigation. Most of this site's traffic is mobile, so
   this is the primary nav for most visitors, not a fallback.

   Built on <dialog showModal()> — the same element the gallery lightbox uses.
   That buys the focus trap, Escape-to-close and an inert background from the
   browser instead of three hand-rolled approximations.

   PROGRESSIVE: the button only appears once nav.js has confirmed dialog support
   and set .has-menu on <html>. Without JS there is no button, which is exactly
   where the site is today — a dead hamburger would be worse than none. */
dialog:not([open]){display:none}          /* pre-dialog browsers would render it inline */

.nav-toggle{display:none;width:44px;height:44px;flex-shrink:0;padding:0;
  align-items:center;justify-content:center;
  background:none;border:0;border-radius:4px;cursor:pointer;color:var(--on-dark)}
.has-menu .nav-toggle{display:none}
@media(max-width:1080px){ .has-menu .nav-toggle{display:flex} }
/* Below 560 the bar cannot hold logo + CTA + toggle: at 375px that is 171 + 120 + 44
   plus gaps and padding = 415px of content in a 375px window, and it overflowed by
   31px. The CTA moves into the drawer, where it is a full-width gold button above the
   phone number — more prominent than the squeezed pill it replaces, not less.
   Above 560 there is room, so the CTA stays in the bar as on desktop. */
@media(max-width:560px){ .has-menu .nav>.btn{display:none} }
.nav-toggle:hover{color:#fff}
/* three bars from one element — the ::before/::after ride the parent's colour */
.nav-toggle-bars{position:relative;display:block;width:24px;height:2px;background:currentColor}
.nav-toggle-bars::before,
.nav-toggle-bars::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor}
.nav-toggle-bars::before{top:-7px}
.nav-toggle-bars::after{top:7px}

/* The drawer is a dark surface, so it REDEFINES the palette tokens for its subtree
   rather than overriding each child by selector — same pattern as the bands. */
.mobile-menu{
  width:min(400px,100%);max-width:100%;
  height:100dvh;max-height:100dvh;   /* dvh, not vh: vh ignores mobile browser chrome */
  margin:0 0 0 auto;padding:0;border:0;overflow:hidden;
  background:var(--dark);color:var(--on-dark-dim);
  --text:var(--on-dark);--text-dim:var(--on-dark-dim);--line:var(--line-dark);
  transform:translateX(100%);transition:transform .28s ease}
.mobile-menu.is-open{transform:translateX(0)}
.mobile-menu::backdrop{background:rgba(0,0,0,0);transition:background .28s ease}
.mobile-menu.is-open::backdrop{background:rgba(0,0,0,.6)}

.mobile-menu-inner{display:flex;flex-direction:column;height:100%;padding:0 22px 24px}
/* 82px matches the header bar exactly, so the close button lands where the
   hamburger was and the drawer reads as the header opening rather than a new plane */
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;
  height:82px;flex-shrink:0;margin:0 -22px;padding:0 22px;border-bottom:1px solid var(--line-dark)}
.mobile-menu-head img{height:30px;width:auto;object-fit:contain}
.nav-close{width:44px;height:44px;margin-right:-10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--on-dark);font-size:26px;line-height:1}
.nav-close:hover{color:#fff}

.mobile-links{list-style:none;margin:0;padding:0;overflow-y:auto}
.mobile-links a{display:block;padding:15px 0;text-decoration:none;
  font-family:var(--font-heading);font-size:.95rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-dim);
  border-bottom:1px solid var(--line-dark);transition:color .2s}
.mobile-links a:hover{color:var(--on-dark)}
/* the page you are on, marked — otherwise the menu gives no sense of place */
.mobile-links a[aria-current="page"]{color:var(--accent)}

.mobile-foot{margin-top:auto;padding-top:22px;flex-shrink:0}
.mobile-foot .btn{width:100%}
.mobile-phone{display:block;text-align:center;padding:14px 0 0;
  text-decoration:none;color:var(--on-dark-dim);font-size:.95rem}
.mobile-phone:hover{color:var(--on-dark)}

@media(prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu::backdrop{transition:none}
}

/* ---- projects strip (suburb pages) ------------------------------------------
   The suburb pages had two in-content links and the four case studies were linked
   from one page each — the best content on the site, effectively orphaned. */
.proj-strip{padding:80px 0;background:var(--bg-lift);border-top:1px solid var(--line)}
.proj-strip h2{font-size:clamp(1.5rem,2.6vw,2rem);text-align:center;margin-bottom:40px}
.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.proj-card{display:flex;flex-direction:column;text-decoration:none;background:var(--bg);
  border:1px solid var(--line);transition:border-color .2s}
.proj-card:hover{border-color:var(--accent)}
/* the four lead photos run 0.667 portrait to 1.5 landscape — a fixed ratio plus
   cover is what stops the row from going ragged */
.proj-card figure{aspect-ratio:4/3;overflow:hidden}
.proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.proj-card:hover img{transform:scale(1.04)}
.proj-body{padding:18px 18px 22px}
.proj-card h3{font-size:1rem;margin-bottom:6px}
.proj-card p{font-size:.85rem;color:var(--text-dim);line-height:1.5}
.proj-more{text-align:center;margin-top:32px;font-size:.9rem}
.proj-more a{color:var(--link)}
@media(max-width:900px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.proj-grid{grid-template-columns:1fr}.proj-strip{padding:60px 0}}

/* ---- floating CTA (phones only) ---------------------------------------------
   Fills the exact gap the mobile menu created: below 560px "Get in Touch" leaves
   the header bar. Between 560 and 1080 it is still in the bar, and the header is
   sticky, so it never scrolls away — a float there would just be the same button
   twice on screen. Hence 560px, matching the rule that hides the bar CTA.

   A pill, not a full-width sticky bar. The bar is the higher-converting pattern
   and it is also the one that reads as a pop-up ad — the same note that got the
   cost-guide band removed. This stays out of the way until it is useful.

   z-index 40 sits under the header (50); the drawer is in the top layer so it
   covers this regardless. */
.float-cta{position:fixed;right:16px;bottom:16px;z-index:40;display:none;
  padding:14px 26px;font-size:.8rem;box-shadow:0 4px 18px rgba(0,0,0,.28);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.float-cta.is-visible{opacity:1;transform:none;pointer-events:auto}
/* only revealed once nav.js is running — otherwise it would sit there permanently
   from first paint, over the hero, which is exactly the gimmick to avoid */
@media(max-width:560px){ .has-menu .float-cta{display:inline-flex} }
@media(prefers-reduced-motion:reduce){ .float-cta{transition:none} }
.page-hero{padding:96px 0 56px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(1.9rem,4vw,3rem);margin-top:14px;max-width:900px}
.content{padding:44px 0 64px}
.content.content-flush{padding-bottom:0}
/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.contact-info h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:10px 0 16px;font-weight:300}
.contact-info h2 b{font-weight:600}
.contact-details{list-style:none;padding:0;margin:26px 0 22px}
.contact-details li{display:flex;gap:16px;padding:13px 0;border-top:1px solid var(--line)}
.contact-details li:last-child{border-bottom:1px solid var(--line)}
.contact-details li span{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);min-width:56px;padding-top:4px}
.contact-note{color:var(--text-dim);font-size:.95rem}
.contact-form{background:var(--bg-lift);border:1px solid var(--line);padding:32px 30px}
.field{margin:0 0 18px;display:flex;flex-direction:column;gap:7px}
.field label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim)}
.field input,.field select,.field textarea{font:inherit;padding:11px 13px;border:1px solid var(--line);background:#fff;color:var(--text);width:100%;border-radius:0}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.field button{margin-top:4px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp-field{position:absolute;left:-9999px;height:0;overflow:hidden}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:40px}}
@media(max-width:600px){.field-row{grid-template-columns:1fr}}
.content h2{font-size:1.6rem;margin:44px 0 16px;color:#222223}
.content h3{font-size:1.2rem;margin:32px 0 12px;color:#222223}
.content p{margin-bottom:18px;color:var(--text-dim)}
.content ul,.content ol{margin:0 0 18px 22px;color:var(--text-dim)}
.content li{margin-bottom:8px}
/* brand blue, as on the live site — 6.89:1 on white. These were inline
   style="color:#0B5AA9" in the export; done in CSS instead so the colour lives
   in one place. */
.content a:not(.btn){color:var(--link);text-underline-offset:2px}
.content a:not(.btn):hover{text-decoration:underline}
.content img{margin:28px 0;border:1px solid var(--line)}
.content strong{color:#222223;font-weight:500}
/* ---- project index cards ---- */
.pj-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:8px 0 24px;list-style:none;margin:0}
.pj-card{display:block;text-decoration:none;color:inherit;height:100%}
.pj-thumb{overflow:hidden;border:1px solid var(--line)}
.pj-card img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s ease}
.pj-card:hover img{transform:scale(1.04)}
.pj-tag{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);display:block;margin:18px 0 6px}
.pj-card h3{font-size:clamp(1.3rem,2.2vw,1.75rem);margin:0 0 4px;color:#222223}
.pj-loc{font-size:.85rem;color:var(--text-dim);margin:0 0 10px}
.pj-desc{font-size:.95rem;color:var(--text-dim);margin:0 0 12px}
.pj-link{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);transition:color .2s}
.pj-card:hover .pj-link{color:var(--link)}
.pj-grid.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:880px){.pj-grid{grid-template-columns:1fr;gap:34px}.pj-grid.three{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pj-card img{transition:none}.pj-card:hover img{transform:none}}

/* honeypot: must stay reachable to bots but hidden from people */

/* ---- closing CTA — dark band ---- */
.cta-band{background:var(--dark);--text:var(--on-dark);--text-dim:var(--on-dark-dim);--line:var(--line-dark);color:var(--on-dark-dim);border-top:0;padding:72px 0;text-align:center}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:12px;color:var(--on-dark)}
.cta-band .eyebrow{color:var(--on-dark-dim)}
.cta-band p{color:var(--on-dark-dim);margin-bottom:26px}
.cta-band .btn:hover{color:var(--on-dark);border-color:var(--on-dark)}
/* ---- alternating image / text sections ---- */
.lead{padding:44px 0 8px}
.lead h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:18px}
.lead p{color:var(--text-dim);margin-bottom:18px;font-size:1.02rem}
/* Section labels: a short gold rule above the title gives these their own identity
   instead of reading as just another floating heading. The margin reset matters:
   .content h2 carries 44px top margin which was stacking on top of the section
   padding and creating ~170px of dead white. */
.section-label{text-align:center;padding:44px 0 0}
/* Kicker word in brand gold above a split-weight title (light + bold, echoing the
   RefinedGroup logotype). Replaced the plain gold rule, which wasn't differentiating
   the section titles enough from ordinary headings. */
.label-kicker{display:block;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:10px}
.section-label h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0;font-weight:300}
.section-label h2 b{font-weight:600}
.section-label+.alt{padding-top:24px}
.alt{padding:32px 0}
.alt-row{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.alt-row.top{align-items:start}
/* explicit flip class rather than :nth-of-type - these sections have
   non-.alt siblings, so type counting would drift */
.alt-flip .alt-media{order:2}
.alt-media{margin:0;min-width:0}
.alt-media img{width:100%;border:1px solid var(--line);margin:0}
/* modest person-portrait: capped width so a face never dominates the row */
.alt-media.portrait{display:flex;justify-content:center}
.alt-media.portrait img{width:260px;height:346px;object-fit:cover}
.alt-text{min-width:0}
.alt-text h3{font-size:clamp(1.25rem,2.2vw,1.6rem);margin-bottom:16px;color:#222223}
.alt-text p{color:var(--text-dim);margin-bottom:16px}
.alt-text p:last-child{margin-bottom:0}
.alt-text a:not(.btn){color:var(--link)}
.alt-text a:not(.btn):hover{text-decoration:underline}
.alt-extra{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.alt-extra img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.alt-extra.one{grid-template-columns:1fr}
@media(max-width:880px){
  .alt-row{grid-template-columns:1fr;gap:26px}
  .alt-flip .alt-media{order:0}
  .alt{padding:40px 0}
}

/* ---- awards strip ----
   Four HIA finalist badges, each with three lines of small text. It needs real width
   to stay legible (at ~300px the text renders ~5px), so it gets its own band rather
   than being squeezed into a half-width column.
   ARTWORK: on this WHITE page use the navy "HIA4-Blue" variant. The white-text
   "Refined-HIA4" file is for dark backgrounds only (hero photo overlay). */
.awards{padding:52px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.awards .wrap{display:flex;flex-direction:column;align-items:center}
.awards img{width:min(820px,100%);height:auto;margin:0;border:0;object-fit:contain}
@media(max-width:880px){.awards{padding:38px 0}}

/* ---- faq ---- */
.faq-list,.content .faq-list{display:grid;gap:14px;padding:0;list-style:none;max-width:860px;margin:0 auto}
.faq-item{background:var(--bg-lift);border:1px solid var(--line);padding:26px 28px}
.faq-item h2,.faq-item h3{font-size:1.05rem;margin:0 0 10px;color:#222223}
.faq-item p{color:var(--text-dim);margin-bottom:12px}
.faq-item p:last-child{margin-bottom:0}
.faq-item a:not(.btn){color:var(--link)}
.faq-item a:not(.btn):hover{text-decoration:underline}
/* homepage/service-page helpers: featured blocks, "see all" link, CTA phone */
.block{padding:22px 0 0}
.pj-more{margin:26px 0 0;text-align:center}
.pj-more a{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);text-decoration:none}
.pj-more a:hover{color:var(--link)}
.cta-phone{display:block;margin:18px auto 0;width:fit-content;color:var(--on-dark-dim);font-size:.95rem;text-decoration:none}
.cta-phone:hover{color:var(--on-dark)}

/* ---- photo hero (service pages): full-bleed image, dark wash, text at the base.
   The wash runs to .82 at the bottom where the text sits — white on the darkest part
   of the gradient, so contrast holds no matter what the photo does up top. ---- */
.photo-hero{position:relative;min-height:540px;display:flex;align-items:flex-end;background:var(--dark)}
.photo-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.photo-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,21,.82) 0%,rgba(20,20,21,.38) 46%,rgba(20,20,21,.12) 100%)}
.photo-hero .wrap{position:relative;z-index:1;padding-top:120px;padding-bottom:58px;width:100%}
.photo-hero .eyebrow{color:rgba(255,255,255,.85)}
.photo-hero h1{font-size:clamp(1.9rem,4vw,3rem);margin:14px 0 16px;max-width:820px;color:#fff}
.photo-hero .hero-sub{max-width:600px;color:var(--on-dark);font-size:1.05rem;margin:0}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
/* ghost pill: ONLY for use on the photo hero, where the gold primary needs a quieter
   sibling. On light surfaces it would vanish — use .btn-dark there instead. */
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
@media(max-width:560px){.photo-hero{min-height:480px}}

/* ---- trust strip: one quiet line of proof under the hero ---- */
.trust-strip{border-bottom:1px solid var(--line);padding:18px 0;text-align:center;font-size:.85rem;color:var(--text-dim)}
.trust-strip .wrap{display:flex;justify-content:center;flex-wrap:wrap;column-gap:12px;row-gap:6px}
.trust-strip .sep{color:var(--line)}
.trust-strip .star{color:var(--accent)}

/* ---- numbered process steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;padding:26px 0 8px;list-style:none;margin:0}
.step{padding-top:22px;border-top:1px solid var(--line)}
.step-n{display:block;font-size:.78rem;letter-spacing:.26em;color:var(--text-dim);margin-bottom:12px}
.step h3{margin:0 0 10px;font-size:1.05rem}
.step p{font-size:.95rem;color:var(--text-dim);margin:0}
/* story timeline: a continuous line with gold era markers, replacing the broken
   arrow glyphs and the floating per-step hairlines */
.steps.timeline .step{border-top:0;position:relative;padding-top:30px}
.steps.timeline .step::before{content:"";position:absolute;top:0;left:0;right:-34px;height:2px;background:var(--line)}
.steps.timeline .step:last-child::before{right:0}
.steps.timeline .step::after{content:"";position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.steps.timeline .step-n{display:block;color:var(--accent);font-weight:600;font-size:.85rem;letter-spacing:.14em;margin-bottom:8px}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr}.steps.timeline .step::before{right:0}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---- section video (shared: homepage about + service pages). The pause control is
   WCAG 2.2.2 — autoplaying, looping, beside other content, so it must be pausable.
   Revealed by JS only: a control that cannot work without the script stays hidden. ---- */
.about-video{position:relative;margin:0;border:1px solid var(--line);overflow:hidden;line-height:0}
.about-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--dark)}
.video-pause{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);background:rgba(34,34,35,.55);backdrop-filter:blur(4px);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s}
.video-pause[hidden]{display:none}
.video-pause:hover{background:rgba(34,34,35,.85);border-color:#fff}
.video-pause-icon{display:block;width:12px;height:13px;
  border-left:4px solid #f2f1ee;border-right:4px solid #f2f1ee}
.video-pause[aria-pressed="true"] .video-pause-icon{
  width:0;height:0;border:0;border-left:12px solid #f2f1ee;
  border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}

/* ---- testimonial cards ---- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:26px 0 8px;list-style:none;margin:0}
.quote{background:var(--bg-lift);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:14px}
.quote .stars{color:var(--accent);letter-spacing:.18em;font-size:.8rem}
.quote blockquote{margin:0;font-size:.97rem;color:var(--text)}
.quote cite{font-style:normal;font-size:.82rem;color:var(--text-dim);margin-top:auto}
@media(max-width:880px){.quote-grid{grid-template-columns:1fr}}

/* ---- gallery grid ---- */
.gal-intro{max-width:840px;margin-bottom:34px}
.gal-intro p{color:var(--text-dim)}
.gal-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;padding:0;list-style:none}
.gal-filter{padding:10px 24px;border-radius:41px;border:1px solid var(--line);background:transparent;color:var(--text-dim);font-family:var(--font-heading);font-size:.76rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.gal-filter:hover{color:#222223;border-color:#222223}
.gal-filter[aria-pressed="true"]{background:var(--accent);color:#2E2E2B;border-color:var(--accent)}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0;list-style:none}
.gal-grid li{display:block}
.gal-grid li[hidden]{display:none}
.gal-item{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg-lift);border:1px solid var(--line)}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gal-item:hover img{transform:scale(1.05)}
.gal-cap{position:absolute;inset:auto 0 0 0;padding:30px 14px 12px;font-size:.76rem;line-height:1.4;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8));opacity:0;transition:opacity .25s}
.gal-item:hover .gal-cap,.gal-item:focus-visible .gal-cap{opacity:1}
.gal-count{color:var(--text-dim);font-size:.8rem;margin-bottom:18px}
@media(max-width:1020px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.gal-grid{grid-template-columns:1fr}}

/* ---- lightbox ---- */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;overflow:hidden}
.lb::backdrop{background:rgba(26,26,24,.94)}
.lb-inner{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;position:relative}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:92vw}
.lb-img{max-width:92vw;max-height:76vh;width:auto;height:auto;object-fit:contain;background:var(--dark-lift)}
.lb-cap{color:var(--on-dark-dim);font-size:.85rem;text-align:center;max-width:60ch}
.lb-btn{position:absolute;background:rgba(34,34,35,.85);border:1px solid var(--line-dark);color:var(--on-dark);width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);transition:background .2s,color .2s}
.lb-btn:hover{background:var(--accent);color:#2E2E2B;border-color:var(--accent)}
.lb-close{top:20px;right:20px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--on-dark-dim);font-size:.76rem;letter-spacing:.14em}
@media(max-width:600px){.lb-btn{width:44px;height:44px}.lb-prev{left:8px}.lb-next{right:8px}.lb-img{max-height:66vh}}
@media(prefers-reduced-motion:reduce){.gal-item img{transition:none}.gal-item:hover img{transform:none}}

/* ---- footer social ---- */
.social{display:flex;gap:12px;margin-top:22px;padding:0;list-style:none}
.social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-dark);border-radius:50%;color:var(--on-dark-dim);transition:color .2s,border-color .2s}
.social a:hover{color:var(--on-dark);border-color:var(--accent)}
.social svg{width:16px;height:16px;fill:currentColor;display:block}

/* ---- footer — dark band ---- */
footer{background:var(--dark);--text:var(--on-dark);--text-dim:var(--on-dark-dim);--line:var(--line-dark);border-top:0;padding:64px 0 40px;font-size:.9rem;color:var(--on-dark-dim)}
.foot{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:48px;margin-bottom:44px}
.foot h4{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark);margin-bottom:16px}
.foot ul{list-style:none}
.foot li{margin-bottom:9px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--on-dark)}
.legal{border-top:1px solid var(--line);padding-top:22px;font-size:.78rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:880px){.foot{grid-template-columns:1fr}}

/* ---- banded zones: the fix for "titles aren't working". Typography alone couldn't
   anchor sections on an unbroken white page; giving key groups their own surface
   (grey band, dark band) chunks the page the way the homepage and the live site
   already do. The zone-head reuses the kicker + split-weight title. ---- */
.zone{padding:48px 0 52px}
.zone-lift{background:var(--bg-lift);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zone-lift .faq-item{background:#fff}
.zone-head{text-align:center;margin-bottom:26px}
.zone-head h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0;font-weight:300}
.zone-head h2 b{font-weight:600}
.band .zone-head h2{color:var(--on-dark)}
.band .quote{background:var(--dark-lift);border-color:var(--line-dark)}
.band .quote blockquote{color:var(--on-dark)}
.band .quote cite{color:var(--on-dark-dim)}
.band .pj-more a{color:var(--on-dark-dim)}
.band .pj-more a:hover{color:var(--accent)}