/* Quiet Forces sandbox. Owner-selected Swiss-inspired system typography. */
:root {
  --type-small: 15px;
  --type-body: 17px;
  --type-subheading: 20px;
  --type-heading: 25px;
  --type-title: 32px;
  --type-display: clamp(38px, 4.2vw, 63px); /* ramp-exception: fluid display heading */
  --page-gutter: clamp(18px, 5vw, 80px);
  --paper: #f5f3ed;
  --ink: #252e2b;
  --muted: #545e58;
  --line: #b7bbb3;
  --accent: #a53f2f;
  --space-tight: .5rem;
  --space-group: 1.5rem;
  --space-block: 2rem;
  --space-section: clamp(3rem, 5.5vw, 5rem);
  color-scheme: light;
  font-family: system-ui, sans-serif;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  scrollbar-color: var(--line) var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: var(--type-body); line-height: 1.65; overflow-wrap: break-word; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a { color: inherit; text-underline-offset: .24em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
a[href^="mailto:"] { padding-block: 3px; }
button { font: inherit; color: inherit; background: transparent; border: 1px solid var(--muted); padding: .5rem 1rem; cursor: pointer; min-height: 44px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
main:focus { outline: none; }
::selection { background: var(--ink); color: var(--paper); }
.wrap { max-width: 1520px; margin: auto; padding: 0 var(--page-gutter); }
.skip { position: absolute; top: -100px; }
.skip:focus { top: 12px; background: var(--paper); padding: 1rem; z-index: 30; }
.site-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-block); padding: 20px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.identity { display: flex; gap: 12px; align-items: center; text-decoration: none; font-size: 22px; /* ramp-exception: owner-selected A Balanced masthead name */ font-weight: 550; line-height: 1.2; flex-shrink: 0; }
.identity img { flex-shrink: 0; }
.brand-type { display: inline-flex; align-items: baseline; gap: .38em; white-space: nowrap; }
.descriptor { font-weight: 300; color: var(--muted); }
nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: var(--type-small); white-space: nowrap; }
nav a:hover, nav a:focus-visible, nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .4em; }
nav .nav-book { padding-inline: 14px; border: 1px solid var(--ink); font-weight: 500; }  /* the call to action stays in view on every page */
nav .nav-book:hover, nav .nav-book:focus-visible { background: var(--ink); color: var(--paper); text-decoration: none; }
.page-head { padding: clamp(40px, 5vw, 72px) 0 var(--space-section); }
h1, h2, h3, p, figure { margin: 0; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6vw; align-items: center; min-height: min(42rem, calc(100svh - 85px)); padding: clamp(48px, 5vw, 80px) 0; }
h1 { font-size: var(--type-display); line-height: 1.08; letter-spacing: -.035em; font-weight: 450; max-width: 13ch; text-wrap: balance; }
.intro { font-size: var(--type-subheading); line-height: 1.55; max-width: 43ch; margin-top: var(--space-group); }
.hero-copy > p:not(.intro) { margin-top: var(--space-group); }
.hero-copy > p.hero-sub { font-size: var(--type-heading); line-height: 1.3; letter-spacing: -.02em; font-weight: 450; margin-top: 16px; }
.hero-sub span { display: block; }
.hero-copy > .booking-context { font-size: var(--type-small); color: var(--muted); max-width: 43ch; }
.booking { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-tight); }
.booking a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; font-size: var(--type-body); line-height: 1.4; text-decoration: underline; text-underline-offset: .3em; }
.booking a:hover { color: var(--accent); }
.booking > span { font-size: var(--type-small); color: var(--muted); }
.action-arrow { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.symbol { position: relative; }
.symbol > svg { display: block; width: 100%; max-width: 420px; margin: auto; overflow: visible; }
.base { fill: none; stroke: var(--ink); stroke-width: 6.97125; stroke-linecap: round; stroke-linejoin: round; }
.pulse { fill: none; stroke: var(--accent); stroke-width: 8.2; stroke-dasharray: 1.2 98.8; stroke-linecap: round; }
.traveller circle, .exchanges circle { fill: var(--accent); }
.halo { opacity: .32; }
.symbol svg:not([data-phase]) .traveller { visibility: hidden; }
#motion { margin-left: auto; padding: 4px 0; border: 0; font-size: var(--type-small); line-height: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: .3em; }
#motion:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
#motion[hidden] { display: none; }
.section-shell, .teach { display: grid; grid-template-columns: 1fr 2fr; gap: 7vw; border-top: 1px solid var(--line); padding: var(--space-section) 0; }
h2 { font-size: var(--type-subheading); font-weight: 500; line-height: 1.35; letter-spacing: -.015em; text-wrap: balance; }
h3 { font-size: var(--type-title); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.section-body > p, .work article p { max-width: 65ch; }
.section-body > p + p { margin-top: var(--space-group); }
.claim, .service-lead { font-size: var(--type-title); line-height: 1.25; letter-spacing: -.025em; max-width: 30ch; text-wrap: balance; }
.claim strong, .service-lead strong { font-weight: 450; }
.deliverables { margin: 8px 0 var(--space-group); padding-left: 1.2em; max-width: 65ch; }
.deliverables li + li { margin-top: 4px; }
.not-for { color: var(--muted); }
.more a, .booking-fallback a { display: inline-flex; align-items: center; min-height: 44px; }
.pilot-disclosure { font-size: var(--type-small); color: var(--muted); padding-top: var(--space-group); border-top: 1px solid var(--line); }
.method { padding: 0; margin: 0; list-style: none; counter-reset: step; max-width: 65ch; }
.method li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-group); padding: var(--space-group) 0; border-bottom: 1px solid var(--line); }
.method li:first-child { padding-top: 0; }
.method li::before { content: counter(step); color: var(--accent); font-size: var(--type-small); line-height: 1.65; font-variant-numeric: tabular-nums; }
.method strong { display: block; margin-bottom: 4px; font-weight: 500; }
.work article + article { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.work article p { margin-top: 16px; }
.work .project-capability { font-size: var(--type-body); font-weight: 500; line-height: 1.4; margin-top: 12px; }
.status { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; font-size: var(--type-small); color: var(--muted); }
.status b { font-weight: 500; color: var(--ink); margin-right: .35rem; }
.work .project-hark h3 { font-family: "Chakra Petch", Arial, sans-serif; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
.work .project-massive-small h3 { font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500; letter-spacing: 0; text-transform: uppercase; font-style: normal; }
.work .project-ambiance h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: .01em; }
.loom-wordmark { display: block; width: 106px; height: 38px; max-width: 100%; }
.contact-panel .section-body > p:first-child { font-size: var(--type-title); line-height: 1.3; letter-spacing: -.025em; text-wrap: balance; }
footer { border-top: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 30px; padding: 20px 0 32px; font-size: var(--type-small); line-height: 1.7; color: var(--muted); }
footer span:last-of-type { flex-basis: 100%; }
footer > a { display: inline-flex; align-items: center; min-height: 44px; }
small { font-size: var(--type-small); }
@media (max-width: 1050px) {
  .identity { font-size: var(--type-subheading); }
  nav { gap: 20px; }
  nav a { font-size: var(--type-small); }
}
@media (max-width: 800px) {
  :root { scroll-padding-top: 24px; }
  body { font-size: var(--type-body); }
  .site-nav { position: relative; flex-wrap: wrap; gap: 12px; padding: 20px 0 12px; }
  nav { width: 100%; margin: 0; flex-wrap: wrap; justify-content: space-between; gap: 0 6px; }
  nav a { min-height: 44px; font-size: var(--type-small); }
  .hero { min-height: 0; grid-template-columns: 1fr; padding: 40px 0; gap: var(--space-group); }
  h1 { --type-display: clamp(37px, 8vw, 56px); /* ramp-exception: mobile display heading */ font-size: var(--type-display); max-width: 17ch; }
  .intro { font-size: var(--type-body); }
  .symbol > svg { max-width: 280px; width: 86%; }
  .section-shell, .teach { grid-template-columns: 1fr; gap: var(--space-group); padding: 36px 0; }
  .claim, .service-lead, .contact-panel .section-body > p:first-child { font-size: var(--type-heading); }
  .method li { grid-template-columns: 20px 1fr; gap: 16px; }
  .status { grid-template-columns: 1fr; gap: 4px; }
  #motion { margin-left: 0; }
}
/* Below 375px the four 15px links cannot share one line; use a tidy 2x2 grid instead of a ragged wrap. */
@media (max-width: 374.98px) {
  nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  nav a { white-space: normal; } /* enlarged text wraps inside its cell, not off the page */
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}

/* On-demand booking, using the site's link styling and one inline calendar. */
.section-body { min-width: 0; }
.booking-panel { margin-top: var(--space-block); padding-top: var(--space-group); border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.booking-panel[hidden] { display: none; }
.booking-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.booking-heading h3 { font-family: system-ui, sans-serif; font-size: var(--type-subheading); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
.booking-close { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0 4px 8px; border: 0; font-size: var(--type-small); color: var(--muted); }
.booking-close:hover { color: var(--accent); }
.booking-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.booking-fallback { margin: 8px 0 20px; font-size: var(--type-small); color: var(--muted); }
.booking-status { margin: 16px 0; font-size: var(--type-small); color: var(--muted); }
.booking-retry { margin-bottom: 16px; }
#booking-embed { width: 100%; min-width: 0; min-height: 700px; background: var(--paper); isolation: isolate; }
#booking-embed:empty { min-height: 0; }
/* Free-plan approximation: neutralise provider blue and blend white into paper.
   This treats every iframe colour alike; it cannot set individual brand colours. */
#booking-embed iframe { display: block; width: 100%; max-width: 100%; min-width: 0; border: 0; background: var(--paper); filter: grayscale(1); mix-blend-mode: multiply; }
@media (forced-colors: active) {
  #booking-embed iframe { filter: none; mix-blend-mode: normal; }
  .identity img, .loom-wordmark { forced-color-adjust: none; background: #f5f3ed; }
}
.privacy-page { max-width: 850px; margin: auto; padding: 32px var(--page-gutter) 64px; }
.privacy-page main { padding-top: 48px; }
.privacy-page h1 { --type-display: clamp(34px, 5vw, 52px); /* ramp-exception: privacy display heading */ font-size: var(--type-display); max-width: none; }
.privacy-page h2 { margin-top: 36px; margin-bottom: 12px; }
.privacy-page p + p { margin-top: 16px; }
.privacy-page h1 + p { margin-top: 24px; }
.privacy-page li + li { margin-top: 8px; }
.privacy-page > a { display: inline-flex; align-items: center; min-height: 44px; }
.privacy-page main p { max-width: 65ch; }
#booking-embed .calendly-spinner { display: none; }
@media (max-width: 800px) {
  .booking-panel { width: calc(100% + 2 * var(--page-gutter)); margin-inline: calc(-1 * var(--page-gutter)); }
  .booking-heading, .booking-fallback, .booking-status { padding-inline: var(--page-gutter); }
  .booking-retry { margin-inline: var(--page-gutter); }
  .booking-heading { gap: 8px; }
  .booking-heading h3 { font-size: var(--type-subheading); }
}

/* Bounded section-diagram trial; source geometry remains owned by Graphics. */
#learn-ai, #projects { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: start; }
.service-visual .qf-section-art { display: block; width: 100%; max-width: 500px; height: auto; margin-top: 28px; }
.service-visual .qf-label { font-size: var(--type-body); }
@media (max-width: 800px) {
  #learn-ai, #projects { grid-template-columns: 1fr; gap: 24px; }
  .service-visual .qf-section-art { max-width: 440px; margin: 16px auto 0; }
  .service-visual .qf-label { font-size: var(--type-heading); }
}

/* D: a concrete, illustrative revision; final state is the static default. */
.agenda-example { margin-top: 24px; max-width: 500px; }
.agenda-example figcaption, .agenda-footnote { font-size: var(--type-small); line-height: 1.5; color: var(--muted); }
.agenda-stage { padding: 16px 0; border-bottom: 1px solid var(--line); }
.agenda-stage h3 { font-size: var(--type-body); letter-spacing: -.01em; margin-bottom: 12px; }
.agenda-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.agenda-rows li { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 16px; align-items: center; font-size: var(--type-small); line-height: 1.4; }
.agenda-rows small { display: block; font-size: var(--type-small); color: var(--muted); }
.agenda-track { display: block; height: 7px; }
.agenda-bar { display: block; height: 7px; background: var(--ink); transform-origin: left center; }
[data-agenda-bar] { background: var(--accent); }
.agenda-direction { font-size: var(--type-small); line-height: 1.5; padding: 16px 0 0; }
.agenda-direction q { font-weight: 500; }
.agenda-footnote { margin-top: 12px; }
@media(max-width:800px) { .agenda-example { margin: 20px auto 0; } }

@media (forced-colors: active) { .agenda-bar { background: CanvasText; forced-color-adjust: none; } }

/* Compact D trial: service explanation first, illustration as supporting example. */
#learn-ai, #projects { grid-template-columns: 1fr 2fr; gap: 7vw; }
.agenda-example { max-width: 620px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.agenda-stage { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 16px; padding: 12px 0; }
.agenda-stage h3 { font-size: var(--type-small); margin: 0; }
.agenda-rows { gap: 7px; }
.agenda-rows li { grid-template-columns: 74px minmax(0,1fr); gap: 12px; font-size: var(--type-small); }
.agenda-rows small { font-size: var(--type-small); }
.agenda-direction { font-size: var(--type-small); padding-top: 12px; }
.agenda-example figcaption, .agenda-footnote { font-size: var(--type-small); }
@media(max-width:800px) { #learn-ai, #projects { grid-template-columns: 1fr; gap: 24px; } }
@media(max-width:480px) { .agenda-stage { grid-template-columns: 1fr; gap: 10px; } }

/* Impeccable Live compatibility: keep hover labels from moving click targets.
   These selectors affect only the injected development toolbar. */
#impeccable-live-global-bar .icon-btn-label { max-width:120px !important; opacity:1 !important; margin-left:6px !important; transform:none !important; transition:none !important; }

@media(max-width:600px) { #impeccable-live-global-bar .icon-btn-label { display:none !important; } }

/* Graphics studies (website#37/#43 at aff7afe): markup copied as is, styled here. Wide drawings on screens,
   vertical ones once the column is too narrow to keep SVG text at 15px or more (hub 800 x 15/17 = 706; net 640). */
.fig { container-type: inline-size; margin: var(--space-block) 0; padding-top: 14px; border-top: 1px solid var(--line); }
.fig figcaption > b { display: block; font-size: var(--type-subheading); margin-bottom: 4px; }
.fig figcaption p, .fig .key { color: var(--muted); font-size: var(--type-small); margin: 0 0 6px; }
.fig svg.wide, .fig svg.narrow { display: block; width: 100%; height: auto; margin: 10px 0 12px; }
.fig svg.narrow { display: none; max-width: 440px; }
/* Both drawings span their whole section so screens get the wide drawing (owner: horizontal on screen). */
.fig-hub, .fig-net { grid-column: 1 / -1; margin-top: 0; }
.section-shell:has(> .fig) { row-gap: var(--space-group); }
.fig figcaption { max-width: 65ch; }
/* Drawn at 1:1 (hub 800, net 640 wide) so labels render at 19px and strokes at 2px, next to the 20px/500 headings. */
.fig-hub svg.wide { max-width: 800px; }
.fig-net svg.wide { max-width: 640px; }
.fig-hub svg.narrow { max-width: 380px; }
.fig-net svg.narrow { max-width: 343px; }
@container (max-width: 706px) { .fig-hub svg.wide { display: none; } .fig-hub svg.narrow { display: block; } }
@container (max-width: 640px) { .fig-net svg.wide { display: none; } .fig-net svg.narrow { display: block; } }
/* Phones: the figure runs to 16px from the screen edge (the gutter the phone drawings were made for), and each drawing
   keeps the width that holds its text at 15px (hub 380 x 15/17, net 343), scrolling sideways on the narrowest screens. */
@media (max-width: 480px) {
  .fig { margin-inline: calc(16px - var(--page-gutter)); overflow-x: auto; }  /* tabindex on the figure lets keyboards scroll it */
  .fig figcaption { padding-inline: calc(var(--page-gutter) - 16px); }
  .fig-hub svg.narrow { min-width: 336px; }
  .fig-net svg.narrow { min-width: 343px; }
}
.fig svg text { fill: var(--ink); font-family: system-ui, sans-serif; font-weight: 500; font-size: 19px; } /* ramp-exception: SVG viewBox units, scaled by the drawing */
.fig-hub svg text.small { fill: var(--muted); font-weight: 400; font-size: 17px; } /* ramp-exception: SVG viewBox units, scaled by the drawing */
.fig-hub .n { font-weight: 600; }
.fig-hub .edge { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.fig-hub .revise { stroke-dasharray: 2 6; }  /* firmer dots at stroke 2 (graphics, 19 Oct) */
.fig-hub .arrowhead, .fig-hub .you { fill: var(--ink); }
.fig-hub .ai, .fig-hub .doc { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.fig-hub .tick { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig-net svg text.head { font-size: 18px; } /* ramp-exception: SVG viewBox units, scaled by the drawing */
.fig-net svg.narrow text.head { font-size: 16px; } /* ramp-exception: SVG viewBox units, scaled by the drawing */
.fig-net svg text.val { fill: var(--ink); font-size: 15px; font-weight: 600; text-anchor: middle; } /* ramp-exception: SVG viewBox units, scaled by the drawing */
.fig-net svg text.val.on { fill: var(--paper); }
.fig-net svg tspan.badge { font-weight: 600; }
.fig-net svg text.note, .fig-net svg text.pct { fill: var(--muted); font-weight: 400; font-size: 17px; } /* ramp-exception: SVG viewBox units, scaled by the drawing */
.fig-net svg text.note { paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }
.fig-net .node { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.fig-net .node.on, .fig-net .bar { fill: var(--ink); }
.fig-net .pulse { fill: var(--ink); stroke: none; stroke-dasharray: none; }  /* overrides the hero's .pulse; shown in place, no motion */
.fig-net .pulse.neg, .fig-net .key circle.k-hollow { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.fig-net .link { stroke: var(--muted); stroke-opacity: .8; stroke-linecap: round; }
.fig-net .neg, .fig-net .k-neg { stroke-dasharray: 5 6; }
.fig-net .key { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0 0 14px; }
.fig-net .key li { display: flex; align-items: center; gap: 6px; }
.fig-net .key line { stroke: var(--muted); stroke-linecap: round; }
.fig-net .key circle { stroke: var(--ink); stroke-width: 2; fill: var(--paper); }
.fig-net .key circle.k-pulse { fill: var(--ink); stroke: none; }
.fig-net .stages { padding-left: 1.4em; margin: 0 0 10px; }
.fig-net .stages li { margin-bottom: 6px; }
@media (forced-colors: active) {
  .fig svg text, .fig-hub .arrowhead, .fig-hub .you, .fig-net .node.on, .fig-net .pulse, .fig-net .bar, .fig-net .key circle.k-pulse { fill: CanvasText; forced-color-adjust: none; }
  .fig-hub .edge, .fig-hub .ai, .fig-hub .doc, .fig-net .node, .fig-net .link, .fig-net .key line, .fig-net .key circle, .fig-net .pulse.neg { stroke: CanvasText; }
  .fig-hub .tick { stroke: Canvas; } .fig-net svg text.val.on, .fig-net .node, .fig-net .pulse.neg, .fig-net .key circle { fill: Canvas; } .fig-net svg text.note { stroke: Canvas; }
}

/* "How it works" label in a service section (owner, 15 Nov: adapt ours) */
.steps-heading { font-size: var(--type-subheading); font-weight: 600; line-height: 1.4; margin: 1.75rem 0 0.5rem; }