/* ============================================================
   ORLANDO ANNULLI AND SONS — "BUILT TO OUTLAST"
   Design system. Staff never need to edit this file — all copy
   and photos come from /content/*.json via the content editor.
   ============================================================ */
:root{
  /* Palette — warm practical: stone/cream neutrals, charcoal instead of
     pure black, the brand red, and a softer red for accents on dark. */
  --red:        #9A1420;
  --red-soft:   #D0505E;
  --red-deep:   #7A0F19;
  --ink:        #1A1613;
  --charcoal:   #2B2622;
  --charcoal-2: #36302A;
  --stone:      #F2EEE7;
  --paper:      #FBFAF7;
  --steel:      #565049;
  --fog:        #8F887D;
  --mist:       #BDB6AA;   /* body text on dark */

  --display: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --serif:   'Fraunces', Georgia, 'Times New Roman', serif;   /* heritage accent */

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --sec-pad: clamp(80px, 10vw, 148px);
  --nav-h: 76px;

  --hairline-dark:  rgba(26,22,19,.12);
  --hairline-light: rgba(255,255,255,.14);

  /* Motion — one slow curve for entrances, one snappier curve for feedback */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --hero-h: 100vh;
}
@supports (height: 100svh){ :root{ --hero-h: 100svh; } }

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  counter-reset: sec;
  overflow-x: clip;
}
html.locked, html.locked body{ overflow: hidden; }
img, video{ display:block; max-width:100%; }
[hidden]{ display: none !important; }
a{ color: inherit; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul{ list-style: none; }
::selection{ background: var(--red); color: var(--paper); }
:focus-visible{ outline: 2px solid var(--red-soft); outline-offset: 3px; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link{
  position: fixed; left: 12px; top: -60px; z-index: 300;
  background: var(--red); color: var(--paper); padding: 10px 16px; text-decoration: none;
  font-family: var(--display); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem;
}
.skip-link:focus{ top: 12px; }

/* ---------- Type roles ---------- */
.display{
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.04;
  font-size: clamp(2.1rem, 4.8vw, 3.9rem);
  text-wrap: balance;
}
/* *Accent* words in headlines: heritage serif italic, in red — the editorial
   counterpoint to the uppercase sans. Set in content with *asterisks*. */
.display em, .hero h1 em, .approach-text h2 em, .century h3 em, .quote blockquote em, .contact-head h2 em{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--red);
}
.dark .display em, .hero h1 em, .century h3 em, .quote blockquote em, .contact-head h2 em{ color: var(--red-soft); }

.eyebrow{
  font-family: var(--display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::after{ content: ""; width: 40px; height: 1px; background: currentColor; opacity: .45; }
.dark .eyebrow{ color: var(--fog); }
section.numbered{ counter-increment: sec; }
section.numbered .eyebrow::before{
  content: counter(sec, decimal-leading-zero);
  color: var(--red);
  margin-right: 2px;
}
.dark.numbered .eyebrow::before{ color: var(--red-soft); }

.body-lg{
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.7;
  color: var(--steel);
  max-width: 54ch;
}
.dark .body-lg{ color: var(--mist); }
.loading{ color: var(--fog); padding: 24px 0; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 30px;
  border: 1px solid transparent;
  transition: background .3s var(--ease-soft), color .3s var(--ease-soft),
              transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft),
              border-color .3s var(--ease-soft);
}
.btn-red{ background: var(--red); color: var(--paper); }
.btn-red:hover{ background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(122,15,25,.3); }
.btn-ghost{ border-color: rgba(255,255,255,.32); color: var(--paper); }
.btn-ghost:hover{ border-color: var(--paper); background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn .arrow{ transition: transform .4s var(--ease); display: inline-block; }
.btn:hover .arrow{ transform: translateX(6px); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  transition: background .45s var(--ease-soft), box-shadow .45s var(--ease-soft), transform .45s var(--ease);
}
.nav::before{   /* soft top shade so white nav text reads over bright hero photos */
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,17,16,.55), rgba(20,17,16,0));
  transition: opacity .45s var(--ease-soft);
}
.nav.scrolled{
  background: rgba(22,19,17,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--hairline-light);
}
.nav.scrolled::before{ opacity: 0; }
.logo{
  display: flex; align-items: center; gap: 13px;
  text-decoration: none;
  position: relative; z-index: 102;
}
.logo svg{ height: 40px; width: auto; flex-shrink: 0; transition: transform .5s var(--ease); }
.logo-text{
  font-family: var(--display);
  color: var(--paper);
  line-height: 1.2;
  display: flex; flex-direction: column;
  font-size: 1rem;
}
.logo-text .name-bold{ font-weight: 600; }
.logo-text .name-light{ font-weight: 300; color: #D5CFC4; }

/* Deliberately a sibling of .nav, not a child — see note in index.html */
.nav-links{
  position: fixed; top: 0; right: var(--gutter);
  height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px);
  z-index: 101;
}
.nav-links a{
  position: relative;
  font-family: var(--display);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #E2DDD3;
  transition: color .3s var(--ease-soft);
  padding: 4px 0;
}
.nav-links a:not(.btn)::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--red-soft);
  transition: right .4s var(--ease);
}
.nav-links a:not(.btn):hover::after, .nav-links a.current::after{ right: 0; }
.nav-links a:hover{ color: var(--paper); }
.nav-links .btn{ padding: 13px 22px; color: var(--paper); }

.nav-toggle{
  display: none;
  position: relative; z-index: 102;
  width: 44px; height: 44px;
  margin-right: -10px;
}
.nav-toggle span{
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--paper);
  transition: transform .4s var(--ease), opacity .3s var(--ease-soft), top .4s var(--ease);
}
.nav-toggle span:nth-child(1){ top: 15px; }
.nav-toggle span:nth-child(2){ top: 21px; }
.nav-toggle span:nth-child(3){ top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top: 21px; transform: rotate(-45deg); }

