/* Styles from the page Barbara designed as a Claude artifact (2026-11),
 * moved out of the HTML unchanged so the site can send a strict
 * Content-Security-Policy. Fonts are in fonts.css, self-hosted. */
:root{
  --bg:#DCE5E7; --card:#F8FAFA; --ink:#102A33; --muted:#566C74; --line:#D9E2E4;
  --hero:#0D3440; --hero-ink:#F1F6F7; --hero-muted:#A9C6CC; --wave:#5FC4D0; --wave-dim:#2C6573;
  --accent:#5FC4D0; --accent-ink:#06262B;
  color-scheme: light; 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:#081216; --card:#122329; --ink:#E4EDEF; --muted:#93A9B0; --line:#22363D;
    --hero:#0A2B35; --hero-ink:#F1F6F7; --hero-muted:#9DBCC3; --wave:#5FC4D0; --wave-dim:#24596A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#081216; --card:#122329; --ink:#E4EDEF; --muted:#93A9B0; --line:#22363D;
  --hero:#0A2B35; --hero-ink:#F1F6F7; --hero-muted:#9DBCC3; --wave:#5FC4D0; --wave-dim:#24596A;
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; min-height:100%; background:var(--bg); color:var(--ink);
  font-family:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:17px; line-height:1.55;
  display:flex; justify-content:center; padding:clamp(16px,5vw,56px) 14px;
}
.card{width:100%; max-width:600px; background:var(--card); border-radius:30px; overflow:hidden; border:1px solid var(--line)}

/* Hero */
.hero{background:var(--hero); color:var(--hero-ink); padding:clamp(28px,7vw,48px) clamp(24px,7vw,48px) 0; position:relative}
.role{margin:0 0 .5rem; color:var(--hero-muted); font-weight:500; display:flex; align-items:center; gap:.6rem}
.mic{width:22px; height:30px; color:var(--wave); flex:none}
h1{
  font-family:"Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  font-weight:800; font-size:clamp(2.8rem,12vw,4.6rem); line-height:.9; letter-spacing:-.035em; margin:0 0 1.4rem;
}
.reel{
  display:inline-flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--accent); color:var(--accent-ink); border-radius:99px;
  padding:8px 22px 8px 8px; font-weight:600; font-size:1.05rem;
}
.reel:hover{filter:brightness(1.08)}
.reel:focus-visible,.btn:focus-visible{outline:3px solid var(--hero-ink); outline-offset:3px}
.reel-play{width:48px; height:48px; border-radius:50%; background:var(--hero); color:var(--accent); display:grid; place-items:center; flex:none}
.reel-play svg{width:18px; height:18px; margin-left:3px}
.reel small{display:block; font-weight:400; font-size:.85rem; opacity:.8; line-height:1.2}
.wave{display:flex; align-items:flex-end; gap:3px; height:120px; margin-top:clamp(24px,5vw,36px)}
.wave i{flex:1; background:var(--wave-dim); border-radius:3px 3px 0 0; transform-origin:bottom; min-width:2px}
.wave i.hi{background:var(--wave)}
@media (prefers-reduced-motion: no-preference){
  .wave i{animation:rise .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--d) * 14ms)}
  @keyframes rise{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
}

.hero{overflow:hidden}
.hero > *:not(.portrait){position:relative; z-index:1}
.portrait{
  position:absolute; top:0; right:0; height:100%; width:auto; max-width:none;
  object-fit:contain; opacity:.6; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 35%),linear-gradient(to bottom,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 35%),linear-gradient(to bottom,#000 70%,transparent 100%);
  mask-composite:intersect;
}
@media (max-width:480px){ .portrait{right:-10%; opacity:.5} }
/* Body */
.body{padding:clamp(24px,7vw,44px) clamp(24px,7vw,48px)}
.pitch{font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:400; font-size:clamp(1.25rem,4.5vw,1.5rem); line-height:1.3; letter-spacing:-.01em; margin:0 0 .7em}
.sub{color:var(--muted); margin:0 0 1.6rem; max-width:46ch}
.langs{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 2.2rem; padding:0; list-style:none}
.langs li{border:1.5px solid var(--ink); border-radius:99px; padding:.25em .95em; font-weight:500; font-size:.95rem}
.langs li.native{background:var(--ink); color:var(--card)}
.clients{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.3rem 0; margin:0 0 2rem}
.clients h2{font-size:1rem; font-weight:600; margin:0 0 .5rem; color:var(--muted)}
.logos{display:flex; flex-wrap:wrap; gap:.35rem 1.4rem; margin:0; padding:0; list-style:none;
  font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-.01em}
.radio{margin:.8rem 0 0; color:var(--muted)}
.contact{display:flex; flex-wrap:wrap; gap:10px}
.btn{font:inherit; font-weight:600; text-decoration:none; cursor:pointer; border-radius:14px; padding:.8em 1.2em; border:1.5px solid var(--ink); background:transparent; color:var(--ink)}
.btn.primary{background:var(--ink); color:var(--card)}
.body .btn:focus-visible{outline-color:var(--ink)}
.foot{margin:1.4rem 0 0; color:var(--muted); font-size:.92rem}