/*
Theme Name: DeskWork & Co
Description: Custom WordPress theme based on the supplied DeskWork reference design.
Version: 1.0.0
Text Domain: deskwork
*/

  html{color-scheme:light}
  body{margin:0;font:14px "Poppins",Arial,sans-serif;background:#FFFFFF}
  img{max-width:100%}
  [hidden]{display:none!important}


/* ============================================================
   DeskWork & Co — tokens
   Current site palette:
   Walnut  = primary buttons only
   Warm Tan = accents, dividers, slider (never body text)
   Forest Green = light-mode structure, highlights and panels
   Deep Slate = dark-mode structure and panels
   Photo Green (#2C3B2B) = all green surfaces, ticks and selected states
   ============================================================ */
:root{
  color-scheme:light;
  --bg:#FFFFFF;              /* Clean white page background */
  --bg-alt:#F8F9FA;          /* Neutral separation between sections */
  --surface:#FFFFFF;
  --text:#1B1B1B;            /* Ink */
  --text-mute:#57534B;
  --line:rgba(27,27,27,.13);
  --line-soft:rgba(168,132,84,.32);
  --accent:#A88454;          /* Warm Tan */
  --accent-tint:rgba(168,132,84,.10);
  --btn:#7D5B3C;             /* Walnut */
  --btn-hover:#68492D;
  --btn-text:#FFFFFF;
  --structure:#2C3B2B;       /* Forest Green */
  --structure-tint:rgba(44,59,43,.09);
  --panel:#2C3B2B;
  --panel-2:#2C3B2B;
  --panel-3:#2C3B2B;
  --panel-text:#F6F3ED;
  --panel-mute:#E6E2D9;
  --panel-line:rgba(246,243,237,.16);
  --ok:#2C3B2B;              /* Photo Green */
  --ok-tint:rgba(44,59,43,.11);
  --ok-line:rgba(44,59,43,.40);
  --shadow:0 1px 2px rgba(27,27,27,.05), 0 12px 32px -16px rgba(27,27,27,.18);
  --shadow-lift:0 2px 4px rgba(27,27,27,.06), 0 26px 54px -22px rgba(27,27,27,.30);

  --wrap:1148px;
  --measure:64ch;
  --radius:4px;
  --radius-lg:8px;

  --t-display:clamp(2.65rem,6.4vw,4.5rem);
  --t-h2:clamp(1.85rem,3.7vw,2.7rem);
  --t-h3:clamp(1.15rem,1.9vw,1.35rem);
  --t-lead:clamp(1.04rem,1.55vw,1.2rem);
  --t-sm:.905rem;
  --t-xs:.815rem;

  --sans:"Poppins",Arial,sans-serif;
  --serif:"Poppins",Arial,sans-serif;
}
/* Dark is opt-in only — the page always opens on white.
   Own attribute (data-dw) so the host's theme stamp never overrides the choice. */
:root[data-dw="dark"]{
  color-scheme:dark;
  --bg:#14191C;
  --bg-alt:#1A2126;
  --surface:#1E262B;
  --text:#F0EBE3;
  --text-mute:#A7A29A;
  --line:rgba(240,235,227,.15);
  --line-soft:rgba(192,154,102,.34);
  --accent:#C09A66;
  --accent-tint:rgba(192,154,102,.12);
  --btn:#8C6845;
  --btn-hover:#9E7853;
  --btn-text:#FFFFFF;
  --structure:#7099B0;
  --structure-tint:rgba(112,153,176,.13);
  --panel:#22323C;
  --panel-2:#1B2831;
  --panel-3:#16212A;
  --panel-text:#F0EBE3;
  --panel-mute:#9DB5C1;
  --panel-line:rgba(240,235,227,.14);
  --ok:#2C3B2B;
  --ok-tint:rgba(44,59,43,.16);
  --ok-line:rgba(44,59,43,.44);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 26px 54px -22px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:84px}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.sec{padding-block:clamp(64px,8.2vw,116px)}
.sec--alt{background:var(--bg-alt)}
.stack{display:flex;flex-direction:column}
.eyebrow{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--structure);display:flex;align-items:center;gap:11px;
}
.eyebrow::after{content:"";flex:0 0 46px;height:1px;background:var(--accent);opacity:.75}
.eyebrow--plain::after{display:none}
.lead{font-size:var(--t-lead);line-height:1.62;color:var(--text-mute);max-width:var(--measure)}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:min(var(--measure),780px);margin-bottom:clamp(38px,4.5vw,58px)}
.sec-head h2{font-size:var(--t-h2)}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons (Walnut = primary only) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:.945rem;font-weight:600;letter-spacing:.005em;
  padding:14px 24px;border-radius:var(--radius);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease;
}
.btn--primary{background:var(--btn);color:var(--btn-text);border-color:var(--btn)}
.btn--primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent);background:var(--accent-tint)}
.btn--on-panel{background:transparent;color:var(--panel-text);border-color:var(--panel-line)}
.btn--on-panel:hover{border-color:var(--accent);background:rgba(255,255,255,.06)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn--sm{padding:11px 18px;font-size:.885rem}

/* placeholder marker — for the bits Adriaan swaps out */
.ph{
  display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--btn);background:var(--accent-tint);border:1px dashed var(--accent);
  padding:3px 8px;border-radius:100px;
}
:root[data-dw="dark"] .ph{color:var(--accent)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:26px;min-height:66px;padding-block:10px}
.mark{font-family:var(--serif);font-size:1.26rem;font-weight:600;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;margin-right:auto}
.mark i{font-style:italic;color:var(--accent);font-weight:400}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--text-mute);
  padding-block:4px;border-bottom:1.5px solid transparent;transition:color .16s,border-color .16s;
}
.nav-links a:hover{color:var(--text);border-bottom-color:var(--accent)}
@media (max-width:880px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,6.5vw,86px) clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(36px,5vw,68px);align-items:center}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero h1{font-size:var(--t-display);letter-spacing:-.03em;line-height:1.02}
.hero h1 em{font-style:italic;font-weight:400;color:var(--structure)}
.hero-copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-notes{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--t-xs);color:var(--text-mute);font-weight:500}
.hero-notes span{display:flex;align-items:center;gap:7px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

/* the tray */
.tray{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);overflow:hidden;position:relative;
}
.tray::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent)}
.tray-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:22px 22px 15px;border-bottom:1px solid var(--line);
}
.tray-top h3{font-size:1.12rem}
.tray-count{font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-mute);font-variant-numeric:tabular-nums}
.slips{list-style:none;margin:0;padding:8px 10px;display:flex;flex-direction:column}
.slip{
  display:flex;align-items:flex-start;gap:13px;padding:12px 12px;border-radius:var(--radius);
  transition:background .45s ease,opacity .45s ease;
}
.slip + .slip{box-shadow:inset 0 1px 0 var(--line)}
.tick{
  flex:none;width:20px;height:20px;margin-top:2px;border-radius:3px;
  border:1.5px solid var(--line-soft);background:transparent;
  display:grid;place-items:center;transition:background .3s ease,border-color .3s ease;
}
.tick svg{width:12px;height:12px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .34s ease .06s}
.slip-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.slip-txt b{font-weight:600;font-size:.93rem;line-height:1.35}
.slip-txt small{font-size:var(--t-xs);color:var(--text-mute)}
.slip.done{background:var(--ok-tint)}
.slip.done .tick{background:var(--ok);border-color:var(--ok)}
.slip.done .tick svg{stroke-dashoffset:0}
.slip.done .slip-txt b{text-decoration:line-through;text-decoration-color:var(--ok-line);text-decoration-thickness:1.5px;color:var(--text-mute)}
.tray-foot{
  display:flex;align-items:center;gap:10px;padding:15px 22px;border-top:1px solid var(--line);
  background:var(--bg-alt);font-size:var(--t-xs);font-weight:600;color:var(--text-mute);
  opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform .5s ease;
}
.tray-foot.on{opacity:1;transform:none}
.tray-foot b{color:var(--ok);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}

