/*
Theme Name:        Nikita van Zyl
Description:       One page artist site for Nikita van Zyl, Afrikaans vocalist. Bilingual (English and Afrikaans), two multi step enquiry forms that email the addresses set under Enquiries > Email settings, with every photo, number and social link editable in the Customiser.
Version:           1.0.0
Author:            Metamorph AI
Requires at least: 6.0
Tested up to:      7.1
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       nvz
*/

/* Self hosted web fonts, SIL Open Font License (see assets/fonts) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('assets/fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/inter-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   NIKITA VAN ZYL  |  Design tokens
   Blush ground, bronze and dusty rose on top. Bronze 5.2:1,
   rose 5.3:1, deep bronze 9.8:1, body text 14.9:1. Filled bronze buttons always
   carry a blush label, never a mid tone.
   ============================================================ */
:root{
  /* Paper, not ink. A blush cream ground with bronze on top.
     Contrast on #FAEDEB: bronze 5.3:1, deep bronze 9.9:1, body 15:1. */
  --ink:#FAEDEB;          /* page ground, blush */
  --ink-2:#F5E0DE;        /* alternating band, rose */
  --surface:#FEF8F7;      /* cards and panels */
  --surface-2:#F8E8E6;
  --line:rgba(150,84,80,.2);
  --line-strong:rgba(150,84,80,.42);

  --gold:#8E5630;         /* bronze, for accents, rules and small caps */
  --gold-light:#54331F;   /* deep bronze, for headings and emphasis */
  --gold-pale:#7A4A2C;
  --gold-deep:#CA9977;    /* soft bronze, decorative gradient ends only */
  --cream:#FEF8F7;        /* label colour on filled bronze */

  --rose:#B0616B;         /* dusty rose, decorative and large type only (3.9:1) */
  --rose-ink:#9A4A56;     /* rose for small type, 5.3:1 on the ground */
  --rose-soft:#EFC9C9;    /* rose fills and washes */

  --text:#241A18;         /* near black body copy */
  --text-2:#5E4A46;
  --text-3:#735A56;

  --font-display:'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-ui:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --pad:clamp(20px, 5vw, 80px);
  --maxw:1280px;
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg,video{max-width:100%;display:block}
figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--rose-ink);color:var(--cream)}

:focus-visible{
  outline:3px solid var(--gold-light);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:300;line-height:1.06;margin:0;letter-spacing:-.01em}
.d1{font-size:clamp(3.95rem, 15.5vw, 9.5rem)}
.d2{font-size:clamp(2.4rem, 6.2vw, 5.4rem)}
.d3{font-size:clamp(1.7rem, 3.4vw, 2.9rem)}
.d4{font-size:clamp(1.25rem, 2vw, 1.65rem)}
em, .it{font-style:italic}

.eyebrow{
  font-family:var(--font-ui);
  font-size:.62rem;
  font-weight:400;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--rose-ink);
  display:flex;align-items:center;gap:.9rem;
}
.eyebrow.center{justify-content:center}

.lead{font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--text-2);max-width:58ch}
.small{font-size:.82rem;color:var(--text-3);line-height:1.6}

.gold{color:var(--rose-ink)}
.shimmer{
  background:linear-gradient(100deg,var(--rose-ink) 0%,var(--gold) 22%,#42271A 44%,var(--rose-ink) 66%,var(--gold) 84%,var(--rose-ink) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:shimmer 9s linear infinite;
}
@keyframes shimmer{to{background-position:-250% 0}}
@media (prefers-reduced-motion: reduce){ .shimmer{animation:none;background-position:0 0} }

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.sec{padding-block:clamp(76px,11vw,168px)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

/* ---------- Scroll reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease-out), transform .95s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}.rv-d6{transition-delay:.54s}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1;transform:none;transition:none} }

/* Split-line heading reveal.
   The clip box is padded so descenders (g, y, p) are never sheared off,
   then pulled back with a matching negative margin so line spacing holds. */
.sl{display:block;overflow:hidden;padding:.06em .1em .4em;margin:-.06em -.1em -.4em}
.sl > span{display:block;padding-bottom:.24em;margin-bottom:-.24em;transform:translateY(130%);transition:transform 1.05s var(--ease-out)}
.in .sl > span, .sl.in > span{transform:none}
.sl-2 > span{transition-delay:.12s}
.sl-3 > span{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){ .sl > span{transform:none;transition:none} }

/* ---------- Buttons ----------
   Couture, not commerce: squared edges, hairline weight, wide tracking,
   light type. Restraint carries the luxury, so no heavy fills, no glow
   halos and no big lift on hover. */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:52px;padding:0 1.9rem;
  font-family:var(--font-ui);font-size:.68rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  border-radius:0;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), background .45s ease, color .35s ease, border-color .35s ease;
}
.btn > *{position:relative;z-index:2}

/* A slow sheen crosses the face on hover, the way light moves over metal */
.btn::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .9s var(--ease-out);pointer-events:none;
}
.btn:hover::after{left:150%}

