/* ============================================================================
   GOTOTHERAPY — HOMEPAGE (P01)
   Requires tokens.css. Loaded on the front page only.

   Class names are flat and .gt- prefixed so the same styles can be applied to
   Elementor containers by pasting the class into Advanced > CSS Classes.
   ========================================================================== */

/* ============================================================================
   GOTOTHERAPY HOMEPAGE — preview build
   In WordPress: assets/css/tokens.css + assets/css/home.css
   ========================================================================== */


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.gt-home{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);line-height:1.65;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.gt-home::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}
.gt-home img{max-width:100%;height:auto;display:block}
.gt-home a{color:inherit;text-decoration:none}
.gt-home button, .gt-home input, .gt-home select{font:inherit;color:inherit}
.gt-home h1, .gt-home h2, .gt-home h3, .gt-home h4{margin:0;font-weight:400;letter-spacing:-.02em;line-height:1.06}
.gt-home p{margin:0}
.gt-home ul{margin:0;padding:0;list-style:none}

.gt-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1}
.gt-serif{font-family:var(--display)}
.gt-ital{font-style:italic}
.gt-eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);display:inline-flex;align-items:center;gap:.6rem}
.gt-eyebrow::before{content:"";width:26px;height:1px;background:var(--sky)}
.gt-lede{color:var(--ink-soft);font-size:1.0625rem;line-height:1.7;max-width:68ch}
.gt-home :focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:6px}
.gt-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--slate);color:var(--paper);
  padding:.85rem 1.25rem;border-radius:0 0 var(--r-input) 0}
.gt-skip:focus{left:0}
.gt-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- media ----
   Every photograph sits on a token-coloured plate. If an image is slow, blocked
   or 404s, the slot still reads as a designed surface rather than a broken box.
   width/height attributes plus aspect-ratio mean zero layout shift either way. */
.gt-media{position:relative;overflow:hidden;border-radius:var(--r-panel);
  background:linear-gradient(160deg,#CFE3F2,#EAF1F7);box-shadow:var(--shadow-m)}
.gt-media img{width:100%;height:100%;object-fit:cover;display:block}
.gt-media--card{border-radius:var(--r-card);box-shadow:none}
/* A whisper of navy over photography unifies otherwise mismatched stock, and
   stops warm-toned images fighting the desaturated blue palette. */
.gt-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,44,66,.06),rgba(13,44,66,.14));mix-blend-mode:multiply}

/* ------------------------------------------------------------- buttons ---- */
.gt-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;
  font-size:.9375rem;letter-spacing:-.01em;min-height:var(--tap);padding:.8rem 1.4rem;
  border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform var(--t-hover) var(--ease),background-color var(--t-hover),box-shadow var(--t-hover) var(--ease),border-color var(--t-hover)}
.gt-btn--primary{background:var(--slate);color:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.15) inset,var(--shadow-s)}
.gt-btn--primary:hover{background:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-m)}
.gt-btn--ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.gt-btn--ghost:hover{background:var(--wash);border-color:var(--sky);transform:translateY(-2px)}
.gt-btn--lg{padding:1.05rem 1.9rem;font-size:1rem}

/* ----------------------------------------------------------------- nav ---- */
.gt-nav{position:sticky;top:0;z-index:100;transition:background var(--t-reveal) var(--ease),box-shadow var(--t-reveal) var(--ease)}
.gt-nav.is-stuck{background:rgba(241,246,251,.82);backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 var(--line-soft)}
.gt-nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
.gt-brand{display:inline-flex;align-items:baseline;font-family:var(--display);font-size:1.6rem;
  letter-spacing:-.03em;color:var(--slate);line-height:1}
.gt-brand__dot{width:7px;height:7px;border-radius:50%;background:var(--clay);display:inline-block;
  margin-left:.12rem;transition:transform 500ms var(--ease)}
.gt-brand:hover .gt-brand__dot{transform:translateY(-6px)}
.gt-nav__links{display:flex;align-items:center;gap:.35rem}
.gt-nav__links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:.55rem .85rem;
  border-radius:var(--r-pill);font-size:.9375rem;font-weight:500;color:var(--ink-soft);transition:color .25s,background .25s}
