/* ============================================================
   DODKHOONE — Contact page
   Tokens carried over from index
   ============================================================ */
:root{
  --paper:#F1E8D3;
  --paper-2:#E8DEC4;
  --paper-3:#F7F0DE;
  --kraft:#D4BE94;
  --kraft-2:#BFA477;
  --kraft-3:#A98B5C;

  --ink:#1E1610;
  --ink-2:#3D2E24;
  --ink-3:#6E5A4A;
  --ink-4:#9B877A;

  --paprika:#A63723;
  --paprika-2:#7A2414;
  --paprika-3:#C24B32;
  --amber:#C58A2E;
  --amber-2:#E0A93F;
  --sage:#6F7A5A;

  --twine:#8B6F47;
  --twine-2:#6B5233;
  --chain:#7A6653;

  --ff-display:'Lalezar', serif;
  --ff-body:'Vazirmatn', system-ui, sans-serif;

  --gutter:clamp(20px, 4vw, 56px);
  --maxw:1280px;
  --sec-y:clamp(72px, 12vw, 150px);

  --r-1:2px;
  --r-2:6px;
  --r-3:14px;
  --r-4:32px;

  --sh-tag:0 1px 0 rgba(30,22,16,.06), 0 18px 30px -22px rgba(30,22,16,.35);
  --sh-tag-h:0 2px 0 rgba(30,22,16,.06), 0 32px 50px -22px rgba(30,22,16,.45);
  --sh-placard:0 2px 0 rgba(30,22,16,.08), 0 60px 60px -30px rgba(30,22,16,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-body);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* paper grain, same as index */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.42;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
::selection{background:var(--paprika); color:var(--paper)}

.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.02em}

.skip{
  position:absolute; inset-inline-start:-9999px; top:8px;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:6px; z-index:1000;
  font-size:13px; font-weight:600;
}
.skip:focus{inset-inline-start:16px}

/* ============================================================
   Typography
   ============================================================ */
h1,h2,h3,h4{margin:0; font-weight:800; line-height:1.15; letter-spacing:-.01em}
.display{font-family:var(--ff-display); font-weight:400; line-height:.95; letter-spacing:0}
.kicker{
  font-size:12px; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--paprika);
}
.kicker::before{content:"● "; opacity:.6; letter-spacing:0}
p{margin:0}
.lede{font-size:clamp(15px,1.3vw,18px); color:var(--ink-2); line-height:1.9; font-weight:400}

/* ============================================================
   NAV (same as index)
   ============================================================ */
.nav{
  position:fixed; top:0; inset-inline:0; z-index:200;
  padding:14px 0;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav.is-solid{
  background:rgba(241,232,211,.88);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 1px 0 rgba(30,22,16,.08);
  padding:10px 0;
}
.nav-inner{display:flex; align-items:center; gap:24px; justify-content:space-between}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--ff-display);
  font-size:26px; line-height:1; color:var(--ink);
}
.brand-mark{
  width:38px; height:38px; flex:none;
  border-radius:50%;
  background:var(--paprika); color:var(--paper);
  display:grid; place-items:center;
  font-family:var(--ff-display); font-size:18px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.15), 0 2px 0 rgba(30,22,16,.2);
  transform:rotate(-6deg);
  transition:transform .5s cubic-bezier(.2,.9,.2,1.4);
}
.brand:hover .brand-mark{transform:rotate(6deg) scale(1.05)}

.nav-links{display:flex; gap:6px; align-items:center; font-size:14px; font-weight:500}
.nav-links a{
  padding:8px 14px; border-radius:999px; color:var(--ink-2);
  transition:color .2s ease, background .2s ease; position:relative;
}
.nav-links a:hover{color:var(--ink); background:rgba(30,22,16,.06)}
.nav-links a[aria-current]::after{
  content:""; position:absolute; inset-inline:14px; bottom:2px; height:2px;
  background:var(--paprika); border-radius:2px;
}

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  background:var(--ink); color:var(--paper);
  border-radius:999px;
  font-size:13.5px; font-weight:600;
  transition:transform .2s ease, background .2s ease;
  box-shadow:0 6px 0 -2px rgba(30,22,16,.25);
}
.nav-cta:hover{background:var(--paprika); transform:translateY(-1px)}
.nav-cta svg{width:14px; height:14px}

.nav-toggle{display:none}
@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:64px 12px auto 12px;
    flex-direction:column; align-items:stretch;
    background:var(--paper-3);
    border:1px solid rgba(30,22,16,.1);
    border-radius:var(--r-3);
    padding:8px;
    box-shadow:var(--sh-tag);
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav-links.is-open{opacity:1; transform:none; pointer-events:auto}
  .nav-links a{padding:12px 16px; border-radius:10px}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%;
    background:rgba(30,22,16,.06);
  }
}

/* ============================================================
   HERO — hanging placard
   ============================================================ */
.hero-contact{
  position:relative;
  padding-top:120px;
  padding-bottom:clamp(40px, 6vw, 88px);
  overflow:hidden;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.hero-rail{
  position:absolute;
  inset-inline:0;
  top:92px;
  height:2px;
  background:var(--ink);
  z-index:1;
}
.hero-rail::before, .hero-rail::after{
  content:""; position:absolute; top:-3px;
  width:8px; height:8px; border-radius:50%;
  background:var(--ink);
}
.hero-rail::before{inset-inline-start:14px}
.hero-rail::after{inset-inline-end:14px}

/* two edge sausages, small, framing the placard */
.edge-sausage{
  position:absolute;
  top:96px;
  width:22px;
  transform-origin:50% 0;
  animation:sway 7.6s ease-in-out infinite;
  will-change:transform;
  pointer-events:none;
  z-index:2;
}
.edge-sausage.l{inset-inline-start:4%}
.edge-sausage.r{inset-inline-end:4%; animation-delay:-2.1s}
.edge-sausage svg{overflow:visible}
@media (max-width:820px){.edge-sausage{display:none}}

@keyframes sway{
  0%,100%{transform:rotate(-1.4deg)}
  50%{transform:rotate(1.4deg)}
}

/* placard wrapper — rotates as one unit from above */
.placard-hang{
  position:relative;
  z-index:3;
  margin-top:clamp(60px, 9vw, 110px);
  padding-top:130px; /* room for chains */
  transform-origin:50% -40px;
  animation:placardSway 9s ease-in-out infinite;
  will-change:transform;
}
@keyframes placardSway{
  0%,100%{transform:rotate(-.5deg)}
  50%{transform:rotate(.5deg)}
}

.chain{
  position:absolute;
  top:0;
  width:14px;
  height:130px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:6px;
}
.chain.l{inset-inline-start:20%}
.chain.r{inset-inline-end:20%}
@media (max-width:720px){.chain.l{inset-inline-start:14%} .chain.r{inset-inline-end:14%}}

.chain i{
  display:block;
  width:7px; height:11px;
  border:1.5px solid var(--chain);
  border-radius:50%;
  background:var(--paper);
  flex:none;
}

.placard{
  position:relative;
  max-width:920px;
  margin-inline:auto;
  background:
    radial-gradient(circle at 22% 18%, rgba(169,139,92,.24), transparent 45%),
    radial-gradient(circle at 78% 82%, rgba(169,139,92,.18), transparent 45%),
    linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border:1px solid rgba(30,22,16,.28);
  border-radius:var(--r-3);
  padding:clamp(30px, 4.5vw, 56px) clamp(24px, 4vw, 56px);
  box-shadow:var(--sh-placard);
}
/* wood/metal corner brackets */
.placard::before, .placard::after{
  content:""; position:absolute;
  width:26px; height:26px;
  border:2px solid var(--ink);
  border-radius:2px;
  opacity:.7;
}
.placard::before{top:12px; inset-inline-start:12px; border-inline-end:0; border-bottom:0}
.placard::after{bottom:12px; inset-inline-end:12px; border-inline-start:0; border-top:0}

.placard-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:.3em;
  color:var(--paprika);
  text-transform:uppercase;
  margin-bottom:14px;
}
.placard-eyebrow::before, .placard-eyebrow::after{
  content:""; width:26px; height:1px; background:var(--paprika); opacity:.5;
}

