/* gtstaxpro.com. Column reference lock (DESIGN.md). Tokens are a copy of ../../brand/gts-tax-pro-tokens.css;
   build/tests/test_tokens.py keeps the two in sync. Never edit generated HTML; change this file and rebuild. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }

:root {
  /* Brand (fixed by the logo) */
  --gts-navy: #28378B;          /* Column "Indigo Navy" role: filled CTA, nav active, headings, logo */
  --gts-red: #E41620;           /* Column "Signal Orange" role: one surface per page, the map's office mark */

  /* Surfaces (Column Surface 0 / 1 / Silver Lining / Deep Surface) */
  --gts-canvas: #F6F6F8;
  --gts-card: #FFFFFF;
  --gts-line: #E3E4E8;
  --gts-line-soft: #F0F0F3;
  --gts-deep: #131A40;          /* derived from brand navy; footer and the one inverted band */

  /* Text (Column Slate Ink / Steel / Charcoal) */
  --gts-text: #3B3E47;          /* body */
  --gts-text-strong: #232730;   /* nav links, widget values */
  --gts-heading: #28378B;
  --gts-steel: #7C7F88;         /* 18px+ only: two-tone heading tails, large captions */
  --gts-steel-deep: #62656E;    /* mono labels under 18px */
  --gts-on-deep: #FFFFFF;
  --gts-on-deep-muted: #C5C9E0;
  --gts-error: #B4141C;

  /* Data accents (Column Seafoam stays inside data) */
  --gts-sea: #167E6C;

  /* Map dots (decorative only) */
  --gts-dot-lo: rgb(150, 214, 232);
  --gts-dot-hi: rgb(52, 92, 184);

  /* Type (Column: SuisseIntl -> Inter; SuisseIntlMono -> JetBrains Mono) */
  --gts-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gts-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --gts-display: 56px;          /* home hero; 36px on phones */
  --gts-h1: 48px;               /* inner pages, capped for Spanish; 34px on phones */
  --gts-h2: 40px;               /* 28px on phones */
  --gts-h3: 20px;
  --gts-body: 16px;
  --gts-lead: 18px;
  --gts-small: 14px;
  --gts-label: 12px;

  /* Shape and depth (Column Border Radius, Elevation) */
  --gts-radius: 8px;
  --gts-pill: 9999px;
  --gts-shadow-card: rgba(18, 22, 30, .024) 0 1px 4px, rgba(18, 22, 30, .05) 0 1px 0, rgba(18, 22, 30, .024) 0 0 0 1px;
  --gts-shadow-widget: rgba(30, 30, 44, .15) 24px 48px 64px, #FFFFFF 0 0 0 1px inset;
  --gts-shadow-btn: rgba(17, 26, 74, .1) 0 1px 3px, rgba(17, 26, 74, .05) 0 1px 0, rgba(255, 255, 255, .5) 0 1px 0 inset, rgba(255, 255, 255, .5) 0 1px 4px inset;

  /* Layout (Column Layout) */
  --gts-max: 1200px;
  --gts-gutter: 16px;
  --gts-section: 72px;
  --gts-card-pad: 24px;
  --gts-nav-h: 62px;
}

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--gts-canvas); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--gts-nav-h) + 16px); }
body { background: var(--gts-canvas); color: var(--gts-text); font-family: var(--gts-font); font-size: var(--gts-body);
  line-height: 1.5; font-feature-settings: "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }
img, picture, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul[class], ol[class] { list-style: none; }
h1, h2, h3, h4 { color: var(--gts-heading); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--gts-navy); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--gts-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gts-navy); color: #fff; padding: 10px 16px; border-radius: var(--gts-radius); }
.skip:focus { top: 12px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--gts-max) + 2 * var(--gts-gutter)); margin: 0 auto; padding: 0 var(--gts-gutter); }

/* ---------- Buttons (Column Primary Filled + Secondary Outlined; 8px radius, never two filled side by side) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--gts-radius);
  font-size: 15px; font-weight: 500; line-height: 1.2; padding: 12px 20px; white-space: nowrap; border: 1px solid transparent;
  transition: background-color .2s cubic-bezier(.25,.46,.45,.94), color .2s cubic-bezier(.25,.46,.45,.94), border-color .2s cubic-bezier(.25,.46,.45,.94), transform .2s cubic-bezier(.25,.46,.45,.94); }
.btn svg { width: 12px; height: 12px; flex: none; }
.btn--primary { background: var(--gts-navy); color: #fff; box-shadow: var(--gts-shadow-btn); }
.btn--primary:hover { background: #22307A; }
.btn--secondary { border-color: var(--gts-navy); color: var(--gts-navy); padding-left: 28px; padding-right: 28px; }
.btn--secondary:hover { background: rgba(40, 55, 139, .06); }
.btn--nav { background: #fff; border-color: var(--gts-line); color: var(--gts-text-strong); padding: 7px 14px; font-size: 14px; }
.btn--nav:hover { border-color: #c9cbd3; }
.btn--light { background: #fff; color: var(--gts-red); }
.btn--ghost-light { border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Motion constants (DESIGN.md "Motion": Corporate archetype) ---------- */
:root { --ease: cubic-bezier(.2, 0, 0, 1); --ease-in: cubic-bezier(.3, 0, 1, 1); --t-quick: 200ms; --t-std: 300ms; --t-slow: 450ms; }

