/*!
 * Motse Boma Braai — site stylesheet
 * Layer order: tokens, base, layout, components, sections, utilities.
 * Add overrides in a later layer rather than reaching for !important.
 */
@layer tokens, base, layout, components, sections, utilities;

/* ============================================================
   1. TOKENS
   ============================================================ */
@layer tokens {
  :root {
    /* colour */
    --ink:        #090806;
    --ink-2:      #0d0b09;
    --ink-3:      #15110e;
    --paper:      #faf6ef;
    --paper-2:    #f3ede3;
    --ivory:      #efe8dd;
    --bronze:     #b98753;
    --bronze-hi:  #deb37f;
    --bronze-deep:#8f6947;
    --text:       #17120e;
    --muted:      #6b625a;
    --muted-lt:   #a3978b;
    --danger:     #a02a1e;
    --danger-bg:  #fbf0ee;
    --ok-bg:      #e9f3ea;
    --ok-fg:      #17492a;
    --hair:       rgba(25,19,14,.14);
    --hair-dk:    rgba(255,255,255,.13);
    --wa:         #1fa855;

    /* type */
    --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --fs-micro: .6875rem;   /* 11px */
    --fs-sm:    .8125rem;   /* 13px */
    --fs-body:  clamp(.9375rem, .9rem + .2vw, 1rem);
    --fs-lead:  clamp(1rem, .95rem + .3vw, 1.125rem);
    --fs-h1:    clamp(2.75rem, 1.6rem + 5.4vw, 6.5rem);
    --fs-h2:    clamp(2.125rem, 1.35rem + 3.4vw, 4.75rem);
    --fs-h3:    clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
    --fs-quote: clamp(2rem, 1.15rem + 3.9vw, 4.25rem);

    /* space + motion */
    --gutter: clamp(1.125rem, 4vw, 3rem);
    --shell:  1460px;
    --sect-y: clamp(4.5rem, 8vw, 10.5rem);
    --head-h: 68px;
    --ease:   cubic-bezier(.2,.75,.25,1);
    --shadow: 0 32px 90px rgba(20,14,9,.13);
    --shadow-sm: 0 18px 46px rgba(20,14,9,.09);
  }
  @media (min-width: 1080px) { :root { --head-h: 88px; } }
}

/* ============================================================
   2. BASE
   ============================================================ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--head-h) + 12px);
  }

  body {
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  body.is-locked { overflow: hidden; }

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

  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }

  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--bronze);
    outline-offset: 3px;
    border-radius: 1px;
  }
  .on-dark :focus-visible { outline-color: var(--bronze-hi); }

  h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.03em;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-h1); letter-spacing: -.045em; }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  p  { text-wrap: pretty; }

  ::selection { background: var(--bronze); color: #fff; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

/* ============================================================
   3. LAYOUT
   ============================================================ */
