/* Page-specific styles for page-work.php. Shared tokens/header/footer live in style.css. */
.hero{padding-top:9.6875rem;padding-bottom:4.375rem;border-bottom:1px solid var(--ink);position:relative;min-height:760px;display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:end}.hero h1{font:400 clamp(2.5rem,8.5vw,8rem)/1.03 var(--serif);max-width:1100px;margin:4.0625rem 0 1.75rem}.hero h1 em{font-style:normal;color:var(--accent)}.hero p{max-width:590px;font-size:1.125rem;line-height:1.55}.hero-aside{justify-self:end;max-width:300px;padding-left:1.125rem;border-left:1px solid var(--line);font-size:0.75rem;line-height:1.5;text-transform:uppercase;letter-spacing:.1em}.hero-44{position:absolute;right:4%;bottom:5%;font:700 11.25rem/.7 var(--display);letter-spacing:-.13em;opacity:.055;transform:rotate(-12deg)}
.marquee{overflow:hidden;background:var(--accent);border-bottom:1px solid var(--ink)}.marquee-track{display:flex;width:max-content;animation:marq 90s linear infinite}.marquee-group{display:flex;flex-shrink:0}.marquee-item{display:flex;gap:1.75rem;align-items:center;padding:1.0625rem 1.5625rem;white-space:nowrap;font:700 1.25rem/.9 var(--display);letter-spacing:-.04em}.marquee-item b{font-size:0.6875rem}@keyframes marq{to{transform:translateX(-50%)}}
.intro{padding:6.5625rem 0 4.0625rem}.intro-grid{display:grid;grid-template-columns:1fr .72fr;gap:2.5rem;align-items:end}.intro h2{font:700 clamp(2.5rem,8.7vw,7.8125rem)/1.03 var(--display);margin:1.25rem 0 0}.intro p{max-width:460px;font-size:1rem;line-height:1.55;color:#343531}.filters{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:2.375rem}.filter{border:1px solid var(--line);border-radius:999px;background:transparent;padding:0.625rem 0.9375rem;font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}.filter:hover,.filter.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.case{display:grid;grid-template-columns:1.12fr .88fr;gap:1.125rem;margin-bottom:1.125rem}.case-media{position:relative;min-height:760px;overflow:hidden;background:#f5f5f7}.case-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.case:hover .case-media img{transform:scale(1.035)}.case-info{background:var(--ink);color:var(--paper);padding:2.625rem;display:flex;flex-direction:column;justify-content:space-between}.case-num{font:700 10.625rem/.7 var(--display);letter-spacing:-.13em;color:var(--accent)}.case-info h3{font:400 clamp(2.5rem,6.5vw,6rem)/1.03 var(--serif);margin:0}.case-info p{max-width:430px;color:rgba(241,238,229,.66);line-height:1.55}.tags{display:flex;gap:0.5rem;flex-wrap:wrap}.tags span{border-bottom:1px solid rgba(241,238,229,.25);padding-bottom:0.4375rem;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.1em}
/* Apple-style bento grid: small tiles span 2 of 6 columns at the logos' 5:3 shape; .is-lg tiles span 4 columns and 2 rows, so no logo is cropped. */.grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:0.875rem;margin-top:0.875rem}.tile{position:relative;grid-column:span 2;aspect-ratio:5/3;overflow:hidden;border-radius:24px;background:#f5f5f7;isolation:isolate;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}.tile.is-lg{grid-column:span 4;grid-row:span 2;aspect-ratio:auto}.tile:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(16,17,15,.12)}.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}.tile:hover img{transform:scale(1.035)}@media(max-width:900px){.case{grid-template-columns:1fr}.case-media{min-height:520px}.case-info{min-height:560px}}
.cta{padding:7.1875rem 0;background:var(--teal);position:relative;overflow:hidden}.cta h2{font:700 clamp(2.5rem,12vw,10.9375rem)/1.03 var(--display);max-width:1050px;margin:1.125rem 0 0}.cta p{max-width:450px;font-size:1.0625rem;line-height:1.55;margin-top:2rem}.btn{display:inline-flex;align-items:center;gap:0.6875rem;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:0.875rem 1.125rem;border-radius:999px;font-size:0.6875rem;font-weight:700;margin-top:1.5625rem}.orbit{position:absolute;right:-7%;bottom:-45%;width:610px;height:610px;border:1px solid rgba(16,17,15,.2);border-radius:50%}.orbit:after{content:'44';position:absolute;inset:55px;border:1px dashed rgba(16,17,15,.22);border-radius:50%;display:grid;place-items:center;font:700 11.875rem/.8 var(--display);letter-spacing:-.1em;transform:rotate(-12deg)}
.hide{display:none!important}

/* Bento grid on smaller screens */
.portfolio-grid .tile.project-item{min-width:0}
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}
  .tile{grid-column:span 1;border-radius:18px}
  .tile.is-lg{grid-column:span 2;grid-row:auto;aspect-ratio:5/3}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr}
  .tile,.tile.is-lg{grid-column:auto;aspect-ratio:5/3}
}

