/* =========================================================
   WEB DESIGN & REDESIGN — page-scoped styles
   Loads only on /web-design.html (body.page-webdesign).
   Inherits tokens from style-v2.css (:root). Nothing global
   is overridden here — every selector is prefixed .wd-* or
   scoped under body.page-webdesign.
   ---------------------------------------------------------
   01) PAGE TOKENS
   02) PRIMITIVES (section / eyebrow / headings / panels)
   03) BUTTONS + FOCUS
   04) HERO
   05) BENEFITS
   06) SELECTED WORK
   07) PRICING
   08) NEW vs REDESIGN
   09) PROCESS
   10) SCOPE (included / extra)
   11) FAQ
   12) CONTACT + FORM
   13) MOTION / REDUCED MOTION
   ========================================================= */


/* =========================
   01) PAGE TOKENS
   ========================= */

body.page-webdesign{
  /* warm accent taken from the existing pill/active styling — no new palette */
  --wd-accent: rgb(232, 197, 152);
  --wd-accent-line: rgba(255, 210, 160, .42);
  --wd-accent-dim: rgba(255, 210, 160, .16);

  --wd-surface: rgba(255,255,255,.045);
  --wd-surface-strong: rgba(14,11,11,.58);
  --wd-line: var(--line);

  --wd-gap: clamp(14px, 2vw, 20px);
  --wd-section-y: clamp(46px, 7vw, 88px);

  overflow-x: hidden; /* belt-and-braces against long Slovak words */
}

/* This page is far taller than the other subpages, so the shared
   bg-city.webp gets stretched and its bright band would sit right under
   the pricing and process cards. The veil below is fixed to the viewport,
   so contrast stays identical at every scroll position. Page-scoped only —
   every other page keeps the lighter global overlay. */
body.page-webdesign::before{
  background:
    radial-gradient(900px 520px at 18% 6%, rgba(210,170,120,.14), transparent 62%),
    linear-gradient(180deg,
      rgba(15,11,11,.74) 0%,
      rgba(15,11,11,.86) 42%,
      rgba(15,11,11,.93) 100%) !important;
}

@media (min-width: 821px){
  body.page-webdesign{
    background-attachment: fixed;
    background-position: center center;
  }
}


/* =========================
   02) PRIMITIVES
   ========================= */

.wd-section{
  padding: var(--wd-section-y) 0;
}

