/* =========================================================
   VELAR BUREAU — "the bureau that engineers how buildings sell"
   Layout concept: the site is a set of working drawings. Every section is a
   sheet (A-01, A-02…) on a visible construction grid; one signal colour marks
   what matters, the way red marks a revision on a drawing.
   ========================================================= */

:root {
  --steel: #E3E7ED;
  --steel-2: #D3D9E1;
  --paper: #F1F3F6;
  --graphite: #0E0F11;
  --graphite-2: #17191C;
  --graphite-3: #23262B;
  --slate: #646A76;
  --mist: #757B86;          /* was #9CA2AD; darker for readability on steel (roast v229, K3) */
  --signal: #E2492B;
  --signal-2: #C73A1D;
  --peach: #FFD3C2;          /* light dither dots printed on signal */
  --haze: #9F94CF;           /* cold lavender light in the blurred case backdrops */
  --haze-2: #EEEAF7;

  --line: rgba(14, 15, 17, .12);
  --line-d: rgba(227, 231, 237, .1);

  --f: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --fd: "Archivo", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --fm: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* content never wider than 1440px: on wide screens the side gutter grows, backgrounds stay full width */
  --gx0: clamp(16px, min(2.2vw, 31.68px), 32px);
  --gx: max(var(--gx0), calc((100vw - 1440px) / 2 + var(--gx0)));
  --sec: clamp(88px, min(10vw, 144px), 160px);
  --ease: cubic-bezier(.2, .75, .1, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--steel); color: var(--graphite);
  font-family: var(--f); font-size: 16px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--steel); z-index: 80; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.sel { user-select: all; }

section, footer { padding-left: max(var(--gx), env(safe-area-inset-left, 0px)); padding-right: max(var(--gx), env(safe-area-inset-right, 0px)); }
.dark { background: var(--graphite); color: var(--steel); }

/* ---------- type ---------- */
.h2 { font-weight: 500; font-size: clamp(2.2rem, min(4.6vw, 66.24px), 4.6rem); line-height: .98; letter-spacing: -.045em; max-width: 18ch; text-wrap: balance; }
.mute { color: var(--mist); }
.dark .mute { color: var(--slate); }
.label { display: flex; align-items: center; gap: 12px; font-size: .82rem; color: var(--slate); }
.label--dark { color: var(--mist); }
.label__code {
  font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: .7rem; letter-spacing: .04em;
  padding: 4px 8px; background: var(--graphite); color: var(--steel); white-space: nowrap; flex: none;
}
.dark .label__code { background: var(--signal); color: var(--graphite); }

/* corner brackets: the drawing's registration marks */
.corner { position: relative; }
.corner::after { content: ""; position: absolute; right: 16px; top: 16px; width: 28px; height: 28px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transition: transform .5s var(--ease); }
.corner:hover::after { transform: translate(4px, -4px); }
.corner--bl::after { right: auto; top: auto; left: 0; bottom: 0; border: 0; border-left: 3px solid var(--graphite); border-bottom: 3px solid var(--graphite); width: 22px; height: 22px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  height: 56px; padding: 0 20px 0 24px; font-weight: 500; font-size: .95rem; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translate(3px, -3px); }
.btn--dark { background: var(--graphite); color: var(--steel); }
.btn--dark:hover { background: var(--signal); color: var(--graphite); }
.btn--signal { background: var(--signal); color: var(--graphite); }
.btn--signal:hover { background: var(--steel); }
.btn--white { background: var(--steel); color: var(--graphite); }
.btn--white:hover { background: var(--graphite); color: var(--steel); }
.btn--line { border: 1px solid var(--graphite); }
.btn--line:hover { background: var(--graphite); color: var(--steel); }
.link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.link svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.link:hover { color: var(--signal); }
.link:hover svg { transform: translate(3px, -3px); }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { position: relative; width: 30px; height: 25px; }
.brand__mark svg { width: 100%; height: 100%; fill: currentColor; }
.brand__mark i { position: absolute; right: -7px; top: -5px; width: 7px; height: 7px; background: var(--signal); }
.brand__word { font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; }

/* =========================================================
   HEADER + DOCK
   ========================================================= */
