@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/geometry.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

/* ==========================================================================
   Site-level primitives
   Ports of the STEADY design-system React components (Button, Card, Eyebrow,
   Icon) to plain CSS. Values are taken from the component sources — do not
   re-derive them locally.
   ========================================================================== */

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{--ca-card-min:420px}

a{text-decoration:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}

/* .wrap owns horizontal rhythm: the 1120px measure, the centering and the 24px gutter.
   Anything that also carries .wrap must set padding/margin with LONGHANDS only — a
   `padding:` or `margin:` shorthand here has equal specificity and silently resets the
   gutter or the centering, knocking that one band out of alignment with the rest. */
.wrap{max-width:1120px;margin:0 auto;padding-left:var(--space-6);padding-right:var(--space-6)}
.section{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.section--tinted{background:var(--surface-card)}
.section__intro{max-width:60ch;margin-bottom:clamp(32px,4vw,48px)}
.section__intro > .eyebrow{margin-bottom:var(--space-4)}

.skip-link{position:absolute;left:var(--space-6);top:-100px;z-index:40;background:var(--action-primary);color:var(--action-primary-text);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-weight:600}
.skip-link:focus{top:var(--space-3)}

/* --- Eyebrow ------------------------------------------------------------ */
.eyebrow{display:flex;align-items:center;gap:var(--space-2);color:var(--text-secondary);
  font-family:var(--font-ui);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-line);
  font-weight:var(--type-eyebrow-weight);letter-spacing:var(--type-eyebrow-tracking);text-transform:uppercase}
.eyebrow--accent{color:var(--accent-detail)}
.eyebrow--muted{color:var(--text-disabled)}

/* --- Button ------------------------------------------------------------- */
.btn{font-family:var(--font-ui);font-size:var(--type-button-size);line-height:var(--type-button-line);
  font-weight:var(--type-button-weight);border-radius:var(--radius-md);border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;
  transition:var(--motion-transition);padding:0 var(--space-5);min-height:var(--control-height);
  background:var(--action-primary);color:var(--action-primary-text);text-decoration:none}
.btn:hover{opacity:1}
.btn:active{opacity:.88}
.btn--secondary{background:transparent;color:var(--action-primary);border-color:var(--action-primary)}
.btn--secondary:active{background:var(--surface-pressed);opacity:1}
.btn--lg{min-height:var(--control-height-lg)}
.btn--sm{min-height:var(--touch-target-min);font-size:var(--type-label-size);padding:0 var(--space-4)}

/* --- Card --------------------------------------------------------------- */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:var(--card-padding)}
.card--dense{padding:var(--card-padding-dense)}
.card--featured{background:var(--surface-featured);border-color:var(--surface-featured);
  border-radius:var(--radius-xl);color:var(--text-on-dark)}

/* --- Icon --------------------------------------------------------------- */
.icon{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);
  color:var(--icon-default);flex:0 0 auto}
.icon svg{width:100%;height:100%;display:block;stroke-width:var(--icon-stroke)}
.icon--accent{color:var(--icon-accent)}
.icon--support{color:var(--icon-support)}

/* --- Reveal on scroll --------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--motion-slow) var(--motion-ease),transform var(--motion-slow) var(--motion-ease)}
[data-reveal][data-delay="1"]{transition-delay:60ms}
[data-reveal].is-revealed{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:20;background:var(--canvas);border-bottom:1px solid var(--border-subtle)}
.site-header__inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) 28px;
  padding-top:14px;padding-bottom:14px}
.wordmark{font-family:var(--font-heading);font-size:19px;font-weight:600;letter-spacing:-0.01em;
  color:var(--text-primary);margin-right:auto}
.wordmark em{font-style:normal;color:var(--accent-detail)}
.site-nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);
  font-size:var(--type-label-size);line-height:var(--type-label-line);font-weight:500}
.site-nav a{color:var(--text-secondary)}
.site-header .btn{min-height:40px;font-size:var(--type-label-size);padding:0 18px}
@media (max-width:560px){
  .site-header__inner{gap:var(--space-3) var(--space-5)}
  .site-nav{order:3;width:100%}
  .site-header .btn{order:2}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(40px,5vw,72px)}
.hero__grid{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  align-items:center}
.hero__copy > .eyebrow{margin-bottom:var(--space-5)}
.hero h1{font-size:clamp(34px,5.2vw,56px);line-height:1.08;letter-spacing:-0.02em;margin:0 0 var(--space-5)}
.hero__lead{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--text-secondary);
  margin:0 0 var(--space-8);max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:center}

/* Abstract "signal → structure → shipped" panel. Decorative, aria-hidden. */
.signal-panel{justify-self:center;width:100%;max-width:440px}
.signal-panel__frame{aspect-ratio:1/1;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  background:var(--surface-card);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;
  justify-content:space-between}
.signal-panel__cols{display:grid;grid-template-columns:1.15fr 1fr 0.85fr;gap:clamp(12px,2.4vw,24px);
  align-items:center;flex:1}
