:root {
    /*EDITMODE-BEGIN*/
    --ink: #1a1714;
    --cream: #f4f3ef;
    --paper: #eae8e2;
    --white: #ffffff;
    --gold: #b8963e;
    --gold-light: #d4af6a;
    --gold-pale: #f5edd8;
    --burgundy: #6b2a2a;
    --stone: #eae8e2;
    --hero-variant: "plane";
    --show-signature: true;
    /*EDITMODE-END*/
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--white); color: var(--ink); }
  /* clip on the root also contains position:fixed descendants (e.g. the
     mobile drawer/overlay) that body's overflow-x:hidden cannot catch.
     clip (not hidden) keeps position:sticky working. */
  html { overflow-x: clip; }
  body {
    font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  .serif { font-family: "Cormorant Garamond", "Times New Roman", serif; font-weight: 400; }
  .mono { font-family: "Geist Mono", ui-monospace, monospace; }

  /* Paper grain */
  body::before {
    content: "";
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMjAnIGhlaWdodD0nMjIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwLjEyICAwIDAgMCAwIDAuMTEgIDAgMCAwIDAgMC4xMCAgMCAwIDAgMC4xNSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjM1Jy8+PC9zdmc+");
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.35;
    z-index: 999;
  }
  /* The fixed blend overlay forces full-page compositing on every scroll frame;
     drop it on phones, where it costs the most and shows the least. */
  @media (max-width: 720px) {
    body::before { display: none; }
  }

  /* Utilities */
  .container { max-width: 1360px; margin: 0 auto; padding: 0 48px; }
  .eyebrow {
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
  }
  .rule {
    height: 1px;
    background: currentColor;
    opacity: 0.25;
    border: 0;
  }

  /* Geschäfte page (dedicated template) intro */
  .geschaefte-intro {
    padding: 92px 0 46px;
    text-align: center;
  }
  .geschaefte-lede {
    max-width: 760px;
    margin: 28px auto 0;
  }
  .geschaefte-lede p {
    font-size: 16px;
    line-height: 1.72;
    color: rgba(26,23,20,0.75);
    margin-bottom: 16px;
  }
  .geschaefte-lede p:last-child { margin-bottom: 0; }
  .ek-empty {
    max-width: 620px;
    margin: 8px auto 0;
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(26,23,20,0.7);
  }
  .ek-empty a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .hairline { border-top: 1px solid rgba(26,23,20,0.15); }

  /* ============ NAV ============ */
  nav.top {
    position: sticky; top: 0; z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--gold);
  }
  .nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 48px;
    gap: 32px;
  }
  .nav-left, .nav-right {
    display: flex; gap: 28px; align-items: center;
    font-size: 15.5px;
    letter-spacing: 0.02em;
  }
  .nav-right { justify-content: flex-end; }
  .nav-left a, .nav-right a {
    color: var(--ink);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
  }
  .nav-left a:hover, .nav-right a:hover {
    color: var(--gold);
  }
  .logo {
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    letter-spacing: 0.04em;
    text-align: center;
    font-weight: 500;
    font-style: italic;
  }
  .logo small {
    display: block;
    font-family: "Geist Mono", monospace;
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0.4em;
    margin-top: -2px;
    color: var(--gold);
  }
  .nav-cta {
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    padding: 6px 20px;
    border-radius: 2px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
    text-align: center;
  }
  .nav-cta:hover { background: var(--gold); color: var(--ink) !important; border-color: var(--gold); }
  .nav-cta .nav-cta-arr { transition: transform .25s; display: inline-block; }
  .nav-cta:hover .nav-cta-arr { transform: translateX(3px); }

  .announce {
    background: var(--ink);
    color: var(--white);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    font-family: "Geist", sans-serif;
    font-size: 14px;
    padding: 12px 20px;
  }
  /* desktop: static row of the three value props, centered */
  .announce-track { display: block; }
  .announce-inner ~ .announce-inner { display: none; }
  .announce .announce-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(28px, 6vw, 92px);
    flex-wrap: wrap;
  }
  .usp {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .usp-ic { display: inline-flex; color: var(--gold); flex-shrink: 0; }
  .usp-ic svg { width: 17px; height: 17px; display: block; }

  /* ============ HERO ============ */
  .hero {
    padding: 60px 48px 80px;
    position: relative;
    background: var(--white);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: 1360px;
    margin: 0 auto;
  }
  .hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    max-width: 1360px;
    margin: 0 auto 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(26,23,20,0.2);
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.7);
  }
  .hero-meta b { color: var(--gold); font-weight: 500; }

  .h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 0.92;
    font-weight: 400;
    letter-spacing: -0.015em;
  }
  .h1 em {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
  }
  .h1 .amp {
    font-style: italic;
    color: var(--gold);
    font-size: 0.85em;
    display: inline-block;
    transform: translateY(0.05em);
  }

  .hero-lede {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    line-height: 1.45;
    margin-top: 36px;
    max-width: 520px;
    color: rgba(26,23,20,0.78);
  }
  .hero-lede::first-letter {
    font-size: 1.2em;
  }

  .hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    flex-wrap: wrap;
    align-items: center;
  }
  .btn-primary {
    background: var(--gold);
    color: var(--ink);
    padding: 20px 32px;
    border: none;
    font-family: "Geist", sans-serif;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 500;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: all .3s;
  }
  .btn-primary:hover {
    background: var(--gold-light);
    color: var(--ink);
  }
  .btn-primary .arr {
    color: var(--ink);
    display: inline-block;
    transition: transform .3s, color .3s;
  }
  /* Button is gold; the arrow stays ink for contrast and only slides on hover. */
  .btn-primary:hover .arr { color: var(--ink); transform: translateX(4px); }
  .btn-ghost {
    color: var(--ink);
    padding: 18px 0;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink);
    text-decoration: none;
  }
  .btn-ghost:hover { color: var(--gold); border-color: var(--gold); }
  /* Paired second CTAs (beside a filled primary) read as fully outlined buttons
     of matching height, not a bottom-border underline - consistent on the home
     hero and every ankauf hero / final CTA block. */
  .home-hero-actions .btn-ghost,
  .hero-actions .btn-ghost,
  .cta-actions .btn-ghost {
    padding: 20px 32px;
    border: 1px solid var(--ink);
    border-radius: 2px;
    font-size: 13px;
    letter-spacing: 0.18em;
  }
  .home-hero-actions .btn-ghost:hover,
  .hero-actions .btn-ghost:hover,
  .cta-actions .btn-ghost:hover {
    color: var(--gold);
    border-color: var(--gold);
  }

  .hero-image {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 2px;
    overflow: hidden;
    background: var(--paper);
  }
  .hero-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero-canvas {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--paper) 0%, #e0ddd5 100%);
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid rgba(26,23,20,0.06);
  }
  .hero-canvas-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(184,150,62,0.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(184,150,62,0.10) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
  }
  .hero-logo-mark {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 62%;
  }
  .hero-logo-mark img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0) saturate(100%) invert(58%) sepia(58%) saturate(396%) hue-rotate(7deg) brightness(92%) contrast(88%);
  }
  .hero-annotation {
    position: absolute;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.7;
    background: rgba(26,23,20,0.4);
    padding: 8px 12px;
    backdrop-filter: blur(8px);
    border-radius: 2px;
  }
  .hero-annotation em {
    font-style: normal;
    color: var(--gold-light);
  }
  .hero-annotation--tl { top: 36px; left: 52px; }
  .hero-annotation--br { bottom: 36px; right: 52px; text-align: right; }
  .hero-image .caption {
    position: absolute;
    bottom: 20px; left: 20px;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white);
    background: rgba(26,23,20,0.55);
    padding: 8px 12px;
    backdrop-filter: blur(8px);
    border-radius: 2px;
    z-index: 2;
  }
  .hero-stamp {
    position: absolute;
    top: -28px; right: -28px;
    width: 150px; height: 150px;
    border: 1px solid var(--burgundy);
    color: var(--burgundy);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 14px;
    text-align: center;
    background: var(--cream);
    transform: rotate(-8deg);
    z-index: 2;
    line-height: 1.3;
    padding: 12px;
  }
  .hero-stamp::before {
    content: "";
    position: absolute; inset: 6px;
    border: 1px dashed var(--burgundy);
    border-radius: 50%;
    opacity: 0.4;
  }
  .hero-stamp b { display: block; font-size: 22px; font-style: normal; letter-spacing: 0.02em; }
  .hero-stamp small { font-family: "Geist Mono", monospace; font-size: 8px; letter-spacing: 0.2em; display: block; margin-top: 4px; opacity: 0.8; }

  /* ============ MARQUEE / TRUST STRIP ============ */
  .trust-strip {
    background: var(--paper);
    color: var(--ink);
    padding: 28px 0;
    overflow: hidden;
    position: relative;
  }
  .trust-inner {
    display: flex;
    gap: 64px;
    align-items: center;
    white-space: nowrap;
    animation: scroll 40s linear infinite;
    width: max-content;
  }
  /* Stop the trust marquee and let the claims wrap into a static, readable
     block for users who ask for reduced motion. Drop the aria-hidden second
     pass and the diamond separators; the flex gap does the spacing. */
  @media (prefers-reduced-motion: reduce) {
    .trust-inner {
      animation: none;
      width: auto;
      white-space: normal;
      flex-wrap: wrap;
      gap: 12px 32px;
      justify-content: center;
    }
    .trust-inner span[aria-hidden="true"],
    .trust-inner .sep { display: none; }
  }
  .trust-inner span {
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.7;
    font-weight: 400;
    color: var(--ink);
  }
  .trust-inner span.sep {
    color: var(--gold);
    opacity: 0.5;
    letter-spacing: 0;
  }
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* ============ ADVANTAGES ============ */
  section.advantages {
    padding: 120px 0;
    background: var(--white);
  }
  .section-head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 64px;
    margin-bottom: 72px;
    align-items: end;
  }
  .section-head h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .section-head h2 em { color: var(--gold); font-style: italic; }
  .section-head .kicker p {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(26,23,20,0.72);
    max-width: 480px;
  }

  .adv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(26,23,20,0.10);
    border-left: 1px solid rgba(26,23,20,0.10);
  }
  .adv-cell {
    padding: 36px 32px 40px;
    border-right: 1px solid rgba(26,23,20,0.10);
    border-bottom: 1px solid rgba(26,23,20,0.10);
    background: var(--white);
    position: relative;
    min-height: 260px;
    display: flex;
    flex-direction: column;
  }
  /* No hover darkening: the cells are not links, and the shift wrongly read as
     clickable. On a white section they carry the paper tint at rest for
     contrast (what the hover used to do); on the paper process section they
     stay white, which already stands out. */
  section.advantages .adv-cell { background: var(--paper); }
  .adv-num {
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--gold-text);
    letter-spacing: 0.2em;
  }
  /* Category cells carry no leading number - the serif title leads on its own. */
  .adv-cell:not(:has(.adv-num)) h3 { margin-top: 0; }
  .adv-cell h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 400;
    margin-top: 40px;
    letter-spacing: -0.005em;
  }
  .adv-cell h3 em { font-style: italic; color: var(--gold); }
  .adv-cell p {
    margin-top: auto;
    padding-top: 28px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(26,23,20,0.72);
  }

  /* ============ PROCESS ============ */
  section.process {
    background: var(--paper);
    color: var(--ink);
    padding: 140px 0;
    position: relative;
    overflow: hidden;
  }
  section.process::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(184, 150, 62, 0.08), transparent 60%);
    pointer-events: none;
  }
  .process .section-head h2 { color: var(--ink); }
  .process .section-head .kicker p { color: rgba(26,23,20,0.72); }

  .process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    position: relative;
    z-index: 1;
  }
  .process-steps { display: flex; flex-direction: column; }
  .p-step {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 32px;
    padding: 36px 0;
    border-top: 1px solid rgba(26,23,20,0.15);
    align-items: start;
    cursor: pointer;
    transition: all .3s;
  }
  .p-step:last-child { border-bottom: 1px solid rgba(26,23,20,0.15); }
  .p-step:hover { padding-left: 12px; }
  .p-step:hover .p-num { color: var(--gold); }
  .p-num {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 52px;
    line-height: 1;
    color: var(--gold);
    transition: color .3s;
  }
  .p-body h4 {
    font-family: "Cormorant Garamond", serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1;
  }
  .p-body p {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(26,23,20,0.72);
    max-width: 460px;
  }
  .p-dur {
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.5);
    padding-top: 12px;
    white-space: nowrap;
  }

  .process-visual {
    position: sticky;
    top: 120px;
    aspect-ratio: 4/5;
    background: var(--white);
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid rgba(26,23,20,0.08);
  }
  .pv-stage {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .pv-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(184,150,62,0.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(184,150,62,0.10) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  }
  .pv-ring {
    position: absolute;
    width: 62%; aspect-ratio: 1;
    border: 1px solid rgba(184,150,62,0.4);
    border-radius: 50%;
    animation: pv-rot 40s linear infinite;
  }
  .pv-ring::before {
    content: "";
    position: absolute;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 50%;
    top: -3px; left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(184,150,62,0.6);
  }
  .pv-ring--2 {
    width: 82%;
    border-color: rgba(184,150,62,0.22);
    animation-duration: 65s;
    animation-direction: reverse;
  }
  .pv-mark {
    position: relative;
    width: 44%; aspect-ratio: 1;
    border: 1px solid rgba(184,150,62,0.5);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 40% 30%, rgba(184,150,62,0.10), transparent 60%);
  }
  .pv-mark span {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 150px;
    line-height: 1;
    color: var(--gold);
    transition: opacity .3s, transform .5s;
  }
  .pv-orbit {
    position: absolute;
    width: 82%; aspect-ratio: 1;
    pointer-events: none;
  }
  .pv-dot {
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    background: var(--gold);
    border-radius: 50%;
    transform: translate(-50%,-50%) rotate(var(--a)) translateY(-50%) translateY(calc(var(--size, 0px) * 0));
    opacity: 0.5;
  }
  @keyframes pv-rot {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .pv-label {
    position: absolute;
    top: 56px; left: 50%;
    transform: translateX(-50%);
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .process-visual .caption {
    position: absolute;
    top: 20px; left: 20px;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .process-visual .caption::before {
    content: "";
    display: block;
    width: 8px; height: 8px;
    background: var(--gold);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .process-visual .cta-inline {
    position: absolute;
    bottom: 24px; left: 24px; right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.7);
  }

  /* ============ SUSANNE / AUTHORITY ============ */
  section.authority {
    padding: 140px 0;
    background: var(--white);
    position: relative;
  }
  .auth-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: center;
  }
  .auth-portrait {
    aspect-ratio: 3/4;
    background: var(--paper);
    position: relative;
    overflow: hidden;
  }
  .auth-portrait-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .auth-portrait .placeholder {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      135deg,
      rgba(184, 150, 62,0.15),
      rgba(184, 150, 62,0.15) 12px,
      rgba(184, 150, 62,0.08) 12px,
      rgba(184, 150, 62,0.08) 24px
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
  }
  .auth-portrait .placeholder-inner {
    text-align: center;
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.85;
    line-height: 1.8;
  }
  .auth-portrait .placeholder-inner b {
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gold-light);
    margin-bottom: 12px;
  }
  .auth-portrait .tag {
    position: absolute;
    left: 16px; bottom: 16px;
    background: rgba(255,255,255,0.92);
    color: var(--ink);
    padding: 8px 12px;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
  }

  .auth-text .tv-credit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 28px;
  }
  .auth-text .tv-credit::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--burgundy);
    border-radius: 50%;
  }
  .auth-text blockquote {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.15;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .auth-text blockquote::before {
    content: "„";
    color: var(--gold);
  }
  .auth-text blockquote::after {
    content: "“";
    color: var(--gold);
  }
  .auth-sig {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .auth-sig-text {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 20px;
  }
  .auth-sig-text small {
    display: block;
    font-family: "Geist Mono", monospace;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 4px;
  }

  /* Hand-drawn signature */
  .signature-svg {
    width: 200px;
    height: 70px;
    color: var(--ink);
  }

  /* ============ SHIPPING OPTIONS / VALUES ============ */
  section.shipping {
    padding: 140px 0;
    background: var(--paper);
  }
  .ship-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 64px;
  }
  .ship-card {
    background: var(--white);
    border: 1px solid rgba(26,23,20,0.10);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transition: all .3s;
  }
  .ship-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
  }
  .ship-card.featured {
    background: var(--white);
    color: var(--ink);
    border-color: var(--gold);
  }
  .ship-card.featured:hover { border-color: var(--gold); }
  .ship-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .ship-card-head .eyebrow { color: var(--gold); }
  .ship-card.featured .ship-card-head .eyebrow { color: var(--gold); }
  .ship-card .logo-carrier {
    font-family: "Cormorant Garamond", serif;
    font-size: 13px;
    font-style: italic;
    opacity: 0.7;
  }
  .ship-card .value {
    font-family: "Cormorant Garamond", serif;
    font-size: 56px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .ship-card .value small {
    font-size: 16px;
    opacity: 0.6;
    font-style: italic;
    display: block;
    margin-top: 6px;
  }
  .ship-card h4 {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
  }
  .ship-card p {
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.72;
    flex: 1;
  }
  .ship-card .pill {
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 10px;
    background: rgba(184, 150, 62,0.15);
    color: var(--gold);
    align-self: flex-start;
    border-radius: 2px;
  }
  .ship-card.featured .pill {
    background: rgba(212, 175, 106,0.2);
    color: var(--gold-light);
  }

  /* ============ FAQ ============ */
  section.faq {
    padding: 140px 0;
    background: var(--white);
  }
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 80px;
    align-items: start;
  }
  .faq-sticky {
    position: sticky; top: 120px;
  }
  .faq-sticky h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .faq-sticky h2 em { color: var(--gold); font-style: italic; }
  .faq-sticky p {
    margin-top: 24px;
    font-size: 16px;
    color: rgba(26,23,20,0.72);
    max-width: 360px;
  }
  .faq-contact {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(26,23,20,0.2);
  }
  .faq-contact small {
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .faq-contact b {
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    font-weight: 400;
    display: block;
    margin-top: 8px;
  }

  .faq-item {
    border-top: 1px solid rgba(26,23,20,0.2);
    padding: 28px 0;
    cursor: pointer;
  }
  .faq-item:last-child { border-bottom: 1px solid rgba(26,23,20,0.2); }
  .faq-q {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    gap: 20px;
    align-items: baseline;
  }
  .faq-num {
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--gold-text);
  }
  .faq-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
  }
  .faq-toggle {
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    line-height: 1;
    color: var(--gold-text);
    transition: transform .3s;
    /* center the glyph in its grid column and pivot on its own center, so the
       '+' rotates in place into an '×' instead of swinging off to the side */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1em;
    align-self: start;
    transform-origin: 50% 50%;
  }
  .faq-item.open .faq-toggle { transform: rotate(45deg); }
  /* grid-rows 0fr -> 1fr animates to the answer's true height, so long answers
     (or large text zoom) are never clipped the way a fixed max-height did. */
  .faq-a {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .4s ease, padding .3s;
    padding-left: 60px;
    padding-right: 40px;
  }
  .faq-a > p { min-height: 0; margin: 0; }
  .faq-item.open .faq-a {
    grid-template-rows: 1fr;
    padding-top: 16px;
  }
  .faq-q { cursor: pointer; }
  .faq-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .faq-a p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(26,23,20,0.75);
  }

  /* ============ CTA BLOCK ============ */
  section.cta-final {
    padding: 160px 0;
    background: var(--paper);
    position: relative;
    overflow: hidden;
  }
  .cta-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 64px;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .cta-inner .cta-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
  }
  .cta-meta-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.7);
    line-height: 1.5;
  }
  .cta-meta-item em {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1;
    color: var(--gold);
    min-width: 24px;
  }
  .cta-inner .cta-right {
    text-align: right;
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-style: italic;
    line-height: 1.5;
    color: rgba(26,23,20,0.75);
  }
  .cta-inner .cta-right-label {
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    font-style: normal;
    display: block;
    margin-bottom: 10px;
  }
  .cta-main h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(44px, 4.6vw, 68px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.015em;
  }
  .cta-main h2 em { color: var(--gold-text); font-style: italic; }
  .cta-main p {
    margin: 32px auto 44px;
    max-width: 520px;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(26,23,20,0.72);
  }
  .cta-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .cta-bg {
    position: absolute;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 40vw;
    line-height: 1;
    color: var(--gold);
    opacity: 0.04;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  /* ============ FOOTER ============ */
  footer {
    background: var(--white);
    color: var(--ink);
    padding: 80px 0 40px;
    border-top: 1px solid rgba(26,23,20,0.08);
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 64px;
  }
  footer .logo {
    text-align: left;
    color: var(--ink);
    font-size: 34px;
  }
  footer .logo small { color: var(--gold); }
  .foot-col h5 {
    font-family: "Geist Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
  }
  .foot-col a, .foot-col p {
    display: block;
    color: rgba(26,23,20,0.7);
    text-decoration: none;
    font-size: 15.5px;
    margin-bottom: 10px;
  }
  /* One affordance for every footer link: ink text, gold underline on hover. */
  .foot-col a,
  .foot-bottom a,
  .foot-credit a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color .2s, border-color .2s;
  }
  /* Block-level links: keep the underline as wide as the text, not the column. */
  .foot-col a { width: fit-content; }
  /* Text takes the AA-safe gold, the underline keeps the bright one. */
  .foot-col a:hover,
  .foot-bottom a:hover,
  .foot-credit a:hover {
    color: var(--gold-text);
    border-color: var(--gold);
  }
  .foot-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 32px;
    border-top: 1px solid rgba(26,23,20,0.12);
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.5);
  }

  /* ============ TWEAKS PANEL ============ */
  .tweaks {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 290px;
    background: var(--white);
    border: 1px solid var(--ink);
    z-index: 1000;
    display: none;
    padding: 18px;
    font-size: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  }
  .tweaks.active { display: block; }
  .tweaks h6 {
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
  }
  .tweaks label {
    display: block;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.7);
    margin: 10px 0 6px;
  }
  .tweaks .tw-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
  }
  .tweaks button {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(26,23,20,0.3);
    padding: 6px 8px;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    cursor: pointer;
    color: var(--ink);
    text-transform: uppercase;
  }
  .tweaks button.active {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }
  .sw {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(26,23,20,0.3);
    cursor: pointer;
    padding: 0;
  }
  .sw.active { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* Mobile */
  @media (max-width: 1024px) {
    .container { padding: 0 32px; }
    .hero { padding: 40px 32px 60px; }
    .nav-wrap { padding: 16px 32px; }
    section.advantages, section.process, section.authority, section.shipping, section.faq { padding: 90px 0; }
    section.cta-final { padding: 110px 0; }
    .adv-grid { grid-template-columns: repeat(2, 1fr); }
    .ship-grid { grid-template-columns: 1fr; gap: 16px; }
    .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
    .hero-grid { gap: 40px; }
    .section-head { gap: 32px; }
  }

  @media (max-width: 720px) {
    body { font-size: 15px; }
    .container, .hero { padding-left: 20px; padding-right: 20px; }
    /* announce bar handled by the marquee block in the <=980 media query */

    /* NAV: stack logo + hamburger-free simplified */
    nav.top { position: sticky; }
    .nav-wrap {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 12px 20px;
    }
    .nav-left { display: none; }
    .nav-right { display: none; }
    .logo-link { justify-content: flex-start !important; }
    .logo-img { height: 44px !important; }
    .mobile-nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--ink);
      color: var(--white);
      padding: 8px 14px;
      border-radius: 2px;
      font-size: 10.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-weight: 500;
      text-decoration: none;
      white-space: nowrap;
    }

    /* HERO */
    .hero { padding: 28px 20px 56px; }
    .hero-meta {
      display: none;
    }
    .hero-meta-mobile {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      margin: 0 0 24px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(26,23,20,0.2);
      font-family: "Geist Mono", monospace;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(26,23,20,0.7);
      gap: 12px;
      white-space: nowrap;
      overflow: hidden;
    }
    .hero-meta-mobile span { overflow: hidden; text-overflow: ellipsis; }
    .hero-meta-mobile b { color: var(--gold); font-weight: 500; }
    .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .h1 { font-size: clamp(40px, 11vw, 56px); line-height: 0.98; letter-spacing: -0.01em; }
    /* Tighten the hero above the fold: the large italic standfirst and the lede
       ate the first screen, pushing the CTAs and the Google rating out of view.
       Copy stays; only size and rhythm change. */
    .hero-copy > p.serif { font-size: 20px !important; margin-top: 14px !important; line-height: 1.32 !important; }
    .hero-lede { font-size: 16px; margin-top: 16px; line-height: 1.5; }
    .hero-actions { margin-top: 24px; gap: 12px; }
    .hero-actions .btn-primary,
    .hero-actions .btn-ghost { width: 100%; justify-content: space-between; padding: 16px 20px; font-size: 12px; }
    /* outline the secondary CTA so it reads as a button, not loose text */
    .hero-actions .btn-ghost { justify-content: center; text-align: center; padding: 14px 20px; border: 1px solid rgba(26,23,20,0.45); border-radius: 2px; }
    .hero-image {
      aspect-ratio: 5/4;
      margin-top: 8px;
    }
    .hero-logo-mark { width: 58% !important; }
    .hero-annotation { font-size: 8.5px; letter-spacing: 0.14em; }
    .hero-annotation--tl { top: 20px; left: 22px; }
    .hero-annotation--br { bottom: 20px; right: 22px; }

    /* TRUST */
    .trust-strip { padding: 22px 0; }
    .trust-inner { gap: 32px; }
    .trust-inner span { font-size: 10px; letter-spacing: 0.2em; }

    /* SECTIONS */
    section.advantages, section.process, section.authority, section.shipping, section.faq { padding: 72px 0; }
    section.cta-final { padding: 88px 0; }
    .section-head { grid-template-columns: 1fr !important; gap: 20px; margin-bottom: 44px; }
    .section-head h2 { font-size: clamp(32px, 8vw, 44px) !important; }
    .section-head .kicker p { font-size: 15px; }

    /* ADVANTAGES */
    .adv-grid { grid-template-columns: 1fr; }
    .adv-cell { padding: 26px 22px 28px; min-height: unset; }
    .adv-cell h3 { font-size: 22px; margin-top: 24px; }
    .adv-cell p { padding-top: 18px; font-size: 15px; }

    /* PROCESS */
    .process-grid { grid-template-columns: 1fr; gap: 32px; }
    .process-visual {
      position: static;
      aspect-ratio: 5/4;
      order: -1;
    }
    .pv-mark span { font-size: 90px; }
    .pv-label { font-size: 17px; top: 32px; }
    .p-step { grid-template-columns: 50px 1fr; gap: 18px; padding: 22px 0; }
    .p-step:hover { padding-left: 0; }
    .p-num { font-size: 36px; }
    .p-body h4 { font-size: 22px; }
    .p-body p { font-size: 15px; margin-top: 8px; }
    .p-dur { grid-column: 2; padding-top: 0; font-size: 11px; }

    /* AUTHORITY */
    .auth-grid { grid-template-columns: 1fr; gap: 40px; }
    .auth-portrait { aspect-ratio: 4/5; max-width: 320px; margin: 0 auto; width: 100%; }
    .auth-text blockquote { font-size: clamp(24px, 6.5vw, 34px) !important; line-height: 1.25; }
    .auth-sig { margin-top: 28px; gap: 14px; flex-wrap: wrap; }
    .signature-svg { width: 150px; height: 52px; }
    .auth-sig-text { font-size: 17px; }

    /* SHIPPING */
    .ship-card { padding: 26px 22px; }
    .ship-card .value { font-size: 42px; }

    /* FAQ */
    .faq-grid { grid-template-columns: 1fr; gap: 36px; }
    .faq-sticky { position: static; }
    .faq-sticky h2 { font-size: clamp(32px, 8vw, 44px) !important; }
    .faq-contact { margin-top: 24px; padding-top: 20px; }
    .faq-contact b { font-size: 22px; }
    .faq-q { grid-template-columns: 28px 1fr 24px; gap: 12px; }
    .faq-title { font-size: 18px; }
    .faq-toggle { font-size: 22px; }
    .faq-a { padding-left: 40px; padding-right: 0; }
    .faq-a p { font-size: 15px; }

    /* CTA */
    .cta-inner { grid-template-columns: 1fr; gap: 32px; }
    .cta-inner .cta-left, .cta-inner .cta-right {
      display: none !important;
    }
    .cta-main h2 { font-size: clamp(40px, 10vw, 56px) !important; }
    .cta-main p { font-size: 15px; margin: 24px auto 32px; }
    .cta-bg { font-size: 70vw; }
    .cta-actions { flex-direction: column; gap: 14px; width: 100%; }
    .cta-actions .btn-primary,
    .cta-actions .btn-ghost { width: 100%; justify-content: center; padding: 16px 20px; }
    .cta-actions .btn-ghost { padding: 14px 20px; border: 1px solid rgba(26,23,20,0.45); border-radius: 2px; }

    /* FOOTER */
    footer { padding: 56px 0 32px; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; margin-bottom: 40px; }
    .foot-grid > div:first-child { grid-column: 1 / -1; }
    footer .logo { font-size: 26px; }
    .foot-bottom { flex-direction: column; gap: 10px; text-align: center; font-size: 9px; }

    /* TWEAKS panel */
    .tweaks {
      width: calc(100vw - 24px);
      right: 12px; left: 12px;
      bottom: 12px;
      max-height: 70vh;
      overflow-y: auto;
    }
  }

  @media (max-width: 420px) {
    .h1 { font-size: 38px; }
    .hero-lede { font-size: 16px; }
    .adv-cell h3, .p-body h4, .ship-card h4, .faq-title { font-size: 20px; }
    .hero-annotation { display: none; }
  }

  /* Hide mobile-only elements on desktop */
  .hero-meta-mobile, .mobile-nav-cta { display: none; }

  /* ============ NAV - REDESIGN ============ */
  .logo-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .logo-img {
    height: 72px;
    width: auto;
    display: block;
    transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Hero-Logo effect on the home page: large while at the top, shrinks on
     scroll. Applies to BOTH desktop nav and mobile nav (different elements). */
  body.page-home .nav-wrap,
  body.page-home .nav-mobile {
    transition: padding 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  body.page-home .m-logo img {
    transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Desktop hero state */
  body.page-home.is-top .logo-img { height: 132px; }
  body.page-home.is-top .nav-wrap { padding-top: 28px; padding-bottom: 28px; }

  /* Mobile hero state */
  body.page-home.is-top .m-logo img { height: 82px; }
  body.page-home.is-top .nav-mobile { padding-top: 22px; padding-bottom: 22px; }

  .nav-left, .nav-right { gap: 24px; }
  .nav-item { position: relative; }
  .nav-item.has-sub > a { display: inline-flex; align-items: center; gap: 7px; }
  .nav-item.has-sub > a .caret {
    color: var(--gold);
    transition: transform .25s ease;
    flex-shrink: 0;
    transform: translateY(1px);
  }
  .nav-item.has-sub:hover > a .caret { transform: translateY(1px) rotate(180deg); }
  .nav-left a, .nav-right > a, .nav-item.has-sub > a {
    position: relative;
    padding: 6px 0;
  }
  .nav-left > a.current,
  .nav-right > a.current,
  .nav-item.current > a {
    color: var(--gold);
  }
  .nav-left > a.current::after,
  .nav-right > a.current::after,
  .nav-item.current > a::after {
    content: "";
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 1px;
    background: var(--gold);
  }
  /* sub-menu */
  .sub-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: -20px;
    min-width: 220px;
    background: var(--white);
    border: 1px solid rgba(26,23,20,0.08);
    box-shadow: 0 18px 40px rgba(26,23,20,0.10);
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    z-index: 200;
  }
  .sub-menu::before {
    content: "";
    position: absolute;
    top: -14px; left: 0; right: 0;
    height: 14px;
  }
  .nav-item.has-sub:hover .sub-menu,
  .nav-item.has-sub:focus-within .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .sub-menu a {
    display: block;
    padding: 10px 24px 10px 28px;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
    position: relative;
    transition: color .2s, padding-left .2s;
  }
  .sub-menu a::before {
    content: "";
    position: absolute;
    left: 16px; top: 50%;
    width: 4px; height: 1px;
    background: var(--gold);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform .25s ease, width .25s ease;
  }
  .sub-menu a:hover {
    color: var(--gold);
    padding-left: 34px;
  }
  .sub-menu a:hover::before {
    transform: translateY(-50%) scaleX(1);
    width: 8px;
  }
  .sub-menu a.current {
    color: var(--gold);
    font-weight: 500;
  }
  .sub-menu a.current::before {
    transform: translateY(-50%) scaleX(1);
    width: 8px;
    background: var(--gold);
  }

  /* Secondary nav CTA: outlined, shows the phone number so it reads as a
     direct call-to-action without competing with the gold Shop button. */
  .nav-appoint {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink);
    padding: 9px 15px !important;
    border-radius: 2px;
    font-family: "Geist Mono", monospace;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    text-transform: none;
    font-weight: 500;
    transition: background .25s ease, color .25s ease, border-color .25s ease, gap .25s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    margin-left: 6px;
  }
  .nav-right > a.nav-appoint:hover {
    background: var(--ink) !important;
    color: var(--white) !important;
    border-color: var(--ink);
  }
  .nav-appoint::after { display: none !important; }
  .nav-appoint .arr { transition: transform .25s ease; display: inline-block; }
  .nav-appoint:hover .arr { transform: translateX(3px); }
  .nav-appoint-ic { flex-shrink: 0; }

  /* Shop as the primary gold CTA (keeps its dropdown) */
  .nav-item--shop { margin-left: 4px; }
  .nav-item--shop > a.nav-shop {
    background: var(--gold);
    color: var(--ink) !important;
    padding: 9px 18px;
    border-radius: 2px;
    font-weight: 500;
    transition: background .25s ease;
  }
  .nav-item--shop > a.nav-shop .caret { color: var(--ink); }
  .nav-item--shop:hover > a.nav-shop { background: var(--gold-light); }
  .nav-item--shop.current > a.nav-shop::after { display: none; }

  /* mobile drawer footer CTA */
  .m-foot-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    color: var(--white) !important;
    padding: 14px 18px;
    font-family: "Geist", sans-serif;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 18px;
    transition: background .25s ease;
  }
  .m-foot-cta:hover { background: var(--gold); color: var(--ink) !important; }
  .m-foot-cta .arr { transition: transform .25s ease; display: inline-block; }
  .m-foot-cta:hover .arr { transform: translateX(4px); }

  /* utility icons */
  .nav-utility {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 8px;
    padding-left: 20px;
    border-left: 1px solid rgba(26,23,20,0.12);
  }
  .nav-utility .nav-ic {
    color: var(--ink);
    opacity: 0.75;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: opacity .2s, color .2s;
    padding: 0;
  }
  .nav-utility .nav-ic:hover {
    opacity: 1;
    color: var(--gold);
  }
  .nav-utility .nav-ic::after { display: none; }
  .nav-cart-badge {
    position: absolute;
    top: -6px; right: -8px;
    background: var(--gold);
    color: var(--white);
    font-family: "Geist Mono", monospace;
    font-size: 9px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
  }

  /* sub-menu anchored right side */
  .sub-menu--right { left: auto; right: -20px; min-width: 250px; }

  /* Eigenkollektion tag inside Shop dropdown */
  .sub-menu a b {
    font-weight: 500;
    color: var(--ink);
  }
  .sub-menu a:hover b { color: var(--gold-text); }
  .sub-menu .sub-tag {
    display: inline-block;
    font-family: "Geist Mono", monospace;
    font-size: 8.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 2px 6px;
    margin-left: 8px;
    line-height: 1;
    transform: translateY(-1px);
  }
  /* label + tag on one line (keeps the "Eigenkollektion" pill from wrapping) */
  .sub-menu a.sub-feat { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  .sub-menu a.sub-feat .sub-tag { margin-left: auto; }
  .sub-menu .sub-menu-muted {
    color: rgba(26,23,20,0.55);
  }
  .sub-menu .sub-menu-muted:hover { color: var(--gold-text); }

  /* ============ HERO CONTACTS (Vor Ort) ============ */
  .hero-contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    margin-top: 52px;
    padding-top: 32px;
    border-top: 1px solid rgba(26,23,20,0.12);
  }
  .hero-contact-label {
    display: block;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
  }
  .hero-contact p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .hero-contact-phone {
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    font-style: italic;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color .2s, border-color .2s;
    letter-spacing: 0.01em;
    display: inline-block;
  }
  .hero-contact-phone:hover { color: var(--gold); border-color: var(--gold); }
  .hero-hours {
    margin-top: 18px;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.55);
  }
  @media (max-width: 760px) {
    .hero-contacts { grid-template-columns: 1fr; gap: 22px; }
  }

  /* ============ HERO META - flush ============ */
  .hero-meta {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .hero-meta b { color: inherit !important; }

  /* ============ A11Y - readable gold + announce bar ============ */
  :root {
    /* gold split: --gold stays bright for borders/accents/hovers,
       --gold-text is a darker variant used wherever gold appears as text
       so we hit WCAG AA 4.5:1 on white. */
    --gold-text: #8b6f3f;
  }

  /* upgrade all gold *text* usages to the darker variant. The bright --gold
     keeps working for backgrounds, borders and decorative lines. */
  .eyebrow,
  .h1 em, .hero-lede em,
  .section-head h2 em,
  .adv-cell h3 em,
  .h1 .amp,
  .ship-card h4 em, .ship-card .value small,
  .auth-text .tv-credit,
  .p-num,
  .pv-mark span,
  .briefing-title em,
  .loc-label, .loc-card-head .eyebrow,
  .hero-contact-label,
  .foot-branch-label,
  .m-section-label,
  .briefing-mark,
  .m-sublink.current,
  .sub-menu a.current,
  .sub-menu a:hover,
  .nav-left > a.current,
  .nav-right > a.current,
  .nav-item.current > a,
  .nav-left a:hover, .nav-right a:hover,
  .nav-utility .nav-ic:hover,
  .m-link:hover, .m-link:active,
  .m-accordion-head:hover,
  .m-sublink:hover,
  .m-acc-caret,
  .nav-item.has-sub > a .caret,
  .foot-credit a:hover,
  .foot-branch a:hover,
  .hero-contact-phone:hover,
  .loc-phone:hover,
  .briefing-phone:hover {
    color: var(--gold-text) !important;
  }

  /* The gold Shop CTA keeps ink text and an ink caret in every state: the
     shared gold-accent rule above would otherwise turn the text gold on the
     active shop/product pages and the caret gold on every page. */
  .nav-item--shop > a.nav-shop,
  .nav-item--shop.current > a.nav-shop { color: var(--ink) !important; }
  .nav-item--shop > a.nav-shop .caret,
  .nav-item--shop.current > a.nav-shop .caret { color: var(--ink) !important; }

  /* ============ MOBILE NAV / DRAWER ============ */
  .nav-mobile { display: none; }

  @media (max-width: 980px) {
    .nav-wrap { display: none !important; }
    .nav-mobile {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 16px;
      padding: 14px 20px;
    }
    .m-burger {
      width: 32px; height: 32px;
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      align-items: flex-start;
    }
    .m-burger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--ink);
      transition: transform .3s ease, opacity .2s ease;
      transform-origin: center;
    }
    .m-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .m-burger.open span:nth-child(2) { opacity: 0; }
    .m-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .m-logo {
      justify-self: center;
      display: flex;
      align-items: center;
    }
    .m-logo img { height: 44px; width: auto; display: block; }
    .m-utility {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .m-utility .nav-ic { position: relative; color: var(--ink); }
    .announce {
      overflow: hidden;
      white-space: nowrap;
      padding: 8px 0;
      position: relative;
      font-size: 11px;
      letter-spacing: 0.01em;
    }
    .announce::before, .announce::after {
      content: "";
      position: absolute;
      top: 0; bottom: 0;
      width: 32px;
      z-index: 2;
      pointer-events: none;
    }
    .announce::before { left: 0; background: linear-gradient(90deg, var(--ink), rgba(26,23,20,0)); }
    .announce::after  { right: 0; background: linear-gradient(-90deg, var(--ink), rgba(26,23,20,0)); }
    /* seamless marquee: flex track of 6 copies, shift by exactly one half
       (= 3 copies) so the second half always backfills the first. 3 copies
       (~1.4k px) exceed any viewport <= 980px, so no empty gap appears. */
    .announce .announce-track {
      display: flex;
      width: max-content;
      animation: announce-scroll 60s linear infinite;
    }
    /* override the desktop "show only first copy" rule (same 0,3,0 specificity,
       wins by source order) so every copy is laid out in the marquee track */
    .announce .announce-track .announce-inner {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      margin: 0;
      padding-right: 44px;
    }
    @media (prefers-reduced-motion: reduce) {
      .announce .announce-track { animation: none; }
    }
    @keyframes announce-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
  }

  /* Drawer */
  .m-overlay {
    position: fixed; inset: 0;
    background: rgba(26,23,20,0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
    z-index: 998;
    backdrop-filter: blur(2px);
  }
  .m-overlay.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s;
  }
  .m-drawer {
    position: fixed;
    top: 0; left: 0;
    width: min(380px, 88vw);
    height: 100vh;
    height: 100dvh;
    background: var(--white);
    z-index: 999;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 8px 0 32px rgba(26,23,20,0.12);
  }
  .m-drawer.open { transform: translateX(0); }
  .m-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px 18px;
    border-bottom: 1px solid rgba(26,23,20,0.08);
    flex-shrink: 0;
  }
  .m-drawer-head .eyebrow { color: var(--gold); }
  .m-close {
    background: none;
    border: 0;
    padding: 6px;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .2s, color .2s;
  }
  .m-close:hover { background: var(--cream); color: var(--gold); }
  .m-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0 24px;
    -webkit-overflow-scrolling: touch;
  }
  .m-section {
    padding: 18px 28px;
    border-bottom: 1px solid rgba(26,23,20,0.06);
  }
  .m-section:last-of-type { border-bottom: 0; }
  .m-section-label {
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .m-link {
    display: block;
    padding: 12px 0;
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.005em;
    line-height: 1.1;
    transition: color .2s, padding-left .2s;
  }
  .m-link:hover, .m-link:active { color: var(--gold); padding-left: 6px; }
  .m-link--icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Geist", sans-serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    margin-right: 24px;
  }
  .m-section--utility {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
  }
  .m-accordion-head {
    width: 100%;
    background: none;
    border: 0;
    padding: 12px 0;
    text-align: left;
    cursor: pointer;
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -0.005em;
    line-height: 1.1;
    transition: color .2s;
  }
  .m-accordion-head:hover { color: var(--gold); }
  .m-acc-caret {
    color: var(--gold);
    transition: transform .25s ease;
    margin-left: 12px;
    flex-shrink: 0;
  }
  .m-accordion.open .m-acc-caret,
  .m-accordion-head[aria-expanded="true"] .m-acc-caret { transform: rotate(180deg); }
  .m-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  .m-accordion.open .m-accordion-body { max-height: 600px; }
  .m-sublink {
    display: block;
    padding: 10px 0 10px 14px;
    font-family: "Geist", sans-serif;
    font-size: 14px;
    color: rgba(26,23,20,0.78);
    text-decoration: none;
    border-left: 1px solid rgba(26,23,20,0.10);
    margin-left: 4px;
    transition: color .2s, border-color .2s, padding-left .2s;
  }
  .m-sublink:first-of-type { margin-top: 4px; }
  .m-sublink:hover { color: var(--gold); border-color: var(--gold); padding-left: 18px; }
  .m-sublink.current {
    color: var(--gold);
    border-color: var(--gold);
    font-weight: 500;
  }
  .m-sublink.current::before {
    content: "◆";
    font-size: 7px;
    margin-right: 8px;
    transform: translateY(-2px);
    display: inline-block;
  }
  .m-drawer-foot {
    padding: 22px 28px 28px;
    border-top: 1px solid rgba(26,23,20,0.08);
    background: var(--cream);
    flex-shrink: 0;
  }
  .m-foot-call small {
    display: block;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.55);
    margin-bottom: 4px;
  }
  .m-foot-call b {
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.01em;
  }

  body.m-locked { overflow: hidden; }

  /* ============ FOOTER - BRANCH ADDRESSES ============ */
  .foot-branches {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 320px;
  }
  .foot-social {
    margin-top: 28px;
    display: flex;
    gap: 12px;
  }
  .foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(26,23,20,0.18);
    border-radius: 2px;
    color: var(--ink);
    transition: color .2s, border-color .2s;
  }
  .foot-social a:hover { color: var(--gold); border-color: var(--gold); }
  .foot-social svg { width: 18px; height: 18px; display: block; }
  .foot-branch {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(26,23,20,0.72);
  }
  .foot-branch-label {
    display: block;
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .foot-branch a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(26,23,20,0.15);
    transition: color .2s, border-color .2s;
    display: inline-block;
    margin-top: 4px;
  }
  .foot-branch a:hover { color: var(--gold); border-color: var(--gold); }
  @media (max-width: 760px) {
    .foot-branches { grid-template-columns: 1fr; }
  }

  .foot-credit {
    opacity: 0.75;
    letter-spacing: 0.04em;
  }
  .foot-credit a {
    font-family: "Geist Mono", monospace;
    font-size: 0.95em;
    letter-spacing: 0.18em;
  }

  /* ============ BRIEFING CHECKLIST (Vor Ort) ============ */
  .briefing {
    position: sticky;
    top: 120px;
    background: var(--white);
    border: 1px solid rgba(26,23,20,0.10);
    padding: 44px 40px 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px -28px rgba(26,23,20,0.18);
    overflow: hidden;
  }
  .briefing::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 60%, transparent 100%);
  }
  .briefing-head { margin-bottom: 28px; }
  .briefing-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  .briefing-title em {
    font-style: italic;
    color: var(--gold);
  }

  .briefing-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(26,23,20,0.08);
  }
  .briefing-list li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(26,23,20,0.08);
    align-items: start;
  }
  .briefing-mark {
    color: var(--gold);
    font-size: 9px;
    line-height: 1.4;
    padding-top: 6px;
  }
  .briefing-list b {
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.005em;
  }
  .briefing-list p {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(26,23,20,0.7);
  }

  .briefing-foot {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(26,23,20,0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .briefing-foot small {
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.55);
  }
  .briefing-phone {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 24px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
    align-self: flex-start;
    padding-bottom: 1px;
  }
  .briefing-phone:hover { color: var(--gold); border-color: var(--gold); }

  @media (max-width: 880px) {
    .briefing { position: static; padding: 32px 26px 26px; }
    .briefing-title { font-size: 28px; }
    .briefing-list b { font-size: 18px; }
  }

  /* ============ LOCATION CARDS (Vor Ort) ============ */
  .ship-grid--locations {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  /* Both stores carry the gold frame: neither is "recommended" over the other,
     they are two shops of the same house. */
  .loc-card {
    background: var(--white);
    border: 1px solid var(--gold);
    box-shadow: 0 1px 0 var(--gold) inset, 0 24px 48px -24px rgba(184,150,62,0.25);
    padding: 40px 36px 36px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .3s, box-shadow .3s;
  }
  .loc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 var(--gold) inset, 0 28px 56px -24px rgba(184,150,62,0.35);
  }

  /* Negative margins cancel the card padding so the photo sits flush to the
     card edges. Keep in sync with .loc-card padding, here and in the 880px
     query below. */
  .loc-photo {
    margin: -40px -36px 28px;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    background: var(--paper);
  }
  .loc-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
  }
  .loc-card:hover .loc-photo img { transform: scale(1.03); }

  .loc-card-head {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(26,23,20,0.10);
  }
  .loc-card-head .eyebrow {
    color: var(--gold);
    margin-bottom: 8px;
  }
  .loc-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  /* Rating line under the store name - links down to that store's quotes in the
     same card. The score carries the line (Cormorant italic, like the hero stat
     figures); the count is a caption. All three set at one size read flat and
     let the wide tracked caps shout over the actual number. */
  /* Both cases are flex: with an anchor the link wraps the three parts, without
     one (Ankauf vor Ort) they sit in .loc-rating directly. */
  .loc-rating,
  .loc-rating-link {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .loc-rating { margin-top: 14px; }
  .loc-rating-num {
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    color: var(--gold-text, #8b6f3f);
  }
  .loc-rating .rev-stars svg { width: 14px; height: 14px; }
  /* 0.65 alpha, not 0.5: at 10px this is normal-size type needing 4.5:1, and
     0.5 composites to #8d8b8a on white = 3.4:1. */
  .loc-rating-count {
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.65);
  }
  .loc-rating-link {
    color: inherit;
    text-decoration: none;
  }
  .loc-rating-link .loc-rating-count {
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
  }
  .loc-rating-link:hover .loc-rating-count {
    color: rgba(26,23,20,0.8);
    border-bottom-color: var(--gold);
  }

  .loc-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
    padding: 28px 0;
  }
  .loc-meta-block:nth-child(3) { grid-column: 1 / -1; }
  .loc-label {
    display: block;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(26,23,20,0.5);
    margin-bottom: 8px;
  }
  .loc-meta-block p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
  }
  .loc-phone {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    font-style: italic;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
    letter-spacing: 0.01em;
  }
  .loc-phone:hover { color: var(--gold); border-color: var(--gold); }

  .loc-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(26,23,20,0.72);
    padding-top: 24px;
    border-top: 1px solid rgba(26,23,20,0.10);
    margin-bottom: 28px;
  }

  /* Quotes inside the card. They used to sit ~1000px below the two side-by-side
     cards, which made the mapping something you had to read; in here it is
     simply where the quote is. */
  .loc-reviews {
    margin: 4px 0 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(26,23,20,0.10);
    /* Clear the 113px sticky header when the rating line jumps here. */
    scroll-margin-top: 130px;
  }
  .loc-review + .loc-review { margin-top: 22px; }
  .loc-review { margin-top: 18px; }
  .loc-review .rev-stars svg { width: 13px; height: 13px; }
  .loc-review blockquote {
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.45;
    margin: 8px 0 0;
  }
  .loc-review blockquote::before { content: "\201E"; }
  .loc-review blockquote::after { content: "\201C"; }
  .loc-review figcaption {
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* 0.55 composites to 3.97:1 on white - under the 4.5:1 that 10px needs. */
    color: rgba(26,23,20,0.65);
    margin-top: 8px;
  }
  .loc-reviews-link { margin-top: 24px; }
  .loc-reviews-link a {
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .2s;
  }
  .loc-reviews-link a .arr { display: inline-block; transition: transform .3s; }
  .loc-reviews-link a:hover { color: var(--gold-text, #8b6f3f); }
  .loc-reviews-link a:hover .arr { transform: translateX(4px); }

  .loc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: auto;
  }
  .loc-cta {
    padding: 14px 22px;
    font-size: 12px;
  }
  .loc-cta-ghost {
    padding: 14px 0;
    font-size: 12px;
  }

  @media (max-width: 880px) {
    .ship-grid--locations { grid-template-columns: 1fr; gap: 20px; }
    .loc-card { padding: 32px 26px 28px; }
    .loc-photo { margin: -32px -26px 22px; }
    .loc-name { font-size: 32px; }
    .loc-meta { grid-template-columns: 1fr; gap: 18px; }
    .loc-meta-block:nth-child(3) { grid-column: auto; }
  }

  /* Touch devices have no hover - don't leave the zoom half-applied. */
  @media (hover: none) {
    .loc-card:hover .loc-photo img { transform: none; }
  }

/* ============ WP content pages (sg2 additions) ============ */
.sg2-content { padding: 48px 0 90px; }
.sg2-content--narrow .container { max-width: 860px; }
.sg2-content-title {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  margin: 18px 0 28px;
}
.sg2-content-title em { font-style: italic; color: var(--gold-text, #8b6f3f); }
.sg2-content--narrow h2, .sg2-content--narrow h3 {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.15;
  margin: 36px 0 14px;
}
.sg2-content--narrow h2 { font-size: 30px; }
.sg2-content--narrow h3 { font-size: 24px; }
.sg2-content--narrow p, .sg2-content--narrow ul, .sg2-content--narrow ol { margin: 0 0 16px; }
.sg2-content--narrow ul, .sg2-content--narrow ol { padding-left: 22px; }
.sg2-content--narrow .container a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sg2-content--narrow .container a:hover { color: var(--gold); }

/* ============ Footer newsletter - shared on all pages (sg2 additions) ============
   These rules only shipped in the home build of the source layout, but the
   footer renders site-wide. */
.foot-news {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid rgba(26,23,20,0.08);
}
.foot-news-text { max-width: 540px; }
.foot-news-text h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.15;
  font-weight: 500;
  margin-top: 12px;
  letter-spacing: -0.005em;
}
.foot-news-text h3 em { color: var(--gold); font-style: italic; }
.foot-news-form { width: 100%; max-width: 520px; margin: 0 auto; }
.sg2-nl-form { display: block; width: 100%; }
.sg2-nl-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}
.sg2-nl-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(26,23,20,0.2);
  background: var(--white);
  color: var(--ink);
  transition: border-color .2s;
  border-radius: 2px;
}
.sg2-nl-form input[type="email"]:focus { outline: none; border-color: var(--gold); }
.sg2-nl-form input[type="email"]::placeholder { color: rgba(26,23,20,0.42); }
.sg2-nl-form .btn-primary { padding: 14px 22px; font-size: 12px; }
.sg2-nl-consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  margin-top: 12px;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(26,23,20,0.62);
}
.sg2-nl-consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 22px; height: 22px;
  accent-color: var(--gold);
}
.sg2-nl-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.sg2-nl-msg {
  margin: 10px 0 0;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  min-height: 0;
}
.sg2-nl-msg:empty { margin: 0; }
.sg2-nl-msg.is-ok { color: #4a7c4a; }
.sg2-nl-msg.is-err { color: #b4453a; }
.sg2-nl-block { max-width: 540px; margin: 0 auto; }
.sg2-nl-notice {
  font-family: "Geist", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 16px 20px;
  margin: 0 0 22px;
  border: 1px solid;
  border-radius: 2px;
}
.sg2-nl-notice.is-ok { color: #3c6b3c; border-color: rgba(74,124,74,0.4); background: rgba(74,124,74,0.06); }
.sg2-nl-notice.is-err { color: #9c3a30; border-color: rgba(180,69,58,0.4); background: rgba(180,69,58,0.06); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 760px) {
  .foot-news { gap: 22px; padding-bottom: 36px; margin-bottom: 36px; }
}

/* ============ Logo guard against WooCommerce resets (sg2 additions) ============
   woocommerce-layout.css sets ".woocommerce-page img { height: auto; max-width: 100% }"
   which collapses the dimensionless logo SVG on shop/product/cart pages. */
nav.top .logo-img { height: 72px; width: auto; max-width: none; }
nav.top .m-logo img { height: 52px; width: auto; max-width: none; }

/* ============ Generic form controls (sg2 additions) ============
   Contact Form 7, WooCommerce account/checkout and other plugin forms.
   :where() keeps specificity at .sg2-content level so component-specific
   styles (cart coupon, footer newsletter) always win. */
.sg2-content :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], textarea, select) {
  width: 100%;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(26,23,20,0.2);
  border-radius: 2px;
  padding: 12px 16px;
  transition: border-color .2s;
  -webkit-appearance: none;
  appearance: none;
}
.sg2-content :where(textarea) { min-height: 160px; resize: vertical; }
.sg2-content :where(select) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' fill='none' stroke='%231a1714' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1 4.5,5 8,1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 36px;
}
.sg2-content :where(input, textarea, select):focus {
  outline: none;
  border-color: var(--gold);
}
.sg2-content :where(input, textarea)::placeholder { color: rgba(26,23,20,0.42); }
.sg2-content :where(label) {
  display: block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26,23,20,0.65);
  margin-bottom: 6px;
}
.sg2-content :where(input[type="checkbox"], input[type="radio"]) {
  width: auto;
  display: inline-block;
  margin-right: 8px;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--ink);
}
.sg2-content :where(input[type="submit"], button[type="submit"], .button, .wp-element-button) {
  display: inline-block;
  width: auto;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 14px 26px;
  cursor: pointer;
  transition: background .2s, color .2s;
  text-decoration: none;
}
.sg2-content :where(input[type="submit"], button[type="submit"], .button, .wp-element-button):hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
/* CF7 spacing + states */
.sg2-content :where(.wpcf7-form p) { margin: 0 0 18px; }
.sg2-content :where(.wpcf7-not-valid) { border-color: #a04444; }
.sg2-content :where(.wpcf7-not-valid-tip) { font-size: 12px; color: #a04444; margin-top: 5px; display: block; }
/* WooCommerce account forms */
.sg2-content :where(.woocommerce-form-row, .form-row) { margin: 0 0 18px; }
.sg2-content :where(.woocommerce-form-login, .woocommerce-form-register) {
  border: 1px solid rgba(26,23,20,0.12);
  border-radius: 2px;
  padding: 28px;
}
/* Links inside WC account forms/notices (lost password, privacy notes) -
   deliberately narrow so styled buttons (.btn-primary etc.) stay untouched */
.sg2-content :where(.woocommerce-form a, .woocommerce-MyAccount-content a:not(.button), .woocommerce-privacy-policy-text a, .woocommerce-notices-wrapper a:not(.button), .woocommerce-message a:not(.button), .woocommerce-info a:not(.button)) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sg2-content :where(.woocommerce-form a, .woocommerce-MyAccount-content a:not(.button), .woocommerce-privacy-policy-text a, .woocommerce-notices-wrapper a:not(.button), .woocommerce-message a:not(.button), .woocommerce-info a:not(.button)):hover { color: var(--gold); }

/* ============ Wishlist feedback (sg2 additions) ============ */
/* hide cart/wishlist badges while empty (JS fills them on cached pages) */
.nav-cart-badge:empty { display: none; }
.card-wish.is-wished {
  opacity: 1;
  transform: translateY(0);
  color: var(--gold);
  border-color: var(--gold);
}
.card-wish.is-wished svg,
.pdp-wishlist.is-wished svg {
  fill: var(--gold);
  stroke: var(--gold);
}
.pdp-wishlist.is-wished { color: var(--gold); border-color: var(--gold); }

.sg2-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: var(--cream);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 2px;
  box-shadow: 0 18px 40px -18px rgba(26,23,20,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 1200;
}
.sg2-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ============ WooCommerce buttons + account area (sg2 additions) ============
   woocommerce-general.css styles .button with (0,2,1) specificity - these
   selectors outrank it so WC buttons follow the theme everywhere. */
.sg2-content .woocommerce a.button,
.sg2-content .woocommerce button.button,
.sg2-content .woocommerce input.button,
.sg2-content .woocommerce #respond input#submit,
.sg2-content .woocommerce button[type="submit"] {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 14px 26px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.sg2-content .woocommerce a.button:hover,
.sg2-content .woocommerce button.button:hover,
.sg2-content .woocommerce input.button:hover,
.sg2-content .woocommerce button[type="submit"]:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.sg2-content .woocommerce a.button.disabled,
.sg2-content .woocommerce button.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* account navigation */
.sg2-content .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(26,23,20,0.12);
  border-radius: 2px;
}
.sg2-content .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid rgba(26,23,20,0.10);
}
.sg2-content .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.sg2-content .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 13px 18px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26,23,20,0.8);
  text-decoration: none;
  transition: color .2s, background .2s;
}
.sg2-content .woocommerce-MyAccount-navigation li a:hover { color: var(--gold); }
.sg2-content .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ink);
  color: var(--white);
}

