/* ========================================================================== 
   V10 CINEMATIC SPECTACLE
   A richer, ceremonial visual layer built on top of the stable portfolio layout.
   No raster background is required: the scenery is CSS + handcrafted SVG.
   ========================================================================== */

@property --snake-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root,
html[data-theme="light"] {
  --spectacle-ink: #14281f;
  --spectacle-ink-2: #1c3529;
  --spectacle-ivory: #fff7e8;
  --spectacle-gold: #e8b875;
  --spectacle-gold-soft: #f7d6a7;
  --spectacle-amber: #d96b28;
  --spectacle-emerald: #5d8e67;
  --spectacle-neon: rgba(250, 185, 100, .95);
  --spectacle-shadow: 0 38px 120px rgba(38, 55, 43, .20), 0 0 0 1px rgba(255, 255, 255, .25) inset;
  --spectacle-shadow-dark: 0 50px 150px rgba(2, 12, 7, .48), 0 0 60px rgba(217, 107, 40, .08);
  --cosmos-opacity: .56;
  --cosmos-blend: multiply;
}

html[data-theme="dark"] {
  --bg: #263d32;
  --bg-deep: #1d3027;
  --surface: #334f40;
  --surface-2: #3f5d4c;
  --surface-3: #4c6c58;
  --spectacle-ink: #0c1a13;
  --spectacle-ink-2: #14291f;
  --spectacle-ivory: #fff7e8;
  --spectacle-gold: #efbd77;
  --spectacle-gold-soft: #ffe0ae;
  --spectacle-amber: #f07b32;
  --spectacle-emerald: #8db58c;
  --spectacle-neon: rgba(255, 177, 91, .98);
  --cosmos-opacity: .78;
  --cosmos-blend: screen;
}

html { background: var(--bg); }
body {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 89%, #fff6e5), var(--bg) 42%, color-mix(in srgb, var(--bg-deep) 94%, #101b14));
}

.page-grid { opacity: .11; mask-image: linear-gradient(to bottom, #000 0, transparent 65%); }
html[data-theme="light"] .page-grid { opacity: .09; }
.field-canvas { opacity: .40; mix-blend-mode: var(--cosmos-blend); }
html[data-theme="dark"] .field-canvas { opacity: .56; }

.site-header {
  border-bottom-color: rgba(232, 184, 117, .08);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: min(1420px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(232, 184, 117, .24), rgba(217, 107, 40, .52), rgba(232, 184, 117, .22), transparent);
  opacity: .55;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--header-bg) 83%, transparent);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 16px 55px rgba(13, 31, 22, .11);
}
.brand-mark {
  position: relative;
  border-radius: 0;
  clip-path: polygon(25% 4%, 75% 4%, 98% 50%, 75% 96%, 25% 96%, 2% 50%);
  border: 0;
  background:
    linear-gradient(145deg, rgba(255, 246, 229, .72), rgba(232, 184, 117, .3)),
    color-mix(in srgb, var(--orange) 17%, var(--surface));
  box-shadow: 0 0 26px rgba(224, 120, 51, .13);
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  clip-path: inherit;
  border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent);
}

