/* AZRALAG site styles: tokens, base, components. One file, no build step.
   Decoration rules (what may appear here, where motion is allowed, which properties may move)
   are in CLAUDE.md and checked by tools/check.mjs; keep this comment free of those words. */

@font-face{font-family:"Azralag Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/assets/fonts/azralag-sans-latin.v1.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215}
/* Metric-matched fallbacks over Arial (Liberation Sans on Linux); values from tools/fonts.md. */
@font-face{font-family:"Azralag Sans Fallback";font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans");
  size-adjust:100.7%;ascent-override:101.8%;descent-override:27.3%;line-gap-override:0%}
@font-face{font-family:"Azralag Sans Fallback";font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");
  size-adjust:97.1%;ascent-override:105.6%;descent-override:28.3%;line-gap-override:0%}
:root{
  --paper:#FAF9F6;--surface:#FFFFFF;--sunk:#F1EFEA;
  --ink:#17191E;--ink-2:#454A54;--ink-3:#5E636D;
  --accent:#1B4E9B;--accent-hover:#123B78;--on-accent:#FFFFFF;--accent-tint:#E8EEF7;
  --rule:#DEDBD3;--rule-strong:#8C9099;--error:#A4262C;--success:#1E6B3A;
  --font:"Azralag Sans","Azralag Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fs-h1:clamp(2rem,1.4rem + 2.4vw,3rem);--fs-h2:clamp(1.5rem,1.25rem + 1vw,2rem);--fs-h3:1.25rem;
  --fs-lede:1.25rem;--fs-body:1.0625rem;--fs-small:.875rem;
  --s1:.25rem;--s2:.5rem;--s3:1rem;--s4:1.5rem;--s5:2rem;--s6:3rem;--s7:4rem;--s8:6rem;
  --container:72rem;--measure:38rem;--radius:2px;
  --gutter:clamp(1.25rem,5vw,2.5rem);--inset:max(var(--gutter),(100% - var(--container)) / 2);--section:var(--s6);
  --card-radius:6px;--shadow-1:0 1px 2px rgb(23 25 30 / .06);--shadow-2:0 6px 20px -6px rgb(23 25 30 / .18);
}
/* art:start */
:root{--dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 166'%3E%3Cpath d='M140 10h.01M124.4 19h.01M108.8 28h.01M93.2 37h.01M77.6 46h.01M62.1 55h.01M46.5 64h.01M30.9 73h.01M15.3 82h.01M155.6 19h.01M140 28h.01M124.4 37h.01M108.8 46h.01M93.2 55h.01M77.6 64h.01M62.1 73h.01M46.5 82h.01M30.9 91h.01M171.2 28h.01M155.6 37h.01M140 46h.01M124.4 55h.01M108.8 64h.01M93.2 73h.01M77.6 82h.01M62.1 91h.01M46.5 100h.01M186.8 37h.01M171.2 46h.01M155.6 55h.01M140 64h.01M124.4 73h.01M108.8 82h.01M93.2 91h.01M77.6 100h.01M62.1 109h.01M202.4 46h.01M186.8 55h.01M171.2 64h.01M155.6 73h.01M140 82h.01M124.4 91h.01M108.8 100h.01M93.2 109h.01M77.6 118h.01M217.9 55h.01M202.4 64h.01M186.8 73h.01M171.2 82h.01M155.6 91h.01M140 100h.01M124.4 109h.01M108.8 118h.01M93.2 127h.01M233.5 64h.01M217.9 73h.01M202.4 82h.01M186.8 91h.01M171.2 100h.01M155.6 109h.01M140 118h.01M124.4 127h.01M108.8 136h.01M249.1 73h.01M233.5 82h.01M217.9 91h.01M202.4 100h.01M186.8 109h.01M171.2 118h.01M155.6 127h.01M140 136h.01M124.4 145h.01M264.7 82h.01M249.1 91h.01M233.5 100h.01M217.9 109h.01M202.4 118h.01M186.8 127h.01M171.2 136h.01M155.6 145h.01M140 154h.01' stroke='%23C4BFB4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --skyline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 128' fill='none' stroke='%23C4BFB4' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M40 120V74h22V120M70 120V50h18V120M92 120V66h26V120M124 120V24h20V120M150 120V56h16V120M170 120V38h24V120M200 120V70h20V120M228 120V12h22V120M256 120V46h18V120M280 120V62h26V120M312 120V32h18V120M336 120V76h22V120M124 24l10-8 10 8M228 12v-8M285 62h16M18 120c2-20 1-40 -3-40m0 0c-7-4-14-1-17 4m17-4c5-7 13-6 17 0m-17 0c-3-7-10-9-15-6m15 6c5 1 9 7 9 12M380 120c2-23 1-46 -3-46m0 0c-7-4-14-1-17 4m17-4c5-7 13-6 17 0m-17 0c-3-7-10-9-15-6m15 6c5 1 9 7 9 12M404 120c2-16 1-32 -3-32m0 0c-7-4-14-1-17 4m17-4c5-7 13-6 17 0m-17 0c-3-7-10-9-15-6m15 6c5 1 9 7 9 12M420 112h120M424 112v8M456 112v8M488 112v8M520 112v8'/%3E%3Cpath d='M0 120H560M20 125h40M110 125h70M260 125h50M440 125h60' stroke='%23C9D7EE'/%3E%3C/svg%3E")}
/* art:end */
html{color-scheme:light;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.6 var(--font);font-synthesis:none;-webkit-text-size-adjust:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.15em}a:hover{color:var(--accent-hover)}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 1.25rem;background:var(--accent);color:var(--on-accent);font-weight:600;border-radius:var(--radius);text-decoration:none}
.btn:hover{background:var(--accent-hover);color:var(--on-accent)}

/* Base */
*,::before,::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;overflow-wrap:break-word}
h1,h2,h3{font-weight:600;color:var(--ink);text-wrap:balance;margin:0 0 var(--s3)}
h1{font-size:var(--fs-h1);line-height:1.12;letter-spacing:-.01em;max-width:22ch}
h2{font-size:var(--fs-h2);line-height:1.2}
h3{font-size:var(--fs-h3);line-height:1.3}
p,ul,ol{margin:0 0 var(--s3);max-width:var(--measure)}
ul,ol{padding-left:1.25rem}
li+li{margin-top:var(--s2)}
strong,b{font-weight:600}
main li>a:only-child{display:inline-block;padding-block:.125rem}
img,svg{max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
.btn{padding-block:var(--s2);line-height:1.25;border:0;cursor:pointer}
.btn:disabled{background:var(--sunk);color:var(--ink-3);outline:1px solid var(--rule-strong);outline-offset:-1px;cursor:not-allowed}

/* Skip link */
.skip{position:absolute;left:var(--s3);top:-10rem;z-index:2;padding:var(--s2) var(--s3);background:var(--paper);font-weight:600}
.skip:focus{top:var(--s3)}

/* Header. Below 60rem the nav and the language link are reached through the <details> menu. */
.site-header{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3);padding:var(--s3) var(--inset);border-bottom:1px solid var(--rule)}
.wordmark{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;font-size:1.125rem;letter-spacing:.06em;text-decoration:none}
.wordmark:hover{color:var(--ink)}
.site-header>nav,.site-header>.lang{display:none}
.site-header>.cta{grid-row:2;grid-column:1/-1;justify-self:start}
.menu{grid-row:1;grid-column:2}
.menu>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border:1px solid var(--rule-strong);border-radius:var(--radius);font-weight:600;cursor:pointer;list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu[open]>summary{background:var(--sunk)}
.menu ul{position:absolute;left:0;right:0;top:100%;z-index:1;margin:0;max-width:none;list-style:none;padding:var(--s2) var(--inset) var(--s3);background:var(--paper);border-bottom:1px solid var(--rule)}
.menu li{margin:0}
.menu a,.site-header>nav a,.site-header>.lang{align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.menu a,.site-header>nav a{display:flex}
.site-header a:not(.btn):not(.wordmark):hover{color:var(--accent);text-decoration:underline}
[aria-current="page"]{font-weight:600}
.site-header a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px}
@media (min-width:40rem){
  .site-header{grid-template-columns:1fr auto auto}
  .site-header>.cta{grid-row:1;grid-column:2}
  .menu{grid-column:3}
}
@media (min-width:60rem){
  .site-header{display:flex;gap:var(--s2) var(--s5)}
  .site-header>nav{display:block;margin-right:auto}
  .site-header>.lang{display:flex}
  .site-header>nav ul{display:flex;gap:var(--s5);list-style:none;margin:0;padding:0}
  .site-header>nav li{margin:0}
  .menu{display:none}
}

