/* ============================================================
   ספיר פורסילן — סגנון האתר
   Palette: "Blush" (locked by the client).
   Design intent: soft + playful, minimal, mobile-first (~380px),
   full RTL via logical properties, WCAG AA contrast.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Locked palette */
  --bg: #FCF4EF;            /* soft blush ivory */
  --ink: #40303A;           /* deep plum-cocoa, never harsh black */
  --ink-soft: #6E5B63;      /* secondary text */
  --a1: #EF9E93;            /* dusty coral (decorative) */
  --a1-deep: #E07C6E;       /* coral, decorative / hovers on light text */
  --a2: #A9C3A0;            /* sage */
  --a3: #F4CE7A;            /* butter */
  --a4: #AFC2E4;            /* periwinkle */

  /* Derived, text-safe coral: the locked corals fail WCAG AA as
     text/buttons on the blush background, so text and CTA fills
     use this deeper shade of the same family (brief requires AA). */
  --a1-text: #C14F3C;

  /* Surfaces + lines */
  --card: #FFFDFB;
  --line: rgba(64, 48, 58, 0.10);

  /* Soft warm shadow, tinted to the ink hue (no gray/black shadows) */
  --shadow-soft: 0 10px 30px rgba(64, 48, 58, 0.08);
  --shadow-lift: 0 16px 38px rgba(64, 48, 58, 0.12);

  /* Shape system (locked): cards ~26-28px, buttons pill */
  --radius-card: 27px;
  --radius-input: 14px;

  --font-head: 'Varela Round', 'Assistant', sans-serif;
  --font-body: 'Assistant', sans-serif;

  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: 84px; /* keep anchors clear of the sticky header */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px: generous for one-handed phone reading */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400; /* Varela Round has a single weight; scale does the work */
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h2 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; }

a { color: var(--a1-text); }

/* Visible focus for keyboard users, everywhere */
:focus-visible {
  outline: 3px solid var(--a1-text);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -48px;
  inset-inline-start: 12px;
  z-index: 60;
  background: var(--ink);
  color: #FFFDFB;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: inset-block-start 0.2s var(--ease-soft);
}
.skip-link:focus { inset-block-start: 12px; }

/* Honeypot: off-screen for humans, present for bots */
.hp-field {
  position: absolute !important;
  inset-inline-start: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 5vw, 48px);
  background: rgba(252, 244, 239, 0.88);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}

/* Soft shadow once the page is scrolled (JS toggles .scrolled) */
.site-header.scrolled { box-shadow: 0 6px 24px rgba(64, 48, 58, 0.09); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-logo {
  inline-size: 34px;
  block-size: 34px;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  gap: clamp(14px, 3vw, 28px);
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding-block: 4px;
  border-block-end: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
/* Current section while scrolling (JS toggles .active) */
.site-nav a.active {
  color: var(--ink);
  border-block-end-color: var(--a1-deep);
}

/* ---------- Buttons (pill system, locked) ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  border: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft), background-color 0.2s;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: var(--a1-text); /* AA on white text; corals stay decorative */
  color: #FFFDFB;
  box-shadow: 0 8px 22px rgba(193, 79, 60, 0.28);
}
.btn-primary:hover {
  background: #AC4534;
  box-shadow: 0 10px 26px rgba(193, 79, 60, 0.34);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--ink-soft); }

.btn-wide { inline-size: 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 78vh;  /* fallback for browsers without dvh */
  min-height: 78dvh; /* calm, fits in the first viewport with CTAs visible */
  display: grid;
  place-items: center;
  padding: clamp(48px, 9vw, 96px) clamp(20px, 6vw, 64px);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-inline-size: 640px;
  text-align: center;
}

.hero-title {
  font-size: clamp(2.1rem, 7.5vw, 3.4rem);
  margin-block-end: 0.5em;
}

.hero-accent { color: var(--a1-text); }

.hero-sub {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 3vw, 1.2rem);
  max-inline-size: 34ch;
  margin-inline: auto;
  margin-block-end: 1.8em;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Floating shapes: CSS-only "plush" circles. The radial gradient
   puts a soft highlight at the top for a gentle 3D feel.
   (WebGL was tried and rejected; all motion is CSS transforms.)

   The circles used to live inside the hero and leave with it. They now
   sit on one layer fixed to the viewport, behind the whole page, and
   drift up/down with the scroll (main.js writes --drift-x/y). z-index:-1
   paints the layer above the page background but under every section, so
   the circles pass behind the cards rather than over them.

   --shapes-fade: full strength over the hero, a pale wash below it, since
   body text scrolls across them there. JS sets it per scroll position;
   the 0.32 default is what a no-JS visitor gets, i.e. the safe end. */
