/* ============================================================================
   UTMOST BUILDS — PREMIUM REFINEMENT LAYER
   Loaded last. This is the design system layer, not a patch file.
   Everything here is a deliberate decision recorded in
   FINAL_REFINEMENT_REPORT.md. New design work belongs in THIS file or,
   better, folded back into /style.css — not in a new "hotfix" stylesheet.

   Principles applied:
     · One accent (brass), spent sparingly.
     · Photography is the subject; chrome gets out of its way.
     · One motion language. No 3D, no float loops, no scroll-jacking.
     · Restraint over decoration. Sharp edges, hairlines, real whitespace.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. MOTION — one language for the entire site.
   Replaces: hero sidecard rotateY, project-card perspective/rotateX tilt,
   material-board rotateY/rotateX, .floorplan-model float loops, proof-card
   sideways slide. Those read as 2010s "premium template" effects and were the
   single loudest AI-generated tell in the interaction design.
   --------------------------------------------------------------------------- */
body.utmost-launch-final.utmost-final-luxury .project-card,
body.utmost-launch-final.utmost-final-luxury .service-card,
body.utmost-launch-final.utmost-final-luxury .premium-atelier-card,
body.utmost-launch-final.utmost-final-luxury .proof-card,
body.utmost-launch-final.utmost-final-luxury .case-study-card,
body.utmost-launch-final.utmost-final-luxury .hero-sidecard,
body.utmost-launch-final.utmost-final-luxury .material-board,
body.utmost-launch-final.utmost-final-luxury .floorplan-model{
  transform:none !important;
  animation:none !important;
  transform-style:flat !important;
  perspective:none !important;
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
/* The one hover gesture: a small, confident lift. Nothing else moves. */
body.utmost-launch-final.utmost-final-luxury .project-card:hover,
body.utmost-launch-final.utmost-final-luxury .service-card:hover,
body.utmost-launch-final.utmost-final-luxury .case-study-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 30px 64px rgba(10,31,25,.15);
  border-color:rgba(155,116,68,.34);
}
body.utmost-launch-final.utmost-final-luxury .proof-card:hover{transform:none !important;border-color:rgba(213,187,134,.42)}
/* Image warmth on hover — slower and shallower than before (was .55–.65s / 1.05). */
body.utmost-launch-final.utmost-final-luxury .project-card:hover img,
body.utmost-launch-final.utmost-final-luxury .service-card:hover img,
body.utmost-launch-final.utmost-final-luxury .case-study-card:hover img{transform:scale(1.028)}
body.utmost-launch-final.utmost-final-luxury .project-image img,
body.utmost-launch-final.utmost-final-luxury .service-image img,
body.utmost-launch-final.utmost-final-luxury .case-study-card img{transition:transform .9s var(--ease)}

/* Reveal: shorter travel, quicker settle. Content should never be the
   animation's hostage. */