/* Hero logo slider (right column): fills the full height of the headline block */
.hero-art{position:relative;z-index:1;width:100%;max-width:38rem;justify-self:end;align-self:stretch;display:flex;margin-bottom:-0.625rem}
.hero-slider{position:relative;flex:1;min-height:26rem;border-radius:1.5rem;overflow:hidden;background:#f5f5f7;border:1px solid var(--line);box-shadow:0 1.5rem 4rem rgba(16,17,15,.1)}
.hero-slides,.hero-slide{position:absolute;inset:0;margin:0}
.hero-slide{opacity:0;transform:scale(1.03);transition:opacity .8s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.hero-slide.is-active{opacity:1;transform:none}
.hero-slide::before{content:"";position:absolute;inset:-2rem;background:var(--slide-bg) center/cover no-repeat;filter:blur(2.5rem) saturate(.6);opacity:.22}
.hero-slide img{position:relative;width:100%;height:100%;object-fit:contain;display:block;transform:scale(1.4)}
.hero-slider-label{position:absolute;top:1rem;left:1rem;padding:0.5rem 0.875rem;border-radius:999px;background:rgba(241,238,229,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.hero-slider-ui{position:absolute;left:1rem;right:1rem;bottom:1rem;display:flex;justify-content:space-between;align-items:center}
.hero-dots{display:flex;gap:0.5rem;padding:0.625rem 0.75rem;border-radius:999px;background:rgba(241,238,229,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-dot{position:relative;width:0.5625rem;height:0.5625rem;padding:0;border:1px solid var(--ink);border-radius:50%;background:transparent;cursor:pointer;transition:width .3s,background .3s,border-radius .3s}
.hero-dot::after{content:"";position:absolute;inset:-0.75rem -0.25rem}
.hero-dot.is-active{width:1.5rem;border-radius:999px;background:var(--ink)}
.hero-arrows{display:flex;gap:0.5rem}
.hero-arrow{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--ink);border-radius:50%;background:rgba(241,238,229,.9);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.hero-arrow:hover,.hero-arrow:focus-visible{background:var(--ink);color:var(--paper)}
@media(max-width:900px){.hero-slide img{transform:none}.hero-art{max-width:none;justify-self:stretch;margin-bottom:0}.hero-slider{flex:none;width:100%;min-height:0;aspect-ratio:5/4}}
@media(max-width:480px){.hero-slider{aspect-ratio:1/1}.hero-slider-label{font-size:0.6875rem;top:0.75rem;left:0.75rem}.hero-slider-ui{left:0.75rem;right:0.75rem;bottom:0.75rem}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* Breathing room between the gallery and the CTA band */
section.wrap:has(> .portfolio-grid){padding-bottom:7rem}
@media(max-width:700px){section.wrap:has(> .portfolio-grid){padding-bottom:4rem}}

/* Gallery pagination + empty state */
.gallery-pagination{margin-top:3rem}
.gallery-pagination ul{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin:0;padding:0;list-style:none}
.gallery-pagination a,.gallery-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;height:2.75rem;padding:0 1rem;border:1px solid var(--line);border-radius:999px;font-size:0.8125rem;font-weight:700}
.gallery-pagination a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gallery-pagination .current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gallery-empty{padding:4rem 0 2rem;text-align:center;font-size:1.0625rem;color:#343531}

/* Lightbox (Works gallery only) */
.tile-link{display:block;width:100%;height:100%;cursor:zoom-in}
.tile-link:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.5rem;background:rgba(16,17,15,.92);opacity:0;transition:opacity .25s ease}
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}
.lightbox-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:0.875rem;max-width:min(64rem,100%);min-width:0}
.lightbox-img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:1rem;background:#f5f5f7;box-shadow:0 2rem 6rem rgba(0,0,0,.5)}
.lightbox-caption{color:var(--paper);font-size:0.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.lightbox-close,.lightbox-nav{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border:1px solid rgba(241,238,229,.35);border-radius:50%;background:rgba(241,238,229,.08);color:var(--paper);cursor:pointer;transition:background .2s,color .2s}
.lightbox-close:hover,.lightbox-nav:hover,.lightbox-close:focus-visible,.lightbox-nav:focus-visible{background:var(--paper);color:var(--ink)}
.lightbox-close{position:absolute;top:1rem;right:1rem}
.lightbox.is-single .lightbox-nav{display:none}
.lightbox-lock{overflow:hidden}
@media(max-width:700px){.lightbox{padding:1rem 0.75rem;gap:0.5rem}.lightbox-nav{position:absolute;bottom:1rem;width:2.5rem;height:2.5rem}.lightbox-prev{left:1rem}.lightbox-next{right:1rem}.lightbox-img{max-height:70vh}}

/* Short last row stretch (see arc44_27_masonry_classes) */
.tile.is-span3{grid-column:span 3}
.tile.is-center{grid-column:2 / span 4}
@media(max-width:900px){.tile.is-span3,.tile.is-center{grid-column:span 1}}
@media(max-width:560px){.tile.is-span3,.tile.is-center{grid-column:auto}}