/* Shared layout system. Brand colours and original motion live in style.css. */
:root{--header-height:80px;--gutter:clamp(20px,5vw,88px);--rail:clamp(150px,16vw,210px);--column-gap:clamp(24px,3.2vw,48px);--section-space:clamp(56px,7vw,104px);--copy-width:68ch;--body-size:16px;--label-size:14px}
html{scroll-padding-top:calc(var(--header-height) + 24px)}
body[class]{line-height:1.5}
body[class] header{height:var(--header-height);padding:0 var(--gutter);align-items:center}
body[class] .page,body[class] .project-page{padding-left:var(--gutter);padding-right:var(--gutter)}
body[class] .project-page{padding-top:calc(var(--header-height) + 24px)}
body[class] .nav{align-items:center;gap:24px}
body[class] .nav a{display:flex;align-items:center;min-height:44px}
a:focus-visible,button:focus-visible,video:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.skip-link{position:fixed;top:8px;left:var(--gutter);z-index:2000;background:var(--cream);color:var(--ink);padding:12px 20px;clip-path:inset(100%)}
.skip-link:focus{clip-path:none}
body[class] .project-header{min-height:0!important;height:auto;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 var(--column-gap);padding:0 0 var(--section-space);align-items:start}
body[class] .project-header .back{grid-column:1/-1;padding:0;min-height:44px;margin:0 0 40px!important;display:flex;align-items:center}
body[class] .project-header .project-count{grid-column:1;margin:0;font-size:var(--label-size);line-height:1.5;padding-top:6px}
body[class] .project-header .project-title-wrap{grid-column:2;min-width:0}
body[class] .project-header .project-title{font-size:clamp(56px,8.8vw,135px);line-height:.96;letter-spacing:-.065em;margin:0;overflow-wrap:normal}
body[class] .project-header .project-sub,body[class] .clubber-header-meta{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:32px;max-width:var(--copy-width)}
body[class] .project-header .label{font-size:var(--label-size);line-height:1.6;letter-spacing:.06em;display:block}
body[class] .project-header p,body[class] .clubber-header-meta p{margin:0;font-size:var(--body-size);line-height:1.6;max-width:var(--copy-width)}
body[class] .project-content{padding-top:0;padding-bottom:0}
body[class] .lets-section,body[class] .pantene-overview,body[class] .olympics-overview,body[class] .clubber-section{grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--column-gap)}
body[class].lets-page .lets-concept-top{padding-top:24px;padding-bottom:var(--section-space)}
body[class].lets-page .lets-concept-top .lets-label{font-size:var(--label-size)!important;line-height:1.6;letter-spacing:.06em}
body[class].lets-page .lets-concept-top .lets-copy h2{font-size:clamp(30px,4vw,60px);line-height:1.12;margin:0 0 24px;letter-spacing:-.045em}
body[class].lets-page .lets-copy p,body[class] .pantene-overview-copy p,body[class] .olympics-header-copy p,body[class] .clubber-section-body p,body[class] .clubber-section-body p.lead{font-size:var(--body-size);line-height:1.6;max-width:var(--copy-width)}
body[class] .pantene-overview,body[class] .olympics-overview{padding:24px 0 var(--section-space)}
body[class] .pantene-overview-label{padding-top:0;font-size:var(--label-size);line-height:1.6}
body[class] .clubber-section{padding-top:24px;margin-bottom:var(--section-space);align-items:start}
body[class] .clubber-band,body[class] .clubber-section-body{padding-top:0;min-width:0}
body[class] .clubber-band{overflow:visible}
body[class] .clubber-band > span{margin:0 0 12px}
body[class] .clubber-band > h2{margin:0;line-height:1.6!important}
body[class] .clubber-section-body p{margin:0 0 24px}
body[class] .clubber-section-body p:last-child{margin-bottom:0}
body[class] .clubber-value .clubber-section-body{grid-template-columns:minmax(0,1fr);gap:24px}
body[class] .clubber-section-body h3{font-size:14px;line-height:1.5}
body[class] .pantene-scroll-sticky,body[class] .olympics-scroll-sticky{top:var(--header-height);height:auto!important;min-height:0;justify-content:flex-start;padding:0 0 24px;overflow:hidden}
body[class] .olympics-scroll-header{grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--column-gap);padding:16px 0 24px;margin-bottom:0;align-items:start}
body[class] .pantene-scroll-header{padding:16px 0 24px;gap:16px;font-size:var(--label-size);line-height:1.5;align-items:baseline}
body[class] .pantene-story-cue{padding:16px 0 24px;font-size:var(--label-size);line-height:1.5}
body[class] .pantene-htrack,body[class] .olympics-htrack{gap:24px}
body[class] .pantene-htrack figure,body[class] .olympics-htrack figure{width:min(30vw,360px)}
body[class] .pantene-post-gallery .pantene-htrack figure{width:min(30vw,360px)}
body[class] .pantene-post-gallery .pantene-htrack img{height:auto;aspect-ratio:4/5;object-fit:contain}
body[class] .pantene-story-gallery .pantene-htrack figure,body[class] .pantene-reels-gallery .pantene-htrack figure{width:min(25vw,calc((100svh - var(--header-height) - 120px)*.5625),300px)}
body[class] .pantene-story-gallery .pantene-htrack img,body[class] .pantene-reels-gallery .pantene-htrack video{height:auto;aspect-ratio:9/16;object-fit:contain}
body[class] .pantene-reels-gallery .pantene-htrack{min-height:0}
body[class] .olympics-htrack figure{width:min(28vw,calc((100svh - var(--header-height) - 220px)*.8),360px)}
body[class] .pantene-scroll-section,body[class] .olympics-scroll-section{margin-bottom:56px!important}
body[class] .pantene-reels-gallery{margin-top:0!important}
body[class] .project-nav{margin-top:var(--section-space);padding:24px 0 56px;gap:24px;align-items:flex-start;line-height:1.5}
body[class] .project-nav a{max-width:48%;min-height:44px}
body[class] .project-nav a:last-child{text-align:right}
body[class] footer{margin-top:0;padding:20px 0 28px;gap:24px;line-height:1.5}
body[class] .about-page .about-hero{min-height:0;padding:calc(var(--header-height) + 72px) 0 var(--section-space)}
body[class] .about-page .about-hero h1{font-size:clamp(64px,12vw,180px);line-height:.96;letter-spacing:-.065em}
body[class] .about-page .about-copy{padding:32px 0 var(--section-space);gap:var(--column-gap)}
body[class] .about-page .about-copy p,body[class] .about-grid p{font-size:18px;line-height:1.6;margin:0 0 24px;max-width:60ch}
body[class] .about-page .info-grid{gap:40px var(--column-gap);padding:32px 0}
body[class] .about-page .info-block p{overflow-wrap:anywhere;font-size:16px;line-height:1.6}
body[class] .about-page .about-icons-row{padding:40px 0}
body[class] .section,body[class] .contact{padding-top:var(--section-space);padding-bottom:var(--section-space)}
body[class] .section-top{margin-bottom:40px;line-height:1.5}
body[class] .about{margin:0 calc(-1*var(--gutter));padding:var(--section-space) var(--gutter)}
body[class] .about h2,body[class] .contact h2{line-height:1.04;margin-bottom:40px}
body[class] .about-grid{gap:var(--column-gap)}
body[class] .work-item{padding-top:32px;padding-bottom:32px;grid-template-columns:48px minmax(0,1fr) 190px;gap:24px}
body[class] .work-name{font-size:clamp(32px,5vw,72px);line-height:1.1}
body[class] .work-meta{font-size:13px;line-height:1.5;padding-right:24px}
body[class] .email{overflow-wrap:anywhere;line-height:1.6}
@media(max-width:900px){
 :root{--rail:150px;--column-gap:24px}
 body[class] .work-item{grid-template-columns:32px minmax(0,1fr);gap:12px}
 body[class] .work-meta{grid-column:2;text-align:left;margin:8px 0 0;padding-right:24px}
 body[class] .work-name{font-size:clamp(30px,6vw,54px)}
 body[class] .clubber-research-grid,body[class] .clubber-insight-grid,body[class] .clubber-opportunities{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media(max-width:720px){
 :root{--header-height:72px;--column-gap:24px;--section-space:56px}
 body[class] header{padding:0 var(--gutter)}
 body[class] .brand{font-size:14px}
 body[class] .brand-icon{width:22px;height:22px}
 body[class] .brand-wrap{gap:7px}
 body[class] .nav{gap:12px;font-size:13px}
 body[class] .project-header{grid-template-columns:minmax(0,1fr)}
 body[class] .project-header .back{margin-bottom:24px!important}
 body[class] .project-header .project-count{grid-column:1;padding:0;margin-bottom:24px}
 body[class] .project-header .project-title-wrap{grid-column:1}
 body[class] .project-header .project-title{font-size:clamp(48px,11.6vw,82px);line-height:1.02}
 body[class] .project-header .project-sub,body[class] .clubber-header-meta{margin-top:24px;gap:20px}
 body[class] .lets-section,body[class] .pantene-overview,body[class] .olympics-overview,body[class] .clubber-section,body[class] .olympics-scroll-header{grid-template-columns:minmax(0,1fr);row-gap:24px}
 body[class] .clubber-band,body[class] .clubber-section-body,body[class] .olympics-header-copy{grid-column:1;grid-row:auto;margin:0}
 body[class] .clubber-band{display:flex;gap:16px;align-items:baseline}
 body[class] .clubber-band > span{margin:0}
 body[class] .lets-label,body[class] .pantene-overview-label{margin:0 0 24px}
 body[class] .pantene-htrack figure,body[class] .pantene-post-gallery .pantene-htrack figure{width:min(72vw,calc((100svh - var(--header-height) - 120px)*.8))}
 body[class] .olympics-htrack figure{width:min(72vw,calc((100svh - var(--header-height) - 250px)*.8))}
 body[class] .pantene-story-gallery .pantene-htrack figure,body[class] .pantene-reels-gallery .pantene-htrack figure{width:min(62vw,calc((100svh - var(--header-height) - 120px)*.5625))}
 body[class] .about-page .about-copy,body[class] .about-grid{grid-template-columns:minmax(0,1fr);gap:0}
 body[class] .about-page .info-grid{grid-template-columns:minmax(0,1fr)}
 body[class] .about-page .about-copy p,body[class] .about-grid p{font-size:16px}
 body[class] .home-hero{min-height:82svh;padding-top:calc(var(--header-height) + 56px)}
 body[class] .home-hero h1{font-size:clamp(64px,16vw,115px);line-height:.9}
 body[class] .about h2,body[class] .contact h2{font-size:clamp(44px,10vw,72px)}
}
@media(max-width:360px){body[class] .brand{font-size:12px}body[class] .nav{gap:8px;font-size:12px}body[class] .brand-icon{width:18px;height:18px}}
/* Reels are a static three-column row; keep all three visible without clipping. */
@media(max-width:720px){
 body[class] .pantene-reels-gallery .pantene-htrack{gap:12px}
 body[class] .pantene-reels-gallery .pantene-htrack figure{width:calc((100vw - 2*var(--gutter) - 24px)/3)}
}

/* Section markers share a readable scale across all project routes. */
body[class].lets-page .project-content .lets-concept-top .lets-label{font-size:var(--label-size)!important;line-height:1.6!important;padding-top:0!important}
body[class] .clubber-band > span,body[class] .clubber-band > h2{font-size:var(--label-size)!important;line-height:1.6!important;letter-spacing:.06em!important}
body[class] .project-count,body[class] .project-header .label{font-size:12px}
body[class] .project-title-wrap,body[class] .lets-copy,body[class] .pantene-overview-copy,body[class] .olympics-header-copy{min-width:0}
body[class].lets-page .lets-concept-top .lets-copy h2{font-size:clamp(30px,3.2vw,48px);line-height:1.15;max-width:22ch;letter-spacing:-.035em}
body[class] .section-top,body[class] .info-block h3{font-size:14px}
body[class] .clubber-section-body p,body[class] .clubber-section-body p.lead{font-size:var(--body-size)!important;line-height:1.6!important}
body[class] .clubber-section-body h3,body[class] .clubber-subhead{font-size:14px!important;line-height:1.5!important}
/* Project dividers: original Pantene scale, shared red accent. */
body[class].lets-page .project-content .lets-concept-top .lets-label,
body[class] .pantene-overview-label,
body[class] .pantene-scroll-header > span:first-child,
body[class] .olympics-scroll-header > span:first-child,
body[class] .clubber-band > span,
body[class] .clubber-band > h2{
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:400!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
  color:var(--red)!important;
}
body[class] .pantene-scroll-cue,
body[class] .pantene-story-cue,
body[class] .olympics-scroll-cue{font-size:12px;line-height:1.35}
body[class] .pantene-scroll-header::before,
body[class] .olympics-scroll-header::before,
body[class].clubber-page .clubber-section::before{background:var(--red)}
body[class] .pantene-overview,
body[class] .olympics-overview{border-top-color:var(--red)}
/* Pantene gallery dividers are subordinate to the red content section. */
body[class].pantene-page .pantene-scroll-header > span:first-child{color:var(--ink)!important}
body[class].pantene-page .pantene-scroll-header::before{background:var(--line)}
/* Clubber section labels retain the project's green accent. */
body[class].clubber-page .clubber-band > span,
body[class].clubber-page .clubber-band > h2{color:var(--lime)!important}
/* Align the hover arrow with the metadata's inset right edge. */
body[class] .work-item::after{right:24px}
/* About icons: continuous independent rotation, without a section rule. */
body[class] .about-page .about-icons-row::before{display:none}
body[class] .about-page .about-icons-row{border:0;overflow:visible}
@keyframes aboutContinuousRotation{from{rotate:0deg}to{rotate:360deg}}
body[class] .about-page .about-icons-row img,
body[class] .about-page .about-icons-row.is-animated img{
 animation:aboutContinuousRotation 13s linear infinite;
 animation-delay:-2s;
}
body[class] .about-page .about-icons-row img:nth-child(2),
body[class] .about-page .about-icons-row.is-animated img:nth-child(2){animation-duration:19s;animation-delay:-9s;animation-direction:reverse}
body[class] .about-page .about-icons-row img:nth-child(3),
body[class] .about-page .about-icons-row.is-animated img:nth-child(3){animation-duration:11s;animation-delay:-5s}
body[class] .about-page .about-icons-row.is-animated > img{opacity:1}
/* About contact links use the brand red on hover and keyboard focus. */
body[class] .about-page .info-block a:hover,
body[class] .about-page .info-block a:focus-visible{color:var(--red)}
/* Keep each home project descriptor on its intended second line. */
body[class] .work-meta{white-space:nowrap}
@media(min-width:901px){body[class] .work-item{grid-template-columns:48px minmax(0,1fr) max-content}}
/* Clubber dividers share the green of their section labels. */
body[class].clubber-page .clubber-section::before{background:var(--lime)}
/* About opens with Silvia's supplied photograph in its original proportions. */
body[class] .about-page .about-hero{padding-top:calc(var(--header-height) + 32px);align-items:flex-start}
body[class] .about-page .about-hero h1.project-count{font-size:12px;line-height:1.5;letter-spacing:.08em;font-weight:400;margin:0 0 24px}
body[class] .about-page .about-portrait{display:block;width:min(100%,440px);height:auto}
/* About: display heading, portrait and biography, then practical details. */
body[class] .about-page .about-hero{padding:calc(var(--header-height) + 48px) 0 48px}
body[class] .about-page .about-hero h1{font-size:clamp(64px,10vw,144px);line-height:1.02;letter-spacing:-.065em;margin:0;text-transform:none}
body[class] .about-page .about-copy{grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start;padding:32px 0 var(--section-space);overflow:visible}
body[class] .about-page .about-photo-column{margin:0;opacity:0;transform:translateY(55px)}
body[class] .about-page .about-portrait{width:100%;max-width:480px;height:auto}
body[class] .about-page .about-copy-column{min-width:0;gap:0}
body[class] .about-page .about-copy p{margin:0 0 24px}
body[class] .about-page .about-copy p:last-child{margin-bottom:0}
@media(max-width:720px){
 body[class] .about-page .about-hero{padding-top:calc(var(--header-height) + 32px);padding-bottom:32px}
 body[class] .about-page .about-copy{grid-template-columns:minmax(0,1fr);gap:32px}
 body[class] .about-page .about-portrait{max-width:440px}
}
/* Bottom navigation remains static on every route. */
body[class] .project-nav,body[class] .project-nav > *{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
body[class] .about-page .project-nav{border-top:1px solid var(--line)}
body[class] .project-nav::before{display:none}
/* Let's Move shares Pantene's original reveal keyframes, timing and easing. */
html.lets-reveal-ready body[class].lets-page .project-content .lets-concept-top{position:relative;border-top:0!important}
html.lets-reveal-ready body[class].lets-page .lets-concept-top::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left center}
html.lets-reveal-ready body[class].lets-page .lets-concept-top .lets-label{opacity:0;transform:translateY(18px)}
html.lets-reveal-ready body[class].lets-page .lets-concept-top .lets-copy,
html.lets-reveal-ready body[class].lets-page .lets-intro-media video{opacity:0;transform:translateY(70px)}
html.lets-reveal-ready body[class].lets-page .lets-concept-top.is-animated::before{animation:panteneRuleReveal .7s cubic-bezier(.22,.61,.36,1) forwards}
html.lets-reveal-ready body[class].lets-page .lets-concept-top.is-animated .lets-label{animation:panteneTextReveal .65s .18s cubic-bezier(.22,.61,.36,1) forwards}
html.lets-reveal-ready body[class].lets-page .lets-concept-top.is-animated .lets-copy,
html.lets-reveal-ready body[class].lets-page .lets-intro-media.is-animated video{animation:panteneContentReveal .8s .08s cubic-bezier(.22,.61,.36,1) forwards}
/* No divider above the About portrait and biography. */
body[class] .about-page .about-copy{border-top:0}
body[class] .about-page .about-copy::before{display:none}
/* Compact portrait column: match the biography height without cropping. */
@media(min-width:901px){
 body[class] .about-page .about-copy{grid-template-columns:var(--about-photo-width,300px) minmax(0,1fr);gap:clamp(24px,3vw,40px)}
 body[class] .about-page .about-portrait{width:100%;max-width:none}
 body[class] .about-page .about-copy p{max-width:none}
}
@media(max-width:900px){
 body[class] .about-page .about-copy{grid-template-columns:minmax(0,1fr);gap:32px}
 body[class] .about-page .about-portrait{width:100%;max-width:none;height:auto}
}
/* Use only the shared pre-navigation spacing, not additional icon padding. */
body[class] .about-page .about-icons-row{padding-bottom:0}
/* Phase 1: usable gallery navigation, readable mobile media and focus states. */
body[class] .gallery-controls{display:flex;align-items:center;justify-content:center;padding:20px 0 12px;min-height:36px;box-sizing:border-box}
body[class] .gallery-controls[hidden]{display:none}
body[class] .gallery-native{height:auto!important}
body[class] .gallery-native .pantene-scroll-sticky,body[class] .gallery-native .olympics-scroll-sticky{position:relative;top:0}
body[class] .gallery-native .pantene-hviewport,body[class] .gallery-native .olympics-hviewport{overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
body[class] .gallery-native figure{scroll-snap-align:start;flex-shrink:0}
body[class] .gallery-native .pantene-htrack,body[class] .gallery-native .olympics-htrack{transform:none!important}
body[class] a:focus-visible,body[class] button:focus-visible,body[class] [tabindex="0"]:focus-visible{outline:2px solid currentColor;outline-offset:4px}
body[class] .info-block a{overflow-wrap:anywhere}
@media(max-width:720px){
 body[class] .pantene-reels-gallery .pantene-htrack{justify-content:flex-start;gap:20px}
 body[class] .pantene-reels-gallery .pantene-htrack figure{width:min(72vw,300px);flex:0 0 min(72vw,300px)}
 body[class] .work-meta{white-space:normal}
 body[class] .project-header h1{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 body[class] .about-page .about-icons-row img{rotate:none!important}
 body[class] .about-photo-column,body[class] .about-copy-column,body[class] .lets-label,body[class] .lets-copy,body[class] .lets-intro-media video,
 body[class] .pantene-scroll-sticky,body[class] .olympics-scroll-sticky{opacity:1!important;transform:none!important}
}
@media(prefers-reduced-motion:reduce){body[class] .pantene-scroll-section *,body[class] .olympics-scroll-section *,body[class] .clubber-section *,body[class] .about-scroll-section *{opacity:1!important;transform:none!important}}

/* Compact progress sits inside the gallery, clear of the fixed back-to-top button. */
body[class] .gallery-progress{width:clamp(88px,12vw,160px);height:3px;background:var(--line);overflow:hidden;flex-shrink:0}
body[class] .gallery-progress span{display:block;width:100%;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left center}

/* Named Olympics sections retain the existing separator typography. */
body[class] .olympics-section-title{font-size:12px;font-weight:400;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:0 0 12px}

/* Olympics labels sit beneath their numbers in the existing left column. */
body[class] .olympics-section-marker{align-self:start;display:flex;flex-direction:column;gap:8px;min-width:0;color:var(--red);font-size:12px;line-height:1.35;letter-spacing:.08em;opacity:0;transform:translateY(18px)}
body[class] .olympics-section-marker .olympics-section-title{margin:0}
body[class] .olympics-scroll-section.is-animated .olympics-section-marker{animation:olympicsTextReveal .65s .18s cubic-bezier(.22,.61,.36,1) forwards}

/* Shared stacked marker: number first, section name beneath it. */
body[class].lets-page .lets-concept-top .lets-label{display:flex;flex-direction:column;gap:8px;align-self:start}

/* Introductory paragraphs share a restrained headline scale. */
body[class] .about-grid p.intro-lead,body[class] .about-page .about-copy p.intro-lead{font-size:clamp(22px,2.2vw,28px);line-height:1.4;font-weight:400;letter-spacing:-.015em}
/* Home project previews occupy an overlay, preserving the work-list layout. */
body[class] .work-preview{position:fixed;z-index:900;pointer-events:none;width:clamp(112px,12vw,148px);height:clamp(112px,12vw,148px);border-radius:14px;overflow:hidden;padding:5px;box-sizing:border-box;background:var(--cream);border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transition:opacity .22s ease,transform .22s ease,visibility .22s ease}
body[class] .work-preview.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
body[class] .work-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:10px}
@media(max-width:900px),(hover:none),(pointer:coarse){body[class] .work-preview{display:none}}

body[class] .work-preview.is-clubber{background:var(--cream)}
body[class] .work-preview.is-clubber img{padding:18px;box-sizing:border-box;background:var(--clubber)}

/* Pantene preview frames the product and hands, excluding the story heading. */
body[class] .work-preview.is-pantene img{object-position:center 85%}
/* Enlarged pieces retain their full composition over the translucent brand red. */
body[class] .gallery-enlarge{display:block;width:100%;margin:0;padding:0;border:0;background:transparent;cursor:zoom-in;color:inherit}
body[class] .project-lightbox{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(16px,3vw,40px);box-sizing:border-box;border:0;background:transparent;color:var(--cream);overflow:hidden}
body[class] .project-lightbox[open]{display:flex;flex-direction:column;gap:16px}
body[class] .project-lightbox::backdrop{background:transparent;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body[class] .lightbox-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;line-height:1.5;flex-shrink:0}
body[class] .lightbox-stage{display:flex;align-items:center;justify-content:center;flex:1;min-height:0}
body[class] .lightbox-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 180px);border-radius:16px;object-fit:contain}
body[class] .lightbox-navigation{display:flex;justify-content:center;gap:16px;flex-shrink:0}
body[class] .project-lightbox button{font:inherit;font-size:14px;line-height:1.5;background:var(--cream);color:var(--red);border:1px solid var(--cream);border-radius:24px;min-height:44px;padding:10px 20px;cursor:pointer}
body[class] .project-lightbox button:disabled{opacity:.45;cursor:default}

/* Clear blurred backdrop and arrows alongside the enlarged piece. */
body[class] .project-lightbox:focus{outline:none}
body[class] .lightbox-stage{position:relative}
body[class] .lightbox-stage img{max-width:calc(100% - 112px);max-height:calc(100dvh - 128px)}
body[class] .project-lightbox .lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;border-radius:50%;font-size:32px;line-height:1;display:flex;align-items:center;justify-content:center}
body[class] .lightbox-prev{left:0}
body[class] .lightbox-next{right:0}
@media(max-width:720px){body[class] .lightbox-stage img{max-width:calc(100% - 96px)}}
/* Shared normal, hover, pressed and unavailable states for viewer controls. */
body[class] .project-lightbox button{transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .12s ease}
body[class] .project-lightbox button:not(:disabled):hover{background:var(--red);border-color:var(--red);color:var(--cream)}
body[class] .project-lightbox button:not(:disabled):active{background:var(--ink);border-color:var(--ink);color:var(--cream);transform:translateY(1px) scale(.97)}
body[class] .project-lightbox .lightbox-arrow:not(:disabled):active{transform:translateY(-50%) scale(.94)}
body[class] .project-lightbox button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(hover:none){body[class] .project-lightbox button:not(:disabled):hover{background:var(--cream);border-color:var(--cream);color:var(--red)}body[class] .project-lightbox button:not(:disabled):active{background:var(--ink);border-color:var(--ink);color:var(--cream)}}

