/* ============================================================
   DIRECTION A — "THE CAROLINA YANKEE"
   The wedge is the brand. Jersey to Carolina, said out loud.
   Type: Archivo only, weight-driven hierarchy. Signage logic.
   ============================================================ */

:root{
  --ink:#1E1E1C;
  --ink-soft:#3A3A36;
  --paper:#F6F4EE;
  --paper-warm:#EFEBE1;
  --green:#7C9939;
  --green-deep:#5E7429;
  --teal:#44989F;
  --teal-deep:#2F7077;
  --white:#FFFFFF;
  --rule:rgba(30,30,28,.14);
  --spring:cubic-bezier(.32,.72,0,1);
  --shell:min(1240px, 100% - 2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Helvetica,system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.shell{width:var(--shell);margin-inline:auto}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s var(--spring),transform .8s var(--spring);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- roofline motif (drawn from his own mark) ---------- */
.roofline{width:100%;height:26px;display:block;overflow:visible}
.roofline path{fill:none;stroke:var(--teal);stroke-width:3.5;stroke-linecap:square;stroke-linejoin:miter;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
  transition:stroke-dashoffset 1.5s var(--spring)}
.roofline.in path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.roofline path{stroke-dashoffset:0;transition:none}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(246,244,238,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.nav-logo{height:34px;width:auto;max-width:190px}
.nav-links{display:none;gap:2rem;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav-links a{text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent;transition:border-color .3s var(--spring),color .3s var(--spring)}
.nav-links a:hover,.nav-links a:focus-visible{border-color:var(--green);color:var(--green-deep)}
@media(min-width:900px){.nav-links{display:flex}}

.call{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--paper);
  text-decoration:none;font-weight:700;font-size:.9rem;letter-spacing:.01em;
  padding:.62rem .6rem .62rem 1.05rem;border-radius:999px;white-space:nowrap;
  transition:transform .15s var(--spring),background .3s var(--spring)}
.call:active{transform:scale(.97)}
.call:hover{background:var(--green-deep)}
.call .puck{width:30px;height:30px;border-radius:999px;background:rgba(246,244,238,.16);
  display:grid;place-items:center;transition:transform .3s var(--spring)}
.call:hover .puck{transform:translateX(3px)}
.call svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ---------- hero ---------- */
.hero{padding:clamp(1.6rem,7vw,5.5rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
/* Phone order is DOM order: headline → face → credential, so his face is above
   the fold on the device most of his traffic arrives on. Desktop restores the
   original two-column composition with the credential under the headline. */
@media(min-width:960px){
  .hero-grid{grid-template-columns:1.32fr .68fr;align-items:center;
    grid-template-rows:auto auto;column-gap:clamp(2rem,4vw,3.5rem);row-gap:0}
  .hero-copy  {grid-column:1;grid-row:1;align-self:end}
  .hero-cred  {grid-column:1;grid-row:2;align-self:start}
  .hero-figure{grid-column:2;grid-row:1 / span 2;align-self:center}
}

.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green-deep);margin:0 0 1.4rem}
.eyebrow span{color:var(--ink);opacity:.42}

h1{
  font-size:clamp(1.9rem,9.6vw,4.6rem);
  font-weight:900;line-height:.93;letter-spacing:-.035em;margin:0;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--green)}
/* ⚠️ must sit AFTER the base h1 rule — equal specificity, so source order decides.
   Placed inside the earlier .hero-grid media block it was silently overridden. */
@media(min-width:960px){h1{font-size:clamp(3.4rem,6.4vw,5.1rem)}}
.hero-cred{margin:2rem 0 0;padding-top:1.4rem;border-top:2px solid var(--ink);
  font-size:.92rem;font-weight:700;letter-spacing:.02em}
.hero-cred span{display:block;font-weight:500;color:var(--ink-soft);letter-spacing:0;margin-top:.15rem}

/* photo panel: tray + screen (doppelrand) */
.frame{background:var(--green);padding:12px;border-radius:2px;
  box-shadow:0 26px 60px -28px rgba(94,116,41,.62)}
.frame-in{background:var(--white);border-radius:1px;overflow:hidden;position:relative}
.frame-in img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.stamp{position:absolute;left:0;bottom:0;right:0;background:var(--ink);color:var(--paper);
  padding:.7rem 1rem;font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:1rem}
.stamp b{color:var(--teal);font-weight:700}

/* ---------- ink band: the name ---------- */
.band-ink{background:var(--ink);color:var(--paper);padding:clamp(3.5rem,8vw,6.5rem) 0;margin-top:clamp(2rem,5vw,4rem)}
.band-ink h2{font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:900;line-height:1.02;letter-spacing:-.03em;margin:0;max-width:16ch}
.band-ink h2 em{font-style:normal;color:var(--teal)}
.band-grid{display:grid;gap:2.2rem}
@media(min-width:900px){.band-grid{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:start}}
.band-body p{margin:0 0 1.15rem;color:rgba(246,244,238,.82);font-size:1.05rem;line-height:1.65;max-width:52ch}
.band-body p:last-child{margin-bottom:0}
.band-body strong{color:var(--paper);font-weight:700}

/* ---------- what I do: asymmetric rows, no cards ---------- */
.sec{padding:clamp(3.5rem,8vw,6.5rem) 0}
.sec-head{display:flex;align-items:baseline;gap:1.2rem;margin:0 0 2.6rem;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:900;letter-spacing:-.03em;margin:0;line-height:1.05}
.sec-kicker{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-deep)}

.rows{border-top:2px solid var(--ink)}
.row{display:grid;gap:.6rem 2rem;padding:clamp(1.6rem,3.4vw,2.6rem) 0;border-bottom:1px solid var(--rule);
  transition:background .35s var(--spring)}
.row:hover{background:var(--paper-warm)}
@media(min-width:820px){.row{grid-template-columns:17rem 1fr;align-items:start}}
.row-t{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0}
.row-b{margin:0;color:var(--ink-soft);max-width:54ch;line-height:1.62}

/* ---------- northeast band ---------- */
.ne{position:relative;isolation:isolate;color:var(--paper);padding:clamp(4rem,10vw,8rem) 0;overflow:hidden;
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
/* ⚠️ The image is declared INLINE ON THE SECTION, not passed in through a custom
   property. A url() inside a custom property is substituted into THIS stylesheet
   and therefore resolves against css/ — which silently 404'd to css/assets/...
   and painted a black band that looked deliberate. Declared in the document, it
   resolves against the document. Found by reading the failed request URL. */
.ne::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(20,20,18,.94) 0%,rgba(20,20,18,.86) 42%,rgba(20,20,18,.46) 100%)}
.ne h2{font-size:clamp(1.9rem,4.6vw,3.5rem);font-weight:900;line-height:1.02;letter-spacing:-.03em;margin:0 0 1.6rem;max-width:17ch}
.ne h2 em{font-style:normal;color:var(--green)}
.ne p{margin:0 0 1.1rem;max-width:48ch;color:rgba(246,244,238,.84);font-size:1.06rem;line-height:1.65}
.ne .tag{display:inline-block;margin:0 0 1.5rem;font-size:.74rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);border-left:3px solid var(--teal);padding-left:.8rem}

