/* ==========================================================
   COMMERCIAL SPACES — Spaces by MTC
   A dark, architectural counterpart to the ivory residential
   page. Everything here is scoped under body.commercial so the
   shared components (nav, footer, leadership, experience) can be
   reused without altering how they render on the residential page.
========================================================== */

body.commercial{
  --c-bg:        #0E1015;   /* page base — deeper than --charcoal */
  --c-surface:   #14171F;   /* raised panels */
  --c-surface-2: #191D26;   /* hover / inset */
  --c-line:      rgba(247,242,234,0.12);
  --c-line-soft: rgba(247,242,234,0.07);
  --c-text:      #F7F2EA;
  --c-dim:       rgba(247,242,234,0.58);
  --c-dimmer:    rgba(247,242,234,0.38);

  background: var(--c-bg);
  color: var(--c-text);
}

/* Shared sections inherited from main.css are ivory by default.
   Re-skin them for the dark canvas. */
body.commercial #factory,
body.commercial #experience{
  background: var(--c-bg);
}

/* These headings are authored for an ivory page (main.css sets .factory-title
   to black and .experience-headline to --charcoal), so on the dark canvas they
   render invisible. Re-colour them rather than editing the shared rules, which
   the residential page still depends on. */
body.commercial .factory-title{ color: var(--c-text); }
body.commercial .experience-headline{ color: var(--c-text); }

/* --light-text (#5E626B) is tuned for contrast against ivory; against #0E1015
   it falls below a comfortable reading contrast. */
body.commercial .experience-body,
body.commercial .es-text{ color: var(--c-dim); }

/* .section-label defaults to the deeper lime intended for light backgrounds;
   main.css already switches its dark sections to full lime, and #experience
   is now one of them. */
body.commercial #experience .section-label{ color: var(--gold); }
body.commercial #experience .section-label::before{ background: var(--gold); }

/* The brand marquee keeps its light band on purpose: several partner logos are
   supplied with an opaque white background and would read as floating white
   boxes on the dark canvas. */

/* ==========================================================
   NAVIGATION — dark variant
========================================================== */

body.commercial nav.scrolled{
  background: rgba(14,16,21,0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-line);
}
body.commercial nav.scrolled .nav-links a{ color: rgba(247,242,234,0.72); }
body.commercial nav.scrolled .nav-links a:hover{ color: var(--gold); }
body.commercial .nav-links a:hover{ color: var(--gold); }

/* Uses the white logo artwork (lime chevron intact) rather than a CSS invert,
   which would flatten the chevron to white and lose the brand colour. */

/* ==========================================================
   SHARED PRIMITIVES
========================================================== */

.c-wrap{ width:min(1400px, 90%); margin:0 auto; }

.c-label{
  display:flex;
  align-items:center;
  gap:16px;
  font-family:'DM Sans', sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:5px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:28px;
}
.c-label::before{
  content:'';
  width:48px;
  height:1px;
  background:var(--gold);
  flex-shrink:0;
}

.c-display{
  font-family:'Cormorant Garamond', serif;
  font-weight:300;
  line-height:0.94;
  letter-spacing:-0.015em;
  color:var(--c-text);
  margin:0;
}
.c-display em{ color:var(--gold); font-style:italic; }

.c-body{
  font-size:16px;
  line-height:1.85;
  color:var(--c-dim);
  font-weight:300;
}

/* Reveal-on-scroll reuses the shared .reveal class and its IntersectionObserver
   in js/main.js; only the easing and travel are tuned for this page. */
body.commercial .reveal{
  transform:translateY(34px);
  transition:opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1);
}
body.commercial .reveal.visible{ transform:none; }

@media (prefers-reduced-motion: reduce){
  body.commercial .reveal{ transition:none; opacity:1; transform:none; }
}

/* ==========================================================
   HERO
========================================================== */

#c-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:200px 0 0;
  overflow:hidden;
  background:var(--c-bg);
}