.top {
  position: fixed; z-index: 50; left: 0; right: 0; top: 0;
  height: calc(76px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px);
  background: rgba(227, 231, 237, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); color: var(--graphite); transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease), -webkit-backdrop-filter .45s var(--ease); display: flex; align-items: center; gap: 40px;
  padding-left: max(var(--gx), env(safe-area-inset-left, 0px)); padding-right: max(var(--gx), env(safe-area-inset-right, 0px));
}
.top__nav { display: flex; gap: 34px; margin-left: -8px; font-size: .9rem; font-weight: 500; }
.top__nav a, .dock > a:not(.dock__brand):not(.dock__cta) { position: relative; transition: color .2s; }
.top__nav a::after, .dock > a:not(.dock__brand):not(.dock__cta)::after { content: ""; position: absolute; right: -8px; top: 1px; width: 4px; height: 4px; background: var(--signal); }
.top__nav a:hover { color: var(--signal); }
.top__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang { display: flex; border: 1px solid var(--line); }
.lang__b { width: 42px; height: 34px; font-size: .76rem; font-weight: 600; color: var(--slate); }
.lang__b.is-on { background: var(--graphite); color: var(--steel); }

.dock {
  position: fixed; z-index: 60; left: 0; right: 0; top: 0;
  transform: translateY(-100%); transition: transform .5s var(--ease);
  display: flex; align-items: center; gap: 34px; height: calc(60px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 0 0 max(var(--gx), env(safe-area-inset-left, 0px));
  background: rgba(14, 15, 17, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-d); color: var(--steel); font-size: .88rem; font-weight: 500;
}
.dock.is-on { transform: translateY(0); }
.dock__brand { display: flex; align-items: center; gap: 10px; margin-right: 18px; }
.dock__brand svg { width: 22px; height: 18px; fill: var(--steel); }
.dock__brand span { font-family: var(--fd); font-stretch: 125%; font-weight: 700; letter-spacing: .06em; font-size: .9rem; }
.dock > a:hover { color: var(--signal); }
.dock__cta { align-self: stretch; display: flex; align-items: center; padding: 0 76px 0 26px; background: var(--signal); color: var(--graphite); margin-left: auto; }
.dock__cta.corner::after { right: 12px; top: 10px; width: 16px; height: 16px; border-width: 2px; }
.dock > a.dock__cta:hover { color: var(--graphite); background: var(--steel); }

/* =========================================================
   A-01 HERO
   ========================================================= */
.hero { position: relative; padding-top: calc(76px + env(safe-area-inset-top, 0px)); padding-bottom: 0; isolation: isolate; }
.guides {
  position: absolute; inset: 0 0 auto; height: 78%; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--line) 50%, transparent 0) 0 24% / 12px 1px repeat-x,
    linear-gradient(90deg, var(--line) 50%, transparent 0) 0 48% / 12px 1px repeat-x,
    linear-gradient(90deg, var(--line) 50%, transparent 0) 0 72% / 12px 1px repeat-x;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); min-height: min(700px, calc(100svh - 76px - 190px)); }
.hero__main { display: flex; flex-direction: column; padding: clamp(32px, 5vh, 64px) clamp(0px, min(3vw, 43.2px), 48px) clamp(32px, 5vh, 56px) 0; }
.hero__h { margin: auto 0; padding-block: 40px; font-weight: 500; font-size: clamp(3rem, min(7.4vw, 106.56px), 9.2rem); line-height: 1.02; letter-spacing: -.06em; }
.hl { display: block; }
.hl--mute { color: var(--mist); }
.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.hero__lead { max-width: 46ch; color: var(--slate); font-size: 1.05rem; }

