/* ==========================================================================
   VEDHEM — stylesheet
   Structure: 1. Tokens  2. Reset  3. Type  4. Utilities  5. Nav
   6. Hero  7. Services  8. Work  9. About  10. Contact  11. Footer
   12. Reveal animation  13. Responsive  14. Motion & accessibility
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  /* colour: black & white only, with soft off-tones for depth */
  --bg:            #0a0a0a;
  --bg-soft:       #111111;
  --fg:            #f5f5f3;
  --fg-white:      #ffffff;
  --fg-muted:      #9a9a9a;
  --fg-dim:        #5c5c5c;

  --glass-fill:    rgba(255,255,255,0.05);
  --glass-fill-2:  rgba(255,255,255,0.09);
  --glass-border:  rgba(255,255,255,0.14);
  --glass-border-2:rgba(255,255,255,0.30);
  --line:          rgba(255,255,255,0.10);

  --radius-sm: 10px;
  --radius-md: 16px;
  --notch: 26px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --dur-fast: .25s;
  --dur-med: .6s;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --container: 1240px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas{ display:block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font: inherit; color: inherit; background: none; border:0; cursor:pointer; }
input, textarea, select{ font: inherit; color: inherit; }
h1,h2,h3,h4,p{ margin:0; }

:focus-visible{
  outline: 1.5px solid var(--fg-white);
  outline-offset: 3px;
}

/* ---------- 3. Type ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 18px;
}
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--fg-white);
}
h2{ font-size: clamp(32px, 4.4vw, 52px); }
h3{ font-size: 20px; font-weight: 600; }
h4{ font-size: 16px; font-weight: 600; }
p{ color: var(--fg-muted); line-height: 1.65; font-size: 15.5px; }
/* justified body copy site-wide; headings, labels and buttons stay as they are */
p, blockquote{ text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; }

/* text selection: white highlight with dark text, in keeping with the black-and-white look */
::selection{ background: var(--fg-white); color: var(--bg); }
::-moz-selection{ background: var(--fg-white); color: var(--bg); }

/* ---------- 4. Utilities ---------- */
.section{
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px 32px;
}
.section-head{ max-width: 640px; margin-bottom: 64px; }

