/* ============================================================
   Larchmont Design Build — remodel demo template
   Identity: "Plaster, Oak and Brass". See larchmont-brand.md.

   Fourth in the trade set, and the first DARK one. The three
   before it are all light-ground, so this is the largest visual
   move available — and it is also the right one, because on a
   portfolio site the work has to dominate and a dark ground gets
   the interface out of the photographs' way.

     collision  cool gray  / torch red      / Anton caps      / r3  / 1 page
     mechanical green-white/ petrol+yellow  / Saira caps      / r4  / 1 page   dialect-ok: "petrol" is the recorded palette id of a prior build, not prose
     vet        oatmeal    / burgundy+sage  / Gabarito + serif/ r16 / 6 pages
     THIS       graphite   / brass          / Archivo EXPANDED/ r0  / 9 pages
                DARK                          sentence case         + project
                                                                    case studies

   Light: low, raking, late-afternoon — the light a finished room
   is photographed in. Shadows are near-absent; on a dark ground
   separation comes from value and rule, not elevation.
   ============================================================ */

:root{
  /* ground — deep warm graphite */
  --bg:hsl(24 8% 11%);
  --bg-2:hsl(24 7% 15%);
  --bg-3:hsl(24 6% 20%);
  --line:hsl(26 6% 26%);
  /* the light band — plaster */
  --plaster:hsl(38 24% 93%);
  --plaster-2:hsl(36 20% 88%);
  --on-plaster:hsl(24 12% 14%);
  --on-plaster-2:hsl(26 8% 38%);
  /* type on dark */
  --fg:hsl(38 18% 93%);
  --fg-2:hsl(30 6% 62%);
  --fg-3:hsl(28 6% 55%);
  /* signal — unlacquered brass, the one warm metal in the palette */
  --brass:hsl(38 48% 58%);
  --brass-deep:hsl(36 46% 47%);   /* fill: button hover on the dark ground */
  --brass-ink:hsl(36 52% 33%);    /* text: brass on the plaster band. 47% measured 2.95:1 there */
  --brass-wash:hsl(38 30% 18%);
  --r:0px;                     /* sharp. architectural, and unlike all three siblings */
  --pad:clamp(64px,8vw,124px);
  --gut:clamp(20px,2.4vw,32px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font:400 17px/1.65 "Inter Tight",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga"}
h1,h2,h3{font-family:Archivo,"Arial",system-ui,sans-serif;font-weight:600;
  font-stretch:125%;letter-spacing:-.012em;margin:0;line-height:1.04}
p{margin:0 0 1em}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
ul,ol{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.light :focus-visible{outline-color:var(--on-plaster)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--brass);color:var(--bg);
  padding:12px 18px;font-weight:600;text-decoration:none}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- eyebrow / section heads ---------- */
.eyebrow{display:block;font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);margin-bottom:18px}
.light .eyebrow{color:var(--brass-ink)}
h2{font-size:clamp(30px,3.6vw,46px)}
.head{margin-bottom:clamp(34px,4vw,56px)}
/* the measure belongs on the heading, not the wrapper: a `ch` on .head resolves
   against 17px Inter Tight and crushes a 46px Archivo h2 into five lines. */
.head h2{max-width:17ch}
.head.wide h2{max-width:22ch}
.head p{font-size:19px;line-height:1.6;color:var(--fg-2);margin:20px 0 0;max-width:52ch}
.light .head p{color:var(--on-plaster-2)}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:50;background:hsl(24 8% 11% / .88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;gap:28px;min-height:76px}
.logo{text-decoration:none;flex:none;display:inline-flex;flex-direction:column;justify-content:center;min-height:46px}
.logo b{font-family:Archivo,sans-serif;font-weight:600;font-stretch:125%;font-size:19px;
  letter-spacing:.02em;line-height:1;display:block;white-space:nowrap}
.logo small{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--fg-3);margin-top:5px;text-transform:uppercase}
.nav{display:flex;gap:30px;margin-left:auto;font-size:15px;font-weight:500}
.nav a{text-decoration:none;color:var(--fg-2);padding:4px 0;min-height:44px;
  display:inline-flex;align-items:center;position:relative;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.nav a:hover,.nav a.here{color:var(--fg)}
.nav a:hover::after,.nav a.here::after{transform:scaleX(1)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:"Inter Tight",sans-serif;
  font-weight:600;font-size:15.5px;letter-spacing:.01em;line-height:1;
  padding:17px 26px;border-radius:var(--r);text-decoration:none;border:1px solid transparent;
  cursor:pointer;min-height:52px;transition:background .2s,color .2s,border-color .2s}
.btn-1{background:var(--brass);color:hsl(24 10% 10%);border-color:var(--brass)}
.btn-1:hover{background:var(--brass-deep);border-color:var(--brass-deep)}
.btn-2{background:transparent;color:var(--fg);border-color:var(--line)}
.btn-2:hover{border-color:var(--fg);background:hsl(38 18% 93% / .05)}
.light .btn-2{color:var(--on-plaster);border-color:hsl(26 12% 72%)}
.light .btn-2:hover{border-color:var(--on-plaster);background:hsl(24 12% 14% / .04)}
.btn .ar{transition:transform .24s ease}
.btn:hover .ar{transform:translateX(4px)}
.acts{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(34px,3.6vw,54px) 0 0}
.hero h1{font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-.02em;max-width:19ch}
.hero .lede{font-size:19px;line-height:1.6;color:var(--fg-2);max-width:52ch;margin:22px 0 28px}
.hero .lede b{color:var(--fg);font-weight:500}
.hero-media{margin-top:clamp(28px,3vw,44px);overflow:hidden}
.hero-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hero-cap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:16px 0 0;font-size:14px;color:var(--fg-3);border-top:1px solid var(--line);margin-top:16px}
.hero-cap b{color:var(--fg-2);font-weight:500}

