/* ==========================================================================
   Tax Help Spain: home page
   Colours, type and spacing follow the Claude Design canvas (Home.dc.html).
   ========================================================================== */

:root {
  /* Brand */
  --ths-green:        #1c4332;  /* primary ink / dark surfaces */
  --ths-green-deep:   #14251d;  /* footer panel */
  --ths-accent:       #3fa76c;  /* accent green */
  --ths-mint:         #7ee0a6;  /* on-dark accent */

  /* Surfaces */
  --ths-bg:           #ffffff;
  --ths-off:          #fdfdfc;
  --ths-band:         #f3f4f1;
  --ths-chip:         #eef3ee;

  /* Lines */
  --ths-line:         #e6e7e3;
  --ths-line-soft:    #d7dcd6;
  --ths-line-band:    #e2e6e2;
  --ths-line-menu:    #e9ebe6;

  /* Text */
  --ths-body:         #4a5b50;
  --ths-muted:        #839586;
  --ths-faint:        #9aa89e;
  --ths-on-dark:      #a7bfb0;
  --ths-on-dark-dim:  #6f8a7c;

  /* Avatar ramp */
  --ths-ramp-1:       #cdd8ce;
  --ths-ramp-2:       #b3c4b6;
  --ths-ramp-3:       #9ab3a0;

  --ths-max:          1120px;
  --ths-gutter:       32px;
  --ths-nav-pad:      14px;
  --ths-section-y:    96px;

  /* Radius scale. Buttons and inputs stay small-radius so they read as
     controls; panels, cards and media are softly rounded; the pill is for
     tags, avatars and the floating button only. */
  --ths-r-btn:        6px;
  --ths-r-input:      8px;
  --ths-r-tile:       8px;
  --ths-r-card:       12px;
  --ths-r-panel:      16px;
  --ths-r-pill:       999px;

  /* One duration for every hover: surfaces change colour, they do not move. */
  --ths-t:            .3s ease-in-out;

  --ths-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
              'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ths-ease: cubic-bezier(.22, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none, which any component rule with a
   display of its own outranks. Pin it so toggling the attribute always works. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ths-bg);
  color: var(--ths-green);
  font-family: var(--ths-font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; }
input, select, textarea, button { font-family: inherit; }

a { color: var(--ths-green); text-decoration: none; }
a:hover { color: var(--ths-accent); }

:focus-visible {
  outline: 2px solid var(--ths-accent);
  outline-offset: 3px;
}

.ths-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Clipped in place rather than parked off to the left. A negative offset that
   large paints outside the viewport, and a view transition snapshots painted
   content, so it swept in from the left edge during page changes. */
.ths-skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--ths-green);
  color: var(--ths-off);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  clip-path: inset(50%);
}
.ths-skip { border-radius: var(--ths-r-btn); }
.ths-skip:focus { clip-path: none; color: var(--ths-off); }

.ths-accent { color: var(--ths-accent); }
.ths-mint   { color: var(--ths-mint); }

#ths-top-sentinel { height: 1px; }

/* --------------------------------------------------------------- buttons */

.ths-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ths-r-btn);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 0;
  transition: background-color var(--ths-t), border-color var(--ths-t),
              color var(--ths-t);
}
.ths-btn--sm { font-size: 14px; }

.ths-btn--solid {
  background: var(--ths-green);
  color: var(--ths-off);
  padding: 12px 24px;
}
.ths-btn--solid:hover { background: var(--ths-green-deep); color: var(--ths-off); }
.ths-btn--sm.ths-btn--solid { padding: 10px 16px; white-space: nowrap; }

.ths-btn--outline {
  border: 1px solid var(--ths-green);
  color: var(--ths-green);
  padding: 11px 23px;
}
.ths-btn--outline:hover { background: var(--ths-chip); color: var(--ths-green); }

.ths-btn--google {
  gap: 8px;
  font-size: 15px;
  padding: 12px 18px;
  white-space: nowrap;
}

.ths-btn--mint {
  background: var(--ths-mint);
  color: var(--ths-green);
  font-weight: 700;
  padding: 14px 24px;
}
/* Lightened from the token rather than picked by hand, so the hover stays tied
   to the brand mint if that value ever moves. */
