/* ==========================================================
   Masterful World — design system
   Golden ratio φ = 1.618 · Fibonacci spacing 8·13·21·34·55·89·144
   ========================================================== */
:root{
  --ink:#0B0A08; --ink-2:#17130E; --ink-3:#211B13;
  --gold:#C9A66B; --gold-l:#D9BC86; --gold-xl:#F0D9A8;
  --text:#EDE6D8; --head:#F6F0E4; --muted:#B3AA99; --soft:#CFC7B8;
  --line:rgba(201,166,107,.16); --line-2:rgba(201,166,107,.3);
  --glass:rgba(255,246,228,.035); --glass-d:rgba(6,5,4,.74);
  --r-l:34px; --r-m:21px; --r-s:13px;
  --s1:8px; --s2:13px; --s3:21px; --s4:34px; --s5:55px; --s6:89px; --s7:144px;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.618 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--gold-l);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .3s}
a:hover{color:var(--gold-xl)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Ground: one breathing gradient ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(165deg,var(--ink) 0%,var(--ink-2) 40%,var(--ink-3) 62%,#0C0B09 100%)}
.bg::before,.bg::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);animation:breathe 9s var(--ease) infinite}
.bg::before{width:62vw;height:62vw;right:-14vw;top:-22vw;background:radial-gradient(circle,rgba(201,166,107,.2),transparent 62%)}
.bg::after{width:52vw;height:52vw;left:-18vw;bottom:-20vw;background:radial-gradient(circle,rgba(150,104,54,.18),transparent 62%);animation-delay:-4.5s}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

/* ---------- Cursor: a soft golden pulse ---------- */
.pulse{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .4s}
.pulse.on{opacity:1}
.pulse__core,.pulse__ring,.pulse__halo{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.pulse__core{width:8px;height:8px;background:var(--gold-xl);box-shadow:0 0 13px 3px rgba(240,217,168,.55)}
.pulse__halo{width:89px;height:89px;background:radial-gradient(circle,rgba(201,166,107,.28),transparent 62%);filter:blur(6px);transition:width .5s var(--ease-out),height .5s var(--ease-out)}
.pulse__ring{width:34px;height:34px;border:1px solid rgba(217,188,134,.7);animation:ring 2.2s var(--ease) infinite}
.pulse.hover .pulse__halo{width:144px;height:144px}
.pulse.hover .pulse__ring{border-color:var(--gold-xl)}
@keyframes ring{0%{width:21px;height:21px;opacity:.9}100%{width:89px;height:89px;opacity:0}}

/* ---------- Type ---------- */
.eyebrow{margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.h1,.h2,.h3{margin:0;font-family:var(--serif);font-weight:300;color:var(--head);letter-spacing:-.015em;font-optical-sizing:auto}
.h1{font-size:clamp(44px,5.6vw,80px);line-height:1.02}
.h2{font-size:clamp(36px,4vw,55px);line-height:1.06}
.h3{font-size:26px;line-height:1.2;font-weight:400}
.em{font-style:italic;color:var(--gold-l)}
.lead{font-size:17px;color:var(--soft);max-width:34em;margin:0}
.muted{color:var(--muted)}
.num{font:500 11px var(--mono);color:var(--gold);letter-spacing:.06em}
p{margin:0}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.stack-s{display:flex;flex-direction:column;gap:var(--s2)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
.section{padding-top:var(--s7)}
.phi{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:var(--s5)}
.phi-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:var(--s5)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.end{align-items:end}

/* ---------- Boxes ---------- */
.box{position:relative;border-radius:var(--r-l);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden;transition:border-color .6s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease)}
.box--dark{background:var(--glass-d)}
.box--glow{border-color:rgba(201,166,107,.42);box-shadow:0 55px 144px -55px rgba(201,166,107,.45)}
.box--s{border-radius:var(--r-m)}
.box::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 61.8% 38.2%,rgba(201,166,107,.16),transparent 61.8%);opacity:.45;transition:opacity .7s var(--ease)}
.box:hover{border-color:rgba(201,166,107,.42);box-shadow:0 34px 89px -34px rgba(201,166,107,.38)}
.box:hover::before{opacity:1}
.box>*{position:relative}
.pad{padding:var(--s5)}
.pad-m{padding:var(--s4)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:999px;font:600 15px var(--sans);text-decoration:none;cursor:pointer;border:0;transition:background .35s var(--ease),border-color .35s,color .35s,transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#DDBD84;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--text);border:1px solid rgba(237,230,216,.28)}
.btn--ghost:hover{border-color:var(--gold);color:var(--head)}
.btn--s{min-height:44px;padding:0 22px;font-size:14px}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;padding:var(--s2) var(--s3)}
.nav{max-width:1398px;margin:0 auto;height:68px;padding:0 var(--s2) 0 28px;border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--head)}
.brand__name{font:400 22px var(--serif);letter-spacing:-.01em}
.nav__links{display:flex;gap:26px;margin:0;padding:0;list-style:none}
.nav__links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--soft);text-decoration:none;font-size:14px;position:relative}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--head)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__toggle{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;align-items:center;justify-content:center}
.nav__toggle span{display:block;width:16px;height:1px;background:var(--head);position:relative;transition:background .3s}
.nav__toggle span::before,.nav__toggle span::after{content:'';position:absolute;left:0;width:16px;height:1px;background:var(--head);transition:transform .4s var(--ease)}
.nav__toggle span::before{top:-5px}.nav__toggle span::after{top:5px}
.nav-open .nav__toggle span{background:transparent}
.nav-open .nav__toggle span::before{transform:translateY(5px) rotate(45deg)}
.nav-open .nav__toggle span::after{transform:translateY(-5px) rotate(-45deg)}