.hero__side { display: grid; grid-template-rows: auto 1fr auto; }
.hero__cta { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 220px; padding: 28px; background: var(--signal); color: var(--graphite); transition: background .35s var(--ease); }
.hero__cta span { font-weight: 500; font-size: clamp(1.5rem, min(2.2vw, 31.68px), 2.1rem); letter-spacing: -.035em; line-height: 1; }
.hero__cta small { font-size: .86rem; max-width: 28ch; opacity: .8; }
.hero__cta:hover { background: var(--graphite); color: var(--steel); }
.hero__cta::before { content: ""; position: absolute; left: 28px; right: 28px; bottom: 18px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.hero__cta:hover::before { transform: scaleX(1); }
/* static title version: the former hover state, no link behaviour */
.hero__cta--title, .hero__cta--title:hover { background: var(--graphite); color: var(--steel); cursor: default; border-bottom: 0; }
.hero__cta--title h2 { font-weight: 500; font-size: clamp(1.5rem, min(2.2vw, 31.68px), 2.1rem); letter-spacing: -.035em; line-height: 1; }
.hero__cta--title small { color: var(--mist); opacity: 1; }
.hero__cta--title::before { display: none; }
.hero__cta--title.corner::after { color: var(--signal); }
.hero__cta--title.corner:hover::after { transform: none; }
.hero__panel { background: var(--graphite); color: var(--steel); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.facts { display: grid; gap: 36px; }
.facts li { display: grid; grid-template-columns: 22px auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.facts svg { width: 20px; height: 20px; color: var(--signal); grid-row: 1 / 3; align-self: start; margin-top: 8px; }
.facts b { font-family: var(--fd); font-stretch: 112%; font-weight: 500; font-size: 2.2rem; letter-spacing: -.03em; line-height: 1; }
.facts span { color: var(--mist); font-size: .86rem; grid-column: 2; }
.hero__note { color: var(--mist); font-size: .88rem; max-width: 34ch; }

.hero__photo { position: relative; height: clamp(380px, min(46vw, 662.4px), 720px); overflow: hidden; margin-inline: calc(-1 * max(var(--gx), env(safe-area-inset-left, 0px))); }
.parallax { position: absolute; inset: -10% 0; }
.parallax img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.92); }
.hero__photo .parallax img { object-position: 50% 30%; }
.hero__cut { position: absolute; left: max(var(--gx), env(safe-area-inset-left, 0px)); bottom: -1px; width: clamp(240px, min(36vw, 518.4px), 620px); height: auto; fill: var(--steel); }
.titleblock {
  position: absolute; right: max(var(--gx), env(safe-area-inset-right, 0px)); bottom: var(--gx0);
  display: grid; grid-template-columns: repeat(5, auto); background: rgba(14, 15, 17, .78); backdrop-filter: blur(10px); color: var(--steel);
  font-family: var(--fd); font-stretch: 112%; font-size: .72rem; letter-spacing: .02em;
}
.titleblock span { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-left: 1px solid var(--line-d); }
.titleblock span:first-child { border-left: 0; }
.titleblock em { font-family: var(--f); font-style: normal; font-size: .62rem; color: var(--mist); letter-spacing: .04em; }
.titleblock b { font-weight: 400; }

/* hero entrance: one orchestrated moment */
.js .hero__h .hl { animation: rise 1.1s var(--ease) both; }
.js .hero__h .hl--mute { animation-delay: .12s; }
.js .hero__side > * { animation: rise 1s var(--ease) .25s both; }
.js .hero__cut { animation: cutIn 1.4s var(--ease) .2s both; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes cutIn { from { transform: translateY(100%); } }

/* =========================================================
   SECTION HEAD
   ========================================================= */
.sec-head { display: flex; flex-direction: column; gap: 28px; margin-bottom: clamp(40px, min(5vw, 72px), 80px); }
.sec-head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.sec-head--row > div { display: flex; flex-direction: column; gap: 28px; }
.sec-head__aside { max-width: 40ch; color: var(--mist); }

/* scroll fill: words darken as the heading enters */
.fill .w { color: var(--graphite-3); transition: color .4s linear; }
.fill .w.on { color: var(--steel); }

/* =========================================================
   A-02 MANIFESTO
   ========================================================= */
.mani { padding-block: var(--sec); }
.mani__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px clamp(40px, min(6vw, 86.4px), 120px); align-items: end; padding-bottom: clamp(56px, min(7vw, 100.8px), 110px); border-bottom: 1px solid var(--line-d); }
.mani__grid .h2 { font-size: clamp(2.4rem, min(5.4vw, 77.76px), 5.8rem); max-width: 15ch; }
.mani__txt { display: flex; flex-direction: column; gap: 18px; color: var(--mist); max-width: 46ch; }
.mani__txt .link { align-self: flex-start; color: var(--steel); margin-top: 10px; }
.mani__tiles { display: grid; grid-template-columns: 1.2fr 1fr .8fr 1.2fr; gap: 8px; margin-top: clamp(40px, min(5vw, 72px), 72px); height: clamp(300px, min(30vw, 432px), 460px); }
.tile { position: relative; overflow: hidden; background: var(--graphite-2); min-width: 0; }
.tile--img .parallax img { filter: grayscale(1) contrast(1.05) brightness(.8); transition: filter .8s var(--ease); }
.tile--img:hover .parallax img { filter: grayscale(.2) contrast(1.05) brightness(.9); }
.tile--plan { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; }
.plan { width: 100%; height: auto; }
.plan__w { fill: none; stroke: var(--steel); stroke-width: 2; }
.plan__t { fill: none; stroke: var(--slate); stroke-width: 1; }
.plan__t text { fill: var(--mist); stroke: none; font: 500 11px var(--f); }
.plan__u { fill: rgba(226, 73, 43, .22); stroke: var(--signal); stroke-width: 2; }
.plan__l { fill: var(--mist); font: 500 10px var(--f); letter-spacing: .04em; }
.plan__l--on { fill: var(--signal); }
.tile__cap .label__code { white-space: nowrap; }
.tile__cap { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--mist); }
.tile--stat { background: var(--signal); color: var(--graphite); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.tile--stat b { font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: clamp(3.4rem, min(6vw, 86.4px), 6rem); letter-spacing: -.04em; line-height: .9; }
.tile--stat p { font-size: .88rem; font-weight: 500; }

/* =========================================================
   A-03 SERVICES — stacked cards
   ========================================================= */
.svc { padding-block: var(--sec); }
.stack { display: grid; gap: 14px; }
.card {
  position: sticky; top: calc(24px + var(--i, 0) * 16px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  min-height: clamp(420px, min(40vw, 576px), 560px); background: var(--paper);
  transform-origin: 50% 0; will-change: transform;
  box-shadow: 0 -1px 0 var(--line);
}
.card__txt { display: flex; flex-direction: column; padding: clamp(24px, min(3vw, 43.2px), 44px); gap: 18px; }
.card__n { font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: .8rem; color: var(--signal); }
.card h3 { font-weight: 500; font-size: clamp(1.9rem, min(3.4vw, 48.96px), 3.4rem); letter-spacing: -.045em; line-height: 1; }
.card p { color: var(--slate); max-width: 46ch; }
.spec { margin-top: auto; border-top: 1px solid var(--line); }
.spec li { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 500; }
.spec li::after { content: "+"; color: var(--signal); }
.card__img { position: relative; overflow: hidden; }
.card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter .9s var(--ease), transform 1.4s var(--ease); }
.card:hover .card__img img { filter: grayscale(0) contrast(1.02); transform: scale(1.03); }

/* =========================================================
   A-04 WORK
   ========================================================= */
.work { padding-block: var(--sec); }
.case { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.case--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.case--flip .case__visual { order: 2; }
.case__visual { position: relative; overflow: hidden; height: clamp(420px, min(44vw, 633.6px), 700px); background: var(--graphite-2); isolation: isolate; }
.case__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(1) brightness(.45); transform: scale(1.04); transition: filter 1s var(--ease), transform 1.6s var(--ease); }
.case:hover .case__bg { filter: grayscale(.3) brightness(.5); transform: scale(1); }
.browser { position: absolute; left: 9%; top: 12%; width: 68%; background: #fff; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .8); transition: transform 1s var(--ease); }
.case:hover .browser { transform: translateY(-10px); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #EDEEF0; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #CDD0D5; }
.browser__bar span { margin-left: 12px; font-size: .68rem; color: #7A808A; padding: 2px 12px; background: #fff; }
.browser img { width: 100%; height: auto; }
.browser--sm { left: auto; right: 6%; top: auto; bottom: 9%; width: 38%; transition-delay: .06s; }
.case:hover .browser--sm { transform: translateY(-18px); }
.case__no { position: absolute; right: 24px; top: 16px; font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: clamp(3rem, min(6vw, 86.4px), 6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(227, 231, 237, .35); }
.case__info { display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding: clamp(24px, min(3vw, 43.2px), 40px); background: var(--graphite-2); }
.case__title h3 { font-weight: 500; font-size: clamp(2.2rem, min(4vw, 57.6px), 4rem); letter-spacing: -.05em; line-height: .95; margin-bottom: 18px; }
.case__title p { color: var(--mist); max-width: 44ch; }
.case__meta { border-top: 1px solid var(--line-d); }
.case__meta div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-d); font-size: .9rem; }
.case__meta dt { color: var(--slate); }
.case__info .btn { align-self: flex-start; }

/* =========================================================
   CTA + FOOTER
   ========================================================= */
.cta { background: var(--signal); color: var(--graphite); padding-block: clamp(72px, min(9vw, 129.6px), 140px); }
.cta__h { font-weight: 500; font-size: clamp(2.6rem, min(7vw, 100.8px), 8rem); line-height: .92; letter-spacing: -.06em; max-width: 14ch; }
.cta .mute { color: rgba(14, 15, 17, .45); }
.cta__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-top: clamp(40px, min(5vw, 72px), 72px); }
.cta__row p { max-width: 44ch; font-size: 1.05rem; }
.cta__btns { display: flex; gap: 8px; flex-wrap: wrap; }

.foot { padding-top: clamp(64px, min(7vw, 100.8px), 100px); padding-bottom: max(96px, calc(env(safe-area-inset-bottom, 0px) + 90px)); overflow: hidden; }
.foot__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 48px; align-items: start; }
.foot__top p { color: var(--mist); max-width: 40ch; }
.foot__c { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; text-align: right; }
.foot__c b { font-weight: 500; font-variant-numeric: tabular-nums; }
.brand--light { color: var(--steel); }
.foot__word { font-family: var(--fd); font-stretch: 125%; font-weight: 800; font-size: clamp(4.5rem, min(21vw, 302.4px), 22rem); line-height: .8; letter-spacing: -.02em; margin: clamp(48px, min(6vw, 86.4px), 96px) 0 24px -.04em; color: #1D2024; white-space: nowrap; user-select: none; }
.foot__legal { display: flex; gap: 28px; font-size: .8rem; color: var(--slate); border-top: 1px solid var(--line-d); padding-top: 20px; }
.foot__legal a:hover { color: var(--steel); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__main { padding-right: 0; }
  .hero__h { margin: 32px 0; padding-block: 0; }
  .hero__side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; margin-top: 32px; }
  .mani__grid { grid-template-columns: minmax(0, 1fr); }
  .mani__tiles { grid-template-columns: 1fr 1fr; height: auto; }
  .mani__tiles > * { min-height: 260px; }
  .case, .case--flip { grid-template-columns: minmax(0, 1fr); }
  .case--flip .case__visual { order: 0; }
  .titleblock span:nth-child(n+4) { display: none; }
  .titleblock { grid-template-columns: repeat(3, auto); }
}
@media (max-width: 720px) {
  .top { height: calc(64px + env(safe-area-inset-top, 0px)); gap: 16px; }
  .top__nav { display: none; }
  .hero { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
  .hero__side { grid-template-columns: minmax(0, 1fr); }
  .hero__cta { min-height: 170px; }
  .hero__foot .btn { width: 100%; }
  .titleblock { display: none; }
  .card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 220px; position: relative; top: auto; }
  .card__img { order: 2; }
  .mani__tiles { grid-template-columns: minmax(0, 1fr); }
  .browser { left: 6%; width: 88%; top: 10%; }
  .browser--sm { display: none; }
  .case__visual { height: 360px; }
  .case__meta div { grid-template-columns: 90px minmax(0, 1fr); }
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .foot__c { text-align: left; }
  .dock { gap: 0; justify-content: space-between; }
  .dock > a:not(.dock__brand):not(.dock__cta) { display: none; }
  .dock__cta { padding-right: 56px; }
  .sec-head--row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* one fixed header everywhere; the scroll dock is retired */
.dock { display: none !important; }


/* header over dark sections */
.top .brand__gl img { transition: filter .45s var(--ease); }
.top.is-dark { background: rgba(14, 15, 17, .92); color: var(--steel); border-bottom-color: var(--line-d); }
.top.is-dark .brand__gl img { filter: invert(1); }
.top.is-dark .lang { border-color: var(--line-d); }
.top.is-dark .lang__b { color: var(--mist); }
.top.is-dark .lang__b.is-on { background: var(--steel); color: var(--graphite); }
.top.is-dark .top__cta { background: var(--steel); color: var(--graphite); }
.top.is-dark .top__cta:hover { background: var(--signal); color: var(--graphite); }

/* orange CTA at the bottom of the hero column */
.hero__cta--go { min-height: 150px; }
@media (max-width: 1100px) { .hero__cta--go { grid-column: 1 / -1; } }

/* hero right column: live sales board + compact facts row */
.hero__side { grid-template-rows: 1fr auto; }
.hero__live { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 28px; background: var(--graphite); color: var(--steel); overflow: hidden; min-height: 300px; }
.hero__live::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14, 15, 17, 0) 70%, var(--graphite)); }
.hl__top { display: flex; align-items: center; gap: 10px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.hl__top em { margin-left: auto; font-style: normal; padding: 2px 8px; border: 1px solid var(--line-d); font-size: .66rem; }
.hl__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: callPulse 1.8s infinite; }
.hl__sold { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.hl__sold b { font-family: var(--fd); font-stretch: 112%; font-weight: 500; font-size: clamp(3.2rem, min(4.6vw, 66.24px), 4.6rem); letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; }
.hl__sold span { font-size: 1.6rem; color: var(--signal); }
.hl__sold small { margin-left: 12px; color: var(--mist); font-size: .82rem; max-width: 12ch; line-height: 1.25; }
.hl__bar { height: 3px; background: var(--graphite-3); }
.hl__bar i { display: block; height: 100%; background: var(--signal); transition: width 1.2s var(--ease); }
.hl__feed { display: grid; gap: 6px; margin-top: 6px; }
.hl__feed li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; background: var(--graphite-2); border-left: 2px solid var(--slate); font-size: .8rem; animation: hlIn .7s var(--ease) both; }
.hl__feed li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hl__feed li span { color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl__feed li em { font-style: normal; font-size: .66rem; letter-spacing: .08em; padding: 2px 6px; }
.hl__feed li.s-sold { border-left-color: var(--signal); }
.hl__feed li.s-sold em { background: var(--signal); color: var(--graphite); }
.hl__feed li.s-res { border-left-color: #E7B24A; }
.hl__feed li.s-res em { color: #E7B24A; border: 1px solid rgba(231, 178, 74, .5); }
.hl__feed li.s-lead em { color: var(--steel); border: 1px solid var(--line-d); }
@keyframes hlIn { from { opacity: 0; transform: translateY(-12px); } }
.hero__panel { padding: 20px 28px; border-top: 1px solid var(--line-d); }
.hero__panel .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hero__panel .facts li { grid-template-columns: auto; }
.hero__panel .facts svg { display: none; }
.hero__panel .facts b { font-size: 1.7rem; }
.hero__panel .facts span { grid-column: 1; font-size: .76rem; }
@media (max-width: 1100px) { .hero__live { grid-column: 1 / -1; } .hero__panel { grid-column: 1 / -1; } }

/* hero right column: rotating case preview */
.hero__work { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--graphite); color: var(--steel); min-height: 320px; }
.hw__top { display: flex; align-items: center; gap: 10px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.hw__n { margin-left: auto; font-variant-numeric: tabular-nums; }
.hw__n b { color: var(--steel); font-weight: 600; }
.hw__slide { position: absolute; left: 24px; right: 24px; top: 58px; bottom: 40px; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility 0s .8s; }
.hw__slide.is-on { opacity: 1; visibility: visible; transition: opacity .8s var(--ease), visibility 0s; }
.hw__slide img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transform: scale(1.06); transition: transform 5s linear; filter: grayscale(.15); }
.hw__slide.is-on img { transform: scale(1); }
.hw__slide:hover img { filter: none; }
.hw__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 40px 14px 12px; background: linear-gradient(180deg, rgba(14, 15, 17, 0), rgba(14, 15, 17, .9)); }
.hw__cap b { font-size: 1.1rem; font-weight: 500; letter-spacing: -.02em; }
.hw__cap em { font-style: normal; font-size: .76rem; color: var(--mist); }
.hw__bar { position: absolute; left: 24px; right: 24px; bottom: 22px; height: 2px; background: var(--graphite-3); }
.hw__bar i { display: block; height: 100%; width: 0; background: var(--signal); }
.hw__bar i.run { animation: hwRun 5s linear forwards; }
@keyframes hwRun { to { width: 100%; } }
@media (max-width: 1100px) { .hero__work { grid-column: 1 / -1; min-height: 280px; } }

/* hero right column: single calm image above the CTA */
.hero__pic { position: relative; margin: 0; min-height: 300px; overflow: hidden; background: var(--graphite); }
.hero__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
@media (max-width: 1100px) { .hero__pic { grid-column: 1 / -1; min-height: 240px; } }