/* PolyForm public redesign — terracotta/blueprint marketing surface.
   Loaded AFTER tokens.css + public.css on every public page (base_public.html).
   Ported from the design handoff's redesign-concepts.css (Concept C "Warm
   Workshop" + blueprint hero). The design's local var names are aliased onto
   the app's --pf-* token layer here, so the ported component rules below use
   --navy / --terra / --f verbatim and stay single-sourced in tokens.css.
   Scoped under .fr (the site wrapper in base_public) so it never touches the
   console. Unused during a page's pre-redesign transition = harmless. */

:root{
  --navy:var(--pf-dark); --navy-2:var(--pf-navy-2); --navy-3:var(--pf-navy-3);
  --blue:var(--pf-blue); --blue-lite:var(--pf-blue-lite); --blue-dk:var(--pf-blue-dk);
  --terra:var(--pf-terracotta); --terra-lite:var(--pf-terra-lite); --terra-dk:var(--pf-terra-dk);
  --on-dark:var(--pf-on-dark); --muted-dark:var(--pf-muted-dark);
  --paper:var(--pf-surface); --paper-2:var(--pf-paper-2); --warm:var(--pf-warm); --warm-2:var(--pf-surface);
  --ink:var(--pf-text); --muted:var(--pf-muted);
  --line:var(--pf-line); --line-2:var(--pf-border); --line-3:var(--pf-border);
  --f:'PFInter',var(--pf-font); --mono:var(--pf-mono);
}

/* self-hosted PFInter (Phase 0 assets) */
@font-face{font-family:'PFInter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/site/fonts/inter-r-400.woff2') format('woff2');}
@font-face{font-family:'PFInter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/site/fonts/inter-r-500.woff2') format('woff2');}
@font-face{font-family:'PFInter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/site/fonts/inter-r-600.woff2') format('woff2');}
@font-face{font-family:'PFInter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/site/fonts/inter-r-700.woff2') format('woff2');}

html{scroll-behavior:smooth}
/* production site frame (replaces the mockup .fr device-frame + canvas) */
.fr{width:100%;font-family:var(--f);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.fr *{box-sizing:border-box}
.fr img{display:block}

/* ======================= ported component library ======================= */
/* ════════════════════ SHARED ATOMS ════════════════════ */
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--terra)}
.eyebrow.on-dark{color:var(--terra-lite)}
.idx{font-family:var(--mono);font-weight:600}
.mono{font-family:var(--mono)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f);font-size:15px;font-weight:600;border-radius:9px;padding:14px 22px;text-decoration:none;cursor:pointer;border:0;transition:background .16s,transform .16s,box-shadow .16s,color .16s;white-space:nowrap}
.btn.primary{background:var(--terra);color:#fff;box-shadow:0 6px 16px rgba(197,102,48,.28)}
.btn.primary:hover{background:var(--terra-dk)}
.btn.blue{background:var(--blue);color:#fff}
.btn.ghost{background:transparent;color:var(--blue);border:1.5px solid var(--line)}
.btn.ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.28)}
.btn .ar{font-size:17px;line-height:1}
.link{color:var(--blue);font-weight:600;text-decoration:none;font-size:14.5px;display:inline-flex;align-items:center;gap:6px}
.link:hover{text-decoration:underline}
.link.on-dark{color:var(--blue-lite)}

/* blueprint grid + dimension callout */
.bgrid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(91,155,213,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(91,155,213,.10) 1px,transparent 1px);
  background-size:40px 40px}
.dim{position:absolute;z-index:5;font-family:var(--mono);font-size:11px;letter-spacing:.6px;color:#9fc0db;background:rgba(8,18,27,.82);border:1px solid rgba(91,155,213,.42);border-radius:4px;padding:4px 8px;white-space:nowrap}
.dim.light{color:var(--blue);background:#fff;border-color:var(--line)}
.dim::before{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--terra-lite)}

/* section + headings */
.sec{padding:84px 64px}
.sec-narrow{padding:72px 64px}
.h2{font-size:42px;font-weight:700;letter-spacing:-1px;line-height:1.04;color:var(--navy);margin:14px 0 0}
.h2 .accent{color:var(--terra)}
.lede{font-size:18px;line-height:1.55;color:var(--muted);font-weight:500;margin-top:16px;max-width:62ch}

/* nav (shared base) */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 40px}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.nav-logo img{width:38px;height:38px;border-radius:8px}
.nav-logo .nm{font-size:16px;font-weight:700;line-height:1.1}
.nav-logo .sb{font-size:11.5px;font-weight:500}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14px;font-weight:500;text-decoration:none;transition:color .16s}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:34px 64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item{display:flex;flex-direction:column;gap:3px}
.trust-item .ti-k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--terra)}
.trust-item strong{font-size:16px;font-weight:700;color:var(--ink)}
.trust-item span{font-size:13px;color:var(--muted)}

