/* ============================================================
   SYNERGY HEALTH FOUNDATION — DESIGN SYSTEM
   Apple-inspired minimal. All tokens below map 1:1 to the
   WordPress Global Styles table in the blueprint document.
   ============================================================ */
:root{
  /* Neutrals */
  --white:#FFFFFF;
  --bg-2:#F5F5F7;
  --bg-3:#FAFAFC;
  /* Sampled from the top edge of HERO IMAGE.jpg. The hero section uses this
     instead of --bg-2 so the colour and the photograph are indistinguishable
     and the image reads as running all the way up to the menu bar. */
  --hero-bg:#F1F0EE;
  --ink:#1D1D1F;
  --ink-2:#6B6B70;
  --ink-3:#6D6D72;
  --line:#D2D2D7;
  --line-2:#E8E8ED;

  /* Accent — eco green */
  --accent:#00875A;         /* CTA fill. White text = 4.55:1 AA */
  --accent-hi:#00A06A;      /* hover states and non-text accents ONLY — 3.37:1 on
                               white, so never use it for text of any size */
  --accent-txt:#00764D;     /* small accent TEXT (eyebrows, links, badges).
                               ≥4.99:1 on white, --bg-2, --hero-bg and --accent-soft */
  --accent-dk:#006B47;      /* pressed */
  --accent-soft:#E8F5EF;    /* tints, badge fills */

  /* Brand (from logo, used sparingly) */
  --navy:#004D80;
  --teal:#0EB2A2;
  --cyan:#00D3D4;

  /* Radii */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:980px;

  /* Elevation */
  --sh-1:0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
  --sh-2:0 2px 6px rgba(0,0,0,.05), 0 14px 40px rgba(0,0,0,.08);

  /* Rhythm */
  --sec:clamp(76px,9vw,132px);
  --gut:clamp(20px,4vw,32px);
  --max:1120px;
  --max-wide:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.011em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap-wide{max-width:var(--max-wide);margin:0 auto;padding:0 var(--gut)}
section{padding:var(--sec) 0}
.bg-soft{background:var(--bg-2)}
.bg-ink{background:var(--ink);color:var(--white)}

/* ---------- TYPE SCALE ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.028em;line-height:1.07}
.display{font-size:clamp(2.6rem,6.2vw,4.6rem);font-weight:700;letter-spacing:-.035em;line-height:1.04}
.h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.h2{font-size:clamp(1.95rem,4vw,3.05rem)}
.h3{font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.022em;line-height:1.15}
.h4{font-size:1.1875rem;font-weight:600;letter-spacing:-.014em;line-height:1.3}
.lede{font-size:clamp(1.125rem,1.9vw,1.4rem);line-height:1.5;color:var(--ink-2);font-weight:400;letter-spacing:-.014em}
.body{font-size:1.0625rem;line-height:1.62;color:var(--ink-2);margin:0}
.small{font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.eyebrow{
  font-size:.8125rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-txt);margin:0 0 14px
}
.center{text-align:center}
.measure{max-width:44ch}
.measure-lg{max-width:62ch}
.mx{margin-left:auto;margin-right:auto}
.stack>*+*{margin-top:18px}
.stack-lg>*+*{margin-top:26px}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:var(--r-pill);
  font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;
  transition:background .25s var(--ease),transform .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk)}
.btn-ghost{background:transparent;color:var(--accent-txt);border-color:rgba(0,135,90,.35)}
.btn-ghost:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn-lg{padding:16px 34px;font-size:1.125rem}
.link-arrow{color:var(--accent-txt);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.link-arrow svg{transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- NAV (glassmorphism) ---------- */
.topbar{background:var(--ink);color:#fff;font-size:.8125rem;padding:9px 0}
.topbar .wrap-wide{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar a{color:rgba(255,255,255,.78);transition:color .2s}
.topbar a:hover{color:#fff}
.topbar .soc{display:flex;gap:18px;align-items:center}

.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:58px;gap:20px}
.brand img{height:30px;width:auto}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{
  font-size:.875rem;font-weight:400;color:var(--ink);opacity:.82;
  padding:6px 0;position:relative;transition:opacity .2s;cursor:pointer
}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;font-weight:500}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--accent);border-radius:2px
}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta .btn{padding:8px 18px;font-size:.875rem}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);margin:4px 0;border-radius:2px;transition:.3s}

