/* ==========================================================================
   Sebrina Abdellakelil
   Layout built against the Figma frame: 1920 x 6616.
   Desktop positions are expressed in vw so the composition holds at any
   width. 1px in the Figma frame = 0.0520833vw.
   Below 900px the whole thing switches to a flow layout.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--c-magenta);
  color: var(--c-offwhite);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--c-mint); outline-offset: 4px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Top bar: ticker on the left, navigation on the right
   ========================================================================== */

.topbar {
  position: absolute;
  top: 2.24vw;
  left: 3.39vw;
  right: 3.49vw;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4vw;
}

.ticker {
  margin: 0;
  font-weight: var(--w-medium);
  font-size: var(--fs-ticker);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-offwhite);
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: clamp(16px, 2vw, 38px);
}

.nav a {
  font-weight: var(--w-medium);
  font-size: var(--fs-ticker);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-offwhite);
  text-decoration: none;
  padding-bottom: 0.2em;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.nav a:hover { border-bottom-color: var(--c-mint); }
.nav a[aria-current='page'] { border-bottom-color: var(--c-mint); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  font-family: var(--font);
  font-weight: var(--w-xbold);
  font-size: var(--fs-ui);
  line-height: var(--lh-button);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 clamp(12px, 1.2vw, 24px);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.btn:hover { opacity: 0.86; }

.btn--white   { background: var(--c-white); color: var(--c-magenta); }
.btn--mint    { background: var(--c-mint);  color: var(--c-magenta); }
.btn--purple  { background: var(--c-purple); color: var(--c-mint); }

/* ==========================================================================
   SECTION 01 — Hero
   Frame: headline y219, camera centred, buttons y951, white peak apex y840
   ========================================================================== */

.hero {
  position: relative;
  height: 58.07vw;          /* 1115px */
}

.hero__title {
  position: absolute;
  top: 11.43vw;             /* 219.5px */
  left: 50%;
  transform: translateX(-50%);
  width: 60.52vw;           /* 1162px */
  margin: 0;
  z-index: 3;
  font-weight: var(--w-medium);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  text-align: center;
  text-transform: capitalize;
  color: var(--c-offwhite);
}

/* Each line sits in its own overflow box so the load reveal can slide up. */
.line { display: block; overflow: hidden; }
.line > span { display: block; }

.hero__title em { font-style: normal; color: var(--c-mint); }

.hero__camera {
  position: absolute;
  top: 22.94vw;             /* 440.5px */
  left: 36.67vw;            /* 704px   */
  width: 26.77vw;           /* 514px   */
  transform: rotate(-29.17deg);
  /* Figma rotated the padded PNG about its centre. Our asset is cropped, so
     the origin is shifted to that same point. */
  transform-origin: 49.9% 56.5%;
  z-index: 8;               /* over the headline and over the white sheet */
  pointer-events: none;
}

.hero__actions {
  position: absolute;
  top: 49.53vw;             /* 951px */
  left: 0;
  width: 100%;
  height: 3.49vw;
  z-index: 6;               /* above the white sheet's peak */
}

.hero__actions .btn { position: absolute; height: 100%; }

.hero__actions .btn--white { left: 3.39vw;  min-width: 18.19vw; }   /* 65px / 349px  */
.hero__actions .btn--mint  { right: 3.49vw; min-width: 26.41vw; }   /* 67px / 507px  */

/* ==========================================================================
   SECTION 02+03 — White sheet: image strip, step cards
   Top edge is a peak with its apex on the hero centre line.
   ========================================================================== */

.sheet {
  position: relative;
  height: 127.45vw;         /* 840 -> 3287 */
  margin-top: -14.32vw;     /* pull the peak up to y840 */
  background: var(--c-white);
  clip-path: polygon(0 14.32vw, 50% 0, 100% 14.32vw, 100% 100%, 0 89.5%);
  z-index: 5;
}

/* ---- Image strip -------------------------------------------------------- */

.strip { position: absolute; inset: 0; }

.strip__item {
  position: absolute;
  width: 14.84vw;           /* 285px */
  height: 18.54vw;          /* 356px */
  overflow: hidden;
  background: var(--c-purple);
}

.strip__item img { width: 100%; height: 100%; object-fit: cover; }

/* Positions relative to the sheet top (y840 in the frame). */
.strip__item:nth-child(1) { left: -2.03vw; top: 23.18vw; }
.strip__item:nth-child(2) { left: 15.36vw; top: 26.20vw; }
.strip__item:nth-child(3) { left: 33.70vw; top: 18.02vw; }
.strip__item:nth-child(4) { left: 52.03vw; top: 23.18vw; }
.strip__item:nth-child(5) { left: 69.79vw; top: 26.20vw; }
.strip__item:nth-child(6) { left: 87.19vw; top: 28.96vw; }

/* ---- Copy around the cards ---------------------------------------------- */

.sheet__lead,
.sheet__note {
  position: absolute;
  margin: 0;
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--track);
  color: var(--c-purple);
}

