/* ============================================================================
   HYDROFORCE  |  UiCore single file build
   ----------------------------------------------------------------------------
   01. ROOT VARIABLES        UiCore colour + font tokens, derived surfaces
   02. GLOBAL RESET          box model, base document, media defaults
   03. TYPOGRAPHY            headings H1 to H3, 2 paragraph sizes only
   04. LAYOUT PRIMITIVES     container, section rhythm, section head, grid
   05. COMPONENTS            buttons, pills, cards, nav, accordion, form
   06. SECTION STYLES        hero, compare, services, features, process, etc
   07. FOOTER
   08. RESPONSIVENESS        tablet (48em) and desktop (64em) breakpoints
   09. ACCESSIBILITY         focus states, reduced motion
   ==========================================================================*/

/* ============================================================================
   01. ROOT VARIABLES
   All colour usage in this file maps to a --uicore-* token. The --hf-surface
   and --hf-line helpers below are derived from those same tokens with
   color-mix(), so no raw custom hex values are introduced anywhere.
   ==========================================================================*/
:root{
  /* Colour tokens (dark theme, blue and black) */
  --uicore-primary-color:#1B6EF3;      /* main brand blue */
  --uicore-secondary-color:#0B4FBF;    /* hover / pressed states */
  --uicore-accent-color:#4FA9FF;       /* CTA glow, icons, highlights */
  --uicore-headline-color:#EEF3FA;     /* all headings */
  --uicore-body-color:#9AA7BC;         /* paragraph and body copy */
  --uicore-dark-color:#05070B;         /* page + dark sections (near black) */
  --uicore-light-color:#0C1421;        /* alternating lighter dark sections */
  --uicore-white-color:#FFFFFF;        /* pure white, button labels, contrast */

  /* Font tokens: only 2 distinct families across the 4 variables */
  --uicore-primary-font-family:'Sora', sans-serif;    /* headings */
  --uicore-secondary-font-family:'Sora', sans-serif;  /* eyebrows, stats, nav */
  --uicore-text-font-family:'Inter', sans-serif;      /* body copy */
  --uicore-accent-font-family:'Inter', sans-serif;    /* buttons, labels */

  /* Font weights: 3 globally, nothing else is used anywhere */
  --fw-regular:400;
  --fw-medium:500;
  --fw-bold:700;

  /* Paragraph sizes: exactly 2 variants site wide */
  --fs-lead:clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-body:1rem;
  --lh-para:1.7;

  /* Heading scale */
  --fs-h1:clamp(2.25rem, 1.45rem + 3.6vw, 4rem);
  --fs-h2:clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --fs-h3:clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);

  /* Derived surfaces, borders and tints (token based, no raw colours) */
  --hf-surface:color-mix(in srgb, var(--uicore-white-color) 4%, var(--uicore-dark-color));
  --hf-surface-raised:color-mix(in srgb, var(--uicore-white-color) 7%, var(--uicore-dark-color));
  --hf-line:color-mix(in srgb, var(--uicore-white-color) 10%, transparent);
  --hf-line-strong:color-mix(in srgb, var(--uicore-primary-color) 45%, transparent);
  --hf-tint:color-mix(in srgb, var(--uicore-primary-color) 14%, transparent);
  --hf-muted:color-mix(in srgb, var(--uicore-body-color) 55%, transparent);

  /* Spacing and radii */
  --space-section:clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius-sm:.625rem;
  --radius-md:1rem;
  --radius-lg:1.5rem;
  --radius-pill:999px;
  --shell:75rem;
  --t-fast:all .2s ease;
}

/* ============================================================================
   02. GLOBAL RESET
   ==========================================================================*/
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--uicore-dark-color);
  color:var(--uicore-body-color);
  font-family:var(--uicore-text-font-family);
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh-para);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
svg{display:block;flex-shrink:0;}
input,textarea,select,button{font:inherit;color:inherit;}

/* ============================================================================
   03. TYPOGRAPHY
   H1 to H3 keep identical weights, line heights and fluid scaling on every
   viewport. Paragraphs may only be .p-lead or .p-body.
   ==========================================================================*/
