/* =========================================================
   Trivita Home Healthcare — Design System
   Signature: the archway / threshold motif — care that
   crosses your doorstep. It appears as a WebGL particle
   field in the hero, a section divider, an icon frame,
   and a mask for artwork throughout the site.
   Fonts are loaded via <link> in partials/header.php so
   they are discovered by the preload scanner, not chained
   behind this stylesheet.
   ========================================================= */

:root{
  /* Color tokens */
  --ink:        #12332D;   /* deep teal-ink — primary text, nav, dark sections */
  --ink-soft:   #1E4C44;   /* lighter ink for hovers/gradients */
  --ink-deep:   #0A211D;   /* near-black teal — hero bed, footer */
  --paper:      #F4F6F1;   /* pale sage-white — main background */
  --paper-warm: #ECE6D8;   /* warm stone — alternating sections */
  --card:       #FFFFFF;
  --gold:       #C2893F;   /* amber accent — CTAs, highlights */
  --gold-dark:  #A8722F;
  --gold-lite:  #E9BE7C;   /* glow on dark backgrounds */
  --clay:       #B97463;   /* muted clay-rose — sparing accent */
  --sage:       #7C9A8C;   /* secondary green — icon strokes, borders */
  --sage-lite:  #A8C4B6;
  --line:       rgba(18,51,45,0.14);
  --line-soft:  rgba(18,51,45,0.08);
  --ink-70:     rgba(18,51,45,0.72);
  --ink-50:     rgba(18,51,45,0.52);
  --on-dark-70: rgba(244,246,241,0.72);
  --on-dark-50: rgba(244,246,241,0.5);

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1180px;
  --container-wide: 1400px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(18,51,45,0.06);
  --shadow-md: 0 12px 32px rgba(18,51,45,0.10);
  --shadow-lg: 0 30px 70px rgba(18,51,45,0.16);

  /* Chrome */
  --header-h: 68px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header when deep-linked. */
  scroll-padding-top: calc(var(--header-h) + 24px);
}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }

/* Every anchor target clears the sticky header. */
[id]{ scroll-margin-top: calc(var(--header-h) + 24px); }

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

/* Skip link — offscreen until focused, then pinned to the top-left. */
.skip-link{
  position: fixed; top: 10px; left: 10px; z-index: 1200;
  transform: translateY(-160%);
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: .9rem;
  transition: transform .2s var(--ease);
}
.skip-link:focus{ transform: translateY(0); }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-wide{ max-width: var(--container-wide); margin:0 auto; padding: 0 24px; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
}
h1{ font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3{ font-size: 1.24rem; }
p{ margin: 0 0 1.1em; color: var(--ink-70); }
p:last-child{ margin-bottom: 0; }

.eyebrow{
  font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dark); margin-bottom: 12px;
}
.lede{ font-size: 1.08rem; color: var(--ink-70); max-width: 62ch; }
section{ padding: 92px 0; }
.section-warm{ background: var(--paper-warm); }
.section-ink{ background: var(--ink); color: var(--paper); }
.section-ink h1,.section-ink h2,.section-ink h3{ color: var(--paper); }
.section-ink p{ color: var(--on-dark-70); }
.section-ink .eyebrow{ color: var(--gold-lite); }
.section-tight{ padding: 60px 0; }
.section-head{ max-width: 760px; margin-bottom: 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .lede{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding: 14px 26px; border-radius: 999px; font-weight: 650; font-size: .95rem;
  border: 1.5px solid transparent; transition: transform .2s var(--ease), background .2s, box-shadow .25s, border-color .2s;
  position: relative; overflow: hidden;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--gold); color:#fff; box-shadow: 0 6px 18px rgba(194,137,63,.32); }
.btn-primary:hover{ background: var(--gold-dark); box-shadow: 0 12px 30px rgba(194,137,63,.42); }
.btn-outline{ border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover{ border-color: var(--ink); background: rgba(18,51,45,0.04); }
.btn-ghost-light{ border-color: rgba(255,255,255,0.34); color:#fff; background: transparent; }
.btn-ghost-light:hover{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,.6); }
.btn-block{ width:100%; }
.btn-sm{ padding: 10px 18px; font-size: .88rem; }

/* ---------- Header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  background: rgba(244,246,241,0.86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transform: translateY(-100%);
  transition: transform .45s var(--ease), background .3s, border-color .3s;
}
/* Revealed by JS on scroll-up, past the hero, or pointer near the top edge. */
.site-header.is-visible{ transform: translateY(0); }
/* Over the dark hero the bar goes transparent-dark instead of paper. */
.site-header.on-dark{
  background: rgba(10,33,29,0.72);
  border-bottom-color: rgba(255,255,255,0.10);
}
.site-header.on-dark .brand,
.site-header.on-dark .nav-phone,
.site-header.on-dark .nav-links > li > a{ color: var(--paper); }
.site-header.on-dark .brand-tag{ color: var(--on-dark-50); }
.site-header.on-dark .brand svg path:first-child{ stroke: var(--paper); }
.site-header.on-dark .nav-toggle span,
.site-header.on-dark .nav-toggle::before,
.site-header.on-dark .nav-toggle::after{ background: var(--paper); }

.nav-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px; height: var(--header-h);
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-size:1.32rem; color: var(--ink); flex-shrink:0; }
.brand svg{ width:34px; height:34px; flex-shrink:0; }
/* Supplied logo. The flower carries its own colour and needs no recolouring;
   the wordmark ships in two variants because the supplied dark green is
   unreadable on the ink background. */
.brand-mark{ width:38px; height:auto; flex-shrink:0; }
.footer-brand .brand-mark{ width:44px; }
.brand-lockup{ display:block; }
.brand-wordmark{ display:block; height:24px; width:auto; }
.brand-wordmark--paper{ display:none; }          /* light variant, dark bar only */
.site-header.on-dark .brand-wordmark--ink{ display:none; }
.site-header.on-dark .brand-wordmark--paper{ display:block; }
.footer-brand .brand-wordmark{ height:30px; margin-bottom:2px; }
.footer-brand .brand-tag{ color: var(--on-dark-50); }
@media (max-width: 420px){ .brand-wordmark{ height:21px; } }
.brand-name{ font-weight:560; }
.brand-tag{ display:block; font-family: var(--font-body); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-50); font-weight:600; }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links > li{ position:relative; }
.nav-links > li > a{
  display:flex; align-items:center; gap:6px; padding: 9px 13px; border-radius: 999px;
  font-weight:600; font-size:.92rem; color: var(--ink-70); transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-links > li > a:hover, .nav-links > li.open > a{ background: rgba(18,51,45,0.06); color: var(--ink); }
.nav-links > li > a.active{ color: var(--ink); background: rgba(18,51,45,0.08); }
.site-header.on-dark .nav-links > li > a:hover,
.site-header.on-dark .nav-links > li > a.active{ background: rgba(255,255,255,0.12); }
.caret{ width:8px; height:8px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform: rotate(45deg); margin-top:-3px; opacity:.7; transition: transform .2s var(--ease); }
.has-dropdown:hover .caret, .has-dropdown.open .caret{ transform: rotate(225deg); margin-top:2px; }

.dropdown{
  position:absolute; top: calc(100% + 8px); left:0; min-width: 262px;
  background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-soft); padding: 10px; opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* :focus-within keeps dropdown items reachable by keyboard, not hover only. */
.nav-links > li:hover .dropdown,
.nav-links > li.open .dropdown,
.nav-links > li:focus-within .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  font-size:.9rem; font-weight:500; color: var(--ink-70); transition: background .15s, color .15s, padding-left .18s var(--ease);
}
.dropdown a:hover{ background: var(--paper-warm); color: var(--ink); padding-left: 16px; }
.dropdown .view-all{ margin-top:4px; border-top:1px solid var(--line-soft); padding-top:12px; color: var(--gold-dark); font-weight:650; }
.dropdown-head{ padding: 6px 12px 8px; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color: var(--ink-50); font-weight:700; }
.dropdown-wide{ min-width: 520px; display:grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.dropdown-wide .dropdown-head, .dropdown-wide .view-all{ grid-column: 1 / -1; }

.nav-cta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-phone{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem; color: var(--ink); }
.nav-phone svg{ width:17px; height:17px; color: var(--gold-dark); }

.nav-toggle{
  display:none; background:none; border:none; width:40px; height:40px; border-radius:10px;
  align-items:center; justify-content:center; flex-direction: column;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:""; display:block; width:20px; height:2px; background: var(--ink); border-radius:2px;
  transition: transform .25s var(--ease), opacity .2s ease;
}
.nav-toggle span{ margin: 5px 0; }
.nav-toggle[aria-expanded="true"]::before{ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span{ opacity: 0; }
.nav-toggle[aria-expanded="true"]::after{ transform: translateY(-7px) rotate(-45deg); }

/* A small persistent handle so the hidden menu is discoverable and keyboard-reachable. */
.nav-hint{
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 499; background: rgba(10,33,29,.55); backdrop-filter: blur(8px);
  color: var(--paper); border: none; border-top: none;
  border-radius: 0 0 12px 12px; padding: 5px 16px 7px;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  opacity: 1; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.nav-hint::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); }
.nav-hint.is-hidden{ opacity:0; transform: translateX(-50%) translateY(-100%); pointer-events:none; }

/* ---------- Mobile nav ---------- */
@media (max-width: 1040px){
  /* The header carries a transform, which makes it the containing block for
     positioned descendants — so this panel is absolute against the header
     rather than fixed to the viewport, which would collapse to header height. */
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    height: calc(100svh - var(--header-h));
    background: var(--paper); flex-direction:column; align-items:stretch;
    padding: 16px 20px 40px; gap:2px; overflow-y:auto; transform: translateX(100%);
    transition: transform .3s var(--ease); border-top: 1px solid var(--line-soft);
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links > li{ width:100%; }
  .nav-links > li > a{ width:100%; padding:14px 10px; border-radius:10px; justify-content:space-between; font-size:1rem; }
  .dropdown{ position:static; box-shadow:none; border:none; opacity:1; visibility:visible; transform:none; display:none; width:100%; margin: 2px 0 6px; background: var(--paper-warm); min-width:0; }
  .dropdown-wide{ grid-template-columns: 1fr; }
  .nav-links > li.open .dropdown{ display:block; }
  .nav-links > li:focus-within .dropdown{ display:block; }
  .nav-toggle{ display:flex; }
  .nav-phone{ display:none; }
  /* The Book button stays in the bar at every width — no tablet dead zone. */
  .nav-cta .btn{ padding: 11px 18px; font-size: .88rem; }
  .site-header.on-dark .nav-links{ background: var(--ink-deep); }
  .site-header.on-dark .dropdown{ background: rgba(255,255,255,.06); }
  .site-header.on-dark .dropdown a{ color: var(--on-dark-70); }
}
@media (max-width: 420px){
  .nav-cta .btn{ padding: 10px 14px; font-size: .82rem; }
  .brand-tag{ display:none; }
}

/* ---------- HERO (WebGL archway) ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  /* Content sits at the bottom of the hero, clear of the arch and the mark
     the WebGL scene draws in the upper half. */
  justify-items: center;
  align-items: end;
  background: var(--ink-deep);
  color: var(--paper);
  overflow: hidden;
  padding: 0;
  isolation: isolate;
}
#heroCanvas{
  position: absolute; inset: 0; width:100%; height:100%;
  display:block; z-index: 0;
}
/* Static hero for devices without WebGL2 — a drawn arch and the logo mark, so
   the section still reads as designed rather than as an empty black band. */
