/* ==========================================================================
   Global — design tokens + base + layout + typography roles + reveals.
   Loaded site-wide and as an editor style. Blocks CONSUME these vars; they
   must never redefine the palette (SITE-BLUEPRINT §6).

   The base ships neutral placeholder values. During a conversion, replace the
   VALUES with the design's and keep the NAMES — every shared component, the
   header, footer and search already read them.
   ========================================================================== */

:root{
  /* --- Brand colour (AKN: slate ink + the logo yellow) --- */
  --brand:       #1E2A2E;  /* slate: dark bands, header text, solid buttons */
  --brand-deep:  #121b1e;  /* hover state for brand surfaces */
  --brand-rgb:   30, 42, 46;
  --ink:         #1E2A2E;  /* body text on light backgrounds */
  --ink-strong:  #1E2A2E;
  --ink-muted:   #3A4A50;  /* secondary text, captions */
  --black:       #1E2A2E;

  /* --- Accents --- */
  --accent:      #F9B305;  /* the logo yellow: buttons, highlights, yellow bands */
  --accent-2:    #E0A000;  /* yellow hover */
  --accent-text: #B27F00;  /* yellow dark enough to read as small text on white */
  --sky:         #D8EAF1;  /* "too cold" tint */
  --peach:       #FCD8B4;  /* "too hot" tint */

  /* --- Surfaces --- */
  --white:       #ffffff;
  --grey-50:     #F1F4F3;  /* the light band between white sections */
  --grey-100:    #E3E8E8;
  --hairline:    #D9DEDF;

  /* --- Type --- */
  --font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale. Each step runs from its 390px size to its 1920px size —
     re-measure both ends from the design's mobile and desktop artboards.
     clamp(min, intercept + slope·vw, max): slope = (max−min)/(1920−390)·100. */
  --step-micro:   clamp(0.8125rem, 0.797rem + 0.065vw, 0.875rem);   /* 13 → 14 */
  --step-small:   clamp(0.9rem,    0.879rem + 0.088vw, 0.95rem);    /* 14.4 → 15.2 */
  --step-nav:     clamp(0.95rem,   0.930rem + 0.082vw, 1rem);       /* 15.2 → 16 */
  --step-body:    clamp(1rem,      0.985rem + 0.065vw, 1.0625rem);  /* 16 → 17 */
  --step-eyebrow: clamp(0.95rem,   0.930rem + 0.082vw, 1rem);       /* 15.2 → 16 */
  --step-lead:    clamp(1.125rem,  1.093rem + 0.131vw, 1.25rem);    /* 18 → 20 */
  --step-h3:      clamp(1.2rem,    1.174rem + 0.105vw, 1.3rem);     /* 19 → 21 */
  --step-h2:      clamp(1.9rem,    1.645rem + 1.046vw, 2.9rem);     /* 30 → 46 */
  --step-h1:      clamp(2.4rem,    2.018rem + 1.569vw, 3.9rem);     /* 38 → 62 */
  --step-display: clamp(2.4rem,    2.018rem + 1.569vw, 3.9rem);     /* 38 → 62 */

  /* --- Layout --- */
  --container:      1220px;                    /* keep theme.json layout sizes in step */
  --gutter:         clamp(16px, 2.5vw, 20px);
  --gutter-header:  clamp(16px, 2.5vw, 20px);
  --section-y:      clamp(48px, 6vw, 80px);
  --gap:            clamp(16px, 2vw, 28px);
  --radius:         6px;
  --radius-photo:   14px;
  --radius-pill:    999px;
  --header-h:       84px;

  /* --- Motion --- */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed:        220ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body.site-body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--step-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block} /* element selectors only, so any block class wins */
img{height:auto}
/* adz-cdn <picture> wrappers must be layout-invisible so absolute/100% imgs behave */
picture{display:contents}
a{color:inherit;text-decoration:none} /* low specificity on purpose: .btn, .link-arrow etc. must win */
button{font-family:inherit}
.site-main{display:block}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:100;width:auto;height:auto;margin:0;clip:auto;
  padding:10px 16px;background:var(--black);color:var(--white);
}

