/* goodmorningadvisory.com: page layout on top of the pack's tokens.css (identity/, v1.3).
   Light theme only: no prefers-color-scheme override. Lucky red is the only accent; colours come from tokens.css.
   Order: fonts, page ramps, base, layout, header, shared pieces, the home page's sections, the citations page,
   footer, motion. Breakpoints: 560px (the header nav shows), 720px (grids go two-up, side padding grows),
   1000px (words and their evidence side by side, three-up grids). */

@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/young-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }

/* The type scale's web sizes (--gm-fs-*) come from tokens.css (guide §8, v1.3): never a new clamp() here */
:root { --gm-square: 12px; }   /* the label's square, the brand's one bullet */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; }
p, h1, h2, h3, ul, figure { margin: 0; }
strong { font-weight: 600; }
h1, h2, h3 { text-wrap: balance; }
.band-text, .statement, .lead { text-wrap: pretty; }
a:focus-visible { outline: 3px solid var(--gm-accent); outline-offset: 3px; border-radius: 6px; }
.gm-band a:focus-visible { outline-color: var(--gm-band-accent); }

/* Layout: one column on a phone; from 1000px a section's words sit beside its evidence */
.wrap { max-width: 1128px; margin: 0 auto; padding: 0 var(--gm-gutter); }
.section, .gm-band { padding: var(--gm-space-6) 0; }
.section + .section { padding-top: 0; }
.split { display: grid; gap: var(--gm-space-5); }
.split > * { min-width: 0; }   /* a long word in a grid never pushes the page sideways */
@media (min-width: 720px) { .wrap { padding: 0 var(--gm-space-5); } }
@media (min-width: 1000px) { .split { grid-template-columns: 1fr 1fr; gap: var(--gm-space-6); align-items: center; } }

/* Header */
.site-head { padding: 20px 0; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gm-space-4); }
.brand { display: block; flex: 0 1 auto; min-width: 0; }
.brand img { height: 48px; width: auto; max-width: 100%; margin-left: -7px; }
.head-nav { display: none; gap: var(--gm-space-4); }
.head-link { font-weight: 600; text-decoration: none; color: var(--gm-fg); white-space: nowrap; }
.head-link[aria-current="page"], .head-link:hover { color: var(--gm-accent); }
@media (min-width: 560px) { .head-nav { display: flex; } .brand img { height: 56px; margin-left: -9px; } }

/* Shared pieces: the section label with its square, buttons and links, icon circles, headings, a lead */
.label { display: flex; align-items: center; gap: 12px; margin-bottom: var(--gm-space-4); }
.label::before { content: ""; flex: none; width: var(--gm-square); height: var(--gm-square); border-radius: 3px;
  background: var(--gm-accent); }
.gm-band .label::before { background: var(--gm-band-accent); }
.button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 24px;
  border-radius: var(--gm-radius-pill); background: var(--gm-accent); color: var(--gm-on-accent); font-weight: 600;
  text-decoration: none; }
.button:hover { background: var(--gm-accent-hover); color: var(--gm-on-accent); }
.button svg { width: 20px; height: 20px; flex: none; }
.text-link { font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.hero .text-link { color: var(--gm-fg); }   /* red stays rare (guide §8): the second link is ink, the button red */
.hero .text-link:hover { color: var(--gm-accent); }
.gm-icon-circle { flex: none; }
.gm-icon-circle svg { width: 50%; height: 50%; }
.section h2, .gm-band h2 { font-size: var(--gm-fs-section); line-height: 1.16; max-width: 22em; }
.lead { font-size: var(--gm-fs-lead); color: var(--gm-fg-muted); max-width: var(--gm-measure); }

/* Hero: the line under the name, the vision, contact */
.hero { padding: var(--gm-space-5) 0 var(--gm-space-6); }
.name-line { font-weight: 500; color: var(--gm-fg-muted); font-size: var(--gm-text-lg); margin-bottom: var(--gm-space-4); }
.name-line .plus { font-weight: 600; color: var(--gm-accent); }
.hero h1 { font-size: var(--gm-fs-hero); line-height: 1.08; letter-spacing: -0.012em; max-width: 17em; }
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gm-space-3) var(--gm-space-4);
  margin-top: var(--gm-space-5); }