body[class] .project-lightbox .lightbox-close{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1}

body[class] .gallery-enlarge.was-opened:focus,body[class] .gallery-enlarge.was-opened:focus-visible{outline:none;box-shadow:none}

/* Red plus cursor and video enlargement preserve the native playback controls. */
body[class] .gallery-enlarge,body[class] .gallery-enlarge img,body[class] .gallery-video-figure video{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' fill='none' stroke='%23DD302D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 12 12,pointer}
body[class] .gallery-video-figure{position:relative}
body[class] .video-enlarge{position:absolute;right:10px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:var(--cream);color:var(--red);font:inherit;font-size:26px;line-height:1;cursor:pointer}
body[class] .video-enlarge:hover{background:var(--red);color:var(--cream)}
body[class] .video-enlarge:active{background:var(--ink);color:var(--cream);transform:scale(.94)}
body[class] .lightbox-stage video{display:block;width:auto;height:auto;max-width:calc(100% - 112px);max-height:calc(100dvh - 128px);border-radius:16px;object-fit:contain}
body[class] .lightbox-stage [hidden]{display:none!important}
@media(max-width:720px){body[class] .lightbox-stage video{max-width:calc(100% - 96px)}}

/* Optically centred, fine-line viewer controls and viewport-centred media. */
body[class] .lightbox-toolbar{position:relative;z-index:1;color:var(--red)}
body[class] .lightbox-stage{position:absolute;inset:88px clamp(16px,3vw,40px);flex:none}
body[class] .lightbox-stage img,body[class] .lightbox-stage video{max-height:calc(100dvh - 176px)}
body[class] .project-lightbox button .viewer-icon,body[class] .video-enlarge .viewer-icon{display:block;flex-shrink:0;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
body[class] .video-enlarge{display:flex;align-items:center;justify-content:center;padding:0}

/* Mobile refinement: consistent markers, readable media and reachable controls. */
@media(max-width:720px){
 body[class] .work-name{min-width:0;overflow-wrap:normal}
 body[class] .work-item{row-gap:8px}
 body[class] .work-meta{margin-top:0}
 body[class] .about{min-height:0}
 body[class] .about-grid p:last-child{margin-bottom:0}
 body[class] .email{display:inline-block;max-width:100%;min-height:44px;padding:8px 0}
 body[class] .about-link{display:inline-flex;align-items:center;min-height:44px}
 body[class] .about-page .info-block h3{margin-bottom:12px}
 body[class] .about-page .info-block a{display:inline-block;min-height:44px;padding:8px 0}
 body[class] .clubber-band{flex-direction:column;align-items:flex-start;gap:8px}
 body[class] .lets-label,body[class] .pantene-overview-label{margin-bottom:0}
 body[class] .pantene-htrack,body[class] .olympics-htrack{gap:20px;padding-right:0}
 body[class] .pantene-htrack figure,body[class] .pantene-post-gallery .pantene-htrack figure,body[class] .olympics-htrack figure{width:min(72vw,360px);flex:0 0 auto}
 body[class] .pantene-story-gallery .pantene-htrack figure,body[class] .pantene-reels-gallery .pantene-htrack figure{width:min(72vw,300px);flex:0 0 auto}
 body[class] .clubber-final-screens{width:100%;margin:32px 0 0;padding:0}
 body[class] .clubber-research-grid,body[class] .clubber-insight-grid,body[class] .clubber-opportunities,body[class] .clubber-identity-process{margin-top:32px}
 body[class] .clubber-identity-card{min-height:0;padding:20px 0}
 body[class] .back-to-top{width:44px;height:44px;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}
 body[class] footer{padding-bottom:calc(72px + env(safe-area-inset-bottom));gap:16px;flex-wrap:wrap}
 body[class] .video-enlarge{width:44px;height:44px}
 body[class] .project-lightbox{padding:16px max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left))}
 body[class] .lightbox-stage{inset:72px max(12px,env(safe-area-inset-right)) 72px max(12px,env(safe-area-inset-left))}
 body[class] .lightbox-stage img,body[class] .lightbox-stage video{max-width:calc(100% - 96px);max-height:calc(100dvh - 144px)}
}
/* Short landscape screens keep the viewer centred without wasting vertical space. */
@media(max-height:480px){
 body[class] .project-lightbox{padding:12px 16px}
 body[class] .lightbox-stage{inset:64px 16px}
 body[class] .lightbox-stage img,body[class] .lightbox-stage video{max-height:calc(100dvh - 128px)}
}