.gt-nav__links a:hover{color:var(--ink);background:rgba(16,32,46,.05)}
.gt-nav__links .gt-btn,.gt-nav__links .gt-btn:hover{color:var(--paper)}
.gt-nav__toggle{display:none;align-items:center;min-height:var(--tap);padding:.55rem .95rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:.875rem;font-weight:600;cursor:pointer}
@media (max-width:900px){
  .gt-nav__links{position:fixed;inset:74px .75rem auto .75rem;flex-direction:column;align-items:stretch;
    gap:.15rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
    padding:.7rem;box-shadow:var(--shadow-l);opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .gt-nav__links.is-open{opacity:1;visibility:visible;transform:none}
  .gt-nav__links a{padding:.8rem 1rem;font-size:1rem}
  .gt-nav__links .gt-btn{margin-top:.35rem}
  .gt-nav__toggle{display:inline-flex}
}

/* ---------------------------------------------------------------- hero ----
   Two columns from 1000px: copy and search on the left, a tall photograph on
   the right. The previous build left the right half of the hero empty on
   desktop, which read as unfinished rather than spacious. */
.gt-hero{position:relative;overflow:hidden;padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(3rem,7vw,5rem)}
.gt-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.6;pointer-events:none;z-index:0}
.gt-blob--a{width:min(62vw,720px);aspect-ratio:1.25/1;top:-16%;right:-14%;
  background:radial-gradient(circle at 35% 40%,#BFDCF2,transparent 68%);animation:gt-drift 26s ease-in-out infinite}
.gt-blob--b{width:min(48vw,540px);aspect-ratio:1/1;bottom:-24%;left:-16%;
  background:radial-gradient(circle at 60% 50%,#D8E8F5,transparent 66%);animation:gt-drift 32s ease-in-out infinite reverse}
@keyframes gt-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,4%,0) scale(1.07)}}

.gt-hero__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);position:relative;z-index:1;align-items:start}
@media (min-width:1000px){
  .gt-hero__grid{grid-template-columns:1.08fr .92fr;align-items:center}
}
.gt-hero__copy{max-width:58ch}
.gt-h1{font-family:var(--display);font-size:clamp(2.6rem,1.4rem + 4.6vw,4.5rem);line-height:1.02;
  letter-spacing:-.028em;margin-top:1.1rem;color:var(--ink);text-wrap:balance}
.gt-hero__sub{margin-top:1.35rem;font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);color:var(--ink-soft);
  max-width:44ch;line-height:1.62}

/* Hero photograph, with a solid credential plate sitting over its lower edge.
   Brand §08: text is never set over a photograph without a solid or heavily
   blurred surface behind it. This is the solid version. */
.gt-hero__figure{position:relative;margin:0}
.gt-hero__figure .gt-media{aspect-ratio:4/5}
.gt-hero__plate{
  position:absolute;left:clamp(.75rem,2vw,1.25rem);right:clamp(.75rem,2vw,1.25rem);
  bottom:clamp(.75rem,2vw,1.25rem);
  background:var(--surface);border-radius:var(--r-card);
  padding:.95rem 1.1rem;box-shadow:var(--shadow-m);
}
.gt-hero__plate strong{display:block;font-size:.8125rem;font-weight:600;letter-spacing:-.01em}
.gt-hero__plate span{display:block;margin-top:.15rem;font-size:.75rem;color:var(--ink-soft);line-height:1.5}
.gt-hero__badge{
  position:absolute;top:clamp(.75rem,2vw,1.25rem);left:clamp(.75rem,2vw,1.25rem);
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--surface);border-radius:var(--r-pill);
  padding:.45rem .85rem;font-size:.75rem;font-weight:600;box-shadow:var(--shadow-s)
}
.gt-hero__badge svg{color:var(--slate)}

/* ---------------------------------------------------------- search card ---- */
.gt-search{position:relative;z-index:2;margin-top:clamp(1.75rem,3.5vw,2.25rem);
  background:rgba(252,253,255,.78);
  backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow-l),0 0 0 1px var(--line-soft);
  border-radius:var(--r-panel);padding:clamp(1.1rem,2.2vw,1.4rem)}