body.utmost-launch-final.utmost-final-luxury .reveal{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.motion-ready .reveal{transform:translateY(14px)}

/* First paint: above-the-fold hero content is never hidden by the reveal
   system. This fixes the "ghost headline" — the hero H1 could sit at
   opacity 0 for up to 1.8s on a slow connection while theme.js booted. */
.motion-ready .hero .hero-content,
.motion-ready .hero .hero-sidecard,
.motion-ready .hero-content.reveal,
.motion-ready .hero-sidecard.reveal,
.motion-ready .case-study-hero .reveal,
.motion-ready .page-hero .reveal{opacity:1 !important;transform:none !important}

@media(prefers-reduced-motion:reduce){
  body.utmost-launch-final.utmost-final-luxury *,body.utmost-launch-final.utmost-final-luxury *::before,body.utmost-launch-final.utmost-final-luxury *::after{animation:none !important;transition:none !important}
  body.utmost-launch-final.utmost-final-luxury .reveal{opacity:1 !important;transform:none !important}
}

/* ---------------------------------------------------------------------------
   2. HERO — let the photograph be visible.
   The previous scrim ran rgba(3,10,8,.98) → .83 → .27 across the frame, which
   left the hero image almost entirely obscured on a site whose whole premise
   is real project photography. This replaces the wall of dark with a
   directional wash (legible type on the left) plus a soft base gradient.
   --------------------------------------------------------------------------- */
body.utmost-launch-final.utmost-final-luxury .hero::before{
  background:
    linear-gradient(90deg,
      rgba(6,17,14,.86) 0%,
      rgba(6,17,14,.66) 30%,
      rgba(6,17,14,.28) 58%,
      rgba(6,17,14,.06) 82%,
      rgba(6,17,14,0) 100%);
}
body.utmost-launch-final.utmost-final-luxury .hero::after{
  background:
    linear-gradient(0deg, rgba(6,17,14,.74) 0%, rgba(6,17,14,.16) 34%, rgba(6,17,14,0) 62%),
    linear-gradient(180deg, rgba(6,17,14,.42) 0%, rgba(6,17,14,0) 26%);
}
/* The brass graph-paper overlay was decorative noise sitting on top of
   photography. Removed. */
body.utmost-launch-final.utmost-final-luxury .hero-gridline{display:none !important}

/* Focal point control. Individual pages set --hero-focus (e.g. "50% 38%")
   inline so a crop can be corrected per image without touching this file. */
body.utmost-launch-final.utmost-final-luxury .hero-media img,
body.utmost-launch-final.utmost-final-luxury .case-study-hero-media img,
body.utmost-launch-final.utmost-final-luxury .page-hero-media img{object-position:var(--hero-focus,50% 50%) !important}

/* Hero panel: flattened off its 3D rotation, reduced to a hairline card. */
body.utmost-launch-final.utmost-final-luxury .hero-sidecard{
  background:rgba(6,17,14,.52);
  border:1px solid var(--line-brass-dark);
  backdrop-filter:blur(14px);
  box-shadow:none;
}
body.utmost-launch-final.utmost-final-luxury .hero h1{line-height:.98;letter-spacing:-.04em}
body.utmost-launch-final.utmost-final-luxury .hero-copy{max-width:38ch}

/* ---------------------------------------------------------------------------
   3. ACCENT DISCIPLINE — brass is currency, not wallpaper.
   The primary CTA was a two-stop gold gradient with a coloured glow shadow.
   Gradient fills and coloured glows are the fastest way to make a premium
   palette look generated. Solid brass, hairline edge, no glow.
   --------------------------------------------------------------------------- */
body.utmost-launch-final.utmost-final-luxury .btn{
  border-radius:0;
  font-family:var(--mono);
  font-size:.63rem;
  font-weight:500;
  letter-spacing:.15em;
  min-height:56px;
  padding:16px 30px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
body.utmost-launch-final.utmost-final-luxury .btn::after{font-size:.95rem;opacity:.75}
body.utmost-launch-final.utmost-final-luxury .btn:hover{transform:translateY(-2px)}
body.utmost-launch-final.utmost-final-luxury .btn-primary{
  background:var(--brass-500);
  border:1px solid var(--brass-500);
  color:#0a1a15;
  box-shadow:none;
}
body.utmost-launch-final.utmost-final-luxury .btn-primary:hover{background:var(--brass-400);border-color:var(--brass-400);box-shadow:none}
/* Secondary is a true ghost button — the Porsche/Bugatti register. */
body.utmost-launch-final.utmost-final-luxury .btn-outline{
  background:transparent;
  border:1px solid rgba(213,187,134,.5);
  color:#fff;
  backdrop-filter:none;
}
body.utmost-launch-final.utmost-final-luxury .btn-outline:hover{border-color:var(--brass-300);background:rgba(213,187,134,.09)}
body.utmost-launch-final.utmost-final-luxury .btn-dark{background:transparent;border:1px solid var(--green-800);color:var(--green-800)}
body.utmost-launch-final.utmost-final-luxury .btn-dark:hover{background:var(--green-900);color:#fff;border-color:var(--green-900)}
/* Header CTA: quiet on a dark bar; it does not need to shout. */
body.utmost-launch-final.utmost-final-luxury .site-header .header-cta{
  background:transparent;border:1px solid rgba(213,187,134,.42);color:var(--brass-300);min-height:44px;
}
body.utmost-launch-final.utmost-final-luxury .site-header .header-cta:hover{border-color:var(--brass-300);background:rgba(213,187,134,.1)}

/* Hairline rules — the other sanctioned use of brass. */
body.utmost-launch-final.utmost-final-luxury .section-head{border-bottom:1px solid var(--line-brass);padding-bottom:26px}
body.utmost-launch-final.utmost-final-luxury .services .section-head,
body.utmost-launch-final.utmost-final-luxury .why .section-head,
body.utmost-launch-final.utmost-final-luxury .cta .section-head{border-bottom-color:var(--line-brass-dark)}

/* ---------------------------------------------------------------------------
   4. CARDS & SURFACES — flatten the decoration.
   --------------------------------------------------------------------------- */
/* The three "Utmost Standard" cards were translucent glass panels with a gold
   radial wash, each rotated on a different Y axis and offset vertically. Three
   different rotations reads as arbitrary, not composed. They become three plain
   columns under a hairline — the same information, stated calmly. */
body.utmost-launch-final.utmost-final-luxury .premium-atelier-card,
body.utmost-launch-final.utmost-final-luxury .premium-atelier-card,
body.utmost-launch-final.utmost-final-luxury .premium-atelier-card{
  background:none !important;
  border:0 !important;
  border-top:1px solid rgba(213,187,134,.30) !important;
  min-height:0 !important;
  padding:24px 0 0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  overflow:visible !important;
}
/* the gold radial wash sitting on every card */
body.utmost-launch-final.utmost-final-luxury .premium-atelier-card::before{display:none !important;content:none !important}
body.utmost-launch-final.utmost-final-luxury .premium-atelier-cards{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(22px,2.6vw,40px) !important;
  perspective:none !important;
  align-items:start !important;
}
body.utmost-launch-final.utmost-final-luxury .premium-atelier-card>span{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  color:var(--brass-300) !important;margin-bottom:16px !important;
}
body.utmost-launch-final.utmost-final-luxury .premium-atelier-card h3{font-size:var(--fs-sub) !important;margin-bottom:10px;color:#fff}
body.utmost-launch-final.utmost-final-luxury .premium-atelier-card p{color:rgba(255,255,255,.62) !important;font-size:.86rem;line-height:1.72}
/* graph-paper overlay on the band — same decorative noise as the hero gridline */
body.utmost-launch-final.utmost-final-luxury .premium-atelier::before{display:none !important}
@media(max-width:940px){body.utmost-launch-final.utmost-final-luxury .premium-atelier-cards{grid-template-columns:1fr 1fr !important}}
@media(max-width:650px){body.utmost-launch-final.utmost-final-luxury .premium-atelier-cards{grid-template-columns:1fr !important;gap:6px !important}}

/* Service cards: the forced 92px paragraph height created ragged internal
   whitespace on every card whose copy was shorter than the tallest one. */
body.utmost-launch-final.utmost-final-luxury .service-body p{min-height:0 !important}
body.utmost-launch-final.utmost-final-luxury .service-card{box-shadow:0 18px 44px rgba(0,0,0,.16);border:1px solid transparent}
body.utmost-launch-final.utmost-final-luxury .service-image{height:230px}

/* Project cards sit on paper with a hairline, not a drop-shadowed slab. */
body.utmost-launch-final.utmost-final-luxury .project-card{box-shadow:0 16px 40px rgba(10,31,25,.09);border:1px solid var(--line-brass)}
body.utmost-launch-final.utmost-final-luxury .project-image::after{background:linear-gradient(180deg,transparent 68%,rgba(6,17,14,.22))}

/* ---------------------------------------------------------------------------
   5. TYPOGRAPHIC RHYTHM
   --------------------------------------------------------------------------- */
body.utmost-launch-final.utmost-final-luxury .eyebrow{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.17em;color:var(--brass-600);margin-bottom:20px;
}
body.utmost-launch-final.utmost-final-luxury .lead{font-size:var(--fs-lead);line-height:1.75;max-width:62ch}
body.utmost-launch-final.utmost-final-luxury .section-head .lead{max-width:54ch}
/* Body copy measure — long lines were running past comfortable reading width
   in several one-column sections. */
body.utmost-launch-final.utmost-final-luxury .entry-content p,body.utmost-launch-final.utmost-final-luxury .narrow p,body.utmost-launch-final.utmost-final-luxury .project-story p{max-width:68ch}
body.utmost-launch-final.utmost-final-luxury h3{letter-spacing:-.02em}

/* ---------------------------------------------------------------------------
   6. NEW COMPONENT — BEFORE / AFTER COMPARISON
   The site's one signature interaction. Used only where genuine same-room,
   same-viewpoint pairs exist (Plano). Draggable divider, keyboard accessible,
   and degrades to a clean side-by-side pair with no JS.
   --------------------------------------------------------------------------- */
.ba{margin:0;display:grid;gap:14px}
.ba-frame{
  position:relative;overflow:hidden;background:var(--green-950);
  aspect-ratio:3/2;user-select:none;touch-action:pan-y;
}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-after{clip-path:inset(0 0 0 var(--ba-pos,50%))}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--ba-pos,50%);width:1px;background:var(--brass-300);
  transform:translateX(-.5px);z-index:3;pointer-events:none;
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);
  border:1px solid var(--brass-300);background:rgba(6,17,14,.45);backdrop-filter:blur(6px);
}
.ba-handle::before{
  content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  color:var(--brass-200);font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;
}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0;
}
.ba-range:focus-visible+.ba-handle::after{outline:2px solid var(--brass-200);outline-offset:3px}
.ba-tag{
  position:absolute;bottom:14px;z-index:2;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(6,17,14,.62);padding:7px 11px;backdrop-filter:blur(4px);
}
.ba-tag--before{left:14px}
.ba-tag--after{right:14px}
.ba-caption{font-size:.83rem;color:var(--muted);margin:0}
.ba-caption strong{color:var(--charcoal);font-weight:600}
/* No-JS / no-clip fallback: show both frames side by side. */
.no-ba .ba-frame{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.no-ba .ba-frame img{position:static;aspect-ratio:3/2}
.no-ba .ba-after{clip-path:none}
.no-ba .ba-handle,.no-ba .ba-range{display:none}
.no-ba .ba-tag{position:static;display:inline-block;margin-top:8px}

/* ---------------------------------------------------------------------------
   7. NEW COMPONENT — CASE-STUDY NARRATIVE
   Turns a tagged photo grid into a project story: condition → approach →
   outcome. Only facts already published on the site are used.
   --------------------------------------------------------------------------- */
.project-story{background:var(--paper);padding:clamp(64px,7vw,110px) 0}
.project-story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,80px);align-items:start}
.project-story-steps{display:grid;gap:0}
.project-story-step{
  display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start;
  padding:26px 0;border-top:1px solid var(--line-brass);
}
.project-story-step:last-child{border-bottom:1px solid var(--line-brass)}
.project-story-step>span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--brass-600);padding-top:6px;
}
.project-story-step h3{font-family:var(--serif);font-size:var(--fs-sub);margin:0 0 8px;letter-spacing:-.02em}
.project-story-step p{margin:0;font-size:.93rem;color:var(--muted);line-height:1.75}
.project-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line-brass);margin-top:34px}
.project-facts div{background:var(--paper);padding:20px 18px}
.project-facts dt{font-family:var(--mono);font-size:.57rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-600);margin-bottom:7px}
.project-facts dd{margin:0;font-family:var(--serif);font-size:1.28rem;line-height:1.2;color:var(--charcoal)}

