/* ==========================================================================
   Victoria's Voice (Hebrew, right-to-left) - site stylesheet
   --------------------------------------------------------------------------
   Contents
     1.  Design tokens (colors, type, spacing) + dark mode
     2.  Base / reset
     3.  Layout helpers
     4.  Buttons
     5.  Site header and navigation
     6.  Hero (home page)
     7.  Home page sections (stats, demos, cards, logos, quotes, split)
     8.  Accordions (FAQ and similar)
     9.  Contact panel and forms
    10.  Inner pages: page header, breadcrumbs, layout
    11.  Inner pages: article text ("prose")
    12.  Inner pages: media (figures, video, audio)
    13.  Inner pages: sidebar navigation
    14.  Inner pages: special blocks (clients, testimonials, notices, sitemap)
    15.  Site footer and quick-contact buttons
    16.  Utilities, reduced motion, print
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  color-scheme: light;
  /* Brand colors (same magenta as the original logo) */
  --brand:        #b8005c;   /* text, buttons: 6:1 contrast on white */
  --brand-hover:  #8f0047;   /* darker on hover so white text stays readable */
  --brand-bright: #eb0985;   /* glows, bars, decorative accents */
  --brand-soft:   #fde7f1;   /* tinted backgrounds */
  --gold:         #ffd23f;

  /* Neutrals */
  --ink:          #16121a;   /* main text */
  --muted:        #5f5865;   /* secondary text (5.9:1 on --paper) */
  --paper:        #fbf8f5;   /* page background */
  --card:         #ffffff;   /* raised surfaces */
  --line:         #e6dfd9;   /* borders */
  --dark:         #16121a;   /* always-dark bands (nav, quotes, footer) */
  --dark-nav:     #0b080d;

  /* Text and focus colors that change in dark mode */
  --link:         var(--brand);
  --focus:        var(--brand);

  /* Gradient used behind the hero and every inner-page title */
  --hero-bg:
    radial-gradient(900px 520px at 85% 8%, rgba(235, 9, 133, .44), transparent 62%),
    radial-gradient(760px 520px at 0% 100%, rgba(235, 9, 133, .32), transparent 62%),
    linear-gradient(160deg, #4a1238, #2d0c26);

  /* Shape and depth */
  --radius:       20px;
  --radius-sm:    12px;
  --shadow:       0 1px 2px rgba(22, 18, 26, .05), 0 12px 32px -12px rgba(22, 18, 26, .18);

  /* Type */
  --serif: "Rubik", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --sans:  "Rubik", Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Layout */
  --container:    1160px;
  --header-h:     72px;
}




/* ==========================================================================
   2. Base / reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* One consistent, clearly visible keyboard focus ring */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Dark surfaces use the gold ring in both color schemes */
.site-header, .hero, .page-header, .quotes, .contact-panel, .site-footer {
  --focus: var(--gold);
}

.skip-link {
  position: absolute;
  inset-inline-start: 8px;
  top: 8px;
  transform: translateY(-250%);   /* hidden above the page until focused */
  z-index: 200;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--gold);
  color: #000;
}
.skip-link:focus { transform: none; }


/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.container {
  width: min(var(--container), 100% - 32px);
  margin-inline: auto;
}

.section { padding: 88px 0; }

.section--tinted {
  background: var(--card);
  border-block: 1px solid var(--line);
}

.section h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-bottom: .5rem;
}

/* Small uppercase label above section headings */
.eyebrow {
  display: inline-block;
  margin-bottom: .8rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--link);
}

.lede {
  max-width: 60ch;
  font-size: 1.1rem;
  color: var(--muted);
}


/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 600 1rem var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px -10px var(--brand);
}
.btn--primary:hover { background: var(--brand-hover); }

