/* ============================================================
   AL County Work — Richmond, VA
   Palette + type built up from the company's real flyer brand:
   navy #061F33 (logo/footer), antique gold #C69A4E (accents).
   ============================================================ */

/* === defensive base — injected by harden_css.py; do not hand-edit === */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-padding-top: calc(var(--nav-h, 72px) + 1rem); }
img, svg, video, iframe, canvas, table { display: block; max-width: 100%; }
p, li, h1, h2, h3, h4, blockquote, td, dd, dt { overflow-wrap: anywhere; }
/* === end defensive base === */

:root{
  --ink:      #0A1D30;
  --ink-deep: #06131F;
  --ink-lift: #14304a;
  --ink-soft: #1d3a55;

  --gold:      #C69A4E;
  --gold-lift: #E3C489;
  --gold-deep: #A87F38;

  --bone:   #F6F4F0;
  --bone-2: #ECE8E0;
  --bone-3: #DCD6CB;
  --slate:  #5C6672;
  --slate-d:#3A424C;

  --line-d: rgba(255,255,255,.13);
  --line-l: rgba(10,29,48,.13);

  --display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --body:    'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  --nav-h: 68px;
  --wrap: 1180px;
  --r: 4px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 700px){ :root{ --nav-h: 60px; } }

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
}
img{ display:block; }
a{ color: inherit; }

.wrap{ width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: clamp(20px, 5vw, 44px); }

/* parked above the viewport, never off to the side — a negative `left`
   registers as horizontal overflow. */
.skip{
  position:absolute; left:12px; top:12px; z-index:200;
  transform: translateY(-300%);
  background: var(--gold); color: var(--ink-deep); padding:12px 18px;
  font-weight:700; font-family: var(--display); text-decoration:none;
  border-radius: var(--r); transition: transform .2s ease;
}
.skip:focus{ transform: translateY(0); }
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--display); font-weight:700; font-size:.94rem;
  letter-spacing:.01em; text-decoration:none;
  padding: 15px 26px; border-radius: var(--r); border:1px solid transparent;
  cursor:pointer; transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
  text-align:center;
}
.btn--gold{ background: var(--gold); color: var(--ink-deep); }
.btn--gold:hover{ background: var(--gold-lift); transform: translateY(-1px); }
.btn--ghost{ border-color: var(--line-d); color:#fff; background: rgba(255,255,255,.04); }
.btn--ghost:hover{ border-color: var(--gold); color: var(--gold-lift); }
.btn--sm{ padding: 11px 18px; font-size:.85rem; }
.btn--lg{ padding: 18px 34px; font-size:1.02rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: sticky; top:0; z-index:100;
  background: rgba(6,19,31,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-d);
}
.nav__in{
  max-width: var(--wrap); margin-inline:auto;
  padding-inline: clamp(20px, 5vw, 44px);
  height: var(--nav-h);
  display:flex; align-items:center; gap: 22px;
}
.nav__brand{ display:flex; align-items:center; flex:0 0 auto; }
/* stacked lockup (mark over wordmark) — below ~40px the wordmark stops reading */
.nav__brand img{ height: 42px; width:auto; }
@media (max-width:700px){ .nav__brand img{ height: 36px; } }

.nav__links{ display:none; gap: 26px; margin-left: 10px; flex:1 1 auto; }
.nav__links a{
  font-family: var(--display); font-weight:600; font-size:.86rem;
  letter-spacing:.03em; text-transform:uppercase;
  color: rgba(255,255,255,.74); text-decoration:none;
  transition: color .2s ease;
}
.nav__links a:hover{ color: var(--gold-lift); }
@media (min-width: 950px){ .nav__links{ display:flex; } }

.nav__act{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.tel-link{
  display:none; font-family: var(--display); font-weight:700; font-size:.9rem;
  color:#fff; text-decoration:none; letter-spacing:.01em;
}
.tel-link:hover{ color: var(--gold-lift); }
@media (min-width: 1080px){ .tel-link{ display:inline; } }
@media (max-width: 460px){ .nav__act .btn--sm{ padding: 10px 13px; font-size:.78rem; } }

.burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:38px; padding:0 9px;
  background:transparent; border:1px solid var(--line-d); border-radius: var(--r);
  cursor:pointer;
}
.burger span{ display:block; height:2px; width:100%; background:#fff; transition: transform .25s ease, opacity .25s ease; }
@media (min-width: 950px){ .burger{ display:none; } }

.mobilemenu{ display:none; }
.mobilemenu.is-open{
  display:flex; flex-direction:column;
  background: var(--ink-deep); border-top:1px solid var(--line-d);
  padding: 10px clamp(20px,5vw,44px) 22px;
}
.mobilemenu a{
  font-family: var(--display); font-weight:600; font-size:1rem;
  text-transform:uppercase; letter-spacing:.03em;
  color:#fff; text-decoration:none; padding:14px 0;
  border-bottom:1px solid var(--line-d);
}
.mobilemenu a:last-child{ border-bottom:0; }
.mobilemenu__tel{ color: var(--gold-lift)!important; }

/* ============================================================
   HERO  — sized to the real viewport; type scales to the
   container (cqi) so nothing clips on a narrow phone.
   ============================================================ */
.hero{
  position:relative; isolation:isolate;
  min-height: calc(100svh - var(--nav-h));
  display:flex; align-items:center;
  container-type: inline-size;
  background: var(--ink);
  color:#fff;
  overflow-x: clip;              /* decorative glow bleeds on purpose */
  padding-block: clamp(28px, 5cqi, 72px);
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 70% at 88% 8%, rgba(198,154,78,.20), transparent 62%),
    radial-gradient(70% 60% at 6% 100%, rgba(29,58,85,.75), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 68%);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background-image: var(--grain);
  opacity:.16; mix-blend-mode:overlay; pointer-events:none;
}
.hero__in{
  width:100%; max-width: var(--wrap); margin-inline:auto;
  padding-inline: clamp(20px, 5vw, 44px);
  display:grid; grid-template-columns: 1fr; gap: clamp(26px, 4cqi, 52px);
  align-items:center;
}
.hero__copy{ display:flex; flex-direction:column; gap: clamp(12px, 1.9cqi, 22px); }

.eyebrow{
  margin:0; display:flex; align-items:center; gap:9px;
  font-family: var(--display); font-weight:600;
  font-size: clamp(.68rem, 1.35cqi, .8rem);
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--gold-lift);
}
.eyebrow__dot{ width:6px; height:6px; background: var(--gold); border-radius:50%; flex:0 0 auto; }