/* first section has to clear the fixed desktop nav */
.wd-hero{
  padding-top: clamp(104px, 11vw, 150px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
@media (max-width: 820px){
  .wd-hero{ padding-top: clamp(28px, 6vw, 44px); } /* nav is sticky, not fixed */
}

.wd-eyebrow{
  color: var(--wd-accent);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 14px;
}

.wd-h2{
  font-family: var(--font-title);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 600;
  margin: 0 0 12px;
}

.wd-h3{
  font-family: var(--font-title);
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 8px;
}

.wd-lead{
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 62ch;
}

.wd-note{
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  opacity: .85;
  margin: 0;
}

.wd-panel{
  border: 1px solid var(--wd-line);
  background: var(--wd-surface);
  border-radius: var(--radius-card);
  padding: clamp(18px, 2.4vw, 26px);
}

.wd-sep{
  border: 0;
  border-top: 1px solid var(--wd-line);
  margin: 0;
  opacity: .8;
}

/* generic list used in several sections */
.wd-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.wd-list li{
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.wd-list li::before{
  content: "";
  position: absolute;
  left: 6px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wd-accent);
  opacity: .75;
}


/* =========================
   03) BUTTONS + FOCUS
   ========================= */

/* .btn / .btn.primary come from style-v2.css — only sizing + a warm
   variant are added here so the page stays inside the design system. */
body.page-webdesign .btn{
  min-height: 46px;          /* tap target */
  padding: 12px 20px;
  font-size: 15px;
}

body.page-webdesign .btn.wd-btn-accent{
  border-color: var(--wd-accent-line);
  background: rgba(70, 40, 25, .42);
  color: #fff;
}

body.page-webdesign .btn.wd-btn-accent:hover{
  border-color: rgba(255, 210, 160, .62);
  background: rgba(84, 49, 30, .55);
}

.wd-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

@media (max-width: 380px){
  .wd-cta-row .btn{ width: 100%; }
}

/* visible keyboard focus everywhere on this page */
body.page-webdesign a:focus-visible,
body.page-webdesign button:focus-visible,
body.page-webdesign summary:focus-visible,
body.page-webdesign input:focus-visible,
body.page-webdesign select:focus-visible,
body.page-webdesign textarea:focus-visible{
  outline: 2px solid var(--wd-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* skip link */
.wd-skip{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: #100c0c;
  border: 1px solid var(--wd-accent-line);
  border-radius: 0 0 12px 0;
}
.wd-skip:focus{
  left: 0;
}


/* =========================
   04) HERO
   ========================= */

.wd-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
}

@media (max-width: 940px){
  .wd-hero-grid{ grid-template-columns: 1fr; }
}

.wd-hero h1{
  font-family: var(--font-title);
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 600;
  margin: 0 0 16px;
  text-wrap: balance;
}

.wd-hero-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
}

.wd-hero-meta span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wd-hero-meta span::before{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wd-accent);
  opacity: .7;
  flex: 0 0 auto;
}

/* hero project composition — real screenshots, no browser chrome */
.wd-hero-visual{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 560px){
  .wd-hero-visual{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .wd-hero-visual .wd-figure:nth-child(2){
    margin-top: clamp(22px, 4vw, 46px);
  }
}

.wd-figure{
  margin: 0;
  border: 1px solid var(--wd-line);
  border-radius: var(--radius-soft);
  overflow: hidden;
  background: rgba(0,0,0,.35);
  box-shadow: var(--shadow);
}

.wd-figure img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top center;
}

.wd-figure figcaption{
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--wd-line);
  background: rgba(0,0,0,.28);
}


/* =========================
   05) BENEFITS
   ========================= */

.wd-benefits{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wd-gap);
  margin-top: 28px;
}

@media (max-width: 900px){
  .wd-benefits{ grid-template-columns: 1fr; }
}

.wd-benefit .wd-benefit-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--wd-accent-line);
  background: var(--wd-accent-dim);
  color: var(--wd-accent);
  font-size: 14px;
  margin-bottom: 14px;
}

.wd-benefit p{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}


/* =========================
   06) SELECTED WORK
   ========================= */

.wd-work{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wd-gap);
  margin-top: 28px;
}

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

.wd-work-card{
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--wd-line);
  background: var(--wd-surface);
  border-radius: var(--radius-card);
  padding: 16px;
}

/* Desktop shot + phone shot. The cards go full width below 1000px, so the
   phone grows with them; under 560px the two stack instead, which keeps the
   desktop screenshot legible rather than squeezing both into one row. */
.wd-work-media{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 10px;
  align-items: start;
}

@media (max-width: 1000px){
  .wd-work-media{ grid-template-columns: minmax(0, 1fr) 150px; }
}

@media (max-width: 560px){
  .wd-work-media{
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .wd-work-media .wd-shot-mob{ width: 116px; }
}

.wd-work-media img{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--wd-line);
  border-radius: 12px;
  background: rgba(0,0,0,.35);
}

.wd-work-media .wd-shot-desk{
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top center;
}

.wd-work-media .wd-shot-mob{
  aspect-ratio: 1 / 2;
  object-fit: cover;
  object-position: top center;
}

.wd-work-cat{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wd-accent);
  margin: 0 0 6px;
}

.wd-work-card p{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.wd-work-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.wd-work-foot{
  margin-top: auto;
  padding-top: 6px;
}

.wd-ext{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--wd-accent);
  border-bottom: 1px solid var(--wd-accent-dim);
  font-size: 15px;
}

.wd-ext:hover,
.wd-ext:focus-visible{
  border-bottom-color: var(--wd-accent-line);
}

