/* =========================================================
   CINEMATIC LAYER — metallic type, brighter panel rims,
   hero letterbox + impact flare, discipline projector.
   Loaded after the section styles so it can refine them.
   ========================================================= */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --chrome: linear-gradient(180deg, #ffffff 0%, #f3f1ec 24%, #c9c6bf 44%, #7d7b77 51%, #a9a6a0 58%, #ece9e2 78%, #ffffff 100%);
  --chrome-soft: linear-gradient(180deg, #ffffff 0%, #e4e1da 40%, #9c9993 55%, #c9c5bd 72%, #f4f1ea 100%);
  --gold-metal: linear-gradient(180deg, #fff6df 0%, #f2d8a2 22%, #d3ad66 42%, #8e6c35 51%, #b88f4c 60%, #ebcf93 80%, #fff2cf 100%);
  --ice-metal: linear-gradient(180deg, #ffffff 0%, #dbe8f2 30%, #8fa8bb 50%, #5d7385 54%, #b9cddc 75%, #f4f9fc 100%);
  --sheen: linear-gradient(105deg, transparent 0 42%, rgba(255,255,255,.75) 48%, #fff 50%, rgba(255,255,255,.75) 52%, transparent 58% 100%);
  --sheen-soft: linear-gradient(105deg, transparent 0 44%, rgba(255,255,255,.55) 50%, transparent 56% 100%);
}

/* ---------- metallic type ---------- */
.manifesto__title .mline > span,
.worlds__title, .section-title, .service__name, .philosophy__title,
.moment__fill, .step__title, .ai__title, .contact__title, .statement__first .ch, .statement__second,
.panel__title, .concept-modal__title, .teaser__word, .site-footer__head,
.hero__tagline .mask > span, .footer-cta__text {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--sheen), var(--chrome);
  background-size: 260% 100%, 100% 1lh;
  background-repeat: no-repeat, repeat-y;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  animation: metalSheen 8s var(--ease-in-out) infinite;
}
/* descriptions: a softer brushed-silver so they stay easy to read */
.worlds__lede, .manifesto__copy, .philosophy__lede, .moment__copy, .step__copy, .ai__lede, .contact__lede,
.panel__sub, .concept-modal__desc, .ai__caption, .site-footer__tagline, .service__tags, .manifesto__pillars span,
.project__cat {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--sheen-soft), var(--chrome-soft);
  background-size: 260% 100%, 100% 1lh;
  background-repeat: no-repeat, repeat-y;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  animation: metalSheen 11s var(--ease-in-out) infinite;
}
/* gold metal accents */
.section-title em, .worlds__title em, .manifesto__title em, .statement__second em, .moment--gold .moment__fill,
.hero__tagline .mask:last-child > span, .eyebrow, .service.is-active .service__name, .footer-cta__link:hover .footer-cta__text {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--sheen), var(--gold-metal);
  background-size: 260% 100%, 100% 1lh;
  background-repeat: no-repeat, repeat-y;
  -webkit-background-clip: text; background-clip: text;
  animation: metalSheen 7s var(--ease-in-out) infinite;
}
.ai__title em, .eyebrow--ice {
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: var(--sheen), var(--ice-metal);
  background-size: 260% 100%, 100% 1lh; background-repeat: no-repeat, repeat-y;
  -webkit-background-clip: text; background-clip: text;
}
/* stagger the sweeps so the page never flashes all at once */
.section-title, .moment:nth-child(3) .moment__fill, .step:nth-child(2n) .step__title { animation-delay: -2.6s; }
.worlds--industries .worlds__title, .moment:nth-child(4) .moment__fill, .step:nth-child(3n) .step__title { animation-delay: -5.1s; }
.service:nth-child(2) .service__name { animation-delay: -1.2s; }
.service:nth-child(3) .service__name { animation-delay: -2.4s; }
.service:nth-child(4) .service__name { animation-delay: -3.6s; }
.service:nth-child(5) .service__name { animation-delay: -4.8s; }
.service:nth-child(6) .service__name { animation-delay: -6s; }
.statement__first .ch { animation: none; }
@keyframes metalSheen {
  0% { background-position: 160% 0, 0 0; }
  38%, 100% { background-position: -60% 0, 0 0; }
}
.service-list:has(.is-active) .service:not(.is-active) .service__name { opacity: .38; transition: opacity .6s var(--ease); }
.moment__outline { -webkit-text-stroke: 1px rgba(229,197,139,.28); }
.statement__second { filter: drop-shadow(0 0 40px rgba(229,197,139,.18)); }

/* ---------- hero: letterbox bars + impact flare ---------- */
.hero__letterbox { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hero__letterbox i { position: absolute; left: 0; right: 0; height: 11vh; background: #050506; transition: transform 1.6s var(--ease-in-out); }
.hero__letterbox i:first-child { top: 0; transform: translateY(-100%); }
.hero__letterbox i:last-child { bottom: 0; transform: translateY(100%); }
.hero.is-intro .hero__letterbox i { transform: none; }
.hero__letterbox i::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(229,197,139,.35), transparent); }
.hero__letterbox i:first-child::after { bottom: 0; }
.hero__letterbox i:last-child::after { top: 0; }

.hero__flare { position: absolute; left: 50%; top: 60%; width: 0; height: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen; }
.hero__flare i { position: absolute; left: 0; top: 0; display: block; opacity: 0; }
.hero__flare-streak {
  width: 140vw; height: 3px; margin: -1.5px 0 0 -70vw;
  background: linear-gradient(90deg, transparent 0%, rgba(229,197,139,.0) 10%, rgba(255,226,170,.85) 46%, #fff 50%, rgba(255,226,170,.85) 54%, rgba(229,197,139,0) 90%, transparent 100%);
  filter: blur(1px); box-shadow: 0 0 24px 4px rgba(229,197,139,.45);
}
.hero__flare-core {
  width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,230,.95) 0%, rgba(240,200,130,.5) 18%, rgba(199,166,106,.12) 45%, transparent 70%);
}
.hero__flare-ring {
  width: 30vmin; height: 10vmin; margin: -5vmin 0 0 -15vmin; border-radius: 50%;
  border: 1px solid rgba(255,226,170,.8); box-shadow: 0 0 30px rgba(229,197,139,.6), inset 0 0 20px rgba(229,197,139,.4);
}

