/* ==========================================================================
   Studio PM, editorial redesign.
   Idea: a photography-magazine page. Hierarchy comes from scale, spacing, type, photography and
   background rhythm, not from boxes. Black and red stay the identity; cool off-white sections give the
   page breathing room. Photos are placeholders until the client sends material (see .slot).
   ========================================================================== */

/* ---- headings: Uni Sans Heavy (upright). size-adjust keeps the width close to the previous condensed headings ---- */
@font-face{font-family:"Uni Sans";src:url("fonts/UniSans-Heavy.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap;size-adjust:88%}

/* ---- tokens ---- */
:root{
  --ink:#090708; --wine:#150a0e; --wine2:#1d0b11; --paper:#f1f1ef; --paper-2:#e5e5e2;
  --tx:#f4eeec; --mut:#b3a5a8; --tx-dark:#121214; --mut-dark:#64666b;
  --carmine:#a3122a; --carmine-hi:#bd1a35; --red:#d4132f; --redtxt:#ff6b80;
  --line:rgba(244,238,236,.14); --line-dark:rgba(18,18,20,.16);
  --display:"Roboto Condensed","Arial Narrow",sans-serif; --head:"Uni Sans","Roboto Condensed","Arial Narrow",sans-serif; --body:"Roboto",system-ui,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-io:cubic-bezier(0.77,0,0.175,1);
  --pad:clamp(20px,4.2vw,80px);          /* page gutter */
  --max:1440px;                           /* content width */
  --gap-section:clamp(88px,11vw,180px);   /* vertical rhythm between sections */
  --r:16px;                               /* corner radius: images, cards, large blocks */
  --r-s:10px;                             /* corner radius: buttons, menu items, small controls */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--tx);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
em{font-style:normal}

/* ---- surfaces: the page rhythm ---- */
.sec{position:relative;padding:var(--gap-section) var(--pad)}
.wrap{max-width:var(--max);margin:0 auto}
.s-ink{background:var(--ink)}
.s-wine{background:var(--wine)}
.s-wine2{background:var(--wine2)}
.s-red{background:var(--carmine)}
.s-paper{background:var(--paper);color:var(--tx-dark)}
.s-paper .mega em,.s-paper .mega-m em{color:var(--carmine)}

/* ---- type scale ---- */
.mega{font:900 clamp(76px,13.5vw,250px)/.84 var(--head);text-transform:uppercase;letter-spacing:-.012em}
.mega span{display:block}
.mega-m{font:900 clamp(52px,7.6vw,140px)/.9 var(--head);text-transform:uppercase;letter-spacing:-.01em}
.mega-m span{display:block}
.mega-s{font:900 clamp(54px,7vw,128px)/.88 var(--head);text-transform:uppercase}
.mega-m em,.mega em{color:var(--red)}

/* ---- buttons: one primary, one text ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 32px;border-radius:var(--r-s);cursor:pointer;text-decoration:none;white-space:nowrap;border:0;background:none;color:inherit;
  font:700 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),transform 160ms var(--ease-out)}
.btn-primary{background:var(--carmine);color:#fff}
.btn:active{transform:scale(.97);transition-duration:90ms}
.btn-text{padding:0;min-height:44px;background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;padding-bottom:4px;transition:background-size 260ms var(--ease-out)}
.arr{display:inline-block;transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--carmine-hi)}
  .btn-text:hover{background-size:100% 2px}
  .btn:hover .arr,.arc-link:hover .arr{transform:translateX(6px)}
}

/* ---- header ---- */
.hdr{position:fixed;z-index:50;top:0;left:0;right:0;height:84px;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-bottom:1px solid transparent;transition:background-color 240ms var(--ease-out),border-color 240ms var(--ease-out)}
.hdr.solid{background:rgba(9,7,8,.94);border-bottom-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--tx);justify-self:start;font:900 26px/1 var(--head);letter-spacing:-.005em;text-transform:uppercase}
.brand em{color:var(--red)}
.brand img{width:36px;height:36px;object-fit:contain}
.nav{display:flex;gap:10px}
.nav a{padding:12px 14px;border-radius:var(--r-s);text-decoration:none;color:var(--tx);font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  transition:background-color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.nav a.on{background:var(--carmine)}
.nav a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.nav a:not(.on):hover{background:rgba(244,238,236,.1)}}
.hdr-right{justify-self:end;display:flex;align-items:center;gap:10px}
.hdr-btn{min-height:40px;padding:0 20px;font-size:13px}
.soc-group{display:flex;height:40px;border:1px solid rgba(244,238,236,.34);border-radius:var(--r-s);overflow:hidden}
.soc{display:grid;place-items:center;width:44px;transition:background-color 160ms var(--ease-out)}
.soc+.soc{border-left:1px solid rgba(244,238,236,.34)}
.soc img{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){.soc:hover{background:var(--carmine)}}

/* ---- photo placeholders: dark burgundy fields, replaced by real photos later ---- */
.media{position:relative;overflow:hidden;background:#1b0b10;border-radius:var(--r)}
.slot{position:absolute;inset:0;background-color:#2a0f16;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 1px,transparent 1px 22px)}
.slot[data-i="1"]{background-color:#1f0c12}.slot[data-i="2"]{background-color:#35131c}.slot[data-i="3"]{background-color:#161012}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 35%)}
.slot-label{position:absolute;left:18px;top:16px;font:700 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,238,236,.55)}
.slot.has-photo .slot-label{display:none}
/* rotating photo blocks (cycle.js): soft fade only; no zoom, so a whole dancer is never cut by the frame */
.media[data-cycle] .slot{opacity:0;transition:opacity 800ms var(--ease-out)}
.media[data-cycle] .slot.cur{opacity:1}

/* ---- 01 hero ---- */
.hero{position:relative;min-height:clamp(620px,84svh,1000px);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media .slot{opacity:0;transition:opacity 900ms var(--ease-out)}
.hero-media .slot.cur{opacity:1}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(9,7,8,.9) 0%,rgba(9,7,8,.4) 40%,rgba(9,7,8,.06) 100%),linear-gradient(to right,rgba(9,7,8,.5),transparent 55%)}
.hero-in{width:100%;max-width:var(--max);margin:0 auto;padding:140px var(--pad) clamp(56px,7vw,110px)}
.kicker{font:700 14px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--tx);animation:fade 600ms var(--ease-out) 100ms backwards}
.hero h1{margin-top:28px;font-family:var(--head);font-style:normal;font-weight:900;text-transform:uppercase;line-height:.88}
.l1{display:block;font-size:clamp(34px,6.4vw,120px);animation:focusin 900ms var(--ease-out) 60ms backwards}
.l2{display:block;font-size:clamp(50px,16vw,320px);padding:.06em 0 .1em;animation:focusin 900ms var(--ease-out) 140ms backwards}
@keyframes focusin{from{opacity:0;filter:blur(12px);transform:scale(1.02)}}
@keyframes fade{from{opacity:0}}
.focus{position:relative;display:inline-block;line-height:1;padding:0 .12em 0 .08em;margin-left:-.08em;white-space:nowrap}
.focus em{color:var(--red)}
/* camera crop marks around the studio name; app.js fits them to the real letter bounds */
.c{position:absolute;width:.12em;height:.12em;border:0 solid var(--carmine-hi);animation:lock 520ms var(--ease-out) 760ms backwards}
.c.k-tl{left:0;top:calc(var(--ft,.08) * 1em);border-width:var(--bw,4px) 0 0 var(--bw,4px);transform-origin:100% 100%}
.c.k-tr{right:0;top:calc(var(--ft,.08) * 1em);border-width:var(--bw,4px) var(--bw,4px) 0 0;transform-origin:0 100%}
.c.k-bl{left:0;bottom:calc(var(--fb,.08) * 1em);border-width:0 0 var(--bw,4px) var(--bw,4px);transform-origin:100% 0}
.c.k-br{right:0;bottom:calc(var(--fb,.08) * 1em);border-width:0 var(--bw,4px) var(--bw,4px) 0;transform-origin:0 0}
@keyframes lock{from{opacity:0;transform:scale(1.5)}}
.focus{--bw:clamp(3px,.02em,6px)}
.lead{max-width:34em;margin-top:20px;font-size:clamp(18px,1.5vw,24px);line-height:1.5;color:#e0d5d3;animation:fade 600ms var(--ease-out) 500ms backwards}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px;margin-top:36px;animation:fade 600ms var(--ease-out) 600ms backwards}

/* ---- 02 upcoming: one featured event ---- */
.feat{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:center;margin-top:clamp(40px,5vw,88px)}
.feat-date{display:flex;align-items:baseline;gap:18px;color:var(--carmine)}
.feat-date b{font:900 clamp(150px,19vw,340px)/.8 var(--head);letter-spacing:-.02em}
.feat-date span{font:700 clamp(15px,1.3vw,20px)/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-dark)}
.feat-copy h3{margin-top:clamp(20px,2.2vw,36px);font:900 clamp(38px,4.4vw,80px)/.95 var(--head);text-transform:uppercase}
.feat-loc{margin-top:12px;font-size:clamp(17px,1.4vw,22px);color:var(--mut-dark)}
.feat-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:clamp(28px,3vw,44px)}
.feat-img{position:relative}
.feat-img .px-box{overflow:hidden;background:#d8d8d5}
.feat-img img{width:100%;height:auto;max-height:78vh;object-fit:cover}
.feat-bg{position:absolute;z-index:-1;right:8%;top:-14%;font:900 clamp(240px,34vw,560px)/.8 var(--head);color:transparent;-webkit-text-stroke:1px rgba(18,18,20,.1);pointer-events:none}
.feat-empty{margin-top:56px;font-size:clamp(20px,2vw,28px)}
.feat-more{margin-top:clamp(48px,6vw,96px);border-top:1px solid var(--line-dark)}
.feat-more li{display:grid;grid-template-columns:140px minmax(0,1fr) 220px auto;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line-dark)}
.fm-d b{font:900 34px/1 var(--head);color:var(--carmine)}
.fm-d{font:700 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.fm-t{font:900 clamp(20px,1.8vw,28px)/1.1 var(--head);text-transform:uppercase}
.fm-l{color:var(--mut-dark)}

/* text links for galleries (Photos / Videos) */
.tl-row{display:flex;flex-wrap:wrap;gap:6px 22px}
.tl{font:700 14px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;padding-bottom:3px;transition:background-size 240ms var(--ease-out)}
.s-paper .tl{color:var(--tx-dark)}
.soon{font:700 13px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;opacity:.6}
@media (hover:hover) and (pointer:fine){.tl:hover{background-size:100% 2px}.tl:hover .arr{transform:translate(3px,-3px)}}

/* ---- 03 past events: editorial archive ---- */
.past-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:clamp(24px,4vw,72px);align-items:end}
.past-tools p{max-width:26em;color:var(--mut);font-size:clamp(17px,1.3vw,20px)}
.yrs{display:flex;gap:28px;margin-top:24px}
.yr{background:none;border:0;padding:0 0 8px;cursor:pointer;color:var(--mut);font:900 clamp(26px,2.2vw,38px)/1 var(--head);
  border-bottom:3px solid transparent;transition:color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.yr small{margin-left:8px;font:700 13px/1 var(--display);letter-spacing:.1em;vertical-align:top}
.yr[aria-pressed="true"]{color:var(--tx);border-bottom-color:var(--red)}
@media (hover:hover) and (pointer:fine){.yr:not([aria-pressed="true"]):hover{color:var(--tx)}}
/* uniform grid: every card is the same 4:3 image plus the same text block (date, title, place, links) */
.arch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(36px,3.6vw,60px) clamp(16px,1.6vw,28px);margin-top:clamp(40px,5vw,80px)}
.t{display:flex;flex-direction:column}
.t-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#1b0b10;border-radius:var(--r)}
.t-img img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 700ms var(--ease-out)}
.t-img.noimg{background-color:#2a0f16;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 1px,transparent 1px 22px)}
/* event without a poster: the hero's grid and the city set large, from the event data */
.t-cover{container-type:inline-size;display:grid;place-items:center;background-color:var(--wine2);
  background-image:linear-gradient(rgba(244,238,236,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(244,238,236,.05) 1px,transparent 1px);
  background-size:25% 33.3334%;background-position:-1px -1px}
.t-cover::after{display:none}
/* the city, as large as the card allows: three steps by name length so long names still fit on one line */
.tc-city{position:relative;z-index:1;max-width:84cqi;font:900 19.5cqi/.9 var(--head);text-transform:uppercase;text-align:center;
  color:var(--tx);overflow-wrap:anywhere}
.tc-city.tc-mid{font-size:14cqi}.tc-city.tc-long{font-size:10.5cqi}
.t-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,7,8,.5) 0%,rgba(9,7,8,0) 38%)}
.t-body{display:flex;flex-direction:column;flex:1;gap:6px;padding-top:16px}
.t-meta{font:700 13px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--redtxt)}
.t-body h3{font:900 clamp(20px,1.7vw,28px)/1.04 var(--head);text-transform:uppercase;min-height:2.08em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color 200ms var(--ease-out)}
.t-loc{font-size:15px;line-height:1.4;color:var(--mut)}
.t-body .tl-row,.t-body .soon{margin-top:auto;padding-top:12px}
.t-body .tl{color:var(--tx)}
@media (hover:hover) and (pointer:fine){
  .t:hover .t-img img{transform:scale(1.04)}
  .t:hover h3{color:var(--redtxt)}
}
.arch-more{display:flex;margin-top:clamp(36px,4vw,64px)}
.arch-more .btn-text{font-size:15px}