.btn--ghost {
  border-color: rgba(255, 255, 255, .75);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.btn--gold {
  justify-content: center;
  background: var(--gold);
  color: #1a1300;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px -12px #b8900a;
}
.btn--gold:hover { background: #ffc400; }


/* ==========================================================================
   5. Site header and navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark-nav);
  border-bottom: 2px solid var(--brand-bright);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 56px; width: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.site-nav__list a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
}
.site-nav__list a:hover { background: rgba(255, 255, 255, .18); }

/* The page you are on gets an underline in the brand color */
.site-nav__list a[aria-current] {
  box-shadow: inset 0 -3px 0 var(--brand-bright);
  border-radius: 0;
}

.site-nav__list .btn { padding: 10px 20px; font-size: 1rem; }

.menu-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  margin-inline-start: auto;
  margin-inline-end: -8px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .site-header__inner { gap: 0; }
  .menu-toggle { display: block; }

  /* The menu drops down below the header bar */
  .site-nav { width: 0; overflow: visible; }

  .site-nav__list {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 20px;
    background: var(--dark-nav);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .site-nav__list.is-open { display: flex; }
  .site-nav__list a[aria-current] { border-radius: 999px; }
  .site-nav__cta .btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   6. Hero (home page)
   ========================================================================== */
.hero {
  position: relative;
  padding: 84px 0 110px;
  overflow: hidden;
  background: var(--hero-bg);
  color: #fff;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}

.hero__title {
  margin-bottom: 1.2rem;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.1;
}
.hero__title em { font-style: italic; color: #ff6fb5; }

.hero .eyebrow { color: #ff6fb5; }

.hero__lede { margin-bottom: 2rem; max-width: 60ch; font-size: 1.1rem; color: #fff; }

.hero__title, .hero__lede, .hero .eyebrow, .hero__note {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.hero__note { margin-top: 1.1rem; font-size: 1.05rem; color: #fff; }

/* Animated sound-wave bars above the headline */
.soundwave { display: flex; align-items: center; gap: 4px; height: 36px; margin-bottom: 22px; }
.soundwave i {
  display: block;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--brand-bright), #ff9bd0);
  animation: soundwave 1.4s ease-in-out infinite;
}
@keyframes soundwave { 0%, 100% { height: 20%; } 50% { height: 100%; } }

.hero__portrait { position: relative; }

.hero__photo {
  overflow: hidden;
  aspect-ratio: 420 / 460;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background: #cfe9f5;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.hero__badge {
  position: absolute;
  inset-inline-start: -22px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}
.hero__badge strong { font-family: var(--serif); font-size: 1.7rem; line-height: 1; color: var(--brand); }
.hero__badge span { font-size: 1rem; line-height: 1.3; color: #4a4350; }

@media (max-width: 900px) {
  .hero { padding: 56px 0 80px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__portrait { max-width: 380px; margin-inline: auto; }
  .hero__badge { inset-inline-start: 8px; }
}


/* ==========================================================================
   7. Home page sections
   ========================================================================== */

/* --- Stats bar overlapping the bottom of the hero --- */
.stats { position: relative; z-index: 2; margin-top: -52px; }

.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 30px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.stat { padding: 4px 12px; text-align: center; }
.stat + .stat { border-inline-start: 1px solid var(--line); }
.stat b { display: block; font-family: var(--serif); font-size: 2.1rem; line-height: 1.1; color: var(--link); }
.stat span { font-size: 1.05rem; color: var(--muted); }

@media (max-width: 760px) {
  .stats__inner { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .stat:nth-child(3) { border-inline-start: 0; }
}

/* --- Demos: video on the left, audio players on the right --- */
.demo-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: start;
  margin-top: 40px;
}
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } }

.track-list { display: grid; gap: 12px; }

.more-link { margin-top: 22px; }
.more-link a { font-weight: 600; color: var(--link); }

/* --- "Why Victoria's Voice" cards --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--brand-soft);
  font-size: 1.3rem;
}

.card h3 { margin-bottom: 8px; font-size: 1.25rem; }
.card p { font-size: 1.05rem; color: var(--muted); }
.card a { font-weight: 600; color: var(--link); }

/* --- Client logos and membership badges --- */
.centered { text-align: center; }

.logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 26px 44px;
  margin-top: 40px;
}
.logo-wall img {
  width: auto;
  height: 44px;
  opacity: .6;
  filter: grayscale(1) contrast(.9);
  transition: .25s;
}
.logo-wall img:hover { opacity: 1; filter: none; }

/* Logos are on white backgrounds, so give them a white tile in dark mode */


.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 56px;
}
.badges img { width: auto; max-width: 100%; height: 130px; object-fit: contain; border-radius: 10px; }

/* --- Testimonials (dark band, masonry columns) --- */
.quotes { background: var(--dark); color: #fff; }
.quotes h2 { color: #fff; }
.quotes .eyebrow { color: #ff6fb5; }

.quote-grid { columns: 3 300px; column-gap: 20px; margin-top: 44px; }

.quote {
  break-inside: avoid;
  margin-bottom: 20px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
}
.quote blockquote p {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.5;
  color: #f1e9ee;
}
.quote blockquote p::before {
  content: "\201C";
  display: block;
  margin-bottom: 6px;
  font-size: 3rem;
  line-height: .6;
  color: var(--brand-bright);
}
.quote figcaption { margin-top: 16px; font-size: 1.05rem; color: #e3d9e0; }
.quote figcaption b { display: block; font-weight: 600; color: #fff; }

/* Photos placed between testimonials keep the same card width */
.quote-grid .quote-photo { break-inside: avoid; margin-bottom: 20px; }
.quote-grid .quote-photo img { width: 100%; border-radius: var(--radius); }

/* --- Image + text split (services) --- */
.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.split__media {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.split__media img { width: 100%; height: auto; }
.split--center { align-items: center; }
.split p { margin: 14px 0; color: var(--muted); }
.split p strong { color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; list-style: none; }
.chips li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 1rem;
  font-weight: 600;
  color: var(--link);
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__media { position: static; max-width: 380px; }
}


/* ==========================================================================
   8. Accordions (built on the native <details> element, no JavaScript)
   ========================================================================== */
.accordion { clear: both; margin-top: 20px; }   /* starts below a floated image instead of running under it */

.accordion details { padding: 4px 0; border-bottom: 1px solid var(--line); }

.accordion summary {
  position: relative;
  padding-block: 20px;
  padding-inline: 0 40px;
  font-size: 1.08rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }

/* Plus sign that turns into an "x" when open */
.accordion summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--link);
  transition: transform .25s;
}
.accordion details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.accordion .accordion__body { padding: 0 0 22px; padding-inline-end: 40px; color: var(--muted); }
.accordion .accordion__body p + p { margin-top: .8rem; }
.accordion a { font-weight: 600; color: var(--link); }

/* FAQ sits in a narrower column */
.section--narrow .container { max-width: 820px; }


/* ==========================================================================
   9. Contact panel and forms
   ========================================================================== */
.contact-panel {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  padding: 56px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--brand), #7e0040);
  box-shadow: 0 30px 60px -24px rgba(184, 0, 92, .6);
  color: #fff;
}
.contact-panel h2 { color: #fff; }
.contact-panel .lede { color: #fff; }

.contact-ways { display: grid; gap: 12px; margin-top: 28px; list-style: none; }
.contact-ways a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.contact-ways a:hover { background: rgba(255, 255, 255, .26); }
.contact-ways small { display: block; font-size: 1rem; font-weight: 400; }

@media (max-width: 900px) {
  .contact-panel { grid-template-columns: 1fr; gap: 32px; padding: 32px 22px; border-radius: 24px; }
}

.form {
  display: grid;
  gap: 16px;
  padding: 30px;
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
}

.form label { display: block; margin-bottom: 6px; font-size: 1rem; font-weight: 600; }

.form input,
.form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #8a8190;           /* 3.6:1 against the card, as required for form fields */
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.form textarea { min-height: 130px; resize: vertical; }

.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft), 0 0 0 6px var(--brand);
}

.form__note { text-align: center; font-size: 1rem; color: var(--muted); }

/* Honeypot field for spam bots: invisible to people */
.form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }


/* ==========================================================================
   10. Inner pages: page header, breadcrumbs, layout
   ========================================================================== */
.page-header {
  padding: 40px 0 52px;
  background: var(--hero-bg);
  color: #fff;
}

.page-header h1 {
  max-width: 24ch;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-bottom: 18px;
  list-style: none;
  font-size: 1rem;
}
.breadcrumbs li + li::before { content: "\2039"; margin-inline-start: 8px; color: #ffb3d9; }
.breadcrumbs a { color: #fff; text-underline-offset: 3px; }
.breadcrumbs [aria-current="page"] { color: #ffd9ea; }

.page-body { padding: 56px 0 24px; }

/* Article on the left, sidebar menu on the right */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.page-layout--single { grid-template-columns: minmax(0, 1fr); }
.page-layout--single .prose { max-width: 900px; margin-inline: auto; }

@media (max-width: 960px) {
  .page-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}


/* ==========================================================================
   11. Inner pages: article text
   ========================================================================== */
.prose { font-size: 1.06rem; line-height: 1.75; }

/* Contain floated images so they never poke out of the article */
.prose::after { content: ""; display: table; clear: both; }

.prose > * + * { margin-top: 1rem; }

.prose h2 {
  margin-top: 2.4rem;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
}
.prose > h2:first-child { margin-top: 0; }

.prose h3 { margin-top: 1.8rem; font-size: 1.3rem; }

.prose a { font-weight: 600; color: var(--link); text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-hover); }


.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose li + li { margin-top: .45rem; }
.prose li::marker { color: var(--link); }

.prose em { font-style: italic; }

/* A short line of text that introduces a block (e.g. "Jump to the demos") */
.prose .lead { font-size: 1.15rem; color: var(--muted); }

.text-center { text-align: center; }

/* Call-to-action button, centered */
.cta { margin-block: 2rem; text-align: center; }
.cta .btn { font-size: 1.15rem; padding: 18px 32px; text-decoration: none; }
.prose .cta .btn { color: #fff; }

/* Checkmark list used for "why choose me" bullet points */
.check-list { padding-inline-start: 0; list-style: none; }
.check-list li { position: relative; padding-inline-start: 2rem; }
.check-list li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: .2rem;
  border-radius: 50%;
  background: var(--brand);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

/* Glossary and similar definition-style headings */
.prose .term { margin-top: 1.6rem; font-family: var(--sans); font-size: 1.15rem; letter-spacing: 0; color: var(--link); }


/* ==========================================================================
   12. Inner pages: media (figures, video, audio)
   ========================================================================== */
.figure { max-width: 100%; }
.figure img { border-radius: 14px; box-shadow: var(--shadow); }
.figure figcaption { margin-top: 6px; font-size: 1rem; color: var(--muted); }

/* Images float beside the text on wide screens, then stack on small ones */
.figure--right { float: right; width: min(38%, 330px); margin: .3rem 0 1.2rem 2rem; }
.figure--left  { float: left;  width: min(38%, 330px); margin: .3rem 2rem 1.2rem 0; }
.figure--center { margin-inline: auto; }
.figure--wide { clear: both; width: 100%; margin: 1.5rem 0; }

@media (max-width: 700px) {
  .figure--right, .figure--left { float: none; width: auto; max-width: 420px; margin: 1.2rem auto; }
}

/* Some decorative images were hidden on small screens in the old design */
@media (max-width: 900px) { .only-wide { display: none !important; } }

/* Video: 16:9 box. The iframe shows a thumbnail first and loads the player on click. */
.video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: #000;
  box-shadow: var(--shadow);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Thumbnail with a play button; main.js swaps it for the real player on click */
.video__button {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.video__button img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.video__button:hover img { opacity: 1; }

.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.video__play::after {                      /* the triangle */
  content: "";
  position: absolute;
  left: 30px;
  top: 22px;
  border-left: 26px solid #fff;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}
.video__button:hover .video__play { background: var(--brand-hover); }

/* Shown only if JavaScript is off: a plain link to the video */
.video__fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: #fff; text-align: center; }

/* Several videos, each with a title */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px 28px;
  margin-block: 1.6rem;
}
.video-card__title { margin-bottom: 8px; font-size: 1.1rem; font-weight: 700; color: var(--link); }

/* Audio player card (used on the home page and in demo lists) */
.track {
  clear: both;   /* starts below a floated image instead of running under it */
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  transition: border-color .2s, box-shadow .2s;
}
.track:hover { border-color: var(--brand); box-shadow: var(--shadow); }

.track__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 600;
}
.track__title::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.track__title a { text-decoration: none; color: inherit; }
.track__title a:hover { text-decoration: underline; }
.track audio { display: block; width: 100%; height: 40px; }

.prose .track + .track { margin-top: .8rem; }


/* ==========================================================================
   13. Inner pages: sidebar navigation
   ========================================================================== */
/* Not sticky: the demo list is long and every item must stay reachable */
.sidebar { align-self: start; }

.side-nav {
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.side-nav__title {
  margin: 0 8px 10px;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--link);
}

.side-nav ul { list-style: none; }

.side-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.side-nav a:hover { background: var(--brand-soft); color: var(--link); }

.side-nav a[aria-current="page"] {
  background: var(--brand-soft);
  box-shadow: inset -4px 0 0 var(--brand);   /* accent bar on the right edge */
  font-weight: 700;
  color: var(--link);
}

/* Resource categories are collapsible groups */
.side-nav details + details { margin-top: 4px; }

.side-nav summary {
  position: relative;
  padding-block: 10px;
  padding-inline: 12px 36px;
  border-radius: 10px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.side-nav summary::-webkit-details-marker { display: none; }
.side-nav summary:hover { background: var(--brand-soft); }
.side-nav summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--link);
}
.side-nav details[open] > summary::after { content: "\2212"; }  /* minus sign */
.side-nav details ul { padding: 2px 0 8px; padding-inline-start: 8px; }


/* ==========================================================================
   14. Inner pages: special blocks
   ========================================================================== */

/* Client list (three columns of names) */
.client-list {
  columns: 3 220px;
  column-gap: 32px;
  padding-inline-start: 0 !important;
  list-style: none;
}
.client-list li { break-inside: avoid; margin: 0 !important; padding: 6px 0; border-bottom: 1px solid var(--line); }

/* Centered message with an image (404 and "message sent" pages) */
.notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  max-width: 900px;
  margin-inline: auto;
}
.notice h2 { margin-top: 0; }
@media (max-width: 760px) { .notice { grid-template-columns: 1fr; } }

/* Site map: one long list of links, in columns */
.sitemap-list { columns: 2 320px; column-gap: 40px; list-style: none; padding-inline-start: 0 !important; }
.sitemap-list li { break-inside: avoid; margin: 0 !important; padding: 7px 0; border-bottom: 1px solid var(--line); }


/* ==========================================================================
   15. Site footer and quick-contact buttons
   ========================================================================== */
.site-footer {
  margin-top: 88px;
  padding: 64px 0 100px;
  background: var(--dark-nav);
  color: #f1e9ee;
  font-size: 1.05rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.9fr 1.2fr;
  gap: 36px;
}

.footer-grid h2 {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.footer-grid a { display: block; padding: 5px 0; color: #fff; text-decoration: none; }
.footer-grid a:hover { color: #ff9bd0; text-decoration: underline; }

.footer-grid .brand { margin-bottom: 12px; }
.footer-grid .brand img { height: 60px; }
.footer-grid address { font-style: normal; margin-top: 10px; }

/* The long list of demo categories is split into two columns */
.footer-grid .footer-columns { columns: 2; column-gap: 20px; }
.footer-grid .footer-columns a { break-inside: avoid; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid #4a4050;
}
.footer-legal a { color: #fff; text-decoration: underline; }

@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer-grid { grid-template-columns: 1fr; } }

/* Round WhatsApp and email buttons that stay on screen */
.quick-contact { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; gap: 10px; }
.quick-contact a {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .5);
  font-size: 1.4rem;
  text-decoration: none;
  color: #fff;
  transition: transform .15s;
}
.quick-contact a:hover { transform: scale(1.08); }
@media (max-width: 600px) {
  .quick-contact { right: 10px; bottom: 10px; gap: 8px; }
  .quick-contact a { width: 46px; height: 46px; font-size: 1.2rem; }
}
.quick-contact__whatsapp { background: #128c4a; }   /* darkened green: white icon stays visible */
.quick-contact__email { background: var(--brand); }


/* ==========================================================================
   16. Utilities, reduced motion, print
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .soundwave i { animation: none; height: 60%; }
  .btn, .card, .track, .quick-contact a { transition: none; }
}

@media print {
  .site-header, .quick-contact, .sidebar, .skip-link, .site-footer .footer-grid { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .page-header, .hero { background: none; color: #000; padding: 0 0 12pt; }
  .page-header h1, .breadcrumbs a, .breadcrumbs [aria-current] { color: #000; text-shadow: none; }
  .page-layout { display: block; }
  a { color: #000; }
}

/* Icon grid: app icons with captions (mobile-app-voiceover page) */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 22px 18px;
  margin: 1.2rem 0 2rem;
}
.icon-grid__item { margin: 0; text-align: center; }
.icon-grid__item img { width: 100%; max-width: 137px; height: auto; margin-inline: auto; border-radius: 22px; box-shadow: var(--shadow); }
.icon-grid__item figcaption { margin-top: 8px; font-size: 1rem; line-height: 1.35; color: var(--ink); }


/* ==========================================================================
   17. Hebrew typography and right-to-left details
   ========================================================================== */
html { line-height: 1.7; }

/* No letter-spacing and no all-caps in Hebrew: they only hurt readability */
h1, h2, h3, h4, .eyebrow, .hero__title, .stat b { letter-spacing: 0; text-transform: none; }
.eyebrow { font-size: 1.6rem; }

/* Latin text inside Hebrew sentences (company names, e-mail) keeps its own direction */
[lang="en"], .site-nav [hreflang="en"] { unicode-bidi: isolate; }

/* Form */
.form__title { margin: 0 0 .4rem; font-size: 1.4rem; }
.form input[type="tel"], .form input[type="email"] { text-align: right; }
.form input[dir="ltr"]::placeholder { text-align: right; }

/* Footer links separated by a bar (kept out of the text so right-to-left ordering stays correct) */
.footer-legal span:last-child { display: flex; flex-wrap: wrap; gap: .4rem .6rem; }
.footer-legal span:last-child a + a::before { content: "|"; display: inline-block; margin-inline-end: .6rem; }

/* Notes under a call-to-action button */
.cta-note { margin: .25rem 0 0; text-align: center; font-size: 1rem; color: var(--muted); }

.figure--large { width: min(31%, 295px); aspect-ratio: 250 / 336; }
@media (max-width: 800px) { .figure--large { width: auto; max-width: 420px; aspect-ratio: auto; } }
/* 18. Landing-page contact section */
.landing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.landing__form .form { margin-top: 1.2rem; }
.form__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.landing .btn--ghost { background: transparent; color: var(--brand); border: 2px solid var(--brand); }
.contact-more { list-style: none; display: grid; gap: 14px; margin-top: 1rem; }
.contact-more li { font-size: 1.05rem; }
@media (max-width: 800px) { .landing__grid { grid-template-columns: 1fr; gap: 32px; } }