.ths-btn--mint:hover {
  background: color-mix(in srgb, var(--ths-mint) 84%, #ffffff);
  color: var(--ths-green);
}

.ths-btn--mint-outline {
  border: 2px solid var(--ths-mint);
  color: var(--ths-mint);
  font-weight: 700;
  padding: 12px 22px;
}
.ths-btn--mint-outline:hover {
  background: rgba(126, 224, 166, 0.12);
  color: var(--ths-mint);
}

/* ------------------------------------------------------------------- nav */

.ths-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
  border-bottom: 1px solid transparent;
  overflow: visible;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.ths-nav__inner {
  position: relative;
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: var(--ths-nav-pad) var(--ths-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ths-brand { display: flex; align-items: center; gap: 12px; }
.ths-brand__mark {
  background: var(--ths-green);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ths-brand__mark img { width: 40px; height: 40px; display: block; }
.ths-brand__name { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }

/* Stretched full height so the hover area of a menu reaches the panel below
   it with no dead zone in the nav's own padding. */
.ths-nav__links { display: flex; align-items: center; gap: 4px; align-self: stretch; }

.ths-nav-link {
  position: relative;
  color: var(--ths-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 8px 12px;
  border-radius: 999px;
  transition: color .2s ease, background-color .25s ease;
}
.ths-nav-link:hover { background: var(--ths-chip); color: var(--ths-green); }
.ths-nav-link--menu { display: inline-flex; align-items: center; gap: 6px; }
.ths-chev { display: inline-block; font-size: 9px; line-height: 1; color: var(--ths-faint); }

.ths-nav__cta { display: flex; align-items: center; gap: 14px; }

/* ------------------------------------------------------------ mega menu */

/* position: static so the panel below is placed against .ths-nav__inner and
   stays centred under the nav, whichever menu opened it. */
.ths-menu { position: static; display: flex; align-items: center; align-self: stretch; }
.ths-menu:hover > .ths-nav-link { background: var(--ths-chip); color: var(--ths-green); }
.ths-menu:hover > .ths-nav-link .ths-chev { color: var(--ths-accent); }

/* The panel is placed against .ths-nav__inner's padding box, but .ths-menu
   (the element whose :hover keeps it open) only stretches to the content box.
   Anchoring at top:100% therefore left the nav's bottom padding as a strip
   belonging to neither, and the pointer crossing it on the way down closed the
   menu. Start the box one padding's worth higher so it is flush with the bottom
   of .ths-menu, and put that distance back as padding so the panel does not
   move: the hover area is now continuous from the link to the first item. */
.ths-mega {
  position: absolute;
  top: calc(100% - var(--ths-nav-pad));
  left: 50%;
  width: 780px;
  max-width: calc(100vw - 24px);
  padding-top: calc(12px + var(--ths-nav-pad));
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  /* Closing is delayed so a diagonal towards a far column, or a moment's wobble
     on the way down, does not dismiss the menu. The delay is on visibility too,
     which keeps the panel hoverable for the whole fade, and re-entering it cancels
     the close. Nothing sets pointer-events: visibility already blocks the
     pointer once the panel is hidden, and juggling it would make the panel
     unreachable during exactly the window the delay exists to cover. */
  transition: opacity .2s ease .14s,
              transform .3s var(--ths-ease) .14s,
              visibility .2s .14s;
  z-index: 40;
}
.ths-menu:hover .ths-mega,
.ths-menu:focus-within .ths-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
  /* Sliding from one menu to the other overlaps the two panels for the length of
     the delay; the one being opened has to win, whichever came first in source. */
  z-index: 41;
}
.ths-mega__panel {
  background: var(--ths-bg);
  border: 1px solid var(--ths-line-menu);
  border-radius: var(--ths-r-panel);
  /* A panel, not a floating object: the border does the separating and the
     shadow only lifts it off the text it covers. */
  box-shadow: 0 8px 20px -10px rgba(28, 67, 50, 0.28);
  padding: 24px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 10px;
}
.ths-mega__col { display: flex; flex-direction: column; gap: 2px; }
.ths-mega__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ths-faint);
  padding: 0 10px 8px;
}
.ths-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: var(--ths-r-tile);
  transition: background-color var(--ths-t);
}
.ths-mega-item:hover { background: #f4f7f4; }
.ths-mega-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--ths-r-tile);
  background: #f2f5f2;
  color: var(--ths-green);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ths-t), color var(--ths-t);
}
.ths-mega-item:hover .ths-mega-ico { background: var(--ths-green); color: var(--ths-mint); }
.ths-mega-item__text { display: flex; flex-direction: column; gap: 2px; }
.ths-mega-item__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ths-green);
  line-height: 1.25;
}
.ths-mega-item__sub { font-size: 13px; color: var(--ths-muted); line-height: 1.3; }
.ths-mega__foot {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 14px 10px 2px;
  border-top: 1px solid #eef0ec;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
  color: var(--ths-muted);
}
.ths-mega__foot a { font-weight: 700; color: var(--ths-green); white-space: nowrap; }

/* A tint laid over the page while a mega-menu is open, so the nav and the panel
   read as one layer sitting above the content rather than floating on it. White
   at the top, where the header is, deepening to the brand green at the foot of
   the viewport. Kept faint: it should register as the page receding, not as a
   modal overlay. Fixed and outside the nav so it covers the viewport whatever
   the scroll position; z-index puts it under the nav (20) and over the page.
   :has() drives it because the menus themselves are pure CSS hover; browsers
   without :has() simply get the menu with no tint. */
.ths-nav-veil {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.44) 30%,
    rgba(28, 67, 50, 0.12) 64%,
    rgba(28, 67, 50, 0.30) 100%);
  transition: opacity .28s ease .14s;
}
/* Matches the panel's own timing, delay included, so the two move together. */
body:has(.ths-menu:hover) .ths-nav-veil,
body:has(.ths-menu:focus-within) .ths-nav-veil {
  opacity: 1;
  transition-delay: 0s;
}

/* -------------------------------------------------------- mobile drawer */

.ths-nav-toggle {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
}
.ths-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: -10px;
  flex-shrink: 0;
}
.ths-burger__bars { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.ths-burger__bars span { height: 2px; background: var(--ths-green); display: block; }

.ths-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(20, 37, 29, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.ths-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 60;
  height: 100%;
  width: 86%;
  max-width: 340px;
  background: var(--ths-bg);
  border-left: 3px solid var(--ths-mint);
  box-shadow: -26px 0 60px -34px rgba(28, 67, 50, 0.5);
  transform: translateX(106%);
  /* visibility keeps the closed drawer out of the paint and out of the tab
     order; delaying it lets the slide-out finish before it disappears. */
  visibility: hidden;
  transition: transform .4s var(--ths-ease), visibility 0s linear .4s;
  display: flex;
  flex-direction: column;
}
#ths-nav-toggle:checked ~ .ths-drawer {
  transform: none;
  visibility: visible;
  transition: transform .4s var(--ths-ease), visibility 0s;
}
#ths-nav-toggle:checked ~ .ths-scrim { opacity: 1; pointer-events: auto; }

.ths-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--ths-line-menu);
  flex-shrink: 0;
}
.ths-brand--drawer { gap: 10px; }
.ths-brand--drawer img { width: 34px; height: 34px; display: block; background: var(--ths-green); }
.ths-brand--drawer .ths-brand__name { font-size: 15px; color: var(--ths-green); }
.ths-drawer__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
  cursor: pointer;
  color: var(--ths-accent);
  font-size: 26px;
  line-height: 1;
}
.ths-drawer__body {
  display: flex;
  flex-direction: column;
  padding: 4px 22px 32px;
  overflow-y: auto;
}
.ths-drawer__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ths-accent);
  padding: 18px 0 6px;
}
.ths-drawer__body > a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ths-green);
  border-bottom: 1px solid #eef1ee;
}
.ths-drawer__body > a:hover { color: var(--ths-accent); }
.ths-drawer__cta {
  justify-content: center;
  min-height: 52px !important;
  margin-top: 24px;
  border-radius: var(--ths-r-btn);
  background: var(--ths-green);
  color: var(--ths-off) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-bottom: 0 !important;
}

