/* =========================================================================
   Saga Digital — elegant studio (v62)
   Light editorial "paper & ink"; accents from the logo gradient.
   ========================================================================= */

:root {
  --paper:        #edf1f6;
  --paper-tint:   #f6f8fb;
  --surface:      #ffffff;

  --ink:          #00154a;
  --ink-2:        #46566c;
  --ink-3:        #7c8a9e;

  --hair:         rgba(10, 26, 48, 0.12);
  --hair-2:       rgba(10, 26, 48, 0.22);

  --cyan:         #00d3ee;
  --azure:        #0a6ce2;
  --navy:         #00154a;
  --grad:         linear-gradient(90deg, #00d8f0 0%, #1aa0ee 46%, #0a6ce2 100%);

  --shadow-card:  0 1px 2px rgba(10, 26, 48, 0.04), 0 18px 48px -28px rgba(10, 26, 48, 0.30);
  --shadow-lift:  0 2px 6px rgba(10, 26, 48, 0.06), 0 30px 70px -34px rgba(10, 26, 48, 0.40);
  --shadow-frame: 0 2px 8px rgba(10,26,48,.05), 0 40px 90px -48px rgba(10,26,48,.5);

  --max:          1180px;
  --gutter:       clamp(1.15rem, 4vw, 3.25rem);

  --serif:        "Newsreader", Georgia, "Times New Roman", serif;
  --sans:         "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease:         cubic-bezier(.2, .8, .2, 1);
  --ease-collapse: cubic-bezier(.42, 0, .58, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* page background lives on the root so the fixed aurora canvas (z-index:-1)
     paints above it; body must stay transparent or it would cover the aurora */
  background:
    radial-gradient(120% 80% at 50% -12%, #f1f4f8 0%, rgba(241,244,248,0) 58%),
    var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: rgba(10, 108, 226, 0.16); color: var(--ink); }

:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 4px; }

/* aurora canvas: fixed, painted just above the root background and behind all
   page content (body is transparent, so it is now actually visible) */
#aurora {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }

.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 200;
  transform: translateY(-160%);
  background: var(--ink); color: #fff; padding: 0.7rem 1.05rem; border-radius: 999px;
  font-size: 0.85rem; transition: transform 180ms var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* the brand "thread" hairline at the very top */
.thread-top {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 150;
  background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; opacity: 0.95; pointer-events: none;
}
body.is-ready .thread-top { animation: threadDraw 1.1s var(--ease) 0.15s forwards; }
@keyframes threadDraw { to { transform: scaleX(1); } }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  opacity: 0;
  transition: opacity 0.5s var(--ease), background 280ms var(--ease), border-color 280ms var(--ease), backdrop-filter 280ms var(--ease);
  border-bottom: 1px solid transparent;
}
/* held back until the real fonts are ready (same gate as the hero) so the wordmark
   and nav never flash in a fallback face on first paint */
body.is-ready .site-header { opacity: 1; }
.site-header.is-stuck {
  background: rgba(237, 241, 246, 0.78);
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--hair);
}
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; }
.brand-text { display: grid; gap: 0.05rem; line-height: 1.1; }
.brand-text strong { font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em; }
.brand-text small { color: var(--ink-3); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a { position: relative; color: var(--ink-2); font-size: 0.9rem; padding: 0.2rem 0; transition: color 200ms var(--ease); }
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform 280ms var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }

.switcher { display: inline-flex; padding: 0.18rem; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); }
.switcher-button {
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-3);
  min-width: 2.3rem; min-height: 1.9rem; cursor: pointer; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.switcher-button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ---- reveal-on-load ---- */
.reveal { opacity: 0; transform: translateY(16px); }
body.is-ready .reveal { animation: revealUp 0.9s var(--ease) var(--delay, 0s) forwards; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

/* text re-reveal used when switching language */
@keyframes textRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.is-ready .text-replay { animation: textRise 0.55s var(--ease) both; animation-delay: var(--rd, 0s); }

/* ---- hero ---- */
.hero { display: flex; align-items: center; min-height: calc(100svh - 10px); padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 9vw, 7rem); }
.hero-inner { width: 100%; max-width: 1120px; }

