/* =================================================================
   JAY VIJAYBHAI SANGHANI — "The Work Order"
   Carbon-copy stationery. Flat colour only, no gradients anywhere
   except the dot pattern used for slip perforations.
   ================================================================= */

:root{
  --paper:#F4F5F1;
  --paper-2:#FBFBF8;
  --ink:#232D4F;
  --ink-70:#5a628010;      /* not used for text */
  --carbon:#4A55B5;
  --rule:#C9CCC3;
  --stamp:#C03B2D;

  --font-display:"Bricolage Grotesque","Arial Narrow",Helvetica,sans-serif;
  --font-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1180px;
  --gut:clamp(1.15rem,4vw,3rem);

  /* type scale — deliberate, 1.25 base ratio, display steps larger */
  --t-mono:0.72rem;
  --t-body:1.0625rem;
  --t-lede:clamp(1.05rem,1.6vw,1.3rem);
  --t-h3:clamp(1.15rem,2vw,1.45rem);
  --t-h2:clamp(1.9rem,4.6vw,3.1rem);
  --t-h1:clamp(2.6rem,8.2vw,6.1rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--carbon);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-.018em;margin:0}
address{font-style:normal}
hr{border:0;border-top:1px solid var(--rule);margin:0}

:focus-visible{outline:3px solid var(--carbon);outline-offset:3px;border-radius:1px}

.mono{
  font-family:var(--font-mono);
  font-size:var(--t-mono);
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:500;
}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- ledger bar ---------- */
.ledger-bar{border-bottom:1px solid var(--rule);background:var(--paper)}
.ledger-bar__in{display:flex;justify-content:space-between;align-items:center;gap:1rem;height:34px}
.ledger-bar__in a{color:var(--ink);text-decoration:none}
.ledger-bar__in a:hover{color:var(--carbon)}
.ledger-bar__mid{opacity:.75}
@media(max-width:640px){.ledger-bar__mid{display:none}}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--ink);position:sticky;top:0;z-index:40;background:var(--paper)}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.letterhead{text-decoration:none;color:var(--ink);display:block;padding:.55rem 0}
.letterhead__name{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1rem,2.3vw,1.28rem);letter-spacing:.01em;line-height:1;
}
.letterhead__sub{display:block;margin-top:.3rem;opacity:.72}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.nav ul{display:flex;gap:clamp(1rem,2.4vw,2rem)}
.nav ul a{
  color:var(--ink);text-decoration:none;font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem 0;display:block;border-bottom:2px solid transparent;
}
.nav ul a:hover{color:var(--carbon);border-bottom-color:var(--rule)}
.nav ul a.is-current{color:var(--carbon);border-bottom-color:var(--carbon)}

.navtoggle{display:none;background:none;border:1px solid var(--ink);width:44px;height:38px;padding:9px 10px;cursor:pointer}
.navtoggle span{display:block;height:2px;background:var(--ink);margin-bottom:4px}
.navtoggle span:last-child{margin-bottom:0;width:70%}