body[class] .work-phrase{white-space:nowrap}

/* About link: draw the underline only on interaction. */
body[class] .about-link{position:relative;border-bottom:0;text-decoration:none}
body[class] .about-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
body[class] .about-link:hover::after,body[class] .about-link:focus-visible::after{transform:scaleX(1)}

/* A screen-rendered SVG remains sharp at every display pixel density. */
html.vector-gallery-cursor body[class] .gallery-enlarge,html.vector-gallery-cursor body[class] .gallery-enlarge img{cursor:none}
body[class] .gallery-plus-cursor{position:fixed;z-index:1100;width:24px;height:24px;transform:translate(-50%,-50%);pointer-events:none;color:var(--red)}
body[class] .gallery-plus-cursor[hidden]{display:none}
body[class] .gallery-plus-cursor svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Shared interaction rhythm; existing entrance choreography stays intact. */
body[class] .nav a,body[class] .back,body[class] .info-block a,body[class] .about-link,body[class] .email,body[class] .brand-wrap{transition:color .18s ease,opacity .12s ease}
body[class] .project-nav a{transition:color .18s ease,opacity .12s ease!important}
body[class] .back:hover,body[class] .back:focus-visible{color:var(--red)}
body[class].clubber-page .back:hover,body[class].clubber-page .back:focus-visible{color:var(--lime)}
body[class] .nav a:active,body[class] .back:active,body[class] .project-nav a:active,body[class] .info-block a:active,body[class] .about-link:active,body[class] .email:active,body[class] .brand-wrap:active{opacity:.7}
body[class] .video-enlarge{transition:background-color .16s ease,color .16s ease,transform .12s ease}
body[class] .back-to-top:active{transform:translateY(1px) scale(.94)}
body[class] .video-enlarge:focus-visible{outline:2px solid var(--red);outline-offset:4px}
body[class] .email{position:relative;border-bottom:0;text-decoration:none}
body[class] .email::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
body[class] .email:hover::after,body[class] .email:focus-visible::after{transform:scaleX(1)}
@media(hover:none){body[class] .email:active::after,body[class] .about-link:active::after{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){body[class] .project-nav a{transition:none!important}}

/* Home work rows share Pantene's line → label → content reveal rhythm. */
html.home-reveal-ready body[class] .work-list .work-item{border-bottom-color:transparent}
html.home-reveal-ready body[class] .work-list .work-item::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left center;pointer-events:none}
html.home-reveal-ready body[class] .work-list .work-num,html.home-reveal-ready body[class] .work-list .work-name,html.home-reveal-ready body[class] .work-list .work-meta{opacity:0;transform:translateY(18px)}
html.home-reveal-ready body[class] .work-list .is-revealed::before{animation:panteneRuleReveal .7s cubic-bezier(.22,.61,.36,1) forwards}
html.home-reveal-ready body[class] .work-list .is-revealed .work-num{animation:panteneTextReveal .65s .18s cubic-bezier(.22,.61,.36,1) forwards}
html.home-reveal-ready body[class] .work-list .is-revealed .work-name{animation:panteneTextReveal .65s .24s cubic-bezier(.22,.61,.36,1) forwards}
html.home-reveal-ready body[class] .work-list .is-revealed .work-meta{animation:panteneTextReveal .65s .30s cubic-bezier(.22,.61,.36,1) forwards}
@media(prefers-reduced-motion:reduce){html.home-reveal-ready body[class] .work-list .work-item::before{transform:none}html.home-reveal-ready body[class] .work-list .work-item > span{opacity:1;transform:none}}


