/* Thin Air Studios, brand V1 on Mist. One theme (light mist), one accent (viridian), radii 8px controls / 16px panels.
   Motion has three jobs, all transform/opacity only and all off under prefers-reduced-motion:
   1. Load: the mark builds itself (peak rises, air curls ripple in, wordmark settles), per the brand book's 1.1s reveal.
   2. Scroll: the stacked showcase logo comes apart into the header's horizontal lockup; the bar and nav arrive as it lands.
   3. Sections rise into view; the game's air curls drift in at different speeds. */
@font-face { font-family: "Inter"; src: url("assets/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("assets/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --charcoal: #2A2D30; --ink: #1B1D20; --slate: #5B626C; --body: #3E4449;
  --viridian: #40826D; --viridian-deep: #2F6B58;
  --mist: #DCEBE4; --mist-line: #BFD3CA; --cloud: #F3F5F4; --white: #FFFFFF;
  --r-ctl: 8px; --r-panel: 16px; --bar: 72px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-glide: cubic-bezier(.2, .6, .3, 1);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mist); color: var(--charcoal); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.025em; }
:focus-visible { outline: 2px solid var(--viridian-deep); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
.skip { position: fixed; left: 16px; top: -60px; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--charcoal); color: var(--white); font-weight: 600; z-index: 40; }
.skip:focus { top: 12px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-ctl); font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color .2s, border-color .2s, transform .2s var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--charcoal); color: var(--white); }
.btn.primary:hover { background: var(--ink); }
.btn.ghost { border: 1px solid #A9BDB4; color: var(--charcoal); }
.btn.ghost:hover { border-color: var(--charcoal); }
.text-link { color: var(--viridian-deep); font-weight: 600; text-underline-offset: 4px; }

/* Logo artwork colours */
.peak, .glyph { fill: var(--charcoal); }
.curl, .glyph.accent, .sweep path { fill: var(--viridian); }

/* Header: fixed bar. The lockup inside it is the same artwork the hero shows. */
.top { position: fixed; inset: 0 0 auto; z-index: 20; padding-top: env(safe-area-inset-top, 0px); }
.top-bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--mist) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--mist-line); }
.bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--bar); }
.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lockup .sym { width: 58px; }
.lockup .word { width: 118px; }
nav { display: flex; gap: 28px; }
nav a { text-decoration: none; color: var(--slate); font-size: 15px; font-weight: 500; transition: color .2s; }
nav a:hover { color: var(--charcoal); }
@media (max-width: 720px) { nav a:not(:last-child) { display: none; } .lockup .sym { width: 50px; } .lockup .word { width: 100px; } }

/* Hero: a showcase. Nothing but the mark, one line, one sub line, two actions. */
.hero { min-height: 100dvh; display: grid; place-content: center; justify-items: center; text-align: center; gap: clamp(32px, 4.5vh, 52px); padding-block: calc(var(--bar) + 24px) 64px; }
.slot { width: clamp(220px, 22vw, 420px); aspect-ratio: 392 / 363; }
.slot img { width: 100%; }
.hero h1 { font-size: clamp(32px, 3.4vw, 58px); line-height: 1.12; font-weight: 700; max-width: 20ch; margin-inline: auto; }
.hero .lead { margin: 14px auto 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--slate); max-width: 40ch; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Sections */
.sec { padding-block: clamp(72px, 10vw, 128px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 48px; align-items: end; }
.sec h2, .sec-title { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; font-weight: 700; }
.note { color: var(--slate); max-width: 52ch; }
@media (max-width: 760px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }

/* Work: a typographic index */
ul.index { list-style: none; padding: 0; margin-top: 56px; border-bottom: 1px solid var(--mist-line); }
.index li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 10px 48px; padding-block: 32px; border-top: 1px solid var(--mist-line); }
.index h3 { font-size: clamp(24px, 2.7vw, 34px); line-height: 1.15; font-weight: 650; }
.index .sector { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--viridian-deep); }
.index p { color: var(--body); align-self: center; max-width: 46ch; }
@media (max-width: 760px) { .index li { grid-template-columns: minmax(0, 1fr); padding-block: 26px; } }

