/* ============================================================
   Ironsite - styles.css
   Industrial-tech design system. Graphite base, molten-orange accent.
   Self-hosted fonts only. No remote requests. UK English throughout.
   ============================================================ */

/* ---------- Self-hosted fonts (merged from fonts.css, no remote host) ---------- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/space-grotesk-600.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root {
  --ink:#16171C;   --ink-2:#1E2027;   --ink-3:#26282F;
  --off:#F5F6F8;   --off-2:#ECEEF1;
  --steel:#6B7280; --steel-2:#9AA1AC;
  /* Darker steel for body text on light bands, keeps AA contrast. */
  --steel-d:#5D6470;
  --line-d:rgba(255,255,255,.08);
  --line-l:rgba(16,23,33,.10);
  --orange:#F0531F; --orange-hi:#FF7C3D; --orange-lo:#E8481B; --white:#FFFFFF;
  /* Darker molten shade for small orange text on light bands, keeps AA contrast. */
  --orange-ink:#C93A10;

  --grad-orange:linear-gradient(180deg, var(--orange-hi) 0%, var(--orange-lo) 100%);

  --font-head:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-eyebrow:.78rem;
  --fs-body:clamp(1rem, .97rem + .16vw, 1.075rem);
  --fs-lead:clamp(1.1rem, 1.02rem + .5vw, 1.3rem);
  --fs-h3:clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-h2:clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --fs-h1:clamp(2.4rem, 1.6rem + 3.8vw, 4.5rem);

  --wrap:1160px;
  --gutter:clamp(1.15rem, 4vw, 2.25rem);
  --radius:14px;
  --radius-sm:9px;
  --section-y:clamp(3.75rem, 2.5rem + 5vw, 6.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-color:#3B3F49 var(--ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* Anchored sections land clear of the sticky header. */
[id] { scroll-margin-top:88px; }

::selection { background:var(--orange); color:var(--white); }

::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:var(--ink); }
::-webkit-scrollbar-thumb { background:#3B3F49; border-radius:8px; border:3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background:#4A4F5B; }

body {
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--off);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img, svg { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
input, select, textarea, button { font-family:inherit; font-size:1rem; }
ul { list-style:none; padding:0; }

h1, h2, h3 { font-family:var(--font-head); font-weight:700; line-height:1.08; letter-spacing:-.02em; }

/* ---------- Focus ---------- */
:focus-visible {
  outline:3px solid var(--orange-hi);
  outline-offset:3px;
  border-radius:3px;
}

.skip-link {
  position:absolute; left:1rem; top:-4rem;
  z-index:200;
  background:var(--orange); color:var(--white);
  padding:.7rem 1.1rem; border-radius:8px; font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus { top:1rem; }

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

.band-dark   { background:var(--ink);   color:var(--off); }
.band-dark-2 { background:var(--ink-2); color:var(--off); }
/* Light bands carry a faint drafting-paper grid so they read as designed, not blank. */
.band-light {
  background:
    linear-gradient(rgba(16,23,33,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,23,33,.03) 1px, transparent 1px)
    var(--off);
  background-size:56px 56px;
  color:var(--ink);
}

section[class*="band-"] { padding-block:var(--section-y); }
.trust-bar { padding-block:clamp(1.4rem, 1rem + 1.5vw, 2rem); }

/* Diagonal cut-steel top edge on selected light bands. The clipped corner
   reveals the dark page behind, like a plate cut at an angle. */
.cut-top {
  --cut:clamp(1.5rem, 3.5vw, 3rem);
  clip-path:polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  padding-top:calc(var(--section-y) + var(--cut));
}

/* ---------- Weld-seam divider ---------- */
/* The seam carries a slow white-hot bead travelling along it, transform only. */
.weld-seam {
  position:relative;
  height:2px;
  overflow:hidden;
  background:linear-gradient(90deg, transparent, var(--orange) 20%, var(--orange-hi) 50%, var(--orange) 80%, transparent);
  opacity:.9;
}
.weld-seam::after {
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:16%;
  background:linear-gradient(90deg, transparent, rgba(255,216,184,.95) 50%, transparent);
  transform:translateX(-120%);
  animation:weld-travel 5.5s linear infinite;
}
@keyframes weld-travel {
  0%   { transform:translateX(-120%); }
  65%  { transform:translateX(740%); }
  100% { transform:translateX(740%); }
}

/* ---------- Marquee ribbon ---------- */
/* A slow conveyor of the studio's promises, hex rivets between each. */
.marquee {
  overflow:hidden;
  background:var(--ink-2);
  border-block:1px solid var(--line-d);
  padding-block:.9rem;
}
.marquee-track {
  display:flex; width:max-content;
  animation:marquee-scroll 34s linear infinite;
}
.marquee-run {
  display:flex; align-items:center; gap:2.4rem;
  padding-right:2.4rem;
  font-family:var(--font-mono); font-weight:500; font-size:.78rem;
  letter-spacing:.22em; white-space:nowrap;
  color:var(--steel-2);
}
.marquee .hex {
  display:inline-block; width:12px; height:10.4px; flex:none;
  clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background:var(--grad-orange);
}
@keyframes marquee-scroll { to { transform:translateX(-50%); } }

/* ---------- Eyebrow / mono labels ---------- */
.eyebrow {
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--fs-eyebrow);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange-hi);
  margin-bottom:1rem;
}
/* Technical rule: tick marks over a hairline baseline, like a drawing scale. */
.eyebrow::after {
  content:"";
  flex:0 1 78px; height:7px;
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px),
    linear-gradient(currentColor, currentColor);
  background-size:auto 100%, 100% 1px;
  background-position:0 0, 0 100%;
  background-repeat:repeat-x, no-repeat;
  opacity:.45;
}
.eyebrow-ink { color:var(--orange-ink); }
.mono-inline {
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:.1em;
  color:var(--orange-hi);
}
.band-light .mono-inline { color:var(--orange-ink); }

