/* Race Resolve site styles
   Layout: dark brand ground, teal/coral diagonal stripes as the one bold motif,
   content left-aligned on a 1120px column. Edit colours and fonts in :root. */

/* Fonts are self-hosted: no requests to Google, no cookies. Saira and Barlow are SIL Open Font License. */
@font-face{font-family:"Saira";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 125%;
  src:url(fonts/saira-latin-standard-normal.woff2) format("woff2-variations"),url(fonts/saira-latin-standard-normal.woff2) format("woff2")}
@font-face{font-family:"Saira";font-style:italic;font-display:swap;font-weight:100 900;font-stretch:50% 125%;
  src:url(fonts/saira-latin-standard-italic.woff2) format("woff2-variations"),url(fonts/saira-latin-standard-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:500;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-display:swap;font-weight:600;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}

:root{
  color-scheme: dark;
  --ink:#08090b;          /* page ground */
  --panel:#101416;        /* raised surfaces */
  --panel-2:#151b1d;
  --line:#1f2729;         /* hairlines, teal-biased */
  --text:#f2f5f5;
  --soft:#c9d2d3;         /* body copy on dark */
  --muted:#9aa7a9;
  --teal:#14c9c9;
  --teal-hi:#3fe0df;
  --coral:#fd6a58;
  --font-display:"Saira", "Arial Narrow", system-ui, sans-serif;
  --font-body:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step-hero:clamp(2.5rem, 6.4vw, 5rem);
  --step-h1:clamp(2.2rem, 5.5vw, 3.8rem);
  --step-h2:clamp(1.8rem, 3.6vw, 2.6rem);
  --step-h3:1.3rem;
  --step-body:1.0625rem;
  --step-small:.875rem;
  --col:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--text);font:400 var(--step-body)/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--teal);color:var(--ink);padding:10px 16px;font-weight:600}
.skip:focus{left:max(16px, env(safe-area-inset-left, 0px));top:calc(env(safe-area-inset-top, 0px) + 8px)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{max-width:calc(var(--col) + 64px);margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:720px){.wrap{padding-left:max(32px, env(safe-area-inset-left, 0px));padding-right:max(32px, env(safe-area-inset-right, 0px))}}

/* Placeholder text to replace: dashed coral underline. Remove class="ph" once real content is in. */
.ph{border-bottom:1.5px dashed var(--coral);color:var(--text)}

/* ---------- type ---------- */
.display{font-family:var(--font-display);font-style:italic;font-weight:800;font-stretch:125%;letter-spacing:-.01em;line-height:.98;text-transform:uppercase}
.eyebrow{font-family:var(--font-display);font-weight:500;font-stretch:110%;font-size:var(--step-small);letter-spacing:.22em;text-transform:uppercase;color:var(--coral);display:flex;align-items:center;gap:12px;margin:0}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--teal);flex:none}
h1,h2,h3{margin:0;text-wrap:balance}
h2{font-size:var(--step-h2)}
h3{font-family:var(--font-display);font-style:italic;font-weight:700;font-stretch:115%;font-size:var(--step-h3);text-transform:uppercase;letter-spacing:.01em;line-height:1.15}
p{margin:0;max-width:62ch}
.muted{color:var(--muted)}
.soft{color:var(--soft)}
.lede{font-size:1.15rem;color:var(--soft);max-width:52ch}
.t{color:var(--teal)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-style:italic;font-weight:700;font-stretch:115%;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;line-height:1.2;text-decoration:none;padding:14px 22px;border-radius:2px;border:0;cursor:pointer;transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease}
.btn-primary{background:var(--teal);color:var(--ink)}
.btn-primary:hover{background:var(--teal-hi);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--teal)}
.btn-coral{background:var(--coral);color:var(--ink)}
.btn-coral:hover{background:#ff8676;transform:translateY(-1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn.is-soon{background:var(--panel-2);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line);cursor:not-allowed;transform:none}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.textlink{color:var(--teal);font-weight:600;text-underline-offset:4px}
.textlink:hover{color:var(--teal-hi)}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:30;background:var(--ink)}
header.site{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:color-mix(in srgb, var(--ink) 90%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{width:52px;height:auto}
.wordmark{font-family:var(--font-display);font-style:italic;font-weight:800;font-stretch:120%;font-size:1.15rem;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
.wordmark b{color:var(--teal);font-weight:800}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:26px}
nav.main a{text-decoration:none;color:var(--muted);font-size:.98rem;padding-block:6px;display:block}
nav.main a:hover{color:var(--text)}
nav.main a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--teal)}
.bar .btn{padding:10px 16px;font-size:.85rem}
.menu-btn{display:none;background:none;border:1.5px solid var(--line);color:var(--text);border-radius:2px;padding:8px 12px;font:600 .85rem var(--font-body);cursor:pointer;align-items:center;gap:8px}
.menu-btn svg{width:18px;height:18px}
@media (max-width:959px){
  .js .menu-btn{display:inline-flex}
  .js nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--line)}
  .js nav.main.open{display:block}
  .js nav.main ul{flex-direction:column;gap:0;padding:8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px))}
  .js nav.main a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .js nav.main a[aria-current="page"]{box-shadow:none;color:var(--teal)}
  html:not(.js) .bar{flex-wrap:wrap}
  html:not(.js) nav.main{order:3;width:100%}
  html:not(.js) nav.main ul{flex-wrap:wrap;gap:4px 18px}
}
@media (max-width:420px){.bar .btn-book{display:none}}