.hero-fallback{
  position:absolute; inset:0; z-index:1; display:none;
  align-items:center; justify-content:center;
}
/* Only ever visible when the script has both flagged no-webgl AND cleared the
   `hidden` attribute — belt and braces, so it cannot appear over a working canvas. */
.hero.no-webgl .hero-fallback:not([hidden]){ display:flex; }
.hero-fallback-arch{
  position:absolute; top:8%; left:50%; transform:translateX(-50%);
  width:min(560px, 78vw); aspect-ratio: 1 / 1.05;
  border: 2px solid transparent;
  border-radius: 999px 999px 0 0;
  background:
    linear-gradient(var(--ink-deep), var(--ink-deep)) padding-box,
    linear-gradient(180deg, rgba(233,190,124,.75), rgba(124,154,140,.10)) border-box;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
}
.hero-fallback img{
  position:relative; z-index:2; width:min(190px, 34vw); height:auto;
  margin-top:-6%;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.5));
}
@media (max-width: 760px){ .hero-fallback img{ margin-top:-22%; } }

/* Vignette + floor gradient so type always has contrast over the particle field. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 42%, transparent 30%, rgba(10,33,29,.55) 78%, rgba(10,33,29,.92) 100%),
    linear-gradient(to top, var(--ink-deep) 0%, transparent 34%);
}
/* Bottom padding clears the stat strip that is pinned to the hero floor. */
.hero-inner{
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 24px 168px;
  max-width: 940px;
}
@media (max-width: 760px){ .hero-inner{ padding: 0 20px 210px; } }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold-lite);
  border: 1px solid rgba(233,190,124,.34); border-radius:999px; padding: 8px 18px;
  margin-bottom: 34px; background: rgba(233,190,124,.06);
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold-lite); box-shadow:0 0 10px var(--gold-lite); animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} }

/* Small by design: the logo mark inside the arch is the hero, and the
   headline is the caption under it. */
.hero h1.hero-tagline{
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 450;
  margin: 0 0 30px;
  color: var(--paper);
}
/* Word-by-word rise on load. */
.hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.hero h1 .word > span{
  display:inline-block;
  transform: translateY(105%);
  animation: word-rise .95s var(--ease) forwards;
}
.hero h1 .word:nth-child(1) > span{ animation-delay: .12s; }
.hero h1 .word:nth-child(2) > span{ animation-delay: .22s; }
.hero h1 .word:nth-child(3) > span{ animation-delay: .32s; }
.hero h1 .word:nth-child(4) > span{ animation-delay: .42s; }
.hero h1 em{ font-style: normal; color: var(--gold-lite); }
@keyframes word-rise{ to{ transform: translateY(0); } }

.hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: var(--on-dark-70); max-width: 56ch; margin: 0 auto 40px;
  opacity: 0; animation: fade-up .8s var(--ease) .62s forwards;
}
.hero-actions{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  opacity: 0; animation: fade-up .8s var(--ease) .76s forwards;
}
@keyframes fade-up{ from{ opacity:0; transform: translateY(16px);} to{ opacity:1; transform:none; } }

.hero-scroll{
  position:absolute; bottom: 108px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color: var(--on-dark-50);
  opacity:0; animation: fade-up .8s var(--ease) 1.1s forwards;
}
.hero-scroll .rail{ width:1px; height:44px; background: linear-gradient(to bottom, transparent, var(--gold-lite)); position:relative; overflow:hidden; }
.hero-scroll .rail::after{ content:""; position:absolute; top:-50%; left:0; width:1px; height:50%; background: var(--paper); animation: rail-run 2.2s ease-in-out infinite; }
@keyframes rail-run{ 0%{ top:-50%; } 100%{ top:100%; } }

/* Stat strip sitting on the hero floor. */
.hero-stats{
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(to top, rgba(10,33,29,.9), transparent);
  opacity:0; animation: fade-up .9s var(--ease) .95s forwards;
}
.hero-stats .container{ display:flex; justify-content:space-between; gap:20px; padding-top:22px; padding-bottom:22px; }
.hero-stats .stat{ display:flex; flex-direction:column; gap:2px; }
.hero-stats .stat b{ font-family: var(--font-display); font-size: clamp(1.3rem,2.6vw,2rem); font-weight:560; color: var(--paper); line-height:1; }
.hero-stats .stat span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--on-dark-50); font-weight:600; }
/* The sticky call bar is fixed over the bottom of the viewport, so the stat
   strip needs to end above it rather than behind it. */
@media (max-width: 1040px){
  .hero-stats .container{ padding-bottom: 82px; }
}
@media (max-width: 760px){
  .hero-scroll{ display:none; }
  /* Two rows of two, so the fourth stat cannot wrap under the call bar. */
  .hero-stats .container{ display:grid; grid-template-columns: 1fr 1fr; gap:14px 20px; }
  /* Clears both rows of stats plus the call bar. */
  .hero-inner{ padding: 0 20px 280px; }
}

