/* CINCH website styles. Every colour, font and shape comes from the variables below;
   the control panel's Appearance page overrides them in a <style id="theme-vars"> block. */
:root{
  --blue:#0056A3; --blue-deep:#0B3F78; --blue-wash:#EEF4FB; --on-primary:#fff;
  --green:#B2C835; --green-deep:#5E7A0E; --green-wash:#F5F8E8; --on-accent:#1E2A08;
  --grey:#D8DADC; --line:#E3E7EC;
  --heading:#152337; --ink:#152337; --ink-2:#4A5668; --ink-3:#6E7888;
  --bg:#FFFFFF; --bg-2:#F8FAF6; --surface:#FFFFFF; --field:#F8FAF6;
  --band:#0B3F78; --band-text:#DCE7F4;
  --display:"Cinzel","Trajan Pro",Georgia,serif;
  --body:"Mulish","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --head-weight:600; --base-size:16px; --head-case:none; --head-track:.01em;
  --wrap:1180px; --r:10px; --btn-r:999px; --sec-pad:clamp(56px,8vw,96px);
  --shadow:0 12px 30px -20px rgba(11,63,120,.35); --shadow-lg:0 18px 50px -24px rgba(11,63,120,.28);
  --header-bg:rgba(255,255,255,.92); --header-blur:10px; --header-text:#4A5668; --header-pos:sticky; --header-display:block; --header-line:var(--line);
  --menu-bg:#fff; --nav-active:#0056A3; --nav-active-text:#fff; --nav-active-link:#0056A3; --menu-blur:0px; --menu-radius:0px; --menu-border:var(--line);
  --logo-size:42px; --logo-bg:transparent; --logo-radius:10px; --logo-pad:0px; --brand-color:var(--green-deep); --brand-text-display:inline;
  --footer-bg:#fff; --footer-text:#4A5668; --footer-display:block; --foot-logo-display:block;
  --pattern:none; --pattern-size:340px;
  --hero-mark-opacity:.07; --hero-mark-display:block;
  --switch-display:none;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background-color:var(--bg);background-image:var(--pattern);background-size:var(--pattern-size) var(--pattern-size);color:var(--ink);font:400 var(--base-size)/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
h1,h2,h3{margin:0;text-wrap:balance;color:var(--heading)}
h2{font-family:var(--display);font-weight:var(--head-weight);font-size:clamp(1.7rem,3.2vw,2.35rem);line-height:1.2;letter-spacing:var(--head-track);text-transform:var(--head-case)}
h3{font:700 1.12rem/1.35 var(--body)}
p{margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 .76rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--green);border-radius:2px}
.lede{font-size:1.08rem;color:var(--ink-2);max-width:62ch}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--btn-r);font:700 .95rem/1 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue);color:var(--on-primary)}
.btn-primary:hover{background:var(--blue-deep)}
.btn-ghost{border-color:var(--grey);color:var(--heading);background:var(--surface)}
.btn-ghost:hover{border-color:var(--green)}
.btn .arr{width:14px;height:14px}

