/* ==========================================================================
   APTI PHYSIOTHERAPY & BEYOND — Design System
   Bolton, Ontario | Sports Physiotherapy, Rehab & Performance
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* --- Darks: Deep Navy (footer / dark sections) + Deep Charcoal (headers / nav) --- */
  --navy:#0D1B2A;          /* Deep Navy   — depth, trust */
  --charcoal:#1D1F24;      /* Deep Charcoal — sophistication, power */
  --graphite:#4A4F57;      /* Rich Graphite — balance, neutrality */
  --ink:#0D1B2A;
  --ink-2:#1D1F24;
  --ink-3:#16273A;         /* raised surface on navy */
  --ink-4:#1E3550;         /* hover surface on navy */

  /* --- Oranges --- */
  --orange:#F56A10;        /* Primary Orange — energy, strength, action */
  --orange-lo:#FFB36A;     /* Soft Orange   — warmth, approachability */
  --orange-hi:#D84A05;     /* Burnt Orange  — passion, CTA hover */
  --orange-grad:#FF9A3E;   /* gradient end */
  --orange-tint:#FFF1E5;   /* soft-orange wash for secondary hover */
  --orange-glow:rgba(245,106,16,.30);

  /* --- Lights --- */
  --paper:#FFFFFF;
  --paper-2:#FAFAF8;       /* Off White   — clean, minimal backgrounds */
  --paper-3:#F3EDE4;       /* Light Sand  — warm neutral */
  --ice:#EAF5FF;           /* Ice Blue    — trust, health */
  --silver:#D8DDE3;        /* Warm Silver — borders, dividers */
  --green:#2E9D66;         /* Success Green — healing, confirmations */

  --line:rgba(255,255,255,.11);
  --line-dark:#D8DDE3;

  /* --- Typography colours --- */
  --txt:#1D1F24;           /* headings */
  --txt-2:#5A5F68;         /* body */
  --txt-3:#8E949C;         /* muted */
  --txt-4:#B2B7BF;         /* disabled */
  --txt-inv:#FFFFFF;
  --txt-inv-2:rgba(255,255,255,.76);
  --txt-inv-3:rgba(255,255,255,.52);

  --display:"Playfair Display","Libre Baskerville",Georgia,"Times New Roman",serif;
  --body:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;

  --shell:1280px;
  --gut:clamp(20px,5vw,64px);
  --r:4px;
  --r-lg:10px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t:.42s var(--ease);

  --nav-h:84px;
  --shadow:0 2px 8px rgba(13,27,42,.05),0 18px 44px -12px rgba(13,27,42,.14);
  --shadow-lg:0 4px 12px rgba(13,27,42,.08),0 40px 90px -20px rgba(13,27,42,.26);
  --grad:linear-gradient(90deg,var(--orange) 0%,var(--orange-grad) 100%);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.72;
  color:var(--txt);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1;
}
body.no-scroll{overflow:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--orange);color:#fff}

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

.skip{
  position:absolute;left:12px;top:-100px;z-index:9999;
  background:var(--orange);color:#fff;padding:14px 22px;
  font-weight:700;border-radius:var(--r);transition:top .2s;
}
.skip:focus{top:12px}

/* ---------- 3. TYPE ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.008em;
  text-transform:none;
  color:inherit;              /* inherit the section colour — never hard-code */
  text-wrap:balance;
}
/* Safety net: anything on a dark ground stays legible */
.sec.dark,.sec.ink2,.sec.forest,.hero,.phero,.foot,.drawer{color:var(--txt-inv)}
.sec.dark h1,.sec.dark h2,.sec.dark h3,.sec.dark h4,
.sec.ink2 h1,.sec.ink2 h2,.sec.ink2 h3,.sec.ink2 h4,
.sec.forest h1,.sec.forest h2,.sec.forest h3,.sec.forest h4,
.hero h1,.hero h2,.phero h1,.phero h2,.foot h2,.foot h3{color:#fff}
.h-xxl{font-size:clamp(2.3rem,4.4vw,4rem);   line-height:1.14;letter-spacing:-.016em;max-width:17ch}
.h-xl {font-size:clamp(2rem,3.6vw,3.25rem);  line-height:1.16;letter-spacing:-.014em;max-width:19ch}
.h-lg {font-size:clamp(1.72rem,2.7vw,2.5rem);line-height:1.2; letter-spacing:-.012em;max-width:22ch}
.h-md {font-size:clamp(1.45rem,2vw,1.9rem);  line-height:1.26;letter-spacing:-.008em}
.h-sm {font-size:clamp(1.16rem,1.5vw,1.35rem);line-height:1.32}
.h-lg.wide,.h-xl.wide,.h-xxl.wide{max-width:none}

/* Single-line statement headings */
.h-line{
  font-family:var(--display);font-weight:500;max-width:none;
  font-size:clamp(1.5rem,3vw,3rem);line-height:1.16;letter-spacing:-.018em;
}
@media (min-width:1100px){.h-line{white-space:nowrap}}
.center .h-xxl,.center .h-xl,.center .h-lg,
.sec-head.center h2{margin-inline:auto}

/* Emphasis inside headings: italic serif, not colour */
.hl{font-style:italic;color:inherit}
.hl-o{color:var(--orange-hi);font-style:normal}

/* Card / component headings sit in the sans for legibility */
.card h3,.member h3,.price h3,.post h3,.res h3,.partner h3,.ccard h2,.foot h2{
  font-family:var(--body);font-weight:600;letter-spacing:-.01em;line-height:1.28;
}

.lede{
  font-family:var(--body);font-weight:300;
  font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.78;
  color:var(--txt-2);text-wrap:pretty;max-width:64ch;
}
.dim{color:var(--txt-2);font-weight:300;line-height:1.8;max-width:66ch}
.on-dark .lede,.on-dark .dim{color:var(--txt-inv-2)}

/* Eyebrow — quiet, letterspaced, graphite with a hairline rule */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--body);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--graphite);margin-bottom:22px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--orange);flex:none}
.eyebrow.center::after{content:"";width:28px;height:1px;background:var(--orange);flex:none}
.on-dark .eyebrow,.dark .eyebrow,.ink2 .eyebrow,.forest .eyebrow,.phero .eyebrow,.hero .eyebrow{color:var(--txt-inv-3)}

.outline{color:transparent;-webkit-text-stroke:1px currentColor;-webkit-text-fill-color:transparent}
.on-dark .outline{-webkit-text-stroke-color:rgba(255,255,255,.34)}

/* ---------- 4. LAYOUT ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell-wide{max-width:1560px}
.sec{padding-block:clamp(72px,9vw,140px);position:relative}
.sec-sm{padding-block:clamp(52px,6vw,88px)}
.sec.dark{background:var(--ink);color:var(--txt-inv)}
.sec.ink2{background:var(--ink-2);color:var(--txt-inv)}
.sec.soft{background:var(--paper-2)}
.sec.sand{background:var(--paper-3)}
.sec.ice{background:var(--ice)}
.center{text-align:center}
.grid{display:grid;gap:clamp(20px,2.6vw,36px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,84px);align-items:center}
.narrow{max-width:760px}
.narrow.center{margin-inline:auto}
@media (max-width:1000px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .g2,.g3,.g4,.split{grid-template-columns:1fr}
}

/* Section header */
.sec-head{max-width:820px;margin-bottom:clamp(38px,5vw,68px)}
.sec-head.center{margin-inline:auto;text-align:center}

/* Hairline rule */
.rule{height:1px;background:var(--line-dark);border:0;margin-block:clamp(38px,5vw,68px)}
.on-dark .rule,.dark .rule,.ink2 .rule{background:var(--line)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --bg:var(--orange);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 32px;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:.86rem;font-weight:500;
  letter-spacing:.01em;text-transform:none;
  border-radius:2px;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .4s var(--ease);
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--orange-hi);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover{box-shadow:0 14px 30px -14px rgba(216,74,5,.42)}
.btn:hover::after{transform:translateY(0)}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

