/* vup_2018_child - site skin loaded LAST */
:root {
  /* Canvas background */
  --page-bg-url: url("/wp-content/uploads/2025/10/background-tile-3.svg");
  --page-bg-size: 50px auto;
  --page-bg-repeat: repeat;
  --page-bg-position: 0 0;
  --page-bg-attachment: scroll;
  --page-bg-color: #000;

  /* Layout shell */
  --content-w: clamp(68rem, 74vw, 112rem);
  --vu-max: 110rem;
  --gap-col: 24px;
  --gap-row: 12px;
  /* Fluid gutters: wide on desktop, shrinking to 4px on mobile */
  --gutter-wide: clamp(4px, 2vw, 24px);
  --gutter-left: var(--gutter-wide);
  --gutter-right: var(--gutter-wide);
  --page-edge: calc(var(--gutter-wide) + var(--gap-col));
  /* Left sidebar increased by ~15% */
  --left-min: 248px;
  --left: 23vw;
  --left-max: 460px;
  --center-min: 640px;
  --center-cap: 780px;
  --center-cap-vw: 50vw;
  --right-min: 200px;
  --right-max: 400px;
  --sidebar-pad: 12px;

  /* Typography */
  --vu-system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
    system-ui, sans-serif;
  --vu-title-font: "Bebas Neue", var(--vu-system-font);
  --vu-font: var(--vu-system-font);
  --vu-hfont: var(--vu-title-font);
  --vu-body-size: clamp(16px, 1.2vw, 19.2px);
  --vu-h1-size: clamp(35.2px, 4.5vw, 53.76px);
  --vu-h2-size: clamp(28.8px, 3.4vw, 42.24px);
  --vu-h3-size: clamp(24px, 2.6vw, 34.56px);
  --vu-h4-size: clamp(20px, 2.1vw, 28px);
  --vu-h5-size: clamp(18px, 1.6vw, 22px);
  --vu-h6-size: clamp(16px, 1.3vw, 18px);
  --vu-body-weight: 400;
  --vu-heading-weight: 600;
  --vu-title-letter-spacing: .04em;

  /* Header and logo stack */
  --hdr-h0: clamp(9.5rem, 6.5rem + 2vw, 12rem);
  --hdr-h1: clamp(6.25rem, 4.25rem + 1.5vw, 8rem);
  --scroll-range: 90px;
  --logo-h: auto;
  --logo-max: clamp(12rem, 3rem + 9vw, 15rem);
  --logo-min: clamp(6.5rem, 4rem + 2vw, 9rem);
  --logo-floor: 3.25rem;
  --logo-overlap0: 0px;
  --logo-overlap1: 20px;
  --icon-size0: clamp(1rem, 1.7rem + 2vw, 3.2rem);
  --icon-size1: clamp(1rem, 1.25rem + 1.2vw, 4.25rem);
  --icon-offset0: -1rem;
  --icon-offset1: 0px;
  --icon-bottom-gap0: clamp(.75rem, .35rem + .6vw, 1.65rem);
  --icon-bottom-gap1: clamp(.4rem, .2rem + .4vw, 1rem);
  --icon-label-gap0: clamp(.28rem, .2rem + .3vw, .32rem);
  --icon-label-gap1: clamp(.24rem, .18rem + .25vw, .3rem);

  /* Navigation geometry */
  --icon-slot-min: clamp(2.85rem, 4.2vw, 3.6rem);
  --icon-slot-max: clamp(4.4rem, 5.8vw, 5.6rem);
  --icon-gap: clamp(.28rem, .9vw, .55rem);
  --overflow-chip-w: clamp(60px, 6vw, 90px);
  --overflow-chip-h: clamp(28px, 3vw, 36px);
  --icon-stack-height: clamp(5.4rem, 13vw, 8rem);
  --menu-font-size: clamp(.68rem, .58rem + .35vw, .84rem);
  --menu-font-weight: 500;
  --menu-letter-spacing: .04em;
  --menu-gap: clamp(.2rem, .15rem + .4vw, .45rem);

  /* Chip buttons */
  --chip-edge-min: 6px;
  --chip-edge-max: 36px;
  --chip-edge: clamp(var(--chip-edge-min), 4vw, var(--chip-edge-max));
  --chip-height: clamp(2.35rem, 1.95rem + .6vw, 2.9rem);
  --chip-pad-inline: clamp(.85rem, .75rem + .6vw, 1.4rem);
  --chip-pad-block: clamp(.25rem, .2rem + .3vw, .5rem);
  --chip-radius: 6px;
  --chip-gap: .65rem;
  --chip-bg: var(--grad-chip, #18181a);
  --chip-bg-hover: #676773;
  --chip-border: 1px solid #676773;
  --chip-border-hover: 1px solid #fffd90;
  --chip-color: var(--vu-fg);
  --chip-font-size: .85rem;
  --chip-font-weight: 700;
  --chip-letter: .08em;
  --chip-outline-color: var(--vu-gold);
  --chip-outline-size: 2px;
  --chip-outline-offset: 4px;
  --chip-outline-hover: 3px;
  --chip-press-scale: .9;

  /* Contact panel typography */
  --contact-stack-gap: clamp(.5rem, 2vw, 1.2rem);
  --contact-phone-size: 100px;
  --contact-email-size: clamp(1.1rem, 4.2vw, 1.6rem);
  --contact-note-size: clamp(1rem, 3vw, 1.35rem);
  --contact-phone-letter: .1em;
  --contact-note-letter: .05em;
  --contact-phone-font: var(--vu-title-font);
  --contact-body-font: var(--vu-system-font);

  /* Dropdown / overflow menu */
  --nav-panel-bg: rgba(12, 12, 12, .96);
  --nav-panel-fill: var(--grad-nav-panel, var(--nav-panel-bg));
  --nav-panel-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .55);
  --nav-panel-radius: 72px;
  --menu-panel-width: min(3000px, calc(100vw - 48px));
  --menu-panel-offset: clamp(12px, 4vw, 36px);
  --menu-panel-pad: clamp(18px, 4vw, 28px);
  --menu-panel-gap: clamp(.55rem, 1.5vw, 1.1rem);
  --menu-panel-font-size: clamp(1rem, .9rem + .35vw, 1.2rem);
  --menu-panel-icon-size: clamp(2.4rem, 10vw, 3.4rem);

  /* Motion */
  --bounce-distance: 20px;
  --bounce-speed: 0.35s;

  /* Palette */
  --vu-black: #000;
  --vu-gold: #ffd900;
  --vu-fg: #f4f4f4;
  --vu-link: #fff7b3;
  --vu-ink-strong: #0a0f1d;
  --vu-ink-soft: #121b2f;
  --vu-navy: #162847;
  --vu-amber-500: #ffda1f;
  --vu-amber-600: #f5b436;
  --vu-coral-500: #ff8f70;
  --vu-sand-300: #f5f1e3;
  --vu-sand-200: #faf6e7;
  --vu-sky-200: #e8f1ff;
  --vu-teal-300: #6dd3d6;

  /* Gradient system (cohesive, tweakable) */
  --grad-header: linear-gradient(135deg, rgba(0, 0, 0, .98) 0%, rgba(10, 10, 12, .96) 50%, rgba(14, 16, 22, .94) 100%);
  --grad-nav-panel: linear-gradient(145deg, rgba(6, 6, 8, .96) 0%, rgba(10, 12, 16, .94) 55%, rgba(14, 18, 24, .9) 100%);
  --grad-footer: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(6, 6, 8, .98) 45%, rgba(16, 18, 22, .94) 100%);
  --grad-chip: linear-gradient(135deg, rgba(24, 24, 26, .95) 0%, rgba(36, 36, 42, .9) 100%);
  --grad-cta: linear-gradient(120deg, var(--vu-amber-500) 0%, #ffbe4f 55%, var(--vu-coral-500) 100%);
  --grad-cta-panel: linear-gradient(135deg, rgba(255, 255, 255, .92) 0%, rgba(243, 247, 255, .82) 100%);
  --grad-surface-1: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(244, 248, 255, .84) 100%);
  --grad-surface-2: linear-gradient(145deg, rgba(255, 251, 237, .95) 0%, rgba(245, 236, 215, .85) 100%);
  --grad-hero-glow: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .9), transparent 42%), radial-gradient(circle at 82% 14%, rgba(255, 210, 120, .35), transparent 46%), radial-gradient(circle at 28% 78%, rgba(160, 205, 255, .28), transparent 58%);
  --grad-overlay-ink: linear-gradient(135deg, rgba(7, 12, 20, .6) 0%, rgba(12, 26, 46, .5) 50%, rgba(10, 16, 30, .4) 100%);
  --grad-gold-soft: linear-gradient(135deg, var(--vu-gold, #ffd900) 0%, #fff9d1 100%);
  --grad-fog-fade: linear-gradient(180deg, rgba(250, 251, 255, 0) 0%, var(--vu-fog, #f4f6ff) 100%);
  --grad-clients-hero: linear-gradient(135deg, #0f1021 0%, #683095 60%, #9b5bca 100%);
  --grad-clients-nav: linear-gradient(135deg, rgba(221, 185, 255, .96) 0%, rgba(221, 185, 255, .78) 100%);
  --grad-blog-hero: linear-gradient(135deg, rgba(242, 112, 156, .16), rgba(23, 95, 172, .18));
  --grad-blog-bg: linear-gradient(180deg, #050d1d 0%, #112235 45%, #f5efe9 100%);
  --grad-leadership-hero: linear-gradient(135deg, #0f1834, #050713);
  --grad-extreme-hero: radial-gradient(circle at top left, rgba(255, 217, 0, .2), rgba(0, 0, 0, .8));
  --grad-extreme-cta: linear-gradient(135deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .3));
  --grad-team-gold: linear-gradient(135deg, var(--vu-team-gold, #ffd900), var(--vu-team-gold-soft, #fff6a5));
  --grad-team-gold-strong: linear-gradient(135deg, var(--vu-team-gold, #ffd900), #fff4a3);
  --grad-team-backdrop: linear-gradient(135deg, rgba(4, 6, 18, 0.95), rgba(4, 6, 18, 0.65));
  --grad-team-panel: linear-gradient(135deg, rgba(15, 24, 52, 0.95), rgba(31, 42, 90, 0.92));
  --grad-team-panel-soft: linear-gradient(180deg, rgba(4, 6, 18, 0.2) 25%, rgba(4, 6, 18, 1) 100%);
  --grad-team-sheen: linear-gradient(135deg, rgba(15, 24, 52, 0.08), rgba(15, 24, 52, 0.01));
  --grad-journal-canvas: linear-gradient(140deg, #050403 0%, #0b0605 50%, #050403 100%);
  --grad-journal-shell: linear-gradient(110deg, rgba(15, 9, 5, 0.8), rgba(9, 6, 4, 0.85));
  --grad-journal-stage: linear-gradient(160deg, rgba(18, 14, 11, 0.95), rgba(7, 5, 4, 0.98));
  --grad-journal-stage-glow: radial-gradient(circle at 25% -20%, rgba(247, 203, 140, 0.15), transparent 60%);
  --grad-journal-hero: linear-gradient(130deg, rgba(62, 43, 22, 0.92), rgba(22, 16, 9, 0.94));
  --grad-journal-card: radial-gradient(circle at var(--card-glow-x, 50%) var(--card-glow-y, 50%), rgba(255, 255, 255, 0.55), transparent 70%), linear-gradient(120deg, rgba(255, 255, 255, 0.4), transparent 60%), linear-gradient(180deg, var(--journal-card-bg, #f9ecd2), var(--journal-card-bg-muted, #f1dcba));
  --grad-journal-shell-glow: radial-gradient(1480px circle at 12% 8%, rgba(238, 178, 104, 0.08), transparent 65%), radial-gradient(940px circle at 85% 2%, rgba(123, 71, 53, 0.08), transparent 55%);
  --grad-gallery-fade-light: linear-gradient(to right, rgba(255, 255, 255, .35), transparent 55%);
  --grad-gallery-fade-light-rev: linear-gradient(to left, rgba(255, 255, 255, .35), transparent 55%);
  --grad-gallery-fade-dark: linear-gradient(to right, rgba(0, 0, 0, .45), transparent);
  --grad-gallery-fade-dark-rev: linear-gradient(to left, rgba(0, 0, 0, .45), transparent);

  /* Surface + button tokens (reuse gradients above) */
  --surface-canvas: linear-gradient(180deg, #050d1d 0%, #0f1f33 55%, #0f1824 100%);
  --surface-hero: var(--grad-hero-glow);
  --surface-panel: var(--grad-surface-1);
  --surface-panel-soft: var(--grad-surface-2);
  --surface-card: linear-gradient(150deg, rgba(6, 10, 18, .9) 0%, rgba(10, 14, 22, .92) 100%);
  --surface-card-bright: var(--grad-cta-panel);
  --surface-overlay: var(--grad-overlay-ink);
  --surface-outline-soft: rgba(255, 255, 255, .08);
  --shadow-card-strong: 0 25px 45px rgba(6, 12, 30, .35);
  --shadow-card-hover: 0 30px 60px rgba(4, 7, 15, .55);
  --glow-amber: var(--vu-amber-500);
  --glow-coral: var(--vu-coral-500);

  --btn-primary-gradient: var(--grad-cta);
  --btn-secondary-gradient: linear-gradient(140deg, #24324a 0%, #111822 100%);
  --btn-secondary-color: #f3f7ff;
  --btn-secondary-border: rgba(255, 255, 255, .14);
  --btn-secondary-shadow: 0 10px 25px rgba(0, 0, 0, .28);

  /* Title bubble defaults */
  --title-chip-bg: var(--grad-gold-soft, linear-gradient(135deg, #ffd900, #fff9d1));
  --title-chip-color: #0c0c0c;
  --title-chip-border: 1px solid rgba(0, 0, 0, .08);
  --title-chip-shadow: 0 18px 32px rgba(0, 0, 0, .22);
  --title-chip-radius: 28px;
  --title-chip-pad-inline: clamp(1.6rem, 4vw, 3rem);
  --title-chip-pad-block: clamp(.7rem, 2vw, 1rem);
  --title-chip-gap: .5rem;
  --title-chip-letter: .12em;
  --title-chip-size: clamp(1.4rem, 2.6vw, 2.1rem);
  --title-chip-font: var(--vu-hfont);
  --title-chip-weight: 800;
  --title-chip-transform: uppercase;
  --title-block-gap-top: clamp(18px, 3vw, 32px);
  --title-block-gap-bottom: clamp(14px, 2.5vw, 24px);

  /* Texture presets for surfaces */
  --texture-surface-mask: var(--tex-grain-soft, none);
  --texture-surface-mask-strong: var(--tex-grain-large, none);
  --texture-surface-color: rgba(170, 183, 201, 0.25);
  --texture-surface-strong-color: rgba(255, 214, 232, 0.91);
  --texture-surface-size: 400px;
  --texture-surface-strong-size: 400px;
  --texture-surface-repeat: repeat;
  --texture-lines-mask: var(--tex-pattern-wave, none);
  --texture-lines-size: 100px 20px;
  --texture-lines-color: rgba(120, 132, 160, 0.32);
  /* State textures (default dots; specific states override below) */
  --state-texture-mask: var(--tex-pattern-dots, none);
  --state-texture-size: 220px 220px;
  --state-texture-color: rgba(120, 132, 160, 0.32);
  /* State-specific texture defaults and overrides */
  --state-texture-mask: var(--tex-pattern-dots, none);
  --state-texture-size: 220px 220px;
  --state-texture-color: rgba(120, 132, 160, 0.32);

  /* Textures (SVG sources + tint/blend knobs) */
  --tex-grain-soft: url("/wp-content/uploads/2025/11/blog-soft-speckle.svg");
  --tex-grain-scatter: url("/wp-content/uploads/2025/11/scatter-grain.svg");
  --tex-grain-large: url("/wp-content/uploads/2025/11/large-grain.svg");
  --tex-frame-grain: url("/wp-content/uploads/2025/11/border-grain.svg");
  --tex-frame-grain-strong: url("/wp-content/uploads/2025/11/border-grain-2.svg");
  --tex-pattern-rain: url("/wp-content/uploads/2025/11/rain.svg");
  --tex-pattern-dots: url("/wp-content/uploads/2025/11/dots-bg.svg");
  --tex-pattern-melt: url("/wp-content/uploads/2025/11/melt-bg.svg");
  --tex-pattern-pixel: url("/wp-content/uploads/2025/11/pixel-dots.svg");
  --tex-pattern-diagonal: url("/wp-content/uploads/2025/11/diagonal-lines.svg");
  --tex-pattern-checkers: url("/wp-content/uploads/2025/11/checkers.svg");
  --tex-pattern-lines: url("/wp-content/uploads/2025/11/lines-bg.svg");
  --tex-pattern-wave: url("/wp-content/uploads/2025/11/wave-bg.svg");
  --tex-tint-light: rgba(255, 255, 255, .4);
  --tex-tint-ink: rgba(8, 12, 20, .35);
  --tex-blend: screen;
  --tex-size: auto;
  --tex-repeat: repeat;
  /* Combined texture presets */
  --tex-gold-soft-color: rgba(255, 255, 200, 0.6);
  --tex-gold-soft-mask-main: var(--tex-grain-soft, none);
  --tex-gold-soft-mask-alt: var(--tex-grain-large, none);
  --tex-gold-soft-size-main: 400px 400px;
  --tex-gold-soft-size-alt: 600px 600px;
  /* Textured background presets (image/size/repeat/blend bundles) */
  --bg-team-gold-textured-image:
    linear-gradient(130deg, var(--vu-team-gold) 0%, var(--vu-team-gold-soft) 100%),
    linear-gradient(180deg, rgba(255, 255, 200, .45), rgba(255, 255, 155, .65)),
    var(--tex-grain-soft, none),
    var(--tex-grain-large, none);
  --bg-team-gold-textured-size: cover, cover, 600px 600px, 400px 400px;
  --bg-team-gold-textured-repeat: no-repeat, no-repeat, repeat, repeat;
  --bg-team-gold-textured-position: center, center, center, center;
  --bg-team-gold-textured-blend: hard-light;
  --bg-team-gold-textured-tint: rgba(255, 255, 200, .6);
  --bg-team-gold-textured-mask-main: var(--tex-grain-soft, none);
  --bg-team-gold-textured-mask-alt: var(--tex-grain-large, none);
  --bg-team-gold-textured-mask-size-main: 500px 500px;
  --bg-team-gold-textured-mask-size-alt: 500px 500px;
  --bg-team-gold-textured-mask-repeat: repeat;
  --bg-team-gold-textured-mask-blend: hard-light;
  --bg-team-gold-textured-mask-opacity: .85;

  /* State profiles - bright glass system */
  --state-glass-bg: rgba(255, 255, 255, .9);
  --state-glass-bg-strong: rgba(255, 255, 255, .78);
  --state-glass-border: rgba(255, 255, 255, .85);
  --state-glass-shadow: 0 35px 65px rgba(19, 42, 63, .16);
  --state-glass-ink: #18223e;
  --state-glass-muted: rgba(24, 34, 62, .98);
  --state-glass-highlight: rgba(255, 255, 255, .95);
  --state-glass-blur: 20px;

  /* Travel Journal tokens */
  --journal-page-bg: #050403;
  --journal-stage-bg: #140f10;
  --journal-stage-rim: rgba(255, 205, 170, 0.12);
  --journal-stage-glow: rgba(235, 161, 94, 0.18);
  --journal-card-bg: #f9ecd2;
  --journal-card-bg-muted: #f1dcba;
  --journal-card-ink: #2f1a0f;
  --journal-ink: #2f1a0f;
  --journal-card-border: rgba(107, 69, 35, 0.3);
  --journal-card-stitch: rgba(84, 42, 12, 0.35);
  --journal-card-shadow: rgba(0, 0, 0, 0.65);
  --journal-card-highlight: rgba(255, 255, 255, 0.75);
  --journal-highlight: #e4c27d;
  --journal-accent-amber: #ffbb55;
  --journal-accent-crimson: #e05a6d;
  --journal-accent-cyan: #6dd0d8;
  --journal-accent-emerald: #8ad18c;
  --journal-accent-clay: #d9b27c;
}

@media (max-width: 1280px) {
  :root {
    --scroll-range: 80px;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter-left: 0px;
    --gutter-right: 0px;
    --center-min: 0px;
    --center-cap: 100vw;
    --center-cap-vw: 100vw;
  }
}

@media (max-width: 520px) {
  :root {
    --scroll-range: 60px;
    --chip-edge: var(--gutter-left, 0px);
    /* Mobile logo sizing: ~120px tall at rest, ~100px in compact state */
    --logo-max: 7.5rem;
    --logo-min: 6.25rem;
    --logo-floor: 6.25rem;
    --icon-size0: clamp(2.8rem, 1.8rem + 1.8vw, 5rem);
    --icon-size1: clamp(2.4rem, 1.3rem + 1vw, 3.5rem);
    --item-gap: clamp(.15rem, 1.4vw, .6rem);
    --item-w: clamp(4rem, 5vw, 5.5rem);
  }
}

@media (max-width: 360px) {
  :root {
    /* Keep header/logo tokens inherited from the 520px rules; only tighten chips/menu/contact */
    --chip-font-size: .75rem;
    --chip-letter: .09em;
    --chip-pad-block: .35rem;
    --chip-pad-inline: .6rem;
    --chip-gap: .35rem;
    --menu-panel-width: min(275px, calc(100vw - 24px));
    --menu-panel-offset: clamp(8px, 3vw, 20px);
    --menu-panel-pad: clamp(14px, 5vw, 20px);
    --menu-panel-font-size: clamp(1.2rem, .85rem + .3vw, 1.05rem);
    --menu-panel-icon-size: clamp(.8rem, 16vw, 1.6rem);
    --menu-panel-gap: clamp(.05rem, 2vw, .5rem);
    --contact-stack-gap: clamp(.35rem, 2vw, .8rem);
    --contact-phone-size: clamp(1.9rem, 18vw, 2.8rem);
    --contact-email-size: clamp(1rem, 4vw, 1.3rem);
    --contact-note-size: clamp(.9rem, 3.5vw, 1.1rem);
    --icon-size0: clamp(1.25rem, 2rem + 2vw, 6.5rem);
    --icon-size1: var(--icon-size0);
  }
}

/* Apply to canvas. Keep specific so parent resets don't win */
html,
body {
  margin: 0;
  background-color: var(--page-bg-color);
  background-image: var(--page-bg-url);
  background-size: var(--page-bg-size);
  background-repeat: var(--page-bg-repeat);
  background-position: var(--page-bg-position);
  background-attachment: var(--page-bg-attachment);
}

/* Unified title bubble (can be reused via .vu-title-chip or #title-header h1) */
.vu-title-chip,
#title-header h1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--title-chip-gap, .5rem);
  margin: 0;
  padding: var(--title-chip-pad-block, .8rem) var(--title-chip-pad-inline, 2.4rem);
  background: var(--title-chip-bg);
  color: var(--title-chip-color);
  border-radius: var(--title-chip-radius);
  border: var(--title-chip-border);
  box-shadow: var(--title-chip-shadow);
  letter-spacing: var(--title-chip-letter);
  text-transform: var(--title-chip-transform);
  font-family: var(--title-chip-font);
  font-weight: var(--title-chip-weight);
  font-size: var(--title-chip-size);
  line-height: 1.1;
  text-align: center;
}

#title-header {
  text-align: center;
  margin: var(--title-block-gap-top) auto var(--title-block-gap-bottom);
}

/* State-specific texture overrides (only apply to selected states) */
body.tax-location_state.term-california,
body.tax-location_state.term-florida {
  /* Used on California and Florida (wave pattern) */
  --state-texture-mask: var(--tex-pattern-wave, none);
  --state-texture-size: 90px 18px;
  --state-texture-color: rgba(120, 132, 160, 0.32);
}