/* ---------- Section navigation ---------- */
.secnav{max-width:var(--max);margin:0 auto;padding:var(--s4) var(--s4) 0;display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.secnav a,.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(201,166,107,.22);background:rgba(11,10,8,.55);font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);text-decoration:none;cursor:pointer;transition:border-color .35s,color .35s,background .35s}
.secnav a:hover,.chip:hover{border-color:var(--gold);color:var(--head)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.totop{position:fixed;right:var(--s3);bottom:var(--s3);z-index:40;width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:rgba(11,10,8,.72);border:1px solid rgba(201,166,107,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--gold);text-decoration:none;opacity:0;transform:translateY(13px);transition:opacity .5s,transform .5s var(--ease-out)}
.totop.show{opacity:1;transform:none}
.totop svg{width:18px;height:18px}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1000fr 618fr;gap:var(--s2);max-width:1398px;margin:0 auto}
.hero__text{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4);padding:var(--s5)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);padding-top:var(--s3);gap:var(--s3)}
.stat b{display:block;font:300 40px/1 var(--serif);color:var(--head)}
.stat span{font-size:12px;color:var(--muted)}
.trust{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:var(--s4) var(--s3) 0;max-width:1398px;margin:0 auto}
.trust span:first-child{color:var(--gold)}

/* ---------- Reveal & float ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out),filter 1.1s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none;filter:none}
[data-reveal="2"]{transition-delay:.12s}[data-reveal="3"]{transition-delay:.24s}[data-reveal="4"]{transition-delay:.36s}
.float{animation:float 6s ease-in-out infinite}
.float-2{animation:float 7.5s ease-in-out -2s infinite}
.float-3{animation:float 8.5s ease-in-out -4s infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(1.5deg)}}
.icon{display:inline-grid;place-items:center;width:55px;height:55px;border-radius:50%;border:1px solid var(--line-2);background:radial-gradient(circle at 38% 32%,rgba(240,217,168,.18),rgba(11,10,8,.4));color:var(--gold-l);box-shadow:0 13px 34px -13px rgba(201,166,107,.5)}
.icon svg{width:22px;height:22px}

/* ---------- Media frames (luxury hover) ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--r-m);background:#14110D;cursor:zoom-in}
.media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease-out),filter .8s}
.media.in img,.media:not([data-reveal]) img{transform:scale(1)}
.media:hover img{transform:scale(1.045)}
.media::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,transparent 30%,rgba(240,217,168,.16) 50%,transparent 70%);transform:translateX(-100%);transition:transform 1.2s var(--ease-out)}
.media:hover::after{transform:translateX(100%)}
.media__zoom{position:absolute;right:13px;top:13px;z-index:2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(11,10,8,.6);border:1px solid var(--line-2);color:var(--gold-l);opacity:0;transform:scale(.8);transition:opacity .4s,transform .4s var(--ease-out);backdrop-filter:blur(8px)}
.media:hover .media__zoom,.media:focus-visible .media__zoom{opacity:1;transform:none}
.media__zoom svg{width:16px;height:16px}
button.media{border:0;padding:0;display:block;width:100%}

/* ---------- Works: marquee / grid ---------- */
.switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px}
.switch button{min-height:40px;padding:0 20px;border-radius:999px;border:0;background:transparent;color:var(--soft);font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .35s,color .35s}
.switch button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.marquee{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5)}
.marquee__row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:var(--s3);width:max-content;animation:marquee 80s linear infinite}
.marquee__row--rev .marquee__track{animation-direction:reverse;animation-duration:100s}
.marquee__row:hover .marquee__track{animation-play-state:paused}
.marquee .media{width:377px;height:233px;flex:none}
.marquee__row--marks .media{width:144px;height:144px}
@keyframes marquee{to{transform:translateX(-50%)}}
.works-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.works-grid .media{aspect-ratio:1.618}
.works-grid .media[hidden]{display:none}
[hidden]{display:none !important}
.center{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:var(--s5);background:rgba(8,7,5,.82);backdrop-filter:blur(21px);-webkit-backdrop-filter:blur(21px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.lb.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.lb__fig{margin:0;max-width:min(1240px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.lb__img{max-width:100%;max-height:calc(100vh - 160px);border-radius:var(--r-m);box-shadow:0 55px 144px -34px rgba(201,166,107,.45);transform:scale(.86);filter:blur(12px);opacity:0;transition:transform .8s var(--ease-out),filter .8s var(--ease-out),opacity .6s}
.lb.open .lb__img.loaded{transform:none;filter:none;opacity:1}
.lb__cap{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center}
.lb__btn{position:absolute;width:55px;height:55px;border-radius:50%;border:1px solid var(--line-2);background:rgba(11,10,8,.6);color:var(--gold-l);display:grid;place-items:center;cursor:pointer;transition:border-color .3s,transform .4s var(--ease-out)}
.lb__btn:hover{border-color:var(--gold);transform:scale(1.06)}
.lb__btn svg{width:20px;height:20px}
.lb__close{top:var(--s3);right:var(--s3)}
.lb__prev{left:var(--s3);top:50%;margin-top:-27px}
.lb__next{right:var(--s3);top:50%;margin-top:-27px}
.lb__count{position:absolute;top:var(--s4);left:var(--s4);font:500 12px var(--mono);letter-spacing:.12em;color:var(--gold)}

/* ---------- Testimonials ---------- */
blockquote{margin:0}
.quote{font:300 clamp(24px,2.4vw,34px)/1.28 var(--serif);color:var(--head)}

/* ---------- About ring ---------- */
.ratio{aspect-ratio:1;border-radius:50%;border:1px solid rgba(201,166,107,.4);position:relative;display:grid;grid-template-columns:61.8fr 38.2fr;align-items:center;text-align:center}
.ratio::before{content:'';position:absolute;left:61.8%;top:0;bottom:0;border-left:1px solid rgba(201,166,107,.4)}
.ratio b{display:block;font:300 48px/1 var(--serif);color:var(--head)}
.ratio div+div b{font-size:30px;color:var(--gold-l)}
.ratio small{font:500 11px var(--mono);letter-spacing:.16em;color:var(--muted)}

/* ---------- Pricing ---------- */
.price{font:300 clamp(60px,6vw,89px)/1 var(--serif);color:var(--head)}
.ticks{margin:0;padding:var(--s3) 0 0;list-style:none;border-top:1px solid var(--line-2);display:grid;gap:var(--s2)}
.ticks li{display:flex;gap:10px;align-items:baseline;font-size:15px}
.ticks li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);transform:translateY(-2px)}
.ticks--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4)}

