/* ==========================================================================
   Matkins Digital — site.css
   Shared stylesheet for index / process / case-study / engagements
   ========================================================================== */

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

/* --- link-card guards: kept at top so partial loads never show default link blue --- */
a.service-card, a.service-card:link, a.service-card:visited,
a.paired-card,  a.paired-card:link,  a.paired-card:visited{
  text-decoration:none; color:#ffffff; display:block;
}
a.service-card *, a.paired-card *{ text-decoration:none; }
.cap-label{ color:#5B4FCF; }
.bundle-list, .deliverables, .howlist, .nav-links, .footer-col ul{ list-style:none; }


html { scroll-behavior:smooth; }

:root{
  --black:#000000;
  --charcoal:#2E2E2E;
  --indigo:#5B4FCF;
  --indigo-lt:#6d62d8;
  --lavender:#EAE6F7;
  --mid-gray:#B0B0B0;
  --white:#ffffff;
  --surface:#111111;
  --surface-2:#1a1a1a;
  --deep:#0d0b1a;
  --hair:rgba(255,255,255,0.08);
  --nav-h:72px;
}

body{
  background:var(--black); color:var(--white);
  font-family:'DM Sans',sans-serif; font-weight:300; line-height:1.6;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }

/* ---------- NAV ---------- */
nav#main-nav{
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 48px;
  transition:background .4s,border-color .4s; border-bottom:1px solid transparent;
}
nav#main-nav.scrolled{ background:rgba(0,0,0,.92); backdrop-filter:blur(16px); border-bottom-color:rgba(255,255,255,.06); }
.nav-logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo img{ height:38px; width:auto; }
.nav-logo-text{ display:flex; flex-direction:column; gap:3px; line-height:1; }
.nav-logo-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--white); white-space:nowrap; }
.nav-logo-sub{ font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--indigo); font-weight:400; white-space:nowrap; }
.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; }
.nav-links a{ font-size:13px; font-weight:400; letter-spacing:.05em; color:rgba(255,255,255,.7); text-decoration:none; transition:color .2s; position:relative; }
.nav-links a:hover{ color:var(--white); }
.nav-links a.current{ color:var(--white); }
.nav-links a.current::after{ content:''; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:var(--indigo); }
.nav-hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-hamburger span{ display:block; width:24px; height:1.5px; background:var(--white); transition:all .3s; }
.mobile-menu{ display:none; position:fixed; inset:0; z-index:190; background:rgba(0,0,0,.97); flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-family:'Oswald',sans-serif; font-size:32px; font-weight:600; text-transform:uppercase; color:rgba(255,255,255,.7); text-decoration:none; }
.mobile-menu a:hover{ color:var(--white); }

