/* ============================================================================
   BINERET STUDIO — THE /services/ LANDING PAGE
   ----------------------------------------------------------------------------
   Printed after packages.css on the services archive only (see
   bineret_services_page_css() in inc/services.php).

   The page follows the home page's box system: below the hero, every section
   is one panel of the same width, surface and padding, so the column the eye
   follows never changes width. Inside the panels:

     · one heading scale — h1 hero, h2 panel titles, h3/h4 cards — all in the
       display face, so "SEO" and "Packages" are the same size of thing;
     · space on 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48;
     · primary objects (services, packages) keep the shared glass card;
       supporting tiles (factors, steps, questions) are flat, so the page has
       an order of importance you can see;
     · two action styles only: the CTA and `.svx-btn-line`, both 44px+;
     · tokens only, so both colour modes come from the same declarations.

   Everything is `svx-*` or scoped under `.svx-box`: the single-service page,
   the discipline archive and /work/ share packages.css and must not move.
   ========================================================================== */

/* — rhythm ——————————————————————————————————————————————————————————————— */
/* Body class + class: packages.css sets `.post-type-archive-bnrt_service .lav-sec`. */
.post-type-archive-bnrt_service .svx-sec{ padding-block:8px; }
.post-type-archive-bnrt_service .svx-sec--last{ padding-block-end:clamp(32px, 4vw, 56px); }
.post-type-archive-bnrt_service .svx-hero{ padding-block:clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); }

/* — the panel ———————————————————————————————————————————————————————————— */
.svx-box{
  --box-pad:32px;
  position:relative;
  padding:var(--box-pad);
  border-radius:22px;
  border:1px solid var(--glass-line);
  background-color:var(--glass-fill-strong);
  background-image:var(--glass-sheen);
  box-shadow:var(--glass-rim), var(--glass-cast);
}

/* — shared type ————————————————————————————————————————————————————————— */
/* The display face's word space is narrow, and the site-wide tight tracking
   took the rest: "Packages, and what they cost" set as one word. Every
   display-face line on this page gets the same small correction. */
.svx-hero__title,
.svx-h2,
.svx-index__name,
.svx-cards .svc-card__title,
.svx-box .pkg__name,
.pkg-panel__title{ letter-spacing:-0.01em; word-spacing:0.1em; }

.svx-head{ margin-block-end:24px; }
.svx-h2{ margin:0; font-family:var(--lav-font-display); font-weight:600;
  font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height:1.15;
  color:var(--lav-text-primary); text-wrap:balance; }
.svx-lead{ margin:8px 0 0; max-inline-size:62ch; font-size:1rem; line-height:1.6;
  color:var(--lav-text-secondary); }
.svx-more{ display:inline-flex; align-items:center; gap:6px; min-block-size:40px; margin-block-start:8px;
  font-size:0.875rem; font-weight:600; color:var(--lav-cta); text-decoration:none; }
.svx-go{ inline-size:16px; block-size:16px; flex:0 0 auto;
  transition:transform var(--lav-dur-fast, .16s) var(--lav-ease, ease); }
.svx-more:hover .svx-go{ transform:translateX(3px); }

.svx-ic{ flex:0 0 auto; display:grid; place-items:center; inline-size:40px; block-size:40px;
  border-radius:12px; border:1px solid var(--glass-line); background:var(--surf-1); color:var(--lav-cta); }
.svx-ic svg{ inline-size:20px; block-size:20px; }
.svx-ic--lg{ inline-size:48px; block-size:48px; border-radius:14px; }
.svx-ic--lg svg{ inline-size:22px; block-size:22px; }

/* The one secondary action. `.lav-btn--glass` read as an empty input field. */
.svx-btn-line{ background:transparent; color:var(--lav-text-primary); font-weight:600;
  box-shadow:inset 0 0 0 1px var(--glass-line-strong); }