.hero {
  overflow: visible;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: var(--header-h);
  width: 100vw;
  height: calc(100% - var(--header-h));
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 78% 43%, rgba(238, 185, 113, .13), transparent 20%),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 83%, transparent) 0 28%, transparent 72%);
  pointer-events: none;
}
.hero-copy {
  padding: clamp(22px, 3vw, 48px) 0;
  text-shadow: 0 4px 44px color-mix(in srgb, var(--bg) 72%, transparent);
}
html[data-theme="light"] .hero-copy { text-shadow: 0 10px 45px rgba(255, 250, 241, .78); }
.hero h1 {
  position: relative;
  filter: drop-shadow(0 18px 45px rgba(14, 32, 22, .16));
}
.hero h1 em {
  color: transparent;
  background: linear-gradient(115deg, #a94d18 0%, var(--orange) 30%, #eea160 54%, #bc531c 82%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 42px rgba(217, 107, 40, .17);
}
html[data-theme="dark"] .hero h1 em {
  background: linear-gradient(115deg, #ffb373 0%, #f17d32 38%, #ffd39b 58%, #ef7c31 84%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-copy::after {
  content: "";
  position: absolute;
  left: -26px;
  top: 13%;
  bottom: 17%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(235, 176, 103, .68) 28%, rgba(217, 107, 40, .2) 72%, transparent);
  box-shadow: 0 0 18px rgba(234, 173, 95, .25);
}
.availability-line {
  border-color: color-mix(in srgb, var(--spectacle-gold) 38%, transparent);
  box-shadow: 0 14px 45px rgba(28, 49, 36, .10), 0 0 24px rgba(217, 107, 40, .04) inset;
  backdrop-filter: blur(16px);
}
.availability-line::after {
  content: "";
  width: 38px;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(90deg, var(--orange), transparent);
  animation: status-line 2.8s ease-in-out infinite;
}

.button { position: relative; overflow: hidden; isolation: isolate; }
.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120%;
  left: -34%;
  width: 22%;
  height: 340%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 250, 230, .62), transparent);
  transition: transform .75s ease;
}
.button:hover::before { transform: translateX(720%) rotate(24deg); }
.button-primary {
  box-shadow: 0 16px 38px rgba(199, 88, 26, .24), 0 0 0 1px rgba(255, 238, 204, .22) inset;
}
.button-secondary {
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 48px rgba(12, 30, 21, .08);
}
.hero-codes span {
  border-color: color-mix(in srgb, var(--spectacle-gold) 28%, var(--line));
  backdrop-filter: blur(9px);
}

/* The product core becomes the ceremonial centrepiece. */
.hero-machine {
  perspective: 1200px;
  filter: drop-shadow(0 42px 75px rgba(7, 22, 13, .24));
}
.hero-machine::before {
  inset: 2% -2% 0;
  clip-path: polygon(13% 0, 87% 0, 100% 14%, 100% 86%, 87% 100%, 13% 100%, 0 86%, 0 14%);
  background:
    linear-gradient(142deg, rgba(255, 246, 224, .08), transparent 32%),
    radial-gradient(circle at var(--spot-x, 58%) var(--spot-y, 42%), rgba(241, 175, 95, .16), transparent 28%),
    url("assets/decor/orbit-theatre.svg") center/118% auto no-repeat,
    linear-gradient(150deg, rgba(11, 29, 20, .82), rgba(24, 54, 39, .62));
  border-color: rgba(237, 204, 158, .25);
  box-shadow:
    0 52px 140px rgba(4, 18, 10, .42),
    0 0 0 1px rgba(251, 225, 182, .04) inset,
    0 0 85px rgba(218, 105, 38, .08) inset;
}
html[data-theme="light"] .hero-machine::before {
  background:
    linear-gradient(142deg, rgba(255, 248, 232, .22), transparent 34%),
    radial-gradient(circle at var(--spot-x, 58%) var(--spot-y, 42%), rgba(230, 146, 65, .20), transparent 28%),
    url("assets/decor/orbit-theatre.svg") center/118% auto no-repeat,
    linear-gradient(150deg, rgba(28, 62, 44, .93), rgba(18, 40, 29, .88));
}

/* The existing scene border is amplified into a brighter, more ceremonial neon runner. */
.snake-border {
  padding: 1.7px;
  background: conic-gradient(from var(--snake-angle),
    transparent 0deg 236deg,
    rgba(106, 166, 112, .15) 248deg,
    rgba(255, 239, 207, .96) 266deg,
    var(--spectacle-neon) 283deg,
    rgba(217, 107, 40, .44) 306deg,
    transparent 330deg 360deg);
  filter: drop-shadow(0 0 7px rgba(255, 199, 119, .65)) drop-shadow(0 0 18px rgba(219, 105, 40, .25));
}
.snake-border-hero { animation-duration: 6.8s; }
.snake-border-cv { animation-duration: 9.2s; opacity: .84; }
.snake-border-projects { animation-duration: 5.5s; }
.snake-border-contact { animation-duration: 7.4s; opacity: .9; }

