/* ============================================================
   Easton Automations — rebuild PRIMITIVES (base.css v2)
   SHARED FOUNDATION ONLY. Ships NO brand color, NO single look.
   Every site loads base.css + its OWN <slug>.css that fills the
   token contract and adds its own structural classes.
   HARD RULE: two sites in one batch must NOT share base.css edits
   or .hero/.split/.gallery styling — that's the template tell.
   ============================================================ */
:root{
  /* TYPE — site overrides families + ratio + clamp anchors */
  --font-head:Georgia,'Times New Roman',serif;
  --font-body:-apple-system,'Inter','Segoe UI',Helvetica,Arial,sans-serif;
  --cap-font:var(--font-body);
  --ratio:1.25;
  --step-0:18px;
  --step--1:calc(var(--step-0)/var(--ratio));
  --step-1:calc(var(--step-0)*var(--ratio));
  --step-2:calc(var(--step-1)*var(--ratio));
  --step-3:calc(var(--step-2)*var(--ratio));
  --step-4:calc(var(--step-3)*var(--ratio));
  --h1-min:40px;--h1-vw:6vw;--h1-max:68px;--h1-lh:1.04;--h1-ls:-.5px;--h1-w:600;
  --h2-min:30px;--h2-vw:4vw;--h2-max:46px;--h2-lh:1.1;--h2-ls:-.4px;--h2-w:600;
  --h3-w:600;

  /* SPACING + MEASURE */
  --space-1:8px;--space-2:16px;--space-3:24px;--space-4:40px;
  --space-5:64px;--space-6:96px;--space-7:144px;
  --gutter:clamp(20px,4vw,48px);
  --section-y:clamp(64px,9vw,120px);
  --maxw:1180px;

  /* COLOR — site MUST set every brand value; these are neutral placeholders */
  --ink:#16202b;--body:#42525f;--mut:#7a8794;
  --bg:#ffffff;--bg-soft:#f5f7fa;--line:#e6ebf1;
  --brand:#111;--accent:#888;

  /* SCRIM / GRADE / SHADOW / SHAPE — per-site vars, never hardcoded downstream */
  --hero-scrim:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.7));
  --img-grade:none;
  --shadow:0 18px 50px rgba(0,0,0,.12);--shadow-sm:0 6px 18px rgba(0,0,0,.08);
  --radius:0px;--btn-radius:999px;
  --nav-h:72px;--nav-h-scrolled:60px;
  --ul-h:1px;--ul-t:.28s;
  --reveal-ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-head);color:var(--ink);margin:0 0 .4em}
h1{font-size:clamp(var(--h1-min),var(--h1-vw),var(--h1-max));line-height:var(--h1-lh);letter-spacing:var(--h1-ls);font-weight:var(--h1-w)}
h2{font-size:clamp(var(--h2-min),var(--h2-vw),var(--h2-max));line-height:var(--h2-lh);letter-spacing:var(--h2-ls);font-weight:var(--h2-w)}
h3{font-size:var(--step-1);line-height:1.22;font-weight:var(--h3-w)}
p{margin:0 0 1em}
.lead{font-size:var(--step-0);color:var(--body);max-width:60ch;line-height:1.6}
.hero .lead,.center .lead{max-width:52ch}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section.soft{background:var(--bg-soft)}
.center{text-align:center;margin-inline:auto}
.row{display:flex;gap:14px;flex-wrap:wrap}

/* --- Full-bleed band: use as a TOP-LEVEL full-width section (no 100vw hack → no scrollbar overflow) --- */
.bleed{position:relative;width:100%;overflow:hidden}
.bleed.tall{height:clamp(58vh,76vh,740px)}
.bleed>img,.bleed>.bg{width:100%;height:100%;object-fit:cover;filter:var(--img-grade)}
.bleed>.bg{position:absolute;inset:0;background-size:cover;background-position:center}
.bleed .overlay{position:absolute;inset:0;background:var(--hero-scrim)}
.bleed .cap{position:absolute;left:0;right:0;bottom:var(--space-5);z-index:2;color:#fff}
.bleed .cap .wrap{max-width:var(--maxw)}

/* --- Asymmetric split: set --l/--r per instance (e.g. 7fr 5fr) --- */
.split2{display:grid;grid-template-columns:var(--l,1fr) var(--r,1fr);gap:var(--split-gap,clamp(28px,5vw,64px));align-items:center}

/* --- Oversized ghosted section index numerals --- */
.has-index{position:relative}
.index-num{position:absolute;top:-.34em;left:-.06em;z-index:0;font-family:var(--font-head);font-size:clamp(110px,16vw,190px);line-height:.8;opacity:.07;color:var(--ink);pointer-events:none;user-select:none}
.has-index>:not(.index-num){position:relative;z-index:1}

/* --- Editorial figure + caption --- */
figure.fig{margin:0}
figure.fig img{width:100%;height:auto;filter:var(--img-grade)}
figure.fig figcaption{margin-top:10px;font-size:var(--step--1);color:var(--mut);font-family:var(--cap-font)}

/* --- Generic media box; sites set radius/shadow via tokens --- */
.media{overflow:hidden;border-radius:var(--radius)}
.media img{width:100%;height:100%;object-fit:cover;filter:var(--img-grade)}

/* --- Logo / value strip (no squish) --- */
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,48px);justify-content:center}
.strip img{height:30px;width:auto;object-fit:contain;opacity:.62}

/* --- Sticky vertical section label --- */
.sidelabel{position:sticky;top:120px;writing-mode:vertical-rl;text-orientation:mixed;font-size:var(--step--1);letter-spacing:3px;text-transform:uppercase;color:var(--mut);height:max-content}

/* --- Buttons (sites override shape/fill) --- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:var(--btn-radius);font-weight:700;font-size:15px;cursor:pointer;border:0;transition:transform .14s,background .18s,box-shadow .18s,color .18s;font-family:var(--font-body)}
.btn-primary{background:var(--accent);color:#10202c}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-dark{background:var(--brand);color:#fff}

/* --- Nav mechanics (sites set the look) --- */
.nav{position:sticky;top:0;z-index:50;transition:background .3s,box-shadow .3s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);transition:height .3s}
.nav.scrolled .wrap{height:var(--nav-h-scrolled)}
.nav .links{display:flex;gap:28px;align-items:center}
.nav .links a{font-size:14px;font-weight:600;position:relative}
.nav .links a::after{content:'';position:absolute;left:0;bottom:-4px;height:var(--ul-h);width:0;background:var(--accent);transition:width var(--ul-t) ease}
.nav .links a:hover::after{width:100%}
.nav .burger{display:none}

/* --- Hero base (sites heavily override) --- */
.hero{position:relative;min-height:84vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .scrim{position:absolute;inset:0;z-index:1;background:var(--hero-scrim)}
.hero .wrap{position:relative;z-index:2;padding-top:var(--space-6);padding-bottom:var(--space-6)}
.hero h1{color:#fff}

/* --- Hero SLIDESHOW (use ONLY when the original site had a rotating hero; pair with the
   slideshow JS snippet). Crossfading slides + slow ken-burns behind the FIXED hero copy,
   autoplay with dots, pause-on-hover, reduced-motion-safe. Clearly better than a basic fader. --- */
.hero .slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.25s ease;filter:var(--img-grade);will-change:opacity,transform}
.hero .slide.is-active{opacity:1;animation:heroKenBurns 8s ease-out forwards}
@keyframes heroKenBurns{from{transform:scale(1.085)}to{transform:scale(1)}}
.slide-dots{position:absolute;z-index:3;left:0;right:0;bottom:22px;display:flex;gap:9px;justify-content:center}
.slide-dots button{height:8px;width:8px;border-radius:999px;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:width .3s ease,background .3s ease;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.slide-dots button[aria-current="true"]{background:#fff;width:26px}
.slide-dots button:hover{background:rgba(255,255,255,.85)}
@media(prefers-reduced-motion:reduce){.hero .slide.is-active{animation:none}}

/* --- Justified flex gallery: every row (incl. the last) grows to fill the full
   width, so there is NEVER a ragged column or an empty cell — at any image count.
   Fixed row height + object-fit:cover; captions render as a bottom overlay. --- */
.gx{display:flex;flex-wrap:wrap;gap:var(--gx-gap,14px)}
.gx a,.gx figure{position:relative;margin:0;overflow:hidden;border-radius:var(--gx-radius,0);height:var(--gx-h,clamp(168px,21vw,288px));flex:1 1 var(--gx-basis,300px);min-width:200px}
.gx img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--img-grade);transition:transform .55s var(--reveal-ease)}
.gx a:hover img,.gx figure:hover img{transform:scale(1.05)}
.gx figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 12px;background:linear-gradient(transparent,rgba(10,12,14,.8));color:#fff;font-size:14px}
@media(max-width:560px){.gx a,.gx figure{flex-basis:100%;min-width:0}}

/* --- Footer mechanics --- */
.footer{padding:var(--space-6) 0 var(--space-4)}
.footer .cols{display:grid;grid-template-columns:var(--foot-cols,2fr 1fr 1fr);gap:40px}
.footer h4{font-family:var(--font-body);font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:0 0 12px}

/* --- Sticky mobile call bar --- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 10px calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -8px 24px rgba(0,0,0,.2)}
.callbar a{flex:1;text-align:center;font-weight:800;padding:13px;border-radius:10px;font-size:15px}

/* --- Scroll-progress hairline (opt-in: add <div class="progress">) --- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:70;transition:width .1s linear}

/* --- Motion --- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--reveal-ease),transform .7s var(--reveal-ease)}
.reveal.in{opacity:1;transform:none}
.scale-in{opacity:0;transform:scale(1.05);transition:opacity .9s var(--reveal-ease),transform 1.1s var(--reveal-ease)}
/* FAILSAFE: if scripting is unavailable, JS never adds .in — never leave content invisible */
@media(scripting:none){.reveal,.scale-in{opacity:1!important;transform:none!important}}
.scale-in.in{opacity:1;transform:scale(1)}

/* --- a11y --- */
:where(a,button,.btn):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* --- Responsive floor --- */
@media(max-width:860px){
  .split2{grid-template-columns:1fr!important}
  .footer .cols{grid-template-columns:1fr}
  .nav .links{display:none}
  .nav .burger{display:block}
  .callbar{display:flex}
  body{padding-bottom:66px}
  .gx{column-count:2}
  .sidelabel{display:none}
  .index-num{font-size:84px}
}