/* ==========================================================================
   LBA V4 core
   --------------------------------------------------------------------------
   One definition of the layer that every V4 page shares: reset, tokens,
   ground, site chrome, mobile drawer, footer, back-to-top.

   Source of truth: v4-doors.html at sha 60295ec (14 Sep 2026). Every rule
   below is byte-faithful to that file except where marked CHANGED.

   NOT in this file, deliberately - these are page-type properties and stay
   in each page's own <style>:
     --hero-top   homepage 68/60/52 responsive, ADU 68/60, project 68
     --hero-lead  homepage 0px, ADU and project 46px
     --veil       homepage .79, ADU .66, project .83
     --veil-m     per page
     --mustard --amber   insight index only
     color-scheme:dark   ADU and project only; homepage and insight omit it
     hero, grid, section, light-run and article rules   all page-specific

   Link it FIRST, before the page's own <style>, so a page can still override.
   ========================================================================== */


/* -- 1. reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}


/* -- 2. tokens ----------------------------------------------------------- */
/* The nine values that are identical on all four V4 pages, plus --inset.
   --font is the homepage form; the insight index carries a longer stack
   ('DM Sans',system-ui,-apple-system,sans-serif) and can keep overriding it. */
:root{
  --black:#1c1c1a;
  --dark:#252522;
  --mid:#888780;
  --light:#D3D1C7;
  --offwhite:#f0ede8;
  --white:#faf9f6;
  --accent:#CDA02C;
  --accent-rgb:205 160 44;
  --font:'DM Sans',sans-serif;
  --inset:64px;
}
@media(max-width:900px){
  :root{--inset:20px}
}


/* -- 3. ground ----------------------------------------------------------- */
/* Dark is the default page ground. Light sections set their own. */
body{
  font-family:var(--font);
  background:var(--black);
  color:var(--offwhite);
  overflow-x:hidden;
}
html,body{background:#1C1C1A}


/* -- 4. site chrome ------------------------------------------------------
   Transparent at rest, blurred charcoal once scrolled. Never give the nav a
   fixed background to "fix" a light page - that is what broke it on 14 Sep.

   The repo uses three nav ids: sitenav on 31 pages, nav on 26, main-nav on 1,
   and none on 6. Every chrome rule names all three so none can fall through.
   ------------------------------------------------------------------------ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 64px;background:transparent;transition:background .4s;
}
nav#nav,nav#sitenav,nav#main-nav{
  background:transparent!important;border-bottom:none!important;
  transition:background .4s;
}
nav.scrolled,
nav#nav.scrolled,nav#sitenav.scrolled,nav#main-nav.scrolled{
  background:rgba(28,28,26,.55)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:0.5px solid rgba(211,209,199,.08)!important;
}

.nav-logo{display:block;text-decoration:none;line-height:0}
/* The SVG's intrinsic size is 267x124. Left uncapped the logo dominates the
   bar, which is what the homepage was doing. Cap it the way the insight
   index does, for all three nav ids. */
nav#nav .nav-logo svg,nav#sitenav .nav-logo svg,nav#main-nav .nav-logo svg{
  height:clamp(58px,7.5vw,104px);width:auto;display:block;
}
.nav-right{display:flex;align-items:center;gap:32px}
.nav-links{display:flex;gap:28px}
.nav-links a{
  font-size:15px;letter-spacing:.06em;color:rgba(240,237,232,.6);
  text-decoration:none;text-transform:uppercase;font-weight:400;transition:color .2s;
}
.nav-links a:hover{color:var(--offwhite)}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item + .nav-item{margin-left:28px}
.nav-links + .nav-book{margin-left:32px}
.nav-item.has-sub{padding-bottom:16px;margin-bottom:-16px}
.nav-sub{
  position:absolute;top:100%;left:-18px;min-width:252px;z-index:210;
  background:rgba(24,24,22,.98);border:0.5px solid rgba(211,209,199,.13);
  padding:10px 0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav-item.has-sub:hover .nav-sub,.nav-item.has-sub.open .nav-sub{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav-sub a{
  display:block;padding:9px 18px;font-size:13.5px;text-transform:none;
  letter-spacing:.01em;color:rgba(240,237,232,.74);white-space:nowrap;font-weight:300;
}
.nav-sub a:hover{color:var(--accent)}
.nav-book{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  color:var(--offwhite);padding:11px 20px;text-decoration:none;white-space:nowrap;
  border:0.5px solid rgba(240,237,232,.7);background:transparent;
  transition:background .25s,color .25s,border-color .25s;
}
.nav-book:hover{background:var(--accent);border-color:var(--accent);color:#1c1c1a}
.nav-license{
  font-size:13px;color:rgba(211,209,199,.4);letter-spacing:.06em;
  padding-left:24px;border-left:0.5px solid rgba(211,209,199,.2);
}

/* id-agnostic colour layer - this is the part that was missing on the
   insight index and turned its nav light */
nav#nav .nav-top,nav#sitenav .nav-top,nav#main-nav .nav-top,
nav#nav .nav-sub a,nav#sitenav .nav-sub a,nav#main-nav .nav-sub a{
  color:rgba(240,237,232,.78)!important;
}
nav#nav .nav-top:hover,nav#sitenav .nav-top:hover,nav#main-nav .nav-top:hover,
nav#nav .nav-sub a:hover,nav#sitenav .nav-sub a:hover,nav#main-nav .nav-sub a:hover{
  color:var(--accent)!important;
}
nav#nav .nav-sub,nav#sitenav .nav-sub,nav#main-nav .nav-sub{
  background:var(--black)!important;
}
nav#nav .nav-book,nav#sitenav .nav-book,nav#main-nav .nav-book{
  color:rgba(240,237,232,.9)!important;
  border-color:rgba(240,237,232,.45)!important;background:none!important;
}
nav#nav .nav-book:hover,nav#sitenav .nav-book:hover,nav#main-nav .nav-book:hover{
  background:rgb(var(--accent-rgb) / .9)!important;color:#1C1C1A!important;
}


/* -- 5. hamburger and mobile drawer -------------------------------------- */
.nav-hamburger{
  display:none;flex-direction:row;align-items:center;gap:8px;background:none;
  border:0.5px solid rgba(211,209,199,.3);cursor:pointer;padding:6px 12px;flex-shrink:0;
}
.nav-hamburger-bars{display:flex;flex-direction:column;gap:4px}
.nav-hamburger-bars span{
  display:block;width:18px;height:1.5px;background:var(--offwhite);
  transition:all .3s;transform-origin:center;
}
.nav-hamburger-label{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(240,237,232,.6);font-family:var(--font,'DM Sans',sans-serif);
}
.nav-hamburger.open .nav-hamburger-bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-hamburger.open .nav-hamburger-bars span:nth-child(2){opacity:0}
.nav-hamburger.open .nav-hamburger-bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mobile-menu{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--black,#1c1c1a);z-index:300;transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-inner{
  display:flex;flex-direction:column;justify-content:center;
  height:100%;padding:100px 40px 60px;overflow-y:auto;
}
.mobile-menu-inner a{
  font-size:28px;font-weight:300;color:var(--offwhite)!important;
  text-decoration:none!important;letter-spacing:-.3px;padding:16px 0;
  border-bottom:0.5px solid rgba(211,209,199,.15);
  transition:color .2s,padding-left .2s;display:block;
}
.mobile-menu-inner a:hover{color:var(--accent)!important;padding-left:8px}
.mobile-menu-license{
  margin-top:32px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(240,237,232,.5);
}
.mobile-menu-inner .mm-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 0 26px;margin-bottom:8px;border-bottom:0.5px solid rgba(211,209,199,.15);
}
.mobile-menu-inner .mm-mark{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,237,232,.45);
}
.mobile-menu-inner .mm-close{
  background:none;border:0.5px solid rgba(240,237,232,.45);
  color:var(--offwhite);font-family:var(--font);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:9px 16px;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.mobile-menu-inner .mm-close:hover{background:var(--accent);border-color:var(--accent);color:#1c1c1a}
.mobile-menu-inner .mm-top{
  display:block;width:100%;text-align:left;
  background:none;border:none;border-bottom:0.5px solid rgba(211,209,199,.15);
  font-family:var(--font);font-size:28px;font-weight:300;letter-spacing:-.3px;
  color:var(--offwhite);padding:16px 0;cursor:pointer;
}
.mobile-menu-inner .mm-top.open{color:var(--accent)}
.mobile-menu-inner .mm-sub{display:none;padding:2px 0 10px 16px}
.mobile-menu-inner .mm-sub.open{display:block}
.mobile-menu-inner .mm-sub a{
  font-size:17px!important;padding:11px 0!important;
  border-bottom:none!important;color:rgba(240,237,232,.68)!important;letter-spacing:0;
}
.mobile-menu-inner .mm-book{
  font-size:11px!important;letter-spacing:.16em;
  text-transform:uppercase;text-align:center;margin-top:30px;padding:16px 28px!important;
  color:var(--offwhite)!important;border:0.5px solid rgba(205,160,44,.55)!important;
  border-bottom:0.5px solid rgba(205,160,44,.55)!important;background:transparent;
}
.mobile-menu-inner .mm-plain{
  font-size:13px!important;text-align:center;margin-top:16px;
  padding:10px 0!important;border-bottom:none!important;
  color:rgba(240,237,232,.55)!important;letter-spacing:0;
}


/* -- 6. footer ----------------------------------------------------------- */
footer{background:var(--black);border-top:0.5px solid rgba(211,209,199,.1)}
footer#footer{
  background:#1C1C1A;width:100vw;max-width:none;margin:0;border-radius:0;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-bottom:0;
}
.footer-top{
  display:grid;grid-template-columns:260px 1fr 1fr 1fr;gap:48px;
  padding:72px 64px 56px 64px;
  border-bottom:0.5px solid rgba(211,209,199,.07);align-items:start;
}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start}
.footer-tagline{
  font-size:16px;font-weight:300;color:var(--accent);
  line-height:1.7;margin-bottom:28px;
}
.footer-logos{display:flex;align-items:center;gap:16px}
.footer-logo-aia{height:72px;width:auto;opacity:.85}
.footer-nav-col{display:flex;flex-direction:column;gap:11px}
.footer-nav-label{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid);margin-bottom:8px;padding-bottom:10px;
  border-bottom:0.5px solid rgba(211,209,199,.08);
}
.footer-nav-col a,.footer-nav-col span{
  font-size:14px;font-weight:300;color:rgba(240,237,232,.38);
  text-decoration:none;line-height:1.5;transition:color .2s;
}
.footer-nav-col a:hover{color:var(--accent)}
.footer-social{display:flex;flex-direction:column}
.footer-social-links{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.social-link{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:300;color:rgba(240,237,232,.38);
  text-decoration:none;transition:color .2s;
}
.social-link:hover{color:var(--accent)}
.social-link svg{width:17px;height:17px;flex-shrink:0}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 64px;
  font-size:12px;letter-spacing:.04em;color:rgba(240,237,232,.22);
  flex-wrap:wrap;gap:8px;
}
footer#footer .footer-bottom a{color:rgba(240,237,232,.55);text-decoration:none}
footer#footer .footer-bottom a:hover{color:var(--accent)}


/* -- 7. back to top ------------------------------------------------------ */
.btt{
  position:fixed;bottom:calc(36px + env(safe-area-inset-bottom,0px));right:36px;z-index:300;
  width:44px;height:44px;border-radius:50%;
  background:var(--dark);border:0.5px solid rgba(211,209,199,.2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;
  opacity:0;transform:translateY(12px);
  transition:opacity .3s,transform .3s,background .2s,border-color .2s;
  pointer-events:none;
}
.btt.visible{opacity:1;transform:translateY(0);pointer-events:all}
.btt:hover{background:var(--accent);border-color:var(--accent)}
.btt svg{width:14px;height:14px;stroke:rgba(240,237,232,.6);transition:stroke .2s}
.btt:hover svg{stroke:var(--offwhite)}
/* Touch screens keep :hover after a tap, which left the up button gold. On
   touch it behaves like the pager: gold only while pressed. */
@media (hover:none){
  .btt:hover{background:var(--dark)!important;border-color:rgba(211,209,199,.2)!important}
  .btt:hover svg{stroke:rgba(240,237,232,.6)!important}
  .btt:active{background:var(--accent)!important;border-color:var(--accent)!important}
  .btt:active svg{stroke:#1C1C1A!important}
}


/* -- 8. breakpoints ------------------------------------------------------
   Two boundaries only: 1024 tablet, 767 phone. The source pages carried both
   767 and 768 for the same intent.
   CHANGED: the footer's phone rules moved from 768 to 767 so the footer and
   the nav collapse at the same width. The only viewport affected is exactly
   768px wide, where the footer now shows the tablet two-column layout instead
   of the phone one-column layout, matching the nav, which is still desktop
   at that width.
   ------------------------------------------------------------------------ */
@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr}
}

@media(max-width:767px){
  nav,
  nav#nav,nav#sitenav,nav#main-nav{
    flex-direction:row!important;align-items:center!important;
    justify-content:space-between!important;padding:10px 20px!important;gap:12px!important;
  }
  nav#nav .nav-logo,nav#sitenav .nav-logo,nav#main-nav .nav-logo{margin-left:0!important}
  nav#nav .nav-right,nav#sitenav .nav-right,nav#main-nav .nav-right{display:none!important}
  nav#nav .nav-links,nav#sitenav .nav-links,nav#main-nav .nav-links{display:none!important}
  nav#nav .nav-license,nav#sitenav .nav-license,nav#main-nav .nav-license{display:none!important}
  .nav-links,.nav-book{display:none}
  .nav-hamburger{display:flex!important}
  nav#nav .nav-logo svg,nav#sitenav .nav-logo svg,nav#main-nav .nav-logo svg{
    width:200px!important;height:93px!important;display:block;
  }

  footer{padding:36px 24px}
  .footer-top{grid-template-columns:1fr;padding:40px 24px 32px;gap:36px}
  .footer-bottom{padding:16px 24px;flex-direction:column;align-items:flex-start}
}

@media(max-width:390px){
  nav#nav .nav-logo svg,nav#sitenav .nav-logo svg,nav#main-nav .nav-logo svg{
    width:170px!important;height:79px!important;
  }
}


/* -- 9. light-top pages --------------------------------------------------
   The chrome is transparent at rest because V4 pages open on a dark
   photographic hero. A page whose first section is light (the insight index)
   has nothing to be transparent over: the nav links, the logo strokes and
   ARCHITECT are all light greys on the offwhite ground, so the nav reads as
   empty. Add class="light-top" to <body> on those pages and the chrome shows
   the charcoal the rest of the site scrolls into, from the top.
   This is scoped to the class on purpose. Never give nav a fixed colour
   globally - that destroys the transparent-at-rest behaviour everywhere else.
   ------------------------------------------------------------------------ */
body.light-top nav#nav,body.light-top nav#sitenav,body.light-top nav#main-nav{
  background:rgba(28,28,26,.80)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:0.5px solid rgba(211,209,199,.08)!important;
}

/* ---- One chrome geometry for every page. The landing and project pages use
     padding:10px 48px; the homepage was on 16px 64px from the core file and
     the insight pages on 16px clamp(20px,5vw,64px), so the logo sat at three
     different x positions and the nav links at three different spacings. The
     landing-page figure wins, because the ADU hero pane measures its left edge
     from .nav-right and the two have to agree. Phone padding is unchanged -
     the 767 rules still set 10px 20px. ---- */
nav,nav#nav,nav#sitenav,nav#main-nav{padding:10px 48px}
.nav-links{align-items:center}

/* ---- Nav item spacing. The landing pages space the links with the flex gap
     alone: .nav-links{gap:28px} and nothing else. The core additionally
     carried .nav-item + .nav-item{margin-left:28px}, which doubled the space
     to 56px on every page that links this file - the homepage. The landing
     page is the reference, so the extra margin goes. ---- */
.nav-item + .nav-item{margin-left:0}
.nav-links{gap:28px;align-items:center}

/* ================= CHROME GEOMETRY - ONE DEFINITION =================
   The nav link block spans exactly the width of the hero overlay card:
   from 55% of the viewport to the --inset right margin. The card is
   left:55%; right:var(--inset), so the two share both edges.

   - nav padding is var(--inset), not 48px, so the Book a call button and the
     card end on the same line. They did not before.
   - .nav-right is given that exact width and space-between, so the links
     distribute across the card width instead of sitting at their natural
     spacing. Adding or removing a link redistributes; it does not shift the
     block.
   - logo: clamp(58px,7.5vw,104px), flush to the same --inset on the left.
   This block is the reference for every page on the site.
   ==================================================================== */
nav,nav#nav,nav#sitenav,nav#main-nav{
  padding:10px var(--inset,64px);
  display:flex;align-items:center;justify-content:space-between;
}
nav .nav-logo,nav#nav .nav-logo,nav#sitenav .nav-logo,nav#main-nav .nav-logo{
  line-height:0;margin-left:0;flex:0 0 auto;
}
nav .nav-logo svg,nav#nav .nav-logo svg,nav#sitenav .nav-logo svg,nav#main-nav .nav-logo svg{
  height:clamp(58px,7.5vw,104px);width:auto;display:block;
}
nav .nav-right{
  width:calc(45% - var(--inset,64px));
  flex:0 0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:0;
}
nav .nav-links{
  flex:1 1 auto;display:flex;align-items:center;
  justify-content:space-between;gap:0;
}
nav .nav-item + .nav-item{margin-left:0}
nav .nav-links + .nav-book{margin-left:28px;flex:0 0 auto}
@media(max-width:1100px){
  nav .nav-right{width:auto}
  nav .nav-links{gap:22px;justify-content:flex-end}
}

/* ---- Alignment correction. width:calc(45% - var(--inset)) was wrong: a
     percentage width resolves against the nav's CONTENT box, which is already
     inset by the padding, so the block started about 57px right of the card.
     Position the block instead. left/right on an absolutely positioned child
     resolve against the nav's PADDING box, which is the full viewport - the
     same basis the card uses - so left:55% here and left:55% on the card are
     the same line, and right:var(--inset) matches on both. ---- */
nav .nav-right{
  position:absolute;left:55%;right:var(--inset,64px);width:auto;
  top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:space-between;gap:0;
}
nav .nav-links{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:0}
nav .nav-links + .nav-book{margin-left:28px;flex:0 0 auto}
@media(max-width:1100px){
  nav .nav-right{position:static;transform:none;left:auto;right:auto;width:auto}
  nav .nav-links{gap:22px;justify-content:flex-end}
}

/* ---- Phone: hamburger, never the link block. The alignment block above set
     display:flex on nav .nav-right at every width, which outranked any plain
     display:none a page happened to carry, so the desktop links printed over
     the logo on phones. Restate the phone rule here, for all three nav ids,
     with the hamburger, so it travels with the block that broke it. ---- */
