/* ───────────────────────────────────────────────────────────────────────
   Bytlian — shared styles for static content pages
   (about · methodology · medical-family-office · faq)
   Mirrors the tokens & type system of the homepage.
─────────────────────────────────────────────────────────────────────── */

:root{
  --navy-deep:#0F1825;
  --navy:#17213B;
  --navy-mid:#1C2B4A;
  --navy-light:#253659;
  --steel:#5C7FA2;
  --steel-light:#84A0BC;
  --steel-pale:#A8BFD0;
  --burg:#8A2F2F;
  --burg-light:#B84040;
  --paper:#ECE8D6;

  --ink:var(--paper);
  --ink-soft:rgba(236,232,214,.66);
  --ink-faint:rgba(236,232,214,.42);
  --hairline:rgba(168,191,208,.14);
  --hairline-strong:rgba(168,191,208,.28);

  --serif:Georgia, "Times New Roman", serif;
  --sans:"IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --mono:"IBM Plex Mono", "Courier New", ui-monospace, monospace;

  --gutter:max(24px, 5vw);
  --maxw:1080px;
}

*{box-sizing:border-box}
html{margin:0;padding:0;background:var(--navy-deep);color:var(--ink);scroll-behavior:smooth}
body{
  margin:0;padding:0;background:var(--navy-deep);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;
  letter-spacing:.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--burg);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:400}

/* ─── nav ─── */
.nav{
  position:fixed;top:18px;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--gutter);pointer-events:none;
}
.nav>*{pointer-events:auto}
.nav-brand,.nav-pills{
  background:rgba(15,24,37,.72);
  border:.5px solid var(--hairline-strong);border-radius:999px;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
}
.nav-brand{display:inline-flex;align-items:center;height:42px;padding:0 18px}
.nav-logo{display:block;height:22px;width:auto;opacity:.98}
.nav-pills{
  display:inline-flex;align-items:center;gap:2px;height:42px;padding:4px;
  font-family:var(--sans);font-size:13.5px;font-weight:400;
}
.nav-pills a{
  padding:0 14px;height:34px;display:inline-flex;align-items:center;white-space:nowrap;
  color:var(--ink-soft);border-radius:999px;transition:color .2s, background .2s;
}
.nav-pills a:hover{color:var(--ink)}
.nav-pills a.active{background:rgba(168,191,208,.1);color:var(--ink)}
.nav-pills a.nav-cta{
  margin-left:6px;padding:0 18px;background:var(--paper);color:var(--navy-deep);
  font-weight:500;
}
@media (max-width:820px){
  .nav-pills .hide-sm{display:none}
}

/* ─── page shell ─── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.page-hero{padding:184px 0 60px}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-light);margin-bottom:26px;
}
.kicker .num{color:var(--burg-light)}
.page-hero h1{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(34px, 5vw, 64px);line-height:1.06;letter-spacing:-.02em;
  text-wrap:balance;max-width:18ch;
}
.lede{
  margin-top:28px;max-width:60ch;
  font-size:clamp(17px, 1.5vw, 21px);line-height:1.55;color:var(--ink);
  font-weight:300;text-wrap:pretty;
}
.lede em{font-family:var(--serif);font-style:italic}

/* ─── content ─── */
.section{
  padding:48px 0;border-top:.5px solid var(--hairline);
}
.section:first-of-type{border-top:none}
.section-grid{
  display:grid;grid-template-columns:230px 1fr;gap:48px;align-items:start;
}
@media (max-width:820px){
  .section-grid{grid-template-columns:1fr;gap:18px}
  .page-hero{padding:150px 0 40px}
}
.section-grid .head{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-light);padding-top:8px;
}
.section h2{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(24px, 2.6vw, 34px);line-height:1.12;letter-spacing:-.015em;
  margin-bottom:20px;text-wrap:balance;
}
.prose p{
  font-weight:300;font-size:clamp(15px, 1.05vw, 17px);line-height:1.7;
  color:var(--ink-soft);max-width:64ch;margin:0 0 18px;text-wrap:pretty;
}
.prose p:last-child{margin-bottom:0}
.prose em{font-family:var(--serif);font-style:italic;color:var(--ink)}
.prose strong{font-weight:500;color:var(--ink)}
.prose h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.4vw,22px);
  margin:32px 0 12px;color:var(--ink);
}
.prose ul{margin:0 0 18px;padding-left:0;list-style:none;max-width:64ch}
.prose li{
  position:relative;padding-left:26px;margin-bottom:12px;
  font-weight:300;color:var(--ink-soft);line-height:1.6;
}
.prose li::before{
  content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;
  background:var(--burg-light);
}