.hero-masthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: clamp(1rem, 2.4vw, 1.5rem);
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--hair);
  font-size: 0.82rem; letter-spacing: 0.01em;
}
.hero-masthead .mh-left { color: var(--ink-2); font-weight: 500; }
.hero-masthead .mh-right { color: var(--ink-3); }

.hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.1rem, 8.6vw, 7.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 17ch;
  opacity: 0;
}
/* the raw <h1> text is held invisible until fonts are ready AND the deferred
   script has wrapped it into word-spans — so the unwrapped heading never paints
   in a fallback serif. Instant (no transition) so reduced-motion adds no motion. */
body.is-ready .hero-title { opacity: 1; }
.word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0.02em; margin: -0.14em 0; }
.word-inner { display: inline-block; transform: translateY(112%); }
body.is-ready .word-inner { animation: wordRise 0.95s var(--ease) forwards; animation-delay: calc(var(--rise-base, 0.35s) + var(--wi, 0) * 0.05s); }
@keyframes wordRise { to { transform: translateY(0); } }

/* the three brand-coloured words read as ONE continuous cyan->blue sweep:
   each carries the next slice of the gradient, so they flow together instead of
   each repeating the same gradient. Each also gets its own type treatment. */
.word-inner.em {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-right: 0.04em;
}
/* eleganse — the cyan end of the sweep, set in italic. A luminous mid-stop gives
   the gradient a soft satin depth, and a whisper of tracking lets the slanted serif
   breathe — quietly more refined. It is the one accent word; the rest of the title
   sits in the navy ink. */
.word-inner.em-elegance {
  background-image: linear-gradient(96deg, #00d3ee 0%, #18c2ef 45%, #1aa0ee 100%);
  font-style: italic;
  letter-spacing: 0.006em;
  padding-right: 0.07em;
}

/* approach-title accent words — single solid accent colour, upright (no italics).
   A flat colour keeps these mid-size serif words legible; the gradient washed
   the cyan end out too much at this size. */
.section-title .tw {
  color: var(--azure);
}

/* aurora-muting scrim behind prominent text. NOT a panel: a soft, semi-transparent
   wash of the page colour, peaking over the text and fading to nothing well inside
   its own box, so it has no visible edge. It just calms the beads enough to keep the
   text legible. Sits above the aurora (-1 inside an isolated context) but below the
   text, so it never tints the type itself. */
.hero-title, .lead, .section-title, .acc-title, .acc-body,
.split-intro > p:not(.eyebrow), .work-head > p:not(.eyebrow), .contact-intro,
.work-sector, .work-name, .work-desc {
  position: relative;
  isolation: isolate;
}
.hero-title::before, .lead::before, .section-title::before, .acc-title::before, .acc-body::before,
.split-intro > p:not(.eyebrow)::before, .work-head > p:not(.eyebrow)::before, .contact-intro::before,
.work-sector::before, .work-name::before, .work-desc::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.5em -1.3em;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(237, 241, 246, 0.66) 0%,
    rgba(237, 241, 246, 0.56) 40%,
    rgba(237, 241, 246, 0) 72%);
}

.hero-rule {
  height: 1px; width: min(20rem, 60%);
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 clamp(1.6rem, 3.5vw, 2.2rem);
  background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; opacity: 0.9;
}
body.is-ready .hero-rule { animation: threadDraw 1s var(--ease) 0.9s forwards; }

.lead { max-width: 46ch; font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.62; color: var(--ink-2); }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.4rem; margin-top: clamp(1.8rem, 4vw, 2.6rem); }