/* orders table + address boxes */
.sg2-content .woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(26,23,20,0.12);
  border-radius: 2px;
  font-size: 13.5px;
}
.sg2-content .woocommerce table.shop_table th,
.sg2-content .woocommerce table.shop_table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(26,23,20,0.10);
}
.sg2-content .woocommerce table.shop_table thead th {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26,23,20,0.8);
  background: var(--cream);
}
.sg2-content .woocommerce-Addresses .woocommerce-Address {
  border: 1px solid rgba(26,23,20,0.12);
  border-radius: 2px;
  padding: 22px;
}
.sg2-content .woocommerce-Address-title h2,
.sg2-content .woocommerce-MyAccount-content h2,
.sg2-content .woocommerce-MyAccount-content h3 {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 14px;
}
/* fieldsets in edit-account */
.sg2-content .woocommerce fieldset {
  border: 1px solid rgba(26,23,20,0.12);
  border-radius: 2px;
  padding: 20px;
  margin: 0 0 18px;
}
.sg2-content .woocommerce fieldset legend {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 8px;
}

/* ============ WooCommerce form fields (sg2 additions) ============
   WC 10.x styles fields via CSS custom properties + (0,3,1) selectors.
   Override the variables and match the selector strength so login,
   account and checkout fields all follow the theme. */