/* editable placeholder marker for content to be supplied */
.todo{
  display:block;margin:14px 0;padding:14px 18px;
  border:1px dashed var(--hairline-strong);border-radius:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;line-height:1.5;
  color:var(--steel-light);background:rgba(92,127,162,.06);
}

/* ─── FAQ ─── */
.faq-item{
  padding:26px 0;border-top:.5px solid var(--hairline);
}
.faq-item:first-child{border-top:none}
.faq-q{
  font-family:var(--serif);font-size:clamp(18px,1.7vw,24px);font-weight:400;
  color:var(--ink);margin-bottom:12px;letter-spacing:-.01em;
}
.faq-a{
  font-weight:300;font-size:clamp(15px,1.05vw,17px);line-height:1.7;
  color:var(--ink-soft);max-width:70ch;text-wrap:pretty;
}
.faq-a em{font-family:var(--serif);font-style:italic;color:var(--ink)}

/* ─── nav tools: language + accessibility (mirror homepage) ─── */
.nav-tool{appearance:none;background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;min-width:36px;padding:0 10px;margin:0 1px;color:var(--ink-soft);border-radius:999px;transition:color .2s,background .2s;font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;font-weight:500}
.nav-tool:hover{color:var(--ink);background:rgba(168,191,208,.1)}
.nav-tool[aria-expanded="true"]{color:var(--ink);background:rgba(168,191,208,.14)}
.nav-tool-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.nav-lang{background:rgba(184,64,64,.18);color:#E7B7B7}
.nav-lang:hover{background:rgba(184,64,64,.30);color:#F4DADA}
.nav-lang-chev{transition:transform .25s ease;opacity:.85}
.nav-lang[aria-expanded="true"]{background:rgba(184,64,64,.30);color:#F4DADA}
.nav-lang[aria-expanded="true"] .nav-lang-chev{transform:rotate(180deg)}
.lang-pop{position:fixed;top:64px;right:max(24px,4vw);z-index:60;background:rgba(15,24,37,.92);border:.5px solid var(--hairline-strong);border-radius:14px;padding:6px;display:none;flex-direction:column;gap:2px;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 18px 50px rgba(0,0,0,.5);min-width:170px}
.lang-pop.open{display:flex}
.lang-pop button{appearance:none;background:transparent;border:0;cursor:pointer;text-align:left;padding:9px 14px;border-radius:9px;color:var(--ink-soft);font-family:var(--sans);font-size:12.5px;display:flex;align-items:center;justify-content:space-between;gap:14px;transition:background .15s,color .15s}
.lang-pop button:hover{background:rgba(168,191,208,.1);color:var(--ink)}
.lang-pop button[aria-pressed="true"]{background:rgba(184,64,64,.18);color:var(--ink)}
.lang-pop .iso{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-faint)}
.a11y-pop{position:fixed;top:64px;right:max(24px,4vw);z-index:60;background:rgba(15,24,37,.92);border:.5px solid var(--hairline-strong);border-radius:14px;padding:18px;display:none;flex-direction:column;gap:14px;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 18px 50px rgba(0,0,0,.5);width:300px;max-width:calc(100vw - 32px)}
.a11y-pop.open{display:flex}
.a11y-pop h3{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--burg-light);font-weight:500}
.a11y-row{display:flex;flex-direction:column;gap:6px}
.a11y-row .lbl{font-family:var(--sans);font-size:12px;color:var(--ink-soft)}
.a11y-seg{display:flex;background:rgba(168,191,208,.08);border:.5px solid var(--hairline);border-radius:8px;padding:3px;gap:2px}
.a11y-seg button{flex:1;appearance:none;background:transparent;border:0;cursor:pointer;padding:7px 6px;font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);border-radius:6px;transition:color .15s,background .15s}
.a11y-seg button[aria-pressed="true"]{background:var(--paper);color:var(--navy);font-weight:500}
.a11y-tog{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 0}
.a11y-tog .lbl{font-family:var(--sans);font-size:12.5px;color:var(--ink)}
.a11y-tog .desc{display:block;font-family:var(--sans);font-size:11px;color:var(--ink-faint);margin-top:2px}
.a11y-tog input{appearance:none;-webkit-appearance:none;width:42px;height:22px;border-radius:999px;background:rgba(168,191,208,.14);border:.5px solid var(--hairline);cursor:pointer;position:relative;flex-shrink:0;transition:background .2s}
.a11y-tog input::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--paper);transition:left .2s,background .2s}
.a11y-tog input:checked{background:rgba(138,47,47,.6);border-color:rgba(184,64,64,.4)}
.a11y-tog input:checked::after{left:22px;background:#fff}
.a11y-reset{appearance:none;background:transparent;border:.5px solid var(--hairline-strong);color:var(--ink-soft);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;border-radius:999px;padding:9px 14px;cursor:pointer;transition:color .15s,border-color .15s}
.a11y-reset:hover{color:var(--ink);border-color:var(--steel-light)}
@media (max-width:520px){.lang-pop,.a11y-pop{right:12px;left:12px;width:auto}}
html.a11y-large-text{font-size:18px}
html.a11y-larger-text{font-size:20px}
html.a11y-largest-text{font-size:22px}
html.a11y-high-contrast{--ink-soft:rgba(236,232,214,.95);--ink-faint:rgba(236,232,214,.75);--hairline:rgba(236,232,214,.4);--hairline-strong:rgba(236,232,214,.6)}
html.a11y-high-contrast .page-hero h1,html.a11y-high-contrast .faq-q{color:#fff!important}
html.a11y-high-contrast em{color:#fff!important}
html.a11y-reduce-motion *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.a11y-underline-links a:not(.nav-cta):not(.nav-tool){text-decoration:underline}

/* ─── FAQ accordion (details/summary) ─── */
.faq-list{padding-top:8px}
.faq-item{padding:0;border-top:.5px solid var(--hairline)}
.faq-item:first-child{border-top:none}
.faq-sum{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:16px;
  padding:26px 0;outline:none;-webkit-tap-highlight-color:transparent;
}
.faq-sum::-webkit-details-marker{display:none}
.faq-sum:focus-visible{outline:2px solid var(--steel-light);outline-offset:4px;border-radius:6px}
.faq-num{flex:0 0 26px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--steel-light);padding-top:.5em}
.faq-sum .faq-q{flex:1 1 auto;margin:0;transition:color .2s}
.faq-item:hover .faq-q,.faq-item[open] .faq-q{color:#fff}
.faq-ic{position:relative;flex:0 0 18px;width:18px;height:18px;margin-top:.5em}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;background:var(--steel-light);transition:transform .25s ease,background .2s}
.faq-ic::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.faq-ic::after{width:1.5px;height:14px;transform:translate(-50%,-50%)}
.faq-item[open] .faq-ic::before{background:var(--burg-light)}
.faq-item[open] .faq-ic::after{transform:translate(-50%,-50%) scaleY(0);background:var(--burg-light)}
.faq-item .faq-a{margin:0 0 16px;padding:0 42px 0 42px;max-width:none}
.faq-item .faq-a:last-child{margin-bottom:30px}
.faq-item .faq-a:first-of-type{padding-top:2px}
.faq-legal{
  margin:30px 0 0;padding-top:22px;border-top:.5px solid var(--hairline);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--burg-light);
}
@media (max-width:560px){
  .faq-sum{gap:12px}
  .faq-num{display:none}
  .faq-item .faq-a{padding-left:0;padding-right:0}
}

/* ─── footer ─── */
.foot{
  margin-top:40px;padding:56px var(--gutter) 40px;
  border-top:.5px solid var(--hairline);
}
.foot-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
@media (max-width:680px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-col .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-light);margin-bottom:8px}
.foot-col .v,.foot-col .vs{font-size:14px;color:var(--ink-soft)}
.foot-bottom{
  max-width:var(--maxw);margin:40px auto 0;padding-top:24px;
  border-top:.5px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}
.foot-bottom .legal{color:var(--burg-light)}
.foot-link{color:var(--ink-faint);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot-link:hover{color:var(--ink-soft);border-color:var(--hairline-strong)}