@media(max-width:767px){
  nav .nav-right,nav#nav .nav-right,nav#sitenav .nav-right,nav#main-nav .nav-right{
    display:none!important;position:static!important;
  }
  nav .nav-links,nav#nav .nav-links,nav#sitenav .nav-links,nav#main-nav .nav-links{display:none!important}
  nav .nav-license,nav#nav .nav-license,nav#sitenav .nav-license,nav#main-nav .nav-license{display:none!important}
  nav .nav-hamburger,nav#nav .nav-hamburger,nav#sitenav .nav-hamburger,nav#main-nav .nav-hamburger{
    display:flex!important;
  }
  nav,nav#nav,nav#sitenav,nav#main-nav{
    padding:10px 20px!important;justify-content:space-between!important;
  }
}


/* ==========================================================================
   10-13. PAGE PATTERNS - consolidated 15 Sep 2026 from the fixes of 14 Sep.
   These were page-local patches on v4-adu.html and v4-garden-under-story.html.
   Values below are the EFFECTIVE values those patch layers produced, collapsed
   to one rule each. Where the page patches used !important, so does this, so
   a page that still carries its older base rules renders the same.
   ========================================================================== */

/* -- 10. hero pattern -------------------------------------------------------
   One clipped box. Image layers and scrim at inset:0 inside it. Content on
   top. The box is the only thing sized to the viewport; nothing inside it is.
   RULE: when the image and the scrim disagree, make them the same box.
   Height and min-height stay page-level (homepage 600, project 620, phone
   variants), as do --veil values. The pane never lives inside .hero: it sits
   in .hero-wrap, floats over the hero on desktop and follows it on phone.
   Never set overflow:visible on .hero at any width - the frames drift at
   scale(1.1) and will paint past the scrim. ------------------------------- */
.hero-wrap{position:relative}
/* Only heroes that are photo heroes (they carry a scrim). A text header that
   happens to be called .hero, like the resources hub, is left alone. :where()
   keeps specificity at zero so page-level hero rules still win. */
:where(.hero:has(.hero-veil)){position:relative;overflow:hidden;display:flex;align-items:flex-end}
.hero-veil{position:absolute;inset:0;z-index:1}

/* Phone photo heroes run behind Safari's toolbars (Lou, 15 Sep: the photo
   stopped at the toolbar and the next band showed through as a line). The
   hero is at least the large viewport (100lvh, toolbars hidden); the words
   are lifted by the toolbar difference (100lvh - 100svh) so they still end
   above the toolbar on first load. Each page keeps its own padding. Where
   lvh and svh are equal (desktop browsers, test browsers) nothing moves.
   Specificity (0,2,1) beats the page and landing hero rules. */
@media (max-width:900px){
  body .hero:has(.hero-veil){height:auto!important;min-height:max(560px,100lvh)!important}
  body .hero:has(.hero-veil) > .hero-content{margin-bottom:calc(100lvh - 100svh)!important}
}

/* landing-page hero (.svc-hero): the homepage hero, applied to a frame stack */
.hero.svc-hero{
  position:relative!important;height:100svh!important;min-height:600px!important;
  overflow:hidden!important;display:flex!important;align-items:flex-end!important;
}
.svc-hero .hero-series{
  position:absolute!important;inset:0!important;width:auto!important;height:auto!important;
  overflow:visible!important;transform:none!important;animation:none!important;z-index:0!important;
}
.svc-hero .hero-frame{
  position:absolute!important;inset:0!important;width:auto!important;height:auto!important;
  background-size:cover!important;background-position:center!important;
}
.svc-hero .hero-series::after{display:none!important}
.svc-hero .hero-veil{
  display:block!important;position:absolute!important;inset:0!important;
  width:auto!important;height:auto!important;min-height:0!important;z-index:1!important;
}
.svc-hero .hero-content{
  position:relative!important;top:auto!important;left:auto!important;right:auto!important;
  height:auto!important;min-height:0!important;z-index:2!important;width:100%;
  padding:0 var(--inset) 40px!important;
}
.svc-hero .hero-credit{z-index:3!important}

/* -- 11. grid tracks --------------------------------------------------------
   1fr means minmax(auto,1fr): a child that will not shrink widens the track
   past the container, eats the right padding and starts a sideways pan on
   phone. min-width:0 on the children is the same fix as minmax(0,1fr) in
   every template, without restating each page's column counts. :where()
   keeps specificity at zero so a page can still set a real min-width. ----- */
:where(.three,.close,.ba-grid,.pc,.facts,.proof,.img-grid,
  .work-grid,.about-grid,.ctc-answers,.ctc-grid,.ctc-optwrap,.approach-box,
  .buy-inner,.tst-grid,.contact-inner,.form-row,
  .ins-grid,.tiles,main.grid,.footer-top) > *{min-width:0}

