/*!
 * Ace Media - Phase 1 uplift layer (v2).
 * Loaded AFTER style.css. Concept: NOT a conventional dark mode - a "fresh & funky"
 * brand palette that switches between BLUE (#336699), ORANGE (#f39510), black & white.
 * Default = blue-dominant with light text; the "light" toggle falls back to the original
 * white/black/orange stylesheet (dark rules are gated on html:not([data-theme="light"])).
 * No tickers, no emoji/glyph decoration. Honours prefers-reduced-motion throughout.
 *
 * Adds: blue-funky palette + animated theme toggle, branded loading screen,
 * glitch/pixel headings, animated blue→orange gradient section bars, scroll progress,
 * richer scroll-reveal.
 */

/* ================================================================ palette */
:root {
  /* brand */
  --ace-blue:      #336699;
  --ace-blue-deep: #294f78;
  --ace-blue-ink:  #10233a;   /* the near-black */
  --ace-orange:    #f39510;
  --ace-white:     #ffffff;

  /* default = BLUE-dominant funky theme */
  --ace-bg:        #336699;
  --ace-text:      #ffffff;
  --ace-muted:     #cfe0f2;
  --ace-surface:   #2e5b88;   /* card on blue */
  --ace-surface-2: #26507a;   /* chip / control */
  --ace-border:    rgba(255,255,255,.16);
  --ace-heading:   #ffffff;
  --ace-loader-bg: #336699;
}
html[data-theme="light"] {
  --ace-bg:        #ffffff;
  --ace-text:      #0b1a2b;
  --ace-muted:     #5c6b80;
  --ace-surface:   #ffffff;
  --ace-surface-2: #f2f5f9;
  --ace-border:    #eaedf2;
  --ace-heading:   #336699;
  --ace-loader-bg: #336699;   /* loader stays on-brand blue in both modes */
}

/* smooth cross-fade fallback for browsers without the View Transitions API */
html.theme-transition, html.theme-transition * {
  transition: background-color .45s ease, color .45s ease,
              border-color .45s ease, box-shadow .45s ease !important;
}

/* ==================================== BLUE-FUNKY overrides (default theme) */
/* only when NOT explicitly light - light mode falls back to the original design */
html:not([data-theme="light"])            { background: var(--ace-blue); }
html:not([data-theme="light"]) body       { background: var(--ace-blue); color: var(--ace-text); }

/* Section rhythm: hero(blue) → about-intro(ORANGE, untouched) → services(blue) →
   projects(dark ink) → experiments(WHITE) → footer(blue). Funky blue/orange/black/white. */

