/* ============================================================
   Cameo — "Meridian" theme
   T1 Energy taste (mobbin.com/sites/sections/e65538de-469a-47f1-ab76-acfe43328bb4):
   near-white canvas, monochrome-dominant ink, generously rounded photography,
   a floating pill navigation, two-tone headlines set at a confident medium
   weight, and asymmetric image pairs instead of single full-width slabs.
   Blue survives as a small accent (wordmark, links, eyebrows) rather than as
   the theme; primary actions are ink black, the way T1 treats its CTA.
   Predecessor: the SLB-derived "Atlas" theme — see docs/themes/README.md.
   ============================================================ */
:root{
  --paper:#fbfbfa;          /* near-white canvas */
  --surface:#ffffff;        /* white panels */
  --well:#efefed;           /* recessed grey: nav pill, inset wells */
  --ink:#0b0e13;            /* near-black */
  --ink-soft:#5c6169;       /* secondary text — the grey half of a two-tone headline */
  --muted:#8b9098;          /* meta */
  --blue:#0014dc;           /* accent, now used sparingly */
  --blue-dark:#000fb0;
  --blue-soft:#3346f5;
  --navy:#0b0e13;           /* contrast band — ink, not navy (T1 is monochrome) */
  --line:rgba(0,0,0,.11);   /* hairline dividers */
  --line-soft:rgba(0,0,0,.06);
  --dark:#0b0e13;           /* footer */
  --max:1480px;
  --header-h:84px;
  --shadow:0 2px 10px rgba(11,18,40,.06);
  --shadow-pill:0 1px 2px rgba(11,18,40,.05),0 8px 24px rgba(11,18,40,.06);

  /* Radii. The single loudest T1 signal is that every photograph has generously
     rounded corners; the old theme was sharp at 2px throughout. */
  --radius:18px;      /* photography, media cards */
  --radius-md:12px;   /* panels, surfaces */
  --radius-sm:8px;    /* buttons, inputs */
  --radius-pill:999px;

  /* Motion tokens (Emil doctrine: exponential ease-out, fast, consistent).
     One easing + a small duration scale so every transition on the site reads
     as one system instead of the ad-hoc .15s/.18s/.2s/.8s it grew into. */
  --ease:cubic-bezier(0.16,1,0.3,1);   /* exponential ease-out */
  --dur-1:150ms;   /* hover · press · focus · small state changes */
  --dur-2:220ms;   /* small moves: arrows, nav underline, card lift */
  --dur-reveal:450ms; /* section + list entrance (was 800ms) */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Anchor targets must clear the sticky header, or a deep link lands with the
   heading hidden underneath it. */
:target,[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

/* Accessibility: honor reduced-motion everywhere. The JS reveal layer is already
   gated (the `js-anim` class is only added when motion is allowed), but this
   neutralizes the CSS hover/press/underline transitions too — final states are
   preserved, so nothing breaks, it just stops moving. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--paper);
  font-size:16.5px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
/* T1 sets display type at a confident medium weight, not the wispy 200-250 the
   SLB-derived theme used. Heavier weight plus tighter tracking is most of what
   separates "engineering supplier" from "luxury brochure" at large sizes. */
h1,h2,h3,h4{font-family:Inter,sans-serif;line-height:1.06;
  letter-spacing:-.03em;color:var(--ink);font-weight:400;margin:0 0 .5em}
p{margin:0 0 1em}

/* The second clause of a two-tone headline: same size and weight, dropped to
   grey. T1 uses it on every major heading ("Advancing the energy shift" in ink,
   "from Austin, Texas" in grey). */
.dim{color:var(--ink-soft)}

.container{max-width:var(--max);margin-inline:auto;padding-inline:40px}
.section{padding:112px 0}
.section--soft{background:var(--surface)}
.section--tight{padding:60px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:30}

/* kickers / eyebrows ---------------------------------------------------------*/
.kicker,.eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:20px}
.kicker::before,.eyebrow::before{content:"";width:24px;height:1px;background:var(--blue)}
.section-title{font-size:clamp(32px,4vw,56px);font-weight:400;letter-spacing:-.034em;line-height:1.04}
.lead{font-size:clamp(17px,1.8vw,20px);color:var(--ink-soft);max-width:62ch;line-height:1.55;font-weight:400;letter-spacing:-.01em}
.section-head{max-width:880px;margin-bottom:60px}

/* buttons --------------------------------------------------------------------*/
.btn{display:inline-flex;align-items:center;gap:.55em;padding:15px 28px;
  font-weight:500;font-size:15px;line-height:1;cursor:pointer;border:1px solid transparent;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
  text-decoration:none;border-radius:var(--radius-sm)}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.97)}          /* immediate tactile press (Emil tip 1) */