/* ---------- Section heads ---------- */
.section-head { max-width:44ch; margin-bottom:clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section-title { font-size:var(--fs-h2); }
.section-sub {
  margin-top:1rem; font-size:var(--fs-lead); color:var(--steel-2); max-width:52ch;
}
.band-light .section-sub { color:var(--steel-d); }

/* ---------- Buttons ---------- */
.btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; line-height:1;
  padding:.95rem 1.6rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  will-change:transform;
}
/* Shine sweep: a skewed light band that crosses on hover, transform only. */
.btn::after {
  content:"";
  position:absolute; top:-4px; bottom:-4px; left:-48%; width:36%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform:translateX(0) skewX(-18deg);
  pointer-events:none;
}
.btn:hover::after, .btn:focus-visible::after {
  transform:translateX(440%) skewX(-18deg);
  transition:transform .55s var(--ease);
}
.btn:active { transform:translateY(1px) scale(.985); }
.btn-sm { padding:.62rem 1.05rem; font-size:.94rem; }
.btn-block { width:100%; }

.btn-primary {
  background:var(--grad-orange);
  color:var(--white);
  box-shadow:0 6px 20px -8px rgba(232,72,27,.65);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(232,72,27,.8); }
.btn-primary:active { transform:translateY(1px) scale(.985); box-shadow:0 6px 16px -8px rgba(232,72,27,.6); }

.btn-ghost {
  background:transparent;
  border-color:var(--steel);
  color:currentColor;
}
.band-dark .btn-ghost, .band-dark-2 .btn-ghost { border-color:rgba(255,255,255,.25); }
.btn-ghost:hover { border-color:var(--orange-hi); color:var(--orange-hi); transform:translateY(-2px); }
.band-light .btn-ghost:hover { color:var(--orange-ink); border-color:var(--orange-lo); }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:100;
  background:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled, .site-header.is-solid {
  background:rgba(22,23,28,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:var(--line-d);
}
/* Molten scroll-progress bar under the header. CSS scroll-driven, no JS. */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:linear-gradient(90deg, var(--orange-lo), var(--orange) 55%, var(--orange-hi));
    transform:scaleX(0); transform-origin:0 50%;
    animation:scroll-progress linear both;
    animation-timeline:scroll();
    pointer-events:none;
  }
  @keyframes scroll-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  min-height:74px;
}
.brand { display:inline-flex; align-items:center; }
.brand-logo { width:auto; height:38px; }

.primary-nav { display:flex; align-items:center; }
.nav-menu { display:flex; align-items:center; gap:.35rem; }
.nav-menu a:not(.btn) {
  position:relative;
  display:inline-block;
  padding:.55rem .8rem;
  color:var(--steel-2);
  font-weight:500;
  border-radius:7px;
  transition:color .16s var(--ease);
}
/* Animated underline, drawn from the left like a weld pass. */
.nav-menu a:not(.btn)::after {
  content:"";
  position:absolute; left:.8rem; right:.8rem; bottom:.28rem; height:2px;
  background:linear-gradient(90deg, var(--orange-hi), var(--orange-lo));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .22s var(--ease);
}
.nav-menu a:not(.btn):hover { color:var(--white); }
.nav-menu a:not(.btn):hover::after, .nav-menu a:not(.btn):focus-visible::after { transform:scaleX(1); }
.nav-cta { margin-left:.5rem; }

