/* ═══════════════════════════════════════════════════════════════════════
   THE ART LAYER · applied over the live AIMETECH site
   Loads after styles.css. Only opens the site up so the world shows
   through; it does not restyle anything the site already owns.
   ═══════════════════════════════════════════════════════════════════ */

#artWorld{
  position:fixed; inset:0; width:100vw; height:100vh;
  display:block; z-index:0; pointer-events:none;
}
body.no-art #artWorld{ display:none }

/* the site sits above the world */
body:not(.no-art){ background:#141210 }
.site-header, main, .site-footer, .nav-drawer, .tm-overlay{ position:relative; z-index:2 }

/* Every section keeps a thin plate of its own colour rather than going
   fully transparent. The world reads through it, but a section never
   inherits the neighbouring chapter's sky, so the site's fixed text
   colours stay legible right across a transition. */
body:not(.no-art) .products,
body:not(.no-art) .modernaise,
body:not(.no-art) .testimonial,
body:not(.no-art) .closing-cta{ background:rgba(12,11,10,0.55) }
body:not(.no-art) .site-footer{ background:rgba(12,11,10,0.78) }

/* the two surface sections keep their separation, but thinly */
body:not(.no-art) .principles,
body:not(.no-art) .ethical{
  background:rgba(26,24,22,0.58);
  backdrop-filter:blur(3px) saturate(1.05);
}

/* plates stay legible over moving grain */
body:not(.no-art) .testimonial-plate{
  background:rgba(26,24,22,0.78);
  backdrop-filter:blur(6px);
}
body:not(.no-art) .modernaise-callout{ backdrop-filter:blur(4px) }

/* the founders section is a light chapter, drawn in ink, see below */

/* ── the screenshot gallery, carried over from the concept build ── */
.artgal{ padding:var(--sp-24, 6rem) 0; position:relative; z-index:2 }
.artgal-head{ margin-bottom:2.4rem }
.artgal-head .eyebrow{ display:inline-block; margin-bottom:1rem }
.artgal-canvas{
  display:block; width:100%; height:clamp(320px,56vh,640px);
  cursor:grab; touch-action:pan-y;
}
.artgal-canvas:active{ cursor:grabbing }
.artgal-hud{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,0.14);
}
.artgal-name{ display:block; font-size:1.2rem; font-weight:600; color:var(--clr-white, #fff); letter-spacing:-.01em }
.artgal-name b{ color:#E2A653; font-weight:600 }
.artgal-cap{ font-size:.92rem; color:var(--clr-muted, #888); margin-top:.3rem; max-width:52ch }
.artgal-nav{ display:flex; align-items:center; gap:1rem; flex:none }
.artgal-nav button{
  width:40px; height:40px; border:1px solid rgba(255,255,255,0.22); color:#fff;
  background:none; cursor:pointer; display:grid; place-items:center; font-size:1rem;
  transition:background .35s ease, border-color .35s ease, color .35s ease;
}
.artgal-nav button:hover{ background:#E2A653; border-color:#E2A653; color:#fff }
.artgal-count{ font-size:.8rem; letter-spacing:.14em; color:var(--clr-muted, #888); font-variant-numeric:tabular-nums }
.artgal-count b{ color:#fff; font-weight:600 }
.artgal-dots{ display:flex; gap:6px; margin-top:1rem }
.artgal-dots i{ height:2px; flex:1; background:rgba(255,255,255,0.16) }
.artgal-dots i.is-on{ background:#E2A653 }

@media (max-width:860px){
  .artgal-hud{ flex-direction:column; align-items:flex-start; gap:1rem }
}
@media (prefers-reduced-motion:reduce){
  #artWorld{ display:none }
}

/* the two light sections open up as well. The world switches to its ink
   layer for these chapters, so the drawing lands dark on light and the
   site's black type stays fully legible. */
body:not(.no-art) .hero{ background:rgba(250,248,245,0.80) }
body:not(.no-art) .hero .hero-content{ position:relative; z-index:1 }
body:not(.no-art) .founders{ background:rgba(246,245,242,0.82) }
body:not(.no-art) .founders .founder-card,
body:not(.no-art) .founders .team-card{ backdrop-filter:blur(3px) }

/* ── round 4 (2026-09-07) ─────────────────────────────────────────────
   The hero is a full chapter: it fills the first screen and lets the
   ground grid read through a thinner plate. The italic is gone; the
   second line carries the terracotta instead. */
body:not(.no-art) .hero{
  min-height:100svh; justify-content:center;
  background:rgba(250,248,245,0.62);
}
body:not(.no-art) .hero .hero-content{ padding:var(--sp-12,3rem) 0 var(--sp-16,4rem) }
.hero-headline em, i, em, cite, address, dfn{ font-style:normal }
body:not(.no-art) .hero-headline em{ color:#C98A3A }

/* the world is a backdrop; where the copy is dense it sits behind a
   slightly deeper plate so the grain never competes with the type */
body:not(.no-art) .principles .principle-tile,
body:not(.no-art) .ethical .ethical-tile{ backdrop-filter:blur(2px) }

/* the cookie notice must not own a quarter of a phone screen */
@media (max-width:600px){
  .cookie-banner{ padding:12px 16px 14px; gap:10px; flex-direction:row; flex-wrap:wrap; align-items:center; text-align:left }
  .cookie-text{ font-size:.78rem; line-height:1.45; flex:1 1 100% }
  .cookie-actions{ flex:1 1 100%; justify-content:stretch }
  .cookie-actions .btn{ flex:1; padding:9px 10px; font-size:.7rem }
}

/* gallery: the active frame is the point, give it the room */
.artgal-canvas{ height:clamp(360px,62vh,720px) }
@media (max-width:700px){ .artgal-canvas{ height:clamp(300px,52vh,520px) } }

/* ── round 5 (2026-09-07): the design pass ─────────────────────────────
   Each chapter commits. ART chapters (hero, portfolio, screens, ethical,
   testimonial, team, cta) open up: thin plate, no hairlines, the world is
   the composition. UI chapters (principles, practice) sit on a near-solid
   plate and read as interface. */
body:not(.no-art) .principles,
body:not(.no-art) .modernaise{ background:rgba(20,18,16,0.90); backdrop-filter:none }
body:not(.no-art) .products{ background:rgba(12,11,10,0.40) }
body:not(.no-art) .ethical{ background:rgba(12,11,10,0.28); backdrop-filter:none }
body:not(.no-art) .testimonial{ background:rgba(12,11,10,0.30) }
body:not(.no-art) .closing-cta{ background:rgba(12,11,10,0.24) }
body:not(.no-art) .artgal{ background:transparent }

/* hairlines off. The world draws lines; the interface draws plates. */
body:not(.no-art) .principle-tile{ border-color:transparent; margin:0; background:rgba(255,255,255,0.045) }
body:not(.no-art) .principles-grid{ gap:6px }
body:not(.no-art) .testimonial-plate{ border-color:transparent; background:rgba(26,24,22,0.84) }
body:not(.no-art) .modernaise-callout{ background:rgba(255,255,255,0.05) }
body:not(.no-art) .founder-card{ border-color:transparent; background:rgba(255,255,255,0.55) }
body:not(.no-art) .role-card{ border-style:solid; border-color:transparent; background:rgba(0,0,0,0.045) }
body:not(.no-art) .flow-steps,
body:not(.no-art) .flow-step{ border-color:rgba(255,255,255,0.10) }

/* the brand accent lives in the interface too, not only in the sand */
body:not(.no-art) .orbit-hub{
  background:#141210; color:#fff;
  box-shadow:0 0 0 2px #C98A3A, 0 0 48px rgba(201,138,58,0.38);
}
body:not(.no-art) .orbit-hub-tag{ color:#E2A653 }
body:not(.no-art) .btn-primary{ background:#C98A3A; border-color:#C98A3A; color:#fff }
body:not(.no-art) .btn-primary:hover{ background:#E2A653; border-color:#E2A653; color:#fff }
body:not(.no-art) .hero .btn-primary{ background:#C98A3A; border-color:#C98A3A; color:#fff }
body:not(.no-art) .hero .btn-primary:hover{ background:#141210; border-color:#141210 }
body:not(.no-art) .artgal-nav button:hover{ background:#C98A3A; border-color:#C98A3A }

/* ETHICAL becomes a text chapter: one statement, four values as a list,
   the assurance dome reads through the whole thing */
body:not(.no-art) .ethical-intro h2{ font-size:clamp(2.6rem,5.2vw,4.6rem); margin-bottom:1.2rem }
body:not(.no-art) .ethical-intro p{ font-size:clamp(1.1rem,1.55vw,1.35rem); line-height:1.5; max-width:40ch; color:rgba(255,255,255,0.84) }
body:not(.no-art) .ethical-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.8rem 4rem; max-width:920px; margin-top:3.2rem;
}
body:not(.no-art) .ethical-tile{
  border:0; border-left:2px solid #C98A3A; border-radius:0; margin:0; padding:.2rem 0 .2rem 1.1rem; background:none;
}
body:not(.no-art) .ethical-tile:hover{ background:none }
@media (max-width:700px){ body:not(.no-art) .ethical-grid{ grid-template-columns:1fr; gap:1.4rem } }

/* SCREENS becomes the full-bleed chapter */
body:not(.no-art) .artgal-canvas{ width:100vw; margin-left:calc(50% - 50vw); height:clamp(420px,72vh,820px) }
@media (max-width:700px){ body:not(.no-art) .artgal-canvas{ height:clamp(320px,56vh,560px) } }

/* light chapters carry the same warmth as the dark ones */
body:not(.no-art) .hero{ background:rgba(250,245,238,0.58) }
body:not(.no-art) .founders{ background:rgba(248,243,236,0.76) }

/* no italics anywhere on /art/ */
body:not(.no-art) .founder-quote,
body:not(.no-art) .modernaise-callout p,
body:not(.no-art) .model-note{ font-style:normal }

/* one quiet caption names what the world is showing */
.art-cap{
  position:fixed; right:22px; bottom:18px; z-index:3; pointer-events:none; max-width:62vw; text-align:right;
  font-family:"Space Grotesk",sans-serif; font-size:.64rem; font-weight:500; line-height:1.4;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,0.55);
  opacity:0; transform:translateY(6px); transition:opacity .6s ease, transform .6s ease, color .6s ease;
}
.art-cap.is-on{ opacity:1; transform:none }
.art-cap.is-ink{ color:rgba(20,18,16,0.62) }
.art-cap b{ font-weight:600; color:#E2A653; margin-right:.9em }
@media (max-width:700px){ .art-cap{ display:none } }   /* no free floor on a phone */

/* the emphasised practice row: terracotta bar, not a white slab */
body:not(.no-art) .flow-compact .flow-step-emphasis,
body:not(.no-art) .flow-step-emphasis{
  background:rgba(201,138,58,0.14); box-shadow:inset 3px 0 0 #C98A3A; color:#fff;
}
body:not(.no-art) .flow-step-emphasis:hover{ background:rgba(201,138,58,0.22) }
body:not(.no-art) .flow-step-emphasis .flow-label{ color:#fff }
body:not(.no-art) .flow-step-emphasis .flow-num,
body:not(.no-art) .flow-step-emphasis .flow-cap{ color:#E2A653 }

/* one slide: no dots, no arrows */
body:not(.no-art) .carousel-controls, body:not(.no-art) .carousel-zone{ display:none }

/* ── round 6 (2026-09-07): no decorative rules; padding a notch below the
   original (120px → 96px, CTA 160px → 120px, hero 100svh → 88svh) ── */
.hero-rule, .closing-rule{ display:none }
body:not(.no-art) .hero{ min-height:88svh }
body:not(.no-art) .products,
body:not(.no-art) .principles,
body:not(.no-art) .modernaise,
body:not(.no-art) .ethical,
body:not(.no-art) .testimonial,
body:not(.no-art) .founders{ padding:var(--sp-24,96px) 0; margin-bottom:var(--sp-12,48px) }
body:not(.no-art) .modernaise,
body:not(.no-art) .testimonial,
body:not(.no-art) .founders{ margin-bottom:0 }
body:not(.no-art) .products{ padding-bottom:var(--sp-16,64px) }
body:not(.no-art) .closing-cta{ padding:var(--sp-30,120px) 0 }
body:not(.no-art) .artgal{ padding:var(--sp-20,80px) 0 }

/* fixed nav is 85px: anchors and programmatic scrolls land below it */
html{ scroll-padding-top:85px }
[data-chapter]{ scroll-margin-top:85px }