/* dsk-landing theme.css
   Loaded AFTER the landing style.css. Only WordPress-glue styling:
   (1) the primary WP menu ".lp-nav"  (2) ".dsk-prose" Elementor neutraliser
   (3) ".hero-solid" (video-less hero)  (4) ".svc a" link-card.
   All colours/type come from the landing CSS custom properties. */

/* ==========================================================================
   1) PRIMARY NAV  —  <button id="navToggle" class="nav-toggle">
                      <nav id="siteNav" class="lp-nav"><ul class="lp-menu">…</ul></nav>
   Desktop: horizontal list, ink bar text, brass hover, hover/focus dropdowns.
   Mobile (<=900px): the landing's own main.js (#navToggle -> #siteNav.open)
   drives an off-canvas panel — mirrors the landing .site-nav/.site-nav.open
   behaviour exactly, just retargeted at #siteNav.lp-nav.
   ========================================================================== */
.lp-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.8rem);
}
.lp-menu li { position: relative; margin: 0; }

.lp-menu a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--ff-body);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-inv);
  opacity: .85;
  padding-block: .3rem;
  transition: opacity .25s var(--ease-out), color .25s var(--ease-out);
}
.lp-menu a:hover,
.lp-menu a:focus-visible { opacity: 1; }

.lp-menu .current-menu-item > a,
.lp-menu .current-menu-ancestor > a,
.lp-menu .current_page_item > a {
  opacity: 1;
  color: var(--brass-2);
}

/* caret for items that carry a sub-menu */
.lp-menu .menu-item-has-children > a::after {
  content: '';
  width: .5em;
  height: .5em;
  margin-left: .1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease-out);
  opacity: .8;
}
.lp-menu .menu-item-has-children:hover > a::after,
.lp-menu .menu-item-has-children:focus-within > a::after {
  transform: translateY(0) rotate(225deg);
}

/* ---- dropdown sub-menu (desktop: hover/focus popover) ---- */
.lp-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: .5rem;
  position: absolute;
  top: calc(100% + .9rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 258px;
  background: rgba(17, 17, 18, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  z-index: 60;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
}
.lp-menu .menu-item-has-children:hover > .sub-menu,
.lp-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.lp-menu .sub-menu li { width: 100%; }
.lp-menu .sub-menu a {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-inv);
  opacity: .85;
  padding: .55rem .8rem;
  border-radius: 8px;
}
.lp-menu .sub-menu a:hover,
.lp-menu .sub-menu a:focus-visible {
  opacity: 1;
  background: rgba(214, 184, 121, .1);
  color: var(--brass-2);
}

/* ---- mobile: #siteNav is a hidden off-canvas panel until main.js adds
   .open (triggered by #navToggle, exactly like the landing's #siteNav) --- */
@media (max-width: 900px) {
  .lp-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--line-dark);
    padding: var(--space-3) var(--space-5) var(--space-5);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    z-index: 90;
  }
  .lp-nav.open { display: block; }
  .lp-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .lp-menu > li { border-bottom: 1px solid var(--line-dark); }
  .lp-menu a { justify-content: space-between; padding-block: .8rem; width: 100%; }

  /* Neutralise the desktop hover/focus-within popover positioning (it has
     higher specificity than a plain `.lp-menu .sub-menu` reset and would
     otherwise keep firing here on tap-focus) — match those exact selectors
     so this mobile override wins regardless of source order. */
  .lp-menu .sub-menu,
  .lp-menu .menu-item-has-children:hover > .sub-menu,
  .lp-menu .menu-item-has-children:focus-within > .sub-menu {
    position: static;
    left: auto;
    transform: none;
    min-width: 0;
    padding: 0 0 .4rem .8rem;
    background: transparent;
    border: 0;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .lp-menu .menu-item-has-children:focus-within .sub-menu,
  .lp-menu .menu-item-has-children.dsk-open .sub-menu { display: block; }
}

/* ==========================================================================
   2) .hero-solid  —  video-less internal-page hero
   dsk_hero() outputs class "hero3 lp-hero hero-solid" (no <video>, no .ov).
   .hero3 already sets colour/layout; here we supply the dark ink gradient
   backdrop the .ov overlay used to provide, and relax the full-height rule.
   ========================================================================== */
.hero-solid {
  min-height: auto;
  background:
    radial-gradient(ellipse 900px 500px at 80% 0%, rgba(214, 184, 121, .14) 0%, transparent 55%),
    radial-gradient(ellipse 640px 420px at 8% 110%, rgba(214, 184, 121, .05) 0%, transparent 60%),
    linear-gradient(to bottom, var(--ink-2) 0%, var(--ink) 100%);
}
.hero-solid .hero3-in {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
}

/* ==========================================================================
   3) .dsk-prose  —  Elementor page content rendered as one clean column
   the_content() outputs Elementor markup; flatten its grid/section chrome
   so text reads in a single 68ch column with landing typography.
   ========================================================================== */
.dsk-prose {
  max-width: 68ch;
  margin-inline: auto;
  font-family: var(--ff-body);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.65;
}

/* flatten Elementor's layout wrappers to plain flow (defensive: layout only) */
.dsk-prose .elementor,
.dsk-prose .elementor-section,
.dsk-prose .elementor-container,
.dsk-prose .elementor-row,
.dsk-prose .elementor-column,
.dsk-prose .elementor-column-wrap,
.dsk-prose .elementor-widget-wrap,
.dsk-prose .elementor-widget {
  display: block;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  float: none;
  flex: none;
  background: none;
}
.dsk-prose .elementor-widget { margin-block: var(--space-4); }
.dsk-prose .elementor-widget:first-child { margin-top: 0; }

/* typography inside the prose column */
.dsk-prose p {
  font-family: var(--ff-body);
  color: var(--text);
  margin-top: var(--space-4);
}
.dsk-prose p:first-child { margin-top: 0; }

.dsk-prose h1,
.dsk-prose h2,
.dsk-prose h3,
.dsk-prose h4 {
  font-family: var(--ff-display);
  font-weight: 480;
  letter-spacing: -.015em;
  line-height: 1.14;
  color: var(--text);
  text-wrap: balance;
}
.dsk-prose h2 { font-size: var(--text-xl); margin-top: var(--space-8); }
.dsk-prose h3 { font-size: 1.25rem; margin-top: var(--space-6); }
.dsk-prose h4 { font-size: 1.08rem; margin-top: var(--space-5); }
.dsk-prose h2:first-child,
.dsk-prose h3:first-child { margin-top: 0; }

.dsk-prose a {
  color: var(--brass);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-soft);
  transition: color .2s, border-color .2s;
}
.dsk-prose a:hover {
  color: var(--brass-2);
  border-color: var(--brass);
}

.dsk-prose ul,
.dsk-prose ol { margin-top: var(--space-4); padding-left: 1.4rem; }
.dsk-prose li { margin-top: .5rem; color: var(--text); }

.dsk-prose img,
.dsk-prose figure img {
  height: auto;
  border-radius: var(--radius);
}
.dsk-prose figure { margin: var(--space-5) 0; }
.dsk-prose figcaption {
  margin-top: .5rem;
  font-size: var(--text-sm);
  color: var(--text-soft);
  text-align: center;
}

.dsk-prose blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--brass);
  background: var(--stone);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: 350;
}

/* tame Elementor buttons to the brass .btn look */
.dsk-prose .elementor-button,
.dsk-prose .elementor-button-wrapper a,
.dsk-prose a.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--ff-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: .9rem 1.6rem;
  background: var(--brass-2);
  color: var(--ink);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.dsk-prose .elementor-button:hover,
.dsk-prose .elementor-button-wrapper a:hover,
.dsk-prose a.wp-block-button__link:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(214, 184, 121, .3);
}

/* hide obviously-decorative, empty Elementor spacers (whitespace only) */
.dsk-prose .elementor-widget-spacer,
.dsk-prose .elementor-spacer {
  display: none;
}

/* ==========================================================================
   4) .svc a  —  service link-card (dsk_service_grid_links)
   each <article class="svc"> now wraps an <a>; give it the card hover.
   ========================================================================== */
.svc a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.svc a::after { content: ''; position: absolute; inset: 0; }
.svc { position: relative; }
.svc a:focus-visible { outline: none; }
.svc:has(a:focus-visible) {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-soft);
}

/* ==========================================================================
   5) LOGO (image wordmark) — replaces the old text wordmark
   ========================================================================== */
.wordmark-img { display: inline-flex; align-items: center; }
.wordmark-img img {
  height: clamp(40px, 5vw, 56px);
  width: auto;
  display: block;
}

/* ==========================================================================
   6) LANGUAGE SWITCHER — dsk_lang_switcher()
   Small globe-icon dropdown, matches header phone/CTA sizing.
   ========================================================================== */
.lang-switch { position: relative; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 0;
  color: var(--text-inv);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
}
.lang-toggle .ic { width: 1.15em; height: 1.15em; }
.lang-toggle:hover,
.lang-switch:focus-within .lang-toggle {
  border-color: var(--brass);
  background: var(--brass-soft);
}