:root {
  --wc-form-border-color: rgba(26,23,20,0.2);
  --wc-form-border-radius: 2px;
  --wc-form-border-width: 1px;
  --wc-form-color-text: #1a1714;
  --wc-card-border-radius: 2px;
}
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row .input-text,
.woocommerce-page form .form-row select {
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  background: var(--white);
  line-height: 1.4;
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row .input-text:focus,
.woocommerce-page form .form-row select:focus {
  outline: none;
  border-color: var(--gold);
}
.woocommerce form .form-row select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' fill='none' stroke='%231a1714' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1 4.5,5 8,1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 36px;
}
/* password reveal toggle keeps its vertical centering with taller fields */
.woocommerce form .password-input .show-password-input { right: 16px; }

/* login / register boxes: square corners, theme border */
.sg2-content .woocommerce form.woocommerce-form-login,
.sg2-content .woocommerce form.woocommerce-form-register {
  border: 1px solid rgba(26,23,20,0.12);
  border-radius: 2px;
}
/* Chrome autofill: keep fields white instead of the default blue tint */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
/* selects: fixed height + symmetric padding so the value centers vertically */
.sg2-content :where(select),
.woocommerce form .form-row select,
.woocommerce-page form .form-row select {
  height: 45px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 43px;
}

/* ============ Header icon + logo sizing (sg2 additions) ============ */
.nav-utility .nav-ic svg { width: 18px; height: 18px; }
.nav-appoint .nav-appoint-ic { width: 15px; height: 15px; }
@media (max-width: 980px) {
  .m-utility { gap: 18px; }
  .m-utility .nav-ic svg { width: 21px; height: 21px; }
}