.sheet__lead {
  top: 61.64vw;             /* 2023.5px */
  right: 3.44vw;            /* right edge 1854px */
  width: 18.96vw;           /* 364px */
  text-align: right;
}

.sheet__note {
  top: 104.09vw;            /* 2838.5px */
  left: 3.44vw;             /* 66px */
  width: 25.21vw;           /* 484px */
}

/* ---- Step cards --------------------------------------------------------- */

.steps { position: absolute; inset: 0; }

.step {
  position: absolute;
  top: 69.79vw;             /* 2180px */
  width: 23.54vw;           /* 452px */
  height: 28.96vw;          /* 556px */
  padding: 3.20vw 1.67vw;
}

.step--1 { left: 3.44vw;  background: var(--c-magenta); }
.step--2 { left: 31.04vw; background: var(--c-purple);  }

/* Step 3 sits on the mint wedge, so it carries no fill of its own. */
.step--3 { left: 60.94vw; width: 31.35vw; padding-left: 2.34vw; }

.step h3 {
  margin: 0;
  font-weight: var(--w-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  color: var(--c-white);
}

.step--3 h3 { font-weight: var(--w-xbold); color: var(--c-purple); }

.step p {
  position: absolute;
  top: 19.48vw;             /* body y2610.5 */
  left: 1.67vw;
  width: 20.05vw;
  margin: 0;
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--track);
  color: var(--c-white);
}

.step--3 p { left: 2.34vw; width: 26.61vw; color: var(--c-purple); }

/* ---- Mint wedge --------------------------------------------------------- */

.wedge {
  position: absolute;
  top: 69.79vw;             /* 2180px */
  left: 58.59vw;            /* 1125px */
  width: 37.97vw;           /* 729px  */
  height: 54.95vw;          /* 1055px */
  background: var(--c-mint);
  clip-path: polygon(0 0, 100% 0, 100% 52.7%, 0 100%);
  z-index: -1;
}

/* ==========================================================================
   SECTION 04+05+06 — Magenta body: transition line, story, calculator
   ========================================================================== */

.body-mag {
  position: relative;
  min-height: 157.97vw;     /* 3287 -> 6320 */
  padding-bottom: 10.77vw;  /* room under the card when the result opens */
  margin-top: -8.5vw;       /* meet the sheet's diagonal bottom */
  display: flow-root;       /* stops the card's margin collapsing out */
  z-index: 1;
}

.turn {
  position: absolute;
  top: 5.76vw;              /* 3397.5px */
  left: 50%;
  transform: translateX(-50%);
  width: 28.33vw;           /* 544px */
  margin: 0;
  font-weight: var(--w-xbold);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  text-align: center;
  color: var(--c-white);
}

/* ---- Polaroid stack ----------------------------------------------------- */

.stack { position: absolute; inset: 0; }

.stack__item {
  position: absolute;
  left: 9.79vw;             /* 188px */
  width: 17.60vw;           /* 338px */
  height: 24.95vw;          /* 479px */
  overflow: hidden;
  background: var(--c-purple);
}

.stack__item img { width: 100%; height: 100%; object-fit: cover; }

.stack__item:nth-child(1) { top: 14.22vw; transform: rotate(7.39deg);   }
.stack__item:nth-child(2) { top: 27.12vw; left: 14.60vw; transform: rotate(-12.57deg); }
.stack__item:nth-child(3) { top: 39.40vw; left: 12.14vw; transform: rotate(19.38deg);  }

