.page-hero{
  background:var(--nav); color:#fff;
  padding:56px 0 64px; position:relative;
}

.page-hero .eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-weight:600; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--nav-muted);
  margin-top:32px; margin-bottom:18px;
}
.page-hero .eyebrow::before{ content:none; }
.page-hero h1{
  color:#fff; font-weight:600;
  font-size:clamp(2.25rem,4vw,3rem); line-height:1.05;
  letter-spacing:-.025em; max-width:22ch;
}
.page-hero .sub{
  color:#cfd3d8; font-weight:300; font-size:clamp(1rem,1.3vw,1.125rem);
  margin-top:18px; line-height:1.55; max-width:54ch;
}

/* CTA band (dark, "Have a question?" pattern from homepage) */
.cta-band{
  background:var(--nav); color:#fff;
  padding:96px 0; text-align:center;
}
.cta-band .eyebrow{
  color:var(--nav-muted); margin-bottom:18px; display:block;
  font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.cta-band h2{
  color:#fff; font-weight:400; font-size:clamp(1.75rem,2.6vw,2.25rem);
  line-height:1.2; letter-spacing:-.015em; max-width:18ch; margin:0 auto;
}
.cta-band .sub{
  color:#cfd3d8; font-weight:300; margin-top:18px; max-width:46ch;
  margin-left:auto; margin-right:auto; font-size:1rem; line-height:1.55;
}
.cta-band .actions{
  margin-top:32px; display:flex; gap:24px;
  justify-content:center; align-items:center; flex-wrap:wrap;
}
.cta-band .tlink{color:#fff}
.cta-band .tlink:hover{text-decoration-color:#fff}

/* Section band (centred title row) */
.section-band{margin-bottom:40px; text-align:center}
.section-band h2{
  font-weight:400; font-size:clamp(1.75rem,2.6vw,2.25rem);
  line-height:1.2; letter-spacing:-.015em; color:var(--heading);
}
.section-band .sub{
  color:var(--muted); font-weight:300; margin-top:14px;
  max-width:56ch; margin-left:auto; margin-right:auto; font-size:1rem;
}
.section-band--left{text-align:left}
.section-band--left .sub{margin-left:0; margin-right:0}

/* Bands */
.band{padding:96px 0}
.band--surface{background:var(--surface)}
.band--alt{background:var(--section-alt)}

/* Prose container */
.prose{max-width:720px; margin:0 auto; padding:88px 40px}
.prose p{font-weight:300; font-size:1.0625rem; line-height:1.75; color:var(--body); margin-bottom:20px}
.prose p:last-child{margin-bottom:0}
.prose p.lead{
  font-size:1.25rem; font-weight:300; line-height:1.55; color:var(--heading);
  margin-bottom:32px; text-wrap:balance;
}
.prose h2{
  font-weight:400; font-size:1.75rem; line-height:1.25; letter-spacing:-.015em;
  color:var(--heading); margin-top:56px; margin-bottom:18px;
}
.prose h3{
  font-weight:600; font-size:1.125rem; line-height:1.35;
  color:var(--heading); margin-top:36px; margin-bottom:12px;
}
.prose a{color:var(--heading); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border)}
.prose a:hover{text-decoration-color:var(--heading)}
.prose ul, .prose ol{padding-left:1.4em; margin-bottom:20px}
.prose ul li, .prose ol li{font-weight:300; font-size:1rem; line-height:1.7; color:var(--body); margin-bottom:6px}
.prose blockquote{
  margin:32px 0; padding:20px 24px;
  border-left:2px solid var(--sauna); background:var(--surface);
  font-style:italic; color:var(--heading); font-size:1.0625rem; line-height:1.6;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
}
.prose figure{margin:32px 0}
.prose figure img{border-radius:var(--r-lg); width:100%}
.prose figcaption{font-size:.82rem; color:var(--muted); margin-top:10px; text-align:center; font-style:italic}
.prose table{width:100%; border-collapse:collapse; margin:24px 0; font-size:.92rem}
.prose th{text-align:left; padding:12px 14px; background:var(--surface); color:var(--heading); font-weight:600; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--border)}
.prose td{padding:12px 14px; border-bottom:1px solid var(--hairline); color:var(--body)}
.prose .callout{
  margin:32px 0; padding:22px 26px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--hairline);
  display:flex; gap:14px; align-items:flex-start;
}
.prose .callout svg{width:20px; height:20px; flex:none; color:var(--heading); margin-top:2px; stroke-width:1.6; fill:none; stroke:currentColor}
.prose .callout .text{font-size:.95rem; line-height:1.65; color:var(--body)}
.prose .callout b{color:var(--heading); font-weight:600}