/* ============ Breadcrumb compact on mobile (sg2 additions) ============
   nav.pdp-breadcrumb (0,1,2) outranks the per-page .pdp-breadcrumb ol rules. */
@media (max-width: 782px) {
  nav.pdp-breadcrumb { padding: 13px 0; }
  nav.pdp-breadcrumb ol {
    font-size: 9px;
    letter-spacing: 0.1em;
    gap: 4px 7px;
  }
  nav.pdp-breadcrumb .crumb-home svg { width: 12px; height: 12px; }
}

/* ============ Breadcrumb home icon (sg2 additions) ============ */
.pdp-breadcrumb .crumb-home {
  display: inline-flex;
  align-items: center;
  color: rgba(26,23,20,0.55);
}
.pdp-breadcrumb .crumb-home svg { display: block; }
.pdp-breadcrumb .crumb-home:hover { color: var(--gold); }
.pdp-breadcrumb ol { align-items: center; }

/* ============ Unified price typography (sg2 additions) ============
   Every monetary amount uses one font site-wide: Geist, upright, regular.
   The amount span carries the price text in all contexts, so setting it
   here overrides the per-component parent fonts (incl. bold from <strong>/
   <b> wrappers); sizes stay context-driven. */
.woocommerce-Price-amount {
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* ============ Touch: neutralise product-card hover (sg2 additions) ============
   A :hover effect makes touch browsers require a first tap to "hover" and a
   second to open the link (the reported "double tap to open"). On touch we
   disable the card hover effects and show the wishlist heart by default, so a
   single tap opens the product. !important is required because the per-page
   card CSS (shop/home/product) loads after base.css. */
@media (hover: none) {
  .new-card:hover { transform: none !important; box-shadow: none !important; }
  .new-card:hover .new-media img { transform: none !important; }
  .new-card:hover .new-cta { color: inherit !important; gap: inherit !important; }
  .card-wish { opacity: 1 !important; transform: none !important; }
  .pdp-main:hover img { transform: none !important; }
}

/* ============ Search overlay (sg2 additions) ============ */
button.nav-ic { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }

.sg2-search {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(244,243,239,0.98);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.sg2-search.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.sg2-search-inner {
  width: 100%;
  max-width: 760px;
  margin-top: 16vh;
  padding: 0 28px;
}
.sg2-search-form .eyebrow { display: block; margin-bottom: 16px; }
.sg2-search-field {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px;
}
.sg2-search-ic { color: rgba(26,23,20,0.5); flex-shrink: 0; }
.sg2-search-field input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(24px, 4vw, 40px);
  font-style: italic;
  color: var(--ink);
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.sg2-search-field input[type="search"]:focus { outline: none; }
.sg2-search-field input[type="search"]::placeholder { color: rgba(26,23,20,0.3); font-style: normal; }
.sg2-search-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.sg2-search-submit {
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color .2s;
}
.sg2-search-submit:hover { color: var(--gold); }
.sg2-search-close {
  position: fixed;
  top: 22px; right: 22px;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid rgba(26,23,20,0.2);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.sg2-search-close:hover { border-color: var(--gold); color: var(--gold); }

/* search overlay: recommended products shown before typing */
.sg2-search-suggest { margin-top: 38px; }
.sg2-search-suggest .eyebrow { display: block; margin-bottom: 16px; color: rgba(26,23,20,0.55); }
.sg2-search-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sg2-search-prod { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.sg2-search-prod-img { display: block; aspect-ratio: 1 / 1; background: var(--white); border: 1px solid rgba(26,23,20,0.08); overflow: hidden; }
.sg2-search-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sg2-search-prod:hover .sg2-search-prod-img img { transform: scale(1.05); }
.sg2-search-prod-name { font-size: 12.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.sg2-search-prod:hover .sg2-search-prod-name { color: var(--gold); }
.sg2-search-prod-price { font-family: "Geist Mono", monospace; font-size: 11px; color: rgba(26,23,20,0.7); margin-top: 2px; }
.sg2-search-prod-price del { opacity: 0.5; margin-right: 4px; }
.sg2-search-prod-price ins { text-decoration: none; color: var(--gold-text); }

@media (max-width: 600px) {
  .sg2-search-inner { margin-top: 12vh; padding: 0 20px; }
  .sg2-search-submit { font-size: 0; }
  .sg2-search-submit .arr { font-size: 18px; }
  .sg2-search-products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sg2-search-suggest { margin-top: 28px; }
}

/* ============ Google reviews section (sg2 additions) ============
   Lives in base.css, not home.css: the section renders on the front page, the
   Geschäfte page and the three Ankauf funnels, and home.css only loads on the
   front page + Eigenkollektion. Own head selector (.rev-head) for the same
   reason - .home-section-head is unstyled everywhere except the front page. */

/* Backgrounds keep each page's section rhythm: home sits between .home-services
   (white) and .home-locations (paper), the funnels follow .authority (white),
   and Geschäfte follows .shipping (paper). The sibling rule alternates the two
   stacked sections on Geschäfte so they don't read as one block. */
.rev { padding: 110px 0; }
.rev--home { background: var(--cream); }
.rev--funnel { background: var(--cream); }
.rev--page { background: var(--white); }
.rev--page + .rev--page { background: var(--cream); }
.rev--page + .rev--page .rev-card { border-color: rgba(26,23,20,0.10); }

.rev-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.rev-h {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-top: 14px;
}
.rev-h em { font-style: italic; color: var(--gold-text, #8b6f3f); }

.rev-summary { display: flex; align-items: center; gap: 12px; }
.rev-score-num {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 38px;
  line-height: 1;
  color: var(--gold-text, #8b6f3f);
}
.rev-count {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(26,23,20,0.6);
}

/* Two stacked layers instead of per-star SVG gradients: the Geschäfte page
   renders this part twice and duplicate gradient ids would collide. */
.rev-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  white-space: nowrap;
  color: rgba(26,23,20,0.16);
}
.rev-stars-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--gold);
}
.rev-stars svg { width: 16px; height: 16px; fill: currentColor; }

.rev-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rev-track:focus-visible { outline: 2px solid var(--gold-text, #8b6f3f); outline-offset: 4px; }

.rev-card {
  background: var(--white);
  border: 1px solid rgba(26,23,20,0.08);
  border-radius: 2px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rev-quote {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.45;
  margin: 0;
  flex: 1;
}
.rev-quote::before { content: "\201E"; }
.rev-quote::after { content: "\201C"; }
.rev-author {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.rev-meta { color: rgba(26,23,20,0.5); }
/* nbsp, not plain spaces: surrounding markup whitespace collapses. */
.rev-meta::before { content: "\00A0\00B7\00A0"; }

.rev-google { margin-top: 34px; }
/* --ink, not --gold-text: at 11px this is normal-size type and needs 4.5:1, but
   gold on --cream only reaches 4.26:1. Gold moves to the hover state, same as
   .home-section-link. The large type above (.rev-h em, .rev-score-num) stays gold
   - at 34px+ the 3:1 large-text threshold applies and 4.26:1 clears it. */
/* text-decoration: none is required - the theme has no global a-reset, so the
   UA underline would double up with the border-bottom. */
.rev-google a {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color .2s;
}
/* Move only the arrow (.btn-primary pattern) instead of growing the gap: these
   labels are long, and a widening gap would stretch the whole underline. */
.rev-google a .arr { display: inline-block; transition: transform .3s; }
.rev-google a:hover { color: var(--gold-text, #8b6f3f); }
.rev-google a:hover .arr { transform: translateX(4px); }
.rev-breakdown { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.rev-breakdown-item strong { font-weight: 400; color: var(--ink); }

@media (max-width: 1024px) {
  .rev { padding: 90px 0; }
}

/* Mobile: scroll-snap track, mirroring .home-new-grid rather than pulling in
   Swiper (which only loads on product pages). Bleed matches the 32px container
   padding below 1024px. */
@media (max-width: 760px) {
  .rev { padding: 72px 0; }
  .rev-head { margin-bottom: 32px; }
  .rev-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding: 4px 0 22px;
    margin-right: -32px;
    padding-right: 32px;
    scrollbar-width: thin;
    scrollbar-color: rgba(26,23,20,0.25) transparent;
  }
  .rev-track::-webkit-scrollbar { height: 6px; }
  .rev-track::-webkit-scrollbar-track { background: transparent; }
  .rev-track::-webkit-scrollbar-thumb { background: rgba(26,23,20,0.18); border-radius: 3px; }
  .rev-card { flex: 0 0 78vw; max-width: 320px; scroll-snap-align: start; }
  .rev-quote { font-size: 19px; }
  .rev-breakdown { flex-direction: column; gap: 12px; }
}

/* ============ Inline rating signal (sg2 additions) ============
   Compact form of the reviews section for the first screen: the hero meta line
   and the trust marquee. Everything else up there is self-reported - this is the
   one line that isn't, so it earns the space. */

.rev-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.rev-inline .rev-stars svg { width: 12px; height: 12px; }
/* Inherits the mono/uppercase/letter-spacing of its host (.home-hero-foot,
   .trust-inner) - only the number is lifted out. */
.rev-inline strong {
  font-weight: 400;
  color: var(--gold-text, #8b6f3f);
}

/* Inside the marquee the row must not carry the host's opacity twice, and the
   stars keep their own colour against the strip's muted text. */
.trust-inner .rev-inline { gap: 6px; }
.trust-inner .rev-inline .rev-stars { color: rgba(26,23,20,0.2); }

/* Below the funnel hero stat row, set apart by a rule - mirrors the front
   page's .home-hero-foot so the signal reads the same on every entry point. */
.rev-hero-rating {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(26,23,20,0.10);
  font-family: "Geist Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26,23,20,0.8);
}

/* GOLD.DE listing seal - the second outside verdict in the ankauf hero, sits
   right under the Google rating and shares its mono styling. */
.hero-seal {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: 20px;
  text-decoration: none;
  color: var(--ink);
}
.hero-seal img {
  width: 92px;
  height: 92px;
  display: block;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-seal:hover img { transform: scale(1.05) rotate(-2deg); }
.hero-seal-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-seal-kicker {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.hero-seal-name {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.05;
  color: var(--ink);
}
.hero-seal-link {
  font-family: "Geist Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26,23,20,0.45);
  transition: color 0.2s ease;
  margin-top: 2px;
}
.hero-seal-link .arr {
  display: inline-block;
  transition: transform 0.25s ease;
}
.hero-seal:hover .hero-seal-link { color: var(--gold-text); }
.hero-seal:hover .hero-seal-link .arr { transform: translateX(4px); }
/* When the Google rating is present the seal groups under it; when it is absent
   (no review data), the seal takes over its separating rule instead of clinging
   to the stat row above. */
.rev-hero-rating + .hero-seal { margin-top: 18px; }
.hero-stats + .hero-seal {
  margin-top: 32px;
  padding-top: 30px;
  border-top: 1px solid rgba(26,23,20,0.10);
}

@media (max-width: 760px) {
  .rev-inline { gap: 6px; }
  .rev-inline .rev-stars svg { width: 11px; height: 11px; }
}


/* All Cormorant headlines carry a touch more weight (500 instead of the
   default 400). Listed explicitly so body serif (.serif), rating figures and
   value numbers keep their lighter weight. Home headlines are set at their
   source in home.css; product/cart/shop each carry their own tail rule so the
   later stylesheet's specificity does not win back 400. */
.h1,
.section-head h2,
.adv-cell h3,
.p-body h4,
.auth-text blockquote,
.ship-card h4,
.faq-sticky h2,
.faq-contact b,
.faq-title,
.cta-main h2,
.m-foot-call b,
.briefing-title,
.loc-name,
.sg2-content-title,
.sg2-content--narrow h2,
.sg2-content--narrow h3,
.foot-news-text h3,
.sg2-content .woocommerce-MyAccount-content h3,
.rev-h {
  font-weight: 500;
}

/* Forced line break that only applies from tablet up: narrow viewports wrap the
   headline on their own, and an extra break there leaves an orphaned word. */
@media (max-width: 760px) {
  .br-desktop { display: none; }
}