/* Service pages (services/*.html). Shared chrome comes from site.css. */
.site-header{margin-bottom:calc(-1 * var(--hh,92px))}
main{display:block}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:0.28em;text-transform:uppercase;font-weight:500;color:var(--copper-text)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.eyebrow .dev{font-size:17px;letter-spacing:0;text-transform:none}

/* page hero */
.phero{min-height:calc(100vh - var(--tb,0px));display:flex;align-items:center;padding:calc(var(--hh,92px) + 12px) 0 24px;background:radial-gradient(60% 55% at 90% 0%,rgba(244,169,82,0.12),rgba(244,169,82,0) 70%),var(--ivory)}
.phero>.wrap{width:100%}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
.phero .wrap>div:first-child{padding-bottom:56px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none;font-size:14px;color:var(--muted-2)}
.crumbs a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}.crumbs a:hover{color:var(--ink);text-decoration-color:currentColor}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.phero h1{margin-top:14px;font-size:clamp(40px,4.6vw,66px);line-height:1.02;letter-spacing:-0.02em;text-wrap:balance}
.phero .lead{margin:22px 0 0;max-width:54ch;font-size:17px;line-height:1.6;color:var(--muted)}
.phero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.phero .pic{position:relative;aspect-ratio:4/5;width:min(100%,calc((100vh - var(--tb,0px) - var(--hh,92px) - 36px) * .8),520px);margin:0 0 0 auto;border-radius:var(--r-lg);overflow:hidden;background:var(--sand)}
.phero .pic img{width:100%;height:100%;object-fit:cover}
.phero .pic.contain{background:radial-gradient(70% 60% at 50% 60%,rgba(244,169,82,.22),rgba(244,169,82,0) 70%),var(--ivory-2);display:flex;align-items:center;justify-content:center;padding:36px}
.phero .pic.contain img{width:auto;height:100%;object-fit:contain}
.phero .pic figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 24px 20px;background:linear-gradient(180deg,rgba(39,46,26,0),rgba(39,46,26,.7));color:var(--ivory);font-size:13px;letter-spacing:.14em;text-transform:uppercase}

/* cross links to the other three pages */
.other{background:var(--ivory-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.other .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:14px;padding-bottom:14px}
.other>.wrap>span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-right:8px}
.other a{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .25s,background .25s}
.other a:hover{border-color:var(--green)}
.other a.cur{background:var(--green);border-color:var(--green);color:var(--ivory)}
.other a .dev{font-size:15px;color:inherit;opacity:.8}

/* sections */
.sec{padding:96px 0}
.sec.tint{background:var(--ivory-2)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:20px 48px;margin-bottom:44px}
.sec-head h2{font-size:clamp(34px,3.8vw,52px);line-height:1.05;margin-top:12px;text-wrap:balance}
.sec-head p{margin:0;max-width:46ch;font-size:15px;color:var(--muted);justify-self:end;text-wrap:pretty}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cardx{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:30px;display:flex;flex-direction:column;gap:12px;transition:transform .3s,box-shadow .3s}
.cardx:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(43,37,32,0.08)}
.cardx .dev{font-size:24px;line-height:1;color:var(--green)}
.cardx h3{font-size:26px;font-weight:400;line-height:1.15}
.cardx p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.cardx .kv{margin:6px 0 0;display:grid;gap:8px;font-size:14px;line-height:1.5}
.cardx .kv div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px}
.cardx .kv b{font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-text);padding-top:3px}
.cardx .kv span{color:var(--ink)}
.cardx .go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--green);text-decoration:none}
.cardx .go svg{transition:transform .25s}.cardx .go:hover svg{transform:translateX(4px)}

