/* ---------------------------------------------------------------------------
   SELF-HOSTED TYPE, added 30 Aug 2026.
   These faces used to be fetched from fonts.googleapis.com and
   fonts.gstatic.com on every visit, which announced every reader of this
   independent business's website to Google before they had read a word. They now
   sit in this build's own fonts/ folder and no font provider is contacted.

   One file per family and style, not one per weight: Google serves a single
   variable font and points every requested weight at it. Verified by
   SHA-256, which is why the weight RANGE below is wide.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-latin-var.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/public-sans-latin-var.woff2') format('woff2');
}

/* ==================================================================
   WRENFIELD MEDICAL STORES
   41 Cedar Avenue, South Kolkata, Kolkata

   PALETTE
   Taken from the shop itself. The green and gold are the signboard's
   own paint; the cream is the paper they sit on; the marigold matches
   the garland on the shrine inside the shop.

   Revised 25 Aug: the earlier pass filled whole blocks with saturated
   forest green and read hard and corporate. Green is now an accent
   carried by type, icons, buttons and the footer, and warm cream does
   the heavy lifting. The green itself is softened, and the dark theme
   is warmed off cold green-black onto a warm brown-black.

   TYPE
   Bricolage Grotesque for display, Public Sans for body. Public Sans
   is drawn for public-service legibility, which matters for a counter
   read by older customers on repeat prescriptions.

   Both themes are defined at token level. No colour is declared
   outside the two token blocks.
   ================================================================== */

:root{
  --paper:        #14120E;
  --paper-2:      #1C1914;
  --paper-3:      #241F18;
  --card:         #1B1813;

  --ink:          #F2ECDF;
  --ink-2:        #D9D1C1;
  --body:         #B3AB99;
  --muted:        #948B78;

  --green:        #5FA87C;
  --green-deep:   #16281D;
  --green-soft:   #7BBE95;

  --gold:         #E0A431;
  --gold-bright:  #EFC161;
  --gold-wash:    #2B2417;

  --line:         #332C22;
  --line-soft:    #2A241C;

  --on-green:     #F2ECDF;
  --on-green-dim: #AEC3B3;

  --on-fill:      #0B1F13;
  --fill-hover:   #7BBE95;
  --rod-bg:       #1D4531;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.45);
  --shadow-md: 0 16px 44px -22px rgba(0,0,0,.65);
  --shadow-lg: 0 40px 90px -44px rgba(0,0,0,.8);

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --sans:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --nav-h: 68px;
  --shell: 1200px;
  --gut: 34px;

  /* ---- VERTICAL SCALE, viewport-HEIGHT aware -----------------------
     This page responded to viewport width only. Windows laptops default
     to 125-150%% display scaling, leaving a real working area of roughly
     1280x610 CSS pixels rather than the 1536x864 it was designed at. At
     that size whole sections ran taller than the screen, so none could
     be seen at once and the page read as permanently zoomed in.

     Every vertical value is now the SMALLER of a width-based and a
     height-based measure. The plain vh line before each svh line is the
     fallback for engines that do not parse svh; svh is preferred so
     mobile browser chrome cannot reflow the page mid-scroll. Same
     system as the another build build, deliberately: the two sites look
     nothing alike but they should behave alike. */
  --section-y: clamp(44px, 7vw, 92px);
  --section-y: min(clamp(44px, 7vw, 92px), 12svh);

  --media-max: min(58vh, 520px);
  --media-max: min(58svh, 520px);

  --dur-press: 150ms;
  --dur-ui:    220ms;
  color-scheme: dark;
}



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-behavior is NOT smooth: Lenis owns the scrolling now, and two
   smooth implementations fight each other. Under reduced motion Lenis
   never starts and the browser's own instant jump is the correct result. */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--body);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing. The width/height attributes on each <img>
   are presentational hints that otherwise pin the box to the file's pixel
   height and silently override every aspect-ratio below. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:2px}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}
.tabular{font-variant-numeric:tabular-nums}

