/* ============================================================
   IPHIOS LOGISTICS CORP. — 01 / tokens
   Design tokens, reset, and the typographic primitives that
   every other stylesheet builds on. Nothing here draws a
   component; it only establishes the vocabulary.

   Palette   Paper #FBF9F5 · Bone #F2ECE1 · Ink #14120F
             Ash #71695E · Amber #E2A028 (the single accent)
   Type      Bodoni Moda (display) · Archivo (body)
             IBM Plex Mono (labels, data, captions)
   ============================================================ */

:root{
  /* surface */
  --paper:#FBF9F5;
  --bone:#F2ECE1;
  --ink:#14120F;
  --ash:#71695E;
  --ash-2:#9A9186;

  /* rules */
  --line:rgba(20,18,15,.13);
  --line-soft:rgba(20,18,15,.07);

  /* accent — sampled from the logo file itself (median gold #FDA304,
     hue 38°) and pulled back for print-weight restraint. Used in four
     places only: scroll progress, active service marker, form focus,
     button fill. */
  --amber:#EFA211;
  --amber-deep:#B4740A;
  --amber-wash:#FDEBC8;

  /* the one gradient, reserved for the closing section */
  --sun:linear-gradient(160deg,#FFF8EC 0%,#FDEAC6 42%,#F8D79C 100%);

  /* every logo instance carries this, so the render sits in the same
     grade as the photography rather than floating on top of it */
  --logo-grade:saturate(.96) contrast(1.02);

  /* type */
  --f-display:"Montserrat","Oswald",Georgia,serif;
  --f-body:"Montserrat","Fjalla On",Arial,Oswald;
  --f-mono:"Lustria",ui-monospace,"Oswald",Menlo,monospace;

  /* rhythm */
  --gut:clamp(20px,4.4vw,72px);
  --rail:52px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100vh}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px;border-radius:2px}

/* ---------- typographic primitives ---------- */
.mono{
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ash);
}
.display{font-family:var(--f-display);font-weight:400;letter-spacing:-.015em;line-height:.98}
.italic{font-style:italic;font-weight:400}
.lede{
  font-size:clamp(15px,1.28vw,18px);
  line-height:1.65;
  color:var(--ash);
  max-width:46ch;
  font-weight:300;
}

/* masked line reveal — .line-wrap clips, .rv is what animates */
.line-wrap{display:block;overflow:hidden;padding-bottom:.06em}
.rv{display:block;clip-path:inset(0 0 108% 0);will-change:clip-path,transform}

/* ---------- shared structure ---------- */
.shell{padding-left:var(--rail)}
.sec{padding:clamp(88px,11vw,164px) var(--gut)}
.wrap{max-width:1560px;margin:0 auto;width:100%}
.hr{height:1px;background:var(--line);border:0;margin:0}

.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);flex:none}

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(24px,5vw,90px);
  align-items:end;
  margin-bottom:clamp(48px,6vw,92px);
}
.sec-title{
  font-family:var(--f-display);
  font-size:clamp(38px,6.4vw,86px);
  font-weight:400;
  line-height:.96;
  letter-spacing:-.022em;
  margin:0;
}

@media(max-width:1080px){
  .sec-head{grid-template-columns:1fr;align-items:start;gap:20px}
}
@media(max-width:760px){
  :root{--rail:0px}
}

/* ---------- accessibility floor ---------- */
@media(prefers-reduced-motion:reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{clip-path:none !important}
}