/* ==========================================================================
   GLEN SUSANS — SPLASH PAGE STYLES (glen-theme port)
   Creative Work + Design Strategy templates.

   Sections 1–9 are ported verbatim from Templates/components/splash-styles.css.
   Section 10 replaces all WPBakery/Uncode layout overrides with glen-theme
   adaptations: no page-id selectors, no full-bleed tricks, no #masthead rules.
   ========================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS — mapped to the glensusans.com brand colour system.
   --------------------------------------------------------------------- */
:root {
  /* Brand accent — functional only (CTAs, labels, links, interactive
     elements). Never used as a decorative fill or background. */
  --c-orange: #ff540f;
  --c-orange-hover: #ff7a3d;

  /* Neutral surfaces */
  --c-white: #ffffff;
  --c-grey-50: #f7f7f5;   /* alternating section backgrounds */
  --c-grey-100: #f4f4f4;  /* cards, callouts, elevated panels */
  --c-grey-200: #e5e5e5;  /* borders, dividers */
  --c-grey-400: #9ca3af;  /* captions, metadata, muted labels */
  --c-grey-700: #4b5563;  /* default body copy on light surfaces */
  --c-ink: #1d2438;       /* headings, nav, high-contrast text */

  /* Dark surfaces */
  --c-hero-navy: #0f1420;  /* hero sections */
  --c-deep-navy: #0f1623;  /* Results & Impact sections */
  --c-near-black: #111827; /* "The Work" sections */

  /* One-off hero glow accent — ambient mood lighting behind hero copy. */
  --c-glow-purple: #4f29b7;

  /* Semantic surface roles */
  --surface-dark: var(--c-hero-navy);
  --surface-light: var(--c-white);
  --surface-light-alt: var(--c-grey-50);
  --surface-recede: var(--c-grey-100);

  /* Ink roles */
  --ink-on-dark: #f5f5f4;
  --ink-on-dark-muted: #aab0c2;
  --ink-on-dark-faint: #707790;
  --ink-on-light: var(--c-ink);
  --ink-on-light-muted: var(--c-grey-700);
  --ink-on-light-faint: var(--c-grey-400);

  /* Type scale (fluid, clamp-based) */
  --fs-eyebrow: 0.8125rem;
  --fs-body: 1.0625rem;
  --fs-body-sm: 0.9375rem;
  --fs-h1: clamp(1.75rem, min(1rem + 4.4vw, 1.5rem + 7svh), 4.25rem);
  --fs-h2: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
  --fs-h3: 1.25rem;

  /* Spacing scale */
  --space-section: clamp(5rem, 4rem + 4vw, 8.5rem);
  --space-section-end: clamp(3rem, 2.4rem + 2.4vw, 5rem);
  --space-xl: 4rem;
  --space-lg: 2.5rem;
  --space-md: 1.5rem;
  --space-sm: 1rem;
  --space-xs: 0.5rem;

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(1.5rem, 1rem + 2vw, 3rem);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 1100ms;

  /* Fonts */
  --font-sans: "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Hero glow + functional accent. The glow is the one-off purple mood
   light; the eyebrow/CTA stay Brand Orange. */
main {
  --persona-accent: var(--c-orange);
  --persona-accent-hover: var(--c-orange-hover);
  --persona-glow: 79, 41, 183; /* rgb of --c-glow-purple, for use in rgba() */
}

/* ---------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "ss01" 1;
  -webkit-font-smoothing: antialiased;
  background: var(--surface-light);
  color: var(--ink-on-light);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
ul[role="list"] { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Focus visibility — keyboard users get a clear, on-brand ring. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Shared circular icon button used across all three modules */
.icon-circle {
  --size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.icon-circle--sm { --size: 32px; }
.icon-circle--outline {
  border: 1.5px solid currentColor;
  background: transparent;
}

/* ---------------------------------------------------------------------
   3. MODULE 01 — HERO
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  --header-offset: 0px;
  min-height: calc(100vh - var(--header-offset));
  min-height: calc(100svh - var(--header-offset));
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.hero__glow {
  position: absolute;
  width: 160vmin;
  height: 160vmin;
  border-radius: 50%;
  top: -60vmin;
  right: -50vmin;
  z-index: 0;
  background: radial-gradient(
    circle,
    #261c56 0%,
    #1f1848 28%,
    #181635 52%,
    #131528 70%,
    #0f1420 88%
  );
  filter: blur(40px);
  transform-origin: center;
  will-change: transform, opacity;
  animation: heroGlowDrift 28s ease-in-out infinite;
}

@keyframes heroGlowDrift {
  0%   { transform: translate(0, 0);          opacity: 1;    }
  50%  { transform: translate(-80vw, 65vh);   opacity: 0.85; }
  100% { transform: translate(0, 0);          opacity: 1;    }
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block:
    clamp(1.5rem, min(2rem + 2vw, 1rem + 9svh), 7rem)
    clamp(1.25rem, min(1rem + 2vw, 0.5rem + 6svh), 4.5rem);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--persona-accent);
  margin: 0 0 1.75rem;
  opacity: 0;
  animation: rise var(--dur-slow) var(--ease) forwards;
  animation-delay: 60ms;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255, 84, 15, 0.18);
}

.hero__headline {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 19ch;
  margin: 0 0 clamp(0.625rem, min(1.5rem, 3svh), 1.75rem);
  opacity: 0;
  animation: rise var(--dur-slow) var(--ease) forwards;
  animation-delay: 140ms;
}

/* Responsive line-break helpers — hero headline only */
.hero__br--m  { display: none; }

/* ── Cycling headline word ───────────────────────────────────────────── */
.hero__cycle-word {
  color: var(--c-orange);
  display: inline-block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero__cycle-word.is-exiting {
  opacity: 0;
  transform: translateY(-6px);
}
.hero__cycle-word.is-entering {
  opacity: 0;
  transform: translateY(8px);
}
@media (prefers-reduced-motion: reduce) {
  .hero__cycle-word,
  .hero__cycle-word.is-exiting,
  .hero__cycle-word.is-entering {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

.hero__body {
  font-size: clamp(0.9375rem, min(1rem + 0.3vw, 0.75rem + 3svh), 1.1875rem);
  line-height: 1.5;
  color: var(--ink-on-dark-muted);
  max-width: 34ch;
  margin: 0 0 clamp(1rem, min(2.75rem, 5svh), 2.75rem);
  opacity: 0;
  animation: rise var(--dur-slow) var(--ease) forwards;
  animation-delay: 220ms;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-on-dark);
  opacity: 0;
  animation: rise var(--dur-slow) var(--ease) forwards;
  animation-delay: 300ms;
}

.hero__cta .icon-circle {
  background: var(--persona-accent);
  color: #ffffff;
}

.hero__cta:hover .icon-circle,
.hero__cta:focus-visible .icon-circle {
  transform: translateY(3px);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow { animation: none; }
  .hero__eyebrow, .hero__headline, .hero__body, .hero__cta {
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 980px) {
  .hero__inner        { text-align: center; }
  .hero__eyebrow      { justify-content: center; }
  .hero__headline,
  .hero__body         { margin-inline: auto; }
  .hero__headline     { max-width: 100%; font-size: clamp(2.75rem, 8vw, 4.25rem); }
  .hero__body         { font-size: 1.125rem; }
  .hero__cycle-word   { display: block; font-size: 1.15em; }
  .hero__br--d        { display: none; }
  .hero__br--m        { display: inline; }
}

@media (max-width: 640px) {
  .hero__headline    { max-width: 100%; letter-spacing: -0.01em; font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .hero__body        { font-size: 1.125rem; }
  .hero              { --fs-h1: clamp(2.3rem, min(1.3225rem + 5.819vw, 1.984rem + 9.2575svh), 5.606rem); }
}

@media (max-height: 520px) {
  .hero__inner { padding-block: 1rem; }
  .hero__eyebrow { margin-bottom: 0.75rem; }
  .hero__headline {
    font-size: clamp(1.5rem, 4.5svh, 2.5rem);
    line-height: 1.12;
    margin-bottom: 0.625rem;
  }
  .hero__body {
    font-size: 0.9375rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-height: 520px) {
  .hero__body { display: none; }
}

@media (max-height: 520px) and (min-width: 981px) {
  .hero__headline { max-width: none; font-size: clamp(2.25rem, 5.5svh, 3rem); }
  .hero__br--d    { display: none; }
}

@media (max-height: 360px) {
  .hero {
    height: 100vh;
    height: 100svh;
    max-height: calc(100svh - var(--header-offset));
  }
}

/* ── Hero portrait ────────────────────────────────────────────────────────
   Anchored top-right. z-index 1 — above grain, below text (z-index 2). */
.hero__portrait {
  position: absolute;
  top: 0;
  right: 3%;
  height: 100%;
  width: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.4) 4%,
    black 10%,
    black 70%,
    rgba(0,0,0,0.5) 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.4) 4%,
    black 10%,
    black 70%,
    rgba(0,0,0,0.5) 84%,
    transparent 100%
  );
  opacity: 0;
  animation: rise 2.2s var(--ease) 380ms both;
}

@media (min-width: 981px) {
  .hero__portrait {
    top: 5px;
    bottom: auto;
    height: max(100svh, 800px);
    width: auto;
    right: clamp(-40vw, calc(-4vw + (100vw - 1500px) * 0.5), 1vw);
  }
  .creative-work-page .hero__portrait {
    top: 5px;
  }
}

@media (max-width: 980px) {
  .hero__portrait { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__portrait { animation: none; opacity: 1; }
}

/* ---------------------------------------------------------------------
   4. SHARED SECTION HEAD (used by Work + Philosophy)
   --------------------------------------------------------------------- */
.section-head { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

.section-head__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 0.875rem;
  position: relative;
  padding-bottom: 0.875rem;
}
.section-head__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--c-orange);
  border-radius: var(--radius-pill);
}

.section-head__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink-on-light);
  max-width: 32ch;
}

/* ---------------------------------------------------------------------
   5. MODULE 02 — SELECTED WORK
   --------------------------------------------------------------------- */
.work {
  background: var(--surface-light);
  padding-top: var(--space-section);
  padding-bottom: var(--space-section-end);
}

.work .section-head {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}
.work .section-head__eyebrow::after {
  left: 50%;
  transform: translateX(-50%);
}
.work .section-head__title {
  margin-inline: auto;
}

.work-grid-outer {
  width: 100%;
  padding-inline: clamp(1.25rem, 1rem + 2.5vw, 4.5rem);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 0.3rem + 0.6vw, 1rem);
  list-style: none !important;
}