/* ---------------------------------------------------------------------------
   8. NEW COMPONENT — PRACTICE / FOUNDER BLOCK (About)
   Editorial, architecture-practice register. Renders correctly whether or not
   a real portrait is supplied; no stock people, no placeholder faces.
   --------------------------------------------------------------------------- */
.practice{background:var(--ivory);padding:clamp(64px,7vw,110px) 0}
.practice-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,5vw,74px);align-items:center}
.practice-portrait{position:relative;background:var(--ivory-2);border:1px solid var(--line-brass);aspect-ratio:4/5;overflow:hidden}
.practice-portrait img{width:100%;height:100%;object-fit:cover}
.practice-statement p{font-family:var(--serif);font-size:clamp(1.5rem,2.3vw,2.15rem);line-height:1.32;letter-spacing:-.02em;color:var(--charcoal);max-width:24ch}
.practice-attrib{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-600);margin-top:26px}
.practice-detail{margin-top:22px;font-size:.95rem;color:var(--muted);line-height:1.78;max-width:56ch}

/* ---------------------------------------------------------------------------
   9. TRUST LINE — factual reassurance next to the form. Contains no claim
   that is not already published elsewhere on this site.
   --------------------------------------------------------------------------- */
.form-assurance{
  display:grid;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);line-height:1.6;
}
.form-assurance span{display:flex;gap:10px;align-items:baseline}
.form-assurance span::before{content:"—";color:var(--brass-500);flex:0 0 auto}

/* ---------------------------------------------------------------------------
   10. MOBILE — designed, not merely responsive.
   --------------------------------------------------------------------------- */
@media(max-width:940px){
  /* WCAG-comfortable touch targets. Measured 30–39 links per page under
     32px tall at 390px before this change. */
  body.utmost-launch-final.utmost-final-luxury .main-nav a{min-height:52px;display:flex;align-items:center}
  body.utmost-launch-final.utmost-final-luxury .footer-links a,
  body.utmost-launch-final.utmost-final-luxury .area-grid a,
  body.utmost-launch-final.utmost-final-luxury .utility a,
  body.utmost-launch-final.utmost-final-luxury .site-map-links a{min-height:44px;display:inline-flex;align-items:center}
  body.utmost-launch-final.utmost-final-luxury .text-link{min-height:44px;align-items:center}
  body.utmost-launch-final.utmost-final-luxury .btn{width:100%;min-height:54px}
  body.utmost-launch-final.utmost-final-luxury .hero-actions{display:grid;gap:10px}
}
@media(max-width:650px){
  /* Section rhythm was producing extreme scroll length on the long service
     pages (bathroom measured 30,098px tall at 390px wide). Tighter vertical
     padding and denser repeated modules cut that materially without
     collapsing the airy feel. */
  body.utmost-launch-final.utmost-final-luxury .section{padding:56px 0}
  body.utmost-launch-final.utmost-final-luxury .project-story{padding:52px 0}
  body.utmost-launch-final.utmost-final-luxury .practice{padding:52px 0}
  body.utmost-launch-final.utmost-final-luxury .hero{min-height:640px}
  body.utmost-launch-final.utmost-final-luxury .hero{min-height:min(640px,88vh)}
  body.utmost-launch-final.utmost-final-luxury .hero-content{padding:150px 0 54px}
  body.utmost-launch-final.utmost-final-luxury .hero h1{font-size:clamp(2.6rem,10.4vw,3.5rem);line-height:1.02}
  body.utmost-launch-final.utmost-final-luxury .hero-copy{font-size:.98rem}
  body.utmost-launch-final.utmost-final-luxury .capability{padding:18px 20px}
  body.utmost-launch-final.utmost-final-luxury .project-story-grid,
  body.utmost-launch-final.utmost-final-luxury .practice-grid{grid-template-columns:1fr;gap:28px}
  body.utmost-launch-final.utmost-final-luxury .project-story-step{grid-template-columns:38px 1fr;gap:14px;padding:20px 0}
  body.utmost-launch-final.utmost-final-luxury .section-head{padding-bottom:20px;margin-bottom:28px}
  body.utmost-launch-final.utmost-final-luxury .service-image{height:200px}
  body.utmost-launch-final.utmost-final-luxury .project-image{height:250px}
  /* Reading measure on small screens. */
  body.utmost-launch-final.utmost-final-luxury .lead,body.utmost-launch-final.utmost-final-luxury .entry-content p{max-width:none}
  .ba-frame{aspect-ratio:4/3}
  .practice-portrait{aspect-ratio:3/4;max-width:340px}
}