@media (min-width: 941px) {
  .ths-drawer, .ths-scrim { display: none !important; }
}

@media (max-width: 940px) {
  .ths-nav__links { display: none; }
  .ths-burger { display: inline-flex; }
}

/* -------------------------------------------------------- whatsapp button */

/* Page furniture rather than chrome, and the stacking order says so: above the
   page and the menu veil, but under the nav (20), so an open mega-menu passes
   over it and the veil tints it along with everything else below the header;
   under the drawer scrim (55) too, so the open mobile drawer covers it and it
   cannot be tapped through. Carries the site's green rather than WhatsApp's,
   which would be the loudest thing on the page. The mark alone is what makes
   it recognisable. */
.ths-wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 18;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px 0 17px;
  border-radius: var(--ths-r-pill);
  background: var(--ths-green);
  color: var(--ths-off);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* The mint hairline is what keeps it legible over the dark band above the
     footer, where a green pill and its green shadow both disappear. On the
     light pages it is barely there. */
  box-shadow: 0 0 0 1px rgba(126, 224, 166, 0.28),
              0 18px 34px -18px rgba(28, 67, 50, 0.75);
  transition: background-color var(--ths-t), box-shadow var(--ths-t);
}
/* a:hover turns links accent green site-wide; this one keeps its own colours. */
.ths-wa:hover {
  color: var(--ths-off);
  background: #24573f;
  box-shadow: 0 0 0 1px rgba(126, 224, 166, 0.45),
              0 18px 34px -18px rgba(28, 67, 50, 0.85);
}
.ths-wa__mark { flex: none; color: var(--ths-mint); display: block; }

/* ------------------------------------------------------------------ hero */

.ths-hero {
  position: relative;
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: 64px var(--ths-gutter) 44px;
}
.ths-hero__dots {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
}
.ths-hero > *:not(.ths-hero__dots) { position: relative; z-index: 1; }

.ths-pill__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ths-muted);
  display: inline-block;
  white-space: nowrap;
  animation: thsLabelIn .55s var(--ths-ease) .12s both;
}
.ths-hero__title {
  font-size: 62px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 980px;
  text-wrap: balance;
}
.ths-hero__lede {
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ths-body);
  max-width: 680px;
  text-wrap: pretty;
}
.ths-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  align-items: center;
}

.ths-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.ths-avatars { display: flex; }
.ths-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--ths-r-pill);
  border: 2px solid var(--ths-off);
  flex: none;
}
.ths-avatar--1 { background: var(--ths-ramp-1); }
.ths-avatar--2 { background: var(--ths-ramp-2); margin-left: -10px; }
.ths-avatar--3 { background: var(--ths-ramp-3); margin-left: -10px; }
.ths-avatar--star {
  background: var(--ths-accent);
  margin-left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.ths-trust__text { font-size: 14px; color: var(--ths-muted); }

/* ------------------------------------------------------------ hero image */

.ths-heroimg {
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: 20px var(--ths-gutter) 0;
  height: 585px;
}
.ths-heroimg__frame {
  position: relative;
  width: 100%;
  height: 540px;
  border-radius: var(--ths-r-panel);
  overflow: hidden;
}
.ths-heroimg__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* ------------------------------------------------------- shared sections */

.ths-section {
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: var(--ths-section-y) var(--ths-gutter);
}
/* A tag rather than a line of loose capitals: same type, set in the chip the
   rest of the site already uses for quiet fills. */
.ths-eyebrow {
  display: inline-flex;
  align-items: center;
  /* A flex or grid parent stretches its children, which would pull the chip
     across the whole column, so the width is pinned to the label. */
  align-self: flex-start;
  width: fit-content;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ths-accent);
  background: var(--ths-chip);
  border-radius: var(--ths-r-pill);
  padding: 6px 14px;
  margin-bottom: 16px;
}
.ths-h2 {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.ths-h2--band    { margin-bottom: 36px; max-width: 720px; }
.ths-h2--process { margin-bottom: 44px; max-width: 640px; }

.ths-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.ths-section__headmain  { max-width: 620px; }
.ths-section__headaside {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ths-body);
  max-width: 340px;
}

.ths-note { font-size: 12px; color: var(--ths-muted); margin-top: 16px; }
.ths-note--dark { color: var(--ths-on-dark-dim); margin-top: 20px; }

/* -------------------------------------------------------------- services */

.ths-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ths-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.ths-card {
  border: 1px solid var(--ths-line);
  border-radius: var(--ths-r-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 210px;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--ths-t), border-color var(--ths-t);
}
/* Cards are links, so the :hover state has to be pinned too, otherwise the
   global a:hover recolours the whole card. Only the cards that really are links
   answer the pointer, and they answer in colour: the surface stays put. Reviews
   and the areas-of-law cards are figures and articles, so they are left out. */
.ths-card:hover { color: inherit; }
a.ths-card:hover { background: #f7faf7; border-color: #bfe2cd; }
.ths-card__num   { font-size: 13px; font-weight: 700; color: var(--ths-accent); }
.ths-card__title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; }
.ths-card__sub   { font-size: 13px; color: var(--ths-muted); }
.ths-card__body  { font-size: 15px; line-height: 1.6; color: var(--ths-body); text-wrap: pretty; }

/* The dark card is a solid panel: its border matches the fill, so the rounded
   corner has no light hairline running around it. */
