/* Imbrick — front page sections */
/* HERO */
.hero{height:100vh;min-height:720px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-bg-grid{position:absolute;inset:-10%;background-image:linear-gradient(rgba(244,241,234,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,234,.04) 1px,transparent 1px);background-size:80px 80px;z-index:1;will-change:transform}
.hero-bg-glow{position:absolute;width:80vw;height:80vw;border-radius:50%;background:radial-gradient(circle,rgba(255,87,34,.15) 0%,transparent 60%);top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;filter:blur(40px)}
#brick-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.hero-bracket-bg{position:absolute;font-family:var(--display);font-weight:300;color:rgba(255,87,34,.06);font-size:clamp(400px,60vw,900px);line-height:.8;pointer-events:none;z-index:1;will-change:transform}
.hero-bracket-bg.left{left:-8%;top:50%;transform:translateY(-50%)}
.hero-bracket-bg.right{right:-8%;top:50%;transform:translateY(-50%)}
.hero-content{position:relative;z-index:5;text-align:center;padding:0 24px;max-width:1400px;will-change:transform}
.hero-tag{font-family:var(--mono);font-size:var(--label);color:var(--brick);letter-spacing:var(--label-track);text-transform:uppercase;margin-bottom:32px;overflow:hidden;display:inline-block}
.hero-tag > span{display:inline-block}
/* Block, not inline-block: inside the h1 an inline box would inherit the h1's 150px line box. */
.hero h1 .hero-tag{display:block;width:fit-content;margin-inline:auto;line-height:1.4;font-weight:400}
.hero-tag .dot{display:inline-block;width:6px;height:6px;background:var(--brick);border-radius:50%;margin:0 12px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-family:var(--display);font-weight:300;font-size:clamp(56px,11vw,180px);line-height:.92;letter-spacing:-.04em;margin-bottom:40px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:inline-block}
.hero h1 .cycler{font-style:italic;color:var(--brick);position:relative;display:inline-block;min-width:5ch}
.hero h1 .cycler .char{display:inline-block}
.hero-sub{font-size:17px;color:var(--muted-2);max-width:540px;margin:0 auto 48px;line-height:1.5}
.hero-cta-row{display:flex;gap:20px;justify-content:center;align-items:center}
/* Start states of the intro timeline (home.js) — only when motion is on, so the h1 is never hidden otherwise. */
.imbrick-motion .hero-tag > span{transform:translateY(100%)}
.imbrick-motion .hero h1 .line > span{transform:translateY(110%)}
.imbrick-motion .hero-sub,.imbrick-motion .hero-cta-row{opacity:0}
.imbrick-motion .hero-corner{opacity:0;transform:translateY(10px)}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:var(--label);color:var(--muted);letter-spacing:var(--label-track);text-transform:uppercase;z-index:6;display:flex;flex-direction:column;align-items:center;gap:12px}
.scroll-hint .l{width:1px;height:40px;background:var(--brick);transform-origin:top;animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.hero-corner{position:absolute;font-family:var(--mono);font-size:var(--label);color:var(--muted);letter-spacing:var(--label-track);text-transform:uppercase;z-index:5}
.hero-corner.tl{top:100px;left:48px}
.hero-corner.tr{top:100px;right:48px;text-align:right}
.hero-corner.bl{bottom:32px;left:48px}
.hero-corner.br{bottom:32px;right:48px;text-align:right}
.hero-corner strong{color:var(--cream);font-weight:500;display:block}

/* TICKER */
.ticker{border-bottom:1px solid var(--line);padding:28px 0;overflow:hidden;position:relative;z-index:5;background:var(--ink)}
.ticker-track{display:flex;gap:80px;white-space:nowrap;will-change:transform}
.ticker-item{font-family:var(--display);font-size:clamp(28px,4.5vw,56px);font-weight:300;color:var(--cream);flex-shrink:0}
.ticker-item.italic{font-style:italic;color:var(--brick)}
.ticker-item.outlined{color:transparent;-webkit-text-stroke:1px var(--cream)}

/* STATS */
.stats{background:var(--ink);border-top:1px solid var(--line);padding:120px 48px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1600px;margin:0 auto;border-top:1px solid var(--line-strong)}
.stat{padding:48px 24px 24px;border-right:1px solid var(--line);position:relative}
.stat:last-child{border-right:none}
.stat-num{font-family:var(--display);font-weight:300;font-size:clamp(64px,7vw,120px);line-height:1;letter-spacing:-.04em;color:var(--cream);margin-bottom:16px;display:flex;align-items:baseline;gap:4px}
.stat-num .suffix{font-size:.4em;color:var(--brick);font-style:italic}
.stat-label{font-family:var(--mono);font-size:var(--label);color:var(--muted);text-transform:uppercase;letter-spacing:var(--label-track);margin-bottom:8px}
.stat-desc{font-family:var(--sans);font-size:13px;color:var(--muted-2);line-height:1.5;max-width:220px}

/* HORIZONTAL SCROLL SERVICES */
.horizontal-scroll-section{position:relative;overflow:hidden;background:var(--cream);color:var(--ink);border-top:1px solid var(--ink-line)}
/* Light section, dark panels: the intro and the progress UI switch to ink, brick text to its on-light tone. */
.horizontal-scroll-section .section-tag{color:var(--brick-on-light)}
.horizontal-scroll-section .section-tag::before{background:var(--brick-on-light)}
.horizontal-scroll-section .h-scroll-intro .section-title em{color:var(--brick-on-light)}
/* Lights: home.js sets .is-dim until the section fills the screen, so the room brightens on the way in
 * and darkens on the way out. Every colour that differs between the two states eases together. */
.horizontal-scroll-section,.h-scroll-intro,.horizontal-scroll-section .section-tag,.horizontal-scroll-section .section-tag::before,.h-scroll-intro .section-title em,.h-scroll-hint,.h-scroll-progress,.h-scroll-progress span,.h-scroll-progress .bar{transition:background-color 1.4s ease,color 1.4s ease,border-color 1.4s ease}
.horizontal-scroll-section.is-dim{background:var(--ink);color:var(--cream);border-top-color:var(--line)}
.horizontal-scroll-section.is-dim .h-scroll-intro{background:var(--ink)}
.horizontal-scroll-section.is-dim .section-tag{color:var(--brick)}
.horizontal-scroll-section.is-dim .section-tag::before{background:var(--brick)}
.horizontal-scroll-section.is-dim .h-scroll-intro .section-title em{color:var(--brick)}
.horizontal-scroll-section.is-dim .h-scroll-hint,.horizontal-scroll-section.is-dim .h-scroll-progress{color:var(--muted)}
.horizontal-scroll-section.is-dim .h-scroll-progress .cur{color:var(--cream)}
.horizontal-scroll-section.is-dim .h-scroll-progress > span:first-child,.horizontal-scroll-section.is-dim .h-scroll-progress > span:nth-child(4){color:var(--brick)}
.horizontal-scroll-section.is-dim .h-scroll-progress .bar{background:var(--line-strong)}
.h-scroll-pin{position:relative}
.h-scroll-track{display:flex;flex-direction:column;gap:24px}
/* The intro paints the section colour itself: the splash blends onto it (multiply, below), and the track's own
 * stacking context (will-change) would keep the section background out of that blend. */
/* Stacked: the intro fills the screen (pulled up over the section's top padding, see the breakpoints below)
 * with the splash whole under the title, scrubbed by home.js here as on the track. */
.h-scroll-intro{padding-bottom:32px;background:var(--cream);display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh}
.h-scroll-intro-art{order:1;aspect-ratio:16/9;mix-blend-mode:multiply}
.h-scroll-intro-art img,.h-scroll-intro-art video{width:100%;height:100%;object-fit:contain;object-position:right center}
.h-scroll-intro .section-title{margin-bottom:32px}
.h-scroll-hint,.h-scroll-progress{display:none}
.h-scroll-hint{font-family:var(--mono);font-size:var(--label);color:var(--ink-muted);text-transform:uppercase;letter-spacing:var(--label-track);align-items:center;gap:16px}
.h-scroll-hint .arrow{width:60px;height:1px;background:var(--brick);position:relative}
.h-scroll-hint .arrow::after{content:'';position:absolute;right:0;top:50%;width:8px;height:8px;border-top:1px solid var(--brick);border-right:1px solid var(--brick);transform:translateY(-50%) rotate(45deg)}
.h-scroll-progress{position:absolute;left:0;bottom:32px;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--label);letter-spacing:var(--label-track);color:var(--ink-muted)}
.h-scroll-progress > span:first-child,.h-scroll-progress > span:nth-child(4){color:var(--brick-on-light)}
.h-scroll-progress .cur{color:var(--ink)}
.h-scroll-progress .bar{width:120px;height:1px;background:var(--ink-line);margin-left:12px;position:relative;overflow:hidden}
.h-scroll-progress .bar span{position:absolute;inset:0;background:var(--brick);transform:scaleX(0);transform-origin:left}
@media(min-width:1025px){
  .imbrick-motion .h-scroll-pin{height:100vh;width:100%;overflow:hidden;display:flex;align-items:center}
  .imbrick-motion .h-scroll-track{flex-direction:row;gap:0;height:100%;align-items:center;will-change:transform}
  .imbrick-motion .h-scroll-intro{flex-shrink:0;width:100vw;height:100%;padding:0 48px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
  .imbrick-motion .h-scroll-intro > :not(.h-scroll-intro-art){position:relative}
  /* Paint splash: shown whole (contain), its left trail fading out under the title. The clip is painted on
   * white, so the box multiplies onto the intro's cream: the white vanishes, the paint stays (the transparent
   * still multiplies the same). Mask and blend sit on one box: a masked parent would isolate the blend. */
  .imbrick-motion .h-scroll-intro-art{position:absolute;top:8vh;bottom:8vh;right:2vw;left:32%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
  .imbrick-motion .h-scroll-hint,.imbrick-motion .h-scroll-progress{display:flex}
  .imbrick-motion .service-panel{flex-shrink:0;width:80vw;height:80vh;margin-right:4vw}
}
.service-panel{padding:64px;min-height:560px;border:1px solid var(--line);background:var(--slate);color:var(--cream);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;transition:background .6s}
.service-panel:hover{background:rgba(255,87,34,.06)}
.service-panel-num{position:absolute;top:32px;right:48px;font-family:var(--mono);font-size:var(--label);color:var(--brick);letter-spacing:var(--label-track)}
.service-panel-bg-num::before{content:attr(data-num)}
.service-panel-bg-num{position:absolute;bottom:-120px;right:-40px;font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(300px,40vw,600px);color:rgba(255,87,34,.45);line-height:.8;pointer-events:none}
.service-panel-tag{font-family:var(--mono);font-size:var(--label);color:var(--brick);text-transform:uppercase;letter-spacing:var(--label-track);margin-bottom:32px}
.service-panel-title{font-family:var(--display);font-weight:300;font-size:clamp(48px,7vw,120px);line-height:.95;letter-spacing:-.03em;margin-bottom:24px;max-width:80%}
.service-panel-title em{font-style:italic;color:var(--brick)}
.service-panel-desc{font-size:17px;color:var(--muted-2);line-height:1.5;max-width:540px;margin-bottom:48px}
.service-panel-features{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:600px;margin-bottom:48px}
.service-panel-features li{font-family:var(--mono);font-size:13px;color:var(--cream);padding:12px 16px;border:1px solid var(--line);background:rgba(244,241,234,.02)}
.service-panel-features li::before{content:'+ ';color:var(--brick)}
.service-panel-cta{transition:var(--press);display:inline-flex;align-items:center;gap:16px;color:var(--cream);text-decoration:none;font-family:var(--mono);font-size:var(--label);text-transform:uppercase;letter-spacing:var(--label-track);align-self:flex-start}
.service-panel-cta .arrow-circle{width:48px;height:48px;border:1px solid var(--cream);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s}
.service-panel-cta:hover .arrow-circle{background:var(--brick);border-color:var(--brick);transform:rotate(-45deg)}
/* Fresco: a full-colour illustrated scene behind the whole panel. Its shading (.service-panel-fade, a layer of
 * its own) rises from the panel's bottom-left corner in curved contours and thins towards the right, over a
 * diagonal base that keeps the text column on near-plain slate while the subject on the right shows whole.
 * Each service frames its own subject (--art-pos, site-data.php); a shared grain ties the art styles together. */
.service-panel > div:not([class]),.service-panel > .service-panel-cta{position:relative}
.service-panel > .service-panel-art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.service-panel-art img{position:absolute;top:0;right:0%;width:112%;height:100%;object-fit:cover;object-position:var(--art-pos,center)}
.service-panel-art::after{content:'';position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.service-panel > .service-panel-fade{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(farthest-corner at 0 100%,var(--slate) 0%,rgba(20,20,20,.85) 25%,rgba(20,20,20,.35) 45%,rgba(20,20,20,0) 62%),linear-gradient(80deg,rgba(20,20,20,.94) 0%,rgba(20,20,20,.85) 35%,rgba(20,20,20,.45) 55%,rgba(20,20,20,0) 68%), linear-gradient(90deg,rgba(20,20,20,.94) 0%,rgba(20,20,20,.45) 55%,rgba(20,20,20,0) 100%)}
.service-panel.has-art .service-panel-features li{background:rgba(20,20,20,.72)}
.service-panel.has-art:hover{background:var(--slate)}
/* Horizontal track: the centred panel's scene settles in from a slight zoom (home.js toggles .is-active). */
@media(min-width:1025px){
  .imbrick-motion .service-panel > .service-panel-art{transform:scale(1.6)}
  .imbrick-motion .service-panel.is-active > .service-panel-art{transform:none}
}

/* RESPONSIVE */
@media(max-width:1024px){
  /* Stacked (the horizontal track needs more than 1024px): text spans the full width, so the scene becomes
   * a band across the top of the panel and the shading goes. */
  .h-scroll-intro{margin-top:-100px}
  .service-panel{padding:48px 32px;min-height:0}
  .service-panel-title{max-width:none}
  .service-panel-num{position:static;margin-bottom:16px}
  .service-panel > .service-panel-art{position:relative;inset:auto;order:-1;aspect-ratio:16/9;margin:-48px -32px 24px}
  .service-panel > .service-panel-fade{display:none}
  .service-panel-art img{left:0;width:100%}
  .service-panel-features{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  .hero-corner{display:none}
}
@media(max-width:640px){
  .stats-grid{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--line)}
  .hero-cta-row{flex-direction:column;gap:16px}
  .h-scroll-intro{margin-top:-80px}
  .service-panel{padding:32px 24px}
  .service-panel-title{font-size:clamp(40px,12vw,56px)}
  .service-panel > .service-panel-art{margin:-32px -24px 24px}
}