/* ===========================================
   mindful health — site.css
   shared look for every page: header, menu, footer,
   buttons, motion, and the editorial restyle of older pages
   =========================================== */
.site{
  --ink-light: #6e6862;
  --sand: #f0ede6;
  --sand-deep: #e7e2d8;
  --line: rgba(26,26,26,.14);
  --serif: 'Playfair Display', Georgia, serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  background: var(--cream);
}
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.h-center{ text-align:center; margin-top:3rem; }
.fade-up{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s); }
.fade-up.in{ opacity:1; transform:none; }
.h-eyebrow{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-light); margin:0 0 1.25rem; }
.h-btn{ display:inline-block; font-family: var(--serif); font-style: italic; font-size:1.05rem; text-decoration:none; padding:1rem 2.1rem; border:1px solid transparent; cursor:pointer; transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.h-btn--dark{ background: var(--ink); color: var(--cream); }
.h-btn--dark:hover{ background:#3a3632; transform: translateY(-2px); }
.h-btn--line{ border-color: var(--line); color: var(--ink); background: transparent; }
.h-btn--line:hover{ background: var(--sand); }
.h-btn--light{ background: var(--cream); color: var(--ink); }
.h-btn--light:hover{ background: #fff; transform: translateY(-2px); }
.h-link{ font-family: var(--serif); font-style: italic; font-size:1.1rem; color: var(--ink); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:.2rem; transition: border-color .3s; }
.h-link:hover{ border-color: var(--ink); }
.h-header{ position: sticky; top:0; z-index:50; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; padding: 1.6rem clamp(1.25rem,4vw,3.5rem); background: rgba(255,253,246,0); transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s; }
.h-header.scrolled{ padding-top:.9rem; padding-bottom:.9rem; background: rgba(255,253,246,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.h-logo{ font-family: var(--serif); font-size: clamp(1.4rem,2.2vw,1.85rem); color: var(--ink); text-decoration:none; letter-spacing:.01em; }
.h-nav{ display:flex; gap: clamp(1rem,2vw,2rem); }
.h-nav a{ font-family: var(--serif); font-style: italic; font-size:1.08rem; color: var(--ink); text-decoration:none; position:relative; }
.h-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.h-nav a:hover::after{ transform: scaleX(1); transform-origin: left; }
.h-social{ display:flex; justify-content:flex-end; gap:1rem; }
.h-social a{ color: var(--ink); opacity:.75; transition: opacity .3s; display:flex; }
.h-social a:hover{ opacity:1; }
.h-burger{ display:none; background:none; border:0; width:34px; height:34px; position:relative; cursor:pointer; justify-self:end; }
.h-burger span{ position:absolute; left:6px; right:6px; height:1px; background: var(--ink); transition: transform .4s var(--ease), top .4s var(--ease); }
.h-burger span:first-child{ top:13px; } .h-burger span:last-child{ top:20px; }
.h-burger[aria-expanded="true"] span:first-child{ top:17px; transform: rotate(45deg); }
.h-burger[aria-expanded="true"] span:last-child{ top:17px; transform: rotate(-45deg); }
.h-menu{ position:fixed; inset:0; z-index:40; background: var(--sand); display:grid; place-items:center; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .5s var(--ease), visibility 0s .5s; }
.h-menu.open{ opacity:1; visibility:visible; pointer-events:auto; transition: opacity .5s var(--ease); }
.h-menu nav{ display:flex; flex-direction:column; align-items:center; gap:1.3rem; }
.h-menu a{ font-family: var(--serif); font-style: italic; font-size:2.2rem; color: var(--ink); text-decoration:none; opacity:0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.h-menu.open a{ opacity:1; transform:none; }
.h-menu.open a:nth-child(2){ transition-delay:.05s } .h-menu.open a:nth-child(3){ transition-delay:.1s } .h-menu.open a:nth-child(4){ transition-delay:.15s } .h-menu.open a:nth-child(5){ transition-delay:.2s } .h-menu.open a:nth-child(6){ transition-delay:.25s }
@keyframes hScroll{ to{ top:44px; } }
.h-footer{ border-top:0; font-size:inherit; padding: clamp(4rem,8vw,6rem) 1.25rem 2.5rem; text-align:center; }
.h-footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap: .6rem 1.8rem; }
.h-footer-nav a{ font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem,2.4vw,2rem); color: var(--ink); text-decoration:none; transition: opacity .3s; }
.h-footer-nav a:hover{ opacity:.55; }
.h-footer-small{ margin-top: 3rem; font-size:.8rem; color: var(--ink-light); }
.h-footer-small a{ color: inherit; }
.h-skip{ position:absolute; left:1rem; top:-60px; z-index:100; background: var(--ink); color: var(--cream); padding:.7rem 1rem; text-decoration:none; transition: top .2s; }
.h-skip:focus{ top:1rem; }
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible, .h-slider:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.h-menu-social{ position:absolute; bottom:2.5rem; left:0; right:0; text-align:center; font-size:.9rem; color: var(--ink-light); }
.h-menu-social a{ color: var(--ink); }
.h-footer-note{ max-width: 520px; margin: 2.5rem auto 0; font-size:.8rem; line-height:1.6; color: var(--ink-light); }
.h-footer-small{ margin-top: 1rem !important; }
.site #cookie-banner{ left:auto; right:1rem; bottom:1rem; max-width: 380px; background: var(--cream); color: var(--ink); border:1px solid var(--line); box-shadow: 0 10px 40px rgba(26,22,18,.12); padding: 1rem 1.1rem; gap: .8rem; font-size:.8rem; }
.site #cookie-banner p{ color: var(--ink-mid); min-width:0; flex-basis:100%; }
.site #cb-policy{ color: var(--ink-light); border-color: var(--line); }
.site .cb-btn{ background: var(--ink); color: var(--cream); border-radius:0; }
@media (max-width: 900px){
  .h-header{ grid-template-columns: 1fr auto; }
  .h-nav, .h-social{ display:none; }
  .h-burger{ display:block; }
}
@media (max-width: 560px){
  .site #cookie-banner{ left: .75rem; right: .75rem; bottom: .75rem; max-width:none; }
}
.h-nav a.active::after{ transform: scaleX(1); }
.h-menu a.active{ text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- shared motion: masks, word band ---- */
.h-mask{ overflow:hidden; margin:0; }
.h-mask img{ width:100%; height:100%; object-fit:cover; transform: scale(1.12); will-change: transform; }
.reveal-mask{ clip-path: inset(12% 12% 12% 12%); transition: clip-path 1.4s var(--ease); }
.reveal-mask.in{ clip-path: inset(0 0 0 0); }
/* ---- marquee ---- */
.h-marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding: 1.1rem 0; background: var(--cream); }
.h-marquee-track{ display:flex; width:max-content; gap: 2.2rem; align-items:center; font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 5rem); line-height:1; color: var(--ink); will-change: transform; }
.h-marquee-track i{ font-style:normal; color: var(--ink-light); font-size:.6em; }

/* ===========================================
   older pages in the new style
   =========================================== */
.site:not(.home) main{ display:block; }
.site .hero{ padding: clamp(2.5rem,6vw,5rem) 1.25rem clamp(2rem,4vw,3rem); text-align:center; }
.site .hero-eyebrow, .site .tag{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-light); }
.site .hero h1, .site .title, .site .blog-heading h1, .site .status-page h2{ font-family: var(--serif); font-weight:400; font-size: clamp(2.4rem,5.5vw,4rem); line-height:1.12; letter-spacing:-.01em; }
.site .hero h1 em, .site .title em{ font-style: italic; }
.site .hero-sub{ font-size:1.05rem; line-height:1.8; color: var(--ink-mid); max-width: 600px; margin-left:auto; margin-right:auto; }

/* buttons: square, italic serif */
.site .btn{ border-radius:0; font-family: var(--serif); font-style: italic; font-size:1.02rem; padding: .95rem 2rem; letter-spacing:0; transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.site .btn-primary{ background: var(--ink); color: var(--cream); }
.site .btn-primary:hover{ background:#3a3632; }
.site .btn-outline{ border-color: var(--line); background: transparent; }
.site .btn-outline:hover{ background: var(--sand); }

/* cards and boxes: flat, sand */
.site .card, .site .tool-card, .site .tool-box, .site .prevention-quote-block{ border-radius:0; box-shadow:none; }
.site .card, .site .tool-card{ background: var(--sand); border:0; }
.site .card-title{ font-family: var(--serif); font-weight:400; }

/* blog overview */
.site .blog-main{ max-width: 1240px; padding: 0 clamp(1.25rem,4vw,3.5rem) 6rem; }
.site .blog-heading{ padding: clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3.5rem); }
.site .blog-heading p{ color: var(--ink-mid); font-size:1.02rem; line-height:1.7; max-width: 560px; margin: 1rem auto 0; }
.site .blog-posts{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 3.5rem 2rem; }
.site .blog-post-image-wrap{ background: var(--sand); border-radius:0; aspect-ratio: 4/3; display:grid; place-items:center; overflow:hidden; margin-bottom: 1.2rem; }
.site .blog-post-image-wrap img{ width: 84%; height:auto; border-radius:0; transition: transform 1s var(--ease); }
.site .blog-post:hover .blog-post-image-wrap img{ transform: scale(1.05); }
.site .blog-post-tag{ font-size:.7rem; letter-spacing:.18em; color: var(--ink-light); margin-bottom:.6rem; }
.site .blog-post h3{ font-size: 1.5rem; line-height:1.28; margin-bottom:.5rem; text-wrap: balance; transition: font-style .2s; }
.site .blog-post:hover h3{ font-style: italic; }
.site .blog-date{ color: var(--ink-light); }
.site .blog-excerpt{ color: var(--ink-mid); line-height:1.7; }
.site .read-more{ font-family: var(--serif); font-style: italic; font-size:1.02rem; color: var(--ink); border-bottom:1px solid var(--line); }

/* newsletter forms: underline field */
.site .brevo-form{ gap: 1rem; align-items:flex-end; }
.site .brevo-form input[type="email"]{ border:0; border-bottom:1px solid var(--ink); border-radius:0; background: transparent; padding: .8rem .2rem; }
.site .brevo-form button{ border-radius:0; font-family: var(--serif); font-style: italic; font-size:1.02rem; padding: .95rem 1.8rem; }
.site .newsletter, .site .course-inner{ border-radius:0; }

/* contact form: underline fields */
.site .contact-form input, .site .contact-form textarea{ border:0; border-bottom:1px solid var(--line); border-radius:0; background: transparent; padding: .8rem .1rem; transition: border-color .3s; }
.site .contact-form input:focus, .site .contact-form textarea:focus{ border-bottom-color: var(--ink); }
.site .contact-section h2{ font-size: 1.9rem; }

/* status pages (thank you, check email, errors) */
.site .status-page{ padding: clamp(4rem,10vw,8rem) 1.25rem; }
.site .status-page .back-link{ font-family: var(--serif); font-style: italic; font-size:1.05rem; color: var(--ink); border-bottom:1px solid var(--line); }

/* article pages */
.site .article-hero h1{ letter-spacing:-.01em; }
.site .facts-box, .site .internal-link-box, .site .article-image img{ border-radius:0 !important; }
.site .facts-box, .site .internal-link-box{ background: var(--sand) !important; }
.site .internal-link-box:hover{ background: var(--sand-deep) !important; }
.site .article-back a{ font-family: var(--serif); font-style: italic; font-size:1.05rem; color: var(--ink); }
.site .article-closing p{ font-style: italic; }

/* hide the old header/footer styles' leftovers */
.site footer.h-footer{ border-top:0; }

/* ===========================================
   editorial page components (about, blog, tools, contact, articles)
   =========================================== */
.p-num{ font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-light); }
.p-title{ font-family: var(--serif); font-weight:400; font-size: clamp(2rem,4.2vw,3.4rem); line-height:1.12; margin: 0 0 1.2rem; text-wrap: balance; }
.p-title em, .site h2 em{ font-style: italic; }
.p-lead{ font-size: 1.08rem; line-height: 1.8; color: var(--ink-mid); max-width: 560px; margin: 0 auto; }
.p-meta{ font-size: .82rem; color: var(--ink-light); margin: .4rem 0 .8rem; }

/* hero with oversized words */
.p-hero{ position: relative; padding: clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,3.5rem) clamp(3rem,7vw,5.5rem); overflow: clip; text-align:center; }
.p-hero-words{ display:flex; flex-direction:column; align-items:flex-start; line-height:.88; }
.p-hero-words--center{ align-items:center; }
.p-big{ display:block; font-family: var(--serif); font-size: clamp(4.5rem, 16vw, 14rem); letter-spacing:-.02em; color: var(--ink); white-space: nowrap; will-change: transform; }
.p-big--italic{ font-style: italic; }
.p-hero-text{ position: relative; z-index: 2; max-width: 720px; margin: clamp(1.5rem,3vw,2.5rem) auto 0; }
.p-hero--about{ display:grid; grid-template-columns: 1fr minmax(240px, 32vw); grid-template-rows: auto auto; gap: 0 clamp(1.5rem,4vw,4rem); text-align:left; align-items:end; }
.p-hero--about .p-hero-words{ grid-column: 1 / -1; grid-row: 1; z-index: 3; pointer-events:none; }
.p-hero--about .p-hero-words .p-big--italic{ align-self: flex-end; margin-right: clamp(0rem, 8vw, 10rem); }
.p-hero--about .p-hero-photo{ grid-column: 2; grid-row: 1 / 3; aspect-ratio: 4/5; margin-top: clamp(4rem,10vw,9rem); z-index: 1; }
.p-hero--about .p-hero-text{ grid-column: 1; grid-row: 2; margin: 0; padding-bottom: 1rem; }
.p-hero--about .p-lead{ margin: 0; }

/* split section: label column + body */
.p-split{ display:grid; grid-template-columns: minmax(160px, 1fr) 2.2fr; gap: clamp(1.5rem,5vw,5rem); max-width: 1180px; margin: 0 auto; padding: clamp(3.5rem,8vw,6rem) clamp(1.25rem,4vw,3.5rem); border-top: 1px solid var(--line); }
.p-split-label{ position: sticky; top: 110px; align-self: start; }
.p-split-label .p-num{ display:block; font-size: 3.4rem; line-height: 1; color: var(--ink); margin-bottom: .6rem; }
.p-split-body{ max-width: 680px; }
.p-split-body p{ font-size: 1.04rem; line-height: 1.85; color: var(--ink-mid); margin: 0 0 1.3rem; }
.p-intro{ font-family: var(--serif); font-size: clamp(1.5rem,2.6vw,2.1rem) !important; line-height: 1.35 !important; color: var(--ink) !important; margin-bottom: 1.8rem !important; text-wrap: balance; }
.p-list{ list-style: none; padding:0; margin: 0; border-top: 1px solid var(--line); }
.p-list li{ padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--ink); transition: padding .4s var(--ease); }
.p-list li:hover{ padding-left: .5rem; }

