/* ============================================================
   HR PARTNERS — landing styles
   ============================================================ */

/* Fontshare: Clash Display (headings) + Satoshi (body) + Cabinet Grotesk (accent) */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=satoshi@400,500,700,900&f[]=cabinet-grotesk@700,800,900&display=swap');

:root{
  /* palette */
  --black:        #050505;
  --ink:          #0b0b0c;
  --graphite:     #1a1a1d;
  --graphite-2:   #232327;
  --steel:        #3a3a40;
  --smoke:        #6a6a72;
  --mist:         #9a9aa3;
  --paper:        #f4f4f2;
  --white:        #ffffff;
  --accent:       #fd7525;
  --accent-soft:  rgba(253,117,37,.14);

  /* type */
  --display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --sans:    'Satoshi', system-ui, -apple-system, sans-serif;
  --grotesk: 'Cabinet Grotesk', 'Clash Display', sans-serif;

  /* layout */
  --gutter: clamp(20px, 5vw, 90px);
  --maxw: 1320px;
  --radius: 18px;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family: var(--sans);
  background: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
}

/* page-wide top→bottom gradient base, per brand 000 -> 666 */
.bg-stage{
  position: fixed; inset:0; z-index:-2;
  background: linear-gradient(180deg, #000000 0%, #0c0c0e 38%, #1d1d20 72%, #3a3a3f 100%);
}
.bg-grain{
  position: fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

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

/* ---------- typography helpers ---------- */
.eyebrow{
  font-size: clamp(11px,1vw,13px);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--mist); font-weight:500;
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background: var(--accent); display:inline-block;
}
.display{
  font-family: var(--display);
  font-weight:600; line-height:.96; letter-spacing:-.02em;
  text-wrap: balance;
}
.section-title{
  font-family: var(--display); font-weight:600;
  font-size: clamp(34px, 5.5vw, 76px);
  line-height: .98; letter-spacing:-.02em; text-wrap: balance;
}
.lead{ color: var(--mist); font-size: clamp(16px,1.4vw,20px); max-width: 56ch; }
.accent{ color: var(--accent); }

/* ---------- buttons ---------- */
.btn{
  --pad: 17px 30px;
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding: var(--pad); border-radius: 100px;
  font-weight:700; font-size:15px; letter-spacing:.01em;
  transition: transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease);
  will-change: transform; overflow:hidden; isolation:isolate;
}
.btn .btn-label{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:12px; }
.btn-primary{ background: var(--accent); color:#140a02; }
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:1; background:#fff; border-radius:inherit;
  transform: translateY(102%); transition: transform .5s var(--ease);
}
.btn-primary:hover::after{ transform: translateY(0); }
.btn-primary:hover{ color:#140a02; }
.btn-ghost{ background: transparent; color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.btn-ghost::after{
  content:""; position:absolute; inset:0; z-index:1; background:#fff; border-radius:inherit;
  transform: scale(0); transform-origin:center; transition: transform .5s var(--ease);
}
.btn-ghost:hover{ color:#0b0b0c; }
.btn-ghost:hover::after{ transform: scale(1.02); }
.btn-arrow{ transition: transform .5s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(5px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--gutter);
  transition: padding .5s var(--ease), background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  padding: 13px var(--gutter);
  background: rgba(5,5,6,.62);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand{ display:flex; align-items:center; gap:14px; z-index:101; }
.brand-logo{ height:44px; width:auto; display:block; transition: height .5s var(--ease); }
.site-header.scrolled .brand-logo{ height:36px; }
.brand-tag{
  font-family:var(--sans); font-weight:500; font-size:9.5px; line-height:1.3;
  letter-spacing:.22em; text-transform:uppercase; color:var(--mist);
  padding-left:14px; border-left:1px solid rgba(255,255,255,.18);
}
.foot-brand .brand-logo{ height:52px; }
.nav{ display:flex; align-items:center; gap:38px; }
.nav-links{ display:flex; gap:30px; }
.nav-links a{
  font-size:14px; font-weight:500; color: rgba(255,255,255,.72);
  position:relative; padding:4px 0; transition: color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: var(--accent);
  transition: width .4s var(--ease);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ width:100%; }
.nav-links a.is-active{ color:#fff; }
.nav-links a.is-active::after{ width:100%; background: var(--accent); }
.nav .btn{ --pad: 12px 22px; font-size:14px; }

/* burger + mobile menu */
.burger{
  display:none; position:relative; z-index:101;
  width:46px; height:46px; border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{ display:block; width:20px; height:2px; border-radius:2px; background:#fff; transition: transform .4s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background: rgba(5,5,6,.97); backdrop-filter: blur(20px);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:6px; padding: 96px var(--gutter) 40px; overflow-y:auto;
  opacity:0; visibility:hidden; transform: translateY(-12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu-links{ display:flex; flex-direction:column; gap:4px; width:100%; }
.mobile-menu-links a{
  font-family:var(--display); font-weight:500; font-size: clamp(28px,7vw,44px);
  letter-spacing:-.02em; color:#fff; padding:8px 0; line-height:1.1;
  opacity:0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
@media (max-height: 600px){
  .mobile-menu{ justify-content:flex-start; }
  .mobile-menu-links a{ font-size:24px; padding:6px 0; }
  .mobile-menu-cta{ margin-top:22px; }
}
.mobile-menu.open .mobile-menu-links a{ opacity:1; transform:none; }
.mobile-menu.open .mobile-menu-links a:nth-child(1){ transition-delay:.06s; }
.mobile-menu.open .mobile-menu-links a:nth-child(2){ transition-delay:.10s; }
.mobile-menu.open .mobile-menu-links a:nth-child(3){ transition-delay:.14s; }
.mobile-menu.open .mobile-menu-links a:nth-child(4){ transition-delay:.18s; }
.mobile-menu.open .mobile-menu-links a:nth-child(5){ transition-delay:.22s; }
.mobile-menu.open .mobile-menu-links a:nth-child(6){ transition-delay:.26s; }
.mobile-menu-links a:active{ color: var(--accent); }
.mobile-menu-cta{ margin-top:34px; opacity:0; transform: translateY(16px); transition: opacity .5s var(--ease) .3s, transform .5s var(--ease) .3s; }
.mobile-menu.open .mobile-menu-cta{ opacity:1; transform:none; }
body.menu-open{ overflow:hidden; padding-right: var(--sbw, 0px); }
body.menu-open .site-header{ right: var(--sbw, 0px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top: 140px; padding-bottom: 60px;
  overflow:hidden;
}
.hero-glow{
  position:absolute; z-index:0; width:60vw; height:60vw; max-width:760px; max-height:760px;
  right:-10vw; top:8%;
  background: radial-gradient(circle, rgba(253,117,37,.18), transparent 62%);
  filter: blur(20px); pointer-events:none;
}
.hero-watermark{
  position:absolute; right: -6vw; bottom: -14vh; z-index:0; width: 62vw; max-width:920px;
  opacity:.05; pointer-events:none; filter: grayscale(1);
}
/* full-bleed hero video */
/* full-bleed hero video */
.hero-video{
  position:absolute; inset:0; z-index:0; overflow:hidden; background:#000;
}
.hero-video-el{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 1.1s var(--ease);
}
.hero-video.has-video .hero-video-el{ opacity:1; }
.hero-video-poster{
  position:absolute; top:50%; right:-6%; transform: translateY(-50%);
  width:min(620px,52vw); height:auto; object-fit:contain;
  opacity:.12; filter: grayscale(1); transition: opacity .8s var(--ease);
  pointer-events:none;
}
.hero-video.has-video .hero-video-poster{ opacity:0; }
.hero-video-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,5,6,.90) 0%, rgba(5,5,6,.62) 26%, rgba(5,5,6,.12) 54%, rgba(5,5,6,0) 76%),
    linear-gradient(180deg, rgba(5,5,6,.45) 0%, transparent 18%, transparent 74%, rgba(5,5,6,.55) 100%);
}
.hero-video-drop{
  position:absolute; right:22px; bottom:104px; z-index:5;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:100px;
  background:rgba(8,8,10,.5); backdrop-filter:blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  color:rgba(255,255,255,.7); font-size:12px; font-weight:500; letter-spacing:.02em;
  cursor:pointer; transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.hero-video-drop:hover{ color:#fff; background:rgba(8,8,10,.7); box-shadow: inset 0 0 0 1px var(--accent); }
.hero-video-drop svg{ opacity:.8; }
.hero-video.has-video .hero-video-drop{ opacity:.4; }
.hero-video.has-video .hero-video-drop:hover{ opacity:1; }
.hero.drag .hero-video-scrim{ background: rgba(253,117,37,.12); }
.hero.drag{ box-shadow: inset 0 0 0 2px var(--accent); }

.hero-inner{
  position:relative; z-index:3;
  display:flex; align-items:center;
}
.hero-text{ max-width: 680px; transform: translateY(-9%); }
@media (min-width: 981px){
  .hero-text{ margin-left: clamp(-120px, -6vw, -40px); }
}
.hero h1{
  font-size: clamp(42px, 6.2vw, 102px);
  margin-bottom: 30px;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; will-change: transform; }
.hero h1 .accent-word{
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: 1.04em;
  color: var(--accent);
  letter-spacing: -.02em;
  padding-right: .04em;
}

.hero .lead{ max-width: 42ch; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 34px; }

@media (max-width: 980px){
  .hero-video-poster{ right:-12%; width:min(440px,64vw); opacity:.10; }
  .hero-video-scrim{
    background:
      linear-gradient(180deg, rgba(5,5,6,.5) 0%, rgba(5,5,6,.25) 28%, rgba(5,5,6,.45) 68%, rgba(5,5,6,.82) 100%);
  }
  .hero-video-drop{ bottom:90px; }
}

.hero-marquee{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding: 16px 0; overflow:hidden; background: rgba(0,0,0,.2);
  backdrop-filter: blur(3px);
}
.marquee-track{ display:flex; gap:48px; width:max-content; animation: marquee 38s linear infinite; }
.marquee-track span{
  font-family:var(--display); font-weight:500; font-size:clamp(15px,1.5vw,20px);
  color: rgba(255,255,255,.55); display:inline-flex; align-items:center; gap:48px; white-space:nowrap;
}
.marquee-track span::after{ content:"●"; color: var(--accent); font-size:8px; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

.scroll-hint{
  position:absolute; left:var(--gutter); bottom: 90px; z-index:3;
  display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--mist);
}
.scroll-hint .dot{ width:22px; height:34px; border:1px solid rgba(255,255,255,.3); border-radius:14px; position:relative; }
.scroll-hint .dot::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:3px; background:var(--accent); transform:translateX(-50%); animation: scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{opacity:0; transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0; transform:translate(-50%,12px)} }

/* ============================================================
   SECTIONS shell
   ============================================================ */
section{ position:relative; z-index:1; }
.section{ padding: clamp(80px, 12vh, 170px) 0; }
.section-head{ display:flex; flex-direction:column; gap:22px; margin-bottom: clamp(48px,7vh,90px); max-width: 70ch; }
.section-head.between{ flex-direction:row; align-items:flex-end; justify-content:space-between; max-width:none; gap:40px; flex-wrap:wrap; }
.section-num{ font-family:var(--display); font-size:13px; color:var(--accent); letter-spacing:.1em; }

/* ---------- reveal primitives ---------- */
[data-reveal]{ opacity:0; transform: translateY(38px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
[data-reveal-delay="5"]{ transition-delay:.40s; }

.mask-up{ overflow:hidden; }
.mask-up > *{ display:block; transform: translateY(110%); transition: transform 1.05s var(--ease); }
.mask-up.in > *{ transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  [data-reveal], .mask-up > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   STATS
   ============================================================ */
.stats{ border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.stats .wrap{ padding-block: clamp(20px,3vw,40px); }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); }
.stat{ padding: clamp(34px,4vh,56px) clamp(26px,2.4vw,44px); position:relative; }
.stat:first-child{ padding-left:0; }
.stat:last-child{ padding-right:0; }
.stat:not(:last-child){ border-right:1px solid rgba(255,255,255,.08); }
.stat-num{ font-family:var(--display); font-weight:600; font-size: clamp(44px,3.6vw,72px); line-height:1; letter-spacing:-.03em; white-space:nowrap; }
.stat-num .suf{ color: var(--accent); }
.stat-label{ color:var(--mist); font-size:15px; line-height:1.45; margin-top:18px; max-width:26ch; text-wrap:pretty; }

/* ============================================================
   INTRO / about with big copy
   ============================================================ */
.bigcopy{ font-family:var(--display); font-weight:500; font-size: clamp(30px,4.2vw,60px); line-height:1.1; letter-spacing:-.02em; max-width: 18ch; text-wrap:balance; }
.bigcopy .dim{ color: #83838d; }
.bigcopy em{ font-style:normal; color:var(--accent); }
.about-grid{ display:grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px,6vw,110px); align-items:start; }
.about-side{ max-width: 46ch; padding-top: 10px; }
.about-side p{ color: rgba(255,255,255,.72); font-size: clamp(16px,1.15vw,18px); line-height:1.6; margin-bottom:22px; }
.about-side .btn{ margin-top:12px; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-list{ border-top:1px solid rgba(255,255,255,.1); }
.svc{
  display:grid; grid-template-columns: 76px 1fr auto; align-items:center; gap: clamp(20px,4vw,60px);
  padding: clamp(26px,3.4vw,42px) 0; border-bottom:1px solid rgba(255,255,255,.1);
  position:relative; transition: padding-left .5s var(--ease);
}
.svc::before{
  content:""; position:absolute; inset:0; left:-2vw; right:-2vw; z-index:-1; border-radius:14px;
  background: linear-gradient(90deg, rgba(253,117,37,.10), rgba(253,117,37,0));
  opacity:0; transition: opacity .5s var(--ease);
}
.svc:hover{ padding-left: 22px; }
.svc:hover::before{ opacity:1; }
.svc-idx{ font-family:var(--display); color: var(--smoke); font-size:15px; transition: color .4s var(--ease); }
.svc:hover .svc-idx{ color: var(--accent); }
.svc-name{ font-family:var(--display); font-weight:500; font-size: clamp(22px,2.6vw,38px); letter-spacing:-.01em; }
.svc-desc{ color:var(--mist); font-size:15px; max-width: 42ch; justify-self:start; }
.svc-arrow{ width:48px; height:48px; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); display:grid; place-items:center; transition: background .4s var(--ease), transform .5s var(--ease), color .4s; }
.svc:hover .svc-arrow{ background: var(--accent); color:#140a02; transform: rotate(-45deg); }
@media (max-width:880px){
  .svc{ grid-template-columns: 40px 1fr; }
  .svc-desc{ grid-column: 2 / -1; }
  .svc-arrow{ display:none; }
}

/* ============================================================
   PROCESS
   ============================================================ */
.process{ background: var(--ink); border-radius: clamp(20px,3vw,40px); }
.proc-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.08); border-radius: 20px; overflow:hidden; }
.proc{ position:relative; overflow:hidden; background: var(--ink); padding: clamp(28px,3vw,44px); min-height: 320px; display:flex; flex-direction:column; transition: background .5s var(--ease); }
.proc:hover{ background: var(--graphite); }
.proc-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.09; filter: grayscale(.5) brightness(.7); z-index:0; pointer-events:none; transition: opacity .5s var(--ease); }
.proc:hover .proc-bg{ opacity:.15; }
.proc > *:not(.proc-bg){ position:relative; z-index:1; }
.proc-step{ font-family:var(--display); font-size: clamp(40px,4vw,64px); font-weight:600; color: var(--steel); line-height:1; letter-spacing:-.03em; transition: color .5s var(--ease); }
.proc:hover .proc-step{ color: var(--accent); }
.proc-name{ font-family:var(--display); font-weight:500; font-size: 22px; margin-top:auto; }
.proc-text{ color:var(--mist); font-size:14.5px; margin-top:14px; }
@media (max-width:980px){ .proc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .proc-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   CASES
   ============================================================ */
.cases-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(20px,2.4vw,34px); }
.case{ position:relative; border-radius: var(--radius); clip-path: inset(0 round var(--radius)); background: var(--black); will-change: transform; }
.case.tall{ grid-row: span 1; }
.case-media{ position:relative; background: var(--black); -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.case image-slot{ width:100%; height: clamp(280px,32vw,440px); transition: transform 1.1s var(--ease); display:block; }
.case:hover image-slot{ transform: scale(1.05); }
.case-shade{ position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.86)); pointer-events:none; z-index:2; }
.case-body{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding: clamp(22px,2.4vw,36px); pointer-events:none; }
.case-tags{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.case-tag{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#fff; padding:6px 12px; border-radius:100px; background: rgba(255,255,255,.13); backdrop-filter: blur(6px); }
.case-tag.hl{ background: var(--accent); color:#140a02; font-weight:700; }
.case-title{ font-family:var(--display); font-weight:600; font-size: clamp(24px,2.6vw,40px); line-height:1.02; letter-spacing:-.01em; }
.case-meta{ display:flex; gap:26px; margin-top:16px; }
.case-meta div span{ display:block; }
.case-meta .k{ color: var(--mist); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px; }
.case-meta .v{ font-family:var(--display); font-size:19px; font-weight:500; }
.case-corner{ position:absolute; top:18px; right:18px; z-index:4; width:46px; height:46px; border-radius:50%; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); display:grid; place-items:center; transition: background .4s var(--ease), transform .5s var(--ease), color .4s; }
.case:hover .case-corner{ background:#fff; color:#0b0b0c; transform: rotate(-45deg); }
@media (max-width:820px){ .cases-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.8vw,26px); }
.member{ position:relative; }
.member image-slot{ width:100%; height: clamp(260px,24vw,340px); display:block; filter: grayscale(1) contrast(1.02); transition: filter .6s var(--ease), transform .6s var(--ease); }
.member:hover image-slot{ filter: grayscale(0); }
.member-info{ display:flex; align-items:baseline; justify-content:space-between; margin-top:16px; gap:10px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12); transition: border-color .4s; }
.member:hover .member-info{ border-color: var(--accent); }
.member-name{ font-family:var(--display); font-weight:500; font-size:19px; }
.member-role{ color:var(--mist); font-size:13px; text-align:right; }
@media (max-width:900px){ .team-grid{ grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,28px); }
.quote{ background: var(--graphite); border:1px solid rgba(255,255,255,.07); border-radius: var(--radius); padding: clamp(28px,2.6vw,40px); display:flex; flex-direction:column; transition: transform .6s var(--ease), border-color .5s; }
.quote:hover{ transform: translateY(-8px); border-color: rgba(253,117,37,.4); }
.quote .mark{ font-family:var(--display); font-size:60px; line-height:.6; color: var(--accent); height:34px; }
.quote-text{ font-size: 17px; color:#e9e9ec; margin: 22px 0 30px; flex:1; }
.quote-by{ display:flex; align-items:center; gap:14px; }
.quote-ava{ width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.quote-ava image-slot{ width:100%; height:100%; display:block; }
.quote-name{ font-family:var(--display); font-weight:500; font-size:15px; }
.quote-co{ color:var(--mist); font-size:13px; }
@media (max-width:900px){ .quotes{ grid-template-columns: 1fr; } }

/* ============================================================
   CERTIFICATES
   ============================================================ */
.certs{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,1.8vw,24px); }
.cert{ aspect-ratio: 3/4; border-radius: 12px; overflow:hidden; background: var(--graphite); border:1px solid rgba(255,255,255,.08); transition: transform .5s var(--ease), border-color .4s; }
.cert image-slot{ width:100%; height:100%; display:block; }
.cert:hover{ transform: translateY(-6px) scale(1.01); border-color: rgba(253,117,37,.4); }
@media (max-width:820px){ .certs{ grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   CONTACT / CTA
   ============================================================ */
.cta-band{ position:relative; overflow:hidden; border-radius: clamp(20px,3vw,40px); background: var(--accent); color:#140a02; padding: clamp(48px,7vw,96px); }
.cta-band .cta-huge{ font-family:var(--display); font-weight:600; font-size: clamp(40px,7vw,108px); line-height:.95; letter-spacing:-.03em; max-width: 16ch; }
.cta-band .lead{ color: rgba(20,10,2,.7); margin-top:24px; max-width:46ch; }
.cta-watermark{ position:absolute; right:-3%; top:50%; transform: translateY(-50%); height: calc(160% + 280px); width:auto; opacity:.10; pointer-events:none; }
@media (max-width:720px){
  .cta-watermark{ height:auto; width:74%; right:-8%; }
}

.contact{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,80px); }
.contact-info h3{ font-family:var(--display); font-weight:500; font-size:clamp(26px,3vw,42px); letter-spacing:-.01em; margin-bottom:30px; }
.contact-rows{ display:flex; flex-direction:column; gap:2px; }
.crow{ display:flex; flex-direction:column; gap:5px; padding:20px 0; border-top:1px solid rgba(255,255,255,.1); }
.crow .k{ color:var(--mist); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; }
.crow .v{ font-family:var(--display); font-weight:500; font-size: clamp(20px,2vw,28px); }
.crow .v:hover{ color: var(--accent); }

.form{ background: var(--graphite); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: clamp(28px,3vw,44px); }
.field{ position:relative; margin-bottom:6px; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.16);
  padding: 22px 0 12px; color:#fff; font-family:var(--sans); font-size:16px; outline:none;
  transition: border-color .4s var(--ease);
}
.field textarea{ resize:none; min-height:90px; }
.field label{ position:absolute; left:0; top:22px; color:var(--smoke); font-size:16px; pointer-events:none; transition: all .35s var(--ease); }
.field input:focus, .field textarea:focus{ border-color: var(--accent); }
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label{
  top:2px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--accent);
}
.form .btn{ width:100%; justify-content:center; margin-top:26px; }
.form-note{ color:var(--smoke); font-size:12.5px; margin-top:16px; text-align:center; }
@media (max-width:820px){ .contact{ grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ padding: clamp(54px,7vh,90px) 0 40px; border-top:1px solid rgba(255,255,255,.08); margin-top: clamp(60px,9vh,120px); }
.foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom: 60px; }
.foot-brand{ max-width: 30ch; }
.foot-brand .brand{ margin-bottom:20px; }
.foot-brand p{ color:var(--mist); font-size:14px; }
.foot-cols{ display:flex; gap: clamp(40px,6vw,90px); flex-wrap:wrap; }
.foot-col h5{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); margin-bottom:18px; }
.foot-col a{ display:block; color:rgba(255,255,255,.72); font-size:15px; padding:6px 0; transition:color .3s; }
.foot-col a:hover{ color: var(--accent); }
.foot-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); color:var(--smoke); font-size:13px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* large desktops — let content breathe a touch wider */
@media (min-width: 1700px){
  :root{ --maxw: 1480px; }
}

/* tablet landscape & down — collapse nav into burger menu */
@media (max-width: 1024px){
  .nav-links{ display:none; }
  .nav .btn{ display:none; }
  .brand-tag{ display:none; }
  .burger{ display:flex; }
  .quotes{ grid-template-columns: repeat(2,1fr); }
}

/* tablet portrait */
@media (max-width: 940px){
  .stats-grid{ grid-template-columns: repeat(2,1fr); }
  .stat{ padding: clamp(28px,5vw,44px) clamp(18px,3vw,30px); }
  .stat:nth-child(odd){ padding-left:0; }
  .stat:nth-child(even){ padding-right:0; border-right:none; }
  .stat:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.08); }
  .about-grid{ grid-template-columns:1fr; align-items:start; }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .certs{ grid-template-columns: repeat(2,1fr); }
  .hero-text{ transform:none; }
  .hero h1{ font-size: clamp(40px, 8.6vw, 84px); }
}

/* small tablet / large phone */
@media (max-width: 720px){
  .quotes{ grid-template-columns: 1fr; }
  .foot-top{ flex-direction:column; gap:44px; }
  .scroll-hint{ display:none; }
  .hero{ padding-top: 116px; padding-bottom: 90px; }
  .hero .lead{ font-size:16px; }
}

/* phones */
@media (max-width: 560px){
  .hero h1{ font-size: clamp(36px, 11vw, 56px); }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }
  .stats-grid{ grid-template-columns: 1fr; }
  .stat{ padding: 26px 0 !important; border-right:none !important; }
  .stat:not(:last-child){ border-bottom:1px solid rgba(255,255,255,.08); }
  .stat-num{ font-size: clamp(46px,16vw,64px); }
  .team-grid{ grid-template-columns: repeat(2,1fr); gap:14px; }
  .marquee-track span{ font-size:14px; gap:30px; }
  .marquee-track{ gap:30px; }
  .cta-band .cta-huge{ font-size: clamp(34px,11vw,52px); }
  .foot-bottom{ flex-direction:column; gap:8px; }
}

/* very small phones */
@media (max-width: 380px){
  .hero h1{ font-size: 34px; }
  .brand-logo{ height:38px; }
  .site-header.scrolled .brand-logo{ height:32px; }
}

/* ============================================================
   CASE MODAL (shape-morph)
   ============================================================ */
body.modal-open{ overflow:hidden; padding-right: var(--sbw, 0px); }
body.modal-open .site-header{ right: var(--sbw, 0px); }
.case-modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding: clamp(16px,4vw,52px); }
.case-modal.open{ display:flex; }
.case-modal-backdrop{ position:absolute; inset:0; background: rgba(5,5,5,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity:0; transition: opacity .45s var(--ease); }
.case-modal.show .case-modal-backdrop{ opacity:1; }
.case-modal-card{ position:relative; z-index:1; width:min(720px,100%); max-height:88vh; overflow-y:auto; background: var(--graphite); border-radius: clamp(20px,2.4vw,30px); }
.case-modal.show .case-modal-card{ box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.case-modal-card::-webkit-scrollbar{ width:0; height:0; }
.case-modal-media{ position:relative; height: clamp(200px,28vw,300px); overflow:hidden; }
.case-modal-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.case-modal-cover{ position:absolute; inset:0; z-index:3; opacity:1; pointer-events:none; transition: opacity .42s var(--ease); }
.case-modal.revealed .case-modal-cover{ opacity:0; }
.case-modal-cover .case-shade{ z-index:1; }
.case-modal-cover .case-body{ z-index:2; pointer-events:none; }
.case-modal-inner{ position:relative; padding: clamp(26px,3vw,44px); opacity:0; transform: translateY(10px); transition: opacity .34s var(--ease), transform .34s var(--ease); }
.case-modal.revealed .case-modal-inner{ opacity:1; transform:none; transition-delay:.14s; }
.case-modal-inner .case-modal-tags{ position:relative; z-index:2; margin-top:0; margin-bottom:20px; }
.case-modal-title{ font-family:var(--display); font-weight:600; font-size: clamp(28px,3.4vw,46px); line-height:1.03; letter-spacing:-.02em; margin-bottom:22px; text-wrap:balance; }
.case-modal-lead{ color:#e9e9ec; font-size: clamp(16px,1.5vw,19px); line-height:1.5; margin: 0 0 26px; max-width:54ch; text-wrap:pretty; }
.case-sec{ padding: 22px 0; border-top:1px solid rgba(255,255,255,.1); }
.case-sec:first-of-type{ border-top:0; padding-top:0; }
.case-sec-h{ font-family:var(--display); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color: var(--accent); margin-bottom:10px; }
.case-sec p{ color: var(--mist); font-size: clamp(15px,1.4vw,17px); line-height:1.6; max-width:58ch; text-wrap:pretty; }
.case-sec ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.case-sec li{ color: var(--mist); font-size: clamp(15px,1.4vw,17px); line-height:1.5; padding-left:22px; position:relative; }
.case-sec li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background: var(--accent); }
.case-modal-cta{ margin-top:30px; }
.case-modal-close{ position:absolute; top:16px; right:16px; z-index:5; width:44px; height:44px; border:0; border-radius:50%; background: rgba(5,5,5,.5); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s var(--ease), transform .3s var(--ease), color .3s; }
.case-modal-close:hover{ background:#fff; color:#0b0b0c; transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce){
  .case-modal-card, .case-modal-inner, .case-modal-backdrop{ transition:none; }
}

/* ============================================================
   TEAM — temporarily hidden (re-enable when photos are ready:
   remove this block)
   ============================================================ */
#team{ display:none; }
.nav-links a[href="#team"], .mobile-menu-links a[href="#team"]{ display:none; }