/* Maisonblock Growth Lab · design system "Drafted blocks" (growth-lab/DESIGN-SYSTEM.md).
   Sits beside the store's "Atelier White" system: same fonts, same ink and white, same red dot.
   Adds a warm lacquer dark for the hero and bands, and four pillar marks (red, brass, sage, bone).
   Every class is prefixed gl- so nothing here can reach the store's own pages. */
:root {
  /* surfaces */
  --gl-lacquer: #16130F; --gl-lacquer-2: #1F1B16; --gl-lacquer-3: #2B261F;
  --gl-white: #FFFFFF; --gl-mist: #F7F7F7; --gl-mist-2: #EFEEEA;
  /* text */
  --gl-ink: #111111; --gl-ink-2: #2A2A2A; --gl-muted: #616161;
  --gl-bone: #F3EFE8; --gl-ash: #B9B2A6; --gl-ash-2: #8E877B;
  /* lines */
  --gl-line: #E8E8E8; --gl-line-2: #D4D4D4;
  --gl-dline: rgba(243, 239, 232, .12); --gl-dline-2: rgba(243, 239, 232, .22);
  /* brand + pillar marks */
  --gl-red: #B4472A; --gl-error: #A63D21;
  /* type */
  --gl-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gl-serif: "Instrument Serif", "Times New Roman", serif;
  --gl-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* space */
  --gl-wrap: 1280px; --gl-gutter: 32px; --gl-head-h: 72px;
  --gl-sec: clamp(72px, 9vw, 120px);
  /* shape */
  --gl-r-xs: 4px; --gl-r-sm: 8px; --gl-r: 12px; --gl-r-lg: 20px;
  --gl-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 10px 28px -14px rgba(17, 17, 17, .16);
  --gl-shadow-lift: 0 2px 4px rgba(17, 17, 17, .04), 0 28px 56px -24px rgba(17, 17, 17, .26);
  --gl-shadow-dark: 0 1px 0 rgba(243, 239, 232, .05) inset, 0 30px 60px -30px rgba(0, 0, 0, .75);
  /* motion */
  --gl-ease: cubic-bezier(.2, .7, .2, 1); --gl-ease-out: cubic-bezier(.16, 1, .3, 1);
  --gl-fast: 150ms; --gl-t: 220ms; --gl-slow: 420ms; --gl-reveal: 520ms;
  color-scheme: light;
}
/* Pillar colour for the surface it sits on: --pc. Light first, dark contexts override. */
[data-pillar=acquire] { --pc: #B4472A; --pc-soft: rgba(180, 71, 42, .1); }
[data-pillar=retain] { --pc: #8A6A33; --pc-soft: rgba(168, 131, 75, .14); }
[data-pillar=discover] { --pc: #4F5B47; --pc-soft: rgba(79, 91, 71, .12); }
[data-pillar=convert] { --pc: #111111; --pc-soft: rgba(17, 17, 17, .07); }
[data-pillar=plan] { --pc: #616161; --pc-soft: rgba(17, 17, 17, .06); }
.gl-dark [data-pillar=acquire], .gl-dark[data-pillar=acquire] { --pc: #D9714F; --pc-soft: rgba(217, 113, 79, .16); }
.gl-dark [data-pillar=retain], .gl-dark[data-pillar=retain] { --pc: #C29A5B; --pc-soft: rgba(194, 154, 91, .16); }
.gl-dark [data-pillar=discover], .gl-dark[data-pillar=discover] { --pc: #8FA287; --pc-soft: rgba(143, 162, 135, .16); }
.gl-dark [data-pillar=convert], .gl-dark[data-pillar=convert] { --pc: #F3EFE8; --pc-soft: rgba(243, 239, 232, .1); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--gl-head-h) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.gl-body { margin: 0; background: var(--gl-white); color: var(--gl-ink); font: 400 16px/1.6 var(--gl-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body.gl-lock { overflow: hidden; }
/* Base element rules carry zero specificity (:where) so component classes always win. */
:where(.gl-body) img, :where(.gl-body) svg { display: block; max-width: 100%; }
:where(.gl-body) a { color: inherit; }
:where(.gl-body) button, :where(.gl-body) input, :where(.gl-body) select, :where(.gl-body) textarea { font: inherit; color: inherit; }
:where(.gl-body) :focus-visible { outline: 2px solid var(--gl-ink); outline-offset: 3px; }
:where(.gl-dark, .gl-head[data-tone=dark]:not(.is-solid)) :focus-visible { outline-color: var(--gl-bone); }
:where(.gl-body) ::selection { background: var(--gl-ink); color: #fff; }
.gl-body [hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.gl-skip { position: absolute; left: 16px; top: -64px; z-index: 200; background: var(--gl-ink); color: #fff; padding: 10px 14px; border-radius: var(--gl-r-sm); text-decoration: none; }
.gl-skip:focus { top: 12px; }
.gl-wrap { width: 100%; max-width: var(--gl-wrap); margin: 0 auto; padding: 0 var(--gl-gutter); }
.gl-i { width: 16px; height: 16px; flex: none; }
.gl-center { text-align: center; margin: 40px 0 0; }
.gl-anchor { position: relative; top: 0; height: 0; }
.gl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--pc, var(--gl-red)); flex: none; }
.gl-dot--brand { --pc: var(--gl-red); border-radius: 50%; }
.gl-dark .gl-dot--brand { --pc: #D9714F; }

/* ---------- type ---------- */
.gl-display { font: 500 clamp(40px, 5.3vw, 78px)/1.0 var(--gl-sans); letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.gl-display em { font-family: var(--gl-serif); font-style: italic; font-weight: 400; letter-spacing: -.012em; font-size: 1.08em; line-height: .9; }
.gl-display--hero { font-size: clamp(38px, 5vw, 74px); }
.gl-display--hero .gl-line { display: block; }
.gl-display--page { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.03; max-width: 18ch; }
.gl-h1 { font: 500 clamp(36px, 4.4vw, 60px)/1.04 var(--gl-sans); letter-spacing: -.04em; margin: 0; text-wrap: balance; }
.gl-h2 { font: 500 clamp(30px, 3.5vw, 50px)/1.06 var(--gl-sans); letter-spacing: -.038em; margin: 0; text-wrap: balance; }
.gl-h2--display { font-size: clamp(34px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.042em; }
.gl-h3 { font: 500 clamp(21px, 1.9vw, 26px)/1.2 var(--gl-sans); letter-spacing: -.022em; margin: 0; text-wrap: balance; }
.gl-h4 { font: 500 18.5px/1.3 var(--gl-sans); letter-spacing: -.014em; margin: 0; }
.gl-lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--gl-muted); margin: 18px 0 0; max-width: 60ch; text-wrap: pretty; }
.gl-dark .gl-lede { color: var(--gl-ash); }
.gl-shead { max-width: 780px; margin: 0 0 clamp(36px, 5vw, 64px); }
.gl-shead--center { margin-left: auto; margin-right: auto; text-align: center; }
.gl-shead--center .gl-lede { margin-left: auto; margin-right: auto; }
.gl-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; font: 500 13px/1.3 var(--gl-mono); letter-spacing: .02em; color: var(--gl-ash); }
.gl-eyebrow-h { font: 500 13px/1.3 var(--gl-mono); letter-spacing: .02em; color: var(--gl-muted); margin: 0 0 14px; }
.gl-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: currentColor; }
.gl-link:hover { text-decoration-thickness: 2px; }
.gl-tlink { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.3 var(--gl-sans); text-decoration: none; color: inherit; padding: 6px 0; border-bottom: 1px solid currentColor; }
.gl-tlink .gl-i { transition: transform var(--gl-fast) var(--gl-ease); }
.gl-tlink:hover .gl-i { transform: translateX(3px); }

/* ---------- buttons ---------- */
.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font: 500 15px/1.15 var(--gl-sans); letter-spacing: -.005em; text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap; transition: background-color var(--gl-fast) var(--gl-ease), color var(--gl-fast) var(--gl-ease), border-color var(--gl-fast) var(--gl-ease), transform var(--gl-fast) var(--gl-ease); -webkit-tap-highlight-color: transparent; }
.gl-btn:active { transform: scale(.98); }
.gl-btn--primary { background: var(--gl-ink); color: #fff; border-color: var(--gl-ink); }
.gl-btn--primary:hover { background: var(--gl-ink-2); }
.gl-btn--ghost { background: transparent; color: var(--gl-ink); border-color: var(--gl-line-2); }
.gl-btn--ghost:hover { background: var(--gl-mist); border-color: var(--gl-ink); }
.gl-btn--light { background: var(--gl-bone); color: var(--gl-lacquer); border-color: var(--gl-bone); }
.gl-btn--light:hover { background: #fff; border-color: #fff; }
.gl-btn--ghost-dark { background: transparent; color: var(--gl-bone); border-color: rgba(243, 239, 232, .34); }
.gl-btn--ghost-dark:hover { background: rgba(243, 239, 232, .07); border-color: var(--gl-bone); }
.gl-btn--block { width: 100%; }
.gl-btn[disabled], .gl-btn[aria-disabled=true] { opacity: .6; cursor: progress; transform: none; }

/* ---------- header ---------- */
.gl-head { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: var(--gl-head-h); color: var(--gl-ink); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--gl-line); transition: background-color var(--gl-t) var(--gl-ease), color var(--gl-t) var(--gl-ease), border-color var(--gl-t) var(--gl-ease); }
.gl-head[data-tone=dark]:not(.is-solid) { color: var(--gl-bone); background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.gl-head__row { display: flex; align-items: center; gap: 28px; height: 100%; }
.gl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
.gl-mark { width: 27px; height: 27px; }
.gl-brand__word { font: 500 19px/1 var(--gl-sans); letter-spacing: -.035em; }
.gl-brand__word em { font-style: normal; opacity: .62; }
.gl-brand__lab { font: 500 12.5px/1 var(--gl-mono); letter-spacing: .01em; padding: 6px 9px 5px; border: 1px solid currentColor; border-radius: 999px; opacity: .9; white-space: nowrap; }
.gl-nav { margin-right: auto; }
.gl-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.gl-nav__item { position: relative; }
.gl-nav__link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; background: none; border-radius: 999px; font: 400 15px/1 var(--gl-sans); text-decoration: none; color: inherit; opacity: .78; cursor: pointer; transition: opacity var(--gl-fast), background-color var(--gl-fast); }
.gl-nav__link:hover, .gl-nav__link[aria-current], .gl-nav__btn[data-active], .gl-nav__btn[aria-expanded=true] { opacity: 1; }
.gl-nav__link[aria-current], .gl-nav__btn[data-active] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1.5px; }
.gl-nav__btn .gl-i { width: 14px; height: 14px; transition: transform var(--gl-t) var(--gl-ease); }
.gl-nav__btn[aria-expanded=true] .gl-i { transform: rotate(180deg); }
.gl-head__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.gl-head__shop { font-size: 14.5px; text-decoration: none; opacity: .78; white-space: nowrap; }
.gl-head__shop:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.gl-btn--head { min-height: 42px; padding: 0 18px; font-size: 14.5px; background: var(--gl-ink); color: #fff; border-color: var(--gl-ink); }
.gl-btn--head:hover { background: var(--gl-ink-2); }
.gl-head[data-tone=dark]:not(.is-solid) .gl-btn--head { background: var(--gl-bone); color: var(--gl-lacquer); border-color: var(--gl-bone); }
.gl-head[data-tone=dark]:not(.is-solid) .gl-btn--head:hover { background: #fff; }
.gl-btn--head[aria-current] { box-shadow: 0 0 0 2px currentColor; }

/* services menu */
.gl-dd { position: absolute; top: calc(100% + 10px); left: -12px; width: min(620px, calc(100vw - 48px)); z-index: 5; color: var(--gl-ink); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--gl-t) var(--gl-ease), transform var(--gl-t) var(--gl-ease), visibility 0s linear var(--gl-t); }
.gl-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.gl-dd__inner { background: #fff; border: 1px solid var(--gl-line); border-radius: 16px; box-shadow: var(--gl-shadow-lift); padding: 10px; }
.gl-nav__item--dd.is-open .gl-dd, html:not(.js) .gl-nav__item--dd:hover .gl-dd, html:not(.js) .gl-nav__item--dd:focus-within .gl-dd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.gl-dd__all { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 10px; text-decoration: none; font-weight: 500; }
.gl-dd__all small { font-weight: 400; color: var(--gl-muted); font-size: 13.5px; }
.gl-dd__all:hover, .gl-dd__link:hover { background: var(--gl-mist); }
.gl-dd__list { list-style: none; margin: 4px 0 0; padding: 4px 0 0; border-top: 1px solid var(--gl-line); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.gl-dd__link { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; text-decoration: none; height: 100%; }
.gl-dd__verb { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1.2 var(--gl-mono); color: var(--gl-muted); }
.gl-dd__name { font-weight: 500; font-size: 16px; letter-spacing: -.01em; }
.gl-dd__link small { color: var(--gl-muted); font-size: 13.5px; line-height: 1.45; }
.gl-dd__link[aria-current] .gl-dd__name, .gl-dd__all[aria-current] span { text-decoration: underline; text-underline-offset: 4px; }

/* menu button + mobile panel */
.gl-menu-btn { display: none; width: 44px; height: 44px; padding: 0 13px; border: 1px solid currentColor; border-radius: 999px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; color: inherit; }
.gl-menu-btn i { display: block; height: 1.5px; background: currentColor; transition: transform var(--gl-t) var(--gl-ease); }
.gl-menu-btn[aria-expanded=true] i:first-of-type { transform: translateY(3.25px) rotate(45deg); }
.gl-menu-btn[aria-expanded=true] i:last-of-type { transform: translateY(-3.25px) rotate(-45deg); }
.gl-mnav { position: fixed; top: var(--gl-head-h); left: 0; right: 0; bottom: 0; background: #fff; color: var(--gl-ink); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--gl-line); }
.gl-mnav__inner { display: grid; align-content: start; padding-top: 18px; padding-bottom: 40px; }
.gl-mnav__label { margin: 0 0 6px; font: 500 12.5px/1.3 var(--gl-mono); color: var(--gl-muted); }
.gl-mnav__all, .gl-mnav__link { display: block; padding: 15px 0; border-bottom: 1px solid var(--gl-line); text-decoration: none; font: 500 24px/1.15 var(--gl-sans); letter-spacing: -.03em; }
.gl-mnav__svc { list-style: none; margin: 0; padding: 6px 0 10px 4px; border-bottom: 1px solid var(--gl-line); display: grid; gap: 2px; }
.gl-mnav__svc a { display: flex; align-items: center; gap: 12px; padding: 11px 0; text-decoration: none; font-size: 18px; }
.gl-mnav__link--quiet { font-size: 18px; font-weight: 400; color: var(--gl-muted); }
.gl-mnav [aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.gl-mnav .gl-btn { margin-top: 26px; min-height: 52px; font-size: 16px; }
.gl-mnav__in { animation: gl-menu-in var(--gl-t) var(--gl-ease-out); }
@keyframes gl-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.gl-head.is-open { color: var(--gl-ink) !important; background: #fff !important; border-bottom-color: var(--gl-line) !important; }
.gl-head.is-open .gl-btn--head { background: var(--gl-ink) !important; color: #fff !important; border-color: var(--gl-ink) !important; }

/* ---------- hero (dark) ---------- */
.gl-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--gl-lacquer); color: var(--gl-bone); padding: calc(var(--gl-head-h) + clamp(44px, 7vw, 100px)) 0 clamp(72px, 8.5vw, 120px); }
.gl-hero__mat { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 52% at 76% 46%, rgba(180, 71, 42, .13), transparent 72%),
    radial-gradient(40% 46% at 18% 100%, rgba(168, 131, 75, .08), transparent 70%),
    linear-gradient(to right, rgba(243, 239, 232, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, rgba(243, 239, 232, .045) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.gl-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gl-dline); }
.gl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.gl-hero__grid--page { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; }
.gl-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.gl-hero__copy { min-width: 0; }
.gl-hero__lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--gl-ash); margin: 26px 0 0; max-width: 34em; text-wrap: pretty; }
.gl-hero__sub { font-size: 15.5px; color: var(--gl-ash-2); margin: 12px 0 0; }
.gl-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.gl-hero__origin { margin: 28px 0 0; font-size: 14.5px; color: var(--gl-ash-2); }
.gl-hero__origin a { color: var(--gl-bone); text-underline-offset: 4px; }
.gl-hero--page .gl-hero__lede { max-width: 38em; }
.gl-hero--brief { padding-bottom: clamp(56px, 7vw, 96px); }

/* breadcrumb */
.gl-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; padding: 0; font-size: 14px; color: var(--gl-ash); }
.gl-crumbs a { color: inherit; text-decoration: none; }
.gl-crumbs a:hover { color: var(--gl-bone); text-decoration: underline; text-underline-offset: 3px; }
.gl-crumbs [aria-current] { color: var(--gl-bone); }
.gl-crumbs__sep { margin: 0 6px; opacity: .5; }
.gl-pill { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 7px 13px 7px 11px; border: 1px solid var(--gl-line); border-radius: 999px; font: 500 13.5px/1.2 var(--gl-sans); color: var(--gl-ink-2); background: #fff; }
.gl-pill span { opacity: .45; }
.gl-pill--dark, .gl-dark .gl-pill { background: rgba(243, 239, 232, .05); border-color: var(--gl-dline-2); color: var(--gl-bone); }

/* ---------- hero board: four drafted blocks around one plan ---------- */
.gl-board { position: relative; margin: 0; padding: 22px; }
.gl-board__mat { position: absolute; inset: 0; border: 1px dashed var(--gl-dline-2); border-radius: 24px; pointer-events: none; }
.gl-board__mat .reg { position: absolute; width: 14px; height: 14px; }
.gl-board__mat .reg::before, .gl-board__mat .reg::after { content: ""; position: absolute; background: var(--gl-ash-2); }
.gl-board__mat .reg::before { left: 6.5px; top: 0; width: 1px; height: 14px; }
.gl-board__mat .reg::after { top: 6.5px; left: 0; height: 1px; width: 14px; }
.gl-board__mat .reg--tl { top: -7px; left: -7px; } .gl-board__mat .reg--tr { top: -7px; right: -7px; }
.gl-board__mat .reg--bl { bottom: -7px; left: -7px; } .gl-board__mat .reg--br { bottom: -7px; right: -7px; }
.gl-board__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 3.6vw, 52px); }
.gl-board__thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.gl-thread { fill: none; stroke: var(--gl-ash-2); stroke-width: 1.5; stroke-dasharray: 5 5; stroke-linecap: round; opacity: .7; transition: stroke var(--gl-t), opacity var(--gl-t); }
.gl-board[data-active=acquire] .gl-thread[data-pillar=acquire],
.gl-board[data-active=convert] .gl-thread[data-pillar=convert],
.gl-board[data-active=retain] .gl-thread[data-pillar=retain],
.gl-board[data-active=discover] .gl-thread[data-pillar=discover] { stroke: var(--pc); opacity: 1; stroke-width: 2; }
.gl-thread[data-pillar] { --pc: var(--gl-bone); }
.gl-thread[data-pillar=acquire] { --pc: #D9714F; } .gl-thread[data-pillar=retain] { --pc: #C29A5B; } .gl-thread[data-pillar=discover] { --pc: #8FA287; } .gl-thread[data-pillar=convert] { --pc: #F3EFE8; }
.gl-mod { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-height: 186px; padding: 17px 17px 15px; border-radius: 14px; color: var(--gl-bone); text-decoration: none; background: linear-gradient(180deg, #241F19 0%, #1B1713 100%); border: 1px solid var(--gl-dline); box-shadow: var(--gl-shadow-dark); transition: transform var(--gl-slow) var(--gl-ease-out), border-color var(--gl-t) var(--gl-ease), box-shadow var(--gl-t) var(--gl-ease); }
.gl-mod::before { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(243, 239, 232, .1); border-radius: 9px; pointer-events: none; }
.gl-mod::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--gl-lacquer); border: 1.5px solid var(--gl-ash-2); transition: border-color var(--gl-t), background-color var(--gl-t); }
.gl-mod:nth-child(2)::after { right: -5px; bottom: -5px; } .gl-mod:nth-child(3)::after { left: -5px; bottom: -5px; }
.gl-mod:nth-child(4)::after { right: -5px; top: -5px; } .gl-mod:nth-child(5)::after { left: -5px; top: -5px; }
.gl-mod__verb { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.2 var(--gl-mono); color: var(--gl-ash); }
.gl-mod__name { font: 500 18px/1.2 var(--gl-sans); letter-spacing: -.02em; }
.gl-mod:hover, .gl-mod.is-active { border-color: color-mix(in srgb, var(--pc) 55%, transparent); transform: translateY(-4px); box-shadow: var(--gl-shadow-dark), 0 0 0 1px color-mix(in srgb, var(--pc) 22%, transparent); }
.gl-mod.is-active::after, .gl-mod:hover::after { border-color: var(--pc); background: var(--pc); }
.gl-hub { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 9px 15px; border-radius: 999px; background: var(--gl-bone); color: var(--gl-lacquer); font: 600 13px/1 var(--gl-sans); letter-spacing: -.005em; white-space: nowrap; box-shadow: 0 0 0 6px var(--gl-lacquer), 0 0 0 7px var(--gl-dline-2), 0 18px 36px -14px rgba(0, 0, 0, .8); }
.gl-board__cap { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; min-height: 40px; }
.gl-board__line { display: inline-flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--gl-bone); }
.gl-board__line .gl-dot { margin-top: .42em; transition: background-color 320ms var(--gl-ease); }
/* All captions share one grid cell, so the space for the longest one is always reserved. */
.gl-board__caps { display: grid; }
.gl-board__text { grid-area: 1 / 1; opacity: 0; transition: opacity 320ms var(--gl-ease); }
.gl-board__text.is-on { opacity: 1; }
.gl-board__toggle { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--gl-dline-2); border-radius: 999px; background: transparent; color: var(--gl-ash); font: 500 13px/1 var(--gl-sans); cursor: pointer; transition: color var(--gl-fast), border-color var(--gl-fast); }
.gl-board__toggle:hover { color: var(--gl-bone); border-color: var(--gl-ash); }
.gl-board__toggle .gl-i { width: 13px; height: 13px; }
.gl-board__ticon { display: inline-flex; }
.gl-board__toggle[aria-pressed=false] .gl-board__ticon--play, .gl-board__toggle[aria-pressed=true] .gl-board__ticon--pause { display: none; }
/* Four short threads, one per service: pick one to read it; the active one fills while the highlights run. */
.gl-segs { position: relative; display: flex; flex: none; margin: 0 0 0 -6px; padding: 0; border: 0; min-width: 0; }
.gl-segs__in, .gl-tabs__in, .gl-plan__in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.gl-seg { display: grid; place-items: center; width: 30px; height: 40px; border-radius: 8px; cursor: pointer; }
.gl-seg i { position: relative; display: block; width: 22px; height: 3px; border-radius: 2px; overflow: hidden; background: var(--gl-dline-2); transition: background-color var(--gl-fast) var(--gl-ease), height var(--gl-fast) var(--gl-ease); }
.gl-seg i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--pc); transform: scaleX(0); transform-origin: left center; }
.gl-seg:hover i { background: rgba(243, 239, 232, .4); height: 4px; }
.gl-segs__in:checked + .gl-seg i::after { transform: none; }
.gl-segs.is-filling .gl-segs__in:checked + .gl-seg i::after { animation: gl-fill 4.2s linear both; }
.gl-segs__in:focus-visible + .gl-seg { outline: 2px solid var(--gl-bone); outline-offset: -3px; }
@keyframes gl-fill { from { transform: scaleX(0); } to { transform: none; } }
.js .gl-board__line > .gl-dot { display: none; }

/* module drawings */
.gl-m-ads, .gl-m-page, .gl-m-mail, .gl-m-seo { margin-top: auto; padding-top: 14px; }
.gl-m-ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.gl-m-ads__card { position: relative; display: grid; gap: 4px; align-content: start; padding: 5px; aspect-ratio: 4 / 4.4; border-radius: 6px; background: rgba(243, 239, 232, .05); border: 1px solid rgba(243, 239, 232, .1); transition: opacity var(--gl-t), border-color var(--gl-t); }
.gl-m-ads__card b { display: block; height: 52%; border-radius: 3px; background: rgba(243, 239, 232, .14); }
.gl-m-ads__card s { display: block; height: 3px; border-radius: 2px; background: rgba(243, 239, 232, .2); width: 80%; text-decoration: none; }
.gl-m-ads__card s + s { width: 50%; }
.gl-m-ads__card u { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--gl-ash-2); color: var(--gl-lacquer); transition: background-color var(--gl-t); }
.gl-m-ads__card u .gl-i { width: 11px; height: 11px; }
.gl-mod.is-active .gl-m-ads__card:not(.is-kept), .gl-mod:hover .gl-m-ads__card:not(.is-kept) { opacity: .45; }
.gl-mod.is-active .gl-m-ads__card.is-kept, .gl-mod:hover .gl-m-ads__card.is-kept { border-color: var(--pc); }
.gl-mod.is-active .gl-m-ads__card u, .gl-mod:hover .gl-m-ads__card u { background: var(--pc); }
.gl-m-page { display: grid; grid-template-columns: 44% 1fr; gap: 9px; align-items: start; }
.gl-m-page__img { display: block; aspect-ratio: 1; border-radius: 6px; background: linear-gradient(160deg, rgba(243, 239, 232, .2), rgba(243, 239, 232, .06)); }
.gl-m-page__info { display: grid; gap: 6px; padding-top: 2px; }
.gl-m-page__info s { display: block; height: 4px; border-radius: 2px; background: rgba(243, 239, 232, .24); text-decoration: none; }
.gl-m-page__info s.short { width: 45%; }
.gl-m-page__chips { display: flex; gap: 4px; }
.gl-m-page__chips i { width: 13px; height: 11px; border-radius: 3px; border: 1px solid rgba(243, 239, 232, .28); }
.gl-m-page__chips i.on { background: rgba(243, 239, 232, .45); }
.gl-m-page__info b { display: block; height: 13px; border-radius: 4px; background: rgba(243, 239, 232, .55); transition: background-color var(--gl-t); }
.gl-mod.is-active .gl-m-page__info b, .gl-mod:hover .gl-m-page__info b { background: var(--pc); }
.gl-m-mail { display: grid; gap: 6px; position: relative; padding-left: 2px; }
.gl-m-mail i { display: flex; align-items: center; gap: 8px; }
.gl-m-mail b { width: 15px; height: 11px; border-radius: 2px; border: 1.5px solid rgba(243, 239, 232, .32); flex: none; transition: border-color var(--gl-t); }
.gl-m-mail s { height: 3px; border-radius: 2px; background: rgba(243, 239, 232, .18); flex: 1; max-width: 70%; text-decoration: none; }
.gl-m-mail i:nth-child(2) s { max-width: 52%; } .gl-m-mail i:nth-child(4) s { max-width: 40%; }
.gl-mod.is-active .gl-m-mail i.on b, .gl-mod:hover .gl-m-mail i.on b { border-color: var(--pc); }
.gl-m-seo { display: grid; gap: 6px; }
.gl-m-seo__bar { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(243, 239, 232, .22); color: var(--gl-ash); }
.gl-m-seo__bar .gl-i { width: 11px; height: 11px; }
.gl-m-seo__bar s { height: 3px; width: 55%; border-radius: 2px; background: rgba(243, 239, 232, .22); text-decoration: none; }
.gl-m-seo i { display: flex; align-items: center; gap: 7px; padding-left: 2px; }
.gl-m-seo i b { width: 7px; height: 7px; border-radius: 2px; background: rgba(243, 239, 232, .28); flex: none; transition: background-color var(--gl-t); }
.gl-m-seo i s { height: 3px; border-radius: 2px; background: rgba(243, 239, 232, .18); width: 70%; text-decoration: none; transition: background-color var(--gl-t); }
.gl-m-seo i:nth-child(3) s { width: 54%; } .gl-m-seo i:nth-child(4) s { width: 62%; }
.gl-mod.is-active .gl-m-seo i.on b, .gl-mod:hover .gl-m-seo i.on b { background: var(--pc); }
.gl-mod.is-active .gl-m-seo i.on s, .gl-mod:hover .gl-m-seo i.on s { background: color-mix(in srgb, var(--pc) 70%, transparent); }

/* entrance: blocks set into place, then the thread and the hub appear (JS adds .is-set) */
@media (prefers-reduced-motion: no-preference) {
  .js .gl-board:not(.is-set) .gl-mod { opacity: 0; transform: translateY(14px) scale(.985); }
  .js .gl-board:not(.is-set) .gl-thread, .js .gl-board:not(.is-set) .gl-hub, .js .gl-board:not(.is-set) .gl-board__cap { opacity: 0; }
  .js .gl-board .gl-mod { transition: opacity var(--gl-slow) var(--gl-ease-out) calc(var(--i) * 110ms + 120ms), transform var(--gl-slow) var(--gl-ease-out) calc(var(--i) * 110ms + 120ms), border-color var(--gl-t) var(--gl-ease), box-shadow var(--gl-t) var(--gl-ease); }
  .js .gl-board.is-ready .gl-mod { transition: transform var(--gl-slow) var(--gl-ease-out), border-color var(--gl-t) var(--gl-ease), box-shadow var(--gl-t) var(--gl-ease); }
  .js .gl-board .gl-hub { transition: opacity 360ms var(--gl-ease-out) 640ms; }
  .js .gl-board .gl-thread { transition: opacity 360ms var(--gl-ease-out) 560ms, stroke var(--gl-t); }
  .js .gl-board .gl-board__cap { transition: opacity 360ms var(--gl-ease-out) 760ms; }
  .gl-board.is-moving[data-active=acquire] .gl-thread[data-pillar=acquire],
  .gl-board.is-moving[data-active=convert] .gl-thread[data-pillar=convert],
  .gl-board.is-moving[data-active=retain] .gl-thread[data-pillar=retain],
  .gl-board.is-moving[data-active=discover] .gl-thread[data-pillar=discover] { animation: gl-stitch 1.2s linear infinite; }
}
@keyframes gl-stitch { to { stroke-dashoffset: -20; } }

/* ---------- sections ---------- */
.gl-sec { padding: var(--gl-sec) 0; position: relative; }
.gl-sec--mist { background: var(--gl-mist); }
.gl-sec--tight-top { padding-top: clamp(24px, 3vw, 40px); }
.gl-dark { background: var(--gl-lacquer); color: var(--gl-bone); }
.gl-split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.gl-split--wide { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.gl-split__aside .gl-shead { margin-bottom: 20px; }
.gl-split__more { color: var(--gl-muted); font-size: 15.5px; margin: 8px 0 0; }
@media (min-width: 1000px) { .gl-split__aside { position: sticky; top: calc(var(--gl-head-h) + 32px); } }

/* connected system */
.gl-sec--system { padding-bottom: calc(var(--gl-sec) - 8px); }
.gl-flow { position: relative; }
.gl-flow__list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 34px; max-width: 560px; position: relative; z-index: 1; }
.gl-flow__node { position: relative; padding: 24px 24px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--gl-line); box-shadow: var(--gl-shadow); transition: border-color var(--gl-t) var(--gl-ease), box-shadow var(--gl-t) var(--gl-ease), transform var(--gl-t) var(--gl-ease); }
.gl-flow__node::before { content: ""; position: absolute; inset: 6px; border: 1px dashed var(--gl-line); border-radius: 11px; pointer-events: none; }
.gl-flow__node.is-hl { border-color: var(--pc); box-shadow: var(--gl-shadow-lift); }
.gl-flow__node[data-pillar=convert] { background: var(--gl-lacquer); color: var(--gl-bone); border-color: var(--gl-lacquer); --pc: #F3EFE8; }
.gl-flow__node[data-pillar=convert]::before { border-color: var(--gl-dline); }
.gl-flow__node[data-pillar=convert] .gl-flow__verb { color: var(--gl-ash); }
.gl-flow__node[data-pillar=convert] p { color: var(--gl-ash); }
.gl-flow__verb { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.2 var(--gl-mono); color: var(--gl-muted); }
.gl-flow__name { font: 500 22px/1.2 var(--gl-sans); letter-spacing: -.025em; margin: 10px 0 8px; }
.gl-flow__node p { margin: 0 0 14px; color: var(--gl-muted); font-size: 15.5px; line-height: 1.55; }
.gl-flow__node .gl-tlink { font-size: 14.5px; }
.gl-flow__wires { display: none; }
.gl-flow__loop { position: relative; margin: 26px auto 0; max-width: 560px; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--gl-ink-2); }
.gl-flow__loop span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px dashed #8A6A33; color: #8A6A33; font-size: 16px; flex: none; }
/* phones and tablets: a vertical sequence with stitched connectors */
@media (max-width: 999.98px) {
  .gl-flow__node:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -35px; height: 34px; border-left: 1.5px dashed var(--gl-line-2); }
  .gl-flow__node[data-pillar=acquire]::after { display: none; }
  .gl-flow__list { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .gl-flow__node[data-pillar=convert], .gl-flow__node[data-pillar=retain] { grid-column: 1 / -1; }
  .gl-flow__node[data-pillar=acquire]::after, .gl-flow__node[data-pillar=discover]::after { display: block; left: 50%; }
}
@media (max-width: 639.98px) {
  .gl-flow__list { grid-template-columns: 1fr; }
  .gl-flow__node[data-pillar=acquire]::after { display: block; }
}
@media (min-width: 1000px) {
  .gl-flow { padding-bottom: 92px; }
  .gl-flow__list { max-width: none; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1.12fr) 76px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 22px; gap: 22px 0; align-items: center; }
  .gl-flow__node[data-pillar=acquire] { grid-column: 1; grid-row: 1; }
  .gl-flow__node[data-pillar=discover] { grid-column: 1; grid-row: 2; }
  .gl-flow__node[data-pillar=convert] { grid-column: 3; grid-row: 1 / span 2; padding: 34px 32px 30px; }
  .gl-flow__node[data-pillar=retain] { grid-column: 5; grid-row: 1 / span 2; }
  .gl-flow__node[data-pillar=convert] .gl-flow__name { font-size: 28px; }
  .gl-flow__wires { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
  .gl-wire { fill: none; stroke: var(--gl-line-2); stroke-width: 1.5; stroke-dasharray: 5 5; transition: stroke var(--gl-t); }
  .gl-wire[data-pillar=acquire] { --pc: #B4472A; } .gl-wire[data-pillar=discover] { --pc: #4F5B47; } .gl-wire[data-pillar=convert] { --pc: #111; } .gl-wire[data-pillar=retain] { --pc: #8A6A33; }
  .gl-wire.is-hl { stroke: var(--pc); stroke-width: 2; }
  .gl-wire--loop { stroke: #8A6A33; opacity: .75; }
  .gl-flow__loop { position: absolute; left: 68.4%; bottom: 0; transform: translate(-50%, 50%); margin: 0; max-width: none; padding: 0 12px; background: #fff; white-space: nowrap; }
}
.gl-system__note { max-width: 680px; margin: 28px auto 0; text-align: center; color: var(--gl-muted); font-size: 16.5px; text-wrap: pretty; }

/* "Follow one customer": the parts light up in turn and their threads are stitched in. */
.gl-sew { fill: none; stroke: var(--pc); stroke-width: 2.25; stroke-linecap: round; visibility: hidden; }
.gl-sew[data-pillar=acquire], .gl-needle[data-pillar=acquire] { --pc: #B4472A; } .gl-sew[data-pillar=discover], .gl-needle[data-pillar=discover] { --pc: #4F5B47; }
.gl-sew[data-pillar=convert], .gl-needle[data-pillar=convert] { --pc: #111; } .gl-sew[data-pillar=retain], .gl-needle[data-pillar=retain] { --pc: #8A6A33; }
.gl-sew.is-sewn { visibility: visible; }
.gl-needle { fill: var(--pc); stroke: #fff; stroke-width: 2; }
.gl-flow__node { transition: border-color var(--gl-t) var(--gl-ease), box-shadow var(--gl-t) var(--gl-ease), transform var(--gl-t) var(--gl-ease), opacity var(--gl-t) var(--gl-ease); }
/* parts not in the current step lose their lift; the lit ones rise and take their colour (text keeps full contrast) */
.gl-sys.is-telling .gl-flow__node:not(.is-lit) { box-shadow: none; border-style: dashed; }
.gl-flow__node.is-lit { border-color: var(--pc); box-shadow: var(--gl-shadow-lift), 0 0 0 1px var(--pc); transform: translateY(-3px); }
.gl-flow__node[data-pillar=convert].is-lit { box-shadow: var(--gl-shadow-lift), 0 0 0 1px var(--gl-bone) inset; }
.gl-story { display: grid; justify-items: center; gap: 16px; max-width: 820px; margin: 30px auto 0; text-align: center; }
.gl-story__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.gl-story__play { min-height: 44px; padding: 0 18px 0 8px; gap: 10px; font-size: 14.5px; }
.gl-story__pi { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gl-ink); color: #fff; }
.gl-story__pi .gl-i { width: 11px; height: 11px; margin-left: 2px; }
.gl-story__text { margin: 0; min-height: 3.2em; max-width: 60ch; color: var(--gl-ink-2); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.gl-story__text b { font-weight: 500; color: var(--gl-ink); }
.gl-sys.is-telling + .gl-system__note { opacity: .7; }

/* ---------- interactive controls: one quiet chip style for every "pick one" ---------- */
.gl-tabs { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; }
.gl-tabs__legend { padding: 0; margin: 0 0 8px; font: 500 13px/1.3 var(--gl-sans); color: var(--gl-muted); }
.gl-dark .gl-tabs__legend { color: var(--gl-ash); }
.gl-tabs__row { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gl-line-2); background: #fff; color: var(--gl-ink-2); font: 500 13.5px/1.2 var(--gl-sans); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--gl-fast) var(--gl-ease), border-color var(--gl-fast) var(--gl-ease), color var(--gl-fast) var(--gl-ease), transform var(--gl-fast) var(--gl-ease); }
.gl-tab:hover { border-color: var(--gl-ink); color: var(--gl-ink); }
.gl-tab:active { transform: scale(.97); }
.gl-tabs__in:checked + .gl-tab { background: var(--gl-ink); border-color: var(--gl-ink); color: #fff; }
.gl-tabs__in:focus-visible + .gl-tab { outline: 2px solid var(--gl-ink); outline-offset: 3px; }
.gl-tab__n { font: 500 12px/1 var(--gl-mono); opacity: .78; }
.gl-dark .gl-tab { background: transparent; border-color: var(--gl-dline-2); color: var(--gl-ash); }
.gl-dark .gl-tab:hover { border-color: var(--gl-ash); color: var(--gl-bone); }
.gl-dark .gl-tabs__in:checked + .gl-tab { background: var(--gl-bone); border-color: var(--gl-bone); color: var(--gl-lacquer); }
.gl-dark .gl-tabs__in:focus-visible + .gl-tab { outline-color: var(--gl-bone); }
/* the control row under a drawing: an optional play button, then the chips */
.gl-ctl { position: relative; display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 14px 4px 0; border-top: 1px dashed var(--gl-line); }
.gl-dark .gl-ctl { border-top-color: var(--gl-dline); }
.gl-ctl__play { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pc); background: var(--pc); color: #fff; cursor: pointer; transition: transform var(--gl-fast) var(--gl-ease), background-color var(--gl-fast); }
.gl-ctl__play:hover { background: color-mix(in srgb, var(--pc) 86%, #000); }
.gl-ctl__play:active { transform: scale(.94); }
.gl-ctl__play .gl-i { width: 13px; height: 13px; margin-left: 2px; }
.gl-dark .gl-ctl__play { color: var(--gl-lacquer); }
.gl-ctl .gl-tabs__row { gap: 4px; }
.gl-ctl .gl-tab { padding: 0 12px; }

/* service bands */
.gl-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.gl-band--flip .gl-band__copy { order: 2; }
.gl-band__copy > p:not(.gl-pill) { color: var(--gl-muted); margin: 14px 0 0; max-width: 56ch; }
.gl-band__copy .gl-h2 { max-width: 15ch; }
.gl-band__problem { font-size: 18px; color: var(--gl-ink-2) !important; margin-top: 22px !important; }
.gl-band--dark .gl-band__copy > p:not(.gl-pill) { color: var(--gl-ash); }
.gl-band--dark .gl-band__problem { color: var(--gl-bone) !important; }
.gl-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.gl-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.gl-points li { position: relative; padding-left: 22px; font-size: 16px; }
.gl-points li::before { content: ""; position: absolute; left: 2px; top: .56em; width: 8px; height: 8px; border-radius: 2px; background: var(--pc, var(--gl-ink)); }
.gl-points--tight { gap: 7px; margin-top: 16px; }
.gl-points--tight li { font-size: 15px; }

/* illustration frames */
.gl-art { margin: 0; padding: 20px; border-radius: var(--gl-r-lg); background: #fff; border: 1px solid var(--gl-line); box-shadow: var(--gl-shadow-lift); position: relative; }
.gl-art::before { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--gl-line); border-radius: 14px; pointer-events: none; }
.gl-dark .gl-art { background: #1E1A15; border-color: var(--gl-dline); box-shadow: var(--gl-shadow-dark); }
.gl-dark .gl-art::before { border-color: var(--gl-dline); }
.gl-art__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 14px; }
.gl-art__title { display: inline-flex; align-items: center; gap: 9px; font: 500 15px/1.2 var(--gl-sans); }
.gl-art__tag { font: 500 11.5px/1 var(--gl-mono); color: var(--gl-muted); padding: 6px 8px 5px; border: 1px solid var(--gl-line); border-radius: 999px; }
.gl-dark .gl-art__tag { color: var(--gl-ash); border-color: var(--gl-dline-2); }
.gl-art__foot { position: relative; margin: 14px 4px 2px; font-size: 14px; color: var(--gl-muted); }
.gl-dark .gl-art__foot { color: var(--gl-ash); }
.gl-hero .gl-art { max-width: 560px; margin-left: auto; }

/* ads test */
.gl-ads { position: relative; display: grid; gap: 8px; }
.gl-ads__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(64px, .9fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--gl-mist); }
.gl-dark .gl-ads__row { background: rgba(243, 239, 232, .05); }
.gl-ads__row--head { background: none !important; padding-top: 0; padding-bottom: 0; font: 500 12px/1.2 var(--gl-mono); color: var(--gl-muted); }
.gl-dark .gl-ads__row--head { color: var(--gl-ash); }
.gl-ads__var { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14.5px; line-height: 1.35; }
.gl-ads__var b { font: 600 14px var(--gl-mono); }
.gl-ads__thumb { flex: none; width: 34px; height: 42px; border-radius: 6px; background: #fff; border: 1px solid var(--gl-line-2); display: grid; gap: 3px; align-content: start; padding: 4px; }
.gl-dark .gl-ads__thumb { background: rgba(243, 239, 232, .08); border-color: var(--gl-dline-2); }
.gl-ads__thumb b { height: 18px; border-radius: 2px; background: var(--gl-mist-2); }
.gl-ads__thumb s { height: 3px; width: 70%; border-radius: 2px; background: var(--gl-line-2); text-decoration: none; }
.gl-dark .gl-ads__thumb b { background: rgba(243, 239, 232, .16); } .gl-dark .gl-ads__thumb s { background: rgba(243, 239, 232, .22); }
.gl-ads__sig { display: block; height: 8px; border-radius: 999px; background: rgba(17, 17, 17, .07); overflow: hidden; }
.gl-dark .gl-ads__sig { background: rgba(243, 239, 232, .1); }
.gl-ads__sig i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--gl-line-2); }
.gl-ads__row[data-state=keep] .gl-ads__sig i { background: var(--pc); }
.gl-ads__row[data-state=rework] .gl-ads__sig i { background: color-mix(in srgb, var(--pc) 45%, transparent); }
.gl-dark .gl-ads__row[data-state=retire] .gl-ads__sig i { background: rgba(243, 239, 232, .28); }
.gl-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font: 500 12.5px/1 var(--gl-sans); border: 1px solid var(--gl-line-2); color: var(--gl-muted); background: #fff; }
.gl-chip--keep { background: var(--pc); border-color: var(--pc); color: #fff; }
.gl-chip--rework { border-color: var(--pc); color: var(--pc); }
.gl-dark .gl-chip { background: transparent; border-color: var(--gl-dline-2); color: var(--gl-ash); }
.gl-dark .gl-chip--keep { background: var(--pc); border-color: var(--pc); color: var(--gl-lacquer); }
.gl-dark .gl-chip--rework { border-color: var(--pc); color: var(--pc); }
.gl-chip--test { border-style: dashed; background: transparent; color: var(--gl-muted); }
.gl-dark .gl-chip--test { color: var(--gl-ash); }
/* Test stages, read from the checked chip. The default ("decide") is also the no-script picture. */
.gl-ads__row { transition: opacity var(--gl-t) var(--gl-ease), border-color var(--gl-t) var(--gl-ease); }
.gl-ads__sig i { transform-origin: left center; transition: transform 640ms var(--gl-ease-out), background-color var(--gl-t); }
.gl-ads__row { grid-template-columns: minmax(0, 1.5fr) minmax(64px, .9fr) 84px; }
.gl-ads__dec { display: grid; justify-items: end; }
.gl-ads__row--head > :last-child { text-align: right; }
.gl-ads__dec > .gl-chip { grid-area: 1 / 1; transition: opacity var(--gl-t) var(--gl-ease), transform var(--gl-t) var(--gl-ease-out), visibility 0s linear 0s; }
.gl-ads__row:not(.gl-ads__row--next) .gl-ads__dec > .gl-chip--test { opacity: 0; visibility: hidden; transform: translateY(4px); }
.gl-ads__row--next { background: transparent !important; border: 1px dashed var(--gl-line-2); padding-top: 9px; padding-bottom: 9px; color: var(--gl-muted); }
.gl-ads__row--next .gl-ads__thumb { opacity: .5; }
.gl-dark .gl-ads__row--next { border-color: var(--gl-dline-2); color: var(--gl-ash); }
.gl-ads__row--next .gl-ads__sig { visibility: hidden; }
/* every stage's caption shares one cell, so the frame keeps its height from stage to stage */
.gl-art--ads .gl-art__foot { display: grid; }
.gl-stage { grid-area: 1 / 1; visibility: hidden; }
.gl-stage[data-stage=decide] { visibility: visible; }
.gl-art--ads:has([value=launch]:checked) .gl-ads__sig i { transform: scaleX(0); }
.gl-art--ads:has([value=launch]:checked) .gl-ads__row:not(.gl-ads__row--next) .gl-chip--test,
.gl-art--ads:has([value=read]:checked) .gl-ads__row:not(.gl-ads__row--next) .gl-chip--test { opacity: 1; visibility: visible; transform: none; }
.gl-art--ads:has([value=launch]:checked) .gl-ads__dec > .gl-chip:not(.gl-chip--test),
.gl-art--ads:has([value=read]:checked) .gl-ads__dec > .gl-chip:not(.gl-chip--test) { opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--gl-t) var(--gl-ease), transform var(--gl-t) var(--gl-ease-out), visibility 0s linear var(--gl-t); }
.gl-art--ads:has([value=launch]:checked) .gl-ads__sig i,
.gl-art--ads:has([value=read]:checked) .gl-ads__sig i { background: color-mix(in srgb, var(--pc) 55%, transparent); }
.gl-art--ads:has([value=next]:checked) .gl-ads__row[data-state=retire],
.gl-art--ads:has([value=next]:checked) .gl-ads__row[data-state=rework] { opacity: .6; }
.gl-art--ads:has([value=next]:checked) .gl-ads__row--next { color: inherit; border-color: var(--pc); border-style: solid; }
.gl-art--ads:has([value=next]:checked) .gl-ads__row--next .gl-ads__thumb { opacity: 1; }
.gl-art--ads:has([value=launch]:checked) .gl-stage[data-stage=decide], .gl-art--ads:has([value=read]:checked) .gl-stage[data-stage=decide], .gl-art--ads:has([value=next]:checked) .gl-stage[data-stage=decide] { visibility: hidden; }
.gl-art--ads:has([value=launch]:checked) .gl-stage[data-stage=launch], .gl-art--ads:has([value=read]:checked) .gl-stage[data-stage=read], .gl-art--ads:has([value=next]:checked) .gl-stage[data-stage=next] { visibility: visible; }

/* email flow */
.gl-mail { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 12px; }
.gl-mail::before { content: ""; position: absolute; left: calc(118px + 26px); top: 18px; bottom: 18px; border-left: 1.5px dashed var(--pc); opacity: .55; }
.gl-mail__step { position: relative; }
.gl-mail__sum { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: center; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gl-mail__sum::-webkit-details-marker { display: none; }
.gl-mail__sum:focus-visible { outline: none; }
.gl-mail__sum:focus-visible .gl-mail__card { outline: 2px solid var(--gl-ink); outline-offset: 2px; }
.gl-dark .gl-mail__sum:focus-visible .gl-mail__card { outline-color: var(--gl-bone); }
.gl-mail__when { font: 500 12.5px/1.3 var(--gl-mono); color: var(--gl-muted); text-align: right; }
.gl-dark .gl-mail__when { color: var(--gl-ash); }
.gl-mail__card { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 42px 11px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--gl-line); transition: border-color var(--gl-fast) var(--gl-ease), box-shadow var(--gl-fast) var(--gl-ease); }
.gl-mail__sum:hover .gl-mail__card { border-color: color-mix(in srgb, var(--pc) 60%, transparent); }
.gl-mail__d[open] .gl-mail__card { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc); }
.gl-mail__chev { position: absolute; right: 12px; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; color: var(--gl-muted); transition: transform var(--gl-t) var(--gl-ease); }
.gl-dark .gl-mail__chev { color: var(--gl-ash); }
.gl-mail__d[open] .gl-mail__chev { transform: rotate(180deg); color: var(--pc); }
.gl-mail__ex { display: grid; gap: 2px; margin: 8px 0 2px calc(118px + 12px); padding: 12px 14px 13px; border-radius: 10px; background: #fff; border: 1px dashed color-mix(in srgb, var(--pc) 55%, transparent); font-size: 14px; line-height: 1.45; }
.gl-dark .gl-mail__ex { background: rgba(243, 239, 232, .04); }
.gl-mail__extag { margin-bottom: 4px; font: 500 11.5px/1.2 var(--gl-mono); color: var(--gl-muted); }
.gl-mail__ex b { font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.gl-mail__ex > span:last-child { color: var(--gl-muted); }
.gl-dark .gl-mail__extag, .gl-dark .gl-mail__ex > span:last-child { color: var(--gl-ash); }
@media (prefers-reduced-motion: no-preference) { .gl-mail__d[open] .gl-mail__ex, .gl-anat__d[open] .gl-anat__more { animation: gl-fade-in 240ms var(--gl-ease-out); } }
.gl-sec--mist .gl-mail__card { background: #fff; }
.gl-dark .gl-mail__card { background: rgba(243, 239, 232, .05); border-color: var(--gl-dline); }
.gl-mail__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--pc-soft); color: var(--pc); }
.gl-mail__card b { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.gl-mail__card small { display: block; font-size: 13.5px; color: var(--gl-muted); line-height: 1.4; }
.gl-dark .gl-mail__card small { color: var(--gl-ash); }

/* store anatomy */
.gl-anat { position: relative; display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 26px; align-items: center; }
.gl-phone { position: relative; display: grid; gap: 7px; align-content: start; height: 392px; padding: 12px 11px; border-radius: 30px; background: #fff; border: 7px solid #2E2923; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55); }
.gl-phone > i { display: block; position: relative; }
.gl-phone__bar { display: flex !important; align-items: center; justify-content: space-between; height: 16px; }
.gl-phone__bar b { width: 46px; height: 8px; border-radius: 3px; background: #2A2A2A; }
.gl-phone__bar s { width: 18px; height: 12px; border-radius: 3px; border: 1.5px solid #2A2A2A; text-decoration: none; }
.gl-phone__img { height: 138px; border-radius: 10px; background: linear-gradient(160deg, #E9E3D8, #D7CEC0); }
.gl-phone__img em { position: absolute; left: 34%; top: 18%; width: 32%; height: 70%; border-radius: 40% 40% 12px 12px; background: rgba(22, 19, 15, .16); }
.gl-phone__dots { display: flex !important; gap: 4px; justify-content: center; }
.gl-phone__dots b { width: 5px; height: 5px; border-radius: 50%; background: #D4D4D4; } .gl-phone__dots b.on { background: #111; }
.gl-phone__title { height: 9px; width: 78%; border-radius: 3px; background: #2A2A2A; }
.gl-phone__price { height: 7px; width: 32%; border-radius: 3px; background: #8E8E8E; }
.gl-phone__sizes { display: flex !important; gap: 5px; margin-top: 3px; }
.gl-phone__sizes b { width: 28px; height: 22px; border-radius: 5px; border: 1.5px solid #D4D4D4; } .gl-phone__sizes b.on { border-color: #111; }
.gl-phone__cta { height: 30px; border-radius: 999px; background: #111; margin-top: 3px; }
.gl-phone__ship { height: 18px; border-radius: 5px; background: #F1EEE8; }
.gl-phone__acc { height: 14px; border-bottom: 1px solid #E8E8E8; }
.gl-pin { position: absolute; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--gl-red); color: #fff; font: 600 11.5px/1 var(--gl-mono); box-shadow: 0 0 0 3px #fff; z-index: 2; }
.gl-phone__bar .gl-pin { right: -24px; top: -3px; }
.gl-phone__img .gl-pin { right: -20px; top: 14px; }
.gl-phone__sizes .gl-pin { right: -20px; top: 0; }
.gl-phone__cta .gl-pin { right: -20px; top: 4px; }
.gl-phone__ship .gl-pin { right: -20px; top: -2px; }
.gl-anat__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; counter-reset: gl-pin; }
.gl-anat__legend > li { counter-increment: gl-pin; }
.gl-anat__n::before { content: counter(gl-pin); }
.gl-anat__sum { display: grid; grid-template-columns: 26px minmax(0, 1fr) 18px; gap: 12px; align-items: start; min-height: 40px; padding: 8px 6px 8px 0; border-radius: 10px; list-style: none; cursor: pointer; font-size: 15px; line-height: 1.45; -webkit-tap-highlight-color: transparent; }
.gl-anat__sum::-webkit-details-marker { display: none; }
.gl-anat__sum:hover .gl-anat__label { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gl-anat__n { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gl-red); color: var(--gl-red); font: 600 11.5px/1 var(--gl-mono); transition: background-color var(--gl-fast), color var(--gl-fast); }
.gl-anat__d[open] .gl-anat__n { background: var(--gl-red); color: #fff; }
.gl-dark .gl-anat__n { box-shadow: inset 0 0 0 1.5px #D9714F; color: #E89A80; }
.gl-dark .gl-anat__d[open] .gl-anat__n { background: #D9714F; color: var(--gl-lacquer); }
.gl-anat__chev { display: grid; place-items: center; height: 22px; color: var(--gl-muted); transition: transform var(--gl-t) var(--gl-ease); }
.gl-anat__chev .gl-i { width: 14px; height: 14px; }
.gl-anat__d[open] .gl-anat__chev { transform: rotate(180deg); }
.gl-anat__d[open] .gl-anat__label { font-weight: 500; }
.gl-anat__more { margin: -2px 0 8px 38px; font-size: 14px; line-height: 1.5; color: var(--gl-muted); }
.gl-dark .gl-anat__legend, .gl-dark .gl-anat__sum { color: var(--gl-bone); }
.gl-dark .gl-anat__more, .gl-dark .gl-anat__chev { color: var(--gl-ash); }
/* the open part is marked on the phone; the other pins step back */
.gl-phone [data-part] { transition: box-shadow var(--gl-t) var(--gl-ease); }
/* closed parts' pins are drawn as outlines, like their numbers in the list; the open one is filled */
.gl-pin { cursor: pointer; transition: transform var(--gl-t) var(--gl-ease-out), background-color var(--gl-fast), color var(--gl-fast); }
.gl-anat:has(.gl-anat__d[open]) .gl-pin { background: #fff; color: var(--gl-red); box-shadow: 0 0 0 3px #fff, inset 0 0 0 1.5px var(--gl-red); }
.gl-anat:has(.gl-anat__d[data-part="1"][open]) .gl-phone [data-part="1"],
.gl-anat:has(.gl-anat__d[data-part="2"][open]) .gl-phone [data-part="2"],
.gl-anat:has(.gl-anat__d[data-part="3"][open]) .gl-phone [data-part="3"],
.gl-anat:has(.gl-anat__d[data-part="4"][open]) .gl-phone [data-part="4"],
.gl-anat:has(.gl-anat__d[data-part="5"][open]) .gl-phone [data-part="5"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gl-red); }
.gl-anat:has(.gl-anat__d[data-part="1"][open]) [data-gl-pin="1"],
.gl-anat:has(.gl-anat__d[data-part="2"][open]) [data-gl-pin="2"],
.gl-anat:has(.gl-anat__d[data-part="3"][open]) [data-gl-pin="3"],
.gl-anat:has(.gl-anat__d[data-part="4"][open]) [data-gl-pin="4"],
.gl-anat:has(.gl-anat__d[data-part="5"][open]) [data-gl-pin="5"] { background: var(--gl-red); color: #fff; box-shadow: 0 0 0 3px #fff; transform: scale(1.18); }
.gl-pin:hover { transform: scale(1.12); }

/* seo map */
.gl-seo { position: relative; display: grid; gap: 12px; }
.gl-seo__query { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gl-line-2); background: #fff; font-size: 15px; }
.gl-dark .gl-seo__query { background: rgba(243, 239, 232, .05); border-color: var(--gl-dline-2); }
.gl-seo__result { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--pc-soft); border-left: 3px solid var(--pc); }
.gl-seo__result small { font: 400 12.5px/1.3 var(--gl-mono); color: var(--gl-muted); overflow-wrap: anywhere; }
.gl-seo__result b { font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.gl-seo__result span { font-size: 14px; color: var(--gl-muted); }
.gl-dark .gl-seo__result small, .gl-dark .gl-seo__result span { color: var(--gl-ash); }
.gl-seo__tree { list-style: none; margin: 0 0 0 18px; padding: 4px 0 4px 20px; border-left: 1.5px dashed var(--pc); display: grid; gap: 8px; }
.gl-seo__tree li { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--gl-line); font-size: 14.5px; }
.gl-seo__tree li::before { content: ""; position: absolute; left: -21px; top: 50%; width: 20px; border-top: 1.5px dashed var(--pc); }
.gl-dark .gl-seo__tree li { background: rgba(243, 239, 232, .05); border-color: var(--gl-dline); }
.gl-seo__kind { font: 500 11.5px/1.2 var(--gl-mono); color: var(--gl-muted); min-width: 52px; }
.gl-dark .gl-seo__kind { color: var(--gl-ash); }
.gl-seo__console { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--gl-line-2); font-size: 14.5px; }
.gl-dark .gl-seo__console { border-color: var(--gl-dline-2); }
.gl-seo__console .gl-seo__kind { min-width: 0; }
/* three searches: the picked one shows its landing page and links (the first one without :has()) */
.gl-tabs--q { margin: 0 0 14px; padding: 0 4px; }
.gl-seo__tree .gl-seo__kind { min-width: 72px; }
.gl-tabs--q .gl-tab { font-weight: 400; gap: 7px; }
.gl-tabs--q .gl-tab::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; }
.gl-tabs--q .gl-tabs__in:checked + .gl-tab::before { opacity: 1; background: currentColor; box-shadow: inset 0 0 0 2px var(--gl-ink); }
.gl-dark .gl-tabs--q .gl-tabs__in:checked + .gl-tab::before { box-shadow: inset 0 0 0 2px var(--gl-bone); }
.gl-seo__state { display: none; gap: 12px; }
.gl-seo__state[data-q="0"] { display: grid; }
.gl-art--seo:has(.gl-tabs__in[value="1"]:checked) .gl-seo__state[data-q="0"], .gl-art--seo:has(.gl-tabs__in[value="2"]:checked) .gl-seo__state[data-q="0"] { display: none; }
.gl-art--seo:has(.gl-tabs__in[value="1"]:checked) .gl-seo__state[data-q="1"], .gl-art--seo:has(.gl-tabs__in[value="2"]:checked) .gl-seo__state[data-q="2"] { display: grid; }
@media (prefers-reduced-motion: no-preference) { .gl-seo__state .gl-seo__result, .gl-seo__state .gl-seo__tree li { animation: gl-fade-in 300ms var(--gl-ease-out) both; } .gl-seo__state .gl-seo__tree li:nth-child(2) { animation-delay: 50ms; } .gl-seo__state .gl-seo__tree li:nth-child(3) { animation-delay: 100ms; } }

/* process */
.gl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
.gl-steps::before { content: ""; position: absolute; top: 21px; left: 22px; right: 22px; border-top: 1.5px dashed var(--gl-line-2); }
.gl-step { position: relative; }
.gl-step__n { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gl-lacquer); color: var(--gl-bone); font: 500 13.5px/1 var(--gl-mono); box-shadow: 0 0 0 8px #fff; }
.gl-sec--mist .gl-step__n { box-shadow: 0 0 0 8px var(--gl-mist); }
.gl-step__t { font: 500 21px/1.25 var(--gl-sans); letter-spacing: -.02em; margin: 22px 0 8px; }
.gl-step p { margin: 0; color: var(--gl-muted); font-size: 15.5px; }
.gl-step__who { margin: 18px 0 0; display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--gl-line); }
.gl-step__who div { display: grid; grid-template-columns: 36px 1fr; gap: 8px; font-size: 14.5px; }
.gl-step__who dt { font: 500 12px/1.6 var(--gl-mono); color: var(--gl-muted); }
.gl-step__who dd { margin: 0; }

/* engagement options */
.gl-engage { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gl-engage__card { position: relative; padding: clamp(26px, 3vw, 38px); border-radius: var(--gl-r-lg); background: #fff; border: 1px solid var(--gl-line); }
.gl-engage__card--first { border-color: var(--gl-ink); }
.gl-engage__card > p { color: var(--gl-muted); margin: 12px 0 0; }
.gl-ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.gl-ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15.5px; }
.gl-ticks .gl-i { margin-top: 4px; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--gl-ink); color: #fff; box-sizing: content-box; }
.gl-ticks--dark li { color: var(--gl-bone); }
.gl-ticks--dark .gl-i { background: var(--gl-bone); color: var(--gl-lacquer); }
.gl-ticks--plain .gl-i { background: transparent; color: var(--gl-ink); border: 1px solid var(--gl-line-2); }
.gl-engage__fit { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--gl-line); font-size: 15px; color: var(--gl-ink-2); }
.gl-engage__note { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 0; padding: 16px 18px; border-radius: 12px; border: 1px dashed var(--gl-line-2); color: var(--gl-ink-2); font-size: 15.5px; }
.gl-engage__note .gl-i { margin-top: 3px; }

/* routes to the catalog */
.gl-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--gl-ink); }
.gl-route { padding: 26px 28px 8px 0; display: grid; align-content: start; gap: 10px; }
.gl-route + .gl-route { padding-left: 28px; border-left: 1px solid var(--gl-line); }
.gl-route__n { font: 500 12.5px/1.3 var(--gl-mono); color: var(--gl-muted); }
.gl-route p { margin: 0 0 6px; color: var(--gl-muted); font-size: 15.5px; }
.gl-route .gl-tlink { justify-self: start; }

/* faq */
.gl-faq { border-top: 1px solid var(--gl-line-2); }
.gl-faq__item { border-bottom: 1px solid var(--gl-line-2); }
.gl-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; cursor: pointer; list-style: none; font: 500 18.5px/1.35 var(--gl-sans); letter-spacing: -.012em; }
.gl-faq__q::-webkit-details-marker { display: none; }
.gl-faq__q:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.gl-faq__icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gl-line-2); background: #fff; display: grid; place-items: center; transition: transform var(--gl-t) var(--gl-ease), background-color var(--gl-t), border-color var(--gl-t); }
.gl-faq__item[open] .gl-faq__icon { transform: rotate(45deg); background: var(--gl-ink); color: #fff; border-color: var(--gl-ink); }
.gl-faq__a { padding: 0 54px 24px 2px; color: var(--gl-ink-2); font-size: 16.5px; line-height: 1.65; }
.gl-faq__a p { margin: 0; max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) { .gl-faq__item[open] .gl-faq__a { animation: gl-fade-in 260ms var(--gl-ease-out); } }
@keyframes gl-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* closing band */
.gl-close { background: var(--gl-lacquer); color: var(--gl-bone); overflow: hidden; isolation: isolate; }
.gl-close::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(243, 239, 232, .04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(243, 239, 232, .04) 1px, transparent 1px) 0 0 / 48px 48px, radial-gradient(50% 80% at 85% 100%, rgba(180, 71, 42, .14), transparent 70%); }
.gl-close__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 40px; align-items: end; }
.gl-close__text .gl-lede { color: var(--gl-ash); }
.gl-close__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* services page */
.gl-hero__visual--chooser { align-self: stretch; display: flex; align-items: center; }
.gl-chooser { width: 100%; padding: 24px; border-radius: var(--gl-r-lg); background: #1E1A15; border: 1px solid var(--gl-dline); box-shadow: var(--gl-shadow-dark); position: relative; }
.gl-chooser::before { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--gl-dline); border-radius: 14px; pointer-events: none; }
.gl-chooser__h { position: relative; font: 500 18px/1.3 var(--gl-sans); margin: 4px 4px 14px; letter-spacing: -.01em; }
.gl-chooser__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gl-chooser__opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; background: rgba(243, 239, 232, .04); border: 1px solid var(--gl-dline); text-decoration: none; transition: border-color var(--gl-fast), background-color var(--gl-fast); }
.gl-chooser__opt:hover { border-color: var(--pc); background: rgba(243, 239, 232, .07); }
.gl-chooser__p { font-size: 15.5px; }
.gl-chooser__a { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.2 var(--gl-sans); color: var(--gl-ash); white-space: nowrap; }
.gl-chooser__opt[data-pillar=plan] { --pc: var(--gl-ash); }

/* ---------- the planner: tick what sounds familiar, the suggested order builds beside it ---------- */
.gl-plan__tool { position: relative; display: grid; gap: 22px; }
.gl-plan--wide { padding: clamp(20px, 2.6vw, 32px); }
.gl-plan__pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.gl-plan__pick .gl-chooser__h { padding: 0; margin-bottom: 4px; }
.gl-plan__hint { margin: 0 4px 14px; font-size: 14.5px; color: var(--gl-ash); }
.gl-plan__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gl-plan__opt { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 52px; padding: 12px 16px 12px 14px; border-radius: 12px; background: rgba(243, 239, 232, .04); border: 1px solid var(--gl-dline); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: border-color var(--gl-fast) var(--gl-ease), background-color var(--gl-fast) var(--gl-ease), transform var(--gl-fast) var(--gl-ease); }
.gl-plan__opt[data-pillar=plan] { --pc: var(--gl-ash); --pc-soft: rgba(243, 239, 232, .08); }
.gl-plan__opt:hover { border-color: color-mix(in srgb, var(--pc) 70%, transparent); background: rgba(243, 239, 232, .07); }
.gl-plan__opt:active { transform: scale(.99); }
.gl-plan__box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--gl-ash-2); color: transparent; transition: background-color var(--gl-fast), border-color var(--gl-fast), color var(--gl-fast); }
.gl-plan__box .gl-i { width: 14px; height: 14px; }
.gl-plan__p { font-size: 15.5px; line-height: 1.4; }
.gl-plan__tag { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1.2 var(--gl-sans); color: var(--gl-ash); white-space: nowrap; transition: color var(--gl-fast); }
.gl-plan__in:checked + .gl-plan__opt { border-color: var(--pc); background: var(--pc-soft); }
.gl-plan__in:checked + .gl-plan__opt .gl-plan__box { background: var(--pc); border-color: var(--pc); color: var(--gl-lacquer); }
.gl-plan__in:checked + .gl-plan__opt .gl-plan__tag { color: var(--gl-bone); }
.gl-plan__in:focus-visible + .gl-plan__opt { outline: 2px solid var(--gl-bone); outline-offset: 2px; }
.gl-plan__out { position: relative; min-width: 0; }
.gl-plan__empty { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 150px; margin: 0; padding: 22px; border-radius: 14px; border: 1px dashed var(--gl-dline-2); color: var(--gl-ash); font-size: 15px; text-align: center; }
.gl-plan__emark { position: relative; width: 42px; height: 30px; border-radius: 6px; border: 1.5px dashed var(--gl-ash-2); }
.gl-plan__emark::before, .gl-plan__emark::after { content: ""; position: absolute; left: 8px; right: 14px; height: 2px; border-radius: 2px; background: var(--gl-ash-2); top: 9px; }
.gl-plan__emark::after { top: 16px; right: 20px; }
.gl-plan__res { display: grid; gap: 4px; }
.gl-plan__rh { margin: 0 0 6px; font: 500 15px/1.3 var(--gl-sans); color: var(--gl-ash); }
.gl-plan__steps { list-style: none; counter-reset: gl-plan; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--gl-dline-2); }
.gl-plan__step { counter-increment: gl-plan; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--gl-dline); }
.gl-plan__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--pc); color: var(--gl-bone); font: 500 13px/1 var(--gl-mono); }
.gl-plan__n::before { content: counter(gl-plan); }
.gl-plan__step.is-first .gl-plan__n { background: var(--pc); color: var(--gl-lacquer); }
.gl-plan__st { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 3px 0 0; }
.gl-plan__st b { font-weight: 500; font-size: 17px; letter-spacing: -.012em; }
.gl-plan__sv { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--gl-ash); }
.gl-plan__why { margin: 6px 0 8px; font-size: 15px; color: var(--gl-ash); max-width: 52ch; }
.gl-plan__body .gl-tlink { font-size: 14px; padding: 4px 0; }
.gl-plan__note { margin: 12px 0 0; font-size: 13.5px; color: var(--gl-ash-2); }
.gl-plan__many { margin: 8px 0 0; font-size: 14.5px; color: var(--gl-bone); }
.gl-plan__cta { justify-self: start; margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) { .gl-plan__step:not([hidden]) { animation: gl-fade-in 260ms var(--gl-ease-out); } .gl-plan__res:not([hidden]) { animation: gl-fade-in 200ms var(--gl-ease-out); } }
@media (min-width: 900px) {
  .gl-plan--wide .gl-plan__tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
  .gl-plan--wide .gl-plan__empty { min-height: 100%; height: 100%; }
  .gl-plan--wide .gl-plan__out { align-self: stretch; display: grid; padding-top: 34px; }
}
.gl-sec--plan .gl-shead { margin-bottom: clamp(28px, 4vw, 48px); }
.gl-svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gl-svc { position: relative; padding: clamp(24px, 3vw, 34px); border-radius: var(--gl-r-lg); border: 1px solid var(--gl-line); background: #fff; transition: border-color var(--gl-t) var(--gl-ease), box-shadow var(--gl-t) var(--gl-ease), transform var(--gl-t) var(--gl-ease); }
.gl-svc::before { content: ""; position: absolute; left: clamp(24px, 3vw, 34px); top: -1px; width: 56px; height: 3px; background: var(--pc); border-radius: 0 0 3px 3px; transform-origin: left center; transition: transform var(--gl-t) var(--gl-ease-out); }
/* the whole card opens the service page; its own links stay clickable above that */
.gl-svc .gl-h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gl-svc .gl-svc__more { position: relative; z-index: 1; }
.gl-svc:hover { border-color: color-mix(in srgb, var(--pc) 45%, var(--gl-line)); box-shadow: var(--gl-shadow-lift); transform: translateY(-2px); }
.gl-svc:hover::before { transform: scaleX(1.8); }
.gl-svc:hover .gl-svc__more .gl-i { transform: translateX(3px); }
.gl-svc:has(:focus-visible) { border-color: var(--gl-ink); }
.gl-svc__verb { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.2 var(--gl-mono); color: var(--gl-muted); margin: 0 0 12px; }
.gl-svc .gl-h3 a { text-decoration: none; }
.gl-svc .gl-h3 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.gl-svc__problem { color: var(--gl-ink-2); margin: 12px 0 0; }
.gl-svc__more { margin: 20px 0 0; }
.gl-support { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--gl-line-2); }
.gl-support__item { padding: 24px 24px 26px 0; border-bottom: 1px solid var(--gl-line-2); }
.gl-support__item:nth-child(even) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--gl-line-2); }
.gl-support__item p { margin: 8px 0 12px; color: var(--gl-muted); font-size: 15.5px; }
.gl-order { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--gl-ink); }
.gl-order li { padding: 22px 20px 4px 0; }
.gl-order li + li { padding-left: 20px; border-left: 1px solid var(--gl-line); }
.gl-order__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--gl-ink); font: 500 13px/1 var(--gl-mono); margin-bottom: 14px; }
.gl-order p { margin: 8px 0 0; color: var(--gl-muted); font-size: 15px; }

/* service detail */
.gl-hero__visual--art .gl-art { max-width: 540px; }
.gl-problem > * { max-width: 920px; }
.gl-problem__text { font: 500 clamp(24px, 2.6vw, 36px)/1.25 var(--gl-sans); letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.gl-problem__note { margin: 20px 0 0; color: var(--gl-muted); font-size: 17px; max-width: 64ch; }
.gl-sec--problem { padding-bottom: clamp(36px, 4vw, 56px); }
.gl-deliv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gl-ink); }
/* Deliverables and principles are sets, not sequences: a block marker in the pillar colour, no numbers. */
.gl-deliv__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 22px 0; border-bottom: 1px solid var(--gl-line); }
.gl-deliv__item::before { content: ""; grid-row: span 2; width: 10px; height: 10px; margin-top: 8px; border-radius: 2px; background: var(--pc, var(--gl-ink)); }
.gl-deliv__item p { margin: 0; color: var(--gl-muted); }
.gl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.gl-col .gl-h3 { margin-bottom: 4px; }
.gl-col__note { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; font-size: 14.5px; color: var(--gl-ink-2); padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--gl-line-2); }
.gl-col__note .gl-i { margin-top: 3px; }
.gl-col__small { margin: 18px 0 0; font-size: 14.5px; color: var(--gl-muted); }
.gl-plain { margin: 18px 0 0; padding: 0 0 0 20px; display: grid; gap: 12px; }
.gl-plain li { padding-left: 4px; }
.gl-plain li::marker { color: var(--gl-muted); }
.gl-measures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--gl-ink); }
.gl-measures--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-measure { padding: 22px 22px 8px 0; }
.gl-measure + .gl-measure { padding-left: 22px; border-left: 1px solid var(--gl-line); }
.gl-measure p { margin: 8px 0 0; color: var(--gl-muted); font-size: 15px; }
.gl-sec--related { padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 88px); border-top: 1px solid var(--gl-line); }
.gl-related { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gl-related__card { display: grid; gap: 6px; height: 100%; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--gl-line); text-decoration: none; transition: border-color var(--gl-fast), box-shadow var(--gl-fast); }
.gl-related__card:hover { border-color: var(--pc); box-shadow: var(--gl-shadow); }
.gl-related__verb { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.2 var(--gl-mono); color: var(--gl-muted); }
.gl-related__name { font: 500 19px/1.25 var(--gl-sans); letter-spacing: -.015em; }
.gl-related__card small { color: var(--gl-muted); font-size: 14.5px; line-height: 1.5; }