/* -- 12. landing-page hero pane ---------------------------------------------
   Anchored to the bottom of the hero (above the credit line), 55% of the
   viewport to --inset (the same edges as .nav-right). It is as tall as its
   copy and never taller than the space under the nav; if the copy does not
   fit, v4-core.js drops the quote, then the body. The glass is 80% white with a
   10px blur so the bright gold eyebrow and quote emphasis read (Lou, 15 Sep); at the old
   55% the gold disappeared into the photo.
   COPY BUDGET for every landing page: eyebrow, one lead line, one body
   paragraph of about 320 characters, one short quote, four jump links. Over
   that it clips - which is the signal to cut the copy, not to loosen the
   frame. The hero door label must match the homepage door that leads here. */
.hero-aside{
  position:absolute!important;z-index:4!important;
  top:auto!important;bottom:104px!important;
  max-height:calc(100svh - var(--navh,150px) - 130px)!important;
  left:55%!important;right:var(--inset)!important;
  width:auto!important;max-width:none!important;height:auto!important;
  overflow:hidden!important;display:flex!important;flex-direction:column!important;
  padding:clamp(24px,2.3vw,34px)!important;
  opacity:1!important;animation:none!important;
}
.hero-aside .svc-ey{color:var(--accent)!important;font-weight:500!important}
.hero-aside .svc-lead{margin-bottom:16px!important;line-height:1.24!important}
.hero-aside .svc-body{font-size:16px!important;line-height:1.66!important;margin-bottom:0!important}
.hero-aside .hero-quote{margin-top:24px!important;padding-top:20px!important}
.hero-aside .close-q,
.hero-aside .hero-quote .close-q{
  font-size:clamp(17px,1.35vw,21px)!important;line-height:1.5!important;
  font-weight:300!important;color:#1C1C1A!important;
}
.hero-aside .close-lab,
.hero-aside .hero-quote .close-lab{color:#5f5e58!important;font-weight:400!important}
.hero-aside .close-q em,
.hero-aside .hero-quote .close-q em{color:var(--accent)!important;font-weight:400!important;font-style:normal!important}
.hero-aside .close-cite,
.hero-aside .hero-quote .close-cite{
  color:#5f5e58!important;font-size:10.5px!important;font-weight:400!important;
}
.hero-aside .hero-jump{margin-top:8px!important;padding-top:18px!important}
.hero-aside .hero-jump a{padding-top:9px!important;padding-bottom:9px!important}
@media(max-width:900px){
  .hero-aside{
    position:static!important;top:auto!important;bottom:auto!important;
    left:auto!important;right:auto!important;max-height:none!important;
    overflow:visible!important;display:block!important;
    padding:28px var(--inset) 30px!important;
  }
  .hero-aside .hero-quote{margin-top:24px!important}
}

/* -- 13. section pager ------------------------------------------------------
   A 40px chevron, bottom right, at every width. One tap or click advances to
   the next section boundary; the script is assets/v4-core.js and each page
   lists its stops on the script tag. It does NOT listen to scrolling - snap
   (twice) and a fling script all guessed at intent and fought a reading
   scroll. Where the page has a back-to-top button it stacks directly above
   it on the same centre line (.btt is 44px at 36px/36px), so the two never
   overlap. Both carry the same safe-area term, so iPhone Safari's toolbar
   moving in and out shifts them together and the gap stays 10px (Lou, 15
   Sep: the gap varied because only the pager had it). ------------------- */
.secnav{
  position:fixed;right:38px;bottom:calc(36px + env(safe-area-inset-bottom,0px));
  z-index:180;width:40px;height:40px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0.5px solid rgba(211,209,199,.28);border-radius:50%;
  background:rgba(28,28,26,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  cursor:pointer;-webkit-appearance:none;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s,transform .3s,background .2s,border-color .2s;
}
body:has(.btt) .secnav{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
.secnav svg{width:15px;height:15px;stroke:rgba(240,237,232,.72);fill:none;stroke-width:1.4}
.secnav.on{opacity:1;transform:translateY(0);pointer-events:auto}
.secnav:active{background:rgb(var(--accent-rgb) / .9);border-color:var(--accent)}
.secnav:active svg{stroke:#1C1C1A}
@media(hover:hover){
  .secnav:hover{background:rgb(var(--accent-rgb) / .9);border-color:var(--accent)}
  .secnav:hover svg{stroke:#1C1C1A}
}
@media(prefers-reduced-motion:reduce){ .secnav{transition:none} }

/* On phone the pager is the "there is more below" cue, so the text cue goes -
   it printed over the project name - and the hero name line keeps clear of
   the button (38px inset + 40px button). */
@media(max-width:767px){
  .scroll-hint{display:none!important}
  .hero .hero-name{padding-right:64px}
}

/* Project credits sit on the light ground, so a credit link reads like the
   credit text beside it, with the accent underline as the only cue. The live
   pages' rgba(211,209,199,.62) was written for a dark ground (about 1.3:1
   here). Hover uses the darker gold that passes on light. */
.proj-credits a.credit-link{
  color:rgba(28,28,26,.82);text-decoration:none;
  border-bottom:0.5px solid rgb(var(--accent-rgb) / .7);
}
.proj-credits a.credit-link:hover{color:#1C1C1A;border-bottom-color:#1C1C1A}

/* Project recognition (awards, jury quotes, publications) sits in the light
   closing band on V4. The live pages styled it for a dark ground - white
   text and logos forced white with brightness(2.4) - which is invisible
   here. One light-ground definition for every project page. */
.rec-mark{height:22px;width:auto;display:block;margin-bottom:18px;opacity:.7;filter:brightness(0)}
.rec-mark-aiadc{height:16px}
.rec-entry{margin-bottom:26px;padding-bottom:26px;border-bottom:0.5px solid rgba(28,28,26,.12)}
.rec-entry:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.rec-kind{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5f5e58;font-weight:400;margin-bottom:8px}
.rec-title{font-size:16px;font-weight:400;color:#1C1C1A;line-height:1.4;margin:0 0 10px}
.rec-quote{font-size:clamp(17px,1.8vw,21px);font-weight:300;line-height:1.55;color:rgba(28,28,26,.82);margin:0 0 10px}
.rec-src{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5f5e58;margin:0}
.rec-credit{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:0.5px solid rgba(28,28,26,.12)}
.rec-credit-logo{width:20px;height:20px;object-fit:contain;flex-shrink:0;opacity:.7;filter:brightness(0)}
.rec-credit-text{font-size:11px;font-weight:300;line-height:1.5;color:#5f5e58}

/* Project award card: the homepage recognition pull, as it reads on the light
   ground (.light-run .rec-pull) - gold rule, faint gold panel, the award's own
   mark, the award name in quotes, and the source line. Wording and logos are
   generated from the homepage list so the two never disagree. */
.rec-award{display:flex;align-items:center;gap:22px;padding:22px 26px;margin:0 0 26px;
  border-left:2px solid var(--accent);background:rgb(var(--accent-rgb) / .05)}
.rec-award + .rec-award{margin-top:-12px}
.rec-award-logo{flex-shrink:0;height:36px;width:auto;max-width:90px;object-fit:contain;
  filter:invert(1) grayscale(1);opacity:.75}
.rec-award-text{min-width:0;display:flex;flex-direction:column;justify-content:center}
.rec-award-name{font-size:clamp(18px,2.2vw,26px);font-weight:200;color:#1C1C1A;
  letter-spacing:-.2px;line-height:1.4;margin-bottom:10px}
.rec-award-src{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#888780}
.close-cite + .rec-award{margin-top:30px}
@media(max-width:767px){
  .rec-award{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 20px}
  .rec-award-logo{height:28px;max-width:80px}
}

/* Footer bottom bar: copyright, licence line and Privacy/Terms in the brand
   gold, the same as the footer tagline (they were rgba(240,237,232,.22), about
   1.9:1). Written for every footer id so pages with their own footer rules
   follow it. Links go light on hover, since gold is now their resting colour. */
footer#footer .footer-bottom, footer#footer .footer-bottom span, footer#footer .footer-bottom a,
footer#sitefooter .footer-bottom, footer#sitefooter .footer-bottom span, footer#sitefooter .footer-bottom a{
  color:var(--accent)!important;
}
footer#footer .footer-bottom a:hover, footer#sitefooter .footer-bottom a:hover{color:var(--offwhite)!important}

/* Landing-page hero on desktop: the headline block wraps before the pane,
   which starts at 55% of the viewport. At 1280px wide the headline ran
   underneath it. */
@media(min-width:901px){
  .svc-hero .hero-content{padding-right:calc(45% + 32px)!important}
}
/* The pane is a fixed frame whose height follows the window. When its copy
   does not fit, v4-core.js drops the quote (fit-1) and then the body
   (fit-2), so the eyebrow, lead and the four jump links always show. */
.hero-aside.fit-1 .hero-quote{display:none!important}
.hero-aside.fit-2 .svc-body{display:none!important}
/* Buttons wrap on phone instead of pushing the page sideways. */
@media(max-width:767px){
  .cta-btn{white-space:normal!important;max-width:100%;flex-wrap:wrap}
}

/* "See all projects" under the landing-page proof grid sits on the light band:
   the darker gold that reads on light (bright gold was 2.1:1 here). */
.proof-more a{color:#1C1C1A!important}
.proof-more a:hover{color:#1C1C1A!important}

/* Phone landing hero: the rotating photo credit collided with the page's own
   name line. The name line stays; the credit is desktop only. */
@media(max-width:767px){
  .svc-hero .hero-credit{display:none!important}
}

/* No dark mustard on light grounds (Lou, 15 Sep). Every small label in the
   light bands reads the same grey; emphasis inside quotes is near-black at a
   heavier weight rather than a colour; links and icons are near-black with a
   grey underline. Gold stays on dark grounds and as rules and hover fills. */
.close .close-lab,.proj-credits .proj-credits-h,.rec-kind,.hero-aside .close-lab{
  color:#5f5e58!important;font-weight:400!important;font-size:10px!important;letter-spacing:.16em!important}
.close-q em,.quote-panel em{font-style:normal;font-weight:500}

/* Landing pane glass on desktop: 80% white with a light 10px blur, so the
   room behind reads as frosted glass and the gold still reads (Lou chose
   option B, 15 Sep; 55% lost the gold, 88% with 26px blur looked solid). */
@media(min-width:901px){
  html body .hero-aside{background:rgba(240,237,232,.80)!important;
    backdrop-filter:blur(10px) saturate(1.1)!important;-webkit-backdrop-filter:blur(10px) saturate(1.1)!important}
}

/* -- Logo v2 (docs/brand-logo-standards-v2.md) --------------------------------
   The header lockup is the drawn file brand/logo-v2/svg/lba-lockup-dark.svg.
   Circle size matches the old header at 1440 (98px); the lockup never renders
   below the 180px minimum width (85px tall). */
nav .nav-logo img.nav-logo-img{display:block;width:auto;max-width:none;height:clamp(85px,7.25vw,100px)}
@media(max-width:768px){ nav .nav-logo img.nav-logo-img{height:90px} }
@media(max-width:390px){ nav .nav-logo img.nav-logo-img{height:85px} }
/* Over a photo hero the header shows the white lockup; when the bar is drawn
   (nav.scrolled) the dark lockup fades in over it. Pages with a solid bar carry
   the dark lockup only. */
nav .nav-logo{position:relative}
nav .nav-logo img.nav-logo-on-bar{position:absolute;left:0;top:0;opacity:0}
nav .nav-logo img.nav-logo-on-photo,nav .nav-logo img.nav-logo-on-bar{transition:opacity .3s ease}
nav.scrolled .nav-logo img.nav-logo-on-photo{opacity:0}
nav.scrolled .nav-logo img.nav-logo-on-bar{opacity:1}
/* Phone menu: the dark lockup, never under 180px wide */
.mobile-menu .mm-mark img{display:block;height:85px;width:auto;max-width:none}

/* Header bar and button outlines match the lockup (Lou, 17 Sep).
   The drawn bar is solid charcoal: at 55% it turned mid-grey over light bands
   and the lockup's ring and descriptor faded (standards: solid colours only).
   This is the bar once scrolled and on light-top pages; the transparent header
   over a photo hero is unchanged. */
nav.scrolled,nav#nav.scrolled,nav#sitenav.scrolled,nav#main-nav.scrolled,
body.light-top nav,body.light-top nav#nav,body.light-top nav#sitenav,body.light-top nav#main-nav{
  background:#1C1C1A!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
/* Menu and Book a call outlines: the circle's line. Stone (#888780) on the bar,
   white while the white lockup sits on a photo. */
html body nav .nav-hamburger,html body nav#nav .nav-hamburger,html body nav#sitenav .nav-hamburger,html body nav#main-nav .nav-hamburger,html body nav .nav-book,html body nav#nav .nav-book,html body nav#sitenav .nav-book,html body nav#main-nav .nav-book,html body .mobile-menu .mm-close{border-color:#888780!important}
html body:has(img.nav-logo-on-photo) nav:not(.scrolled) .nav-hamburger,html body:has(img.nav-logo-on-photo) nav#nav:not(.scrolled) .nav-hamburger,html body:has(img.nav-logo-on-photo) nav#sitenav:not(.scrolled) .nav-hamburger,html body:has(img.nav-logo-on-photo) nav#main-nav:not(.scrolled) .nav-hamburger,
html body:has(img.nav-logo-on-photo) nav:not(.scrolled) .nav-book,html body:has(img.nav-logo-on-photo) nav#nav:not(.scrolled) .nav-book,html body:has(img.nav-logo-on-photo) nav#sitenav:not(.scrolled) .nav-book,html body:has(img.nav-logo-on-photo) nav#main-nav:not(.scrolled) .nav-book{border-color:#FFFFFF!important}
html body nav .nav-book:hover,html body nav#nav .nav-book:hover,html body nav#sitenav .nav-book:hover,html body nav#main-nav .nav-book:hover{border-color:var(--accent)!important}

/* Hover: the circle picks up gold, as the old header did. The lockup is a file,
   so the ring is drawn over it, on the circle's own centre and radius
   (cx 90, cy 100, r 68 in the 20.2 30.4 294.6 139.2 viewBox). */
nav .nav-logo::after{content:"";position:absolute;left:23.69%;top:50%;width:46.16%;aspect-ratio:1;
  transform:translate(-50%,-50%);border:2px solid var(--accent);border-radius:50%;
  opacity:0;transition:opacity .3s ease;pointer-events:none}
nav .nav-logo:hover::after,nav .nav-logo:focus-visible::after{opacity:1}