/* ---------- stripes motif ---------- */
.stripes{position:absolute;z-index:1;pointer-events:none;aspect-ratio:1/1;max-width:100%}
.stripes span{position:absolute;left:0;height:9%;width:150%;transform-origin:left center;transform:rotate(-34deg)}
.stripes .s1{background:var(--teal);bottom:22%}
.stripes .s2{background:var(--coral);bottom:8%;left:12%}

/* ---------- photo slots ----------
   Drop a photo into assets/photos/ with the file name shown in the slot and it appears automatically. */
.photo{position:relative;overflow:hidden;background:var(--panel);border:1.5px dashed var(--line);max-width:100%}
.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(-34deg, transparent 60%, var(--teal) 60%, var(--teal) 64%, transparent 64%, transparent 69%, var(--coral) 69%, var(--coral) 73%, transparent 73%);opacity:.85}
.photo .slot{position:absolute;inset:0;display:grid;place-items:start;align-content:start;text-align:left;padding:20px;color:var(--muted);font-size:var(--step-small);line-height:1.5}
.photo .slot code{display:block;margin-top:4px;color:var(--soft);font-size:.8rem}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.photo:has(img:not([hidden])){border-style:solid;border-color:transparent}
.ratio-4x5{aspect-ratio:4/5}
.ratio-3x2{aspect-ratio:3/2}
.ratio-1x1{aspect-ratio:1/1}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-inner{position:relative;z-index:2;display:grid;gap:clamp(32px, 5vw, 56px);align-items:center;padding-block:clamp(48px, 8vw, 104px) clamp(80px, 11vw, 136px)}
@media (min-width:900px){.hero-inner{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr)}}
.hero-copy{display:grid;gap:26px;min-width:0}
.hero h1{font-size:var(--step-hero)}
.hero h1 span{display:block}
.hero .photo{width:100%}
.hero .photo img{object-position:50% 12%}
@media (max-width:899px){.hero .photo{aspect-ratio:3/2}}
.hero .stripes{right:-30%;bottom:-40%;width:min(120vw, 820px)}
@media (min-width:760px){.hero .stripes{right:-12%;bottom:-48%;width:min(70vw, 820px)}}