.btn-gold{
  background:linear-gradient(180deg,#9E6138,var(--gold) 52%,#77441F);
  color:var(--cream); /* cream on rust, 8.1:1. Never a mid tone. */
  border:1px solid rgba(84,51,31,.35);
  box-shadow:0 4px 16px -10px rgba(84,51,31,.45);
}
.btn-gold:hover{
  background:linear-gradient(180deg,#A96A40,#874E2B 52%,#693B1F);
  transform:translateY(-2px);
  box-shadow:0 10px 26px -12px rgba(84,51,31,.55);
}
.btn-ghost{
  border:1px solid rgba(142,86,48,.3);color:var(--gold-light);background:transparent;
}
.btn-ghost:hover{border-color:rgba(142,86,48,.72);background:rgba(142,86,48,.06);transform:translateY(-2px)}
.btn-ghost::after{background:linear-gradient(100deg,transparent,rgba(84,51,31,.12),transparent)}

.btn-wa{border:1px solid rgba(18,140,75,.32);color:#0F6B3A;background:transparent}
.btn-wa:hover{border-color:rgba(18,140,75,.75);background:rgba(18,140,75,.09);transform:translateY(-2px)}
.btn-wa::after{background:linear-gradient(100deg,transparent,rgba(157,243,192,.14),transparent)}

.btn-lg{min-height:58px;padding:0 2.3rem;font-size:.7rem}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .btn,.btn:hover{transform:none}
  .btn::after{display:none}
}

.btn svg{width:15px;height:15px;flex:none}

/* Text link with gold underline sweep */
.tlink{position:relative;display:inline-block;color:var(--gold-light);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding-bottom:4px}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(.28);transform-origin:left;transition:transform .6s var(--ease-out)}
.tlink:hover::after{transform:scaleX(1)}

/* ---------- Image placeholders ---------- */
.ph{
  position:relative;overflow:hidden;
  background:
    linear-gradient(135deg, rgba(142,86,48,.07), rgba(142,86,48,.015) 40%, rgba(142,86,48,.06)),
    var(--surface);
  border:1px solid var(--line);
  display:grid;place-items:center;text-align:center;
  color:var(--text-3);
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg, rgba(142,86,48,.05) 0 1px, transparent 1px 13px);
  pointer-events:none;
}
.ph::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(84,51,31,.11),transparent);
  animation:sweep 5.5s var(--ease) infinite;
  pointer-events:none;
}
@keyframes sweep{0%{left:-60%}55%{left:120%}100%{left:120%}}
@media (prefers-reduced-motion: reduce){ .ph::after{animation:none;opacity:0} }
.ph__in{position:relative;z-index:2;padding:1.4rem;max-width:90%}
.ph__ico{width:38px;height:38px;margin:0 auto .8rem;opacity:.5;color:var(--gold)}
.ph__t{font-size:.63rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:.85;font-weight:600}
.ph__f{font-size:.68rem;color:var(--text-3);margin-top:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;line-height:1.5}
.ph__d{font-size:.63rem;color:var(--text-3);opacity:.7;margin-top:.25rem;letter-spacing:.08em}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:70;
  transition:background-color .6s var(--ease), backdrop-filter .6s var(--ease), border-color .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(250,237,235,.82);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:78px;min-width:0}
.brand{display:flex;align-items:baseline;gap:.55rem;font-family:var(--font-display);font-size:1.42rem;letter-spacing:.02em;white-space:nowrap;min-width:0;overflow:hidden}
.brand b{font-weight:600;color:var(--gold-light)}
.brand span{font-weight:300;color:var(--text)}
.nav__links{display:flex;align-items:center;gap:2.1rem;list-style:none;margin:0;padding:0}
.nav__links a{font-size:.67rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);font-weight:400;position:relative;padding:.4rem 0;transition:color .35s ease}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.nav__links a:hover{color:var(--gold-light)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__act{display:flex;align-items:center;gap:.85rem}
.nav__act .btn{min-height:42px;padding:0 1.3rem;font-size:.6rem;letter-spacing:.2em}

.lang{display:flex;align-items:center;border:1px solid rgba(142,86,48,.2);border-radius:99px;padding:2px;background:transparent}
.lang button{
  min-width:42px;min-height:38px;padding:0 .55rem;border-radius:99px;
  font-size:.6rem;letter-spacing:.18em;font-weight:500;color:var(--text-3);
  transition:background-color .35s ease,color .35s ease;
}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--cream)}