.ths-card--dark,
a.ths-card--dark:hover {
  background: var(--ths-green);
  border-color: var(--ths-green);
  color: var(--ths-off);
}
.ths-card--dark .ths-card__num  { color: var(--ths-mint); }
.ths-card--dark .ths-card__sub  { color: #8fae9c; }
.ths-card--dark .ths-card__body { color: var(--ths-on-dark); }

/* Area-of-law cards on /legal-services. Not links (each one is an anchor
   target for the Legal Services menu), so no pointer cursor. */
.ths-card--legal { cursor: default; scroll-margin-top: 104px; }
.ths-card__top { display: flex; align-items: center; justify-content: space-between; }
.ths-card--legal .ths-mega-ico { width: 42px; height: 42px; border-radius: var(--ths-r-card); }
.ths-card--legal:hover .ths-mega-ico,
.ths-card--legal:target .ths-mega-ico { background: var(--ths-green); color: var(--ths-mint); }
.ths-card--legal:target { border-color: #bfe2cd; background: #f7faf7; }

/* Home page: the bridge from the fiscal services grid to /legal-services. */
.ths-crosslink {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--ths-line);
  border-radius: var(--ths-r-card);
  background: var(--ths-band);
  color: inherit;
  transition: background-color var(--ths-t), border-color var(--ths-t);
}
.ths-crosslink:hover {
  color: inherit;
  background: #eef2ee;
  border-color: #bfe2cd;
}
.ths-crosslink__ico {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--ths-r-card);
  background: var(--ths-bg);
  color: var(--ths-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ths-crosslink__text { display: flex; flex-direction: column; gap: 6px; }
.ths-crosslink__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ths-green);
}
.ths-crosslink__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ths-body);
  max-width: 620px;
  text-wrap: pretty;
}
.ths-crosslink__cta {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--ths-green);
  white-space: nowrap;
}

/* --------------------------------------------------------- who it's for */

.ths-band { background: var(--ths-band); position: relative; overflow: hidden; }
.ths-band__inner {
  position: relative;
  z-index: 1;
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: var(--ths-section-y) var(--ths-gutter);
}
.ths-band__inner--narrow { max-width: 900px; }

.ths-who-card {
  background: rgba(253, 253, 252, 0.72);
  border: 1px solid var(--ths-line-band);
  border-radius: var(--ths-r-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  transition: background-color var(--ths-t), border-color var(--ths-t);
}
.ths-who-card:hover { background: rgb(253, 253, 252); border-color: #bfe2cd; }
.ths-who-card__title { font-size: 17px; font-weight: 800; }
.ths-who-card__body  { font-size: 14px; line-height: 1.55; color: var(--ths-body); }

/* --------------------------------------------------------------- process */

.ths-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--ths-green);
}
.ths-step {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--ths-line);
  transition: background-color var(--ths-t);
}
.ths-step:hover { background: rgba(63, 167, 108, 0.05); }
.ths-step:first-child { padding: 28px 28px 28px 0; }
.ths-step:last-child  { padding: 28px 0 28px 28px; border-right: 0; }
.ths-step-num {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ths-accent);
  transform-origin: left center;
}
.ths-step__title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.ths-step__body  { font-size: 15px; line-height: 1.55; color: var(--ths-body); }

/* ----------------------------------------------------------------- stats */

.ths-stats { background: var(--ths-green); color: var(--ths-off); }
.ths-stats__inner {
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: 64px var(--ths-gutter);
}
.ths-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.ths-stat { display: flex; flex-direction: column; gap: 6px; }
.ths-count {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ths-mint);
  line-height: 1;
}
.ths-stat__label { font-size: 14px; color: var(--ths-on-dark); }

/* --------------------------------------------------------------- reviews */

.ths-reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.ths-reviews__head .ths-h2 { max-width: 640px; }

.ths-reviews {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.ths-reviews__stack { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }

.ths-review { min-height: 0; cursor: default; }
.ths-review--featured { padding: 32px; gap: 24px; }
.ths-review__mark {
  font-size: 40px;
  line-height: 0.6;
  color: var(--ths-mint);
  font-weight: 800;
}
.ths-review__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.ths-review--featured .ths-review__body { line-height: 1.55; color: #23372c; }
.ths-review__person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.ths-review--featured .ths-review__person { padding-top: 6px; }
.ths-review__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ths-r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ths-green);
  flex: none;
}
.ths-review__avatar--1 { background: var(--ths-ramp-1); }
.ths-review__avatar--2 { background: var(--ths-ramp-2); }
.ths-review__avatar--3 { background: var(--ths-ramp-3); }
.ths-review__name { font-size: 15px; font-weight: 700; }

/* ------------------------------------------------------------------- faq */

.ths-faqlist { display: flex; flex-direction: column; }

details.ths-faq {
  border-top: 1px solid var(--ths-line-soft);
  padding: 20px 0;
}
details.ths-faq.ths-faq--last { border-bottom: 1px solid var(--ths-line-soft); }
details.ths-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
}
details.ths-faq > summary::-webkit-details-marker { display: none; }
.ths-faq__q {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color .22s ease;
}
details.ths-faq > summary:hover .ths-faq__q { color: var(--ths-accent); }
.ths-plus {
  font-size: 24px;
  color: var(--ths-accent);
  line-height: 1;
  transition: transform .3s var(--ths-ease);
  flex: none;
}
details.ths-faq > summary:hover .ths-plus { transform: scale(1.22); }
details.ths-faq[open] .ths-plus { transform: rotate(45deg); }
details.ths-faq[open] > summary:hover .ths-plus { transform: rotate(45deg) scale(1.22); }
.ths-faq__a {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ths-body);
  max-width: 680px;
}
/* Longer answers run to several paragraphs. */
.ths-faq__a p + p { margin-top: 10px; }

/* Home FAQ band: the way through to the full list on /faq. */
.ths-faqmore { margin-top: 32px; }

/* -------------------------------------------------------- dark CTA block */

.ths-dark-wrap { position: relative; background: var(--ths-green); overflow: hidden; }

.ths-cta { position: relative; color: var(--ths-off); }
.ths-cta__watermark {
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 420px;
  height: 420px;
  opacity: 0.06;
  pointer-events: none;
}
.ths-cta__watermark img { width: 100%; height: 100%; display: block; }
.ths-cta__inner {
  position: relative;
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: 96px var(--ths-gutter) 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.ths-cta__title {
  font-size: 68px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.94;
}
.ths-cta__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ths-on-dark);
  max-width: 500px;
}
.ths-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
}
.ths-assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 8px;
  width: 100%;
  max-width: 720px;
  font-size: 14px;
  color: var(--ths-on-dark);
}

/* ---------------------------------------------------------------- footer */

