/* ============================================================
   SKYBREAK — shared design system
   Style: "Warm Editorial Split" (mockup 1A) + engraved wordmark 2b
   Fonts self-hosted (was a Google Fonts CDN @import in the design export).
   ============================================================ */

@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root{
  /* paper tones */
  --greige:#D8D4CB;
  --cream:#F2EBDF;
  --sage:#E8ECE5;
  /* ink + accents */
  --ink:#20190F;
  --coral:#C8501F;
  --forest:#2E5E4E;
  /* frame fills */
  --frame-tan:#E4D6BF;
  --frame-sage:#D7DFD4;
  /* rules */
  --rule:#20190F2e;
  /* fonts */
  --serif:'Instrument Serif',serif;    /* creator display voice (italic) */
  --grotesk:'Space Grotesk',sans-serif;/* business display + body */
  --mono:'IBM Plex Mono',monospace;    /* data labels / numerals */
  --garamond:'EB Garamond',serif;      /* wordmark only */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--greige);
  color:var(--ink);
  font-family:var(--grotesk);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--coral);color:var(--cream)}

/* ---------- layout helpers ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 48px}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 48px}
.section{padding:104px 0}
.section-sm{padding:72px 0}
.panel-cream{background:var(--cream)}
.panel-sage{background:var(--sage);
  background-image:linear-gradient(#0000000d 1px,transparent 1px),linear-gradient(90deg,#0000000d 1px,transparent 1px);
  background-size:76px 76px;}
.panel-greige{background:var(--greige)}

/* ---------- type ---------- */
.kicker{
  font-family:var(--grotesk);font-weight:600;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--coral);
  margin:0;
}
.kicker.forest{color:var(--forest)}
.kicker.mono{font-family:var(--mono);font-weight:500;letter-spacing:.18em}

.h-serif{font-family:var(--serif);font-style:italic;font-weight:400;
  line-height:1.1;letter-spacing:-.01em;font-size:clamp(52px,7.4vw,108px)}
.h-grotesk{font-family:var(--grotesk);font-weight:700;
  line-height:.96;letter-spacing:-.03em;font-size:clamp(44px,6.4vw,88px)}

.h2-serif{font-family:var(--serif);font-style:italic;font-weight:400;
  line-height:1.04;letter-spacing:-.01em;font-size:clamp(34px,4.6vw,60px)}
.h2-grotesk{font-family:var(--grotesk);font-weight:700;
  line-height:1.02;letter-spacing:-.02em;font-size:clamp(30px,4vw,52px)}
.h3{font-family:var(--grotesk);font-weight:700;font-size:23px;letter-spacing:-.01em;line-height:1.2}

.lead{font-size:clamp(19px,1.5vw,22px);line-height:1.55;max-width:34ch}
.body-max{max-width:60ch}
.mono{font-family:var(--mono)}
.data{font-family:var(--mono);font-size:14px;letter-spacing:.02em}
.muted{color:color-mix(in srgb,var(--ink) 60%,transparent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--grotesk);
  font-weight:600;font-size:15px;cursor:pointer;border:none;line-height:1;
  transition:transform .18s ease, background .18s ease, color .18s ease;}
.btn-primary{background:var(--ink);color:var(--cream);border-radius:0;
  padding:17px 34px;}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--coral)}
.btn-secondary{background:transparent;border:2px solid var(--ink);color:var(--ink);
  padding:15px 32px;border-radius:0;}
.btn-secondary:hover{background:var(--ink);color:var(--cream)}
.btn-on-forest{background:var(--cream);color:var(--ink)}
.btn-on-forest:hover{background:#fff}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;border:1.5px solid var(--ink);
  border-radius:999px;padding:9px 18px;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase}
.chip.coral{background:var(--coral);color:var(--cream);border-color:var(--coral)}

/* ---------- wordmark (engraved 2b) ---------- */
.wordmark{display:inline-flex;flex-direction:column;align-items:stretch;gap:6px;
  line-height:1}
.wordmark .rule2{height:3px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.wordmark .word{font-family:var(--garamond);font-weight:500;
  font-size:20px;letter-spacing:.32em;text-transform:uppercase;
  text-align:center;padding-left:.32em}
.wordmark.lg .word{font-size:34px}
.wordmark.cream{color:var(--cream)}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:40;background:var(--greige);
  border-bottom:1px solid var(--rule)}