h1,h2,h3{
  font-family:var(--uicore-primary-font-family);
  color:var(--uicore-headline-color);
  margin:0;
  letter-spacing:-.02em;
}
h1{font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:1.08;}
h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:1.16;}
h3{font-size:var(--fs-h3);font-weight:var(--fw-medium);line-height:1.35;letter-spacing:-.01em;}
p{margin:0;}
.p-lead{font-size:var(--fs-lead);line-height:var(--lh-para);color:var(--uicore-body-color);}
.p-body{font-size:var(--fs-body);line-height:var(--lh-para);color:var(--uicore-body-color);}
.u-accent{color:var(--uicore-accent-color);}

/* Eyebrow label used above every section heading */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--uicore-secondary-font-family);
  font-size:.75rem;font-weight:var(--fw-medium);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--uicore-accent-color);
  padding:.4rem .85rem;
  border:1px solid var(--hf-line);
  border-radius:var(--radius-pill);
  background-color:var(--hf-tint);
}

/* ============================================================================
   04. LAYOUT PRIMITIVES
   ==========================================================================*/
.container{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:1.25rem;}
.section{padding-block:var(--space-section);position:relative;}
.section--dark{background-color:var(--uicore-dark-color);}
.section--light{background-color:var(--uicore-light-color);}
.section__head{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:44rem;margin-bottom:2.5rem;}
.section__head--center{align-items:center;text-align:center;margin-inline:auto;}
.section__head--split > .section__head{margin-bottom:0;max-width:34rem;}
.grid{display:grid;gap:1.25rem;}
.divider{height:1px;background-color:var(--hf-line);border:0;margin:0;}

/* ============================================================================
   05. COMPONENTS
   ==========================================================================*/

/* --- 5.1 Buttons ---------------------------------------------------------*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--uicore-accent-font-family);
  font-size:.9375rem;font-weight:var(--fw-medium);
  padding:.875rem 1.5rem;border-radius:var(--radius-pill);
  border:1px solid transparent;cursor:pointer;
  transition:var(--t-fast);white-space:nowrap;
}
.btn--primary{background-color:var(--uicore-primary-color);color:var(--uicore-white-color);}
.btn--primary:hover{background-color:var(--uicore-secondary-color);transform:translateY(-2px);}
.btn--ghost{background-color:transparent;color:var(--uicore-headline-color);border-color:var(--hf-line);}
.btn--ghost:hover{border-color:var(--uicore-accent-color);color:var(--uicore-accent-color);transform:translateY(-2px);}
.btn--block{width:100%;}

/* --- 5.2 Header and navigation -------------------------------------------*/
.site-header{position:sticky;top:0;z-index:60;background-color:var(--uicore-dark-color);border-bottom:1px solid var(--hf-line);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.5rem;}
.nav__brand{display:inline-flex;align-items:center;}
.nav__toggle{display:none;}
.nav__burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:var(--radius-sm);
  border:1px solid var(--hf-line);background-color:var(--hf-surface);
  cursor:pointer;transition:var(--t-fast);
}
.nav__burger:hover{border-color:var(--uicore-accent-color);}
.nav__panel{
  position:absolute;left:0;right:0;top:100%;
  display:none;flex-direction:column;gap:.25rem;
  padding:1rem 1.25rem 1.5rem;
  background-color:var(--uicore-light-color);
  border-bottom:1px solid var(--hf-line);
}
.nav__toggle:checked ~ .nav__panel{display:flex;}
.nav__link{
  font-family:var(--uicore-secondary-font-family);
  font-size:.9375rem;font-weight:var(--fw-regular);
  color:var(--uicore-body-color);padding:.6rem 0;transition:var(--t-fast);
}
.nav__link:hover{color:var(--uicore-accent-color);}
.nav__cta{display:none;}

/* --- 5.3 Logo ------------------------------------------------------------*/
.logo{display:inline-flex;align-items:center;gap:.6rem;}
.logo__word{
  font-family:var(--uicore-primary-font-family);
  font-size:1.25rem;font-weight:var(--fw-bold);
  letter-spacing:-.02em;color:var(--uicore-headline-color);
}
.logo__word span{color:var(--uicore-accent-color);}

