/* ==========================================================================
   Pursuits Strategies — the three "hard case" visuals Divi's builder can't
   express through module settings alone. Everything else in this build uses
   ordinary Divi module attributes (padding, borders, fonts, colors).
   ========================================================================== */

/* ---- Global type/typography defaults ---- */
.ps-body-copy, .ps-lead {
  text-wrap: pretty;
}
h1, h2, .ps-balance {
  text-wrap: balance;
}
.ps-lowercase { text-transform: lowercase; }

/* ---- Square corners everywhere, no shadows (per spec) ---- */
.et_pb_button, .ps-btn {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.et_pb_module, .et_pb_image img {
  box-shadow: none !important;
}

/* ---- Link + button hover states ---- */
a { transition: color 0.15s ease, background-color 0.15s ease; }
.ps-link-hover:hover { color: var(--ps-accent) !important; }
.ps-btn-primary {
  background: var(--ps-contrast);
  color: var(--ps-base);
}
.ps-btn-primary:hover {
  background: var(--ps-accent);
  color: var(--ps-base) !important;
}
.ps-dark-section .ps-link-hover:hover { color: var(--ps-base) !important; }
.ps-dark-section a { color: var(--ps-muted-dark); }
.ps-dark-section a:hover { color: var(--ps-base); }

/* ==========================================================================
   1. THE HERO BULLSEYE — seven concentric rings inside a 900px square that
   deliberately overflows its section, cropped by overflow:hidden. Each
   instance below is a fixed-size, fixed-position variant per the spec table
   (ring insets: 0 / 104 / 104 / 262 / 330 / 420px for the hero size).
   ========================================================================== */
.ps-bullseye { position: absolute; pointer-events: none; }
.ps-bullseye span { position: absolute; border-radius: 50%; display: block; }

/* Home hero bullseye — 900x900, positioned left:52%; top:40px */
.ps-bullseye--hero-home {
  left: 52%; top: 40px; width: 900px; height: 900px;
}
.ps-bullseye--hero-home .ps-ring-outer   { inset: 0;      border: 2px solid var(--ps-base); opacity: 0.45; }
.ps-bullseye--hero-home .ps-ring-tint    { inset: 104px;  background: var(--ps-contrast); opacity: 0.06; }
.ps-bullseye--hero-home .ps-ring-heavy   { inset: 104px;  border: 38px solid var(--ps-contrast); }
.ps-bullseye--hero-home .ps-ring-inner   { inset: 262px;  border: 2px solid var(--ps-base); opacity: 0.65; }
.ps-bullseye--hero-home .ps-ring-core    { inset: 330px;  background: var(--ps-accent); border: 14px solid var(--ps-contrast); }
.ps-bullseye--hero-home .ps-ring-centre  { inset: 420px;  background: var(--ps-contrast); }
.ps-bullseye--hero-home .ps-ring-crosshair { left: -190px; top: 449px; width: 420px; height: 2px; background: var(--ps-contrast); border-radius: 0; }

/* Executive Search hero bullseye — 280x280, left:70%; top:120px, inverted (accent ring/core) */
.ps-bullseye--search-hero {
  left: 70%; top: 120px; width: 280px; height: 280px;
}
.ps-bullseye--search-hero .ps-ring-outer  { inset: 0;    border: 2px solid var(--ps-base); opacity: 0.45; }
.ps-bullseye--search-hero .ps-ring-heavy  { inset: 32px; border: 12px solid var(--ps-accent); }
.ps-bullseye--search-hero .ps-ring-inner  { inset: 82px; border: 2px solid var(--ps-base); opacity: 0.6; }
.ps-bullseye--search-hero .ps-ring-core   { left: 124px; top: 108px; width: 54px; height: 54px; background: var(--ps-accent); }

/* Decorative corner bullseyes — 3-ring accent/hairline/contrast, various sizes/positions */
.ps-bullseye--services  { right: -70px; top: -130px; width: 340px; height: 340px; }
.ps-bullseye--services  .ps-ring-disc  { inset: 0;    background: var(--ps-accent); }
.ps-bullseye--services  .ps-ring-hair  { inset: 62px; border: 2px solid var(--ps-base); opacity: 0.6; }
.ps-bullseye--services  .ps-ring-solid { inset: 124px; background: var(--ps-contrast); }

.ps-bullseye--home-cta  { right: -90px; bottom: -150px; width: 400px; height: 400px; }
.ps-bullseye--home-cta  .ps-ring-disc  { inset: 0;    background: var(--ps-accent); }
.ps-bullseye--home-cta  .ps-ring-hair  { inset: 74px; border: 2px solid var(--ps-base); opacity: 0.6; }
.ps-bullseye--home-cta  .ps-ring-solid { inset: 148px; background: var(--ps-contrast); }

.ps-bullseye--search-cta { right: -80px; bottom: -160px; width: 400px; height: 400px; }
.ps-bullseye--search-cta .ps-ring-disc  { inset: 0;    background: var(--ps-accent); }
.ps-bullseye--search-cta .ps-ring-hair  { inset: 74px; border: 2px solid var(--ps-base); opacity: 0.6; }
.ps-bullseye--search-cta .ps-ring-solid { inset: 148px; background: var(--ps-contrast); }

.ps-bullseye--contact   { right: -100px; top: -120px; width: 420px; height: 420px; }
.ps-bullseye--contact   .ps-ring-disc  { inset: 0;    background: var(--ps-accent); }
.ps-bullseye--contact   .ps-ring-hair  { inset: 78px; border: 2px solid var(--ps-base); opacity: 0.6; }
.ps-bullseye--contact   .ps-ring-solid { inset: 156px; background: var(--ps-contrast); }

/* ==========================================================================
   2. THE SKEWED FIELD — absolutely-positioned block, skewX(-14deg), clipped
   by the section's overflow:hidden. Crisp edge — no torn/aged texture.
   ========================================================================== */
.ps-skew-field {
  position: absolute; top: 0; bottom: 0;
  transform: skewX(-14deg); transform-origin: bottom left;
}
.ps-skew-field--home   { left: 52%; width: 66%; background: var(--ps-accent); }
.ps-skew-field--search { left: 62%; width: 60%; background: var(--ps-contrast); }

/* ==========================================================================
   3. THE OFFSET HEADSHOT — a hard-edged colored disc sitting behind a real
   photo, offset down-right. The photo is a genuine <img> (from a Divi Image
   module) so it stays editable; the disc is pure CSS.
   ========================================================================== */
.ps-offset-headshot { position: relative; }
.ps-offset-headshot::before {
  content: ""; position: absolute; border-radius: 50%;
  background: var(--disc-color, var(--ps-accent));
}
.ps-offset-headshot img {
  position: relative; border-radius: 50%; object-fit: cover; object-position: center top; display: block;
}
.ps-offset-headshot--preview { width: 132px; height: 132px; }
.ps-offset-headshot--preview::before { left: 12px; top: 12px; width: 132px; height: 132px; }
.ps-offset-headshot--preview img { width: 132px; height: 132px; }

.ps-offset-headshot--team { width: 160px; height: 160px; }
.ps-offset-headshot--team::before { left: 14px; top: 14px; width: 160px; height: 160px; }
.ps-offset-headshot--team img { width: 160px; height: 160px; }

/* Auto-alternating disc color for looped team rows (Divi 5 native loop) —
   position-based, so it keeps alternating correctly no matter how many team
   members are added or removed later. Applied to the Group module that
   repeats once per person (class "ps-team-row") and the photo's wrapping
   Image module inside it (class "ps-team-loop-photo", sized separately via
   that module's own Custom CSS) — 1st/3rd/5th... person gets accent (the
   default), 2nd/4th... gets contrast. */
.ps-team-row:nth-child(even) .ps-team-loop-photo {
  --disc-color: var(--ps-contrast);
}

/* ---- Responsive: collapse geometry below ~900px, per README §Responsive
   (flagged in OPEN-ITEMS.md as needing explicit client sign-off) ---- */
@media (max-width: 980px) {
  .ps-bullseye--hero-home,
  .ps-skew-field--home,
  .ps-bullseye--search-hero,
  .ps-skew-field--search {
    opacity: 0.12;
  }
}
@media (max-width: 720px) {
  .ps-hero-content { max-width: 100% !important; }
}