/* Holistic Dash: About page styles.
   All colors, fonts and spacing hang off the tokens in :root, so you can
   retheme the page by editing that block only. */

:root{
  --bg:#F2F4F3;--ink:#0F1E2E;--mute:#52606D;--line:#D2D9DB;--card:#FFFFFF;
  --acc:#0F6B6F;--hot:#D9482B;--on:#FFFFFF;
  --d:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --b:'Figtree','Segoe UI',system-ui,sans-serif;
  --e:'Leckerli One', cursive;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0C1620;--ink:#EAF0F2;--mute:#9AAAB5;--line:#22333F;--card:#122230;--acc:#58C4BE;--hot:#FF8A63;--on:#06222A}
}
:root[data-theme="dark"]{--bg:#0C1620;--ink:#EAF0F2;--mute:#9AAAB5;--line:#22333F;--card:#122230;--acc:#58C4BE;--hot:#FF8A63;--on:#06222A}

html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--b);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px;border-radius:4px}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--d);line-height:1.04;margin:0;letter-spacing:-.02em}
p{margin:0}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:1.5rem;height:60px}
.brand{font:600 1.25rem var(--d);text-decoration:none;margin-right:auto;display:flex;align-items:center;gap:.55rem}
.brand-mark{width:32px;height:32px;border-radius:8px;background:#C4673F;color:#FFF;display:inline-flex;align-items:center;justify-content:center;font-family:var(--e);font-weight:700;font-size:16px;line-height:1;flex-shrink:0;letter-spacing:0}
nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--mute);margin-left:1.25rem}
nav a:hover{color:var(--ink)}
#theme{background:none;border:1px solid var(--line);color:var(--ink);border-radius:99px;width:38px;height:38px;cursor:pointer;font-size:1rem}
.home{display:inline-flex;align-items:center;gap:.35rem;height:38px;padding:0 1rem;border:1.5px solid var(--ink);border-radius:99px;font:600 .95rem var(--b);text-decoration:none;white-space:nowrap}
.home:hover{background:var(--ink);color:var(--bg)}
@media (max-width:720px){
  nav { display: none; }
  .brand {
    font-size: 1.15rem;
    gap: .45rem;
  }
}

@media (max-width:420px){
  header.top .wrap { gap: .6rem; }
  .brand {
    font-size: 1.05rem;
    gap: .4rem;
  }
  .brand-mark {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 16px;
    border-radius: 7px;
  }
  .home { padding: 0 .75rem; font-size: .9rem; }
}

/* Hero */
.hero{position:relative;min-height:calc(100svh - 60px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
#field{position:absolute;inset:0;width:100%;height:100%}
.hero .wrap{position:relative;padding:4rem 0 3.5rem;pointer-events:none}
.hero a{pointer-events:auto}
.hero h1{font-size:clamp(2.8rem,9vw,7.5rem);font-weight:800;max-width:13ch}
.hero p{max-width:50ch;margin-top:1.75rem;font-size:1.25rem;color:var(--mute)}
.btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
.btn{display:inline-block;padding:.85rem 1.4rem;border-radius:99px;font-weight:600;text-decoration:none;border:1.5px solid var(--ink)}
.btn.p{background:var(--ink);color:var(--bg)}
.btn.p:hover{background:var(--acc);border-color:var(--acc);color:var(--on)}
.btn.g:hover{background:var(--ink);color:var(--bg)}

/* Sections */
section{padding:6rem 0;border-bottom:1px solid var(--line)}
.lead{font-size:clamp(1.9rem,4.2vw,3.4rem);font-weight:600;max-width:22ch}

/* Vision and mission */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.split>div{border-top:3px solid var(--ink);padding-top:1.25rem}
.split>div+div{border-color:var(--acc)}
.split h2{font-size:1.1rem;font-family:var(--b);font-weight:600;color:var(--mute);letter-spacing:0;margin-bottom:1.25rem}
.split p{font:600 clamp(1.5rem,2.8vw,2.2rem)/1.2 var(--d);letter-spacing:-.015em}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:3rem}}