/* Belief (a band): the sentence, with the hard ones as tiles beside it */
.band-text { margin-top: var(--gm-space-4); font-size: var(--gm-fs-lead); max-width: var(--gm-measure); }
.hard-ones { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gm-space-3); }
.hard-ones li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gm-space-3);
  padding: 20px; border-radius: var(--gm-radius-card); background: var(--gm-band-surface);
  font-family: var(--gm-font-display); font-size: var(--gm-text-lg); line-height: 1.2; color: var(--gm-band-fg); }
.hard-ones .gm-icon-circle { width: 2.5rem; height: 2.5rem; background: var(--gm-band-bg); }   /* six red circles would
   make red common (guide §8: more than four red things in view, one goes ink): ink circles on the Panel tiles */
@media (max-width: 359.98px) { .hard-ones { grid-template-columns: 1fr; }   /* the smallest phones: a list */
  .hard-ones li { flex-direction: row; align-items: center; padding: 12px 16px; } }
@media (min-width: 560px) { .hard-ones { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .hard-ones { grid-template-columns: repeat(2, 1fr); }
  .hard-ones li { flex-direction: row; align-items: center; } }

/* Who we are: the statement, with the senior experts and the AI harness as a joined pair */
.statement { font-size: var(--gm-fs-statement); line-height: 1.42; max-width: 34em; }
.pair { position: relative; display: grid; gap: var(--gm-space-5); }
.pair-card { border-radius: var(--gm-radius-card); padding: var(--gm-space-4); }
.pair-card.dark { background: var(--gm-band-bg); color: var(--gm-band-fg); }
.pair-card .gm-icon-circle { margin-bottom: var(--gm-space-4); }
.pair-card h3 { font-size: var(--gm-fs-statement); line-height: 1.2; }
.pair-card p { margin-top: var(--gm-space-2); font-weight: 600; color: var(--gm-fg-muted); }
.pair-card.dark p { color: var(--gm-band-fg-muted); }
.pair-plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gm-accent); color: var(--gm-on-accent); }
.pair-plus svg { width: 20px; height: 20px; }
@media (min-width: 560px) { .pair { grid-template-columns: 1fr 1fr; } }

/* How we work: the words, with the way an answer is made beside them: a rail of steps, the senior expert and the
   harness joined by the plus at the step where they meet. Red here: the label's square, the plus, the two icon
   circles (four). */
.how .lead, .access .lead { margin-top: var(--gm-space-4); }
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gm-space-4); }
.flow-step { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--gm-space-3); align-items: start; }
.flow-step::before { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: calc(-1 * var(--gm-space-4));
  width: 2px; background: var(--gm-mist); }   /* the rail between steps */
.flow-step:last-child::before { display: none; }
.flow-dot { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--gm-band-bg); color: var(--gm-on-accent); position: relative; z-index: 1; }
.flow-dot svg { width: 50%; height: 50%; }
.flow-dot.plus { background: var(--gm-accent); }
.flow-text { padding-top: 6px; }
.flow-text h3 { font-family: var(--gm-font-display); font-size: var(--gm-text-lg); line-height: 1.25; }
.flow-text p { margin-top: var(--gm-space-1); color: var(--gm-fg-muted); }
.flow-pair { display: grid; gap: var(--gm-space-3); }
.flow-card { border-radius: var(--gm-radius-card); padding: 20px; background: var(--gm-surface); }
.flow-card.dark { background: var(--gm-band-bg); color: var(--gm-band-fg); }
.flow-card .gm-icon-circle { width: 2.5rem; height: 2.5rem; margin-bottom: var(--gm-space-3); }
.flow-card h3 { font-family: var(--gm-font-display); font-size: var(--gm-text-lg); line-height: 1.25; }
.flow-card p { margin-top: var(--gm-space-1); font-size: var(--gm-text-sm); color: var(--gm-fg-muted); }
.flow-card.dark p { color: var(--gm-band-fg-muted); }
@media (min-width: 560px) { .flow-pair { grid-template-columns: 1fr 1fr; } }

/* Portal + LINE assistant: the words, then the two tools: the portal as a real screen from the sample company (a
   link opens it full size), LINE as a card until its real screen exists. Never LINE's own green. */