.svx-btn-line:hover{ color:var(--lav-text-primary); box-shadow:inset 0 0 0 1px var(--lav-cta); }

/* — hero ————————————————————————————————————————————————————————————————— */
.svx-hero__grid{ display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
  gap:clamp(24px, 4vw, 56px); align-items:center; }
.svx-eyebrow{ display:inline-block; margin:0 0 12px; font-size:0.8125rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; }
.svx-hero__title{ margin:0; max-inline-size:15ch; font-family:var(--lav-font-display); font-weight:600;
  font-size:clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height:1.06;
  color:var(--lav-text-primary); text-wrap:balance; }
.svx-hero__intro{ margin:16px 0 0; max-inline-size:56ch; font-size:clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height:1.6; color:var(--lav-text-secondary); }
.svx-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-block-start:24px; }
.svx-hero__actions .lav-btn{ min-block-size:48px; padding-inline:24px; font-size:0.9375rem; }
/* Columns as wide as their longest line, so no commitment wraps one word onto a second line. */
.svx-promise{ list-style:none; margin:24px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0, max-content)); gap:10px 32px; }
.svx-promise li{ display:flex; align-items:flex-start; gap:8px;
  font-size:0.875rem; line-height:1.45; color:var(--lav-text-secondary); }
.svx-promise__ic{ inline-size:18px; block-size:18px; flex:0 0 auto; margin-block-start:1px; color:var(--lav-cta); }

/* At a glance */
.svx-index{ padding:24px; border-radius:22px; border:1px solid var(--glass-line);
  background-color:var(--glass-fill-strong); background-image:var(--glass-sheen);
  box-shadow:var(--glass-rim), var(--glass-cast); }
.svx-index__k{ margin:0 0 4px; font-family:inherit; font-size:0.75rem; font-weight:700; line-height:1.4;
  letter-spacing:.08em; text-transform:uppercase; color:var(--lav-text-tertiary); }
.svx-index__list{ list-style:none; margin:0; padding:0; }
.svx-index__list li + li{ border-block-start:1px solid var(--glass-line); }
.svx-index__row{ display:grid; grid-template-columns:40px minmax(0, 1fr) auto 16px; align-items:center;
  gap:12px; min-block-size:64px; padding-block:12px; color:inherit; text-decoration:none; }
.svx-index__txt{ min-inline-size:0; }
.svx-index__name{ display:block; font-family:var(--lav-font-display); font-weight:600; font-size:1.0625rem;
  line-height:1.25; color:var(--lav-text-primary);
  transition:color var(--lav-dur-fast, .16s) var(--lav-ease, ease); }
.svx-index__meta{ display:block; margin-block-start:2px; font-size:0.8125rem; color:var(--lav-text-tertiary); }
.svx-index__price{ font-size:0.875rem; font-weight:600; color:var(--lav-text-primary); white-space:nowrap; }
.svx-index__row .svx-go{ color:var(--lav-text-tertiary); }
.svx-index__row:hover .svx-index__name,
.svx-index__row:hover .svx-go{ color:var(--lav-cta); }
.svx-index__row:hover .svx-go{ transform:translateX(3px); }
.svx-index__stats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;
  margin:8px 0 0; padding-block-start:16px; border-block-start:1px solid var(--glass-line); }
.svx-index__stats div{ display:flex; flex-direction:column-reverse; align-items:center; gap:2px; }
.svx-index__stats dt{ font-size:0.75rem; color:var(--lav-text-tertiary); }
.svx-index__stats dd{ margin:0; font-family:var(--lav-font-display); font-weight:600; font-size:1.5rem;
  line-height:1.1; color:var(--lav-text-primary); font-variant-numeric:tabular-nums; }

/* — a discipline: header beside its cards ———————————————————————————————— */
.svx-group{ display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:32px; align-items:start; }
.svx-group__head{ position:sticky; top:96px; }
.svx-group__head .svx-ic{ margin-block-end:16px; }