/* ---------- Steps ---------- */
.step-n{font:300 64px/1 var(--serif);color:var(--gold-l)}

/* ---------- FAQ ---------- */
.qlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.qlink{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);text-decoration:none;color:var(--head);font:400 20px/1.3 var(--serif)}
.qlink svg{flex:none;width:18px;height:18px;color:var(--gold);transition:transform .5s var(--ease-out)}
.qlink:hover{color:var(--head)}
.qlink:hover svg{transform:translateX(5px) rotate(-45deg)}
details.box{padding:0}
details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);font:400 21px/1.3 var(--serif);color:var(--head)}
details summary::-webkit-details-marker{display:none}
details summary .plus{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--gold);transition:transform .5s var(--ease-out),background .3s}
details[open] summary .plus{transform:rotate(45deg);background:rgba(201,166,107,.12)}
.answer{padding:0 var(--s4) var(--s4);color:var(--soft);max-width:44em;display:grid;gap:var(--s2)}
.answer ul{margin:0;padding-left:20px}
details[open] .answer{animation:open .6s var(--ease-out)}
@keyframes open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq-cats{position:sticky;top:110px;display:grid;gap:var(--s1)}
.faq-cats a{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 var(--s3);border-radius:999px;color:var(--soft);text-decoration:none;border:1px solid transparent;transition:border-color .3s,color .3s}
.faq-cats a:hover{border-color:var(--line-2);color:var(--head)}

/* ---------- CTA animation: geometry becomes a mark ---------- */
.forge{position:relative;aspect-ratio:1.618;width:100%}
.forge svg{position:absolute;inset:0;width:100%;height:100%}
.forge .g-line{fill:none;stroke:rgba(201,166,107,.35);stroke-width:1;vector-effect:non-scaling-stroke}
.forge .g-arc{fill:none;stroke:var(--gold-l);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:arc 9s var(--ease) infinite}
.forge .g-arc:nth-of-type(2){animation-delay:.4s}.forge .g-arc:nth-of-type(3){animation-delay:.8s}
@keyframes arc{0%{stroke-dashoffset:1;opacity:1}30%,80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.forge .orbit{transform-origin:50% 50%;transform-box:view-box;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.forge__marks{position:absolute;left:50%;top:50%;width:38.2%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(201,166,107,.5),0 34px 89px -21px rgba(201,166,107,.55)}
.forge__marks img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.2);filter:blur(6px);animation:mark 12s var(--ease) infinite}
.forge__marks img:nth-child(2){animation-delay:4s}.forge__marks img:nth-child(3){animation-delay:8s}
@keyframes mark{0%{opacity:0;transform:scale(1.2);filter:blur(6px)}8%,30%{opacity:1;transform:scale(1);filter:none}38%,100%{opacity:0;transform:scale(.94);filter:blur(4px)}}
.forge__label{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Email action ---------- */
.email{display:inline-flex;align-items:center;gap:6px;padding:4px 4px 4px 18px;border-radius:999px;border:1px solid var(--line-2);background:rgba(11,10,8,.5);min-height:52px}
.email a{color:var(--head);text-decoration:none;font-weight:500}
.email a:hover{color:var(--gold-xl)}
.email__copy{position:relative;width:44px;height:44px;border-radius:50%;border:0;background:rgba(201,166,107,.12);color:var(--gold-l);display:grid;place-items:center;cursor:pointer;transition:background .3s,transform .3s var(--ease-out)}
.email__copy:hover{background:rgba(201,166,107,.24);transform:scale(1.05)}
.email__copy svg{width:17px;height:17px;position:absolute;transition:opacity .3s,transform .4s var(--ease-out)}
.email__copy .i-check{opacity:0;transform:scale(.5)}
.email__copy.done .i-copy{opacity:0;transform:scale(.5)}
.email__copy.done .i-check{opacity:1;transform:none}
.email__tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,6px);padding:5px 10px;border-radius:999px;background:var(--gold);color:var(--ink);font:600 11px var(--mono);letter-spacing:.08em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease-out)}
.email__copy.done .email__tip{opacity:1;transform:translate(-50%,0)}