/* the measured facts strip */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  margin-top:clamp(48px,6vw,84px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts li{background:var(--bg);padding:26px 24px 24px}
.facts .n{display:block;font-family:Archivo,sans-serif;font-weight:600;font-stretch:125%;
  font-size:36px;line-height:1;color:var(--brass);margin-bottom:9px;font-variant-numeric:tabular-nums}
.facts .l{font-size:14.5px;line-height:1.5;color:var(--fg-2)}

/* ---------- project cards ---------- */
.section{padding:var(--pad) 0}
.section.light{background:var(--plaster);color:var(--on-plaster)}
.section.light h1,.section.light h2,.section.light h3{color:var(--on-plaster)}
.section.band{background:var(--bg-2)}

.projects{display:grid;gap:clamp(40px,5vw,76px)}
.proj{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(26px,3.4vw,52px);align-items:end;
  text-decoration:none;color:inherit}
.proj:nth-child(even){grid-template-columns:1fr 1.35fr}
.proj:nth-child(even) .proj-media{order:2}
.proj-media{overflow:hidden;background:var(--bg-2)}
.proj-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.proj:hover .proj-media img{transform:scale(1.03)}
.proj-body h3{font-size:clamp(23px,2.6vw,32px);margin-bottom:12px}
.proj-body .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--fg-3);
  padding-top:14px;border-top:1px solid var(--line);margin-top:16px}
.light .proj-body .meta{color:var(--on-plaster-2);border-top-color:hsl(26 14% 80%)}
.proj-body .meta b{color:var(--fg-2);font-weight:500}
.light .proj-body .meta b{color:var(--on-plaster)}
.proj-body p{color:var(--fg-2);font-size:16.5px;line-height:1.6;margin:0}
.light .proj-body p{color:var(--on-plaster-2)}
.proj .more{display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  font-size:14.5px;font-weight:600;color:var(--brass)}
.light .proj .more{color:var(--brass-ink)}
.proj:hover .more .ar{transform:translateX(4px)}
.more .ar{transition:transform .24s ease}

/* ---------- rules + lists ---------- */
.rows{border-top:1px solid var(--line)}
.light .rows{border-top-color:hsl(26 14% 80%)}
.rows li{display:grid;grid-template-columns:auto 1fr;gap:14px 40px;padding:24px 0;
  border-bottom:1px solid var(--line)}
.light .rows li{border-bottom-color:hsl(26 14% 80%)}
.rows .k{font-family:Archivo,sans-serif;font-weight:600;font-stretch:125%;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brass);padding-top:4px;min-width:96px}
.light .rows .k{color:var(--brass-ink)}
.rows h3{font-size:21px;margin-bottom:8px}
.rows p{font-size:16.5px;line-height:1.65;color:var(--fg-2);margin:0;max-width:64ch}
.light .rows p{color:var(--on-plaster-2)}

