/* ============================================================
   VENI GRUP — modern luxury static site
   Palette derived from brand logo: black · gold · gray
   ============================================================ */

:root{
  color-scheme: dark;
  /* Brand colors */
  --black:      #0B0B0D;
  --black-2:    #101014;
  --surface:    #141418;
  --surface-2:  #1A1A20;
  --line:       rgba(255,255,255,.08);
  --line-2:     rgba(255,255,255,.14);

  --gold:       #F5C518;
  --gold-2:     #FFD666;
  --gold-deep:  #D9A400;

  --gray:       #8A8A90;   /* the "veni" gray */
  --gray-light: #B7B7BE;
  --white:      #F4F4F6;

  --txt:        #E7E7EA;
  --txt-dim:    #9A9AA2;

  /* letterbox behind photos/video in the lightbox — a shade off the panel so the
     frame still reads, instead of the photo bleeding into the background */
  --matte:      #000000;

  /* atmosphere: preloader grid + the hero's vertical sweep */
  --grid-faint: rgba(245,197,24,.06);
  --scan-tint:  rgba(245,197,24,.06);

  /* Type */
  --font: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --container: 1200px;
  --radius: 16px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --nav-h: 84px;
}

/* ===== Reset ===== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust:100%;
  /* No overflow-x here on purpose. `clip` would chop position:fixed children
     (it clips descendants that fixed positioning normally escapes — it ate the
     mobile drawer), and `hidden` can hand scrolling to body in some browsers,
     which breaks scroll-padding-top and drops every anchor under the navbar.
     Sideways panning is fixed at its sources instead: overscroll-behavior on
     the rails and the honeypot that used to sit at left:-9999px. */
  overscroll-behavior-y:none;
}
body{
  font-family:var(--font);
  background:var(--black);
  color:var(--txt);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea{ font-family:inherit; }
::selection{ background:var(--gold); color:#000; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,40px); }

/* ===== Reusable pieces ===== */
.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:.78rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:22px;
}
.eyebrow .line{ width:38px; height:1px; background:var(--gold); display:inline-block; }

.section{ padding: clamp(80px,11vw,150px) 0; position:relative; }
.section__head{ max-width:680px; margin:0 auto clamp(48px,7vw,80px); text-align:center; }
.section__head .eyebrow{ margin-bottom:20px; }
.section__title{
  font-size:clamp(2rem,4.6vw,3.4rem);
  font-weight:800; line-height:1.08; letter-spacing:-.02em;
  color:var(--white);
}
.section__sub{ margin-top:20px; color:var(--txt-dim); font-size:1.05rem; }

.grad{
  background:linear-gradient(120deg,var(--gold) 10%,var(--gold-2) 55%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== Buttons ===== */
.btn{
  --pad:16px 30px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--pad);
  font-size:.92rem; font-weight:600; letter-spacing:.02em;
  border-radius:100px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
  will-change:transform;
}
.btn--block{ width:100%; }
.btn--gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#141414;
  box-shadow:0 10px 30px -12px rgba(245,197,24,.6);
}
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -12px rgba(245,197,24,.75); }
.btn--ghost{
  border:1px solid var(--line-2); color:var(--white); background:transparent;
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--black);
  display:grid; place-items:center; overflow:hidden;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-hidden{ opacity:0; visibility:hidden; }
.preloader::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:
    linear-gradient(var(--grid-faint) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-faint) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 70%);
}
.preloader__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:26px; }
.preloader__logo{
  display:none; width:min(260px,60vw); height:auto;
  filter:drop-shadow(0 0 30px rgba(245,197,24,.25));
  animation:plFloat 3s var(--ease) infinite alternate;
}
.preloader__logo--dark{ display:block; }
:root[data-theme="light"] .preloader__logo--dark{ display:none; }
:root[data-theme="light"] .preloader__logo--light{ display:block; }
@keyframes plFloat{ to{ transform:translateY(-8px); } }
.preloader__bar{
  width:min(240px,56vw); height:2px; border-radius:2px;
  background:var(--line-2); position:relative; overflow:hidden;
}
.preloader__bar span{
  position:absolute; inset:0 100% 0 0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  box-shadow:0 0 12px rgba(245,197,24,.5); transition:inset .2s ease;
}
.preloader__count{ font-size:.78rem; letter-spacing:.4em; color:var(--txt-dim); font-weight:600; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:height .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  height:66px;
  background:rgba(11,11,13,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; }

/* Brand */
.brand{ display:inline-flex; align-items:center; gap:12px; }
.brand__logo{ display:none; width:55px; height:55px; object-fit:contain; }
.brand__logo--dark{ display:block; }
:root[data-theme="light"] .brand__logo--dark{ display:none; }
:root[data-theme="light"] .brand__logo--light{ display:block; }
.brand__text{ display:none; flex-direction:column; line-height:1; }
.footer__brand .brand__text{ display:none; }
.brand__name{
  font-weight:800; font-size:1.5rem; letter-spacing:-.01em; color:var(--white);
  text-transform:lowercase;
}
.brand__grup{
  font-weight:600; color:var(--gray); margin-left:2px; font-size:.9em;
  letter-spacing:.02em;
}
.brand__slogan{
  font-size:.52rem; letter-spacing:.32em; color:var(--gray);
  margin-top:4px; font-weight:600;
}

/* Links */
.nav__links{ display:flex; align-items:center; gap:8px; }
.nav__link{
  position:relative; padding:10px 16px; font-size:.92rem; font-weight:500;
  color:var(--txt-dim); border-radius:100px;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover{ color:var(--white); }
.nav__link:hover::after,
.nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--white); }
/* The outline is always there; the gold fill lives on ::after as its own layer
   so it can wipe away instead of just fading — the same left-to-right motion the
   nav underline uses. `isolation` keeps that layer behind the label but still
   above the button's own background (a plain z-index:-1 would sink it behind
   the whole navbar). */
