/* =========================================================
   Expede — Sample C "Editorial Motion"
   Warm editorial canvas · illustrated · parallax · day + night
   ========================================================= */

/* ---------- DAY (default) ---------- */
:root{
  --canvas:#fbf6ee;
  --canvas-2:#f4ece0;
  --paper:#ffffff;
  --ink:#171a2b;
  --ink-2:#3d4560;
  --mute:#6b7590;
  --line:#e6dccd;
  --line-2:#d8ccb8;

  --blue:#1b4de4;
  --blue-2:#5b83ff;
  --blue-soft:#e5ebff;
  --amber:#f2a65a;
  --amber-soft:#fdeedd;
  --sage:#2e9e7b;
  --sage-soft:#e2f4ee;
  --rose:#e2725b;

  --sky-1:#cfe4ff;
  --sky-2:#fbf6ee;
  --sun:#ffd166;
  --sun-glow:rgba(255,209,102,.55);
  --hill-1:#dfe9f8;
  --hill-2:#c9d9f2;
  --tower:#b9cbe9;
  --tower-2:#a4b9dd;
  --window:#ffffff;
  --water:#bcd6f5;

  --shadow-1:0 2px 10px rgba(23,26,43,.06);
  --shadow-2:0 26px 60px -34px rgba(23,26,43,.42);
  --shadow-3:0 40px 90px -46px rgba(27,77,228,.55);

  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:34px;--r-pill:999px;
  --max:1200px;
  --serif:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- NIGHT ---------- */
[data-theme="night"]{
  --canvas:#14110d;
  --canvas-2:#1c1813;
  --paper:#221d17;
  --ink:#f7f1e8;
  --ink-2:#d9cfc1;
  --mute:#9c9081;
  --line:#302921;
  --line-2:#43392e;

  --blue:#7fa0ff;
  --blue-2:#a8bcff;
  --blue-soft:#1e2540;
  --amber:#f2a65a;
  --amber-soft:#33261a;
  --sage:#4fd0a6;
  --sage-soft:#16302a;
  --rose:#ef8b74;

  --sky-1:#1b2340;
  --sky-2:#14110d;
  --sun:#f6efd8;
  --sun-glow:rgba(246,239,216,.35);
  --hill-1:#1b2138;
  --hill-2:#232a45;
  --tower:#2b3350;
  --tower-2:#353e60;
  --window:#ffd98a;
  --water:#1d2740;

  --shadow-1:0 2px 10px rgba(0,0,0,.5);
  --shadow-2:0 30px 70px -34px rgba(0,0,0,.9);
  --shadow-3:0 40px 90px -46px rgba(127,160,255,.5);
}

/* ---------- NIGHT, CSS only (checkbox driven, no JS needed) ---------- */
:root:has(#theme-toggle:checked){
  --canvas:#14110d;
  --canvas-2:#1c1813;
  --paper:#221d17;
  --ink:#f7f1e8;
  --ink-2:#d9cfc1;
  --mute:#9c9081;
  --line:#302921;
  --line-2:#43392e;

  --blue:#7fa0ff;
  --blue-2:#a8bcff;
  --blue-soft:#1e2540;
  --amber:#f2a65a;
  --amber-soft:#33261a;
  --sage:#4fd0a6;
  --sage-soft:#16302a;
  --rose:#ef8b74;

  --sky-1:#1b2340;
  --sky-2:#14110d;
  --sun:#f6efd8;
  --sun-glow:rgba(246,239,216,.35);
  --hill-1:#1b2138;
  --hill-2:#232a45;
  --tower:#2b3350;
  --tower-2:#353e60;
  --window:#ffd98a;
  --water:#1d2740;

  --shadow-1:0 2px 10px rgba(0,0,0,.5);
  --shadow-2:0 30px 70px -34px rgba(0,0,0,.9);
  --shadow-3:0 40px 90px -46px rgba(127,160,255,.5);
}


*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--canvas)}
body{
  margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .6s ease,color .6s ease;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
.tnum{font-variant-numeric:tabular-nums}

h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-.022em;line-height:1.04}
h1{font-size:clamp(36px,5.2vw,68px)}
h2{font-size:clamp(30px,4.4vw,58px)}
h3{font-size:23px;line-height:1.24}
.script{font-style:italic;color:var(--blue)}

