/* ============================================================================
   ProChild Hub — Components: navbar, footer, hero, shop, checkout, admin
   ============================================================================ */

/* ---------- Two-tier navbar ---------- */
.topbar {
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-xs);
  text-align: center;
  padding: .5rem 1rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(52,106,197,.08);
  transition: box-shadow .3s ease, background .3s ease;
}
.nav.scrolled { box-shadow: var(--shadow); background: rgba(255,255,255,.9); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; }

.brand { display: flex; align-items: center; gap: .7rem; }
.brand__mark {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: var(--blue);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.brand__mark svg { width: 26px; height: 26px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--blue); }
.brand__word .g { color: var(--green); }
.brand__word .p { color: var(--pink); }
.brand__tag { font-size: .6rem; font-weight: 700; letter-spacing: .22em; color: var(--ink-soft); text-transform: uppercase; margin-top: 3px; }

.nav__links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  color: var(--ink);
  padding: .3rem 0;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 3px; border-radius: 3px; background: var(--green);
  /* Grows from the centre on hover. scaleX (compositor-only) instead of animating width. */
  transform: scaleX(0); transform-origin: center; transition: transform .28s ease;
}
.nav__link:hover { color: var(--blue); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 1rem; }
.nav__icon-link { display: inline-flex; align-items: center; color: var(--ink); }
.nav__icon-link:hover { color: var(--blue); }

/* Language switch button */
.lang-form { display: inline-flex; margin: 0; }
.lang-switch {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  padding: .45rem .9rem; border: 2px solid rgba(52,106,197,.2); border-radius: var(--radius-pill);
  background: var(--white); color: var(--blue); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.lang-switch:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.lang-switch svg { width: 18px; height: 18px; }

.nav__toggle { display: none; background: none; border: none; cursor: pointer; color: var(--blue); padding: .3rem; }
.nav__toggle svg { width: 30px; height: 30px; }

@media (max-width: 860px) {
  .nav__links, .nav__actions .desktop-only { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__drawer {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
    background: var(--white); box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.7,.2,1);
    z-index: 60; padding: 5rem 1.75rem 2rem; display: flex; flex-direction: column; gap: 1.5rem;
  }
  .nav__drawer.open { transform: none; }
  .nav__drawer .nav__link { font-size: 1.1rem; padding: .6rem 0; }
  .nav__scrim { position: fixed; inset: 0; background: rgba(31,42,68,.4); opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 55; }
  .nav__scrim.open { opacity: 1; visibility: visible; }
}
@media (min-width: 861px) { .nav__drawer, .nav__scrim, .nav__drawer-close { display: none; } }
.nav__drawer-close { position: absolute; top: 1.25rem; inset-inline-end: 1.25rem; background: none; border: none; color: var(--ink); cursor: pointer; }

/* ---------- Hero (cinematic) ---------- */
/* The hero fills the viewport and is a centered flex column, so the enlarged logo video, the
   headline and the CTA are balanced as one composition that fits ABOVE THE FOLD (no scroll to
   read the headline) on a typical laptop and on mobile. */
.hero {
  position: relative;
  min-height: 100vh;            /* fill the first screen */
  min-height: 100svh;          /* mobile: account for browser UI (small viewport) */
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--pink-soft), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(149,187,58,.16), transparent 60%),
    var(--tint);
  perspective: 1400px;
}
.hero__inner {
  position: relative; z-index: 2; text-align: center;
  padding: 1.5rem 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-height: 100vh; max-height: 100svh;
}
.hero h1 { margin-bottom: .35rem; }

/* Logo-animation video centerpiece — transparent WebM (real alpha), sits directly on the hero
   background. NO mix-blend-mode and NO container background (both would wash out the logo).
   BIGGER than before, but height-capped to the viewport so the headline+CTA still fit above the
   fold on short screens (the min() with vh shrinks it on ~768–900px-tall laptops and phones). */
