/* ═══════════════════════════════════════════════════════════════════════
   GRANUMEN — Level 2 stylesheet
   Carbon's type system and habits, Granumen's tokens. No dependencies.
   This file IS the adoption: link it and the site is on the system.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* colour — the Granumen palette. Values resolve from granumen-tokens.css
     when it is linked (the full ramp/semantic/dark system, which supersedes
     the old northsake tokens package); the hex fallbacks below are the same
     values, so this file also works entirely on its own. */
  --orange:     var(--gr-orange-500, #FE5428);  /* brand · symbol, never text ground */
  --orange-dk:  var(--gr-orange-600, #D13808);  /* action bg · white 4.91:1 */
  --navy:       var(--gr-navy-900,  #112D54);   /* text ink, dark surfaces */
  --navy-deep:  var(--gr-navy-975,  #001334);   /* hero / dark band ground */
  --blue:       var(--gr-blue-700,  #015DB8);   /* links */
  --teal:       var(--gr-teal-500,  #02988C);   /* labels, secondary accents */
  --amber:      var(--gr-amber-400, #FE953F);   /* labels on dark grounds */
  --ice:        var(--gr-ice,       #F2FBFE);   /* soft fill */
  --mist:       var(--gr-mist,      #E0E9EE);   /* soft borders */
  --tile:       var(--bg-surface-alt, #F4F6F8); /* alternate tile ground */
  --line:       var(--border-line,  #D8DFE6);   /* hairlines between tiles */
  --ink-2:      var(--gr-navy-700,  #4C617F);   /* secondary text */

  /* type — Carbon's logic: fluid display, weight falls as size rises,
     small sizes tracked open, productive sizes fixed.
     Typeface: Inter (free, OFL — decided 2026-08-09, files in
     granumen-fonts.css). Never re-add "Aktiv Grotesk" to this stack: the
     site does not swap fonts later — Aktiv is bought for the wordmark
     artwork only — and a leading Aktiv entry hijacks any machine with
     the trial installed. */
  --font: "Inter", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Helvetica, Arial, sans-serif;
  --t-display: clamp(42px, 32px + 2.2vw, 60px);  /* w300 · ls -0.64px */
  --t-h2:      clamp(28px, 24px + 1vw, 42px);    /* w300 */
  --t-h3:      20px;                              /* w400 · fixed */
  --t-h-sm:    16px;                              /* w600 · fixed */
  --t-body:    16px;                              /* w400 · lh 24px */
  --t-helper:  14px;                              /* ls +0.16px */
  --t-label:   12px;                              /* ls +0.32px */

  --focus: var(--blue);    /* switch to cyan-600 #0A84A2 if links feel muddy */
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; }
body {
  font-family: var(--font);
  font-size: var(--t-body); line-height: 1.5;
  color: var(--navy); background: #fff;
  -webkit-font-smoothing: antialiased;
}
.w { max-width: 1312px; margin: 0 auto; padding: 0 24px; }
p  { max-width: 66ch; }                    /* the measure */

.display { font-size: var(--t-display); line-height: 1.17;
           font-weight: 300; letter-spacing: -0.64px; }
h2 { font-size: var(--t-h2);  line-height: 1.2;  font-weight: 300; }
h3 { font-size: var(--t-h3);  line-height: 28px; font-weight: 400; }
.h-sm { font-size: var(--t-h-sm); line-height: 24px; font-weight: 600; }
.label  { font-size: var(--t-label); line-height: 16px;
          letter-spacing: 0.32px; text-transform: uppercase;
          color: var(--teal); display: block; }
.helper { font-size: var(--t-helper); line-height: 18px;
          letter-spacing: 0.16px; color: var(--ink-2); }

/* links: prose links underline (the underline is load-bearing — see the
   link-colour study); UI links (nav, tiles) underline on hover only */
a         { color: var(--text-link, var(--blue)); text-decoration: underline;
            text-underline-offset: 0.14em; }
a:visited { color: var(--text-link-visited, var(--text-link, var(--blue))); }
a.ui-link { text-decoration: none; }
a.ui-link:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus-ring, var(--focus));
                 outline-offset: 1px; }

/* ── button — Carbon habit: square, left-aligned, arrow on the right ──
   Fill is orange-600, NOT the brand 500: white 14-16px text on #FE5428
   measures 3.22:1 and fails AA. On #D13808 it is 4.91:1. The original
   approved theme already encoded this (action bg 600 → hover 700 →
   active 800); the 500 is for the symbol and brand moments, not labels. */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 38px; min-width: 220px; padding: 15px 16px;
  background: var(--orange-dk); color: #fff;       /* 600 · 4.91:1 */
  font-size: 16px; line-height: 1;
  border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
}
.btn:hover  { background: var(--gr-orange-700, #AB2A00); text-decoration: none; }
.btn:active { background: var(--gr-orange-800, #841E01); }
.btn.ghost  { background: transparent; color: currentColor;
              border: 1px solid currentColor; }
.btn .ar    { font-size: 18px; }
@media (max-width: 672px) { .btn { width: 100%; } }

/* ── tiles on a 1px grid — Carbon's signature surface ────────────────── */
.gridwrap { background: var(--line); border: 1px solid var(--line);
            display: grid; gap: 1px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1056px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 672px)  { .g4, .g3, .g2 { grid-template-columns: 1fr; } }
.tile     { background: #fff; padding: 24px 22px 28px; }
.tile.alt { background: var(--tile); }
.tile > .num { font-size: clamp(32px, 26px + 1.4vw, 54px);
             line-height: 1.15; font-weight: 300; display: block; }
/* direct child only — table .num cells inside a tile must keep table type */

/* ── page furniture ──────────────────────────────────────────────────── */
header.site { border-bottom: 1px solid var(--line); background: #fff;
              position: sticky; top: 0; z-index: 5; }
.nav { display: flex; align-items: stretch; height: 48px; }
.nav .logo   { display: flex; align-items: center; padding-right: 26px; }
.nav a.item  { display: flex; align-items: center; padding: 0 16px;
               font-size: 14px; letter-spacing: 0.16px; color: var(--navy);
               border-left: 1px solid var(--line); text-decoration: none; }
.nav a.item:hover { background: var(--tile); }
.nav .cta { margin-left: auto; display: flex; }
@media (max-width: 672px) { .nav a.item { display: none; } }

.band      { background: var(--navy); color: #fff; padding: 56px 0; }
.band.deep { background: var(--navy-deep); }
.band h2   { color: #fff; }
.band p    { color: rgba(255,255,255,.85); }
.band .label { color: var(--amber); }

section { padding: 56px 0; }

footer.site { border-top: 1px solid var(--line); padding: 40px 0 48px; }
footer.site h4 { font-size: 14px; letter-spacing: 0.16px; font-weight: 600;
                 margin-bottom: 10px; }
footer.site a  { display: block; font-size: 14px; letter-spacing: 0.16px;
                 line-height: 2.1; color: var(--ink-2); text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
.legal { font-size: 12px; letter-spacing: 0.32px; color: #697C98; }

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD TIER — the client app on the same file.
   Everything here is productive type: fixed sizes on every screen.
   ─────────────────────────────────────────────────────────────────────── */

/* app shell: sidebar + work area */
.shell { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.side  { border-right: 1px solid var(--line); background: var(--tile);
         padding: 18px 0; }
.side .logo { padding: 0 20px 18px; }
.side a { display: block; padding: 10px 20px; font-size: 14px;
          letter-spacing: 0.16px; color: var(--navy); text-decoration: none;
          border-left: 3px solid transparent; }
.side a:hover  { background: #fff; }
.side a.active { border-left-color: var(--orange); background: #fff;
                 font-weight: 600; }
.work  { padding: 26px 28px 60px; min-width: 0; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side  { display: flex; overflow-x: auto; padding: 0; border-right: 0;
           border-bottom: 1px solid var(--line); }
  .side .logo { padding: 12px 16px; }
  .side a { white-space: nowrap; border-left: 0;
            border-bottom: 3px solid transparent; }
  .side a.active { border-bottom-color: var(--orange); }
}

/* data table — 14px fixed, numbers tabular and right-aligned */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); background:#fff; }
table.data { border-collapse: collapse; width: 100%; min-width: 760px; }
table.data th {
  font-size: 12px; line-height: 16px; letter-spacing: 0.32px;
  text-transform: uppercase; font-weight: 400; color: var(--ink-2);
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--tile);
  white-space: nowrap;
}
table.data td {
  font-size: 14px; line-height: 18px; letter-spacing: 0.16px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
table.data .num, table.data th.num { text-align: right;
  font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--ice); cursor: pointer; }
table.data tfoot td { font-weight: 600; background: var(--tile); }
th a { color: inherit; text-decoration: none; }
th a:hover { color: var(--navy); }

/* status — never colour alone: dot + word */
.badge { display: inline-flex; align-items: center; gap: 7px;
         font-size: 12px; letter-spacing: 0.32px; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
                 background: currentColor; }
.badge.ok   { color: #0E6E38; }
.badge.warn { color: #8A5A00; }
.badge.bad  { color: #B01E4E; }

/* forms — native controls, styled, 40px targets */
label.f { display: block; font-size: 12px; letter-spacing: 0.32px;
          text-transform: uppercase; color: var(--ink-2); margin: 0 0 5px; }
input, select {
  font: 400 14px/1 var(--font); letter-spacing: 0.16px; color: var(--navy);
  height: 40px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 0; background: #fff;
}
.filters { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
           padding: 16px; border: 1px solid var(--line);
           border-bottom: 0; background: #fff; }
.filters .btn { min-width: 0; gap: 16px; height: 40px; padding: 0 16px; }

/* select wears its own chevron — square, no native ornament */
select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23112D54' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }

/* dropdown menu — native <details>, no JS required.
   Derived from the system rules (square, hairline, flush, teal label) the
   day production needed one; promoted here so it is copied, not re-derived. */
details.menu { position: relative; }
details.menu > summary { list-style: none; display: inline-flex;
  align-items: center; gap: 10px; height: 40px; padding: 0 14px;
  border: 1px solid var(--line); background: #fff; font-size: 14px;
  letter-spacing: 0.16px; color: var(--navy); cursor: pointer;
  user-select: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary::after { content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid
  currentColor; transform: rotate(45deg); margin-top: -3px; }
details.menu[open] > summary::after { transform: rotate(-135deg);
  margin-top: 3px; }
details.menu .panel { position: absolute; top: calc(100% - 1px); left: 0;
  z-index: 6; min-width: 240px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(1,19,52,.16);
  padding: 6px 0; }
details.menu .panel a { display: block; padding: 9px 16px; font-size: 14px;
  letter-spacing: 0.16px; color: var(--navy); text-decoration: none; }
details.menu .panel a:hover { background: var(--tile); }
details.menu .panel .label { padding: 10px 16px 4px; }
details.menu .panel hr { border: 0; border-top: 1px solid var(--line);
  margin: 6px 0; }
/* mega variant — the panel spans the whole masthead (IBM.com shape).
   Two forms: the static panel (every column visible at once — right for a
   handful of services) and .switch, the full IBM.com rail behaviour in
   pure CSS (right when categories × items outgrow one view). */
.nav details.menu.mega { position: static; }
details.menu.mega .panel { left: 0; right: 0; min-width: 0; padding: 0;
  display: grid; grid-template-columns: 280px 1fr; }
details.menu.mega .rail { border-right: 1px solid var(--line);
  padding: 24px; }
/* direct children only — in the .switch variant the panes live INSIDE
   .rail, and a descendant selector here would restyle every pane link */
details.menu.mega .rail > .helper { display: block; margin: 8px 0 18px;
  max-width: 30ch; }
details.menu.mega .rail > a { padding: 0; display: inline-flex; gap: 8px; }
details.menu.mega .rail > a:hover { background: none;
  text-decoration: underline; }
details.menu.mega .cols { display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 0 36px; align-content: start;
  padding: 14px 28px 24px; }
details.menu.mega .cols a { padding: 12px 0; }
details.menu.mega .cols a b { display: block; font-weight: 600;
  font-size: 14px; letter-spacing: 0.16px; margin: 0 0 3px; }
details.menu.mega .cols a:hover { background: none; }
details.menu.mega .cols a:hover b { text-decoration: underline; }
/* grouped columns — a service with its sub-services. Two levels MAX;
   deeper hierarchy is an information-architecture problem, not a menu
   problem. Flyout submenus never. */
details.menu.mega .cols .grp { padding: 12px 0; }
details.menu.mega .cols .grp > a { padding: 5px 0; }
details.menu.mega .cols .grp > a.lead { padding: 0 0 7px; }
details.menu.mega .cols .grp > a.lead b { margin: 0 0 2px; }
details.menu.mega .cols .grp > a:not(.lead):hover {
  text-decoration: underline; }
/* .switch — the rail swaps the pane, zero JS. Each rail <li> CONTAINS its
   pane, so hovering the pane keeps the item :hover (the old mega-menu
   geometry trick); :focus-within mirrors it for keyboard. Rail items are
   REAL links: desktop hover previews, click (and any touch tap) navigates
   to the category page — no dead controls. */
details.menu.mega.switch .panel { display: block; min-height: 340px; }
/* (the panel keeps position:absolute from the base rule — an absolute box
   is itself the containing block for the .pane children) */
details.menu.mega.switch .rail { list-style: none; margin: 0; width: 300px;
  padding: 10px 0 58px; border-right: 1px solid var(--line);
  min-height: 100%; }
details.menu.mega.switch .rail > li > a { padding: 11px 24px;
  border-left: 3px solid transparent; }
details.menu.mega.switch .rail > li:hover > a,
details.menu.mega.switch .rail > li:focus-within > a {
  background: var(--tile); border-left-color: var(--orange); }
details.menu.mega.switch .pane { display: none; position: absolute;
  left: 300px; right: 0; top: 0; bottom: 0; overflow: auto;
  padding: 24px 30px; }
details.menu.mega.switch .rail > li:first-child .pane { display: block; }
details.menu.mega.switch .rail:hover > li:first-child:not(:hover) .pane,
details.menu.mega.switch .rail:focus-within >
  li:first-child:not(:focus-within) .pane { display: none; }
details.menu.mega.switch .rail > li:hover .pane,
details.menu.mega.switch .rail > li:focus-within .pane { display: block; }
details.menu.mega.switch .pane .head { display: inline-flex; gap: 10px;
  align-items: center; font-size: 20px; font-weight: 400;
  color: var(--blue); padding: 0 0 12px; }
details.menu.mega.switch .pane .head:hover { background: none;
  text-decoration: underline; }
details.menu.mega.switch .pane .cols { padding: 0; }
details.menu.mega.switch .railfoot { position: absolute; left: 0; bottom: 0;
  width: 300px; padding: 14px 24px; border-top: 1px solid var(--line);
  border-right: 1px solid var(--line); font-size: 14px;
  background: var(--tile); }
@media (max-width: 1056px) {
  details.menu.mega.switch .rail,
  details.menu.mega.switch .railfoot { width: 240px; }
  details.menu.mega.switch .pane { left: 240px; } }

/* mobile menu — the hamburger, still native <details>, still zero JS.
   Hidden on desktop; under 672px it replaces the inline items and
   desktop dropdowns (which hide there). Sub-services fold as nested
   <details class="sub"> accordions — the mobile answer to the mega
   panel's .grp columns. */
.nav details.menu.mobile { display: none; }
@media (max-width: 672px) {
  .nav details.menu.mobile { display: flex; position: static;
    margin-left: 6px; }
  .nav details.menu.mobile > summary { border: 0; padding: 0; width: 48px;
    height: auto; align-self: stretch; justify-content: center;
    background: transparent; }
  .nav details.menu.mobile > summary::after { width: 18px; height: 2px;
    border: 0; background: currentColor; transform: none; margin: 0;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .nav details.menu.mobile[open] > summary { background: var(--tile); }
  .nav details.menu.mobile[open] > summary::after { transform: none;
    margin: 0; }
  .nav details.menu.mobile .panel { left: 0; right: 0; min-width: 0;
    padding: 0; max-height: calc(100vh - 49px); overflow: auto; }
  .nav details.menu.mobile .panel > a,
  .nav details.menu.mobile .panel .sub > summary { padding: 14px 26px;
    font-size: 15px; border-top: 1px solid var(--line); }
  .nav details.menu.mobile .panel > :first-child { border-top: 0; }
  .nav details.menu.mobile .panel .sub > summary { list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; color: var(--navy); user-select: none; }
  .nav details.menu.mobile .panel .sub > summary::-webkit-details-marker {
    display: none; }
  .nav details.menu.mobile .panel .sub > summary::after { content: "";
    width: 6px; height: 6px; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
  .nav details.menu.mobile .panel .sub[open] > summary::after {
    transform: rotate(-135deg); }
  .nav details.menu.mobile .panel .sub a { padding: 12px 26px 12px 42px;
    font-size: 15px; color: var(--ink-2); }
}
@media (max-width: 1056px) {
  details.menu.mega .cols { grid-template-columns: repeat(2, 1fr); } }

/* inside .nav it wears the nav-item skin */
.nav details.menu { display: flex; }
.nav details.menu > summary { height: auto; align-self: stretch; border: 0;
  border-left: 1px solid var(--line); padding: 0 16px; }
.nav details.menu > summary:hover { background: var(--tile); }
.nav details.menu .panel { top: 100%; }
@media (max-width: 672px) { .nav details.menu { display: none; } }

/* auth — the sign-in screen; minimal chrome, no nav, no sidebar */
.auth { max-width: 420px; margin: 9vh auto 0; padding: 0 26px 60px; }
.auth .logo svg { height: 26px; width: auto; display: block; }
.auth h1 { font-size: 20px; font-weight: 400; letter-spacing: 0;
           margin: 34px 0 6px; }
.auth .sub { font-size: 14px; letter-spacing: 0.16px; color: var(--ink-2);
             margin: 0 0 28px; }
.auth form { display: grid; gap: 18px; margin: 0; }
.auth input { width: 100%; }
.auth .btn { width: 100%; }
.auth .err { font-size: 14px; letter-spacing: 0.16px; color: #B01E4E;
             border-left: 3px solid currentColor; padding: 2px 0 2px 12px;
             margin: 0; }
.auth .aux { font-size: 14px; margin: 22px 0 0; }

/* empty state — first run, zero results; flush-left like everything else */
.empty { border: 1px solid var(--line); background: #fff;
         padding: 46px 40px 50px; }
.empty > svg, .empty > img { height: 56px; width: auto; opacity: .3;
         display: block; margin: 0 0 18px; }
.empty .h-sm { margin: 0 0 6px; }
.empty .helper { display: block; max-width: 52ch; margin: 0 0 20px; }

/* native <dialog> — the modal without a framework */
dialog { border: 0; border-radius: 0; padding: 0; max-width: 520px;
         width: calc(100% - 40px); margin: auto;   /* the * reset kills the
         UA's auto-centering — restore it */
         box-shadow: 0 8px 40px rgba(1,19,52,.35); }
dialog::backdrop { background: rgba(1,19,52,.5); }
dialog .dhead { display: flex; justify-content: space-between;
                align-items: center; padding: 16px 20px;
                border-bottom: 1px solid var(--line); }
dialog .dbody { padding: 20px; }
dialog .kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px;
             font-size: 14px; letter-spacing: 0.16px; }
dialog .kv dt { color: var(--ink-2); }
dialog .kv dd { margin: 0; text-align: right;
                font-variant-numeric: tabular-nums; }

/* pagination — plain links */
.pag { display: flex; gap: 4px; padding: 14px 0; }
.pag a, .pag span { min-width: 36px; height: 36px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 14px;
  text-decoration: none; color: var(--navy); border: 1px solid transparent; }
.pag span.cur { background: var(--navy); color: #fff; }
.pag a:hover { border-color: var(--line); }

/* ═══ rules encoded, so nobody has to remember them ═══════════════════
   · body never below 16px on any screen (also stops iOS form zoom);
     table/label type is 14px and 12px BY DESIGN and stays fixed — it is
     productive type, per the Carbon doctrine
   · only display and h2 are fluid; every app size is a constant
   · weight falls as size rises: 600 at 16px, 400 at 20, 300 at 28+
   · tracking: +0.32px at 12, +0.16px at 14, 0 in the middle,
     −0.64px on the display
   · orange is the primary action and nothing else on the page
   · status is never colour alone — the badge carries a dot AND a word
   · wide tables scroll sideways on phones (.tablewrap); they do not
     reflow, because financial columns lose meaning when stacked
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   MARKETING SECTIONS — the homepage patterns, so every section lives in
   this one file. Markup recipes: granumen-kit.html.
   ─────────────────────────────────────────────────────────────────────── */

/* leadspace — dark hero (variant 01)
   The masthead NEVER goes inside this block. Per the Carbon-for-IBM.com
   rule the white sticky header.site sits above it on every page — a dark
   blended nav loses stickiness (sticky can't escape its container) and
   stops being the constant branded anchor. */
.lead-dark { background: var(--navy-deep); color: #fff; position: relative;
             overflow: hidden; }
.lead-dark .in { padding: 82px 0 90px; position: relative; z-index: 1; }
.lead-dark .display { color: #fff; margin: 14px 0 20px; max-width: 15ch; }
.lead-dark .leadp { font-size: clamp(18px, 16px + .5vw, 24px); line-height: 1.5;
             font-weight: 300; color: rgba(255,255,255,.82);
             margin: 0 0 36px; max-width: 46ch; }
.lead-dark .ring { position: absolute; right: 64px; top: 50%;
             transform: translateY(-50%); width: 340px; }
@media (max-width:1056px) { .lead-dark .ring { width: 240px; opacity: .15;
             right: 8px; } }
@media (max-width:672px)  { .lead-dark .ring { display: none; } }
.ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* section head: label + h2 + helper */
.sechead { max-width: 70ch; margin: 0 0 26px; }
.sechead h2 { margin: 4px 0 8px; }
.sechead .helper { max-width: 66ch; }

/* method numerals */
.mnum { font-size: 54px; line-height: 1; font-weight: 300;
        color: var(--orange); display: block; margin: 0 0 14px; }

/* quote */
.quote { border-left: 3px solid var(--orange); padding: 6px 0 6px 28px;
         max-width: 72ch; }
.quote p { font-size: clamp(22px, 19px + .8vw, 32px); line-height: 1.35;
           font-weight: 300; margin: 0 0 14px; max-width: none; }

/* FAQ on native <details> */
/* scoped to .faq — bare details/summary selectors leaked onto details.menu
   the day the dropdown arrived; a component never styles naked elements */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { font-size: 16px; font-weight: 600; padding: 16px 0;
          cursor: pointer; list-style: none; display: flex;
          justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 300;
                 color: var(--ink-2); }
.faq details[open] summary::after { content: "–"; }
.faq details .a { padding: 0 0 18px; max-width: 66ch; font-size: 15px;
             color: #33455F; }

/* ═══════════════════════════════════════════════════════════════════════
   EXTENDED SECTIONS — the rest of the Carbon-for-IBM.com block catalog
   worth having. Recipes in granumen-kit.html.
   ─────────────────────────────────────────────────────────────────────── */

/* universal banner — announcement bar above the header */
.banner { background: var(--blue); color: #fff; font-size: 14px;
          letter-spacing: 0.16px; }
.banner .in { display: flex; justify-content: space-between; gap: 18px;
              align-items: center; min-height: 44px; padding: 8px 0; }
.banner a { color: #fff; font-weight: 600; text-decoration: none;
            white-space: nowrap; }
.banner a:hover { text-decoration: underline; }

/* feature card — one big linked tile, arrow pinned bottom-right */
.feature-card { display: flex; flex-direction: column; justify-content:
                space-between; min-height: 220px; background: var(--navy);
                color: #fff; padding: 28px 26px; text-decoration: none; }
.feature-card:hover { background: #0B2140; text-decoration: none; }
.feature-card .fc-h { font-size: clamp(22px, 19px + .7vw, 30px);
                      font-weight: 300; line-height: 1.25; max-width: 22ch; }
.feature-card .fc-b { display: flex; justify-content: space-between;
                      align-items: flex-end; margin-top: 26px; }
.feature-card .helper { color: rgba(255,255,255,.7); }
.feature-card .ar { font-size: 24px; color: var(--amber); }

/* link list — resources / further reading */
.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li { border-top: 1px solid var(--line); }
.linklist li:last-child { border-bottom: 1px solid var(--line); }
.linklist a { display: flex; justify-content: space-between; gap: 18px;
              padding: 14px 2px; font-size: 16px; text-decoration: none; }
.linklist a::after { content: "→"; color: var(--ink-2); }
.linklist a:hover { background: var(--ice); }
.linklist .helper { display: block; margin-top: 2px; }

/* table of contents — sticky side nav for long pages */
.tocwrap { display: grid; grid-template-columns: 230px 1fr; gap: 40px;
           align-items: start; }
.toc { position: sticky; top: 68px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 7px 0 7px 16px; font-size: 14px;
         letter-spacing: 0.16px; color: var(--ink-2); text-decoration: none;
         border-left: 3px solid transparent; margin-left: -2px; }
.toc a:hover { color: var(--navy); }
.toc a.active { color: var(--navy); font-weight: 600;
                border-left-color: var(--orange); }
@media (max-width: 900px) { .tocwrap { grid-template-columns: 1fr; }
  .toc { position: static; display: flex; overflow-x: auto; border-left: 0;
         border-bottom: 1px solid var(--line); }
  .toc a { white-space: nowrap; border-left: 0;
           border-bottom: 3px solid transparent; }
  .toc a.active { border-bottom-color: var(--orange); } }

/* structured list — spec sheets, engagement tiers */
.slist { width: 100%; border-collapse: collapse; font-size: 15px; }
.slist th { text-align: left; font-size: 12px; letter-spacing: 0.32px;
            text-transform: uppercase; font-weight: 400; color: var(--ink-2);
            padding: 0 16px 10px 0; border-bottom: 1px solid var(--navy); }
.slist td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line);
            vertical-align: top; }
.slist td:first-child { font-weight: 600; white-space: nowrap; }

/* tag group */
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag  { font-size: 12px; letter-spacing: 0.32px; padding: 5px 12px;
        background: var(--ice); color: var(--navy);
        border: 1px solid var(--mist); text-decoration: none; }
a.tag:hover { border-color: var(--blue); color: var(--blue); }

/* logo grid — client marks */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
         background: var(--line); border: 1px solid var(--line); }
.logos > div { background: #fff; min-height: 96px; display: flex;
               align-items: center; justify-content: center;
               filter: grayscale(1); opacity: .72; }
.logos > div:hover { filter: none; opacity: 1; }
@media (max-width: 672px) { .logos { grid-template-columns: repeat(2, 1fr); } }

/* back to top */
.totop { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px;
         display: flex; align-items: center; justify-content: center;
         background: var(--navy); color: #fff; text-decoration: none;
         font-size: 18px; }
.totop:hover { background: var(--orange-dk); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════
   PHOTO SECTIONS — the media half of the Carbon catalog.
   Art direction: photographs sit on the navy end of the palette; text over
   a photo always stands on the scrim, never on the raw image.
   ─────────────────────────────────────────────────────────────────────── */

/* leadspace with image — the Quantum shape: photo behind, scrim, text left */
.lead-photo { position: relative; color: #fff; overflow: hidden;
              background: var(--navy-deep); }
.lead-photo > img.bg { position: absolute; inset: 0; width: 100%; height: 100%;
              object-fit: cover; }
.lead-photo::before { content: ""; position: absolute; inset: 0;
              background: linear-gradient(90deg, rgba(1,19,52,.92) 0%,
              rgba(1,19,52,.72) 45%, rgba(1,19,52,.25) 100%); }
.lead-photo .in { position: relative; z-index: 1; padding: 88px 0 96px; }
.lead-photo .display { color: #fff; margin: 14px 0 20px; max-width: 15ch; }
.lead-photo .leadp { font-size: clamp(18px, 16px + .5vw, 24px);
              line-height: 1.5; font-weight: 300;
              color: rgba(255,255,255,.85); margin: 0 0 36px; max-width: 44ch; }

/* split with image — content block with media */
.media-split { display: grid; grid-template-columns: 1fr 1fr;
               border: 1px solid var(--line); }
.media-split .txt { padding: 44px 40px 48px; background: var(--tile); }
.media-split .media { position: relative; min-height: 320px; }
.media-split .media img { position: absolute; inset: 0; width: 100%;
               height: 100%; object-fit: cover; }
@media (max-width: 900px) { .media-split { grid-template-columns: 1fr; }
  .media-split .media { min-height: 220px; } }

/* image cards — card group with images (case studies) */
.imgcard { background: #fff; text-decoration: none; color: var(--navy);
           display: flex; flex-direction: column; }
.imgcard img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
               display: block; }
.imgcard .pad { padding: 18px 20px 22px; display: flex; flex-direction:
                column; gap: 6px; flex: 1; }
.imgcard .pad .go { margin-top: auto; padding-top: 14px; font-size: 14px;
                letter-spacing: 0.16px; color: var(--blue); }
.imgcard:hover .go { text-decoration: underline; }

/* feature card with image — C4D's flagship: photo half, navy panel half */
.feature-media { display: grid; grid-template-columns: 1fr 1fr;
                 text-decoration: none; }
.feature-media .media { position: relative; min-height: 280px; }
.feature-media .media img { position: absolute; inset: 0; width: 100%;
                 height: 100%; object-fit: cover; }
.feature-media .panel { background: var(--navy); color: #fff;
                 padding: 34px 30px; display: flex; flex-direction: column;
                 justify-content: space-between; min-height: 280px; }
.feature-media:hover .panel { background: #0B2140; }
.feature-media .fc-h { font-size: clamp(22px, 19px + .7vw, 30px);
                 font-weight: 300; line-height: 1.25; max-width: 20ch; }
.feature-media .fc-b { display: flex; justify-content: space-between;
                 align-items: flex-end; margin-top: 26px; }
.feature-media .helper { color: rgba(255,255,255,.7); }
.feature-media .ar { font-size: 24px; color: var(--amber); }
@media (max-width: 720px) { .feature-media { grid-template-columns: 1fr; } }

/* image with caption — block figure with the hairline credit */
figure.figcap { margin: 0; }
figure.figcap img { width: 100%; display: block; }
figure.figcap figcaption { font-size: 14px; letter-spacing: 0.16px;
                 color: var(--ink-2); padding: 10px 0 0;
                 border-bottom: 1px solid var(--line); padding-bottom: 12px; }

/* quote with portrait — callout with media */
.quote-media { display: grid; grid-template-columns: 128px 1fr; gap: 28px;
               align-items: start; max-width: 78ch; }
.quote-media img { width: 128px; height: 128px; object-fit: cover;
               display: block; }
@media (max-width: 620px) { .quote-media { grid-template-columns: 1fr; }
  .quote-media img { width: 96px; height: 96px; } }