.nav-toggle { display:none; }
.nav-toggle-bar {
  display:block; width:24px; height:2px; background:var(--off); border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle-bar + .nav-toggle-bar { margin-top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding-block:clamp(5rem, 3rem + 12vw, 9rem); }

/* Soft forge glow rising behind the headline. Breathes slowly, opacity and scale only. */
.hero-glow {
  position:absolute; left:-12%; top:-24%;
  width:72%; max-width:880px; aspect-ratio:1.35;
  background:radial-gradient(closest-side, rgba(240,83,31,.17), rgba(240,83,31,.05) 55%, transparent 72%);
  pointer-events:none;
  animation:forge-breathe 8s ease-in-out infinite alternate;
}
@keyframes forge-breathe {
  from { opacity:.65; transform:scale(1); }
  to   { opacity:1;   transform:scale(1.07); }
}

/* Technical grid, drifting one cell every 40s so it reads as slow machine motion. */
.hero-grid {
  position:absolute; inset:0;
  overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 32%, #000 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 80% 62% at 50% 32%, #000 0%, transparent 78%);
  opacity:.55;
  pointer-events:none;
}
.hero-grid::before {
  content:"";
  position:absolute; inset:-56px 0 0 -56px;
  background-image:
    linear-gradient(var(--line-d) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
  background-size:56px 56px;
  animation:grid-drift 40s linear infinite;
}
@keyframes grid-drift { to { transform:translate3d(56px, 56px, 0); } }

/* Blueprint corner brackets framing the hero. */
.hero-frame { position:absolute; inset:clamp(1.1rem, 2.5vw, 2rem); pointer-events:none; }
.hero-frame::before, .hero-frame::after {
  content:"";
  position:absolute; width:30px; height:30px;
  border:1px solid rgba(255,255,255,.22);
}
.hero-frame::before { top:0; left:0; border-right:0; border-bottom:0; }
.hero-frame::after { bottom:0; right:0; border-left:0; border-top:0; }

/* Forged hexagon cluster on the hero's right, echoing the new mark. Desktop only. */
.hero-hexes { position:absolute; inset:0; pointer-events:none; }
.hero-hexes span {
  position:absolute;
  aspect-ratio:1 / 0.866;
  clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background:var(--grad-orange);
}
.hero-hexes span:nth-child(1) {
  right:-70px; top:14%;
  width:min(23vw, 330px);
  opacity:.16;
  animation:hex-drift 11s ease-in-out infinite alternate;
}
.hero-hexes span:nth-child(2) {
  right:17%; top:58%;
  width:min(9vw, 120px);
  opacity:.11;
  animation:hex-drift 14s ease-in-out infinite alternate-reverse;
}
.hero-hexes span:nth-child(3) {
  right:9%; top:26%;
  width:42px;
  opacity:.4;
  animation:hex-drift 9s ease-in-out infinite alternate;
}
@keyframes hex-drift {
  from { transform:translateY(0); }
  to   { transform:translateY(-16px); }
}
@media (max-width:900px) { .hero-hexes { display:none; } }

.hero-inner { position:relative; max-width:52rem; }
.hero-title { font-size:var(--fs-h1); margin-bottom:1.35rem; }

/* Molten key phrase. Solid orange fallback, gradient text where supported. */
.molten { color:var(--orange-hi); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .molten {
    background:linear-gradient(94deg, #FFB98E 0%, var(--orange-hi) 32%, var(--orange) 62%, var(--orange-lo) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

.hero-sub { font-size:var(--fs-lead); color:var(--steel-2); max-width:44ch; margin-bottom:2.1rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.6rem; }

.trust-strip {
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em;
  color:var(--steel-2);
}
.trust-strip li { position:relative; padding-left:1.15rem; }
.trust-strip li::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--orange);
}

/* ---------- Trust bar ---------- */
.trust-bar-inner {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.5rem;
}
.trust-bar-lead { font-weight:600; color:var(--off); }
.chips { display:flex; flex-wrap:wrap; gap:.55rem; }
.chip {
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em;
  padding:.4rem .7rem; border-radius:999px;
  border:1px solid var(--line-d); color:var(--steel-2);
  background:rgba(255,255,255,.02);
  white-space:nowrap;
  transition:color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.chip:hover { color:var(--orange-hi); border-color:rgba(255,124,61,.45); transform:translateY(-1px); }
.band-light .chip { border-color:var(--line-l); color:var(--steel); background:rgba(16,23,33,.02); }
.band-light .chip:hover { color:var(--orange-ink); border-color:rgba(232,72,27,.45); }
.chips-sm .chip { font-size:.7rem; padding:.32rem .6rem; }

/* ---------- Card grid ---------- */
.card-grid { display:grid; gap:1.1rem; }
.why-grid, .services-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.card {
  position:relative; overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--line-d);
  border-radius:var(--radius);
  padding:clamp(1.4rem, 1.1rem + 1vw, 2rem);
  transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform:translateY(-4px); border-color:rgba(255,124,61,.45); box-shadow:0 18px 40px -24px rgba(0,0,0,.7); }
.band-light .card {
  background:var(--white);
  border-color:var(--line-l);
}
.band-light .card:hover { border-color:rgba(232,72,27,.4); box-shadow:0 18px 40px -24px rgba(16,23,33,.28); }

/* Technical corner brackets, revealed on hover. */
.card::before, .card::after,
.work-card::before, .work-card::after {
  content:"";
  position:absolute; width:14px; height:14px; z-index:1;
  border:2px solid var(--orange);
  opacity:0;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
  pointer-events:none;
}
.card::before, .work-card::before { top:9px; left:9px; border-right:0; border-bottom:0; transform:translate(5px,5px); }
.card::after, .work-card::after { bottom:9px; right:9px; border-left:0; border-top:0; transform:translate(-5px,-5px); }
.card:hover::before, .card:hover::after,
.work-card:hover::before, .work-card:hover::after { opacity:.9; transform:none; }

/* Card index: a small forged hex badge with the number beside it. */
.card-num {
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-weight:500; font-size:.85rem;
  color:var(--orange-hi); letter-spacing:.1em;
  margin-bottom:.9rem;
}
.card-num::before {
  content:"";
  width:12px; height:10.4px; flex:none;
  clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background:var(--grad-orange);
}
.band-light .card-num { color:var(--orange-ink); }
.card-title { font-family:var(--font-head); font-weight:600; font-size:var(--fs-h3); margin-bottom:.55rem; }
.card-body { color:var(--steel-d); }
.band-dark .card-body, .band-dark-2 .card-body { color:var(--steel-2); }

/* ---------- Work ---------- */
.work-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.work-card {
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--line-d);
  border-radius:var(--radius);
  padding:1.1rem 1.1rem 1.6rem;
  display:flex; flex-direction:column;
  transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.work-card:hover { transform:translateY(-4px); border-color:rgba(255,124,61,.45); box-shadow:0 18px 44px -24px rgba(0,0,0,.7); }

.browser-frame {
  border:1px solid var(--line-d);
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-3);
  margin-bottom:1.2rem;
}
.browser-bar {
  display:flex; align-items:center; gap:6px;
  padding:.55rem .8rem;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line-d);
}
.browser-bar span { width:9px; height:9px; border-radius:50%; background:var(--steel); opacity:.55; }
.browser-bar span:first-child { background:var(--orange); opacity:.75; }
.browser-url {
  margin-left:.7rem; font-family:var(--font-mono); font-style:normal;
  font-size:.72rem; color:var(--steel-2); letter-spacing:.02em;
}
.browser-body {
  aspect-ratio:16/10;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,124,61,.10), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 12px, transparent 12px 24px),
    var(--ink);
}
.browser-label {
  font-family:var(--font-head); font-weight:600; font-size:clamp(1rem, .9rem + .8vw, 1.5rem);
  color:var(--steel-2); letter-spacing:-.01em; text-align:center; padding:1rem;
}
.browser-frame-muted { opacity:.72; }
.browser-frame-muted .browser-body {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    var(--ink);
}