.skip{position:absolute;left:-9999px;background:var(--blue);color:#fff;padding:10px 16px;z-index:300}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:3px;border-radius:8px}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);
  font-size:15.5px;font-weight:560;padding:15px 26px;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,border-color .3s,box-shadow .35s
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--ink);color:var(--canvas);box-shadow:var(--shadow-1)}
.btn-solid:hover{box-shadow:0 16px 34px -16px rgba(23,26,43,.7)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{box-shadow:0 18px 40px -16px var(--blue)}
.btn-out{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-out:hover{border-color:var(--ink);background:var(--paper)}
.btn-lg{padding:17px 32px;font-size:16.5px}
.btn .arw{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arw{transform:translateX(5px)}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:140;background:color-mix(in srgb,var(--canvas) 84%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
.nav.stuck{border-color:var(--line)}
.nav-in{position:relative;display:flex;align-items:center;gap:26px;height:76px;transition:height .35s}
.nav.stuck .nav-in{height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.02em}
.brand .mark{width:34px;height:34px;border-radius:12px 12px 12px 4px;display:grid;place-items:center;color:#fff;
  font-family:var(--sans);font-size:16px;font-weight:700;background:linear-gradient(150deg,var(--blue-2),var(--blue));
  box-shadow:var(--shadow-1);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.brand:hover .mark{transform:rotate(-12deg) scale(1.08)}
.nav-links{display:flex;gap:4px;margin-left:14px;position:relative}
.nav-links a{position:relative;font-size:14.5px;color:var(--ink-2);padding:10px 14px;font-weight:500;
  transition:color .3s}
.nav-links a:hover,.nav-links a.hot{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--blue)}
.nav-ul{position:absolute;left:0;bottom:6px;height:3px;width:0;border-radius:3px;opacity:0;
  background:linear-gradient(90deg,var(--blue),var(--amber));
  transition:transform .48s cubic-bezier(.22,.9,.24,1),width .48s cubic-bezier(.22,.9,.24,1),opacity .3s}
.nav-ul.show{opacity:1}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px}

/* theme switch: a real checkbox, styled with CSS, so it never depends on scripting */
#theme-toggle{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0}
#theme-toggle:focus-visible + .theme{outline:3px solid var(--blue-2);outline-offset:4px}
.theme{position:relative;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 12px 0 14px;
  border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:var(--canvas-2);color:var(--ink);
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;flex:0 0 auto;
  transition:background .45s ease,border-color .45s ease,box-shadow .35s ease,transform .18s ease}
.theme:hover{border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(27,77,228,.10)}
.theme:active{transform:scale(.96)}
.theme > *,.theme .switch > *{pointer-events:none}
.theme-lbl{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--mute);min-width:32px;text-align:left;
  transition:color .4s}
.theme:hover .theme-lbl{color:var(--ink)}
.theme-lbl .on-night{display:none}
:root:has(#theme-toggle:checked) .theme-lbl .on-day{display:none}
:root:has(#theme-toggle:checked) .theme-lbl .on-night{display:inline}
.theme .switch{position:relative;width:58px;height:29px;flex:0 0 58px;border-radius:var(--r-pill);overflow:hidden;
  background:rgba(242,166,90,.26);box-shadow:inset 0 1px 3px rgba(120,80,10,.20);transition:background .45s}
:root:has(#theme-toggle:checked) .theme .switch{background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.theme .track{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 7px}
.theme .ic{width:14px;height:14px;transition:opacity .45s,transform .55s cubic-bezier(.4,1.4,.4,1)}
.theme .ic.sun{color:#e08a1e;opacity:.95}
.theme .ic.moon{color:#8c93a8;opacity:.35;transform:scale(.82) rotate(20deg)}
:root:has(#theme-toggle:checked) .theme .ic.sun{opacity:.35;transform:scale(.82) rotate(-40deg)}
:root:has(#theme-toggle:checked) .theme .ic.moon{color:#cfd8ff;opacity:.95;transform:none}
.theme .knob{position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;
  background:linear-gradient(150deg,#ffe9a8,#f5a623);box-shadow:0 3px 12px rgba(245,166,35,.65);
  transition:transform .55s cubic-bezier(.45,1.5,.4,1),background .5s,box-shadow .5s}
:root:has(#theme-toggle:checked) .theme .knob{transform:translateX(29px) rotate(180deg);
  background:linear-gradient(150deg,#e9edff,#93a6e8);box-shadow:0 3px 12px rgba(147,166,232,.5)}

.burger{display:none;background:none;border:1.5px solid var(--line-2);border-radius:10px;padding:9px 11px;cursor:pointer}
@media(max-width:1020px){.nav-links{display:none}.burger{display:block}}

/* ---------------- parallax primitives ---------------- */
.px{will-change:transform}
.blob{position:absolute;border-radius:46% 54% 60% 40%/50% 42% 58% 50%;filter:blur(2px);opacity:.5;
  animation:morph 18s ease-in-out infinite}
@keyframes morph{
  0%,100%{border-radius:46% 54% 60% 40%/50% 42% 58% 50%;transform:rotate(0deg)}
  50%{border-radius:60% 40% 38% 62%/42% 60% 40% 58%;transform:rotate(8deg)}
}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;padding:80px 0 150px;min-height:92vh}
.scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene .sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-1),var(--sky-2) 68%);
  transition:background .8s ease}
.sun{position:absolute;left:50%;top:12%;width:190px;height:190px;margin-left:-95px;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,var(--sun),transparent 68%);
  box-shadow:0 0 120px 40px var(--sun-glow);transition:background .8s,box-shadow .8s;
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.cloud{position:absolute;background:#fff;border-radius:var(--r-pill);opacity:.85;filter:blur(.4px)}
[data-theme="night"] .cloud{opacity:.06}
:root:has(#theme-toggle:checked) .cloud{opacity:.06}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.c1{width:150px;height:26px;left:8%;top:20%;animation:float1 26s ease-in-out infinite}
.c1::before{width:70px;height:70px;left:24px;top:-34px}
.c1::after{width:48px;height:48px;left:78px;top:-24px}
.c2{width:110px;height:20px;right:12%;top:28%;animation:float2 32s ease-in-out infinite}
.c2::before{width:54px;height:54px;left:18px;top:-26px}
.c2::after{width:38px;height:38px;left:58px;top:-18px}
@keyframes float1{0%,100%{transform:translateX(0)}50%{transform:translateX(60px)}}
@keyframes float2{0%,100%{transform:translateX(0)}50%{transform:translateX(-70px)}}
.starfield{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
[data-theme="night"] .starfield{opacity:1}
:root:has(#theme-toggle:checked) .starfield{opacity:1}
.starfield i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff3d6;
  animation:tw 4.5s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.9}}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%}
.hero-in{position:relative;z-index:3;text-align:center;padding-bottom:40px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r-pill);padding:8px 18px 8px 10px;box-shadow:var(--shadow-1)}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 4px var(--sage-soft)}
.hero h1{margin:24px auto 26px;max-width:17ch}
.hero h1 .word{display:inline-block;opacity:0;transform:translateY(28px) rotate(2deg);
  animation:pop .8s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.underline{position:relative;display:inline-block;white-space:nowrap}
.underline svg{position:absolute;left:-4%;bottom:-16px;width:108%;height:20px;overflow:visible}
.underline path{fill:none;stroke:var(--amber);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .lede{max-width:620px;margin:26px auto 0;color:var(--ink-2);font-size:19px;opacity:0;
  animation:pop .9s .8s cubic-bezier(.2,.9,.25,1) forwards}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap;opacity:0;
  animation:pop .9s .95s cubic-bezier(.2,.9,.25,1) forwards}
.mini{font-size:13.5px;color:var(--mute);margin-top:16px;opacity:0;animation:pop .9s 1.1s forwards}

/* floating paper cards in the hero */
.floaters{position:absolute;inset:0;z-index:2;pointer-events:none}
.paper{position:absolute;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;box-shadow:var(--shadow-2);width:212px;transition:background .6s,border-color .6s}
.paper .ttl{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.paper .sub{font-size:12px;color:var(--mute);margin-top:5px}
.paper .tick{width:18px;height:18px;border-radius:50%;background:var(--sage-soft);color:var(--sage);display:grid;
  place-items:center;font-size:10px;font-weight:700}
.paper .stamp{width:18px;height:18px;border-radius:50%;background:var(--amber-soft);color:var(--amber);display:grid;
  place-items:center;font-size:10px;font-weight:700}
.p1{left:5%;top:34%;animation:bob 7s ease-in-out infinite}
.p2{right:5%;top:28%;animation:bob 8.5s ease-in-out infinite reverse}
.p3{left:11%;bottom:20%;animation:bob 9.5s ease-in-out infinite}
.p4{right:9%;bottom:24%;animation:bob 7.8s ease-in-out infinite reverse}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-18px) rotate(1.5deg)}}
@media(max-width:1180px){.p1,.p2,.p3,.p4{display:none}}

/* ---------------- marquee ---------------- */
.marquee{border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);background:var(--canvas-2);
  overflow:hidden;padding:20px 0;transition:background .6s,border-color .6s}
.mq-row{display:flex;width:max-content;animation:mq 34s linear infinite}
.marquee:hover .mq-row{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-row span{font-family:var(--serif);font-size:26px;font-style:italic;color:var(--ink-2);padding:0 34px;
  display:flex;align-items:center;gap:34px;white-space:nowrap}
.mq-row span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);display:block}

/* ---------------- accreditation wall ---------------- */
.cred{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;position:relative;z-index:2}
@media(max-width:1000px){.cred{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cred{grid-template-columns:repeat(2,1fr)}}
.cred-cell{background:var(--paper);padding:26px 16px 20px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;min-height:136px;transition:background .4s ease}
.cred-cell:hover{background:var(--blue-soft)}
.cred-cell img{height:42px;width:auto;max-width:118px;object-fit:contain;
  transition:opacity .4s,filter .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
[data-theme="night"] .cred-cell img{background:#fff;border-radius:8px;padding:5px 8px}
:root:has(#theme-toggle:checked) .cred-cell img{background:#fff;border-radius:8px;padding:5px 8px}
.cred:hover .cred-cell img{opacity:.35;filter:saturate(.4)}
.cred:hover .cred-cell:hover img{opacity:1;filter:none;transform:scale(1.08)}
.cred-cell .fallback{display:none;font-weight:700;font-size:15px;color:var(--ink-2)}
.cred-cell .cap{font-size:11.5px;line-height:1.35;text-align:center;color:var(--mute);max-width:15ch;
  transition:opacity .35s}
.cred:hover .cred-cell .cap{opacity:.45}
.cred:hover .cred-cell:hover .cap{opacity:1}

/* ---------------- sections ---------------- */
.sec{position:relative;padding:120px 0;overflow:hidden}
.sec.alt{background:var(--canvas-2);transition:background .6s}
.sec.dark{background:var(--ink);color:var(--canvas)}
[data-theme="night"] .sec.dark{background:#0d0b08}
:root:has(#theme-toggle:checked) .sec.dark{background:#0d0b08}
.sec.dark h2,.sec.dark h3{color:var(--canvas)}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);font-weight:700}
.head{max-width:720px;margin-bottom:56px;position:relative;z-index:2}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head h2{margin:16px 0 16px}
.head p{color:var(--ink-2);font-size:18.5px}
.sec.dark .head p{color:#bdb5a8}

.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.16,.84,.24,1),transform .9s cubic-bezier(.16,.84,.24,1)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-40px);transition:opacity 1s cubic-bezier(.16,.84,.24,1),transform 1s cubic-bezier(.16,.84,.24,1)}
.rv-r{opacity:0;transform:translateX(40px);transition:opacity 1s cubic-bezier(.16,.84,.24,1),transform 1s cubic-bezier(.16,.84,.24,1)}
.rv-l.in,.rv-r.in{opacity:1;transform:none}

/* ---------------- pillar cards ---------------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:2}
@media(max-width:980px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:32px;
  position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s,background .6s}
.pillar:hover{transform:translateY(-10px) rotate(-.6deg);box-shadow:var(--shadow-2);border-color:var(--blue-2)}
.pillar .art{height:130px;margin:-8px 0 20px;position:relative}
.pillar h3{font-size:25px;margin-bottom:10px}
.pillar p{color:var(--ink-2);font-size:15.5px}
.pillar ul{list-style:none;margin:20px 0 0;padding:0}
.pillar li{font-size:14.5px;color:var(--ink-2);padding:9px 0 9px 26px;position:relative;border-top:1px solid var(--line)}
.pillar li:first-child{border-top:none}
.pillar li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:10px;border-radius:3px;
  background:var(--amber);transform:rotate(45deg)}
.pillar .go{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:var(--blue);font-weight:600;font-size:14.5px}
.pillar:hover .go .arw{transform:translateX(5px)}

/* drawn icon animations */
.dw{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
.in .dw,.pillar:hover .dw{stroke-dashoffset:0}
.dw.amber{stroke:var(--amber)}
.dw.sage{stroke:var(--sage)}
.fillfade{opacity:0;transition:opacity .8s ease .6s}
.in .fillfade{opacity:1}

/* ---------------- flight path timeline ---------------- */
.flight{position:relative;padding:40px 0 0}
.flight svg.path{width:100%;height:250px;overflow:visible}
.flight .track{fill:none;stroke:var(--line-2);stroke-width:3;stroke-dasharray:10 10}
.flight .prog{fill:none;stroke:var(--blue);stroke-width:3.4;stroke-linecap:round}
.plane{transition:none}
.stops{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:22px}
@media(max-width:900px){.stops{grid-template-columns:1fr 1fr}.flight svg.path{height:160px}}
.stop{text-align:center;padding:0 8px;opacity:.38;transition:opacity .5s ease,transform .5s ease}
.stop.on{opacity:1;transform:translateY(-4px)}
.stop .n{width:44px;height:44px;border-radius:14px;margin:0 auto 14px;display:grid;place-items:center;
  font-weight:700;background:var(--paper);border:1.5px solid var(--line);transition:all .5s}
.stop.on .n{background:var(--blue);color:#fff;border-color:var(--blue);transform:rotate(-8deg) scale(1.06)}
.stop h3{font-size:19px;margin-bottom:6px}
.stop p{font-size:14.5px;color:var(--ink-2)}
.stop .when{font-size:12.5px;color:var(--amber);font-weight:700;margin-top:8px;letter-spacing:.03em}

/* ---------------- split ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:2}
@media(max-width:980px){.split{grid-template-columns:1fr;gap:36px}}
.flist{list-style:none;margin:28px 0 0;padding:0}
.flist li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.flist li:first-child{border-top:none}
.flist .num{font-family:var(--serif);font-size:20px;color:var(--amber);font-weight:600;line-height:1.2}
.flist b{display:block;font-size:16.5px;margin-bottom:3px}
.flist span.d{display:block;font-size:14.5px;color:var(--ink-2)}

/* dashboard-ish card */
.card{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-2);transition:background .6s,border-color .6s}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1.5px solid var(--line)}
.card-h b{font-size:15px}
.card-h span{font-size:12.5px;color:var(--mute)}
.card-b{padding:10px 22px 20px}
.row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.row:last-child{border-bottom:none}
.row .dot{width:10px;height:10px;border-radius:50%;background:var(--sage);flex:0 0 10px}
.row .dot.a{background:var(--amber)}
.row .t{flex:1}
.row .d{font-size:13px;color:var(--mute)}
.tag{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill)}
.tag.g{background:var(--sage-soft);color:var(--sage)}
.tag.a{background:var(--amber-soft);color:#a8621c}
[data-theme="night"] .tag.a{color:var(--amber)}
:root:has(#theme-toggle:checked) .tag.a{color:var(--amber)}
.tag.b{background:var(--blue-soft);color:var(--blue)}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:2}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center}
.stat .n{font-family:var(--serif);font-size:clamp(40px,5.4vw,68px);font-weight:600;letter-spacing:-.03em;
  color:var(--canvas)}
.stat .n em{font-style:italic;color:var(--amber)}
.stat .l{font-size:14.5px;color:#bdb5a8;margin-top:6px}
.spark{height:44px;margin-top:14px}
.spark path{fill:none;stroke:var(--amber);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.8s ease .3s}
.in .spark path{stroke-dashoffset:0}

/* ---------------- quotes ---------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:2}
@media(max-width:980px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:30px;position:relative;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .6s}
.quote:hover{transform:translateY(-8px) rotate(.5deg);box-shadow:var(--shadow-2)}
.quote::before{content:"\201C";position:absolute;right:22px;top:2px;font-family:var(--serif);font-size:86px;
  color:var(--line-2);line-height:1}
.quote p{font-size:16px;color:var(--ink-2);position:relative}
.stars{color:var(--amber);letter-spacing:3px;font-size:14px;margin-bottom:14px}
.who{display:flex;align-items:center;gap:13px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.av{width:42px;height:42px;border-radius:14px 14px 14px 4px;display:grid;place-items:center;font-weight:700;color:#fff;
  background:linear-gradient(150deg,var(--amber),var(--rose))}
.who b{display:block;font-size:14.5px}
.who span{font-size:12.5px;color:var(--mute)}

/* ---------------- comparison ---------------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative;z-index:2}
@media(max-width:880px){.cols{grid-template-columns:1fr}}
.col{border-radius:var(--r-lg);padding:32px;border:1.5px solid var(--line);background:var(--paper);transition:background .6s}
.col.dim{background:var(--canvas-2)}
.col h3{margin-bottom:18px;font-size:21px}
.col ul{list-style:none;margin:0;padding:0}
.col li{font-size:15px;padding:12px 0 12px 30px;position:relative;border-top:1px solid var(--line);color:var(--ink-2)}
.col li:first-child{border-top:none}
.col li::before{position:absolute;left:0;top:12px;font-weight:700}
.col.dim li::before{content:"✕";color:var(--line-2)}
.col.good li::before{content:"✓";color:var(--sage)}
.col.good{box-shadow:var(--shadow-2)}

/* ---------------- pricing ---------------- */
.toggle{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--line-2);border-radius:var(--r-pill);
  padding:5px;position:relative;background:var(--paper)}
.toggle button{border:none;background:none;font:inherit;font-family:var(--sans);font-size:14.5px;font-weight:560;
  padding:10px 22px;border-radius:var(--r-pill);cursor:pointer;color:var(--mute);position:relative;z-index:1;transition:color .3s}
.toggle button.on{color:#fff}
.toggle .knob2{position:absolute;top:5px;left:5px;height:calc(100% - 10px);border-radius:var(--r-pill);
  background:linear-gradient(120deg,var(--blue),var(--blue-2));box-shadow:0 10px 24px -12px var(--blue);
  transition:transform .5s cubic-bezier(.3,1.3,.4,1),width .5s cubic-bezier(.3,1.3,.4,1)}
.save{font-size:12px;color:var(--sage);margin-left:8px;font-weight:700}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;margin-top:52px;position:relative;z-index:2}
@media(max-width:980px){.plans{grid-template-columns:1fr}}
.plan{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:32px;position:relative;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .6s}
.plan:hover{transform:translateY(-8px)}
.plan.feat{border-color:var(--blue);box-shadow:var(--shadow-3)}
.plan .flag{position:absolute;top:-14px;left:32px;background:linear-gradient(120deg,var(--blue),var(--blue-2));color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 15px;border-radius:var(--r-pill)}
.plan h3{font-size:22px;margin-bottom:8px}
.plan .sub{font-size:14.5px;color:var(--ink-2);min-height:46px}
.price-from{margin:18px 0 -12px;font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.price{display:flex;align-items:baseline;gap:7px;margin:18px 0 4px;font-family:var(--serif)}
.price .cur{font-size:21px;color:var(--mute)}
.price .num{font-size:52px;font-weight:600;letter-spacing:-.03em}
.price small{font-family:var(--sans);font-size:14px;color:var(--mute)}
.plan .btn{width:100%;margin:22px 0 20px}
.plan ul{list-style:none;margin:0;padding:0}
.plan li{font-size:14.5px;color:var(--ink-2);padding:10px 0 10px 28px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--sage);font-weight:700}
.note{font-size:13.5px;color:var(--mute);text-align:center;margin-top:28px}

/* table */
.tblwrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--paper);position:relative;z-index:2}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:660px}
.tbl th,.tbl td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--canvas-2);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.tbl td.c{text-align:center}
.tbl .yes{color:var(--sage);font-weight:700}
.tbl .no{color:var(--line-2)}
.tbl tbody tr{transition:background .25s}
.tbl tbody tr:hover{background:var(--blue-soft)}

/* faq */
.faq{max-width:840px;margin:0 auto;position:relative;z-index:2}
.q{border-bottom:1.5px solid var(--line)}
.q button{width:100%;text-align:left;background:none;border:none;font-family:var(--serif);font-size:21px;font-weight:600;
  color:var(--ink);padding:26px 56px 26px 22px;cursor:pointer;position:relative;transition:color .3s}
.q button:hover{color:var(--blue)}
.q button::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-family:var(--sans);
  font-size:26px;font-weight:300;color:var(--amber);transition:transform .4s cubic-bezier(.3,1.3,.4,1)}