/* Blueprint grid — pure CSS, no image request. */
.c-hero-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--c-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line-soft) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  pointer-events:none;
}

/* A soft lime bloom behind the headline. */
.c-hero-glow{
  position:absolute;
  top:-10%;
  right:-5%;
  width:min(780px, 70vw);
  aspect-ratio:1;
  background:radial-gradient(circle, rgba(194,224,58,0.13) 0%, transparent 62%);
  pointer-events:none;
}

.c-hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.6fr);
  gap:clamp(40px, 5vw, 84px);
  align-items:end;
}

.c-hero-copy{ min-width:0; }

/* Portrait plate on the right, bottom-aligned with the lede. */
.c-hero-media{
  position:relative;
  margin:0 0 64px;
  width:100%;
  aspect-ratio:3/4;
  max-height:56vh;
  overflow:hidden;
  border:1px solid var(--c-line);
  background:#14161b;
  box-shadow:0 30px 60px -28px rgba(0,0,0,0.75);
}
.c-hero-media::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:var(--gold);
  z-index:2;
}
.c-hero-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.c-hero-title{
  font-size:clamp(52px, 8.4vw, 138px);
  max-width:16ch;
  margin-bottom:38px;
}

.c-hero-lede{
  max-width:52ch;
  font-size:17px;
  line-height:1.85;
  color:var(--c-dim);
  font-weight:300;
  margin-bottom:64px;
}

/* --- The three pillars, as a hairline-ruled row --- */
.c-pillars{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--c-line);
  margin-top:auto;
}

.c-pillar{
  padding:40px 40px 52px;
  border-right:1px solid var(--c-line);
  display:flex;
  flex-direction:column;
  gap:14px;
  text-decoration:none;
  transition:background .45s cubic-bezier(.23,1,.32,1);
}
.c-pillar:first-child{ padding-left:0; }
.c-pillar:last-child{ border-right:none; }
.c-pillar:hover{ background:rgba(194,224,58,0.04); }

.c-pillar-num{
  font-family:'DM Sans', sans-serif;
  font-size:11px;
  letter-spacing:3px;
  color:var(--gold);
  font-weight:500;
}

.c-pillar-name{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(24px, 2.2vw, 34px);
  font-weight:300;
  line-height:1.12;
  color:var(--c-text);
  transition:color .35s;
}
.c-pillar:hover .c-pillar-name{ color:var(--gold); }

.c-pillar-note{
  font-size:13px;
  line-height:1.7;
  color:var(--c-dimmer);
  font-weight:300;
}

/* ==========================================================
   MARQUEE STRIP — a moving rule of capability keywords
========================================================== */

.c-strip{
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
  padding:26px 0;
  overflow:hidden;
  background:var(--c-surface);
}
.c-strip-track{
  display:flex;
  gap:56px;
  width:max-content;
  animation:c-slide 42s linear infinite;
}
.c-strip-item{
  display:flex;
  align-items:center;
  gap:56px;
  font-family:'DM Sans', sans-serif;
  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--c-dimmer);
  white-space:nowrap;
}
.c-strip-item::after{
  content:'';
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
@keyframes c-slide{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.anim-paused .c-strip-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .c-strip-track{ animation:none; }
}

/* ==========================================================
   CAPABILITIES — the three pillars in full
========================================================== */

#c-capabilities{ padding:0 0 40px; background:var(--c-bg); }
/* The strip's bottom rule already divides this section, so the first
   capability block doesn't need its own. */
#c-capabilities .c-cap:first-of-type{ border-top:none; }

.c-cap-head{ margin-bottom:110px; }
.c-cap-title{ font-size:clamp(40px, 5.4vw, 84px); max-width:18ch; }

.c-cap{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:90px;
  align-items:center;
  padding:104px 0;
  border-top:1px solid var(--c-line);
}
/* Alternate the art to the opposite side for a woven rhythm. */
.c-cap:nth-child(even) .c-cap-art{ order:2; }
.c-cap:nth-child(even) .c-cap-copy{ order:1; }

.c-cap-index{
  font-family:'DM Sans', sans-serif;
  font-size:12px;
  letter-spacing:4px;
  color:var(--gold);
  margin-bottom:24px;
  font-weight:500;
}

.c-cap-name{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(34px, 4vw, 62px);
  font-weight:300;
  line-height:1.04;
  margin-bottom:26px;
  color:var(--c-text);
}
.c-cap-name em{ color:var(--gold); font-style:italic; }

.c-cap-body{
  font-size:16px;
  line-height:1.9;
  color:var(--c-dim);
  font-weight:300;
  margin-bottom:38px;
  max-width:46ch;
}

.c-cap-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px 34px;
}
.c-cap-list li{
  font-size:13.5px;
  line-height:1.6;
  color:var(--c-dim);
  padding-left:20px;
  position:relative;
  font-weight:300;
}
.c-cap-list li::before{
  content:'';
  position:absolute;
  left:0; top:8px;
  width:7px; height:1px;
  background:var(--gold);
}
.c-cap-link{
  display:inline-flex;
  align-items:center;
  margin-top:34px;
}