/* projects - dark "ink" band with blue cards */
html:not([data-theme="light"]) section.news              { background: var(--ace-blue-ink); }
html:not([data-theme="light"]) section.news h2           { color: #fff !important; }
html:not([data-theme="light"]) section.news ul li a {
  background: var(--ace-surface);
  border-color: var(--ace-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
}
html:not([data-theme="light"]) section.news ul li a strong { color: #fff; }
html:not([data-theme="light"]) section.news ul li a span   { color: var(--ace-muted); }
html:not([data-theme="light"]) section.news ul li a span i { background: var(--ace-surface-2); color: #dbe8f6; }
html:not([data-theme="light"]) section.news ul li a:not(.old-project):hover {
  box-shadow: 0 16px 40px rgba(0,0,0,.42);
}
html:not([data-theme="light"]) section.news ul li a:not(.old-project):hover strong { color: var(--ace-orange); }

/* projects filter / sort controls on the dark band */
html:not([data-theme="light"]) .proj-filter { background: var(--ace-surface); border-color: var(--ace-border); color: #fff; }
html:not([data-theme="light"]) .proj-filter:hover { border-color: var(--ace-orange); color: var(--ace-orange); }
html:not([data-theme="light"]) .proj-filter.is-active { background: var(--ace-orange); border-color: var(--ace-orange); color: var(--ace-blue-ink); }
html:not([data-theme="light"]) .proj-sort { color: var(--ace-muted); }
html:not([data-theme="light"]) .proj-sort select { background-color: var(--ace-surface); border-color: var(--ace-border); color: #fff; }

/* experiments - dark "ink" band in dark mode (white repo cards keep their contrast) */
html:not([data-theme="light"]) section.experiments { background: var(--ace-blue-ink); }
html:not([data-theme="light"]) section.experiments > .wrap > h2 { color: #fff; }
html:not([data-theme="light"]) section.experiments > .wrap > p  { color: var(--ace-muted); }
html:not([data-theme="light"]) section.experiments > .wrap > p a { color: var(--ace-orange); border-color: rgba(243,149,16,.4); }

/* ============================================ chunky display headings */
h1, .h1, h2, .h2,
section.news h2, section.about h2, section.experiments h2,
section#slideshow h2, .hellobubble {
  font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
  letter-spacing: -.01em;
}
section.news h2, section.about h2, section.experiments h2 {
  font-weight: 800;
  letter-spacing: -.02em;
}

/* (inter-section gradient bars removed - only the top scroll-progress bar remains) */

/* ================================================= glitch / pixel text */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  overflow: hidden; pointer-events: none; opacity: .9;
  clip-path: inset(0 0 100% 0);
}
.glitch.glitching::before {
  color: var(--ace-orange); text-shadow: -2px 0 var(--ace-orange);
  animation: ace-glitch-1 .7s steps(2, end) 1;
}
.glitch.glitching::after {
  color: #6fd3ff; text-shadow: 2px 0 #6fd3ff;
  animation: ace-glitch-2 .7s steps(2, end) 1;
}
.glitch:hover::before { color: var(--ace-orange); text-shadow: -2px 0 var(--ace-orange); animation: ace-glitch-1 .5s steps(2,end) infinite; }
.glitch:hover::after  { color: #6fd3ff; text-shadow: 2px 0 #6fd3ff; animation: ace-glitch-2 .5s steps(2,end) infinite; }

@keyframes ace-glitch-1 {
  0%   { clip-path: inset(0 0 88% 0);   transform: translate(-5px,-1px); }
  14%  { clip-path: inset(18% 0 58% 0); transform: translate(5px,1px); }
  28%  { clip-path: inset(44% 0 36% 0); transform: translate(-6px,0); }
  42%  { clip-path: inset(66% 0 12% 0); transform: translate(4px,-1px); }
  56%  { clip-path: inset(8% 0 80% 0);  transform: translate(-4px,1px); }
  70%  { clip-path: inset(34% 0 48% 0); transform: translate(6px,0); }
  84%  { clip-path: inset(72% 0 8% 0);  transform: translate(-3px,-1px); }
  100% { clip-path: inset(0 0 100% 0);  transform: none; }
}
@keyframes ace-glitch-2 {
  0%   { clip-path: inset(82% 0 4% 0);  transform: translate(5px,1px); }
  14%  { clip-path: inset(52% 0 28% 0); transform: translate(-5px,-1px); }
  28%  { clip-path: inset(24% 0 54% 0); transform: translate(6px,1px); }
  42%  { clip-path: inset(60% 0 18% 0); transform: translate(-4px,0); }
  56%  { clip-path: inset(38% 0 42% 0); transform: translate(4px,-1px); }
  70%  { clip-path: inset(12% 0 74% 0); transform: translate(-6px,1px); }
  84%  { clip-path: inset(48% 0 30% 0); transform: translate(3px,0); }
  100% { clip-path: inset(100% 0 0 0);  transform: none; }
}
@keyframes ace-bar-slide { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* ==================================================== scroll progress */
#ace-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 100002; pointer-events: none;
  background: linear-gradient(90deg, var(--ace-blue) 0%, var(--ace-orange) 100%);
  box-shadow: 0 0 10px rgba(243,149,16,.55);
  transition: width .08s linear;
}

/* ==================================================== theme toggle btn */
#ace-theme-toggle {
  position: fixed; left: clamp(10px,1.6vw,20px); bottom: clamp(10px,1.6vw,20px);
  width: 46px; height: 46px; border-radius: 50%;
  z-index: 100001; cursor: pointer;
  display: grid; place-items: center;
  background: var(--ace-surface); color: var(--ace-text);
  border: 1px solid var(--ace-border);
  box-shadow: 0 6px 22px rgba(0,0,0,.30);
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
#ace-theme-toggle:hover { transform: translateY(-2px) rotate(-12deg); color: var(--ace-orange); }
#ace-theme-toggle svg { width: 22px; height: 22px; display: block; }
#ace-theme-toggle .ace-icon-sun  { display: none; }
#ace-theme-toggle .ace-icon-moon { display: block; }
html[data-theme="light"] #ace-theme-toggle .ace-icon-sun  { display: block; }
html[data-theme="light"] #ace-theme-toggle .ace-icon-moon { display: none; }

/* (loading screen removed - the header logo is persistently glitchy instead) */

/* ============================================= extra scroll-reveal bits */
html.anim-ready .ace-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
html.anim-ready .ace-reveal.in { opacity: 1; transform: none; }

/* ============================================ SVG logo mark (header/hover) */
#logo a {
  background-image: none !important; text-indent: 0 !important;
  width: auto; height: 50px; overflow: visible; display: flex; align-items: center;
}
#logo .ace-logo {
  height: 40px; width: auto; display: block; color: #fff; fill: currentColor;
  animation: ace-glitch-idle 4.5s steps(1, end) infinite;   /* persistently glitchy - periodic bursts */
}
#logo a:hover .ace-logo { animation: ace-svg-glitch .45s steps(2, end) infinite; }   /* more glitchy on hover */

/* header-logo idle glitch: calm, then a quick burst near the end of each cycle */
@keyframes ace-glitch-idle {
  0%, 90%, 100% { transform: none; filter: none; clip-path: none; }
  91% { transform: translate(-2px, 1px);  filter: drop-shadow(2px 0 var(--ace-orange)) drop-shadow(-2px 0 #7fd0ff); }
  94% { transform: translate(2px, -1px);  clip-path: inset(20% 0 42% 0); }
  97% { transform: translate(-1px, 0);    filter: drop-shadow(-2px 0 var(--ace-orange)) drop-shadow(2px 0 #7fd0ff); }
  99% { transform: translate(1px, 1px);   clip-path: inset(52% 0 12% 0); }
}

/* reusable RGB-split glitch for the solid logo mark */
@keyframes ace-svg-glitch {
  0%, 100% { transform: none; filter: none; clip-path: none; }
  15% { transform: translate(-2px,1px);  filter: drop-shadow(2px 0 var(--ace-orange)) drop-shadow(-2px 0 #7fd0ff); }
  30% { transform: translate(2px,-1px);  clip-path: inset(18% 0 42% 0); }
  45% { transform: translate(-1px,0);    filter: drop-shadow(-2px 0 var(--ace-orange)) drop-shadow(2px 0 #7fd0ff); }
  60% { transform: translate(1px,1px);   clip-path: inset(55% 0 12% 0); }
  75% { transform: translate(-1px,-1px); filter: drop-shadow(1px 0 #7fd0ff) drop-shadow(-1px 0 var(--ace-orange)); }
}

/* (Ace-logo background/watermark images removed) */
.footer { position: relative; }

/* ==================================================== creative galleries */
section.ace-gallery-sec { padding: 4em 0; position: relative; z-index: 10; color: #fff; }
section#design-motion { background: #336699; }   /* blue band */
section#photography   { background: var(--ace-blue-ink); }  /* black band */
section.ace-gallery-sec > .wrap { max-width: 1180px !important; margin: 0 auto; }
section.ace-gallery-sec > .wrap > h2 { font-size: 42px; font-weight: 800; text-align: center; margin: 0 0 .3em; color: #fff; }
section.ace-gallery-sec > .wrap > p  { text-align: center; max-width: 740px; margin: 0 auto 2em; color: var(--ace-muted); }
section.ace-gallery-sec > .wrap > p a { color: var(--ace-orange); text-decoration: none; border-bottom: 2px solid rgba(243,149,16,.4); }
.ace-gallery { column-width: 250px; column-gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ace-gallery li { break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 1rem; }
.ace-gallery a {
  display: block; position: relative; border-radius: 12px; overflow: hidden;
  background: rgba(0,0,0,.25); box-shadow: 0 10px 28px rgba(0,0,0,.35);
  border: 1px solid var(--ace-border);
}
.ace-gallery img { display: block; width: 100%; height: auto; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.ace-gallery a:hover img { transform: scale(1.06); }
.ace-gallery .ace-cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 1.6em .85em .7em; font-weight: 800; font-size: .95rem; color: #fff;
  background: linear-gradient(transparent, rgba(6,14,24,.82));
  transform: translateY(10px); opacity: 0; transition: opacity .3s ease, transform .3s ease;
}
.ace-gallery a:hover .ace-cap, .ace-gallery a:focus-visible .ace-cap { opacity: 1; transform: none; }
.ace-gallery .ace-badge {
  position: absolute; top: .6em; right: .6em; z-index: 2;
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 50px; background: var(--ace-orange); color: var(--ace-blue-ink);
}

/* lightbox */
#ace-lightbox {
  position: fixed; inset: 0; z-index: 100020; display: flex; align-items: center; justify-content: center;
  padding: 5vh 5vw; background: rgba(8,14,22,.94); opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
#ace-lightbox.open { opacity: 1; visibility: visible; }
#ace-lightbox figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
#ace-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
#ace-lightbox figcaption { margin-top: .8em; color: #fff; font-weight: 800; }
#ace-lightbox figcaption a { color: var(--ace-orange); font-weight: 400; margin-left: .6em; font-size: .9em; }
#ace-lightbox .ace-lb-btn {
  position: absolute; background: rgba(255,255,255,.08); border: 1px solid var(--ace-border);
  color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 20px;
  display: grid; place-items: center; transition: background .2s ease, transform .2s ease;
}
#ace-lightbox .ace-lb-btn:hover { background: var(--ace-orange); color: var(--ace-blue-ink); }
#ace-lightbox .ace-lb-close { top: 18px; right: 20px; }
#ace-lightbox .ace-lb-prev  { left: 16px; top: 50%; transform: translateY(-50%); }
#ace-lightbox .ace-lb-next  { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) { #ace-lightbox .ace-lb-prev, #ace-lightbox .ace-lb-next { display: none; } }

/* ===================================== interactive matrix / glitch section backgrounds */
.ace-matrix { position: relative; overflow: hidden; isolation: isolate; }
.ace-matrix > .ace-matrix-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .28; }
.ace-matrix > .wrap { position: relative; z-index: 2; }

.ace-gallery video { display: block; width: 100%; height: auto; }

/* ============================ wider wide-wrapper + full-bleed galleries */
@media (min-width: 1030px) { .wrap { max-width: 1360px; } }   /* ~250px wider (narrow text wraps keep their own max-width) */
section.ace-gallery-sec > .wrap {
  position: relative; z-index: 2;
  max-width: none !important; width: 100%;                    /* galleries break out to the viewport edges */
  padding-left: clamp(14px, 3vw, 46px); padding-right: clamp(14px, 3vw, 46px);
}
section.ace-gallery-sec > .wrap > h2,
section.ace-gallery-sec > .wrap > p { max-width: 780px; margin-left: auto; margin-right: auto; }
.ace-gallery { column-width: 260px; }                        /* more columns as the section widens */

/* PageSpeed: skip rendering the big offscreen galleries until scrolled near (huge paint/layout saving) */
section#design-motion, section#photography, section.experiments {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1400px;
}

/* ============= single geomorphic canvas: hero at top, docks bottom-right on scroll */
#hero-geo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 1;   /* over the fluid splatter, below the headline */
  transition: opacity .35s ease;
}
#geo-widget { transition: opacity .35s ease; }   /* corner shape fades in once the intro has scrolled away */
#hero-geo.docked {
  position: fixed; inset: auto; top: auto; left: auto;
  right: clamp(8px, 1.5vw, 22px); bottom: clamp(8px, 1.5vw, 22px);
  width: clamp(150px, 18vw, 230px); height: clamp(150px, 18vw, 230px);
  z-index: 60;
}
@media (max-width: 520px) { #hero-geo.docked { width: 112px; height: 112px; } }

/* ===================================================== footer redesign */
.footer { text-align: left; padding: 46px 0 clamp(70px, 9vw, 104px); }  /* bottom room so fixed corner widgets don't cover text */
.footer .ace-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.4rem 2.5rem;
}
.ace-foot-brand { display: flex; align-items: center; gap: 1rem; max-width: 430px; }
.ace-foot-logo { display: inline-flex; }
.ace-foot-logo .ace-logo { height: 44px; width: auto; color: #fff; fill: currentColor; }
.ace-foot-tag { margin: 0; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.5; }
.ace-foot-nav { display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; }
.ace-foot-nav a { color: #fff; text-decoration: none; font-weight: 800; opacity: .85; border-bottom: 0; }
.ace-foot-nav a:hover { color: var(--ace-orange); opacity: 1; border-bottom: 0; }
.footer #socialFooter { margin: 0 !important; }
.footer #socialFooter li { margin: 0 14px 0 0 !important; }
.footer #socialFooter a { color: #fff; border-bottom: 0; opacity: .8; }
.footer #socialFooter a:hover { color: var(--ace-orange); opacity: 1; }
.ace-foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem;
  border-top: 1px solid rgba(255,255,255,.18); margin-top: 1.6rem; padding-top: 1.2rem;
  font-size: .85rem;
}
.ace-foot-base p { margin: 0; color: rgba(255,255,255,.82); }
.ace-foot-base a { color: var(--ace-orange); border-bottom: 0; }
@media (max-width: 700px) {
  .footer .ace-footer { flex-direction: column; align-items: flex-start; }
  .ace-foot-base { flex-direction: column; }
}

/* fade the docked geomorphic shape out over the footer so it never overlaps footer text */
#hero-geo.geo-atfooter { opacity: 0 !important; }

/* lightbox video / 3D embeds */
#ace-lightbox iframe {
  width: min(90vw, 1180px); aspect-ratio: 16 / 9; max-height: 82vh;
  border: 0; border-radius: 10px; background: #000; box-shadow: 0 24px 70px rgba(0,0,0,.6);
}

/* ===================================================== about: portrait + 2-col text */
section.about.firstText .wrap { max-width: 1060px !important; }   /* room for portrait + two text columns */
section.about.firstText .about-cols {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 2.5rem;
}
section.about.firstText .about-cols > ul {
  float: none !important; margin: 0 !important;
  flex: 0 0 clamp(160px, 22%, 230px); max-width: 230px;
}
section.about.firstText .about-copy {
  flex: 1 1 460px; min-width: 300px; text-align: left;
  column-count: 2; column-gap: 2.5rem;           /* the copy runs in two columns */
}
section.about.firstText .about-copy p { margin-top: 0; break-inside: avoid; }
/* the two headings + intro sit with the copy (not above the photo) and span both columns */
section.about.firstText .about-copy > h2,
section.about.firstText .about-copy > .about-sub,
section.about.firstText .about-copy > p:first-of-type { column-span: all; }
section.about.firstText .about-copy > h2 { margin: 0 0 .04em; font-size: 2em; line-height: 1.08; }
section.about.firstText .about-copy > .about-sub { margin: 0 0 .7em; font-size: 1.2em; font-weight: 800; color: #1a3a5f; }
section.about.firstText .about-copy > p:first-of-type { margin-bottom: 1.1em; }
@media (max-width: 760px) {
  section.about.firstText .about-cols { display: block; }
  section.about.firstText .about-cols > ul { margin: 0 auto 1.4em !important; }
  section.about.firstText .about-copy { column-count: 1; }
}

/* center the hero copy WITHOUT a transform - transform creates a stacking context that
   breaks the headline's mix-blend-mode on desktop (mobile has no transform, so it worked) */
@media (min-width: 768px) {
  section#slideshow .wrap {
    top: 0 !important; bottom: 0 !important; transform: none !important;
    height: -webkit-fit-content; height: fit-content; margin-top: auto; margin-bottom: auto;
  }
}

/* all section titles centered (the hero headline stays left) */
section:not(#slideshow) > .wrap > h2 { text-align: center !important; }
/* JS sizes these to fit their wrapper width (font-size set inline); keep on one line, allow full width */
.ace-fit { white-space: nowrap; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; line-height: 1 !important; }
/* section descriptions: JS scales font-size so they fill the full wrapper width across their current lines */
.ace-fit-p { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: justify !important; }

/* ===================================================== contact CTA (finish) */
section.cta { background: #336699; color: #fff; padding: clamp(3.5em, 7vw, 5.5em) 0; text-align: center; }
section.cta > .wrap { max-width: 760px; }
section.cta h2 {
  color: #fff !important; font-weight: 800; margin: 0 0 .45em;
  font-size: clamp(30px, 4vw, 44px); font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
}
section.cta p { color: rgba(255,255,255,.92); font-size: 1.1em; margin: 0 auto 1em; }
section.cta p a { color: var(--ace-orange); }
.cta-email {
  display: inline-block; margin: .4em 0 1.2em; padding: .65em 1.5em; border-radius: 50px;
  background: var(--ace-orange); color: var(--ace-blue-ink) !important; font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta-email:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.cta-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; list-style: none; margin: .4em 0 0; padding: 0; }
.cta-social li { margin: 0; }
.cta-social a { color: #fff; opacity: .85; transition: color .2s ease, transform .2s ease; }
.cta-social a:hover { color: var(--ace-orange); opacity: 1; transform: translateY(-2px); }

/* ============================= full-bleed safety + widest header wrapper */
body { overflow-x: hidden; }
section { width: 100%; }
/* header wrapper spans the full viewport width (widest of all wrappers) */
.header .wrap {
  max-width: none !important; width: auto !important; margin: 0 !important;
  padding-left: clamp(16px, 3vw, 48px) !important; padding-right: clamp(16px, 3vw, 48px) !important;
}

/* Hero intro + header text: not selectable/highlightable, but still clickable
   (user-select:none does not block pointer events, so header links keep working) */
section#slideshow .wrap, .header {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

/* ===================================================== FAQ (content + schema) */
section.faq { background: var(--ace-blue-ink); color: #fff; padding: 4em 0; position: relative; z-index: 10; }
section.faq > .wrap { max-width: 900px; }
section.faq .faq-list { display: grid; gap: 1.3rem; margin-top: 1.6em; text-align: left; }
section.faq .faq-item h3 { margin: 0 0 .3em; font-size: 1.2rem; font-weight: 800; color: var(--ace-orange); }
section.faq .faq-item p { margin: 0; color: var(--ace-muted); line-height: 1.6; }
.ace-foot-addr { flex: 1 0 100%; margin: 0 0 .4rem !important; color: rgba(255,255,255,.8); font-size: .85rem; }

/* ============= LIGHT MODE: flip the dark "funky" sections light (obvious toggle) + contrast ============= */
html[data-theme="light"] section#design-motion { background: #e9eff7; }
html[data-theme="light"] section#photography   { background: #ffffff; }
html[data-theme="light"] section.faq           { background: #f4f7fb; color: #10233a; }
html[data-theme="light"] section.ace-gallery-sec { color: #10233a; }
html[data-theme="light"] section.ace-gallery-sec > .wrap > h2 { color: #10233a; }
html[data-theme="light"] section.ace-gallery-sec > .wrap > p  { color: #46566a; }
html[data-theme="light"] section.ace-gallery-sec > .wrap > p a,
html[data-theme="light"] section.faq .faq-item h3 { color: #b5620a; }   /* darker orange = readable on light */
html[data-theme="light"] section.faq .faq-item p  { color: #46566a; }

/* services: legacy forces a blue band + white text in BOTH modes — flip it light in light mode */
html[data-theme="light"] section#services            { background: #eef3f9; }
html[data-theme="light"] section#services *          { color: #0b1a2b; }
html[data-theme="light"] section#services > .wrap > h2 { color: #336699; }
html[data-theme="light"] section#services ul.serviceList li {
  background: #ffffff; box-shadow: 0 6px 20px rgba(20,40,70,.07);
}
html[data-theme="light"] section#services ul.serviceList li:hover { background: #ffffff; box-shadow: 0 14px 34px rgba(20,40,70,.16); }
html[data-theme="light"] section#services ul.serviceList li h3 { color: #1f3a5f; }
html[data-theme="light"] section#services ul.serviceList li:hover h3 { color: #f39510; }
html[data-theme="light"] section#services ul.serviceList li p strong { color: #b5620a !important; }

/* keep the matrix rain subtle so light-mode sections stay genuinely light */
html[data-theme="light"] .ace-matrix > .ace-matrix-canvas { opacity: .12; }

/* services: even 2-col grid that fills the wrapper so the cards line up with the
   description above (legacy used width:48% + margin:0 auto, which left an outer gap) */
section#services ul.serviceList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
  align-items: start;
  margin-top: 1.4em;
}
section#services ul.serviceList li {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
@media (max-width: 720px) {
  section#services ul.serviceList { grid-template-columns: 1fr; }
}

/* about-intro is an ORANGE brand band in BOTH modes — force dark text so it always contrasts
   (in dark mode the body colour is white, which would otherwise wash out on orange) */
section.about.firstText,
section.about.firstText h2,
section.about.firstText p,
section.about.firstText .about-copy > .about-sub,
section.about.firstText li { color: #10233a; }
section.about.firstText .about-copy > .about-sub { color: #1a3a5f; }

/* dark mode: the near-black bands keep light text (belt-and-braces contrast) */
html:not([data-theme="light"]) section.faq { color: #fff; }
html:not([data-theme="light"]) section#photography, html:not([data-theme="light"]) section#design-motion { color: #fff; }

/* make the light/dark switch more obvious (longer cross-fade + View Transition) */
html.theme-transition, html.theme-transition * { transition-duration: .55s !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .55s; }

/* ================================================ reduced-motion guards */
@media (prefers-reduced-motion: reduce) {
  #logo .ace-logo, #logo a:hover .ace-logo { animation: none !important; }
  .glitch::before, .glitch::after { display: none !important; }
  html.anim-ready .ace-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.theme-transition, html.theme-transition * { transition: none !important; }
}

/* =====================================================================
   SUB-PAGE TEMPLATE (service pages) - fixed liquid header + shared shell
   Reuses the site stylesheet for all content; only the header differs
   from the homepage (no big scrolling hero - the liquid lives in the bar).
   ===================================================================== */
body.ace-subpage { padding-top: 74px; }

.ace-subhead {
  position: fixed; top: 0; left: 0; right: 0; height: 74px; z-index: 1000;
  overflow: hidden; background: var(--ace-blue-ink);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 24px rgba(6,14,24,.35);
}
.ace-subhead > canvas.ace-subhead-fluid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
.ace-subhead .ace-subhead-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center; gap: 1.1rem;
  padding: 0 clamp(16px, 3vw, 48px); max-width: none;
}
.ace-subhead .ace-subhead-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ace-subhead .ace-subhead-logo .ace-logo { height: 40px; width: auto; color: #fff; fill: currentColor; display: block; }
.ace-subhead-nav {
  display: flex; align-items: center; gap: .3rem 1.1rem; margin-left: auto;
  /* neutralise the legacy `header nav { position:fixed; top:-420px; z-index:-1 }`
     rule from style.css, which otherwise parks this nav off-screen */
  position: static; top: auto; right: auto; left: auto; bottom: auto; z-index: auto;
  width: auto; padding: 0; clear: none; background: none; transition: color .2s ease;
}
.ace-subhead-links { display: flex; flex-wrap: nowrap; align-items: center; gap: .2rem 1rem; }
.ace-subhead-links a, .ace-subhead-nav > a:not(.ace-subhead-cta) {
  color: #fff; text-decoration: none; font-weight: 800; opacity: .82;
  font-size: .92rem; letter-spacing: -.01em; border-bottom: 0; white-space: nowrap;
  transition: color .2s ease, opacity .2s ease;
}
.ace-subhead-links a:hover, .ace-subhead-links a:focus-visible { color: var(--ace-orange); opacity: 1; }
/* social icon row (mirrors the homepage header) */
.ace-subhead-social { display: flex; align-items: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ace-subhead-social li { margin: 0; padding: 0; float: none; list-style: none; }
.ace-subhead-social a { color: #fff; opacity: .68; font-size: 1.05rem; line-height: 1; border-bottom: 0; transition: color .2s ease, opacity .2s ease; }
.ace-subhead-social a:hover, .ace-subhead-social a:focus-visible { color: var(--ace-orange); opacity: 1; }
.ace-subhead-nav a.ace-subhead-cta {
  background: var(--ace-orange); color: var(--ace-blue-ink); opacity: 1; text-decoration: none;
  padding: .42em .9em; border-radius: 50px; font-weight: 800; white-space: nowrap; border-bottom: 0;
}
.ace-subhead-nav a.ace-subhead-cta:hover { background: #fff; color: var(--ace-blue-ink); }
/* hamburger toggle (JS-free checkbox hack) - hidden on desktop */
.ace-navtoggle-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ace-navtoggle { display: none; }
@media (max-width: 1280px) { .ace-subhead .subhead-hide-lg { display: none; } }
@media (max-width: 1080px) {
  .ace-navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-left: auto; cursor: pointer; position: relative; z-index: 2;
  }
  .ace-navtoggle span, .ace-navtoggle span::before, .ace-navtoggle span::after {
    display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .22s ease, opacity .22s ease;
  }
  .ace-navtoggle span::before { content: ""; position: absolute; transform: translateY(-7px); }
  .ace-navtoggle span::after  { content: ""; position: absolute; transform: translateY(7px); }
  .ace-navtoggle-cb:checked ~ .ace-navtoggle span { background: transparent; }
  .ace-navtoggle-cb:checked ~ .ace-navtoggle span::before { transform: rotate(45deg); }
  .ace-navtoggle-cb:checked ~ .ace-navtoggle span::after  { transform: rotate(-45deg); }
  .ace-subhead .subhead-hide-lg { display: block; }   /* show every link inside the dropdown */
  .ace-subhead-nav {
    display: none; position: fixed; top: 74px; left: 0; right: 0; z-index: 1001;
    flex-direction: column; align-items: flex-start; gap: .5rem; margin-left: 0;
    background: var(--ace-blue-ink); border-top: 1px solid rgba(255,255,255,.12);
    padding: 1.1rem clamp(16px, 5vw, 40px) 1.5rem;
    box-shadow: 0 16px 34px rgba(6,14,24,.55);
    max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .ace-navtoggle-cb:checked ~ .ace-subhead-nav { display: flex; }
  .ace-subhead-links { flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; }
  .ace-subhead-links a { padding: .5em 0; font-size: 1.08rem; }
  .ace-subhead-social { margin-top: .5rem; gap: 1.1rem; font-size: 1.3rem; }
  .ace-subhead-nav a.ace-subhead-cta { margin-top: .7rem; }
}

/* page head (title band under the fixed header) - uses the brand blue like the hero */
.ace-page-head { background: var(--ace-blue); color: #fff; padding: clamp(2.6em, 6vw, 4.2em) 0 clamp(2em, 4vw, 3em); position: relative; }
html[data-theme="light"] .ace-page-head { background: #eef3f9; color: #10233a; }
.ace-page-head > .wrap { max-width: 1000px; }
.ace-page-head .ace-crumbs { font-size: .9rem; font-weight: 700; opacity: .8; margin: 0 0 .8em; }
.ace-page-head .ace-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
html[data-theme="light"] .ace-page-head .ace-crumbs a { border-bottom-color: rgba(16,35,58,.3); }
.ace-page-head h1 { font-family: 'Bricolage Grotesque','Open Sans',sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1.02; margin: 0 0 .3em; font-size: clamp(2.1rem, 6vw, 3.6rem); }
.ace-page-head .ace-lede { font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.5; max-width: 760px; margin: 0; opacity: .95; }

/* generic service-page content sections (same rhythm as the rest of the site) */
.ace-page .ace-block { padding: clamp(2.6em, 5vw, 4em) 0; }
.ace-page .ace-block > .wrap { max-width: 1000px; }
.ace-page .ace-block h2 { font-family: 'Bricolage Grotesque','Open Sans',sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 .5em; }
.ace-page .ace-block h3 { font-weight: 800; font-size: 1.15rem; margin: 0 0 .3em; }
.ace-page .ace-block p { line-height: 1.65; margin: 0 0 1em; }
.ace-sec-alt { background: var(--ace-blue-ink); color: #fff; }
html[data-theme="light"] .ace-sec-alt { background: #f4f7fb; color: #10233a; }
.ace-sec-alt a { color: var(--ace-orange); }

/* feature / "what's included" grid */
.ace-feature-grid { list-style: none; margin: 1.2em 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 720px) { .ace-feature-grid { grid-template-columns: 1fr; } }
.ace-feature-grid li { background: var(--ace-surface); border: 1px solid var(--ace-border); border-radius: 12px; padding: 1.2em 1.3em; }
html[data-theme="light"] .ace-feature-grid li { background: #fff; border-color: #e6ebf2; box-shadow: 0 6px 20px rgba(20,40,70,.06); }
.ace-feature-grid li strong { display: block; font-size: 1.08rem; margin-bottom: .25em; }
.ace-feature-grid li span { display: block; font-size: .95rem; line-height: 1.5; opacity: .9; }

/* numbered process list */
.ace-steps { list-style: none; counter-reset: step; margin: 1.2em 0 0; padding: 0; }
.ace-steps li { counter-increment: step; position: relative; padding: 0 0 1.1em 3em; }
.ace-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2em; height: 2em; border-radius: 50%; background: var(--ace-orange); color: var(--ace-blue-ink); font-weight: 800; display: grid; place-items: center; }
.ace-steps li strong { display: block; }

/* related services chips */
.ace-related { display: flex; flex-wrap: wrap; gap: .6rem .7rem; margin: 1em 0 0; padding: 0; list-style: none; }
.ace-related a { display: inline-block; padding: .5em 1em; border-radius: 50px; border: 1px solid var(--ace-border); color: inherit; text-decoration: none; font-weight: 700; font-size: .95rem; }
.ace-related a:hover { border-color: var(--ace-orange); color: var(--ace-orange); }

/* services hub (pillar) grid of service cards */
.ace-hub-grid { list-style: none; margin: 1.4em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 900px) { .ace-hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .ace-hub-grid { grid-template-columns: 1fr; } }
.ace-hub-grid a { display: block; height: 100%; background: var(--ace-surface); border: 1px solid var(--ace-border); border-radius: 14px; padding: 1.4em 1.4em; text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease; }
html[data-theme="light"] .ace-hub-grid a { background: #fff; border-color: #e6ebf2; box-shadow: 0 6px 20px rgba(20,40,70,.06); }
.ace-hub-grid a:hover { transform: translateY(-5px); border-color: var(--ace-orange); box-shadow: 0 16px 34px rgba(20,40,70,.22); }
.ace-hub-grid strong { display: block; font-size: 1.18rem; font-weight: 800; margin-bottom: .3em; }
.ace-hub-grid span { display: block; font-size: .95rem; line-height: 1.55; opacity: .9; }

/* homepage: link the service-card headings + "all services" hub link */
section.services ul li h3 a { color: inherit; text-decoration: none; }
section.services ul li h3 a:hover { color: var(--ace-orange); }
.ace-services-more { margin-top: 1.6em; }
.ace-services-more a { display: inline-block; font-weight: 800; color: var(--ace-orange); text-decoration: none; border-bottom: 2px solid rgba(243,149,16,.4); }
.ace-services-more a:hover { border-bottom-color: var(--ace-orange); }

/* =====================================================================
   SERVICES 3D DECK - glassy coverflow you flick through (progressive
   enhancement over #services ul.serviceList; JS adds .ace-deck-on).
   ===================================================================== */
.ace-deck-on ul.serviceList { display: none !important; }        /* hide the grid fallback */
.ace-deck-on .ace-services-more { margin-top: 0; }
/* let the deck break out of the wrapper full-width, and let card shadows bleed
   vertically while clipping horizontally so the page never scrolls sideways */
#services.ace-deck-on { overflow-x: clip; overflow-y: visible; }

.ace-deck {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(12px, 2vw, 28px) 0 clamp(30px, 4vw, 58px);
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.ace-deck-stage {
  position: relative; height: clamp(440px, 60vh, 580px);
  perspective: 1700px; perspective-origin: 50% 44%;
  overflow: visible; touch-action: pan-y; cursor: grab;
}
.ace-deck-stage.is-dragging { cursor: grabbing; }
/* soft bokeh "environment" behind the glass */
.ace-deck-stage::before, .ace-deck-stage::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(64px);
  opacity: .5; pointer-events: none; z-index: 0;
}
.ace-deck-stage::before { width: 42vmin; height: 42vmin; left: 12%; top: 8%;
  background: radial-gradient(circle, rgba(243,149,16,.5), transparent 70%);
  animation: ace-bokeh-a 15s ease-in-out infinite alternate; }
.ace-deck-stage::after { width: 48vmin; height: 48vmin; right: 10%; bottom: 4%;
  background: radial-gradient(circle, rgba(84,150,232,.55), transparent 70%);
  animation: ace-bokeh-b 19s ease-in-out infinite alternate; }
@keyframes ace-bokeh-a { from { transform: translate(0,0); } to { transform: translate(38px,28px); } }
@keyframes ace-bokeh-b { from { transform: translate(0,0); } to { transform: translate(-46px,-22px); } }

.ace-deck-track { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.ace-deck-track.no-anim .ace-deck-card { transition: none !important; }

.ace-deck-card {
  position: absolute; left: 50%; top: 50%;
  width: clamp(288px, 40vw, 400px); height: auto;  /* each card takes its own natural height */
  margin: 0; border-radius: 24px; transform-style: preserve-3d; will-change: transform, filter, opacity;
  transition: transform .6s cubic-bezier(.2,.75,.2,1), filter .55s ease, opacity .55s ease;
  cursor: pointer;
  box-shadow: 0 26px 54px rgba(6,14,24,.5);   /* drop shadow on the OUTER card (unclipped) */
}
.ace-deck-card.is-active { box-shadow: 0 46px 90px rgba(6,14,24,.64); }
/* the frosted-glass overlay is a pseudo-element pinned to the card with inset:0,
   so it always matches the card's exact size and radius; the content (inner) is what
   gives the card its natural height. clip-path keeps the backdrop-blur to the rounded
   corners (a plain border-radius is ignored by backdrop-filter under a 3D transform) */
.ace-deck-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 24px;
  -webkit-clip-path: inset(0 round 24px); clip-path: inset(0 round 24px);
  /* top sheen layered over the tinted smoky-blue glass */
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(158deg, rgba(28,54,86,.5), rgba(16,32,54,.4) 62%, rgba(243,149,16,.08));
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.3);
  pointer-events: none;
}
.ace-deck-card-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.5em, 2.4vw, 2.1em);
  color: #fff;
}
.ace-deck-num { font-weight: 800; font-size: .84rem; letter-spacing: .24em; color: var(--ace-orange); opacity: .95; }
.ace-deck-card h3 {
  font-family: 'Bricolage Grotesque','Open Sans',sans-serif; font-weight: 800;
  font-size: clamp(1.45rem, 2.3vw, 1.9rem); line-height: 1.03; letter-spacing: -.02em;
  margin: .5em 0 .55em; color: #fff; text-wrap: balance;
}
.ace-deck-body { flex: 0 0 auto; margin-top: .15em; }   /* full content shown; cards are sized to the tallest */
.ace-deck-body p { font-size: 1rem; line-height: 1.6; margin: 0 0 .7em; color: rgba(255,255,255,.92); }
.ace-deck-body p:last-child { margin-bottom: 0; }
.ace-deck-link {
  margin-top: 1.15em; align-self: flex-start; font-weight: 800; text-decoration: none;
  color: var(--ace-blue-ink); background: var(--ace-orange); font-size: .95rem;
  padding: .68em 1.3em; border-radius: 50px; opacity: 0; transform: translateY(8px);
  box-shadow: 0 10px 24px rgba(243,149,16,.38);
  transition: opacity .3s ease, transform .3s ease, background .2s ease, box-shadow .2s ease;
}
.ace-deck-card.is-active .ace-deck-link { opacity: 1; transform: none; }
.ace-deck-link:hover { background: #fff; box-shadow: 0 14px 30px rgba(243,149,16,.5); }
.ace-deck-card.is-active::before {
  /* the front card is a heavier frosted glass: stronger blur of what sits beneath,
     more opaque so its own text contrasts hard */
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.3), transparent 62%),
    linear-gradient(158deg, rgba(24,48,80,.74), rgba(12,28,50,.66) 62%, rgba(243,149,16,.12));
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 0 0 1.5px rgba(243,149,16,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
/* light-mode glass */
html[data-theme="light"] .ace-deck-card { box-shadow: 0 26px 54px rgba(20,40,70,.2); }
html[data-theme="light"] .ace-deck-card.is-active { box-shadow: 0 46px 90px rgba(20,40,70,.3); }
html[data-theme="light"] .ace-deck-card-inner { color: #10233a; }
html[data-theme="light"] .ace-deck-card::before {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.5), transparent 62%),
    linear-gradient(158deg, rgba(255,255,255,.68), rgba(255,255,255,.5) 60%, rgba(243,149,16,.08));
  box-shadow: inset 0 0 0 1px rgba(51,102,153,.2), inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .ace-deck-card.is-active::before {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.6), transparent 62%),
    linear-gradient(158deg, rgba(255,255,255,.92), rgba(255,255,255,.82) 62%, rgba(243,149,16,.1));
  box-shadow: inset 0 0 0 1.5px rgba(243,149,16,.5), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme="light"] .ace-deck-card h3 { color: #10233a; }
html[data-theme="light"] .ace-deck-body p { color: #43546c; }

/* floating arrows over the side cards */
.ace-deck-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 30;
  width: clamp(48px, 5vw, 60px); height: clamp(48px, 5vw, 60px); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: rgba(16,35,58,.5); color: #fff; border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 1.7rem; line-height: 1; box-shadow: 0 12px 30px rgba(6,14,24,.45);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .25s ease;
}
.ace-deck-arrow:hover { background: var(--ace-orange); color: var(--ace-blue-ink); border-color: var(--ace-orange); transform: translateY(-50%) scale(1.09); }
.ace-deck-arrow:disabled { opacity: 0; pointer-events: none; }
.ace-deck-prev { left: clamp(8px, 7vw, 160px); }
.ace-deck-next { right: clamp(8px, 7vw, 160px); }
html[data-theme="light"] .ace-deck-arrow { background: rgba(255,255,255,.72); color: #10233a; border-color: rgba(51,102,153,.24); }
html[data-theme="light"] .ace-deck-arrow:hover { background: var(--ace-orange); color: var(--ace-blue-ink); border-color: var(--ace-orange); }

/* dots */
.ace-deck-dots { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.3em; position: relative; z-index: 5; }
.ace-deck-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.3); transition: transform .2s ease, background .2s ease; }
html[data-theme="light"] .ace-deck-dot { background: rgba(51,102,153,.28); }
.ace-deck-dot.is-active { background: var(--ace-orange); transform: scale(1.4); }

@media (prefers-reduced-motion: reduce) {
  .ace-deck-stage::before, .ace-deck-stage::after { animation: none; }
  .ace-deck-card { transition: none; }
}

/* ===== Photography "scattered prints" gallery (opt-in via .ace-gallery-prints) ===== */
.ace-gallery-prints { column-width: 250px; column-gap: 1.6rem; }
.ace-gallery-prints li { break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 1.7rem; }
.ace-gallery-prints a {
  display: block; position: relative; overflow: visible;
  background: #fbfbf7; padding: 11px 11px 32px; border: 0; border-radius: 3px;
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  transform: rotate(var(--r, -2deg));
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  will-change: transform;
}
.ace-gallery-prints a:hover, .ace-gallery-prints a:focus-visible {
  transform: rotate(0deg) scale(1.06) translateY(-6px);
  box-shadow: 0 32px 66px rgba(0,0,0,.6);
  z-index: 6;
}
.ace-gallery-prints img { border-radius: 1px; }
.ace-gallery-prints a:hover img, .ace-gallery-prints a:focus-visible img { transform: none; }  /* the print lifts, not the photo inside it */
.ace-gallery-prints .ace-cap {
  position: absolute; left: 13px; right: 13px; bottom: 8px; margin: 0; padding: 0;
  background: none; opacity: .82; transform: none;
  color: #2a2a2a; font-weight: 700; font-size: .78rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* pseudo-random tilts so the prints look chucked down */
.ace-gallery-prints li:nth-child(6n+1) a { --r: -3.2deg; }
.ace-gallery-prints li:nth-child(6n+2) a { --r: 2.3deg; }
.ace-gallery-prints li:nth-child(6n+3) a { --r: -1.4deg; }
.ace-gallery-prints li:nth-child(6n+4) a { --r: 3.5deg; }
.ace-gallery-prints li:nth-child(6n+5) a { --r: -2.5deg; }
.ace-gallery-prints li:nth-child(6n+6) a { --r: 1.6deg; }
@media (prefers-reduced-motion: reduce) {
  .ace-gallery-prints a { transform: none; }
  .ace-gallery-prints a:hover, .ace-gallery-prints a:focus-visible { transform: scale(1.04); }
}

/* photography prints — denser scatter + slight overlap, hover-only captions (refinement) */
.ace-gallery-prints { column-width: 232px; column-gap: .45rem; }
.ace-gallery-prints li { margin: 0 0 .55rem; }
.ace-gallery-prints a { padding: 10px 10px 30px; }
/* wider tilt range so they read as chucked down on a table */
.ace-gallery-prints li:nth-child(6n+1) a { --r: -4.2deg; }
.ace-gallery-prints li:nth-child(6n+2) a { --r: 2.8deg; }
.ace-gallery-prints li:nth-child(6n+3) a { --r: -1.6deg; }
.ace-gallery-prints li:nth-child(6n+4) a { --r: 4.6deg; }
.ace-gallery-prints li:nth-child(6n+5) a { --r: -3deg; }
.ace-gallery-prints li:nth-child(6n+6) a { --r: 1.9deg; }
/* caption: hidden until hover, shown over the photo */
.ace-gallery-prints .ace-cap {
  left: 10px; right: 10px; bottom: 30px; top: auto;
  padding: .9em .7em .55em; margin: 0;
  background: linear-gradient(transparent, rgba(6,14,24,.88));
  color: #fff; font-weight: 700; font-size: .82rem; line-height: 1.28;
  white-space: normal; text-overflow: clip; overflow: hidden; max-height: 64%;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.ace-gallery-prints a:hover .ace-cap, .ace-gallery-prints a:focus-visible .ace-cap { opacity: 1; transform: none; }

/* ===== Photography "pile" (viewport-height, scattered from the centre) ===== */
/* no clipping on the photo section — prints float/overhang freely; horizontal page
   scroll is still prevented by body{overflow-x:hidden}. Extra bottom room + a higher
   stacking order so overhanging prints draw over the neighbouring sections. */
#photography.ace-gallery-sec, .ace-pile-sec {
  position: relative; z-index: 15; min-height: 100vh; overflow: visible;
  padding-top: 3.2em; padding-bottom: 8em;
}
.ace-pile-sec > .wrap { max-width: none !important; width: 100%; }
.ace-pile-sec > .wrap > h2, .ace-pile-sec > .wrap > p { max-width: 780px; margin-left: auto; margin-right: auto; }
.ace-gallery-prints.is-pile {
  position: relative; display: block; min-height: 460px;
  column-width: auto; column-gap: 0; margin: .6rem auto 0;
}
.ace-gallery-prints.is-pile li {
  position: absolute; margin: 0 !important; width: auto; break-inside: auto;
  /* --dx/--dy are driven per-frame by pile.js (ambient float + cursor gravity) */
  transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--lr, 0deg));
  z-index: var(--z, 1);
  transition: box-shadow .3s ease;
  will-change: transform;
}
.ace-gallery-prints.is-pile li:hover,
.ace-gallery-prints.is-pile li:focus-within { z-index: 9999; }
.ace-gallery-prints.is-pile a { transform: none !important; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.ace-gallery-prints.is-pile li:hover > a,
.ace-gallery-prints.is-pile li:focus-within > a { transform: scale(1.15) !important; box-shadow: 0 32px 66px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .ace-gallery-prints.is-pile li { transition: none; } }

/* subpage headings: opt out of the fill-to-width fit (it can overflow and crop on the
   right); scale responsively and wrap instead */
body.ace-subpage h2.ace-fit {
  white-space: normal !important;
  font-size: clamp(1.7rem, 4vw, 2.4rem) !important;
  line-height: 1.14 !important;
  max-width: 100% !important;
}

/* the pile animates constantly — opt it out of browser scroll anchoring, which
   otherwise "follows" the moving prints and makes scrolling near them stick/flicker */
#photography.ace-gallery-sec, .ace-pile-sec, .ace-gallery-prints.is-pile { overflow-anchor: none; }