.gt-seg{border:0;padding:0;margin:0 0 1rem}
.gt-seg__track{display:inline-flex;position:relative;background:var(--paper-deep);border-radius:var(--r-pill);padding:4px}
.gt-seg__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--surface);
  border-radius:var(--r-pill);box-shadow:var(--shadow-s);transition:transform var(--t-toggle) var(--ease)}
.gt-seg__track:has(.gt-seg__radio:last-of-type:checked) .gt-seg__thumb{transform:translateX(100%)}
.gt-seg__radio{position:absolute;opacity:0;pointer-events:none}
.gt-seg__label{position:relative;z-index:1;cursor:pointer;flex:1 1 0;min-width:0;display:inline-flex;align-items:center;
  justify-content:center;min-height:40px;padding:.5rem 1.15rem;border-radius:var(--r-pill);
  font-size:.875rem;font-weight:600;color:var(--ink-soft);transition:color .3s;white-space:nowrap}
.gt-seg__radio:checked + .gt-seg__label{color:var(--slate)}
.gt-seg__radio:focus-visible + .gt-seg__label{outline:2.5px solid var(--clay);outline-offset:3px}
.gt-fields{display:grid;grid-template-columns:1fr;gap:.6rem}
.gt-field{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-field);
  padding:.65rem .95rem .55rem;transition:border-color .3s,box-shadow .3s}
.gt-field:focus-within{border-color:var(--sky);box-shadow:0 0 0 4px var(--wash)}
.gt-field label{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.15rem}
.gt-field input,.gt-field select{width:100%;border:0;background:transparent;padding:0;font-size:1rem;
  font-weight:500;min-height:26px;appearance:none;-webkit-appearance:none;outline:none}
.gt-field input::placeholder{color:var(--ink-mute-aa)}
.gt-field--select::after{content:"";position:absolute;right:1rem;top:60%;width:9px;height:9px;
  border-right:1.8px solid var(--ink-soft);border-bottom:1.8px solid var(--ink-soft);
  transform:translateY(-50%) rotate(45deg);pointer-events:none}
.gt-field--select select{padding-right:1.5rem}
.gt-search__go{width:100%;min-height:56px}
.gt-search__go svg{transition:transform var(--t-hover) var(--ease)}
.gt-search__go:hover svg{transform:translateX(3px)}
.gt-popular{margin-top:.85rem;font-size:.8125rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;
  gap:.3rem .5rem;align-items:center}
.gt-popular a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--sky);
  text-underline-offset:3px;transition:color .25s,text-decoration-color .25s}
.gt-popular a:hover{color:var(--slate);text-decoration-color:var(--slate)}
/* Field layout follows the width the card actually gets, not the viewport.
   Between 760 and 999px the hero is one column, so the card is full width and
   all three controls sit across. From 1000px the hero splits in two and the
   card only has about half the page: two fields across, button spanning both.
   Cramming three controls into that column truncated both labels. */
@media (min-width:760px){
  .gt-fields{grid-template-columns:1.1fr 1fr auto;gap:.5rem;align-items:stretch}
  .gt-search__go{min-width:126px;width:auto;padding-inline:1.5rem}
}
@media (min-width:1000px){
  .gt-fields{grid-template-columns:1fr 1fr;gap:.5rem}
  .gt-search__go{grid-column:1 / -1;width:100%;min-width:0;min-height:52px}
}
@media (min-width:1320px){
  .gt-fields{grid-template-columns:1.1fr 1fr auto}
  .gt-search__go{grid-column:auto;width:auto;min-width:126px;padding-inline:1.5rem;min-height:56px}
}

/* ------------------------------------------------------------ trust bar ---- */
.gt-trust{border-block:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(231,241,249,.65),rgba(231,241,249,0))}
.gt-trust ul{display:grid;grid-template-columns:1fr;gap:.25rem;padding-block:1.1rem}
.gt-trust li{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;font-size:.9375rem;font-weight:500;color:var(--ink)}
.gt-trust__icon{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--wash);
  display:grid;place-items:center;color:var(--slate)}
@media (min-width:820px){
  .gt-trust ul{grid-template-columns:repeat(3,1fr);gap:1.5rem;padding-block:1.35rem}
  .gt-trust li{justify-content:center}
}