.hero__video-stage {
  position: relative;
  width: min(720px, 92vw);
  max-height: 46vh;
  margin: 0 auto 1rem;
  background: transparent;
  display: flex; justify-content: center;
}
.hero__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46vh;             /* cap so tall logos don't push the headline down */
  object-fit: contain;
  background: transparent;
}
.hero__tagline { font-family: var(--font-display); font-size: clamp(1.1rem, 2.5vw, 1.6rem); color: var(--green-deep); font-weight: 500; margin-bottom: 1.75rem; }

/* particle layers */
.hero__layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: transform; }
.hero__particle { position: absolute; width: 64px; opacity: .9; filter: drop-shadow(0 10px 16px rgba(52,106,197,.18)); }
.hero__ring { position: absolute; border: 2px dashed rgba(52,106,197,.18); border-radius: 50%; }

/* ---------- Founder ---------- */
.founder { display: grid; grid-template-columns: 340px 1fr; gap: 3rem; align-items: center; }
/* No founder photo (permanent) — single centred column. */
.founder--no-photo { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
.founder__photo {
  aspect-ratio: 3/4; border-radius: var(--radius); background: linear-gradient(160deg, var(--pink-soft), var(--tint));
  display: grid; place-items: center; color: var(--blue); box-shadow: var(--shadow); overflow: hidden;
}
.founder__photo svg { width: 40%; opacity: .55; }
.founder__quals { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .6rem; }
.founder__quals li { display: flex; gap: .7rem; align-items: flex-start; }
.founder__quals svg { flex: none; width: 22px; height: 22px; color: var(--green-deep); margin-top: 2px; }
@media (max-width: 800px) { .founder { grid-template-columns: 1fr; } .founder__photo { max-width: 300px; margin-inline: auto; } }

/* 3D tilt card */
.tilt { transform-style: preserve-3d; will-change: transform; transition: box-shadow .25s ease; }
.tilt > * { transform: translateZ(30px); }

/* ---------- Shop ---------- */
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .shop { grid-template-columns: 1fr; } }
.preview-stage {
  position: sticky; top: 100px;
  aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-lg); display: grid; place-items: center;
}
.preview-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.preview-name {
  position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--blue); text-shadow: 0 2px 10px rgba(255,255,255,.8); text-align: center; width: 88%; word-break: break-word;
}
.preview-empty { color: var(--ink-soft); text-align: center; padding: 2rem; }

/* Home product-teaser sample sticker — self-contained, centered artwork + name */
.teaser-sticker {
  width: 100%; max-width: 380px; margin-inline: auto;
  aspect-ratio: 4/3; border-radius: var(--radius);
  background: var(--white); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; padding: 8%;
}
.teaser-sticker img { width: 62%; height: auto; object-fit: contain; display: block; }
.teaser-sticker__name {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  color: var(--blue); text-align: center; line-height: 1;
}

.field { margin-bottom: 1.4rem; }
.field label { display: block; font-family: var(--font-display); font-weight: 500; margin-bottom: .45rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-sm);
  padding: .8rem 1rem; border: 2px solid rgba(52,106,197,.16); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(52,106,197,.12);
}
.field input.input-invalid { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192,57,43,.12); }
.hint { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: .35rem; }

/* Gender first-step pills */
.gender-choice { display: flex; gap: .75rem; }
.gender-pill {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  padding: .85rem 1rem; border: 2px solid rgba(52,106,197,.18); border-radius: var(--radius-pill);
  background: var(--white); color: var(--ink); cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}
.gender-pill svg { width: 20px; height: 20px; }
.gender-pill:hover { transform: translateY(-2px); border-color: var(--blue); }
.gender-pill.selected { background: var(--blue); border-color: var(--blue); color: #fff; }
.gender-pill.selected svg { color: #fff; }

.theme-group { margin-bottom: 1.25rem; }
.theme-group[hidden] { display: none; }
.theme-group__label { font-family: var(--font-display); font-weight: 600; color: var(--green-deep); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); margin-bottom: .6rem; }
.theme-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .7rem; }
.theme-tile {
  border: 3px solid transparent; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  background: var(--tint); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.theme-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.theme-tile.selected { border-color: var(--green); box-shadow: var(--shadow); }
.theme-tile img { aspect-ratio: 1; object-fit: contain; padding: 6px; }
.theme-tile span { display: block; text-align: center; font-size: .72rem; font-weight: 700; color: var(--ink-soft); padding: 3px 2px 6px; }

.price-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0; }
.price-row .price { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--blue); }