/* --- Line-art panels (inline SVG, drawn to match each discipline) --- */
.c-cap-art{
  position:relative;
  aspect-ratio:4/3.4;
  background:
    linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%);
  border:1px solid var(--c-line);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
/* faint inner grid so the panels read as drawings, not empty boxes */
.c-cap-art::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--c-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line-soft) 1px, transparent 1px);
  background-size:46px 46px;
  opacity:.75;
}
.c-cap-art svg{
  position:relative;
  width:74%;
  height:auto;
  overflow:visible;
}
.c-cap-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:1;
}
.c-cap-art > svg{ display:none !important; }
.c-cap-art .ln{
  fill:none;
  stroke:rgba(247,242,234,0.5);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* fill:none is required, not inherited — .ln-a is used as a standalone class,
   and an SVG shape with no fill declared paints solid black. */
.c-cap-art .ln-a{ fill:none; stroke:var(--gold); stroke-width:1.8; }
/* Filled shapes sit above the panel's grid overlay, so a very low alpha reads
   as an opaque black hole rather than a tint. These are pitched to stay
   clearly translucent while still registering as deliberate fill. */
.c-cap-art .fl{ fill:rgba(194,224,58,0.20); stroke:none; }
.c-cap-art .fl-2{ fill:rgba(247,242,234,0.13); stroke:none; }

/* Corner ticks — a drafting-sheet cue */
.c-cap-art .tick{ stroke:var(--gold); stroke-width:1.6; fill:none; opacity:.85; }

/* ==========================================================
   CASE STUDY — the one real commercial project
========================================================== */

#c-work{
  padding:150px 0 160px;
  background:var(--c-surface);
  border-top:1px solid var(--c-line);
}

.c-work-head{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:80px;
  align-items:end;
  margin-bottom:80px;
}
.c-work-title{ font-size:clamp(38px, 5vw, 76px); }

.c-work-meta{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:30px 40px;
  padding-bottom:10px;
}
.c-meta-k{
  font-size:10.5px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:9px;
  font-weight:500;
}
.c-meta-v{
  font-size:15px;
  line-height:1.55;
  color:var(--c-text);
  font-weight:300;
}

/* Horizontal film-strip of the real photography */
.c-rail{
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding:4px 0 30px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.c-rail::-webkit-scrollbar{ display:none; }

.c-shot{
  position:relative;
  flex:0 0 auto;
  width:clamp(260px, 26vw, 400px);
  aspect-ratio:3/4;
  overflow:hidden;
  scroll-snap-align:start;
  background:var(--c-surface-2);
}
.c-shot img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.1s cubic-bezier(.23,1,.32,1), filter .6s;
  filter:saturate(.92);
}
.c-shot:hover img{ transform:scale(1.05); filter:saturate(1.05); }

