[hidden]:not([hidden=until-found]){display:none!important}

/* ============================================================
   TOKENS - neutral paper, ink-led. Green is an accent only.
   ============================================================ */
:root{
  --paper:#F0F1ED;        /* neutral paper */
  --bar:#E6E8E0;          /* ledger stripe (canvas only) */
  --card:#FAFAF9;         /* fresh sheet */
  --ink:#191A15;          /* near-black ink */
  --ink-soft:#5C6055;     /* secondary text */
  --ink-faint:#6B6F64;
  --rule:#D3D6CB;         /* ledger rule */
  --rule-soft:#E3E5DD;
  --green:#34842F;        /* accent. used sparingly */
  --green-deep:#1E5B22;
  --green-wash:#EAF2E6;
  --red:#B3412B;          /* red pen. used twice, no more */
  --shadow:14 24 9;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1180px;
  --pad:clamp(1.15rem,4vw,2.75rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121310; --bar:#181A14; --card:#1A1C16;
    --ink:#EDEEE7; --ink-soft:#A6A99D; --ink-faint:#84887C;
    --rule:#2E3129; --rule-soft:#24261F;
    --green:#7CC95C; --green-deep:#A6DEA8; --green-wash:#1A2413;
    --red:#E2795F; --shadow:0 0 0;
  }
}
:root[data-theme="dark"]{
  --paper:#121310; --bar:#181A14; --card:#1A1C16;
  --ink:#EDEEE7; --ink-soft:#A6A99D; --ink-faint:#84887C;
  --rule:#2E3129; --rule-soft:#24261F;
  --green:#7CC95C; --green-deep:#A6DEA8; --green-wash:#1A2413;
  --red:#E2795F; --shadow:0 0 0;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.45vw + .93rem,1.09rem);
  line-height:1.62;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:900;
  letter-spacing:-.028em;
  line-height:1.02;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
a{color:inherit}
img{max-width:100%}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

/* mono utility label — the file-tab / ledger-column voice */
.lbl{
  font-family:var(--f-serif); font-style:normal; font-size:0.99rem; font-weight:500;
  letter-spacing:0;  color:var(--ink-faint);
}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2.5px solid var(--green); outline-offset:3px; border-radius:2px;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:.7rem 1.1rem;
  font-family:var(--f-serif); font-style:normal; font-size:1.02rem;
}
.skip:focus{left:.5rem; top:.5rem}

/* ============================================================ MARK */
.mark{width:30px; height:30px; flex:none; display:block}
.mark .tab{fill:var(--green)}
.mark .step{fill:var(--ink)}

/* ============================================================ HEADER */
.hdr{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(11px) saturate(1.3);
  border-bottom:1px solid var(--rule-soft);
  transition:padding .28s ease, border-color .28s ease;
}
.hdr-in{
  display:flex; align-items:center; gap:1.5rem;
  padding-block:1.05rem; transition:padding .28s ease;
}
/* the bar keeps one height while scrolling; a changing height made the page jump */
.hdr.tight{border-color:var(--rule)}

.brand{display:flex; align-items:center; gap:.62rem; text-decoration:none; margin-right:auto}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-name{
  font-family:var(--f-display); font-weight:900; font-size:1.075rem;
  letter-spacing:-.02em; text-transform:uppercase;
}
.brand-sub{
  font-family:var(--f-serif); font-style:normal; font-size:0.88rem; letter-spacing:0;
  color:var(--ink-faint);  margin-top:.22em;
}

.nav{display:flex; gap:.15rem; align-items:center}
.nav a{
  font-size:.888rem; font-weight:500; text-decoration:none; color:var(--ink-soft);
  padding:.44rem .7rem; border-radius:3px; position:relative; white-space:nowrap;
  transition:color .18s ease;
}
.nav a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.24rem;
  height:1.5px; background:var(--ink); transform:scaleX(0);
  transform-origin:left; transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}

.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--f-brand); font-size:.775rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:.82rem 1.3rem; border:1.5px solid var(--ink); border-radius:2px;
  background:var(--ink); color:var(--paper); cursor:pointer;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:4px 5px 0 rgb(var(--shadow) / .16)}
.btn:active{transform:translateY(0); box-shadow:none}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-green{background:var(--green); border-color:var(--green); color:#fff}
:root[data-theme="dark"] .btn-green,
:where(:root:not([data-theme="light"])) .btn-green{color:#0E1409}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn-green{color:#fff}}

.hdr-tel{
  font-family:var(--f-serif); font-style:normal; font-size:1.02rem; text-decoration:none;
  color:var(--ink-soft); font-weight:500; white-space:nowrap;
}
.hdr-tel:hover{color:var(--ink)}

.burger{display:none; background:none; border:1px solid var(--rule); border-radius:2px; padding:.5rem .6rem; cursor:pointer}
.burger span{display:block; width:19px; height:1.8px; background:var(--ink); margin:3.6px 0; transition:transform .22s ease, opacity .22s ease}
.hdr.open .burger span:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
.hdr.open .burger span:nth-child(2){opacity:0}
.hdr.open .burger span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}

@media (max-width:980px){
  .burger{display:block; order:3}
  .hdr-tel{display:none}
  .nav{
    order:4; width:100%; flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; transition:max-height .34s cubic-bezier(.3,.8,.3,1);
  }
  .hdr.open .nav{max-height:26rem}
  .nav a{padding:.82rem .2rem; border-bottom:1px solid var(--rule-soft); font-size:1rem}
  .nav a::after{display:none}
  .nav .btn{margin:.9rem .2rem .4rem}
  .hdr-in{flex-wrap:wrap}
}

/* ============================================================ SECTION SHELL
   Each block is a manila folder: a real tab, then the sheet. */
.sec{padding-block:clamp(3.5rem,7vw,6.5rem)}
.sec-head{margin-bottom:clamp(1.9rem,3.5vw,3rem)}
.sec-head .lbl{display:flex; align-items:center; gap:.7rem}
.sec-head .lbl::after{
  content:""; height:1px; flex:1; background:var(--rule);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.7,.3,1) .1s;
}
.sec-head.in .lbl::after{transform:scaleX(1)}
.sec-h{font-size:clamp(1.85rem,4.4vw,3.05rem); margin-top:.85rem}
.sec-sub{margin-top:1rem; max-width:63ch; color:var(--ink-soft); font-size:1.055em}

/* folder tab */
.folder{position:relative; background:var(--card); border:1px solid var(--rule); border-radius:0 5px 5px 5px}
.folder::before{
  content:attr(data-tab);
  position:absolute; left:-1px; top:-1.72rem;
  font-family:var(--f-serif); font-style:normal; font-size:0.96rem; font-weight:600;
  letter-spacing:0; 
  padding:.42rem .95rem .34rem; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--rule); border-bottom:none;
  border-radius:5px 9px 0 0;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), color .26s ease;
}
.folder:hover::before{transform:translateY(-4px); color:var(--ink)}

/* ============================================================ HERO */
.hero{position:relative; padding-block:clamp(2.6rem,6vw,4.6rem) clamp(3rem,6vw,5rem); overflow:hidden}
.hero-in{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,4.5vw,4rem); align-items:center}
@media (max-width:900px){.hero-in{grid-template-columns:1fr; gap:2.4rem}}

.hero-eyebrow{display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-bottom:1.5rem}
.pin{
  display:inline-flex; align-items:center; gap:.42rem;
  font-family:var(--f-serif); font-style:normal; font-size:0.97rem; font-weight:600; letter-spacing:0;
   color:var(--ink-soft);
  background:transparent; border:1px solid var(--rule);
  padding:.36rem .68rem; border-radius:2px;
}
.pin b{width:5px; height:5px; border-radius:50%; background:var(--green); flex:none}

h1.hero-h{font-size:clamp(2.45rem,7.1vw,4.55rem); letter-spacing:-.038em}
/* word-by-word tab-slide reveal */
/* Italic glyphs paint beyond their advance width, and this wrapper clips
   with overflow:hidden to drive the slide-up reveal - which shaved the last
   letter of an italic word. Widen the clip box sideways only; the vertical
   clip still has to bite or the reveal breaks. */
.hero-h .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-inline:.12em; margin-inline:-.12em;
}
.hero-h .w>i{display:inline-block; font-style:inherit}
.js-anim .hero-h .w>i{transform:translateY(104%); animation:tabUp .82s cubic-bezier(.16,.84,.3,1) forwards}
@keyframes tabUp{to{transform:translateY(0)}}
.hero-h em{font-style:normal; color:var(--green); position:relative; white-space:nowrap}
.hero-h em::after{
  content:""; position:absolute; left:0; right:0; bottom:.07em; height:.11em;
  background:color-mix(in srgb,var(--green) 32%,transparent);
}

.hero-p{margin-top:1.5rem; max-width:52ch; font-size:1.1em; color:var(--ink-soft)}
.hero-p strong{color:var(--ink); font-weight:600}
.hero-cta{display:flex; gap:.8rem; margin-top:2.05rem; flex-wrap:wrap}

/* canvas: chaos → order */
.canvas-hold{
  position:relative; aspect-ratio:1/.86; width:100%;
  border:1px solid var(--rule); border-radius:4px; background:var(--card);
  box-shadow:8px 10px 0 rgb(var(--shadow) / .05); overflow:hidden;
}

/* ============================================================ BEFORE / AFTER
   Real photographs of a real rescue. The visitor drags the seam.
   --pos is the seam position, 0-100%. */
.ba{position:absolute; inset:0; --pos:50%; touch-action:none; cursor:ew-resize}
.ba-layer{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba-line{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px;
  background:#fff; box-shadow:0 0 0 1px rgb(0 0 0 / .28); pointer-events:none;
}
.ba-grip{
  position:absolute; top:50%; left:var(--pos);
  width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%;
  background:#fff; box-shadow:0 2px 10px rgb(0 0 0 / .3);
  display:grid; place-items:center; pointer-events:none;
}
.ba-grip::before{
  content:""; width:13px; height:9px;
  background:var(--ink);
  clip-path:polygon(0 50%,38% 0,38% 100%, 62% 0,62% 100%,100% 50%);
}
.ba-tag{
  position:absolute; top:.7rem; z-index:3;
  font-family:var(--f-serif); font-style:normal; font-size:0.90rem; font-weight:600; letter-spacing:0;
   padding:.32rem .6rem; border-radius:2px;
  background:rgb(0 0 0 / .62); color:#fff; pointer-events:none;
  transition:opacity .25s ease;
}
.ba-tag.l{left:.7rem}
.ba-tag.r{right:.7rem}
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:none;
}
.ba-range:focus-visible{opacity:1; outline:3px solid var(--green); outline-offset:-3px}
.ba-hint{
  position:absolute; left:50%; bottom:2.6rem; transform:translateX(-50%);
  font-family:var(--f-serif); font-style:normal; font-size:0.90rem; letter-spacing:0; 
  color:#fff; background:rgb(0 0 0 / .55); padding:.3rem .65rem; border-radius:2px;
  pointer-events:none; transition:opacity .4s ease;
}
.ba.touched .ba-hint{opacity:0}
@media (prefers-reduced-motion:reduce){.ba{--pos:50%}}
.canvas-hold canvas,
.canvas-hold video,
.canvas-hold>img{display:block; width:100%; height:100%; object-fit:cover}
.canvas-cap{
  position:absolute; left:0; bottom:0; right:0;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.6rem .85rem; border-top:1px solid var(--rule-soft);
  background:color-mix(in srgb,var(--card) 90%,transparent);
  font-family:var(--f-serif); font-style:normal; font-size:0.93rem; letter-spacing:0;
   color:var(--ink-faint);
}
.canvas-cap b{color:var(--ink); font-weight:600}

/* ============================================================ REVEAL
   Base state is fully visible. JS only hides below-fold blocks. */
.js-anim .rv{opacity:0; transform:translateY(19px); transition:opacity .72s ease, transform .72s cubic-bezier(.2,.7,.3,1)}
.js-anim .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .rv{opacity:1 !important; transform:none !important; transition:none}
  .js-anim .hero-h .w>i{transform:none; animation:none}
}

/* ============================================================ GAPS (ledger rows) */
.gaps{background:var(--card); border-block:1px solid var(--rule)}
.gap-quote{
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.5rem,3.5vw,2.35rem);
  letter-spacing:-.028em; line-height:1.14; max-width:34ch;
}
.gap-quote span{color:var(--ink-soft)}
.gap-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.8rem,4vw,3.6rem); align-items:start}
@media (max-width:860px){.gap-grid{grid-template-columns:1fr; gap:2rem}}

.ledger{border-top:1px solid var(--rule)}
.ledger li{
  display:grid; grid-template-columns:2.9rem 1fr; gap:1rem; align-items:baseline;
  padding:.92rem .2rem; border-bottom:1px solid var(--rule-soft);
  list-style:none;
}
.ledger{margin:0; padding:0}
.ledger .n{
  font-family:var(--f-serif); font-style:normal; font-size:1.02rem; font-weight:500;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.ledger li:hover .n{color:var(--ink)}
.ledger .t{font-size:1.005em}
.gap-foot{
  margin-top:1.8rem; font-size:clamp(1.2rem,2.3vw,1.5rem); line-height:1.7;
  color:var(--ink-soft); max-width:34rem; text-wrap:pretty;
}
.gap-foot b{display:block; color:var(--ink); font-weight:600}
/* a real strip of silver duct tape: cloth weave, torn ends, a soft shadow */
.tape{
  display:inline-block; margin:0 .1em; vertical-align:.05em;
  filter:drop-shadow(0 2px 1.5px rgba(0,0,0,.28)) drop-shadow(0 6px 8px rgba(0,0,0,.12));
  transform:rotate(-3deg); transform-origin:20% 60%;
  transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}
.tape>span{
  display:inline-block; padding:.08em .85em .12em;
  font-family:var(--f-brand); font-weight:800; font-size:.82em; letter-spacing:.06em; text-transform:uppercase;
  color:#2E3136; text-shadow:0 1px 0 rgba(255,255,255,.35);
  /* texture cropped from a photo of a real roll of duct tape */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%, rgba(0,0,0,.12)),
    #BFC3C8 url("/assets/tape.jpg") center/cover;
  clip-path:polygon(
    2% 0, 98% 0, 100% 9%, 97% 20%, 100% 31%, 96.5% 43%, 99.5% 55%, 97% 67%, 100% 79%, 97.5% 90%, 99% 100%,
    1.5% 100%, 0 88%, 3% 76%, 0 64%, 2.5% 52%, 0 40%, 3% 28%, .5% 16%, 2.5% 6%);
}
.tape:hover{transform:rotate(-6deg) translateY(-2px)}
@media (prefers-reduced-motion:reduce){ .tape{transition:none} }