/* ---- 04 archive transition ---- */
.s-red{padding-top:clamp(72px,9vw,150px);padding-bottom:clamp(72px,9vw,150px)}
.arc{display:flex;align-items:flex-end;justify-content:space-between;gap:40px 64px;flex-wrap:wrap}
.arc-link{font:900 clamp(26px,3vw,52px)/1 var(--head);text-transform:uppercase;text-decoration:none;color:#fff;
  background:linear-gradient(#fff,#fff) left bottom/100% 3px no-repeat;padding-bottom:8px}

/* ---- 05 packages: steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3.4vw,64px);margin-top:clamp(56px,7vw,120px)}
.steps li{display:grid;gap:14px;align-content:start;border-top:2px solid var(--tx-dark);padding-top:22px}
.st-n{font:900 clamp(70px,8vw,140px)/.8 var(--head);color:var(--carmine)}
.steps b{font:900 clamp(22px,1.9vw,30px)/1.05 var(--head);text-transform:uppercase}
.steps li>span:last-child{font-size:16px;line-height:1.55;color:var(--mut-dark);max-width:24em}

/* ---- 06 photo packages ---- */
.pp-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pp-tag{font:700 13px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--redtxt)}
.pp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);margin-top:clamp(48px,6vw,96px);align-items:stretch}
.pp{display:flex;flex-direction:column}
.pp .btn{align-self:flex-start}
/* the client's photos are 2:3, so the frame is 2:3 too: nothing of the couple is cut */
.pp-img{aspect-ratio:2/3}
/* metal frames: a brushed band in the tier's metal, then a hairline of the same metal one gap outside it */
.pp-img{border:4px solid transparent;background:linear-gradient(135deg,var(--m-hi),var(--m) 38%,var(--m-lo) 62%,var(--m) 82%,var(--m-hi)) border-box;
  box-shadow:0 0 0 6px var(--wine),0 0 0 7px var(--m-line)}
.pp-bronze{--m:#c8814a;--m-hi:#efc49a;--m-lo:#7c4626;--m-line:rgba(200,129,74,.5)}
.pp-silver{--m:#c9ccd3;--m-hi:#f4f5f8;--m-lo:#777c86;--m-line:rgba(201,204,211,.45)}
.pp-gold{--m:#e2b23f;--m-hi:#f9e08f;--m-lo:#8c6517;--m-line:rgba(226,178,63,.5)}
.pp-bronze .slot{background-color:#3a1a16}.pp-silver .slot{background-color:#251a1f}.pp-gold .slot{background-color:#3a2a15}
.pp-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:26px}
.pp-name{display:flex;align-items:center;gap:12px;font:900 clamp(32px,3vw,52px)/1 var(--head);text-transform:uppercase}
.pp-price{font:900 clamp(54px,5.2vw,96px)/.9 var(--head)}
.pp-sum{flex:1;margin:14px 0 26px;padding-top:14px;border-top:1px solid var(--m-line,var(--line));color:#d8cbcd}
.pp-sum b{color:var(--tx)}
.pp-hot{display:block;margin-top:8px;font:700 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--redtxt)}
.medal{flex:none;width:.5em;height:.5em;border-radius:50%}
.medal-bronze{background:#c8814a}.medal-silver{background:#c9ccd3}.medal-gold{background:#e2b23f}

/* ---- 07 services: alternating rows ---- */
.svc-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,120px);align-items:center}
.svc.rev .svc-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.svc.rev .svc-copy{order:2}
.svc-n{font:900 clamp(20px,1.8vw,28px)/1 var(--head);color:var(--red)}
.s-paper .svc-n{color:var(--carmine)}
.svc .mega-s{margin-top:14px}
.svc-sub{margin-top:18px;font-size:clamp(17px,1.4vw,21px);color:var(--mut)}
.s-paper .svc-sub{color:var(--mut-dark)}
.pl-list{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.s-paper .pl-list{border-top-color:var(--line-dark)}
.pl{border-bottom:1px solid var(--line)}
.s-paper .pl{border-bottom-color:var(--line-dark)}
.pl summary{display:flex;align-items:baseline;gap:12px;padding:20px 0;cursor:pointer;list-style:none}
.pl summary::-webkit-details-marker{display:none}
.pl-name{font:900 clamp(20px,1.8vw,30px)/1.1 var(--head);text-transform:uppercase;transition:color 160ms var(--ease-out)}
/* what a package contains stays on the closed row, so packages compare without opening each one */
.pl-head{display:flex;flex-direction:column;gap:6px;min-width:0}
.pl-spec{font-size:14px;font-weight:500;line-height:1.35;color:var(--mut)}
.s-paper .pl-spec{color:var(--mut-dark)}
.pl-dots{flex:1;min-width:20px;border-bottom:1px dotted currentColor;opacity:.3;transform:translateY(-6px)}
.pl-price{font:900 clamp(26px,2.4vw,40px)/1 var(--head)}
.pl-chev{flex:none;width:9px;height:9px;margin-left:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-5px) rotate(45deg);transition:transform 220ms var(--ease-out);opacity:.6}
.pl[open] .pl-chev{transform:translateY(0) rotate(-135deg)}
.pl[open] .pl-name{color:var(--red)}
.s-paper .pl[open] .pl-name{color:var(--carmine)}
@media (hover:hover) and (pointer:fine){.pl summary:hover .pl-name{color:var(--red)}.s-paper .pl summary:hover .pl-name{color:var(--carmine)}}
.pl-body{padding:0 0 28px;animation:open 260ms var(--ease-out)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}
.pl-info{font-weight:700;font-size:16px}
.pl-feat{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 22px}
.pl-feat li{font-size:15px;color:var(--mut)}
.s-paper .pl-feat li{color:var(--mut-dark)}
.pl-body .btn{min-height:50px;padding:0 26px}
/* every photo here is 2:3 portrait, so every frame is 2:3 portrait: whole couples, no cut heads or feet */
.svc-img{aspect-ratio:2/3;width:min(100%,420px);justify-self:center}
/* sample videos: 9:16 like the clips, one per package, cross-fading (videos.js); the caption names the package */
.svc-fig{margin:0;width:min(100%,360px);justify-self:center}
.svc-vid{aspect-ratio:9/16;width:100%}
.svc-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 600ms cubic-bezier(.16,1,.3,1)}
.svc-vid video.cur{opacity:1}
.vid-cap{margin-top:14px;font:700 13px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--tx)}
.vid-cap span{margin-right:.5em;color:var(--mut)}
.s-paper .vid-cap{color:var(--tx-dark)}.s-paper .vid-cap span{color:var(--mut-dark)}
/* pause / play: WCAG 2.2.2, moving content longer than 5 s can be stopped */
.vid-btn{position:absolute;z-index:2;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;cursor:pointer;
  border:1px solid rgba(244,238,236,.4);border-radius:var(--r-s);background:rgba(9,7,8,.55);color:var(--tx);transition:background-color 160ms var(--ease-out)}
.vid-btn i{position:relative;width:12px;height:14px}
.vid-btn i::before,.vid-btn i::after{content:"";position:absolute;top:0;width:4px;height:14px;background:currentColor}
.vid-btn i::before{left:0}.vid-btn i::after{right:0}
.vid-btn.is-paused i::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.vid-btn.is-paused i::after{display:none}
.vid-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.vid-btn:hover{background:var(--carmine)}}
@media (prefers-reduced-motion:reduce){.svc-vid video,.vid-btn{transition:none}}

/* ---- 08 portfolio moment ---- */

/* ---- 09 contact ---- */
.ct{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,120px);align-items:center}
.ct-phone{display:block;margin-top:clamp(36px,4.4vw,72px);text-decoration:none}
.ct-k{display:block;margin-bottom:14px;font:700 14px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.ct-num{display:block;font:900 clamp(48px,7.4vw,140px)/.9 var(--head);transition:color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ct-phone:hover .ct-num{color:var(--red)}}
.ct-info{display:flex;flex-wrap:wrap;gap:24px clamp(32px,4vw,64px);margin-top:clamp(32px,4vw,56px)}
.ct-info dt{font:700 13px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.ct-info dd{font:900 clamp(20px,1.7vw,28px)/1.1 var(--head);text-transform:uppercase}
.ct-info a{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;padding-bottom:3px;transition:background-size 240ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ct-info a:hover{background-size:100% 2px}}
.ct-img{aspect-ratio:2/3;width:min(100%,420px);justify-self:end;margin-right:calc(var(--pad) * -1)}

/* ---- 10 footer ---- */
.ftr{background:var(--ink);padding:clamp(48px,6vw,88px) var(--pad) 0;overflow:hidden}
.ftr-row{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.ftr-nav,.ftr-soc{display:flex;flex-wrap:wrap;gap:10px 28px}
.ftr-nav a,.ftr-soc a{font:700 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--mut);transition:color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ftr-nav a:hover,.ftr-soc a:hover{color:var(--tx)}}
.ftr-copy{font-size:14px;color:var(--mut)}
.ftr-mark{margin:clamp(40px,6vw,96px) 0 -.12em;text-align:center;white-space:nowrap;font:900 clamp(76px,19vw,380px)/.78 var(--head);text-transform:uppercase;color:var(--tx);opacity:.96}
.ftr-mark em{color:var(--carmine)}

/* ---- entrance animation (reveal.js adds .rv, then .in) ---- */
.rv .rise{opacity:0;transform:translateY(22px)}
.rv .rise.in{opacity:1;transform:none;transition:opacity 700ms var(--ease-out),transform 800ms var(--ease-out);transition-delay:var(--d,0ms)}

/* no scroll parallax on photos: it needs an enlarged image, and the enlargement cut heads and feet off the dancers */
@supports (animation-timeline:view()){
  .px-hero{animation:herodrift linear both;animation-timeline:scroll(root block);animation-range:0 100vh}
  @keyframes herodrift{to{transform:translateY(14%)}}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .hdr{grid-template-columns:1fr auto}
  .nav{display:none}
  .feat{grid-template-columns:1fr}
  .feat-img{margin-right:0}
  .feat-bg{display:none}
  .feat-more li{grid-template-columns:90px minmax(0,1fr);row-gap:6px}
  .feat-more .fm-l,.feat-more .tl-row{grid-column:2}
  .past-head{grid-template-columns:1fr}
  .arch{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-grid,.svc.rev .svc-grid{grid-template-columns:1fr}
  .svc.rev .svc-copy{order:0}
  .svc-img,.svc-fig{order:-1;max-width:560px}
  .work-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-row .media{margin-top:0!important}
  .w5{display:none}
  .ct{grid-template-columns:1fr}
  .ct-img{margin-right:0;max-width:560px}
}
@media (max-width:640px){
  .hdr{height:72px}
  .hdr .soc-group{display:none}
  .hero-in{padding-top:120px}
  .cta{gap:14px 24px}
  .btn{padding:0 26px}
  .steps{grid-template-columns:1fr}
  .arch{grid-template-columns:1fr}
  .feat-date b{font-size:clamp(130px,42vw,220px)}
  .ftr-row{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv .rise{opacity:1;transform:none;transition:none}
  .kicker,.l1,.l2,.lead,.cta,.c{animation:none}
  .px-box .slot,.px-box img,.px-hero{animation:none}
  .media[data-cycle] .slot,.hero-media .slot{transition:none}
  .pl-body{animation:none}
}

/* hero placeholders are lighter wine tones so the full-bleed image area reads as a photograph-to-come */
.hero-media .slot[data-i="0"]{background-color:#4a1420}
.hero-media .slot[data-i="1"]{background-color:#3a101a}
.hero-media .slot[data-i="2"]{background-color:#58192a}
.hero-media .slot[data-i="3"]{background-color:#2c0f16}
.hero-media .slot-label{left:auto;right:var(--pad);top:auto;bottom:clamp(24px,3vw,44px)}

/* still placeholders: a touch lighter so frames read as images-to-come */
.wd .slot,.wd-sm .slot,.wd-5 .slot,.pp-img .slot,.work-row .slot,.svc-img .slot,.ct-img .slot{filter:brightness(1.55)}

.work{padding-bottom:clamp(64px,9vw,150px)}

/* touch: every tappable text link and filter gets a 44px target */
@media (pointer:coarse),(max-width:640px){
  .tl{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;background-position:left calc(100% - 10px)}
  .yr{min-height:44px}
  .tl-row{gap:0 20px}
  .btn-text{min-height:48px}
}

/* phones: keep the studio name as large as the width allows */
@media (max-width:640px){.l2{font-size:17.6vw}.l1{font-size:11.6vw}}

/* ---- 04 what we do: compact editorial grid ---- */
.what{padding-top:clamp(72px,8vw,128px);padding-bottom:clamp(72px,8vw,128px)}
.what-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 64px;flex-wrap:wrap}
.what-intro{max-width:22em;color:var(--mut);font-size:clamp(17px,1.3vw,20px)}
.wd-n{display:block;font:900 clamp(40px,3.8vw,68px)/.8 var(--head);color:var(--red)}
.wg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2vw,32px) clamp(14px,1.6vw,24px);margin-top:clamp(36px,4vw,64px)}
.wg-main{position:relative;grid-column:1/7;grid-row:1/3;min-height:clamp(420px,40vw,620px);overflow:hidden;display:flex;align-items:flex-end;border-radius:var(--r)}
.wg-main .media{position:absolute;inset:0}
.wg-main::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,7,8,.86) 0%,rgba(9,7,8,.2) 55%,rgba(9,7,8,0) 80%)}
.wg-main-t{position:relative;z-index:2;padding:clamp(20px,2.4vw,40px)}
.wg-main .wd-n{font-size:clamp(76px,8.4vw,150px)}
.wg-main h3{margin-top:12px;font:900 clamp(38px,4.4vw,80px)/.9 var(--head);text-transform:uppercase}
.wg-main p{margin-top:12px;max-width:24em;color:#e0d5d3;font-size:clamp(16px,1.2vw,19px);line-height:1.5}
.wm{grid-column:span 3;display:flex;flex-direction:column;gap:14px;min-width:0}
.wm .media{width:100%;aspect-ratio:4/3}
.wm-4 .media,.wm-5 .media{aspect-ratio:16/9}
.wm-t{display:flex;align-items:flex-start;gap:clamp(10px,1vw,16px)}
.wm h3{font:900 clamp(22px,2vw,34px)/.95 var(--head);text-transform:uppercase}
.wm p{margin-top:6px;color:var(--mut);font-size:15px;line-height:1.45}
.wg .slot,.pp-img .slot,.svc-img .slot,.ct-img .slot{filter:brightness(1.55)}

/* ---- archive CTA: the natural footer of Past events ---- */
.arch-row{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px 40px;flex-wrap:wrap;margin-top:clamp(48px,6vw,96px);padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line);text-decoration:none}
.arch-row::before{content:"";position:absolute;top:-1px;left:0;width:72px;height:3px;background:var(--red)}
.ar-t{font:900 clamp(24px,2.6vw,44px)/1 var(--head);text-transform:uppercase;transition:color 200ms var(--ease-out)}
.ar-l{font:700 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--redtxt)}
@media (hover:hover) and (pointer:fine){.arch-row:hover .arr{transform:translateX(6px)}.arch-row:hover .ar-t{color:var(--redtxt)}}

/* ---- packages intro: tighter ---- */
#packages{padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(48px,5vw,80px)}
#packages .steps{margin-top:clamp(28px,3vw,48px);gap:clamp(20px,2.4vw,40px)}
#packages .steps li{padding-top:14px;gap:8px}
#packages .st-n{font-size:clamp(46px,5vw,84px)}
#packages .steps b{font-size:clamp(18px,1.5vw,24px)}
#packages .steps li>span:last-child{font-size:15px;max-width:19em}
#photo{padding-top:clamp(56px,6vw,96px)}

/* ---- contact: a short red rule marks the cut from the video section ---- */
.ct-rule{position:absolute;top:0;left:var(--pad);width:96px;height:4px;background:var(--carmine)}

/* ---- background system: viewfinder grid and crop marks, only on some dark sections ---- */
.fx{position:relative;overflow:hidden}
.fx>.wrap{position:relative;z-index:1}
.fx::before,.fx::after{content:"";position:absolute;pointer-events:none;inset:-48px 0;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
/* layer 1: 12-column hairlines and horizontal guides; drifts a little with scroll */
.fx::before{opacity:var(--fx-a,.05);
  background-image:linear-gradient(90deg,#f4eeec 1px,transparent 1px),linear-gradient(#f4eeec 1px,transparent 1px);
  background-size:calc(100% / 12) 100%,100% 168px}
/* layer 2: crop marks, ruler ticks and one red registration mark; drifts very slowly on its own */
.fx::after{opacity:var(--fx-b,.1);inset:-48px -48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' fill='none' stroke='%23f4eeec' stroke-width='1'%3E%3Cpath d='M96 128V96h32M624 592v32h-32M624 96h-32M624 96v32M96 624v-32M96 624h32'/%3E%3Cpath d='M336 240v12M330 246h12M456 400v12M450 406h12'/%3E%3Cpath d='M200 96v6M208 96v6M216 96v10M224 96v6M232 96v6M240 96v10'/%3E%3Cg stroke='%23d4132f'%3E%3Ccircle cx='560' cy='480' r='6'/%3E%3Cpath d='M548 480h24M560 468v24'/%3E%3C/g%3E%3C/svg%3E");
  background-size:720px 720px;animation:fxdrift 36s ease-in-out infinite alternate;will-change:transform}
.fx-lo{--fx-a:.035;--fx-b:.07}
.fx-hi{--fx-a:.055;--fx-b:.11}
.hero.fx::before,.hero.fx::after{z-index:-1}
@keyframes fxdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-28px,18px,0)}}
@supports (animation-timeline:view()){
  .fx::before{animation:fxscroll linear both;animation-timeline:view();animation-range:cover}
  @keyframes fxscroll{from{transform:translateY(-16px)}to{transform:translateY(16px)}}
}
@media (prefers-reduced-motion:reduce){.fx::before,.fx::after{animation:none}}

/* ---- responsive ---- */
@media (max-width:760px){.pp-grid{grid-template-columns:1fr;max-width:560px}}
@media (max-width:900px){
  .wg-main{grid-column:1/-1;grid-row:auto;min-height:360px}
  .wm{grid-column:span 6}
  .fx::before{background-size:calc(100% / 6) 100%,100% 140px}
}
@media (max-width:640px){
  .hero{min-height:88svh}
  .wm{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px}
  .wm .media,.wm-4 .media,.wm-5 .media{width:104px;flex:none;aspect-ratio:1}
  .wm-t{flex:1;min-width:0}
  .arch-row{min-height:48px}
}

/* ==========================================================================
   Final polish
   ========================================================================== */
:root{--gap-section:clamp(80px,9vw,144px)}

/* section rhythm: shared base, deliberate variation */
.svc{padding-top:clamp(64px,7.5vw,120px);padding-bottom:clamp(64px,7.5vw,120px)}
.what{padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(64px,7vw,112px)}
#contact{padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(72px,8vw,120px)}

/* archive row: a little more presence, still the footer of Past events */
.arch-row{margin-top:clamp(64px,7vw,112px);padding-top:clamp(30px,3.2vw,48px);padding-bottom:clamp(8px,1vw,16px);transition:border-color 240ms var(--ease-out)}
.arch-row::before{width:72px;height:3px;transition:width 360ms var(--ease-out)}
.ar-t{font-size:clamp(30px,3.4vw,58px)}
.ar-l{display:inline-flex;align-items:center;gap:14px;font-size:15px;letter-spacing:.14em;min-height:44px}
.ar-l .arr{font-size:1.9em;line-height:.6;transition:transform 260ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .arch-row:hover::before{width:168px}
  .arch-row:hover{border-top-color:rgba(244,238,236,.32)}
  .arch-row:hover .arr{transform:translateX(10px)}
}
.arch-row:active .ar-t{transform:translateX(2px)}

/* what we do: less boxed, more editorial. Wide and narrow crops alternate across the right-hand rows. */
.wm-2,.wm-3{grid-row:1}.wm-4,.wm-5{grid-row:2}
.wm-2{grid-column:7/11}.wm-3{grid-column:11/13}.wm-4{grid-column:7/9}.wm-5{grid-column:9/13}
.wm-2 .media,.wm-5 .media{aspect-ratio:5/2}
.wm-3 .media,.wm-4 .media{aspect-ratio:6/5}
.wm-3 .wm-t,.wm-4 .wm-t{flex-direction:column;gap:8px}
.wm p{font-size:15px}

/* background pattern: a little stronger, but only where it is empty */
.fx{--fx-a:.06;--fx-b:.12}
.fx-lo{--fx-a:.043;--fx-b:.085}
.fx-hi{--fx-a:.068;--fx-b:.135}
#past.fx::before,#past.fx::after{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 300px,transparent 400px),linear-gradient(90deg,#000,transparent calc(var(--pad) + 28px),transparent calc(100% - var(--pad) - 28px),#000);
  mask-image:linear-gradient(to bottom,#000 0,#000 300px,transparent 400px),linear-gradient(90deg,#000,transparent calc(var(--pad) + 28px),transparent calc(100% - var(--pad) - 28px),#000)}
#contact.fx::before,#contact.fx::after{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 90px,transparent 150px),linear-gradient(to top,#000 0,#000 70px,transparent 130px),linear-gradient(90deg,transparent 0,transparent 52%,#000 68%);
  mask-image:linear-gradient(to bottom,#000 0,#000 90px,transparent 150px),linear-gradient(to top,#000 0,#000 70px,transparent 130px),linear-gradient(90deg,transparent 0,transparent 52%,#000 68%)}

/* header over contact: only brand and socials remain */
.hdr .nav,.hdr .hdr-btn{transition:opacity 220ms var(--ease-out)}
.hdr.at-end .nav,.hdr.at-end .hdr-btn{opacity:0;pointer-events:none}
.hdr.solid.at-end{background:transparent;border-bottom-color:transparent}

/* contact: one clean closing composition */
.ct{align-items:center}
.ct-phone{margin-top:clamp(28px,3.4vw,52px)}
.ct-info{margin-top:clamp(28px,3.2vw,44px)}
.ct-img{margin-right:calc(var(--pad) * -1)}

@media (max-width:900px){
  .wm-2,.wm-3,.wm-4,.wm-5{grid-column:span 6;grid-row:auto}
  .wm-2 .media,.wm-3 .media,.wm-4 .media,.wm-5 .media{aspect-ratio:4/3}
  .wm-3 .wm-t,.wm-4 .wm-t{flex-direction:row;gap:clamp(10px,1vw,16px)}
  #contact.fx::before,#contact.fx::after{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 90px,transparent 150px),linear-gradient(to top,#000 0,#000 70px,transparent 130px);mask-image:linear-gradient(to bottom,#000 0,#000 90px,transparent 150px),linear-gradient(to top,#000 0,#000 70px,transparent 130px)}
}
@media (max-width:640px){
  .wm-2,.wm-3,.wm-4,.wm-5{grid-column:1/-1}
  .wm .media,.wm-2 .media,.wm-3 .media,.wm-4 .media,.wm-5 .media{width:104px;flex:none;aspect-ratio:1}
  .ar-t{font-size:clamp(28px,8.4vw,36px)}
  .arch-row{gap:14px}
}
@media (prefers-reduced-motion:reduce){.arch-row::before,.ar-l .arr{transition:none}}

/* ==========================================================================
   Creative direction pass: type roles, motion language, services, upcoming
   ========================================================================== */
:root{--util:"Roboto",system-ui,sans-serif}

/* utility type: navigation, metadata and small labels use the neutral sans; display stays condensed italic */
.nav a{font:600 13px/1 var(--util);letter-spacing:.1em}
.kicker{font:600 14px/1 var(--util);letter-spacing:.16em}
.tl{font:700 13px/1.4 var(--util);letter-spacing:.1em}
.t-meta{font:600 13px/1.3 var(--util);letter-spacing:.1em}
.soon{font:600 13px/1.4 var(--util);letter-spacing:.1em}
.ct-k{font:600 14px/1 var(--util);letter-spacing:.16em}
.ct-info dt{font:600 13px/1 var(--util);letter-spacing:.16em}
.ftr-nav a,.ftr-soc a{font:600 13px/1 var(--util);letter-spacing:.1em}

/* ---- motion language: frame reveals, line reveals, numbers, corner marks ---- */
/* an image opens like a frame: clip-path wipe, no fade */
.rv .rise.rimg{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.rv .rise.rimg.in{clip-path:inset(0 0 0 0);transition:clip-path 820ms var(--ease-io);transition-delay:var(--d,0ms)}
/* large headings open line by line */
.ln{display:block;overflow:hidden;padding:.08em .12em .1em;margin:-.08em -.12em -.1em}
.ln>span{display:block}
.rv .lines.rise{opacity:1;transform:none}
.rv .lines .ln>span{transform:translateY(112%)}
.rv .lines.in .ln>span{transform:none;transition:transform 720ms var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
/* corner mark inside a frame: draws in after the frame has opened */

/* typographic moments: offset second lines */
#upcoming .mega,.what .mega{font-size:clamp(60px,9vw,160px)}
/* Past events / What we do: the title on one line (client: the two-line giant left a field of empty space
   beside it) with the intro right under it, left-aligned; Past events keeps its season tabs under the intro */
.past-head .mega,.what-head .mega{font-size:clamp(52px,7.4vw,124px);line-height:.9}
.past-head .ln,.what-head .ln{display:inline-block;vertical-align:bottom}
.past-head .ln+.ln,.what-head .ln+.ln{margin-left:.12em}
.past-head{grid-template-columns:1fr;gap:clamp(14px,1.6vw,22px)}
.past-tools p{max-width:34em}
.past-tools .yrs{margin-top:18px}
.what-head{flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,22px)}
.what-intro{max-width:34em}

/* ---- header: Services fits; menu button below 1100 ---- */
.menu-btn{display:none;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(244,238,236,.34);border-radius:var(--r-s);background:none;color:var(--tx);cursor:pointer;
  font:700 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;transition:background-color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.menu-btn:active{transform:scale(.97)}
.hdr.open{background:var(--ink);border-bottom-color:var(--line)}
@media (max-width:1100px){.menu-btn{display:inline-flex}}
@media (max-width:560px){.hdr .hdr-btn{display:none}}

/* ---- upcoming: one component, layout follows the count ---- */
.up-grid{display:grid;gap:clamp(28px,3vw,56px);margin-top:clamp(28px,3.2vw,48px)}
.up-grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.up-grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.ev{position:relative;display:grid;min-width:0;align-content:start}
.ev>.ev-body,.ev>.ev-media{position:relative;z-index:1}
.ev-media{overflow:hidden;background:#d8d8d5;margin:0}
.ev-media .px-box{width:100%;height:100%}
.ev-media img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform 700ms var(--ease-out)}
.ev-media.noimg{min-height:240px;background-image:repeating-linear-gradient(135deg,rgba(18,18,20,.06) 0 1px,transparent 1px 22px)}
@media (hover:hover) and (pointer:fine){.ev:hover .ev-media img{transform:scale(1.03)}}
.ev-date{display:flex;align-items:baseline;gap:14px;color:var(--carmine)}
.ev-date b{font:900 var(--ds)/.8 var(--head);letter-spacing:-.02em}
.ev-date span{font:700 clamp(14px,1.1vw,17px)/1 var(--util);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dark)}
.ev-body h3{margin-top:clamp(12px,1.4vw,22px);font:900 var(--ts)/.96 var(--head);text-transform:uppercase}
.ev-loc{margin-top:8px;font-size:clamp(16px,1.2vw,19px);color:var(--mut-dark)}
.ev-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:clamp(18px,2vw,30px)}
.s-paper .ev-cta .tl{color:var(--tx-dark)}
.ev-bg{position:absolute;z-index:0;right:6%;top:-18%;font:900 clamp(220px,30vw,480px)/.8 var(--head);color:transparent;-webkit-text-stroke:1px rgba(18,18,20,.09);pointer-events:none}
/* one event: large and featured */
.up-grid[data-n="1"] .ev{--ds:clamp(110px,13vw,220px);--ts:clamp(34px,3.8vw,66px);grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.up-grid[data-n="1"] .ev-media{max-height:62vh}
.up-grid[data-n="1"] .ev-media img{height:auto;max-height:62vh}
/* two events: image left, text right in each column */
.up-grid[data-n="2"] .ev{--ds:clamp(60px,5.4vw,92px);--ts:clamp(24px,2.3vw,40px);grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(16px,2vw,32px);align-items:end}
.up-grid[data-n="2"] .ev-media{order:-1;aspect-ratio:1/1}
.up-grid[data-n="2"] .ev-media img{object-position:50% 30%}
/* three events: image on top, text underneath */
.up-grid[data-n="3"] .ev{--ds:clamp(52px,4.6vw,80px);--ts:clamp(22px,2vw,32px);gap:clamp(16px,1.6vw,24px)}
.up-grid[data-n="3"] .ev-media{order:-1;aspect-ratio:4/3}

/* ---- what we do: dominant sports block, freer placement ---- */
.what{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,6vw,96px)}
.wg{--r1:clamp(340px,30vw,440px);--r2:clamp(220px,19vw,280px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:var(--r1) var(--r2);gap:clamp(14px,1.6vw,24px);margin-top:clamp(32px,3.4vw,52px)}
.wi{position:relative;display:flex;align-items:flex-end;min-width:0;overflow:hidden;border-radius:var(--r)}
.wi-bg{position:absolute;inset:0;width:auto;aspect-ratio:auto;transition:transform 900ms var(--ease-out)}
.wi::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,7,8,.84) 0%,rgba(9,7,8,.2) 55%,rgba(9,7,8,0) 80%)}
@media (hover:hover) and (pointer:fine){.wi:hover .wi-bg{transform:scale(1.03)}}
.wi-t{position:relative;z-index:2;width:100%;padding:clamp(14px,1.6vw,26px)}
.wi .wd-n{font-size:clamp(40px,3.8vw,64px)}
.wi h3{margin-top:10px;font:900 clamp(22px,2.1vw,36px)/.92 var(--head);text-transform:uppercase}
.wi p{margin-top:8px;max-width:22em;color:#e0d5d3;font-size:15px;line-height:1.45}
.wi-1{grid-column:1/8;grid-row:1}
.wi-1 .wd-n{font-size:clamp(70px,7.6vw,132px)}
.wi-1 h3{margin-top:12px;font-size:clamp(46px,6.2vw,112px);line-height:.88}
.wi-1 h3 span{display:block}
.wi-1 p{max-width:24em;font-size:clamp(16px,1.2vw,19px)}
/* numbers rise a few pixels while their frame opens */
.rv .wi .wd-n{opacity:0;transform:translateY(18px)}
.rv .wi.in .wd-n{opacity:1;transform:none;transition:opacity 520ms var(--ease-out) 260ms,transform 640ms var(--ease-out) 260ms}

/* ---- contact: WhatsApp action ---- */
#contact{position:relative}
.ct-phone{position:relative;display:block;min-height:56px}
.ct-k{display:inline-flex;align-items:center;gap:10px;color:var(--tx)}
.ct-num{display:inline-block;padding-bottom:.06em;background:linear-gradient(var(--red),var(--red)) left bottom/0 .07em no-repeat;transition:background-size 340ms var(--ease-out),color 200ms var(--ease-out),transform 200ms var(--ease-out)}
.ct-phone:active .ct-num{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .ct-phone:hover .ct-num{background-size:100% .07em;color:var(--tx)}
  .ct-phone:hover .ct-k .arr{transform:translateX(8px)}
}
.ct-vert{position:absolute;z-index:2;left:clamp(6px,1.2vw,20px);top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font:600 12px/1 var(--util);letter-spacing:.26em;text-transform:uppercase;color:var(--mut);opacity:.7;white-space:nowrap}

/* ---- responsive for the new pieces ---- */
@media (max-width:1100px){
  .ct-vert{display:none}
  .up-grid[data-n="1"] .ev{grid-template-columns:1fr;gap:20px}
  .up-grid[data-n="1"] .ev-media{order:-1}
  .ev-bg{display:none}
}
@media (max-width:900px){
  .up-grid[data-n="2"],.up-grid[data-n="3"]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .up-grid::-webkit-scrollbar{display:none}
  .up-grid[data-n="2"] .ev,.up-grid[data-n="3"] .ev{flex:0 0 min(80%,440px);scroll-snap-align:start;grid-template-columns:1fr;gap:16px;--ds:clamp(52px,14vw,76px);--ts:clamp(24px,6.4vw,32px)}
  .up-grid[data-n="2"] .ev-media,.up-grid[data-n="3"] .ev-media{aspect-ratio:4/3}
  .wg{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto}
  .wi{min-height:260px}
  .wi-1{grid-column:1/-1;grid-row:auto;min-height:clamp(340px,60vw,460px)}
  .wi-2,.wi-3{grid-column:span 3;grid-row:auto;margin-top:0;min-height:300px}
  .wi-4,.wi-5{grid-column:1/-1;grid-row:auto;min-height:220px}
}
@media (max-width:640px){
  .wi-2,.wi-3{min-height:280px}
  .wi p{font-size:14px}
  .up-grid[data-n="2"] .ev,.up-grid[data-n="3"] .ev{flex-basis:84%}
}
@media (prefers-reduced-motion:reduce){
  .rv .rise.rimg,.rv .rise.rimg.in{clip-path:none;transition:none}
  .rv .lines .ln>span,.rv .lines.in .ln>span{transform:none;transition:none}
  .rv .wi .wd-n,.rv .wi.in .wd-n{opacity:1;transform:none;transition:none}
  .wi-bg,.ev-media img,.ct-num{transition:none}
}

/* contact info: four items stay on one row on desktop */
.ct-info{gap:20px clamp(22px,2.6vw,40px)}
.ct-info dd{font-size:clamp(17px,1.4vw,23px)}

@media (max-width:900px){
  .wi-5 .wi-t{flex-direction:column;align-items:flex-start;gap:12px}
  .wi-5 p{max-width:22em;margin:0}
}

/* ==========================================================================
   What we do, final composition: one dominant block on the left (half the width, full height),
   four geometrically identical squares on the right (2 x 2). Geometry never changes on hover.
   ========================================================================== */
.wg{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-rows:auto;gap:clamp(10px,1.2vw,18px);margin-top:clamp(28px,3vw,44px)}
.wi{min-height:0}
.wi-1{grid-column:1/3;grid-row:1/3}
.wi-2{grid-column:3;grid-row:1}.wi-3{grid-column:4;grid-row:1}.wi-4{grid-column:3;grid-row:2}.wi-5{grid-column:4;grid-row:2}
.wi-2,.wi-3,.wi-4,.wi-5{aspect-ratio:1/1;margin-top:0}
.wi-2 .wi-t,.wi-3 .wi-t,.wi-4 .wi-t,.wi-5 .wi-t{display:block;padding:clamp(12px,1.3vw,20px)}
.wi-2 .wd-n,.wi-3 .wd-n,.wi-4 .wd-n,.wi-5 .wd-n{font-size:clamp(34px,3.4vw,56px)}
.wi-2 h3,.wi-3 h3,.wi-4 h3,.wi-5 h3{margin:8px 0 0;font-size:clamp(20px,1.9vw,32px);line-height:.92}
.wi h3 span{display:block}
.wi-2 p,.wi-3 p,.wi-4 p,.wi-5 p{margin:8px 0 0;max-width:none;font-size:14px;line-height:1.4}
.wi-1 h3{font-size:clamp(46px,6vw,108px)}
/* hover: image scale, overlay and text shift only */
.wi::after{opacity:.9;transition:opacity 400ms var(--ease-out)}
.wi-t{transition:transform 400ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.wi:hover::after{opacity:1}.wi:hover .wi-t{transform:translateY(-4px)}}
@media (max-width:900px){
  .wg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wi-1{grid-column:1/-1;grid-row:auto;min-height:clamp(340px,60vw,460px)}
  .wi-2,.wi-3,.wi-4,.wi-5{grid-column:auto;grid-row:auto}
}
@media (max-width:640px){
  .wi-2,.wi-3,.wi-4,.wi-5{aspect-ratio:3/4}
  .wi-2 .wi-t,.wi-3 .wi-t,.wi-4 .wi-t,.wi-5 .wi-t{padding:12px}
  .wi-2 h3,.wi-3 h3,.wi-4 h3,.wi-5 h3{font-size:clamp(19px,5.6vw,26px)}
  .wi-2 p,.wi-3 p,.wi-4 p,.wi-5 p{font-size:13.5px}
}
@media (max-width:340px){.wg{grid-template-columns:1fr}.wi-2,.wi-3,.wi-4,.wi-5{aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.wi::after,.wi-t{transition:none}.wi:hover .wi-t{transform:none}}
@media (max-width:900px){.wi-2,.wi-3,.wi-4,.wi-5{min-height:0}}

/* ==========================================================================
   Hero: typography left, one isolated dancer on the right (hero.js rotates the cut-outs)
   ========================================================================== */
.hero{min-height:clamp(620px,92vh,1000px);min-height:clamp(620px,92svh,1000px);background:radial-gradient(70% 95% at 80% 62%,#2a0d14 0%,#150a0e 52%,#090708 100%)}
.hero-in{position:relative}
.hero-in .kicker,.hero-in .l1,.hero-in .lead,.hero-in .cta{position:relative;z-index:3}
.l1{font-size:clamp(30px,4.6vw,88px)}
.l2{font-size:clamp(46px,11.4vw,230px)}
.lead{max-width:27em}
/* layers: background < crop marks (1) < dancer (2) < typography (3)
   The dancer starts to the right of STUDIO PM: the text column's left edge + the headline's width
   (STUDIO PM is ~4.5em of the .l2 size; 4.75em leaves a gap), so the figure never covers the type. */
.hero{--l2:clamp(46px,11.4vw,230px)}
/* bottom gap: the 3D lean (hero.js) moves the figure a few px, so the feet keep clear of the hero's lower edge */
.hero-fig{position:absolute;z-index:2;right:0;bottom:16px;top:clamp(96px,12vh,128px);pointer-events:none;transform-origin:50% 100%;
  left:calc(max(0px,(100% - var(--max)) / 2) + var(--pad) + 4.75 * var(--l2))}
/* directional dissolve (hero.js sets --ox): the new couple settles in from the side the cursor moves to, the old
   one drifts out the other way; transitions, so a fast sweep retargets mid-flight instead of queueing */
.hs{position:absolute;inset:0;opacity:0;transform:translate3d(var(--ox,0px),0,0) scale(.985);
  transition:opacity 380ms cubic-bezier(.4,0,.2,1),transform 720ms cubic-bezier(.16,1,.3,1)}
.hs.on{opacity:1;transform:translate3d(var(--ox,0px),0,0);transition:opacity 520ms cubic-bezier(.16,1,.3,1),transform 720ms cubic-bezier(.16,1,.3,1)}
/* headroom on top and at the sides: the hold drift (scale 1.02 from the feet + 6px sideways) stays inside the
   frame, so the wipe's clip never cuts a head, a hand or a dress */
.hs-in{position:absolute;inset:3% 3% 0;transform-origin:50% 100%}
/* original colours and light of the photo, no duotone */
.hs-in img{width:100%;height:100%;object-fit:contain;object-position:var(--pos,50% 100%)}
/* a little stage around the cut-outs (client's choice: no glow on the dancers themselves): a soft carmine
   spotlight behind the couple and a dark contact shadow on the floor, so they stand in the space */
.hero-fig::before{content:"";position:absolute;z-index:-1;inset:4% 4% 0;pointer-events:none;
  background:radial-gradient(44% 50% at 50% 42%,rgba(212,19,47,.26) 0%,rgba(212,19,47,.08) 50%,transparent 74%)}
.hero-fig::after{content:"";position:absolute;z-index:-1;left:6%;right:6%;bottom:-24px;height:110px;pointer-events:none;
  background:radial-gradient(32% 24% at 50% 50%,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 60%,transparent 100%),
             radial-gradient(50% 50% at 50% 50%,rgba(212,19,47,.16) 0%,rgba(212,19,47,.05) 55%,transparent 75%)}
/* barely visible life while a figure is held */
.hs.go .hs-in{animation:herohold calc(var(--hold,3800ms) + 1000ms) ease-out both}
@keyframes herohold{from{transform:scale(1.001)}to{transform:scale(1.02) translate3d(calc(var(--dx,1) * 6px),0,0)}}
/* placeholder silhouettes: the area and scale of a final cut-out */
.hs-ph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;translate:-10% 0}
.sil-w,.sil-m{stroke:rgba(212,19,47,.5);stroke-width:1.5}
.sil-w{fill:url(#sil-w)}.sil-m{fill:url(#sil-m)}
.sil-floor{fill:none;stroke:rgba(244,238,236,.22);stroke-width:1.5;stroke-dasharray:3 9}
.hs-label{position:absolute;right:0;bottom:-2px;font:600 11px/1 var(--util);letter-spacing:.18em;text-transform:uppercase;color:rgba(244,238,236,.5)}

/* crop marks: four corners of the measured ink box of STUDIO PM, one gap, one size, one stroke */
.focus{--gap:.1;--len:.15;position:relative;display:inline-block;line-height:1;padding:0;margin-left:0;white-space:nowrap}
.ft{position:relative;z-index:3}
.c{z-index:1;width:calc(var(--len) * 1em);height:calc(var(--len) * 1em);border-color:var(--carmine-hi)}
.c.k-tl{left:calc((var(--x0,0) - var(--gap)) * 1em);top:calc((var(--y0,.1) - var(--gap)) * 1em);right:auto;bottom:auto}
.c.k-tr{left:calc((var(--x1,4.5) + var(--gap)) * 1em - var(--len) * 1em);top:calc((var(--y0,.1) - var(--gap)) * 1em);right:auto;bottom:auto}
.c.k-bl{left:calc((var(--x0,0) - var(--gap)) * 1em);top:calc((var(--y1,.9) + var(--gap)) * 1em - var(--len) * 1em);right:auto;bottom:auto}
.c.k-br{left:calc((var(--x1,4.5) + var(--gap)) * 1em - var(--len) * 1em);top:calc((var(--y1,.9) + var(--gap)) * 1em - var(--len) * 1em);right:auto;bottom:auto}

/* phones: there is no room beside the headline, so the dancer takes the space above it, in its own box,
   and stands on the kicker line without touching the type */
@media (max-width:760px){
  .hero{min-height:max(100vh,860px);min-height:max(100svh,860px);flex-direction:column;align-items:stretch;justify-content:flex-end}
  .hero-fig{position:relative;inset:auto;flex:1 1 0;min-height:280px;width:100%;margin-top:76px}
  .hero-in{padding-top:18px}
  .hs-ph svg{translate:0 0}
  .hs-label{display:none}
}
@media (max-width:640px){.l2{font-size:17.6vw}.l1{font-size:11.6vw}}
@media (prefers-reduced-motion:reduce){.hs.go .hs-in{animation:none}.hs,.hs.on{transform:none;transition:opacity 200ms linear}}

/* ==========================================================================
   Upcoming events: section title + short intro + vertical event cards (cover on top, information below)
   ========================================================================== */
#upcoming{padding-top:clamp(72px,8vw,128px);padding-bottom:clamp(72px,8vw,128px)}
.up-layout{display:grid;gap:clamp(36px,4.4vw,72px)}
.up-head{display:grid;gap:clamp(14px,1.6vw,24px);align-content:start}
.up-title{font:900 var(--ht,clamp(52px,8vw,132px))/.86 var(--head);text-transform:uppercase}
.up-intro{max-width:21em;font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--mut-dark)}
.up-next{display:flex;align-items:center;gap:14px;margin-top:clamp(6px,1.2vw,18px);font:600 13px/1 var(--util);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dark)}
.up-next::before{content:"";flex:none;width:48px;height:3px;background:var(--carmine)}
.up-next b{font-weight:700;color:var(--carmine)}
.up-next:empty{display:none}
.feat-more:empty{display:none}
.up-empty{text-align:center}
/* layout follows the number of events */
#upcoming[data-n="1"] .up-layout{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
#upcoming[data-n="1"] .up-cards{justify-self:center}
#upcoming[data-n="2"] .up-head,#upcoming[data-n="3"] .up-head{grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:clamp(32px,6vw,120px)}
#upcoming[data-n="2"] .up-intro,#upcoming[data-n="3"] .up-intro{justify-self:end;margin-bottom:.4em}
#upcoming[data-n="2"],#upcoming[data-n="3"]{--ht:clamp(44px,6vw,100px)}
.up-cards{display:flex;justify-content:center;align-items:stretch;gap:clamp(20px,2.6vw,40px)}
.up-cards[data-n="1"]{--cw:clamp(320px,33vw,480px);--ds:clamp(46px,4vw,62px);--ts:clamp(32px,3vw,46px)}
.up-cards[data-n="2"]{--cw:clamp(300px,30vw,440px);--ds:clamp(42px,3.6vw,56px);--ts:clamp(28px,2.6vw,40px)}
.up-cards[data-n="3"]{--cw:clamp(260px,27vw,400px);--ds:clamp(38px,3.2vw,50px);--ts:clamp(24px,2.2vw,34px)}
/* one card: a cover (the event artwork) with its own edge, then a solid information area under a red rule */
.up-card{position:relative;display:flex;flex-direction:column;flex:0 0 var(--cw);width:var(--cw);background:var(--ink);color:var(--tx);border-radius:var(--r);overflow:hidden}
.up-cover{position:relative;aspect-ratio:6/5;overflow:hidden;background:var(--ink)}
.up-cover.noimg{background-color:#1b0b10;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 22px)}
.up-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 18%);transition:transform 800ms var(--ease-out)}
.up-bg{display:none;position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(22px) brightness(.55) saturate(1.15)}
/* wide artwork (landscape posters) is shown whole; the blurred copy fills the rest of the cover */
.up-cover.wide .up-bg{display:block}
.up-cover.wide .up-img{object-fit:contain;object-position:50% 50%}
.up-info{flex:1;display:flex;flex-direction:column;padding:clamp(18px,1.8vw,26px);border-top:3px solid var(--carmine)}
.up-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.up-date{display:flex;align-items:baseline;gap:12px}
.up-date b{font:900 var(--ds)/.8 var(--head);letter-spacing:-.02em;color:var(--red)}
.up-date span{font:600 13px/1 var(--util);letter-spacing:.14em;text-transform:uppercase;color:var(--tx)}
.up-no{font:600 13px/1 var(--util);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.up-info h3{margin-top:clamp(14px,1.5vw,20px);font:900 var(--ts)/.94 var(--head);text-transform:uppercase}
.up-loc{margin-top:10px;font:500 13px/1.3 var(--util);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.up-act{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin-top:auto;padding-top:clamp(16px,1.8vw,26px)}
.up-go{display:inline-flex;align-items:center;gap:10px;min-height:40px;font:700 13px/1 var(--util);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--tx)}
.up-go .arr{transition:transform 240ms var(--ease-out)}
.up-hit{position:absolute;inset:0;z-index:1}   /* the whole card is one link; the links above it keep their own target */
.up-info{position:relative;z-index:2;pointer-events:none}
.up-go,.up-act .tl{pointer-events:auto}
.up-go:focus-visible,.up-act .tl:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.up-act .tl-row{gap:0 18px}
.s-paper .up-act .tl{color:var(--mut)}
@media (hover:hover) and (pointer:fine){
  .up-card:hover .up-img{transform:scale(1.03)}
  .up-card:hover .up-go .arr{transform:translateX(7px)}
  .s-paper .up-act .tl:hover{color:var(--tx)}
}
/* tablets and phones: the title row stacks over the card; several cards swipe and the next one peeks in */
@media (max-width:1100px){
  #upcoming[data-n="1"] .up-layout{grid-template-columns:1fr;justify-items:start}
  #upcoming[data-n="1"] .up-cards{justify-self:center}
}
@media (max-width:900px){
  #upcoming{--ht:clamp(52px,14vw,96px)}
  #upcoming[data-n="2"] .up-head,#upcoming[data-n="3"] .up-head{grid-template-columns:1fr}
  #upcoming[data-n="2"] .up-intro,#upcoming[data-n="3"] .up-intro{justify-self:start}
  .up-cards[data-n="1"]{--cw:min(calc(100vw - 2 * var(--pad)),440px);--ds:clamp(48px,13vw,62px);--ts:clamp(30px,8.4vw,40px)}
  .up-cards[data-n="2"],.up-cards[data-n="3"]{--cw:min(calc(100vw - 2 * var(--pad) - 56px),420px);--ds:clamp(44px,12vw,56px);--ts:clamp(28px,7.6vw,36px);
    justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .up-cards::-webkit-scrollbar{display:none}
  .up-cards[data-n="2"] .up-card,.up-cards[data-n="3"] .up-card{scroll-snap-align:start}
}

/* ==========================================================================
   Upcoming events: one editorial composition. A broken frame (crop corners, thin rules, one label, a red rule that leads
   to the cards) ties heading, intro and cards together; the cards cross the frame lines.
   ========================================================================== */
#upcoming{--R:clamp(40px,6vw,96px);--ov:clamp(18px,2.2vw,34px);--lc:rgba(18,18,20,.6);padding-block:clamp(56px,6vw,96px)}
.up-layout{position:relative;padding-inline:clamp(28px,3.6vw,60px)}
.up-fr{position:absolute;inset:0;pointer-events:none;z-index:1}
.up-fr i,.up-fr span{position:absolute;display:block}
.fr-t{top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--lc) 0 30%,transparent 30% 45%,var(--lc) 45% 100%)}
.fr-lbl{top:0;left:30%;width:15%;transform:translateY(-50%);text-align:center;font:600 12px/1 var(--util);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-dark);white-space:nowrap}
.fr-l{left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--lc) 0 36%,transparent 36% 50%,var(--lc) 50% 100%)}
.fr-b{left:0;bottom:0;width:40%;height:1px;background:var(--lc)}
.fr-b2{left:40%;right:0;bottom:-1px;height:2px;background:var(--carmine)}
.fr-c{width:28px;height:28px;border:0 solid var(--carmine)}
.fr-c-tl{left:-1px;top:-1px;border-width:3px 0 0 3px}
.fr-c-bl{left:-1px;bottom:-1px;border-width:0 0 3px 3px}
/* two barely visible guides behind the composition, with one registration cross where they meet */
.fr-g1,.fr-g2{display:none!important;background:rgba(18,18,20,.07)}
#upcoming[data-n="1"] .fr-g1{display:block!important;top:0;bottom:0;left:55%;width:1px}
#upcoming[data-n="1"] .fr-g2{display:block!important;left:0;right:0;top:50%;height:1px}
#upcoming[data-n="1"] .fr-g1::after{content:"+";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:300 22px/1 var(--util);color:rgba(18,18,20,.3)}
/* "Next up" sits on the bottom rule, as a caption */
.up-next{position:absolute;z-index:3;left:clamp(28px,3.6vw,60px);bottom:0;transform:translateY(50%);margin:0;padding:0 16px 0 0;background:var(--paper);gap:0;font:600 13px/1 var(--util);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dark)}
.up-next::before{display:none}
.up-next b{margin-left:.7em}
.up-head{position:relative;z-index:2}
/* cards cross the top and bottom rules */
.up-cards{position:relative;z-index:2;margin-block:calc(var(--ov) * -1)}
#upcoming[data-n="1"] .up-layout{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(40px,6vw,96px);align-items:center;padding-right:var(--R)}
#upcoming[data-n="1"] .up-fr{right:var(--R)}
#upcoming[data-n="1"] .up-head{padding-block:clamp(36px,4vw,64px)}
#upcoming[data-n="1"] .up-cards{justify-self:end;margin-right:calc(var(--ov) * -1)}
#upcoming[data-n="2"] .up-head,#upcoming[data-n="3"] .up-head{padding-top:clamp(52px,5.4vw,84px)}
.up-cards[data-n="1"]{--cw:clamp(340px,36vw,540px)}
.up-cards[data-n="2"]{--cw:clamp(300px,31vw,460px)}
/* the cover wears four partial corners (two red, two light) instead of a border */
.up-cover::after{content:"";position:absolute;inset:12px;z-index:3;pointer-events:none;
  background:
    linear-gradient(var(--red),var(--red)) 0 0/24px 2px no-repeat,linear-gradient(var(--red),var(--red)) 0 0/2px 24px no-repeat,
    linear-gradient(var(--tx),var(--tx)) 100% 0/24px 2px no-repeat,linear-gradient(var(--tx),var(--tx)) 100% 0/2px 24px no-repeat,
    linear-gradient(var(--tx),var(--tx)) 0 100%/24px 2px no-repeat,linear-gradient(var(--tx),var(--tx)) 0 100%/2px 24px no-repeat,
    linear-gradient(var(--red),var(--red)) 100% 100%/24px 2px no-repeat,linear-gradient(var(--red),var(--red)) 100% 100%/2px 24px no-repeat}