.ths-footer { color: var(--ths-off); position: relative; padding: 32px 24px; }
.ths-footer__panel {
  position: relative;
  width: var(--ths-max);
  max-width: 100%;
  margin: 0 auto;
  background: var(--ths-green-deep);
  border-radius: var(--ths-r-panel);
  padding: 72px var(--ths-gutter) 48px;
}
.ths-footer a {
  color: var(--ths-on-dark);
  display: inline-block;
  transition: color var(--ths-t);
}
.ths-footer a:hover { color: var(--ths-mint); }

.ths-news {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.ths-news__title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 620px;
}
.ths-news__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ths-on-dark);
  max-width: 480px;
}
.ths-news__form {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.ths-input {
  background: transparent;
  border: 1px solid #4a6a58;
  color: var(--ths-off);
  font-size: 15px;
  padding: 14px 20px;
  width: 300px;
  max-width: 100%;
  border-radius: var(--ths-r-input);
  outline: none;
  transition: border-color var(--ths-t), box-shadow var(--ths-t);
}
.ths-input::placeholder { color: var(--ths-on-dark-dim); }
.ths-input:hover { border-color: #6f8f79; }
.ths-input:focus { border-color: var(--ths-mint); box-shadow: 0 0 0 3px rgba(126,224,166,0.12); }

/* Honeypot: clipped rather than display:none, which some bots skip. Kept in
   flow at a 1px box so it never paints outside the viewport. */
.ths-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ths-news__status {
  font-size: 14px;
  line-height: 1.5;
  min-height: 1.5em;
  color: var(--ths-on-dark);
}
.ths-news__status[data-state="ok"]    { color: var(--ths-mint); }
.ths-news__status[data-state="error"] { color: #ffb4a8; }

.ths-btn[disabled] { opacity: .65; cursor: default; }

.ths-footer__cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid rgba(126, 224, 166, 0.18);
}
.ths-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 24px;
}
.ths-brand--footer { gap: 12px; }
.ths-brand--footer img { display: block; }
.ths-footer__brand .ths-brand__name { color: var(--ths-off); }
.ths-footer__blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ths-on-dark);
  max-width: 240px;
}
.ths-fcol { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.ths-fcol__title { font-size: 14px; font-weight: 700; color: var(--ths-off); }
.ths-footer__legal { margin-top: 40px; font-size: 13px; color: var(--ths-on-dark-dim); }

/* ---------------------------------------------------- page transitions */

/* Cross-document view transitions. Every page links this stylesheet, so both
   sides of a same-origin navigation opt in and the browser cross-fades between
   them instead of blanking. Browsers without support navigate as before. */
@view-transition { navigation: auto; }

/* The header is common to every page, so give it its own transition name and
   it stays anchored while the content beneath it changes. */
.ths-nav { view-transition-name: ths-nav; }

/* Follow a link from inside the open drawer and the outgoing page is captured
   with the menu still on screen, so it flashes in from the right on the page
   you land on before the close catches up. The same goes for an open mega-menu,
   which rides along inside the header's snapshot. Naming each one lifts it out
   of the snapshot it would otherwise be baked into, and the group is never
   painted: the overlay simply is not part of the transition. */
.ths-drawer { view-transition-name: ths-drawer; }
.ths-scrim  { view-transition-name: ths-scrim; }
.ths-nav__links > .ths-menu:nth-of-type(1) > .ths-mega { view-transition-name: ths-mega-a; }
.ths-nav__links > .ths-menu:nth-of-type(2) > .ths-mega { view-transition-name: ths-mega-b; }

::view-transition-group(ths-drawer),
::view-transition-group(ths-scrim),
::view-transition-group(ths-mega-a),
::view-transition-group(ths-mega-b) {
  animation: none;
  opacity: 0;
}

::view-transition-old(root) {
  animation: thsPageOut .18s ease-out both;
}
::view-transition-new(root) {
  animation: thsPageIn .34s var(--ths-ease) both;
}
/* The nav's own old/new pair keeps the browser default cross-fade, which
   already fades the outgoing copy out and the incoming one in. */

@keyframes thsPageOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes thsPageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ animations */

@keyframes thsLabelIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .ths-hero__title { font-size: 52px; }
  .ths-cta__title  { font-size: 56px; }
  .ths-grid-3,
  .ths-grid-4,
  .ths-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .ths-reviews { grid-template-columns: 1fr; }
  .ths-reviews__stack { grid-template-rows: auto auto; }
  .ths-footer__cols { grid-template-columns: repeat(4, 1fr); gap: 40px; }
  .ths-footer__brand { grid-column: 1 / -1; padding-right: 0; }
  .ths-mega { width: 640px; }
}