.wd-ext svg{
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* third card = honest CTA card, never a fake case study */
.wd-work-card.is-cta{
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  border-style: dashed;
  border-color: var(--wd-accent-dim);
  background: rgba(255,255,255,.028);
}


/* =========================
   07) PRICING
   ========================= */

.wd-pricing{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wd-gap);
  margin-top: 30px;
  align-items: stretch;
}

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

.wd-price-card{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wd-line);
  background: var(--wd-surface-strong);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 28px);
}

.wd-price-card.is-recommended{
  border-color: var(--wd-accent-line);
  background: rgba(30, 21, 16, .62);
}

/* fixed-height head so the three prices stay on the same baseline
   whether or not the card carries the "recommended" badge */
.wd-price-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 62px;
  margin-bottom: 12px;
}

.wd-price-name{
  font-family: var(--font-title);
  font-size: 19px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

.wd-price-flag{
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wd-accent);
  border: 1px solid var(--wd-accent-line);
  background: var(--wd-accent-dim);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

.wd-price-value{
  font-family: var(--font-title);
  font-size: clamp(28px, 3.6vw, 34px);
  line-height: 1.1;
  margin: 0 0 12px;
}

.wd-price-value small{
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.wd-price-desc{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.wd-price-card .wd-list{
  margin-bottom: 22px;
}

.wd-price-card .wd-list li{
  font-size: 15px;
}

.wd-price-card .btn{
  margin-top: auto;
  width: 100%;
  text-align: center;
}

.wd-price-note{
  margin-top: 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}


/* =========================
   08) NEW vs REDESIGN
   ========================= */

.wd-compare{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wd-gap);
  margin-top: 28px;
}

@media (max-width: 820px){
  .wd-compare{ grid-template-columns: 1fr; }
}

.wd-compare-panel{
  border: 1px solid var(--wd-line);
  background: var(--wd-surface);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 28px);
}

.wd-compare-panel.is-redesign{
  border-color: var(--wd-accent-dim);
  background: rgba(30, 21, 16, .40);
}

.wd-compare-panel .wd-h3{
  margin-bottom: 14px;
}


/* =========================
   09) PROCESS
   ========================= */

.wd-process{
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: wdstep;
}

@media (min-width: 900px){
  .wd-process{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
}

.wd-step{
  counter-increment: wdstep;
  position: relative;
  border: 1px solid var(--wd-line);
  background: var(--wd-surface);
  border-radius: var(--radius-soft);
  padding: 18px 18px 20px;
}

.wd-step::before{
  content: counter(wdstep, decimal-leading-zero);
  display: block;
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--wd-accent);
  margin-bottom: 10px;
}

.wd-step h3{
  font-family: var(--font-title);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 6px;
}

.wd-step p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* thin connecting rule on wide screens only */
@media (min-width: 900px){
  .wd-step:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 30px;
    right: -14px;
    width: 14px;
    height: 1px;
    background: var(--wd-accent-dim);
  }
}


/* =========================
   10) SCOPE (included / extra)
   ========================= */

.wd-scope{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wd-gap);
  margin-top: 28px;
}

@media (max-width: 820px){
  .wd-scope{ grid-template-columns: 1fr; }
}


/* =========================
   11) FAQ
   ========================= */

.wd-faq{
  margin-top: 28px;
  border: 1px solid var(--wd-line);
  border-radius: var(--radius-card);
  background: var(--wd-surface);
  overflow: hidden;
}

.wd-faq details + details{
  border-top: 1px solid var(--wd-line);
}

.wd-faq summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 18px clamp(16px, 2vw, 24px);
  min-height: 56px;

  font-family: var(--font-title);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.4;
  color: var(--text);
}

.wd-faq summary::-webkit-details-marker{ display: none; }

.wd-faq summary::after{
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--wd-accent);
  border-bottom: 1.5px solid var(--wd-accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}

.wd-faq details[open] summary::after{
  transform: rotate(225deg) translate(-2px, -2px);
}

.wd-faq summary:hover{
  background: rgba(255,255,255,.03);
}

.wd-faq-body{
  padding: 0 clamp(16px, 2vw, 24px) 20px;
}

.wd-faq-body p{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 72ch;
}


/* =========================
   12) CONTACT + FORM
   ========================= */