/* header */
.site-head{display:var(--header-display);position:var(--header-pos);top:env(safe-area-inset-top,0px);z-index:20;background:var(--header-bg);-webkit-backdrop-filter:saturate(1.4) blur(var(--header-blur));backdrop-filter:saturate(1.4) blur(var(--header-blur));border-bottom:1px solid var(--header-line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--heading);background:var(--logo-bg);border-radius:var(--logo-radius);padding:var(--logo-pad)}
.brand img{width:var(--logo-size);height:var(--logo-size);object-fit:contain}
.brand-text{display:var(--brand-text-display)}
.brand-name{font-family:var(--display);font-weight:var(--head-weight);font-size:1.45rem;line-height:1;color:var(--brand-color);letter-spacing:.04em}
.brand-sub{display:block;white-space:nowrap;font:600 .64rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--header-text);opacity:.8;margin-top:4px}
.head-r{display:flex;align-items:center;gap:10px;order:3}
.nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);order:2;margin-left:auto}
.nav a{font-weight:600;font-size:.94rem;color:var(--header-text);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--blue)}
.nav a[aria-current="true"]:not(.btn){color:var(--nav-active-link);box-shadow:inset 0 -2px 0 var(--nav-active)}
.nav .btn{padding:10px 18px;color:var(--on-primary)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--header-text);font:600 .9rem var(--body)}
.theme-switch{display:var(--switch-display);width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--header-text);cursor:pointer;place-items:center;padding:0}
.theme-switch svg{width:18px;height:18px}
@media (max-width:1100px){
  .menu-btn{display:block}
  .nav{position:absolute;left:clamp(8px,2vw,24px);right:clamp(8px,2vw,24px);top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:0;background:var(--menu-bg);-webkit-backdrop-filter:blur(var(--menu-blur));backdrop-filter:blur(var(--menu-blur));border:1px solid var(--menu-border);border-radius:var(--menu-radius);padding:8px 18px 18px;box-shadow:var(--shadow-lg)}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav a[aria-current="true"]:not(.btn){box-shadow:none;color:var(--nav-active-link)}
  .head-r{margin-left:auto}
  .nav .btn{margin-top:14px;justify-content:center;border-bottom:0}
  .nav:not(.open){display:none}
  .site-head:has(.nav.open){-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--header-bg)}
}

/* hero */
.hero{position:relative;overflow:hidden;padding:0;background:linear-gradient(180deg,transparent 0%,var(--bg-2) 100%);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:center;padding-block:clamp(48px,7vw,88px)}
.hero-mark{display:var(--hero-mark-display);position:absolute;right:-120px;top:-80px;width:560px;opacity:var(--hero-mark-opacity);pointer-events:none}
.hero h1{font-family:var(--display);font-weight:var(--head-weight);font-size:clamp(2.1rem,4.6vw,3.35rem);line-height:1.12;margin-top:18px;letter-spacing:var(--head-track);text-transform:var(--head-case)}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .lede{margin-top:20px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.profs{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;font-size:.9rem;color:var(--ink-3)}
.profs b{color:var(--heading);font-weight:700}

.tracker{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);box-shadow:var(--shadow-lg);padding:22px 22px 18px}
.tracker-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.tracker-title{font-weight:800;font-size:1rem;color:var(--heading)}
.tracker-meta{font-size:.8rem;color:var(--ink-3);margin-top:3px}
.tag-sample{flex:none;font:700 .66rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line);padding:6px 8px;border-radius:6px}
.steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.steps li{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:9px 0;font-size:.92rem}
.dot{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--grey)}
.done .dot{background:var(--green);border-color:var(--green)}
.done .dot::after{content:"";width:7px;height:4px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(-45deg) translate(1px,-1px)}
.live .dot{border-color:var(--blue)}
.live .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
.steps .todo{color:var(--ink-3)}
.form-code{font:500 .72rem/1 var(--mono);color:var(--blue-deep);background:var(--blue-wash);padding:5px 7px;border-radius:5px;white-space:nowrap}
.progress{margin-top:14px;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.progress span{display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--green),var(--blue))}
.progress-row{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;color:var(--ink-3);margin-top:8px;font-variant-numeric:tabular-nums}

/* ribbon */
.ribbon{background:var(--band);color:var(--band-text)}
.ribbon .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:center;padding-block:16px;font-size:.88rem;font-weight:600}
.ribbon span{display:inline-flex;align-items:center;gap:10px}
.ribbon span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}

/* sections */
section{padding-block:var(--sec-pad)}
.sec-head{display:grid;gap:14px;max-width:760px;margin-bottom:44px}
.alt{background:var(--bg-2);border-block:1px solid var(--line)}