/* ---- Story -------------------------------------------------------------- */

.story__title {
  position: absolute;
  top: 42.00vw;             /* 4093.5px */
  left: 52.81vw;            /* 1014px */
  width: 43.70vw;           /* 839px  */
  margin: 0;
  font-weight: var(--w-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  color: var(--c-mint);
}

.story__body {
  position: absolute;
  top: 64.79vw;             /* 4531px */
  left: 52.40vw;            /* 1006px */
  width: 40.36vw;           /* 775px  */
}

.story__body p {
  margin: 0 0 1.2em;
  font-weight: var(--w-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track);
  color: var(--c-white);
}

.story__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   SECTION 07 — Estimate calculator
   ========================================================================== */

.quote {
  position: relative;
  margin: 104.60vw 0 0 6.25vw;   /* card top 5296px, left 120px */
  width: 90.26vw;                /* 1733px */
}

.quote__card {
  position: relative;
  background: var(--c-white);
  padding: var(--card-pad);
}

.quote__camera {
  position: absolute;
  top: -6.01vw;             /* 115px above the card */
  right: 3.96vw;            /* 76px  */
  width: 8.34vw;            /* 160px */
  transform: rotate(-29.17deg);
  transform-origin: 49.9% 56.5%;
  pointer-events: none;
  z-index: 2;
}

.field { margin: 0 0 3.65vw; padding: 0; border: 0; min-width: 0; }

.field__label {
  display: block;
  padding: 0;
  margin: 0 0 1.46vw;
  font-weight: var(--w-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-ui);
  letter-spacing: var(--track);
  color: var(--c-purple);
}

.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.77vw; }

.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }

.chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--chip-h);
  padding: 0 8px;
  border: var(--border) solid var(--c-magenta);
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--track);
  color: var(--c-purple);
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out);
}

.chip input:hover + span { background: rgba(255, 0, 208, 0.08); }
.chip input:checked + span { background: var(--c-magenta); }
.chip input:focus-visible + span { outline: 3px solid var(--c-purple); outline-offset: 3px; }

.select { position: relative; display: block; }

.select select {
  width: 100%;
  height: var(--field-h);
  padding: 0 4vw 0 1.15vw;
  border: var(--border) solid var(--c-magenta);
  border-radius: 0;
  background: transparent;
  font-family: var(--font);
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  letter-spacing: var(--track);
  color: var(--c-purple);
  appearance: none;
  cursor: pointer;
}

.select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.35vw;
  width: 1.72vw;
  height: 0.63vw;
  min-width: 20px;
  min-height: 8px;
  transform: translateY(-50%);
  background: var(--c-magenta);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}

.actions {
  margin-top: 4.2vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  flex-wrap: wrap;
}

.link-quote {
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--track);
  color: var(--c-purple);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.actions .btn { min-width: 26.41vw; height: var(--btn-h); }

/* ---- Result ------------------------------------------------------------- */

.result { margin-top: 3.65vw; padding: 3.1vw; background: var(--c-mint); }
.result[hidden] { display: none; }

.result__eyebrow {
  margin: 0 0 0.8vw;
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  letter-spacing: var(--track);
  color: var(--c-purple);
}

.result__price {
  margin: 0 0 1.2vw;
  font-weight: var(--w-xbold);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  color: var(--c-purple);
}

.result__sentence {
  max-width: 34ch;
  margin: 0 0 0.8vw;
  font-weight: var(--w-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track);
  color: var(--c-purple);
}

.result__breakdown {
  margin: 0 0 2.4vw;
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--track);
  color: var(--c-purple);
  opacity: 0.75;
}

.result__note {
  margin: 0 0 2.4vw;
  max-width: 34ch;
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--track);
  color: var(--c-purple);
}

.result__note:empty { margin: 0; }

.result__prompt {
  margin: 0;
  max-width: 34ch;
  font-weight: var(--w-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track);
  color: var(--c-purple);
}

.editing { margin: 0 0 1.8vw; padding: 0; border: 0; min-width: 0; }