.nav__link--cta{
  color:#141414; background:none;
  border:1px solid var(--gold);
  font-weight:600; margin-left:8px;
  isolation:isolate;
  box-shadow:0 8px 22px -12px rgba(245,197,24,.7);
  transition:color .45s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease), background .45s var(--ease);
}
.nav__link--cta::after{
  display:block; content:"";
  position:absolute; inset:0; height:auto; z-index:-1;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  /* the shared .nav__link::after is the underline and ships scaleX(0) — undo it
     or this fill would be collapsed to nothing */
  transform:none;
  /* clip-path, not scaleX: scaling squashes the pill's rounded ends into
     ellipses mid-wipe, while an inset clip leaves a clean vertical edge */
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
  transition:clip-path .5s var(--ease), -webkit-clip-path .5s var(--ease);
}
.nav__link--cta:hover{ color:#141414; transform:translateY(-2px); }

/* Already on the contact section: the fill drains left-to-right, leaving the
   outline. Must sit after :hover — both are (0,2,0), so source order decides. */
.nav__link--cta.is-active{ color:var(--gold); box-shadow:none; }
.nav__link--cta.is-active::after{
  -webkit-clip-path:inset(0 0 0 100%);
  clip-path:inset(0 0 0 100%);
}
.nav__link--cta.is-active:hover{
  color:var(--gold); background:rgba(245,197,24,.1);
}

/* Hamburger */
.nav__toggle{ display:none; width:44px; height:44px; position:relative; }
.nav__toggle span{
  position:absolute; left:11px; right:11px; height:2px; background:var(--white); border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s var(--ease), top .4s var(--ease);
}
.nav__toggle span:nth-child(1){ top:15px; }
.nav__toggle span:nth-child(2){ top:21px; }
.nav__toggle span:nth-child(3){ top:27px; }
.nav__toggle.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* Right cluster + theme toggle */
.nav__right{ display:flex; align-items:center; gap:12px; }
.theme-toggle{
  width:42px; height:42px; flex:none; border-radius:50%;
  display:grid; place-items:center; color:var(--white);
  border:1px solid var(--line-2); background:transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.theme-toggle:hover{ color:var(--gold); border-color:var(--gold); transform:translateY(-2px); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding-top:var(--nav-h); overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.hero__glow--1{
  width:620px; height:620px; top:-14%; right:-6%;
  background:radial-gradient(circle,rgba(245,197,24,.28),transparent 65%);
  animation:float1 14s var(--ease) infinite alternate;
}
.hero__glow--2{
  width:520px; height:520px; bottom:-16%; left:-8%;
  background:radial-gradient(circle,rgba(245,197,24,.12),transparent 65%);
  animation:float2 18s var(--ease) infinite alternate;
}
@keyframes float1{ to{ transform:translate(-50px,40px) scale(1.12);} }
@keyframes float2{ to{ transform:translate(60px,-30px) scale(1.08);} }

.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 65% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 40%,#000 30%,transparent 78%);
}

.hero__inner{ position:relative; z-index:2; max-width:920px; }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:.8rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:30px;
}
.hero__eyebrow .line{ width:40px; height:1px; background:var(--gold); }

.hero__title{
  font-size:clamp(2.7rem,8vw,6rem);
  font-weight:800; line-height:1.02; letter-spacing:-.03em; color:var(--white);
}
.hero__title span{ display:block; }
.hero__slogan{
  margin-top:26px; font-size:clamp(.85rem,2vw,1.05rem);
  letter-spacing:.42em; font-weight:600; color:var(--gray-light);
  text-transform:uppercase;
}
.hero__lead{
  margin-top:24px; max-width:560px; font-size:1.12rem; color:var(--txt-dim);
}
.hero__actions{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; }

.hero__scroll{
  position:absolute; left:50%; transform:translateX(-50%);
  /* clears the home indicator on notched phones */
  bottom:max(34px, calc(env(safe-area-inset-bottom) + 16px));
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--txt-dim); font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  /* letter-spacing leaves a trailing gap after the last letter, so centred text
     reads as shifted left — indent by the same amount to cancel it */
  text-indent:.28em;
}
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:var(--gold); animation:scrolldot 2s var(--ease) infinite;
}
@keyframes scrolldot{ to{ top:120%; } }

/* ============================================================
   STATS
   ============================================================ */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--black-2); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{
  padding:clamp(38px,6vw,64px) 24px; text-align:center; position:relative;
}
.stat:not(:last-child)::after{
  content:""; position:absolute; right:0; top:22%; bottom:22%; width:1px; background:var(--line);
}
.stat__num{
  display:block; font-size:clamp(2.2rem,5vw,3.4rem); font-weight:800; line-height:1;
  color:var(--white); letter-spacing:-.02em;
}
.stat__num span{ color:var(--gold); }
.stat__label{ display:block; margin-top:12px; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-dim); }

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(40px,6vw,84px); align-items:center;
}
.about__media{ position:relative; }
.about__photo{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius);
  background:
    radial-gradient(120% 120% at 30% 10%,rgba(245,197,24,.14),transparent 55%),
    linear-gradient(160deg,var(--surface),var(--black-2));
  border:1px solid var(--line);
  display:grid; place-items:center; color:rgba(245,197,24,.35);
  background-size:cover; background-position:center; overflow:hidden;
}
/* A real photo fills the frame edge to edge. It repeats the parent's radius
   rather than relying on overflow:hidden alone — clipping happens at the
   padding box, so the image's own square corner otherwise shows as a hairline
   just inside the rounded border. */
.about__photo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  border-radius:inherit;
}
.about__photo[data-placeholder]::after{
  content:attr(data-placeholder); position:absolute; bottom:18px; left:0; right:0;
  text-align:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-dim);
}
.about__badge{
  position:absolute; right:-18px; bottom:34px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#141414;
  padding:16px 22px; border-radius:14px; box-shadow:0 20px 40px -16px rgba(245,197,24,.6);
}
.about__badge-num{ display:block; font-weight:800; font-size:1.25rem; letter-spacing:-.01em; }
.about__badge-text{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.04em; margin-top:2px; }