.glass{
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 20px 40px -20px rgba(0,0,0,0.6);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn-solid{
  background: var(--fg-white);
  color: var(--bg);
}
.btn-solid:hover{ transform: translateY(-2px); background: var(--fg); }
.btn-ghost{
  background: var(--glass-fill);
  border: 1px solid var(--glass-border-2);
  color: var(--fg-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover{ transform: translateY(-2px); background: var(--glass-fill-2); border-color: rgba(255,255,255,.5); }

/* notch corner: the brand's cut-and-punch geometry, reused sparingly on content cards */
.notch{
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

/* background grid: an interactive canvas of points, fixed behind all content.
   script.js §9 draws and animates it (idle drift + a cursor pull); this rule
   only positions/masks the canvas so it fades out toward the page edges. */
.bg-pattern{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 15%, black 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 15%, black 0%, transparent 85%);
}

/* grain: fixed full-viewport texture for a matte, non-glossy finish */
.grain{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-glow{
  position: fixed;
  top: 0; left: 0;
  width: 480px; height: 480px;
  margin-left: -240px; margin-top: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transform: translate(-1000px,-1000px);
}
@media (hover:none){ .cursor-glow{ display:none; } }

/* ---------- 5. Nav ---------- */
.nav-wrap{
  position: fixed;
  top: 18px; left: 0; right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}
.nav{
  width: 100%;
  max-width: 880px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 12px 10px 20px;
  border-radius: 100px;
  transition: background var(--dur-fast) var(--ease);
}
.nav-brand{ display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav-mark{ width: 22px; height: auto; color: var(--fg-white); }
.nav-word{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 15px;
  color: var(--fg-white);
}
.nav-links{ display: flex; gap: 26px; }
.nav-links a{
  font-size: 14px;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease);
  position: relative;
}
.nav-links a:hover{ color: var(--fg-white); }
.nav-cta{ padding: 10px 20px; font-size: 13.5px; }

.nav-toggle{
  display: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--dur-fast) var(--ease);
}
.nav-toggle:hover{ background: var(--glass-fill); }
.nav-toggle span{
  width: 16px; height: 1.5px;
  background: var(--fg-white);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child{ transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform: translateY(-3.25px) rotate(-45deg); }

.nav-mobile{
  display: none;
}

body.nav-open{ overflow: hidden; }

/* ---------- 6. Hero ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 140px 32px 60px;
  gap: 20px;
}
.hero-inner{ max-width: 560px; transform: translateY(-10px); }
.hero-title{
  font-size: clamp(52px, 7.4vw, 92px);
  margin: 0 0 26px;
}
.hero-title span{ display: block; }
.hero-sub{
  font-size: 17px;
  max-width: 460px;
  margin-bottom: 40px;
  color: var(--fg-muted);
}
.hero-cta{ display: flex; gap: 14px; flex-wrap: wrap; }

.hero-model{
  position: relative;
  height: min(560px, 60vh);
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size; /* lets the clapper size itself off this box (cqw / cqh) */
}

/* ---- Clapperboard ----
   Everything is sized in em off .clapper's font-size, so the whole board
   scales as one unit. The clapstick is hinged at its left end and swings
   open on hover; script.js §7 toggles .is-open / .is-clapping. */
.clapper{
  position: relative;
  font-size: clamp(9px, 2.6vw, 15px);      /* fallback if container units are unsupported */
  --fit: 3cqw;                              /* share of the stage width (mobile sets its own size, see --em) */
  font-size: min(16px, var(--fit), calc(100cqh / (24 + var(--head)))); /* fits the board + its headroom */
  width: 30em;
  height: 24em;
  --open: -10deg;                           /* how far the clapstick lifts */
  --head: 3.6;                              /* headroom above the board for the raised stick, in em */
  margin-top: calc(var(--head) * 1em);
  perspective: 1300px;
  cursor: pointer;
  animation: clapperIn 1s var(--ease) .05s both;
}
@keyframes clapperIn{
  from{ opacity: 0; transform: translateY(18px) scale(.94); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.clapper:focus-visible{ outline: 1.5px solid var(--fg-white); outline-offset: .6em; }

.clapper-rig{                               /* tilts toward the cursor (script.js) */
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
  will-change: transform;
}
.clapper-shadow{
  position: absolute;
  left: 8%; right: 8%; bottom: -1.6em;
  height: 2em;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%);
  filter: blur(.2em);
  transform: translateZ(-2em);
}

.clapper-body{
  position: absolute;
  left: 0; right: 0; top: 3.55em; bottom: 0;
  display: flex; flex-direction: column;
  border-radius: .5em .5em 1em 1em;
  overflow: hidden;
  background: linear-gradient(165deg, #191919, #070707);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3em 5em -2.2em rgba(0,0,0,.8);
  transition: transform .12s var(--ease);
}
.clapper-bar,
.clapper-arm{
  background: repeating-linear-gradient(45deg, #f3f3f1 0 2.1em, #0a0a0a 2.1em 4.2em);
}
.clapper-bar{ flex: none; height: 3.4em; border-bottom: .18em solid #000; }

.clapper-slate{
  flex: 1;
  display: flex; align-items: center; justify-content: center;
}
.clapper-logo{ width: 58%; height: auto; color: var(--fg-white); filter: drop-shadow(0 .5em 1.2em rgba(0,0,0,.6)); }

/* the clapstick: hinged at its left end, closes fast, opens with a spring */
.clapper-arm{
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3.4em;
  border-radius: .6em .6em .2em .2em;
  border: 1px solid rgba(255,255,255,.25);
  background-image: repeating-linear-gradient(-45deg, #f3f3f1 0 2.1em, #0a0a0a 2.1em 4.2em);
  box-shadow: 0 .6em 1.2em -.5em rgba(0,0,0,.7);
  transform-origin: 1.2em 100%;
  transform: translateZ(.6em);
  transition: transform .17s cubic-bezier(.55,0,.9,.5);
}
.clapper.is-open .clapper-arm{
  transform: translateZ(.6em) rotate(var(--open));
  transition: transform .5s cubic-bezier(.2,1.5,.35,1);
}
.clapper-hinge{
  position: absolute;
  left: .55em; top: 2.75em;
  width: 1.3em; height: 1.3em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #8a8a8a 60%, #2a2a2a);
  box-shadow: 0 0 0 .2em #000;
  transform: translateZ(.9em);
}

/* the clap: the board jolts and a thin flash runs along the seam */
.clapper.is-clapping .clapper-body{ transform: translateY(.2em); }
.clapper-flash{
  position: absolute;
  left: 0; right: 0; top: 3.3em;
  height: .5em;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  filter: blur(.25em);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease-out;
  transform: translateZ(.7em);
}
.clapper.is-clapping .clapper-flash{ opacity: .85; transition-duration: .03s; }

.scroll-cue{
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.scroll-cue::after{
  content: "";
  display: block;
  width: 1px; height: 26px;
  margin: 10px auto 0;
  background: linear-gradient(var(--fg-dim), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  50.01%{ transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 7. Services ---------- */
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.card{
  background: var(--bg);
  padding: 40px 32px;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.card:hover{ background: var(--bg-soft); }
.card-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 11px;
  margin-bottom: 22px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.card:hover .card-tag{ color: var(--fg-white); border-color: var(--glass-border-2); }
.card h3{ margin-bottom: 10px; }
.card p{ font-size: 14.5px; }

/* ---------- 8. Work ---------- */
.work-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.work-card{
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  cursor: pointer;
}
.work-card .work-visual{
  position: absolute; inset: 0;
  transition: transform .7s var(--ease);
}
.work-card:hover .work-visual{ transform: scale(1.06); }
.work-card .work-visual img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* sample placeholder photos are desaturated to match the site's black & white palette */
  filter: grayscale(1) contrast(1.08) brightness(.82);
  transition: filter .5s var(--ease);
}
.work-card:hover .work-visual img{ filter: grayscale(.25) contrast(1.05) brightness(.92); }
.work-card .work-info{
  position: absolute; left:0; right:0; bottom:0;
  padding: 22px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75) 60%);
}
.work-card .work-cat{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display:block;
  margin-bottom: 6px;
}
.work-card h3{ font-size: 17px; }

/* ---------- 8b. Testimonials ---------- */
/* Full-bleed two-row marquee: each row scrolls continuously and independently,
   the two rows run in opposite directions, and hovering a row pauses only
   that row (CSS animation-play-state, so it freezes in place with no jump). */
.testimonial-marquee{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-row{ overflow: hidden; width: 100%; }
.marquee-track{
  display: flex;
  align-items: stretch;
  gap: 0px;
  width: max-content;
  will-change: transform;
  animation: marqueeToLeft 46s linear infinite;
}
.marquee-row--a{ padding-left: 32px; }
.marquee-row--b{ padding-left: 32px; }
.marquee-row--b .marquee-track{
  animation-name: marqueeToRight;
  animation-duration: 52s;
}
.marquee-row:hover .marquee-track{ animation-play-state: paused; }

@keyframes marqueeToLeft{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes marqueeToRight{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

.testimonial-card{
  flex: 0 0 auto;
  margin: 8px; /* replaces <figure>'s default 1em 40px margin: 16px between cards, and the same 16px between the two rows */
  width: 340px;
  padding: 28px 30px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.testimonial-card blockquote{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--fg-white);
}
.testimonial-card blockquote::before{ content: "\201C"; }
.testimonial-card blockquote::after{ content: "\201D"; }
.testimonial-card figcaption{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.testimonial-avatar{
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-fill-2);
  border: 1px solid var(--glass-border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-white);
}
.testimonial-meta{ display: flex; flex-direction: column; gap: 3px; }
.testimonial-name{ font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg-white); }
.testimonial-role{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------- 9. About ---------- */
/* Lives inside <section class="section" id="about">, which already supplies
   the max-width/centering/padding — this only adds the grid layout, so the
   two don't stack into doubled vertical spacing. */
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}
.about-text p{ margin-top: 20px; max-width: 460px; }
.about-text h2{ margin-top: 14px; }
.about-panel{ padding: 40px; border-radius: var(--radius-md); }
.principles{ display: flex; flex-direction: column; gap: 30px; }
.principles li{ display: flex; gap: 18px; }
.principle-mark{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-dim);
  padding-top: 3px;
  flex-shrink: 0;
}
.principles h4{ margin-bottom: 6px; }
.principles p{ font-size: 14px; }

/* ---------- 10. Contact ---------- */
/* Same as .about-grid — <section class="section" id="contact"> already
   supplies max-width/centering/padding; this just adds a little extra
   bottom room before the footer, plus the grid layout. */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  padding-bottom: 24px;
}
.contact-intro p{ margin-top: 18px; max-width: 420px; }
.contact-intro h2{ margin-top: 14px; }

.contact-details{ display: flex; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.contact-detail-item{ display: flex; align-items: center; gap: 12px; }
.contact-detail{ display: flex; flex-direction: column; gap: 6px; }
.contact-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.contact-value{
  font-size: 15px;
  color: var(--fg-white);
  transition: opacity var(--dur-fast) var(--ease);
}
.contact-detail:hover .contact-value{ opacity: .7; }

.copy-btn{
  position: relative;
  flex-shrink: 0;
  width: 30px; height: 30px;
  margin-top: 18px; /* sits level with the email value, below the label */
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  color: var(--fg-muted);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.copy-btn:hover{ transform: translateY(-2px); background: var(--fg-white); border-color: var(--fg-white); color: var(--bg); }
.copy-btn svg{
  position: absolute;
  width: 14px; height: 14px;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.copy-btn .copy-icon{ opacity: 1; transform: scale(1); }
.copy-btn .check-icon{ opacity: 0; transform: scale(.5); }
.copy-btn.copied{ background: var(--fg-white); border-color: var(--fg-white); color: var(--bg); }
.copy-btn.copied .copy-icon{ opacity: 0; transform: scale(.5); }
.copy-btn.copied .check-icon{ opacity: 1; transform: scale(1); }

.social-row{ display: flex; gap: 12px; margin-top: 36px; }
.social-link{
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.social-link svg{ width: 16px; height: 16px; color: var(--fg); }
.social-link:hover{ transform: translateY(-3px); background: var(--fg-white); border-color: var(--fg-white); }
.social-link:hover svg{ color: var(--bg); }

.contact-form{
  padding: 36px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-row{ display: flex; flex-direction: column; gap: 8px; }
.form-row label{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.form-row input, .form-row textarea, .form-row select{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--fg-white);
  font-size: 14.5px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  border-color: var(--glass-border-2);
  background: rgba(255,255,255,0.05);
  outline: none;
}
.form-row textarea{ resize: vertical; min-height: 90px; }
.form-row select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239a9a9a'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.form-submit{ margin-top: 6px; width: 100%; }
.form-note{ font-size: 12.5px; text-align: center; color: var(--fg-dim); margin: 0; }

/* ---------- 11. Footer ---------- */
.footer{
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 32px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
}
.footer-mark svg{ width: 28px; height: auto; color: var(--fg-dim); transition: color var(--dur-fast) var(--ease); }
.footer-mark:hover svg{ color: var(--fg-white); }
.footer-copy{ font-size: 13px; color: var(--fg-dim); text-align: center; }

/* ---------- 12. Reveal-on-scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }
.hero-title span.reveal{ transition-delay: calc(var(--i, 0) * .08s); }

/* ---------- 13. Responsive ---------- */
@media (min-width: 1025px){
  /* Desktop only: the mark's on-screen size tracks container height (fixed
     vertical camera FOV), so bumping this one value scales the logo up
     without touching tablet/mobile layout. */
  .hero-model{ height: min(680px, 64vh); transform: translate(-5%, -5%); } /* nudged right of centre-left, and a little higher */
  .hero-inner{ transform: translate(clamp(0px, calc((100vw - 1024px) * .1), 44px), -34px); } /* a little right (scaled to width) and up */
}

@media (max-width: 1024px){
  .hero{ grid-template-columns: 1fr; padding-top: 150px; }
  .hero-inner{ max-width: 600px; }
  .hero-model{ height: 360px; order: -1; }
  .hero-title{ font-size: clamp(44px, 9vw, 68px); }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .work-grid{ grid-template-columns: repeat(3, 1fr); }
  .about-grid, .contact-grid{ grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 720px){
  /* Logo and disc both scale off this one height value, so shrinking it here
     scales the pair down together as a group. width/margin/justify-content
     are set explicitly (not just inherited) so the group is reliably
     centered regardless of any parent padding quirks. */
  .hero-model{
    height: var(--stage);
    width: 100%;
    margin: 0 auto;
    justify-content: center;
  }

  .nav-links, .nav-cta{ display: none; }
  .nav-toggle{ display: flex; }

  .nav-mobile{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 880px;
    margin: 10px auto 0;
    padding: 10px;
    border-radius: var(--radius-md);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-8px);
    transition: max-height var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-med);
  }
  .nav-mobile a{
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 15.5px;
    color: var(--fg);
    opacity: 0;
    transform: translateY(-6px);
    transition: background var(--dur-fast) var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav-mobile a:hover{ background: var(--glass-fill); }
  .nav-mobile a.nav-mobile-cta{
    margin-top: 6px;
    padding-top: 17px;
    border-top: 1px solid var(--line);
    font-weight: 600;
    color: var(--fg-white);
  }

  .nav-mobile.open{
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
    transition: max-height var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease), visibility 0s linear 0s;
  }
  .nav-mobile.open a{ opacity: 1; transform: translateY(0); }
  .nav-mobile.open a:nth-child(1){ transition-delay: .06s; }
  .nav-mobile.open a:nth-child(2){ transition-delay: .11s; }
  .nav-mobile.open a:nth-child(3){ transition-delay: .16s; }
  .nav-mobile.open a:nth-child(4){ transition-delay: .21s; }

  .section{ padding: 64px 20px; }

  /* wave-dot background (script.js §9) — visible across the screen, not just the top */
  .bg-pattern{
    -webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 35%, #000 25%, transparent 100%);
            mask-image: radial-gradient(ellipse 120% 100% at 50% 35%, #000 25%, transparent 100%);
  }
  .services-grid{ grid-template-columns: 1fr; }
  .work-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .work-card .work-info{ padding: 14px; }
  .work-card .work-cat{ font-size: 9.5px; margin-bottom: 4px; }
  .work-card h3{ font-size: 14px; }
  /* Landing screen, every phone size: nav -> space -> clapper -> space -> headline + copy,
     all inside the first screen; the buttons sit just below the fold and scroll-reveal.
     --em sizes the clapper from the width, but never larger than the height allows.
     Whatever height is left over is shared: 42% above the clapper (capped), a little between
     clapper and copy, the rest below the copy. --text is an estimate of the copy block's height;
     the buttons are pinned past the fold by .hero-inner's min-height, so they stay hidden
     whatever the web fonts do to the copy. */
  .hero{
    --fold: 100vh;
    --nav: 78px;                                /* bottom edge of the floating nav bar */
    --text: 260px;                              /* est. height of eyebrow + headline + copy */
    --em: max(7px, min(calc((100vw - 40px) * .028), calc((var(--fold) - var(--nav) - var(--text) - 40px) / 29.2), 15px));
    --stage: calc(var(--em) * 27.6);            /* clapper (24em) + headroom for the raised stick (3.6em) */
    --left: max(0px, calc(var(--fold) - var(--nav) - var(--stage) - var(--text) - 28px));
    /* nav bar -> clapper stage; never less than what keeps the raised stick clear of the nav */
    --s: clamp(calc(12px + var(--em) * 1.6), calc(var(--left) * .42), 72px);
    --gap: calc(28px + min(24px, var(--left) * .08));     /* clapper -> eyebrow */
    padding: calc(var(--nav) + var(--s)) 20px 60px;
    gap: var(--gap);
    align-content: start;
  }
  @supports (height: 100svh){ .hero{ --fold: 100svh; } }
  .clapper{ font-size: var(--em); }
  .hero-inner{
    transform: none;
    display: flex; flex-direction: column;
    min-height: calc(var(--fold) + 112px - var(--nav) - var(--s) - var(--stage) - var(--gap));
  }
  .hero-cta{ margin-top: auto; }
  .contact-details{ gap: 28px; }
  .contact-grid{ padding-bottom: 16px; }
  .contact-form{ width: 100%; margin: 0 auto; }

  .marquee-row--a, .marquee-row--b{ padding-left: 20px; }
  .marquee-track{ gap: 0px; }
  .testimonial-card{ width: 270px; padding: 22px 22px; gap: 16px; }
}

@media (max-width: 460px){
  .hero-title{ font-size: clamp(34px, 10.8vw, 52px); }
  .hero-sub{ font-size: clamp(14.5px, 4.2vw, 17px); }
  .hero-cta{ flex-direction: column; align-items: stretch; }
  .hero-cta .btn{ width: 100%; }
}

/* ---------- 14. Motion & accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  .scroll-cue::after{ animation: none; }
  .cursor-glow{ display: none; }
  .marquee-track{ animation: none; }
  .clapper{ animation: none; }
  .clapper-rig, .clapper-arm, .clapper-body, .clapper-flash{ transition: none; }
}