/* ==========================================================================
   owner issues 15 Oct 2026
   Layout and presentation fixes from the owner's "Issues identified (Oct 15)".
   Loaded after every other stylesheet; rules carry a :root prefix so they win
   over the page level <style> blocks without rewriting them.
   Numbers in the comments are the issue numbers in that document.
   ========================================================================== */

/* ----- 1. One container: header, hero and every section share one width and left edge.
   The live .wrap is the reference: max 1180px with the --gutter padding
   (content edge 194px at 1440 wide, 20px at 390 wide). ------------------- */
:root .nh-page{width:100%; max-width:var(--maxw) !important; padding-inline:var(--gutter) !important; margin-inline:auto}
:root .ltw-news .wrap,
:root .ltw-strip .wrap{max-width:var(--maxw)}

/* narrow 720px columns (press, posts, contact and partner forms) start on the container edge */
:root .wrap[style*="max-width:720px"]{max-width:var(--maxw) !important; text-align:left}
:root .wrap[style*="max-width:720px"] > *{max-width:720px}
:root .wrap[style*="max-width:720px"] .rule{margin-left:0}
:root .blog,
:root .bpostbody,
:root .bpost-nav,
:root .blog__foot{margin-left:0; margin-right:auto}
:root .blog__foot{text-align:left}

/* heroes that sit over a left aligned column (News, Contact) read from the same edge */
:root .hero.ofx-left,
:root .hero.ofx-left .wrap{text-align:left !important}
:root .hero.ofx-left .rule{margin-left:0 !important; margin-right:auto !important}
:root .hero.ofx-left .lead{margin-left:0 !important; margin-right:0 !important}

/* one vertical rhythm for every section */
:root .section,
:root .section--tight{padding-block:clamp(56px,7vw,104px)}

/* ----- 3 + 4. Card treatments vary by section --------------------------- */

/* 3a. Illustrated list with the plain soulies (home: mind-matching, safe sharing, Himalayan recipe) */
:root .cards.cards--soulies{grid-template-columns:1fr; gap:0; max-width:860px}
:root .cards--soulies .card{background:transparent !important; border-radius:0; transform:none;
  display:grid; grid-template-columns:clamp(84px,10vw,120px) 1fr; grid-template-rows:auto 1fr; column-gap:clamp(18px,3vw,36px);
  align-items:center; padding:clamp(20px,2.6vw,30px) 0; border-top:1px solid rgba(20,18,12,.16); box-shadow:none}
:root .cards--soulies .card:last-child{border-bottom:1px solid rgba(20,18,12,.16)}
:root .cards--soulies .card > picture{grid-column:1; grid-row:1 / span 2; display:block}
:root .cards--soulies .card__soulie{width:100%; height:clamp(84px,10vw,120px); object-fit:contain; margin:0}
:root .cards--soulies .card h3{grid-column:2; align-self:end; margin:0 0 .3rem}
:root .cards--soulies .card p{grid-column:2; align-self:start; max-width:52ch}
:root[data-theme="dark"] .cards--soulies .card,
:root[data-theme="dark"] .cards--soulies .card:last-child{border-color:rgba(255,255,255,.14)}

