/* Motion direction: one uninterrupted project reel, full-colour imagery,
   oversized type, and movement tied to the visitor rather than stacked cards. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.site-header{position:fixed;color:#fff;mix-blend-mode:normal;height:100px;padding-top:18px;padding-bottom:18px;gap:35px;pointer-events:none}.site-header>*{pointer-events:auto}.brand{width:66px;height:66px;display:block;letter-spacing:0;line-height:1}.brand img{width:100%;height:100%;object-fit:contain}.desktop-nav{gap:28px}.desktop-nav a,.header-contact,.menu-toggle{font-size:22px}.menu-top .brand{width:64px;height:64px}.header-contact{font-weight:600}.hero{height:100svh;min-height:720px;background:#babdb5;max-height:none;color:#fff;isolation:isolate}.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0003 0%,transparent 45%,#0001 60%,#0009 100%);z-index:2}.hero-wordmark{z-index:4;top:14%;left:var(--gutter);right:var(--gutter);transform:none;display:flex;justify-content:space-between;font-size:31vw;line-height:.79;color:#fff;mix-blend-mode:normal;font-weight:750;letter-spacing:-.045em;pointer-events:none;overflow:visible;animation:none}.hero-wordmark>.hero-letter{font-family:var(--display);font-size:inherit;position:static;letter-spacing:inherit;display:block;translate:0 0;opacity:1}.hero-stage{inset:0;z-index:1;translate:none!important;overflow:hidden}.hero-frame,.frame-1,.frame-2,.frame-3{top:0;left:0;inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;box-shadow:none;z-index:0;opacity:0;visibility:hidden;pointer-events:none;animation:none;transition:opacity 1.1s ease,visibility 1.1s,clip-path 1.4s var(--motion-ease);clip-path:inset(0 0 0 0)}.hero-frame.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:center;filter:none;scale:1.08;transform:translate3d(var(--media-x,0px),var(--media-y,0px),0);transition:scale 7s linear,transform 1.6s var(--motion-ease);will-change:transform}.hero-frame.is-active img{scale:1.01}.hero-frame:hover img{filter:none;transform:translate3d(var(--media-x,0px),var(--media-y,0px),0);scale:1.04}.hero-frame-caption{display:none}.hero-bottom{z-index:5;bottom:45px;display:flex;justify-content:space-between;gap:80px;align-items:end;pointer-events:none}.hero-bottom>p{font-size:clamp(25px,2.35vw,44px);line-height:1.04;text-align:left;max-width:760px;width:62%;font-weight:550;letter-spacing:-.015em;text-wrap:balance}.reel-controls{width:235px;pointer-events:auto;flex-shrink:0}.reel-buttons{display:flex;align-items:center;justify-content:space-between;gap:18px}.reel-buttons button{color:white;font-size:28px;padding:8px;min-width:40px;min-height:44px;border:1px solid transparent;border-radius:50%;transition:background .25s,border-color .25s}.reel-buttons button:hover{border-color:white;background:#ffffff18}.reel-count{font-family:var(--display);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}.reel-buttons .reel-pause{font-size:19px;margin-left:8px}.reel-project-name{display:block;font-size:16px;margin-top:12px}.reel-progress{height:2px;background:#ffffff40;margin-top:18px;overflow:hidden}.reel-progress>span{height:100%;width:100%;display:block;background:white;transform-origin:left;animation:reel-timer 6.5s linear infinite}.hero.is-paused .reel-progress>span{animation-play-state:paused}.hero.is-paused .hero-frame img{transition-duration:.85s}.project-cursor{position:fixed;top:0;left:0;width:104px;height:104px;border-radius:50%;background:var(--accent);color:#171915;z-index:80;pointer-events:none;display:grid;place-items:center;opacity:0;scale:.3;translate:-50% -50%;transform:translate3d(-200px,-200px,0);transition:opacity .25s,scale .35s var(--motion-ease);font-size:14px;text-align:center;line-height:1.25}.project-cursor.is-visible{opacity:1;scale:1}.project-image img{filter:none;transition:transform 1.2s var(--motion-ease)}.project-image:hover img,.project-image:focus-visible img{filter:none;transform:scale(1.055)}.image-arrow{display:none}.section-kicker{font-size:16px}.text-link{font-size:20px}.project-meta h3{font-size:29px}.project-meta>span{font-size:17px}.project-category{font-size:21px}.project-description{font-size:27px}.intro{padding-top:65px;padding-bottom:110px}.intro>.display{font-size:clamp(90px,13vw,235px);margin:65px 0 75px;max-width:1500px}.intro-bottom p{font-size:25px}.intro-bottom .asterisk{animation:asterisk-turn 25s linear infinite}.intro .word{display:inline-block;opacity:.18;transition:opacity .35s,color .35s;transform-origin:bottom}.intro .word.is-lit{opacity:1}.featured-grid{gap:40px}.featured-grid .project-card:nth-child(2){margin-top:210px}.featured-grid .project-image{aspect-ratio:.98}.project-card{--card-lift:0px;translate:0 var(--card-lift)}.project-image{cursor:pointer}.work-strip{cursor:grab;scroll-snap-type:x proximity}.work-strip.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}.work-strip.is-dragging a{pointer-events:none}.strip-bottom{font-size:17px}.work-strip-section>.section-kicker{font-size:16px}.service-list summary{font-size:35px}.service-list details p{font-size:21px}.service-list summary>span{font-size:15px}.service-list ul{font-size:18px}.service-list details p.small{font-size:15px}.service-price{font-size:18px}.service-price strong{font-size:29px}.service-list details{padding:28px 0}.service-list details[open] p,.service-list details[open] ul{animation:service-in .45s var(--motion-ease)}.footer-top>p{font-size:23px}.footer-links{font-size:14px}.footer-wordmark{transition:color .5s}.footer-wordmark:hover{color:var(--accent)}.menu-dialog[open]{animation:menu-in .6s var(--motion-ease)}.menu-dialog nav a{transition:padding-left .4s var(--motion-ease),color .3s}.menu-dialog nav a:hover{padding-left:25px;color:#763f2d}.menu-dialog nav a sup{font-size:16px;margin-left:24px}.menu-email{font-size:21px}.portfolio-tools{font-size:16px}.filters button{font-size:16px}.approach-grid article>span{font-size:16px}.contact-copy .small{font-size:16px}form label{font-size:15px}.form-privacy{font-size:14px}.project-facts dt{font-size:15px}.project-facts dd{font-size:18px}.project-header-meta{font-size:18px}.project-bottom .text-link{font-size:22px}.project-overview>div>.text-link{margin-top:30px}.project-gallery figure{overflow:hidden}.project-gallery img{transition:scale 1s var(--motion-ease),filter .7s}.project-gallery figure:hover img{scale:1.015}.reveal.is-visible{animation:none}.motion-reveal{clip-path:inset(14% 0 14% 0);opacity:.35;transform:translateY(55px);transition:clip-path 1.1s var(--motion-ease),opacity .9s,transform 1.1s var(--motion-ease)}.motion-reveal.in-view{clip-path:inset(0);opacity:1;transform:none}
@keyframes reel-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes asterisk-turn{to{rotate:360deg}}@keyframes menu-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}@keyframes service-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){.hero-frame,.project-image{cursor:none}.hero-frame:focus-visible,.project-image:focus-visible{cursor:auto}}
@media(max-width:900px){.hero{min-height:700px}.hero-wordmark{top:25%;font-size:31vw}.hero-bottom{gap:40px;bottom:35px}.hero-bottom>p{font-size:27px;width:auto}.reel-controls{width:185px}.reel-buttons{gap:6px}.intro-bottom p{font-size:21px}.project-description{font-size:23px}.project-meta h3{font-size:25px}.service-list summary{font-size:30px}.service-list details p{font-size:19px}.project-cursor{display:none}}
@media(max-width:600px){.site-header{height:83px;align-items:center;padding-top:12px;padding-bottom:12px}.brand{width:57px;height:57px;margin-left:-9px}.menu-toggle{font-size:20px;gap:18px}.menu-toggle span{font-size:28px}.hero{height:100svh;min-height:720px}.hero-wordmark{top:23%;font-size:30.5vw;left:var(--gutter);right:var(--gutter)}.hero-bottom{bottom:26px;display:block}.hero-bottom>p{width:100%;font-size:25px;line-height:1.05;text-align:left;max-width:none;letter-spacing:-.01em}.reel-controls{width:100%;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:center}.reel-buttons{grid-column:2;grid-row:1;gap:5px}.reel-project-name{grid-column:1;grid-row:1;font-size:15px;margin-top:0;max-width:160px}.reel-count{font-size:19px}.reel-buttons button{font-size:24px;min-width:32px;padding:5px}.reel-buttons .reel-pause{font-size:16px;margin-left:0}.reel-progress{grid-column:1/-1;margin-top:12px}.hero-frame img{object-position:50% 50%}.section-kicker{font-size:13px}.section-kicker .text-link{font-size:16px}.intro{padding-top:40px;padding-bottom:60px}.intro>.display{font-size:20.5vw;margin:45px 0}.intro-bottom p{font-size:20px}.intro-bottom .text-link{font-size:17px}.intro-bottom{grid-template-columns:35px 1fr;gap:22px}.asterisk{font-size:40px}.featured-grid{gap:45px}.featured-grid .project-card:nth-child(2){margin-top:0}.featured-grid .project-image{aspect-ratio:1.05}.project-meta h3{font-size:26px}.project-meta>span{font-size:16px}.project-category{font-size:20px}.project-description{font-size:24px}.strip-bottom .text-link{font-size:17px}.service-list summary{font-size:31px}.service-list summary>span{font-size:13px}.service-list details p{font-size:19px}.service-list ul{font-size:17px}.service-list details p.small{font-size:14px}.text-link{font-size:18px}.services>.section-kicker>span:last-child{max-width:125px;text-align:right}.testimonial-card>p{font-size:29px}.testimonial-author strong,.testimonial-author span{font-size:14px}.testimonial-card{min-height:390px}.footer-top>p{font-size:18px}.footer-links{font-size:13px;line-height:1.4;gap:20px 14px}.menu-dialog nav a{font-size:18vw}.menu-dialog nav a sup{font-size:14px;margin-top:15px;margin-left:18px}.menu-email{font-size:19px}.portfolio-tools>span{font-size:14px}.filters button{font-size:14px}.approach-grid article>span{font-size:14px}.contact-copy p{font-size:19px}.form-privacy{font-size:13px}form label{font-size:14px}.project-header-meta{font-size:16px}.project-facts dt{font-size:13px}.project-facts dd{font-size:16px}.project-bottom .text-link{font-size:17px}.about-description p{font-size:21px}.motion-reveal{transform:translateY(25px)}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .hero-wordmark,html:not(.motion-enabled) .hero-letter,html:not(.motion-enabled) .hero-frame,html:not(.motion-enabled) .hero-frame img,html:not(.motion-enabled) .intro .word,html:not(.motion-enabled) .motion-reveal{animation:none!important;transition:none!important;transform:none!important}html:not(.motion-enabled) .hero-frame img{scale:1!important}html:not(.motion-enabled) .motion-reveal{opacity:1;clip-path:none}html:not(.motion-enabled) .intro .word{opacity:1}html:not(.motion-enabled) .project-cursor{display:none}html:not(.motion-enabled) .reel-progress>span{animation:none;transform:none}html:not(.motion-enabled) .hero .hero-wordmark{left:var(--gutter);right:var(--gutter)}}
.hero-wordmark{overflow:hidden;padding-bottom:.08em}.site-header .brand{flex-shrink:0}.hero-frame:focus-visible{outline:3px solid var(--accent);outline-offset:-8px}.hero-bottom .reel-controls button:focus-visible{outline-color:var(--accent)}
.reel-count{white-space:nowrap;flex-shrink:0}.reel-controls{width:265px}.reel-buttons{gap:12px}.hero-bottom>p{max-width:590px;font-size:clamp(30px,3vw,54px)}
.hero-frame.is-entering{animation:reel-enter 1.4s var(--motion-ease) both}
@keyframes reel-enter{from{clip-path:inset(100% 0 0 0);transform:translateY(5%)}to{clip-path:inset(0);transform:translateY(0)}}
@media(max-width:900px){.reel-controls{width:230px}.hero-bottom>p{font-size:32px}}
@media(max-width:600px){.reel-controls{width:100%}.reel-buttons{gap:3px}.hero-bottom>p{font-size:31px;max-width:330px}.reel-count{font-size:18px}.reel-buttons button{min-width:29px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .hero-frame.is-entering{animation:none}}
.site-header{transition:transform .45s var(--motion-ease)}.site-header.is-hidden{transform:translateY(-110%)}.site-header:focus-within{transform:none}.project-cursor{box-shadow:0 2px 14px #0001}

/* Colour imagery throughout; the navigation overlay retains its own treatment. */
.home .site-header{color:#fff;text-shadow:0 1px 10px #0007}
.inner-page .site-header,.home .site-header.on-paper{color:var(--ink);text-shadow:none}
.hero-wordmark{color:#fff;text-shadow:0 2px 35px #0002}
/* Mobile art direction: a framed project between the wordmark and the caption,
   so landscape work stays legible instead of becoming an extreme portrait crop. */
@media(max-width:600px){
 .hero{height:100svh;min-height:680px;background:var(--mist);color:var(--ink)}
 .hero:after{display:none}
 .home .site-header{color:var(--ink);text-shadow:none}
 .hero-wordmark{top:104px;left:18px;right:18px;font-size:31.5vw;color:var(--ink);text-shadow:none;line-height:.83}
 .hero-stage{inset:clamp(205px,27svh,240px) 16px 205px;touch-action:pan-y;clip-path:none!important}
 .hero-frame img{object-position:center;scale:1.035}
 .hero-frame.is-active img{scale:1}
 .hero-frame:hover img{scale:1.015}
 .hero-bottom{left:20px;right:20px;bottom:max(20px,env(safe-area-inset-bottom));display:block}
 .hero-bottom>p{color:var(--ink);font-size:clamp(24px,6.8vw,30px);line-height:1.03;max-width:350px;text-wrap:balance;margin:0}
 .reel-controls{margin-top:18px;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
 .reel-project-name{font-size:14px;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .reel-buttons{gap:8px}
 .reel-buttons button{color:var(--ink);width:44px;height:44px;min-width:44px;font-size:25px;padding:4px}
 .reel-buttons button:hover{border-color:var(--ink);background:#17191508}
 .reel-count{font-size:18px}
 .reel-progress{margin-top:8px;background:#17191525}
 .reel-progress>span{background:var(--ink)}
}
@media(max-width:360px){.hero-wordmark{top:104px}.hero-stage{inset:205px 14px 195px}.hero-bottom{left:18px;right:18px}.hero-bottom>p{font-size:24px}.reel-buttons{gap:2px}.reel-project-name{font-size:13px}}
/* Keep each action with its content and distinguish the enquiry action. */
.intro-bottom{grid-template-columns:1fr 2fr;column-gap:50px;row-gap:24px;align-items:start}
.intro-bottom .asterisk{grid-column:1;grid-row:1/3}
.intro-bottom p{grid-column:2;grid-row:1;max-width:630px}
.intro-bottom .text-link{grid-column:2;grid-row:2;justify-self:start;min-height:44px;gap:28px;align-items:center;padding:5px 0}
.header-contact{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:46px;padding:10px 19px;border:1px solid transparent;border-radius:3px;background:var(--accent);color:var(--ink);font-size:20px;text-shadow:none;transition:background .25s,transform .25s}
.header-contact span{margin-left:0}.header-contact:hover{background:#e4ae99;transform:translateY(-2px)}
.featured>.section-kicker{justify-content:flex-start;gap:30px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:32px}
.work-section-title{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.work-section-title>span{font:13px Arial;vertical-align:super;margin-left:10px;color:#72776a}
.featured>.section-kicker .text-link{font-size:18px;min-height:44px;align-items:center;gap:20px;padding:5px 0;margin-left:8px}
@media(max-width:900px){.intro-bottom{grid-template-columns:.6fr 1.5fr}.header-contact{font-size:18px;gap:18px;padding:10px 15px}}
@media(max-width:600px){
 .header-contact{display:none}
 .intro-bottom{grid-template-columns:35px 1fr;column-gap:22px;row-gap:18px}
 .intro-bottom p{font-size:20px}
 .intro-bottom .text-link{font-size:18px}
 .featured>.section-kicker{justify-content:space-between;gap:14px;padding-bottom:15px;margin-bottom:24px}
 .work-section-title{font-size:27px}.work-section-title>span{font-size:11px;margin-left:6px}
 .featured>.section-kicker .text-link{font-size:16px;gap:12px;margin-left:0}
}

/* A warmer closing invitation, distinct from the editorial display headings. */
.footer-cta{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(78px,10.3vw,178px);line-height:.96;letter-spacing:-.065em}
.footer-cta>span{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:.57em;top:.08em}
@media(max-width:600px){.footer-cta{font-size:23vw;line-height:.98;letter-spacing:-.065em}.footer-cta>span{right:5px}}
@media(max-width:600px){
 .hero{background-color:var(--hero-bg,var(--mist));color:var(--hero-ink,var(--ink));transition:background-color 1.1s ease,color .7s ease}
 .hero-wordmark,.hero-bottom>p,.reel-buttons button{color:var(--hero-ink,var(--ink));transition:color .7s ease}
 .reel-progress{background:var(--hero-line,#17191530)}
 .reel-progress>span{background:var(--hero-ink,var(--ink));transition:background-color .7s ease}
 .home.hero-light-ink .site-header:not(.on-paper){color:var(--paper)}
}
/* Contain oversized glyph hit areas so the home wordmark cannot cover links. */
.site-footer{isolation:isolate}
.footer-links{position:relative;z-index:2;align-items:center}
.footer-links a{position:relative;display:inline-flex;align-items:center;min-height:44px}
.footer-wordmark{z-index:0;overflow:hidden}
/* Distribute the footer letters across its full content width. */
.footer-wordmark{display:flex;justify-content:space-between;width:100%;letter-spacing:0;font-size:30vw;line-height:.85}
.footer-wordmark .footer-letter{display:block}
@media(max-width:600px){.footer-wordmark{font-size:31vw}}
.footer-wordmark>.footer-letter{position:static;font-family:var(--display);font-size:inherit;font-weight:inherit;letter-spacing:0;line-height:inherit}

/* Burgundy and warm ivory. */
:root{--accent:#641e32;--accent-light:#e8c9cb}
.menu-dialog,.testimonials{background:var(--accent);color:#faf5ed}
.menu-dialog nav a{border-color:#faf5ed40}
.menu-dialog nav a:hover{color:#e8c9cb}
.menu-dialog .brand img{content:url('assets/alyve-logo-white.png')}
.header-contact{background:var(--accent);color:#faf5ed}
.header-contact:hover{background:#7c2b43}
.project-cursor{background:var(--accent);color:#faf5ed}
.quote-controls button{border-color:#faf5ed;color:#faf5ed}
.quote-controls button:hover{background:#faf5ed;color:var(--accent)}
.testimonials .testimonial-author span{color:#e8c9cb}
.footer-links a:hover,.footer-wordmark:hover{color:#e8c9cb}
::selection{background:var(--accent);color:#faf5ed}
.skip-link{color:#faf5ed}
.accent{color:var(--accent)}
.site-footer{background:var(--accent);color:#faf5ed}
.footer-links{border-top-color:#faf5ed40}
.footer-links a:hover,.footer-wordmark:hover{color:#e8c9cb}
/* Reference-led hero hierarchy: understated navigation, centered studio copy. */
.header-contact{background:transparent;color:inherit;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:2px 0;min-height:44px;gap:28px;font-size:20px;text-shadow:inherit}
.header-contact:hover{background:transparent;transform:none}
.hero-bottom{display:block;bottom:34px}
.hero-bottom>p{width:82%;max-width:1000px;margin:0 auto;text-align:center;font-size:clamp(20px,1.85vw,30px);font-weight:500;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.reel-controls{position:absolute;right:0;bottom:94px;width:165px;opacity:.75}
.reel-buttons{justify-content:space-between;gap:5px}
.reel-buttons button{font-size:21px;min-width:36px;min-height:44px;padding:4px;border:0}
.reel-buttons button:hover{background:transparent;border:0}
.reel-count{font-size:14px}
.reel-project-name{font-size:12px;margin-top:2px;text-align:center}
.reel-progress{height:1px;margin-top:10px;opacity:.55}
@media(max-width:900px){.hero-bottom>p{width:90%;font-size:24px}.reel-controls{width:155px;bottom:100px}}
@media(max-width:600px){
 .header-contact{display:none}
 .hero-bottom{display:block;bottom:max(20px,env(safe-area-inset-bottom))}
 .hero-bottom>p{width:100%;max-width:350px;margin:0 auto;text-align:center;font-size:clamp(22px,6.1vw,27px);line-height:1.08}
 .reel-controls{position:static;width:100%;margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;opacity:.65}
 .reel-project-name{font-size:12px;text-align:left;margin-top:0}
 .reel-buttons{gap:4px}
 .reel-buttons button{font-size:20px;min-width:40px;width:40px;min-height:44px;height:44px}
 .reel-count{font-size:14px}
 .reel-progress{margin-top:4px}
}
/* Native scroll and pointer behavior stays available under the enhancements. */
.work-strip{scroll-snap-type:none;-webkit-overflow-scrolling:touch;overflow-anchor:none}
@media(hover:hover) and (pointer:fine){
 .hero-frame,.project-image{cursor:pointer}
 .work-strip,.work-strip a,.work-strip img{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
 .work-strip.is-dragging,.work-strip.is-dragging *{cursor:grabbing}
}
.work-strip.is-dragging a{pointer-events:auto}
.project-cursor{width:76px;height:76px;translate:0 0;font-size:12px}
.hero-frame img{transition:scale 7s linear,transform .35s ease-out}
.strip-controls button:hover{color:#faf5ed}
/* Header contrast follows the section beneath it; only scrolled CTAs are boxed. */
.home .site-header.on-dark,.inner-page .site-header.on-dark{color:#faf5ed;text-shadow:none}
.site-header.is-scrolled + .header-contact{background:var(--accent);color:#faf5ed;border:1px solid var(--accent);border-radius:2px;padding:9px 18px;min-height:46px;text-shadow:none}
.site-header.is-scrolled.on-dark + .header-contact{background:#faf5ed;color:var(--accent);border-color:#faf5ed}
.site-header.is-scrolled + .header-contact:hover{background:#7c2b43;border-color:#7c2b43;color:#faf5ed}
.site-header.is-scrolled.on-dark + .header-contact:hover{background:#e8c9cb;border-color:#e8c9cb;color:var(--accent)}
.header-contact{transition:background-color .25s,color .25s,border-color .25s,padding .25s}
@media(max-width:600px){.site-header.is-scrolled + .header-contact{display:none}}

/* Per-pixel backdrop inversion belongs to the navigation layer only.
   The sibling CTA has its own compositing layer so its filled state stays true. */
.site-header{mix-blend-mode:difference;color:#fff!important;text-shadow:none!important}
.site-header .brand img{content:url('assets/alyve-logo-white.png')}
.site-header + .header-contact{position:fixed;z-index:21;top:25px;right:var(--gutter);margin:0;color:#fff;mix-blend-mode:difference;transition:transform .45s var(--motion-ease),background-color .25s,color .25s,padding .25s}
.site-header.is-scrolled + .header-contact{mix-blend-mode:normal}
.site-header.is-hidden + .header-contact{transform:translateY(-125px)}
.site-header:focus-within + .header-contact,.site-header + .header-contact:focus-visible{transform:none}
@media(max-width:600px){.site-header + .header-contact{display:none}}
/* Case-study galleries retain each image's proportions in a masonry layout. */
.project-gallery{display:block;columns:2;column-gap:24px}
.project-gallery figure{display:block;break-inside:avoid;page-break-inside:avoid;margin:0 0 24px;border:8px solid #fff;background:#fff;overflow:hidden}
.project-gallery img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:600px){.project-gallery{columns:1}.project-gallery figure{border-width:6px;margin-bottom:18px}}
.project-gallery figure{border-color:var(--paper);background:var(--paper)}
/* Mobile hero starts with a solid black masthead; blending resumes on scroll. */
@media(max-width:900px){
 .home .site-header:not(.is-scrolled){mix-blend-mode:normal;color:#171915!important;text-shadow:none!important}
 .home .site-header:not(.is-scrolled) .brand img{content:url('assets/alyve-logo-black.png')}
 .home .site-header:not(.is-scrolled) .menu-toggle{color:#171915}
}
.filters button sup{display:inline-block;font-size:.56em;line-height:1;vertical-align:super;margin-left:.25em;position:relative;top:-.05em;opacity:.7;font-variant-numeric:tabular-nums}
/* Explicit text presentation keeps Safari from substituting colour emoji. */
button,.text-link,.header-contact,.footer-cta,.asterisk,.reel-project-name,.section-kicker{font-variant-emoji:text}.asterisk-icon{display:block;width:1em;height:1em;overflow:visible}
.project-title{overflow-wrap:normal;word-break:normal;hyphens:none}.project-title-word{display:inline-block;white-space:nowrap;word-break:normal;overflow-wrap:normal}
/* Use unified transforms for consistent WebKit compositing. */
.hero-frame img,.hero-frame:hover img,.hero-frame.is-active img{scale:none;transform:translate3d(var(--media-x,0px),var(--media-y,0px),0) scale(1.035);transition:transform 1s ease;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hero-frame.is-active img{animation:hero-image-drift 6.5s linear both}
@keyframes hero-image-drift{from{transform:translate3d(var(--media-x,0px),var(--media-y,0px),0) scale(1.075)}to{transform:translate3d(var(--media-x,0px),var(--media-y,0px),0) scale(1)}}
@keyframes asterisk-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes reel-enter{from{-webkit-clip-path:inset(100% 0 0 0);clip-path:inset(100% 0 0 0);transform:translate3d(0,4%,0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);transform:translate3d(0,0,0)}}
.hero-arriving .hero-letter{opacity:0;transform:translate3d(0,115%,0) rotate(4deg);transition:transform 1.15s var(--motion-ease),opacity .8s ease;transition-delay:var(--letter-delay,0ms);will-change:transform,opacity}
.hero-arriving.hero-arrived .hero-letter{opacity:1;transform:translate3d(0,0,0) rotate(0deg)}
.motion-reveal{backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:opacity .8s ease,transform 1s var(--motion-ease);clip-path:none}
.project-gallery figure:hover img{scale:none;transform:scale(1.015);transition:transform 1s var(--motion-ease)}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .hero-frame.is-active img,html:not(.motion-enabled) .asterisk{animation:none!important}html:not(.motion-enabled) .hero-arriving .hero-letter{opacity:1;transform:none;transition:none}html:not(.motion-enabled) .hero-frame img,html:not(.motion-enabled) .hero-frame:hover img{transform:none!important}}
.intro>.display{font-size:clamp(55px,11vw,190px);line-height:1;letter-spacing:-.045em;max-width:none}.statement-line{display:block;white-space:nowrap;width:max-content;max-width:none}.intro .statement-line .word{white-space:nowrap}@media(max-width:600px){.intro>.display{font-size:10.5vw;line-height:1.08;margin:38px 0 42px}}
/* Keep the accessible page title without overlaying the project imagery. */
.hero .hero-wordmark{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;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(max-width:600px){.hero-stage{top:108px;bottom:205px}}
.expertise-intro{font-size:20px;line-height:1.5;max-width:560px;color:#676a65;margin:0 0 32px}.footer-top>p{max-width:320px;line-height:1.4}
@media(max-width:600px){
 .hero{height:100svh;min-height:100svh;background:#313330;color:#fff}
 .hero-stage{inset:0!important;width:100%;height:100%;clip-path:none!important;-webkit-clip-path:none!important}
 .hero-frame{border-radius:0}
 .hero:after{display:block;background:linear-gradient(180deg,rgba(250,251,247,.72) 0%,rgba(250,251,247,.08) 19%,transparent 38%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.78) 100%)}
 .hero-bottom{left:22px;right:22px;bottom:max(28px,env(safe-area-inset-bottom));z-index:5}
 .hero-bottom>p{color:#fff;font-size:clamp(30px,8vw,40px);line-height:1.05;text-align:left;max-width:300px;text-shadow:0 1px 15px #0002}
 .hero .reel-controls{color:#fff;margin-top:24px}
 .hero .reel-buttons button,.hero .reel-count,.hero .reel-project-name{color:#fff}
 .hero .reel-buttons button:hover{border-color:#ffffff60;background:#ffffff15}
 .hero .reel-progress{background:#ffffff40}.hero .reel-progress>span{background:#fff}
 .expertise-intro{font-size:18px;margin-bottom:24px}
}
/* Manrope has wider proportions than the previous condensed display face. */
.work-section-title{font-family:var(--body);font-weight:600;letter-spacing:-.045em;font-size:clamp(23px,2.5vw,36px);line-height:1.2}.desktop-nav a,.header-contact,.menu-toggle{font-size:17px;letter-spacing:-.025em}.display{font-weight:650;letter-spacing:-.055em}.page-heading>.display{font-size:clamp(64px,8vw,150px)}.services .display{font-size:clamp(48px,6vw,105px);line-height:1.05}.hero-bottom>p{font-weight:500}.project-meta h3{font-family:var(--body);font-size:24px;letter-spacing:-.045em}.footer-wordmark{font-family:var(--display);font-weight:650}.service-list summary{font-size:30px;letter-spacing:-.04em}.intro-bottom p{line-height:1.5}.filters button{font-size:14px}
@media(max-width:600px){.work-section-title{font-size:24px;line-height:1.25;max-width:280px}.menu-toggle{font-size:15px}.page-heading>.display{font-size:15vw}.project-detail .page-heading .display{font-size:16vw}.services .display{font-size:13vw}.project-meta h3{font-size:22px}.service-list summary{font-size:25px}.hero-bottom>p{font-size:30px}.menu-dialog nav a{font-size:14vw}}

/* Regular editorial accents paired with Manrope. */
.serif,.footer-cta,.project-category,.quote-text{font-family:"Instrument Serif",Georgia,serif;font-style:normal;font-weight:400;letter-spacing:-.025em}

.hero-frame>picture{display:block;width:100%;height:100%}
@media(max-width:600px){.hero-frame.has-mobile-composition img{object-position:var(--mobile-cover-position,50% 50%)!important}}

/* Lens-shaped glass invitation, with a native section anchor. */
.hero-intro-button{position:relative;isolation:isolate;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:22px 34px;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:linear-gradient(175deg,rgba(255,255,255,.28),rgba(220,232,241,.08) 40%,rgba(226,239,249,.15) 75%,rgba(255,255,255,.3));-webkit-backdrop-filter:blur(12px) saturate(135%);backdrop-filter:blur(12px) saturate(135%);box-shadow:inset 0 3px 3px rgba(255,255,255,.5),inset 2px 0 5px rgba(31,48,64,.32),inset -2px 0 5px rgba(31,48,64,.25),inset 0 -4px 5px rgba(225,244,255,.7),inset 0 10px 16px rgba(255,255,255,.12),0 3px 5px rgba(0,0,0,.16),0 14px 25px rgba(0,0,0,.16),0 12px 18px -12px rgba(172,222,255,.8);color:#fff;font-family:var(--body);font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.035em;text-transform:none;text-shadow:0 1px 5px rgba(0,0,0,.15);transition:box-shadow .3s,transform .3s}
.hero-intro-button::before{content:"";position:absolute;inset:3px;border-radius:inherit;border-top:1px solid rgba(18,39,56,.28);border-bottom:1px solid rgba(255,255,255,.85);box-shadow:0 -1px 2px rgba(255,255,255,.5);pointer-events:none;z-index:-1}
.hero-intro-button::after{content:"";position:absolute;inset:7px 13px 48%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0));filter:blur(2px);pointer-events:none;z-index:-1}
.hero-intro-button svg{flex-shrink:0;transition:transform .25s}
.hero-intro-button:hover{transform:translateY(-2px);box-shadow:inset 0 3px 4px rgba(255,255,255,.65),inset 2px 0 5px rgba(31,48,64,.3),inset -2px 0 5px rgba(31,48,64,.22),inset 0 -4px 6px rgba(225,244,255,.85),0 16px 28px rgba(0,0,0,.2)}
.hero-intro-button:hover svg{transform:translateY(3px)}
.hero-intro-button:active{transform:translateY(1px)}
.hero-intro-button:focus-visible{outline:2px solid white;outline-offset:5px}
@media(max-width:600px){.hero-bottom>p:has(.hero-intro-button){max-width:none;width:100%;text-align:center}.hero-intro-button{font-size:20px;gap:18px;padding:21px 29px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .hero-intro-button,html:not(.motion-enabled) .hero-intro-button svg{transition:none}}

/* One shared lens for public controls. Colours express action priority. */
:root{--button-glass:linear-gradient(175deg,#ffffff80,#dde6eb20 42%,#e1edf533 75%,#ffffff94);--button-rim:#6e7e8a57;--button-shadow:inset 0 3px 3px #ffffffb3,inset 2px 0 4px #23374830,inset -2px 0 4px #23374826,inset 0 -3px 4px #ecf8ffde,0 2px 4px #17191512,0 8px 16px #1719150c}
.text-link,.submit-button,.filters button,.strip-controls button,.quote-controls button,.menu-toggle,.menu-close,.project-back,.site-header + .header-contact{position:relative;isolation:isolate;border:1px solid var(--button-rim);border-radius:999px;background:var(--button-glass);box-shadow:var(--button-shadow);-webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);color:var(--ink);font-family:var(--body);font-size:16px;font-weight:500;line-height:1.3;text-transform:none;text-decoration:none;transition:transform .25s,background .25s,box-shadow .25s}
.text-link::before,.submit-button::before,.filters button::before,.strip-controls button::before,.quote-controls button::before,.menu-toggle::before,.menu-close::before,.project-back::before,.site-header + .header-contact::before{content:"";position:absolute;inset:3px;border-radius:inherit;border-top:1px solid #23374833;border-bottom:1px solid #ffffffd9;box-shadow:0 -1px 2px #ffffff80;pointer-events:none;z-index:-1}
.text-link,.intro-bottom .text-link,.featured>.section-kicker .text-link,.project-bottom .text-link,.project-back{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:15px 25px;min-height:50px;font-size:16px;width:auto}
.text-link span{font-size:21px}
.text-link:hover,.filters button:hover,.strip-controls button:hover,.quote-controls button:hover,.menu-toggle:hover,.menu-close:hover,.project-back:hover{background:linear-gradient(175deg,#ffffffa6,#dfe8ec40 45%,#e4eef866);color:var(--ink);transform:translateY(-1px)}
.text-link[href="/contact"],.submit-button,.site-header + .header-contact{--button-glass:linear-gradient(175deg,#a15b72c9,#641e32eb 45%,#591a30e6 75%,#995c77cc);--button-rim:#a976875c;--button-shadow:inset 0 3px 3px #f4d5e16b,inset 2px 0 5px #23091f66,inset -2px 0 5px #23091f66,inset 0 -3px 4px #ddb5d180,0 3px 5px #32101d24,0 9px 18px #641e3226;color:#fff8f1}
.text-link[href="/contact"]:hover,.submit-button:hover,.site-header + .header-contact:hover{background:linear-gradient(175deg,#b16b82d9,#762640eb 45%,#68223be6 75%,#ad7089cc);color:#fff8f1}
.submit-button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:19px 27px;min-height:60px;font-size:19px}
.submit-button:disabled{opacity:.55;transform:none;cursor:wait}
/* The contact action is outside the blended navigation and stays fixed. */
.site-header + .header-contact,.site-header.is-scrolled + .header-contact{position:fixed;top:25px;right:var(--gutter);left:auto;z-index:21;mix-blend-mode:normal;display:inline-flex;align-items:center;justify-content:center;padding:13px 23px;min-height:48px;border-radius:999px;font-size:15px;background:var(--button-glass);border-color:var(--button-rim);box-shadow:var(--button-shadow)}
.header-contact span{margin-left:20px}
.site-header.on-dark + .header-contact,.site-header.is-scrolled.on-dark + .header-contact{--button-glass:linear-gradient(175deg,#ffffffbd,#f5ece5b8 45%,#f5ece5cc 75%,#ffffffcf);--button-rim:#ffffff80;--button-shadow:inset 0 3px 3px #ffffffcc,inset 2px 0 5px #23374830,inset -2px 0 5px #23374826,inset 0 -3px 4px #ecf8ffde,0 5px 12px #17191518;color:var(--accent);background:var(--button-glass)}
.menu-toggle,.menu-close{padding:12px 18px;min-height:46px;font-size:14px;gap:12px}
.menu-toggle span{margin:0}
.project-back{margin-bottom:22px}
.filters button{padding:12px 21px;min-height:46px;font-size:14px}
.filters button.active,.filters button.active:hover{background:linear-gradient(175deg,#68736ad9,#202820eb 45%,#1b231be6 75%,#56655be6);color:var(--paper);border-color:#7e8a8366;box-shadow:inset 0 3px 3px #d1e0d16b,inset 2px 0 5px #0a160c66,inset -2px 0 5px #0a160c66,inset 0 -3px 4px #c0d8cb80,0 5px 12px #17191526}
.strip-controls button,.quote-controls button{width:46px;height:46px;min-width:46px;padding:0;font-size:21px}
.hero .reel-buttons button{border:1px solid #ffffff60;border-radius:50%;background:linear-gradient(175deg,#ffffff40,#ffffff0d 45%,#ffffff26);box-shadow:var(--button-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:44px;height:44px;min-width:44px;color:#fff}
.hero .reel-buttons button:hover{background:#ffffff38;border-color:#ffffff90}
@media(min-width:901px){.site-header .menu-toggle{display:none}.site-header .desktop-nav{display:flex}}
@media(max-width:900px){.site-header + .header-contact,.site-header.is-scrolled + .header-contact{display:none}.site-header .desktop-nav{display:none}.site-header .menu-toggle{display:flex;color:inherit}}
@media(max-width:600px){.text-link,.intro-bottom .text-link,.featured>.section-kicker .text-link,.project-bottom .text-link,.project-back{padding:13px 21px;min-height:46px;font-size:15px;gap:18px}.submit-button{font-size:18px;padding:18px 23px}.filters button{padding:11px 17px}.project-bottom{gap:16px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .text-link,html:not(.motion-enabled) .submit-button,html:not(.motion-enabled) .filters button,html:not(.motion-enabled) .strip-controls button,html:not(.motion-enabled) .quote-controls button,html:not(.motion-enabled) .menu-toggle,html:not(.motion-enabled) .menu-close,html:not(.motion-enabled) .project-back{transition:none}}

/* The reel's soft moulded edge is shared by every glass control. */
:root{--button-rim:rgba(255,255,255,.32);--button-shadow:inset 0 2px 4px rgba(255,255,255,.55),inset 2px 0 4px rgba(255,255,255,.22),inset -2px 0 4px rgba(255,255,255,.22),inset 0 -2px 4px rgba(225,239,249,.55),0 3px 9px rgba(23,25,21,.12)}
.hero-intro-button,.text-link,.submit-button,.filters button,.strip-controls button,.quote-controls button,.menu-toggle,.menu-close,.project-back,.site-header + .header-contact,.site-header.is-scrolled + .header-contact,.hero .reel-buttons button{border:1px solid rgba(255,255,255,.32);box-shadow:var(--button-shadow)}
.hero-intro-button::before,.hero-intro-button::after,.text-link::before,.submit-button::before,.filters button::before,.strip-controls button::before,.quote-controls button::before,.menu-toggle::before,.menu-close::before,.project-back::before,.site-header + .header-contact::before{display:none}
.text-link[href="/contact"],.submit-button,.site-header + .header-contact,.site-header.on-dark + .header-contact,.site-header.is-scrolled.on-dark + .header-contact,.filters button.active{--button-shadow:inset 0 2px 4px rgba(255,255,255,.55),inset 2px 0 4px rgba(255,255,255,.22),inset -2px 0 4px rgba(255,255,255,.22),inset 0 -2px 4px rgba(225,239,249,.55),0 3px 9px rgba(23,25,21,.12);border-color:rgba(255,255,255,.32);box-shadow:var(--button-shadow)}
.hero-intro-button:hover,.text-link:hover,.submit-button:hover,.filters button:hover,.filters button.active:hover,.strip-controls button:hover,.quote-controls button:hover,.menu-toggle:hover,.menu-close:hover,.project-back:hover,.site-header + .header-contact:hover,.hero .reel-buttons button:hover{border-color:rgba(255,255,255,.5);box-shadow:var(--button-shadow)}

/* Keep the top-of-page contact link unboxed; glass appears after scrolling. */
.site-header:not(.is-scrolled) + .header-contact,.site-header:not(.is-scrolled).on-dark + .header-contact,.site-header:not(.is-scrolled) + .header-contact:hover{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;mix-blend-mode:difference}

/* Contrast on the maroon surfaces and pointer-specific focus treatment. */
.testimonials .quote-controls button,.testimonials .quote-controls button:hover,.menu-dialog .menu-close,.menu-dialog .menu-close:hover{color:#fff8f1}
body:not(.keyboard-navigation) :is(a,button,input,select,textarea,summary):focus{outline:none}
body.keyboard-navigation :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:600px){
 .hero .hero-intro-button{font-size:16px;gap:13px;padding:15px 23px;min-height:50px}
 .hero .hero-intro-button svg{width:18px;height:18px}
 .hero .reel-project-name,.hero .reel-buttons{display:none}
 .hero .reel-controls{display:block;width:100%;margin-top:14px;opacity:.65}
 .hero .reel-progress{margin-top:0}
}

/* Form closing actions share one left edge and have room to breathe. */
.contact-form-actions{display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-top:24px}
.contact-form-actions .form-privacy{margin:0;max-width:52ch;font-size:13px;line-height:1.65}
.contact-form-actions .submit-button{width:auto;min-width:230px;justify-content:space-between;gap:40px;padding:17px 27px;min-height:56px;font-size:18px}
.contact-form-actions #form-status{margin:0;max-width:52ch}
.contact-form-actions #form-status:empty{display:none}
@media(max-width:600px){.contact-form-actions{gap:18px;margin-top:20px}.contact-form-actions .submit-button{min-width:210px;font-size:17px;padding:16px 24px}.contact-form-actions .form-privacy{font-size:12px}}

/* Mobile WebKit uses opacity and transforms without animated clipping layers. */
.hero-frame{transition:opacity .85s ease,visibility .85s ease;-webkit-clip-path:none;clip-path:none}
.hero-frame.is-entering{animation:none;-webkit-animation:none}
@media(prefers-reduced-motion:no-preference){
 .hero-frame.is-active img{-webkit-animation:hero-image-drift 6.5s linear both;animation:hero-image-drift 6.5s linear both}
 .intro-bottom .asterisk{-webkit-animation:asterisk-turn 25s linear infinite;animation:asterisk-turn 25s linear infinite}
}
@-webkit-keyframes hero-image-drift{from{-webkit-transform:translate3d(0,0,0) scale(1.075);transform:translate3d(0,0,0) scale(1.075)}to{-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)}}
.hero.is-paused .hero-frame.is-active img{-webkit-animation-play-state:paused;animation-play-state:paused}
@media(max-width:900px){.motion-reveal{transform:translate3d(0,22px,0);transition:opacity .65s ease,transform .8s var(--motion-ease)}.motion-reveal.in-view{opacity:1;transform:translate3d(0,0,0)}}

/* Static grain follows the mobile gradient; the project image stays clear. */
@media(max-width:600px){
 .hero::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background-image:url('assets/hero-grain.svg');background-repeat:repeat;background-size:160px 160px;opacity:.24;mix-blend-mode:soft-light;-webkit-mask-image:linear-gradient(180deg,#000 0%,#0009 19%,transparent 38%,#0005 55%,#000 100%);mask-image:linear-gradient(180deg,#000 0%,#0009 19%,transparent 38%,#0005 55%,#000 100%)}
}

@media(prefers-reduced-motion:reduce){html.motion-enabled .hero-frame.is-active img{animation:hero-image-drift 6.5s linear both;-webkit-animation:hero-image-drift 6.5s linear both}html.motion-enabled .intro-bottom .asterisk{animation:asterisk-turn 25s linear infinite;-webkit-animation:asterisk-turn 25s linear infinite}}

/* Each mobile testimonial uses its own height rather than the longest review's. */
@media(max-width:600px){
 .testimonials{padding-top:24px;padding-bottom:30px}
 .testimonial-track{align-items:flex-start;margin-top:26px;overflow-y:hidden;transition:height .25s ease}
 .testimonial-track .testimonial-card{min-height:0;height:auto;justify-content:flex-start;padding:0;align-self:flex-start}
 .testimonial-author{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .testimonial-track{transition:none}}

/* Editorial agency statement with matching idea, identity and website icons. */
.intro-editorial{padding-top:48px;padding-bottom:76px}
.intro-statement{margin:48px 0 36px;font-family:var(--body);font-weight:800;font-size:clamp(40px,5.75vw,108px);line-height:1.04;letter-spacing:-.065em;text-transform:uppercase;color:var(--accent)}
.intro-row{display:flex;align-items:center;gap:.17em;min-width:0}
.intro-clause{display:block;white-space:nowrap}
.intro-object{display:block;width:1.12em;height:1.22em;flex:0 0 1.12em;object-fit:contain;filter:drop-shadow(0 6px 5px #1719150d);transform:rotate(var(--object-tilt,0deg));transition:transform .5s var(--motion-ease)}
.intro-object-flame{--object-tilt:-7deg}.intro-object-phone{--object-tilt:7deg}.intro-object-monitor{--object-tilt:-5deg}
@media(hover:hover) and (pointer:fine){.intro-row:hover .intro-object{transform:translateY(-7px) rotate(0deg)}}
.intro-caption{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.intro-caption>p{max-width:54ch;font-size:17px;line-height:1.6;color:#5b5c56}
.intro-mobile-objects{display:none}
@media(min-width:1600px){.intro-statement{font-size:5.6vw}}
@media(max-width:1000px) and (min-width:601px){.intro-statement{font-size:5.55vw}.intro-caption{gap:24px}.intro-caption>p{font-size:15px;max-width:45ch}}
@media(max-width:600px){
 .intro-editorial{padding-top:30px;padding-bottom:48px}
 .intro-editorial>.section-kicker{font-size:11px}
 .intro-statement{margin:32px 0 24px;font-size:clamp(30px,9.4vw,55px);line-height:1.08;letter-spacing:-.06em}
 .intro-row{display:block;margin:0 0 7px}
 .intro-row:last-child{margin-bottom:0}
 .intro-row .intro-object{display:none}
 .intro-clause{white-space:normal;overflow-wrap:normal;word-break:normal}
 .intro-mobile-objects{display:flex;align-items:center;gap:16px;margin:20px 0 26px}
 .intro-mobile-objects img{width:76px;height:80px;object-fit:contain}
 .intro-mobile-objects img:nth-child(1){transform:rotate(-7deg)}
 .intro-mobile-objects img:nth-child(2){transform:rotate(7deg)}
 .intro-mobile-objects img:nth-child(3){transform:rotate(-5deg)}
 .intro-caption{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
 .intro-caption>p{font-size:15px;line-height:1.6;max-width:39ch}
}

/* A quieter, centred editorial treatment using the existing accent font. */
.intro-statement{max-width:1200px;margin:42px auto 32px;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(40px,4.8vw,84px);line-height:1.12;letter-spacing:-.025em;text-transform:none;text-align:center}
.intro-row{justify-content:center;gap:.22em}
.intro-object{width:.92em;height:1.12em;flex-basis:.92em}
.intro-caption{flex-direction:column;align-items:center;gap:24px;text-align:center}
.intro-caption>p{max-width:54ch}
@media(min-width:1600px){.intro-statement{font-size:80px}}
@media(max-width:1000px) and (min-width:601px){.intro-statement{font-size:5vw}.intro-caption>p{max-width:54ch}}
@media(max-width:600px){
 .intro-statement{margin:30px auto 20px;font-size:clamp(32px,9vw,48px);line-height:1.06;letter-spacing:-.02em}
 .intro-row{margin-bottom:12px;text-align:center}
 .intro-mobile-objects{justify-content:center;gap:20px;margin:20px auto 26px}
 .intro-mobile-objects img{width:67px;height:72px}
 .intro-caption{align-items:center;text-align:center;gap:24px}
 .intro-caption>p{max-width:35ch}
}

/* Keep the portfolio action at the outer edge of the section heading. */
.featured>.section-kicker{justify-content:space-between}
.featured>.section-kicker .text-link{margin-left:auto;flex-shrink:0}

/* Liquid glass: the supplied optical shell, sized by each control's content. */
.box{
 --tr:15%;--glass-fill:rgba(255,255,255,.16);--glass-ink:#292b26;--glass-icon:#3e3e3e;--glass-icon-ink:#f5f5f5;
 position:relative;isolation:isolate;box-sizing:border-box;max-width:100%;border-radius:9999px;
 border:1px double rgba(51,51,51,.08);background:var(--glass-fill);color:var(--glass-ink);
 box-shadow:inset 2px -2px 1px -1px rgba(255,255,255,.9),inset -2px 2px 1px -1px rgba(255,255,255,.9),inset 6px -6px 1px -6px rgba(255,255,255,.55),inset -6px 6px 1px -6px rgba(255,255,255,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2);
 backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer;user-select:none;appearance:none;font-family:var(--body);text-decoration:none;
 transition:transform .25s ease,background .25s ease;
}
.box::before,.box::after{display:block;content:"";position:absolute;pointer-events:none;border-radius:inherit;z-index:-1}
.box::before{inset:35% 8px -18%;width:auto;height:auto;transform:none;border:1px solid rgba(0,0,0,.9);filter:blur(8px);box-shadow:none;opacity:.3}
.box::after{inset:0;width:auto;height:auto;filter:blur(7px) contrast(3);background:linear-gradient(45deg,rgba(255,255,255,.8) 0%,transparent var(--tr),transparent calc(100% - var(--tr)),rgba(255,255,255,.8) 100%)}
.box .circle-overlay{position:absolute;inset:4px;border:1px solid rgba(255,255,255,.2);border-radius:inherit;filter:blur(1px);pointer-events:none}
.box.start-btn{display:inline-flex;align-items:center;justify-content:center;gap:clamp(12px,1.5vw,22px);padding:10px 14px 10px 24px;min-height:60px;width:auto;font-size:clamp(15px,1.3vw,19px);line-height:1.3}
.box.start-btn .text{font-size:inherit;color:inherit;filter:drop-shadow(0 25px 3px rgba(102,102,102,.15));overflow-wrap:anywhere}
.box.start-btn .btn-icon{margin:0;flex:0 0 36px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--glass-icon);color:var(--glass-icon-ink);border-radius:50%;box-shadow:0 0 6px rgba(0,0,0,.3);transition:transform .25s ease}
.box .btn-icon .svg{width:12px;height:12px;fill:currentColor;filter:drop-shadow(0 25px 3px rgba(102,102,102,.2))}
.box .btn-icon[data-direction="left"] .svg{transform:rotate(180deg)}
.box .btn-icon[data-direction="down"] .svg{transform:rotate(90deg)}
.box .btn-icon[data-direction="up"] .svg{transform:rotate(-90deg)}
.box .btn-icon[data-direction="diagonal"] .svg{transform:rotate(-45deg)}
.box .btn-icon[data-direction="close"] .svg{fill:none;width:17px;height:17px}
.box.glass-primary,.filters .box.active{--glass-fill:rgba(100,30,50,.9);--glass-ink:#fff8f1;--glass-icon:#fff8f1;--glass-icon-ink:#641e32;background:var(--glass-fill);color:var(--glass-ink)}
.hero .box,.testimonials .box,.menu-dialog .box{--glass-fill:rgba(255,255,255,.06);--glass-ink:#fff8f1;--glass-icon:rgba(255,255,255,.9);--glass-icon-ink:#641e32;background:var(--glass-fill);color:var(--glass-ink)}
.box.glass-icon-only{width:46px;height:46px;min-width:46px;min-height:46px;padding:0}
.box.glass-icon-only .btn-icon{background:none;box-shadow:none;color:inherit;width:32px;height:32px;flex-basis:32px}
.box.menu-toggle{min-height:46px}
.box.menu-close{min-height:48px;font-size:15px;padding:7px 10px 7px 20px}
.site-header + .box.header-contact{min-height:48px;padding:6px 10px 6px 20px;font-size:15px}
.site-header:not(.is-scrolled) + .box.header-contact::before,.site-header:not(.is-scrolled) + .box.header-contact::after,.site-header:not(.is-scrolled) + .box.header-contact .circle-overlay{display:none}
.site-header:not(.is-scrolled) + .box.header-contact .btn-icon{background:transparent;box-shadow:none;color:inherit}
.contact-form-actions .box.submit-button{min-width:230px;min-height:60px;width:auto;justify-content:space-between;padding:10px 14px 10px 24px}
@media(hover:hover) and (pointer:fine){.box:hover{background:var(--glass-fill);color:var(--glass-ink);transform:translateY(-3px)}.box:hover .btn-icon{transform:scale(1.1)}}
.box:active{transform:scale(.96)}.box:active .btn-icon{transform:scale(.94)}
.box:disabled{cursor:wait;transform:none}
@media(max-width:600px){
 .box.start-btn,.featured>.section-kicker .box.start-btn,.hero .box.hero-intro-button{min-height:50px;padding:8px 10px 8px 19px;font-size:15px;gap:12px}
 .box.start-btn .btn-icon{width:32px;height:32px;flex-basis:32px}
 .box.glass-icon-only{width:44px;height:44px;min-width:44px;min-height:44px;padding:0}
 .contact-form-actions .box.submit-button{min-width:210px;min-height:54px;font-size:16px}
 .box.menu-close{min-height:46px}
 .featured>.section-kicker{flex-wrap:wrap}
 .featured>.section-kicker .box{margin-left:auto}
}
@media(max-width:900px){.site-header + .box.header-contact{display:none}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .box,html:not(.motion-enabled) .box .btn-icon{transition:none}}
.box .text,.box .circle-overlay{margin:0}
.site-header.is-scrolled + .box.header-contact{background:var(--glass-fill);color:var(--glass-ink)}
@media(hover:hover) and (pointer:fine){.box.glass-primary:hover,.filters .box.active:hover{background:var(--glass-fill);color:var(--glass-ink)}}

/* Keep each illustration with its sentence on smaller screens too. */
@media(max-width:600px){
 .intro-statement{font-size:clamp(29px,8.4vw,48px);line-height:1.18}
 .intro-row{display:block;margin-bottom:22px}
 .intro-row:last-child{margin-bottom:0}
 .intro-clause{display:inline;white-space:normal}
 .intro-row .intro-object{display:inline-block;width:1.05em;height:1.15em;margin:0 .1em;vertical-align:-.2em}
 .intro-mobile-objects{display:none}
}
@media(max-width:600px){.intro-clause{display:inline-block}.intro-row:last-child .intro-clause:last-child{white-space:nowrap}}
.intro-row:last-child .intro-clause:last-child{display:inline-flex;align-items:center;gap:.22em}

/* Use the existing Manrope family for a cleaner agency statement. */
.intro-statement{font-family:var(--body);font-weight:500;font-size:clamp(36px,4.1vw,68px);line-height:1.2;letter-spacing:-.045em}
@media(min-width:1600px){.intro-statement{font-size:68px}}
@media(max-width:1000px) and (min-width:601px){.intro-statement{font-size:4.1vw}}
@media(max-width:600px){.intro-statement{font-size:clamp(24px,6.7vw,36px);line-height:1.3;letter-spacing:-.035em}}

/* A clearer mobile statement using the site's existing Manrope family. */
@media(max-width:600px){
 .intro-statement{font-family:var(--body);font-weight:500;font-size:clamp(24px,6.5vw,34px);line-height:1.35;letter-spacing:-.04em}
 .intro-row{margin-bottom:24px}
 .intro-row .intro-object{width:1.15em;height:1.25em;vertical-align:-.25em}
 .intro-clause{max-width:100%}
 .intro-row:last-child .intro-clause:last-child{white-space:normal}
}

/* The agency introduction occupies one viewport, growing if content needs it. */
.intro-editorial{box-sizing:border-box;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(48px,8vh,100px);padding-bottom:clamp(48px,8vh,100px)}
.intro-editorial .intro-statement{width:100%;margin:0 auto 36px}
@media(max-width:600px){.intro-editorial{padding-top:48px;padding-bottom:48px}.intro-editorial .intro-statement{margin-bottom:28px}}

/* Give each mobile statement the same two-line rhythm. */
@media(max-width:600px){
 .intro-editorial .intro-statement{font-size:clamp(24px,6.8vw,32px);line-height:1.25;letter-spacing:-.04em}
 .intro-statement .intro-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:.22em;row-gap:5px;margin-bottom:28px}
 .intro-statement .intro-row:last-child{margin-bottom:0}
 .intro-row .intro-clause:first-child{font-size:1.08em;line-height:1.2}
 .intro-row .intro-clause:nth-of-type(2){flex-basis:100%;font-size:.92em;line-height:1.3}
 .intro-row:last-child .intro-clause:last-child{justify-content:center;white-space:nowrap}
 .intro-row .intro-object{width:1.12em;height:1.18em;margin:0;flex:none}
}

/* Mobile typography pairs quiet Manrope openings with serif emphasis. */
@media(max-width:600px){
 .intro-editorial .intro-statement{font-size:clamp(31px,9.4vw,44px);line-height:1.12;letter-spacing:-.025em}
 .intro-editorial .intro-row{display:block;margin-bottom:30px}
 .intro-editorial .intro-row:last-child{margin-bottom:0}
 .intro-editorial .intro-clause:first-child{font-family:var(--body);font-size:.75em;font-weight:500;line-height:1.4;letter-spacing:-.035em}
 .intro-editorial .intro-clause:last-child{display:block;margin-top:5px;font-family:"Instrument Serif",Georgia,serif;font-size:1.3em;font-weight:400;line-height:1.12;white-space:normal}
 .intro-editorial .intro-row>.intro-object{width:1em;height:1em;margin:0 .1em;vertical-align:-.16em}
 .intro-editorial .intro-row:last-child .intro-clause:last-child{display:flex;justify-content:center;align-items:center;gap:.14em;white-space:nowrap;font-size:1em}
 .intro-editorial .intro-row:last-child .intro-object{width:1em;height:1em;margin:0;flex:0 0 1em;vertical-align:middle}
}

/* Desktop agency statement uses the existing editorial serif. */
@media(min-width:601px){.intro-editorial .intro-statement,.intro-editorial .intro-clause{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.025em}}

/* Keep the selected-work title and action in one mobile header row. */
@media(max-width:600px){
 .featured>.section-kicker{flex-wrap:nowrap;align-items:center;gap:12px}
 .featured>.section-kicker .work-section-title{flex:1 1 0;min-width:0;max-width:none;font-size:clamp(20px,5.2vw,24px)}
 .featured>.section-kicker .box.start-btn{flex:0 0 auto;min-height:44px;padding:6px 8px 6px 13px;gap:8px;font-size:13px;margin-left:auto}
 .featured>.section-kicker .box.start-btn .btn-icon{width:28px;height:28px;flex-basis:28px}
}

/* Give the desktop agency statement a little more presence. */
@media(min-width:1001px){.intro-editorial .intro-statement{font-size:clamp(44px,4.8vw,80px)}}

/* Portfolio cards show the project name without the year. */
.project-card .project-meta>span{display:none}

/* The project slider is temporarily replaced by a responsive, silent background reel. */
.hero.hero-has-video{height:100svh;min-height:0;max-height:none;--hero-ink:#fafbf7;--hero-bg:#171915;background:#171915}
.hero-video-background,.hero-video-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%}
.hero-video-background{z-index:0;pointer-events:none;overflow:hidden}
.hero-video-poster img,.hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-video{opacity:0;transition:opacity .35s}
.video-playing .hero-video{opacity:1}
.video-playing .hero-video-poster{visibility:hidden}
.hero-has-video::after{background:linear-gradient(180deg,#00000020,transparent 35%,#00000012 65%,#00000060);pointer-events:none}
.hero-has-video .hero-bottom{z-index:5;justify-content:center;align-items:center}
.hero-has-video .hero-bottom>p{width:auto;max-width:none;text-align:center}
@media(max-width:600px){.hero-has-video .hero-bottom{display:flex;bottom:24px}.hero-video-toggle{position:relative;flex-shrink:0;right:auto;bottom:auto;padding:8px 11px;font-size:11px;min-height:40px}.hero-has-video .hero-bottom{gap:12px}.hero-has-video .hero-bottom>p{width:auto}.hero-has-video .hero-intro-button{padding-left:15px}}

@media(max-width:600px){.hero-has-video .hero-bottom{justify-content:center;gap:0}.hero-has-video .hero-bottom>p{width:100%}}

/* The second cover crossfades on hover; touch devices retain the main image. */
.project-image .project-hover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:1}
.project-image .image-arrow{z-index:2}
@media(hover:hover) and (pointer:fine){.project-image:hover .project-hover-image{opacity:1}}
.project-image:focus-visible .project-hover-image{opacity:1}