.editing__q {
  padding: 0;
  margin-bottom: 1.2vw;
  font-weight: var(--w-bold);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--track);
  color: var(--c-purple);
}

.editing__opts { display: flex; gap: 1vw; }

.chip--onmint { flex: 0 0 9vw; min-width: 96px; }
.chip--onmint span { border-color: var(--c-purple); }
.chip--onmint input:hover + span { background: rgba(88, 0, 154, 0.08); }
.chip--onmint input:checked + span { background: var(--c-purple); color: var(--c-mint); }

.result__cta { display: inline-flex; min-width: 26.41vw; height: var(--btn-h); }

/* ==========================================================================
   SECTION 08 — Footer
   ========================================================================== */

.footer {
  position: relative;
  height: 15.42vw;          /* 296px */
  background: var(--c-mint);
  z-index: 2;
}

.footer__name {
  position: absolute;
  top: 6.17vw;
  left: 6.67vw;
  margin: 0;
  font-weight: var(--w-medium);
  font-size: var(--fs-name);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  text-transform: capitalize;
  color: var(--c-magenta);
}

.footer__links {
  position: absolute;
  top: 9.19vw;
  left: 43.13vw;
  right: 6.25vw;
  display: flex;
  justify-content: space-between;
  gap: 2vw;
}

.footer__links a {
  font-weight: var(--w-medium);
  font-size: var(--fs-link);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  text-transform: capitalize;
  color: var(--c-magenta);
  text-decoration: none;
}

.footer__links a:hover { text-decoration: underline; }

/* ==========================================================================
   SERVICES SUBPAGE
   ========================================================================== */

.svc-hero {
  position: relative;
  padding: 12vw 6.25vw 6vw;
  background: var(--c-magenta);
}

.svc-hero h1 {
  max-width: 62vw;
  margin: 0;
  font-weight: var(--w-medium);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  text-transform: capitalize;
  color: var(--c-offwhite);
}

.svc-hero h1 em { font-style: normal; color: var(--c-mint); }

.svc-list {
  position: relative;
  padding: 6vw 6.25vw 8vw;
  background: var(--c-white);
  clip-path: polygon(0 4vw, 50% 0, 100% 4vw, 100% 100%, 0 100%);
}

.svc {
  display: grid;
  grid-template-columns: 6vw 1fr 1fr;
  gap: 2vw;
  align-items: start;
  padding: 3vw 0;
  border-top: 1px solid rgba(88, 0, 154, 0.25);
}

.svc:last-child { border-bottom: 1px solid rgba(88, 0, 154, 0.25); }

.svc__num {
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  letter-spacing: var(--track);
  color: var(--c-magenta);
}

