/* ============================================================
   Sentie — styles.css
   1 tokens · 2 fonts · 3 base · 4 layout · 5 buttons
   6 header · 7 hero · 8 metrics · 9 steps · 10 industries
   11 trust · 12 cta · 13 footer · 14 motion
   ============================================================ */

/* 1 — TOKENS ------------------------------------------------ */
:root{
  --graphite:#0E1113;
  --graphite-800:#191D21;
  --graphite-700:#22272B;
  --paper:#F7F6F4;
  --white:#FFFFFF;
  --accent:#FF5A1F;        /* vivid — dark backgrounds + button fills */
  --accent-press:#E14A12;
  --accent-ink:#C93F0D;    /* AA-safe accent for TEXT on light backgrounds */
  --ink:#14171A;
  --ink-muted:#5B6470;
  --ink-faint:#8A929C;
  --hairline:#E2E0DC;
  --hairline-dark:#2A2F34;

  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --gutter:clamp(20px,5vw,80px);
  --sec-y:clamp(64px,9vw,152px);
  --hdr-h:72px;
  --maxw:1440px;
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:899px){ :root{ --hdr-h:60px; } }

/* 2 — FONTS ------------------------------------------------- */
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo-latin-var.woff2') format('woff2');font-weight:100 900;font-stretch:75% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-latin-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/plexmono-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* 3 — BASE -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .18vw,1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0}
h1{font-size:clamp(2.5rem,7.2vw,5rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.9rem);line-height:1.08}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:var(--r)}
.hdr :focus-visible,.mnav :focus-visible,.hero :focus-visible,.metrics :focus-visible,.cta :focus-visible,.ftr :focus-visible{outline-color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:12px 18px;font:500 15px/1 var(--font-body)}
.skip:focus{left:12px;top:12px}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
/* Anchor targets are the first content element of each section, not the
   <section> itself — landing on a section would put its top padding under
   the header and leave the heading stranded far down the screen. */
#product,#projects,#industries,#contact{scroll-margin-top:22px}

.eyebrow{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(.66rem,.6rem + .18vw,.76rem);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0;
}
.eyebrow--dark{color:var(--accent-ink)}

/* 4 — LAYOUT ------------------------------------------------ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* 5 — BUTTONS ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 30px;
  background:var(--accent);color:var(--graphite);
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  letter-spacing:.005em;border:0;border-radius:var(--r);cursor:pointer;
  transition:background .16s var(--ease),transform .12s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--accent-press)}
.btn:active{transform:scale(.985)}
.btn--sm{min-height:42px;padding:0 20px;font-size:.9375rem}
.btn--lg{min-height:60px;padding:0 42px;font-size:1.0625rem}

/* 6 — HEADER ------------------------------------------------ */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--hdr-h);
  transition:background .25s var(--ease),border-color .25s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(14,17,19,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--hairline-dark)}
