/* Shared depth and motion layer for the graphite and silver themes. */
:root {
  --depth-surface: linear-gradient(145deg, #263646, #1a2633 48%, #141e29);
  --depth-edge: #ffffff16;
  --depth-shadow: #00000030;
  --depth-shadow-hover: #0000004a;
  --depth-glow: #ffffff0c;
  --depth-aura: #678aa51a;
  --depth-section: linear-gradient(125deg, #162330, #101923);
  --depth-ease: cubic-bezier(.22, 1, .36, 1);
}

html[data-theme="light"] {
  --depth-surface: linear-gradient(145deg, #ffffff, #edf1f6 48%, #dfe5ed);
  --depth-edge: #ffffffed;
  --depth-shadow: #334a6420;
  --depth-shadow-hover: #334a6430;
  --depth-glow: #ffffff8c;
  --depth-aura: #ffffffa3;
  --depth-section: linear-gradient(125deg, #e6ebf1, #d5dee8);
}

/* The hero keeps the equipment photography, with a quiet sense of perspective. */
.home-hero { isolation: isolate; }
.hero-photo { filter: saturate(.88) contrast(1.04); }
.hero-shade {
  background: linear-gradient(90deg, #0d1620 0%, #0d1620f5 17%, #0d1620c9 39%, #0d16203d 68%, #0d162020),
    linear-gradient(0deg, #0d1620d9, transparent 35%);
}
.hero-copy > .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid #ff8b3f40;
  border-radius: 100px;
  background: #14212ecc;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 8px 28px #0000001a;
}
.hero-copy .eyebrow span { box-shadow: 0 0 14px #ff7a0080; }
.home-hero h1 em {
  color: #ff8a3e;
  background: linear-gradient(110deg, #ff6500 10%, #ffb77d 72%, #ff7a00);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-note { color: #bdc9d4; }
.hero-caption {
  border: 1px solid #ffffff30;
  border-left: 3px solid var(--unit-orange);
  border-radius: 16px;
  background: linear-gradient(130deg, #24394deb, #101e2ed9);
  box-shadow: inset 0 1px 0 #ffffff20, 0 22px 55px #00000040;
  transform: perspective(900px) rotateY(-9deg) rotateZ(-2deg);
}
.hero-orbits {
  --orbit-opacity: .62;
  position: absolute;
  right: -5%;
  top: 12%;
  width: min(54vw, 770px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: perspective(1000px) rotateY(-24deg) rotateX(57deg) rotateZ(-27deg);
  opacity: var(--orbit-opacity);
}
.hero-orbits > span {
  position: absolute;
  inset: 8%;
  border: 1px solid #ffffff2b;
  border-radius: 50%;
  box-shadow: 0 0 36px #ff65000b, inset 0 0 32px #ffffff05;
}
.hero-orbits > span:nth-child(2) { inset: 20%; border-color: #ff9d5d55; }
.hero-orbits > span:nth-child(3) { inset: 32%; border-style: dashed; border-color: #ffffff38; }
.hero-orbits > span:first-child::after {
  content: '';
  position: absolute;
  top: 14%;
  left: 14%;
  width: 10px;
  height: 10px;
  background: #ff9b58;
  border-radius: 50%;
  box-shadow: 0 0 0 6px #ff650017, 0 0 24px #ff6500;
}

.inner-hero {
  background: radial-gradient(ellipse at 88% 10%, #30465d70, transparent 55%), #0d1620;
  border-bottom: 1px solid #ffffff12;
}
.inner-hero::after {
  transform: perspective(900px) rotateX(48deg) rotateY(-18deg);
  border-color: #ff9a5730;
}

/* Rounded, bevelled surfaces with a brighter top edge and a soft base shadow. */
html[data-theme] :is(.service-card, .content-service-card, .case-card, .content-check-panel, .content-partner-node, .quote-form, .contact-form, .enquiry-success) {
  background: var(--depth-surface);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--depth-edge), 0 2px 2px var(--depth-shadow), 0 18px 38px -14px var(--depth-shadow);
}
html[data-theme] :is(.services-section, .industries-section, .coverage-section, .content-soft, .quote-section) {
  background: radial-gradient(ellipse at 15% 0%, var(--depth-aura), transparent 55%), var(--depth-section);
}
.service-card,
.content-service-card,
.case-card { position: relative; isolation: isolate; }
.content-service-card { overflow: hidden; }
.service-card::before,
.content-service-card::before,
.case-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(350px circle at var(--glow-x, 50%) var(--glow-y, 0%), var(--depth-glow), transparent 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.service-card::after { height: 3px; border-radius: 3px; }
.service-icon,
.content-service-card .content-icon,
.step-count {
  border-radius: 16px;
  box-shadow: inset 0 1px 0 #ffffff38, 3px 5px 0 #ff650014, 0 10px 22px #00000010;
  transform: perspective(500px) rotateY(-12deg) rotateX(7deg);
  transition: transform 350ms var(--depth-ease), box-shadow 350ms ease;
}
.service-card-top { align-items: flex-start; }
.card-number { font-size: 11px; letter-spacing: .08em; }
.journey-icon { border-radius: 13px; box-shadow: inset 0 1px 0 #ffffff0c, 0 5px 12px #00000024; }
.journey-step.active .journey-icon { box-shadow: inset 0 1px 0 #ff9a5730, 0 6px 20px #ff650012; }
.industry-tags span,
.content-country-tags span { border-radius: 100px; }

/* Deliberately dark brand illustrations keep their own material and lighting. */
.partner-panel,
.handling-visual,
.content-about-panel {
  border: 1px solid #8197ab40;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 #ffffff24, 0 4px 0 #08101b, 0 30px 65px -20px #00000066;
}
.partner-panel { background: radial-gradient(ellipse at 0% 0%, #36516980, transparent 65%), linear-gradient(145deg, #213344, #111d28); }
.handling-visual { background: radial-gradient(ellipse at 50% 30%, #3b526b, #101c28 75%); }
.handling-visual::before {
  background-size: 36px 36px;
  transform: perspective(500px) rotateX(54deg) rotateZ(-22deg) scale(1.8);
  opacity: .8;
}
.handling-icon {
  border-radius: 30px;
  border-color: #b5cce24a;
  background: linear-gradient(140deg, #56738c70, #20364cbd);
  transform: perspective(700px) rotateY(-18deg) rotateX(10deg) rotateZ(-5deg);
  box-shadow: inset 0 1px 0 #ffffff45, 8px 9px 0 #0b182780, 0 28px 45px #00000055;
}
.handling-icon > svg { filter: drop-shadow(3px 5px 0 #0d162060); }
.technical-label { border-radius: 9px; box-shadow: inset 0 1px 0 #ffffff12, 0 10px 22px #0000002a; }
.case-art > svg {
  padding: 13px;
  box-sizing: content-box;
  border: 1px solid #8197ab36;
  border-radius: 20px;
  background: #8197ab0e;
  transform: perspective(600px) rotateY(-18deg) rotateX(9deg);
  filter: drop-shadow(7px 10px 4px #00000024);
  transition: transform 400ms var(--depth-ease);
}

html[data-theme] .button { border-radius: 12px; transition: transform 220ms var(--depth-ease), box-shadow 220ms ease, background 180ms ease; }
html[data-theme] .button-primary {
  background: linear-gradient(155deg, #ff913f, #ff6500 58%, #f45b00);
  box-shadow: inset 0 1px 0 #ffd8b680, 0 3px 0 #a84200, 0 8px 22px #ff650020;
}
html[data-theme] .button-white {
  background: linear-gradient(150deg, #fff, #e4eaf0);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #aebcca, 0 12px 24px #5b29002b;
}
.cta-section {
  background: radial-gradient(ellipse at 18% 0%, #ffb076, transparent 65%), linear-gradient(120deg, #ff7b1e, #ff6500);
  box-shadow: inset 0 1px 0 #ffd3ad80;
}
.cta-section::after { transform: perspective(700px) rotateX(48deg) rotateY(-20deg); }
html[data-theme] .site-header { box-shadow: inset 0 1px 0 var(--depth-edge), 0 10px 30px -14px var(--depth-shadow); }
.menu-toggle { border-radius: 11px; }
.page-tool { box-shadow: inset 0 1px 0 #ffffff24, 0 5px 0 #08101b25, 0 12px 25px #00000026; }

@media (min-width: 681px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-theme] .depth-card,
  html[data-theme] .depth-card:hover {
    transform: perspective(1000px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg)) translateY(var(--depth-lift, 0px));
    transition: transform 450ms var(--depth-ease), box-shadow 300ms ease, border-color 250ms ease;
  }
  html[data-theme] .depth-card.is-tilting { --depth-lift: -6px; transition-duration: 130ms, 300ms, 250ms; }
  html[data-theme] :is(.service-card, .content-service-card[href], .case-card):hover {
    border-color: var(--theme-accent-text);
    box-shadow: inset 0 1px 0 var(--depth-edge), 0 4px 4px var(--depth-shadow), 0 28px 48px -12px var(--depth-shadow-hover);
  }
  .service-card:hover::before,
  .content-service-card:hover::before,
  .case-card:hover::after { opacity: 1; }
  .service-card:hover .service-icon,
  .content-service-card:hover .content-icon { transform: perspective(500px) rotateY(0deg) rotateX(0deg) translateY(-3px); }
  .case-card:hover .case-art > svg { transform: perspective(600px) rotateY(0deg) rotateX(0deg) translateY(-4px); }
  html[data-theme] .button-primary:hover { box-shadow: inset 0 1px 0 #ffd8b680, 0 5px 0 #a84200, 0 14px 28px #ff650035; }
}

html[data-theme] :is(.service-card, .content-service-card[href], .case-card):focus-visible {
  border-color: var(--theme-accent-text);
  box-shadow: inset 0 1px 0 var(--depth-edge), 0 18px 35px var(--depth-shadow-hover);
}
html[data-theme] .button:active { transform: translateY(1px); }

@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: hero-settle 1200ms var(--depth-ease) both; }
  .hero-copy { animation: hero-arrive 750ms var(--depth-ease) both; }
  .hero-caption { animation: caption-arrive 950ms var(--depth-ease) both; }
  .hero-orbits { animation: orbit-arrive 1100ms var(--depth-ease) both; }
}
@keyframes hero-settle { from { scale: 1.045; } to { scale: 1; } }
@keyframes hero-arrive { from { opacity: .3; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes caption-arrive { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes orbit-arrive { from { opacity: 0; scale: .92; } to { opacity: var(--orbit-opacity); scale: 1; } }

@media (max-width: 900px) {
  .hero-orbits { right: -20%; width: 80vw; --orbit-opacity: .35; }
  .hero-shade {
    background: linear-gradient(90deg, #0d1620f5, #0d1620e0 38%, #0d162054),
      linear-gradient(0deg, #0d162099, transparent);
  }
  .hero-copy > .eyebrow { font-size: 9px; }
}
@media (max-width: 680px) {
  .hero-orbits { display: none; }
  .hero-shade {
    background: linear-gradient(90deg, #0d1620e8, #0d16208a),
      linear-gradient(0deg, #0d1620db, transparent 50%);
  }
  .hero-copy > .eyebrow { padding: 8px 11px; font-size: 8px; letter-spacing: .13em; }
  html[data-theme] :is(.service-card, .content-service-card, .case-card, .quote-form, .contact-form) { border-radius: 16px; }
  .partner-panel, .handling-visual, .content-about-panel { border-radius: 20px; }
  html[data-theme] .depth-card,
  html[data-theme] .depth-card:hover { transform: none; }
}
@media (hover: none), (pointer: coarse) {
  html[data-theme] :is(.depth-card, .service-card:hover, .content-service-card[href]:hover, .case-card:hover) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] :is(.depth-card, .service-card:hover, .content-service-card[href]:hover, .case-card:hover, .button:hover, .button:active) { transform: none; }
  .hero-photo, .hero-copy, .hero-caption, .hero-orbits { animation: none; }
}
@media (forced-colors: active) {
  .home-hero h1 em { background: none; -webkit-text-fill-color: currentColor; }
  .hero-orbits { display: none; }
}
@media print {
  .hero-orbits { display: none; }
  html[data-theme] .depth-card { transform: none; box-shadow: none; }
}