.q.open button::after{transform:translateY(-50%) rotate(135deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.8,.2,1)}
.q .a p{padding:0 22px 26px 22px;color:var(--ink-2);font-size:16px}

/* cta */
.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:74px 40px;text-align:center;
  background:linear-gradient(140deg,var(--blue),var(--blue-2));color:#fff;box-shadow:var(--shadow-3)}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.86);max-width:540px;margin:16px auto 32px;font-size:18px}
.cta .btn-white{background:#fff;color:var(--blue)}
.cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cta .rings{position:absolute;inset:0;pointer-events:none;opacity:.35}
.cta .rings span{position:absolute;border:1.5px solid rgba(255,255,255,.5);border-radius:50%;
  animation:pulse 6s ease-out infinite}
.cta .rings span:nth-child(2){animation-delay:2s}
.cta .rings span:nth-child(3){animation-delay:4s}
@keyframes pulse{0%{width:120px;height:120px;left:50%;top:50%;margin:-60px 0 0 -60px;opacity:.7}
  100%{width:900px;height:900px;left:50%;top:50%;margin:-450px 0 0 -450px;opacity:0}}

/* page header */
.phead{position:relative;overflow:hidden;padding:70px 0 80px;border-bottom:1.5px solid var(--line)}
.phead .scene{opacity:.9}
.crumb{font-size:13.5px;color:var(--mute);margin-bottom:18px}
.crumb a:hover{color:var(--blue)}
.phead h1{font-size:clamp(36px,5vw,68px);max-width:17ch}
.phead p{color:var(--ink-2);font-size:19px;max-width:640px;margin-top:20px}

/* footer */
footer.ft{background:var(--canvas-2);border-top:1.5px solid var(--line);padding:80px 0 36px;transition:background .6s}
.ft-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:34px}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
.ft h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:16px;font-weight:700}
.ft a{display:block;font-size:14.5px;color:var(--ink-2);padding:6px 0;transition:color .25s,transform .25s}
.ft a:hover{color:var(--blue);transform:translateX(3px)}
.ft .about{color:var(--mute);font-size:14.5px;max-width:300px;margin-top:16px}
.ft-bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:50px;padding-top:24px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}