.hdr__in{
  height:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
}
.logo{display:flex;align-items:center;gap:10px;color:#fff;margin-right:auto}
.logo__mark{width:auto;height:34px;flex:0 0 auto}
.logo__word{font-family:var(--font-display);font-weight:700;font-size:1.3125rem;letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav a{
  color:rgba(255,255,255,.82);font-size:.9375rem;font-weight:500;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .16s,border-color .16s;
}
.nav a:hover{color:#fff;border-bottom-color:var(--accent)}
.burger{
  display:none;width:44px;height:44px;margin-right:-10px;
  background:none;border:0;cursor:pointer;padding:11px 9px;
}
.burger span{display:block;height:2px;background:#fff;border-radius:1px;transition:transform .25s var(--ease),opacity .18s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mnav{
  position:fixed;inset:0;z-index:90;background:var(--graphite);
  padding:calc(var(--hdr-h) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.mnav__in{display:flex;flex-direction:column;gap:4px}
.mnav__in a{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,6vw,2rem);color:#fff;
  padding:14px 0;border-bottom:1px solid var(--hairline-dark);
}
.mnav__cta{margin-top:26px;border-bottom:0!important;font-size:1rem!important;font-family:var(--font-body)!important;font-weight:500!important;padding:0 30px!important}

@media (max-width:899px){
  .nav,.hdr__cta{display:none}
  .burger{display:block}
}

/* 7 — HERO -------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;
  min-height:min(100svh,900px);
  display:flex;align-items:center;
  padding:calc(var(--hdr-h) + clamp(48px,8vh,88px)) 0 clamp(64px,10vh,110px);
  background:var(--graphite);color:#fff;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
/* Symmetric scrim: the composition is centered, so the darkening is centered
   too — a vignette for text contrast over a vertical gradient that keeps the
   header and the section seam legible. */
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 88% 72% at 50% 50%,rgba(14,17,19,.78) 0%,rgba(14,17,19,.63) 52%,rgba(14,17,19,.48) 100%),
    linear-gradient(180deg,rgba(14,17,19,.82) 0%,rgba(14,17,19,.28) 26%,rgba(14,17,19,.3) 68%,rgba(14,17,19,.86) 100%);
}
.hero__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  text-align:center;
}
.hero__in>*+*{margin-top:clamp(14px,1.7vh,22px)}
/* One line at every width: "Design Before You Bid" measures 9.97x its font-size in
   Archivo 700, so dividing the available width by 10.8 leaves ~8% safety margin
   (covers scrollbar width differences between platforms). */
.hero h1{
  white-space:nowrap;
  font-size:min(6.25rem, calc((100vw - 2 * clamp(20px,5vw,80px)) / 10.8));
}
.hero__sub{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.0625rem,2.2vw,1.75rem);
  letter-spacing:-.012em;color:rgba(255,255,255,.9);
}
.hero__line{
  font-size:clamp(1rem,1.15vw,1.1875rem);
  color:rgba(255,255,255,.72);max-width:46ch;margin-inline:auto;line-height:1.55;
}
.hero__cta{display:flex;justify-content:center;margin-top:clamp(26px,3.6vh,42px)!important}

/* 8 — FLOW: end-to-end pipeline + metrics ------------------- */
.flow{background:var(--graphite);color:#fff;padding-block:clamp(60px,8vw,120px);border-top:1px solid var(--hairline-dark)}

.flow__head{display:grid;gap:14px;max-width:60ch;margin-bottom:clamp(40px,5.5vw,72px)}
.flow__head h2{text-wrap:balance}
.flow__lead{color:rgba(255,255,255,.72);max-width:56ch;line-height:1.55}

/* pipeline */
.pipe{
  display:grid;gap:10px;align-items:stretch;
  grid-template-columns:1fr;
}
.pipe__node,.pipe__end{
  display:grid;gap:6px;align-content:center;
  padding:clamp(16px,1.6vw,22px);
  border:1px solid var(--hairline-dark);border-radius:var(--r);
  background:var(--graphite-800);
}
.pipe__end{background:transparent;border-style:dashed}
.pipe__endLabel{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.pipe__endText{font-size:.875rem;color:rgba(255,255,255,.72);line-height:1.4}
.pipe__ico{display:block;margin-bottom:4px}
.pipe__ico svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pipe__n{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  color:rgba(255,255,255,.46);
}
.pipe__t{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.9375rem,1.1vw,1.0625rem);letter-spacing:-.012em;line-height:1.2;
}
/* connector: vertical on mobile, horizontal from 900px */
.pipe__arrow{position:relative;justify-self:center;width:1px;height:22px;background:var(--hairline-dark)}
.pipe__arrow::after{
  content:'';position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:5px;height:5px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);
  rotate:45deg;
}
@media (min-width:900px){
  .pipe{grid-template-columns:1.05fr 20px repeat(4,1fr 20px) 1.05fr;gap:0;align-items:center}
  .pipe__arrow{width:100%;height:1px;justify-self:stretch}
  .pipe__arrow::after{left:auto;right:0;bottom:auto;top:50%;translate:0 -50%;rotate:-45deg}
  .pipe__node,.pipe__end{height:100%}
}