/* principles grid */
.p-grid-section{ max-width: 1240px; margin: 0 auto; padding: clamp(3.5rem,8vw,6rem) clamp(1.25rem,4vw,3.5rem); }
.p-head{ text-align:center; margin-bottom: 3rem; }
.p-head h2, .p-story-head h2, .p-cta h2{ font-family: var(--serif); font-weight:400; font-size: clamp(2rem,4vw,3.1rem); line-height:1.15; margin:0; text-wrap: balance; }
.p-principles{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.p-principles li{ padding: 2rem 1.6rem 2.2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .4s var(--ease); }
.p-principles li:nth-child(3n){ border-right:0; }
.p-principles li:hover{ background: var(--sand); }
.p-principles .p-num{ display:block; margin-bottom: 2rem; }
.p-principles h3{ font-family: var(--serif); font-weight:400; font-size: 1.6rem; margin: 0 0 .6rem; transition: transform .45s var(--ease); }
.p-principles li:hover h3{ transform: translateX(6px); font-style: italic; }
.p-principles p{ margin:0; color: var(--ink-mid); line-height: 1.7; font-size: .97rem; }

/* big stat */
.p-stat{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); align-items:center; max-width: 1180px; margin: 0 auto; padding: clamp(3rem,7vw,5.5rem) clamp(1.25rem,4vw,3.5rem); }
.p-stat-figure{ display:flex; align-items: baseline; gap: 1rem; justify-content:flex-end; font-family: var(--serif); line-height: .9; }
.p-stat-num{ font-size: clamp(6rem, 16vw, 12rem); letter-spacing: -.03em; }
.p-stat-unit{ font-size: clamp(2rem, 4vw, 3.4rem); }
.p-stat-text p:not(.h-eyebrow){ font-size: 1.04rem; line-height: 1.85; color: var(--ink-mid); max-width: 460px; }

/* full-width quote */
.p-quote{ background: var(--sand); padding: clamp(4rem,10vw,8rem) clamp(1.25rem,6vw,6rem); text-align:center; }
.p-quote blockquote{ font-family: var(--serif); font-size: clamp(1.7rem,3.6vw,3rem); line-height: 1.3; max-width: 1000px; margin: 0 auto; text-wrap: balance; }

/* long-form story */
.p-story{ padding: clamp(4rem,9vw,7rem) clamp(1.25rem,4vw,3.5rem); }
.p-story-head{ text-align:center; margin-bottom: 3rem; }
.p-story-body{ max-width: 660px; margin: 0 auto; }
.p-story-body p{ font-size: 1.08rem; line-height: 1.9; color: #2d2d2d; margin: 0 0 1.5rem; }
.p-dropcap::first-letter{ float:left; font-family: var(--serif); font-size: 5.2rem; line-height: .82; padding: .35rem .7rem 0 0; color: var(--ink); }
.p-story-photo{ aspect-ratio: 16/10; margin: 3rem -6vw; }
@media (min-width: 900px){ .p-story-photo{ margin: 3.5rem -14rem; } }
.p-sign{ font-family: var(--serif); font-style: italic; font-size: 1.25rem !important; color: var(--ink) !important; margin-top: 2rem !important; }

/* two columns */
.p-two{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); max-width: 1180px; margin: 0 auto; padding: clamp(3.5rem,8vw,6rem) clamp(1.25rem,4vw,3.5rem); border-top: 1px solid var(--line); }
.p-two p:not(.h-eyebrow){ line-height: 1.85; color: var(--ink-mid); }