.access .tools { list-style: none; padding: 0; margin: var(--gm-space-5) 0 0; display: grid; gap: var(--gm-space-4); align-items: start; }
.tool-head { display: flex; align-items: center; gap: var(--gm-space-3); }
.tool-head h3 { font-family: var(--gm-font-display); font-size: var(--gm-fs-statement); line-height: 1.2; }
.tool > p { margin-top: var(--gm-space-3); color: var(--gm-fg-muted); }
.shot .frame { display: block; margin-top: var(--gm-space-3); border-radius: var(--gm-radius-card); background: var(--gm-band-bg); padding: 14px; }
.shot img { width: 100%; height: auto; border-radius: 10px; }
.shot figcaption { margin-top: var(--gm-space-3); font-size: var(--gm-text-sm); color: var(--gm-slate-muted); max-width: var(--gm-measure); }
@media (min-width: 1000px) { .access .tools { grid-template-columns: 3fr 2fr; } }
/* the LINE card's simulated chat (13 Oct, until a real screenshot): a phone in the same ink frame as the portal screen */
.line-shot { margin-top: var(--gm-space-4); }
.line-shot .frame { max-width: 300px; margin: 0 auto; border-radius: 40px; background: var(--gm-band-bg); padding: 10px; }
.line-shot img { display: block; width: 100%; height: auto; border-radius: 30px; }
.line-shot figcaption { margin: var(--gm-space-3) auto 0; max-width: 300px; font-size: var(--gm-text-sm); color: var(--gm-slate-muted); }

/* the demo video (Handover 3): the 16:9 player framed like the portal screenshots, the honesty line under it,
   and the words on screen as text for anyone who cannot see it */
.demo .lead { margin-top: var(--gm-space-4); }
.demo-video { margin: var(--gm-space-5) 0 0; }
.demo-video .frame { border-radius: var(--gm-radius-card); background: var(--gm-band-bg); padding: 14px; }
.demo-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--gm-band-bg); }
.demo-video figcaption { margin-top: var(--gm-space-3); font-size: var(--gm-text-sm); color: var(--gm-slate-muted); max-width: var(--gm-measure); }
.demo-text { margin-top: var(--gm-space-4); max-width: var(--gm-measure); }
.demo-text summary { cursor: pointer; font-weight: 600; width: fit-content; }
.demo-text ol { margin: var(--gm-space-3) 0 0; padding-left: 1.4em; display: grid; gap: 6px; color: var(--gm-fg-muted); }

/* Promise: what you get, as a list, with real work beside it */
.you-get { margin-top: var(--gm-space-4); font-weight: 600; color: var(--gm-fg-muted); }
.gets { list-style: none; padding: 0; margin-top: var(--gm-space-3); display: grid; gap: var(--gm-space-3); }
.gets li { display: flex; align-items: center; gap: var(--gm-space-3); font-family: var(--gm-font-display);
  font-size: var(--gm-fs-statement); line-height: 1.25; }
.gets .gm-icon-circle { width: 2.5rem; height: 2.5rem; }
.real-work .frame { border-radius: var(--gm-radius-card); background: var(--gm-band-bg); padding: 14px; }
.real-work img { width: 100%; height: auto; border-radius: 10px; }
.real-work figcaption { margin-top: var(--gm-space-3); font-size: var(--gm-text-sm); color: var(--gm-slate-muted);
  max-width: var(--gm-measure); }
/* The cost claim, only beside its proof case (guide §6; row 177) */
.proof { margin-top: var(--gm-space-5); max-width: var(--gm-measure); }
.proof-claim { color: var(--gm-fg-muted); }
.proof-q { margin-top: var(--gm-space-2); font-family: var(--gm-font-display); font-size: var(--gm-fs-statement); line-height: 1.3; }
.proof-facts { margin-top: var(--gm-space-2); }
.proof-note { margin-top: var(--gm-space-2); font-size: var(--gm-text-sm); color: var(--gm-slate-muted); }

/* Contact (the closing band): the value line, with the way to reach us beside it */
.reach .button { margin-top: 0; }
.mail-address { margin-top: var(--gm-space-3); font-size: var(--gm-fs-lead); overflow-wrap: anywhere; }
@media (min-width: 1000px) { .contact .split { grid-template-columns: 3fr 2fr; } .reach { justify-self: end; } }

