:root{
  --orange:#F15F23;      /* accent only, <=10% of any view */
  --graphite:#4D5256;
  --ink:#1A1D21;
  --blue:#2C5697;
  --paper:#FFFFFF;
  --paper-2:#F6F6F5;
  --line:#E2E2E0;
  --line-dark:#33383D;
  --measure:38rem;   /* 4 Sep 2026 — was 32rem; less cramped, fewer line breaks */
  --pad:clamp(1.25rem,5vw,4rem);
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* 26 Aug 2026 — Dan reported "the mobile menu comes up blue". There is no blue
   in the menu CSS at all (--blue is declared and never used); what shows is the
   OS: the default tap highlight, the default focus ring and the default text
   selection. All three are killed here rather than guessing which one it was. */
html{-webkit-tap-highlight-color:rgba(241,95,35,.18)}
::selection{background:var(--orange);color:#fff}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,
input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.52;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------------- layout ---------------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:var(--measure)}

/* ---------------- header ---------------- */
header.site{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:1.5rem;min-height:78px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand img{height:46px;width:auto}
.brand .wordmark{
  font-weight:700;font-size:1.32rem;letter-spacing:.055em;color:var(--ink);
  text-transform:uppercase;line-height:1;
}
.brand .wordmark b{color:var(--orange);font-weight:700}
nav.main{margin-left:auto;display:flex;align-items:center;gap:.25rem}
nav.main a,nav.main .drop>button{
  font:inherit;font-size:.875rem;font-weight:600;letter-spacing:.012em;
  color:var(--graphite);text-decoration:none;padding:.6rem .72rem;border:0;
  background:none;cursor:pointer;border-radius:2px;white-space:nowrap;
}
nav.main a:hover,nav.main .drop>button:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange)}
.drop{position:relative}
.drop>button::after{content:"";display:inline-block;margin-left:.4rem;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.drop-menu{
  position:absolute;top:100%;left:0;min-width:290px;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(26,29,33,.11);
  padding:.45rem;display:none;border-radius:3px;
}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{display:block}
.drop-menu a{display:block;padding:.55rem .7rem;font-size:.86rem;color:var(--graphite)}
.drop-menu a:hover{background:var(--paper-2);color:var(--ink)}
.drop-menu a span{display:block;font-size:.76rem;font-weight:400;color:#8A9096;margin-top:.12rem}
.hdr-cta{display:flex;align-items:center;gap:1rem;flex:0 0 auto;margin-left:.6rem}
.tel{font-size:.85rem;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.tel:hover{color:var(--orange)}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);padding:.5rem .75rem;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;border-radius:2px}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;font-size:.86rem;font-weight:700;letter-spacing:.02em;
  padding:.72rem 1.4rem;text-decoration:none;border-radius:2px;border:1.5px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange)}   /* orange on white/black only */
.btn-primary:hover{background:#D94F17;border-color:#D94F17}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-ghost-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--ink)}

/* ---------------- hero ---------------- */
.hero{background:var(--ink);color:#fff}
.hero>.wrap{padding:clamp(3.2rem,8vw,5.8rem) var(--pad) clamp(2.8rem,6.4vw,4.6rem)}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--orange);margin:0 0 1.4rem;
}
.hero h1{
  font-size:clamp(1.95rem,4.6vw,3.1rem);line-height:1.08;letter-spacing:-.02em;
  font-weight:700;margin:0 0 1.5rem;max-width:19ch;
}
.hero .lede{font-size:clamp(1.05rem,2.1vw,1.32rem);line-height:1.5;color:#C9CDD1;max-width:44ch;margin:0 0 1.9rem}
.hero .btns{display:flex;flex-wrap:wrap;gap:.85rem}

/* split-panel hero — dark copy panel + inset rounded photo panel, the dark
   bleeding into the photo's left edge via a gradient rather than a flat tint
   over the whole image. See hero_html() for the markup this styles. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:0;padding:0!important}
.hero-copy{padding:clamp(3.4rem,8vw,6rem) clamp(0rem,3vw,1.5rem) clamp(3.4rem,8vw,6rem) 0;display:flex;flex-direction:column;justify-content:center}
.hero-split .hero-copy{padding-left:var(--pad)}
.hero-photo{position:relative;margin:1.6rem 0;border-radius:10px;overflow:hidden;background-size:cover;background-position:center;min-height:280px}
/* 4 Sep 2026 (Pete review) — internal pages keep the photo on one side and
   fade it into the page on its inner edge; only Home is full-bleed. The photo
   was sitting in a rounded box with air above and below it, which is what made
   it read small. It now runs to the right edge of the viewport and the full
   height of the band, with the fade doing the work instead of a border. */
.hero-split{position:relative;overflow:hidden}
/* .hero-grid stays static on purpose: it is the .wrap, so making it a
   positioned ancestor anchored the photo to the 1280px container and left a
   dark strip at the right of the viewport. The copy gets the stacking
   context instead. */
.hero-split .hero-grid{min-height:clamp(17rem,32vh,22rem)}
.hero-split .hero-copy{position:relative;z-index:2;
  padding-top:clamp(2.4rem,4.2vw,3.4rem);padding-bottom:clamp(2.4rem,4.2vw,3.4rem)}
.hero-split .hero-photo{position:absolute;top:0;right:0;bottom:0;left:42%;z-index:1;
  margin:0;border-radius:0;min-height:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 16%,#000 46%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 16%,#000 46%)}
.hero-split .hero-photo::before{background:linear-gradient(90deg,var(--ink) 0%,rgba(26,29,33,.5) 24%,rgba(26,29,33,0) 58%)}
/* 30 Sep 2026, Dan: Capability Statement Library banner was mostly black.
   The Flinders Street photo now runs the full width behind the heading, with
   a lighter left shade that still keeps the white heading readable. Desktop
   only: the mobile rules below restack the photo under the text as before. */
.hero-split .hero-photo[style*="capstatements-hero"]{left:0;-webkit-mask-image:none;mask-image:none}
.hero-split .hero-photo[style*="capstatements-hero"]::before{background:linear-gradient(90deg,rgba(26,29,33,.80) 0%,rgba(26,29,33,.62) 32%,rgba(26,29,33,.18) 58%,rgba(26,29,33,0) 78%)}
@media(max-width:900px){.hero-split .hero-photo[style*="capstatements-hero"]::before{background:linear-gradient(180deg,rgba(26,29,33,.3) 0%,rgba(26,29,33,0) 40%)}}
.hero-photo-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.7rem .95rem;
  font-size:.72rem;line-height:1.4;letter-spacing:.02em;color:#EDEFF1;background:rgba(26,29,33,.82)}
.hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(26,29,33,.86) 20%,rgba(26,29,33,.25) 42%,rgba(26,29,33,0) 62%)}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-split .hero-copy{padding:clamp(3rem,10vw,4.5rem) var(--pad) 1.6rem}
  .hero-photo,.hero-split .hero-photo{position:static;margin:0 var(--pad) 2rem;min-height:200px;
    border-radius:8px;left:auto;-webkit-mask-image:none;mask-image:none}
  .hero-split .hero-grid{min-height:0}
  .hero-photo::before{background:linear-gradient(180deg,var(--ink) 0%,rgba(26,29,33,.7) 26%,rgba(26,29,33,0) 55%)}
}


/* ============================================================
   4 Sep 2026 — FULL-BLEED HERO (Pete review: bigger images, less text)
   Reference: McColl Smith homepage, still image not video.
   Used on the homepage and every individual project page. All other
   subpages keep the inset H1 + description banner.
   ============================================================ */
.hero-bleed{
  position:relative;width:100%;min-height:clamp(27rem,64vh,41rem);
  display:flex;align-items:flex-end;
  /* 5 Sep 2026, Dan: "move it down to see more of the building". Anchoring
     the source keeps the top 74% of the frame and the position is anchored to
     its bottom edge, so the browser's crop only ever eats sky off the top and
     the lattice, roofline and facade are always in shot. 74% is not arbitrary:
     the third-party production poster on the facade starts at about 75% of
     the original frame, so cutting it out of the SOURCE rather than relying on
     a position value is what makes this safe at every viewport ratio. Verified
     clean at 1440x900 and 1920x720. To show less building, lower the
     percentage; do not raise the source crop past 74%. Only the home page carries .hero-bleed, so this is
     home-only. */
  background:var(--ink) 50% 100%/cover no-repeat;color:#fff;overflow:hidden;
}
.hero-bleed::after{
  content:"";position:absolute;inset:0;
  /* 4 Sep 2026, Dan: the banner needs to fade to black on one side. The
     left edge is now solid ink so the headline sits on black rather than
     on a busy photograph, and the top is dark enough that the band reads
     as continuous with the header above it instead of a hard seam. */
  background:linear-gradient(90deg,var(--ink) 0%,rgba(26,29,33,.9) 20%,rgba(26,29,33,.5) 44%,rgba(26,29,33,.06) 70%,rgba(26,29,33,0) 100%),
             linear-gradient(180deg,rgba(26,29,33,.5) 0%,rgba(26,29,33,.1) 30%,rgba(26,29,33,.22) 70%,rgba(26,29,33,.6) 100%);
}
.hero-bleed>.wrap{position:relative;z-index:2;width:100%;padding-top:4rem;padding-bottom:clamp(2rem,3.6vw,2.8rem)}
.hero-bleed .eyebrow{color:#fff;opacity:.82;margin-bottom:1rem}
.hero-bleed h1{
  font-size:clamp(2.05rem,4.9vw,3.55rem);line-height:1.05;letter-spacing:-.026em;
  font-weight:700;margin:0;max-width:16ch;text-wrap:balance;
  text-shadow:0 1px 24px rgba(0,0,0,.35);
}
.hero-bleed .lede{
  font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.45;color:#E8EAEC;
  max-width:40ch;margin:1.2rem 0 0;
}
.hero-bleed .btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-bleed .hero-cap{
  position:absolute;right:var(--pad);bottom:1.1rem;z-index:2;
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
@media(max-width:700px){
  .hero-bleed{min-height:clamp(24rem,62vh,32rem)}
  .hero-bleed .hero-cap{display:none}
}

/* project-page variant: shorter, title sits lower */
.hero-bleed .eyebrow{color:#fff;opacity:.82;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero-bleed .lede{color:rgba(255,255,255,.94);font-size:clamp(1.02rem,1.5vw,1.22rem);
  max-width:34ch;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hero-bleed.hero-project{min-height:clamp(24rem,58vh,38rem)}
.hero-bleed.hero-project h1{font-size:clamp(1.9rem,4.3vw,2.95rem);max-width:20ch}


/* 4 Sep 2026 — certifications as a single line of headings (G5/H4) */
.certstrip-wrap{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.35rem 0;
}
/* 5 Sep 2026 — Dan: accreditations static, one line. The marquee is gone.
   Six credentials fit a 1280px row only with short labels and a font size
   that flexes with the viewport, so the labels below are the scheme plus
   what it covers, not the full certificate title. */
.certstrip{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:nowrap;justify-content:space-between;
  gap:0 1.4rem;align-items:baseline;
}
.certstrip li{
  font-size:clamp(.58rem,.79vw,.78rem);
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--graphite);white-space:nowrap;
}
@media(max-width:900px){
  .certstrip{flex-wrap:wrap;justify-content:flex-start;gap:.85rem 2rem}
  .certstrip li{font-size:.68rem;white-space:normal}
}

/* 5 Sep 2026 — Dan: "ad more testimonials and they scroll". The movement moved
   off the accreditations and onto the quotes, which is the right way round:
   a credential is scanned, a testimonial is read. Cards are fixed width and
   the track pauses on hover and on keyboard focus so a quote can actually be
   finished. Every quote here is real and attributed; see pages.json. */
.qscroll-wrap{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.qscroll-track{display:flex;width:max-content;animation:qmarch 108s linear infinite}
.qscroll-wrap:hover .qscroll-track,
.qscroll-wrap:focus-within .qscroll-track{animation-play-state:paused}
.qscroll{list-style:none;margin:0;padding:0;display:flex;gap:0}
.qscroll li{
  width:25rem;max-width:78vw;flex:0 0 auto;
  margin-right:1.6rem;padding:1.7rem 1.8rem;
  background:#fff;border:1px solid var(--line);border-radius:4px;
  border-left:3px solid var(--orange);
  display:flex;flex-direction:column;justify-content:space-between;
}
.qscroll blockquote{margin:0;padding:0;border:0;background:none;
  font-size:1.02rem;line-height:1.55;color:var(--ink)}
.qscroll .q-who{margin-top:1.1rem;font-style:normal}
.qscroll .q-who b{display:block;font-size:.82rem;font-weight:700;color:var(--ink)}
.qscroll .q-who span{display:block;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-top:.3rem}
@keyframes qmarch{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .qscroll-wrap{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .qscroll-track{animation:none}
  .qscroll-track>.qscroll[aria-hidden]{display:none}
}
}



/* ---------------- sections ---------------- */
section{padding:clamp(2.7rem,4.7vw,4.1rem) 0}
/* 5 Sep 2026, Dan: "the text on both sides could move down a bit more allowing
   for more white between the image and text as a rule". Applies to the FIRST
   section on every page, which is the one that sits hard under the hero
   photograph. Later sections keep the normal rhythm. */
main>section:first-child{padding-top:clamp(3.8rem,6.4vw,5.6rem)}
/* 5 Sep 2026, Dan: "too close to the black, make more white space under this
   button". The last section on a page butts straight up against the dark
   closing band, and a button is the element most likely to end it, which put
   an orange block a few pixels off a charcoal one. Mirrors the rule above. */
/* 5 Sep 2026, Dan: "move this up so it has some white space before the
   black." :last-child matched nothing on /project-profiles and
   /capability-statements, because the gated-download modal is a <div>
   sibling inside <main> AFTER the final <section>. Those two pages were
   therefore running the base 4.1rem, and the finder band sat hard against
   the closing dark band. :last-of-type ignores whatever trailing non-
   section markup a page carries. */
main>section:last-of-type{padding-bottom:clamp(3.9rem,6.6vw,5.8rem)}   /* 4 Sep 2026, Dan: less white space down every page. Cut 7rem -> 4rem -> 3rem.
   5 Sep 2026, Dan: "you have reduced the white space too much between blocks."
   Back to ~4rem, which was the middle setting and the one that read right.
   3rem was a cut too far: with the headings now smaller, the bands ran into
   each other. Do not cut this again without also checking the heading sizes. */
section.alt{background:var(--paper-2)}
section.dark{background:var(--ink);color:#fff}
section.dark h2{color:#fff}
section.dark p{color:#C9CDD1}
h2{font-size:clamp(1.6rem,3.3vw,2.35rem);line-height:1.12;letter-spacing:-.022em;font-weight:700;margin:0 0 1.85rem;max-width:20ch;text-wrap:balance}
/* 4 Sep 2026 — Pete review: "less like a template or workbook". The orange
   rule on every H2 was the strongest template cue on the site and was off-book
   anyway (Rule Book keeps orange to <=10% and never as a repeated device).
   Hierarchy now comes from size and space, not furniture. */
h3{font-size:1.24rem;font-weight:700;margin:2rem 0 .55rem;letter-spacing:-.008em}
p{margin:0 0 .85rem;max-width:var(--measure)}
section.dark p{max-width:var(--measure)}

/* ---------------- lists ---------------- */
ul.checks{list-style:none;padding:0;margin:.3rem 0 1.15rem;max-width:48rem}
ul.checks li{position:relative;padding:.6rem 0 .6rem 1.6rem;border-bottom:1px solid var(--line)}
ul.checks li::before{
  content:"";position:absolute;left:0;top:1.18rem;width:7px;height:7px;
  background:var(--orange);border-radius:1px;
}
section.dark ul.checks li{border-bottom-color:var(--line-dark)}
ul.checks li b{font-weight:700}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(var(--stat-n,4),minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:1.3rem 0}
.stat{background:var(--paper);padding:1.5rem 1.25rem}
section.alt .stat{background:var(--paper-2)}
.stat .n{font-size:1.85rem;font-weight:700;letter-spacing:-.02em;line-height:1;margin-bottom:.4rem}
.stat .l{font-size:.79rem;color:var(--graphite);line-height:1.42}
section.dark .stats{background:var(--line-dark);border-color:var(--line-dark)}
section.dark .stat{background:#22262B}
section.dark .stat .n{color:#fff}
section.dark .stat .l{color:#C9CDD1}

/* ---------------- quote ---------------- */
blockquote{
  margin:1rem 0;padding:.2rem 0 .2rem 1.5rem;border-left:3px solid var(--orange);
  font-size:1.09rem;line-height:1.55;max-width:42rem;
}
blockquote cite{display:block;margin-top:.75rem;font-size:.84rem;font-style:normal;font-weight:700;color:var(--graphite)}
section.dark blockquote cite{color:#C9CDD1}

/* ---------------- cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1.4rem;margin:2rem 0;align-items:stretch}
.card{border:1px solid var(--line);padding:1.6rem;background:var(--paper);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;height:100%;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--ink);transform:translateY(-2px)}
.card:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.card .more{margin-top:auto}
.card .k{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.6rem}
.card h4{font-size:1.16rem;margin:0 0 .5rem;line-height:1.28;font-weight:700}
.card p{font-size:.9rem;color:var(--graphite);margin:0;max-width:none}
.card-hasphoto{padding-bottom:1rem}
.card-photo{margin-top:1rem;height:150px;background-size:cover;background-position:center;border:1px solid var(--line)}
.card .more{display:block;margin-top:.7rem;font-size:.78rem;font-weight:700;color:var(--orange)}

/* ---------------- cta band ---------------- */
.band{background:var(--ink);color:#fff;padding:clamp(2.6rem,6vw,4rem) 0}
.band h2{color:#fff;margin-bottom:1.2rem}
.band .btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.5rem}

/* ---------------- footer ---------------- */
footer.site{background:var(--ink);color:#9AA0A6;padding:3.4rem 0 2rem;border-top:3px solid var(--orange)}
footer.site .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.2rem;margin-bottom:2.6rem}
footer.site h5{color:#fff;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 1rem;font-weight:700}
footer.site a{display:block;color:#9AA0A6;text-decoration:none;font-size:.87rem;padding:.2rem 0}
footer.site a:hover{color:#fff}
footer.site .usp{color:#fff;font-size:1.34rem;font-weight:700;letter-spacing:-.012em;margin:1rem 0 .7rem}
footer.site .social-row{display:flex;gap:.7rem;margin-top:1rem}
footer.site .social-row a{display:inline-flex;align-items:center;justify-content:center;width:2.15rem;height:2.15rem;
  padding:0;border:1px solid var(--line-dark);border-radius:50%;color:#9AA0A6;transition:all .15s}
footer.site .social-row a:hover{color:#fff;border-color:#fff}
footer.site .social-row svg{width:1.05rem;height:1.05rem;fill:currentColor}
footer.site .fine{border-top:1px solid var(--line-dark);padding-top:1.5rem;font-size:.78rem;display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between}


/* ---------------- capability matrix ---------------- */
.mtx-wrap{margin:1.8rem 0 .6rem}
.mtx-photo-wrap{margin:0 0 1.6rem;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.mtx-photo-wrap img{display:block;width:100%;height:auto}
.mtx-photo-cap{padding:.65rem 1rem;font-size:.76rem;color:var(--graphite);border-top:1px solid var(--line);background:#FAFAF9}
.mtx-key{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--graphite);margin-bottom:.9rem;flex-wrap:wrap}
.mtx-key span{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;color:var(--ink);margin-right:.4rem}
.mtx-key i{display:inline-block;width:22px;height:12px;border:1px solid var(--line);margin-left:.55rem}
.mtx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.mtx{border-collapse:separate;border-spacing:3px;width:100%;min-width:820px;font-size:.82rem}
table.mtx thead th{background:var(--ink);color:#fff;font-weight:700;font-size:.82rem;padding:.75rem .5rem;text-align:center;vertical-align:middle;border-radius:2px}
table.mtx thead th.corner{background:none;color:var(--ink);text-align:left;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
table.mtx tbody th{text-align:left;font-weight:400;background:#FAFAF9;padding:.6rem .75rem;border-radius:2px;width:32%;min-width:250px}
table.mtx tbody th b{display:block;font-weight:700;color:var(--ink);font-size:.87rem;line-height:1.3}
table.mtx tbody th span{display:block;color:var(--graphite);font-size:.73rem;line-height:1.38;margin-top:.2rem}
table.mtx td{text-align:center;vertical-align:middle;border-radius:2px;padding:.55rem .3rem;background:#FCFCFB}
table.mtx td.d0{background:#FAFAF9}
table.mtx td.d1{background:#FDEDE5}
table.mtx td.d2{background:#F8BC9C}
table.mtx td.d3{background:var(--orange)}
table.mtx td .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#C24A16}
table.mtx td.d0 .dot{display:none}
table.mtx td.d3 .dot{background:#fff}
.mtx-key i.d1{background:#FDEDE5}.mtx-key i.d2{background:#F8BC9C}.mtx-key i.d3{background:var(--orange);border-color:var(--orange)}
table.mtx tfoot th,table.mtx tfoot td{background:none;font-size:.73rem;color:var(--graphite);line-height:1.4;vertical-align:top;padding-top:.9rem;text-align:center}
table.mtx tfoot th{text-align:left;font-weight:700;color:var(--orange);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}
table.mtx tfoot th span{display:block;text-transform:none;letter-spacing:0;font-weight:400;color:var(--graphite);font-size:.73rem;margin-top:.25rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:700px){.mtx-scroll::after{content:"Scroll to see all sectors →";display:block;font-size:.74rem;color:var(--graphite);padding:.5rem 0}}


/* ---------------- image placeholders (until the Mar 2026 shoot is deployed) ---------------- */
.ph{position:relative;background:var(--ink);border-top:3px solid var(--orange);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 10px,transparent 10px 20px)}
.ph span{position:relative;z-index:1;color:#8A9096;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;line-height:1.7;padding:1rem}
.ph span em{color:#fff;font-style:normal;font-weight:700;letter-spacing:.01em;text-transform:none;font-size:.88rem}
.ph-wide{aspect-ratio:16/10}
.ph-portrait{aspect-ratio:4/5}

/* ---------------- people ---------------- */
.grp-intro{max-width:var(--measure);color:var(--graphite);font-size:.92rem;margin:0 0 1.4rem}
h3.grp{font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin:2.6rem 0 1rem;padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:1.6rem 1.35rem;margin-bottom:.5rem}
.person h4{font-size:1.02rem;margin:.85rem 0 .12rem;line-height:1.25}
.person .role{font-size:.86rem;font-weight:700;color:var(--orange);margin:0 0 .3rem}
.person .tag{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);margin:0 0 .45rem}
.person .yrs{font-size:.78rem;color:var(--ink);margin:0 0 .45rem;font-weight:700}
.person .bio{font-size:.83rem;color:var(--graphite);line-height:1.5;margin:0;max-width:none}

/* ---------------- project gallery ---------------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.6rem 1.35rem;margin:1.6rem 0 .5rem}
.photostrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem 1.35rem;margin:1.6rem 0 .5rem}
.shot{margin:0}
.shot figcaption{font-size:.83rem;color:var(--graphite);line-height:1.5;margin-top:.75rem}
.shot figcaption b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:.15rem}
.shot figcaption .k{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:.4rem}

/* ---------------- text + photo opposite (e.g. /how-we-work "What good
   looks like") ---------------- */
/* start, not center: with one short paragraph beside a tall photo, centring
   left a block of empty space above the copy on /south-australia and on the
   second text+photo block on /how-we-work. */
.textphoto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(2rem,4.2vw,3.6rem);align-items:start;margin:clamp(1.6rem,3.2vw,2.4rem) 0 .6rem}
.textphoto .checks{margin:0}
.textphoto .tp-copy>p:first-child{margin-top:0}
.textphoto .tp-copy>p:last-child{margin-bottom:0}
.textphoto .tp-copy p{max-width:34rem}
/* 5 Sep 2026, Dan: "always make sure the image aligns with the top of the
   text on the other side with all pages". align-items:start already lines the
   two boxes up geometrically, but a line box carries half-leading above the
   cap height, so the photo's hard top edge read as ~5px high against the
   text. Measured in the browser: line-height 25.84px on a 17px font leaves
   4.42px of half-leading plus ~0.7px to the cap. .3em pushes the figure down
   by exactly that, and scales if the body size ever changes. Applies to every
   textphoto block sitewide: Home, How We Work, South Australia, Careers. */
.textphoto .shot{margin:.3em 0 0}
/* with the section heading inside the left column, the photo lines up with the
   h2's cap rather than the body copy's, so the nudge is a fraction of the h2's
   own size: half its leading (line-height 1.12) plus the ascender-to-cap gap,
   about a tenth of the font size. Expressed against the same clamp so it
   tracks the heading at every viewport. */
.textphoto-head .shot{margin-top:calc(clamp(1.6rem,3.3vw,2.35rem) * .10)}
.textphoto .tp-copy>h2{margin-top:0;max-width:none}
.textphoto .tp-copy>h2+p{margin-top:0}
.textphoto .tp-copy>h2+.checks{margin-top:0}
/* a checks list opens with .6rem of padding above its first line (ul.checks
   li), so the photo beside one needs that on top of the half-leading nudge or
   it sits high by exactly that amount. Measured on /how-we-work. */
.textphoto-checks .shot{margin-top:calc(.3em + .6rem)}
.textphoto-checks.textphoto-head .shot{margin-top:calc(clamp(1.6rem,3.3vw,2.35rem) * .10)}
/* 3:2 matches the native ratio of every photograph used in this block, so
   nothing is cropped. The cap keeps the panel editorial on a wide viewport. */
.textphoto .imgwrap{aspect-ratio:3/2;max-height:430px;border-radius:4px;overflow:hidden}
.textphoto .imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.textphoto figcaption{margin-top:1rem;padding-left:1rem;border-left:3px solid var(--orange);max-width:30rem}
.fullphoto{margin:clamp(1.9rem,4vw,3rem) 0 .6rem}
.fullphoto .imgwrap{aspect-ratio:2/1;max-height:520px;border-radius:4px;overflow:hidden}
.fullphoto .imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.fullphoto figcaption{margin-top:1rem;padding-left:1rem;border-left:3px solid var(--orange);max-width:34rem}
.fullphoto figcaption .k{display:block;font-size:.68rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange);margin-bottom:.3rem}
@media(max-width:640px){.fullphoto .imgwrap{aspect-ratio:3/2}}
.textphoto figcaption .k{display:block;font-size:.68rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange);margin-bottom:.3rem}
@media(max-width:820px){
  .textphoto{grid-template-columns:1fr;gap:1.7rem;align-items:start}
  .textphoto .imgwrap{max-height:none}
}

/* ---------------- icon bullets (e.g. "four constraints we plan around") ---------------- */
.iconbullets{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem;margin:1.7rem 0 .5rem}
.ibull{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.3rem;border:1px solid var(--line);background:var(--paper);border-radius:2px}
.ib-icon{flex:0 0 auto;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--paper-2);color:var(--orange);display:flex;align-items:center;justify-content:center}
.ib-icon svg{width:1.35rem;height:1.35rem}
.ib-txt{font-size:.9rem;color:var(--graphite);line-height:1.5;max-width:none}
.ib-txt b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:.15rem}
section.dark .ibull{background:#22262B;border-color:var(--line-dark)}
section.dark .ib-icon{background:#2B3036}
section.dark .ib-txt{color:#C9CDD1}
section.dark .ib-txt b{color:#fff}

/* ---------------- twocol (two short blocks side by side, not stacked) ---------------- */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.twocol-col h2{margin-top:0}
@media (max-width:760px){.twocol{grid-template-columns:1fr;gap:2.2rem}}

/* ---------------- downloads ---------------- */
.dls{display:grid;gap:.6rem;margin:1.5rem 0 .5rem;max-width:47rem}
a.dl,button.dl{display:flex;width:100%;text-align:left;font:inherit;cursor:pointer;align-items:center;gap:1rem;border:1px solid var(--line);padding:.95rem 1.1rem;text-decoration:none;color:inherit;background:var(--paper);transition:border-color .15s,transform .15s;border-radius:2px}
a.dl:hover,button.dl:hover{border-color:var(--ink);transform:translateY(-1px)}
.dl-i{flex:0 0 auto;width:26px;height:32px;border:2px solid var(--orange);border-radius:2px;position:relative}
.dl-i::before{content:"";position:absolute;left:5px;right:5px;top:8px;height:2px;background:var(--orange);box-shadow:0 6px 0 var(--orange),0 12px 0 var(--orange)}
.dl-t{flex:1 1 auto;line-height:1.35}
.dl-t b{display:block;font-size:.95rem}
.dl-t em{display:block;font-style:normal;font-size:.76rem;color:var(--graphite);margin-top:.16rem}
.dl-a{flex:0 0 auto;font-size:.78rem;font-weight:700;color:#fff;background:var(--orange);padding:.5rem .95rem;border-radius:2px;letter-spacing:.02em}
a.dl:hover .dl-a,button.dl:hover .dl-a{background:#D94F17}
@media(max-width:520px){a.dl,button.dl{flex-wrap:wrap}.dl-a{margin-left:38px}}


img.portrait{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border-top:3px solid var(--orange);background:var(--paper-2)}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;border-top:3px solid var(--orange);background:var(--paper-2)}
.textphoto .shot img{border-top:0;aspect-ratio:auto}

/* ---------------- team scroll banner ---------------- */
.teamscroll-wrap{position:relative;margin:2rem 0 1.6rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.teamscroll-track{display:flex;gap:1.1rem;width:max-content;animation:teamscroll 42s linear infinite}
.teamscroll-wrap:hover .teamscroll-track{animation-play-state:paused}
.teamscroll-card{flex:0 0 auto;width:150px;text-decoration:none;color:inherit}
.teamscroll-card img{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:50% 18%;
  border:2px solid var(--line);display:block}
.teamscroll-card .tn{display:block;margin-top:.65rem;font-weight:700;font-size:.87rem;color:var(--ink);line-height:1.25}
.teamscroll-card .tr{display:block;font-size:.76rem;color:var(--graphite);line-height:1.3;margin-top:.1rem}
.teamscroll-card .tr-lead{color:var(--orange);font-weight:800}
.teamscroll-more{display:flex;align-items:center;margin-top:1.1rem}
.teamscroll-more + .twocol{margin-top:clamp(2.8rem,5.5vw,4.4rem)}
.teamscroll-more a{font-size:.85rem;font-weight:700;color:var(--orange);text-decoration:none}
.teamscroll-more a:hover{text-decoration:underline}
@keyframes teamscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.teamscroll-track{animation:none}}


.imgwrap{position:relative}
.imgwrap .fb{display:none}
.imgwrap.failed img{display:none}
.imgwrap.failed .fb{display:flex}


/* ---------------- project filter ---------------- */
/* 5 Sep 2026, Dan: "make sure that these are lined up." The project-library
   and capability-statement filter chips sat ~6px right of the card grid and
   the copy above, and rendered as grey rounded pills instead of the site's
   square white chips. Cause: .clfbtn and .plfbtn had NO rule at all. They
   were raw <button> elements taking the browser's default background, border,
   radius and padding, and that default padding is what pushed them off the
   left edge everything else lines up on.
   The four filters must keep four distinct CLASS NAMES (see the note below —
   two of these can exist in one DOM in the single-file build and would filter
   each other's cards), but there is no reason for four copies of the same
   rule. One selector list, so a fifth filter cannot be added without style. */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 .3rem}
.fbtn,.pfbtn,.clfbtn,.plfbtn{
  font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.02em;padding:.5rem 1rem;
  border:1px solid var(--line);background:#fff;color:var(--graphite);cursor:pointer;
  border-radius:2px;transition:all .15s;-webkit-appearance:none;appearance:none;margin:0}
.fbtn:hover,.pfbtn:hover,.clfbtn:hover,.plfbtn:hover{border-color:var(--ink);color:var(--ink)}
.fbtn.on,.pfbtn.on,.clfbtn.on,.plfbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.shot.hide{display:none}
.fnone{color:var(--graphite);font-size:.9rem;margin-top:1rem}

/* ---------------- team filter (distinct CLASS NAMES from the project filter
   above — both a .fbtn/.shot pair and a .pfbtn/.person pair can exist in the
   same DOM at once in the single-file build, so they must never share a class
   attribute value. They share the rule block above; that is a CSS selector
   list, not a shared class, so the JS wiring stays independent.) */
.person.hide{display:none}

/* ---------------- sector finder sidebar (sectors hub + individual sector pages) ---------------- */
.sectorgrid-with-finder{display:flex;gap:2.4rem;align-items:flex-start}
.sectorgrid-with-finder>.sectorgrid{flex:1;min-width:0}
.sector-finder{width:19rem;flex-shrink:0;background:var(--paper-2);border:1px solid var(--line);
  border-radius:4px;padding:1.5rem;position:sticky;top:1.5rem}
.sector-finder h3{margin:0 0 .4rem;font-size:1.05rem}
.sector-finder p{margin:0 0 1rem;font-size:.85rem;color:var(--graphite)}
.sector-finder label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:.5rem}
.sector-finder select{width:100%;font:inherit;font-size:.95rem;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:2px;background:#fff;color:var(--ink);margin-bottom:1.2rem}
.sf-links{display:flex;flex-direction:column;gap:.6rem}
.sf-links a{display:block;text-align:center;font-size:.82rem;font-weight:700;letter-spacing:.02em;
  padding:.65rem .8rem;border:1px solid var(--ink);border-radius:2px;color:var(--ink);text-decoration:none;transition:all .15s}
.sf-links a:hover{background:var(--ink);color:#fff}
@media (max-width:820px){
  .sectorgrid-with-finder{flex-direction:column}
  .sector-finder{width:100%;position:static}
}
/* 1 Aug 2026 (2nd/3rd pass) — the same finder, standalone, on each of the
   7 individual sector pages, directly under the hero. First cut centred
   it; Dan corrected that to "right hand column, not centred". A fixed-
   position floating panel was tried next but the maths doesn't hold at
   normal desktop widths: with .wrap capped at 1180px, a panel docked to
   the viewport's right edge only clears the wrap's own content once the
   viewport is roughly 1180 + 2×(panel width) wide — around 1780px+ — so
   it was invisible (silently falling back to the centred band) on every
   ordinary laptop screen, Dan's included. Fixed here the simple, reliable
   way: right-align the band inside the page's existing 1180px wrap
   (margin-right instead of margin-auto). No fixed positioning, no
   breakpoint guessing, no risk of sitting on top of section content —
   it's just block content, right-aligned, at every desktop width. Drops
   to full-width, centred, on the same mobile breakpoint the /sectors hub
   sidebar already uses. */
.sector-page-finder-band{max-width:22rem;margin:0 0 0 auto}
.sector-page-finder-band .sector-finder{width:100%;position:static}
@media (max-width:820px){
  .sector-page-finder-band{max-width:100%;margin:0}
}
/* 9 Aug 2026 — Dan: "there is a side panel for search but the text on the
   left is too far down the page." Right-aligning the band inside its own
   section fixed the horizontal placement but left the panel alone in a
   full-height section of its own: the first paragraph of sector copy was
   pushed a whole section-rhythm below the hero, with an empty left half
   above it. The finder now sits in the right column of the page's FIRST
   content section instead of in a section of its own, so the opening h2
   and copy start level with it and the gap disappears. Same panel, same
   markup, same mobile behaviour — one fewer section. */
.finder-split{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:2.6rem;align-items:start}
.finder-split>.finder-main{min-width:0}
.finder-split>.finder-main>:first-child{margin-top:0}
.finder-split>.sector-finder{width:100%;position:sticky;top:calc(var(--hdr-h,4.6rem) + 1.5rem)}
@media (max-width:820px){
  .finder-split{display:block}
  .finder-split>.sector-finder{width:100%;margin-top:2.4rem;position:static}
}

/* ---------------- Our Methodology animation (9 Aug 2026) ----------------
   Dan supplied this as a bundled artifact carrying React plus Aileron and
   Cascadia Code as embedded base64 — about 2MB for a diagram that needs
   neither. Rebuilt here as markup + four keyframes, using the site's own
   type stack. Two artifact-only attributes had to be translated: style-hover
   became a real :hover rule, and sc-camel-on-click became the replay handler
   in the site JS. Replaces BOTH process rails that used to sit on this page —
   the seven delivery tiles below keep the old rail's click-to-open-the-phase
   behaviour, so nothing that worked before stopped working. */
.mth{margin:2rem 0 .5rem}
/* ---------------- About: 25-year history (15 Aug 2026) ----------------
   Dan: "the about the company should use more diagram to show our history
   like the ppt." Content is Ducon_Timeline_25_Years.pptx — four eras, each
   with the capability it handed to the next, then the milestone rail. No
   animation here on purpose: this is reference content people scan and
   screenshot for tenders, not a reveal. */
/* --------- dashed lists rendered as cards (15 Aug 2026) ---------
   The deck writes lists as em-dashed paragraphs, which left the home page as
   one long left-justified column. The Four Questions get the strongest
   treatment because they are the position; every other run becomes a marker
   grid so the page has rhythm instead of five text walls. */
/* 5 Sep 2026 (2nd pass) — the four questions as an exchange, not a list.
   The charcoal band was killed on sight: "too much black". Fair, and the
   reason is structural rather than taste. The hero is dark and the closing
   band is dark, so a third dark block made the page read as three bruises
   with copy between them, and the section that is meant to be the lightest,
   most conversational moment on the site was the heaviest.
   So: light ground, no panel, and the four alternate sides down the page so
   the eye moves side to side the way a conversation does. Class names are
   unchanged from the band version on purpose, so the reveal script keeps
   working untouched. */
.fqb{margin:2.2rem 0 1rem}
.fqb-lead{font-size:clamp(.95rem,1.5vw,1.1rem);font-weight:700;line-height:1.5;
  letter-spacing:-.005em;color:var(--orange);margin:0 0 .6rem;max-width:60ch}
.fqb-list{list-style:none;margin:0;padding:0}
.fqb-item{padding:2.6rem 0;border-top:1px solid var(--line)}
@media(min-width:880px){
  .fqb-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 4.2rem;align-items:start;padding:3.1rem 0}
  /* the exchange: question left, answer right, then the other way about */
  .fqb-item:nth-child(even) .fqb-q{grid-column:2;grid-row:1}
  .fqb-item:nth-child(even)>p{grid-column:1;grid-row:1}
}
.fqb-k{display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);margin-bottom:.9rem}
.fqb-q h3{margin:0;font-size:clamp(1.45rem,2.9vw,2.25rem);line-height:1.14;
  letter-spacing:-.018em;font-weight:700;color:var(--ink);max-width:17ch}
.fqb-qm{color:var(--orange)}
.fqb-item>p{margin:1.1rem 0 0;font-size:1rem;line-height:1.66;color:var(--graphite);
  max-width:44ch}
@media(min-width:880px){
  .fqb-item>p{margin:.5rem 0 0;padding-left:1.3rem;border-left:2px solid var(--orange)}
  /* the columns swap, the text does not. Right-aligned ragged-left body copy
     is hard to read and it made the answer look like an afterthought, so the
     alternation is carried by POSITION alone: everything stays left aligned
     and the orange rule stays on the left of the answer throughout. */
  .fqb-item:nth-child(even)>p{justify-self:end}
  .fqb-item:nth-child(even) .fqb-q{justify-self:end}
}
section.dark .fqb-q h3{color:#fff}
section.dark .fqb-item{border-top-color:var(--line-dark)}
section.dark .fqb-item>p{color:#C9CDD1}
/* the reveal is opt-in: the hidden state only exists once JS adds .js, so with
   script off or reduced motion on, all four are simply visible. */
.fqb.js .fqb-item{opacity:0;transform:translateY(15px);
  transition:opacity .62s cubic-bezier(.2,.6,.2,1),transform .62s cubic-bezier(.2,.6,.2,1)}
.fqb.js .fqb-item.in{opacity:1;transform:none}
/* 5 Sep 2026, Dan: a greyscale sector picture opposite the questions on the
   capability pages. Where a picture is present the questions stop alternating
   and stack in one column beside it: alternating AND a photo would have the
   eye going three ways at once. Home and How We Work keep the exchange. */
@media(min-width:1000px){
  .fqb-img{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:0 3.6rem;align-items:start}
  .fqb-img .fqb-photo{position:sticky;top:5.5rem}
  /* the questions are one column here, so the even-row swap is switched off */
  .fqb-img .fqb-item{display:block}
  .fqb-img .fqb-item:nth-child(even) .fqb-q,
  .fqb-img .fqb-item:nth-child(even)>p{justify-self:auto}
  .fqb-img .fqb-item>p{padding-left:1.3rem;border-left:2px solid var(--orange);
    margin-top:.9rem}
  /* the column is narrower than the full-width exchange, so the question type
     comes down with it and the 20ch cap comes off. At the home page size it
     was wrapping to five lines in here and reading as a wall. */
  .fqb-img .fqb-q h3{font-size:clamp(1.22rem,1.85vw,1.68rem);max-width:26ch;
    line-height:1.2}
  .fqb-img .fqb-item{padding:1.7rem 0}
}
.fqb-photo{margin:0 0 2rem}
@media(min-width:1000px){.fqb-photo{margin:0}}
.fqb-photo img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;
  border-radius:4px;border-top:3px solid var(--orange);
  filter:grayscale(1) contrast(1.04);background:var(--paper-2)}
@media(max-width:999px){.fqb-photo img{aspect-ratio:16/9}}

}
.dashgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1.3rem 0 1.2rem}
.dashgrid.dg-3{grid-template-columns:repeat(3,1fr)}
.dg{position:relative;padding:.9rem 1rem .9rem 2.1rem;border:1px solid var(--line);border-radius:6px;
  background:var(--paper);transition:border-color .18s}
.dg:hover{border-color:var(--orange)}
.alt .dg{background:#fff}
.dg::before{content:"";position:absolute;left:.95rem;top:1.35rem;width:7px;height:7px;border-radius:1px;background:var(--orange)}
.dg b{display:block;font-size:.94rem;font-weight:700;color:var(--ink);line-height:1.3}
.dg span{display:block;font-size:.84rem;color:var(--graphite);line-height:1.5;margin-top:.2rem}
@media (max-width:820px){ .dashgrid,.dashgrid.dg-3{grid-template-columns:1fr} }
/* 5 Sep 2026 — found while verifying the /about montage: four fixed columns
   with no breakpoint and 1fr tracks that will not shrink below their content.
   At 390px the rail was 574px wide, so the whole page scrolled sideways on a
   phone. minmax(0,1fr) lets the tracks actually shrink, and the columns halve
   then stack. */
.eras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1.6rem 0 .5rem}
@media(max-width:900px){.eras{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.eras{grid-template-columns:1fr}}
.era{border:1px solid var(--line);border-radius:6px;padding:1.1rem 1.2rem;display:flex;flex-direction:column;
  background:var(--paper);transition:border-color .2s}
.era:hover{border-color:var(--orange)}
.era.era-now{background:var(--ink);border-color:var(--ink)}
.era .era-when{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:.4rem}
.era b{font-size:1.04rem;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:.45rem}
.era p{font-size:.86rem;color:var(--graphite);line-height:1.5;margin:0 0 .9rem;max-width:none}
.era .era-keep{margin-top:auto;padding-top:.7rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink)}
.era .era-keep span{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite);margin-bottom:.2rem}
.era.era-now b,.era.era-now .era-keep{color:#fff}
.era.era-now p{color:#C9CDD1}
.era.era-now .era-keep{border-top-color:var(--line-dark)}
.era.era-now .era-keep span{color:#9AA0A6}

/* 5 Sep 2026, Dan: a greyscale montage down the right of the story rail.
   The rail is a 7rem year column plus a text column capped near 44ch, so on a
   1180px wrap the right half sat empty for the whole height of nine markers.
   Two columns of staggered tiles, deliberately unequal in height so it reads
   as a montage and not a photo grid, greyscale so it supports the dates
   rather than shouting over them. Sticky, so it stays beside the markers as
   they scroll. Below 1040px the montage drops out entirely: at that width the
   tiles would be postage stamps and the timeline is the content. */
.mstones-split{display:block}
@media(min-width:1040px){
  .mstones-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    gap:0 3.4rem;align-items:start}
  .mstones-split>.mstones{margin-top:.4rem}
}
.mm{display:none}
@media(min-width:1040px){
  .mm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;
    position:sticky;top:calc(var(--hdr-h,4.6rem) + 1.6rem)}
}
.mm-tile{margin:0;overflow:hidden;background:var(--paper-2)}
.mm-tile img{width:100%;height:100%;display:block;object-fit:cover;
  filter:grayscale(1) contrast(1.05)}
/* Unequal tile heights, and the second column offset, so the two columns
   never line up into rows. */
.mm-tile{aspect-ratio:4/5}
.mm-1{aspect-ratio:4/5;border-top:3px solid var(--orange)}
.mm-2{aspect-ratio:1/1;margin-top:2.2rem}
.mm-3{aspect-ratio:1/1}
.mm-4{aspect-ratio:4/5;margin-top:2.2rem;border-top:3px solid var(--orange)}
.mm-5{aspect-ratio:4/5}
.mm-6{aspect-ratio:1/1;margin-top:2.2rem}

.mstones{list-style:none;margin:1.6rem 0 .4rem;padding:0}
.mstone{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:0 2.2rem;
  position:relative;padding-bottom:2.4rem}
.mstone:last-child{padding-bottom:0}
/* the line runs down the centre of the year pill to the next one */
.mstone::before{content:"";position:absolute;left:3.45rem;top:2.9rem;bottom:.1rem;
  width:1px;background:var(--line)}
.mstone:last-child::before{display:none}
.m-yr{grid-column:1;justify-self:start;align-self:start;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:6.9rem;padding:.6rem .9rem;border-radius:999px;
  /* white with a hairline, not --paper-2: this rail sits in a section.alt
     band, which IS --paper-2, so a paper-2 pill was invisible */
  background:#fff;border:1px solid var(--line);color:var(--orange);
  font-size:.94rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* the one that has not happened yet reads as a target, not a fact */
.mstone:not(.on) .m-yr{background:none;border-style:dashed;color:var(--orange);opacity:.62}
.m-body{grid-column:2;padding-top:.25rem}
.m-body b{display:block;font-size:1.16rem;font-weight:700;color:var(--ink);
  letter-spacing:-.015em;line-height:1.3;margin:0 0 .35rem}
.mstone:not(.on) .m-body b{color:var(--graphite)}
.m-body span{display:block;font-size:.98rem;color:var(--graphite);line-height:1.6;max-width:56ch}
@media(max-width:640px){
  .mstone{grid-template-columns:1fr;gap:.5rem}
  .mstone::before{display:none}
  .m-body{grid-column:1;padding-top:0}
}

/* The delays run to 3.6s from page load, so on a page this long the whole
   sequence used to finish while the visitor was still reading the hero —
   they would scroll down to a diagram that had already happened. Paused
   until it is on screen; the observer below starts it. No-JS and
   reduced-motion both fall through to the finished state. */
.mth .mth-rail,.mth .mth-lbl,.mth .mth-body,.mth .mth-phase,.mth .mth-visible,.mth .mth-rule{animation-play-state:paused}
.mth.is-in .mth-rail,.mth.is-in .mth-lbl,.mth.is-in .mth-body,.mth.is-in .mth-phase,
.mth.is-in .mth-visible,.mth.is-in .mth-rule{animation-play-state:running}
.mth-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:1.8rem}
.mth-lead{font-size:1.2rem;font-weight:700;line-height:1.3;color:var(--ink);margin:.25rem 0 0;max-width:34rem;text-wrap:balance}
.mth-replay{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:#fff;
  color:var(--ink);font:inherit;font-size:.82rem;font-weight:700;padding:.55rem .9rem;border-radius:4px;
  cursor:pointer;transition:border-color .2s,color .2s;flex:0 0 auto}
.mth-replay:hover{border-color:var(--orange);color:var(--orange)}
.mth-replay:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.mth-grid{display:grid;grid-template-columns:9.5rem 1fr;gap:0 1.7rem;align-items:stretch;position:relative}
.mth-railbg{position:absolute;left:9.5rem;top:0;bottom:0;width:3px;background:var(--line)}
.mth-rail{position:absolute;left:9.5rem;top:0;bottom:0;width:3px;background:var(--orange);
  transform-origin:top center;animation:mthRail 3400ms cubic-bezier(.4,0,.2,1) 150ms both}
.mth-hr{grid-column:1/-1;height:1px;background:var(--line)}

.mth-lbl{display:flex;flex-direction:column;justify-content:center;padding:1.6rem 1.2rem 1.6rem 0;text-align:right;
  animation:mthRise 520ms cubic-bezier(.22,.61,.36,1) var(--d,0ms) both}
.mth-k{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.mth-lbl b{font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.25;margin-top:.35rem;text-wrap:balance}
.mth-body{padding:1.6rem 0;animation:mthRise 520ms cubic-bezier(.22,.61,.36,1) var(--d,0ms) both}
.mth-body.mth-static{animation:none}

.mth-two{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}
.mth-four{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.mth-seven{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem}

.mth-card{border:1px solid var(--line);border-radius:6px;padding:1.05rem 1.2rem;
  transition:border-color .2s,box-shadow .2s}
.mth-card:hover{border-color:var(--orange);box-shadow:0 2px 10px rgba(26,29,33,.06)}
.mth-card b{display:block;font-size:1rem;font-weight:700;color:var(--ink)}
.mth-card span{display:block;font-size:.88rem;color:var(--graphite);line-height:1.5;margin-top:.3rem}
.mth-card.mth-soft{background:var(--paper-2)}
.mth-card.mth-soft b{font-size:.94rem}
.mth-card.mth-soft span{font-size:.83rem}

.mth-phase{display:block;width:100%;text-align:left;background:var(--ink);border:none;border-radius:6px;
  padding:.85rem .7rem;color:#fff;font:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s;
  animation:mthPop 420ms cubic-bezier(.22,.61,.36,1) var(--d,0ms) both}
.mth-phase:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(26,29,33,.18)}
.mth-phase:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.mth-phase .mth-n{display:block;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.68rem;color:var(--orange);margin-bottom:.35rem}
.mth-phase b{display:block;font-size:.78rem;font-weight:700;line-height:1.3;color:#fff}

.mth-visible{display:flex;align-items:center;gap:.6rem;margin-top:1rem;font-size:.88rem;color:var(--graphite);
  animation:mthRise 520ms cubic-bezier(.22,.61,.36,1) var(--d,0ms) both}
.mth-visible .mth-rule{display:inline-block;height:3px;background:var(--orange);border-radius:2px;flex:0 0 auto;
  animation:mthRule 600ms cubic-bezier(.22,.61,.36,1) var(--d2,0ms) both}
.mth-visible b{color:var(--ink)}

.mth-proof{background:var(--orange);border-radius:6px;padding:1.4rem 1.6rem;color:#fff}
.mth-proof b{display:block;font-size:1.08rem;font-weight:700;margin-bottom:.5rem}
.mth-proof .mth-proof-k{display:block;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-bottom:.7rem}
.mth-proof ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;
  font-size:.84rem;line-height:1.45}

@keyframes mthRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mthPop {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mthRail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes mthRule{from{width:0}to{width:44px}}

@media (max-width:980px){
  .mth-seven{grid-template-columns:repeat(4,1fr)}
  .mth-four{grid-template-columns:repeat(2,1fr)}
  .mth-proof ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .mth-head{flex-direction:column;align-items:flex-start;gap:1rem}
  .mth-grid{grid-template-columns:1fr}
  .mth-railbg,.mth-rail{display:none}
  .mth-lbl{text-align:left;padding:1.4rem 0 .2rem}
  .mth-body{padding:0 0 1.4rem}
  .mth-two,.mth-four{grid-template-columns:1fr}
  .mth-seven{grid-template-columns:repeat(2,1fr)}
  .mth-proof ul{grid-template-columns:1fr}
}
/* The whole diagram is decoration over content that is already legible
   without it — so when motion is not wanted, everything simply renders. */
@media (prefers-reduced-motion:reduce){
  .mth [style*="--d"],.mth-rail,.mth-lbl,.mth-body,.mth-phase,.mth-visible,.mth-visible .mth-rule{animation:none!important}
  .mth .mth-rail,.mth .mth-lbl,.mth .mth-body,.mth .mth-phase,.mth .mth-visible,.mth .mth-rule{animation-play-state:running}
  .mth-visible .mth-rule{width:44px}
  .mth-replay{display:none}
}

/* 1 Aug 2026 — full project-profile content, extracted from the real PDF
   (see project_pdf_content_html() in gen_site.py) */
.factgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.2rem 1.6rem;margin:1.2rem 0}
.factgrid>div{border-top:2px solid var(--orange);padding-top:.5rem}
.factgrid dt{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin:0}
.factgrid dd{margin:.3rem 0 0;font-size:.95rem;color:var(--ink)}
.pdf-source-note{margin-top:1.4rem;font-size:.82rem;color:var(--graphite);font-style:italic}
.pdf-source-note a{font-style:normal;font-weight:700;color:var(--orange);text-decoration:none}

/* 1 Aug 2026 (2nd pass) — promo card linking to the capability/project
   libraries, replacing the old dropdown/Request picker on /capabilities and
   /projects (see lib_promo_html() in gen_site.py) */
.libpromo{border:1px solid var(--line);border-radius:6px;padding:1.8rem;background:var(--paper-2);max-width:34rem}
.libpromo .k{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:.6rem}
.libpromo h3{margin:0 0 .6rem;font-size:1.4rem}
.libpromo p{margin:0 0 1.3rem;color:var(--graphite)}
.libpromo .btnrow{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ---------------- library cards (capability + project profile libraries)
   deliberately NOT reusing .shot/.gallery — those are the project-gallery's
   own filter target class, and sharing it would let that page's .fbtn
   handler also toggle these cards in the single-file build (see the JS
   comment on wireSectorFilter). Same visual treatment, independent classes. */
/* 5 Sep 2026, Dan: "move this to the bottom and make it horizontal across
   the page. This way the project images can be bigger." Same panel, same
   markup, same three destinations — laid out as a full-width band at the
   foot of the page instead of a 19rem column beside the content. The
   heading and its line of copy take the left third, the sector select and
   the three destinations run across the rest. .finder-split and
   .sector-page-finder-band are no longer emitted by render(); the rules are
   left in place because the /sectors hub still uses .sectorgrid-with-finder
   and a stray sidebar would otherwise inherit nothing. */
section > .wrap > .sector-finder{width:100%;position:static;background:none;border:0;
  border-top:2px solid var(--ink);border-radius:0;padding:1.9rem 0 0;
  display:grid;grid-template-columns:1fr;gap:1.2rem 3rem;align-items:start}
@media(min-width:900px){
  section > .wrap > .sector-finder{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
    align-items:center;gap:0 3.6rem}
}
section > .wrap > .sector-finder h3{grid-column:1;font-size:clamp(1.15rem,2vw,1.45rem);margin:0 0 .3rem}
section > .wrap > .sector-finder p{grid-column:1;margin:0;font-size:.9rem;max-width:34ch}
@media(min-width:900px){
  section > .wrap > .sector-finder h3{grid-row:1;align-self:end}
  section > .wrap > .sector-finder p{grid-row:2;align-self:start}
  section > .wrap > .sector-finder label{grid-column:2;grid-row:1/span 2}
  section > .wrap > .sector-finder .sf-links{grid-column:2;grid-row:1/span 2}
}
section > .wrap > .sector-finder label{margin-bottom:0;display:flex;align-items:center;
  gap:.7rem;font-size:.68rem;white-space:nowrap}
section > .wrap > .sector-finder select{width:auto;flex:1;min-width:0;margin-bottom:0}
@media(min-width:900px){
  /* select on its own row above the three destinations, both in column 2 */
  section > .wrap > .sector-finder{grid-template-rows:auto auto}
  section > .wrap > .sector-finder label{grid-row:1;align-self:end;margin-bottom:.9rem}
  section > .wrap > .sector-finder .sf-links{grid-row:2;align-self:start}
}
section > .wrap > .sector-finder .sf-links{flex-direction:row;gap:.7rem}
section > .wrap > .sector-finder .sf-links a{flex:1;padding:.7rem .6rem}
@media(max-width:899px){
  section > .wrap > .sector-finder .sf-links{flex-direction:column}
  section > .wrap > .sector-finder label{flex-direction:column;align-items:stretch;gap:.45rem;white-space:normal}
  section > .wrap > .sector-finder select{width:100%}
}

/* ---------------- capability list (replaced the sector depth matrix) ----------------
   5 Sep 2026, Dan. Two columns of eleven, name in the page's own heading
   weight, the descriptor underneath in body grey. No dots, no scores, no
   horizontal scroll on a phone. */
.caplist{list-style:none;margin:1.9rem 0 .4rem;padding:0;display:grid;
  grid-template-columns:1fr;gap:0}
@media(min-width:820px){.caplist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3.4rem}}
.caplist li{padding:1.15rem 0;border-top:1px solid var(--line)}
.caplist li b{display:block;font-size:1.02rem;font-weight:700;letter-spacing:-.008em;
  color:var(--ink);margin-bottom:.3rem}
.caplist li span{display:block;font-size:.9rem;line-height:1.55;color:var(--graphite);max-width:46ch}

.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.6rem 1.35rem;margin:1.6rem 0 .5rem}
/* 5 Sep 2026, Dan: "make the nine images bigger on the capabilities page".
   Scoped to the capability statements, NOT .libgrid generally: the project
   library shares this grid and carries 85 cards, where two-up would be a
   very long page. Nine statements two-up is a readable preview; the point of
   the thumbnail is that a buyer can see the sector promise before downloading. */
@media(min-width:900px){.libgrid-caps{grid-template-columns:repeat(2,1fr);gap:2.2rem 2rem}}
/* 5 Sep 2026, Dan: "don't show the text as much under the capability
   statements ... they looked better with just the text highlighted here under
   each", and earlier the same day "this looks too much black. I wanted the
   image larger". The 16/10 crop was taking the cover masthead PLUS the four
   YOUR OPERATIONS columns and the first body heading underneath, so every
   card carried a strip of unreadable 6px document text competing with its own
   caption. 12/5 lands on the bottom edge of the masthead band: logo, sector
   kicker, the promise line and the photograph, nothing else. The photo goes
   from about a quarter of the card to nearly two fifths of it.
   NOTE the remaining limit is the artwork, not the crop: inside the PDF cover
   the photograph is a fixed 38% of the band's width. Making it genuinely
   bigger means re-laying out the nine cover pages, which is a separate job. */
.libgrid-caps .libcard .imgwrap img{aspect-ratio:3/2;object-position:50% 50%}  /* 30 Sep: cover photo, not the masthead crop */
/* 5 Sep 2026, Dan: "we need every image to line up in the row." Project
   library cards are <button> elements (they open the gate modal), and a button
   vertically CENTRES its content box. The grid stretches every card to the
   tallest in its row, so a card with a one-line project title had its whole
   figure pushed down by half the leftover height: images in the same row
   started up to 15px apart. Column of stretched items pinned to the top
   instead, which also keeps the caption rules from drifting. */
.libcard{margin:0;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  width:100%;text-decoration:none}
/* 5 Sep 2026 — the card wraps a <figure>, which still carried the browser
   default margin of 1em 40px. Every library thumbnail was therefore 80px
   narrower than its own card and inset from the caption grid, on the project
   library (85 cards) as well as the capability statements. .libcard itself was
   reset years ago; the figure inside it never was. */
.libcard>figure{margin:0;width:100%}
.libcard .imgwrap img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 8%;border-top:3px solid var(--orange);background:var(--paper-2)}
.libcard figcaption{font-size:.83rem;color:var(--graphite);line-height:1.5;margin-top:.75rem;display:block}
.libcard figcaption b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:.15rem}
.libcard figcaption .k{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:.4rem}
.libcard figcaption .more{display:block;margin-top:.5rem;font-weight:700;color:var(--orange);font-size:.8rem}
.capcard.hide,.projcard.hide{display:none}
/* 26 Aug 2026 — Dan: "some of the Project Profiles have been duplicated ...
   where you don't have the picture then just put the ducon logo on the
   project sheet in its place". Hashing the page-1 image stream of all 87
   published profile PDFs showed six shared sector stock photos covering 84
   of them, so 84 library cards were renders of near-identical pages. Those
   cards now carry this branded fact tile instead: the reversed Ducon mark,
   the project's own WHAT KEPT WORKING line off its own sheet, and its value
   and duration. No photograph is claimed for a project we have no photograph
   of, and every card reads differently because every project's facts differ.
   The three sheets with genuine project photography (PROJECT_OWN_PHOTO) keep
   the page render; the two with a real site photo of their own use it. */
.libcard .bcard{width:100%;aspect-ratio:16/10;border-top:3px solid var(--orange);
  background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-start;padding:1.15rem 1.15rem 1rem;gap:.85rem}
.libcard .bcard img{width:auto;height:24px;aspect-ratio:auto;border-top:0;object-fit:contain;
  align-self:flex-start;opacity:.9}
.libcard .bcard p{margin:0;width:100%}
.libcard .bcard .kept{font-size:1.04rem;line-height:1.34;font-weight:600;letter-spacing:-.005em;
  margin-top:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.libcard .bcard .kept.summary{font-size:.93rem;font-weight:500;color:rgba(255,255,255,.86);-webkit-line-clamp:4}
.libcard .bcard .facts{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--orange);padding-top:.7rem;border-top:1px solid rgba(255,255,255,.16)}
.libcard .bcard .facts.only{margin-top:auto}

/* ---------------- gated-download modal ---------------- */
.gate-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.gate-modal[hidden]{display:none}
.gate-modal-backdrop{position:absolute;inset:0;background:rgba(26,29,33,.62)}
.gate-modal-box{position:relative;background:#fff;border-radius:4px;max-width:30rem;width:100%;max-height:88vh;overflow:auto;padding:2rem 1.8rem}
.gate-modal-close{position:absolute;top:.7rem;right:.8rem;background:none;border:0;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--graphite);padding:.3rem}
.gate-modal-close:hover{color:var(--ink)}
.gate-modal-box h3{margin:0 .5rem .5rem 0;font-size:1.3rem}
.gate-modal-box>p{color:var(--graphite);font-size:.9rem;margin:0 0 1.2rem}
.gate-modal-success{margin-top:1rem;font-weight:700;color:var(--orange)}
.gatef{display:grid;gap:.75rem}
.gatef label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.3rem}
.gatef input{width:100%;font:inherit;font-size:.94rem;padding:.68rem .85rem;border:1px solid var(--line);
  border-radius:2px;background:#fff;color:var(--ink)}
.gatef input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.gatef button{margin-top:.3rem;width:100%;justify-content:center}
.gate-fine{font-size:.74rem;color:var(--graphite);margin:.15rem 0 0;line-height:1.45}
.gate-known{font-size:.85rem;color:var(--graphite);margin:0 0 1rem}
.gate-known button{background:none;border:0;padding:0;font:inherit;color:var(--orange);
  text-decoration:underline;cursor:pointer}
body.gate-open{overflow:hidden}

/* ---------------- capability statement picker ---------------- */
.dlpick{margin:1.5rem 0 .5rem;max-width:40rem}
.dlpick label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:.55rem}
.dlrow{display:flex;gap:.6rem;flex-wrap:wrap}
select.dlsel{flex:1 1 260px;font:inherit;font-size:.92rem;padding:.7rem .9rem;border:1px solid var(--line);
  border-radius:2px;background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234D5256' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 1rem center;
  -webkit-appearance:none;appearance:none;color:var(--ink);cursor:pointer}
select.dlsel:focus{outline:2px solid var(--orange);outline-offset:1px}
.dlnote{font-size:.78rem;color:var(--graphite);margin-top:.6rem}

/* ---------------- profile page ---------------- */
.profile{display:grid;grid-template-columns:280px 1fr;gap:2.4rem;align-items:start}
.profile .pimg{position:relative}
.profile .pmeta{font-size:.84rem;color:var(--graphite);line-height:1.6;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.profile .pmeta b{display:block;color:var(--ink);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;margin:.7rem 0 .15rem}
.profile .pmeta b:first-child{margin-top:0}
.backlink{display:inline-block;font-size:.82rem;font-weight:700;color:var(--graphite);text-decoration:none;margin-bottom:1.2rem}
.backlink:hover{color:var(--orange)}
a.person-link{text-decoration:none;color:inherit;display:block}
a.person-link:hover h4,a.person-link:hover figcaption b{color:var(--orange)}
a.person-link .more{font-size:.76rem;font-weight:700;color:var(--orange);margin-top:.5rem;display:block}
@media(max-width:760px){.profile{grid-template-columns:1fr;gap:1.4rem}}

/* ---------------- HubSpot contact form embed ---------------- */
.hs-embed{max-width:36rem;margin:1.4rem 0}

/* ---------------- FAQ accordion (was a flat list — now a drop-down) ---------------- */
details.faq-item{border-bottom:1px solid var(--line)}
details.faq-item summary{cursor:pointer;list-style:none;font-weight:700;font-size:1.03rem;line-height:1.35;
  padding:1.05rem 2.2rem 1.05rem 0;position:relative}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:"+";position:absolute;right:0;top:.85rem;font-size:1.4rem;font-weight:400;color:var(--orange)}
details.faq-item[open] summary::after{content:"\2212"}
.faq-a{padding:0 0 1.25rem;max-width:var(--measure)}
.faq-a p{margin:0 0 .7rem}
.faq-a p:last-child{margin-bottom:0}
details.faq-item summary .num{color:var(--orange);font-weight:800;margin-right:.6rem;font-variant-numeric:tabular-nums}

/* ---------------- animated process rail (/how-we-work) ---------------- */
/* 1 Aug 2026 — Dan: make the seven stages light up as you click through
   them. The orange connector used to auto-draw to 100% once on page load
   (pure decoration, unconnected to anything) — now it's driven by a
   --proc-progress custom property JS sets on click, so it genuinely shows
   how far through the sequence you've clicked, and clicking a step also
   opens + scrolls to that phase's detail below (see the JS block). */
.proc-rail{display:grid;grid-template-columns:repeat(var(--proc-cols,7),1fr);gap:.9rem;margin:2.2rem 0 1rem;position:relative;padding-top:.4rem;--proc-progress:0%}
.proc-rail::before{content:"";position:absolute;top:23px;left:0;right:0;height:2px;background:var(--line)}
.proc-rail::after{content:"";position:absolute;top:23px;left:0;height:2px;background:var(--orange);
  width:var(--proc-progress);transition:width .35s ease}
.proc-step{position:relative;text-align:center;opacity:0;transform:translateY(8px);animation:proc-in .5s ease-out forwards;
  background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.proc-step:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}
.proc-n{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:#fff;border:2px solid var(--orange);color:var(--orange);font-weight:700;font-size:.76rem;margin:0 auto .55rem;
  position:relative;z-index:1;transition:background .2s ease,color .2s ease,transform .2s ease}
.proc-step:hover .proc-n{transform:scale(1.08)}
.proc-step b{display:block;font-size:.84rem;font-weight:700;line-height:1.3;color:var(--ink)}
.proc-step i{display:block;font-style:normal;font-size:.72rem;line-height:1.4;color:var(--graphite);margin-top:.35rem}
.proc-step.on .proc-n{background:var(--orange);color:#fff}
@keyframes proc-in{to{opacity:1;transform:none}}
@media(max-width:760px){.proc-rail{grid-template-columns:1fr;gap:1.3rem;text-align:left}.proc-rail::before,.proc-rail::after{display:none}
  .proc-step{display:flex;align-items:flex-start;gap:.9rem;text-align:left}.proc-n{margin:0;flex:0 0 auto}
  .proc-step b{font-size:.94rem}}

/* ---------------- review mode ---------------- */
.rev{display:none;border-left:3px solid;padding:.9rem 1.1rem;margin:1.2rem 0;font-size:.855rem;line-height:1.5;max-width:52rem;border-radius:0 2px 2px 0}
body.review .rev{display:block}
.rev.proof{border-color:#B03A2E;background:#FDF2F1}
.rev.note{border-color:var(--graphite);background:var(--paper-2)}
section.dark .rev.note{background:#23272B;color:#C9CDD1}
.rev .lab{display:block;font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.35rem}
.rev.proof .lab{color:#B03A2E}
.rev.note .lab{color:var(--graphite)}
section.dark .rev.note .lab{color:#9AA0A6}
#revbtn{
  position:fixed;right:14px;bottom:14px;z-index:90;background:var(--ink);color:#fff;
  border:1px solid var(--line-dark);font:inherit;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.6rem .9rem;cursor:pointer;border-radius:3px;opacity:.85;
}
#revbtn:hover{opacity:1}
body.review #revbtn{background:var(--orange);border-color:var(--orange)}

/* ---------------- responsive ---------------- */
/* 5 Sep 2026 — was 960px. The desktop header (seven nav items plus the phone
   number and the button) needs about 1124px, so between 961px and ~1124px it
   overflowed the viewport and every page scrolled sideways: a 1024px tablet
   and a half-width laptop window both landed in that gap. Switched to the
   mobile header at 1140px instead, which is the first width the desktop
   header actually fits. */
@media(max-width:1140px){
  .navtoggle{display:block}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:.6rem var(--pad) 1.2rem;gap:0;box-shadow:0 14px 30px rgba(26,29,33,.1);
    /* 26 Aug 2026 — 22 links rendered into a panel with no bottom and no
       scroll, so Company, South Australia and FAQ were unreachable on a
       phone. dvh, not vh, or iOS Safari's toolbar hides the last item. */
    max-height:calc(100dvh - var(--hdr-h,4.6rem));overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  nav.main.open{display:flex}
  .drop-menu{position:static;display:block;border:0;box-shadow:none;padding:0 0 .5rem .8rem}
  /* the parent used to be display:none, which left each sub-list floating
     with no heading. It is a group label on mobile, not a control — the
     hub itself is already the "All sectors" item inside the list. */
  .drop>button{display:block;width:100%;text-align:left;cursor:default;pointer-events:none;
    font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
    color:#8A9096;padding:.85rem .35rem .1rem;box-shadow:none!important}
  .drop>button::after{display:none}
  nav.main a{padding:.55rem .35rem}
  .hdr-cta{display:none}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  footer.site .cols{grid-template-columns:1fr}
  .hero h1{font-size:1.85rem}
}

/* ============================================================
   4 Sep 2026 — IMAGE-LED CARDS (Pete review: bigger images, less text)
   Reference: Spark Projects /our-projects — the image fills the tile and the
   words sit underneath. The old treatment was a bordered box with the text
   first and a small photo tacked on the bottom, which is what made the page
   read like a catalogue.
   ============================================================ */
.cards{grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));gap:3rem 2.6rem;margin:2rem 0 .6rem}
.card{border:0;padding:0;background:none;gap:0}
.card:hover{transform:none}
.card-hasphoto{padding-bottom:0}
.card-hasphoto .card-photo{
  order:-1;margin:0 0 1.1rem;height:auto;aspect-ratio:16/10;border:0;
  background-size:cover;background-position:center;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.card-hasphoto{overflow:hidden}
.card-hasphoto>.card-photo{will-change:transform}
.card-hasphoto:hover .card-photo{transform:scale(1.035)}
.card .k{color:var(--graphite);font-size:.68rem;letter-spacing:.17em;margin-bottom:.35rem}
.card p{font-size:.95rem;color:var(--graphite);line-height:1.5}
/* photo, then the sector name as the title, then one line under it */
.card-hasphoto .card-photo{order:-2}
.card-hasphoto .k{order:-1;margin:0 0 .35rem;font-size:1.22rem;font-weight:700;
  letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.card-hasphoto p{font-size:.95rem;color:var(--graphite);line-height:1.5}
@media(prefers-reduced-motion:reduce){.card-hasphoto:hover .card-photo{transform:none}}

/* Explicit column counts. auto-fit + minmax was landing on two columns at
   1440px by ~14px, which is what made the sector grid look like a two-up
   brochure. Three across is the reference layout (Spark / McColl Smith). */
.cards{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}

/* Seven sectors into a three-column grid leaves two empty cells. Rather than
   an orphan, the first and last tiles run wide — the grid then fills exactly
   and reads as an editorial layout instead of a leftover row. */
@media(min-width:1001px){
  .cards-sector>.card:first-child,
  .cards-sector>.card:last-child{grid-column:span 2}
  /* one photo height across the row so the wide tiles read as a deliberate
     rhythm rather than a broken grid */
  .cards-sector>.card .card-photo{aspect-ratio:auto;height:clamp(13rem,17.5vw,16rem)}
}

/* Project cards: photo, project name, then the sector as a quiet tag. The
   name is the title here — the sector is the label — which is the reverse
   of the sector grid, hence the separate class. */
.cards-proof .card-photo{order:-3}
.cards-proof h4{order:-2;margin:0 0 .3rem;font-size:1.22rem;font-weight:700;
  letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.cards-proof .k{order:-1;margin:0 0 .5rem;font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;font-weight:700;color:var(--graphite)}
.cards-proof p{font-size:.92rem;color:var(--graphite);line-height:1.5}
@media(min-width:1001px){
  .cards-sector>.card:first-child .k,
  .cards-sector>.card:last-child .k{font-size:1.5rem}
}

/* ---- Projects library (Pete review PR1) --------------------------------
   Three across, the photograph fills the tile, and the caption is the
   project name with the sector under it as a quiet tag. The one-line
   description and the "Read the project" link are gone — the whole tile is
   the link, and the extra words were what made the page read as a list. */
.gallery{grid-template-columns:repeat(3,1fr);gap:3.2rem 2.6rem;margin:1.9rem 0 .4rem}
@media(max-width:1000px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gallery{grid-template-columns:1fr}}
/* Scoped to .gallery on purpose. The first pass targeted bare .shot, which is
   also the photo strip, the full-width photo and the text+photo block — so the
   projects-library treatment quietly turned the orange kicker grey on Careers,
   About and How We Work. */
.gallery .shot img{aspect-ratio:16/10;border-top:0;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.gallery .shot{overflow:hidden}
.gallery .person-link:hover .shot img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.gallery .person-link:hover .shot img{transform:none}}
.gallery .shot figcaption{margin-top:.9rem}
.gallery .shot figcaption b{font-size:1.15rem;font-weight:700;letter-spacing:-.015em;
  line-height:1.25;margin:0 0 .3rem;color:var(--ink)}
.gallery .shot figcaption .k{color:var(--graphite);font-size:.68rem;letter-spacing:.17em;margin:0}

/* ---- Our People (Pete review P2/P3/P5) ---------------------------------
   Four across, the portrait fills the tile edge to edge, and the card is
   name / role / sector / read profile. No border, no years line, no bio. */
.people{grid-template-columns:repeat(4,1fr);gap:2.9rem 2.4rem;margin:1.7rem 0 .4rem}
@media(max-width:1000px){.people{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.people{grid-template-columns:repeat(2,1fr)}}
.person{overflow:hidden}
.person .imgwrap,.person .ph-portrait{margin:0}
/* 1/1, not the old 4/5: the source portraits are square and 274-300px, so a
   4/5 tile upscales them. Square uses the whole frame at native resolution.
   The orange top rule goes with the rest of the orange furniture (G1). */
.person img.portrait{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  border-top:0;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.person-link:hover img.portrait{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.person-link:hover img.portrait{transform:none}}
.person h4{font-size:1.08rem;font-weight:700;letter-spacing:-.015em;margin:1rem 0 .18rem}
.person .role{font-size:.88rem;font-weight:600;color:var(--graphite);margin:0 0 .35rem}
.person .tag{font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--graphite);margin:0}
a.person-link .more{margin-top:.6rem}

/* Two short sections opposite each other rather than stacked full width. */
/* 5 Sep 2026, Dan: "more space here". A pair block sits inside whatever
   section precedes it, so on the home page it followed the testimonial
   scroller with no section boundary and therefore no breathing room at all.
   It now carries its own space above. */
.pair{margin-top:clamp(2.6rem,5vw,4.4rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.4rem 4.5rem;align-items:start}
.pair-col>h2{margin-top:0}
.pair-col p{max-width:none}
@media(max-width:900px){.pair{grid-template-columns:1fr;gap:3.2rem}}

/* ---- Contact ------------------------------------------------------------
   Form leads, details sit beside it. Offices are a panel, not a run of
   3rem headings with one line of address under each. */
.contactsplit{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:2.6rem 4rem;align-items:start}
.contact-form h2{margin-top:0}
.contact-form p{max-width:38rem}
/* 5 Sep 2026, Dan: "there looks like a black line under the image on the
   right hand side". It was this: a 2px ink rule on top of the offices column,
   which lands directly beneath the hero photo and reads as an artefact of the
   image rather than a divider. Gone; white space separates the two now. */
.contact-side{padding-top:.2rem}
.office+.office{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.office h3{font-size:.95rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--orange);margin:0 0 .7rem}
.office p{margin:0 0 .15rem;font-size:.98rem;line-height:1.5;max-width:none}
.office a{display:block;font-size:.98rem;margin-top:.4rem;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line);width:fit-content}
.office a:hover{border-color:var(--orange);color:var(--orange)}
.office-note h3{color:var(--orange)}
.office-note p{font-size:.92rem;color:var(--graphite)}
@media(max-width:900px){.contactsplit{grid-template-columns:1fr;gap:2.6rem}}

.maps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 2.6rem}
/* matched to .office h3 so the same office name is set the same way in both
   places on this page */
.mapcard h3{font-size:.95rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--orange);margin:0 0 .5rem}
.mapcard p{margin:0 0 1rem;font-size:.98rem;max-width:none}
.mapcard iframe{width:100%;height:clamp(15rem,26vw,20rem);border:0;display:block;
  filter:grayscale(1) contrast(1.05);transition:filter .4s ease}
.mapcard:hover iframe{filter:none}
.maplink{display:inline-block;margin-top:.8rem;font-size:.82rem;font-weight:700;color:var(--orange);text-decoration:none}
.maplink:hover{text-decoration:underline}
@media(max-width:900px){.maps{grid-template-columns:1fr}}

/* Open roles */
.roles{list-style:none;margin:1.6rem 0 .4rem;padding:0;border-top:2px solid var(--ink)}
.role{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem 2rem;
  flex-wrap:wrap;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.role-t b{display:block;font-size:1.16rem;font-weight:700;letter-spacing:-.015em;
  line-height:1.3;color:var(--ink)}
.role-t span{display:block;font-size:.9rem;color:var(--graphite);margin-top:.2rem}
.role-a{font-size:.82rem;font-weight:700;color:var(--orange);text-decoration:none;white-space:nowrap}
.role-a:hover{text-decoration:underline}

/* ---- Director's note (/about) ------------------------------------------
   Photograph bleeding to the left edge of the viewport and the full height of
   the band, faded into the ink on its inner edge; the writing sits on the
   dark side. The mirror of the internal-page hero. */
.dnote{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.dnote>.wrap{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
  padding-top:clamp(2.6rem,4.4vw,3.8rem);padding-bottom:clamp(2.6rem,4.4vw,3.8rem)}
.dnote-photo{position:absolute;left:0;top:0;bottom:0;right:56%;z-index:1;
  background:var(--ink) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.35) 14%,#000 44%);
          mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.35) 14%,#000 44%)}
.dnote-body{grid-column:2;position:relative;z-index:2;max-width:40rem}
.dnote-body .eyebrow{color:var(--orange);margin-bottom:1rem}
.dnote-body h2{color:#fff;margin:0 0 1.6rem;max-width:20ch}
.dnote-body h2::before{content:none}
.dnote-body p{color:rgba(255,255,255,.86);font-size:1.02rem;line-height:1.72;
  max-width:none;margin:0 0 1.15rem}
.dnote-sign{margin-top:2rem!important;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.18)}
.dnote-sign b{display:block;color:#fff;font-size:1.02rem;letter-spacing:-.01em}
.dnote-sign span{display:block;font-size:.82rem;color:rgba(255,255,255,.6);margin-top:.15rem}
@media(max-width:900px){
  .dnote>.wrap{grid-template-columns:1fr;padding-top:0}
  .dnote-photo{position:static;right:auto;aspect-ratio:4/3;width:100%;
    margin:0 0 2.4rem;-webkit-mask-image:none;mask-image:none}
  .dnote-body{grid-column:1}
}
.ph-initials{aspect-ratio:1/1;border-top:0;background:#22262b}

/* ---- Stat band (Pete review: bigger, less like a table) -----------------
   Was a 1px-ruled grid of boxes, which is the most workbook-looking thing a
   page can do with four numbers. Now open figures on the page ground, with
   the numbers counting up when the band scrolls into view. */
/* 5 Sep 2026, Dan: "the three can't sit on an extra line." auto-fit at a
   13rem minimum fits four across the wrap, so the home band's five figures
   broke 4 + 1 and left "3 ISO certifications" stranded on a row of its own.
   The renderer now stamps --stat-n with the real count and the row divides
   into exactly that many columns. */
.stats{grid-template-columns:repeat(var(--stat-n,4),minmax(0,1fr));gap:2.2rem 1.6rem;
  background:none;border:0;margin:1.9rem 0 1.4rem}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.stats{grid-template-columns:1fr}}
/* a lone stat (project pages carry one line of job facts) spans the row
   whatever --stat-n says, so a stale page built before the variable
   existed still reads full width rather than squeezed into a quarter. */
.stat:only-child{grid-column:1/-1}
.stat,section.alt .stat,section.dark .stat{background:none;padding:0}
.stat .n{font-size:clamp(2.4rem,4.6vw,3.9rem);font-weight:700;letter-spacing:-.03em;
  line-height:.95;margin-bottom:.6rem;font-variant-numeric:tabular-nums}
.stat .l{font-size:.82rem;color:var(--graphite);line-height:1.45;max-width:22ch}
section.dark .stats{background:none;border:0}
.ph-initials span{font-size:2.4rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.34)}
.person .ph-initials{aspect-ratio:1/1}

/* ---- 30 Sep 2026, Bianca's staged-site feedback: readability and breathing room.
   Larger body, card, testimonial and stat text on desktop; more space between
   major sections and inside the grids; proof images run larger (two across). */
@media(min-width:1000px){
  body{font-size:18px}
  section{padding:clamp(3.6rem,6vw,5.6rem) 0}
  .card p,.cards-proof p{font-size:1rem;line-height:1.6}
  .cards{row-gap:3.8rem}
  .card h4{margin-top:.35rem}
  .cards-proof{grid-template-columns:repeat(2,1fr);gap:4rem 3rem}
  .cards-proof .card-photo{aspect-ratio:16/10;height:auto}
  .qscroll blockquote{font-size:1.18rem;line-height:1.6}
  .qscroll .q-who b{font-size:.92rem}
  .stat .l{font-size:.98rem;max-width:26ch}
}
.cards-proof h4{text-wrap:balance}
.cards-proof .proof-name{font-weight:600;color:var(--ink)}

/* ===================== design v2, 2 Oct 2026 ===================== */
:root{--v2ease:cubic-bezier(.2,.7,.1,1);--v2dk:#15181B}
/* ---- inner page banner: framed, shallower, darker overlay ---- */
.v2banner{position:relative;max-width:1600px;width:calc(100% - 24px);margin:12px auto 0;border-radius:18px;overflow:hidden;background:#1A1D21;color:#fff;min-height:clamp(340px,46vh,460px);display:flex;align-items:flex-end}
.v2banner .ph{position:absolute;inset:0;background:center/cover no-repeat;animation:v2kb 12s ease-out both}
@keyframes v2kb{from{transform:scale(1.04)}to{transform:scale(1)}}
.v2banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,14,16,.88) 0%,rgba(12,14,16,.66) 42%,rgba(12,14,16,.30) 75%,rgba(12,14,16,.22) 100%),linear-gradient(0deg,rgba(12,14,16,.55) 0%,rgba(12,14,16,0) 45%)}
.v2banner.noimg::after{display:none}
.v2cap{position:absolute;z-index:3;right:16px;bottom:12px;font-size:11px;color:rgba(255,255,255,.75);background:rgba(0,0,0,.35);padding:4px 8px;border-radius:4px}
.v2banner-in{position:relative;z-index:2;width:100%;padding-top:56px;padding-bottom:44px}
.v2crumb{font-size:13px;color:rgba(255,255,255,.78);margin-bottom:20px}.v2crumb a{color:inherit;text-decoration:none}.v2crumb a:hover{color:#fff;text-decoration:underline}.v2crumb i{font-style:normal;margin:0 .5em;opacity:.6}.v2crumb span{color:#fff}
.v2banner h1{margin:0;color:#fff;font-weight:300}
.v2banner .d{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin:0 0 14px;color:rgba(255,255,255,.92);line-height:1.5}
.v2banner .b{display:block;font-size:clamp(40px,5vw,80px);line-height:.98;letter-spacing:-.04em;font-weight:300;max-width:17ch;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.v2banner .lede{margin:20px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;max-width:44ch;color:rgba(255,255,255,.94)}
@media(max-width:760px){.v2banner{width:calc(100% - 16px);margin-top:8px;border-radius:14px;min-height:300px}.v2banner-in{padding-top:40px;padding-bottom:28px}.v2banner .b{font-size:38px}.v2banner .lede{font-size:16px}.v2banner .d{font-size:11px;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){.v2banner .ph{animation:none}}

/* ---- home ---- */
.v2{--o:#F15F23;--ink:#1A1D21;--g:#4D5256;--mute:#7A7F84;--line:#E6E6E3;--p2:#F4F4F2;font-size:18px;line-height:1.55;color:var(--ink)}
.v2 a{color:inherit;text-decoration:none}.v2 h2,.v2 h3{color:inherit}
.v2 .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.v2 .lnk{font-size:15px;font-weight:600;display:inline-flex;gap:12px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:4px;align-self:flex-start}
.v2 .lnk::after{content:"\2192";color:var(--o);transition:transform .4s var(--v2ease)}.v2 .lnk:hover::after{transform:translateX(6px)}
.v2 .rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--v2ease),transform 1s var(--v2ease)}.v2 .rv.in{opacity:1;transform:none}
.v2hero{position:relative;height:clamp(540px,68vh,680px);max-width:1600px;width:calc(100% - 24px);margin:12px auto 0;border-radius:18px;color:#fff;overflow:hidden;background:#111}
.v2hero .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:0;transform:scale(1.03);transition:opacity .9s var(--v2ease),transform 6s linear}
.v2hero .slide.on{opacity:1;transform:scale(1)}
.v2hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,14,16,.78) 0%,rgba(12,14,16,.45) 42%,rgba(12,14,16,.05) 75%),linear-gradient(180deg,rgba(12,14,16,.4) 0%,rgba(12,14,16,0) 22%,rgba(12,14,16,0) 55%,rgba(12,14,16,.8) 100%)}
.v2hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:30px}
.v2hero .v2desc{margin:0 0 16px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.92);line-height:1.55}
.v2hero .disp{margin:0;font-size:clamp(52px,6.6vw,108px);line-height:.94;letter-spacing:-.04em;font-weight:300}
.v2hero .disp .fix{display:block}.v2hero .disp .roll{display:block;height:1.02em;overflow:hidden}
.v2hero .disp .roll span{display:block;transition:transform .9s var(--v2ease),opacity .9s var(--v2ease)}
.v2hero .disp .roll span.out{transform:translateY(-105%);opacity:0}.v2hero .disp .roll span.in{transform:translateY(105%);opacity:0}
.v2hero .disp em{font-style:normal;color:var(--o)}
.v2hero .hrow{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:26px}
.v2hero .hrow p{margin:0;max-width:36ch;font-size:19px;color:rgba(255,255,255,.94)}
.v2hero .facts{display:flex;gap:44px}.v2hero .facts div{font-size:13px;color:rgba(255,255,255,.85)}.v2hero .facts b{display:block;font-size:30px;font-weight:300;letter-spacing:-.02em;color:#fff}
.v2hero .segs{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:24px}
.v2hero .seg{font:inherit;text-align:left;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.66);padding:12px 0 0;position:relative;background:none;border:0;cursor:pointer;transition:color .4s}
.v2hero .seg::before,.v2hero .seg i{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:rgba(255,255,255,.25)}
.v2hero .seg i{background:#fff;width:0}.v2hero .seg.on{color:#fff}.v2hero .seg.on i{animation:v2fill 3s linear forwards}.v2hero .seg.you.on i{animation-duration:4.5s}.v2hero .seg.done i{width:100%}.v2hero .seg.you.on i{background:var(--o)}
@keyframes v2fill{to{width:100%}}
.v2 .stmt{height:130vh;position:relative}.v2 .stmt .pin{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.v2 .stmt-in{width:100%;position:relative;height:100%;display:flex;align-items:center}
.v2 .stmt h2{margin:0;font-size:clamp(44px,5.6vw,92px);line-height:1.02;letter-spacing:-.035em;font-weight:300;max-width:15ch;border-left:4px solid var(--o);padding-left:40px}
.v2 .stmt h2 .wd{color:#D2D3D1;transition:color .15s}.v2 .stmt h2 .wd.lit{color:var(--ink)}.v2 .stmt h2 b{font-weight:600}
.v2 .stmt .side{position:absolute;right:0;bottom:12vh;max-width:380px;color:var(--g);font-size:17px}.v2 .stmt .side p{margin:0 0 18px}
.v2 .sec{padding:100px 0 90px}
.v2 .head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:32px}
.v2 .head h2{margin:12px 0 0;font-size:clamp(38px,3.8vw,60px);line-height:1.04;letter-spacing:-.03em;font-weight:300;max-width:17ch}
.v2 .head p{max-width:34ch;color:var(--g);margin:0;font-size:16px}
.v2 .acc{display:flex;gap:8px;height:clamp(440px,60vh,540px);padding:0 var(--pad,56px);max-width:1440px;margin:0 auto}
.v2 .pan{flex:1;position:relative;overflow:hidden;background:#222 center/cover;color:#fff;transition:flex 1s var(--v2ease);min-width:0;border-radius:4px}
.v2 .pan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.05) 35%,rgba(10,12,14,.55) 62%,rgba(10,12,14,.9) 100%)}
.v2 .pan.on{flex:5.2}
.v2 .pan .lab{position:absolute;z-index:2;left:50%;bottom:24px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:15px;font-weight:500;white-space:nowrap;max-height:calc(100% - 80px);overflow:hidden;transition:opacity .4s}
.v2 .pan.on .lab{opacity:0}
.v2 .pan .pn{position:absolute;z-index:2;top:22px;left:50%;transform:translateX(-50%);font-size:12px;opacity:.8}.v2 .pan.on .pn{left:32px;transform:none}
.v2 .pan .body{position:absolute;z-index:2;left:32px;right:32px;bottom:28px;opacity:0;transform:translateY(20px);transition:opacity .6s .25s,transform .8s .2s var(--v2ease);max-width:560px}
.v2 .pan.on .body{opacity:1;transform:none}
.v2 .pan h3{margin:0 0 8px;font-size:36px;line-height:1;letter-spacing:-.03em;font-weight:300}
.v2 .pan .line{margin:0 0 14px;font-size:16px;opacity:.92}
.v2 .pan blockquote{margin:0 0 18px;padding-left:14px;border-left:3px solid var(--o);font-size:18px;line-height:1.35}
.v2 .proj{background:var(--p2);padding:110px 0}
.v2 .chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.v2 .chip{border:1px solid #D4D5D2;border-radius:999px;padding:8px 16px;font-size:14px;color:var(--g);transition:all .3s}
.v2 .chip.on,.v2 .chip:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.v2 .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:330px 330px;gap:16px}
.v2 .tile{position:relative;overflow:hidden;color:#fff;background:#333;border-radius:4px;border:0!important;box-shadow:none!important}
.v2 .tile .ph{position:absolute;inset:0;background:center/cover;transition:transform 1.2s var(--v2ease)}.v2 .tile:hover .ph{transform:scale(1.06)}
.v2 .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(10,12,14,.85) 100%)}
.v2 .tile .t{position:absolute;z-index:2;left:28px;right:28px;bottom:26px}.v2 .tile .k{color:#fff;opacity:.85}
.v2 .tile h3{margin:8px 0 0;font-size:22px;line-height:1.22;font-weight:500;letter-spacing:-.01em}
.v2 .t1{grid-column:span 2;grid-row:span 2}.v2 .t1 h3{font-size:36px;line-height:1.08;font-weight:400;letter-spacing:-.025em;max-width:16ch}
.v2 .t1 .facts2{display:flex;gap:36px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.3)}
.v2 .t1 .facts2 div{font-size:13px;opacity:.85}.v2 .t1 .facts2 b{display:block;font-size:20px;font-weight:500;opacity:1}
.v2 .t2{grid-column:span 2}
.v2 .badge{position:absolute;z-index:3;top:22px;right:22px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;font-size:18px;transition:background .3s}
.v2 .tile:hover .badge{background:var(--o)}
.v2 .fq{background:var(--v2dk);color:#fff;padding:120px 0}
.v2 .fq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:80px;align-items:center}
.v2 .fq h2{margin:14px 0 20px;font-size:clamp(38px,3.8vw,58px);line-height:1.04;letter-spacing:-.03em;font-weight:300;color:#fff}
.v2 .fq .intro{color:rgba(255,255,255,.75);margin:0 0 30px;font-size:17px}.v2 .fq .k{color:rgba(255,255,255,.6)}
.v2 .fac{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.v2 .fac button{font:inherit;cursor:pointer;background:none;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 16px;font-size:14px;color:rgba(255,255,255,.85);transition:all .3s}
.v2 .fac button.on,.v2 .fac button:hover{background:#fff;color:var(--ink);border-color:#fff}
.v2 .hear{border-left:3px solid var(--o);padding-left:16px;font-size:19px;line-height:1.4;margin:0 0 30px;min-height:56px;transition:opacity .4s}
.v2 .fq .lnk{color:#fff}
.v2 .dial{position:relative;display:grid;grid-template-columns:1fr 1fr}
.v2 .dial .q{padding:44px 52px;min-height:250px}
.v2 .dial .q:nth-child(1){border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding-right:110px}
.v2 .dial .q:nth-child(2){border-bottom:1px solid rgba(255,255,255,.14);padding-left:110px}
.v2 .dial .q:nth-child(3){border-right:1px solid rgba(255,255,255,.14);padding-right:110px}
.v2 .dial .q:nth-child(4){padding-left:110px}
.v2 .dial h3{margin:10px 0 12px;font-size:24px;line-height:1.15;font-weight:400;letter-spacing:-.015em;color:#fff}.v2 .dial h3 i{font-style:normal;color:var(--o)}
.v2 .dial p{margin:0;color:rgba(255,255,255,.75);font-size:15.5px;line-height:1.5;transition:opacity .35s}.v2 .dial p.fade{opacity:0}
.v2 .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:180px;height:180px;border-radius:50%;background:var(--v2dk);border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;text-align:center;box-shadow:0 0 0 14px var(--v2dk)}
.v2 .hub::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(241,95,35,.55);animation:v2pulse 3.2s ease-out infinite}
@keyframes v2pulse{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.25);opacity:0}}
.v2 .hub span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}.v2 .hub b{display:block;font-size:24px;font-weight:300;letter-spacing:-.02em;margin-top:4px}
.v2 .num{padding:110px 0 40px}
.v2 .num .row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.v2 .num .c{padding:40px 0 0 32px;border-left:1px solid var(--line)}.v2 .num .c:first-child{border-left:0;padding-left:0}
.v2 .num b{display:block;font-size:84px;font-weight:200;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.v2 .num span{display:block;margin-top:14px;font-size:15px;color:var(--g)}
.v2 .creds{display:flex;flex-wrap:wrap;gap:16px 40px;padding:56px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}
.v2 .qt{padding:110px 0 130px}
.v2 .qwrap{position:relative;min-height:330px}
.v2 .qi{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(20px);transition:opacity .9s var(--v2ease),transform .9s var(--v2ease);pointer-events:none}
.v2 .qi.on{opacity:1;transform:none;pointer-events:auto}
.v2 .qi blockquote{margin:0;max-width:26ch;font-size:clamp(34px,3.8vw,60px);line-height:1.1;letter-spacing:-.03em;font-weight:300}
.v2 .qi figcaption{display:block;margin-top:30px;font-size:15px;color:var(--g)}.v2 .qi figcaption b{color:var(--ink)}
.v2 .qnav{display:flex;gap:10px;margin-top:20px}.v2 .qnav i{position:relative;width:60px;height:2px;background:var(--line);overflow:hidden}
.v2 .qnav i.on::after{content:"";position:absolute;inset:0;background:var(--o);animation:v2fill2 6s linear forwards;transform-origin:left}
@keyframes v2fill2{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.v2 .qmark{color:var(--o);font-size:88px;line-height:.6;margin-bottom:26px;font-weight:300}
.v2 .sa{display:grid;grid-template-columns:6fr 5fr;background:var(--p2)}
.v2 .sa .tx{padding:110px 80px 110px max(56px,calc((100vw - 1280px)/2 + 56px))}
.v2 .sa h2{margin:14px 0 20px;font-size:54px;line-height:1.02;letter-spacing:-.03em;font-weight:300}
.v2 .sa p{color:var(--g);margin:0 0 30px;max-width:42ch}.v2 .sa p a{text-decoration:underline}
.v2 .sa .map{background:#fff}.v2 .sa svg{width:100%;height:100%;display:block}
.v2 .close{padding:130px 0 110px}
.v2 .close h2{margin:0 0 40px;font-size:clamp(64px,8.2vw,132px);line-height:.92;letter-spacing:-.045em;font-weight:300}
.v2 .ask{display:flex;align-items:center;border:1px solid #CFD0CD;border-radius:999px;padding:8px 8px 8px 30px;max-width:760px;transition:border-color .3s,box-shadow .3s}
.v2 .ask:hover{border-color:var(--ink);box-shadow:0 18px 40px -24px rgba(0,0,0,.35)}
.v2 .ask span{flex:1;color:var(--mute);font-size:19px}.v2 .ask b{background:var(--o);color:#fff;border-radius:999px;padding:16px 26px;font-size:15px;font-weight:600;white-space:nowrap}
.v2 .close .alt{margin-top:22px;color:var(--g);font-size:15px}.v2 .close .alt a{text-decoration:underline}

/* ---- tablet ---- */
@media(max-width:1100px){
.v2 .fq-in{grid-template-columns:minmax(0,1fr);gap:50px}.v2 .fq-in>*{min-width:0}
.v2 .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}.v2 .t1{grid-column:span 2;grid-row:auto;min-height:420px}.v2 .t2{grid-column:span 2}.v2 .tile{min-height:280px}
.v2 .stmt .side{position:static;margin-top:40px}.v2 .stmt-in{flex-direction:column;align-items:flex-start;justify-content:center}
.v2hero .facts{display:none}
}
/* ---- mobile: less text, nothing crowded ---- */
@media(max-width:760px){
.v2{font-size:16px}
.v2hero{width:calc(100% - 16px);margin-top:8px;border-radius:14px;height:min(78vh,600px);min-height:460px}
.v2hero-in{padding-bottom:22px}
.v2hero .v2desc{font-size:11px;letter-spacing:.12em;margin-bottom:12px;max-width:30ch}
.v2hero .disp{font-size:clamp(44px,12.5vw,60px)}
.v2hero .hrow{display:none}
.v2hero .segs{grid-template-columns:repeat(8,1fr);gap:5px;margin-top:22px}
.v2hero .seg{font-size:0;padding-top:8px}
.v2 .stmt{height:auto}.v2 .stmt .pin{position:static;height:auto;padding:70px 0}
.v2 .stmt h2{font-size:36px;padding-left:22px;border-left-width:3px}.v2 .stmt h2 .wd{color:var(--ink)}
.v2 .stmt .side{font-size:16px}
.v2 .sec{padding:60px 0}
.v2 .head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}
.v2 .head h2{font-size:32px}.v2 .head p{display:none}
.v2 .acc{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:0 16px 6px;-webkit-overflow-scrolling:touch}
.v2 .pan,.v2 .pan.on{flex:0 0 78vw;height:400px;scroll-snap-align:start}
.v2 .pan .lab{display:none}.v2 .pan .pn{left:22px;transform:none}
.v2 .pan .body{opacity:1;transform:none;left:22px;right:22px;bottom:22px}
.v2 .pan h3{font-size:28px}.v2 .pan blockquote{display:none}.v2 .pan .line{font-size:15px}
.v2 .proj{padding:60px 0}
.v2 .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 20px;padding:0 16px}.v2 .chip{white-space:nowrap}
.v2 .bento{grid-template-columns:1fr;gap:12px}.v2 .t1,.v2 .t2{grid-column:auto}.v2 .t1{min-height:340px}.v2 .tile{min-height:240px}
.v2 .t1 h3{font-size:26px}.v2 .t1 .facts2{display:none}.v2 .tile h3{font-size:19px}
.v2 .fq{padding:64px 0}.v2 .fq h2{font-size:32px}.v2 .fq .intro{font-size:16px}
.v2 .fac{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 24px;padding:0 16px}.v2 .fac button{white-space:nowrap}
.v2 .dial{grid-template-columns:1fr}.v2 .hub{display:none}
.v2 .dial .q,.v2 .dial .q:nth-child(n){padding:22px 0;min-height:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
.v2 .dial .q:last-child{border-bottom:0}.v2 .dial h3{font-size:20px}
.v2 .num{padding:60px 0 20px}.v2 .num .row{grid-template-columns:1fr 1fr}.v2 .num .c,.v2 .num .c:first-child{padding:26px 0 0;border-left:0}
.v2 .num b{font-size:52px}.v2 .creds{gap:10px 22px;padding-top:30px;font-size:11px}
.v2 .qt{padding:60px 0 80px}.v2 .qwrap{min-height:300px}.v2 .qi blockquote{font-size:28px}.v2 .qmark{font-size:64px}
.v2 .sa{grid-template-columns:1fr}.v2 .sa .tx{padding:60px 16px}.v2 .sa h2{font-size:34px}.v2 .sa .map{height:240px}
.v2 .close{padding:70px 0 60px}.v2 .close h2{font-size:52px;margin-bottom:28px}
.v2 .ask{padding:6px;justify-content:center}.v2 .ask span{display:none}.v2 .ask b{flex:1;text-align:center}
}
/* ---- light footer (2 Oct 2026): one dark moment per page, not two ---- */
footer.site{background:#F4F4F2;color:#4D5256;border-top:1px solid #E2E2E0;padding:4rem 0 0;overflow:hidden}
footer.site h5{color:#1A1D21}
footer.site a{color:#4D5256}footer.site a:hover{color:#1A1D21}
footer.site b{color:#1A1D21;font-weight:600}
footer.site .usp{color:#1A1D21;font-weight:300;font-size:1.7rem;letter-spacing:-.025em}
footer.site .wordmark{color:#1A1D21!important}
footer.site .social-row a{color:#4D5256;border-color:#CFD0CD}footer.site .social-row a:hover{color:#fff;background:#F15F23;border-color:#F15F23}
footer.site .fine{border-top-color:#E2E2E0;color:#7A7F84}
footer.site::after{content:"Built Around You.";display:block;max-width:1280px;margin:2.6rem auto 0;padding:0 var(--pad,56px);font-size:clamp(56px,11.5vw,184px);font-weight:300;letter-spacing:-.05em;line-height:1;padding-bottom:.18em;color:#E6E6E3;white-space:nowrap;overflow:hidden}
@media(max-width:760px){footer.site{padding-top:3rem}footer.site::after{font-size:15vw;margin-top:2rem}}
@media(prefers-reduced-motion:reduce){.v2 *,.v2 *::before,.v2 *::after,.v2hero *{animation:none!important;transition:none!important}.v2 .rv{opacity:1;transform:none}.v2 .stmt h2 .wd{color:var(--ink)}}

/* ---- How We Work v2 ---- */
.hw section{padding:110px 0}
.hw .hw-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.hw h2{margin:12px 0 0;font-size:clamp(38px,3.8vw,60px);line-height:1.04;letter-spacing:-.03em;font-weight:300}
.hw h2 b{font-weight:300;color:var(--g)}
.hw-intro h2{font-size:clamp(36px,3.4vw,54px);margin-bottom:30px}
.hw p{color:var(--g);margin:0 0 18px}.hw p.big{font-size:21px;line-height:1.5;color:var(--ink)}
.hw .hw-ph{margin:0;position:relative}
.hw .hw-ph .img{aspect-ratio:4/3;border-radius:18px;background:center/cover no-repeat #ddd;overflow:hidden}
.hw .hw-ph.tall .img{aspect-ratio:4/5}
.hw .hw-ph figcaption{position:relative;margin:-64px 24px 0 auto;max-width:78%;background:#fff;border-radius:14px;padding:22px 24px;box-shadow:0 30px 60px -34px rgba(0,0,0,.4);font-size:14px;line-height:1.5;color:var(--g)}
.hw .hw-ph figcaption .k{color:var(--o);display:block;margin-bottom:8px;font-size:11px}
.hw .hw-ph figcaption b{display:block;color:var(--ink);font-size:17px;font-weight:600;margin-bottom:4px}
.hw-q{background:var(--p2)}
.hq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hq{background:#fff;border-radius:18px;padding:40px 40px 36px;position:relative;overflow:hidden;transition:transform .5s var(--v2ease),box-shadow .5s}
.hq::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--o);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--v2ease)}
.hq:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(0,0,0,.35)}.hq:hover::before{transform:none}
.hq .k{color:var(--o)}
.hq h3{margin:14px 0 16px;font-size:clamp(26px,2.3vw,34px);line-height:1.12;letter-spacing:-.02em;font-weight:300}
.hq h3 i{font-style:normal;color:var(--o)}.hq p{margin:0;font-size:17px}
.hm-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--ink)}
.hm{padding:26px 26px 6px 0;border-right:1px solid var(--line);margin-right:26px}.hm:last-child{border-right:0;margin-right:0}
.hm .k{color:var(--o);font-size:11px}
.hm b{display:block;margin-top:14px;font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em;font-weight:300}
.hw-s{background:var(--p2)}
.hs-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:90px}
.hs{background:#fff;border-radius:18px;padding:34px 34px 30px}
.hs .meter{display:flex;gap:6px;align-items:flex-end;height:34px;margin-bottom:26px}
.hs .meter i{width:12px;background:#E2E2E0;border-radius:3px}.hs .meter i:nth-child(1){height:12px}.hs .meter i:nth-child(2){height:22px}.hs .meter i:nth-child(3){height:34px}
.hs .meter i.on{background:var(--o)}
.hs h3{margin:10px 0 12px;font-size:28px;line-height:1.1;letter-spacing:-.02em;font-weight:300}.hs p{margin:0;font-size:16px}
.hw .pull{font-size:clamp(30px,2.8vw,44px);line-height:1.1;letter-spacing:-.025em;font-weight:300;color:var(--ink);margin-bottom:26px}.hw .pull b{font-weight:300;color:var(--o)}
.hj-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hj{border:1px solid var(--line);border-radius:18px;padding:40px;display:flex;flex-direction:column}
.hj .k{color:var(--o)}
.hj h3{margin:14px 0 14px;font-size:clamp(26px,2.3vw,34px);line-height:1.12;letter-spacing:-.02em;font-weight:300}
.hj .out{margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}
.hj .out b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.hjq{margin:6px 0 0;display:grid;grid-template-columns:150px 1fr;gap:12px 18px;font-size:15px}.hjq dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--o);padding-top:3px}.hjq dd{margin:0;color:var(--g);line-height:1.5}
@media(max-width:760px){.hjq{grid-template-columns:1fr;gap:4px}.hjq dd{margin-bottom:10px}}.hj .out span{font-size:15px;color:var(--mute)}
.hw-l{padding-top:20px!important}
.hl-list{margin-top:34px;border-top:1px solid var(--line)}
.hl{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.hl .ic{flex:0 0 44px;height:44px;border-radius:50%;background:#FDEBE3;display:flex;align-items:center;justify-content:center}
.hl .ic svg{width:22px;height:22px;fill:none;stroke:var(--o);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hl h3{margin:0 0 4px;font-size:18px;font-weight:600}.hl p{margin:0;font-size:15px}
@media(max-width:1100px){.hw .hw-split{gap:44px}.hm-row{grid-template-columns:repeat(3,1fr)}.hm:nth-child(3){border-right:0;margin-right:0}}
@media(max-width:760px){
.hw section{padding:64px 0}
.hw .hw-split,.hq-grid,.hs-row,.hj-row{grid-template-columns:minmax(0,1fr);gap:16px}
.hw .hw-split{gap:36px}
.hw-intro h2{font-size:32px}.hw h2{font-size:32px}.hw p.big{font-size:18px}
.hw .hw-ph figcaption{margin:-40px 12px 0 auto;max-width:88%;padding:18px}
.hq,.hj,.hs{padding:28px 24px}
.hm-row{grid-template-columns:minmax(0,1fr)}.hm{border-right:0;margin-right:0;padding:18px 0;border-bottom:1px solid var(--line)}.hm b{margin-top:6px;font-size:22px}
.hs-row{margin-bottom:56px}
.hw-l .hw-ph{order:2}
}

/* hero: blurred placeholder under the first photo, and a pause control */
.v2hero .lqip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px);transform:scale(1.12)}
.v2hero .hpause{position:absolute;z-index:4;right:20px;top:20px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.28);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,transform .2s cubic-bezier(.2,.7,.1,1)}
.v2hero .hpause:hover{background:rgba(0,0,0,.5)}
.v2hero .hpause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v2hero .hpause .pl{display:none;fill:currentColor;stroke:none}.v2hero .hpause.is-held .pl{display:block}.v2hero .hpause.is-held .pz{display:none}
.v2hero.paused .seg.on i{animation-play-state:paused}
/* respond on press, not on release */
a,button{-webkit-tap-highlight-color:transparent}
.btn{transition:background .15s,color .15s,border-color .15s,transform .25s cubic-bezier(.2,.7,.1,1)}
.btn:active,.navtoggle:active,.v2 .chip:active,.v2 .ask:active,.v2 .fac button:active,.v2hero .seg:active,.v2hero .hpause:active,.v2 .lnk:active{transform:scale(.97);transition:transform .1s ease-out}
.v2 .tile:active,.card:active,.v2 .hq:active,.v2 .hs:active{transform:scale(.985);transition:transform .1s ease-out}
/* translucent header: content scrolls under it, shadow only once scrolled */
header.site{background:rgba(255,255,255,.74);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:transparent;transition:box-shadow .3s ease,background .3s ease}
header.site.scrolled{box-shadow:0 1px 0 rgba(26,29,33,.06),0 12px 30px -20px rgba(26,29,33,.4)}
.navcta{display:none}
/* dropdowns: fade and drop from their trigger (desktop) */
@media(min-width:1141px){
.drop-menu{display:block;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transform-origin:top left;background:#fff;border:1px solid rgba(26,29,33,.08);border-radius:12px;box-shadow:0 24px 50px -22px rgba(26,29,33,.4);padding:.5rem;transition:opacity .16s ease,transform .26s cubic-bezier(.2,.7,.1,1),visibility 0s linear .26s}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.drop-menu a{border-radius:8px}
}
/* mobile menu: grouped sections that open and close, call to action pinned */
@media(max-width:1140px){
nav.main{background:#fff}
nav.main.open{animation:v2navin .28s cubic-bezier(.2,.7,.1,1)}
@keyframes v2navin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
nav.main .drop>button{pointer-events:auto;cursor:pointer;display:flex;width:100%;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);padding:.95rem .35rem;border-bottom:1px solid var(--line);border-radius:0}
nav.main .drop>button::after{display:inline-block;content:"";width:8px;height:8px;border:0;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s cubic-bezier(.2,.7,.1,1);margin:0 .35rem 0 0}
nav.main .drop.open>button::after{transform:rotate(-135deg) translateY(-2px)}
nav.main .drop-menu{display:none;padding:.3rem 0 .6rem .6rem}
nav.main .drop.open .drop-menu{display:block;animation:v2navin .25s cubic-bezier(.2,.7,.1,1)}
nav.main>a{font-size:1rem;padding:.95rem .35rem;border-bottom:1px solid var(--line);color:var(--ink)}
nav.main .navcta{display:flex;position:sticky;bottom:-1.2rem;gap:1rem;align-items:center;justify-content:space-between;background:#fff;margin-top:.8rem;padding:1rem .35rem 1.4rem;border-top:1px solid var(--line)}
nav.main .navcta .btn{color:#fff;background:var(--orange);border-color:var(--orange);padding:.85rem 1.5rem;font-size:.92rem;border-radius:999px}
nav.main .navcta .tel{padding:0;font-size:.95rem}
}
/* user settings: less transparency, more contrast */
@media(prefers-reduced-transparency:reduce){
header.site{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}
.v2 .badge,.v2hero .hpause{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.6)}
}
@media(prefers-contrast:more){
header.site{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid #1A1D21}
.v2banner::after{background:rgba(12,14,16,.82)!important}
.hw p,.hw .hm .k{color:#1A1D21}
.v2 .hq,.v2 .hs,.v2 .hj{border:1px solid #1A1D21}
}
@media(prefers-reduced-motion:reduce){nav.main.open,nav.main .drop.open .drop-menu{animation:none}.btn:active,.v2 .tile:active{transform:none}}

/* ===================== design v3 templates, 6 Oct 2026 ===================== */
.v3{--o:#F15F23;--ink:#1A1D21;--g:#4D5256;--mute:#7A7F84;--line:#E6E6E3;--p2:#F4F4F2;font-size:18px;line-height:1.55;color:var(--ink)}
.v3 a{text-decoration:none;color:inherit}
.v3 .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.v3 h2{margin:12px 0 0;font-size:clamp(34px,3.5vw,54px);line-height:1.05;letter-spacing:-.03em;font-weight:300;color:var(--ink)}
.v3 h3{color:inherit}
.v3 p{color:var(--g)}
.v3 .v3s{padding:100px 0}.v3 .v3s.first{padding-top:64px}.v3 .alt{background:var(--p2)}
.v3 .v3gap{margin-top:90px}
.v3 .head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:34px}
.v3 .head p{max-width:36ch;margin:0;font-size:16px}
.v3 .lnk{font-size:15px;font-weight:600;display:inline-flex;gap:12px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:4px;white-space:nowrap}
.v3 .lnk::after{content:"\2192";color:var(--o);transition:transform .4s var(--v2ease)}.v3 .lnk:hover::after{transform:translateX(6px)}
.v3 .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--v2ease),transform .9s var(--v2ease)}.v3 .rv.in{opacity:1;transform:none}
.v3 .big{font-size:21px;line-height:1.5;color:var(--ink);margin:24px 0 18px}
.v3 .split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.v3 .split.top{align-items:start}.v3 .split.top .big{margin-top:6px}
/* sticky in-page menu */
.v3 .sub2{position:sticky;top:78px;z-index:40;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);margin-top:10px}
.v3 .sub2::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:linear-gradient(rgba(26,29,33,.06),rgba(26,29,33,0));pointer-events:none}
.v3 .sub2 .wrap{display:flex;align-items:center;height:60px;gap:30px;font-size:14px;color:var(--g);overflow-x:auto;scrollbar-width:none}
.v3 .sub2 a{position:relative;padding:19px 0;white-space:nowrap;transition:color .2s}.v3 .sub2 a:hover{color:var(--ink)}
.v3 .sub2 a.on{color:var(--ink);font-weight:600}.v3 .sub2 a.on::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--o);border-radius:2px}
.v3 .sub2 .pill{margin-left:auto;background:var(--ink);color:#fff;border-radius:999px;padding:10px 20px;font-weight:600;font-size:13px}
.v3 .sub2 .pill::after{display:none}.v3 .sub2 .pill:hover{color:#fff;background:#000}
/* glance cards */
.v3 .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.v3 .gc{background:var(--p2);border-radius:18px;padding:30px 28px;min-height:220px;transition:transform .5s var(--v2ease),box-shadow .5s;display:block}
.v3 .gc:hover{transform:translateY(-5px);box-shadow:0 28px 50px -32px rgba(0,0,0,.35)}
.v3 .gc .k{color:var(--o)}.v3 .gc h3{margin:14px 0 0;font-size:18px;line-height:1.42;font-weight:500}
.v3 .gc.dark{background:var(--ink);color:#fff}.v3 .gc.dark h3{color:rgba(255,255,255,.78);font-weight:400;font-size:16px}
.v3 .gc.dark b{display:block;font-size:40px;font-weight:300;letter-spacing:-.03em;line-height:1;margin:16px 0 12px;color:#fff}
.v3 .qh{font-size:clamp(30px,2.9vw,46px);line-height:1.1}
.v3photo{margin:0;position:relative}.v3photo .img{aspect-ratio:4/3;border-radius:18px;background:center/cover no-repeat #ddd}
.v3photo figcaption{position:relative;margin:-60px 24px 0 auto;max-width:78%;background:#fff;border-radius:14px;padding:20px 22px;box-shadow:0 30px 60px -34px rgba(0,0,0,.4);font-size:14px;line-height:1.5;color:var(--g)}
.v3photo figcaption .k{color:var(--o);display:block;margin-bottom:6px;font-size:11px}.v3photo figcaption b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
.v3photo figcaption a{font-weight:600;color:var(--ink);border-bottom:1px solid currentColor}
/* questions, controls, measures */
.v3 .q2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v3 .qc{background:#fff;border-radius:18px;padding:38px 38px 34px;position:relative;overflow:hidden;transition:transform .5s var(--v2ease),box-shadow .5s}
.v3 .qc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--o);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--v2ease)}
.v3 .qc:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(0,0,0,.35)}.v3 .qc:hover::before{transform:none}
.v3 .qc .k{color:var(--o)}.v3 .qc h3{margin:12px 0 14px;font-size:clamp(24px,2.1vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:300}.v3 .qc h3 i{font-style:normal;color:var(--o)}.v3 .qc p{margin:0;font-size:17px;color:var(--ink)}
.v3 .ctl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v3 .cc{border:1px solid var(--line);border-radius:18px;padding:32px;background:#fff}
.v3 .cc .ic{width:46px;height:46px;border-radius:50%;background:#FDEBE3;display:grid;place-items:center;margin-bottom:22px}
.v3 .cc .ic svg{width:22px;height:22px;fill:none;stroke:var(--o);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v3 .cc h3{margin:0 0 10px;font-size:20px;font-weight:600;letter-spacing:-.01em}.v3 .cc p{margin:0;font-size:16px}
.v3 .v3mh{margin-bottom:30px}
.v3 .measures{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.v3 .measures div{padding:26px 26px 4px 0;margin-right:26px;border-right:1px solid var(--line);font-size:clamp(22px,2.1vw,30px);line-height:1.18;letter-spacing:-.02em;font-weight:300}.v3 .measures div:last-child{border:0;margin:0}
/* proof */
.v3 .v3pl{font-size:18px;color:var(--g);max-width:60ch;margin:-14px 0 28px}
.v3 .bento{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:260px;gap:16px}
.v3 .tile{position:relative;border-radius:18px;overflow:hidden;color:#fff;background:#222;display:block}
.v3 .bento .tile.t1{grid-row:span 2}
.v3 .tile .ph{position:absolute;inset:0;background:center/cover no-repeat;transition:transform 1.2s var(--v2ease)}.v3 .tile:hover .ph{transform:scale(1.05)}
.v3 .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,12,14,.82),rgba(10,12,14,0) 60%)}
.v3 .tile .t{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}.v3 .tile .k{color:rgba(255,255,255,.78);font-size:11px}
.v3 .tile h3{margin:8px 0 0;font-size:19px;line-height:1.28;font-weight:500;color:#fff}.v3 .tile.t1 h3{font-size:27px;font-weight:400;letter-spacing:-.01em}
.v3 .badge{position:absolute;z-index:3;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;font-size:16px;color:#fff}
.v3 .testi{margin:56px 0 0;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;padding:40px 0 0;border-top:1px solid #DDDDDA}
.v3 .testi .qm{font-size:90px;line-height:.7;color:var(--o);font-weight:300}
.v3 .testi blockquote{margin:0;font-size:clamp(20px,1.9vw,27px);line-height:1.38;font-weight:300;letter-spacing:-.015em;color:var(--ink)}
.v3 .testi figcaption{margin-top:16px;font-size:15px;color:var(--g);font-weight:600}
.v3 .dlcard{display:flex;align-items:center;gap:30px;background:#fff;border-radius:18px;padding:30px 34px;margin-top:56px}
.v3 .dlcard .doc{flex:0 0 74px;height:96px;border-radius:8px;background:#fff;box-shadow:0 14px 30px -18px rgba(0,0,0,.35);position:relative;overflow:hidden;border:1px solid var(--line)}
.v3 .dlcard .doc span{position:absolute;left:0;right:0;top:0;height:34%;background:center/cover #ddd}
.v3 .dlcard .doc i{position:absolute;left:10px;right:10px;height:3px;border-radius:2px;background:#E2E2E0}
.v3 .dlcard .k{color:var(--o)}.v3 .dlcard h3{margin:4px 0 4px;font-size:21px;font-weight:600;letter-spacing:-.01em}.v3 .dlcard p{margin:0;font-size:15px}
.v3 .v3btn,.v3 .v3dl .dl,.v3 .v3dl button.dl{display:inline-flex;align-items:center;gap:10px;background:var(--o);color:#fff!important;font:inherit;font-weight:700;font-size:15px;padding:14px 24px;border-radius:999px;border:0;margin-left:auto;white-space:nowrap;cursor:pointer;transition:background .2s,transform .25s var(--v2ease)}
.v3 .v3btn:hover,.v3 .v3dl .dl:hover{background:#D94F17}
.v3 .v3btn:active,.v3 .v3dl .dl:active{transform:scale(.97);transition:transform .1s ease-out}
.v3 .tile,.plib-feat .tile{border:0!important}
.v3 .testi blockquote{border:0!important;padding:0!important;max-width:none!important;background:none!important}
.v3 .testi blockquote::before,.v3 .testi blockquote::after{display:none!important}
.plib .libcard img,.plib .libcard,.plib .libcard .imgwrap,.plib .libcard figure{border:0!important;box-shadow:none!important}
.plib .libcard::before,.plib .libcard .imgwrap::before{display:none!important}
/* project page */
.v2banner.v3facts .v2banner-in{padding-bottom:96px}
@media(max-width:760px){.v2banner.v3facts .v2banner-in{padding-bottom:64px}}
.v3 .facts{position:relative;z-index:3;margin:-46px auto 0;background:#fff;border-radius:18px;box-shadow:0 30px 70px -40px rgba(0,0,0,.45);display:grid;grid-template-columns:repeat(var(--n,4),1fr)}
.v3 .facts div{padding:24px 26px;border-right:1px solid var(--line)}.v3 .facts div:last-child{border:0}
.v3 .facts .k{font-size:11px}.v3 .facts b{display:block;margin-top:8px;font-size:21px;font-weight:400;letter-spacing:-.015em;line-height:1.2}
.v3 .mda{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v3 .mc{background:#fff;border-radius:18px;padding:34px 32px;border:1px solid var(--line)}
.v3 .mc .n{display:flex;align-items:center;gap:12px;margin-bottom:20px}.v3 .mc .n span{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.v3 .mc p{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}
.v3 .mc.win{background:var(--ink);border-color:var(--ink)}.v3 .mc.win .n span{background:var(--o)}.v3 .mc.win .k{color:rgba(255,255,255,.7)}.v3 .mc.win p{color:#fff}
.v3 .v3long h2{font-size:26px;margin:34px 0 12px}.v3 .v3long .checks{padding-left:0}
.v3 .v3dl{display:flex;align-items:center;gap:30px;background:#fff;border-radius:18px;padding:30px 34px}
.v3 .alt .v3dl{background:#fff}.v3 .v3s:not(.alt) .v3dl{background:var(--p2)}
.v3 .v3dl h3{margin:6px 0 4px;font-size:21px;font-weight:600}.v3 .v3dl p{margin:0;font-size:15px}
.v3 .v3dl .dls{margin:0 0 0 auto;flex:0 0 auto}.v3 .v3dl .dl .dl-i,.v3 .v3dl .dl .dl-t{display:none}.v3 .v3dl .dl .dl-a{color:#fff}
.v3 .v3dl .dlnote{display:none}
.v3 .rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.v3 .rel .tile{height:320px}
/* banner glass quote (sector pages) */
.v2banner-in.has-aside{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.v3glass{flex:0 0 360px;background:rgba(20,22,25,.32);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.24);border-top-color:rgba(255,255,255,.4);border-radius:16px;padding:24px 26px;color:#fff}
.v3glass .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.72)}
.v3glass p{margin:10px 0 14px;font-size:21px;line-height:1.3;color:#fff}.v3glass small{font-size:13px;color:rgba(255,255,255,.75)}
/* project library */
.plib-feat{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:260px 260px;gap:16px;margin:10px 0 70px}.plib-feat .tile:first-child{grid-row:span 2}
.plib-feat .tile{position:relative;border-radius:18px;overflow:hidden;color:#fff;background:#222;display:block;text-decoration:none}
.plib-feat .tile .ph{position:absolute;inset:0;background:center/cover no-repeat;transition:transform 1.2s var(--v2ease)}.plib-feat .tile:hover .ph{transform:scale(1.05)}
.plib-feat .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,12,14,.82),rgba(10,12,14,0) 60%)}
.plib-feat .tile .t{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}.plib-feat .tile .k{color:rgba(255,255,255,.78);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.plib-feat .tile h3{margin:8px 0 0;font-size:20px;line-height:1.28;font-weight:500;color:#fff}.plib-feat .tile:first-child h3{font-size:28px;font-weight:400}
.plib-feat .badge{position:absolute;z-index:3;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;font-size:16px;color:#fff}
.plib .filters{position:sticky;top:78px;z-index:30;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);padding:14px 0;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:8px}
.plib .plfbtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font:inherit;font-size:14px;font-weight:500;color:var(--graphite,#4D5256);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .25s var(--v2ease)}
.plib .plfbtn span{color:#8A9096;font-weight:400;margin-left:6px}.plib .plfbtn.on{background:var(--ink,#1A1D21);border-color:var(--ink,#1A1D21);color:#fff}.plib .plfbtn.on span{color:rgba(255,255,255,.6)}
.plib .plfbtn:active{transform:scale(.97);transition:transform .1s ease-out}
.plib .libgrid{grid-template-columns:repeat(3,1fr);gap:30px 16px}
.plib .projcard figure{margin:0}.plib .projcard .imgwrap{border-radius:16px;overflow:hidden;aspect-ratio:4/3;transition:transform .6s var(--v2ease)}
.plib .projcard .imgwrap img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.plib .projcard:hover .imgwrap{transform:translateY(-4px)}
.plib .projcard figcaption{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;margin-top:16px}
.plib .projcard figcaption .k{color:#F15F23;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.plib .projcard figcaption .pdf{font-size:11px;font-weight:600;color:#4D5256;border:1px solid #E6E6E3;border-radius:999px;padding:3px 9px}
.plib .projcard figcaption b{grid-column:1/-1;font-size:19px;line-height:1.3;font-weight:500;color:#1A1D21}
.plib .projcard figcaption .more{display:none}
@media(max-width:1100px){.v3 .grid4{grid-template-columns:1fr 1fr}.plib .libgrid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
.v3{font-size:16px}.v3 .v3s{padding:60px 0}.v3 .v3s.first{padding-top:40px}.v3 .v3gap{margin-top:56px}
.v3 h2{font-size:30px}.v3 .qh{font-size:28px}.v3 .big{font-size:18px}
.v3 .head{flex-direction:column;align-items:flex-start;gap:12px}
.v3 .grid4,.v3 .q2,.v3 .ctl,.v3 .split,.v3 .bento,.v3 .mda,.v3 .rel,.plib-feat,.plib .libgrid{grid-template-columns:minmax(0,1fr)}.v3 .split{gap:36px}
.v3 .gc{min-height:0}.v3 .bento{grid-auto-rows:240px}.v3 .bento .tile.t1{grid-row:auto}
.plib-feat{grid-template-rows:auto}.plib-feat .tile{height:240px}.plib-feat .tile:first-child{grid-row:auto}
.v3 .measures{grid-template-columns:minmax(0,1fr)}.v3 .measures div{border-right:0;border-bottom:1px solid var(--line);margin:0;padding:18px 0}
.v3 .facts{margin:-30px 0 0;grid-template-columns:1fr 1fr}.v3 .facts div:nth-child(2n){border-right:0}.v3 .facts div{border-bottom:1px solid var(--line)}
.v3 .dlcard,.v3 .v3dl{flex-wrap:wrap;padding:24px}.v3 .v3btn,.v3 .v3dl .dls{margin-left:0}
.v3 .qc,.v3 .cc,.v3 .mc{padding:28px 24px}.v3 .sub2 .pill{display:none}.v3 .sub2{top:64px}
.v2banner-in.has-aside{flex-direction:column;align-items:flex-start;gap:22px}.v3glass{flex:none;width:100%}.v3glass p{font-size:18px}
.plib .filters{top:64px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}
@media(prefers-reduced-motion:reduce){.v3 .rv{opacity:1;transform:none;transition:none}.v3 .tile .ph,.v3 .gc,.v3 .qc{transition:none}}
@media(prefers-reduced-transparency:reduce){.v3 .sub2,.plib .filters{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.v3glass{background:rgba(20,22,25,.82);-webkit-backdrop-filter:none;backdrop-filter:none}}