/* ---------- SHARED ---------- */
section{ padding:100px 48px; }
.inner{ max-width:1180px; margin:0 auto; }
.pad-top{ padding-top:calc(var(--nav-h) + 76px); }
.section-eyebrow{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--indigo); margin-bottom:16px; font-weight:400; }
.section-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(34px,4.6vw,58px); line-height:1; letter-spacing:-.01em; margin-bottom:18px; }
.section-title em{ font-style:normal; color:var(--indigo); }
.section-sub{ font-size:16px; color:rgba(255,255,255,.55); line-height:1.7; max-width:560px; font-weight:300; }
.btn{ font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; padding:14px 32px; border-radius:4px; cursor:pointer; text-decoration:none; transition:all .2s; display:inline-block; letter-spacing:.02em; }
.btn-primary{ background:var(--indigo); color:var(--white); border:1px solid var(--indigo); }
.btn-primary:hover{ background:var(--indigo-lt); border-color:var(--indigo-lt); transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.3); }
.btn-outline:hover{ border-color:var(--white); transform:translateY(-1px); }
.cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; }
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }
@keyframes fadeUp{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ---------- HERO (index only) ---------- */
.hero{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden; padding:calc(var(--nav-h) + 40px) 24px 80px;
}
.hero-bg-img{
  position:absolute; inset:0; z-index:0;
  background:url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1800&q=80') center 45%/cover no-repeat;
  transform:scale(1.06); animation:heroZoom 16s ease-out forwards; filter:saturate(.5);
}
.hero-bg{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(91,79,207,.30) 0%, transparent 62%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 55%, #000 100%);
}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%, #000 20%, transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 45%, #000 20%, transparent 72%);
}
@keyframes heroZoom{ from{transform:scale(1.06)} to{transform:scale(1)} }
.hero-content{ position:relative; z-index:2; max-width:1000px; }
.hero-location{
  display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.78); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:6px 16px; border-radius:100px; margin-bottom:30px; opacity:0; animation:fadeUp .8s ease forwards .3s;
}
.hero-location-dot{ width:6px; height:6px; background:var(--indigo); border-radius:50%; }
.hero-title{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(44px,7.6vw,96px);
  line-height:.94; letter-spacing:-.02em; margin-bottom:26px;
  opacity:0; animation:fadeUp .8s ease forwards .5s;
}
.hero-title em{ font-style:normal; color:var(--indigo); }
.hero-sub{ font-size:clamp(15px,1.7vw,18px); color:rgba(255,255,255,.66); max-width:620px; margin:0 auto 40px; line-height:1.75; opacity:0; animation:fadeUp .8s ease forwards .7s; }
.hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp .8s ease forwards .9s; }
.hero-marks{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,auto); gap:34px; justify-content:center; align-items:center;
  margin-top:56px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); max-width:820px; width:100%;
  opacity:0; animation:fadeUp .8s ease forwards 1.1s;
}
.hero-mark{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.hero-mark b{ color:var(--indigo); font-weight:500; }

/* ---------- FORMAT MATRIX ---------- */
#matrix{ background:var(--surface); border-top:1px solid var(--hair); padding:88px 48px; }
.matrix-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.frames{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px; align-items:end; }
.frame{ position:relative; background:var(--surface-2); border:1px solid rgba(255,255,255,.09); overflow:hidden; transition:border-color .25s, background .25s, box-shadow .25s; cursor:pointer; }
.frame::after{ content:''; position:absolute; inset:7px; border:1px dashed rgba(255,255,255,.08); pointer-events:none; transition:border-color .25s; }
.frame b{ position:absolute; left:9px; bottom:7px; z-index:2; font-size:10px; letter-spacing:.12em; font-weight:400; color:rgba(255,255,255,.4); transition:color .25s; }
.frame i{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:36%; aspect-ratio:1; border-radius:50%; background:var(--indigo); opacity:.18; transition:opacity .3s, transform .3s; }
.frame.act{ background:#191630; border-color:var(--indigo); box-shadow:0 0 0 1px rgba(91,79,207,.25), 0 12px 40px -18px rgba(91,79,207,.9); }
.frame.act::after{ border-color:rgba(91,79,207,.45); }
.frame.act b{ color:var(--lavender); }
.frame.act i{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
/* video + social ratios */
.f169{ grid-column:span 7; aspect-ratio:16/9; }
.f45 { grid-column:span 5; aspect-ratio:4/5; }
.f11 { grid-column:span 4; aspect-ratio:1/1; }
.f916{ grid-column:span 3; aspect-ratio:9/16; }
/* IAB display sizes */
.f65 { grid-column:span 5; aspect-ratio:6/5; }    /* 300x250 medium rectangle */
.f81 { grid-column:span 12; aspect-ratio:8/1; }   /* 728x90 leaderboard */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.chip{ font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border:1px solid rgba(255,255,255,.12); background:transparent; color:rgba(255,255,255,.5); cursor:pointer; border-radius:3px; transition:all .2s; }
.chip:hover{ border-color:var(--indigo); color:var(--white); }
.chip.on{ background:rgba(91,79,207,.18); border-color:var(--indigo); color:var(--white); }

/* ---------- CAPABILITIES ---------- */
#capabilities{ background:var(--black); }
.services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin-top:52px; }
.service-card{ background:var(--surface-2); padding:40px 34px; position:relative; overflow:hidden; transition:background .3s; }
.service-card:hover{ background:#222; }
.service-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--indigo); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.service-card:hover::before{ transform:scaleX(1); }
.service-num{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.2em; color:var(--indigo); margin-bottom:20px; }
.service-icon{ width:38px; height:38px; margin-bottom:20px; color:var(--indigo); }
.service-title{ font-family:'Oswald',sans-serif; font-size:21px; font-weight:600; margin-bottom:12px; line-height:1.2; }
.service-desc{ font-size:14px; color:rgba(255,255,255,.52); line-height:1.75; }

/* ---------- WORK ---------- */
#work{ background:var(--surface); }
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin-top:52px; }
.work-card{ position:relative; background:var(--black); overflow:hidden; cursor:pointer; }
.work-card-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0a0a0a; }
.work-card-thumb-img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.work-card:hover .work-card-thumb-img{ transform:scale(1.05); }
.work-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.4); transition:background .3s; }
.work-card:hover .work-play{ background:rgba(0,0,0,.18); }
.work-play-btn{ width:56px; height:56px; background:var(--indigo); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .2s, background .2s; }
.work-card:hover .work-play-btn{ transform:scale(1.1); background:var(--indigo-lt); }
.work-badge{ position:absolute; top:14px; left:14px; z-index:3; background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.14); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; color:var(--lavender); }
.work-card-info{ padding:26px 28px 30px; }
.work-card-title{ font-family:'Oswald',sans-serif; font-size:20px; font-weight:600; margin-bottom:10px; line-height:1.2; }
.work-card-desc{ font-size:13.5px; color:rgba(255,255,255,.5); line-height:1.7; margin-bottom:16px; }
.work-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.work-tag{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:4px 10px; border-radius:2px; }