.placard-title{
  font-family:var(--ff-display);
  font-size:clamp(56px, 9vw, 128px);
  line-height:.9;
  color:var(--ink);
  font-weight:400;
  letter-spacing:-.005em;
  text-align:center;
  margin-bottom:10px;
}
.placard-title em{
  font-style:normal;
  color:var(--paprika);
}

.placard-sub{
  text-align:center;
  font-size:clamp(14px,1.2vw,16px);
  color:var(--ink-3);
  max-width:56ch;
  margin-inline:auto;
  line-height:1.85;
}

.placard-divider{
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  margin:22px auto 20px;
  color:var(--ink-3);
}
.placard-divider i{
  display:block; width:6px; height:6px; border-radius:50%;
  background:var(--paprika);
}
.placard-divider span{
  flex:1;
  height:1px;
  max-width:120px;
  background:repeating-linear-gradient(90deg, var(--ink-4) 0 4px, transparent 4px 9px);
}

.placard-meta{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  text-align:center;
}
@media (max-width:640px){.placard-meta{grid-template-columns:1fr; gap:18px}}

.placard-meta .m{
  display:flex; flex-direction:column; gap:4px;
  padding-inline:10px;
  position:relative;
}
.placard-meta .m + .m::before{
  content:""; position:absolute;
  inset-inline-start:0; top:8px; bottom:8px;
  width:1px;
  background:repeating-linear-gradient(180deg, var(--ink-4) 0 3px, transparent 3px 7px);
}
@media (max-width:640px){
  .placard-meta .m + .m::before{display:none}
  .placard-meta .m{padding-block:12px; border-top:1px dashed rgba(30,22,16,.25)}
  .placard-meta .m:first-child{border-top:0}
}
.placard-meta .m b{
  font-size:10.5px; font-weight:800; letter-spacing:.24em;
  color:var(--paprika); text-transform:uppercase;
}
.placard-meta .m span{
  font-size:15px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.placard-meta .m small{
  font-size:11.5px; color:var(--ink-3); font-weight:500;
}

.hero-ctas{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center;
  margin-top:clamp(28px, 4vw, 42px);
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px;
  border-radius:999px;
  font-size:14px; font-weight:700;
  transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  will-change:transform;
}
.btn-primary{
  background:var(--paprika); color:var(--paper-3);
  box-shadow:0 8px 0 -3px var(--paprika-2), 0 20px 30px -18px rgba(122,36,20,.6);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 0 -3px var(--paprika-2), 0 26px 36px -18px rgba(122,36,20,.7)}
.btn-primary:active{transform:translateY(2px); box-shadow:0 4px 0 -3px var(--paprika-2)}
.btn-ghost{
  background:transparent; color:var(--ink);
  border:1.5px solid var(--ink);
}
.btn-ghost:hover{background:var(--ink); color:var(--paper-3); transform:translateY(-2px)}
.btn svg{width:16px;height:16px}

/* ============================================================
   TEAR-OFF NOTICE — signature
   ============================================================ */
.section{padding-block:var(--sec-y); position:relative}
.section-head{
  display:flex; align-items:end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  margin-bottom:clamp(40px,6vw,72px);
}
.section-title{
  font-family:var(--ff-display);
  font-size:clamp(44px, 6vw, 84px);
  line-height:.95; font-weight:400;
  letter-spacing:-.005em;
}
.section-title .sm{
  display:block;
  font-family:var(--ff-body);
  font-size:12px; font-weight:700;
  letter-spacing:.24em; color:var(--paprika);
  margin-bottom:14px; text-transform:uppercase;
}
.section-note{max-width:46ch; font-size:15px; color:var(--ink-3); line-height:1.85}

.notice-section{background:var(--paper-2); position:relative; overflow:hidden}
.notice-section::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 6% 12%, rgba(166,55,35,.06), transparent 38%),
    radial-gradient(circle at 94% 88%, rgba(197,138,46,.07), transparent 40%);
  pointer-events:none;
}

