/* ==========================================================================
   REMENAR — Design & Artwork Services
   Layout uses CSS logical properties throughout so an Arabic RTL variant
   can be added later without rewriting the stylesheet.
   ========================================================================== */

:root {
  /* Canvas — deliberately not #000: pure black smears on OLED panels. */
  --bg:            #0A0A0B;
  --surface:       #121214;
  --surface-2:     #17171A;
  --line:          #262629;
  --line-strong:   #34343A;

  /* Brand red. --red is for fills only; it lands at 4.2:1 on --bg, which is
     under WCAG AA for text, so red *text* uses --red-text (6.2:1) instead. */
  --red:           #E31E24;
  --red-hover:     #F5333A;
  --red-text:      #FF5257;
  --red-dim:       rgba(227, 30, 36, 0.12);

  --text:          #F7F5F2;   /* 18.4:1 */
  --text-muted:    #A8A5A0;   /*  8.1:1 */
  --text-faint:    #7C7A76;   /*  4.6:1 — AA floor, never smaller than 14px */

  /* Type */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);  /* 13→14px; never below 13 */
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.50rem, 1.30rem + 1.00vw, 2.25rem);
  --step-3:  clamp(2.00rem, 1.60rem + 2.00vw, 3.25rem);
  --step-4:  clamp(2.50rem, 1.70rem + 4.00vw, 5.50rem);

  /* Space */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --container: 1360px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 4px;
  --radius-lg: 10px;

  /* Motion — expo.out. One curve everywhere so the whole page shares a rhythm. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  --z-nav: 100;
  --z-overlay: 200;
  --z-lightbox: 300;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-block-size: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--red-text);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--red); color: #fff; }

::-webkit-scrollbar { inline-size: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--sp-4);
  z-index: calc(var(--z-nav) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--red); color: #fff; font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: inset-block-start var(--dur) var(--ease);
}
.skip-link:focus { inset-block-start: 0; }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.icon { inline-size: 1em; block-size: 1em; fill: none; stroke: currentColor;
        stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

.shell { inline-size: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ==========================================================================
   Reveal — the single scroll primitive. Only opacity + transform, both
   GPU-composited, so it never triggers layout.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-done { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--gutter);
  transition: background var(--dur) var(--ease),
              padding var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-block-end: 1px solid transparent;
}
.nav.is-stuck {
  padding-block: var(--sp-3);
  background: rgba(10, 10, 11, 0.72);
  border-block-end-color: var(--line);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav.is-stuck { background: rgba(10, 10, 11, 0.96); }
}

.nav__brand { display: flex; align-items: center; gap: var(--sp-3); }
.nav__brand img { block-size: 34px; inline-size: auto; }
.nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; padding-inline-start: var(--sp-1);
}

/* Links live in the panel below 900px; the toggle takes over. */
.nav__links { display: none; }
@media (min-width: 900px) {
  .nav__links { display: flex; align-items: center; gap: var(--sp-7); list-style: none; padding: 0; }
}
.nav__link {
  position: relative;
  font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--text-muted);
  padding-block: var(--sp-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover, .nav__link[aria-current='true'] { color: var(--text); }
.nav__link:hover::after, .nav__link[aria-current='true']::after { transform: scaleX(1); }

/* Needs .nav to outrank the later `.btn { display: inline-flex }` rule. */
.nav .nav__cta { display: none; }
@media (min-width: 900px) { .nav .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;   /* full 44px target, not just the glyph */
  margin-inline-end: -10px;
  font-size: 1.4rem; color: var(--text);
}
@media (min-width: 900px) { .nav__toggle { display: none; } }

/* Mobile panel */
.navpanel {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; align-content: center; justify-items: start;
  gap: var(--sp-2);
  padding: var(--gutter);
  padding-block-start: calc(var(--gutter) + 60px);
  background: var(--bg);
  opacity: 0; visibility: hidden;
  /* visibility flips instantly on open (so it can take focus) and only after
     the fade on close. Transitioning it with a duration leaves it computing
     as `hidden` for the whole transition, which silently kills focus(). */
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.navpanel[data-open='true'] {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}
.navpanel__link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: -0.03em;
  padding-block: var(--sp-2);
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease), color var(--dur-fast) var(--ease);
}
.navpanel[data-open='true'] .navpanel__link { opacity: 1; transform: none; }
.navpanel__link:hover { color: var(--red-text); }
.navpanel__close {
  position: absolute; inset-block-start: var(--sp-5); inset-inline-end: var(--gutter);
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  font-size: 1.5rem;
}
.navpanel__meta {
  margin-block-start: var(--sp-7);
  color: var(--text-faint); font-size: var(--step--1);
  display: grid; gap: var(--sp-2);
}
@media (prefers-reduced-motion: reduce) {
  /* the [data-open] rule outranks a bare .navpanel selector, so name it too */
  .navpanel, .navpanel[data-open='true'], .navpanel__link { transition: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-block-size: 48px;
  padding-inline: var(--sp-6); padding-block: var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn .icon { font-size: 1rem; }
.btn:active { transform: scale(0.98); }   /* never shifts layout */

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-hover); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--text); background: rgba(255,255,255,0.04); }

