/* =============================================================
   SPECIAL DELIVERY — Direction A "POSTE"
   Swiss-minimal postal. Warm paper · single airmail-blue accent.
   ============================================================= */

:root{
  --paper:#f4f1ea;
  --paper-soft:#faf8f2;
  --paper-deep:#efe9da;
  --ink:#15224a;
  --ink-80:rgba(21,34,74,.80);
  --ink-65:rgba(21,34,74,.65);
  --ink-50:rgba(21,34,74,.50);
  --ink-38:rgba(21,34,74,.38);
  --line:rgba(21,34,74,.14);
  --line-2:rgba(21,34,74,.09);
  --blue:#2a4fd6;
  --red:#cf3a2e;
  --blue-deep:#1f3aa8;
  --blue-tint:#e9edfb;
  --white:#fff;
  --sans:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"Space Mono",ui-monospace,"SFMono-Regular",monospace;
  --maxw:1200px;
  --pad:40px;
  --r:12px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* paper grain */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.section{position:relative;z-index:2;padding:120px 0;}
.section.alt{background:var(--paper-soft);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);}

/* shared kicker / section header */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-50);}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:64px;}
.sec-head .lead{max-width:680px;}
.sec-head h2{
  font-family:var(--sans);font-weight:600;font-size:clamp(30px,3.6vw,48px);
  line-height:1.08;letter-spacing:-.02em;margin:14px 0 0;text-wrap:balance;
}
.sec-head p{margin:16px 0 0;color:var(--ink-65);font-size:18px;max-width:560px;text-wrap:pretty;}
.sec-num{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--ink-38);white-space:nowrap;padding-bottom:6px;}

/* airmail rule */
.airmail{height:5px;width:100%;
  background:repeating-linear-gradient(90deg,var(--blue) 0 8px,transparent 8px 16px);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:500;
  font-size:16px;text-decoration:none;border:none;cursor:pointer;border-radius:4px;
  padding:15px 26px;transition:background .2s,color .2s,transform .2s,border-color .2s;}
.btn .a{transition:transform .2s;}
.btn:hover .a{transform:translateX(4px);}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-deep);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.meta{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-50);}

/* ===== flat perforated stamp ===== */
.stamp{
  --pr:4.5px;background:#fff;padding:var(--pr);
  -webkit-mask:
    radial-gradient(circle var(--pr) at 0 0,#0000 99%,#000) round / calc(2*var(--pr)) calc(2*var(--pr)),
    conic-gradient(#000 0 0) content-box;
  mask:
    radial-gradient(circle var(--pr) at 0 0,#0000 99%,#000) round / calc(2*var(--pr)) calc(2*var(--pr)),
    conic-gradient(#000 0 0) content-box;
}
.stamp-face{border:1.4px solid var(--blue);width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--blue);text-align:center;padding:8px 6px;background:linear-gradient(150deg,#fff,#f5f7ff);}
.stamp-face .pl{width:38px;height:28px;}
.stamp-face .den{font-family:var(--sans);font-weight:700;font-size:18px;color:var(--ink);line-height:1;}
.stamp-face .cc{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;color:var(--ink-50);}

/* =============================================================
   NAV
   ============================================================= */
.nav{position:sticky;top:0;z-index:9000;background:rgba(244,241,234,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;gap:24px;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:700;letter-spacing:-.01em;}
.brand .mk{width:26px;height:30px;}
.brand .tx b{display:block;font-size:16px;line-height:1.05;white-space:nowrap;}
.brand b{font-size:16px;}
.brand .tx small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--ink-50);font-weight:400;text-transform:uppercase;margin-top:1px;}
.nav-links{display:flex;gap:28px;margin-left:auto;}
.nav-links a{text-decoration:none;font-size:14.5px;color:var(--ink-65);transition:color .18s;}
.nav-links a:hover{color:var(--blue);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.toggle{display:inline-flex;border:1.4px solid var(--line);border-radius:5px;overflow:hidden;font-family:var(--mono);}
.toggle button{appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-65);padding:7px 9px;transition:background .2s,color .2s;}
.toggle button+button{border-left:1.4px solid var(--line);}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
.nav-book{font-family:var(--sans);font-weight:500;font-size:14px;background:var(--blue);color:#fff;
  text-decoration:none;padding:10px 18px;border-radius:4px;transition:background .2s;}
.nav-book:hover{background:var(--blue-deep);}
.nav-burger{display:none;}

/* =============================================================
   CURSOR — stamp-label chip
   ============================================================= */
#chip{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;opacity:0;
  display:flex;align-items:center;height:30px;padding:0 9px;border-radius:7px;
  background:#fff;border:1.5px solid var(--blue);color:var(--blue);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 6px 18px -8px rgba(21,34,74,.5);
  will-change:transform;transition:background .16s ease,color .16s ease,border-color .16s ease,height .16s ease;}
body.cursor-on #chip{opacity:1;}
body.cursor-on{cursor:none;}
body.cursor-on a,body.cursor-on button,body.cursor-on [data-cursor],body.cursor-on input,body.cursor-on textarea,body.cursor-on label{cursor:none;}
#chip .ico{width:15px;height:12px;flex:0 0 auto;}
#chip .txt{max-width:0;overflow:hidden;opacity:0;transition:max-width .2s ease,opacity .14s ease,margin .2s ease;}
body.chip-hot #chip{background:var(--blue);color:#fff;}
body.chip-hot #chip .txt{max-width:140px;opacity:1;margin-left:8px;}

/* =============================================================
   HERO — letter slides up and out of a complete open envelope.
   Layers (back→front): flap (open lid) · back wall · letter · front pocket.
   The letter's base stays tucked behind the front pocket; the intro
   slides it up from fully inside. Base state = out (never stuck hidden).
   ============================================================= */
.hero-scroll{position:relative;z-index:2;}
/* when JS enables the scroll-scrub: tall wrapper + pinned viewport.
   Pull the wrapper up under the (sticky) nav so the envelope pins from the
   very first pixel of scroll (no free drift), then pad the hero back down
   by the nav height so the envelope still clears the bar. */
.hero-scroll.scrub{height:240vh;margin-top:calc(-1 * var(--navh,0px));}
.hero-scroll.scrub .hero{position:sticky;top:0;height:100vh;min-height:0;
  padding-top:calc(var(--navh,0px) + clamp(10px,1.6vh,22px));}
.hero{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,2.4vh,30px) clamp(14px,2.6vw,38px) clamp(28px,4vh,48px);}

.env-stage{position:relative;width:min(1180px,96vw);height:min(940px,calc(100vh - 140px));margin:0 auto;--drop:0px;--p:1;
  filter:drop-shadow(0 38px 60px rgba(21,34,74,.28));}
/* clips anything below the envelope's bottom edge — the tucked letter
   slides DOWN behind the pocket and must not poke out beneath it.
   (The letter never rises above the envelope top, so top-clipping is moot.) */
.env-clip{position:absolute;inset:0;overflow:hidden;border-radius:6px;}

/* opened lid — folded up behind the letter (big triangle at the top) */
.env-flap{position:absolute;left:0;right:0;top:clamp(40px,5vh,96px);height:clamp(240px,33vh,360px);z-index:1;
  background:linear-gradient(180deg,#f6eed9 0%,#efe4ca 72%,#e7dabd 100%);
  -webkit-clip-path:polygon(50% 0,100% 100%,0 100%);clip-path:polygon(50% 0,100% 100%,0 100%);}
.env-flap::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(21,34,74,.12));
  -webkit-clip-path:polygon(50% 0,100% 100%,0 100%);clip-path:polygon(50% 0,100% 100%,0 100%);}

/* envelope interior / back wall — anchored to the bottom, fills the lower screen */
.env-back{position:absolute;left:0;right:0;top:clamp(250px,33vh,430px);bottom:0;z-index:1;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#e9dcc0,#efe4c9 60%);
  box-shadow:inset 0 12px 22px -10px rgba(21,34,74,.30);}

/* the letter — anchored near the top, body extends down into the envelope */
.letter{position:absolute;left:13%;right:13%;top:clamp(26px,4vh,72px);bottom:0;z-index:3;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(24px,3.6vh,42px) clamp(26px,3.4vw,50px);border-radius:4px 4px 0 0;
  background:linear-gradient(168deg,#fefcf5,#f8f2e3);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 26px 50px -30px rgba(21,34,74,.40),0 8px 18px -12px rgba(21,34,74,.22);
  /* --p: 0 = tucked fully inside · 1 = pulled all the way out (base/fallback) */
  transform:translateY(calc(var(--drop) * (1 - var(--p))));will-change:transform;}
.letter .to-kick{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-38);margin-bottom:clamp(8px,1.4vh,15px);}
.letter h1{font-family:var(--sans);font-weight:700;font-size:clamp(28px,4vw,54px);line-height:1.06;
  letter-spacing:-.03em;margin:0;max-width:15ch;text-wrap:pretty;}
.letter h1 .bl{color:var(--blue);white-space:nowrap;}
.hero-sub{font-size:clamp(15px,1.35vw,18px);line-height:1.55;color:var(--ink-65);max-width:460px;margin:clamp(12px,1.8vh,20px) 0 0;text-wrap:pretty;}
.hero-cta{display:flex;align-items:center;gap:22px;margin-top:clamp(16px,2.4vh,28px);flex-wrap:wrap;}

/* front pocket — V opening at top, covers the letter's base; fills to bottom */
.env-front{position:absolute;left:0;right:0;top:clamp(360px,46vh,520px);bottom:0;z-index:4;
  background:linear-gradient(168deg,#f4ecd6,#ece0c4);border-radius:0 0 6px 6px;
  -webkit-clip-path:polygon(0 0,50% 26%,100% 0,100% 100%,0 100%);
  clip-path:polygon(0 0,50% 26%,100% 0,100% 100%,0 100%);
  filter:drop-shadow(0 -5px 6px rgba(21,34,74,.16));}
/* bottom-flap crease detail on the front */
.env-front::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,34,74,.06),transparent 58%);
  -webkit-clip-path:polygon(50% 24%,100% 100%,0 100%);clip-path:polygon(50% 24%,100% 100%,0 100%);}
.env-front::after{content:"";position:absolute;inset:0;opacity:.3;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");}

/* postage — top-right of the letter */
.postage{position:absolute;top:clamp(16px,2.6vh,30px);right:clamp(20px,3vw,46px);z-index:2;line-height:0;}
.stamp-slot{position:relative;display:inline-block;line-height:0;z-index:1;}
.postmark{position:absolute;left:-86px;bottom:-10px;width:148px;height:114px;z-index:0;
  opacity:.4;transform:rotate(-7deg);pointer-events:none;overflow:visible;}
.postmark .pm-waves path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;}
.postmark .o,.postmark .i{fill:none;stroke:var(--ink);stroke-width:2;}
.postmark .i{stroke-width:1.1;}
.postmark .pm-arc{fill:var(--ink);font-family:var(--mono);font-size:7px;font-weight:700;letter-spacing:.9px;}
.postmark .pm-d{fill:var(--ink);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.5px;}
.stamp-img{display:block;width:auto;height:auto;max-width:clamp(104px,10vw,140px);max-height:180px;
  transform:rotate(3deg);transform-origin:60% 50%;
  filter:drop-shadow(0 2px 1px rgba(21,34,74,.18)) drop-shadow(0 10px 16px rgba(21,34,74,.28));}

/* return — lower-left of the front pocket */
.return{position:absolute;left:clamp(20px,4vw,52px);bottom:clamp(20px,3.4vh,34px);z-index:2;
  font-family:var(--mono);font-size:11.5px;line-height:1.65;color:var(--ink-65);letter-spacing:.02em;}
.return .lbl{display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-38);margin-bottom:3px;}
.return b{display:block;color:var(--ink);font-weight:700;font-size:13.5px;letter-spacing:.01em;}

/* Priority — lower-right of the front pocket */
.env-foot{position:absolute;right:clamp(20px,4vw,52px);bottom:clamp(22px,3.6vh,36px);z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-38);}
.env-foot::before{content:"";display:inline-block;width:18px;height:1.5px;background:var(--blue);vertical-align:middle;margin-right:9px;opacity:.6;}

/* scroll-to-open hint — shown above the sealed envelope, fades as it opens */
.open-hint{position:absolute;top:-8%;left:0;right:0;z-index:5;text-align:center;pointer-events:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-50);
  opacity:0;}
.hero-scroll.scrub .open-hint{opacity:1;}
.hero-scroll.scrub.past .open-hint{opacity:0;}
.open-hint .oh-arrow{display:block;margin-top:10px;font-size:15px;color:var(--blue);animation:ohBob 1.7s ease-in-out infinite;}
@keyframes ohBob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
@media (prefers-reduced-motion:reduce){.open-hint .oh-arrow{animation:none;}}

/* ===== HERO POSTCARD (rotating bank) ===== */
.pc{--pcw:460px;width:min(var(--pcw),100%);position:relative;transform:rotate(-2.4deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.hero-pc:hover .pc{transform:rotate(0deg) scale(1.015);}
.pc-frame{position:relative;width:100%;aspect-ratio:7/5;border-radius:5px;overflow:hidden;
  background-color:var(--pc-paper,#f1e6cb);
  background-image:repeating-linear-gradient(45deg,var(--blue) 0 8px,transparent 8px 12px,#cdb78a 12px 20px,transparent 20px 24px);
  box-shadow:0 30px 50px -26px rgba(21,34,74,.5),0 5px 12px -7px rgba(21,34,74,.34),inset 0 0 0 1px rgba(21,34,74,.12);}
.pc-mat{position:absolute;inset:14px;border-radius:2px;overflow:hidden;background:var(--pc-paper,#f1e6cb);
  box-shadow:0 0 0 1px rgba(21,34,74,.14);}
.pc-scene{position:absolute;inset:0;}
.pc-scene svg{width:100%;height:100%;display:block;}
.pc-grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;pointer-events:none;
  background-image: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='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E");}
.pc-stamp{position:absolute;top:16px;right:16px;width:46px;height:56px;--pr:3.5px;background:#fbf6e9;padding:var(--pr);
  -webkit-mask:radial-gradient(circle var(--pr) at 0 0,#0000 99%,#000) round / calc(2*var(--pr)) calc(2*var(--pr)),conic-gradient(#000 0 0) content-box;
  mask:radial-gradient(circle var(--pr) at 0 0,#0000 99%,#000) round / calc(2*var(--pr)) calc(2*var(--pr)),conic-gradient(#000 0 0) content-box;
  filter:drop-shadow(1px 2px 2px rgba(21,34,74,.3));transform:rotate(3deg);}
.pc-stamp .sf{width:100%;height:100%;border:1px solid var(--blue);display:flex;align-items:center;justify-content:center;color:var(--blue);}
.pc-stamp .sf svg{width:74%;height:74%;}
.pc-postmark{position:absolute;top:22px;right:42px;width:58px;height:58px;opacity:.82;pointer-events:none;}
.pc-postmark circle{fill:none;stroke:var(--blue);stroke-width:1.8;}
.pc-postmark text{fill:var(--blue);font-family:"Space Mono",monospace;}
.pc-corner{position:absolute;left:18px;bottom:13px;font-family:"Space Mono",monospace;font-size:8px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);}
.pc-flip{position:absolute;right:16px;bottom:12px;font-family:"Space Mono",monospace;font-size:8px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-38);background:rgba(255,255,255,.5);
  padding:3px 7px;border-radius:20px;}
/* real postcard scans */
.pc-real{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.pc-photo{margin:0;background:#fff;padding:11px;border-radius:4px;
  box-shadow:0 30px 50px -26px rgba(21,34,74,.5),0 5px 12px -7px rgba(21,34,74,.34),inset 0 0 0 1px rgba(21,34,74,.10);}
.pc-photo img{display:block;width:100%;height:auto;aspect-ratio:7/5;object-fit:cover;border-radius:2px;background:#efe7d0;}

/* =============================================================
   WORK
   ============================================================= */
.work-item{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-bottom:36px;box-shadow:0 30px 60px -42px rgba(21,34,74,.4);}
.work-item.flip .wk-shot{order:2;border-right:0;border-left:1px solid var(--line);}
.wk-shot{display:block;text-decoration:none;color:inherit;position:relative;background:var(--paper-deep);min-height:420px;border-right:1px solid var(--line);overflow:hidden;}
.wk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.wk-shot:hover .wk-img{transform:scale(1.035);}
.wk-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--ink-38);background:repeating-linear-gradient(45deg,rgba(21,34,74,.03) 0 12px,transparent 12px 24px);}
.wk-ph .big{font-family:var(--sans);font-weight:700;font-size:30px;color:var(--ink-38);}
.wk-ph .fn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-50);}
.wk-ph .hint{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-38);}
.wk-realstamp{position:absolute;top:18px;right:18px;width:auto;height:auto;max-width:150px;max-height:150px;
  transform:rotate(5deg);filter:drop-shadow(0 9px 15px rgba(21,34,74,.36));}
.wk-body{padding:42px 44px;display:flex;flex-direction:column;}
.wk-tags{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.wk-tags .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);}
.wk-body h3{font-family:var(--sans);font-weight:600;font-size:32px;line-height:1.06;letter-spacing:-.02em;margin:0;}
.wk-what{font-size:18px;color:var(--blue);margin:12px 0 0;line-height:1.45;font-weight:500;}
.wk-built{font-size:16px;color:var(--ink-65);margin:18px 0 0;line-height:1.62;text-wrap:pretty;}
.wk-built b{color:var(--ink);font-weight:600;}
.wk-link{margin-top:auto;padding-top:26px;}
.auto-chip{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--blue);
  border:1.5px solid var(--blue);border-radius:6px;padding:12px 18px;transition:background .2s,color .2s,transform .2s;background:var(--white);}