@media (max-width: 1080px){
  .nav-toggle{ display: block; }
  .nav-links{
    inset: 0; right: 0; height: auto;
    z-index: 99;
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 6px;
    padding: calc(var(--nav-h) + 20px) var(--gutter) 40px;
    background: var(--ink);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .45s var(--ease), visibility .45s var(--ease);
  }
  .nav-links.open{ opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links a:not(.btn){
    font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 500; letter-spacing: .04em;
    padding: 6px 0;
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
  }
  .nav-links a:not(.btn)::after{ display: none; }
  .nav-links.open a{ opacity: 1; transform: none; }
  .nav-links.open a:nth-child(2){ transition-delay: .04s; }
  .nav-links.open a:nth-child(3){ transition-delay: .08s; }
  .nav-links.open a:nth-child(4){ transition-delay: .12s; }
  .nav-links.open a:nth-child(5){ transition-delay: .16s; }
  .nav-links.open a:nth-child(6){ transition-delay: .2s; }
  .nav-links .btn{ margin-top: 24px; }
}
@media (max-width: 420px){
  .logo svg{ height: 34px; }
  .logo-text{ font-size: .88rem; }
}

/* ============================================================
   HERO — photo or video, chosen in the content editor
   ============================================================ */
.hero{
  position: relative;
  min-height: max(var(--hero-h), 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.hero-media{ position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media img, .hero-media video{
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  animation: heroDrift 30s var(--ease-soft) infinite alternate;
}
.hero-media .shown{ opacity: 1; }
@keyframes heroDrift{
  from{ transform: scale(1.02); }
  to{ transform: scale(1.09) translate3d(-1%, -1%, 0); }
}
.hero-media::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,22,19,.45) 0%, rgba(26,22,19,.15) 35%, rgba(26,22,19,.55) 62%, rgba(26,22,19,.94) 100%),
    linear-gradient(95deg, rgba(26,22,19,.78) 0%, rgba(26,22,19,.35) 48%, rgba(26,22,19,0) 75%);
}
.hero-inner{
  position: relative;
  width: 100%;
  padding-top: calc(var(--nav-h) + 60px);
}
.hero-eyebrow{
  font-family: var(--display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #E2DDD3;
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.hero-eyebrow::before{ content: ""; width: 34px; height: 2px; background: var(--red-soft); flex-shrink: 0; }
.hero h1{
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: 0;
  font-size: clamp(2.7rem, 7.4vw, 6.4rem);
  max-width: 13ch;
  text-wrap: balance;
}
.hero h1 em{ font-weight: 300; }
.hero-sub{
  margin-top: 28px;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.65;
  color: #DDD7CC;
  max-width: 54ch;
}
.hero-cta-row{ margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero entrance — content waits for site.json, then fades up in sequence */
.hero .hero-eyebrow, .hero h1, .hero .hero-sub, .hero .hero-cta-row, .hero .hero-stats{ opacity: 0; }
.hero.ready .hero-eyebrow, .hero.ready h1, .hero.ready .hero-sub, .hero.ready .hero-cta-row, .hero.ready .hero-stats{
  animation: heroIn 1.1s var(--ease) both;
}
.hero.ready h1{ animation-delay: .1s; }
.hero.ready .hero-sub{ animation-delay: .25s; }
.hero.ready .hero-cta-row{ animation-delay: .38s; }
.hero.ready .hero-stats{ animation-delay: .5s; }
@keyframes heroIn{ from{ opacity: 0; transform: translateY(26px); } to{ opacity: 1; transform: none; } }

/* Stat strip */
.hero-stats{
  margin-top: clamp(48px, 8vh, 96px);
  border-top: 1px solid var(--hairline-light);
  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
}
.hero-stat{
  padding: 26px var(--gutter) 32px;
  border-right: 1px solid var(--hairline-light);
}
.hero-stat:last-child{ border-right: none; }
.hero-stat .num{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.9vw, 2.6rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.hero-stat .num b{ font-weight: 600; color: var(--red-soft); }
.hero-stat .num span{ font-size: .5em; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }
.hero-stat .lbl{ margin-top: 8px; font-size: .84rem; color: var(--mist); line-height: 1.5; }
@media (min-width: 1180px){ .hero-stat .lbl{ white-space: nowrap; } }

@media (max-width: 600px){
  .hero{ min-height: var(--hero-h); }
  .hero-inner{ padding-top: calc(var(--nav-h) + 60px); }
  .hero-eyebrow{ font-size: .64rem; letter-spacing: .14em; gap: 10px; margin-bottom: 16px; text-wrap: balance; }
  .hero-eyebrow::before{ width: 22px; }
  .hero h1{ font-size: clamp(2.2rem, 11vw, 3rem); }
  .hero-sub{ margin-top: 18px; font-size: .98rem; }
  .hero-cta-row{ margin-top: 24px; }
  .hero-cta-row .btn{ flex: 1 1 auto; padding: 15px 20px; }
  /* Phones: stats become compact rows — number on the left, caption on the right */
  .hero-stats{ margin-top: 32px; grid-template-columns: 1fr; }
  .hero-stat{ padding: 12px var(--gutter); border-right: none; border-bottom: 1px solid var(--hairline-light); }
  .hero-stat:last-child{ border-bottom: none; }
  .hero-stat .num{ font-size: 1.4rem; }
  .hero-stat .lbl{ margin-top: 3px; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================================
   SECTION SHELLS
   ============================================================ */
section.sec{ padding: var(--sec-pad) 0; position: relative; }
section.dark{ background: var(--ink); color: var(--paper); }
section.dark.alt{ background: var(--charcoal); }
section.stone{ background: var(--stone); }

.sec-head{
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 76px);
}
.sec-head .display{ margin-top: 18px; }
@media (max-width: 860px){ .sec-head{ grid-template-columns: 1fr; align-items: start; } }

/* ============================================================
   § APPROACH
   ============================================================ */
.approach-grid{
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.approach-photo{ position: relative; }
.approach-photo .frame{ aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.approach-photo img{ width: 100%; height: 100%; object-fit: cover; }
.approach-photo::before{   /* offset hairline frame — a draftsman's detail */
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border: 1px solid var(--hairline-dark); z-index: -1;
}
.approach-badge{
  position: absolute; left: -1px; bottom: 28px;
  background: var(--red); color: var(--paper);
  padding: 16px 22px;
  font-family: var(--display); text-transform: uppercase;
}
.approach-badge strong{ display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.3rem; line-height: 1; text-transform: none; }
.approach-badge span{ font-size: .7rem; letter-spacing: .2em; font-weight: 600; }
.approach-text h2{
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.04;
  font-size: clamp(2rem, 4vw, 3.3rem);
  margin: 18px 0 26px;
  text-wrap: balance;
}
.approach-lede{
  font-size: clamp(1.08rem, 1.45vw, 1.26rem);
  line-height: 1.6;
  color: var(--ink);
}
/* The lede reads as a quote from the chairman */
.approach-quote{ position: relative; padding-left: clamp(30px, 3.4vw, 48px); margin-bottom: 26px; }
.approach-quote::before{
  content: "\201C"; position: absolute; left: -4px; top: -.18em;
  font-family: var(--serif); font-size: clamp(4rem, 6vw, 5.5rem); line-height: 1; color: var(--red);
}
.approach-quote .approach-lede::after{
  content: "\201D"; font-family: var(--serif); color: var(--red);
  font-size: 2.2em; line-height: 0; vertical-align: -.36em; margin-left: .06em;
}
/* Company background, full width beneath the photo and quote */
.approach-body{
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 2px solid var(--ink);
  padding-top: clamp(22px, 2.6vw, 32px);
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  line-height: 1.7;
  color: var(--steel);
  max-width: none;
}
.approach-sigs{ display: flex; flex-wrap: wrap; gap: 14px 40px; padding-left: clamp(30px, 3.4vw, 48px); }
.approach-sigs .sig-name::before{ content: "\2014\00a0"; color: var(--red); }
.sig-name{ font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.2; }
.sig-title{ font-family: var(--display); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fog); margin-top: 4px; }

@media (max-width: 860px){
  .approach-grid{ grid-template-columns: 1fr; }
  .approach-photo{ max-width: 520px; margin-right: 22px; }
  .approach-photo .frame{ aspect-ratio: 4 / 3; }
  .approach-badge{ padding: 8px 12px; bottom: 14px; max-width: 72%; }
  .approach-badge strong{ font-size: 1.35rem; }
  .approach-badge span{ font-size: .56rem; letter-spacing: .12em; }
}

/* ============================================================
   § CAPABILITIES — tabs. Every panel is stacked in the same grid
   cell, so the section is always as tall as its tallest panel and
   never jumps in size when switching tabs.
   ============================================================ */
.cap-tabs{
  display: grid;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
}
.cap-list{ display: flex; flex-direction: column; }
.cap-tab{
  display: flex; align-items: baseline; gap: 16px;
  text-align: left;
  padding: 17px 0;
  border-bottom: 1px solid var(--hairline-light);
  width: 100%;
  color: rgba(255,255,255,.5);
  transition: color .35s var(--ease-soft);
}
.cap-tab:last-child{ border-bottom: none; }
.cap-tab:hover{ color: rgba(255,255,255,.82); }
.cap-tab-num{ font-family: var(--display); font-size: .76rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.3); min-width: 22px; transition: color .35s; }
.cap-tab-label{ font-family: var(--display); font-size: 1.04rem; line-height: 1.3; }
.cap-tab[aria-selected="true"]{ color: var(--paper); }
.cap-tab[aria-selected="true"] .cap-tab-label{ font-weight: 600; }
.cap-tab[aria-selected="true"] .cap-tab-num{ color: var(--red-soft); }
.cap-tab::before{ content: ""; width: 0; height: 2px; background: var(--red-soft); align-self: center; transition: width .45s var(--ease); margin-right: -16px; }
.cap-tab[aria-selected="true"]::before{ width: 18px; margin-right: 0; }

/* Each panel: a wide photo that fades into the section, with the copy rising
   out of the fade. Wide framing keeps most of any landscape photo visible. */
.cap-panels{ display: grid; align-self: start; }
.cap-panel{
  grid-area: 1 / 1;
  display: flex; flex-direction: column;
  visibility: hidden;
}
.cap-panel.active{ visibility: visible; }
.cap-photo{ position: relative; overflow: hidden; background: var(--charcoal-2); aspect-ratio: 16 / 8; }
.cap-photo img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity .7s var(--ease), transform 1.4s var(--ease);
}
.cap-panel.active .cap-photo img{ opacity: 1; transform: none; }
.cap-photo::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(26,22,19,.82) 16%, rgba(26,22,19,.25) 42%, rgba(26,22,19,0) 62%),
    linear-gradient(to right, rgba(26,22,19,.35) 0%, rgba(26,22,19,0) 30%);
}
.cap-panel-body{
  position: relative; z-index: 1;
  margin-top: clamp(-110px, -8vw, -60px);
  padding: 0 clamp(0px, 2.4vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 12px clamp(28px, 4vw, 56px);
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease-soft), transform .6s var(--ease);
}
.cap-panel.active .cap-panel-body{ opacity: 1; transform: none; transition-delay: .12s; }
.cap-count{ font-family: var(--display); font-weight: 600; font-size: .76rem; letter-spacing: .2em; color: var(--red-soft); text-transform: uppercase; }
.cap-panel h3{
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.06;
  margin: 10px 0 14px;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.cap-summary{ color: var(--mist); font-size: 1.02rem; max-width: 46ch; margin-bottom: 8px; }
.cap-details{ display: grid; gap: 10px; align-content: start; grid-column: 2; grid-row: 1 / span 2; margin-top: calc(clamp(60px, 8vw, 110px) + 8px); }
.cap-details li{ position: relative; padding-left: 22px; color: #D9D3C8; font-size: .92rem; line-height: 1.5; }
.cap-details li::before{ content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--red-soft); }
.cap-link{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper); border-bottom: 1px solid var(--red-soft); padding-bottom: 6px;
  grid-column: 1; justify-self: start; align-self: start;
}
.cap-link .arrow{ color: var(--red-soft); transition: transform .4s var(--ease); }
.cap-link:hover .arrow{ transform: translateX(6px); }

@media (max-width: 1000px){
  .cap-panel-body{ grid-template-columns: 1fr; }
  .cap-details{ grid-column: auto; grid-row: auto; margin: 4px 0 18px; }
  .cap-link{ grid-column: auto; }
}
@media (max-width: 860px){
  .cap-photo{ aspect-ratio: 16 / 10; }
  .cap-panel-body{ margin-top: -48px; padding: 0; }
  .cap-link{ margin-top: 8px; }
}
@media (max-width: 860px){
  .cap-tabs{ grid-template-columns: 1fr; gap: 28px; }
  /* Tabs become a swipeable strip on phones instead of a tall list */
  .cap-list{
    flex-direction: row; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px;
    scrollbar-width: none;
  }
  .cap-list::-webkit-scrollbar{ display: none; }
  .cap-tab{
    flex: 0 0 auto; scroll-snap-align: start;
    border: 1px solid var(--hairline-light); padding: 11px 16px; gap: 10px;
    white-space: nowrap;
  }
  .cap-tab:last-child{ border-bottom: 1px solid var(--hairline-light); }
  .cap-tab::before{ display: none; }
  .cap-tab{ width: auto; color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.3); }
  .cap-tab[aria-selected="true"]{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
  /* Swipe hint: the next chip peeks in under a soft fade with a nudging arrow */
  .cap-list-wrap{ position: relative; min-width: 0; }
  .cap-list-wrap::after{
    content: "\2192"; position: absolute; top: 0; bottom: 6px; right: calc(var(--gutter) * -1); width: 70px;
    display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
    background: linear-gradient(to right, rgba(26,22,19,0), rgba(26,22,19,.92) 62%);
    color: var(--red-soft); font-size: 1.2rem; pointer-events: none;
    transition: opacity .35s var(--ease-soft);
    animation: nudge 1.8s var(--ease-soft) infinite;
  }
  .cap-list-wrap.at-end::after{ opacity: 0; }
  /* nudges left: the arrow sits flush with the screen edge, and a nudge to the
     right would briefly widen the page and let it wobble sideways on phones */
  @keyframes nudge{ 0%, 60%, 100%{ transform: none; } 30%{ transform: translateX(-4px); } }
  .cap-tab[aria-selected="true"] .cap-tab-num{ color: var(--red); }
  .cap-tab-label{ font-size: .9rem; }
}

/* ============================================================
   § SELECTED WORK
   ============================================================ */
.work-bar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(26px, 3.5vw, 40px); }
.filters{ display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip{
  font-family: var(--display); font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--hairline-dark);
  color: var(--steel);
  transition: background .35s var(--ease-soft), border-color .35s var(--ease-soft), color .35s var(--ease-soft);
}
.filter-chip sup{ font-size: .7em; margin-left: 4px; opacity: .6; vertical-align: super; }
.filter-chip:hover{ border-color: var(--ink); color: var(--ink); }
.filter-chip[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.work-count{ font-family: var(--serif); font-style: italic; color: var(--fog); }

.work-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(220px, 21vw, 290px);
  grid-auto-flow: dense;
  gap: 14px;
}
.work-card{
  position: relative; overflow: hidden;
  background: var(--charcoal-2);
  text-align: left;
  display: block; width: 100%; height: 100%;
  color: var(--paper);
  transition: opacity 1s var(--ease-soft), transform 1.2s var(--ease);
}
/* Scroll entrance: rise + fade, then the photo itself fades up and settles once it has loaded */
.work-card.reveal{ transform: translateY(44px); }
.work-card.reveal.in{ transform: none; }
.work-card.hidden{ display: none; }
.work-card img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.1s var(--ease-soft), transform 1.6s var(--ease);
}
.work-card img.loaded{ opacity: 1; transform: none; }
.work-card:hover img.loaded, .work-card:focus-visible img.loaded{ transform: scale(1.06); transition: transform 1.1s var(--ease); }
@media (prefers-reduced-motion: reduce){ .work-card.reveal, .work-card img{ transform: none !important; } .work-card img{ transition: opacity .3s; } }
.work-card::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,17,16,.9) 0%, rgba(20,17,16,.5) 38%, rgba(20,17,16,0) 72%);
  transition: opacity .5s var(--ease-soft);
}
.work-card-info{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px; }
.work-card-sector{
  display: inline-block; background: rgba(20,17,16,.72); padding: 4px 9px;
  font-family: var(--display); font-weight: 600; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: #F2B6BD;
}
.work-card-name{
  display: block;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1rem, 1.4vw, 1.22rem); line-height: 1.2; margin-top: 8px;
  text-wrap: balance;
}
.work-card-meta{ display: block; font-size: .8rem; color: #D5CFC4; margin-top: 4px; }
.work-card-cta{
  position: absolute; top: 18px; right: 18px; z-index: 1;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--red); color: var(--paper);
  opacity: 0; transform: translateY(-6px) scale(.9);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.work-card:hover .work-card-cta, .work-card:focus-visible .work-card-cta{ opacity: 1; transform: none; }
@media (hover: none){ .work-card-cta{ display: none; } }
@media (max-width: 640px){
  .work-grid{ grid-auto-rows: 250px; gap: 10px; }
}

/* ---------- Project viewer (native <dialog>) ---------- */
.viewer{
  border: none; padding: 0; margin: auto;
  width: min(1340px, calc(100% - 32px));
  height: min(820px, calc(100% - 32px));
  max-width: none; max-height: none;
  background: var(--ink); color: var(--paper);
  overflow: hidden;
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.viewer.show{ opacity: 1; transform: none; }
.viewer::backdrop{ background: rgba(16,13,12,.86); backdrop-filter: blur(4px); }
.viewer-inner{ display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); height: 100%; }
.viewer-gallery{ position: relative; background: #0F0D0C; display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 0; }
.viewer-stage{ position: relative; overflow: hidden; touch-action: pan-y; min-height: 0; user-select: none; }
.viewer-stage.dragging{ cursor: grabbing; }
.viewer-slides{ position: absolute; inset: 0; }
.slide{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0;
  transform: translate3d(var(--dx, 0), 0, 0) scale(1.02);
  transition: opacity .6s var(--ease-soft), transform .85s var(--ease);
  will-change: opacity, transform;
  -webkit-user-drag: none;
}
.slide.is-current{ opacity: 1; transform: none; }
.slide.is-leaving{ opacity: 0; transform: translate3d(var(--dx, 0), 0, 0) scale(.985); transition: opacity .45s var(--ease-soft), transform .85s var(--ease); }
/* Thin progress line if a photo takes more than a moment to download */
.viewer-stage.is-loading::after{
  content: ""; position: absolute; left: 0; top: 0; z-index: 3; height: 2px; width: 28%;
  background: var(--red-soft);
  animation: loadbar 1.1s var(--ease-soft) infinite;
}
@keyframes loadbar{ from{ transform: translateX(-100%); } to{ transform: translateX(460%); } }
@media (prefers-reduced-motion: reduce){
  .slide, .slide.is-leaving{ transform: none !important; transition: opacity .25s linear; }
}
.viewer-thumbs{ display: flex; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: thin; background: #0F0D0C; }
.viewer-thumbs button{ flex: 0 0 76px; height: 52px; opacity: .45; transition: opacity .35s var(--ease-soft), box-shadow .35s var(--ease-soft); outline-offset: -2px; }
.viewer-thumbs button:hover{ opacity: .8; }
.viewer-thumbs button[aria-current="true"]{ opacity: 1; box-shadow: inset 0 -3px 0 var(--red-soft); }
.viewer-thumbs img{ width: 100%; height: 100%; object-fit: cover; }
.gal-nav{
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(20,17,16,.82); color: var(--paper); font-size: 1.2rem; border: 1px solid rgba(255,255,255,.18);
  transition: background .35s var(--ease-soft);
}
.gal-nav:hover{ background: var(--red); }
.gal-prev{ left: 12px; } .gal-next{ right: 12px; }
.gal-count{
  position: absolute; left: 14px; top: 14px; z-index: 2;
  font-family: var(--display); font-size: .76rem; letter-spacing: .16em;
  background: rgba(20,17,16,.66); padding: 6px 10px; font-variant-numeric: tabular-nums;
}
.viewer-info{ padding: clamp(28px, 3.6vw, 48px); overflow-y: auto; }
.viewer-sector{ font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red-soft); }
.viewer-name{ font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.12; margin: 10px 0 20px; }
.viewer-facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); column-gap: 20px; border-top: 1px solid var(--hairline-light); margin-bottom: 24px; }
.viewer-facts div{ padding: 12px 0; border-bottom: 1px solid var(--hairline-light); }
.viewer-facts dt{ font-family: var(--display); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fog); }
.viewer-facts dd{ font-size: .95rem; margin-top: 2px; }
.viewer-desc p{ color: var(--mist); font-size: .96rem; margin-bottom: 12px; }
.viewer-cta{ margin-top: 20px; }
.viewer-close{
  position: absolute; top: 0; right: 0; z-index: 5;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--red); color: var(--paper); font-size: 1.1rem;
}
.viewer-close:hover{ background: var(--red-deep); }
@media (max-width: 860px){
  .viewer{ width: 100%; height: 100%; }
  .viewer-inner{ grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); overflow-y: auto; }
  .viewer-gallery{ grid-template-rows: auto auto; }
  .viewer-stage{ aspect-ratio: 4 / 3; }
  .viewer-info{ overflow: visible; }
  .gal-nav{ width: 40px; height: 40px; }
}