.about__text{ margin-top:20px; color:var(--txt-dim); }
.about__text strong{ color:var(--txt); font-weight:600; }
.about__people{ display:flex; gap:40px; margin-top:34px; flex-wrap:wrap; }
.about__people li{ position:relative; padding-left:18px; }
.about__people li::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--gold); border-radius:2px; }
.about__role{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.about__person{ display:block; font-weight:600; color:var(--white); margin-top:4px; font-size:1.05rem; }

/* Timeline */
.timeline{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:clamp(56px,7vw,86px); padding-top:clamp(40px,5vw,56px);
  border-top:1px solid var(--line);
}
.timeline__item{ position:relative; padding-left:26px; }
.timeline__item::before{
  content:""; position:absolute; left:0; top:6px; width:12px; height:12px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(245,197,24,.14);
}
.timeline__year{ font-weight:800; font-size:1.4rem; color:var(--white); }
.timeline__text{ margin-top:6px; color:var(--txt-dim); font-size:.96rem; }
.timeline__text strong{ color:var(--gold); }

/* ============================================================
   CERTIFICATES
   ============================================================ */
.certificates__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,32px); max-width:900px; margin:0 auto;
}
.certificate{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:inherit; text-decoration:none;
  transition:transform .45s var(--ease), border-color .45s var(--ease),
             box-shadow .45s var(--ease);
}
.certificate:hover{
  transform:translateY(-6px); border-color:rgba(245,197,24,.45);
  box-shadow:0 26px 44px -28px rgba(0,0,0,.7);
}
/* accent line along the bottom edge — grows in from the left on hover */
.certificate::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.certificate:hover::after{ transform:scaleX(1); }

/* the document itself */
.certificate__shot{
  display:block; background:var(--matte);
  border-bottom:1px solid var(--line);
  padding:clamp(14px,2vw,22px);
}
.certificate__shot img{
  width:100%; height:clamp(240px,30vw,340px);
  object-fit:contain; object-position:top center;
  transition:transform .6s var(--ease);
}
.certificate:hover .certificate__shot img{ transform:scale(1.03); }

.certificate__body{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:clamp(18px,2.4vw,26px);
}
.certificate__label{
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.certificate__title{
  font-size:clamp(1.15rem,2vw,1.5rem); font-weight:800; letter-spacing:-.01em;
  color:var(--white); line-height:1.2;
}
.certificate__meta{ font-size:.82rem; color:var(--txt-dim); }
.certificate__cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  font-size:.8rem; font-weight:600; letter-spacing:.04em; color:var(--gold);
}
.certificate__cta::after{ content:"\2197"; transition:transform .4s var(--ease); }
.certificate:hover .certificate__cta::after{ transform:translate(3px,-3px); }

.certificates__note{
  max-width:620px; margin:clamp(32px,4vw,48px) auto 0;
  text-align:center; color:var(--txt-dim); font-size:.95rem;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:var(--black-2); border-top:1px solid var(--line); }

/* --- intro row: team photo on the left, heading on the right --- */
.services__intro{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:center;
  margin-bottom:clamp(48px,7vw,80px);
}
/* .section__head is centred and capped for full-width use — undo both here */
.services__copy{ max-width:none; margin:0; text-align:left; }

.services__team{ position:relative; }
.services__team img{
  width:100%; height:auto; border-radius:var(--radius);
  box-shadow:0 26px 44px -28px rgba(0,0,0,.7);
}
/* rides the photo's bottom-right corner, the same anchor .about__badge uses */
.services__team-badge{
  position:absolute; right:-14px; bottom:26px;
  padding:14px 20px; border-radius:12px; white-space:nowrap;
  font-weight:800; font-size:.9rem; letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#141414;
  box-shadow:0 20px 40px -16px rgba(245,197,24,.6);
  /* slides in from the right once the photo reveals */
  opacity:0; transform:translateX(30px);
  transition:opacity .6s var(--ease-out) .3s, transform .6s var(--ease-out) .3s;
}
.services__team.is-visible .services__team-badge{ opacity:1; transform:none; }

.services__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.service{
  position:relative; padding:38px 32px; border-radius:var(--radius);
  background:linear-gradient(160deg,var(--surface),var(--black-2));
  border:1px solid rgba(245,197,24,.14); overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.service::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(120% 90% at 0% 0%,rgba(245,197,24,.1),transparent 45%);
  opacity:0; transition:opacity .5s var(--ease);
}
/* Corner brackets on hover — top-right, bottom-right, bottom-left.
   Drawn as one rounded-rect border that is masked down to just those three
   corners, so each elbow curves with the card instead of being a sharp angle.
   (A per-corner pseudo-element isn't possible here: ::before is the glow.) */