/* ---------------- WhatsApp launcher ---------------- */
.wa{
  position:fixed;right:24px;bottom:24px;z-index:200;
  width:62px;height:62px;              /* only as big as the button */
  pointer-events:none;                 /* the wrapper must never swallow clicks */
}
.wa-btn,.wa.open .wa-panel,.wa.open .wa-panel *{pointer-events:auto}
.wa-panel{
  position:absolute;right:0;bottom:78px;width:320px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-2);transform-origin:bottom right;
  opacity:0;transform:translateY(16px) scale(.94);
  visibility:hidden;pointer-events:none;
  transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s
}
.wa.open .wa-panel{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.wa-head{background:#075e54;color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px}
.wa-head .ava{width:38px;height:38px;border-radius:50%;background:#25d366;display:grid;place-items:center;font-weight:700;color:#0b3d36}
.wa-head .meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.wa-head b{font-size:15px;display:block;line-height:1.2}
.wa-head .meta span{font-size:12px;opacity:.85;display:flex;align-items:center;gap:6px}
.wa-head .meta span::before{content:"";width:7px;height:7px;border-radius:50%;background:#8ef0b0;display:block;flex:0 0 7px}
.wa-body{padding:16px 18px 6px;background:var(--canvas-2)}
.wa-bubble{background:var(--paper);border-radius:4px 16px 16px 16px;padding:12px 14px;font-size:14px;color:var(--ink-2);
  box-shadow:var(--shadow-1);max-width:92%;
  opacity:0;transform:translateY(8px);animation:bub .45s .1s forwards}
@keyframes bub{to{opacity:1;transform:none}}
.wa-opts{padding:14px 18px 18px;background:var(--canvas-2);display:flex;flex-direction:column;gap:9px}
.wa-opt{text-align:left;font:inherit;font-size:13.5px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:10px 15px;cursor:pointer;color:var(--ink);
  transition:border-color .25s,transform .25s,background .25s}
.wa-opt:hover{border-color:#25d366;transform:translateX(3px);background:var(--paper)}
.wa-foot{padding:0 18px 18px;background:var(--canvas-2)}
.wa-foot .btn{width:100%;background:#25d366;color:#04231c;border:none}
.wa-btn{
  width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;background:#25d366;position:relative;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.75);display:grid;place-items:center;
  transition:transform .35s cubic-bezier(.3,1.4,.4,1)
}
.wa-btn:hover{transform:scale(1.07)}
.wa.open .wa-btn{transform:rotate(90deg) scale(1.02)}
.wa-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;
  animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
.wa-nudge{
  position:absolute;right:74px;bottom:14px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:10px 16px;font-size:13.5px;
  box-shadow:var(--shadow-2);white-space:nowrap;opacity:0;transform:translateX(14px);pointer-events:none;
  transition:opacity .4s,transform .4s
}
.wa-nudge.show{opacity:1;transform:none}
.wa.open .wa-nudge{opacity:0}
@media(max-width:520px){.wa-panel{width:min(86vw,320px)}.wa{right:16px;bottom:16px}}
@media(max-height:820px){.wa-panel{max-height:calc(100vh - 190px);overflow-y:auto}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv,.rv-l,.rv-r{opacity:1;transform:none}
  .hero h1 .word,.hero .lede,.hero-cta,.mini{opacity:1;transform:none}
  .px{transform:none !important}
}

/* =====================================================================
   Site build additions: logo, dropdown, mobile menu, animated lists,
   numbered steps, breadcrumbs, articles, forms, tables
   ===================================================================== */

/* ---------- animated wordmark + X mark ---------- */
.brand .mark{position:relative;width:38px;height:38px;border-radius:12px;overflow:hidden;background:none;box-shadow:none;
  display:grid;place-items:center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.brand .mark img{width:38px;height:38px;display:block;border-radius:12px}
.brand .mark::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
  background:linear-gradient(120deg,transparent 34%,rgba(255,255,255,.6) 50%,transparent 66%);
  background-size:260% 100%;animation:markShine 6.5s linear infinite}
@keyframes markShine{to{background-position:260% 0}}
.brand:hover .mark{transform:rotate(-10deg) scale(1.08)}
.brand .word{
  background:linear-gradient(100deg,var(--blue) 0%,#7b3fe4 20%,var(--sage) 40%,var(--blue-2) 52%,var(--blue) 70%,#12b39b 88%,var(--blue) 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wordShine 7s linear infinite;filter:drop-shadow(0 2px 10px rgba(27,77,228,.20))}
:root:has(#theme-toggle:checked) .brand .word{filter:drop-shadow(0 2px 14px rgba(127,160,255,.35))}
@keyframes wordShine{to{background-position:280% 0}}
.brand:hover .word{animation-duration:1.7s}

/* ---------- services dropdown ---------- */
.has-drop{position:relative}
.drop-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:none;font:inherit;font-family:var(--sans);
  font-size:14.5px;font-weight:500;color:var(--ink-2);padding:10px 14px;cursor:pointer;border-radius:10px;
  transition:color .3s}
.drop-btn:hover,.has-drop.open .drop-btn{color:var(--ink)}
.drop-btn .caret{transition:transform .35s cubic-bezier(.3,1.3,.4,1)}
.has-drop.open .drop-btn .caret{transform:rotate(180deg)}
.drop{position:absolute;left:-10px;top:calc(100% + 12px);width:380px;max-width:calc(100vw - 32px);background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top left;
  transition:opacity .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;z-index:20}
.has-drop.open .drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.drop a{display:flex;gap:13px;align-items:flex-start;padding:12px 13px;border-radius:12px;font-size:14px;
  transition:background .25s ease,transform .25s ease}
.drop a:hover{background:var(--blue-soft);transform:translateX(3px)}
.drop .di{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--blue-soft);
  color:var(--blue)}
.drop .di svg{width:18px;height:18px}
.drop b{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px}
.drop small{display:block;font-size:12.5px;color:var(--mute);line-height:1.45}

/* ---------- mega menu: a section heading over a grid of items ----------
   Modelled on the structure the client picked as the reference: one heading
   spanning the section, with its items tiling across two columns underneath,
   rather than a heading sitting on top of each narrow column. A panel can
   hold several sections stacked down the page (Corporate Secretary has
   "Stay Compliant" and "Tools"; Packages has two).

   .drop-mega is set in PHP by harbour_mega_parents(), not by a :has()
   selector, because start_lvl() only receives the depth and cannot see
   whether the children it is opening contain sections. */
.drop-mega{width:auto;max-width:min(680px,calc(100vw - 32px));padding:14px 12px}
.dsec+.dsec{margin-top:6px;padding-top:12px;border-top:1.5px solid var(--line)}
.dhead{display:block;padding:4px 13px 10px;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute)}
/* Items run down the left column before the right. --rows is set by the walker
   from the section's item count, so three items or fewer stay in one column. */
.dgrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,3),auto);
  grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;align-items:start}
.drop-mega a{padding:10px 13px}
@media(max-width:1180px){
  /* The desktop panel is never shown below this width, but if a very narrow
     desktop window does reach it, fall back to a single column. */
  .drop-mega{max-width:calc(100vw - 32px)}
  .dgrid{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr}
}

/* ---------- mega menu with a right-hand column ----------
   Wide card: heading + two column grid on the left, a "Related Guides" style
   column on the right (a menu heading ticked "Show in the right-hand column"
   in Appearance > Menus). The walker adds .drop-aside only when that column
   exists, so a mega menu without one keeps the narrower panel above.

   position:fixed resolves against .nav, not the viewport, because .nav has a
   backdrop-filter and that makes it the containing block. So left/right:0 plus
   auto margins centres the card under the header at the site's content width
   (1200px container less its 26px gutters), whichever menu button opened it.

   Selectors are prefixed .nav-links on purpose. .nav-links a (padding, colour,
   hover) and .drop a:hover (background, nudge) would otherwise win over these
   simple class selectors, most visibly turning the button pale on hover. */
.nav-links .drop{white-space:normal}
.nav-links .drop-mega .dgrid a{padding:10px 13px}

.drop.drop-aside{position:fixed;left:0;right:0;margin-inline:auto;top:calc(100% + 6px);
  width:min(1148px,calc(100vw - 32px));max-width:none;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;transform-origin:top center}
/* keeps the pointer inside the menu while it crosses the gap under the header */
.drop-aside::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.drop-aside .dmain{padding:20px 18px 18px}
.drop-aside .dside{display:flex;flex-direction:column;gap:2px;padding:22px 24px 24px;background:var(--canvas-2);
  border-left:1.5px solid var(--line);border-radius:0 calc(var(--r-lg) - 1.5px) calc(var(--r-lg) - 1.5px) 0}
.drop-aside .dside .dhead{padding:0 12px 10px}
.drop-aside .dguides{display:flex;flex-direction:column;gap:2px}
.nav-links .drop-aside .dguide{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;
  font-size:14px;font-weight:500;line-height:1.4;color:var(--ink)}
.nav-links .drop-aside .dguide:hover{background:var(--paper);transform:translateX(3px)}
.dguide .dg-ic{flex:0 0 18px;height:18px;margin-top:1px;color:var(--blue)}
.dguide .dg-ic svg{width:18px;height:18px;display:block}
.nav-links .drop-aside .dcta,
.nav-links .drop-aside .dcta:hover{margin-top:16px;padding:13px 22px;font-size:14.5px;color:#fff;background:var(--blue);
  border-radius:var(--r-pill);transform:none}
.nav-links .drop-aside .dcta:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px var(--blue)}
@media(max-width:1180px){
  .drop.drop-aside{grid-template-columns:1fr}
  .drop-aside .dside{border-left:0;border-top:1.5px solid var(--line);border-radius:0 0 calc(var(--r-lg) - 1.5px) calc(var(--r-lg) - 1.5px)}
}

/* ---------- mobile menu ---------- */
.burger{display:none;flex-direction:column;gap:4px;justify-content:center;align-items:center;width:42px;height:42px;
  background:none;border:1.5px solid var(--line-2);border-radius:12px;cursor:pointer;padding:0}
.burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .35s cubic-bezier(.3,1.3,.4,1),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile{display:none;flex-direction:column;padding:14px 26px 22px;border-top:1.5px solid var(--line);
  background:var(--canvas)}
.mobile a{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--line);transition:color .25s,padding .25s}
.mobile a:last-child{border-bottom:none}
.mobile a:hover{color:var(--blue);padding-left:10px}
.mobile[hidden]{display:none}
@media(max-width:1120px){
  .nav-links{display:none}
  .burger{display:flex}
  .mobile.show{display:flex}
}

/* ---------- animated bullet lists + hover highlight ---------- */
.b-item{opacity:0;transform:translateX(-16px);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1),
             background .3s ease,padding .3s ease,color .3s ease,box-shadow .3s ease}
.b-item.in{opacity:1;transform:none}
.ticks{list-style:none;margin:24px 0 0;padding:0}
.ticks li{position:relative;padding:13px 14px 13px 44px;border-radius:12px;font-size:15.5px;color:var(--ink-2);
  border-bottom:1px solid var(--line)}
