/* Soft clay / Violet: a variant of soft clay, after instalanding.ai's recessed-aperture-hero-page
   (MIT). Soft UI on a mid-violet page: one light source at the top left, and every raised or
   pressed surface is the SAME violet as the page, so the relief comes only from a light edge
   (top left) and a dark edge (bottom right). Raised = both shadows outside; pressed = the same
   two inside. Cream and coral are the marks; the primary button is a cream-to-peach pill with
   dark violet ink; placeholders and the pricing slab run indigo to orchid. Barlow Condensed
   capitals for headlines, Barlow for the rest. The hero's console becomes an aperture cut
   into the page. Coral fails as text on the violet (2.8:1), so it is used for shapes only and
   cream carries the text marks. Loads after soft-clay.css and overrides it.
   Suits physios, yoga and pilates studios, childcare, tutoring. */

:root[data-variant="soft-clay-violet"] {
  --accent-hue: 350;
  --bg: #695681;
  --bg-soft: #695681;
  --surface: #695681;
  --edge-light: #7f6b9b;
  --edge-dark: #4d3e60;
  --ink: #ffffff;
  --ink-2: #f6f0fb;
  --muted: #eadff5;
  --line: rgb(77 62 96 / 0.9);
  --accent: #ffedc0; /* cream: text marks, focus, the reading line */
  --accent-soft: rgb(255 237 192 / 0.2);
  --coral: #fb8a8a; /* shapes only */
  --cream: #ffedc0;
  --peach: #ffc9a0;
  --violet-ink: #2b2040;
  --primary: #ffedc0;
  --primary-ink: #2b2040;
  --glass: #695681;
  --glass-border: transparent;
  --clay-dark: #4d3e60;
  --grad-primary: linear-gradient(145deg, #ffedc0, #ffc9a0);

  --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "Barlow", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: 0.015em;
  --display-leading: 1;

  --shadow-light:
    9px 9px 20px var(--edge-dark),
    -9px -9px 20px var(--edge-light);
  --shadow-small:
    5px 5px 11px var(--edge-dark),
    -5px -5px 10px var(--edge-light);
  --shadow-inset:
    inset 5px 5px 11px var(--edge-dark),
    inset -5px -5px 11px var(--edge-light);
  --shadow-aperture:
    inset 14px 14px 30px var(--edge-dark),
    inset -12px -12px 26px var(--edge-light);
  --shadow: var(--shadow-light);

  --slab-bg: linear-gradient(135deg, #2f2c73, #7a45a0);
  --slab-ink: #ffffff;
  --footer-bg: var(--bg);
  --footer-ink: var(--ink);

  /* placeholders: indigo to orchid */
  --ph-1: linear-gradient(145deg, #4a45a8, #a465c6);
  --ph-2: radial-gradient(80% 70% at 30% 25%, #8a6fd6, #5a4fb4 60%, #3a3487);
  --ph-3: linear-gradient(200deg, #b072d0, #5a4fb4 70%, #3a3487);
  --ph-4: radial-gradient(80% 70% at 70% 30%, #a465c6, #6d4aa8 60%, #35307f);
  --ph-5: linear-gradient(120deg, #3f3b9a, #8b58bd 60%, #b072d0);
  --ph-6: radial-gradient(80% 70% at 40% 70%, #9c7ae0, #6a4cb0 60%, #3f3b9a);

  & body { font-size: 18px; }
  & ::selection { background: var(--coral); color: var(--violet-ink); }
  & :focus-visible { outline-color: var(--cream); }
  & .field input:focus, & .field textarea:focus { outline-color: var(--cream); }
  & .book-option:has(input:focus-visible), & .book-time:has(input:focus-visible), & .book-day:focus-visible { outline-color: var(--cream); }
  & .mono { font-weight: 500; }

  /* capitals where the base sets big display */
  & h1, & h2, & h3, & .group-title, & .footer-name, & .sc-bgword, & .wordmark { text-transform: uppercase; }
  & h1, & h2 { font-weight: 600; }
  & h1 { font-size: clamp(48px, 7.2vw, 108px); }
  & .sc-copy h1 { font-size: clamp(48px, 7.2vw, 108px); max-width: 12ch; }
  & h2 { font-size: clamp(38px, 4.8vw, 68px); }
  & h3 { font-size: 26px; }
  & .group-title, & .service-name, & .brand-name { font-weight: 600; letter-spacing: 0.02em; }
  & .service-name { text-transform: uppercase; font-family: var(--font-display); font-size: 24px; }
  & .stat dd, & .plan-price .mono { font-family: var(--font-display); font-weight: 600; font-size: 38px; }

  /* eyebrows: a coral dot and white capitals */
  & .eyebrow { font: 600 14px/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
  & .eyebrow::before { background: var(--coral); box-shadow: 0 0 0 4px rgb(251 138 138 / 0.25); }

  /* buttons: raised, then pressed */
  & .btn { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; transition: none; }
  & .btn-primary {
    background: var(--grad-primary); color: var(--violet-ink); border: 0;
    box-shadow: 6px 6px 14px var(--edge-dark), -6px -6px 14px var(--edge-light);
  }
  & .btn-primary:hover { border-color: transparent; box-shadow: 8px 8px 18px var(--edge-dark), -8px -8px 18px var(--edge-light); }
  & .btn-ghost { background: var(--bg); color: var(--ink); border: 0; box-shadow: var(--shadow-small); backdrop-filter: none; -webkit-backdrop-filter: none; }
  & .btn-ghost:hover { box-shadow: 7px 7px 15px var(--edge-dark), -7px -7px 14px var(--edge-light); }
  & .btn:active { transform: none; }
  & .btn-primary:active { box-shadow: inset 4px 4px 9px rgb(43 32 64 / 0.35), inset -3px -3px 8px rgb(255 255 255 / 0.45); }
  & .btn-ghost:active { box-shadow: var(--shadow-inset); }
  & .pill { background: var(--bg); color: var(--ink-2); box-shadow: var(--shadow-inset); }
  & .chips .pill { font-weight: 500; }

  /* nav: a raised violet bar */
  & .nav-inner { background: rgb(105 86 129 / 0.94); box-shadow: 7px 7px 16px rgb(77 62 96 / 0.85), -6px -6px 14px rgb(127 107 155 / 0.85); }
  & .brand-mark { background: linear-gradient(145deg, #ffb0a0, var(--coral)); color: var(--violet-ink); box-shadow: 3px 3px 7px var(--edge-dark), -2px -2px 5px var(--edge-light); }
  & .nav-menu summary { background: var(--bg); box-shadow: var(--shadow-small); }
  & .nav-menu[open] summary { box-shadow: var(--shadow-inset); }
  & .nav-menu ul { background: var(--bg); }
  & .nav-menu a:hover { background: var(--bg); box-shadow: var(--shadow-inset); }
  & .nav-links a:hover, & .nav-phone:hover { color: var(--cream); }

  /* hero: the console is an aperture cut into the page, its tiles raised inside it */
  & .sc-bgword { background: linear-gradient(180deg, var(--edge-light), rgb(127 107 155 / 0)); -webkit-background-clip: text; background-clip: text; font-weight: 700; letter-spacing: 0; line-height: 0.85; font-size: 21vw; }
  & .sc-copy .lead { color: var(--ink-2); }
  & .sc-console {
    padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); color: var(--ink);
    background: var(--bg); box-shadow: var(--shadow-aperture);
  }
  & .sc-bar { color: var(--muted); }
  & .sc-dots i { background: var(--edge-light); box-shadow: inset 1px 1px 2px var(--edge-dark); }
  & .sc-dots i:first-child { background: var(--coral); box-shadow: none; }
  & .sc-hours { background: var(--bg); box-shadow: var(--shadow-small); border-radius: 18px; }
  & .sc-hours caption { color: var(--muted); }
  & .sc-hours th, & .sc-hours td { border-top-color: var(--line); font-size: 15px; }
  & .sc-hours tr:first-child th, & .sc-hours tr:first-child td { border-top: 0; }
  & .sc-hours td { color: var(--cream); }
  & .sc-hours .closed td { color: var(--muted); }
  & .sc-tiles li { background: var(--bg); box-shadow: var(--shadow-small); }
  & .sc-el { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-inset); }
  & .sc-tiles li:first-child .sc-el { background: var(--coral); color: var(--violet-ink); box-shadow: 2px 2px 5px var(--edge-dark), -2px -2px 4px var(--edge-light); }
  & .sc-el small { opacity: 0.85; }
  & .sc-tile-name { font-size: 15px; font-weight: 500; }
  & .sc-tile-price { color: var(--muted); }
  & .sc-call { color: var(--ink); font-size: 15px; }
  & .sc-call span { color: var(--coral); }

  /* sections: sheets of the same violet, lit from the top left */
  & main > .section { box-shadow: 0 -10px 22px -14px var(--edge-dark), inset 0 2px 0 var(--edge-light); }
  & main > .section:nth-of-type(odd), & main > .section:nth-of-type(even) { background: var(--bg); }
  & main > .section:nth-of-type(odd) .card:not(.plan) { background: var(--bg); }

  & .marquee-track { text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; font-weight: 500; }
  & .marquee-track li { background: var(--bg); box-shadow: 5px 5px 11px var(--edge-dark), -5px -5px 10px var(--edge-light); }
  & .index { background: var(--bg); color: var(--cream); font-weight: 600; box-shadow: var(--shadow-inset); }
  & .service-foot { border-top-color: var(--line); }

  /* pictures sit in recesses: the shadows reversed, and inside the placeholders too */
  & .about-media, & .gallery-item, & .hero-media { box-shadow: -6px -6px 14px var(--edge-dark), 6px 6px 14px var(--edge-light); overflow: hidden; }
  & .ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 8px 8px 16px var(--edge-dark), inset -6px -6px 14px var(--edge-light); }
  & .ph-label { background: rgb(43 32 64 / 0.82); color: var(--cream); backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 1; }
  & .stat { background: var(--bg); box-shadow: var(--shadow-inset); }
  & .stat dt { color: var(--muted); }

  & .stars { color: var(--cream); }
  /* the middle review is pressed in instead of dark */
  & .reviews-grid > li:nth-child(3n + 2) { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-inset); }
  & .reviews-grid > li:nth-child(3n + 2) .review-source { color: var(--muted); }

  & .pricing-slab { background: var(--slab-bg); }
  & .pricing-slab .lead, & .pricing-slab .eyebrow { opacity: 1; color: #ffffff; }
  & .plan { background: rgb(43 32 64 / 0.25); border-color: rgb(255 255 255 / 0.14); box-shadow: inset 4px 4px 10px rgb(43 32 64 / 0.4), inset -3px -3px 8px rgb(255 255 255 / 0.08); }
  & .plan.featured { background: var(--bg); color: var(--ink); border-color: transparent; box-shadow: 9px 9px 20px rgb(43 32 64 / 0.55), -7px -7px 16px rgb(150 130 190 / 0.45); }
  & .plan-period { opacity: 1; color: var(--ink-2); }
  & .plan-flag { background: var(--coral); color: var(--violet-ink); border: 0; box-shadow: none; font-weight: 600; }
  & .plan:not(.featured) .btn-primary { background: var(--grad-primary); color: var(--violet-ink); }
  & .plan-features li::before { color: var(--cream); }
  & .plan:not(.featured) .plan-features li::before, & .plan.featured .plan-features li::before { color: var(--cream); }
  & .plan:not(.featured) .btn-ghost { background: rgb(43 32 64 / 0.3); color: #ffffff; box-shadow: var(--shadow-small); }

  & .faq-item, & .faq-item:first-child { background: var(--bg); }
  & main > .section:nth-of-type(odd) .faq-item { background: var(--bg); }
  & .faq-item summary::after { background: var(--bg); box-shadow: var(--shadow-inset); }
  & .faq-item[open] summary::after { background: var(--coral); color: var(--violet-ink); box-shadow: 2px 2px 5px var(--edge-dark), -2px -2px 4px var(--edge-light); }

  & .map { background: var(--bg); box-shadow: var(--shadow-aperture); padding: 12px; }
  & .map iframe { filter: sepia(0.3) hue-rotate(215deg) saturate(0.75) brightness(0.9); }
  /* fields are pressed in */
  & .field input, & .field textarea { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-inset); }
  & .field input::placeholder, & .field textarea::placeholder { color: var(--muted); opacity: 1; }
  & .form .sent { background: var(--bg); box-shadow: var(--shadow-inset); border-color: var(--cream); }
  & .book-option, & .book-time, & .book-day { background: var(--bg); border-color: transparent; box-shadow: var(--shadow-small); }
  & .book-option:has(input:checked), & .book-time:has(input:checked), & .book-day[aria-pressed="true"] {
    background: var(--grad-primary); color: var(--violet-ink); border-color: transparent; box-shadow: var(--shadow-inset);
  }

  /* footer: the same sheet, its wordmark embossed in the dark edge */
  & .footer { box-shadow: 0 -10px 22px -14px var(--edge-dark), inset 0 2px 0 var(--edge-light); }
  & .footer-title { opacity: 1; color: var(--muted); }
  & .footer-base { opacity: 1; color: var(--ink-2); border-top-color: var(--line); }
  & .wordmark { font-weight: 700; letter-spacing: 0; background: linear-gradient(180deg, var(--edge-dark), rgb(77 62 96 / 0.1)); -webkit-background-clip: text; background-clip: text; }

  & .callbar { background: rgb(105 86 129 / 0.96); box-shadow: 0 -8px 20px rgb(77 62 96 / 0.7); }

  /* services "index": every row a raised violet bar that sinks in when pointed at */
  & .ix-list { display: grid; gap: 16px; }
  & .ix, & .ix-list > li:last-child .ix {
    padding: 18px clamp(16px, 2.4vw, 30px); border: 0; border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-small);
  }
  & .ix { align-items: center; }
  & .ix-n { color: var(--cream); font-weight: 600; }
  & .ix-name { font-weight: 600; text-transform: uppercase; letter-spacing: 0.015em; }
  & .ix-details { color: var(--ink-2); font-size: 17px; }
  & .ix-meta { color: var(--cream); font-size: 15px; font-weight: 600; }
  & .ix:hover, & .ix:focus-visible { box-shadow: var(--shadow-inset); }

  /* faq "master": the questions are raised keys, the chosen one pressed in; the answer an aperture */
  & .master-live .master-tabs { gap: 14px; }
  & .master-tab, & .master-tab:last-child { padding: 14px 18px; border: 0; border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: var(--shadow-small); }
  & .master-n { color: var(--muted); font-weight: 600; }
  & .master-tab[aria-selected="true"] { box-shadow: var(--shadow-inset); font-weight: 600; }
  & .master-tab[aria-selected="true"] .master-n { color: var(--cream); }
  & .master-live .master-item { border: 0; background: var(--bg); box-shadow: var(--shadow-aperture); }
  & .master-q { text-transform: uppercase; font-weight: 600; letter-spacing: 0.015em; font-size: clamp(28px, 3.4vw, 44px); line-height: 1; }
  & .master-a { color: var(--ink-2); font-size: 19px; }

  /* gallery "aperture": the openings are cut into the page, so the rim is the page's own pressed-in shadow */
  & .ap { --ap-rim: inset 12px 12px 24px var(--edge-dark), inset -10px -10px 22px var(--edge-light); }
  & .ap .gallery-item { box-shadow: none; }

  /* motion */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .btn { transition: box-shadow 0.2s ease, background-color 0.2s ease; }
      & .btn:hover { transform: none; }
      & .service:hover { transform: none; box-shadow: 11px 11px 24px var(--edge-dark), -11px -11px 24px var(--edge-light); }
    }
  }
}