.work-grid > li {
  list-style: none !important;
}

.work-card__link {
  display: block;
  height: 100%;
}

.work-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-grey-200);
  border-radius: 6px;
  transform-origin: center;
  will-change: transform;
  transition: transform 280ms ease-out;
}

.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--dur-med) var(--ease);
}

.work-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 13, 26, 0.82) 0%, rgba(10, 13, 26, 0.3) 28%, transparent 52%),
    linear-gradient(to top,    rgba(10, 13, 26, 0.82) 0%, rgba(10, 13, 26, 0.3) 28%, transparent 52%);
  pointer-events: none;
  z-index: 1;
}

.work-card__meta {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem 1.125rem;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

.work-card__index {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-orange);
  letter-spacing: 0.04em;
}

.work-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ffffff;
  line-height: 1.25;
}

.work-card__disciplines {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1rem 1.125rem;
  margin: 0;
  font-size: clamp(0.625rem, 0.85vw, 0.8125rem);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transform: none;
  transition: none;
  pointer-events: none;
}

.work-card__hover {
  position: absolute;
  top: 0;
  bottom: auto;
  right: 0;
  padding: 1rem 1.125rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-med) var(--ease),
              transform var(--dur-med) var(--ease),
              translate var(--dur-fast) var(--ease);
}