.svx-cards{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.svx-cards .svc-card{ gap:8px; padding:20px; border-radius:16px; }
.svx-cards .svc-card__title a::after{ border-radius:16px; }
.svx-cards .svc-card__glyph{ display:grid; place-items:center; inline-size:36px; block-size:36px;
  margin-block-end:4px; border-radius:10px; color:var(--lav-cta);
  background:color-mix(in srgb, var(--lav-cta) 10%, transparent); }
.svx-cards .svc-card__glyph svg{ inline-size:18px; block-size:18px; }
.svx-cards .svc-card__title{ font-size:1.0625rem; line-height:1.3; }
.svx-cards .svc-card__desc{ max-inline-size:none; margin-block-end:8px; font-size:0.875rem; line-height:1.55;
  color:var(--lav-text-secondary); }
.svx-cards .svc-card__foot{ align-items:center; flex-wrap:wrap; gap:4px 16px; margin-block-start:auto;
  padding-block-start:12px; border-block-start:1px solid var(--glass-line); }
.svx-cards .svc-card__price{ font-size:0.9375rem; font-weight:700; color:var(--lav-text-primary); }
.svx-cards .svc-card__time{ display:inline-flex; align-items:center; gap:6px;
  font-size:0.8125rem; color:var(--lav-text-tertiary); }
.svx-cards .svc-card__time svg{ inline-size:14px; block-size:14px; flex:0 0 auto; }
.svx-cards .svc-card__foot .svx-go{ margin-inline-start:auto; inline-size:18px; block-size:18px; color:var(--lav-text-tertiary); }
.svx-cards .svc-card:hover .svx-go{ color:var(--lav-cta); transform:translateX(3px); }
/* — pricing ——————————————————————————————————————————————————————————————— */
.svx-head--row{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px 32px; }
.svx-head--row .svx-head__text{ flex:1 1 30rem; min-inline-size:0; }
.svx-box .segbar{ flex:0 0 auto; margin:0; max-inline-size:100%; }

.pkg-panel__head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 16px; margin-block-end:24px; }
.pkg-panel__title{ margin:0; font-family:var(--lav-font-display); font-weight:600; font-size:1.25rem;
  line-height:1.25; color:var(--lav-text-primary); }
.pkg-panel__lede{ margin:0; max-inline-size:78ch; font-size:0.875rem; line-height:1.6; color:var(--lav-text-tertiary); }
/* Once the tabs work, the selected tab already names the panel. */
.svx-head:has(.segbar.is-ready) ~ .segpanel .pkg-panel__title{
  position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* Without the script all three panels stack and need a gap; with it, the one
   shown after a hidden sibling must not inherit that gap. */
.pkg-panel + .pkg-panel{ margin-block-start:32px; }
.svx-box .segpanel[hidden] + .pkg-panel{ margin-block-start:0; }

.svx-box .pkg{ padding:24px; border-radius:16px; }
.svx-box .pkg__figure{ display:flex; align-items:baseline; flex-wrap:wrap; column-gap:6px; margin:4px 0 0; }
.price__from{ font-size:0.875rem; font-weight:500; color:var(--lav-text-tertiary); }
.price__unit{ margin-inline-start:-4px; font-size:0.9375rem; font-weight:600; color:var(--lav-text-secondary); }
.svx-box .pkg__figure .price__amount{ font-family:var(--lav-font-display); font-weight:600;
  font-size:clamp(1.75rem, 1.5rem + .8vw, 2.25rem); line-height:1.05;
  letter-spacing:var(--lav-track-tight); color:var(--lav-text-primary); }
.svx-box .pkg__figure .price__amount--text{ font-size:1.5rem; }
.svx-box .pkg__list{ margin-block-end:24px; }
.svx-box .pkg__list li{ color:var(--lav-text-secondary); }
/* packages.css put `padding-block-start:16px` on the button itself, which pushed
   its label 8px below centre; the spacing belongs to the list above it. */
.svx-box .pkg__cta{ min-block-size:44px; margin-block-start:auto; padding-block:0; font-size:0.9375rem; }
.svx-box .pkg-note{ margin:24px 0 0; max-inline-size:none; font-size:0.8125rem; }

/* — add-ons & terms: heading beside the list ——————————————————————————————— */
.svx-split{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.75fr); gap:24px 48px; align-items:start; }
.svx-split__head{ position:sticky; top:96px; margin:0; }