.btn--sm { min-block-size: 40px; padding-inline: var(--sp-5); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* ==========================================================================
   Section furniture
   ========================================================================== */
.section { padding-block: clamp(var(--sp-8), 11vw, var(--sp-10)); }
.section--alt { background: var(--surface); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red-text);
  margin-block-end: var(--sp-5);
}
.eyebrow::before {
  content: ''; inline-size: 28px; block-size: 1px; background: var(--red);
}

.section__head { max-inline-size: 62ch; margin-block-end: var(--sp-8); }
.section__title { font-size: var(--step-3); margin-block-end: var(--sp-4); }
.section__lead { color: var(--text-muted); font-size: var(--step-1); line-height: 1.5; max-inline-size: 55ch; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-block-size: 100svh;
  /* Two rows: content centres in the 1fr, the scroll cue owns the auto row.
     The cue used to be absolutely positioned against the hero's bottom edge,
     which let it land on top of the CTAs whenever the content grew. In flow
     it cannot overlap them. */
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  padding-block: 112px var(--sp-6);
  padding-inline: var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

/* Two soft red pools + a fine grain. Replaces the old floating circles. */
.hero__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 32%, rgba(227,30,36,0.16) 0%, transparent 68%),
    radial-gradient(40% 40% at 82% 82%, rgba(227,30,36,0.08) 0%, transparent 70%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner { text-align: center; display: grid; justify-items: center; max-inline-size: 62rem; }

/* Mark only — no wordmark — so it can carry more size without shouting. */
.hero__logo {
  inline-size: min(360px, 68vw);
  margin-block-end: var(--sp-7);
  filter: drop-shadow(0 18px 60px rgba(227, 30, 36, 0.22));
}

/* Deliberately below --step-4: the mark is doing the heavy lifting now, and an
   85px headline underneath it fought for attention. */
.hero__title {
  font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.75rem);
  font-weight: 300;
  margin-block-end: var(--sp-5);
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--red-text);
}

/* Set in the display face at Light rather than the body face — it reads as a
   considered subhead instead of a paragraph. Weight 300 is already loaded for
   the headline, so this costs no extra font bytes. Peaks at 19px, down from
   the 24px it inherited from --step-1. */
.hero__lead {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1rem, 0.94rem + 0.36vw, 1.1875rem);
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: var(--text-muted);
  max-inline-size: 54ch;   /* tighter measure suits the larger x-height */
  margin-block-end: var(--sp-6);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
@media (max-width: 520px) {
  .hero__actions { inline-size: 100%; flex-direction: column; }
  .hero__actions .btn { inline-size: 100%; }
}

/* On a 375×812 phone the untuned hero runs 980px tall, pushing both CTAs
   past the fold. Tighten the vertical rhythm so the primary action is
   visible without scrolling. */
@media (max-width: 640px) {
  .hero { padding-block: 92px var(--sp-6); }
  .hero__logo { inline-size: min(248px, 60vw); margin-block-end: var(--sp-6); }
  .hero__title { margin-block-end: var(--sp-4); }
  .hero__lead { margin-block-end: var(--sp-5); }   /* size handled by its own clamp */
  .hero__actions { gap: var(--sp-3); }
  /* .hero prefix needed: the base .hero__scroll rule is declared later in this
     file and would otherwise win on source order. */
  .hero .hero__scroll { display: none; }   /* no room for it once the CTAs stack */
}

/* Short desktop/laptop windows (e.g. 1160×820). Without this the hero runs
   938px tall and pushes the CTA — and the scroll cue — past the fold. */
@media (min-width: 641px) and (max-height: 900px) {
  .hero { padding-block: 96px var(--sp-5); }
  .hero__logo { inline-size: min(300px, 28vw); margin-block-end: var(--sp-6); }
  .hero__title { margin-block-end: var(--sp-4); }
  .hero__lead { margin-block-end: var(--sp-5); }
  .hero__scroll { margin-block-start: var(--sp-4); }
}

/* Very short windows (1280×720 and below). Drop the cue entirely — it is pure
   decoration and there is no room for it — and keep the CTA above the fold. */
@media (min-width: 641px) and (max-height: 780px) {
  .hero { padding-block: 84px var(--sp-4); }
  .hero__logo { inline-size: min(236px, 22vw); margin-block-end: var(--sp-5); }
  .hero__title { margin-block-end: var(--sp-3); }
  .hero__lead { margin-block-end: var(--sp-4); }   /* size handled by its own clamp */
  .hero .hero__scroll { display: none; }
}

.hero__scroll {
  display: grid; justify-items: center; gap: var(--sp-2);
  margin-block-start: var(--sp-6);
  color: var(--text-faint); font-size: var(--step--1);
  letter-spacing: 0.18em; text-transform: uppercase;
  pointer-events: none;   /* decorative — must never intercept a CTA click */
}
.hero__scroll .icon { font-size: 1.1rem; animation: nudge 2.2s var(--ease-io) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0);   opacity: 0.5; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll .icon { animation: none; } }
@media (max-height: 700px) { .hero__scroll { display: none; } }

/* ==========================================================================
   Client marquee
   ========================================================================== */
.clients {
  border-block: 1px solid var(--line);
  padding-block: var(--sp-6);
  overflow: hidden;
  background: var(--surface);
}
.clients__label {
  text-align: center; color: var(--text-faint);
  font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase;
  margin-block-end: var(--sp-5);
}
.marquee {
  display: flex; gap: var(--sp-8);
  inline-size: max-content;
  animation: slide 44s linear infinite;
}
.clients:hover .marquee, .marquee:focus-within { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: 0.02em;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.marquee__item:hover { color: var(--text); }
@keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%, 0, 0); } }

/* Marquee is decorative motion — kill it outright, and let it wrap. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
    inline-size: 100%;
    flex-wrap: wrap; justify-content: center;
    gap: var(--sp-4) var(--sp-6);
  }
  .marquee__item[data-clone='true'] { display: none; }
}

/* ==========================================================================
   Services
   ========================================================================== */
/* Explicit column counts, not auto-fit: there are exactly six services, and
   auto-fit resolved to four columns at desktop — leaving two empty cells where
   the container's --line background showed through as a grey box. 3 + 3. */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 700px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }
.service {
  position: relative;
  background: var(--bg);
  padding: var(--sp-7) var(--sp-6) var(--sp-8);
  transition: background var(--dur) var(--ease);
}
.section--alt .service { background: var(--surface); }
.service::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform var(--dur-slow) var(--ease);
}
.service:hover::after { transform: scaleX(1); }
.service:hover { background: var(--surface-2); }

.service__num {
  font-family: var(--font-display);
  font-size: var(--step--1); color: var(--text-faint);
  letter-spacing: 0.1em; margin-block-end: var(--sp-6); display: block;
}
.service__icon {
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--red-text); font-size: 1.4rem;
  margin-block-end: var(--sp-5);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.service:hover .service__icon { background: var(--red); border-color: var(--red); color: #fff; }
.service__title { font-size: var(--step-1); margin-block-end: var(--sp-3); }
.service__body { color: var(--text-muted); font-size: var(--step-0); }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--sp-7) var(--sp-5);
}
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 300; line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;   /* stops width jitter while counting */
  margin-block-end: var(--sp-3);
}
.stat__num span { color: var(--red-text); }
.stat__label {
  color: var(--text-faint); font-size: var(--step--1);
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ==========================================================================
   Work
   ========================================================================== */
.work__bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-block-end: var(--sp-7);
}
.chip {
  min-block-size: 44px;
  padding-inline: var(--sp-5); padding-block: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: 99px;
  color: var(--text-muted);
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.06em;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--text-faint); }
.chip[aria-pressed='true'] { background: var(--red); border-color: var(--red); color: #fff; }

/* CSS multi-column masonry: keeps every piece at its true aspect ratio
   instead of cropping tall print scans into 4:3 boxes. */
.work__grid {
  column-count: 3;
  column-gap: var(--sp-5);
}
@media (max-width: 1100px) { .work__grid { column-count: 2; } }
@media (max-width: 640px)  { .work__grid { column-count: 1; } }

.work__item {
  break-inside: avoid;
  margin-block-end: var(--sp-5);
  display: block; inline-size: 100%;
  text-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--surface-2);
  cursor: pointer;
}
.work__item[hidden] { display: none; }