/* Main column and bands. Every child of main is a full-bleed band; --inset keeps its content in
   the container. Bands alternate paper and .alt (--sunk); the closing CTA panel is --accent-tint. */
main{display:block}
main>*{padding:var(--section) var(--inset)}
main>:first-child{padding-top:var(--s7)}
main>section{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.alt{background:var(--sunk)}
main>section>h2:only-of-type{margin-bottom:var(--s4)}
.kicker,.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--ink-2)}
.kicker{margin-bottom:var(--s2)}
.meta,.hint{font-size:var(--fs-small);line-height:1.5;color:var(--ink-3)}
@media (min-width:60rem){
  :root{--section:5rem}
  /* 12 columns with 2rem gaps: the h2 takes columns 1-4, everything else 5-12. */
  .split{display:flow-root}
  .split>h2{float:left;width:calc((100% - 22rem) / 3 + 6rem)}
  .split>:not(h2){margin-left:calc((100% - 22rem) / 3 + 8rem)}
}

/* Breadcrumbs */
.crumbs{margin-bottom:var(--s5);font-size:var(--fs-small);line-height:1.5}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 var(--s2);list-style:none;margin:0;padding:0;max-width:none}
.crumbs li{display:flex;align-items:center;min-height:24px;margin:0}
.crumbs li+li::before{content:"›";content:"›"/"";margin-right:var(--s2);color:var(--ink-3)}
.crumbs [aria-current="page"]{font-weight:400;color:var(--ink-3)}
.crumbs a{display:inline-block;padding-block:.125rem}