@media(max-width:860px){
  .navtoggle{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:1px solid var(--ink);flex-direction:column;align-items:stretch;
    gap:0;padding:0 var(--gut) 1.3rem;display:none;
  }
  .nav.is-open{display:flex}
  .nav ul{flex-direction:column;gap:0}
  .nav li{border-bottom:1px solid var(--rule)}
  .nav ul a{padding:.95rem 0;border-bottom:0;font-size:.86rem}
  .nav .btn{margin-top:1.2rem;text-align:center}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:.95rem 1.5rem;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.btn:hover{background:var(--carbon);border-color:var(--carbon);color:#fff}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--sm{padding:.62rem 1rem;font-size:.72rem}
.btn--wide{width:100%;text-align:center;padding:1.1rem 1.5rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- section furniture ---------- */
.sec{border-top:1px solid var(--rule);padding-block:clamp(3.4rem,7vw,6rem)}
.sec--tight{padding-block:clamp(2.4rem,4vw,3.4rem)}
.sec--ink{background:var(--ink);color:var(--paper);border-top-color:var(--ink)}
.sec--ink a{color:#fff}

.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;margin-bottom:2.2rem}
.sechead__label{display:flex;align-items:center;gap:.75rem}
.sechead__label::after{content:"";display:block;width:clamp(40px,10vw,120px);height:1px;background:var(--rule)}
.sechead h2{font-size:var(--t-h2);max-width:20ch}
.sechead p{max-width:46ch;margin:0;font-size:var(--t-lede);opacity:.9}

/* ---------- hero (the work order head) ---------- */
.hero{padding-block:clamp(2.8rem,6vw,5.2rem) clamp(2.6rem,5vw,4.4rem);position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(140px,190px) 1fr;gap:clamp(1.4rem,3vw,3rem)}
.hero__fields{border-right:1px solid var(--rule);padding-right:clamp(1rem,2vw,2rem)}
.hero__field{padding:.7rem 0;border-bottom:1px solid var(--rule)}
.hero__field:first-child{padding-top:0}
.hero__field dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;opacity:.6}
.hero__field dd{margin:.3rem 0 0;font-family:var(--font-mono);font-size:.78rem;line-height:1.45}
.hero__body{min-width:0}
.hero h1{font-size:var(--t-h1);letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--carbon)}
.hero__rule{height:1px;background:var(--ink);margin:clamp(1.6rem,3vw,2.4rem) 0 1.5rem;transform-origin:left}
.hero__sub{font-size:var(--t-lede);max-width:52ch;margin-bottom:2rem}
.hero__acts{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero__meta{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;opacity:.72}
@media(max-width:720px){
  .hero__grid{grid-template-columns:1fr}
  .hero__fields{border-right:0;border-bottom:1px solid var(--rule);padding-right:0;padding-bottom:.6rem;
    display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem}
  .hero h1{max-width:none}
}

/* ---------- process (3 stages) ---------- */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.stages__item{padding:clamp(1.4rem,2.6vw,2.2rem);border-right:1px solid var(--rule)}
.stages__item:last-child{border-right:0}
.stages__no{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--carbon);display:block;margin-bottom:1rem}
.stages__item h3{font-size:var(--t-h3);margin-bottom:.6rem}
.stages__item p{margin:0;font-size:.97rem}
@media(max-width:760px){
  .stages{grid-template-columns:1fr}
  .stages__item{border-right:0;border-bottom:1px solid var(--rule)}
  .stages__item:last-child{border-bottom:0}
}

/* ---------- job cards ---------- */
.jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(295px,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.job{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(1.3rem,2.4vw,1.9rem);display:flex;flex-direction:column;
  background:var(--paper);position:relative;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.job::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .18s ease}
.job:hover,.job:focus-within{transform:translateY(-4px);box-shadow:0 10px 0 -6px rgba(35,45,79,.16);background:var(--paper-2);z-index:2}
.job:hover::before,.job:focus-within::before{background:var(--carbon)}
.job__code{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:1rem;padding-bottom:.85rem;
  border-bottom:1px solid var(--rule);margin-bottom:1.1rem;color:var(--ink);
  transition:color .18s ease;
}
.job:hover .job__code,.job:focus-within .job__code{color:var(--carbon)}
.job__code b{font-weight:700}
.job__code span{opacity:.55}
.job h3{font-size:var(--t-h3);margin-bottom:.55rem}
.job__lede{font-size:.97rem;margin-bottom:1.1rem}
.job__list{margin:0 0 1.2rem;font-size:.92rem}
.job__list li{padding-left:1.15rem;position:relative;margin-bottom:.4rem;line-height:1.45}
.job__list li::before{content:"—";position:absolute;left:0;color:var(--carbon);font-family:var(--font-mono);font-size:.8rem}
.job__meta{margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.job__time{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.job__cta{font-family:var(--font-mono);font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}
.job__cta:hover{border-bottom-color:var(--carbon)}
.job__who{font-size:.88rem;opacity:.78;margin:0 0 1rem}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule)}
.trust__item{padding:clamp(1.1rem,2vw,1.6rem);border-right:1px solid var(--rule)}
.trust__item:last-child{border-right:0}
.trust__item strong{display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:800;line-height:1.1}
.trust__item span{display:block;margin-top:.35rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.66}
@media(max-width:820px){.trust{grid-template-columns:1fr 1fr}
  .trust__item{border-bottom:1px solid var(--rule)}
  .trust__item:nth-child(2n){border-right:0}
  .trust__item:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:420px){.trust{grid-template-columns:1fr}
  .trust__item{border-right:0}
  .trust__item:last-child{border-bottom:0}}

/* ---------- work ledger ---------- */
.ledger{border-top:1px solid var(--ink)}
.ledger__row{
  display:grid;grid-template-columns:110px 1fr 1.1fr 130px;gap:clamp(.8rem,2vw,2rem);
  align-items:baseline;padding:clamp(1.1rem,2.2vw,1.7rem) 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink);transition:background .16s ease,padding-left .16s ease;
}
a.ledger__row:hover{background:var(--paper-2);padding-left:.7rem}
a.ledger__row:hover .ledger__title{color:var(--carbon)}
.ledger__ref{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.09em;opacity:.6}
.ledger__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.2}
.ledger__client{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;opacity:.6;margin-top:.4rem}
.ledger__job{font-size:.93rem;opacity:.85}
.ledger__year{font-family:var(--font-mono);font-size:.72rem;text-align:right;opacity:.65}
@media(max-width:760px){
  .ledger__row{grid-template-columns:1fr auto;gap:.4rem 1rem}
  .ledger__ref{order:1}.ledger__year{order:2;text-align:right}
  .ledger__title{order:3;grid-column:1/-1}.ledger__job{order:4;grid-column:1/-1}
}