/* Citations page: the deck's slide format as web blocks */
.cit-hero h1 { font-size: var(--gm-fs-title); max-width: 20em; }
.cit-note { margin-top: var(--gm-space-3); }
.citations { padding-bottom: var(--gm-space-6); }
.citation { padding: var(--gm-space-5) 0; border-top: 1px solid var(--gm-mist); }
.citation:first-child { border-top: 0; padding-top: 0; }
.cit-eyebrow { display: block; }
.cit-eyebrow::before { display: inline-block; margin-right: 12px; vertical-align: 0.05em; }
.cit-eyebrow .sep { margin: 0 0.6em; }
.cit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gm-space-3); }
.cit-head h2 { font-size: var(--gm-fs-title); line-height: 1.05; }
.pill { display: inline-block; padding: 8px 18px; border-radius: var(--gm-radius-pill); background: var(--gm-accent);
  color: var(--gm-on-accent); font-size: var(--gm-text-sm); font-weight: 600; letter-spacing: var(--gm-tracking-label);
  text-transform: uppercase; white-space: nowrap; }
.cit-sub { margin-top: var(--gm-space-2); color: var(--gm-fg-muted); font-size: var(--gm-text-lg); }
.cit-cards { display: grid; gap: var(--gm-space-3); margin-top: var(--gm-space-4); }
@media (min-width: 720px) { .cit-cards { grid-template-columns: 47fr 53fr; } }
.cit-issue, .cit-helped, .cit-list { border-radius: var(--gm-radius-card); padding: var(--gm-space-4); }
.cit-helped, .cit-list { background: var(--gm-band-bg); }
.cit-list { margin-top: var(--gm-space-4); }
.cit-issue-head { display: flex; align-items: center; gap: 16px; }
.cit-card-label { margin: 0; font-size: var(--gm-text-sm); font-weight: 600; letter-spacing: var(--gm-tracking-label);
  text-transform: uppercase; color: var(--gm-accent); }
.gm-band .cit-card-label { color: var(--gm-band-accent); }
.cit-text, .cit-bullets { margin-top: var(--gm-space-3); font-size: var(--gm-fs-lead); line-height: 1.4; }
.cit-bullets { padding-left: 1.2em; }
.cit-bullets li { margin-bottom: 6px; }
.cit-outcome { margin-top: var(--gm-space-4); display: flex; gap: 14px; align-items: baseline;
  font-family: var(--gm-font-display); font-size: var(--gm-fs-statement); line-height: 1.25; }
.cit-outcome::before { content: ""; flex: none; width: var(--gm-square); height: var(--gm-square); border-radius: 3px;
  background: var(--gm-accent); transform: translateY(-1px); }
.cit-grid { list-style: none; padding: 0; margin-top: var(--gm-space-3); display: grid; gap: var(--gm-space-3) var(--gm-space-4); }
@media (min-width: 560px) { .cit-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cit-grid { grid-template-columns: 1fr 1fr 1fr; } }
.cit-grid li { padding-left: 24px; position: relative; }
.cit-grid li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: var(--gm-square); height: var(--gm-square);
  border-radius: 3px; background: var(--gm-band-accent); }
.cit-grid .name { display: block; font-weight: 600; font-size: var(--gm-text-lg); color: var(--gm-band-fg); }
.cit-grid .what { display: block; color: var(--gm-band-fg-muted); font-size: var(--gm-text-sm); }