/* ---------- Work page cards ---------- */
.wcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:var(--s2) var(--s2) var(--s3)}
.wcard__dots{display:flex;gap:5px;padding:2px 6px 10px}
.wcard__dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.wcard .media{aspect-ratio:1.618/0.75;cursor:pointer}
.wcard__title{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:var(--s3) 8px 0;font:500 16px var(--mono);color:var(--head)}
.wcard__title svg{width:16px;height:16px;color:var(--gold);transition:transform .5s var(--ease-out)}
.wcard:hover .wcard__title svg{transform:translateX(4px) rotate(-45deg)}
.wcard__tags{padding:4px 8px 0;font-size:13px;color:var(--gold)}
.wcard:hover{color:inherit}

/* ---------- Project page ---------- */
.p-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s3);flex-wrap:wrap;padding:var(--s4) var(--s5)}
.p-head h1{font:300 clamp(48px,6vw,80px)/1 var(--serif);color:var(--head);margin:0;display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.p-head h1 small{font:400 15px var(--serif);color:var(--muted)}
.latest{display:inline-flex;align-items:center;gap:10px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);text-decoration:none;min-height:44px}
.latest i{display:grid;grid-template-columns:repeat(2,4px);gap:3px}
.latest i b{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.p-hero{aspect-ratio:2.14;border-radius:var(--r-l)}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-top:var(--s2)}
.thumbs .media{aspect-ratio:2.2}
.tabs{display:flex;gap:var(--s4);border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button{background:none;border:0;padding:0 0 var(--s2);min-height:44px;font:400 15px var(--serif);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);cursor:pointer;position:relative}
.tabs button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.tabs button[aria-selected="true"]{color:var(--gold-l)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.tabpanel{padding-top:var(--s4);color:var(--soft);max-width:40em;animation:open .6s var(--ease-out)}
.meta{display:grid;gap:4px;align-content:start}
.meta dt{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.meta dd{margin:0 0 var(--s2);color:var(--head)}
.feature{display:grid;grid-template-columns:auto minmax(0,1.618fr) minmax(0,1fr);gap:var(--s4);align-items:center}
.feature--r{grid-template-columns:minmax(0,1fr) auto minmax(0,1.618fr)}
.vlabel{writing-mode:vertical-rl;transform:rotate(180deg);font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);align-self:start}
.feature .media{aspect-ratio:1.47}
.pnav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.pnav a{display:flex;flex-direction:column;gap:4px;padding:var(--s4);text-decoration:none;color:var(--head)}
.pnav a span{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pnav a strong{font:300 26px var(--serif)}

/* ---------- Shop ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.logo-card{display:flex;flex-direction:column;gap:var(--s2)}
.logo-card .media{aspect-ratio:1;border-radius:var(--r-m);background:#DDD3C3}
.logo-card .media img{object-fit:contain}
.logo-card__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.logo-card__meta span:first-child{color:var(--head)}
.logo-card__meta span:last-child{color:var(--gold)}
.ask{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;text-decoration:none}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;color:var(--head)}
.field input,.field textarea{font:inherit;font-weight:400;color:var(--head);background:rgba(0,0,0,.35);border:1px solid rgba(201,166,107,.28);border-radius:var(--r-s);padding:12px 16px;min-height:52px;width:100%;transition:border-color .3s,box-shadow .3s}
.field input::placeholder,.field textarea::placeholder{color:#8F8778}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,166,107,.15)}
.opt{display:flex;align-items:center;gap:13px;min-height:55px;padding:0 16px;border:1px solid rgba(201,166,107,.22);border-radius:var(--r-s);cursor:pointer;font-weight:500;transition:border-color .3s,background .3s}
.opt:hover{border-color:var(--gold)}
.opt:has(input:checked){border-color:var(--gold);background:rgba(201,166,107,.08)}
.opt input{accent-color:var(--gold);width:18px;height:18px}
fieldset{border:0;margin:0;padding:0}
legend{font-size:14px;font-weight:600;color:var(--head);margin-bottom:8px}
.form-status{min-height:24px;font-size:15px}
.form-status.ok{color:#A8D5A2}.form-status.err{color:#F0A8A0}
.hp{position:absolute;left:-9999px}

/* ---------- Footer ---------- */
.footer{padding:var(--s6) var(--s4) var(--s4)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:var(--s5)}
.footer__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--s4);list-style:none;margin:0;padding:0}
.footer__links a{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--soft);text-decoration:none;font-size:14px}
.footer__links a:hover{color:var(--head)}
.footer__base{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s3);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav__links{gap:18px}
  .works-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .nav__toggle{display:inline-flex}
  .nav__links{position:absolute;left:var(--s3);right:var(--s3);top:calc(100% - 4px);flex-direction:column;gap:0;padding:var(--s2) var(--s4);border-radius:var(--r-l);background:rgba(8,7,5,.94);border:1px solid var(--line);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .4s,transform .4s var(--ease-out),visibility 0s .4s}
  .nav-open .nav__links{opacity:1;visibility:visible;transform:none;transition:opacity .4s,transform .4s var(--ease-out)}
  .nav__links a{min-height:48px;font-size:16px}
  .nav .btn{display:none}
  .hero{grid-template-columns:1fr}
  .sjp{max-width:440px;width:100%;margin:var(--s4) auto 0}
  .phi,.phi-r,.footer__grid,.feature,.feature--r{grid-template-columns:minmax(0,1fr)}
  .feature .vlabel{writing-mode:horizontal-tb;transform:none}
  .feature--r>.feature__text{order:3}
  .g3{grid-template-columns:minmax(0,1fr)}
  .faq-cats{position:static;display:flex;flex-wrap:wrap}
}
@media (max-width:720px){
  .wrap,.secnav{padding-left:var(--s3);padding-right:var(--s3)}
  .section{padding-top:var(--s6)}
  .pad{padding:var(--s4) var(--s3)}
  .hero__text{padding:var(--s4) var(--s3)}
  .box{border-radius:var(--r-m)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .works-grid,.shop-grid,.g2,.g4,.thumbs,.pnav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marquee .media{width:233px;height:144px}
  .marquee__row--marks .media{width:96px;height:96px}
  .ticks--2{grid-template-columns:1fr}
  .p-head{padding:var(--s4) var(--s3)}
  .lb{padding:var(--s3)}
  .lb__prev,.lb__next{top:auto;bottom:var(--s3);margin:0}
  .qlink{padding:var(--s3)}
  details summary{padding:var(--s3);font-size:19px}
  .answer{padding:0 var(--s3) var(--s3)}
  .email{padding-left:14px}
}
@media (max-width:420px){.works-grid{grid-template-columns:minmax(0,1fr)}}
@media (hover:none){.pulse{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;filter:none}
  .forge__marks img:first-child{opacity:1;transform:none;filter:none}
  .forge .g-arc{stroke-dashoffset:0}
  .sjp .draw{stroke-dashoffset:0}
  .sjp__tile,.sjp .fade{opacity:1;filter:none}
  .pulse{display:none}
}
/* fixes */
img[width][height]{height:auto}
.footer__base .btn{font:600 14px var(--sans);letter-spacing:0;text-transform:none}
.forge{margin-bottom:var(--s4)}
.forge__label{bottom:calc(var(--s4) * -1)}

/* =========================================================
   v3 additions
   ========================================================= */
/* Header Instagram link */
.insta{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);color:var(--gold);text-decoration:none;font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;transition:color .35s,letter-spacing .5s,border-color .35s}
.insta svg{flex:none;transition:transform .5s var(--ease-out)}
.insta:hover{color:var(--gold-xl);border-color:var(--gold);letter-spacing:.21em}
.insta:hover svg{transform:rotate(-8deg) scale(1.08)}