.masthead .inner{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:20px 48px;max-width:1440px;margin:0 auto}
.mast-nav{display:flex;gap:30px;align-items:center}
.mast-nav a{font-family:var(--grotesk);font-weight:600;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;padding-bottom:4px;
  border-bottom:2px solid transparent}
.mast-nav a:hover{border-bottom-color:var(--rule)}
.mast-nav a.active{border-bottom-color:var(--coral)}
.mast-right{display:flex;align-items:center;gap:22px}
.mast-toggle{display:none;background:none;border:2px solid var(--ink);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.mast-toggle span{display:block;width:18px;height:2px;background:var(--ink);
  position:relative}
.mast-toggle span::before,.mast-toggle span::after{content:"";position:absolute;
  left:0;width:18px;height:2px;background:var(--ink)}
.mast-toggle span::before{top:-6px}.mast-toggle span::after{top:6px}

/* ---------- footer (forest) ---------- */
.foot{background:var(--forest);color:var(--cream)}
.foot .inner{max-width:1200px;margin:0 auto;padding:76px 48px 40px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.foot-brand p{margin-top:22px;max-width:34ch;font-size:15px;line-height:1.6;
  color:color-mix(in srgb,var(--cream) 74%,transparent)}
.foot h4{font-family:var(--mono);font-weight:500;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 60%,transparent);margin-bottom:18px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.foot ul a{font-size:15.5px}
.foot ul a:hover{color:var(--coral)}
.foot-legal{max-width:1200px;margin:0 auto;padding:0 48px 44px;
  border-top:1px solid color-mix(in srgb,var(--cream) 16%,transparent)}
.foot-legal .inner-legal{display:flex;justify-content:space-between;gap:20px;
  padding-top:24px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:color-mix(in srgb,var(--cream) 62%,transparent);flex-wrap:wrap}
.foot-legal a:hover{color:var(--cream)}

/* ---------- placeholder tiles ---------- */
.ph{background-image:repeating-linear-gradient(45deg,transparent 0 12px,#00000014 12px 13px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 55%,transparent);padding:16px}
.ph-frame{border:1.5px solid var(--ink)}
.frame-tan{background-color:var(--frame-tan)}
.frame-sage{background-color:var(--frame-sage)}
.slab{box-shadow:10px 12px 0 var(--coral)}

/* ---------- cards ---------- */
.card{background:var(--cream);border:1.5px solid var(--ink);padding:38px 34px}
.card .num{font-family:var(--mono);font-size:14px;letter-spacing:.14em;
  color:var(--coral)}
.card h3{margin:18px 0 12px}
.card p{font-size:16px;line-height:1.58;color:color-mix(in srgb,var(--ink) 74%,transparent)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.step{background:var(--greige);padding:44px 36px}
.step .snum{font-family:var(--mono);font-size:42px;line-height:1;color:var(--coral);
  letter-spacing:-.02em}
.step h3{margin:22px 0 12px}
.step p{font-size:16px;line-height:1.56;color:color-mix(in srgb,var(--ink) 74%,transparent)}

/* ---------- card hover polish (credential slots, step cards, work cards) ---------- */
.credential-slot,.step,.wcard{transition:transform .18s ease,box-shadow .18s ease}
.credential-slot:hover,.step:hover,.wcard:hover{
  transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--coral)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 68%,transparent)}
.field input,.field textarea,.field select{
  font-family:var(--grotesk);font-size:16px;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--ink);border-radius:0;
  padding:14px 16px;width:100%;}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;box-shadow:5px 6px 0 var(--coral)}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{list-style:none;cursor:pointer;padding:26px 4px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:var(--grotesk);font-weight:600;font-size:20px;letter-spacing:-.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary .plus{font-family:var(--mono);font-size:26px;color:var(--coral);
  transition:transform .2s ease;flex:none}
.acc details[open] summary .plus{transform:rotate(45deg)}
.acc .acc-body{padding:0 4px 28px;max-width:70ch;font-size:16.5px;line-height:1.62;
  color:color-mix(in srgb,var(--ink) 76%,transparent)}
/* shimmer REVEAL on the answer text — when a question opens, the answer sweeps
   in left-to-right with a coral glint on the leading edge, unrevealed text a
   faint ghost until the sweep reaches it. Rebuilt in pure CSS from jh3y's
   "shimmer accordion" pen (his uses GSAP + Tweakpane + Tailwind runtime).
   Reduced-motion users get the plain answer text. */
@media(prefers-reduced-motion:no-preference){
  .acc details[open] .acc-body{
    background:linear-gradient(90deg,
      var(--ink) 0% 48%,
      var(--coral) 52%,
      color-mix(in srgb, var(--ink) 20%, transparent) 58% 100%);
    background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:acc-reveal .9s ease-out both;
  }
}
@keyframes acc-reveal{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- coral slab panel ---------- */
.slab-panel{background:var(--cream);border:1.5px solid var(--ink);
  box-shadow:10px 12px 0 var(--coral);padding:56px 52px}

/* ---------- eyebrow rule row ---------- */
.rule-row{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--ink);padding-bottom:16px;gap:20px}

/* ---------- legal / prose pages ---------- */
.legal{max-width:760px}
.legal .updated{font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:color-mix(in srgb,var(--ink) 55%,transparent);margin-top:14px}
.legal section{border-top:1px solid var(--rule);padding:34px 0}
.legal section:first-of-type{border-top:1px solid var(--ink)}
.legal h2{font-family:var(--grotesk);font-weight:700;font-size:21px;
  letter-spacing:-.01em;margin-bottom:14px}
.legal p{font-size:16.5px;line-height:1.62;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.legal p + p{margin-top:14px}
.legal a{border-bottom:1.5px solid var(--coral)}
.legal .draft-note{background:var(--cream);border:1.5px solid var(--ink);
  padding:16px 20px;font-family:var(--mono);font-size:13px;line-height:1.5;
  color:color-mix(in srgb,var(--ink) 70%,transparent);margin-top:8px}

/* ---------- scroll reveal (progressive enhancement, see /reveal.js) ---------- */
.has-reveal [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease}
.has-reveal [data-reveal].is-visible{opacity:1;transform:translateY(0)}
[data-reveal-group] > *:nth-child(1){transition-delay:0ms}
[data-reveal-group] > *:nth-child(2){transition-delay:80ms}
[data-reveal-group] > *:nth-child(3){transition-delay:160ms}
[data-reveal-group] > *:nth-child(4){transition-delay:240ms}
[data-reveal-group] > *:nth-child(5){transition-delay:320ms}
[data-reveal-group] > *:nth-child(6){transition-delay:400ms}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:820px){
  .wrap,.wrap-wide{padding:0 24px}
  .section{padding:64px 0}
  .section-sm{padding:48px 0}
  .masthead .inner{padding:16px 24px}
  .mast-nav{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--greige);border-bottom:1px solid var(--rule);
    flex-direction:column;gap:0;padding:8px 24px 20px}
  .masthead.open .mast-nav{display:flex}
  .mast-nav a{padding:14px 0;border-bottom:1px solid var(--rule);width:100%}
  .mast-nav a.active{border-bottom-color:var(--coral)}
  .mast-toggle{display:flex}
  .mast-right .btn{display:none}
  .steps{grid-template-columns:1fr}
  .foot .inner{grid-template-columns:1fr;gap:36px;padding:56px 24px 32px}
  .foot-legal{padding:0 24px 36px}
  .slab-panel{padding:36px 26px}
}

/* ============================================================
   ACCESSIBILITY & MOTION
   ============================================================ */
/* skip link — offscreen until keyboard-focused, then pinned top-left */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--ink);color:var(--cream);font-family:var(--mono);
  font-size:13px;letter-spacing:.04em;padding:12px 18px;
  border:2px solid var(--coral);transition:top .18s ease}
.skip-link:focus{top:12px}

/* consistent, on-brand keyboard focus ring (mouse users unaffected) */
a:focus-visible,button:focus-visible,summary:focus-visible,
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--coral);outline-offset:3px}

/* honour reduced-motion: kill transitions/animations + the hover door-flex */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .hero:hover .door,.hero .door:hover{flex:1}
}