.up-cover::before{content:attr(data-no);position:absolute;z-index:3;left:44px;bottom:17px;font:600 12px/1 var(--util);letter-spacing:.16em;text-transform:uppercase;color:var(--tx);text-shadow:0 0 8px rgba(0,0,0,.8)}
.up-cover.noimg::before{display:none}

@media (max-width:1100px){
  #upcoming[data-n="1"] .up-layout{grid-template-columns:1fr;justify-items:start;padding-right:clamp(28px,3.6vw,60px)}
  #upcoming[data-n="1"] .up-fr{right:0}
  #upcoming[data-n="1"] .up-cards{justify-self:center;margin-right:0;margin-top:0}
  #upcoming[data-n="1"] .up-head{padding-bottom:clamp(28px,4vw,44px)}
  #upcoming[data-n="1"] .fr-g1,#upcoming[data-n="1"] .fr-g2{display:none!important}
}
@media (max-width:900px){
  .up-layout{padding-inline:0}
  #upcoming[data-n="1"] .up-layout{padding-right:0}
  .up-cards[data-n="1"]{--cw:min(calc(100vw - 2 * var(--pad)),440px)}
  .up-cards[data-n="2"]{--cw:min(calc(100vw - 2 * var(--pad) - 56px),420px)}
  .fr-l{display:none}
  .up-next{left:0}
  .fr-lbl{left:34%;width:34%}
  .fr-t{background:linear-gradient(90deg,var(--lc) 0 34%,transparent 34% 68%,var(--lc) 68% 100%)}
  .fr-b2{left:44%}.fr-b{width:44%}
  .up-head{padding-top:clamp(44px,9vw,64px)!important}
}

/* with two or three centred cards the caption moves to the top rule, so it never collides with the cards */
#upcoming[data-n="2"] .up-next,#upcoming[data-n="3"] .up-next{bottom:auto;top:0;transform:translateY(-50%);padding:0 16px}

/* corners and label stay legible on light artwork too */
.up-cover::after{filter:drop-shadow(0 0 1px rgba(9,7,8,.75))}
.up-cover::before{padding:5px 8px;background:rgba(9,7,8,.62);text-shadow:none;left:38px;bottom:20px}
@media (max-width:900px){
  .up-fr .fr-l{display:none}
  .fr-lbl{left:30%;width:46%}
  .fr-t{background:linear-gradient(90deg,var(--lc) 0 30%,transparent 30% 76%,var(--lc) 76% 100%)}
}
@media (max-width:900px){#upcoming[data-n="2"] .fr-lbl,#upcoming[data-n="3"] .fr-lbl{display:none}}

/* no upcoming events at the moment: one compact row inside the same frame, a signpost instead of a full screen,
   with the one useful next step (where new dates appear) */
#upcoming[data-n="0"]{--ht:clamp(40px,5vw,84px);padding-block:clamp(40px,4.4vw,72px)}
#upcoming[data-n="0"] .up-layout{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(40px,6vw,96px)}
#upcoming[data-n="0"] .up-head{padding-block:clamp(36px,3.6vw,56px)}
#upcoming[data-n="0"] .up-intro{display:none}
#upcoming[data-n="0"] .up-empty{position:relative;z-index:2;justify-self:end;text-align:left}
#upcoming[data-n="0"] .up-empty::before{content:"";display:block;width:48px;height:3px;margin-bottom:18px;background:var(--carmine)}
#upcoming[data-n="0"] .feat-empty{margin:0;max-width:16em;font:900 clamp(22px,2.2vw,34px)/1 var(--head);text-transform:uppercase}
.up-follow{display:inline-block;margin-top:2px;padding-block:14px;font:700 13px/1.35 var(--util);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--tx-dark)}
.up-follow .arr{display:inline-block;margin-left:.6em;color:var(--carmine);transition:transform 240ms var(--ease-out)}
.up-follow:focus-visible{outline:2px solid var(--carmine);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.up-follow:hover .arr{transform:translateX(7px)}}
@media (max-width:900px){
  #upcoming[data-n="0"] .up-layout{grid-template-columns:1fr}
  #upcoming[data-n="0"] .up-head{padding-top:clamp(36px,8vw,52px)!important;padding-bottom:clamp(14px,3vw,20px)}
  #upcoming[data-n="0"] .up-empty{justify-self:start;padding-bottom:clamp(28px,6vw,44px)}
}
@media (prefers-reduced-motion:reduce){.up-follow .arr{transition:none}}

/* no dancer cut-outs yet: on phones the hero does not reserve room for them */
@media (max-width:760px){.hero.no-fig{min-height:clamp(560px,86vh,760px);min-height:clamp(560px,86svh,760px)}}

/* phones and tablets: the header stays solid over the Contact section so the logo never sits on top of the headline */
@media (max-width:1100px){.hdr.solid.at-end{background:rgba(9,7,8,.94);border-bottom-color:var(--line)}}

/* ==========================================================================
   Mobile menu: a panel that wipes down from the header, rows that rise in one after another.
   Opening is slower than closing (380ms against 220ms): the panel answers the tap, then gets out of the way.
   ========================================================================== */
.menu-btn .mb-i{position:relative;flex:none;width:16px;height:10px;margin-left:12px}
.menu-btn .mb-i::before,.menu-btn .mb-i::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform 260ms var(--ease-io)}
.menu-btn .mb-i::before{top:0}.menu-btn .mb-i::after{bottom:0}
.menu-btn[aria-expanded="true"] .mb-i::before{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .mb-i::after{transform:translateY(-4px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(84px + 20px) var(--pad) max(24px,env(safe-area-inset-bottom));
  background:radial-gradient(90% 55% at 92% 100%,rgba(163,18,42,.3),transparent 70%),linear-gradient(90deg,rgba(244,238,236,.035) 1px,transparent 1px) 0 0/calc(100% / 6) 100%,var(--ink);
  visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 220ms var(--ease-io),visibility 0s linear 220ms}
.mnav.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path 380ms var(--ease-io),visibility 0s}
@media (min-width:1101px){.mnav{display:none}}
@media (max-width:640px){.mnav{padding-top:calc(72px + 16px)}}

.mnav-list{margin-block:auto;border-top:1px solid var(--line)}
.mnav-list li{border-bottom:1px solid var(--line)}
.mn{display:flex;align-items:center;gap:14px;min-height:72px;padding:8px 0;color:var(--tx);text-decoration:none;transition:transform 140ms var(--ease-out)}
.mn:active{transform:scale(.98)}
.mn:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.mn-t{flex:1;min-width:0;display:block;overflow:hidden;padding:.1em 0}
.mn-t>span{display:block;font:900 clamp(32px,8.8vw,58px)/1 var(--head);text-transform:uppercase;white-space:nowrap;transition:color 160ms var(--ease-out)}
.mn-a{flex:none;font:500 22px/1 var(--body);color:var(--mut);transition:transform 220ms var(--ease-out),color 160ms var(--ease-out)}
.mn.on .mn-t>span,.mn.on .mn-a{color:var(--red)}
.mn:active .mn-a{transform:translateX(5px);color:var(--red)}

/* entrance: titles rise out of their line, numbers and arrows fade in behind them, staggered 55ms.
   Closing resets everything only after the panel is gone, so nothing jumps while it wipes away. */
.mn-t>span{transform:translateY(110%);transition:transform 0s linear 220ms,color 160ms var(--ease-out)}
.mn-a{opacity:0;transition:opacity 0s linear 220ms,transform 220ms var(--ease-out),color 160ms var(--ease-out)}
.mnav.open .mn-t>span{transform:none;transition:transform 480ms var(--ease-out) calc(110ms + var(--i) * 55ms),color 160ms var(--ease-out)}
.mnav.open .mn-a{opacity:1;transition:opacity 320ms var(--ease-out) calc(190ms + var(--i) * 55ms),transform 220ms var(--ease-out),color 160ms var(--ease-out)}
.mnav-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;padding-top:22px;opacity:0;transform:translateY(10px);transition:opacity 0s linear 220ms,transform 0s linear 220ms}
.mnav.open .mnav-foot{opacity:1;transform:none;transition:opacity 340ms var(--ease-out) calc(190ms + var(--i) * 55ms),transform 420ms var(--ease-out) calc(190ms + var(--i) * 55ms)}
.mf-soc{display:flex;gap:22px}
.mnav-foot a{display:inline-flex;align-items:center;min-height:44px;font:600 13px/1 var(--util);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-decoration:none}
.mnav-foot .mf-wa{color:var(--tx)}
.mnav-foot a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .mnav,.mnav.open{clip-path:none;transform:none}
  .mnav{opacity:0;transition:opacity 150ms linear,visibility 0s linear 150ms}
  .mnav.open{opacity:1;transition:opacity 150ms linear,visibility 0s}
  .mn-t>span,.mnav.open .mn-t>span,.mnav-foot,.mnav.open .mnav-foot{transform:none;transition:none}
  .mn-a,.mnav.open .mn-a,.mnav-foot,.mnav.open .mnav-foot{opacity:1;transition:none}
  .menu-btn .mb-i::before,.menu-btn .mb-i::after{transition:none}
}

/* wordmark in the header and footer: 25px x 88% size-adjust = a whole 22px, so the heavy strokes are not blurred by fractional sizes; a little air between the letters */
.brand{font-size:25px;letter-spacing:.025em;text-rendering:geometricPrecision}
.l1,.l2,.mega,.mega-m,.mega-s,.sec-title,.up-title{text-rendering:geometricPrecision}

/* real photos: the placeholder brightening (filter on .slot) must not touch them */
.media .slot.has-photo{filter:none;background-image:none}

/* contact: one portrait (client's choice). Desktop: the text keeps its natural width and the photo takes all the rest,
   from the text to the right edge, as tall as the text block, so there is no empty field between them.
   The photo is a head-and-shoulders portrait, so a wider frame only trims the bottom, never the head. */
@media (min-width:1101px){
  #contact{container-type:inline-size}
  .ct{grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:stretch}
  /* full bleed: out to the window's right edge and the section's top and bottom, square where it meets them
     (100cqw is the section's content box, inside its side padding) */
  .ct-img{width:auto;max-width:none;aspect-ratio:auto;min-height:540px;justify-self:stretch;border-radius:0;
    margin:calc(-1 * clamp(72px,8vw,120px)) calc(-1 * (var(--pad) + max(0px,(100cqw - var(--max)) / 2))) calc(-1 * clamp(72px,8vw,120px)) 0}
  /* the number no wider than the headline above it, which leaves the photo a real share of the width */
  .ct-num{font-size:clamp(48px,6.2vw,112px)}
}
@media (max-width:1100px){.ct-img{aspect-ratio:4/5;width:100%;max-width:560px;justify-self:start}}
/* "Write on WhatsApp" always on its own line above the number, however narrow the number gets */
.ct-k{display:flex;width:max-content}

/* Reels / Videos: every service open, no accordion (client's call): name, spec and price on one line, what is
   included right under it; one large Book now under the whole list */
.pl-row{display:flex;align-items:baseline;gap:12px;padding:22px 0 0}
.pl .pl-feat{display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0 22px}
.pl .pl-feat li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--mut)}
.pl .pl-feat li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--red)}
.s-paper .pl .pl-feat li{color:var(--mut-dark)}
.s-paper .pl .pl-feat li::before{background:var(--carmine)}
.pl-cta{margin-top:clamp(28px,3vw,40px)}
/* the service text reads first (client: the list was too quiet next to the clip): larger names, prices in the
   brand red, quality and contents in full-strength text instead of muted grey */
.pl-row{padding-top:28px}
.pl-name{font-size:clamp(26px,2.4vw,40px)}
.pl-price{font-size:clamp(32px,3vw,52px);color:var(--red)}
.s-paper .pl-price{color:var(--carmine)}
.pl-spec{margin-top:4px;font:600 16px/1.35 var(--util);letter-spacing:.01em;color:var(--tx)}
.s-paper .pl-spec{color:var(--tx-dark)}
.pl .pl-feat li{font-size:16px;color:#ddd0d2}
.s-paper .pl .pl-feat li{color:#36383d}
.svc-sub{color:var(--tx)}
.s-paper .svc-sub{color:var(--tx-dark)}
@media (max-width:760px){.svc-copy>.pl-cta{order:5}.pl-cta .btn-lg{width:100%;justify-content:center}}

/* Video packs: four packs as comparison cards. Every card has the same rows (subgrid), so a row reads straight
   across; Ultimate, the fullest pack, carries the carmine edge. One large booking button under all four */
.vx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:16px;margin-top:clamp(40px,5vw,72px)}
.vx-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;padding:26px 24px 22px;
  border:1px solid var(--line);border-radius:var(--r);background:#120d0f;color:var(--tx)}
.vx-name{font:900 clamp(26px,2.2vw,34px)/1 var(--head);text-transform:uppercase}
.vx-price{margin-top:16px;font:900 clamp(46px,4.4vw,68px)/.9 var(--head)}
.vx-rows{margin-top:22px;border-top:1px solid var(--line)}
.vx-rows div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.vx-rows dt{font-size:14px;line-height:1.3;color:var(--mut)}
.vx-rows dd{font:900 22px/1 var(--head)}
.vx-rows .vx-no{color:var(--mut);opacity:.5}
.vx-rows .vx-yes{color:var(--redtxt)}
.vx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vx-note{margin-top:14px;font:700 12px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--redtxt)}
.vx-card.is-top{border-color:var(--carmine);background:linear-gradient(180deg,#24090f 0%,#120d0f 70%)}
/* one call to action for the whole section, centred and larger than the buttons elsewhere */
.vx-cta{display:flex;justify-content:center;margin-top:clamp(36px,4vw,56px)}
.btn-lg{min-height:64px;padding:0 clamp(36px,4vw,56px);font-size:15px;letter-spacing:.16em}
@media (max-width:1100px){.vx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .vx{gap:10px}
  .vx-card{padding:18px 14px 16px}
  .vx-rows dt{font-size:12px}
  .vx-rows dd{font-size:18px}
  .vx-cta .btn-lg{width:100%;justify-content:center}
}

/* phones: Bronze / Silver / Gold as three side-by-side rows (whole 2:3 photo left, offer right),
   so all three prices fit about one screen and compare at a glance */
@media (max-width:760px){
  .pp-grid{gap:32px}
  .pp{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:20px;align-items:start}
  .pp-img{grid-row:1/4}
  .pp>:not(.pp-img){grid-column:2}
  .pp-top{flex-direction:column;align-items:flex-start;gap:8px;margin-top:2px}
  .pp-name{font-size:26px;gap:10px}
  .pp-price{font-size:46px}
  .pp-sum{margin:12px 0 16px;padding-top:12px;font-size:15px;line-height:1.45}
  .pp .btn{min-height:46px;padding:0 20px}
}

/* services on tablets: the frame is narrow enough to stay beside the copy, so the section opens with its title,
   not with a screen of unlabelled video */
@media (min-width:761px) and (max-width:1100px){
  .svc-grid,.svc.rev .svc-grid{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .svc .svc-copy{order:0}
  .svc-grid>.svc-img,.svc-grid>.svc-fig{order:1;width:min(36vw,320px)}
}
/* services on phones: title and subtitle first, then the sample, then the package list */
@media (max-width:760px){
  .svc-grid{gap:0}
  .svc-copy{display:contents}
  .svc-copy>.mega-s{order:1}
  .svc-copy>.svc-sub{order:2}
  .svc-grid>.svc-img,.svc-grid>.svc-fig{order:3;margin-top:28px;justify-self:start;width:min(100%,320px)}
  .svc-copy>.pl-list{order:4}
}

/* hero rotation can be stopped (WCAG 2.2.2); quiet, in the corner under the dancers */
.hero-pause{position:absolute;z-index:4;right:var(--pad);bottom:clamp(20px,3vw,40px);display:grid;place-items:center;width:44px;height:44px;padding:0;cursor:pointer;
  border:1px solid rgba(244,238,236,.32);border-radius:var(--r-s);background:rgba(9,7,8,.4);color:var(--tx);transition:background-color 160ms var(--ease-out)}
.hero-pause i{position:relative;width:12px;height:14px}
.hero-pause i::before,.hero-pause i::after{content:"";position:absolute;top:0;width:4px;height:14px;background:currentColor}
.hero-pause i::before{left:0}.hero-pause i::after{right:0}
.hero-pause.is-paused i::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.hero-pause.is-paused i::after{display:none}
.hero-pause:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.hero-pause:hover{background:var(--carmine)}}
.hs.held .hs-in{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hero-pause{display:none}}
/* phones: the button sits at the top right of the dancers, clear of the buttons in the text */
@media (max-width:760px){.hero-pause{bottom:auto;top:84px;right:16px}}

/* short phones (iPhone SE and the like): the hero is one screen high and Book now stays in it; the dancers give
   up the height, not the text */
@media (max-width:760px) and (max-height:760px){
  .hero{min-height:100svh}
  .hero-fig{min-height:150px;margin-top:68px}
  .hero-in{padding-bottom:24px}
  .hero h1{margin-top:16px}
  .lead{margin-top:12px}
  .cta{margin-top:20px}
  .hero-pause{top:76px}
}

/* ---- critique 4 (2026-11-06) ---- */
/* split headings now have a real space between the parts (screen readers read "Past events"); the space is the gap */
.past-head .ln+.ln,.what-head .ln+.ln{margin-left:-.12em}
/* offer sub-headings (Photos, Reels, Videos, Video packs) one clear step below the section headings */
.mega-s{font-size:clamp(44px,5.4vw,96px)}

/* Packages: one dark band with the four offers and their lowest price; each cell jumps to its section */
.pk-ix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,4.4vw,72px);border-radius:var(--r);background:var(--ink);overflow:hidden}
.pk-ix li{min-width:0}
.pk-ix li+li{border-left:1px solid var(--line)}
.pk-ix a{display:flex;flex-direction:column;gap:10px;height:100%;padding:clamp(20px,2vw,32px) clamp(18px,2vw,32px);color:var(--tx);text-decoration:none;transition:background-color 200ms var(--ease-out)}
.pk-ix b{font:900 clamp(22px,2vw,34px)/1 var(--head);text-transform:uppercase}
.pk-ix span{font:900 clamp(20px,1.7vw,28px)/1 var(--head);text-transform:uppercase;color:var(--red)}
.pk-ix a:focus-visible{outline:2px solid var(--red);outline-offset:-4px}
@media (hover:hover) and (pointer:fine){.pk-ix a:hover{background:var(--carmine)}.pk-ix a:hover span{color:#fff}}
@media (max-width:900px){.pk-ix{grid-template-columns:repeat(2,minmax(0,1fr))}.pk-ix li:nth-child(3){border-left:0}.pk-ix li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.pk-ix a{transition:none}}

/* Photos: "Most popular" (wording of the original Offer page) as a label on the Bronze frame */
.pp{position:relative}
.pp-hot{position:absolute;z-index:2;top:14px;left:14px;margin:0;padding:8px 11px;border-radius:var(--r-s);background:var(--red);color:#fff;
  font:700 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 2px 10px rgba(0,0,0,.35)}
@media (max-width:760px){.pp>.pp-hot{grid-column:1;grid-row:1;top:10px;left:10px;padding:6px 8px;font-size:10px;letter-spacing:.1em}}

/* Upcoming with no dates yet: one slim line instead of a full section right under the hero */
#upcoming[data-n="0"]{padding-block:clamp(20px,2.2vw,32px)}
#upcoming[data-n="0"] .up-head{padding-block:clamp(22px,2.2vw,34px)}
#upcoming[data-n="0"] .up-title{font-size:clamp(28px,3vw,48px);white-space:nowrap}
#upcoming[data-n="0"] .up-title .ln{display:inline-block;vertical-align:bottom}
#upcoming[data-n="0"] .up-empty::before{display:none}
#upcoming[data-n="0"] .up-empty{padding-block:clamp(22px,2.2vw,34px)}
#upcoming[data-n="0"] .feat-empty{font-size:clamp(17px,1.5vw,24px)}
@media (max-width:900px){
  #upcoming[data-n="0"] .up-head{padding-top:clamp(30px,7vw,40px)!important;padding-bottom:10px}
  #upcoming[data-n="0"] .up-empty{padding-bottom:clamp(20px,5vw,30px)}
}

/* tablets: three tiers side by side leave no room for name and price on one line */
@media (min-width:761px) and (max-width:1100px){.pp-top{flex-direction:column;align-items:flex-start;gap:6px}}

/* phones: a smaller sample video, so the package list starts sooner */
@media (max-width:760px){.svc-grid>.svc-fig{width:min(100%,260px)}}

/* ---- critique 5 (2026-11-06) ---- */
/* keyboard focus: the default ring takes the text colour, so on a red button it is white, which disappears on the
   light sections; there it is dark */
.s-paper .btn-primary:focus-visible{outline-color:var(--tx-dark)}

/* Past events: season tabs and the search field on one line; the search covers every season */
.past-ctl{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px clamp(28px,4vw,64px);margin-top:18px}
.past-tools .past-ctl .yrs{margin-top:0}
.yrs.is-off .yr{color:var(--mut);border-bottom-color:transparent}
.ev-search{position:relative;flex:0 1 380px;min-width:min(100%,280px)}
.ev-search input{width:100%;height:52px;margin:0;padding:0 14px 0 48px;border:1px solid rgba(244,238,236,.3);border-radius:var(--r-s);
  background:rgba(244,238,236,.05);color:var(--tx);font:500 17px/1 var(--body);caret-color:var(--red);
  -webkit-appearance:none;appearance:none;transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.ev-search input::placeholder{color:var(--mut);opacity:1}
.ev-search input:focus{outline:none;border-color:var(--red);background:rgba(244,238,236,.08)}
.ev-search input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ev-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;cursor:pointer;
  background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' stroke='%23f4eeec' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.ev-search-i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none;transition:color 160ms var(--ease-out)}
.ev-search:focus-within .ev-search-i{color:var(--tx)}
@media (hover:hover) and (pointer:fine){.ev-search input:hover:not(:focus){border-color:rgba(244,238,236,.5)}}
.past-tools .ev-status{margin-top:16px;max-width:none;font:700 14px/1.35 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--tx)}
.ev-status:empty{display:none}
.t-none{grid-column:1/-1}
.t-none .btn{padding-left:0}
.arch-more .btn[hidden]{display:none}
@media (max-width:640px){.ev-search{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.ev-search input,.ev-search-i{transition:none}}
/* the textured background (.fx::after) sticks out 48px sideways; with overflow:hidden the section was still a
   scroll box, so focusing the search field slid the whole section 25px left. clip cuts the same way but never scrolls */
@supports (overflow:clip){.fx{overflow:clip}}

/* ---- event pages (2026-11-06): event.html?e=<slug>, like /event/<slug>/ on the original site ---- */
/* archive cards: the title link is stretched over the whole card; the galleries are on the event page */
.t{position:relative}
.t-link{color:inherit;text-decoration:none}
.t-link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r)}
.t-link:focus-visible{outline:none}
.t:has(.t-link:focus-visible){outline:2px solid var(--red);outline-offset:8px;border-radius:var(--r)}
@media (hover:hover) and (pointer:fine){.t:hover .t-link{color:var(--redtxt)}}
.t-has{margin-top:auto;padding-top:12px;font:600 13px/1.4 var(--util);letter-spacing:.1em;text-transform:uppercase;color:var(--tx)}

.evpage main{padding-top:84px}
.evp{padding-top:clamp(24px,3vw,48px)}
.evp-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 13px/1 var(--util);letter-spacing:.1em;text-transform:uppercase;color:var(--tx);text-decoration:none}
.evp-back .arr{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.evp-back:hover .arr{transform:translateX(-4px)}}
.evp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,96px);align-items:start;margin-top:clamp(16px,2vw,32px)}
.evp.is-wide .evp-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.evp-poster{position:sticky;top:116px;margin:0;border-radius:var(--r);overflow:hidden;background:#1b0b10}
.evp-poster img{display:block;width:100%;height:auto;max-height:calc(100vh - 150px);object-fit:contain}
.evp-cover{aspect-ratio:4/5;border-radius:var(--r)}
.evp-date{font:700 15px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--redtxt)}
.evp-title{margin-top:14px;font:900 clamp(42px,5vw,88px)/.92 var(--head);text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.evp-loc{margin-top:16px;font-size:clamp(18px,1.4vw,22px);color:var(--mut)}
.evp-body{margin-top:clamp(32px,4vw,56px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.evp-h{font:900 clamp(26px,2.2vw,36px)/1 var(--head);text-transform:uppercase}
.evp-lead{margin-top:14px;max-width:34em;font-size:17px;line-height:1.55;color:var(--mut)}
.evp-lead .tl{color:var(--tx)}
.evp-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.evp-note{margin-top:16px;font-size:14px;color:var(--mut)}
.evp-none .evp-title{margin-top:0}
.evp-none p{margin-top:24px}

/* one tile per gallery: what it is (Photos / Reels), which part (Couples, Seniors), where it opens */
.evg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.evg{display:flex;flex-direction:column;height:100%;min-height:172px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(244,238,236,.04);color:var(--tx);text-decoration:none;transition:background-color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.evg-i{width:30px;height:30px;margin-bottom:20px;color:var(--red);transition:color 200ms var(--ease-out)}
.evg-t{font:900 clamp(26px,2vw,32px)/1 var(--head);text-transform:uppercase}
.evg-g{margin-top:6px;font:700 14px/1.25 var(--display);letter-spacing:.12em;text-transform:uppercase}
.evg-h{margin-top:auto;padding-top:18px;font:600 13px/1 var(--util);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);transition:color 200ms var(--ease-out)}
a.evg:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (hover:hover) and (pointer:fine){a.evg:hover{background:var(--carmine);border-color:var(--carmine)}a.evg:hover .evg-i{color:#fff}a.evg:hover .evg-h{color:var(--tx)}}
.evg.is-soon{border-style:dashed;background:none;color:var(--mut)}
.evg.is-soon .evg-i{color:var(--mut)}

/* earlier / later event */
.evn{padding-block:clamp(40px,4.4vw,72px)}
.evn-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.evn-a{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:2px solid var(--tx-dark);color:var(--tx-dark);text-decoration:none}
.evn-a.is-empty{border-top-color:transparent}
.evn-next{align-items:flex-end;text-align:right}
.evn-k{font:600 13px/1 var(--util);letter-spacing:.1em;text-transform:uppercase;color:var(--carmine)}
.evn-t{font:900 clamp(22px,2vw,32px)/1.02 var(--head);text-transform:uppercase;transition:color 200ms var(--ease-out)}
.evn-d{font-size:15px;color:var(--mut-dark)}
@media (hover:hover) and (pointer:fine){.evn-a:hover .evn-t{color:var(--carmine)}}

@media (max-width:900px){
  .evp-grid,.evp.is-wide .evp-grid{grid-template-columns:minmax(0,1fr)}
  .evp-poster{position:static}
  .evp-poster img{max-height:70vh;max-height:70svh;margin-inline:auto}
  .evp-cover{aspect-ratio:16/10}
}
@media (max-width:640px){.evpage main{padding-top:72px}}
@media (max-width:520px){
  .evg-list{grid-template-columns:minmax(0,1fr)}
  .evg{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
  .evg-i{grid-row:1/4;margin:0}
  .evg-h{padding-top:10px}
  .evn-row{grid-template-columns:minmax(0,1fr)}
  .evn-next{align-items:flex-start;text-align:left}
  .evn-a.is-empty{display:none}
}
@media (prefers-reduced-motion:reduce){.evg,.evg-i,.evg-h,.evn-t,.evp-back .arr{transition:none}}
/* an odd last tile takes the full row instead of leaving a hole */
.evg-list>li:last-child:nth-child(odd){grid-column:1/-1}

/* ---- QR page (qr.html = studiopm.pl/qr/, printed on the merch) ---- */
.qr-intro{padding-block:clamp(40px,6vw,96px) clamp(48px,6vw,96px)}
.qr-title{max-width:12em;font:900 clamp(44px,7.4vw,128px)/.9 var(--head);text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.qr-lead{margin-top:clamp(18px,2vw,28px);max-width:30em;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--tx)}
.qr-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(24px,3vw,40px)}
@media (max-width:520px){.qr-act .btn-lg{width:100%}}

/* ---- critique 6 (2026-11-06): less template chrome, varied section entrances, packages that can be chosen ---- */
/* no textured grid / crop marks / registration mark behind the sections (the hero keeps its viewfinder corners) */
.fx::before,.fx::after{content:none;animation:none}
/* no giant wordmark: the footer ends with its row */
.ftr{padding-bottom:clamp(40px,5vw,72px)}

/* small labels: plain case, the brand's condensed face; capitals stay on buttons and menus only */
.t-meta,.t-has,.evg-h,.evp-date,.evn-k,.evp-back,.past-tools .ev-status,.ct-k,.ct-info dt,.vid-cap,.up-follow,.soon,.tl,.ar-l,.pp-hot,.ftr-nav a,.ftr-soc a{
  text-transform:none;letter-spacing:.01em;font-family:var(--display)}
.t-meta,.evp-date{font-weight:700;font-size:15px}
.t-has,.evg-h,.evn-k,.evp-back,.ev-status,.ct-info dt,.vid-cap,.soon,.tl,.ftr-nav a,.ftr-soc a{font-weight:600;font-size:15px}
.ct-k,.up-follow,.ar-l{font-weight:700;font-size:16px}
.pp-hot{font-weight:700;font-size:13px}
@media (max-width:760px){.pp>.pp-hot{font-size:12px;letter-spacing:.01em}}

/* What we do: four services as type-only tiles until the studio has its own photos of them */
.wi-type{background:var(--ink)}
.wi-type::after{content:none}
.wi-type h3{font-size:clamp(24px,2.3vw,40px)}
.wi-type p{color:var(--mut)}

/* What we do entrance: each tile opens like a camera shutter, from its middle line outwards; the Sports photo
   settles from a slight zoom, the words follow */
.rv .wi.rise.rimg{clip-path:inset(50% 0 50% 0 round var(--r))}
.rv .wi.rise.rimg.in{clip-path:inset(0 0 0 0 round var(--r));transition:clip-path 900ms var(--ease-io);transition-delay:var(--d,0ms)}
.rv .wi-1 .wi-bg{transform:scale(1.14)}
.rv .wi-1.in .wi-bg{transform:none;transition:transform 1500ms var(--ease-out)}
.rv .wi .wi-t{opacity:0;transform:translateY(18px)}
.rv .wi.in .wi-t{opacity:1;transform:none;transition:opacity 600ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:calc(var(--d,0ms) + 420ms)}
@media (hover:hover) and (pointer:fine){.rv .wi.in:hover .wi-t{transform:translateY(-4px);transition-delay:0ms}}

/* section entrances: Photos and Videos come in from the left, Reels from the right (the side they slide from
   leads); Video packs: the four cards rise first, then the title, note and button fade in around them */
.sx{overflow-x:clip}
.rv .rise.sx{opacity:1;transform:none}
.rv .sx .sx-i{opacity:0;transition:opacity 800ms var(--ease-out),transform 1100ms var(--ease-out);transition-delay:var(--sd,0ms)}
.rv .sx-l .sx-i{transform:translateX(-18vw)}
.rv .sx-r .sx-i{transform:translateX(18vw)}
.rv .sx.in .sx-i{opacity:1;transform:none}
.rv .sx-p .sx-c{opacity:0;transform:translateY(56px) scale(.94)}
.rv .sx-p.in .sx-c{opacity:1;transform:none;transition:opacity 650ms var(--ease-out),transform 950ms var(--ease-out);transition-delay:var(--d,0ms)}
.rv .sx-p .sx-f{opacity:0}
.rv .sx-p.in .sx-f{opacity:1;transition:opacity 1200ms var(--ease-out) 800ms}
@media (prefers-reduced-motion:reduce){
  .rv .wi.rise.rimg,.rv .wi.rise.rimg.in{clip-path:none;transition:none}
  .rv .wi-1 .wi-bg,.rv .wi .wi-t,.rv .sx .sx-i,.rv .sx-p .sx-c,.rv .sx-p .sx-f{opacity:1;transform:none;transition:none}
}

/* Video packs: what the two reel kinds are */
.vx-what{margin-top:10px;max-width:40em;font-size:16px;line-height:1.5;color:var(--mut)}

/* packages can be chosen (packs.js): the whole tier / row / card is the button; Book now then names it */
[data-pick] [data-name]{position:relative;cursor:pointer}
.pick{position:absolute;inset:0;z-index:3;margin:0;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pick:focus-visible{outline:none}
[data-name]:has(>.pick:focus-visible){outline:2px solid var(--red);outline-offset:6px;border-radius:var(--r)}
/* photo tiers: a red ring around the metal frame */
.pp .pp-img{transition:box-shadow 220ms var(--ease-out)}
.pp.is-on .pp-img{box-shadow:0 0 0 3px var(--wine),0 0 0 6px var(--red)}
/* reel / video rows: a radio-like dot before the name and a soft red band */
.pl[data-name]{isolation:isolate}
.pl[data-name]::before{content:"";position:absolute;z-index:-1;inset:0 -14px;border-radius:var(--r-s);background:transparent;transition:background-color 200ms var(--ease-out)}
.pl.is-on::before{background:rgba(212,19,47,.2)}
.s-paper .pl.is-on::before{background:rgba(163,18,42,.1)}
.pl[data-name] .pl-name::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.4em;vertical-align:.08em;border:2px solid currentColor;border-radius:50%;opacity:.45;transition:background-color 200ms var(--ease-out),opacity 200ms var(--ease-out)}
.pl.is-on .pl-name::before{opacity:1;border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 3px var(--ink)}
.s-paper .pl.is-on .pl-name::before{border-color:var(--carmine);background:var(--carmine);box-shadow:inset 0 0 0 3px var(--paper)}
@media (hover:hover) and (pointer:fine){.pl[data-name]:hover::before{background:rgba(244,238,236,.04)}.s-paper .pl[data-name]:hover::before{background:rgba(18,18,20,.04)}.pl.is-on:hover::before{background:rgba(212,19,47,.18)}}
/* video packs: the chosen card gets the red edge */
.vx-card{transition:border-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.vx-card.is-on{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
@media (hover:hover) and (pointer:fine){.vx-card[data-name]:hover:not(.is-on){border-color:rgba(244,238,236,.32)}}
@media (prefers-reduced-motion:reduce){.pp .pp-img,.pl[data-name]::before,.pl-name::before,.vx-card{transition:none}}
/* nothing found: the closest event names as buttons */
.t-none{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.btn.ev-alt{min-height:48px;padding:0 20px;border:1px solid rgba(244,238,236,.3);border-radius:var(--r-s);color:var(--tx);
  font:600 16px/1.1 var(--display);letter-spacing:.01em;text-transform:none;white-space:normal;text-align:left;transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn.ev-alt:hover{background:var(--carmine);border-color:var(--carmine)}}
.evg-g{text-transform:none;letter-spacing:.01em;font-size:15px}

/* ---- audit fixes (2026-11-06) ---- */
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.soc-i{width:19px;height:19px;fill:currentColor;color:#f1ebeb}
/* skip link: hidden until it gets keyboard focus */
.skip{position:fixed;z-index:100;top:12px;left:12px;padding:12px 18px;border-radius:var(--r-s);background:var(--paper);color:var(--tx-dark);
  font:700 15px/1 var(--display);text-decoration:none;transform:translateY(-200%);transition:transform 160ms var(--ease-out)}
.skip:focus{transform:none;outline:2px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}
/* search: a visible label */
.ev-label{display:block;margin-bottom:8px;font:600 15px/1.2 var(--display);color:var(--mut)}
.ev-search-i{top:auto;bottom:16px;transform:none}
/* booking buttons that open WhatsApp carry its mark */
.wa-btn{gap:12px}
.wa-i{flex:none;width:20px;height:20px;fill:currentColor}

/* ---- WordPress: ordinary pages (e.g. /previous/, events of 2024 and earlier) and 404 ---- */
.pg{padding-top:clamp(28px,3vw,48px);min-height:60vh}
.pg-in{max-width:56em}
.pg-title{margin-top:14px;font:900 clamp(40px,5vw,80px)/.95 var(--head);text-transform:uppercase}
.pg-body{margin-top:clamp(24px,3vw,40px);font-size:17px;line-height:1.65;color:#e2d7d8}
.pg-body h1,.pg-body h2,.pg-body h3{margin:1.6em 0 .4em;font:900 clamp(22px,2vw,30px)/1.1 var(--head);text-transform:uppercase;color:var(--tx);text-align:left!important}
.pg-body h1:first-child,.pg-body h2:first-child{margin-top:0}
.pg-body p{margin:.6em 0}
.pg-body a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.pg-body a:hover{color:var(--redtxt)}}
.pg-body ul,.pg-body ol{margin:.6em 0;padding-left:1.2em}
.pg-body img{max-width:100%;height:auto;border-radius:var(--r)}
/* WordPress: when logged in, the admin bar sits above the fixed header */
.admin-bar .hdr{top:32px}
.admin-bar .mnav{top:32px}
@media (max-width:782px){.admin-bar .hdr,.admin-bar .mnav{top:46px}}
@media (max-width:600px){.admin-bar .hdr,.admin-bar .mnav{top:0}}
/* the menu item of the page you are on (Packages on the packages page) */
.nav a[aria-current="page"]{background:var(--carmine)}
.mn[aria-current="page"] .mn-t>span,.mn[aria-current="page"] .mn-a{color:var(--red)}