.hero__h1{
  margin:0;
  font-family: var(--display); font-weight:900;
  font-size: clamp(2.35rem, 8.4cqi, 5.1rem);
  line-height:.98; letter-spacing:-.028em;
  text-wrap: balance;
}
.hero__h1 em{
  font-style:normal;
  color: transparent;
  background: linear-gradient(92deg, var(--gold-lift), var(--gold) 58%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
}
.hero__sub{
  margin:0; max-width: 47ch;
  font-size: clamp(.98rem, 1.85cqi, 1.16rem);
  line-height:1.55; color: rgba(255,255,255,.76);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width: 420px){ .hero__cta .btn{ width:100%; } }

.hero__proof{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap: 8px 22px;
  font-family: var(--display); font-weight:600;
  font-size: clamp(.72rem, 1.3cqi, .84rem);
  letter-spacing:.09em; text-transform:uppercase;
  color: rgba(255,255,255,.62);
}
.hero__proof li{ display:flex; align-items:center; gap:9px; }
.hero__proof li::before{
  content:""; width:14px; height:1px; background: var(--gold); flex:0 0 auto;
}

.hero__shot{
  margin:0; position:relative;
  border:1px solid var(--line-d); border-radius: var(--r);
  background: var(--ink-lift); overflow:hidden;
  box-shadow: 0 26px 60px -28px rgba(0,0,0,.85);
}
.hero__shot img{ width:100%; object-fit:cover; }
.hero__shot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 26px 18px 13px;
  background: linear-gradient(to top, rgba(6,19,31,.95), transparent);
  font-family: var(--display); font-weight:600; font-size:.76rem;
  letter-spacing:.11em; text-transform:uppercase; color: rgba(255,255,255,.85);
}
/* phone: a compact band, hard-capped so the CTAs and proof line can never
   be pushed past the fold. */
