/* Octawerks Pounamu theme + homepage calculator. Loaded after synapse-overrides.css */
:root{--paper:#12302A;--bone:#163730;--stone:#28493F;--mid:#86A294;--char-mid:#C3D2C8;--char:#DCE5DE;--ink:#EEF1E8;--accent:#8ED3A5;--accent-soft:rgba(142,211,165,0.10);--accent-mid:#6FB587;--loss:#F2A193}
body{background:var(--paper)}
.btn--primary{color:#0E231E}
.reveal{opacity:1!important;transform:none!important}
.nav.scrolled,.nav.is-scrolled{background:rgba(18,48,42,.92)}
/* one solid accent colour, no gradient */
:root{--accent-gradient:linear-gradient(var(--accent),var(--accent))}
.gradient-text,.accent-text,.accent-word{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--accent)!important}
/* calculator pills match the section label pills */
.oc-hero .pill-badge{background:rgba(142,211,165,0.12);border:1px solid rgba(142,211,165,0.35);color:var(--accent);-webkit-backdrop-filter:none;backdrop-filter:none}
.oc-hero .pill-badge svg{color:var(--accent)}
/* services: bigger, clearer */
.svc-tier__title{font-size:clamp(1.8rem,3vw,2.3rem)!important;font-weight:800;letter-spacing:-.035em;line-height:1;margin-bottom:.7rem}
.svc-tier__lead{font-size:1.15rem;font-weight:600;color:var(--accent);line-height:1.35;margin-bottom:1rem}
/* hand-drawn note, arrow drawn by JS from the note to the Audit title */
.skip-wrap{position:relative}
.skip-zone{position:relative;height:110px}
.skip-note{position:absolute;bottom:4px;left:calc(33.333% + 40px);color:var(--loss);pointer-events:none}
.skip-note p{margin:0;font:600 1.6rem/1.05 "Caveat","Segoe Print","Bradley Hand",cursive;transform:rotate(-3deg);white-space:nowrap}
.skip-note p span{font-size:1.3rem;opacity:.85}
.skip-svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:3;color:var(--loss);animation:skipNudge 1.6s ease-in-out infinite}
.skip-svg path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.skip-line{stroke-dasharray:var(--len,600);animation:skipDraw 3.4s ease-in-out infinite}
.skip-head{animation:skipHead 3.4s ease-in-out infinite}
@keyframes skipDraw{0%{stroke-dashoffset:var(--len,600)}40%,100%{stroke-dashoffset:0}}
@keyframes skipHead{0%,34%{opacity:0}42%,100%{opacity:1}}
@keyframes skipNudge{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,4px)}}
@media (prefers-reduced-motion:reduce){.skip-svg,.skip-line,.skip-head{animation:none}}
@media (max-width:900px){.skip-zone{height:auto;margin-bottom:5rem}.skip-note{position:static;display:flex;justify-content:flex-end}.skip-note p{white-space:normal;text-align:right}}
/* compact stat strip */
.hero-stats{padding:.5rem 0 1rem!important}
.hero-stats .stat-strip{margin-top:1.25rem;gap:1.5rem}
.hero-stats .stat-strip__item{padding:1rem 0 0}
.hero-stats .stat-strip__num{font-size:clamp(2.8rem,5.2vw,4.4rem);letter-spacing:-2px;margin-bottom:.4rem}
.hero-stats .stat-strip__num span{font-size:1.25rem}
.hero-stats .stat-strip__lbl{font-size:.9rem;line-height:1.55;max-width:32ch}
.hero-stats .stat-strip__src{margin-top:.3rem}
@media (max-width:900px){.hero-stats .stat-strip__item{padding-bottom:1.1rem}}
/* calculator hero */
.oc-hero .wrap{display:grid;gap:28px}
.oc-hero h1{margin:0;max-width:19ch;color:var(--ink)}
.oc-eye{font:600 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--char-mid)}
.oc-calc{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.oc-sliders{display:grid;gap:22px}
.oc-hint{font-size:14px;color:var(--char-mid);margin:0}
.oc-sl{display:grid;gap:9px}
.oc-sl label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:500;font-size:15.5px;color:var(--ink)}
.oc-sl output{font-weight:700;font-size:17px;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.oc-sl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0}
.oc-sl input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--accent) var(--p,50%),var(--stone) var(--p,50%));border-radius:2px}
.oc-sl input[type=range]::-moz-range-track{height:3px;background:var(--stone)}
.oc-sl input[type=range]::-moz-range-progress{height:3px;background:var(--accent)}
.oc-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid var(--accent);margin-top:-8.5px}
.oc-sl input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:3px solid var(--accent)}
.oc-sl input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.oc-result{border:1px solid var(--stone);border-radius:16px;padding:clamp(20px,3vw,30px);display:grid;gap:18px;background:rgba(0,0,0,.12)}
.oc-big{font-weight:800;font-size:clamp(2.8rem,6vw,4.2rem);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
.oc-big small{font-size:18px;font-weight:500;color:var(--char-mid);letter-spacing:0;margin-left:6px}
.oc-pair{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--stone);padding-top:14px}
.oc-pair div{display:grid;gap:4px}
.oc-pair div+div{border-left:1px solid var(--stone);padding-left:16px}
.oc-pair b{font-weight:700;font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink)}
.oc-pair span,.oc-fine{font-size:13px;color:var(--char-mid);margin:0}
.oc-pipe{display:grid;gap:18px;padding-top:8px}
.oc-nodes,.oc-drips{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.oc-nodes::before{content:"";position:absolute;left:10%;right:10%;top:9px;height:3px;background:var(--accent)}
.oc-nodes div{display:grid;justify-items:center;gap:10px;position:relative}
.oc-nodes i{width:21px;height:21px;border-radius:50%;background:var(--paper);border:3px solid var(--accent)}
.oc-nodes span{font-weight:600;font-size:15px;color:var(--ink)}
.oc-drips{grid-template-columns:1fr 2fr 2fr 2fr 2fr 1fr}
.oc-drip{display:grid;justify-items:center;text-align:center;gap:3px;padding-inline:6px}
.oc-drip::before{content:"";width:1px;height:16px;background:currentColor;opacity:.5;margin-bottom:4px}
.oc-drip b{font-weight:700;font-size:19px;font-variant-numeric:tabular-nums}
.oc-drip span{font-size:13px;line-height:1.35;color:var(--char-mid);max-width:18ch}
.oc-drip em{display:none}
.oc-drip.loss,.oc-drip.loss b{color:var(--loss)}
.oc-drip.stuck b{color:var(--ink)}
.oc-drip.ok b{color:var(--accent)}
.oc-key{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--char-mid)}
.oc-key span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.oc-key .kl::before{background:var(--loss)}.oc-key .ks::before{background:var(--ink)}
@media (max-width:860px){
  .oc-calc{grid-template-columns:1fr}
  .oc-nodes{display:none}
  .oc-drips{grid-template-columns:1fr;border-left:3px solid var(--accent);margin-left:9px}
  .oc-sp{display:none}
  .oc-drip{justify-items:start;text-align:left;padding:12px 0 12px 18px}
  .oc-drip::before{display:none}
  .oc-drip span{max-width:none}
  .oc-drip em{display:block;font-style:normal;font-weight:600;font-size:13px;color:var(--ink)}
}
@media (max-width:480px){.oc-pair{grid-template-columns:1fr;gap:12px}.oc-pair div+div{border-left:0;padding-left:0;border-top:1px solid var(--stone);padding-top:12px}}

/* hover greys from the old theme */
.svc-tier:hover,.hw-step:hover{background:#1A3D35!important}

/* currency suffix on sample dashboards */
.cur{font-size:.5em;font-weight:600;opacity:.75;margin-left:.3em;letter-spacing:0}