.btn-primary {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.1rem; padding: 0 1.5rem; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.005em;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), background 240ms var(--ease);
}
.btn-primary .arrow { transition: transform 240ms var(--ease); }
.btn-primary:hover { transform: translateY(-2px); background: #0a2a66; box-shadow: var(--shadow-lift); }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-text { display: inline-flex; align-items: center; gap: 0.45rem; position: relative; font-size: 0.95rem; font-weight: 500; color: var(--ink); padding: 0.2rem 0; }
.btn-text::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1.5px; width: 100%; background: var(--hair-2); transform-origin: 0 50%; transition: background 260ms var(--ease); }
.btn-text:hover::after { background: var(--grad); }
.btn-text .arrow { transition: transform 240ms var(--ease); }
.btn-text:hover .arrow { transform: translate(3px, -3px); }

/* ---- sections ---- */
.section { padding: clamp(4.5rem, 10vw, 8.5rem) 0; }
.section-line { height: 1px; background: var(--hair); border: 0; margin: 0; }

/* scroll reveal — sections rise + fade as they enter the viewport, echoing the
   hero's load-in. Animation-driven (not transition) so a stagger delay can be
   layered on and so it never collides with elements that have their own
   transitions (e.g. the work-item hover shift). */
[data-reveal] { opacity: 0; transform: translateY(26px); }
body.is-ready [data-reveal].in-view { animation: revealUp 0.9s var(--ease) both; }

/* cascade group — each direct child enters in sequence (delay set per child by JS
   via --cd), the way the hero title's words rise one after another */
[data-cascade] > * { opacity: 0; transform: translateY(22px); }
body.is-ready [data-cascade].in-view > * { animation: revealUp 0.85s var(--ease) both; animation-delay: var(--cd, 0s); }

.section-title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.018em; }

/* shared two-column "intro beside content" layout */
.split-layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.split-intro { position: sticky; top: 108px; }
.split-intro .eyebrow { margin-bottom: 1rem; }
.split-intro .section-title { margin-bottom: 1.1rem; }
.split-intro p { color: var(--ink-2); max-width: 34ch; line-height: 1.62; }

/* ---- approach accordion ---- */
.accordion { border-top: 1px solid var(--hair); }
.acc-item { border-bottom: 1px solid var(--hair); }
.acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, 2.6vw, 1.7rem) 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink);
}
.acc-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height: 1.12; letter-spacing: -0.01em; transition: color 240ms var(--ease); }
.acc-head:hover .acc-title { color: var(--azure); }
.acc-icon { position: relative; width: 20px; height: 20px; flex: none; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink-2); transition: transform 0.4s var(--ease), opacity 0.3s var(--ease); }
.acc-icon::before { width: 15px; height: 1.5px; transform: translate(-50%, -50%); }
.acc-icon::after  { width: 1.5px; height: 15px; transform: translate(-50%, -50%); }
.acc-item.open .acc-icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; min-height: 0; }
.acc-body { padding: 0 0 clamp(1.3rem, 2.8vw, 1.9rem); max-width: 62ch; }
.acc-body p { color: var(--ink-2); line-height: 1.64; }
.acc-body p + p { margin-top: 0.95rem; }
.acc-key { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--azure); margin-right: 0.7rem; vertical-align: 1.5px; }
.acc-tags { margin-top: 1.1rem; font-size: 0.85rem; color: var(--ink-3); letter-spacing: 0.01em; }

