/* ==========================================================================
   Creatives Electromechanical — Design System
   Font: Montserrat (headings, body, and labels — unified across the site)
   Theme: White-first with Red + Black brand accents
   ========================================================================== */

:root{
  --black:#0D0D0D;       /* true brand black — footer, page-header, cta-band, hero */
  --bg-0:#FFFFFF;        /* page base background */
  --bg-1:#FFFFFF;        /* card / panel background */
  --bg-2:#FAF8F8;        /* card hover / alt panel */
  --bg-3:#F2ECEC;        /* elevated panel */
  --line:rgba(13,13,13,0.10);
  --line-strong:rgba(13,13,13,0.20);
  --text-0:#0D0D0D;      /* headline text (default, on light) */
  --text-1:#3D3232;      /* body text (default, on light) */
  --text-2:#7C6E6E;      /* muted text (default, on light) */
  --ink-0:#0D0D0D;       /* headline text on light */
  --ink-1:#3D3232;       /* body text on light */
  --ink-2:#7C6E6E;       /* muted text on light */
  --paper:#FFFFFF;       /* light section background */
  --paper-1:#F7F5F5;
  --amber:#E31E27;       /* brand red — logo accent */
  --amber-2:#FF4B4F;
  --cyan:#8C1116;        /* deep red — secondary accent */
  --cyan-2:#B3151C;
  --amber-rgb:227,30,39;
  --cyan-rgb:140,17,22;
  --radius:2px;
  --container:1240px;
  --ease:cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:'Montserrat',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink-1);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.disp{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.05;
  margin:0;
  color:inherit;
}

.mono{
  font-family:'Montserrat',sans-serif;
  font-weight:600;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:16px;
}
.eyebrow::before{
  content:'';
  width:30px;height:3px;
  border-radius:1.5px;
  background:var(--amber);
  display:inline-block;
  flex-shrink:0;
}
.eyebrow.on-dark{color:var(--amber-2);}

/* ==========================================================================
   BLUEPRINT GRID BACKGROUND
   ========================================================================== */
.blueprint{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:44px 44px;
  pointer-events:none;
}
.blueprint.dense{background-size:22px 22px;}

/* ==========================================================================
   CIRCUIT TRACE SIGNATURE ELEMENT
   ========================================================================== */
.circuit-divider{
  position:relative;
  width:100%;
  height:64px;
  overflow:hidden;
  display:block;
}
.circuit-divider svg{width:100%;height:100%;display:block;}
.circuit-divider path{
  fill:none;
  stroke:var(--line-strong);
  stroke-width:1.5;
}
.circuit-divider .pulse{
  stroke:var(--amber);
  stroke-width:2;
  stroke-dasharray:6 340;
  stroke-dashoffset:0;
  filter:drop-shadow(0 0 4px rgba(var(--amber-rgb),.9));
  animation:trace 5s linear infinite;
}
.circuit-divider .node{fill:var(--bg-0);stroke:var(--line-strong);stroke-width:1.5;}
@keyframes trace{
  0%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-700;}
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  background:#FFFFFF;
  border-bottom:1px solid rgba(13,13,13,.08);
  box-shadow:0 1px 0 rgba(13,13,13,.02);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.brand{display:flex;align-items:center;color:var(--text-0);}
.brand-logo{height:52px;width:auto;object-fit:contain;flex-shrink:0;}
@media(max-width:640px){.brand-logo{height:42px;}}

.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav > ul{display:flex;align-items:center;gap:2px;}
.main-nav > ul > li{position:relative;}
.main-nav > ul > li > a, .nav-drop-btn{
  display:flex;align-items:center;gap:6px;
  padding:14px 18px;
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#000000;
  transition:color .25s var(--ease);
  background:none;border:none;
}
.main-nav > ul > li > a:hover, .main-nav > ul > li.open > .nav-drop-btn, .main-nav > ul > li > a.active{color:var(--amber-2);}
.nav-drop-btn svg{width:10px;height:10px;transition:transform .25s var(--ease);}
.main-nav > ul > li.open .nav-drop-btn svg{transform:rotate(180deg);}

.dropdown{
  position:absolute;
  top:100%;left:50%;
  transform:translate(-50%,8px);
  min-width:240px;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  box-shadow:0 24px 48px -12px rgba(0,0,0,.55);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.main-nav > ul > li.open .dropdown{opacity:1;visibility:visible;transform:translate(-50%,0);}
.dropdown li a{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  font-size:13.5px;
  color:var(--text-1);
  border-left:2px solid transparent;
  transition:all .2s var(--ease);
}
.dropdown li a:hover{background:rgba(var(--amber-rgb),.08);color:var(--text-0);border-left-color:var(--amber);padding-left:18px;}
.dropdown li a .n{font-family:'Montserrat',sans-serif;font-size:10px;color:var(--amber);}

.nav-cta{
  margin-left:12px;
  padding:12px 22px;
  background:var(--amber);
  color:var(--bg-0);
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  border-radius:1px;
  transition:background .25s var(--ease), transform .2s var(--ease);
  white-space:nowrap;
}
.nav-cta:hover{background:var(--black);color:#FFFFFF;transform:translateY(-1px);}

.nav-toggle{
  display:none;
  width:42px;height:42px;
  border:1px solid var(--line-strong);
  background:none;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--text-0);transition:all .3s var(--ease);}
.nav-toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media (max-width:1080px){
  .main-nav{
    position:fixed;top:84px;left:0;right:0;bottom:0;
    background:var(--bg-0);
    flex-direction:column;
    align-items:stretch;
    padding:12px 20px 40px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .35s var(--ease);
  }
  .main-nav.active{transform:translateX(0);}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;}
  .main-nav > ul > li{border-bottom:1px solid var(--line);}
  .main-nav > ul > li > a, .nav-drop-btn{width:100%;padding:18px 4px;justify-content:space-between;}
  .dropdown{position:static;left:auto;transform:none;opacity:1;visibility:visible;display:none;box-shadow:none;border:none;background:rgba(255,255,255,.02);width:100%;min-width:0;}
  .main-nav > ul > li.open .dropdown{display:block;transform:none;left:auto;}
  .dropdown li a{padding:14px 16px;font-size:13.5px;}
  .nav-drop-btn{cursor:pointer;}
  .nav-cta{margin:18px 4px 0;text-align:center;}
  .nav-toggle{display:flex;}
}

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  background:var(--black);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.1s var(--ease);
  pointer-events:none;
  display:flex;
  align-items:flex-end;
}
.hero-slide.active{opacity:1;pointer-events:auto;}
.hero-slide .art{position:absolute;inset:0;}
.hero-slide .scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(7,7,7,.55) 0%, rgba(7,7,7,.35) 40%, rgba(7,7,7,.92) 100%),
    radial-gradient(ellipse at 25% 30%, rgba(var(--amber-rgb),.10), transparent 55%);
}
.hero-content{
  position:relative;z-index:3;
  width:100%;
  padding-bottom:118px;
}
.hero-slide-inner{display:none;}
.hero-slide.active .hero-slide-inner{display:block;animation:heroUp .9s var(--ease) both;}
@keyframes heroUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
.hero-eyebrow{
  font-family:'Montserrat',sans-serif;
  font-size:13.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-2);
  display:flex;align-items:center;gap:12px;
  margin-bottom:22px;
}
.hero-eyebrow::before{content:'';width:38px;height:3px;border-radius:1.5px;background:var(--amber-2);flex-shrink:0;}
.hero-title{
  font-size:clamp(38px,6.4vw,84px);
  color:#FFFFFF;
  max-width:15ch;
  margin-bottom:22px;
}
.hero-title em{font-style:normal;color:var(--amber-2);}
.hero-sub{
  font-size:17px;
  color:rgba(255,255,255,.82);
  max-width:46ch;
  line-height:1.65;
  margin-bottom:36px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;
  font-family:'Montserrat',sans-serif;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border-radius:1px;
  transition:all .28s var(--ease);
  border:1px solid transparent;
}
.btn-primary{background:var(--amber);color:#FFFFFF;}
.btn-primary:hover{background:var(--black);color:#FFFFFF;transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(0,0,0,.35);}
.btn-ghost{border-color:rgba(13,13,13,.3);color:var(--text-0);}
.btn-ghost:hover{border-color:var(--text-0);background:rgba(13,13,13,.05);}
.hero .btn-ghost, .cta-band .btn-ghost{border-color:rgba(255,255,255,.4);color:#FFFFFF;}
.hero .btn-ghost:hover, .cta-band .btn-ghost:hover{border-color:#FFFFFF;background:rgba(255,255,255,.12);}
.btn-dark{background:var(--black);color:#FFFFFF;}
.btn-dark:hover{background:var(--amber);transform:translateY(-2px);}
.btn svg{width:15px;height:15px;transition:transform .28s var(--ease);}
.btn:hover svg{transform:translateX(3px);}

.hero-dots{
  position:absolute;
  right:28px;bottom:0;
  z-index:4;
  display:flex;flex-direction:column;
  gap:14px;
  padding-bottom:44px;
}
@media(max-width:900px){.hero-dots{display:none;}}
.hero-dot{
  width:34px;height:2px;
  background:rgba(255,255,255,.3);
  border:none;padding:0;
  position:relative;
  cursor:pointer;
}
.hero-dot::after{content:'';position:absolute;left:0;top:0;height:100%;width:0;background:var(--amber-2);transition:width .25s linear;}
.hero-dot.active{background:rgba(255,255,255,.55);}
.hero-dot.active::after{width:100%;transition:width 6s linear;}

.hero-scroll{
  position:absolute;left:28px;bottom:40px;z-index:4;
  display:flex;align-items:center;gap:12px;
  font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
@media(max-width:700px){.hero-scroll{display:none;}}
.hero-scroll .line{width:1px;height:34px;background:linear-gradient(var(--amber-2),transparent);animation:scrollLine 1.8s ease-in-out infinite;}
@keyframes scrollLine{0%,100%{opacity:.3;}50%{opacity:1;}}

.hero-counter{
  position:absolute;top:130px;left:28px;z-index:4;
  font-family:'Montserrat',sans-serif;font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.1em;
}
@media(max-width:700px){.hero-counter{display:none;}}
.hero-counter b{color:var(--amber-2);}

/* svg art blueprint decoration for hero slides */
.hero-svg{width:100%;height:100%;}

/* ==========================================================================
   STATS STRIP
   ========================================================================== */
.stats-strip{
  position:relative;
  background:var(--bg-1);
  border-top:1px solid var(--line);
  padding:0;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat-item{
  padding:32px 28px;
  border-left:1px solid var(--line);
  text-align:left;
}
.stat-item:first-child{border-left:none;}
.stat-num{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(30px,3.4vw,46px);
  color:var(--text-0);
  display:flex;align-items:baseline;gap:2px;
}
.stat-num .suffix{color:var(--amber);}
.stat-label{
  font-family:'Montserrat',sans-serif;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);
  margin-top:8px;
}
@media(max-width:860px){.stats-grid{grid-template-columns:repeat(2,1fr);}.stat-item:nth-child(3){border-left:none;}}
@media(max-width:520px){.stats-grid{grid-template-columns:1fr;}.stat-item{border-left:none !important;border-top:1px solid var(--line);}.stat-item:first-child{border-top:none;}}

/* ==========================================================================
   SECTION LAYOUT
   ========================================================================== */
.section{padding:84px 0;position:relative;}
.section.tight{padding:60px 0;}
.section-dark{background:var(--bg-1);color:var(--text-1);}
.section-darker{background:var(--bg-0);color:var(--text-1);}
.section-paper{background:var(--paper);color:var(--ink-1);}
.section-panel{background:var(--paper-1);color:var(--ink-1);}
.section-dark h1,.section-dark h2,.section-dark h3,.section-darker h1,.section-darker h2,.section-darker h3{color:var(--text-0);}
.section-paper h1,.section-paper h2,.section-paper h3,.section-panel h1,.section-panel h2,.section-panel h3{color:var(--ink-0);}

.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  margin-bottom:40px;
  flex-wrap:wrap;
}
.section-head .desc{max-width:440px;color:inherit;opacity:.8;line-height:1.65;font-size:15px;}
.h-xl{font-size:clamp(30px,4vw,52px);}

.title-anim-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.title-anim-row h2{margin:0;}
.mini-gear{display:inline-flex;color:var(--amber);opacity:.55;flex-shrink:0;}
.mini-gear svg{width:22px;height:22px;animation:cem-gear-spin 7s linear infinite;}
@keyframes cem-gear-spin{to{transform:rotate(360deg);}}
.mini-progress{
  display:inline-block;width:64px;height:4px;
  background:rgba(var(--amber-rgb),.15);
  border-radius:2px;overflow:hidden;flex-shrink:0;position:relative;
}
.mini-progress .bar{
  position:absolute;top:0;left:0;height:100%;width:36%;
  background:var(--amber);border-radius:2px;
  animation:cem-progress-slide 2.4s ease-in-out infinite;
}
@keyframes cem-progress-slide{
  0%{left:-36%;}
  50%{left:64%;}
  100%{left:-36%;}
}
@media(max-width:560px){
  .mini-gear svg{width:18px;height:18px;}
  .mini-progress{width:48px;}
}
.h-l{font-size:clamp(26px,3.2vw,38px);}
.h-m{font-size:22px;}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.stagger .reveal:nth-child(1){transition-delay:0s;}
.stagger .reveal:nth-child(2){transition-delay:.08s;}
.stagger .reveal:nth-child(3){transition-delay:.16s;}
.stagger .reveal:nth-child(4){transition-delay:.24s;}
.stagger .reveal:nth-child(5){transition-delay:.32s;}
.stagger .reveal:nth-child(6){transition-delay:.4s;}
.stagger .reveal:nth-child(7){transition-delay:.44s;}
.stagger .reveal:nth-child(8){transition-delay:.48s;}
.stagger .reveal:nth-child(9){transition-delay:.52s;}
.stagger .reveal:nth-child(10){transition-delay:.56s;}
.stagger .reveal:nth-child(11){transition-delay:.6s;}
.stagger .reveal:nth-child(12){transition-delay:.64s;}
.stagger .reveal:nth-child(n+13){transition-delay:.68s;}

/* ---------------- client logo gallery ---------------- */
.client-logo-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
}
.client-logo-cell{
  background:#FFFFFF;
  border:3px solid #E74C3C;
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  height:104px;
  padding:18px 22px;
  transition:transform .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out;
  transform-style:preserve-3d;
  perspective:600px;
  will-change:transform;
}
.client-logo-cell:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 0 0 3px rgba(231,76,60,.18), 0 0 30px 4px rgba(231,76,60,.45), 0 22px 34px -20px rgba(231,76,60,.35);
  border-color:#E74C3C;
}
.client-logo-cell img{
  max-width:100%;
  max-height:52px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(1) opacity(.65);
  transition:filter .3s ease-in-out, transform .3s ease-in-out;
  pointer-events:none;
}
.client-logo-cell:hover img{
  filter:grayscale(0) opacity(1);
  transform:scale(1.07) translateZ(20px);
}
@media(max-width:1080px){.client-logo-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:760px){.client-logo-grid{grid-template-columns:repeat(3,1fr);gap:14px;}.client-logo-cell{height:92px;padding:14px 16px;border-width:2.5px;}.client-logo-cell img{max-height:44px;}}
@media(max-width:480px){.client-logo-grid{grid-template-columns:repeat(2,1fr);gap:12px;}.client-logo-cell{height:82px;padding:12px 14px;border-width:2px;}.client-logo-cell img{max-height:38px;}}
@media(prefers-reduced-motion:reduce){.client-logo-cell{transition:none;}}


/* ==========================================================================
   SERVICE CARDS
   ========================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media(max-width:1100px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr;}}
.svc-card{
  background:var(--bg-1);
  border:1px solid var(--line);
  padding:44px 32px;
  position:relative;
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.svc-card::before{
  content:'';position:absolute;left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--amber),var(--cyan));
}
.svc-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 30px 60px -20px rgba(227,30,39,.22);border-color:rgba(227,30,39,.4);}
.svc-icon{width:46px;height:46px;margin-bottom:26px;color:var(--amber);}
.svc-icon svg{width:100%;height:100%;}
.svc-card h3{color:var(--text-0);font-size:22px;margin-bottom:12px;}
.svc-card p{color:var(--text-2);font-size:14.5px;line-height:1.65;margin-bottom:22px;}
.svc-link{font-family:'Montserrat',sans-serif;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-2);display:inline-flex;align-items:center;gap:8px;}
.svc-link svg{width:13px;height:13px;transition:transform .25s var(--ease);}
.svc-card:hover .svc-link svg{transform:translateX(4px);}

/* light-variant service card (paper sections) */
.svc-card.on-paper{background:#fff;border:1px solid var(--line-strong);}
.svc-card.on-paper h3{color:var(--ink-0);}
.svc-card.on-paper p{color:var(--ink-2);}

/* ==========================================================================
   BUTTONS FOOTER / CARDS / GENERIC
   ========================================================================== */
.card{
  background:#fff;
  border:1px solid rgba(13,13,13,.10);
  border-top:3px solid var(--amber);
  padding:34px;
  position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 30px 60px -22px rgba(227,30,39,.28);border-color:rgba(227,30,39,.35);}

/* ==========================================================================
   PROJECT GRID
   ========================================================================== */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
@media(max-width:980px){.proj-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.proj-grid{grid-template-columns:1fr;}}
.proj-card{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bg-2);
  display:block;
}
.proj-card .art{position:absolute;inset:0;transition:transform .7s var(--ease);}
.proj-card:hover .art{transform:scale(1.08);}
.proj-card .ov{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,7,7,0) 30%, rgba(7,7,7,.94) 100%);
}
.proj-card .info{
  position:absolute;left:0;right:0;bottom:0;padding:26px;
  transform:translateY(12px);
  transition:transform .35s var(--ease);
}
.proj-card:hover .info{transform:translateY(0);}
.proj-tag{font-family:'Montserrat',sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-2);margin-bottom:8px;display:block;}
.proj-card h3{color:#fff;font-size:19px;margin-bottom:6px;}
.proj-card .loc{color:rgba(255,255,255,.65);font-size:12.5px;}
.proj-code{position:absolute;top:22px;right:22px;font-family:'Montserrat',sans-serif;font-size:11px;color:rgba(255,255,255,.65);}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:980px){.reviews-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:700px){
  .reviews-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px;
    margin:0 -28px;
    padding:4px 28px 14px;
    scrollbar-width:none;
  }
  .reviews-grid::-webkit-scrollbar{display:none;}
  .reviews-grid .quote-card{flex:0 0 100%;width:100%;scroll-snap-align:center;}
}
.quote-card{background:var(--bg-2);border:1px solid var(--line);border-top:3px solid var(--amber);padding:36px;position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
@media(max-width:480px){.quote-card{padding:26px 22px;}}
.quote-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -20px rgba(227,30,39,.18);border-color:rgba(227,30,39,.3);}
.quote-card .mark{font-family:'Montserrat',sans-serif;font-size:60px;color:var(--amber);line-height:1;margin-bottom:6px;opacity:.7;}
.quote-card p{color:var(--text-1);font-size:15px;line-height:1.7;margin-bottom:24px;}
.quote-who{display:flex;align-items:center;gap:12px;}
.quote-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--cyan));flex-shrink:0;}
.quote-who b{color:var(--text-0);font-size:14px;display:block;}
.quote-who span{color:var(--text-2);font-size:12px;font-family:'Montserrat',sans-serif;}
.stars{color:var(--amber);letter-spacing:2px;font-size:14px;margin-bottom:14px;}

/* ==========================================================================
   LOGO STRIP (clients / certifications)
   ========================================================================== */
.logo-strip{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line-strong);}
@media(max-width:900px){.logo-strip{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.logo-strip{grid-template-columns:repeat(2,1fr);}}
.logo-cell{
  aspect-ratio:3/2;
  border-right:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  transition:background .25s var(--ease);
}
.logo-cell:hover{background:rgba(var(--amber-rgb),.05);}
.logo-cell .lmark{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.08em;color:var(--text-2);text-align:center;text-transform:uppercase;}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
@media(max-width:980px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr;}}
.team-card{background:var(--bg-2);border:1px solid var(--line);border-bottom:3px solid var(--amber);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.team-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 30px 60px -20px rgba(227,30,39,.2);border-color:rgba(227,30,39,.3);}
.team-photo{aspect-ratio:1;position:relative;overflow:hidden;}
.team-body{padding:22px 22px 26px;}
.team-body h3{color:var(--text-0);font-size:18px;margin-bottom:4px;}
.team-body span{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-2);}
.team-body p{color:var(--text-2);font-size:13px;margin-top:12px;line-height:1.6;}

/* ==========================================================================
   TIMELINE / CERT LIST
   ========================================================================== */
.cert-row{display:flex;align-items:center;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);}
.cert-row:first-child{border-top:1px solid var(--line);}
.cert-id{font-family:'Montserrat',sans-serif;font-size:12px;color:var(--amber);flex-shrink:0;width:70px;}
.cert-name{color:var(--text-0);font-size:17px;font-family:'Montserrat',sans-serif;font-weight:700;flex:1;}
.cert-issuer{color:var(--text-2);font-size:13px;font-family:'Montserrat',sans-serif;flex:1;}
.cert-badge{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--amber);flex-shrink:0;}
.cert-badge svg{width:20px;height:20px;}
@media(max-width:700px){.cert-row{flex-wrap:wrap;}.cert-issuer{width:100%;order:3;}}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:6px;}
.gal-grid .g1{grid-column:span 2;grid-row:span 2;}
@media(max-width:900px){.gal-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.gal-grid{grid-template-columns:repeat(2,1fr);}.gal-grid .g1{grid-column:span 2;grid-row:span 1;}}
.gal-item{position:relative;overflow:hidden;cursor:pointer;}
.gal-item .art{position:absolute;inset:0;transition:transform .6s var(--ease);}
.gal-item:hover .art{transform:scale(1.1);}
.gal-item .tag{position:absolute;left:14px;bottom:14px;color:#fff;font-family:'Montserrat',sans-serif;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .3s var(--ease);z-index:2;}
.gal-item:hover .tag{opacity:1;}
.gal-item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,7,7,.85) 100%);opacity:0;transition:opacity .3s var(--ease);}
.gal-item:hover::after{opacity:1;}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px;}}
.field{margin-bottom:22px;}
.field label{display:block;font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:10px;}
.field input,.field textarea,.field select{
  width:100%;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  color:var(--text-0);
  padding:15px 16px;
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  transition:border-color .25s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--amber);}
.field textarea{resize:vertical;min-height:130px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:560px){.field-row{grid-template-columns:1fr;}}

.info-row{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);}
.info-row:first-child{border-top:1px solid var(--line);}
.info-ic{width:38px;height:38px;flex-shrink:0;color:var(--amber);}
.info-ic svg{width:100%;height:100%;}
.info-row b{display:block;color:var(--text-0);font-family:'Montserrat',sans-serif;font-size:16px;margin-bottom:4px;}
.info-row span, .info-row a{color:var(--text-2);font-size:14px;}

/* ==========================================================================
   PAGE HEADER (interior pages)
   ========================================================================== */
.page-header{
  position:relative;
  padding:150px 0 64px;
  background:var(--black);
  overflow:hidden;
}
.page-header .crumb{
  font-family:'Montserrat',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:20px;display:flex;gap:10px;align-items:center;
}
.page-header .crumb a:hover{color:var(--amber-2);}
.page-header .crumb .sep{color:var(--amber);}
.page-header h1{color:#FFFFFF;font-size:clamp(36px,5.2vw,64px);max-width:16ch;}
.page-header p{color:rgba(255,255,255,.75);max-width:52ch;margin-top:20px;font-size:16px;line-height:1.65;}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  position:relative;
  background:var(--amber);
  padding:70px 0;
  overflow:hidden;
}
.cta-band-inner{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;position:relative;z-index:2;}
.cta-band h2{color:#FFFFFF;font-size:clamp(28px,3.6vw,44px);max-width:14ch;}
.cta-band .actions{display:flex;gap:16px;flex-wrap:wrap;}
.cta-band .btn-primary{background:var(--black);color:#FFFFFF;}
.cta-band .btn-primary:hover{background:#FFFFFF;color:var(--black);}
.cta-band .eyebrow.on-dark{color:#FFFFFF;}
.cta-band .eyebrow.on-dark::before{background:#FFFFFF;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--black);color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.08);}
.footer-top{padding:56px 0 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr;}}
.footer-top h4{font-family:'Montserrat',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF;margin-bottom:22px;}
.footer-top li{margin-bottom:12px;font-size:14px;}
.footer-top li a:hover{color:var(--amber-2);}
.footer-desc{font-size:14px;line-height:1.75;max-width:32ch;margin-top:18px;}
.footer-social{display:flex;gap:10px;margin-top:26px;}
.footer-social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease);color:rgba(255,255,255,.7);}
.footer-social a:hover{border-color:var(--amber);color:var(--amber);}
.footer-social svg{width:15px;height:15px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:26px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12.5px;font-family:'Montserrat',sans-serif;}
.footer-bottom .fb-links{display:flex;gap:22px;}

/* ==========================================================================
   SCROLL PROGRESS + BACK TO TOP
   ========================================================================== */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--amber);z-index:1200;width:0%;}
.back-top{
  position:fixed;right:26px;bottom:26px;z-index:900;
  width:48px;height:48px;
  background:var(--bg-1);
  border:1px solid var(--line-strong);
  box-shadow:0 10px 30px -10px rgba(13,13,13,.25);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-0);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .3s var(--ease);
}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-top:hover{background:var(--amber);color:var(--bg-0);border-color:var(--amber);}
.back-top svg{width:16px;height:16px;}

.wa-float{
  position:fixed;left:26px;bottom:26px;z-index:900;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.55);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.wa-float svg{width:28px;height:28px;}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 34px -8px rgba(37,211,102,.65);}
@media(max-width:640px){
  .wa-float{left:16px;bottom:16px;width:50px;height:50px;}
  .wa-float svg{width:25px;height:25px;}
}

/* ==========================================================================
   MISC
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px;}}
.tag-list{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}
.tag-pill{padding:9px 16px;border:1px solid var(--line-strong);font-family:'Montserrat',sans-serif;font-size:11.5px;letter-spacing:.06em;color:var(--text-1);}
.divider{height:1px;background:var(--line);width:100%;}
.num-marker{font-family:'Montserrat',sans-serif;color:var(--amber);font-size:13px;}

.art-illustration{width:100%;height:100%;}

.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 0;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:19px;font-weight:600;color:var(--text-0);
}
.faq-q .plus{width:22px;height:22px;position:relative;flex-shrink:0;}
.faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;background:var(--amber);transition:transform .3s var(--ease);}
.faq-q .plus::before{left:0;top:50%;width:100%;height:1.5px;transform:translateY(-50%);}
.faq-q .plus::after{top:0;left:50%;width:1.5px;height:100%;transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.faq-a p{padding:0 0 26px;color:var(--text-2);font-size:14.5px;line-height:1.7;max-width:70ch;}

.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media(max-width:900px){.value-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.value-grid{grid-template-columns:1fr;}}
.value-cell{background:var(--bg-1);padding:34px 26px;border-bottom:3px solid transparent;transition:border-color .3s var(--ease);}
.value-cell:hover{border-bottom-color:var(--amber);}
.value-cell > svg{display:block;width:38px;height:38px;color:var(--amber);margin-bottom:4px;}
.value-cell h3{color:var(--text-0);font-size:17px;margin-bottom:10px;}
.value-cell p{color:var(--text-2);font-size:13.5px;line-height:1.6;}

.process-line{position:relative;padding-left:36px;border-left:1px solid var(--line);}
.process-step{position:relative;padding-bottom:34px;}
.process-step:last-child{padding-bottom:0;}
.process-step::before{content:'';position:absolute;left:-42px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--bg-1);border:2px solid var(--amber);}
.process-step h3{color:var(--text-0);font-size:19px;margin-bottom:8px;}
.process-step p{color:var(--text-2);font-size:14px;line-height:1.65;max-width:60ch;}
.process-step .pn{font-family:'Montserrat',sans-serif;color:var(--amber);font-size:12px;margin-bottom:8px;display:block;}