/* ==========================================================================
   AVRAMOSKI MEDIA — PAGE SECTIONS
   Loads after style.css. Every rule reads --fg, --fg-2, --hair, --bg and
   --accent, so a section flips light to dark purely by gaining or losing
   data-theme="dark". Nothing here hard-codes a colour.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;
  padding:140px var(--edge) clamp(4rem, 10vh, 7rem);overflow:hidden;
  background:var(--bg);color:var(--fg)}

.hero__inner{position:relative;z-index:1;text-align:center;
  max-width:960px;margin-inline:auto}
.hero__eyebrow{margin-bottom:22px}
.hero__title{margin-bottom:24px}
.hero__lead{max-width:52ch;margin-inline:auto;margin-bottom:38px}
.hero__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero__note{margin-top:22px;font-size:.8125rem;color:var(--fg-3)}

/* Wordless scroll cue */
.hero__cue{position:absolute;left:50%;bottom:clamp(2rem, 5vh, 3.5rem);
  transform:translateX(-50%);z-index:1;width:1px;height:48px;
  background:var(--hair);overflow:hidden}
.hero__cue::after{content:"";position:absolute;inset:0;background:var(--fg);
  transform:translateY(-100%);animation:cue 2.4s var(--ease-out-expo) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}
  100%{transform:translateY(100%)}}

/* ==========================================================================
   1b. AD GRID — homepage hero. Uniform 4:5 cards, one per industry.
   4:5 is Meta's real feed ratio, not a square. Static, no marquee: four
   cards is a statement, an endless belt is decoration.
   ========================================================================== */
.adgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:clamp(2.5rem,4vw,3.5rem)}
.adcard{position:relative;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(158deg,#26262c,#131316);cursor:pointer;
  border-radius:var(--radius-0)}
.adcard video,.adcard img{width:100%;height:100%;object-fit:cover;display:block}
.adcard__over{position:absolute;inset:0;display:grid;place-items:center;border:0;
  background:rgba(14,14,16,.18);width:100%;cursor:pointer;
  transition:background var(--dur-base) ease}
.adcard__over:hover{background:rgba(14,14,16,.3)}
.adcard__play{width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(245,245,243,.28);background:rgba(245,245,243,.13);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  transition:transform var(--dur-base) var(--ease-out-expo),border-color var(--dur-base) ease}
.adcard__over:hover .adcard__play{transform:scale(1.09);border-color:var(--accent-on-dark)}
.adcard__play::after{content:"";width:0;height:0;margin-left:4px;
  border-left:12px solid #f5f5f3;border-top:7.5px solid transparent;
  border-bottom:7.5px solid transparent}
.adcard__meta{position:absolute;left:14px;right:14px;bottom:12px;text-align:left;
  pointer-events:none}
.adcard__client{font-size:.78rem;font-weight:600;color:#F5F5F3}
.adcard__ind{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-on-dark);margin-top:4px}
.adgrid__note{margin-top:1.25rem;text-align:center}

/* ==========================================================================
   1c. ARGUMENT — the page's one oversized claim
   ========================================================================== */
.arg{font-family:var(--font-display);font-size:clamp(2rem,1.3rem + 3vw,3.5rem);
  line-height:1.06;letter-spacing:-.032em;font-weight:600;max-width:19ch;
  margin-top:1.25rem;color:var(--fg)}
.arg-split{display:grid;grid-template-columns:1fr;gap:32px;
  margin-top:clamp(2rem,3.5vw,3rem)}
@media (min-width:900px){.arg-split{grid-template-columns:1fr 1fr;gap:clamp(48px,5vw,76px)}}

/* Epigraph divider. Used ONCE per page. Repeat it and it becomes wallpaper. */
.epigraph{padding-block:clamp(2.5rem,5vw,3.5rem);text-align:center;
  border-top:1px solid var(--hair);background:var(--bg)}
.epigraph p{font-family:var(--font-display);
  font-size:clamp(1.15rem,.9rem + 1.1vw,1.6rem);font-style:italic;font-weight:500;
  letter-spacing:-.02em;color:var(--fg-2);max-width:30ch;margin-inline:auto}

/* ==========================================================================
   2. MEDIA BLOCK — self-hosted video
   The poster frame shows until someone presses play. Nothing streams, and
   nothing autoplays, until then. Governance lives in page.js: playback
   pauses when the block scrolls out of view so a looping reel does not
   burn battery three sections down the page.
   ========================================================================== */
.media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--slate-raised);border-radius:var(--radius-0)}
.media--wide{aspect-ratio:16/7}