/* ---- work: heading, live hover preview, index ---- */
.work-head { max-width: 40ch; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.work-head .eyebrow { margin-bottom: 1rem; }
.work-head .section-title { margin-bottom: 1.1rem; }
.work-head p { color: var(--ink-2); max-width: 40ch; line-height: 1.62; }

/* in-row site preview — a still browser frame docked in each project row,
   showing the live site (wide screens only; the iframe is lazy-loaded) */
.wp-card { border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lift); }
.wp-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--hair); background: var(--paper-tint); }
.wp-dots { display: inline-flex; gap: 0.32rem; flex: none; }
.wp-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--hair-2); }
.wp-url { display: inline-flex; align-items: center; min-width: 0; font-size: 0.73rem; color: var(--ink-3); letter-spacing: 0.015em; }
.wp-url .wp-lock { color: var(--azure); margin-right: 0.32rem; flex: none; }
.wp-url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-window { position: relative; aspect-ratio: 1280 / 800; overflow: hidden; background: #fff; contain: layout paint; }
/* faint placeholder shown under the frame while the site loads */
.wp-window::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 28% 18%, rgba(0, 216, 240, 0.10), transparent 70%),
    radial-gradient(62% 62% at 82% 92%, rgba(10, 108, 226, 0.10), transparent 70%),
    var(--paper-tint);
}
/* static screenshot poster — looks ~identical to the live site, paints instantly
   (no iframe), and the live frame fades in over it on hover */
.wp-shot-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.85s var(--ease);
}
.work-shot.has-img .wp-shot-img { opacity: 1; }

/* static-state cue: a faint badge over the poster hinting the live preview
   loads on hover. It fades out as the site comes in. */
/* click affordance — a clear "visit site" pill so it's obvious the card opens the
   real website. Visible whenever the preview itself is shown. */
.wp-hint {
  position: absolute; left: 0.7rem; bottom: 0.7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.34rem;
  padding: 0.42rem 0.72rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
  color: #fff; background: rgba(0, 21, 74, 0.78);
  box-shadow: 0 6px 16px rgba(0, 21, 74, 0.22);
  pointer-events: none;
  opacity: 0; transform: translateY(6px) scale(0.97);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.wp-hint .wp-hint-arrow { font-size: 0.95em; }
.work-shot:hover .wp-hint { opacity: 1; transform: none; }

.work-index { border-top: 1px solid var(--hair); }
.work-item {
  position: relative; display: grid; grid-template-columns: 1fr; align-items: center;
  gap: 0.4rem; padding: clamp(2.2rem, 4.2vw, 3.3rem) 0;
  border-bottom: 1px solid var(--hair); transition: padding-left 360ms var(--ease);
}
.work-item.has-shot {
  grid-template-columns: minmax(0, 1fr) clamp(390px, 44vw, 560px);
  gap: clamp(2rem, 4.4vw, 3.4rem);
}
.work-item::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--ease); }

.work-link { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; color: inherit; }
.work-sector { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.7rem; transition: color 320ms var(--ease); }
.work-name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.85rem, 3.7vw, 2.95rem); line-height: 1.04; letter-spacing: -0.015em; transition: transform 360ms var(--ease); }
.work-desc { margin-top: 0.7rem; max-width: 42ch; color: var(--ink-2); font-size: 0.98rem; line-height: 1.55; }
.work-go {
  margin-top: clamp(1.1rem, 2.4vw, 1.6rem); display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--hair-2); color: var(--ink); font-size: 1.05rem; flex: none;
  transition: transform 360ms var(--ease), border-color 360ms var(--ease), background 360ms var(--ease), color 360ms var(--ease);
}
.work-shot { position: relative; width: 100%; display: grid; grid-template-rows: 1fr; cursor: pointer; }
.ws-inner { overflow: hidden; min-height: 0; }
/* The preview is always shown now — no hover-to-expand, no per-row collapse. The
   interaction is a slow scroll "magnify": each row eases up to full size as it
   nears the centre of the viewport and gently recedes as it leaves, like a lens
   drifting down the list. It is driven entirely by the scroll-linked view()
   timeline, so it runs on the compositor with no scroll handler and nothing on the
   main thread; reduced motion and browsers without scroll-driven animation simply
   get the rows at full size. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .work-index .work-item {
      animation: workMagnify linear both;
      animation-timeline: view();
      animation-range: cover;
      transform-origin: center;
    }
    @keyframes workMagnify {
      0%   { transform: scale(0.94); }
      50%  { transform: scale(1); }
      100% { transform: scale(0.94); }
    }
  }
}

.work-item:hover { padding-left: clamp(0.6rem, 1.6vw, 1.1rem); }
.work-item:hover::after { transform: scaleX(1); }
.work-item:hover .work-name { transform: translateX(2px); }
.work-item:hover .work-sector { color: var(--azure); }
.work-item:hover .work-go { transform: rotate(-45deg) scale(1.04); border-color: transparent; background: var(--ink); color: #fff; }

/* ---- contact ---- */
.contact-card {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(1.8rem, 5vw, 4.5rem); padding: clamp(1.8rem, 4vw, 3.4rem);
  background: var(--surface); border: 1px solid var(--hair); border-radius: 26px; box-shadow: var(--shadow-card);
}
.contact-copy .eyebrow { margin-bottom: 1rem; }
.contact-copy .section-title { margin-bottom: 1.1rem; }
.contact-intro { color: var(--ink-2); max-width: 32ch; line-height: 1.62; }
.contact-divider { width: 100%; max-width: 12rem; height: 1px; margin: 1.8rem 0 1.4rem; background: var(--grad); opacity: 0.55; }
.contact-direct { color: var(--ink-3); font-size: 0.9rem; margin-bottom: 0.35rem; }
.email-list a { font-size: 1.05rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--hair-2); padding-bottom: 1px; transition: border-color 240ms var(--ease); }
.email-list a:hover { border-color: var(--azure); }