.machine-rings { filter: drop-shadow(0 0 22px rgba(235, 173, 95, .12)); }
.machine-rings i { box-shadow: 0 0 45px rgba(231, 170, 97, .04) inset; }
.machine-rings i:nth-child(2) { border-color: rgba(241, 128, 53, .38); }
.machine-rings i:nth-child(3) { border-color: rgba(156, 198, 140, .42); }
.operator-card {
  overflow: hidden;
  border-color: rgba(255, 235, 199, .34);
  box-shadow:
    0 42px 95px rgba(0, 0, 0, .48),
    0 0 65px rgba(233, 160, 79, .10),
    0 0 0 1px rgba(255, 249, 232, .045) inset;
}
.operator-card::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(122deg, rgba(255, 240, 207, .55), transparent 24%, transparent 70%, rgba(236, 126, 52, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.operator-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: -40%;
  right: -40%;
  bottom: -28%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(238, 159, 75, .30), transparent 68%);
  filter: blur(22px);
  animation: operator-aura 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}
.operator-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 34%, transparent 0 25%, rgba(255, 195, 116, .11) 39%, transparent 59%),
    linear-gradient(90deg, rgba(248, 208, 153, .06), transparent 24% 76%, rgba(248, 208, 153, .05));
  pointer-events: none;
}
.ai-node { filter: drop-shadow(0 0 25px rgba(238, 129, 56, .20)); }
.ai-core {
  box-shadow:
    0 0 0 8px rgba(255, 239, 208, .03),
    0 0 60px rgba(235, 128, 53, .40),
    0 0 110px rgba(123, 172, 119, .12);
  animation: core-pulse 3.6s ease-in-out infinite;
}
.ai-orbit::before {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 188, .12), transparent 68%);
}
.signal-card {
  border-color: rgba(238, 204, 156, .28);
  border-radius: 10px;
  box-shadow: 0 24px 58px rgba(3, 17, 9, .28), 0 0 30px rgba(218, 109, 44, .05) inset;
  backdrop-filter: blur(18px) saturate(1.15);
}
.signal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 241, 211, .08) 46%, transparent 68%);
  transform: translateX(-120%);
  animation: panel-glint 6s ease-in-out infinite;
  pointer-events: none;
}
.signal-card-a { animation: signal-float-a 6.4s ease-in-out infinite; }
.signal-card-b { animation: signal-float-b 7.2s ease-in-out infinite; }
.machine-caption {
  padding: 8px 14px;
  border: 1px solid rgba(236, 197, 140, .16);
  border-radius: 999px;
  background: rgba(9, 25, 17, .45);
  backdrop-filter: blur(12px);
}

/* Dark ceremonial break between the hero and the factual sections. */
.band-section {
  position: relative;
  color: var(--spectacle-ivory);
  background:
    linear-gradient(90deg, rgba(11, 29, 20, .97), rgba(27, 59, 42, .92) 52%, rgba(13, 32, 22, .98)),
    url("assets/decor/orbit-theatre.svg") right center/68% auto no-repeat;
  border-color: rgba(238, 200, 147, .16);
  box-shadow: 0 24px 75px rgba(10, 28, 19, .18);
}
.band-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0 56%, rgba(238, 177, 103, .08), transparent 78%);
  pointer-events: none;
}
.manifesto-grid { position: relative; z-index: 1; }
.manifesto-grid h2 { color: var(--spectacle-ivory); text-shadow: 0 18px 55px rgba(0, 0, 0, .26); }
.manifesto-grid p { color: rgba(255, 247, 232, .72); }

.section-id i {
  background: linear-gradient(90deg, var(--line), rgba(225, 166, 94, .36), var(--line));
}
.section-heading h2 { filter: drop-shadow(0 12px 32px rgba(33, 54, 42, .08)); }

.profile-cards,
.cv-dossier,
.capability-card,
.criteria-panel,
.values-panel {
  box-shadow: 0 28px 85px rgba(32, 52, 40, .09);
}
.profile-card,
.capability-card {
  overflow: hidden;
  isolation: isolate;
}
.profile-card::before,
.capability-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 170px;
  aspect-ratio: 1;
  right: -92px;
  top: -92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(219, 111, 45, .15), rgba(101, 145, 102, .06) 44%, transparent 70%);
  transition: transform .55s var(--ease), opacity .55s ease;
}
.profile-card::after,
.capability-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--spectacle-gold-soft), transparent);
  box-shadow: 0 0 18px rgba(234, 157, 72, .38);
  transition: width .55s var(--ease);
}
.profile-card:hover::before,
.capability-card:hover::before { transform: scale(1.65); }
.profile-card:hover::after,
.capability-card:hover::after { width: 72%; }
.profile-card:hover,
.capability-card:hover { box-shadow: 0 32px 86px rgba(24, 48, 33, .15); }
.profile-card .card-icon {
  position: relative;
  border-color: rgba(216, 162, 95, .34);
  box-shadow: 0 0 0 12px rgba(229, 164, 86, .025), 0 0 35px rgba(216, 114, 49, .08);
}