/* ---------- where the week goes ---------- */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(28px,4vw,56px)}
.ledger-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-block:15px;border-bottom:1px solid var(--line);
}
.ledger-row span{font-size:.965rem}
.ledger-row b{font-family:var(--serif);font-size:1.22rem;font-weight:500;color:var(--structure);font-variant-numeric:tabular-nums;white-space:nowrap}
.total{
  margin-top:34px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  padding:22px 24px;border-left:3px solid var(--accent);background:var(--accent-tint);border-radius:0 var(--radius) var(--radius) 0;
}
.total strong{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.15rem);font-weight:500;letter-spacing:-.02em}
.total p{font-size:var(--t-sm);color:var(--text-mute);max-width:46ch}

/* ---------- what we handle: ledger rail + detail pane ---------- */
.handle{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(18px,2.4vw,32px);align-items:start}
@media (max-width:900px){.handle{grid-template-columns:1fr}}

.rail{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.rail-i{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--sans);font-size:.94rem;color:var(--text);
  background:transparent;border:0;border-left:3px solid transparent;padding:14px 16px;
  transition:background .22s ease,border-color .22s ease;
}
.rail-i + .rail-i{box-shadow:inset 0 1px 0 var(--line)}
.rail-i:hover{background:var(--accent-tint)}
.rail-i[aria-selected="true"]{background:var(--structure-tint);border-left-color:var(--accent)}
.rail-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.32;font-weight:500}
.rail-i[aria-selected="true"] .rail-t{font-weight:600}
.rail-t em{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.rail-h{
  flex:none;font-size:.78rem;font-weight:700;color:var(--structure);font-variant-numeric:tabular-nums;
  background:var(--structure-tint);padding:3px 8px;border-radius:3px;
}
@media (max-width:900px){
  .rail{flex-direction:row;overflow-x:auto;scroll-snap-type:x proximity}
  .rail-i{flex:0 0 auto;border-left:0;border-bottom:3px solid transparent;padding:13px 16px;scroll-snap-align:start}
  .rail-i + .rail-i{box-shadow:inset 1px 0 0 var(--line)}
  .rail-i[aria-selected="true"]{border-bottom-color:var(--accent)}
  .rail-t{white-space:nowrap}
  .rail-h{display:none}
}

.pane{
  display:none;flex-direction:column;gap:20px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,2.8vw,32px);
}
.pane.is-on{display:flex}
.pane-head{display:flex;flex-direction:column;gap:9px}
.pane-head h3{font-size:clamp(1.28rem,2.4vw,1.62rem)}
.pane-head p{font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.45;color:var(--structure)}
.pane-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pane-list li{display:flex;gap:13px;align-items:flex-start;padding-block:11px;font-size:var(--t-sm);line-height:1.55}
.pane-list li + li{box-shadow:inset 0 1px 0 var(--line)}
.pane-list li::before{content:"";flex:none;width:7px;height:7px;margin-top:7px;border-radius:1px;background:var(--accent);transform:rotate(45deg)}
.pane-note{
  font-size:var(--t-xs);color:var(--text-mute);line-height:1.55;
  padding:12px 14px;background:var(--bg-alt);border-left:2px solid var(--line-soft);border-radius:0 var(--radius) var(--radius) 0;
}
.pane-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.pane-hrs{display:flex;align-items:baseline;gap:9px;margin-right:auto}
.pane-hrs b{font-family:var(--sans);font-size:1.48rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.pane-hrs span{font-size:var(--t-xs);color:var(--text-mute)}
.add.in-plan{background:transparent;color:var(--ok);border-color:var(--ok-line)}
.add.in-plan:hover{background:var(--ok-tint);border-color:var(--ok);transform:none;box-shadow:none}

/* ---------- recurring calls to action ---------- */
.cta-inline{
  margin-top:clamp(32px,4vw,46px);padding-top:clamp(22px,2.8vw,30px);border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;
}
.cta-inline p{font-size:var(--t-lead);line-height:1.55;flex:1 1 330px;max-width:58ch;color:var(--text-mute)}
.cta-inline p b{font-weight:600;color:var(--text)}
.cta-inline .btn{flex:none}
.console .cta-inline{border-top-color:var(--panel-line)}
.console .cta-inline p{color:var(--panel-mute)}
.console .cta-inline p b{color:var(--panel-text)}

.cta-band{
  margin-top:clamp(34px,4.2vw,50px);display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;
  padding:clamp(24px,3.2vw,36px);border-radius:var(--radius-lg);
  background:var(--accent-tint);border-left:4px solid var(--accent);
}
.cta-band div{flex:1 1 340px;display:flex;flex-direction:column;gap:8px}
.cta-band h3{font-size:clamp(1.3rem,2.4vw,1.66rem)}
.cta-band p{font-size:var(--t-sm);color:var(--text-mute);line-height:1.55;max-width:52ch}
.cta-acts{display:flex;flex-wrap:wrap;gap:11px;flex:none}

/* ---------- sticky action bar, phones only ---------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -20px rgba(27,27,27,.7);
  transform:translateY(115%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.mbar.on{transform:none}
.mbar-in{display:flex;align-items:center;gap:14px;padding:10px 16px}
.mbar-txt{display:flex;flex-direction:column;line-height:1.2;margin-right:auto;min-width:0}
.mbar-txt span{font-size:.61rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.mbar-txt b{font-size:1.02rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:880px){.mbar{display:block}body{padding-bottom:66px}}

/* ---------- builder console (theme panel palette) ---------- */
.console{background:var(--panel);color:var(--panel-text)}
.console .eyebrow{color:var(--accent)}
.console .eyebrow::after{background:var(--accent)}
.console h2{color:var(--panel-text);font-size:var(--t-h2)}
.console .lead{color:var(--panel-mute)}
.build{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,3.4vw,46px);align-items:start}
@media (max-width:940px){.build{grid-template-columns:1fr}}
.build-col{display:flex;flex-direction:column;gap:30px}
.step{display:flex;flex-direction:column;gap:16px}
.step-label{display:flex;align-items:center;gap:11px;font-size:var(--t-xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--panel-mute)}
.step-label i{
  font-style:normal;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--accent);color:#1B1B1B;font-size:.7rem;font-weight:700;letter-spacing:0;
}
.step h3{color:var(--panel-text);font-size:var(--t-h3)}