/* -------------------------------------------------------------- section ---- */
.gt-section{position:relative;z-index:1;padding-block:clamp(3.5rem,7vw,6rem)}
.gt-section--tight{padding-top:0}
.gt-section__head{display:grid;gap:1rem;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.gt-section__head h2{font-family:var(--display);font-size:clamp(2rem,1.3rem + 3vw,3.25rem);line-height:1.05;max-width:20ch}
.gt-section__head .gt-lede{max-width:52ch}
@media (min-width:900px){
  .gt-section__head{grid-template-columns:1.1fr .9fr;align-items:end;gap:2.5rem}
  .gt-section__head .gt-lede{justify-self:end}
}
/* Editorial section numeral. Instrument Serif never below 18px, never bolded. */
.gt-num{font-family:var(--display);font-size:1.125rem;color:var(--sky);display:block;margin-bottom:.35rem}

/* ----------------------------------------------------------- issue tags ---- */
.gt-tags{display:flex;flex-wrap:wrap;gap:.6rem}
.gt-tag{display:inline-flex;align-items:center;gap:.7rem;min-height:var(--tap);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.8rem 1.15rem;font-size:1rem;
  font-weight:500;color:var(--ink);
  transition:transform var(--t-hover) var(--ease),border-color var(--t-hover),box-shadow var(--t-hover) var(--ease)}
.gt-tag__n{font-size:.75rem;font-weight:600;color:var(--ink-soft)}
.gt-tag:hover{transform:translateY(-3px);border-color:var(--sky);box-shadow:var(--shadow-m)}
.gt-tag--lg{font-family:var(--display);letter-spacing:-.01em;font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);padding:.65rem 1.4rem}
.gt-tag--wash{background:var(--wash);border-color:transparent}
.gt-tag--wash:hover{border-color:var(--sky)}
.gt-tag--clay{background:var(--clay-soft);border-color:transparent}
.gt-tag--clay:hover{border-color:var(--clay)}
.gt-more{margin-top:1.5rem;font-size:.9375rem}
.gt-more a{font-weight:600;border-bottom:1.5px solid var(--sky);padding-bottom:2px;transition:border-color .3s,color .3s}
.gt-more a:hover{color:var(--slate);border-color:var(--slate)}

/* ------------------------------------------------------------ value prop --- */
.gt-value{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:940px){.gt-value{grid-template-columns:.92fr 1.08fr}}
.gt-value__figure{position:relative;margin:0}
.gt-value__figure .gt-media{aspect-ratio:4/4.6}
/* Overlapping quote plate. Asymmetric on purpose — it breaks the grid line
   between image and text and stops the section reading as two boxes. */
.gt-value__quote{
  position:absolute;right:clamp(-1.5rem,-2vw,-.5rem);bottom:clamp(1.5rem,4vw,2.5rem);
  max-width:19rem;background:var(--surface);border-radius:var(--r-card);
  padding:1.1rem 1.25rem;box-shadow:var(--shadow-l)}
.gt-value__quote p{font-family:var(--display);font-size:1.25rem;line-height:1.3;letter-spacing:-.015em}
.gt-value__quote cite{display:block;margin-top:.5rem;font-family:var(--ui);font-size:.75rem;
  font-style:normal;color:var(--ink-soft);letter-spacing:.02em}
@media (max-width:939px){.gt-value__quote{position:static;max-width:none;margin-top:-2rem;margin-inline:1rem;box-shadow:var(--shadow-m)}}

.gt-value__list{margin-top:1.9rem;display:grid;gap:1.15rem}
.gt-value__list li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.gt-value__list h3{font-family:var(--ui);font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;
  margin-bottom:.2rem;line-height:1.35}
.gt-value__list p{font-size:.9375rem;color:var(--ink-soft);line-height:1.6}
.gt-check{width:26px;height:26px;border-radius:50%;background:var(--slate);color:var(--paper);
  display:grid;place-items:center;margin-top:2px}

/* ------------------------------------------------------------- locations --- */
/* New block. Eight location pages ship in Phase 1 and nothing on the homepage
   pointed at them except footer text links. Photographs of ordinary British
   streets in flat daylight are the brand's own photography direction, and they
   do more than decoration: they tell a visitor this is a UK service. */