@media (max-width: 860px) {
  :root { --ths-gutter: 20px; --ths-section-y: 64px; }

  .ths-nav__cta .ths-btn--sm { font-size: 13px; padding: 10px 14px; }
  .ths-card { padding: 24px; }

  .ths-hero { padding-top: 40px; }
  .ths-hero__title { font-size: 33px; letter-spacing: -0.03em; }
  .ths-hero__lede  { font-size: 15px; }
  .ths-hero__actions .ths-btn { flex: 1 1 100%; }
  .ths-pill__label { font-size: 11px; letter-spacing: 0.04em; }

  .ths-heroimg { height: auto; }
  .ths-heroimg__frame { height: 320px; }

  .ths-h2, .ths-news__title { font-size: 25px; letter-spacing: -0.025em; }
  .ths-step__title, .ths-card__title, .ths-who-card__title { font-size: 17px; }
  .ths-cta__title { font-size: 34px; }
  .ths-cta__lede  { font-size: 15px; }
  .ths-cta__inner { padding: 60px var(--ths-gutter) 52px; }
  .ths-cta__actions .ths-btn { flex: 1 1 100%; }

  .ths-grid-3,
  .ths-grid-4,
  .ths-stats__grid { grid-template-columns: 1fr; }
  .ths-card { min-height: 0; }

  .ths-crosslink { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ths-crosslink__cta { margin-left: 0; }

  .ths-process { grid-template-columns: 1fr; }
  .ths-step,
  .ths-step:first-child,
  .ths-step:last-child {
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid var(--ths-line);
  }
  .ths-step:last-child { border-bottom: 0; }

  .ths-review--featured { padding: 24px; }

  .ths-footer { padding: 14px 10px; }
  .ths-footer__panel { padding: 44px 24px 36px; }
  .ths-footer__cols { grid-template-columns: 1fr; gap: 32px; margin-top: 44px; }
  .ths-news__form { width: 100%; }
  .ths-input { width: 100%; font-size: 16px; }
  .ths-news__form .ths-btn { width: 100%; }

  .ths-assurances { gap: 12px 20px; }

  /* Comfortable tap targets. */
  .ths-btn { min-height: 48px; }

  /* Not enough width to carry the label without lying across the content, so
     the button collapses to the mark. The accessible name is on the anchor,
     so nothing is lost when the text goes. */
  .ths-wa {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
  }
  .ths-wa__label { display: none; }
}

/* On a phone the header is the mark, the burger and the call button: the
   wordmark wraps onto two or three lines in the space that is left. It is
   clipped rather than removed so the brand link keeps its accessible name;
   clip-path rather than a negative offset, for the reason given on .ths-skip.
   The drawer and the footer still spell the name out. */
@media (max-width: 560px) {
  .ths-nav .ths-brand__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Narrower handsets need one more step down for the booking page's badge, and
   for the nav's call-to-action: it is nowrap, so on a 320px screen the full
   label would push the header wider than the viewport. */
@media (max-width: 420px) {
  .ths-pill__label { font-size: 10px; letter-spacing: 0.03em; }
  .ths-nav__cta { gap: 10px; }
  .ths-nav__cta .ths-btn--sm { font-size: 12px; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    /* Without this, a `both`-filled animation holds its from-state (often
       opacity 0) for the whole delay, hiding content that should be instant. */
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* The `*` selector above does not reach view-transition pseudo-elements. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ==========================================================================
   Inner pages: service detail, book a call, legal
   ========================================================================== */

/* Inner pages carry a permanently frosted nav rather than the home page's
   transparent-until-scrolled one. */
.ths-nav--solid {
  background: rgba(253, 253, 252, 0.88);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
a.ths-brand { transition: color .2s ease; }
a.ths-brand:hover,
a.ths-brand:hover .ths-brand__name { color: #7f9c7a; }

.ths-crumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--ths-muted);
  margin-bottom: 30px;
}
.ths-crumb a { color: var(--ths-muted); }
.ths-crumb a:hover { color: var(--ths-accent); }
.ths-crumb__here { color: var(--ths-green); }

/* ----------------------------------------------------- service page hero */

.ths-svc-hero {
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: 56px var(--ths-gutter) 40px;
}
.ths-svc-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ths-svc-hero__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 22px;
}
.ths-svc-ico {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--ths-r-card);
  background: var(--ths-chip);
  color: var(--ths-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ths-svc-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}
.ths-svc-hero__no {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ths-accent);
}
.ths-svc-hero__who { font-size: 15px; color: var(--ths-muted); }
.ths-svc-hero__title {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.03;
  max-width: 560px;
  text-wrap: balance;
}
.ths-svc-hero__lede {
  margin-top: 26px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ths-body);
  max-width: 520px;
  text-wrap: pretty;
}
.ths-svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.ths-svc-hero__actions .ths-btn--solid { padding: 14px 24px; }
.ths-svc-hero__actions .ths-btn--outline { padding: 13px 23px; }

/* ------------------------------------------------------- what this covers */

.ths-covers {
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: 40px var(--ths-gutter) var(--ths-section-y);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}
.ths-covers__aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 96px;
}
.ths-covers__note { font-size: 15px; line-height: 1.6; color: var(--ths-body); }
.ths-covers__list { display: flex; flex-direction: column; }
.ths-covers__row {
  display: flex;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--ths-line);
}
.ths-covers__no {
  font-size: 13px;
  font-weight: 700;
  color: var(--ths-accent);
  min-width: 26px;
  padding-top: 3px;
}
.ths-covers__text {
  font-size: 17px;
  line-height: 1.55;
  color: #23372c;
  max-width: 640px;
  text-wrap: pretty;
}

/* --------------------------------------------------- cross-link services */

.ths-xgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ths-xcard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--ths-line);
  border-radius: var(--ths-r-card);
  transition: background-color var(--ths-t), border-color var(--ths-t);
}
.ths-xcard:hover { background: #f4f7f4; border-color: #bfe2cd; }
.ths-xcard .ths-mega-ico { width: 36px; height: 36px; }
.ths-xcard:hover .ths-mega-ico { background: var(--ths-green); color: var(--ths-mint); }
.ths-xcard__text { display: flex; flex-direction: column; gap: 3px; }
.ths-xcard__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ths-green);
  line-height: 1.25;
}
.ths-xcard__sub { font-size: 13px; color: var(--ths-muted); line-height: 1.35; }

/* Inner pages sit the footer straight on the dark panel. */
.ths-footer--inner { padding: 72px 24px 40px; }

/* ------------------------------------------------------------ book a call */

.ths-call-hero {
  position: relative;
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: 48px var(--ths-gutter) 24px;
}
.ths-call-hero > *:not(.ths-hero__dots) { position: relative; z-index: 1; }
.ths-call-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ths-line-soft);
  border-radius: var(--ths-r-pill);
  padding: 6px 14px;
  margin-bottom: 24px;
  animation: thsPillIn .6s var(--ths-ease) both;
}
.ths-call-hero__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--ths-r-pill);
  background: var(--ths-accent);
  display: block;
  flex-shrink: 0;
  animation: thsDotPulse 2.6s cubic-bezier(.4,0,.2,1) 1.2s infinite;
}
.ths-call-hero__title {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  max-width: 820px;
  text-wrap: balance;
}
.ths-call-hero__lede {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ths-body);
  max-width: 620px;
  text-wrap: pretty;
}