.btn-ghost{--bg:transparent;--fg:var(--charcoal);border:1px solid var(--silver)}
.btn-ghost::after{background:var(--charcoal)}
.btn-ghost:hover{color:#fff;border-color:var(--charcoal)}
.on-dark .btn-ghost,.dark .btn-ghost,.ink2 .btn-ghost,.forest .btn-ghost,
.hero .btn-ghost,.phero .btn-ghost{
  --fg:#fff;border-color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.on-dark .btn-ghost::after,.dark .btn-ghost::after,.ink2 .btn-ghost::after,
.forest .btn-ghost::after,.hero .btn-ghost::after,.phero .btn-ghost::after{background:#fff}
.on-dark .btn-ghost:hover,.dark .btn-ghost:hover,.ink2 .btn-ghost:hover,
.forest .btn-ghost:hover,.hero .btn-ghost:hover,.phero .btn-ghost:hover{color:var(--navy);border-color:#fff}

.btn-light{--bg:#fff;--fg:var(--navy)}
.btn-light::after{background:var(--navy)}
.btn-light:hover{color:#fff}

.btn-lg{padding:19px 38px;font-size:.94rem}
.btn-sm{padding:12px 22px;font-size:.8rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-row.center{justify-content:center}

/* Text link — understated, hairline underline */
.tlink{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-size:.86rem;font-weight:500;
  letter-spacing:.01em;text-transform:none;
  color:var(--charcoal);padding-bottom:5px;position:relative;
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--orange);transform-origin:right;transform:scaleX(1);transition:height .35s var(--ease),background .35s}
.tlink:hover{color:var(--orange-hi)}
.tlink:hover::after{height:2px;background:var(--orange-hi)}
.on-dark .tlink,.dark .tlink,.ink2 .tlink,.forest .tlink{color:#fff}
.on-dark .tlink:hover,.dark .tlink:hover,.ink2 .tlink:hover,.forest .tlink:hover{color:var(--orange-lo)}
.tlink svg{transition:transform .45s var(--ease)}
.tlink:hover svg{transform:translateX(5px)}

/* ---------- 6. NAV — transparent over the hero, frosted when recalled ---------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:56}

.topbar{
  background:transparent;color:rgba(255,255,255,.72);
  font-size:.78rem;letter-spacing:.02em;font-weight:300;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.topbar .shell{display:flex;align-items:center;justify-content:space-between;gap:20px;height:46px}
.topbar a{transition:color .3s}
.topbar a:hover{color:var(--orange-lo)}
.topbar-l,.topbar-r{display:flex;align-items:center;gap:16px;min-width:0}

/* Announcement ticker — scrolls within its own strip only */
.ticker{
  position:relative;overflow:hidden;
  width:clamp(190px,26vw,360px);height:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{
  display:flex;align-items:center;width:max-content;
  position:absolute;top:0;left:0;height:100%;white-space:nowrap;
  animation:tick 24s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{
  display:inline-flex;align-items:center;gap:22px;
  padding-right:22px;flex:none;
}
.ticker-track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.topbar .dot{width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}
@media (max-width:900px){.topbar-r{display:none}.topbar .shell{justify-content:center}}

.nav{
  background:transparent;border-bottom:1px solid rgba(255,255,255,.12);
  transition:transform .55s var(--ease),background .4s,border-color .4s,box-shadow .4s;
}
.nav .shell{display:flex;align-items:center;gap:clamp(16px,2.2vw,36px);height:var(--nav-h)}

/* Recalled header: fixed, frosted, dark type */
.nav.pinned{
  position:fixed;top:0;left:0;right:0;z-index:56;
  transform:translateY(-100%);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line-dark);
  box-shadow:0 12px 36px -26px rgba(13,27,42,.5);
}
.nav.pinned.show{transform:translateY(0)}

/* Logo — larger, and it swaps light/dark with the header state */
.brand{flex:none;display:block;position:relative;line-height:0}
.brand img{width:auto;transition:opacity .35s var(--ease),height .35s var(--ease)}
.brand .logo-light{height:62px}
.brand .logo-dark{height:62px;position:absolute;inset:0;opacity:0}
.nav.pinned .brand .logo-light{opacity:0}
.nav.pinned .brand .logo-dark{opacity:1}
.nav.pinned .brand img{height:52px}
.brand:hover img{opacity:.82}
.nav.pinned .brand:hover .logo-dark{opacity:.82}
@media (max-width:600px){.brand .logo-light,.brand .logo-dark{height:50px}}

.menu{display:flex;align-items:center;gap:clamp(4px,1.3vw,22px);margin-left:auto}
.menu > li{position:relative}
.menu > li > a,.menu > li > button{
  display:flex;align-items:center;gap:6px;
  padding:10px 4px;font-family:var(--body);font-size:.92rem;font-weight:400;
  letter-spacing:.005em;text-transform:none;color:rgba(255,255,255,.88);
  position:relative;transition:color .35s;
}
.nav.pinned .menu > li > a,.nav.pinned .menu > li > button{color:var(--graphite)}
.menu > li > a::after{
  content:"";position:absolute;left:4px;right:4px;bottom:2px;height:1px;
  background:var(--orange);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.menu > li > a:hover,.menu > li.on > a,.menu > li > button:hover{color:#fff}
.nav.pinned .menu > li > a:hover,.nav.pinned .menu > li.on > a,
.nav.pinned .menu > li > button:hover{color:var(--charcoal)}
.menu > li > a:hover::after,.menu > li.on > a::after{transform:scaleX(1);transform-origin:left}
.menu .caret{width:9px;height:9px;opacity:.7;transition:transform .35s}
.menu li:hover .caret{transform:rotate(180deg)}

.drop{
  position:absolute;top:calc(100% + 10px);left:-18px;min-width:264px;
  background:#fff;border:1px solid var(--line-dark);border-radius:4px;
  box-shadow:var(--shadow-lg);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.menu li:hover > .drop,.menu li:focus-within > .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{
  display:block;padding:13px 16px;border-radius:3px;
  font-family:var(--body);font-size:.9rem;font-weight:500;letter-spacing:0;color:var(--charcoal);
  transition:background .28s,color .28s;
}
.drop a:hover{background:var(--paper-2);color:var(--orange-hi)}
.drop small{display:block;font-size:.76rem;font-weight:300;letter-spacing:0;color:var(--txt-2);text-transform:none;margin-top:3px;line-height:1.5}

.nav-cta{flex:none}
.nav .nav-cta .btn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.nav .nav-cta .btn::after{background:var(--orange)}
.nav.pinned .nav-cta .btn{background:var(--orange);border-color:var(--orange)}
.nav.pinned .nav-cta .btn::after{background:var(--orange-hi)}
@media (max-width:1180px){.nav-cta .btn{padding:11px 18px;font-size:.78rem}}
@media (max-width:1080px){.menu,.nav-cta{display:none}}

/* Burger */
.burger{display:none;margin-left:auto;width:46px;height:46px;position:relative;flex:none}
.burger span{position:absolute;left:11px;width:24px;height:2px;background:#fff;transition:all .45s var(--ease)}
.nav.pinned .burger span{background:var(--charcoal)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:29px}
.burger.x span:nth-child(1){top:23px;transform:rotate(45deg)}
.burger.x span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.x span:nth-child(3){top:23px;transform:rotate(-45deg)}
@media (max-width:1080px){.burger{display:block}}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:54;
  background:var(--navy);color:#fff;
  padding:calc(var(--nav-h) + 80px) var(--gut) 40px;
  overflow-y:auto;opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s;
}
.drawer.open{opacity:1;visibility:visible}
.drawer nav > ul > li{border-bottom:1px solid var(--line)}
.drawer nav > ul > li > a{
  display:block;padding:18px 0;font-family:var(--display);font-size:1.65rem;
  font-weight:500;letter-spacing:-.01em;
  opacity:0;transform:translateY(14px);transition:color .3s;
}
.drawer.open nav > ul > li > a{animation:drawerIn .55s var(--ease) forwards}
@keyframes drawerIn{to{opacity:1;transform:translateY(0)}}
.drawer nav > ul > li > a:hover{color:var(--orange-lo)}
.drawer .sub{padding:0 0 18px 18px;border-left:1px solid var(--orange)}
.drawer .sub a{display:block;padding:8px 0;font-size:.95rem;font-weight:300;color:var(--txt-inv-2)}
.drawer .sub a:hover{color:var(--orange-lo)}
.drawer-foot{margin-top:40px;display:grid;gap:16px}
.drawer-foot a.line{display:flex;gap:12px;align-items:center;color:var(--txt-inv-2);font-size:.95rem;font-weight:300}
.drawer-foot a.line:hover{color:var(--orange-lo)}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;min-height:min(86vh,880px);
  display:flex;align-items:center;
  background:var(--navy);color:#fff;overflow:hidden;
  padding-top:calc(46px + var(--nav-h) + clamp(40px,5vw,80px));
  padding-bottom:clamp(70px,8vw,110px);
  perspective:1200px;
}
.hero-sm{min-height:min(54vh,520px)}
.hero-bg{position:absolute;inset:-6%;z-index:0;will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 26%;opacity:.42}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,27,42,.72) 0%,rgba(13,27,42,.30) 40%,rgba(13,27,42,.92) 100%),
    linear-gradient(100deg,rgba(13,27,42,.92) 6%,rgba(13,27,42,.10) 62%);
}
.hero .shell{position:relative;z-index:2;width:100%}
.hero h1{margin-bottom:26px;color:#fff}
.hero .lede{max-width:58ch;color:var(--txt-inv-2)}
.hero .btn-row{margin-top:38px}

/* Hero figures — bold, no boxes, each column its own interactive zone */
.hero-stats{
  position:relative;z-index:2;margin-top:clamp(46px,5.5vw,78px);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-top:clamp(30px,3.2vw,44px);
  border-top:1px solid rgba(255,255,255,.22);
}
.hero-stats > div{
  position:relative;isolation:isolate;
  padding:6px clamp(18px,2.4vw,40px) 10px 0;
  transition:transform .55s var(--ease);
}
.hero-stats > div + div{
  padding-left:clamp(22px,3vw,52px);
  border-left:1px solid rgba(255,255,255,.16);
}
/* soft glow behind the active column */
.hero-stats > div::before{
  content:"";position:absolute;inset:-14px -10px -18px -10px;z-index:-1;border-radius:6px;
  background:radial-gradient(120% 90% at 20% 0%,rgba(245,106,16,.20) 0%,transparent 62%);
  opacity:0;transition:opacity .55s var(--ease);
}
/* orange rule that draws under the column */
.hero-stats > div::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.hero-stats > div + div::after{left:clamp(22px,3vw,52px);width:calc(100% - clamp(22px,3vw,52px))}
.hero-stats > div:hover{transform:translateY(-6px)}
.hero-stats > div:hover::before{opacity:1}
.hero-stats > div:hover::after{transform:scaleX(1)}

.hero-stats b{
  display:flex;align-items:flex-start;gap:.04em;
  font-family:var(--display);font-weight:600;
  font-size:clamp(3.2rem,5.4vw,5.6rem);
  color:#fff;line-height:.92;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
  transition:transform .55s var(--ease),color .45s;
}
.hero-stats > div:hover b{transform:scale(1.04);transform-origin:left center}
.hero-stats b sup{
  font-family:var(--body);font-size:.26em;font-weight:600;line-height:1;
  top:.5em;position:relative;color:var(--orange);
}

/* five orange stars beneath the rating */
.hero-stars{
  display:flex;gap:4px;margin-top:12px;color:var(--orange);
  font-size:.88rem;letter-spacing:2px;
}
.hero-stars i{font-style:normal;opacity:0;transform:translateY(4px);
  animation:starIn .5s var(--ease) forwards}
.hero-stars i:nth-child(1){animation-delay:.35s}
.hero-stars i:nth-child(2){animation-delay:.45s}
.hero-stars i:nth-child(3){animation-delay:.55s}
.hero-stars i:nth-child(4){animation-delay:.65s}
.hero-stars i:nth-child(5){animation-delay:.75s}
@keyframes starIn{to{opacity:1;transform:translateY(0)}}

.hero-stats span.lbl{
  display:block;margin-top:16px;font-family:var(--body);
  font-size:.94rem;font-weight:400;letter-spacing:.005em;
  color:rgba(255,255,255,.72);line-height:1.5;max-width:17ch;
  transition:color .45s;
}
.hero-stats > div:hover span.lbl{color:#fff}

/* Google watermark sits behind the rating figure */
.gmark{
  position:absolute;left:clamp(52px,7vw,120px);top:-14px;z-index:-1;
  width:clamp(76px,8vw,124px);height:auto;
  opacity:.11;pointer-events:none;
  transition:opacity .6s var(--ease),transform .8s var(--ease);
}
.hero-stats > div:hover .gmark{opacity:.22;transform:scale(1.06) rotate(-4deg)}

@media (max-width:1000px){
  .hero-stats{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .hero-stats > div:nth-child(odd){padding-left:0;border-left:0}
  .hero-stats > div:nth-child(odd)::after{left:0;width:100%}
  .hero-stats b{font-size:clamp(2.8rem,7.5vw,3.6rem)}
}
@media (max-width:460px){
  .hero-stats{grid-template-columns:1fr;row-gap:30px}
  .hero-stats > div{padding-left:0!important;border-left:0!important}
  .hero-stats > div::after{left:0!important;width:100%!important}
}
@media (prefers-reduced-motion:reduce){.hero-stars i{animation:none;opacity:1;transform:none}}

/* Inner page hero */
.phero{position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding-top:calc(46px + var(--nav-h) + clamp(34px,4vw,64px));
  padding-bottom:clamp(64px,7vw,100px)}
.phero .hero-bg{inset:0}
.phero .hero-bg img{opacity:.28}
.phero .shell{position:relative;z-index:2}
.phero h1{color:#fff}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-inv-3);margin-bottom:26px}
.crumbs a:hover{color:var(--orange-lo)}
.crumbs span{color:var(--txt-inv-2)}

/* ---------- 8. QUIET TRUST BAR  ---------- */
.trustbar{background:var(--paper-2);border-block:1px solid var(--line-dark)}
.trustbar .shell{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,3.4vw,54px);padding-block:22px;
  font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--graphite);text-align:center;
}
.trustbar em{font-style:normal;color:var(--orange-hi)}

/* ---------- 9. CARDS ---------- */
.card{
  position:relative;background:#fff;border:1px solid var(--line-dark);
  border-radius:var(--r-lg);padding:clamp(26px,3vw,40px);
  overflow:hidden;isolation:isolate;
  transition:transform .48s var(--ease),box-shadow .48s var(--ease),border-color .48s;
}
.card::before{
  content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--silver)}
.card:hover::before{transform:scaleX(1)}
.card .ico{width:56px;height:56px;margin-bottom:22px;object-fit:contain}
.card h3{margin-bottom:12px;font-size:1.28rem;letter-spacing:.01em}
.card p{font-size:.95rem;color:var(--txt-2);line-height:1.68}
.card .tlink{margin-top:20px}

.dark .card,.ink2 .card{background:var(--ink-3);border-color:var(--line);color:#fff}
.dark .card p,.ink2 .card p{color:var(--txt-inv-2)}
.dark .card:hover,.ink2 .card:hover{background:var(--ink-4);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.dark .card .ico,.ink2 .card .ico{filter:brightness(0) invert(1)}

/* numbered card */
.card .num{
  position:absolute;right:24px;top:16px;
  font-family:var(--display);font-size:3.4rem;font-weight:500;line-height:1;
  color:var(--paper-3);z-index:-1;transition:color .5s var(--ease);
}
.card:hover .num{color:rgba(245,106,16,.16)}
.dark .card .num,.ink2 .card .num{color:rgba(255,255,255,.06)}

/* ---------- 10. PROCESS TABS ---------- */
.proc{display:grid;grid-template-columns:340px 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){.proc{grid-template-columns:1fr}}
.proc-tabs{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line)}
@media (max-width:900px){.proc-tabs{flex-direction:row;overflow-x:auto;border-left:0;border-bottom:2px solid var(--line);padding-bottom:2px;scrollbar-width:none}.proc-tabs::-webkit-scrollbar{display:none}}
.proc-tab{
  position:relative;text-align:left;padding:20px 24px;
  font-family:var(--display);font-size:1.28rem;font-weight:500;
  text-transform:none;letter-spacing:-.005em;color:rgba(255,255,255,.62);
  white-space:nowrap;transition:color .32s,background .32s;
}
.proc-tab::before{
  content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;
  background:var(--orange);transform:scaleY(0);transform-origin:top;
  transition:transform .42s var(--ease);
}
@media (max-width:900px){.proc-tab::before{left:0;right:0;top:auto;bottom:-2px;width:auto;height:2px;transform:scaleX(0);transform-origin:left}}
.proc-tab small{display:block;font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--orange-lo);margin-bottom:6px}
.proc-tab:hover{color:#fff}
.proc-tab.on{color:#fff;background:rgba(255,255,255,.035)}
.proc-tab.on::before{transform:scaleY(1)}
@media (max-width:900px){.proc-tab.on::before{transform:scaleX(1)}}

.proc-panel{display:none}
.proc-panel.on{display:block;animation:fadeUp .55s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.proc-panel h3{font-family:var(--display);font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:1.2;margin-bottom:18px;color:#fff}
.proc-panel ul{display:grid;gap:14px;margin-top:26px}
.proc-panel li{display:flex;gap:14px;align-items:flex-start;color:var(--txt-inv-2);font-size:1rem}
.proc-panel li::before{
  content:"";flex:none;width:8px;height:8px;margin-top:9px;
  background:var(--orange);transform:rotate(45deg);
}
.proc-media{margin-top:32px;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8}
.proc-media img{width:100%;height:100%;object-fit:cover}

/* ---------- 11. PRICING ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:clamp(16px,2vw,26px)}
.price{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:34px 30px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
  .price:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.price.feat{background:var(--ink);color:#fff;border-color:var(--ink)}
.price.feat p{color:var(--txt-inv-2)}
.tag{
  position:absolute;top:-11px;right:24px;
  background:var(--orange);color:#fff;padding:5px 13px;border-radius:99px;
  font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.price h3{font-size:1.24rem;margin-bottom:6px;min-height:2.4em;display:flex;align-items:flex-end}
.price .amt{font-family:var(--display);font-size:2.9rem;font-weight:500;line-height:1.1;color:var(--charcoal);margin:16px 0 4px}
.price .per{font-size:.8rem;letter-spacing:.02em;text-transform:none;color:var(--txt-2);margin-bottom:20px}
.price.feat .per{color:var(--txt-inv-2)}
.price.feat .amt{color:var(--orange-lo)}
.price p{font-size:.92rem;color:var(--txt-2);line-height:1.66;flex:1}
.price .btn{margin-top:26px;width:100%}

/* ---------- 12. TEAM ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(18px,2.4vw,30px)}
.member{
  background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  display:flex;flex-direction:column;
}
.member:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.avatar{
  aspect-ratio:4/3;display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--charcoal) 0%,var(--navy) 55%,#3A1A05 100%);
}
.avatar::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 72% 22%,var(--orange-glow) 0%,transparent 58%);
  transition:opacity .5s;opacity:.8;
}
.member:hover .avatar::after{opacity:1}
.avatar b{
  position:relative;z-index:2;font-family:var(--display);font-size:3rem;font-weight:500;
  color:#fff;letter-spacing:.03em;
  transition:transform .5s var(--ease);
}
.member:hover .avatar b{transform:scale(1.09)}
.member-body{padding:26px 26px 30px;flex:1;display:flex;flex-direction:column}
.member h3{font-size:1.4rem;margin-bottom:12px}
.roles{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.roles span{
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--paper-2);color:var(--txt-2);padding:5px 10px;border-radius:99px;
  border:1px solid var(--line-dark);
}
.roles span.pri{background:var(--orange);color:#fff;border-color:var(--orange)}
.member p{font-size:.9rem;color:var(--txt-2);line-height:1.68;flex:1}
.member .btn{margin-top:22px}

/* bio expand */
.bio{max-height:7.4em;overflow:hidden;position:relative;transition:max-height .6s var(--ease)}
.bio.open{max-height:120em}
.bio:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3em;background:linear-gradient(transparent,#fff)}
.bio-t{margin-top:12px;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange)}

/* ---------- 13. TESTIMONIALS ---------- */
.quotes{position:relative}
.quote{display:none}
.quote.on{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3vw,40px);align-items:center;animation:fadeUp .6s var(--ease) both}
@media (max-width:760px){.quote.on{grid-template-columns:1fr;text-align:center;justify-items:center}}
.quote-img{
  width:clamp(96px,10vw,138px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;flex:none;border:2px solid var(--orange);
  background:var(--ink-3);
}
.quote-img img{width:100%;height:100%;object-fit:cover}
.quote blockquote{font-family:var(--display);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.6;color:rgba(255,255,255,.92);font-weight:400;font-style:italic;text-wrap:pretty;max-width:66ch}
.quote blockquote::before{content:"“";font-family:var(--display);font-size:2.6rem;color:var(--orange-lo);line-height:0;vertical-align:-.24em;margin-right:.04em}
.quote cite{display:block;margin-top:18px;font-style:normal}
.quote cite b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:500;text-transform:none;color:#fff;margin-bottom:4px}
.quote cite span{font-size:.8rem;letter-spacing:.02em;text-transform:none;color:var(--orange-lo)}
.q-nav{display:flex;gap:10px;justify-content:center;margin-top:clamp(24px,2.6vw,34px)}
.q-dot{width:38px;height:3px;background:var(--line);transition:background .35s,transform .35s}
.q-dot.on{background:var(--orange);transform:scaleY(2)}
.q-dot:hover{background:var(--txt-inv-3)}

/* Google review cards */
.rev{
  background:#fff;border:1px solid var(--line-dark);border-radius:5px;
  padding:clamp(30px,3vw,42px);position:relative;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.rev:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rev .stars{color:var(--orange);letter-spacing:4px;font-size:1.1rem;margin-bottom:18px}
.rev p{font-family:var(--display);font-size:clamp(1rem,1.25vw,1.14rem);color:var(--txt);line-height:1.68;font-weight:400}
.rev footer{margin-top:20px;font-size:.86rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--txt)}

.rating-badge{display:inline-flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line-dark);border-radius:99px;padding:14px 30px 14px 22px;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.rating-badge:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.rating-badge b{font-family:var(--display);font-size:2.6rem;font-weight:500;color:var(--charcoal);line-height:1}
.rating-badge .stars{color:var(--orange);letter-spacing:3px;font-size:1.05rem}
.rating-badge small{display:block;margin-top:3px;font-size:.8rem;letter-spacing:.02em;text-transform:none;color:var(--txt-2);font-weight:500}

/* ---------- 14. PARTNERS / INSTITUTIONS — compact hover row ---------- */
.logos{
  display:grid;grid-template-columns:repeat(4,1fr);
  align-items:center;max-width:980px;margin-inline:auto;
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  padding-block:34px;
}
.logo-item + .logo-item{border-left:1px solid var(--line-dark)}
@media (max-width:820px){.logo-item:nth-child(odd){border-left:0}}
.dark .logos,.ink2 .logos,.forest .logos{border-color:rgba(255,255,255,.16)}
@media (max-width:820px){.logos{grid-template-columns:repeat(2,1fr);row-gap:32px}}

.logo-item{position:relative;display:block;text-align:center;outline:none}
.logo-plate{
  display:flex;align-items:center;justify-content:center;
  height:var(--h,52px);padding:0 8px;cursor:pointer;overflow:hidden;
}
/* Hard height on the image itself — the wrapper is a convenience, not the constraint.
   Each mark carries its own --h so crests, shields and wordmarks optically match. */
.logo-plate img{
  height:var(--h,52px);width:100%;max-width:100%;object-fit:contain;object-position:center;
  filter:grayscale(1) contrast(.9);opacity:.5;
  transition:filter .45s var(--ease),opacity .45s var(--ease),transform .5s var(--ease);
}
.logo-item:hover .logo-plate img,
.logo-item:focus-visible .logo-plate img{filter:none;opacity:1;transform:scale(1.06)}

/* Detail reveals only on hover / keyboard focus */
.logo-pop{
  position:absolute;top:calc(100% + 16px);left:50%;
  width:min(320px,78vw);transform:translate(-50%,8px);
  background:#fff;border:1px solid var(--line-dark);border-radius:4px;
  box-shadow:var(--shadow-lg);padding:22px 24px;text-align:left;z-index:20;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
}
.logo-pop::before{
  content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;
  margin-left:-5.5px;background:#fff;border-left:1px solid var(--line-dark);
  border-top:1px solid var(--line-dark);transform:rotate(45deg);
}
.logo-item:hover .logo-pop,
.logo-item:focus-visible .logo-pop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.logo-pop .role{
  display:block;font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange-hi);margin-bottom:8px;
}
.logo-pop h3{
  font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.3;
  color:var(--txt);margin-bottom:8px;
}
.logo-pop p{font-size:.86rem;font-weight:300;line-height:1.66;color:var(--txt-2)}
.logo-item:first-child .logo-pop{left:0;transform:translate(0,8px)}
.logo-item:first-child:hover .logo-pop,
.logo-item:first-child:focus-visible .logo-pop{transform:translate(0,0)}
.logo-item:first-child .logo-pop::before{left:44px}
.logo-item:last-child .logo-pop{left:auto;right:0;transform:translate(0,8px)}
.logo-item:last-child:hover .logo-pop,
.logo-item:last-child:focus-visible .logo-pop{transform:translate(0,0)}
.logo-item:last-child .logo-pop::before{left:auto;right:44px}

/* Touch devices have no hover — show the caption inline instead */
@media (hover:none){
  .logo-pop{
    position:static;transform:none!important;opacity:1;visibility:visible;
    width:auto;box-shadow:none;border:0;padding:14px 0 0;text-align:center;background:none;
  }
  .logo-pop::before{display:none}
  .logo-pop p{display:none}
  .logo-plate img{filter:none;opacity:.85}
}

/* Simple logo row (process / performance pages) */
.logo-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(18px,3vw,48px);align-items:center;
}
.logo-strip img{
  height:50px;width:100%;max-width:100%;object-fit:contain;
  filter:grayscale(1) contrast(.9);opacity:.5;transition:filter .45s,opacity .45s;
}
.logo-strip img:hover{filter:none;opacity:1}

/* ---------- 15. GALLERY + LIGHTBOX ---------- */
.gal{columns:4;column-gap:12px}
@media (max-width:1100px){.gal{columns:3}}
@media (max-width:760px){.gal{columns:2}}
.gal button{
  display:block;width:100%;margin-bottom:12px;border-radius:8px;overflow:hidden;
  position:relative;background:var(--ink-3);break-inside:avoid;
}
.gal img{width:100%;height:auto;transition:transform .7s var(--ease),filter .5s;filter:grayscale(.28)}
.gal button::after{
  content:"";position:absolute;inset:0;background:var(--orange);
  opacity:0;mix-blend-mode:multiply;transition:opacity .45s;
}
.gal button:hover img{transform:scale(1.07);filter:none}
.gal button:hover::after{opacity:.16}

.lb{
  position:fixed;inset:0;z-index:2000;background:rgba(13,27,42,.96);
  display:grid;place-items:center;padding:clamp(20px,5vw,64px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
  backdrop-filter:blur(6px);
}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:84vh;object-fit:contain;border-radius:6px;animation:zoomIn .45s var(--ease)}
@keyframes zoomIn{from{transform:scale(.93);opacity:0}to{transform:scale(1);opacity:1}}
.lb-close{position:absolute;top:22px;right:22px;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);color:#fff;display:grid;place-items:center;font-size:1.4rem;transition:background .3s,transform .3s}
.lb-close:hover{background:var(--orange);transform:rotate(90deg);border-color:var(--orange)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1px solid var(--line);color:#fff;display:grid;place-items:center;font-size:1.5rem;transition:background .3s,border-color .3s}
.lb-nav:hover{background:var(--orange);border-color:var(--orange)}
.lb-prev{left:clamp(10px,3vw,36px)}
.lb-next{right:clamp(10px,3vw,36px)}
.lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:var(--txt-inv-3);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- 16. ACCORDION ---------- */
.acc{border-top:1px solid var(--line-dark)}
.dark .acc,.ink2 .acc{border-color:var(--line)}
.acc-item{border-bottom:1px solid var(--line-dark)}
.dark .acc-item,.ink2 .acc-item{border-color:var(--line)}
.acc-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:24px 0;text-align:left;
  font-family:var(--display);font-size:clamp(1.08rem,1.6vw,1.3rem);font-weight:500;
  text-transform:none;letter-spacing:-.005em;line-height:1.4;transition:color .3s;
}
.acc-q:hover{color:var(--orange)}
.acc-item.on .acc-q{color:var(--orange)}
.acc-ico{flex:none;width:34px;height:34px;border:1.5px solid currentColor;border-radius:50%;position:relative;transition:transform .45s var(--ease),background .35s}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .3s}
.acc-ico::before{width:13px;height:1.6px}
.acc-ico::after{width:1.6px;height:13px}
.acc-item.on .acc-ico{transform:rotate(180deg)}
.acc-item.on .acc-ico::after{opacity:0;transform:translate(-50%,-50%) scaleY(0)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .58s var(--ease)}
.acc-a > div{padding-bottom:30px;max-width:820px}
.acc-a p{color:var(--txt-2);line-height:1.76}
.dark .acc-a p,.ink2 .acc-a p{color:var(--txt-inv-2)}

/* ---------- 17. FEATURE / SPLIT MEDIA ---------- */
.media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--ink-3)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.media:hover img{transform:scale(1.05)}
.media.tall{aspect-ratio:3/4}
.media.wide{aspect-ratio:16/9}
.media-badge{
  position:absolute;left:0;bottom:0;background:var(--orange);color:#fff;
  padding:14px 22px;font-family:var(--body);font-size:.82rem;font-weight:600;
  text-transform:none;letter-spacing:.01em;
}
.stack-media{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stack-media .media:first-child{grid-row:span 2;aspect-ratio:auto;min-height:100%}

/* Checklist */
.checks{display:grid;gap:15px;margin-top:26px}
.checks li{display:flex;gap:15px;align-items:flex-start;font-size:1rem;color:var(--txt-2)}
.on-dark .checks li,.dark .checks li,.ink2 .checks li{color:var(--txt-inv-2)}
.checks li::before{
  content:"";flex:none;width:22px;height:22px;margin-top:3px;border-radius:50%;
  background:var(--orange);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center/15px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  box-shadow:inset 0 0 0 99px var(--orange);
}

/* Simple pill list */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pills span{
  border:1px solid var(--line);border-radius:99px;padding:9px 18px;
  font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--txt-inv-2);transition:background .3s,color .3s,border-color .3s;
}
.pills span:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.light-pills span{border-color:var(--line-dark);color:var(--txt-2)}

/* ---------- 18. STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line)}
.stats > div{background:var(--ink);padding:clamp(28px,3.4vw,48px) 26px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:500;color:var(--orange-lo);line-height:1.1}
.stats span{display:block;margin-top:12px;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--txt-inv-2)}

/* ---------- 19. CTA BAND ---------- */
.cta{position:relative;background:var(--orange);color:#fff;overflow:hidden;padding-block:clamp(58px,7vw,104px)}
.cta::before{
  content:"";position:absolute;right:-6%;top:-42%;width:58%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.09);
}
.cta::after{
  content:"";position:absolute;left:-10%;bottom:-58%;width:44%;aspect-ratio:1;border-radius:50%;
  background:rgba(0,0,0,.07);
}
.cta .shell{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.cta h2{max-width:640px}
.cta p{color:rgba(255,255,255,.86);margin-top:14px;max-width:560px}

/* ---------- 20. FORMS ---------- */
.form{display:grid;gap:20px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:640px){.f2{grid-template-columns:1fr}}
.field{position:relative;display:block}
.field > span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);margin-bottom:9px}
.field input,.field textarea,.field select{
  width:100%;padding:15px 17px;background:#fff;
  border:1.5px solid var(--line-dark);border-radius:var(--r);
  font-size:.96rem;transition:border-color .3s,box-shadow .3s;
}
.field textarea{min-height:148px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--orange);box-shadow:0 0 0 4px rgba(245,106,16,.14);
}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3)}
.radios{display:flex;flex-wrap:wrap;gap:10px}
.radios label{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1.5px solid var(--line-dark);border-radius:99px;padding:11px 20px;
  font-size:.78rem;font-weight:600;letter-spacing:.06em;
  transition:border-color .28s,background .28s,color .28s;
}
.radios input{accent-color:var(--orange);width:15px;height:15px}
.radios label:has(input:checked){border-color:var(--orange);background:rgba(245,106,16,.08);color:var(--orange)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.84rem;color:var(--txt-2);line-height:1.6}
.consent input{accent-color:var(--orange);width:17px;height:17px;margin-top:3px;flex:none}
.form-note{font-size:.84rem;color:var(--txt-2);line-height:1.7}
.hp{position:absolute!important;left:-9999px!important}

.form-msg{display:none;padding:18px 22px;border-radius:var(--r);font-size:.92rem;font-weight:600}
.form-msg.ok{display:block;background:rgba(46,157,102,.10);color:#1F7A4D;border:1px solid rgba(46,157,102,.32)}

/* Contact cards */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.ccard{
  display:flex;gap:18px;align-items:flex-start;
  background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:26px;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.ccard .ci{flex:none;width:46px;height:46px;border-radius:50%;background:rgba(245,106,16,.12);display:grid;place-items:center;color:var(--orange)}
.ccard h2{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px}
.ccard p,.ccard a{font-size:1rem;font-weight:600;color:var(--txt);line-height:1.5}
.ccard a:hover{color:var(--orange)}

.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-dark);min-height:400px;background:var(--paper-2)}
.map iframe{width:100%;height:100%;min-height:400px;border:0;display:block;filter:grayscale(.4) contrast(1.05)}

/* ---------- 21. BLOG ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(20px,2.6vw,32px)}
.post{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.post-img{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3)}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover .post-img img{transform:scale(1.07)}
.post-body{padding:28px;flex:1;display:flex;flex-direction:column}
.post-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:.74rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);margin-bottom:16px}
.post-meta .cat{color:var(--orange)}
.post h3{font-size:1.32rem;margin-bottom:12px;line-height:1.08}
.post p{font-size:.92rem;color:var(--txt-2);line-height:1.68;flex:1}
.post .tlink{margin-top:20px}

.article{max-width:780px;margin-inline:auto}
.article > *+*{margin-top:1.35em}
.article h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-top:2.1em;margin-bottom:.55em}
.article h3{font-size:clamp(1.24rem,2vw,1.6rem);margin-top:1.7em;margin-bottom:.5em}
.article p{font-size:1.06rem;line-height:1.82;color:var(--txt-2)}
.article ul,.article ol{display:grid;gap:12px;padding-left:0}
.article ul li{display:flex;gap:14px;color:var(--txt-2);line-height:1.76}
.article ul li::before{content:"";flex:none;width:7px;height:7px;margin-top:11px;background:var(--orange);transform:rotate(45deg)}
.article ol{counter-reset:n}
.article ol li{display:flex;gap:16px;color:var(--txt-2);line-height:1.76;counter-increment:n}
.article ol li::before{content:counter(n);flex:none;font-family:var(--display);font-size:1.16rem;font-weight:800;color:var(--orange);min-width:24px}
.article blockquote{
  border-left:3px solid var(--orange);padding:6px 0 6px 26px;
  font-size:1.2rem;line-height:1.62;color:var(--txt);font-weight:500;font-style:italic;
}
.article strong{color:var(--txt);font-weight:700}
.article a{color:var(--charcoal);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px}
.article a:hover{color:var(--orange-hi);text-decoration-color:var(--orange-hi)}
.article .kicker{font-size:1.16rem;color:var(--txt);font-weight:500;line-height:1.7}

.toc{background:var(--paper-2);border-left:3px solid var(--orange);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:26px 30px}
.toc b{display:block;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:14px}
.toc ol{counter-reset:t;display:grid;gap:9px}
.toc li{counter-increment:t;display:flex;gap:12px}
.toc li::before{content:counter(t,decimal-leading-zero);font-size:.74rem;font-weight:700;color:var(--orange);min-width:22px}
.toc a{font-size:.95rem;color:var(--txt-2);text-decoration:none}
.toc a:hover{color:var(--orange)}

.med-note{
  background:var(--paper-2);border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:24px 28px;font-size:.88rem;color:var(--txt-2);line-height:1.7;
}
.med-note b{color:var(--txt)}

/* ---------- 22. RESOURCE LISTS ---------- */
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,28px)}
.res{background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:32px}
.res h3{font-size:1.16rem;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line-dark)}
.res ul{display:grid;gap:2px}
.res li a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border-radius:6px;font-size:.92rem;color:var(--txt-2);
  transition:background .25s,color .25s,padding-left .3s var(--ease);
}
.res li a:hover{background:var(--paper-2);color:var(--orange);padding-left:20px}
.res li a svg{flex:none;opacity:.4;transition:opacity .25s,transform .3s}
.res li a:hover svg{opacity:1;transform:translate(3px,-3px)}