@media(max-width:900px){
  /* Anchored to the nav itself (top:100%) rather than a magic pixel offset, and
     hidden with visibility rather than a transform — a translate big enough to
     clear the sheet depends on how many links it holds, which is fragile. */
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(255,255,255,.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    padding:8px 24px 26px;border-bottom:1px solid var(--line-2);
    opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .nav-links a{padding:16px 0;border-bottom:1px solid var(--line-2);width:100%;font-size:1.0625rem}
  .burger{display:block}
  .nav-cta .btn-ghost{display:none}
}

/* ---------- HERO ----------
   Text block first, image below it. Nothing overlaps: the headline sits on a
   flat surface, the photograph gets to be a photograph. */
.hero{background:var(--hero-bg);padding:clamp(64px,9vw,116px) 0 0;overflow:hidden}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-tag{
  font-size:.8125rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-txt);margin:0 0 18px
}
.hero-in .display{max-width:15ch}
.hero-in .lede{max-width:52ch;margin-top:20px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
/* Full-bleed: no max-width, no gutter, no radius. The photograph is the widest
   element on the page and runs edge to edge. */
.hero-figure{margin:clamp(44px,6vw,72px) 0 0;width:100%}
.hero-figure img{
  width:100%;aspect-ratio:2.4/1;object-fit:cover;object-position:50% 46%;
  filter:grayscale(1) contrast(1.04);
  /* Top edge dissolves into --hero-bg. With the section colour sampled from the
     photograph, the join is invisible — the image appears to start under the nav. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 clamp(70px,9vw,130px));
  mask-image:linear-gradient(to bottom,transparent 0,#000 clamp(70px,9vw,130px));
}
/* The band below rises over the bottom of the image, so the two overlap
   instead of butting against each other. */
.stats-float{
  position:relative;z-index:2;
  margin:calc(-1 * clamp(40px,5vw,76px)) var(--gut) 0;
  border-radius:var(--r-lg)
}
/* Mobile: tighter type block, taller image — the picture carries the screen.
   Every value here exists to lift the photograph higher up the first viewport. */
@media(max-width:760px){
  /* The utility bar is desktop-only. Its email and social links both live in
     the footer and on the Contact page, and dropping it here reclaims ~9% of
     the first viewport for the photograph — which is the point of this layout. */
  .topbar{display:none}
  .hero{padding:clamp(28px,6vw,44px) 0 clamp(40px,7vw,64px)}
  .hero .display{font-size:clamp(1.95rem,8.2vw,2.6rem);max-width:none}
  .hero-tag{margin-bottom:12px;font-size:.75rem}
  .hero-in .lede{max-width:34ch;font-size:1rem;line-height:1.45;margin-top:14px}
  .hero-cta{margin-top:22px;gap:10px}
  .hero-cta .btn-lg{padding:13px 22px;font-size:1rem}
  .hero-figure{margin-top:24px}
  .hero-figure img{aspect-ratio:5/4}
  .stats-float{margin:-28px 16px 0;border-radius:var(--r-md)}
}

/* page hero (inner pages) */
.phero{padding:clamp(96px,13vw,168px) 0 clamp(56px,7vw,84px);background:var(--bg-2);border-bottom:1px solid var(--line-2)}
.phero .display{max-width:18ch}
.phero .lede{margin-top:22px;max-width:58ch}

/* ---------- STATS ---------- */
.stats{background:var(--ink);color:#fff;padding:clamp(52px,6vw,76px) 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{text-align:center;padding:12px}
.stat .n{
  font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:700;letter-spacing:-.04em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums
}
.stat .n em{font-style:normal;color:var(--accent-hi)}
.stat .l{margin-top:12px;font-size:.9375rem;color:rgba(255,255,255,.62);letter-spacing:.01em}
@media(max-width:720px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:32px 8px}}

/* ---------- CARDS ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:960px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent}
.card-media{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);filter:grayscale(1) contrast(1.04)}
.card:hover .card-media img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
.card-body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-body .h4{margin-bottom:2px}
.card.on-soft{background:var(--white);border-color:transparent;box-shadow:var(--sh-1)}

.icon-chip{
  width:46px;height:46px;border-radius:14px;background:var(--accent-soft);
  display:grid;place-items:center;color:var(--accent-txt);margin-bottom:6px;flex:none
}
.icon-chip svg{width:23px;height:23px}

/* ---------- FEATURE ROWS ---------- */
/* min-width:0 stops grid children from blowing out the row
   (long words, selects and inputs all have an intrinsic min-content width) */
.frow>*,.field-row>*,.grid-3>*,.grid-2>*,.team-grid>*{min-width:0}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.frow+.frow{margin-top:clamp(72px,9vw,128px)}
.frow.rev .frow-txt{order:2}
.frow-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);background:var(--bg-2)}
.frow-media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.frow-txt .h2{margin-bottom:20px}
@media(max-width:860px){
  .frow{grid-template-columns:1fr;gap:32px}
  .frow.rev .frow-txt{order:0}
}

/* ---------- TEAM ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}
/* Name + designation only. Cards are not interactive, so they carry no hover
   lift — a card that moves under the cursor but does nothing is a false promise. */