.svx-box .pkg-addons{ border-block-start:0; }
.svx-box .pkg-addon{ align-items:center; flex-wrap:nowrap; gap:8px 24px; padding-block:16px;
  border-block-end:1px solid var(--glass-line); }
.svx-box .pkg-addon:first-child{ padding-block-start:0; }
.svx-box .pkg-addon:last-child{ padding-block-end:0; border-block-end:0; }
.svx-box .pkg-addon__name{ font-size:1rem; }
.svx-box .pkg-addon__note{ font-size:0.875rem; color:var(--lav-text-secondary); }
.svx-box .pkg-addon__price{ display:flex; align-items:baseline; gap:6px; font-family:inherit; font-size:1rem; }
.svx-box .pkg-addon__price .price__amount{ font-family:var(--lav-font-display); font-weight:600;
  font-size:1.25rem; color:var(--lav-text-primary); }

/* — tiles: what changes the number, and the steps ——————————————————————————— */
.svx-tile{ display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:16px;
  border:1px solid var(--glass-line); background:var(--surf-1); }
.svx-tile__n{ font-family:var(--lav-font-display); font-weight:600; font-size:0.875rem;
  color:var(--lav-cta); font-variant-numeric:tabular-nums; }
.svx-tile__t{ margin:0; font-size:1rem; font-weight:600; line-height:1.35; color:var(--lav-text-primary); }
.svx-tile__d{ margin:0; font-size:0.875rem; line-height:1.6; color:var(--lav-text-secondary); }