/* ---------- 23. FOOTER ---------- */
.foot{background:var(--ink);color:var(--txt-inv-2);padding-top:clamp(58px,7vw,96px)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,56px);padding-bottom:clamp(40px,5vw,64px)}
@media (max-width:1000px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-top{grid-template-columns:1fr}}
.foot img.flogo{height:56px;width:auto;margin-bottom:22px}
.foot p{font-size:.92rem;line-height:1.74}
.foot h2{font-size:.72rem;font-family:var(--body);font-weight:800;letter-spacing:.18em;color:#fff;margin-bottom:20px}
.foot ul{display:grid;gap:11px}
.foot ul a{font-size:.9rem;transition:color .25s,padding-left .3s var(--ease);display:inline-block}
.foot ul a:hover{color:var(--orange);padding-left:6px}
.foot .fline{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;margin-bottom:14px}
.foot .fline svg{flex:none;margin-top:4px;color:var(--orange)}
.foot .fline a:hover{color:var(--orange)}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{
  width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s,color .3s;
}
.socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-3px)}
.foot-bot{
  border-top:1px solid var(--line);padding-block:26px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-size:.78rem;color:var(--txt-inv-3);
}
.foot-bot a:hover{color:var(--orange)}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:22px}

/* ---------- 24. UTILITY UI ---------- */
/* Scroll reveal */
[data-rv]{opacity:0;transform:translateY(30px);transition:opacity .82s var(--ease),transform .82s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv="l"]{transform:translateX(-38px)}
[data-rv="r"]{transform:translateX(38px)}
[data-rv="s"]{transform:scale(.95)}
[data-rv].in{transform:none}

