/* ============================================================
   Hyrac Tech — v2 design system  ·  "Engineered for the field"
   ------------------------------------------------------------
   Art direction: an intersection made visible. Two temperatures
   most consultancies pick between — regulated-industry engineering
   rigor (cold: graphite, JetBrains Mono datasheet voice) and eight
   years of African field operations (warm: Fraunces display, sand
   paper, the heritage red reclaimed as a live operational signal).
   The tension between them on the page IS the positioning.

   Fonts: Inter + JetBrains Mono are self-hosted (../shared/fonts).
   Fraunces (display) is loaded from Google Fonts in each page head.
   ============================================================ */

/* ---------- Self-hosted faces (reused from shared) ---------- */
@font-face{
  font-family:"Inter";
  src:url("fonts/inter/InterVariable.woff2") format("woff2-variations"),
      url("fonts/inter/InterVariable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter/InterVariable-Italic.woff2") format("woff2-variations"),
      url("fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrains-mono/JetBrainsMono[wght].ttf") format("truetype-variations"),
      url("fonts/jetbrains-mono/JetBrainsMono[wght].ttf") format("truetype");
  font-weight:100 800; font-style:normal; font-display:swap;
}

/* ============================================================
   Tokens
   ============================================================ */
:root{
  /* Graphite — the instrument-in-low-light ground + primary ink */
  --ink-900:#0E1014;   /* deepest ground, primary text */
  --ink-850:#14171D;   /* raised graphite panel */
  --ink-800:#1B1F27;   /* graphite card on dark */
  --ink-700:#2A2F3A;   /* secondary text on paper */
  --ink-600:#3D4451;
  --ink-500:#5B6473;   /* muted / captions (AA on paper) */
  --ink-400:#828A98;   /* muted on dark */
  --ink-300:#A8AEB8;   /* faint on dark, disabled */
  --ink-200:#C9CDD4;
  --ink-150:#DCDEE3;   /* hairline on paper */
  --ink-100:#E7E8EB;   /* fills, dividers */

  /* Warm paper — the field / human ground */
  --paper:#FFFFFF;     /* cards, crisp surfaces */
  --sand:#F6F3EC;      /* warm reading ground (deliberately cooler than the AI-cream cliché) */
  --sand-200:#ECE6DA;  /* warm fill / hairline */
  --sand-300:#DED5C4;  /* warm border */

  /* Heritage red — reclaimed as the LIVE operational signal.
     One hot point per view: the mark, a status LED, a single keyline. */
  --red:#E01B1B;
  --red-600:#C41616;   /* hover / pressed */
  --red-tint:#FBE9E7;  /* faint red wash on paper */
  --red-glow:rgba(224,27,27,.55);
  --red-bright:#FF6F5C;  /* lightened brand red for text on dark grounds (legibility) */

  /* Navy — the structural trust color (governance, engineering) and the
     ground for the few sections that are deliberately dark. Black is not
     used as a surface anywhere: navy reads institutional, not edgy. */
  --navy-700:#143A6B;
  --navy-500:#2563A6;
  --navy-300:#7BA0CF;
  --navy-200:#A9C2E0;
  --navy-tint:#E7EEF7;
  --deep:#0F2136;      /* deep navy ground (hero screen, sovereign, footer) */
  --deep-800:#152B45;  /* raised navy panel */
  --deep-700:#1D3856;  /* navy card */
  --deep-line:rgba(255,255,255,.10);

  /* Product accents — used only where the actual product is shown */
  --hyracbox:#D9791A;  /* Hyracbox amber (family mark) */
  --hyracbox-tint:#FBEEDD;
  --sonza:#1E8E7E;     /* SonzaSchool teal-green */
  --sonza-tint:#E2F1EE;

  /* Semantic (system feedback only) */
  --ok:#15803D; --warn:#B45309; --err:#B91C1C;

  /* Type families */
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Type scale (1.25 modular, 16px base) */
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:1.25rem; --t-xl:1.5rem; --t-2xl:1.9rem; --t-3xl:2.4rem;
  --t-4xl:3.1rem; --t-5xl:4rem; --t-6xl:5.1rem;

  /* Weights */
  --w-normal:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* Line-height */
  --lh-tight:1.06; --lh-snug:1.22; --lh-normal:1.5; --lh-relaxed:1.65;

  /* Tracking */
  --tr-tight:-0.02em; --tr-mono:0.04em; --tr-wide:0.14em;

  /* Spacing (4px base) */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;
  --s-20:5rem; --s-24:6rem; --s-32:8rem;

  /* Layout */
  --prose:680px; --measure:60ch;
  --container:1160px; --container-wide:1320px;
  --gutter:clamp(1rem, 4vw, 2.5rem);

  /* Radius + edges */
  --r-sm:4px; --r-md:8px; --r-lg:14px;
  --hair:1px solid var(--ink-150);
  --hair-dark:1px solid rgba(255,255,255,.09);
}

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-feature-settings:"kern","liga","calt";
  scroll-behavior:smooth;
}
body{
  margin:0; background:var(--sand); color:var(--ink-900);
  font-family:var(--sans); font-size:var(--t-base); line-height:var(--lh-normal);
  font-weight:var(--w-normal); overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0; font-weight:var(--w-semibold); line-height:var(--lh-snug); letter-spacing:var(--tr-tight)}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
