/* Self-hosted fonts (no third-party font requests). */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/Outfit-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; color: #25332D; }
[hidden] { display: none !important; }

/* Visible focus on every interactive element (design system: 3:1 focus ring). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #174C3C; outline-offset: 2px; border-radius: 6px;
}

/* "Book a short call" lives only in the phone menu. */
.gg-nav-phone { display: none !important; }
@media (max-width: 920px) { .gg-nav-open .gg-nav-phone { display: inline-flex !important; } }

/* Form states */
.gg-error { margin: 0; font-size: 14px; font-weight: 600; color: #A12C1E; }
.gg-error::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: #A12C1E; margin-right: 8px; vertical-align: middle; }
.gg-invalid input, .gg-invalid select, .gg-invalid textarea { border-color: #A12C1E !important; border-width: 2px !important; }
.gg-summary, .gg-fail { margin-top: 20px; border: 2px solid #A12C1E; border-radius: 12px; padding: 16px 20px; background: #FFFFFF; }
.gg-summary h3, .gg-fail h3 { margin: 0; font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; font-size: 17px; font-weight: 700; color: #25332D; }
.gg-summary ul { margin: 8px 0 0; padding-left: 20px; }
.gg-summary a { color: #A12C1E; text-decoration: underline; font-weight: 600; }
.gg-fail p { margin: 6px 0 0; color: #25332D; font-size: 15px; }
.gg-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gg-submit[disabled] { opacity: 0.7; cursor: progress; }
.gg-select-placeholder { color: #52625B !important; }

/* Scheduler buttons */
.gg-day, .gg-time { border-radius: 10px; padding: 12px 8px; cursor: pointer; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 15px; font-weight: 600; background: #FFFFFF; color: #25332D; border: 1px solid #768780; text-align: center; min-height: 44px; }
.gg-day { min-width: 96px; }
.gg-day[aria-pressed="true"], .gg-time[aria-pressed="true"] { background: #174C3C; color: #FFFFFF; border-color: #174C3C; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------------------------------------------------------------- Type scale (design/tokens/tokens.json, design/brand/BRAND.md)
   Headings Outfit 600–700, body Inter, times and status labels Geist Mono. Body 16/26, lead 20/32, small 14/21. Reading width 56–68ch. */
body { font-size: 16px; line-height: 26px; }
label, legend { line-height: 22px; }
.t-display { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
.t-h1 { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -0.015em; }
.t-h2 { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
.t-h3 { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.005em; }
.t-h4 { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: 0; }
.t-lead { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 20px; line-height: 32px; font-weight: 400; max-width: 60ch; }
.t-body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 26px; font-weight: 400; max-width: 60ch; }
.t-small { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 21px; font-weight: 400; }
.t-eyebrow { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 24px; font-weight: 500; }
li.t-body + li.t-body { margin-top: 8px; }
@media (max-width: 767px) {
  .t-display { font-size: 36px; line-height: 42px; letter-spacing: -0.015em; }
  .t-h1 { font-size: 32px; line-height: 40px; }
  .t-h2 { font-size: 26px; line-height: 34px; }
  .t-lead { font-size: 18px; line-height: 28px; }
}
footer { line-height: 21px; }

/* ---------------------------------------------------------------- Balance */
:root { --gg-ink: #25332D; --gg-green: #174C3C; --gg-sage: #E6EEE7; --gg-line: #DCE4DE; }
h1, h2, h3 { text-wrap: balance; }
.gg-hero-h1 { text-wrap: wrap; } /* keep "Less admin. More time / for patients." as designed */
p, li, dd { text-wrap: pretty; }

/* "Where we're starting": fills its card instead of leaving white space under the list. */
.gg-areas { display: flex; flex-direction: column; }
.gg-areas > h2 { margin-top: 0 !important; }
.gg-areas > ul { flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin-top: 24px !important; }
.gg-areas li { padding: 14px 0 !important; font-size: 18px !important; line-height: 26px !important; font-weight: 500; color: var(--gg-ink); }
.gg-areas li > span:first-child { gap: 16px !important; }
.gg-areas li svg { box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 12px; background: var(--gg-sage); flex-shrink: 0; }
.gg-areas li:last-child { border-top: 1px solid var(--gg-line); padding-top: 24px !important; padding-bottom: 0 !important; }
.gg-areas li:last-child a { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 10px; background: var(--gg-green); color: #FFFFFF !important; text-decoration: none !important; font-size: 17px; padding: 12px 20px; text-align: center; }
.gg-areas > p { margin-top: 20px !important; }

/* About: the "never do" card stays in view instead of stretching to the column height. */
.gg-sticky { align-self: start; position: sticky; top: 96px; }

/* FAQ list and booking card line up with the page heading above them. */
@media (min-width: 768px) {
  .gg-left { margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; }
}
@media (max-width: 767px) {
  .gg-areas { padding: 24px 20px !important; }
  .gg-areas li { font-size: 16px !important; }
  .gg-areas li > span:first-child { gap: 12px !important; }
  .gg-areas li > span + span { padding: 3px 10px !important; font-size: 14px !important; }
  /* At 14px the badge no longer fits beside the label, so it drops below it, lined up with the label text. */
  .gg-areas li:not(:last-child) { flex-wrap: wrap; row-gap: 6px; }
  .gg-areas li > span:first-child { flex: 1 1 100%; }
  .gg-areas li > span + span { margin-left: 48px; }
  .gg-areas li svg { width: 20px; height: 20px; padding: 8px; }
}
.gg-areas li > span + span { flex-shrink: 0; font-size: 14px !important; padding: 4px 12px !important; background: #FBF1D6 !important; color: var(--gg-green) !important; }
/* Footer: Contact links keep the same row rhythm as the other columns. */
.gg-footer-grid > div:last-child a { display: inline-flex; align-items: center; min-height: 32px; }

/* ---------------------------------------------------------------- Pre-publish review fixes (4 Oct 2026) */
/* Focus ring: evergreen on light backgrounds (above), gold on the dark sections, so it is 3:1 or more everywhere. */
#how :focus-visible, footer :focus-visible { outline-color: #E9B949; }
main:focus { outline: none; }
/* Skip link: hidden until it gets keyboard focus. */
.gg-skip { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 12px 16px; border-radius: 10px; background: #174C3C; color: #FFFFFF; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 600; text-decoration: none; }
.gg-skip:focus { top: 12px; outline-color: #E9B949; }
@media (max-width: 920px) {
  /* Menu button sits next to Register instead of floating mid-header. */
  .gg-hdr .gg-menu-btn { margin-left: auto; }
  /* Hero: keep the floating cards off the copy. Only the top row shows, above the eyebrow. */
  #gg-hero .gg-hc-pull:has(.gg-hc-dim) { display: none; }
  #gg-hero .gg-2col { padding-top: 168px !important; }
}
@media (max-width: 767px) {
  /* Inner pages: one 24px gutter on phones, not two, so text lines up with the header. */
  .gg-wrap { padding-left: 0 !important; padding-right: 0 !important; }
  /* FAQ list and booking card: same single 24px gutter as the heading above them. */
  .gg-left { padding-left: 0 !important; padding-right: 0 !important; }
  /* Booking times: room for "13:00" in three columns at 320px. */
  .gg-time { padding-left: 4px; padding-right: 4px; min-width: 0; }
  /* Footer legal links wrap instead of pushing the page wider than the screen. */
  .gg-legal { flex-wrap: wrap; }
  /* Footer links: 44px tap targets on phones. */
  footer li a { display: inline-flex !important; align-items: center; min-height: 44px !important; }
}

/* "Other" role detail: sits directly under Your role, shown only when Other is chosen */
#role-other-field { grid-column: 1; }
.gg-field[hidden] { display: none !important; }

/* ---------------------------------------------------------------- hover and press states
   Brand: 150ms colour transitions, hover darkens fills, field borders darken to foreground.
   Inline styles set the resting colours, so hover colours need !important.
   The gg-* hook classes are added by build.py from those inline styles (see HOOKS there). */
a, button, input, select, textarea, .gg-acc-icon {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease,
              text-decoration-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.gg-acc-icon { transition-duration: 200ms; }

@media (hover: hover) {
  /* Buttons lift slightly so they feel pressable */
  .gg-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(23, 76, 60, 0.18); }
  .gg-btn-on-ink:hover { box-shadow: none; }
  /* Primary buttons: evergreen to primary-hover */
  .gg-fill-primary:hover { background: #103A2E !important; }
  /* Secondary buttons: soft green to secondary-hover */
  .gg-fill-secondary:hover { background: #D5E2D8 !important; }
  /* Marigold button on evergreen */
  .gg-fill-marigold:hover { filter: brightness(0.93); }
  /* Outline button on evergreen */
  .gg-btn-on-ink:hover { background: rgba(250, 251, 248, 0.1) !important; border-color: #FAFBF8 !important; }

  /* Header links and menu button: quiet accent fill */
  .gg-navlink:hover { background: #E6EEE7 !important; color: #174C3C !important; }
  .gg-menu-btn:hover { background: #E6EEE7; border-radius: 8px; }

  /* Text links keep their colour on hover (so they stay readable whatever is behind them); the underline thickens */
  .gg-link:hover { text-decoration-thickness: 2px; }
  /* "You choose which comes first" is styled as a green button: same hover as other primary buttons */
  .gg-areas li:last-child a:hover { background: #103A2E; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(23, 76, 60, 0.18); }
  /* Footer and other links on evergreen: brighten to chalk */
  .gg-link-on-ink:hover { color: #FAFBF8 !important; text-decoration: underline; text-underline-offset: 3px; }
  .gg-link-marigold:hover { text-decoration-thickness: 2px; }

  /* FAQ rows: question turns evergreen, chevron nudges */
  .gg-acc:hover { color: #174C3C !important; }
  .gg-acc:hover .gg-acc-icon svg { stroke: #174C3C; }
  .gg-acc[aria-expanded="false"]:hover .gg-acc-icon { transform: translateY(2px); }

  /* Fields: border darkens to foreground (not over focus or error styling) */
  input[type="text"]:hover:not(:focus):not([aria-invalid="true"]), input[type="email"]:hover:not(:focus):not([aria-invalid="true"]),
  select:hover:not(:focus):not([aria-invalid="true"]), textarea:hover:not(:focus):not([aria-invalid="true"]) { border-color: #25332D !important; }

  /* Booking days and times */
  .gg-day:not([aria-pressed="true"]):hover, .gg-time:not([aria-pressed="true"]):hover { background: #E6EEE7; border-color: #174C3C; }
}
label:has(input[type="checkbox"]) { cursor: pointer; }

/* Press feedback on buttons */
.gg-btn:active,
.gg-day:active, .gg-time:active, .gg-areas li:last-child a:active { transform: translateY(0) scale(0.98) !important; box-shadow: none !important; }

/* FAQ answers open with a short fade */
.gg-acc ~ [role="region"]:not([hidden]), [role="region"][id$="-panel"]:not([hidden]) { animation: gg-reveal 200ms ease-out; }
@keyframes gg-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  a, button, input, select, textarea, .gg-acc-icon { transition: none; }
  [role="region"][id$="-panel"]:not([hidden]) { animation: none; }
  a:active, button:active, .gg-day:active, .gg-time:active { transform: none !important; }
}

/* ---------------------------------------------------------------- reveal on scroll (site.js adds .gg-motion) */
.gg-motion main section:not(#gg-hero) > * { transition: opacity 600ms ease-out, transform 600ms ease-out; }
.gg-motion main section:not(#gg-hero):not(.gg-in) > * { opacity: 0; transform: translateY(20px); }

/* The Tuesday timeline plays out: each row slides in, then its admin issue pops in after it */
.gg-motion #gg-hero aside ol:not(.gg-in) > li { opacity: 0; }
.gg-motion #gg-hero aside ol.gg-in > li { animation: gg-row 450ms ease-out both; animation-delay: var(--gg-d); }
.gg-motion #gg-hero aside ol.gg-in > li div > span:has(> span) { animation: gg-flag 400ms cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--gg-d) + 350ms); }
#gg-hero aside ol > li:nth-child(1) { --gg-d: 200ms; }
#gg-hero aside ol > li:nth-child(2) { --gg-d: 550ms; }
#gg-hero aside ol > li:nth-child(3) { --gg-d: 900ms; }
#gg-hero aside ol > li:nth-child(4) { --gg-d: 1250ms; }
#gg-hero aside ol > li:nth-child(5) { --gg-d: 1600ms; }
#gg-hero aside ol > li:nth-child(6) { --gg-d: 1950ms; }
@keyframes gg-row { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes gg-flag { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }

/* Arrows on links that take you somewhere: they slide right on hover */
a.gg-fill-secondary:is([href^="/"], [href^="#"])::after,
.gg-btn-on-ink::after,
.gg-arrow::after {
  content: "→"; content: "→" / ""; display: inline-block; transition: transform 200ms ease;
}
.gg-arrow::after { margin-left: 0.3em; text-decoration: none; }
@media (hover: hover) {
  a.gg-fill-secondary:is([href^="/"], [href^="#"]):hover::after,
  .gg-btn-on-ink:hover::after,
  .gg-arrow:hover::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  a::after { transition: none !important; transform: none !important; }
}

/* Wider screens: hero cards sit in a ring around the Tuesday box (positions from site.js) */
@media (min-width: 921px) {
  #gg-hero:not(.gg-ringed) .gg-hero-bg { visibility: hidden; }
  #gg-hero .gg-hc-pull[data-rx] { left: var(--rl, 0px) !important; top: var(--rt, 0px) !important; }
}

/* Hero cards gather around the Tuesday box (targets set by site.js), not towards the pointer */
@media (min-width: 921px) and (prefers-reduced-motion: no-preference) {
  #gg-hero .gg-hc-pull { transform: translate(calc(var(--tx, 0px) * var(--k) * var(--p, 0)), calc(var(--ty, 0px) * var(--k) * var(--p, 0))); }
}

/* Times and status labels in Geist Mono (Nav, 5 Oct 2026). Labels are the small pill badges the build writes inline. */
.gg-hc-time, #gg-hero aside time, .gg-time { font-family: 'Geist Mono', ui-monospace, monospace !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.gg-pill { font-family: 'Geist Mono', ui-monospace, monospace !important; font-weight: 500 !important; font-size: 14px !important; letter-spacing: 0.02em; }

/* Admin dots in the Tuesday panel: an evergreen edge so the marigold mark reads at 3:1 on white (WCAG 1.4.11). */
.gg-dot { box-shadow: inset 0 0 0 1.5px #174C3C; }