/* Every service card has the same height, regardless of column item count. */
.services-menu-columns > div { display:flex; flex-direction:column; min-width:0; }
.services-menu-columns > div > ul { flex:none; display:grid; grid-auto-rows:120px; align-content:start; }
.services-menu-columns > div > ul > li { display:flex; height:120px; min-height:0; }
.services-menu-columns > div > ul > li > a { width:100%; height:100%; min-height:0; }
/* Same outer edges as the Bar Dune content, including its 24px gutters. */
@media (min-width:768px){
 .site-header { padding-left:24px; padding-right:24px; }
 .site-header > div { max-width:1352px; }
 .site-header nav > ul { gap:clamp(8px,1.4vw,24px); }
}

/* Larger original customer logos, preserving the marquee's four equal groups. */
[data-client-logo] { width:200px; height:60px; }
main div:has(> div > [data-client-marquee]) { min-height:88px; }
@media(max-width:767px){
 [data-client-logo] { width:180px; height:54px; }
}

/* Let larger logos fit in the home mobile ribbon without vertical clipping. */
[data-hero-stats] > div:has([data-client-logo]):last-child { min-height:80px; }
@media(max-width:767px){
 [data-hero-carousel] article { width:min(340px,calc(100vw - 48px)); }
 main h1 { overflow-wrap:break-word; }
}
@media(max-width:767px){
 /* Keep the header controls outside the scrolling mobile list. */
 #mobile-nav-panel > ul { display:block; max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; }
 #mobile-nav-panel > ul > li { flex-shrink:0; margin-bottom:4px; }
 .site-header > div { overflow:clip; }
 input,select,textarea { font-size:16px; }
}
/* Use the compact menu on tablets too: seven items do not fit the desktop bar. */
@media(max-width:1023px){
 .site-header nav > ul { display:none; }
 .site-header nav > div > span { display:none; }
 .site-header button[aria-controls="mobile-nav-panel"] { display:flex; }
 #mobile-nav-panel { display:block; }
 #mobile-nav-panel > ul { display:block; max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; }
 #mobile-nav-panel > ul > li { flex-shrink:0; margin-bottom:4px; }
 .site-header > div { overflow:clip; }
}
@media(max-width:639px){
 [data-contact-card] { min-width:0; width:100%; padding:20px; gap:12px; }
 [data-contact-card] > span { overflow-wrap:anywhere; }
 [data-contact-card] > span:last-child { font-size:12px; }
}
.project-hero-video { display:block; width:100%; height:auto; max-height:75svh; background:#101818; object-fit:contain; }
@media(max-width:639px){
 [data-contact-card] { display:grid; grid-template-columns:28px minmax(0,1fr); }
 [data-contact-card] > svg { width:28px; height:28px; }
 [data-contact-card] > span:last-child { grid-column:2; margin-left:0; }
}

/* Keep each phase name intact when GSAP splits it into animated letters. */
[data-method-slide] h2 { white-space:nowrap; }

/* Original About grid, circles, typography and reveals are kept.
   Only the former award badge needs adaptation to a real portfolio project. */
.about-page [data-about-project] > a > div { padding:32px; }
.about-page [data-about-project] figure img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
@media(max-width:767px) {
 .about-page [data-about-project] > a > div { padding:24px; }
}
/* Shared button geometry: reserve the whole glyph, including its arrowhead. */
.arrow-swap { width:1.6em; min-width:1.6em; height:1.6em; flex-shrink:0; line-height:1.6; vertical-align:middle; }
.arrow-swap > span { width:100%; height:100%; line-height:1.6; text-align:center; }
.arrow-swap > span + span { top:0; }
a.page-cta { background:#c5fcfc; color:#101818; gap:10px; }
a.page-cta:hover { background:#f0f0f8; color:#101818; }
/* Equal footer rows, including links that wrap on narrow columns. */
footer section.sm\:grid-cols-3 > div > ul { display:grid; grid-auto-rows:minmax(44px,auto); gap:0; }
footer section.sm\:grid-cols-3 > div > ul > li { display:flex; align-items:center; min-height:44px; }
footer [data-footer-meta] ul { flex-wrap:wrap; justify-content:center; }
/* Real portrait fills the original rounded frame, with a small edge inset. */
[data-about-portrait] { display:block!important; aspect-ratio:auto!important; width:100%; max-width:none!important; padding:52px 8px 8px!important; }
[data-about-portrait] img { display:block; width:100%; max-width:none!important; height:auto; border-radius:12px; opacity:1; }
[data-about-project] { align-items:stretch!important; }
[data-about-project] > a { display:flex; align-items:center; }
[data-about-project] > figure { display:flex; flex-direction:column; margin:0; max-width:none; align-self:stretch; }
[data-about-project] > figure > div { position:relative; flex:1; min-height:0; }
[data-about-project] > figure img { position:absolute; inset:0; width:100%; height:100%!important; aspect-ratio:auto!important; object-fit:cover; }
[data-about-ai] { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:16px 40px; }
[data-about-ai] > p:first-child { grid-column:1/-1; }
[data-about-ai] > h2 { font-size:clamp(26px,3vw,42px); margin:0; }
[data-about-ai] > p:last-child { margin:0; align-self:center; }
[data-about-workflow] > div:nth-child(2) { align-items:stretch; }
[data-about-workflow] > div:nth-child(2) > div { min-width:0; display:flex; flex-direction:column; }
[data-about-workflow] > div:nth-child(2) > div > p:first-child { font-size:clamp(22px,2.2vw,30px); }
[data-about-workflow] > div:nth-child(2) > div > p:last-child { line-height:1.6; }
[data-service-intro] > div:first-child { align-items:stretch; }
[data-service-intro] > div:first-child > figure { height:100%; min-height:320px; aspect-ratio:auto; }
.price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.price-card { display:flex; flex-direction:column; overflow:hidden; }
.price-art { aspect-ratio:16/10; overflow:hidden; background:rgba(255,255,255,.02); }
.price-art img { width:100%; height:100%; object-fit:cover; }
.price-body { display:flex; flex:1; flex-direction:column; padding:28px; }
.price-body h3 { min-height:2.4em; }
.price-amount { font-size:clamp(26px,2.5vw,38px); line-height:1.2; margin:24px 0; }
.price-link { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:28px; line-height:1.6; }
.price-link span { flex:none; min-width:1.5em; text-align:right; }
.price-explainer { padding:40px; background:rgba(255,255,255,.02); }
[data-contact-details] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
[data-contact-details] > div { display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:28px; }
[data-contact-details] > div > a { margin-top:auto; padding-top:24px; overflow-wrap:anywhere; }
.contact-map { overflow:hidden; min-height:480px; background:#101818; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.contact-map > p,.contact-map > button { margin:16px 24px; text-align:center; }
.contact-map iframe { display:block; width:100%; height:480px; flex:none; border:0; filter:invert(.9) hue-rotate(180deg) saturate(.45); }
@media(max-width:1023px) { .price-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) {
 [data-about-ai],.price-grid,[data-contact-details] { grid-template-columns:minmax(0,1fr); }
 [data-about-project] > figure > div { aspect-ratio:3/2; }
 [data-service-intro] > div:first-child > figure { height:auto; min-height:0; aspect-ratio:4/3; }
 .price-body { padding:24px; }
 .price-body h3 { min-height:0; }
 .price-explainer { padding:24px; }
 [data-contact-details] > div { padding:24px; }
}

@media(min-width:1024px) {
 [data-service-intro] > div:first-child > figure { height:auto; min-height:0; align-self:stretch; }
}
@media(min-width:768px) {
 [data-about-story] > div:nth-child(2) { align-items:end; }
}
[data-project-preview] { object-fit:cover!important; object-position:center; }
/* Only the sequential project gallery is narrower, on desktop. */
@media(min-width:1024px) {
 [data-project-gallery] > figure { width:80%; margin-inline:auto; }
}
@media(max-width:1023px) {
 [data-works-index] [data-project-preview] { object-fit:cover!important; object-position:center; }
}
@media(max-width:767px) {
 .text-display-xl { font-size:clamp(36px,8.5vw,111px); line-height:var(--tw-leading,1); letter-spacing:var(--tw-tracking,-.04em); }
 .px-6 { padding-inline:calc(var(--spacing)*4); }
 .text-display-l { font-size:clamp(38px,6.5vw,80px); line-height:var(--tw-leading,1.05); letter-spacing:var(--tw-tracking,-.04em); }
}
[data-project-opening] img { display:block; width:100%; height:auto; object-fit:contain; }
[data-contact-details] { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:767px) { [data-contact-details] { grid-template-columns:minmax(0,1fr); } }

@media(max-width:1023px) { .service-featured-badge { display:none!important; } }
[data-contact-status] { margin-top:16px; overflow-wrap:anywhere; }
.contact-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
/* Keep the tablet/mobile menu readable above the underlying page. */
@media(max-width:1023px) {
 .site-header:has(button[aria-controls="mobile-nav-panel"][aria-expanded="true"]) > div { background:#171717; }
}

/* Portfolio media: paired phone screenshots and larger uncropped video heroes. */
.project-mobile-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,3vw,40px); align-items:start; }
.project-mobile-pair > figure { min-width:0; }
@media(min-width:1024px) {
 [data-project-gallery] > .project-mobile-pair { width:80%; margin-inline:auto; }
 [data-project-video-hero] { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
 [data-project-video-hero] > div:last-child { max-width:none; width:100%; }
}
[data-project-video-hero] .project-hero-video { max-height:none; height:auto; object-fit:contain; }
/* Final CTA titles match Chi sono on mobile, independent of page copy. */
@media(max-width:767px) {
 [data-page-cta] > h2 { font-size:clamp(28px,3.5vw,40px); line-height:1.1; letter-spacing:-.03em; font-weight:800; }
}

/* Let a vertical touch gesture continue through the decorative footer marquee. */
@media (pointer:coarse), (max-width:1023px) {
 [data-framework-marquee] { touch-action:pan-y pinch-zoom; }
}