.auto-chip .pl{width:18px;height:14px;flex:0 0 auto;}
.auto-chip:hover{background:var(--blue);color:#fff;transform:translateY(-2px);}
.auto-chip:hover .pl path{stroke:#fff;}
/* shipped automation note (non-interactive stamped line) */
.auto-chip.done{align-items:flex-start;gap:11px;background:var(--blue-tint);border-color:transparent;
  color:var(--ink);line-height:1.5;font-size:12px;letter-spacing:.02em;cursor:default;}
.auto-chip.done .pl{margin-top:2px;stroke:var(--blue);color:var(--blue);}
.auto-chip.done b{color:var(--blue);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;}

/* =============================================================
   AUTOMATION
   ============================================================= */
.auto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.auto-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;
  display:flex;flex-direction:column;gap:14px;transition:transform .25s,box-shadow .25s,border-color .25s;}
.auto-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -34px rgba(21,34,74,.45);border-color:var(--blue);}
.auto-ic{width:44px;height:44px;border-radius:9px;background:var(--blue-tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center;}
.auto-ic svg{width:23px;height:23px;}
.auto-card h4{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.01em;margin:4px 0 0;}
.auto-card p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-65);}
.auto-card .out{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--blue);margin-top:2px;}

/* =============================================================
   RATE CARD — distinct choices, never a running tally
   ============================================================= */
.rate-group + .rate-group{margin-top:50px;}
.rg-label{display:flex;align-items:baseline;gap:16px;margin-bottom:6px;}
.rg-label .t{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:-.01em;white-space:nowrap;}
.rg-label .s{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);white-space:nowrap;}
.rg-label .rule{flex:1;height:1px;background:var(--line);}
.rg-help{font-size:15.5px;color:var(--ink-65);margin:0 0 22px;text-wrap:pretty;}

.rate-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.rate-opt{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 32px 30px;display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .2s,box-shadow .2s,transform .2s;}
.rate-opt:hover{border-color:var(--blue);box-shadow:0 22px 46px -34px rgba(21,34,74,.4);transform:translateY(-3px);}
.rate-opt .perf{position:absolute;top:0;left:0;right:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--blue) 0 7px,transparent 7px 14px);opacity:.4;}
.rate-opt .nm{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);margin-top:6px;}
.rate-opt .price{font-family:var(--sans);font-weight:700;font-size:38px;letter-spacing:-.025em;line-height:1;
  margin:12px 0 0;display:flex;align-items:baseline;gap:8px;}
.rate-opt .price .from{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-38);}
.rate-opt .price .per{font-size:16px;font-weight:500;color:var(--ink-50);}
.rate-opt .inc{font-size:15px;color:var(--ink-65);line-height:1.6;margin:18px 0 0;text-wrap:pretty;}