/* ---------------------------------------------------------------------------
   11. FOCUS VISIBILITY — the site had no explicit focus style, so keyboard
   users relied on the UA default, which is invisible against the dark bands.
   --------------------------------------------------------------------------- */
body.utmost-launch-final.utmost-final-luxury a:focus-visible,
body.utmost-launch-final.utmost-final-luxury button:focus-visible,
body.utmost-launch-final.utmost-final-luxury input:focus-visible,
body.utmost-launch-final.utmost-final-luxury select:focus-visible,
body.utmost-launch-final.utmost-final-luxury textarea:focus-visible,
body.utmost-launch-final.utmost-final-luxury [tabindex]:focus-visible{
  outline:2px solid var(--brass-300);
  outline-offset:3px;
}
body.utmost-launch-final.utmost-final-luxury .field input:focus,
body.utmost-launch-final.utmost-final-luxury .field select:focus,
body.utmost-launch-final.utmost-final-luxury .field textarea:focus{border-color:var(--brass-500);outline:none;box-shadow:0 0 0 3px rgba(176,141,87,.16)}

/* ---------------------------------------------------------------------------
   12. PROJECT LIGHTBOX — styling for the viewer that /assets/js/projects.js
   drives. The markup existed on 20 pages but the script it depends on was
   never present in the source tree (confirmed 404), so these panels have
   been inert. See FINAL_REFINEMENT_REPORT.md.
   --------------------------------------------------------------------------- */