.burger{display:none;width:46px;height:46px;place-items:center;border:1px solid var(--line);border-radius:var(--r)}
.burger span{display:block;width:19px;height:1px;background:var(--gold-light);position:relative;transition:transform .4s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1px;background:var(--gold-light);transition:transform .4s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Mobile header ----------
   The serif wordmark loses its authority at small sizes, so on phones it
   becomes a stacked couture lockup: two tracked-out lines, tight leading,
   sitting cleanly in the top left. The controls beside it step back. */
@media (max-width:820px){
  .nav__in{height:66px}
  .brand{font-size:1.3rem;gap:.4rem}
  .nav__act{gap:.6rem}
  .lang button{min-width:40px;min-height:40px;font-size:.56rem;letter-spacing:.14em}
  .burger{width:42px;height:42px;border-color:rgba(142,86,48,.22)}
  .burger span,.burger span::before,.burger span::after{width:17px}
  .nav__links{inset:66px 0 auto 0 !important;max-height:calc(100dvh - 66px) !important}
  .nav.stuck{background:rgba(250,237,235,.88)}
}

@media (max-width:1000px){
  .nav__links{
    position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(254,248,247,.98);backdrop-filter:blur(20px);
    padding:1rem var(--pad) 2.2rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .4s var(--ease), transform .4s var(--ease);
    max-height:calc(100dvh - 78px);overflow:auto;
  }
  .nav.open .nav__links{opacity:1;transform:none;pointer-events:auto}
  .nav__links li{width:100%;border-bottom:1px solid rgba(142,86,48,.09)}
  .nav__links a{display:block;padding:1.05rem 0;font-size:.82rem}
  .burger{display:grid}
  .nav__act .btn{display:none}
}

/* ============================================================
   HERO
   LCP element is DOM text + a CSS gradient stage.
   The WebGL canvas boots only after load, desktop only.
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero__stage{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(120% 78% at 72% 32%, rgba(176,97,107,.17) 0%, rgba(176,97,107,.06) 34%, transparent 66%),
  radial-gradient(90% 60% at 12% 88%, rgba(239,201,201,.45) 0%, transparent 58%),
  linear-gradient(180deg,#FDF1EF 0%, var(--ink) 55%, var(--ink) 100%);
}
/* Scrim keeps the hero copy readable over the particle field.
   Text legibility always wins over the effect. */
.hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(95deg, var(--ink) 0%, rgba(250,237,235,.98) 32%, rgba(250,237,235,.86) 46%, rgba(250,237,235,.25) 62%, transparent 74%);}
@media (max-width:1000px){.hero__scrim{background:linear-gradient(180deg, rgba(250,237,235,.9) 0%, rgba(250,237,235,.72) 45%, rgba(250,237,235,.92) 100%)}}
.hero__grain{position:absolute;inset:0;z-index:-1;opacity:.2;pointer-events:none;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}
.hero__vig{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(78% 78% at 50% 46%, transparent 40%, rgba(250,237,235,.72) 100%)}

.hero__in{width:100%;padding-block:132px 118px;position:relative;z-index:2}
@media (max-width:820px){
  .hero__in{padding-block:104px 96px}
  .hero h1{margin-top:1.1rem;letter-spacing:-.045em}
  .hero__sub{margin-top:1.5rem;font-size:1rem;line-height:1.7}
  .hero__cta{margin-top:2rem}
  .hero .eyebrow{font-size:.58rem;letter-spacing:.26em;gap:.6rem}
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:1000px){.hero__grid{grid-template-columns:1fr;gap:38px}}

.hero h1{margin:1.5rem 0 0;letter-spacing:-.035em;line-height:.97}
.hero h1 .l2{padding-left:.09em;color:var(--gold-light)}
.hero__sub{margin-top:1.9rem;max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.6rem}
.dot-live{width:7px;height:7px;border-radius:99px;background:#1B7A43;box-shadow:0 0 0 0 rgba(27,122,67,.6);animation:pulse 2.4s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(27,122,67,0)}100%{box-shadow:0 0 0 0 rgba(27,122,67,0)}}
@media (prefers-reduced-motion: reduce){.dot-live{animation:none}}

/* Hero portrait frame with 3D tilt */
.tilt{perspective:1200px}
.tilt__c{transform-style:preserve-3d;transition:transform .9s var(--ease-out)}
.hero__port{position:relative}
.hero__port .shot{max-width:540px;margin-inline:auto}
.hero__badge{
  position:absolute;left:-6%;bottom:-4%;transform:translateZ(60px);
  background:rgba(254,248,247,.92);backdrop-filter:blur(10px);
  border:1px solid var(--line-strong);padding:.85rem 1.1rem;max-width:230px;
}
.hero__badge b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--gold-light);line-height:1}
.hero__badge span{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-top:.35rem}
@media (max-width:1000px){.hero__badge{left:auto;right:12px}}

.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:grid;place-items:center;gap:.6rem}
.scrollcue span{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-3)}
.scrollcue i{display:block;width:1px;height:52px;background:linear-gradient(180deg,var(--rose),transparent);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;top:-52px;left:0;width:1px;height:52px;background:var(--gold-light);animation:drop 2.6s var(--ease) infinite}
@keyframes drop{0%{top:-52px}60%,100%{top:52px}}
@media (prefers-reduced-motion: reduce){.scrollcue i::after{animation:none}}
@media (max-height:720px){.scrollcue{display:none}}

/* ---------- Photography ----------
   The hero and artist portraits are true cut-outs: the white studio
   sweep was flood filled to transparency in the WebP itself, so the
   figure stands on the cream with no box and the particle mic reads
   through the gaps. Alpha rather than mix-blend-mode, because the 3D
   tilt wrapper creates a stacking context that blend modes cannot
   cross. Everything else is a mounted print. */
