/* Deloitte Digital Splash Page Styles */
:root {
  --color-bg: #f2f2f2; /* off-white */
  --color-brand-green: #046A38; /* pantone 349 */
  --color-text: #033b20;
  --color-accent: #0b8f51;
  --font-sans: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --max-width: 1440px;
  --gutter: clamp(1rem, 2vw, 2.5rem);
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
}

.skip-link { position: absolute; left: -999px; top: auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left: 0; top: 0; width:auto; height:auto; background:#000; color:#fff; padding:.75rem 1rem; z-index:1000; }

.hero { display:flex; align-items:center; justify-content:center; padding:clamp(2rem,6vh,6rem) var(--gutter); }
/* Refactored to flex so columns stay vertically centered instead of reflowing awkwardly */
.hero__inner { width:100%; max-width:var(--max-width); display:flex; align-items:center; justify-content:space-between; gap:clamp(2rem,6vw,6rem); }
.hero__inner > .tagline { flex:1 1 50%; }
.hero__inner > .orb { flex:1 1 50%; }

.tagline { font-weight:300; font-size:clamp(1.75rem,4vw,3.5rem); line-height:1.05; letter-spacing:-.5px; color:var(--color-brand-green); margin:0; }
.tagline__line { display:block; }

/* Emphasis style option (extra-bold italic) */
.tagline .emph { font-style:italic; font-weight:800; }

/* Subheadline style */
.subheadline { font-size:clamp(1rem,1.2vw,1.125rem); font-weight:600; text-transform:none; letter-spacing:0; margin-top:1.25rem; color:var(--color-text); max-width:40ch; }

/* Numeral callout */
.callout-number { font-weight:800; font-size:clamp(3rem,8vw,6rem); font-style:italic; -webkit-text-stroke:2px #000; color:transparent; line-height:.9; }

/* Orb */
.orb { position:relative; max-width: min(600px, 60vw); aspect-ratio:1/1; margin-inline:auto; animation: float 14s ease-in-out infinite; }
.orb__parallax { display:block; width:100%; height:100%; transform:translate3d(0,0,0); will-change:transform; }
.orb__img { width:100%; height:100%; object-fit:contain; display:block; filter: drop-shadow(0 12px 28px rgba(0,0,0,.12)); pointer-events:none; }
/* Shadow sits underneath; JS will adjust transform & scale for depth illusion */
.orb__shadow { position:absolute; left:50%; bottom:-4%; width:70%; aspect-ratio:1/0.28; transform:translateX(-50%) scale(1); background:radial-gradient(ellipse at center, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0.04) 70%, rgba(0,0,0,0) 100%); filter:blur(14px); opacity:0.45; pointer-events:none; will-change:transform,opacity; transition:opacity .6s var(--ease-out); }

@keyframes float { 0%,100% { transform:translateY(-1.5%);} 50% { transform:translateY(1.5%);} }
/* Removed mesh/node pulse animations since static image used */

/* Footer */
.site-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; padding:1.25rem var(--gutter) 2rem; max-width:var(--max-width); margin-inline:auto; width:100%; border-top:1px solid #d6d6d6; }
.footer__left { display:flex; align-items:center; gap:1rem; }
.logo__img { height:40px; width:auto; display:block; }
.footer__nav ul { list-style:none; padding:0; margin:0; display:flex; align-items:center; gap:clamp(.75rem,2vw,2rem); flex-wrap:wrap; }
.footer__nav a { text-decoration:none; font-weight:600; color:var(--color-brand-green); position:relative; }
.footer__nav a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--color-brand-green); transition:width .35s var(--ease-out); }
.footer__nav a:focus-visible, .footer__nav a:hover { outline:none; }
.footer__nav a:hover::after, .footer__nav a:focus-visible::after { width:100%; }

/* Social icon buttons (compact) */
.social { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:transparent; position:relative; color:var(--color-brand-green); line-height:1; }
.social .icon, .social .icon-img { width:18px; height:18px; transition:transform .3s var(--ease-out), filter .3s var(--ease-out); display:block; }
.social:focus-visible, .social:hover { outline:none; }
.social:hover .icon, .social:focus-visible .icon, .social:hover .icon-img, .social:focus-visible .icon-img { transform:scale(1.1); filter:brightness(1.08) saturate(1.05); }
.social--ig { color:var(--color-brand-green); }
.social--li { color:var(--color-brand-green); }
.footer__nav a.social::after { display:none; }

/* Responsive tweaks */
@media (max-width: 1100px) {
  .hero__inner { gap:clamp(2rem,5vw,4rem); }
  .tagline { font-size:clamp(1.9rem,5vw,3rem); }
}
@media (max-width: 880px) {
  .hero { padding:clamp(2rem,8vh,5rem) var(--gutter) 3rem; }
  .hero__inner { flex-direction:column; align-items:flex-start; }
  .orb { order:-1; margin-inline:auto; max-width:min(520px,78vw); }
  .tagline { text-align:left; width:100%; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .orb, .orb__mesh path, .orb__nodes circle { animation: none !important; }
}

/* Utility classes */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.center { text-align:center; }