.gt-places{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.gt-places{grid-template-columns:repeat(4,1fr)}}
.gt-place{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;
  transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.gt-place:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.gt-place .gt-media{border-radius:var(--r-card);aspect-ratio:3/4;box-shadow:none}
.gt-place__label{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;
  background:var(--surface);border-radius:var(--r-input);padding:.6rem .75rem}
.gt-place__label strong{display:block;font-family:var(--display);font-size:1.25rem;letter-spacing:-.01em;line-height:1.15}
.gt-place__label span{display:block;font-size:.75rem;color:var(--ink-soft);margin-top:.1rem}
/* Fourth tile is a CTA rather than a fourth city — a photograph of one more
   town would say nothing the first three have not already said. */
.gt-place--all{display:flex;flex-direction:column;align-items:flex-start;
  background:var(--navy);color:var(--paper-on-navy);padding:1.25rem;aspect-ratio:3/4}
.gt-place--all span{margin-top:auto}
.gt-place--all h3{font-family:var(--display);font-size:1.5rem;color:var(--paper-on-navy);line-height:1.15}
.gt-place--all p{font-size:.8125rem;color:var(--ink-soft-on-navy);margin-top:.5rem;line-height:1.55}
.gt-place--all span{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;font-weight:600;color:#fff}
.gt-place--all:hover span svg{transform:translateX(4px)}
.gt-place--all svg{transition:transform var(--t-hover) var(--ease)}

/* ------------------------------------------------------------ therapists --- */
.gt-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);gap:1rem;overflow-x:auto;
  padding:.5rem .25rem 1.25rem;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
  scroll-snap-type:x mandatory;scrollbar-width:none}
.gt-rail::-webkit-scrollbar{display:none}
@media (min-width:1000px){
  .gt-rail{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin-inline:0;padding-inline:0}
}
.gt-tcard{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-card);padding:1.5rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.85rem;
  transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),border-color .3s}
.gt-tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);border-color:var(--sky-soft)}
/* Initials, in the display face. Members supply their own portraits at
   onboarding; a stock face here would be a person who is not a member of this
   directory, presented as one. */