/* --- 5.4 Cards -----------------------------------------------------------*/
.card{
  background-color:var(--hf-surface);
  border:1px solid var(--hf-line);
  border-radius:var(--radius-md);
  padding:1.5rem;
  transition:var(--t-fast);
}
.card:hover{border-color:var(--hf-line-strong);transform:translateY(-4px);}
.card__icon{
  width:2.75rem;height:2.75rem;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  background-color:var(--hf-tint);border:1px solid var(--hf-line);
  margin-bottom:1.125rem;
}
.card__title{margin-bottom:.5rem;}

/* --- 5.5 Media frame -----------------------------------------------------*/
.frame{
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--hf-line);background-color:var(--hf-surface);
}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.frame:hover img{transform:scale(1.03);}

/* --- 5.6 Check list ------------------------------------------------------*/
.checklist{display:flex;flex-direction:column;gap:.75rem;}
.checklist li{display:flex;align-items:flex-start;gap:.7rem;font-size:var(--fs-body);line-height:var(--lh-para);}

/* --- 5.7 Accordion (native details, zero script) -------------------------*/
.faq__item{
  border:1px solid var(--hf-line);border-radius:var(--radius-md);
  background-color:var(--hf-surface);padding:0 1.25rem;transition:var(--t-fast);
}
.faq__item:hover{border-color:var(--hf-line-strong);}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  cursor:pointer;list-style:none;padding:1.125rem 0;
  font-family:var(--uicore-primary-font-family);
  font-size:var(--fs-h3);font-weight:var(--fw-medium);line-height:1.35;
  color:var(--uicore-headline-color);
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary svg{transition:var(--t-fast);}
.faq__item[open] summary svg{transform:rotate(45deg);}
.faq__answer{padding:0 0 1.25rem;max-width:52rem;}

/* --- 5.8 Form (native UiCore fields only) --------------------------------*/
.form{display:flex;flex-direction:column;gap:1rem;}
.form__row{display:grid;gap:1rem;}
.form__field{display:flex;flex-direction:column;gap:.45rem;}
.form__label{
  font-family:var(--uicore-accent-font-family);
  font-size:.8125rem;font-weight:var(--fw-medium);
  letter-spacing:.04em;text-transform:uppercase;color:var(--uicore-headline-color);
}
.form__input,.form__select,.form__textarea{
  width:100%;padding:.85rem 1rem;
  background-color:var(--uicore-dark-color);
  border:1px solid var(--hf-line);border-radius:var(--radius-sm);
  color:var(--uicore-headline-color);font-size:var(--fs-body);
  font-family:var(--uicore-text-font-family);transition:var(--t-fast);
}
.form__textarea{min-height:8rem;resize:vertical;}
.form__input::placeholder,.form__textarea::placeholder{color:var(--hf-muted);}
.form__input:hover,.form__select:hover,.form__textarea:hover{border-color:var(--hf-line-strong);}
.form__input:focus,.form__select:focus,.form__textarea:focus{outline:none;border-color:var(--uicore-accent-color);}
.form__consent{display:flex;align-items:flex-start;gap:.65rem;font-size:var(--fs-body);line-height:var(--lh-para);}
.form__consent input{width:1.1rem;height:1.1rem;margin-top:.35rem;accent-color:var(--uicore-primary-color);}

/* ============================================================================
   06. SECTION STYLES
   ==========================================================================*/