/* ---------- cost bands ---------- */
.bands{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.bands li{background:var(--bg);padding:30px 28px 28px;display:flex;flex-direction:column;gap:8px}
.light .bands{background:hsl(26 14% 80%)}
.light .bands li{background:var(--plaster)}
.bands h3{font-size:20px}
.bands .amt{font-family:Archivo,sans-serif;font-weight:600;font-stretch:125%;font-size:29px;
  color:var(--brass);line-height:1.1;font-variant-numeric:tabular-nums}
.light .bands .amt{color:var(--brass-ink)}
.bands p{font-size:15.5px;line-height:1.6;color:var(--fg-2);margin:0}
.light .bands p{color:var(--on-plaster-2)}
.bands .inc{font-size:14px;color:var(--fg-3);margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.light .bands .inc{color:var(--on-plaster-2);border-top-color:hsl(26 14% 80%)}

/* ---------- the law block ---------- */
.law{background:var(--brass-wash);border-left:2px solid var(--brass);padding:32px 34px;margin:0}
.law .eyebrow{margin-bottom:14px}
.law h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:14px;max-width:24ch}
.law p{font-size:17px;line-height:1.7;color:var(--fg-2);max-width:62ch}
.law b{color:var(--fg);font-weight:500}
.law cite{display:block;font-style:normal;font-size:14px;color:var(--fg-2);
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.law cite a{color:var(--brass)}
.contact-line a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- gallery ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
figure{margin:0}
.shot{overflow:hidden;background:var(--bg-2)}
.shot img{display:block;width:100%;height:auto;object-fit:cover}
.shot figcaption{font-size:14px;line-height:1.55;color:var(--fg-3);padding:14px 0 0}
.light .shot figcaption{color:var(--on-plaster-2)}
.shot.tall img{aspect-ratio:3/4}
.shot.wide img{aspect-ratio:16/9}
.shot.sq img{aspect-ratio:1/1}

/* ---------- project case study ---------- */
.case-hero{padding:clamp(34px,4vw,58px) 0 0}
.case-hero h1{font-size:clamp(34px,4.8vw,62px);max-width:18ch;letter-spacing:-.02em}
.case-hero .lede{font-size:19.5px;line-height:1.65;color:var(--fg-2);max-width:56ch;margin:22px 0 0}
.case-spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  margin:clamp(34px,4vw,52px) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-spec li{background:var(--bg);padding:22px 22px 20px}
.case-spec dt{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}
.case-spec dd{margin:0;font-size:17px;font-weight:500;color:var(--fg)}
.case-spec dd.brass{color:var(--brass);font-family:Archivo,sans-serif;font-weight:600;font-stretch:125%;
  font-variant-numeric:tabular-nums}
.case-body{max-width:62ch;font-size:17.5px;line-height:1.75;color:var(--fg-2)}
.case-body h2,.case-body h3{font-size:22px;color:var(--fg);margin:36px 0 12px;letter-spacing:-.008em}
.case-body h2:first-child,.case-body h3:first-child{margin-top:0}
.case-body b{color:var(--fg);font-weight:500}
.case-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:28px;margin-top:clamp(48px,6vw,80px)}
.case-nav a{text-decoration:none;font-size:15px;color:var(--fg-2);display:inline-flex;align-items:center;gap:10px;min-height:44px}
.case-nav a:hover{color:var(--brass)}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(34px,4.4vw,72px);align-items:start}
form{display:block}
.f{margin-bottom:22px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:block;font-size:14px;font-weight:500;letter-spacing:.02em;margin-bottom:9px;color:var(--fg-2)}
.light label{color:var(--on-plaster-2)}
label .opt{color:var(--fg-3);font-weight:400}
input,select,textarea{width:100%;font:400 16.5px/1.5 "Inter Tight",sans-serif;color:var(--fg);
  background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:12px 2px;min-height:50px;transition:border-color .2s}