[hidden]{display:none!important}
::selection{background:var(--red); color:#fff}

/* ============================================================
   Typography helpers
   ============================================================ */
.display{font-family:var(--serif); font-optical-sizing:auto; font-weight:var(--w-normal);
  letter-spacing:-0.015em; line-height:var(--lh-tight);
  font-variation-settings:"wght" 440,"SOFT" 0,"WONK" 0;}
.mono{font-family:var(--mono); font-variation-settings:normal}
.tag{font-family:var(--mono); font-size:var(--t-xs); font-weight:var(--w-medium);
  letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--ink-500)}
.tag--red{color:var(--red)}
.tag--onDark{color:var(--ink-400)}
.tabular{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.lead{font-size:var(--t-md); line-height:var(--lh-relaxed); color:var(--ink-700)}
em{font-style:italic}
strong{font-weight:var(--w-semibold)}

/* ============================================================
   Layout primitives
   ============================================================ */
.wrap{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--container-wide)}
.section{padding-block:var(--s-24)}
.section--tight{padding-block:var(--s-16)}
@media(max-width:640px){ .section{padding-block:var(--s-16)} }

.eyebrow{display:inline-flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-5)}
.eyebrow__tick{width:22px; height:1px; background:var(--red)}
.eyebrow .tag{margin:0}

.section-head{max-width:44ch; margin-bottom:var(--s-12)}
.section-head h2{font-family:var(--serif); font-weight:var(--w-normal); font-optical-sizing:auto;
  font-variation-settings:"wght" 440,"SOFT" 0,"WONK" 0;
  font-size:clamp(var(--t-2xl), 1.4rem + 2vw, var(--t-3xl)); line-height:1.1; letter-spacing:-0.02em}
.section-head p{margin-top:var(--s-5); font-size:var(--t-md); color:var(--ink-700); line-height:var(--lh-relaxed); max-width:46ch}

/* ============================================================
   Buttons
   ============================================================ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  min-height:46px; padding:0 var(--s-6); border-radius:var(--r-sm);
  font-size:var(--t-sm); font-weight:var(--w-medium); letter-spacing:0; white-space:nowrap;
  border:1px solid transparent; transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;}
.btn:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.btn .arw{transition:transform .16s ease}
.btn:hover .arw{transform:translateX(3px)}

.btn--primary{background:var(--red); color:#fff; border-color:var(--red)}
.btn--primary:hover{background:var(--red-600); border-color:var(--red-600)}
.btn--dark{background:var(--ink-900); color:#fff; border-color:var(--ink-900)}
.btn--dark:hover{background:#000}
.btn--outline{background:transparent; color:var(--ink-900); border-color:var(--ink-300)}
.btn--outline:hover{border-color:var(--ink-900); background:var(--ink-900); color:#fff}
.btn--onDark{background:#fff; color:var(--ink-900); border-color:#fff}
.btn--onDark:hover{background:var(--red); border-color:var(--red); color:#fff}
.btn--ghost{padding-inline:var(--s-2); color:var(--ink-900)}
.btn--ghost:hover{color:var(--red)}
.btn--ghostDark{padding-inline:var(--s-2); color:#fff}
.btn--ghostDark:hover{color:var(--red)}
.btn--sm{min-height:38px; padding:0 var(--s-5); font-size:var(--t-sm)}

/* Text link with animated rule */
.link{display:inline-flex; align-items:center; gap:var(--s-2); font-weight:var(--w-medium);
  color:var(--ink-900); padding-bottom:3px; position:relative}
.link::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ink-300); transition:background-color .16s ease}
.link:hover{color:var(--red)} .link:hover::after{background:var(--red)}
.link--onDark{color:#fff} .link--onDark::after{background:rgba(255,255,255,.35)}
.link--onDark:hover{color:#fff} .link--onDark:hover::after{background:var(--red)}

/* ============================================================
   Header
   ============================================================ */
.hdr{position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--sand) 88%, transparent);
  backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:var(--hair);}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); min-height:68px}
.brand{display:inline-flex; align-items:center; gap:var(--s-3)}
.brand__mark{width:27px; height:27px; flex:none}
.brand__logo{height:29px; width:auto; display:block; flex:none}
/* Wordmark color logic mirrors the logo: HYRAC in ink, TECH in red. */
.brand__word{font-weight:var(--w-bold); font-size:var(--t-md); letter-spacing:-0.02em; color:var(--ink-900)}
.brand__word b{color:var(--red); font-weight:var(--w-bold)}
.hdr__nav{display:none; gap:var(--s-6); align-items:center}
.hdr__nav a{font-size:var(--t-sm); font-weight:var(--w-medium); color:var(--ink-700);
  position:relative; padding:var(--s-2) 0; transition:color .15s ease}