.work-card__hover:hover {
  translate: 0 -3px;
}

.work-card__hover .icon-circle {
  --size: 20px;
  background: var(--c-orange);
  color: #ffffff;
  border: none;
}

.work-card:hover .work-card__media img,
.work-card:focus-within .work-card__media img {
  transform: scale(1.015);
}
.work-card:hover .work-card__hover,
.work-card:focus-within .work-card__hover {
  opacity: 1;
  transform: translateY(0);
}

.work-card__hover .icon-circle:hover {
  transform: translateX(3px);
}

@media (hover: hover) {
  .work-card:hover .work-card__media,
  .work-card:focus-within .work-card__media {
    transform: scale(1.015);
  }
}

.work-reveal-trigger {
  grid-column:    1 / -1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.625rem;
  padding-top:    clamp(1.5rem, 2vw, 2rem);
  padding-bottom: clamp(0.25rem, 0.5vw, 0.5rem);
}

.work-reveal-btn {
  appearance:     none;
  background:     none;
  border:         none;
  padding:        0;
  cursor:         pointer;
  font-family:    inherit;
  font-size:      1.0625rem;
  font-weight:    600;
  color:          var(--ink-on-light);
  letter-spacing: 0.01em;
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  transition:     color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.work-reveal-btn:hover,
.work-reveal-btn:focus-visible {
  color:   var(--c-orange);
  outline: none;
}

.work-reveal-tagline {
  font-family:    inherit;
  font-size:      0.75rem;
  font-weight:    400;
  color:          #6b7280;
  letter-spacing: 0.02em;
  margin:         0;
  text-align:     center;
}

.work-reveal-trigger.is-hidden {
  display: none;
}

.work-card--bonus {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.work-card--bonus.is-visible {
  display: block;
}

.work-card--bonus.is-revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 980px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; gap: 0.625rem; }
  .work-grid-outer { padding-inline: clamp(1rem, 4vw, 1.5rem); }
  .work-card__title { font-size: 1rem; }
  .work-card__hover { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   6. MODULE 03 — ABOUT ME
   --------------------------------------------------------------------- */
.philosophy {
  position: relative;
  background:
    radial-gradient(ellipse 65% 55% at 8% 5%, rgba(120, 90, 220, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 92% 95%, rgba(25, 12, 70, 0.5) 0%, transparent 58%),
    radial-gradient(circle at 30% 20%, #2E1870 0%, #3D22A0 30%, #4F29B7 65%, #6B45CC 100%);
  padding-top: var(--space-section-end);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4.25rem);
}

.philosophy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(6, 4, 18, 0)    0%,
    rgba(6, 4, 18, 0.2)  30%,
    rgba(5, 3, 16, 0.65) 62%,
    #060312              100%
  );
  opacity: var(--philosophy-darken, 0);
  pointer-events: none;
  will-change: opacity;
}

.philosophy > .container {
  position: relative;
  z-index: 1;
}

.about__layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: clamp(3rem, 2rem + 4.5vw, 6.5rem);
  align-items: start;
}