/* closing call to action */
.p-cta{ text-align:center; padding: clamp(4rem,9vw,7rem) 1.25rem; border-top: 1px solid var(--line); }
.p-cta-buttons{ display:flex; gap: .9rem; justify-content:center; flex-wrap: wrap; margin-top: 2rem; }

/* blog */
.p-hero--blog, .p-hero--tools{ padding-bottom: clamp(2rem,5vw,3.5rem); }
.p-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap: .5rem; padding: 0 1.25rem 3rem; }
.p-filter button{ font-family: var(--serif); font-style: italic; font-size: 1rem; background: transparent; color: var(--ink); border: 1px solid var(--line); padding: .55rem 1.2rem; cursor: pointer; transition: background .3s, color .3s; }
.p-filter button:hover{ background: var(--sand); }
.p-filter button.is-active{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
.p-featured{ display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.25rem,4vw,3.5rem) clamp(3.5rem,7vw,5.5rem); }
.p-featured-img{ display:grid; place-items:center; aspect-ratio: 4/3; background: var(--sand); }
.p-featured-img img{ width: 80% !important; height:auto !important; object-fit: contain !important; transition: transform 1.2s var(--ease) !important; }
.p-featured-img:hover img{ transform: scale(1.04) !important; }
.p-featured h2{ font-family: var(--serif); font-weight:400; font-size: clamp(2rem,3.6vw,3rem); line-height:1.15; margin: 0; text-wrap: balance; }
.p-featured h2 a, .p-card h3 a{ color: inherit; text-decoration: none; }
.p-featured h2 a:hover, .p-card h3 a:hover{ font-style: italic; }
.p-featured p:not(.h-eyebrow):not(.p-meta){ color: var(--ink-mid); line-height: 1.8; margin: 0 0 1.6rem; max-width: 460px; }
.p-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; max-width: 1240px; margin: 0 auto; padding: clamp(3rem,6vw,4.5rem) clamp(1.25rem,4vw,3.5rem) 1rem; border-top: 1px solid var(--line); }
.p-card-img{ display:grid; place-items:center; aspect-ratio: 4/3; background: var(--sand); overflow:hidden; margin-bottom: 1.1rem; }
.p-card-img img{ width: 82%; transition: transform 1s var(--ease); }
.p-card:hover .p-card-img img{ transform: scale(1.05); }
.p-card-tag{ font-size:.7rem; letter-spacing:.18em; text-transform: uppercase; color: var(--ink-light); margin: 0 0 .5rem; }
.p-card h3{ font-family: var(--serif); font-weight:400; font-size: 1.45rem; line-height:1.28; margin:0; text-wrap: balance; }
.p-card-excerpt{ color: var(--ink-mid); line-height: 1.7; font-size: .97rem; margin: 0; }
.p-empty{ text-align:center; color: var(--ink-light); padding: 2rem 1.25rem; }
[data-topic].is-hidden{ display:none !important; }