/* FAQ accordion (NEW COMPONENT — per brief) */
.faq-acc{border-top:1px solid var(--hairline)}
.faq-acc .faq{border-bottom:1px solid var(--hairline)}
.faq-acc .faq > summary{
  list-style:none; cursor:pointer; padding:22px 8px 22px 0;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:24px; font-family:var(--f); font-weight:500; font-size:1rem;
  color:var(--heading); line-height:1.4; transition:color .12s;
}
.faq-acc .faq > summary::-webkit-details-marker{display:none}
.faq-acc .faq > summary:hover{color:var(--sauna-text)}
.faq-acc .faq > summary::after{
  content:""; width:14px; height:14px; flex:none; margin-top:4px;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .25s ease;
}
.faq-acc .faq[open] > summary::after{transform:rotate(180deg)}
.faq-acc .faq[open] > summary{color:var(--heading)}
.faq-acc .faq > .answer{
  padding:0 0 24px 0; color:var(--body); font-size:.95rem;
  line-height:1.7; max-width:68ch; font-weight:300;
}
.faq-acc .faq > .answer p + p{margin-top:14px}
.faq-acc .faq > .answer a{color:var(--heading); text-decoration:underline; text-underline-offset:3px}

/* Responsive */
@media (max-width:900px){
  .wrap{padding:0 22px}
  .page-hero{padding:36px 0 48px}
  .band{padding:64px 0}
  .cta-band{padding:64px 0}
  .prose{padding:64px 22px}
}

/* About v2 — richer, image-led */

/* Hero (full-bleed scrim — variant C) */
.about-hero-wrap{ padding:24px 40px 0; max-width:1440px; margin:0 auto; }
.about-hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:12px 12px 0 0; background:#111; color:#fff;
  padding:56px 56px 56px;
  min-height:440px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.about-hero .bg{ position:absolute; inset:0; z-index:-2; }
.about-hero .bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(26,31,36,.55) 0%,
    rgba(26,31,36,.4) 32%,
    rgba(26,31,36,.7) 78%,
    rgba(26,31,36,.85) 100%);
}
.about-hero .top{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; position:absolute; top:32px; left:56px; right:56px;
}

.about-hero .eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-bottom:18px;
}
.about-hero .eyebrow::before{ content:none; }
.about-hero h1{
  color:#fff; font-weight:600;
  font-size:clamp(2.5rem,5vw,4rem); line-height:1.02;
  letter-spacing:-.025em; max-width:18ch; text-wrap:balance;
}
.about-hero .sub{
  color:rgba(255,255,255,.85); font-weight:300;
  font-size:clamp(1rem,1.2vw,1.125rem); line-height:1.55;
  max-width:54ch; margin-top:20px;
}
.about-hero .accent-rule{ display:none; }