/* ---------- VIDEO MODAL ---------- */
.video-modal{ display:none; position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.95); align-items:center; justify-content:center; padding:24px; }
.video-modal.open{ display:flex; }
.video-modal-inner{ position:relative; width:100%; max-width:1000px; aspect-ratio:16/9; }
.video-modal-inner iframe{ width:100%; height:100%; border:none; }
.video-modal-close{ position:absolute; top:-44px; right:0; background:none; border:none; color:rgba(255,255,255,.6); font-size:28px; cursor:pointer; line-height:1; }
.video-modal-close:hover{ color:#fff; }

/* ---------- ABOUT ---------- */
#about{ background:var(--black); }
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; align-items:center; }
.about-img-wrap{ position:relative; }
.about-img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top center; }
.about-img-accent{ position:absolute; bottom:-16px; right:-16px; width:120px; height:120px; border:2px solid var(--indigo); z-index:-1; }
.about-body{ font-size:15px; color:rgba(255,255,255,.65); line-height:1.85; margin-bottom:16px; }
.about-body.dim{ color:rgba(255,255,255,.42); font-size:14px; }
.about-stats{ display:flex; gap:44px; margin-top:44px; padding-top:36px; border-top:1px solid var(--hair); flex-wrap:wrap; }
.stat-num{ font-family:'Oswald',sans-serif; font-size:32px; font-weight:700; color:var(--indigo); line-height:1; margin-bottom:8px; }
.stat-label{ font-size:12px; color:rgba(255,255,255,.4); letter-spacing:.06em; line-height:1.5; max-width:180px; }

/* ---------- STRIP ---------- */
.strip{ background:var(--deep); border-top:1px solid rgba(91,79,207,.22); border-bottom:1px solid rgba(91,79,207,.22); padding:84px 48px; text-align:center; position:relative; overflow:hidden; }
.strip::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(91,79,207,.22), transparent 65%); }
.strip > *{ position:relative; z-index:1; }
.strip h2{ font-family:'Oswald',sans-serif; font-size:clamp(30px,4vw,50px); font-weight:700; margin-bottom:16px; line-height:1.05; }
.strip p{ font-size:16px; color:rgba(255,255,255,.55); max-width:560px; margin:0 auto 34px; line-height:1.7; }
.strip .cta-row{ justify-content:center; margin-top:0; }

