/* ============================================================================
   Deevoted — Website Redesign 2026 — CANONICAL Homepage Prototypes (Batch 3)
   SHARED BASE

   Built on the staged canonical strategy (D4/D5/D6), NOT the scrapped
   homepage-prototypes batch. Nav + footer + page spine come from D5/D6 verbatim
   in intent. Locked constraints: mechanism-silence (no AI / pipeline / process
   naming anywhere), team-silent, no unverified stats, wordmark animated-never-
   typeset/never-drawn, Brand Red #ED202D primary + Human Amber the human thread,
   charcoal/off-white system. The three directions share this chrome + spine so
   they differ only in hero + motif (fair comparison).
   ============================================================================ */

:root{
  --near-black:#323132;   /* charcoal canvas */
  --warm-gray:#E7E4E2;    /* off-white type */
  --brand-red:#ED202D;    /* primary accent */
  --human-amber:#D4A374;  /* the human thread */
  --medium-gray:#4D4C4F;  /* structural — NOT for text on charcoal (fails AA) */
  --txt-2:#BDB9B4;        /* AA-safe secondary text on charcoal (~6.5:1) */
  --ink-soft:rgba(231,228,226,.72);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
html,body{ min-height:100%; }
body{
  background:var(--near-black); color:var(--warm-gray);
  font-family:'Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}

/* ---------- locked wordmark (STATIC asset; animated by transform/mask, never drawn, never typeset) ---------- */
.wordmark{ width:min(560px,58vw); height:auto; overflow:visible; }
.wordmark .glyphs path{ fill:var(--warm-gray); }

/* ---------- type ---------- */
.eyebrow{ font-size:clamp(.7rem,1.1vw,.82rem); font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--human-amber); }
.headline{ font-size:clamp(2.4rem,5.6vw,4.4rem); font-weight:800; line-height:1.04; letter-spacing:-.016em; color:var(--warm-gray); }
.subhead{ font-size:clamp(1rem,1.5vw,1.2rem); font-weight:300; line-height:1.5; color:var(--warm-gray); }
.mono{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
.cta-btn{ display:inline-block; background:var(--brand-red); color:#fff; font-size:1rem; font-weight:700; letter-spacing:.01em; padding:.95rem 1.9rem; border-radius:3px; text-decoration:none; border:0; cursor:pointer; font-family:inherit; }
.cta-btn:hover{ filter:brightness(1.06); }

/* ============================================================================
   CANONICAL NAV (D5 §4): Work · Capabilities · Partnerships · About + CTA button.
   Wordmark (top-left) links to Home; Home is not a nav item. Flat, single tier.
   ============================================================================ */
.site-nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; gap:1.5rem;
  padding:1.05rem 6vw; border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease, padding .3s ease; }
/* scrolled state: GEOMETRY ONLY (padding shrink). Glass tint/blur/border are owned by the single
   canonical rule in components.css (.72 black pour + blur(12px)). Consolidated V5 Phase A 2026-06-24. */
.site-nav.scrolled{ padding-top:.7rem; padding-bottom:.7rem; }
.nav-home{ display:flex; align-items:center; flex:none; }
.nav-home .wordmark{ width:124px; }
.nav-links{ display:flex; gap:1.7rem; margin-left:auto; align-items:center; }
.nav-links a{ color:var(--warm-gray); text-decoration:none; font-size:.92rem; font-weight:500; opacity:.84; transition:opacity .2s, color .2s; }
.nav-links a:hover,.nav-links a:focus-visible{ opacity:1; color:#fff; outline:none; }
/* nav CTA: white-on-#ED202D fill. Higher specificity (.nav-links a.nav-cta) is
   required to beat `.nav-links a`. White-on-red is 4.33:1 — AA for LARGE text
   only — so the label is sized >=18.66px bold (1.18rem/700) to qualify. */
.nav-links a.nav-cta{ background:var(--brand-red); color:#fff; opacity:1; font-size:1.18rem; font-weight:700; padding:.5em 1.1em; border-radius:3px; }
.nav-links a.nav-cta:hover{ color:#fff; filter:brightness(1.07); }
@media (max-width:860px){ .nav-links a:not(.nav-cta){ display:none; } .nav-home .wordmark{ width:106px; } .site-nav{ padding:1rem 6vw; } }
/* small phones: the AA-large red CTA can't shrink, so trim the wordmark + gaps so the nav fits */
@media (max-width:480px){ .nav-home .wordmark{ width:74px; } .nav-links a.nav-cta{ padding:.45em .85em; } .site-nav{ gap:.7rem; padding:.9rem 5vw; } }

/* ---------- accessibility chrome (WCAG 2.1 AA) ---------- */
.skip-link{ position:fixed; top:0; left:0; z-index:200; background:var(--warm-gray); color:var(--near-black);
  padding:.7em 1.2em; font-weight:700; text-decoration:none; transform:translateY(-130%); transition:transform .18s ease; }
.skip-link:focus{ transform:translateY(0); outline:3px solid var(--brand-red); outline-offset:2px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible{ outline:3px solid var(--brand-red); outline-offset:2px; border-radius:2px; }
@media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } }

/* ============================================================================
   SHARED SPINE SECTIONS (D6 P01) — identical below the hero across A/B/C.
   ============================================================================ */
.hp-section{ padding:13vh 6vw; border-top:1px solid rgba(231,228,226,.08); position:relative; }
.sec-eyebrow{ display:block; margin-bottom:1.2rem; }
.sec-head{ font-size:clamp(1.9rem,4vw,3.1rem); font-weight:800; line-height:1.07; letter-spacing:-.014em; color:var(--warm-gray); max-width:24ch; }
.sec-lead{ margin-top:1.3rem; max-width:60ch; color:var(--warm-gray); opacity:.82; font-weight:300; line-height:1.55; font-size:clamp(1rem,1.3vw,1.15rem); }

/* positioning / who band (D6 P01 §2) */
.who-grid{ margin-top:2.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:860px){ .who-grid{ grid-template-columns:1fr; } }
.who-item{ padding:1.4rem 1.5rem; border:1px solid rgba(231,228,226,.12); border-radius:6px; background:linear-gradient(165deg,#3a393a,#333233); }
.who-item .k{ font-family:ui-monospace,Menlo,monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--human-amber); }
.who-item .v{ margin-top:.6rem; font-size:1rem; font-weight:300; line-height:1.5; color:var(--warm-gray); opacity:.88; }
.validation-line{ margin-top:2.6rem; font-size:clamp(1.2rem,2.1vw,1.7rem); font-weight:700; line-height:1.25; color:var(--warm-gray); max-width:30ch; }
.validation-line .amber{ color:var(--human-amber); }

/* featured work band (D6 P01 §3) */
.work-grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
@media (max-width:860px){ .work-grid{ grid-template-columns:1fr; } }
.work-card{ text-decoration:none; color:inherit; display:block; }
.work-card .wc-visual{ aspect-ratio:4/3; border-radius:3px; border:1px solid rgba(231,228,226,.12); position:relative; overflow:hidden; }
.work-card .wc-year{ position:absolute; top:.7rem; right:.8rem; font-family:ui-monospace,Menlo,monospace; font-size:.8rem; font-weight:700; color:var(--warm-gray); letter-spacing:.04em; }
.work-card .wc-title{ margin-top:1rem; font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:700; color:var(--warm-gray); }
.work-card .wc-sector{ margin-top:.3rem; font-size:.82rem; letter-spacing:.02em; color:var(--human-amber); }
.work-card .wc-hook{ margin-top:.5rem; font-size:.92rem; font-weight:300; line-height:1.45; color:var(--warm-gray); opacity:.78; }
.band-cta{ display:inline-flex; align-items:center; gap:.5em; margin-top:2.4rem; font-size:1rem; font-weight:600; color:var(--brand-red); text-decoration:none; }

/* capabilities band — six disciplines, Development first (D6 P01 §4 / D5 rule 3) */
.disc-list{ margin-top:2.8rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.2rem 3rem; }
@media (max-width:860px){ .disc-list{ grid-template-columns:1fr; } }
.disc{ display:flex; gap:1.1rem; align-items:baseline; padding:1.1rem 0; border-bottom:1px solid rgba(231,228,226,.1); text-decoration:none; color:inherit; }
.disc .d-i{ font-family:ui-monospace,Menlo,monospace; font-size:.78rem; color:var(--medium-gray); flex:none; width:1.8em; }
.disc .d-n{ font-size:clamp(1.1rem,1.7vw,1.4rem); font-weight:700; color:var(--warm-gray); flex:none; min-width:8.5em; }
.disc .d-c{ font-size:.92rem; font-weight:300; line-height:1.4; color:var(--warm-gray); opacity:.78; }
.disc:hover .d-n{ color:#fff; }

/* proof band (D6 P01 §5) — validation form only, no unverified stats */
.proof-grid{ margin-top:2.8rem; display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; }
@media (max-width:860px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-quote{ font-size:clamp(1.2rem,2vw,1.6rem); font-weight:600; line-height:1.4; color:var(--warm-gray); }
.proof-quote .src{ display:block; margin-top:1rem; font-size:.86rem; font-weight:400; color:var(--human-amber); letter-spacing:.02em; }
.proof-note{ font-size:.85rem; font-weight:300; line-height:1.5; color:var(--medium-gray); align-self:end; }

/* dual entry-intent CTA (D6 P01 §6) */
.dual-cta{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:3rem; }
@media (max-width:860px){ .dual-cta{ grid-template-columns:1fr; } }
.dual-cta .dc{ padding:2rem; border:1px solid rgba(231,228,226,.14); border-radius:6px; }
.dual-cta .dc .q{ font-size:clamp(1.2rem,1.9vw,1.6rem); font-weight:700; color:var(--warm-gray); line-height:1.25; }
.dual-cta .dc .a{ display:inline-block; margin-top:1.2rem; font-weight:700; color:var(--brand-red); text-decoration:none; font-size:1.05rem; }
.dual-cta .dc.partner{ border-top:3px solid var(--human-amber); }
.dual-cta .dc.direct{ border-top:3px solid var(--brand-red); }

/* ============================================================================
   CANONICAL FOOTER (D5 §4) — 4 columns + legal baseline + footer wordmark.
   ============================================================================ */
.site-foot{ padding:8vh 6vw 4vh; border-top:1px solid rgba(231,228,226,.12); }
.foot-cols{ display:grid; grid-template-columns:1.1fr 1fr 1fr 1.2fr; gap:2.4rem; }
@media (max-width:860px){ .foot-cols{ grid-template-columns:1fr 1fr; gap:2rem; } }
.foot-col h4{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--human-amber); margin-bottom:1rem; }
.foot-col a, .foot-col div{ display:block; color:var(--warm-gray); text-decoration:none; font-weight:300; font-size:.92rem; opacity:.82; margin-bottom:.55rem; }
.foot-col a:hover{ opacity:1; color:#fff; }
.foot-col .city{ opacity:.95; font-weight:500; }
/* foot-cta: Brand Red text on charcoal is 2.99:1 — fails AA at this size (and below the
   3.0 large-text floor, so a size bump can't rescue it). Per the red discipline (red as a
   NON-TEXT accent on dark), the label goes to AA-clean warm-gray/700 and the red stays as
   an underline keyline — keeps the CTA distinct from the .82-opacity sibling links and keeps
   the action-red semantic. Hover -> #fff (inherited) + red keyline; both AA-clean. */
.foot-col .foot-cta{ color:var(--warm-gray); font-weight:700; opacity:1;
  text-decoration:underline; text-decoration-color:var(--brand-red); text-decoration-thickness:2px; text-underline-offset:.22em; }
.foot-mark{ margin-top:5vh; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.foot-mark .wordmark{ width:200px; }
/* opacity .64 (5.22:1 on charcoal) not .55 (4.25:1, failed AA) — legal baseline AA-fix, production copy */
.foot-legal{ font-size:.78rem; font-weight:300; color:var(--warm-gray); opacity:.64; display:flex; gap:1.2rem; flex-wrap:wrap; }
.foot-legal a{ color:inherit; text-decoration:none; }

/* reduced-motion base */
.no-motion *{ animation:none !important; }