.shot{position:relative;line-height:0;margin:0}
.shot img{display:block;width:100%;height:100%;object-fit:cover}

.cutout img{object-fit:contain;height:auto}

.print{overflow:hidden;border:1px solid var(--line);background:#fff;
  box-shadow:0 18px 44px -32px rgba(62,42,36,.55);
  transition:border-color .6s ease, box-shadow .8s var(--ease-out)}
.print img{transition:transform 1.3s var(--ease-out)}
.print:hover{border-color:var(--line-strong);box-shadow:0 26px 58px -30px rgba(62,42,36,.65)}
.print:hover img{transform:scale(1.035)}
@media (prefers-reduced-motion: reduce){ .print:hover img{transform:none} }

/* ---------- Marquee credits ---------- */
.mq{border-block:1px solid var(--line);padding-block:1.15rem;overflow:hidden;background:rgba(142,86,48,.02);position:relative}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:14vw;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.mq__t{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq__set{display:flex;flex:none;align-items:center}
.mq:hover .mq__t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.mq__t{animation:none}}
.mq__i{display:flex;align-items:center;gap:1.1rem;padding-inline:2.1rem;white-space:nowrap;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.mq__i b{color:var(--gold);font-weight:600}
.mq__i::after{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--rose);margin-left:1.1rem}

/* ---------- Section heading block ---------- */
.sh{max-width:74ch}
.sh .d2{margin-top:1.5rem}
.sh .lead{margin-top:1.6rem}
.sh.center{margin-inline:auto;text-align:center}
.sh.center .lead{margin-inline:auto}

/* ---------- ARTIST ---------- */
#kunstenaar{background:linear-gradient(180deg,var(--ink),var(--ink-2) 40%,var(--ink))}
.artist__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,84px);align-items:start;margin-top:clamp(44px,6vw,78px)}
@media (max-width:960px){.artist__grid{grid-template-columns:1fr}}
.artist__media{position:relative}
.artist__media .main{max-width:520px}
.artist__media .sub{aspect-ratio:1/1;position:absolute;right:-4%;bottom:2%;width:44%}
@media (max-width:520px){.artist__media .sub{position:static;width:100%;margin-top:18px}}
.spine{
  position:absolute;left:-58px;top:0;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:var(--text-3);
}
@media (max-width:1180px){.spine{display:none}}

.artist__body p{color:var(--text-2);margin:0 0 1.2rem}
.artist__body p.first{font-family:var(--font-display);font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.42;color:var(--text);font-weight:300}
.artist__body p.first .gold{font-style:italic}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.6rem}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--ink-2);padding:1.5rem 1.1rem;text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(2.1rem,4vw,3.1rem);line-height:1;color:var(--gold-light);font-weight:400}
.stat span{display:block;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-top:.6rem;line-height:1.5}

/* Timeline */
.tl{margin-top:clamp(50px,7vw,92px);position:relative}
.tl__line{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.tl__fill{position:absolute;left:0;top:9px;height:1px;background:linear-gradient(90deg,var(--gold),var(--rose));width:0;transition:width 1.9s var(--ease-out)}
.tl.in .tl__fill{width:100%}
.tl__row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.4rem;position:relative}
@media (max-width:900px){.tl__row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.4rem}.tl__line,.tl__fill{display:none}}
@media (max-width:520px){.tl__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tl__i{position:relative;padding-top:30px}
.tl__i::before{content:"";position:absolute;left:0;top:5px;width:9px;height:9px;transform:rotate(45deg);background:var(--ink);border:1px solid var(--rose);transition:background-color .5s ease}
.tl__i:hover::before{background:var(--rose)}
.tl__y{font-family:var(--font-display);font-size:1.35rem;color:var(--gold-light);line-height:1}
.tl__d{font-size:.76rem;color:var(--text-2);margin-top:.5rem;line-height:1.55}

/* ---------- REPERTOIRE chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.9rem}
.chip{border:1px solid var(--line);padding:.5rem 1rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);transition:border-color .4s ease,color .4s ease,background-color .4s ease}
.chip:hover{border-color:var(--rose);color:var(--rose-ink);background:rgba(176,97,107,.08)}

/* Rights notice: stated plainly, because licensing questions come up early */
.rights{margin-top:clamp(28px,4vw,42px);display:flex;gap:1rem;align-items:flex-start;
  border:1px solid var(--line);border-left:3px solid var(--rose);
  background:rgba(239,201,201,.28);padding:1.2rem 1.4rem}
.rights svg{width:20px;height:20px;color:var(--rose-ink);flex:none;margin-top:2px}
.rights p{margin:0}
.rights b{display:block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:.4rem}
.rights span{font-size:.84rem;color:var(--text-2);line-height:1.6}

/* ---------- PARTNERS ----------
   Four marks in a row. Each tile keeps the background its logo was drawn
   on, so nobody's brand gets recoloured, and the frame around them is
   what makes the row read as one thing. */
.pt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);
    margin-top:clamp(36px,4.5vw,60px)}