/* Stats strip */
.stat-band{
  background:var(--nav); color:#fff;
  margin:0 40px; max-width:calc(1440px - 80px);
  margin-left:auto; margin-right:auto;
  border-radius:0 0 12px 12px;
  padding:30px 56px;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.stat-band .s{display:flex; flex-direction:column; gap:6px; min-width:0}
.stat-band .s b{
  font-weight:600; font-size:1.625rem; color:#fff;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.stat-band .s span{
  font-size:.72rem; color:var(--nav-muted);
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
}

/* Intro band (mission statement) — image left, body right */
.mission{padding:96px 0 96px}
.mission .wrap{max-width:var(--maxw)}
.mission .grid{
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:64px; align-items:start;
}
.mission .label{
  font-weight:600; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
  padding-top:14px; border-top:2px solid var(--heading);
  margin-bottom:24px;
}
.mission .left figure{
  border-radius:12px; overflow:hidden;
  aspect-ratio:4/5; background:#111; margin:0;
}
.mission .left figure img{width:100%; height:100%; object-fit:cover; display:block}

/* No underlines on card links */
.lane-card, .lane-card *,
.consult-card, .consult-card *{ text-decoration:none; }
.mission h2{
  font-weight:400; font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.15;
  letter-spacing:-.015em; color:var(--heading); text-wrap:balance;
  margin-bottom:24px;
}
.mission .body p{
  font-size:1.0625rem; font-weight:300; line-height:1.75;
  color:var(--body); margin-bottom:18px;
}
.mission .body p:last-child{margin-bottom:0}
.mission .body .thai{
  font-family:var(--f-th); color:var(--heading); font-weight:400;
}

/* Two-lane breakout (what we do) */
.lanes-band{padding:96px 0; background:var(--surface)}
.lane-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.lane-card{
  background:#fff; border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--hairline);
  transition:transform .2s, box-shadow .2s;
}
.lane-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-product); }
.lane-card .photo{aspect-ratio:16/10; overflow:hidden; position:relative; background:#222}
.lane-card .photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s}
.lane-card:hover .photo img{transform:scale(1.03)}
.lane-card .photo .tag{
  position:absolute; top:18px; left:18px;
  background:rgba(255,255,255,.95); color:var(--heading);
  font-size:.62rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 10px; border-radius:var(--r-sm);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lane-card[data-lane="sauna"] .photo .tag{background:var(--sauna); color:#fff}
.lane-card[data-lane="ice"] .photo .tag{background:var(--ice); color:#fff}
.lane-card .body{padding:28px 30px; display:flex; flex-direction:column; gap:14px}
.lane-card h3{
  font-family:var(--f); font-weight:600; font-size:1.25rem;
  color:var(--heading); letter-spacing:-.005em;
}
.lane-card p{font-size:.95rem; line-height:1.65; color:var(--body); font-weight:300}
.lane-card .lane-foot{
  display:flex; align-items:center; gap:18px; padding-top:18px;
  border-top:1px solid var(--hairline); margin-top:auto;
}
.lane-card .lane-foot .count{font-size:.78rem; color:var(--muted)}
.lane-card .lane-foot .count b{font-weight:600; color:var(--heading)}
.lane-card .lane-foot .more{
  margin-left:auto; font-size:.82rem; font-weight:600; color:var(--heading);
  text-decoration:none;
}
.lane-card .lane-foot .more::after{content:" →"; transition:transform .2s}
.lane-card:hover .lane-foot .more::after{display:inline-block; transform:translateX(3px)}

/* Process timeline (numbered) */
.process-band{padding:96px 0}
.process-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  position:relative;
}
.process-grid::before{
  content:""; position:absolute; top:24px; left:0; right:0;
  height:1px; background:var(--hairline); z-index:0;
}
.process-step{
  position:relative; padding:0 18px; z-index:1;
  display:flex; flex-direction:column; gap:14px;
}
.process-step .num-pill{
  width:48px; height:48px; border-radius:50%;
  background:#fff; border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.95rem; color:var(--heading);
  font-variant-numeric:tabular-nums;
}
.process-step h3{
  font-family:var(--f); font-weight:600; font-size:1.05rem;
  color:var(--heading); letter-spacing:-.005em; margin-top:8px;
}
.process-step .dur{font-size:.72rem; color:var(--muted); letter-spacing:.04em; margin-top:-6px}
.process-step p{font-size:.9rem; line-height:1.6; color:var(--body); font-weight:300}

/* Principles (3-up cards, replaces previous "why") */
.principles-band{padding:96px 0; background:var(--surface)}
.principles-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.principle{
  background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-xl); padding:32px 28px;
  display:flex; flex-direction:column; gap:16px;
}
.principle .ic{
  width:44px; height:44px; border-radius:10px;
  background:var(--surface); display:inline-flex;
  align-items:center; justify-content:center; color:var(--heading);
}
.principle .ic svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.principle h3{
  font-family:var(--f); font-weight:600; font-size:1.125rem;
  color:var(--heading); letter-spacing:-.005em; line-height:1.3;
}
.principle p{font-weight:300; font-size:.92rem; line-height:1.65; color:var(--body)}
.principle .meta{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--hairline);
  font-size:.74rem; color:var(--muted); letter-spacing:.04em;
}
.principle .meta b{color:var(--heading); font-weight:600}

/* Location with imagery */
.location-band{padding:96px 0}
.location-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch;
}
.location-grid .copy h2{
  font-weight:400; font-size:clamp(1.75rem,2.6vw,2.25rem);
  line-height:1.2; letter-spacing:-.015em; color:var(--heading);
  margin-bottom:18px;
}
.location-grid .copy p{font-size:1.0625rem; font-weight:300; line-height:1.7; color:var(--body); margin-bottom:14px}
.location-grid .copy p:last-of-type{margin-bottom:24px}
.location-card{
  background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-xl); padding:28px 30px;
}
.location-card .label{
  font-weight:600; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.location-card .val{
  font-weight:500; font-size:1.0625rem; color:var(--heading);
  line-height:1.5; margin-bottom:18px;
}
.location-card .val:last-of-type{margin-bottom:0}
.location-card hr{border:0; border-top:1px solid var(--hairline); margin:18px 0}
.location-photo{
  aspect-ratio:4/5; border-radius:var(--r-xl); overflow:hidden;
  background:#111;
}
.location-photo img{width:100%; height:100%; object-fit:cover; display:block}

@media (max-width:1100px){
  .about-hero{padding:48px 32px}
  .about-hero .top{left:32px; right:32px; top:24px}
  .stat-band{margin:0 22px; padding:24px 32px; grid-template-columns:repeat(2,1fr); gap:24px}
  .mission .grid{grid-template-columns:1fr; gap:18px}
  .lane-cards, .principles-grid{grid-template-columns:1fr; gap:18px}
  .process-grid{grid-template-columns:1fr; gap:24px}
  .process-grid::before{display:none}
  .location-grid{grid-template-columns:1fr; gap:32px}
  .location-photo{aspect-ratio:16/10}
}
@media (max-width:700px){
  .about-hero-wrap{padding:14px 14px 0}
  .about-hero{padding:32px 22px; min-height:360px; border-radius:8px}
  .about-hero .top{left:22px; right:22px; top:18px; flex-wrap:wrap; gap:10px}
  .stat-band{margin:0 14px; padding:20px 22px; grid-template-columns:repeat(2,1fr); gap:18px}
  .mission, .lanes-band, .process-band, .principles-band, .location-band{padding:56px 0}
}