.notice{
  position:relative;
  max-width:1000px;
  margin-inline:auto;
  background:
    radial-gradient(circle at 15% 10%, rgba(169,139,92,.16), transparent 45%),
    radial-gradient(circle at 88% 90%, rgba(169,139,92,.12), transparent 45%),
    linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border:1px solid rgba(30,22,16,.18);
  border-radius:var(--r-3) var(--r-3) 4px 4px;
  box-shadow:
    0 2px 0 rgba(30,22,16,.06),
    0 40px 60px -34px rgba(30,22,16,.5);
  padding:clamp(28px, 4vw, 52px) clamp(24px, 4vw, 52px) 0;
  overflow:hidden;
}

/* the tape holding the notice to the wall */
.notice-tape{
  position:absolute;
  top:-14px;
  inset-inline-start:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:130px; height:30px;
  background:rgba(255,255,255,.4);
  border:1px solid rgba(30,22,16,.06);
  border-radius:2px;
  box-shadow:0 2px 4px rgba(30,22,16,.08);
}
.notice-tape::before, .notice-tape::after{
  content:""; position:absolute; top:0; bottom:0; width:6px;
  background-image:repeating-linear-gradient(0deg, rgba(30,22,16,.12) 0 3px, transparent 3px 6px);
}
.notice-tape::before{inset-inline-start:0}
.notice-tape::after{inset-inline-end:0}

.notice-stamp{
  position:absolute;
  top:22px;
  inset-inline-end:22px;
  width:88px; height:88px;
  transform:rotate(-9deg);
  opacity:.9;
  pointer-events:none;
}
@media (max-width:640px){.notice-stamp{width:64px;height:64px;top:14px;inset-inline-end:14px}}

.notice-head{
  display:flex; flex-direction:column; gap:10px;
  padding-bottom:22px;
  border-bottom:2px dashed rgba(30,22,16,.32);
  margin-bottom:0;
}
.notice-kicker{
  font-size:11px; font-weight:800; letter-spacing:.32em;
  color:var(--paprika); text-transform:uppercase;
}
.notice-title{
  font-family:var(--ff-display);
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.1;
  color:var(--ink);
  font-weight:400;
  max-width:20ch;
}
.notice-lead{
  font-size:14.5px;
  color:var(--ink-3);
  line-height:1.8;
  max-width:52ch;
}

/* perforated row of tabs */
.tabs{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  margin-inline:calc(clamp(24px,4vw,52px) * -1);
  padding-inline:clamp(24px,4vw,52px);
  position:relative;
}
@media (max-width:820px){.tabs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.tabs{grid-template-columns:1fr}}

.tab{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:10px;
  padding:26px 16px 30px;
  text-align:center;
  background:transparent;
  border-inline-end:1.5px dashed rgba(30,22,16,.32);
  transition:transform .35s cubic-bezier(.2,.9,.2,1.2), background .25s ease;
  cursor:pointer;
  transform-origin:50% 0;
  will-change:transform;
  color:inherit;
  text-align:center;
  font-family:inherit;
  min-height:180px;
  outline-offset:-4px;
}
.tab:last-child{border-inline-end:0}
@media (max-width:820px){
  .tab:nth-child(2n){border-inline-end:0}
  .tab:nth-child(-n+2){border-bottom:1.5px dashed rgba(30,22,16,.32)}
}
@media (max-width:460px){
  .tab{border-inline-end:0; border-bottom:1.5px dashed rgba(30,22,16,.32); min-height:auto}
  .tab:last-child{border-bottom:0}
}

.tab:hover{
  background:rgba(247,240,222,.6);
  transform:translateY(-6px) rotate(-.8deg);
}
.tab:focus-visible{
  background:rgba(247,240,222,.75);
  outline:2px solid var(--paprika);
}

.tab-icon{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.2,.9,.2,1.4), background .25s ease;
  flex:none;
}
.tab-icon svg{width:17px;height:17px}
.tab:hover .tab-icon{background:var(--paprika); transform:rotate(-8deg) scale(1.06)}

.tab-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  color:var(--paprika);
  text-transform:uppercase;
}
.tab-value{
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  line-height:1.35;
  font-variant-numeric:tabular-nums;
}
.tab-hint{
  font-size:10.5px;
  color:var(--ink-3);
  font-weight:500;
  letter-spacing:.06em;
  margin-top:auto;
  padding-top:8px;
  display:inline-flex; align-items:center; gap:5px;
  transition:color .25s ease;
}
.tab-hint svg{width:11px;height:11px}
.tab:hover .tab-hint{color:var(--paprika)}