.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 22px;transition:border-color .2s ease,box-shadow .2s ease}
.svc:hover{border-color:var(--green);box-shadow:var(--shadow)}
.svc-icon{width:44px;height:44px;border-radius:min(var(--r),12px);display:grid;place-items:center;background:var(--green-wash);color:var(--green-deep)}
.svc:nth-child(even) .svc-icon{background:var(--blue-wash);color:var(--blue)}
.svc-icon svg{width:22px;height:22px}
.svc p{color:var(--ink-2);font-size:.95rem}
.svc ul{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:.92rem;color:var(--ink-2)}
.svc li{padding-left:18px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-top:2px solid var(--green);border-right:2px solid var(--green);transform:rotate(45deg) scale(.8)}
.codes{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}

/* feature */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.feature .lede{margin-top:16px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.code-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.code-card small{display:block;font:500 .7rem/1 var(--mono);color:var(--green-deep);letter-spacing:.06em;margin-bottom:8px}
.code-card b{display:block;font-size:.98rem;line-height:1.35;color:var(--heading)}
.code-card p{font-size:.86rem;color:var(--ink-3);margin-top:6px}
.note{margin-top:22px;font-size:.88rem;color:var(--ink-3)}

/* process */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;margin:0;border-top:2px solid var(--grey)}
.process li{list-style:none;position:relative;padding:28px 24px 0 0}
.process li::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--green)}
.process li:nth-child(even)::before{border-color:var(--blue)}
.process .n{font-family:var(--display);font-weight:600;font-size:.9rem;line-height:1;color:var(--ink-3);letter-spacing:.1em}
.process h3{margin-top:10px}
.process p{margin-top:8px;color:var(--ink-2);font-size:.94rem}

/* audience */
.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aud{padding:26px 24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.aud-k{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--blue)}
.aud:nth-child(2) .aud-k{color:var(--green-deep)}
.aud h3{margin-top:10px}
.aud p{margin-top:8px;color:var(--ink-2);font-size:.94rem}
.promises{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.promise b{display:block;font-size:.98rem;color:var(--heading)}
.promise p{font-size:.9rem;color:var(--ink-3);margin-top:4px}

/* text block */
section.text-sec .body{display:grid;gap:14px;max-width:70ch;color:var(--ink-2);font-size:1.02rem}
section.text-sec .hero-ctas{margin-top:26px}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.contact h2{margin-top:14px}.contact .lede{margin-top:16px}
.details{display:grid;gap:18px;margin-top:28px}
.detail{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.detail .ic{width:40px;height:40px;border-radius:min(var(--r),12px);background:var(--green-wash);color:var(--green-deep);display:grid;place-items:center}
.detail .ic svg{width:18px;height:18px}
.detail small{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.detail span{font-weight:600;user-select:all;color:var(--heading)}
form{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:clamp(20px,3vw,32px);display:grid;gap:16px;box-shadow:var(--shadow-lg)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-size:.84rem;font-weight:700;color:var(--ink-2)}
input,select,textarea{font:500 .95rem/1.4 var(--body);color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:min(var(--r),8px);padding:11px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);background:var(--surface)}
textarea{min-height:110px;resize:vertical}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.form-foot small{color:var(--ink-3);font-size:.8rem}
.sent{background:var(--green-wash);border:1px solid var(--green);color:var(--green-deep);padding:12px 14px;border-radius:8px;font-weight:600;font-size:.92rem}

/* footer */
.site-foot{display:var(--footer-display);background:var(--footer-bg);color:var(--footer-text);border-top:1px solid var(--line);padding-block:48px 28px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px}
.foot-logo{display:var(--foot-logo-display);width:120px}
.foot-grid h4{margin:0 0 12px;font:700 .76rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--footer-text);opacity:.75}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.92rem}
.foot-grid a{color:var(--footer-text);text-decoration:none}
.foot-grid a:hover{color:var(--blue)}
.foot-tag{margin-top:14px;font-size:.9rem;color:var(--footer-text);opacity:.85;max-width:32ch}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.8rem;color:var(--footer-text);opacity:.85}