/* A wide hero frame that breaks the rhythm */
.c-shot-wide{ width:clamp(360px, 44vw, 660px); aspect-ratio:16/11; }

.c-shot-cap{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:46px 20px 16px;
  background:linear-gradient(180deg, transparent, rgba(14,16,21,0.9));
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--c-dim);
}

.c-rail-hint{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--c-dimmer);
  margin-top:6px;
}
.c-rail-hint svg{ width:30px; height:8px; stroke:var(--gold); fill:none; }

/* ==========================================================
   NUMBERS — commercial-specific proof
========================================================== */

#c-numbers{
  padding:140px 0;
  background:var(--c-bg);
}
.c-num-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--c-line);
}
.c-num{
  padding:52px 34px 52px 0;
  border-right:1px solid var(--c-line);
}
.c-num:last-child{ border-right:none; }
.c-num-fig{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(46px, 5.2vw, 76px);
  font-weight:300;
  line-height:1;
  color:var(--gold);
  margin-bottom:16px;
}
.c-num-fig sup{ font-size:.42em; vertical-align:super; margin-left:2px; }
.c-num-k{
  font-size:12.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--c-text);
  margin-bottom:10px;
}
.c-num-d{
  font-size:13px;
  line-height:1.7;
  color:var(--c-dimmer);
  font-weight:300;
}

/* ==========================================================
   HOW WE DELIVER — stepped timeline
========================================================== */

#c-method{
  padding:150px 0;
  background:var(--c-surface);
  border-top:1px solid var(--c-line);
}
.c-method-head{ margin-bottom:90px; }
.c-method-title{ font-size:clamp(38px, 5vw, 76px); max-width:16ch; }

.c-steps{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:0;
  border-top:1px solid var(--c-line);
}
.c-step{
  padding:40px 26px 46px 0;
  border-right:1px solid var(--c-line);
  position:relative;
}
.c-step:last-child{ border-right:none; }
.c-step::before{
  content:'';
  position:absolute;
  top:-4px; left:0;
  width:7px; height:7px;
  background:var(--gold);
  border-radius:50%;
}
.c-step-n{
  font-size:11px;
  letter-spacing:3px;
  color:var(--gold);
  margin-bottom:18px;
  font-weight:500;
}
.c-step-t{
  font-family:'Cormorant Garamond', serif;
  font-size:26px;
  font-weight:300;
  line-height:1.15;
  margin-bottom:14px;
  color:var(--c-text);
}
.c-step-d{
  font-size:13px;
  line-height:1.75;
  color:var(--c-dimmer);
  font-weight:300;
}

/* ==========================================================
   CTA
========================================================== */

#c-cta{
  position:relative;
  padding:170px 0;
  background:var(--c-bg);
  border-top:1px solid var(--c-line);
  overflow:hidden;
}
#c-cta .c-hero-glow{ top:auto; bottom:-40%; left:-10%; right:auto; }

.c-cta-inner{ position:relative; z-index:2; text-align:center; }
.c-cta-title{
  font-size:clamp(40px, 6.4vw, 100px);
  margin:0 auto 34px;
  max-width:16ch;
}
.c-cta-body{
  max-width:56ch;
  margin:0 auto 52px;
  font-size:16.5px;
  line-height:1.85;
  color:var(--c-dim);
  font-weight:300;
}
.c-cta-row{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}
.c-btn{
  font-family:'DM Sans', sans-serif;
  font-size:12px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  padding:19px 44px;
  text-decoration:none;
  transition:all .35s cubic-bezier(.23,1,.32,1);
  border:1px solid transparent;
}
.c-btn-solid{ background:var(--gold); color:var(--c-bg); }
.c-btn-solid:hover{ background:var(--c-text); }
.c-btn-ghost{ border-color:var(--c-line); color:var(--c-text); }
.c-btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1100px){
  .c-cap{ grid-template-columns:1fr; gap:52px; padding:80px 0; }
  .c-cap:nth-child(even) .c-cap-art{ order:0; }
  .c-cap:nth-child(even) .c-cap-copy{ order:0; }
  .c-cap-art{ aspect-ratio:16/10; }
  .c-cap-art svg{ width:56%; }

  .c-work-head{ grid-template-columns:1fr; gap:44px; align-items:start; }
  .c-num-grid{ grid-template-columns:repeat(2, 1fr); }
  .c-num{ padding:40px 26px 40px 0; }
  .c-num:nth-child(2){ border-right:none; }
  .c-num:nth-child(1), .c-num:nth-child(2){ border-bottom:1px solid var(--c-line); }

  .c-steps{ grid-template-columns:repeat(2, 1fr); }
  .c-step{ border-bottom:1px solid var(--c-line); }
  .c-step:nth-child(even){ border-right:none; }
}