h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;letter-spacing:-.022em;line-height:1.09;text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,3.85rem);letter-spacing:-.032em}
h2{font-size:clamp(1.8rem,3.3vw,2.7rem)}
h3{font-size:1.16rem;line-height:1.3;letter-spacing:-.012em}
.lede{font-size:clamp(1.01rem,1.4vw,1.14rem);color:var(--ink-2);max-width:56ch;line-height:1.62}

/* ---------- motion primitives ----------
   The hidden state is scoped to .js, set by an inline script in the head,
   so with JavaScript off or if IntersectionObserver never fires the page
   still renders in full rather than blank. */
.js .rise{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .rise.seen{opacity:1;transform:none}
.rise-d1{transition-delay:.08s}
.rise-d2{transition-delay:.16s}
.rise-d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
  .js .rise{opacity:1;transform:none}
}

/* ================= NAV ================= */
.nav{
  position:sticky;top:0;z-index:80;height:var(--nav-h);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav.stuck{border-bottom-color:var(--line);background:color-mix(in srgb,var(--paper) 96%,transparent)}
.nav .shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.wordmark .rod{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--rod-bg);color:var(--gold-bright);
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px;
}
.wordmark b{font-family:var(--display);font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.wordmark s{display:block;text-decoration:none;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.navlinks{display:flex;gap:28px;font-size:14.5px;font-weight:500}
.navlinks a{text-decoration:none;color:var(--ink-2);position:relative;padding:4px 0;transition:color .22s var(--ease)}
.navlinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold-bright);
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)
}
.nav-cta{
  flex:none;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--green);color:var(--on-fill);
  font-size:14px;font-weight:700;padding:10px 19px;border-radius:100px;
  transition:transform .2s var(--ease),background .22s var(--ease);
}
.nav-cta:active{transform:scale(.96)}
.cta-short{display:none}
@media (max-width:920px){ .navlinks{display:none} }

/* Below 560px the wordmark and a full phone number cannot both fit.
   Both were flex:none, so neither gave way and the button's right edge
   landed 80px off a 375px screen: reachable only by a horizontal scroll
   that body{overflow-x:hidden} was quietly swallowing, which made a call
   button partly untappable on the phones most likely to use it. */
@media (max-width:560px){
  .nav .shell{gap:12px}
  .wordmark{flex:1 1 auto;min-width:0}
  .wordmark b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wordmark s{display:none}
  .cta-full{display:none}
  .cta-short{display:inline}
  .nav-cta{padding:11px 16px;min-height:44px}
}

/* ================= HERO ================= */
.hero{padding:56px 0 0}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln > span{display:block;transform:translateY(105%);animation:lnUp .95s var(--ease-out) forwards}
.hero h1 .ln:nth-child(2) > span{animation-delay:.09s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.18s}
@keyframes lnUp{to{transform:none}}
.hero h1 em{font-style:normal;color:var(--green)}

.hero-sub{margin-top:22px;font-size:1.1rem;color:var(--ink-2);max-width:42ch;
  opacity:0;animation:fadeUp .8s var(--ease-out) .42s forwards}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px;
  opacity:0;animation:fadeUp .8s var(--ease-out) .54s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero h1 .ln > span{transform:none;animation:none}
  .hero-sub,.hero-cta{opacity:1;animation:none}
}

