/* ============================================================
   Taimoor Ali — Shopify Operations & Automation
   Design system. Ink & Paper, editorial, systems-precision.
   ============================================================ */

:root{
  /* color */
  --ink:#111111;
  --ink-soft:#303030;
  --muted:#666666;
  --faint:#9a9a9a;
  --paper:#f7f7f7;
  --paper-2:#eeeeee;
  --surface:#ffffff;
  --line:#dddddd;
  --line-2:#c9c9c9;
  --accent:#111111;       /* near-black — primary accent (labels, links, buttons) */
  --accent-ink:#000000;   /* black — emphasis / hover */
  --accent-soft:#1111110d;/* light-grey tint — soft fills */
  --accent-line:#11111129;/* grey hairline — accent borders */
  --dark:#111111;         /* dark bands */
  --dark-text:#f5f5f5;
  --dark-muted:#b8b8b8;

  /* type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  /* scale */
  --maxw:1180px;
  --gutter:clamp(20px,5vw,48px);
  --section-y:clamp(72px,11vh,140px);
  --radius:5px;

  --shadow:0 1px 2px rgba(17,17,17,.04),0 12px 28px -18px rgba(17,17,17,.22);
}

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

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(48px,7vh,84px)}
.section--dark{background:var(--dark);color:var(--dark-text)}
.section--surface{background:var(--surface)}
.section--paper2{background:var(--paper-2)}
.divider{height:1px;background:var(--line);border:0;max-width:var(--maxw);margin-inline:auto}

.measure{max-width:46rem}
.measure-sm{max-width:36rem}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.012em;color:var(--ink)}
.h1{font-size:clamp(2.4rem,5.4vw,4.05rem);font-weight:500}
.h2{font-size:clamp(1.85rem,3.6vw,2.85rem)}
.h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.lead{font-size:clamp(1.06rem,1.5vw,1.27rem);color:var(--ink-soft);line-height:1.55}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
em,.it{font-style:italic}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent-line)}
.section--dark .eyebrow{color:#bdbab0}
.section--dark .eyebrow::before{background:#bdbab055}

.kicker{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:.96rem;
  padding:.85em 1.5em;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease;
  line-height:1;white-space:nowrap;
}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-ink);box-shadow:0 10px 22px -12px rgba(17,17,17,.5)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn--ondark{background:#fff;color:var(--dark)}
.btn--ondark:hover{background:var(--dark-text);transform:translateY(-1px)}
.btn--lg{padding:1.02em 1.8em;font-size:1.02rem}
.textlink{
  font-family:var(--sans);font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:.4em;font-size:.97rem;
}
.textlink .arw{transition:transform .18s ease}
.textlink:hover .arw{transform:translateX(3px)}
.section--dark .textlink{color:#e6e3d9}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,background .2s ease;
}
.site-header.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--paper) 94%,transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1.5rem}
.brand{font-family:var(--serif);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.55em}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.95rem;font-weight:500;color:var(--ink-soft);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:1.1rem}

/* dropdown */
.has-drop{position:relative}
.drop-toggle{display:inline-flex;align-items:center;gap:.35em;cursor:pointer;background:none;border:0;font:inherit;font-size:.95rem;font-weight:500;color:var(--ink-soft)}
.drop-toggle .chev{width:9px;transition:transform .2s}
.has-drop:hover .chev{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:14px;width:min(540px,92vw);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transition:.18s ease;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-group-label{grid-column:1/-1;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:8px 10px 4px}
.drop a{display:block;padding:9px 10px;border-radius:7px;font-size:.92rem;font-weight:500;color:var(--ink);transition:background .14s}
.drop a span{display:block;font-size:.78rem;font-weight:400;color:var(--muted);margin-top:1px}
.drop a:hover{background:var(--accent-soft)}

/* mobile menu */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.2s}
.mobile-menu{display:none}
@media (max-width:880px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
  .mobile-menu{
    display:block;position:fixed;inset:0;top:72px;z-index:55;
    background:var(--paper);padding:24px var(--gutter) 40px;
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.22s ease;overflow-y:auto;
  }
  .mobile-menu.open{transform:none;opacity:1;visibility:visible}
  .mobile-menu a{display:block;padding:13px 0;font-size:1.1rem;font-weight:500;border-bottom:1px solid var(--line)}
  .mobile-menu .mlabel{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-top:20px}
  .mobile-menu .btn{display:flex;justify-content:center;margin-top:26px;width:100%}
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(48px,7vh,90px);padding-bottom:clamp(56px,8vh,110px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{margin:.5rem 0 1.1rem}
.hero .lead{max-width:38rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero-trustline{margin-top:1.9rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--muted)}
.hero-trustline b{color:var(--accent);font-weight:500}
.hero-byline{display:flex;align-items:center;gap:.65rem;margin-bottom:1.25rem}
.hero-byline .hero-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2);flex:none}
.hero-byline span{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:2.2rem}.hero-visual{order:-1;max-width:440px}}