@media (max-width:900px){
  #c-hero{ padding:150px 0 0; min-height:auto; }
  .c-hero-inner{ grid-template-columns:1fr; gap:0; }
  .c-hero-title{ margin-bottom:28px; }
  .c-hero-lede{ margin-bottom:44px; }
  .c-hero-media{ aspect-ratio:16/11; max-height:none; margin-bottom:48px; }

  .c-pillars{ grid-template-columns:1fr; }
  .c-pillar{
    border-right:none;
    border-bottom:1px solid var(--c-line);
    padding:28px 0 30px;
  }
  .c-pillar:last-child{ border-bottom:none; }

  #c-capabilities, #c-work, #c-numbers, #c-method, #c-cta{ padding:96px 0; }
  .c-cap-head, .c-method-head{ margin-bottom:56px; }
  .c-cap-list{ grid-template-columns:1fr; }
  .c-work-meta{ gap:24px 30px; }
}

@media (max-width:600px){
  .c-num-grid{ grid-template-columns:1fr; }
  .c-num{ border-right:none; border-bottom:1px solid var(--c-line); padding:34px 0; }
  .c-num:last-child{ border-bottom:none; }

  .c-steps{ grid-template-columns:1fr; }
  .c-step{ border-right:none; padding:32px 0 34px; }

  .c-cap-art svg{ width:74%; }
  .c-btn{ width:100%; text-align:center; }
}

/* ==========================================================
   BOOK CONSULTATION — LEAD MODAL
   Lives outside body.commercial's descendant scope on purpose:
   the dialog is a direct child of <body>, so it declares its own
   colours rather than inheriting the page tokens.
========================================================== */

.lead-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:40px 20px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.lead-modal[hidden]{ display:none; }

.lead-backdrop{
  position:fixed;
  inset:0;
  background:rgba(6,7,10,0.78);
  backdrop-filter:blur(6px);
  animation:lead-fade .3s ease;
}

.lead-panel{
  position:relative;
  width:min(880px, 100%);
  margin:auto;
  background:#14171F;
  border:1px solid rgba(247,242,234,0.12);
  padding:56px 60px 48px;
  animation:lead-rise .42s cubic-bezier(.23,1,.32,1);
}

@keyframes lead-fade{ from{opacity:0} to{opacity:1} }
@keyframes lead-rise{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .lead-backdrop, .lead-panel{ animation:none; }
}