.media__video{width:100%;height:100%;object-fit:cover;display:block;
  background:var(--slate-raised)}

/* Poster layer. Removed from the flow once playback starts. */
.media__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--ease-out-expo), opacity var(--dur-base) ease}
.media.is-playing .media__poster,
.media.is-playing .media__over{opacity:0;pointer-events:none}

.media__over{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;cursor:pointer;
  background:rgba(14,14,16,.2);border:0;width:100%;
  transition:background var(--dur-base) ease, opacity var(--dur-base) ease}
@media (hover:hover) and (pointer:fine){
  .media__over:hover{background:rgba(14,14,16,.34)}
  .media__over:hover ~ .media__poster,
  .media:hover .media__poster{transform:scale(1.03)}
}
.media__play{width:clamp(56px, 6.5vw, 76px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(245,245,243,.34);background:rgba(245,245,243,.1);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform var(--dur-base) var(--ease-out-expo),
             border-color var(--dur-base) ease, background var(--dur-base) ease}
.media__over:hover .media__play{transform:scale(1.08);
  border-color:rgba(245,245,243,.8);background:rgba(245,245,243,.2)}
.media__play::after{content:"";width:0;height:0;margin-left:5px;
  border-left:clamp(14px, 1.7vw, 19px) solid var(--light);
  border-top:clamp(9px, 1.1vw, 12px) solid transparent;
  border-bottom:clamp(9px, 1.1vw, 12px) solid transparent}
.media__label{font-size:.6875rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(245,245,243,.7)}
.media__over:focus-visible{outline:2px solid var(--light);outline-offset:-4px}

/* Placeholder texture until a real poster frame is dropped in */
.media--todo .media__video,
.media--todo{background:repeating-linear-gradient(45deg,
  #1A1A1E, #1A1A1E 14px, #131316 14px, #131316 28px)}
.media__caption{margin-top:14px;font-size:.8125rem;color:var(--fg-3);text-align:center}

/* ==========================================================================
   3. SECTION HEADERS
   ========================================================================== */
.sec-head{margin-bottom:clamp(2.5rem, 4vw, 4rem)}
.sec-head .label{display:block;margin-bottom:16px}
.sec-head__lead{margin-top:20px;max-width:52ch}
.sec-head--ctr{text-align:center}
.sec-head--ctr .sec-head__lead{margin-inline:auto}

/* ==========================================================================
   4. WORK — split stage. Hover a row, the frame changes.
   ========================================================================== */
.stage{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:1024px){
  .stage{grid-template-columns:1.05fr .95fr;gap:clamp(40px, 5vw, 80px);
    align-items:start}
}

.stage__list{border-top:1px solid var(--hair)}
.stage__row{position:relative;display:grid;grid-template-columns:2.75rem 1fr auto;
  gap:20px;align-items:baseline;padding:clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-bottom:1px solid var(--hair);transition:opacity var(--dur-base) ease}
.stage__list.has-active .stage__row{opacity:.34}
.stage__list.has-active .stage__row.is-active{opacity:1}
.stage__num{font-size:.6875rem;font-weight:500;letter-spacing:.16em;color:var(--fg-3)}
.stage__title{font-family:var(--font-display);
  font-size:clamp(1.375rem, 1.1rem + 1.6vw, 2.25rem);font-weight:600;
  line-height:1.12;letter-spacing:-.026em;color:var(--fg);
  transition:transform var(--dur-base) var(--ease-out-expo)}
.stage__row.is-active .stage__title{transform:translateX(10px)}
.stage__tag{font-size:.6875rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap}

/* The frame only exists on wide screens. Below that each row shows its own
   still, so nothing is lost on a phone. */
.stage__frame{display:none}
@media (min-width:1024px){
  .stage__frame{display:block;position:sticky;top:120px;aspect-ratio:4/3;
    overflow:hidden;background:var(--bg-raised);border:1px solid var(--hair)}
  .stage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transform:scale(1.04);
    transition:opacity 620ms var(--ease-out-expo),
               transform 900ms var(--ease-out-expo)}
  .stage__img.is-active{opacity:1;transform:scale(1)}
  .stage__ph{position:absolute;inset:0;display:grid;place-items:center;
    font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
  .stage__meta{display:flex;justify-content:space-between;gap:16px;margin-top:16px;
    font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--fg-3)}
}
/* Mobile still, hidden once the frame takes over */
.stage__row-media{margin-top:18px;aspect-ratio:16/10;overflow:hidden;
  background:var(--bg-raised);border:1px solid var(--hair);
  display:grid;place-items:center;font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);grid-column:1 / -1}
.stage__row-media img{width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){.stage__row-media{display:none}}

/* ==========================================================================
   5. LEDGER — services / what's included
   ========================================================================== */
.ledger{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:900px){
  .ledger{grid-template-columns:320px 1fr;gap:clamp(48px, 6vw, 90px)}
  .ledger__head{position:sticky;top:120px}
}
.ledger__row{padding:clamp(1.5rem, 2.4vw, 2.25rem) 0;
  border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:46px 1fr;gap:24px;align-items:start}
@media (min-width:1024px){
  .ledger__row{grid-template-columns:46px 1fr 300px;align-items:start}
  .ledger__row p{margin-top:0}
}
.ledger__row:first-child{border-top:1px solid var(--hair)}
.ledger__row .ico{margin-top:6px}
.ledger__row h3{margin-bottom:10px}
.ledger__row p{font-size:1rem;line-height:1.6;color:var(--fg-2);max-width:56ch}

/* ==========================================================================
   6. CRITERIA — the guarantee's four tests
   ========================================================================== */
.criteria{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:clamp(2.5rem, 4vw, 3.5rem)}
@media (min-width:700px){.criteria{grid-template-columns:1fr 1fr}}
.criteria li{background:var(--bg);padding:clamp(1.5rem, 2.4vw, 2rem);text-align:left;
  display:flex;flex-direction:column;min-height:186px}
.criteria .ico{margin-bottom:18px}
.criteria b{display:block;font-family:var(--font-display);font-size:.6875rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:10px}
.criteria span{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
  line-height:1.28;letter-spacing:-.02em;color:var(--fg)}
@media (min-width:960px){.criteria{grid-template-columns:repeat(4,1fr)}}

/* ==========================================================================
   7. FLOW — process
   ========================================================================== */
.flow{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
@media (min-width:900px){.flow{grid-template-columns:1.25fr 1fr}}
.flow__cell{background:var(--bg);padding:clamp(1.75rem, 3vw, 2.75rem);
  display:flex;flex-direction:column;justify-content:flex-end}
.flow__cell--lead{min-height:340px}
.flow__rest{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair)}
.flow__cell .ico{margin-bottom:16px}
.flow__cell h3{margin-bottom:12px}
.flow__cell p{font-size:1rem;line-height:1.6;color:var(--fg-2)}

/* ==========================================================================
   8. FIT — for / not for
   ========================================================================== */
.fit{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
@media (min-width:820px){.fit{grid-template-columns:1fr 1fr}}
.fit > div{background:var(--bg);padding:clamp(1.75rem,3vw,2rem)}
.fit__no{background:var(--bg-raised)}
.fit .ico{margin-bottom:16px}
.fit h3{margin-bottom:18px}
.fit li{padding:16px 0;border-bottom:1px solid var(--hair);
  font-size:1.0625rem;line-height:1.45;color:var(--fg)}
.fit li:first-child{border-top:1px solid var(--hair)}
.fit__no li{color:var(--fg-2)}

/* ==========================================================================
   9. SHOTS — portal screenshots, offset pair
   ========================================================================== */
.shots{display:grid;grid-template-columns:1fr;gap:clamp(24px, 3vw, 40px)}
@media (min-width:820px){.shots{grid-template-columns:1.3fr 1fr;align-items:end}}
.shots figure{margin:0}
.shots__frame{aspect-ratio:16/10;overflow:hidden;background:#EFEFEC;
  border:1px solid var(--hair);display:grid;place-items:center;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);text-align:center;padding:20px}
.shots__frame img{width:100%;height:100%;object-fit:cover}
.shots figcaption{margin-top:16px;font-size:.875rem;color:var(--fg-2)}

/* ==========================================================================
   10. QUOTE
   ========================================================================== */
.quote{font-family:var(--font-display);
  font-size:clamp(1.5rem, 1.1rem + 2.1vw, 2.75rem);font-weight:500;line-height:1.24;
  letter-spacing:-.026em;max-width:22ch;margin-inline:auto;color:var(--fg)}
.quote--wide{max-width:30ch}
.quote__by{margin-top:28px;font-size:.9375rem;color:var(--fg-3)}

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--hair)}
.faq__item{border-bottom:1px solid var(--hair)}
.faq__q{position:relative;width:100%;text-align:left;
  padding:clamp(1.25rem, 2vw, 1.75rem) 52px clamp(1.25rem, 2vw, 1.75rem) 0;
  font-family:var(--font-display);font-size:clamp(1.0625rem, 1rem + .5vw, 1.3125rem);
  font-weight:600;letter-spacing:-.02em;color:var(--fg);
  transition:opacity var(--dur-fast) ease}
