/* ============================================================
   gothink.ai — styles.css
   Rebuilt v8 · core stylesheet for all pages.

   Load order (do not change):
     1. Google Fonts  (Inter Tight / IBM Plex Sans / IBM Plex Mono)
     2. styles.css      ← this file
     3. industries.css  ← .ix-* namespace, sits on top

   Contracts industries.css depends on, honoured below:
     · .navlinks > a          direct-child selector for nav links
     · .navlinks              position:absolute below 900px (burger drawer)
     · .bento                 12-column grid
     · .tile                  grid-column: span 4 by default
     · --ink / --line / --faint  exposed as global custom properties
   ============================================================ */


/* ---------- 01 · tokens ---------------------------------------------- */

:root{
  /* ink */
  --ink:#0E1A24;
  --ink-2:#33424F;
  --dim:#5C6B79;
  --faint:#8A97A3;

  /* surface */
  --paper:#FFFFFF;
  --tint:#F3F6F8;
  --cool:#E8EDF1;
  --line:#DCE3E9;
  --line-2:#C2CBD3;

  /* accent — teal is the working colour, orange is reserved for risk */
  --cy:#0A7A8C;
  --cy-d:#07606E;
  --cy-l:#E3F1F3;

  --signal:#C24A15;
  --sg:#C24A15;
  --sg-l:#FBEDE6;

  --gd:#1C7A55;
  --gd-l:#E4F2EC;

  --gate:#B07A00;
  --gate-l:#FBF3DF;

  /* type */
  --disp:"Inter Tight",system-ui,-apple-system,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* geometry */
  --r:12px;
  --r-lg:16px;
  --r-s:8px;
  --shadow:0 1px 2px rgba(14,26,36,.05), 0 8px 24px -16px rgba(14,26,36,.28);
  --shadow-lg:0 1px 2px rgba(14,26,36,.06), 0 24px 48px -28px rgba(14,26,36,.34);
  --nav-h:94px;

  /* single knob for both logo lockups — change here, not in two places.
     NOTE: .brand img now falls back to hard px if these get stomped by
     another stylesheet, so a bad override can no longer shrink the logo. */
  --logo-h:72px;
  --logo-h-foot:60px;
}


/* ---------- 02 · reset ----------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--cy);
  outline-offset:3px;
  border-radius:4px;
}


/* ---------- 03 · typography ------------------------------------------ */

h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.02em;margin:0;font-weight:700}

h1{font-size:clamp(2.1rem,4.4vw,3.25rem);line-height:1.04;letter-spacing:-.035em}
h1 em{font-style:normal;font-weight:600;color:var(--ink-2)}

h2{font-size:clamp(1.6rem,2.9vw,2.25rem);line-height:1.1;letter-spacing:-.03em}
h2 em{font-style:normal;font-weight:600;color:var(--ink-2)}

h3{font-size:1.06rem;line-height:1.3;font-weight:650}
h4{font-size:1rem;line-height:1.35;font-weight:650}

p{margin:0}

b{font-weight:650;color:var(--ink)}

.lede{
  margin-top:16px;
  font-size:clamp(1.02rem,1.5vw,1.16rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:60ch;
}

/* the mono eyebrow — the one repeated structural device on the site */
.lbl{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--body);
  font-size:.93rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:capitalize;
  color:var(--cy);
}
.lbl i{font-style:normal;color:var(--line-2)}
.lbl.dim{color:var(--dim)}
.lbl.warm{color:var(--signal)}

.mono{font-family:var(--mono);font-size:.9em;letter-spacing:-.01em}


/* ---------- 03b · icons ----------------------------------------------- */
/* gothink.js injects <svg class="ico" viewBox="0 0 24 24"> with NO width,
   height, stroke or fill attributes — every one of those must come from
   here. Without this block the browser falls back to the default replaced-
   element size (300x150) and the glyphs render enormous. */

.ico{
  width:1em;
  height:1em;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

/* the mono eyebrow and sub-nav run at ~11px, so bump the glyph slightly */
.lbl .ico,
.subnav-in > a .ico,
.fcol b .ico{width:1.2em;height:1.2em;stroke-width:1.9}

/* data-ico-badge: gothink.js adds .ico-h to the heading and wraps the glyph
   in a .hico badge */
.ico-h{display:flex;align-items:center;gap:10px}

.hico{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--tint);
  color:var(--cy);
}
.hico .ico{width:17px;height:17px;stroke-width:1.6}