/* metrics, folded into the same section */
.mx{margin-top:clamp(44px,5.5vw,76px);padding-top:clamp(32px,4vw,52px);border-top:1px solid var(--hairline-dark)}
.mx__grid{display:grid;gap:clamp(26px,3.6vw,48px);grid-template-columns:1fr}
.mx__grid li{display:flex;flex-direction:column;gap:6px}
.mx__n{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.75rem,5.4vw,4.25rem);line-height:.92;
  letter-spacing:-.035em;color:var(--accent);
}
.mx__n em{font-family:var(--font-mono);font-style:normal;font-size:.3em;letter-spacing:.04em;margin-left:.18em;vertical-align:.66em}
.mx__l{font-size:clamp(.9375rem,1vw,1.0625rem);color:rgba(255,255,255,.7);max-width:24ch}
.mx__note{
  margin-top:clamp(24px,3vw,36px);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.46);
}
@media (min-width:760px){ .mx__grid{grid-template-columns:repeat(3,1fr)} }

/* From 900px up the whole section — pipeline and metrics — is sized to fit
   inside one screen height, so it can be taken in without scrolling. The
   spacing keys off vh rather than vw for that reason. */
@media (min-width:900px){
  .flow{padding-block:clamp(36px,6.5vh,104px)}
  .flow__head{margin-bottom:clamp(20px,4vh,56px)}
  .mx{margin-top:clamp(24px,4vh,60px);padding-top:clamp(18px,3vh,40px)}
  .mx__n{font-size:clamp(2.125rem,5.4vh,3.75rem)}
  .mx__note{margin-top:clamp(14px,2vh,28px)}
  .pipe__node,.pipe__end{padding:clamp(12px,1.8vh,20px)}
}
/* Short desktop displays (a 13" laptop's real viewport is ~1280x720 once
   browser chrome is taken out): step the heading down so the section still
   clears the fold. */
@media (min-width:900px) and (max-height:800px){
  .flow h2{font-size:clamp(1.5rem,2.6vw,2rem)}
  .flow__lead{font-size:.9375rem;line-height:1.5}
  .mx__l{font-size:.875rem}
}


/* 9 — STEPS ------------------------------------------------- */
.steps{background:var(--paper);padding-block:var(--sec-y)}
.step{display:grid;gap:clamp(24px,3.4vw,64px);align-items:center}
.step+.step{margin-top:clamp(56px,8vw,132px)}
.step__media{position:relative;overflow:hidden;border-radius:var(--r);background:var(--white)}
.step__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
/* stage deliverables are drawn diagrams — show them whole, never cropped */
.step__media .step__svg{object-fit:contain;background:var(--white)}
.step__media::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--hairline);border-radius:var(--r);pointer-events:none}
.step__n{
  font-family:var(--font-mono);font-weight:500;font-size:.8125rem;
  letter-spacing:.14em;color:var(--accent-ink);margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--hairline);display:inline-block;min-width:56px;
}
.step__lead{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.125rem,1.8vw,1.5rem);letter-spacing:-.014em;
  color:var(--ink-muted);margin-top:12px;max-width:24ch;line-height:1.25;
}
.does{display:grid;gap:9px;margin-top:clamp(18px,2vw,24px)}
.does li{
  position:relative;padding-left:20px;
  font-size:clamp(.9375rem,.95vw,1rem);color:var(--ink-muted);line-height:1.45;
}
.does li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:8px;height:1px;background:var(--accent-ink);
}
.yg{
  margin-top:clamp(20px,2.2vw,28px);margin-bottom:10px;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-muted);
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{
  font-family:var(--font-mono);font-weight:500;font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);
  border:1px solid var(--hairline);border-radius:var(--r);
  padding:7px 11px;background:var(--white);white-space:nowrap;
}
@media (min-width:900px){
  .step{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .step__body{padding-inline:clamp(0px,2vw,40px)}
  .step--flip .step__media{order:2}
  .step--flip .step__body{order:1}
}

/* 9b — PROJECT TYPES ---------------------------------------- */
.projects{background:var(--white);padding-block:var(--sec-y);border-top:1px solid var(--hairline)}
.projects__head{display:grid;gap:12px;max-width:60ch;margin-bottom:clamp(32px,4vw,56px)}
.projects__lead{color:var(--ink-muted);max-width:52ch;line-height:1.55}
.projects__grid{display:grid;gap:clamp(18px,2.2vw,28px);grid-template-columns:1fr}
.pcard{display:grid;gap:0}
.pcard picture{display:block;overflow:hidden;border-radius:var(--r);background:var(--hairline)}
.pcard img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s var(--ease)}
.pcard:hover img{transform:scale(1.03)}
.pcard h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.0625rem,1.3vw,1.1875rem);letter-spacing:-.014em;
  margin-top:16px;
}
.pcard p{margin-top:6px;font-size:.9375rem;color:var(--ink-muted);line-height:1.45}
@media (min-width:600px){ .projects__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .projects__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* 10 — INDUSTRIES ------------------------------------------- */
.inds{background:var(--paper);padding-block:var(--sec-y);border-top:1px solid var(--hairline)}
.inds__grid{
  display:grid;gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:var(--r);
  margin-top:clamp(26px,3.4vw,44px);overflow:hidden;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.inds__grid li{
  background:var(--paper);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:16px;
  padding:clamp(24px,3vw,38px);min-height:168px;
  transition:background .18s var(--ease);
}
.inds__grid li:hover{background:var(--white)}
.inds__grid svg{width:clamp(38px,3.4vw,48px);height:clamp(38px,3.4vw,48px);fill:none;stroke:var(--accent-ink);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.inds__grid span{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.9375rem,1.15vw,1.0625rem);letter-spacing:-.012em;line-height:1.25;
}
@media (min-width:900px){ .inds__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* 11 — TRUST / SECURITY ------------------------------------- */
.trust{background:var(--graphite);color:#fff;padding-block:clamp(64px,8.5vw,128px);border-top:1px solid var(--hairline-dark)}
.trust__h{margin-top:14px;margin-bottom:clamp(34px,4.4vw,58px);max-width:22ch;text-wrap:balance}
.trust__grid{display:grid;gap:1px;background:var(--hairline-dark);border:1px solid var(--hairline-dark);border-radius:var(--r);overflow:hidden;grid-template-columns:1fr}
.tcard{background:var(--graphite);padding:clamp(22px,2.6vw,34px);display:grid;gap:12px;align-content:start}
.tcard__ico svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tcard h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1rem,1.2vw,1.125rem);letter-spacing:-.014em;line-height:1.25;
}
.tcard p{font-size:.9375rem;color:rgba(255,255,255,.7);line-height:1.5}
@media (min-width:640px){ .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .trust__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* 12 — CTA -------------------------------------------------- */
.cta{background:var(--graphite);color:#fff;padding-block:clamp(76px,11vw,168px)}
.cta__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.cta h2{max-width:17ch;text-wrap:balance;margin-inline:auto}
.cta__line{
  margin-top:16px;font-family:var(--font-mono);font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.cta .btn{margin-top:clamp(30px,4vw,46px)}


/* 13 — FOOTER ----------------------------------------------- */
.ftr{background:var(--graphite);color:#fff;border-top:1px solid var(--hairline-dark);padding-top:clamp(44px,5.5vw,72px)}
.ftr__in{display:grid;gap:clamp(30px,4vw,48px);grid-template-columns:1fr;align-items:start}
.logo--ftr{margin-right:0}
.ftr__tag{
  margin-top:12px;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.46);
}
.ftr__nav{display:grid;gap:10px;align-content:start}
.ftr__nav a{font-size:.9375rem;padding-block:2px;color:rgba(255,255,255,.62);transition:color .16s;justify-self:start}
.ftr__nav a:hover{color:#fff}
.ftr__contact{display:grid;gap:12px;align-content:start;font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.04em}
.ftr__mail{
  justify-self:start;color:#fff;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.32);text-underline-offset:4px;
  transition:text-decoration-color .16s;
}
.ftr__mail:hover{text-decoration-color:var(--accent)}
.ftr__addr{font-style:normal;color:rgba(255,255,255,.62);line-height:1.65}
.ftr__base{
  margin-top:clamp(38px,4.5vw,60px);padding-top:22px;padding-bottom:clamp(24px,3vw,34px);
  border-top:1px solid var(--hairline-dark);
}
.ftr__base p{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.46)}
@media (min-width:760px){ .ftr__in{grid-template-columns:1.4fr 1fr 1.2fr} }

/* 13b — TOUCH TARGETS (mobile: every control >= 44px) ------- */
@media (max-width:899px){
  .logo__mark{height:28px}
  .ftr__nav{gap:2px}
  .ftr__nav a{padding-block:11px}
  .ftr__mail{padding-block:12px}
  .logo{padding-block:9px}
}

/* 14 — MOTION ----------------------------------------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}