/* ============================================
   ATG Services Page. v7 (transitions, Speaking buildout, falling petals)
   Last updated: May 1, 2026

   v7 changes from v6:
     - Section transitions: gradient hairlines between spreads
       (Teal>Amber, Amber>Rose, Rose>Plum) so the four sections read
       as continuous flow. The four-color bar at the top of the close
       becomes the resolution of that sequence.
     - Tighter vertical spacing on each spread (~25% less padding)
     - Speaking section gets full structural parity with 01-03
     - Falling/floating petal per spread at varied position and angle
       (anchored so they're never cropped at the edges)
     - Spread mark column trimmed to give H2s more horizontal room
       on desktop (fixes 02 and 03 awkward line wraps)

   Per-section color and petal mapping:
     01 Strategic . Teal trim   + petal-teal   + Teal "01"
     02 Custom .... Amber trim  + petal-amber  + Amber "02"
     03 Executive . Rose trim   + petal-rose   + Rose "03"
     04 Speaking .. Plum trim   + petal-plum   + Plum "04"

   Fonts: Montserrat (display), Nunito (body).

   Namespace: all rules scoped under .atg-services. No site-wide
   CSS touched.
   ============================================ */

.atg-services {
  --atg-rose: #CB295C;
  --atg-amber: #EF9834;
  --atg-plum: #33254C;
  --atg-teal: #4A9AB0;
  --atg-ice-blue: #DCF2F7;
  --atg-ice-mist: #EEF7F9;
  --atg-cream: #FAF7F2;
  --atg-charcoal: #2D2D2D;

  --atg-cream-soft: rgba(250, 247, 242, 0.92);

  font-family: 'Nunito', 'Montserrat', system-ui, -apple-system, sans-serif;
  color: var(--atg-charcoal);
  line-height: 1.65;
}

.atg-services * { box-sizing: border-box; }

/* =========================================================
   Reveal animation
   ========================================================= */

.atg-services-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.atg-services-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Shared display elements
   ========================================================= */

.atg-services-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--atg-teal);
  margin-bottom: 28px;
}

.atg-services-rule {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--atg-rose);
  margin: 28px 0 32px;
  border-radius: 2px;
}

.atg-services-h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.18;
  color: var(--atg-plum);
  margin: 0 0 14px;
  letter-spacing: -0.008em;
}

.atg-services-section-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-style: italic;
  color: var(--atg-charcoal);
  opacity: 0.78;
  margin: 0 0 24px;
}

.atg-services-body {
  font-size: 17px;
  line-height: 1.78;
  color: var(--atg-charcoal);
  margin: 0 0 28px;
}

.atg-services-text-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}

.atg-services-text-link:hover,
.atg-services-text-link:focus { opacity: 0.7; }

/* Detail blocks */
.atg-services-detail-block {
  background: #fff;
  border-left: 4px solid var(--atg-charcoal);
  padding: 28px 32px 24px;
  margin: 0 0 28px;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 1px 0 rgba(51, 37, 76, 0.06);
  clear: both;
}

.atg-services-detail-block--teal { border-left-color: var(--atg-teal); }
.atg-services-detail-block--amber { border-left-color: var(--atg-amber); }
.atg-services-detail-block--plum { border-left-color: var(--atg-plum); }
.atg-services-detail-block--rose { border-left-color: var(--atg-rose); }

.atg-services-detail-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--atg-plum);
  opacity: 0.85;
  margin-bottom: 18px;
}

.atg-services-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 32px;
}

.atg-services-detail-list li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--atg-charcoal);
  border-bottom: 1px solid rgba(51, 37, 76, 0.07);
}

.atg-services-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--atg-charcoal);
  box-shadow: 0 0 0 3px rgba(51, 37, 76, 0.10);
}

.atg-services-detail-list--teal li::before {
  background: var(--atg-teal);
  box-shadow: 0 0 0 3px rgba(74, 154, 176, 0.18);
}

.atg-services-detail-list--amber li::before {
  background: var(--atg-amber);
  box-shadow: 0 0 0 3px rgba(239, 152, 52, 0.20);
}

.atg-services-detail-list--rose li::before {
  background: var(--atg-rose);
  box-shadow: 0 0 0 3px rgba(203, 41, 92, 0.18);
}

.atg-services-detail-list--plum li::before {
  background: var(--atg-plum);
  box-shadow: 0 0 0 3px rgba(51, 37, 76, 0.18);
}

/* "Best fit when" line */
.atg-services-fit {
  font-size: 16px;
  line-height: 1.7;
  font-style: italic;
  color: var(--atg-charcoal);
  opacity: 0.88;
  margin: 0 0 32px;
  padding: 18px 24px;
  background: rgba(220, 242, 247, 0.42);
  border-radius: 6px;
  clear: both;
}

.atg-services-fit-label {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--atg-rose);
  margin-right: 8px;
}

/* Inquire CTA system */
.atg-services-inquire {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
  clear: both;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.atg-services-inquire--teal { background: var(--atg-teal); color: #fff; }
.atg-services-inquire--amber { background: var(--atg-amber); color: var(--atg-plum); }
.atg-services-inquire--plum { background: var(--atg-plum); color: #fff; }
.atg-services-inquire--rose { background: var(--atg-rose); color: #fff; }

.atg-services-inquire:hover,
.atg-services-inquire:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(51, 37, 76, 0.22);
}

.atg-services-arrow {
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

.atg-services-inquire:hover .atg-services-arrow,
.atg-services-inquire:focus .atg-services-arrow {
  transform: translate(4px, -1px);
}

/* =========================================================
   HERO (Cream + multi-petal graphic)
   ========================================================= */

.atg-services-hero {
  background: linear-gradient(135deg, var(--atg-cream) 0%, var(--atg-ice-mist) 100%);
  padding: clamp(80px, 10vw, 140px) 0 clamp(72px, 9vw, 120px);
  overflow: hidden;
  position: relative;
}

.atg-services-hero::before {
  content: "";
  position: absolute;
  top: 64px;
  bottom: 64px;
  left: 8%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(51, 37, 76, 0.10), transparent);
  pointer-events: none;
}

.atg-services-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: center;
  position: relative;
}

.atg-services-hero-text { position: relative; z-index: 2; }

.atg-services-hero-h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.018em;
  color: var(--atg-plum);
}

.atg-services-hero-h1 .hero-line { display: block; }
.atg-services-hero-h1 .hero-line--reg { font-weight: 400; opacity: 0.78; }
.atg-services-hero-h1 .hero-line--bold { font-weight: 800; }

.atg-services-hero-deck {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.78;
  max-width: 580px;
  margin: 0;
  color: var(--atg-charcoal);
}

.atg-services-hero-graphic {
  position: relative;
  height: 440px;
  pointer-events: none;
}

.atg-services-hero-petal {
  position: absolute;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(51, 37, 76, 0.18));
}

.atg-services-hero-petal--amber {
  width: 360px;
  height: auto;
  bottom: -20px;
  right: -40px;
  transform: rotate(-12deg);
  z-index: 3;
}

.atg-services-hero-petal--teal {
  width: 200px;
  height: auto;
  top: 0;
  right: 110px;
  transform: rotate(28deg);
  opacity: 0.92;
  z-index: 2;
}

.atg-services-hero-petal--rose {
  width: 140px;
  height: auto;
  top: 90px;
  right: -10px;
  transform: rotate(58deg);
  opacity: 0.85;
  z-index: 1;
}

/* =========================================================
   JUMP NAV PILLS (in hero)
   Anchored navigation to the four service sections in a 2x2 grid.
   Each pill carries the section's identity color, number, and a
   chevron to signal it's clickable. Smooth scroll handled by the
   inline script.
   ========================================================= */

.atg-services-jumpnav {
  margin-top: 36px;
  max-width: 520px;
}

.atg-services-jumpnav-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--atg-plum);
  opacity: 0.62;
  margin-bottom: 14px;
}

.atg-services-jumpnav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: 12px;
}

.atg-services-jumppill {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 12px 14px 12px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(51, 37, 76, 0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  color: var(--atg-plum);
}

.atg-services-jumppill:hover,
.atg-services-jumppill:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(51, 37, 76, 0.12);
  background: #fff;
}

.atg-services-jumppill-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  transition: transform 0.2s ease;
}

.atg-services-jumppill:hover .atg-services-jumppill-num,
.atg-services-jumppill:focus .atg-services-jumppill-num {
  transform: scale(1.10);
}

.atg-services-jumppill-label {
  flex: 1;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atg-services-jumppill-arrow {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: var(--atg-plum);
  opacity: 0.55;
  transform: translate(0, -1px);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.atg-services-jumppill:hover .atg-services-jumppill-arrow,
.atg-services-jumppill:focus .atg-services-jumppill-arrow {
  transform: translate(4px, -1px);
  opacity: 1;
}

/* Color-keyed per pill: number circle gets section color */
.atg-services-jumppill--teal .atg-services-jumppill-num { background: var(--atg-teal); }
.atg-services-jumppill--amber .atg-services-jumppill-num { background: var(--atg-amber); color: var(--atg-plum); }
.atg-services-jumppill--rose .atg-services-jumppill-num { background: var(--atg-rose); }
.atg-services-jumppill--plum .atg-services-jumppill-num { background: var(--atg-plum); }

/* Hover: border + chevron pick up section color */
.atg-services-jumppill--teal:hover,
.atg-services-jumppill--teal:focus { border-color: var(--atg-teal); }
.atg-services-jumppill--teal:hover .atg-services-jumppill-arrow,
.atg-services-jumppill--teal:focus .atg-services-jumppill-arrow { color: var(--atg-teal); }

.atg-services-jumppill--amber:hover,
.atg-services-jumppill--amber:focus { border-color: var(--atg-amber); }
.atg-services-jumppill--amber:hover .atg-services-jumppill-arrow,
.atg-services-jumppill--amber:focus .atg-services-jumppill-arrow { color: var(--atg-amber); }

.atg-services-jumppill--rose:hover,
.atg-services-jumppill--rose:focus { border-color: var(--atg-rose); }
.atg-services-jumppill--rose:hover .atg-services-jumppill-arrow,
.atg-services-jumppill--rose:focus .atg-services-jumppill-arrow { color: var(--atg-rose); }

.atg-services-jumppill--plum:hover,
.atg-services-jumppill--plum:focus { border-color: var(--atg-plum); }
.atg-services-jumppill--plum:hover .atg-services-jumppill-arrow,
.atg-services-jumppill--plum:focus .atg-services-jumppill-arrow { color: var(--atg-plum); }

/* =========================================================
   UNIFIED SPREAD (sections 01, 02, 03, 04)
   v7: tighter vertical padding, narrower mark column to give
   H2s room, falling petals anchored to never crop.
   ========================================================= */

.atg-services-spread {
  background: var(--atg-cream);
  position: relative;
}

.atg-services-spread-grid {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 6.5vw, 88px) clamp(32px, 5vw, 64px);
  /* Reduced from clamp(72px, 9vw, 120px) for tighter vertical rhythm */
}

.atg-services-spread-grid::after {
  content: "";
  display: block;
  clear: both;
}

/* Per-section CSS variables */
.atg-services-spread--teal { --spread-color: var(--atg-teal); --leaf-tilt: -8deg; }
.atg-services-spread--amber { --spread-color: var(--atg-amber); --leaf-tilt: 5deg; }
.atg-services-spread--rose { --spread-color: var(--atg-rose); --leaf-tilt: -12deg; }
.atg-services-spread--plum { --spread-color: var(--atg-plum); --leaf-tilt: 8deg; }

/* Block (left float). v7: trimmed from 30% to 26% with a smaller
   max so H2s on 02 and 03 have more horizontal room. */
.atg-services-spread-mark {
  float: left;
  width: clamp(260px, 26%, 340px);
  height: clamp(260px, 24vw, 340px);
  margin: 0 clamp(36px, 4.5vw, 56px) 24px 0;
  position: relative;
  background: var(--atg-ice-mist);
  border: 4px solid var(--spread-color, var(--atg-teal));
  padding: clamp(44px, 4.5vw, 64px) clamp(20px, 2.5vw, 36px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

/* Cropped colored petal at top of block */
.atg-services-spread-petal {
  position: absolute;
  width: clamp(220px, 26vw, 340px);
  height: auto;
  top: clamp(-150px, -8vw, -80px);
  left: 50%;
  transform: translateX(-50%) rotate(var(--leaf-tilt, -8deg));
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

.atg-services-spread--plum .atg-services-spread-petal {
  opacity: 0.18;
}

.atg-services-spread-marker {
  position: relative;
  z-index: 2;
  padding-top: 8px;
}

.atg-services-spread-num {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(80px, 9.5vw, 124px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--spread-color, var(--atg-teal));
  display: block;
  margin-bottom: 10px;
}

.atg-services-spread-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--atg-plum);
  opacity: 0.82;
  display: block;
}

/* Atmospheric falling/floating petals per section. v9: each section
   gets exactly 2 petals, one in each safe zone:
     - Safe Zone A: narrow right-side strip alongside the H2 area,
       to the right of the colored block. Top portion of section.
     - Safe Zone B: cream gap below the inquire CTA, before the
       next section's transition divider. Bottom of section.
   These zones are the only spots reliably free of content regardless
   of how the floated layout wraps. Petals geometrically cannot land
   on text or content blocks. Hidden on phones. */
.atg-services-spread-floater {
  position: absolute;
  pointer-events: none;
  opacity: 0.12;
  z-index: 0;
  filter: drop-shadow(0 6px 14px rgba(51, 37, 76, 0.14));
}

/* Petal A is anchored to the TOP-RIGHT corner of the spread,
   sitting in the narrow strip to the right of the colored block.
   Top offset stays small so it never extends past the block's
   bottom edge into the H2 wrap zone. */

/* Petal B is anchored to the BOTTOM-RIGHT corner of the spread,
   in the cream gap below the inquire CTA. Bottom offset matches
   the spread-grid bottom padding so the petal sits cleanly in
   the gap between the CTA and the next transition. */

/* === SECTION 01 (Teal) === */

.atg-services-spread-floater--01a {
  width: clamp(56px, 6vw, 78px);
  height: auto;
  top: clamp(40px, 5vw, 72px);
  right: clamp(40px, 4vw, 64px);
  transform: rotate(-32deg);
}

.atg-services-spread-floater--01b {
  width: clamp(64px, 6.5vw, 88px);
  height: auto;
  bottom: clamp(20px, 2.5vw, 36px);
  right: clamp(80px, 9vw, 140px);
  transform: rotate(28deg);
}

/* === SECTION 02 (Amber) === */

.atg-services-spread-floater--02a {
  width: clamp(58px, 6vw, 80px);
  height: auto;
  top: clamp(48px, 5.5vw, 80px);
  right: clamp(36px, 3.5vw, 56px);
  transform: rotate(-58deg);
}

.atg-services-spread-floater--02b {
  width: clamp(60px, 6.5vw, 82px);
  height: auto;
  bottom: clamp(20px, 2.5vw, 36px);
  right: clamp(120px, 13vw, 200px);
  transform: rotate(112deg);
}

/* === SECTION 03 (Rose) === */

.atg-services-spread-floater--03a {
  width: clamp(54px, 5.5vw, 74px);
  height: auto;
  top: clamp(44px, 5vw, 76px);
  right: clamp(48px, 5vw, 72px);
  transform: rotate(48deg);
}

.atg-services-spread-floater--03b {
  width: clamp(62px, 6.5vw, 84px);
  height: auto;
  bottom: clamp(20px, 2.5vw, 36px);
  right: clamp(60px, 7vw, 110px);
  transform: rotate(-18deg);
}

/* === SECTION 04 (Plum) === */

.atg-services-spread-floater--04a {
  width: clamp(56px, 6vw, 78px);
  height: auto;
  top: clamp(44px, 5vw, 76px);
  right: clamp(40px, 4vw, 64px);
  transform: rotate(-72deg);
}

.atg-services-spread-floater--04b {
  width: clamp(62px, 6.5vw, 84px);
  height: auto;
  bottom: clamp(20px, 2.5vw, 36px);
  right: clamp(100px, 11vw, 170px);
  transform: rotate(38deg);
}

/* Pull quote variant used inside Spread 04 */
.atg-services-spread-quote {
  margin: 32px 0 0;
  padding: 28px 32px;
  border-left: 4px solid var(--atg-rose);
  background: rgba(203, 41, 92, 0.06);
  border-radius: 0 8px 8px 0;
}

.atg-services-spread-quote blockquote {
  margin: 0 0 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--atg-plum);
  letter-spacing: -0.005em;
}

.atg-services-spread-quote figcaption {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--atg-rose);
}

/* =========================================================
   SECTION TRANSITIONS (gradient hairlines)
   v7 addition: each transition fades from the current section's
   color to the next, signaling continuity. The hairline sits at
   the bottom edge of each spread (except 04, which transitions
   directly into the close section's four-color top bar).
   ========================================================= */

.atg-services-transition {
  position: relative;
  height: 3px;
  width: 60%;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 2px;
}

/* Subtle vertical fade so the hairline reads as a soft band, not
   a hard rule. Pseudo-element creates a wash above and below. */
.atg-services-transition::before,
.atg-services-transition::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
}

.atg-services-transition::before {
  bottom: 100%;
  background: linear-gradient(to top, rgba(250, 247, 242, 0), rgba(250, 247, 242, 1));
}

.atg-services-transition::after {
  top: 100%;
  background: linear-gradient(to bottom, rgba(250, 247, 242, 0), rgba(250, 247, 242, 1));
}

.atg-services-transition--01-02 {
  background: linear-gradient(90deg, var(--atg-teal) 0%, var(--atg-amber) 100%);
}

.atg-services-transition--02-03 {
  background: linear-gradient(90deg, var(--atg-amber) 0%, var(--atg-rose) 100%);
}

.atg-services-transition--03-04 {
  background: linear-gradient(90deg, var(--atg-rose) 0%, var(--atg-plum) 100%);
}

/* =========================================================
   INQUIRE CLOSE (Cream + four-corner petals + 4-color top bar)
   ========================================================= */

.atg-services-close {
  position: relative;
  background: linear-gradient(180deg, var(--atg-cream) 0%, var(--atg-ice-mist) 100%);
  color: var(--atg-charcoal);
  padding: clamp(96px, 12vw, 168px) 0;
  overflow: hidden;
  text-align: center;
  border-top: 3px solid transparent;
  border-image: linear-gradient(
    90deg,
    var(--atg-teal) 0%,
    var(--atg-amber) 33%,
    var(--atg-rose) 66%,
    var(--atg-plum) 100%
  ) 1;
}

.atg-services-close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(239, 152, 52, 0.06), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.atg-services-close-petal {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 12px 28px rgba(51, 37, 76, 0.10));
}

.atg-services-close-petal--teal {
  top: -90px;
  left: -60px;
  width: clamp(220px, 22vw, 320px);
  height: auto;
  transform: rotate(36deg);
  opacity: 0.32;
  z-index: 1;
}

.atg-services-close-petal--amber {
  top: -110px;
  right: -80px;
  width: clamp(280px, 28vw, 400px);
  height: auto;
  transform: rotate(-22deg);
  opacity: 0.40;
  z-index: 1;
}

.atg-services-close-petal--rose {
  bottom: -100px;
  left: -70px;
  width: clamp(240px, 24vw, 340px);
  height: auto;
  transform: rotate(-48deg);
  opacity: 0.34;
  z-index: 1;
}

.atg-services-close-petal--plum {
  bottom: -120px;
  right: -90px;
  width: clamp(260px, 26vw, 380px);
  height: auto;
  transform: rotate(54deg);
  opacity: 0.26;
  z-index: 1;
}

.atg-services-close-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
}

.atg-services-close-eyebrow {
  color: var(--atg-rose);
  margin-bottom: 24px;
}

.atg-services-close-h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.16;
  color: var(--atg-plum);
  margin: 0 0 24px;
  letter-spacing: -0.008em;
}

.atg-services-close-body {
  font-size: 17px;
  line-height: 1.78;
  max-width: 600px;
  margin: 0 auto 40px;
  color: var(--atg-charcoal);
  opacity: 0.88;
}

.atg-services-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: var(--atg-plum);
  color: var(--atg-cream);
  padding: 18px 36px;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.atg-services-cta-primary:hover,
.atg-services-cta-primary:focus {
  background: var(--atg-rose);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(51, 37, 76, 0.28);
}

.atg-services-cta-primary .atg-services-arrow {
  font-size: 24px;
  color: var(--atg-amber);
}

.atg-services-cta-primary:hover .atg-services-arrow,
.atg-services-cta-primary:focus .atg-services-arrow {
  color: var(--atg-cream);
}

/* =========================================================
   Responsive: tablet (≤980px)
   ========================================================= */