.service::after{
  content:""; position:absolute; inset:12px; z-index:3; pointer-events:none;
  /* 1px matches the card's own border weight — 2px read as heavy */
  border:1px solid var(--gold);
  border-radius:calc(var(--radius) - 8px);
  opacity:0; transform:scale(1.015);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  --arm:22px;
  -webkit-mask:
    linear-gradient(#000,#000) top right    / var(--arm) var(--arm) no-repeat,
    linear-gradient(#000,#000) bottom right / var(--arm) var(--arm) no-repeat,
    linear-gradient(#000,#000) bottom left  / var(--arm) var(--arm) no-repeat;
  mask:
    linear-gradient(#000,#000) top right    / var(--arm) var(--arm) no-repeat,
    linear-gradient(#000,#000) bottom right / var(--arm) var(--arm) no-repeat,
    linear-gradient(#000,#000) bottom left  / var(--arm) var(--arm) no-repeat;
}
.service:hover::after{ opacity:1; transform:none; }

.service:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 30px 50px -30px rgba(0,0,0,.8); }
.service:hover::before{ opacity:1; }
.service:hover .service__icon{ color:#141414; background:var(--gold); box-shadow:0 12px 26px -10px rgba(245,197,24,.7); }
.service__icon{
  width:60px; height:60px; border-radius:14px; display:grid; place-items:center;
  color:var(--gold); background:rgba(245,197,24,.08); border:1px solid rgba(245,197,24,.2);
  margin-bottom:26px; transition:all .5s var(--ease); position:relative; z-index:1;
}
.service__icon svg{ width:28px; height:28px; }
.service__title{ position:relative; z-index:1; font-size:1.3rem; font-weight:700; color:var(--white); letter-spacing:-.01em; }
.service__text{ position:relative; z-index:1; margin-top:12px; color:var(--txt-dim); font-size:.96rem; }
.service__tag{
  position:relative; z-index:1; display:inline-block; margin-top:22px;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--gold); padding:6px 12px; border-radius:100px; border:1px solid rgba(245,197,24,.3);
}
/* `--soft` used to dim both the label and its outline. Both tiers now share the
   primary tag's gold, so the modifier carries no styling of its own — the class
   stays on the markup only to mark which services are secondary. */
.service--primary{ border-color:rgba(245,197,24,.14); }

/* ============================================================
   PROJECTS  -  horizontal rail + lightbox
   ============================================================ */
/* The rail already carries 52px of bottom padding (room for the card shadow) and
   ends on a light controls row, so ensure proper spacing with padding. */
.projects{ overflow:hidden; padding-bottom:clamp(80px,11vw,150px); }
.projects__head-wrap{ margin-bottom:clamp(16px,3vw,34px); }

/* --- rail --- */
.projects__rail{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* Without this the swipe keeps going once the rail hits its end: the gesture
     chains up to the document and pans the whole page sideways. */
  overscroll-behavior-x:contain;
  /* overflow-y:hidden clips vertically (overflow-x:auto forces it), so the card's
     hover lift and shadow have to live inside this padding. Measured budget:
     shadow reaches ~40px below / ~16px above the card, hence the headroom. */
  padding:26px 0 52px;
  cursor:grab;
}
.projects__rail::-webkit-scrollbar{ display:none; }
.projects__rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.projects__rail.is-dragging .project-card{ pointer-events:none; }

.projects__track{
  display:flex; gap:clamp(16px,2vw,24px);
  padding:0 clamp(20px,5vw,40px);
  width:max-content;
}

/* --- card --- */
.project-card{
  position:relative; flex:0 0 clamp(260px,32vw,380px);
  aspect-ratio:3/4;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  cursor:pointer; scroll-snap-align:center;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.project-card:hover,
.project-card:focus-visible{
  transform:translateY(-8px); border-color:rgba(245,197,24,.5);
  /* kept tight on purpose: the rail clips vertically, so the shadow must fit
     inside .projects__rail's padding (see the measured budget there) */
  box-shadow:0 14px 26px -12px rgba(0,0,0,.55);
  outline:none;
}
.project-card__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .8s var(--ease);
}
.project-card:hover .project-card__img{ transform:scale(1.07); }
.project-card__shade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(11,11,13,.15) 0%,rgba(11,11,13,.05) 35%,rgba(11,11,13,.92) 100%);
}
.project-card__body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:clamp(18px,2.4vw,26px);
}
.project-card__status{
  font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px;
}
.project-card__status--done{ color:var(--gold); background:rgba(245,197,24,.14); border:1px solid rgba(245,197,24,.34); }
.project-card__status--active{ color:#7ee787; background:rgba(126,231,135,.14); border:1px solid rgba(126,231,135,.34); }
.project-card__status--active::before{ content:"\25cf\00a0"; }
.project-card__title{
  font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:700; line-height:1.25;
  color:#fff; letter-spacing:-.01em;
}
.project-card__cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.06em; color:var(--gold);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.project-card__cta::after{ content:"\2192"; transition:transform .4s var(--ease); }

/* Closing card — a statement about the work that isn't in the rail. There is no
   gallery behind it, so it drops every affordance that would promise one. */
.project-card--more{ cursor:default; }
.project-card--more:hover{ transform:none; border-color:var(--line); box-shadow:none; }
.project-card--more:hover .project-card__img{ transform:none; }
.project-card__note{ font-size:.84rem; line-height:1.5; color:rgba(255,255,255,.75); }
.project-card:hover .project-card__cta,
.project-card:focus-visible .project-card__cta{ opacity:1; transform:none; }
.project-card:hover .project-card__cta::after{ transform:translateX(4px); }

/* --- controls --- */
.projects__controls{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:4px; flex-wrap:wrap;
}
.projects__hint{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim); }
.projects__arrows{ display:flex; gap:12px; margin-left:auto; }
.projects__arrow{
  width:50px; height:50px; border-radius:50%;
  border:1px solid var(--line-2); background:transparent; color:var(--txt);
  display:grid; place-items:center; transition:all .3s var(--ease);
}
.projects__arrow svg{ width:20px; height:20px; }
.projects__arrow:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); background:rgba(245,197,24,.08); }
.projects__arrow:disabled{ opacity:.28; cursor:not-allowed; }

/* ============================================================
   PROJECT MODAL (lightbox)
   ============================================================ */
.project-modal{
  position:fixed; inset:0; z-index:9000;
  background:rgba(4,4,6,.9); backdrop-filter:blur(10px);
  display:grid; place-items:center; padding:clamp(12px,3vw,32px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s;
}
.project-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
/* `visibility` is inherited, but a descendant can override it — the active slide
   did exactly that and stayed hit-testable (double-click = fullscreen) while the
   modal was closed. Force the whole subtree down when the modal is not open. */
.project-modal:not(.is-open) .project-modal__slides > *{
  visibility:hidden !important; pointer-events:none !important;
}
.project-modal__panel{
  position:relative; width:min(1040px,100%);
  height:min(92vh,860px); overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--black-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,3vw,34px);
  transform:translateY(18px) scale(.98);
  transition:transform .45s var(--ease);
}
.project-modal.is-open .project-modal__panel{ transform:none; }
.project-modal__close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--surface); color:var(--txt-dim);
  display:grid; place-items:center; transition:all .3s var(--ease);
}
.project-modal__close svg{ width:20px; height:20px; }
.project-modal__close:hover{ border-color:var(--gold); color:var(--gold); transform:rotate(90deg); }

.project-modal__head{ flex:0 0 auto; margin-bottom:16px; padding-right:56px; }
.project-modal__eyebrow{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:8px;
}
.project-modal__title{
  font-size:clamp(1.25rem,2.4vw,1.85rem); font-weight:800; line-height:1.15;
  letter-spacing:-.02em; color:var(--white);
}
.project-modal__desc{
  margin-top:8px; color:var(--txt-dim); font-size:.92rem; max-width:640px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* stage fills whatever space is left — no inner scrolling */
.project-modal__stage{
  flex:1 1 auto; min-height:140px;
  position:relative; border-radius:var(--radius);
  overflow:hidden; background:var(--matte); border:1px solid var(--line);
}
.project-modal__slides{ position:absolute; inset:0; }
.project-modal__slides img,
.project-modal__slides video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  background:var(--matte); opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.project-modal__slides .is-active{ opacity:1; visibility:visible; }
.project-modal__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:52px; height:52px; border-radius:50%;
  background:rgba(11,11,13,.62); border:1px solid rgba(255,255,255,.18);
  color:#fff; display:grid; place-items:center;
  backdrop-filter:blur(6px); transition:all .3s var(--ease);
}
.project-modal__nav svg{ width:22px; height:22px; }
.project-modal__nav:hover{ background:var(--gold); color:#141414; border-color:var(--gold); }
.project-modal__nav--prev{ left:14px; }
.project-modal__nav--next{ right:14px; }
.project-modal__counter{
  position:absolute; right:14px; bottom:14px; z-index:4;
  padding:7px 14px; border-radius:100px; font-size:.74rem; font-weight:600; letter-spacing:.08em;
  background:rgba(11,11,13,.7); border:1px solid rgba(255,255,255,.14); color:#fff;
  backdrop-filter:blur(6px);
}

/* Document mode (certificates): the whole page is shown at once. A4 is portrait,
   so the panel narrows to match — otherwise the document floats in a wide frame
   and ends up smaller than it needs to be. */
.project-modal.is-doc .project-modal__panel{ width:min(560px,100%); }
.project-modal.is-doc .project-modal__stage{ background:var(--matte); }
.project-modal.is-doc .project-modal__head{ margin-bottom:14px; }
.project-modal.is-doc .project-modal__desc{ -webkit-line-clamp:1; }
/* two certificates only — the arrows and counter are enough, and dropping the
   thumbnail strip hands its height back to the document */
.project-modal.is-doc .project-modal__thumbs{ display:none; }

.project-modal__thumbs{
  flex:0 0 auto;
  display:flex; gap:10px; margin-top:14px;
  overflow-x:auto; overflow-y:hidden; padding-bottom:6px;
  overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.project-modal__thumbs::-webkit-scrollbar{ height:5px; }
.project-modal__thumbs::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:3px; }
.project-modal__thumb{
  position:relative; flex:0 0 88px; height:60px; border-radius:8px; overflow:hidden;
  border:2px solid transparent; opacity:.5; transition:all .3s var(--ease); background:var(--matte);
}
.project-modal__thumb img{ width:100%; height:100%; object-fit:cover; }
.project-modal__thumb:hover{ opacity:.85; }
.project-modal__thumb.is-active{ opacity:1; border-color:var(--gold); }
.project-modal__thumb--video::after{
  content:"\25b6"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:.8rem; color:#fff; background:rgba(0,0,0,.45);
}

.projects__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.project{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.project--wide{ grid-column:span 2; }
.project:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 40px 60px -34px rgba(0,0,0,.85); }
.project__img{
  aspect-ratio:16/10; position:relative;
  background:
    radial-gradient(130% 100% at 20% 0%,rgba(245,197,24,.16),transparent 55%),
    linear-gradient(150deg,var(--surface-2),var(--black-2));
  background-size:cover; background-position:center;
  transition:transform .7s var(--ease);
}
.project--wide .project__img{ aspect-ratio:16/8; }
.project:hover .project__img{ transform:scale(1.04); }
.project__img[data-placeholder]::after{
  content:attr(data-placeholder); position:absolute; inset:0; display:grid; place-items:center;
  color:var(--txt-dim); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:0 20px;
}
.project__img::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(11,11,13,.85),transparent 60%);
}
.project__body{ padding:26px 28px 30px; position:relative; flex:1; display:flex; flex-direction:column; }
.project__status{
  align-self:flex-start; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; margin-bottom:16px;
}
.project__status--done{ color:var(--gold); background:rgba(245,197,24,.1); border:1px solid rgba(245,197,24,.3); }
.project__status--active{ color:#7ee787; background:rgba(126,231,135,.1); border:1px solid rgba(126,231,135,.3); }
.project__status--active::before{ content:"● "; }
.project__title{ font-size:1.3rem; font-weight:700; color:var(--white); letter-spacing:-.01em; }
.project__desc{ margin-top:10px; color:var(--txt-dim); font-size:.94rem; }
.project__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.project__tags li{
  font-size:.72rem; color:var(--gray-light); padding:5px 11px; border-radius:100px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.project__period{
  margin-top:auto; padding-top:18px; font-size:.8rem; color:var(--gold); font-weight:500; letter-spacing:.03em;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:var(--black-2); border-top:1px solid var(--line); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center; }
.contact__intro .eyebrow{ margin-bottom:20px; }
.contact__list{ margin-top:40px; display:flex; flex-direction:column; gap:8px; }
.contact__list li{ display:flex; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
.contact__ico{
  width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(245,197,24,.08); border:1px solid rgba(245,197,24,.2); color:var(--gold);
}
.contact__ico svg{ width:22px; height:22px; }
.contact__k{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim); }
.contact__v{ display:block; font-weight:600; color:var(--white); margin-top:2px; transition:color .3s var(--ease); }
a.contact__v:hover{ color:var(--gold); }

/* Form */
.contact__form{
  background:linear-gradient(160deg,var(--surface),var(--black-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(28px,4vw,42px); display:flex; flex-direction:column; gap:22px;
}
.field{ position:relative; }
.field input,.field textarea{
  width:100%; background:rgba(255,255,255,.02); border:1px solid var(--line-2);
  border-radius:var(--radius-sm); padding:18px 16px 8px; color:var(--white); font-size:.98rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ height:150px; resize:none; overflow-y:auto; }
.field label{
  position:absolute; left:16px; top:15px; color:var(--txt-dim); font-size:.98rem;
  pointer-events:none; transition:all .25s var(--ease);
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--gold); background:rgba(245,197,24,.03); }
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  top:6px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
}
.contact__note{ font-size:.88rem; color:var(--gold); min-height:1em; text-align:center; }
.contact__note a{ color:inherit; text-decoration:underline; }
.contact__note.is-ok{ color:#4ec36a; }
.contact__note.is-err{ color:#ff9b9b; }
:root[data-theme="light"] .contact__note.is-ok{ color:#1A7F37; }
:root[data-theme="light"] .contact__note.is-err{ color:#C0392B; }

/* Honeypot — still rendered (display:none is skipped by many bots) but clipped
   to nothing. It used to sit at left:-9999px, which extended the document a
   full 9999px to the left and let the page pan sideways on touch. */
.field__trap{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; border:0 !important;
  overflow:hidden !important; white-space:nowrap !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
  pointer-events:none !important;
}

/* button while the request is in flight */
.btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--black); border-top:1px solid var(--line); padding-top:clamp(56px,7vw,80px); }
.footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-bottom:48px; }
.footer__desc{ margin-top:20px; color:var(--txt-dim); font-size:.94rem; max-width:340px; }
.footer__col-title{ display:block; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.footer__nav,.footer__contact{ display:flex; flex-direction:column; gap:12px; }
.footer__nav a,.footer__contact a,.footer__contact span{ color:var(--txt-dim); font-size:.94rem; transition:color .3s var(--ease); width:max-content; }
.footer__nav a:hover,.footer__contact a:hover{ color:var(--gold); }
.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:26px 0; border-top:1px solid var(--line); color:var(--txt-dim); font-size:.84rem;
}
.footer__slogan{ letter-spacing:.3em; color:var(--gray); font-weight:600; font-size:.74rem; }
.footer__logo{ display:none; width:140px; height:auto; margin-bottom:20px; }
.footer__logo--dark{ display:block; }
:root[data-theme="light"] .footer__logo--dark{ display:none; }
:root[data-theme="light"] .footer__logo--light{ display:block; }
.footer__brand{ display:flex; flex-direction:column; align-items:flex-start; }

/* ===== To top ===== */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#141414; font-size:1.2rem; font-weight:700;
  box-shadow:0 14px 30px -12px rgba(245,197,24,.65);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:all .4s var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.to-top:hover{ transform:translateY(-4px) scale(1.05); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   HERO ATMOSPHERE  (scan line + particle network)
   ============================================================ */
/* canvas is a replaced element: inset:0 alone leaves it at its intrinsic
   300x150, so the width/height are required to make it fill the hero */
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.9; }
.hero__bg{ z-index:0; }
.hero__inner{ z-index:3; }

/* slow vertical sweep across the hero */
.hero__scan{
  position:absolute; left:0; right:0; height:140px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--scan-tint),transparent);
  animation:scan 7s linear infinite;
}
@keyframes scan{ 0%{ top:-140px; } 100%{ top:100%; } }

.hero__title .grad{ text-shadow:0 0 40px rgba(245,197,24,.25); }
:root[data-theme="light"] .hero__title .grad{ text-shadow:none; }

/* text-scramble targets must not wrap mid-effect */
.scramble{ white-space:pre-wrap; }

/* ============================================================
   3D TILT + GLARE  (services only)
   ============================================================ */
.tilt{ transform-style:preserve-3d; transition:transform .4s var(--ease); will-change:transform; }
.tilt.is-tilting{ transition:transform .08s linear; }
.tilt .service__icon,.tilt .service__title{ transform:translateZ(30px); }
.glare{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4; opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 45%);
  transition:opacity .4s var(--ease);
}
.tilt:hover .glare{ opacity:1; }
:root[data-theme="light"] .glare{
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(245,197,24,.18),transparent 45%);
}