/* ---------- PROCESS ---------- */
.steps{ margin-top:56px; border-top:1px solid var(--hair); }
.step{ display:grid; grid-template-columns:120px 1fr 1.25fr; gap:44px; padding:38px 0; border-bottom:1px solid var(--hair); transition:background .3s; }
.step:hover{ background:rgba(255,255,255,.015); }
.step-idx{ font-family:'Oswald',sans-serif; font-size:38px; font-weight:700; color:rgba(91,79,207,.55); line-height:1; }
.step-title{ font-family:'Oswald',sans-serif; font-size:23px; font-weight:600; line-height:1.2; }
.step-body p{ font-size:14.5px; color:rgba(255,255,255,.55); line-height:1.8; }
.step-body p + p{ margin-top:14px; }

/* ---------- CASE STUDY ---------- */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin:48px 0; }
.fact{ background:var(--surface-2); padding:26px 24px; }
.fact-label{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--indigo); margin-bottom:10px; }
.fact-value{ font-size:14.5px; color:rgba(255,255,255,.72); line-height:1.6; }
.prose{ max-width:720px; }
.prose h3{ font-family:'Oswald',sans-serif; font-size:26px; font-weight:600; margin:48px 0 16px; }
.prose p{ font-size:15px; color:rgba(255,255,255,.6); line-height:1.85; margin-bottom:16px; }
.prose p strong{ color:var(--white); font-weight:500; }
/* Results slot — swap .results-slot for .results-live when the A/B numbers land */
.results-slot{ border:1px dashed rgba(91,79,207,.6); background:rgba(91,79,207,.07); padding:30px; border-radius:4px; }
.results-slot p{ margin:0; color:rgba(255,255,255,.78); }
.results-live{ border-left:2px solid var(--indigo); background:rgba(91,79,207,.07); padding:30px; }
.results-live p{ margin:0 0 12px; color:rgba(255,255,255,.78); }
.results-live p:last-child{ margin-bottom:0; }
.results-metric{ font-family:'Oswald',sans-serif; font-size:44px; font-weight:700; color:var(--indigo); line-height:1; margin-bottom:10px; }

/* ---------- ENGAGEMENTS ---------- */
.shapes{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:52px; }
.shape{ background:var(--surface-2); padding:40px 34px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:background .3s; }
.shape:hover{ background:#222; }
.shape::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--indigo); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.shape:hover::before{ transform:scaleX(1); }
.shape-label{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--indigo); margin-bottom:18px; }
.shape h3{ font-family:'Oswald',sans-serif; font-size:23px; font-weight:600; margin-bottom:14px; line-height:1.2; }
.shape p{ font-size:14px; color:rgba(255,255,255,.52); line-height:1.8; flex:1; }
.shape-term{ margin-top:26px; padding-top:16px; border-top:1px solid var(--hair); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); }