.tile.warm .hico{border-color:#EFC9B6;background:#fff;color:var(--signal)}
.tile.featured .hico{border-color:#BFDFE4;background:#fff}
.tile.hi .hico{background:var(--paper)}

/* inline glyphs that sit next to a label inside a flex column */
.tt,.rt{display:inline-flex;align-items:center;gap:7px}
.more summary .ico{color:var(--cy)}
.step h3{display:flex;align-items:center;gap:8px}
.step h3 .ico{color:var(--cy)}

/* colour roles on numbers and values */
.cy{color:var(--cy)}
.gd{color:var(--gd)}
.sg{color:var(--signal)}
.dim{color:var(--dim)}
.hi{}                                   /* structural: see .tile.hi */


/* ---------- 04 · layout ---------------------------------------------- */

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;width:100%}

.sec{padding:76px 0}
.sec.band{background:var(--tint);border-block:1px solid var(--line)}
.sec-tight{padding:34px 0}

.sec-head{max-width:720px;margin-bottom:34px}
.sec-head h2{margin:12px 0 0}
.sec-head p{margin-top:12px;color:var(--ink-2);font-size:1.04rem}
.sec-head.wide{max-width:860px}

.sec-head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.sec-head-row .sec-head{margin-bottom:0}
.sec-head-row > .alink{white-space:nowrap;margin-bottom:6px}

.w720{max-width:720px;margin-inline:auto;width:100%}
.w820{max-width:820px;margin-inline:auto;width:100%}


/* ---------- 05 · header ---------------------------------------------- */

header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
/* gothink.js toggles .stuck past 8px of scroll */
header.stuck{box-shadow:0 1px 0 var(--line),0 10px 28px -22px rgba(14,26,36,.5)}

.nav{
  display:flex;
  align-items:center;
  gap:22px;
  height:var(--nav-h);
}

.brand{display:inline-flex;align-items:center;flex:0 0 auto;min-width:0}

/* Logo size lock.
   Deliberately does NOT read --logo-h. That variable lives on :root, and
   industries.css loads after this file — any :root redefinition there
   resized the logo on every page, which is the bug being fixed. A valid
   override beats a var() fallback, so the size is hardcoded here and the
   breakpoint is handled by the media query below.

   Also closed off: the global `img,svg{max-width:100%}` reset (line ~86),
   which clamped the logo whenever .brand's box resolved narrow (notably
   the mobile grid), and the default flex-shrink:1 the img inherited as a
   flex child of .brand. */
header .brand img,
.brand img{
  height:72px !important;
  width:auto;
  max-width:none;
  flex:0 0 auto;
  object-fit:contain;
}
footer .brand img{
  height:60px !important;
}

/* --logo-h is kept defined above only so any other stylesheet still
   referencing it does not break. It no longer drives the rendered size. */

.navlinks{
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:8px;
}

/* direct-child selector — industries.css relies on this exact shape */
.navlinks > a{
  font-size:.93rem;
  font-weight:500;
  color:var(--ink-2);
  padding:6px 0;
  border-bottom:1.5px solid transparent;
  transition:color .16s ease,border-color .16s ease;
  white-space:nowrap;
}
.navlinks > a:hover{color:var(--ink)}
.navlinks > a.active{color:var(--ink);border-bottom-color:var(--cy)}

.navact{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}

.burger{
  display:none;
  margin-left:auto;
  padding:8px;
  border-radius:var(--r-s);
  color:var(--ink);
}
.burger svg{width:22px;height:22px}
.burger:hover{background:var(--tint)}


/* ---------- 06 · subnav ---------------------------------------------- */

.subnav{
  position:sticky;
  top:var(--nav-h);
  z-index:90;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.subnav-in{
  display:flex;
  align-items:center;
  gap:26px;
  height:46px;
  overflow-x:auto;
  scrollbar-width:none;
}
.subnav-in::-webkit-scrollbar{display:none}

.subnav-in > a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--body);
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:capitalize;
  color:var(--bold);
  white-space:nowrap;
  padding:4px 0;
  border-bottom:1.5px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.subnav-in > a i{font-style:normal;color:var(--line-2);font-weight:500}
.subnav-in > a:hover{color:var(--ink)}
/* gothink.js scrollspy marks the current section with .on */
.subnav-in > a.on,
.subnav-in > a.active{color:var(--ink);border-bottom-color:var(--cy)}
.subnav-in > a.on i,
.subnav-in > a.active i{color:var(--cy)}

.subnav-cta{margin-left:auto;white-space:nowrap}


/* ---------- 07 · buttons & inline links ------------------------------ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  border:1px solid var(--ink);
  white-space:nowrap;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-solid{background:var(--cy);color:#fff}
.btn-solid:hover{background:#000}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--tint);border-color:var(--ink)}

.btn-lg{padding:13px 24px;font-size:.97rem}

/* text link with a rule that grows on hover */
.alink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
  font-weight:600;
  color:var(--cy);
  padding-bottom:2px;
  background-image:linear-gradient(var(--cy),var(--cy));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1.5px;
  transition:background-size .22s ease,color .16s ease;
}
.alink:hover{background-size:100% 1.5px;color:var(--cy-d)}