.signal-panel__col{display:grid}
.signal-panel__col--raw{gap:9px}
.signal-panel__col--sorted{gap:14px}
.signal-panel__col--shipped{gap:var(--space-4)}
.signal-panel__bar{border-radius:var(--radius-full)}
.signal-panel__col--raw .signal-panel__bar{height:6px;background:var(--border-default)}
.signal-panel__col--sorted .signal-panel__bar{height:10px;background:var(--support-ui)}
.signal-panel__col--shipped .signal-panel__bar{height:18px;background:var(--action-primary)}
.signal-panel__col--shipped .signal-panel__bar--accent{background:var(--accent-detail)}
.signal-panel__legend{display:grid;grid-template-columns:1.15fr 1fr 0.85fr;gap:clamp(12px,2.4vw,24px);
  border-top:1px solid var(--border-subtle);padding-top:var(--space-4);margin-top:clamp(16px,3vw,28px);
  font-size:var(--type-caption-size);line-height:var(--type-caption-line);font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--text-disabled)}
.signal-panel__legend span:last-child{color:var(--text-secondary)}

/* ==========================================================================
   Credibility strip
   ========================================================================== */
.credibility{background:var(--surface-card)}
.credibility ul{list-style:none;padding-top:var(--space-6);padding-bottom:var(--space-6);
  display:grid;gap:var(--space-4) var(--space-8);grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  font-size:var(--type-label-size);line-height:var(--type-label-line);font-weight:500;color:var(--text-secondary)}

/* ==========================================================================
   Services
   ========================================================================== */
.service-grid{display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(var(--ca-card-min),100%),1fr))}
.service{display:flex;flex-direction:column;height:100%}
.service__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  margin-bottom:var(--space-4)}
.service__num{font-family:var(--font-ui);font-size:var(--type-caption-size);line-height:var(--type-caption-line);
  font-weight:600;letter-spacing:0.08em;color:var(--text-disabled)}
.service h3{font-size:var(--type-h3-size);line-height:var(--type-h3-line);margin:0 0 10px}
.service p{font-size:15px;line-height:23px;color:var(--text-secondary);margin:0 0 var(--space-5)}
.service__meta{border-top:1px solid var(--border-subtle);padding-top:var(--space-3);display:grid;gap:var(--space-2);
  margin-top:auto;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.service__row{display:flex;justify-content:space-between;gap:var(--space-3)}
.service__meta dt{color:var(--text-disabled)}
.service__meta dd{margin:0;font-weight:500}

/* ==========================================================================
   Process
   ========================================================================== */
.process{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--border-subtle);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.process li{background:var(--canvas);padding:var(--space-6)}
.process__rule{width:28px;height:2px;background:var(--action-primary);margin-bottom:var(--space-5)}
.process__rule--accent{background:var(--accent-detail)}
.process h3{font-size:18px;line-height:24px;margin:0 0 var(--space-2)}
.process p{font-size:15px;line-height:23px;color:var(--text-secondary);margin:0}

/* ==========================================================================
   Industries
   ========================================================================== */
.industries{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.industry-primary{height:100%}
.industry-primary h3{font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin:0 0 var(--space-3);
  color:var(--text-on-dark)}
.industry-primary > .eyebrow{margin-bottom:14px}
.industry-primary p{font-size:var(--type-body-size);line-height:25px;margin:0 0 var(--space-6);
  color:var(--text-on-dark);opacity:.85}
.industry-primary ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:rgba(243,239,229,.16);border-radius:var(--radius-md);overflow:hidden}
.industry-primary li{padding:var(--space-3) 14px;font-size:15px;line-height:22px;
  color:var(--text-on-dark);background:rgba(243,239,229,.08)}
.industry-stack{display:grid;gap:var(--space-4);align-content:start}
.industry-stack h3{font-size:18px;line-height:24px;margin:0 0 var(--space-2)}
.industry-stack p{font-size:15px;line-height:23px;color:var(--text-secondary);margin:0}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact__grid{display:grid;gap:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  align-items:center;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.contact h2{font-size:clamp(26px,3.4vw,36px);line-height:1.15;letter-spacing:-0.015em;margin:0 0 14px}
.contact p{font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line);color:var(--text-secondary);
  margin:0;max-width:46ch}
.contact__actions{display:grid;gap:14px;justify-items:start}
.contact__email{font-size:var(--type-label-size);line-height:var(--type-label-line);color:var(--text-secondary)}
.contact__email a{color:var(--text-secondary)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--canvas)}
.site-footer__top{padding-top:clamp(40px,5vw,64px);padding-bottom:var(--space-8);display:grid;gap:var(--space-8);
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.site-footer__blurb{font-size:15px;line-height:23px;color:var(--text-secondary);margin:0;max-width:34ch}
.site-footer .wordmark{display:block;margin:0 0 10px}
.site-footer nav{display:grid;gap:10px;align-content:start;font-size:15px;line-height:22px}
.site-footer nav a{color:var(--text-secondary)}
.site-footer__bottom{padding-top:var(--space-5);padding-bottom:var(--space-10);border-top:1px solid var(--border-subtle);
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);justify-content:space-between;
  font-size:13px;line-height:var(--type-body-sm-line);color:var(--text-disabled)}

/* ==========================================================================
   Section headings shared by services / process / industries
   ========================================================================== */
.section__intro h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-0.015em;margin:0 0 var(--space-4)}
.section__intro p{font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line);
  color:var(--text-secondary);margin:0}
.section__intro--wide{max-width:62ch}
.section__intro--narrow{max-width:58ch}