/* 3b + 4. Centred row: no card fill, icon centred in a palette disc above the centred title and text */
:root .cards.cards--row{gap:clamp(24px,4vw,56px)}
:root .cards--row .card{background:transparent !important; transform:none; text-align:center; padding:0 clamp(4px,1vw,12px); box-shadow:none}
:root .cards--row .card__ico{display:grid; place-items:center; width:88px; height:88px; padding:20px; margin:0 auto 1.1rem; border-radius:50%; background:var(--lav-2)}
:root .cards--row .card--mint .card__ico{background:#c7ecd8}
:root .cards--row .card--sky .card__ico{background:#cdeaf2}
:root .cards--row .card--lav .card__ico{background:var(--lav-2)}
:root .cards--row .card p{max-width:30ch; margin-inline:auto}
:root[data-theme="dark"] .cards--row .card--mint .card__ico{background:#10271d}
:root[data-theme="dark"] .cards--row .card--sky .card__ico{background:#0f2530}
:root[data-theme="dark"] .cards--row .card--lav .card__ico{background:#1f1c33}

/* 3c. "Everconnected for your community": a directory list, palette kept as a disc per row */
:root .aud-grid.aud-grid--list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,56px)}
:root .aud-grid--list li{border-top:1px solid rgba(20,18,12,.16)}
:root .aud-grid--list a.card{background:transparent !important; border-radius:0; position:relative;
  display:grid; grid-template-columns:1fr auto; column-gap:16px; padding:clamp(16px,2vw,22px) 0 clamp(16px,2vw,22px) 58px}
:root .aud-grid--list a.card::before{content:""; position:absolute; left:0; top:clamp(16px,2vw,22px); width:40px; height:40px; border-radius:50%; background:#c7ecd8}
:root .aud-grid--list a.card--lav::before{background:var(--lav-2)}
:root .aud-grid--list a.card--sky::before{background:#cdeaf2}
:root .aud-grid--list a.card--green::before{background:#bdead2}
:root .aud-grid--list a.card:hover{transform:none}
:root .aud-grid--list a.card:hover h3{text-decoration:underline; text-underline-offset:4px}
:root .aud-grid--list h3{grid-column:1; font-size:clamp(1.12rem,1rem + .4vw,1.3rem); margin:.35rem 0 .2rem}
:root .aud-grid--list p{grid-column:1; margin:0}
:root .aud-grid--list .aud-go{grid-column:2; grid-row:1 / span 2; align-self:center; margin:0; font-size:1.1rem}
:root[data-theme="dark"] .aud-grid--list li{border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .aud-grid--list a.card::before{background:#10271d}
:root[data-theme="dark"] .aud-grid--list a.card--lav::before{background:#1f1c33}
:root[data-theme="dark"] .aud-grid--list a.card--sky::before{background:#0f2530}
@media (max-width:720px){:root .aud-grid.aud-grid--list{grid-template-columns:1fr}}

/* 3d. Numbered steps: an open row with a coloured top rule instead of filled cards */
:root .cards .step{background:transparent !important; border-radius:0; padding:clamp(16px,2vw,22px) 0 0; min-height:0; border-top:4px solid #7ee3bb}
:root .cards .step.card--lav{border-top-color:#a996ec}
:root .cards .step.card--sky{border-top-color:#7fd3e8}
:root .cards .step .step__n{font-size:1.5rem; letter-spacing:0; opacity:1; font-weight:800}

/* ----- 5 + 6. About: title, subtitle, body and illustrations on one left edge --------------- */
:root .ofx-col .center{text-align:left}
:root .ofx-col .lead.measure,
:root .ofx-col .prose{margin-left:0 !important; margin-right:auto !important}
:root .ofx-col .scene img{margin-inline:0}
:root .ofx-col .orb-frames{justify-content:flex-start}

/* ----- 7. Himalayan band: the single (unmirrored) photo shown whole at its own aspect ---- */
:root .mtn-band img{width:100%; height:auto; aspect-ratio:1878 / 569; object-fit:contain; object-position:center bottom}

/* ----- 8. Communities illustrations ------------------------------------- */
:root .pp-art.pp-art--wide{aspect-ratio:auto; max-width:760px !important; padding:clamp(18px,3vw,36px)}
:root .pp-art.pp-art--wide img{height:auto}
:root .pp-art picture{display:block; width:100%; height:100%}

/* ----- 9. Speech bubble: a rounded bubble with even padding and a tail of two dots -------- */
:root .bubble{width:min(560px,100%); aspect-ratio:auto; display:block; border-radius:44px;
  padding:clamp(26px,4vw,40px) clamp(24px,5vw,52px); margin:clamp(20px,4vw,40px) auto clamp(56px,7vw,72px); text-align:center}
:root .bubble p{font-size:clamp(1.05rem,1rem + .35vw,1.25rem); line-height:1.55}
:root .bubble::before{width:26px; height:26px; right:auto; top:auto; left:16%; bottom:-38px}
:root .bubble::after{width:14px; height:14px; right:auto; top:auto; left:11%; bottom:-62px}

/* ----- 10. News: hero, Latest grid and All posts on the one container --------- */
:root .ltw-news__head{flex-wrap:wrap}
/* 1 + 8. an illustration in the first column starts on the container edge */
:root .split > .pp-art:first-child{justify-self:start}