.project-lightbox{
  position:fixed;inset:0;z-index:2000;display:none;
  background:rgba(4,12,10,.94);backdrop-filter:blur(10px);
}
.project-lightbox.is-open{display:grid;place-items:center}
.project-lightbox-dialog{
  position:relative;width:min(1180px,calc(100% - 40px));max-height:92vh;display:grid;gap:0;
}
.project-lightbox-media{background:var(--green-1000);display:grid;place-items:center;max-height:74vh;overflow:hidden}
.project-lightbox-media img{max-width:100%;max-height:74vh;width:auto;height:auto;object-fit:contain}
.project-lightbox-info{
  background:rgba(6,17,14,.9);border-top:1px solid var(--line-brass-dark);padding:20px 24px;color:#fff;
}
.project-lightbox-info [data-lightbox-meta]{font-family:var(--mono);font-size:.57rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-300);margin:0 0 8px}
.project-lightbox-info [data-lightbox-title]{font-family:var(--serif);font-size:1.5rem;line-height:1.15;margin:0 0 6px;letter-spacing:-.02em}
.project-lightbox-info .project-lightbox-caption{font-size:.82rem;color:rgba(255,255,255,.66);margin:0 0 4px;max-width:62ch}
.project-lightbox-info [data-lightbox-count]{font-family:var(--mono);font-size:.57rem;letter-spacing:.14em;color:rgba(255,255,255,.48);margin:10px 0 16px}
.project-lightbox-info .btn{width:auto;display:inline-flex}
.project-lightbox-close,
.project-lightbox-prev,
.project-lightbox-next{
  position:absolute;z-index:2;width:52px;height:52px;display:grid;place-items:center;
  background:rgba(6,17,14,.6);border:1px solid var(--line-brass-dark);color:var(--brass-200);
  font-size:1.1rem;cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.project-lightbox-close:hover,
.project-lightbox-prev:hover,
.project-lightbox-next:hover{border-color:var(--brass-300);background:rgba(6,17,14,.85)}
.project-lightbox-close{top:-60px;right:0}
.project-lightbox-prev{left:-64px;top:37vh}
.project-lightbox-next{right:-64px;top:37vh}
@media(max-width:1180px){
  .project-lightbox-prev{left:8px;top:auto;bottom:calc(26% + 10px)}
  .project-lightbox-next{right:8px;top:auto;bottom:calc(26% + 10px)}
  .project-lightbox-close{top:-56px}
}
@media(max-width:650px){
  .project-lightbox-dialog{width:calc(100% - 20px)}
  .project-lightbox-media,.project-lightbox-media img{max-height:56vh}
  .project-lightbox-info{padding:16px}
  .project-lightbox-info .lb-title{font-size:1.2rem}
}
body.utmost-launch-final.utmost-final-luxury.lightbox-open{overflow:hidden}

/* Before/after column inside the case-study story grid. */
.project-story-compare{display:grid;gap:30px}
@media(max-width:940px){.project-story-compare{gap:22px}}

/* Practice block renders as a single confident column until a real portrait is
   supplied; it becomes two columns the moment the figure is uncommented. */
.practice-detail a{color:var(--green-800);text-decoration:underline;text-decoration-color:var(--brass-400);text-underline-offset:3px}
.practice-detail a:hover{color:var(--brass-600)}

/* Authored linework sits on paper, contained rather than cropped. */
body.utmost-launch-final.utmost-final-luxury .service-network-visual,
body.utmost-launch-final.utmost-final-luxury .coordination-visual{
  background:var(--ivory-2);border:1px solid var(--line-brass);padding:clamp(14px,2vw,26px);
}
body.utmost-launch-final.utmost-final-luxury .service-network-visual img,
body.utmost-launch-final.utmost-final-luxury .coordination-visual img{
  width:100%;height:auto;aspect-ratio:auto;object-fit:contain;filter:none;
}
body.utmost-launch-final.utmost-final-luxury .service-card--design .service-image{background:var(--ivory-2)}

/* ---------------------------------------------------------------------------
   13. MOBILE GALLERY DENSITY
   The long service pages stacked every portfolio photograph in a single column
   at ~418px tall. /bathroom-remodeling/ alone ran 30,470px at 390px wide, of
   which one gallery was 11,680px. Two-up thumbnails with a fixed ratio keep
   every photograph (no content or SEO loss) while making the page scannable.
   --------------------------------------------------------------------------- */
@media(max-width:650px){
  body.utmost-launch-final.utmost-final-luxury .bathroom-city-images,
  body.utmost-launch-final.utmost-final-luxury .kitchen-editorial,
  body.utmost-launch-final.utmost-final-luxury .whole-home-story,
  body.utmost-launch-final.utmost-final-luxury .signature-baths-stage,
  body.utmost-launch-final.utmost-final-luxury .case-study-grid,
  body.utmost-launch-final.utmost-final-luxury .new-home-gallery,
  body.utmost-launch-final.utmost-final-luxury .city-gallery{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  body.utmost-launch-final.utmost-final-luxury .bathroom-city-images>*,
  body.utmost-launch-final.utmost-final-luxury .kitchen-editorial>*,
  body.utmost-launch-final.utmost-final-luxury .whole-home-story>*,
  body.utmost-launch-final.utmost-final-luxury .signature-baths-stage>*,
  body.utmost-launch-final.utmost-final-luxury .case-study-grid>*,
  body.utmost-launch-final.utmost-final-luxury .new-home-gallery>*,
  body.utmost-launch-final.utmost-final-luxury .city-gallery>*{
    grid-column:auto !important;grid-row:auto !important;
  }
  body.utmost-launch-final.utmost-final-luxury .bathroom-city-images img,
  body.utmost-launch-final.utmost-final-luxury .kitchen-editorial img,
  body.utmost-launch-final.utmost-final-luxury .whole-home-story img,
  body.utmost-launch-final.utmost-final-luxury .signature-baths-stage img,
  body.utmost-launch-final.utmost-final-luxury .case-study-grid img,
  body.utmost-launch-final.utmost-final-luxury .city-gallery img{
    aspect-ratio:4/3;height:auto !important;min-height:0 !important;object-fit:cover;
  }
  /* first frame of each gallery keeps full width — it carries the room */
  body.utmost-launch-final.utmost-final-luxury .bathroom-city-images>*:first-child,
  body.utmost-launch-final.utmost-final-luxury .kitchen-editorial>*:first-child,
  body.utmost-launch-final.utmost-final-luxury .case-study-grid>*:first-child{grid-column:1/-1 !important}

  /* Bespoke sections carried their own 88–110px mobile padding, outside the
     .section scale. Bring them onto the same rhythm. */
  body.utmost-launch-final.utmost-final-luxury .bathroom-city-portfolio,
        body.utmost-launch-final.utmost-final-luxury .whole-home-coordination,
  body.utmost-launch-final.utmost-final-luxury .kitchen-materials.__retired{
    padding-top:52px !important;padding-bottom:52px !important;
  }
  /* Caption blocks inside two-up thumbnails need to shrink with them. */
  body.utmost-launch-final.utmost-final-luxury .bathroom-city-images figcaption,
  body.utmost-launch-final.utmost-final-luxury .case-study-grid figcaption{
    font-size:.66rem;padding:10px 10px 12px !important;position:static !important;background:none !important;
  }
}

/* ---------------------------------------------------------------------------
   14. COLOUR CONTRAST (WCAG 2.1 AA)
   An automated sweep of seven representative pages found 98 text elements below
   the AA threshold. The worst were catastrophic: .lead inherited the light-mode
   muted grey (#646b66) inside the dark green bands, giving a 1.10:1 ratio —
   effectively invisible. Brass eyebrows on ivory sat at 4.15:1, just under.
   These rules fix the palette per context rather than per component.
   --------------------------------------------------------------------------- */

/* -- text on the dark forest bands -- */
body.utmost-launch-final.utmost-final-luxury .why,
body.utmost-launch-final.utmost-final-luxury .cta,
body.utmost-launch-final.utmost-final-luxury .areas,
body.utmost-launch-final.utmost-final-luxury .capability-strip,
body.utmost-launch-final.utmost-final-luxury .premium-atelier,
body.utmost-launch-final.utmost-final-luxury .site-footer,
body.utmost-launch-final.utmost-final-luxury .case-study-context-REMOVED{
  --local-lead:rgba(255,255,255,.76);
  --local-eyebrow:var(--brass-300);
  --local-meta:var(--brass-300);
}
body.utmost-launch-final.utmost-final-luxury .why .lead,
body.utmost-launch-final.utmost-final-luxury .cta .lead,
body.utmost-launch-final.utmost-final-luxury .areas .lead,
body.utmost-launch-final.utmost-final-luxury .premium-atelier .lead,

body.utmost-launch-final.utmost-final-luxury .premium-atelier p,
body.utmost-launch-final.utmost-final-luxury .foundation-dark p{
  color:rgba(255,255,255,.78) !important;
}
body.utmost-launch-final.utmost-final-luxury .why .eyebrow,
body.utmost-launch-final.utmost-final-luxury .cta .eyebrow,
body.utmost-launch-final.utmost-final-luxury .areas .eyebrow,
body.utmost-launch-final.utmost-final-luxury .premium-atelier .eyebrow,

body.utmost-launch-final.utmost-final-luxury .site-footer .footer-title,
body.utmost-launch-final.utmost-final-luxury .hero .eyebrow{
  color:var(--brass-300) !important;
}
body.utmost-launch-final.utmost-final-luxury .site-footer,
body.utmost-launch-final.utmost-final-luxury .site-footer p,
body.utmost-launch-final.utmost-final-luxury .site-footer a,
body.utmost-launch-final.utmost-final-luxury .footer-links a,
body.utmost-launch-final.utmost-final-luxury .footer-bottom{color:rgba(255,255,255,.8)}
body.utmost-launch-final.utmost-final-luxury .areas .area-grid a{color:rgba(255,255,255,.9)}
body.utmost-launch-final.utmost-final-luxury .capability small{color:rgba(255,255,255,.72)}
body.utmost-launch-final.utmost-final-luxury .proof-card p,
body.utmost-launch-final.utmost-final-luxury .hero-sidecard small{color:rgba(255,255,255,.76)}
body.utmost-launch-final.utmost-final-luxury .hero-copy{color:rgba(255,255,255,.86)}

/* -- brass on light backgrounds: #9b7444 measured 4.15:1 on ivory, under AA.
      The darker step clears it while staying unmistakably the same accent. -- */
body.utmost-launch-final.utmost-final-luxury .eyebrow,
body.utmost-launch-final.utmost-final-luxury .project-meta,
body.utmost-launch-final.utmost-final-luxury .case-study-meta,
body.utmost-launch-final.utmost-final-luxury .project-facts dt,
body.utmost-launch-final.utmost-final-luxury .project-story-step>span,
body.utmost-launch-final.utmost-final-luxury .practice-attrib{color:var(--brass-700)}
body.utmost-launch-final.utmost-final-luxury .text-link{color:var(--green-800)}
body.utmost-launch-final.utmost-final-luxury .text-link::after{color:var(--brass-700)}
body.utmost-launch-final.utmost-final-luxury .why .text-link,
body.utmost-launch-final.utmost-final-luxury .cta .text-link,
body.utmost-launch-final.utmost-final-luxury .case-study-gallery .text-link{color:var(--brass-300)}
body.utmost-launch-final.utmost-final-luxury .service-body .text-link{color:var(--green-800)}
body.utmost-launch-final.utmost-final-luxury .lead{color:#5b615c}

/* -- Hero variants. Every page type names its hero differently
   (.hero, .bathroom-hero, .case-study-hero, .foundation-hero, .realtor-hero…),
   so the light-background brass step above must be reversed for all of them.
   Text here sits on a dark scrim over photography. -- */
body.utmost-launch-final.utmost-final-luxury [class*="-hero"] .eyebrow,
body.utmost-launch-final.utmost-final-luxury .hero .eyebrow,
body.utmost-launch-final.utmost-final-luxury [class*="-hero"] .case-study-meta,
body.utmost-launch-final.utmost-final-luxury [class*="-hero"] .project-meta{
  color:var(--brass-300) !important;
}
body.utmost-launch-final.utmost-final-luxury [class*="-hero"] .lead,
body.utmost-launch-final.utmost-final-luxury .hero .lead,
body.utmost-launch-final.utmost-final-luxury [class*="-hero"] p:not(.eyebrow):not(.form-note),
body.utmost-launch-final.utmost-final-luxury [class*="-hero"] li{
  color:rgba(255,255,255,.84) !important;
}
/* …but a hero can contain a light panel (the inline enquiry form, a glass note
   card with a paper background). Those must stay dark-on-light. */
body.utmost-launch-final.utmost-final-luxury [class*="-hero"] .inquiry-form,
body.utmost-launch-final.utmost-final-luxury [class*="-hero"] .inquiry-form *,
body.utmost-launch-final.utmost-final-luxury .cta .inquiry-form,
body.utmost-launch-final.utmost-final-luxury .cta .inquiry-form *{color:var(--charcoal) !important}
body.utmost-launch-final.utmost-final-luxury .cta .inquiry-form .form-note{color:#5b615c !important}
body.utmost-launch-final.utmost-final-luxury .cta .inquiry-form label{color:var(--charcoal) !important}
body.utmost-launch-final.utmost-final-luxury .form-note{color:#5b615c}
body.utmost-launch-final.utmost-final-luxury .project-arrow{color:var(--brass-700)}

/* -- Contrast by context, driven by the tone detection in theme.js.
   These are the authority; the enumerated section lists above remain as the
   no-JS baseline for the largest bands. -- */
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .lead,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] p,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] li,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] dd,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] figcaption,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] small{color:rgba(255,255,255,.80) !important}
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .eyebrow,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .project-meta,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .case-study-meta,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] dt,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .footer-title,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .project-arrow,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .text-link{color:var(--brass-300) !important}
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] h1,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] h2,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] h3{color:#fff}
/* light panels sitting inside a dark band keep their own dark-on-light colours */
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .inquiry-form *,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .service-card *,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .project-card *,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .case-study-card *,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .btn-primary{color:inherit !important}
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .service-body p,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .project-card p{color:#5b615c !important}
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .service-body .text-link,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .project-card .project-meta,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .project-arrow{color:var(--brass-700) !important}
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .btn-primary{color:#0a1a15 !important}

/* Light panels nested inside a dark band (stamped by theme.js). */
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"],
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] p,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] li,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] dd,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] small,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] figcaption{color:#5b615c !important}
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] h1,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] h2,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] h3,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] label{color:var(--charcoal) !important}
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] .eyebrow,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] .project-meta,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] dt,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] .text-link,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] .project-arrow{color:var(--brass-700) !important}
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] [data-tone="light"] .btn-primary{color:#0a1a15 !important;background:var(--brass-500) !important}
/* remaining brass-on-paper micro labels */
body.utmost-launch-final.utmost-final-luxury .project-story-index span,
body.utmost-launch-final.utmost-final-luxury .case-study-context span,
body.utmost-launch-final.utmost-final-luxury .atlas-index{color:var(--brass-700)}
/* Remaining brass micro-labels measured just under AA on their own grounds. */
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .atlas-rail span,
body.utmost-launch-final.utmost-final-luxury [data-tone="dark"] .project-atlas span:not(.eyebrow){color:var(--brass-300) !important}

/* Practice block — corrected. The statement voice applies only to the pull
   quote itself, never to the eyebrow, attribution or supporting paragraph. */
body.utmost-launch-final.utmost-final-luxury .practice-grid{grid-template-columns:1fr;max-width:760px}
body.utmost-launch-final.utmost-final-luxury .practice-grid.has-portrait{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);max-width:none}
body.utmost-launch-final.utmost-final-luxury .practice-statement>p.practice-quote{
  font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.5rem);line-height:1.28;
  letter-spacing:-.022em;color:var(--charcoal);max-width:22ch;margin:0;
}
body.utmost-launch-final.utmost-final-luxury .practice-statement>p.practice-attrib{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass-700);margin:24px 0 0;max-width:none;
}
body.utmost-launch-final.utmost-final-luxury .practice-statement>p.practice-detail{
  font-family:var(--sans);font-size:.95rem;line-height:1.78;color:#5b615c;
  margin:22px 0 0;max-width:58ch;letter-spacing:0;
}
body.utmost-launch-final.utmost-final-luxury .practice-statement>p.eyebrow{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.17em;
  color:var(--brass-700);margin-bottom:20px;max-width:none;text-transform:uppercase;
}
@media(max-width:940px){body.utmost-launch-final.utmost-final-luxury .practice-grid.has-portrait{grid-template-columns:1fr}}
body.utmost-launch-final.utmost-final-luxury .practice-grid{margin-inline:auto}