.ticks li:last-child{border-bottom:none}
.ticks li::before{content:"";position:absolute;left:12px;top:19px;width:16px;height:16px;border-radius:50%;
  background:var(--sage-soft);box-shadow:inset 0 0 0 1.5px var(--sage);transition:transform .3s ease,box-shadow .3s ease}
.ticks li::after{content:"";position:absolute;left:17px;top:24px;width:5px;height:8px;border-right:2px solid var(--sage);
  border-bottom:2px solid var(--sage);transform:rotate(40deg);transition:transform .3s ease}
.ticks li:hover{background:var(--sage-soft);color:var(--ink);padding-left:50px;box-shadow:var(--shadow-1)}
.ticks li:hover::before{transform:scale(1.15);box-shadow:inset 0 0 0 2px var(--sage),0 0 14px rgba(46,158,123,.5)}
.ticks li:hover::after{transform:rotate(40deg) scale(1.12)}
.ticks li b{color:var(--ink);font-weight:600}

.dots{list-style:none;margin:22px 0 0;padding:0}
.dots li{position:relative;padding:12px 14px 12px 34px;border-radius:12px;font-size:15.5px;color:var(--ink-2);
  transition:background .3s ease,padding .3s ease,color .3s ease}
.dots li::before{content:"";position:absolute;left:12px;top:21px;width:8px;height:8px;border-radius:2px;
  background:var(--amber);transform:rotate(45deg);transition:transform .3s ease,box-shadow .3s ease}
.dots li:hover{background:var(--amber-soft);color:var(--ink);padding-left:40px}
.dots li:hover::before{transform:rotate(135deg) scale(1.25);box-shadow:0 0 14px rgba(242,166,90,.7)}

/* ---------- numbered steps that count in ---------- */
.steps{list-style:none;margin:34px 0 0;padding:0;counter-reset:step}
.steps li{position:relative;padding:22px 22px 22px 78px;border-radius:var(--r-lg);border:1.5px solid transparent;
  transition:background .35s ease,border-color .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.steps li .num{position:absolute;left:20px;top:20px;width:44px;height:44px;border-radius:14px;display:grid;
  place-items:center;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--blue);
  background:var(--blue-soft);box-shadow:inset 0 0 0 1.5px rgba(27,77,228,.18);
  transition:transform .45s cubic-bezier(.3,1.4,.4,1),background .35s ease,color .35s ease,box-shadow .35s ease}
.steps li h3{font-size:19px;margin-bottom:6px}
.steps li p{color:var(--ink-2);font-size:15px}
.steps li .when{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--amber);
  letter-spacing:.03em}
.steps li:hover{background:var(--paper);border-color:var(--line);transform:translateX(6px);box-shadow:var(--shadow-2)}
.steps li:hover .num{transform:rotate(-8deg) scale(1.1);background:var(--blue);color:#fff;
  box-shadow:0 10px 24px -10px var(--blue)}

/* ---------- stat row that counts up ---------- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
@media(max-width:900px){.figures{grid-template-columns:repeat(2,1fr)}}
.figure{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;
  text-align:center;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease}
.figure:hover{transform:translateY(-7px);box-shadow:var(--shadow-2);border-color:var(--blue-2)}
.figure .n{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);font-weight:600;letter-spacing:-.03em;
  color:var(--blue);line-height:1}
.figure .l{font-size:14px;color:var(--mute);margin-top:8px}
.figure:hover .n{color:var(--sage)}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:13.5px;color:var(--mute);margin-bottom:18px}
.crumbs a{transition:color .25s}
.crumbs a:hover{color:var(--blue)}
.crumbs span{margin:0 7px;opacity:.5}

/* ---------- article cards ---------- */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:980px){.arts{grid-template-columns:1fr}}
.art{display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.art:hover{transform:translateY(-8px);box-shadow:var(--shadow-2);border-color:var(--blue-2)}
.art .thumb{height:150px;position:relative;overflow:hidden;background:var(--blue-soft)}
.art .thumb svg{width:100%;height:100%;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.art:hover .thumb svg{transform:scale(1.06)}
.art .body{padding:24px;display:flex;flex-direction:column;flex:1}
.art .kind{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:700}
.art h3{font-size:20px;margin:11px 0 9px;line-height:1.26}
.art p{font-size:14.5px;color:var(--ink-2);flex:1}
.art .read{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--blue);font-weight:600;font-size:14px}
.art:hover .read .arw{transform:translateX(5px)}
.art .read .arw{transition:transform .3s}

/* ---------- contact form ---------- */
.form{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-xl);padding:34px;
  box-shadow:var(--shadow-1)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-family:var(--sans);font-size:15px;
  color:var(--ink);background:var(--canvas);border:1.5px solid var(--line-2);border-radius:12px;padding:13px 15px;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(27,77,228,.13);background:var(--paper)}
.field .hint{font-size:12.5px;color:var(--mute);margin-top:6px}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.two-up{grid-template-columns:1fr}}
.form .btn{width:100%;margin-top:8px}

/* ---------- info tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:28px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:var(--blue-2)}
.tile .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--blue-soft);
  color:var(--blue);margin-bottom:18px;transition:transform .4s cubic-bezier(.3,1.3,.4,1),background .3s,color .3s}
.tile:hover .ic{transform:rotate(-8deg) scale(1.08);background:var(--blue);color:#fff}
.tile .ic svg{width:23px;height:23px}
.tile h3{font-size:20px;margin-bottom:9px}
.tile p{font-size:15px;color:var(--ink-2)}

/* ---------- definition rows ---------- */
.defs{border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.def{display:grid;grid-template-columns:210px 1fr;gap:20px;padding:20px 24px;border-bottom:1.5px solid var(--line);
  transition:background .3s ease}
.def:last-child{border-bottom:none}
.def:hover{background:var(--blue-soft)}
.def dt{font-weight:600;font-size:15.5px}
.def dd{margin:0;font-size:15px;color:var(--ink-2)}
@media(max-width:760px){.def{grid-template-columns:1fr;gap:6px}}

/* ---------- section art ---------- */
.art-panel{border-radius:var(--r-xl);overflow:hidden;border:1.5px solid var(--line);background:var(--paper);
  box-shadow:var(--shadow-2)}
.art-panel svg{width:100%;height:auto;display:block}

/* ---------- misc ---------- */
.lead{font-size:19px;color:var(--ink-2);max-width:70ch}
.prose p{margin-bottom:18px;color:var(--ink-2);font-size:16.5px;max-width:72ch}
.prose h2{margin:44px 0 16px}
.prose h3{margin:32px 0 12px}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.pill-row span{font-size:13px;border:1.5px solid var(--line-2);border-radius:var(--r-pill);padding:7px 15px;
  color:var(--ink-2);transition:border-color .3s,background .3s,transform .3s}
.pill-row span:hover{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-2px)}

/* Blog topic filter pills (search + category archive headers). Same visual
   language as .pill-row, plus an active state for whichever filter (or
   "All") matches the page currently being viewed. */
.filter-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.filter-pills .pill{display:inline-block;font-size:13px;border:1.5px solid var(--line-2);border-radius:var(--r-pill);
  padding:7px 15px;color:var(--ink-2);text-decoration:none;transition:border-color .2s,background .2s,transform .2s,color .2s}
.filter-pills .pill:hover{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-2px)}
.filter-pills .pill.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.filter-pills .pill.is-active:hover{transform:none}
.callout{border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:0 14px 14px 0;padding:20px 24px;
  margin:26px 0;font-size:15.5px;color:var(--ink-2)}
.callout b{color:var(--ink)}

/* =====================================================================
   Revision 2: nav fit, client login, portal panel, calendar animation,
   landmark art, founder card, spam guard, WhatsApp emphasis
   ===================================================================== */

/* ---------- nav never wraps ---------- */
.nav-in{gap:18px;flex-wrap:nowrap}
.nav-links{gap:0;flex-wrap:nowrap;white-space:nowrap}
.nav-links > a,.drop-btn{white-space:nowrap}
.nav-cta{flex-wrap:nowrap;white-space:nowrap;gap:10px}
@media(max-width:1420px){
  .nav-links a,.drop-btn{padding:10px 10px;font-size:14px}
  .brand{font-size:20px}
}
@media(max-width:1260px){
  .nav-links a,.drop-btn{padding:10px 8px;font-size:13.5px}
  .signin span.txt{display:none}
}
.signin{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink-2);
  padding:9px 14px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);white-space:nowrap;
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease}
.signin svg{width:15px;height:15px;flex:0 0 15px}
.signin:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-soft);transform:translateY(-1px)}
.drop-2 .drop{width:330px}
@media(max-width:1180px){
  .nav-links{display:none}
  .burger{display:flex}
  .signin{display:none}
}

/* ---------- header room for six top level items ----------
   Five of the six are dropdowns, so the row (logo, menu, login, theme switch,
   quote button) needs about 1330px, more than the 1200px content column it
   used to sit in. The header gets a wider container of its own, then trims
   spacing in steps as the window narrows. The mega panel is centred on the
   content column separately, so it is not affected. */
