/* ==========================================================================
   THIRD & KO — Stylesheet
   -----------------------------------------------------------------------
   HOW TO RESTYLE:
   - All colors live in the :root variables below. Change them there and
     the whole site updates.
   - Fonts are loaded via @import above.
   ========================================================================== */

:root{
  /* ---- Brand palette (from brand board) ---- */
  --cotton:      #EDEBDD;
  --cotton-dim:  #E0DCC8;
  --cherry:      #810100;
  --cherry-soft: #A31C1A;
  --maroon:      #630000;
  --noir:        #1B1717;
  --white:       #FFFFFF;

  /* ---- Semantic aliases ---- */
  --bg:          var(--cotton);
  --bg-dark:     var(--noir);
  --ink:         var(--noir);
  --ink-invert:  var(--cotton);
  --accent:      var(--cherry);
  --accent-2:    var(--maroon);

  /* ---- Type ---- */
  --f-display: "Unbounded", sans-serif;
  --f-body:    "Space Grotesk", sans-serif;
  --f-mono:    "JetBrains Mono", monospace;

  /* ---- Scale / rhythm ---- */
  --edge: clamp(20px, 5vw, 64px);
  --radius: 26px;
  --radius-sm: 14px;
  --stroke: 2.5px;
  --ease: cubic-bezier(.16,.84,.32,1);
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
section{ position:relative; }

::selection{ background: var(--cherry); color: var(--cotton); }

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

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.wrap{ max-width: 1360px; margin: 0 auto; padding: 0 var(--edge); }
.dark{ background: var(--bg-dark); color: var(--ink-invert); }
.eyebrow{
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  color: var(--accent);
}
.dark .eyebrow{ color: var(--cotton-dim); }
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background: currentColor;
  display:inline-block;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom: clamp(32px,6vw,64px);
  flex-wrap:wrap;
}
.section-head h2{
  font-family: var(--f-display);
  font-weight:700;
  line-height: .96;
  font-size: clamp(34px, 5.4vw, 76px);
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.section-num{
  font-family: var(--f-mono);
  font-size: 13px;
  opacity:.55;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding: 16px 26px;
  border-radius: 999px;
  border: var(--stroke) solid var(--ink);
  background: transparent;
  transition: transform .45s var(--ease), background .3s ease, color .3s ease;
  white-space:nowrap;
}
.btn svg{ transition: transform .45s var(--ease); width:14px; height:14px; }
.btn:hover{ background: var(--ink); color: var(--bg); transform: translateY(-3px); }
.btn:hover svg{ transform: translate(3px,-3px); }
.btn.solid{ background: var(--accent); color: var(--cotton); border-color: var(--accent); }
.btn.solid:hover{ background: var(--maroon); border-color: var(--maroon); transform: translateY(-3px); }
.dark .btn{ border-color: var(--cotton); }
.dark .btn:hover{ background: var(--cotton); color: var(--noir); }

.tag{
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  display:inline-block;
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }
.reveal-stagger > *{ opacity:0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay: .02s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay: .09s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay: .16s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay: .23s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay: .30s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay: .37s; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 130;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--edge);
  mix-blend-mode: normal;
  transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom: 1.5px solid transparent;
}
.nav.scrolled{
  background: rgba(237,235,221,.82);
  backdrop-filter: blur(10px);
  border-color: rgba(27,23,23,.1);
  padding-top:12px; padding-bottom:12px;
}
.nav-logo{
  font-family: var(--f-display);
  font-weight:700;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  display:flex; align-items:center; gap:8px;
}
.nav-logo .dot{ width:9px; height:9px; border-radius:50%; background: var(--accent); display:inline-block; }
.nav-links{
  display:flex; gap:30px;
  font-family: var(--f-mono);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.nav-links a{
  position:relative; padding: 4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background: var(--accent); transition: width .35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-cta .btn{ padding: 11px 20px; font-size:11.5px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;
  position:relative; z-index:120;
}
.nav-toggle span{ width:24px; height:2.5px; background: var(--ink); transition: transform .35s var(--ease), opacity .3s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; background: var(--noir); color: var(--cotton);
  z-index:110; display:flex; flex-direction:column; justify-content:center; padding: 0 var(--edge);
  transform: translateY(-100%); transition: transform .55s var(--ease);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu ul{ display:flex; flex-direction:column; gap:14px; }
.mobile-menu a{
  font-family: var(--f-display); font-size: clamp(30px,9vw,54px); text-transform:uppercase; font-weight:600;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 130px var(--edge) 60px;
  position:relative;
  overflow:hidden;
}
.hero-bg-shape{
  position:absolute; border-radius:50%;
  filter: blur(70px); opacity:.5; z-index:0; pointer-events:none;
}
.hero-bg-shape.a{ width:46vw; height:46vw; background: var(--cherry); top:-14%; right:-10%; opacity:.28; }
.hero-bg-shape.b{ width:30vw; height:30vw; background: var(--maroon); bottom:-8%; left:-6%; opacity:.22; }
.hero-inner{ position:relative; z-index:2; min-width:0; width:100%; }
.hero-eyebrow-row{
  display:flex; align-items:center; justify-content:space-between; margin-bottom: 26px; flex-wrap:wrap; gap:12px;
}
.hero h1{
  font-family: var(--f-display);
  font-weight:700;
  text-transform:uppercase;
  font-size: clamp(40px, 9.4vw, 128px);
  line-height: .92;
  letter-spacing:-.015em;
  max-width: min(18ch, 100%);
  overflow-wrap: break-word;
}
.hero h1 .accent{ color: var(--accent); }
.hero h1 .outline{
  -webkit-text-stroke: 1.6px var(--ink);
  color: transparent;
}
.hero-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top:36px; flex-wrap:wrap;
}
.hero-sub{ max-width: 420px; font-size: 17px; line-height:1.6; opacity:.85; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.hero-badge{
  width: 128px; height:128px; border-radius:50%;
  border: var(--stroke) solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  position:relative; flex-shrink:0;
  animation: spin 16s linear infinite;
}
.hero-badge svg{ position:absolute; width:100%; height:100%; }
.hero-badge span{
  font-family: var(--f-display); font-size: 10px; text-transform:uppercase; letter-spacing:.1em;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  animation: unspin 16s linear infinite;
}
.hero-badge .center-dot{ width:44px; height:44px; border-radius:50%; background:var(--accent); animation:none; position:static; }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes unspin{ to{ transform: rotate(-360deg); } }

/* Marquee ticker */
.marquee{
  margin-top: 56px;
  border-top: var(--stroke) solid var(--ink);
  border-bottom: var(--stroke) solid var(--ink);
  padding: 16px 0;
  overflow:hidden;
  white-space:nowrap;
}
.marquee-track{ display:inline-flex; gap:40px; animation: scrollx 26s linear infinite; }
.marquee span{
  font-family: var(--f-display);
  font-size: clamp(16px,2.4vw,26px);
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:40px;
}
.marquee span i{ color: var(--accent); font-style:normal; }
@keyframes scrollx{ from{ transform:translateX(0); } to{ transform: translateX(-50%); } }

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */
.toc{ padding: 110px var(--edge); }
.toc-list{ border-top: var(--stroke) solid var(--ink); }
.toc-item{
  display:grid;
  grid-template-columns: 70px 1fr auto auto;
  align-items:center;
  gap: 24px;
  padding: 22px 4px;
  border-bottom: var(--stroke) solid var(--ink);
  position:relative;
  overflow:hidden;
  transition: color .4s ease;
}
.toc-item::before{
  content:"";
  position:absolute; inset:0; left:-100%;
  background: var(--accent);
  transition: left .5s var(--ease);
  z-index:0;
}
.toc-item:hover::before{ left:0; }
.toc-item:hover{ color: var(--cotton); }
.toc-item > *{ position:relative; z-index:1; }
.toc-num{ font-family: var(--f-mono); font-size:14px; opacity:.6; }
.toc-name{
  font-family: var(--f-display); font-weight:600; text-transform:uppercase;
  font-size: clamp(20px, 3.6vw, 40px);
}
.toc-desc{ font-family: var(--f-mono); font-size:12px; opacity:.6; max-width:280px; display:none; }
.toc-arrow{ width:20px; height:20px; flex-shrink:0; transition: transform .4s var(--ease); }
.toc-item:hover .toc-arrow{ transform: rotate(45deg); }
@media(min-width:820px){ .toc-desc{ display:block; } }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ padding: 40px var(--edge) 120px; }
.team-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap: 28px;
  margin-top: 48px;
}
.team-card{
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--white);
}
.team-photo{
  aspect-ratio: 4/5;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(27,23,23,.06) 18px 19px),
    var(--cotton-dim);
  border-bottom: var(--stroke) solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.team-photo img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.team-photo .ph-label{
  font-family: var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  border: 1.5px dashed var(--ink); border-radius:999px; padding:10px 16px; opacity:.55; background: var(--cotton);
}
.team-body{ padding: 26px; }
.team-name{ font-family: var(--f-display); font-size: 24px; text-transform:uppercase; font-weight:600; }
.team-role{ font-family: var(--f-mono); font-size:12px; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; display:block; }
.team-bio{ margin-top:14px; font-size:14.5px; line-height:1.6; opacity:.8; }
@media(max-width:760px){ .team-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process{ padding: 100px var(--edge); }
.process-list{ margin-top: 20px; }
.process-item{
  display:grid; grid-template-columns: 100px 1fr;
  gap: 28px; padding: 34px 0;
  border-top: 1.5px solid rgba(237,235,221,.18);
  align-items:start;
}
.process-item:last-child{ border-bottom: 1.5px solid rgba(237,235,221,.18); }
.process-num{ font-family: var(--f-mono); font-size:14px; opacity:.5; padding-top:6px; }
.process-main{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.process-title{ font-family: var(--f-display); font-size: clamp(26px,4.4vw,48px); text-transform:uppercase; font-weight:600; }
.process-desc{ max-width: 420px; font-size:15px; line-height:1.65; opacity:.72; padding-top:8px; }
.process-item:hover .process-title{ color: var(--cherry-soft); transition: color .35s ease; }

/* ==========================================================================
   SERVICES / QUALIFICATIONS — card system (signature element)
   ========================================================================== */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
  margin-top: 30px;
}
.card{
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  min-height: 240px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ transform: translateY(-8px) rotate(-.6deg); }
.card .card-icon{ font-size: 30px; }
.card h3{ font-family: var(--f-display); font-size: 20px; text-transform:uppercase; margin-top:18px; font-weight:600; }
.card p{ font-size: 14px; line-height:1.6; margin-top:12px; opacity:.85; }
.card .card-index{
  position:absolute; top:22px; right:24px; font-family: var(--f-mono); font-size:11px; opacity:.6;
}
.card.c-cotton{ background: var(--cotton); color: var(--ink); }
.card.c-cherry{ background: var(--cherry); color: var(--cotton); border-color: var(--noir); }
.card.c-maroon{ background: var(--maroon); color: var(--cotton); border-color: var(--noir); }
.card.c-noir{ background: var(--noir); color: var(--cotton); border-color: var(--noir); }
.card.c-white{ background: var(--white); color: var(--ink); }
@media(max-width:980px){ .cards-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:620px){ .cards-grid{ grid-template-columns: 1fr; } }

.services{ padding: 100px var(--edge); }

/* Qualifications */
.qual{ padding: 100px var(--edge); }
.qual-intro{ max-width: 640px; font-size: 18px; line-height:1.7; margin-top:18px; opacity:.85; }
.qual-list{ margin-top: 50px; display:flex; flex-direction:column; }
.qual-item{
  display:grid; grid-template-columns: 60px 220px 1fr;
  gap: 22px; align-items:center;
  padding: 26px 4px;
  border-top: 1.5px solid rgba(27,23,23,.15);
}
.qual-list .qual-item:last-child{ border-bottom: 1.5px solid rgba(27,23,23,.15); }
.qual-emoji{ font-size: 26px; }
.qual-title{ font-family: var(--f-display); font-size:19px; text-transform:uppercase; font-weight:600; }
.qual-text{ font-size:14.5px; line-height:1.6; opacity:.78; }
@media(max-width:760px){
  .qual-item{ grid-template-columns: 40px 1fr; }
  .qual-title{ grid-column: 2; }
  .qual-text{ grid-column: 1/-1; margin-top:6px; }
}

/* ==========================================================================
   OUR WORK — horizontal gallery + video reels
   ========================================================================== */
.work{ padding: 100px 0 100px; overflow:hidden; }
.work .wrap{ margin-bottom: 10px; }
.gallery-track{
  display:flex; gap:18px;
  padding: 6px var(--edge) 30px;
  overflow-x:auto;
  scroll-snap-type: x proximity;
  cursor: grab;
  -webkit-overflow-scrolling:touch;
}
.gallery-track:active{ cursor:grabbing; }
.gallery-track::-webkit-scrollbar{ height:6px; }
.gallery-track::-webkit-scrollbar-thumb{ background: var(--ink); border-radius:6px; }
.gallery-item{
  flex: 0 0 auto;
  width: 260px; aspect-ratio: 3/4;
  border-radius: var(--radius-sm);
  border: var(--stroke) solid var(--ink);
  scroll-snap-align:start;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(27,23,23,.05) 18px 19px),
    var(--cotton-dim);
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:14px;
}
.gallery-item:nth-child(3n+2){ margin-top: 34px; }
.gallery-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-item .g-num{
  font-family: var(--f-mono); font-size:11px; background: var(--cotton); border:1.5px solid var(--ink);
  border-radius:999px; padding:5px 10px; position:relative; z-index:2;
}
.gallery-hint{ display:flex; align-items:center; gap:10px; font-family: var(--f-mono); font-size:12px; opacity:.55; padding: 0 var(--edge); }

.videos-head{ margin-top: 90px; }
.video-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; margin-top:30px; }
.video-slot{
  border-radius: var(--radius);
  border: var(--stroke) solid var(--ink);
  overflow:hidden;
  background: var(--noir);
}
.video-slot .yt-embed{ aspect-ratio:16/9; width:100%; }
.video-slot .video-cap{
  padding: 16px 20px; display:flex; justify-content:space-between; align-items:center;
  font-family: var(--f-mono); font-size:12px; color: var(--cotton);
}
@media(max-width:860px){ .video-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   REELS — phone mockups
   ========================================================================== */
.reels{ padding: 110px var(--edge) 120px; }
.phone-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 50px;
}
.phone-grid > div{ transition: transform .5s var(--ease); }
.phone-grid > div:nth-child(odd){ transform: translateY(-22px); }
.phone-grid > div:hover{ transform: translateY(-34px); }
.phone-grid > div:nth-child(even):hover{ transform: translateY(-12px); }
.phone{
  position:relative;
  border-radius: 34px;
  border: 6px solid var(--noir);
  background: var(--noir);
  aspect-ratio: 9/19.5;
  overflow:hidden;
  transition: transform .5s var(--ease);
  box-shadow: 0 30px 60px -30px rgba(27,23,23,.5);
}
.phone .notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width: 42%; height: 22px; background: var(--noir); border-radius: 0 0 14px 14px; z-index:3;
}
.phone video, .phone .phone-ph{ width:100%; height:100%; object-fit:cover; }
.phone .phone-ph{
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
  background: linear-gradient(160deg, var(--maroon), var(--noir));
  color: var(--cotton); text-align:center; padding: 20px;
}
.phone .phone-ph span.n{ font-family: var(--f-mono); font-size:11px; opacity:.7; }
.phone .phone-ph span.t{ font-family: var(--f-display); font-size:14px; text-transform:uppercase; }
.phone-cap{
  text-align:center; font-family: var(--f-mono); font-size:11px; margin-top:14px; opacity:.6;
}
@media(max-width:900px){ .phone-grid{ grid-template-columns: repeat(2,1fr); row-gap:60px; } .phone-grid > div:nth-child(odd){ transform:none; } .phone-grid > div:hover{ transform: translateY(-14px); } }