/* ---------- knowledge ---------- */
.know{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:920px){.know{grid-template-columns:.9fr 1.1fr;align-items:center}}
.know-photo{background:var(--teal);padding:11px;border-radius:2px;box-shadow:0 24px 54px -30px rgba(47,112,119,.7)}
.know-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 26%}
.know h2{font-size:clamp(1.8rem,4vw,2.9rem);font-weight:900;letter-spacing:-.03em;line-height:1.04;margin:0 0 1.3rem;max-width:15ch}
.know p{margin:0 0 1.05rem;color:var(--ink-soft);max-width:52ch;line-height:1.65}
.pull{margin:1.8rem 0 0;padding:1.15rem 0 0;border-top:2px solid var(--ink);
  font-size:clamp(1.05rem,2vw,1.3rem);font-weight:700;letter-spacing:-.01em;line-height:1.35;max-width:30ch}

/* ---------- contact ---------- */
.cta{background:var(--green);color:var(--white);padding:clamp(3.5rem,8vw,6rem) 0}
.cta-grid{display:grid;gap:2.4rem;align-items:center}
@media(min-width:900px){.cta-grid{grid-template-columns:1.1fr .9fr;gap:clamp(3rem,6vw,5rem)}}
.cta h2{font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:900;letter-spacing:-.03em;line-height:1.03;margin:0 0 1.1rem;max-width:15ch}
.cta p{margin:0;color:rgba(255,255,255,.92);max-width:44ch;line-height:1.62}
.tel{display:inline-flex;align-items:center;gap:.75rem;background:var(--ink);color:var(--paper);
  text-decoration:none;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:900;letter-spacing:-.01em;
  padding:.85rem .85rem .85rem 1.5rem;border-radius:999px;
  transition:transform .15s var(--spring)}
.tel:active{transform:scale(.97)}
.tel .puck{width:38px;height:38px;border-radius:999px;background:rgba(246,244,238,.16);display:grid;place-items:center;transition:transform .3s var(--spring)}
.tel:hover .puck{transform:translateX(4px)}
.tel svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.cta-alt{margin:1.15rem 0 0;font-size:.94rem;color:rgba(255,255,255,.9)}
.cta-alt a{font-weight:700;text-underline-offset:4px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(246,244,238,.68);padding:clamp(2.6rem,5vw,4rem) 0 2rem;font-size:.88rem}
.f-top{display:grid;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(246,244,238,.14)}
@media(min-width:820px){.f-top{grid-template-columns:1.2fr 1fr 1fr;gap:3rem}}
.f-logo{height:40px;width:auto;max-width:210px;margin-bottom:1rem}
.f-h{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin:0 0 .8rem}
.f-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.f-list a{text-decoration:none;transition:color .3s var(--spring)}
.f-list a:hover{color:var(--green)}
.f-bot{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;padding-top:1.6rem;font-size:.8rem}
.eho{display:flex;align-items:center;gap:.7rem;max-width:44ch;line-height:1.45}
.eho svg{flex:0 0 auto;width:26px;height:26px}
.tbc{color:var(--teal);border-bottom:1px dotted currentColor}