/* ---------- Girl accent: retint the shop to deeper pink when Gender = Girl ---------- */
.shop-form[data-gender="Girl"] .gender-pill:hover { border-color: var(--pink-deep); }
.shop-form[data-gender="Girl"] .gender-pill.selected { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; }
.shop-form[data-gender="Girl"] .theme-tile:hover { box-shadow: 0 6px 16px rgba(214,86,127,.22); }
.shop-form[data-gender="Girl"] .theme-tile.selected { border-color: var(--pink-deep); box-shadow: 0 8px 24px rgba(214,86,127,.28); }
.shop-form[data-gender="Girl"] .theme-group__label { color: var(--pink-deep); }
.shop-form[data-gender="Girl"] .price-row .price { color: var(--pink-deep); }
.shop-form[data-gender="Girl"] .field input:focus,
.shop-form[data-gender="Girl"] .field select:focus { border-color: var(--pink-deep); box-shadow: 0 0 0 4px rgba(214,86,127,.14); }
.shop-form[data-gender="Girl"] .btn-primary { background: var(--pink-deep); box-shadow: 0 8px 24px rgba(214,86,127,.22); }
.shop-form[data-gender="Girl"] .btn-primary:hover:not(:disabled) { background: #c0466d; }
.shop-form[data-gender="Girl"] .btn-primary:disabled { background: var(--pink-deep); opacity: .5; }

/* ---------- Contact cards ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 800px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card { text-align: center; text-decoration: none; color: var(--ink); }
.contact-card:hover { color: var(--ink); }
.contact-card .sticker__icon { margin-inline: auto; }
.contact-card strong { display: block; font-family: var(--font-display); color: var(--blue); font-size: var(--fs-md); margin-bottom: .25rem; }

/* ---------- Tables (cart/orders/admin) ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--white); }
table.data { width: 100%; border-collapse: collapse; min-width: 560px; }
table.data th, table.data td { padding: 1rem 1.1rem; text-align: start; }
table.data thead th { font-family: var(--font-display); font-weight: 600; color: var(--blue); background: var(--tint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
table.data tbody tr { border-top: 1px solid rgba(52,106,197,.08); }
table.data tbody tr:hover { background: rgba(244,248,255,.6); }

.badge-status { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); padding: .3rem .85rem; border-radius: var(--radius-pill); background: var(--tint); color: var(--blue); }
.badge-status.green { background: rgba(149,187,58,.16); color: var(--green-deep); }
.badge-status.pink { background: var(--pink-soft); color: var(--blue); }

/* ---------- Payment method selector ---------- */
.pay-methods { display: grid; gap: .8rem; }
.pay-method {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem;
  border: 2px solid rgba(52,106,197,.16); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.pay-method:hover { border-color: var(--blue); }
.pay-method input { accent-color: var(--blue); width: 18px; height: 18px; }
.pay-method svg { width: 26px; height: 26px; color: var(--blue); }
.pay-method.selected,
.pay-method:has(input:checked) { border-color: var(--green); background: rgba(149,187,58,.06); }

.card-error { color: #c0392b; font-size: var(--fs-xs); margin-top: .5rem; }

/* Back button — the arrow points to the start and flips automatically in RTL. */
.btn-back .icon-back { display: inline-flex; align-items: center; }
[dir="rtl"] .btn-back .icon-back { transform: scaleX(-1); }

/* "What's included" package panel (see _PackageContents.cshtml). */
.package-card { border: 2px dashed rgba(52,106,197,.22); border-radius: var(--radius-sm); background: var(--tint); padding: 1.1rem 1.2rem; }
.package-card__title { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-md); margin: 0 0 .5rem; color: var(--blue); }
.package-card__title svg { width: 22px; height: 22px; }
.package-card__intro { margin: 0 0 .55rem; font-weight: 700; color: var(--ink); }
.package-list { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-direction: column; gap: .35rem; }
.package-list li { position: relative; padding-inline-start: 1.5rem; color: var(--ink); }
.package-list li::before { content: "✔"; position: absolute; inset-inline-start: 0; color: var(--green-deep); font-weight: 800; }
.package-total { font-family: var(--font-display); font-weight: 700; color: var(--blue); border-top: 2px solid rgba(52,106,197,.12); padding-top: .5rem; }
/* Girl retint on the shop page */
.shop-form[data-gender="Girl"] .package-card { border-color: rgba(214,86,127,.3); }
.shop-form[data-gender="Girl"] .package-card__title,
.shop-form[data-gender="Girl"] .package-total { color: var(--pink-deep); }

/* ---------- Auth ---------- */
.auth-wrap { max-width: 460px; margin: clamp(40px,8vw,90px) auto; }

/* Show/hide password toggle */
.pw-field { position: relative; }
.pw-field input { padding-inline-end: 48px; }
.pw-toggle {
  position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: none; background: none; cursor: pointer;
  color: var(--ink-soft); border-radius: 8px;
}
.pw-toggle:hover { color: var(--blue); background: rgba(52,106,197,.08); }
.pw-toggle svg { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  background: var(--blue);
  color: rgba(255,255,255,.86);
  border-radius: 40px 40px 0 0;
  margin-top: 4rem;
  overflow: hidden;
}
.footer__glow { position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background: radial-gradient(400px 300px at 15% 20%, var(--green), transparent 60%), radial-gradient(400px 300px at 85% 80%, var(--pink), transparent 60%); }
.footer__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 2.5rem; padding-block: 4rem 2rem; }
@media (max-width: 800px) { .footer__inner { grid-template-columns: 1fr; gap: 2rem; } }
.footer h4 { color: var(--white); font-size: var(--fs-md); }
.footer a { color: rgba(255,255,255,.86); }
.footer a:hover { color: var(--white); }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.footer__contact li { display: flex; align-items: center; gap: .7rem; }
.footer__contact svg { width: 20px; height: 20px; flex: none; color: var(--pink); }
.footer__brandword { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--white); }
.footer__brandword .g { color: var(--green); } .footer__brandword .p { color: var(--pink); }
.socials { display: flex; gap: .7rem; margin-top: 1rem; }
.social-btn {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: var(--white); transition: transform .25s ease, background .25s ease;
  transform-style: preserve-3d;
}
.social-btn:hover { background: var(--green); color: var(--white); transform: rotateX(18deg) rotateY(-18deg) translateZ(4px); }
.social-btn svg { width: 22px; height: 22px; }
.footer__bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.16); padding-block: 1.25rem; text-align: center; font-size: var(--fs-xs); }