/* ---------- CONTACT ---------- */
#contact{ background:var(--black); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.contact-left p{ font-size:15px; color:rgba(255,255,255,.5); line-height:1.8; margin-bottom:36px; }
.contact-info-list{ display:flex; flex-direction:column; gap:20px; }
.contact-info-item{ display:flex; align-items:center; gap:16px; }
.contact-info-icon{ width:40px; height:40px; background:rgba(91,79,207,.12); border:1px solid rgba(91,79,207,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--indigo); }
.contact-info-label{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:2px; }
.contact-info-value{ font-size:15px; color:var(--white); }
.contact-socials{ display:flex; gap:12px; margin-top:36px; }
.social-link{ width:40px; height:40px; border:1px solid rgba(255,255,255,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); text-decoration:none; transition:all .2s; }
.social-link:hover{ border-color:var(--indigo); color:var(--white); background:rgba(91,79,207,.12); }
.form-group{ margin-bottom:16px; }
.form-label{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:8px; }
.form-input,.form-textarea{ width:100%; background:var(--surface); border:1px solid var(--hair); color:var(--white); padding:14px 16px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:300; outline:none; transition:border-color .2s; border-radius:4px; }
.form-input:focus,.form-textarea:focus{ border-color:var(--indigo); }
.form-input::placeholder,.form-textarea::placeholder{ color:rgba(255,255,255,.2); }
.form-textarea{ resize:vertical; min-height:130px; }
.form-submit{ width:100%; padding:15px; background:var(--indigo); color:var(--white); border:none; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500; cursor:pointer; transition:all .2s; border-radius:4px; margin-top:8px; }
.form-submit:hover{ background:var(--indigo-lt); transform:translateY(-1px); }
.form-submit:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.form-success{ display:none; text-align:center; padding:48px 24px; }
.form-success-icon{ font-size:32px; margin-bottom:16px; color:var(--indigo); }
.form-success-title{ font-family:'Oswald',sans-serif; font-size:24px; margin-bottom:8px; }
.form-success-sub{ font-size:14px; color:rgba(255,255,255,.5); }
.form-error{ display:none; font-size:12px; color:#e07070; margin-top:10px; }

/* ---------- FOOTER ---------- */
footer{ background:var(--surface); border-top:1px solid rgba(255,255,255,.06); padding:48px 48px 32px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.06); margin:0 auto 24px; max-width:1180px; }
.footer-logo-wrap img{ height:50px; margin-bottom:14px; }
.footer-tagline{ font-size:13px; color:rgba(255,255,255,.35); max-width:260px; line-height:1.6; }
.footer-col h4{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--indigo); margin-bottom:16px; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13px; color:rgba(255,255,255,.45); text-decoration:none; }
.footer-col a:hover{ color:var(--white); }
.footer-col p{ font-size:13px; color:rgba(255,255,255,.45); line-height:1.8; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; max-width:1180px; margin:0 auto; }
.footer-copy{ font-size:12px; color:rgba(255,255,255,.2); }

:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .matrix-grid{ grid-template-columns:1fr; gap:40px; }
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .step{ grid-template-columns:70px 1fr; gap:20px; }
  .step-body{ grid-column:1/-1; }
}
@media (max-width:900px){
  section{ padding:72px 24px; }
  nav#main-nav{ padding:0 24px; }
  .nav-links{ display:none; }
  .nav-hamburger{ display:flex; }
  .work-grid,.services-grid,.shapes,.facts{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:48px; }
  .about-img-accent{ display:none; }
  footer{ padding:40px 24px 24px; }
  .footer-top{ flex-direction:column; }
  .strip{ padding:60px 24px; }
  .hero-marks{ grid-template-columns:repeat(2,auto); gap:14px 22px; text-align:center; }
  #matrix{ padding:72px 24px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-location,.hero-title,.hero-sub,.hero-ctas,.hero-marks{ opacity:1; }
}

/* ==========================================================================
   REV 3 — agency architecture: doctrine marquee, labeled capabilities,
   named bundle, service pages
   ========================================================================== */

/* ---------- DOCTRINE MARQUEE ---------- */
.doctrine{ background:var(--black); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:0; overflow:hidden; }
.doctrine-track{ display:flex; width:max-content; animation:marquee 38s linear infinite; }
.doctrine{ white-space:nowrap; }
.doctrine-track span{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:clamp(26px,3.6vw,44px);
  text-transform:lowercase; letter-spacing:-.01em; color:rgba(255,255,255,.16);
  padding:22px 0; white-space:nowrap;
}
.doctrine-track span em{ font-style:normal; color:var(--indigo); opacity:.85; }
.doctrine-track span i{ font-style:normal; color:rgba(91,79,207,.4); padding:0 22px; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .doctrine-track{ animation:none; } }