/* how it works + about */
.gl-sec--access { padding: var(--gl-sec) 0; }
.gl-sec--access .gl-lede { color: var(--gl-ash); }
.gl-costs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gl-costs__col { padding: clamp(24px, 3vw, 34px); border-radius: var(--gl-r-lg); border: 1px solid var(--gl-ink); }
.gl-costs__col--theirs { border: 1px dashed var(--gl-line-2); background: var(--gl-mist); }
.gl-actions-row { margin: 34px 0 0; }
.gl-wont { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gl-ink); }
.gl-wont li { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--gl-line); font: 500 clamp(18px, 1.6vw, 21px)/1.35 var(--gl-sans); letter-spacing: -.015em; }
.gl-wont__x { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gl-red); }
.gl-wont__x::before, .gl-wont__x::after { content: ""; position: absolute; left: 7px; right: 7px; top: 13px; height: 1.5px; background: var(--gl-red); transform: rotate(45deg); }
.gl-wont__x::after { transform: rotate(-45deg); }

/* ---------- project brief form ---------- */
.gl-sec--brief { background: var(--gl-mist); padding-top: clamp(40px, 5vw, 72px); }
.gl-brief { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.gl-brief__form { min-width: 0; }
.gl-form { padding: clamp(22px, 3.4vw, 40px); border-radius: var(--gl-r-lg); background: #fff; border: 1px solid var(--gl-line); box-shadow: var(--gl-shadow); scroll-margin-top: calc(var(--gl-head-h) + 20px); }
.gl-form[aria-busy=true] { cursor: progress; }
.gl-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.gl-field { display: grid; gap: 7px; align-content: start; min-width: 0; }
.gl-field--wide { grid-column: 1 / -1; }
.gl-label { font: 500 15px/1.3 var(--gl-sans); }
.gl-opt { font: 400 12.5px/1 var(--gl-mono); color: var(--gl-muted); margin-left: 6px; }
.gl-input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--gl-line-2); border-radius: 10px; background: #fff; font-size: 16px; line-height: 1.4; transition: border-color var(--gl-fast), box-shadow var(--gl-fast); }
.gl-input::placeholder { color: #8A8A8A; }
.gl-input:hover { border-color: #A8A8A8; }
.gl-input:focus { outline: none; border-color: var(--gl-ink); box-shadow: 0 0 0 1px var(--gl-ink); }
.gl-input:focus-visible { outline: 2px solid var(--gl-ink); outline-offset: 2px; box-shadow: none; }
.gl-select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; cursor: pointer; }
.gl-textarea { min-height: 128px; resize: vertical; }
.gl-input[aria-invalid=true] { border-color: var(--gl-error); box-shadow: 0 0 0 1px var(--gl-error); }
.gl-field__hint { margin: 0; font-size: 13.5px; color: var(--gl-muted); }
.gl-field__err { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 14px; font-weight: 500; color: var(--gl-error); }
.gl-field__err::before { content: "!"; flex: none; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background: var(--gl-error); color: #fff; font: 700 11px/1 var(--gl-sans); }
.gl-form__alert { margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--gl-error); background: #FBF1EE; color: #5A2112; font-size: 15px; }
.gl-form__alert p { margin: 0; }
.gl-form__alert ul { margin: 8px 0 0; padding-left: 20px; }
.gl-form__alert a { color: inherit; font-weight: 500; }
.gl-form__alert:focus { outline: 2px solid var(--gl-error); outline-offset: 2px; }
.gl-form__safety { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 0; font-size: 14px; color: var(--gl-ink-2); }
.gl-form__safety .gl-i { margin-top: 3px; }
.gl-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--gl-line); }
.gl-btn--submit { min-height: 52px; padding: 0 26px; font-size: 16px; }
.gl-btn--email { min-height: 52px; padding: 0 22px; }
.gl-form__stuck { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--gl-line-2); background: var(--gl-mist); font-size: 14.5px; color: var(--gl-ink-2); }
.gl-btn--submit.is-busy::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: gl-spin .8s linear infinite; }
@keyframes gl-spin { to { transform: rotate(360deg); } }
.gl-form__privacy { margin: 0; font-size: 14px; color: var(--gl-muted); }
.gl-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gl-form__done { text-align: left; }
.gl-form__done:focus { outline: none; }
.gl-form__done-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #4F5B47; color: #fff; margin-bottom: 18px; }
.gl-form__done-mark .gl-i { width: 22px; height: 22px; }
.gl-form__done p { color: var(--gl-ink-2); margin: 12px 0 0; max-width: 56ch; }
.gl-form__preview { padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--gl-line-2); background: var(--gl-mist); font-size: 14px; color: var(--gl-muted) !important; }
.gl-form__done-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px !important; }
.gl-brief__aside { position: relative; padding: clamp(24px, 3vw, 36px); border-radius: var(--gl-r-lg); background: var(--gl-lacquer); color: var(--gl-bone); }
@media (min-width: 1000px) { .gl-brief__aside { position: sticky; top: calc(var(--gl-head-h) + 24px); } }
.gl-next { list-style: none; counter-reset: gl-n; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; }
.gl-next li { counter-increment: gl-n; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 14px; }
.gl-next li::before { content: counter(gl-n); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--gl-dline-2); font: 500 13px/1 var(--gl-mono); color: var(--gl-bone); }
.gl-next b { font-weight: 500; }
.gl-next span { color: var(--gl-ash); font-size: 15px; }
.gl-brief__email, .gl-brief__small { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--gl-dline); font-size: 15px; color: var(--gl-ash); }
.gl-brief__small { margin-top: 12px; padding-top: 0; border: 0; font-size: 14px; }
.gl-brief__aside a { color: var(--gl-bone); text-underline-offset: 3px; overflow-wrap: anywhere; }
/* the chosen service's "what we'll need" list, shown as soon as a service is picked */
.gl-need { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--gl-dline); }
.gl-need__h { margin: 0 0 4px; }
.gl-need__for { margin: 0 0 12px; font-size: 14.5px; color: var(--gl-ash); }
.gl-need__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.gl-need__list li { position: relative; padding-left: 19px; font-size: 14.5px; line-height: 1.5; color: var(--gl-bone); }
.gl-need__list li::before { content: ""; position: absolute; left: 1px; top: .58em; width: 7px; height: 7px; border-radius: 2px; background: var(--pc); }
@media (prefers-reduced-motion: no-preference) { .gl-need__svc:not([hidden]) { animation: gl-fade-in 260ms var(--gl-ease-out); } }

