/* Garraje Creative UI v1.4: focused hero, adaptive project cards, iOS visual parity */
:root{--g-work-gap:14px;--g-card-radius:14px}
/* ---- Consistent and practical multi-column work layouts. ---- */
.g-work-v14{width:100%;min-width:0}
.g-work-v14 .g-work-layout{display:grid;grid-template-columns:repeat(var(--g-work-cols,4),minmax(0,1fr));gap:clamp(12px,1.55vw,24px);align-items:stretch}
.g-work-v14 .g-work-card,.g-work-v14 .g-work-card:nth-child(7n + 1),.g-work-v14 .g-work-card:nth-child(7n + 2){grid-column:auto;min-width:0;overflow:visible;display:flex;flex-direction:column;transform:none;opacity:1;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.g-work-v14 .g-work-card:hover{transform:translateY(-6px)}
.g-work-v14 .g-work-media,.g-work-v14 .g-work-card:nth-child(7n + 2) .g-work-media{width:100%;height:auto;aspect-ratio:1.14;min-width:0;min-height:0;max-height:none;border-radius:var(--g-card-radius);display:block;background:#e9e4de}
.g-work-v14 .g-work-card .g-work-media img{display:block;width:100%;height:100%;object-fit:cover}
.g-work-v14 .g-work-arrow{width:34px;height:34px;right:11px;bottom:11px;color:#151320}
.g-work-v14 .g-work-details{padding:13px 3px 19px;flex:1;min-width:0}
.g-work-v14 .g-work-meta{display:block;font-size:9px;letter-spacing:.07em;color:#746d6a;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.g-work-v14 .g-work-meta span{display:none}
.g-work-v14 .g-work-details>strong{font-size:clamp(17px,1.65vw,24px);letter-spacing:-.042em;line-height:1.15;margin:8px 0 10px;overflow-wrap:anywhere}
.g-work-v14 .g-work-tags{gap:5px;align-items:start}
.g-work-v14 .g-work-tags>span{font-size:9px;padding:5px 8px;line-height:1.3;white-space:nowrap;max-width:100%;text-overflow:ellipsis;overflow:hidden}
.g-work-v14 .g-work-placeholder-v13{padding:12px}
.g-work-v14 .g-work-placeholder-v13>strong{font-size:clamp(25px,2.5vw,40px);overflow-wrap:anywhere}
.g-work-v14[data-layout="compact"] .g-work-layout{gap:12px}
.g-work-v14[data-layout="compact"] .g-work-media{aspect-ratio:1.42}
.g-work-v14[data-layout="compact"] .g-work-details{padding-top:10px}
.g-work-v14[data-layout="compact"] .g-work-details>strong{font-size:clamp(17px,1.4vw,22px);margin:5px 0 8px}
.g-work-v14[data-layout="compact"] .g-work-tags>span:nth-child(n+3){display:none}
.g-work-v14[data-layout="editorial"] .g-work-layout{gap:clamp(16px,2.4vw,35px)}
.g-work-v14[data-layout="editorial"] .g-work-media{aspect-ratio:.95}
.g-work-v14[data-layout="editorial"] .g-work-details{padding-top:20px}
.g-work-v14[data-layout="editorial"] .g-work-details>strong{font-size:clamp(19px,1.95vw,30px)}
.g-work-v14 .g-work-viewall{gap:15px;margin:20px 0 0;padding:25px 0 0}
.g-work-v14 .g-industry-filters{gap:8px;margin:13px 0 30px}
.g-work-v14 .g-industry-filters button{min-height:42px;padding:10px 14px;font-size:11px;white-space:nowrap}
.g-work-v14 .g-industry-filters button:hover,.g-work-v14 .g-industry-filters button.is-active{transform:none}
.g-work-v14 .g-work-pagination{display:flex;justify-content:center;gap:8px;align-items:center;flex-wrap:wrap;margin:30px auto 10px}
.g-work-v14 .g-work-pagination:empty{display:none}
.g-work-v14 .g-work-pagination button{appearance:none;min-width:43px;min-height:43px;border:1px solid #e0d9d2;color:#17151a;background:#fff;border-radius:8px;cursor:pointer;font:600 12px 'DM Sans',sans-serif;padding:0 13px}
.g-work-v14 .g-work-pagination button[aria-current="page"]{background:#151320;color:#fff;border-color:#151320}
.g-work-v14 .g-work-pagination button:disabled{opacity:.38;cursor:not-allowed}
.g-work-v14 .g-work-pagination button:hover:not(:disabled){border-color:#f9954b}
.g-work-v14 .g-work-result-count{text-align:center;font-size:12px;color:#7e7670;margin:15px 0 0}
/* ---- Stable slider geometry: text and scene occupy separate regions. ---- */
.hero{height:auto!important;min-height:760px;min-height:min(800px,100dvh);overflow:hidden;isolation:isolate}
.hero .hero-content{height:auto;min-height:760px;min-height:min(800px,100dvh);padding-top:148px;padding-bottom:34px;display:flex;flex-direction:column;justify-content:space-between;z-index:3}
.hero .hero-copy{margin:clamp(62px,7vh,106px) 0 75px;width:min(58%,820px);max-width:820px;min-width:0;position:relative;z-index:3}
.hero #hero-heading,.hero h1{font-family:'Outfit','Avenir Next',system-ui,sans-serif;font-weight:650;font-size:clamp(54px,6.7vw,112px)!important;letter-spacing:-.072em!important;line-height:1.06!important;white-space:normal!important;max-width:100%;margin:0 0 30px;overflow:visible}
.hero .g-hero-line{display:block;white-space:normal;overflow-wrap:normal;min-height:1.06em}
.hero .hero-accent{color:#F9954B}
.hero .hero-stroke{-webkit-text-stroke:1px rgba(255,255,255,.82);color:transparent}
@supports not (-webkit-text-stroke:1px #fff){.hero .hero-stroke{color:#e6e3e0}}
.hero .g-hero-enter{animation:gHeroCleanEnter .65s cubic-bezier(.22,1,.36,1) both}
@keyframes gHeroCleanEnter{from{opacity:.18;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.hero .hero-description{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero .hero-description p{font-size:clamp(13px,1.05vw,15px);max-width:340px;line-height:1.7}
.hero .g-hero-scenes{position:absolute;top:27%;right:max(4%,calc((100vw - 1470px)/2));height:45%;width:min(36%,510px);z-index:1;opacity:1;pointer-events:none}
.hero .g-hero-scene{border-radius:15px;padding:clamp(15px,2.4vw,30px);box-shadow:0 28px 88px rgba(0,0,0,.28)}
.hero[data-scene="network"] .g-hero-scenes,.hero[data-scene="none"] .g-hero-scenes{display:none!important}
.hero[data-scene="none"] .hero-orb,.hero[data-scene="custom"] .hero-orb{display:none!important}
.hero[data-scene="custom"] .g-hero-scene-custom{opacity:1;transform:none}
.hero .g-hero-custom-photo{min-height:0;flex:1;border-radius:10px;background-color:#30242c;background-repeat:no-repeat;background-size:cover;background-position:center;margin:14px 0}
.hero[data-layout="center"] .hero-copy{text-align:center;margin-left:auto;margin-right:auto;width:min(90%,900px);max-width:900px}
.hero[data-layout="center"] .hero-description{justify-content:center}
.hero[data-layout="center"] .hero-description p{max-width:390px;text-align:left}
.hero[data-layout="center"] .g-hero-scenes{display:none!important}
.hero[data-layout="center"] .hero-orb{left:50%;transform:translateX(-50%) scale(.75);opacity:.34!important}
.hero[data-layout="minimal"] .hero-copy{width:min(100%,1120px);max-width:1120px}
.hero[data-layout="minimal"] .g-hero-scenes{display:none!important}
.hero[data-layout="minimal"] .hero h1{max-width:1020px}
.hero .hero-stage-meta{z-index:3;flex:none;margin-top:auto;margin-bottom:4px}
.hero .hero-slide-controls{width:min(580px,100%);max-width:100%;min-height:51px;display:flex;align-items:center;gap:14px}
.hero .slide-copy{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:10px;white-space:nowrap}
.hero .slide-buttons{display:flex;gap:9px}
.hero .slide-buttons button{width:36px;height:36px;display:grid;place-items:center}
.hero .hero-slider-bar{height:2px}
.hero .hero-slider-bar i{width:100%;height:2px;transform-origin:left;transform:scaleX(0);animation:none}
@keyframes gHeroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .g-ui-icon{width:17px;height:17px;display:block;flex:none}
.g-ui-icon{display:inline-block;width:18px;height:18px;vertical-align:middle;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.g-work-arrow .g-ui-icon,.arrow-round .g-ui-icon,.service-link-arrow .g-ui-icon,.g-film-cta-icon .g-ui-icon{height:19px;width:19px}
.service-symbol .g-ui-icon{width:clamp(49px,5vw,74px);height:clamp(49px,5vw,74px);stroke-width:1.35}
/* ---- iOS Safari: readable/visible UI before any JS animation can run. ---- */
html.g-ios .reveal,html.g-ios .g-work-card,html.g-ios .g-blog-card,html.g-ios .g-service-showcase{opacity:1!important;transform:none!important;filter:none!important}
html.g-ios .service-symbol,html.g-ios .g-work-arrow,html.g-ios .arrow-round{font-family:system-ui,sans-serif}
html.g-ios .g-work-layout,html.g-ios .g-partners-showcase,html.g-ios .g-hero-scenes{-webkit-transform:translateZ(0);transform:translateZ(0)}
.hero .hero-video{pointer-events:none}
@media(max-width:1190px){
 .hero .hero-copy{width:58%}
 .hero #hero-heading,.hero h1{font-size:clamp(48px,7.3vw,88px)!important}
 .hero .g-hero-scenes{width:35%;right:2%;top:29%;height:38%}
 .g-work-v14 .g-work-details>strong{font-size:clamp(17px,1.85vw,23px)}
}
@media(max-width:980px){
 .g-work-v14 .g-work-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero .hero-content{min-height:710px;padding-top:126px}
 .hero{min-height:710px}
 .hero .hero-copy{width:59%;margin:75px 0 58px}
 .hero #hero-heading,.hero h1{font-size:clamp(46px,7vw,70px)!important}
 .hero .g-hero-scenes{right:2%;width:34%;height:34%;top:33%}
 .hero .hero-description{gap:16px}
 .hero .hero-description p{max-width:350px}
}
@media(max-width:740px){
 .hero,.hero .hero-content{height:auto!important;min-height:740px;min-height:100dvh}
 .hero .hero-content{padding-top:113px;padding-bottom:28px}
 .hero .hero-topline{max-width:100%;font-size:9px}
 .hero .hero-copy{width:100%;max-width:100%;margin:clamp(52px,9vh,96px) 0 46px}
 .hero #hero-heading,.hero h1{font-size:clamp(49px,11.8vw,78px)!important;line-height:1.06!important;letter-spacing:-.07em!important;margin:0 0 23px}
 .hero .hero-kicker{font-size:9px;line-height:1.6;letter-spacing:.1em}
 .hero .hero-description{display:flex;flex-direction:column;align-items:flex-start;gap:21px}
 .hero .hero-description p{font-size:13px;max-width:400px}
 .hero .g-hero-scenes{display:none!important}
 .hero[data-mobile-scene="1"] .g-hero-scenes{display:block!important;opacity:.12;right:-13%;top:42%;width:65%;height:27%;z-index:0}
 .hero .hero-orb{width:84vw;left:35%;top:22%;opacity:.24!important;max-width:550px}
 .hero[data-layout="center"] .hero-copy{text-align:left;width:100%;max-width:100%}
 .hero[data-layout="center"] .hero-description{justify-content:flex-start}
 .hero[data-layout="center"] .hero-description p{text-align:left}
 .hero .hero-stage-meta{display:block;width:100%;margin-bottom:0}
 .hero .hero-slide-controls{width:100%;max-width:100%;padding-top:13px;min-height:52px;gap:10px}
 .hero .slide-copy{font-size:9px;letter-spacing:.07em}
 .hero .slide-buttons button{width:36px;height:36px}
 .hero .hero-down{display:none}
 .g-work-v14 .g-work-layout{grid-template-columns:repeat(var(--g-work-mobile-cols,1),minmax(0,1fr))}
 .g-work-v14 .g-work-media{aspect-ratio:1.18}
 .g-work-v14[data-layout="editorial"] .g-work-media{aspect-ratio:1.04}
 .g-work-v14 .g-work-details>strong{font-size:clamp(19px,4vw,25px)}
 .g-work-v14 .g-industry-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 0 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
 .g-work-v14 .g-industry-filters button{scroll-snap-align:start;flex:none;min-height:44px}
 .g-work-v14 .g-work-pagination{gap:5px}
 .g-work-v14 .g-work-pagination button{min-width:41px;min-height:42px;padding:0 10px}
 .g-work-v14 .g-work-viewall{align-items:flex-start;flex-direction:column}
}
@media(max-width:390px){
 .hero .hero-content{padding-top:100px}
 .hero .hero-copy{margin-top:62px;margin-bottom:30px}
 .hero #hero-heading,.hero h1{font-size:clamp(43px,11.4vw,53px)!important}
 .hero .hero-description p{font-size:12px;line-height:1.6}
 .hero .hero-slide-controls{flex-wrap:wrap}
 .hero .slide-copy{flex:1 1 47%}
 .g-work-v14 .g-work-tags>span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .hero .g-hero-enter,.hero .hero-slider-bar i{animation:none!important;transform:none!important;opacity:1!important}
 .g-work-v14 .g-work-card:hover{transform:none}
}

/* Safari/WebKit defensive fallbacks: no externally loaded icon font required. */
@supports (-webkit-touch-callout: none) {
  .g-ui-icon{display:inline-block!important;visibility:visible!important;opacity:1!important;-webkit-transform:translateZ(0);transform:translateZ(0)}
  .hero #hero-heading{-webkit-font-smoothing:antialiased;word-break:normal}
  .g-work-v14 .g-work-card{opacity:1!important;transform:none!important}
  .g-work-v14 .g-work-layout{width:100%;min-width:0}
  .g-film-video,.hero-video{object-fit:cover;-webkit-transform:translateZ(0)}
  .g-work-v14 .g-work-media img{-webkit-transform:translateZ(0)}
}