/* hero systems diagram */
.hero-visual{position:relative}
.sys-node{fill:var(--surface);stroke:var(--line-2)}
.sys-label{font-family:var(--mono);font-size:11px;fill:var(--ink-soft);letter-spacing:.02em}
.sys-core{fill:var(--accent)}
.sys-core-label{font-family:var(--mono);font-size:11px;fill:#fff;font-weight:500}
.sys-link{stroke:var(--accent);stroke-width:1.6;fill:none;opacity:.5;stroke-dasharray:5 5}
.sys-link.draw{stroke-dashoffset:160;animation:dash 1.4s ease forwards}
.sys-pulse{fill:var(--accent)}
@keyframes dash{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.sys-link.draw{animation:none;stroke-dashoffset:0}}

/* ---------- trust bar ---------- */
.trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-brands{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 2.2rem;padding-bottom:1.6rem}
.trust-brands .tlabel{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.trust-brands .bname{font-family:var(--serif);font-size:1.15rem;color:var(--ink-soft);opacity:.85}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-top:1.7rem;border-top:1px dashed var(--line-2)}
.stat .num{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:500;color:var(--accent);line-height:1}
.stat .lbl{font-size:.86rem;color:var(--muted);margin-top:.45rem;line-height:1.35}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}}

/* ---------- generic section heads ---------- */
.sec-head{max-width:48rem}
.sec-head .h2{margin:.7rem 0 0}
.sec-head .lead{margin-top:1rem}

/* problem list */
.symptom-list{list-style:none;display:grid;gap:.2rem;margin:1.6rem 0}
.symptom-list li{padding:.55rem 0 .55rem 1.7rem;position:relative;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.symptom-list li::before{content:"";position:absolute;left:0;top:1.15rem;width:7px;height:7px;border-radius:1px;background:var(--accent);transform:rotate(45deg)}
.emph{color:var(--ink);font-weight:500}

/* ---------- services ladder ---------- */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
.lad-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.7rem 1.6rem;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.lad-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.lad-card.feature{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line)}
.lad-num{font-family:var(--mono);font-size:.8rem;color:var(--accent);letter-spacing:.1em}
.lad-card h3{margin:.8rem 0 .6rem;font-size:1.28rem}
.lad-card p{font-size:.95rem;color:var(--muted);flex:1}
.lad-meta{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);margin:.9rem 0 1.1rem;letter-spacing:.02em}
@media (max-width:860px){.ladder{grid-template-columns:1fr}}

/* ---------- results cards ---------- */
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
.res-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.7rem 1.6rem;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.res-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.res-brand{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.res-card h3{font-size:1.32rem;margin:.7rem 0 .7rem}
.res-card p{font-size:.93rem;color:var(--muted);flex:1}
.res-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0}
.res-tags span{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);padding:.25em .6em;border-radius:3px}
@media (max-width:860px){.results-grid{grid-template-columns:1fr}}

/* ---------- differentiator ---------- */
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.2rem}
.diff-card{border:1px solid var(--line);border-radius:12px;padding:1.6rem;background:var(--surface)}
.diff-card.muted{opacity:.92}
.diff-card .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.diff-card p{margin-top:.6rem;color:var(--ink-soft)}
.diff-final{margin-top:1.4rem;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:12px;padding:1.7rem}
.diff-final .h3{color:var(--accent-ink)}
@media (max-width:760px){.diff-grid{grid-template-columns:1fr}}

/* ---------- testimonials ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2.4rem}
.quote-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.7rem}
.quote-card .qlead{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--accent-ink);margin-bottom:.7rem}
.quote-card blockquote{color:var(--ink-soft);font-size:.98rem}
.quote-card .who{margin-top:1.1rem;font-size:.85rem;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
@media (max-width:760px){.quote-grid{grid-template-columns:1fr}}

/* ---------- fit / for-not-for ---------- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.2rem}
.fit-card{border-radius:12px;padding:1.7rem;border:1px solid var(--line)}
.fit-card.yes{background:var(--accent-soft);border-color:var(--accent-line)}
.fit-card.no{background:var(--surface)}
.fit-card .ftag{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.fit-card.yes .ftag{color:var(--accent)}
.fit-card.no .ftag{color:var(--muted)}
.fit-card p{margin-top:.7rem;color:var(--ink-soft)}
@media (max-width:760px){.fit-grid{grid-template-columns:1fr}}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.4rem;counter-reset:step}
.step{position:relative;padding-top:1.4rem;border-top:2px solid var(--accent-line)}
.step .snum{font-family:var(--mono);font-size:.78rem;color:var(--accent);letter-spacing:.1em}
.step h4{font-family:var(--serif);font-size:1.18rem;font-weight:500;margin:.4rem 0 .4rem}
.step p{font-size:.9rem;color:var(--muted)}
.step.opt{border-top-color:var(--line-2)}
.step.opt .snum{color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:1fr 1fr;gap:1.6rem 1rem}}

/* ---------- CTA band ---------- */
.cta-band{text-align:center}
.cta-band .h2{margin-bottom:1rem;max-width:20ch;margin-inline:auto}
.cta-band .lead{color:var(--dark-muted);max-width:44ch;margin:0 auto 2rem}
.cta-micro{margin-top:1.3rem;font-family:var(--mono);font-size:.78rem;color:var(--dark-muted);letter-spacing:.02em}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:var(--dark-text);padding-block:clamp(48px,7vh,80px)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem}
.foot-brand .brand{color:#fff}
.foot-brand p{color:var(--dark-muted);font-size:.92rem;margin-top:.7rem;max-width:30ch}
.foot-col h5{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-muted);margin-bottom:1rem;font-weight:500}
.foot-col a{display:block;color:var(--dark-text);font-size:.93rem;padding:.32rem 0;opacity:.86;transition:opacity .15s}
.foot-col a:hover{opacity:1}
.foot-base{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid #2c2b22;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--dark-muted);font-family:var(--mono);letter-spacing:.02em}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:1.8rem}}

/* ============================================================
   Interior page primitives (service / case / about / book)
   ============================================================ */
.page-hero{padding-block:clamp(48px,8vh,96px) clamp(40px,6vh,72px)}
.breadcrumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted);margin-bottom:1.3rem;display:flex;gap:.5em;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--accent)}
.page-hero h1{margin:.4rem 0 1.1rem;max-width:18ch}
.page-hero .lead{max-width:42rem}