.ths-call {
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: 24px var(--ths-gutter) 72px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.ths-call__aside {
  display: flex;
  flex-direction: column;
  gap: 34px;
  position: sticky;
  top: 96px;
}
.ths-callsteps { display: flex; flex-direction: column; gap: 18px; }
.ths-callstep { display: flex; gap: 14px; }
.ths-callstep__no {
  font-size: 15px;
  font-weight: 800;
  color: var(--ths-accent);
  min-width: 22px;
}
.ths-callstep__text { display: flex; flex-direction: column; gap: 4px; }
.ths-callstep__title { font-size: 16px; font-weight: 700; }
.ths-callstep__body { font-size: 15px; line-height: 1.55; color: var(--ths-body); }

.ths-facts {
  border-top: 1px solid var(--ths-line);
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.ths-fact { display: flex; flex-direction: column; gap: 4px; }
.ths-fact__label { font-size: 13px; color: var(--ths-muted); }
.ths-fact__value { font-size: 16px; font-weight: 700; }

.ths-formcard {
  border: 1px solid var(--ths-line);
  border-radius: var(--ths-r-panel);
  background: var(--ths-off);
  padding: 36px;
}
.ths-form { display: flex; flex-direction: column; gap: 22px; }
.ths-form__head { display: flex; flex-direction: column; gap: 6px; }
.ths-form__title { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; }
.ths-form__hint { font-size: 14px; color: var(--ths-muted); }
.ths-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ths-label { display: flex; flex-direction: column; gap: 7px; }
.ths-label__text { font-size: 13px; font-weight: 600; color: var(--ths-body); }

.ths-field {
  width: 100%;
  background: var(--ths-off);
  border: 1px solid #dfe2dc;
  color: var(--ths-green);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--ths-r-input);
  outline: none;
  transition: border-color var(--ths-t), box-shadow var(--ths-t);
}
.ths-field:hover { border-color: #b9c4bb; }
.ths-field:focus { border-color: var(--ths-accent); box-shadow: 0 0 0 3px rgba(63,167,108,0.12); }
.ths-field::placeholder { color: var(--ths-faint); }
/* iOS Safari zooms the whole page into any field set below 16px, so phones
   and tablets get 16px. */
@media (max-width: 860px), (pointer: coarse) {
  .ths-field { font-size: 16px; }
}
/* Without this iOS draws search fields with its own rounded inset style. */
input[type="search"].ths-field { -webkit-appearance: none; appearance: none; }

/* While someone types on a phone, the floating WhatsApp button would sit
   over the field and its suggestions (on Android it rides up above the
   keyboard), so it steps aside until the field loses focus. */
@media (pointer: coarse) {
  body:has(.ths-field:focus, .ths-input:focus) .ths-wa { visibility: hidden; }
}
textarea.ths-field { resize: vertical; line-height: 1.5; }
select.ths-field {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ths-body) 50%),
    linear-gradient(135deg, var(--ths-body) 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.ths-field[aria-invalid="true"] { border-color: #b4453c; }

.ths-err { font-size: 13px; color: #b4453c; }
.ths-err:empty { display: none; }

.ths-consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ths-consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ths-accent);
  flex-shrink: 0;
}
.ths-consent__text { font-size: 14px; line-height: 1.5; color: var(--ths-body); }
.ths-consent__text a { text-decoration: underline; text-underline-offset: 2px; }

.ths-form__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--ths-line);
  padding-top: 22px;
}
.ths-form__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ths-muted);
  max-width: 260px;
}
.ths-submit {
  background: var(--ths-green);
  color: var(--ths-off);
  border: none;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: var(--ths-r-btn);
  cursor: pointer;
  transition: background-color var(--ths-t);
}
.ths-submit:hover { background: var(--ths-green-deep); }
.ths-submit[disabled] { opacity: .65; cursor: default; }

.ths-sent {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 0;
  text-align: left;
}
.ths-sent__tick {
  width: 48px;
  height: 48px;
  background: var(--ths-chip);
  border-radius: var(--ths-r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--ths-accent);
}
.ths-sent__title { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.ths-sent__body { font-size: 16px; line-height: 1.6; color: var(--ths-body); max-width: 460px; }
.ths-sent__summary {
  border: 1px solid var(--ths-line);
  border-radius: var(--ths-r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}
.ths-sent__label { font-size: 13px; color: var(--ths-muted); }
.ths-sent__name { font-size: 15px; font-weight: 700; }
.ths-sent__line { font-size: 15px; color: var(--ths-body); }
.ths-sent__again {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--ths-green);
  color: var(--ths-green);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--ths-r-btn);
  cursor: pointer;
  transition: background-color var(--ths-t);
}
.ths-sent__again:hover { background: var(--ths-chip); }

@keyframes thsPillIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes thsDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,167,108,0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(63,167,108,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,167,108,0); }
}

/* ------------------------------------------------------------------ legal */

.ths-legal-hero {
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: 52px var(--ths-gutter) 34px;
}
.ths-legal-hero__title {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  max-width: 760px;
}
.ths-legal-hero__lede {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ths-body);
  max-width: 640px;
  text-wrap: pretty;
}
.ths-legal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--ths-line);
}

.ths-legalwrap {
  max-width: var(--ths-max);
  margin: 0 auto;
  padding: 10px var(--ths-gutter) var(--ths-section-y);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}
.ths-toc {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ths-toc__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ths-muted);
  margin-bottom: 10px;
}
.ths-toc a {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ths-body);
  padding: 5px 0;
}
.ths-toc a:hover { color: var(--ths-accent); }

.ths-legal { max-width: 720px; }
.ths-legal section { scroll-margin-top: 96px; }
.ths-legal h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 8px; }
.ths-legal h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-top: 30px;
  margin-bottom: 10px;
  scroll-margin-top: 96px;
}
.ths-legal p {
  font-size: 16px;
  line-height: 1.68;
  color: var(--ths-body);
  margin-bottom: 14px;
}
.ths-legal ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.ths-legal li {
  font-size: 16px;
  line-height: 1.68;
  color: var(--ths-body);
  margin-bottom: 8px;
}
.ths-legal strong { color: var(--ths-green); }

/* Placeholders the business still has to fill in. Deliberately loud. */
.ths-fill {
  background: #fff4d6;
  border-bottom: 1px dashed #c9a227;
  color: #7a5c00;
  padding: 0 3px;
  font-style: normal;
}

/* ------------------------------------------------ inner-page responsive */