/* ---------- page head (inner pages) ---------- */
.page-head{border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-head .wrap{padding-block:clamp(48px, 8vw, 88px) clamp(48px, 7vw, 72px);display:grid;gap:18px;position:relative;z-index:2}
.page-head h1{font-size:var(--step-h1);max-width:18ch}
.page-head .stripes{right:-40%;bottom:-70%;width:min(110vw, 560px);opacity:.9}
@media (min-width:760px){.page-head .stripes{right:-6%;bottom:-95%;width:min(52vw, 560px)}}
.crumbs{font-size:var(--step-small);color:var(--muted)}
.crumbs a{color:var(--muted);text-underline-offset:3px}
.crumbs a:hover{color:var(--text)}

/* ---------- sections ---------- */
section.block{padding-block:clamp(64px, 9vw, 112px);border-bottom:1px solid var(--line)}
section.block.alt{background:var(--panel)}
.head{display:grid;gap:14px;margin-bottom:clamp(32px, 5vw, 56px)}
.head-row{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(32px, 5vw, 56px)}
.head-row .head{margin-bottom:0}

/* ---------- services ---------- */
.svc-grid{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media (min-width:760px){.svc-grid{grid-template-columns:repeat(2, 1fr)}}
.svc{padding:28px 0;border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start;min-width:0}
@media (min-width:760px){
  .svc:nth-child(odd){padding-right:32px;border-right:1px solid var(--line)}
  .svc:nth-child(even){padding-left:32px}
}
.svc .range{font-family:var(--font-display);font-weight:600;font-stretch:110%;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.svc ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.svc li, .ticks li{position:relative;padding-left:24px;color:var(--soft)}
.svc li::before, .ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;background:var(--teal);transform:skewX(-20deg)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:64px 1fr;gap:16px;padding-block:24px;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(step, decimal-leading-zero);font-family:var(--font-display);font-style:italic;font-weight:800;font-stretch:120%;font-size:1.6rem;color:var(--coral);line-height:1.1;font-variant-numeric:tabular-nums}
.steps li > div{display:grid;gap:6px;min-width:0}
@media (min-width:860px){
  .steps.five{grid-template-columns:repeat(5, 1fr);gap:24px}
  .steps.three{grid-template-columns:repeat(3, 1fr);gap:32px}
  .steps.five li, .steps.three li{grid-template-columns:1fr;border-bottom:0!important;padding-top:20px;align-content:start}
  .steps li::before{font-size:2rem}
}

/* ---------- coach teaser / about ---------- */
.split{display:grid;gap:clamp(28px, 5vw, 64px);align-items:center}
@media (min-width:860px){.split{grid-template-columns:5fr 6fr}}
.split > div{min-width:0}
.stack{display:grid;gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.82rem;letter-spacing:.04em;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--soft)}
.chip.hl{border-color:var(--teal);color:var(--text)}
.gallery{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.gallery{grid-template-columns:repeat(3, 1fr)}}
.principles{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){.principles{grid-template-columns:repeat(2, 1fr)}}
.principle{border-top:2px solid var(--teal);padding-top:18px;display:grid;gap:8px}
.principle:nth-child(even){border-top-color:var(--coral)}
.principle p{color:var(--soft)}

/* ---------- book band ---------- */
.book{background:var(--teal);color:var(--ink)}
.book .wrap{padding-block:clamp(56px, 8vw, 96px);display:grid;gap:24px}
.book h2{font-size:clamp(2rem, 5vw, 3.6rem);max-width:16ch}
.book p{color:#06292a;font-size:1.1rem}
.book .btn-primary{background:var(--ink);color:var(--text)}
.book .btn-primary:hover{background:#1a2022}
.book .ph{border-bottom-color:var(--ink);color:var(--ink)}
.contact-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-weight:600}
.contact-line code, .email-box code{font-family:var(--font-body);font-size:1rem;padding:6px 10px;border-radius:2px;user-select:all}
.contact-line code{background:rgba(8,9,11,.1)}
.copy{font:600 .85rem var(--font-body);background:none;border:1.5px solid currentColor;color:inherit;padding:6px 12px;border-radius:2px;cursor:pointer}

/* ---------- legal pages ---------- */
.legal{display:grid;gap:clamp(32px, 5vw, 64px);padding-block:clamp(40px, 6vw, 72px) clamp(64px, 9vw, 112px)}
@media (min-width:980px){.legal{grid-template-columns:240px minmax(0, 1fr)}}
.toc{align-self:start;font-size:.95rem}
@media (min-width:980px){.toc{position:sticky;top:calc(env(safe-area-inset-top, 0px) + 92px)}}
.toc h2{font-family:var(--font-display);font-weight:500;font-stretch:110%;font-size:var(--step-small);letter-spacing:.22em;text-transform:uppercase;color:var(--coral);margin:0 0 12px}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:toc}
.toc li{counter-increment:toc;display:grid;grid-template-columns:28px 1fr}
.toc li::before{content:counter(toc, decimal-leading-zero);color:var(--teal);font-variant-numeric:tabular-nums;font-size:.85rem;padding-top:2px}
.toc a{color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--text)}
.prose{min-width:0;max-width:72ch;display:grid;gap:44px}
.prose section{display:grid;gap:14px;scroll-margin-top:96px}
.prose h2{font-family:var(--font-display);font-style:italic;font-weight:700;font-stretch:115%;text-transform:uppercase;font-size:1.45rem;letter-spacing:.01em;line-height:1.15;display:flex;gap:14px;align-items:baseline}
.prose h2 .n{color:var(--coral);font-variant-numeric:tabular-nums}
.prose h3{font-size:1.05rem;font-style:normal;font-family:var(--font-body);font-weight:600;text-transform:none;letter-spacing:0;margin-top:6px}
.prose p, .prose li{color:var(--soft)}
.prose ul{margin:0;padding-left:0;list-style:none;display:grid;gap:8px}
.prose ul li{position:relative;padding-left:26px}
.prose ul li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--teal);transform:skewX(-20deg)}
.prose strong{color:var(--text);font-weight:600}
.prose a, .pcontent a{color:var(--teal);text-underline-offset:3px}
.updated{color:var(--muted);font-size:var(--step-small)}