/* ============================================================
   ROTATING SERVICE BANNER
   One item at a time: swipes in, rests, swipes out. No endless scroll.
   ============================================================ */
.ticker{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--black-2);
}
.ticker__viewport{
  position:relative; height:clamp(76px,9vw,104px);
  display:grid; place-items:center;
  padding:0 clamp(20px,5vw,40px);
}
.ticker__item{
  position:absolute; left:clamp(20px,5vw,40px); right:clamp(20px,5vw,40px);
  display:flex; align-items:center; justify-content:center; gap:18px;
  text-align:center;
  font-size:clamp(1.05rem,2.6vw,1.7rem); font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--white);
  opacity:0; transform:translateX(48px);
  transition:opacity .65s var(--ease-out), transform .65s var(--ease-out);
  will-change:transform,opacity;
}
.ticker__item::before,.ticker__item::after{
  content:"\25c6"; color:var(--gold); font-size:.5em; opacity:.85; flex:none;
}
.ticker__item.is-active{ opacity:1; transform:none; }
.ticker__item.is-out{ opacity:0; transform:translateX(-48px); }

/* thin bar that fills while an item rests, so the rhythm is visible */
.ticker__progress{ position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent; }
.ticker__progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
}
.ticker__progress span.is-running{ width:100%; transition:width var(--ticker-dwell,3200ms) linear; }