/* Footer */
.site-foot { padding: var(--gm-space-4) 0 var(--gm-space-5); color: var(--gm-slate-muted); font-size: var(--gm-text-sm); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot-link { color: var(--gm-fg-muted); font-weight: 600; text-decoration: none; }   /* the portal link, on phones too */
.foot-link:hover { color: var(--gm-accent); text-decoration: underline; }

/* Motion: "gm wakes up" (guide §8, pack v1.2). It plays once per page load, about 2.1 s, then everything is still.
   CSS only: the site's policy allows no script. Every rule sits inside no-preference, so with reduced motion
   nothing moves and the finished state shows. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* 1. The mark wakes: the tile settles in, then the wordmark unfolds out of it. In lockup-on-light.svg
     (viewBox 1356.96 wide) the tile ends at 184.32 (13.6%) and its centre is at 104.16 (7.7%): recompute both
     if logo.py changes the lockup. One mask layer keeps the tile; a soft-edged layer twice as wide moves 97% to 0. */
  .brand img {
    transform-origin: 7.7% 50%;
    -webkit-mask-image: linear-gradient(90deg, black 13.6%, transparent 13.6%), linear-gradient(90deg, black 50%, transparent 56%);
            mask-image: linear-gradient(90deg, black 13.6%, transparent 13.6%), linear-gradient(90deg, black 50%, transparent 56%);
    -webkit-mask-size: 100% 100%, 200% 100%; mask-size: 100% 100%, 200% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0;
    animation: gm-tile-in var(--gm-dur-slow) var(--gm-ease-out) both,
               gm-unfold var(--gm-dur-wake) var(--gm-ease-out) calc(var(--gm-dur-slow) * 0.75) both;
  }

  /* 2. The marked phrase wakes: a red stroke (9% tall, at 86%) is drawn under it in reading order, line by line;
     then the words turn red and the stroke lets go, ending as the red word */
  .hero .gm-mark {
    background-image: linear-gradient(var(--gm-accent), var(--gm-accent));
    background-repeat: no-repeat; background-position: 0 86%; background-size: 100% 0%;
    animation: gm-wake calc(var(--gm-dur-wake) * 1.5) linear calc(var(--gm-dur-wake) * 0.9) both;
  }

  /* 3. A section switches on: as it scrolls into view, its label's square grows and flips from Mist to red
     (Panel to the lifted red on a band). A flip, never a fade: a half red reads as pink. Where scroll-driven
     animation isn't supported, the squares switch on once, at load. */
  .label::before { animation: gm-switch-on var(--gm-dur-slow) linear both; }
  .gm-band .label::before { animation-name: gm-switch-on-band; }
  @supports (animation-timeline: view()) {
    .label::before { animation-duration: auto; animation-timeline: view(); animation-range: entry 10% cover 35%; }
  }
}
@keyframes gm-tile-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
@keyframes gm-unfold {
  from { -webkit-mask-position: 0 0, 97% 0; mask-position: 0 0, 97% 0; }
  to   { -webkit-mask-position: 0 0, 0 0;   mask-position: 0 0, 0 0; }
}
@keyframes gm-wake {
  0%   { color: var(--gm-fg);     background-size: 0% 9%;   animation-timing-function: var(--gm-ease-out); }
  62%  { color: var(--gm-fg);     background-size: 100% 9%; animation-timing-function: var(--gm-ease-standard); }
  72%  { color: var(--gm-fg);     background-size: 100% 9%; animation-timing-function: var(--gm-ease-standard); }
  100% { color: var(--gm-accent); background-size: 100% 0%; }
}
@keyframes gm-switch-on {
  0%    { background-color: var(--gm-mist); transform: scale(0.6); }
  49.9% { background-color: var(--gm-mist); }
  50%   { background-color: var(--gm-accent); }
  100%  { background-color: var(--gm-accent); transform: scale(1); }
}
@keyframes gm-switch-on-band {
  0%    { background-color: var(--gm-panel); transform: scale(0.6); }
  49.9% { background-color: var(--gm-panel); }
  50%   { background-color: var(--gm-band-accent); }
  100%  { background-color: var(--gm-band-accent); transform: scale(1); }
}

/* the Caliber Labs page (DEC-388, 31 Oct) and its teaser on the home page */
.hero .lead { margin-top: var(--gm-space-4); }
.cal-cards { list-style: none; padding: 0; margin: var(--gm-space-5) 0 0; display: grid; gap: var(--gm-space-4); }
.cal-cards > li { min-width: 0; }
.cal-cards h3 { margin-top: var(--gm-space-3); }
.cal-cards p { margin-top: var(--gm-space-2); color: var(--gm-fg-muted); }
@media (min-width: 800px) { .cal-cards { grid-template-columns: repeat(3, 1fr); } }
.caliber-teaser .lead { margin-top: var(--gm-space-4); }
.products { padding-top: 0; }
.product-cards { margin-top: 0; }
@media (min-width: 800px) { .product-cards { grid-template-columns: repeat(2, 1fr); max-width: 52rem; } }
.product-cards p + p { margin-top: var(--gm-space-3); }
.product-cards .text-link { color: var(--gm-fg); }   /* red stays rare (guide §8) */
.product-cards .text-link:hover { color: var(--gm-accent); }
/* the LINE assistant privacy page (DEC-432): a plain notice, readable on a phone */
.notice > * { max-width: var(--gm-measure); }
.notice h2 { font-size: var(--gm-text-lg); line-height: 1.25; margin-top: var(--gm-space-6); }
.notice h2:first-child { margin-top: 0; }
.notice p { margin-top: var(--gm-space-2); }
.notice .text-link { color: var(--gm-fg); }   /* red stays rare (guide §8) */