/* Close (X) — top right */
.lead-close{
  position:absolute;
  top:20px; right:20px;
  width:42px; height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid rgba(247,242,234,0.16);
  color:#F7F2EA;
  cursor:pointer;
  transition:all .3s cubic-bezier(.23,1,.32,1);
}
.lead-close svg{ width:20px; height:20px; fill:none; }
.lead-close:hover{ border-color:#C2E03A; color:#C2E03A; }
.lead-close:focus-visible{ outline:2px solid #C2E03A; outline-offset:2px; }

.lead-head{ margin-bottom:38px; padding-right:52px; }
.lead-title{
  font-size:clamp(30px, 3.6vw, 46px);
  margin-bottom:16px;
  color:#F7F2EA;
}
.lead-intro{
  font-size:15px;
  line-height:1.75;
  color:rgba(247,242,234,0.58);
  font-weight:300;
  max-width:52ch;
}

/* Fields */
.lead-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:22px 28px;
  margin-bottom:30px;
}
.lead-field{ display:flex; flex-direction:column; gap:9px; }

.lead-field label{
  font-family:'DM Sans', sans-serif;
  font-size:10.5px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:rgba(247,242,234,0.72);
}
.lead-field label span{ color:#C2E03A; }

.lead-field input,
.lead-field select{
  font-family:'DM Sans', sans-serif;
  font-size:15px;
  font-weight:300;
  color:#F7F2EA;
  background:#0E1015;
  border:1px solid rgba(247,242,234,0.14);
  padding:14px 16px;
  width:100%;
  transition:border-color .28s, background .28s;
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
}
.lead-field input::placeholder{ color:rgba(247,242,234,0.28); }

.lead-field select{
  /* inline chevron so the control matches across browsers */
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23C2E03A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
  padding-right:42px;
  cursor:pointer;
}
.lead-field select option{ background:#14171F; color:#F7F2EA; }

.lead-field input:focus,
.lead-field select:focus{
  outline:none;
  border-color:#C2E03A;
  background:#12151C;
}
.lead-field input[aria-invalid="true"],
.lead-field select[aria-invalid="true"]{ border-color:#E0603A; }

.lead-error{
  font-size:11.5px;
  letter-spacing:.3px;
  color:#E0603A;
  min-height:0;
}

/* Submit + messages */
.lead-submit{
  border:none;
  cursor:pointer;
  font-family:'DM Sans', sans-serif;
  width:100%;
}
.lead-submit[disabled]{ opacity:.55; cursor:not-allowed; }

.lead-status{
  font-size:14px;
  line-height:1.7;
  margin-bottom:18px;
  padding:14px 16px;
  display:none;
}
.lead-status.is-error{
  display:block;
  color:#F2B8A2;
  background:rgba(224,96,58,0.10);
  border-left:2px solid #E0603A;
}
.lead-status.is-ok{
  display:block;
  color:#DCEFA4;
  background:rgba(194,224,58,0.10);
  border-left:2px solid #C2E03A;
}

.lead-note{
  margin-top:16px;
  font-size:12px;
  line-height:1.6;
  color:rgba(247,242,234,0.38);
  text-align:center;
}

/* Success state replaces the form body */
.lead-done{
  text-align:center;
  padding:22px 0 8px;
}
.lead-done h3{
  font-family:'Cormorant Garamond', serif;
  font-size:34px;
  font-weight:300;
  color:#F7F2EA;
  margin-bottom:14px;
}
.lead-done p{
  font-size:15px;
  line-height:1.8;
  color:rgba(247,242,234,0.58);
  font-weight:300;
  max-width:44ch;
  margin:0 auto;
}

/* Stop the page behind the dialog from scrolling */
body.lead-open{ overflow:hidden; }

@media (max-width:760px){
  .lead-modal{ padding:0; }
  .lead-panel{
    padding:64px 22px 34px;
    min-height:100%;
    border:none;
    width:100%;
  }
  .lead-grid{ grid-template-columns:1fr; gap:18px; margin-bottom:24px; }
  .lead-head{ margin-bottom:28px; padding-right:44px; }
  .lead-close{ top:14px; right:14px; }
}

/* ==========================================================
   ANCHOR LANDING OFFSET
   The nav is fixed (~92px tall), so an anchored section would
   otherwise scroll to sit underneath it — the "01 — Offices &
   Workspaces" label was hidden behind the bar when Services was
   clicked. Same 110px offset already used in css/blog.css.
========================================================== */
body.commercial .c-cap,
body.commercial #c-capabilities,
body.commercial #c-work,
body.commercial #factory,
body.commercial #experience,
body.commercial #leadership{
  scroll-margin-top:110px;
}