/* ============================================================
   DODKHOONE — Design System
   ============================================================ */
:root{
  /* surfaces */
  --paper:#F1E8D3;
  --paper-2:#E8DEC4;
  --paper-3:#F7F0DE;
  --kraft:#D4BE94;
  --kraft-2:#BFA477;
  --kraft-3:#A98B5C;

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

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

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

  /* rhythm */
  --gutter:clamp(20px, 4vw, 56px);
  --maxw:1280px;
  --sec-y:clamp(72px, 12vw, 160px);

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

  /* shadows */
  --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);
}

*,*::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;
}

/* subtle paper grain overlay */
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)}

/* utilities */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.02em}
.num{font-feature-settings:"ss01" on}

/* ============================================================
   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(16px,1.4vw,19px); color:var(--ink-2); line-height:1.85; font-weight:400}

/* ============================================================
   NAV
   ============================================================ */
.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
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  padding-top:96px;
  padding-bottom:40px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* the horizontal rail the sausages hang from */
.rail{
  position:absolute;
  inset-inline:0;
  height:2px;
  background:var(--ink);
  z-index:2;
}
.rail::before, .rail::after{
  content:""; position:absolute; top:-3px;
  width:8px; height:8px; border-radius:50%;
  background:var(--ink);
}
.rail::before{inset-inline-start:14px}
.rail::after{inset-inline-end:14px}

.hero-rail{top:172px}

/* hanging sausages */
.hero-hangings{
  position:absolute;
  inset-inline:0;
  top:174px;
  height:min(56vh, 480px);
  pointer-events:none;
  z-index:3;
}
.hang{
  position:absolute;
  top:0;
  inset-inline-start:var(--x);
  width:38px;
  height:var(--h);
  transform-origin:50% 0;
  animation:sway var(--sp, 6s) ease-in-out var(--dl, 0s) infinite;
  will-change:transform;
}
.hang svg{width:100%; height:100%; overflow:visible}
@keyframes sway{
  0%,100%{transform:rotate(var(--r1, -1.1deg))}
  50%{transform:rotate(var(--r2, 1.1deg))}
}
@media (max-width: 700px){
  .hang:nth-child(n+5){display:none}
  .hero-hangings{height:36vh}
}

/* hero content */
.hero-content{
  position:relative;
  z-index:4;
  margin-top:auto;
  padding-bottom:24px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px;
  border:1px dashed rgba(30,22,16,.35);
  border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.08em;
  color:var(--ink-2);
  margin-bottom:28px;
  background:rgba(247,240,222,.6);
}
.hero-eyebrow i{
  width:7px;height:7px;border-radius:50%;background:var(--paprika);
  box-shadow:0 0 0 3px rgba(166,55,35,.18);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(166,55,35,.18)}
  50%{box-shadow:0 0 0 7px rgba(166,55,35,0)}
}

.hero-title{
  font-family:var(--ff-display);
  font-size:clamp(88px, 15.5vw, 236px);
  line-height:.86;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:0;
  position:relative;
}
.hero-title .accent{
  color:var(--paprika);
  display:inline-block;
  position:relative;
}
.hero-title .accent::after{
  content:"";
  position:absolute;
  inset-inline:-4px;
  inset-block:44% 52%;
  background:var(--paper);
  border-radius:50%;
  z-index:-1;
}

.hero-sub{
  max-width:56ch;
  margin-top:clamp(20px, 3vw, 34px);
  font-size:clamp(15px,1.35vw,18px);
  color:var(--ink-2);
  line-height:1.9;
}
.hero-sub b{color:var(--ink); font-weight:600}

.hero-ctas{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(26px, 4vw, 40px);
  align-items:center;
}

.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}

/* hero footer strip */
.hero-foot{
  position:relative;
  z-index:4;
  margin-top:clamp(28px, 5vw, 56px);
  padding-top:20px;
  border-top:1px dashed rgba(30,22,16,.28);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
  font-size:13px;
  color:var(--ink-3);
}
.hero-foot .seal-mini{
  display:flex; align-items:center; gap:10px;
  font-weight:600; color:var(--ink-2);
}
.seal-mini-dot{
  width:26px;height:26px;border-radius:50%;
  background:var(--paprika); color:var(--paper);
  display:grid;place-items:center;
  font-family:var(--ff-display); font-size:12px;
  transform:rotate(-8deg);
}
.hero-foot .hours{
  text-align:center;
  font-weight:500;
}
.hero-foot .hours b{color:var(--ink); font-weight:700}
.hero-foot .deliv{
  text-align:end;
  font-weight:500;
}
@media (max-width: 640px){
  .hero-foot{grid-template-columns:1fr; gap:12px; text-align:start}
  .hero-foot .hours, .hero-foot .deliv{text-align:start}
}