.tcard{
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:32px 24px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:118px
}
.tcard .nm{font-size:1.0625rem;font-weight:600;letter-spacing:-.015em}
.tcard .rl{font-size:.875rem;color:var(--ink-2)}

/* ---------- TRUST BADGES ---------- */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.badges>*{min-width:0}
/* Three badges + a fixed 46px icon chip need real room; collapse earlier than
   the other grids so a long registration number never blows the row out. */
@media(max-width:900px){.badges{grid-template-columns:1fr}}
.badge{
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:28px;display:flex;gap:18px;align-items:flex-start
}
.badge>div:last-child{min-width:0}
.badge .icon-chip{margin:0}
.badge .k{font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600}
.badge .v{font-size:1.0625rem;font-weight:600;margin-top:6px;letter-spacing:-.015em;overflow-wrap:anywhere}
.badge .d{font-size:.875rem;color:var(--ink-2);margin-top:6px}

/* ---------- GALLERY ---------- */
.masonry{columns:3;column-gap:18px}
@media(max-width:860px){.masonry{columns:2}}
@media(max-width:560px){.masonry{columns:1}}
.masonry figure{
  margin:0 0 18px;break-inside:avoid;border-radius:var(--r-md);overflow:hidden;
  background:var(--bg-2);box-shadow:var(--sh-1)
}
.masonry img{width:100%;transition:transform .6s var(--ease),filter .6s var(--ease);filter:grayscale(.15)}
.masonry figure:hover img{transform:scale(1.04);filter:grayscale(0)}

/* ---------- FORM ---------- */
.form-card{
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,48px);box-shadow:var(--sh-1)
}
.field{margin-bottom:20px}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:9px;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--bg-2);border:1px solid transparent;border-radius:var(--r-sm);
  transition:border-color .22s,background .22s,box-shadow .22s;outline:none
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  background:var(--white);border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,135,90,.12)
}
.field textarea{min-height:132px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:.8125rem;color:var(--ink-3);margin-top:16px}
/* Inline result message for the contact form. Hidden until site.js fills it. */
.form-status{display:none}
.form-status.ok,.form-status.err{
  display:block;margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);
  font-size:.9375rem;line-height:1.5
}
.form-status.ok{background:var(--accent-soft);color:var(--accent-txt)}
.form-status.err{background:#FDECEC;color:#8A1F1F}

/* ---------- CONTACT DETAILS / MAP ---------- */
.map-ph{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
  background:
    linear-gradient(rgba(245,245,247,.5),rgba(245,245,247,.5)),
    repeating-linear-gradient(0deg,#E8E8ED 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,#E8E8ED 0 1px,transparent 1px 46px),
    var(--bg-3);
  aspect-ratio:16/10;display:grid;place-items:center;text-align:center;padding:24px
}
.map-pin{width:44px;height:44px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin:0 auto 14px;box-shadow:0 8px 24px rgba(0,135,90,.35)}
.map-pin svg{width:22px;height:22px;color:#fff}
.dlist{display:flex;flex-direction:column;gap:2px}
.drow{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line-2);align-items:flex-start}
.drow:last-child{border-bottom:0}
.drow .k{font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600;margin-bottom:5px}
/* Long unbreakable strings (email, URL) must wrap on narrow screens.
   `anywhere` in the contact column (tight, 390px); `break-word` in the footer
   so the address prose never breaks mid-word at desktop width. */
.drow .v{overflow-wrap:anywhere}
footer .small{overflow-wrap:break-word}
.drow .v{font-size:1.0625rem;letter-spacing:-.012em;line-height:1.5}
.drow{min-width:0}
.drow>div:last-child{min-width:0;flex:1}

/* ---------- FAQ ACCORDION ----------
   Native <details>/<summary>: keyboard accessible, findable by in-page search,
   and works with JavaScript off. No library, no ARIA plumbing to get wrong. */
.faq{max-width:76ch;margin:0 auto;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:1.0625rem;font-weight:600;letter-spacing:-.014em;line-height:1.4;
  color:var(--ink);transition:color .2s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-txt)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent-txt);border-bottom:2px solid var(--accent-txt);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .ans{padding:0 44px 26px 0}
.faq .ans p{font-size:1.0625rem;line-height:1.65;color:var(--ink-2);margin:0 0 14px}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans a{color:var(--accent-txt)}
.faq .ans a[data-go]{cursor:pointer}

/* ---------- CSR / PARTNER BAND ---------- */
.csr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.csr-grid>*{min-width:0}
@media(max-width:860px){.csr-grid{grid-template-columns:1fr}}
.csr-card{
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column;gap:12px
}
.csr-card .n{
  font-size:2.1rem;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--ink)
}
.csr-card .t{font-size:1.0625rem;font-weight:600;letter-spacing:-.014em}
.csr-card .d{font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.cite{
  font-size:.8125rem;line-height:1.55;color:var(--ink-3);margin-top:14px
}
.cite a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.cite a:hover{color:var(--accent-txt)}

/* ---------- LEGAL PAGES ----------
   Long-form prose. Measure capped at 72ch — legal text is read in full, not
   scanned, and a 1120px line length is unreadable. */
.legal{max-width:76ch;margin:0 auto}
.legal .updated{
  display:inline-block;margin-top:22px;padding:7px 16px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent-txt);font-size:.8125rem;font-weight:600;
  letter-spacing:.01em
}
.legal-note{
  background:var(--bg-2);border-left:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:22px 26px;margin:0 0 44px
}
.legal-note strong{color:var(--ink)}
.legal h2{
  font-size:1.3125rem;font-weight:600;letter-spacing:-.018em;line-height:1.3;
  margin:52px 0 16px;padding-top:24px;border-top:1px solid var(--line-2)
}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:1.0625rem;font-weight:600;margin:32px 0 12px;letter-spacing:-.012em}
.legal p{font-size:1.0625rem;line-height:1.68;color:var(--ink-2);margin:0 0 18px}
.legal ul{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.legal li{
  font-size:1.0625rem;line-height:1.6;color:var(--ink-2);
  padding-left:24px;position:relative
}
.legal li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.55
}
.legal a{color:var(--accent-txt);overflow-wrap:anywhere}
.legal a[data-go]{cursor:pointer}
.legal-contact{
  background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(26px,4vw,38px);margin-top:52px
}
.legal-contact p{margin-bottom:10px}
.legal-sources{margin-top:36px;padding-top:26px;border-top:1px solid var(--line-2)}
.legal-sources p,.legal-sources li{font-size:.9375rem;color:var(--ink-3)}
.legal-nav{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:52px;padding-top:32px;
  border-top:1px solid var(--line-2)
}