.nav-in.wrap{max-width:1400px}
@media(max-width:1439px){
  .nav-in{gap:14px}
  .nav-links{margin-left:4px}
  .nav-links a,.drop-btn{padding:10px 9px;font-size:14px}
  .drop-btn{gap:5px}
  .nav-cta{gap:8px}
  .signin{padding:9px 12px}
  .nav-cta > .btn{padding:13px 20px;font-size:14.5px}
}
@media(max-width:1359px){
  .signin .txt{display:none}
  .signin{padding:9px 11px}
  .nav-links a,.drop-btn{padding:10px 7px;font-size:13.5px}
}
@media(max-width:1259px){
  .nav-in{gap:10px}
  .brand .word{font-size:19px}
  .nav-links a,.drop-btn{padding:10px 5px;font-size:13px}
  .nav-cta > .btn{padding:12px 16px;font-size:14px}
  .theme .switch{transform:scale(.9)}
}
/* very narrow phones: the quote button lives in the mobile menu instead */
@media(max-width:600px){
  .nav-in{gap:10px}
  .nav-cta{gap:8px}
  .nav-cta > .btn{display:none}
}
@media(max-width:400px){
  .brand .word{font-size:20px}
}
.mobile .m-cta{display:flex;gap:10px;padding-top:14px;border-bottom:none}
.mobile .m-cta .btn{flex:1;justify-content:center}
.mobile a.m-login{color:var(--blue);font-weight:600}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the client portal panel ---------- */
.portal{border-radius:var(--r-xl);overflow:hidden;border:1.5px solid var(--line);background:var(--paper);
  box-shadow:var(--shadow-2)}
.portal-bar{display:flex;align-items:center;gap:9px;padding:14px 18px;border-bottom:1.5px solid var(--line);
  background:var(--canvas-2)}
.portal-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block}
.portal-bar span{margin-left:12px;font-size:12px;color:var(--mute);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:4px 14px;background:var(--paper)}
.portal-body{display:grid;grid-template-columns:184px 1fr;min-height:300px}
@media(max-width:700px){.portal-body{grid-template-columns:1fr}.portal-side{display:none}}
.portal-side{border-right:1.5px solid var(--line);padding:16px 12px;background:var(--canvas-2)}
.portal-side .it{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:13.5px;
  color:var(--ink-2);transition:background .3s,color .3s}
.portal-side .it b{font-weight:500}
.portal-side .it.on{background:var(--blue-soft);color:var(--blue)}
.portal-side .it i{width:15px;height:15px;border-radius:5px;background:var(--line-2);display:block}
.portal-side .it.on i{background:var(--blue)}
.portal-main{padding:20px 22px}

/* rows that deal themselves in like a file loading */
.load-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1),background .3s ease,padding .3s ease}
.load-row:last-child{border-bottom:none}
.load-row.in{opacity:1;transform:none}
.load-row:hover{background:var(--blue-soft);padding-left:10px;padding-right:10px;border-radius:10px}
.load-row .t{flex:1}
.load-row .d{font-size:13px;color:var(--mute)}
.load-row .dot{width:9px;height:9px;border-radius:50%;background:var(--sage);flex:0 0 9px}
.load-row .dot.a{background:var(--amber)}
.load-row .dot.b{background:var(--blue)}
/* the skeleton shimmer that shows before a row lands */
.load-row .skel{position:relative;overflow:hidden;background:var(--line);border-radius:6px;height:9px;flex:1}
.load-row .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:skel 1.3s infinite}
:root:has(#theme-toggle:checked) .load-row .skel::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
@keyframes skel{to{transform:translateX(100%)}}

/* progress bar that fills as the calendar loads */
.load-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px}
.load-meter{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin:4px 0 12px}
.load-meter i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--sage));transition:width 2.2s cubic-bezier(.2,.7,.2,1)}
.load-badge{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--blue-soft);color:var(--blue);display:inline-flex;align-items:center;gap:7px}
.load-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);
  animation:pulseDot 1.5s ease-in-out infinite}
.load-badge.done{background:var(--sage-soft);color:var(--sage)}
.load-badge.done::before{background:var(--sage);animation:none}
@keyframes pulseDot{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- numbered points on the home split ---------- */
.numlist{list-style:none;margin:28px 0 0;padding:0}
.numlist li{position:relative;display:flex;gap:18px;padding:16px 16px 16px 14px;border-radius:14px;
  transition:background .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.numlist li:hover{background:var(--blue-soft);transform:translateX(6px)}
.numlist .n{flex:0 0 46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:var(--serif);
  font-size:19px;font-weight:600;color:var(--blue);background:var(--paper);
  box-shadow:inset 0 0 0 1.5px rgba(27,77,228,.20);
  transition:transform .45s cubic-bezier(.3,1.4,.4,1),background .3s,color .3s,box-shadow .3s}
.numlist li:hover .n{transform:rotate(-8deg) scale(1.1);background:var(--blue);color:#fff;
  box-shadow:0 10px 22px -10px var(--blue)}
.numlist b{display:block;font-size:16.5px;margin-bottom:4px}
.numlist span.d{display:block;font-size:15px;color:var(--ink-2)}

/* ---------- landmark art ---------- */
.landmark{border-radius:var(--r-xl);overflow:hidden;border:1.5px solid var(--line);background:var(--paper);
  box-shadow:var(--shadow-2)}
.landmark svg{width:100%;height:auto;display:block}
.landmark .lm-cap{padding:14px 20px;border-top:1.5px solid var(--line);font-size:12.5px;color:var(--mute);
  background:var(--canvas-2)}
.lm-sky{fill:var(--blue-soft)}
:root:has(#theme-toggle:checked) .lm-sky{fill:#1b2340}
.lm-water{fill:var(--water)}
.lm-body{fill:var(--tower)}
.lm-body2{fill:var(--tower-2)}
.lm-glow{fill:var(--amber)}
.lm-leaf{fill:var(--sage)}
.lm-line{stroke:var(--line-2)}
.lm-float{animation:lmFloat 7s ease-in-out infinite}
@keyframes lmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.lm-spout{stroke-dasharray:26 10;animation:lmFlow 1.1s linear infinite}
@keyframes lmFlow{to{stroke-dashoffset:-36}}
.lm-twinkle{animation:lmTw 3.4s ease-in-out infinite}
.lm-twinkle:nth-of-type(2n){animation-delay:1.1s}
.lm-twinkle:nth-of-type(3n){animation-delay:2.2s}
@keyframes lmTw{0%,100%{opacity:.35}50%{opacity:1}}
.lm-drop{animation:lmDrop 2.6s linear infinite}
.lm-drop:nth-of-type(2n){animation-delay:.8s}
.lm-drop:nth-of-type(3n){animation-delay:1.6s}
@keyframes lmDrop{0%{transform:translateY(0);opacity:0}12%{opacity:.9}100%{transform:translateY(78px);opacity:0}}

/* ---------- founder card ---------- */
.founder{display:grid;grid-template-columns:280px 1fr;gap:38px;align-items:start;background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r-xl);padding:34px;box-shadow:var(--shadow-2)}
@media(max-width:820px){.founder{grid-template-columns:1fr;gap:24px}}
.portrait{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--canvas-2);aspect-ratio:1/1.12;
  border:1.5px solid var(--line)}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;
  color:var(--mute);font-size:12.5px;line-height:1.5}
.founder h3{font-size:27px;margin-bottom:4px}
.founder .role{font-size:14px;color:var(--blue);font-weight:600;letter-spacing:.02em;margin-bottom:16px}
.founder p{color:var(--ink-2);font-size:16px;margin-bottom:14px;max-width:64ch}
.founder .li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--blue);
  margin-top:6px}
.founder .li:hover{text-decoration:underline}

/* ---------- WhatsApp emphasis ---------- */
.wa-inline{display:inline-flex;align-items:center;gap:9px;background:#25d366;color:#04231c;font-weight:600;
  font-size:15px;padding:13px 22px;border-radius:var(--r-pill);border:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.3,1.3,.4,1),box-shadow .3s}
.wa-inline:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(37,211,102,.8)}
.wa-inline svg{width:19px;height:19px}
.wa-note{font-size:13.5px;color:var(--mute);margin-top:10px}

/* ---------- spam guard ---------- */
.guard{background:var(--canvas-2);border:1.5px dashed var(--line-2);border-radius:14px;padding:16px 18px;
  margin-bottom:18px}
.guard label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px}
.guard .guard-row{display:flex;align-items:center;gap:12px}
.guard .q{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.guard input{width:110px}
.guard .msg{font-size:12.5px;margin-top:8px;min-height:17px}
.guard .msg.bad{color:var(--rose)}
.guard .msg.good{color:var(--sage)}
.guard .hint{margin-top:2px}
.guard input{border:1.5px solid var(--line-2);border-radius:10px;padding:10px 12px;font:inherit;font-size:15px;background:var(--paper);color:var(--ink)}
.guard input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Field Notes gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
.shot{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--line);background:var(--paper);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.shot:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.shot .ph{display:grid;place-items:center;aspect-ratio:4/3;background:var(--canvas-2);color:var(--line-2)}
.shot .ph svg{width:38px;height:38px}
.shot figcaption{padding:12px 15px;font-size:12.5px;color:var(--mute);border-top:1.5px solid var(--line)}
.pill-row a{text-decoration:none}

/* ---------- revision 2 polish ---------- */
:root[data-theme="night"] .lm-glow,
:root:has(#theme-toggle:checked) .lm-glow{fill:#e9e4d2;opacity:.75}
.load-badge{white-space:nowrap;flex:0 0 auto}
.portal-main .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.portal-main .card-h b{font-size:15.5px;line-height:1.25}
.portal-main .load-row{font-size:13.8px}
.portal-main .load-row .t{min-width:0}

/* =====================================================================
   Harbour: the blog. Classes the static brochure site never needed.
   ===================================================================== */

/* ---------- article header ---------- */
.phead-art{padding-bottom:34px}
.art-kind{margin:0 0 14px}
.art-kind a{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);
  background:var(--blue-soft);padding:6px 13px;border-radius:var(--r-pill);text-decoration:none}
.art-kind a:hover{background:var(--blue);color:#fff}
.art-title{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;max-width:20ch;
  font-size:clamp(32px,5vw,54px);line-height:1.06;margin:0 0 22px;text-wrap:balance}
@media(min-width:900px){.art-title{max-width:24ch}}

.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;font-size:14.5px;color:var(--ink-2)}
.art-meta .by{display:inline-flex;align-items:center;gap:10px}
.art-meta .by-face,.art-meta .avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:1.5px solid var(--line)}
.art-meta .by span{display:flex;flex-direction:column;line-height:1.25}
.art-meta .by a{color:var(--ink);font-weight:600;text-decoration:none}
.art-meta .by a:hover{color:var(--blue)}
.art-meta .by small{font-size:12.5px;color:var(--mute)}
.art-meta .dot-sep{color:var(--line-2)}
.art-meta .upd{color:var(--sage);font-weight:500}