.rate-talk{margin:22px 0 0;font-size:16px;color:var(--ink-65);}
.rate-talk a{color:var(--blue);text-decoration:none;font-weight:500;border-bottom:1.5px solid transparent;transition:border-color .2s;}
.rate-talk a:hover{border-color:var(--blue);}

.rate-bundle{display:flex;align-items:center;gap:16px;margin-top:34px;padding:20px 24px;
  border:1.5px dashed var(--blue);border-radius:10px;background:var(--blue-tint);}
.rate-bundle .seal{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--blue);
  display:flex;align-items:center;justify-content:center;color:var(--blue);background:#fff;}
.rate-bundle .seal svg{width:18px;height:14px;}
.rate-bundle p{margin:0;font-size:16px;line-height:1.5;color:var(--ink);}
.rate-bundle p b{color:var(--blue);font-weight:700;}

.rate-foot{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;margin-top:32px;
  border-top:1px solid var(--line-2);padding-top:26px;}
.honest{font-size:14.5px;color:var(--ink-65);line-height:1.62;margin:0;max-width:560px;text-wrap:pretty;}
.trust-stamp{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
  border:1.5px solid var(--blue);border-radius:30px;padding:10px 16px;white-space:nowrap;}
.trust-stamp i{width:8px;height:8px;border-radius:50%;background:var(--blue);}

/* =============================================================
   PROCESS — track your package
   ============================================================= */
.track{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:40px 44px;
  box-shadow:0 30px 60px -42px rgba(21,34,74,.4);}
.track-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:42px;}
.track-head .st{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:-.01em;}
.track-head .st i{width:11px;height:11px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(42,79,214,.16);}
.track-head .id{font-family:var(--mono);font-size:12px;color:var(--blue);}
.track-line{position:relative;}
.track-bar{position:absolute;top:11px;left:11px;right:11px;height:3px;background:var(--line);border-radius:2px;}
.track-fill{position:absolute;inset:0;width:50%;background:var(--blue);border-radius:2px;}
.track-steps{display:flex;justify-content:space-between;position:relative;}
.tstep{display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;text-align:center;}
.tstep .node{width:23px;height:23px;border-radius:50%;background:#fff;border:3px solid var(--line);z-index:1;
  display:flex;align-items:center;justify-content:center;}
.tstep.done .node{background:var(--blue);border-color:var(--blue);}
.tstep.done .node svg{width:11px;height:11px;}
.tstep.active .node{border-color:var(--blue);box-shadow:0 0 0 5px rgba(42,79,214,.16);}
.tstep .lab{font-family:var(--sans);font-weight:600;font-size:15px;}
.tstep .date{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-50);text-transform:uppercase;}
.tstep:not(.done):not(.active) .lab{color:var(--ink-50);}

/* =============================================================
   ABOUT
   ============================================================= */
.about-grid{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start;}
.about-photo{position:relative;}
/* headshot rendered as a real postage stamp. The scalloped edge is a single
   SVG mask (holes only on the perimeter) stretched to the card — bulletproof:
   the interior can never sprout holes the way a tiled gradient mask can. */
.stamp-photo{position:relative;margin:0;padding:17px;background:#fffdf7;
  transform:rotate(-1.4deg);
  filter:drop-shadow(0 1px 1px rgba(21,34,74,.16)) drop-shadow(0 20px 34px rgba(21,34,74,.30));
  -webkit-mask:url("img/stamp-mask.svg") center / 100% 100% no-repeat;
  mask:url("img/stamp-mask.svg") center / 100% 100% no-repeat;}
.stamp-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;}
.stamp-photo figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-50);text-align:center;padding:10px 4px 2px;white-space:nowrap;}
.about-body h2{font-family:var(--sans);font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.02em;margin:14px 0 0;text-wrap:balance;}
.about-body p{font-size:17.5px;line-height:1.7;color:var(--ink-80);margin:22px 0 0;text-wrap:pretty;}
.about-body p b{color:var(--ink);font-weight:600;}
.about-sign{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-50);margin-top:26px;}