.contact-form { display: grid; gap: 1.05rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.contact-form label { display: grid; gap: 0.45rem; }
.field-label { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.contact-form input, .contact-form textarea {
  width: 100%; min-height: 3.05rem; padding: 0.85rem 1rem; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--paper-tint);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}
.contact-form textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.contact-form input::placeholder { color: var(--ink-3); }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: transparent; background: var(--surface);
  box-shadow: 0 0 0 2px var(--azure), 0 8px 24px -16px rgba(10, 108, 226, 0.5);
}
.form-hidden { display: none; }

/* minimal, sophisticated Send button */
.contact-submit {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.9rem; margin-top: 0.3rem; padding: 0 1.35rem;
  border: 1.5px solid var(--hair-2); border-radius: 999px; background: transparent; color: var(--ink); font-size: 0.92rem; font-weight: 500; cursor: pointer;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}
.contact-submit .arrow {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--azure); font-weight: 600; transition: transform 0.3s var(--ease);
}
.contact-submit:hover { border-color: var(--azure); transform: translateY(-1px); background: rgba(10, 108, 226, 0.045); }
.contact-submit:hover .arrow { transform: translateX(4px); }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--hair); }
.footer-inner { padding: 2.2rem 0 2.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem 1.5rem; color: var(--ink-3); font-size: 0.84rem; }
.footer-inner .footer-brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-2); }
.footer-inner .footer-brand img { width: 20px; height: 20px; border-radius: 5px; }

.noscript { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; padding: 1rem; border-radius: 14px; background: var(--ink); color: #fff; font-size: 0.9rem; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .split-layout { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.4rem); }
  .split-intro { position: static; }
  .contact-card { grid-template-columns: 1fr; }
}
@media (max-width: 819px) {
  .work-item.has-shot { grid-template-columns: 1fr; gap: 0.4rem; }
  .work-shot { display: none; }
}
@media (max-width: 720px) {
  .site-nav { display: none; }
  .hero { min-height: auto; padding-top: clamp(2.5rem, 9vw, 4rem); }
}
@media (max-width: 540px) {
  .brand-text small { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .contact-card { padding: 1.3rem; border-radius: 20px; }
  .work-go { width: 2.5rem; height: 2.5rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .hero-masthead { font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .reveal, [data-reveal], [data-cascade] > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .word-inner { transform: none !important; }
  .thread-top, .hero-rule { transform: scaleX(1) !important; }
}