/* =============================================================================
   Ubong Udofia, portfolio
   Dark, editorial, single page. No frameworks, no build step.
   Breakpoints: 390 phone, 768 tablet, 1440 desktop.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------- */
:root{
  --bg:#0b0c0e;
  --bg-alt:#0f1114;
  --surface:#14161b;
  --surface-2:#191c23;
  --line:#262a33;
  --line-soft:#1d2029;

  --text:#edeef1;
  --muted:#9aa2ae;
  --muted-2:#767d89;

  --accent:#ff8a3d;
  --accent-soft:#ffb27a;
  --accent-ink:#1a0d02;

  --pod:#0a1416;
  --pod-line:#17323a;
  --pod-accent:#4fd1c5;

  --ok:#5ddc9a;

  --r-sm:8px;
  --r:14px;
  --r-lg:22px;

  --wrap:1200px;
  --pad:clamp(20px,5vw,40px);

  --f-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --shadow:0 20px 50px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ---------- reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display); line-height:1.12; margin:0; letter-spacing:-.02em; font-weight:600}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}
/* must beat the component display rules below, or hidden blocks still show */
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-ink);
  padding:12px 18px; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{left:0}

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

/* ---------- type helpers ------------------------------------------------- */
.h2{font-size:clamp(1.55rem,3.4vw,2.5rem); max-width:22ch; margin-bottom:.7em}
.h3{font-size:clamp(1.2rem,2.2vw,1.6rem); margin:64px 0 22px}
.h3.anchored{
  padding-top:14px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:12px;
}
.h3.anchored::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--accent); flex:none;
}
.kicker{
  font-family:var(--f-display); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 18px; font-weight:600;
}
.section-intro{color:var(--muted); max-width:62ch; margin:-8px 0 26px}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.82rem; color:var(--muted); letter-spacing:.02em; margin:0 0 22px;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 4px rgba(255,138,61,.16)}
.dot--live{background:var(--ok); box-shadow:0 0 0 4px rgba(93,220,154,.16)}
.grad{
  background:linear-gradient(100deg,var(--accent) 10%,var(--accent-soft) 60%,#ffe0c2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tag{
  display:inline-block; font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; margin:0 0 16px;
}
.tag--hot{color:var(--accent); border-color:rgba(255,138,61,.4); background:rgba(255,138,61,.07)}
.note{font-size:.85rem; color:var(--muted-2); margin:12px 0 0}
.divider{height:1px; background:var(--line-soft); margin:26px 0}

/* ---------- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-display); font-weight:600; font-size:.95rem;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--accent{background:var(--accent); color:var(--accent-ink)}
.btn--accent:hover{background:var(--accent-soft)}
.btn--ghost{border-color:var(--line); color:var(--text); background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn--sm{padding:9px 16px; font-size:.87rem}
.btn--block{display:flex; width:100%}
.btn[aria-disabled="true"]{
  cursor:not-allowed; background:transparent; color:var(--muted);
  border:1px dashed var(--line); transform:none;
}
.btn__ext{font-size:.8em; opacity:.8}

/* ---------- nav ---------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(11,12,14,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s ease, background .25s ease;
}
.nav.is-stuck{border-bottom-color:var(--line-soft); background:rgba(11,12,14,.92)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:20px; height:68px}
.brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none; font-family:var(--f-display); font-weight:600}
.brand__mark{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:linear-gradient(140deg,var(--accent),#ff5f3d); color:var(--accent-ink);
  font-size:.82rem; letter-spacing:.02em; flex:none;
}
.brand__text{font-size:.98rem}
.nav__links{display:flex; align-items:center; gap:6px}
.nav__links a{
  text-decoration:none; font-size:.93rem; color:var(--muted);
  padding:9px 13px; border-radius:999px; transition:color .2s ease, background .2s ease;
}
.nav__links a:not(.btn):hover{color:var(--text); background:rgba(255,255,255,.05)}
/* beats ".nav__links a", otherwise the CTA renders muted grey on orange */
.nav__links a.btn--accent{color:var(--accent-ink)}
.nav__links a.btn--ghost{color:var(--text)}
.nav__links a.is-active:not(.btn){color:var(--text)}
.nav__links a.is-active:not(.btn)::after{
  content:""; display:block; height:2px; margin-top:5px; border-radius:2px; background:var(--accent);
}
.nav__toggle{
  display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:12px;
  background:transparent; cursor:pointer; padding:0;
  place-items:center; align-content:center;   /* stop the rows stretching to 13px */
}
.nav__toggle span{display:block; width:17px; height:2px; background:var(--text); margin:3px auto; border-radius:2px; transition:.25s}
/* rows are 8px apart inside the grid, so the bars must travel 8px to meet */
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- hero --------------------------------------------------------- */
.hero{position:relative; padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px); overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-30% 40% 40% -20%; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,138,61,.14),transparent 62%);
  filter:blur(10px);
}
.hero__inner{position:relative; display:grid; grid-template-columns:1.35fr .85fr; gap:clamp(28px,5vw,64px); align-items:center}
.hero__title{font-size:clamp(2rem,5.4vw,4rem); letter-spacing:-.03em; margin-bottom:24px}
.hero__sub{color:var(--muted); font-size:clamp(1rem,1.4vw,1.12rem); max-width:56ch; margin-bottom:30px}
.hero__sub strong{color:var(--text); font-weight:600}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px}