/* ============================================================
   PROMISE STRIP — kraft tape with stamped badges
   ============================================================ */
.promises{
  position:relative;
  z-index:5;
  background:var(--ink);
  color:var(--paper);
  padding:22px 0;
  overflow:hidden;
}
.promises::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0 40px,
    rgba(241,232,211,.04) 40px 41px
  );
  pointer-events:none;
}
.promises-inner{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  align-items:center;
  justify-content:center;
}
.promise{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px;
  font-weight:600;
  color:var(--paper);
  padding:6px 12px;
  border:1px solid rgba(241,232,211,.25);
  border-radius:999px;
  white-space:nowrap;
  transform:rotate(var(--r, 0deg));
}
.promise svg{width:14px;height:14px; color:var(--amber)}
@media (max-width:640px){
  .promise:nth-child(n+5){display:none}
}

/* ============================================================
   SECTION base
   ============================================================ */
.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(46px, 6.5vw, 88px);
  line-height:.95;
  font-weight:400;
  letter-spacing:-.005em;
}
.section-title .sm{
  display:block;
  font-family:var(--ff-body);
  font-size:clamp(12px,1vw,13px);
  font-weight:700;
  letter-spacing:.24em;
  color:var(--paprika);
  margin-bottom:14px;
  text-transform:uppercase;
}
.section-note{
  max-width:44ch;
  font-size:15px;
  color:var(--ink-3);
  line-height:1.85;
}

/* ============================================================
   PRODUCTS — hanging tags
   ============================================================ */
.products{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(212,190,148,.35), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(212,190,148,.28), transparent 55%),
    var(--paper);
}
.products-rail{
  position:relative;
  height:2px;
  background:var(--ink);
  margin-bottom:0;
}
.products-rail::before,
.products-rail::after{
  content:""; position:absolute; top:-4px;
  width:10px; height:10px; border-radius:50%;
  background:var(--ink);
}
.products-rail::before{inset-inline-start:24px}
.products-rail::after{inset-inline-end:24px}

.tags-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(18px, 2.4vw, 32px);
  padding-top:0;
}
@media (max-width:1000px){.tags-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.tags-grid{grid-template-columns:repeat(2,1fr); gap:20px 14px}}

.tag{
  position:relative;
  padding-top:var(--string, 44px);
  display:flex;
  flex-direction:column;
  transform:rotate(var(--rot, 0deg));
  transition:transform .5s cubic-bezier(.2,.9,.2,1.2);
}
.tag:hover{transform:rotate(0deg) translateY(-4px)}

.tag-string{
  position:absolute;
  top:0; inset-inline-start:50%;
  width:1px;
  height:var(--string, 44px);
  background:linear-gradient(to bottom, var(--ink-4) 0 60%, var(--ink-3));
  transform:translateX(-50%);
}
.tag-string::before{
  content:"";
  position:absolute;
  bottom:-3px; left:50%;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--ink);
  transform:translateX(-50%);
}

.tag-body{
  position:relative;
  background:var(--paper-3);
  border:1px solid rgba(30,22,16,.14);
  border-radius:var(--r-3);
  padding:22px 20px 18px;
  box-shadow:var(--sh-tag);
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:box-shadow .35s ease, border-color .35s ease;
}
.tag:hover .tag-body{
  box-shadow:var(--sh-tag-h);
  border-color:rgba(166,55,35,.4);
}
/* punch hole */
.tag-body::before{
  content:"";
  position:absolute;
  top:11px; inset-inline-start:50%;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--paper);
  box-shadow:inset 0 1px 2px rgba(30,22,16,.28);
  transform:translateX(-50%);
}
/* tear-notch on the bottom edge */
.tag-body::after{
  content:"";
  position:absolute;
  inset-inline:18px;
  bottom:-1px;
  height:6px;
  background:
    radial-gradient(circle at 3px -2px, transparent 4px, var(--paper-3) 4.5px) 0 0/8px 6px repeat-x;
  pointer-events:none;
}

