/* ─────────────────────────────────────────────────────────────────────────────
   Shams Al-Duha — contact page
   A sun of contact channels in the hero, glass cards for every way in, a
   WhatsApp inquiry form that composes its message live, a short FAQ and an
   Istanbul postcard. Builds on base.css and shared.css.
   ───────────────────────────────────────────────────────────────────────────── */

@property --inquiry-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@layer sections {
  /* WhatsApp greens, tuned for contrast: white on --wa-ink is 5.0:1. */
  :root {
    --wa:        #1FA855;
    --wa-ink:    #15803D;
    --wa-deep:   #116932;
    --wa-soft:   #EAF7EE;
    --wa-border: #BEE6CB;
    --wa-bubble: #DCF7D2;
  }

  /* WhatsApp button */
  .btn--wa {
    --btn-bg: var(--wa-ink);
    box-shadow: 0 10px 24px -12px rgb(21 128 61 / 0.6);
  }
  .btn--wa:hover { --btn-bg: var(--wa-deep); box-shadow: 0 16px 32px -14px rgb(17 105 50 / 0.62); }

  .chip--wa { background: var(--wa-soft); color: var(--wa-ink); box-shadow: inset 0 0 0 1px var(--wa-border); }
  .chip--wa .chip__dot { background: var(--wa); box-shadow: 0 0 0 3px rgb(31 168 85 / 0.18); }

  .req { color: var(--red-strong); font-weight: 600; }

  /* ── Hero ──────────────────────────────────────────────────────────────── */
  .contact-hero .page-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .contact-hero .page-hero__title .highlight::before { animation: highlight-draw 0.9s var(--ease-out) 0.75s both; }

  .quick-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
  .quick-actions > li { display: flex; }
  .quick-action {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 3.35rem;
    padding-block: 0.35rem;
    padding-inline: 0.35rem 1.35rem;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.72);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition:
      transform var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      background-color var(--dur-fast) linear;
  }
  .quick-action:hover { transform: translateY(-3px); background: var(--white); box-shadow: var(--shadow-inset), var(--shadow-md); }
  .quick-action:active { transform: translateY(0) scale(0.98); }
  .quick-action__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red-strong);
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear, rotate var(--dur-slow) var(--ease-out);
  }
  .quick-action__icon svg { width: 1.15rem; height: 1.15rem; }
  .quick-action:hover .quick-action__icon { background: var(--red-strong); color: var(--white); rotate: -10deg; }

  /* The first action wears the site's primary red, like the homepage CTAs;
     WhatsApp green stays with the WhatsApp card, the preview and the FAB. */
  .quick-action--wa {
    background: var(--red-strong);
    border-color: transparent;
    color: var(--white);
    box-shadow: var(--shadow-red), inset 0 1px 0 rgb(255 255 255 / 0.2);
  }
  .quick-action--wa:hover { background: var(--red-deeper); box-shadow: var(--shadow-red-hover), inset 0 1px 0 rgb(255 255 255 / 0.2); }
  .quick-action--wa .quick-action__icon { background: rgb(255 255 255 / 0.16); color: var(--white); }
  .quick-action--wa:hover .quick-action__icon { background: var(--white); color: var(--red-strong); }
  .quick-action--mail .quick-action__icon { background: var(--gold-soft); color: var(--gold-deep); }
  .quick-action--mail:hover .quick-action__icon { background: var(--gold); color: var(--ink); }

  .contact-hero__jump { font-size: var(--fs-small); }
  /* The forward arrow turned to point down; the shared hover nudge follows. */
  .contact-hero__jump svg { rotate: -90deg; }

  /* Orbit: the emblem as a sun, the ways to reach us circling it. */
  .contact-orbit {
    position: relative;
    justify-self: center;
    width: min(100%, 27rem);
    aspect-ratio: 1;
    container-type: inline-size;
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .contact-orbit__rays {
    position: absolute;
    inset: -14%;
    background: repeating-conic-gradient(from 0deg, rgb(247 209 74 / 0.3) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 22%, transparent 72%);
    mask: radial-gradient(closest-side, #000 22%, transparent 72%);
    animation: rays-spin 90s linear infinite;
    pointer-events: none;
  }
  .contact-orbit__ring { position: absolute; border-radius: 50%; pointer-events: none; }
  /* The icons travel along the dashed ring (radius 36%), which leaves the
     corners of the square free for the two glass notes. */
  .contact-orbit__ring--outer { inset: 14%; border: 1.5px dashed rgb(233 178 58 / 0.6); }
  .contact-orbit__ring--inner {
    inset: 25%;
    border: 1px solid rgb(215 20 31 / 0.14);
    background: radial-gradient(closest-side, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.1) 80%, transparent);
  }
  .contact-orbit__sun {
    position: absolute;
    inset: 31%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--white), var(--gold-soft));
    box-shadow:
      0 0 0 10px rgb(255 255 255 / 0.62),
      0 0 0 11px var(--gold-border),
      0 30px 60px -24px rgb(181 18 28 / 0.45),
      0 0 90px 24px rgb(247 209 74 / 0.32);
  }
  .contact-orbit__sun img { width: 76%; height: auto; border-radius: 50%; }
  .contact-orbit__track { position: absolute; z-index: 2; inset: 0; animation: orbit-spin 70s linear infinite; }
  .contact-orbit__node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--a)) translateX(36cqw) rotate(calc(var(--a) * -1));
  }
  .contact-orbit__icon {
    position: absolute;
    top: -1.7rem;
    left: -1.7rem;
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--white);
    color: var(--red);
    box-shadow: 0 0 0 1px var(--red-border), 0 0 0 5px rgb(255 255 255 / 0.55), var(--shadow-md);
    animation: orbit-spin 70s linear infinite reverse;
  }
  .contact-orbit__icon svg { width: 1.45rem; height: 1.45rem; }
  .contact-orbit__icon--wa {
    background: linear-gradient(160deg, #2BC064, var(--wa-ink));
    color: var(--white);
    box-shadow: 0 0 0 5px rgb(31 168 85 / 0.18), 0 14px 28px -12px rgb(21 128 61 / 0.6);
  }
  .contact-orbit__icon--gold { color: var(--gold-deep); box-shadow: 0 0 0 1px var(--gold-border), 0 0 0 5px rgb(255 255 255 / 0.55), var(--shadow-md); }
  .contact-orbit__icon--fb { color: #1877F2; box-shadow: 0 0 0 1px rgb(24 119 242 / 0.25), 0 0 0 5px rgb(255 255 255 / 0.55), var(--shadow-md); }
  @keyframes orbit-spin { to { rotate: 360deg; } }

  /* The two notes stay clear of the icons' path at every angle of the spin.
     The path's outer edge lies 36% + 2.5rem (icon, ring, breathing room)
     from the centre, i.e. 14% - 2.5rem from the top and bottom of the square,
     so the bubble's lower edge and the badge's upper edge (plus its 7px bob)
     are anchored just beyond it, whatever the orbit's size. */
  .contact-orbit__bubble {
    position: absolute;
    z-index: 3;
    bottom: calc(86% + 2.5rem);
    inset-inline-end: -14%;
    max-width: 12rem;
    padding: 0.6rem 0.9rem 0.45rem;
    border-radius: 1.1rem;
    border-start-end-radius: 0.3rem;
    background: var(--wa-bubble);
    color: #1F2A22;
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1.65;
    box-shadow: 0 18px 36px -18px rgb(20 80 40 / 0.45), 0 2px 4px rgb(20 60 30 / 0.06);
    animation: enter-pop 1s var(--ease-out) 0.9s backwards, float-bob 7s ease-in-out 1.9s infinite;
  }
  .contact-orbit__ticks { display: inline-block; vertical-align: -0.1em; width: 1.05rem; height: 0.7rem; margin-inline-start: 0.35rem; color: #34B7F1; }
  .contact-orbit__badge {
    position: absolute;
    z-index: 3;
    top: calc(86% + 3rem);
    inset-inline-start: -10%;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    animation: enter-pop 1s var(--ease-out) 1.1s backwards, float-bob 7s ease-in-out 2.6s infinite;
  }
  .contact-orbit__badge svg { width: 1.25rem; height: 1.25rem; color: var(--gold); }

  @keyframes float-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }

  /* ── Contact methods ───────────────────────────────────────────────────── */
  .methods { isolation: isolate; }
  .methods .ambient { --glow-a: 12% 30%; --glow-b: 88% 78%; }
  .methods__sun { display: block; flex: none; }
  .methods__sun .sticker { width: 7.5rem; height: 7.5rem; rotate: 10deg; animation: sticker-float 6s ease-in-out infinite; }

  .methods__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-5);
  }
  .methods__item { display: grid; min-width: 0; }
  .methods__item--wa { grid-row: span 2; }
  .methods__item--wide { grid-column: span 2; }

  .method {
    --lift: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    min-width: 0;
    padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
    border-radius: var(--r-lg);
    background: linear-gradient(155deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.66));
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transform: perspective(900px) translateY(var(--lift)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .method:hover { --lift: -6px; box-shadow: var(--shadow-inset), var(--shadow-lg); }
  .method:has(.method__link:focus-visible) { outline: 2px solid var(--red); outline-offset: 4px; }
  .method__link:focus-visible { outline: none; }
  /* The main link covers the card; the copy button sits above it. */
  .method__link::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

  /* The card is a stacking context (transform), so decoration at z-index -1
     sits above its ground and beneath its text. */
  .method__watermark {
    position: absolute;
    z-index: -1;
    bottom: -1.6rem;
    inset-inline-end: -1.2rem;
    width: 8.5rem;
    height: 8.5rem;
    color: var(--red);
    opacity: 0.05;
    rotate: -14deg;
    transition: opacity var(--dur-slow) var(--ease-out), rotate var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out);
    pointer-events: none;
  }
  .method:hover .method__watermark { opacity: 0.09; rotate: -4deg; scale: 1.08; }
  .method--fb .method__watermark { color: #1877F2; opacity: 0.04; }
  .method--fb:hover .method__watermark { opacity: 0.07; }

  .method__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; margin-bottom: var(--s-2); }
  .method:not(.method--wa) .method__head { justify-content: flex-start; }
  .method__icon {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    flex: none;
    border-radius: 1rem;
    background: linear-gradient(150deg, var(--red-soft), var(--white));
    border: 1px solid var(--red-border);
    color: var(--red-strong);
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear, rotate var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .method__icon svg { width: 1.35rem; height: 1.35rem; }
  .method:hover .method__icon { rotate: -8deg; box-shadow: 0 10px 20px -12px rgb(181 18 28 / 0.5); }
  .method__icon--gold { background: linear-gradient(150deg, var(--gold-soft), var(--white)); border-color: var(--gold-border); color: var(--gold-deep); }
  .method__icon--fb { background: linear-gradient(150deg, #EAF2FE, var(--white)); border-color: #C9DDFB; color: #1877F2; }

  .method__label { color: var(--ink-2); font-size: var(--fs-caption); font-weight: 500; line-height: 1.5; }
  .method__title { font-size: var(--fs-h3); line-height: 1.35; }
  .method__title .method__link { color: inherit; }
  .method__value { font-size: 1.3rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
  .method__value a { transition: color var(--dur-fast) linear; }
  .method:hover .method__value a { color: var(--red-strong); }
  .method__value--email { max-width: 100%; font-size: clamp(0.95rem, 0.86rem + 0.35vw, 1.1rem); overflow-wrap: anywhere; }
  .method__value--email .method__link { display: inline; }
  .method__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.8; }
  .method__stat { display: flex; align-items: baseline; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-small); }
  .method__stat .num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: #1877F2; }

  .method__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    margin-top: auto;
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
  }
  .method__cta { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--red-strong); font-size: var(--fs-small); font-weight: 500; }
  .method__cta svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-base) var(--ease-out); }
  .method:hover .method__cta svg { transform: translateX(-4px); }
  .method__body { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; max-width: 100%; }

  /* The e-mail card: the address large, its copy button beside it, and a
     letter drawn in gold filling the far side of the wide card. */
  .method--row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-6);
    justify-items: start;
    background:
      radial-gradient(55% 90% at 18% 50%, rgb(247 209 74 / 0.14), transparent 70%),
      linear-gradient(155deg, rgb(255 255 255 / 0.94), rgb(255 250 240 / 0.7));
  }
  .method--row > .method__head, .method--row > .method__body, .method--row > .method__foot { grid-column: 1; }
  .method--row > .method__foot { grid-row: 3; align-self: end; }
  .method--row .method__body { gap: var(--s-3); }
  .method__number.method__number--email { flex-wrap: nowrap; gap: var(--s-3); max-width: 100%; }
  .method--row .method__value--email {
    min-width: 0;
    font-size: clamp(1.1rem, 0.85rem + 0.7vw, 1.5rem);
    line-height: 1.35;
  }
  .method--row .method__foot { border-top-style: dashed; border-top-color: var(--gold-border); }
  /* The letter fills the far column, centred in whatever room is left. */
  .method__letter {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: center;
    width: min(100%, 12.5rem);
    height: auto;
    color: var(--gold);
    pointer-events: none;
  }
  .method__letter-body { transition: translate var(--dur-slow) var(--ease-out), rotate var(--dur-slow) var(--ease-out); transform-origin: 86px 84px; }
  .method__letter-body rect { fill: rgb(255 255 255 / 0.7); }
  .method__letter-seal { fill: var(--red); stroke: var(--white); stroke-width: 2.5; }
  .method__letter-rays { stroke: var(--gold); stroke-width: 2.2; }
  .method__letter-trail, .method__letter-spark { stroke: var(--red); opacity: 0.35; transition: opacity var(--dur-slow) var(--ease-out); }
  .method--row:hover .method__letter-body { translate: -5px -4px; rotate: -3deg; }
  .method--row:hover .method__letter-trail, .method--row:hover .method__letter-spark { opacity: 0.7; }

  /* The WhatsApp card */
  .method--wa {
    gap: var(--s-3);
    background:
      radial-gradient(90% 60% at 100% 0%, rgb(31 168 85 / 0.1), transparent 70%),
      linear-gradient(160deg, rgb(255 255 255 / 0.96), rgb(246 252 247 / 0.8));
    box-shadow: var(--shadow-inset), var(--shadow-md), 0 0 0 1px rgb(31 168 85 / 0.12);
  }
  .method--wa:hover { box-shadow: var(--shadow-inset), var(--shadow-lg), 0 0 0 1px rgb(31 168 85 / 0.22), 0 40px 70px -46px rgb(21 128 61 / 0.55); }
  .method__halo {
    position: absolute;
    z-index: -1;
    top: -30%;
    inset-inline-start: -25%;
    width: 80%;
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, rgb(31 168 85 / 0.08) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 70%);
    mask: radial-gradient(closest-side, #000 20%, transparent 70%);
    animation: rays-spin 80s linear infinite;
    pointer-events: none;
  }
  .method--wa .method__head { margin-bottom: var(--s-1); }
  .method__icon--wa {
    position: relative;
    width: 3.9rem;
    height: 3.9rem;
    border-radius: 1.25rem;
    border: 0;
    background: linear-gradient(160deg, #2BC064, var(--wa-ink));
    color: var(--white);
    box-shadow: 0 16px 30px -14px rgb(21 128 61 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.3);
  }
  .method__icon--wa svg { width: 1.8rem; height: 1.8rem; }
  .method__icon--wa::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: wa-card-ping 2.8s var(--ease-out) infinite;
  }
  @keyframes wa-card-ping {
    0%        { box-shadow: 0 0 0 0 rgb(31 168 85 / 0.45); }
    70%, 100% { box-shadow: 0 0 0 14px rgb(31 168 85 / 0); }
  }
  .method:hover .method__icon--wa { box-shadow: 0 18px 34px -14px rgb(21 128 61 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.3); }
  .method--wa .method__title { font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem); line-height: 1.25; }
  .method__number { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
  .method__value--xl { font-size: clamp(1.55rem, 1.25rem + 1vw, 2.05rem); font-weight: 600; color: var(--wa-ink); line-height: 1.3; }
  .method--wa .method__text { font-size: var(--fs-body); max-width: 30rem; }

  .wa-mini {
    align-self: stretch;
    display: grid;
    margin-block: var(--s-2);
    padding: var(--s-4);
    border-radius: var(--r-md);
    background:
      radial-gradient(circle at 1px 1px, rgb(142 98 12 / 0.09) 1px, transparent 1.6px) 0 0 / 15px 15px,
      linear-gradient(180deg, #F8F1E7, #F2E8DB);
    box-shadow: inset 0 1px 3px rgb(90 50 20 / 0.08);
  }
  .wa-mini__bubble {
    position: relative;
    justify-self: end;
    max-width: 92%;
    padding: 0.55rem 0.85rem 0.4rem;
    border-radius: 1rem;
    border-start-end-radius: 0.25rem;
    background: var(--wa-bubble);
    color: #1F2A22;
    font-size: var(--fs-small);
    line-height: 1.7;
    box-shadow: 0 1px 1px rgb(0 0 0 / 0.05), 0 8px 16px -12px rgb(20 80 40 / 0.4);
  }
  .wa-mini__bubble::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: -0.45rem;
    width: 0.6rem;
    height: 0.75rem;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  .wa-mini__ticks { display: inline-block; vertical-align: -0.1em; width: 1.05rem; height: 0.7rem; margin-inline-start: 0.4rem; color: #34B7F1; }
  .method__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: auto; }

  /* Location card with the city drawn in gold */
  .method--place { background: linear-gradient(155deg, rgb(255 255 255 / 0.94), rgb(255 246 230 / 0.72)); }
  .method--place .method__text { max-width: 26rem; }
  .method--place .method__foot { border-top: 0; padding-top: var(--s-2); }
  .method__skyline {
    position: absolute;
    z-index: -1;
    bottom: 0.9rem;
    inset-inline-end: 1rem;
    width: min(46%, 20rem);
    height: auto;
    color: rgb(233 178 58 / 0.75);
    transition: color var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out);
    pointer-events: none;
  }
  .method__skyline-sun { fill: rgb(247 209 74 / 0.35); stroke: var(--gold); }
  .method:hover .method__skyline { color: var(--gold); translate: 0 -3px; }

  /* Copy button with a tiny toast */
  .copy-btn {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    box-shadow: var(--shadow-sm);
    transition: color var(--dur-fast) linear, border-color var(--dur-fast) linear, background-color var(--dur-fast) linear, transform var(--dur-base) var(--ease-out);
  }
  .copy-btn:hover { color: var(--red-strong); border-color: var(--red-border); transform: translateY(-2px); }
  .copy-btn:active { transform: scale(0.92); }
  .copy-btn__icon { grid-area: 1 / 1; width: 1.1rem; height: 1.1rem; transition: opacity var(--dur-fast) linear, scale var(--dur-base) var(--ease-out); }
  .copy-btn__icon--done { opacity: 0; scale: 0.4; }
  .copy-btn.is-copied { background: var(--wa-ink); border-color: transparent; color: var(--white); }
  .copy-btn.is-copied .copy-btn__icon--copy { opacity: 0; scale: 0.4; }
  .copy-btn.is-copied .copy-btn__icon--done { opacity: 1; scale: 1; }
  .copy-btn.is-failed { border-color: var(--red); color: var(--red-strong); }
  .copy-btn__toast {
    position: absolute;
    bottom: calc(100% + 0.55rem);
    inset-inline-end: 0;
    padding: 0.2rem 0.7rem;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--white);
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0;
    translate: 0 6px;
    scale: 0.9;
    transition: opacity var(--dur-fast) linear, translate var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out);
    pointer-events: none;
  }
  .copy-btn__toast::after {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline-end: 1rem;
    border: 5px solid transparent;
    border-top-color: var(--ink);
  }
  .copy-btn.is-copied .copy-btn__toast,
  .copy-btn.is-failed .copy-btn__toast { opacity: 1; translate: 0 0; scale: 1; }
  .copy-btn.is-failed .copy-btn__toast { background: var(--red-strong); }
  .copy-btn.is-failed .copy-btn__toast::after { border-top-color: var(--red-strong); }

  /* ── Inquiry ───────────────────────────────────────────────────────────── */
  .inquiry { isolation: isolate; }
  .inquiry .ambient { --glow-a: 82% 30%; --glow-b: 14% 72%; }
  .inquiry__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(1.5rem, 0.5rem + 3vw, 3.75rem);
    align-items: start;
  }
  .inquiry-card-wrap { min-width: 0; }

  .inquiry-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.4rem, 1rem + 1.8vw, 2.5rem);
    border-radius: var(--r-xl);
    background: linear-gradient(160deg, rgb(255 255 255 / 0.9), rgb(255 250 244 / 0.74));
    box-shadow:
      var(--shadow-inset),
      0 40px 90px -46px rgb(120 32 20 / 0.42),
      0 10px 24px -14px rgb(120 32 20 / 0.16);
    backdrop-filter: saturate(170%) blur(22px);
    -webkit-backdrop-filter: saturate(170%) blur(22px);
  }
  /* A slow red-and-gold light travelling around the edge. */
  .inquiry-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--inquiry-angle), rgb(255 255 255 / 0.9), rgb(247 209 74 / 0.95) 12%, rgb(215 20 31 / 0.8) 22%, rgb(255 255 255 / 0.9) 34%, rgb(255 255 255 / 0.9) 60%, rgb(247 209 74 / 0.7) 78%, rgb(255 255 255 / 0.9));
    -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: inquiry-orbit 10s linear infinite;
    pointer-events: none;
  }
  @keyframes inquiry-orbit { to { --inquiry-angle: 360deg; } }
  .inquiry-card__rays {
    position: absolute;
    z-index: -1;
    top: -12rem;
    inset-inline-start: -10rem;
    width: 28rem;
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, rgb(247 209 74 / 0.22) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 68%);
    mask: radial-gradient(closest-side, #000 18%, transparent 68%);
    rotate: 8deg;
    pointer-events: none;
  }
  .inquiry-card.is-shaking { animation: inquiry-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
  @keyframes inquiry-shake {
    10%, 90% { translate: -1px 0; }
    20%, 80% { translate: 3px 0; }
    30%, 50%, 70% { translate: -6px 0; }
    40%, 60% { translate: 6px 0; }
  }

  /* A flex column: the collapsed phone field's negative margin can then cancel
     its gap (a grid gap would stay). */
  .inquiry-form { display: flex; flex-direction: column; gap: var(--s-4); }
  .inquiry-form__note { color: var(--ink-2); font-size: var(--fs-caption); }
  .inquiry-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

  /* Floating-label fields */
  .form-field { position: relative; display: grid; min-width: 0; }
  .form-field__input {
    width: 100%;
    min-height: 3.6rem;
    margin: 0;
    padding-block: 1.35rem 0.4rem;
    padding-inline: 3.1rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: rgb(255 255 255 / 0.86);
    color: var(--ink);
    font-size: var(--fs-body);
    line-height: 1.45;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--dur-fast) linear, box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) linear;
  }
  .form-field__input::placeholder { color: transparent; }
  .form-field__input:hover { border-color: var(--red-border); }
  .form-field__input:focus { outline: none; }
  .form-field__input:focus-visible,
  .form-field__input:focus {
    border-color: var(--red);
    background: var(--white);
    box-shadow: 0 0 0 4px rgb(215 20 31 / 0.1), 0 0 0 1px var(--red);
  }
  .form-field__icon {
    position: absolute;
    top: 1.8rem;
    inset-inline-start: 1rem;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--ink-2);
    pointer-events: none;
    transition: color var(--dur-fast) linear;
  }
  .form-field__icon svg { width: 100%; height: 100%; }
  .form-field:focus-within .form-field__icon { color: var(--red); }
  .form-field__label {
    position: absolute;
    top: 1.8rem;
    inset-inline-start: 3.1rem;
    max-width: calc(100% - 4.1rem);
    translate: 0 -50%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-2);
    font-size: var(--fs-body);
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    transition: top var(--dur-base) var(--ease-out), font-size var(--dur-base) var(--ease-out), color var(--dur-fast) linear;
  }
  .form-field__optional { color: var(--ink-2); font-size: 0.85em; font-weight: 400; }
  .form-field__input:focus + .form-field__label,
  .form-field__input:not(:placeholder-shown) + .form-field__label,
  .form-field--select .form-field__label {
    top: 0.95rem;
    font-size: var(--fs-caption);
    color: var(--ink-2);
  }
  .form-field__input:focus + .form-field__label { color: var(--red-strong); }

  .form-field__select { padding-inline-end: 2.9rem; cursor: pointer; text-overflow: ellipsis; }
  .form-field__select option, .form-field__select optgroup { color: var(--ink); background: var(--white); }
  .form-field__chevron {
    position: absolute;
    top: 1.8rem;
    inset-inline-end: 1rem;
    translate: 0 -50%;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--ink-2);
    pointer-events: none;
    transition: color var(--dur-fast) linear, rotate var(--dur-base) var(--ease-out);
  }
  .form-field--select:focus-within .form-field__chevron { color: var(--red); rotate: 180deg; }

  /* A telephone number is typed left to right; the icon stays on the right. */
  .form-field--ltr .form-field__input { padding-right: 3.1rem; padding-left: 1rem; text-align: right; }

  .form-field__textarea {
    min-height: 9.5rem;
    max-height: 22rem;
    padding-block: 1.85rem 0.8rem;
    line-height: 1.8;
    resize: vertical;
    field-sizing: content;
  }
  .form-field--area .form-field__label { border-radius: 6px; }
  .form-field--area .form-field__input:focus + .form-field__label,
  .form-field--area .form-field__input:not(:placeholder-shown) + .form-field__label {
    background: var(--white);
    padding-inline: 0.3rem;
    margin-inline-start: -0.3rem;
  }
  .form-field__count {
    justify-self: end;
    margin-top: var(--s-1);
    padding-inline: var(--s-2);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.5;
    direction: ltr;
    transition: color var(--dur-fast) linear;
  }
  .form-field__count.is-near { color: var(--red-strong); }

  .form-field__hint,
  .form-field__error {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-2);
    padding-inline: var(--s-2);
    font-size: var(--fs-caption);
    line-height: 1.6;
  }
  .form-field__hint { color: var(--gold-deep); }
  .form-field__error { color: var(--red-strong); animation: field-error-in 0.4s var(--ease-out); }
  .form-field__error svg { width: 1rem; height: 1rem; flex: none; }
  .form-field.is-invalid .form-field__input { border-color: var(--red); background: var(--red-mist); }
  .form-field.is-invalid .form-field__icon { color: var(--red); }
  @keyframes field-error-in { from { opacity: 0; translate: 0 -4px; } }

  /* Preferred contact: a pill glides to the choice */
  .choice { min-width: 0; margin: 0; padding: 0; border: 0; }
  .choice__legend { margin-bottom: var(--s-2); padding: 0; color: var(--ink); font-size: var(--fs-small); font-weight: 500; }
  .choice__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-1);
    padding: 0.3rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: rgb(251 242 231 / 0.85);
  }
  .choice__pill {
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    left: 0;
    width: var(--choice-w, 0);
    translate: var(--choice-x, 0) 0;
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: 0 0 0 1px var(--choice-ring, var(--red-border)), var(--shadow-sm);
    opacity: var(--choice-o, 0);
    transition: translate var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear, box-shadow var(--dur-base) linear;
  }
  .choice__pill.is-instant { transition: none; }
  .choice__track:has(input[value="whatsapp"]:checked) { --choice-ring: var(--wa-border); }
  .choice__option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 2.9rem;
    padding-inline: var(--s-2);
    border-radius: var(--r-pill);
    color: var(--ink-2);
    font-size: var(--fs-small);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-fast) linear;
  }
  .choice__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .choice__option svg { width: 1.15rem; height: 1.15rem; flex: none; transition: transform var(--dur-base) var(--ease-out); }
  .choice__option:hover { color: var(--ink); }
  .choice__option:has(input:checked) { color: var(--red-strong); }
  .choice__option--wa:has(input:checked) { color: var(--wa-ink); }
  .choice__option:has(input:checked) svg { transform: scale(1.14); }
  .choice__option:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
  .choice__track:not(.has-pill) .choice__option:has(input:checked) { background: var(--white); box-shadow: 0 0 0 1px var(--red-border); }

  /* The phone field opens only for a call */
  .form-reveal {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: calc(var(--s-4) * -1);
    visibility: hidden;
    opacity: 0;
    transition:
      grid-template-rows var(--dur-slow) var(--ease-out),
      margin-top var(--dur-slow) var(--ease-out),
      opacity var(--dur-base) linear,
      visibility 0s linear var(--dur-slow);
  }
  .form-reveal__inner { min-height: 0; overflow: hidden; padding: 5px; margin: -5px; }
  .inquiry-form:has(input[name="preference"][value="call"]:checked) .form-reveal {
    grid-template-rows: 1fr;
    margin-top: 0;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  /* Suggested topics */
  .topics { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: calc(var(--s-1) * -1); }
  .topics__label { color: var(--ink-2); font-size: var(--fs-caption); }
  .topics__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .topic {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding-inline: 0.7rem 0.95rem;
    border-radius: var(--r-pill);
    border: 1px dashed rgb(233 178 58 / 0.8);
    background: var(--gold-soft);
    color: var(--gold-deep);
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear, border-color var(--dur-fast) linear, transform var(--dur-base) var(--ease-out);
  }
  .topic svg { width: 0.9rem; height: 0.9rem; transition: rotate var(--dur-base) var(--ease-out); }
  .topic:hover { background: var(--white); border-color: var(--gold); transform: translateY(-2px); }
  .topic[aria-pressed="true"] { background: var(--red-strong); border-style: solid; border-color: var(--red-strong); color: var(--white); }
  .topic[aria-pressed="true"] svg { rotate: 45deg; }

  .inquiry-form__submit {
    width: 100%;
    min-height: 3.6rem;
    margin-top: var(--s-2);
    overflow: hidden;
    font-size: 1.08rem;
  }
  .inquiry-form__send { transition: transform var(--dur-base) var(--ease-out); }
  .inquiry-form__submit:hover .inquiry-form__send { transform: translate(-4px, -2px) rotate(-8deg); }

  .inquiry-form__privacy {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.7;
  }
  .inquiry-form__privacy svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2rem; color: var(--gold-deep); }
  /* Shown only when the page script has not run */
  .inquiry-fallback { display: grid; justify-items: center; gap: var(--s-4); padding-block: var(--s-6); text-align: center; }
  .inquiry-fallback__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1.3rem;
    background: linear-gradient(160deg, #2BC064, var(--wa-ink));
    color: var(--white);
    box-shadow: 0 16px 30px -14px rgb(21 128 61 / 0.7);
  }
  .inquiry-fallback__icon svg { width: 1.9rem; height: 1.9rem; }
  .inquiry-fallback__text { max-width: 30rem; color: var(--ink-2); line-height: 1.85; }
  .inquiry__grid:has(> [data-preview][hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 42rem; }

  /* Success */
  .inquiry-success {
    display: grid;
    justify-items: center;
    gap: var(--s-4);
    padding-block: var(--s-8) var(--s-4);
    text-align: center;
    animation: success-in 0.7s var(--ease-out);
  }
  @keyframes success-in { from { opacity: 0; translate: 0 14px; } }
  .inquiry-success__seal {
    position: relative;
    display: grid;
    place-items: center;
    width: 6.25rem;
    height: 6.25rem;
    margin-bottom: var(--s-2);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--white), var(--wa-soft));
    box-shadow: 0 0 0 9px rgb(255 255 255 / 0.7), 0 0 0 10px var(--wa-border), 0 26px 44px -20px rgb(21 128 61 / 0.55);
  }
  .inquiry-success__seal svg { width: 4rem; height: 4rem; overflow: visible; }
  .inquiry-success__ring {
    fill: none;
    stroke: var(--wa);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transform: rotate(-90deg);
    transform-origin: 32px 32px;
    animation: success-draw 0.8s var(--ease-out) 0.15s forwards;
  }
  .inquiry-success__tick {
    fill: none;
    stroke: var(--wa-ink);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: success-draw 0.55s var(--ease-out) 0.75s forwards;
  }
  @keyframes success-draw { to { stroke-dashoffset: 0; } }
  .inquiry-success__spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    margin: -0.25rem;
    border-radius: 50%;
    background: var(--gold-bright);
    opacity: 0;
    transform: rotate(var(--r)) translateY(0);
    animation: success-spark 0.9s var(--ease-out) 0.9s forwards;
  }
  .inquiry-success__spark:nth-of-type(even) { background: var(--red); width: 0.4rem; height: 0.4rem; }
  @keyframes success-spark {
    0%   { opacity: 1; transform: rotate(var(--r)) translateY(-2.4rem) scale(1); }
    100% { opacity: 0; transform: rotate(var(--r)) translateY(-4.6rem) scale(0.4); }
  }
  .inquiry-success__title { font-size: clamp(1.6rem, 1.25rem + 1vw, 2.1rem); line-height: 1.3; }
  .inquiry-success__title:focus { outline: none; }
  .inquiry-success__title:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
  .inquiry-success__text { max-width: 30rem; color: var(--ink-2); line-height: 1.85; }
  .inquiry-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); }
  .inquiry-success__hint { max-width: 28rem; color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.7; }

  /* Live preview */
  .wa-preview {
    position: sticky;
    top: calc(var(--header-h) + var(--s-8));
    display: grid;
    gap: var(--s-4);
    min-width: 0;
  }
  .wa-preview__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
  .wa-preview__title { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 1.3rem; }
  .wa-preview__title svg { width: 1.3rem; height: 1.3rem; color: var(--red); }
  .wa-preview__live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.9rem;
    padding-inline: 0.75rem;
    border-radius: var(--r-pill);
    background: var(--wa-soft);
    color: var(--wa-ink);
    box-shadow: inset 0 0 0 1px var(--wa-border);
    font-size: var(--fs-caption);
    font-weight: 500;
  }
  /* The dot pulses when the message changes, not all the time. */
  .wa-preview__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 3px rgb(31 168 85 / 0.16); }
  .wa-preview.is-updating .wa-preview__dot { animation: live-dot 0.9s var(--ease-out); }
  @keyframes live-dot {
    0%        { box-shadow: 0 0 0 0 rgb(31 168 85 / 0.5); }
    70%, 100% { box-shadow: 0 0 0 7px rgb(31 168 85 / 0); }
  }

  .wa-phone {
    display: grid;
    gap: 0.45rem;
    padding: 0.55rem;
    border-radius: 2rem;
    background: linear-gradient(160deg, var(--white), #F6ECDF);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-lg), 0 0 0 1px var(--line), 0 50px 80px -56px rgb(149 14 23 / 0.45);
    transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .wa-phone__bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0.6rem 0.8rem;
    border-radius: 1.55rem 1.55rem 0.6rem 0.6rem;
    background: var(--white);
    box-shadow: 0 1px 0 var(--line);
  }
  .wa-phone__avatar { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--gold-border); }
  .wa-phone__who { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
  .wa-phone__who strong { font-family: var(--font-display); font-size: 1.05rem; }
  .wa-phone__who .ltr { justify-self: start; color: var(--ink-2); font-size: var(--fs-caption); }
  .wa-phone__brand { width: 1.5rem; height: 1.5rem; flex: none; color: var(--wa); }

  .wa-phone__chat {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    min-height: 19rem;
    max-height: min(30rem, 62svh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-4) var(--s-4) var(--s-5);
    border-radius: 0.6rem;
    background:
      radial-gradient(circle at 1px 1px, rgb(142 98 12 / 0.09) 1px, transparent 1.6px) 0 0 / 16px 16px,
      linear-gradient(180deg, #F8F0E5, #F1E5D6);
    scrollbar-width: thin;
    scrollbar-color: rgb(142 98 12 / 0.25) transparent;
  }
  .wa-phone__day {
    align-self: center;
    padding: 0.1rem 0.8rem;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.85);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    box-shadow: var(--shadow-sm);
  }
  .wa-bubble {
    position: relative;
    align-self: flex-end;
    max-width: 94%;
    min-width: 45%;
    padding: 0.7rem 0.95rem 0.35rem;
    border-radius: 1.1rem;
    border-start-end-radius: 0.25rem;
    background: var(--wa-bubble);
    color: #1F2A22;
    box-shadow: 0 1px 1px rgb(0 0 0 / 0.05), 0 10px 22px -14px rgb(20 80 40 / 0.45);
  }
  .wa-bubble::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: -0.5rem;
    width: 0.65rem;
    height: 0.85rem;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  .wa-bubble__text { display: grid; font-size: 0.97rem; line-height: 1.8; overflow-wrap: anywhere; }
  .wa-line { display: block; min-height: 1.8em; white-space: pre-wrap; }
  .wa-line--gap { min-height: 0.7em; }
  .wa-slot { border-radius: 5px; background: transparent; color: inherit; font-weight: 500; }
  .wa-slot[dir="ltr"] { unicode-bidi: isolate; }
  .wa-slot.is-empty {
    display: inline-block;
    padding-inline: 0.4rem;
    border: 1px dashed rgb(142 98 12 / 0.5);
    color: var(--gold-deep);
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.5;
  }
  .wa-slot.is-default { color: #4E5E52; font-weight: 400; }
  .wa-slot.is-fresh { animation: slot-fresh 1.4s var(--ease-out); }
  @keyframes slot-fresh {
    0%, 30% { background: rgb(247 209 74 / 0.6); box-shadow: 0 0 0 2px rgb(247 209 74 / 0.6); }
    100%    { background: transparent; box-shadow: 0 0 0 2px transparent; }
  }
  .wa-bubble__meta { display: flex; justify-content: flex-end; margin-top: 0.1rem; color: #34B7F1; }
  .wa-bubble__meta svg { width: 1.15rem; height: 0.8rem; }

  .wa-phone__composer { display: flex; align-items: center; gap: var(--s-2); padding: 0.1rem 0.2rem 0.2rem; }
  .wa-phone__field {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 1rem;
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: 0 0 0 1px var(--line);
    color: var(--ink-2);
    font-size: var(--fs-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wa-phone__send {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    flex: none;
    border-radius: 50%;
    background: var(--wa-ink);
    color: var(--white);
    box-shadow: 0 10px 20px -10px rgb(21 128 61 / 0.7);
  }
  .wa-phone__send svg { width: 1.15rem; height: 1.15rem; }

  /* Inside the form on narrower screens (moved there by contact.js) */
  .wa-preview.is-inline {
    position: relative;
    top: auto;
    width: 100%;
    margin-top: var(--s-2);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgb(251 242 231 / 0.75), rgb(255 255 255 / 0.4));
    border: 1px dashed var(--gold-border);
  }
  .wa-preview.is-inline .wa-preview__title { font-size: 1.15rem; }
  .wa-preview.is-inline .wa-phone { width: min(100%, 30rem); justify-self: center; padding-bottom: 0.55rem; border-radius: 1.6rem; }
  .wa-preview.is-inline .wa-phone__bar { border-radius: 1.2rem 1.2rem 0.6rem 0.6rem; }
  /* The whole message shows; the page scrolls rather than a box inside it. */
  .wa-preview.is-inline .wa-phone__chat { min-height: 0; max-height: none; overflow: visible; padding-block: var(--s-3) var(--s-4); border-radius: 0.6rem 0.6rem 1.2rem 1.2rem; }
  .wa-preview.is-inline .wa-phone__day,
  .wa-preview.is-inline .wa-phone__composer { display: none; }
  .wa-preview.is-inline .wa-bubble__text { font-size: 0.93rem; }

  .wa-preview__note { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.7; }
  .wa-preview__note svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2rem; color: var(--gold-deep); }

  /* ── FAQ ───────────────────────────────────────────────────────────────── */
  .faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: start;
  }
  .faq__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--s-10));
    display: grid;
    gap: var(--s-10);
    justify-items: start;
  }
  .faq-help {
    position: relative;
    display: grid;
    justify-items: start;
    gap: var(--s-3);
    width: min(100%, 26rem);
    padding: var(--s-8) var(--s-6) var(--s-6);
    border-radius: var(--r-lg);
  }
  .faq-help__sun { position: absolute; top: -2.5rem; inset-inline-end: -1.25rem; width: 5.5rem; height: 5.5rem; rotate: 12deg; animation: sticker-float 6s ease-in-out infinite; }
  .faq-help__title { font-size: 1.35rem; }
  .faq-help__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.8; margin-bottom: var(--s-2); }

  .faq-list { display: grid; gap: var(--s-3); }
  .faq-item {
    border-radius: var(--r-md);
    background: rgb(255 255 255 / 0.66);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition: background-color var(--dur-base) linear, box-shadow var(--dur-slow) var(--ease-out);
  }
  .faq-item:hover { background: rgb(255 255 255 / 0.9); }
  .faq-item[open] { background: var(--white); box-shadow: var(--shadow-inset), var(--shadow-md), 0 0 0 1px var(--gold-border); }
  .faq-item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.55s var(--ease-out), content-visibility 0.55s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
  .faq-item__q {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-5);
    padding-inline-start: var(--s-5);
    border-radius: var(--r-md);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1rem + 0.3vw, 1.22rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
    transition: color var(--dur-fast) linear;
  }
  .faq-item__q::-webkit-details-marker { display: none; }
  .faq-item__q::marker { content: ""; }
  .faq-item__q:hover { color: var(--red-strong); }
  .faq-item__q:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: var(--r-md); }
  .faq-item__num {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    flex: none;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red-strong);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear;
  }
  .faq-item[open] .faq-item__num { background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--ink); }
  .faq-item__text { flex: 1; min-width: 0; }
  .faq-item__toggle {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear, border-color var(--dur-base) linear, rotate var(--dur-slow) var(--ease-out);
  }
  .faq-item__toggle::before,
  .faq-item__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.8rem;
    height: 2px;
    margin: -1px 0 0 -0.4rem;
    border-radius: 2px;
    background: currentColor;
    transition: rotate var(--dur-slow) var(--ease-out);
  }
  .faq-item__toggle::after { rotate: 90deg; }
  .faq-item__q:hover .faq-item__toggle { border-color: var(--red-border); color: var(--red-strong); }
  .faq-item[open] .faq-item__toggle { rotate: 180deg; background: var(--red-strong); border-color: var(--red-strong); color: var(--white); }
  .faq-item[open] .faq-item__toggle::after { rotate: 0deg; }
  .faq-item__a {
    display: grid;
    justify-items: start;
    gap: var(--s-3);
    padding-block: 0 var(--s-6);
    padding-inline: calc(var(--s-5) + 2.35rem + var(--s-4)) var(--s-6);
    color: var(--ink-2);
    line-height: 1.9;
  }
  .faq-item__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }

  /* ── Istanbul postcard ─────────────────────────────────────────────────── */
  .city-card {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    align-items: center;
    min-height: clamp(30rem, 40vw, 38rem);
    padding: clamp(1.25rem, 0.5rem + 3.5vw, 3.75rem);
    border-radius: var(--r-xl);
    background: var(--gold-soft);
    box-shadow: 0 0 0 1px var(--white), 0 0 0 8px rgb(255 255 255 / 0.6), 0 0 0 9px var(--red-border), var(--shadow-lg);
  }
  .city-card__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
  /* max-width: none — base.css caps pictures at 100%, which would shift the
     over-sized layer and bare a strip of the card along one edge. */
  .city-card__layer { position: absolute; inset: -18px; width: auto; max-width: none; }
  .city-card__layer img { width: 100%; height: 100%; object-fit: cover; object-position: 26% 50%; }
  .city-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(closest-side at 78% 50%, rgb(255 251 246 / 0.6), transparent),
      linear-gradient(to left, rgb(255 251 246 / 0.55), rgb(255 251 246 / 0.2) 42%, transparent 62%);
  }
  .city-card__panel {
    position: relative;
    width: min(100%, 31rem);
    display: grid;
    justify-items: start;
    gap: var(--s-4);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-radius: var(--r-lg);
  }
  .city-card__title { font-size: var(--fs-h2); line-height: var(--lh-tight); }
  .city-card__lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.8; }
  .city-card__place { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); font-weight: 500; }
  .city-card__place svg { width: 1.15rem; height: 1.15rem; color: var(--red); }

  /* A postmark pressed onto the corner of the card */
  .city-card__stamp {
    position: absolute;
    top: -2.75rem;
    inset-inline-end: -2.75rem;
    display: grid;
    place-items: center;
    width: 7.5rem;
    height: 7.5rem;
    rotate: -10deg;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.82);
    box-shadow: 0 0 0 1px var(--red-border), 0 0 0 7px rgb(255 255 255 / 0.5), var(--shadow-lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
  }
  .city-card__stamp-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: rays-spin 40s linear infinite; }
  /* LTR on the text keeps the textPath on the ring; the Arabic words still
     shape and read right to left within the run. */
  /* Two rounds of the phrase at 9.2px run once around the 283px ring. */
  .city-card__stamp-ring text { direction: ltr; font-family: var(--font-body); font-size: 9.2px; font-weight: 500; fill: var(--red-strong); }
  .city-card__stamp-core {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--red), var(--red-deeper));
    color: var(--white);
    box-shadow: 0 0 0 4px rgb(247 209 74 / 0.45), var(--shadow-red);
  }
  .city-card__stamp-core svg { width: 1.5rem; height: 1.5rem; }

  .city-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); width: 100%; margin-top: var(--s-2); }
  .city-social > li { display: flex; min-width: 0; }
  .city-social__link {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.9rem;
    padding-inline: 0.3rem 1rem;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.8);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 500;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-fast) linear;
  }
  .city-social__link:hover { transform: translateY(-3px); background: var(--white); box-shadow: var(--shadow-md); }
  .city-social__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red-strong);
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear;
  }
  .city-social__icon svg { width: 1.05rem; height: 1.05rem; }
  .city-social__link:hover .city-social__icon { background: var(--red-strong); color: var(--white); }
  .city-social__link--fb .city-social__icon { background: #EAF2FE; color: #1877F2; }
  .city-social__link--fb:hover .city-social__icon { background: #1877F2; color: var(--white); }
  .city-social__link--wa .city-social__icon { background: var(--wa-soft); color: var(--wa-ink); }
  .city-social__link--wa:hover .city-social__icon { background: var(--wa-ink); color: var(--white); }

  /* ── Responsive ────────────────────────────────────────────────────────── */
  /* Less room beside the orbit: the notes move above and below its corners. */
  @media (max-width: 1240px) {
    .contact-orbit__bubble { inset-inline-end: -6%; }
    .contact-orbit__badge { inset-inline-start: -6%; }
  }

  @media (max-width: 1080px) {
    .methods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .methods__item--wa { grid-row: auto; grid-column: 1 / -1; }
    .methods__item--wide:nth-child(4) { grid-column: 1 / -1; }
    .methods__item--wide:last-child { grid-column: auto; }
    /* Narrower cards: the city sits under the text instead of beside it. */
    .method--place { padding-bottom: 6.25rem; }
    .method__skyline { inset-inline: 1rem; bottom: 0.75rem; width: calc(100% - 2rem); max-width: 22rem; margin-inline: auto; opacity: 0.7; }
    .method--wa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); column-gap: var(--s-8); align-items: start; }
    .method--wa > * { grid-column: 1; }
    .method--wa > .method__halo { grid-column: auto; }
    .method--wa .wa-mini { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; }
    .method--wa .method__actions { grid-column: 1 / -1; }

    .inquiry__grid { grid-template-columns: minmax(0, 1fr); }
    .wa-preview { position: relative; top: auto; width: min(100%, 36rem); justify-self: center; }
    .wa-phone__chat { min-height: 14rem; }

    .faq__grid { grid-template-columns: minmax(0, 1fr); }
    .faq__intro { position: relative; top: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; gap: var(--s-8); }
  }

  @media (max-width: 900px) {
    .contact-hero .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .contact-orbit { width: min(100%, 21rem); margin-block: 4.5rem 3rem; }
    .contact-orbit__bubble { inset-inline-end: 0; }
    .contact-orbit__badge { inset-inline-start: 0; }

    /* One column: the questions first, then «لم تجد إجابة سؤالك؟» after them. */
    .faq__intro { display: contents; }
    .faq-list { order: 1; }
    .faq-help { order: 2; margin-top: var(--s-4); }

    .city-card { padding: 0; min-height: 0; align-items: start; }
    .city-card__media { position: relative; inset: auto; grid-row: 1; aspect-ratio: 16 / 10; }
    .city-card__media::after { background: linear-gradient(to bottom, transparent 55%, rgb(255 244 214 / 0.9)); }
    .city-card__panel { grid-row: 2; width: auto; margin: -3.5rem var(--s-3) var(--s-3); }
    /* Over the water, clear of the students on the far side of the photo */
    .city-card__panel { padding-top: 2.9rem; }
    .city-card__stamp { top: -3.6rem; inset-inline: var(--s-2) auto; width: 5.6rem; height: 5.6rem; }
    .city-card__stamp-core { width: 2.6rem; height: 2.6rem; }
    .city-card__stamp-core svg { width: 1.15rem; height: 1.15rem; }
  }

  @media (max-width: 720px) {
    .method--wa { display: flex; }
    .method--wa .wa-mini { margin-block: var(--s-2); }
    .inquiry-form__row { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 640px) {
    .methods__grid { grid-template-columns: minmax(0, 1fr); }
    .methods__item--wide:nth-child(4), .methods__item--wide:last-child { grid-column: auto; }
    .methods__sun { display: none; }
    .method__actions .btn { flex: 1 1 100%; }

    .quick-actions { width: 100%; }
    .quick-actions > li { flex: 1 1 100%; }
    .quick-action { width: 100%; }

    .inquiry-card { border-radius: var(--r-lg); }
    .topics { gap: var(--s-2); }
    /* Inside the narrow card the phone takes the full width. */
    .wa-preview.is-inline { padding: 0; border: 0; background: none; }
    .wa-preview.is-inline .wa-phone__chat { padding-inline: var(--s-3); }
    .wa-preview.is-inline .wa-bubble { max-width: 100%; }
    .inquiry-success__actions .btn { flex: 1 1 100%; }

    .faq-item__q { gap: var(--s-3); padding: var(--s-4); }
    .faq-item__num { width: 2rem; height: 2rem; }
    .faq-item__a { padding-inline: var(--s-4); padding-bottom: var(--s-5); }
    .faq-help__sun { inset-inline-end: -0.25rem; top: -2.75rem; width: 4.75rem; height: 4.75rem; }

    /* The e-mail card stacks; the letter becomes a small mark in the corner. */
    /* A narrow card like the phone cards: the address gets the full line and
       the copy button takes the same place as theirs, at the end of the foot. */
    .method--row { --pad: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); display: flex; }
    .method--row .method__value--email { font-size: clamp(0.9rem, calc((100vw - 6.5rem) / 17.5), 1.15rem); }
    .method--row .copy-btn { position: absolute; bottom: var(--pad); inset-inline-end: var(--pad); }
    .method--row .method__foot { min-height: calc(2.6rem + var(--s-4)); }
    .method__letter { position: absolute; z-index: -1; bottom: 5.25rem; inset-inline-end: 0.75rem; width: 6.5rem; opacity: 0.4; }
  }

  @media (max-width: 400px) {
    .contact-orbit__icon { top: -1.45rem; left: -1.45rem; width: 2.9rem; height: 2.9rem; }
    .contact-orbit__icon svg { width: 1.2rem; height: 1.2rem; }
    .contact-orbit__bubble { max-width: 10.5rem; font-size: 0.75rem; }
    .contact-orbit__badge { font-size: 0.9rem; }
    .choice__option { gap: var(--s-1); font-size: var(--fs-caption); }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .contact-hero .page-hero__title .highlight::before,
    .contact-orbit__rays, .contact-orbit__track, .contact-orbit__icon,
    .contact-orbit__bubble, .contact-orbit__badge,
    .methods__sun .sticker, .method__halo, .method__icon--wa::after,
    .inquiry-card::before, .inquiry-card.is-shaking,
    .form-field__error, .inquiry-success,
    .inquiry-success__spark, .wa-preview.is-updating .wa-preview__dot, .wa-slot.is-fresh,
    .faq-help__sun, .city-card__stamp-ring { animation: none; }
    .inquiry-success__ring, .inquiry-success__tick { animation: none; stroke-dashoffset: 0; }
    .quick-action, .quick-action__icon, .contact-orbit, .method, .method__watermark, .method__icon,
    .method__cta svg, .method__skyline, .method__letter-body, .method__letter-trail, .method__letter-spark,
    .copy-btn, .copy-btn__icon, .copy-btn__toast, .form-field__input, .form-field__label,
    .form-field__chevron, .choice__pill, .choice__option svg, .form-reveal, .topic, .topic svg,
    .inquiry-form__send, .wa-phone, .faq-item,
    .faq-item__toggle, .faq-item__toggle::before, .faq-item__toggle::after, .city-social__link { transition-duration: 0.01ms; }
    .faq-item::details-content { transition: none; }
  }
}