/* ---------- SURGICAL SPECIALTIES ----------
   Sits between two photographic sections, so it is deliberately illustrated
   rather than photographic — it gives the page visual variety and keeps the
   site free of stock imagery. To use a real photograph instead, replace the
   <svg> inside .spec-art with <img src="..." alt="..."> and nothing else. */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.spec-grid>*{min-width:0}
@media(max-width:960px){.spec-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.spec-grid{grid-template-columns:1fr}}
.spec-card{
  background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column
}
/* overflow:hidden is load-bearing, not cosmetic. Without it, aspect-ratio is
   only a *preferred* height and the box still grows to fit its content — so an
   SVG whose viewBox is taller than 16/10 (the knee) stretched card 1's picture
   area and pushed its heading out of line with the other two. Clipping the box
   makes the height definite, which also lets the child's height:100% resolve. */
.spec-art{
  aspect-ratio:16/10;display:grid;place-items:center;padding:26px;overflow:hidden;
  background:linear-gradient(150deg,var(--accent-soft) 0%,#E4F0F5 100%);
  color:var(--accent-txt)
}
.spec-art svg{width:100%;height:100%;max-width:190px;display:block}
.spec-art img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.spec-body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:10px;flex:1}
.spec-body .n{
  font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)
}

/* ---------- CTA BANNER ---------- */
.cta-band{background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(40px,6vw,72px);text-align:center}

/* ---------- FOOTER ---------- */
footer{background:var(--bg-2);border-top:1px solid var(--line-2);padding:clamp(56px,7vw,86px) 0 34px}
.f-grid{display:grid;grid-template-columns:1.5fr .8fr .9fr 1.7fr;gap:40px}
.f-grid>*{min-width:0}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
footer .flogo{height:44px;width:auto;margin-bottom:18px}
footer h5{font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600;margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
footer ul a{font-size:.9375rem;color:var(--ink-2);transition:color .2s;cursor:pointer}
footer ul a:hover{color:var(--accent-txt)}
.f-soc{display:flex;gap:14px;margin-top:22px}
.f-soc a{width:36px;height:36px;border-radius:50%;background:var(--white);display:grid;place-items:center;color:var(--ink-2);transition:.25s;border:1px solid var(--line-2)}
.f-soc a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.f-bot{margin-top:46px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8125rem;color:var(--ink-3)}
.f-bot a{cursor:pointer}
.f-bot a:hover{color:var(--accent-txt)}

/* ---------- SCROLL REVEAL ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
/* Graceful degradation: no JS, no IntersectionObserver, or reduced motion
   => content is visible immediately. Never hide content behind an animation. */
.no-anim .rv{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Each page is now its own HTML file. */
.page{display:block;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.spec b{color:var(--accent-hi)}
.spec button{position:absolute;top:6px;right:8px;background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;font-size:.9rem}