.art-review{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;color:var(--sage);
  background:var(--sage-soft);padding:7px 14px;border-radius:var(--r-pill)}
.art-review a{color:inherit;font-weight:600}

.art-figure{margin:0 auto 6px;position:relative;z-index:2}
.art-figure img{width:100%;height:auto;border-radius:var(--r-xl);display:block;border:1.5px solid var(--line)}
.art-figure .fig-cap{margin-top:11px;font-size:12.5px;color:var(--mute);text-align:center}

/* ---------- article layout ---------- */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
@media(max-width:1080px){.art-grid{grid-template-columns:1fr;gap:38px}.art-side{order:-1}}
.art-main{min-width:0;max-width:720px}
.art-body .entry{font-size:17.5px;line-height:1.72}
.art-body .entry > *{max-width:68ch}
.art-body .entry h2{font-family:var(--serif);font-size:29px;font-weight:600;letter-spacing:-.015em;
  margin:44px 0 14px;scroll-margin-top:110px;text-wrap:balance}
.art-body .entry h3{font-size:21px;font-weight:600;margin:32px 0 10px;scroll-margin-top:110px}
.art-body .entry p{margin:0 0 18px}
.art-body .entry ul,.art-body .entry ol{margin:0 0 20px;padding-left:22px}
.art-body .entry li{margin-bottom:9px}
.art-body .entry img{max-width:100%;height:auto;border-radius:var(--r-lg);margin:26px 0;border:1.5px solid var(--line)}
.art-body .entry blockquote{margin:26px 0;padding:18px 24px;border-left:3px solid var(--blue);
  background:var(--blue-soft);border-radius:0 var(--r-lg) var(--r-lg) 0;font-size:18px}
.art-body .entry blockquote p:last-child{margin:0}
.art-body .entry table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px}
.art-body .entry th,.art-body .entry td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.art-body .entry th{background:var(--canvas-2);font-weight:600;font-size:13px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--mute)}
.art-body .entry code{background:var(--canvas-2);padding:2px 6px;border-radius:5px;font-size:.9em}
.art-body .entry a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--line-2)}
.art-body .entry a:hover{text-decoration-color:var(--blue)}

/* ---------- the answer box ----------
   The passage an assistant is most likely to quote, and the one Speakable
   points at. It has to look deliberate, not like a pull quote. */
.answer-box{background:var(--blue-soft);border:1.5px solid var(--blue);border-radius:var(--r-xl);
  padding:24px 28px;margin:0 0 26px;position:relative}
.answer-box .ab-label{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue);margin:0 0 8px}
.answer-box .ab-text{font-size:19px;line-height:1.58;color:var(--ink);margin:0;font-weight:500;max-width:62ch}
@media(max-width:640px){.answer-box{padding:20px 20px}.answer-box .ab-text{font-size:17.5px}}

.takeaways{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-xl);
  padding:22px 26px;margin:0 0 32px}
.takeaways .tk-head{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.takeaways .ticks{margin:0}
.takeaways .ticks li{font-size:15.8px}

/* ---------- table of contents ---------- */
.side-sticky{position:sticky;top:98px;display:flex;flex-direction:column;gap:22px}
@media(max-width:1080px){.side-sticky{position:static}}
.toc{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.toc-head{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{margin-bottom:9px;line-height:1.4}
.toc li.lvl-3{padding-left:16px}
.toc a{font-size:14px;color:var(--ink-2);text-decoration:none;display:block;
  border-left:2px solid transparent;padding-left:10px;margin-left:-12px;transition:color .2s,border-color .2s}
.toc a:hover,.toc a.on{color:var(--blue);border-left-color:var(--blue)}

.side-cta{background:var(--canvas-2);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px}
.side-cta h3{font-size:17px;margin:0 0 8px}
.side-cta p{font-size:14.2px;color:var(--ink-2);margin:0 0 16px}
.side-cta .btn{width:100%;justify-content:center;margin-bottom:12px}
.side-cta .wa-inline{display:inline-flex;font-size:13.5px}

/* ---------- sources and FAQ ---------- */
.sources{margin-top:44px;padding-top:26px;border-top:1.5px solid var(--line)}
.sources h2{font-size:19px;margin:0 0 14px}
.sources .dots li{font-size:15px}
.sources a{color:var(--blue)}

.faq-block{margin-top:44px}
.faq-block h2{font-family:var(--serif);font-size:27px;margin:0 0 18px}
.faqs{display:flex;flex-direction:column;gap:10px}
.faq{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .25s}
.faq[open]{border-color:var(--blue)}
.faq summary{padding:17px 22px;cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;
  display:flex;align-items:flex-start;gap:14px;transition:background .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:22px;font-weight:400;color:var(--blue);
  line-height:1;transition:transform .3s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:var(--blue-soft)}
.faq-a{padding:0 22px 20px}
.faq-a p{margin:0;color:var(--ink-2);font-size:15.8px;line-height:1.65;max-width:66ch}

/* ---------- author box ---------- */
.author-box{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:start;margin-top:48px;
  padding:26px;background:var(--canvas-2);border:1.5px solid var(--line);border-radius:var(--r-xl)}
@media(max-width:640px){.author-box{grid-template-columns:1fr;gap:18px}}
.ab-face img{width:132px;height:132px;border-radius:var(--r-lg);object-fit:cover;display:block;
  border:1.5px solid var(--line)}
.ab-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);margin:0 0 4px}
.ab-name{font-family:var(--serif);font-size:24px;font-weight:600;margin:0 0 2px}
.ab-name a{color:var(--ink);text-decoration:none}
.ab-name a:hover{color:var(--blue)}
.ab-role{font-size:14px;color:var(--blue);font-weight:600;margin:0 0 12px}
.ab-bio{font-size:15.5px;color:var(--ink-2);margin:0 0 12px;max-width:64ch}
.ab-creds{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.ab-creds li{font-size:12.5px;background:var(--paper);border:1.5px solid var(--line);
  padding:5px 11px;border-radius:var(--r-pill);color:var(--ink-2)}
.ab-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;font-size:14px}
.ab-links a{display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-weight:600;text-decoration:none}
.ab-links a:hover{text-decoration:underline}

.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.art-tags a{font-size:12.5px;color:var(--mute);background:var(--canvas-2);border:1.5px solid var(--line);
  padding:5px 12px;border-radius:var(--r-pill);text-decoration:none;transition:all .2s}
.art-tags a:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-soft)}

/* ---------- cards, pagination, empty ---------- */
.art .art-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.art .thumb-blank{display:block}
.art .thumb-blank svg{width:100%;height:auto;display:block}
.card-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--mute);
  margin:10px 0 12px}

.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:44px}
.pager .page-numbers{display:inline-flex;align-items:center;gap:7px;min-width:42px;height:42px;
  padding:0 14px;justify-content:center;border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink-2);font-size:14.5px;font-weight:600;text-decoration:none;
  transition:all .22s}
.pager a.page-numbers:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.pager .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .dots{border:none;background:none}

.empty{text-align:center;max-width:620px;margin:0 auto;padding:44px 20px}
.empty .ic{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:var(--r-lg);
  background:var(--blue-soft);color:var(--blue);margin-bottom:18px}
.empty .ic svg{width:28px;height:28px}
.empty h2{font-family:var(--serif);font-size:27px;margin:0 0 10px}
.empty p{color:var(--ink-2);margin:0 auto 8px;max-width:52ch}
.empty-search{margin-top:22px}

/* ---------- search form ---------- */
.searchform{display:flex;gap:8px;max-width:480px}
.head-search{margin-top:26px}
.head-search .searchform{max-width:520px}
.searchform input[type=search]{flex:1;min-width:0;padding:13px 17px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);font:inherit;font-size:15.5px}
.searchform input[type=search]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.searchform button{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--blue);color:#fff;display:grid;place-items:center;transition:transform .2s}
.searchform button:hover{transform:scale(1.06)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}

/* ---------- form notice ---------- */
.form-notice{padding:16px 20px;border-radius:var(--r-lg);margin-bottom:22px;font-size:15.5px;
  border:1.5px solid;outline:none}