/* Hero section with the slow orbit behind it (same as sandrajakovljevic.com) */
.hero-sec{position:relative;padding:var(--s3) var(--s3) 0;overflow:hidden;overflow:clip}
.hero-sec__orbit{position:absolute;right:-18%;top:-22%;width:min(1100px,120vw);height:auto;opacity:.22;pointer-events:none;z-index:-1;animation:spin 90s linear infinite reverse;transform-origin:50% 50%}
.hero{align-items:center;position:relative}
.hero__text{align-self:stretch}

/* Portrait cut along the golden section — 4 tiles assemble from sepia to colour */
.sjp{position:relative;margin:0;width:100%;max-width:520px;justify-self:center}
.sjp__sun{position:absolute;width:30%;aspect-ratio:1;border-radius:50%;right:-12%;top:6%;z-index:0;background:radial-gradient(circle at 34% 30%,#F4DFA6 0%,var(--gold) 42%,#8A6A2F 100%);box-shadow:0 30px 80px -20px rgba(201,163,90,.55);animation:fade 1.4s ease 1.6s both,sjFloat 7s ease-in-out 3s infinite}
.sjp__orbit{position:absolute;width:150%;max-width:none;height:auto;left:-25%;top:12%;opacity:.55;pointer-events:none;animation:spin 60s linear infinite;transform-origin:50% 50%}
.sjp__frame{position:relative;z-index:1;width:100%;aspect-ratio:1000/1618;background:#14110C}
.sjp__tile{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation:sjTileIn 1.8s var(--ease-out) both}
.sjp__tile--1{clip-path:inset(0 0 38.2% 0);--dx:0px;--dy:-60px;animation-delay:.3s}
.sjp__tile--2{clip-path:inset(61.8% 0 0 38.2%);--dx:60px;--dy:0px;animation-delay:.6s}
.sjp__tile--3{clip-path:inset(76.4% 61.8% 0 0);--dx:0px;--dy:60px;animation-delay:.9s}
.sjp__tile--4{clip-path:inset(61.8% 61.8% 23.6% 0);--dx:-60px;--dy:0px;animation-delay:1.2s}
.sjp__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sjp .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:sjDraw 2.6s cubic-bezier(.6,0,.2,1) forwards}
.sjp .fade{opacity:0;animation:fade 1.4s ease both}
.sjp__spiral{animation-delay:1.4s !important;animation-duration:3.4s !important}
.d-02{animation-delay:.2s !important}.d-09{animation-delay:.9s !important}.d-24{animation-delay:2.4s !important}.d-27{animation-delay:2.7s !important}.d-30{animation-delay:3s !important}
@keyframes sjTileIn{0%{opacity:0;transform:translate(var(--dx,0),var(--dy,0));filter:grayscale(1) sepia(1) brightness(.35)}60%{opacity:1;filter:grayscale(.4) sepia(.6) brightness(.8)}100%{opacity:1;transform:translate(0,0);filter:none}}
@keyframes sjDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sjFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Selected works — every tile the same square size, in both marquee rows and the grid */
.media--sq{aspect-ratio:1}
.marquee .media{width:233px;height:233px}
.works-grid .media{aspect-ratio:1}
.works-grid .media img,.marquee .media img{transition:transform 1.2s var(--ease-out)}
.works-grid .media:hover img,.marquee .media:hover img{transform:scale(1.08)}

/* Project slider */
.slider__stage{position:relative;aspect-ratio:1600/749;border-radius:var(--r-l);overflow:hidden;background:#14110D}
.slider__slide{position:absolute;inset:0;border-radius:0;opacity:0;visibility:hidden;transform:scale(1.03);transition:opacity .9s var(--ease),transform 1.4s var(--ease-out),visibility 0s .9s}
.slider__slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .9s var(--ease),transform 1.4s var(--ease-out)}
.slider__slide img{width:100%;height:100%;object-fit:cover}
.slider__nav{position:absolute;top:50%;z-index:3;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid var(--line-2);background:rgba(11,10,8,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--gold-l);display:grid;place-items:center;cursor:pointer;transition:border-color .3s,transform .4s var(--ease-out)}
.slider__nav:hover{border-color:var(--gold);transform:scale(1.06)}
.slider__nav svg{width:20px;height:20px}
.slider__prev{left:var(--s3)}.slider__next{right:var(--s3)}
.slider__count{position:absolute;left:var(--s3);bottom:var(--s3);z-index:3;padding:6px 12px;border-radius:999px;background:rgba(11,10,8,.62);font:500 12px var(--mono);letter-spacing:.12em;color:var(--muted)}
.slider__count b{color:var(--gold-l);font-weight:500}
.slider__thumbs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--s2);margin-top:var(--s2)}
.slider__thumb{position:relative;padding:0;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;cursor:pointer;background:#14110D;aspect-ratio:1600/749;opacity:.55;transition:opacity .4s,border-color .4s,transform .4s var(--ease-out)}
.slider__thumb img{width:100%;height:100%;object-fit:cover}
.slider__thumb:hover{opacity:.9;transform:translateY(-3px)}
.slider__thumb.is-active{opacity:1;border-color:var(--gold)}
.feature .media{aspect-ratio:1280/866}
.wcard .media{aspect-ratio:1600/749}

/* Email copy on shop cards */
.email--card{width:100%;justify-content:space-between;min-height:48px;padding:3px 3px 3px 14px}
.email--card a{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.email--card .email__copy{width:40px;height:40px;flex:none}

@media (max-width:980px){
  .insta span:not(.sr-only){display:none}
  .insta{padding:0;width:44px;justify-content:center}
  .slider__thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .slider__thumb{flex:0 0 28%;scroll-snap-align:start}
}
@media (max-width:720px){
  .marquee .media{width:144px;height:144px}
  .slider__stage{border-radius:var(--r-m)}
  .slider__nav{width:44px;height:44px;margin-top:-22px}
  .slider__prev{left:var(--s2)}.slider__next{right:var(--s2)}
  .slider__thumb{flex-basis:40%}
  .email--card a{font-size:11.5px}
  .email--card{padding-left:10px}
  .email--card .email__copy{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){.hero-sec__orbit,.sjp__orbit,.sjp__sun{animation:none}}
@media (max-width:560px){
  .email--card{padding:2px 2px 2px 9px;min-height:40px;gap:2px}
  .email--card a{font-size:10px;letter-spacing:-.02em}
  .email--card .email__copy{width:32px;height:32px}
  .email--card .email__copy svg{width:14px;height:14px}
}
@media (max-width:980px){.nav__toggle{margin-left:auto}}

/* =========================================================
   v4 additions
   ========================================================= */
/* Hero availability line */
.avail{display:inline-flex;align-items:center;gap:12px;margin:var(--s1) 0 0;font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l)}
.avail__dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--gold-l);box-shadow:0 0 10px 2px rgba(232,211,160,.5)}
.avail__dot::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(232,211,160,.6);animation:ring2 2.2s var(--ease) infinite}
@keyframes ring2{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* Trusted-by marquee */
.trust{display:flex;align-items:center;gap:var(--s4);max-width:1398px;margin:0 auto;padding:var(--s4) var(--s3) 0;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.trust__label{flex:none;color:var(--gold)}
.trust__row{flex:1;min-width:0}
.trust__track{gap:var(--s3);animation-duration:55s;align-items:center}
.trust__track span{white-space:nowrap}
.trust__track i{font-style:normal;color:var(--gold)}

/* Prologue cards */
.pro-t{display:flex;align-items:baseline;gap:12px;font-weight:600;font-size:19px;color:var(--head)}
.pro-t .num{font-size:12px}

/* Testimonials */
.tgrid{columns:3 300px;column-gap:var(--s3)}
.tgrid .tcard{break-inside:avoid;margin-bottom:var(--s3) !important;display:flex}
.tcard__by{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--muted)}
.tcard__by strong{color:var(--head)}
.tcard__link,.meta__link{display:inline-flex;align-items:center;gap:4px;font:500 11px var(--mono);letter-spacing:.08em;color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.tcard__link svg,.meta__link svg{width:12px;height:12px}
.tcard__link:hover,.meta__link:hover{color:var(--gold-xl);border-color:var(--gold-xl)}
.meta__link{font:inherit;letter-spacing:0}
.tcard__by .tcard__link{margin-left:auto}

/* About: a heart travels around the golden circle */
.ratio{overflow:visible}
.ratio__orbit{position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:spin 14s linear infinite}
.ratio__heart{position:absolute;left:50%;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;filter:drop-shadow(0 0 8px rgba(232,211,160,.8));animation:beat 1.4s ease-in-out infinite}
.ratio__trail{position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 250deg,rgba(232,211,160,.55) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px))}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}}