@media (max-width: 1040px) {
  .ths-covers { grid-template-columns: 1fr; gap: 28px; }
  .ths-covers__aside { position: static; }
  .ths-call { grid-template-columns: 1fr; gap: 36px; }
  .ths-call__aside { position: static; }
  .ths-legalwrap { grid-template-columns: 1fr; gap: 32px; }
  .ths-toc { position: static; }
  .ths-xgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .ths-svc-hero__title  { font-size: 33px; letter-spacing: -0.03em; }
  .ths-call-hero__title { font-size: 33px; letter-spacing: -0.03em; }
  .ths-legal-hero__title { font-size: 33px; letter-spacing: -0.03em; }
  .ths-legal h2 { font-size: 25px; }
  .ths-svc-hero__badge { flex-direction: column; gap: 12px; text-align: center; }
  .ths-svc-hero__meta { align-items: center; text-align: center; }
  .ths-svc-hero__actions .ths-btn { flex: 1 1 100%; }
  .ths-xgrid { grid-template-columns: 1fr; }
  .ths-formgrid { grid-template-columns: 1fr; }
  .ths-formcard { padding: 22px; }
  .ths-facts { grid-template-columns: 1fr 1fr; }
  .ths-footer--inner { padding: 44px 10px 28px; }
  .ths-submit { width: 100%; min-height: 48px; }
}

.ths-toc__gap { margin-top: 12px; }

.ths-legal__standfirst { color: var(--ths-muted); font-size: 15px; }

/* -------------------------------------------------------------- faq page */

/* /faq borrows the legal page's hero and contents rail; the questions sit
   in the same accordions as the home page's FAQ band, grouped by topic. */
.ths-legal-hero__lede + .ths-legal-hero__lede { margin-top: 12px; }

.ths-faqpage { max-width: 760px; }
.ths-faqpage__group { scroll-margin-top: 96px; }
.ths-faqpage__group + .ths-faqpage__group { margin-top: 56px; }
.ths-faqpage__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.ths-faqpage details.ths-faq { scroll-margin-top: 96px; }
.ths-faqpage__note {
  margin-top: 56px;
  padding: 18px 20px;
  border-radius: var(--ths-r-card);
  background: var(--ths-band);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ths-body);
}
.ths-faqpage__note strong { color: var(--ths-green); }

/* A question the finder jumped to: tinted for a moment, the tint bleeding
   past the row's edges so the text does not shift. */
.ths-faqpage details.ths-faq {
  box-shadow: -14px 0 0 transparent, 14px 0 0 transparent;
  transition: background-color 1s ease, box-shadow 1s ease;
}
.ths-faqpage details.ths-faq--hit {
  background: var(--ths-chip);
  box-shadow: -14px 0 0 var(--ths-chip), 14px 0 0 var(--ths-chip);
}

/* "Ask a question": in the /faq hero, and on the home page's FAQ band. */
.ths-ask,
.ths-ask .ths-field { scroll-margin-top: 90px; }
.ths-ask {
  margin-top: 30px;
  max-width: 680px;
  padding: 20px;
  border: 1px solid var(--ths-line);
  border-radius: var(--ths-r-panel);
  background: var(--ths-band);
}
.ths-band .ths-ask { margin: 0 0 32px; background: var(--ths-off); border-color: var(--ths-line-band); }
.ths-ask__label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ths-green);
  margin-bottom: 10px;
}
.ths-ask__row { display: flex; gap: 10px; }
.ths-ask__row .ths-field { flex: 1; min-width: 0; }
.ths-ask__row .ths-btn { flex: none; }
.ths-ask__hint { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ths-muted); }
/* Once results show, the hint has said its piece; dropping it keeps the
   first suggestion above a phone keyboard. */
.ths-ask--open .ths-ask__hint { display: none; }

.ths-ask__results { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ths-line); }
.ths-ask__heading {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ths-muted);
  margin-bottom: 6px;
}
.ths-ask__list { list-style: none; margin: 0 -10px; padding: 0; }
.ths-ask__hit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: var(--ths-r-card);
  color: var(--ths-green);
  transition: background-color var(--ths-t);
}
.ths-ask__hit:hover,
.ths-ask__hit:focus-visible { background: var(--ths-chip); color: var(--ths-green); }
.ths-ask__q { font-size: 15px; font-weight: 700; line-height: 1.35; }
.ths-ask__group { font-size: 13px; color: var(--ths-muted); }
.ths-ask__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ths-green);
}
.ths-ask__more:hover { color: var(--ths-accent); }
.ths-ask__none { margin-bottom: 16px; }
.ths-ask__none-title { font-size: 16px; font-weight: 800; color: var(--ths-green); }
.ths-ask__none-body {
  margin: 4px 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ths-body);
}

@media (max-width: 860px) {
  .ths-faqpage__title { font-size: 22px; }
}

@media (max-width: 560px) {
  /* On a phone the two intro paragraphs would push the question box below
     the fold, so it moves up under the title. */
  .ths-legal-hero--faq { display: flex; flex-direction: column; }
  .ths-legal-hero--faq > .ths-eyebrow,
  .ths-legal-hero--faq > .ths-legal-hero__title { order: -2; }
  .ths-legal-hero--faq > .ths-ask { order: -1; margin-top: 24px; }
  .ths-ask { padding: 16px; }
  .ths-ask__row { flex-direction: column; }
  .ths-ask__none .ths-btn { width: 100%; }
}

.ths-footer__contact {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ths-on-dark);
  font-style: normal;
}
.ths-footer__contact a { color: var(--ths-on-dark); }

/* ------------------------------------------------------------------- 404 */

.ths-404 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ths-404 .ths-hero__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  left: 0;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.ths-404__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 60px var(--ths-gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ths-404__brand { margin-bottom: 40px; }
.ths-404__code {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ths-accent);
  margin-bottom: 14px;
}
.ths-404__title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-wrap: balance;
}
.ths-404__lede {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ths-body);
  max-width: 460px;
  text-wrap: pretty;
}
.ths-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}
.ths-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: center;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--ths-line);
  width: 100%;
}
.ths-404__links a { font-size: 14px; color: var(--ths-muted); }
.ths-404__links a:hover { color: var(--ths-accent); }

@media (max-width: 860px) {
  .ths-404__title { font-size: 30px; letter-spacing: -0.03em; }
  .ths-404__lede  { font-size: 15px; }
  .ths-404__actions .ths-btn { flex: 1 1 100%; }
}