.cv-dossier {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--spectacle-gold) 30%, var(--line));
  box-shadow: var(--spectacle-shadow);
}
.cv-dossier::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    url("assets/decor/orbit-theatre.svg") 92% 2%/720px auto no-repeat,
    linear-gradient(125deg, rgba(225, 153, 74, .055), transparent 35%);
  opacity: .64;
  pointer-events: none;
}
.cv-dossier > * { position: relative; z-index: 1; }
.cv-photo-frame { box-shadow: 0 24px 60px rgba(7, 20, 12, .28); }
.cv-strength-grid article { position: relative; overflow: hidden; }
.cv-strength-grid article::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 177, 99, .5), transparent);
}

/* Projects are a theatre: always dark, cinematic and high contrast. */
.projects {
  position: relative;
  isolation: isolate;
}
.projects::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 2%;
  width: 100vw;
  height: 96%;
  transform: translateX(-50%);
  background:
    url("assets/decor/orbit-theatre.svg") center 28%/min(1640px, 112vw) auto no-repeat,
    linear-gradient(180deg, transparent, rgba(42, 75, 55, .08) 18%, rgba(14, 34, 23, .08) 72%, transparent);
  opacity: .64;
  pointer-events: none;
}
.project-console {
  position: relative;
  isolation: isolate;
  color: var(--spectacle-ivory);
  border-color: rgba(246, 213, 166, .30);
  background:
    radial-gradient(circle at var(--spot-x, 44%) var(--spot-y, 38%), rgba(230, 132, 54, .12), transparent 30%),
    linear-gradient(145deg, rgba(20, 47, 33, .98), rgba(8, 24, 16, .985));
  box-shadow: var(--spectacle-shadow-dark);
}
.project-console::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 247, 226, .04), transparent 26%),
    url("assets/decor/orbit-theatre.svg") left 45%/82% auto no-repeat;
  opacity: .56;
  pointer-events: none;
}
.console-bar,
.project-tabs,
.project-controls { border-color: rgba(255, 247, 232, .13); }
.console-bar { color: rgba(255, 247, 232, .58); background: rgba(8, 26, 17, .45); backdrop-filter: blur(12px); }
.project-tab {
  position: relative;
  color: rgba(255, 247, 232, .58);
  border-color: rgba(255, 247, 232, .10);
}
.project-tab strong { color: inherit; }
.project-tab small { color: rgba(255, 247, 232, .45); }
.project-tab:hover { color: var(--spectacle-ivory); background: rgba(91, 132, 91, .12); }
.project-tab.active {
  color: var(--spectacle-ivory);
  background: linear-gradient(180deg, rgba(232, 159, 78, .11), rgba(102, 150, 103, .09));
  box-shadow: inset 0 -2px var(--spectacle-amber), 0 0 28px rgba(229, 128, 52, .05);
}
.project-tab.active::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffe2b0, var(--spectacle-amber), transparent);
  box-shadow: 0 0 15px rgba(248, 176, 86, .65);
  animation: active-tab-breathe 2.2s ease-in-out infinite;
}
.project-view { position: relative; z-index: 1; }
.project-media {
  border-color: rgba(255, 247, 232, .13);
  background: #08170f;
  box-shadow: 36px 0 80px rgba(2, 13, 7, .20) inset;
}
.project-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 70%, rgba(5, 20, 12, .46)),
    radial-gradient(circle at 50% 50%, transparent 30%, rgba(3, 15, 8, .34) 100%);
  pointer-events: none;
}
.project-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -20%;
  right: -20%;
  bottom: -22%;
  height: 44%;
  background: radial-gradient(ellipse, rgba(239, 153, 68, .26), rgba(60, 110, 71, .12) 42%, transparent 70%);
  filter: blur(34px);
  animation: project-horizon 5.8s ease-in-out infinite alternate;
  pointer-events: none;
}
.media-fallback {
  background:
    radial-gradient(circle at 50% 52%, rgba(239, 157, 72, .18), transparent 22%),
    url("assets/decor/orbit-theatre.svg") center/112% auto no-repeat,
    linear-gradient(145deg, #07170e, #193726);
}
.fallback-grid { opacity: .17; }
.fallback-orbit { filter: drop-shadow(0 0 28px rgba(237, 147, 60, .20)); }
.fallback-core { z-index: 2; text-shadow: 0 18px 55px rgba(0, 0, 0, .55); }
.fallback-core b { color: #ffac62; text-shadow: 0 0 45px rgba(237, 128, 50, .28); }
.fallback-core strong { color: var(--spectacle-ivory); }
.fallback-core small { color: rgba(255, 235, 201, .68); }
.project-copy { background: linear-gradient(160deg, rgba(28, 56, 40, .52), rgba(9, 27, 18, .64)); }
.project-type { color: #ffad67; }
.project-copy h3 { color: var(--spectacle-ivory); }
.project-description,
.project-facts dd { color: rgba(255, 247, 232, .76); }
.project-facts div { border-color: rgba(255, 247, 232, .13); }
.project-facts dt { color: rgba(255, 247, 232, .48); }
.mini-link { color: rgba(255, 247, 232, .82); border-color: rgba(255, 247, 232, .18); background: rgba(255, 247, 232, .025); }
.mini-link:hover { color: #ffd39a; border-color: #e77b31; box-shadow: 0 0 24px rgba(231, 123, 49, .14); }
.project-controls { background: rgba(6, 23, 14, .44); }
.project-controls button { color: var(--spectacle-ivory); border-color: rgba(255, 247, 232, .18); }
.project-count { color: rgba(255, 247, 232, .55); }

.trajectory-track::before {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 153, 73, .42), rgba(107, 151, 104, .32), transparent);
  box-shadow: 0 0 18px rgba(230, 153, 73, .12);
}
.trajectory-node {
  box-shadow: 0 0 0 10px rgba(225, 144, 63, .025), 0 0 34px rgba(225, 144, 63, .11);
}
.trajectory-card:hover .trajectory-node { box-shadow: 0 0 0 13px rgba(225, 144, 63, .035), 0 0 46px rgba(225, 144, 63, .20); }

.values-panel {
  border-color: color-mix(in srgb, var(--spectacle-gold) 32%, var(--line));
  background:
    radial-gradient(circle at 88% 20%, rgba(230, 143, 62, .17), transparent 25%),
    url("assets/decor/orbit-theatre.svg") 105% center/68% auto no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--brown) 14%, var(--surface)), color-mix(in srgb, var(--green) 16%, var(--surface)));
}
.values-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,.025), transparent 38% 70%, rgba(234,159,75,.04));
  pointer-events: none;
}
.principle { transition: padding .3s ease, background .3s ease; }
.principle:hover { padding-left: 12px; background: linear-gradient(90deg, rgba(230, 144, 62, .06), transparent); }