/* slider (Warm Tan) */
.slider-box{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:var(--radius-lg);padding:24px 22px 20px;display:flex;flex-direction:column;gap:18px}
.hrs{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hrs b{font-family:var(--sans);font-size:clamp(2.4rem,5.4vw,3.1rem);font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;color:var(--panel-text)}
.hrs span{font-size:1rem;color:var(--panel-mute);font-weight:500}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;margin:0;display:block;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:100px;
  background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill,20%),rgba(255,255,255,.18) var(--fill,20%),rgba(255,255,255,.18) 100%);
}
input[type=range]::-moz-range-track{height:6px;border-radius:100px;background:rgba(255,255,255,.18)}
input[type=range]::-moz-range-progress{height:6px;border-radius:100px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;
  background:var(--accent);border:4px solid var(--panel-2);box-shadow:0 2px 10px rgba(0,0,0,.45);transition:transform .12s ease;
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--accent);border:4px solid var(--panel-2);box-shadow:0 2px 10px rgba(0,0,0,.45);
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.scale{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--panel-mute);font-variant-numeric:tabular-nums}
.hrs-sub{font-size:var(--t-sm);color:var(--panel-mute)}
.hrs-sub b{color:var(--panel-text);font-weight:600;font-variant-numeric:tabular-nums}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--sans);font-size:.885rem;font-weight:500;text-align:left;
  padding:10px 15px 10px 12px;border-radius:100px;
  background:var(--panel-2);border:1.5px solid var(--panel-line);color:var(--panel-mute);
  transition:background .16s,border-color .16s,color .16s;
}
.chip:hover{border-color:var(--accent);color:var(--panel-text)}
.chip .cbox{
  width:17px;height:17px;border-radius:50%;flex:none;border:1.5px solid var(--panel-line);
  display:grid;place-items:center;transition:background .18s,border-color .18s;
}
.chip .cbox svg{width:10px;height:10px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .16s}
.chip[aria-pressed="true"]{background:var(--ok-tint);border-color:var(--ok-line);color:var(--panel-text)}
.chip[aria-pressed="true"] .cbox{background:var(--ok);border-color:var(--ok)}
.chip[aria-pressed="true"] .cbox svg{opacity:1}
.chip em{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.chips-note{font-size:var(--t-xs);color:var(--panel-mute)}

/* quote card */
.quote{
  position:sticky;top:84px;background:var(--panel-3);border:1px solid var(--panel-line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.65);
}
@media (max-width:940px){.quote{position:static}}
.quote-top{padding:24px 24px 20px;border-bottom:1px solid var(--panel-line);display:flex;flex-direction:column;gap:14px}
.tier{
  align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#1B1B1B;background:var(--accent);padding:5px 11px;border-radius:3px;
}
.price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.price b{
  font-family:var(--sans);font-size:clamp(2.5rem,6vw,3.35rem);font-weight:700;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--panel-text);
}
.price span{font-size:.95rem;color:var(--panel-mute);font-weight:500}
.rate-line{font-size:var(--t-sm);color:var(--panel-mute)}
.rate-line b{color:var(--panel-text);font-weight:600;font-variant-numeric:tabular-nums}
.quote-rows{list-style:none;margin:0;padding:18px 24px;display:flex;flex-direction:column;gap:0}
.qrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-block:10px;font-size:var(--t-sm)}
.qrow + .qrow{box-shadow:inset 0 1px 0 var(--panel-line)}
.qrow span{color:var(--panel-mute)}
.qrow b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.nudge{
  margin:0 24px 18px;padding:13px 15px;border-radius:var(--radius);
  background:rgba(192,154,102,.14);border-left:3px solid var(--accent);
  font-size:var(--t-xs);line-height:1.5;color:var(--panel-text);
}
.quote-list{list-style:none;margin:0;padding:0 24px 20px;display:flex;flex-direction:column;gap:9px}
.quote-list li{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-sm);color:var(--panel-text);line-height:1.45}
.quote-list li svg{width:15px;height:15px;flex:none;margin-top:3px;stroke:var(--ok);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.quote-cta{padding:0 24px 24px;display:flex;flex-direction:column;gap:11px}
.quote-cta .btn{width:100%}
.quote-fine{font-size:.73rem;color:var(--panel-mute);line-height:1.5}
.saving{
  margin:0 24px 18px;padding:14px 16px;border-radius:var(--radius);
  background:var(--ok-tint);border:1px solid var(--ok-line);
}
.saving b{display:block;font-family:var(--sans);font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.saving span{font-size:.73rem;color:var(--panel-mute);line-height:1.5;display:block;margin-top:3px}

/* ---------- packages ---------- */
.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;align-items:stretch}
.pkg{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow);
}
.pkg--pick{border:1.5px solid var(--structure);box-shadow:var(--shadow-lift);position:relative}
.pkg-ribbon{
  position:absolute;top:-11px;left:24px;background:var(--structure);color:#fff;
  font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:3px;
}
.pkg h3{font-size:1.3rem}
.pkg-hrs{font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-mute)}
.pkg-price{display:flex;align-items:baseline;gap:7px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pkg-price b{font-family:var(--sans);font-size:2.1rem;font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;min-width:6.1ch;display:inline-block}
.pkg-price span{font-size:.85rem;color:var(--text-mute)}
.pkg ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.pkg li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);line-height:1.5}
.pkg li svg{width:15px;height:15px;flex:none;margin-top:3px;stroke:var(--ok);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pkg .btn{width:100%;margin-top:4px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(24px,3vw,40px)}
.stepcard{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:2px solid var(--accent)}
.stepcard em{font-style:normal;font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.16em;color:var(--structure);font-variant-numeric:tabular-nums}
.stepcard h3{font-size:1.22rem}
.stepcard p{font-size:var(--t-sm);color:var(--text-mute);line-height:1.58}
.stepcard small{font-size:var(--t-xs);font-weight:600;color:var(--text-mute)}

/* ---------- comparison ---------- */
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
table.cmp{border-collapse:collapse;width:100%;min-width:720px;font-size:var(--t-sm)}
table.cmp th,table.cmp td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
table.cmp thead th{
  font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-mute);background:var(--bg-alt);white-space:nowrap;
}
table.cmp tbody th{font-weight:600;font-size:var(--t-sm);color:var(--text);width:23%}
table.cmp .own{background:var(--structure);color:#fff;width:27%}
table.cmp thead .own{background:var(--panel-3);color:#fff}
:root[data-dw="dark"] table.cmp .own,:root[data-dw="dark"] table.cmp thead .own{background:#2C4351}
table.cmp .own b{font-weight:600}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
.tnote{margin-top:14px;font-size:var(--t-xs);color:var(--text-mute);max-width:var(--measure)}

/* ---------- testimonial slots ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:20px}
.qslot{
  border:1.5px dashed var(--line-soft);border-radius:var(--radius-lg);padding:26px 24px;
  display:flex;flex-direction:column;gap:16px;background:var(--surface);
}
.qslot p{font-family:var(--serif);font-size:1.1rem;line-height:1.5;color:var(--text-mute)}
.qslot footer{display:flex;flex-direction:column;gap:2px;font-size:var(--t-xs);color:var(--text-mute)}
.qslot footer b{color:var(--text);font-size:var(--t-sm);font-weight:600}

/* ---------- faq ---------- */
.faq{max-width:820px;display:flex;flex-direction:column}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--serif);font-size:1.12rem;font-weight:500;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq .ans{padding:0 40px 22px 0;font-size:var(--t-sm);color:var(--text-mute);line-height:1.65;max-width:var(--measure)}

/* ---------- booking ---------- */
.book{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,4vw,56px);align-items:start}
@media (max-width:880px){.book{grid-template-columns:1fr}}
.book-side{display:flex;flex-direction:column;gap:22px}
.contact{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.contact a{display:flex;align-items:baseline;gap:10px;text-decoration:none;font-size:var(--t-sm);font-weight:500}
.contact a b{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--text-mute);min-width:74px;font-weight:700}
.contact a span{border-bottom:1.5px solid var(--line-soft)}
.contact a:hover span{border-bottom-color:var(--accent)}
form.enq{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,32px);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:var(--t-xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-mute)}
.field input,.field textarea{
  font-family:var(--sans);font-size:.95rem;color:var(--text);background:var(--bg);
  border:1.5px solid var(--line);border-radius:var(--radius);padding:12px 14px;width:100%;
  transition:border-color .16s;
}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field textarea{resize:vertical;min-height:104px;line-height:1.55}
.plan-echo{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;
  padding:14px 16px;border-radius:var(--radius);background:var(--structure-tint);border-left:3px solid var(--structure);
  font-size:var(--t-sm);
}
.plan-echo b{font-weight:600;font-variant-numeric:tabular-nums}
.plan-echo a{font-size:var(--t-xs);font-weight:600;color:var(--structure);margin-left:auto}
.form-fine{font-size:var(--t-xs);color:var(--text-mute);line-height:1.55}
.sent{
  display:none;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius);
  background:var(--ok-tint);border:1px solid var(--ok-line);font-size:var(--t-sm);line-height:1.5;
}
.sent.on{display:flex}
.sent svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--ok);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:44px 40px;background:var(--bg-alt)}
.foot-in{display:flex;flex-wrap:wrap;gap:28px 44px;align-items:flex-start;justify-content:space-between}
.foot-brand{display:flex;flex-direction:column;gap:8px;max-width:34ch}
.foot-brand p{font-size:var(--t-xs);color:var(--text-mute);line-height:1.6}
.foot-cols{display:flex;flex-wrap:wrap;gap:40px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col b{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mute)}
.foot-col a{font-size:var(--t-sm);text-decoration:none;color:var(--text)}
.foot-col a:hover{color:var(--accent)}
.foot-bot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--t-xs);color:var(--text-mute)}

/* ============================================================
   MOTION LAYER
   Nothing is hidden by CSS alone. The .pre class that holds a
   reveal target back is added by script, and only to elements
   already below the fold — so the page at rest is whole, and
   with scripting off nothing is ever stuck invisible.
   ============================================================ */

/* scroll progress */
.sbar{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}

/* reveal on scroll */
.rv{transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--d,0s),transform .72s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.rv.pre{opacity:0;transform:translateY(24px)}
/* the quote card is position:sticky — fade it, never move it */
.quote.rv.pre{transform:none}

/* the eyebrow rule draws itself */
.eyebrow::after{transform-origin:0 50%;transition:transform .85s cubic-bezier(.22,.61,.36,1) .22s}
.pre .eyebrow::after,.eyebrow.pre::after{transform:scaleX(0)}

/* hero entrance — pure keyframes, no observer, resolves on its own */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-copy > *{animation:riseIn .68s cubic-bezier(.22,.61,.36,1) both}
.hero-copy > *:nth-child(1){animation-delay:.04s}
.hero-copy > *:nth-child(2){animation-delay:.12s}
.hero-copy > *:nth-child(3){animation-delay:.20s}
.hero-copy > *:nth-child(4){animation-delay:.28s}
.hero-copy > *:nth-child(5){animation-delay:.36s}
.tray{animation:riseIn .85s cubic-bezier(.22,.61,.36,1) .18s both}

