/* Octane Method — single source of truth. Change here, whole site moves. */
:root {
  /* -- canvas + neutral ramp (hue 80, chroma 0.012) -- */
  --canvas:    #100d08;   /* oklch(0.16 0.012 80) */
  --surface:   #1e1a14;
  --lifted:    #2a2620;
  --hairline:  #302b24;
  --muted:     #96918a;
  --ink:       #f3eee6;   /* oklch(0.95 0.012 80) */
  --accent:    #f5821e;   /* oklch(0.722 0.172 54) */
  --accent-ink:#100d08;   /* text that sits on accent */

  /* -- type -- */
  --display: "Zilla Slab", Georgia, serif;
  --body: "Fira Sans Condensed", "Arial Narrow", sans-serif;

  /* ratio 1.30, base 17 */
  --t--1: 0.8125rem;  /* 13   label / micro */
  --t-0:  1.0625rem;  /* 17   body */
  --t-1:  1.375rem;   /* 22   lead */
  --t-2:  1.8125rem;  /* 29   h3 */
  --t-3:  2.3125rem;  /* 37   h2 */
  --t-4:  3.0625rem;  /* 49   h1 (static contexts) */
  --t-hero: clamp(2.5rem, 7vw, 5.75rem); /* 40 - 92, exactly 2.30x */

  --lh-tight: 1.04;
  --lh-head: 1.14;
  --lh-body: 1.5;
  --lh-lead: 1.38;

  /* -- space (deliberately uneven) -- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 14px;  --s-4: 22px;
  --s-5: 30px; --s-6: 44px;  --s-7: 64px;  --s-8: 96px;  --s-9: 142px;

  /* -- motion -- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-feedback: 120ms; --d-state: 250ms; --d-layout: 400ms;
  --d-entrance: 650ms; --d-exit: 490ms;

  /* -- clay -- */
  --clay: 0 22px 44px -16px rgba(6,4,2,.78),
          0 3px 8px -3px rgba(6,4,2,.55),
          inset 0 1px 0 rgba(243,238,230,.07),
          inset 0 -18px 28px -22px rgba(6,4,2,.9);
  --clay-press: 0 6px 14px -8px rgba(6,4,2,.7),
          inset 0 2px 6px rgba(6,4,2,.7),
          inset 0 1px 0 rgba(243,238,230,.04);
  --r-tray: 20px; --r-slab: 6px; --r-field: 10px;

  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23100d08' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11V4h7'/%3E%3Cpath d='M7 7l14 14'/%3E%3Cpath d='M21 21h3M21 21v3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f5821e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11V4h7'/%3E%3Cpath d='M7 7l14 14'/%3E%3Cpath d='M21 21h3M21 21v3'/%3E%3C/g%3E%3C/svg%3E") 4 4, auto;

  /* 4% grain, brand surfaces only, never over photos */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* -- base (written once, applies site wide) -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-0);
  line-height: var(--lh-body);
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--d-state) var(--ease); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
::placeholder { color: var(--muted); opacity: 1; }
button:disabled, [aria-disabled="true"] button { background: var(--lifted) !important; color: var(--muted) !important; box-shadow: var(--clay-press) !important; }

/* signature element: wrench-tip cursor, desktop pointers only */
@media (hover: hover) and (pointer: fine) {
  body, a, button, select, textarea, input, label, summary { cursor: var(--cursor); }
}

/* signature moment 1: the hero photo settling into place on load */
/* transform only - never opacity: a suspended timeline must not blank content */
@keyframes om-settle {
  from { transform: scale(1.055) translate3d(0, 14px, 0); }
  to   { transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes om-spin { to { transform: rotate(360deg); } }
@keyframes om-rise {
  from { transform: translate3d(0, 22px, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* responsive switches inline styles cannot express */
[data-callbar] { display: none; }
[data-rail] { display: block; }
@media (max-width: 980px) { [data-rail] { display: none; } main { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 780px) {
  [data-callbar] { display: grid; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 620px) { [data-wordmark] { display: none !important; } }

/* mobile pass: smaller heads, tighter trays, fewer words per line */
@media (max-width: 700px) {
  :root {
    --t-1: 1.25rem;  /* 20 */
    --t-2: 1.5rem;   /* 24 */
    --t-3: 1.8125rem;/* 29 */
    --t-4: 2.3125rem;/* 37 */
    --s-5: 24px; --s-6: 34px; --s-7: 48px; --s-8: 64px; --s-9: 92px;
    --r-tray: 16px;
  }
  h1 { max-width: 16ch !important; letter-spacing: -0.018em !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* Build-layer QA fixes: keep generated exports usable on short, narrow phones. */
:root { --t--1: 1rem; }
label a { display: inline-flex; align-items: center; min-height: 44px; }
label { min-height: 44px; align-items: center; }
label[for="f-consent"] { grid-template-columns: 44px minmax(0, 1fr) !important; }
input[type="checkbox"] { width: 44px !important; height: 44px !important; min-height: 44px !important; }
@media (max-width: 640px) {
  [data-wordmark] { display: none !important; }
  nav a:not([data-nav-phone]) { display: none !important; }
  header { gap: 12px !important; }
  section > img[style*="position:absolute"] {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}