/* ============================================================
   HERITAGE (dark) — interactive 100-year timeline
   ============================================================ */
.heritage{
  background-color: var(--charcoal);
  /* faint blueprint grid — a nod to the drafting table */
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
}
.century{
  --cpad: clamp(24px, 4vw, 56px);
  border: 1px solid var(--hairline-light);
  background: rgba(20,17,16,.45);
  padding: var(--cpad);
  position: relative; overflow: hidden;
}
.century-head h3{ font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.06; text-wrap: balance; margin-bottom: 18px; }
.century-head p{ color: var(--mist); max-width: 44ch; }
.century-photo{
  position: relative;
  margin: calc(var(--cpad) * -1) calc(var(--cpad) * -1) 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.century-photo img{
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(.18) contrast(1.03) saturate(.92);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%), linear-gradient(to top, transparent 0%, #000 34%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0%, #000 32%), linear-gradient(to top, transparent 0%, #000 34%);
          mask-composite: intersect;
}
.century-photo figcaption{
  position: absolute; right: var(--cpad); bottom: 10px; text-align: right; white-space: nowrap; line-height: 1.5;
  font-family: var(--serif); font-style: italic; font-size: .86rem; color: var(--mist);
}

/* The ruler — every milestone is a clickable marker */
.ruler{ position: relative; height: 112px; }
.ruler-track{ position: absolute; left: 0; right: 0; top: 55px; height: 4px; background: rgba(255,255,255,.12); }
.ruler-fill{
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, var(--red), var(--red-soft));
  transition: width 2.2s var(--ease);
}
.ruler.in .ruler-fill{ width: var(--p); }
.ruler-ticks{ position: absolute; left: 0; right: 0; top: 45px; height: 24px; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 10%);
  -webkit-mask: linear-gradient(#000 0 0) top/100% 7px no-repeat, linear-gradient(#000 0 0) bottom/100% 7px no-repeat;
          mask: linear-gradient(#000 0 0) top/100% 7px no-repeat, linear-gradient(#000 0 0) bottom/100% 7px no-repeat;
}
.ruler-mark{
  position: absolute; top: 25px; width: 48px; height: 64px; margin-left: -24px;
  z-index: 1;
}
.mark-dot{
  position: absolute; left: 50%; top: 32px; width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  background: var(--charcoal); border: 2px solid var(--red-soft); border-radius: 50%;
  transition: width .35s var(--ease), height .35s var(--ease), background .3s;
}
.mark-label{
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  font-family: var(--display); font-weight: 500; font-size: .76rem; letter-spacing: .06em; white-space: nowrap;
  color: var(--fog); font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.ruler-mark.below .mark-label{ top: auto; bottom: 0; }
.ruler-mark:hover .mark-label{ color: var(--paper); }
.ruler-mark:hover .mark-dot{ background: rgba(208,80,94,.35); }
.ruler-mark[aria-pressed="true"] .mark-dot{ width: 18px; height: 18px; background: var(--red-soft); box-shadow: 0 0 0 6px rgba(208,80,94,.22); }
.ruler-mark[aria-pressed="true"] .mark-label{ color: var(--paper); font-weight: 600; }
.ruler-mark.is-now .mark-dot{ animation: pulse 2.6s var(--ease-soft) infinite; }
.ruler-now{ position: absolute; top: 57px; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--red-soft); border-radius: 50%; animation: pulse 2.6s var(--ease-soft) infinite; }
@keyframes pulse{ 0%{ box-shadow: 0 0 0 0 rgba(208,80,94,.45); } 70%, 100%{ box-shadow: 0 0 0 12px rgba(208,80,94,0); } }
.ruler-end{
  position: absolute; right: 0; top: 0;
  font-family: var(--display); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fog);
}
.ruler-end strong{ font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--paper); margin-right: 6px; }

/* The selected event */
.events{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  border-top: 1px solid var(--hairline-light);
  padding-top: clamp(22px, 3vw, 32px); margin-top: 8px;
}
.event-stack{ display: grid; }
.event{
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr); gap: 8px clamp(20px, 3vw, 40px); align-items: baseline; align-content: start;
  visibility: hidden; opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease-soft), transform .55s var(--ease), visibility .4s;
}
.event.active{ visibility: visible; opacity: 1; transform: none; }
.event-year{ font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; color: var(--paper); }
.event-text{ color: var(--mist); font-size: clamp(1rem, 1.3vw, 1.14rem); max-width: 60ch; }
.event-text strong{ color: var(--paper); font-weight: 600; }
.event-nav{ display: flex; align-items: center; gap: 8px; position: relative; }
.event-nav button{ width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--hairline-light); color: var(--paper); transition: border-color .3s, background .3s; }
.event-nav button:hover{ border-color: var(--red-soft); background: rgba(208,80,94,.12); }
.event-count{ font-family: var(--display); font-size: .74rem; letter-spacing: .16em; color: var(--fog); min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 860px){
  .century-photo{ order: -1; margin: calc(var(--cpad) * -1) calc(var(--cpad) * -1) 0; aspect-ratio: auto; }
  .century-photo img{
    aspect-ratio: 16 / 10; height: auto;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 40%);
            mask-image: linear-gradient(to top, transparent 0%, #000 40%);
  }
  .century-photo figcaption{ position: static; text-align: left; white-space: normal; padding: 8px var(--cpad) 20px; }
  .events{ grid-template-columns: 1fr; }
  .event{ grid-template-columns: 1fr; gap: 6px; align-items: start; }
}
@media (max-width: 760px){
  /* Too tight for every year label on a phone: show only the selected one */
  .ruler-mark{ width: 30px; margin-left: -15px; }
  .ruler-mark .mark-label{ display: none; }
  .ruler-mark[aria-pressed="true"] .mark-label{ display: block; top: 0; bottom: auto; }
  .ruler-end{ display: none; }
}

/* ============================================================
   TESTIMONIALS (only shown when the editor has entries)
   ============================================================ */
.testimonials{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.testimonial{ background: var(--paper); border: 1px solid var(--hairline-dark); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; }
.testimonial blockquote{ font-family: var(--serif); font-size: 1.18rem; line-height: 1.5; flex: 1; }
.testimonial blockquote::before{ content: "“"; display: block; font-size: 3.4rem; line-height: .6; color: var(--red); margin-bottom: 10px; }
.testimonial figcaption{ margin-top: 22px; border-top: 1px solid var(--hairline-dark); padding-top: 16px; }
.testimonial .t-name{ font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .86rem; }
.testimonial .t-role{ font-size: .84rem; color: var(--fog); }

/* ============================================================
   QUOTE band
   ============================================================ */
.quote{ background: var(--ink); color: var(--paper); padding: clamp(80px, 11vw, 150px) 0; position: relative; overflow: hidden; }
.quote::before{ content: ""; position: absolute; left: var(--gutter); top: 0; width: 64px; height: 3px; background: var(--red); }
.quote blockquote{ font-family: var(--display); font-weight: 500; line-height: 1.22; font-size: clamp(1.6rem, 3.6vw, 3rem); max-width: 24ch; text-wrap: balance; }
.quote cite{ display: flex; align-items: center; gap: 16px; font-style: normal; margin-top: 34px; }
.quote cite .c-name{ font-family: var(--serif); font-style: italic; font-size: 1.3rem; }
.quote cite .c-role{ font-family: var(--display); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fog); }
.quote cite::before{ content: ""; width: 40px; height: 1px; background: var(--red-soft); }

/* ============================================================
   § CAREERS
   ============================================================ */