.about__left {
  align-self: stretch;
}

.contact-panel {
  position: sticky;
  top: 3rem;
  transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 1.875rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-align: center;
}

.contact-panel__avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.05),
    0 4px 20px rgba(0, 0, 0, 0.22);
}

.contact-panel__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.contact-panel__name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-on-dark);
  margin-bottom: 0.3rem;
}

.contact-panel__title {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.contact-panel__meta {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-align: left;
}

.contact-panel__location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body-sm);
  color: var(--ink-on-dark-muted);
}

.contact-panel__availability {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-on-dark-muted);
}

.contact-panel__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  flex-shrink: 0;
  margin-top: 0.3em;
}

.contact-panel__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--c-orange);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}

.contact-panel__cta:hover,
.contact-panel__cta:focus-visible {
  transform: scale(1.03);
}

@keyframes ctaPulse {
  0%   { transform: scale(1);    }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1);    }
}

.contact-panel__cta--pulse {
  animation: ctaPulse 0.825s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .contact-panel__cta--pulse { animation: none; }
}

.about__right {
  min-width: 0;
}

.about__content {
  min-width: 0;
}

.philosophy__title {
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-bottom: 1.5rem;
  color: var(--ink-on-dark) !important;
}

.philosophy__body {
  font-size: var(--fs-body);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.75);
}