.lang-menu {
  list-style: none;
  margin: 0;
  padding: .5rem;
  position: absolute;
  top: calc(100% + .7rem);
  right: 0;
  min-width: 180px;
  background: rgba(17, 17, 18, .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  z-index: 70;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
}
.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-menu a {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding: .6rem .7rem;
  border-radius: 8px;
  font-family: var(--ff-body);
  font-size: .88rem;
  color: var(--text-inv);
  text-decoration: none;
}
.lang-menu a b { color: var(--brass-2); font-size: .78rem; letter-spacing: .04em; }
.lang-menu a:hover,
.lang-menu a:focus-visible { background: rgba(214, 184, 121, .1); }

/* ==========================================================================
   7) ABOUT PHOTO FIX — portre-2.png is a tall PORTRAIT (964x1162).
   The landing .about-photo rule (aspect-ratio:5/4; object-position:top)
   was tuned for a landscape clinic photo and crops a portrait too tightly.
   Override to a portrait-safe ratio so the doctor's photo shows in full.
   ========================================================================== */
.about-photo {
  aspect-ratio: 4 / 5 !important;
  object-position: center 18% !important;
}

/* ==========================================================================
   8) HIDE DUPLICATE WHATSAPP BUTTON — the "Creame WhatsApp Me / Joinchat"
   plugin renders its own floating button independently of this theme.
   The landing already ships a WhatsApp CTA (.wa-cta) + call-bar, so the
   plugin's own floating widget is now redundant — hide it site-wide.
   ========================================================================== */
#joinchat,
.joinchat,
.joinchat__button,
div[id^="joinchat"] {
  display: none !important;
}
/* ==========================================================================
   9) HERO POSTER as <img> (LCP element). A real <img fetchpriority="high">
   is prioritised by the browser far better than a <video> poster attribute,
   so the hero paints its LCP much earlier. The blurred cinematic look and
   sizing mirror .kbvid; the lazy video sits on top and covers it once it
   starts playing after window.load.
   ========================================================================== */
.hero3 .hero-poster-img {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  filter: blur(3px) brightness(.85) saturate(.92);
  z-index: 0;
}
.hero3 .kbvid { z-index: 1; }

/* ==========================================================================
   10) LANG GLOBE ICON — clean line globe (replaces the old muddy filled one)
   ========================================================================== */
.lang-toggle .ic-globe { width: 1.25em; height: 1.25em; color: var(--brass-2); }

/* ==========================================================================
   11) HEADER PHONE — keep the number on one line (was wrapping on desktop)
   ========================================================================== */
.lp-phone { white-space: nowrap; }
.lp-phone span { white-space: nowrap; }
/* on tighter desktop widths the number would still crowd the CTA — drop the
   digits to the phone icon between 901px and 1200px, keep full number ≥1200 */
@media (min-width: 901px) and (max-width: 1200px) {
  .lp-phone span { display: none; }
}

/* ==========================================================================
   12) HIDE REDUNDANT 3rd-PARTY FLOATING BUTTONS — the theme already ships a
   WhatsApp CTA (.wa-cta) + a call-bar. The "Call Now Button" plugin (blue
   floating phone, bottom-left) and Joinchat's own button overlapped the
   mobile call-bar — hide them so only the theme's controls remain.
   ========================================================================== */
#callnowbutton,
.callnowbutton,
.call-now-button,
#joinchat,
.joinchat,
.joinchat__button,
.wp-block-joinchat-button,
div[id^="joinchat"] {
  display: none !important;
}

/* ==========================================================================
   13) SERVICE CARD ICONS (dsk_service_grid_links) — brass rounded badge with
   a premium line icon, matching the landing card language.
   ========================================================================== */
.svc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--space-4);
  border-radius: 16px;
  background: var(--brass-soft);
  color: var(--brass);
}
.svc-ico .ic-line { width: 1.5rem; height: 1.5rem; }
.svc-ico-img { width: 2.6rem; height: 2.6rem; object-fit: contain; display: block; }
.svc a:hover .svc-ico { background: var(--brass); color: #fff; transition: background .25s var(--ease-out), color .25s var(--ease-out); }
.svc a:hover .svc-ico-img { filter: brightness(0) invert(1); transition: filter .25s var(--ease-out); }

/* ==========================================================================
   14) BLOG single layout — content left + sticky sidebar right
   (appointment request + recent posts), stacks on mobile.
   ========================================================================== */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-8);
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}
.blog-main { max-width: none; margin-inline: 0; }
.blog-side {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.side-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.side-cta {
  text-align: center;
  background: var(--ink-2);
  color: var(--text-inv);
  border-color: var(--line-dark);
}
.side-cta .eyebrow { color: var(--brass-2); }
.side-cta > p { color: var(--text-inv-soft); margin: var(--space-3) 0 var(--space-4); }
.side-cta .btn { display: flex; justify-content: center; width: 100%; margin-bottom: .6rem; }
.side-cta .btn-ghost { border: 1px solid var(--line-dark); color: var(--text-inv); background: transparent; }
.side-cta .btn:last-child { margin-bottom: 0; }
.side-posts { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.side-posts a { display: flex; gap: .8rem; align-items: center; text-decoration: none; color: var(--text); }
.side-thumb img { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; display: block; }
.side-title { font-family: var(--ff-body); font-size: .9rem; font-weight: 500; line-height: 1.35; }
.side-posts a:hover .side-title { color: var(--brass); }
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-side { position: static; }
  .blog-main { max-width: 68ch; margin-inline: auto; }
}

/* ==========================================================================
   15) Blog post footer — publish/update dates + author box
   ========================================================================== */
.post-dates {
  margin: var(--space-6) 0 var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--sand-line);
  font-size: .92rem;
  color: var(--text);
  opacity: .82;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  align-items: center;
}
.post-dates strong { font-weight: 600; opacity: 1; }
.post-dates-sep { opacity: .35; }