/* steps (as on the homepage) */
.steps{margin:0;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{font-family:'Newsreader',serif;font-size:34px;line-height:1;color:var(--green)}
.steps b{font-weight:500;font-size:17px;display:block}
.steps span{font-size:15px;color:var(--muted)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.two h2{font-size:clamp(32px,3.4vw,46px);line-height:1.05;margin-top:12px}
.two .copy p{font-size:16px;line-height:1.6;color:var(--muted)}
.proc{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
.proc li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}
.proc .dev{font-size:21px;color:var(--green)}
.proc b{font-weight:500;display:block}.proc span{font-size:14px;color:var(--muted)}

/* package tiers */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tier{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;display:flex;flex-direction:column;gap:16px}
.tier.hl{background:var(--green);color:var(--ivory);border-color:var(--green)}
.tier .days{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--copper-text)}
.tier.hl .days{color:var(--turmeric-light)}
.tier h3{font-size:30px;font-weight:400;line-height:1.1}
.tier h3 .dev{display:block;font-size:20px;color:var(--green);margin-bottom:4px}
.tier.hl h3 .dev{color:var(--turmeric-light)}
.tier .for{font-size:15px;line-height:1.5;color:var(--muted)}.tier.hl .for{color:rgba(246,241,231,.75)}
.tier ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:14.5px;line-height:1.5}
.tier.hl ul{border-color:rgba(246,241,231,.2)}
.tier li{padding-left:16px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:1px;background:var(--turmeric)}
.tier .price{margin-top:auto;padding-top:16px;font-family:'Newsreader',serif;font-size:28px;line-height:1}
.tier .price small{display:block;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.tier.hl .price small{color:rgba(246,241,231,.65)}
.tier .btn{min-height:48px;padding:0 24px;font-size:14px;align-self:flex-start}
.tier .tag{position:absolute;top:-12px;right:24px;background:var(--turmeric);color:var(--ink);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:6px 12px;border-radius:999px}


.note{margin:28px 0 0;padding:20px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);font-size:14.5px;line-height:1.6;color:var(--muted)}
.note b{font-weight:500;color:var(--ink)}

/* closing band */
.band{background:var(--green);color:var(--ivory);padding:80px 0}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 48px;align-items:center}
.band .eyebrow{color:var(--turmeric)}
.band h2{font-size:clamp(30px,3.6vw,46px);line-height:1.05;margin-top:12px;text-wrap:balance}
.band p{margin:14px 0 0;max-width:52ch;font-size:16px;color:rgba(246,241,231,.86)}
.band .acts{display:flex;flex-wrap:wrap;gap:12px}
.btn-ghost{border:1px solid rgba(246,241,231,.4);color:var(--ivory);background:transparent}
.btn-ghost:hover{background:rgba(246,241,231,.08)}

@media (max-width:1100px){.cards.three,.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .phero .wrap,.two,.band .wrap{grid-template-columns:1fr;gap:36px}
  .phero .pic{max-height:420px;aspect-ratio:4/3}
  .sec{padding:72px 0}
  .sec-head{grid-template-columns:1fr}.sec-head p{justify-self:start}
  .cards,.cards.three,.tiers{grid-template-columns:1fr}
}