/* ==========================================================================
   ANALYTICS
   ========================================================================== */
.analytics{ padding: 110px var(--edge) 120px; }
.stat-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; }
.stat-card{
  border: var(--stroke) solid var(--cotton);
  border-radius: var(--radius);
  padding: 30px;
}
.stat-num{
  font-family: var(--f-display); font-weight:700; font-size: clamp(38px,5.4vw,64px);
  letter-spacing:-.02em; display:flex; align-items:baseline; gap:4px;
}
.stat-label{ font-family: var(--f-mono); font-size:12px; text-transform:uppercase; opacity:.65; margin-top:10px; letter-spacing:.05em; }
.stat-note{ font-size:13px; opacity:.55; margin-top:6px; }

.channel-block{ margin-top: 60px; }
.channel-row{ display:flex; flex-direction:column; gap: 26px; margin-top: 30px; }
.channel{ display:grid; grid-template-columns: 140px 1fr 90px; align-items:center; gap: 20px; }
.channel-name{ font-family: var(--f-display); text-transform:uppercase; font-size:16px; }
.channel-bar-track{ height: 16px; border-radius:999px; border: 1.5px solid var(--cotton); overflow:hidden; }
.channel-bar-fill{ height:100%; width:0%; border-radius:999px; transition: width 1.4s var(--ease); }
.channel-bar-fill.tiktok{ background: var(--cherry-soft); }
.channel-bar-fill.youtube{ background: var(--maroon); }
.channel-pct{ font-family: var(--f-mono); font-size:13px; text-align:right; opacity:.8; }
@media(max-width:760px){ .stat-row{ grid-template-columns:1fr; } .channel{ grid-template-columns: 90px 1fr 60px; } }