@media (max-width:900px){.pt{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pt__c{margin:0;border:1px solid var(--line);background:var(--surface);
  transition:border-color .5s ease,transform .6s var(--ease-out)}
.pt__c:hover{border-color:var(--line-strong);transform:translateY(-4px)}
@media (prefers-reduced-motion: reduce){.pt__c:hover{transform:none}}
.pt__c img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.pt__c figcaption{padding:1rem 1.1rem 1.15rem;border-top:1px solid var(--line)}
.pt__c b{display:block;font-family:var(--font-display);font-size:1.1rem;font-weight:400;color:var(--gold-light);line-height:1.2}
.pt__c span{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-ink);margin-top:.45rem}

.pt__note{margin:clamp(26px,3.4vw,38px) 0 0;display:flex;gap:1rem;align-items:flex-start;
  border:1px solid var(--line);border-left:3px solid var(--rose);
  background:rgba(239,201,201,.28);padding:1.2rem 1.4rem;font-size:.88rem;color:var(--text-2);line-height:1.65}
.pt__note svg{width:19px;height:19px;color:var(--rose-ink);flex:none;margin-top:3px}
.pt__note b{color:var(--gold-light);font-weight:600}

/* ---------- LIVE / event types ---------- */
.evs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(40px,5vw,66px)}
@media (max-width:900px){.evs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.evs{grid-template-columns:1fr}}
.ev{
  background:var(--ink);padding:clamp(1.5rem,2.4vw,2.2rem);text-align:left;position:relative;overflow:hidden;
  transition:background-color .55s ease;min-height:238px;display:flex;flex-direction:column;
}
.ev::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(142,86,48,.12),transparent 62%);opacity:0;transition:opacity .55s ease}
.ev:hover{background:var(--surface)}
.ev:hover::after{opacity:1}
.ev__ico{width:34px;height:34px;color:var(--gold);opacity:.9;margin-bottom:1.3rem;position:relative;z-index:2;transition:transform .6s var(--ease-out)}
.ev:hover .ev__ico{transform:translateY(-4px) scale(1.06)}
.ev h3{font-size:1.42rem;position:relative;z-index:2;font-weight:400}
.ev p{font-size:.84rem;color:var(--text-2);margin:.7rem 0 0;position:relative;z-index:2;line-height:1.6}
.ev__go{margin-top:auto;padding-top:1.3rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.5rem;position:relative;z-index:2;opacity:.65;transition:opacity .5s ease,gap .5s var(--ease-out)}
.ev:hover .ev__go{opacity:1;gap:.9rem}

/* ---------- GALLERY ----------
   Six smaller frames on a three column grid rather than four large ones,
   so the page reads as a contact sheet and each picture stays crisp. */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);
     margin-top:clamp(40px,5vw,66px);perspective:1400px}
.gal figure{aspect-ratio:4/5;transition:transform .8s var(--ease-out),border-color .6s ease;transform-style:preserve-3d}
.gal figure:hover{border-color:var(--gold);transform:translateZ(36px) scale(1.012)}
@media (prefers-reduced-motion: reduce){.gal figure:hover{transform:none}}
@media (max-width:820px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Photo bands ----------
   Quiet strips of photography that carry the eye between sections. One
   sits under the hero call to action, one above the questions. */
.band{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--ink-2);line-height:0}
.band img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.band--wide{aspect-ratio:32/10}
@media (max-width:820px){.band--wide{aspect-ratio:20/10}}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 0%,transparent 11%,transparent 89%,var(--ink) 100%)}

.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);
       margin-bottom:clamp(40px,5vw,64px)}
.strip figure{aspect-ratio:4/5}

/* ---------- TESTIMONIALS ---------- */
#getuigskrifte{background:var(--ink-2)}
.tst{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem;margin-top:clamp(40px,5vw,66px);align-items:start}
.tst__c{border:1px solid var(--line);background:var(--surface);padding:clamp(1.6rem,2.6vw,2.4rem);position:relative;transition:border-color .5s ease}
.tst__c:hover{border-color:var(--line-strong)}
.tst__q{position:absolute;top:14px;right:20px;font-family:var(--font-display);font-size:5.4rem;line-height:1;color:var(--rose);opacity:.3}
.tst__c blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,1.36rem);line-height:1.55;color:var(--text);font-weight:300;font-style:italic}
.tst__a{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
/* Initials are optically centred: no letter-spacing drift on the right,
   line-height 1 so the glyph box does not push the text upward. */
.tst__av{width:46px;height:46px;flex:none;border-radius:99px;border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-indent:.06em;
  color:var(--gold);background:rgba(142,86,48,.05);line-height:1;font-family:var(--font-ui)}
/* Scoped to the name block so these never reach .tst__av, which is
   also a span and would otherwise lose its centring to this rule. */
.tst__m{min-width:0}
.tst__m b{display:block;font-size:.86rem;color:var(--text);font-weight:500;line-height:1.35}
.tst__m span{display:block;font-size:.7rem;color:var(--text-3);margin-top:.15rem;line-height:1.5}

/* ---------- COACHING ---------- */
.coach{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,66px);align-items:center}
@media (max-width:900px){.coach{grid-template-columns:1fr}}
.coach .shot{aspect-ratio:4/5}
.ticks{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:.85rem}
.ticks li{display:flex;gap:.85rem;align-items:flex-start;font-size:.9rem;color:var(--text-2)}
.ticks svg{width:17px;height:17px;color:var(--rose-ink);flex:none;margin-top:3px}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(36px,5vw,58px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;font-family:var(--font-display);font-size:clamp(1.1rem,1.7vw,1.34rem);color:var(--text);transition:color .4s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-light)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1px;background:var(--gold);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:12px;top:50%;width:1px;height:13px;background:var(--gold);transform:translateY(-50%);transition:transform .45s var(--ease)}
.faq details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq p{margin:0 0 1.6rem;color:var(--text-2);font-size:.92rem;max-width:74ch}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;text-align:center;isolation:isolate;background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.cta::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 100% at 50% 100%, rgba(176,97,107,.16), transparent 70%)}
/* The particle microphone lives behind the booking band now, off to the
   right of the centred copy, where it has room and reads as intent. */
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;
    transition:opacity 1.8s var(--ease-out);pointer-events:none}
