/* ==========================================================================
   04-design-tokens.css  |  WS FootClinic
   SOURCE OF TRUTH: Bella's brand kit (/workspace/brand-kits/ws-footclinic/tokens.css,
   brand.json), extracted from https://wsfootclinic.com.au/ on 21 Oct 2026.
   Part A is Bella's tokens.css copied verbatim, except the Google Fonts @import,
   which is replaced by self-hosted @font-face rules for performance.
   Part B is the build layer: semantic aliases and the AA-safe rules the builder
   must follow. Paste both parts at the top of /css/styles.css.
   ========================================================================== */

/* ---------- Self-hosted fonts (SIL OFL, files in /assets/fonts) ---------- */
@font-face {
  font-family: "Raleway";
  src: url("/assets/fonts/raleway-variable-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Part A: Bella's tokens (verbatim) ---------- */
/* WS FootClinic (Western Sydney Foot Clinic) design tokens
   Source: https://wsfootclinic.com.au/ extracted 2026-10-21
   All values taken directly from the live site unless marked "inferred". */

:root {
  /* Colour: brand (direct) */
  --wsfc-primary: #185E8F;      /* navy, Elementor global primary, logo navy */
  --wsfc-secondary: #26AAE0;    /* sky blue, Elementor global secondary, logo light blue */
  --wsfc-accent: #56CEFF;       /* light cyan, Elementor global accent, hover + hero highlight */
  --wsfc-cta: #FF6B00;          /* orange booking CTA, hard-coded. Retired in round 2: booking now uses --color-book */
  --wsfc-navy-deep: #001829;    /* dark overlay gradient end */

  /* Colour: neutrals (direct) */
  --wsfc-bg: #FFFFFF;
  --wsfc-surface: #F3F3F3;
  --wsfc-border: #E0E0E0;
  --wsfc-text: #000000;
  --wsfc-text-body: #333333;    /* theme default body */
  --wsfc-muted: #2D2D2D;        /* closest thing to a muted tone on the site */
  --wsfc-on-dark: #FFFFFF;

  /* Colour: AA-safe text alternatives (inferred, not on the site) */
  --wsfc-cta-text-safe: #000000;        /* black on #FF6B00 = 7.36:1 */
  --wsfc-secondary-text-safe: #185E8F;  /* use navy for small blue text on white */

  /* Gradients (direct) */
  --wsfc-gradient-topbar: linear-gradient(98deg, #185E8F 0%, #26AAE0 100%);
  --wsfc-gradient-dark: linear-gradient(180deg, #185E8F 0%, #001829 100%);
  --wsfc-hero-overlay: rgba(0, 0, 0, 0.35);

  /* Typography (direct) */
  --wsfc-font-heading: "Raleway", sans-serif;
  --wsfc-font-body: "Poppins", sans-serif;
  --wsfc-fs-display: 65px;   /* mobile 38px, weight 800, uppercase */
  --wsfc-fs-h1: 45px;
  --wsfc-fs-h2: 40px;
  --wsfc-fs-h3: 32px;
  --wsfc-fs-h4: 24px;
  --wsfc-fs-eyebrow: 19px;   /* uppercase, 4.3px tracking */
  --wsfc-fs-h5: 18px;
  --wsfc-fs-body: 16px;
  --wsfc-fs-nav: 15px;
  --wsfc-fs-button: 15px;
  --wsfc-lh-body: 1.5;       /* 24px on 16px */
  --wsfc-lh-heading: 1.0;    /* as on site; 1.15 to 1.2 recommended (inferred) */
  --wsfc-tracking-eyebrow: 4.3px;
  --wsfc-fw-regular: 400;
  --wsfc-fw-medium: 500;
  --wsfc-fw-semibold: 600;
  --wsfc-fw-bold: 700;
  --wsfc-fw-black: 800;

  /* Radius (direct) */
  --wsfc-radius-sm: 3px;
  --wsfc-radius-md: 10px;
  --wsfc-radius-lg: 20px;
  --wsfc-radius-pill: 30px;
  --wsfc-radius-pill-lg: 50px;
  --wsfc-radius-round: 50%;

  /* Spacing (20px widget gap and button paddings direct; scale inferred) */
  --wsfc-space-1: 4px;
  --wsfc-space-2: 8px;
  --wsfc-space-3: 12px;
  --wsfc-space-4: 16px;
  --wsfc-space-5: 20px;
  --wsfc-space-6: 24px;
  --wsfc-space-7: 30px;
  --wsfc-space-8: 40px;
  --wsfc-button-padding: 15px 30px;
  --wsfc-button-padding-lg: 20px 40px;

  /* Shadows (direct) */
  --wsfc-shadow-card: 0 16px 24px 0 rgba(73, 104, 126, 0.16);
  --wsfc-shadow-soft: 2px 3px 10px 0 rgba(0, 0, 0, 0.08);
  --wsfc-shadow-lifted: 0 10px 30px 0 rgba(45, 45, 45, 0.2);

  /* Layout (direct) */
  --wsfc-container: 1140px;
  --wsfc-container-hero: 1300px;
  --wsfc-container-wide: 1400px;
  --wsfc-bp-tablet: 1024px;
  --wsfc-bp-mobile: 767px;

  /* Motion (direct) */
  --wsfc-transition: 0.4s;
  --wsfc-transition-fast: 0.3s;
}

/* ---------- Part B: build layer (TwentyFour8) ----------
   Contrast ratios checked 21 Oct 2026 (WCAG 2.1 AA needs 4.5:1 for normal text):
   white on --wsfc-primary 6.92 | --wsfc-primary on #F3F3F3 6.23 | #333 on white 12.63
   white on --wsfc-navy-deep 18.06 | --wsfc-accent on navy-deep 10.04
   FAILS: white on --wsfc-cta 2.86, white on --wsfc-secondary 2.66, white on --wsfc-accent 1.80,
   --wsfc-secondary text on white 2.66. Never use those pairs for text or buttons. */
:root {
  /* Semantic aliases used by the site CSS */
  --color-primary: var(--wsfc-primary);          /* all primary buttons, links, headings accents */
  --color-primary-hover: #0F4468;                 /* inferred darker navy, white on it 10.26:1 */
  --color-on-primary: var(--wsfc-on-dark);
  --color-text: var(--wsfc-text-body);            /* #333333 body copy */
  --color-heading: var(--wsfc-text);              /* #000000; or primary navy for H1 if preferred */
  --color-bg: var(--wsfc-bg);
  --color-surface: var(--wsfc-surface);
  --color-border: var(--wsfc-border);
  --color-dark: var(--wsfc-navy-deep);            /* dark bands and footer, white text */
  --color-decor: var(--wsfc-secondary);           /* sky: rules, icon fills, dividers ONLY */
  --color-decor-light: var(--wsfc-accent);        /* cyan: highlights on navy-deep only */
  --color-tint: #E9F6FC;                          /* inferred light sky tint for info panels; navy on it 6.27:1 */
  --color-focus: var(--wsfc-primary);
  --color-error: #B42318;                         /* inferred, 6.57:1 on white */
  --color-success: #1E6B3A;                       /* inferred, 6.52:1 on white */

  /* OPTIONAL, NEEDS AHMAD SIGN-OFF: AA-safe orange if he wants to keep orange for booking.
     White on #C25100 = 4.70:1. Do not use until approved (see 06-open-questions.md). */
  --wsfc-cta-aa-option: #C25100;

  --font-heading: var(--wsfc-font-heading);
  --font-body: var(--wsfc-font-body);

  /* Responsive type built from Bella's scale, with calmer line heights (Bella: 1.15 to 1.2 recommended) */
  --fs-body: 1rem;                                                    /* 16px, never smaller on mobile */
  --fs-h1: clamp(1.75rem, 1.2rem + 2.4vw, var(--wsfc-fs-h1));         /* 28px mobile to 45px */
  --fs-h2: clamp(1.5rem, 1.1rem + 1.8vw, var(--wsfc-fs-h2));          /* 24px to 40px */
  --fs-h3: clamp(1.25rem, 1rem + 1vw, var(--wsfc-fs-h4));             /* 20px to 24px */
  --fs-eyebrow: 0.875rem;                                             /* 14px, navy text, tracked */
  --lh-heading: 1.15;
  --lh-body: 1.6;

  --container: var(--wsfc-container);
  --measure: 68ch;
}

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

/* Base rules the builder must keep */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
}
h1, h2, h3, h4, nav {
  font-family: var(--font-heading);
}
h1, h2, h3, h4 {
  line-height: var(--lh-heading);
  font-weight: var(--wsfc-fw-semibold);
  color: var(--color-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--wsfc-fw-bold); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.eyebrow {
  font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: var(--wsfc-fw-semibold);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); /* navy, not sky: AA */
}
a { color: var(--color-primary); text-underline-offset: 0.18em; }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* Buttons: pill radius from the brand, navy fill for every primary action (one booking colour site-wide) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wsfc-space-2);
  min-height: 48px; padding: var(--wsfc-button-padding);
  border-radius: var(--wsfc-radius-pill); border: 2px solid transparent;
  font-family: var(--font-body); font-weight: var(--wsfc-fw-medium); font-size: var(--wsfc-fs-button);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--wsfc-transition-fast) ease, color var(--wsfc-transition-fast) ease;
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--secondary:hover { background: var(--color-tint); }
.btn--on-dark { background: var(--wsfc-bg); color: var(--wsfc-primary); }   /* on navy-deep bands */

.card { background: var(--wsfc-bg); border-radius: var(--wsfc-radius-lg); box-shadow: var(--wsfc-shadow-soft); padding: var(--wsfc-space-6); }
.section--surface { background: var(--color-surface); }
.section--dark { background: var(--wsfc-gradient-dark); color: var(--wsfc-on-dark); }
.section--dark h2, .section--dark h3 { color: var(--wsfc-on-dark); }
.container { width: min(100% - 2 * var(--wsfc-space-5), var(--container)); margin-inline: auto; }
.prose { max-width: var(--measure); }

/* Logo (Bella's vector set, SVG preferred): full colour on light backgrounds; white on photos or site navy #185E8F;
   reversed-two-tone on #001829. Never full colour on navy. The logo keeps its own colours (#195F90, #25AAE1);
   do not recolour it to the tokens. Reversed versions need Ahmad's approval before going live. */
.logo { display: block; height: auto; width: clamp(160px, 18vw, 200px); }
.logo-plate { display: inline-block; background: var(--wsfc-bg); padding: var(--wsfc-space-3) var(--wsfc-space-4); border-radius: var(--wsfc-radius-md); } /* fallback only, if reversed logos are not yet approved */

/* Editorial clinic system, shared across every route. */
:root{--container:1200px;--measure:66ch;--section-space:104px;--hero-space:76px;--header-height:92px;--mobile-header:76px;--mobile-bottom:76px;--tap:44px;--small:14px;--body-large:18px;--booking-height:760px;--mobile-booking-height:900px;--color-heading:#102F43;--color-text:#354C5B;--color-border:#D7E2E8;--color-surface:#F4F7F8;--color-tint:#EDF6FA;--fs-h1:clamp(2.4rem,2rem + 2.7vw,4.5rem);--fs-h2:clamp(2rem,1.4rem + 1.8vw,3.1rem);--fs-h3:clamp(1.3rem,1.15rem + .5vw,1.6rem);--ease:cubic-bezier(.22,1,.36,1);--duration:220ms;--radius:5px;--zero:0;--hairline:1px;--ink-line:#77909F}
*{box-sizing:border-box}html{scroll-padding-top:112px}body{overflow-wrap:break-word}button,input,textarea,select{font:inherit}img{max-width:100%;height:auto}p{margin:0 0 22px}h1,h2,h3{margin:0 0 24px;letter-spacing:-.035em}h1{line-height:1.06;color:var(--color-primary)}h2{line-height:1.12}h3{line-height:1.24;letter-spacing:-.02em}a{transition:color var(--duration),background-color var(--duration)}button,summary,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--color-primary);outline-offset:5px}.container{width:min(calc(100% - 96px),var(--container));margin-inline:auto}.section{padding-block:var(--section-space)}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px;font-weight:700;line-height:1.5}.section-heading{margin-bottom:44px}.section-heading h2{margin:0}.section-heading--row{display:flex;align-items:end;justify-content:space-between;gap:32px}.section-heading--row>a{flex-shrink:0;padding-bottom:6px}.small{font-size:14px}.prose{max-width:var(--measure)}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.btn{min-height:52px;line-height:1.4;border-radius:var(--radius);padding:15px 24px;font-size:15px;gap:20px;transition:background-color var(--duration),color var(--duration),transform var(--duration) var(--ease);box-shadow:none}.btn:hover{transform:translateY(-2px);box-shadow:none}.btn:active{transform:translateY(0)}.btn--secondary{border-width:1px}.btn span{margin:0}.text-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:14px;font-weight:500;text-underline-offset:6px}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link:focus{position:fixed;top:12px;left:12px;z-index:200;background:white;padding:16px}.topline{background:var(--color-dark);color:white;padding:8px 0;font-size:12px}.topline .container{display:flex;justify-content:space-between;gap:20px}.topline a{color:white}.site-header{position:sticky;top:0;background:white;border-bottom:1px solid var(--color-border);z-index:60}.header-inner{display:flex;align-items:center;gap:24px;min-height:var(--header-height)}.brand{flex-shrink:0}.logo{width:190px;height:auto;display:block}#primary-navigation{display:flex;align-items:center;gap:20px;margin-left:auto;font-size:14px;font-weight:600}#primary-navigation>a{display:flex;align-items:center;min-height:44px;text-decoration:none}.nav-disclosure{position:relative}.nav-disclosure>summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;color:var(--color-primary);white-space:nowrap}.nav-disclosure>summary::-webkit-details-marker{display:none}.nav-disclosure>summary:after{content:'⌄';font-size:13px;transition:transform var(--duration)}.nav-disclosure[open]>summary:after{transform:rotate(180deg)}.nav-dropdown{position:absolute;top:calc(100% + 16px);right:0;width:280px;padding:20px 24px;background:white;border:1px solid var(--color-border);border-top:3px solid var(--color-primary);box-shadow:0 16px 40px #102f4314;max-height:75vh;overflow:auto}.nav-dropdown--wide{width:560px;column-count:2;column-gap:28px}.nav-dropdown a{display:block;padding:9px 0;text-decoration:none;break-inside:avoid;font-size:14px}.nav-dropdown a:hover{text-decoration:underline}.nav-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--color-border);padding:8px 0;margin:8px 0;color:var(--color-text);break-after:avoid}.header-book .btn{white-space:nowrap;padding:13px 20px;min-height:48px}.menu-toggle{min-height:44px;background:white;border:1px solid var(--color-border);color:var(--color-primary);border-radius:var(--radius);padding:8px 14px;font-size:14px}
/* The portrait and typography carry the opening, with no floating decorations. */
.home-hero{background:#F4F8FA;border-bottom:1px solid var(--color-border)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:72px;padding-block:64px}.hero-copy h1{font-size:clamp(3rem,5.3vw,4.8rem);max-width:12ch;font-weight:600;letter-spacing:-.055em;margin-bottom:28px}.hero-copy h1 span{display:block}.hero-copy h1 .hero-place{color:var(--color-heading)}.hero-copy .eyebrow{display:flex;align-items:center;gap:12px}.hero-copy .eyebrow:before{content:'';width:32px;height:2px;background:var(--color-decor)}.hero-summary{font-size:17px;line-height:1.75;max-width:44ch;margin-bottom:0}.hero-note{margin-top:26px;font-size:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--color-text)}.hero-portrait{margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.hero-portrait picture{display:block;overflow:hidden;border-radius:3px 88px 3px 3px;background:#D9E9F1;aspect-ratio:4/4.5}.hero-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%}.hero-portrait figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid #B7CCD8;font-size:12px}.hero-portrait strong{font-size:20px;font-family:var(--font-heading);color:var(--color-primary);font-weight:700}.recognition-bar{padding:30px 0;background:white;border-bottom:1px solid var(--color-border)}.recognition-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;list-style:none;margin:0;padding:0;align-items:center}.recognition-logos li{min-height:66px;display:flex;justify-content:center;align-items:center}.recognition-logos img{width:auto;height:auto;max-height:52px;max-width:180px;object-fit:contain}.recognition-logos li:nth-child(2) img{max-width:145px}.funding-strip{border-bottom:1px solid var(--color-border);background:#FAFCFD}.funding-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:12px;font-size:12px}.funding-inner strong{font-size:12px;font-weight:500}.funding-inner a{min-height:44px;display:flex;align-items:center;text-underline-offset:4px}
/* Service directories: a readable index rather than repeated boxed tiles. */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;counter-reset:services;margin-block:28px 40px}.service-card{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:24px;padding:30px 0;border:0;border-top:1px solid var(--color-border);border-radius:0;background:transparent;box-shadow:none;counter-increment:services;transition:border-color var(--duration)}.service-card:hover{border-color:var(--color-primary)}.service-icon{grid-row:1/4;width:64px;height:64px;border-radius:5px;background:var(--color-tint);display:flex;align-items:center;justify-content:center}.service-icon img{width:48px;height:48px;object-fit:contain}.service-card h3{font-size:23px;margin:0 0 12px;padding-right:28px}.service-card h3 a{text-decoration:none}.service-card h3 a:after{content:'↗';position:absolute;right:0;top:30px;color:var(--color-primary);font-size:22px;transition:transform var(--duration)}.service-card h3 a:hover:after{transform:translate(2px,-2px)}.service-card p{font-size:14px;line-height:1.75;margin-bottom:10px;max-width:47ch}.service-card .text-link{font-size:12px;justify-self:start}.service-card .text-link>span[aria-hidden]{display:none}.related-inline{border-top:1px solid var(--color-border);padding-top:24px;font-size:14px;margin:0}.section--surface{background:var(--color-primary);color:#F1F7FA}.meet-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:112px}.meet-grid>div:first-child>p:not(.eyebrow){max-width:50ch;font-size:15px;line-height:1.8}.meet-grid h2{color:white;font-size:clamp(2rem,3vw,2.8rem);margin-bottom:32px}.meet-grid .eyebrow{color:#E4F3FB}.meet-grid a{color:white;text-underline-offset:6px;display:inline-flex;min-height:44px;align-items:center}.approach{padding:0;background:none;border-radius:0}.approach>h3{font-size:28px;color:white;margin-bottom:32px}.step{display:flex;gap:24px;border-top:1px solid #FFFFFF55;padding:24px 0 0}.step>span{font-size:14px;color:#D2EDFA;padding-top:4px}.step h3{color:white;font-size:21px;margin-bottom:10px}.step p{font-size:14px;line-height:1.7;color:#F1F7FA}.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:112px;margin-bottom:96px}.location-grid>div:first-child>p{max-width:42ch;font-size:15px}.location-grid h2{max-width:12ch}.hours-panel{padding:34px 40px;background:var(--color-tint);border-radius:var(--radius);align-self:start}table{width:100%;border-collapse:collapse}caption{text-align:left;font-family:var(--font-heading);font-size:24px;font-weight:600;color:var(--color-primary);margin-bottom:24px}th,td{text-align:left;padding:16px 0;border-bottom:1px solid var(--color-border);font-weight:400;vertical-align:top}td{padding-left:20px}.hours{font-size:14px}.hours tr:last-child th,.hours tr:last-child td{border:0}.faq-section{max-width:none;border-top:1px solid var(--color-border);padding-top:64px;display:grid;grid-template-columns:1fr 1.4fr;column-gap:80px;margin-top:56px}.faq-section .section-heading{grid-column:1;grid-row:1/3}.faq-section .section-heading h2{max-width:10ch}.faq-list{grid-column:2}.faq-list details{border-bottom:1px solid var(--color-border)}.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;color:var(--color-primary);font-size:15px;font-weight:500;min-height:52px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';font-size:22px;font-weight:400}.faq-list details[open] summary:after{content:'−'}.faq-list p{font-size:14px;line-height:1.85;padding:0 32px 8px 0}.faq-section>p{grid-column:2;margin-top:24px;font-size:14px}.cta-band{background:var(--color-tint);color:var(--color-text);padding-block:72px;border-top:1px solid var(--color-border)}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:48px}.cta-band h2{font-size:clamp(2.1rem,3.5vw,3.4rem);color:var(--color-primary)}.cta-band .eyebrow{color:var(--color-primary)}.cta-band p:last-child{margin:0;font-size:15px}.cta-band .btn{flex-shrink:0;background:var(--color-primary);color:white;padding-inline:30px}.cta-band .btn:hover{background:var(--color-primary-hover)}
/* Interior pages share the same hierarchy, reading measure and care pathways. */
.page-hero{background:#F4F8FA;padding-bottom:64px;border-bottom:1px solid var(--color-border)}.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;padding-block:22px;margin-bottom:38px;line-height:1.6}.breadcrumbs a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}.page-hero h1{max-width:23ch;font-weight:600}.page-intro{max-width:70ch;font-size:17px;line-height:1.8;margin-top:30px}.page-hero .actions{margin-top:28px}.copy-section{margin-bottom:40px}.copy-section h2{font-size:26px;line-height:1.25;max-width:32ch;margin-bottom:18px}.copy-section p{font-size:16px;line-height:1.85}.article-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:100px}.article-layout:not(:has(aside)){grid-template-columns:1fr}.article-layout aside{align-self:start;position:sticky;top:124px}.illustration-panel{margin:0;background:var(--color-tint);border:0;border-radius:var(--radius);padding:36px 24px;min-height:280px;display:flex;align-items:center;justify-content:center;gap:24px;flex-direction:column}.illustration-disc{width:180px;height:180px;display:flex;align-items:center;justify-content:center}.illustration-disc img{width:80%;height:80%;object-fit:contain}.illustration-panel figcaption{text-align:center;font-size:19px;font-family:var(--font-heading);font-weight:600;color:var(--color-primary);max-width:22ch}.illustration-panel--orthotic{padding:12px 16px 28px;min-height:0}.illustration-panel--orthotic>img{width:100%;height:auto}.aside-note{border-top:1px solid var(--color-border);padding:24px 0;margin-top:28px}.aside-note h2{font-size:22px}.aside-note p,.aside-note a{font-size:14px}.related-links{display:flex;flex-wrap:wrap;gap:12px 28px}.related-links a{min-height:44px;display:flex;align-items:center;font-size:14px}.profile-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:96px}.profile-portrait{margin:0;align-self:start;position:sticky;top:124px}.profile-portrait img{width:100%;display:block;border-radius:3px 72px 3px 3px}.orthotics-pathway{margin-block:64px;padding-top:56px;border-top:1px solid var(--color-border)}.orthotics-pathway .section-heading{max-width:60ch}.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:0}.process-grid li{min-width:0}.process-grid img{width:100%;display:block;margin-bottom:24px}.process-number{display:block;font-size:12px;color:var(--color-primary);margin-bottom:10px}.process-grid h3{font-size:25px;margin-bottom:14px}.process-grid p{font-size:14px;line-height:1.75}.process-note{padding:20px 24px;background:var(--color-tint);margin-top:24px;border-left:2px solid var(--color-primary);font-size:14px}.table-wrap{max-width:100%;margin-bottom:48px}.fee-table thead{background:var(--color-primary);color:white}.fee-table th,.fee-table td{padding:20px;font-size:14px}.fee-table tbody tr:nth-child(even){background:var(--color-surface)}.fee-table caption{font-family:var(--font-body);font-size:14px;color:var(--color-text);line-height:1.7}.form-section{padding:48px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);max-width:960px;margin:64px auto}.form-section h2{font-size:34px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-block:32px}.field--wide{grid-column:1/-1}.field label{display:block;font-size:14px;font-weight:500;margin-bottom:10px}input:not([type=checkbox]),textarea,select{display:block;width:100%;padding:14px 16px;min-height:52px;min-width:0;border:1px solid #77909F;border-radius:3px;background:white;color:var(--color-text)}textarea{resize:vertical}.field-error{display:block;color:var(--color-error);font-size:13px;margin-top:8px}[aria-invalid=true]{border-color:var(--color-error)!important}.consent{display:flex;align-items:flex-start;gap:14px;min-height:44px;font-size:14px}.consent input{width:22px;height:22px;flex-shrink:0;margin:2px 0 0;accent-color:var(--color-primary)}.form-status{color:var(--color-error);font-size:14px;margin-bottom:20px}.booking__frame-wrap{width:100%;max-width:960px;margin-inline:auto;min-height:var(--booking-height);contain:layout}.booking__frame{display:block;width:100%;min-height:var(--booking-height);height:var(--booking-height);border:0;background:white}.clinical-review{font-size:14px;border-top:1px solid var(--color-border);padding-top:24px;margin-top:40px}mark{background:var(--color-tint);color:var(--color-text)}
.site-footer{background:var(--color-dark);color:#E6EFF5;padding-top:72px}.footer-grid{display:grid;grid-template-columns:1.3fr .9fr 1fr 1.2fr;gap:48px}.site-footer a{color:#E6EFF5;overflow-wrap:anywhere;min-height:32px;display:inline-flex;align-items:center;text-underline-offset:4px}.site-footer a:hover{color:white}.site-footer h2,.site-footer caption{color:white;font-size:18px;letter-spacing:0;margin-bottom:24px}.site-footer p{font-size:12px;line-height:1.8;margin-bottom:10px}.site-footer .logo-plate{display:inline-block;margin-bottom:24px;padding:12px;border-radius:3px}.site-footer .logo{width:175px}.site-footer th,.site-footer td{font-size:12px;border-color:#FFFFFF33;padding-block:12px}.footer-bottom{border-top:1px solid #FFFFFF33;margin-top:56px;padding-block:24px;display:flex;justify-content:space-between;gap:24px;font-size:12px}.mobile-bar{display:none}[hidden]{display:none!important}
@media(min-width:1051px){.menu-toggle{display:none!important}}
@media(max-width:1200px){.header-inner{gap:16px}.logo{width:170px}#primary-navigation{gap:14px;font-size:13px}.header-book .btn{padding-inline:16px}.hero-grid{gap:48px}.meet-grid,.location-grid,.article-layout{gap:64px}.footer-grid{gap:28px}}
@media(max-width:1050px){.topline{display:none}.header-inner{min-height:var(--mobile-header)}.menu-toggle{display:inline-flex;align-items:center;gap:12px;margin-left:auto}.js #primary-navigation:not(.is-open){display:none}#primary-navigation{position:fixed;inset:var(--mobile-header) 0 0;display:block;background:white;overflow:auto;padding:24px 48px 100px;margin:0;z-index:80;font-size:20px}.nav-disclosure>summary{white-space:normal;padding-block:18px;border-bottom:1px solid var(--color-border);justify-content:space-between}.nav-dropdown{position:static;width:100%;max-height:none;box-shadow:none;border:0;padding:12px 20px;column-count:1}.nav-dropdown a{font-size:16px;padding-block:12px}#primary-navigation>a{padding-block:20px}.header-book{display:none}.no-scroll{overflow:hidden}html:not(.js) .site-header{position:static}html:not(.js) .header-inner{flex-wrap:wrap}html:not(.js) #primary-navigation{position:static;padding:0;width:100%}.hero-grid{gap:40px;padding-block:52px}.hero-copy h1{font-size:clamp(2.8rem,5.6vw,4rem)}.hero-copy .actions{flex-direction:column;align-items:start}.hero-summary{font-size:16px}.hero-portrait figcaption{flex-direction:column;gap:3px}.funding-inner{flex-wrap:wrap;justify-content:flex-start;gap:6px 24px}.meet-grid,.location-grid{gap:48px}.footer-grid{grid-template-columns:1fr 1fr;gap:48px}.article-layout,.profile-layout{gap:48px}.faq-section{gap:40px}.recognition-logos{gap:24px}.recognition-logos img{max-width:150px}.cards{column-gap:40px}.service-card{column-gap:18px}.service-card h3{font-size:21px}}
@media(max-width:767px){:root{--section-space:64px;--fs-h1:clamp(2.25rem,7vw,3.4rem);--fs-h2:clamp(1.9rem,6vw,2.5rem)}.container{width:calc(100% - 40px)}.logo{width:170px}.hero-grid{grid-template-columns:1fr;gap:32px;padding-block:40px}.hero-copy h1{font-size:clamp(2.65rem,10.5vw,4.1rem);max-width:13ch;margin-bottom:22px}.hero-copy .eyebrow{font-size:10px;gap:10px;margin-bottom:22px}.hero-copy .eyebrow:before{width:24px}.hero-summary{max-width:44ch;font-size:15px;line-height:1.8}.hero-copy .actions{flex-direction:row;align-items:stretch;gap:10px;margin-top:24px}.hero-copy .actions .btn{flex:1;padding-inline:12px;font-size:13px;gap:10px}.hero-note{font-size:11px;margin-top:20px;gap:8px}.hero-portrait{max-width:none;width:100%}.hero-portrait picture{aspect-ratio:1.25;border-radius:3px 56px 3px 3px}.hero-portrait img{object-position:center 25%}.hero-portrait figcaption{flex-direction:row;align-items:baseline;font-size:11px;margin-top:12px;padding-top:12px}.hero-portrait strong{font-size:19px}.recognition-bar{padding-block:24px}.recognition-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}.recognition-logos li{min-height:48px}.recognition-logos img{max-height:42px;max-width:135px}.recognition-logos li:nth-child(2) img{max-width:120px}.funding-inner{gap:0 22px;padding-block:14px;font-size:12px}.funding-inner strong{width:100%;margin-bottom:4px}.funding-inner a{min-height:38px}.section-heading{margin-bottom:28px}.section-heading--row{flex-direction:column;align-items:start;gap:18px}.section-heading--row>a{font-size:14px;min-height:44px;display:flex;align-items:center}.cards{grid-template-columns:1fr;margin-top:0;margin-bottom:24px}.service-card{grid-template-columns:56px minmax(0,1fr);gap:0 20px;padding:24px 0}.service-icon{width:56px;height:56px}.service-icon img{width:42px;height:42px}.service-card h3{font-size:22px;margin-bottom:10px}.service-card h3 a:after{top:24px}.service-card p{font-size:14px}.service-card .text-link{min-height:40px}.related-inline{font-size:13px}.meet-grid,.location-grid,.article-layout,.profile-layout{grid-template-columns:1fr;gap:40px}.meet-grid h2{font-size:32px}.meet-grid>div:first-child>p:not(.eyebrow){font-size:14px}.meet-grid .approach{padding-top:24px}.approach>h3{font-size:25px}.step h3{font-size:20px}.location-grid{margin-bottom:56px}.location-grid h2{max-width:14ch}.hours-panel{padding:26px 24px}.hours{font-size:13px}.faq-section{display:block;padding-top:40px;margin-top:40px}.faq-section .section-heading h2{max-width:16ch}.faq-list summary{font-size:14px}.faq-list p{font-size:14px}.cta-band{padding-block:48px}.cta-inner{flex-direction:column;align-items:start;gap:28px}.cta-band h2{font-size:36px}.cta-band .eyebrow{font-size:11px}.cta-band p:last-child{font-size:14px}.page-hero{padding-bottom:40px}.breadcrumbs{font-size:11px;gap:7px;padding-block:16px;margin-bottom:26px}.page-hero .eyebrow{font-size:10px;letter-spacing:.08em}.page-hero h1{max-width:23ch;overflow-wrap:normal}.page-intro{font-size:15px;line-height:1.85;margin-top:24px}.page-hero .actions .btn{font-size:13px;padding-inline:16px;gap:10px}.copy-section{margin-bottom:32px}.copy-section h2{font-size:23px}.copy-section p{font-size:15px}.article-layout aside,.profile-portrait{position:static}.illustration-panel{min-height:240px}.illustration-panel--orthotic{min-height:0}.profile-portrait{max-width:420px}.orthotics-pathway{margin-block:48px;padding-top:40px}.process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.process-grid img{margin-bottom:18px}.process-grid h3{font-size:23px}.process-grid p{font-size:13px}.table-wrap{overflow-x:auto}.fee-table{min-width:0;table-layout:fixed}.fee-table th,.fee-table td{font-size:12px;padding:12px 8px;overflow-wrap:anywhere}.form-section{padding:28px 20px;margin-block:40px}.form-section h2{font-size:28px}.form-grid{grid-template-columns:1fr;gap:24px}.form-grid>div{min-width:0}.consent{font-size:13px}.booking__frame-wrap,.booking__frame{min-height:var(--mobile-booking-height)}.booking__frame{height:var(--mobile-booking-height)}.site-footer{padding-top:48px}.footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}.site-footer .hours{max-width:420px}.site-footer p{font-size:12px}.site-footer h2,.site-footer caption{font-size:17px;margin-bottom:18px}.footer-bottom{flex-direction:column;gap:8px;margin-top:32px;font-size:11px;padding-bottom:28px}.mobile-bar{display:flex;position:fixed;inset:auto 0 0;z-index:55;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:white;border-top:1px solid var(--color-border);box-shadow:0 -4px 16px #102f430a}.mobile-bar .btn{flex:1;min-height:46px;padding:10px;font-size:14px}.mobile-bar .btn span{display:none}body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}#primary-navigation{padding:16px 24px 100px}}
@media(max-width:359px){.container{width:calc(100% - 32px)}.hero-copy h1{font-size:40px}.hero-copy .actions{flex-direction:column}.hero-copy .actions .btn{width:100%}.hero-note{font-size:10px}.hero-portrait figcaption{align-items:start;flex-direction:column;gap:2px}.recognition-logos{gap:22px 18px}.recognition-logos img{max-width:120px}.service-card{column-gap:16px}.service-card h3{font-size:20px}.page-hero .actions{flex-direction:column}.process-grid{grid-template-columns:1fr}.process-grid li{display:grid;grid-template-columns:90px minmax(0,1fr);gap:0 20px}.process-grid img{grid-row:1/4}.process-grid p{grid-column:1/-1;margin-top:12px}.footer-grid{column-gap:18px}}
@media(prefers-reduced-motion:no-preference){.nav-disclosure[open]>.nav-dropdown{animation:arrival 180ms var(--ease) both}.faq-list details[open]>p{animation:arrival 220ms var(--ease) both}@keyframes arrival{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Refinement pass: keep the portrait's hairline visible in the mobile crop. */
@media(max-width:767px){.hero-portrait img{object-position:center 10%}}

/* Refinement: keep short FAQ groups compact, and secondary information readable. */
.faq-section{align-items:start}.faq-section .section-heading{grid-row:auto}.faq-section .section-heading h2{max-width:14ch}.faq-content{min-width:0}.faq-content>p{margin:24px 0 0;font-size:14px}.hero-note{font-size:13px}.site-footer p,.site-footer th,.site-footer td{font-size:13px}.site-footer a{min-height:36px}
@media(max-width:767px){.hero-note{font-size:12px}.site-footer p,.site-footer th,.site-footer td{font-size:13px}.footer-grid{grid-template-columns:1fr;gap:32px}.footer-grid>div{grid-column:1/-1}.footer-grid>div:nth-child(2),.footer-grid>div:nth-child(3){border-top:1px solid #ffffff33;padding-top:24px}}
@media(max-width:359px){.hero-note{font-size:11px}}
/* Anchor the wider service menu to its navigation label. */
@media(min-width:1051px){.nav-dropdown--wide{left:0;right:auto}}

/* User-supplied service scenes: display each artwork within its own viewport.
   The source contact sheet remains intact; review headings/captions are outside the crop.
   Source panels: (84,204), (1224,204), (84,1028), each 1092 × 725 pixels. */
.service-scene{margin:0;background:white;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
.service-scene-crop{position:relative;aspect-ratio:1092/725;overflow:hidden;background:white}
.service-scene-crop img{position:absolute;display:block;width:219.78022%;max-width:none;height:auto;left:-7.69231%;top:-28.13793%}
.service-scene-crop--mobile img{left:-112.08791%}
.service-scene-crop--kids img{top:-141.79310%}
.service-scene figcaption{padding:18px 24px;border-top:1px solid var(--color-border);font-family:var(--font-heading);font-weight:600;font-size:19px;line-height:1.3;color:var(--color-primary)}

/* Round 2 (26 Oct 2026), item 2: one prominent booking colour site-wide.
   Warm yellow #FFC72C with deep navy #001829 text = 11.57:1 (WCAG AA and AAA).
   Hover #F5B400 with #001829 = 9.81:1. Focus ring #001829 on white 18.06:1, on #EDF6FA 16.48:1.
   The old orange (--wsfc-cta) was never used on a booking button in this build; nothing else to switch. */
:root{--color-book:#FFC72C;--color-book-hover:#F5B400;--color-on-book:#001829}
.btn.btn--book,.cta-band .btn.btn--book,.mobile-bar .btn.btn--book{background:var(--color-book);color:var(--color-on-book);border:2px solid var(--color-book);font-weight:600;box-shadow:0 2px 0 #00182922}
.btn.btn--book:hover,.cta-band .btn.btn--book:hover,.mobile-bar .btn.btn--book:hover{background:var(--color-book-hover);border-color:var(--color-book-hover);color:var(--color-on-book)}
.btn.btn--book:focus-visible{outline:3px solid var(--color-on-book);outline-offset:3px}
.header-book .btn.btn--book{padding:13px 22px}

/* Round 2, item 6: homepage booking section (same Cliniko embed as /book/). */
.home-booking{background:#F4F8FA;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.home-booking .section-heading{max-width:60ch}.home-booking__intro{margin:18px 0 0;font-size:16px}
.home-booking .booking__frame-wrap{background:white;border:1px solid var(--color-border);border-radius:var(--radius)}
.home-booking__fallback{max-width:960px;margin:20px auto 0;font-size:14px}

/* Round 2, item 5: Google rating banner (slim, under the hero). Stars are decorative (aria-hidden); the text carries the rating. */
.g-rating{background:white;border-bottom:1px solid var(--color-border)}
.g-rating__inner{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding-block:14px;font-size:15px}
.g-rating__g{flex-shrink:0}
.g-rating__stars{font-size:20px;letter-spacing:2px;line-height:1;background:linear-gradient(90deg,#FBBC04 var(--g-rating-pct),#C9D3DA var(--g-rating-pct));-webkit-background-clip:text;background-clip:text;color:transparent}
.g-rating__text{margin:0;color:var(--color-heading)}.g-rating__text strong{font-weight:600}
.g-rating__link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:500;margin-left:auto}
@media(max-width:767px){.g-rating__inner{gap:4px 12px;padding-block:10px;font-size:14px}.g-rating__link{margin-left:0;width:100%;min-height:40px}}
/* Round 2, item 4: care approach strip. */
.care-approach{background:var(--color-tint);border-bottom:1px solid var(--color-border);padding-block:44px}
.care-approach__heading{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin-bottom:28px;color:var(--color-primary)}
.care-approach__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.care-approach__item{display:flex;gap:16px;align-items:flex-start}
.care-approach__icon{flex-shrink:0;width:56px;height:56px;border-radius:5px;background:white;display:flex;align-items:center;justify-content:center}
.care-approach__icon img{width:40px;height:40px}
.care-approach__item h3{font-size:18px;margin:4px 0 8px;letter-spacing:-.01em}
.care-approach__item p{font-size:14px;line-height:1.65;margin:0}
@media(max-width:1050px){.care-approach__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.care-approach{padding-block:32px}.care-approach__list{grid-template-columns:1fr;gap:20px}.care-approach__icon{width:48px;height:48px}.care-approach__icon img{width:34px;height:34px}}

/* Round 2, item 7: compact booking block at the bottom of service and condition pages (CTA panel, no iframe). */
.booking-block{padding-block:56px}
.booking-block h2{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);margin-bottom:16px}
.booking-block p a{font-weight:600}
.booking-block__actions{display:flex;flex-wrap:wrap;gap:12px;flex-shrink:0}
.cta-band.booking-block .btn.btn--secondary{background:white;color:var(--color-primary);border:1px solid var(--color-primary);padding-inline:24px}.cta-band.booking-block .btn.btn--secondary:hover{background:var(--color-tint);color:var(--color-primary-hover)}
@media(max-width:767px){.booking-block{padding-block:40px}.booking-block h2{font-size:30px}.booking-block__actions{width:100%}.booking-block__actions .btn{flex:1 1 100%}}

/* r3 Rev 2 */
.why-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.why-card{background:#fff;border:1px solid #d9e3ec;border-radius:14px;padding:1.4rem;border-top:4px solid var(--color-book)}.why-card h3{margin-top:0}.callout--fees{background:#fff8e1;border-left:5px solid var(--color-book);border-radius:12px;padding:1.4rem 1.6rem;margin-bottom:2rem}.callout--fees h2{margin-top:0}

/* r3 v2 prominent Google rating */
.g-rating--v2{background:linear-gradient(180deg,var(--color-surface,#f4f7fa) 0 50%,#fff 50% 100%);border-bottom:0;padding:0 0 24px}
.g-rating__card{display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap;background:#fff;border:1px solid #d9e3ec;border-top:5px solid #FBBC04;border-radius:18px;box-shadow:0 14px 36px rgba(0,24,41,.12);padding:24px 32px;position:relative;margin-top:-28px}
.g-rating__card .g-rating__g{width:56px;height:56px}
.g-rating__label{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--color-heading)}
.g-rating__big{display:flex;align-items:center;gap:14px;margin:2px 0}
.g-rating__big strong{font-size:48px;line-height:1;font-weight:700;color:var(--color-heading)}
.g-rating--v2 .g-rating__stars{font-size:38px;letter-spacing:4px}
.g-rating--v2 .g-rating__text{font-size:17px;margin:0}
.g-rating--v2 .g-rating__link{margin-left:auto}
@media(max-width:767px){.g-rating__card{padding:20px;gap:12px 16px;margin-top:-16px;justify-content:center;text-align:center}.g-rating__score{width:100%}.g-rating__big{justify-content:center}.g-rating__big strong{font-size:40px}.g-rating--v2 .g-rating__stars{font-size:30px}.g-rating--v2 .g-rating__link{margin:0;width:100%;justify-content:center}}

/* r4 */
.hero-urgent{margin-top:12px;font-size:15px}.hero-urgent a{font-weight:600}
.urgent-callout,.faq-extra{background:#F4F8FA;border-left:4px solid #FFC72C;padding:12px 16px;margin:0 0 24px}
.urgent-fee{background:#001829;color:#fff;padding:14px 18px;border-radius:6px;border-left:6px solid #FFC72C}
.urgent-safety{border:2px solid #B42318;border-radius:6px;padding:4px 18px 8px}
.post-grid{list-style:none;padding:0;margin:0;display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:700px){.post-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card__link{display:flex;flex-direction:column;height:100%;border:1px solid #E0E0E0;border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;background:#fff}
.post-card__link:hover,.post-card__link:focus-visible{border-color:#185E8F;box-shadow:0 4px 14px #00182922}
.post-card__img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block}
.post-card__body{padding:18px 20px 22px}.post-card__title{font-size:20px;margin:0 0 8px;color:#185E8F}
.post-card__meta{font-size:14px;color:#2D2D2D}.post-card__more{font-weight:600;color:#185E8F}
.post-meta{font-size:15px;color:#2D2D2D}.post-figure{margin:16px 0 24px}.post-figure img{width:100%;height:auto;border-radius:8px}
.post-note{font-size:14px;background:#F3F3F3;padding:12px 16px;border-radius:6px}.post-related{margin:24px 0}
.gr{background:#001829;color:#fff;padding:56px 0}.gr .eyebrow{color:#FFC72C}.gr h2{color:#fff;margin:4px 0 0}
.gr__head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}
.gr__summary{display:flex;align-items:center;gap:12px}.gr__score{font-size:52px;font-weight:700;line-height:1}
.gr__stars{color:#FFC72C;letter-spacing:2px;font-size:22px;display:block}.gr__stars--sm{font-size:16px;display:inline}
.gr__count{display:block;font-size:14px;color:#D6E4EE}
.gr__track{list-style:none;padding:4px 0 12px;margin:28px 0 0;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.gr__card{flex:0 0 85%;scroll-snap-align:start;background:#fff;color:#333;border-radius:8px;padding:22px;display:flex;flex-direction:column;border-top:4px solid #FFC72C}
@media(min-width:700px){.gr__card{flex-basis:46%}}@media(min-width:1024px){.gr__card{flex-basis:31.5%}}
.gr__cardtop{display:flex;justify-content:space-between;align-items:center}
.gr__card blockquote{margin:14px 0 8px;flex:1}.gr__text{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.gr__more{color:#185E8F;font-weight:600}.gr__who{display:flex;gap:10px;align-items:center;border-top:1px solid #E0E0E0;padding-top:12px;margin:14px 0 0}
.gr__avatar{width:36px;height:36px;border-radius:50%;background:#185E8F;color:#fff;display:grid;place-items:center;font-weight:700}
.gr__when{font-size:13px;color:#2D2D2D}.gr__nav{display:flex;gap:8px;margin-top:8px}
.gr__btn{width:44px;height:44px;border-radius:50%;border:2px solid #FFC72C;background:transparent;color:#fff;font-size:18px;cursor:pointer}
.gr__foot{margin:24px 0 0}.gr .gr__all{background:#fff;color:#001829;border-color:#fff}
.gr__track:focus-visible,.gr__btn:focus-visible{outline:3px solid #FFC72C;outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.gr__text{white-space:pre-line}

.gr__track{scrollbar-width:none;-ms-overflow-style:none}.gr__track::-webkit-scrollbar{display:none;height:0}