/* ---------- footer ---------- */
footer.site{padding-block:56px 40px;font-size:.95rem;color:var(--muted)}
.fgrid{display:grid;gap:32px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.fgrid{grid-template-columns:2fr 1fr 1fr 1fr}}
.fbrand{grid-column:1 / -1;display:grid;gap:14px;align-content:start}
@media (min-width:900px){.fbrand{grid-column:auto}}
.fbrand .tagline{font-family:var(--font-display);font-stretch:115%;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;color:var(--soft)}
footer.site h2{font-family:var(--font-display);font-weight:600;font-stretch:110%;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin:0 0 12px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--text)}
.fbottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--step-small);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ---------- 404 ---------- */
.lost{min-height:62vh;display:grid;align-content:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.lost .wrap{display:grid;gap:22px;padding-block:72px 120px;position:relative;z-index:2}
.lost .code{font-family:var(--font-display);font-style:italic;font-weight:800;font-stretch:125%;font-size:clamp(5rem, 18vw, 11rem);line-height:.85;color:var(--teal)}
.lost h1{font-size:clamp(1.8rem, 4.4vw, 3rem);max-width:18ch}
.lost .stripes{right:-30%;bottom:-40%;width:min(110vw, 700px)}

/* ---------- statement line ---------- */
.statement{font-family:var(--font-display);font-style:italic;font-weight:800;font-stretch:120%;text-transform:uppercase;font-size:clamp(1.4rem, 3vw, 2rem);line-height:1.1;color:var(--teal);max-width:24ch}
.copy-block{display:grid;gap:18px;max-width:64ch}
.copy-block p{color:var(--soft)}
.two-col{display:grid;gap:clamp(28px, 5vw, 64px)}
@media (min-width:860px){.two-col{grid-template-columns:5fr 7fr;align-items:start}}
.two-col > *{min-width:0}

/* ---------- experience stats ---------- */
.stats{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media (min-width:640px){.stats{grid-template-columns:repeat(3, 1fr)}}
.stat{padding:22px 0;border-bottom:1px solid var(--line);display:grid;gap:4px;align-content:start}
@media (min-width:640px){
  .stat{padding:22px 20px;border-bottom:0;border-right:1px solid var(--line)}
  .stat:first-child{padding-left:0}
  .stat:last-child{border-right:0}
}
.stat .num{font-family:var(--font-display);font-style:italic;font-weight:800;font-stretch:125%;font-size:clamp(2.6rem, 5vw, 3.6rem);line-height:.9;color:var(--teal);font-variant-numeric:tabular-nums}
.stat:nth-child(2) .num{color:var(--coral)}
.stat .num.word{font-size:clamp(1.6rem, 3vw, 2.1rem);line-height:1;color:var(--text)}
.stat .lbl{font-size:.92rem;color:var(--soft)}

/* ---------- service rows (home) ---------- */
.svc-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-rows li{border-bottom:1px solid var(--line)}
.svc-rows a{display:grid;gap:8px 32px;padding:24px 0;text-decoration:none;align-items:baseline}
@media (min-width:760px){.svc-rows a{grid-template-columns:minmax(0, 4fr) minmax(0, 7fr) 24px}}
.svc-rows h3{transition:color .15s ease}
.svc-rows p{color:var(--soft)}
.svc-rows .arrow{color:var(--teal);display:none}
@media (min-width:760px){.svc-rows .arrow{display:block}}
.svc-rows a:hover h3{color:var(--teal)}

/* ---------- service sections (coaching page) ---------- */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.jump a{font-size:.9rem;text-decoration:none;padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:var(--soft)}
.jump a:hover{border-color:var(--teal);color:var(--text)}
.service{padding-block:clamp(56px, 8vw, 96px);border-bottom:1px solid var(--line);scroll-margin-top:72px}
.service:nth-of-type(even){background:var(--panel)}
.service .wrap{display:grid;gap:clamp(28px, 4vw, 44px)}
.service .photo{border:0}
.service-head{display:grid;gap:12px}
.service-head h2{font-size:var(--step-h2)}
.service-head .sub{font-family:var(--font-display);font-weight:500;font-stretch:110%;font-size:1.05rem;letter-spacing:.04em;color:var(--teal)}
.service-grid{display:grid;gap:clamp(28px, 5vw, 56px)}
@media (min-width:860px){.service-grid{grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);align-items:start}}
.service-grid .copy-block .btn{justify-self:start;margin-top:6px}
.includes{background:var(--ink);border:1px solid var(--line);padding:24px;display:grid;gap:14px}
.service:nth-of-type(odd) .includes{background:var(--panel)}
.includes h3{font-size:1rem;letter-spacing:.06em}
.suitable{font-size:.95rem;color:var(--muted)}
.suitable strong{color:var(--text);font-weight:600}
.ratio-16x7{aspect-ratio:16/7}

/* ---------- FAQs ---------- */
.faq{max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-family:var(--font-display);font-style:italic;font-weight:700;font-stretch:112%;font-size:1.2rem;text-transform:uppercase;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--teal), var(--teal)) center/14px 2px no-repeat, linear-gradient(var(--teal), var(--teal)) center/2px 14px no-repeat;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--teal)}
.faq .answer{padding:0 0 24px;color:var(--soft);max-width:64ch}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:16px;padding-block:clamp(40px, 6vw, 72px) clamp(64px, 9vw, 104px)}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);align-items:start;gap:clamp(32px, 5vw, 56px)}}
.card{background:var(--panel);border:1px solid var(--line);padding:clamp(22px, 3vw, 32px);display:grid;gap:16px;align-content:start}
.card.feature{border-color:var(--teal)}
.card h2{font-size:1.5rem}
.email-box{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.email-box code{font-family:var(--font-body);font-size:1.05rem;padding:8px 12px;border-radius:2px;background:var(--panel-2);user-select:all;word-break:break-all}
.aside{display:grid;gap:16px}
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:.98rem;padding:9px 14px;border:1px solid var(--line);border-radius:2px;color:var(--soft)}
.social a:hover{border-color:var(--teal);color:var(--text)}
.social svg{width:18px;height:18px}
.facts-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.facts-list li{display:grid;grid-template-columns:110px 1fr;gap:12px;color:var(--soft)}
.facts-list span:first-child{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px}

/* ---------- shared bits used by legal pages ---------- */
.callout{background:var(--panel);border-left:3px solid var(--coral);padding:18px 20px;display:grid;gap:8px}
.callout p{color:var(--text)}
.table-scroll{overflow-x:auto;border:1px solid var(--line)}
.table-scroll table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
.table-scroll th, .table-scroll td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.table-scroll tr:last-child td, .table-scroll tr:last-child th{border-bottom:0}
.table-scroll thead th{font-family:var(--font-display);font-weight:600;font-stretch:110%;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--panel)}
.table-scroll td{color:var(--soft)}
.table-scroll tbody th{color:var(--text);font-weight:600}
.fbrand address{font-style:normal}

/* five principles as rows, so none sits alone */
.principles.rows{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.principles.rows .principle{border-top:0;border-bottom:1px solid var(--line);padding:22px 0;gap:8px 32px}
@media (min-width:760px){.principles.rows .principle{grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);align-items:baseline}}
.principles.rows .principle h3{color:var(--teal)}
.principles.rows .principle:nth-child(even) h3{color:var(--coral)}
@media (min-width:900px){.fgrid{grid-template-columns:2fr 1fr 1fr}}