/* Service pages: the Shorts Wall template (Jason, 2026-10-05).
   The shop's own vertical Shorts open every service page; the shop's own photographs carry
   the copy below; process steps are photographs, not icon cards. Brand world unchanged:
   dark ground, Bebas Neue / Saira, the pink-to-coral gradient for primary actions. */

:root{--sw-ink:#f4efe8;--sw-mute:#cfc6bd;--sw-line:#ffffff1f;--sw-coral:#f59154;--sw-pink:#ea138f;
  --sw-ease:cubic-bezier(.16,1,.3,1);--sw-gutter:clamp(18px,4vw,64px)}

/* ---------- Hero: the wall ---------- */
.sw-hero{position:relative;isolation:isolate;height:100svh;min-height:640px;max-height:1060px;overflow:hidden;background:#050404;color:var(--sw-ink)}
.sw-wall{position:absolute;inset:0;display:flex;gap:2px;background:#050404}
.sw-tile{position:relative;flex:1 1 0;min-width:0;margin:0;overflow:hidden;background:#0b0908;transition:flex-grow .9s var(--sw-ease)}
/* inline blurred first frame under each clip: never a black tile while the poster and clip load */
.sw-tile:before{content:'';position:absolute;inset:-24px;background:#0b0908 var(--ph) center/cover no-repeat;filter:blur(14px);transform:scale(1.04)}
.sw-tile video{z-index:0}
.sw-tile video,.sw-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the hover dim is the clip's opacity over the near-black tile, not a filter: a filter on a playing video needs its own
   compositing pass, built the first time it is hovered (a 0.28 s stall on a first visit) */
.sw-tile video{transition:opacity .9s var(--sw-ease),transform 1.4s var(--sw-ease)}
.sw-tile figcaption{position:absolute;left:clamp(14px,1.6vw,24px);top:124px;z-index:2;max-width:calc(100% - 28px);
  font-family:var(--brand-body);font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1.35;color:#fff;
  text-shadow:0 1px 10px #000c;opacity:.78;transition:opacity .6s var(--sw-ease)}
/* Hover hands a tile the stage: it widens, the others step back and dim. */
@media (min-width:900px){
  .sw-tile.is-lead{flex:0 0 clamp(520px,40vw,640px)}
  .sw-copy{width:calc(clamp(520px,40vw,640px) - var(--sw-gutter) - 28px)}
}
@media (min-width:900px) and (max-width:1099px){.sw-tile:nth-child(3){display:none}}
@media (hover:hover) and (min-width:900px){
  .sw-wall:hover .sw-tile:not(.is-lead){flex-grow:.82}
  .sw-wall:hover .sw-tile video{opacity:.62}
  .sw-wall .sw-tile:not(.is-lead):hover{flex-grow:1.55}
  .sw-wall .sw-tile:hover video{opacity:1;transform:scale(1.025)}
  .sw-wall:hover .sw-tile figcaption{opacity:.55}
  .sw-wall .sw-tile:hover figcaption{opacity:1}
}
/* Low dark fade so the headline reads over moving footage. */
.sw-hero:after{content:'';position:absolute;inset:auto 0 0;height:62%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,#050404f2 0%,#050404c7 32%,#05040466 64%,#05040400 100%)}
.sw-hero:before{content:'';position:absolute;inset:0 0 auto;height:150px;z-index:1;pointer-events:none;background:linear-gradient(#050404b3,#05040400)}
.sw-copy{position:absolute;z-index:2;left:var(--sw-gutter);bottom:clamp(40px,7vh,84px);width:min(640px,calc(100% - 2 * var(--sw-gutter)));pointer-events:none}
.sw-copy>*{pointer-events:auto}
.sw-copy h1{margin:0;color:#fff;text-wrap:balance}
html:not(#tw-type) .sw-copy .sw-line{margin:8px 0 0;font-family:var(--brand-heading);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.05;letter-spacing:.01em;color:var(--sw-coral)}
.sw-copy .sw-intro{margin:18px 0 0;max-width:46ch;color:#f4efe8}
.sw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}
.sw-call{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--brand-body);font-weight:700;letter-spacing:.03em;
  border-bottom:1px solid #ffffff55;padding:6px 0;transition:border-color .3s,color .3s}
.sw-call svg{width:18px;height:18px;flex:none}
.sw-call:hover{color:var(--sw-coral);border-color:var(--sw-coral)}
.sw-tools{position:absolute;z-index:3;right:var(--sw-gutter);bottom:clamp(40px,7vh,84px);display:flex;align-items:center;gap:14px}
.sw-pause{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 15px;border:1px solid #ffffff4d;border-radius:40px;background:#0b0908cc;color:#f1e6dc;
  font:600 12px/1 var(--brand-body);letter-spacing:.08em;cursor:pointer;transition:border-color .3s,background .3s}
.sw-pause:hover{border-color:#fff}
.sw-pause i{position:relative;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.sw-pause[aria-pressed=true] i{width:0;height:0;border-right:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.sw-source{font:600 12px/1.3 var(--brand-body);letter-spacing:.06em;color:#f4efe8;text-decoration:none;border-bottom:1px solid #ffffff40}
.sw-source:hover{color:#fff;border-color:#fff}
.sw-tile.is-lead figcaption{left:var(--sw-gutter)}
.sw-tile:focus-within{outline:2px solid var(--sw-coral);outline-offset:-2px}

/* Phones: one Short, full-bleed. */
@media (max-width:899px){
  .sw-tile:not(.is-lead){display:none}
  .sw-hero{height:auto;min-height:0;max-height:none;aspect-ratio:auto}
  .sw-wall{position:relative;height:min(118vw,78svh)}
  .sw-hero:after{display:none}
  .sw-tile.is-lead:after{content:'';position:absolute;inset:auto 0 0;height:58%;z-index:1;background:linear-gradient(to top,#050404 0%,#050404e0 30%,#05040400 100%)}
  .sw-copy{position:relative;left:auto;bottom:auto;width:auto;margin:-120px var(--sw-gutter) 0;padding-bottom:30px}
  /* the pause control turns into a round icon at the top right of the clip */
  .sw-tools{position:absolute;right:14px;top:96px;bottom:auto}
  .sw-pause{width:38px;padding:0;justify-content:center}
  .sw-pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sw-source{position:absolute;right:0;top:46px;white-space:nowrap}
  .sw-tile figcaption,.sw-tile.is-lead figcaption{top:104px;left:var(--sw-gutter);max-width:calc(100% - 80px)}
}
@media (prefers-reduced-motion:reduce){
  .sw-tile,.sw-tile video,.sw-tile figcaption{transition:none}
}

/* ---------- Shop strip: a full-bleed row of the shop's own photographs ---------- */
.sw-strip{margin:0;padding:clamp(28px,4vw,56px) 0}
.sw-strip ul{list-style:none;margin:0;padding:0 var(--sw-gutter);display:flex;gap:10px;height:clamp(260px,32vw,440px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
.sw-strip li{flex:0 0 auto;height:100%;margin:0;scroll-snap-align:start;overflow:hidden;border-radius:4px;background:#14110f}
.sw-strip img{display:block;height:100%;width:auto;transition:transform 1.2s var(--sw-ease)}
.sw-strip li:hover img{transform:scale(1.035)}
.sw-strip p.sw-note{margin:14px var(--sw-gutter) 0;font-family:var(--brand-body);font-size:13px;letter-spacing:.04em;color:#cfc6bd}

/* ---------- Process: steps carried by photographs ---------- */
.sw-steps .sw-steps-title{margin:0 0 clamp(26px,3vw,40px)}
.sw-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);counter-reset:step}
.sw-steps li{margin:0;display:flex;flex-direction:column}
.sw-steps figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#14110f}
.sw-steps figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--sw-ease)}
.sw-steps li:hover figure img{transform:scale(1.04)}
.sw-step-copy{position:relative;padding-top:20px;margin-top:20px;border-top:1px solid var(--sw-line)}
.sw-step-copy:before{content:'';position:absolute;left:0;top:-1px;width:44px;height:2px;background:linear-gradient(90deg,var(--sw-pink),var(--sw-coral))}
.sw-step-n{display:block;margin:0 0 6px;font-family:var(--brand-body);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--sw-coral)}
.sw-steps h3{margin:0 0 8px;color:#fff}
.sw-steps li p{margin:0;color:#d3c8be;max-width:42ch}
@media (max-width:767px){
  .sw-steps ol{grid-template-columns:1fr;gap:22px}
  .sw-steps li{display:grid;grid-template-columns:38% 1fr;gap:16px;align-items:start}
  .sw-steps figure{aspect-ratio:4/5}
  .sw-step-copy{margin-top:0;padding-top:14px}
  .sw-strip ul{height:300px}
}

/* While the Shorts wall is on screen its own control pauses the motion; the site-wide
   background control (for a background hidden under the wall) steps out of the way. */
body.sw-hero-in-view .ambient-toggle{opacity:0;pointer-events:none;visibility:hidden}

/* Judge fixes (2026-10-05): readable captions and links over moving footage; phone pause stays on the clip. */
.sw-tile figcaption{opacity:1;padding:5px 9px;border-radius:3px;background:#050404d9;text-shadow:none}
@media (hover:hover) and (min-width:900px){.sw-wall:hover .sw-tile figcaption,.sw-wall .sw-tile:hover figcaption{opacity:1}}
.sw-source{padding:4px 8px;border-radius:3px;background:#050404d9;border-bottom:0}
.sw-intro .hl{background-image:linear-gradient(100deg,#ff73bd 0%,#ffb27f 100%)}
@media (max-width:899px){
  .sw-tools{top:auto;bottom:auto;right:14px;position:absolute}
  .sw-hero{position:relative}
  .sw-tools{top:calc(min(118vw,78svh) - 52px)}
  .sw-source{position:static;margin-right:8px}
}
@media (max-width:899px){
  /* phone: pause sits on the clip's right edge just above the headline block; the YouTube credit lives in the desktop toolbar only */
  .sw-tools{top:calc(min(118vw,78svh) - 178px)}
  .sw-source{display:none}
}

/* The strip always reaches the right edge: when the photos are narrower than the track
   (wide screens, few photos) they widen to fill it, cropping from the centre. */
.sw-strip li{flex:1 0 auto}
.sw-strip img{width:100%;height:100%;object-fit:cover}

/* A playing clip covers its blurred first frame; drop the blur layer so it is not composited every frame. */
.sw-tile.is-live:before{content:none}