/* ==========================================================================
   PACKAGES
   ========================================================================== */
.packages{ padding: 100px var(--edge) 120px; }
.pkg-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 40px; align-items:stretch; }
.pkg{
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  padding: 34px 28px;
  display:flex; flex-direction:column;
  background: var(--white);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  position:relative;
}
.pkg:hover{ transform: translateY(-10px); box-shadow: 0 26px 50px -26px rgba(27,23,23,.35); }
.pkg.featured{ background: var(--noir); color: var(--cotton); transform: translateY(-14px); }
.pkg.featured:hover{ transform: translateY(-22px); }
.pkg-tag{ align-self:flex-start; margin-bottom: 18px; }
.pkg-name{ font-family: var(--f-display); font-size: 26px; text-transform:uppercase; font-weight:700; }
.pkg-price{ font-family: var(--f-mono); font-size:14px; margin-top:8px; opacity:.7; }
.pkg-desc{ font-size:14px; margin-top:14px; opacity:.75; line-height:1.6; }
.pkg-list{ margin-top: 24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.pkg-list li{ display:flex; gap:10px; font-size:13.5px; align-items:flex-start; }
.pkg-list li::before{ content:"→"; color: var(--accent); flex-shrink:0; }
.pkg .btn{ margin-top: 26px; justify-content:center; }
@media(max-width:980px){ .pkg-grid{ grid-template-columns:1fr; } .pkg.featured{ transform:none; } .pkg.featured:hover{ transform: translateY(-10px); } }

/* ==========================================================================
   MOCKUPS
   ========================================================================== */
.mockups{ padding: 100px var(--edge) 120px; }
.mock-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; }
.mock-btn{
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  padding: 40px 28px;
  display:flex; flex-direction:column; gap: 30px; justify-content:space-between;
  min-height: 220px;
  position:relative; overflow:hidden;
  transition: transform .45s var(--ease);
}
.mock-btn:hover{ transform: translateY(-8px); }
.mock-btn::after{
  content:""; position:absolute; inset:0; background: var(--cherry);
  transform: translateY(100%); transition: transform .45s var(--ease); z-index:0;
}
.mock-btn:hover::after{ transform: translateY(0); }
.mock-btn > *{ position:relative; z-index:1; transition: color .4s ease; }
.mock-btn:hover .mock-name, .mock-btn:hover .mock-idx, .mock-btn:hover .mock-arrow{ color: var(--cotton); }
.mock-idx{ font-family: var(--f-mono); font-size:12px; opacity:.6; }
.mock-name{ font-family: var(--f-display); font-size: 26px; text-transform:uppercase; font-weight:600; }
.mock-arrow{ width:30px; height:30px; align-self:flex-end; transition: transform .45s var(--ease); }
.mock-btn:hover .mock-arrow{ transform: rotate(45deg) translate(2px,-2px); }
@media(max-width:860px){ .mock-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ padding: 120px var(--edge) 100px; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 40px; }
.contact-form{ display:flex; flex-direction:column; gap: 20px; }
.contact-form [class^="hb-p-"]{ width:100%; min-width:100%; min-height:560px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family: var(--f-mono); font-size:11.5px; text-transform:uppercase; opacity:.6; letter-spacing:.06em; }
.field input, .field textarea{
  background: transparent; border:none; border-bottom: 1.5px solid rgba(237,235,221,.35);
  color: inherit; font-family: var(--f-body); font-size:16px; padding: 10px 2px;
  transition: border-color .3s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--cherry-soft); }