/* Decorative inline drawings (tools/hero/gen-icons.mjs). Width and aspect-ratio reserve the box. */
.art{display:block;width:8rem;height:auto;aspect-ratio:5/4;flex:none}

/* Service cards: illustration, h3 link, one sentence, "Typical work" meta line. The h3 link is
   the card's only link; its ::after covers the card, so the whole card is the target and the
   focus ring is drawn around the card. */
.services{list-style:none;padding:0;margin:var(--s4) 0 0;max-width:none;display:grid;gap:var(--s4)}
.services>li{position:relative;margin:0;padding:var(--s4);background:var(--surface);border:1px solid var(--rule);border-radius:var(--card-radius);box-shadow:var(--shadow-1)}
.services>li:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-2)}
.services .art{width:6.5rem;margin:calc(-1 * var(--s2)) 0 var(--s2) calc(-1 * var(--s2))}
.services h3{margin-bottom:var(--s2)}
.services h3 a{text-decoration:none}
.services h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--card-radius)}
.services h3 a:hover{text-decoration:underline}
.services h3 a:focus-visible{outline:0}
.services h3 a:focus-visible::after{outline:3px solid var(--accent);outline-offset:2px}
.services p{margin-bottom:var(--s1)}
.services .meta{margin:0}
@media (min-width:40rem){
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services>li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s4);align-content:start}
  .services>li>*{grid-column:2}
  .services .art{grid-column:1;grid-row:1/span 3;margin:0}
}
@media (min-width:60rem){
  .services:has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .services:has(>li:nth-child(3):last-child)>li{display:block}
  .services:has(>li:nth-child(3):last-child) .art{margin:calc(-1 * var(--s2)) 0 var(--s2) calc(-1 * var(--s2))}
}