/* ---------- Shared type and pieces ---------- */
.tag { display: flex; align-items: center; gap: 8px; font-size: var(--gts-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gts-navy); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tag--light { color: #fff; }
.two { font-size: var(--gts-h2); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; color: var(--gts-navy); max-width: 780px; }
.two .two__tail { color: var(--gts-steel); }
.shead { margin-bottom: 36px; }
.shead .two { margin-top: 18px; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--gts-navy); font-weight: 500; }
.link svg { width: 12px; height: 12px; transition: transform var(--t-quick) var(--ease); }
.link:hover svg { transform: translateX(2px); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.badge { display: inline-flex; gap: 8px; align-items: center; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: var(--gts-pill); padding: 5px 12px; font-size: 13px; color: #000; box-shadow: rgba(87, 90, 100, .12) 0 0 0 1px; }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--gts-navy); }
.pill { border: 1px solid var(--gts-line); background: rgba(255, 255, 255, .5); border-radius: var(--gts-radius); padding: 4px 10px; font-size: 13px; color: var(--gts-text-strong); white-space: nowrap; }
.pill a:hover { color: var(--gts-navy); text-decoration: underline; }
.pill__on { color: var(--gts-navy); font-weight: 600; }
.chip { display: inline-flex; align-items: center; border: 1px solid var(--gts-line); border-radius: var(--gts-pill); padding: 6px 14px; font-size: 14px; color: var(--gts-text-strong); background: #fff; }
.chip:hover { border-color: var(--gts-navy); color: var(--gts-navy); }

/* ---------- Announcement bar (Column live site) ---------- */
.announce { background: var(--gts-navy); color: #fff; font-size: 13px; font-weight: 500; }
.announce__in { padding-top: 10px; padding-bottom: 10px; text-align: center; line-height: 1.4; }
.announce__k { opacity: .8; font-weight: 400; }
.announce__link { opacity: .8; margin-left: 6px; white-space: nowrap; }
.announce__link:hover { opacity: 1; text-decoration: underline; }

/* ---------- Header (Column 62px top bar) ---------- */
/* The frost lives on ::before, not on .nav: a backdrop-filter on .nav would become the containing block of the fixed
   scrim and phone sheet inside it. */
.nav { position: sticky; top: 0; z-index: 50; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(246, 246, 248, .92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t-quick) var(--ease); }
.nav.is-scrolled::before, .nav.has-mega::before { border-bottom-color: var(--gts-line); }
.nav__in { position: relative; z-index: 45; height: var(--gts-nav-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav__logo img { height: 28px; width: auto; }
.nav__links { font-size: 14px; color: var(--gts-text-strong); }
.nav__list { display: flex; align-items: center; gap: 26px; }
.nav__link, .nav__trigger { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 1px solid transparent; font-size: 14px; color: var(--gts-text-strong); }
.nav__link:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: var(--gts-navy); }
.nav__link[aria-current="page"], .nav__trigger[data-current] { color: var(--gts-navy); font-weight: 500; border-bottom-color: var(--gts-navy); }
.js .nav__plain, html:not(.js) .nav__trigger, html:not(.js) .mega { display: none; }
.nav__right { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--gts-text-strong); }
.nav__phone:hover { color: var(--gts-navy); }
.btn--nav svg { width: 11px; height: 11px; }
.dd__chev { width: 12px; height: 12px; transition: transform var(--t-quick) var(--ease); }
.nav__trigger[aria-expanded="true"] .dd__chev { transform: rotate(180deg); }

/* ---------- Mega menu: Stripe's structure in Column tokens (DESIGN.md "Mega menu", motion in "Motion v2") ---------- */
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 49; padding: 8px var(--gts-gutter) 0; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 140ms var(--ease-in), transform 140ms var(--ease-in), visibility 0s linear 140ms; }
.mega.is-open { z-index: 50; visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--t-quick) var(--ease), transform var(--t-quick) var(--ease), visibility 0s; }
.mega.is-swap, .mega.is-leaving { transform: none; }
.mega.is-leaving { visibility: visible; transition: opacity 140ms var(--ease-in), visibility 0s linear 140ms; }
.mega__card { max-width: var(--gts-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); background: #fff; border-radius: var(--gts-radius); overflow: hidden;
  box-shadow: var(--gts-shadow-card), rgba(30, 30, 44, .10) 0 24px 48px; max-height: calc(100vh - var(--gts-nav-h) - 24px); overflow-y: auto; overscroll-behavior: contain; }
.mega__main { padding: 26px 32px 0; min-width: 0; }
.mega__tag { margin-bottom: 14px; }
.mega__rows { border-top: 1px solid var(--gts-line); }
.mega__rows li { border-bottom: 1px solid var(--gts-line-soft); }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t tags" "d tags"; gap: 3px 24px; margin: 0 -12px; padding: 13px 12px; border-radius: 6px; transition: background-color 180ms var(--ease); }
.mrow:hover, .mrow:focus-visible { background: var(--gts-canvas); transition-duration: 90ms; }
.mrow__t { grid-area: t; display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--gts-navy); }
.mrow__t svg { width: 12px; height: 12px; opacity: 0; transform: translateX(-4px); transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.mrow:hover .mrow__t svg, .mrow:focus-visible .mrow__t svg, .mrow[aria-current] .mrow__t svg { opacity: 1; transform: none; transition-duration: 90ms; }
.mrow__d { grid-area: d; font-size: 14px; line-height: 1.45; color: var(--gts-text); }
.mrow__tags { grid-area: tags; align-self: center; font-size: 11.5px; letter-spacing: .04em; color: var(--gts-steel-deep); white-space: nowrap; }
.mega__foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 16px 0 22px; font-size: 14px; color: var(--gts-text); }
.mega__foot strong { color: var(--gts-text-strong); font-weight: 500; }
.mega__side { display: grid; gap: 12px; align-content: start; padding: 24px; background: var(--gts-canvas); border-left: 1px solid var(--gts-line); }
.mcard { display: block; background: #fff; border-radius: var(--gts-radius); box-shadow: var(--gts-shadow-card); padding: 16px 18px; }
.mcard__k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gts-steel-deep); margin-bottom: 8px; }
.mcard__date strong { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--gts-navy); }
.mcard__in { margin-left: 6px; font-size: 12px; color: var(--gts-steel-deep); }
.mcard__label, .mcard__p { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--gts-text); }
.mcard__t { display: block; font-size: 16px; font-weight: 500; color: var(--gts-navy); }
.mcard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 500; color: var(--gts-navy); }
.mcard__more svg { width: 11px; height: 11px; transition: transform var(--t-quick) var(--ease); }
.mcard--link { transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.mcard--link:hover { transform: translateY(-2px); box-shadow: var(--gts-shadow-card), rgba(30, 30, 44, .08) 0 10px 22px; transition-duration: 90ms; }
.mcard--link:hover .mcard__more svg, .mcard__more:hover svg { transform: translateX(2px); }
.mcard__now { font-size: 14px; font-weight: 500; color: var(--gts-text-strong); }
.mcard__phone { display: inline-block; margin-top: 8px; font-size: 18px; font-weight: 500; color: var(--gts-navy); }
.mega.is-open .mega__item { animation: megaItem var(--t-quick) var(--ease) both; animation-delay: calc(50ms + var(--i, 0) * 30ms); }
.mega.is-leaving .mega__item { animation: none; }
@keyframes megaItem { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mega__scrim { position: fixed; inset: 0; z-index: 40; background: rgba(246, 246, 248, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 140ms var(--ease-in), visibility 0s linear 140ms; }
.nav.has-mega .mega__scrim { opacity: 1; visibility: visible; transition: opacity var(--t-quick) var(--ease), visibility 0s; }

/* ---------- Phone sheet: native <details>, accordion sections, pinned call and book bar ---------- */
.sheet { display: none; }
.sheet > summary::-webkit-details-marker, .acc > summary::-webkit-details-marker { display: none; }
.menu-btn { list-style: none; display: inline-grid; place-items: center; width: 40px; height: 36px; border: 1px solid var(--gts-line); border-radius: var(--gts-radius); background: #fff; cursor: pointer; }
.menu-btn__bars { display: grid; gap: 4px; }
.menu-btn__bars i { display: block; width: 16px; height: 1.6px; background: var(--gts-text-strong); border-radius: 2px; transition: transform var(--t-quick) var(--ease), opacity var(--t-quick) var(--ease); }
.sheet[open] .menu-btn__bars i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.sheet[open] .menu-btn__bars i:nth-child(2) { opacity: 0; }
.sheet[open] .menu-btn__bars i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
.sheet__panel { position: fixed; left: 0; right: 0; top: var(--sheet-top, 100px); bottom: 0; z-index: 60; display: flex; flex-direction: column; background: var(--gts-canvas); border-top: 1px solid var(--gts-line); animation: sheetIn 280ms var(--ease) both; }
.sheet.is-closing .sheet__panel { animation: sheetOut 175ms var(--ease-in) both; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sheetOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
.sheet__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gts-gutter) 24px; }
.acc { border-bottom: 1px solid var(--gts-line); }
.acc__btn { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 60px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: var(--gts-text-strong); cursor: pointer; }
.acc__icon { position: relative; width: 16px; height: 16px; flex: none; transition: transform 150ms var(--ease); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: var(--gts-navy); }
.acc__icon::after { transform: rotate(90deg); }
.acc[open] .acc__icon { transform: rotate(45deg); }
.acc__list { padding-bottom: 10px; }
.acc__list a { display: grid; gap: 2px; align-content: center; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--gts-line-soft); }
.acc__t { font-size: 17px; font-weight: 500; color: var(--gts-navy); }
.acc__d { font-size: 14px; line-height: 1.4; color: var(--gts-text); }
.acc__list a[aria-current] .acc__t { text-decoration: underline; text-underline-offset: 4px; }
.acc[open] .acc__list li { animation: accIn 250ms var(--ease) both; animation-delay: calc(50ms + var(--i, 0) * 40ms); }
@keyframes accIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@supports (interpolate-size: allow-keywords) {
  .acc { interpolate-size: allow-keywords; }
  .acc::details-content { height: 0; overflow: clip; transition: height 175ms var(--ease-in), content-visibility 175ms allow-discrete; }
  .acc[open]::details-content { height: auto; transition: height 250ms var(--ease), content-visibility 250ms allow-discrete; }
}
.sheet__list a { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--gts-line); font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: var(--gts-text-strong); }
.sheet__list a[aria-current] { color: var(--gts-navy); }
.sheet[open] .acc, .sheet[open] .sheet__list li { animation: accIn 280ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.sheet__bar { display: grid; gap: 10px; padding: 12px var(--gts-gutter) calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--gts-line); }
.sheet__bar .btn { width: 100%; padding: 14px 20px; font-size: 16px; }

/* ---------- Home hero v3 (DESIGN.md "Hero v3"): Daylit's layout in Column's look ---------- */
.hero { position: relative; overflow: hidden; padding: 56px 0 80px; }
.hero__top { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 48px; align-items: end; }
.hero__top > * { min-width: 0; }
.hero h1 { font-size: var(--gts-display); line-height: 1.02; letter-spacing: -.03em; margin: 22px 0 0; }
.hero__line { display: block; }
.hero__sub { font-size: var(--gts-lead); line-height: 1.45; }
.hero__aside .ctas { margin-top: 24px; }
.ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.txmap { display: block; pointer-events: none; opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.txmap.is-drawn { opacity: 1; }
/* The draw-in (motion v2) reveals dots on the canvas itself, so the element shows at once. */
.txmap.is-drawing { opacity: 1; transition: none; }
/* The stage: a white panel; the Texas dot field is its texture (map.js "stage"), the story plays in the middle
   (hero-story.js), the office photo and walk-in widget sit over its right side. */
.hstage { position: relative; display: grid; margin-top: 44px; }
.hstage > * { grid-area: 1 / 1; min-width: 0; }
.hstage__panel { position: relative; height: 500px; background: #fff; border-radius: var(--gts-radius); box-shadow: var(--gts-shadow-card); overflow: hidden; }
.txmap--stage { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 56px); }
.story { position: absolute; left: 31%; top: 0; bottom: 56px; width: 380px; display: grid; align-content: center; }
.story__main { display: grid; }
.story__main > * { grid-area: 1 / 1; align-self: center; min-width: 0; }
.docs { display: grid; gap: 10px; }
.doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: var(--gts-radius); padding: 10px 12px 10px 14px; box-shadow: rgba(18, 22, 30, .07) 0 6px 16px, rgba(18, 22, 30, .07) 0 0 0 1px; }
.doc__f { display: grid; gap: 1px; min-width: 0; }
.doc__form { font-size: 13px; font-weight: 500; color: var(--gts-navy); }
.doc__desc { font-size: 12.5px; color: var(--gts-steel-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtag, .rpill { display: inline-grid; justify-items: end; flex: none; }
.dtag > span, .rpill > span { grid-area: 1 / 1; width: max-content; display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; border-radius: var(--gts-pill); }
.dtag > span { font-size: 12.5px; color: var(--gts-text-strong); background: var(--gts-canvas); padding: 4px 10px 4px 9px; }
.dtag i { width: 6px; height: 6px; border-radius: 50%; background: var(--tone, #A3A8B4); flex: none; }
.dtag--navy { --tone: #28378B; }
.dtag--amber { --tone: #C27A12; }
.dtag--violet { --tone: #6A55C2; }
.dtag--sea { --tone: #167E6C; }
/* A medium lift: the walk-in widget keeps the page's one dramatic shadow (DESIGN.md ledger). */
.rcard { background: #fff; border-radius: var(--gts-radius); box-shadow: rgba(30, 30, 44, .1) 0 16px 40px, rgba(18, 22, 30, .06) 0 0 0 1px; padding: 16px 18px 18px; }
.rcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--gts-line); }
.rcard__label { font-size: 11px; letter-spacing: .06em; color: var(--gts-steel-deep); }
.rcard__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--gts-navy); margin-top: 2px; }
.rpill > span { justify-content: center; font-size: 12.5px; font-weight: 500; padding: 5px 11px; }
.rpill__a { color: var(--gts-navy); background: rgba(40, 55, 139, .08); }
.rpill__b { color: var(--gts-sea); background: rgba(22, 126, 108, .1); }
.rpill svg { width: 13px; height: 13px; }
.rpill__spin { width: 10px; height: 10px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rchecks { display: grid; margin: 8px 0 14px; }
.rcheck { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--gts-text-strong); }
.rcheck svg { width: 16px; height: 16px; flex: none; color: var(--gts-sea); }
.rcard__bar { height: 4px; border-radius: 2px; background: var(--gts-line-soft); overflow: hidden; }
.rcard__bar i { display: block; height: 100%; background: var(--gts-navy); transform-origin: left center; }
.toast { justify-self: center; display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 10px 14px; border-radius: var(--gts-radius); background: var(--gts-deep); color: #fff; font-size: 13.5px; font-weight: 500; box-shadow: rgba(19, 26, 64, .22) 0 10px 28px; }
.toast svg { width: 16px; height: 16px; flex: none; color: #7FD8C4; }
.toast__when { margin-left: 6px; font-size: 11px; font-weight: 400; letter-spacing: .06em; color: var(--gts-on-deep-muted); }
/* Static (server) state = the finished story: card, "Accepted", toast. hero-story.js sets data-run and plays it. */
.story:not([data-run]) .docs, .story:not([data-run]) .dtag__a, .story:not([data-run]) .rpill__a { visibility: hidden; }
.story[data-run] .doc, .story[data-run] .rcard, .story[data-run] .toast, .story[data-run] .dtag__b, .story[data-run] .rpill > span { opacity: 0; }
.story[data-run] .rcheck { color: var(--gts-steel-deep); }
.story[data-run] .rcheck .tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.story[data-run] .rcard__bar i { transform: scaleX(0); }
.hstage__foot { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 12px 0 calc(31% - 10px); border-top: 1px solid var(--gts-line); background: rgba(255, 255, 255, .9); }
.s4list { display: flex; gap: 4px; flex: 1; min-width: 0; }
.s4 { position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--gts-steel-deep); white-space: nowrap; transition: color var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease); }
.s4 b { font-family: var(--gts-mono); font-size: 11px; font-weight: 500; }
.s4.is-on { color: var(--gts-navy); background: rgba(40, 55, 139, .06); }
.s4__fill { position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 1px; background: var(--gts-navy); opacity: .55; transform: scaleX(0); transform-origin: left center; }
.hstage__pause { margin-left: auto; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--gts-line); border-radius: var(--gts-radius); background: #fff; color: var(--gts-text-strong); transition: border-color var(--t-quick) var(--ease); }
.hstage__pause[hidden] { display: none; }
.hstage__pause:hover { border-color: #c9cbd3; }
.hstage__pause svg { width: 12px; height: 12px; grid-area: 1 / 1; }
.hstage__pause .i-play, .hstage__pause[data-paused] .i-pause { display: none; }
.hstage__pause[data-paused] .i-play { display: block; }
.hstage__office { position: relative; z-index: 2; justify-self: end; align-self: start; width: 340px; margin: 28px 28px 0 0; }
/* Hero v5: the woman stands in the stage's right third. The stand is the stage above the foot bar and clips at its
   hairline, so her cut waist always rests on that line whatever the planes and the pointer do (she extends 14px under
   it); a soft contact shadow and a faint pool of light sit behind her. */
.hstage__stand { position: relative; z-index: 1; align-self: start; height: calc(500px - 56px); overflow: hidden; border-radius: var(--gts-radius) var(--gts-radius) 0 0; pointer-events: none; }
.hstage__lady { position: absolute; right: 14px; bottom: -14px; width: 290px; }
.lady { position: relative; margin: 0; }
.lady::before { content: ""; position: absolute; left: -28px; right: -28px; bottom: 0; height: 330px; background: radial-gradient(closest-side, rgba(40, 55, 139, .085), rgba(40, 55, 139, 0)); }
.lady::after { content: ""; position: absolute; left: -16%; right: -16%; bottom: -8px; height: 44px; background: radial-gradient(closest-side, rgba(19, 26, 64, .22), rgba(19, 26, 64, 0)); }
.lady picture { position: relative; z-index: 1; display: block; }
.lady__img { display: block; width: 100%; height: auto; filter: drop-shadow(rgba(19, 26, 64, .16) 0 10px 18px); }
.lady .notes--lady { left: auto; right: calc(100% - 80px); top: 6px; width: max-content; z-index: 2; align-items: flex-end; }
.lady .notes--lady .note { white-space: nowrap; }
.frame { position: relative; border-radius: var(--gts-radius); overflow: hidden; background: #e9eaee; }
.frame picture, .frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.notes { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.note { display: flex; gap: 8px; align-items: center; background: rgba(19, 26, 64, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; border-radius: var(--gts-radius); padding: 7px 12px; font-size: 13px; font-weight: 500; }
.note svg { width: 14px; height: 14px; flex: none; }
/* Hero planes (DESIGN.md "Motion v2"): scroll transforms go on the .plane wrappers, the CSS entrances on what is
   inside them, so the two never fight over one transform. */
.plane--photo { position: relative; }
.plane--widget { position: absolute; left: -64px; top: 168px; width: 268px; z-index: 2; }
.plane--widget .wrow > span { white-space: nowrap; }
.widget { position: relative; width: 100%; background: #fff; border-radius: var(--gts-radius); box-shadow: var(--gts-shadow-widget); padding: 12px 0; }
.widget__h { font-size: 11px; letter-spacing: .06em; color: var(--gts-steel-deep); padding: 2px 18px 10px; border-bottom: 1px solid var(--gts-line); }
.wrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; font-size: 14px; color: var(--gts-text); }
.wrow + .wrow { border-top: 1px solid var(--gts-line-soft); }
.wrow b { font-weight: 500; color: var(--gts-navy); display: flex; align-items: center; gap: 7px; text-align: right; }
.status { display: inline-flex; align-items: center; gap: 8px; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gts-steel); flex: none; }
.status[data-state="open"] .status__dot { background: var(--gts-sea); animation: breathe 2000ms cubic-bezier(.37, 0, .63, 1) infinite alternate; }
@keyframes breathe { from { opacity: .6; transform: scale(.95); } to { opacity: 1; transform: scale(1.05); } }

/* ---------- Bands and section rhythm (Column: white and canvas alternate, 72px gaps) ---------- */
.band { padding: var(--gts-section) 0; }
.band--white { background: #fff; }
.band--tight { padding: 0 0 var(--gts-section); }
.band--deep { background: var(--gts-deep); color: var(--gts-on-deep-muted); }
.band--deep h2, .band--deep h3 { color: #fff; }

/* ---------- Forms strip (Ambrook strip, Column logo bar) ---------- */
.strip { padding: 34px 0 40px; border-top: 1px solid var(--gts-line); }
.strip .tag { margin-bottom: 22px; }
.strip__track { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.strip__track:focus-visible { outline-offset: -2px; }
.strip__row { display: flex; flex: none; gap: 48px; padding-right: 48px; white-space: nowrap; }
.strip__row li { font-size: 15px; letter-spacing: .02em; color: var(--gts-steel-deep); }
.js .strip__row { animation: slide var(--strip-dur, 60s) linear infinite; }
.strip__track:hover .strip__row, .strip__track:focus-within .strip__row, .strip__track:focus .strip__row { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }

/* ---------- Cards (Column Bordered Content Card) ---------- */
.cards { display: grid; gap: 16px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border-radius: var(--gts-radius); box-shadow: var(--gts-shadow-card); padding: var(--gts-card-pad); position: relative; }
.card__link { display: flex; flex-direction: column; height: calc(100% + 2 * var(--gts-card-pad)); margin: calc(-1 * var(--gts-card-pad)); padding: var(--gts-card-pad); border-radius: inherit; }
.card__k { font-size: 12px; letter-spacing: .04em; color: var(--gts-steel-deep); }
.card__t { font-size: var(--gts-h3); font-weight: 500; color: var(--gts-navy); letter-spacing: -.01em; margin: 14px 0 8px; }
.card__p { font-size: 15px; line-height: 1.5; color: var(--gts-text); }
.card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 500; color: var(--gts-navy); }
.card__more svg { width: 12px; height: 12px; }
.cards .card { transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.cards .card:hover { transform: translateY(-2px); box-shadow: rgba(18, 22, 30, .03) 0 1px 4px, rgba(18, 22, 30, .05) 0 1px 0, rgba(18, 22, 30, .03) 0 0 0 1px, rgba(30, 30, 44, .1) 0 12px 28px; transition-duration: 90ms; }

/* ---------- Deadline band ---------- */
.dlband { position: relative; overflow: hidden; isolation: isolate; }
.dlband__media { position: absolute; top: -40px; bottom: -40px; left: 44%; right: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%); mask-image: linear-gradient(90deg, transparent, #000 32%); }
.dlband__video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms var(--ease); }
.dlband__video.is-ready { opacity: .18; }
.dlband__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.dlband__h { font-size: var(--gts-h2); font-weight: 600; letter-spacing: -.02em; margin: 18px 0 20px; }
.dlband__count { display: flex; align-items: baseline; gap: 14px; color: #fff; }
.dlband__num { font-size: 96px; line-height: 1; font-weight: 500; letter-spacing: -.04em; display: inline-block; }
.dlband__unit { font-size: 22px; color: var(--gts-on-deep-muted); }
.dlband__what { margin-top: 14px; font-size: 18px; }
.dlband__what strong { color: #fff; font-weight: 500; margin-right: 6px; }
.dlband__k { font-size: var(--gts-label); letter-spacing: .08em; text-transform: uppercase; color: var(--gts-on-deep-muted); margin-bottom: 10px; }
.dlband__list { border-top: 1px solid rgba(255, 255, 255, .14); margin-bottom: 18px; }
.dlband__list li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: 15px; }
.dlband__list .mono { color: var(--gts-on-deep-muted); font-size: 14px; }
.dlband__note { font-size: 14px; margin-bottom: 22px; }
.js .dlband__main.is-in .dlband__num { animation: settle var(--t-std) var(--ease) 100ms both; }
@keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Visit steps and checklist card ---------- */
.visit { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.steps--row { grid-template-columns: repeat(3, 1fr); }
.step { border-top: 1px solid var(--gts-line); padding-top: 18px; }
.step__n { font-size: 13px; color: var(--gts-steel-deep); }
.step h3 { font-size: var(--gts-h3); font-weight: 500; margin: 10px 0 8px; }
.step p { font-size: 15px; }
.steps--stack { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.step--card { border-top: 0; padding-top: 0; }
.step__inner { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 18px; align-items: start; background: #fff; border-radius: var(--gts-radius); box-shadow: var(--gts-shadow-card); padding: 26px 28px 28px; transform-origin: 50% 0; }
.step--card .step__n { font-size: 26px; line-height: 1.1; font-weight: 500; color: var(--gts-navy); }
.step--card h3 { margin: 0 0 8px; }
.step--card p { font-size: 16px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: 15px; color: var(--gts-text-strong); }
.ticks li + li { border-top: 1px solid var(--gts-line-soft); }
.ticks svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gts-navy); }
.ticks--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.ticks--2 li + li { border-top: 0; }
.ticks--2 li { border-bottom: 1px solid var(--gts-line); padding: 14px 0; }
.checkcard .card__t { margin-top: 10px; }
.checkcard .card__more { padding-top: 14px; }

/* ---------- Why points ---------- */
.points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.point { border-top: 1px solid var(--gts-line); padding-top: 18px; }
.point h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.point p { font-size: 15px; }

/* ---------- Office ---------- */
.office { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: stretch; }
.office__media { min-width: 0; }
.frame--office { height: 100%; min-height: 380px; }
.office--map .office__media { background: #fff; border-radius: var(--gts-radius); box-shadow: var(--gts-shadow-card); }
.txmap--office { width: 100%; height: 100%; min-height: 380px; }
.office__note { margin-top: 16px; font-size: 15px; }
.hcard { background: #fff; border-radius: var(--gts-radius); box-shadow: var(--gts-shadow-card); padding: var(--gts-card-pad); }
.hcard__h { font-size: 11px; letter-spacing: .06em; color: var(--gts-steel-deep); margin-bottom: 12px; }
.hcard__now { font-weight: 500; color: var(--gts-text-strong); padding-bottom: 14px; border-bottom: 1px solid var(--gts-line); }
.hcard__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--gts-line-soft); font-size: 15px; }
.hcard__rows dt { color: var(--gts-text); }
.hcard__rows dd { color: var(--gts-text-strong); font-weight: 500; text-align: right; }
.hcard__addr { margin-top: 16px; font-size: 15px; color: var(--gts-text-strong); }
.hcard__k { display: block; font-size: 12px; letter-spacing: .04em; color: var(--gts-steel-deep); margin-bottom: 4px; }
.hcard__addr .link { margin-top: 6px; font-size: 14px; }
.hcard__phone { font-size: 20px; font-weight: 500; color: var(--gts-navy); }

/* ---------- Split, FAQ, prose ---------- */
.split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.split > * { min-width: 0; }
.split__head .two { margin-top: 18px; font-size: 32px; }
.split__head p { margin-top: 20px; }
.prose p { font-size: 17px; line-height: 1.6; }
.prose p + p { margin-top: 16px; }
.faq { border-top: 1px solid var(--gts-line); }
.faq details { border-bottom: 1px solid var(--gts-line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; cursor: pointer; font-size: 17px; font-weight: 500; color: var(--gts-text-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gts-navy); }
.faq__chev { width: 14px; height: 14px; flex: none; color: var(--gts-navy); transition: transform var(--t-quick) var(--ease); }
.faq details[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 32px 20px 0; font-size: 16px; }
.faq__a a, .prose a, .legal a { color: var(--gts-navy); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Guides (PLAN Task 8): guide cards and the article column ---------- */
.shead--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.gcard .card__link { padding-top: 0; }
.gcard__img { display: block; margin: 0 calc(-1 * var(--gts-card-pad)) 18px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--gts-radius) var(--gts-radius) 0 0; background: var(--gts-line-soft); }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; }
.article { max-width: 720px; }
.article .article__meta { font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--gts-steel-deep); margin-bottom: 28px; }
.article h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.015em; font-weight: 600; color: var(--gts-navy); margin: 48px 0 14px; }
.article h3 { font-size: var(--gts-h3); line-height: 1.3; font-weight: 600; color: var(--gts-text-strong); margin: 30px 0 10px; }
.article ul, .article ol { margin: 14px 0; padding-left: 22px; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { font-size: 17px; line-height: 1.6; }
.article li + li { margin-top: 8px; }
.article li::marker { color: var(--gts-navy); }
.article p + ul, .article p + ol { margin-top: 14px; }
.article :is(ul, ol) + p { margin-top: 16px; }
.article h2 + p, .article h3 + p { margin-top: 0; }
.article em { color: var(--gts-steel-deep); }
.article .article__src-h { font-size: 18px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--gts-line); color: var(--gts-text-strong); }
.article .article__src li { font-size: 14px; line-height: 1.5; }
.article .article__src a { color: var(--gts-text); }
@media (max-width: 640px) {
  .article h2 { font-size: 24px; margin-top: 40px; }
  .article p, .article li { font-size: 16px; }
}

/* ---------- Closing call to action: the page's one red surface ---------- */
.cta { background: var(--gts-red); color: #fff; }
.cta__in { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.cta h2 { color: #fff; font-size: 36px; letter-spacing: -.02em; }
.cta p { margin-top: 8px; font-size: 17px; }
.cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cta__btns .btn:nth-child(2) { --b: 1; }
.btn--light { background: #fff; color: var(--gts-red); font-weight: 600; }
.btn--light:hover { background: #fff3f3; }

/* ---------- Inner page hero ---------- */
.phero { position: relative; overflow: hidden; }
.phero__grid { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: center; padding-top: 48px; padding-bottom: 72px; }
.phero__grid > * { min-width: 0; }
.phero--plain .phero__grid { grid-template-columns: 1fr 420px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; letter-spacing: .04em; color: var(--gts-steel-deep); margin-bottom: 26px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--gts-steel-deep); }
.crumbs a:hover { color: var(--gts-navy); text-decoration: underline; }
.phero h1 { font-size: var(--gts-h1); line-height: 1.05; letter-spacing: -.03em; margin: 18px 0 18px; }
.phero__lead { font-size: var(--gts-lead); line-height: 1.5; max-width: 600px; }
/* The section right after the inner hero continues the same canvas: no second full gap. */
.phero + .band:not(.band--white) { padding-top: 8px; }
.phero__msg { margin-top: 18px; font-size: 15px; }
.frame--phero { aspect-ratio: 5 / 4; }
.txmap--side { width: 420px; height: 340px; }
.frame--wide { aspect-ratio: var(--ar, 1145 / 290); }
.frame--media { aspect-ratio: 4 / 3; }
/* Homepage photo pair (coordinator 2026-10-14): two licensed photos, no text, between the visit steps and Why GTS. */
.duo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.frame--duo { aspect-ratio: 4 / 3; }
/* A photo band right after a white band gets its own top gap (it would otherwise sit on the band's edge). */
.band--white + .band--tight { padding-top: var(--gts-section); }
/* Service pages: Column's 2-column feature section, text left and the licensed photo right. */
.mediasplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.mediasplit__text .split__head { margin-bottom: 24px; }
.mediasplit__text .card__more { padding-top: 14px; }

/* ---------- Checklist, deadline table, booking, contact, legal ---------- */
.checklist__jump { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 28px; }
.checklist__print { margin-left: auto; }
.checklist__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.clist { scroll-margin-top: calc(var(--gts-nav-h) + 20px); }
.clist .card__t { margin-top: 0; margin-bottom: 12px; }
.clist li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--gts-line-soft); font-size: 15px; color: var(--gts-text-strong); }
.box { width: 16px; height: 16px; border: 1.5px solid var(--gts-navy); border-radius: 3px; flex: none; margin-top: 3px; }
.dtable { background: #fff; border-radius: var(--gts-radius); box-shadow: var(--gts-shadow-card); overflow: hidden; }
.dtable table { width: 100%; border-collapse: collapse; font-size: 16px; }
.dtable th { text-align: left; font-family: var(--gts-mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gts-steel-deep); padding: 14px 20px; border-bottom: 1px solid var(--gts-line); background: var(--gts-canvas); }
.dtable td { padding: 16px 20px; border-bottom: 1px solid var(--gts-line-soft); color: var(--gts-text-strong); vertical-align: top; }
.dtable td.mono { font-size: 14px; white-space: nowrap; color: var(--gts-navy); width: 34%; }
.dtable tr.is-next td { background: #f3f4fb; font-weight: 500; }
.dtable__note { margin-top: 14px; font-size: 14px; color: var(--gts-steel-deep); }
.booking { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.booking > * { min-width: 0; }
.booking__opts { grid-template-columns: 1fr; }
.booking__opts .card { display: flex; flex-direction: column; }
.booking__embed iframe { width: 100%; min-height: 720px; border: 0; border-radius: var(--gts-radius); background: #fff; margin-bottom: 24px; }
.contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: start; }
.contact > * { min-width: 0; }
.contact__info .two { margin-top: 18px; }
.contact__text { margin: 16px 0 24px; }
.lead { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field--full, .lead__foot, .lead__status, .lead__static-error { grid-column: 1 / -1; }
.field__label { font-size: 14px; font-weight: 500; color: var(--gts-text-strong); }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #cfd1d8; border-radius: var(--gts-radius); padding: 11px 12px; background: #fff; font-size: 16px; color: var(--gts-text-strong); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gts-navy); outline-offset: 0; border-color: var(--gts-navy); }
.field [aria-invalid="true"] { border-color: var(--gts-error); }
.field__hint { font-size: 13px; color: var(--gts-steel-deep); }
.field__error { font-size: 13px; color: var(--gts-error); font-weight: 500; }
.chips { border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { margin-bottom: 8px; }
.chips .chip { cursor: pointer; position: relative; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips input:checked + span { color: var(--gts-navy); font-weight: 600; }
.chips .chip:has(input:checked) { border-color: var(--gts-navy); background: #f3f4fb; }
.chips .chip:has(input:focus-visible) { outline: 2px solid var(--gts-navy); outline-offset: 2px; }
.choice { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--gts-text); }
.choice input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--gts-navy); }
.choice a, .lead__note a { color: var(--gts-navy); text-decoration: underline; }
.lead__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.lead__note { font-size: 13px; color: var(--gts-steel-deep); flex: 1 1 240px; }
.lead__status { font-size: 14px; font-weight: 500; min-height: 1em; }
.lead__status[data-state="error"] { color: var(--gts-error); }
.lead__static-error { display: none; color: var(--gts-error); font-weight: 500; }
.lead__static-error:target { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.print-only { display: none; }
.legal { max-width: 760px; }
.legal h2 { font-size: 22px; margin: 32px 0 10px; }
.legal h3 { font-size: 18px; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal p + p { margin-top: 12px; }
.linklist { margin-top: 16px; }
.linklist li { padding: 10px 0; border-bottom: 1px solid var(--gts-line-soft); }
.notfound { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.notfound p { margin-top: 12px; }

/* ---------- Footer (Column Deep Surface) ---------- */
.footer { background: var(--gts-deep); color: var(--gts-on-deep-muted); font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding: 64px 0 48px; }
.footer__brand img { height: 36px; width: auto; }
.footer__line { margin: 18px 0 14px; max-width: 320px; }
.footer__line + .footer__sister { margin-top: -6px; font-size: 14px; }
.footer__nap a { color: #fff; font-weight: 500; }
.footer__h { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.footer ul { list-style: none; }
.footer ul li + li { margin-top: 8px; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__hours div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.footer__hours dd { color: #fff; }
.footer__status { margin-top: 12px; color: #fff; font-size: 14px; }
.footer__base { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding: 22px 0 28px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; }
.footer__legal { display: flex; gap: 18px; }
.footer__by a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reveal on entry (DESIGN.md "Motion") ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease); transition-delay: calc(110ms + var(--i, 0) * 60ms); }
.js .shead[data-reveal], .js .split__head[data-reveal], .js .dlband__main[data-reveal], .js .strip[data-reveal] { transition-duration: var(--t-slow); transition-delay: 0ms; }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Heading lines (motion v2): app.js wraps each rendered line in .ln > .ln__in; the opener then only fades while its
   lines rise out of the mask, 450ms, 60ms apart (entrance-exit.md:31-32). Unwrapped again once in. */
.js [data-reveal].has-lines { transform: none; }
.ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.ln__in { display: block; transform: translateY(108%); transition: transform var(--t-slow) var(--ease); transition-delay: calc(var(--l, 0) * 60ms); }
.is-in .ln__in { transform: none; }
.js .cta__in[data-reveal] .cta__btns .btn { opacity: 0; transform: translateY(20px); transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease), background-color var(--t-quick) var(--ease); }
.js .cta__in[data-reveal].is-in .cta__btns .btn { opacity: 1; transform: none; transition-delay: calc(100ms + var(--b, 0) * 60ms), calc(100ms + var(--b, 0) * 60ms), 0ms; }
.js .hero .lady__img { opacity: 0; transform: translateY(18px); }
.is-ready .hero .lady__img { animation: ladyIn var(--t-slow) var(--ease) 120ms both; }
@keyframes ladyIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .cards .card[data-reveal].is-in { transition: opacity var(--t-std) var(--ease) calc(110ms + var(--i, 0) * 60ms), transform var(--t-std) var(--ease) calc(110ms + var(--i, 0) * 60ms), box-shadow 180ms var(--ease) calc(160ms + var(--i, 0) * 60ms); }
.js .cards .card[data-reveal].is-in.is-settled { transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.js .cards .card[data-reveal].is-in.is-settled:hover { transform: translateY(-2px); transition-duration: 90ms; }
.js .hero .note { opacity: 0; transform: translateX(-20px); }
.js .hero .widget { opacity: 0; transform: translateY(20px); }
.is-ready .hero .note { animation: noteIn var(--t-std) var(--ease) calc(200ms + var(--i, 0) * 80ms) both; }
.is-ready .hero .widget { animation: widgetIn var(--t-slow) var(--ease) 360ms both; }
@keyframes noteIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes widgetIn { 0% { opacity: 0; transform: translate(0, 20px); } 50% { opacity: 1; transform: translate(4px, 8px); } 100% { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .nav__links, .nav__phone { display: none; }
  .sheet { display: block; }
  .hero { padding: 32px 0 56px; }
  .hero__top { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__aside { margin-top: 16px; }
  .hstage { display: flex; flex-direction: column; margin-top: 36px; }
  /* Phones: Texas gets its own band at the top of the stage, the story plays under it. */
  .hstage__panel { height: 600px; }
  .txmap--stage { height: 150px; }
  .story { left: 0; right: 0; top: 140px; margin: 0 auto; width: min(380px, calc(100% - 28px)); }
  .hstage__foot { padding: 0 10px 0 12px; }
  .s4list { justify-content: center; }
  /* Phones: the woman gets a short stage of her own under the story, chest up (her waist is cut by the stage's
     bottom edge), notes to her left, and the walk-in widget overlapping its lower left corner. */
  .hstage__stand { align-self: stretch; height: 330px; margin-top: 20px; background: #fff; border-radius: var(--gts-radius); box-shadow: var(--gts-shadow-card); }
  .hstage__lady { right: 14px; width: 220px; }
  .lady::before { height: 280px; }
  .lady .notes--lady { right: calc(100% - 40px); top: 26px; align-items: flex-start; }
  .lady .notes--lady .note { white-space: normal; max-width: 150px; line-height: 1.25; }
  .hstage__office { justify-self: stretch; width: auto; margin: 0; }
  .plane--widget { position: relative; left: auto; top: auto; margin: -44px auto 0 12px; width: min(300px, 84%); }
  .mediasplit { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mega, .mega__scrim { display: none; }
  .dlband__media { left: 0; top: 46%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%); mask-image: linear-gradient(180deg, transparent, #000 28%); }
  .dlband__video { object-position: 72% 50%; }
  .cards--3, .cards--4 { grid-template-columns: 1fr 1fr; }
  .points { grid-template-columns: 1fr 1fr; }
  .visit, .office, .split, .contact, .booking, .dlband__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .phero__grid, .phero--plain .phero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 28px; padding-bottom: 56px; }
  .txmap--side { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .cta__in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  :root { --gts-section: 56px; }
  .announce { font-size: 12.5px; }
  .nav__logo img { height: 24px; }
  .nav__in { gap: 10px; }
  .nav__right { gap: 8px; }
  .btn--nav { padding: 7px 10px; font-size: 13px; }
  .pill { padding: 4px 8px; }
  .hero h1 { font-size: 36px; line-height: 1.04; margin: 18px 0 16px; }
  .hero__sub { font-size: 16px; line-height: 1.5; }
  .ctas { flex-direction: column; gap: 10px; margin-top: 24px; }
  .ctas .btn { width: 100%; padding: 14px 20px; font-size: 15px; }
  .two { font-size: 28px; }
  .split__head .two { font-size: 26px; }
  .phero h1 { font-size: 34px; }
  .phero__lead { font-size: 16px; }
  .cards--3, .cards--4, .points, .steps, .steps--row, .ticks--2, .checklist__grid, .lead, .notfound { grid-template-columns: minmax(0, 1fr); }
  .strip__row { gap: 36px; padding-right: 36px; }
  .strip__row li { font-size: 14px; }
  .dlband__num { font-size: 72px; }
  .dlband__list li { grid-template-columns: 76px 1fr; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 48px; }
  .cta h2 { font-size: 28px; }
  .cta__btns, .cta__btns .btn { width: 100%; }
  .dtable td, .dtable th { padding: 12px 14px; }
  .dtable td.mono { white-space: normal; }
  .checklist__print { margin-left: 0; }
  .frame--office { min-height: 0; aspect-ratio: 4 / 3; }
  .frame--wide { aspect-ratio: var(--ar-phone, var(--ar, 1145 / 290)); }
  .duo__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .frame--duo { aspect-ratio: 3 / 2; }
  .s4 { padding: 6px 8px; }
  .s4:not(.is-on) .s4__t { display: none; }
  .doc__desc { font-size: 12px; }
  .step__inner { grid-template-columns: 44px minmax(0, 1fr); padding: 22px 20px 24px; gap: 0 12px; }
  .step--card .step__n { font-size: 22px; }
}
@media (max-width: 360px) {
  .nav__book { display: none; }
}

/* ---------- Card stacking for the visit steps, 900px up (DESIGN.md "Motion v2"). Sticky only: no pinning, so scroll
   distance stays honest; app.js scales and dims the covered card with ScrollTrigger. ---------- */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .steps--stack { gap: 0; padding-bottom: min(12vh, 110px); }
  .js .step--card { position: sticky; top: calc(var(--gts-nav-h) + 40px + var(--i, 0) * 16px); margin-bottom: min(18vh, 170px); }
  .js .step--card:last-child { margin-bottom: 0; }
  .js .step--card .step__inner { min-height: 196px; }
  .js .visit__aside { position: sticky; top: calc(var(--gts-nav-h) + 40px); }
}

/* ---------- Photo drift, 1100px up: frames start at GSAP's own scale (motion.js), so a photo already on screen does not
   jump when the motion stack arrives after the first paint. ---------- */
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .js .frame[data-drift] img { transform: scale(1.08); }
}

/* ---------- Scroll-scrubbed plate over a still (motion.js initScrub): desktop only, fades in once seekable ---------- */
.frame__scrub { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-std) var(--ease); pointer-events: none; }
.frame__scrub.is-ready { opacity: 1; }
@media (max-width: 1099px), (prefers-reduced-motion: reduce) { .frame__scrub { display: none; } }

/* ---------- Lenis (its recommended CSS, lenis 1.3.11) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Reduced motion: no spatial movement, no loops (context-adaptation.md:18-29). The hero's supporting
   pieces still fade in place, opacity only, 150ms ("reduce duration 50%+"); everything else is simply there. ---------- */
@media (prefers-reduced-motion: reduce) {
  *:not(.note):not(.widget):not(.lady__img), *::before, *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; }
  .js [data-reveal], .js [data-reveal] .ln__in, .js .cta__in[data-reveal] .cta__btns .btn { opacity: 1; transform: none; }
  .js .hero .note, .js .hero .widget, .js .hero .lady__img { transform: none; }
  .is-ready .hero .note, .is-ready .hero .widget, .is-ready .hero .lady__img { animation: fadeOnly 150ms var(--ease) both; }
  @keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
  .mega, .mega.is-open, .sheet__panel { transform: none; }
  .strip__track { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .strip__row { flex-wrap: wrap; white-space: normal; row-gap: 12px; padding: 0 var(--gts-gutter); max-width: calc(var(--gts-max) + 2 * var(--gts-gutter)); margin: 0 auto; flex: 1 1 auto; }
  .strip__row--dup { display: none; }
  .cards .card:hover, .js .cards .card[data-reveal].is-in.is-settled:hover, .mcard--link:hover { transform: none; }
  .txmap { opacity: 1; }
  .hstage__pause { display: none; }
}

/* ---------- Hero v4: kinetic headline letters (hero-kinetic.js splits them after the first paint) ---------- */
.hero h1 .kw { display: inline-block; white-space: nowrap; }
.hero h1 .kl { display: inline-block; will-change: transform; }

/* ---------- GI Auto cross-link: one secondary band low on the page (DESIGN.md "GI Auto cross-link") ---------- */
.band--sister { padding: 0 0 var(--gts-section); }
.sister { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 24px; background: #fff; border: 1px solid var(--gts-line); border-radius: var(--gts-radius); }
.sister__txt { max-width: 62ch; }
.sister__h { font-size: 20px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; color: var(--gts-text-strong); margin: 4px 0 8px; }
.sister p:not(.tag) { margin: 0; font-size: 16px; line-height: 1.55; color: var(--gts-text); }
.sister__link { flex: none; white-space: nowrap; padding-left: 20px; padding-right: 20px; }
.sister__link svg { width: 12px; height: 12px; margin-left: 8px; }
.sister--line { padding: 16px 24px; }
.sister--line .tag { margin-bottom: 4px; }
@media (max-width: 719px) { .sister { flex-direction: column; align-items: stretch; } .sister__link { text-align: center; justify-content: center; } }

/* ---------- Print: the what-to-bring checklists on paper ---------- */
@media print {
  .announce, .nav, .footer, .cta, .phero .ctas, .crumbs, .checklist__jump, .skip, .txmap, .phero__media { display: none !important; }
  body, .band--white, .band { background: #fff !important; }
  .band { padding: 12px 0; }
  .phero__grid { display: block; padding: 0; }
  .phero h1 { font-size: 24px; margin: 4px 0; }
  .phero__lead { font-size: 12px; }
  .checklist__grid { display: block; }
  .card, .clist { box-shadow: none; border: 1px solid #999; break-inside: avoid; margin-bottom: 10px; padding: 12px; }
  .clist li { font-size: 11.5px; padding: 3px 0; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; }
  .print-only { display: block; font-size: 12px; margin: 0 0 10px; color: #000; }
}