.svc__name {
  margin: 0;
  font-weight: var(--w-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  color: var(--c-purple);
}

.svc__desc {
  margin: 0;
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
  letter-spacing: var(--track);
  color: var(--c-purple);
}

.svc-cta {
  padding: 8vw 6.25vw;
  background: var(--c-magenta);
  text-align: center;
}

.svc-cta p {
  max-width: 24ch;
  margin: 0 auto 3vw;
  font-weight: var(--w-xbold);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  color: var(--c-white);
}

.svc-cta .btn { height: var(--btn-h); min-width: 26.41vw; }

/* ==========================================================================
   MOBILE — everything unpins into a single column
   ========================================================================== */

@media (max-width: 900px) {

  /* Top bar becomes two clean rows: ticker, then navigation across the width. */
  .topbar {
    position: static;
    left: auto; right: auto; top: auto;
    display: block;
    padding: 18px 20px 0;
  }

  .ticker {
    font-size: 11px;
    text-align: center;
    white-space: normal;
    margin-bottom: 16px;
  }

  .nav {
    justify-content: space-between;
    gap: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(242, 242, 242, 0.3);
  }

  .nav a { font-size: 12px; }

  /* ---- Hero ---- */
  .hero { height: auto; padding: 28px 20px 44px; }

  .hero__title,
  .hero__actions,
  .hero__camera { position: static; transform: none; }

  .hero__title { width: 100%; margin: 34px 0 24px; }

  .hero__camera {
    width: 62%;
    margin: 8px auto 28px;
    transform: rotate(-18deg);
  }

  .hero__actions { display: flex; flex-direction: column; gap: 12px; height: auto; }
  .hero__actions .btn { position: static; width: 100%; height: 52px; }

  /* ---- White sheet ---- */
  .sheet {
    height: auto;
    margin-top: 0;
    clip-path: polygon(0 40px, 50% 0, 100% 40px, 100% 100%, 0 100%);
    padding: 56px 20px 56px;
  }

  .strip {
    position: static;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px 52px;
    padding: 26px 20px 0;
  }

  .strip::-webkit-scrollbar { display: none; }

  .strip__item {
    position: static;
    flex: 0 0 62vw;
    width: auto;
    height: auto;
    aspect-ratio: 285 / 356;
    scroll-snap-align: start;
  }

  .strip__item:nth-child(even) { margin-top: 26px; }

  .sheet__lead,
  .sheet__note {
    position: static;
    width: 100%;
    text-align: left;
    margin-bottom: 32px;
  }

  .steps {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
  }

  .step {
    position: static;
    width: 100%;
    height: auto;
    padding: 28px 22px;
  }

  .step--3 { background: var(--c-mint); }
  .step p { position: static; width: 100%; margin-top: 14px; }

  .wedge { display: none; }

  /* ---- Magenta body ---- */
  .body-mag {
    min-height: 0;
    margin-top: 0;
    padding: 60px 20px 70px;
  }

  .turn { position: static; transform: none; width: 100%; margin-bottom: 48px; }

  /* Full bleed so the three frames can be big and still overlap.
     Widths are in vw and leave room for the rotation to swing. */
  .stack {
    position: static;
    display: flex;
    justify-content: center;
    gap: 0;
    width: 100vw;
    margin: 0 0 56px calc(50% - 50vw);
  }

  .stack__item {
    position: static;
    left: auto; top: auto;
    flex: 0 0 40vw;
    width: 40vw;
    margin-left: -7vw;
    height: auto;
    aspect-ratio: 338 / 479;
  }

  .stack__item:first-child { margin-left: 0; }

  .stack__item:nth-child(1) { transform: rotate(-4deg); }
  .stack__item:nth-child(2) { transform: rotate(2deg); }
  .stack__item:nth-child(3) { transform: rotate(6deg); }

  .story__title,
  .story__body { position: static; width: 100%; left: auto; top: auto; }

  .story__title { margin-bottom: 24px; }
  .story__body { margin-bottom: 56px; }

  /* ---- Calculator ---- */
  .quote { position: relative; margin: 0; width: 100%; }
  .quote__card { padding: 26px 20px; }
  .quote__camera { width: 96px; top: -66px; right: 14px; }

  .field { margin-bottom: 30px; }
  .field__label { margin-bottom: 14px; }
  .chips { grid-template-columns: 1fr; gap: 10px; }

  .select select { padding: 0 44px 0 12px; }
  .select::after { right: 14px; }

  .actions { margin-top: 30px; flex-direction: column-reverse; align-items: stretch; }
  .actions .btn { width: 100%; }
  .link-quote { text-align: center; }

  .result { margin-top: 28px; padding: 24px; }
  .result__price { margin-bottom: 12px; }
  .result__breakdown, .result__note { margin-bottom: 20px; }
  .editing { margin-bottom: 18px; }
  .chip--onmint { flex: 1; }
  .result__cta { width: 100%; min-width: 0; }

  /* ---- Footer ---- */
  .footer { height: auto; padding: 36px 20px; }

  .footer__name,
  .footer__links {
    position: static;
    top: auto; left: auto; right: auto;
  }

  .footer__name { margin-bottom: 22px; }
  .footer__links { justify-content: flex-start; gap: 22px; }

  /* ---- Services page ---- */
  .svc-hero { padding: 40px 20px 50px; }
  .svc-hero h1 { max-width: 100%; margin-top: 30px; }

  .svc-list { padding: 56px 20px 60px; clip-path: polygon(0 30px, 50% 0, 100% 30px, 100% 100%, 0 100%); }
  .svc { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .svc-cta { padding: 56px 20px; }
  .svc-cta .btn { width: 100%; min-width: 0; height: 52px; }
}