/* slips deal themselves onto the desk */
@keyframes slipIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.slip{animation:slipIn .5s cubic-bezier(.22,.61,.36,1) both}
.slip:nth-child(1){animation-delay:.34s}
.slip:nth-child(2){animation-delay:.42s}
.slip:nth-child(3){animation-delay:.50s}
.slip:nth-child(4){animation-delay:.58s}
.slip:nth-child(5){animation-delay:.66s}
.slip:nth-child(6){animation-delay:.74s}
.tick{transform:scale(1);transition:background .3s ease,border-color .3s ease,transform .38s cubic-bezier(.34,1.56,.64,1)}
.slip.done .tick{transform:scale(1.14)}

/* nav condenses once you leave the hero */
.nav{transition:box-shadow .3s ease}
.nav-in{transition:min-height .28s ease}
.nav.stuck{box-shadow:0 8px 26px -20px rgba(27,27,27,.55)}
.nav.stuck .nav-in{min-height:56px}

/* theme toggle */
.tt{
  width:38px;height:38px;flex:none;border-radius:50%;cursor:pointer;position:relative;
  border:1.5px solid var(--line);background:transparent;color:var(--text);display:grid;place-items:center;
  transition:border-color .2s,background .2s;
}
.tt:hover{border-color:var(--accent);background:var(--accent-tint)}
.tt svg{
  width:17px;height:17px;position:absolute;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .32s ease,transform .5s cubic-bezier(.34,1.3,.64,1);
}
.tt .ico-moon{opacity:0;transform:rotate(-75deg) scale(.45)}
:root[data-dw="dark"] .tt .ico-sun{opacity:0;transform:rotate(75deg) scale(.45)}
:root[data-dw="dark"] .tt .ico-moon{opacity:1;transform:none}

