:root{
  /* ===== Design tokens (Section 12 — Slider Revolution config) ===== */
  /* v3: all reveal timings sped up 20% (×0.8 of the Section 12 values) */
  --ltpm-ease-layer:cubic-bezier(.165,.84,.44,1);   /* Power4.easeOut — layer (was 1040ms) */
  --ltpm-ease-mask:cubic-bezier(.645,.045,.355,1);  /* Power3.easeInOut — mask (was 1010ms/phase) */
  --ltpm-ease-mask-in:cubic-bezier(.645,.045,1,1);  /* first half of the wipe — speeds INTO full white, no lingering */
  --ltpm-ease-mask-out:cubic-bezier(0,0,.355,1);    /* second half — leaves full white at speed, only decelerates at the very end */
  --ltpm-t-layer:832ms;
  --ltpm-t-mask:539ms;                              /* one phase, 50% faster (was 808ms); full wipe = in + out = 2x */
  --ltpm-t-back:800ms;
  --ltpm-stagger:72ms;
  --ltpm-bg-dark:#151515;
  --ltpm-site-nav-h:84px;
}
:where(#modal, #vbox), :where(#modal, #vbox) *{margin:0;padding:0;box-sizing:border-box}
:where(#modal, #vbox){background:var(--ltpm-bg-dark)}
:where(#modal, #vbox){font-family:'Poppins',sans-serif;color:#fff}
.archivo{font-family:'Archivo Black',sans-serif;font-weight:400}

/* ====== Idle stage — v2 has no homepage; slides are called by URL hash ====== */
#idle{position:fixed;inset:0;display:flex;flex-direction:column;gap:26px;align-items:center;justify-content:center;z-index:5;transition:opacity 400ms ease;text-align:center;padding:0 6vw}
#idle.hidden{opacity:0;pointer-events:none}
#idle .hint{font-size:11px;letter-spacing:3px;font-weight:500;text-transform:uppercase;color:#8a8a8a}
#idle nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
#idle a{padding:12px 34px;border:1px solid #fff;border-radius:999px;color:#fff;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;font-size:12px;transition:background 200ms,color 200ms}
#idle a:hover{background:#fff;color:var(--ltpm-bg-dark)}
#idle .sub{font-size:10px;color:#666;letter-spacing:1px;text-transform:uppercase}

/* ============================= Modal stage ============================= */
#modal{position:fixed;inset:0;z-index:10;pointer-events:none;visibility:hidden;background:var(--ltpm-bg-dark)}
#modal.open{pointer-events:auto;visibility:visible}
.chrome{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:calc(var(--ltpm-site-nav-h) + 22px) 0 24px;margin-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
.back{background:none;border:0;color:#fff;font-size:28px;font-weight:400;cursor:pointer;line-height:1}
.back.archivo{font-family:'Archivo Black',sans-serif}
.head-center{text-align:center}
/* Title_Font_Settings: Archivo Black 30/50 −2px; dim gray → white as reveal completes */
.m-title{color:#7a7a7a;font-size:clamp(15px,1.9vw,20px);line-height:clamp(22px,2.4vw,28px);letter-spacing:-.5px;text-transform:uppercase;transition:color 640ms ease}
#modal.revealed .m-title{color:#fff}
/* Tagline_Font_Settings: Poppins 12/50 +6px w500 */
.m-tagline{color:#9c9c9c;font-size:10px;line-height:1.6;letter-spacing:2.2px;font-weight:500;text-transform:uppercase;min-height:1px}
.logo{display:flex;align-items:center}
.logo img{height:22px;width:auto;display:block}
.m-scroll{position:absolute;inset:0;overflow-y:auto;z-index:1;padding:0 clamp(22px,4vw,72px) 10vh;color:#fff}
.m-scroll>.chrome,.m-scroll>.m-body{max-width:1280px;margin-left:auto;margin-right:auto}

/* ================== Reveal mechanic v2: wipe-in → wipe-out ================== */
/* No white at rest. Text: a white wall slides in from the RIGHT, growing into   */
/* a full white box; then its right wall keeps travelling LEFT, revealing the    */
/* content (line endings first) and the box disappears off the left side.       */
/* Media: same idea on the vertical axis — enters from the top, covers, exits   */
/* through the bottom, revealing the frame top-down (SR "Block Overlay From     */
/* Top").                                                                        */
.rv{position:relative;overflow:hidden}
.rv::after{content:"";position:absolute;inset:0;background:#fff;z-index:3;transform:translateX(101%)} /* parked offscreen — starts with no white */
.rv.rv-media::after{transform:translateY(-101%)}
.rv>.inner{opacity:0}
#modal.revealed .rv::after{animation:wipeX calc(var(--ltpm-t-mask)*2) var(--ltpm-ease-mask) both;animation-delay:calc(var(--i,0)*var(--ltpm-stagger))}
#modal.revealed .rv.rv-media::after{animation-name:wipeY}
#modal.revealed .rv>.inner{animation:layerIn calc(var(--ltpm-t-mask)*2) var(--ltpm-ease-layer) both;animation-delay:calc(var(--i,0)*var(--ltpm-stagger))}

@keyframes wipeX{
  0%{transform:translateX(101%);animation-timing-function:var(--ltpm-ease-mask-in)}    /* offscreen right — nothing visible */
  50%{transform:translateX(0);animation-timing-function:var(--ltpm-ease-mask-out)}      /* wall swept left → full white box, no stall */
  100%{transform:translateX(-101%)} /* right wall sweeps left → reveal, then gone */
}
@keyframes wipeY{
  0%{transform:translateY(-101%);animation-timing-function:var(--ltpm-ease-mask-in)}   /* offscreen top */
  50%{transform:translateY(0);animation-timing-function:var(--ltpm-ease-mask-out)}      /* covers the frame, no stall */
  100%{transform:translateY(101%)}  /* exits through the bottom → top-down reveal */
}
@keyframes layerIn{
  0%,50%{opacity:0;transform:translateY(14px)} /* hidden until the box fully covers */
  54%{opacity:1}                               /* snaps in under the cover — the exiting wall does the revealing */
  100%{opacity:1;transform:none}
}

/* ============================ Template styles ============================ */
.grid{display:grid;gap:clamp(14px,1.4vw,22px);margin-top:clamp(22px,2.4vw,32px)}
.m-body>.grid:first-child,.m-body>.rows-block:first-child{margin-top:0}
@media (min-width:901px){
  #modal.full-select .m-scroll{padding-bottom:0}
  #modal.full-select .m-body{height:100%;display:flex;flex-direction:column}
  #modal.full-select .m-body>.rv{flex:0 0 auto}
  .grid.full-select{flex:1 1 auto;min-height:0;grid-auto-rows:1fr}
  .grid.full-select .cell{display:flex;flex-direction:column;height:100%}
  .grid.full-select .rv{flex:1;min-height:0}
  .grid.full-select .rv>.inner{height:100%}
  .grid.full-select .g-tile-wrap{height:100%}
  .grid.full-select .g-tile{height:100%;max-height:60vh;aspect-ratio:auto} /* 2026-09-01: capped — full-select tiles (e.g. the Editorial/E-Commerce selection page) were stretching to fill 100% of the modal's available height with no ceiling, making the photo itself very tall and crowding the title beneath it. Capping the photo leaves it comfortably shorter so the label always has clear, consistent room. */
}
.grid.tight{gap:0}
.g-tile{position:relative;overflow:hidden;aspect-ratio:3/4;background:linear-gradient(160deg,#4a4a4a,#8b8b8b 60%,#333)}
.g-tile.v916{aspect-ratio:9/16}
.grid.landscape .g-tile{aspect-ratio:21/8}
/* Portfolio_item_Name_font_Settings: Poppins 15/35 w700 */
.g-label{font-size:11px;line-height:26px;font-weight:500;letter-spacing:1.6px;color:#dcdcdc;text-transform:uppercase;text-align:center}
.cell[data-open]:not([data-open=""]){cursor:pointer}
/* Music_Video_Description_Font_Settings: Archivo Black 22/50 −2px */
.intro{font-size:clamp(15px,1.5vw,20px);letter-spacing:-.1px;line-height:1.45;text-transform:uppercase;max-width:58ch}
/* second line of intro/headline copy: slightly smaller & narrower */
.intro-sub{font-size:clamp(12px,1.1vw,15px);letter-spacing:0;line-height:1.6;text-transform:uppercase;color:#b4b4b4;max-width:60ch;margin-top:10px}
.micro{font-size:10px;letter-spacing:2.4px;font-weight:500;text-transform:uppercase;color:#8f8f8f;margin-bottom:18px}
/* Case-study body: Source Code Pro 22/40 0px w400, white left rule (Sections 8–10) */
.cs-body{font-family:'Source Code Pro',monospace;font-size:clamp(12px,1vw,14px);line-height:1.95;letter-spacing:.2px;color:#dcdcdc;border-left:1px solid rgba(255,255,255,.3);padding-left:22px;max-width:64ch}
.hero{position:relative;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(120deg,#223,#556 55%,#112);margin-top:40px}
.hero.portrait{aspect-ratio:9/16}
.hero.hero-contain{width:min(100%,calc((100vh - 260px) * 16 / 9));margin-left:auto;margin-right:auto}
.caption{font-size:10px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;text-align:left;color:#9c9c9c;line-height:1.7;margin-top:12px}
.copy{font-size:14px;line-height:1.9;color:#cfcfcf;max-width:66ch;margin-top:22px}
.cta{display:inline-block;margin-top:32px;padding:12px 34px;border:1px solid rgba(255,255,255,.75);border-radius:999px;color:#fff;font-weight:500;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;text-decoration:none}
.reel-item{margin-top:clamp(28px,3vw,44px)}

/* -------- v16: horizontally aligned media rows (case + reel pages) -------- */
.media-row{display:grid;grid-template-columns:repeat(var(--mcols,2),minmax(0,1fr));gap:clamp(16px,1.8vw,28px);margin-top:clamp(26px,3vw,44px);align-items:start}
.media-cell .hero{margin-top:0;width:auto}
.media-cell .caption{margin-top:10px}

/* -------- Video thumbnail facade + lightbox (exact-aspect, no player chrome at rest) -------- */
.v-frame{position:absolute;inset:0;cursor:pointer}
.v-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}
.v-live{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.v-frame.playing{cursor:default}
#vbox{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;gap:24px;background:rgba(0,0,0,.92);padding:48px 6vw}
#vbox.open{display:flex}
.vbox-inner{position:relative;background:#000}
.vbox-inner.v169{width:min(1180px,92vw);aspect-ratio:16/9;max-height:80vh}
.vbox-inner.v916{height:min(86vh,900px);aspect-ratio:9/16;max-width:92vw}
.vbox-inner iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vbox-close{position:absolute;top:-36px;right:0;background:none;border:0;color:#fff;font-size:13px;letter-spacing:2px;font-weight:700;cursor:pointer;text-transform:uppercase}
.vbox-nav{background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:10px;flex:0 0 auto;opacity:.7;transition:opacity .2s ease}
.vbox-nav:hover{opacity:1}
@media (max-width:640px){.vbox-nav{font-size:22px;padding:6px}}

/* -------- Caption row under tiles: clip name only, centered -------- */
/* Used on project-detail grids (e.g. DL1961 | Spring 26) whose tiles carry a   */
/* caption row beneath the frame instead of, or in addition to, a label. The   */
/* kicker and brand side-labels were removed per feedback — name only now.     */
.g-tile-wrap{position:relative}
.g-cap{padding-top:14px;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:700;text-align:center}

/* -------- Landscape row grids (DL1961 | Summer 25 template) -------- */
/* A group label sits above a row of wide/landscape tiles, rather than tile     */
/* labels beneath a portrait grid.                                             */
.rows-block{margin-top:48px}
.row-label{display:flex;align-items:baseline;gap:14px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.25);margin-bottom:20px}
.row-grid{display:grid;gap:20px;margin-bottom:48px}
.row-tile{aspect-ratio:16/9}

/* -------- Ecomm scroll: two-column duo (media left, copy right) -------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:56px}
.duo-media-wrap{display:flex;flex-direction:column;gap:10px}
.duo-media-wrap .hero{margin-top:0}
.duo-caption{margin-top:0;text-align:left}
.duo-copy{margin-top:0}

/* -------- Browser mockups row (Section 6 live-site previews) -------- */
.browser-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.browser-mock{background:#1c1c1c;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.browser-chrome{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#141414}
.browser-chrome span{width:7px;height:7px;border-radius:50%;background:#555;display:inline-block}
.browser-url{margin-left:8px;font-size:11px;color:#999;letter-spacing:.5px}
.browser-shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(160deg,#3a3a3a,#6e6e6e 60%,#2a2a2a)}
.browser-caption{padding:12px 14px;font-size:13px;color:#ccc;letter-spacing:.3px}

.cta-heading{font-size:clamp(20px,2.6vw,28px);letter-spacing:-.5px;text-transform:uppercase;margin-top:56px;max-width:60ch}

/* -------- Ecomm additions: client strip, stats, steps, channel matrix, FAQ -------- */
.client-row{display:flex;flex-wrap:wrap;gap:10px 40px;margin-top:28px}
.client-name{font-size:13px;letter-spacing:4px;text-transform:uppercase;color:#cfcfcf;font-weight:700}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;border-top:1px solid rgba(255,255,255,.14)}
.stat-item{padding:28px 22px;border-left:1px solid rgba(255,255,255,.14)}
.stat-item:first-child{border-left:0}
.stat-n{font-size:clamp(26px,2.8vw,38px);letter-spacing:-1px;line-height:1;margin-bottom:12px}
.stat-l{font-size:11px;line-height:1.7;letter-spacing:1px;text-transform:uppercase;color:#8a8a8a}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.step-card{background:#1c1c1c;border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:26px 24px}
.step-no{font-family:'Source Code Pro',monospace;font-size:11px;letter-spacing:2px;color:#8a8a8a;display:block;margin-bottom:14px}
.step-title{font-size:15px;letter-spacing:0;text-transform:uppercase;margin-bottom:10px}
.step-body{font-size:13px;line-height:1.8;color:#cfcfcf}
.ch-matrix{width:100%;border-collapse:collapse;margin-top:56px}
.ch-matrix th,.ch-matrix td{text-align:left;padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.14);font-size:12px;line-height:1.6;vertical-align:top}
.ch-matrix th{font-family:'Source Code Pro',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8a8a8a}
.ch-matrix td:first-child{font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.5px;white-space:nowrap}
.ch-matrix td:last-child{color:#cfcfcf}
.faq-block{margin-top:56px}
.faq-block details{border-bottom:1px solid rgba(255,255,255,.14)}
.faq-block summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 2px;font-size:14px;font-weight:700}
.faq-block summary::-webkit-details-marker{display:none}
.faq-block summary::after{content:"+";font-family:'Source Code Pro',monospace;font-size:18px;color:#8a8a8a;transition:transform .3s}
.faq-block details[open] summary::after{transform:rotate(45deg)}
.faq-block .a{padding:0 2px 22px;font-size:13px;line-height:1.85;color:#cfcfcf;max-width:66ch}

/* -------- Raw full-bleed page (Ecomm v10: exact 1:1 standalone site, own nav & all) -------- */
.raw-frame{position:fixed;inset:0;width:100vw;height:100vh;border:0;background:#fff;z-index:1}
#modal.raw-mode .chrome{display:none}
#modal.raw-mode .m-scroll{padding:0;overflow:hidden}
.raw-back{position:fixed;top:18px;left:18px;z-index:25;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:0;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.raw-back:hover{background:rgba(0,0,0,.8)}

/* ======================= Responsive / mobile sizing ======================= */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)!important} /* overrides inline per-page cols */
  .grid.no-split{grid-template-columns:repeat(3,1fr)!important} /* keep 3-across until it must stack fully — no 2+1 split */
  .duo{grid-template-columns:1fr}
  .media-row{grid-template-columns:1fr!important;gap:24px}
  .browser-row{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  :root{--ltpm-site-nav-h:60px}
  .chrome{padding-bottom:18px}
  .m-scroll{padding-bottom:14vh}
  .m-tagline{letter-spacing:2.5px;font-size:10px}
  .logo img{height:17px}
  .grid{grid-template-columns:1fr!important;gap:20px}
  .grid.no-split{grid-template-columns:1fr!important}
  .g-tile{aspect-ratio:4/5}
  .grid.landscape .g-tile{aspect-ratio:16/9}
  .row-grid{grid-template-columns:1fr!important}
  .g-cap{font-size:9px;padding-top:10px}
  .browser-row{grid-template-columns:1fr}
  .cs-body{padding-left:16px;border-left-width:2px}
  .hero{aspect-ratio:16/9;margin-top:28px}
  .hero.hero-contain{width:min(100%,calc((100vh - 200px) * 16 / 9))}
  .copy{font-size:16px}
  .cta{padding:12px 34px;font-size:14px}
  .reel-item{margin-top:36px}
  .stat-row{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .ch-matrix th:nth-child(3),.ch-matrix td:nth-child(3){display:none}
  #idle nav{gap:10px}
  #idle a{padding:10px 24px;font-size:11px}
}