/* Feature rows: an illustration beside a short text, sides flipping per row from 40rem. */
.rows{display:grid;gap:var(--s5);margin-bottom:var(--s4)}
.row{display:grid;gap:var(--s2) var(--s5);align-items:center}
.row .art{width:6.5rem}
.row p{max-width:none}
.row>:not(.art)>:last-child,.row>p:last-child{margin-bottom:0}
@media (min-width:40rem){
  .row{grid-template-columns:9rem minmax(0,1fr)}
  .row .art{width:9rem}
  .rows>.row:nth-child(even){grid-template-columns:minmax(0,1fr) 9rem}
  .rows>.row:nth-child(even)>.art{order:2}
  .row.lg{grid-template-columns:minmax(0,1fr) 11rem}
  .row.lg .art{width:11rem}
}
@media (min-width:60rem){
  .row{grid-template-columns:10rem minmax(0,1fr)}
  .rows>.row:nth-child(even){grid-template-columns:minmax(0,1fr) 10rem}
  .row .art{width:10rem}
  .row.lg{grid-template-columns:minmax(0,1fr) 16rem}
  .row.lg .art{width:16rem}
}

/* Process strip: numbered steps joined by a line; vertical on phones, across from 48rem.
   A string marker keeps list semantics in WebKit; the number is drawn by ::before. */
.steps{position:relative;display:grid;gap:var(--s4);list-style:"\200B";padding:0;margin:var(--s4) 0 0;max-width:none;counter-reset:step;font-variant-numeric:tabular-nums}
.steps::before{content:"";position:absolute;left:calc(1.25rem - 1px);top:1.25rem;bottom:1.25rem;width:2px;background:var(--accent);opacity:.35;transform-origin:top}
.steps>li{position:relative;counter-increment:step;margin:0;padding-left:3.5rem;min-height:2.5rem;max-width:var(--measure)}
.steps>li::before{content:counter(step);content:counter(step)/"";position:absolute;left:0;top:-.3rem;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:2px solid var(--accent);border-radius:50%;background:var(--surface);color:var(--accent);font-weight:600}
@media (min-width:48rem){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
  .steps::before{top:calc(1.25rem - 1px);bottom:auto;left:1.25rem;right:calc((100% - 3 * var(--s5)) / 4 - 1.25rem);width:auto;height:2px;transform-origin:left}
  .steps>li{padding:3.75rem 0 0}
  .steps>li::before{top:0}
}

/* Inline technology list */
.tech{list-style:none;padding:0}
.tech li{display:inline;margin:0}
.tech li+li::before{content:"·";content:"·"/"";margin:0 var(--s2);color:var(--ink-3)}

/* Closing CTA panel */
main>.cta-panel{background:var(--accent-tint)}
.cta-panel p{color:var(--ink)}

/* Form */
.contact-form{max-width:var(--measure);margin-bottom:var(--s4)}
.contact-form>label,legend{display:block;margin:var(--s4) 0 var(--s1);padding:0;font-size:var(--fs-small);font-weight:600}
.contact-form>label:first-child{margin-top:0}
.contact-form>label span{font-weight:400;color:var(--ink-3)}
.contact-form input:not([type=radio]),.contact-form textarea{display:block;width:100%;min-height:44px;padding:var(--s2) .75rem;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--surface)}
.contact-form textarea{resize:vertical}
fieldset{min-width:0;margin:var(--s4) 0 0;padding:0;border:0}
fieldset label{display:flex;align-items:center;gap:var(--s2);min-height:44px;cursor:pointer}
fieldset input{flex:none;width:1.5rem;height:1.5rem;margin:0;accent-color:var(--accent)}
.hint{margin:var(--s1) 0 0}
.form-error{margin:var(--s4) 0 0;padding-left:var(--s3);border-left:3px solid var(--error);color:var(--error);font-weight:600}
.contact-form .btn{margin-top:var(--s4)}
.form-sent,noscript>p{max-width:var(--measure);margin:0 0 var(--s4);padding:var(--s4);background:var(--surface);border-left:3px solid var(--success)}
noscript>p{border-left-color:var(--accent)}
/* Without JavaScript the form can't send (contact.js enables the button), so only the noscript note shows. */
@media (scripting:none){.contact-form{display:none}}

/* 404 */
.notfound p{font-size:var(--fs-lede);line-height:1.5}