.light input,.light select,.light textarea{color:var(--on-plaster);border-bottom-color:hsl(26 14% 78%)}
textarea{min-height:120px;resize:vertical}
input:hover,select:hover,textarea:hover{border-bottom-color:var(--fg-3)}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--brass)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 22px,calc(100% - 9px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
select option{background:var(--bg);color:var(--fg)}
.light select option{background:var(--plaster);color:var(--on-plaster)}
fieldset{border:0;margin:0 0 22px;padding:0}
legend{font-size:14px;font-weight:500;color:var(--fg-2);margin-bottom:12px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{display:inline-flex;align-items:center;gap:9px;margin:0;cursor:pointer;
  border:1px solid var(--line);padding:12px 18px;min-height:48px;font-size:15px;color:var(--fg-2);
  transition:border-color .2s,color .2s}
.chips label:hover{border-color:var(--fg-3);color:var(--fg)}
.chips input{width:auto;min-height:0;padding:0;margin:0;accent-color:var(--brass);border:0}
.chips label:has(input:checked){border-color:var(--brass);color:var(--fg)}
.hint{font-size:14px;color:var(--fg-3);margin:9px 0 0}
.err{display:none;color:hsl(8 62% 62%);font-size:14px;margin:9px 0 0}
.f.bad input,.f.bad select{border-bottom-color:hsl(8 62% 52%)}
.f.bad .err{display:block}
form .btn-1{width:100%;justify-content:center;margin-top:8px}
.priv{font-size:13.5px;color:var(--fg-3);margin:16px 0 0}
.sent{display:none;border:1px solid var(--brass);padding:30px 32px}
.sent h3{font-size:23px;margin-bottom:10px;color:var(--brass)}
.sent p{font-size:16.5px;color:var(--fg-2);margin:0}

/* ---------- footer ---------- */
.foot{background:hsl(24 9% 8%);border-top:1px solid var(--line);padding:64px 0 40px;font-size:15px;color:var(--fg-3)}
.foot .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.foot a{color:var(--fg-2);text-decoration:none}
.foot a:hover{color:var(--brass)}
.foot li a{display:inline-flex;align-items:center;min-height:44px}
.foot h4{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);
  margin:0 0 10px;font-weight:600}
.foot .logo b{color:var(--fg);font-size:21px}
.demo{grid-column:1/-1;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.7}
.demo b{color:var(--fg-2)}

/* ---------- one scroll idea: settle-in on reveal ----------
   Urgency is 1 and session is 5 here, which is the only profile in the set
   where §11.3 opens the full motion library. One idea, used everywhere,
   and it degrades to nothing without JavaScript or with reduced motion.

   The hidden state is scoped to .js — that class is set by an inline script in
   the head, so with scripting off it is never added and nothing is ever hidden.
   Unscoped, this rule would blank the whole site for a reader with no JS. */
.js .settle{opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.js .settle.in{opacity:1;transform:none}
.js .settle-media img{transform:scale(1.06);transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.js .settle-media.in img{transform:scale(1)}

/* ---------- responsive ---------- */
/* declared before the query that shows it, or the later rule wins */
.callbar{display:none}
@media(max-width:1040px){
  .facts,.case-spec{grid-template-columns:1fr 1fr}
  .bands,.grid-3{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav{display:none}
  .proj,.proj:nth-child(even){grid-template-columns:1fr;gap:20px}
  .proj:nth-child(even) .proj-media{order:0}
  .form-grid,.grid-2{grid-template-columns:1fr}
  .hero h1{max-width:none}
}
@media(max-width:600px){
  body{font-size:16px;padding-bottom:76px}
  .hero h1{font-size:clamp(33px,9.4vw,46px)}
  .hero .lede{font-size:18px}
  .facts,.case-spec{grid-template-columns:1fr}
  .facts li,.case-spec li{padding:20px 18px}
  .rows li{grid-template-columns:1fr;gap:8px}
  .f-row{grid-template-columns:1fr;gap:0}
  .acts .btn{flex:1 1 100%;justify-content:center}
  .foot .wrap{grid-template-columns:1fr}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg-2);
    border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px}
  .callbar .btn{flex:1;min-height:52px;justify-content:center}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .js .settle,.js .settle.in{opacity:1;transform:none}
  .js .settle-media img,.settle-media img{transform:none}
  .proj:hover .proj-media img{transform:none}
}

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
.hero>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px 44px;align-items:center}.hero-intro h1{font-size:clamp(40px,4.6vw,68px);max-width:15ch}.hero .hero-media{margin:0;align-self:stretch}.hero .hero-media img{height:100%;min-height:420px;object-fit:cover}.hero-cap{grid-column:2;margin-top:-12px}@media(max-width:860px){.hero>.wrap{grid-template-columns:1fr}.hero .hero-media img{min-height:0;aspect-ratio:4/3}.hero-cap{grid-column:1;margin-top:0}}

.hero>.wrap>.figures,.hero>.wrap>.specs{grid-column:1/-1}