/* case study blocks */
.case{border-top:1px solid var(--ink);padding-block:clamp(2.2rem,4vw,3.4rem)}
.case__grid{display:grid;grid-template-columns:210px 1fr;gap:clamp(1.2rem,3vw,3rem)}
.case__side dl{margin:0}
.case__side dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;opacity:.6;margin-top:1rem}
.case__side dt:first-child{margin-top:0}
.case__side dd{margin:.25rem 0 0;font-size:.94rem}
.case h3{font-size:clamp(1.4rem,3vw,2.05rem);margin-bottom:1rem;max-width:20ch}
.case__q{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--carbon);margin:1.6rem 0 .4rem}
.case__res{border-top:1px solid var(--rule);margin-top:1.6rem;padding-top:1.1rem}
.case__res li{padding-left:1.6rem;position:relative;margin-bottom:.45rem}
.case__res li::before{content:"✓";position:absolute;left:0;color:var(--carbon);font-family:var(--font-mono);font-size:.85rem}
@media(max-width:720px){.case__grid{grid-template-columns:1fr}
  .case__side dl{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem}
  .case__side dt:nth-child(3){margin-top:1rem}}

/* ---------- prose ---------- */
.prose{max-width:64ch}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.4rem 0 .9rem}
.prose h3{font-size:var(--t-h3);margin:1.9rem 0 .5rem}
.prose p{margin-bottom:1.1em}
.prose ul{margin:0 0 1.4em}
.prose ul li{padding-left:1.4rem;position:relative;margin-bottom:.5rem}
.prose ul li::before{content:"—";position:absolute;left:0;color:var(--carbon);font-family:var(--font-mono);font-size:.8rem}
.lead{font-size:var(--t-lede);}

/* ---------- page head ---------- */
.pagehead{padding-block:clamp(2.4rem,5vw,4rem) clamp(1.8rem,3.5vw,2.8rem)}
.pagehead__meta{display:flex;gap:1.4rem;flex-wrap:wrap;opacity:.65;margin-bottom:1.4rem}
.pagehead h1{font-size:clamp(2.2rem,6.2vw,4.4rem);letter-spacing:-.028em;max-width:16ch}
.pagehead p{font-size:var(--t-lede);max-width:56ch;margin-top:1.2rem}

