/* Interactive sections added in V2.2: marquee, GIMMI flavour stage, Campaign Lab, format cropper.
   Loaded after style.css. Static, readable layouts first; motion is enhancement. */
:root{--header-h:88px}
@media(max-width:700px){:root{--header-h:74px}}
@media(max-height:520px) and (orientation:landscape){:root{--header-h:60px}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0}

/* Page progress hairline */
.page-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--rust);transform:scaleX(0);transform-origin:0 50%;z-index:40;pointer-events:none}

/* Heading mask reveal */
.mask{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.mask-in{display:block;will-change:transform}

/* Magnetic buttons keep colour transitions but let GSAP own the transform */
.is-magnetic{transition:background .2s,color .2s,border-color .2s!important}
.is-magnetic:hover{transform:none}

/* Marquee */
.marquee{overflow:hidden;border-bottom:1px solid var(--line);padding:22px 0 18px;background:var(--paper)}
.marquee-track{display:flex;align-items:center;width:max-content;white-space:nowrap;will-change:transform}
.marquee-track>*{margin-right:38px;flex:none}
.marquee-track span{font-family:Barlow;font-weight:900;font-size:clamp(44px,6.4vw,92px);line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.marquee-track span.o{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.marquee-track i{width:14px;height:14px;border-radius:50%;background:var(--rust);flex:none}

/* ===== GIMMI flavour stage ===== */
.flavor{background:var(--paper);padding-top:100px}
.flavor-intro{padding:0 7%}
.flavor-track{margin-top:24px}
.flavor-items{list-style:none;margin:0;padding:0}
.flavor-item{background:var(--bg);color:var(--fg);display:grid;grid-template-columns:1fr minmax(170px,34%);gap:5%;align-items:center;padding:56px 7%}
.flavor-no{font-size:12px;letter-spacing:.16em}
.flavor-word{font-family:Barlow;font-weight:900;font-size:clamp(64px,12vw,160px);line-height:.86;margin:10px 0 14px;letter-spacing:-.03em;text-transform:uppercase}
.flavor-notes{font-family:Cormorant;font-style:italic;font-size:clamp(30px,4vw,56px);line-height:1;margin:0 0 16px}
.flavor-notes i{font-style:normal;opacity:.5;margin:0 .14em}
.flavor-desc{font-size:12px;letter-spacing:.03em;max-width:36ch;margin:0}
.flavor-photo{margin:0;aspect-ratio:3/4;overflow:hidden;box-shadow:0 22px 60px #0004;background:#c9c9c9}
.flavor-photo img{width:100%;height:100%;object-fit:cover}
.flavor-ring{display:none}
.flavor-ui{padding:26px 7% 8px;display:flex}
.flavor-chips,.flavor-bar{display:none}

/* enhanced (sticky, scroll-driven) */
.flavor.is-enhanced .flavor-track{height:calc(100svh - var(--header-h) + 4 * 78svh)}
.flavor.is-enhanced .flavor-stage{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));overflow:hidden;background:var(--stage-bg,#c85a14);color:var(--stage-fg,#fff)}
.flavor.is-enhanced .flavor-items{position:absolute;inset:0}
.flavor.is-enhanced .flavor-item{position:absolute;inset:0;background:none;color:inherit;padding:0 7% 112px;gap:4%;grid-template-columns:1.05fr .95fr;pointer-events:none}
.flavor.is-enhanced .flavor-copy{will-change:transform,opacity}
.flavor.is-enhanced .flavor-photo{height:min(100%,64svh);width:auto;justify-self:center;will-change:transform,opacity}
.flavor.is-enhanced .flavor-ring{display:block;position:absolute;left:68%;top:45%;width:min(78svh,54vw);aspect-ratio:1;margin:calc(min(78svh,54vw) / -2) 0 0 calc(min(78svh,54vw) / -2);border-radius:50%;border:2px dashed color-mix(in srgb,var(--stage-fg,#fff) 38%,transparent);will-change:transform;pointer-events:none}
.flavor.is-enhanced .flavor-ui{position:absolute;left:7%;right:7%;bottom:22px;padding:0;display:grid;grid-template-columns:auto minmax(40px,1fr) auto;gap:22px;align-items:center;z-index:5}
.flavor.is-enhanced .flavor-chips{display:flex;gap:8px;flex-wrap:wrap}
.flavor.is-enhanced .flavor-chips button{min-height:44px;padding:0 16px;font-size:13px;color:inherit;background:transparent;border:1px solid color-mix(in srgb,var(--stage-fg,#fff) 60%,transparent);transition:background .2s,color .2s}
.flavor.is-enhanced .flavor-chips button.is-on{background:var(--stage-fg,#fff);color:var(--stage-bg,#c85a14);border-color:var(--stage-fg,#fff)}
.flavor.is-enhanced .flavor-bar{display:block;height:2px;background:color-mix(in srgb,var(--stage-fg,#fff) 30%,transparent);overflow:hidden}
.flavor.is-enhanced .flavor-bar span{display:block;height:100%;background:var(--stage-fg,#fff);transform:scaleX(0);transform-origin:0 50%}
.flavor.is-enhanced .flavor-cta{background:var(--stage-fg,#fff);color:var(--stage-bg,#c85a14);border-color:var(--stage-fg,#fff)}
.flavor.is-enhanced .flavor-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ===== segmented controls (shared by the lab and the cropper) ===== */
.seg{border:0;margin:0;padding:0;min-width:0;--seg-line:#4a4a43;--seg-pill:var(--paper);--seg-on:var(--ink);--seg-off:#cfccc1}
.seg legend{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#bab7ad;margin:0 0 10px;padding:0}
.seg-row{position:relative;display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--seg-line)}
.seg-row label{position:relative;z-index:1;cursor:pointer;display:block}
.seg-row input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg-row label span{display:flex;align-items:center;min-height:44px;padding:0 16px;font-size:14px;color:var(--seg-off);transition:color .25s;white-space:nowrap}
.seg-row input:checked+span{background:var(--seg-pill);color:var(--seg-on)}
.seg-row.has-pill input:checked+span{background:transparent}
.seg-row input:checked+span{color:var(--seg-on)}
.seg-row input:focus-visible+span{outline:3px solid var(--rust);outline-offset:2px}
.seg-pill{position:absolute;z-index:0;left:0;top:0;width:0;height:0;background:var(--seg-pill);pointer-events:none;display:none}
.seg-row.has-pill .seg-pill{display:block}

/* ===== Campaign Lab ===== */
.lab{background:var(--ink);color:var(--paper);--lab-card:#22221d;--lab-line:#3a3a34}
.lab .eyebrow{color:#bab7ad}
.lab-controls{display:flex;flex-wrap:wrap;gap:22px 34px;align-items:flex-end;margin-bottom:36px}
.lab-name{display:grid;gap:8px;min-width:min(100%,300px);flex:1 1 300px;max-width:520px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#bab7ad}
.lab-name input{font-family:Barlow;font-weight:900;font-size:clamp(30px,4vw,46px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;background:transparent;border:0;border-bottom:2px solid var(--paper);color:var(--paper);padding:2px 0 4px;width:100%;border-radius:0}
.lab-name input:focus-visible{outline:3px solid var(--rust);outline-offset:6px}
.lab-board{display:grid;gap:20px;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"poster poster poster poster poster grid grid grid grid grid grid grid" "markets markets markets markets markets grid grid grid grid grid grid grid" "mix mix mix mix mix cal cal cal cal cal cal cal" "actions actions actions actions actions actions actions actions actions actions actions actions"}
.b-poster{grid-area:poster;background:var(--p,#a53e2b);color:var(--pt,#fff);padding:26px;display:flex;flex-direction:column;gap:12px;transition:background-color .5s,color .5s;min-height:330px;container-type:inline-size}
.b-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0}
.b-name{font-family:Barlow;font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-.02em;margin:8px 0 0;white-space:nowrap;overflow:hidden;padding-bottom:.08em;font-size:clamp(38px,9vw,120px);font-size:min(150px,calc(100cqw / (var(--len,8) * .5)))}
.b-name .ch{display:inline-block;will-change:transform}
.b-line{font-family:Cormorant;font-style:italic;font-size:clamp(28px,3.2vw,44px);line-height:1.02;margin:0;min-height:1.05em}
.b-gloss{font-size:12px;margin:0;opacity:.85;min-height:1.2em}
.b-palette{list-style:none;margin:auto 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.b-palette li{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.06em}
.b-palette li i{width:26px;height:26px;border:1px solid color-mix(in srgb,currentColor 45%,transparent);display:block;transition:background-color .5s}
.b-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 0;padding-top:14px;border-top:1px solid color-mix(in srgb,currentColor 40%,transparent)}
.b-meta dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.b-meta dd{margin:3px 0 0;font-size:13px;line-height:1.3}
.b-markets,.b-gridwrap,.b-mix,.b-cal{background:var(--lab-card);border:1px solid var(--lab-line);padding:24px;min-width:0}
.b-markets{grid-area:markets}.b-gridwrap{grid-area:grid}.b-mix{grid-area:mix}.b-cal{grid-area:cal}
.b-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#bab7ad;font-weight:600;margin:0 0 16px}
.b-markets ul,.b-mix ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.b-markets button{width:100%;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;text-align:left;min-height:56px;padding:8px 12px;background:transparent;color:var(--paper);border:1px solid var(--lab-line);transition:background .25s,color .25s,border-color .25s}
.b-markets button b{font-family:Barlow;font-weight:900;font-size:22px;letter-spacing:.02em}
.b-markets button span{font-family:Cormorant;font-style:italic;font-size:21px;line-height:1.1}
.b-markets button:hover{border-color:var(--paper)}
.b-markets button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.b-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.b-tile{position:relative;overflow:hidden;aspect-ratio:4/5;padding:12px;display:flex;flex-direction:column;justify-content:space-between;transition:background-color .5s,color .5s;isolation:isolate}
.b-tile:before{content:'';position:absolute;inset:0;opacity:.14;z-index:-1}
.b-tile.v0{background:var(--p);color:var(--pt)}.b-tile.v0:before{background:repeating-linear-gradient(135deg,currentColor 0 2px,transparent 2px 14px)}
.b-tile.v1{background:var(--s);color:var(--d)}.b-tile.v1:before{background:radial-gradient(currentColor 1.4px,transparent 1.6px) 0 0/14px 14px}
.b-tile.v2{background:var(--d);color:var(--s)}.b-tile.v2:before{background:linear-gradient(currentColor 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,currentColor 1px,transparent 1px) 0 0/16px 16px}
.b-tile.v3{background:var(--a);color:var(--at)}.b-tile.v3:before{background:repeating-linear-gradient(45deg,currentColor 0 10px,transparent 10px 24px)}
.t-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.t-fmt{display:inline-flex;align-items:center;gap:6px}
.t-fmt svg{width:12px;height:12px;flex:none}
.t-mark{position:absolute;right:-6%;bottom:-16%;font-family:Barlow;font-weight:900;font-size:clamp(90px,11vw,150px);line-height:1;opacity:.16;z-index:-1;pointer-events:none}
.t-title{font-size:clamp(12px,1.15vw,15px);line-height:1.2;font-weight:600;margin:0}
.b-mix li{display:grid;grid-template-columns:86px 1fr 40px;gap:12px;align-items:center;font-size:13px}
.b-mix .bar{height:10px;background:#34342e;overflow:hidden}
.b-mix .bar span{display:block;height:100%;width:0;background:var(--a,#d3a24a);transition:background-color .5s}
.b-mix .pct{text-align:right;font-variant-numeric:tabular-nums}
.b-days{display:grid;gap:8px}
.b-week{display:grid;grid-template-columns:104px repeat(7,minmax(0,1fr));gap:6px;align-items:center}
.b-phase{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#bab7ad;line-height:1.2}
.b-day{position:relative;aspect-ratio:1;min-height:36px;padding:0;background:#2d2d27;border:1px solid transparent;color:#8c8a80;font-size:11px;display:grid;place-items:center;transition:background-color .25s,border-color .25s}
.b-day[data-f]{color:var(--ink);font-weight:700}
.b-day[data-f="Reel"]{background:var(--a)}.b-day[data-f="Carousel"]{background:var(--p);color:var(--pt)}.b-day[data-f="Still"]{background:var(--s)}.b-day[data-f="Story"]{background:var(--paper)}
.b-day.is-sel{border-color:var(--paper);outline:2px solid var(--paper);outline-offset:1px}
.b-day:disabled{cursor:default}
.b-day:after{content:'';position:absolute;inset:-3px}
.b-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:0;list-style:none;font-size:11px;color:#bab7ad}
.b-legend li{display:flex;align-items:center;gap:6px}
.b-legend i{width:10px;height:10px;display:block}
.b-legend i[data-f="Reel"]{background:var(--a)}.b-legend i[data-f="Carousel"]{background:var(--p)}.b-legend i[data-f="Still"]{background:var(--s)}.b-legend i[data-f="Story"]{background:var(--paper)}
.b-caption{font-size:13px;color:var(--paper);margin:12px 0 0;min-height:1.4em}
.b-actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.lab .button{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lab .button:hover{background:var(--rust);border-color:var(--rust);color:var(--paper)}
.lab .button.outline{background:transparent;color:var(--paper)}
.lab .button.outline:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.b-status{font-size:13px;color:#bab7ad}

/* ===== One shoot, every format ===== */
.formats{background:#ece7db}
.formats .seg{--seg-line:#c5bfae;--seg-pill:var(--ink);--seg-on:var(--paper);--seg-off:var(--ink)}
.fmt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:44px;align-items:start}
.fmt-toolbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-bottom:16px}
.fmt-zoom{display:flex;align-items:center;gap:12px;font-size:13px}
.fmt-zoom input{width:140px;accent-color:var(--rust);min-height:44px}
.fmt-master{position:relative;aspect-ratio:3072/4096;width:min(100%,calc(72svh * .75));background:#d9d4c7;overflow:hidden;user-select:none;-webkit-user-select:none}
.fmt-master>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.fmt-frames{position:absolute;inset:0}
.fmt-frame{position:absolute;box-sizing:border-box;border:2px solid var(--fc);cursor:grab;touch-action:none;outline:none}
.fmt-frame:active{cursor:grabbing}
.fmt-frame:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
.fmt-frame.is-active{z-index:3;box-shadow:0 0 0 999px rgba(24,24,20,.5)}
.fmt-frame b{position:absolute;left:-2px;top:-2px;background:var(--fc);color:var(--ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;font-weight:700}
.fmt-frame[data-f="story"] b,.fmt-frame[data-f="wide"] b{left:auto;right:-2px}
.fmt-frame[data-f="square"] b{top:auto;bottom:-2px}
.fmt-handle{display:none;position:absolute;right:-10px;bottom:-10px;width:20px;height:20px;background:var(--fc);border:2px solid var(--ink);cursor:nwse-resize;touch-action:none}
.fmt-handle:after{content:'';position:absolute;inset:-12px}
.fmt-frame.is-active .fmt-handle{display:block}
.fmt-photos{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.fmt-photos button{min-height:44px;padding:0 18px;font-size:13px;background:transparent;border:1px solid var(--ink);color:var(--ink);transition:background .2s,color .2s}
.fmt-photos button.is-on{background:var(--ink);color:var(--paper)}
.fmt-hint{font-size:12px;color:var(--muted);margin:12px 0 0;max-width:46ch}
.fmt-previews{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:start}
.fmt-card{display:grid;gap:8px;text-align:left;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;grid-column:span 2;min-width:0}
.fmt-card.wide{grid-column:1/-1}
.fmt-card .shell{position:relative;background:#d9d4c7;outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s}
.fmt-card.is-active .shell{outline-color:var(--fc)}
.fmt-card canvas{display:block;width:100%;height:auto}
.fmt-card .cap{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:1.3}
.fmt-card .cap b{font-weight:600}
.fmt-card .cap span{color:var(--muted);text-align:right}
.fmt-card.story .shell:before{content:'';position:absolute;left:8px;right:8px;top:8px;height:3px;background:linear-gradient(90deg,#fff 0 40%,#ffffff66 40% 100%);z-index:2;box-shadow:0 1px 4px #0005}
.fmt-card.story .shell:after{content:'';position:absolute;left:8px;right:8px;bottom:10px;height:30px;border:1px solid #fffc;border-radius:30px;z-index:2}
.fmt-card.feed .shell:after{content:'';position:absolute;left:50%;bottom:8px;width:34px;height:6px;margin-left:-17px;background:radial-gradient(circle,#fff 2.4px,transparent 2.8px) 0 0/12px 6px,#0000;opacity:.9;z-index:2}
.fmt-card.wide .shell{padding-top:18px;background:#2a2a25}
.fmt-card.wide .shell:before{content:'';position:absolute;left:8px;top:6px;width:36px;height:6px;background:radial-gradient(circle,#ff6a4d 2.4px,transparent 2.8px) 0 0/12px 6px,#0000}
.fmt-credit{font-size:12px;color:var(--muted);margin:30px 0 0;max-width:70ch}

/* ===== responsive ===== */
@media(max-width:1100px){
  .lab-board{grid-template-areas:"poster poster poster poster poster poster grid grid grid grid grid grid" "markets markets markets markets markets markets grid grid grid grid grid grid" "mix mix mix mix mix mix mix mix mix mix mix mix" "cal cal cal cal cal cal cal cal cal cal cal cal" "actions actions actions actions actions actions actions actions actions actions actions actions"}
  .fmt{grid-template-columns:1fr;gap:34px}
  .fmt-master{width:min(100%,calc(66svh * .75))}
}
@media(max-width:820px){
  .lab-board{grid-template-columns:minmax(0,1fr);grid-template-areas:"poster" "markets" "grid" "mix" "cal" "actions"}
  .b-poster{min-height:0}
}
@media(max-width:700px){
  .flavor{padding-top:66px}
  .flavor-intro{padding:0 6%}
  .flavor-item{grid-template-columns:1fr;padding:40px 6%;gap:26px}
  .flavor-photo{max-width:260px}
  .flavor.is-enhanced .flavor-item{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:8px;align-content:start;padding:22px 6% 176px}
  .flavor.is-enhanced .flavor-word{font-size:min(23vw,12svh);margin:6px 0 8px}
  .flavor.is-enhanced .flavor-notes{font-size:clamp(26px,8vw,36px);margin:0 0 8px}
  .flavor.is-enhanced .flavor-desc{font-size:11px}
  .flavor.is-enhanced .flavor-photo{height:min(100%,40svh);align-self:start;margin-top:6px}
  .flavor.is-enhanced .flavor-ring{left:50%;top:62%;width:78vw;margin:-39vw 0 0 -39vw}
  .flavor.is-enhanced .flavor-ui{left:6%;right:6%;bottom:14px;grid-template-columns:1fr;gap:10px}
  .flavor.is-enhanced .flavor-chips{gap:6px}
  .flavor.is-enhanced .flavor-chips button{padding:0 11px;font-size:12px}
  .flavor.is-enhanced .flavor-cta{width:100%}
  .lab-controls{gap:18px}
  .seg-row label span{padding:0 13px;font-size:13px}
  .b-poster,.b-markets,.b-gridwrap,.b-mix,.b-cal{padding:20px 18px}
  .b-week{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .b-days{gap:6px}
  .b-phase{grid-column:1/-1;margin-top:4px}
  .b-mix li{grid-template-columns:78px 1fr 38px}
  .t-title{font-size:13px}
  .fmt-previews{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .fmt-card,.fmt-card.story,.fmt-card.feed,.fmt-card.square{grid-column:span 1}
  .fmt-card.wide{grid-column:1/-1}
  .fmt-card .cap{flex-direction:column;gap:2px}
  .fmt-card .cap span{text-align:left}
  .marquee{padding:16px 0 12px}
}
@media(max-height:520px) and (orientation:landscape){
  .flavor.is-enhanced .flavor-track{height:calc(100svh - var(--header-h) + 4 * 90svh)}
  .flavor.is-enhanced .flavor-item{padding-bottom:84px}
  .flavor.is-enhanced .flavor-word{font-size:min(14vw,22svh)}
  .flavor.is-enhanced .flavor-notes{font-size:clamp(22px,4vw,34px)}
  .flavor.is-enhanced .flavor-photo{height:min(100%,56svh)}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{transform:none!important}
  .seg-row label span,.b-tile,.b-poster{transition:none}
}

/* ===== concept films (V2.3) ===== */
.film{margin:0;position:relative}
.film-frame{position:relative;overflow:hidden;background:#1d1d19;aspect-ratio:var(--ar,16/9)}
.film-wide{--ar:16/9}.film-tall{--ar:4/5}.film-portrait{--ar:9/16}
.film-frame img,.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-frame video{opacity:0;transition:opacity .6s}
.film.is-playing .film-frame video,.film.is-ended .film-frame video{opacity:1}
.film figcaption{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:13px}
.film-tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;padding:3px 8px;white-space:nowrap}
.film-btn{margin-left:auto;min-height:44px;min-width:44px;padding:0 16px;background:transparent;border:1px solid currentColor;color:inherit;font-size:13px;transition:background .2s,color .2s,border-color .2s}
.film-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lab .film-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.film-btn:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
.film-wide{margin:0 0 42px;max-width:min(100%,1040px)}
.hybrid{background:#c3dcd5;color:var(--ink)}
.hybrid-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:8%;align-items:center}
.hybrid .eyebrow{color:#2f4a40}
.hybrid-lead{font-size:17px;max-width:46ch;margin:26px 0}
.hybrid-steps{list-style:none;margin:0 0 34px;padding:0;max-width:46ch;border-top:1px solid #8fb2a6}
.hybrid-steps li{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid #8fb2a6;font-size:15px}
.hybrid-steps span{font-size:12px;color:var(--rust);letter-spacing:.1em;min-width:22px;padding-top:3px}
.hybrid .button.outline{border-color:var(--ink)}
.interlude-media{position:relative;padding-bottom:9%}
.interlude-film{position:absolute;right:-4%;bottom:-12%;width:34%;transform:rotate(5deg);background:var(--paper);padding:9px 9px 6px;box-shadow:0 18px 44px #2422192e;z-index:2}
.interlude-film figcaption{margin-top:8px}
.interlude-film .film-btn{position:absolute;right:16px;bottom:48px;margin:0;background:var(--paper);color:var(--ink);border-color:var(--ink);min-height:44px}
@media(max-width:820px){.hybrid-grid{grid-template-columns:1fr;gap:34px}.film-tall{max-width:440px}}
@media(max-width:700px){.film-wide{margin-bottom:30px}.interlude-media{max-width:430px;margin:0 auto 26%}.interlude-film{width:38%;right:-3%;bottom:-24%}.hybrid-lead{font-size:16px}}
.interlude-film figcaption{min-width:0}
.interlude-film .film-tag{white-space:normal;line-height:1.25;letter-spacing:.08em;padding:3px 7px}

/* ===== hero v3 (V2.4): quality, depth and interaction ===== */
/* headline: base rule makes every h1 span a Barlow block, so the new inline pieces reset that */
.hero-v2 h1 .hl{display:inline-block}
.hero-v2 h1 em span{font-family:inherit;font-weight:inherit}
.hero-v2 h1 em .hl{display:inline-block}
.hero-v2 h1 em .u-plan{position:relative;display:inline-block}
.hero-v2 h1 .scribble{position:absolute;left:0;bottom:-.1em;width:100%;height:.26em;overflow:visible;pointer-events:none}
.hero-v2 h1 .scribble path{fill:none;stroke:var(--rust);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
@keyframes hl-in{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
@keyframes hl-fade{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes stage-open{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes rec{50%{opacity:0}}
@media(prefers-reduced-motion:no-preference){
  .hero-v2 h1 .hl{animation:hl-in 1.1s var(--motion-ease) .1s both}
  .hero-v2 h1 .hl-2{animation-delay:.22s}
  .hero-v2 h1 em .hl-3{animation:hl-fade 1s var(--motion-ease) .5s both}
  .hero-v2 .eyebrow .small-rule{transform-origin:0 50%;animation:rule-in .9s var(--motion-ease) .05s both}
  .hero-v2 .hero-description{animation:hl-fade .9s var(--motion-ease) .75s both}
  .hero-v2 .hero-actions{animation:hl-fade .9s var(--motion-ease) .9s both}
  .hero-v2 h1 .scribble path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s var(--motion-ease) 1.2s forwards}
  .hero-v2 .hero-stage{animation:stage-open 1.3s var(--motion-ease) .1s backwards}
}
/* stage: crisp focus ring, depth layers, film grain, camera marks, HUD, cursor */
.hero-stage{--mx:0;--my:0;touch-action:pan-y;outline:none}
.hero-stage:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
.visual-panel{translate:calc(var(--mx) * var(--d,0) * 1px) calc(var(--my) * var(--d,0) * 1px)}
.panel-left{--d:-14}.panel-film{--d:16}.panel-right{--d:-24}
.campaign-focus{--d:14}.campaign-hydration{--d:-20}
.lc-cover{--d:-12}.lc-reel{--d:16}.lc-art{--d:-26}
.stage-word,.gimmi-type,.lilith-type{translate:calc(var(--mx) * -34px) calc(var(--my) * -14px)}
.hero-stage.is-live .visual-panel>img,.hero-stage.is-live .visual-panel>video{scale:1.07;translate:calc(var(--mx) * -7px) calc(var(--my) * -7px)}
.hero-stage:before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(16,16,13,.26))}
.hero-stage:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.17;mix-blend-mode:overlay;background-size:180px 180px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.stage-marks{position:absolute;inset:0;z-index:6;pointer-events:none}
.stage-marks i{position:absolute;width:16px;height:16px;border:2px solid #fff;mix-blend-mode:difference;transition:transform .6s var(--motion-ease)}
.stage-marks i:nth-child(1){left:7px;top:7px;border-right:0;border-bottom:0}
.stage-marks i:nth-child(2){right:7px;top:7px;border-left:0;border-bottom:0}
.stage-marks i:nth-child(3){left:7px;bottom:7px;border-right:0;border-top:0}
.stage-marks i:nth-child(4){right:7px;bottom:7px;border-left:0;border-top:0}
.hero-stage.is-hovering .stage-marks i:nth-child(1){transform:translate(7px,7px)}
.hero-stage.is-hovering .stage-marks i:nth-child(2){transform:translate(-7px,7px)}
.hero-stage.is-hovering .stage-marks i:nth-child(3){transform:translate(7px,-7px)}
.hero-stage.is-hovering .stage-marks i:nth-child(4){transform:translate(-7px,-7px)}
.stage-hud{position:absolute;z-index:6;top:13px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;color:#fff;mix-blend-mode:difference;white-space:nowrap;pointer-events:none}
.stage-hud .rec{width:7px;height:7px;border-radius:50%;background:#fff;animation:rec 1.2s steps(2,start) infinite}
.hero-stage.is-paused .stage-hud .rec{animation:none}
.hero-cursor{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:7}
.hero-cursor span{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;background:var(--paper);color:var(--ink);display:none;place-items:center;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:0;scale:.3;transition:opacity .25s,scale .45s var(--motion-ease)}
.hero-stage.has-cursor .hero-cursor span{display:grid}
.hero-stage.has-cursor.is-hovering{cursor:none}
.hero-stage.has-cursor.is-hovering .hero-cursor span{opacity:1;scale:1}
.hero-stage.has-cursor.over-ui{cursor:auto}
.hero-stage.has-cursor.over-ui .hero-cursor span{opacity:0;scale:.3}
/* chapter change: the new scene opens as an iris, the old one stays underneath until it is covered */
.motion-scene{transition:opacity 0s .95s,transform 1200ms var(--motion-ease)}
.motion-scene.is-active{transition:opacity 0s,transform 1200ms var(--motion-ease)}
/* Lilith chapter: real media at the size it can carry, on a clean ground */
.scene-lilith{background:radial-gradient(ellipse at 68% 38%,#dcc8b2,#c8af97 62%)}
.lc-cover{left:6%;top:40%;width:31%;aspect-ratio:4/5;transform:rotate(-7deg);border:6px solid var(--paper);z-index:2}
.lc-reel{left:43%;top:5%;width:31%;height:86%;transform:rotate(3deg);z-index:3;background:#2a211b}
.lc-art{left:71%;top:52%;width:23%;aspect-ratio:1;transform:rotate(8deg);border:6px solid var(--paper);z-index:4}
.lilith-type{left:5%;top:6%;bottom:auto;font-size:clamp(54px,6.2vw,96px);color:#2b1d14;text-shadow:none}
.is-active .lc-cover{animation:left-arrive 1.4s var(--motion-ease) both}
.is-active .lc-reel{animation:film-arrive 1.45s var(--motion-ease) .1s both}
.is-active .lc-art{animation:right-arrive 1.5s var(--motion-ease) .2s both}
.hero-stage.is-paused .lc-cover,.hero-stage.is-paused .lc-reel,.hero-stage.is-paused .lc-art{animation-play-state:paused}
/* portfolio: the vertical reel keeps its own frame instead of being stretched */
.lilith-editorial{background:#c8af97;display:grid;place-items:center;grid-template-columns:100%;grid-template-rows:100%}
.lilith-editorial .case-loop{width:auto;height:100%;aspect-ratio:9/16;max-width:100%;object-fit:cover}
@media(max-width:700px){
  .stage-hud{font-size:11px;letter-spacing:.1em}
  .lilith-type{font-size:52px;left:5%;top:5%}
  .lc-cover{left:3%;top:44%;width:38%}
  .lc-reel{left:40%;top:11%;width:40%;height:76%}
  .lc-art{left:68%;top:58%;width:28%}
}
@media(max-width:1100px) and (min-width:701px){.lilith-type{font-size:clamp(46px,6.4vw,72px)}.lc-reel{left:45%}}
@media(prefers-reduced-motion:reduce){.stage-hud .rec{animation:none}.hero-stage:after{opacity:.1}}
/* phones: keep the original line breaking ("Pretty on / purpose."), which needs inline text, so the entrance is a fade */
@keyframes hl-soft{from{opacity:0}to{opacity:1}}
@media(max-width:700px){
  .hero-v2 h1 .title-line .hl{display:inline}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  .hero-v2 h1 .title-line .hl{animation-name:hl-soft;animation-duration:1s}
}

/* ===== real work: published carousels (V2.5) ===== */
.hybrid-gallery{margin-top:72px}
.hybrid-gallery-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:15px;margin:0 0 22px}
.hybrid-gallery-title .film-tag{font-size:11px}
.hybrid-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.rail-item{display:block;width:100%;padding:0;border:0;background:#fff;box-shadow:0 14px 34px #1f3a3326;transition:transform .5s var(--motion-ease),box-shadow .5s;cursor:pointer}
.hybrid-rail li:nth-child(odd) .rail-item{transform:rotate(-1.2deg)}
.hybrid-rail li:nth-child(even) .rail-item{transform:rotate(1.2deg) translateY(10px)}
.rail-item:hover{transform:rotate(0) translateY(-6px);box-shadow:0 22px 44px #1f3a3340}
.rail-item:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
.rail-item img{display:block;width:100%;height:auto;aspect-ratio:1086/1448;object-fit:cover}
.dialog-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:24px}
.dialog-more img{width:100%;height:auto;max-height:none;background:#e2ded5}
@media(max-width:900px){
  .hybrid-gallery{margin-top:52px}
  .hybrid-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 18px;margin:0 -2px;-webkit-overflow-scrolling:touch}
  .hybrid-rail li{scroll-snap-align:start}
  .hybrid-rail li:nth-child(even) .rail-item{transform:rotate(1.2deg)}
}
@media(prefers-reduced-motion:reduce){.rail-item{transition:none}}