.benefits{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  border-top: 1px solid var(--hairline-dark); border-left: 1px solid var(--hairline-dark);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.benefit{
  border-right: 1px solid var(--hairline-dark); border-bottom: 1px solid var(--hairline-dark);
  padding: 22px 20px;
  font-family: var(--display); font-weight: 600; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--paper);
}
.benefit::before{ content: ""; display: block; width: 20px; height: 3px; background: var(--red); margin-bottom: 14px; }
.openings-title{ font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 20px; display: flex; align-items: baseline; gap: 12px; }
.openings-title small{ font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--fog); font-size: 1rem; }
.job{ border: 1px solid var(--hairline-dark); background: var(--paper); margin-bottom: 14px; transition: border-color .3s; }
.job:hover, .job.open{ border-color: rgba(26,22,19,.3); }
.job-toggle{ width: 100%; text-align: left; padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.job-title{ font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.02rem, 1.7vw, 1.3rem); line-height: 1.2; }
.job-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.job-tag{ font-family: var(--display); font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--hairline-dark); color: var(--steel); padding: 5px 10px; }
.job-icon{ flex-shrink: 0; width: 30px; height: 30px; position: relative; }
.job-icon::before, .job-icon::after{ content: ""; position: absolute; background: var(--steel); transition: transform .45s var(--ease), background .3s; }
.job-icon::before{ left: 4px; right: 4px; top: 14px; height: 2px; }
.job-icon::after{ top: 4px; bottom: 4px; left: 14px; width: 2px; }
.job.open .job-icon::after{ transform: scaleY(0); }
.job.open .job-icon::before{ background: var(--red); }
.job-body{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.job.open .job-body{ grid-template-rows: 1fr; }
.job-body > div{ overflow: hidden; }
.job-body-pad{ padding: 0 clamp(20px, 3vw, 34px) clamp(22px, 3vw, 34px); }
.job-desc p{ color: var(--steel); font-size: .96rem; max-width: 70ch; margin-bottom: 10px; }
.job-reqs{ margin: 14px 0 0; max-width: 70ch; }
.job-reqs li{ position: relative; padding-left: 20px; font-size: .92rem; color: var(--steel); margin-bottom: 6px; }
.job-reqs li::before{ content: ""; position: absolute; left: 0; top: .65em; width: 9px; height: 2px; background: var(--red); }
.job-apply{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.job-alt{ color: var(--steel); font-size: .92rem; text-underline-offset: 3px; }
.job-alt:hover{ color: var(--red); }
.job-tag.job-date{ border-style: dashed; color: var(--fog); }
.careers-note{ margin-top: 26px; color: var(--steel); }
.careers-note a{ color: var(--red); font-weight: 600; }

/* ============================================================
   § CONTACT (dark)
   ============================================================ */
.contact-grid{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.contact-head h2{ margin: 18px 0 22px; max-width: 16ch; }
.contact-head .body-lg{ margin-bottom: 34px; }
.office-card{ border: 1px solid var(--hairline-light); padding: clamp(28px, 3.5vw, 44px); background: rgba(255,255,255,.02); }
.office-card h3{ font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--fog); margin-bottom: 20px; }
.office-line{ padding: 14px 0; border-top: 1px solid var(--hairline-light); }
.office-line .k{ font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: .66rem; color: var(--red-soft); display: block; margin-bottom: 4px; }
.office-line a{ text-decoration: none; }
.office-line a:hover{ color: var(--red-soft); }
.socials{ display: flex; gap: 10px; margin-top: 18px; }
.socials a{ width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--hairline-light); transition: border-color .3s, color .3s; }
.socials a:hover{ border-color: var(--red-soft); color: var(--red-soft); }
.socials svg{ width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }
/* Faded street map of our neighborhood behind the section */
#contact{ overflow: hidden; isolation: isolate; }
.contact-map{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .75;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 40%, #000 70%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 40%, #000 70%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-composite: intersect;
}
.contact-map img{ width: 100%; height: 100%; object-fit: cover; }
.office-card{ background: rgba(26,22,19,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.map-credit{
  position: absolute; right: 12px; bottom: 10px;
  font-size: .66rem; color: var(--fog); opacity: .7; text-decoration: none;
}
.map-credit:hover{ opacity: 1; }
@media (max-width: 860px){ .contact-map{ opacity: .45; } }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background: var(--ink); color: var(--mist); border-top: 1px solid var(--hairline-light); padding: clamp(56px, 7vw, 90px) 0 30px; overflow: hidden; }
.foot-grid{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin-bottom: 56px; }
@media (min-width: 1000px){ #footCaps a{ white-space: nowrap; } }
.foot-brand p{ font-size: .9rem; max-width: 34ch; margin-top: 18px; }
.foot-est{ font-family: var(--serif); font-style: italic; color: var(--paper); font-size: 1.05rem; margin-top: 14px; }
.foot-col h4{ font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--fog); margin-bottom: 16px; }
.foot-col a{ display: block; text-decoration: none; font-size: .92rem; color: #D5CFC4; margin-bottom: 10px; transition: color .3s; }
.foot-col a:hover{ color: var(--red-soft); }
.foot-bottom{ border-top: 1px solid var(--hairline-light); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--fog); }
@media (max-width: 860px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .foot-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   WORK — Grid / Map switch and the project map
   ============================================================ */
.work-tools{ display: flex; align-items: center; gap: 18px; }
.view-toggle{ display: inline-flex; border: 1px solid var(--hairline-dark); }
.view-toggle button{
  font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 14px; color: var(--steel);
  transition: background .3s var(--ease-soft), color .3s var(--ease-soft);
}
.view-toggle button[aria-pressed="true"]{ background: var(--ink); color: var(--paper); }
.view-toggle button:not([aria-pressed="true"]):hover{ color: var(--ink); }

.work-map{
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  background: var(--ink); color: var(--paper);
}
.work-map.in{ animation: mapIn .7s var(--ease) both; }
@keyframes mapIn{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
.map-canvas{ position: relative; aspect-ratio: 1311 / 1000; align-self: start; overflow: hidden; }
.map-canvas > img{ position: absolute; inset: 0; width: 100%; height: 100%; }
.map-pins{ position: absolute; inset: 0; }
.map-pin{
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; z-index: 2; place-items: center;
  animation: pinIn .6s var(--ease) both;
}
.map-pin::before{
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--red-soft); border: 2px solid var(--ink);
  box-shadow: 0 0 0 4px rgba(208,80,94,.22);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.map-pin:hover::before, .map-pin.active::before, .map-pin:focus-visible::before{ transform: scale(1.35); box-shadow: 0 0 0 8px rgba(208,80,94,.22); }
.map-pin:focus-visible{ outline: none; }
@keyframes pinIn{ from{ opacity: 0; transform: translateY(-14px) scale(.6); } to{ opacity: 1; transform: none; } }
.map-tip{
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 6px);
  width: max-content; max-width: 230px; padding: 8px 11px;
  background: var(--paper); color: var(--ink); text-align: left;
  font-size: .78rem; line-height: 1.35; pointer-events: none;
  opacity: 0; transition: opacity .25s var(--ease-soft), transform .35s var(--ease);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); z-index: 3;
}
.map-tip b{ display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .78rem; }
.map-pin:hover .map-tip, .map-pin.active .map-tip, .map-pin:focus-visible .map-tip{ opacity: 1; transform: translate(-50%, 0); }
.map-pin:hover, .map-pin.active{ z-index: 4; }
.map-hq{
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  display: grid; place-items: center; text-decoration: none; z-index: 1;
  background: var(--paper); color: var(--red); border-radius: 50%;
  font-family: var(--display); font-weight: 700; font-size: .66rem; letter-spacing: .06em;
  box-shadow: 0 0 0 5px rgba(251,250,247,.18);
}
.map-list{ list-style: none; max-height: 100%; overflow-y: auto; border-left: 1px solid var(--hairline-light); align-self: stretch; }
.work-map .map-list{ position: relative; }
.map-item{ display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--hairline-light); transition: background .3s var(--ease-soft); }
.map-item:hover, .map-item.active{ background: rgba(255,255,255,.06); }
.map-thumb{ width: 64px; height: 46px; background: var(--charcoal-2); overflow: hidden; }
.map-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.map-item-name{ display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: .84rem; line-height: 1.25; letter-spacing: .02em; }
.map-item-meta{ display: block; font-size: .76rem; color: var(--mist); margin-top: 3px; }
@media (min-width: 901px){
  /* list scrolls within the map's height */
  .work-map{ align-items: start; }
  .map-list{ height: 0; min-height: 100%; }
}
@media (max-width: 900px){
  .work-map{ grid-template-columns: 1fr; }
  .map-list{ border-left: none; border-top: 1px solid var(--hairline-light); max-height: 420px; }
  .map-pin{ width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .map-pin::before{ width: 12px; height: 12px; }
  .map-tip{ display: none; }
  .work-tools{ width: 100%; justify-content: space-between; }
}

/* ============================================================
   FORMS — project inquiry & bid list (on dark sections)
   ============================================================ */
.contact-grid{ margin-top: clamp(32px, 4vw, 48px); align-items: start; }
.contact-head .body-lg{ margin-bottom: 0; }
.inquiry{ position: relative; }
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field{ display: flex; flex-direction: column; gap: 7px; }
.field.full{ grid-column: 1 / -1; }
.field > span{ font-family: var(--display); font-weight: 600; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.field em{ font-style: normal; color: var(--red-soft); }
.field input, .field select, .field textarea{
  font: inherit; font-size: 1rem; color: var(--paper);
  background: rgba(20,17,16,.6); border: 1px solid rgba(255,255,255,.2); border-radius: 0;
  padding: 13px 14px; width: 100%;
  transition: border-color .25s var(--ease-soft), background .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field select option{ color: var(--ink); }
.field input::placeholder, .field textarea::placeholder{ color: rgba(255,255,255,.32); }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--red-soft); background-color: rgba(20,17,16,.85); box-shadow: 0 0 0 3px rgba(208,80,94,.18); }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color: var(--red-soft); box-shadow: 0 0 0 3px rgba(208,80,94,.25); }
.field.invalid > span{ color: #F2B6BD; }
.form-foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.form-note{ color: var(--mist); font-size: .9rem; }
.form-note a{ color: var(--paper); }
.form-status{ margin-top: 14px; font-size: .92rem; color: var(--mist); min-height: 1.4em; }
.form-status[data-kind="error"]{ color: #F2B6BD; }
.form-status[data-kind="info"]{ color: var(--paper); }
.inquiry.sending button[type="submit"]{ opacity: .6; cursor: progress; }
.form-done{ border: 1px solid var(--hairline-light); background: rgba(20,17,16,.6); padding: clamp(28px, 4vw, 48px); outline: none; animation: mapIn .6s var(--ease) both; }
.form-check{ display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--red); color: var(--paper); font-size: 1.3rem; margin-bottom: 18px; }
.form-done h3{ font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 1.4rem; margin-bottom: 10px; }
.form-done p{ color: var(--mist); max-width: 52ch; }
@media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   Prequalification steps (Bid With Us drop-down)
   ============================================================ */
.steps{ list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin-bottom: clamp(48px, 6vw, 72px); }
.step{ border-top: 2px solid var(--ink); padding-top: 20px; }
.step-num{ font-family: var(--serif); font-style: italic; color: var(--red); font-size: 1.1rem; }
.step h3{ font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 1.1rem; margin: 8px 0 10px; }
.step p{ color: var(--steel); font-size: .96rem; }
@media (max-width: 860px){
  .steps{ grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE ACTION BAR — call / start a project, always one tap away
   ============================================================ */
.action-bar{ display: none; }
@media (max-width: 760px){
  .action-bar{
    display: grid; grid-template-columns: 1fr 1.4fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(22,19,17,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    gap: 10px;
    transform: translateY(110%);
    transition: transform .5s var(--ease);
  }
  .action-bar.show{ transform: none; }
  .action-bar .btn{ padding: 14px 12px; font-size: .78rem; }
  footer{ padding-bottom: 96px; }
}

/* ============================================================
   FIT-TO-SCREEN (desktop) — sections are sized from the screen height so
   that, reached from the menu, each one's content fits under the nav bar.
   ============================================================ */
@media (min-width: 1081px){
  :root{ --sec-pad: clamp(56px, 8vh, 112px); }
  .sec-head{ margin-bottom: clamp(22px, 3.6vh, 48px); }
  .sec-head .display{ margin-top: 12px; }
  .display{ font-size: clamp(2rem, min(4vw, 6.4vh), 3.5rem); }
  .body-lg{ font-size: clamp(.98rem, min(1.2vw, 2vh), 1.12rem); }

  /* About */
  .approach-photo .frame{ aspect-ratio: auto; height: clamp(300px, calc(100svh - var(--nav-h) - 300px), 620px); }
  .approach-text h2{ font-size: clamp(1.9rem, min(3.6vw, 6vh), 3.1rem); margin: 12px 0 18px; }
  .approach-lede{ font-size: clamp(1rem, min(1.4vw, 2.3vh), 1.22rem); }
  .approach-body{ margin-top: clamp(24px, 4vh, 56px); padding-top: clamp(14px, 2vh, 24px); font-size: clamp(.98rem, min(1.25vw, 2.1vh), 1.14rem); }

  /* Capabilities */
  .cap-photo{ aspect-ratio: auto; height: clamp(200px, calc(100svh - var(--nav-h) - 500px), 440px); }
  .cap-tab{ padding: clamp(9px, 1.5vh, 17px) 0; }
  .cap-panel h3{ font-size: clamp(1.5rem, min(2.8vw, 4.6vh), 2.4rem); }
  .cap-details{ gap: 8px; }
  .cap-details li{ font-size: .9rem; }

  /* Work — shorter rows so more projects fit on screen */
  .work-grid{ grid-auto-rows: clamp(160px, 24vh, 270px); }
  .work-bar{ margin-bottom: clamp(18px, 3vh, 36px); }
  /* cap the map by the screen height — via its width, so pins stay aligned to the drawing */
  .map-canvas{ width: min(100%, calc((100svh - var(--nav-h) - 300px) * 1.311)); justify-self: center; }

  /* Our Story */
  .century-head h3{ font-size: clamp(1.4rem, min(2.6vw, 4.4vh), 2.3rem); margin-bottom: 12px; }
  .event-year{ font-size: clamp(2rem, min(3.4vw, 5.5vh), 3rem); }
  .events{ padding-top: clamp(16px, 2.4vh, 28px); }
}

/* Our Story card: family photo on the left, fading into the card; headline,
   interactive timeline and the selected milestone stacked on the right. */
@media (min-width: 861px){
  .century{ --cpad: clamp(24px, 3.2vw, 48px); }
  .century.has-photo{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 3.5vw, 56px); }
  .century.has-photo .century-photo{
    margin: calc(var(--cpad) * -1) 0 calc(var(--cpad) * -1) calc(var(--cpad) * -1);
    aspect-ratio: auto; min-height: 320px;
  }
  .century.has-photo .century-photo img{
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
            mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  }
  .century.has-photo .century-photo figcaption{
    left: var(--cpad); right: auto; bottom: 14px; text-align: left; white-space: normal; max-width: 80%;
    text-shadow: 0 1px 8px rgba(0,0,0,.6); color: #E2DDD3;
  }
  .century-main{ min-width: 0; }
}

/* ============================================================
   START A PROJECT — compact by default, expands into the form
   ============================================================ */
#contact .contact-grid{ margin-top: 0; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
#contact .inquiry{ display: none; }
.contact-cta{ margin-top: 30px; }
#contact.expanded .contact-grid{ grid-template-columns: 1fr; gap: clamp(20px, 3vh, 36px); }
#contact.expanded .office-card, #contact.expanded .contact-cta{ display: none; }
#contact.expanded .inquiry{ display: block; animation: mapIn .6s var(--ease) both; }
#contact.expanded .contact-head h2{ font-size: clamp(1.8rem, min(3vw, 5vh), 2.6rem); max-width: none; margin: 12px 0 10px; }
#contact.expanded .contact-head .body-lg{ max-width: none; }
#contact.expanded .field textarea{ min-height: 110px; }
.form-close{
  margin-left: auto;
  font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mist); transition: color .3s var(--ease-soft);
}
.form-close:hover{ color: var(--paper); }
@media (min-width: 1180px){ #contact .form-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px){ #contact .contact-grid{ grid-template-columns: 1fr; } }

/* Dropdowns: solid dark menus with light text (a see-through background made
   the open list unreadable on Windows) */
.field select{ background-color: #231E1B; color-scheme: dark; }
.field select option{ background-color: #231E1B; color: #FBFAF7; }

/* Fit-to-screen, round 2 — tighter spacing where sections ran long */
@media (min-width: 1081px){
  /* Work: one-line filter bar and shorter rows, so ~5 projects show at once */
  .filter-chip{ padding: 9px 13px; letter-spacing: .1em; font-size: .72rem; }
  .filters{ gap: 6px; }
  .work-grid{ grid-auto-rows: clamp(150px, 21vh, 240px); gap: 12px; }

  /* Capabilities */
  .cap-photo{ height: clamp(170px, calc(100svh - var(--nav-h) - 500px), 440px); }

  /* Our Story */
  .heritage .sec-head{ margin-bottom: clamp(16px, 2.4vh, 32px); }
  .century{ --cpad: clamp(20px, 3vh, 44px); }
  .century-head p{ font-size: .98rem; }
  .century-head h3{ margin-bottom: 8px; }
  .ruler{ height: 100px; }
  .ruler-track{ top: 49px; }
  .ruler-ticks{ top: 39px; }
  .ruler-mark{ top: 19px; }
  .ruler-now{ top: 51px; }
  .events{ padding-top: 12px; margin-top: 0; }
  .event{ grid-template-columns: minmax(100px, 150px) minmax(0, 1fr); }
  .event-text{ font-size: 1rem; line-height: 1.55; }

  /* Start a Project (expanded) */
  #contact.expanded .field textarea{ min-height: 90px; }
  #contact.expanded .form-grid{ gap: 14px 18px; }
}

/* Short laptop screens (e.g. 1366×768): a little more compact still */
@media (min-width: 1081px) and (max-height: 700px){
  .display{ font-size: clamp(1.8rem, 5.6vh, 2.6rem); }
  .sec-head{ margin-bottom: 16px; }
  .cap-photo{ height: 150px; }
  .cap-details{ gap: 5px; }
  .cap-details li{ font-size: .86rem; }
  .century-head h3{ font-size: 1.5rem; }
  .century-head p{ font-size: .92rem; line-height: 1.5; }
  .event-text{ font-size: .94rem; }
  #contact.expanded .contact-head h2{ font-size: 1.7rem; margin: 8px 0 6px; }
  #contact.expanded .field input, #contact.expanded .field select{ padding: 10px 12px; }
  #contact.expanded .field textarea{ min-height: 70px; padding: 10px 12px; }
  #contact.expanded .form-foot{ margin-top: 16px; }
}

/* ============================================================
   FULL-SCREEN SECTIONS (desktop) — each section is at least one screen
   tall (minus the nav bar) with its content centered, so jumping to it
   from the menu fills the view edge to edge — no letterboxing, no sliver
   of the neighboring section. Taller sections (Work, Careers) just scroll.
   Content is scaled back up a touch now that it has room.
   ============================================================ */
@media (min-width: 1081px){
  main > section.sec{
    min-height: calc(100svh - var(--nav-h));
    display: flex; flex-direction: column; justify-content: center;
  }
  main > section.sec > .container{ width: 100%; }
  .display{ font-size: clamp(2.1rem, min(4.4vw, 6.8vh), 3.8rem); }
  .body-lg{ font-size: clamp(1rem, min(1.25vw, 2.1vh), 1.16rem); }

  /* About */
  .approach-photo .frame{ height: clamp(300px, calc(100svh - var(--nav-h) - 250px), 700px); }
  .approach-text h2{ font-size: clamp(2rem, min(3.8vw, 6.4vh), 3.3rem); }
  .approach-lede{ font-size: clamp(1.02rem, min(1.45vw, 2.4vh), 1.28rem); }

  /* Capabilities */
  .cap-photo{ height: clamp(170px, calc(100svh - var(--nav-h) - 460px), 470px); }

  /* Our Story */
  .century-head h3{ font-size: clamp(1.5rem, min(2.8vw, 4.6vh), 2.5rem); }
  .century-head p{ font-size: clamp(.95rem, min(1.15vw, 1.9vh), 1.08rem); }
  .event-text{ font-size: clamp(.95rem, min(1.2vw, 2vh), 1.12rem); }
  .event-year{ font-size: clamp(2rem, min(3.6vw, 6vh), 3.3rem); }

  /* Start a Project (expanded form) */
  #contact.expanded .contact-head h2{ font-size: clamp(1.8rem, min(3.3vw, 5.6vh), 3rem); }
  #contact.expanded .field textarea{ min-height: clamp(80px, 16vh, 190px); }
  #contact.expanded .form-grid{ gap: clamp(12px, 2vh, 22px) 20px; }
  #contact.expanded .field input, #contact.expanded .field select{ padding-top: clamp(10px, 1.6vh, 15px); padding-bottom: clamp(10px, 1.6vh, 15px); }
}

/* Short laptop screens keep their compact sizing (must stay after the block above) */
@media (min-width: 1081px) and (max-height: 700px){
  .display{ font-size: clamp(1.8rem, 5.6vh, 2.6rem); }
  .cap-photo{ height: 150px; }
  .century-head h3{ font-size: 1.5rem; }
  .century-head p{ font-size: .92rem; }
  .event-text{ font-size: .94rem; }
  #contact.expanded .contact-head h2{ font-size: 1.7rem; }
  #contact.expanded .field textarea{ min-height: 70px; }
}

/* Full-screen sections, final tuning: centering now provides the breathing
   room, so the fixed padding can shrink — content gets the space instead. */
@media (min-width: 1081px){
  main > section.sec{ padding-top: clamp(24px, 3vh, 40px); padding-bottom: clamp(24px, 3vh, 40px); }
  .cap-photo{ height: clamp(170px, calc(100svh - var(--nav-h) - 540px), 470px); }
  .century-head h3{ font-size: clamp(1.5rem, min(2.8vw, 4.2vh), 2.5rem); }
  .event-year{ font-size: clamp(2rem, min(3.6vw, 5.2vh), 3.3rem); }
  #contact.expanded .field textarea{ min-height: clamp(70px, 13vh, 180px); }
}
@media (min-width: 1081px) and (max-height: 700px){
  .cap-photo{ height: 150px; }
  .heritage .sec-head{ margin-bottom: 12px; }
  .century{ --cpad: 18px; }
  .century-head h3{ font-size: 1.3rem; }
  .century-head p{ font-size: .88rem; line-height: 1.45; }
  .event-year{ font-size: 1.8rem; }
  .event-text{ font-size: .9rem; }
  #contact.expanded .contact-head h2{ font-size: 1.5rem; }
  #contact.expanded .contact-head .body-lg{ font-size: .92rem; }
  #contact.expanded .field textarea{ min-height: 56px; }
  #contact.expanded .form-grid{ gap: 10px 16px; }
}

/* Our Story photo: wider column + only a thin fade at the edge, so all three
   generations (Lon, Adam, and Orlando on the right) stay in the frame */
@media (min-width: 861px){
  .century.has-photo{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr); }
  .century.has-photo .century-photo img{
    object-position: 62% 30%;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
}

/* Our Story photo, final: shown at its natural shape (never cropped, so all
   three generations are always in frame), anchored in the card's top-left
   corner and fading into the card on its right and bottom edges. */
@media (min-width: 861px){
  .century.has-photo{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; }
  .century.has-photo .century-photo{
    margin: calc(var(--cpad) * -1) 0 0 calc(var(--cpad) * -1);
    aspect-ratio: 1448 / 1086; min-height: 0; align-self: start;
  }
  .century.has-photo .century-photo img{
    object-position: center;
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%), linear-gradient(to bottom, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, #000 86%, transparent 100%), linear-gradient(to bottom, #000 78%, transparent 100%);
            mask-composite: intersect;
  }
  .century.has-photo .century-photo figcaption{ bottom: 10px; }
}
/* Our Story headline gets more width so it sets in two lines, not three */
@media (min-width: 1081px){ .heritage .sec-head{ grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); } }
@media (min-width: 1081px) and (min-height: 701px) and (max-height: 800px){
  .heritage .display{ font-size: clamp(2rem, 5.8vh, 3rem); }
  .century-head p{ font-size: .94rem; }
  .event-year{ font-size: 2.1rem; }
}

/* Our Story card — timeline on the left, the family photo on the right at the
   card's full height. The photo fades in gradually from its left edge (only
   dirt and trees there) and the timeline overlaps that faded area. Framing is
   anchored right so Orlando, on the far right of the photo, is always in view. */
@media (min-width: 861px){
  .century.has-photo{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; }
  .century.has-photo .century-main{ grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
  .century.has-photo .century-photo{
    grid-column: 2; grid-row: 1;
    margin: calc(var(--cpad) * -1) calc(var(--cpad) * -1) calc(var(--cpad) * -1) calc(-1 * clamp(100px, 12vw, 180px));
    aspect-ratio: auto; min-height: 100%; align-self: stretch; position: relative;
  }
  .century.has-photo .century-photo img{
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    object-position: 100% 35%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, rgba(0,0,0,.8) 24%, #000 36%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, rgba(0,0,0,.8) 24%, #000 36%);
  }
  .century.has-photo .century-photo figcaption{ left: auto; right: var(--cpad); bottom: 14px; text-align: right; max-width: 70%; }
  /* text sitting over the faded edge stays crisp */
  .century.has-photo .century-main{ text-shadow: 0 1px 12px rgba(20,17,16,.7); }

  /* Milestone: year above its text, arrows up beside the year, so the text
     uses the full column width and the card stays compact */
  .events{ display: block; position: relative; padding-top: 16px; }
  .event{ grid-template-columns: 1fr; gap: 6px; }
  .event-text{ max-width: 62ch; }
  .event-nav{ position: absolute; right: 0; top: 16px; }
}
@media (min-width: 861px){ .century.has-photo .event-nav button{ background: rgba(20,17,16,.72); } }
/* An intro paragraph left empty in the editor takes up no space */
.sec-head .body-lg:empty{ display: none; }

/* Timeline milestones: a headline per milestone, and an optional photo that
   cross-fades in over the archive photo while that year is selected */
.event-title{
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.25;
  font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--paper);
  margin-bottom: 8px;
}
.century-photo .photo-milestone{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s var(--ease-soft);
}
.century-photo .photo-milestone.shown{ opacity: 1; }
.century-photo .photo-milestone:not([src]){ display: none; }
@media (max-width: 860px){
  .century-photo{ position: relative; }
  .century-photo .photo-milestone{ bottom: auto; height: auto; aspect-ratio: 16 / 10;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 40%); mask-image: linear-gradient(to top, transparent 0%, #000 40%); }
}

/* ============================================================
   Our Story "immersive" layout (desktop/tablet): the photo fills the section
   and each milestone hangs in a box traced from its marker. Everything here is
   scoped to #heritage[data-layout="immersive"]; set TIMELINE_LAYOUT = '' in
   site.js (renderHeritage) to return to the classic card.
   ============================================================ */
@media (min-width: 861px){
  #heritage[data-layout="immersive"] > .container{
    position: relative; display: flex; flex-direction: column;
    min-height: calc(100svh - var(--nav-h) - 2 * clamp(24px, 3vh, 40px));
  }
  #heritage[data-layout="immersive"] .sec-head,
  #heritage[data-layout="immersive"] .century-main{ position: relative; z-index: 1; }
  #heritage[data-layout="immersive"] .sec-head{ margin-bottom: 14px; }

  /* the card dissolves — the photo becomes the section's backdrop */
  #heritage[data-layout="immersive"] .century.has-photo,
  #heritage[data-layout="immersive"] .century{
    display: flex; flex-direction: column; flex: 1;
    border: none; background: none; padding: 0; overflow: visible;
  }
  #heritage[data-layout="immersive"] .century.has-photo .century-photo{
    position: absolute; inset: 0 var(--gutter); margin: 0; min-height: 0; aspect-ratio: auto;
    overflow: hidden; z-index: 0; pointer-events: none;
  }
  /* sized to the full height and anchored right, so all three men stay in view
     while the left side (just dirt and trees) fades into the dark */
  #heritage[data-layout="immersive"] .century.has-photo .century-photo img{
    position: absolute; top: 0; right: 0; bottom: 0; left: auto;
    height: 100%; width: auto; max-width: none; object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 12%, #000 26%), linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.3) 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 12%, #000 26%), linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.3) 100%);
            mask-composite: intersect;
    filter: sepia(.18) contrast(1.03) saturate(.92) brightness(.82);
  }
  #heritage[data-layout="immersive"] .century.has-photo .century-photo figcaption{
    top: 16px; right: 18px; bottom: auto; left: auto; text-align: right; max-width: 40%;
  }
  #heritage[data-layout="immersive"] .century-main{ flex: 1; display: flex; flex-direction: column; text-shadow: 0 2px 14px rgba(20,17,16,.85); }
  #heritage[data-layout="immersive"] .century-head{ max-width: 460px; }
  #heritage[data-layout="immersive"] .century-head p{ color: #E2DDD3; }

  /* bigger ruler, all year labels above so the drop line has a clear path */
  #heritage[data-layout="immersive"] .ruler{ margin-top: auto; height: 118px; }
  #heritage[data-layout="immersive"] .ruler-track{ top: 68px; height: 5px; background: rgba(255,255,255,.2); }
  #heritage[data-layout="immersive"] .ruler-ticks{ top: 57px; height: 28px; }
  #heritage[data-layout="immersive"] .ruler-mark{ top: 30px; height: 80px; width: 56px; margin-left: -28px; }
  #heritage[data-layout="immersive"] .mark-dot{ top: 40px; width: 16px; height: 16px; border-width: 3px; }
  #heritage[data-layout="immersive"] .ruler-mark[aria-pressed="true"] .mark-dot{ width: 26px; height: 26px; }
  #heritage[data-layout="immersive"] .mark-label,
  #heritage[data-layout="immersive"] .ruler-mark.below .mark-label{ top: 0; bottom: auto; font-size: 1rem; font-weight: 500; color: #CFC9BE; }
  #heritage[data-layout="immersive"] .ruler-mark[aria-pressed="true"] .mark-label{ color: var(--paper); font-weight: 700; }
  #heritage[data-layout="immersive"] .ruler-now{ top: 70px; }
  #heritage[data-layout="immersive"] .ruler-end strong{ font-size: 1.4rem; }

  /* the callout: line drops from the marker, then a box draws itself */
  #heritage[data-layout="immersive"] .events{
    display: block; position: relative; border-top: none; margin-top: 0; padding: 0;
    height: clamp(230px, 30vh, 290px);
  }
  #heritage[data-layout="immersive"] .event-stack{ display: block; position: relative; height: 100%; }
  #heritage[data-layout="immersive"] .event{
    position: absolute; top: 24px; left: 0; width: min(520px, 50%);
    display: block; transform: none; transition: opacity .3s var(--ease-soft), visibility .3s;
  }
  #heritage[data-layout="immersive"] .event-box{
    position: relative; padding: 22px 26px 24px;
    background: rgba(20,17,16,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  #heritage[data-layout="immersive"] .event-box::before,
  #heritage[data-layout="immersive"] .event-box::after{
    content: ""; position: absolute; width: 0; height: 0; border: 2px solid transparent; box-sizing: border-box; pointer-events: none;
  }
  #heritage[data-layout="immersive"] .event-box::before{ top: 0; left: 0; }
  #heritage[data-layout="immersive"] .event-box::after{ bottom: 0; right: 0; }
  /* border draws clockwise from where the line lands: top → right → bottom → left */
  #heritage[data-layout="immersive"] .event.active .event-box::before{
    width: 100%; height: 100%; border-top-color: var(--red-soft); border-right-color: var(--red-soft);
    transition: width .28s linear .32s, height .22s linear .6s;
  }
  #heritage[data-layout="immersive"] .event.active .event-box::after{
    width: 100%; height: 100%; border-bottom-color: var(--red-soft); border-left-color: var(--red-soft);
    transition: border-color 0s linear .82s, width .28s linear .82s, height .22s linear 1.1s;
  }
  #heritage[data-layout="immersive"] .event.active .event-box > *{ animation: calloutText .6s var(--ease) .45s both; }
  @keyframes calloutText{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
  #heritage[data-layout="immersive"] .event-year{ font-size: clamp(2rem, min(3vw, 5vh), 2.8rem); margin-bottom: 6px; }
  #heritage[data-layout="immersive"] .event-text{ font-size: clamp(.95rem, min(1.1vw, 1.9vh), 1.06rem); max-width: none; }
  #heritage[data-layout="immersive"] .event-nav{ position: absolute; right: 0; top: auto; bottom: 0; }
  #heritage[data-layout="immersive"] .event-nav button{ background: rgba(20,17,16,.72); }
}
@media (min-width: 861px) and (prefers-reduced-motion: reduce){
  #heritage[data-layout="immersive"] .event.active .event-box::before,
  #heritage[data-layout="immersive"] .event.active .event-box::after{ transition: none; }
}
@media (min-width: 861px){
  /* photo spans the whole section container, not just the old card */
  #heritage[data-layout="immersive"] .century.has-photo,
  #heritage[data-layout="immersive"] .century{ position: static; }
  #heritage[data-layout="immersive"] .century.has-photo .century-photo{ inset: 0 var(--gutter); }
  /* wider callout so longer stories wrap into fewer lines */
  #heritage[data-layout="immersive"] .event{ width: min(660px, 58%); }
  #heritage[data-layout="immersive"] .event-box{ padding: 18px 24px 20px; }
  #heritage[data-layout="immersive"] .event-year{ font-size: clamp(1.8rem, min(2.6vw, 4.4vh), 2.5rem); margin-bottom: 2px; }
  #heritage[data-layout="immersive"] .event-title{ margin-bottom: 6px; }
  #heritage[data-layout="immersive"] .mark-label,
  #heritage[data-layout="immersive"] .ruler-mark.below .mark-label{ font-size: .9rem; }
  #heritage[data-layout="immersive"] .events{ height: clamp(220px, 29vh, 280px); }
}
@media (min-width: 861px){
  /* photo sits a little lower so the hard hats clear the headline; soft top edge */
  #heritage[data-layout="immersive"] .century.has-photo .century-photo img{
    top: auto; bottom: 0; height: 86%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 12%, #000 26%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 52%, rgba(0,0,0,.3) 100%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 12%, #000 26%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 52%, rgba(0,0,0,.3) 100%);
  }
}
@media (min-width: 861px){
  /* arrows live inside the active box, top-right beside the year */
  #heritage[data-layout="immersive"] .event-box .event-nav{ position: absolute; top: 14px; right: 14px; bottom: auto; gap: 4px; }
  #heritage[data-layout="immersive"] .event-box .event-nav button{ width: 36px; height: 36px; font-size: .9rem; }
  #heritage[data-layout="immersive"] .event-box .event-count{ min-width: 44px; font-size: .68rem; }
  #heritage[data-layout="immersive"] .event-box .event-body{ padding-right: 0; }
  #heritage[data-layout="immersive"] .event-box .event-year{ padding-right: 150px; }
}
@media (min-width: 861px){
  /* year labels all sit above the line, so the centennial marker moves below it */
  #heritage[data-layout="immersive"] .ruler-end{ top: 84px; }
}
@media (min-width: 861px){
  /* the outgoing box disappears at once (no fade), so nothing flashes elsewhere;
     the incoming box has its own line → border → text entrance */
  #heritage[data-layout="immersive"] .event{ transition: none; }
}