/* --- 6.1 Hero ------------------------------------------------------------*/
.hero{padding-top:clamp(3rem,2rem + 4vw,5rem);padding-bottom:clamp(3rem,2rem + 3vw,4.5rem);text-align:center;}
.hero__inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem;}
.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.4rem .9rem .4rem .45rem;border-radius:var(--radius-pill);
  border:1px solid var(--hf-line);background-color:var(--hf-surface);
  font-family:var(--uicore-secondary-font-family);font-size:.8125rem;font-weight:var(--fw-medium);
  color:var(--uicore-headline-color);
}
.hero__stars{display:inline-flex;gap:.15rem;}
.hero h1{max-width:20ch;}
.hero__copy{max-width:52ch;}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;}
.hero__media{margin-top:2.5rem;aspect-ratio:4/3;}
.trustbar{margin-top:2.5rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem;}
.trustbar__label{
  font-family:var(--uicore-secondary-font-family);font-size:.75rem;font-weight:var(--fw-medium);
  letter-spacing:.14em;text-transform:uppercase;color:var(--hf-muted);
}
.trustbar__list{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;}
.trustbar__item{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1rem;border-radius:var(--radius-pill);
  border:1px solid var(--hf-line);background-color:var(--hf-surface);
  font-family:var(--uicore-secondary-font-family);font-size:.8125rem;font-weight:var(--fw-medium);
  color:var(--uicore-headline-color);transition:var(--t-fast);
}
.trustbar__item:hover{border-color:var(--hf-line-strong);}

/* --- 6.2 Comparison ------------------------------------------------------*/
.compare{display:grid;gap:1.25rem;}
.compare__col{
  border:1px solid var(--hf-line);border-radius:var(--radius-lg);
  background-color:var(--hf-surface);padding:1.5rem;
}
.compare__col--win{border-color:var(--hf-line-strong);background-color:var(--hf-surface-raised);}
.compare__head{
  display:flex;align-items:center;gap:.65rem;padding-bottom:1.25rem;
  margin-bottom:1.25rem;border-bottom:1px solid var(--hf-line);
  font-family:var(--uicore-secondary-font-family);font-size:.9375rem;font-weight:var(--fw-medium);
  color:var(--uicore-headline-color);
}
.compare__list{display:flex;flex-direction:column;gap:1.25rem;}
.compare__item h3{margin-bottom:.35rem;}

/* --- 6.3 Services --------------------------------------------------------*/
.service{
  border:1px solid var(--hf-line);border-radius:var(--radius-lg);
  background-color:var(--hf-surface);overflow:hidden;transition:var(--t-fast);
  display:flex;flex-direction:column;
}
.service:hover{border-color:var(--hf-line-strong);transform:translateY(-4px);}
.service__media{aspect-ratio:16/10;overflow:hidden;}
.service__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.service:hover .service__media img{transform:scale(1.04);}
.service__body{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1;}
.service__link{
  margin-top:auto;padding-top:.5rem;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--uicore-accent-font-family);font-size:.875rem;font-weight:var(--fw-medium);
  color:var(--uicore-accent-color);transition:var(--t-fast);
}
.service__link:hover{gap:.75rem;}

/* --- 6.4 Standards band --------------------------------------------------*/
.standards{
  border:1px solid var(--hf-line);border-radius:var(--radius-lg);
  background-color:var(--hf-surface);padding:clamp(1.5rem,1rem + 2vw,2.5rem);
  display:grid;gap:2rem;align-items:center;
}
.standards__list{display:grid;gap:1.25rem;}

/* --- 6.5 Process ---------------------------------------------------------*/
.step{display:grid;gap:1.5rem;align-items:center;padding-block:clamp(1.5rem,1rem + 2vw,2.5rem);border-top:1px solid var(--hf-line);}
.step:first-of-type{border-top:0;padding-top:0;}
.step__media{aspect-ratio:4/3;}
.step__num{
  font-family:var(--uicore-secondary-font-family);font-size:.8125rem;font-weight:var(--fw-bold);
  letter-spacing:.14em;color:var(--uicore-accent-color);display:block;margin-bottom:.75rem;
}
.step__body h3{margin-bottom:.6rem;}