.work__media {
  position: relative;
  overflow: hidden;
  background: var(--ph, var(--surface-2));  /* dominant colour holds the space */
}
.work__media img {
  inline-size: 100%; block-size: auto;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--dur-slow) var(--ease), transform 900ms var(--ease);
}
.work__media img.is-loaded { opacity: 1; transform: none; }

.work__item:hover .work__media img,
.work__item:focus-visible .work__media img { transform: scale(1.03); }

.work__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0.35) 42%, transparent 72%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.work__item:hover .work__veil,
.work__item:focus-visible .work__veil { opacity: 1; }

.work__meta {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: var(--sp-5);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4);
  transform: translate3d(0, 10px, 0);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.work__item:hover .work__meta,
.work__item:focus-visible .work__meta { opacity: 1; transform: none; }

.work__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.work__cat  { color: var(--red-text); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; }
.work__open { flex: none; color: var(--text); font-size: 1.25rem; }

/* Touch devices have no hover — show the caption underneath instead. */
@media (hover: none) {
  .work__veil { opacity: 1; }
  .work__meta { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .work__media img { opacity: 1; transform: none; transition: opacity 200ms linear; }
  .work__item:hover .work__media img { transform: none; }
}

.work__empty {
  display: none;
  padding-block: var(--sp-8); text-align: center; color: var(--text-faint);
}
.work__empty[data-show='true'] { display: block; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(6, 6, 7, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.lightbox[data-open='true'] {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}

.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
}
.lightbox__count { color: var(--text-faint); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.lightbox__btn {
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--text); font-size: 1.1rem;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox__btn:hover { background: var(--surface-2); border-color: var(--text-faint); }

.lightbox__stage {
  position: relative;
  display: grid; place-items: center;
  padding-inline: var(--gutter);
  min-block-size: 0;
  overflow: hidden;
}
/* Without this, <picture> is the grid item and the img's max-block-size:100%
   resolves against picture's auto height — the image then overruns the stage
   and buries the caption. display:contents promotes <img> to the grid child. */
.lightbox__stage picture { display: contents; }

/* A percentage max-block-size resolves against an indefinite containing block
   inside a `1fr` grid row, so it silently does nothing. Fill the area instead
   and let object-fit letterbox the image. */
.lightbox__stage img {
  inline-size: 100%; block-size: 100%;
  min-inline-size: 0; min-block-size: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.lightbox__stage img.is-loaded { opacity: 1; }

.lightbox__nav {
  position: absolute; inset-block-start: 50%; translate: 0 -50%;
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  border-radius: 50%; background: rgba(23,23,26,0.8);
  border: 1px solid var(--line-strong);
  font-size: 1.2rem;
  transition: background var(--dur-fast) var(--ease);
}
.lightbox__nav:hover { background: var(--red); border-color: var(--red); }
.lightbox__nav--prev { inset-inline-start: var(--sp-3); }
.lightbox__nav--next { inset-inline-end: var(--sp-3); }

.lightbox__caption {
  padding: var(--sp-5) var(--gutter) var(--sp-7);
  text-align: center;
}
.lightbox__caption h3 { font-size: var(--step-2); margin-block-end: var(--sp-2); }
.lightbox__caption p { color: var(--text-muted); max-inline-size: 60ch; margin-inline: auto; }
.lightbox__caption .work__cat { display: block; margin-block-end: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox[data-open='true'], .lightbox__stage img { transition: none; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about__grid {
  display: grid; gap: clamp(var(--sp-7), 6vw, var(--sp-9));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 920px) { .about__grid { grid-template-columns: 5fr 6fr; } }

.about__figure { position: relative; }
.about__figure img { inline-size: 100%; border-radius: var(--radius-lg); }
.about__figure::after {
  content: ''; position: absolute;
  inset-block-start: 18px; inset-inline-start: 18px;
  inline-size: 100%; block-size: 100%;
  border: 1px solid var(--red);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.about__title { font-size: var(--step-3); margin-block-end: var(--sp-5); }
.about__body { color: var(--text-muted); margin-block-end: var(--sp-4); }

.about__list { list-style: none; padding: 0; margin-block-start: var(--sp-7); display: grid; gap: var(--sp-4); }
.about__list li { display: flex; align-items: flex-start; gap: var(--sp-4); }
.about__list .icon { color: var(--red-text); flex: none; font-size: 1.15rem; margin-block-start: 4px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact__grid {
  display: grid; gap: clamp(var(--sp-7), 6vw, var(--sp-9));
  grid-template-columns: 1fr;
}
@media (min-width: 920px) { .contact__grid { grid-template-columns: 4fr 5fr; } }

.contact__list { list-style: none; padding: 0; display: grid; gap: var(--sp-5); margin-block-start: var(--sp-7); }
.contact__row { display: flex; align-items: center; gap: var(--sp-4); }
.contact__ico {
  inline-size: 44px; block-size: 44px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--red-text); font-size: 1.05rem;
  background: var(--surface-2);
}
.contact__k { font-size: var(--step--1); color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; }
.contact__v { display: block; transition: color var(--dur-fast) var(--ease); }
a.contact__v:hover { color: var(--red-text); }

.form {
  position: relative;   /* containing block for the absolutely-placed honeypot */
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  display: grid; gap: var(--sp-5);
}
.section--alt .form { background: var(--bg); }

/* Honeypot. Deliberately NOT `display: none` — plenty of bots skip fields
   hidden that way, which defeats the trap. Taken out of flow so it adds no
   grid gap, and made unreachable by pointer or keyboard. */
.honeypot {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.field { display: grid; gap: var(--sp-2); }
.field__label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; }
.field__req { color: var(--red-text); }
.field__hint { font-size: var(--step--1); color: var(--text-faint); }

.field input, .field select, .field textarea {
  inline-size: 100%;
  min-block-size: 48px;                 /* touch target + no iOS zoom at 16px */
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 16px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.section--alt .field input,
.section--alt .field select,
.section--alt .field textarea { background: var(--surface); }

.field textarea { min-block-size: 130px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A5A0' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 18px;
  padding-inline-end: var(--sp-8);
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-dim);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }

.field__error {
  display: none;
  align-items: center; gap: var(--sp-2);
  color: var(--red-text); font-size: var(--step--1);
}
.field__error .icon { flex: none; font-size: 0.95rem; }
.field[data-invalid='true'] .field__error { display: flex; }
.field[data-invalid='true'] input,
.field[data-invalid='true'] select,
.field[data-invalid='true'] textarea { border-color: var(--red-text); }

.form__status { font-size: var(--step--1); min-block-size: 1.4em; }
.form__status[data-tone='ok']  { color: #4ADE80; }
.form__status[data-tone='err'] { color: var(--red-text); }

.spinner {
  inline-size: 16px; block-size: 16px; flex: none;
  border: 2px solid rgba(255,255,255,0.35);
  border-block-start-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { border-block-start: 1px solid var(--line); padding-block: var(--sp-8) var(--sp-6); }
.footer__top {
  display: grid; gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: start;
  padding-block-end: var(--sp-7);
}
@media (min-width: 760px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__logo { inline-size: 180px; margin-block-end: var(--sp-4); }
.footer__blurb { color: var(--text-faint); font-size: var(--step--1); max-inline-size: 34ch; }
.footer__h {
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); margin-block-end: var(--sp-4);
}
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.footer__list a { color: var(--text-muted); font-size: var(--step--1); transition: color var(--dur-fast) var(--ease); }
.footer__list a:hover { color: var(--red-text); }

.footer__bottom {
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  color: var(--text-faint); font-size: var(--step--1);
}

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */
.wa {
  position: fixed;
  inset-block-end: max(var(--sp-5), env(safe-area-inset-bottom));
  inset-inline-end: max(var(--sp-5), env(safe-area-inset-right));
  z-index: var(--z-nav);
  inline-size: 54px; block-size: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366; color: #06301A;
  font-size: 1.55rem;
  box-shadow: 0 10px 34px rgba(37, 211, 102, 0.32);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wa:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(37, 211, 102, 0.44); }
.wa:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .wa:hover, .wa:active { transform: none; } }

/* Lock scroll behind overlays without the page jumping. */
body[data-locked='true'] { overflow: hidden; }