/* Immersive timeline, v2 — one continuous stroke instead of line + border steps */
.event-trace{ display: none; }
@media (min-width: 861px){
  #heritage[data-layout="immersive"] .event-box::before,
  #heritage[data-layout="immersive"] .event-box::after{ content: none; }
  #heritage[data-layout="immersive"] .event-trace{
    display: block; position: absolute; left: 0; top: -47.5px; width: 100%;
    overflow: visible; pointer-events: none; z-index: 2;
  }
  #heritage[data-layout="immersive"] .event-trace path{
    fill: none; stroke: var(--red-soft); stroke-width: 2; stroke-linejoin: miter; stroke-linecap: square;
  }
  /* the box's backdrop and text rise in as the line wraps around them */
  #heritage[data-layout="immersive"] .event.active .event-box{ animation: calloutBox .7s var(--ease) .2s both; }
  @keyframes calloutBox{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
  #heritage[data-layout="immersive"] .event.active .event-box > *{ animation: calloutText .7s var(--ease) both; }
  #heritage[data-layout="immersive"] .event.active .event-box > .event-year{ animation-delay: .35s; }
  #heritage[data-layout="immersive"] .event.active .event-box > .event-body{ animation-delay: .47s; }
  #heritage[data-layout="immersive"] .event.active .event-box > .event-nav{ animation-delay: .6s; }
}
@media (min-width: 861px) and (prefers-reduced-motion: reduce){
  #heritage[data-layout="immersive"] .event.active .event-box,
  #heritage[data-layout="immersive"] .event.active .event-box > *{ animation: none; }
}

