/* =============================================================
   site.css — shared foundation for every page
   Design tokens · reset · top chrome (nav) · footer
   Page-specific rules stay in each page's inline <style>.
   ============================================================= */

:root{
  --paper:#FFFDFB; --ink:#232E3A; --ink-soft:#8C877D; --ink-light:#C9C2B4;
  --choc:#4E220F; --orange:#EA5F00; --clay:#AA2C00;
  --blue:#7BA2BF; --sky:#BCD1DD; --icy:#DAE7EF;
  --card:#F5F5F5;

  /* DIN 2014 (Typekit kit tvp1iaq) — weights served: 300 Light · 400 Regular · 600 Demi · 700 */
  --din:"din-2014","Roboto","Helvetica Neue",Arial,sans-serif;
  --script:"Mansalva","Bradley Hand","Segoe Script",cursive;

  --pad:clamp(20px,4vw,40px);   /* page side margin — Figma: 40px */
  --wrap:1728px;                /* Figma frame width */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--din); font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- top chrome (logo + nav) ---------- */
/* Default: header sits at the top of the document and scrolls away with the
   page like any normal content — it does not follow the viewport. The home
   page (index.html) overrides this to a sticky-through-the-hero behavior. */
.chrome{
  position:absolute;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,1.39vw,24px) var(--pad);   /* Figma: 24px vertical, now scales with viewport like everything else */
  background:linear-gradient(to bottom, var(--paper) 42%, rgba(255,253,251,0));
  pointer-events:none;
}
.chrome a{pointer-events:auto}
.chrome .brand{width:clamp(32px,2.89vw,50px);height:auto;display:block}   /* Figma: 50 × 68.6 */
.chrome nav{display:flex;gap:clamp(22px,5.4vw,84px)}    /* Figma: 84px */
.chrome nav a{
  font-family:var(--din);font-weight:600;font-size:clamp(12px,.93vw,16px);letter-spacing:.1em;   /* Figma: 16px */
  text-transform:uppercase;color:var(--ink);position:relative;padding:4px 0;
}
.chrome nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right .35s ease, background-color .2s ease;
}
.chrome nav a:hover::after,
.chrome nav a[aria-current="page"]::after{right:0;background:var(--blue)}

/* ---------- footer — Figma: 273px, background #EA5F00 ---------- */
.s-foot{
  position:relative;z-index:2;
  background:var(--orange);color:#000;
  padding:64px var(--pad) 40px;
}
.s-foot .wrap{
  max-width:var(--wrap);margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(32px,6vw,120px);flex-wrap:wrap;
}
.s-foot .last-block{flex:1 1 300px;min-width:260px;max-width:640px}
.s-foot .foot-cols{display:flex;gap:clamp(40px,5vw,88px)}
.s-foot .col{min-width:118px}
.s-foot .last{
  font-family:var(--script);font-weight:400;font-size:clamp(24px,2.2vw,32px);
  letter-spacing:.12em;text-transform:lowercase;color:#000;margin:0;
}
.s-foot .sub{
  margin:1.6rem 0 0;max-width:614px;
  font-family:var(--din);font-weight:300;font-size:clamp(15px,1.25vw,20px);
  line-height:1.25;letter-spacing:.1em;text-transform:uppercase;color:#000;
}
.s-foot .col h4{
  margin:0 0 22px;font-family:var(--din);font-weight:600;font-size:16px;
  letter-spacing:.1em;text-transform:uppercase;color:#000;
}
.s-foot .col a{
  display:block;font-family:var(--din);font-weight:300;font-size:16px;
  letter-spacing:.1em;text-transform:uppercase;color:#000;
  padding:9px 0;transition:opacity .2s ease;
}
.s-foot .col a:hover{opacity:.55}
.s-foot .base{
  max-width:var(--wrap);margin:20px auto 0;
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--din);font-weight:300;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#000;
}
.s-foot .base button{
  background:none;border:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;color:inherit;text-transform:inherit;
}
@media(max-width:860px){
  .s-foot .last-block{flex:1 1 100%}
  .s-foot .foot-cols{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:20px}
  .s-foot .col{min-width:0;flex:0 1 auto}
  .s-foot .col h4{font-size:12px;margin-bottom:12px}
  .s-foot .col a{font-size:12px;padding:6px 0}
}

/* ---------- prev/next case-study nav (sits between the last section and the footer) ---------- */
.cs-pagenav{
  position:relative;z-index:2;
  max-width:var(--wrap);margin:80px auto 0;
  padding:0 var(--pad) 80px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
}
.cs-pagenav-link{
  display:flex;align-items:center;gap:14px;min-width:0;
}
.cs-pagenav-link.next{flex-direction:row-reverse;text-align:right;margin-left:auto}
.cs-pagenav-arrow{
  flex:0 0 auto;width:clamp(32px,2.5vw,44px);height:clamp(32px,2.5vw,44px);
  border-radius:50%;border:1px solid var(--blue);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.cs-pagenav-arrow svg{width:16px;height:16px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.cs-pagenav-link:hover .cs-pagenav-arrow{background:var(--blue);border-color:var(--blue)}
.cs-pagenav-link:hover .cs-pagenav-arrow svg{stroke:#fff}
.cs-pagenav-link.prev:hover .cs-pagenav-arrow{transform:translateX(-3px)}
.cs-pagenav-link.next:hover .cs-pagenav-arrow{transform:translateX(3px)}
.cs-pagenav-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.cs-pagenav-label{
  font-family:var(--din);font-weight:300;font-size:clamp(11px,.81vw,13px);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.cs-pagenav-title{
  font-family:var(--din);font-weight:600;font-size:clamp(14px,1.1vw,18px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw;
}

@media(max-width:640px){
  .cs-pagenav-title{max-width:34vw}
  .cs-pagenav-label{display:none}
}