/* about us / team */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.team.one{grid-template-columns:minmax(0,640px)}
.person{display:grid;grid-template-columns:168px minmax(0,1fr);gap:24px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:24px;box-shadow:var(--shadow)}
.person .ph{width:168px;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--green-wash);display:grid;place-items:center}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person .ini{font-family:var(--display);font-weight:var(--head-weight);font-size:2.6rem;color:var(--green-deep);letter-spacing:.04em}
.person h3{font-family:var(--display);font-weight:var(--head-weight);font-size:1.35rem;line-height:1.2}
.person .role{margin-top:4px;font-weight:700;color:var(--blue);font-size:.95rem}
.person .quals{margin-top:2px;font:500 .78rem/1.4 var(--mono);color:var(--green-deep);letter-spacing:.04em}
.person .bio{display:grid;gap:10px;margin-top:14px;color:var(--ink-2);font-size:.95rem}
.person .li{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--btn-r);font-weight:700;font-size:.86rem;color:var(--heading);text-decoration:none;background:var(--bg)}
.person .li svg{width:16px;height:16px;fill:#0A66C2}
.person .li:hover{border-color:#0A66C2;color:#0A66C2}
@media (max-width:980px){.team{grid-template-columns:1fr}}
@media (max-width:560px){.person{grid-template-columns:1fr;padding:20px}.person .ph{width:140px}}

@media (max-width:980px){
  .hero .wrap,.feature,.contact{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .promises{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .services,.audience,.feature-list,.row,.promises,.foot-grid{grid-template-columns:1fr}
  .process{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--grey);padding-left:22px}
  .process li{padding:0 0 28px}
  .process li::before{top:2px;left:-31px}
  .hero-mark{width:360px;right:-140px}
  .brand-sub{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ======================= compliance journey hero ======================= */
.journey{--j-alert:#C23B55;--j-alert-wash:color-mix(in srgb,#C23B55 14%,var(--surface));--j-due:#A86A12;--j-due-wash:color-mix(in srgb,#E0A33A 20%,var(--surface));
  --j-ink:color-mix(in srgb,var(--heading) 94%,var(--bg));--j-on-ink:var(--bg);--j-line:color-mix(in srgb,var(--heading) 22%,var(--bg));
  position:relative;overflow:hidden;padding-block:clamp(28px,4vw,52px) 22px;border-bottom:1px solid var(--line)}
.journey.paper{background:color-mix(in srgb,var(--bg) 91%,#BFAE8A)}
.journey .wrap{position:relative}
.j-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px 48px;align-items:start;position:relative;z-index:3}
.j-head h1{font-family:var(--display);font-weight:var(--head-weight);font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:var(--head-track);text-transform:var(--head-case);max-width:15ch}
.j-head h1 em{font-style:normal;color:var(--blue)}
.j-side{border-left:2px solid var(--j-line);padding:4px 0 4px 22px;align-self:start;margin-top:10px}
.j-side p{font-weight:600;font-size:1.02rem;color:var(--heading);max-width:40ch}
.j-side p em{font-style:normal;color:var(--blue)}
.j-side .hero-ctas{margin-top:18px}

.j-stage{position:relative;height:clamp(400px,calc(100vh - 430px),540px);margin-top:-6px;z-index:1;container-type:size}
.j-deco,.j-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.j-deco path{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.j-wind{stroke:var(--blue-deep);stroke-dasharray:1600;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s cubic-bezier(.6,0,.2,1),opacity .6s}
.j-wind-dot{fill:var(--blue-deep);transition:opacity .5s .2s}
.j-dash{stroke:var(--j-alert);stroke-dasharray:7 7;opacity:.8;transition:opacity .6s}
.j-dash-dot{fill:none;stroke:var(--j-alert);stroke-width:1.6;vector-effect:non-scaling-stroke;transition:opacity .6s}
.j-dash2{stroke:var(--heading);stroke-dasharray:6 6;opacity:0;transition:opacity .6s}
.j-dash2-dot{fill:var(--bg);stroke:var(--heading);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .6s}
.j-links line{stroke:var(--heading);stroke-opacity:.45;stroke-width:1.2;stroke-dasharray:4 5}

.j-centre{position:absolute;left:50%;top:52%;height:80%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;transition:opacity .7s,transform .8s cubic-bezier(.3,.7,.2,1)}
.j-centre img{width:38%;height:auto;position:relative;z-index:1;filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--heading) 14%,transparent))}
.j-orbit{position:absolute;border-radius:50%;inset:0;border:1px solid var(--j-line);transition:opacity .6s,transform .8s}
.j-orbit.o2{inset:6%;border:1px dashed var(--j-line);animation:j-spin 60s linear infinite}
@keyframes j-spin{to{transform:rotate(360deg)}}

/* chapters */
.j-ch{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.j-ch.on{visibility:visible;pointer-events:auto}
.j-card{position:absolute;display:flex;align-items:center;gap:12px;width:max-content;max-width:min(330px,34%);padding:10px 16px 10px 10px;border-radius:999px;background:var(--surface);color:var(--heading);box-shadow:0 10px 26px -18px color-mix(in srgb,var(--heading) 60%,transparent);font-size:.84rem;line-height:1.3;z-index:2}
.j-card b{font-weight:700;display:block}
.j-card small{display:block;color:var(--ink-3);font-size:.74rem;margin-top:2px}
.j-tx{min-width:0}
.j-ic,.j-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);color:var(--heading)}
.j-ic svg,.j-av svg{width:17px;height:17px}
.j-dark{background:var(--j-ink);color:var(--j-on-ink);border-radius:12px;padding:10px 20px 10px 10px}
.j-dark small{color:color-mix(in srgb,var(--j-on-ink) 55%,var(--j-ink))}
.j-dark .j-av{border-radius:8px;background:color-mix(in srgb,var(--j-on-ink) 16%,var(--j-ink));color:var(--j-on-ink);width:42px;height:42px}
.j-task{flex-direction:column;align-items:flex-start;gap:8px;border-radius:14px;padding:14px 16px;min-width:180px}
.j-alert{background:var(--j-alert-wash);color:var(--j-alert);border-radius:12px;padding:12px 18px 12px 12px}
.j-alert small{color:color-mix(in srgb,var(--j-alert) 70%,var(--surface))}
.j-bang{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--j-alert) 20%,var(--surface));font-weight:800;font-size:1rem}
.j-list{flex-direction:column;align-items:stretch;gap:6px;border-radius:14px;padding:14px 18px}
.j-list ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px;position:relative}
.j-list ul::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:color-mix(in srgb,var(--j-alert) 30%,var(--surface))}
.j-list li{position:relative;padding-left:24px;color:var(--j-alert);font-weight:600}
.j-list li::before{content:"";position:absolute;left:0;top:.2em;width:13px;height:13px;border-radius:50%;background:color-mix(in srgb,var(--j-alert) 22%,var(--surface))}
.j-list li.ok{color:var(--green-deep)}
.j-list li.ok::before{background:var(--green)}