/* ---------- CAPABILITY CARDS (labeled + linked) ---------- */
a.service-card,
a.service-card:link,
a.service-card:visited,
a.paired-card,
a.paired-card:link,
a.paired-card:visited{ text-decoration:none; color:var(--white); display:block; }
a.service-card *,
a.paired-card *{ text-decoration:none; }
a.service-card .service-title{ color:var(--white); }
a.service-card .service-desc{ color:rgba(255,255,255,.52); }
a.service-card .cap-label,
a.service-card .service-num{ color:var(--indigo); }
.cap-label{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--indigo); margin-bottom:14px; }
.service-card .service-num{ position:absolute; top:34px; right:30px; margin:0; opacity:.4; }
.cap-more{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); transition:color .2s,gap .2s; }
.service-card:hover .cap-more{ color:var(--indigo); gap:13px; }

/* ---------- NAMED BUNDLE ---------- */
.bundle{ background:var(--deep); border-top:1px solid rgba(91,79,207,.22); border-bottom:1px solid rgba(91,79,207,.22); position:relative; overflow:hidden; }
.bundle::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 22% 0%, rgba(91,79,207,.26), transparent 62%); }
.bundle .inner{ position:relative; z-index:1; }
.bundle-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.bundle-badge{ display:inline-block; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--lavender); border:1px solid rgba(91,79,207,.5); background:rgba(91,79,207,.16); padding:7px 16px; border-radius:100px; margin-bottom:22px; }
.bundle h2{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(34px,4.6vw,56px); line-height:1; margin-bottom:20px; }
.bundle p{ font-size:16px; color:rgba(255,255,255,.6); line-height:1.8; max-width:520px; }
.bundle-list{ list-style:none; display:grid; gap:1px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07); }
.bundle-list li{ background:rgba(13,11,26,.86); padding:17px 22px; font-size:14.5px; color:rgba(255,255,255,.72); display:flex; align-items:center; gap:14px; }
.bundle-list li b{ font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:10px; letter-spacing:.14em; color:var(--indigo); min-width:26px; }
.bundle-note{ font-size:13px; color:rgba(255,255,255,.38); margin-top:22px; line-height:1.7; max-width:520px; }

/* ---------- SERVICE PAGES ---------- */
.svc-hero{ max-width:780px; }
.svc-hero .section-title{ margin-bottom:22px; }
.svc-lede{ font-size:clamp(17px,2vw,20px); color:rgba(255,255,255,.66); line-height:1.7; max-width:640px; font-weight:300; }
.svc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); margin-top:clamp(48px,6vw,76px); align-items:start; }
.svc-block h3{ font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--indigo); margin-bottom:22px; }
.deliverables{ list-style:none; display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); }
.deliverables li{ background:var(--surface-2); padding:15px 20px; font-size:14.5px; color:rgba(255,255,255,.7); }
.howlist{ list-style:none; display:flex; flex-direction:column; gap:26px; }
.howlist li{ padding-left:22px; border-left:2px solid rgba(91,79,207,.45); }
.howlist strong{ display:block; font-family:'Oswald',sans-serif; font-size:18px; font-weight:600; color:var(--white); margin-bottom:8px; letter-spacing:.01em; }
.howlist span{ font-size:14.5px; color:rgba(255,255,255,.55); line-height:1.8; }
.paired{ margin-top:clamp(56px,7vw,88px); padding-top:40px; border-top:1px solid var(--hair); }
.paired h3{ font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--indigo); margin-bottom:26px; }
.paired-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.paired-card{ background:var(--surface-2); padding:26px 24px; text-decoration:none; color:inherit; transition:background .3s; position:relative; overflow:hidden; }
.paired-card:hover{ background:#222; }
.paired-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--indigo); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.paired-card:hover::before{ transform:scaleX(1); }
.paired-card .cap-label{ margin-bottom:10px; }
.paired-card h4{ font-family:'Oswald',sans-serif; font-size:18px; font-weight:600; line-height:1.2; }

/* ---------- SERVICES INDEX ---------- */
.svc-index{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin-top:52px; }

@media (max-width:900px){
  .bundle-grid,.svc-cols,.svc-index{ grid-template-columns:1fr; }
  .paired-grid{ grid-template-columns:1fr; }
  .service-card .service-num{ top:26px; right:24px; }
}