/* ---------- Laser cursor ---------- */
#laserCursor{
  position: fixed; inset: 0; width:100%; height:100%;
  pointer-events: none; z-index: 9999; mix-blend-mode: screen;
  display: none;
}
body.laser-on #laserCursor{ display:block; }
body.laser-on{ cursor: none; }
body.laser-on a, body.laser-on button, body.laser-on input,
body.laser-on select, body.laser-on textarea, body.laser-on label{ cursor: none; }
.laser-dot{
  position: fixed; top:0; left:0; z-index: 10000; pointer-events:none;
  width: 34px; height: 34px; margin:-17px 0 0 -17px; border-radius:50%;
  border: 1px solid rgba(194,137,63,.55);
  display:none; transition: width .2s var(--ease), height .2s var(--ease), margin .2s var(--ease), background .2s, border-color .2s;
}
body.laser-on .laser-dot{ display:block; }
.laser-dot.is-hot{
  width: 56px; height:56px; margin:-28px 0 0 -28px;
  background: rgba(194,137,63,.14); border-color: rgba(194,137,63,.9);
}

/* ---------- Arch motif ---------- */
.arch-divider{ width:100%; height: 46px; display:block; }
.arch-divider path{ fill: var(--paper); }
.arch-divider.to-warm path{ fill: var(--paper-warm); }
.arch-divider.to-ink path{ fill: var(--ink); }
.arch-divider.flip{ transform: rotate(180deg); }