/* ============================================================ SERVICES */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,2.6vw,2.1rem)}
@media (max-width:940px){.svc-grid{grid-template-columns:1fr; gap:2.6rem}}
.svc{padding:1.6rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:1.05rem}
.svc-top{display:flex; align-items:baseline; justify-content:space-between; gap:1rem}
.svc h3{font-size:1.32rem; font-weight:800}
.svc h3 b{display:block; font-size:0.92rem; font-family:var(--f-serif); font-style:normal; font-weight:500;
  letter-spacing:0; color:var(--ink-faint);  margin-bottom:.42rem}
.svc-price{
  font-family:var(--f-serif); font-style:normal; font-size:1.02rem; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; text-align:right; line-height:1.35; flex:none;
}
.svc-price i{display:block; font-style:normal; font-size:.6rem; letter-spacing:.13em;
  color:var(--ink-faint); text-transform:uppercase; font-weight:400}
.svc ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column}
.svc li{
  font-size:.945rem; padding:.44rem 0; border-bottom:1px dashed var(--rule-soft);
  display:flex; gap:.6rem; align-items:baseline; color:var(--ink-soft);
}
.svc li::before{content:""; width:4px; height:4px; margin-top:.52em; flex:none; background:var(--ink-faint); border-radius:50%}
.svc li:last-child{border-bottom:none}
.svc-rule{height:2px; background:var(--rule-soft); position:relative; overflow:hidden}
.svc-rule::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.svc:hover .svc-rule::after{transform:scaleX(1)}

/* ============================================================ WORK
   A contact sheet. Built to hold January's own design output —
   varied crops, mono slugs, no stock imagery anywhere. */