.faq__q:hover{opacity:.65}
.faq__q::before,.faq__q::after{content:"";position:absolute;right:12px;top:50%;
  background:var(--accent);transition:transform var(--dur-base) var(--ease-out-expo)}
.faq__q::before{width:14px;height:1.5px;margin-top:-.75px}
.faq__q::after{width:1.5px;height:14px;margin-top:-7px;margin-right:6.25px}
.faq__item.is-open .faq__q::after{transform:rotate(90deg)}
.faq__q:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.faq__a{max-height:0;overflow:hidden;
  transition:max-height var(--dur-base) var(--ease-out-expo)}
.faq__a p{font-size:1rem;line-height:1.62;color:var(--fg-2);max-width:74ch;
  padding-bottom:clamp(1.25rem, 2vw, 1.75rem)}

/* ==========================================================================
   12. CALENDAR
   ========================================================================== */
.cal{margin-top:clamp(2.5rem, 4vw, 3.5rem);border:1px solid var(--hair);
  background:var(--bg-raised);min-height:200px;overflow:hidden}
.cal iframe{width:100%;min-height:640px;border:0;display:block}
.cal__ph{min-height:200px;display:grid;place-items:center;padding:24px;
  text-align:center;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3)}

/* ==========================================================================
   13. INDUSTRIES
   ========================================================================== */