/* Archive photo fades in once loaded instead of popping */
.century-photo .photo-base{ opacity: 0; transition: opacity .9s var(--ease-soft); }
.century-photo .photo-base.loaded{ opacity: 1; }

/* Loading straight into a section (e.g. /#heritage): keep the page hidden for
   the split second while content, fonts and layout settle, then fade in already
   framed on that section — no visible resizing or jumping. */
main, footer{ transition: opacity .45s var(--ease-soft); }
html.jumping main, html.jumping footer{ opacity: 0; }
/* Narrowest desktop widths: slightly tighter nav so "Bid With Us" fits beside the logo */
@media (min-width: 1081px) and (max-width: 1180px){
  .nav-links{ gap: 16px; }
  .nav-links a{ letter-spacing: .1em; }
  .nav-links .btn{ padding: 12px 18px; }
}

/* Lon's quote: opening and closing marks share one size */
.approach-quote{ --qmark: clamp(2.8rem, 3.6vw, 3.4rem); }
.approach-quote::before{ font-size: var(--qmark); top: -.06em; left: -2px; }
.approach-quote .approach-lede::after{ font-size: var(--qmark); line-height: 0; vertical-align: -.4em; margin-left: .04em; }

/* Timeline callout order: the outline finishes tracing (≈0.9s), THEN the box's
   dark backing fades in, THEN the year, story and arrows follow */
