/* ===== fonts (self-hosted, latin subset) ===== */
@font-face{font-family:Fraunces;font-style:normal;font-weight:300;font-display:swap;src:url(../media/fonts/fraunces-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:Fraunces;font-style:normal;font-weight:400;font-display:swap;src:url(../media/fonts/fraunces-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:Fraunces;font-style:italic;font-weight:300;font-display:swap;src:url(../media/fonts/fraunces-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:Fraunces;font-style:italic;font-weight:400;font-display:swap;src:url(../media/fonts/fraunces-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:Italiana;font-style:normal;font-weight:400;font-display:swap;src:url(../media/fonts/italiana-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:Jost;font-style:normal;font-weight:300;font-display:swap;src:url(../media/fonts/jost-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:Jost;font-style:normal;font-weight:400;font-display:swap;src:url(../media/fonts/jost-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:Jost;font-style:normal;font-weight:500;font-display:swap;src:url(../media/fonts/jost-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:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../media/fonts/poppins-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}

/* ===== base ===== */
/* weonrec — shared styles: tokens, nav, buttons, forms, page shell, footer */
:root{
  --bg:#f5f1ea;   /* warm ivory */
  --bg2:#ece6db;  /* deeper sand */
  --card:#faf7f2; /* raised surfaces */
  --fg:#1f1c18;   /* text */
  --mut:#6b655b;  /* muted text */
  --ln:#d9d2c5;   /* hairlines */
  --red:#a3392f;  /* accent */
  --serif:Fraunces,Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box}
/* text selection */
::selection{background:var(--red);color:#fff}
::-moz-selection{background:var(--red);color:#fff}
/* custom scrollbar */
html{scrollbar-width:thin;scrollbar-color:var(--red) var(--bg)}
@supports selector(::-webkit-scrollbar){
  html{scrollbar-width:auto;scrollbar-color:auto}
  ::-webkit-scrollbar{width:14px;height:14px;background:var(--bg)}
  ::-webkit-scrollbar-track{background:var(--bg);border-radius:10px}
  ::-webkit-scrollbar-thumb{background:var(--red);border-radius:10px;border:3px solid var(--bg)}
  ::-webkit-scrollbar-corner{background:var(--bg)}
}
html{touch-action:pan-y pinch-zoom;overscroll-behavior-x:none;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;max-width:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:300 17px/1.7 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;max-width:100%;position:relative}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;line-height:1.1}
h1 i,h2 i,.logo i{font-style:normal;color:var(--red)}
p{margin:0}
.tag{display:block;color:var(--mut);letter-spacing:.3em;font-size:12px}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:26px 5vw;position:absolute;inset:0 0 auto;z-index:20}
.nav-links{display:flex;gap:34px;align-items:center;font-size:15px;letter-spacing:.04em}
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn):after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:not(.btn):hover:after,.nav-links a[aria-current]:after{transform:scaleX(1)}
.logo{font:700 26px Poppins,system-ui,sans-serif;letter-spacing:-.03em}
.logo i{display:inline-block;width:.27em;height:.27em;border-radius:50%;background:var(--red);margin-left:.06em}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;place-content:center;gap:8px;padding:0}
.burger span{display:block;width:26px;height:1px;background:var(--fg);transition:transform .3s}
.nav.open .burger span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav.open .burger span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* buttons */
.btn{display:inline-block;background:var(--fg);color:var(--bg);padding:15px 32px;font:500 14px Jost,system-ui,sans-serif;letter-spacing:.12em;border:1px solid var(--fg);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--red);border-color:var(--red);color:#faf7f2}
.btn.o{background:none;color:var(--fg);border-color:#1f1c1855}
.btn.o:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}

/* forms */
input,textarea{background:var(--card);border:1px solid var(--ln);color:var(--fg);padding:14px 16px;font:inherit;border-radius:0}
input:focus,textarea:focus{border-color:var(--fg);outline:0}

/* inner pages (services, contact) */
.pg{padding:150px 5vw 90px;max-width:1240px;margin:0 auto;overflow-x:clip}
.pg h1{font:italic 300 clamp(42px,6vw,84px)/1.05 var(--serif);margin:14px 0 18px}
.lead{color:var(--mut);max-width:52ch;font-size:18px}

/* footer */
.site-foot{margin-top:clamp(60px,8vw,110px);background:var(--bg2);border-top:1px solid var(--ln);padding:clamp(48px,6vw,84px) 5vw 26px;color:var(--mut);font-size:15px}
.ft-top{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:clamp(28px,4vw,64px)}
.ft-brand .logo{color:var(--fg);display:inline-block}
.ft-tag{font:300 clamp(24px,2.4vw,32px)/1.2 var(--serif);color:var(--fg);margin:16px 0 26px;max-width:14em}
.ft-tag i{font-style:normal;color:var(--red)}
.ft-col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ft-col h4{margin:0 0 8px;font:500 12px Jost,system-ui,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--fg)}
.ft-col a{transition:color .25s}
.ft-col a:hover{color:var(--red)}
.ft-bot{max-width:1240px;margin:clamp(40px,5vw,70px) auto 0;padding-top:22px;border-top:1px solid var(--ln);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;letter-spacing:.04em}
@media(max-width:820px){.ft-top{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media(max-width:480px){.ft-top{grid-template-columns:1fr}}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* scroll reveal (only when JS is on) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}}

@media(max-width:820px){
  .burger{display:grid;position:relative;z-index:3}
  .nav .logo{position:relative;z-index:3}
  /* full-screen menu: light background, page names centred */
  .nav-links{position:fixed;top:0;left:0;right:0;bottom:-30vh;height:auto;z-index:2;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0 8vw 30vh;background:var(--bg);border:0;text-align:center;font-size:inherit;letter-spacing:0;visibility:hidden;opacity:0;transition:opacity .4s ease,visibility 0s linear .4s}
  .nav.open .nav-links{visibility:visible;opacity:1;transition:opacity .4s ease,visibility 0s}
  .nav.open{position:fixed}
  /* every item (Contact included) is plain text in the hero headline font: dark for inactive pages, accent red for the current page */
  .nav-links a,.nav-links a.btn{padding:10px 0;border:0;background:none;color:var(--fg);font:400 clamp(44px,13vw,60px)/1.1 Italiana,Georgia,serif;letter-spacing:.01em;text-align:center;opacity:0;translate:0 18px;transition:opacity .5s ease,translate .6s cubic-bezier(.2,.7,.2,1),color .25s}
  .nav-links a:after{display:none}
  .nav-links a[aria-current],.nav-links a.btn[aria-current]{color:var(--red)}
  .nav.open .nav-links a{opacity:1;translate:0 0}
  .nav.open .nav-links a:nth-child(1){transition-delay:.12s}
  .nav.open .nav-links a:nth-child(2){transition-delay:.2s}
  .nav.open .nav-links a:nth-child(3){transition-delay:.28s}
  html.menu-open,html.menu-open body{overflow:hidden}
  .pg{padding-top:110px}
}

/* images that fail to load are hidden so the placeholder tint shows instead of a broken icon */
img[hidden]{display:none!important}

/* ===== home ===== */
/* weonrec — home page: bento cards + arch hero */
h1,h2,h3,summary{font-family:var(--serif);font-weight:300}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(16px,2.4vw,32px)}
.cell{background:var(--card);border:1px solid var(--ln);border-radius:22px;overflow:hidden}
.card{padding:clamp(28px,3.4vw,52px)}
.blk{padding:clamp(40px,6vw,84px) 0 0}
.sh{margin:0 0 28px 6px}
.sh h2{font-size:clamp(34px,4.4vw,60px);letter-spacing:-.02em}
.sh p{color:var(--mut);margin-top:8px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.meta{color:var(--mut);font-size:14px;margin-left:6px}

/* placeholder film frames — swap for real stills or video posters */
.ph{position:relative;display:block;overflow:hidden;background:linear-gradient(150deg,var(--p1,#e3dbcc),var(--p2,#bdb29f))}
.ph:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 28% 18%,#ffffff66,transparent 62%)}
.pb{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:13px;padding-left:3px;box-shadow:0 12px 34px #1f1c1822;transition:transform .3s,background .3s,color .3s}
.ph:hover .pb{transform:scale(1.08);background:var(--red);color:#faf7f2}

/* hero: centred headline over three arches, fills the screen */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding-top:clamp(84px,12vh,120px);text-align:center}
.hero h1{font:400 clamp(40px,min(9vw,12.5vh),150px)/.98 Italiana,Georgia,serif;letter-spacing:.01em;margin:clamp(10px,2vh,24px) 0 clamp(14px,3vh,36px)}
.hero-foot{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.4vh,30px)}
.hero-foot p{max-width:46ch;color:var(--mut);font-size:clamp(15px,2.2vh,18px);line-height:1.55}
.hero .row{justify-content:center}
.arch-row{flex:1 1 0;min-height:150px;width:100%;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:clamp(14px,2.4vw,34px);align-items:end;max-width:1100px;margin:clamp(20px,4vh,56px) auto 0}
.arch{border-radius:999px 999px 0 0;height:86%;border:1px solid var(--ln)}
.arch-row .a2{height:100%}
.a1{--p1:#e2d9ca;--p2:#a99d88}.a2{--p1:#d6ccba;--p2:#b3a791}.a3{--p1:#dfd6c7;--p2:#a49883}
/* media inside the arches: gradient above is the fallback until files exist */
.arch img,.arch video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.arch img{z-index:1}
.arch video{z-index:2;opacity:0;transition:opacity .35s;background:transparent}
.arch.is-active video{opacity:1}
/* play button: always above poster and video */
.arch .pb{z-index:4;border:0;cursor:pointer;color:var(--fg);font-size:13px;line-height:1;width:84px;height:84px}
.arch.is-playing .pb{opacity:0;pointer-events:none}
@media(max-width:560px){.arch .pb{width:60px;height:60px}}
/* hero reel: tap the video to pause; one small mute button, bottom right (the pillar is square there) */
.arch video::-webkit-media-controls,.arch video::-webkit-media-controls-enclosure,.arch video::-webkit-media-controls-panel,.arch video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.arch.a2 video{cursor:pointer}
.mute{position:absolute;z-index:5;right:12px;bottom:12px;width:36px;height:36px;border:0;border-radius:50%;background:var(--card);color:var(--fg);display:none;place-items:center;padding:0;cursor:pointer;box-shadow:0 6px 18px #1f18182e;-webkit-tap-highlight-color:transparent;transition:background .3s,color .3s,transform .3s}
.arch.is-active .mute{display:grid}
.mute:hover{background:var(--red);color:#faf7f2;transform:scale(1.08)}
.mute .x{display:none}
.mute[aria-pressed="true"] .x{display:inline}
.mute[aria-pressed="true"] .w{display:none}
@media(max-width:560px){.mute{width:34px;height:34px;right:10px;bottom:10px}}
.proof{padding:clamp(14px,2.6vh,28px) 0;color:var(--mut);font-size:14px;letter-spacing:.06em;display:flex;justify-content:center;align-items:center;gap:12px}
.proof:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
/* wide desktop only: tighter headline + wider intro (2 lines) + less dead space under the arches = taller pillars.
   Tablet, mobile and narrow desktop (<1280px) keep the rules above untouched. */
@media(min-width:1280px){
.hero h1{font-size:clamp(40px,min(8.6vw,11.8vh),142px);line-height:.94;margin:clamp(9px,1.8vh,22px) 0 clamp(13px,2.7vh,33px)}
.hero-foot{gap:clamp(12px,2.2vh,26px)}
.hero-foot p{max-width:68ch;font-size:clamp(14px,2vh,17px);line-height:1.5}
.arch-row{margin-top:clamp(20px,3.6vh,50px)}
.proof{padding:clamp(10px,1.7vh,18px) 0 clamp(8px,1.3vh,14px)}
}
/* phones only: bigger headline, smaller intro, less dead space under the arches */
@media(max-width:560px){
.hero h1{font-size:clamp(44px,13vw,60px);line-height:.96;margin:clamp(9px,1.8vh,20px) 0 clamp(12px,2.4vh,28px)}
.hero-foot{gap:clamp(12px,2vh,22px)}
.hero-foot p{max-width:none;font-size:14px;line-height:1.5;text-wrap:balance}
.hero .row .btn{padding:12px 22px;font-size:12px;letter-spacing:.09em}
.arch-row{margin-top:clamp(16px,2.8vh,34px)}
.proof{padding:clamp(10px,1.6vh,16px) 0 clamp(8px,1.2vh,12px)}
}

/* film mosaic */
.mos,.grid2,.grid3{display:grid;gap:16px}
.mos,.grid3{grid-template-columns:repeat(3,1fr)}
.grid2{grid-template-columns:1fr 1fr}
.fm{display:block}
.fm .ph{aspect-ratio:3/4;border-radius:22px;border:1px solid var(--ln);margin-bottom:14px}
.fm:nth-child(2) .ph{--p1:#d7cdbc;--p2:#b3a791}
.fm .pb{opacity:0}
.fm:hover .pb{opacity:1}
.fm h3{font-size:26px;margin-left:6px}

/* cards */
.card h2{font-size:clamp(30px,3.4vw,46px);margin-bottom:16px;letter-spacing:-.02em}
.card>p{color:var(--mut)}
.list,.steps{list-style:none;padding:0}
.list{margin:26px 0 0}
.list li{padding:14px 0;border-top:1px solid var(--ln);display:flex;gap:14px;color:var(--mut);font-size:16px}
.list b{color:var(--fg);font-weight:400;min-width:130px}
.steps{margin:0;counter-reset:s}
.steps li{counter-increment:s;padding:16px 0 16px 46px;border-top:1px solid var(--ln);position:relative}
.steps li:before{content:counter(s);position:absolute;left:0;top:16px;width:30px;height:30px;border-radius:50%;border:1px solid var(--ln);display:grid;place-items:center;font-size:13px;color:var(--red)}
.steps b{display:block;font:400 20px var(--serif)}
.steps span{color:var(--mut);font-size:15px}

/* FAQ: one-open accordion, height reserved by JS */
.fq-i{border-bottom:1px solid var(--ln)}
.fq-i h3{font:inherit;margin:0}
.fq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:52px;padding:14px 0;background:none;border:0;color:inherit;text-align:left;cursor:pointer;font:300 20px/1.3 var(--serif)}
.fq-q:after{content:"+";font:300 20px Jost,sans-serif;color:var(--red);flex:none}
.fq-i.open .fq-q:after{content:"–"}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.fq-i.open .fq-a{grid-template-rows:1fr}
.fq-a>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .35s}
.fq-i.open .fq-a>div{visibility:visible;transition-delay:0s}
.fq-a p{color:var(--mut);padding-bottom:16px}
@media(prefers-reduced-motion:reduce){.fq-a{transition:none}}

/* closing call to action (left card of the FAQ row) */
.cta{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--bg2)}
.cta h2{font-size:clamp(36px,4.2vw,64px);letter-spacing:-.02em;margin-bottom:22px}
.cta-sub{color:var(--mut);max-width:40ch;margin:0 auto 30px}
.cta .row{justify-content:center}

@media(hover:none){.fm .pb{opacity:1}}
@media(max-width:900px){
  .mos,.grid2,.grid3{grid-template-columns:1fr}
}

/* ===== showcase ===== */
/* weonrec — media showcases on the home page: "Real days, real couples" (videos) and "Pinned to the fridge" (photos) */
.vs .sh{margin-left:6px}
.vs figure,.vs article{margin:0}
.vs figcaption{font:italic 300 20px/1.3 var(--serif)}

/* shared placeholder tint, shows until the real media loads */
[data-n="1"]{--p1:#e2d9ca;--p2:#a99d88}[data-n="2"]{--p1:#d6ccba;--p2:#b3a791}[data-n="3"]{--p1:#dfd6c7;--p2:#a49883}[data-n="4"]{--p1:#d7cdbc;--p2:#b3a791}

/* video frame (autoplay when in view) */
.vs-f{position:relative;aspect-ratio:9/16;overflow:hidden;isolation:isolate;border:1px solid var(--ln);border-radius:22px;background:linear-gradient(150deg,var(--p1,#e3dbcc),var(--p2,#bdb29f));-webkit-tap-highlight-color:transparent}
.vs-f:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 28% 18%,#ffffff66,transparent 62%)}
.vs-f video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.vs-f video.vs-err{display:none}
.vs-f video{pointer-events:none}
/* Real days, real couples: four staggered columns */
.vs4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2.2vw,28px);align-items:start;max-width:1100px;margin-inline:auto}
.vs4-it:nth-child(even){margin-top:clamp(24px,5vw,72px)}
.vs4-it .vs-f{border-radius:4px}
.vs4-it figcaption{display:flex;flex-direction:column;margin-top:14px}
.vs4-it figcaption b{font:400 clamp(18px,1.9vw,26px)/1.2 Italiana,Georgia,serif;letter-spacing:.01em}
.vs4-it figcaption span{font-size:14px;color:var(--mut);letter-spacing:.04em}

/* Pinned to the fridge: polaroid pile with photos */
.vs8-row{display:flex;justify-content:center;padding:18px 0 8px}
.vs8-it{position:relative;width:clamp(150px,19vw,240px);background:var(--card);border:1px solid var(--ln);padding:10px 10px 0;margin-inline:-1vw;box-shadow:0 18px 40px #1f1c1822;rotate:var(--r);transition:rotate .45s cubic-bezier(.2,.7,.2,1),translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.vs8-it:before{content:"";position:absolute;z-index:5;top:-11px;left:50%;translate:-50% 0;rotate:-3deg;width:64px;height:20px;background:#d9d2c5cc;border:1px solid #d9d2c5}
.vs8-ph{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:2px;background:linear-gradient(150deg,var(--p1,#e3dbcc),var(--p2,#bdb29f))}
.vs8-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vs8-it figcaption{text-align:center;padding:12px 4px 16px;font-size:18px}
@media(hover:hover){.vs8-it:hover{rotate:0deg;translate:0 -14px;z-index:6;box-shadow:0 28px 54px #1f1c1833}}

@media(max-width:700px){
  .vs4-grid{grid-template-columns:1fr 1fr}
  .vs8-row{flex-wrap:wrap;gap:22px;padding-top:26px}
  .vs8-it{width:calc(50% - 11px);margin-inline:0}
  .vs8-it figcaption{font-size:16px}
}

/* ===== intro-options ===== */
/* weonrec — intro section on the home page: words light up as you read */
.io{padding-top:clamp(56px,8vw,110px)}
.io-cue{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(36px,5vw,64px);color:var(--mut);font:italic 300 20px/1.3 var(--serif);text-align:center}
.io-cue:after{content:"";width:1px;height:54px;background:linear-gradient(var(--red),transparent)}

.lit{max-width:20em;margin:0 0 0 6px;font:300 clamp(30px,4.6vw,66px)/1.16 var(--serif);letter-spacing:-.015em}
.lit em{font-style:italic}
.js .lit .w{opacity:.14;transition:opacity .4s ease}
.js .lit .w.on{opacity:1}
.io1 .io-cue{align-items:flex-start;margin-left:6px}
@media(prefers-reduced-motion:reduce){.js .lit .w{opacity:1;transition:none}}

/* ===== variants ===== */
/* weonrec — "What couples say" (one quote at a time) and "Plans for every wedding" (big numbers) */

.stars{display:inline-block;color:var(--red);letter-spacing:.22em;font-size:15px;line-height:1;white-space:nowrap}
.more{margin-top:28px;text-align:center}
.more .btn.o{padding:13px 28px}

/* ================= TESTIMONIALS ================= */

/* 2: one quote at a time */
.t2{background:var(--bg2);text-align:center}
.t2-stage{display:grid;max-width:900px;margin:0 auto}
.t2-s{grid-area:1/1;margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,28px)}
.t2-s blockquote{margin:0}
.t2-s p{font:300 clamp(26px,3.8vw,52px)/1.2 var(--serif);letter-spacing:-.01em}
.t2-s figcaption{font:italic 300 20px var(--serif);color:var(--mut)}
.js .t2-s{opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.js .t2-s.on{opacity:1;visibility:visible;transition-delay:0s}
.t2-nav{display:none;justify-content:center;align-items:center;gap:20px;margin-top:clamp(28px,3.4vw,44px)}
.js .t2-nav{display:flex}
.t2-btn{width:46px;height:46px;border-radius:50%;border:1px solid #1f1c1855;background:none;color:var(--fg);font-size:18px;line-height:1;cursor:pointer;transition:background .25s,color .25s}
.t2-btn:hover{background:var(--fg);color:var(--bg)}
.t2-dots{display:flex;gap:12px}
.t2-dots button{position:relative;width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--fg);background:none;cursor:pointer}
.t2-dots button:after{content:"";position:absolute;inset:-10px}
.t2-dots button[aria-current="true"]{background:var(--red);border-color:var(--red)}

/* ================= PRICING ================= */

.fr{display:block;font:italic 300 18px/1 var(--serif);color:var(--mut)}

/* 3: big numbers */
.p3{display:grid;grid-template-columns:repeat(3,1fr);max-width:1100px;margin-inline:auto;border-top:1px solid var(--fg);border-bottom:1px solid var(--ln)}
.p3-c{padding:clamp(30px,4.4vw,60px) clamp(14px,2.4vw,36px);text-align:center;border-left:1px solid var(--ln)}
.p3-c:first-child{border-left:0}
.p3-c .fr{margin-top:18px}
.p3-c b{display:block;font:400 clamp(48px,6.6vw,100px)/1 Italiana,Georgia,serif;letter-spacing:-.01em;margin:8px 0 18px}
.p3-c.f b{color:var(--red)}
.p3-c p{color:var(--mut);font-size:15px;max-width:22ch;margin:0 auto;line-height:1.5}

/* ================= responsive ================= */
@media(max-width:900px){
  .p3{grid-template-columns:1fr}
  .p3-c{border-left:0;border-top:1px solid var(--ln)}
  .p3-c:first-child{border-top:0}
}
@media(prefers-reduced-motion:reduce){.js .t2-s{transition:none!important}}

/* ===== services ===== */
/* weonrec — services page */
.sec{font-size:clamp(30px,4vw,48px);margin-bottom:14px}
.sec+.lead{margin-bottom:48px}

.pk{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:44px 0 70px}
.pc,.ao{font:inherit;color:inherit;text-align:left;background:var(--card);border:1px solid var(--ln);cursor:pointer;position:relative;transition:border-color .25s,background .25s}
.pc{padding:34px 28px}
.pc:hover,.ao:hover{border-color:#1f1c1866}
.pc.s,.ao.s{border-color:var(--red);background:#fcfaf6}
.pc h3{font-size:30px}
.pc b{display:block;font:400 40px var(--serif);margin:10px 0 16px}
.pc ul{list-style:none;padding:0;margin:0;color:var(--mut);font-size:15px}
.pc li{padding:8px 0;border-top:1px solid var(--ln)}
.pc em{position:absolute;top:16px;right:16px;font:500 11px Jost,sans-serif;letter-spacing:.16em;color:var(--red);font-style:normal}
.pc.s{padding-bottom:50px}
.pc.s:after{content:"✓ Selected";position:absolute;left:28px;bottom:10px;font-size:12px;letter-spacing:.1em;color:var(--red)}

.ad{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.ao{display:flex;gap:16px;align-items:center;padding:20px 22px}
.ao .bx{width:22px;height:22px;border:1px solid #1f1c1866;flex:none;display:grid;place-items:center;font-size:13px;color:#faf7f2}
.ao.s .bx{background:var(--red);border-color:var(--red)}
.ao.s .bx:after{content:"✓"}
.ao .t{flex:1;font-size:18px}
.ao small{display:block;color:var(--mut);font-size:14px;line-height:1.45}
.ao strong{font:400 22px var(--serif);white-space:nowrap}
.ao.inc{opacity:.55;cursor:default}

.fp{margin-top:70px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px}
.fp p{font:italic 300 24px/1.4 var(--serif);margin-bottom:14px}
.fp span{color:var(--mut);font-size:14px}

.est{position:sticky;bottom:0;z-index:5;background:#f5f1eaee;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--red);padding:16px 5vw calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.est b{font:400 36px var(--serif);margin-right:14px}
.est small{color:var(--mut);font-size:14px}

/* ===== estimate-options ===== */
/* weonrec — scene-slate estimate (services page). Uses the site's own tokens. */
.slate-wrap{margin-top:70px}
.slate-wrap .sec+.lead{margin-bottom:28px}
.slate{background:var(--card);border:1px solid var(--ln);color:var(--fg)}
.slate small{display:block;font:500 11px Jost,sans-serif;letter-spacing:.26em;color:var(--mut)}
.sl-bar{height:38px;border-bottom:1px solid var(--ln);background:repeating-linear-gradient(-45deg,var(--bg2) 0 26px,var(--card) 26px 52px)}
.sl-g{display:grid;grid-template-columns:1.2fr 1.2fr .5fr}
.sl-g>div{padding:16px 24px;border-right:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.sl-g>div:nth-child(3){border-right:0}
.sl-g .sl-x{grid-column:1/-1;border-right:0}
.sl-g b{display:block;margin-top:4px;font:400 20px/1.3 var(--serif)}
.sl-f{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:24px}
.sl-t{display:block;font:italic 300 clamp(46px,6vw,76px)/1.05 var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:4px}
.sl-f p{font-size:14px;color:var(--mut)}
@media(max-width:560px){
  .sl-g{grid-template-columns:1fr 1fr}
  .sl-g>div:nth-child(1){grid-column:1/-1;border-right:0}
  .sl-g>div:nth-child(2){border-right:1px solid var(--ln)}
  .sl-f .btn{width:100%}
}

/* ===== contact ===== */
/* weonrec — contact page */
.ct{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:5vw;margin-top:44px;align-items:start}
.cf{display:grid;gap:16px}
.cf label{font-size:13px;letter-spacing:.1em;color:var(--mut);display:grid;gap:6px}
.cf input,.cf textarea{width:100%;min-width:0;letter-spacing:0}
.cf .g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.ct>*,.cf>*,.cf .g2>*,.cf label,.info{min-width:0;max-width:100%}
/* iOS date fields have their own intrinsic width: force them to fit the column */
.cf input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;min-height:52px}
.cf input[type=date]::-webkit-date-and-time-value{text-align:left;min-width:0}
.cf label>span{display:block}
.cf .req{color:var(--red);font-weight:400;margin-left:2px}
.cf .opt{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);opacity:.7;margin-left:6px}
.sum{border:1px solid var(--red);padding:16px 18px;font-size:15px;color:var(--mut);background:var(--card)}
.sum b{color:var(--fg);font-weight:400;font-size:18px}
.sum a{color:var(--fg);border-bottom:1px solid var(--red)}

.info h3{font-size:24px;margin:0 0 6px}
.info p{margin:0 0 22px;color:var(--mut)}
.info p a{color:var(--fg);border-bottom:1px solid var(--red)}
.map{display:block;border:1px solid var(--ln);margin:6px 0 24px;overflow:hidden;overflow:clip;contain:paint;max-width:100%}
.map svg{display:block;width:100%;height:auto;overflow:hidden}
.soc{display:flex;gap:10px;flex-wrap:wrap}
.soc a{border:1px solid var(--ln);padding:9px 16px;font-size:14px;transition:border-color .25s}
.soc a:hover{border-color:var(--red)}
@media(max-width:820px){.ct,.cf .g2{grid-template-columns:minmax(0,1fr)}}



/* ===== motion layer ===== */
/* weonrec — motion layer
   Page curtain · progress line · split headlines · scroll choreography.
   Everything that hides content is gated on html.mo (set by js/motion.js) and on
   prefers-reduced-motion: no-preference, so nothing can get stuck invisible. */

/* ================= always on: progress line ================= */
.mp{position:fixed;inset:0 0 auto;height:2px;z-index:60;pointer-events:none}
.mp i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
/* phones/tablets: iOS Safari places position:fixed below its own status bar, so the line lands on top of the content. Hidden there; desktop keeps it. */
@media(max-width:1024px),(pointer:coarse){.mp{display:none}}

/* ================= custom cursor (mouse devices only; html.cc is set by js/motion.js) ================= */
.cc,.cc *{cursor:none}
.cc input:not([type=hidden]):not([type=submit]):not([type=checkbox]):not([type=radio]),.cc textarea{cursor:text}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .25s;will-change:transform}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--red)}
.cur-ring{width:28.5px;height:28.5px;margin:-14.25px 0 0 -14.25px;border:1px solid var(--red);background:transparent;transition:opacity .25s,width .3s cubic-bezier(.2,.7,.2,1),height .3s cubic-bezier(.2,.7,.2,1),margin .3s cubic-bezier(.2,.7,.2,1),background .3s}
.cc.cur-on .cur-dot,.cc.cur-on .cur-ring{opacity:1}
.cc.cur-text .cur-dot,.cc.cur-text .cur-ring{opacity:0}
.cc.cur-link .cur-ring{width:46.5px;height:46.5px;margin:-23.25px 0 0 -23.25px;background:#a3392f1f}
.cc.cur-down .cur-ring{width:19.5px;height:19.5px;margin:-9.75px 0 0 -9.75px;background:#a3392f33}
@media(hover:none),(pointer:coarse){.cur-dot,.cur-ring{display:none}}

@media(prefers-reduced-motion:no-preference){

/* ================= page curtain (CSS-only on arrival, so it can never stick) ================= */
html.js::before{content:"";position:fixed;left:0;top:-30vh;width:100%;height:calc(100% + 75vh);z-index:200;background:#1f1c18;pointer-events:none;border-radius:0 0 50% 50%/0 0 16vh 16vh;animation:ptOut .85s cubic-bezier(.76,0,.24,1) .3s both}
html.js::after{content:"";position:fixed;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--red);z-index:201;pointer-events:none;animation:ptDot 1s cubic-bezier(.76,0,.24,1) both}
html.js.pt-leave::before{top:auto;bottom:-60vh;height:calc(100% + 76vh);border-radius:50% 50% 0 0/16vh 16vh 0 0;animation:ptIn .6s cubic-bezier(.76,0,.24,1) both}
html.js.pt-leave::after{animation:none;opacity:0}
html.js.pt-skip::before,html.js.pt-skip::after{display:none}
/* The curtain is a fixed layer, and iOS Safari only lets fixed layers cover the area between its bars.
   The strips under the status bar and toolbar are the page itself, so the page is darkened/faded too. */
html.js{animation:ptCanvas .001s linear .9s backwards}
@keyframes ptCanvas{from{background-color:#1f1c18}}
html.js body{animation:ptBody .6s ease .3s backwards}
@keyframes ptBody{from{opacity:0}}
html.js.pt-leave{animation:none;background-color:#1f1c18}
html.js.pt-leave body{animation:none;opacity:0;transition:opacity .35s ease .1s}
html.js.pt-skip,html.js.pt-skip body{animation:none}
@keyframes ptOut{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes ptIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes ptDot{0%{scale:0;translate:0 0}28%{scale:1;translate:0 0}55%{scale:1;translate:0 0;opacity:1}100%{scale:1;translate:0 -70vh;opacity:0}}


/* ================= hero: arches rise, then open like doors on scroll ================= */
.js .hero>.tag{animation:tagIn 1.4s cubic-bezier(.2,.7,.2,1) 1s backwards}
/* phones/tablets: spread the letters with a transform instead of letter-spacing, so the text never re-wraps and nothing below jumps */
@media(max-width:900px){.js .hero>.tag{animation:tagInM 1.4s cubic-bezier(.2,.7,.2,1) 1s backwards;will-change:transform,opacity}}
@keyframes tagInM{from{opacity:0;transform:scaleX(1.35);filter:blur(4px)}}
@keyframes tagIn{from{opacity:0;letter-spacing:.8em}}
.js .hero-foot{animation:fadeUp 1.2s cubic-bezier(.2,.7,.2,1) 1.75s backwards}
.js .hero .proof{animation:fadeUp 1.2s cubic-bezier(.2,.7,.2,1) 2.3s backwards}
@keyframes fadeUp{from{opacity:0;translate:0 26px}}
.js .arch{animation:archUp 1.6s cubic-bezier(.2,.8,.2,1) 1.1s backwards}
.js .arch.a1,.js .arch.a3{animation-delay:1.35s}
.js .arch img{animation:imgSettle 2.4s cubic-bezier(.2,.8,.2,1) 1.1s backwards}
.js .arch.a1 img,.js .arch.a3 img{animation-delay:1.35s}
@keyframes archUp{from{clip-path:inset(100% 0 0 0 round 999px 999px 0 0)}to{clip-path:inset(0 0 0 0 round 999px 999px 0 0)}}
@keyframes imgSettle{from{scale:1.4}}
/* the swinging arches must never widen the page on phones */
.hero{overflow-x:clip}
.a1{transform-origin:0 100%}
.a2{transform-origin:50% 100%}
.a3{transform-origin:100% 100%}

/* ================= everything below only applies once motion.js is running ================= */

/* split headlines: words rise out of a mask, the red full stop lands last */
.mo .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .1em .16em 0;margin:0 -.1em -.16em 0}
.mo .sw>span{display:inline-block;translate:0 110%;rotate:5deg;transform-origin:0 100%;transition:translate 1.1s cubic-bezier(.16,.84,.2,1),rotate 1.1s cubic-bezier(.16,.84,.2,1);transition-delay:calc(var(--i,0)*75ms)}
.mo [data-split].in .sw>span{translate:0 0;rotate:0deg}
.mo [data-split] i{display:inline-block;scale:0;transition:scale .8s cubic-bezier(.34,1.9,.5,1);transition-delay:calc(var(--n,0)*75ms + 350ms)}
.mo [data-split].in i{scale:1}
.mo .nb{white-space:nowrap}
.mo h2.rv{opacity:1;transform:none}

/* intro paragraph: words come into focus as you read */
.mo .lit .w{display:inline-block;opacity:.12;filter:blur(5px);translate:0 .14em;transition:opacity .5s ease,filter .6s ease,translate .6s cubic-bezier(.2,.7,.2,1),color .8s ease}
.mo .lit .w.on{opacity:1;filter:none;translate:0 0}
.mo .lit em .w.on{color:var(--red)}
.mo .io-cue{opacity:0;translate:0 16px;transition:opacity .9s ease,translate .9s ease}
.mo .io-cue.in{opacity:1;translate:0 0}
.mo .io-cue:after{transform:scaleY(0);transform-origin:top}
.mo .io-cue.in:after{animation:drip 2.6s cubic-bezier(.6,0,.3,1) 1s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* real days: each clip is unveiled like a curtain, with a slow dolly-out; columns drift at different speeds */
.mo .vs4-it.rv{opacity:1;transform:none;transition:none}
.mo .vs4-it .vs-f{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1);transition-delay:calc(var(--k,0)*.15s)}
.mo .vs4-it.in .vs-f{clip-path:inset(0 0 0 0)}
.mo .vs4-it .vs-f video{scale:1.45;transition:scale 2.2s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k,0)*.15s)}
.mo .vs4-it.in .vs-f video{scale:1}
.mo .vs4-it figcaption{opacity:0;translate:0 14px;transition:opacity .9s ease,translate .9s ease;transition-delay:calc(var(--k,0)*.15s + .9s)}
.mo .vs4-it.in figcaption{opacity:1;translate:0 0}

/* fridge: the polaroids are driven by scroll in motion.js */
.mo .vs8-row.rv{opacity:1;transform:none;transition:none}

/* cards open like a lens iris */
.mo .cell.rv{opacity:0;transform:none;clip-path:inset(9% 5% 9% 5% round 22px);transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1),opacity .9s ease}
.mo .cell.rv.in{opacity:1;clip-path:inset(0 0 0 0 round 22px)}
.mo .cta.rv>:not(h2){opacity:0;translate:0 24px;transition:opacity .9s ease,translate .9s cubic-bezier(.2,.7,.2,1);transition-delay:.55s}
.mo .cta.rv>:nth-child(3){transition-delay:.7s}
.mo .cta.in>:not(h2){opacity:1;translate:0 0}
.mo .faq.rv .fq-i{opacity:0;translate:0 20px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k,0)*.1s + .5s)}
.mo .faq.in .fq-i{opacity:1;translate:0 0}

/* reviews: stars wipe in, quote rises out of focus */
.mo .t2.in .t2-s.on .stars{animation:starsIn 1.1s cubic-bezier(.2,.7,.2,1) .15s backwards}
.mo .t2.in .t2-s.on blockquote{animation:quoteIn 1.1s cubic-bezier(.2,.7,.2,1) .25s backwards}
.mo .t2.in .t2-s.on figcaption{animation:quoteIn 1s ease .55s backwards}
@keyframes starsIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes quoteIn{from{opacity:0;translate:0 28px;filter:blur(6px)}}

/* pricing: the rule draws itself, columns rise, numbers count up */
.mo .p3.rv{opacity:1;transform:none;transition:none;position:relative;border-top-color:transparent}
.mo .p3:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.7s cubic-bezier(.77,0,.18,1)}
.mo .p3.in:before{transform:none}
.mo .p3-c{opacity:0;translate:0 44px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k,0)*.18s + .3s)}
.mo .p3.in .p3-c{opacity:1;translate:0 0}
.mo .p3-c b{font-variant-numeric:tabular-nums}

/* ================= inner pages ================= */
.js .pg>.tag{animation:tagIn 1.4s cubic-bezier(.2,.7,.2,1) 1s backwards}
.js .pg>h1+.lead{animation:fadeUp 1.1s cubic-bezier(.2,.7,.2,1) 1.6s backwards}
.js .est{animation:estUp 1s cubic-bezier(.2,.8,.2,1) 2s backwards}
@keyframes estUp{from{translate:0 100%}}
.est b{display:inline-block;transform-origin:0 60%}
.est b.bump{animation:bump .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{from{scale:1.14;color:var(--red)}}

.mo .pk:not(.in) .pc{opacity:0}
.mo .pk.in .pc{animation:cardIn 1.1s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--k,0)*.14s)}
@keyframes cardIn{from{opacity:0;translate:0 64px;rotate:3deg}}
.mo .pc.s:after{animation:slideIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes slideIn{from{opacity:0;translate:-10px 0}}
.mo .ad:not(.in) .ao{opacity:0}
.mo .ad.in .ao{animation:addIn .9s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--k,0)*.09s)}
@keyframes addIn{from{opacity:0;translate:-34px 0}}
.mo .ao.s .bx{animation:pop .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{0%{scale:.3}100%{scale:1}}
.mo .fp:not(.in)>*{opacity:0}
.mo .fp.in>*{animation:fadeUp 1.1s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--k,0)*.18s)}

/* contact */
.mo .cf:not(.in)>*{opacity:0}
.mo .cf.in>*{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--k,0)*.09s)}
.cf label{transition:color .3s}
.cf label:focus-within{color:var(--fg)}
.mo .info:not(.in)>*{opacity:0}
.mo .info.in>*{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--k,0)*.1s + .15s)}
.mo .map path.dr{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.5,0,.2,1)}
.mo .map.in path.dr{stroke-dashoffset:0}
.mo .map path[fill="#a3392f"],.mo .map circle[r="7"]{transform-box:fill-box;transform-origin:50% 100%}
.mo .map:not(.in) path[fill="#a3392f"],.mo .map:not(.in) circle[r="7"]{opacity:0}
.mo .map.in path[fill="#a3392f"],.mo .map.in circle[r="7"]{animation:pinDrop 1s cubic-bezier(.3,1.5,.5,1) 1.1s backwards}
@keyframes pinDrop{from{opacity:0;translate:0 -70px;scale:.6}}
.mo .map circle[opacity=".16"]{transform-box:fill-box;transform-origin:50% 50%}
.mo .map.in circle[opacity=".16"]{animation:halo 2.8s ease-out 2.1s infinite backwards}
@keyframes halo{from{scale:.3;opacity:.4}to{scale:1.8;opacity:0}}
.mo .map text{opacity:0;transition:opacity 1s ease 1.8s}
.mo .map.in text{opacity:1}


}


/* ===== added: accessibility, cookie note, legal pages ===== */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:14px;top:-80px;z-index:10001;background:var(--fg);color:var(--bg);padding:11px 18px;font:500 13px Jost,system-ui,sans-serif;letter-spacing:.1em;transition:top .2s}
.skip:focus{top:14px;outline:2px solid var(--red);outline-offset:2px}
main:focus{outline:0}
.ft-bot a,.ft-bot .ck-open{color:inherit;text-decoration:none;transition:color .25s}
.ft-bot a:hover,.ft-bot .ck-open:hover{color:var(--red)}
.ft-bot .ck-open{font:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer}
.ft-bot .dot{margin:0 8px;opacity:.6}

/* cookie note: small, bottom-left */
.ck{position:fixed;left:20px;bottom:20px;z-index:9000;width:min(340px,calc(100vw - 32px));background:var(--card);border:1px solid var(--ln);box-shadow:0 18px 40px #1f1c1822;padding:16px 18px 16px;font-size:14px;line-height:1.5;color:var(--mut);animation:ckIn .6s cubic-bezier(.2,.8,.2,1) .4s backwards}
.ck[hidden]{display:none}
@keyframes ckIn{from{opacity:0;translate:0 14px}}
.ck b{display:flex;align-items:center;gap:9px;font:italic 300 19px/1.2 var(--serif);color:var(--fg);margin-bottom:6px}
.ck b:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.ck p{margin:0 0 13px}
.ck p a{color:var(--fg);border-bottom:1px solid var(--red)}
.ck-b{display:flex;gap:8px}
.ck-b button{font:500 12px Jost,system-ui,sans-serif;letter-spacing:.1em;padding:9px 18px;cursor:pointer;border:1px solid var(--fg);background:var(--fg);color:var(--bg);transition:background .25s,color .25s,border-color .25s}
.ck-b button:hover{background:var(--red);border-color:var(--red);color:#faf7f2}
.ck-b .ck-n{background:none;color:var(--fg);border-color:#1f1c1855}
.ck-b .ck-n:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
@media(max-width:520px){.ck{left:12px;right:12px;width:auto;padding:13px 15px;font-size:13px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.ck b{font-size:17px;margin-bottom:3px}.ck p{margin-bottom:10px}.ck-b button{padding:8px 16px}}
@media(prefers-reduced-motion:reduce){.ck{animation:none}}

/* privacy page */
.legal{max-width:68ch;margin-top:34px}
.legal h2{font-size:28px;margin:44px 0 10px}
.legal p,.legal li{color:var(--mut);margin:0 0 12px}
.legal ul{padding-left:20px;margin:0 0 12px}
.legal a{color:var(--fg);border-bottom:1px solid var(--red)}
.legal .upd{font-size:14px;letter-spacing:.04em}
.pg .row{margin-top:30px}

/* rolling price numbers: real text stays in the page, the animated number is drawn on top */
.p3-c b.cu{position:relative;color:transparent}
.p3-c b.cu::after{content:attr(data-v);position:absolute;left:0;right:0;top:0;color:var(--fg)}
.p3-c.f b.cu::after{color:var(--red)}