/* buttons and cards respond to the pointer */
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px var(--btn)}
.pkg{transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s ease,border-color .25s ease}
.pkg:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.pkg:hover:not(.pkg--pick){border-color:var(--line-soft)}
.pane.is-on{animation:paneIn .42s cubic-bezier(.22,.61,.36,1) both}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane-list li{transition:transform .22s ease}
.pane-list li:hover{transform:translateX(3px)}
.qslot{transition:border-color .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.qslot:hover{border-color:var(--accent);transform:translateY(-4px)}
.ledger-row{transition:border-color .25s ease}
.ledger-row:hover{border-bottom-color:var(--accent)}
.foot-col a{transition:color .2s ease,transform .2s ease}
.foot-col a:hover{transform:translateX(3px)}

/* chips: the tick springs in */
.chip{transition:background .18s,border-color .18s,color .18s,transform .16s ease}
.chip:active{transform:scale(.96)}
.chip .cbox svg{transform:scale(.4);transition:opacity .18s ease,transform .38s cubic-bezier(.34,1.7,.64,1)}
.chip[aria-pressed="true"] .cbox svg{opacity:1;transform:none}

/* slider */
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(168,132,84,.20),0 2px 10px rgba(0,0,0,.45)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(168,132,84,.32),0 2px 10px rgba(0,0,0,.45)}