/* tools */
.p-steps-nav{ position: sticky; top: 74px; z-index: 20; display:flex; justify-content:center; gap: clamp(.5rem,3vw,2.5rem); padding: 1rem 1.25rem; margin-bottom: 2.5rem; background: rgba(255,253,246,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.p-steps-nav a{ font-family: var(--serif); font-size: clamp(1.1rem,2vw,1.5rem); color: var(--ink); text-decoration:none; display:flex; align-items: baseline; gap: .45rem; transition: opacity .3s; }
.p-steps-nav a:hover{ opacity: .55; }
.p-steps-nav .p-num{ font-size: .8rem; }
.p-tools .tool-card{ border-radius: 0 !important; scroll-margin-top: 150px; transition: background .4s var(--ease); }
.p-tools .tool-card h2{ font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem,2.6vw,2.1rem); }
.p-tools .tool-card-tag{ font-family: var(--serif); font-style: italic; letter-spacing: 0; text-transform: none; font-size: 1rem; color: var(--ink-light); }
.p-tools .mood-btn, .p-tools .plan-field input, .p-tools .plan-field select, .p-tools textarea, .p-tools input[type="text"]{ border-radius: 0 !important; }

/* contact */
.p-contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,6vw,6rem); max-width: 1240px; margin: 0 auto; padding: clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,3.5rem) clamp(4rem,8vw,6rem); align-items: start; }
.p-hero-words--stack{ margin-bottom: 1.5rem; }
.p-hero-words--stack .p-big{ font-size: clamp(4rem, 11vw, 10rem); }
.p-contact-intro .p-lead{ margin: 0 0 1.5rem; }
.p-contact-links{ list-style:none; padding:0; margin: 0 0 2.5rem; border-top: 1px solid var(--line); max-width: 440px; }
.p-contact-links li{ border-bottom: 1px solid var(--line); }
.p-contact-links a{ display:flex; justify-content: space-between; padding: .95rem 0; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink); text-decoration:none; transition: padding .4s var(--ease); }
.p-contact-links a:hover{ padding-left: .5rem; }
.p-contact-links span{ font-family: 'Inter', sans-serif; font-style: normal; font-size: .85rem; color: var(--ink-light); align-self: center; }
.p-contact-photo{ aspect-ratio: 4/3; max-width: 440px; }
.p-contact-form{ background: var(--sand); padding: clamp(1.8rem,4vw,3rem); margin-top: clamp(0rem, 6vw, 5rem); }
.p-contact-form .contact-form{ display:flex; flex-direction: column; gap: 1.3rem; }
.p-contact-form .field span{ display:block; font-size:.72rem; letter-spacing:.18em; text-transform: uppercase; color: var(--ink-light); margin-bottom: .35rem; }
.p-contact-form .h-btn{ align-self: flex-start; border:0; }