.gt-avatar{width:76px;height:76px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  font-family:var(--display);font-size:1.7rem;color:var(--navy);
  background:linear-gradient(150deg,#D5E7F5,#AFCFE8);box-shadow:inset 0 0 0 1px rgba(16,32,46,.09)}
.gt-avatar--b{background:linear-gradient(150deg,#E3EEF6,#BFD9EC)}
.gt-avatar--c{background:linear-gradient(150deg,#DCE9F3,#A9C9E4)}
.gt-tcard__name{display:flex;align-items:center;gap:.45rem;font-family:var(--display);font-size:1.375rem;letter-spacing:-.01em}
.gt-verified{display:inline-grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  background:var(--navy);color:var(--paper)}
.gt-tcard__spec{font-size:.875rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.gt-tcard__meta{font-size:.875rem;color:var(--ink-soft);line-height:1.6}
.gt-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
.gt-chip{font-size:.75rem;font-weight:500;background:var(--wash);color:var(--ink-soft);padding:.3rem .6rem;border-radius:var(--r-pill)}
.gt-tcard .gt-btn{margin-top:auto;width:100%}
.gt-sample{margin-top:.25rem;font-size:.8125rem;color:var(--ink-soft);max-width:58ch;font-style:italic}
.gt-rail__note{margin-top:1rem;font-size:.875rem;color:var(--ink-soft);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.gt-rail__note a{text-decoration:underline;text-underline-offset:3px}

/* -------------------------------------------------------------- articles --- */
.gt-arts{display:grid;gap:1.75rem}
@media (min-width:900px){.gt-arts{grid-template-columns:repeat(3,1fr);gap:2rem}}
.gt-art{display:grid;gap:.85rem;align-content:start;transition:transform var(--t-hover) var(--ease)}
.gt-art:hover{transform:translateY(-4px)}
.gt-art .gt-media{aspect-ratio:16/10;border-radius:var(--r-card);box-shadow:none}
.gt-art:hover .gt-media{box-shadow:var(--shadow-m)}
.gt-art__cat{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.gt-art h3{font-family:var(--display);font-size:1.5rem;line-height:1.18;letter-spacing:-.015em;max-width:24ch}
.gt-art:hover h3{color:var(--slate)}
.gt-art p{font-size:.9375rem;color:var(--ink-soft);line-height:1.62}
.gt-art__meta{font-size:.75rem;color:var(--ink-soft);letter-spacing:.02em;
  border-top:1px solid var(--line-soft);padding-top:.7rem;margin-top:.15rem}

/* -------------------------------------------------------------- CTA band --- */
.gt-band{position:relative;overflow:hidden;border-radius:var(--r-panel);background:var(--navy);
  color:var(--paper-on-navy);display:grid;align-items:center}
@media (min-width:900px){.gt-band{grid-template-columns:1.05fr .95fr}}
.gt-band__copy{padding:clamp(2rem,4.5vw,3.5rem)}
.gt-band h2{font-family:var(--display);font-size:clamp(1.85rem,1.3rem + 2.4vw,2.75rem);max-width:20ch;color:var(--paper-on-navy)}
.gt-band p{margin-top:.9rem;color:var(--ink-soft-on-navy);max-width:46ch}
.gt-band .gt-eyebrow{color:var(--ink-soft-on-navy)}
.gt-band__actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.75rem}
.gt-band .gt-btn--primary{background:var(--paper);color:var(--navy)}
.gt-band .gt-btn--primary:hover{background:#fff}
.gt-band .gt-btn--ghost{background:transparent;border-color:var(--line-navy);color:var(--paper-on-navy)}
.gt-band .gt-btn--ghost:hover{background:rgba(255,255,255,.08);border-color:var(--sky)}
.gt-band__figure{position:relative;margin:0;height:100%;min-height:260px}
.gt-band__figure .gt-media{height:100%;border-radius:0;box-shadow:none;aspect-ratio:auto}
@media (max-width:899px){.gt-band__figure{min-height:220px;order:-1}}

/* ---------------------------------------------------------------- footer --- */
.gt-footer{background:var(--navy);color:var(--ink-soft-on-navy);margin-top:clamp(3rem,7vw,5rem);position:relative;z-index:1}
.gt-footer__top{display:grid;gap:2.5rem;padding-block:clamp(3rem,6vw,4.5rem) 2.5rem}
@media (min-width:880px){.gt-footer__top{grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}}
.gt-footer__brand{font-family:var(--display);font-size:2rem;color:var(--paper-on-navy);letter-spacing:-.03em}
.gt-footer__blurb{margin-top:.85rem;font-size:.9375rem;line-height:1.65;max-width:34ch}
.gt-crisis{margin-top:1.4rem;border:1px solid var(--line-navy);border-radius:var(--r-field);
  padding:.9rem 1rem;font-size:.8125rem;line-height:1.6;color:var(--paper-on-navy)}
.gt-crisis strong{display:block;margin-bottom:.15rem;font-size:.875rem;color:#fff}
.gt-crisis a{text-decoration:underline;text-underline-offset:3px}
.gt-footer__col h2{font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sky);margin-bottom:1rem}
.gt-footer__col li{margin-bottom:.1rem}
.gt-footer__col a{display:inline-flex;align-items:center;min-height:34px;font-size:.9375rem;
  color:var(--ink-soft-on-navy);transition:color .25s,padding-left .3s}
.gt-footer__col a:hover{color:#fff;padding-left:4px}
.gt-footer__bot{border-top:1px solid var(--line-navy);padding-block:1.5rem 2rem;display:grid;gap:1rem;
  font-size:.8125rem;color:var(--ink-mute-on-navy)}
@media (min-width:760px){.gt-footer__bot{grid-template-columns:1fr auto;align-items:center}}
.gt-footer__legal{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}
.gt-footer__legal a{color:var(--ink-mute-on-navy)}
.gt-footer__legal a:hover{color:#fff}
.gt-credit{margin-top:.75rem;font-size:.6875rem;color:var(--ink-mute-on-navy);opacity:.75}
.gt-credit a{text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------------- reveal --- */
.js .gt-reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.js .gt-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .gt-reveal{opacity:1;transform:none}
  .gt-blob{animation:none}
}