.svx-factors{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.svx-factors__list{ display:contents; list-style:none; margin:0; padding:0; }
.svx-tile--cta{ justify-content:center;
  border-color:color-mix(in srgb, var(--lav-cta) 32%, transparent);
  background:color-mix(in srgb, var(--lav-cta) 7%, transparent); }
.svx-tile--cta .svx-more{ margin-block-start:0; align-self:flex-start; }

.svx-steps{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.svx-step__n{ display:grid; place-items:center; inline-size:32px; block-size:32px; margin-block-end:4px;
  border-radius:999px; background:var(--lav-cta); color:var(--lav-cta-ink);
  font-size:0.875rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* — terms ————————————————————————————————————————————————————————————————— */
.svx-faq{ max-inline-size:none; margin:0; gap:8px; }
.svx-faq .lav-faq__item{ border-radius:14px; border:1px solid var(--glass-line); background:var(--surf-1);
  transition:border-color var(--lav-dur-fast, .16s) var(--lav-ease, ease); }
.svx-faq .lav-faq__item[open]{ border-color:var(--glass-line-strong); }
.svx-faq .lav-faq__q{ min-block-size:56px; padding:14px 18px; font-size:1rem; font-weight:600;
  line-height:1.4; color:var(--lav-text-primary); }
.svx-faq .lav-faq__q:hover{ color:var(--lav-cta); }
.svx-faq .lav-faq__q:focus-visible{ outline:2px solid var(--lav-cta); outline-offset:-2px; border-radius:14px; }
.svx-faq .lav-faq__chevron{ inline-size:18px; block-size:18px; color:var(--lav-text-tertiary); }
.svx-faq .lav-faq__a{ max-inline-size:68ch; padding:0 18px 16px; font-size:0.9375rem; line-height:1.65;
  color:var(--lav-text-secondary); }

/* — the call ——————————————————————————————————————————————————————————————— */
.svx-cta{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:24px 48px;
  align-items:center; overflow:hidden; }
.svx-cta::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(70% 140% at 100% 0%, color-mix(in srgb, var(--lav-cta) 16%, transparent), transparent 62%); }
.svx-cta > *{ position:relative; }
.svx-cta .svx-h2{ max-inline-size:22ch; }
.svx-cta__actions{ justify-self:end; inline-size:min(100%, 320px);
  display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.svx-cta__actions .lav-btn{ min-block-size:48px; font-size:0.9375rem; }
.svx-cta__note{ margin:0; text-align:center; font-size:0.8125rem; line-height:1.5; color:var(--lav-text-tertiary); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .svx-hero__grid{ grid-template-columns:minmax(0, 1fr); }
  .svx-index{ max-inline-size:560px; }
  .svx-group,
  .svx-split{ grid-template-columns:minmax(0, 1fr); gap:24px; }
  .svx-group__head,
  .svx-split__head{ position:static; }
  /* Icon beside the title on one row; the sentence and the link run full width
     under both, so nothing floats in a column of its own. */
  .svx-group__head{ display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:12px; align-items:center; }
  .svx-group__head .svx-ic{ grid-row:1; margin:0; }
  .svx-group__head .svx-lead,
  .svx-group__head .svx-more{ grid-column:1 / -1; }
  .svx-group__head .svx-lead{ margin-block-start:12px; }
  .svx-group__head .svx-more{ margin-block-start:4px; }
  .svx-factors{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .svx-steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .svx-cta{ grid-template-columns:minmax(0, 1fr); }
  .svx-cta__actions{ justify-self:start; }
}

@media (max-width:767.98px){
  .post-type-archive-bnrt_service .svx-sec > .lav-wrap,
  .post-type-archive-bnrt_service .svx-hero > .lav-wrap{ padding-inline:16px; }
  .svx-box{ --box-pad:20px; border-radius:18px; }
  .svx-head{ margin-block-end:20px; }
  .svx-cards,
  .svx-factors,
  .svx-steps{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .svx-promise{ grid-template-columns:minmax(0, 1fr); gap:8px; }
  .svx-hero__actions .lav-btn{ flex:1 1 100%; }
  .svx-index{ padding:16px 20px; }
  .svx-index__row{ grid-template-columns:40px minmax(0, 1fr) auto; }
  .svx-index__row .svx-go{ display:none; }
  .svx-head--row{ align-items:stretch; }
  /* Three tabs fit a phone once they share the width and drop their icons;
     before this "Development" was cut off at the right edge. */
  .svx-box .segbar{ inline-size:100%; }
  .svx-box .seg{ flex:1 1 auto; justify-content:center; padding-inline:10px; }
  .svx-box .seg svg{ display:none; }
  .svx-cards .svc-card__foot .svx-go{ display:none; }
  .svx-box .pkg{ padding:20px; }
  .svx-box .pkg-grid{ row-gap:28px; }
  /* Name and price on one row, the note under both (packages.css moved the
     price above the name at this width). */
  .svx-box .pkg-addon{ display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:16px; align-items:baseline; }
  .svx-box .pkg-addon__text{ display:contents; }
  .svx-box .pkg-addon__name{ grid-column:1; grid-row:1; }
  .svx-box .pkg-addon__price{ grid-column:2; grid-row:1; order:0; }
  .svx-box .pkg-addon__note{ grid-column:1 / -1; grid-row:2; }
  .svx-cta__actions{ inline-size:100%; }
  .svx-faq .lav-faq__q{ padding-inline:16px; }
  .svx-faq .lav-faq__a{ padding-inline:16px; }
}

@media (prefers-reduced-motion:reduce){
  .svx-go, .svx-index__name, .svx-faq .lav-faq__item{ transition:none; }
  .svx-more:hover .svx-go, .svx-index__row:hover .svx-go, .svx-cards .svc-card:hover .svx-go{ transform:none; }
}