/* Real site screenshot inside the browser chrome. */
.browser-shot {
  display:block; width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover; object-position:top center;
  background:var(--ink);
}
.work-name { font-family:var(--font-head); font-weight:600; font-size:var(--fs-h3); margin-bottom:.2rem; }
.work-url { font-family:var(--font-mono); font-size:.76rem; color:var(--orange-hi); margin-bottom:.7rem; letter-spacing:.02em; }
.work-soon {
  display:inline-block; margin-left:.4rem; vertical-align:middle;
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel-2); border:1px solid var(--line-d); border-radius:999px; padding:.1rem .5rem;
}
/* Non-link status for a project that is built but not yet live. */
.work-link-static {
  margin-top:auto;
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:500; color:var(--steel-2); cursor:default;
}
.work-link-static::before {
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 0 3px rgba(240,83,31,.18);
}
.work-summary { color:var(--steel-2); margin-bottom:1rem; }
.work-card .chips { margin-bottom:1.1rem; }
.work-link {
  margin-top:auto;
  font-weight:600; color:var(--orange-hi);
  display:inline-flex; align-items:center;
  transition:gap .16s var(--ease), color .16s var(--ease);
}
.work-link:hover { color:var(--orange); text-decoration:underline; text-underline-offset:3px; }
.work-card-cta { border-style:dashed; border-color:var(--steel); background:transparent; }

/* ---------- Services ---------- */
.services-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.services-addons {
  margin-top:1.6rem; color:var(--steel-d);
  font-size:1.02rem;
}

/* ---------- Pricing ---------- */
.price-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr)); align-items:start; }
.price-card {
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--line-d);
  border-radius:var(--radius);
  padding:clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  display:flex; flex-direction:column; gap:.2rem;
}
.price-card-featured {
  border-color:transparent;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    var(--grad-orange) border-box;
  border:1.5px solid transparent;
  box-shadow:0 24px 60px -30px rgba(232,72,27,.55);
}
/* Slowly rotating molten border on the featured tier. The conic gradient is
   symmetric, so browsers without @property render it as a static border
   instead of jumping, and the linear gradient above covers everything older. */
@property --iron-ang {
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@supports (background: conic-gradient(from 90deg at 50% 50%, red, blue)) {
  .price-card-featured {
    background:
      linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
      conic-gradient(from var(--iron-ang),
        var(--orange-lo), var(--orange-hi) 22%, rgba(255,124,61,.25) 50%,
        var(--orange-lo) 72%, rgba(255,124,61,.25) 88%, var(--orange-lo)) border-box;
    animation:iron-spin 10s linear infinite;
  }
  @keyframes iron-spin { to { --iron-ang:360deg; } }
}
.price-flag {
  position:absolute; top:-.85rem; left:50%; transform:translateX(-50%);
  background:var(--grad-orange); color:var(--white);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .8rem; border-radius:999px; white-space:nowrap;
}
.price-tier { font-family:var(--font-mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-2); margin-bottom:.4rem; }
.price-figure { display:flex; align-items:baseline; gap:.4rem; margin-bottom:.7rem; flex-wrap:wrap; }
.price-amount { font-family:var(--font-head); font-weight:700; font-size:clamp(2rem, 1.6rem + 1.6vw, 2.7rem); color:var(--off); letter-spacing:-.02em; }
.price-unit { font-family:var(--font-mono); font-size:.78rem; color:var(--steel-2); }
.price-desc { color:var(--steel-2); margin-bottom:1.2rem; }
.price-list { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.6rem; }
.price-list li { position:relative; padding-left:1.6rem; color:var(--off); }
.price-list li::before {
  content:""; position:absolute; left:0; top:.55em;
  width:11px; height:6px; border-left:2px solid var(--orange-hi); border-bottom:2px solid var(--orange-hi);
  transform:rotate(-45deg);
}
.price-card .btn { margin-top:auto; }

.care-row {
  margin-top:1.4rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.4rem;
  padding:1.3rem clamp(1.3rem, 1rem + 1vw, 1.9rem);
  border:1px solid var(--line-d); border-radius:var(--radius);
  background:rgba(255,255,255,.02);
}
.care-figure { display:flex; align-items:baseline; gap:.15rem; }
.care-figure .price-amount { font-size:clamp(1.5rem, 1.3rem + 1vw, 2rem); }
.care-desc { color:var(--steel-2); max-width:52ch; margin-top:.2rem; }
.care-row-main { display:flex; flex-direction:column; gap:.15rem; flex:1 1 320px; }

.price-compare { margin-top:1.6rem; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.03em; color:var(--steel-2); }

/* ---------- What's included (responsibilities) ---------- */
.duties { display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:760px) { .duties { grid-template-columns:1fr 1fr; } }
.duty {
  background:var(--ink);
  border:1px solid var(--line-d);
  border-radius:var(--radius);
  padding:clamp(1.4rem, 1.1rem + 1vw, 2rem);
}
.duty-head {
  display:flex; align-items:center; gap:.8rem;
  margin-bottom:1.3rem; padding-bottom:1.05rem;
  border-bottom:1px solid var(--line-d);
}
.duty-tag {
  font-family:var(--font-mono); font-size:.66rem; font-weight:500; letter-spacing:.14em;
  padding:.3rem .65rem; border-radius:999px; white-space:nowrap;
}
.duty-tag-mine { background:var(--grad-orange); color:var(--white); }
.duty-tag-you { border:1px solid var(--steel); color:var(--steel-2); }
.duty-title { font-family:var(--font-head); font-weight:600; font-size:var(--fs-h3); }
.duty-list { display:flex; flex-direction:column; gap:.9rem; }
.duty-list li { position:relative; padding-left:1.9rem; color:var(--steel-2); }
/* Ironsite items: molten check. Your items: a neutral steel ring. */
.duty-list-mine li::before {
  content:""; position:absolute; left:.15rem; top:.5em;
  width:11px; height:6px;
  border-left:2px solid var(--orange-hi); border-bottom:2px solid var(--orange-hi);
  transform:rotate(-45deg);
}
.duty-list-you li::before {
  content:""; position:absolute; left:.2rem; top:.5em;
  width:9px; height:9px; border-radius:50%;
  border:2px solid var(--steel);
}

.hosting-note {
  margin-top:1.6rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem 2.4rem;
  padding:clamp(1.3rem, 1rem + 1vw, 1.9rem);
  border:1px solid var(--line-d); border-left:3px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0;
  background:rgba(255,255,255,.02);
}
.hosting-note-main { flex:1 1 380px; }
.hosting-note-title {
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--off); margin-bottom:.6rem;
}
.hosting-note-body { color:var(--steel-2); max-width:62ch; }
.hosting-platforms { flex:0 1 auto; }
.hosting-platforms-label {
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); margin-bottom:.7rem;
}