#gl.on{opacity:1}
.cta__in{position:relative;z-index:2}
.cta .btn{margin-top:2.4rem}
.contactline{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem 2.6rem;margin-top:2.6rem}
.contactline a{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--text-2);transition:color .35s ease}
.contactline a:hover{color:var(--gold-light)}
.contactline svg{width:16px;height:16px;color:var(--gold)}

/* ---------- FOOTER ---------- */
.ft{border-top:1px solid var(--line);background:var(--ink);padding-block:clamp(48px,6vw,76px) 0}
.ft__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.4rem}
@media (max-width:900px){.ft__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__grid{grid-template-columns:1fr}}
.ft h4{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-family:var(--font-ui);font-weight:600;margin-bottom:1.1rem}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ft a,.ft li{font-size:.84rem;color:var(--text-2)}
.ft a:hover{color:var(--gold-light)}
.ft__bot{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding-block:1.5rem 2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
.ft__bot p{margin:0;font-size:.74rem;color:var(--text-3)}
.socials{display:flex;gap:.6rem}
.socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);transition:border-color .4s ease,color .4s ease,transform .5s var(--ease-out)}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.socials svg{width:16px;height:16px}

/* ---------- Sticky mobile bar ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,237,235,.94);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .5s var(--ease-out);
}
.sticky.show{transform:none}
.sticky .btn{flex:1 1 0;min-width:0;min-height:52px;font-size:.7rem;padding:0 .9rem;overflow:hidden}
.sticky .btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sticky .btn-wa{flex:0 0 60px;padding:0}
@media (max-width:820px){.sticky{display:flex}}
body.modal-open .sticky{transform:translateY(110%)}

/* ---------- Touch sizing ----------
   Every link stays a 44px target, but the weight comes down: smaller type,
   tighter padding, hairline borders. Comfortable to hit, quiet to look at. */
@media (max-width:820px){
  .btn{min-height:48px;padding:0 1.35rem;font-size:.62rem;letter-spacing:.2em}
  .btn-lg{min-height:52px;padding:0 1.5rem;font-size:.64rem}
  .btn svg{width:14px;height:14px}
  .hero__cta{gap:.7rem}
  .hero__cta{flex-direction:column;align-items:flex-start}
  .hero__cta .btn{flex:0 0 auto;width:auto}
  .sticky .btn{min-height:50px;font-size:.62rem}
  .ft__bot{padding-bottom:96px}
  .ft ul{gap:0}
  .ft ul a{display:flex;align-items:center;min-height:44px;width:100%}
  .ft ul li{display:flex;align-items:center;min-height:40px}
  .contactline{gap:.2rem 2.2rem}
  .contactline a{min-height:46px}
  .brand{min-height:44px;align-items:center}
  .socials a{width:46px;height:46px}
  .chip{min-height:40px;display:inline-flex;align-items:center}
  .faq summary{padding-block:1.25rem}
  .tlink{min-height:44px;display:inline-flex;align-items:center}
  .coach a[href^="mailto"]{min-height:44px;display:inline-flex;align-items:center}
}

/* ============================================================
   BOOKING MODAL  |  3 steps, click triggered only.
   Click triggered popups convert far above auto open or exit
   intent, and they sit outside Google's intrusive interstitial
   policy entirely.
   ============================================================ */
.mdl{position:fixed;inset:0;z-index:100;display:none}
.mdl.open{display:block}
.mdl__bd{position:absolute;inset:0;background:rgba(62,42,36,.62);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);opacity:0;transition:opacity .45s var(--ease)}
.mdl.in .mdl__bd{opacity:1}
.mdl__sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;display:flex;align-items:flex-start;justify-content:center;padding:clamp(12px,4vh,56px) clamp(12px,4vw,24px)}
.mdl__d{
  position:relative;width:100%;max-width:660px;background:var(--surface);
  border:1px solid var(--line-strong);
  box-shadow:0 40px 100px -40px rgba(62,42,36,.45), 0 0 0 1px rgba(142,86,48,.1);
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  margin:auto;
}
.mdl.in .mdl__d{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .mdl__bd,.mdl__d{transition:none}
  .mdl__d{transform:none}
}
.mdl__d::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 60% at 50% 0%, rgba(142,86,48,.1), transparent 60%)}