.j-st{display:inline-flex;align-items:center;gap:5px;font:700 .72rem/1 var(--body);padding:6px 9px;border-radius:999px;white-space:nowrap;flex:none}
.j-st svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-todo{background:var(--j-alert-wash);color:var(--j-alert)}
.st-done{background:var(--green-wash);color:var(--green-deep)}
.st-now{background:none;color:var(--blue);padding-inline:2px;font-size:.8rem}
.st-due{background:var(--j-due-wash);color:var(--j-due)}
.j-flip{display:grid}
.j-flip>*{grid-area:1/1;transition:opacity .35s,transform .35s}
.j-task .j-flip>:first-child{opacity:1}
.j-task .j-flip>:last-child{opacity:0;transform:translateY(4px)}
.j-task.is-done .j-flip>:first-child{opacity:0;transform:translateY(-4px)}
.j-task.is-done .j-flip>:last-child{opacity:1;transform:none}
.j-task:not([data-flip]) .j-flip>:last-child{display:none}

/* slots (desktop) */
.pos-tl{left:12%;top:5%}.pos-t{left:39%;top:0}.pos-tr{left:60%;top:5%}
.pos-l{left:4%;top:40%}.pos-r{left:66%;top:36%}
.pos-bl{left:15%;top:72%}.pos-b{left:39%;top:86%}.pos-br{left:61%;top:72%}

