/* ── Tokens: light is the base, dark overrides ────────────────────── */
:root{
  --bg:#fbfaf8; --panel:#ffffff; --ink:#16181d; --muted:#565b66;
  --line:#e2ddd5; --accent:#1d3557; --accent-soft:#eef1f6; --on-accent:#ffffff;
  --focus:#b4530a;
  --max:64rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101216; --panel:#171a20; --ink:#e9eaed; --muted:#a2a8b4;
    --line:#2a2f39; --accent:#9fc0e8; --accent-soft:#1a212c; --on-accent:#101216;
    --focus:#f0a35e;
  }
}
:root[data-theme="dark"]{
  --bg:#101216; --panel:#171a20; --ink:#e9eaed; --muted:#a2a8b4;
  --line:#2a2f39; --accent:#9fc0e8; --accent-soft:#1a212c; --on-accent:#101216;
  --focus:#f0a35e;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.15rem,4vw,2.5rem)}
h1,h2,h3{line-height:1.22;letter-spacing:-.015em;margin:0}
p{margin:0 0 1rem}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--panel);color:var(--ink);padding:.7rem 1rem;z-index:20;border:1px solid var(--line)}
.skip:focus{left:1rem;top:1rem}

/* ── Masthead ─────────────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--line);background:var(--panel)}
.masthead .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;align-items:center;justify-content:space-between;padding-block:1.1rem}
.mark{font:700 1.06rem/1.2 Georgia,"Times New Roman",serif;letter-spacing:.01em;text-decoration:none;color:var(--ink)}
.mark span{color:var(--muted);font-weight:400}
.nav-group{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem}
.masthead nav{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;font-size:.92rem}
.masthead nav a{color:var(--muted);text-decoration:none}
.masthead nav a:hover,.masthead nav a[aria-current="page"]{color:var(--accent);text-decoration:underline}

/* ── Theme toggle ─────────────────────────────────────────────────── */
.theme-toggle{
  display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;
  background:transparent;border:1px solid var(--line);border-radius:7px;
  color:var(--muted);cursor:pointer;padding:0;flex:none;
}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
.theme-toggle svg{width:1.05rem;height:1.05rem;display:block}
.theme-toggle .icon-moon{display:none}
.theme-toggle .icon-sun{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}
}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}

/* ── Sections ─────────────────────────────────────────────────────── */
.hero{padding-block:clamp(2.75rem,7vw,4.5rem) clamp(1.5rem,4vw,2.25rem)}
.eyebrow{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem;font-weight:600}
h1{font-size:clamp(2rem,5.2vw,3.05rem);font-weight:650;max-width:21ch}
.lede{font-size:clamp(1.06rem,2.1vw,1.24rem);color:var(--muted);max-width:62ch;margin-top:1.15rem}
section{padding-block:clamp(2.25rem,5.5vw,3.5rem);border-top:1px solid var(--line)}
section.hero,section:first-of-type{border-top:0}
h2{font-size:clamp(1.3rem,2.6vw,1.6rem);font-weight:640;margin-bottom:.5rem}
.sub{color:var(--muted);max-width:62ch;margin-bottom:2rem}

/* ── Service cards ────────────────────────────────────────────────── */
.grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,21.5rem),1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.4rem 1.45rem}
.card h3{font-size:1.04rem;font-weight:640;margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.965rem;margin:0}
.card .num{display:block;font-size:.76rem;letter-spacing:.12em;color:var(--muted);margin-bottom:.6rem;font-weight:600}

/* ── Engagement models ────────────────────────────────────────────── */
ul.models{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
ul.models li{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:1.1rem 1.3rem}
ul.models strong{display:block;font-weight:640;margin-bottom:.25rem}
ul.models span{color:var(--muted);font-size:.965rem}

/* ── Director ─────────────────────────────────────────────────────── */
.director{display:grid;gap:1.75rem;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
@media (max-width:52rem){.director{grid-template-columns:1fr}}
.director p{color:var(--muted)}
.director p.first{color:var(--ink)}
.dcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.3rem 1.4rem;font-size:.95rem}
.dcard h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.85rem;font-weight:600}
.dcard dl{margin:0;display:grid;gap:.8rem}
.dcard dt{color:var(--muted);font-size:.85rem}
.dcard dd{margin:.1rem 0 0;font-weight:500}

/* ── Contact ──────────────────────────────────────────────────────── */
.contact-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.4rem}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600;font-size:.97rem;padding:.72rem 1.3rem;border-radius:7px;border:1px solid var(--accent)}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft);opacity:1}

/* ── Company record (company page) ────────────────────────────────── */
.record{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.record-head{padding:1rem 1.35rem;border-bottom:1px solid var(--line);background:var(--accent-soft)}
.record-head h2{font-size:1.07rem;letter-spacing:.02em;margin:0}
.record-head p{margin:.3rem 0 0;font-size:.88rem;color:var(--muted)}
dl.record-body{margin:0;padding:.35rem 0}
dl.record-body div{display:grid;grid-template-columns:15.5rem 1fr;gap:.35rem 1.5rem;padding:.72rem 1.35rem;border-top:1px solid var(--line)}
dl.record-body div:first-child{border-top:0}
dl.record-body dt{color:var(--muted);font-size:.9rem}
dl.record-body dd{margin:0;font-weight:500}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.96em;letter-spacing:.01em}
@media (max-width:44rem){
  dl.record-body div{grid-template-columns:1fr;gap:.15rem;padding-block:.65rem}
}
.record-note{padding:.95rem 1.35rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted);background:var(--accent-soft)}
.record-note p{margin:0}
.prose{max-width:62ch;color:var(--muted)}
.prose h2{color:var(--ink);margin-bottom:.75rem}

/* ── Footer ───────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);background:var(--panel);padding-block:2.1rem;font-size:.88rem;color:var(--muted)}
footer p{max-width:78ch}
footer .legal{padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);margin-bottom:1.25rem}
footer .legal p{margin:0}
footer .base{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
footer .base p{margin:0}
footer .base a{color:var(--muted)}
footer .base a:hover{color:var(--accent)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  a,.btn,.theme-toggle{transition:opacity .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
}