@media (max-width:560px){
  .ticker__item{ gap:12px; letter-spacing:.02em; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:440px; }
  .services__grid,.projects__grid{ grid-template-columns:repeat(2,1fr); }
  .project--wide{ grid-column:span 2; }
  .services__grid .service:nth-child(3){ grid-column:auto; }
  /* photo above the copy once the two can no longer sit side by side */
  .services__intro{ grid-template-columns:1fr; }
  .services__team{ max-width:520px; }
}

@media (max-width:860px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(84vw,360px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:14px;
    background:rgba(11,11,13,.96); backdrop-filter:blur(20px);
    padding:40px; transform:translateX(100%);
    border-left:1px solid var(--line);
    /* Above the theme toggle — that button follows this panel in the DOM with
       no z-index of its own, so it would otherwise paint on top of the open
       drawer. Still below .nav__toggle (1001) so the hamburger stays tappable. */
    z-index:1000;
    /* A closed drawer must not be reachable: without this its links stay
       focusable by Tab and announced by screen readers while off-screen. */
    visibility:hidden;
    overflow-y:auto; overscroll-behavior:contain;
    transition:transform .5s var(--ease), visibility .5s;
  }
  .nav__links.is-open{ transform:translateX(0); visibility:visible; }
  .nav__link{ font-size:1.3rem; padding:12px 4px; width:100%; }
  /* Must exclude the CTA. Its ::after is the gold fill, not the underline, and
     both selectors are (0,1,1) — so this one would win on source order and
     shrink the fill to a 26px stub at the left of the button. */
  .nav__link:not(.nav__link--cta)::after{ left:4px; right:auto; width:26px; }
  .nav__link--cta{ margin-left:0; margin-top:14px; padding:14px 26px; width:100%; }
  .nav__toggle{ display:block; z-index:1001; }
  /* The drawer is a position:fixed child of .nav, and backdrop-filter makes an
     element a containing block for fixed descendants. With it on, the drawer's
     inset:0 resolves against the 66px navbar instead of the viewport and
     collapses into a small scrollable box — but only past 20px of scroll,
     where .is-scrolled kicks in. An opaque bar gives the same read on mobile.
     Do not reintroduce backdrop-filter here without moving the drawer out of
     .nav first. */
  .nav.is-scrolled{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(11,11,13,.97);
  }
  /* iOS Safari zooms the viewport when a focused input is under 16px, and the
     page is left panned sideways afterwards. 16px exactly suppresses it. */
  .field input,.field textarea{ font-size:16px; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2)::after{ display:none; }
  .certificates__grid{ grid-template-columns:repeat(2,1fr); }
  .project-modal__panel{ height:min(94vh,780px); }
  .contact__grid{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__bottom{ flex-direction:column; justify-content:center; text-align:center; gap:12px; }
}

@media (max-width:560px){
  :root{ --nav-h:72px; }
  /* The hero buttons stack full-width here, so the content grows down into the
     scroll cue. Reserve its height instead of letting the two collide. */
  .hero{ padding-bottom:104px; }
  .services__grid,.projects__grid,.certificates__grid,.timeline{ grid-template-columns:1fr; }
  .services__team-badge{ right:0; }
  .project-card{ flex:0 0 78vw; }
  /* hug the content instead of stretching a tall black stage */
  .project-modal__panel{ padding:16px; height:auto; max-height:94vh; }
  .project-modal__stage{ flex:0 0 auto; aspect-ratio:4/3; }
  .project-modal__head{ padding-right:44px; margin-bottom:12px; }
  .project-modal__desc{ -webkit-line-clamp:2; font-size:.86rem; }
  .project-modal__close{ width:38px; height:38px; top:12px; right:12px; }
  .project-modal__nav{ width:42px; height:42px; }
  .project-modal__nav--prev{ left:8px; }
  .project-modal__nav--next{ right:8px; }
  .project-modal__thumb{ flex:0 0 68px; height:48px; }
  .projects__controls{ justify-content:center; }
  .projects__hint{ display:none; }
  .projects__arrows{ margin:0 auto; }
  .project--wide{ grid-column:auto; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .about__badge{ right:12px; }
  .footer__inner{ grid-template-columns:1fr; }
  .hero__actions{ width:100%; flex-direction:column; }
  .hero__actions .btn{ width:100%; }
  .hero__eyebrow{ font-size:.62rem; letter-spacing:.1em; gap:10px; flex-wrap:wrap; }
  .hero__eyebrow .line{ width:28px; }
  .hero__slogan{ letter-spacing:.28em; }
  .brand__slogan{ display:none; }
}

/* A phone in landscape has no room for a scroll cue below the hero copy —
   hiding it is better than overlapping the buttons. The lead is still there. */
@media (max-height:560px) and (orientation:landscape){
  .hero__scroll{ display:none; }
  .hero{ padding-bottom:0; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   LIGHT THEME
   Dark is the default; light is opt-in via [data-theme="light"].
   ============================================================ */
:root[data-theme="light"]{
  color-scheme: light;
  --black:      #F6F5F1;   /* page background (warm off-white) */
  --black-2:    #FFFFFF;   /* alternating sections */
  --surface:    #FFFFFF;   /* cards */
  --surface-2:  #EFEEE8;
  --line:       rgba(24,24,27,.10);
  --line-2:     rgba(24,24,27,.16);

  --gold:       #C79200;   /* accent / fills (brass, works on white) */
  --gold-2:     #E7B62E;
  --gold-deep:  #A97C00;

  --gray:       #6C6C73;
  --gray-light: #55555C;
  --white:      #17171B;   /* "brightest" text becomes near-black */

  --txt:        #33333A;
  --txt-dim:    #5E5E66;

  --matte:      #E9E7DF;   /* warm light grey — reads as a frame on the white panel */

  --grid-faint: rgba(24,24,27,.05);
  /* gold, not grey: on cream a dark tint reads as a dirty shadow, while gold
     reads as light sweeping past. Needs far more alpha than the dark theme,
     since gold on cream is inherently low contrast. */
  --scan-tint:  rgba(245,197,24,.16);
}

/* Deeper gold for small text so it passes contrast on white */
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .hero__eyebrow,
:root[data-theme="light"] .about__role,
:root[data-theme="light"] .footer__col-title,
:root[data-theme="light"] .service__tag,
:root[data-theme="light"] .project__status--done,
:root[data-theme="light"] .project__period,
:root[data-theme="light"] .contact__note,
:root[data-theme="light"] .timeline__text strong{ color:#8A6200; }

/* Golden fade gradient for stat number spans */
:root[data-theme="light"] .stat__num span{
  background:linear-gradient(120deg,#C79200 0%,#D49A1F 45%,#E7B62E 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

:root[data-theme="light"] .field input:focus + label,
:root[data-theme="light"] .field textarea:focus + label,
:root[data-theme="light"] .btn--ghost:hover,
:root[data-theme="light"] a.contact__v:hover,
:root[data-theme="light"] .footer__nav a:hover,
:root[data-theme="light"] .footer__contact a:hover{ color:#8A6200; }

/* The scroll cue sits on cream at .68rem with wide tracking — --txt-dim leaves
   it barely legible, so it takes the body colour instead. */
:root[data-theme="light"] .hero__scroll{ color:#33333A; }

/* Make about section text darker and links golden in light theme */
:root[data-theme="light"] .about__text{ color:#17171B; }
:root[data-theme="light"] .about__text strong{ color:#C79200; }
:root[data-theme="light"] .about__role{ color:#5E5E66; }

/* Hardcoded surfaces that need light equivalents */
:root[data-theme="light"] .nav.is-scrolled{ background:rgba(246,245,241,.82); }

:root[data-theme="light"] .stats{ background:#EBE8DE; }
:root[data-theme="light"] .services{ background:#FDFCFA; }
:root[data-theme="light"] .contact{ background:#FDFCFA; }
:root[data-theme="light"] .contact__form{ background:#FFFFFF; }
/* projects and certificates both sat on the page colour, so the boundary
   between them vanished — white separates them without adding a third tone */
:root[data-theme="light"] .certificates{ background:#FFFFFF; }
/* The gold glows were dimmed to .32 here and all but vanished: gold sits close to
   cream in luminance, so it needs far more strength than on near-black to register
   at all. Raise both the layer opacity and the gradient alphas. */
:root[data-theme="light"] .hero__glow{ opacity:.68; }
:root[data-theme="light"] .hero__glow--1{
  background:radial-gradient(circle,rgba(245,197,24,.55),transparent 65%);
}
:root[data-theme="light"] .hero__glow--2{
  background:radial-gradient(circle,rgba(245,197,24,.28),transparent 65%);
}
:root[data-theme="light"] .hero__grid{
  background-image:
    linear-gradient(rgba(24,24,27,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,24,27,.05) 1px,transparent 1px);
}
:root[data-theme="light"] .service{
  border-color:rgba(199,146,0,.45);
}
:root[data-theme="light"] .service:hover{
  box-shadow:0 30px 50px -30px rgba(24,24,27,.16);
  border-color:rgba(199,146,0,.25);
}
:root[data-theme="light"] .project:hover{ box-shadow:0 40px 60px -34px rgba(24,24,27,.18); }
:root[data-theme="light"] .project__tags li{ background:rgba(24,24,27,.04); }
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea{ background:rgba(24,24,27,.02); }
:root[data-theme="light"] .field input:focus,
:root[data-theme="light"] .field textarea:focus{ background:rgba(199,146,0,.06); }
:root[data-theme="light"] .project__status--active{
  color:#1A7F37; background:rgba(26,127,55,.10); border-color:rgba(26,127,55,.30);
}

/* Gold-filled controls: light text on a brighter golden tone with fade gradient (light theme) */
:root[data-theme="light"] .btn--gold,
:root[data-theme="light"] .about__badge,
:root[data-theme="light"] .services__team-badge,
:root[data-theme="light"] .to-top{
  color:#FFFFFF;
  background:linear-gradient(120deg,#C79200 0%,#D49A1F 45%,#E7B62E 90%);
}
/* Contact button: the fill sits on ::after, so tint that rather than the element. */
:root[data-theme="light"] .nav__link--cta,
:root[data-theme="light"] .nav__link--cta:hover{ color:#FFFFFF; border-color:#E7B62E; }
:root[data-theme="light"] .nav__link--cta::after{
  background:linear-gradient(120deg,#C79200 0%,#D49A1F 45%,#E7B62E 90%);
}
:root[data-theme="light"] .nav__link--cta.is-active{ color:#8A6400; }
:root[data-theme="light"] .nav__link--cta.is-active:hover{
  color:#8A6400; background:rgba(180,133,10,.10);
}
:root[data-theme="light"] .service:hover .service__icon{ color:#FFFFFF; background:linear-gradient(120deg,#C79200 0%,#D49A1F 45%,#E7B62E 90%); }

@media (max-width:860px){
  :root[data-theme="light"] .nav__links{ background:rgba(246,245,241,.98); }
  /* matches the opaque bar the mobile nav falls back to (see the
     backdrop-filter note in the 860px block) */
  :root[data-theme="light"] .nav.is-scrolled{ background:rgba(246,245,241,.97); }
}

/* Smooth cross-fade while switching theme (added briefly by JS) */
.theme-anim, .theme-anim *{
  transition: background-color .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease), fill .45s var(--ease),
              box-shadow .45s var(--ease) !important;
}