/* Operational additions only; page layout remains sourced from the supplied HTML/CSS. */
.footer__legal{display:flex;gap:1.25em;flex-wrap:wrap;margin-top:2em;font-size:var(--fs-body,16px)}.footer__legal button{text-decoration:underline;text-underline-offset:3px}

/* Cookie consent — compact Spread-styled bottom bar. */
.consent[hidden]{display:none!important}
.consent{
  position:fixed;
  inset:auto 0 0;
  z-index:9999;
  display:flex;
  justify-content:center;
  padding:0;
  background:transparent;
}
.consent__panel{
  width:100%;
  max-height:calc(100dvh - 12px);
  overflow:auto;
  background:var(--grey,#E6E6E6);
  color:var(--black,#000);
  border-top:4px solid var(--orange,#F46600);
  box-shadow:0 -8px 28px rgba(0,0,0,.12);
  padding:18px clamp(20px,3.2vw,54px);
  animation:consent-in .24s cubic-bezier(.22,.8,.32,1) both;
}
.consent__header{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.consent__copy{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 8px;
  max-width:880px;
}
.consent__copy>p{
  margin:0;
  font-size:clamp(15px,1.12vw,18px);
  line-height:1.35;
}
.consent__privacy{
  display:inline;
  margin:0;
  font-size:clamp(15px,1.12vw,18px);
  font-weight:400;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.consent__actions{display:flex;gap:9px;align-items:center}
.consent__actions--main{flex-direction:row;align-items:center;white-space:nowrap}
.consent__button{
  min-height:38px;
  padding:8px 16px;
  border:1px solid var(--black,#000);
  border-radius:999px;
  font-family:"Nimbus Sans Novus",Helvetica,Arial,sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1;
  text-align:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.consent__button:hover{transform:translateY(-1px)}
.consent__button--primary{background:var(--orange,#F46600);border-color:var(--orange,#F46600);color:#000}
.consent__button--primary:hover{background:#000;border-color:#000;color:#fff}
.consent__button--secondary{background:transparent;color:#000}
.consent__button--secondary:hover{background:#000;color:#fff}
.consent__button--text{background:transparent;color:#000}
.consent__button--text:hover{background:#fff}
.consent__button:focus-visible,.consent__privacy:focus-visible,.policy__consent-button:focus-visible{outline:2px solid var(--orange,#F46600);outline-offset:3px}

.consent__choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.22);
}
.consent__choices[hidden]{display:none!important}
.consent__choice{
  min-height:78px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:0 clamp(16px,2vw,28px) 0 0;
}
.consent__choice+.consent__choice{
  border-left:1px solid rgba(0,0,0,.18);
  padding-left:clamp(16px,2vw,28px);
}
.consent__choice-copy{display:flex;flex-direction:column;gap:5px;max-width:280px}
.consent__choice-copy strong{font-family:"Grotta",Helvetica,Arial,sans-serif;font-size:18px;font-weight:500;line-height:1.05}
.consent__choice-copy span{font-size:12px;line-height:1.35;color:rgba(0,0,0,.68)}
.consent__switch{position:relative;flex:0 0 auto;width:44px;height:25px;margin-top:1px;cursor:pointer}
.consent__switch input{position:absolute;opacity:0;pointer-events:none}
.consent__switch-ui{position:absolute;inset:0;border:1px solid #000;border-radius:999px;background:transparent;transition:background .18s ease,border-color .18s ease}
.consent__switch-ui::after{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;border-radius:50%;background:#000;transition:transform .2s cubic-bezier(.22,.8,.32,1),background .18s ease}
.consent__switch input:checked+.consent__switch-ui{background:var(--orange,#F46600);border-color:var(--orange,#F46600)}
.consent__switch input:checked+.consent__switch-ui::after{transform:translateX(19px)}
.consent__switch input:focus-visible+.consent__switch-ui{outline:2px solid var(--orange,#F46600);outline-offset:3px}
.consent__switch--locked{cursor:default;opacity:.56}
.consent__actions--save{grid-column:1/-1;justify-content:flex-end;padding-top:12px}
.consent__actions--save .consent__button{min-width:180px}

/* Re-open consent from the existing Privacy & Cookies Policy page. */
.policy__consent-control{margin-bottom:14px!important}
.policy__consent-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin:0 0 28px;
  padding:11px 20px;
  border:1px solid currentColor;
  border-radius:999px;
  font-family:"Nimbus Sans Novus",Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.policy__consent-button:hover{background:#fff;color:#000;transform:translateY(-1px)}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@keyframes consent-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:900px){
  .consent__header{grid-template-columns:1fr;gap:14px}
  .consent__actions--main{justify-content:flex-start;flex-wrap:wrap}
}
@media(max-width:600px){
  .consent__panel{max-height:92dvh;border-top-width:4px;padding:16px 18px}
  .consent__copy{display:block}
  .consent__copy>p,.consent__privacy{font-size:15px;line-height:1.35}
  .consent__privacy{display:inline-block;margin-top:4px}
  .consent__actions--main{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .consent__button{min-height:40px;padding:9px 12px}
  .consent__button--text{grid-column:1/-1}
  .consent__choices{grid-template-columns:1fr;margin-top:14px;padding-top:10px}
  .consent__choice{min-height:auto;padding:10px 0}
  .consent__choice+.consent__choice{border-left:0;border-top:1px solid rgba(0,0,0,.16);padding-left:0}
  .consent__choice-copy{max-width:calc(100% - 68px)}
  .consent__actions--save{padding-top:10px}
  .consent__actions--save .consent__button{width:100%;min-width:0}
  .footer__legal{margin-top:1.2em}
}

@media(prefers-reduced-motion:reduce){
  .consent__panel{animation:none}
  .consent__button,.policy__consent-button,.consent__switch-ui,.consent__switch-ui::after{transition:none}
}

.media-placeholder{display:grid;place-items:center;background:#8E8B86;color:#fff;min-height:200px}.case-media-video{position:relative;width:100%;height:100%;overflow:hidden;background:#000}.case-media-video video,.case-media-video img{width:100%;height:100%;object-fit:cover}.vimeo-shell{position:relative;background:#111;aspect-ratio:16/9;overflow:hidden}.vimeo-shell img{width:100%;height:100%;object-fit:cover}.vimeo-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border:2px solid #fff;border-radius:50%;color:#fff;background:rgba(0,0,0,.15);font-size:30px;display:grid;place-items:center}.vimeo-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:700px){.consent{padding:0}.consent__panel{width:100%}.footer__legal{margin-top:1.2em}}

.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.case-media-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.2vw,20px)}.case-media-grid>li{min-width:0}.case-media-grid .width-1-3{grid-column:span 4}.case-media-grid .width-1-2{grid-column:span 6}.case-media-grid .width-2-3{grid-column:span 8}.case-media-grid .width-full{grid-column:1/-1}.case-media-grid .ratio-16-9{aspect-ratio:16/9}.case-media-grid .ratio-9-16{aspect-ratio:9/16}.case-media-grid .ratio-1-1{aspect-ratio:1}.case-media-grid .ratio-4-5{aspect-ratio:4/5}.case-media-grid .ratio-3-2{aspect-ratio:3/2}.case-media-grid .ratio-poster{aspect-ratio:1/1.414}.case-media-grid .ratio-auto{aspect-ratio:auto}.case-media-grid img{width:100%;height:100%;object-fit:cover}.case-media-grid--mobile{display:none}@media(max-width:700px){.case-media-grid--desktop{display:none}.case-media-grid--mobile{display:grid}}

.work__media img,.case__media img,.media>img,.media>.vimeo-shell{width:100%;height:100%;object-fit:cover}.media>.vimeo-shell{position:absolute;inset:0}.media-text{padding:clamp(18px,3vw,42px);align-self:stretch;justify-self:stretch;background:#fff;color:#000;overflow:auto}

.work__media video,.case__media video{width:100%;height:100%;object-fit:cover;display:block}
@media(prefers-reduced-motion:reduce){.work__media video,.case__media video{background-size:cover;background-position:center}}

/* Keep the original desktop proportions when the initial database contains fewer than three featured cases. */
@media(min-width:701px){
  .work__grid.work__grid--2{grid-template-columns:repeat(2,1fr) .593fr}
  .work__grid.work__grid--1{grid-template-columns:1fr .593fr}
  .work__grid.work__grid--0{grid-template-columns:.593fr}
}


/* Hero cases are fully clickable while the numbered navigation remains above them. */
.slide__link{
  position:absolute;
  inset:0;
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.slide__link:focus-visible{
  outline:2px solid #fff;
  outline-offset:-6px;
}

/* Vimeo play control — uses the supplied Spread play-button SVG everywhere. */
.vimeo-play{
  position:absolute;
  inset:0;
  margin:auto;
  width:clamp(58px,6.2vw,86px);
  height:clamp(58px,6.2vw,86px);
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:2;
  transition:transform .22s ease, opacity .18s ease;
}
.vimeo-play img{
  display:block;
  width:100%;
  height:100%;
}
.vimeo-play:hover{transform:scale(1.05)}
.vimeo-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
.vimeo-shell>img,.vimeo-shell>.vimeo-play{transition:opacity .18s ease,visibility .18s ease}
.vimeo-shell.is-playing>img,.vimeo-shell.is-playing>.vimeo-play{opacity:0;visibility:hidden;pointer-events:none}

/* Match the non-Vimeo placeholder play mark to the same lighter visual language. */
.media__play{
  width:clamp(58px,6.2vw,86px);
}
.media__play circle{
  stroke-width:1.6;
}
.media__play polygon{
  transform:translateX(2px);
  transform-origin:center;
}

/* Cookie consent — compact lower-right card from 768px and up. */
@media(min-width:768px){
  .consent{
    justify-content:flex-end;
    align-items:flex-end;
    padding:0 24px 22px 0;
    pointer-events:none;
  }
  .consent__panel{
    width:min(410px,calc(100vw - 48px));
    max-height:calc(100dvh - 44px);
    padding:15px 16px 14px;
    border-top-width:3px;
    box-shadow:0 8px 28px rgba(0,0,0,.14);
    pointer-events:auto;
    font-size:15px;
  }
  .consent__header{
    display:block;
  }
  .consent__copy{
    display:block;
    max-width:none;
  }
  .consent__copy>p,
  .consent__privacy{
    font-size:15px;
    line-height:1.4;
  }
  .consent__copy>p{
    margin:0;
  }
  .consent__privacy{
    display:inline;
    margin:0;
    white-space:nowrap;
    text-underline-offset:2px;
  }
  .consent__actions--main{
    display:flex;
    width:100%;
    gap:12px;
    margin-top:12px;
    white-space:normal;
  }
  .consent__button{
    min-height:31px;
    padding:5px 8px;
    font-size:15px;
    line-height:1.1;
    flex:1 1 auto;
  }
  .consent__choices{
    grid-template-columns:1fr;
    margin-top:12px;
    padding-top:9px;
  }
  .consent__choice{
    min-height:auto;
    padding:9px 0;
  }
  .consent__choice+.consent__choice{
    border-left:0;
    border-top:1px solid rgba(0,0,0,.16);
    padding-left:0;
  }
  .consent__choice-copy{
    max-width:300px;
    gap:3px;
  }
  .consent__choice-copy strong,
  .consent__choice-copy span{
    font-size:15px;
    line-height:1.35;
  }
  .consent__switch{
    width:40px;
    height:23px;
  }
  .consent__switch-ui::after{
    width:15px;
    height:15px;
  }
  .consent__switch input:checked+.consent__switch-ui::after{
    transform:translateX(17px);
  }
  .consent__actions--save{
    padding-top:9px;
  }
  .consent__actions--save .consent__button{
    min-width:0;
    width:100%;
  }
}

/* Below 768px the banner becomes a compact bottom card with equal side spacing. */
@media(max-width:767px){
  .consent{
    justify-content:center;
    align-items:flex-end;
    padding:0 12px 12px;
  }
  .consent__panel{
    width:100%;
    max-height:calc(100dvh - 24px);
    padding:14px 14px 13px;
    border-top-width:3px;
    font-size:15px;
  }
  .consent__header{
    grid-template-columns:1fr;
    gap:10px;
  }
  .consent__copy{
    display:block;
    max-width:none;
  }
  .consent__copy>p,
  .consent__privacy{
    font-size:15px;
    line-height:1.4;
  }
  .consent__copy>p{
    margin:0;
  }
  .consent__privacy{
    display:inline;
    margin:0;
    white-space:nowrap;
    text-underline-offset:2px;
  }
  .consent__actions--main{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    width:100%;
  }
  .consent__button{
    min-height:29px;
    padding:4px 2px;
    font-size:15px;
    line-height:1.05;
    letter-spacing:-.02em;
    white-space:nowrap;
  }
  .consent__button--primary,
  .consent__button--secondary,
  .consent__button--text{
    flex:1 1 0;
    min-width:0;
  }
  .consent__choices{
    grid-template-columns:1fr;
    margin-top:10px;
    padding-top:8px;
  }
  .consent__choice{
    min-height:auto;
    padding:8px 0;
  }
  .consent__choice+.consent__choice{
    border-left:0;
    border-top:1px solid rgba(0,0,0,.16);
    padding-left:0;
  }
  .consent__choice-copy{
    max-width:calc(100% - 52px);
    gap:3px;
  }
  .consent__choice-copy strong,
  .consent__choice-copy span{
    font-size:15px;
    line-height:1.35;
  }
  .consent__actions--save{
    padding-top:8px;
  }
  .consent__actions--save .consent__button{
    width:100%;
    min-width:0;
  }
}


/* ============================================================
   FINAL UI REFINEMENTS — 2026-08-26
   Kept in site-extra.css so page-specific CSS cannot override them.
   ============================================================ */

/* Header: smaller desktop wordmark/navigation and properly centred language pill. */
.lang-pill span{display:block;line-height:1}
.lang-pill svg{width:.86em;height:.86em;flex:0 0 auto}
@media(min-width:768px){
  :root{
    --logo-w:clamp(72px,8.3vw,120px);
    --fs-nav:clamp(12px,.95vw,16px);
    --nav-gap:1.65em;
  }
  .nav{padding-top:.25em}
  .lang-pill{gap:.35em;padding:.27em .62em .28em .5em}
}

/* Homepage hero: smaller headline/grey band, more room for the moving image. */
.page-home .hero__top{
  padding-top:calc(var(--top-pad-t) + var(--logo-h) + clamp(34px,3.4vw,52px));
  padding-bottom:clamp(18px,1.6vw,26px);
}
.page-home .hero__title{font-size:clamp(34px,4.95vw,74px);max-width:30ch}
.page-home .slide__brand{right:var(--page-x)}
@media(hover:hover) and (pointer:fine){
  .page-home .slide__link{cursor:url('/assets/icons/play-cursor.svg') 21 21,pointer}
}
@media(max-width:767px){
  .page-home .hero__title{font-size:clamp(25px,7vw,32px)}
}

/* Fullscreen page used by homepage hero videos. */
.page-hero-video{margin:0;background:#000;overflow:hidden}
.hero-video-viewer{position:fixed;inset:0;z-index:1;background:#000;display:grid;place-items:center}
.hero-video-viewer__media{width:100%;height:100%;max-width:none;object-fit:cover;background:#000}
.hero-video-viewer__close{
  position:fixed;top:18px;right:22px;z-index:3;width:42px;height:42px;border:1px solid #fff;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-family:"Nimbus Sans Novus",Helvetica,Arial,sans-serif;font-size:30px;font-weight:300;line-height:1;
  background:rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
  transition:background-color .2s ease,color .2s ease
}
.hero-video-viewer__close:hover{background:#fff;color:#000}

/* Homepage agency section: keep the pill CTA on mobile and prevent viewport-height gaps. */
.page-home .about{min-height:auto}
.page-home .about__inner{flex:0 0 auto}
.page-home .about__more{margin-top:clamp(42px,5vw,72px)}
@media(max-width:620px){
  .page-home .about__cta{
    display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
    min-height:2em;padding:0 1.7em;border:1px solid currentColor;border-radius:999px;border-bottom:1px solid currentColor
  }
  .page-home .about__cta:hover{background:#fff;color:#000;opacity:1}
}

/* Homepage cases + logos. */
.work__more{font-family:"Grotta",Helvetica,Arial,sans-serif;font-weight:500;filter:none;transition:background-color .2s ease}
.work__more:hover{filter:none;background:#ff8a3d}
.page-home .work{min-height:auto}

/* Mobile logo wall order matches the supplied reference. Fellowmind is desktop-only. */
@media(max-width:620px){
  .work__logos li[data-logo="seat"]{order:1}
  .work__logos li[data-logo="novo-nordisk"]{order:2}
  .work__logos li[data-logo="aquaporin"]{order:3}
  .work__logos li[data-logo="djoef"]{order:4}
  .work__logos li[data-logo="derma"]{order:5}
  .work__logos li[data-logo="bang-olufsen"]{order:6}
  .work__logos li[data-logo="dansk-standard"]{order:7}
  .work__logos li[data-logo="schneider-electric"]{order:8}
  .work__logos li[data-logo="dansk-ejerkapital"]{order:9;display:grid}
  .work__logos li[data-logo="banedanmark"]{order:10}
  .work__logos li[data-logo="gul-gratis"]{order:11}
  .work__logos li[data-logo="emply"]{order:12}
  .work__logos li[data-logo="danica"]{order:13}
  .work__logos li[data-logo="danner"]{order:14}
  .work__logos li[data-logo="cop"]{order:15}
  .work__logos li[data-logo="fellowmind"]{display:none}
}

/* Cases overview: compact category filters, no forced right/full-width alignment. */
.page-cases .filters{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:7px;margin-bottom:var(--case-filter-gap)}
.page-cases .filter{width:auto;min-height:31px;padding:.35em 1em;font-size:clamp(11px,.9vw,14px);line-height:1}
.page-cases .case-post-links{
  display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin-top:clamp(42px,5vw,70px)
}
.page-cases .case-post-links .filter{
  width:auto;min-height:23px;padding:.24em .78em;font-size:clamp(9px,.7vw,11px);line-height:1
}
.page-cases .cases--with-posts{padding-bottom:clamp(22px,2.4vw,34px)}
@media(max-width:620px){
  .page-cases .filters{gap:6px}
  .page-cases .filter{font-size:11px;min-height:29px;padding:.35em .8em}
  .page-cases .case-post-links{display:flex;grid-template-columns:none;margin-top:40px;gap:5px}
  .page-cases .case-post-links .filter{font-size:9px;min-height:22px;padding:.22em .65em}
}

/* Individual case: smaller More cases pill. */
.page-case .btn-more{min-height:31px;padding:.35em 1.25em;font-size:clamp(13px,1.05vw,17px)}

/* About: one common left edge for services/collaboration and no artificial 100vh intro gap. */
.page-about .intro{
  min-height:auto;
  padding-bottom:calc(var(--top-pad-t) + var(--logo-h) + clamp(32px,5.6vw,84px));
}
.page-about .intro__inner{flex:0 0 auto}
.page-about .services__head,
.page-about .services__list,
.page-about .collab__inner{margin-left:var(--intro-indent)}
@media(max-width:620px){
  .page-about .services__head,.page-about .services__list,.page-about .collab__inner{margin-left:0}
}

/* Contact/book: larger white-right animation; booking wordmark matches Contact. */
.page-contact .rings,
.page-book .rings{width:75%}
.page-book .wordmark svg{width:100%}

/* Footer rebuilt to match the supplied desktop/mobile references. */
.footer{padding:clamp(34px,3.2vw,50px) var(--page-x) clamp(28px,2.8vw,44px)}
.footer__title{font-size:clamp(46px,5.8vw,88px);line-height:1;margin:0}
.footer__title span{display:inline}
.footer__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(145px,15%) minmax(145px,15%);gap:clamp(32px,5vw,84px);margin-top:clamp(24px,2.6vw,40px);align-items:start}
.footer__mail{font-size:clamp(22px,2vw,32px);margin-bottom:.28em}
.footer__cols p{font-size:clamp(13px,1.05vw,16px);line-height:1.5}
.footer__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:clamp(26px,3vw,46px);font-size:clamp(13px,1.05vw,16px)}
.footer__social{display:flex;gap:1.1em;font-weight:700}
.footer__privacy{font-weight:400}
@media(max-width:620px){
  .footer{padding:28px var(--page-x) 34px}
  .footer__title{font-size:clamp(42px,13vw,54px);line-height:.98}
  .footer__title span{display:block}
  .footer__cols{grid-template-columns:1fr;gap:0;margin-top:34px}
  .footer__contact{margin-bottom:38px}
  .footer__person + .footer__person{margin-top:34px}
  .footer__mail{font-size:20px}
  .footer__cols p{font-size:15px;line-height:1.75}
  .footer__bottom{display:block;margin-top:36px;font-size:15px}
  .footer__social{flex-direction:column;align-items:flex-start;gap:8px}
  .footer__privacy{display:inline-block;margin-top:9px}
}

/* Left-to-right underline animation for email, phone and social/privacy links. */
.footer a[href],
.contact__title a[href],
.contact__details a[href],
.person a[href],
.social a[href]{position:relative;display:inline-block;text-decoration:none!important}
.footer a[href]::after,
.contact__title a[href]::after,
.contact__details a[href]::after,
.person a[href]::after,
.social a[href]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s ease
}
.footer a[href]:hover::after,
.footer a[href]:focus-visible::after,
.contact__title a[href]:hover::after,
.contact__title a[href]:focus-visible::after,
.contact__details a[href]:hover::after,
.contact__details a[href]:focus-visible::after,
.person a[href]:hover::after,
.person a[href]:focus-visible::after,
.social a[href]:hover::after,
.social a[href]:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* Global text reveal — subtle fade-up on first entry into the viewport. */
.text-reveal{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .78s cubic-bezier(.22,1,.36,1),transform .78s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.text-reveal.is-revealed{
  opacity:1;
  transform:translate3d(0,0,0);
}
@media(prefers-reduced-motion:reduce){
  .text-reveal{opacity:1;transform:none;transition:none;will-change:auto}
}

/* ============================================================
   FINAL REFINEMENTS — 2026-08-26 (round 2)
   ============================================================ */

/* Header menu: a touch larger than the previous compact pass. */
@media(min-width:768px){
  :root{
    --fs-nav:clamp(13px,1.05vw,18px);
  }
}

/* The main display headlines now share the homepage hero's 74px desktop ceiling.
   The footer title deliberately keeps its own larger scale. */
@media(min-width:768px){
  .page-home .about__title,
  .page-cases .cases__head,
  .page-about .intro__title,
  .page-contact .contact__title,
  .page-book .book__title{
    font-size:clamp(34px,4.95vw,74px);
  }
}

/* Cases filters: slightly larger again, without returning to the oversized pills. */
.page-cases .filters{gap:8px}
.page-cases .filter{
  min-height:34px;
  padding:.38em 1.08em;
  font-size:clamp(12px,1vw,15.5px);
}
.page-cases .case-post-links .filter{
  min-height:23px;
  padding:.24em .78em;
  font-size:clamp(9px,.7vw,11px);
}
@media(max-width:620px){
  .page-cases .filter{font-size:12px;min-height:31px;padding:.38em .9em}
  .page-cases .case-post-links .filter{font-size:9px;min-height:22px;padding:.22em .65em}
}

/* About services must grow only with their content — never with viewport height. */
.page-about .services{min-height:auto}

/* Homepage View more: a saturated orange hover, with no brightness/white wash. */
.page-home .work__more{
  filter:none!important;
  opacity:1;
  transition:background-color .2s ease,color .2s ease;
}
.page-home .work__more:hover,
.page-home .work__more:focus-visible{
  filter:none!important;
  opacity:1;
  background:#ff5200;
  color:#000;
}

/* Fullscreen hero Vimeo: fill the viewer with the real long-form Vimeo player. */
.hero-video-viewer__vimeo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  border:0;
  background:#000;
}

/* Footer: Mahmoud + Daniel form one compact group at the right edge. */
@media(min-width:621px){
  .footer__cols{
    grid-template-columns:minmax(0,1fr) max-content max-content;
    column-gap:clamp(26px,2.7vw,44px);
    row-gap:0;
  }
  .footer__person{width:max-content}
  .footer__person:last-child{justify-self:end}
  .footer__cols p{font-size:clamp(14px,1.12vw,17px)}
  .footer__bottom{font-size:clamp(14px,1.12vw,17px)}
}

/* Email and telephone underlines sit closer to the glyphs than other links.
   Animation direction/timing remains exactly the same. */
.footer a[href^="mailto:"]::after,
.footer a[href^="tel:"]::after,
.contact__title a[href^="mailto:"]::after,
.contact__details a[href^="mailto:"]::after,
.contact__details a[href^="tel:"]::after,
.person a[href^="mailto:"]::after,
.person a[href^="tel:"]::after{
  bottom:0;
}

/* ============================================================
   FINAL REFINEMENTS — 2026-08-26 (round 3)
   ============================================================ */

/* Footer: larger copy, keep social/privacy visible, and keep Mahmoud + Daniel together on the right. */
@media(min-width:621px){
  .footer__cols{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(42px,5vw,78px);
  }
  .footer__people{
    justify-self:end;
    display:grid;
    grid-template-columns:max-content max-content;
    column-gap:clamp(48px,4.4vw,74px);
    align-items:start;
  }
  .footer__person{width:max-content}
  .footer__cols p{font-size:clamp(15px,1.18vw,18px);line-height:1.55}
  .footer__mail{font-size:clamp(24px,2.05vw,33px)}
  .footer__bottom{font-size:clamp(15px,1.18vw,18px)}
  .footer__social{display:flex!important;gap:1.15em}
  .footer__privacy{display:inline-block!important}
}
@media(max-width:620px){
  .footer__people{display:block}
  .footer__person + .footer__person{margin-top:34px}
  .footer__cols p{font-size:16px;line-height:1.7}
  .footer__mail{font-size:21px}
  .footer__bottom{font-size:16px}
  .footer__social{display:flex!important;flex-direction:column;align-items:flex-start;gap:8px}
  .footer__privacy{display:inline-block!important;margin-top:9px}
}

/* Mail/phone underline sits closer to the glyphs; all other animated underlines stay unchanged. */
.footer a[href^="mailto:"]::after,
.footer a[href^="tel:"]::after,
.contact__title a[href^="mailto:"]::after,
.contact__details a[href^="mailto:"]::after,
.contact__details a[href^="tel:"]::after,
.person a[href^="mailto:"]::after,
.person a[href^="tel:"]::after{
  bottom:2px;
}

/* About sections 2/3 use the same visual edge spacing: last service -> section bottom = collab title -> section top. */
.page-about{
  --about-section-edge-space:clamp(58px,6vw,92px);
}
.page-about .services{padding-bottom:var(--about-section-edge-space)}
.page-about .collab{padding-top:var(--about-section-edge-space)}
@media(max-width:620px){
  .page-about{--about-section-edge-space:48px}
}

/* Restore the original See our work hover after the reveal class has finished. */
.page-home .about__more.text-reveal.is-revealed:hover,
.page-home .about__more.text-reveal.is-revealed:focus-visible{
  opacity:.6;
}

/* Brighter, punchier orange — no white overlay/brightness filter. */
.page-home .work__more:hover,
.page-home .work__more:focus-visible{
  background:#ff8500!important;
  color:#000;
  filter:none!important;
  opacity:1;
}

/* Hero text is hidden before the first paint and only released after window.load. */
html.reveal-boot .page-home .hero__title,
html.reveal-boot .page-home .stage__index,
html.reveal-boot .page-home .slide__brand,
html.reveal-boot .page-about .intro__eyebrow,
html.reveal-boot .page-about .intro__title,
html.reveal-boot .page-about .intro__body,
html.reveal-boot .page-cases .cases__head,
html.reveal-boot .page-case .case__meta,
html.reveal-boot .page-case .case__title,
html.reveal-boot .page-post .case__meta,
html.reveal-boot .page-post .case__title,
html.reveal-boot .page-contact .contact__title,
html.reveal-boot .page-contact .contact__details,
html.reveal-boot .page-contact .contact__people,
html.reveal-boot .page-book .book__title,
html.reveal-boot .page-book .book__text,
html.reveal-boot .page-book .steps,
html.reveal-boot .page-book .book__form{
  opacity:0;
  transform:translate3d(0,24px,0);
}
.hero-text-reveal{
  transition-duration:.68s;
}



/* ============================================================
   FINAL REFINEMENTS — 2026-08-26 (round 4)
   ============================================================ */

/* Mail + phone underline: move the animated line a little closer to the glyphs only. */
.footer a[href^="mailto:"]::after,
.footer a[href^="tel:"]::after,
.contact__title a[href^="mailto:"]::after,
.contact__details a[href^="mailto:"]::after,
.contact__details a[href^="tel:"]::after,
.person a[href^="mailto:"]::after,
.person a[href^="tel:"]::after{
  bottom:3px;
}

/* Footer: slightly larger supporting copy and a clearer gap between Mahmoud and Daniel. */
@media(min-width:621px){
  .footer__people{
    column-gap:clamp(64px,5.6vw,96px);
  }
  .footer__cols p,
  .footer__bottom{
    font-size:clamp(16px,1.28vw,19px);
  }
  .footer__mail{
    font-size:clamp(25px,2.15vw,34px);
  }
}
@media(max-width:620px){
  .footer__cols p,
  .footer__bottom{
    font-size:17px;
  }
  .footer__mail{
    font-size:22px;
  }
}

/* Utility/social links sit at the visual bottom edge. Keep them visible rather than
   translating them below the viewport as part of the global reveal animation. */
.footer__social a,
.footer__privacy,
.sheet .social a{
  opacity:1;
  transform:none;
}

/* About: use exactly the services section's existing top inset as the common edge spacing.
   This makes top of section 2, bottom of section 2 and top of section 3 visually identical. */
.page-about{
  --about-section-edge-space:calc(var(--top-pad-t) + var(--logo-h) + clamp(32px,5.6vw,84px));
}
.page-about .services{
  padding-bottom:var(--about-section-edge-space);
}
.page-about .collab{
  padding-top:var(--about-section-edge-space);
}

/* Cases category pills: one small step larger than the previous pass. */
.page-cases .filters{gap:9px}
.page-cases .filter{
  min-height:38px;
  padding:.43em 1.18em;
  font-size:clamp(13px,1.08vw,17px);
}
/* Keep the intentionally tiny Danish article pills tiny. */
.page-cases .case-post-links .filter{
  min-height:23px;
  padding:.24em .78em;
  font-size:clamp(9px,.7vw,11px);
}
@media(max-width:620px){
  .page-cases .filter{
    min-height:34px;
    padding:.4em 1em;
    font-size:13px;
  }
  .page-cases .case-post-links .filter{
    font-size:9px;
    min-height:22px;
    padding:.22em .65em;
  }
}

/* Article back button: identical size/styling to the case page's "More cases" pill. */
.page-post .btn-more{
  min-height:31px;
  padding:.35em 1.25em;
  font-size:clamp(13px,1.05vw,17px);
}

/* ============================================================
   MOBILE LANGUAGE ALIGNMENT + SCROLLED HEADER
   ============================================================ */
/* Nimbus' visible glyph box sits a touch high next to the globe on small screens.
   Keep line-height at 1 and apply a tiny optical shift only on mobile. */
@media (max-width:767px){
  .lang-pill{align-items:center}
  .lang-pill span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:1em;
    line-height:1;
    transform:translateY(1px);
  }
  .lang-pill svg{
    display:block;
    flex:0 0 auto;
  }
}


/* Cookie controls: keep focus ring clear of neighbouring pills. */
.consent__button:focus-visible{
  outline-offset:2px;
}


/* ============================================================
   ROUND 16 — responsive hero, fixed header colour and richer media/admin output
   ============================================================ */

/* Header behaviour: transparent at the top and while the user actively scrolls
   down. As soon as scrolling stops — or the user scrolls upward — the Spread-grey
   background returns. The existing JS uses .nav-hidden only during downward scroll. */
body.is-scrolled:not(.nav-hidden) .site-header{
  background:var(--grey)!important;
  color:var(--black)!important;
}
body.is-scrolled:not(.nav-hidden) .site-header .logo{color:var(--black)!important}
body.is-scrolled:not(.nav-hidden) .site-header .nav__link::after{background:var(--black)!important}
body.is-scrolled:not(.nav-hidden) .site-header .lang-pill{color:var(--black)!important;border-color:var(--black)!important}
body.is-scrolled:not(.nav-hidden) .site-header .lang-pill:hover{background:var(--black)!important;color:var(--white)!important}

/* Homepage hero: on desktop each moving-image stage occupies 90% of the viewport.
   The media covers that entire stage with no letterboxing; cropping is intentional.
   <=1024px keeps the existing mobile/tablet layout. */
@media(min-width:1025px){
  .page-home .hero{min-height:0}
  .page-home .stage{
    flex:0 0 90vh;
    height:90vh;
    min-height:90vh;
    aspect-ratio:auto;
    background:#000;
  }
  @supports(height:100dvh){
    .page-home .stage{flex-basis:90dvh;height:90dvh;min-height:90dvh}
  }
  /* Desktop hero clips always cover the complete viewport-height stage.
     Cropping at the sides/top is intentional: there must never be letterboxing. */
  .page-home .slide,
  .page-home .slide__link,
  .page-home .stage__slides{width:100%;height:100%}
  .page-home .slide video,
  .page-home .slide img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center center;
    background:#000;
  }
}
.page-home .slide__brand{text-align:right;max-width:min(72vw,28ch)}
@media(max-width:1024px){
  .page-home .stage{touch-action:pan-y}
  .page-home .stage__index button{
    min-width:44px;min-height:44px;padding:8px 7px;display:grid;place-items:center;
  }
}
@media(max-width:767px){
  .page-home .about__lead{font-size:clamp(18px,5.2vw,22px);line-height:1.12}
}
@media(min-width:768px) and (max-width:1024px){
  .page-home .about__lead{font-size:clamp(22px,2.8vw,27px)}
}
@media(hover:hover) and (pointer:fine){
  .page-home .slide__link{cursor:url('/assets/icons/play-cursor.svg') 12 12,pointer}
}

/* About hero animation starts in the middle and extends to the right. */
.page-about .intro .rings--left{left:50%;width:50%}

/* More breathing room between Contact email and phone on small screens. */
@media(max-width:767px){
  .page-contact .contact__details{margin-top:clamp(30px,8vw,42px)}
}

/* Posts: the right intro column never stretches/repositions because the Solutions
   list on the left is long. Additional text sections can be aligned left or right
   while keeping exactly the same width. */
.page-post .post__intro{align-items:start}
.page-post .post__intro .case__meta,
.page-post .post__intro .case__text{align-self:start;height:max-content}
.page-post .post-content-section--text{display:flex;width:100%;margin-bottom:var(--case-sec-gap)}
.page-post .post-content-section--text .post-rich-text{width:56.6%;max-width:56.6%}
.page-post .post-content-section--left{justify-content:flex-start}
.page-post .post-content-section--right{justify-content:flex-end}
@media(max-width:767px){
  .page-post .post-content-section--text .post-rich-text{width:100%;max-width:none}
}

/* Uploaded silent looping clips in case grids + subtle image life on pointer hover. */
.case-media-grid .case-grid-loop-video{display:block;width:100%;height:100%;object-fit:cover}
.media--image-hover img{transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform}
@media(hover:hover) and (pointer:fine){.media--image-hover:hover img{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.media--image-hover img{transition:none}.media--image-hover:hover img{transform:none}}

/* Clean custom Vimeo presentation. Vimeo's own controls stay hidden; Spread's
   chrome appears only during pointer/touch activity and fades away while idle. */
body.vimeo-open{overflow:hidden}
.spread-vimeo-modal,
.hero-video-viewer[data-vimeo-standalone]{position:fixed;inset:0;z-index:10000;background:#000;color:#fff;overflow:hidden}
.hero-video-viewer[data-vimeo-standalone]{z-index:1}
.spread-player__frame{position:absolute;inset:0;background:#000}
.spread-player__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.spread-player__loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}
.spread-player__loader[hidden]{display:none}
.spread-player__loader img{width:30px;height:30px;animation:spread-player-spin .9s linear infinite}
@keyframes spread-player-spin{to{transform:rotate(360deg)}}

/* The video itself becomes the play/pause control. */
.spread-vimeo-modal.is-playing,
.hero-video-viewer[data-vimeo-standalone].is-playing{cursor:url('/assets/icons/player-pause.svg') 12 12,pointer}
.spread-vimeo-modal.is-paused,
.hero-video-viewer[data-vimeo-standalone].is-paused{cursor:url('/assets/icons/player-play.svg') 12 12,pointer}

.spread-player__ui{
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility 0s linear .24s;
}
.is-player-ui-visible .spread-player__ui,
.spread-player__ui:focus-within{
  opacity:1;visibility:visible;transition-delay:0s;
}
.spread-player__title{
  position:absolute;top:clamp(18px,2.4vw,38px);left:clamp(18px,2.5vw,40px);z-index:5;
  max-width:min(70vw,760px);font-family:"Grotta",Helvetica,Arial,sans-serif;font-weight:500;
  font-size:clamp(18px,2.1vw,32px);line-height:1.04;color:#fff;pointer-events:none;
  text-shadow:0 1px 18px rgba(0,0,0,.32);
}
/* Vimeo players use Spread's controls, but no title overlay. */
.spread-player__title{display:none!important}
.spread-player__close{
  position:absolute;top:clamp(16px,2.2vw,34px);right:clamp(16px,2.2vw,34px);z-index:6;
  width:42px;height:42px;padding:10px;border:0;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.72);color:#fff;cursor:pointer;pointer-events:auto;
  -webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);
  transition:background-color .2s ease,transform .2s ease;
}
.spread-player__close:hover{background:rgba(255,255,255,.28);transform:scale(1.04)}
.spread-player__close img{display:block;width:100%;height:100%;object-fit:contain}
.hero-video-viewer__close{font-size:0;border:0;color:#fff}

.spread-player__hud{
  position:absolute;left:clamp(18px,2.5vw,40px);right:clamp(18px,2.5vw,40px);bottom:clamp(18px,2.5vw,38px);
  z-index:5;display:flex;align-items:center;gap:clamp(16px,2vw,30px);pointer-events:auto;
}
.spread-player__timeline{
  flex:1 1 auto;min-width:0;display:grid;grid-template-columns:auto minmax(80px,1fr) auto;
  align-items:center;gap:clamp(10px,1.35vw,20px);font-family:"Nimbus Sans Novus",Helvetica,Arial,sans-serif;
  font-size:clamp(12px,1.15vw,17px);line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.spread-player__tools{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);flex:0 0 auto}
.spread-player__control{
  width:42px;height:42px;padding:10px;border:0;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.72);color:#fff;cursor:pointer;pointer-events:auto;
  transition:background-color .2s ease,transform .2s ease;
}
.spread-player__control:hover{background:rgba(255,255,255,.28);transform:scale(1.04)}
.spread-player__control img{display:block;width:100%;height:100%;object-fit:contain}

.spread-player__range{
  --range-value:0%;width:100%;height:18px;margin:0;padding:0;appearance:none;-webkit-appearance:none;
  background:transparent;cursor:pointer;touch-action:none;
}
.spread-player__range::-webkit-slider-runnable-track{
  height:4px;background:linear-gradient(to right,#fff 0 var(--range-value),rgba(255,255,255,.34) var(--range-value) 100%);
}
.spread-player__range::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border:0;border-radius:50%;background:#fff;margin-top:-4px;
  opacity:0;transition:opacity .15s ease;
}
.spread-player__range:hover::-webkit-slider-thumb,
.spread-player__range:focus-visible::-webkit-slider-thumb{opacity:1}
.spread-player__range::-moz-range-track{height:4px;background:rgba(255,255,255,.34);border:0}
.spread-player__range::-moz-range-progress{height:4px;background:#fff}
.spread-player__range::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;opacity:0}
.spread-player__range:hover::-moz-range-thumb,
.spread-player__range:focus-visible::-moz-range-thumb{opacity:1}

.spread-player__volume{width:clamp(64px,7vw,100px);display:flex;align-items:center}
.spread-player__volume .spread-player__range::-webkit-slider-runnable-track{height:3px}
.spread-player__volume .spread-player__range::-moz-range-track,
.spread-player__volume .spread-player__range::-moz-range-progress{height:3px}

@media(max-width:767px){
  .spread-player__title{font-size:18px;max-width:68vw}
  .spread-player__close,.spread-player__control{width:38px;height:38px;padding:9px}
  .spread-player__hud{left:14px;right:14px;bottom:16px;gap:10px}
  .spread-player__timeline{grid-template-columns:auto minmax(50px,1fr) auto;gap:8px;font-size:11px}
  .spread-player__tools{gap:8px}
  .spread-player__volume{width:58px}
}
@media(max-width:520px){
  .spread-player__hud{gap:8px}
  .spread-player__timeline{grid-template-columns:minmax(46px,1fr)}
  .spread-player__time{display:none}
  .spread-player__volume{width:50px}
}
@media(prefers-reduced-motion:reduce){
  .spread-player__ui{transition:none}
  .spread-player__close,.spread-player__control{transition:none}
}


/* Standalone /video/ Vimeo viewer — same complete custom chrome as grid modals. */
.hero-video-viewer[data-vimeo-standalone] .spread-player__title,
.hero-video-viewer[data-vimeo-standalone] .spread-player__hud,
.hero-video-viewer[data-vimeo-standalone] .spread-player__close{z-index:10003}
.hero-video-viewer[data-vimeo-standalone] .spread-player__loader{z-index:10002}
.hero-video-viewer[data-vimeo-standalone] .spread-player__frame{z-index:10001}
.spread-player__hud{box-sizing:border-box}
.spread-player__timeline{width:100%}
.spread-player__range{display:block;min-width:0}
.spread-player__volume{flex:0 0 clamp(78px,8vw,118px)}
.spread-player__control img,
.spread-player__close img{filter:none;opacity:1}
@media(hover:hover) and (pointer:fine){
  .spread-player__control:hover,
  .spread-player__close:hover{background:rgba(255,255,255,.34)}
}


/* Vimeo player refinements:
   - hide the mouse cursor together with the custom chrome while idle
   - no circular backgrounds around close/fullscreen controls
   - icons grow slightly on hover instead */
@media(hover:hover) and (pointer:fine){
  .spread-vimeo-modal.is-player-idle,
  .hero-video-viewer[data-vimeo-standalone].is-player-idle{
    cursor:none!important;
  }
}

.spread-player__close,
.spread-player__control{
  width:38px;
  height:38px;
  padding:5px;
  border-radius:0;
  background:transparent!important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:transform .18s ease,opacity .18s ease;
}

.spread-player__close:hover,
.spread-player__control:hover{
  background:transparent!important;
  transform:scale(1.14);
}

.spread-player__close img,
.spread-player__control img{
  width:100%;
  height:100%;
  opacity:1;
  filter:none;
}

@media(max-width:767px){
  .spread-player__close,
  .spread-player__control{
    width:34px;
    height:34px;
    padding:4px;
  }
}


/* Post intro columns are independent.
   Leading right-aligned text sections live inside .case__text, so a long
   "Løsninger" list on the left cannot push the right-hand text downward. */
.page-post .post__intro .case__text{
  min-width:0;
}
.page-post .post__intro .post-content-section--intro{
  display:block;
  width:100%;
  max-width:none;
  margin-bottom:0;
}
.page-post .post__intro .post-content-section--intro .post-rich-text{
  width:100%;
  max-width:none;
}
.page-post .post__intro .case__title + .post-content-section--intro{
  margin-top:clamp(24px,4.37vw,62px);
}
.page-post .post__intro .case__copy + .post-content-section--intro,
.page-post .post__intro .post-content-section--intro + .post-content-section--intro{
  margin-top:var(--case-sec-gap);
}


/* Cross-platform language letters: EN/DA is rendered as SVG paths in header.php. */
.lang-pill{
  align-items:center;
}
.lang-pill svg.lang-pill__letters{
  display:block;
  width:auto;
  height:.67em;
  flex:0 0 auto;
  overflow:visible;
  transform:none!important;
}


/* ============================================================
   Unified display-heading scale
   The homepage hero headline is the reference size at every viewport.
   ============================================================ */
.page-home .hero__title,
.page-home .slide__brand,
.page-home .about__title,
.page-cases .cases__head,
.page-about .intro__title,
.page-contact .contact__title,
.page-book .book__title,
.footer__title{
  font-size:clamp(34px,4.95vw,74px);
  line-height:1.03;
}

@media(max-width:767px){
  .page-home .hero__title,
  .page-home .slide__brand,
  .page-home .about__title,
  .page-cases .cases__head,
  .page-about .intro__title,
  .page-contact .contact__title,
  .page-book .book__title,
  .footer__title{
    font-size:clamp(25px,7vw,32px);
    line-height:1.03;
  }

  /* Contact, Book and About hero background animation:
     fill the complete section height on small screens.
     Cover is intentional, so the square animation may crop horizontally
     rather than leaving empty space above/below. */
  .page-contact .sheet > .rings,
  .page-book .sheet > .rings{
    left:0!important;
    top:0;
    bottom:auto;
    width:100%!important;
    height:100%!important;
    min-height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center center;
  }

  .page-about .intro > .rings{
    left:50%!important;
    right:0;
    top:0;
    bottom:auto;
    width:50%!important;
    height:100%!important;
    min-height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center center;
  }
}


/* ============================================================
   Inline Vimeo player in the hero of an individual case
   ------------------------------------------------------------
   Clicking the hero video now keeps the visitor on the case page.
   Vimeo's native controls are disabled by the iframe URL; the same
   Spread timeline, volume and fullscreen chrome is rendered inside
   the existing 16:9 hero area instead.
   ============================================================ */
.case-hero .vimeo-shell.is-inline-player{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  background:#000;
  color:#fff;
  overflow:hidden;
}
.case-hero .vimeo-shell.is-inline-player .spread-player__frame,
.case-hero .vimeo-shell.is-inline-player .spread-player__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.case-hero .vimeo-shell.is-inline-player .spread-player__loader{
  z-index:3;
}
.case-hero .vimeo-shell.is-inline-player .spread-player__title,
.case-hero .vimeo-shell.is-inline-player .spread-player__hud{
  z-index:5;
}
.case-hero .vimeo-shell.is-inline-player .spread-player__title{
  top:clamp(14px,1.7vw,28px);
  left:clamp(14px,1.8vw,30px);
  font-size:clamp(15px,1.55vw,24px);
}
.case-hero .vimeo-shell.is-inline-player .spread-player__hud{
  left:clamp(14px,1.8vw,30px);
  right:clamp(14px,1.8vw,30px);
  bottom:clamp(12px,1.6vw,26px);
}
.case-hero .vimeo-shell.is-inline-player .spread-player__control{
  width:34px;
  height:34px;
  padding:4px;
}
@media(max-width:767px){
  .case-hero .vimeo-shell.is-inline-player .spread-player__title{
    top:12px;
    left:12px;
    max-width:72%;
    font-size:14px;
  }
  .case-hero .vimeo-shell.is-inline-player .spread-player__hud{
    left:10px;
    right:10px;
    bottom:10px;
    gap:7px;
  }
  .case-hero .vimeo-shell.is-inline-player .spread-player__timeline{
    gap:6px;
    font-size:10px;
  }
  .case-hero .vimeo-shell.is-inline-player .spread-player__volume{
    width:48px;
    flex-basis:48px;
  }
  .case-hero .vimeo-shell.is-inline-player .spread-player__control{
    width:30px;
    height:30px;
    padding:3px;
  }
}

/* Reliable custom play/pause pointer.
   A DOM icon follows the pointer instead of relying on OS-level SVG cursors,
   which are inconsistent across Safari/macOS and some browser combinations. */
@media(hover:hover) and (pointer:fine){
  .spread-vimeo-modal.has-player-pointer,
  .hero-video-viewer[data-vimeo-standalone].has-player-pointer,
  .case-hero .vimeo-shell.is-inline-player.has-player-pointer{
    cursor:none!important;
  }

  .has-player-pointer .spread-player__ui,
  .has-player-pointer .spread-player__ui *,
  .has-player-pointer button,
  .has-player-pointer input,
  .has-player-pointer label{
    cursor:pointer;
  }

  .spread-player__pointer{
    position:absolute;
    left:0;
    top:0;
    z-index:10006;
    width:30px;
    height:30px;
    pointer-events:none;
    opacity:0;
    transform:translate3d(var(--spread-pointer-x,0px),var(--spread-pointer-y,0px),0) translate(-50%,-50%);
    transition:opacity .08s linear;
    will-change:transform;
  }
  .spread-player__pointer img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .has-player-pointer.is-player-pointer-visible:not(.is-player-idle) .spread-player__pointer{
    opacity:1;
  }
}


/* Case hero Vimeo: the iframe is strictly the video surface.
   Pointer interaction stays on our own player layer, preventing Vimeo's
   hover toolbar from being activated inside the cross-origin iframe. */
.case-hero .vimeo-shell.is-inline-player .spread-player__frame iframe{
  pointer-events:none!important;
}