@layer layout {
  .shell {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
  }
  .shell--narrow { max-width: 980px; }

  .sect { padding-block: var(--sect-y); }
  .sect--ink   { background: var(--ink);   color: #c6bbae; }
  .sect--ink2  { background: var(--ink-2); color: #c6bbae; }
  .sect--paper { background: var(--paper); }
  .sect--paper2{ background: var(--paper-2); }
  .sect--ivory { background: var(--ivory); }
  .on-dark h2, .on-dark h3, .on-dark h4 { color: #f7efe5; }

  .stack > * + * { margin-top: var(--flow, 1rem); }

  .head { max-width: 60ch; margin-bottom: clamp(2.25rem, 5vw, 4.5rem); }
  .head--center { margin-inline: auto; text-align: center; }
  .head--center .eyebrow { justify-content: center; }
  .head--center .lead { margin-inline: auto; }
  .head h2 { margin-top: .7em; }
  .head .lead { margin-top: 1.35rem; }
}

/* ============================================================
   4. COMPONENTS
   ============================================================ */
@layer components {

  /* --- eyebrow / lead / note ------------------------------- */
  .eyebrow {
    display: flex;
    align-items: center;
    gap: .875rem;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--bronze-deep);
  }
  .eyebrow::before {
    content: "";
    inline-size: 2rem;
    block-size: 1px;
    background: currentColor;
    flex: none;
  }
  .on-dark .eyebrow { color: var(--bronze-hi); }

  .lead {
    font-size: var(--fs-lead);
    line-height: 1.75;
    color: var(--muted);
    max-width: 58ch;
  }
  .on-dark .lead { color: var(--muted-lt); }

  .note {
    border-left: 2px solid var(--bronze);
    padding-left: .875rem;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--muted);
  }
  .on-dark .note { color: var(--muted-lt); border-left-color: var(--bronze-hi); }

  /* --- buttons --------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-height: 48px;
    padding: .9375rem 1.75rem;
    border: 1px solid var(--bronze-hi);
    background: var(--bronze);
    color: #fff;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    text-align: center;
    transition: background .28s var(--ease), border-color .28s var(--ease),
                transform .28s var(--ease), box-shadow .28s var(--ease);
  }
  .btn svg { inline-size: 1rem; block-size: 1rem; flex: none; }
  .btn:hover {
    background: #c99660;
    border-color: #c99660;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(185,135,83,.24);
  }
  .btn--ghost {
    background: transparent;
    border-color: color-mix(in srgb, currentColor 40%, transparent);
    color: var(--text);
  }
  .btn--ghost:hover { background: var(--ink-3); border-color: var(--ink-3); color: #fff; }
  .on-dark .btn--ghost { color: #f4ece2; border-color: rgba(255,255,255,.34); }
  .on-dark .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
  .btn--sm { min-height: 42px; padding: .625rem 1.125rem; }
  .btn--block { inline-size: 100%; }

  .textlink {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .375rem;
    border-bottom: 1px solid var(--bronze);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--bronze-deep);
  }
  .textlink svg { inline-size: .9375rem; block-size: .9375rem; transition: transform .3s var(--ease); }
  .textlink:hover svg { transform: translateX(5px); }
  .on-dark .textlink { color: var(--bronze-hi); }

  .skip {
    position: fixed;
    inset-inline-start: 12px;
    inset-block-start: -100px;
    z-index: 999;
    padding: .875rem 1.25rem;
    background: var(--bronze);
    color: #fff;
    font-weight: 700;
    transition: inset-block-start .2s;
  }
  .skip:focus { inset-block-start: 12px; }

  /* --- brand lockup ---------------------------------------- */
  .brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
  .brand__mark {
    inline-size: 46px;
    block-size: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #f1ece4;
    border: 1px solid rgba(208,151,89,.5);
  }
  .brand__mark img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .brand__name { display: flex; flex-direction: column; min-width: 0; }
  .brand__name b {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.15;
    color: #f6f1e9;
    white-space: nowrap;
  }
  .brand__name small {
    margin-top: .375rem;
    font-size: .4375rem;
    font-weight: 500;
    letter-spacing: .26em;
    color: #9c9084;
    white-space: nowrap;
  }
  @media (min-width: 1080px) {
    .brand__mark { inline-size: 52px; block-size: 52px; flex-basis: 52px; }
    .brand__name b { font-size: .8125rem; }
    .brand__name small { font-size: .5rem; }
  }

  /* --- header ---------------------------------------------- */
  .hdr {
    position: sticky;
    inset-block-start: 0;
    z-index: 60;
    background: linear-gradient(to bottom, rgba(8,7,6,.9), rgba(8,7,6,.6));
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    transition: background .35s var(--ease), box-shadow .35s var(--ease);
  }
  .hdr[data-stuck="true"] {
    background: rgba(8,7,6,.94);
    box-shadow: 0 10px 34px rgba(0,0,0,.28);
    border-bottom: 1px solid var(--hair-dk);
  }
  .hdr__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    block-size: var(--head-h);
    transition: block-size .35s var(--ease);
  }
  .nav { display: none; }
  .hdr__cta { display: flex; align-items: center; gap: .625rem; flex: none; }
  .hdr__cta .btn { display: none; }

  .burger {
    display: grid;
    place-items: center;
    inline-size: 46px;
    block-size: 46px;
    border: 1px solid rgba(255,255,255,.32);
    color: #f4ece2;
  }
  .burger svg { inline-size: 1.25rem; block-size: 1.25rem; }

  @media (min-width: 1080px) {
    .nav { display: flex; align-items: center; }
    .nav a {
      position: relative;
      padding: .625rem 1rem;
      font-size: .5625rem;
      font-weight: 500;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: #d5cec5;
      white-space: nowrap;
      transition: color .2s;
    }
    .nav a::after {
      content: "";
      position: absolute;
      inset-inline: 1rem;
      inset-block-end: .25rem;
      block-size: 1px;
      background: var(--bronze-hi);
      transform: scaleX(0);
      transition: transform .3s var(--ease);
    }
    .nav a:hover, .nav a[aria-current="true"] { color: #fff; }
    .nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
    .hdr__cta .btn { display: inline-flex; }
    .burger { display: none; }
  }

  /* --- drawer ---------------------------------------------- */
  .scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(8,7,6,.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .scrim[data-open="true"] { opacity: 1; visibility: visible; }

  .drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 100;
    inline-size: min(340px, 88vw);
    display: flex;
    flex-direction: column;
    padding: 1.125rem 1.375rem calc(1.5rem + env(safe-area-inset-bottom));
    background: var(--ink-2);
    color: #c6bbae;
    box-shadow: -28px 0 80px rgba(0,0,0,.45);
    transform: translateX(102%);
    transition: transform .36s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .drawer[data-open="true"] { transform: none; }
  .drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
  .drawer nav { display: flex; flex-direction: column; }
  .drawer nav a {
    padding: 1rem .125rem;
    border-bottom: 1px solid var(--hair-dk);
    font-size: .9375rem;
    letter-spacing: .1em;
  }
  .drawer nav a:hover { color: var(--bronze-hi); }
  .drawer__foot {
    margin-top: auto;
    padding-top: 1.5rem;
    display: grid;
    gap: .5rem;
    font-size: var(--fs-sm);
    color: var(--muted-lt);
  }

  /* --- forms ----------------------------------------------- */
  .card {
    background: #fdfbf7;
    box-shadow: var(--shadow);
    padding: clamp(1.375rem, 4vw, 3rem);
  }
  .field { display: grid; gap: .5rem; margin-bottom: 1.125rem; }
  .field > label, .field > .field__label {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #786e65;
  }
  .req { color: var(--bronze-deep); }
  .field input, .field select, .field textarea {
    inline-size: 100%;
    min-block-size: 52px;
    padding: .875rem .9375rem;
    border: 1px solid #d6c8b7;
    border-radius: 0;
    background: #fbf8f2;
    font-size: 1rem; /* 16px — stops iOS zoom-on-focus */
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .field textarea { min-block-size: 120px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--bronze);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(185,135,83,.14);
  }
  .field[data-invalid="true"] input,
  .field[data-invalid="true"] select,
  .field[data-invalid="true"] textarea { border-color: var(--danger); background: var(--danger-bg); }
  .field__error { display: none; font-size: var(--fs-sm); font-weight: 500; color: var(--danger); }
  .field[data-invalid="true"] .field__error { display: block; }

  .pair { display: grid; gap: 1rem; }
  @media (min-width: 560px) { .pair { grid-template-columns: 1fr 1fr; } }

  .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  .chip, .slot {
    min-height: 46px;
    padding: .625rem 1rem;
    border: 1px solid #d6c8b7;
    background: #fff;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: border-color .2s, background .2s, color .2s;
  }
  .chip:hover, .slot:hover:not(:disabled) { border-color: var(--bronze); }
  .chip[aria-pressed="true"], .slot[aria-pressed="true"] {
    background: var(--ink-3);
    border-color: var(--ink-3);
    color: #fff;
  }
  .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
  .slots p { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }
  .slot:disabled { opacity: .34; cursor: not-allowed; text-decoration: line-through; }

  /* dark form variant */
  .card--dark { background: var(--ink-2); box-shadow: none; border: 1px solid rgba(185,135,83,.26); }
  .card--dark .field > label, .card--dark .field > .field__label { color: #9a8e82; }
  .card--dark input, .card--dark select, .card--dark textarea {
    background: #100e0c; border-color: #3a322c; color: #f4ece2;
  }
  .card--dark input:focus, .card--dark textarea:focus { background: #17130f; }
  .card--dark .slot { background: #100e0c; border-color: #3a322c; color: #e3d8cb; }
  .card--dark .slot[aria-pressed="true"] { background: var(--bronze); border-color: var(--bronze); color: #fff; }

  /* honeypot */
  .hp { position: absolute !important; left: -9999px !important; inline-size: 1px; block-size: 1px; overflow: hidden; }

  /* server-side notice (WordPress handler writes into this) */
  .motse-alert { padding: .875rem var(--gutter); text-align: center; font-size: var(--fs-sm); font-weight: 700; }
  .motse-alert.success { background: var(--ok-bg); color: var(--ok-fg); }
  .motse-alert.error   { background: var(--danger-bg); color: var(--danger); }

  /* --- toast ------------------------------------------------ */
  .toast {
    position: fixed;
    inset-inline: var(--gutter);
    inset-block-end: calc(1.25rem + env(safe-area-inset-bottom));
    z-index: 120;
    margin-inline: auto;
    max-inline-size: 26rem;
    padding: .875rem 1.125rem;
    background: var(--ink-3);
    border: 1px solid var(--bronze);
    color: var(--bronze-hi);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .toast[data-show="true"] { opacity: 1; visibility: visible; transform: none; }

  /* --- WhatsApp FAB ---------------------------------------- */
  .wa {
    position: fixed;
    inset-inline-end: calc(.875rem + env(safe-area-inset-right));
    inset-block-end: calc(.875rem + env(safe-area-inset-bottom));
    z-index: 80;
    display: grid;
    place-items: center;
    inline-size: 54px;
    block-size: 54px;
    border-radius: 50%;
    background: var(--ink-3);
    border: 1px solid rgba(222,179,127,.38);
    color: var(--bronze-hi);
    box-shadow: 0 20px 46px rgba(0,0,0,.34);
    transition: transform .25s var(--ease), background .25s;
  }
  .wa:hover { transform: translateY(-3px); background: #1e1915; }
  .wa svg { inline-size: 1.375rem; block-size: 1.375rem; }
  @media (min-width: 1080px) {
    .wa { inset-inline-end: 1.375rem; inset-block-end: 1.375rem; inline-size: 58px; block-size: 58px; }
  }

  /* --- reveal ---------------------------------------------- */
  .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .rv[data-in="true"] { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }
}

/* ============================================================
   5. SECTIONS
   ============================================================ */
@layer sections {

  /* --- hero ------------------------------------------------- */
  .hero {
    position: relative;
    margin-block-start: calc(var(--head-h) * -1);
    background: var(--ink);
    color: #c3b8ac;
    isolation: isolate;
  }
  .hero__inner { inline-size: 100%; max-inline-size: none; margin: 0; }
  /* The frame is cut to the photo's own proportions (1129x1400) plus a
     10% crop allowance, so roughly 90% of the image is always on screen. */
  .hero__media {
    position: relative;
    aspect-ratio: 1129 / 1260;
    inline-size: min(100%, calc(76svh * .896));
    margin-inline: auto;
    overflow: hidden;
  }
  .hero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(.82) contrast(1.08) brightness(.76);
  }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 30%, rgba(9,8,6,0) 74%, var(--ink) 100%);
    pointer-events: none;
  }
  .hero__copy { padding: 1.75rem var(--gutter) 3.5rem; }
  .hero h1 { margin-block: 1.125rem 1.25rem; color: #f8f2e8; max-inline-size: 9ch; }
  .hero h1 em { display: block; font-style: normal; color: var(--bronze-hi); }
  .hero__sub { max-inline-size: 44ch; color: #b9aea2; line-height: 1.8; }
  .hero__act { display: grid; gap: .625rem; margin-block-start: 1.75rem; }
  .hero__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-block-start: 2.25rem;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .hero__facts > div { padding: 1rem 1.25rem 0 0; }
  .hero__facts dt { font-size: .4375rem; letter-spacing: .28em; text-transform: uppercase; color: #7d746b; }
  .hero__facts dd { margin-top: .5rem; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: #e9dfd3; }

  @media (min-width: 640px) {
    .hero__act { grid-auto-flow: column; justify-content: start; gap: .75rem; }
    .hero__facts { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 1080px) {
    .hero { min-block-size: 100svh; display: grid; }
    .hero__inner {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: minmax(0, 42%) minmax(0, 58%);
      align-items: center;
      padding-inline-start: max(var(--gutter), calc((100% - var(--shell)) / 2));
    }
    .hero__copy {
      padding-block: calc(var(--head-h) + 3.5rem) 4.5rem;
      padding-inline: 0 clamp(2rem, 3.4vw, 4rem);
      max-inline-size: 720px;
    }
    .hero__media {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      block-size: 100%;
      inline-size: auto;
      max-inline-size: 58%;
      margin-inline: 0;
    }
    .hero__media::after {
      background:
        linear-gradient(90deg, var(--ink) 0%, rgba(9,8,6,.62) 14%, rgba(9,8,6,.14) 38%, rgba(9,8,6,0) 62%),
        linear-gradient(180deg, rgba(0,0,0,.2), transparent 26%, transparent 72%, rgba(0,0,0,.3));
    }
    .hero__media img { animation: heroPan 26s ease-in-out infinite alternate; }
    .hero h1 { max-inline-size: 7.6ch; margin-block: 1.75rem 2rem; }
    .hero__act { margin-block-start: 2.5rem; }
    .hero__facts { margin-block-start: 3.5rem; max-inline-size: 40rem; }
  }
  /* Pans through the 10% crop instead of scaling in, so the visible
     portion never drops below ~90% of the photo. */
  @keyframes heroPan {
    from { object-position: center 0%; }
    to   { object-position: center 100%; }
  }
  @media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; } }

  /* --- editorial bands -------------------------------------- */
  .band {
    background: var(--ink-2);
    color: #c6bbae;
    border-block: 1px solid rgba(185,135,83,.2);
    padding-block: clamp(3rem, 6vw, 5rem);
  }
  .band__grid { display: grid; gap: 1.75rem; }
  .band__index { font-size: .5rem; font-weight: 700; letter-spacing: .34em; color: var(--bronze-hi); }
  .band__quote {
    font-family: var(--serif);
    font-size: var(--fs-quote);
    line-height: 1;
    letter-spacing: -.035em;
    color: #f7efe5;
    margin-bottom: 1.25rem;
  }
  .band__quote em { font-style: italic; color: var(--bronze-hi); }
  .band__body { font-size: var(--fs-sm); line-height: 1.95; color: #9f958b; max-inline-size: 62ch; }
  .band__stamp {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding-top: 1.375rem;
    border-top: 1px solid rgba(185,135,83,.32);
  }
  .band__stamp span { font-size: .5rem; letter-spacing: .26em; color: #887c70; }
  .band__stamp b { font-family: var(--serif); font-size: 3.25rem; font-weight: 500; line-height: .8; color: var(--bronze-hi); }
  @media (min-width: 1080px) {
    .band__grid { grid-template-columns: .5fr 1.6fr .44fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
    .band__index { align-self: start; padding-top: .625rem; }
    .band__stamp {
      flex-direction: column;
      align-items: flex-end;
      gap: .5rem;
      text-align: right;
      padding: 0 0 0 2rem;
      border-top: 0;
      border-left: 1px solid rgba(185,135,83,.34);
    }
    .band__stamp b { font-size: 5rem; }
  }

  /* --- signature -------------------------------------------- */
  .signature { background: var(--ivory); padding-block: clamp(4rem, 8vw, 9rem); border-bottom: 1px solid var(--hair); }
  .signature__grid { display: grid; gap: 2rem; }
  .signature__index { font-size: .5rem; font-weight: 700; letter-spacing: .34em; color: #8c7762; }
  .signature__eyebrow { font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; color: #9c7958; margin-bottom: 1.5rem; }
  .signature h2 { max-inline-size: 10ch; color: #17120e; }
  .signature h2 span { display: block; font-style: italic; color: #8f6947; }
  .signature__detail { padding-top: 1.5rem; border-top: 1px solid #cdbca9; }
  .signature__detail p { color: #6e645b; font-size: var(--fs-sm); line-height: 1.9; }
  .signature__detail .textlink { margin-top: 1.5rem; }
  @media (min-width: 1080px) {
    .signature__grid { grid-template-columns: .5fr 1.6fr .8fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
    .signature__index { align-self: start; padding-top: .625rem; }
    .signature__detail { padding: 0 0 0 clamp(1.5rem, 3vw, 2.75rem); border-top: 0; border-left: 1px solid #cdbca9; }
  }

  /* --- products --------------------------------------------- */
  #products { background: #f8f4ed; }
  .products { display: grid; gap: 1.25rem; }
  @media (min-width: 640px)  { .products { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
  @media (min-width: 1240px) { .products { grid-template-columns: repeat(4, 1fr); } }

  .product {
    display: flex;
    flex-direction: column;
    background: #fcfaf6;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  .product:hover { transform: translateY(-6px); box-shadow: 0 38px 90px rgba(25,18,12,.15); }
  .product__art { position: relative; block-size: clamp(240px, 32vw, 400px); background: var(--ink-3); }
  .product__art img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: saturate(.8) contrast(1.06);
    transition: transform 1.1s var(--ease), filter .8s;
  }
  .product__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,.42));
    pointer-events: none;
  }
  .product:hover .product__art img { transform: scale(1.045); filter: saturate(.96) contrast(1.03); }
  .product__body { display: flex; flex-direction: column; gap: .75rem; flex: 1; padding: 1.5rem 1.5rem 1.75rem; }
  .product__body > p { font-size: var(--fs-sm); line-height: 1.8; color: #6f665e; flex: 1; }
  .product__specs {
    display: grid;
    gap: .4375rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hair);
    font-size: .625rem;
    letter-spacing: .04em;
    color: #80766d;
  }
  .product__specs div { display: flex; gap: .5rem; }
  .product__specs dt { font-weight: 700; color: #554c44; white-space: nowrap; }
  .product__specs dt::after { content: " ·"; }
  .product__go {
    align-self: flex-start;
    margin-top: .5rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--bronze);
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--bronze-deep);
  }
  @media (prefers-reduced-motion: reduce) { .product__art img { transition: none; } }

  /* --- gallery rail ----------------------------------------- */
  #gallery { background: var(--ink); color: #c6bbae; overflow: hidden; }
  .gallery__head { display: grid; gap: 1rem; margin-bottom: 2rem; }
  .gallery__head h2 { margin: 0; max-inline-size: 9ch; }
  .gallery__head .lead { margin: 0; }
  @media (min-width: 1080px) {
    .gallery__head { grid-template-columns: .55fr 1.45fr; column-gap: 3.5rem; align-items: end; }
    .gallery__head .eyebrow { align-self: start; margin-top: 1rem; }
    .gallery__head .lead { grid-column: 2; max-inline-size: 48ch; }
  }
  .rail__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: .5rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #83786e;
  }
  .rail__track { inline-size: min(44vw, 420px); block-size: 1px; background: rgba(255,255,255,.14); overflow: hidden; }
  .rail__track i { display: block; block-size: 100%; background: var(--bronze-hi); transform-origin: left; transform: scaleX(.24); transition: transform .12s linear; }
  .rail {
    display: flex;
    gap: .875rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: .25rem var(--gutter) 1.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail figure {
    position: relative;
    flex: 0 0 min(66vw, 300px);
    block-size: min(84vw, 390px);
    background: var(--ink-3);
    overflow: hidden;
    scroll-snap-align: start;
  }
  .rail figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: saturate(.74) contrast(1.08) brightness(.92);
    transition: transform 1.2s var(--ease), filter .8s;
  }
  .rail figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.56), transparent 46%);
    pointer-events: none;
  }
  .rail figcaption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    padding: 3rem 1rem 1rem;
    font-size: .5625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #f1e7db;
  }
  @media (min-width: 900px) {
    .rail { gap: 1.25rem; }
    .rail figure { flex-basis: clamp(280px, 26vw, 400px); block-size: clamp(360px, 34vw, 520px); }
    .rail figure:nth-child(even) { margin-block-start: 2rem; }
    .rail figure:hover img { transform: scale(1.04); filter: saturate(.95) contrast(1.03); }
  }
  @media (prefers-reduced-motion: reduce) { .rail figure img { transition: none; } }

  /* --- manifesto -------------------------------------------- */
  .manifesto {
    background: var(--ink-2);
    color: #c6bbae;
    border-block: 1px solid rgba(185,135,83,.2);
    padding-block: clamp(4rem, 8vw, 8.5rem);
  }
  .manifesto__grid { display: grid; gap: 1.75rem; }
  .manifesto__kicker { font-size: .5rem; font-weight: 700; letter-spacing: .34em; color: #aa7d52; }
  .manifesto__line {
    font-family: var(--serif);
    font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5rem);
    line-height: .95;
    letter-spacing: -.04em;
    color: #f5ede3;
  }
  .manifesto__line em { font-style: italic; color: var(--bronze-hi); }
  .manifesto__small {
    font-size: var(--fs-sm);
    line-height: 1.9;
    color: #9d9287;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(185,135,83,.4);
  }
  @media (min-width: 1080px) {
    .manifesto__grid { grid-template-columns: .55fr 1.55fr .72fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
    .manifesto__kicker { align-self: start; padding-top: .75rem; }
    .manifesto__small { padding: 0 0 0 1.75rem; border-top: 0; border-left: 1px solid rgba(185,135,83,.4); }
  }

  /* --- process ---------------------------------------------- */
  #process { background: var(--paper-2); }
  .steps { display: grid; gap: 0; border-top: 1px solid #bfa88e; }
  .step { padding-block: 1.75rem; }
  .step + .step { border-top: 1px solid #cfc0ae; }
  .step__n { font-family: var(--serif); font-style: italic; font-size: 2.75rem; line-height: 1; color: #9d6d43; }
  .step h3 { margin-block: 1rem .625rem; }
  .step p { font-size: var(--fs-sm); line-height: 1.85; color: #6f665e; }
  @media (min-width: 720px) {
    .steps { grid-template-columns: 1fr 1fr; }
    .step { padding: 2rem 1.75rem 1.5rem 0; }
    .step + .step { border-top: 0; }
    .step:nth-child(even) { padding-left: 1.75rem; border-left: 1px solid #cfc0ae; }
    .step:nth-child(n+3) { border-top: 1px solid #cfc0ae; }
  }
  @media (min-width: 1080px) {
    .steps { grid-template-columns: repeat(4, 1fr); }
    .step + .step { padding-left: 2rem; border-left: 1px solid #cfc0ae; }
    .step:nth-child(n+3) { border-top: 0; }
    .step__n { font-size: 3.375rem; }
  }

  /* --- at a glance ------------------------------------------ */
  #facts { background: var(--paper); }
  .facts { display: grid; gap: 0; border-top: 1px solid var(--hair); }
  .facts > div { padding-block: 1.125rem; border-bottom: 1px solid var(--hair); }
  .facts dt { font-size: .5rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--bronze-deep); }
  .facts dd { margin-top: .5rem; font-size: var(--fs-sm); line-height: 1.7; color: var(--text); }
  @media (min-width: 640px) { .facts { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
  @media (min-width: 1080px) { .facts { grid-template-columns: repeat(3, 1fr); column-gap: 3.5rem; } }

  /* --- coverage --------------------------------------------- */
  #coverage { background: var(--ink); color: #c6bbae; }
  .coverage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(185,135,83,.2);
    border: 1px solid rgba(185,135,83,.2);
  }
  .coverage li {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-block-size: 66px;
    padding: 1rem 1.125rem;
    background: var(--ink-2);
    color: #d8cfc4;
    font-size: .6875rem;
    letter-spacing: .08em;
    transition: background .3s, color .3s;
  }
  .coverage li::before { content: ""; inline-size: 4px; block-size: 4px; background: var(--bronze-hi); flex: none; }
  .coverage li:hover { background: #15110e; color: #fff; }
  @media (min-width: 720px) { .coverage { grid-template-columns: repeat(3, 1fr); } }

  /* --- quote block ------------------------------------------ */
  #quote { background: #f7f2ea; }
  .quote-grid { display: grid; gap: 1.5rem; align-items: start; }
  @media (min-width: 1080px) { .quote-grid { grid-template-columns: 1.15fr .85fr; gap: 2rem; } }

  .why {
    background: var(--ink-2);
    color: #c6bbae;
    border: 1px solid rgba(185,135,83,.26);
    padding: clamp(1.5rem, 4vw, 2.75rem);
  }
  .why h3 { color: #f7efe5; margin-bottom: 1.125rem; }
  .why ul { display: grid; gap: .875rem; font-size: var(--fs-sm); line-height: 1.7; }
  .why li { display: flex; gap: .75rem; align-items: flex-start; }
  .why li::before { content: "✦"; color: var(--bronze-hi); flex: none; line-height: 1.6; }
  .why__cta { display: grid; gap: .5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hair-dk); }

  /* --- FAQ (native disclosure) ------------------------------ */
  #faq { background: var(--paper); }
  .faq { border-top: 1px solid var(--ink-3); }
  .faq details { border-bottom: 1px solid var(--hair); }
  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem .25rem;
    font-family: var(--serif);
    font-size: clamp(1.25rem, 1rem + 1.1vw, 2.125rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.02em;
    cursor: pointer;
    list-style: none;
    transition: color .25s var(--ease);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "";
    inline-size: 32px;
    block-size: 32px;
    flex: none;
    border: 1px solid #cfc3b5;
    border-radius: 50%;
    background:
      linear-gradient(currentColor, currentColor) center / 11px 1px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1px 11px no-repeat;
    transition: transform .3s var(--ease), background-color .25s, border-color .25s;
  }
  .faq summary:hover { color: var(--bronze-deep); }
  .faq details[open] summary::after {
    transform: rotate(135deg);
    background-color: var(--ink-3);
    border-color: var(--ink-3);
    color: #fff;
  }
  .faq details > div { padding: 0 2.5rem 1.5rem .25rem; }
  .faq p { font-size: var(--fs-sm); line-height: 1.85; color: var(--muted); max-inline-size: 72ch; }

  /* --- visit / contact -------------------------------------- */
  #visit { background: var(--ivory); }
  .visit-grid { display: grid; gap: 1.5rem; align-items: start; }
  @media (min-width: 1080px) { .visit-grid { grid-template-columns: 1.2fr .8fr; gap: 2rem; } }

  .map {
    position: relative;
    aspect-ratio: 4 / 3;
    inline-size: 100%;
    background: var(--ink-3);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .map iframe { inline-size: 100%; block-size: 100%; border: 0; filter: grayscale(.72) sepia(.08) contrast(1.08); }
  .map__facade {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .875rem;
    padding: 1.5rem;
    text-align: center;
    color: #d8cfc4;
    background:
      radial-gradient(circle at 50% 42%, rgba(185,135,83,.24), transparent 62%),
      repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px),
      var(--ink-3);
  }
  .map__facade svg { inline-size: 2rem; block-size: 2rem; color: var(--bronze-hi); }
  .map__facade b { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: #f4ece2; }
  .map__facade small { font-size: var(--fs-sm); color: var(--muted-lt); max-inline-size: 32ch; }
  @media (min-width: 640px) { .map { aspect-ratio: 16 / 10; } }

  .contact-mini {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .875rem;
    margin-top: 1.375rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--hair-dk);
    font-size: var(--fs-sm);
    color: #b8aa9d;
  }
  .contact-mini a:hover { color: var(--bronze-hi); }

  /* --- footer ----------------------------------------------- */
  .foot { background: #070605; color: #8c8177; padding-block: clamp(3rem, 6vw, 5.5rem) 0; }
  .foot__wm {
    display: block;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    font-family: var(--serif);
    font-size: clamp(5rem, 18vw, 17rem);
    line-height: .62;
    letter-spacing: -.07em;
    color: rgba(255,255,255,.035);
    user-select: none;
  }
  .foot__grid { display: grid; gap: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(185,135,83,.24); }
  .foot h2 { font-size: .5rem; font-family: var(--sans); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-hi); margin-bottom: .9375rem; }
  .foot ul { display: grid; gap: .5625rem; font-size: var(--fs-sm); }
  .foot a:hover { color: var(--paper); }
  .foot address { font-style: normal; }
  .foot__bar {
    display: grid;
    gap: .625rem;
    margin-top: 2.5rem;
    padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hair-dk);
    font-size: var(--fs-sm);
  }
  @media (min-width: 640px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
  @media (min-width: 1080px) {
    .foot__grid { grid-template-columns: 1.7fr 1fr 1fr 1.15fr; }
    .foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .625rem 1.5rem; }
  }
}

/* ============================================================
   6. UTILITIES
   ============================================================ */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  [hidden] { display: none !important; }

  @media print {
    .hdr, .drawer, .scrim, .wa, .toast, .rail, .map, .skip { display: none !important; }
    body { background: #fff; color: #000; }
    .sect { padding-block: 1.5rem; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; }
  }
}

/* --- WordPress: server-rendered form notices ------------------------- */
@layer components {
  .card .motse-alert { margin-block-end: 1.25rem; }
  .card--dark .motse-alert.success { background: rgba(31,168,85,.16); color: #a6e2bb; }
  .card--dark .motse-alert.error   { background: rgba(160,42,30,.2);  color: #f0b3aa; }
}