/* ============================================================
   ALP-SEE Web-Engineering — Swiss / Editorial Design System
   Tokens · Grid · Type · Components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Archivo+Expanded:wght@600;700;800;900&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap');

/* ---- Tokens ------------------------------------------------ */
:root{
  /* color */
  --paper:#f4f0e6;        /* warm paper */
  --paper-2:#ece7d8;      /* panel */
  --ink:#16130e;          /* near-black */
  --ink-2:#56514593;      /* muted ink */
  --muted:#6c665a;        /* meta text */
  --accent:#ff3b14;       /* vermilion */
  --accent-ink:#fbf2ee;   /* text on accent */
  --line:rgba(22,19,14,.16);
  --line-strong:rgba(22,19,14,.42);

  /* type */
  --display:"Archivo Expanded","Archivo",sans-serif;
  --grotesk:"Archivo",-apple-system,sans-serif;
  --serif:"Fraunces",Georgia,serif;

  /* scale */
  --step--1:clamp(.78rem,.74rem + .2vw,.86rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --step-3:clamp(2.4rem,1.6rem + 3.6vw,4.4rem);
  --giant:clamp(2.7rem,.4rem + 8.4vw,8.6rem);

  /* layout */
  --gutter:clamp(16px,3vw,32px);
  --margin:clamp(18px,5vw,84px);
  --maxw:1480px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---- Base -------------------------------------------------- */
body{
  font-family:var(--grotesk);
  font-size:var(--step-0);
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  overflow-x:hidden;
}
/* grain overlay */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Layout primitives ------------------------------------ */
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule--ink{background:var(--line-strong)}

/* kicker / labels */
.kicker{
  font-family:var(--grotesk);font-weight:600;
  font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.28em;color:var(--muted);
  display:flex;align-items:center;gap:.8em;
}
.kicker::before{content:"";width:1.6em;height:1px;background:var(--accent)}
.idx{font-family:var(--grotesk);font-weight:600;font-size:var(--step--1);
  letter-spacing:.18em;color:var(--accent);font-variant-numeric:tabular-nums}

/* display type */
h1,h2,h3{margin:0;font-weight:800;line-height:.92;letter-spacing:-.02em}
.display{
  font-family:var(--display);font-weight:800;
  line-height:.86;letter-spacing:-.03em;
  font-stretch:125%;
  text-transform:uppercase;
}
.lede{
  font-family:var(--serif);font-weight:400;
  font-size:var(--step-2);line-height:1.18;letter-spacing:-.01em;
  font-optical-sizing:auto;
}
.serif-i{font-family:var(--serif);font-style:italic}

/* ---- Header ----------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .bar{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:clamp(12px,1.4vw,18px);
}
.brand{font-family:var(--display);font-weight:800;font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.02em;font-size:var(--step-1);
  display:flex;align-items:center;gap:.5ch}
.brand .dot{width:.42em;height:.42em;background:var(--accent);border-radius:50%;
  display:inline-block;transform:translateY(-.05em)}
.nav{display:flex;gap:clamp(14px,2vw,32px);align-items:center}
.nav a{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;
  font-weight:500;color:var(--muted);position:relative;padding-block:4px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--ink);transition:width .35s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{width:100%}
.nav .cta{color:var(--ink);font-weight:600}
.nav .cta::after{background:var(--accent);width:100%}
.menu-toggle{display:none}

/* ---- Hero -------------------------------------------------- */
.hero{padding-block:clamp(48px,9vw,140px) clamp(36px,6vw,84px);position:relative}
.hero .grid{align-items:end}
.hero-meta{grid-column:1/4}
.hero-meta p{color:var(--muted);font-size:var(--step--1);max-width:30ch;margin:.8em 0 0}
.hero-head{grid-column:1/13;margin-top:clamp(20px,3vw,40px)}
.hero-head h1{font-size:var(--giant);font-stretch:112%}
.hero-head h1 .em{color:var(--accent)}
.hero-head h1 .out{
  -webkit-text-stroke:1.5px var(--ink);color:transparent;
}
.hero-foot{margin-top:clamp(28px,4vw,56px);display:grid;
  grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start}
.hero-foot .lede{grid-column:1/8}
.hero-foot .aside{grid-column:9/13;display:flex;flex-direction:column;gap:18px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.8ch;
  font-weight:600;font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.12em;padding:1em 1.5em;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
  transition:transform .4s var(--ease),background .3s,color .3s;
}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:hover .arr{transform:translateX(.4em)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---- Section frame ---------------------------------------- */
.section{padding-block:clamp(56px,9vw,128px)}
.section-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  align-items:baseline;padding-bottom:clamp(28px,4vw,52px)}
.section-head .tag{grid-column:1/4;display:flex;flex-direction:column;gap:.7em}
.section-head .ttl{grid-column:4/13}
.section-head .ttl h2{font-family:var(--display);font-stretch:110%;
  text-transform:uppercase;font-size:var(--step-3)}

/* ---- Services index (editorial list) ---------------------- */
.svc{border-top:1px solid var(--line-strong)}
.svc-row{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  align-items:center;padding-block:clamp(20px,2.6vw,34px);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
}
.svc-row::before{content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease);z-index:0}
.svc-row>*{position:relative;z-index:1;transition:color .4s var(--ease)}
.svc-row .n{grid-column:1/2;color:var(--accent);font-weight:600;
  font-variant-numeric:tabular-nums;font-size:var(--step--1);letter-spacing:.1em}
.svc-row .name{grid-column:2/8;font-family:var(--display);font-stretch:108%;
  text-transform:uppercase;font-size:var(--step-2);font-weight:700;line-height:.96}
.svc-row .desc{grid-column:8/12;color:var(--muted);font-size:var(--step--1);
  max-width:34ch}
.svc-row .go{grid-column:12/13;justify-self:end;font-size:1.4em;line-height:1;
  transform:translateX(0);transition:transform .45s var(--ease)}
.svc-row:hover::before{transform:translateY(0)}
.svc-row:hover .name,.svc-row:hover .desc,.svc-row:hover .go{color:var(--paper)}
.svc-row:hover .desc{color:#cfc8b8}
.svc-row:hover .go{transform:translateX(.5em);color:var(--accent)}

/* ---- Approach (2-col editorial) --------------------------- */
.approach{background:var(--ink);color:var(--paper)}
.approach .kicker{color:#b9b2a3}
.approach .kicker::before{background:var(--accent)}
.approach .section-head .ttl h2{color:var(--paper)}
.approach .rule{background:rgba(244,240,230,.16)}
.tenets{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter) var(--gutter)}
.tenet{grid-column:span 6;padding-top:24px;border-top:1px solid rgba(244,240,230,.2);
  display:grid;grid-template-columns:auto 1fr;gap:1.2em}
.tenet .n{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.tenet h3{font-family:var(--display);font-stretch:108%;text-transform:uppercase;
  font-size:var(--step-1);margin-bottom:.5em}
.tenet p{color:#c9c2b3;font-size:var(--step--1);margin:0;max-width:42ch}
@media(min-width:900px){.tenet{grid-column:span 6}}

/* ---- Stats ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.stat{grid-column:span 4;border-top:1px solid var(--line-strong);padding-top:18px}
.stat .num{font-family:var(--display);font-stretch:120%;font-weight:800;
  font-size:var(--step-3);line-height:.9;letter-spacing:-.03em}
.stat .num .u{color:var(--accent)}
.stat .lbl{color:var(--muted);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.12em;margin-top:.6em}

/* ---- Quote / lede band ------------------------------------ */
.band{padding-block:clamp(60px,10vw,140px)}
.band .grid{align-items:start}
.band blockquote{grid-column:2/12;margin:0;font-family:var(--serif);
  font-size:var(--step-3);line-height:1.08;letter-spacing:-.015em}
.band blockquote .em{color:var(--accent)}
.band .cite{grid-column:2/12;margin-top:1.5em;color:var(--muted);
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em}

/* ---- Contact / CTA ---------------------------------------- */
.cta-block{padding-block:clamp(56px,9vw,120px)}
.cta-block h2{font-family:var(--display);font-stretch:120%;text-transform:uppercase;
  font-size:var(--giant);line-height:.84;letter-spacing:-.03em}
.cta-block h2 a:hover{color:var(--accent)}
.cta-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:clamp(24px,4vw,48px)}
.cta-row .meta{color:var(--muted);font-size:var(--step--1);margin-left:auto;text-align:right}

/* ---- Footer ------------------------------------------------ */
.site-foot{border-top:1px solid var(--line-strong);padding-block:clamp(32px,5vw,64px) 28px}
.foot-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:end}
.foot-brand{grid-column:1/7}
.foot-brand .big{font-family:var(--display);font-stretch:125%;font-weight:800;
  text-transform:uppercase;font-size:var(--step-3);line-height:.9;letter-spacing:-.03em}
.foot-col{grid-column:span 2;display:flex;flex-direction:column;gap:.6em}
.foot-col h4{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted);margin:0 0 .4em;font-weight:600}
.foot-col a{font-size:var(--step--1);color:var(--ink)}
.foot-col a:hover{color:var(--accent)}
.foot-end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:clamp(32px,5vw,64px);color:var(--muted);font-size:var(--step--1)}

/* ---- Reveal animation ------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- Responsive ------------------------------------------- */
@media(max-width:820px){
  .nav{display:none}
  .menu-toggle{display:inline-flex;font-size:var(--step--1);text-transform:uppercase;
    letter-spacing:.14em;font-weight:600}
  .hero-meta,.hero-head,.hero-foot .lede,.hero-foot .aside{grid-column:1/-1}
  .section-head .tag,.section-head .ttl{grid-column:1/-1}
  .svc-row{grid-template-columns:repeat(6,1fr);row-gap:6px}
  .svc-row .n{grid-column:1/-1}
  .svc-row .name{grid-column:1/-1}
  .svc-row .desc{grid-column:1/6}
  .svc-row .go{grid-column:6/7}
  .tenet{grid-column:1/-1}
  .stat{grid-column:span 12}
  .band blockquote,.band .cite{grid-column:1/-1}
  .foot-brand{grid-column:1/-1}
  .foot-col{grid-column:span 6}
}