@media (min-width: 861px){
  #heritage[data-layout="immersive"] .event.active .event-box{ animation: calloutBox .45s var(--ease-soft) .88s both; }
  #heritage[data-layout="immersive"] .event.active .event-box > *{ animation: calloutText .55s var(--ease) both; }
  #heritage[data-layout="immersive"] .event.active .event-box > .event-year{ animation-delay: 1.12s; }
  #heritage[data-layout="immersive"] .event.active .event-box > .event-body{ animation-delay: 1.22s; }
  #heritage[data-layout="immersive"] .event.active .event-box > .event-nav{ animation-delay: 1.32s; }
}

/* ============================================================
   BID WITH US — drop-down panel (homepage)
   ============================================================ */
.nav.drawer-open{ background: var(--ink); box-shadow: 0 1px 0 var(--hairline-light); }
.nav.drawer-open::before{ opacity: 0; }
.bid-scrim{
  position: fixed; inset: 0; z-index: 95;
  background: rgba(16,13,12,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .5s var(--ease-soft);
}
.bid-scrim.open{ opacity: 1; }
.bid-drawer{
  position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 98;
  max-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column;
  color: var(--paper);
  background-color: var(--ink);
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
  border-bottom: 2px solid var(--red);
  /* drops down from the nav like a blind being pulled */
  clip-path: inset(0 0 100% 0);
  transition: clip-path .5s var(--ease-soft);
}
.bid-drawer.open{ clip-path: inset(0 0 0 0); transition: clip-path .75s var(--ease); }
.bid-drawer-inner{ overflow-y: auto; overscroll-behavior: contain; padding: clamp(28px, 4vh, 56px) 0 clamp(32px, 5vh, 64px); }
.bid-drawer .container{ position: relative; }
.bid-drawer .loading{ color: var(--mist); padding: 0; }   /* shown only if its content fails to load */
/* contents cascade in just behind the panel's edge */
.bd-step{ opacity: 0; transform: translateY(-16px); transition: opacity .35s var(--ease-soft), transform .5s var(--ease); }
.bid-drawer.open .bd-step{ opacity: 1; transform: none; transition: opacity .6s var(--ease-soft), transform .8s var(--ease); }
.bid-drawer.open .bd-step:nth-of-type(1){ transition-delay: .18s; }
.bid-drawer.open .bd-grid .bd-step:nth-child(1){ transition-delay: .3s; }
.bid-drawer.open .bd-grid .bd-step:nth-child(2){ transition-delay: .42s; }
.bid-drawer-close{
  position: absolute; top: -6px; right: var(--gutter); z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--hairline-light); color: var(--paper); font-size: 1rem;
  transition: background .3s var(--ease-soft), border-color .3s var(--ease-soft), transform .4s var(--ease);
}
.bid-drawer-close:hover{ background: var(--red); border-color: var(--red); transform: rotate(90deg); }
.bd-head{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 80px); align-items: end;
  padding: 0 60px 26px 0; margin-bottom: clamp(24px, 3.5vh, 40px); border-bottom: 1px solid var(--hairline-light); }
.bd-head .eyebrow{ color: var(--fog); }
.bd-head h2{ margin-top: 12px; font-size: clamp(2rem, min(4vw, 6vh), 3.4rem); }
.bd-head h2 em{ color: var(--red-soft); }
.bd-head .body-lg{ color: var(--mist); }
.bd-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); }
.bd-title{ font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin-bottom: 14px; display: flex; gap: 10px; align-items: baseline; }
.bd-title em{ font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--red-soft); }
.bd-title small{ font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--fog); font-size: .9rem; }
.bd-steps{ grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.bd-steps .step{ border-top-color: rgba(255,255,255,.3); padding-top: 14px; }
.bd-steps .step-num{ color: var(--red-soft); }
.bd-steps .step h3{ font-size: .92rem; margin: 6px 0 6px; }
.bd-steps .step p{ color: var(--mist); font-size: .86rem; }
.bd-reqs{ border: 1px solid var(--hairline-light); padding: 18px 22px; background: rgba(255,255,255,.02); }
.bd-reqs h4{ font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: .86rem; letter-spacing: .06em; margin-bottom: 6px; }
.bd-reqs .job-reqs li{ color: var(--mist); font-size: .88rem; }
.bd-reqs .job-reqs li::before{ background: var(--red-soft); }
.bd-reqs .btn{ margin-top: 14px; }
.bd-note{ color: var(--mist); font-size: .88rem; margin-top: 12px; }
.bd-note a{ color: var(--paper); }
@media (max-width: 900px){
  .bd-head, .bd-grid{ grid-template-columns: 1fr; }
  .bd-head{ padding-right: 52px; }
  .bd-steps{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .bid-drawer, .bid-drawer.open, .bd-step, .bid-drawer.open .bd-step{ transition: none; }
}

/* Drop-down fits the screen without scrolling (desktop): three columns,
   one-row header, and spacing that scales with screen height */
.bid-drawer.open .bd-grid .bd-step:nth-child(3){ transition-delay: .54s; }
@media (min-width: 901px){
  .bid-drawer-inner{ padding: clamp(18px, 3vh, 40px) 0 clamp(20px, 3.4vh, 44px); }
  .bd-head{ padding-bottom: clamp(12px, 2vh, 22px); margin-bottom: clamp(14px, 2.6vh, 30px); gap: 12px clamp(28px, 5vw, 80px); }
  .bd-head h2{ margin-top: 8px; font-size: clamp(1.8rem, min(3.4vw, 5.4vh), 3rem); }
  .bd-head .body-lg{ font-size: clamp(.9rem, min(1.1vw, 1.9vh), 1.04rem); line-height: 1.55; }
  .bd-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.35fr); gap: clamp(24px, 3vw, 56px); }
  .bd-title{ margin-bottom: clamp(8px, 1.4vh, 14px); font-size: clamp(.98rem, min(1.3vw, 2.1vh), 1.2rem); }
  /* steps as a compact vertical list */
  .bd-steps{ grid-template-columns: 1fr; gap: clamp(8px, 1.4vh, 14px); margin-bottom: 0; }
  .bd-steps .step{ display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; padding-top: clamp(8px, 1.3vh, 12px); }
  .bd-steps .step-num{ grid-row: 1 / span 2; font-size: 1rem; }
  .bd-steps .step h3{ margin: 0 0 2px; font-size: .86rem; }
  .bd-steps .step p{ font-size: .82rem; line-height: 1.45; }
  .bd-reqs{ padding: clamp(12px, 2vh, 20px) clamp(14px, 1.6vw, 22px); }
  .bd-reqs .job-reqs li{ font-size: .84rem; margin-bottom: 4px; }
  .bd-note{ font-size: .84rem; margin-top: 10px; }
  /* compact form */
  .bid-drawer .form-grid{ gap: clamp(8px, 1.4vh, 14px) 14px; }
  .bid-drawer .field{ gap: 5px; }
  .bid-drawer .field > span{ font-size: .64rem; }
  .bid-drawer .field input, .bid-drawer .field select{ padding: clamp(8px, 1.2vh, 12px) 12px; font-size: .94rem; }
  .bid-drawer .field textarea{ min-height: 0; height: clamp(54px, 9vh, 90px); padding: 10px 12px; font-size: .94rem; }
  .bid-drawer .form-foot{ margin-top: clamp(10px, 1.8vh, 18px); }
  .bid-drawer .btn{ padding: clamp(11px, 1.6vh, 15px) 24px; }
  .bid-drawer .form-status{ margin-top: 6px; min-height: 0; }
}
@media (min-width: 901px) and (max-width: 1180px){
  .bd-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .bd-grid .bd-col:nth-child(2){ grid-column: 1; }
  .bd-grid .bd-col:nth-child(3){ grid-column: 2; grid-row: 1 / span 2; }
}
/* Drop-down on short laptop screens: tighter still, so it never needs to scroll */
@media (min-width: 901px) and (max-height: 720px){
  .bid-drawer-inner{ padding: 14px 0 16px; }
  .bd-head{ padding-bottom: 10px; margin-bottom: 12px; }
  .bd-head .eyebrow{ font-size: .68rem; }
  .bd-head h2{ margin-top: 4px; font-size: 1.7rem; }
  .bd-head .body-lg{ font-size: .86rem; line-height: 1.45; }
  .bd-title{ margin-bottom: 6px; font-size: .95rem; }
  .bd-steps{ gap: 6px; }
  .bd-steps .step{ padding-top: 7px; }
  .bd-steps .step p{ font-size: .78rem; line-height: 1.4; }
  .bd-reqs{ padding: 10px 14px; }
  .bd-reqs h4{ font-size: .8rem; }
  .bd-reqs .job-reqs li{ font-size: .8rem; margin-bottom: 2px; }
  .bid-drawer .form-grid{ gap: 6px 12px; }
  .bid-drawer .field{ gap: 3px; }
  .bid-drawer .field input, .bid-drawer .field select{ padding: 7px 10px; font-size: .9rem; }
  .bid-drawer .field textarea{ height: 44px; padding: 7px 10px; }
  .bid-drawer .form-foot{ margin-top: 8px; }
  .bid-drawer .btn{ padding: 10px 20px; }
}
/* narrow desktops keep three columns too — stacking two of them made the panel too tall */
@media (min-width: 901px) and (max-width: 1180px){
  .bd-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.35fr); gap: 22px; }
  .bd-grid .bd-col:nth-child(2), .bd-grid .bd-col:nth-child(3){ grid-column: auto; grid-row: auto; }
}

/* ============================================================
   HERO BRAND — the big logo and name sit in the hero above the
   "Commercial General Contractor" line and scroll away with it. The
   small nav logo stays hidden until then, and fades in (site.js
   toggles .brand-hidden on the nav).
   ============================================================ */