.work-grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(.7rem,1.4vw,1.05rem);
}
.wk{
  position:relative; overflow:hidden; border-radius:3px;
  border:1px solid var(--rule); background:var(--card);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:0; text-decoration:none; color:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.wk:hover{transform:translateY(-4px); box-shadow:6px 8px 0 rgb(var(--shadow) / .09); border-color:var(--ink)}
/* the contact-sheet rhythm: 4 wide, 4 tall-ish, 4 wide */
.wk:nth-child(1){grid-column:span 7; aspect-ratio:16/10}
.wk:nth-child(2){grid-column:span 5; aspect-ratio:4/5}
.wk:nth-child(3){grid-column:span 4; aspect-ratio:1/1}
.wk:nth-child(4){grid-column:span 4; aspect-ratio:1/1}
.wk:nth-child(5){grid-column:span 4; aspect-ratio:1/1}
.wk:nth-child(6){grid-column:span 12; aspect-ratio:24/7}
@media (max-width:820px){
  .wk:nth-child(n){grid-column:span 6; aspect-ratio:4/3}
  .wk:nth-child(6){grid-column:span 12; aspect-ratio:16/7}
}
@media (max-width:520px){.wk:nth-child(n){grid-column:span 12; aspect-ratio:4/3}}

/* the slot state — honest about being empty, and shows the crop */
.wk-slot{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    repeating-linear-gradient(45deg,
      var(--rule-soft) 0 8px, transparent 8px 17px);
  opacity:.5;
}
.wk-slot::after{
  content:""; position:absolute; inset:11px; border:1px dashed var(--rule);
  border-radius:2px;
}
.wk-meta{
  position:relative; z-index:2; padding:.85rem .95rem;
  display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
  background:linear-gradient(to top, color-mix(in srgb,var(--card) 96%,transparent), transparent);
}
.wk-meta .t{
  font-family:var(--f-display); font-weight:800; font-size:.94rem; letter-spacing:-.015em;
}
.wk-meta .k{
  font-family:var(--f-serif); font-style:normal; font-size:0.90rem; font-weight:500; letter-spacing:0;
   color:var(--ink-faint); flex:none;
}
.wk-num{
  position:absolute; top:.7rem; left:.8rem; z-index:2;
  font-family:var(--f-serif); font-style:normal; font-size:0.90rem; letter-spacing:0;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.work-note{
  margin-top:1.5rem; display:flex; gap:.7rem; align-items:flex-start;
  border-left:2.5px solid var(--rule); padding:.15rem 0 .15rem 1rem;
}
.work-note p{font-family:var(--f-serif); font-style:normal; font-size:1.02rem; line-height:1.75; color:var(--ink-soft)}

/* ============================================================ ONGOING SUPPORT
   A wall-calendar page with the recurring work written in. */
.ongoing{background:var(--card); border-block:1px solid var(--rule)}
.og-wrap{max-width:62rem}
.cal{
  margin:0; background:#FFFFFF; color:#1E211B; border-radius:4px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 14px 30px rgba(20,24,16,.12);
}
.cal{position:relative}
/* the point of the busy month: a stamp across it */
.cal-stamp{
  position:absolute; left:50%; top:58%; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:.05em;
  font-family:var(--f-brand); font-weight:900; text-transform:uppercase; letter-spacing:.05em; line-height:1;
  font-size:clamp(1.5rem,6vw,3.3rem); color:#169A3C; white-space:nowrap;
  padding:.35em .6em .32em; border:.1em solid #169A3C; border-radius:.14em;
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 .06em #fff, inset 0 0 0 .1em #169A3C, 0 10px 30px rgba(20,24,16,.18);
  transform:translate(-50%,-50%) rotate(-8deg);
}
.cal-stamp span:last-child{font-size:.62em; letter-spacing:.12em}
.js-anim .cal.rv .cal-stamp{opacity:0}
.js-anim .cal.rv.in .cal-stamp{animation:calSlam .55s cubic-bezier(.3,1.6,.5,1) .5s both}
@keyframes calSlam{from{opacity:0; transform:translate(-50%,-50%) rotate(-18deg) scale(2.2)} to{opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
@media (prefers-reduced-motion:reduce){ .js-anim .cal.rv .cal-stamp{opacity:1; animation:none} }
.cal-top{position:relative; background:#1E211B; color:#fff; text-align:center; padding:1.5rem 1rem 1rem}
.cal-ring{position:absolute; top:-6px; width:14px; height:26px; border-radius:7px;
  background:linear-gradient(90deg,#8E949A,#E5E8EB 45%,#9CA2A8); box-shadow:0 2px 3px rgba(0,0,0,.35)}
.cal-ring:first-child{left:22%} .cal-ring:nth-child(2){right:22%}
.cal-title{font-family:var(--f-brand); font-weight:900; text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(1.25rem,3.2vw,1.9rem); line-height:1}
.cal-sub{margin-top:.5rem; font-family:var(--f-serif); font-style:italic; font-size:clamp(.95rem,2.2vw,1.08rem); letter-spacing:0; color:#9CF0B2}
.cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-left:1px solid #E1E3DC}
.cal-w{font-family:var(--f-serif); font-style:normal; font-size:0.92rem; letter-spacing:0;  color:#6B6F64;
  text-align:center; padding:.55rem 0; border-bottom:1px solid #E1E3DC; border-right:1px solid #E1E3DC; background:#F6F7F3}
.cal-d{min-height:6.2rem; padding:.4rem .4rem .5rem; border-right:1px solid #E1E3DC; border-bottom:1px solid #E1E3DC;
  display:flex; flex-direction:column; gap:.3rem}
.cal-d.off{background:repeating-linear-gradient(135deg,#F7F8F4 0 6px,#F1F2EC 6px 12px)}
.cal-d b{font-family:var(--f-serif); font-style:normal; font-weight:600; font-size:1.02rem; color:#6B6F64}
.cal-t{display:block; font-family:var(--f-body); font-size:.78rem; line-height:1.2; padding:.22rem .38rem; border-radius:2px;
  border-left:3px solid; background:#FFFFFF; box-shadow:0 0 0 1px #E1E3DC inset}
.cal-t.books{border-color:#169A3C}
.cal-t.pay{border-color:#1C4FD8}
.cal-t.mkt{border-color:#D5261C}
.cal-t.office{border-color:#6B6F64}
.cal-key{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem; margin-top:1.3rem;
  font-family:var(--f-serif); font-style:normal; font-size:1.02rem; letter-spacing:0;  color:var(--ink-soft)}
.cal-key span{display:inline-flex; align-items:center; gap:.5rem}
.cal-key i{width:12px; height:12px; border-radius:2px; background:#6B6F64}
.cal-key i.books{background:#169A3C} .cal-key i.pay{background:#1C4FD8} .cal-key i.mkt{background:#D5261C}
@media (max-width:640px){
  .cal-d{min-height:3.6rem; padding:.3rem}
  .cal-t{font-size:0; padding:0; height:6px; border-left:0; border-radius:3px}
  .cal-t.books{background:#169A3C} .cal-t.pay{background:#1C4FD8} .cal-t.mkt{background:#D5261C} .cal-t.office{background:#6B6F64}
}
.og-cta{margin-top:clamp(1.8rem,3.5vw,2.4rem); display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center; justify-content:center; text-align:center}
.og-cta p{font-size:1.15rem; color:var(--ink)}

/* ============================================================ THE RESCUE (animation, bottom of page) */
.rescue-anim .canvas-hold{max-width:52rem; margin-inline:auto}
.hero-slot{background:var(--card)}
.hero-slot::after{content:""; position:absolute; inset:14px; border:1px dashed var(--rule); border-radius:3px}

/* ============================================================ STUDIO WALL
   A committed-dark, full-bleed band: four columns of design work
   drifting at different speeds. Every colour painted explicitly so
   the band holds on either host theme. */
.studio{
  --w-bg:#171A12;
  --w-panel:#20241A;
  --w-ink:#F1F2EC;
  --w-soft:#8C9184;
  --w-line:#333827;
  --w-glow:#5FBF3F;
  position:relative; background:var(--w-bg); color:var(--w-ink);
  padding-block:clamp(3.4rem,6.5vw,5.6rem) 0; overflow:hidden;
  border-block:1px solid var(--w-bg);
}
/* ambient glow, sits behind everything */
.studio::before{
  content:""; position:absolute; left:50%; top:-14%; width:min(96vw,1200px); aspect-ratio:2/1;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--w-glow) 17%,transparent) 0%, transparent 66%);
  pointer-events:none; filter:blur(12px);
}
.studio .wrap{position:relative; z-index:2}
.studio .lbl{color:var(--w-soft)}
.studio .sec-head .lbl::after{background:var(--w-line)}
.studio h2{color:var(--w-ink)}
.studio-sub{color:var(--w-soft); max-width:60ch; margin-top:1rem}
.studio-sub b{color:var(--w-ink); font-weight:600}

/* the wall */
.wall{
  position:relative; z-index:1; margin-top:clamp(2.2rem,4vw,3.2rem);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.55rem,1.1vw,.9rem); padding-inline:clamp(.55rem,1.1vw,.9rem);
  height:clamp(26rem,44vw,34rem); overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 82%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 82%,transparent 100%);
}
@media (max-width:760px){
  .wall{grid-template-columns:repeat(2,1fr); height:clamp(22rem,80vw,28rem)}
}
.wall-col{display:flex; flex-direction:column; gap:clamp(.55rem,1.1vw,.9rem); will-change:transform}
.wall-col.up{animation:wallUp var(--dur,42s) linear infinite}
.wall-col.dn{animation:wallDn var(--dur,50s) linear infinite}
@keyframes wallUp{from{transform:translateY(0)} to{transform:translateY(-50%)}}
@keyframes wallDn{from{transform:translateY(-50%)} to{transform:translateY(0)}}
.wall:hover .wall-col{animation-play-state:paused}

.tile{
  position:relative; flex:none; width:100%; border-radius:4px; overflow:hidden;
  background:var(--w-panel); border:1px solid var(--w-line);
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.tile img,.tile video{display:block; width:100%; height:100%; object-fit:cover}
/* reserved panel — quiet, not pretending to be artwork */
.tile-empty{
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--w-glow) 5%,var(--w-panel)) 0%, var(--w-panel) 55%);
}
.tile-empty::after{
  content:""; position:absolute; inset:9px;
  border:1px solid var(--w-line); border-radius:2px;
}
.wall-reserved .tile figcaption{opacity:.5}
.wall-reserved .tile:hover figcaption{opacity:1}
.tile:hover{border-color:color-mix(in srgb,var(--w-glow) 60%,transparent); transform:scale(1.014)}
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.5rem .6rem;
  display:flex; justify-content:space-between; gap:.6rem; align-items:baseline;
  font-family:var(--f-serif); font-style:normal; font-size:0.88rem; letter-spacing:0;
   color:var(--w-ink);
  background:linear-gradient(to top,color-mix(in srgb,var(--w-bg) 88%,transparent),transparent);
  opacity:0; transition:opacity .28s ease;
}
.tile:hover figcaption{opacity:1}
.tile figcaption i{font-style:normal; color:var(--w-glow); flex:none}

.wall-foot{
  position:relative; z-index:2; padding-block:1.5rem clamp(2.4rem,4.5vw,3.4rem);
  display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.wall-foot p{
  font-family:var(--f-serif); font-style:normal; font-size:0.98rem; letter-spacing:0;
  color:var(--w-soft); line-height:1.7; max-width:56ch;
}
.btn-glow{
  background:var(--w-glow); border-color:var(--w-glow); color:#08120A;
}
.btn-glow:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--w-glow) 22%,transparent)}
.btn-wire{background:transparent; color:var(--w-ink); border-color:var(--w-line)}
.btn-wire:hover{border-color:var(--w-ink)}

@media (prefers-reduced-motion:reduce){
  .wall-col{animation:none !important}
  .wall{height:auto; mask-image:none; -webkit-mask-image:none}
  .studio::before{display:none}
}

/* ============================================================ PROCESS */
.proc{position:relative}
.proc-track{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.4rem); position:relative}
@media (max-width:860px){.proc-track{grid-template-columns:1fr; gap:2.5rem}}
.proc-line{position:absolute; inset:0; pointer-events:none; overflow:visible}
.proc-line path{fill:none; stroke:var(--ink-faint); stroke-width:1.4; stroke-dasharray:1 1; opacity:.4}
.step{background:var(--card); border:1px solid var(--rule); border-radius:0 5px 5px 5px; padding:1.5rem 1.4rem; position:relative}
.step::before{
  content:attr(data-n); position:absolute; left:-1px; top:-1.7rem;
  font-family:var(--f-serif); font-style:normal; font-size:0.96rem; font-weight:600; letter-spacing:0;
  padding:.4rem .9rem .32rem; background:var(--ink); color:var(--paper);
  border-radius:5px 9px 0 0;
}
:root[data-theme="dark"] .step::before{color:var(--paper)}
.step h3{font-size:1.22rem; margin-bottom:.6rem}
.step p{color:var(--ink-soft); font-size:.955em}

/* ============================================================ INDUSTRIES marquee */
.serve{background:var(--ink); color:var(--paper); border-block:1px solid var(--ink); overflow:hidden}
.serve .lbl{color:color-mix(in srgb,var(--paper) 52%,transparent)}
.serve .sec-head .lbl::after{background:color-mix(in srgb,var(--paper) 22%,transparent)}
.serve h2{color:var(--paper)}
.serve-sub{color:color-mix(in srgb,var(--paper) 66%,transparent); max-width:58ch; margin-top:1rem}
.mq{margin-top:clamp(2rem,4vw,3rem); display:flex; gap:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-row{display:flex; gap:0; flex:none; animation:mq 34s linear infinite}
.mq:hover .mq-row{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.mq-row{animation:none}.mq{overflow-x:auto; mask-image:none}}
.tag{
  flex:none; font-family:var(--f-serif); font-style:normal; font-size:1.02rem; font-weight:500;
  letter-spacing:0;  padding:.6rem 1.5rem;
  border-left:1px solid color-mix(in srgb,var(--paper) 17%,transparent);
  color:color-mix(in srgb,var(--paper) 88%,transparent); white-space:nowrap;
}
.tag em{font-style:normal; color:color-mix(in srgb,var(--paper) 55%,transparent)}

/* ============================================================ FOUNDER */
.fdr-grid{display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(2rem,4.5vw,4rem); align-items:start}
@media (max-width:900px){.fdr-grid{grid-template-columns:1fr; gap:2.2rem}}
.card-id{
  background:var(--card); border:1px solid var(--rule); border-radius:3px; padding:1.5rem;
  box-shadow:7px 8px 0 rgb(var(--shadow) / .05);
}
.card-id .who{font-family:var(--f-display); font-weight:900; font-size:1.42rem; letter-spacing:-.025em; margin-top:1rem}
.card-id .role{font-family:var(--f-serif); font-style:normal; font-size:0.97rem; letter-spacing:0;  color:var(--ink-faint); margin-top:.42rem}
.card-id dl{margin:1.35rem 0 0; padding-top:1.1rem; border-top:1px solid var(--rule-soft); display:grid; gap:.62rem}
.card-id dl div{display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.card-id dt{font-family:var(--f-serif); font-style:normal; font-size:0.95rem; letter-spacing:0;  color:var(--ink-faint)}
.card-id dd{margin:0; font-size:1.02rem; font-weight:500; text-align:right; font-family:var(--f-serif); font-style:normal}
.mono-mark{width:44px; height:44px}

blockquote.pull{
  margin:0 0 1.7rem; padding:0 0 0 1.25rem; border-left:2.5px solid var(--green);
  font-family:var(--f-display); font-weight:700; font-size:clamp(1.22rem,2.6vw,1.62rem);
  letter-spacing:-.022em; line-height:1.24;
}
blockquote.pull cite{
  display:block; margin-top:.75rem; font-family:var(--f-serif); font-style:normal; font-size:0.98rem;
  font-weight:500; letter-spacing:0;  font-style:normal; color:var(--ink-faint);
}
.prose p+p{margin-top:1.05rem}
.prose{color:var(--ink-soft); max-width:64ch}
.prose strong{color:var(--ink); font-weight:600}

/* ============================================================ FAQ */
.faq{max-width:78ch}
.qa{border-bottom:1px solid var(--rule-soft)}
.qa summary{
  cursor:pointer; list-style:none; padding:1.05rem .2rem;
  display:flex; gap:1rem; align-items:baseline;
  font-family:var(--f-display); font-weight:700; font-size:1.055rem; letter-spacing:-.015em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .qn{font-family:var(--f-serif); font-style:normal; font-size:1.02rem; font-weight:500; color:var(--ink-faint); flex:none; font-variant-numeric:tabular-nums}
.qa summary .qt{flex:1}
.qa summary .qi{flex:none; width:15px; height:15px; position:relative; margin-top:.3em}
.qa summary .qi::before,.qa summary .qi::after{content:""; position:absolute; background:var(--ink); transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.qa summary .qi::before{left:0; right:0; top:6.5px; height:1.8px}
.qa summary .qi::after{top:0; bottom:0; left:6.5px; width:1.8px}
.qa[open] summary .qi::after{transform:scaleY(0)}
.qa summary:hover{color:var(--ink-soft)}
.qa .ans{padding:0 .2rem 1.15rem 3.7rem; color:var(--ink-soft); font-size:.98em; max-width:66ch}
@media (max-width:620px){.qa .ans{padding-left:.2rem}}

/* ============================================================ CONTACT */
.ct{background:var(--card); border-block:1px solid var(--rule)}
.ct-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4.5vw,4rem); align-items:start}
@media (max-width:900px){.ct-grid{grid-template-columns:1fr; gap:2.4rem}}
form.f{display:grid; gap:1rem}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}
.fld{display:flex; flex-direction:column; gap:.4rem}
.fld label{font-family:var(--f-serif); font-style:normal; font-size:0.96rem; font-weight:500; letter-spacing:0;  color:var(--ink-faint)}
.fld input,.fld textarea,.fld select{
  font-family:var(--f-body); font-size:.985rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  padding:.72rem .8rem; width:100%; transition:border-color .18s ease, background .18s ease;
}
.fld textarea{resize:vertical; min-height:6.5rem}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--green); background:var(--card)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.f-note{font-family:var(--f-serif); font-style:normal; font-size:0.96rem; letter-spacing:0; color:var(--ink-faint); line-height:1.6}
.f-msg{
  font-family:var(--f-serif); font-style:normal; font-size:1.02rem; padding:.8rem .95rem; border-radius:2px;
  border:1px solid var(--green); background:var(--green-wash); color:var(--green-deep);
}
.f-msg[hidden]{display:none}

.ct-list{display:grid; gap:0; border-top:1px solid var(--rule)}
.ct-list a,.ct-list div{
  display:grid; grid-template-columns:5.6rem 1fr; gap:1rem; align-items:baseline;
  padding:1rem .2rem; border-bottom:1px solid var(--rule-soft); text-decoration:none;
}
.ct-list dt,.ct-list .k{font-family:var(--f-serif); font-style:normal; font-size:0.95rem; letter-spacing:0;  color:var(--ink-faint)}
.ct-list .v{font-size:1.02rem; font-weight:500}
.ct-list a:hover .v{color:var(--ink)}

/* ============================================================ FOOTER */
.ft{padding-block:clamp(2.4rem,4.5vw,3.4rem) 1.8rem; border-top:1px solid var(--rule)}
.ft-top{display:flex; gap:2rem; flex-wrap:wrap; justify-content:space-between; align-items:flex-start}
.ft-nav{display:flex; gap:1.35rem; flex-wrap:wrap}
.ft-nav a{font-size:.878rem; text-decoration:none; color:var(--ink-soft)}
.ft-nav a:hover{color:var(--ink)}
.ft-soc{display:flex; gap:.55rem}
.ft-soc a{
  width:33px; height:33px; display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:2px; color:var(--ink-soft);
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.ft-soc a:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-2px)}
.ft-soc svg{width:15px; height:15px; fill:currentColor}
.ft-bot{
  margin-top:1.9rem; padding-top:1.15rem; border-top:1px solid var(--rule-soft);
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between;
  font-family:var(--f-serif); font-style:normal; font-size:0.96rem; letter-spacing:0;
   color:var(--ink-faint);
}

/* preview-only banner */
.pv{
  background:var(--ink); color:var(--paper); font-family:var(--f-serif); font-style:normal;
  font-size:0.98rem; letter-spacing:0; 
  padding:.6rem var(--pad); text-align:center;
}
:root[data-theme="dark"] .pv{background:var(--card); color:var(--ink-soft)}

/* ============================================================ TYPE MIX
   "Annual report": Newsreader carries the page like a financial weekly.
   Archivo stays only on the wordmark so it still matches the logo.
   IBM Plex Mono keeps every figure on the grid like a ledger column. */
:root{
  --f-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:var(--f-serif);
  --f-display:var(--f-serif);
  --f-brand:"Archivo","Helvetica Neue",Arial,sans-serif;
}
body{font-optical-sizing:auto; font-size:1.06rem; line-height:1.68}
.brand-name{font-family:var(--f-brand)}
h1,h2,h3,h4{font-weight:500; letter-spacing:-.02em}
h1.hero-h{font-size:clamp(2.6rem,6.8vw,4.5rem); letter-spacing:-.022em; line-height:1.02}
.sec-h{font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.05}
.hero-h em{font-style:italic; font-weight:400}
.hero-h em::after{display:none}
.hero-p,.sec-sub{font-size:1.14em}
.svc h3,.card-id .who{font-weight:600; letter-spacing:-.015em}
.wk-meta .t,.qa summary{font-weight:600; letter-spacing:-.01em}
.qa summary{font-size:1.14rem}
.gap-quote{font-weight:600; letter-spacing:-.015em; line-height:1.2}
blockquote.pull{font-weight:600; letter-spacing:-.012em; line-height:1.25; border-left-color:var(--ink)}
.nav a:not(.btn){font-size:1rem}
/* Ledger: account names in small caps, like line items in a report. */
.ledger li{grid-template-columns:6.4rem 1fr}
.ledger .k{font-variant-caps:all-small-caps; letter-spacing:.05em; font-size:1.08rem; color:var(--ink-soft)}
.ledger li:hover .k{color:var(--ink)}
.ledger li:last-child{border-bottom:3px double var(--ink)}
.svc-price,.card-id dd,.ledger .n{font-variant-numeric:tabular-nums lining-nums}

/* ============================================================ DESK GAME
   A real walnut desk, real documents, real manila folders.
   Colours are fixed so the desk reads the same in either theme. */
.desk{
  position:relative; height:clamp(40rem,72vw,48rem); border-radius:6px; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 22%, rgba(255,255,255,.09), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.35)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#2B2E29,#1B1D19);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.04), 8px 10px 0 rgb(var(--shadow) / .06);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.desk-hud{
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center;
  padding:.7rem 1rem; background:rgba(0,0,0,.35); border-bottom:1px solid rgba(255,255,255,.06); color:#fff;
}
.desk-hud .lbl{color:rgba(255,255,255,.66)}
.desk-hud b{color:#fff; font-weight:600; font-variant-numeric:tabular-nums}
.desk-msg{
  margin-left:auto; font-family:var(--f-serif); font-style:italic; font-size:1rem; letter-spacing:0; color:#9CF0B2;
  min-height:1.1em;
}
.desk-msg.bad{color:#FFB0A2}
@media (max-width:620px){ .desk-msg{margin-left:0; width:100%} }
.desk-top{position:absolute; left:0; right:0; top:3.1rem; bottom:10.4rem}
@media (max-width:620px){ .desk-top{top:4.6rem} }

.paper{
  position:absolute; padding:0; margin:0; border:0; background:none; cursor:grab; touch-action:none;
  border-radius:1px;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 9px 18px rgba(0,0,0,.38);
  transition:transform .34s cubic-bezier(.2,.8,.3,1.15), opacity .34s ease, box-shadow .2s ease;
}
.paper canvas{display:block; width:100%; height:100%; pointer-events:none}
.paper.lift{box-shadow:0 3px 6px rgba(0,0,0,.35), 0 26px 38px rgba(0,0,0,.5)}
.paper.drag{transition:box-shadow .2s ease; cursor:grabbing}
.paper.sel,.paper:focus-visible{outline:3px solid #3BE06A; outline-offset:4px; border-radius:1px}
.paper.nope{animation:nope .44s}
@keyframes nope{20%{margin-left:-10px}40%{margin-left:9px}60%{margin-left:-6px}80%{margin-left:4px}}
.paper.filed{transition:transform .4s cubic-bezier(.55,0,.75,.35), opacity .4s ease; pointer-events:none}

.desk-bins{
  position:absolute; left:0; right:0; bottom:0; z-index:4; height:10.4rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,2.2vw,1.6rem);
  padding:1.7rem clamp(.8rem,3vw,2.2rem) 1.1rem;
  background:linear-gradient(to top, rgba(0,0,0,.28), transparent);
}
.bin{position:relative; border:0; padding:0; margin:0; cursor:pointer; background:none; font:inherit; transition:transform .2s ease}
.bin-back{
  position:absolute; inset:0; border-radius:2px 5px 3px 3px;
  background:linear-gradient(#C99A45,#B5873A); border:1px solid #9C7331;
  box-shadow:0 12px 22px rgba(0,0,0,.45);
}
.bin-tab{
  position:absolute; top:-2rem; left:var(--tab,4%); width:52%; height:2.2rem;
  background:linear-gradient(#D6A955,#C99A45); border:1px solid #9C7331; border-bottom:0;
  border-radius:8px 8px 0 0; padding:.32rem .38rem 0;
}
.bin-tab span{
  display:block; background:#fff; border-top:4px solid #169A3C; box-shadow:0 1px 1px rgba(0,0,0,.25);
  font-family:var(--f-serif); font-style:normal; font-size:clamp(.56rem,1.3vw,.72rem); font-weight:700; letter-spacing:0;
   color:#1E211B; padding:.2rem .2rem .16rem; text-align:center; white-space:nowrap;
}
.bin-peek{
  position:absolute; left:6%; right:6%; top:-.1rem; height:2rem; background:#fff; border:1px solid #BFC3B8;
  opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .25s ease;
}
.bin-peek::after{content:""; position:absolute; left:10%; top:.45rem; width:40%; height:3px; background:#9AA094}
.bin.has .bin-peek{opacity:1; transform:none}
.bin-front{
  position:absolute; left:0; right:0; bottom:0; top:7%;
  background:linear-gradient(#F0CF83,#E2B865 55%,#C99A45); border:1px solid #9C7331; border-radius:2px 2px 3px 3px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55);
  display:flex; align-items:flex-end; justify-content:flex-end; padding:.5rem .6rem;
}
.bin-front::after{
  content:""; position:absolute; left:3px; right:3px; bottom:12%; height:9px;
  border-top:1px solid rgba(110,78,26,.35); border-bottom:1px solid rgba(110,78,26,.35);
}
.bin-n{
  position:relative; z-index:1; font-family:var(--f-serif); font-style:normal; font-weight:700; font-size:1.02rem; color:#5E4114;
  background:rgba(255,255,255,.55); border-radius:99px; padding:.08rem .5rem; font-variant-numeric:tabular-nums;
}
.bin.hot,.bin:hover{transform:translateY(-6px)}
.bin.hot .bin-front{box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 3px #3BE06A}
.desk.armed .bin .bin-front{box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 2px rgba(59,224,106,.75)}
.bin:focus-visible{outline:3px solid #3BE06A; outline-offset:4px}
.bin.gulp{animation:gulp .4s}
@keyframes gulp{40%{transform:translateY(4px) scaleY(.95)}}
/* the folders are a photo of a real 1/3-cut manila folder */
.desk-top{bottom:11.6rem}
.desk-bins{height:auto; align-items:end; padding:1rem clamp(.6rem,3vw,2.2rem) 1.1rem}
.bin{justify-self:center; width:min(100%,13.5rem); aspect-ratio:484/346}
.bin-img{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.42)); transition:filter .2s ease}
.bin-name{position:absolute; left:0; right:0; top:52%; transform:translateY(-50%); text-align:center;
  font-family:var(--f-brand); font-weight:800; font-size:clamp(.72rem,2.2vw,1.02rem); letter-spacing:.14em;
  text-transform:uppercase; color:rgba(84,70,38,.86); pointer-events:none}
.bin .bin-n{position:absolute; right:7%; bottom:15%; background:none; padding:0; color:rgba(110,92,50,.85); font-size:.72rem}
.bin.hot .bin-img{filter:drop-shadow(0 0 3px #3BE06A) drop-shadow(0 0 3px #3BE06A) drop-shadow(0 8px 12px rgba(0,0,0,.42))}
.desk.armed .bin .bin-img{filter:drop-shadow(0 0 2px rgba(59,224,106,.9)) drop-shadow(0 8px 12px rgba(0,0,0,.42))}
@media (max-width:620px){ .desk-top{bottom:9.4rem} }
/* (old painted-folder rules below no longer apply) */
.bin-back{top:-16px; border:0; border-radius:0; background:none; box-shadow:none; filter:drop-shadow(0 8px 12px rgba(0,0,0,.38))}
.bin-back canvas,.bin-front canvas{position:absolute; inset:0; display:block; width:100%; height:100%}
.bin-tab{display:none}
.bin-front{border:0; border-radius:2px; background:none; box-shadow:none; filter:drop-shadow(0 -1px 1px rgba(90,70,20,.18))}
.bin-front::after{display:none}
.bin-n{background:none; padding:0; color:rgba(110,92,50,.85); font-size:.72rem}
.bin.hot .bin-front{box-shadow:none; outline:3px solid #3BE06A; outline-offset:2px}
.desk.armed .bin .bin-front{box-shadow:none; outline:2px solid rgba(59,224,106,.75); outline-offset:2px}

.desk-done{
  position:absolute; inset:0; z-index:10; display:grid; place-items:center; align-content:center; gap:1.1rem;
  text-align:center; padding:1.5rem; background:rgba(12,10,6,.7); backdrop-filter:blur(3px); color:#fff;
}
.desk-done[hidden]{display:none}
/* leaderboard */
.desk-board{margin-top:1.1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem}
.desk-board[hidden]{display:none}
.desk-lb{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.desk-lb li{display:flex; align-items:baseline; gap:.55rem; padding:.45rem .8rem; border:1px solid var(--rule);
  border-radius:3px; background:var(--card); font-variant-numeric:tabular-nums}
.desk-lb li b{font-family:var(--f-serif); font-style:normal; font-size:1.02rem; color:var(--green)}
.desk-lb li span{font-family:var(--f-brand); font-weight:800; letter-spacing:.12em}
.desk-lb li i{font-style:normal; font-family:var(--f-serif); font-style:normal; font-size:1.02rem; color:var(--ink-soft)}
.desk-lb li.me{border-color:#169A3C; box-shadow:0 0 0 2px rgba(22,154,60,.25)}
.desk-lb-final{justify-content:center}
.desk-lb-final li{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2)}
.desk-lb-final li span{color:#fff} .desk-lb-final li i{color:rgba(255,255,255,.75)}
.desk-lb-final:empty{display:none}
.desk-save{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:center}
.desk-save[hidden]{display:none}
.desk-save label{font-family:var(--f-serif); font-style:italic; font-size:1.05rem; color:#9CF0B2; width:100%}
.desk-save input{width:6.2rem; text-align:center; font-family:var(--f-brand); font-weight:900; font-size:1.4rem;
  letter-spacing:.18em; text-transform:uppercase; padding:.4rem .5rem; border-radius:3px; border:2px solid #3BE06A;
  background:#fff; color:#1E211B}
.desk-stamp{
  font-family:var(--f-brand); font-weight:900; font-size:clamp(2.6rem,8vw,4.6rem); line-height:1;
  letter-spacing:.06em; text-transform:uppercase; color:#3BE06A;
  border:.1em solid #3BE06A; border-radius:.14em; padding:.16em .5em .12em;
  box-shadow:inset 0 0 0 .06em rgba(12,10,6,.7), inset 0 0 0 .1em #3BE06A;
  transform:rotate(-8deg); animation:slam .5s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes slam{from{transform:rotate(-22deg) scale(2.6); opacity:0} 55%{opacity:1}}
.desk-final{font-family:var(--f-serif); font-style:normal; font-size:.95rem; letter-spacing:0}
.desk-pitch{font-size:clamp(1.1rem,2.4vw,1.35rem)}
.desk-cta{display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center}
.desk-done .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5)}
.desk-done .btn-ghost:hover{border-color:#fff}
@media (prefers-reduced-motion:reduce){
  .desk-stamp{animation:none}
  .paper,.paper.filed{transition:none}
}

/* ============================================================ CHECK-UP QUIZ */
.qz{
  max-width:46rem; background:var(--card); border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  box-shadow:8px 10px 0 rgb(var(--shadow) / .05);
}
.qz-bar{height:5px; background:var(--rule-soft)}
.qz-bar i{display:block; height:100%; width:0; background:#169A3C; transition:width .45s cubic-bezier(.2,.7,.3,1)}
.qz-stage{padding:clamp(1.4rem,4vw,2.4rem)}
.qz-in{animation:qzIn .38s cubic-bezier(.2,.7,.3,1)}
@keyframes qzIn{from{opacity:0; transform:translateX(18px)}}
.qz-h{font-size:clamp(1.45rem,3.2vw,2rem); margin:.7rem 0 1.5rem; line-height:1.15}
.qz-opts{display:grid; gap:.7rem}
.qz-opt{
  display:flex; gap:1rem; align-items:center; width:100%; text-align:left; cursor:pointer;
  padding:1rem 1.1rem; border:1.5px solid var(--rule); border-radius:4px; background:var(--paper);
  font:inherit; font-size:1.05rem; color:var(--ink);
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.qz-opt b{
  flex:none; width:1.9rem; height:1.9rem; display:grid; place-items:center; border:1.5px solid var(--ink);
  border-radius:3px; font-family:var(--f-serif); font-style:normal; font-size:1.02rem; font-weight:600;
}
.qz-opt:hover{border-color:var(--ink); transform:translateX(4px)}
.qz-opt.picked{border-color:#169A3C; background:color-mix(in srgb,#169A3C 10%,var(--paper))}
.qz-opt.picked b{background:#169A3C; border-color:#169A3C; color:#fff}
.qz-back{
  margin-top:1.2rem; background:none; border:0; padding:.3rem 0; cursor:pointer;
  font-family:var(--f-serif); font-style:normal; font-size:1.02rem; letter-spacing:0; color:var(--ink-soft);
}
.qz-back:hover{color:var(--ink)}
.qz-level{
  font-family:var(--f-brand); font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(2.3rem,6vw,3.4rem); line-height:1; color:var(--lvl); margin:.5rem 0 1.3rem;
}
.qz-meter{
  position:relative; height:14px; border-radius:99px;
  background:linear-gradient(90deg,#169A3C 0 30%,#E09B00 30% 66%,#D5261C 66%);
}
.qz-meter i{
  position:absolute; top:-7px; width:4px; height:28px; margin-left:-2px; border-radius:2px;
  background:var(--ink); box-shadow:0 0 0 3px var(--card);
  transition:left 1.1s cubic-bezier(.2,.9,.3,1.2);
}
.qz-scale{
  display:flex; justify-content:space-between; margin-top:.55rem;
  font-family:var(--f-serif); font-style:normal; font-size:0.92rem; letter-spacing:0;  color:var(--ink-faint);
}
.qz-text{margin-top:1.4rem; font-size:1.18rem; max-width:52ch}
.qz-need{
  margin-top:1.2rem; padding:1rem 1.1rem; border-left:3px solid var(--lvl); background:var(--paper); color:var(--ink-soft);
}
.qz-need .lbl{display:block; margin-bottom:.35rem}
.qz-need strong{color:var(--ink)}
.qz-need em{display:block; margin-top:.5rem; font-style:italic}
.qz-need:has(+ .qz-list){margin-bottom:0; padding-bottom:.2rem}
.qz-list{margin:0; padding:.2rem 1.1rem 1rem 2.2rem; background:var(--paper); border-left:3px solid var(--lvl); color:var(--ink-soft)}
.qz-list li{margin:.3rem 0}
.qz-list strong{color:var(--ink)}
.qz-cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem}
@media (prefers-reduced-motion:reduce){
  .qz-in{animation:none}
  .qz-meter i,.qz-bar i{transition:none}
}

/* the round Office Rescue logo */
.brand .logo{display:block; height:58px; width:auto}

.brand .logo{transition:height .28s ease}
.ft .brand .logo{height:84px}

/* location + services line at the top: upright, not italic */
.hero-eyebrow .pin,.hero-eyebrow .lbl{font-style:normal}


/* ============================================================ MULTI-PAGE BITS */
.nav a[aria-current="page"]:not(.btn){color:var(--ink)}
.nav a[aria-current="page"]:not(.btn)::after{transform:scaleX(1)}
.more-link{margin-top:clamp(1.6rem,3vw,2.2rem); font-size:1.12rem}
.more-link a{color:var(--green-deep); text-decoration:none; border-bottom:1.5px solid currentColor}
.more-link a:hover{color:var(--ink)}
/* links that jump to a section land below the sticky top bar */
section[id]{scroll-margin-top:84px}
.hdr.open .nav{max-height:40rem}
@media (max-width:1360px) and (min-width:981px){ .hdr-tel{display:none} .nav a{padding-inline:.5rem} .nav a:not(.btn){font-size:.95rem} }
/* "find out more" rows on the home page */
.ex-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.ex-list a{display:grid; grid-template-columns:9rem 1fr auto; gap:1.2rem; align-items:baseline;
  padding:1.3rem .2rem; border-bottom:1px solid var(--rule-soft); text-decoration:none; transition:background .2s ease, padding .25s ease}
.ex-list a:hover{background:var(--card); padding-left:.8rem}
.ex-list .k{font-family:var(--f-serif); color:var(--ink-faint); font-size:1rem}
.ex-list .t{font-size:clamp(1.15rem,2.2vw,1.45rem); color:var(--ink)}
.ex-list .t small{display:block; font-size:.72em; color:var(--ink-soft); margin-top:.2rem}
.ex-list .go{color:var(--green); font-size:1.3rem}
@media (max-width:620px){ .ex-list a{grid-template-columns:1fr auto} .ex-list .k{grid-column:1 / -1} }
.cta-band{background:var(--ink); color:var(--paper); text-align:center}
.cta-band .sec-h{color:var(--paper)}
.cta-band p{margin:1rem auto 1.8rem; color:color-mix(in srgb,var(--paper) 72%,transparent); font-size:1.15rem}