/* progress ring */
.j-ring{position:absolute;left:27%;top:0;height:clamp(120px,32%,170px);aspect-ratio:1;border-radius:50%;background:var(--j-ink);color:var(--j-on-ink);display:grid;place-items:center;z-index:3;box-shadow:0 0 0 6px color-mix(in srgb,var(--j-ink) 25%,transparent)}
.j-ring svg{position:absolute;inset:6%;width:88%;height:88%;transform:rotate(-90deg)}
.j-ring circle{fill:none;stroke-width:6}
.j-ring .trk{stroke:color-mix(in srgb,var(--j-on-ink) 22%,var(--j-ink))}
.j-ring .bar{stroke:color-mix(in srgb,var(--j-on-ink) 70%,var(--j-ink));stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:calc(326.7 - 326.7 * var(--p,1))}
.j-ring-t{position:relative;text-align:center;display:grid;gap:2px;padding:0 18%}
.j-ring-t small{font-size:.66rem;opacity:.75;line-height:1.25}
.j-ring-t b{font:700 clamp(1.6rem,3vw,2.3rem)/1 var(--body);font-variant-numeric:tabular-nums}

/* circles layout */
.j-circles{position:absolute;inset:0}
.j-circ{position:absolute;height:36cqh;width:36cqh}
.j-circ.c1{left:14%;top:0}.j-circ.c2{left:calc(50% - 18cqh);top:-2%}.j-circ.c3{right:14%;top:0}.j-circ.c4{left:24%;top:47%}.j-circ.c5{right:24%;top:47%}
.j-disc{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--j-line);display:grid;place-items:center;align-content:center;gap:8px;color:var(--blue-deep);background:color-mix(in srgb,var(--surface) 40%,transparent)}
.j-disc::after{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid var(--j-line)}
.j-disc svg{width:34%;height:34%;stroke-width:1.3}
.j-disc span{font:700 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--heading)}
.j-mini{left:50%;top:calc(100% + 6px);transform:translateX(-50%);width:max-content;max-width:none;padding:7px 7px 7px 14px;gap:10px;border-radius:12px}
.j-mini b{font-size:.8rem}
.j-card .j-clab{display:none}

/* caption pill */
.j-cap{position:absolute;left:50%;bottom:-7%;transform:translateX(-50%);background:var(--j-ink);color:var(--j-on-ink);font-size:.78rem;font-weight:600;padding:8px 16px;border-radius:999px;white-space:nowrap;z-index:4}