/* The finale is a light portal rather than a plain contact card. */
.contact-panel {
  color: var(--spectacle-ivory);
  border-color: rgba(247, 215, 171, .32);
  background:
    linear-gradient(90deg, rgba(7, 24, 15, .96) 0 42%, rgba(7, 24, 15, .70) 68%, rgba(7, 24, 15, .52)),
    url("assets/decor/contact-horizon.svg") right bottom/cover no-repeat,
    linear-gradient(145deg, #173927, #0a2116);
  box-shadow: var(--spectacle-shadow-dark);
}
.contact-panel::before {
  width: min(60vw, 760px);
  right: -12%;
  top: -52%;
  border-color: rgba(245, 190, 116, .24);
  box-shadow:
    0 0 0 70px rgba(237, 173, 93, .025),
    0 0 0 160px rgba(237, 173, 93, .018),
    0 0 110px rgba(227, 120, 48, .12);
  animation: portal-breathe 8s ease-in-out infinite alternate;
}
.contact-panel h2 { color: var(--spectacle-ivory); text-shadow: 0 22px 62px rgba(0, 0, 0, .45); }
.contact-panel > p { color: rgba(255, 247, 232, .74); }
.contact-panel .eyebrow { color: #efbd77; }
.contact-channels {
  border-color: rgba(255, 247, 232, .16);
  background: rgba(4, 19, 11, .52);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 24px 75px rgba(0, 0, 0, .24);
}
.contact-channel {
  border-color: rgba(255, 247, 232, .13);
  background: linear-gradient(145deg, rgba(255, 247, 232, .035), rgba(255, 247, 232, .008));
  transition: background .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.contact-channel:hover {
  background: linear-gradient(145deg, rgba(234, 159, 75, .12), rgba(91, 145, 96, .06));
  box-shadow: 0 0 45px rgba(235, 145, 60, .08) inset;
}
.contact-channel small { color: rgba(255, 247, 232, .56); }
.contact-channel a,
.contact-channel strong { color: var(--spectacle-ivory); }
.copy-button { color: #ffb06d; }
.contact-availability { color: rgba(255, 237, 204, .74); }
.contact-availability i { box-shadow: 0 0 18px rgba(150, 203, 145, .58); }

.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(233, 177, 103, .26), transparent);
}

/* A richer reveal with a restrained glint; still accessible. */
.reveal {
  filter: blur(8px);
  transform: translateY(30px) scale(.992);
  transition:
    opacity .9s var(--ease) var(--delay, 0ms),
    transform .9s var(--ease) var(--delay, 0ms),
    filter .9s var(--ease) var(--delay, 0ms);
}
.reveal.is-visible { filter: none; transform: none; }

@keyframes status-line { 0%,100% { transform: scaleX(.45); opacity: .45; transform-origin: left; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes operator-aura { from { opacity: .48; transform: scale(.92); } to { opacity: .9; transform: scale(1.08); } }
@keyframes core-pulse { 0%,100% { transform: scale(.97); } 50% { transform: scale(1.04); } }
@keyframes panel-glint { 0%,62% { transform: translateX(-130%); } 83%,100% { transform: translateX(130%); } }
@keyframes signal-float-a { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes signal-float-b { 0%,100% { translate: 0 0; } 50% { translate: 0 8px; } }
@keyframes active-tab-breathe { 0%,100% { opacity: .46; transform: scaleX(.62); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes project-horizon { from { opacity: .48; transform: translateY(8%); } to { opacity: .86; transform: translateY(-3%); } }
@keyframes portal-breathe { from { transform: scale(.94); opacity: .66; } to { transform: scale(1.05); opacity: 1; } }

@media (max-width: 1180px) {
  .hero-machine::before { inset-inline: 0; }
}

@media (max-width: 980px) {
  .hero-copy::after { display: none; }
  .hero-machine { filter: drop-shadow(0 28px 55px rgba(7, 22, 13, .18)); }
}

@media (max-width: 640px) {
  .field-canvas { opacity: .20; }
  .hero::before { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 68%, transparent)); }
  .hero-copy { padding-top: 10px; }
  .hero h1 { text-shadow: 0 16px 45px rgba(22, 41, 31, .13); }
  .hero-machine::before { inset: 1% -2% 0; }
  .signal-card-a,
  .signal-card-b { animation-duration: 8s; }
  .band-section { background-size: auto, 1250px auto; background-position: center, 56% center; }
  .project-media::after { height: 34%; }
  .contact-panel {
    background:
      linear-gradient(180deg, rgba(7, 24, 15, .93), rgba(7, 24, 15, .74)),
      url("assets/decor/contact-horizon.svg") 72% bottom/auto 70% no-repeat,
      #0b2518;
  }
  .contact-panel::before { width: 520px; right: -310px; top: -200px; }
  .contact-channel:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .availability-line::after,
  .operator-card::after,
  .ai-core,
  .signal-card,
  .signal-card::after,
  .project-tab.active::after,
  .project-media::after,
  .contact-panel::before {
    animation: none !important;
  }
  .reveal { filter: none; }
}

/* Keep the long Gmail address elegant on wide three-column contact layouts. */
@media (min-width: 981px) {
  .contact-channel-email a {
    font-size: clamp(17px, 1.28vw, 20px);
    line-height: 1.14;
    letter-spacing: -.045em;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}