.field textarea{ resize: vertical; min-height:100px; }
.contact-form .btn{ align-self:flex-start; margin-top: 8px; }
.contact-info{ display:flex; flex-direction:column; justify-content:center; }
.contact-line{ font-family: var(--f-display); font-size: clamp(24px,3.6vw,36px); text-transform:uppercase; line-height:1.25; }
.contact-line a{ border-bottom: 2px solid var(--cherry-soft); transition: opacity .3s ease; }
.contact-line a:hover{ opacity:.7; }
.social-row{ display:flex; gap: 16px; margin-top: 30px; flex-wrap:wrap; }
.social-row a{ font-family: var(--f-mono); font-size:12.5px; text-transform:uppercase; border:1.5px solid rgba(237,235,221,.4); padding:9px 16px; border-radius:999px; transition: background .3s ease, color .3s ease; }
.social-row a:hover{ background: var(--cotton); color: var(--noir); }
@media(max-width:800px){ .contact-grid{ grid-template-columns:1fr; gap:50px; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ padding: 40px var(--edge) 34px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.footer-logo{ font-family: var(--f-display); font-size:16px; text-transform:uppercase; }
.footer-meta{ font-family: var(--f-mono); font-size:11.5px; opacity:.55; }
.to-top{ font-family: var(--f-mono); font-size:11.5px; text-transform:uppercase; border:1.5px solid var(--cotton); padding:9px 16px; border-radius:999px; }

/* ==========================================================================
   RESPONSIVE NAV / GLOBAL SMALL SCREEN
   ========================================================================== */
@media(max-width:900px){
  .nav-links, .nav-cta .btn.desktop-only{ display:none; }
  .nav-toggle{ display:flex; }
  .team-grid, .video-grid{ gap:18px; }
}