@font-face{font-family:'Alba';src:url('/assets/fonts/Alba-Regular.otf') format('opentype');font-weight:400;font-display:block}
@font-face{font-family:'Alba Light';src:url('/assets/fonts/Alba-Light.otf') format('opentype');font-weight:300;font-display:block}
@font-face{font-family:'Alba Mono';src:url('/assets/fonts/AlbaMono-Regular.otf') format('opentype');font-weight:400;font-display:block}

/* Three type levels: caption, home loop, shared explanatory text. */
:root{
  --bg:#d6d6d6;--ink:#000;--muted:#7a7a79;--line:#bdbdbd;--m:10px;
  --caption-size:12px;--caption-leading:1.1;--caption-tracking:0;
  --body:clamp(20px,2.08vw,30px);--body-leading:.98;--body-tracking:-.016em;
  --content-left:21.2vw;--content-top:72px;--mark-height:3.25vw;
  --service-size:7.6vw;--service-leading:.8;--service-tracking:-.045em;
}
[data-theme=dark]{--bg:#151515;--ink:#d6d6d6;--muted:#8a8a89;--line:#333;color-scheme:dark}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth;scroll-padding-top:var(--content-top)}
html,body{margin:0;padding:0}
body{min-height:100svh;background:var(--bg);color:var(--ink);font-family:'Alba',sans-serif;font-size:var(--body);font-weight:400;line-height:var(--body-leading);letter-spacing:var(--body-tracking);font-synthesis:none;-webkit-font-smoothing:antialiased;transition:background .4s ease,color .4s ease}
h1,h2,h3,p,ul,ol{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit}
ul,ol{list-style:none}
a{color:inherit}
svg{fill:currentColor}
button{font:inherit;touch-action:manipulation}
.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.muted{color:var(--muted)}
.mono{font-family:'Alba Mono',monospace;font-size:var(--caption-size);font-weight:400;line-height:var(--caption-leading);letter-spacing:var(--caption-tracking);text-transform:uppercase;white-space:pre-line}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* The left rail is reserved for the caption and the fixed home-position logo. */
.topbar{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:flex-start;padding:var(--m);pointer-events:none;color:var(--ink)}
.topbar>*{pointer-events:auto}
.caption{color:var(--muted)}
a.caption{text-decoration:none}
.nav{display:flex;gap:22px;margin-left:auto;margin-right:22px;white-space:nowrap}
.nav a{text-decoration:none}
.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.lang-switch{margin-right:22px;white-space:nowrap}
.lang-switch a{text-decoration:none;opacity:.55}
.lang-switch a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:3px}
.lang-switch a:hover{opacity:1}
#theme-toggle{color:inherit;width:16px;height:16px;border:0;border-radius:50%;padding:0;background:currentColor;cursor:pointer;margin-top:-2px;flex:none}
#theme-toggle span{display:none}
.site-mark{position:fixed;left:var(--m);top:50%;height:var(--mark-height);width:calc(var(--mark-height) * 313.41 / 102.65);transform:translateY(-50%);z-index:10;display:block}
.site-mark svg{display:block;width:100%;height:100%}

/* Original intro geometry: a centred wordmark, six frames, hold, then dock left. */
body.home{overflow:hidden}
.js .home:not(.services-ready) .topbar>:not(.caption),.js .home:not(.services-ready) .legal-links{visibility:hidden}
.hero{position:fixed;inset:0;overflow:hidden;touch-action:none}
.hero-mark{position:absolute;left:50%;top:50%;height:var(--mark-height);width:calc(var(--mark-height) * 313.41 / 102.65);transform:translate(-50%,-50%);z-index:2;display:block;border:0;padding:0;background:none;color:var(--ink);cursor:pointer;will-change:left}
.hero-mark svg{display:block;position:absolute;top:0;left:0;width:100%;height:auto;overflow:visible}
.hero-mark.docked{left:calc(var(--m) + var(--mark-width)/2)}
.js .hero-mark:not(.ready){visibility:hidden}
.services{position:absolute;inset:0;overflow:hidden;opacity:1;visibility:visible;transition:opacity 650ms ease}
.js .services:not(.visible){opacity:0;visibility:hidden}
.services-track{position:absolute;left:var(--content-left);top:0;font-family:'Alba Light',sans-serif;font-weight:300;font-size:var(--service-size);line-height:var(--service-leading);letter-spacing:var(--service-tracking);user-select:none}
.services-list li{white-space:nowrap;height:.8em}
.service{white-space:nowrap;height:var(--row-height);opacity:1;transition:opacity 350ms ease;will-change:opacity}
.service.entering{opacity:0}