.hdr__nav a:hover{color:var(--ink-900)}
.hdr__nav a[aria-current="page"]{color:var(--ink-900)}
.hdr__nav a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--red)}
.hdr__cta{display:none}
.hdr__burger{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:var(--hair); border-radius:var(--r-sm); color:var(--ink-700); background:transparent; cursor:pointer}
/* mobile dropdown: revealed when the burger toggles .is-open on the nav */
.hdr__nav.is-open{display:flex; flex-direction:column; align-items:stretch; gap:0;
  position:absolute; top:100%; left:0; right:0;
  background:var(--paper); border-bottom:var(--hair);
  padding:var(--s-2) 0 var(--s-4);
  box-shadow:0 16px 30px -18px rgba(15,33,54,.30)}
.hdr__nav.is-open a{padding:var(--s-3) var(--s-6); font-size:var(--t-base); color:var(--ink-900)}
.hdr__nav.is-open a:not(.hdr__nav-cta){border-bottom:var(--hair)}
.hdr__nav.is-open a[aria-current="page"]::after{display:none}
.hdr__nav-cta{margin:var(--s-3) var(--s-6) 0}
@media(min-width:900px){
  .hdr__nav{display:inline-flex} .hdr__cta{display:inline-flex} .hdr__burger{display:none}
  .hdr__nav.is-open{position:static; flex-direction:row; background:none; box-shadow:none; border:0; padding:0}
  .hdr__nav-cta{display:none}
}

/* ============================================================
   Footer
   ============================================================ */
.ftr{background:var(--deep); color:var(--ink-300); padding-block:var(--s-20) var(--s-8)}
.ftr a{color:var(--ink-200); transition:color .15s ease}
.ftr a:hover{color:#fff}
.ftr .brand__word{color:#fff}
.ftr__grid{display:grid; grid-template-columns:1fr; gap:var(--s-12)}
@media(min-width:768px){ .ftr__grid{grid-template-columns:1.6fr 1fr 1fr} }
.ftr__brand{max-width:42ch}
.ftr__brand .brand__word{color:#fff}
.ftr__brand p{margin-top:var(--s-4); font-size:var(--t-sm); line-height:var(--lh-relaxed); color:var(--ink-300)}
.ftr__tag{margin-top:var(--s-5)!important; font-family:var(--serif); font-style:italic;
  font-size:var(--t-md)!important; color:var(--ink-200)!important}
.ftr h3{font-family:var(--mono); font-size:var(--t-xs); font-weight:var(--w-medium);
  letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--ink-300); margin-bottom:var(--s-5)}
.ftr li+li{margin-top:var(--s-3)}
.ftr li,.ftr li a{font-size:var(--t-sm)}
.ftr__bottom{margin-top:var(--s-16); padding-top:var(--s-6); border-top:var(--hair-dark);
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; align-items:center;
  font-size:var(--t-xs); color:var(--ink-300)}
.ftr__legal{display:flex; flex-wrap:wrap; gap:var(--s-5)}
.ftr__legal a{color:var(--ink-300)}

/* ============================================================
   Interior page hero (About, Services, service detail)
   ============================================================ */
.phero{padding-block:var(--s-20) var(--s-12)}
.phero .eyebrow{margin-bottom:var(--s-6)}
.phero h1{font-family:var(--serif); font-weight:var(--w-normal); font-optical-sizing:auto;
  font-variation-settings:"wght" 440,"SOFT" 0,"WONK" 0;
  font-size:clamp(2.4rem, 1.4rem + 3.4vw, var(--t-5xl)); line-height:1.02; letter-spacing:-0.025em;
  max-width:17ch; text-wrap:balance}
.phero h1 .hot{color:var(--red)}
.phero__lead{margin-top:var(--s-6); font-size:var(--t-md); line-height:var(--lh-relaxed); color:var(--ink-700); max-width:56ch}

/* ============================================================
   Shared closing CTA band (deep navy)
   ============================================================ */
.cta{background:var(--deep); color:#fff}
.cta__inner{display:grid; gap:var(--s-6); grid-template-columns:minmax(0,1fr); align-items:center; padding-block:var(--s-20)}
@media(min-width:900px){ .cta__inner{grid-template-columns:minmax(0,1fr) auto; gap:var(--s-12)} }
.cta h2{font-family:var(--serif); font-weight:var(--w-normal); font-optical-sizing:auto;
  font-variation-settings:"wght" 500,"SOFT" 0,"WONK" 0;
  font-size:clamp(var(--t-2xl), 1.4rem + 1.6vw, var(--t-3xl)); line-height:1.08; letter-spacing:-0.02em; color:#fff; max-width:26ch}
.cta h2 .hot{color:var(--red-bright)}
.cta p{margin-top:var(--s-4); color:var(--ink-200); font-size:var(--t-md); line-height:var(--lh-relaxed); max-width:48ch}
.cta__actions{display:flex; gap:var(--s-3); flex-wrap:wrap}

/* ============================================================
   Skip link
   ============================================================ */
.skip{position:absolute; top:0; left:0; z-index:100; padding:var(--s-3) var(--s-4);
  background:var(--ink-900); color:#fff; font-size:var(--t-sm); transform:translateY(-120%);
  transition:transform .15s ease}
.skip:focus{transform:translateY(0)}

/* ============================================================
   Reduced motion
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
}