/* the quote reacts when the plan changes */
@keyframes priceBump{0%{transform:translateY(0)}32%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.price b.bump{animation:priceBump .46s cubic-bezier(.34,1.4,.64,1)}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.quote-rows li,.quote-list li{animation:rowIn .34s cubic-bezier(.22,.61,.36,1) both}
.quote-rows li:nth-child(2),.quote-list li:nth-child(2){animation-delay:.05s}
.quote-rows li:nth-child(3),.quote-list li:nth-child(3){animation-delay:.10s}
.quote-rows li:nth-child(4),.quote-list li:nth-child(4){animation-delay:.15s}
.quote-rows li:nth-child(5),.quote-list li:nth-child(5){animation-delay:.20s}
.quote-rows li:nth-child(n+6),.quote-list li:nth-child(n+6){animation-delay:.25s}
.nudge,.saving{transition:opacity .3s ease}

/* ambient drift behind the console */
.console{position:relative;overflow:hidden}
.console > .wrap{position:relative;z-index:1}
.console::before{
  content:"";position:absolute;width:min(780px,90vw);aspect-ratio:1;right:-160px;top:-230px;
  border-radius:50%;pointer-events:none;max-width:100%;
  background:radial-gradient(circle,rgba(168,132,84,.17),rgba(168,132,84,0) 66%);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-70px,60px,0)}}

/* FAQ answers ease open */
@keyframes ansIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.faq details[open] .ans{animation:ansIn .4s cubic-bezier(.22,.61,.36,1) both}
.faq summary{transition:color .2s ease}
.faq summary:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv.pre{opacity:1!important;transform:none!important}
  .console::before{display:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}