.mdl__x{position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;color:var(--text-2);border:1px solid transparent;z-index:5;transition:color .3s ease,border-color .3s ease}
.mdl__x:hover{color:var(--gold);border-color:var(--line)}
.mdl__x svg{width:17px;height:17px}

.mdl__hd{padding:clamp(1.8rem,4vw,2.5rem) clamp(1.4rem,4vw,2.5rem) 0;position:relative;z-index:2}
.mdl__hd .eyebrow{font-size:.62rem}
.mdl__hd h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-top:.9rem;font-weight:400}
.mdl__hd p{margin:.7rem 0 0;font-size:.86rem;color:var(--text-2);max-width:52ch}

.prg{padding:1.5rem clamp(1.4rem,4vw,2.5rem) 0;position:relative;z-index:2}
.prg__t{display:flex;justify-content:space-between;align-items:center;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin-bottom:.6rem}
.prg__t b{color:var(--gold);font-weight:600}
.prg__track{height:2px;background:rgba(142,86,48,.14);position:relative;overflow:hidden}
.prg__bar{position:absolute;inset:0 auto 0 0;width:20%;background:linear-gradient(90deg,var(--rose-soft),var(--rose),var(--gold));transition:width .65s var(--ease-out)}

.mdl__bd2{padding:clamp(1.4rem,3.4vw,2rem) clamp(1.4rem,4vw,2.5rem) clamp(1.6rem,4vw,2.2rem);position:relative;z-index:2}

.step{display:none}
.step.active{display:block;animation:stepIn .5s var(--ease-out) both}
@keyframes stepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.step.active{animation:none}}
.step h3{font-size:1.24rem;font-weight:400;margin-bottom:.4rem;color:var(--text)}
.step h3:focus{outline:none}
.step > p.hint{font-size:.8rem;color:var(--text-3);margin:0 0 1.5rem}