.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; border-top:1px solid var(--line-soft); padding-top:24px}
.stats li{display:flex; flex-direction:column; gap:2px}
.stats b{font-family:var(--f-display); font-size:clamp(1.4rem,2.6vw,2rem); color:var(--accent); line-height:1}
.stats span{font-size:.78rem; color:var(--muted); line-height:1.35}

.hero__photo{margin:0}
.hero__photo figcaption{margin-top:12px; font-size:.82rem; color:var(--muted-2); text-align:center}

/* ---------- media slots (never broken, never empty-looking) -------------- */
.media{
  position:relative; width:100%; border-radius:var(--r);
  background:
    linear-gradient(160deg,rgba(255,138,61,.07),transparent 55%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 10px,transparent 10px 20px),
    var(--surface);
  border:1px dashed var(--line);
  overflow:hidden; display:grid; place-items:center;
}
.media::after{
  content:attr(data-label);
  font-family:var(--f-display); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); text-align:center; padding:10px 14px; line-height:1.5;
}
.media::before{
  content:"image slot"; position:absolute; top:10px; left:10px;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
  border:1px solid var(--line); border-radius:999px; padding:2px 8px; opacity:.7;
}
.media.is-filled{border-style:solid; border-color:var(--line); background:var(--surface); display:block}
.media.is-filled::after,.media.is-filled::before{content:none}
.media img{width:100%; height:100%; object-fit:cover}

.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--post{aspect-ratio:1/1; border-radius:var(--r) var(--r) 0 0; border-bottom:0}
.media--portrait{aspect-ratio:4/5; border-radius:var(--r-lg)}
.media--portrait.is-filled{box-shadow:var(--shadow)}
/* Overlaid phone shot. Kept narrow because a tall phone screenshot beside a wide
   desktop one will otherwise poke out of the top of the card, which clips it. */
.media--phone{
  position:absolute; right:14px; bottom:-14px; width:19%; min-width:70px;
  aspect-ratio:9/16; border-radius:12px; box-shadow:var(--shadow); background:var(--surface-2);
}
.media--phone::before{content:none}
.media--phone::after{font-size:.58rem; letter-spacing:.06em}
/* 23/40 is exactly 828x1440, the ratio the Aurel screens are captured at, so they
   sit in the frame with nothing cropped off the sides. */
.media--phone-screen{aspect-ratio:23/40; border-radius:20px; border:0; background:var(--surface-2)}
.media--phone-screen::before{content:none}

/* ---------- section shells ---------------------------------------------- */
.section{padding:clamp(56px,8vw,104px) 0; position:relative}
.section--alt{background:var(--bg-alt); border-block:1px solid var(--line-soft)}

/* ---------- about -------------------------------------------------------- */
.about{display:grid; grid-template-columns:1.55fr .8fr; gap:clamp(28px,5vw,60px); align-items:start}
.about__copy p{color:var(--muted); max-width:64ch}
.about__copy .h2{color:var(--text)}
.lead-out{color:var(--text) !important; font-weight:500; border-left:2px solid var(--accent); padding-left:18px}
.facts{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; position:sticky; top:96px;
}
.facts dl{margin:0 0 20px; display:grid; gap:16px}
.facts dt{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:2px}
.facts dd{margin:0; font-family:var(--f-display); font-size:.98rem}

/* ---------- stack -------------------------------------------------------- */
.stack{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.stack__col{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px}
.stack__title{margin:0 0 18px}
.stack__num{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid rgba(255,138,61,.3); padding-bottom:8px; display:block;
}
.tools{display:grid; gap:16px}
.tools li{display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; gap:2px 12px; align-items:start}
.tools b{font-family:var(--f-display); font-weight:600; font-size:.95rem}
.tool__use{grid-column:2; font-size:.82rem; color:var(--muted); line-height:1.45}
.logo{
  grid-row:span 2; align-self:start; display:grid; place-items:center; width:34px; height:34px;
  border-radius:10px; background:var(--surface-2); border:1px solid var(--line);
  font-family:var(--f-display); font-size:.72rem; font-weight:600; color:var(--accent-soft);
}
.logo::after{content:attr(data-logo)}

/* ---------- subnav ------------------------------------------------------- */
.subnav{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px}
.subnav a{
  text-decoration:none; font-size:.85rem; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  transition:.2s ease;
}
.subnav a:hover{color:var(--accent); border-color:var(--accent)}

/* ---------- grids and cards --------------------------------------------- */
.grid{display:grid; gap:22px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.card:hover{border-color:#333844; transform:translateY(-3px)}
.card__media{position:relative; padding:18px 18px 0}
.card--post .card__media{padding:0}
.card__media--split{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.card__body{padding:22px; display:flex; flex-direction:column; flex:1}
.card__title{font-size:1.18rem; margin-bottom:10px}
.card__desc{color:var(--muted); font-size:.94rem}
.card__role{font-size:.88rem; color:var(--muted); margin-bottom:14px}
.card__role b{color:var(--text); font-weight:600}
.card__links{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:6px}

.chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px}
.chips li{
  font-size:.76rem; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:4px 11px;
}

/* ---------- feature blocks ----------------------------------------------- */
.feature{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,3.5vw,40px);
}
.feature--mobile{
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(24px,4vw,48px); align-items:center;
  background:
    radial-gradient(circle at 88% 12%,rgba(255,138,61,.12),transparent 45%),
    var(--surface);
  border-color:#33261c;
}
.feature--campaign{margin-bottom:22px}
.feature__title{font-size:clamp(1.3rem,2.4vw,1.9rem); margin-bottom:12px}
.feature__desc{color:var(--muted); max-width:60ch}
.feature__head{max-width:76ch}
.outcome{
  font-family:var(--f-display); font-size:clamp(1rem,1.7vw,1.22rem); color:var(--text);
  border-left:3px solid var(--accent); padding:4px 0 4px 18px; margin:22px 0;
}

/* the brief, the problem, who needs it */
.mobile__story{
  grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  margin-top:34px; padding-top:30px; border-top:1px solid var(--line);
}
.story-card{background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.story-card h5{
  font-family:var(--f-display); font-size:.78rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); margin:0 0 12px;
}
.story-card p{color:var(--muted); font-size:.9rem; margin:0 0 10px}
.story-card p:last-child{margin-bottom:0}
.story-card__note{
  color:var(--text) !important; border-left:2px solid var(--accent);
  padding-left:14px; font-size:.86rem !important;
}

.feature--mobile .video-slot--reel{width:100%; max-width:300px; margin-inline:auto}
.phones{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px}
.phone{
  border:1px solid var(--line); border-radius:26px; padding:7px; background:var(--surface-2);
  box-shadow:var(--shadow); position:relative;
}
.phone--lift{transform:translateY(-14px)}
.phone::before{
  content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:34%; height:5px; border-radius:99px; background:#0b0c0e; z-index:2;
}
/* A real screenshot already has its own top of screen, so the decorative notch
   would sit on top of the app's own heading. Drop it once an image is in. */
.phone:has(.is-filled)::before{display:none}

/* ---------- pipeline ----------------------------------------------------- */
.pipeline{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px;
  margin:30px 0; counter-reset:step;
}
.pipeline li{
  position:relative; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 14px 14px 16px; font-size:.84rem; color:var(--muted);
  line-height:1.4; display:flex; gap:10px; align-items:flex-start;
}
.pipeline__n{
  font-family:var(--f-display); font-size:.72rem; font-weight:700; color:var(--accent-ink);
  background:var(--accent); border-radius:6px; min-width:20px; height:20px;
  display:grid; place-items:center; flex:none; margin-top:1px;
}
.feature__proof{display:grid; gap:20px}
.shot-wide{margin:0}
/* matches automation-canvas.png at 2393x1055, so the workflow is not cropped.
   Replacing that file with a different shape? Update this ratio too. */
.media--canvas{aspect-ratio:2393/1055}
.media--canvas.is-filled{cursor:zoom-in}
.shots{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.shots--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.media[data-zoom].is-filled{cursor:zoom-in}
.media.is-openable{cursor:pointer; transition:border-color .2s ease, transform .2s ease}
.media.is-openable:hover{border-color:var(--pod-accent); transform:translateY(-2px)}
.shots figure{margin:0}
.shots figcaption{font-size:.8rem; color:var(--muted-2); margin-top:9px}

/* ---------- video slots -------------------------------------------------- */
.video-slot{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r);
  overflow:hidden; background:#08090b; border:1px dashed var(--line);
  display:grid; place-items:center; text-align:center;
}
.video-slot--wide{aspect-ratio:16/9}
.video-slot--tight{aspect-ratio:16/10}
.video-slot.is-ready{border-style:solid; cursor:pointer}
.video-slot iframe,.video-slot video{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.video-slot__pending{padding:22px; color:var(--muted-2)}
.video-slot__pending b{
  display:block; font-family:var(--f-display); font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.video-slot__pending span{font-size:.8rem}
.video-facade{
  position:absolute; inset:0; width:100%; border:0; padding:0; cursor:pointer;
  background:linear-gradient(150deg,#1a1d24,#0a0b0d); display:grid; place-items:center;
}
.video-facade img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6}
.video-facade__play{
  position:relative; z-index:2; width:62px; height:62px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); display:grid; place-items:center;
  font-size:1.1rem; box-shadow:0 10px 30px -8px rgba(255,138,61,.6); transition:transform .2s ease;
}
.video-facade:hover .video-facade__play{transform:scale(1.08)}
.video-facade__label{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding:14px 16px;
  font-size:.82rem; color:var(--text); text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
}

/* ---------- instagram reels ---------------------------------------------- */
/* Reels are vertical and Instagram's embed card is light, so it gets its own
   frame rather than fighting the dark page. */
.reels{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:26px}
.reel{display:flex; flex-direction:column; gap:12px}
.reel__cap{font-size:.85rem; color:var(--muted); line-height:1.5; margin:0}
.reel__cap b{display:block; font-family:var(--f-display); color:var(--text); font-size:.92rem; margin-bottom:3px}
.video-slot--reel{aspect-ratio:9/19; border-radius:var(--r); background:#0e0f12}
.video-slot--ig{background:#fff; border-style:solid; border-color:var(--line)}
.video-slot--ig iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- gallery ------------------------------------------------------ */
/* Masonry columns, not a square grid. These are ad creatives: cropping one to a
   square cuts the headline off, which is the whole point of the image. */
.feature--gallery{margin-top:22px}
.gallery{columns:2; column-gap:16px; margin-top:24px}
.gallery button{
  display:block; width:100%; padding:0; margin:0 0 16px;
  border:1px solid var(--line); background:var(--surface-2); border-radius:var(--r);
  overflow:hidden; cursor:pointer; position:relative; break-inside:avoid;
  transition:border-color .2s ease;
}
.gallery button:hover{border-color:var(--accent)}
.gallery button:hover img{transform:scale(1.03)}
.gallery img{width:100%; height:auto; display:block; transition:transform .3s ease}
.gallery .media{aspect-ratio:16/9; border-radius:var(--r); margin-bottom:16px; break-inside:avoid}

/* ---------- lightbox ----------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(5,6,8,.94);
  display:grid; place-items:center; padding:5vw; gap:14px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1100px,92vw); max-height:80vh; object-fit:contain; border-radius:var(--r)}
.lightbox__cap{color:var(--muted); font-size:.86rem; text-align:center; margin:0}
.lightbox__close{
  position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); font-size:1.5rem; cursor:pointer; line-height:1;
}

/* ---------- POD ---------------------------------------------------------- */
.section--pod{
  background:
    radial-gradient(ellipse at 15% 0%,rgba(79,209,197,.10),transparent 55%),
    var(--pod);
  border-block:1px solid var(--pod-line);
}
.section--pod .kicker,.section--pod .h3.anchored::before{color:var(--pod-accent)}
.section--pod .h3.anchored::before{background:var(--pod-accent)}
.section--pod .card{background:rgba(255,255,255,.02); border-color:var(--pod-line)}
.section--pod .card:hover{border-color:var(--pod-accent)}
.section--pod .chips li{background:rgba(255,255,255,.03); border-color:var(--pod-line)}
.section--pod .btn--ghost:hover{border-color:var(--pod-accent); color:var(--pod-accent)}
.section--pod .btn--accent{background:var(--pod-accent); color:#04211f}
.section--pod .media{border-color:var(--pod-line)}
.pod__name{margin-bottom:26px}
.vision{
  margin:0 0 20px; padding:0 0 0 clamp(18px,3vw,32px);
  border-left:3px solid var(--pod-accent);
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.15rem,2.6vw,1.85rem); line-height:1.4; letter-spacing:-.015em;
  max-width:34ch; color:var(--text);
}
.members{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.member{
  background:rgba(255,255,255,.02); border:1px solid var(--pod-line); border-radius:var(--r-lg);
  padding:18px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:border-color .2s ease, transform .2s ease;
}
.member:hover{border-color:var(--pod-accent); transform:translateY(-3px)}
.member__avatar{
  width:88px; height:88px; border-radius:50%; overflow:hidden; margin-bottom:12px;
  background:linear-gradient(150deg,#123b3f,#0d2427); border:1px solid var(--pod-line);
  display:grid; place-items:center; font-family:var(--f-display); font-size:1.5rem;
  color:var(--pod-accent); flex:none;
}
/* bias the crop upward: faces sit above centre in most portraits */
.member__avatar img{width:100%; height:100%; object-fit:cover; object-position:50% 22%}
.member__name{font-family:var(--f-display); font-size:1rem; font-weight:600}
.member__role{font-size:.78rem; color:var(--muted); min-height:1em}
.member__link{
  margin-top:10px; font-size:.82rem; color:var(--pod-accent); text-decoration:none;
  border-bottom:1px solid transparent; transition:.2s;
}
.member__link:hover{border-bottom-color:var(--pod-accent)}
.member__link[aria-disabled="true"]{color:var(--muted-2); cursor:not-allowed}
.member__link--here{color:var(--muted-2); font-style:italic}

/* ---------- certificate -------------------------------------------------- */
.cert{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  padding:clamp(24px,4vw,44px); display:grid; gap:20px; justify-items:center; text-align:center;
}
.cert__frame{
  width:min(760px,100%); aspect-ratio:1.414/1; border-radius:var(--r);
  border:1px solid var(--line); background:
    linear-gradient(150deg,rgba(255,138,61,.06),transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px),
    var(--bg-alt);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:26px; overflow:hidden;
}
.cert__frame img{width:100%; height:100%; object-fit:contain; border-radius:var(--r-sm)}
.cert__seal{
  width:64px; height:64px; border-radius:50%; border:2px dashed var(--accent);
  display:grid; place-items:center; color:var(--accent); font-family:var(--f-display); font-size:1.3rem;
}
.cert__msg{font-family:var(--f-display); font-size:1.05rem; margin:0}
.cert__sub{color:var(--muted); font-size:.9rem; margin:0; max-width:46ch}

/* ---------- hire --------------------------------------------------------- */
.hire{display:grid; grid-template-columns:1.4fr .85fr; gap:clamp(24px,4vw,44px); align-items:start}
.services{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.service{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px;
  transition:border-color .2s ease;
}
.service:hover{border-color:var(--accent)}
.service__num{
  font-family:var(--f-display); font-size:.74rem; letter-spacing:.16em; color:var(--accent);
  display:block; margin-bottom:12px;
}
.service h3{font-size:1.05rem; margin-bottom:8px}
.service p{color:var(--muted); font-size:.9rem; margin:0}

.contact{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; position:sticky; top:96px;
}
.availability{
  display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--text);
  border-bottom:1px solid var(--line-soft); padding-bottom:18px; margin-bottom:18px;
}
.availability .dot{margin-top:7px}
.contact__methods{display:grid; gap:10px}
.contact__row{
  display:flex; align-items:center; gap:13px; padding:13px 15px; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2);
  transition:border-color .2s ease, transform .2s ease;
}
.contact__row:hover{border-color:var(--accent); transform:translateX(3px)}
.contact__row[aria-disabled="true"]{border-style:dashed; opacity:.6; cursor:not-allowed; transform:none}
.contact__ico{
  width:36px; height:36px; border-radius:10px; background:rgba(255,138,61,.1);
  display:grid; place-items:center; flex:none; color:var(--accent);
}
.contact__ico svg{width:18px; height:18px}
.contact__t{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.contact__t b{font-family:var(--f-display); font-size:.9rem; font-weight:600}
.contact__t span{font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.form{margin-top:24px; display:grid; gap:14px}
.form h3{font-size:1rem}
.form label{display:grid; gap:7px; font-size:.84rem; color:var(--muted)}
.form input,.form textarea{
  font:inherit; font-size:.92rem; color:var(--text); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; width:100%;
}
.form input:focus,.form textarea:focus{border-color:var(--accent); outline:none}
.form__status{font-size:.85rem; margin:0; min-height:1.2em}
.form__status.is-ok{color:var(--ok)}
.form__status.is-err{color:#ff7d7d}

/* ---------- footer ------------------------------------------------------- */
.footer{border-top:1px solid var(--line-soft); padding:44px 0; background:var(--bg-alt)}
.footer__inner{display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:center}
.footer__line{color:var(--muted-2); font-size:.85rem; margin:12px 0 0}
.footer__nav{display:flex; flex-wrap:wrap; gap:18px}
.footer__nav a{text-decoration:none; font-size:.88rem; color:var(--muted)}
.footer__nav a:hover{color:var(--accent)}
.socials{display:flex; gap:10px}
.socials a{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--muted); transition:.2s;
}
.socials a:hover{color:var(--accent); border-color:var(--accent)}
.socials svg{width:18px; height:18px}

/* ---------- reveal ------------------------------------------------------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1; transform:none}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipeline{grid-template-columns:repeat(3,minmax(0,1fr))}
  .members{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr}
  /* width:100% matters: auto margins alone turn a grid item into fit-content */
  .hero__photo{width:100%; max-width:340px; margin-inline:auto}
  .about,.hire{grid-template-columns:1fr}
  .facts,.contact{position:static}
  .feature--mobile{grid-template-columns:1fr}
  .mobile__story{grid-template-columns:1fr}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:768px){
  html{scroll-padding-top:76px}
  .nav__toggle{display:grid}
  .nav__links{
    position:absolute; top:100%; left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:4px; padding:14px var(--pad) 22px;
    background:#0b0c0e;                 /* solid, or hero text reads through it */
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -24px rgba(0,0,0,.9);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:13px 8px; font-size:1rem}
  .nav__links a.is-active:not(.btn)::after{display:none}
  .nav__links .btn{margin-top:8px; justify-content:center}

  .grid--2,.grid--3{grid-template-columns:1fr}
  .reels{grid-template-columns:1fr; max-width:400px; margin-inline:auto}
  .shots{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
  .members{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card__media--split{grid-template-columns:1fr}
}

@media (max-width:560px){
  .stack{grid-template-columns:1fr}
  .pipeline{grid-template-columns:1fr}
  .gallery{columns:1}
  .footer__inner{flex-direction:column; align-items:flex-start}
  .hero__cta .btn{flex:1 1 auto}
  /* too little room to overlay on a phone, so stack it under instead */
  .media--phone{position:static; width:100%; max-width:180px; margin:14px auto 0; right:auto; bottom:auto}
}

@media (max-width:400px){
  .members{grid-template-columns:1fr}
  .phones{gap:8px}
  .phone{border-radius:18px; padding:5px}
}

/* ---------- motion and print -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}

@media print{
  .nav,.socials,.lightbox,.video-facade{display:none}
  body{background:#fff; color:#000}
}