.wd-contact-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: 28px;
  align-items: start;
}

@media (max-width: 900px){
  .wd-contact-grid{ grid-template-columns: 1fr; }
}

.wd-audit{
  margin-top: 22px;
  border: 1px solid var(--wd-accent-dim);
  background: rgba(30, 21, 16, .42);
  border-radius: var(--radius-card);
  padding: 20px;
}

.wd-audit p{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.wd-direct{
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.wd-direct a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--muted);
  font-size: 15px;
}

.wd-direct a:hover{ color: var(--text); }

.wd-direct svg{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--wd-accent);
}

/* --- form --- */

.wd-form{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
}

@media (max-width: 620px){
  .wd-form{ grid-template-columns: 1fr; }
}

.wd-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wd-field.is-wide{ grid-column: 1 / -1; }

.wd-field label{
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--text);
}

.wd-field label .wd-opt{
  color: var(--muted);
  font-size: 13px;
}

/* reuse .input / .textarea look from style-v2.css, only sizing here */
body.page-webdesign .wd-form .input,
body.page-webdesign .wd-form .textarea{
  width: 100%;
  min-height: 46px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
}

body.page-webdesign .wd-form .textarea{
  min-height: 132px;
  resize: vertical;
}

/* Selects: same chevron treatment as the contact page, but scoped to
   .wd-form (the global rules only target .form). */
body.page-webdesign .wd-form select.input{
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(0,0,0,.32);
  padding-right: 44px;
  cursor: pointer;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

body.page-webdesign .wd-form select.input option{
  color: #111;
  background-color: #fff;
}

body.page-webdesign .wd-form .input[aria-invalid="true"],
body.page-webdesign .wd-form .textarea[aria-invalid="true"]{
  border-color: rgba(255, 138, 128, .75);
}

.wd-error{
  display: none;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgb(255, 160, 150);
}

.wd-error.is-shown{ display: block; }

.wd-consent{
  grid-column: 1 / -1;
}

.wd-consent label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.wd-consent input[type="checkbox"]{
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: rgb(150, 96, 55);
}

.wd-consent a{
  color: var(--wd-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* visually hidden (honeypot wrapper + "opens in a new window" hints) */
.wd-hp{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wd-actions{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}

.wd-actions .btn{
  min-width: 210px;
}

@media (max-width: 380px){
  .wd-actions .btn{ min-width: 0; width: 100%; }
}

.wd-actions .wd-note{ flex: 1 1 200px; }

.wd-spinner{
  width: 15px;
  height: 15px;
  margin-right: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28);
  border-top-color: var(--wd-accent);
  animation: wd-spin .7s linear infinite;
}

@keyframes wd-spin{ to { transform: rotate(360deg); } }

button[aria-busy="true"]{ cursor: progress; }

/* form status panels */
.wd-formmsg{
  grid-column: 1 / -1;
  border-radius: var(--radius-soft);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.6;
}

.wd-formmsg.is-fail{
  border: 1px solid rgba(255, 138, 128, .45);
  background: rgba(70, 22, 18, .35);
  color: rgb(255, 196, 190);
}

.wd-success{
  border: 1px solid var(--wd-accent-line);
  background: rgba(30, 21, 16, .55);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 28px);
}

.wd-success p{
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.wd-success .wd-sign{
  font-style: italic;
  opacity: .8;
  margin: 12px 0 0;
}

[hidden]{ display: none !important; }


/* =========================
   13) MOTION / REDUCED MOTION
   ========================= */

/* .wd-js is set by web-design.js — with JS off nothing is ever hidden */
.wd-js .wd-reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}

.wd-js .wd-reveal.is-in{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .wd-js .wd-reveal,
  .wd-js .wd-reveal.is-in{
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.page-webdesign *,
  body.page-webdesign *::before,
  body.page-webdesign *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  /* style-v2.css sets scroll-behavior on <html>, which no body-scoped
     selector can reach. .wd-js is added to <html> by web-design.js, so
     this stays limited to this page. */
  html.wd-js{
    scroll-behavior: auto !important;
  }
}