.icon-arch{
  width: 58px; height: 58px; flex-shrink:0;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(160deg, var(--paper-warm), #fff);
  border: 1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
  color: var(--sage);
  transition: transform .3s var(--ease), color .3s, border-color .3s, background .3s;
}
.icon-arch svg{ width:26px; height:26px; }
.section-ink .icon-arch{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: var(--sage-lite); }

/* Arch-masked artwork frame */
.arch-art{
  position: relative; border-radius: 999px 999px 20px 20px; overflow: hidden;
  background: var(--ink); aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
}
.arch-art svg{ width:100%; height:100%; display:block; }
.arch-art.wide{ aspect-ratio: 1 / 1; }

/* ---------- Grids & cards ---------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 1000px){ .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px){ .grid-3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  position: relative; overflow: hidden;
}
.card h3{ margin-bottom: 8px; }
.card p{ font-size:.94rem; }
.section-ink .card{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow:none; }

.service-card{ display:flex; flex-direction:column; align-items:flex-start; }
.service-card::before{
  content:""; position:absolute; inset:auto -40% -60% -40%; height: 60%;
  background: radial-gradient(closest-side, rgba(194,137,63,.16), transparent);
  opacity:0; transition: opacity .4s var(--ease), transform .5s var(--ease);
  transform: translateY(20px);
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(194,137,63,.4); }
.service-card:hover::before{ opacity:1; transform: translateY(0); }
.service-card:hover .icon-arch{ transform: translateY(-3px); color: var(--gold-dark); border-color: rgba(194,137,63,.35); }
.service-card .icon-arch{ margin-bottom: 18px; }
.card-tag{
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color: var(--sage); border:1px solid var(--line); border-radius:999px; padding:4px 10px;
  position:absolute; top:24px; right:24px;
}
.card-link{
  margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:7px;
  font-size:.85rem; font-weight:700; color: var(--gold-dark); position:relative; z-index:1;
}
.card-link svg{ width:15px; height:15px; transition: transform .3s var(--ease); }
.service-card:hover .card-link svg{ transform: translateX(5px); }

.feature{ display:flex; gap:18px; align-items:flex-start; }
.feature h3{ font-size:1.06rem; margin-bottom:5px; }
.feature p{ font-size:.92rem; margin:0; }

/* ---------- Numbered process (order genuinely matters here) ---------- */
.process{ display:grid; gap:0; counter-reset: step; }
.process-step{
  display:grid; grid-template-columns: 92px 1fr; gap: 26px; align-items:start;
  padding: 30px 0; border-top: 1px solid var(--line);
  transition: background .3s;
}
.process-step:last-child{ border-bottom: 1px solid var(--line); }
.process-step .step-n{
  font-family: var(--font-display); font-size: 2.2rem; font-weight:300; color: var(--gold);
  line-height:1; letter-spacing:-.02em;
}
.process-step h3{ font-size:1.15rem; margin-bottom:6px; }
.process-step p{ font-size:.94rem; margin:0; }
@media (max-width:640px){ .process-step{ grid-template-columns: 56px 1fr; gap:16px; } .process-step .step-n{ font-size:1.6rem; } }

/* ---------- Checklists ---------- */
.check-list{ display:flex; flex-direction:column; gap:13px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color: var(--ink-70); }
.check-list svg{ width:18px; height:18px; flex-shrink:0; margin-top:3px; color: var(--sage); }
.section-ink .check-list li{ color: var(--on-dark-70); }
.section-ink .check-list svg{ color: var(--gold-lite); }

/* ---------- Stat band ---------- */
.stat-band{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
.stat-band .cell{ background: var(--paper); padding: 34px 26px; }
.stat-band b{ display:block; font-family: var(--font-display); font-size: clamp(2rem,4vw,2.9rem); font-weight:560; line-height:1; margin-bottom:8px; letter-spacing:-.02em; }
.stat-band span{ font-size:.8rem; color: var(--ink-50); font-weight:600; letter-spacing:.06em; }
@media (max-width:860px){ .stat-band{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Marquee (partner logos / coverage) ---------- */
.marquee{ overflow:hidden; position:relative; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* Duration is tuned to the track's width — the logo wall is far wider than the
   text chips it replaced, so the old 42s read as almost stationary. */
.marquee-track{ display:flex; gap:14px; width:max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.partner-chip{
  border:1px solid var(--line); border-radius:999px; padding:11px 22px; font-size:.88rem; font-weight:600;
  color: var(--ink-70); background: var(--card); white-space:nowrap;
}
.section-ink .partner-chip{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--on-dark-70); }

/* ---------- Event photography (careers) ---------- */
.event-gallery{ display:flex; flex-direction:column; gap:18px; }
.event-gallery figure{ margin:0; }
/* The frame clips; the figure holds the caption, so captions are not cut off. */
.eg-frame{
  display:block; border-radius: var(--radius-lg); overflow:hidden;
  background: var(--paper-warm); border:1px solid var(--line-soft);
}
.event-gallery img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .6s var(--ease);
}
.event-gallery figure:hover img{ transform: scale(1.03); }

.event-pair{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.event-pair .eg-frame{ aspect-ratio: 16 / 9; }
.event-pair figcaption{
  margin-top:10px; font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color: var(--ink-50);
}

.event-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.event-row .eg-frame{ aspect-ratio: 3 / 2; }

@media (max-width: 720px){
  .event-pair{ grid-template-columns: 1fr; }
  .event-row{ grid-template-columns: 1fr 1fr; }
  .event-row figure:last-child{ grid-column: 1 / -1; }
  .event-row figure:last-child .eg-frame{ aspect-ratio: 16 / 9; }
}

/* ---------- People (leadership, clinicians) ---------- */
.person-card{ display:grid; grid-template-columns: 132px 1fr; gap:26px; align-items:start; }
.person-photo{
  /* The arch motif again, so portraits belong to the same system as the
     icon frames and the hero. */
  border-radius: 999px 999px 16px 16px;
  overflow:hidden; background: var(--paper-warm);
  border:1px solid var(--line-soft);
  aspect-ratio: 1 / 1.12;
}
.person-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.person-card h3{ margin-bottom:4px; }
.person-role{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color: var(--gold-dark); margin-bottom:6px;
}
.person-creds{ font-size:.86rem; font-weight:600; color: var(--ink); margin-bottom:12px; }
.person-card p{ font-size:.93rem; }
@media (max-width: 520px){
  .person-card{ grid-template-columns: 1fr; gap:18px; }
  .person-photo{ width:132px; }
}

/* ---------- Partner logo wall ---------- */
.partner-band{
  background: var(--ink); border-radius: var(--radius-lg);
  margin-top: 52px; padding: 16px 0; overflow: hidden;
}
.partner-logo{
  position: relative; flex-shrink: 0;
  display: grid; place-items: center;
  width: 186px; height: 68px; padding: 0 16px;
  border-radius: var(--radius-md);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.partner-logo img{
  grid-area: 1 / 1;
  max-height: 44px; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
  transition: opacity .35s var(--ease);
}
.pl-full{ opacity: 0; }
/* A light plate behind the full-colour logo: several of these marks contain
   near-black elements that would vanish against the ink band. */
.partner-logo:hover,
.partner-logo:focus-visible{ background: var(--paper); transform: translateY(-2px); }
.partner-logo:hover .pl-tint,
.partner-logo:focus-visible .pl-tint{ opacity: 0; }
.partner-logo:hover .pl-full,
.partner-logo:focus-visible .pl-full{ opacity: 1; }

@media (max-width: 640px){
  .partner-band{ margin-top: 40px; }
  .partner-logo{ width: 150px; height: 60px; }
  .partner-logo img{ max-height: 36px; }
}

/* Under reduced motion the global rule below freezes the marquee, which would
   strand the logos scrolled off-screen. Lay them out as a static wrapped grid
   instead and drop the duplicated set used for the seamless loop. */
@media (prefers-reduced-motion: reduce){
  .marquee{ -webkit-mask-image: none; mask-image: none; }
  .marquee-track{ width: auto; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
  .marquee-track .partner-logo[aria-hidden="true"]{ display: none; }
}

/* ---------- Emirates coverage list ---------- */
.emirate-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding: 20px 4px; border-top:1px solid var(--line);
  transition: padding-left .3s var(--ease), color .3s;
}
.emirate-row:last-child{ border-bottom:1px solid var(--line); }
.emirate-row:hover{ padding-left: 14px; }
.emirate-row b{ font-family: var(--font-display); font-size:1.5rem; font-weight:450; }
.emirate-row span{ font-size:.86rem; color: var(--ink-50); text-align:right; }
.section-ink .emirate-row{ border-color: rgba(255,255,255,.12); }
.section-ink .emirate-row span{ color: var(--on-dark-50); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  padding: calc(var(--header-h) + 74px) 0 66px;
  background: linear-gradient(170deg, var(--paper-warm) 0%, var(--paper) 78%);
  border-bottom: 1px solid var(--line-soft);
  position: relative; overflow: hidden;
}
.page-hero::before{
  content:""; position:absolute; top:-30%; right:-8%; width: 460px; height: 560px;
  border-radius: 999px 999px 40px 40px;
  background: radial-gradient(closest-side, rgba(124,154,140,.20), transparent 72%);
  pointer-events:none;
}
.page-hero .container{ position:relative; }
.page-hero h1{ max-width: 20ch; }
.page-hero.ink{ background: linear-gradient(170deg, var(--ink) 0%, var(--ink-deep) 100%); color: var(--paper); border-bottom-color: rgba(255,255,255,.1); }
.page-hero.ink h1{ color: var(--paper); }
.page-hero.ink .lede, .page-hero.ink .breadcrumb{ color: var(--on-dark-70); }
/* Needs to beat `.breadcrumb a`, which sets a dark ink colour. */
.page-hero.ink .breadcrumb a{ color: var(--paper); }
.page-hero.ink .breadcrumb a:hover{ color: var(--gold-lite); }
.page-hero.ink .eyebrow{ color: var(--gold-lite); }
.breadcrumb{ font-size:.82rem; color: var(--ink-50); margin-bottom:18px; }
.breadcrumb a{ color: var(--ink-70); font-weight:600; }
.breadcrumb a:hover{ color: var(--gold-dark); }

/* ---------- Testimonial ---------- */
.testimonial-card{
  background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 40px; box-shadow: var(--shadow-sm);
}
.testimonial-card .quote-mark{ font-family: var(--font-display); font-size: 3.4rem; color: var(--gold); line-height:0; display:block; margin-bottom:22px; }
.testimonial-card > p{ font-family: var(--font-display); font-size:1.24rem; line-height:1.45; color: var(--ink); font-weight:450; }
.testimonial-who{ display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); }
.avatar-mono{
  width:48px; height:48px; border-radius:50%; background: var(--paper-warm); display:flex; align-items:center;
  justify-content:center; font-family: var(--font-display); color: var(--ink); font-weight:600; flex-shrink:0; font-size:.95rem;
}
.testimonial-who b{ display:block; font-size:.9rem; }
.testimonial-who span{ font-size:.82rem; color: var(--ink-50); }

/* ---------- Video testimonials ----------
   The card links out to YouTube rather than embedding an iframe: nothing
   is requested from Google until the visitor decides to watch, and the
   still is served from our own assets so the CSP stays 'self' only. */
.video-card{ display:block; }
.video-frame{
  position:relative; display:block; overflow:hidden;
  aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  background: var(--paper-warm); border:1px solid var(--line-soft);
}
.video-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .6s var(--ease);
}
.video-card:hover .video-frame img{ transform: scale(1.03); }
.video-play{
  position:absolute; inset:0; margin:auto; width:66px; height:66px;
  border-radius:50%; background: rgba(255,255,255,.9);
  display:grid; place-items:center; box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), background .3s;
}
.video-play svg{ width:24px; height:24px; fill: var(--ink); margin-left:3px; }
.video-card:hover .video-play{ transform: scale(1.08); background:#fff; }
.video-meta{ display:block; margin-top:16px; }
.video-meta b{ display:block; font-size:.98rem; color: var(--ink); }
.video-meta > span{ display:block; margin-top:4px; font-size:.82rem; color: var(--ink-50); }
.section-ink .video-meta b{ color:#fff; }
.section-ink .video-meta > span{ color: var(--on-dark-70); }
@media (max-width:720px){ .video-play{ width:54px; height:54px; } }

/* ---------- CTA band ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--ink) 0%, var(--ink-soft) 100%);
  color:#fff; border-radius: var(--radius-lg); padding: 52px 54px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position: relative; overflow: hidden;
}
.cta-band::before{
  content:""; position:absolute; top:-60%; right:-4%; width:360px; height:440px;
  border-radius: 999px 999px 30px 30px; background: rgba(194,137,63,.14); pointer-events:none;
}
.cta-band > *{ position:relative; }
.cta-band h2{ color:#fff; margin-bottom:8px; }
.cta-band p{ color: var(--on-dark-70); margin:0; max-width: 52ch; }
@media (max-width: 760px){ .cta-band{ flex-direction:column; align-items:flex-start; padding: 40px 28px; } }

/* ---------- Forms ---------- */
.form-card{ background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow-md); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-row{ grid-template-columns: 1fr; } }
.field{ margin-bottom:18px; display:flex; flex-direction:column; }
.field label{ font-size:.82rem; font-weight:650; margin-bottom:7px; color: var(--ink); }
.req{ color: var(--clay); }
.field input, .field select, .field textarea{
  font-family: inherit; font-size:.95rem; color: var(--ink); background: var(--paper);
  border:1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--gold); background: var(--card);
  box-shadow: 0 0 0 3px rgba(194,137,63,.16); outline:none;
}
/* File input: the native control cannot be styled directly, so style the
   field around it and restyle only the button portion, which browsers do
   expose. Keeps the CV upload looking like the rest of the form. */
.field input[type="file"]{ padding:10px 12px; cursor:pointer; }
.field input[type="file"]::file-selector-button{
  font-family: inherit; font-size:.85rem; font-weight:650; color: var(--ink);
  background: var(--paper-warm); border:1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 14px; margin-right:14px; cursor:pointer;
  transition: background .2s, border-color .2s;
}
.field input[type="file"]::file-selector-button:hover{
  background: var(--card); border-color: var(--gold);
}
.field-hint{ font-size:.8rem; color: var(--ink-50); margin-top:7px; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-msg{ display:none; padding:14px 18px; border-radius: var(--radius-sm); margin-bottom:20px; font-size:.92rem; font-weight:600; }
.form-msg.show{ display:block; animation: fade-up .35s var(--ease); }
.form-msg.success{ background: rgba(124,154,140,.16); color:#33604F; border:1px solid rgba(124,154,140,.4); }
.form-msg.error{ background: rgba(185,116,99,.14); color:#8A4536; border:1px solid rgba(185,116,99,.36); }

.contact-info-list{ display:flex; flex-direction:column; gap:18px; }
.contact-info-item{ display:flex; gap:15px; align-items:center; }
.contact-info-item b{ display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-50); margin-bottom:2px; }
.contact-info-item a, .contact-info-item span{ font-size:1.02rem; font-weight:650; color: var(--ink); }
.contact-info-item a:hover{ color: var(--gold-dark); }

/* ---------- Learning Hub ---------- */
.module-card{
  display:flex; flex-direction:column; background: var(--card); border:1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  position:relative; overflow:hidden;
}
.module-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(124,154,140,.45); }
.module-card .mod-n{
  font-family: var(--font-display); font-size:.8rem; font-weight:600; color: var(--gold-dark);
  letter-spacing:.1em; margin-bottom:14px; display:block;
}
.module-card h3{ font-size:1.16rem; margin-bottom:8px; }
.module-card p{ font-size:.9rem; }
.module-card .mod-meta{
  margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:space-between;
  font-size:.8rem; color: var(--ink-50); font-weight:600; border-top:1px solid var(--line-soft);
}
.module-card .mod-meta em{ font-style:normal; color: var(--gold-dark); }

.topic-list{ display:grid; gap:0; }
.topic-list a{
  display:grid; grid-template-columns: 46px 1fr auto; gap:16px; align-items:center;
  padding: 18px 10px 18px 4px; border-top:1px solid var(--line);
  transition: background .25s, padding-left .25s var(--ease);
}
.topic-list a:last-child{ border-bottom:1px solid var(--line); }
.topic-list a:hover{ background: rgba(255,255,255,.6); padding-left: 14px; }
.topic-list .t-n{ font-size:.78rem; font-weight:700; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.topic-list .t-title{ font-weight:600; font-size:.98rem; }
.topic-list .t-go{ color: var(--gold-dark); opacity:0; transform: translateX(-6px); transition: opacity .25s, transform .25s var(--ease); }
.topic-list a:hover .t-go{ opacity:1; transform: none; }
.topic-list .t-go svg{ width:16px; height:16px; }

.article{ max-width: 720px; }
.article h2{ font-size:1.5rem; margin-top:2em; }
.article p{ font-size:1.02rem; line-height:1.72; }
.article .key-points{
  background: var(--paper-warm); border-radius: var(--radius-md); padding: 28px 30px; margin: 32px 0;
  border-left: 3px solid var(--gold);
}
.article .key-points h3{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color: var(--gold-dark); margin-bottom:16px; }
.clinical-note{
  border:1px solid var(--line); border-left:3px solid var(--sage); border-radius: var(--radius-md);
  padding: 20px 24px; font-size:.88rem; color: var(--ink-70); background: var(--card); margin-top: 40px;
}
.clinical-note b{ color: var(--ink); }

.prev-next{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top: 52px; }
.prev-next a{
  border:1px solid var(--line); border-radius: var(--radius-md); padding: 20px 22px;
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.prev-next a:hover{ border-color: var(--gold); transform: translateY(-3px); background: var(--card); }
.prev-next span{ display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-50); font-weight:700; margin-bottom:7px; }
.prev-next b{ font-weight:650; font-size:.94rem; line-height:1.35; display:block; }
.prev-next .next{ text-align:right; }
@media (max-width:640px){ .prev-next{ grid-template-columns:1fr; } }

/* Sticky in-page table of contents */
/* Long module lists must stay fully scrollable rather than running off
   the top of the viewport under the header. */
.toc{
  position:sticky; top: calc(var(--header-h) + 28px);
  max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto;
  scrollbar-width: thin;
}
.toc h4{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-50); margin-bottom:14px; }
.toc a{ display:block; padding:7px 0 7px 14px; border-left:2px solid var(--line); font-size:.88rem; color: var(--ink-70); transition: border-color .2s, color .2s, padding-left .2s; }
.toc a:hover{ border-color: var(--gold); color: var(--ink); padding-left:18px; }

/* ---------- Audience split ---------- */
.split-card{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; padding: 46px 40px;
  min-height: 300px; display:flex; flex-direction:column; justify-content:flex-end;
  color: var(--paper); transition: transform .4s var(--ease);
}
.split-card:hover{ transform: translateY(-6px); }
.split-card h3{ color: var(--paper); font-size: 1.7rem; }
.split-card p{ color: var(--on-dark-70); font-size:.96rem; }
.split-card .split-bg{ position:absolute; inset:0; z-index:0; }
.split-card > *{ position:relative; z-index:1; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink-deep); color: var(--paper); padding: 76px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; gap:40px; }
@media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-brand{ max-width: 320px; }
@media (max-width: 1000px){ .footer-brand{ grid-column: 1 / -1; max-width:none; } }
.footer-brand .brand{ color:#fff; margin-bottom:18px; }
.footer-brand p{ color: var(--on-dark-50); font-size:.9rem; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.footer-social a:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.footer-social svg{ width:17px; height:17px; }
.footer-col h4{ color:#fff; font-family: var(--font-body); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:16px; }
.footer-col a, .footer-col span{ display:block; color: var(--on-dark-50); font-size:.89rem; padding:5px 0; transition: color .2s, transform .2s var(--ease); }
.footer-col a:hover{ color: var(--gold-lite); transform: translateX(3px); }
.footer-col span a{ display:inline; padding:0; }
.footer-bottom{
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color: var(--on-dark-50);
}
.footer-bottom a:hover{ color: var(--gold-lite); }
/* Build credit — present but quiet; it should never compete with the
   client's own copyright or the legal links. */
.footer-credit a{ color: var(--on-dark-70); font-weight:600; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:1px; transition: color .2s, border-color .2s; }
.footer-credit a:hover{ color: var(--gold-lite); border-color: var(--gold-lite); }
@media (max-width: 700px){
  .footer-bottom{ flex-direction:column; gap:10px; }
}

/* ---------- Sticky mobile call bar ---------- */
.mobile-call-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:400;
  background: var(--ink-deep); padding: 10px 16px; gap:10px;
  border-top: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 1040px){ .mobile-call-bar{ display:flex; } body{ padding-bottom: 64px; } }
.mobile-call-bar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border-radius:10px;
  font-size:.88rem; font-weight:700; color:#fff;
}
.mobile-call-bar .call{ background: var(--gold); color:#fff; }
.mobile-call-bar .whatsapp{ background: rgba(255,255,255,0.12); color:#fff; }
.mobile-call-bar svg{ width:16px; height:16px; }

/* ---------- Floating WhatsApp button (desktop) ----------
   Deliberately small and quiet: a 52px circle that widens to show its
   label on hover, rather than a permanent badge shouting over the page.
   Desktop only — below 1041px .mobile-call-bar already carries WhatsApp.
   Sits below the cookie banner (z 600) so it can never obscure the
   Reject button. */
.wa-float{
  display:none; position:fixed; right:22px; bottom:22px; z-index:420;
  align-items:center; gap:0; padding:0;
  width:52px; height:52px; border-radius:999px;
  background:#25D366; color:#fff;
  box-shadow: 0 6px 20px rgba(18,51,45,.22), 0 2px 6px rgba(18,51,45,.14);
  overflow:hidden; white-space:nowrap;
  transition: width .28s var(--ease), background .2s, box-shadow .2s, transform .2s;
}
@media (min-width: 1041px){ .wa-float{ display:inline-flex; } }
.wa-float svg{ width:26px; height:26px; flex:0 0 26px; margin:13px; }
.wa-float-label{
  font-size:.9rem; font-weight:650; letter-spacing:.01em;
  opacity:0; padding-right:20px; transition: opacity .2s var(--ease);
}
.wa-float:hover, .wa-float:focus-visible{
  width:178px; background:#1EBE5A; transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(18,51,45,.28), 0 3px 8px rgba(18,51,45,.16);
}
.wa-float:hover .wa-float-label, .wa-float:focus-visible .wa-float-label{ opacity:1; }
.wa-float:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .wa-float, .wa-float-label{ transition:none; }
  .wa-float:hover, .wa-float:focus-visible{ transform:none; }
}

/* ---------- Office cards & click-to-load map ---------- */
.office-card{ display:flex; flex-direction:column; }
.map-embed{
  position:relative; margin-top:20px; border-radius: var(--radius-md); overflow:hidden;
  aspect-ratio: 16 / 10; background: var(--paper-warm);
  border:1px solid var(--line-soft);
}
.map-embed .map-load{
  position:absolute; inset:0; width:100%; height:100%; border:0; background:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:18px; transition: background .25s;
  /* Faint street-grid hint so the placeholder reads as a map, not a broken image. */
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
}
.map-embed .map-load:hover{ background-color: rgba(194,137,63,.08); }
.map-embed .map-pin{ color: var(--gold-dark); display:block; }
.map-embed .map-pin svg{ width:26px; height:26px; }
.map-embed .map-load b{ font-size:.92rem; font-weight:700; color: var(--ink); }
.map-embed .map-note{ font-size:.72rem; color: var(--ink-50); max-width: 26ch; line-height:1.4; }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.office-directions{
  margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:700; color: var(--gold-dark);
}
.office-directions svg{ width:16px; height:16px; }
.office-directions span{ transition: transform .25s var(--ease); display:inline-block; }
.office-directions:hover span{ transform: translateX(4px); }

/* ---------- Cookie consent ----------
   Sits above the mobile call bar (z 400) and the header (z 500), below the
   laser cursor. Non-modal on purpose: it must not trap focus or block the
   page, because declining is a legitimate way to keep browsing. */
.cookie-banner{
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 600;
  background: var(--ink-deep); color: var(--paper);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  max-width: 720px; margin: 0 auto;
  transform: translateY(calc(100% + 40px)); opacity: 0;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
  pointer-events: none;
}
.cookie-banner.is-open{ transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-inner{ display:flex; gap:28px; align-items:center; padding: 24px 28px; }
.cookie-copy h4{
  font-family: var(--font-body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--gold-lite); margin-bottom:8px; font-weight:700;
}
.cookie-copy p{ font-size:.88rem; line-height:1.55; color: var(--on-dark-70); margin:0; }
.cookie-copy a{ color: var(--paper); border-bottom:1px solid rgba(255,255,255,.3); }
.cookie-copy a:hover{ color: var(--gold-lite); border-color: var(--gold-lite); }
/* Equal weight: rejecting must be exactly as easy as accepting. */
.cookie-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-actions .btn{ min-width: 104px; }

@media (max-width: 720px){
  /* Clear the sticky call bar rather than covering it. */
  .cookie-banner{ left:12px; right:12px; bottom: 76px; }
  .cookie-inner{ flex-direction:column; align-items:stretch; gap:18px; padding: 22px; }
  .cookie-actions .btn{ flex:1; }
}
@media (max-width: 1040px) and (min-width: 721px){
  .cookie-banner{ bottom: 78px; }
}

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:none; }
.reveal-stagger.in > *:nth-child(1){ transition-delay: .00s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay: .06s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay: .12s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay: .18s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay: .24s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay: .30s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay: .36s; }
.reveal-stagger.in > *:nth-child(8){ transition-delay: .42s; }

/* Reading progress rail on article pages */
.read-progress{ position:fixed; top:0; left:0; height:2px; background: var(--gold); z-index:600; width:0; transition: width .1s linear; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.stack-lg{ display:flex; flex-direction:column; gap:44px; }
.divider-line{ height:1px; background: var(--line); border:0; margin: 0; }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-size:.74rem; font-weight:650; padding:6px 13px; border-radius:999px; background: var(--paper-warm); color: var(--ink-70); border:1px solid var(--line-soft); }
.section-ink .tag{ background: rgba(255,255,255,.07); color: var(--on-dark-70); border-color: rgba(255,255,255,.12); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html{ scroll-behavior: auto; }
  .reveal, .reveal-stagger > *{ opacity:1; transform:none; }
  .hero h1 .word > span{ transform:none; }
  .hero-sub, .hero-actions, .hero-stats, .hero-scroll{ opacity:1; }
  .site-header{ transform: translateY(0); }
}