/* At scroll, shared navigation uses the appointment teaser's charcoal glass. */
/* Fixed geometry and horizontal relative offsets keep labels level and menus viewport-fixed. */
/* Original navigation labels and destinations, with the local glass treatment. */
/* Opaque base and sheen belong to the moving panel, not a separate backdrop. */
/* Opening and closing share one reversible timeline in nav-motion.mjs. */
/* Section boundaries stay straight; rounded corners belong to the inner components. */
#main>section,.making{border-radius:0}
/* Opening film. The image carries the hero; text occupies the lower edge. */
.hero{position:relative;height:calc(100svh - var(--client-strip-height));min-height:0;background:var(--dark);overflow:hidden;color:#fff;isolation:isolate}
.hero-media,.hero-shade{position:absolute;inset:0;z-index:-2}.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%;filter:none}.hero-video{opacity:0;transition:opacity 1s}.hero-video.is-playing{opacity:1}.hero-shade{z-index:-1;background:linear-gradient(180deg,rgb(0 0 0 / 24%),transparent 140px)}
/* Match the current site's fade into the black client band. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgb(5 5 5 / 0),rgb(5 5 5 / 45%) 48%,rgb(5 5 5 / 85%) 78%,var(--dark) 100%)}
/* Frosted glass: blur the moving background, never the image or the copy. */
.spotlight{position:absolute;right:var(--gutter);top:130px;display:flex;align-items:center;gap:20px;width:360px;padding:10px 20px 10px 10px;transition:transform .5s var(--ease),background-color .3s;animation:hero-in .85s .55s var(--ease) both;overflow:hidden}
.spotlight:hover{transform:scale(1.01)}
.spotlight-image{width:94px;height:106px;object-fit:cover;border-radius:var(--radius)}.spotlight>div{text-shadow:0 1px 6px rgb(0 0 0 / 35%)}.spotlight .eyebrow{font-size:8px;margin:0 0 5px;color:rgb(255 255 255 / 85%)}.spotlight strong{display:block;font-weight:400;font-size:20px;line-height:1.4;letter-spacing:-.04em}.spotlight span{display:block;font-size:10px;color:rgb(255 255 255 / 88%)}.spotlight .spotlight-link{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:20px;color:#fff;font-size:10px}.spotlight svg{width:15px;height:15px;transition:transform .3s}.spotlight:hover svg{transform:translate(2px,-2px)}
.hero-bottom{position:absolute;bottom:clamp(32px,6svh,64px);left:var(--gutter);right:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:end}.hero-copy>.eyebrow{font-size:10px;margin-bottom:25px;animation:hero-in .8s .1s var(--ease) both}.hero h1{max-width:1300px;text-wrap:balance;font-size:var(--hero-title);line-height:1.04;letter-spacing:-.065em;animation:hero-in .9s .2s var(--ease) both}.hero-description{margin-top:var(--title-gap);font-size:var(--intro-size);line-height:1.7;color:rgb(255 255 255 / 80%);animation:hero-in .85s .3s var(--ease) both;max-width:600px;white-space:normal}.hero-actions{display:flex;flex-direction:row;width:fit-content;gap:12px;animation:hero-in .85s .4s var(--ease) both}.hero-actions .button{padding-inline:22px;font-size:12px}.reel-button{display:flex;align-items:center;text-align:left;gap:16px;padding:8px 17px 8px 8px;border-radius:var(--radius);color:#fff;min-height:65px;transition:background .3s;font-size:12px}.reel-caption{display:block;font-size:9px;color:#bec4b8;margin-top:3px}.reel-thumbnail{width:50px;height:47px;position:relative;overflow:hidden;border-radius:var(--radius)}.reel-thumbnail img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}.reel-thumbnail>svg{position:absolute;inset:0;margin:auto;width:22px;height:22px}.reel-play{margin-left:auto}.reel-play svg{width:17px;height:17px}
/* Two identical groups create a seamless, slow loop of actual client logos. */
.hero-rating{display:inline-flex;align-items:center;gap:12px;padding:9px 14px;margin-bottom:20px;font-size:13px;line-height:1.5;white-space:nowrap}.hero-rating-stars{color:#fbbc04;font-size:18px;letter-spacing:2px;line-height:1}.hero-rating strong{font-weight:600}.hero-rating-separator{padding-inline:8px;opacity:.65}
.hero-actions>.button,.hero-actions>.reel-button{min-width:250px;min-height:60px}
.hero-actions>.button.button--quote,.hero-actions>.button.button--work{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;min-height:0;padding:14px 22px;font-size:18px;font-weight:600;line-height:1.65;border-radius:var(--radius);white-space:nowrap}
.hero-actions>.button.button--quote{background:var(--white);color:#111}.hero-actions>.button.button--quote,.hero-actions>.button.button--work{align-self:flex-start;transition:background .2s}.hero-actions>.button:hover{transform:none}.hero-actions>.button.button--quote:hover{background:#e7e8e0}
.client-logos img[src$="logo-axa.webp"]{border-radius:var(--radius)}
.client-logo-window{overflow:hidden;width:100%;mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}.client-logo-track{display:flex;width:max-content;animation:client-loop var(--client-loop-duration) linear infinite;will-change:transform}.client-strip:focus-within .client-logo-track{animation-play-state:paused}
@keyframes client-loop{to{transform:translateX(-50%)}}
.client-strip{height:var(--client-strip-height);padding-block:24px 56px;padding-inline:var(--gutter);display:grid;align-items:center;background:var(--dark);color:#fff}.client-strip>.eyebrow{justify-content:center;margin-bottom:32px;font-size:9px;color:var(--muted)}.client-logos{width:max-content;flex-shrink:0;padding-inline:clamp(32px,3vw,50px);display:flex;align-items:center;gap:clamp(64px,6vw,100px)}.client-logos img{width:132px;height:44px;flex-shrink:0;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}.client-logos img[src$="logo-axa.webp"]{width:48px;height:48px}.client-logos img[src$="logo-aws.webp"]{width:84px;height:48px}
/* Full-bleed 4:3 cards: client logo above, glass type badge below. */
.section-heading{display:block;margin-bottom:var(--heading-gap)}.heading-aside{max-width:600px;margin-top:var(--title-gap);font-size:var(--intro-size);color:var(--muted)}.heading-aside .text-link{margin-top:24px;color:var(--ink)}
.work{background:var(--paper)}.work .section-heading h2{max-width:none;white-space:nowrap}.work .heading-aside{max-width:none;white-space:normal}
.work-grid{--work-gap:var(--card-gap);position:relative;display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--work-gap)) / 3);gap:var(--work-gap);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
/* Fade cards in without creating vertical overflow from offscreen reveal transforms. */
.work-grid>.project.reveal{transform:none}
.work-grid::-webkit-scrollbar{display:none}.project{min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.project-media{position:relative;aspect-ratio:4 / 3;border-radius:var(--radius);overflow:hidden;isolation:isolate;background:#191d18}

.project-poster,.project-preview,.project-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.project-poster{transition:transform .8s var(--ease);filter:none}.project-preview{opacity:0;transition:opacity .55s}.project-preview.is-playing{opacity:1}
.project-preview--vimeo{inset:50% auto auto 50%;width:var(--preview-width,133.334%);height:var(--preview-height,100%);max-width:none;transform:translate(-50%,-50%);border:0;pointer-events:none}

.project-media:is(:hover,:focus-within) .project-poster{transform:scale(1.035)}


.work-controls:not([hidden]){display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.work-direction{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--radius);transition:background .2s}.work-direction:first-child svg{transform:rotate(180deg)}.work-direction:hover:enabled{background:rgb(255 255 255 / 65%)}.work-direction:disabled{opacity:.3;cursor:default}
/* Compact video formats: both desktop rows fit together below the fixed nav. */
.expertise{background:var(--paper)}
.format-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--card-gap)}
.format-tile{position:relative;display:flex;align-items:flex-end;min-height:clamp(260px,32svh,330px);min-width:0;isolation:isolate;overflow:hidden;border-radius:var(--radius);background:var(--dark);color:#fff}
.format-poster,.format-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;z-index:-2}.format-video{opacity:0;transition:opacity .4s}.format-video.is-playing{opacity:1}
.format-tile::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 20%,rgb(0 0 0 / 25%) 45%,rgb(0 0 0 / 88%) 100%)}
.format-copy{padding:clamp(24px,1.8vw,32px)}.format-copy h3{font-size:var(--card-title);font-weight:500;line-height:1.16}.format-copy p{font-size:var(--body-size);line-height:1.55;margin-top:var(--title-gap);max-width:440px;color:rgb(255 255 255 / 88%)}
.process{background:var(--dark);color:#fff}
/* Paired editorial panels share the same margins, corners and original photography. */
.editorial-split{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--card-gap);align-items:stretch;background:var(--paper)}
.editorial-media{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);min-height:clamp(580px,48vw,800px);color:#fff;background:var(--dark)}
.editorial-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;z-index:-2}
.editorial-media::after{content:'';position:absolute;inset:30% 0 0;z-index:-1;background:linear-gradient(transparent,rgb(0 0 0 / 72%))}
.editorial-media h2{position:absolute;left:clamp(28px,3vw,52px);right:clamp(28px,3vw,52px);bottom:var(--heading-gap);text-wrap:pretty}
.editorial-copy{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(32px,3.5vw,60px);border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.editorial-copy>.eyebrow{font-size:12px;margin-bottom:var(--title-gap)}.editorial-copy>p{font-size:var(--body-size);line-height:1.5;letter-spacing:-.025em}
.editorial-button{display:inline-flex;justify-content:center;align-items:center;min-height:56px;padding:14px 22px;border:1px solid var(--line);border-radius:var(--radius);font-size:16px;font-weight:500;line-height:1.4}
.editorial-copy>.editorial-button{margin-top:auto;align-self:flex-start}.editorial-copy>p{margin-bottom:var(--heading-gap)}
.editorial-split--reverse{grid-template-columns:.85fr 1.15fr}.editorial-split--reverse .editorial-media{grid-column:2;grid-row:1}.editorial-split--reverse .editorial-copy{grid-column:1;grid-row:1}
.editorial-copy--dark{background:var(--dark);color:#fff;border-color:var(--dark)}.editorial-copy--dark .editorial-button{border-color:var(--line-light)}
.making-wrap{padding-block:var(--section-space)}.final-wrap{padding:var(--section-space) var(--gutter);background:var(--paper)}
.final-wrap>.final-cta{border-radius:var(--radius)}
/* A full-width introduction, then one review row and a faded preview of the next. */
.testimonials{background:var(--dark);color:#fff}
.testimonials-actions{display:flex;justify-content:center;margin-top:var(--heading-gap)}
.testimonials-actions>.button{font-size:18px;line-height:1.65;padding:14px 22px;min-height:0}
.reviews-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:1fr;gap:var(--card-gap)}
.testimonials-intro{grid-column:1 / -1;align-self:start;padding:0 0 calc(var(--heading-gap) - var(--card-gap))}.testimonials-intro h2{letter-spacing:-.05em;max-width:none}.testimonials-intro>p{max-width:none;color:var(--muted-light);font-size:var(--intro-size);margin-top:var(--title-gap)}
.review-tile{display:flex;flex-direction:column;min-width:0;padding:clamp(24px,1.8vw,34px)}
.review-index--six{display:none}.review-index--seven{display:inline}
.review-source-label{font-size:12px;color:var(--muted-light);letter-spacing:.04em}
.review-author{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center}
.review-portrait{width:48px;height:48px;object-fit:cover;border-radius:var(--radius);filter:none}
.review-author h3,.review-author .review-name{font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.02em}.review-author p:not(.review-name),.review-author .review-role{font-size:12px;color:var(--muted-light);line-height:1.5;margin-top:5px}
.review-rating{margin-top:16px}.review-stars{color:#fbbc04;font-size:18px;letter-spacing:3px;line-height:1}
.review-tile blockquote,.review-tile .review-quote{font-size:var(--body-size);font-weight:500;line-height:1.4;letter-spacing:-.03em;margin:16px 0;text-wrap:pretty}
.review-tile-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line-light)}
.review-logo{width:124px;height:34px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}.review-tile-bottom>span{font-size:12px;color:var(--muted-light)}
.review-logo[src$="logo-axa.webp"]{width:34px;height:34px;border-radius:var(--radius)}
.faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(60px,10vw,180px);align-items:start;row-gap:var(--heading-gap)}.faq-intro>p:not(.eyebrow){margin-top:var(--title-gap);color:var(--muted);font-size:13px}.faq-intro .text-link{margin-top:20px}.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}.faq-item summary{cursor:pointer;list-style:none;padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:var(--card-title);letter-spacing:-.03em;line-height:1.45}.faq-item summary::-webkit-details-marker{display:none}.faq-plus{font-size:26px;font-weight:400;transition:transform .3s}.faq-item[open] .faq-plus{transform:rotate(45deg)}.faq-answer{overflow:hidden}.faq-answer p{padding:0 32px 26px 0;font-size:var(--body-size);line-height:1.8;color:var(--muted)}.faq-item::details-content{transition:height .35s var(--ease),content-visibility .35s;transition-behavior:allow-discrete;height:0;overflow:clip}.faq-item[open]::details-content{height:auto}@supports(interpolate-size:allow-keywords){.faq-item{interpolate-size:allow-keywords}}
.final-cta{position:relative;overflow:hidden;min-height:480px;color:#fff;background:var(--dark);isolation:isolate;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--section-space) 24px}.final-image,.final-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.final-image{filter:saturate(.2);object-position:center 65%}.final-shade{background:rgb(6 10 6 / 78%);z-index:-1}.final-cta .eyebrow{justify-content:center;color:#c9d0c0}.final-cta h2{max-width:1100px;text-wrap:balance}.final-cta h2 span{color:#c6cfbb}.final-actions{display:flex;justify-content:center;align-items:center;gap:var(--card-gap);margin-top:var(--heading-gap)}.final-content>.final-description{margin-top:var(--title-gap);color:#d1d7c9;font-size:var(--intro-size)}.final-actions .button{min-width:230px}
/* Native dialogs give focus trapping, inert backgrounds and Escape support. */
.project-link{display:block}.project-link:focus-visible{outline-offset:-2px}
.project-logo{width:124px;height:34px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.project-client-name{display:flex;align-items:center;min-height:34px;color:#fff;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.03em}
.project-caption{position:absolute;inset:0 0 auto;padding:28px 28px 72px;color:#fff;background:linear-gradient(0deg,transparent,rgb(0 0 0 / 42%) 45%,rgb(0 0 0 / 66%));pointer-events:none}
.project-type{position:absolute;bottom:28px;left:28px;max-width:calc(100% - 56px);padding:14px 22px;color:#fff;font-size:18px;font-weight:600;line-height:1.65;letter-spacing:0;text-shadow:none;box-shadow:none;--glass-filter:blur(4px) saturate(145%);pointer-events:none}
.work-heading-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.work .work-heading-row h2{white-space:normal}
.work-heading-row .work-controls{margin:0;flex-shrink:0}
.process-steps{border-top:1px solid var(--line-light)}
.process-step{border-bottom:1px solid var(--line-light)}
.process-step>summary{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;align-items:center;gap:20px;min-height:72px;padding-block:16px;list-style:none;cursor:pointer;font-size:var(--card-title);line-height:1.3}
.process-step>summary::-webkit-details-marker{display:none}
.step-number{font-size:14px;color:var(--muted-light)}.step-plus{font-size:28px;text-align:center;line-height:1;transition:transform .3s var(--ease)}.process-step[open] .step-plus{transform:rotate(45deg)}
.process-detail{padding:0 48px 28px 60px;max-width:940px}.process-detail h3{font-size:var(--card-title);font-weight:500;line-height:1.3}.process-detail>p{margin-top:var(--title-gap);font-size:var(--body-size);color:var(--muted-light);line-height:1.7}.process-detail .text-link{margin-top:16px;font-size:16px}
.process-projects{margin-top:var(--heading-gap);font-size:16px}
.making-photos{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--card-gap)}.making-photos img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;border-radius:var(--radius);filter:none}
.reviews-window{position:relative}.reviews-disclosure:not([hidden]){display:flex;justify-content:center;margin-top:24px}.reviews-disclosure .button{font-size:16px;justify-content:center;min-height:48px;padding:12px 24px}
.reviews-disclosure .button{color:#fff;transition:background .2s}.reviews-disclosure .button:hover{transform:none}
.reviews-window.is-collapsed{max-height:var(--review-preview-height);overflow:clip}
.reviews-window.is-collapsed::after{content:'';position:absolute;inset:auto 0 0;height:144px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--dark) 90%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);mask-image:linear-gradient(transparent,#000 65%);-webkit-mask-image:linear-gradient(transparent,#000 65%)}
.reviews-window.is-collapsed .reviews-disclosure{position:absolute;inset:auto 0 16px;z-index:1;margin:0}
.film-modal{position:fixed;inset:0;width:calc(100% - 48px);max-width:1500px;max-height:calc(100svh - 48px);margin:auto;background:#111;color:#fff;border:1px solid #383b34;border-radius:var(--radius);padding:24px;overflow:auto;animation:modal-in .3s var(--ease)}.film-modal::backdrop{background:rgb(0 0 0 / 88%)}.film-top,.film-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.film-top{margin-bottom:20px}.film-top .eyebrow{margin-bottom:5px;font-size:8px;color:#b2b8aa}.film-top h2{letter-spacing:-.02em}.film-player{position:relative;aspect-ratio:16/9;max-height:calc(100svh - 245px);width:100%;background:#050505;border-radius:var(--radius);overflow:hidden}.film-player iframe{width:100%;height:100%;border:0;position:absolute;inset:0}.film-bottom{margin-top:12px;font-size:11px;color:#c8cdbf}.film-modal .icon-button{width:42px;height:42px}
@keyframes hero-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes modal-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
/* Home H5: paint essential content before enhancing presentation. */
body.home-v2 .hero h1,
body.home-v2 .hero-description,
body.home-v2 .hero-actions{opacity:1;transform:none;animation:none}
@media(prefers-reduced-motion:no-preference){
  .js-motion body.home-v2 .hero h1,
  .js-motion body.home-v2 .hero-description,
  .js-motion body.home-v2 .hero-actions{animation:home-content-settle .6s var(--ease) both}
}
@keyframes home-content-settle{from{opacity:1;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}