/* --- 6.6 Results / stats -------------------------------------------------*/
.stats{display:grid;gap:1rem;}
.stat{
  border:1px solid var(--hf-line);border-radius:var(--radius-md);
  background-color:var(--hf-surface);padding:1.5rem;transition:var(--t-fast);
}
.stat:hover{border-color:var(--hf-line-strong);}
.stat__value{
  font-family:var(--uicore-primary-font-family);font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);
  font-weight:var(--fw-bold);line-height:1.08;color:var(--uicore-headline-color);letter-spacing:-.02em;
  display:block;margin-bottom:.35rem;
}
.stat__label{
  font-family:var(--uicore-secondary-font-family);font-size:.8125rem;font-weight:var(--fw-medium);
  letter-spacing:.1em;text-transform:uppercase;color:var(--uicore-accent-color);
}
.quote{
  grid-column:1 / -1;
  border:1px solid var(--hf-line-strong);border-radius:var(--radius-lg);
  background-color:var(--hf-surface-raised);padding:clamp(1.5rem,1rem + 2vw,2.5rem);
  display:flex;flex-direction:column;gap:1.25rem;
}
.quote__author{display:flex;align-items:center;gap:.75rem;}
.quote__avatar{width:2.75rem;height:2.75rem;border-radius:var(--radius-pill);object-fit:cover;}
.quote__name{font-family:var(--uicore-secondary-font-family);font-size:.9375rem;font-weight:var(--fw-medium);color:var(--uicore-headline-color);}
.quote__meta{font-size:.8125rem;color:var(--uicore-body-color);line-height:1.7;}

/* --- 6.7 Service areas ---------------------------------------------------*/
.areas{display:grid;gap:.75rem;}
.area{
  display:flex;align-items:center;gap:.65rem;
  padding:.9rem 1.1rem;border-radius:var(--radius-sm);
  border:1px solid var(--hf-line);background-color:var(--hf-surface);
  font-family:var(--uicore-secondary-font-family);font-size:.9375rem;font-weight:var(--fw-medium);
  color:var(--uicore-headline-color);transition:var(--t-fast);
}
.area:hover{border-color:var(--hf-line-strong);color:var(--uicore-accent-color);transform:translateY(-2px);}

/* --- 6.8 Contact ---------------------------------------------------------*/
.contact{display:grid;gap:2rem;}
.contact__panel{
  border:1px solid var(--hf-line);border-radius:var(--radius-lg);
  background-color:var(--hf-surface);padding:clamp(1.5rem,1rem + 2vw,2.25rem);
}
.contact__details{display:flex;flex-direction:column;gap:1rem;margin-top:1.75rem;}
.contact__detail{display:flex;align-items:center;gap:.75rem;transition:var(--t-fast);}
.contact__detail:hover{color:var(--uicore-accent-color);}
.contact__media{aspect-ratio:4/3;margin-top:1.75rem;}

/* ============================================================================
   07. FOOTER
   ==========================================================================*/
.site-footer{background-color:var(--uicore-light-color);border-top:1px solid var(--hf-line);padding-top:clamp(3rem,2rem + 3vw,4.5rem);}
.footer__grid{display:grid;gap:2.5rem;padding-bottom:2.5rem;}
.footer__title{
  font-family:var(--uicore-secondary-font-family);font-size:.8125rem;font-weight:var(--fw-medium);
  letter-spacing:.14em;text-transform:uppercase;color:var(--uicore-headline-color);margin-bottom:1rem;
}
.footer__list{display:flex;flex-direction:column;gap:.65rem;}
.footer__link{font-size:var(--fs-body);color:var(--uicore-body-color);transition:var(--t-fast);}
.footer__link:hover{color:var(--uicore-accent-color);}
.footer__bar{
  border-top:1px solid var(--hf-line);padding-block:1.5rem;
  display:flex;flex-direction:column;gap:.75rem;text-align:center;
  font-size:.875rem;line-height:1.7;
}
.footer__social{display:flex;gap:.6rem;justify-content:center;}
.footer__social a{
  width:2.5rem;height:2.5rem;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hf-line);background-color:var(--hf-surface);transition:var(--t-fast);
}
.footer__social a:hover{border-color:var(--uicore-accent-color);transform:translateY(-2px);}

/* ============================================================================
   08. RESPONSIVENESS  (mobile first, tablet 48em, desktop 64em)
   ==========================================================================*/