/* ---- Conditions page v2: check strip, visit steps, image cards ---- */
.check.sec{padding:72px 0}
.check .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.check .col{padding:26px 0 0;border-top:1px solid var(--ink)}
.check .col.no{border-top-color:var(--copper)}
.check h3{font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;font-family:'Jost',sans-serif;color:var(--green);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.check .col.no h3{color:var(--copper-text)}
.check ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15.5px;line-height:1.5}
.check li{padding-left:18px;position:relative}
.check li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:currentColor;opacity:.6}
.visit{padding:56px 0 60px;background:var(--green);color:var(--ivory)}
.visit .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px}
.visit .st{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;padding:22px 0 0}
.visit .st svg{width:44px;height:44px;stroke:var(--turmeric-light);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.visit .st b{display:block;font-family:'Newsreader',serif;font-weight:400;font-size:23px;line-height:1.15;margin-bottom:6px;color:var(--ivory)}
.visit .st span{font-size:14.5px;line-height:1.5;color:rgba(246,241,231,.74)}
.clist{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:64px;align-items:start}
.bmap{position:sticky;top:calc(var(--hh,92px) + 12px);aspect-ratio:4/5;width:min(100%,calc((100vh - var(--hh,92px) - 36px) * .8));margin:0 auto;border-radius:var(--r-lg);overflow:hidden;background:#E8DCC3;box-shadow:0 30px 60px -30px rgba(43,37,32,.35)}
.bmap img{width:100%;height:100%;object-fit:cover;display:block}
.bmap .side{position:absolute;bottom:14px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(43,37,32,.72);transform:translateX(-50%)}
.hs{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;border:0;background:transparent;padding:0;cursor:pointer;z-index:2}
.hs::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--turmeric);box-shadow:0 0 0 4px rgba(244,169,82,.28);transition:transform .3s,background .3s,box-shadow .3s}
.hs::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(244,169,82,.8);opacity:0;animation:hs-ring 2.8s ease-out infinite}
@keyframes hs-ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.hs:hover::before,.hs.is-on::before{background:var(--green);box-shadow:0 0 0 12px rgba(57,67,39,.16);transform:scale(1.3)}
.hs:hover::after,.hs.is-on::after{animation:none;opacity:0}
.hs .lab{position:absolute;left:24px;top:50%;transform:translateY(-50%);white-space:nowrap;background:rgba(39,46,26,.94);color:var(--ivory);font:500 12px/1 'Jost',sans-serif;letter-spacing:.06em;padding:8px 12px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:3}
.hs.flip .lab{left:auto;right:24px}
.hs:hover .lab,.hs.is-on .lab{opacity:1}
.hs:focus-visible{outline:2px solid var(--turmeric);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.hs::after{animation:none}}
.crows{display:flex;flex-direction:column}
.crow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:6px 22px;align-items:start;padding:24px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;transition:padding .35s cubic-bezier(.16,.6,.2,1)}
.crow:last-child{border-bottom:1px solid var(--line)}
.crow .n{font-family:'Newsreader',serif;font-size:15px;letter-spacing:.06em;color:var(--muted-2);padding-top:9px;font-variant-numeric:tabular-nums;grid-row:1/4}
.crow .hd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.crow h3{font-size:28px;font-weight:400;line-height:1.1;transition:color .3s}
.crow .dev{font-size:19px;line-height:1;color:var(--green);opacity:.86}
.crow .one{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--muted);max-width:56ch}
.crow .one b{font-weight:500;color:var(--ink)}
.crow .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.crow .chips span{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;transition:border-color .3s,color .3s}
.crow .go{grid-column:3;grid-row:1/4;align-self:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:background .3s,color .3s,border-color .3s,transform .3s}
.crow:hover,.crow:focus-visible,.crow.is-on{padding-left:10px}
.crow:hover h3,.crow.is-on h3{color:var(--green)}
.crow:hover .chips span,.crow.is-on .chips span{border-color:rgba(57,67,39,.35);color:var(--ink)}
.crow:hover .go,.crow.is-on .go{background:var(--green);border-color:var(--green);color:var(--ivory);transform:translateX(4px)}
.crow:focus-visible{outline:none}
@media (max-width:980px){
  .clist{grid-template-columns:1fr;gap:28px}.bmap{position:relative;top:auto;max-width:460px;margin:0 auto}   /* relative, not static: the hotspots are placed against it */
  .crow{grid-template-columns:32px minmax(0,1fr) auto;gap:4px 12px;padding:18px 0}
  .crow h3{font-size:22px}.crow:hover,.crow.is-on{padding-left:0}
}
@media (max-width:1100px){.visit .wrap{grid-template-columns:1fr}}
@media (max-width:900px){.check .wrap,.ccards{grid-template-columns:1fr}.ccard{grid-template-columns:120px minmax(0,1fr)}.ccard .tx{padding:16px 18px}.ccard h3{font-size:20px}}


/* touch: a 44px hotspot around the same 12px dot */
@media (pointer:coarse){.hs{width:44px;height:44px}.hs::before{inset:16px}}