.form-notice.good{background:var(--sage-soft);border-color:var(--sage);color:var(--sage)}
.form-notice.bad{background:var(--rose-soft,#fdeaee);border-color:var(--rose,#c4384f);color:var(--rose,#c4384f)}

/* ---------- mobile menu extras ---------- */
.mobile .m-head{display:block;padding:14px 4px 6px;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);border-bottom:none}
.mobile a.m-sub{padding-left:14px;font-size:15px}
.mobile .m-head.m-group{padding:12px 4px 4px 14px;font-size:11px;color:var(--blue);opacity:.85}

/* ---------- two ways to start (incorporation and nominee director pages) ----------
   Two rows. Option 1 pairs the steps with a browser frame that shows the screen
   for the step in focus: hover or tap a step, or let it advance on its own.
   Option 2 pairs a photo of the chartered secretary with the guided route.
   Colours come only from theme tokens, which carry their night twins. */
.phead .route-cta{justify-content:flex-start;align-items:center;margin-top:28px;gap:18px}
.route-jump{font-size:15px;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.route-jump:hover{color:var(--ink)}
.routes .head{margin-bottom:64px}
.route-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:72px;align-items:center;
  position:relative;z-index:2;scroll-margin-top:110px}
.route-row + .route-row{margin-top:112px}
.route-row.flip{grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
@media(max-width:980px){
  .route-row,.route-row.flip{grid-template-columns:1fr;gap:40px}
  .route-row + .route-row{margin-top:80px}
  .route-row.flip .route-photo{max-width:440px;margin:0 auto;width:100%}
}
.route-flag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 15px;border-radius:var(--r-pill);color:#fff;background:linear-gradient(120deg,var(--blue),var(--blue-2))}
.route-flag.soft{background:var(--paper);color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.route-copy h3{font-size:clamp(28px,3vw,38px);margin:18px 0 12px;line-height:1.1}
.route-lead{color:var(--ink-2);font-size:17px;max-width:52ch}
.route-ready{font-size:14px;color:var(--mute);margin:18px 0 24px}
.route-for{margin:22px 0 4px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.route-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px}
.route-wa{font-size:15px;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.route-wa:hover{color:var(--ink)}
.route-note{max-width:640px;margin:72px auto 0}

/* the step list */
.rsteps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rstep{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:36px 1fr;align-items:center;gap:14px;
  width:100%;padding:12px 16px 14px 12px;border-radius:16px;border:1.5px solid transparent;position:relative;
  transition:background .35s ease,border-color .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.rstep:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rnum{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-family:var(--serif);font-weight:600;
  font-size:17px;color:var(--blue);background:var(--blue-soft);transition:transform .45s cubic-bezier(.3,1.4,.4,1),background .35s,color .35s}
.rtxt{font-size:15.5px;font-weight:600;color:var(--ink-2);transition:color .35s}
.rbar{position:absolute;left:62px;right:16px;bottom:7px;height:2px;border-radius:2px;background:var(--line);opacity:0;transition:opacity .3s}
.rbar i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--blue-2))}
.rstep:hover{background:var(--paper);transform:translateX(4px)}
.rstep.on{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow-2)}
.rstep.on .rnum{background:var(--blue);color:#fff;transform:rotate(-6deg) scale(1.06)}
.rstep.on .rtxt{color:var(--ink)}
.rstep.on .rbar{opacity:1}
.rsteps.play .rstep.on .rbar i{animation:rfill var(--rdur,4.6s) linear forwards}
.rsteps.paused .rstep.on .rbar i{animation-play-state:paused}
@keyframes rfill{from{width:0}to{width:100%}}

/* the browser frame */
.route-stage{position:relative}
.route-stage::before{content:"";position:absolute;inset:8% -6% -6% 10%;border-radius:40px;
  background:radial-gradient(60% 60% at 60% 40%,var(--blue-soft),transparent 70%);z-index:-1}
.rframe{border-radius:22px;background:var(--paper);border:1.5px solid var(--line);box-shadow:var(--shadow-3);overflow:hidden}
.rframe-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1.5px solid var(--line);background:var(--canvas-2)}
.rframe-bar span{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.rframe-bar em{margin-left:10px;flex:1;font-style:normal;font-size:12.5px;color:var(--mute);text-align:center;
  padding:6px 12px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line)}
.rframe-body{position:relative;aspect-ratio:16/12.6;overflow:hidden}
.rscreen{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);pointer-events:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.rscreen.on{opacity:1;transform:none;pointer-events:auto}
.rscreen img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
/* every step has a real screenshot: the frame follows their 3:2 shape, also on phones */
.rframe.has-shots .rframe-body{aspect-ratio:3/2}
.rframe.has-shots .rscreen{background:#fff}
.rframe-cap{font-size:13px;color:var(--mute);text-align:center;margin-top:14px}

/* the drawn screen used until a real screenshot is added */
.rmock{height:100%;padding:24px 30px 26px;display:flex;flex-direction:column;gap:12px}
.rmock-top{display:flex;align-items:center;gap:14px}
.rmock-step{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.rmock-prog{flex:1;height:6px;border-radius:6px;background:var(--blue-soft);overflow:hidden}
.rmock-prog i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--blue-2));
  transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s}
.rscreen.on .rmock-prog i{transform:scaleX(1)}
.rmock-h{font-family:var(--serif);font-size:clamp(20px,2vw,25px);font-weight:600;color:var(--ink);margin:4px 0 2px}
.rmock-f{display:flex;flex-direction:column;gap:7px;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.18s + var(--d) * .12s)}
.rscreen.on .rmock-f{opacity:1;transform:none}
.rmock-f span{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.rmock-f b{display:block;height:38px;border-radius:11px;border:1.5px solid var(--line-2);background:var(--canvas-2);position:relative;overflow:hidden}
.rmock-f b i{position:absolute;left:14px;top:50%;height:9px;margin-top:-4.5px;border-radius:5px;background:var(--line-2);width:0;
  transition:width 1.1s cubic-bezier(.3,.7,.2,1);transition-delay:calc(.45s + var(--d) * .25s)}
.rscreen.on .rmock-f b i{width:calc(38% + var(--d) * 12%)}
.rmock-go{margin-top:auto;display:flex;justify-content:flex-end}
.rmock-go span{font-size:13.5px;font-weight:700;color:#fff;padding:10px 22px;border-radius:var(--r-pill);
  background:linear-gradient(120deg,var(--blue),var(--blue-2));box-shadow:0 10px 24px -12px var(--blue)}
@media(max-width:520px){.rmock{padding:18px 18px;gap:10px}.rmock-f b{height:32px}.rframe-body{aspect-ratio:4/5}}
/* On one column, the screen sits right under the steps it belongs to. */
@media(max-width:980px){
  .route-row:not(.flip){gap:0}
  .route-row:not(.flip) .route-copy{display:contents}
  .route-row:not(.flip) .route-copy > *{justify-self:start}
  .route-row:not(.flip) .rsteps{justify-self:stretch}
  .route-row:not(.flip) .route-stage{order:1;margin:28px 0 4px}
  .route-row:not(.flip) .route-ready,.route-row:not(.flip) .route-copy > .btn{order:2}
  .rframe-cap{display:none}
}

/* the secretary photo */
.route-photo{position:relative}
.rphoto{position:relative;margin:0;border-radius:28px;overflow:hidden;background:var(--blue-soft);box-shadow:var(--shadow-3);
  aspect-ratio:4/5;animation:rfloat 7s ease-in-out infinite}
.rphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.route-photo:hover .rphoto img{transform:scale(1.04)}
.rphoto-tag{position:absolute;left:18px;right:18px;bottom:18px;padding:14px 18px;border-radius:18px;
  background:var(--paper);box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:2px}
.rphoto-tag b{font-size:16px;color:var(--ink)}
.rphoto-tag span{font-size:13px;color:var(--mute)}
.rphoto-rings{position:absolute;inset:0;pointer-events:none;z-index:-1}
.rphoto-rings i{position:absolute;border-radius:50%}
.rphoto-rings i:first-child{width:62%;aspect-ratio:1;top:-34px;right:-44px;border:1.5px dashed var(--line-2);animation:rring 30s linear infinite}
.rphoto-rings i + i{width:38%;aspect-ratio:1;bottom:-30px;left:-34px;background:var(--blue-soft);animation:rpulse 6s ease-in-out infinite}
@keyframes rfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes rring{to{transform:rotate(1turn)}}
@keyframes rpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){
  .rphoto,.rphoto-rings i{animation:none}
  .rscreen,.rmock-f,.rmock-f b i,.rmock-prog i{transition:none}
}

/* ---------- client logo (20 Oct 2026) ----------
   The header and footer now show the client's EXPEDE wordmark instead of the
   drawn mark plus "Expede" text. Two image files: dark letters for day, light
   letters for night. Both theme switches are covered, the data-theme
   attribute and the CSS-only checkbox, so night mode works without JS. */
.brand .logo{display:block;width:auto;max-width:none;height:30px}
.brand .logo-night{display:none}
[data-theme="night"] .brand .logo-day,:root:has(#theme-toggle:checked) .brand .logo-day{display:none}
[data-theme="night"] .brand .logo-night,:root:has(#theme-toggle:checked) .brand .logo-night{display:block}
.nav .brand{flex-shrink:0;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.nav .brand:hover{transform:translateY(-1px)}
.ft .brand{width:max-content}
.ft .brand .logo{height:auto;width:240px}
@media(max-width:1420px){.nav .brand .logo{height:27px}}
@media(max-width:1259px){.nav .brand .logo{height:23px}}
@media(max-width:400px){.nav .brand .logo{height:21px}}

/* ---------- quote cards, no prices (21 Oct 2026) ----------
   Takes the place of the price figure on the Packages page and on the
   service pages. */
.plan-quote{margin:18px 0 2px;font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.plan-quote-sub{font-size:13.5px;color:var(--mute);margin:0 0 4px}

/* ---------- FAQ list spacing (21 Oct 2026) ----------
   The white box around the questions had no inner padding, so the first and
   last question touched its edge, and the questions shrank to their own
   width. 18px of breathing room inside the box, and every question runs
   the full width. */
.faq > .faqs{padding:18px}
.faqs > details.faq{width:100%;max-width:none;margin:0}

/* ---------- call back request (27 Oct 2026) ---------- */
.callback-note{margin:0 0 18px;padding:14px 18px;border-radius:14px;background:var(--blue-soft);color:var(--ink);font-size:15px;font-weight:500}