/* ---------- 08 · chips ------------------------------------------------ */

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  font-family:var(--body);
  font-size:.9rem;
  letter-spacing:.03em;
  color:var(--ink);
  white-space:nowrap;
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

.chip.on{color:var(--ink);border-color:#BFDFE4;background:var(--cy-l)}
.chip.ok{color:var(--gd);border-color:#BEDCCE;background:var(--gd-l)}
.chip.gate{color:var(--gate);border-color:#E6D19A;background:var(--gate-l)}
.chip.warm{color:var(--signal);border-color:#EFC9B6;background:var(--sg-l)}


/* ---------- 09 · hero ------------------------------------------------- */

.hero{padding:62px 0 54px;background:
  radial-gradient(900px 380px at 78% -8%, var(--cy-l), transparent 62%),
  var(--paper);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:44px;
  align-items:center;
}
/* Keep the full .wrap container (1120px) so the hero shares the same left
   edge as every .sec-head on the page; constrain the copy instead. */
.hero-solo .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero-solo .hero-copy{max-width:860px}

.hero-copy h1{margin-top:16px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.crumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:capitalize;
  color:var(--faint);
}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--line-2)}


/* ---------- 10 · console (the run trace) ------------------------------ */

.console{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--paper);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

.con-bar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  background:var(--tint);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.03em;
  color:var(--dim);
}
.con-bar .id{color:var(--ink);font-weight:500}
.con-bar .live{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--gd);
  font-weight:500;
}
.con-bar .live .dot{
  width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:pulse 1.9s ease-in-out infinite;
}

.con-body{
  padding:14px;
  min-height:250px;
  font-family:var(--mono);
  font-size:.745rem;
  line-height:1.85;
  color:var(--ink-2);
  overflow:hidden;
}
/* gothink.js renders one .cl row per data-trace entry, staggering them with
   an inline animation-delay */
.con-body .cl{
  display:flex;
  gap:11px;
  align-items:baseline;
  opacity:0;
  transform:translateY(5px);
  animation:cl-in .34s ease forwards;
}
.con-body .t{color:var(--faint);flex:0 0 auto;font-variant-numeric:tabular-nums}
.con-body .m{min-width:0}
.con-body .cl.head .m{color:var(--ink);font-weight:500}
.con-body .cl.ok .m{color:var(--gd)}
.con-body .cl.warn .m{color:var(--signal)}
.con-body .cl b{color:inherit;font-weight:600}
.con-body:empty{
  background:repeating-linear-gradient(
    transparent 0 26px, var(--tint) 26px 27px);
}

.con-foot{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background:var(--tint);
}
.con-foot .chips{margin-top:0}


/* ---------- 11 · stats ------------------------------------------------ */

.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.stats.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.k5{grid-template-columns:repeat(5,minmax(0,1fr))}