/* ---------- Responsive: hero particles + grids ---------- */
@media (max-width: 1000px) {
  .section .grid[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .section .grid[style*="repeat(4"] { grid-template-columns: 1fr !important; }
  .sticker[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
  .hero__particle { width: 44px !important; }
  /* Mobile: still bigger than before, but height-capped so the headline stays above the fold. */
  .hero__video-stage { width: min(520px, 90vw); max-height: 38vh; }
  .hero__video { max-height: 38vh; }
  .hero__inner { padding: 1rem .75rem; }
}

/* ---------- Reduced motion for hero ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__layer { transform: none !important; }
}

/* =====================================================================================
   Custom dropdown (see wwwroot/js/select.js)

   A native <select>'s option list is drawn by the OS and cannot be styled, which is why it
   looks foreign next to the rest of the site. On DESKTOP the script builds this control beside
   the real <select> and hides the native one from sight and from the tab order — the <select>
   itself stays in the DOM and stays what submits.

   On TOUCH the script bails out entirely and the native control is used, styled only as far as
   CSS allows: padding, border, radius and a custom arrow. That is deliberate — the OS picker is
   the better control on a phone.
   ===================================================================================== */

/* Native select, everywhere it is not replaced (touch, and desktop with JS off).
   `.field select` above sets the `padding` shorthand at higher specificity, so the room for the
   arrow is claimed with a selector that can actually win against it — otherwise the chevron sits
   on top of a long option's text. */
select,
.field select,
.admin-filter select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-inline-end: 2.6rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23346ac5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
}
[dir="rtl"] select,
[dir="rtl"] .field select,
[dir="rtl"] .admin-filter select { background-position: left .9rem center; }

.pch-select { position: relative; display: block; width: 100%; }

/* The real control: still submitting, just not seen. Not display:none — a hidden-by-display
   field is skipped by some validation UIs, and we want it treated as a live form control. */
.pch-select__native {
  position: absolute; opacity: 0; pointer-events: none;
  width: 100%; height: 100%; inset-block-start: 0; inset-inline-start: 0;
  margin: 0; border: 0; padding: 0;
}

.pch-select__button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .7rem .9rem;
  border: 1.5px solid rgba(52,106,197,.18);
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  text-align: start; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pch-select__button:hover { border-color: rgba(52,106,197,.38); }
.pch-select__button:focus-visible,
.pch-select__button[aria-expanded="true"] {
  outline: none; border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 4px rgba(52,106,197,.13);
}
.pch-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pch-select__arrow {
  flex: none; width: 14px; height: 14px;
  background: currentColor; color: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease;
}
.pch-select__button[aria-expanded="true"] .pch-select__arrow { transform: rotate(180deg); }

.pch-select__list {
  position: absolute; z-index: 60;
  inset-inline-start: 0; inset-inline-end: 0;   /* follows the reading direction in RTL */
  inset-block-start: calc(100% + .35rem);
  margin: 0; padding: .35rem; list-style: none;
  /* Scrolls INTERNALLY when there are more options than fit — the list stays open while you scroll
     it (see select.js). ~300px shows about eight options before scrolling starts. */
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;          /* the page underneath does not scroll at the ends */
  -webkit-overflow-scrolling: touch;     /* trackpad / touch momentum */
  scrollbar-width: thin;
  scrollbar-color: rgba(52,106,197,.35) transparent;
  background: #fff;
  border: 1.5px solid rgba(52,106,197,.18);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.pch-select__list.is-above { inset-block-start: auto; inset-block-end: calc(100% + .35rem); }

.pch-select__option {
  padding: .55rem .7rem; border-radius: 10px;
  font-size: .95rem; color: var(--ink); cursor: pointer;
  text-align: start;
}
.pch-select__option.is-active { background: var(--tint); }
.pch-select__option.is-selected { background: var(--blue); color: #fff; font-weight: 600; }
.pch-select__option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .pch-select__arrow, .pch-select__button { transition: none; }
}

/* The shop's Girls variant recolours focus rings; the custom control follows the same rule so the
   dropdown does not stay blue inside an otherwise pink form. */
.shop-form[data-gender="Girl"] .pch-select__button:focus-visible,
.shop-form[data-gender="Girl"] .pch-select__button[aria-expanded="true"] {
  border-color: var(--pink-deep); box-shadow: 0 0 0 4px rgba(214,86,127,.14);
}
.shop-form[data-gender="Girl"] .pch-select__option.is-selected { background: var(--pink-deep); }
.shop-form[data-gender="Girl"] .pch-select__arrow { color: var(--pink-deep); }

/* WebKit/Blink scrollbar inside the dropdown, matched to the site rather than the OS default. */
.pch-select__list::-webkit-scrollbar { width: 10px; }
.pch-select__list::-webkit-scrollbar-track { background: transparent; }
.pch-select__list::-webkit-scrollbar-thumb {
  background: rgba(52,106,197,.32); border-radius: 999px;
  border: 3px solid #fff;            /* inset look, so the thumb doesn't touch the card edge */
}
.pch-select__list::-webkit-scrollbar-thumb:hover { background: rgba(52,106,197,.55); }

/* =====================================================================================
   Prompt 7 — hero, logo lockup, clickable announcement bar, tightened footer
   ===================================================================================== */

/* The logo animation is the centrepiece and the brand identity, so it gets the room. Both caps are
   viewport-relative, so it grows on a desktop without ever overflowing a phone. */
.hero__video-stage { width: min(960px, 94vw); max-height: 56vh; margin-bottom: 1.25rem; }
.hero__video { max-height: 56vh; }

/* Smaller than the page's default h1 and balanced across exactly two lines. `text-wrap: balance`
   evens the two lines out; the max-width is what forces the break in the first place, and it is in
   `ch` so it holds for Arabic as well as English. */
.hero__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* Space above the CTA, and (prompt 8 §5) real clearance BELOW it so the copy that follows is not
   crowded against it. Both languages, whatever their line height. */
.hero__cta { margin-top: 2rem; margin-bottom: 3rem; }

/* Header / footer wordmark. Height-capped so the header keeps its proportions; the SVG scales. */
.brand__logo { display: block; height: 68px; width: auto; max-width: 100%; }
.footer__logo { display: block; height: 62px; width: auto; max-width: 100%; }
@media (max-width: 860px) { .brand__logo { height: 50px; } }

/* Announcement bar: the whole bar is the link. */
a.topbar {
  display: block;
  color: var(--white);
  text-decoration: none;
  transition: background .2s ease;
}
a.topbar:hover { background: var(--blue-deep); }
a.topbar:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }

/* Footer on phones: the three columns stacked with large bands of empty space between them and
   4rem of padding above. Tightened so it does not eat most of a phone screen. */
@media (max-width: 800px) {
  .footer__inner { gap: 1.5rem; padding-block: 2.25rem 1.25rem; }
  .footer__logo { height: 54px; }
  .footer__inner h4 { margin-bottom: .5rem; }
  .footer__links, .footer__contact { gap: .35rem; }
}

/* =====================================================================================
   Prompt 8
   ===================================================================================== */

/* §3 — nav centred against the PAGE, not against the gap between its neighbours.
   space-between centred the nav within whatever the logo and the action group left over, and
   those two are different widths (and differ again in Arabic), so the nav always sat off-centre.
   Equal 1fr outer columns make the middle column's midpoint the page's midpoint by construction,
   whatever the content on either side. */
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.nav__inner > .brand { justify-self: start; }
.nav__inner > nav { justify-self: center; }
.nav__inner > .nav__actions { justify-self: end; }

/* §4 — logo entrance + hover. Restrained on purpose: it is a logo, not a toy. */
@keyframes pch-logo-in {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.brand__logo {
  animation: pch-logo-in .55s cubic-bezier(.2,.7,.2,1) both;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
  transform-origin: center;
}
.brand:hover .brand__logo { transform: scale(1.04); }
.footer__logo { animation: pch-logo-in .55s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  .brand__logo, .footer__logo { animation: none; transition: none; }
  .brand:hover .brand__logo { transform: none; }
}

/* §6 — ONE gradient behind "What we do" + "Meet the founder".
   COLOUR ONLY: nothing here touches type, spacing, layout or text colour. It lives on a wrapper
   spanning both sections so there is no seam where they meet, and it is 180deg so RTL renders it
   identically. The founder section's own tint is cleared, otherwise it would paint over the middle
   of the gradient and put the seam back. */
/* =====================================================================================
   Home sections — two flat backgrounds (the blue→pink gradient was dropped by the client).

   "What we do" is simply the page's own white (body is var(--white)), so it needs no rule.
   "Meet the founder" is a light-grey slab with generous rounded corners: a hard horizontal line
   where white meets grey reads as an abrupt cut on scroll, and rounding ALL FOUR corners softens
   both the entry and the exit. Full-bleed width — rounded, not inset into a narrow card.

   `border-radius` is already direction-agnostic (the shorthand is physical but symmetric here, so
   all four corners are equal and RTL is identical either way).

   The four darkened text colours (#16305A / #39485F / #4D2437 / #4C3D46) that lived here are GONE.
   They were additions scoped to the old gradient wrapper — never edits to the base rules — so
   removing them restores the originals automatically: headings to var(--blue), .section-head p and
   .muted to var(--ink-soft), body copy to var(--ink).
   ===================================================================================== */
.home-founder {
  background: #F5F6F8;
  border-radius: 48px;
}
@media (max-width: 700px) {
  .home-founder { border-radius: 24px; }
}

/* =====================================================================================
   Header trim (prompt 9)
   The header grew when the logo was enlarged. Trimmed moderately: logo 68 -> 50px and the row
   padding .7 -> .55rem, so the bar goes ~90px -> ~68px. Mobile follows the same proportion,
   50 -> 40px. Nothing else about the header changes — the 1fr auto 1fr centring grid and the
   right-hand action group are untouched.

   The PNG is 1965px wide and is displayed around 223px, so it stays far inside its own pixel
   budget on any retina screen; nothing here needs a 2x variant.
   ===================================================================================== */
.nav__inner { padding-block: .55rem; }
.brand__logo { height: 50px; }
@media (max-width: 860px) { .brand__logo { height: 40px; } }

/* =====================================================================================
   Hero: bring the primary action above the fold (prompt 11)

   ROOT CAUSE: the hero is min-height:100svh but STARTS below the topbar and the sticky nav, so a
   full viewport of hero was always pushed ~90px past the fold — the button, being last, fell off.
   Subtracting the chrome height makes the hero fill what is actually visible. 5.6rem is the topbar
   (~2.25rem) plus the trimmed nav (~3.4rem); it is in rem so it tracks the root font size.

   Everything else here reclaims SPACE, never content: the logo animation keeps its 56vh cap.
   The margin BELOW the button is deliberately untouched (fixed in an earlier prompt).
   ===================================================================================== */
.hero { min-height: calc(100svh - 5.6rem); }
.hero__inner { padding-block: 1rem; }              /* was 1.5rem — 16px reclaimed */
.hero__video-stage { margin-bottom: .5rem; }       /* was 1.25rem — 12px, the biggest easy win */
.hero h1 { margin-bottom: .25rem; }                /* was .35rem */
.hero__inner > p { margin-bottom: .5rem; }         /* was 1rem — 8px */
.hero__cta { margin-top: 1.25rem; }                /* was 2rem — 12px. margin-bottom UNCHANGED. */

/* Trimmed one step (2.25rem -> 2rem max) purely to buy headroom at 1366x768, where the Arabic
   subtitle wraps to more lines than the English one. Reported as a deliberate reduction. */
.hero__title { font-size: clamp(1.4rem, 2.6vw, 2rem); }

/* =====================================================================================
   Header: smaller logo, shorter bar (prompt 11)
   50 -> 40px desktop, 40 -> 34px mobile, row padding .55 -> .45rem.
   The 1fr auto 1fr centring grid and the action group are untouched.
   ===================================================================================== */
.nav__inner { padding-block: .45rem; }
.brand__logo { height: 40px; }
@media (max-width: 860px) { .brand__logo { height: 34px; } }


/* =====================================================================================
   Hero: cap the animation so the CTA clears the fold (prompt 12)

   The tightening in prompt 11 was not enough on its own, because the animation was always the
   binding constraint: a 16:9 video at max-height 56vh is 430px on a 768px laptop — 56% of the
   viewport for one element. Everything else in the hero put together is under 260px.

   Now capped by whichever is smaller:
     48vh                   — keeps it large and proportional on tall screens
     calc(100svh - 23rem)   — the space genuinely left after the chrome, headline, subtitle,
                              button and their margins (~352px measured; 23rem = 368px leaves
                              a margin for font-rendering differences and Arabic's extra
                              subtitle line)

   At 1366x768 that resolves to 369px instead of 430px, putting the button's lower edge around
   721px against a 768px fold — roughly 47px of clearance even in the Arabic worst case, rather
   than the ~13px (English) / -13px (Arabic) it had before.
   On a 1080p screen it resolves to 518px, so the animation stays big where there is room.
   ===================================================================================== */
.hero__video-stage,
.hero__video { max-height: min(48vh, calc(100svh - 23rem)); }

/* Honeypot: off-screen rather than display:none. Some bots skip hidden inputs, so it stays a
   rendered, focusable-in-DOM field — but out of sight, out of the tab order (tabindex="-1") and
   out of the accessibility tree (aria-hidden on the wrapper), so no real person meets it. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}