.colset{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:880px){.colset{grid-template-columns:1fr}}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:2.4rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:1rem;color:var(--ink-soft)}
.prose ul{list-style:none;margin:1rem 0 1.4rem}
.prose ul li{padding:.5rem 0 .5rem 1.6rem;position:relative;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:0;top:1.05rem;width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}

.sidecard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.5rem;position:sticky;top:96px}
.sidecard .profile{display:flex;align-items:center;gap:.9rem;padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--line)}
.sidecard .profile-img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2);flex:none}
.sidecard .profile-meta{display:flex;flex-direction:column;gap:.2rem}
.sidecard .profile-name{font-family:var(--serif);font-size:1.08rem;font-weight:600;color:var(--ink);line-height:1.1}
.sidecard .profile-role{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.sidecard h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:1rem}
.sidecard .sys-item{font-size:.9rem;color:var(--ink-soft);padding:.45rem 0;border-bottom:1px solid var(--line);display:flex;gap:.6em;align-items:baseline}
.sidecard .sys-item:last-of-type{border-bottom:0}
.sidecard .btn{width:100%;justify-content:center;margin-top:1.2rem}
.sidecard .proof-link{display:block;margin-top:1rem;font-size:.88rem}

/* FAQ accordion */
.faq{border-top:1px solid var(--line);margin-top:1rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.2rem 1.15rem 0;font-family:var(--serif);font-size:1.12rem;font-weight:500;position:relative;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:1rem;font-family:var(--sans);font-size:1.5rem;color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.3rem;color:var(--ink-soft);max-width:54rem}

/* case study */
.snapshot{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:2.2rem 0}
.snapshot .cell{background:var(--surface);padding:1.2rem 1.3rem}
.snapshot .ck{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.snapshot .cv{font-size:.95rem;color:var(--ink);font-weight:500}
@media (max-width:760px){.snapshot{grid-template-columns:1fr 1fr}}
.case-result{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;padding:1.6rem;margin:1.6rem 0}
.case-result .ck{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.case-result p{color:var(--accent-ink);font-size:1.05rem}

/* book / form */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:880px){.book-grid{grid-template-columns:1fr}}
.expect{list-style:none;margin:1.6rem 0}
.expect li{padding:.6rem 0 .6rem 1.8rem;position:relative;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.expect li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(1.4rem,3vw,2rem)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.95rem;padding:.75em .9em;
  border:1px solid var(--line-2);border-radius:7px;background:var(--paper);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{resize:vertical;min-height:96px}
.form-note{font-size:.8rem;color:var(--muted);margin-top:.4rem}
.form-msg{display:none;margin-top:1rem;padding:1rem;border-radius:8px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink);font-size:.92rem}
.form-msg.show{display:block}

/* misc */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.7em 1.2em;border-radius:0 0 6px 0;z-index:100}
.skip:focus{left:0}
.center{text-align:center}
.mt-sm{margin-top:1.4rem}
.related{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.related a{font-family:var(--mono);font-size:.8rem;border:1px solid var(--line-2);padding:.5em .9em;border-radius:6px;color:var(--ink-soft);transition:.15s}
.related a:hover{border-color:var(--accent);color:var(--accent)}


/* === MOBILE MENU FIX === */
@media (max-width: 880px) {
  .mobile-menu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px); /* mobile browsers ke liye behtar */
    background: var(--paper);     /* solid bg — page peeche se nahi jhalkega */
    overflow-y: auto;
  }
}