/* Footer */
.site-footer{display:grid;gap:var(--s5);padding:var(--s7) var(--inset) var(--s5);background:var(--sunk);font-size:var(--fs-small);line-height:1.5}
.site-footer p,.site-footer ul{margin:0 0 var(--s2)}
.site-footer ul{list-style:none;padding:0}
.site-footer li{margin:0}
.site-footer li a,.foot-brand a:not(.wordmark){display:inline-block;padding-block:.25rem}
.foot-h{font-size:var(--fs-small);line-height:1.5;margin:0 0 var(--s2)}
.foot-legal{grid-column:1/-1;max-width:none;padding-top:var(--s4);border-top:1px solid var(--rule);color:var(--ink-3)}
@media (min-width:40rem){.site-footer{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (min-width:60rem){.site-footer{grid-template-columns:repeat(12,1fr);column-gap:var(--s5)}.foot-brand{grid-column:1/5}.foot-col{grid-column:span 4}}

/* Band motifs: a dot lattice (.dots) and the line-drawn skyline (.skyline), both from the art
   block above, drawn behind the content from 60rem only. */
@media (min-width:60rem){
  .dots::before,.skyline::after{content:"";position:absolute;z-index:-1;pointer-events:none;background:no-repeat center/contain}
  .dots::before{top:var(--s5);right:calc(var(--inset) - 9rem);width:22rem;aspect-ratio:280/166;background-image:var(--dots);opacity:.8}
  .skyline{padding-bottom:calc(var(--section) + 5rem)}
  .skyline::after{left:var(--inset);right:var(--inset);bottom:0;height:7.5rem;background-image:var(--skyline);background-position:right bottom;background-size:auto 100%}
}

/* Motion: hover only on composited properties, and the rest follows the scroll position
   (scroll-driven animations). Browsers without animation-timeline show the final, static state. */
@media (prefers-reduced-motion:no-preference){
  a,.btn,.menu>summary{transition:color .15s,background-color .15s}
  .services>li{transition:translate .15s,box-shadow .15s,border-color .15s}
  .services>li:hover{translate:0 -3px}
  @supports (animation-timeline:view()){
    main>section{view-timeline:--band}
    .services>li,.row{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .steps{view-timeline:--steps}
    .steps::before{animation:grow-y linear both;animation-timeline:--steps;animation-range:entry 30% cover 55%}
    @keyframes rise{from{transform:translateY(1.5rem)}}
    @keyframes grow-y{from{transform:scaleY(0)}}
    @keyframes grow-x{from{transform:scaleX(0)}}
    @keyframes drift{from{transform:translateY(3rem)}to{transform:translateY(-3rem)}}
    @media (min-width:48rem){.steps::before{animation-name:grow-x}}
    @media (min-width:60rem){
      .dots::before{animation:drift linear both;animation-timeline:--band;animation-range:cover}
      .skyline::after{animation:drift-sm linear both;animation-timeline:--band;animation-range:cover}
      @keyframes drift-sm{from{transform:translateY(1rem)}to{transform:translateY(0)}}
    }
  }
}

/* Hero: text plus a decorative illustration. The illustration is an <img>, so all of its drawing
   and motion live inside the SVG file. Width/height attributes plus aspect-ratio reserve its box. */
.hero{display:grid;gap:var(--s5);align-items:center}
.hero>div>:last-child{margin-bottom:0}
.hero .btn{margin-top:var(--s2)}
.hero-art{display:block;width:100%;max-width:24rem;height:auto;aspect-ratio:640/520;justify-self:center}
.hero-lite{display:none}
@media (min-width:40rem){.hero-art{max-width:30rem}}
@media (min-width:60rem){
  .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5) var(--s6)}
  .hero-art{max-width:none;margin-block:calc(-1 * var(--s5))}
  /* Inner pages: crumbs across, H1 and lede left, the small motif right. */
  .hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,28rem);column-gap:var(--s6);align-items:center}
  .hero-top>*{grid-column:1}
  .hero-top>.hero-lite{display:block;grid-column:2;grid-row:2/span 2;width:100%;height:auto;aspect-ratio:480/240}
}