/* IKAG site-wide layout, approved on the About page 2026-10-03.
   Loaded last on every page so it wins over the older styles. */

/* Breadcrumbs: light grey, close to what sits above and below */
.ikag-breadcrumb{margin-bottom:16px!important}
.ikag-breadcrumb,.ikag-breadcrumb *{color:#a6a6a6!important}
.ikag-breadcrumb a:hover{color:#0f0f0f!important}
.bg-dark-bg .ikag-breadcrumb a:hover{color:#fff!important}

/* Pages with the moving banner: breadcrumbs right under it, intro tight */
.mt-24.px-4:has(> .ikag-breadcrumb){margin-top:-24px!important}
.mt-24.px-4:has(> .ikag-breadcrumb) > h1{margin-bottom:0!important}
section.services-section:has(.ikag-breadcrumb){padding-top:0!important;margin-top:-20px!important}
section.services-section:has(.ikag-breadcrumb) .inline-block > p{margin-bottom:48px!important}
#all-work-vt:has(> .ikag-breadcrumb){padding-top:0!important;margin-top:-20px!important}
#all-work-vt:has(> .ikag-breadcrumb) > p{margin-bottom:48px!important}
#all-work-vt h2.whitespace-nowrap{white-space:normal!important;text-wrap:balance}

/* About: studio picture close under the intro, whole picture on phones */
.mt-32.mb-12:has(> .about-image){margin-top:48px!important;margin-bottom:0!important}
.about-image{aspect-ratio:auto!important;height:auto!important;object-fit:contain!important}

/* Title-left / text-right sections: thin grey line beside the text, tighter rows */
.grid.lg\:grid-cols-3:has(> .lg\:col-span-2){padding-top:48px!important;padding-bottom:48px!important}
.grid.lg\:grid-cols-3 > .lg\:col-span-2{border-left:1px solid #d6d6d6;padding-left:32px}
@media (max-width:1023px){.grid.lg\:grid-cols-3 > .lg\:col-span-2{padding-left:20px}}
.grid.lg\:grid-cols-3 > .lg\:col-span-2 :is(p,li),h1 span{text-wrap:pretty}
.grid.lg\:grid-cols-3 > .lg\:col-span-2 :is(h2,h3){text-wrap:balance}
.ikag-studio-link{margin-bottom:24px!important}

/* "Parlons-en" box: shorter, orange, on the right; mouse-over only slides the arrow */
.late-cta{padding-bottom:64px!important}
.late-cta > button{background:#f15807!important;box-shadow:none!important}
@media (min-width:1024px){.late-cta > button{width:60%!important}}
.late-cta > button > div{padding:32px 24px!important}
@media (min-width:1024px){.late-cta > button > div{padding:40px 48px!important}}
.late-cta .cta-arrow{margin-top:28px!important}
.late-cta .cta-arrow svg{color:#fff!important}
.late-cta h2,.late-cta p{text-wrap:balance}
.late-cta .cta-arrow h3{font-size:clamp(2.5rem,5.5vw,4.5rem)!important;line-height:1!important}

/* Footer: links always shown, big word edge to edge and on the bottom */
.footer-link .link-wrapper{opacity:1!important;transform:none!important}
footer{padding-bottom:0!important}
#footer-letswork-wrapper-vt{margin-left:0!important;margin-right:0!important}
#footer-letswork-wrapper-vt svg{width:100%!important;height:auto!important;max-width:none!important;display:block}
@media (max-width:1023px){
  footer[data-astro-cid-sz7xmlte]{height:auto!important;min-height:0!important}
  #footer-letswork-wrapper-vt{flex:none!important;height:90vw!important}
}

/* Project page title: the visit button drops below instead of covering a long title */
.hero-section > .sm\:flex-row{flex-wrap:wrap;column-gap:24px}
.hero-section > .sm\:flex-row > .overflow-hidden{flex-shrink:0;max-width:100%}

/* Footer: registered business line */
.ikag-legal{color:#8c8c8c;font-size:.8em;margin-top:10px!important;white-space:nowrap}

/* Websites, Custom web apps and Waitlist pages */
.ikag-svc-p{margin:0 0 .9em}
.ikag-band-list{margin:0 0 1em;padding-left:1.25em}
ul.ikag-band-list{list-style:disc}
ol.ikag-band-list{list-style:decimal}
.ikag-band-list li{margin:.3em 0}
#services-section-vt.ikag-auto .service-card > div,#services-section-vt.ikag-auto .service-card-last > div{height:auto!important;min-height:25rem}
@media (max-width:1023px){#services-section-vt.ikag-auto .service-card > div,#services-section-vt.ikag-auto .service-card-last > div{min-height:0}}
.ikag-card-title{text-wrap:balance}
.ikag-service-copy .ikag-service-case-link{margin-right:24px}
.ikag-qa h3{font-weight:500;margin-top:1.6em!important}
.ikag-qa h3:first-child{margin-top:0!important}
.ikag-qa h3 + p{margin-top:.4em!important}
.ikag-qa a{text-decoration:underline;text-underline-offset:4px}
.ikag-wl-button{display:inline-flex;align-items:center;gap:14px;background:#f15807;color:#fff;border-radius:999px;padding:18px 34px;font-size:1.25rem;line-height:1;cursor:pointer}
.ikag-wl-button::after{content:"→";display:inline-block;transition:transform .3s ease}
.ikag-wl-button:hover::after{transform:translateX(8px)}
.ikag-wl-picture{width:100%;height:auto;display:block;border-radius:24px}
/* ikag-auto-img: picture fills its half of the card when the card grows with its text */
@media (min-width:1024px){#services-section-vt.ikag-auto .service-card > div > div:last-child,#services-section-vt.ikag-auto .service-card-last > div > div:last-child{height:auto!important;align-self:stretch}#services-section-vt.ikag-auto .service-card > div > div:last-child > div,#services-section-vt.ikag-auto .service-card-last > div > div:last-child > div{position:absolute!important;inset:0;height:auto!important;padding:0!important}}
.ikag-service-copy:is(p),.ikag-service-copy :is(p,li),.ikag-qa :is(p,li,h3),section#services > div > p{text-wrap:pretty}
.grid.lg\:grid-cols-3 > .col-span-1:first-child :is(h2,h3){text-wrap:balance}
#services-section-vt.ikag-auto .service-card-last{margin-bottom:0!important}section.services-section:has(#services-section-vt.ikag-auto){padding-bottom:0!important}

#hero-screen .ikag-wl-hero{max-width:1240px}

/* Home hero: thin orange ticker across the top */
.ikag-ticker{position:absolute;top:0;left:0;right:0;height:26px;z-index:40;display:flex;align-items:center;overflow:hidden;background:#f15807;color:#fff;font-size:13px;font-weight:500;letter-spacing:.02em;pointer-events:none}
.ikag-ticker-track{display:flex;flex:none;white-space:nowrap;animation:ikag-ticker 45s linear infinite}
.ikag-ticker-group{display:flex;flex:none}
.ikag-ticker-group span{display:inline-flex;align-items:center}
.ikag-ticker-group span::after{content:"";display:inline-block;width:5px;height:5px;margin:0 22px;border-radius:50%;background:#fff;opacity:.8}
@keyframes ikag-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ikag-ticker-track{animation:none}}
@media (max-width:1023px){body:has(.ikag-ticker) :is(#button-lets,#button-menu,#logo-mini){top:22px!important}}
.late-cta > button :is(h2,p,h3,span){color:#fff!important}

/* Service cards: description sits mid-card, one button + one link in the same place on every card */
@media (min-width:1024px){#services-section-vt .lg\:mt-auto{margin-top:auto!important;margin-bottom:auto!important}}
.ikag-card-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:22px}
.ikag-card-cta .ikag-service-case-link{margin:0!important}
.ikag-card-button{display:inline-flex;align-items:center;gap:10px;background:#f15807;color:#fff;border-radius:999px;padding:12px 22px;font-size:16px;line-height:1;cursor:pointer}
.ikag-card-button::after{content:"→";display:inline-block;transition:transform .3s ease}
.ikag-card-button:hover::after{transform:translateX(6px)}

/* Phones: logo and header buttons slide away while scrolling down, come back on scroll up */
@media (max-width:1023px){
  :is(#logo-mini,#button-lets,#button-menu){transition:translate .3s ease,opacity .3s ease}
  html.ikag-hide-header :is(#logo-mini,#button-lets,#button-menu){translate:0 -160% !important;opacity:0 !important;pointer-events:none !important}
}