/* Areas and Contact share the explanatory text size; Studio uses the home scale. */
.inner main{padding:var(--content-top) var(--m) 88px var(--content-left);min-height:100svh}
.block{position:relative}
.block-head{display:flex;gap:24px;margin-bottom:24px}
.lead{max-width:1000px}
.lead p+p{margin-top:.65em}
.studio-page .lead{max-width:none;font-family:'Alba Light',sans-serif;font-size:var(--service-size);font-weight:300;line-height:var(--service-leading);letter-spacing:var(--service-tracking);overflow-wrap:break-word}
/* Clear the English opening-line descenders without altering line spacing. */
@media(min-width:601px){.studio-page:lang(en) .lead p:first-child{text-indent:.4em}}
.intro-copy{max-width:700px;margin-top:24px}
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px}
.area-meta{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.sym{width:20px;height:20px;flex:none}
.area h3{margin-bottom:20px}
.tags{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:24px;color:var(--muted)}
.contact{max-width:1000px;width:100%}
.inner.contact-page main,.inner.areas-page main{display:flex;flex-direction:column;justify-content:center;padding-top:var(--content-top);padding-bottom:var(--content-top)}
.contact-lead{max-width:900px}
.contact-mail{display:block;max-width:100%;margin-top:0;overflow-wrap:anywhere;text-decoration-thickness:1px;text-underline-offset:.14em}
.contact-mail:hover{color:var(--muted)}
.contact-meta,.contact-address{margin-top:32px;color:var(--muted)}
.contact-address address{font-style:normal;white-space:pre-line}

/* Every policy element uses exactly the caption's monospace properties. */
.legal{margin-left:var(--content-left);padding:var(--content-top) var(--m) 88px 0;max-width:760px;font-family:'Alba Mono',monospace;font-size:var(--caption-size);font-weight:400;line-height:var(--caption-leading);letter-spacing:var(--caption-tracking);text-transform:uppercase}
.legal h1{margin:18px 0 32px}
.legal section{border-top:1px solid var(--line);padding:16px 0 32px}
.legal h2{margin-bottom:18px}
.legal p+p{margin-top:.8em}
.legal p,.legal li,.legal h1,.legal h2,.legal strong,.legal code,.legal th,.legal td,.legal .pill{font:inherit;letter-spacing:inherit}
.legal strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal a{text-underline-offset:3px;overflow-wrap:anywhere}
.legal-list li{padding:10px 0;border-top:1px solid var(--line)}
.legal-list li:first-child{border-top:0}
.table-wrap{overflow-x:auto}
.legal-table{border-collapse:collapse;width:100%}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.settings .legal-list{margin:22px 0}
.pill{text-transform:uppercase;color:var(--bg);background:var(--ink);border:0;border-radius:0;padding:12px 16px;cursor:pointer;margin-bottom:22px}
.pill:hover{opacity:.8}

/* Direct policy links in the original bottom-right position, without a footer. */
.legal-links{position:fixed;right:var(--m);bottom:var(--m);z-index:25;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 22px;max-width:calc(100% - 2 * var(--m));color:var(--muted);white-space:nowrap;background:var(--bg);box-shadow:0 0 0 5px var(--bg)}
.legal-links a{text-decoration:none}
.legal-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media(max-width:1100px){.areas{grid-template-columns:1fr;gap:40px}.area{max-width:700px}}
@media(max-width:900px){
  .home .nav{position:fixed;left:var(--m);bottom:64px;margin:0;gap:18px;background:var(--bg);box-shadow:0 0 0 5px var(--bg)}
  .lang-switch{margin-left:auto}
}
@media(max-width:600px){
  :root{--content-left:24vw;--content-top:84px;--mark-height:6.5vw;--service-size:10.26vw;--service-leading:.84}
  .services{top:84px}
  .services-list li{height:.84em}
  .inner main,.legal{padding-bottom:88px}
  .areas{margin-top:40px;gap:36px}
  .area-meta{margin-bottom:20px}
  .table-wrap{margin-right:0}
  .legal-table{min-width:560px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,.services,.service{transition:none}
}

/* Keep fixed navigation readable while long pages pass behind it. */
.inner .topbar,.legal-page .topbar{background:var(--bg)}


/* Preserve the client's latest header improvement; the logo stays fixed. */
.inner .topbar,.legal-page .topbar{position:absolute}
@media(max-width:900px){
  .inner,.legal-page{--content-top:112px}
  .inner .topbar,.legal-page .topbar{flex-wrap:wrap;row-gap:18px}
  .inner .caption,.legal-page .caption{order:1;flex:1}
  .inner .lang-switch,.legal-page .lang-switch{order:2}
  .inner #theme-toggle,.legal-page #theme-toggle{order:3}
  .inner .nav,.legal-page .nav{order:4;flex-basis:100%;margin:0;gap:22px}
}