.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;
  border:none;font-family:var(--sans);font-size:15px;font-weight:700;
  padding:15px 27px;border-radius:100px;white-space:nowrap;
  transition:transform .2s var(--ease),background .24s var(--ease),box-shadow .24s var(--ease),color .24s var(--ease);
}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.968)}
.btn-primary{background:var(--green);color:var(--on-fill);box-shadow:0 12px 28px -14px color-mix(in srgb,var(--green) 75%,transparent)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-gold{background:var(--gold-bright);color:#2A1D02}

.hero-figure .frame{
  position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);
  clip-path:inset(0 0 100% 0);animation:revealDown 1.05s var(--ease-out) .2s forwards;
}
@keyframes revealDown{to{clip-path:inset(0 0 0 0)}}
.hero-figure img{width:100%;height:auto;transform:scale(1.08);animation:settle 1.6s var(--ease-out) .2s forwards}
@keyframes settle{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .hero-figure .frame{clip-path:none;animation:none}
  .hero-figure img{transform:none;animation:none}
}

.facts{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.facts > div{padding:26px 30px 26px 0;border-right:1px solid var(--line-soft)}
.facts > div:last-child{border-right:none}
.facts dt{font-family:var(--display);font-size:1.95rem;font-weight:700;color:var(--green);line-height:1;letter-spacing:-.03em}
.facts dd{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.45}

/* ---------- questions ------------------------------------------------
   Native <details>, so the answers are in the DOM for a crawler and for
   an assistant reading the page, and they still work with JavaScript
   off. The marker is drawn with a pseudo-element rather than the default
   triangle so it can rotate. */
.qa-list{max-width:78ch;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--ink);
  line-height:1.4;transition:color var(--dur-ui) var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:14px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:translateY(-70%) rotate(45deg);transform-origin:center;
  transition:transform var(--dur-ui) var(--ease)}
.qa[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa-a{padding:0 44px 22px 0}
.qa-a p{color:var(--ink-2);line-height:1.68;max-width:66ch}
.qa summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}
@media (max-width:720px){
  .qa summary{font-size:1rem;padding-right:36px}
  .qa-a{padding-right:0}
}

/* ================= SECTIONS ================= */
section{padding:var(--section-y) 0}
.sec-head{max-width:58ch;margin-bottom:50px}
.sec-head h2{margin-bottom:14px}

/* three equal warm cards, no solid-green block */
.offer{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.tile{
  border-radius:16px;padding:32px;background:var(--card);
  border:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:flex-start;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s var(--ease);
}
.tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line)}
.tile .ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--gold-wash);color:var(--green);
}
.tile .ic svg{width:22px;height:22px}
.tile h3{margin-bottom:9px}
.tile p{font-size:15.2px;line-height:1.62}
.tile .note{
  margin-top:18px;align-self:flex-start;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--gold);background:var(--gold-wash);
  padding:6px 13px;border-radius:100px;
}

/* ================= STANDING (the human beat) ================= */
.standing{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.standing-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
.standing h2{margin-bottom:20px}
.standing p{font-size:1.07rem;color:var(--ink-2);line-height:1.7;max-width:50ch}
.standing p + p{margin-top:16px}
.standing figure{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md)}
.standing figure img{width:100%;height:auto;aspect-ratio:4/3;max-height:var(--media-max);object-fit:cover}

/* ================= DOCTOR ================= */
.doc-grid{display:grid;grid-template-columns:1fr 1.03fr;gap:58px;align-items:center}
.doc h2{margin-bottom:8px}
.doc .role{font-size:14px;font-weight:600;color:var(--gold);margin-bottom:18px}

/* The chamber card sits in its own column beside the name and the lede.
   It used to sit under a qualifications list, which was removed on 26 Aug
   because the wording had been read off a photograph of the chamber board
   — see SECURITY-AND-LEGAL.md section 5. Hence margin-top:0. */
.chamber{margin-top:0;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.chamber .top{
  background:var(--green);color:var(--on-fill);padding:13px 22px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.chamber .slot{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 22px;border-bottom:1px solid var(--line-soft)}
.chamber .slot:last-of-type{border-bottom:none}
.chamber .slot span:first-child{font-size:14.5px;color:var(--ink);font-weight:500}
.chamber .slot span:last-child{font-size:15px;color:var(--green);font-weight:700}
.chamber .foot{padding:14px 22px;background:var(--paper-2);font-size:13.5px;color:var(--muted);border-top:1px solid var(--line-soft)}

/* ================= ORDER ================= */
.order{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.order-grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:58px;align-items:start}

.steps{margin-top:30px;display:grid}
.steps > div{padding:19px 0;display:flex;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line)}
.steps > div:last-child{border-bottom:none}
.steps .n{
  width:27px;height:27px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--green);color:var(--on-fill);font-size:13px;font-weight:800;font-family:var(--display);
}
.steps h4{font-size:15.2px;margin-bottom:3px}
.steps p{font-size:14px;color:var(--body);line-height:1.55}

.panel{background:var(--card);border-radius:18px;padding:32px;box-shadow:var(--shadow-md);border:1px solid var(--line-soft)}
.panel h3{margin-bottom:6px}
.panel .hint{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.field{margin-bottom:17px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field textarea,.field input{
  width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:11px;padding:13px 15px;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.field textarea::placeholder,.field input::placeholder{color:var(--muted);opacity:1}
.field textarea:focus,.field input:focus{outline:none;border-color:var(--green);background:var(--card)}
.field textarea{min-height:92px;resize:vertical}

.attach{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:17px}
.attach-btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--ink-2);
  border:1.5px dashed var(--line);border-radius:11px;padding:12px 17px;
  transition:border-color .22s var(--ease),color .22s var(--ease);
}
.attach-btn:hover{border-color:var(--green);color:var(--green)}
.attach-btn svg{width:17px;height:17px}
.chip{display:none;align-items:center;gap:11px}
.chip.on{display:flex}
.chip img{width:46px;height:46px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.chip button{background:none;border:none;color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer;font-family:var(--sans)}
.panel .fine{font-size:12.8px;color:var(--muted);line-height:1.55;margin-top:15px}

/* ================= GALLERY ================= */
.gal-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,420px);gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
}
.gal-rail::-webkit-scrollbar{height:7px}
.gal-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.gal-rail::-webkit-scrollbar-track{background:transparent}
.gal-rail figure{scroll-snap-align:start;border-radius:14px;overflow:hidden;position:relative;background:var(--paper-3)}
.gal-rail img{width:100%;height:auto;aspect-ratio:4/3;max-height:var(--media-max);object-fit:cover;transition:transform .7s var(--ease)}
.gal-rail figure:hover img{transform:scale(1.045)}
.gal-rail figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;
  background:linear-gradient(to top,rgba(12,20,14,.86),transparent);
  color:#F5F0E2;font-size:13.5px;font-weight:600;
}