.philosophy__body + .philosophy__body {
  margin-top: 1.125rem;
}

.about__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0;
}

.about__approach {
  margin-bottom: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

.about__approach-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-on-dark);
  margin-bottom: 1rem;
}

.about__approach-body {
  font-size: var(--fs-body);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.75);
  max-width: 58ch;
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none !important;
}

.principle {
  padding: 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(1.75rem, 1.5rem + 0.5vw, 2.25rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  list-style: none !important;
}
.principle:nth-child(3n)   { border-right: none; }
.principle:nth-child(-n+3) { padding-top: 0; }
.principle:nth-child(n+4)  { padding-top: clamp(1.75rem, 1.5rem + 0.5vw, 2.25rem); border-bottom: none; }

.principle__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
}

.principle__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 0.625rem;
  color: var(--ink-on-dark) !important;
}

.principle__body {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 30ch;
}

@media (max-width: 980px) {
  .about__layout {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
  .about__left { order: 2; }
  .contact-panel {
    position: static;
    max-width: 340px;
  }
  .about__right { order: 1; }
  .philosophy__intro { max-width: 56ch; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .principle { padding-left: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); padding-right: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); border-right: 1px solid rgba(255, 255, 255, 0.16); padding-top: 0; }
  .principle:nth-child(even) { border-right: none; }
  .principle:nth-child(3n):nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.16); }
  .principle:nth-child(n+3)  { padding-top: clamp(2rem, 1.5rem + 1vw, 2.75rem); border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .principle:nth-child(n+5)  { border-bottom: none; }
}

@media (min-width: 641px) and (max-width: 980px) {
  .contact-panel {
    max-width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 2rem;
    padding: 1.5rem 2rem;
    text-align: left;
  }
  .contact-panel__avatar {
    display: none;
  }
  .contact-panel__name {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    margin-bottom: 0.2rem;
  }
  .contact-panel__title {
    grid-row: 2;
    grid-column: 1;
    align-self: start;
    margin-bottom: 0;
  }
  .contact-panel__meta {
    grid-row: 1 / 3;
    grid-column: 2;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 0;
    padding-left: 1.5rem;
    margin-bottom: 0;
    align-self: center;
  }
  .contact-panel__cta {
    grid-row: 1 / 3;
    grid-column: 3;
    width: auto;
    white-space: nowrap;
    align-self: center;
  }
}

@media (max-width: 640px) {
  .philosophy__title br { display: none; }
  .about__left   { order: 2; }
  .contact-panel { max-width: 100%; }
  .about__right  { order: 1; }
  .principles { grid-template-columns: 1fr; }
  .principle {
    padding-left: 0;
    padding-right: 0;
    border-right: none;
    padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    padding-bottom: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  .principle:nth-child(n+2) { padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }
  .principle:nth-child(n+5) { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .principle:nth-child(3n):nth-child(odd) { border-right: none; }
  .principle:first-child { padding-top: 0; }
  .principle:last-child  { border-bottom: none; }
}

/* ---------------------------------------------------------------------
   7. CALLOUT PANEL
   --------------------------------------------------------------------- */
.callout-panels {
  margin-top: clamp(3.5rem, 3rem + 2vw, 5rem);
}

.callout--combined {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(73, 66, 127, 0.22),
    0 32px 72px rgba(40, 32, 80, 0.28);
}

.callout__header {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.callout__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-grey-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-orange);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.callout__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-on-light);
  margin-bottom: 0.375rem;
}

.callout__body {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink-on-light-muted);
  max-width: 46ch;
}

.callout__links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  border-top: 1px solid var(--c-grey-200);
  padding-top: 1.25rem;
}

.callout__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-on-light);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.callout__link .icon-circle {
  --size: 40px;
  background: var(--c-grey-100);
  border: 1px solid var(--c-grey-200);
  color: var(--ink-on-light-muted);
  flex-shrink: 0;
}

.callout__link:hover .icon-circle,
.callout__link:focus-visible .icon-circle {
  background: var(--c-grey-200);
  color: var(--ink-on-light);
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .callout__links {
    flex-direction: column;
    gap: 0;
  }
  .callout__link {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--c-grey-200);
    white-space: normal;
  }
  .callout__link:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* ---------------------------------------------------------------------
   8. ABOUT ME ANIMATIONS
   --------------------------------------------------------------------- */
.contact-panel,
.philosophy__intro .section-head__eyebrow,
.philosophy__intro .philosophy__title,
.philosophy__intro .philosophy__body {
  opacity: 0;
  transform: translateY(24px);
}

@keyframes introFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.philosophy.is-animated .contact-panel {
  animation: introFadeUp 1s var(--ease) 0ms both;
}
.philosophy.is-animated .philosophy__intro .section-head__eyebrow {
  animation: introFadeUp 0.45s ease 60ms both;
}
.philosophy.is-animated .philosophy__intro .philosophy__title {
  animation: introFadeUp 0.45s ease 160ms both;
}
.philosophy.is-animated .philosophy__intro .philosophy__body {
  animation: introFadeUp 0.45s ease 280ms both;
}
.philosophy.is-animated .philosophy__intro .philosophy__body + .philosophy__body {
  animation: introFadeUp 0.45s ease 360ms both;
}

.principle              { --icon-seq: 0ms;    }
.principle:nth-child(2) { --icon-seq: 300ms;  }
.principle:nth-child(3) { --icon-seq: 600ms;  }
.principle:nth-child(4) { --icon-seq: 900ms;  }
.principle:nth-child(5) { --icon-seq: 1200ms; }
.principle:nth-child(6) { --icon-seq: 1500ms; }

.principle__icon {
  opacity: 0;
  transition: transform 0.3s var(--ease);
}
.principle.is-animated .principle__icon {
  animation: iconFadeIn 0.7s var(--ease) var(--icon-seq) both;
}

.principle:hover .principle__icon {
  transform: scale(1.08);
}

.principle__title,
.principle__body { opacity: 0; }

@keyframes iconFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes principleIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.principle.is-animated .principle__title {
  animation: principleIn 0.7s var(--ease) calc(var(--icon-seq) + 50ms) both;
}
.principle.is-animated .principle__body {
  animation: principleIn 0.7s var(--ease) calc(var(--icon-seq) + 100ms) both;
}

@keyframes borderFadeIn {
  from { border-right-color: transparent; border-bottom-color: transparent; }
  to   { border-right-color: rgba(255, 255, 255, 0.16); border-bottom-color: rgba(255, 255, 255, 0.16); }
}
.principle.is-animated {
  animation: borderFadeIn 1.2s ease-in-out 2200ms both;
}