/* CTA with two options */
.cta__opts{margin-top:var(--s4)}
.cta__opt{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);text-decoration:none;color:var(--text);border-radius:var(--r-m)}
.cta__opt:hover{color:var(--text);transform:translateY(-4px)}
.cta__opt .btn{margin-top:auto}

/* Footer: links + Instagram */
.footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr)}
.footer__right{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s5)}
.footer__links{grid-template-columns:repeat(2,minmax(0,1fr))}
.ig__handle{display:inline-flex;align-items:center;gap:8px;color:var(--gold);text-decoration:none}
.ig__handle:hover{color:var(--gold-xl)}
.ig__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ig__tile{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#14110D}
.ig__tile img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out),filter .6s}
.ig__tile::after{content:'';position:absolute;inset:0;background:rgba(11,10,8,.35);opacity:0;transition:opacity .4s}
.ig__tile:hover img{transform:scale(1.08)}
.ig__tile:hover::after{opacity:1}
.footer__privacy{color:var(--soft)}
@media (max-width:980px){.footer__right{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.trust{flex-direction:column;align-items:flex-start;gap:var(--s2)}.trust__row{width:100%}.tcard__by .tcard__link{margin-left:0}}
@media (prefers-reduced-motion:reduce){.ratio__orbit,.ratio__heart,.avail__dot::after{animation:none}}
.pro-t+p{margin-top:-6px}
.tcard__by .tcard__link{flex-basis:100%;margin-left:0}
@media (max-width:980px){
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .footer__right{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
}
@media (max-width:720px){
  .footer .box.wrap{padding-left:var(--s3) !important;padding-right:var(--s3) !important}
  .footer{padding-left:var(--s2);padding-right:var(--s2)}
  .footer__right{grid-template-columns:minmax(0,1fr)}
  .ig__grid{max-width:360px}
}

/* =========================================================
   v5 additions
   ========================================================= */
/* Icon-only external link: gold ring, turns white on hover */
.xlink{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);color:var(--gold);text-decoration:none;transition:color .35s,border-color .35s,background .35s,transform .5s var(--ease-out)}
.xlink svg{width:15px;height:15px;transition:transform .5s var(--ease-out)}
.xlink:hover,.xlink:focus-visible{color:#fff;border-color:#fff;background:rgba(255,255,255,.06)}
.xlink:hover svg{transform:translate(2px,-2px)}
.tcard__by{align-items:center}
.tcard__by .xlink{margin-left:auto}
.meta__site{display:flex;align-items:center;gap:12px}

/* Footer */
.footer__right{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr)}
.footer__links{grid-template-columns:repeat(4,max-content);column-gap:var(--s4)}
.footer__sign{font:italic 300 14px var(--serif);letter-spacing:.02em;text-transform:none;color:var(--gold-l)}
@media (max-width:1100px){.footer__links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.footer__right{grid-template-columns:minmax(0,1fr)}}

/* Your move: one golden line draws the mind, travels, becomes a heart */
.bh{position:relative;margin:0;width:100%;aspect-ratio:1.618}
.bh svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bh__grid{fill:none;stroke:rgba(201,166,107,.18);stroke-width:1;vector-effect:non-scaling-stroke}
.bh__grid path,.bh__grid circle{vector-effect:non-scaling-stroke}
.bh__line{fill:none;stroke:var(--gold-l);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:bhDraw 12s var(--ease) infinite}
.bh__gyri{stroke-width:1.6;animation-delay:.7s}
.bh__link{stroke:var(--gold-xl);animation-delay:1.6s}
.bh__heart{animation-delay:2.3s}
.bh__pulse{stroke:var(--gold);stroke-width:1.4;animation-delay:3s}
@keyframes bhDraw{0%{stroke-dashoffset:1;opacity:1}22%{stroke-dashoffset:0}86%{stroke-dashoffset:0;opacity:1}96%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
.bh__heartfill{fill:rgba(201,166,107,.16);opacity:0;animation:bhFill 12s var(--ease) infinite}
@keyframes bhFill{0%,30%{opacity:0}40%,86%{opacity:1}96%,100%{opacity:0}}
.bh__heartwrap{transform-box:fill-box;transform-origin:50% 60%;animation:bhBeat 1.6s ease-in-out 3.2s infinite}
@keyframes bhBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.07)}28%{transform:scale(1)}42%{transform:scale(1.04)}}
.bh__halo{opacity:0;transform-box:fill-box;transform-origin:center;animation:bhHalo 12s ease-in-out infinite}
.bh__halo--heart{animation-delay:2.4s}
@keyframes bhHalo{0%,15%{opacity:0;transform:scale(.8)}35%{opacity:.5;transform:scale(1)}60%{opacity:.25}86%{opacity:.45}100%{opacity:0;transform:scale(.8)}}
.bh__spark{opacity:0;animation:bhSpark 12s linear infinite}
@keyframes bhSpark{0%,26%{opacity:0}30%,84%{opacity:1}90%,100%{opacity:0}}
.bh__label{font:500 30px var(--mono);letter-spacing:.2em;fill:var(--muted);text-anchor:middle}
@media (prefers-reduced-motion:reduce){
  .bh__line{stroke-dashoffset:0;opacity:1;animation:none}
  .bh__heartfill{opacity:1}.bh__halo{opacity:.35}.bh__spark{display:none}
}