/* ---------- footer ---------- */
.gl-foot { background: #fff; border-top: 1px solid var(--gl-line); padding: clamp(56px, 6vw, 80px) 0 28px; }
.gl-foot__top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.gl-foot__brand p { color: var(--gl-muted); font-size: 15px; margin: 18px 0 22px; max-width: 34ch; }
.gl-foot__brand .gl-brand__lab { border-color: var(--gl-line-2); }
.gl-foot__col { display: grid; align-content: start; gap: 2px; }
.gl-foot__col h2 { font: 500 12.5px/1.3 var(--gl-mono); color: var(--gl-muted); margin: 0 0 10px; }
.gl-foot__col .gl-foot__h2b { margin-top: 18px; }
.gl-foot__col a { padding: 6px 0; text-decoration: none; font-size: 15px; }
.gl-foot__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gl-foot__base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 22px; color: var(--gl-muted); font-size: 13.5px; }
.gl-foot__base::before { content: ""; position: absolute; top: 0; left: var(--gl-gutter); right: var(--gl-gutter); border-top: 1px solid var(--gl-line); }

/* ---------- reveals: brief, once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-gl-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }
  .js [data-gl-reveal] { transition: opacity var(--gl-reveal) var(--gl-ease-out), transform var(--gl-reveal) var(--gl-ease-out); }
}

/* ---------- responsive ---------- */
@media (max-width: 1179.98px) {
  .gl-nav, .gl-head__shop { display: none; }
  .gl-menu-btn { display: inline-flex; }
  .gl-foot__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gl-foot__brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 28px; align-items: center; }
  .gl-foot__brand p { margin: 0; }
}
@media (max-width: 1099.98px) {
  .gl-hero__grid--page { grid-template-columns: minmax(0, 1fr); }
  .gl-hero__grid--page .gl-hero__visual { max-width: 620px; width: 100%; }
  .gl-hero .gl-art { margin-left: 0; }
  .gl-display--page { max-width: 20ch; }
  .gl-hero__grid { gap: 40px; }
  .gl-board__grid { gap: 26px; }
  .gl-mod { min-height: 168px; padding: 14px 14px 12px; }
  .gl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .gl-steps::before { display: none; }
  .gl-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-measure:nth-child(3) { padding-left: 0; border-left: 0; }
  .gl-measure:nth-child(n+3) { border-top: 1px solid var(--gl-line); margin-top: 0; }
  .gl-measures--3 { grid-template-columns: minmax(0, 1fr); }
  .gl-measures--3 .gl-measure { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--gl-line); }
  .gl-measures--3 .gl-measure:first-child { border-top: 0; }
  .gl-order { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-order li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .gl-order li { border-bottom: 1px solid var(--gl-line); padding-bottom: 20px; }
  .gl-related { grid-template-columns: minmax(0, 1fr); }
  .gl-close__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .gl-close__actions { justify-content: flex-start; }
}
@media (max-width: 899.98px) {
  :root { --gl-gutter: 24px; }
  .gl-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .gl-hero__visual { max-width: 620px; width: 100%; }
  .gl-band__grid, .gl-split, .gl-split--wide, .gl-cols, .gl-brief, .gl-engage, .gl-costs { grid-template-columns: minmax(0, 1fr); }
  .gl-band--flip .gl-band__copy { order: 0; }
  .gl-band__copy .gl-h2 { max-width: 20ch; }
  .gl-routes { grid-template-columns: minmax(0, 1fr); }
  .gl-route { padding: 22px 0 14px; }
  .gl-route + .gl-route { padding-left: 0; border-left: 0; border-top: 1px solid var(--gl-line); }
  .gl-svc-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-support { grid-template-columns: minmax(0, 1fr); }
  .gl-support__item:nth-child(even) { padding-left: 0; border-left: 0; }
  .gl-foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-foot__brand { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media (max-width: 639.98px) {
  :root { --gl-gutter: 16px; --gl-head-h: 64px; }
  .gl-brand__word { font-size: 18px; }
  .gl-mark { width: 25px; height: 25px; }
  .gl-btn--head { display: none; }
  .gl-hero__actions .gl-btn { flex: 1 1 100%; }
  .gl-band__actions .gl-btn { flex: 1 1 100%; }
  .gl-close__actions .gl-btn { flex: 1 1 100%; }
  .gl-board { padding: 14px; }
  .gl-board__grid { gap: 22px; }
  .gl-mod { min-height: 158px; padding: 13px 12px 12px; border-radius: 12px; }
  .gl-mod::before { inset: 5px; border-radius: 8px; }
  .gl-mod__name { font-size: 15.5px; }
  .gl-mod__verb { font-size: 11.5px; }
  .gl-hub { font-size: 12px; padding: 7px 11px; }
  .gl-board__cap { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gl-board__line { font-size: 14.5px; }
  .gl-steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .gl-steps::before { display: block; top: 22px; bottom: 22px; left: 21px; right: auto; border-top: 0; border-left: 1.5px dashed var(--gl-line-2); }
  .gl-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding-bottom: 30px; }
  .gl-step__n { grid-row: span 3; }
  .gl-step__t { margin: 8px 0 6px; }
  .gl-step__who { grid-column: 2; }
  .gl-measures { grid-template-columns: minmax(0, 1fr); }
  .gl-measure, .gl-measure + .gl-measure { padding-left: 0; border-left: 0; }
  .gl-measure + .gl-measure { border-top: 1px solid var(--gl-line); }
  .gl-order { grid-template-columns: minmax(0, 1fr); }
  .gl-order li, .gl-order li + li { padding-left: 0; border-left: 0; }
  .gl-ads__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .gl-ads__row--head span:nth-child(2) { display: none; }
  .gl-ads__sig { grid-column: 1 / -1; grid-row: 2; }
  .gl-mail::before { left: 26px; }
  .gl-mail__sum { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gl-mail__when { text-align: left; padding-left: 56px; }
  .gl-mail__ex { margin-left: 52px; }
  .gl-plan__opt { grid-template-columns: 22px minmax(0, 1fr); row-gap: 4px; }
  .gl-plan__tag { grid-column: 2; }
  .gl-plan__cta { justify-self: stretch; }
  .gl-ctl { align-items: flex-start; }
  .gl-ctl .gl-tabs { flex: 1; }
  .gl-ctl .gl-tabs__row, .gl-story__bar .gl-tabs__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .gl-ctl .gl-tab, .gl-story__bar .gl-tab { justify-content: center; padding: 0 10px; }
  .gl-story__play { flex: 1 1 100%; }
  .gl-story__steps { width: 100%; }
  .gl-anat { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .gl-phone { width: 200px; }
  .gl-anat__legend { justify-self: stretch; }
  .gl-form__grid { grid-template-columns: minmax(0, 1fr); }
  .gl-btn--submit, .gl-btn--email { width: 100%; }
  .gl-faq__q { font-size: 17px; padding: 18px 0; }
  .gl-faq__a { padding-right: 0; }
  .gl-chooser { padding: 16px; }
  .gl-chooser__opt { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .gl-foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 16px; }
  .gl-foot__base { flex-direction: column; }
  .gl-brand__lab { font-size: 11.5px; padding: 5px 8px 4px; }
}
@media (max-width: 379.98px) {
  .gl-brand__lab { display: none; }
}

/* ---------- reduced motion: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  .gl-body *, .gl-body *::before, .gl-body *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .gl-mod:hover, .gl-mod.is-active { transform: none; }
}