/* Life areas */
.areas{display:flex;flex-wrap:wrap;gap:.7rem;margin:3rem 0 0;padding:0;list-style:none}
.areas li{padding:.7rem 1.2rem;border:1.5px solid var(--ink);border-radius:99px;font:600 1.1rem var(--d)}
.areas li:nth-child(3n+1){background:var(--acc);border-color:var(--acc);color:var(--on)}
.areas li:nth-child(3n+2){background:var(--card)}
.areas-note{margin-top:1.5rem;color:var(--mute);max-width:56ch}

/* Values */
.vals{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:3rem;margin-top:3.5rem}
.tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.tabs button{all:unset;cursor:pointer;padding:1.1rem .25rem;border-bottom:1px solid var(--line);font:600 1.6rem var(--d);color:var(--mute);display:flex;justify-content:space-between;transition:color .2s,padding .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);padding-left:1rem;box-shadow:inset 4px 0 var(--hot)}
.tabs button:focus-visible{outline:3px solid var(--hot);outline-offset:-3px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:2.5rem;align-self:start;min-height:280px}
.panel h3{font-size:2.2rem;margin-bottom:1rem}
.panel p{max-width:52ch;color:var(--mute)}
.panel .pr{margin-top:1.75rem;padding-top:1.25rem;border-top:1px dashed var(--line);color:var(--ink)}
.panel .pr b{display:block;font-family:var(--d);margin-bottom:.25rem}
@media (max-width:760px){.vals{grid-template-columns:1fr}.panel{padding:1.5rem}}

/* Story timeline */
.story{margin:3.5rem 0 0;padding:0 0 0 2rem;border-left:2px solid var(--line)}
.story li{list-style:none;position:relative;display:grid;grid-template-columns:90px 1fr;gap:1rem;padding-bottom:2.25rem}
.story li::before{content:"";position:absolute;left:calc(-2rem - 7px);top:.5rem;width:12px;height:12px;border-radius:50%;background:var(--bg);border:3px solid var(--acc)}
.story li:last-child::before{background:var(--hot);border-color:var(--hot)}
.story time{font:800 1.5rem var(--d)}
.story b{font:600 1.2rem var(--d);display:block}
.story span{color:var(--mute)}

/* Numbers */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:3.5rem;border-block:1px solid var(--ink)}
.stats div{padding:2rem 1.25rem;border-left:1px solid var(--line)}
.stats div:first-child{border-left:0;padding-left:0}
.stats strong{display:block;font:800 clamp(2.4rem,5vw,4rem)/1 var(--d);letter-spacing:-.03em}
.stats span{color:var(--mute);font-size:.95rem}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(3){border-left:0;padding-left:0}.stats div:nth-child(n+3){border-top:1px solid var(--line)}}

/* Commitments */
dl.trust{margin:3.5rem 0 0;border-top:1px solid var(--ink)}
dl.trust>div{display:grid;grid-template-columns:minmax(160px,1fr) 3fr;gap:2rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
dl.trust dt{font:600 1.35rem var(--d)}
dl.trust dd{margin:0;color:var(--mute);max-width:62ch}
@media (max-width:640px){dl.trust>div{grid-template-columns:1fr;gap:.4rem}}

/* Team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.5rem}
.team figure{margin:0}
.av{aspect-ratio:1;border-radius:28% 72% 60% 40%/50% 40% 60% 50%;display:grid;place-items:center;font:800 3rem var(--d);color:var(--on);margin-bottom:1rem}
.team figure:nth-child(1) .av{background:var(--acc)}
.team figure:nth-child(2) .av{background:var(--hot);border-radius:50%}
.team figure:nth-child(3) .av{background:var(--ink);color:var(--bg);border-radius:60% 40% 30% 70%/60% 30% 70% 40%}
.team figure:nth-child(4) .av{background:var(--line);color:var(--ink);border-radius:20%}
.team b{display:block;font:600 1.15rem var(--d)}
.team span{color:var(--mute);font-size:.95rem}
@media (max-width:760px){.team{grid-template-columns:1fr 1fr}}

/* Closing call to action and footer */
.cta{padding:7rem 0 5rem;border:0}
.cta h2{font-size:clamp(2.4rem,7vw,6rem);font-weight:800;max-width:14ch}
.cta p{margin-top:1.25rem;color:var(--mute);max-width:46ch}
footer{border-top:1px solid var(--line);padding:1.5rem 0;color:var(--mute);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}