/* --- Layout helpers ------------------------------------------------------ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.module{padding-block:var(--section-y)}
/* Two modules on the same surface read as one band: halve the seam between them. */
.module.surface-white+.module.surface-white,
.module.surface-grey+.module.surface-grey,
.module.surface-brand+.module.surface-brand{padding-top:calc(var(--section-y) * .5)}

/* Surface variants set background AND text colour together, so a block keeps
   its contrast wherever it is moved in the page order. Blocks expose a
   `surface` select field that maps straight onto these. */
.surface-white  {background:var(--white);  color:var(--ink)}
.surface-grey   {background:var(--grey-50);color:var(--ink)}
.surface-brand  {background:var(--brand);  color:var(--white)}
.surface-accent {background:var(--accent); color:var(--ink)}
.surface-dark   {background:var(--black);  color:var(--white)}

/* --- Typography roles ---------------------------------------------------- */
.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-size:var(--step-small);font-weight:700;letter-spacing:0.02em;
  margin:0 0 .9rem;color:var(--accent-text);
}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--accent);flex:none}
.surface-brand .eyebrow,.surface-dark .eyebrow{color:var(--accent)}
.surface-accent .eyebrow{color:var(--ink)}
.surface-accent .eyebrow::before{background:var(--ink)}

.h-display{
  margin:0;font-family:var(--font-display);font-size:var(--step-display);
  font-weight:700;line-height:1.1;letter-spacing:-0.02em;
}
.h-1{
  margin:0;font-family:var(--font-display);font-size:var(--step-h1);
  font-weight:700;line-height:1.05;letter-spacing:-0.02em;text-wrap:balance;
}
.h-section{
  margin:0;font-family:var(--font-display);font-size:var(--step-h2);
  font-weight:700;line-height:1.12;letter-spacing:-0.01em;text-wrap:balance;
}
.h-section--bold{font-weight:700}
.h-3{
  margin:0;font-family:var(--font-display);font-size:var(--step-h3);
  font-weight:700;line-height:1.2;
}

.prose{max-width:66ch}
.prose>*{margin:0}
.prose>*+*{margin-top:1.25em}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose{overflow-wrap:anywhere}
.prose table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:var(--step-small)}
.prose th,.prose td{padding:10px 14px;border:1px solid var(--grey-100);text-align:left;vertical-align:top;min-width:120px}
.prose th{background:var(--grey-50);font-weight:700}
.lead{font-size:var(--step-lead);line-height:1.5;color:var(--ink-muted);max-width:34rem}
.surface-brand .lead,.surface-dark .lead{color:#C2CBCF}
.surface-accent .lead{color:var(--ink)}
.module-head{display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);gap:.5rem clamp(2rem, 5vw, 5rem);align-items:start;margin-bottom:clamp(2rem, 4vw, 3rem)}
.module-head .eyebrow{grid-column:1 / -1}
.module-head .h-section{max-width:16ch}
.module-head .lead{margin:.45em 0 0;max-width:30rem}
@media (max-width: 820px){ .module-head{grid-template-columns:1fr} .module-head .lead{margin-top:.5rem} }
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--white),0 0 0 6px var(--ink);border-radius:4px}
.surface-accent :focus-visible{box-shadow:0 0 0 3px var(--accent),0 0 0 6px var(--ink)}
.surface-brand :focus-visible,.surface-dark :focus-visible{box-shadow:0 0 0 3px var(--brand),0 0 0 6px var(--accent)}
.photo{border-radius:var(--radius-photo);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;background:var(--grey-100)}

/* ==========================================================================
   Scroll reveals — driven by resources/js/animations.js
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.is-visible>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
}
/* No-JS: reveals must never hide content when the script never runs. */
.no-js .reveal,.no-js .reveal-stagger>*{opacity:1;transform:none}