/* ---------- panels: brighter, living edges ---------- */
.panel { --rim-o: .9; }
.panel.is-active { --rim-o: 1; }
.panel__rim {
  padding: 1.5px;
  background: linear-gradient(var(--rim-angle),
    #fff 0%,
    color-mix(in srgb, var(--rim) 95%, white) 8%,
    color-mix(in srgb, var(--rim) 45%, transparent) 30%,
    rgba(175,199,216,.22) 55%,
    color-mix(in srgb, var(--rim) 85%, transparent) 88%,
    #fff 100%);
}
.panel__face {
  box-shadow:
    0 60px 110px -50px rgba(0,0,0,.95),
    0 0 0 1px color-mix(in srgb, var(--rim) 30%, transparent),
    0 0 36px -6px color-mix(in srgb, var(--rim) 45%, transparent),
    0 0 90px -20px color-mix(in srgb, var(--rim) 30%, transparent);
}
.panel.is-active .panel__face {
  box-shadow:
    0 80px 130px -50px rgba(0,0,0,.95),
    0 0 0 1px color-mix(in srgb, var(--rim) 70%, transparent),
    0 0 50px -4px color-mix(in srgb, var(--rim) 75%, transparent),
    0 0 140px -10px color-mix(in srgb, var(--rim) 45%, transparent);
}
.panel__edge--t { background: linear-gradient(90deg, #5a4a2c, #fff1cf 50%, #5a4a2c); }
.panel__edge--l { background: linear-gradient(180deg, #f2dba7, color-mix(in srgb, var(--rim) 60%, #1d1a15) 40%, #15120e); }
/* a light that travels around the rim of the panel in focus */
.panel__beam {
  position: absolute; inset: -1px; pointer-events: none; padding: 2px; opacity: 0;
  background: conic-gradient(from var(--beam), transparent 0 72%, color-mix(in srgb, var(--rim) 70%, transparent) 82%, #fff 88%, color-mix(in srgb, var(--rim) 70%, transparent) 92%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px var(--rim));
  transition: opacity .8s var(--ease);
}
.panel.is-active .panel__beam { opacity: 1; animation: beamTurn 3.2s linear infinite; }
@keyframes beamTurn { to { --beam: 360deg; } }
.worlds.has-active .panel:not(.is-active) { --shade: .42; }

/* the open invitation panel */
.panel--open .teaser { background: radial-gradient(90% 80% at 50% 110%, #3a2c16 0%, #15110b 55%, #08090b 100%); }
.panel--open .teaser__grid { background-image: linear-gradient(rgba(229,197,139,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(229,197,139,.08) 1px, transparent 1px); }
.panel--open .teaser__glow { background: radial-gradient(rgba(229,197,139,.22), transparent 65%); }
.panel--open .teaser__kicker { color: var(--gold-hi); }
.panel--open .panel__status { color: var(--gold-hi); }

/* ---------- disciplines: a pinned, turning ring of edge-lit panels ---------- */
.disc { display: none; }
@media (min-width: 1000px) {
  .discipline-wrap { display: none; }
  .disciplines { padding-bottom: 0; }
  .disciplines .section-head { margin-bottom: 0; }
  .disc { display: block; position: relative; height: 560vh; }
  .disc__stage {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 1rem;
  }
  .disc__copy { position: relative; z-index: 5; display: grid; gap: 2rem; align-content: center; }
  .disc__count { font-size: var(--t-label); font-weight: 600; letter-spacing: .3em; color: var(--silver-dim); font-variant-numeric: tabular-nums; }
  .disc__count b { color: var(--gold-hi); font-weight: 700; }
  .disc__titles { position: relative; display: grid; }
  .disc__title { grid-area: 1 / 1; display: grid; align-content: start; gap: 1.4rem; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
  .disc__title.is-active { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
  .disc__name { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 5vw, 5.8rem); line-height: 1; overflow: hidden; padding-bottom: .12em; }
  .disc__name > span {
    display: inline-block;
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: var(--sheen), var(--chrome); background-size: 260% 100%, 100% 1lh; background-repeat: no-repeat, repeat-y;
    -webkit-background-clip: text; background-clip: text; animation: metalSheen 7s var(--ease-in-out) infinite;
  }
  .disc__tags {
    max-width: 30ch; font-size: var(--t-label); font-weight: 600; letter-spacing: .22em; line-height: 2; text-transform: uppercase;
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: var(--gold-metal); background-size: 100% 2lh; -webkit-background-clip: text; background-clip: text;
  }
  .disc__copy .link-cta { justify-self: start; }
  .disc__bars { display: flex; gap: .5rem; max-width: 22rem; }
  .disc__bars li { flex: 1; height: 2px; background: rgba(244,242,237,.12); overflow: hidden; }
  .disc__bars i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 0 10px rgba(229,197,139,.6); }

  .disc__ring-wrap { position: relative; z-index: 1; height: 100%; perspective: 1800px; perspective-origin: 50% 45%; transform-style: preserve-3d; }
  .disc__ring {
    --w: min(36vw, 620px); --r: calc(var(--w) * .96);
    position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-style: preserve-3d;
    transform: translateZ(calc(var(--r) * -1)) rotateX(-4deg);
  }
  .disc__card {
    --t: 14px; --shade: .6; --rim: #E5C58B; --beam: 0deg;
    position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) * -.28); width: var(--w); aspect-ratio: 16 / 9;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--r));
  }
  .disc__face {
    position: absolute; inset: 0; overflow: hidden; background: #0b0c0e;
    transform: translateZ(calc(var(--t) / 2)); backface-visibility: hidden;
    box-shadow: 0 0 0 1px rgba(229,197,139,.35), 0 0 40px -8px rgba(229,197,139,.35), 0 60px 120px -40px rgba(0,0,0,.95);
    transition: box-shadow 1s var(--ease);
  }
  .disc__face::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--obsidian); opacity: var(--shade); transition: opacity .3s linear; }
  .disc__card { opacity: var(--vis, 1); }
  .disc__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .disc__glass { position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, rgba(255,255,255,.09), transparent 30%, transparent 70%, rgba(255,255,255,.04)); }
  .disc__rim, .disc__beam {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: 1.5px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .disc__rim { background: linear-gradient(135deg, #fff, rgba(229,197,139,.7) 18%, rgba(175,199,216,.18) 55%, rgba(229,197,139,.85) 90%, #fff); opacity: .7; transition: opacity 1s var(--ease); }
  .disc__beam {
    padding: 2px; opacity: 0;
    background: conic-gradient(from var(--beam), transparent 0 72%, rgba(229,197,139,.7) 82%, #fff 88%, rgba(229,197,139,.7) 92%, transparent 97%);
    filter: drop-shadow(0 0 8px #E5C58B); transition: opacity .8s var(--ease);
  }
  .disc__card.is-active .disc__beam { opacity: 1; animation: beamTurn 3.6s linear infinite; }
  .disc__card.is-active .disc__rim { opacity: 1; }
  .disc__card.is-active .disc__face { box-shadow: 0 0 0 1px rgba(229,197,139,.8), 0 0 60px -4px rgba(229,197,139,.55), 0 0 160px -20px rgba(229,197,139,.35), 0 80px 140px -40px rgba(0,0,0,.95); }
  .disc__edge { position: absolute; display: block; backface-visibility: hidden; }
  .disc__edge--t, .disc__edge--b { left: 0; right: 0; height: var(--t); }
  .disc__edge--l, .disc__edge--r { top: 0; bottom: 0; width: var(--t); }
  .disc__edge--t { top: 0; transform-origin: 50% 0; transform: translateZ(calc(var(--t) / -2)) rotateX(90deg); background: linear-gradient(90deg, #5a4a2c, #fff1cf 50%, #5a4a2c); }
  .disc__edge--b { bottom: 0; transform-origin: 50% 100%; transform: translateZ(calc(var(--t) / -2)) rotateX(-90deg); background: #15120e; }
  .disc__edge--l { left: 0; transform-origin: 0 50%; transform: translateZ(calc(var(--t) / -2)) rotateY(-90deg); background: linear-gradient(180deg, #f2dba7, #3a2f1d 50%, #15120e); }
  .disc__edge--r { right: 0; transform-origin: 100% 50%; transform: translateZ(calc(var(--t) / -2)) rotateY(90deg); background: linear-gradient(180deg, #8a7148, #1d1914 60%, #0b0a09); }
  .disc__floor {
    position: absolute; left: 0; right: 0; top: 72%; height: 30%; pointer-events: none;
    background: radial-gradient(50% 40% at 50% 0%, rgba(229,197,139,.16), transparent 70%);
    filter: blur(8px);
  }
}
@media (max-width: 999px) {
  .service__row { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .service__thumb {
    display: block; grid-column: 1 / -1; grid-row: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 1rem; object-fit: cover;
    box-shadow: 0 0 0 1px rgba(229,197,139,.45), 0 0 40px -10px rgba(229,197,139,.45), 0 30px 60px -30px rgba(0,0,0,.9);
  }
  .service__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__letterbox i { transition: none; }
  .panel.is-active .panel__beam, .disc__card.is-active .disc__beam { animation: none; }
}

/* ---------- page-wide atmosphere ---------- */
.atmosphere { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .site-footer { position: relative; z-index: 1; }
/* long translated discipline names keep clear of the ring */
@media (min-width: 1000px) { .disc__name.is-long { font-size: clamp(2.6rem, 3.9vw, 4.6rem); } }