/* What we build: the one raised panel */
.panel { background: var(--cloud); border-radius: var(--r-panel); padding: clamp(32px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; }
.panel .how { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--body); max-width: 34ch; }
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; align-content: start; }
.services dt { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.services dt::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--viridian); margin-bottom: 14px; }
.services dd { margin-top: 6px; color: var(--slate); }
@media (max-width: 900px) { .panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .services { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* The game: statement + the air sweep cropped at the page edge (brand book device 01) */
.game { position: relative; overflow: clip; view-timeline: --game block; }
.game .wrap { position: relative; z-index: 1; }
.game h2 { max-width: 15ch; }
.game p { margin-top: 20px; color: var(--slate); max-width: 40ch; }
.game .text-link { display: inline-block; margin-top: 16px; }
.sweep { position: absolute; z-index: 0; right: -14%; top: 50%; translate: 0 -50%; width: clamp(560px, 62vw, 980px); max-width: none; overflow: visible; }
@media (max-width: 760px) { .game { padding-top: 260px; } .sweep { top: 40px; translate: none; right: -180px; width: 560px; } }

/* Contact */
.contact { border-top: 1px solid var(--mist-line); padding-block: clamp(72px, 10vw, 128px) clamp(88px, 12vw, 144px); }
.contact p.note { margin-top: 16px; }
.mail { display: inline-block; margin-top: 32px; font-size: clamp(24px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--viridian); text-decoration-thickness: .07em; text-underline-offset: .16em; transition: color .2s; }
.mail:hover { color: var(--viridian-deep); }
.contact .alt { display: block; margin-top: 20px; }

.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mist-line); color: var(--slate); font-size: 14px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Load reveal. Runs on whichever copy of the mark is showing. */
  .peak { transform-box: fill-box; transform-origin: 50% 100%; animation: peak-in .9s var(--ease-out) .1s both; }
  .curl { transform-box: fill-box; transform-origin: 0 50%; animation: curl-in .9s var(--ease-out) calc(.38s + var(--i) * 90ms) both; }
  .glyph { transform-box: fill-box; animation: glyph-in .6s var(--ease-out) calc(.78s + var(--i) * 32ms) both; }
  .hero .copy { animation: up .9s var(--ease-out) 1.15s both; }
  .hero .actions { animation: up .9s var(--ease-out) 1.3s both; }
  @keyframes peak-in { from { opacity: 0; transform: translateY(26%) scaleY(.7); } }
  @keyframes curl-in { from { opacity: 0; transform: translateX(-30%) scaleX(.85); } }
  @keyframes glyph-in { from { opacity: 0; transform: translateY(40%); } }
  @keyframes up { from { opacity: 0; transform: translateY(16px); } }

  /* 2. Scroll morph: the header lockup starts as the hero's stacked mark (offsets set by the inline script) and glides home.
        Without scroll timelines the hero keeps its own mark and the header is simply always there. */
  @supports (animation-timeline: scroll()) {
    .js .slot img { visibility: hidden; }
    .js .lockup .sym, .js .lockup .word { transform-origin: 0 0; will-change: transform;
      animation: glide var(--ease-glide) both; animation-timeline: scroll(root); animation-range: 0 var(--glide-end, 60vh); }
    .js .lockup .word { animation-name: glide-word; }
    /* Two beats: the stacked mark shrinks up as one piece, the symbol docks, then the wordmark slides out from under it
       and rises into place beside it. The path never lets the two overlap (offsets measured by the inline script). */
    @keyframes glide {
      from { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--k, 1)); }
      50% { transform: translate(calc(var(--dx, 0px) * .4), calc(var(--dy, 0px) * .4)) scale(calc(1 + (var(--k, 1) - 1) * .4)); }
      75%, to { transform: none; }
    }
    @keyframes glide-word {
      from { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--k, 1)); }
      50% { transform: translate(var(--dx2, 0px), var(--dy2, 0px)) scale(var(--k2, 1)); }
      75% { transform: translateY(var(--drop, 40px)); }
    }

    .js .top-bg, .js nav { animation: bar-in linear both; animation-timeline: scroll(root); animation-range: calc(var(--glide-end, 60vh) * .7) var(--glide-end, 60vh); }
    @keyframes bar-in { from { opacity: 0; visibility: hidden; } to { visibility: visible; } }

    /* 3. Sections rise as they enter; the game's curls drift in at their own speeds. */
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    @keyframes rise { from { opacity: 0; transform: translateY(36px); } }
    .sweep path { animation: drift var(--ease-out) both; animation-timeline: --game; animation-range: entry 0% cover 50%; }
    .sweep path:nth-child(1) { --x: 40px; } .sweep path:nth-child(2) { --x: 80px; } .sweep path:nth-child(3) { --x: 120px; } .sweep path:nth-child(4) { --x: 160px; }
    @keyframes drift { from { opacity: 0; transform: translateX(var(--x)); } }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }