/* ==========================================================================
   FORGYEN — Our Services (homepage section 3)
   Builds on main.css tokens. Scoped to .services / .service.
   Six cards share one structure; each --variant only changes its surface
   and geometry (pseudo-elements sized in container units, so the accents
   scale with the card).
   Structure: 1 Section · 2 Heading · 3 Grid & card · 4 Variants
              5 Hover & reveal · 6 Responsive
   ========================================================================== */

/* 1. Section ------------------------------------------------------------- */
.services {
  --sv-ivory-1: #FBF6F1;
  --sv-ivory-2: #F2E6DA;
  --sv-champagne: #ECDCCB;
  --sv-peach-1: #F3CDAE;
  --sv-peach-2: #E39A6B;
  --sv-copper-1: #B26C3B;
  --sv-copper-2: #9C5628;                 /* ivory text ≥ 4.5:1 across the text area */
  --sv-on-dark: #FFF8F1;
  --sv-line: rgba(184, 115, 51, 0.45);

  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: var(--fg-header-h);   /* header "Services" → /#services lands below the sticky header */
  padding: clamp(72px, 8vw, 112px) 0 clamp(88px, 9vw, 128px);
  background: linear-gradient(180deg, #F5EBE1 0%, #F8F1EA 30%, var(--sv-ivory-1) 100%);
}

.services__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.services__orbit {                         /* large construction arc, kept to the right margin */
  position: absolute;
  top: -12%;
  right: calc(-1 * min(760px, 52vw));
  width: min(1060px, 74vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(184, 115, 51, 0.16);
}
.services__rule-v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(24px, calc(50% - 680px));
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(11, 19, 32, 0.06) 20%, rgba(11, 19, 32, 0.06) 80%, transparent);
}
.services__rule-h {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(44px, 5vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11, 19, 32, 0.06) 15%, rgba(11, 19, 32, 0.06) 85%, transparent);
}
.services__rule-h::after {                 /* small node where the lines meet the orbit */
  content: "";
  position: absolute;
  top: 50%;
  right: max(24px, calc(50% - 650px));
  width: 9px;
  height: 9px;
  translate: 0 -50%;
  border-radius: 50%;
  border: 1.5px solid var(--fg-copper);
  background: var(--sv-ivory-1);
}