.stat{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:22px 20px;
  background:var(--paper);
}
.stat .v{
  font-family:var(--disp);
  font-size:clamp(1.9rem,3vw,2.5rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.stat .v small{font-size:.5em;font-weight:600;margin-left:1px;letter-spacing:0}
.stat .k{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.07em;
  text-transform:capitalize;
  color:var(--ink);
  font-weight:500;
}
.stat .s{font-size:.86rem;color:var(--dim);line-height:1.45}


/* ---------- 12 · logo marquee ----------------------------------------- */

.marq{
  overflow:hidden;
  border-block:1px solid var(--line);
  background:var(--tint);
  padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marq-t{
  display:flex;
  gap:44px;
  width:max-content;
  animation:marq 46s linear infinite;
}
.marq-t span{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.05em;
  color:var(--dim);
  white-space:nowrap;
}
.marq:hover .marq-t{animation-play-state:paused}


/* ---------- 13 · bento grid + tiles ----------------------------------- */
/* 12-column grid. .tile spans 4 (3-up). industries.css overrides for
   .bento.ix-7up rely on this base. */

.bento{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.tile{
  grid-column:span 4;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--paper);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.tile > p{color:var(--ink-2);font-size:.94rem;line-height:1.5}
.tile h3{margin-top:2px}
.tile h4{margin:0 0 5px}
.tile h4 + p,.frow p{color:var(--ink-2);font-size:.92rem;line-height:1.5}

a.tile:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:var(--line-2);
}

/* A .bento that declares its own grid-template-columns (index.html does this
   for .products-grid) needs the 12-column span cleared, or every tile spans
   the whole row. */
.bento.products-grid > .tile{grid-column:auto}

/* size variants — spans of the 12-column grid */
.tile.s5{grid-column:span 3}   /* 4-up */
.tile.s2{grid-column:span 6}   /* 2-up */
.tile.s3{grid-column:span 8}   /* 2/3 width */
.tile.s4{grid-column:span 12}  /* full bleed */

/* emphasis variants */
.tile.hi{background:var(--tint);border-color:var(--line-2)}
.tile.warm{background:var(--sg-l);border-color:#EFC9B6}
.tile.warm h3{color:var(--ink)}
.tile.featured{
  background:linear-gradient(180deg,var(--cy-l),var(--paper) 58%);
  border-color:#BFDFE4;
}

.tile-head{display:flex;flex-direction:column;gap:8px}
.tile-head .lbl{display:block}

.tile > .alink{margin-top:auto;padding-top:14px}

/* key/value strip inside a tile */
.kv{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed var(--line);
}
.kv > div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.kv .k{
  font-family:var(--body);
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:capitalize;
  color:var(--dim);
}
.kv .v{font-family:var(--mono);font-size:.8rem;font-weight:500;text-align:right}

/* icon + text row (approach.html, about_us.html) */
.frow{display:flex;gap:13px;align-items:flex-start}
.fico{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:var(--r-s);
  border:1px solid var(--line);
  background:var(--tint);
  color:var(--cy);
}
.fico svg{width:18px;height:18px}


/* ---------- 14 · figures / exhibits ----------------------------------- */

.fig{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--paper);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.fig-bar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:11px 18px;
  border-bottom:1px solid var(--line);
  background:var(--tint);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:capitalize;
  color:var(--dim);
}
.fig-bar b{color:var(--ink);font-weight:500}
.fig-bar .r{margin-left:auto;color:var(--faint);text-transform:none;letter-spacing:.02em}

.fig-head{padding:22px 18px 0;max-width:720px}
.fig-head h3{margin-bottom:7px}
.fig-head p{color:var(--ink-2);font-size:.94rem}

.fig-plate{padding:20px 18px 22px;overflow-x:auto}
.fig-plate svg{width:100%;height:auto}

.fig-foot{
  padding:13px 18px;
  border-top:1px solid var(--line);
  background:var(--tint);
  font-size:.84rem;
  color:var(--dim);
}
.fig-foot b{color:var(--ink)}


/* ---------- 15 · SVG utility classes (used inside exhibits) ----------- */

.t-cap{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:var(--faint);text-transform:capitalize}
.t-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;fill:var(--dim)}
.t-hd{font-family:var(--disp);font-size:15px;font-weight:650;letter-spacing:-.02em;fill:var(--ink)}
.t-sub{font-family:var(--body);font-size:11.5px;fill:var(--ink-2)}
.t-cy{fill:var(--cy)}
.t-sg{fill:var(--signal)}

.s-hair{stroke:var(--line);stroke-width:1;fill:none}
.s-cy{stroke:var(--cy);stroke-width:1.6;fill:none}
.s-sg{stroke:var(--signal);stroke-width:1.6;fill:none}
.s-flow{stroke:var(--line-2);stroke-width:1.4;fill:none}


/* ---------- 16 · tabs (five stages, document families) ---------------- */

.tabs{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--paper);
  overflow:hidden;
}

.tablist{
  display:flex;
  border-bottom:1px solid var(--line);
  background:var(--tint);
  overflow-x:auto;
  scrollbar-width:none;
}
.tablist::-webkit-scrollbar{display:none}

.tab{
  flex:1 1 0;
  min-width:132px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:13px 16px;
  text-align:left;
  border-bottom:2px solid transparent;
  transition:background .16s ease,border-color .16s ease;
}
.tab:hover{background:var(--cool)}
.tab .tn{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.09em;
  color:var(--faint);
}
.tab .tt{
  font-family:var(--disp);
  font-size:.98rem;
  font-weight:650;
  color:var(--ink-2);
  letter-spacing:-.01em;
}
.tab[aria-selected="true"]{background:var(--paper);border-bottom-color:var(--cy)}
.tab[aria-selected="true"] .tn{color:var(--cy)}
.tab[aria-selected="true"] .tt{color:var(--ink)}

/* gothink.js toggles .on for the active panel. Default to showing the first
   one so the content is readable if the script never runs. */
.panel{display:none;padding:26px 22px}
.panel.on{display:block}
.tabs:not(:has(.panel.on)) .panel:first-of-type{display:block}

.panel-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.panel-grid h3{margin-bottom:9px}
.panel-grid p{color:var(--ink-2);font-size:.95rem}

/* IN → OUT strip */
.io{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--tint);
  font-size:.85rem;
}
.io > span{display:inline-flex;align-items:center;gap:8px;min-width:0}
.io .arw{color:var(--line-2);font-size:1.05rem}
.io .a{color:var(--dim)}
.io .b{color:var(--ink);font-weight:500}