.tag-kicker{
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  color:var(--paprika);
  text-align:center;
  margin-top:8px;
}
.tag-title{
  font-family:var(--ff-display);
  font-size:clamp(22px,2vw,28px);
  line-height:1.05;
  font-weight:400;
  text-align:center;
  color:var(--ink);
}
.tag-desc{
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-3);
  text-align:center;
  min-height:2.6em;
}
.tag-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:12px;
  border-top:1px dashed rgba(30,22,16,.22);
  margin-top:auto;
}
.tag-price{
  font-weight:800;
  font-size:15px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.tag-price small{
  font-size:10px;
  font-weight:600;
  color:var(--ink-3);
  display:block;
  letter-spacing:.06em;
}
.tag-order{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  transition:transform .25s ease, background .25s ease;
  flex:none;
}
.tag-order:hover{background:var(--paprika); transform:rotate(-90deg)}
.tag-order svg{width:14px;height:14px}

.tag[data-stock="low"] .tag-kicker{color:var(--amber)}
.tag[data-stock="low"] .tag-kicker::after{content:" · کم"}

/* kraft paper texture on tag */
.tag-body{
  background-image:
    radial-gradient(circle at 30% 20%, rgba(169,139,92,.14), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(169,139,92,.12), transparent 45%),
    linear-gradient(180deg, var(--paper-3), var(--paper-2));
}

/* ============================================================
   PROCESS — ribbon timeline
   ============================================================ */
.process{
  background:var(--paper-2);
  position:relative;
  overflow:hidden;
}
.process::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 8% 20%, rgba(166,55,35,.06), transparent 40%),
    radial-gradient(circle at 92% 80%, rgba(197,138,46,.06), transparent 40%);
  pointer-events:none;
}

.process-list{
  position:relative;
  display:grid;
  gap:clamp(36px, 5vw, 72px);
  max-width:920px;
  margin-inline:auto;
}
.process-list::before{
  content:"";
  position:absolute;
  inset-block:8px;
  inset-inline-start:52px;
  width:6px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='44' viewBox='0 0 6 44'><path d='M3 0 Q7 11 3 22 Q-1 33 3 44' fill='none' stroke='%23A63723' stroke-width='2.2' stroke-linecap='round'/></svg>");
  background-repeat:repeat-y;
  background-size:6px 44px;
  opacity:.85;
}
@media (max-width:640px){
  .process-list::before{inset-inline-start:30px}
}

.step{
  position:relative;
  padding-inline-start:110px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
@media (max-width:640px){
  .step{padding-inline-start:70px}
}
.step-num{
  position:absolute;
  inset-inline-start:22px;
  top:0;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--paper-3);
  border:2px solid var(--ink);
  display:grid; place-items:center;
  font-family:var(--ff-display);
  font-size:26px;
  color:var(--ink);
  transform:rotate(-4deg);
  box-shadow:0 3px 0 var(--ink), 0 8px 0 -3px rgba(30,22,16,.15);
  z-index:1;
}
@media (max-width:640px){
  .step-num{inset-inline-start:0; width:52px;height:52px; font-size:22px}
}
.step h3{
  font-family:var(--ff-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:400;
  color:var(--ink);
  line-height:1.1;
}
.step p{
  font-size:15px;
  color:var(--ink-3);
  line-height:1.85;
  max-width:60ch;
}
.step-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--paprika);
  text-transform:uppercase;
  margin-top:4px;
}

/* ============================================================
   STORY — editorial
   ============================================================ */
.story{
  background:var(--paper);
  position:relative;
}
.story-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr; gap:40px}
}
.story-body p + p{margin-top:16px}
.story-body .lede{margin-top:22px}

.pull{
  margin-top:32px;
  padding-inline-start:24px;
  border-inline-start:3px solid var(--paprika);
  font-family:var(--ff-display);
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.35;
  color:var(--ink);
  font-weight:400;
}
.pull small{
  display:block;
  font-family:var(--ff-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--paprika);
  margin-top:14px;
  text-transform:uppercase;
}

.story-visual{
  position:relative;
  aspect-ratio:4/5;
  background:var(--paper-3);
  border:1px solid rgba(30,22,16,.14);
  border-radius:var(--r-3);
  overflow:hidden;
  box-shadow:var(--sh-tag);
}
.story-visual svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.story-seal{
  position:absolute;
  inset-inline-end:-24px;
  top:-24px;
  width:110px; height:110px;
  z-index:2;
  filter:drop-shadow(0 6px 10px rgba(30,22,16,.25));
  transform:rotate(-8deg);
}

/* ============================================================
   NOTES — testimonials pinned on kraft
   ============================================================ */
.notes{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.notes::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    -12deg,
    transparent 0 120px,
    rgba(241,232,211,.03) 120px 121px
  );
  pointer-events:none;
}
.notes .section-title{color:var(--paper)}
.notes .section-title .sm{color:var(--amber)}
.notes .section-note{color:rgba(241,232,211,.72)}