/* torn-off state */
.tab.is-torn{
  animation:tearOff .8s cubic-bezier(.3,.1,.3,1) forwards;
  pointer-events:none;
}
@keyframes tearOff{
  0%{transform:translateY(0) rotate(0); opacity:1}
  30%{transform:translateY(-4px) rotate(-2deg)}
  100%{transform:translateY(140%) rotate(-9deg); opacity:0}
}

/* notches along the top of the tab row */
.tabs-notch{
  position:relative;
  height:8px;
  margin-inline:calc(clamp(24px,4vw,52px) * -1);
  background:
    radial-gradient(circle at 4px 8px, transparent 4px, var(--paper-3) 4.5px) 0 0/16px 8px repeat-x;
  filter:drop-shadow(0 -2px 0 rgba(30,22,16,.06));
  pointer-events:none;
}

/* toast */
.toast{
  position:fixed;
  bottom:28px;
  inset-inline-start:50%;
  transform:translateX(-50%) translateY(120%);
  background:var(--ink);
  color:var(--paper);
  padding:14px 22px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  box-shadow:0 20px 34px -14px rgba(0,0,0,.55);
  transition:transform .5s cubic-bezier(.2,.9,.2,1.2), opacity .35s ease;
  z-index:500;
  display:inline-flex; align-items:center; gap:10px;
  opacity:0;
  pointer-events:none;
  max-width:min(92vw, 420px);
}
.toast svg{width:15px;height:15px; color:var(--amber-2); flex:none}
.toast.is-on{transform:translateX(-50%) translateY(0); opacity:1}

/* ============================================================
   HOURS + FIND US
   ============================================================ */
.hours-section{background:var(--paper)}
.split{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(28px,4vw,64px);
  align-items:stretch;
}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.signboard{
  position:relative;
  background:
    radial-gradient(circle at 20% 15%, rgba(169,139,92,.24), transparent 45%),
    linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border:1px solid rgba(30,22,16,.2);
  border-radius:var(--r-3);
  box-shadow:var(--sh-tag);
  padding:clamp(26px,3.4vw,44px);
  display:flex; flex-direction:column;
}
.signboard::before{
  content:""; position:absolute;
  inset-inline:24px; top:-1px; height:6px;
  background:
    radial-gradient(circle at 3px 8px, transparent 4px, var(--paper-3) 4.5px) 0 0/8px 6px repeat-x;
}
.signboard::after{
  content:""; position:absolute;
  inset-inline:24px; bottom:-1px; height:6px;
  background:
    radial-gradient(circle at 3px -2px, transparent 4px, var(--paper-3) 4.5px) 0 0/8px 6px repeat-x;
}

.hours-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding-bottom:20px;
  border-bottom:1.5px dashed rgba(30,22,16,.28);
  margin-bottom:8px;
}
.hours-head h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(26px,2.6vw,36px);
  line-height:1.05;
  color:var(--ink);
}
.hours-head .live{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.18em;
  color:var(--sage);
  text-transform:uppercase;
  padding:6px 12px;
  border:1px dashed var(--sage);
  border-radius:999px;
  white-space:nowrap;
}
.hours-head .live i{
  width:7px;height:7px;border-radius:50%;background:var(--sage);
  box-shadow:0 0 0 3px rgba(111,122,90,.2);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(111,122,90,.2)}
  50%{box-shadow:0 0 0 7px rgba(111,122,90,0)}
}

.hours-list{list-style:none; padding:0; margin:0}
.hours-list li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:baseline;
  padding:14px 0;
  border-bottom:1px dashed rgba(30,22,16,.16);
}
.hours-list li:last-child{border-bottom:0}
.hours-list .day{
  font-size:14px; font-weight:600; color:var(--ink-2);
  position:relative;
}
.hours-list .day::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:4px;
  height:0;
  border-bottom:1px dotted rgba(30,22,16,.24);
  z-index:-1;
}
.hours-list .t{
  font-size:14px;
  font-weight:800;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  background:var(--paper-3);
  padding-inline:8px;
  padding-block:2px;
}
.hours-list li.closed .t{color:var(--paprika); font-weight:700}