@media (max-width: 980px) {
  .atg-services-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .atg-services-hero-graphic {
    height: 320px;
    order: -1;
  }

  .atg-services-hero-petal--amber { width: 260px; bottom: 0; right: 0; }
  .atg-services-hero-petal--teal { width: 150px; right: 80px; }
  .atg-services-hero-petal--rose { width: 100px; right: 0; top: 60px; }

  .atg-services-spread-grid {
    padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 48px);
  }

  .atg-services-spread-mark {
    float: none;
    width: 100%;
    height: clamp(200px, 26vw, 260px);
    margin: 0 0 28px 0;
  }

  .atg-services-spread-petal {
    width: clamp(220px, 36vw, 340px);
    top: clamp(-130px, -10vw, -70px);
  }

  .atg-services-spread-num {
    font-size: clamp(76px, 12vw, 110px);
  }

  .atg-services-detail-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Floaters reposition on tablet so they don't collide with
     the now-stacked block + content. */
  .atg-services-spread-floater {
    opacity: 0.08;
  }

  .atg-services-spread-floater--01a { width: 56px; }
  .atg-services-spread-floater--01b { width: 60px; }
  .atg-services-spread-floater--02a { width: 60px; }
  .atg-services-spread-floater--02b { width: 50px; }
  .atg-services-spread-floater--03a { width: 50px; }
  .atg-services-spread-floater--03b { width: 60px; }
  .atg-services-spread-floater--04a { width: 56px; }
  .atg-services-spread-floater--04b { width: 60px; }

  .atg-services-close-petal--teal { top: -60px; left: -40px; width: 200px; opacity: 0.30; }
  .atg-services-close-petal--amber { top: -70px; right: -50px; width: 240px; opacity: 0.38; }
  .atg-services-close-petal--rose { bottom: -60px; left: -40px; width: 220px; opacity: 0.32; }
  .atg-services-close-petal--plum { bottom: -70px; right: -60px; width: 240px; opacity: 0.24; }
}

/* =========================================================
   Responsive: phone (≤540px)
   ========================================================= */

@media (max-width: 540px) {
  .atg-services-hero { padding: 64px 0 56px; }
  .atg-services-hero-inner { padding: 0 22px; gap: 28px; }
  .atg-services-hero-graphic { height: 220px; }
  .atg-services-hero-petal--amber { width: 180px; }
  .atg-services-hero-petal--teal { width: 110px; right: 60px; }
  .atg-services-hero-petal--rose { width: 80px; top: 40px; }
  .atg-services-hero-deck { font-size: 15.5px; }

  .atg-services-jumpnav { margin-top: 28px; max-width: 100%; }

  .atg-services-jumpnav-label {
    font-size: 10px;
    letter-spacing: 0.20em;
    margin-bottom: 12px;
  }

  .atg-services-jumpnav-grid {
    gap: 8px;
  }

  .atg-services-jumppill {
    padding: 10px 12px 10px 10px;
    font-size: 12px;
    gap: 10px;
  }

  .atg-services-jumppill-num {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .atg-services-jumppill-arrow {
    font-size: 18px;
  }

  .atg-services-spread-grid {
    padding: 48px 22px;
  }

  .atg-services-spread-mark {
    height: 200px;
    border-width: 3px;
    padding: 32px 20px;
    margin-bottom: 24px;
  }

  .atg-services-spread-petal {
    width: 200px;
    top: -70px;
  }

  .atg-services-spread-num {
    font-size: 76px;
  }

  /* Hide floaters on phones to keep the layout calm. They were
     decorative atmosphere; not worth the visual clutter at this
     viewport. */
  .atg-services-spread-floater {
    display: none;
  }

  .atg-services-h2 { font-size: 24px; }
  .atg-services-body { font-size: 16px; }

  .atg-services-detail-block {
    padding: 22px 22px 18px;
  }

  .atg-services-detail-list li {
    font-size: 14.5px;
    padding-left: 22px;
  }

  .atg-services-fit {
    padding: 16px 18px;
    font-size: 15px;
  }

  .atg-services-inquire {
    padding: 14px 22px;
    font-size: 14px;
  }

  .atg-services-spread-quote {
    padding: 22px 24px;
    margin-top: 28px;
  }

  /* Section transition hairline narrower padding on phones */
  .atg-services-transition { height: 2px; width: 70%; }

  .atg-services-close { padding: 80px 0; }

  .atg-services-close-petal--teal { top: -40px; left: -30px; width: 140px; }
  .atg-services-close-petal--amber { top: -50px; right: -30px; width: 180px; }
  .atg-services-close-petal--rose { bottom: -40px; left: -30px; width: 160px; }
  .atg-services-close-petal--plum { bottom: -50px; right: -40px; width: 180px; }

  .atg-services-cta-primary {
    padding: 16px 28px;
    font-size: 15px;
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   Print fallback
   ========================================================= */

@media print {
  .atg-services-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}