/* Card select: real radios in a fieldset so keyboard arrows work */
fieldset{border:0;margin:0 0 1.5rem;padding:0;min-width:0}
legend{font-size:.78rem;color:var(--text);margin-bottom:.75rem;padding:0;font-weight:500}
legend .opt{color:var(--text-3);font-weight:400;font-size:.72rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:8px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.cards input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cards label{
  display:flex;align-items:center;gap:.75rem;min-height:60px;padding:.85rem 1rem;
  border:1px solid var(--line);background:rgba(255,255,255,.6);cursor:pointer;
  font-size:.85rem;color:var(--text-2);line-height:1.35;
  transition:border-color .35s ease,background-color .35s ease,color .35s ease,transform .4s var(--ease-out);
}
.cards label:hover{border-color:var(--line-strong);color:var(--text);transform:translateY(-2px)}
.cards label svg{width:19px;height:19px;color:var(--gold);flex:none;opacity:.75;transition:opacity .3s ease}
.cards input:checked + label{border-color:var(--gold);background:rgba(142,86,48,.11);color:var(--gold-light)}
.cards input:checked + label svg{opacity:1}
.cards input:focus-visible + label{outline:3px solid var(--gold-light);outline-offset:3px}
@media (prefers-reduced-motion: reduce){.cards label:hover{transform:none}}

/* Text fields: top aligned labels, regular weight, single column */
.fld{margin-bottom:1.15rem}
.fld label{display:block;font-size:.78rem;color:var(--text);margin-bottom:.4rem;font-weight:400}
.fld label .opt{color:var(--text-3);font-size:.72rem}
.fld input,.fld select,.fld textarea{
  width:100%;min-height:52px;padding:.85rem 1rem;
  background:#FFFCFA;border:1px solid var(--line);border-radius:var(--r);
  color:var(--text);font-size:.95rem;font-weight:300;
  transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease;
  -webkit-appearance:none;appearance:none;
}
.fld textarea{min-height:104px;resize:vertical;line-height:1.6}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E5630' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--text-3);opacity:.65}
.fld input:hover,.fld textarea:hover,.fld select:hover{border-color:var(--line-strong)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(142,86,48,.16);background:#fff}
.fld input[type="date"]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
.fld.ok input,.fld.ok textarea{border-color:rgba(27,122,67,.5)}
.fld.err input,.fld.err textarea,.fld.err select{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.13)}
.fld .msg{display:none;align-items:center;gap:.4rem;font-size:.74rem;color:#8C1D18;margin-top:.45rem}
.fld.err .msg{display:flex}
.fld .msg svg{width:13px;height:13px;flex:none}
.fld .tick{position:absolute;right:14px;top:38px;width:16px;height:16px;color:#1B7A43;opacity:0;transition:opacity .3s ease;pointer-events:none}
.fld{position:relative}
.fld.ok .tick{opacity:1}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:520px){.row2{grid-template-columns:1fr}}

.reveal{display:none}
.reveal.on{display:block;animation:stepIn .4s var(--ease-out) both}

/* consent + privacy */
.check{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;padding:.5rem 0;min-height:44px}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .bx{width:20px;height:20px;flex:none;border:1px solid var(--line-strong);margin-top:2px;display:grid;place-items:center;transition:background-color .3s ease,border-color .3s ease}
.check .bx svg{width:12px;height:12px;color:var(--cream);opacity:0;transition:opacity .2s ease}
.check input:checked + .bx{background:var(--gold);border-color:var(--gold)}
.check input:checked + .bx svg{opacity:1}
.check input:focus-visible + .bx{outline:3px solid var(--gold-light);outline-offset:3px}
.check span.t{font-size:.8rem;color:var(--text-2);line-height:1.55}
.check.err .bx{border-color:#B3261E}

/* A required choice group that was skipped */
fieldset.err legend{color:#8C1D18}
fieldset.err .cards label{border-color:rgba(179,38,30,.45)}

.privacy{display:flex;gap:.6rem;align-items:flex-start;font-size:.74rem;color:var(--text-3);margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);line-height:1.6}
.privacy svg{width:15px;height:15px;color:var(--gold);flex:none;margin-top:2px}

.mdl__proof{margin-top:1.2rem;padding:1rem 1.1rem;border:1px solid var(--line);background:rgba(142,86,48,.06);font-size:.79rem;color:var(--text-2);font-style:italic;line-height:1.6}
.mdl__proof b{display:block;font-style:normal;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:.6rem}

.nav2{display:flex;gap:.7rem;align-items:center;margin-top:1.6rem}
.nav2 .btn{flex:1}
.back{min-height:52px;padding:0 1.2rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line);flex:0 0 auto;transition:color .3s ease,border-color .3s ease}
.back:hover{color:var(--gold);border-color:var(--line-strong)}

.mdl__ft{border-top:1px solid var(--line);padding:1rem clamp(1.4rem,4vw,2.5rem);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;background:rgba(140,86,60,.05);position:relative;z-index:2}
.mdl__ft span{font-size:.72rem;color:var(--text-3)}
.mdl__ft a{font-size:.72rem;color:var(--gold-light);display:inline-flex;align-items:center;gap:.45rem}
.mdl__ft a:hover{text-decoration:underline}
.mdl__ft svg{width:14px;height:14px}

/* success */
.done{display:none;text-align:center;padding:clamp(2rem,5vw,3rem) clamp(1.4rem,4vw,2.5rem) clamp(2rem,4vw,2.6rem)}
.done.on{display:block}
.done__ring{width:78px;height:78px;margin:0 auto 1.6rem;border-radius:99px;border:1px solid var(--rose);display:grid;place-items:center;position:relative;color:var(--gold)}
.done__ring::after{content:"";position:absolute;inset:-9px;border-radius:99px;border:1px solid rgba(142,86,48,.25);animation:ring 2.6s var(--ease) infinite}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.28);opacity:0}}
@media (prefers-reduced-motion: reduce){.done__ring::after{animation:none}}
.done__ring svg{width:32px;height:32px}
.done h3{font-size:clamp(1.5rem,3vw,2rem);font-weight:400}
.done p{color:var(--text-2);font-size:.9rem;max-width:44ch;margin:.9rem auto 0}
.done .btn{margin-top:1.8rem;width:100%}
.done .alt{margin-top:.8rem}
/* Spam trap, off screen rather than display:none so naive bots still see it */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Sending state: a quiet spinner, and the label stays put so nothing jumps */
.btn.is-busy{pointer-events:none;opacity:.86}
.btn.is-busy::before{content:"";flex:none;width:13px;height:13px;border-radius:50%;
  border:1.5px solid currentColor;border-right-color:transparent;position:relative;z-index:2;
  animation:nvzspin .8s linear infinite}
@keyframes nvzspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.btn.is-busy::before{animation-duration:2.4s}}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   WORDPRESS
   The admin bar sits above the fixed nav for logged in users,
   and ordinary pages and posts get a simple readable column.
   ============================================================ */
.admin-bar .nav{top:32px}
@media (max-width:782px){ .admin-bar .nav{top:46px} }
@media (max-width:600px){ .admin-bar .nav{top:0} }

.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--cream);
  padding:.7rem 1rem;font-size:.8rem;letter-spacing:.08em;transition:top .2s ease}
.skip-link:focus{top:12px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.page-body{padding-block:clamp(130px,16vw,190px) clamp(70px,9vw,120px)}
.page-body .wrap{max-width:780px}
.page-body h1{font-size:clamp(2.3rem,5.4vw,4rem)}
.entry{margin-top:2rem;color:var(--text-2);font-size:1.02rem}
.entry h2,.entry h3{margin:2.2rem 0 .8rem;color:var(--text)}
.entry a{color:var(--rose-ink);border-bottom:1px solid var(--line-strong)}
.entry img{height:auto}
.entry blockquote{border-left:3px solid var(--rose);padding-left:1.2rem;font-family:var(--font-display);font-size:1.3rem;color:var(--text)}
.page-body .btn{margin-top:2rem}