/* Keyboard focus ring — consistent, static (Emil: never animate focus). */
.btn:focus-visible,.main-nav a:focus-visible,.irow:focus-visible,
.brand:focus-visible,.card a:focus-visible,.logos .chip:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--radius-sm)}
.btn::after{content:"→";font-size:1.05em}
/* Primary is ink, not blue. T1's only filled button is black; keeping the blue
   fill here was what made the old theme read as "corporate template". */
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:#272c35;color:#fff}
.btn--light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--light:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
.btn--ghost{border-color:rgba(0,0,0,.16);color:var(--ink);background:rgba(255,255,255,.6)}
.btn--ghost:hover{border-color:rgba(0,0,0,.38);color:var(--ink);background:#fff}
/* Header CTA. Deliberately NOT `.btn--nav`: `.main-nav a` (0,1,1) outranked the
   old single-class button rule, so the label inherited the muted nav colour and
   lost its padding — a blue block with near-invisible text. `.main-nav .nav-cta`
   (0,2,0) wins cleanly. */
.main-nav .nav-cta{display:inline-flex;align-items:center;gap:.5em;
  background:var(--ink);color:#fff;padding:9px 17px;font-size:13.5px;font-weight:500;
  line-height:1;border-radius:var(--radius-pill);margin-inline-start:6px;white-space:nowrap;
  box-shadow:none;transition:background var(--dur-1) var(--ease)}
.main-nav .nav-cta::after{content:"→";font-size:1.05em;transform:none}
.main-nav .nav-cta:hover,.main-nav .nav-cta[aria-current="page"]{background:#2b313b;color:#fff;text-decoration:none}
.js-anim .main-nav .nav-cta::after{transition:transform var(--dur-2) var(--ease)}
.js-anim .main-nav .nav-cta:hover::after{transform:translateX(3px)}

/* header — floating pill nav --------------------------------------------------
   T1 has no header bar: the wordmark and a rounded grey nav pill simply float
   over the page. A full-bleed scrim under them (masked to fade out) keeps the
   labels legible when a dark section scrolls underneath, which a genuinely
   transparent header would not survive on this site. */
.site-header{position:sticky;top:0;z-index:20;background:transparent;border:0;padding:15px 0}
.site-header::after{content:"";position:absolute;inset:0 0 -26px;z-index:-1;pointer-events:none;
  background:var(--paper);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}
.header-in{display:flex;align-items:center;gap:22px;min-height:calc(var(--header-h) - 30px);
  max-width:var(--max);margin-inline:auto;padding-inline:40px}
.brand{display:inline-flex;align-items:center;font-family:Inter,sans-serif;
  font-weight:600;font-size:25px;letter-spacing:-.035em;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand i{font-style:normal;color:var(--blue)}

.main-nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto;
  background:rgba(239,239,237,.82);backdrop-filter:saturate(150%) blur(14px);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-pill);
  padding:5px;box-shadow:var(--shadow-pill)}
.main-nav a{color:var(--ink-soft);text-decoration:none;font-weight:450;font-size:13.5px;
  letter-spacing:-.005em;padding:9px 15px;border-radius:var(--radius-pill);white-space:nowrap;
  transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.main-nav a:hover{color:var(--ink);background:rgba(255,255,255,.9);text-decoration:none}
.main-nav a[aria-current="page"]{color:var(--ink);background:#fff;box-shadow:0 1px 2px rgba(11,18,40,.07)}

/* mobile menu button — hidden on desktop, revealed with the drawer below ------*/
.nav-toggle{display:none;align-items:center;gap:10px;margin-inline-start:auto;
  background:rgba(239,239,237,.82);backdrop-filter:saturate(150%) blur(14px);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-pill);cursor:pointer;
  padding:11px 18px;color:var(--ink);font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow-pill);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.nav-toggle:hover{background:#fff;color:var(--ink)}
.nav-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.nav-toggle__bars{display:block;width:16px;height:12px;position:relative}
.nav-toggle__bars span{position:absolute;inset-inline:0;height:1.5px;background:currentColor;
  transition:transform var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease)}
.nav-toggle__bars span:nth-child(1){top:0}
.nav-toggle__bars span:nth-child(2){top:5.25px}
.nav-toggle__bars span:nth-child(3){top:10.5px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}

/* hero (home) ------------------------------------------------------------------*/
.hero{position:relative;padding:28px 0 0}
.hero__title{font-size:clamp(38px,4.4vw,66px);font-weight:450;line-height:1.04;
  letter-spacing:-.038em;max-width:20ch;margin:0 0 24px;text-wrap:balance}
.hero__title i{font-style:normal;color:var(--blue)}
.hero__sub{font-size:clamp(17px,1.7vw,20px);color:var(--ink-soft);max-width:54ch;
  margin:0 0 34px;font-weight:400;line-height:1.55;letter-spacing:-.01em}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.crosshair{display:none}

/* Asymmetric image pair. T1 never shows a single full-width slab in the hero —
   one tall frame carries the subject, a shorter one beside it adds a second
   register. Unequal heights are the point; equalising them kills the effect. */
.hero__media{display:grid;grid-template-columns:1.62fr 1fr;gap:14px;align-items:start}
.hero__media .frame:first-child img{height:min(58vh,540px)}
.hero__media .frame:last-child img{height:min(40vh,372px)}
/* One image, full width — the pair became a single frame when the generated
   instrumentation close-up was removed. */
.hero__media--single{grid-template-columns:1fr}
.hero__media--single .frame img{height:min(60vh,560px)}

/* photography — generously rounded, borderless -------------------------------*/
.frame{position:relative;border:0;padding:0;background:var(--well);
  overflow:hidden;border-radius:var(--radius)}
.frame img{width:100%;height:460px;object-fit:cover}
.frame--header img{height:320px}
.callout{display:none}

/* stats strip ----------------------------------------------------------------
   T1/MOUTHWASH set metadata as a single hairline rule with tiny labels above
   their values and no vertical rules. Flipping label-above-number and dropping
   the column dividers is what turns this from a table into a credit line. */
.stats-band{border-top:1px solid var(--line);border-bottom:0;
  background:transparent;color:var(--ink);padding:0;margin-top:72px}
.section--tight.stats-band{padding:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:start}
.stat{padding:26px 0 0;border:0;display:flex;flex-direction:column-reverse;gap:12px}
.stat:first-child{padding-inline-start:0}
.stat__num{font-family:Inter,sans-serif;font-size:clamp(34px,3.4vw,48px);
  font-weight:450;color:var(--ink);line-height:1;letter-spacing:-.04em}
.stat__label{margin:0;color:var(--muted);font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;line-height:1.5;max-width:26ch}

/* index list (scope on home) ---------------------------------------------------*/
.index{border-top:1px solid var(--line)}
.irow{display:grid;grid-template-columns:84px 1.1fr 1fr 50px;gap:24px;align-items:center;
  padding:28px 6px;border-bottom:1px solid var(--line);
  transition:background var(--dur-1) var(--ease),padding var(--dur-1) var(--ease);
  text-decoration:none;color:inherit}
.irow:hover{background:var(--well);padding-inline:18px;border-radius:var(--radius-md);text-decoration:none}
.irow__num{font-family:"IBM Plex Mono",monospace;color:var(--muted);font-size:13px;font-weight:500}
.irow h3{font-size:21px;font-weight:450;letter-spacing:-.03em;margin:0}
.irow p{color:var(--ink-soft);font-size:13.5px;margin:0}
.irow__go{color:var(--ink);font-size:20px;text-align:end}

/* page header (inner pages) ----------------------------------------------------*/
/* Editorial header: headline left, lead set against it on the right, thin rule
   between. Two text columns use the width the removed photograph left behind —
   a single narrow column stranded two thirds of the page. */
.page-header{padding:56px 0 52px;border-bottom:1px solid var(--line)}
.page-header__text{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:end}
.page-header__text .kicker{grid-column:1/-1;margin-bottom:4px}
.page-header__title{font-size:clamp(42px,5.6vw,80px);font-weight:450;letter-spacing:-.04em;
  margin:0;line-height:1;max-width:15ch;text-wrap:balance}
.page-header__title i{font-style:normal;color:var(--blue)}
.page-header__lead{margin:0 0 6px;max-width:46ch;color:var(--ink-soft);
  font-size:clamp(15.5px,1.4vw,16.5px);line-height:1.65;font-weight:400;
  padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:980px){
  .page-header__text{grid-template-columns:1fr;gap:24px;align-items:start}
  .page-header__title{max-width:18ch}
  .page-header__lead{max-width:60ch}
}

/* feature band (ink contrast section) -----------------------------------------
   Was navy. T1 is monochrome, so the contrast section is ink and the accent
   inside it is a light grey rather than a second blue. */
.band{background:var(--navy);color:#fff;padding:104px 0;border-radius:var(--radius);
  margin-inline:40px}
.band__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center}
.band .kicker,.band .eyebrow{color:rgba(255,255,255,.62)}
.band .kicker::before,.band .eyebrow::before{background:rgba(255,255,255,.62)}
.band__title{font-size:clamp(30px,3.6vw,50px);font-weight:450;letter-spacing:-.035em;
  line-height:1.04;margin:0 0 28px;color:#fff}
.band .frame{background:rgba(255,255,255,.06)}
.band .frame img{height:380px}
/* The band is a rounded panel inset 40px from the viewport, so its content is
   inset again from the panel edge — card padding, not page margin. Without this
   the headline and the stat sat flush against the rounded corners. */
.band > .container{max-width:calc(var(--max) - 80px);padding-inline:52px}
@media(max-width:860px){.band > .container{padding-inline:36px}}
@media(max-width:560px){
  .band{margin-inline:0;border-radius:0;padding:64px 0}
  .band > .container{max-width:var(--max);padding-inline:22px}
}

/* cards (scope / brands pages) -------------------------------------------------
   Was a hairline lattice with every cell sharing borders. T1 separates surfaces
   with space and radius instead of rules, so the grid now has real gaps and the
   cards are discrete rounded objects. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;border:0}
.card{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:30px 28px;
  transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease)}
.card:hover{box-shadow:var(--shadow-pill);border-color:var(--line);transform:translateY(-3px)}
.card h3,.card__title{margin:0 0 10px;font-size:20px;font-weight:450;letter-spacing:-.03em;color:var(--ink)}
.card .makers{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.7}
.card a{font-weight:500;font-size:14.5px}
/* media cards (scope category images) */
.cards--media{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.card--media{padding:0;display:flex;flex-direction:column;overflow:hidden}
.card--media .card__media{aspect-ratio:16/9;overflow:hidden;background:var(--well);
  margin:6px 6px 0;border-radius:calc(var(--radius-md) - 4px)}
.card--media .card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-reveal) var(--ease)}
.card--media:hover .card__media img{transform:scale(1.04)}
.card--media .card__body{padding:26px 26px 30px}
.card--media .summary{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0 0 14px;font-weight:400}
@media(max-width:560px){.cards--media{grid-template-columns:1fr}}

/* project case studies — typographic records ------------------------------------
   40/60 split, never 50/50. The record number is the one large thing in the row;
   everything else is small. No photography: these describe real named contracts
   and we have no real photographs of them. */
.cases{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.case{display:grid;grid-template-columns:minmax(150px,.34fr) 1fr;gap:48px;
  padding:52px 0;border-bottom:1px solid var(--line)}
.case__index{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--header-h) + 28px);align-self:start}
.case__num{font-size:clamp(64px,7.8vw,118px);font-weight:450;letter-spacing:-.05em;
  line-height:.84;color:var(--ink);font-variant-numeric:tabular-nums}