/* articles */
.site .p-article-hero{ max-width: 900px; padding-top: clamp(2.5rem,6vw,4.5rem); }
.site .p-article-hero h1{ font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; margin-bottom: 1.5rem; }
.site .article-tag{ letter-spacing: .2em; color: var(--ink-light); }
.site .article-hero .article-intro{ font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem,2vw,1.4rem); color: var(--ink-mid); line-height: 1.55; }
.site .article-body > p:first-of-type::first-letter{ float:left; font-family: var(--serif); font-size: 4.6rem; line-height: .82; padding: .3rem .6rem 0 0; color: var(--ink); }
.site .article-body h2{ font-size: clamp(1.6rem, 2.6vw, 2rem); }
.site .pull-quote{ border-left: 0; text-align: center; margin: 3.5rem -2rem; padding: 2.5rem 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.site .pull-quote p{ font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1.35; color: var(--ink); text-wrap: balance; }
.p-next{ display:grid; grid-template-columns: 1fr auto; gap: .5rem 2rem; align-items: end; max-width: 1000px; margin: 2rem auto 3rem; padding: clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,4vw,3rem); background: var(--sand); color: var(--ink); text-decoration: none; transition: background .4s var(--ease); }
.p-next:hover{ background: var(--sand-deep); }
.p-next .h-eyebrow{ grid-column: 1 / -1; margin: 0; }
.p-next-title{ font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.15; text-wrap: balance; }
.p-next:hover .p-next-title{ font-style: italic; }
.p-next-arrow{ font-size: 2rem; transition: transform .45s var(--ease); }
.p-next:hover .p-next-arrow{ transform: translateX(8px); }