.author-box {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--sand-card);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
}
.author-box-photo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 3px solid var(--card);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .10);
}
.author-box-body { min-width: 0; }
.author-box-name {
  font-family: var(--ff-display), 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 .2rem;
}
.author-box-title {
  font-size: .76rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 700;
  margin: 0 0 .7rem;
}
.author-box-bio {
  font-size: .96rem;
  line-height: 1.65;
  color: var(--text);
  opacity: .85;
  margin: 0;
}
@media (max-width: 560px) {
  .author-box { flex-direction: column; text-align: center; gap: var(--space-4); }
  .author-box-photo { width: 100px; height: 100px; }
  .post-dates { font-size: .86rem; }
}

/* ==========================================================================
   16) CLIENT FEEDBACK (2026-07-25)
   ========================================================================== */

/* (a) Warm LIGHT palette for everyone — the all-dark scheme read "too dark".
   Re-assert the light tokens inside the dark media query (this sheet loads
   after the landing CSS, so it wins) → keeps the "koyu hero + açık krem
   bölümler" rhythm instead of an all-black page in dark-mode browsers. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root {
    --ivory: #FCFCFA;
    --stone: #F4F2EC;
    --card: #FFFFFF;
    --line: #E7E3D8;
    --text: #17171A;
    --text-soft: #5B5A55;
    --brass: #A8863D;
    --brass-soft: rgba(168, 134, 61, .1);
    /* the landing ships a SECOND dark block for the sand tokens — reset
       these too, otherwise every .sec-sand section (About, etc.) stays dark. */
    --sand: #F3EEE3;
    --sand-card: #FBF8F1;
    --sand-line: #E4DBC9;
  }
}

/* (b) Before/After — labels now read Öncesi (left) · Sonrası (right).
   Add a divider between the two halves + a light frame so the halves no
   longer blend into each other or the page background. */
.ba-frame {
  border: 2px solid rgba(168, 134, 61, .30);
  box-shadow: 0 18px 46px rgba(11, 11, 12, .16);
}
.ba-frame:has(.ba-label.is-before)::after {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 1px rgba(11, 11, 12, .22);
  z-index: 2;
  pointer-events: none;
}

/* (c) Hero — a little more shadow over the background video so the
   headline + lead read clearly. */
.hero3 .ov {
  background:
    linear-gradient(180deg, rgba(11,11,12,.36) 0%, rgba(11,11,12,.22) 45%, rgba(11,11,12,.5) 100%) !important;
}
.kbvid { filter: blur(3px) brightness(.72) saturate(.9) !important; }

/* (d) About "Hekiminiz" photo — was oversized (filled the whole column).
   Give the photo column less width and cap the image to a balanced
   portrait card beside the copy. */
.about-grid { grid-template-columns: 1.35fr .65fr !important; align-items: center !important; }
.about-grid .about-photo,
img.about-photo {
  max-width: 340px !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  align-self: center !important;
  margin-inline: auto !important;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr !important; }
  .about-grid .about-photo, img.about-photo { max-width: 280px !important; }
}

/* (e) İletişim contact-info cards (dsk_contact_info) */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.contact-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: var(--space-5);
  background: var(--card);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
a.contact-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.contact-ic { display: inline-flex; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; border-radius: 12px; background: var(--brass-soft); color: var(--brass); }
.contact-ic .ic { width: 1.35rem; height: 1.35rem; }
.contact-t { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.contact-v { font-size: 1.02rem; color: var(--text); line-height: 1.5; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* (f) UI/UX pass — visible form labels (placeholder-only is an anti-pattern)
   + consistent focus rings for keyboard users. */
.lf-label {
  display: block;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brass);
  margin: var(--space-4) 0 .35rem;
  text-align: left;
}
.lead-form .lf-label:first-of-type { margin-top: var(--space-2); }
.wa-form input:focus-visible,
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 6px;
}