.case__tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);max-width:18ch;line-height:1.5}
.case__title{font-size:clamp(24px,2.5vw,34px);font-weight:450;letter-spacing:-.035em;margin:0 0 16px;max-width:22ch}
.case__text{color:var(--ink-soft);font-size:16px;line-height:1.7;margin:0 0 28px;max-width:62ch;font-weight:400}
.case__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;
  border-top:1px solid var(--line)}
.case__facts > div{padding:16px 18px 0 0}
.case__facts dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.case__facts dd{margin:0;font-size:14.5px;color:var(--ink);font-weight:450;line-height:1.4}
@media(max-width:980px){
  .case{grid-template-columns:1fr;gap:20px;padding:40px 0}
  .case__index{flex-direction:row;align-items:baseline;gap:16px;position:static}
  .case__num{font-size:48px}
  .case__facts{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.case__facts{grid-template-columns:1fr}}

/* scope categories — typographic records ----------------------------------------*/
.catlist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cat{display:grid;grid-template-columns:84px 1fr;gap:24px;
  padding:44px 0;border-bottom:1px solid var(--line)}
/* The index is a label, not the hero. On this page the reader's question is
   "do you supply X?", and the category name answers it — so the name carries the
   row and the number drops to the label tier, matching the home page list. */
.cat__num{font-family:"IBM Plex Mono",monospace;font-size:13px;
  font-weight:500;letter-spacing:.04em;line-height:1.6;color:var(--blue);
  font-variant-numeric:tabular-nums;padding-top:6px}
.cat__title{font-size:clamp(22px,2.3vw,32px);font-weight:450;letter-spacing:-.035em;margin:0 0 14px}
.cat__summary{color:var(--ink-soft);font-size:16px;line-height:1.7;margin:0 0 26px;max-width:66ch;font-weight:400}
.cat__meta{border-top:1px solid var(--line-soft);padding-top:18px;margin-bottom:22px}
.cat__metalabel{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.cat__makers{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.cat__makers span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.02em;
  color:var(--ink-soft);background:var(--well);padding:5px 9px;border-radius:2px;white-space:nowrap}
.cat__cta{display:inline-flex;align-items:center;gap:.5em;font-size:14.5px;font-weight:500;color:var(--ink)}
.cat__cta span{transition:transform var(--dur-2) var(--ease)}
.cat__cta:hover{text-decoration:none}
.cat__cta:hover span{transform:translateX(4px)}
.cat__cta:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
@media(max-width:860px){
  .cat{grid-template-columns:1fr;gap:6px;padding:34px 0}
  .cat__num{padding-top:0}
}

/* dark band figure (replaces the removed band photograph) -----------------------*/
.band__figure{display:flex;flex-direction:column;gap:14px;justify-self:end;text-align:end}
.band__stat{font-size:clamp(96px,13vw,200px);font-weight:400;letter-spacing:-.06em;
  line-height:.8;color:#fff;font-variant-numeric:tabular-nums}
.band__statlabel{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.6}
@media(max-width:980px){.band__figure{justify-self:start;text-align:start}}

/* clients / brand wall -----------------------------------------------------------
   Discrete rounded tiles on a gapped grid rather than a shared-border lattice. */
/* Borderless wordmarks on the canvas, the way T1 and Mistral present partners.
   Boxing each name turned the wall into a spreadsheet; the names alone carry it. */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px;border:0}
.logos .chip{border:0;border-radius:var(--radius-sm);
  padding:24px 14px;text-align:center;font-weight:450;
  color:var(--ink-soft);background:transparent;font-size:15px;letter-spacing:-.02em;line-height:1.35;
  display:flex;align-items:center;justify-content:center;min-height:86px;text-wrap:balance;
  transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.logos .chip:hover{color:var(--ink);background:var(--well)}

/* projects table -------------------------------------------------------------------*/
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:24px}
.search{width:100%;max-width:380px;padding:13px 16px;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:var(--radius-sm);font-size:14.5px;font-family:Inter,sans-serif}
.search:focus{outline:2px solid var(--blue);border-color:var(--blue)}
/* The 4-column index cannot compress below ~560px without the contract titles
   turning to confetti, so it scrolls inside its own box rather than pushing the
   whole page sideways on a phone. */
.table-wrap{border:1px solid var(--line-soft);border-radius:var(--radius-md);background:#fff;overflow:hidden;overflow-x:auto}
table.projects{width:100%;min-width:560px;border-collapse:collapse}
table.projects th,table.projects td{padding:14px 16px;text-align:start;font-size:14px;
  border-bottom:1px solid var(--line)}
table.projects th{background:var(--well);color:var(--ink);position:sticky;top:var(--header-h);z-index:3;
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase}
table.projects tbody tr:nth-child(even){background:rgba(0,0,0,.02)}
table.projects tbody tr:hover{background:var(--well)}
table.projects td:first-child{color:var(--muted);width:54px;font-family:"IBM Plex Mono",monospace;font-size:12.5px}

/* prose (text pages) ------------------------------------------------------------------*/
.prose{max-width:72ch;font-size:18px;line-height:1.72;font-weight:400;letter-spacing:-.01em}
.prose p{margin:0 0 1.1em}

/* contact -------------------------------------------------------------------------------*/
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;border:0}
.contact-card{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:32px 30px}
.contact-card .k{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.contact-card .v{font-size:17px;color:var(--ink);font-weight:500;margin-bottom:22px}

/* certificates ---------------------------------------------------------------------------*/
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.cert-grid figure{margin:0;border:1px solid var(--line-soft);border-radius:var(--radius-md);overflow:hidden;background:#fff}
.cert-grid img{width:100%}
.cert-grid figcaption{padding:14px 16px;color:var(--ink-soft);font-size:13.5px;
  font-family:"IBM Plex Mono",monospace}

/* footer ----------------------------------------------------------------------------------*/
.site-footer{background:var(--dark);color:#9aa1ad;padding:80px 0 32px;margin-top:0}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.site-footer h4{color:#fff;font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;font-weight:500}
.site-footer a{color:#c3cad4}
.site-footer .brand-line{color:#fff;font-family:Inter,sans-serif;font-weight:600;
  font-size:22px;letter-spacing:-.035em;margin-bottom:10px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#7c838f;
  letter-spacing:.04em;text-transform:uppercase}
.footer-bottom a{color:#7c838f}

/* responsive --------------------------------------------------------------------------------*/

/* Nav collapses to a drawer. Eight items plus the CTA stop fitting on one line
   well before phone width, and a wrapping three-row sticky header was eating a
   sixth of the viewport on a phone. */
@media(max-width:1024px){
  .nav-toggle{display:inline-flex}
  /* The pill unrolls into a full-width sheet. Everything the pill sets
     (radius, padding, border, backdrop) has to be unwound here. */
  .main-nav{position:absolute;inset-inline:8px;top:calc(100% + 6px);margin:0;
    display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-md);padding:6px;backdrop-filter:none;
    box-shadow:0 16px 40px rgba(11,18,40,.14);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
  .main-nav.is-open{max-height:75vh;overflow-y:auto;visibility:visible;transition-delay:0s,0s}
  .main-nav a{display:block;padding:15px 18px;font-size:16px;color:var(--ink);
    border-radius:var(--radius-sm);background:none}
  .main-nav a[aria-current="page"]{background:var(--well);box-shadow:none}
  /* Extra specificity on purpose: the sliding underline is defined in the motion
     block at the end of this file, so an equal-weight `content:none` here would
     lose on source order. */
  .main-nav .nav-cta{display:flex;justify-content:space-between;margin:6px 0 0;
    padding:16px 18px;font-size:15px;border-radius:var(--radius-sm)}
  .site-header{position:sticky}
  .header-in{position:relative}
}
@media(max-width:980px){
  .page-header__grid{grid-template-columns:1fr;gap:36px}
  .band__grid{grid-template-columns:1fr;gap:40px}
  .irow{grid-template-columns:60px 1fr 40px}
  .irow p{display:none}
}
@media(max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:28px 20px}
  .stat:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .footer-cols{grid-template-columns:1fr 1fr}
  .section{padding:72px 0}
  .frame img{height:340px}
  .page-header{padding:48px 0 52px}
}
@media(max-width:700px){
  .hero__media{grid-template-columns:1fr;gap:10px}
  .hero__media .frame:first-child img{height:min(48vh,360px)}
  .hero__media .frame:last-child img{height:min(30vh,230px)}
}
@media(max-width:560px){
  .container,.header-in{padding-inline:22px}
  .main-nav a,.main-nav .nav-cta{padding-inline:22px}
  .brand{font-size:21px}
  .footer-cols{grid-template-columns:1fr}
  .hero__actions{margin-bottom:44px}
  .hero__actions .btn{width:100%;justify-content:center}
  .section{padding:56px 0}
  .stat{padding:22px 16px}
}

/* ============================================================
   Motion — scroll reveal + micro-interactions (gated on .js-anim)
   ============================================================ */
.js-anim .section-head,
.js-anim .cards > *,
.js-anim .index .irow,
.js-anim .stats .stat,
.js-anim .logos .chip,
.js-anim .band__grid > *,
.js-anim .cert-grid figure,
.js-anim .contact-grid > *,
.js-anim .case__body,
.js-anim .prose,
.js-anim .page-header__text,
.js-anim .frame{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.js-anim .section-head.in,
.js-anim .cards > .in,
.js-anim .index .irow.in,
.js-anim .stats .stat.in,
.js-anim .logos .chip.in,
.js-anim .band__grid > .in,
.js-anim .cert-grid figure.in,
.js-anim .contact-grid > .in,
.js-anim .case__body.in,
.js-anim .prose.in,
.js-anim .page-header__text.in,
.js-anim .frame.in{opacity:1;transform:none}

/* micro-interactions (motion-allowed only) */
.js-anim .btn::after{transition:transform var(--dur-2) var(--ease)}
.js-anim .btn:hover::after{transform:translateX(4px)}
.js-anim .irow__go{transition:transform var(--dur-2) var(--ease)}
.js-anim .irow:hover .irow__go{transform:translateX(7px)}
.js-anim .hero .frame img,.js-anim .band .frame img{transition:object-position var(--dur-2) linear}
/* No sliding underline any more: in the pill nav the active item is a white
   chip, and an underline inside a rounded pill reads as a rendering bug. */

/* ============================================================
   Interactive Iran client map (clients page) — light theme
   ============================================================ */
.clientmap{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start;margin-bottom:8px}
.clientmap__map{position:relative}
.iran-map{width:100%;height:auto;display:block;overflow:visible}
.iran-map #ocean,.iran-map [fill="#C8EBFF"]{fill:transparent}
.iran-map [fill="#E0E0E0"]{fill:#e4e4e4}
.iran-map [fill="#FEFEE4"]{fill:#ffffff;stroke:rgba(0,20,220,.45);stroke-width:.8}
.iran-map [fill="none"]{stroke:rgba(0,0,0,.08)}

.map-pin{position:absolute;transform:translate(-50%,-50%);background:none;border:0;
  cursor:pointer;padding:6px;z-index:2;line-height:0}
.map-pin__dot{width:11px;height:11px;border-radius:50%;background:var(--blue);display:block;
  position:relative;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.map-pin__dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(0,20,220,.6);opacity:0;transition:opacity var(--dur-1) var(--ease)}
.map-pin__label{position:absolute;left:100%;top:50%;margin-left:2px;
  transform:translateY(-50%) translateX(-4px);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.04em;line-height:1.3;
  text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.9);padding:2px 6px;
  white-space:nowrap;opacity:0;transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);pointer-events:none;box-shadow:var(--shadow)}
.map-pin:hover .map-pin__label,.map-pin:focus-visible .map-pin__label,.map-pin.is-active .map-pin__label{opacity:1;transform:translateY(-50%)}
.map-pin:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:50%}
.map-pin:hover .map-pin__dot,.map-pin.is-active .map-pin__dot{transform:scale(1.4);box-shadow:0 0 14px 2px rgba(0,20,220,.55)}
.map-pin:hover .map-pin__dot::after,.map-pin.is-active .map-pin__dot::after{opacity:1}
/* No idle pulse: the dots are clearly interactive (cursor + hover/active scale
   and ring). A looping pulse is attention-seeking, ages badly, and fights the
   restraint of the rest of the page (Emil / anti-slop). */

.clientmap__panel{border:1px solid var(--line-soft);border-radius:var(--radius);
  background:var(--surface);padding:32px 30px;position:sticky;top:108px;min-height:240px;box-shadow:var(--shadow-pill)}
.map-panel__region{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--blue)}
.map-panel__name{font-size:24px;font-weight:450;margin:8px 0 12px;letter-spacing:-.035em}
.map-panel__note{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0 0 16px;font-weight:300}
.map-panel__list{list-style:none;margin:0;padding:0}
.map-panel__list li{padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;font-weight:500;color:var(--ink)}
.map-panel__list li::before{content:"+ ";color:var(--blue);font-family:"IBM Plex Mono",monospace}
@media(max-width:860px){
  .clientmap{grid-template-columns:1fr;gap:18px}
  .clientmap__panel{position:static;min-height:0}
  .map-pin__label{display:none}
}

/* ============================================================
   RFQ form + contact layout
   The site's whole purpose is getting a bill of quantities in front of the
   project team, so the quote form is the page, not a footnote under it.
   ============================================================ */
.rfq-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:64px;align-items:start}
.rfq-layout__side{display:flex;flex-direction:column;gap:24px;position:sticky;top:calc(var(--header-h) + 28px)}

.rfq{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:36px 36px 32px;box-shadow:var(--shadow-pill)}
.rfq__intro{color:var(--ink-soft);font-size:14.5px;margin:0 0 28px;font-weight:300}
.rfq__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.field{display:flex;flex-direction:column;min-width:0}
.field--wide{grid-column:1/-1}
.field label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.field input,.field select,.field textarea{
  font-family:Inter,system-ui,sans-serif;font-size:15.5px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;
  width:100%;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.field textarea{resize:vertical;line-height:1.6;min-height:140px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230014dc' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-inline-end:38px}
.field input::placeholder,.field textarea::placeholder{color:#a7adb6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#b9bec6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,20,220,.14)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#c02626}
.field.is-invalid label{color:#c02626}
.field__hint{margin:9px 0 0;font-size:13px;color:var(--muted);line-height:1.55}
.rfq__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rfq__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px;
  padding-top:26px;border-top:1px solid var(--line-soft)}
.rfq__note{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.rfq__status{margin:22px 0 0;padding:16px 18px;background:var(--well);border-radius:var(--radius-sm);
  font-size:14px;line-height:1.6;color:var(--ink);white-space:pre-wrap}

.contact-panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:30px 28px}
.contact-panel--soft{background:transparent;border-style:dashed}
.contact-panel__title{font-size:18px;font-weight:450;letter-spacing:-.03em;margin:0 0 20px}
.contact-panel .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--blue);margin-bottom:5px}
.contact-panel .v{font-size:15.5px;color:var(--ink);font-weight:500;margin-bottom:20px;line-height:1.5}
.contact-panel .v:last-child{margin-bottom:0}
.contact-panel__note{margin:18px 0 0;font-size:13.5px;color:var(--ink-soft);line-height:1.6;font-weight:300}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding:9px 0 9px 22px;font-size:14px;line-height:1.55;
  color:var(--ink-soft);border-top:1px solid var(--line-soft)}
.checklist li:first-child{border-top:0}
.checklist li::before{content:"+";position:absolute;left:0;top:9px;color:var(--blue);
  font-family:"IBM Plex Mono",monospace;font-size:13px}

@media(max-width:980px){
  .rfq-layout{grid-template-columns:1fr;gap:36px}
  .rfq-layout__side{position:static}
}
@media(max-width:640px){
  .rfq{padding:26px 22px 24px}
  .rfq__grid{grid-template-columns:1fr}
  .rfq__actions .btn{width:100%;justify-content:center}
}

/* ============================================================
   Scope index + scope cards + brand wall refinements
   ============================================================ */
/* Home index rows: the maker list was a twelve-name run of 13px grey that read
   as noise. Four named chips plus a count carry the same signal legibly. */
.irow__makers{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.irow__maker{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.03em;
  color:var(--ink-soft);background:rgba(0,0,0,.04);padding:4px 8px;border-radius:2px;
  white-space:nowrap;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.irow__more{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);padding:4px 2px}
.irow:hover .irow__maker{background:#fff;color:var(--ink)}
.irow h3{font-size:21px;font-weight:400}
.irow:hover h3{color:var(--ink)}

/* Scope cards: a numbered card with a direct route into the quote form, so the
   page answers "can you supply this?" and "how do I ask?" in one place. */
.card__index{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.card__cta{display:inline-flex;align-items:center;gap:.5em;margin-top:20px;
  font-size:14px;font-weight:500;color:var(--ink)}
.card__cta span{transition:transform var(--dur-2) var(--ease)}
.card__cta:hover{text-decoration:none}
.card__cta:hover span{transform:translateX(4px)}
.card__cta:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.card--media .makers{margin:0 0 4px}

/* (Brand wall sizing now lives with the .logos rules above — a duplicate block
   here was overriding them on source order.) */

/* ============================================================
   Proof strip (home, directly under the hero)
   Quiet by design: it is evidence, not a headline. Wordmarks are set in the
   mono face at one size so the row reads as a single line of credit.
   ============================================================ */
.proof{padding:44px 0 8px}
.proof__label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.proof__list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 26px;margin:0;padding:0}
.proof__list li{font-size:17px;font-weight:450;letter-spacing:-.02em;color:var(--ink-soft)}
.proof__more{display:inline-flex;align-items:center;gap:.5em;margin-top:20px;
  font-size:13.5px;font-weight:500;color:var(--ink)}
.proof__more span{transition:transform var(--dur-2) var(--ease)}
.proof__more:hover{text-decoration:none}
.proof__more:hover span{transform:translateX(4px)}
@media(max-width:560px){
  .proof{padding:32px 0 4px}
  .proof__list{gap:8px 18px}
  .proof__list li{font-size:15px}
}