.hero-brand{
  display: flex; align-items: center; gap: clamp(16px, 1.9vw, 28px);
  width: max-content; max-width: 100%;
  margin-bottom: clamp(18px, 3vh, 30px);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.hero-brand svg{ height: clamp(48px, 6.3vw, 92px); width: auto; flex-shrink: 0; transition: transform .5s var(--ease); }
.hero-brand .logo-text{ font-size: clamp(1.2rem, 2.3vw, 2.3rem); line-height: 1.15; text-shadow: 0 1px 12px rgba(20,17,16,.45); }
.hero-inner:has(.hero-brand){ padding-top: calc(var(--nav-h) + 24px); }   /* the name takes the room the old top gap used */
/* Fades up first, with the rest of the hero */
.hero .hero-brand{ opacity: 0; }
.hero.ready .hero-brand{ animation: heroIn 1.1s var(--ease) both; }

.logo{ user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease), visibility .5s; }
.nav.brand-hidden .logo{ opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; }

.confetti{ position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2000; }

/* ============================================================
   LOGO GLOW — on hover the OA mark (nav logo and the big hero logo)
   gets a red glow in step with the Start a Project button: a quiet
   hint at the Easter egg.
   ============================================================ */
.logo svg, .hero-brand svg{ transition: filter .6s var(--ease-soft); }
.logo:hover svg, .hero-brand:hover svg{
  filter: drop-shadow(0 0 9px rgba(208,80,94,.45)) drop-shadow(0 10px 20px rgba(122,15,25,.4));
}

/* ============================================================
   TIMELINE — "Today" marker and autoplay progress
   ============================================================ */
.ruler-now{ width: 12px; height: 12px; margin: -6px 0 0 -6px; z-index: 2; box-shadow: 0 0 0 3px rgba(20,17,16,.85); }
.ruler-now.on-mark{ background: transparent; box-shadow: none; animation: none; }   /* this year's milestone marker pulses instead */
.now-label{
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  font-family: var(--display); font-weight: 600; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--red-soft); white-space: nowrap; pointer-events: none;
  font-size: .7rem; text-shadow: 0 1px 8px rgba(20,17,16,.9), 0 0 2px rgba(20,17,16,.8);
}
.ruler-now.label-up .now-label{ top: auto; bottom: 18px; }
.ruler-now.on-mark .now-label{ top: 22px; }
/* A thin bar under the arrows fills while autoplay waits on a milestone */
.auto-bar{ position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: rgba(255,255,255,.12); opacity: 0; transition: opacity .4s var(--ease-soft); pointer-events: none; }
.auto-bar i{ display: block; height: 100%; background: var(--red-soft); transform-origin: left center; transform: scaleX(0); }
.autoplaying .auto-bar{ opacity: 1; }
/* Capabilities: the bar runs along the bottom edge of the chosen tab */
.cap-tab{ position: relative; }
.cap-tab .auto-bar{ bottom: -1px; background: transparent; }

/* The timeline block only fades in (no slide). A slide-up is a transform, and a
   transform makes the browser size the full-section photo against this block
   instead of the section, so the photo would load small and then jump. */
@media (min-width: 861px){
  #heritage .century.reveal{ transform: none; transition: opacity .9s var(--ease); }
}

/* ============================================================
   HOLIDAY LOGOS — during a holiday week the OA mark wears a hat
   (site.js). The hat is drawn above the mark's usual box, so the
   box lets it show, and the nav logo drops a touch so the hat
   clears the top of the screen.
   ============================================================ */
svg.holiday-mark{ overflow: visible; }
html[data-holiday] .nav .logo{ margin-top: 14px; }

/* ============================================================
   EXPERIMENT — hero slideshow (site.js: heroSlideshow). Each photo
   sits in its own layer; the incoming one is revealed by a mask
   whose soft edge sweeps left to right.
   ============================================================ */
.hero-slide{ position: absolute; inset: 0; overflow: hidden; }
.hero-slide.wiping{
  -webkit-mask-image: linear-gradient(to right, #000 42%, transparent 58%);
          mask-image: linear-gradient(to right, #000 42%, transparent 58%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: heroWipe 3.6s cubic-bezier(.45, 0, .25, 1) both;
}
@keyframes heroWipe{
  from{ -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to{ -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* ============================================================
   EXPERIMENT — Selected Work pages (site.js: WORK_PAGE_SIZE)
   ============================================================ */
.work-pager{ display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.work-pager[hidden], #workGrid[hidden] ~ .work-pager{ display: none; }
.work-pager button{
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--hairline-dark); color: var(--ink); font-size: 1.05rem;
  transition: border-color .3s, background .3s, color .3s;
}
.work-pager button:hover:not(:disabled){ border-color: var(--red); background: var(--red); color: var(--paper); }
.work-pager button:disabled{ opacity: .3; cursor: default; }
.work-page{ min-width: 64px; text-align: center; font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .2em; color: var(--steel); font-variant-numeric: tabular-nums; }

/* ============================================================
   EXPERIMENT — street map by town (site.js: townMap). Replaces the
   drawn region map once the street map has loaded.
   ============================================================ */
/* doubled up so it beats MapLibre's own .maplibregl-map{ position: relative }, which loads later */
.map-canvas > .map-gl.maplibregl-map, .map-gl{ position: absolute; inset: 0; background: var(--ink); }
.work-map.street .map-canvas > img, .work-map.street .map-pins{ display: none; }
.work-map.map-loading .map-canvas::after{
  content: "Loading street map…"; position: absolute; left: 16px; bottom: 14px; z-index: 5;
  font-family: var(--display); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mist);
}
/* Town markers: a red dot with the town's project count */
.gl-town{ display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer; z-index: 2; }
.gl-town b{
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); color: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: .76rem;
  box-shadow: 0 0 0 4px rgba(208,80,94,.3), 0 4px 12px rgba(0,0,0,.5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
}
.gl-town:hover b, .gl-town:focus-visible b{ transform: scale(1.18); background: var(--red-soft); box-shadow: 0 0 0 9px rgba(208,80,94,.28), 0 4px 12px rgba(0,0,0,.5); }
.gl-town:hover, .gl-town:focus-visible{ z-index: 5; outline: none; }
/* Project dots inside a town */
.gl-dot{ width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; }
.gl-dot::before{
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: var(--red-soft); box-shadow: 0 0 0 4px rgba(208,80,94,.3), 0 4px 12px rgba(0,0,0,.5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gl-dot:hover::before, .gl-dot.active::before, .gl-dot:focus-visible::before{ transform: scale(1.3); box-shadow: 0 0 0 9px rgba(208,80,94,.28), 0 4px 12px rgba(0,0,0,.5); }
.gl-dot:focus-visible{ outline: none; }
.gl-dot:hover .map-tip, .gl-dot.active .map-tip, .gl-dot:focus-visible .map-tip{ opacity: 1; transform: translate(-50%, 0); }
.gl-dot:hover, .gl-dot.active{ z-index: 4; }
/* List header: count, or the town name with a way back */
.map-list-head{
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: var(--ink); border-bottom: 1px solid var(--hairline-light);
  font-family: var(--display); font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mist);
}
.map-list-head span{ color: var(--paper); text-align: right; }
.map-back{ font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--red-soft); padding: 4px 0; }
.map-back:hover{ color: var(--paper); }
/* MapLibre's controls in the site's colors */
.work-map .maplibregl-ctrl-group{ background: rgba(20,17,16,.9); border: 1px solid var(--hairline-light); border-radius: 0; box-shadow: none; }
.work-map .maplibregl-ctrl-group button{ width: 34px; height: 34px; }
.work-map .maplibregl-ctrl-group button + button{ border-top-color: var(--hairline-light); }
.work-map .maplibregl-ctrl-icon{ filter: invert(1); }
/* Map credit: quiet, translucent, in the map's own dark tones */
.work-map .maplibregl-ctrl-attrib,
.work-map .maplibregl-ctrl-attrib.maplibregl-compact{ background: rgba(20,17,16,.55); color: rgba(255,255,255,.38); font-size: 10px; box-shadow: none; }
.work-map .maplibregl-ctrl-attrib a{ color: rgba(255,255,255,.45); }
.work-map .maplibregl-ctrl-attrib a:hover{ color: var(--mist); }
.work-map .maplibregl-ctrl-attrib-button{ background-color: transparent; filter: invert(1); opacity: .45; transition: opacity .3s; }
.work-map .maplibregl-ctrl-attrib-button:hover{ opacity: .85; }

/* Street map fills its whole column (the drawn map kept a fixed shape) */
.work-map.street .map-canvas{ width: 100%; aspect-ratio: auto; min-height: 460px; align-self: stretch; justify-self: stretch; }
@media (max-width: 860px){ .work-map.street .map-canvas{ min-height: 0; aspect-ratio: 4 / 3; } }

/* Selected Work sits at the top of its screen (not centered), so the heading,
   intro and filters stay in the same place whether Grid or Map is showing */
@media (min-width: 1081px){
  #work{ justify-content: flex-start; }
  /* --map-h is measured by site.js: the screen height left below the heading and filters */
  .work-map.street .map-canvas{ min-height: 0; height: var(--map-h, clamp(460px, 60svh, 760px)); }
}

/* Capabilities tabs keep the same size when selected, so the section (and its
   heading) never shifts: the label reserves room for its bold version, and on
   desktop the red dash hangs in the margin instead of pushing the text over. */
.cap-tab-label{ display: grid; }
.cap-tab-label > span, .cap-tab-label::after{ grid-area: 1 / 1; }
.cap-tab-label::after{ content: attr(data-text); font-weight: 600; visibility: hidden; pointer-events: none; }
@media (min-width: 861px){
  .cap-tab::before, .cap-tab[aria-selected="true"]::before{ position: absolute; right: calc(100% + 14px); top: calc(50% - 1px); margin: 0; }
}
/* Tab column just wide enough for the longest name in bold on one line
   ("Historic Restoration & Adaptive Reuse": 38px number + 288px text) */
@media (min-width: 861px){ .cap-tabs{ grid-template-columns: minmax(240px, 334px) minmax(0, 1fr); } }

/* ============================================================
   HERO LEGIBILITY — the slideshow puts busy, colorful photos behind
   the headline, so the text gets a little help: a slightly deeper
   shade on the left where the words sit, a soft dark glow behind the
   text, and a heavier stroke on the red italic accent words.
   ============================================================ */
.hero-media::after{
  background:
    linear-gradient(180deg, rgba(26,22,19,.45) 0%, rgba(26,22,19,.18) 35%, rgba(26,22,19,.55) 62%, rgba(26,22,19,.94) 100%),
    linear-gradient(95deg, rgba(26,22,19,.84) 0%, rgba(26,22,19,.6) 38%, rgba(26,22,19,.22) 62%, rgba(26,22,19,0) 82%);
}
.hero h1, .hero-sub, .hero-eyebrow{ text-shadow: 0 2px 18px rgba(20,17,16,.55); }
.hero h1 em{ font-weight: 400; text-shadow: 0 2px 22px rgba(20,17,16,.8), 0 0 3px rgba(20,17,16,.6); }

/* steady digit widths so a long count-up (1,000,000,000+) doesn't jitter */
.hero-stat .num b{ font-variant-numeric: tabular-nums; }
/* A long figure (1,000,000,000+) is set a little smaller so its unit stays on the same line,
   with room added above so it still lines up along the bottom with the other numbers */
.hero-stat.long .num{
  font-size: clamp(1.05rem, 2.15vw, 2.05rem);
  padding-top: calc((clamp(1.7rem, 2.9vw, 2.6rem) - clamp(1.05rem, 2.15vw, 2.05rem)) * 1.05);
}
@media (max-width: 600px){ .hero-stat.long .num{ padding-top: 0; } }

/* Numbers bar: every stat centered in its box (phones stack them in rows, so they stay left-aligned there) */
@media (min-width: 601px){
  .hero-stat{ text-align: center; }
  .hero-stat .num{ justify-content: center; }
}