.footer__sep{color:var(--gold);margin:0 6px}

/* =========================================================
   v7 — brand mark + Your move construction
   ========================================================= */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--head);margin:0}
.brand__mark{width:34px;height:auto;flex:none;fill:var(--gold);transition:transform .6s var(--ease-out),fill .4s}
.brand:hover .brand__mark{transform:translateY(-2px) scale(1.04);fill:var(--gold-l)}
.brand__name{font:400 22px var(--serif);letter-spacing:-.01em}
.brand--foot .brand__mark{width:44px}
.brand--foot .brand__name{font-size:32px;font-weight:300}

.mwc{position:relative;margin:0 auto;width:100%;max-width:440px}
.mwc svg{display:block;width:100%;height:auto;overflow:visible}
.mwc__grid path{fill:none;stroke:rgba(201,166,107,.16);stroke-width:.6;stroke-dasharray:1;stroke-dashoffset:1}
.mwc__orbit{fill:none;stroke:var(--gold);stroke-width:.8;stroke-dasharray:2 7;opacity:.55}
.mwc__orbit--b{stroke:rgba(232,211,160,.4);stroke-dasharray:1 5}
.mwc__dot{fill:var(--gold-l)}
.mwc__spin{transform-origin:200px 200px;animation:spin 60s linear infinite}
.mwc__spin--rev{animation-duration:90s;animation-direction:reverse}
.mwc__glow{opacity:0;transform-origin:200px 200px}
.mwc__line{fill:none;stroke:rgba(232,211,160,.45);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.mwc__line--soft{stroke:rgba(201,166,107,.35)}
.mwc__arc{fill:none;stroke:var(--gold-l);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.mwc__shape{fill:var(--gold);fill-opacity:0;stroke:var(--gold-l);stroke-width:6;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.mwc__logo{transform-origin:200px 200px}
.mwc__labels text{font:400 9px var(--mono);letter-spacing:1px;fill:var(--muted);opacity:0}
.mwc__cap{display:flex;justify-content:space-between;gap:12px;margin-top:var(--s2);font:500 11px var(--mono);letter-spacing:.16em;color:var(--muted)}
/* play once the figure scrolls into view */
.mwc.in .mwc__grid path{animation:mwcDraw 1.8s var(--ease) forwards}
.mwc.in .mwc__grid path:nth-child(2){animation-delay:.2s}.mwc.in .mwc__grid path:nth-child(3){animation-delay:.4s}
.mwc.in .mwc__line{animation:mwcDraw 2.2s cubic-bezier(.6,0,.2,1) .5s forwards}
.mwc.in .mwc__line:nth-of-type(2){animation-delay:.8s}.mwc.in .mwc__line--soft{animation-delay:1.1s}
.mwc.in .mwc__arc{animation:mwcDraw 1.6s cubic-bezier(.6,0,.2,1) 1.4s forwards}
.mwc.in .mwc__shape{animation:mwcDraw 2.4s cubic-bezier(.6,0,.2,1) 1.6s forwards,mwcFill 1.2s ease 3.6s forwards}
.mwc.in .mwc__glow{animation:mwcGlow 1.6s ease 3.4s forwards,mwcBreathe 6s ease-in-out 5s infinite}
.mwc.in .mwc__logo{animation:mwcFloat 7s ease-in-out 5s infinite}
.mwc.in .mwc__labels text{animation:fade 1s ease forwards}
.mwc.in .mwc__labels text:nth-child(1){animation-delay:1.2s}.mwc.in .mwc__labels text:nth-child(2){animation-delay:1.6s}.mwc.in .mwc__labels text:nth-child(3){animation-delay:2s}
@keyframes mwcDraw{to{stroke-dashoffset:0}}
@keyframes mwcFill{to{fill-opacity:1;stroke-opacity:0}}
@keyframes mwcGlow{to{opacity:1}}
@keyframes mwcBreathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.7}}
@keyframes mwcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
  .mwc__grid path,.mwc__line,.mwc__arc,.mwc__shape{stroke-dashoffset:0}
  .mwc__shape{fill-opacity:1;stroke-opacity:0}.mwc__glow,.mwc__labels text{opacity:1}
}
@media (max-width:720px){.brand__mark{width:28px}.brand__name{font-size:19px}}
@media (max-width:980px){.footer__social .insta{width:auto;padding:0 18px}.footer__social .insta span:not(.sr-only){display:inline}}
.tcard__org{color:var(--soft);text-decoration:underline;text-decoration-color:rgba(201,166,107,.45);text-underline-offset:4px;transition:color .3s,text-decoration-color .3s}
.tcard__org:hover{color:#fff;text-decoration-color:#fff}