/* ---------- Process ---------- */
.process-steps { list-style:none; padding:0; display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); counter-reset:step; position:relative; }
.process-step {
  /* display:block stops stray outside markers on grid-item list items. */
  display:block;
  position:relative;
  padding:1.5rem 1.3rem;
  background:var(--white);
  border:1px solid var(--line-l);
  border-radius:var(--radius);
}
/* Step number on a forged hexagon badge, echoing the mark. */
.process-num {
  display:flex; align-items:center; justify-content:center;
  width:48px; height:41.6px;
  clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background:var(--grad-orange);
  color:var(--white);
  font-family:var(--font-mono); font-weight:500; font-size:.92rem; letter-spacing:.04em;
  margin-bottom:1.1rem;
}
.process-name { font-family:var(--font-head); font-weight:600; font-size:var(--fs-h3); margin-bottom:.4rem; }
.process-body { color:var(--steel-d); }
/* Thin orange connector on desktop, aligned with the badge. It draws in after the step reveals. */
@media (min-width:920px) {
  .process-step:not(:last-child)::after {
    content:""; position:absolute; top:2.8rem; right:-.65rem; z-index:1;
    width:1.3rem; height:2px; background:var(--orange); opacity:.6;
    transform-origin:left center;
    transition:transform .5s var(--ease) .55s;
  }
  .process-step.reveal:not(.is-visible)::after { transform:scaleX(0); }
}

/* ---------- About ---------- */
.about-inner { display:grid; gap:clamp(2rem, 1rem + 4vw, 4rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:860px) { .about-inner { grid-template-columns:1.5fr 1fr; } }
.about-body { font-size:var(--fs-lead); color:var(--steel-2); margin-bottom:1.6rem; max-width:56ch; }
.about-copy .chips { margin-top:.4rem; }
.about-portrait { display:flex; justify-content:center; }
.portrait-frame {
  width:min(320px, 80%); aspect-ratio:4/5;
  border:1px solid var(--line-d); border-radius:var(--radius);
  display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(255,124,61,.12), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 14px, transparent 14px 28px),
    var(--ink-2);
}
.portrait-mark { width:64px; height:64px; opacity:.5; }

/* Security-scan terminal in the About section. Proof of the hardening pitch. */
.secterm {
  width:100%; max-width:430px;
  border:1px solid var(--line-d); border-radius:12px; overflow:hidden;
  background:#0F1013;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.85);
  font-family:var(--font-mono);
}
.secterm-bar {
  display:flex; align-items:center; gap:6px;
  padding:.6rem .85rem;
  background:rgba(255,255,255,.03); border-bottom:1px solid var(--line-d);
}
.secterm-dot { width:9px; height:9px; border-radius:50%; background:var(--steel); opacity:.55; }
.secterm-dot:first-child { background:var(--orange); opacity:.8; }
.secterm-title { margin-left:.6rem; font-style:normal; font-size:.72rem; color:var(--steel-2); letter-spacing:.04em; }
.secterm-body { padding:1.15rem 1.2rem 1.3rem; font-size:.78rem; line-height:1.9; }
.secterm-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--steel-2); }
.st-prompt { color:var(--orange-hi); margin-right:.55rem; }
.st-out { color:var(--steel); }
.st-ok { color:#6FDC9B; }
.secterm-gap { margin-top:.85rem; }
.st-result { display:flex; align-items:center; gap:.6rem; }
.st-check {
  flex:none; font-size:.62rem; letter-spacing:.06em;
  color:#6FDC9B; border:1px solid rgba(111,220,155,.4); border-radius:4px; padding:.02rem .3rem;
}
.st-grade { margin-left:auto; color:var(--orange-hi); font-weight:500; }
.secterm-cursor { margin-top:.7rem; }
.st-blink {
  display:inline-block; width:9px; height:1.05em; vertical-align:-.18em;
  background:var(--orange-hi);
  animation:term-blink 1.1s steps(1) infinite;
}
@keyframes term-blink { 50% { opacity:0; } }

/* ---------- FAQ accordion ---------- */
.accordion { max-width:780px; border-top:1px solid var(--line-l); }
.acc-item { border-bottom:1px solid var(--line-l); }
.acc-heading { margin:0; }
.acc-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem .25rem;
  background:transparent; border:0; text-align:left;
  font-family:var(--font-head); font-weight:600; font-size:clamp(1.02rem, .95rem + .4vw, 1.2rem);
  color:var(--ink);
  transition:color .16s var(--ease);
}
.acc-trigger:hover { color:var(--orange-ink); }
.acc-icon { position:relative; flex:none; width:16px; height:16px; }
.acc-icon::before, .acc-icon::after {
  content:""; position:absolute; background:var(--orange-lo); border-radius:2px;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.acc-icon::before { top:7px; left:0; width:16px; height:2px; }
.acc-icon::after  { top:0; left:7px; width:2px; height:16px; }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform:scaleY(0); opacity:0; }
/* Smooth open and close via the grid-template-rows 0fr to 1fr technique.
   Browsers that cannot animate track sizes simply snap open, and with the
   hidden attribute (no JS) the panel stays fully closed. */