.notes-board{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px,2.6vw,32px);
}
@media (max-width:900px){.notes-board{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.notes-board{grid-template-columns:1fr}}

.note{
  position:relative;
  background:#E8DEC4;
  color:var(--ink);
  padding:26px 22px 22px;
  border-radius:var(--r-2);
  transform:rotate(var(--rot, 0deg));
  box-shadow:
    0 1px 0 rgba(0,0,0,.08),
    0 20px 30px -22px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(30,22,16,.08);
  transition:transform .4s cubic-bezier(.2,.9,.2,1.2);
  font-family:var(--ff-body);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(169,139,92,.18), transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(169,139,92,.12), transparent 50%);
}
.note:hover{transform:rotate(0) translateY(-3px)}
.note::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,.25), 0 2px 4px rgba(0,0,0,.4);
}
.note::after{
  content:"";
  position:absolute;
  top:-2px; inset-inline-start:50%;
  transform:translateX(-50%);
  width:44px;height:14px;
  background:rgba(255,255,255,.28);
  border-radius:2px;
  transform:translateX(-50%) rotate(-3deg);
}
.note-text{
  font-size:15px;
  line-height:1.85;
  color:var(--ink-2);
}
.note-text::before{content:"«"; color:var(--paprika); font-family:var(--ff-display); font-size:22px; line-height:0; vertical-align:-6px; margin-inline-end:2px}
.note-text::after{content:"»"; color:var(--paprika); font-family:var(--ff-display); font-size:22px; line-height:0; vertical-align:-6px; margin-inline-start:2px}
.note-author{
  display:flex; align-items:center; gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed rgba(30,22,16,.25);
  font-size:13px;
  font-weight:700;
  color:var(--ink);
}
.note-author span{
  width:26px;height:26px;border-radius:50%;
  background:var(--paprika); color:var(--paper);
  display:grid;place-items:center;
  font-family:var(--ff-display);
  font-size:13px;
  font-weight:400;
}
.note-author small{
  display:block;
  font-size:11px;
  font-weight:500;
  color:var(--ink-3);
  letter-spacing:.04em;
}

/* ============================================================
   ORDER — kraft form
   ============================================================ */
.order{
  background:var(--paper);
  position:relative;
}
.order-inner{
  position:relative;
  background:var(--paper-3);
  border:1px solid rgba(30,22,16,.14);
  border-radius:var(--r-4);
  padding:clamp(28px,4.5vw,64px);
  box-shadow:var(--sh-tag);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(169,139,92,.14), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(169,139,92,.1), transparent 45%);
  overflow:hidden;
}
.order-inner::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;
}
.order-inner::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;
}

.order-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
@media (max-width:820px){.order-grid{grid-template-columns:1fr}}

.order-steps{
  list-style:none; padding:0; margin:0;
  display:grid; gap:14px;
}
.order-steps li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  padding:14px 0;
  border-bottom:1px dashed rgba(30,22,16,.2);
}
.order-steps li:last-child{border-bottom:0}
.order-steps b{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  font-family:var(--ff-display);
  font-weight:400;
  font-size:15px;
  flex:none;
}
.order-steps span{
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-2);
}
.order-steps span i{
  display:block;
  font-style:normal;
  font-size:12px;
  color:var(--ink-3);
  margin-top:3px;
}

.order-card{
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--r-3);
  padding:28px;
  position:relative;
  overflow:hidden;
}
.order-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle at 80% -10%, rgba(166,55,35,.35), transparent 50%);
  pointer-events:none;
}
.order-card h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:32px;
  line-height:1.1;
  margin-bottom:14px;
  position:relative;
}
.order-card p{
  font-size:14px;
  color:rgba(241,232,211,.78);
  line-height:1.8;
  position:relative;
}
.order-contact{
  display:grid; gap:12px;
  margin-top:22px;
  position:relative;
}
.contact-line{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:rgba(241,232,211,.06);
  border:1px solid rgba(241,232,211,.14);
  border-radius:var(--r-2);
  transition:background .2s ease, border-color .2s ease;
}
.contact-line:hover{background:rgba(241,232,211,.12); border-color:rgba(241,232,211,.28)}
.contact-line svg{width:16px; height:16px; color:var(--amber-2); flex:none}
.contact-line span{
  font-size:14px;
  font-weight:600;
  color:var(--paper);
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.contact-line small{
  display:block;
  font-size:11px;
  font-weight:500;
  color:rgba(241,232,211,.55);
  margin-top:2px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.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 animation
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  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}

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