.tag{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.09em;
  padding:2px 6px;
  border-radius:4px;
  background:var(--cool);
  color:var(--dim);
  flex:0 0 auto;
}


/* ---------- 17 · autonomy rungs --------------------------------------- */

.rungs{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--paper);
  overflow:hidden;
}

.rung-bar{display:flex;border-bottom:1px solid var(--line);background:var(--tint);overflow-x:auto}
.rung-bar button{
  flex:1 1 0;
  min-width:150px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:13px 16px;
  text-align:left;
  border-bottom:2px solid transparent;
}
.rung-bar button:hover{background:var(--cool)}
.rung-bar .rn{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;color:var(--faint)}
.rung-bar .rt{font-family:var(--disp);font-size:.98rem;font-weight:650;color:var(--ink-2)}
.rung-bar button[aria-selected="true"]{background:var(--paper);border-bottom-color:var(--signal)}
.rung-bar button[aria-selected="true"] .rn{color:var(--signal)}
.rung-bar button[aria-selected="true"] .rt{color:var(--ink)}

.rung-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:26px;
  align-items:center;
  padding:26px 22px;
}
.rung-pane p{color:var(--ink-2);font-size:.98rem}
.rung-pane[hidden]{display:none}

/* gothink.js sets each bar's height inline (14/26/38px) and adds .a to every
   bar up to the selected rung — so this is a signal-strength meter, not a
   stack. Do not set height here; the inline style must win. */
.rung-dial{display:flex;align-items:flex-end;gap:7px;flex:0 0 auto}
.rung-dial i{
  display:block;
  width:11px;
  height:14px;
  border-radius:3px;
  background:var(--line);
  transition:height .28s ease,background .28s ease;
}
.rung-dial i.a{background:var(--signal)}


/* ---------- 18 · tables ----------------------------------------------- */

.tbl-wrap{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--paper);
  overflow:hidden;
}
.tbl-scroll{overflow-x:auto}

.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.tbl th{
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:var(--tint);
  font-family:var(--mono);
  font-size:.81rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:capitalize;
  color:var(--bold);
  white-space:nowrap;
}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--tint)}
.tbl td.mono{font-family:var(--mono);font-size:.82rem;color:var(--ink)}

.tnum{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--faint);
  margin-right:5px;
}

.was{color:var(--dim)}
.now{color:var(--ink);font-weight:500}
.num{font-family:var(--mono);font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--ink)}

/* confidence bar */
.cbar{
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:96px;height:6px;
  margin-left:8px;
  border-radius:999px;
  background:var(--cool);
  overflow:hidden;
}
.cbar i{display:block;height:100%;border-radius:999px;background:var(--gd)}
.cbar u{
  position:absolute;top:-2px;
  width:1.5px;height:10px;
  background:var(--ink);
  opacity:.55;
}
.cbar.hold i{background:var(--gate)}