/* ================= VISIT ================= */
.visit-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:56px;align-items:start}
.hours{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card);margin:30px 0 26px}
.hours .top{background:var(--green);color:var(--on-fill);padding:13px 22px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hours .row{display:flex;justify-content:space-between;gap:16px;padding:15px 22px;border-bottom:1px solid var(--line-soft)}
.hours .row:last-child{border-bottom:none}
.hours .row span:first-child{font-size:14.5px;color:var(--ink)}
.hours .row span:last-child{font-size:15px;font-weight:700;color:var(--ink)}
.addr{margin-bottom:12px}
.addr dt{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.addr dd{font-size:16.5px;color:var(--ink);line-height:1.55}
.addr dd a{color:var(--green);font-weight:700;text-decoration:none}
.addr dd a:hover{text-decoration:underline}
.map{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--paper-3)}
.map iframe{display:block;width:100%;height:440px;border:0}


/* ================= FOOTER ================= */
footer{background:var(--green-deep);color:var(--on-green-dim);padding:64px 0 34px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;margin-bottom:42px}
.fbrand{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.fbrand .rod{
  width:36px;height:36px;border-radius:50%;flex:none;background:rgba(255,255,255,.09);
  color:var(--gold-bright);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:16px;
}
.fbrand b{font-family:var(--display);font-size:17px;color:var(--on-green);font-weight:700;letter-spacing:-.02em}
footer p{font-size:14.5px;line-height:1.65;max-width:42ch}
footer h4{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:11px;font-size:14.5px}
footer a{text-decoration:none;transition:color .2s var(--ease)}
footer a:hover{color:var(--gold-bright)}
.fbase{
  border-top:1px solid rgba(255,255,255,.12);padding-top:26px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;
}

/* Site credit, added 29 Aug 2026 at his request. Its own line under .fbase
   rather than a third item in that flex row, which is space-between and
   would push the copyright out of place on a narrow screen. max-width:none
   guards against any global p{max-width:__ch} rule silently shrinking the
   box and parking the credit off-centre. */
.byline{margin:20px auto 0;max-width:none;text-align:center;font-size:13px;
  color:var(--on-green-dim);opacity:.72;letter-spacing:.01em}

/* ================= LEGAL ================= */
.legal{max-width:70ch;margin:0 auto;padding:74px 0 96px}
.legal h1{font-size:clamp(2rem,4vw,2.6rem);margin-bottom:10px}
.legal .meta{font-size:14px;color:var(--muted);margin-bottom:46px}
.legal h2{font-size:1.3rem;margin:42px 0 12px}
.legal p,.legal li{font-size:16px;line-height:1.75;margin-bottom:14px}
.legal ul{padding-left:24px}
.legal a{color:var(--green);font-weight:600}

/* ================= RESPONSIVE ================= */
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .hero-figure{order:-1}
  .offer{grid-template-columns:1fr 1fr}
  .standing-grid,.doc-grid,.order-grid,.visit-grid{grid-template-columns:1fr;gap:40px}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:720px){
  :root{--gut:22px;--nav-h:62px}
  body{font-size:16.5px}
  .hero{padding:34px 0 0}
  .facts{grid-template-columns:1fr;margin-top:50px}
  .facts > div{border-right:none;border-bottom:1px solid var(--line-soft);padding:20px 0}
  .facts > div:last-child{border-bottom:none}
  .sec-head{margin-bottom:36px}
  .offer{grid-template-columns:1fr}
  .tile{padding:26px}
  .panel{padding:24px}
  .btn{width:100%;justify-content:center}
  .fgrid{grid-template-columns:1fr;gap:30px}
  .fbase{flex-direction:column;gap:8px}
  .map iframe{height:330px}
}

/* ---------- hover, gated ---------------------------------------------
   A touch device fires :hover on tap and leaves it applied until the
   next tap elsewhere, so an ungated hover state reads as a stuck
   selection. Fine pointers only. */
@media (hover:hover) and (pointer:fine){
  .qa summary:hover{color:var(--green)}
  .navlinks a:hover{color:var(--ink)}
  .navlinks a:hover::after{transform:scaleX(1)}
  .nav-cta:hover{background:var(--fill-hover)}
  .btn-primary:hover{background:var(--fill-hover);box-shadow:0 18px 38px -16px color-mix(in srgb,var(--green) 80%,transparent)}
  .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--green);color:var(--green)}
  .btn-gold:hover{filter:brightness(.94)}
}

/* The real <input type="file"> is visually hidden but must stay focusable,
   and a <label> cannot take focus itself, so the visible ring is drawn on
   the wrapper instead. WCAG 2.4.7. This rule existed on the another build
   build and had never been carried across; the input here was `hidden`,
   i.e. display:none, so there was no keyboard path to the file picker at
   all. */
.attach:focus-within .attach-btn{outline:3px solid var(--green);outline-offset:3px;border-color:var(--green)}

/* ================= TAP TARGETS =================
   SECURITY-AND-LEGAL.md section 4 sets the bar at 44x44 px with adequate
   spacing. That is stricter than WCAG 2.1 AA, which has no target-size
   criterion at all, and stricter than WCAG 2.2's 24x24 -- which is why
   Lighthouse's target-size audit passed this page while the footer links
   were still only 16.8 px tall. Measured, not assumed: a11y pass, 25 Aug
   session follow-up.

   The text and the layout rhythm stay where they are. Only the hit area
   grows, by making each link a flex box with a minimum height and taking
   the same amount back off the list-item margin. */
footer li{margin-bottom:0}
footer li a{display:inline-flex;align-items:center;min-height:44px}

/* The contact <dd> phone link in the visit panel, and the header
   wordmark, were 20 px and 34 px tall respectively. */
.vcard dd a[href^="#call"],
.visit-grid dd a[href^="#call"]{display:inline-flex;align-items:center;min-height:44px}
.wordmark{min-height:44px}

/* Spacing, so two 44 px targets cannot be tapped by one thumb. */
footer li + li{margin-top:2px}