.hours-foot{
  margin-top:20px;
  padding-top:18px;
  border-top:1.5px dashed rgba(30,22,16,.28);
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--ink-3);
  line-height:1.7;
}
.hours-foot .wax{
  width:34px; height:34px; flex:none;
  border-radius:50%;
  background:var(--paprika);
  color:var(--paper);
  display:grid; place-items:center;
  font-family:var(--ff-display);
  font-size:14px;
  transform:rotate(-8deg);
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.2), 0 3px 6px rgba(0,0,0,.2);
}

/* find us — hand-drawn map */
.findmap{
  position:relative;
  background:
    radial-gradient(circle at 30% 25%, rgba(169,139,92,.2), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(169,139,92,.16), transparent 45%),
    linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border:1px solid rgba(30,22,16,.2);
  border-radius:var(--r-3);
  box-shadow:var(--sh-tag);
  padding:clamp(24px,3vw,40px);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.findmap .addr{
  display:flex; flex-direction:column; gap:6px;
  padding-bottom:20px;
  border-bottom:1.5px dashed rgba(30,22,16,.28);
  margin-bottom:20px;
}
.findmap .addr .k{
  font-size:11px; font-weight:800; letter-spacing:.24em;
  color:var(--paprika); text-transform:uppercase;
}
.findmap .addr h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(24px,2.4vw,32px);
  line-height:1.15;
  color:var(--ink);
}
.findmap .addr p{
  font-size:14px;
  color:var(--ink-3);
  line-height:1.7;
}
.findmap .map-svg{
  position:relative;
  flex:1;
  min-height:220px;
}
.findmap .map-svg svg{width:100%; height:100%; display:block}

/* ============================================================
   FAQ slips
   ============================================================ */
.faq-section{background:var(--paper-2); position:relative; overflow:hidden}
.faq-section::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(-14deg, transparent 0 140px, rgba(30,22,16,.03) 140px 141px);
  pointer-events:none;
}
.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.6vw,32px);
}
@media (max-width:760px){.faq-grid{grid-template-columns:1fr}}

.slip{
  position:relative;
  background:
    radial-gradient(circle at 20% 15%, rgba(169,139,92,.16), transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(169,139,92,.12), transparent 50%),
    var(--paper-3);
  border:1px solid rgba(30,22,16,.14);
  border-radius:var(--r-3);
  padding:26px 24px 22px;
  box-shadow:var(--sh-tag);
  transform:rotate(var(--rot, 0deg));
  transition:transform .4s cubic-bezier(.2,.9,.2,1.2), box-shadow .35s ease;
}
.slip:hover{transform:rotate(0) translateY(-3px); box-shadow:var(--sh-tag-h)}
.slip::before{
  content:"";
  position:absolute;
  top:-8px; inset-inline-start:50%;
  transform:translateX(-50%);
  width:14px; height:14px;
  border-radius:50%;
  background:var(--amber-2);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.3);
}
.slip::after{
  content:"";
  position:absolute;
  top:-2px; inset-inline-start:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:44px; height:13px;
  background:rgba(255,255,255,.28);
  border-radius:2px;
}
.slip-q{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--paprika);
  text-transform:uppercase;
  margin-bottom:10px;
}
.slip h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(20px,1.8vw,25px);
  line-height:1.2;
  color:var(--ink);
  margin-bottom:10px;
}
.slip p{
  font-size:14px;
  color:var(--ink-2);
  line-height:1.85;
}
.slip p b{color:var(--ink); font-weight:700}

/* ============================================================
   PARCEL FORM
   ============================================================ */