@media (max-width: 899px){
  /* scales with the container so tablets get a properly proportioned band
     instead of a letterbox, while phones stay short enough to clear the fold */
  .hero__shot img{ height: clamp(140px, 24cqi, 230px); }
  .hero__shot figcaption{ padding: 22px 15px 11px; font-size:.7rem; }
}
@media (min-width: 900px){
  .hero__in{ grid-template-columns: 1.06fr .94fr; }
  .hero__shot img{ height:auto; max-height: 56svh; }
}

/* ============================================================
   SERVICE STRIP
   ============================================================ */
.strip{ background: var(--ink-deep); border-block: 1px solid var(--line-d); }
.strip__in{
  max-width: var(--wrap); margin-inline:auto;
  padding: 15px clamp(20px,5vw,44px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap: 9px 16px;
  font-family: var(--display); font-weight:600; font-size:.76rem;
  letter-spacing:.15em; text-transform:uppercase; color: rgba(255,255,255,.6);
}
.strip__in i{ width:5px; height:5px; background: var(--gold); border-radius:50%; opacity:.85; }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding-block: clamp(64px, 9vw, 118px); }
.sec--light{ background: var(--bone); }
.sec--dark{ background: var(--ink); color:#fff; }

.kicker{
  margin:0 0 14px;
  font-family: var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.19em; text-transform:uppercase; color: var(--gold-deep);
}
.sec--dark .kicker{ color: var(--gold); }

.sec__h2{
  margin:0;
  font-family: var(--display); font-weight:900;
  font-size: clamp(2rem, 5.4vw, 3.5rem);
  line-height:1.0; letter-spacing:-.025em;
}
.sec__lede{
  margin:16px 0 0; max-width: 52ch;
  font-size: 1.04rem; line-height:1.62; color: var(--slate);
}
.sec--dark .sec__lede{ color: rgba(255,255,255,.68); }

.sec__head{ margin-bottom: clamp(38px, 5vw, 62px); }
.sec__head--split{ display:grid; gap:20px; }
@media (min-width: 900px){
  .sec__head--split{ grid-template-columns: 1fr .9fr; align-items:end; gap:44px; }
  .sec__head--split .sec__lede{ margin:0; }
}

/* ---------- services ---------- */
.svc{
  list-style:none; margin:0; padding:0;
  display:grid; gap: 1px;
  background: var(--line-l);
  border: 1px solid var(--line-l);
  grid-template-columns: 1fr;
}
@media (min-width: 640px){ .svc{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .svc{ grid-template-columns: repeat(4,1fr); } }

.svc__i{
  background: var(--bone);
  padding: 30px 26px 34px;
  display:flex; flex-direction:column; gap:9px;
  transition: background .25s ease;
}
.svc__i:hover{ background: #fff; }
.svc__n{
  font-family: var(--display); font-weight:800; font-size:.78rem;
  letter-spacing:.12em; color: var(--gold-deep);
}
.svc__i h3{
  margin:0; font-family: var(--display); font-weight:800;
  font-size: 1.22rem; letter-spacing:-.015em; line-height:1.15;
}
.svc__i p{ margin:0; font-size:.95rem; line-height:1.58; color: var(--slate); }
.svc__i--cta{ background: var(--ink); color:#fff; }
.svc__i--cta:hover{ background: var(--ink-lift); }
.svc__i--cta p{ color: rgba(255,255,255,.72); }
.svc__i--cta .btn{ margin-top:6px; align-self:flex-start; }

/* ---------- gallery ---------- */
.gal{ display:grid; gap: 14px; grid-template-columns: 1fr; }
.gal__i{
  position:relative; margin:0; overflow:hidden;
  border-radius: var(--r); background: var(--ink-lift);
  aspect-ratio: 4/3;
}
.gal__i img{ width:100%; height:100%; object-fit:cover; }
.gal__i figcaption{
  position:absolute; inset:auto 0 0 0;
  display:flex; flex-direction:column; gap:2px;
  padding: 40px 18px 15px;
  background: linear-gradient(to top, rgba(6,19,31,.94) 12%, rgba(6,19,31,.55) 55%, transparent);
  color:#fff; font-size:.86rem; line-height:1.4;
}
.gal__i figcaption b{
  font-family: var(--display); font-weight:700; font-size:.73rem;
  letter-spacing:.15em; text-transform:uppercase; color: var(--gold-lift);
}
.gal__i--b{ aspect-ratio: 1/1; }

@media (min-width: 640px){
  .gal{ grid-template-columns: repeat(2,1fr); }
  .gal__i--a{ grid-column: 1 / -1; }
  /* even rows in the 2-up layout — the portrait ratio would otherwise leave a
     dead gap under its shorter row-mate. Portrait returns at >=1000px. */
  .gal__i--b{ aspect-ratio: 4/3; }
}
@media (min-width: 1000px){
  .gal{ grid-template-columns: repeat(6,1fr); align-items:start; gap:16px; }
  .gal__i--a{ grid-column: span 4; aspect-ratio: 4/3; }
  .gal__i--b{ grid-column: span 2; aspect-ratio: 62/100; }
  .gal__i--c,
  .gal__i--d,
  .gal__i--e{ grid-column: span 2; aspect-ratio: 1/1; }
}

/* ---------- process ---------- */
.steps{
  list-style:none; margin:0 0 clamp(44px,6vw,68px); padding:0;
  display:grid; gap: 30px 34px; grid-template-columns: 1fr;
  counter-reset: s;
}
@media (min-width: 700px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1050px){ .steps{ grid-template-columns: repeat(4,1fr); } }
.steps li{ display:flex; flex-direction:column; gap:10px; padding-top:22px; border-top:2px solid var(--ink); }
.steps__n{
  font-family: var(--display); font-weight:900; font-size:2.4rem;
  line-height:1; color: var(--gold); letter-spacing:-.03em;
}
.steps li h3{ margin:0; font-family: var(--display); font-weight:800; font-size:1.16rem; letter-spacing:-.015em; }
.steps li p{ margin:0; font-size:.95rem; line-height:1.58; color: var(--slate); }
.steps li a{ color: var(--ink); text-decoration-color: var(--gold); text-underline-offset:3px; font-weight:600; }

.seals{
  display:grid; gap:1px; background: var(--line-l);
  border:1px solid var(--line-l); grid-template-columns: 1fr;
}
@media (min-width: 620px){ .seals{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .seals{ grid-template-columns: repeat(4,1fr); } }
.seal{ background: var(--bone); padding: 24px 22px; display:flex; flex-direction:column; gap:3px; }
.seal__ic{ color: var(--gold); font-size:.7rem; line-height:1; }
.seal b{ font-family: var(--display); font-weight:800; font-size:1rem; letter-spacing:-.01em; }
.seal i{ font-style:normal; font-size:.88rem; color: var(--slate); }

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; isolation:isolate; color:#fff; padding-block: clamp(72px, 10vw, 128px); overflow-x: clip; }
.cta__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(80% 90% at 82% 12%, rgba(198,154,78,.22), transparent 60%),
    linear-gradient(150deg, var(--ink-lift), var(--ink-deep) 72%);
}
.cta__bg::after{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.15; mix-blend-mode:overlay; }
.cta__in{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.cta__h{
  margin:0; font-family: var(--display); font-weight:900;
  font-size: clamp(2.1rem, 6.4vw, 4.2rem); line-height:1.0; letter-spacing:-.03em;
}
.cta__h em{ font-family: var(--serif); font-style:italic; font-weight:400; color: var(--gold-lift); letter-spacing:-.01em; }
.cta__sub{ margin:0; max-width: 50ch; font-size:1.05rem; line-height:1.6; color: rgba(255,255,255,.74); }
.cta__act{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 16px 30px; margin-top:8px; }
.cta__tel{ text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:1px; }
.cta__tel span{
  font-family: var(--display); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color: rgba(255,255,255,.55);
}
.cta__tel b{ font-family: var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.01em; color:#fff; }
.cta__tel:hover b{ color: var(--gold-lift); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background: var(--ink-deep); color: rgba(255,255,255,.72); padding-top: clamp(52px,7vw,78px); }
.foot__in{ display:grid; gap:38px; grid-template-columns: 1fr; padding-bottom: clamp(38px,5vw,56px); }
/* tablet: brand across the top, the two link columns side by side — a single
   stacked column leaves the right half of an iPad footer empty. */
@media (min-width: 620px){
  .foot__in{ grid-template-columns: 1fr 1fr; gap: 34px 40px; }
  .foot__brand{ grid-column: 1 / -1; }
}
@media (min-width: 900px){
  .foot__in{ grid-template-columns: 1.5fr 1fr 1fr; gap:46px; }
  .foot__brand{ grid-column: auto; }
}
.foot__brand img{ height:58px; width:auto; margin-bottom:18px; }
.foot__brand p{ margin:0; max-width:34ch; font-size:.94rem; line-height:1.6; color: rgba(255,255,255,.6); }
.foot__col h4{
  margin:0 0 14px; font-family: var(--display); font-weight:700; font-size:.76rem;
  letter-spacing:.17em; text-transform:uppercase; color: var(--gold);
}
.foot__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.94rem; }
.foot__col a{ text-decoration:none; transition: color .2s ease; }
.foot__col a:hover{ color: var(--gold-lift); }
/* rule drawn inside the wrap padding so it lines up with the columns above,
   instead of overhanging them by the gutter width */
.foot__bar{
  position:relative; padding-block:22px;
  display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:space-between;
  font-size:.85rem; color: rgba(255,255,255,.45);
}
.foot__bar::before{
  content:""; position:absolute; top:0;
  left: clamp(20px,5vw,44px); right: clamp(20px,5vw,44px);
  height:1px; background: var(--line-d);
}
.foot__bar a{ text-decoration:none; color: var(--gold); font-weight:600; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.chero{
  position:relative; isolation:isolate; color:#fff;
  padding-block: clamp(52px, 8vw, 96px);
  container-type: inline-size; overflow-x: clip;
}
.chero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(85% 80% at 85% 6%, rgba(198,154,78,.20), transparent 62%),
    linear-gradient(158deg, var(--ink) 0%, var(--ink-deep) 72%);
}
.chero__bg::after{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.15; mix-blend-mode:overlay; }
.chero__in{ display:flex; flex-direction:column; gap: clamp(12px,1.8cqi,20px); }
.chero__h1{
  margin:0; font-family: var(--display); font-weight:900;
  font-size: clamp(2.2rem, 7.4cqi, 4.4rem); line-height:1.0; letter-spacing:-.03em;
}
.chero__h1 em{ font-family: var(--serif); font-style:italic; font-weight:400; color: var(--gold-lift); letter-spacing:-.01em; }
.chero__sub{ margin:0; max-width: 54ch; font-size: clamp(.98rem,1.8cqi,1.12rem); line-height:1.6; color: rgba(255,255,255,.75); }

.contact-grid{ display:grid; gap: 40px; grid-template-columns: 1fr; align-items:start; }
@media (min-width: 940px){ .contact-grid{ grid-template-columns: 1.15fr .85fr; gap: 54px; } }

/* ---------- form ---------- */
.formcard{ background:#fff; border:1px solid var(--line-l); border-radius: var(--r); padding: clamp(26px,3.6vw,44px); }
.formcard__h{ margin:0; font-family: var(--display); font-weight:900; font-size: clamp(1.5rem,3.4vw,2.1rem); letter-spacing:-.024em; line-height:1.08; }
.formcard__note{ margin:9px 0 26px; font-size:.96rem; color: var(--slate); }
.form-fields{ display:flex; flex-direction:column; gap:18px; }
/* a class that sets `display` beats the [hidden] attribute — without this the
   fields never collapse on submit and the page grows instead of holding still. */
.form-fields[hidden]{ display:none; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{
  font-family: var(--display); font-weight:700; font-size:.78rem;
  letter-spacing:.11em; text-transform:uppercase; color: var(--slate-d);
}
.field label span{ font-weight:500; text-transform:none; letter-spacing:.01em; color: var(--slate); }
.field input,
.field textarea{
  font-family: var(--body); font-size:1rem; color: var(--ink);
  padding: 13px 15px; background: var(--bone);
  border:1px solid var(--bone-3); border-radius: var(--r);
  transition: border-color .2s ease, background .2s ease;
  width:100%;
}
.field textarea{ resize:vertical; min-height:112px; line-height:1.55; }
.field input::placeholder,
.field textarea::placeholder{ color:#9aa2ab; }
.field input:focus,
.field textarea:focus{ outline:none; border-color: var(--gold); background:#fff; box-shadow: 0 0 0 3px rgba(198,154,78,.18); }

.formcard__submit{ width:100%; margin-top:22px; }
.formcard__submit.is-sent,
.formcard__submit:disabled{ background: var(--ink); color:#fff; opacity:1; }
.formcard__submit.is-sent{ border-color: var(--ink); }

.form-status{
  margin:18px 0 0; padding:15px 17px; border-radius: var(--r);
  font-size:.96rem; line-height:1.55; border-left:3px solid var(--gold);
  background: var(--bone-2); color: var(--slate-d);
}
.form-status.is-ok{ border-left-color: var(--gold); background:#FBF6EC; color: var(--ink); }
.form-status.is-err{ border-left-color:#B4462F; background:#FBEEEB; color:#7C2E1E; }

/* ---------- direct-contact column ---------- */
.reach__h{ margin:0; font-family: var(--display); font-weight:900; font-size: clamp(1.4rem,3vw,1.85rem); letter-spacing:-.022em; }
.reach__lede{ margin:9px 0 22px; font-size:.98rem; color: var(--slate); }
.reach__card{
  display:flex; flex-direction:column; gap:2px; text-decoration:none;
  padding: 20px 22px; margin-bottom:12px;
  background: var(--ink); color:#fff; border-radius: var(--r);
  border:1px solid var(--ink); transition: background .22s ease, transform .22s ease;
}
.reach__card:hover{ background: var(--ink-lift); transform: translateY(-2px); }
.reach__card--gold{ background: var(--gold); border-color: var(--gold); color: var(--ink-deep); }
.reach__card--gold:hover{ background: var(--gold-lift); }
.reach__k{ font-family: var(--display); font-weight:600; font-size:.71rem; letter-spacing:.16em; text-transform:uppercase; opacity:.7; }
.reach__card b{ font-family: var(--display); font-weight:800; font-size:1.55rem; letter-spacing:-.015em; line-height:1.15; }
.reach__card i{ font-style:normal; font-size:.88rem; opacity:.82; }

.reach__facts{ margin-top:26px; border-top:1px solid var(--line-l); }
.reach__facts div{ display:flex; flex-direction:column; gap:1px; padding:15px 0; border-bottom:1px solid var(--line-l); }
.reach__facts span{ font-family: var(--display); font-weight:600; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color: var(--gold-deep); }
.reach__facts b{ font-family: var(--body); font-weight:500; font-size:.98rem; color: var(--ink); }

.reach__svcs{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.reach__svcs li{
  font-family: var(--display); font-weight:600; font-size:.74rem;
  letter-spacing:.06em; text-transform:uppercase; color: var(--slate-d);
  padding:7px 12px; border:1px solid var(--line-l); border-radius:100px; background:#fff;
}

/* ============================================================
   SCROLL REVEAL — below the fold only (never the hero/header:
   an opacity:0 LCP element can't paint until JS runs).
   ============================================================ */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
  .reveal{ opacity:1!important; transform:none!important; }
}

/* Cloudflare Turnstile widget (injected by ensure_turnstile.py) */
.turnstile-box { margin-bottom: 1.25rem; min-height: 65px; }