.acc-panel {
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .32s var(--ease);
  color:var(--steel-d); max-width:64ch;
}
.acc-panel.is-open { grid-template-rows:1fr; }
.acc-inner { min-height:0; overflow:hidden; }
.acc-inner p { padding:0 .25rem 1.3rem; }
.acc-panel[hidden] { display:none; }

/* ---------- Contact ---------- */
.contact-inner { display:grid; gap:clamp(2rem, 1rem + 4vw, 3.5rem); grid-template-columns:1fr; }
@media (min-width:900px) { .contact-inner { grid-template-columns:1fr 1.05fr; align-items:start; } }
.contact-alt { margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
.contact-alt li { display:flex; flex-direction:column; gap:.15rem; }
.contact-alt-label { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
.contact-alt a { color:var(--off); font-weight:500; }
.contact-alt a:hover { color:var(--orange-hi); }
.contact-alt-note { margin-top:1.8rem; color:var(--steel-2); max-width:42ch; }

.contact-form {
  background:var(--ink-2); border:1px solid var(--line-d); border-radius:var(--radius);
  padding:clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  display:flex; flex-direction:column; gap:1.05rem;
}
.field { display:flex; flex-direction:column; gap:.4rem; }
.field-row { display:grid; gap:1.05rem; grid-template-columns:1fr; }
@media (min-width:520px) { .field-row { grid-template-columns:1fr 1fr; } }
.field label { font-weight:500; font-size:.9rem; color:var(--steel-2); }
.req { color:var(--orange-hi); }
.opt { color:var(--steel-2); font-weight:400; }
.field input, .field select, .field textarea {
  width:100%;
  background:var(--ink); color:var(--off);
  border:1px solid var(--line-d); border-radius:var(--radius-sm);
  padding:.8rem .9rem;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--orange-hi);
  box-shadow:0 0 0 3px rgba(255,124,61,.22);
}
.field input:user-invalid, .field textarea:user-invalid { border-color:#e0553d; }

/* Honeypot - visually and semantically hidden, off-screen */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status { min-height:1.2em; font-weight:500; font-size:.95rem; }
.form-status.is-error { color:#ff9a86; }
.form-status.is-success { color:#7ee0a8; }
.form-note { font-size:.82rem; color:var(--steel-2); }
.btn[disabled] { opacity:.6; cursor:progress; transform:none; }

/* ---------- Footer ---------- */
.site-footer { padding-top:clamp(3rem, 2rem + 3vw, 4.5rem); }
.footer-inner {
  display:grid; gap:2.5rem;
  grid-template-columns:1fr;
  padding-bottom:2.5rem; border-bottom:1px solid var(--line-d);
}
@media (min-width:760px) { .footer-inner { grid-template-columns:1.6fr 1fr 1fr; } }
.footer-brand img { height:34px; width:auto; margin-bottom:1rem; }
.footer-pitch { color:var(--steel-2); max-width:34ch; margin-bottom:1rem; }
.footer-built { font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; color:var(--steel-2); }
.footer-col-title { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-2); margin-bottom:1rem; }
.footer-links ul, .footer-contact ul { display:flex; flex-direction:column; gap:.65rem; }
.footer-links a, .footer-contact a { color:var(--steel-2); }
.footer-links a:hover, .footer-contact a:hover { color:var(--orange-hi); }

.footer-legal {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.5rem;
  padding-top:1.6rem; padding-bottom:2rem;
  font-size:.85rem; color:var(--steel-2);
}
.footer-legal-slim { border-top:none; padding-top:2rem; }
.footer-legal-links a:hover { color:var(--orange-hi); }
.footer-entity { flex-basis:100%; color:var(--steel-2); font-size:.8rem; }

/* ---------- Legal pages ---------- */
.legal { padding-top:clamp(6.5rem, 5rem + 6vw, 8.5rem); }
.legal-wrap { max-width:760px; }
.legal-updated { font-family:var(--font-mono); font-size:.78rem; color:var(--steel-d); margin-top:.6rem; margin-bottom:2.2rem; letter-spacing:.03em; }
.legal-body { color:var(--ink); }
.legal-lede { font-size:var(--fs-lead); color:var(--steel-d); margin-bottom:2rem; }
.legal-body h2 { font-family:var(--font-head); font-size:clamp(1.25rem, 1.1rem + .8vw, 1.6rem); margin:2.2rem 0 .7rem; letter-spacing:-.01em; }
.legal-body p { margin-bottom:1rem; color:#3a3d45; }
.legal-body a { color:var(--orange-ink); text-decoration:underline; text-underline-offset:2px; }
.legal-note { margin-top:2.5rem; padding:1.1rem 1.2rem; background:var(--off-2); border-left:3px solid var(--orange); border-radius:0 8px 8px 0; font-size:.92rem; color:var(--steel-d); }
.legal-back { margin-top:2.5rem; }
.legal-back a { color:var(--orange-ink); font-weight:600; }
.legal-back a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- 404 page ---------- */
.error { position:relative; overflow:hidden; min-height:68vh; display:grid; align-items:center; padding-block:clamp(4rem, 3rem + 6vw, 7rem); }
.error-wrap { position:relative; max-width:60ch; }
.error-code {
  font-family:var(--font-head); font-weight:700; line-height:.9; letter-spacing:-.04em;
  font-size:clamp(5rem, 3rem + 16vw, 11rem);
  color:var(--orange-hi); margin-bottom:.4rem;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .error-code {
    background:linear-gradient(180deg, #FFB98E 0%, var(--orange-hi) 45%, var(--orange-lo) 100%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
}
.error-title { font-size:var(--fs-h2); margin-bottom:1rem; }
.error-body { font-size:var(--fs-lead); color:var(--steel-2); margin-bottom:2rem; max-width:46ch; }
.error-actions { display:flex; flex-wrap:wrap; gap:.9rem; }

/* ---------- Reveal-on-scroll ---------- */
/* Keyframe-based so hover transitions stay fast once the entrance finishes.
   Grids cascade: later siblings pick up a stagger delay below. */
.reveal { opacity:0; transform:translateY(22px); }
.reveal.is-visible {
  opacity:1; transform:none;
  animation:rise .65s var(--ease) var(--stagger, 0s) backwards;
}
@keyframes rise {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:none; }
}
.card-grid > :nth-child(2), .process-steps > :nth-child(2) { --stagger:.08s; }
.card-grid > :nth-child(3), .process-steps > :nth-child(3) { --stagger:.16s; }
.card-grid > :nth-child(4), .process-steps > :nth-child(4) { --stagger:.24s; }
.card-grid > :nth-child(5), .process-steps > :nth-child(5) { --stagger:.32s; }
.card-grid > :nth-child(6), .process-steps > :nth-child(6) { --stagger:.40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none; animation:none !important; }
  .btn, .card, .work-card, .chip, .acc-panel { transition:none; }
  .btn::after { display:none; }
  .site-header::after { content:none; animation:none; }
  .weld-seam::after, .hero-grid::before, .hero-glow, .price-card-featured { animation:none; }
  .marquee-track, .hero-hexes span, .st-blink { animation:none; }
  .process-step::after { transition:none; }
  .process-step.reveal:not(.is-visible)::after { transform:none; }
  * { scroll-behavior:auto !important; }
}

/* ---------- Mobile nav ---------- */
@media (max-width:820px) {
  .nav-toggle {
    display:inline-flex; flex-direction:column; justify-content:center;
    width:44px; height:44px; border:1px solid var(--line-d); border-radius:9px;
    background:rgba(255,255,255,.03);
  }
  .nav-menu {
    position:fixed; inset:74px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:.15rem;
    padding:1rem var(--gutter) 1.6rem;
    background:rgba(22,23,28,.97);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-d);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    visibility:hidden;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav-menu.is-open { transform:none; opacity:1; pointer-events:auto; visibility:visible; }
  .nav-menu a:not(.btn) { padding:.9rem .6rem; font-size:1.05rem; }
  .nav-cta { margin-left:0; margin-top:.5rem; }
  .nav-cta .btn { width:100%; }
  .nav-menu-simple { position:static; flex-direction:row; padding:0; background:none; transform:none; opacity:1; visibility:visible; pointer-events:auto; backdrop-filter:none; border:none; }
}