.bg-shapes {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden; /* the off-edge circles must not widen the page */
  pointer-events: none;
  opacity: var(--shapes-fade, 0.32);
}

.shape {
  position: absolute;
  border-radius: 50%;
  animation: bob 9s var(--ease-soft) infinite alternate;
  /* bob owns translate/rotate, the scroll drift owns transform — two
     separate properties so neither overwrites the other */
  transform: translate3d(var(--drift-x, 0px), var(--drift-y, 0px), 0);
}

.shape-blush  { background: radial-gradient(circle at 32% 26%, #FEE9E0, #F6CDBF 62%, #EFB9A8); }
.shape-sage   { background: radial-gradient(circle at 32% 26%, #DCEAD6, var(--a2) 62%, #92AF88); }
.shape-butter { background: radial-gradient(circle at 32% 26%, #FBE8BB, var(--a3) 62%, #E4B95C); }
.shape-peri   { background: radial-gradient(circle at 32% 26%, #D7E2F4, var(--a4) 62%, #93AAD6); }
.shape-coral  { background: radial-gradient(circle at 32% 26%, #FBC9C0, var(--a1) 62%, var(--a1-deep)); }

.s1 { inline-size: 170px; block-size: 170px; inset-block-start: 8%;  inset-inline-start: -46px; animation-duration: 10s; }
.s2 { inline-size: 90px;  block-size: 90px;  inset-block-start: 16%; inset-inline-end: 8%;      animation-duration: 8s;  animation-delay: -3s; }
.s3 { inline-size: 58px;  block-size: 58px;  inset-block-end: 30%;   inset-inline-start: 12%;   animation-duration: 7s;  animation-delay: -1.5s; }
.s4 { inline-size: 120px; block-size: 120px; inset-block-end: 8%;    inset-inline-end: -30px;   animation-duration: 11s; animation-delay: -5s; }
.s5 { inline-size: 42px;  block-size: 42px;  inset-block-start: 58%; inset-inline-end: 22%;     animation-duration: 6.5s; animation-delay: -2s; }

@keyframes bob {
  from { translate: 0 -10px; rotate: -2deg; }
  to   { translate: 0 12px;  rotate: 2deg; }
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(56px, 10vw, 110px) clamp(20px, 6vw, 64px);
  max-inline-size: 1080px;
  margin-inline: auto;
  /* Anchor landing position: cancel most of the section's own top
     padding so the heading sits ~90px from the viewport top (just
     under the sticky header) instead of mid-screen. Mirrors the
     padding clamp above minus a 10px breathing gap. */
  scroll-margin-block-start: calc(10px - clamp(56px, 10vw, 110px));
}

.section-sub {
  color: var(--ink-soft);
  max-inline-size: 52ch;
  margin-block-end: 2.2em;
}

/* Heading treatment for services/FAQ/contact: bold + wide, one line, no
   extra label or underline (two earlier tries — a wavy underline, then a
   small kicker label above — were both rejected). Switches from the
   single-weight Varela Round to Assistant at 800 (the heaviest weight
   loaded — see the Google Fonts link in index.html), since Varela Round
   has no heavier weight to reach a "wide/bold" poster feel with. */
.heading-wide {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
  letter-spacing: 0.02em;
}
.heading-wide .accent { color: var(--a1-text); }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  gap: 36px;
  align-items: start;
}

.about-photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.about-photo img { inline-size: 100%; block-size: auto; }

.photo-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 70% 20%, rgba(244, 206, 122, 0.35), transparent 46%),
    radial-gradient(circle at 20% 80%, rgba(169, 195, 160, 0.35), transparent 46%),
    #FBEDE5;
  color: var(--ink-soft);
  font-family: var(--font-head);
}

.about-text h2 { margin-block-end: 0.8em; }
.about-text .heart { font-size: 0.8em; }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  /* Grid's default is stretch: every card in a row is forced to match the
     tallest card in that row. That meant opening one card's panel silently
     stretched its row-mate too — same empty height, no content — reading as
     "everything expanded." align-items: start lets each card size to its
     own content, so only the one actually opened ever visibly grows. */
  align-items: start;
}

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft);
}

/* Everything except the always-visible .card-link: the hover/tap-to-expand
   zone. Kept separate so hovering the link itself (still technically inside
   .card) doesn't also count as hovering this — see the hover rules below. */
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Playful micro-touch: slight static tilt. Deliberately NO hover
   effects on cards — any movement here made the grid feel jumpy. */
.card:nth-child(odd)  { transform: rotate(-0.7deg); }
.card:nth-child(even) { transform: rotate(0.7deg); }

.card p { color: var(--ink-soft); flex: 1; }

/* Tinted cards so the grid isn't card-on-cream monotony */
.tint-sage   { background: linear-gradient(160deg, #EEF4EB, #E2ECDD); }
.tint-butter { background: linear-gradient(160deg, #FCF1D8, #FAE9C2); }
.tint-peri   { background: linear-gradient(160deg, #ECF1F9, #E0E8F5); }

.card-featured { padding: 34px 30px; }

.card-link {
  font-weight: 700;
  text-decoration: none;
  padding-block: 4px;
  display: inline-block;
  /* Always visible (outside .card-panel, see index.html) — needs its own
     top space since it no longer inherits spacing from the panel's inner
     padding; consistent whether it lands right under the "[...]" hint
     (collapsed) or under the open panel's content (expanded). */
  margin-block-start: 12px;
}
.card-link:hover { text-decoration: underline; }

/* Static hint, not a control — just tells the card is hoverable/tappable.
   Deliberately just "[...]": a phrase like "more details" would read oddly
   once the panel is already open and the details are showing. No arrow
   either — it doesn't need to flip/rotate to communicate state, so nothing
   to animate. It hides once the card opens (see below) — nothing left to
   hint at — and returns once it closes. */
.card-hint {
  display: block;
  margin-block-start: auto; /* the card's own p already flex-grows, but keep this as a floor */
  padding-block-start: 6px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

/* The reveal panel: normal document flow (0fr→1fr grid-rows trick), so
   opening it pushes whatever's below the card down rather than floating
   over and covering it. */
.card-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-soft);
}
.card-panel-inner { overflow: hidden; min-block-size: 0; }
.card-panel p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-block-start: 14px;
}

@media (hover: hover) {
  /* :focus-within only — NOT :hover. Raw CSS :hover on .card-body can't
     tell "cursor just arrived via the always-visible .card-link" (which
     must stay closed, or hovering the link alone would pop a closed panel
     open) apart from "cursor is transiting through .card-body on its way
     to that same link" (which must stay OPEN, or the panel — and the link
     along with it — would collapse/jump right as you try to click). CSS
     has no memory of which one is happening; main.js resolves this with
     mouseenter/mouseleave scoped differently (open trigger: entering
     .card-body; close trigger: leaving the whole .card) and drives the
     SAME .card.expanded class below. :focus-within has no such ambiguity
     — Tab order is discrete, not a continuous cursor path — so it's kept
     as a plain CSS trigger for keyboard users. */
  .card-body:focus-within .card-panel,
  .card.expanded .card-panel {
    grid-template-rows: 1fr;
  }
  .card-body:focus-within .card-hint,
  .card.expanded .card-hint { display: none; }
}

/* Touch/no fine pointer: no hover to reveal anything with, and a tap-to-
   expand substitute read as an awkward extra step — so every card just
   shows its full text permanently, no interaction needed. The "[...]"
   hint has nothing left to hint at.
   Also triggers under the site's own phone breakpoint (719.98px, matched
   elsewhere in this file) regardless of hover capability: checking "how
   does this look on mobile" by narrowing a desktop browser window is real
   fine-pointer hardware reporting hover:hover, so without this a narrowed
   window would keep showing the desktop collapsed/hint behavior. */
@media (hover: none), (max-width: 719.98px) {
  .card-hint { display: none; }
  .card-panel { grid-template-rows: 1fr; }
}

.btn-photos {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  background: rgba(255, 253, 251, 0.7);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  margin-block-end: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.btn-photos:hover { border-color: var(--a1-deep); background: #FFFDFB; }

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.gallery-item {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.gallery-item img { aspect-ratio: 1; object-fit: cover; inline-size: 100%; }

/* ---------- Testimonials (speech bubbles) ---------- */
.quotes-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}

.quote-bubble {
  position: relative;
  margin: 0;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 24px 26px 20px;
  box-shadow: var(--shadow-soft);
}
/* the bubble "tail" */
.quote-bubble::after {
  content: "";
  position: absolute;
  inset-block-end: -10px;
  inset-inline-start: 34px;
  inline-size: 22px;
  block-size: 22px;
  background: var(--card);
  border-radius: 4px;
  transform: rotate(45deg);
  box-shadow: 6px 6px 12px rgba(64, 48, 58, 0.05);
}
.quote-bubble footer {
  margin-block-start: 10px;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---------- Affiliates ---------- */
.affiliate-list { display: grid; gap: 14px; max-inline-size: 560px; }

.affiliate-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--card);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: var(--shadow-soft);
}

.affiliate-info { display: flex; flex-direction: column; gap: 2px; }
.affiliate-info a { font-weight: 700; text-decoration: none; color: var(--ink); }
.affiliate-benefit { color: var(--ink-soft); font-size: 0.9rem; }

.chip {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  background: #FBEDE5;
  border: 1.5px dashed var(--a1-deep);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
}
.chip:hover { background: #F8E2D6; }
.chip-hint { font-weight: 400; font-size: 0.8rem; color: var(--ink-soft); }
.chip.copied { border-style: solid; border-color: var(--a2); background: #EEF4EB; }

/* ---------- Learning band ---------- */
.band {
  max-inline-size: none; /* full-bleed tinted band breaks the card rhythm */
  background: linear-gradient(160deg, #EEF4EB, #E7F0E2);
}

.band-inner {
  max-inline-size: 640px;
  margin-inline: auto;
  text-align: center;
}
.band-inner p { color: var(--ink-soft); }

.soon-pill {
  display: inline-block;
  background: var(--ink);
  color: #FFFDFB;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 5px 16px;
  margin-block-end: 14px;
}

.interest-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-block-start: 1.4em;
}
.interest-form input[type="text"] {
  flex: 1 1 220px;
  max-inline-size: 320px;
}

/* ---------- Forms ---------- */
input[type="text"], input[type="tel"], textarea {
  inline-size: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-input);
  padding: 13px 16px;
  transition: border-color 0.2s;
}
input:focus, textarea:focus { border-color: var(--a1-deep); }
textarea { resize: vertical; min-block-size: 110px; }

::placeholder { color: #8C7A82; opacity: 1; } /* AA against the card surface */

.field { margin-block-end: 18px; }
.field label {
  display: block;
  font-weight: 700;
  margin-block-end: 6px;
}

.field-error {
  color: var(--a1-text);
  font-size: 0.92rem;
  margin: 6px 2px 0;
}
.field.invalid input { border-color: var(--a1-text); }

.form-status {
  margin-block-start: 14px;
  border-radius: var(--radius-input);
  font-weight: 600;
  min-block-size: 1em;
}
.form-status.ok {
  background: #EEF4EB; /* sage-derived positive state */
  border: 1.5px solid var(--a2);
  padding: 12px 16px;
}
.form-status.err {
  background: #FBEDE5; /* coral-derived attention state */
  border: 1.5px solid var(--a1-deep);
  padding: 12px 16px;
}
.form-status a { font-weight: 700; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 36px; }

.contact-form {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
}

.contact-aside h3 { margin-block-end: 0.9em; }

.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding-block: 8px;
}
.contact-line:hover { color: var(--a1-text); }
.contact-line .icon { inline-size: 22px; block-size: 22px; color: var(--a1-text); flex-shrink: 0; }

.studio-note {
  margin-block-start: 18px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  border-inline-start: 3px solid var(--a2);
  padding-inline-start: 14px;
}

/* ---------- Footer ---------- */
.site-footer {
  border-block-start: 1px solid var(--line);
  padding: 32px clamp(20px, 6vw, 64px) 40px;
  text-align: center;
  color: var(--ink-soft);
}

.footer-title { font-family: var(--font-head); color: var(--ink); }

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.footer-links a { color: var(--ink-soft); font-size: 0.92rem; }
.footer-links a:hover { color: var(--ink); }
.footer-links .icon { inline-size: 22px; block-size: 22px; display: block; }

/* ---------- WhatsApp float (bottom-left on RTL = inline-end) ---------- */
.wa-float {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 50;
  inline-size: 56px;
  block-size: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1DAA61; /* WhatsApp brand green, white glyph: AA for graphics */
  color: #fff;
  box-shadow: 0 10px 24px rgba(29, 170, 97, 0.35);
  transition: transform 0.2s var(--ease-soft);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float .icon { inline-size: 28px; block-size: 28px; }

/* ---------- FAQ (native details/summary accordion) ---------- */
.faq-list {
  display: grid;
  gap: 12px;
  max-inline-size: 720px;
}

.faq-item {
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 4px 22px;
}

.faq-item summary {
  font-family: var(--font-head);
  font-size: 1.08rem;
  padding-block: 14px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-inline-end: 30px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* +/× indicator on the far side */
.faq-item summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 2px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--a1-text);
  font-size: 1.4rem;
  transition: transform 0.25s var(--ease-soft);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq-item p {
  color: var(--ink-soft);
  margin: 0 0 16px;
}

/* ---------- Lightbox (photo viewer) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: rgba(64, 48, 58, 0.82); /* plum-tinted scrim, on-brand */
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }

.lb-stage {
  margin: 0;
  max-inline-size: min(88vw, 900px);
  text-align: center;
}
.lb-img {
  max-inline-size: 100%;
  max-block-size: 78vh;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  margin-inline: auto;
}
.lb-counter {
  color: #FFFDFB;
  font-weight: 600;
  font-size: 0.95rem;
  margin-block-start: 12px;
  direction: ltr; /* "1 / 3" — RTL bidi would flip it to "3 / 1" */
}

.lb-close, .lb-arrow {
  border: 0;
  cursor: pointer;
  color: #FFFDFB;
  background: rgba(255, 253, 251, 0.14);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color 0.2s;
  flex-shrink: 0;
}
.lb-close:hover, .lb-arrow:hover { background: rgba(255, 253, 251, 0.28); }

.lb-close {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  inline-size: 44px;
  block-size: 44px;
  font-size: 1.1rem;
}

.lb-arrow {
  inline-size: 46px;
  block-size: 46px;
  font-size: 1.9rem;
  line-height: 1;
  padding-block-end: 4px;
}
/* Hide arrows when there is a single photo (JS toggles) */
.lightbox.single .lb-arrow { display: none; }

/* ---------- Scroll reveal (JS adds .reveal-init, then .revealed) ---------- */
.reveal-init {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
}
.reveal-init.revealed { opacity: 1; transform: none; }

/* ---------- Larger screens ---------- */
@media (min-width: 720px) {
  .about-grid { grid-template-columns: 2fr 3fr; gap: 48px; }

  /* 6-col asymmetric grid: featured card wide, the rest in a 2/2/2 row */
  .services-grid { grid-template-columns: repeat(6, 1fr); }
  .card-featured { grid-column: span 4; }
  .card:nth-child(2) { grid-column: span 2; }
  .card:nth-child(n+3) { grid-column: span 2; }

  .contact-grid { grid-template-columns: 3fr 2fr; gap: 48px; align-items: start; }

  .quotes-grid { grid-template-columns: repeat(2, 1fr); }

  .s1 { inline-size: 240px; block-size: 240px; }
  .s4 { inline-size: 160px; block-size: 160px; }
}

@media (max-width: 719.98px) {
  /* Logo-only brand on phones; the name lives in the hero anyway */
  .brand-name { display: none; }
  .brand-logo { inline-size: 38px; block-size: 38px; }

  /* Fewer, smaller shapes on phones: calm > busy */
  .s3, .s5 { display: none; }
  .s1 { inline-size: 120px; block-size: 120px; }
  .s4 { inline-size: 88px; block-size: 88px; }
}

/* ---------- Reduced motion: everything goes still ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .shape { animation: none !important; }
  /* No bob and no scroll drift here, and a still circle parked behind the
     page's text is just clutter — so put the layer back where it was: one
     screen tall at the top, scrolling away with the hero. */
  .bg-shapes { position: absolute; opacity: 1; }
  .card:nth-child(odd), .card:nth-child(even) { transform: none; }
  .reveal-init { opacity: 1; transform: none; }
}