.inds{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
@media (min-width:700px){.inds{grid-template-columns:1fr 1fr}}
.ind{background:var(--bg);padding:clamp(1.75rem, 3vw, 2.5rem);min-height:200px;
  display:flex;flex-direction:column;text-decoration:none;color:var(--fg);
  transition:background var(--dur-base) ease}
.ind .ico{margin-bottom:18px}
.ind h3{margin-bottom:10px}
.ind p{font-size:.9375rem;line-height:1.55;color:var(--fg-2)}
.ind__tag{font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.ind__go{margin-top:auto;padding-top:22px;font-size:.875rem;color:var(--accent)}
.ind__go::after{content:" \2192"}

/* The roofing tile inverts, which is how the new department gets emphasis
   without needing a colour to do it. */
.ind--invert{background:var(--slate);color:var(--light)}
.ind--invert h3{color:var(--light)}
.ind--invert .ico{stroke:var(--accent-on-dark)}
.ind--invert p{color:rgba(245,245,243,.64)}
.ind--invert .ind__tag{color:var(--accent-on-dark)}
.ind--invert .ind__go{color:var(--accent-on-dark)}
a.ind:hover{background:var(--bg-raised)}
a.ind--invert:hover{background:#1A1A1E}

/* ==========================================================================
   14. REDUCED MOTION
   ========================================================================== */
@media (max-width:900px){
  .adgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .adgrid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .hero__cue::after{animation:none;transform:translateY(0)}
  .media img,.media__over,.media__play,.stage__title,.stage__img,
  .stage__row,.faq__q,.faq__q::before,.faq__q::after,.ind{transition:none}
}