.parcel-section{
  background:var(--paper);
  position:relative;
}
.parcel{
  position:relative;
  max-width:960px;
  margin-inline:auto;
  background:
    radial-gradient(circle at 15% 12%, rgba(169,139,92,.22), transparent 45%),
    radial-gradient(circle at 88% 88%, rgba(169,139,92,.18), transparent 45%),
    linear-gradient(180deg, var(--kraft), var(--kraft-2));
  border:1px solid rgba(30,22,16,.3);
  border-radius:var(--r-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 0 rgba(30,22,16,.08),
    0 60px 70px -40px rgba(30,22,16,.5);
  padding:clamp(26px,4vw,56px);
  overflow:hidden;
}

/* fold creases */
.parcel::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(30,22,16,.09) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(32% - .5px), rgba(30,22,16,.07) calc(32% - .5px) calc(32% + .5px), transparent calc(32% + .5px));
  pointer-events:none;
}
/* twine crossing — horizontal & vertical */
.parcel .twine-h, .parcel .twine-v{
  position:absolute;
  background:linear-gradient(180deg, var(--twine), var(--twine-2));
  pointer-events:none;
  z-index:1;
}
.parcel .twine-h{
  inset-inline:-40px;
  top:28%;
  height:7px;
  background-image:
    repeating-linear-gradient(96deg, transparent 0 3px, rgba(0,0,0,.18) 3px 4px),
    linear-gradient(180deg, var(--twine), var(--twine-2));
  box-shadow:0 2px 3px rgba(0,0,0,.18);
}
.parcel .twine-v{
  inset-block:-40px;
  inset-inline-start:22%;
  width:7px;
  background-image:
    repeating-linear-gradient(6deg, transparent 0 3px, rgba(0,0,0,.18) 3px 4px),
    linear-gradient(90deg, var(--twine), var(--twine-2));
  box-shadow:2px 0 3px rgba(0,0,0,.15);
}

/* the shipping label = cream card that holds the form */
.parcel-label{
  position:relative;
  z-index:2;
  background:
    radial-gradient(circle at 25% 20%, rgba(169,139,92,.14), transparent 55%),
    var(--paper-3);
  border:1px solid rgba(30,22,16,.22);
  border-radius:var(--r-3);
  padding:clamp(24px,3.4vw,44px);
  margin-inline-start:auto;
  margin-inline-end:auto;
  max-width:640px;
  transform:rotate(-.6deg);
  box-shadow:
    0 1px 0 rgba(30,22,16,.08),
    0 24px 40px -26px rgba(0,0,0,.5);
  transition:transform .6s cubic-bezier(.2,.9,.2,1.2);
}
.parcel-label:hover{transform:rotate(0)}

.label-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px;
  padding-bottom:16px;
  border-bottom:1.5px dashed rgba(30,22,16,.3);
  margin-bottom:22px;
}
.label-head h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(26px,2.6vw,36px);
  line-height:1.05;
  color:var(--ink);
}
.label-head .k{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.26em;
  color:var(--paprika);
  text-transform:uppercase;
  display:block;
  margin-bottom:6px;
}
.label-head .to{
  text-align:end;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ink-3);
  line-height:1.5;
  text-transform:uppercase;
}
.label-head .to b{display:block; color:var(--ink); font-family:var(--ff-display); font-size:18px; font-weight:400; letter-spacing:0; margin-top:4px}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}
@media (max-width:520px){.form-row{grid-template-columns:1fr; gap:16px}}

.field{position:relative; display:flex; flex-direction:column; gap:6px}
.field label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.field .input,
.field .textarea,
.field .select{
  width:100%;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1.5px solid rgba(30,22,16,.35);
  padding:8px 2px;
  border-radius:0;
  transition:border-color .25s ease, background .25s ease;
  font-variant-numeric:tabular-nums;
}
.field .textarea{resize:vertical; min-height:90px; line-height:1.7; padding-top:10px}
.field .select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236E5A4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:left 4px center;
  padding-inline-start:22px;
}
.field .input:hover, .field .textarea:hover, .field .select:hover{border-bottom-color:var(--ink-2)}
.field .input:focus, .field .textarea:focus, .field .select:focus{
  outline:none;
  border-bottom-color:var(--paprika);
  background:rgba(166,55,35,.04);
}
.field .input::placeholder, .field .textarea::placeholder{color:var(--ink-4)}

.field.full{grid-column:1 / -1}