/* responsive */
@media (max-width: 900px){
  .p-hero--about{ grid-template-columns: 1fr; }
  .p-hero--about .p-hero-photo{ grid-column: 1; grid-row: 2; margin: 1.5rem 0 0; width: 70%; justify-self: end; }
  .p-hero--about .p-hero-text{ grid-row: 3; margin-top: 2rem; }
  .p-split{ grid-template-columns: 1fr; }
  .p-split-label{ position: static; }
  .p-principles{ grid-template-columns: 1fr 1fr; }
  .p-principles li:nth-child(3n){ border-right: 1px solid var(--line); }
  .p-principles li:nth-child(2n){ border-right: 0; }
  .p-stat, .p-two, .p-featured, .p-contact-grid{ grid-template-columns: 1fr; }
  .p-stat-figure{ justify-content: flex-start; }
  .p-cards{ grid-template-columns: 1fr 1fr; }
  .p-contact-form{ margin-top: 0; }
}
@media (max-width: 560px){
  .p-big{ font-size: 22vw; }
  .p-principles, .p-cards{ grid-template-columns: 1fr; }
  .p-principles li{ border-right: 0 !important; padding: 1.6rem 0; }
  .p-steps-nav{ top: 62px; justify-content: space-between; }
  .p-steps-nav a{ flex-direction: column; align-items: center; gap: 0; font-size: 1.05rem; }
  .site .pull-quote{ margin: 2.5rem 0; }
  .p-next{ grid-template-columns: 1fr; }
}
.site:not(.home) main{ overflow-x: clip; }

/* tools: answer chips size to their words, never cut off */
.p-tools .mood-grid{ gap: .5rem; }
.p-tools .mood-btn{ flex: 0 1 auto; min-width: 0; white-space: nowrap; padding: .7rem 1.15rem; font-size: .9rem; line-height: 1.3; color: var(--ink); background: var(--cream); border: 1px solid var(--line); transition: background .25s, color .25s, border-color .25s; }
.p-tools .mood-btn:hover{ background: #fff; border-color: rgba(26,26,26,.3); }
.p-tools .mood-btn.selected{ background: var(--ink); color: var(--cream); border-color: var(--ink); }