.about-page { overflow-x: hidden; }
.about-page .header-actions { gap: 8px; }
.about-page .header-actions > a { font-size: 6.5px; }

.about-hero { position: relative; min-height: 880px; overflow: hidden; padding: 144px 22px 46px; background: linear-gradient(145deg,#f8f5ee 0%,#eee8dc 100%); }
.about-hero::before { content:""; position:absolute; width:540px; height:540px; right:-335px; top:125px; border:1px solid rgba(24,53,46,.11); border-radius:50%; box-shadow:0 0 0 54px rgba(24,53,46,.028),0 0 0 110px rgba(24,53,46,.018); }
.about-hero-copy { position:relative; z-index:3; }
.about-hero h1 { max-width:360px; margin:0; font:400 52px/.96 var(--serif); letter-spacing:-.045em; }
.about-hero h1 em { color:var(--moss); font-weight:400; }
.about-hero-copy > p:not(.eyebrow) { max-width:335px; margin:24px 0 27px; font-size:13px; line-height:1.72; }

.portrait-composition { position:absolute; z-index:1; width:345px; height:405px; right:-31px; bottom:37px; }
.portrait-frame { position:absolute; inset:19px 19px 0 28px; overflow:hidden; border-radius:148px 148px 22px 148px; box-shadow:0 26px 50px rgba(24,53,46,.18); background:var(--sand); }
.portrait-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(18,43,36,.18)); pointer-events:none; }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:scale(1.02); }
.portrait-scan { position:absolute; z-index:2; left:8%; right:8%; top:22%; height:1px; background:linear-gradient(90deg,transparent,rgba(251,250,246,.75),transparent); box-shadow:0 0 12px rgba(251,250,246,.7); animation:portraitScan 7s var(--ease) infinite; }
.credential-orbit { position:absolute; inset:-10px -1px -12px -5px; pointer-events:none; }
.credential-orbit svg { width:100%; height:100%; fill:none; stroke:var(--forest); stroke-width:.8; opacity:.36; }
.credential-orbit path { stroke-dasharray:4 9; animation:careFlow 15s linear infinite; }
.credential-orbit circle { fill:var(--paper); stroke-width:1.2; animation:carePulse 3.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.credential-orbit circle:nth-of-type(2) { animation-delay:.8s; }
.credential-orbit circle:nth-of-type(3) { animation-delay:1.6s; }
.credential-chip { position:absolute; z-index:4; display:flex; align-items:center; gap:9px; min-width:142px; padding:10px 13px; background:rgba(251,250,246,.94); border:1px solid rgba(24,53,46,.16); box-shadow:0 12px 26px rgba(24,53,46,.12); backdrop-filter:blur(12px); }
.credential-chip strong { font:400 28px/1 var(--serif); }
.credential-chip span { font-size:7px; font-weight:600; line-height:1.45; letter-spacing:.09em; text-transform:uppercase; }
.chip-one { left:0; top:31%; }
.chip-two { right:2px; bottom:7%; }

.founder-story { padding:90px 22px 92px; background:var(--paper); }
.founder-heading h2,.dual-care-heading h2,.principles-intro h2,.visit-copy h2 { margin:0; font:400 43px/1.02 var(--serif); letter-spacing:-.04em; }
.founder-copy { margin-top:35px; }
.founder-copy p { margin:0 0 20px; font-size:13px; line-height:1.8; }
.founder-quote { margin:48px 0 0; padding:28px 0 0; border-top:1px solid var(--line); font:italic 400 29px/1.24 var(--serif); }

.dual-care { overflow:hidden; padding:84px 0 92px; background:var(--cream); }
.dual-care-heading { padding:0 22px 40px; }
.dual-care-heading > p:last-child { margin:20px 0 0; max-width:560px; font-size:12px; line-height:1.75; }
.care-switcher { padding:0 14px; }
.care-tabs { display:grid; grid-template-columns:1fr 1fr; margin:0 8px 14px; border:1px solid var(--line); border-radius:100px; padding:4px; }
.care-tabs button { min-height:43px; padding:0 8px; border:0; border-radius:100px; background:transparent; font-size:9px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; transition:.35s var(--ease); }
.care-tabs button[aria-selected="true"] { color:var(--paper); background:var(--ink); }
.care-panel { position:relative; min-height:410px; overflow:hidden; display:grid; align-content:end; padding:28px; color:var(--paper); background:var(--forest); border-radius:34px 34px 12px 34px; box-shadow:0 22px 42px rgba(21,49,41,.17); }
.care-panel[hidden] { display:none; }
.care-panel[data-care-panel="skin"] { color:var(--ink); background:var(--sand); border-radius:34px 12px 34px 34px; }
.care-panel .panel-index { position:absolute; left:27px; top:25px; display:grid; place-items:center; width:37px; height:37px; border:1px solid currentColor; border-radius:50%; font-size:8px; }
.care-panel h3 { position:relative; z-index:2; max-width:260px; margin:0 0 14px; font:400 35px/1.02 var(--serif); letter-spacing:-.035em; }
.care-panel p { position:relative; z-index:2; max-width:420px; margin:0; font-size:11px; line-height:1.72; }
.care-panel svg { position:absolute; width:230px; height:190px; right:-24px; top:31px; fill:none; stroke:currentColor; stroke-width:1; opacity:.22; }
.care-panel.is-active { animation:panelIn .48s var(--ease) both; }
.switch-hint { margin:18px 8px 0; font-size:8px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.switch-hint span { float:right; font-size:15px; }

.principles { padding:88px 22px 96px; }
.principle-list { list-style:none; margin:52px 0 0; padding:0; border-top:1px solid var(--line); }
.principle-list li { display:grid; grid-template-columns:48px 1fr; gap:12px; padding:30px 0; border-bottom:1px solid var(--line); }
.principle-list li > span { font-size:9px; letter-spacing:.12em; }
.principle-list h3 { margin:0 0 9px; font:400 29px/1 var(--serif); }
.principle-list p { margin:0; font-size:11px; line-height:1.72; }

.visit-section { padding:84px 14px 90px; background:#dde1d7; }
.visit-copy { padding:0 8px 42px; }
.visit-copy > p:not(.eyebrow) { margin:20px 0 26px; font-size:12px; line-height:1.75; }
.visit-card { display:block; overflow:hidden; padding:4px 24px; color:var(--paper); background:var(--ink); border-radius:34px 34px 12px 34px; box-shadow:0 24px 46px rgba(24,53,46,.19); font-style:normal; }
.visit-card > div { padding:24px 0; border-bottom:1px solid rgba(244,241,233,.16); }
.visit-card > div:last-child { border-bottom:0; }
.visit-card span { display:block; margin-bottom:8px; font-size:8px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; opacity:.62; }
.visit-card strong,.visit-card a { display:block; font-size:12px; font-weight:500; line-height:1.65; }
.visit-card small { display:block; margin-top:6px; font-size:9px; line-height:1.6; opacity:.68; }

.about-cta { position:relative; overflow:hidden; margin:20px 14px; padding:46px 22px; color:var(--paper); background:var(--ink); }
.about-cta::after { content:""; position:absolute; width:250px; height:250px; right:-102px; top:-86px; border:1px solid rgba(244,241,233,.12); border-radius:50%; box-shadow:0 0 0 40px rgba(244,241,233,.035),0 0 0 82px rgba(244,241,233,.025); }
.about-cta h2 { position:relative; z-index:2; margin:0; font:400 38px/1.04 var(--serif); letter-spacing:-.035em; }
.about-cta > p { position:relative; z-index:2; margin:22px 0; font-size:12px; opacity:.82; }
.about-cta .primary-cta { position:relative; z-index:2; }

@keyframes portraitScan { 0%,15% { transform:translateY(0); opacity:0; } 25% { opacity:1; } 55% { transform:translateY(210px); opacity:.75; } 70%,100% { transform:translateY(210px); opacity:0; } }
@keyframes careFlow { to { stroke-dashoffset:-120; } }
@keyframes carePulse { 50% { transform:scale(1.5); fill:var(--forest); } }
@keyframes panelIn { from { opacity:.45; transform:translateX(18px); } }

@media (min-width:720px) {
  .about-page .header-actions { gap:22px; }
  .about-page .header-actions > a { font-size:8px; }
  .about-hero { min-height:780px; display:grid; grid-template-columns:52% 48%; align-items:center; padding:150px 7vw 70px; }
  .about-hero h1 { max-width:590px; font-size:72px; }
  .about-hero-copy > p:not(.eyebrow) { max-width:440px; font-size:15px; }
  .portrait-composition { position:relative; width:min(43vw,500px); height:590px; right:auto; bottom:auto; justify-self:end; }
  .portrait-frame { inset:25px 27px 0 42px; border-radius:210px 210px 28px 210px; }
  .credential-chip { min-width:170px; padding:13px 16px; }
  .credential-chip strong { font-size:35px; }
  .credential-chip span { font-size:8px; }
  .founder-story { display:grid; grid-template-columns:1fr 1fr; gap:28px 8vw; padding:120px 7vw; }
  .founder-heading h2,.dual-care-heading h2,.principles-intro h2,.visit-copy h2 { font-size:56px; }
  .founder-copy { margin:0; align-self:end; }
  .founder-copy p { font-size:14px; }
  .founder-quote { grid-column:1/-1; max-width:800px; margin-top:55px; font-size:42px; }
  .dual-care { display:grid; grid-template-columns:minmax(0,.85fr) minmax(440px,1.15fr); gap:7vw; align-items:center; padding:120px 7vw; }
  .dual-care-heading { padding:0; }
  .dual-care-heading > p:last-child { font-size:14px; }
  .care-switcher { padding:0; }
  .care-panel { min-height:500px; padding:40px; }
  .care-panel h3 { font-size:46px; }
  .care-panel p { font-size:13px; }
  .principles { display:grid; grid-template-columns:.75fr 1.25fr; gap:8vw; padding:120px 7vw; }
  .principle-list { margin:0; }
  .principle-list li { grid-template-columns:62px 1fr; padding:36px 0; }
  .principle-list h3 { font-size:34px; }
  .principle-list p { max-width:540px; font-size:13px; }
  .visit-section { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:start; padding:120px 7vw; }
  .visit-copy { position:sticky; top:130px; padding:0; }
  .visit-copy > p:not(.eyebrow) { max-width:420px; font-size:14px; }
  .visit-card { padding:10px 36px; }
  .visit-card strong,.visit-card a { font-size:14px; }
  .about-cta { margin:28px 3vw; padding:80px 7vw; }
  .about-cta h2 { max-width:720px; font-size:55px; }
  .about-cta > p { max-width:540px; font-size:14px; }
}

@media (min-width:1180px) {
  .about-hero h1 { font-size:86px; }
  .portrait-composition { width:500px; height:620px; }
}

@media (prefers-reduced-motion:reduce) {
  .portrait-scan,.credential-orbit path,.credential-orbit circle { animation:none; }
}