/* ---------- phones: laid out for a thumb, as on the homepage. Desktop and tablet rules above stay as they are. ---------- */
.swipe-hint{display:none}
@media (max-width:720px){
  /* hero: the picture first as a short banner, then the heading, the reason, and one clear action */
  .phero:not(.about){min-height:0;padding:calc(var(--hh,92px) + 4px) 0 44px;align-items:flex-start}
  .phero:not(.about) .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:center}
  .phero:not(.about) .wrap>div:first-child{display:contents}
  .phero:not(.about) .crumbs{justify-content:center;margin:0 0 16px;font-size:13px}
  .phero:not(.about) .pic{order:1;width:100%;max-height:none;aspect-ratio:auto;height:clamp(180px,30svh,260px);margin:0 0 26px;border-radius:var(--r-md)}
  .phero:not(.about) .pic.contain{padding:14px}
  .phero:not(.about) h1{order:2;margin-top:0;font-size:clamp(36px,10.4vw,46px)}
  .phero:not(.about) .lead{order:3;max-width:none;margin:16px 0 0;font-size:16px;text-align:justify;text-align-last:center}
  .phero:not(.about) .pick{order:4;margin-top:26px}
  .phero:not(.about) .acts{order:5;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:26px}
  .phero:not(.about) .acts .btn{width:100%;min-height:54px}

  /* section heads centred, as on the homepage */
  .sec{padding:64px 0}
  .sec-head{gap:14px;margin-bottom:28px;text-align:center}
  .sec-head>div{display:flex;flex-direction:column;align-items:center}
  .sec-head .eyebrow,.band .eyebrow,.two .eyebrow{justify-content:center;flex-wrap:wrap;gap:4px 10px;font-size:11px;letter-spacing:.2em}
  .sec-head .eyebrow::after,.band .eyebrow::after,.two .copy>.eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
  .sec-head h2,.two h2{font-size:clamp(30px,8.6vw,38px)}
  .sec-head p{justify-self:stretch;max-width:none;font-size:15px;line-height:1.6;text-align:justify;text-align-last:center}
  .two .copy{text-align:center}
  .two .copy>p{text-align:justify;text-align-last:center}
  .steps li{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px 0}
  .steps .n{font-size:28px}

  /* closing band: centred, both actions full width */
  .band{padding:56px 0}
  .band .wrap{gap:26px;text-align:center}
  .band h2{font-size:clamp(30px,8.6vw,38px)}
  .band p{margin-left:auto;margin-right:auto;text-align:justify;text-align-last:center}
  .band .acts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .band .acts .btn{width:100%;min-height:54px}

  /* swipe rows: one card at a time, the next one peeking in */
  .swipe-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--muted-2)}
  .swipe-hint::after{content:"\2192";font-size:15px;letter-spacing:0;animation:swipe-nudge 1.6s ease-in-out infinite}

  /* packages (Panchakarma page) */
  .tiers{display:flex;gap:12px;margin:0 calc(-1 * var(--gutter));padding:14px var(--gutter) 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .tiers::-webkit-scrollbar{display:none}
  .tier{flex:0 0 86%;scroll-snap-align:start;padding:28px 22px 24px;gap:14px}
  .tier h3{font-size:27px}
  .tier .btn{align-self:stretch;width:100%;min-height:50px}
  .note{padding:18px 20px}

  /* conditions: the figure as a compact way in, the ten rows tight and full width */
  .visit{padding:40px 0 44px}
  .visit .st{grid-template-columns:44px minmax(0,1fr);gap:14px;padding-top:16px}
  .visit .st svg{width:38px;height:38px}
  .visit .st b{font-size:21px}
  .bmap{width:min(82%,340px)}
  .crow{grid-template-columns:minmax(0,1fr) 44px;gap:6px 14px;padding:20px 0}
  .crow .n{display:none}
  .crow .hd,.crow .one,.crow .chips{grid-column:1}
  .crow .hd{gap:4px 10px}
  .crow h3{font-size:21px}
  .crow .dev{font-size:16px}
  .crow .one{font-size:14.5px}
  .crow .chips{margin-top:8px}
  .crow .go{grid-column:2;grid-row:1 / 4;align-self:start}
  .check.sec{padding:56px 0}
  .check .wrap{gap:32px}
}
/* phones, continued: one centred axis for the whole page, as on the homepage. Anything built on a left edge
   (icon beside text, a hanging dash, a number column, an arrow at the far right) is restacked on the centre line;
   paragraphs are justified with the last line centred. */
@media (max-width:720px){
  .two>div:not(.copy){text-align:center}
  .two>div:not(.copy)>.eyebrow{display:flex;justify-content:center;margin-bottom:4px}
  .two>div:not(.copy)>.eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}

  /* Panchakarma: the three stages and the five procedures */
  .steps li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:8px;padding:20px 0}
  .steps span{display:block;text-align:justify;text-align-last:center}
  .proc li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:4px;padding:16px 18px}

  /* packages */
  .tier{align-items:center;text-align:center}
  .tier ul{justify-items:center;width:100%}
  .tier li{padding-left:0}
  .tier li::before{position:static;display:inline-block;vertical-align:middle;margin:0 10px 0 0}
  .note{text-align:justify;text-align-last:center}

  /* conditions: the three visit steps, the ten rows, the two check lists */
  .visit .st{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:10px}
  .crow{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
  .crow .hd{justify-content:center}
  .crow .one{text-align:justify;text-align-last:center}
  .crow .chips{justify-content:center}
  .crow .go{align-self:center;margin-top:8px}
  .check .col{text-align:center}
  .check h3{justify-content:center}
  .check li{padding-left:0}
  .check li::before{position:static;display:inline-block;vertical-align:middle;margin:0 10px 0 0}
}
@keyframes swipe-nudge{0%,100%{transform:none}50%{transform:translateX(4px)}}
@media (max-width:720px) and (prefers-reduced-motion:reduce){.swipe-hint::after{animation:none}}
