/* ==========================================================================
   Strulen rebuild — shared foundation
   Every value here is traceable to the brand style guide. Page citations are
   in content/verified_brand.json. Nothing is carried over from the previous
   website: this file was written from the guide, not from the old CSS.
   ========================================================================== */

/* ---------- The brand's two faces (GUIDE p33, p34) ----------------------- */
@font-face{font-family:"Bomstad Display";src:url("fonts/bomstad-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Bomstad Display";src:url("fonts/bomstad-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bomstad Display";src:url("fonts/bomstad-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Bomstad Display";src:url("fonts/bomstad-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Bomstad Display";src:url("fonts/bomstad-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Primary palette — GUIDE p28 */
  --black:#000000;
  --white:#FFFFFF;
  /* Secondary palette — GUIDE p29 */
  --orange:#F92A00;
  --grey-mid:#808080;
  --grey-cool:#CFCFD1;
  --grey-light:#EBEBEB;

  --display:"Bomstad Display","Helvetica Neue",Arial,sans-serif;
  --text:"Poppins","Helvetica Neue",Arial,sans-serif;

  /* Type roles — GUIDE p35. Body sits at the brand's 18px ceiling; leads use
     the brand's own Subheadline role (Poppins Medium 18–24) at 20–22px, which
     satisfies the kit's 19–22px reading target without inventing a new role. */
  --t-body:1.125rem;            /* 18px, Body Text max           */
  --t-body-m:1.0625rem;         /* 17px on phones, kit minimum   */
  --t-lead:clamp(1.25rem,.5vw + 1.1rem,1.375rem);   /* 20–22px, Subheadline */
  --t-info:0.8125rem;           /* 13px, Information role        */
  --lh-body:1.4;                /* GUIDE p35: Body 140%          */
  --lh-lead:1.45;
  --lh-display:1.0;             /* GUIDE p35: Headline Large 100% */

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:420ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--text);font-weight:400;
  font-size:var(--t-body-m);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:768px){ body{font-size:var(--t-body)} }

img,video{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;
  line-height:var(--lh-display);letter-spacing:-0.02em}
p{margin:0}
/* the browser's own figure margin is 1em 40px and silently insets every
   picture from its frame, which reads as a layout mistake */
figure,figcaption,blockquote{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}

/* Text is visible by default. Any reveal is an enhancement layered on top of
   something already readable — never a gate in front of it. */
[data-rise]{opacity:1;transform:none}
html.js [data-rise]:not(.in){opacity:0;transform:translateY(14px)}
/* The stagger lives in the transform only. Opacity is never delayed, so a
   staggered entrance can never leave a line of text at zero while a reader is
   looking at it — the words fade in at once, the movement arrives in order. */
html.js [data-rise]{transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:0ms,var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  html.js [data-rise]:not(.in){opacity:1;transform:none}
  html.js [data-rise]{transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--black);
  color:var(--white);padding:12px 18px;font-size:var(--t-info)}
.skip:focus{left:8px;top:8px}

/* The one label style this project allows itself: Information role, used for
   genuine metadata only, never as decoration on every section. */
.meta{font-size:var(--t-info);line-height:1.3;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500}

/* Direction switcher shared by both prototypes */
.switch{position:fixed;z-index:200;right:14px;bottom:14px;
  display:flex;gap:2px;background:rgba(0,0,0,.86);padding:4px;backdrop-filter:blur(8px)}
@media (max-width:600px){ .switch{left:14px;right:14px;justify-content:center} }
.switch a{font-family:var(--text);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;color:#fff;padding:9px 16px;opacity:.55}
.switch a[aria-current="true"]{background:var(--orange);color:#000;opacity:1}
@media (max-width:600px){ .switch a{padding:8px 11px;font-size:11px} }