/* ---------- hero: dark, cinematic, with the shop's own 3D capsule -----

   Added 28 Aug 2026, after he asked that all the sites give off the same
   feeling as a set of reference sites he sent (sharplink.com and others).
   What was taken from those: a dark stage, an object big enough to run
   off the edge of its own frame, hard raking light, and display type at a
   size that carries the page. What was NOT taken: their palette. This
   build keeps its own cream, deep green and gold, because DECISIONS.md
   requires each build in this folder to hold a distinct palette family -
   that rule is what stops five neighbouring shops looking like a chain.

   The green is not borrowed either: --green-deep is already this shop's
   own signboard. ONE theme transition, at the very top, which is the
   exception the theme-lock rule allows; everything below stays cream and
   readable, because a chemist's page is read rather than admired. */
.hero{
  position:relative;
  margin-top:calc(-1 * var(--nav-h, 68px));
  padding:calc(var(--nav-h, 68px) + clamp(26px,4svh,54px)) 0 clamp(30px,5svh,58px);
  background:
    radial-gradient(118% 88% at 76% 20%, rgba(221,163,46,.20), transparent 60%),
    linear-gradient(168deg, #14331F 0%, var(--green-deep) 48%, #24573C 100%);
  color:var(--on-green);
  overflow:hidden;
  isolation:isolate;
}
.hero h1{color:#FFFDF6}
.hero h1 em{font-style:normal;color:#E8C071}
.hero .hero-sub{color:#E2D9C2}

/* The stage runs wider than its column and overflows to the right, so the
   capsule is cropped by the edge of the page rather than floating inside
   a neat square. */
.caps-stage{
  position:relative;width:100%;
  max-width:min(620px,72svh);
  aspect-ratio:1/1;margin:0;justify-self:end;
  margin-right:clamp(-120px,-6vw,0px);
}
.caps-still,.caps-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.caps-still{object-fit:contain}
/* The still is what ships and paints first; the canvas fades over it only
   once WebGL is running and the model has arrived, so any failure leaves
   a complete hero rather than a hole in it. */
.caps-canvas{opacity:0;transition:opacity .6s var(--ease,cubic-bezier(.22,1,.36,1))}
.caps-stage.ready .caps-canvas{opacity:1}
.caps-stage.ready .caps-still{opacity:0;transition:opacity .6s var(--ease,cubic-bezier(.22,1,.36,1))}
/* inset:0, never a negative inset: bleeding a glow outside its box pushes
   the document wider than a narrow viewport and gives the page a sideways
   scroll. */
.caps-stage::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side, rgba(221,163,46,.26), transparent 70%);
}
@media (max-width:960px){
  .caps-stage{justify-self:center;margin-right:0;max-width:min(400px,50svh)}
}
@media (max-width:900px){
  /* Below this width capsule.js refuses to start (it returns early on
     innerWidth < 900), so nothing here ever turns - the canvas stays empty
     and the still PNG is all that shows. Until 29 Aug 2026 this rule only
     shrank the still to 340px, which left a big motionless capsule sitting
     in the middle of the phone hero doing nothing. His words: "just a big
     pill in the middle of screen which is static."

     So it goes entirely on a phone, rather than shrinking into an ornament
     - which is exactly the rule the another build build already had for its
     bottle. Same defect, one build had the answer and this one did not. */
  .caps-stage{display:none}
}
@media (prefers-reduced-motion:reduce){
  .caps-canvas{display:none}
  .caps-stage.ready .caps-still{opacity:1}
}

/* Everything that now sits ON the dark hero needs on-dark colours. These
   elements were written for cream paper and inherit --ink, --green and
   --muted, which on the new green ground rendered as dark-on-dark and
   were close to unreadable. Scoped to .hero so the same components keep
   their normal appearance everywhere else on the page. */
.hero .facts{border-top-color:rgba(248,242,226,.22)}
.hero .facts > div{border-right-color:rgba(248,242,226,.14)}
.hero .facts dt{color:#E8C071}
.hero .facts dd{color:#D6DFD2}
.hero .btn-ghost{
  background:transparent;color:#FFFDF6;
  box-shadow:inset 0 0 0 1.5px rgba(248,242,226,.42);
}
.hero .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(248,242,226,.8)}

/* The bar floats over the hero and turns back into the ordinary light bar
   once the hero has passed. Scoped under .js: with no JavaScript the class
   is never added and the bar stays solid and readable, which is the
   correct failure. */
.js .nav{transition:background-color .35s var(--ease,ease), border-color .35s var(--ease,ease)}
.js .nav.on-hero{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none}
/* This build's nav uses .wordmark and .navlinks, not the class names the
   sister sites use. Same behaviour, different selectors. */
.js .nav.on-hero .wordmark b{color:#FFFDF6}
.js .nav.on-hero .wordmark s{color:rgba(248,242,226,.74)}
.js .nav.on-hero .navlinks a{color:#DDE7DC}
.js .nav.on-hero .navlinks a:hover{color:#FFFDF6}
.js .nav.on-hero.stuck{background:transparent;border-bottom-color:transparent}
@media (prefers-reduced-motion:reduce){ .js .nav{transition:none} }

/* ===========================================================================
   COOKIE NOTICE, added 30 Aug 2026. Built by main.js so the wording cannot
   drift between index.html and legal.html. This site sets nothing of its own,
   so the notice states that rather than inventing a choice.
   Colours are explicit in both modes rather than inherited, because --gold
   flips from a dark ochre to a bright one after dark and a single text colour
   cannot serve both.
   =========================================================================== */
.cookiebar{
  position:fixed; z-index:70;
  left:clamp(.5rem,2vw,1.25rem); right:clamp(.5rem,2vw,1.25rem);
  bottom:clamp(.5rem,2vw,1.25rem);
  max-width:46rem; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.15rem;
  padding:1rem 1.15rem;
  background:#FFFFFF; color:#4F5C53;
  border:1px solid #E6DAC2; border-left:3px solid #8A5D0C;
  border-radius:12px;
  box-shadow:0 34px 70px -34px rgba(31,42,34,.42);
  transform:translateY(130%); opacity:0;
  transition:transform .42s cubic-bezier(.16,1,.3,1), opacity .42s cubic-bezier(.16,1,.3,1);
}
.cookiebar--in{transform:none; opacity:1}
.cookiebar--out{transform:translateY(130%); opacity:0}
.cookiebar__text{flex:1 1 20rem; margin:0; font-family:var(--sans); font-size:.88rem; line-height:1.55}
.cookiebar__text strong{color:#1F2A22; font-weight:700}
.cookiebar__text a{color:#7A5209; font-weight:600}
.cookiebar__btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:.6rem 1.4rem;
  border:0; border-radius:999px; cursor:pointer;
  background:#1F2A22; color:#FBF6EA;
  font-family:var(--sans); font-size:.82rem; font-weight:700;
  transition:transform .16s ease-out, filter .2s ease-out;
}
.cookiebar__btn:hover{filter:brightness(1.25)}
.cookiebar__btn:active{transform:scale(.97)}
.cookiebar__btn:focus-visible{outline:2px solid #8A5D0C; outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .cookiebar{transition:none; transform:none; opacity:1}
  .cookiebar--out{display:none}
}

/* ---------------------------------------------------------------------------
   SINGLE MODE, committed 30 Aug 2026.
   This site used to carry a full light palette AND a dark override, while its
   hero stayed dark in both. In light mode a reader scrolled from a dark,
   art-directed hero straight into a near-white page - two sites stapled
   together. His words: "in light mode it's completely garbage".
   The dark palette is now the only palette, the way another build has always been.
   Do not reintroduce a prefers-color-scheme block here.
   --------------------------------------------------------------------------- */

/* was inside the dark media query; now applies always */
.map iframe{filter:brightness(.88) contrast(1.04)}
.cookiebar{background:#1B1813; color:#C9BFAE; border-color:#3A3226; border-left-color:#E0A431}
  .cookiebar__text strong{color:#F2EADB}
  .cookiebar__text a{color:#E0A431}
  .cookiebar__btn{background:#E0A431; color:#1B1813}

/* Concept-site additions. */
.map-stub{padding:28px 24px;border:1px solid currentColor;opacity:.75;font-size:.95em}