/* ==========================================================================
   AVRAMOSKI MEDIA
   --------------------------------------------------------------------------
   EDITING GUIDE
   1. Colours, type and spacing live in the token block below. Change them
      there and they update everywhere.
   2. Sections are separated by comment banners. Find the banner, edit under it.
   3. Dual theme: dark by default, light when the visitor's OS asks for it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Dark theme (default) */
  --bg:#0B0B0D;              /* off black, never #000 */
  --surface:#141417;         /* raised panel */
  --surface-2:#1C1C20;
  --text:#F2F2F0;            /* off white, never #fff */
  --text-soft:#8C8C93;
  --hair:rgba(255,255,255,.13);
  --accent:#3B7BF0;
  --accent-soft:#A9C4FA;

  /* Layout */
  --wide:1120px;
  --narrow:760px;
  --pad:28px;
  --section:clamp(72px,10vw,132px);
  --r:18px;
  --r-lg:26px;

  /* Type */
  --display:'Schibsted Grotesk','Inter',-apple-system,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --h1:clamp(38px,6.4vw,74px);
  --h2:clamp(30px,4.6vw,52px);
  --h3:clamp(21px,2.5vw,27px);
  --sub:clamp(18px,2vw,23px);
  --copy:clamp(16px,1.5vw,18px);

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.95s;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#FAFAF8;
    --surface:#F1F1ED;
    --surface-2:#E8E8E3;
    --text:#16161A;
    --text-soft:#5F5F68;
    --hair:rgba(0,0,0,.13);
    --accent:#1550CC;
    --accent-soft:#1550CC;
  }
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  line-height:1.5;letter-spacing:-.006em;
}
img,video,iframe{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.w{max-width:var(--wide);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 var(--pad)}
.ctr{text-align:center}
.section{padding:var(--section) 0}
.raised{background:var(--surface)}

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
h1,h2,h3,.dsp{font-family:var(--display);font-weight:600;letter-spacing:-.028em}
h1{font-size:var(--h1);line-height:1.02}
h2{font-size:var(--h2);line-height:1.06}
h3{font-size:var(--h3);line-height:1.16;letter-spacing:-.02em}
.sub{font-size:var(--sub);line-height:1.4;color:var(--text-soft);letter-spacing:-.014em}
.copy{font-size:var(--copy);line-height:1.62;color:var(--text-soft)}
.cap{font-size:14px;line-height:1.45;color:var(--text-soft)}
.lede{font-size:clamp(20px,2.6vw,30px);line-height:1.34;letter-spacing:-.02em;color:var(--text)}

/* one small label per three sections, that's the budget */
.label{font-size:13px;font-weight:600;color:var(--text-soft);letter-spacing:.01em}

/* --------------------------------------------------------------------------
   4. LINKS & BUTTONS
   -------------------------------------------------------------------------- */
.link{font-size:clamp(16px,1.7vw,19px);color:var(--accent-soft);text-decoration:none;
  display:inline-block;transition:opacity .25s var(--ease)}
.link::after{content:" \203A"}
.link:hover{opacity:.7}
.btn{display:inline-block;background:var(--accent);color:#fff;font-size:16px;font-weight:500;
  padding:14px 26px;border-radius:999px;text-decoration:none;
  transition:transform .25s var(--ease),filter .25s var(--ease)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}

/* --------------------------------------------------------------------------
   5. NAV  (single line, 64px, under the 80px cap)
   -------------------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:100;height:64px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  transition:border-color .3s ease;border-bottom:1px solid transparent}
.nav.is-stuck{border-bottom-color:var(--hair)}
.nav__inner{max-width:var(--wide);margin:0 auto;padding:0 var(--pad);height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav__logo{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.02em;text-decoration:none}
.nav__links{display:flex;gap:28px}
.nav__links a{font-size:14px;color:var(--text-soft);text-decoration:none;transition:color .2s}
.nav__links a:hover{color:var(--text)}
.nav__toggle{display:none;font-size:20px;line-height:1;padding:4px 8px}

/* --------------------------------------------------------------------------
   6. MEDIA
   -------------------------------------------------------------------------- */
.media{position:relative;width:100%;aspect-ratio:16/9;background:var(--surface-2);
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer}
.media--wide{aspect-ratio:16/7}
.media img{width:100%;height:100%;object-fit:cover}
.media__over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;background:rgba(0,0,0,.18);transition:background .3s var(--ease)}
.media:hover .media__over{background:rgba(0,0,0,.3)}
.media__play{width:clamp(54px,6.5vw,74px);aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease),background .3s var(--ease)}
.media:hover .media__play{transform:scale(1.08);background:rgba(255,255,255,.26)}
.media__play::after{content:"";width:0;height:0;margin-left:5px;
  border-left:clamp(13px,1.7vw,18px) solid #fff;
  border-top:clamp(9px,1.1vw,11px) solid transparent;
  border-bottom:clamp(9px,1.1vw,11px) solid transparent}
.media__lbl{font-size:12.5px;color:rgba(255,255,255,.72)}
.media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media--todo{background:
  repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 14px,var(--surface) 14px,var(--surface) 28px)}

/* --------------------------------------------------------------------------
   7. WORK  (asymmetric, not a uniform grid)
   -------------------------------------------------------------------------- */
.work{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
.work__cell{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  text-decoration:none;display:block;transition:transform .45s var(--ease)}
.work__cell:hover{transform:translateY(-5px)}
.work__cell .shot{aspect-ratio:16/11;background:var(--surface-2);display:flex;
  align-items:center;justify-content:center;font-size:12.5px;color:var(--text-soft)}
.work__cell .shot img{width:100%;height:100%;object-fit:cover}
.work__cell .meta{padding:22px 24px 26px}
.work__cell .meta .k{font-size:12.5px;color:var(--text-soft);margin-bottom:6px}
.work__stack{display:grid;gap:18px}
.work__stack .work__cell .shot{aspect-ratio:16/9}
.work__wide{grid-column:1 / -1}
.work__wide .shot{aspect-ratio:21/7}

/* --------------------------------------------------------------------------
   8. PINNED STACK  (used once per site)
   -------------------------------------------------------------------------- */
.pin{display:grid;grid-template-columns:320px 1fr;gap:70px;align-items:start}
.pin__head{position:sticky;top:112px}
.stack__row{padding:36px 0;border-bottom:1px solid var(--hair)}
.stack__row:last-child{border-bottom:0}
.stack__row h3{margin-bottom:9px}
.stack__row p{font-size:var(--copy);line-height:1.6;color:var(--text-soft);max-width:56ch}

/* editorial column, keeps long-form text off a 1120px line */
.col-ed{max-width:790px}
.col-ed h2{max-width:15ch}

/* --------------------------------------------------------------------------
   9. BENTO  (varied cell sizes, real background variation)
   -------------------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento .cell{background:var(--surface);border-radius:var(--r-lg);padding:32px 30px;
  grid-column:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-height:196px}
.bento .cell h3{margin-bottom:9px}
.bento .cell p{font-size:15.5px;line-height:1.55;color:var(--text-soft)}
.bento .cell--wide{grid-column:span 3}
.bento .cell--half{grid-column:span 4}
.bento .cell--full{grid-column:span 6;min-height:0;padding:28px 30px}
.bento .cell--full{flex-direction:row;align-items:baseline;gap:26px;flex-wrap:wrap}
.bento .cell--full h3{margin-bottom:0;flex:0 0 auto}
.bento .cell--full p{flex:1 1 320px}
.bento .cell--tint{background:var(--surface-2)}
.bento .cell--accent{background:linear-gradient(155deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--bg)))}
.bento .cell--accent h3,.bento .cell--accent p{color:#fff}

/* --------------------------------------------------------------------------
   10. CRITERIA  (grid, not a hairline list)
   -------------------------------------------------------------------------- */
.crit{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px;margin:44px auto 0;text-align:left}
.crit li{background:var(--surface);border-radius:var(--r);padding:24px 24px;
  font-size:17px;line-height:1.4;letter-spacing:-.012em}
.crit li b{display:block;font-family:var(--display);font-size:13px;font-weight:600;
  color:var(--accent-soft);margin-bottom:9px;letter-spacing:0}

/* --------------------------------------------------------------------------
   11. PROCESS  (asymmetric, no Step N labels)
   -------------------------------------------------------------------------- */
.flow{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.flow .lead{background:var(--surface);border-radius:var(--r-lg);padding:40px 38px;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:320px}
.flow .rest{display:grid;gap:18px}
.flow .rest div{background:var(--surface);border-radius:var(--r-lg);padding:30px 32px}
.flow h3{margin-bottom:10px}
.flow p{font-size:16px;line-height:1.56;color:var(--text-soft)}

/* --------------------------------------------------------------------------
   12. FIT  (single hairline direction)
   -------------------------------------------------------------------------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fit .col{background:var(--surface);border-radius:var(--r-lg);padding:36px 34px}
.fit .col--muted{background:transparent;border:1px solid var(--hair)}
.fit h3{margin-bottom:20px}
.fit li{padding:15px 0;border-bottom:1px solid var(--hair);font-size:16.5px;line-height:1.45}
.fit li:last-child{border-bottom:0}
.fit .col--muted li{color:var(--text-soft)}

/* --------------------------------------------------------------------------
   13. QUOTES
   -------------------------------------------------------------------------- */
.quote{font-family:var(--display);font-size:clamp(23px,3.2vw,38px);line-height:1.26;
  font-weight:500;letter-spacing:-.026em;max-width:900px;margin:0 auto}
.quote__by{font-size:16px;color:var(--text-soft);margin-top:28px}

/* --------------------------------------------------------------------------
   14. SHOTS  (portal screenshots, offset not symmetrical)
   -------------------------------------------------------------------------- */
.shots{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:end}
.shots figure{background:var(--surface);border-radius:var(--r-lg);overflow:hidden}
.shots .ph{aspect-ratio:16/10;background:var(--surface-2);display:flex;align-items:center;
  justify-content:center;font-size:12.5px;color:var(--text-soft);text-align:center;padding:20px}
.shots figcaption{padding:16px 22px 20px;font-size:14px;color:var(--text-soft)}

/* --------------------------------------------------------------------------
   15. FAQ  (bottom hairline only)
   -------------------------------------------------------------------------- */
.faq__item{border-bottom:1px solid var(--hair)}
.faq__q{width:100%;text-align:left;padding:24px 46px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(17px,1.9vw,20px);font-weight:600;letter-spacing:-.02em}
.faq__q::after{content:"";position:absolute;right:10px;top:50%;width:13px;height:13px;
  margin-top:-7px;transition:transform .35s var(--ease);
  background:
    linear-gradient(var(--accent-soft),var(--accent-soft)) center/100% 1.5px no-repeat,
    linear-gradient(var(--accent-soft),var(--accent-soft)) center/1.5px 100% no-repeat}
.faq__item.is-open .faq__q::after{transform:rotate(135deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a p{font-size:16.5px;line-height:1.6;color:var(--text-soft);padding-bottom:26px;max-width:74ch}

/* --------------------------------------------------------------------------
   16. CALENDAR
   -------------------------------------------------------------------------- */
.cal{max-width:720px;margin:44px auto 0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);min-height:200px}
.cal iframe{width:100%;min-height:640px;border:0}
.cal .ph{min-height:200px;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--text-soft);text-align:center;padding:24px}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.footer{padding:38px 0 44px;border-top:1px solid var(--hair)}
.footer__row{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.footer__row p,.footer__row a{font-size:13px;color:var(--text-soft);text-decoration:none}
.footer__row a:hover{color:var(--text)}
.footer__links{display:flex;gap:24px;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   18. MOTION
   Only applied under html.js, which the script adds. If the script fails,
   nothing is hidden. No scroll listeners anywhere.
   -------------------------------------------------------------------------- */
html.js [data-anim]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
html.js [data-anim].in{opacity:1;transform:none}

html.js [data-anim="lines"]{opacity:1;transform:none}
html.js .lm{display:block;overflow:hidden}
html.js .li{display:block;transform:translate3d(0,106%,0);transition:transform 1s var(--ease)}
html.js [data-anim="lines"].in .li{transform:none}
html.js .in .lm:nth-child(2) .li{transition-delay:.08s}
html.js .in .lm:nth-child(3) .li{transition-delay:.16s}

html.js [data-anim="group"]{opacity:1;transform:none}
html.js [data-anim="group"] > *{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
html.js [data-anim="group"].in > *{opacity:1;transform:none}
html.js [data-anim="group"].in > *:nth-child(2){transition-delay:.07s}
html.js [data-anim="group"].in > *:nth-child(3){transition-delay:.14s}
html.js [data-anim="group"].in > *:nth-child(4){transition-delay:.21s}
html.js [data-anim="group"].in > *:nth-child(5){transition-delay:.28s}
html.js [data-anim="group"].in > *:nth-child(6){transition-delay:.35s}

/* Scroll-driven scale on media, CSS only, no JS listener */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .scrub{animation:grow linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
    @keyframes grow{from{transform:scale(.93)}to{transform:scale(1)}}
  }
}

@media (prefers-reduced-motion: reduce){
  html.js [data-anim],html.js [data-anim="group"] > *{opacity:1!important;transform:none!important;transition:none!important}
  html.js .li{transform:none!important;filter:none!important;transition:none!important}
  html.js .media[data-anim]{clip-path:none!important;transition:none!important}
  html.js .nav{opacity:1!important;transform:none!important}
  .intro{display:none!important}
  html{scroll-behavior:auto}
}


/* --------------------------------------------------------------------------
   18b. PAGE LOAD INTRO
   Injected by JavaScript, never present in the HTML. If the script fails the
   overlay never exists and the page just renders. Plays once per browser tab.
   -------------------------------------------------------------------------- */
.intro{position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s var(--ease),visibility .7s}
.intro__mark{font-family:var(--display);font-weight:600;font-size:clamp(20px,3vw,28px);
  letter-spacing:-.03em;color:var(--text);opacity:0;
  animation:markIn .8s var(--ease) .12s forwards}
.intro__bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);
  animation:barIn 1s var(--ease) forwards}
@keyframes markIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes barIn{from{width:0}to{width:100%}}
.intro.out{opacity:0;visibility:hidden}

html.intro-lock,html.intro-lock body{overflow:hidden}

/* Nav and hero arrive after the intro clears */
html.js .nav{opacity:0;transform:translateY(-8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s ease}
html.js.ready .nav{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   18c. INTERACTION DETAIL
   -------------------------------------------------------------------------- */
/* nav links get a sweep underline */
.nav__links a{position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

/* cards lift and warm their edge */
.work__cell,.bento .cell,.flow .lead,.flow .rest div,.fit .col,.shots figure{
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.work__cell:hover,.bento a.cell:hover{
  transform:translateY(-6px);box-shadow:0 22px 50px -22px rgba(0,0,0,.65)}

/* media poster drifts in on hover */
.media img{transition:transform .8s var(--ease)}
.media:hover img{transform:scale(1.03)}

/* button press */
.btn:active{transform:translateY(0) scale(.985)}

/* keyboard focus, visible and on-brand */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* media reveals with a wipe rather than a plain fade */
html.js .media[data-anim]{opacity:1;transform:none;
  clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
html.js .media[data-anim].in{clip-path:inset(0 0 0 0)}

/* headline lines get a touch of blur on the way in */
html.js .li{filter:blur(6px);transition:transform 1s var(--ease),filter .8s var(--ease)}
html.js [data-anim="lines"].in .li{filter:blur(0)}

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  :root{--pad:20px}
  .work,.flow,.fit,.shots{grid-template-columns:1fr}
  .pin{grid-template-columns:1fr;gap:24px}
  .pin__head{position:static}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .cell,.bento .cell--wide,.bento .cell--half,.bento .cell--full{grid-column:span 1}
  .bento .cell--full{flex-direction:column;align-items:flex-start;gap:8px}
  .crit{grid-template-columns:1fr}
  .nav__links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;
    gap:0;padding:8px 0 14px;background:var(--bg);border-bottom:1px solid var(--hair)}
  .nav__links.open{display:flex}
  .nav__links a{padding:13px var(--pad);font-size:15px}
  .nav__toggle{display:block}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
}