/* Content fitting and supplied IKAG identity on the reference's existing layout. */
.ikag-header-logo{height:72px;width:50px;object-fit:contain;filter:invert(1)}
.ikag-menu-logo{width:min(34vw,420px);max-height:78vh;object-fit:contain;filter:invert(1)}
.ikag-marquee-logo{object-fit:contain!important;filter:invert(1);border-radius:0!important;width:100px;padding:10px}
.ikag-preloader-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ikag-preloader-mark img{width:160px}
.ikag-hero-mark{position:absolute;top:40px;left:40px;width:50px;height:72px}
.ikag-hero-mark img{width:100%;height:100%;object-fit:contain;filter:invert(1)}
#hero-screen>div:first-child{pointer-events:none}
#hero-screen .hero-text-word-group{position:absolute;bottom:30px;left:32px;color:white;text-shadow:0 1px 16px #0008; margin:0}
#hero-screen{pointer-events:none}
.ikag-hero-visit{position:absolute;right:32px;bottom:28px;pointer-events:auto;color:#fff;border-bottom:1px solid #fff;padding:8px 0;font-size:20px;text-shadow:0 1px 12px #0009}
#hero-video-container{overflow:hidden}
.ikag-exterior-desktop{height:100%;width:100%;object-fit:cover;object-position:center}
.ikag-exterior-mobile{display:none}
.ikag-case-section-title{font-size:clamp(24px,2.2vw,36px);line-height:1.15;max-width:25ch}
.ikag-case-tags{font-size:16px;line-height:1.8;opacity:.65;margin-top:30px}
.ikag-tech-title{margin-top:44px;font-size:21px;font-weight:500}
.ikag-case-evidence{width:100%;height:auto;border-radius:8px}
.ikag-media-caption{font-size:14px;opacity:.6;padding:14px 32px}
.ikag-studio-link{display:inline-block;margin:0 32px 40px;font-size:22px;border-bottom:1px solid}
.ikag-service-details{max-width:900px;font-size:20px;line-height:1.5;padding:0 32px}
.ikag-service-details p+p{margin-top:24px}
.ikag-service-details a{display:inline-block;margin-top:24px;border-bottom:1px solid}
.service-card h3{white-space:normal!important}
.ikag-service-copy{white-space:pre-line;line-height:1.4}
.ikag-service-case-link{display:block;margin-top:18px;text-decoration:underline;text-underline-offset:4px}
.ikag-form-note{font-size:14px;line-height:1.4;margin:18px 0;opacity:.7}
.ikag-form-footer{display:block!important;padding-bottom:24px!important}
#submitButtonContainer{display:inline-block;min-width:190px}
#submitButton{white-space:nowrap}
.ikag-visit-option{padding:0 0 52px}
.ikag-visit-option h3{font-size:36px;line-height:1.1;margin-bottom:20px}
.ikag-visit-option p{font-size:20px;line-height:1.5;margin-bottom:24px;max-width:50ch}
.hero-title{overflow-wrap:normal;font-size:clamp(42px,8vw,128px)!important}
.hero-image{object-position:top!important}
@media(max-width:1023px){
 .ikag-header-logo{height:57px;width:39px}
 #hero-screen,#hero-video-container{height:100svh}
 .ikag-exterior-desktop{display:none}
 .ikag-exterior-mobile{display:block;position:absolute;width:100%;height:100%;object-fit:cover;object-position:62% center;transform:rotate(-1deg) scale(1.04)}
 #hero-screen .hero-text-word-group{left:20px;bottom:75px;font-size:15px;letter-spacing:.04em}
 .ikag-hero-visit{left:20px;right:auto;bottom:30px;font-size:18px}
 .ikag-marquee-logo{width:65px}
 .hero-title{font-size:clamp(36px,9vw,72px)!important}
 .hero-image{aspect-ratio:16/11!important;object-fit:cover}
 .ikag-service-details{font-size:18px;padding:0 24px}
 .ikag-case-section-title{font-size:28px}
 .ikag-visit-option h3{font-size:30px}
 .links-and-socials{max-width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ikag-exterior-mobile{transform:none}}

/* 2026-09-15 repair: the statement panel takes the artwork's brick, not the reference's coral (facade median-cut: #9c6b51 lit, #855f48 mid, #72442d shadow). */
#hero-wave-container{background:#855f48!important}
#non-fluid-canvas{background:linear-gradient(to top,#72442d 0%,#855f48 50%,#9c6b51 80%,rgba(255,255,255,0) 100%)!important}
/* card media are now 16:9 compositions on the site's canvas; no top-anchored crop */
.hero-image{object-position:center!important}
@media(max-width:1023px){.hero-image{aspect-ratio:16/9!important}}

/* 2026-09-15 round 2 */
:root{--ikag-accent:#f15807}
#logo-mini>*{transition:opacity .5s}
.ikag-logo-hidden #logo-mini>*{opacity:0!important;pointer-events:none}
/* the hero intro tweens #logo-mini itself (a GSAP from-tween records the end opacity), so the hide lives on its children */
.ikag-on-brick #logo-mini{mix-blend-mode:normal}
.ikag-back{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;font-size:16px;line-height:1;color:inherit;transition:color .25s}
.ikag-back svg{width:26px;height:26px;transform:scaleX(-1);transition:transform .25s}
.ikag-back:hover{color:var(--ikag-accent)}.ikag-back:hover svg{transform:scaleX(-1) translateX(4px)}
.ikag-hero-visit:hover,.ikag-studio-link:hover,.ikag-service-case-link:hover,.ikag-service-details a:hover,#footer-links a:hover,.menu a:hover,.ikag-visit-option a:hover{color:var(--ikag-accent);border-color:var(--ikag-accent);text-decoration-color:var(--ikag-accent)}
.group:hover .fade-text,.group:hover svg{color:var(--ikag-accent)}

#all-work-vt .ikag-back{color:#fff}

/* 2026-09-15 round 3 v2 — Nicolas's transition: the photo stays pinned; the cut-out Porsche (top view, nose up) rides up full width over it and drags the black projects section behind its tail. No panel, no fluid, no statement text. */
#hero-screen{z-index:0!important}
section.bg-main-bg.overflow-hidden:has(#hero-wave-container){background:transparent!important;overflow:visible!important;position:static!important}
#hero-wave-container{height:auto!important;background:transparent!important;overflow:visible!important;position:relative;z-index:20}
#fluidCanvas,#non-fluid-canvas,#hero-text-container{display:none!important}
.ikag-car-panel{position:relative;display:block;width:100vw;pointer-events:none}
.ikag-car-panel img{display:block;width:100vw;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}
.ikag-car-panel{overflow:visible}
section.bg-dark-bg.-mt-1{position:relative;z-index:10}
/* (the old `#hero-wave-container+*` rule made the moving black block position:relative and pushed the black section a screen down) */
/* measured on the cut-out: rear fenders = full image width; rear-wheel centre line at 73.4% of the height → black starts 54.1vw above the car's tail */
/* v4: the black section no longer reaches up to the axle by itself (with the car moving faster than the page, a static margin put black
   beside the fenders above the axle during the move). The moving block covers axle→tail; the section starts at the car's settled tail. */
.ikag-black-tail{margin-top:0!important}

/* transition v3: fixed photo layer */
body,#smooth-wrapper,#smooth-content,main{background:transparent!important}
html{background:#fff}
.ikag-fixed-photo{position:fixed!important;inset:0!important;height:100svh!important;width:100vw!important;z-index:0!important;pointer-events:none}
#smooth-wrapper{position:relative;z-index:1}
#hero-screen{background:transparent!important}
.ikag-black-tail{position:relative;z-index:10}

/* transition v4 — Nicolas: the car crosses in half the scroll distance, with motion blur while it moves.
   --car-h is the car's rendered height at full width (5208/2568). The panel is half that, the car translates the rest. */
:root{--car-h:202.8vw}
.ikag-car-panel{height:max(calc(var(--car-h) / 2),60svh);overflow:visible}
.ikag-car-move{position:relative;width:100vw;height:var(--car-h);will-change:transform}
.ikag-car-move img{position:absolute;inset:0;width:100vw;height:auto;filter:none}
.ikag-car-move .ikag-car-blur{opacity:0;pointer-events:none}
.ikag-car-black{position:absolute;left:0;width:100%;background:#0f0f0f;z-index:5;pointer-events:none;will-change:transform}
/* the block must sit under every black section, or it hides the 'Quelques réalisations' heading and card tops (gap seen 2026-09-15 night) */
section.bg-dark-bg.-mt-1{z-index:12!important}
.ikag-black-tail{z-index:16!important}
section.bg-main-bg.overflow-hidden:has(#hero-wave-container){position:relative!important;z-index:auto!important}

/* v6 parallax: four layers from the same overhead camera (wheels, body, front splitter, wing); offsets peak mid-move and close at rest */
.ikag-car-layer{will-change:transform}

/* project page titles back to ink (Nicolas 2026-09-16: keep the orange on buttons only) */

/* CTAs fill in the accent instead of black (Nicolas 2026-09-16) */
.bubble-button__bubble{background:var(--ikag-accent)!important}
.bubble-button:hover{border-color:var(--ikag-accent)!important;color:#fff!important}
.ikag-down svg{transform:rotate(90deg)}
.ikag-tease{margin-top:18px;font-size:18px;line-height:1.5;color:var(--ikag-accent)}

/* hero doors removed from the site 2026-09-16 (Nicolas: rebuild elsewhere); notes in proof/repair-2026-09-15/REVIEW.md */

.ikag-car-gl{position:absolute;inset:0;width:100vw;height:100%;pointer-events:none;visibility:hidden}
/* 2026-09-16 phone hotfix (Nicolas's iPhone recording: the car stayed over the projects section). On phones the car rides in flow at page
   speed, panel = full car height, so no scrub-driven translation is needed for the layout to be right on any device. */
@media(max-width:1023px){.ikag-car-panel{height:var(--car-h)!important}.ikag-car-black{display:none}}

/* phones: one flat car image, no layers, no scrub, no blur (2026-09-16 night: layered car flickered on iPhone) */
.ikag-car-flat{display:none}
@media(max-width:1023px){.ikag-car-flat{display:block;position:absolute;inset:0;width:100vw;height:auto}.ikag-car-layer,.ikag-car-echo,.ikag-car-black{display:none!important}.ikag-car-move{will-change:auto}}