/* pass / hold pill */
.vp{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:.63rem;
  font-weight:500;
  letter-spacing:.09em;
}
.vp.pass{background:var(--gd-l);color:var(--gd)}
.vp.hold{background:var(--gate-l);color:var(--gate)}


/* ---------- 19 · disclosure ------------------------------------------- */

.more{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--tint);
  padding:0 16px;
  margin-top:20px;
}
.more summary{
  list-style:none;
  cursor:pointer;
  padding:14px 0;
  font-family:var(--disp);
  font-weight:650;
  font-size:.98rem;
  display:flex;
  align-items:center;
  gap:9px;
}
.more summary::-webkit-details-marker{display:none}
.more summary::after{
  content:"";
  margin-left:auto;
  width:8px;height:8px;
  border-right:1.7px solid var(--dim);
  border-bottom:1.7px solid var(--dim);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.more[open] summary::after{transform:rotate(-135deg)}
.more .in{padding:0 0 16px;display:flex;flex-direction:column;gap:11px}
.more .in p{color:var(--ink-2);font-size:.94rem}


/* ---------- 20 · CTA block -------------------------------------------- */

.cta{
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(700px 300px at 12% 0%, var(--cy-l), transparent 62%),
    var(--tint);
  overflow:hidden;
}
.cta-in{padding:clamp(28px,4vw,48px)}
.cta-in h2{margin:12px 0 10px;max-width:20ch}
.cta-in > p{color:var(--ink-2);font-size:1.04rem}

.steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin:30px 0 26px;
}
.step{
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper);
}
.step .sn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-family:var(--mono);
  font-size:.72rem;
  margin-bottom:11px;
}
.step h3{margin-bottom:6px}
.step p{color:var(--ink-2);font-size:.9rem;line-height:1.5}

.cta-act{display:flex;flex-wrap:wrap;gap:12px}


/* ---------- 21 · footer ----------------------------------------------- */

footer{
  border-top:1px solid var(--line);
  background:var(--tint);
  padding:52px 0 30px;
  margin-top:0;
}

.fgrid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));
  gap:34px;
}
.fgrid > div:first-child p{
  margin-top:14px;
  font-size:.88rem;
  color:var(--ink);
  line-height:1.55;
  max-width:38ch;
}

.fcol{display:flex;flex-direction:column;gap:7px;min-width:0}
.fcol b{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--bold);
  font-size:.81rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:capitalize;
  color:var(--bold);
  margin-bottom:5px;
}
/* must be block: industries.css .ix-fsub wraps its links in a <span>,
   so they are not direct flex children and would otherwise run inline */
.fcol a{display:block;font-size:.975rem;color:var(--ink);transition:color .15s ease}
.fcol a:hover{color:var(--ink)}

.fbot{
  display:flex;
  gap:22px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:.76rem;
  color:var(--faint);
  line-height:1.55;
}
.fbot > span:first-child{max-width:82ch}


/* ---------- 22 · motion ----------------------------------------------- */
/* .rv is a scroll-reveal. It animates with CSS alone so the page is never
   blank if gothink.js fails to load. */

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes grow{from{width:0}}
@keyframes cl-in{to{opacity:1;transform:none}}
@keyframes rv-safety{to{opacity:1;transform:none}}

/* gothink.js observes .rv and adds .in when it scrolls into view.
   The rv-safety animation is insurance: if the script ever fails to load,
   every .rv still becomes visible after 2s instead of leaving the page
   blank. .in wins and cancels it. */
.rv{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.68,.35,1),
             transform .6s cubic-bezier(.22,.68,.35,1);
  animation:rv-safety 1ms linear 2s forwards;
}
.rv.in{opacity:1;transform:none;animation:none}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}

.drawline{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.9s ease forwards .25s}
.fadein{animation:fade .9s ease both .4s}
.groww{animation:grow 1.1s cubic-bezier(.22,.68,.35,1) both .2s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none;animation:none}
  .con-body .cl{opacity:1;transform:none}
  .marq-t{animation:none}
  .drawline{stroke-dashoffset:0}
}

html{scroll-behavior:smooth}
:target{scroll-margin-top:calc(var(--nav-h) + 56px)}
[id]{scroll-margin-top:calc(var(--nav-h) + 56px)}


/* ---------- 22b · finops forecast fan ---------------------------------
   Scoped to .fanfig so no other page or figure is affected.

   Default (no .in) = fully drawn and static. If gothink.js never loads,
   the chart still renders correctly - it just doesn't animate. The hidden
   "from" states only exist inside .in, so there is no flash.

   LOOPING MODEL: every looping element shares one --fan-cycle duration and
   runs infinite, so they stay locked in phase forever. Timing lives in the
   keyframe percentages, not in animation-delay - a delay would drift each
   element out of sync relative to the others. The small delays on .fan-val
   are the one exception: a constant offset on an equal-duration infinite
   animation is a permanent stagger, not drift.

   The axis and ceiling draw ONCE and stay put. Only the data replays -
   looping the chart furniture reads as flicker, not motion.

   Note: this deliberately does NOT use .drawline. Those two curves carry
   pathLength="1", and .drawline hardcodes stroke-dasharray:1200 - on a
   1-unit path that snaps to visible almost instantly instead of drawing,
   and it also overrides the P90's dashed 4 4 pattern. A mask wipe gives a
   real left-to-right climb and preserves the dashes. */

.fanfig{--fan-cycle:7s}

/* ---- one-shot: structural furniture, drawn once ---- */
@keyframes fan-draw{to{stroke-dashoffset:0}}
@keyframes fan-up{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---- looping: the data ---- */
/* climb, hold, then retract while invisible and go again */
@keyframes fan-wipe-loop{
  0%,4%    {transform:scaleX(0)}
  30%,89%  {transform:scaleX(1)}
  90%,100% {transform:scaleX(0)}
}
/* fades the revealed plot out before the wipe resets, so the retract is unseen */
@keyframes fan-plot-loop{
  0%,82%   {opacity:1}
  88%,100% {opacity:0}
}
@keyframes fan-band-loop{
  0%,4%    {transform:scaleY(.08)}
  30%,100% {transform:scaleY(1)}
}
@keyframes fan-dot-loop{
  0%       {offset-distance:0%;opacity:0}
  4%       {offset-distance:0%;opacity:0}
  8%       {opacity:1}
  26%      {opacity:1}
  30%      {offset-distance:100%}
  34%      {opacity:0}
  100%     {offset-distance:100%;opacity:0}
}
@keyframes fan-breach-loop{
  0%,24%   {opacity:0;transform:translateY(7px)}
  30%,82%  {opacity:1;transform:none}
  88%,100% {opacity:0;transform:none}
}
@keyframes fan-val-loop{
  0%,30%   {opacity:0;transform:translateY(7px)}
  36%,82%  {opacity:1;transform:none}
  88%,100% {opacity:0;transform:none}
}
@keyframes fan-ring{
  0%   {transform:scale(.65);opacity:.55}
  70%  {transform:scale(1.7);opacity:0}
  100% {transform:scale(1.7);opacity:0}
}

.fanfig .fan-dot{opacity:0}
.fanfig .fan-ring{opacity:.35}

/* baseline and ceiling: draw once, then stay for good */
.fanfig.in .fan-axis{
  stroke-dasharray:656;stroke-dashoffset:656;
  animation:fan-draw .65s cubic-bezier(.22,.68,.35,1) both .05s;
}
.fanfig.in .fan-ceil{animation:fan-up .55s ease both .18s}

/* the climb */
.fanfig.in .fan-wipe{
  transform-box:fill-box;transform-origin:left center;
  animation:fan-wipe-loop var(--fan-cycle) cubic-bezier(.32,.72,.3,1) infinite;
}
.fanfig.in .fan-plot{
  animation:fan-plot-loop var(--fan-cycle) ease infinite;
}
.fanfig.in .fan-band{
  transform-box:fill-box;transform-origin:center bottom;
  animation:fan-band-loop var(--fan-cycle) cubic-bezier(.22,.68,.35,1) infinite;
}

/* leading dot tracks the P90 tip, then hands off to the breach marker */
.fanfig.in .fan-dot{
  offset-path:path("M44 168 C170 160 300 130 430 104 C520 88 610 70 700 58");
  offset-rotate:0deg;
  animation:fan-dot-loop var(--fan-cycle) cubic-bezier(.32,.72,.3,1) infinite;
}

/* breach callout lands as the curve crosses W6 */
.fanfig.in .fan-breach{
  animation:fan-breach-loop var(--fan-cycle) cubic-bezier(.22,.68,.35,1) infinite;
}
.fanfig.in .fan-ring{
  transform-box:fill-box;transform-origin:center;
  animation:fan-ring 2.6s ease-out infinite;
}

/* right-edge values, staggered by a constant offset */
.fanfig.in .fan-val{animation:fan-val-loop var(--fan-cycle) ease infinite}
.fanfig.in .fan-val-1{animation-delay:0s}
.fanfig.in .fan-val-2{animation-delay:.12s}
.fanfig.in .fan-val-3{animation-delay:.24s}

/* hover parks the loop so the exhibit can be read without motion under it */
.fanfig:hover .fan-wipe,
.fanfig:hover .fan-plot,
.fanfig:hover .fan-band,
.fanfig:hover .fan-dot,
.fanfig:hover .fan-breach,
.fanfig:hover .fan-val,
.fanfig:hover .fan-ring{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .fanfig.in .fan-axis,.fanfig.in .fan-ceil,.fanfig.in .fan-wipe,
  .fanfig.in .fan-plot,.fanfig.in .fan-band,.fanfig.in .fan-breach,
  .fanfig.in .fan-val{
    animation:none;opacity:1;transform:none;stroke-dashoffset:0;
  }
  .fanfig .fan-dot{display:none}
  .fanfig.in .fan-ring{animation:none;opacity:.35}
}


/* ---------- 23 · responsive ------------------------------------------- */

@media (max-width:1040px){
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fgrid > div:first-child{grid-column:1 / -1}
}

@media (max-width:900px){
  :root{--nav-h:80px;--logo-h:56px;--logo-h-foot:50px}
  header .brand img,.brand img{height:56px !important}
  footer .brand img{height:50px !important}
  .burger{display:inline-flex}

  /* Drawer as grid rows: bar / links / CTAs. industries.css switches .ix-menu
     to position:static here, so it flows inline inside the links row. */
  .nav{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:var(--nav-h) auto auto;
    align-items:center;
    column-gap:12px;
    row-gap:0;
    height:auto;
  }
  .brand{grid-area:1 / 1 / 2 / 2}
  .burger{grid-area:1 / 3 / 2 / 4;justify-self:end;margin-left:0}

  .navlinks{
    grid-area:2 / 1 / 3 / 4;
    position:static;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:4px 0;
    border-top:1px solid var(--line);
    max-height:min(64vh,520px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .navlinks.open{display:flex}
  .navlinks > a{padding:11px 0;border-bottom:1px solid var(--line)}
  .navlinks > a:last-child{border-bottom:0}
  .navlinks > a.active{border-bottom-color:var(--line)}

  /* gothink.js toggles .open on both .navlinks and .navact */
  .navact{
    grid-area:3 / 1 / 4 / 4;
    display:none;
    gap:10px;
    margin:0;
    padding:12px 0 16px;
    border-top:1px solid var(--line);
  }
  .navact.open{display:flex}
  .navact .btn{flex:1 1 0}

  .hero{padding:44px 0 40px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:34px}

  .stats,.stats.k3,.stats.k5{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* responsive tile spans — industries.css .ix-7up overrides sit above these */
  .tile,
  .tile.s5,
  .tile.s2,
  .tile.s3{grid-column:span 6}
  .tile.s4{grid-column:span 12}

  .panel-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .rung-body{grid-template-columns:minmax(0,1fr)}

  .steps{grid-template-columns:minmax(0,1fr)}
  .sec{padding:56px 0}
}

@media (max-width:640px){
  .wrap{padding:0 18px}

  .stats,.stats.k3,.stats.k5{grid-template-columns:minmax(0,1fr)}

  .tile,
  .tile.s2,
  .tile.s3,
  .tile.s4,
  .tile.s5{grid-column:span 12}

  .bento{gap:14px}

  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}

  .tab,.rung-bar button{min-width:120px}
  .con-body{min-height:200px;font-size:.7rem}

  .btn-lg{padding:12px 20px;font-size:.93rem}
  .hero-cta .btn,.cta-act .btn{flex:1 1 auto}

  .fbot{flex-direction:column;gap:10px}
}

@media (max-width:420px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
}


/* ---------- 24 · print ------------------------------------------------ */

@media print{
  header,.subnav,.marq,.burger,.navact{display:none !important}
  .rv,.fadein,.groww{animation:none;opacity:1;transform:none}
  .tile,.fig,.tbl-wrap{break-inside:avoid;box-shadow:none}
  body{font-size:12px}
}