/* submit — wax seal */
.form-submit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:22px;
  margin-top:8px;
  border-top:1.5px dashed rgba(30,22,16,.3);
  flex-wrap:wrap;
}
.form-submit .note{
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.7;
  max-width:34ch;
}
.form-submit .note b{color:var(--ink-2); font-weight:700}

.seal-btn{
  position:relative;
  width:112px;
  height:112px;
  flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:transparent;
  transition:transform .3s cubic-bezier(.2,.9,.2,1.4);
  transform:rotate(-6deg);
}
.seal-btn:hover{transform:rotate(2deg) scale(1.04)}
.seal-btn:active{transform:rotate(-2deg) scale(.96)}
.seal-btn:focus-visible{outline:2.5px solid var(--paprika); outline-offset:6px}
.seal-btn svg{
  width:100%; height:100%;
  filter:drop-shadow(0 8px 12px rgba(122,36,20,.4));
  transition:filter .3s ease, transform .3s ease;
}
.seal-btn:hover svg{filter:drop-shadow(0 12px 18px rgba(122,36,20,.55))}
.seal-btn .lbl{
  position:absolute;
  inset:0;
  display:grid; place-items:center;
  color:var(--paper);
  font-family:var(--ff-display);
  font-size:18px;
  line-height:1;
  padding-top:4px;
  pointer-events:none;
}
@media (max-width:520px){
  .form-submit{justify-content:center; text-align:center}
  .form-submit .note{text-align:center; max-width:100%}
}

/* success state */
.parcel.is-sent .seal-btn{
  animation:stampDown .7s cubic-bezier(.3,.9,.2,1.2) forwards;
  pointer-events:none;
}
@keyframes stampDown{
  0%{transform:rotate(-6deg) scale(1); }
  30%{transform:translateY(-16px) rotate(-14deg) scale(1.1)}
  55%{transform:translateY(6px) rotate(-3deg) scale(.94)}
  75%{transform:translateY(-2px) rotate(-6deg) scale(1.01)}
  100%{transform:translateY(0) rotate(-6deg) scale(1)}
}
.parcel.is-sent .seal-btn .lbl{color:var(--paper-3)}
.parcel.is-sent .seal-btn svg{filter:drop-shadow(0 4px 6px rgba(122,36,20,.55))}

.sent-msg{
  display:none;
  padding:16px 20px;
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--r-2);
  font-size:13.5px;
  line-height:1.7;
  align-items:center;
  gap:12px;
  margin-top:18px;
}
.sent-msg.show{display:flex}
.sent-msg svg{width:16px;height:16px; color:var(--amber-2); flex:none}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1; transform:none}
}

/* ============================================================
   FOOTER (same as index)
   ============================================================ */
.footer{
  background:var(--ink);
  color:var(--paper);
  padding-top:clamp(56px,7vw,96px);
  padding-bottom:32px;
  position:relative;
  overflow:hidden;
}
.footer-rail{
  position:absolute;
  top:0; inset-inline:0;
  height:2px;
  background:rgba(241,232,211,.2);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:56px;
  border-bottom:1px solid rgba(241,232,211,.12);
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

.footer h4{
  font-family:var(--ff-body);
  font-size:11px; font-weight:800; letter-spacing:.22em;
  color:rgba(241,232,211,.55);
  text-transform:uppercase;
  margin-bottom:20px;
}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.footer ul a, .footer ul span{
  font-size:14px;
  color:rgba(241,232,211,.85);
  transition:color .2s ease;
  font-variant-numeric:tabular-nums;
}
.footer ul a:hover{color:var(--amber-2)}
.footer-brand{display:flex; flex-direction:column; gap:16px; max-width:38ch}
.footer-brand .brand{color:var(--paper)}
.footer-brand p{
  font-size:14px;
  color:rgba(241,232,211,.72);
  line-height:1.8;
}
.footer-bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:32px;
  font-size:12.5px;
  color:rgba(241,232,211,.5);
}
.footer-bottom .dot{color:var(--paprika-3)}

/* reveal */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.2,.9,.2,1), transform 1s cubic-bezier(.2,.9,.2,1);
  transition-delay:var(--rd, 0s);
}
.reveal.is-in{opacity:1; transform:none}