@media (min-width:48em){
  .container{padding-inline:2rem;}
  .hero__media{aspect-ratio:16/10;}
  .grid--2{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .compare{grid-template-columns:repeat(2,1fr);}
  .form__row--split{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(3,1fr);}
  .areas{grid-template-columns:repeat(2,1fr);}
  .standards{grid-template-columns:1fr 1fr;}
  .standards__list{grid-template-columns:repeat(2,1fr);}
  .step{grid-template-columns:repeat(2,1fr);gap:2.5rem;}
  .step--flip .step__media{order:2;}
  .footer__grid{grid-template-columns:repeat(2,1fr);}
  .footer__bar{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;}
}
@media (min-width:64em){
  .nav__burger{display:none;}
  .nav__panel{
    position:static;display:flex;flex-direction:row;align-items:center;gap:2rem;
    padding:0;background-color:transparent;border:0;
  }
  .nav__link{padding:0;}
  .nav__panel-cta{display:none;} /* desktop uses the standalone header CTA */
  .nav__cta{display:inline-flex;}
  .grid--3{grid-template-columns:repeat(3,1fr);}
  .grid--4{grid-template-columns:repeat(4,1fr);}
  .contact{grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start;}
  .areas{grid-template-columns:repeat(4,1fr);}
  .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;}
  .section__head--split{flex-direction:row;align-items:flex-end;justify-content:space-between;max-width:none;gap:2.5rem;}
}

/* ============================================================================
   09. ACCESSIBILITY
   ==========================================================================*/
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--uicore-accent-color);outline-offset:3px;border-radius:var(--radius-sm);
}
.skip-link{
  position:absolute;left:-9999px;top:.5rem;z-index:100;
  background-color:var(--uicore-primary-color);color:var(--uicore-white-color);
  padding:.75rem 1.25rem;border-radius:var(--radius-sm);
}
.skip-link:focus{left:1rem;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important;}
}

/* ============================================================================
   10. INNER PAGE COMPONENTS
   Added for service pages and area landing pages. Same token set, same
   typography scale, no new colours, no new font weights.
   ==========================================================================*/

/* --- 10.1 Breadcrumbs ----------------------------------------------------*/
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1.25rem;font-size:.875rem;line-height:1.7;}
.crumbs a{color:var(--uicore-body-color);transition:var(--t-fast);}
.crumbs a:hover{color:var(--uicore-accent-color);}
.crumbs span[aria-current]{color:var(--uicore-headline-color);}
.crumbs svg{opacity:.6;}

/* --- 10.2 Page hero ------------------------------------------------------*/
.page-hero{padding-top:clamp(2.5rem,2rem + 2vw,3.5rem);padding-bottom:clamp(2.5rem,2rem + 2vw,3.5rem);}
.page-hero__grid{display:grid;gap:2rem;align-items:center;}
.page-hero h1{margin-bottom:1.25rem;}
.page-hero__copy{max-width:56ch;margin-bottom:1.75rem;}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;}
.page-hero__media{aspect-ratio:4/3;}

/* --- 10.3 Prose blocks ---------------------------------------------------*/
.prose{max-width:44rem;display:flex;flex-direction:column;gap:1.125rem;}
.prose h3{margin-top:.75rem;}
.prose ul{display:flex;flex-direction:column;gap:.75rem;}
.prose ul li{display:flex;align-items:flex-start;gap:.7rem;font-size:var(--fs-body);line-height:var(--lh-para);}
.split{display:grid;gap:2rem;align-items:start;}
.split__media{aspect-ratio:4/3;}

/* --- 10.4 Numbered list --------------------------------------------------*/
.numbered{display:grid;gap:1rem;counter-reset:hf;}
.numbered__item{
  border:1px solid var(--hf-line);border-radius:var(--radius-md);
  background-color:var(--hf-surface);padding:1.5rem;transition:var(--t-fast);
}
.numbered__item:hover{border-color:var(--hf-line-strong);transform:translateY(-4px);}
.numbered__item::before{
  counter-increment:hf;content:counter(hf,decimal-leading-zero);
  display:block;margin-bottom:.85rem;
  font-family:var(--uicore-secondary-font-family);
  font-size:.8125rem;font-weight:var(--fw-bold);letter-spacing:.14em;
  color:var(--uicore-accent-color);
}
.numbered__item h3{margin-bottom:.5rem;}

