/* Direction C — "After hours". The current Ask page's darkness kept, but re-lit in the brand: a
   warm charcoal ground, burgundy as the only colour, and the phoenix mark drawn huge and faint
   behind the page like a watermark on letterhead. The most premium of the three. */
:root{
  --ground:#17120f; --ground-2:#1f1715; --panel:#241b19; --line:#3a2b29;
  --burgundy:#a33a3d; --burgundy-deep:#872e30; --burgundy-glow:rgba(163,58,61,.22);
  --ivory:#f4ece4; --muted:#b7a8a3; --faint:#80716e;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.4,.14,.2,1);
}
*{box-sizing:border-box} html,body{margin:0; height:100%}
body{font-family:var(--sans); color:var(--ivory); background:var(--ground); -webkit-font-smoothing:antialiased; line-height:1.5}
:focus-visible{outline:2px solid var(--burgundy); outline-offset:3px}

/* ── landing ───────────────────────────────────────────── */
.landing{position:relative; min-height:100%; overflow:hidden; background:radial-gradient(90% 70% at 20% 0%, #2c1a19 0%, var(--ground) 55%, #110c0a 100%); display:flex; flex-direction:column}
.mark{position:absolute; right:-6vw; top:-4vw; width:min(58vw,720px); opacity:.08; pointer-events:none}
.top{position:relative; display:flex; align-items:center; justify-content:space-between; padding:28px clamp(20px,6vw,80px)}
.top img{height:42px; width:auto}
.top span{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); font-weight:500}
.hero{position:relative; flex:1; padding:28px clamp(20px,6vw,80px) 56px; max-width:1180px; width:100%; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:end}
.hero img.p{width:120px; height:120px; border-radius:999px; object-fit:cover; border:3px solid var(--burgundy); background:#eee9e2; margin-bottom:26px; box-shadow:0 0 0 10px var(--burgundy-glow)}
.hero h1{font-weight:500; font-size:clamp(44px,5.6vw,76px); line-height:1; letter-spacing:-.03em; margin:0 0 20px; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--burgundy)}
.hero .lede{font-size:17px; color:var(--muted); max-width:46ch; margin:0 0 26px; font-weight:300}
.hero .lede b{color:var(--ivory); font-weight:500}
.hero ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:13.5px; color:var(--muted)}
.hero li{padding-left:16px; position:relative} .hero li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:1px; background:var(--burgundy)}
.hero li b{color:var(--ivory); font-weight:500}
.choose{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); font-weight:500; margin:0 0 6px}
.langs{display:flex; flex-direction:column}
.lang{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:16px; padding:20px 0 20px 18px; border-top:1px solid var(--line); color:var(--ivory); text-decoration:none; position:relative; transition:padding-left .25s var(--ease)}
.lang:last-child{border-bottom:1px solid var(--line)}
.lang::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; background:var(--burgundy); transform:scaleY(0); transition:transform .25s var(--ease)}
.lang:hover{padding-left:26px} .lang:hover::before{transform:scaleY(1)}
.lang .n{font-size:clamp(24px,2.6vw,32px); font-weight:500; letter-spacing:-.01em}
.lang .s{font-size:13px; color:var(--faint); text-align:right}
.foot{position:relative; padding:18px clamp(20px,6vw,80px); border-top:1px solid var(--line); font-size:12.5px; color:var(--faint); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

@media (max-width:860px){
  .hero{grid-template-columns:1fr; gap:28px; align-items:start} .mark{width:80vw; right:-30vw}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }