/* ==========================================================
   Digital Media Designs — "One of one" rebuild
   Black + cobalt-blue, hexagon constellation system
   ========================================================== */

:root{
  --black:      #07080a;
  --panel:      #0f1117;
  --panel-2:    #151823;
  --line:       rgba(255,255,255,0.08);
  --paper:      #f5f6f9;
  --paper-dim:  #eceef3;
  --ink:        #0a0b0e;
  --grey:       #787c88;
  --grey-light: #b9bcc6;

  --blue:       #2c4bff;
  --blue-2:     #5b7cff;
  --blue-deep:  #0d1550;
  --glow:       rgba(60,90,255,0.45);
  --silver:     #c9cdd6;

  --font-display: 'Sora', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --max: 1220px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.15;
  margin:0;
  letter-spacing:-0.02em;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;margin:0;padding:0;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;}

.mono{
  font-family:var(--font-mono);
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-size:0.72rem;
}

.text-accent{
  background:linear-gradient(100deg,#5b7cff,#9db1ff 55%,#5b7cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* film-grain overlay, whole site, very subtle */
.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:0.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);
  font-weight:700;font-size:0.92rem;
  padding:15px 28px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease, color .2s ease;
  position:relative;
}
.btn-primary{
  background:linear-gradient(135deg,#3358ff,#1830b8);
  color:#fff;
  box-shadow:0 10px 30px -10px var(--glow);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 36px -10px var(--glow);}
.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,0.22);
  color:inherit;
}
.btn-outline:hover{border-color:var(--blue-2);color:var(--blue-2);transform:translateY(-3px);}

/* pill badge (award mention inline) */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(91,124,255,0.4);
  background:rgba(44,75,255,0.08);
  padding:8px 16px 8px 10px;
  border-radius:999px;
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.05em;text-transform:uppercase;
  color:#cfd7ff;
}
.pill .dot{background:var(--blue-2);}

/* ==========================================================
   Header
   ========================================================== */
header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line);}
header::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(7,8,10,0.82);
  backdrop-filter:blur(12px);
}
.nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:104px;}
.brand-logo{height:76px;width:auto;}
.brand-logo--footer{height:64px;margin-bottom:18px;}
.brand-logo--wide{height:34px;}
.brand-logo--footer-wide{height:38px;margin-bottom:18px;}
.nav-links{display:flex;align-items:center;gap:36px;}
.nav-links a{font-size:0.9rem;font-weight:600;color:#e7e8ec;padding:6px 2px;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease;}
.nav-links a:hover, .nav-links a.active{border-bottom-color:var(--blue-2);color:#fff;}
.nav-links a.btn{color:#fff;border-bottom:none;}

.menu-toggle{
  display:none;background:none;border:none;cursor:pointer;
  width:34px;height:34px;flex-direction:column;justify-content:center;gap:5px;
  position:relative;z-index:1;
}
.menu-toggle span{display:block;height:2px;width:100%;background:#e7e8ec;transition:transform .2s ease, opacity .2s ease;}

/* ==========================================================
   Frame & badge system
   Hexagons are now used sparingly (service badges, tiny bullets,
   the ambient background field) rather than on every photo.
   Photo frames instead use an angular clipped-corner cut, echoing
   the diagonal shards in the DMD logo mark — varied per context
   so the site doesn't read as "one shape repeated everywhere."
   ========================================================== */
.frame{
  --cut: polygon(11% 0%, 100% 0%, 100% 89%, 89% 100%, 0% 100%, 0% 11%);
  clip-path:var(--cut);
  position:relative;background:var(--panel-2);overflow:hidden;
}
.frame img{width:100%;height:100%;object-fit:cover;}
.frame::after{
  content:"";position:absolute;inset:0;clip-path:var(--cut);
  border:1.5px solid rgba(91,124,255,0.55);pointer-events:none;
}
.frame--mirror{--cut: polygon(0% 0%, 89% 0%, 100% 11%, 100% 100%, 11% 100%, 0% 89%);}
.frame--single{--cut: polygon(0% 0%, 84% 0%, 100% 15%, 100% 100%, 0% 100%);}

.frame--card{aspect-ratio:1/0.82;margin-bottom:20px;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.p-card:hover .frame--card{transform:translateY(-8px) scale(1.015);}
.frame--about{aspect-ratio:1/0.95;}
.frame--award{aspect-ratio:1193/1432;max-width:380px;box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);background:#fff;}
.frame--award img{object-fit:contain;}

/* ---------- logos & documents: show the whole mark, never crop it ----------
   .frame img defaults to object-fit:cover, which is right for photography
   but mangles logos/certificates whose important content sits near the
   edges. Add this modifier wherever the source image is a logo/lockup
   rather than a photo. */
.frame--logo{background:#fff;}
.frame--logo img{object-fit:contain;padding:14%;box-sizing:border-box;}

/* the one deliberate hexagon accent: small numbered service badges */
.hex-badge{
  --hex: polygon(50% 2%, 95% 25%, 95% 75%, 50% 98%, 5% 75%, 5% 25%);
  clip-path:var(--hex);
  width:58px;height:58px;
  background:linear-gradient(150deg,#3358ff,#0d1550);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
  box-shadow:0 10px 24px -10px var(--glow);
}
.hex-badge span{font-family:var(--font-mono);color:#fff;font-size:0.85rem;font-weight:500;}

/* small diamond bullets — used for trust-strip separators and pills */
.dot{
  width:6px;height:6px;background:var(--blue-2);display:inline-block;flex-shrink:0;
  transform:rotate(45deg);
}

/* hex constellation field (svg populated by script.js) — background texture only */
.hexfield-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hexfield-svg .hf-hex{fill:none;stroke:rgba(120,145,255,0.22);stroke-width:1.2;}
.hexfield-svg .hf-hex--fill{fill:rgba(44,75,255,0.05);}
.hexfield-svg .hf-line{stroke:rgba(120,145,255,0.16);stroke-width:1;}
.hexfield-svg .hf-node{fill:#5b7cff;filter:drop-shadow(0 0 6px rgba(91,124,255,0.9));animation:pulse 3.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:0.55;r:3;}50%{opacity:1;r:4.6;}}

/* faint hex-grid texture background for dark sections */
.bg-dark, .hero, .section-dark, .cta-banner{
  background-color:var(--black);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(44,75,255,0.16), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath d='M42 0 84 24 84 72 42 96 0 72 0 24Z' fill='none' stroke='rgba(255,255,255,0.045)' stroke-width='1'/%3E%3C/svg%3E");
  color:#f2f2f5;
}

/* ==========================================================
   Home hero
   ========================================================== */
.hero{position:relative;padding:64px 0 0;overflow:hidden;min-height:92vh;display:flex;align-items:center;}
.hero-spotlight{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(480px circle at var(--mx,50%) var(--my,30%), rgba(70,100,255,0.16), transparent 60%);
  transition:background .1s linear;
}
.hero-inner{position:relative;z-index:2;width:100%;padding:70px 0 90px;}
.hero-grid{display:grid;grid-template-columns:0.86fr 1.14fr;gap:40px;align-items:center;}
.eyebrow{color:#8aa0ff;margin-bottom:22px;display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--blue-2);display:inline-block;transform:rotate(45deg);}
.hero h1{font-size:clamp(2.6rem,4.4vw,4.1rem);max-width:640px;color:#fff;}
.hero p.lead{margin:24px 0 22px;color:#b9bcc6;max-width:480px;font-size:1.08rem;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.hero-visual{position:relative;height:540px;}

/* ---------- hero: oversized headline ---------- */
.hero-h1-big{
  font-size:clamp(3.2rem,6.2vw,5.6rem);
  line-height:0.96;color:#fff;margin-bottom:26px;
  text-shadow:0 4px 0 rgba(0,0,0,0.35);
}
.motto--hero{margin:22px 0 0;}

/* ---------- hero: real-work photo grid ---------- */
.hero-visual--grid{height:460px;}
.photo-grid{
  display:grid;height:100%;width:100%;gap:10px;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  grid-template-areas:
    "a b c"
    "d e e"
    "f g h";
}
.pg-item{
  border-radius:18px;overflow:hidden;position:relative;
  box-shadow:0 14px 28px -14px rgba(0,0,0,0.6);
}
.pg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.pg-item:hover img{transform:scale(1.08);}
.pg-item--1{grid-area:a;}
.pg-item--2{grid-area:b;}
.pg-item--3{grid-area:c;}
.pg-item--4{grid-area:d;}
.pg-item--5{grid-area:e;}
.pg-item--6{grid-area:f;}
.pg-item--7{grid-area:g;}
.pg-item--8{grid-area:h;}

@media (max-width:980px){
  .hero-visual--grid{height:340px;}
  .hero-h1-big{font-size:clamp(2.6rem,7vw,3.6rem);}
}
@media (max-width:600px){
  .hero-visual--grid{height:280px;}
  .photo-grid{gap:6px;}
  .pg-item{border-radius:12px;}
}
@media (prefers-reduced-motion:reduce){
  .pg-item img{transition:none;}
}
.hero-visual .hexfield-svg{z-index:0;}
.hero-logo-wrap{
  position:relative;z-index:1;
  height:100%;display:flex;align-items:center;justify-content:center;
}
.hero-logo-wrap::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(closest-side, rgba(60,90,255,0.28), transparent 70%);
  filter:blur(10px);
}
.hero-logo{
  position:relative;width:82%;max-width:560px;
  filter:drop-shadow(0 25px 50px rgba(0,0,0,0.55));
}
.hero-photo{
  position:relative;z-index:1;width:84%;margin:0 auto;
  aspect-ratio:4/5;
  box-shadow:0 40px 80px -18px rgba(0,0,0,0.65);
}
.hero-photo::before{
  content:"";position:absolute;inset:-30px;z-index:-1;
  background:radial-gradient(closest-side, rgba(60,90,255,0.32), transparent 72%);
  filter:blur(16px);
}

/* ---------- hero hexagon trio (replaces the plain hero logo) ---------- */
.hero-hex-panel{
  position:relative;z-index:1;
  height:100%;display:flex;align-items:center;justify-content:center;
}
.motto{
  font-family:'Georgia',serif;font-style:italic;
  color:#8aa0ff;font-size:clamp(1.15rem,1.8vw,1.4rem);
  margin:0 0 26px;
}

/* ---------- decorative honeycomb cluster behind the hex cluster ---------- */
.hex-pattern{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hpt{
  --hex-cut: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position:absolute;aspect-ratio:1/1.15;clip-path:var(--hex-cut);
}
.hpt--1 {width:52px; top:4%;   left:2%;   background:var(--blue-2); opacity:.8;}
.hpt--2 {width:66px; top:13%;  left:13%;  background:transparent; border:1.5px solid rgba(120,145,255,.5);}
.hpt--3 {width:40px; top:1%;   right:22%; background:transparent; border:1.5px solid rgba(120,145,255,.3);}
.hpt--4 {width:74px; top:9%;   right:8%;  background:rgba(44,75,255,.3);}
.hpt--5 {width:96px; top:19%;  right:-2%; background:rgba(91,124,255,.5);}
.hpt--6 {width:104px;bottom:20%;right:9%; background:var(--blue); opacity:.9;}
.hpt--7 {width:68px; bottom:7%; right:22%; background:transparent; border:1.5px solid rgba(120,145,255,.4);}
.hpt--8 {width:82px; bottom:-3%;right:-2%; background:rgba(91,124,255,.4);}
.hpt--9 {width:58px; bottom:3%; left:5%;  background:rgba(44,75,255,.28);}
.hpt--10{width:46px; bottom:13%;left:17%; background:transparent; border:1.5px solid rgba(120,145,255,.3);}
.hpt--11{width:38px; top:40%;  left:-2%; background:transparent; border:1.5px solid rgba(120,145,255,.22);}
.hpt--12{width:54px; bottom:30%;right:32%;background:rgba(91,124,255,.22);}

/* ---------- hex cluster: a true honeycomb flower — six service
   hexagons tessellating around one branded center cell (glowing DMD
   blue, distinct from the photo hexagons around it), on a gently
   tilted 3D plane. All six petals are equal weight; the center is the
   anchor, not a 7th service. ---------- */
.hero-hex-panel{perspective:1400px;}
.hex-cluster{
  position:relative;width:100%;max-width:480px;height:100%;margin:0 auto;
  transform:rotateX(10deg) rotateY(-6deg);
  transform-style:preserve-3d;
}
.hex-card{
  --hex-cut: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path:var(--hex-cut);
  position:absolute;display:block;width:150px;aspect-ratio:1/1.12;overflow:hidden;
  background:var(--panel-2);
  box-shadow:0 20px 38px -14px rgba(0,0,0,0.65);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, filter .35s ease;
}
.hex-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.hex-card:hover img{transform:scale(1.1);}
.hex-card::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(7,8,10,0.92) 0%, rgba(7,8,10,0.08) 50%, transparent 68%);
}
.hex-card::after{
  content:"";position:absolute;inset:0;clip-path:var(--hex-cut);
  border:2px solid rgba(120,145,255,0.75);pointer-events:none;z-index:2;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.35);
}
.hex-card:hover{transform:translate(-50%,-50%) translateY(-8px) scale(1.05);box-shadow:0 28px 48px -14px rgba(0,0,0,0.75);}
.hex-card:hover::after{border-color:#fff;}
.hex-label{
  position:absolute;left:10%;right:10%;bottom:24%;z-index:2;
  color:#fff;font-family:var(--font-display);font-weight:700;
  text-align:center;line-height:1.15;
  font-size:clamp(0.78rem,1.3vw,0.95rem);letter-spacing:-0.01em;
  text-shadow:0 2px 10px rgba(0,0,0,0.8);
}

/* six petals, standard hex-grid neighbour offsets around a center at 50%/50% */
.hex-card--nw{top:23%;left:35%;z-index:2;}
.hex-card--ne{top:23%;left:65%;z-index:2;}
.hex-card--e {top:50%;left:80%;z-index:2;}
.hex-card--se{top:77%;left:65%;z-index:2;}
.hex-card--sw{top:77%;left:35%;z-index:2;}
.hex-card--w {top:50%;left:20%;z-index:2;}

/* branded center cell — glowing accent, not a photo tile */
.hex-center{
  --hex-cut: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position:absolute;top:50%;left:50%;width:128px;aspect-ratio:1/1.12;
  transform:translate(-50%,-50%);
  clip-path:var(--hex-cut);
  z-index:3;
  background:linear-gradient(150deg,#3358ff,#0d1550);
  box-shadow:0 0 46px rgba(60,90,255,0.65), 0 22px 40px -14px rgba(0,0,0,0.75);
}
.hex-center::after{
  content:"";position:absolute;inset:0;clip-path:var(--hex-cut);
  border:2px solid rgba(255,255,255,0.5);pointer-events:none;
}

/* soft ground-glow the cluster appears to sit on, reinforcing the tilt */
.hero-hex-panel::after{
  content:"";position:absolute;left:50%;bottom:2%;z-index:0;
  width:60%;height:60px;transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(60,90,255,0.35), transparent 75%);
  filter:blur(6px);
}

@media (max-width:980px){
  .hero-hex-panel{perspective:1100px;}
  .hex-cluster{transform:rotateX(8deg) rotateY(-5deg);}
  .hex-card{width:108px;}
  .hex-center{width:92px;}
  .hex-label{font-size:0.68rem;}
}
@media (max-width:600px){
  .hero-hex-panel{perspective:900px;}
  .hex-cluster{transform:rotateX(6deg) rotateY(-4deg);}
  .hex-card{width:82px;}
  .hex-center{width:70px;}
  .hex-label{font-size:0.6rem;bottom:20%;}
  .hex-pattern{transform:scale(0.5);}
}

/* ---------- entrance choreography: hex field assembles, then the
   cluster snaps into place lead-first — runs once on load ---------- */
@media (prefers-reduced-motion:no-preference){
  .hpt{animation:hptIn .5s cubic-bezier(.2,.8,.2,1) both;}
  .hpt--1{animation-delay:.02s;} .hpt--2{animation-delay:.07s;} .hpt--3{animation-delay:.12s;}
  .hpt--4{animation-delay:.17s;} .hpt--5{animation-delay:.22s;} .hpt--6{animation-delay:.27s;}
  .hpt--7{animation-delay:.32s;} .hpt--8{animation-delay:.37s;} .hpt--9{animation-delay:.42s;}
  .hpt--10{animation-delay:.47s;} .hpt--11{animation-delay:.52s;} .hpt--12{animation-delay:.57s;}

  /* center pops first, then the six petals assemble around it in a ring */
  .hex-center{animation:hexCenterIn .5s cubic-bezier(.2,.8,.2,1) both;}
  .hex-card{animation:hexIn .6s cubic-bezier(.2,.8,.2,1) both;}
  .hex-card--nw{animation-delay:.3s;}
  .hex-card--ne{animation-delay:.4s;}
  .hex-card--e {animation-delay:.5s;}
  .hex-card--se{animation-delay:.6s;}
  .hex-card--sw{animation-delay:.7s;}
  .hex-card--w {animation-delay:.8s;}
}
@keyframes hptIn{0%{opacity:0;transform:scale(.25);}100%{opacity:1;transform:scale(1);}}
@keyframes hexIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-10deg);}
  65%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(2deg);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}
}
@keyframes hexCenterIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
/* base resting position for every state the animation doesn't cover
   (reduced-motion, and the moment right after the animation ends) */
.hex-card{transform:translate(-50%,-50%);}

/* ==========================================================
   Trust strip
   ========================================================== */
.trust{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;}
.trust-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.trust-label{color:var(--grey-light);white-space:nowrap;}
.trust-names{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--font-display);font-weight:700;font-size:0.95rem;color:#e7e8ec;}

/* ==========================================================
   Award section
   ========================================================== */
.award{padding:110px 0;position:relative;overflow:hidden;}
.award-inner{display:grid;grid-template-columns:0.7fr 1.3fr;gap:64px;align-items:center;}
.award-copy h2{font-size:2.1rem;color:#fff;margin-bottom:18px;}
.award-copy p{color:var(--grey-light);font-size:1.04rem;max-width:520px;margin-bottom:10px;}
.award-copy .note{color:#6b7080;font-size:0.82rem;margin-top:14px;}
.award-badge-img{height:74px;width:auto;border:1px solid rgba(255,255,255,0.14);background:#e9e9ea;padding:6px;margin-top:24px;display:block;}

/* ==========================================================

   Section basics
   ========================================================== */
section{padding:110px 0;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px;flex-wrap:wrap;}
.sec-tag{color:var(--blue);margin-bottom:12px;display:block;}
.section-dark .sec-tag, .bg-dark .sec-tag{color:#8aa0ff;}
.sec-head h2{font-size:clamp(1.9rem,2.6vw,2.4rem);max-width:600px;}
.sec-head p{color:var(--grey);max-width:380px;margin:0;font-size:0.98rem;}
.section-dark .sec-head p, .bg-dark .sec-head p{color:var(--grey-light);}

/* ==========================================================
   Services
   ========================================================== */
.service-category{margin-bottom:96px;scroll-margin-top:130px;}
.service-category:last-child{margin-bottom:0;}
.service-category-title{
  color:var(--blue);font-size:0.78rem;margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid #e2e3e8;
}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e2e3e8;border:1px solid #e2e3e8;box-shadow:0 24px 48px -32px rgba(10,11,14,0.25);}
.services-grid--2col{grid-template-columns:repeat(2,1fr);}
.service-card{background:var(--paper);padding:38px 32px;display:flex;flex-direction:column;min-height:300px;transition:background .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);}
.service-card:hover{background:#fff;transform:translateY(-4px);}
.service-card h3{font-size:1.18rem;margin-bottom:12px;}
.service-card p{color:var(--grey);font-size:0.93rem;margin:0 0 20px;flex-grow:1;}
.spec{border-top:1px solid #e2e3e8;padding-top:16px;display:flex;flex-direction:column;gap:6px;}
.spec .mono{color:var(--grey);font-size:0.68rem;}
.spec .mono b{color:var(--ink);font-weight:600;}

/* ---------- category banner: photo + copy, alternating sides ---------- */
.svc-band{
  display:flex;align-items:center;gap:64px;margin-bottom:44px;
}
.svc-band--reverse{flex-direction:row-reverse;}
.svc-band-media{flex:0 0 42%;aspect-ratio:5/4;position:relative;box-shadow:0 30px 60px -24px rgba(10,11,14,0.4);}
.svc-band-copy{flex:1;position:relative;}
.svc-band-index{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(3.2rem,7vw,5.4rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(44,75,255,0.28);
  display:block;margin-bottom:4px;letter-spacing:-0.02em;
}
.svc-band-copy .mono.svc-of6{color:var(--blue);display:block;margin-bottom:18px;}
.svc-band-copy h3{font-size:clamp(1.8rem,2.6vw,2.5rem);margin-bottom:16px;}
.svc-band-copy p{color:var(--grey);font-size:1.02rem;max-width:440px;}

@media (max-width:980px){
  .svc-band, .svc-band--reverse{flex-direction:column;gap:28px;align-items:stretch;}
  .svc-band-media{flex-basis:auto;aspect-ratio:16/10;}
}

/* ---------- homepage hierarchy rank grid ---------- */
.rank-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px 18px;}
.rank-card{display:block;color:inherit;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.rank-card:hover{transform:translateY(-6px);}
.rank-num{color:var(--blue);display:block;margin-bottom:12px;font-size:0.78rem;}
.rank-thumb{aspect-ratio:1/1.08;margin-bottom:14px;box-shadow:0 18px 34px -16px rgba(10,11,14,0.3);}
.rank-thumb img{transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.rank-card:hover .rank-thumb img{transform:scale(1.08);}
.rank-card h3{font-size:0.98rem;line-height:1.25;}

@media (max-width:980px){
  .rank-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:600px){
  .rank-grid{grid-template-columns:repeat(2,1fr);gap:26px 16px;}
}

/* ==========================================================
   Portfolio
   ========================================================== */
.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;}
.p-card--offset{margin-top:42px;}
.p-tag{color:#8aa0ff;margin-bottom:8px;display:block;}
.p-card h4{font-family:var(--font-display);font-weight:700;font-size:1rem;margin:0 0 4px;color:#fff;}
.p-card p{color:var(--grey-light);font-size:0.86rem;margin:0;}

/* ==========================================================
   About strip / page
   ========================================================== */
.about-strip{background:var(--panel);color:#f2f2f5;}
.about-inner{display:grid;grid-template-columns:0.85fr 1.15fr;gap:60px;align-items:center;}
.about-inner h2{font-size:1.95rem;margin:14px 0 20px;color:#fff;}
.about-inner p{color:var(--grey-light);font-size:1.02rem;margin-bottom:26px;max-width:460px;}

/* ==========================================================
   CTA banner
   ========================================================== */
.cta-banner{text-align:left;}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap;}
.cta-inner h2{font-size:clamp(1.9rem,2.6vw,2.3rem);max-width:480px;margin-top:12px;color:#fff;}
.cta-contact{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.cta-contact a.mono{font-size:0.9rem;color:var(--grey-light);}
.cta-contact a.mono:hover{color:#fff;}

/* ==========================================================
   Page hero banner (subpages)
   ========================================================== */
.page-hero{padding:170px 0 84px;position:relative;overflow:hidden;}
.page-hero .crumb{color:var(--grey-light);margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.page-hero .crumb a{color:#8aa0ff;}
.page-hero h1{font-size:clamp(2.2rem,4vw,3.2rem);color:#fff;max-width:720px;}
.page-hero p{color:var(--grey-light);max-width:520px;margin-top:20px;font-size:1.05rem;}
.page-hero .tagline{
  font-family:'Georgia',serif;font-style:italic;
  color:#8aa0ff;font-size:1.15rem;margin-top:22px;max-width:none;
}

/* vision / mission / values */
.vmv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e2e3e8;border:1px solid #e2e3e8;box-shadow:0 24px 48px -32px rgba(10,11,14,0.25);}
.vmv-card{background:var(--paper);padding:38px 32px;transition:background .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);}
.vmv-card:hover{background:#fff;transform:translateY(-4px);}
.vmv-card h3{font-size:1.15rem;margin-bottom:14px;}
.vmv-card p{color:var(--grey);font-size:0.93rem;line-height:1.6;}
.vmv-values{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.vmv-values li{font-family:var(--font-mono);font-size:0.82rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);position:relative;padding-left:18px;}
.vmv-values li::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;background:var(--blue);transform:rotate(45deg);}

/* video-backed page hero (portfolio) */
.page-hero--video{
  padding:220px 0 110px;
  background-image:url("images/portfolio-hero-poster.jpg");
  background-size:cover;
  background-position:center 30%;
}
.hero-bg-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  z-index:0;
}
.hero-bg-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(7,8,10,0.94) 0%, rgba(7,8,10,0.82) 40%, rgba(7,8,10,0.55) 100%),
    linear-gradient(to top, rgba(7,8,10,0.95), rgba(7,8,10,0.3) 60%);
}
.page-hero--video .wrap{position:relative;z-index:2;}

/* ==========================================================
   Contact page
   ========================================================== */
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;}
.contact-info-card{background:var(--paper-dim);padding:38px;border:1px solid #e2e3e8;}
.contact-info-card h3{font-size:1.1rem;margin-bottom:22px;}
.contact-info-card .row{display:flex;flex-direction:column;gap:4px;margin-bottom:22px;}
.contact-info-card .row .mono{color:var(--grey);}
.contact-info-card .row a,.contact-info-card .row span{font-family:var(--font-display);font-weight:700;font-size:1.05rem;}
.contact-info-card .social-icons{margin-top:6px;}

/* ---------- social icons: hex chip, black glyph, legible on light or dark ---------- */
.social-icons{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.social-icon{
  --hex: polygon(50% 2%, 95% 25%, 95% 75%, 50% 98%, 5% 75%, 5% 25%);
  clip-path:var(--hex);
  width:40px;height:40px;flex-shrink:0;
  background:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -8px rgba(0,0,0,0.5);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.social-icon svg{width:18px;height:18px;fill:var(--ink);display:block;}
.social-icon:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 14px 28px -10px var(--glow);}
.social-icon--placeholder{opacity:0.5;cursor:default;}
.social-icon--placeholder svg{fill:#55586a;}
.social-icon--placeholder:hover{transform:none;box-shadow:0 8px 18px -8px rgba(0,0,0,0.5);}

.form-card{background:var(--black);color:#fff;padding:42px;position:relative;overflow:visible;}
.form-card h3{font-size:1.1rem;margin-bottom:6px;color:#fff;}
.form-card .mono{color:var(--grey-light);margin-bottom:26px;display:block;}
.field{margin-bottom:20px;}
.field label{display:block;font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--grey-light);margin-bottom:8px;}
.field input,.field textarea,.field select{
  width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.16);
  color:#fff;padding:13px 14px;font-family:var(--font-body);font-size:0.95rem;border-radius:0;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-2);outline:none;}
.field textarea{resize:vertical;min-height:110px;}
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9bcc6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
/* Native <option> popups render on their own OS layer with a white background by
   default — the form's white text was invisible against it. Force the palette
   explicitly so options stay legible regardless of browser/OS defaults. */
.field select option{background:#151823;color:#fff;}
.form-note{font-size:0.78rem;color:var(--grey);margin-top:16px;}

@media (max-width:480px){
  .contact-info-card,.form-card{padding:26px 22px;}
}

/* ==========================================================
   Footer
   ========================================================== */
footer{background:var(--black);color:var(--grey-light);padding:70px 0 32px;border-top:1px solid var(--line);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:48px;}
.foot-brand p{color:var(--grey);font-size:0.9rem;max-width:280px;}
footer h5{color:var(--grey);margin-bottom:16px;}
footer ul{display:flex;flex-direction:column;gap:11px;}
footer .social-icons{margin-top:16px;}
.foot-services-list{margin-top:22px;}
.foot-services-list li{position:relative;padding-left:16px;}
.foot-services-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--blue-2);transform:rotate(45deg);}
footer a{font-size:0.92rem;color:var(--grey-light);}
footer a:hover{color:var(--blue-2);}
.colophon{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;color:var(--grey);flex-wrap:wrap;gap:10px;font-size:0.68rem;}

/* ==========================================================
   Scroll reveal
   ========================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width:980px){
  .hero{min-height:auto;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1;height:320px;margin-bottom:20px;}
  .hex-pattern{transform:scale(0.78);}
  .award-inner{grid-template-columns:1fr;text-align:center;}
  .award-copy p{margin-left:auto;margin-right:auto;}
  .about-inner{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .hero h1{font-size:2.4rem;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .vmv-grid{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:1fr 1fr;}
  .p-card--offset{margin-top:0;}
  .foot-grid{grid-template-columns:1fr;gap:32px;}
}

@media (max-width:760px){
  .nav-links{
    position:fixed;top:104px;left:0;right:0;bottom:0;
    background:rgba(7,8,10,0.98);
    flex-direction:column;align-items:flex-start;
    padding:28px;gap:22px;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
    overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links .btn{margin-top:8px;width:100%;justify-content:center;}
  .menu-toggle{display:flex;}
  .sec-head{flex-direction:column;align-items:flex-start;}
  .page-hero{padding:150px 0 64px;}
  .page-hero--video{padding:170px 0 72px;}
}

@media (max-width:600px){
  .services-grid,.portfolio-grid{grid-template-columns:1fr;}
  .hero-visual{height:280px;}
  .hero-logo{width:82%;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
  section{padding:80px 0;}
  .award{padding:80px 0;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn,.frame--card,.reveal{transition:none;}
  .hexfield-svg .hf-node{animation:none;}
  .reveal{opacity:1;transform:none;}
  .hero-bg-media{display:none;}
}