@media (prefers-reduced-motion: reduce) {
  .contact-panel,
  .philosophy__intro .section-head__eyebrow,
  .philosophy__intro .philosophy__title,
  .philosophy__intro .philosophy__body { opacity: 1 !important; transform: none !important; animation: none !important; }
  .principle:hover .principle__icon { transform: none !important; }
  .principle__icon,
  .principle__title,
  .principle__body     { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .principle           { border-right-color: rgba(255,255,255,0.16) !important; border-bottom-color: rgba(255,255,255,0.16) !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   9. UTILITIES
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --container-pad: 1.25rem; }
}

/* ==========================================================================
   10. GLEN-THEME ADAPTATIONS
   Replaces all WPBakery/Uncode layout overrides. The PHP template provides
   a native full-width layout context — no full-bleed tricks needed.
   ========================================================================== */

/* ── Hero: full-viewport, fixed nav (64 px) overlays the top ─────────────
   --header-offset stays 0px: the hero section starts at y=0 (the <main>
   wrapper in the PHP template has no top padding or offset). The glen-theme
   fixed nav floats above the hero at z-index:1000; content inside
   .hero__inner is padded down by nav height so text lands below the bar.  */
.hero {
  --header-offset: 0px;
  --persona-accent: var(--c-orange);
  --persona-accent-hover: var(--c-orange-hover);
  --persona-glow: 79, 41, 183;
}
body.admin-bar .hero {
  --header-offset: 32px; /* admin bar only; fixed nav has no layout space */
}

/* Push hero text content below the fixed glen-theme nav */
.hero .hero__inner {
  padding-top: calc(var(--gt-nav-height, 64px) + clamp(1.5rem, min(2rem + 2vw, 1rem + 9svh), 7rem));
}
body.admin-bar .hero .hero__inner {
  padding-top: calc(var(--gt-nav-height, 64px) + 32px + clamp(1.5rem, min(2rem + 2vw, 1rem + 9svh), 7rem));
}

/* Splash pages: nav is hidden so only the logo header remains (~64px).
   Reduce the extra breathing room so the content sits centred, not low. */
.splash-page .hero .hero__inner {
  padding-top: calc(var(--gt-nav-height, 64px) + clamp(0.75rem, min(1rem + 1vw, 0.5rem + 3svh), 2.5rem));
}
body.admin-bar .splash-page .hero .hero__inner {
  padding-top: calc(var(--gt-nav-height, 64px) + 32px + clamp(0.75rem, min(1rem + 1vw, 0.5rem + 3svh), 2.5rem));
}

/* Portrait: top:0 is already correct in the base (section 3).
   In glen-theme the hero starts at the true viewport top so no negative
   offset is needed — the base desktop rule is already correct.            */

/* ── Contact panel: sticky clearance below fixed nav ─────────────────────
   Production: top:88px = 67px nav + 21px gap.
   Glen-theme: calc(64px + 1.5rem) ≈ 88px — identical visual clearance.  */
.contact-panel {
  top: calc(var(--gt-nav-height, 64px) + 1.5rem);
}
body.admin-bar .contact-panel {
  top: calc(var(--gt-nav-height, 64px) + 32px + 1.5rem);
}

/* ── Footer: dark background to match production ──────────────────────────
   gt-global.css default is transparent (→ white body), which creates a
   jarring light seam after the dark philosophy section. Production uses
   rgb(20, 22, 24) with white text for the copyright strip.                */
.gt-footer {
  background: rgb(20, 22, 24);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.gt-footer .gt-footer__copy {
  color: rgba(255, 255, 255, 0.45);
}

/* ── Bottom-of-page: nav returns to transparent on desktop splash pages ───
   Triggered by body.gt-at-bottom added via gt-nav.js when scrollY+vh ≥
   scrollHeight. Higher specificity (3 classes + ID) overrides the
   body.gt-scrolled rule (1 class + ID) without !important. Nav link
   colours mirror the existing body.gt-hero-page:not(.gt-scrolled) rules
   in gt-nav.css so text stays legible over the dark philosophy section.   */
@media (min-width: 960px) {
  body.splash-page.gt-scrolled.gt-at-bottom #gt-header {
    background: transparent;
    box-shadow: none;
  }
  body.splash-page.gt-scrolled.gt-at-bottom .gt-nav__list .menu-item a {
    color: rgba(255, 255, 255, 0.85);
  }
  body.splash-page.gt-scrolled.gt-at-bottom .gt-nav__list .menu-item a:hover,
  body.splash-page.gt-scrolled.gt-at-bottom .gt-nav__list .menu-item a:focus-visible {
    color: #fff;
  }
  body.splash-page.gt-scrolled.gt-at-bottom .gt-nav__list .current-menu-item > a,
  body.splash-page.gt-scrolled.gt-at-bottom .gt-nav__list .current-page-ancestor > a {
    color: var(--c-orange);
  }
}

/* "Audience Focused" sits just over the column content width at desktop — prevent wrap */
@media (min-width: 981px) {
  body.splash-page .principle:first-child .principle__title { white-space: nowrap; }
}