/* --- 10.5 Data table -----------------------------------------------------*/
.table-wrap{overflow-x:auto;border:1px solid var(--hf-line);border-radius:var(--radius-md);background-color:var(--hf-surface);}
table{width:100%;border-collapse:collapse;min-width:34rem;}
th,td{text-align:left;padding:.95rem 1.1rem;border-bottom:1px solid var(--hf-line);font-size:var(--fs-body);line-height:var(--lh-para);}
th{
  font-family:var(--uicore-secondary-font-family);font-weight:var(--fw-medium);
  color:var(--uicore-headline-color);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
}
tbody tr:last-child td{border-bottom:0;}
tbody tr{transition:var(--t-fast);}
tbody tr:hover{background-color:var(--hf-tint);}
td strong{font-weight:var(--fw-medium);color:var(--uicore-headline-color);}

/* --- 10.6 CTA band -------------------------------------------------------*/
.cta-band{
  border:1px solid var(--hf-line-strong);border-radius:var(--radius-lg);
  background-color:var(--hf-surface-raised);
  padding:clamp(1.75rem,1.25rem + 2.5vw,3rem);
  display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;
}
.cta-band__copy{max-width:48ch;}

/* --- 10.7 Link cards -----------------------------------------------------*/
.linkcard{
  display:flex;flex-direction:column;gap:.5rem;
  border:1px solid var(--hf-line);border-radius:var(--radius-md);
  background-color:var(--hf-surface);padding:1.35rem;transition:var(--t-fast);
}
.linkcard:hover{border-color:var(--hf-line-strong);transform:translateY(-4px);}
.linkcard__more{
  margin-top:.35rem;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--uicore-accent-font-family);font-size:.875rem;font-weight:var(--fw-medium);
  color:var(--uicore-accent-color);
}

/* --- 10.8 Navigation dropdown (CSS only, no script) ----------------------*/
.nav__group{position:relative;}
.nav__grouplabel{
  display:flex;align-items:center;gap:.35rem;width:100%;
  font-family:var(--uicore-secondary-font-family);font-size:.9375rem;font-weight:var(--fw-regular);
  color:var(--uicore-body-color);padding:.6rem 0;transition:var(--t-fast);cursor:pointer;
}
.nav__group:hover .nav__grouplabel,.nav__group:focus-within .nav__grouplabel{color:var(--uicore-accent-color);}
.nav__submenu{display:flex;flex-direction:column;gap:0;padding-left:1rem;}
.nav__sublink{
  font-family:var(--uicore-text-font-family);font-size:.875rem;
  color:var(--uicore-body-color);padding:.45rem 0;transition:var(--t-fast);
}
.nav__sublink:hover{color:var(--uicore-accent-color);}

/* ============================================================================
   11. INNER PAGE RESPONSIVENESS
   ==========================================================================*/
@media (min-width:48em){
  .page-hero__grid{grid-template-columns:1.35fr 1fr;gap:2.5rem;}
  .numbered{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1.35fr 1fr;gap:3rem;}
  .cta-band{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem;}
}
@media (min-width:64em){
  .numbered--3{grid-template-columns:repeat(3,1fr);}
  .nav__submenu{
    position:absolute;top:calc(100% + .9rem);left:-1rem;min-width:16rem;
    background-color:var(--uicore-light-color);
    border:1px solid var(--hf-line);border-radius:var(--radius-md);
    padding:.65rem;gap:.1rem;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:var(--t-fast);
  }
  .nav__group:hover .nav__submenu,.nav__group:focus-within .nav__submenu{opacity:1;visibility:visible;transform:translateY(0);}
  .nav__sublink{padding:.55rem .75rem;border-radius:var(--radius-sm);}
  .nav__sublink:hover{background-color:var(--hf-tint);}
  .nav__grouplabel{padding:0;}
}