/* ---------- CTA band ---------- */
.band{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,6vw,4.8rem)}
.band__in{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.band h2{font-size:clamp(1.8rem,4.4vw,3rem);max-width:18ch}
.band p{margin:1rem 0 0;max-width:44ch;opacity:.85}
.band .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.band .btn:hover{background:var(--carbon);border-color:var(--carbon);color:#fff}
.band .mono{opacity:.6}
@media(max-width:760px){.band__in{grid-template-columns:1fr}}

/* =================================================================
   ESTIMATE SLIP — the signature element
   ================================================================= */
.slipwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
@media(max-width:940px){.slipwrap{grid-template-columns:1fr}}

.fieldset{border:0;padding:0;margin:0 0 2.2rem}
.fieldset__legend{
  display:block;width:100%;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;padding-bottom:.6rem;border-bottom:1px solid var(--ink);margin-bottom:1.1rem;
}
.fieldset__legend span{color:var(--carbon);margin-right:.55rem}

.picks{display:grid;grid-template-columns:1fr 1fr;gap:0;border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
@media(max-width:560px){.picks{grid-template-columns:1fr}}
.pick{position:relative;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick label{display:block;padding:.9rem 1rem .9rem 2.7rem;cursor:pointer;transition:background .15s ease}
.pick label::before{
  content:"";position:absolute;left:1rem;top:1.05rem;width:15px;height:15px;
  border:1px solid var(--ink);background:var(--paper);
}
.pick label::after{
  content:"×";position:absolute;left:1rem;top:1.05rem;width:15px;height:15px;
  font-family:var(--font-mono);font-size:1rem;line-height:13px;text-align:center;
  color:var(--carbon);opacity:0;transform:scale(.4);transition:opacity .13s ease,transform .13s ease;
}
.pick label:hover{background:var(--paper-2)}
.pick input:checked + label{background:var(--paper-2)}
.pick input:checked + label::after{opacity:1;transform:scale(1)}
.pick input:focus-visible + label{outline:3px solid var(--carbon);outline-offset:-3px}
.pick__code{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;opacity:.55;margin-bottom:.15rem}
.pick input:checked + label .pick__code{color:var(--carbon);opacity:1}
.pick__name{display:block;font-weight:600;font-size:.97rem;line-height:1.25}

.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip label{
  display:block;border:1px solid var(--rule);padding:.6rem .95rem;cursor:pointer;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.chip label:hover{border-color:var(--ink)}
.chip input:checked + label{border-color:var(--carbon);color:var(--carbon);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--carbon)}
.chip input:focus-visible + label{outline:3px solid var(--carbon);outline-offset:2px}

.field{margin-bottom:1.2rem}
.field label{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem;opacity:.75}
.field .req{color:var(--stamp)}
.input,textarea.input{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:0;
  padding:.8rem .9rem;transition:border-color .15s ease;
}
.input:focus{border-color:var(--carbon);outline:none;box-shadow:inset 0 0 0 1px var(--carbon)}
textarea.input{min-height:120px;resize:vertical}
.field--half{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:560px){.field--half{grid-template-columns:1fr}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.err{color:var(--stamp);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.4rem;display:block}
.input.has-err{border-color:var(--stamp);box-shadow:inset 0 0 0 1px var(--stamp)}
.errbox{border:1px solid var(--stamp);padding:1rem 1.2rem;margin-bottom:2rem;background:var(--paper-2)}
.errbox p{margin:0 0 .5rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stamp)}
.errbox li{font-size:.94rem;padding-left:1.1rem;position:relative}
.errbox li::before{content:"!";position:absolute;left:0;color:var(--stamp);font-family:var(--font-mono)}

/* --- the slip itself --- */
.slipcol{position:sticky;top:96px}
@media(max-width:940px){.slipcol{position:static}}

.slip{
  background:var(--paper-2);
  border:1px solid var(--ink);
  font-family:var(--font-mono);
  font-size:.76rem;
  line-height:1.6;
  position:relative;
  box-shadow:5px 5px 0 -1px rgba(35,45,79,.13);
}
.slip__top{padding:1.1rem 1.2rem;border-bottom:1px solid var(--ink)}
.slip__firm{font-size:.86rem;font-weight:700;letter-spacing:.04em;line-height:1.25}
.slip__addr{font-size:.64rem;letter-spacing:.04em;opacity:.72;margin-top:.4rem;line-height:1.5}
.slip__doc{
  display:flex;justify-content:space-between;gap:1rem;padding:.55rem 1.2rem;
  border-bottom:1px dashed var(--rule);font-size:.66rem;letter-spacing:.08em;
}
.slip__doc b{color:var(--carbon);font-weight:700}
.slip__body{padding:1rem 1.2rem;min-height:180px}
.slip__head{display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.11em;opacity:.55;border-bottom:1px solid var(--rule);padding-bottom:.4rem;margin-bottom:.7rem}
.slip__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;padding:.28rem 0}
.slip__line-code{color:var(--carbon);flex:0 0 auto;font-weight:700;font-size:.68rem}
.slip__line-name{flex:0 1 auto;min-width:0;font-size:.72rem;overflow-wrap:anywhere}
.slip__dots{flex:1 1 14px;min-width:14px;border-bottom:1px dotted var(--rule);transform:translateY(-3px)}
.slip__line-time{flex:0 0 auto;margin-left:auto;font-size:.66rem;opacity:.7;white-space:nowrap}
.slip__empty{opacity:.45;font-size:.7rem;letter-spacing:.06em;padding:1.4rem 0;text-align:center}
.slip__rows{border-top:1px solid var(--rule);margin-top:.9rem;padding-top:.7rem}
.slip__row{display:flex;justify-content:space-between;gap:1rem;font-size:.68rem;letter-spacing:.06em;padding:.2rem 0}
.slip__row span:first-child{opacity:.55}
.slip__row span:last-child{text-align:right;font-weight:500}
.slip__total{border-top:1px solid var(--ink);margin-top:.8rem;padding-top:.6rem;display:flex;justify-content:space-between;font-weight:700;font-size:.72rem;letter-spacing:.08em}
.slip__foot{padding:.8rem 1.2rem 1.5rem;font-size:.6rem;letter-spacing:.07em;opacity:.6;text-align:center;line-height:1.7}

/* perforated edge — dot punch pattern (not a colour gradient) */
.slip__perf{
  height:14px;
  background-image:radial-gradient(circle at 7px 7px, var(--paper) 4.5px, transparent 5px);
  background-size:14px 14px;
  background-position:0 7px;
  border-top:1px dashed var(--rule);
  margin-top:.2rem;
}
.slip-live{position:absolute;left:-9999px}

/* line insert animation — only a newly ticked line animates in */
@keyframes slipIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.slip__line.is-new{animation:slipIn .2s ease both}

/* ---------- contact detail cards ---------- */
.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.detail{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(1.2rem,2.4vw,1.7rem)}
.detail__label{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;opacity:.6;margin-bottom:.7rem}
.detail a{font-family:var(--font-mono);font-size:.86rem;letter-spacing:.02em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);word-break:break-word}
.detail a:hover{color:var(--carbon);border-bottom-color:var(--carbon)}
.detail p{margin:0;font-size:.94rem}

.mapframe{border:1px solid var(--ink);line-height:0;background:var(--paper-2)}
.mapframe iframe{width:100%;height:clamp(280px,44vw,430px);border:0;display:block;filter:grayscale(1) contrast(1.06)}
.mapframe iframe:hover{filter:none}

/* ---------- thank-you / RECEIVED stamp ---------- */
.receipt{max-width:640px;margin-inline:auto;text-align:center;padding-block:clamp(3rem,8vw,6rem);position:relative}
.receipt h1{font-size:clamp(2.2rem,6vw,3.8rem);margin-bottom:1.1rem}
.receipt .lead{margin-bottom:2rem}
.receipt__slipno{display:inline-block;border:1px solid var(--rule);padding:.7rem 1.2rem;margin-bottom:2rem}

.received{
  display:inline-block;border:3px double var(--stamp);color:var(--stamp);
  font-family:var(--font-mono);font-weight:700;font-size:clamp(1.1rem,3.4vw,1.7rem);
  letter-spacing:.22em;padding:.55rem 1.4rem .5rem;margin-bottom:2rem;
  transform:rotate(-7deg);opacity:.88;
}
.received small{display:block;font-size:.5em;letter-spacing:.14em;opacity:.8;margin-top:.25rem;font-weight:400}
@media(prefers-reduced-motion:no-preference){
  .received{animation:stampDown .55s cubic-bezier(.2,1.5,.4,1) .25s both}
  @keyframes stampDown{
    0%{opacity:0;transform:rotate(-7deg) scale(2.4)}
    60%{opacity:.95;transform:rotate(-7deg) scale(.94)}
    100%{opacity:.88;transform:rotate(-7deg) scale(1)}
  }
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--ink);padding-block:clamp(2.6rem,5vw,4rem) 1.6rem;margin-top:0}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(1.6rem,3vw,3rem)}
@media(max-width:980px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__block{min-width:0}
.foot__label{margin:0 0 .8rem;opacity:.55;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.foot__name{font-family:var(--font-display);font-weight:800;font-size:1.2rem;line-height:1.2;margin:0 0 .3rem}
.foot__note{font-size:.9rem;opacity:.8;margin:0}
.foot address{font-size:.93rem;line-height:1.7}
.foot__list li{margin-bottom:.45rem;font-size:.93rem;overflow-wrap:anywhere}
.foot__list a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.foot__list.mono{text-transform:none;letter-spacing:.02em;font-size:.8rem}
.foot__list a:hover{color:var(--carbon);border-bottom-color:var(--carbon)}
.foot__base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:clamp(2rem,4vw,3rem);padding-top:1.2rem;opacity:.6}
.foot__base p{margin:0}

/* the one and only footer stamp */
.stampblock{display:flex;align-items:center;gap:1rem;margin-top:1.6rem}
.stamp{
  flex:none;width:82px;height:82px;border-radius:50%;
  border:2px solid var(--stamp);color:var(--stamp);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-mono);text-align:center;line-height:1.15;
  transform:rotate(-11deg);opacity:.82;
  box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--stamp);
}
.stamp__t1{font-size:.44rem;letter-spacing:.16em}
.stamp__t2{font-size:.86rem;font-weight:700;letter-spacing:.08em;margin:.12rem 0}
.stamp__t3{font-size:.44rem;letter-spacing:.16em;text-transform:uppercase}
.stampblock__gstin{font-size:.72rem;letter-spacing:.06em;line-height:1.5}

/* ---------- load-in motion (one orchestrated moment) ---------- */
@media(prefers-reduced-motion:no-preference){
  .draw{transform:scaleX(0);animation:drawRule .7s cubic-bezier(.22,.8,.3,1) forwards}
  @keyframes drawRule{to{transform:scaleX(1)}}
  .rise{opacity:0;animation:riseUp .62s cubic-bezier(.22,.8,.3,1) forwards}
  @keyframes riseUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.24s}
  .d4{animation-delay:.34s}.d5{animation-delay:.44s}.d6{animation-delay:.54s}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .draw{transform:none}.rise{opacity:1}
}

/* ---------- print ---------- */
@media print{
  .masthead,.ledger-bar,.nav,.band,.navtoggle,.btn{display:none!important}
  body{background:#fff}
  .slip{box-shadow:none;page-break-inside:avoid}
}