/* spec ledger (Material / Fit / Turnaround) */
.ledger{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ledger .cell{flex:1;padding:20px 0;border-right:1px solid var(--line)}
.ledger .cell:last-child{border-right:0}
.ledger .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.ledger .v{font-size:23px;font-weight:700;margin-top:7px;color:var(--navy);letter-spacing:-.3px}
.ledger .v em{font-style:normal;color:var(--blue)}
.ledger.on-dark{border-color:rgba(159,178,196,.24)}
.ledger.on-dark .cell{border-color:rgba(159,178,196,.16)}
.ledger.on-dark .k{color:var(--muted-dark)}
.ledger.on-dark .v{color:#fff}
.ledger.on-dark .v em{color:var(--blue-lite)}

/* materials grid */
.matgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.mat{border:1px solid var(--line);border-radius:16px;padding:24px 22px;background:#fff;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s,border-color .16s}
.mat:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,32,48,.09);border-color:#cdd8e4}
.mat .mk{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--terra);padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.mat h4{font-size:18px;font-weight:700;margin:0 0 7px;color:var(--navy);letter-spacing:-.2px}
.mat p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0}

/* process triptych: broken -> CAD -> printed */
.trip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:38px;align-items:stretch}
.trip-cell{position:relative;border-radius:16px;overflow:hidden;background:#0a131d;border:1px solid var(--line);aspect-ratio:4/3}
.trip-cell img{width:100%;height:100%;object-fit:cover}
.trip-cell .tlab{position:absolute;left:12px;bottom:12px;z-index:3;font-family:var(--mono);font-size:12px;letter-spacing:.5px;color:#fff;background:rgba(8,16,23,.78);border:1px solid rgba(91,155,213,.4);border-radius:6px;padding:5px 10px}
.trip-cell .tnum{position:absolute;right:12px;top:12px;z-index:3;font-family:var(--mono);font-size:12px;font-weight:700;color:#0c1622;background:var(--terra-lite);border-radius:5px;padding:3px 8px}
.trip-cell.cad{background:#3a434d}
.trip-cell.cad img{object-fit:contain;padding:6px}
.trip-arrow{position:absolute;z-index:4;top:50%;font-size:22px;color:var(--terra);font-weight:700;background:#fff;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(15,32,48,.18);transform:translateY(-50%)}

/* before -> after diptych (portfolio case) */
.case{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-top:36px;background:#fff}
.case-photos{display:grid;grid-template-columns:1fr 1fr;position:relative}
.case-photos .ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0a131d}
.case-photos .ph img{width:100%;height:100%;object-fit:cover}
.case-photos .seam{position:absolute;left:50%;top:0;bottom:0;width:4px;background:var(--terra);transform:translateX(-50%);z-index:3}
.case-photos .blab{position:absolute;left:12px;top:12px;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#fff;background:rgba(8,16,23,.74);border-radius:5px;padding:5px 9px}
.case-body{padding:38px 36px;display:flex;flex-direction:column}
.case-body h3{font-size:30px;font-weight:700;letter-spacing:-.6px;color:var(--navy);line-height:1.06;margin:12px 0 0}
.case-body p{font-size:15.5px;line-height:1.55;color:var(--muted);margin:14px 0 0}
.case-body .ledger{margin-top:auto}

/* dark feature section base */
.feature{position:relative;overflow:hidden;background:radial-gradient(130% 70% at 50% 0%, #173043 0%, #0F2030 48%, #0B1822 100%);color:var(--on-dark);padding:84px 64px}
.feature .h2{color:#fff}
.feature .h2 .accent{color:var(--terra-lite)}
.feature .lede{color:var(--muted-dark)}

/* hero split base */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.hero-photo{position:relative;overflow:hidden;min-height:560px;background:#0a131d;border-radius:16px}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-copy{padding:64px 56px;display:flex;flex-direction:column;justify-content:center}
.hero-copy h1{font-size:52px;font-weight:700;letter-spacing:-1.6px;line-height:1.0;margin:18px 0 0}
.hero-copy .sub{font-size:18px;line-height:1.5;font-weight:500;margin-top:20px;max-width:46ch}
.hero-actions{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}
.hero-actions .note{font-size:13.5px;color:var(--muted)}
.hero-specrail{margin-top:34px}

/* footer */
.ftr{background:var(--navy);color:#C7D2DC;padding:44px 64px 34px}
.ftr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.ftr-tag{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.3px;max-width:24ch;line-height:1.15}
.ftr-nav{display:flex;flex-wrap:wrap;gap:20px}
.ftr-nav a{color:#C7D2DC;text-decoration:none;font-size:14px}
.ftr-fine{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#8aa0b3;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* audience split */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.aud-col{padding:34px 32px}
.aud-col+.aud-col{border-left:1px solid var(--line)}
.aud-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--navy);border-radius:6px;padding:6px 11px}
.aud-col h3{font-size:21px;font-weight:700;color:var(--navy);margin:16px 0 0;letter-spacing:-.3px}
.aud-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}
.aud-tiles img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;border:1px solid var(--line)}

/* how-it-works steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.step .sn{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-family:var(--mono);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:15px}
.step h4{font-size:16px;font-weight:700;color:var(--navy);margin:0 0 5px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.45;margin:0}

/* ════════════════════ THEME A · FIELD MANUAL ════════════════════ */
/* Light editorial/document base. Mono section indices, hairlines,
   restrained terracotta. One navy split hero. */
.cA{background:var(--paper)}
.cA .nav{border-bottom:1px solid var(--line);background:#fff}
.cA .nav-logo .nm{color:var(--navy)} .cA .nav-logo .sb{color:var(--muted)}
.cA .nav-links a{color:var(--ink);font-family:var(--mono);font-size:12.5px;letter-spacing:.4px;text-transform:uppercase}
.cA .nav-links a:hover{color:var(--terra)}
.cA .hero{background:var(--navy)}
.cA .hero-copy{background:radial-gradient(120% 90% at 100% 0%, #173043 0%, #0F2030 60%);color:#fff;position:relative;overflow:hidden}
.cA .hero-copy h1{color:#fff}
.cA .hero-copy .sub{color:var(--muted-dark)}
.cA .sec-label{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px}
.cA .sec-label .n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--terra)}

/* ════════════════════ THEME B · BLUEPRINT BOLD ════════════════════ */
/* High-contrast, alternating heavy dark bands, big type, terracotta
   signature. Dark blueprint hero. Closest to the social posts. */
.cB{background:#fff}
.cB .nav{background:var(--navy-2);border-bottom:1px solid #1b2f43}
.cB .nav-logo .nm{color:#fff} .cB .nav-logo .sb{color:var(--muted-dark)}
.cB .nav-links a{color:#cdd9e4} .cB .nav-links a:hover{color:#fff}
.cB .hero{background:radial-gradient(120% 80% at 30% 10%, #173043 0%, #0F2030 50%, #0B1822 100%);color:#fff;position:relative}
.cB .hero-copy h1{color:#fff;font-size:60px}
.cB .hero-copy .sub{color:var(--muted-dark)}
.cB .h2{font-size:48px}
.cB .mat{background:rgba(11,24,34,.6);border-color:#24405a}
.cB .mat:hover{border-color:#34597b}
.cB .mat h4{color:#fff} .cB .mat p{color:var(--muted-dark)} .cB .mat .mk{color:var(--terra-lite);border-bottom-color:#24405a}
.cB .bigstat{font-size:120px;font-weight:700;letter-spacing:-5px;color:#fff;line-height:.85}
.cB .bigstat span{color:var(--terra-lite)}
/* parts catalog — floating cutouts on dark blueprint ground */
.cat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.catcell{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid #21384e;background:radial-gradient(120% 130% at 50% -10%,rgba(23,48,67,.7),#0b1822);display:flex;align-items:center;justify-content:center;transition:transform .16s,box-shadow .16s,border-color .16s}
.catcell:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,0,0,.45);border-color:#34597b}
.catcell .cbg{position:absolute;inset:0;background-image:linear-gradient(rgba(91,155,213,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(91,155,213,.09) 1px,transparent 1px);background-size:28px 28px}
.catcell img{position:relative;z-index:2;width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,0,0,.6))}
.catcell .clab{position:absolute;left:13px;bottom:13px;z-index:3;display:flex;flex-direction:column;gap:5px}
.catcell .cn{font-family:var(--mono);font-size:11.5px;letter-spacing:.5px;color:#eaf1f7}
.catcell .cm{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1px;color:#0c1622;background:var(--terra-lite);border-radius:4px;padding:3px 7px;align-self:flex-start}
.catcell .cnum{position:absolute;right:13px;top:12px;z-index:3;font-family:var(--mono);font-size:11px;color:var(--muted-dark)}

/* ════════════════════ THEME C · WARM WORKSHOP ════════════════════ */
/* Lightest + warmest. Photo-dominant hero, soft cards, terracotta as
   connective tissue. A single dark feature moment (process). */
.cC{background:var(--warm)}
.cC .nav{background:var(--warm);border-bottom:1px solid var(--line-2)}
.cC .nav-logo .nm{color:var(--navy)} .cC .nav-logo .sb{color:var(--muted)}
.cC .nav-links a{color:var(--ink)} .cC .nav-links a:hover{color:var(--terra)}
.cC .hero{grid-template-columns:1.25fr 1fr}
.cC .hero-copy{background:var(--warm)}
.cC .hero-copy h1{color:var(--navy)}
.cC .hero-copy .sub{color:var(--muted)}
.cC .h2{color:var(--navy)}
.cC .feature .h2{color:#fff}
.cC .trust{border-color:var(--line-2)}
.cC .mat{background:#fff;border-color:var(--line-2);border-radius:16px}
.cC .mat .mk{border-bottom-color:var(--line-2)}
.cC .case{border-color:var(--line-2);border-radius:16px}
.cC .chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.cC .chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:9px 16px}
.cC .chip .cdot{font-family:var(--mono);font-size:11px;color:var(--terra)}

/* ======================= production overrides ======================= */
html,body{margin:0;padding:0}
body{background:var(--warm)}
.site{max-width:1280px;margin:0 auto}

/* sticky translucent nav + working hamburger */
.nav{position:sticky;top:0;z-index:40;background:rgba(250,251,252,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
.nav-inner{position:relative;max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.nav-logo img{width:38px;height:38px;border-radius:8px}
.nav-links a.is-active{color:var(--terra);font-weight:700}
.menu-btn{display:none;background:transparent;border:1.5px solid var(--line-2);border-radius:9px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.menu-btn span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px}

/* center section content + full-bleed padding on wide screens */
.hero,.trust,.feature>*,.sec>*{max-width:1280px;margin-left:auto;margin-right:auto}
.feature,.sec{padding-left:max(24px,calc((100% - 1280px)/2 + 64px));padding-right:max(24px,calc((100% - 1280px)/2 + 64px))}
.feature>.bgrid{max-width:none;margin:0}

/* focus ring (WCAG) */
.fr a:focus-visible,.fr .btn:focus-visible,.menu-btn:focus-visible{outline:3px solid var(--blue-lite);outline-offset:2px}

@media (max-width:900px){
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:#fff;border-bottom:1px solid var(--line-2);padding:14px 24px;gap:16px;display:none;box-shadow:0 18px 34px rgba(15,32,48,.10)}
  .nav-links.open{display:flex}
  .menu-btn{display:flex}
  .trust{grid-template-columns:1fr 1fr;gap:20px}
  .trip{grid-template-columns:1fr;gap:14px}.trip-arrow{display:none}
  .case{grid-template-columns:1fr}
  .cat{grid-template-columns:1fr 1fr}
  .matgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:24px}
  .aud{grid-template-columns:1fr}.aud-col+.aud-col{border-left:0;border-top:1px solid var(--line)}
  .h2{font-size:34px!important}.feature .h2{font-size:34px!important}
}
@media (max-width:560px){
  .nav-logo .sb{display:none}
  .trust{grid-template-columns:1fr}
  .cat{grid-template-columns:1fr 1fr;gap:12px}
  .matgrid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}
  .ledger{flex-wrap:wrap}.ledger .cell{flex:1 0 33%;border-right:0}
  .sec,.feature{padding-top:44px!important;padding-bottom:44px!important}
  .ftr-top{flex-direction:column;gap:20px}
  .h2,.feature .h2{font-size:28px!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* footer contact links inherit the muted footer color (avoids per-link inline style) */
.ftr-fine a{color:inherit}

/* redesign interior pages carry the .bc root → larger nav logo (matches mockups) */
.bc .nav-logo img{width:68px;height:68px;border-radius:14px}
.bc .nav{padding-bottom:9px}