/* closing panel */
.j-cta{position:absolute;left:50%;top:50%;width:min(820px,84%);transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:clamp(22px,3vw,36px);border-radius:18px;background:color-mix(in srgb,var(--blue) 12%,var(--surface));z-index:5;visibility:hidden}
.j-cta-l{display:grid;gap:12px;align-content:center}
.j-cta-l small{font-size:.82rem;color:var(--ink-2)}
.j-cta h2{font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--blue-deep)}
.j-cta p{color:var(--ink-2);font-size:.92rem}
.j-cta .hero-ctas{margin-top:8px;align-items:center}
.j-link{font-weight:700;color:var(--blue-deep);text-decoration:none}
.j-link:hover{text-decoration:underline}
.j-cta-r{position:relative;min-height:230px}
.j-note{position:absolute;left:0;top:0;display:flex;gap:10px;align-items:center;background:var(--surface);border-radius:999px;padding:8px 16px 8px 8px;font-size:.8rem;z-index:2}
.j-note small{display:block;color:var(--ink-3);font-size:.7rem}
.j-bell{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2)}
.j-bell svg{width:16px;height:16px;fill:none;stroke:var(--heading);stroke-width:1.7;stroke-linejoin:round}
.j-todo{position:absolute;left:4%;top:30%;width:62%;background:var(--blue-deep);color:#fff;border-radius:10px;padding:14px;display:grid;gap:10px;font-size:.78rem;z-index:1}
.j-todo>b{font-size:.86rem}
.j-todo-r{display:flex;justify-content:space-between;align-items:center;gap:8px;color:color-mix(in srgb,#fff 80%,var(--blue-deep))}
.j-todo .st-todo{background:color-mix(in srgb,#fff 18%,var(--blue-deep));color:#fff}
.j-todo .st-done{background:var(--green);color:var(--on-accent)}
.j-msg{position:absolute;right:-6%;top:22%;background:color-mix(in srgb,var(--blue) 30%,var(--surface));color:var(--heading);border-radius:10px;padding:8px 12px;font-size:.8rem;font-weight:600;z-index:2;max-width:60%}
.j-msg small{display:block;font-size:.66rem;font-weight:600;opacity:.7}
.j-cta-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--blue-deep);stroke-width:1.3;opacity:.6}

/* tabs */
.j-tabs{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,3vw,34px);margin-top:48px;position:relative;z-index:3}
.j-tab{background:none;border:0;padding:8px 6px 0;cursor:pointer;display:grid;gap:9px;justify-items:center;color:var(--ink-3);font:600 .86rem/1 var(--body);min-width:96px}
.j-tab[aria-pressed="true"]{color:var(--heading)}
.j-tab:hover{color:var(--blue)}
.j-bar{display:block;width:100%;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.j-bar i{display:block;height:100%;width:0;background:var(--blue-deep)}
.j-tab[aria-pressed="true"] .j-bar i{width:100%}
.j-pause{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--heading);display:none;place-items:center;cursor:pointer;margin-left:6px;align-self:center}
.j-pause svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.j-pause .i-play{display:none;fill:currentColor}
.journey.paused .j-pause .i-play{display:block}.journey.paused .j-pause .i-pause{display:none}

/* ---- animation states (only when journey.js is running) ---- */
.journey.js .j-pause{display:grid}
.journey.js .j-tab[aria-pressed="true"] .j-bar i{width:calc(var(--prog,0) * 100%)}
.journey.js .j-card,.journey.js .j-ring,.journey.js .j-circ,.journey.js .j-cap{opacity:0;transform:translateY(10px) scale(.97);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.journey.js .j-card.in,.journey.js .j-ring.in,.journey.js .j-circ.in,.journey.js .j-cap.in{opacity:1;transform:none}
.journey.js .j-cap{transform:translate(-50%,8px)}
.journey.js .j-cap.in{transform:translate(-50%,0)}
.journey.js .j-ch.phase-b .pa{opacity:0!important;transform:scale(.96)!important}
.journey.js .j-ch.out .j-card,.journey.js .j-ch.out .j-ring,.journey.js .j-ch.out .j-circ,.journey.js .j-ch.out .j-cap{opacity:0;transform:translateY(-8px)}
.journey.js .j-circ .j-mini{opacity:0;transform:translate(-50%,6px)}
.journey.js .j-circ.in .j-mini.in{opacity:1;transform:translateX(-50%)}
.journey.js .j-cta{visibility:visible;opacity:0;transform:translate(-50%,-46%);pointer-events:none;transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1)}
.journey.js .j-cta.in{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.journey.js .j-cta .j-note,.journey.js .j-cta .j-todo,.journey.js .j-cta .j-msg{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s}
.journey.js .j-cta.in .j-note{opacity:1;transform:none;transition-delay:.5s}
.journey.js .j-cta.in .j-todo{opacity:1;transform:none;transition-delay:.9s}
.journey.js .j-cta.in .j-msg{opacity:1;transform:none;transition-delay:1.4s}
.journey.js .j-links line{opacity:0;transition:opacity .6s}
.journey.js .j-links.in line{opacity:1}
/* scene-level states */
.journey.js .j-wind{stroke-dashoffset:1600}
.journey.js .j-stage:not(.s-draw) .j-wind{opacity:0;transition:opacity .4s}
.journey.js .j-stage.s-draw .j-wind{stroke-dashoffset:0}
.journey.js .j-wind-dot{opacity:0}.journey.js .j-stage.s-draw .j-wind-dot{opacity:1}
.journey.js .j-stage:not(.s-draw) .j-dash,.journey.js .j-stage:not(.s-draw) .j-dash-dot{opacity:0}
.journey.js .j-stage.s-later .j-dash2,.journey.js .j-stage.s-later .j-dash2-dot{opacity:.7}
.journey.js .j-stage.s-circles .j-centre{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.journey.js .j-stage.s-cta .j-centre{opacity:0;transform:translate(-50%,-50%) scale(.8)}
.journey.js .j-stage.s-cta .j-deco{opacity:0}
.j-deco{transition:opacity .6s}
/* "now" pulse */
@keyframes j-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 35%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
.journey.js .j-circ.in .j-mini:has(.st-now){animation:j-pulse 1.8s ease-in-out 2}

/* no-JS / reduced motion: chapter 1 with its final state is shown statically */
.journey:not(.js) .j-ch:not(.on){display:none}
.journey:not(.js) .j-ch .pa{display:none}

@media (max-width:980px){
  .j-head{grid-template-columns:1fr}
  .j-side{margin-top:0}
}
@media (max-width:760px){
  .j-stage{height:auto;aspect-ratio:4/5;margin-top:18px}
  .j-centre{height:auto;width:62%;top:50%}
  .j-card{max-width:48%;font-size:.76rem;padding:8px 12px 8px 8px;gap:8px}
  .j-card small{font-size:.68rem}
  .j-ic,.j-av,.j-bang{width:28px;height:28px}
  .j-task{min-width:0;padding:10px 12px}
  .j-list{padding:10px 12px}
  .pos-tl{left:0;top:3%}.pos-t{left:26%;top:0}.pos-tr{left:52%;top:3%}
  .pos-l{left:0;top:40%}.pos-r{left:52%;top:40%}
  .pos-bl{left:0;top:74%}.pos-b{left:26%;top:86%}.pos-br{left:52%;top:74%}
  .j-ring{left:2%;top:2%;height:auto;width:34%}
  .j-deco{display:none}
  .j-circ{height:34cqw;width:34cqw}
  .j-circ.c3,.j-circ.c5{right:auto}
  .j-circ.c1{left:4%;top:2%}.j-circ.c2{left:62%;top:2%}.j-circ.c3{left:33%;top:34%}.j-circ.c4{left:4%;top:64%}.j-circ.c5{left:62%;top:64%}
  .j-circles{display:flex;flex-direction:column;justify-content:center;gap:10px;padding-bottom:10%}
  .j-circ{position:relative;left:auto!important;right:auto!important;top:auto!important;width:auto;height:auto;display:flex;align-items:center;gap:10px}
  .j-disc{position:relative;inset:auto;width:56px;height:56px;flex:none}
  .j-disc span{display:none}
  .j-disc svg{width:24px;height:24px}
  .j-mini{position:relative;left:auto;top:auto;transform:none;flex:1;max-width:none;width:auto;justify-content:space-between}
  .j-mini b{font-size:.76rem}
  .j-card .j-clab{display:block;font:700 .62rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
  .journey.js .j-circ .j-mini{transform:translateY(6px)}
  .journey.js .j-circ.in .j-mini.in{transform:none}
  .j-cap{bottom:-9%}
  .j-tabs{margin-top:52px}
  .j-cta{grid-template-columns:1fr;width:100%;top:50%;padding:20px}
  .j-cta-r{display:none}
  .j-cap{font-size:.72rem;white-space:normal;text-align:center;max-width:92%}
  .j-tab{min-width:0;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){.j-orbit.o2{animation:none}}