/* =============================================================
   CONTACT — send a letter
   ============================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:stretch;}
.contact-letter{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:40px;
  box-shadow:0 30px 60px -42px rgba(21,34,74,.4);position:relative;}
.contact-letter .lines{position:absolute;inset:0;pointer-events:none;border-radius:var(--r);
  background-image:repeating-linear-gradient(transparent 0 38px,var(--line-2) 38px 39px);opacity:.5;}
.field{position:relative;z-index:1;margin-bottom:22px;}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin-bottom:8px;}
.field input,.field textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:9px 2px;outline:none;transition:border-color .2s;}
.field input:focus,.field textarea:focus{border-color:var(--blue);}
.field textarea{resize:vertical;min-height:90px;}
.contact-letter .submit{margin-top:8px;}
.form-note{font-family:var(--mono);font-size:11px;color:var(--ink-38);margin-top:14px;letter-spacing:.04em;}
.contact-side{display:flex;flex-direction:column;justify-content:center;}
.contact-side h2{font-family:var(--sans);font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1.06;letter-spacing:-.025em;margin:14px 0 0;text-wrap:balance;}
.contact-side p{font-size:18px;line-height:1.6;color:var(--ink-65);margin:20px 0 0;max-width:420px;text-wrap:pretty;}
.contact-side .big-cta{margin-top:34px;}
.contact-meta{margin-top:38px;display:flex;flex-direction:column;gap:10px;}
.contact-meta a{font-family:var(--mono);font-size:14px;color:var(--ink-80);text-decoration:none;letter-spacing:.02em;display:flex;align-items:center;gap:10px;transition:color .2s;}
.contact-meta a:hover{color:var(--blue);}

/* =============================================================
   FOOTER
   ============================================================= */
.footer{position:relative;z-index:2;background:var(--ink);color:rgba(244,241,234,.7);padding:46px 0;}
.footer-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.footer .brand b,.footer .brand{color:var(--paper);}
.footer .brand .tx small{color:rgba(244,241,234,.5);}
.footer-mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,234,.5);}

/* =============================================================
   REVEALS
   ============================================================= */
.reveal{opacity:1;transform:none;}
@keyframes up{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
body[data-mode="full"] .reveal.play{animation:up .8s cubic-bezier(.2,.7,.2,1) both;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;}}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:980px){
  .hero-row{grid-template-columns:1fr;gap:42px;}
  .hero-pc{min-height:0;justify-content:flex-start;}
  .pc{--pcw:430px;}
  .auto-grid{grid-template-columns:repeat(2,1fr);}
  .rate-grid{grid-template-columns:repeat(2,1fr);}
  .about-grid{grid-template-columns:1fr;gap:50px;}
  .about-photo{max-width:300px;}
  .contact-grid{grid-template-columns:1fr;gap:34px;}
}
@media (max-width:760px){
  :root{--pad:22px;}
  .section{padding:84px 0;}
  .nav-links{display:none;}
  .toggle{display:none;}
  .work-item,.work-item.flip{grid-template-columns:1fr;}
  .work-item.flip .wk-shot{order:0;border-left:0;border-bottom:1px solid var(--line);}
  .wk-shot{border-right:0;border-bottom:1px solid var(--line);min-height:240px;}
  .wk-body{padding:30px 26px;}
  .auto-grid{grid-template-columns:1fr;}
  .rate-grid{grid-template-columns:1fr;}
  .rate-pair{grid-template-columns:1fr;}
  .ratecard{padding:34px 24px 30px;}
  .rate-row{flex-direction:column;gap:10px;}
  .rr-price{padding-top:0;}
  .rate-foot{flex-direction:column;align-items:flex-start;}
  .track{padding:28px 22px;}
  .track-steps{flex-direction:column;gap:24px;align-items:flex-start;}
  .track-bar,.track-fill{display:none;}
  .tstep{flex-direction:row;text-align:left;gap:14px;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:0;}
}
@media (max-width:780px){
  .env-stage{height:min(620px,82vh);}
  .letter{left:8%;right:8%;}
  .return{font-size:11px;}
}
@media (max-width:560px){
  .env-stage{width:94vw;height:min(580px,82vh);}
  .letter{left:5%;right:5%;padding:26px 24px;}
  .letter h1{font-size:clamp(28px,8vw,40px);}
  .env-body{left:0;right:0;height:42%;}
  .postage{top:14px;right:16px;}
  .return b{font-size:13px;}
}