/* Mobile videos keep tap-to-enlarge without the corner plus control. */
@media(max-width:720px),(hover:none),(pointer:coarse){body[class] .video-enlarge{display:none}}

/* Let’s Move stays inline on desktop; mobile enlargement is preserved. */
@media(min-width:721px){
 body[class].lets-page .lets-intro-media .video-enlarge{display:none}
 body[class].lets-page .lets-intro-media video{cursor:auto}
 body[class].lets-page .lets-intro-media video::-webkit-media-controls-fullscreen-button{display:none}
}

/* All text-link hovers draw the same underline, limited to their label. */
body[class] .underline-label{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:left bottom;background-size:0% 1px;transition:background-size .28s ease;box-decoration-break:clone;-webkit-box-decoration-break:clone}
body[class] a:hover > .underline-label,body[class] a:focus-visible > .underline-label{background-size:100% 1px}
body[class] .email::after,body[class] .about-link::after{display:none}
@media(hover:none){body[class] a:active > .underline-label{background-size:100% 1px}}
/* The header signature responds with an icon quarter-turn. */
body[class] .brand-wrap > .underline-label{background-image:none}
body[class] .brand-wrap .brand-icon{transition:transform .35s cubic-bezier(.22,.61,.36,1);transform-origin:center}
body[class] .brand-wrap:hover .brand-icon,body[class] .brand-wrap:focus-visible .brand-icon{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){body[class] .brand-wrap .brand-icon{transition:none}}

/* Let’s Move video remains visible in place, without a scroll reveal. */
body[class].lets-page .lets-intro-media video{opacity:1!important;transform:none!important;animation:none!important}

/* Less condensed heading tracking on phones, with the same typeface and sizes. */
@media(max-width:720px){
 body[class] .home-hero h1{letter-spacing:-.04em;line-height:1}
 body[class] .project-header .project-title,body[class] .about-page .about-hero h1{letter-spacing:-.03em;line-height:1.05}
 body[class] .work-name{letter-spacing:-.025em}
 body[class] .about h2,body[class] .contact h2{letter-spacing:-.035em;line-height:1.08}
 body[class].lets-page .lets-concept-top .lets-copy h2{letter-spacing:-.025em}
}
/* Existing carousels, About blocks, work rows and Concept keep their own motion. */
@keyframes sectionContentEnter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
html.section-reveal-ready body[class] .section-reveal-item{opacity:0;translate:0 18px}
html.section-reveal-ready body[class] .section-reveal-item.section-is-visible{animation:sectionContentEnter .65s .08s cubic-bezier(.22,.61,.36,1) forwards}
@media(prefers-reduced-motion:reduce){html.section-reveal-ready body[class] .section-reveal-item{opacity:1;translate:none}}