/* Avenir Next (Linotype), self-hosted under the site owner's web licence */
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-ultralight.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-ultralightitalic.woff2) format("woff2");font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-mediumitalic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-demibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-demibolditalic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-bolditalic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-heavy.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir Next Web";src:url(assets/fonts/avenirnext-heavyitalic.woff2) format("woff2");font-weight:900;font-style:italic;font-display:swap}
:root{
  --font-avenir:"Avenir Next Web","Avenir Next","Avenir","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* Body text matches asrv.com: Chakra Petch 400, 0.875rem / 1.65, 0 letter-spacing */
  /* colours from non-linear.studio: page rgb(226 226 226), text black */
  --bg:#e2e2e2; --fg:#000000; --ink:#000000; --accent:#dd5735;
  --font:"Chakra Petch",system-ui,sans-serif;
  /* dot grid */
  --grid-gap:14; --grid-dot:2; --grid-color:#c9c9c9; --grid-flip:#c9c9c9;
}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
/* keyboard focus: a thin black ring instead of the browser default, and only for keyboard users */
:focus{outline:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 0.875rem/1.65 var(--font);letter-spacing:0;-webkit-font-smoothing:antialiased}
#grid{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* hero wordmark: huge, bold, centred, fills the width; sits above the grid but lets the pointer through */
/* layout grid: Swiss-style corner blocks around a centred wordmark (after non-linear.studio) */
.hero{position:relative;z-index:1;min-height:100svh;display:grid;place-items:center;padding:0 var(--edge);pointer-events:none}
:root{--edge:2.8rem;--label:500 0.875rem/1.3 var(--font)}
.top{position:fixed;inset:0 0 auto;z-index:2;display:flex;justify-content:space-between;align-items:baseline;padding:1.6rem var(--edge);font:var(--label);pointer-events:none}
.top a{pointer-events:auto;color:var(--ink)}
.brand{font-weight:700;letter-spacing:.02em;text-decoration:none}
/* underline drawn inside the text box (not a border) so Contact's box matches the logo's exactly */
.menu__contact{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom / 100% 1px no-repeat}
.note{position:absolute;margin:0;font:var(--label);color:var(--ink);max-width:16ch}
.note--tl{left:var(--edge);top:20vh;max-width:none}
.note--mr{right:var(--edge);bottom:30vh;text-align:right}
/* rotated label on the left edge, reading bottom-to-top, its foot level with the right-middle note */
.side{position:absolute;left:var(--edge);bottom:30vh;margin:0;font:var(--label);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.rule{position:absolute;left:50%;top:calc(50% + 10.5vw);width:3rem;height:1px;background:var(--ink);transform:translateX(-50%)}
.statement{position:absolute;right:var(--edge);bottom:2.4rem;margin:0;max-width:24ch;font:500 0.75rem/1.35 var(--font);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);text-align:left}
.meta{position:absolute;left:var(--edge);bottom:2.4rem;margin:0;font:var(--label);display:flex;gap:1.6rem;color:var(--ink)}
.wordmark{margin:0;font:700 15.6vw/0.95 var(--font);letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);text-align:center;white-space:nowrap;pointer-events:auto;cursor:default}
@media (max-width:820px){
  :root{--edge:1.2rem}
  .note--tl{top:14vh}
  .note--mr{display:none}
  .statement{max-width:30ch;bottom:5.5rem;left:var(--edge);right:auto}
  .rule{top:calc(50% + 12vw)}
}
/* phones: the rotated label would cross the headline, so it goes */
@media (max-width:640px){
  .wordmark{font-size:17vw}
  .side{display:none}
}
/* short viewports (landscape phones): shrink the headline and clear the bottom corner */
@media (max-height:520px){
  .wordmark{font-size:10vw}
  .note--tl{top:4.5rem}
  .side{display:none}
  .statement{display:none}
  .rule{top:calc(50% + 7vw)}
  .meta{bottom:1.2rem}
}

/* glyph-swap reveal (after non-linear.studio): each character starts hidden, then
   shows real → symbol → real with a stagger. .is-sym hides the letter and draws its
   placeholder symbol in the same box so nothing shifts. */
[data-reveal] .chr,[data-reveal] .wrd{display:inline-block;opacity:0;position:relative}
[data-flip] .lword{display:inline-block;white-space:nowrap}
[data-flip] .lchr{display:inline-block;position:relative;white-space:pre}
[data-reveal] .chr.is-sym,[data-reveal] .wrd.is-sym,[data-flip] .lchr.is-sym{-webkit-text-fill-color:transparent;color:transparent}
[data-reveal] .chr.is-sym::after,[data-reveal] .wrd.is-sym::after,[data-flip] .lchr.is-sym::after{content:attr(data-sym);position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;line-height:1;text-align:center;-webkit-text-fill-color:var(--ink);color:var(--ink);font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",sans-serif;font-weight:400;font-size:.72em}
@media (prefers-reduced-motion:reduce){[data-reveal] .chr,[data-reveal] .wrd{opacity:1}}
[data-reveal] .wrd.is-sym::after{font-size:.62em;letter-spacing:.06em;white-space:nowrap;overflow:hidden}

/* contact tooltip: black tag hanging under the Contact link, shown instantly while open */
.menu{position:relative}
.tip{position:absolute;right:0;top:calc(100% + .6rem);padding:.7rem .9rem;border-radius:4px;background:var(--ink);white-space:nowrap;visibility:hidden}
.menu.is-open .tip{visibility:visible}
.tip::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem}   /* keeps hover alive across the gap */
.top .tip__mail{font:var(--label);line-height:1;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.top .tip__mail .lchr.is-sym::after{-webkit-text-fill-color:#fff;color:#fff}