/* 2. Heading (centred: approved change from the reference) --------------- */
.services__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(36px, 4.4vw, 56px);
}
.services__mark {
  width: 56px;
  height: 2px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: var(--fg-copper);
  opacity: 0.85;
}
.services__title {
  margin: 0;
  color: var(--fg-navy-950);
  font-size: clamp(2.375rem, 1.15rem + 2.9vw, 3.75rem);   /* 38 → 60 */
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.034em;
}
.services__accent {
  color: var(--fg-copper);
  background: linear-gradient(180deg, #C9834D, #A85E2C);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 3. Grid & card --------------------------------------------------------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;                     /* every card the same height, as in the reference */
  gap: clamp(14px, 1.4vw, 20px);
  max-width: 1220px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.service {
  --sv-pad: clamp(24px, 2.3vw, 34px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: clamp(250px, 21.5vw, 306px);
  padding: var(--sv-pad);
  border-radius: 10px;
  background: linear-gradient(160deg, var(--sv-ivory-1), var(--sv-ivory-2));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(90, 58, 32, 0.06),
    0 14px 30px -24px rgba(90, 58, 32, 0.35);
  color: var(--fg-navy-950);
  transition: transform var(--fg-dur-std) var(--fg-ease), box-shadow var(--fg-dur-std) var(--fg-ease);
}
.service::before,
.service::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.service__num {
  color: var(--fg-copper-700);
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}
.service__num::after {                    /* short rule under the number */
  content: "";
  display: block;
  width: 34px;
  height: 1.5px;
  margin-top: 16px;
  background: currentColor;
  opacity: 0.55;
}

.service__icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-top: 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 238, 0.5));
  box-shadow: inset 0 0 0 1px rgba(184, 115, 51, 0.16), 0 6px 14px -10px rgba(90, 58, 32, 0.35);
  color: var(--fg-copper);
  transition: transform var(--fg-dur-std) var(--fg-ease);
}
.service__icon svg {
  width: 52%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service__icon .fill { fill: currentColor; stroke: none; }

.service__name {
  align-self: stretch;                     /* full column width, so a long word never overhangs its box */
  max-width: 64cqi;                        /* titles stay in the card's left column, clear of the geometry */
  margin: 20px 0 0;
  font-size: clamp(1.375rem, 0.85rem + 1.15vw, 1.875rem);   /* 22 → 30 */
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* 4. Variants (order and treatment from the approved reference) ---------- */

/* 01 — ivory with two quarter-circles on the right */
.service--arcs::before {
  width: 72cqi;
  aspect-ratio: 1;
  top: -34cqi;
  right: -34cqi;
  border-radius: 50%;
  background: linear-gradient(200deg, #F1E3D5, var(--sv-champagne));
}
.service--arcs::after {
  width: 86cqi;
  aspect-ratio: 1;
  bottom: -60cqi;
  right: -48cqi;
  border-radius: 50%;
  border: 1px solid var(--sv-line);
  background: linear-gradient(200deg, #F6ECE2, #EEDDCC);
}

/* 02 — peach-copper with an ivory curved corner */
.service--peach {
  background: linear-gradient(150deg, var(--sv-peach-1) 0%, #ECB089 45%, var(--sv-peach-2) 100%);
}
.service--peach::before {
  width: 120cqi;
  aspect-ratio: 1;
  top: -64cqi;
  right: -82cqi;
  border-radius: 50%;
  background: linear-gradient(225deg, #F6ECE2, #EFD9C5);
}
.service--peach .service__num { color: #8E5424; }
.service--peach .service__icon { background: linear-gradient(160deg, rgba(255, 244, 234, 0.82), rgba(255, 236, 220, 0.55)); }

/* 03 — ivory with a terracotta orb and a fine orbit */
.service--orb::before {
  width: 74cqi;
  aspect-ratio: 1;
  top: 50%;
  right: -24cqi;
  translate: 0 -46%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 34%, #E9A877, #C9824B 52%, #B2683A);
}
.service--orb::after {
  width: 84cqi;
  aspect-ratio: 1;
  top: 50%;
  right: -16cqi;
  translate: 0 -54%;
  border-radius: 50%;
  border: 1px solid var(--sv-line);
}

/* 04 — strong copper with a lighter diagonal panel and a fine arc */
.service--copper {
  background: linear-gradient(150deg, var(--sv-copper-1) 0%, #A86132 50%, var(--sv-copper-2) 100%);
  color: var(--sv-on-dark);
}
.service--copper::before {
  inset: 0;
  clip-path: polygon(54% 0, 100% 0, 100% 74%);
  background: linear-gradient(210deg, #F0CCAE, #DE9C6E);
  opacity: 0.9;
}
.service--copper::after {
  width: 92cqi;
  aspect-ratio: 1;
  bottom: -56cqi;
  right: -34cqi;
  border-radius: 50%;
  border: 1px solid rgba(255, 236, 218, 0.45);
}

/* 05 — ivory with a champagne side panel and two half-circles */
.service--split::before {
  top: 0;
  right: 0;
  bottom: 0;
  width: 28cqi;
  border-left: 1px solid var(--sv-line);
  background:
    radial-gradient(circle 24cqi at 100% 24%, #EAD6C2 99%, transparent 100%),
    radial-gradient(circle 24cqi at 100% 82%, #E5CBB2 99%, transparent 100%),
    linear-gradient(180deg, #F5EADF, #EFE0D1);
}

/* 06 — strong copper with a light corner wedge and a fine sweep */
.service--wedge {
  background: linear-gradient(150deg, var(--sv-copper-1) 0%, #A86132 50%, var(--sv-copper-2) 100%);
  color: var(--sv-on-dark);
}
.service--wedge::before {
  inset: 0;
  clip-path: polygon(62% 0, 100% 0, 100% 58%);
  background: linear-gradient(210deg, #F2D3B8, #E2A579);
  opacity: 0.88;
}
.service--wedge::after {
  width: 120cqi;
  aspect-ratio: 1;
  top: -78cqi;
  right: -56cqi;
  border-radius: 50%;
  border: 1px solid rgba(255, 236, 218, 0.5);
}

.service--wedge .service__name { max-width: 82cqi; }   /* "CRM, Retention &" stays on one line */

/* shared dark-card details */
.service--copper .service__num,
.service--wedge .service__num { color: rgba(255, 244, 232, 0.9); }
.service--copper .service__icon,
.service--wedge .service__icon {
  background: linear-gradient(160deg, rgba(255, 246, 238, 0.9), rgba(255, 236, 220, 0.72));
  box-shadow: 0 6px 14px -10px rgba(60, 30, 10, 0.5);
  color: #A85E2C;
}

/* 5. Hover & reveal ------------------------------------------------------ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .service:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.6),
      0 2px 4px rgba(90, 58, 32, 0.06),
      0 22px 40px -26px rgba(90, 58, 32, 0.45);
  }
  .service:hover .service__icon { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .services .services__intro,
  .reveal-ready .services .service {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--fg-ease), transform 600ms var(--fg-ease), box-shadow var(--fg-dur-std) var(--fg-ease);
  }
  .reveal-ready .services.is-visible .services__intro { opacity: 1; transform: none; }
  .reveal-ready .services.is-visible .service {
    opacity: 1;
    transform: none;
    transition-delay: calc(140ms + var(--i) * 80ms), calc(140ms + var(--i) * 80ms), 0ms;
  }
}

/* 6. Responsive ---------------------------------------------------------- */

/* Tablet & phones: two columns × three rows, same order */
@media (max-width: 899px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service { min-height: 0; }
  .services__orbit { width: 120vw; right: -96vw; top: -6%; }

  /* Two-column rhythm: dark cards zig-zag (top right · middle left · bottom right)
     01 light · 02 dark / 03 dark · 04 light / 05 light · 06 dark.
     Each card keeps its geometry; only its light/dark treatment changes. */
  .services {
    /* warm bronze-copper; the text area (lower left) stays ≥ 4.5:1 with ivory */
    --sv-dark: linear-gradient(152deg, #BB7843 0%, #AB6431 44%, #9A5627 100%);
  }

  /* dark: 02, 03, 06 */
  .service--peach,
  .service--orb,
  .service--wedge {
    background: var(--sv-dark);
    color: var(--sv-on-dark);
  }
  .service--peach::before {                 /* ivory corner becomes a copper-light curve */
    background: linear-gradient(225deg, #F2CDAE, #DE9C6E);
    opacity: 0.92;
  }
  .service--orb::before {                   /* orb turns copper-light on the bronze field */
    background: radial-gradient(circle at 32% 34%, #F6D7BB, #E7AE84 52%, #D39363);
  }
  .service--orb::after { border-color: rgba(255, 236, 218, 0.5); }

  .service--peach .service__num,
  .service--orb .service__num,
  .service--wedge .service__num { color: rgba(255, 246, 236, 0.95); }
  .service--peach .service__icon,
  .service--orb .service__icon,
  .service--wedge .service__icon {
    background: linear-gradient(160deg, rgba(255, 248, 241, 0.94), rgba(255, 238, 222, 0.78));
    box-shadow: 0 6px 14px -10px rgba(60, 30, 10, 0.5);
    color: #A85E2C;
  }

  /* light: 04 (01 and 05 are already light) */
  .service--copper {
    background: linear-gradient(160deg, var(--sv-ivory-1), var(--sv-ivory-2));
    color: var(--fg-navy-950);
  }
  .service--copper::before {                /* diagonal panel softens to champagne */
    background: linear-gradient(210deg, #F4E8DC, #EAD5C1);
    opacity: 1;
  }
  .service--copper::after { border-color: var(--sv-line); }
  .service--copper .service__num { color: var(--fg-copper-700); }
  .service--copper .service__icon {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 238, 0.5));
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, 0.16), 0 6px 14px -10px rgba(90, 58, 32, 0.35);
    color: var(--fg-copper);
  }
}

@media (max-width: 599px) {
  .services { padding: 64px 0 80px; }
  .services__intro { margin-bottom: 30px; }
  .services__mark { width: 44px; margin-bottom: 18px; }
  .services__title { font-size: min(2.5rem, 10.2vw); }

  .services__grid { gap: 10px; }
  .service { --sv-pad: 16px; min-height: 186px; padding-bottom: 18px; }
  .service__num { font-size: 0.875rem; }
  .service__num::after { width: 24px; margin-top: 10px; }
  .service__icon { width: 44px; height: 44px; margin-top: 14px; border-radius: 12px; }
  .service__name {
    margin-top: 14px;
    font-size: clamp(0.9375rem, 0.62rem + 1.4vw, 1.0625rem);  /* 15px @360 → 17px @430 */
    line-height: 1.22;
    letter-spacing: -0.012em;
  }
  /* narrow cards: titles use the full width; the orb accent steps back instead */
  .service__name,
  .service--wedge .service__name { max-width: none; }
  .service--orb::before { width: 58cqi; right: -26cqi; translate: 0 -30%; }
  .service--orb::after { width: 70cqi; right: -20cqi; translate: 0 -40%; }
  .services__rule-v { display: none; }
}