/* Scroll progress */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--orange);width:0;z-index:1003;transition:width .1s linear}

/* Back to top */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:900;
  width:50px;height:50px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s,visibility .35s,transform .35s,background .3s;
}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--orange)}
@media (max-width:760px){.totop{bottom:86px}}

/* Mobile sticky book bar */
.bookbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:950;
  background:var(--ink);border-top:1px solid var(--line);
  padding:11px 14px;gap:10px;
}
.bookbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px;border-radius:var(--r);
  font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}
.bookbar .b1{background:rgba(255,255,255,.09);color:#fff}
.bookbar .b2{background:var(--orange);color:#fff}
@media (max-width:760px){.bookbar{display:flex}body{padding-bottom:72px}}

/* Counter */
.count{font-variant-numeric:tabular-nums}

/* Print */
@media print{
  .nav,.topbar,.drawer,.bookbar,.totop,.cta,.trustbar,.progress,.loader{display:none!important}
  body{color:#000}
  .hero,.phero,.sec.dark,.sec.ink2,.sec.forest,.foot{background:#fff!important;color:#000!important}
}


/* ---------- 25. BRAND TAGLINE ---------- */
.tagline{
  display:block;font-family:var(--display);
  font-size:clamp(1.05rem,1.7vw,1.4rem);letter-spacing:.02em;
  text-transform:none;font-style:italic;font-weight:400;color:var(--txt-inv-2);
}
.tagline .lb{color:var(--orange)}

/* Gradient text + surface helpers */
.grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}


/* Trust / success accents */
.pill-trust{background:var(--ice);color:#1B4F72;border:1px solid #CFE6FA}
.pill-success{background:rgba(46,157,102,.12);color:#1F7A4D;border:1px solid rgba(46,157,102,.30)}
.ccard .ci{background:var(--ice);color:#1B4F72}
.ccard.is-orange .ci{background:rgba(245,106,16,.12);color:var(--orange-hi)}

/* Value strip under the footer */
.values{
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,34px);
  padding:22px var(--gut);background:var(--navy);border-top:1px solid var(--line);
  font-size:.62rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
.values span{display:inline-flex;align-items:center;gap:clamp(14px,3vw,34px)}
.values span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--orange)}
.values span:last-child::after{display:none}


/* ==========================================================================
   26. FOREST GROUND — Apti Gym / performance-and-prevention section
   ========================================================================== */
.sec.forest{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(46,157,102,.30) 0%, transparent 58%),
    linear-gradient(155deg, #0F2E22 0%, #10362A 38%, #0D1B2A 100%);
}
.sec.forest::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(245,106,16,.10) 0%, transparent 42%);
}
.sec.forest > *{position:relative;z-index:2}
.sec.forest h2,.sec.forest h3{color:#fff}
.sec.forest .lede,.sec.forest .dim,.sec.forest p{color:var(--txt-inv-2)}
.sec.forest .checks li{color:var(--txt-inv-2)}
.sec.forest .hl-o{color:var(--orange-lo)}

/* Gym wordmark reversed to white so it reads on the dark ground */
.gym-mark{
  height:clamp(52px,5vw,72px);width:auto;
  filter:brightness(0) invert(1);
  opacity:.96;margin-bottom:30px;
}
.gym-mark.on-light{filter:none}

/* Hairline feature list used inside the forest band */
.forest-feats{display:grid;gap:0;margin-top:38px;border-top:1px solid rgba(255,255,255,.16)}
.forest-feats > div{padding-block:24px;border-bottom:1px solid rgba(255,255,255,.16)}
.forest-feats h3{font-family:var(--body);font-weight:500;font-size:1rem;letter-spacing:.01em;margin-bottom:8px;color:#fff}
.forest-feats p{font-size:.92rem;font-weight:300;line-height:1.72;color:var(--txt-inv-2);max-width:60ch}

/* ==========================================================================
   27. PAGE LOADER
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:4000;
  background:var(--navy);
  display:grid;place-items:center;
  transition:opacity .6s var(--ease),visibility .6s;
}
.loader.done{opacity:0;visibility:hidden}
.loader-in{display:grid;justify-items:center;gap:26px;text-align:center}
.loader img{
  height:clamp(58px,7vw,86px);width:auto;
  animation:loaderBreathe 2.2s var(--ease) infinite;
}
@keyframes loaderBreathe{
  0%,100%{opacity:.55;transform:translateY(0) scale(.985)}
  50%    {opacity:1;  transform:translateY(-4px) scale(1)}
}
.loader-bar{width:132px;height:1px;background:rgba(255,255,255,.18);overflow:hidden}
.loader-bar i{display:block;height:100%;width:40%;background:var(--orange);animation:loaderSweep 1.15s var(--ease-io) infinite}
@keyframes loaderSweep{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}
.loader p{
  font-size:.6rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
/* leaving a page */
body.leaving .loader{opacity:1;visibility:visible;transition-duration:.34s}
@media (prefers-reduced-motion:reduce){
  .loader img{animation:none;opacity:1}
  .loader-bar i{animation:none;width:100%}
}

/* ==========================================================================
   28. 3D DEPTH + INTERACTION
   ========================================================================== */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--ease)}
.tilt.live{transition:transform .12s linear}
.tilt > *{transform:translateZ(0)}
.tilt .lift{transform:translateZ(34px)}
.tilt .lift-sm{transform:translateZ(16px)}

.scene{perspective:1100px;perspective-origin:50% 40%}

/* Layered depth panel — used for the process / stat blocks */
.deck{position:relative;transform-style:preserve-3d}
.deck::before,.deck::after{
  content:"";position:absolute;inset:0;border-radius:3px;
  border:1px solid var(--line-dark);pointer-events:none;
}
.deck::before{transform:translateZ(-38px) translateY(16px) scale(.965);opacity:.5}
.deck::after {transform:translateZ(-76px) translateY(32px) scale(.93);opacity:.25}
.dark .deck::before,.dark .deck::after,.forest .deck::before,.forest .deck::after{border-color:rgba(255,255,255,.16)}

/* Magnetic buttons */
.mag{will-change:transform}

/* Depth parallax on media */
.media img.par{will-change:transform;transform:scale(1.1)}

/* Gentle float for accent marks */
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){
  .float{animation:none}
  .tilt{transform:none!important}
}


/* ==========================================================================
   29. DARK-GROUND SAFETY NET
   One authoritative block so nothing can ever render dark-on-dark again.
   ========================================================================== */
.sec.dark, .sec.ink2, .sec.forest, .hero, .phero, .foot, .drawer, .cta { color: var(--txt-inv); }

.sec.dark  h1,.sec.dark  h2,.sec.dark  h3,.sec.dark  h4,.sec.dark  h5,
.sec.ink2  h1,.sec.ink2  h2,.sec.ink2  h3,.sec.ink2  h4,.sec.ink2  h5,
.sec.forest h1,.sec.forest h2,.sec.forest h3,.sec.forest h4,.sec.forest h5,
.hero h1,.hero h2,.hero h3,
.phero h1,.phero h2,.phero h3,
.cta h1,.cta h2,.cta h3,
.foot h2,.foot h3,.foot h4,
.drawer h2,.drawer h3 { color: #fff; }

.sec.dark  .lede,.sec.dark  .dim,.sec.dark  p,.sec.dark  li,
.sec.ink2  .lede,.sec.ink2  .dim,.sec.ink2  p,.sec.ink2  li,
.sec.forest .lede,.sec.forest .dim,.sec.forest p,.sec.forest li,
.hero .lede,.hero .dim,.hero p,
.phero .lede,.phero .dim,.phero p,
.cta p { color: var(--txt-inv-2); }

.sec.dark  .eyebrow,.sec.ink2 .eyebrow,.sec.forest .eyebrow,
.hero .eyebrow,.phero .eyebrow,.cta .eyebrow { color: rgba(255,255,255,.62); }
.sec.dark  .eyebrow::before,.sec.dark  .eyebrow::after,
.sec.ink2  .eyebrow::before,.sec.ink2  .eyebrow::after,
.sec.forest .eyebrow::before,.sec.forest .eyebrow::after,
.hero .eyebrow::before,.hero .eyebrow::after,
.phero .eyebrow::before,.phero .eyebrow::after { background: var(--orange-lo); }

/* Emphasis on dark grounds reads in soft orange rather than italic-only */
.sec.dark .hl,.sec.ink2 .hl,.sec.forest .hl,.hero .hl,.phero .hl { color: var(--orange-lo); }

/* Cards and tiles sitting on dark grounds */
.sec.dark .card,.sec.ink2 .card,.sec.forest .card{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#fff;
}
.sec.dark .card p,.sec.ink2 .card p,.sec.forest .card p{color:var(--txt-inv-2)}
.sec.dark .card h3,.sec.ink2 .card h3,.sec.forest .card h3{color:#fff}
.sec.dark .card .ico,.sec.ink2 .card .ico,.sec.forest .card .ico{filter:brightness(0) invert(1)}
.sec.dark .card:hover,.sec.ink2 .card:hover,.sec.forest .card:hover{background:rgba(255,255,255,.075)}
.sec.dark .card .num,.sec.ink2 .card .num,.sec.forest .card .num{color:rgba(255,255,255,.10)}

/* Checklists, pills and rules */
.sec.dark .checks li,.sec.ink2 .checks li,.sec.forest .checks li,
.hero .checks li,.phero .checks li{color:var(--txt-inv-2)}
.sec.dark .checks li strong,.sec.ink2 .checks li strong,.sec.forest .checks li strong{color:#fff}
.sec.dark .pills span,.sec.ink2 .pills span,.sec.forest .pills span{color:var(--txt-inv-2);border-color:rgba(255,255,255,.24)}
.sec.dark .rule,.sec.ink2 .rule,.sec.forest .rule{background:rgba(255,255,255,.16)}

/* Accordion on dark */
.sec.dark .acc,.sec.ink2 .acc,.sec.forest .acc{border-color:rgba(255,255,255,.16)}
.sec.dark .acc-item,.sec.ink2 .acc-item,.sec.forest .acc-item{border-color:rgba(255,255,255,.16)}
.sec.dark .acc-q,.sec.ink2 .acc-q,.sec.forest .acc-q{color:#fff}
.sec.dark .acc-q:hover,.sec.ink2 .acc-q:hover,.sec.forest .acc-q:hover,
.sec.dark .acc-item.on .acc-q,.sec.ink2 .acc-item.on .acc-q{color:var(--orange-lo)}
.sec.dark .acc-a p,.sec.ink2 .acc-a p,.sec.forest .acc-a p{color:var(--txt-inv-2)}

/* Process panel and tabs */
.proc-panel .lede,.proc-panel p{color:var(--txt-inv-2)}
.proc-panel li{color:var(--txt-inv-2)}

/* Footer text weights */
.foot p,.foot li,.foot .fline,.foot .fline span{color:var(--txt-inv-2)}
.foot h2{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.foot-bot{color:rgba(255,255,255,.55)}

/* Quote block */
.quotes .quote blockquote{color:rgba(255,255,255,.94)}


/* ==========================================================================
   30. SERVICE TILES — icon + title, detail on hover
   ========================================================================== */
.svc{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);
}
@media (max-width:900px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.svc{grid-template-columns:1fr}}

.svc-item{
  position:relative;display:block;text-align:center;
  border:1px solid var(--line-dark);border-radius:5px;
  padding:clamp(28px,3vw,42px) 22px;background:#fff;outline:none;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),
             transform .45s var(--ease),background .45s var(--ease);
}
.svc-item::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.svc-item:hover,.svc-item:focus-visible{
  border-color:transparent;box-shadow:var(--shadow-lg);transform:translateY(-6px);
}
.svc-item:hover::after,.svc-item:focus-visible::after{transform:scaleX(1)}

.svc-ico{
  width:66px;height:66px;margin:0 auto 20px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--paper-2);
  transition:background .5s var(--ease),transform .55s var(--ease);
}
.svc-ico img{width:34px;height:34px;object-fit:contain;transition:transform .55s var(--ease)}
.svc-item:hover .svc-ico{background:rgba(245,106,16,.12);transform:scale(1.06)}
.svc-item:hover .svc-ico img{transform:scale(1.08)}

.svc-item h3{
  font-family:var(--body);font-weight:600;font-size:1.06rem;line-height:1.34;
  color:var(--txt);letter-spacing:-.005em;
}
.svc-more{
  display:block;margin-top:14px;font-size:.8rem;font-weight:500;
  letter-spacing:.02em;color:var(--graphite);
  opacity:1;transition:opacity .35s;
}
.svc-item:hover .svc-more,.svc-item:focus-visible .svc-more{opacity:0}

/* Detail panel that lifts in over the tile */
.svc-pop{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:14px;
  padding:clamp(22px,2.4vw,32px) 24px;border-radius:5px;
  background:var(--navy);color:#fff;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.svc-item:hover .svc-pop,.svc-item:focus-visible .svc-pop{opacity:1;visibility:visible;transform:translateY(0)}
.svc-pop strong{
  display:block;font-family:var(--body);font-weight:600;font-size:.98rem;
  line-height:1.34;color:#fff;
}
.svc-pop p{font-size:.86rem;font-weight:300;line-height:1.66;color:rgba(255,255,255,.78)}
.svc-pop span{
  display:inline-flex;align-items:center;gap:8px;margin-top:2px;
  font-size:.8rem;font-weight:500;color:var(--orange-lo);
}

/* No hover on touch — show everything inline */
@media (hover:none){
  .svc-pop{position:static;opacity:1;visibility:visible;transform:none;
           background:none;color:inherit;padding:16px 0 0;text-align:center;border-radius:0}
  .svc-pop strong{display:none}
  .svc-pop p{color:var(--txt-2)}
  .svc-pop span{color:var(--orange-hi)}
  .svc-more{display:none}
}


/* ==========================================================================
   31. COMPACT TESTIMONIAL BAND
   ========================================================================== */
.sec.quotes-band{padding-block:clamp(52px,5.5vw,84px)}
.sec.quotes-band .sec-head{margin-bottom:clamp(26px,3vw,40px)}
.sec.quotes-band .quote.on{align-items:center}
.sec.quotes-band .quote cite b{font-size:1.2rem}
.sec.quotes-band .quote cite span{font-size:.78rem}


/* ==========================================================================
   32. AUTOMATED INTERNAL LINKS (SEO engine)
   ========================================================================== */
.ilink{
  color:inherit;text-decoration:underline;
  text-decoration-color:rgba(245,106,16,.55);
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color .3s,color .3s;
}
.ilink:hover{color:var(--orange-hi);text-decoration-color:var(--orange-hi)}
.sec.dark .ilink:hover,.sec.ink2 .ilink:hover,.sec.forest .ilink:hover,
.hero .ilink:hover,.phero .ilink:hover{color:var(--orange-lo);text-decoration-color:var(--orange-lo)}


/* FAR-RIGHT-CTA - push header CTA to the far right */
.nav > .shell{display:flex;align-items:center;}
.nav > .shell > .nav-cta{margin-left:auto;}


/* Hero: Oakville announcement */
.hero .shell p.hero-oakville{margin:26px 0 0;font-family:var(--display);font-size:clamp(21px,2.4vw,30px);font-weight:500;line-height:1.25;letter-spacing:-.02em;color:var(--txt-inv)}
.hero .shell p.hero-oakville .hl{font-style:italic;color:var(--orange-lo)}


/* Team: photo avatar */
.avatar.has-photo{background:var(--charcoal)}
.avatar.has-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;transition:transform .5s var(--ease)}
.avatar.has-photo::after{opacity:.28}
.member:hover .avatar.has-photo::after{opacity:.42}
.member:hover .avatar.has-photo img{transform:scale(1.04)}


/* Contact cards: long email must wrap, never overflow the box */
.ccard{min-width:0;overflow-wrap:anywhere}
.ccard p,.ccard a{min-width:0;overflow-wrap:anywhere;word-break:break-word;hyphens:none}
.ccard a[href^="mailto"]{display:inline-block;max-width:100%}


/* VALD technology cards */
.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(18px,2.2vw,30px)}
.techcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:36px 32px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.techcard:hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 18px 44px rgba(13,27,42,.10)}
.techcard h3{margin:6px 0 2px;font-family:var(--display);font-size:clamp(23px,2.1vw,28px);font-weight:500;color:var(--txt);letter-spacing:-.01em}
.techcard .tech-sub{margin:0 0 16px;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.techcard>p{color:var(--txt-2);line-height:1.7}
.tech-list{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line-dark)}
.tech-list li{position:relative;padding:0 0 10px 26px;color:var(--txt-2);font-size:.95rem;line-height:1.6}
.tech-list li:last-child{padding-bottom:0}
.tech-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--orange)}


/* Stats: number spans nested inside <b> must not inherit the label style */
.stats b > span,
.stats b > .count{display:inline;margin:0;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:none;color:inherit;line-height:inherit}