/* placeholder marker */
.ph{background:rgba(68,152,159,.18);border-bottom:1px dashed var(--teal);padding:0 .25em;border-radius:2px}

/* ---------- tap targets ----------
   Every discrete target (nav, footer list, buttons, logo) clears 44px.
   Links that sit INLINE INSIDE A SENTENCE are left alone — WCAG 2.5.8
   exempts them, and padding them would break the line box. */
.nav-in > a:first-child{display:inline-flex;align-items:center;min-height:44px}
.nav-links a{display:inline-flex;align-items:center;min-height:44px}
.f-list{gap:.15rem}
.f-list a{display:inline-flex;align-items:center;min-height:44px}
.call{min-height:44px}
.tel{min-height:52px}

/* ---------- contrast corrections ----------
   Measured on glyph pixels, not assumed. #7C9939 is mid-luminance: NOTHING in
   the brand set clears 4.5:1 as body text on it, and it clears nothing as body
   text on paper. It is a large-text / graphic colour. Values solved, not picked.
     white on #7C9939 .... 3.24:1  fail body
     white on #667E2F .... 4.57:1  pass       ← the CTA band darkens to this
     white .95 on #667E2F  4.31:1  fail       ← so the copy is SOLID white
     #7C9939 on paper .... 2.95:1  fail 3.0   ← display accent nudges to #7A9638 (3.06) */
:root{--green-display:#7A9638;--green-body:#667E2F}
h1 em{color:var(--green-display)}
.cta{background:var(--green-body)}
.cta p{color:#FFFFFF}
.cta-alt{color:#FFFFFF}
.ph{color:#4AA5AD;border-bottom-color:#4AA5AD}

/* ============================================================
   INTERIOR PAGES — added 2026-08-20 for the five-page build.
   Nothing here restyles a component the home page already uses;
   these are additions only, so the approved page is untouched.
   ============================================================ */

/* ---------- interior page hero ----------
   Deliberately quieter than the home hero: the home page opens with the
   tagline alone and nothing may compete with that. */
.phero{padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(1.6rem,3vw,2.4rem)}
.phero h1{font-size:clamp(1.9rem,7.4vw,3.5rem);font-weight:900;letter-spacing:-.03em;
  line-height:.98;margin:.5rem 0 0;max-width:16ch}
.phero h1 em{font-style:normal;color:var(--green-deep)}
.phero .lede{margin:1.15rem 0 0;max-width:52ch;font-size:clamp(1.02rem,1.7vw,1.16rem);
  color:var(--ink-soft)}
@media(min-width:960px){.phero h1{font-size:clamp(2.8rem,4.6vw,4rem)}}

/* ---------- prose column ---------- */
.prose{max-width:60ch}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:700}

/* ---------- two-column prose on wide screens ---------- */
.duo{display:grid;gap:clamp(1.6rem,4vw,3.2rem)}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr}}

/* ⛔ THE .gapnote COMPONENT WAS DELETED 2026-08-21, AND ITS ABSENCE IS A DECISION.
   It rendered an internal "needs the client" note onto the client's own page.
   Jason: "we are not going to Justin for hardly anything. we will [fill] the
   pages with copy and if he wants tweaks we make them."
   A question we cannot answer is not a box on his website — it is either copy we
   write and he redlines, or it is a blocker we raise with Jason. Never both, and
   never on the page. ⛔ Do not reintroduce this class.
   Full rule: engagement/voice-and-scope.md · ADR 051. */

/* ---------- contact slab ---------- */
.slab{display:grid;gap:1.4rem;align-content:start}
.slab .line{border-top:1px solid var(--rule);padding-top:.9rem}
.slab .line span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-deep);margin-bottom:.3rem}
.slab .line a{color:inherit;text-decoration:none;font-weight:700;
  font-size:clamp(1.05rem,2.2vw,1.35rem);border-bottom:2px solid var(--green);
  display:inline-flex;align-items:center;min-height:44px}
.slab .line a:hover{color:var(--green-deep)}
.slab .line p{margin:.2rem 0 0;font-size:.95rem;color:var(--ink-soft)}

/* ---------- footer social marks ---------- */
.socials{display:flex;gap:.55rem;margin:1.6rem 0 0;padding-top:1.4rem;
  border-top:1px solid rgba(246,244,238,.14)}
.soc{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;
  color:rgba(246,244,238,.78);background:rgba(246,244,238,.06);
  transition:background .25s var(--spring),color .25s var(--spring)}
.soc svg{width:19px;height:19px}
a.soc:hover,a.soc:focus-visible{background:var(--green);color:var(--white)}
/* ⛔ not a link yet — visibly present, deliberately not interactive, and the
   production gate refuses to ship while any of these remain. */
.soc-off{opacity:.34;cursor:default}