/* Elena Vale, marriage celebrant. Hand written for Matt's Websites; class prefix ev3-. Sizes in px at a 16 px root. */
@font-face{font-family:"EV3 XL";src:url(/examples/elena-vale/assets/fonts/noto-serif-display-300-w92.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"EV3 Serif";src:url(/examples/elena-vale/assets/fonts/noto-serif-display-300-w945.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"EV3 Serif";src:url(/examples/elena-vale/assets/fonts/noto-serif-display-400-w945.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EV3 Sans";src:url(/examples/elena-vale/assets/fonts/inter-300-400.woff2) format("woff2");font-weight:300 400;font-style:normal;font-display:swap}
/* local fallbacks sized to the web fonts (scripts/font-fallbacks.mjs, 31 October 2026) so text barely moves on swap */
@font-face{font-family:"EV3 XL Fb";src:local("Georgia");font-style:normal;size-adjust:98.4%;ascent-override:108.7%;descent-override:29.5%;line-gap-override:0.0%}
@font-face{font-family:"EV3 Serif Fb";src:local("Georgia");font-style:normal;size-adjust:99.9%;ascent-override:90.1%;descent-override:25.0%;line-gap-override:0.0%}
@font-face{font-family:"EV3 Sans Fb";src:local("Arial"),local("ArialMT");font-style:normal;size-adjust:100.6%;ascent-override:96.4%;descent-override:23.9%;line-gap-override:0.0%}

:root{
  --ev3-cream:#F5F2ED;--ev3-ink:#232323;--ev3-white:#fff;--ev3-beige:#DFDCD6;--ev3-cground:#EEEBE6;
  --ev3-xl:"EV3 XL","EV3 XL Fb",Georgia,serif;
  --ev3-serif:"EV3 Serif","EV3 Serif Fb",Georgia,serif;
  --ev3-sans:"EV3 Sans","EV3 Sans Fb",Arial,sans-serif;
  --ev3-cw:calc(100% - 30px);
  --ev3-ease:cubic-bezier(.25,.46,.45,.94);
  --ev3-expo:cubic-bezier(.19,1,.22,1);
  --ev3-sine:cubic-bezier(.445,.05,.55,.95);
  --ev3-p1:cubic-bezier(.455,.03,.515,.955);
  --ev3-p3:cubic-bezier(.215,.61,.355,1);
  --ev3-p2io:cubic-bezier(.645,.045,.355,1);
  --ev3-p3io:cubic-bezier(.77,0,.175,1);
  --ev3-rest:.4;
}
@media (min-width:768px){:root{--ev3-cw:calc(100% - 60px)}}
@media (min-width:2060px){:root{--ev3-cw:2000px}}
html{background:var(--ev3-cream);scroll-behavior:auto;scroll-padding-top:0;overflow-anchor:none}
body{background:var(--ev3-cream);color:var(--ev3-ink);font:400 16px/1.1 var(--ev3-sans);font-optical-sizing:auto;overflow-x:clip;min-height:100vh}
main{display:block;position:relative;z-index:1;background:var(--ev3-cream)}
main:focus{outline:0}
a{color:inherit}
p,h1,h2,h3,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:none}
picture{display:block}
button{color:inherit;background:none;border:0;padding:0;font:inherit;border-radius:0}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.ev3-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.skip-link{z-index:1100;background:#fff;color:var(--ev3-ink);font:400 16px/1 var(--ev3-sans)}

/* ---------------------------------------------------------------- header */
.ev3-hd{position:absolute;top:0;left:0;width:100%;height:97px;z-index:1000;pointer-events:none;color:#fff;
  transition:color .5s var(--ev3-ease),opacity .5s var(--ev3-ease)}
html.ev3-js .ev3-hd{position:fixed}
html[data-head=cream]:not([data-tone=light]) .ev3-hd,html[data-tone=dark] .ev3-hd,body.menu-open .ev3-hd{color:var(--ev3-ink)}
.ev3-hd-in{position:relative;height:100%;width:var(--ev3-cw);margin:0 auto}
.ev3-wm{position:absolute;left:50%;top:50%;width:183px;height:44px;margin:-22px 0 0 -91.5px;display:flex;align-items:center;
  padding:0 10px;color:inherit;pointer-events:auto;transition:opacity .3s var(--ev3-ease),transform .7s cubic-bezier(.165,.84,.44,1)}
/* the wordmark slides to the panel's left as the menu opens (1 s expo.out) and back as it closes (0.7 s power3.out) */
body.menu-open .ev3-wm{transition:opacity .3s var(--ev3-ease),transform 1s var(--ev3-expo)}
.ev3-wm-svg{display:block;width:162px;height:auto;fill:currentColor}
.ev3-wm:hover{opacity:.8}
.ev3-mb{position:absolute;right:0;top:50%;height:44px;margin-top:-22px;display:flex;align-items:center;gap:35px;
  font:400 16px/1 var(--ev3-sans);color:inherit;pointer-events:auto;cursor:pointer}
/* "Menu" rolls out letter by letter once the couples' list starts and back in above it (0.25 s, the reference's switch) */
.ev3-mb-l{display:flex;overflow:hidden}
.ev3-mb-l.is-gone{width:0}
.ev3-mb-l>span{display:block}
.ev3-burger{display:flex;align-items:center;width:50px;height:44px}
.ev3-burger>span{display:block;position:relative;width:50px;height:1px;background:currentColor}
.ev3-burger>span::before,.ev3-burger>span::after{content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .75s var(--ev3-expo)}
.ev3-burger>span::before{bottom:calc(100% + 10px)}
.ev3-burger>span::after{top:calc(100% + 10px)}
.ev3-mb:hover .ev3-burger>span::before{transform:translateY(4px)}
.ev3-mb:hover .ev3-burger>span::after{transform:translateY(-4px)}
.ev3-mb[aria-expanded=true] .ev3-burger>span::before{transform:translateY(11px)}
.ev3-mb[aria-expanded=true] .ev3-burger>span::after{transform:translateY(-11px)}
/* the pools (768 px and wider): a soft fall of #232323 behind the white wordmark and Menu while they sit on a hero photo
   (home and couple pages), and once they turn charcoal a cream pool, solid behind the letters and gone by the header's
   foot, so the text and photos passing under the header fade out before they reach the wordmark (a palette colour,
   precedence 3) */
.ev3-hd::before,.ev3-hd::after{content:"";position:absolute;inset:0 0 auto 0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s var(--ev3-ease)}
.ev3-hd::before{height:170px;background:linear-gradient(rgba(35,35,35,.36) 0%,rgba(35,35,35,.2) 45%,rgba(35,35,35,0) 100%)}
.ev3-hd::after{height:100%;background:linear-gradient(#F5F2ED 0%,#F5F2ED 64%,rgba(245,242,237,0) 100%)}
html.ev3-k-home:not([data-tone=dark]) .ev3-hd::before,html.ev3-k-couple:not([data-tone=dark]) .ev3-hd::before{opacity:1}
html.ev3-js[data-tone=dark] .ev3-hd::after{opacity:1}
body.menu-open .ev3-hd::before,body.menu-open .ev3-hd::after,html.ev3-lock .ev3-hd::after{opacity:0}
@media (min-width:768px){
  body.menu-open .ev3-wm{transform:translateX(calc(var(--ev3-wmx, 0px)))}
}
@media (max-width:767px){
  .ev3-hd,html.ev3-js .ev3-hd{position:fixed;height:55px;background:#fff;color:var(--ev3-ink)!important}
  .ev3-hd::before,.ev3-hd::after{display:none}
  .ev3-wm{width:160px;margin-left:-80px}
  .ev3-wm-svg{width:139.25px}
  .ev3-mb-l{display:none}
  .ev3-mb{right:0;min-width:50px}
  body.menu-open .ev3-wm{transform:translateX(calc(-50vw + 95px))}
}

/* ---------------------------------------------------------------- menu (the shared toggle sets data-open) */
.ev3-nav{position:fixed;inset:0;z-index:990;visibility:hidden;pointer-events:none;transition:visibility 0s 1s}
.ev3-nav[data-open]{visibility:visible;transition:visibility 0s}
.ev3-nav-bd{position:fixed;inset:0;background:var(--ev3-beige);opacity:0;transition:opacity 1s var(--ev3-expo)}
.ev3-nav[data-open] .ev3-nav-bd{opacity:.75;pointer-events:auto}
.ev3-nav-sc{position:relative;height:100%;max-height:var(--menu-available-height,100%);overflow:hidden}
.ev3-nav[data-open] .ev3-nav-sc{overflow:auto;overscroll-behavior:contain}
.ev3-nav-g{width:var(--ev3-cw);margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);column-gap:10px;pointer-events:none}
.ev3-nav-p{position:relative;grid-column:1/span 6;padding-top:55px;transform:translateY(calc(-100% - 1px));
  transition:transform 1s var(--ev3-expo);pointer-events:auto;color:var(--ev3-ink)}
.ev3-nav-p{isolation:isolate}
.ev3-nav-p::before{content:"";position:absolute;z-index:-1;top:0;left:-15px;width:calc(100% + 30px);height:100%;background:#fff}
.ev3-nav[data-open] .ev3-nav-p{transform:none}
.ev3-nav-n{position:relative;z-index:2;padding:clamp(10vh,12vh,34vw) 0;text-align:center}
.ev3-nav-n ul{display:flex;flex-direction:column;align-items:center}
.ev3-nav-n a{display:inline-flex;align-items:center;min-height:44px;padding:6px 20px;text-decoration:none;font:300 26px/1.15 var(--ev3-serif)}
.ev3-nav-n a span{position:relative;display:block}
.ev3-nav-n a span::before{content:"";position:absolute;left:0;bottom:2px;width:100%;height:2px;background:currentColor;opacity:0;
  transition:opacity .3s var(--ev3-ease)}
.ev3-nav-n a.is-on span::before,html:not(.ev3-js) .ev3-nav-n a[aria-current] span::before,.ev3-nav-n a:focus-visible span::before{opacity:1}
.ev3-nav-f{display:flex;flex-direction:column;align-items:center;gap:25px;padding:0 0 26px}
.ev3-nav-ph{display:none}
.ev3-al{display:inline-flex;align-items:center;gap:15px;min-height:44px;text-decoration:none;font:400 16px/1.1 var(--ev3-sans)}
.ev3-al-i{position:relative;display:flex;align-items:center;justify-content:center;width:33px;height:33px;color:var(--ev3-cream);overflow:hidden}
.ev3-al-i::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ev3-ink);transition:transform .4s var(--ev3-p1)}
.ev3-al-i svg{position:absolute;width:12px;height:10px;transition:transform .4s var(--ev3-p1)}
.ev3-al-i svg:last-child{transform:translateX(-33px)}
.ev3-al:hover .ev3-al-i::before{transform:scale(.86)}
.ev3-al:hover .ev3-al-i svg:first-child{transform:translateX(33px)}
.ev3-al:hover .ev3-al-i svg:last-child{transform:none}
@media (max-width:767px){
  .ev3-nav-f .ev3-al{padding:16px 25px;border-radius:30px;background:var(--ev3-ink);color:var(--ev3-cream)}
  .ev3-nav-f .ev3-al-i{display:none}
}
@media (min-width:650px){.ev3-nav-n a{font-size:30px}}
@media (min-width:768px){
  .ev3-nav-g{grid-template-columns:repeat(12,1fr)}
  .ev3-nav-p{grid-column:3/span 10;padding-top:0}
  .ev3-nav-p::before{left:0}
  .ev3-nav-n{padding:clamp(10vh,20vw,20vh) 0}
  .ev3-nav-f{flex-direction:row;justify-content:flex-end;padding:0 0 26px 30px}

}
/* side photos (menu and filter panel) only on hover screens, which are the only ones that load them */
@media (min-width:768px) and (hover:hover) and (pointer:fine){
  /* side photos centred on the links; each opens from its centre while the photo inside grows from half size (the
     beige ground shows round it for a moment); the pair holds still as the photos swap */
  .ev3-nav-ph{display:block;position:absolute;top:50%;width:16%;aspect-ratio:242/309;transform:translateY(-50%);z-index:1;pointer-events:none}
  .ev3-nav-ph-l{left:15%}
  .ev3-nav-ph-r{right:15%}
  .ev3-nav-pi{position:absolute;inset:0;background:var(--ev3-beige);clip-path:inset(50%);transition:clip-path .5s var(--ev3-expo)}
  .ev3-nav-pi.is-on{clip-path:inset(0);z-index:1}
  .ev3-nav-pi picture{width:100%;height:100%;scale:.5;transition:scale .9s var(--ev3-expo)}
  .ev3-nav-pi.is-on picture{scale:1}
  .ev3-nav-pi img{width:100%;height:100%;object-fit:cover}
  .ev3-fl-s .ev3-nav-ph-l{left:5%}
  .ev3-fl-s .ev3-nav-ph-r{right:5%}
}
@media (min-width:1024px){.ev3-nav-n a{font-size:35px}}
@media (max-height:420px) and (max-width:767px){.ev3-nav-n{padding:16px 0}}

/* ---------------------------------------------------------------- pills */
.ev3-pill{display:inline-flex;text-decoration:none;font:400 16px/1 var(--ev3-sans);position:relative;cursor:pointer}
.ev3-pill-c{display:inline-flex;align-items:center;justify-content:center;border-radius:22px;
  transition:color .25s var(--ev3-ease),background-color .25s var(--ev3-ease)}
.ev3-pill-t{display:block;padding:16px 25px}
.ev3-pill-l{font-size:18px}
.ev3-pill-l .ev3-pill-c{border-radius:30px}
.ev3-pill-l .ev3-pill-t{padding:18px 30px}
.ev3-pill-cream .ev3-pill-c{background:var(--ev3-cream);color:var(--ev3-ink)}
.ev3-pill-ink .ev3-pill-c{background:var(--ev3-ink);color:var(--ev3-cream)}
@media (hover:hover){
  .ev3-pill-cream:hover .ev3-pill-c,.ev3-pill-cream:focus-visible .ev3-pill-c{background:var(--ev3-ink);color:var(--ev3-cream)}
  .ev3-pill-ink:hover .ev3-pill-c,.ev3-pill-ink:focus-visible .ev3-pill-c{background:#fff;color:var(--ev3-ink)}
}

/* ---------------------------------------------------------------- home hero */
.ev3-hero{position:relative;z-index:2;background:var(--ev3-cream)}
.ev3-hero-f{position:relative;width:100%;aspect-ratio:406/580;background:var(--ev3-ink);overflow:hidden}
.ev3-hero-s,.ev3-hero-p,.ev3-hero-p img{display:block;width:100%;height:100%}
.ev3-hero-p img{object-fit:cover;object-position:50% 50%;opacity:calc(1 - var(--ev3-rest) - (.75 - var(--ev3-rest)) * var(--hp,0));
  transform:translateY(calc(50% * var(--hp,0)))}
.ev3-hl{position:absolute;top:0;left:15px;right:15px;margin:0;z-index:10;color:#fff;font:300 clamp(55px,15vw,235px)/1.175 var(--ev3-xl);
  letter-spacing:0;font-weight:300;aspect-ratio:auto;height:calc((100vw) * 580 / 406);display:flex;flex-direction:column;justify-content:center}
.ev3-hl-in{display:flex;flex-direction:column;row-gap:47px}
/* each line clips its words for the rise and the letter roll. The display face's descender (0.24 em) reaches 0.04 em
   below the 1.175 line box, so the clip runs 0.06 em lower (a whole "g") and starts 0.045 em down (a "g" rolled up a
   line's height stays hidden; the tallest ascender sits 0.2 em down) */
.ev3-l{display:flex;clip-path:inset(.045em -.5em -.06em -.5em);white-space:nowrap;line-height:1.175}
.ev3-l1,.ev3-l4{justify-content:center}
.ev3-l2{justify-content:flex-start;margin-top:-35px;transform:translateX(calc(18% * var(--hp,0)))}
.ev3-l3{justify-content:flex-end;margin-top:35px;transform:translateX(calc(-18% * var(--hp,0)))}
.ev3-l4{margin-top:-35px}
.ev3-l1{transform:translateY(calc(-42vw * var(--hp,0)))}
.ev3-li,.ev3-cw{display:block}
.ev3-cw{display:flex}
.ev3-lt{display:block}
.ev3-blk{position:relative;z-index:20;display:flex;flex-direction:column;align-items:center;row-gap:15px;padding:15px 15px 0;text-align:center}
.ev3-blk-i{display:none}
.ev3-blk-t{width:100%}
.ev3-stmt{font:375 26px/1.15 var(--ev3-sans);color:var(--ev3-ink)}
.ev3-blk-p{margin-top:25px}
.ev3-blk-p .ev3-pill-c{background:#fff}
.ev3-blk-p .ev3-pill{font:400 18px/1 var(--ev3-serif)}
.ev3-feat{display:none}
.ev3-u{position:relative}
.ev3-u::after{content:"";position:absolute;left:0;top:65%;width:100%;height:1px;background:currentColor;transform:scaleX(0);
  transform-origin:0 50%;transition:transform .35s var(--ev3-ease)}
@media (max-width:767px){
  .ev3-hero{min-height:calc(100vh - 55px)}
  .ev3-hl{padding-top:max(0px,calc(500.4px - 142.86vw))}
  html.ev3-js .ev3-hero{overflow:hidden}
}
@media (min-width:768px){
  .ev3-hero{height:calc(100vw * 580 / 406);background:var(--ev3-ink);overflow:hidden}
  .ev3-hero-w{position:absolute;inset:0 0 auto;height:100vh}
  .ev3-hero-f{position:absolute;left:50%;top:50%;width:100vw;height:calc(100vw * 580 / 406);aspect-ratio:auto;
    transform:translate(-50%,-50%);overflow:visible;background:none}
  .ev3-hero-s{scale:1.05}
  .ev3-hl{left:50%;right:auto;width:var(--ev3-cw);transform:translateX(-50%);height:auto;display:block;
    font-size:min(15vw,235px,calc((100svh + 26px) / 4.7))}
  .ev3-hl-in{row-gap:10px;margin-top:100px}
  .ev3-l2,.ev3-l3,.ev3-l4{margin-top:-60px}
  .ev3-l2{transform:translateX(calc(28% * var(--hp,0))) translateY(calc(-32vw * var(--hp,0)))}
  .ev3-l3{transform:translateX(calc(-28% * var(--hp,0))) translateY(calc(-22vw * var(--hp,0)))}
  /* the block runs from the content's left edge to the window's right edge, as the reference's does (statement,
     pill and detail sit 15 px right of centre, the hairline bleeds off the right); past 2060 px it stops 30 px beyond
     the content's right edge so wide screens keep the same 15 px offset */
  .ev3-blk{position:absolute;left:calc((100% - var(--ev3-cw)) / 2);right:max(0px,calc((100% - var(--ev3-cw)) / 2 - 30px));
    bottom:22%;transform:translateY(30%);row-gap:120px;margin-top:32px;padding:0;color:#fff}
  .ev3-blk-t,.ev3-blk-i{width:100%}
  /* the detail's grid row stays (empty) under 1280 px, as the reference's, so the 12rem gap still sets the block */
  .ev3-blk-i{display:grid;grid-template-columns:repeat(12,1fr);column-gap:10px}
  .ev3-dt{display:none}
  .ev3-blk-t{position:relative}
  .ev3-blk-t::before{content:"";position:absolute;left:0;right:0;top:-25px;height:1px;background:#fff}
  .ev3-blk-tw{display:grid;grid-template-columns:repeat(12,1fr);column-gap:0}
  .ev3-stmt{grid-column:3/span 8;color:#fff;font-size:clamp(26px,3.1vw,55px)}
  .ev3-blk-p{grid-column:1/-1;grid-row:2;margin-top:60px}
  .ev3-blk-p .ev3-pill{font:400 18px/1 var(--ev3-sans)}
  .ev3-blk-p .ev3-pill-c{background:var(--ev3-cream)}
  .ev3-feat{display:block;position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:var(--ev3-cw);z-index:10;color:#fff}
  .ev3-feat-a{display:flex;justify-content:space-between;align-items:center;color:inherit;text-decoration:none}
  .ev3-feat-a>span{display:block;padding:20px 0;font:400 18px/1.1 var(--ev3-sans)}
  .ev3-feat-a:hover .ev3-u::after,.ev3-feat-a:focus-visible .ev3-u::after{transform:scaleX(1)}
}
@media (min-width:1024px){.ev3-feat-a>span{padding:35px 0}}
@media (min-width:1280px){
  .ev3-dt{display:block;grid-column:6/span 2;aspect-ratio:1080/1356;overflow:hidden;position:relative}
  .ev3-dt-m{position:absolute;left:0;right:0;top:-3%;height:106%}
  .ev3-dt picture,.ev3-dt img{width:100%;height:100%;object-fit:cover;display:block}
  .ev3-dt picture{scale:1.1}
}
@media (min-width:1566px){.ev3-hero,.ev3-hero-f{height:2026px}}
@media (hover:hover) and (min-width:768px){
  .ev3-blk-p .ev3-pill-c{transition:color .12s var(--ev3-ease),background-color .25s var(--ev3-ease),box-shadow .25s var(--ev3-ease)}
  .ev3-blk-p .ev3-pill:hover .ev3-pill-c,.ev3-blk-p .ev3-pill:focus-visible .ev3-pill-c{background:var(--ev3-ink);color:var(--ev3-cream);box-shadow:inset 0 0 0 1px var(--ev3-cream)}
}

/* ---------------------------------------------------------------- the intro (first load in a tab), on the reference's
   timeline: the drawing and the counter, the loader fades (2.77 s), four photos open from the centre 0.2 s apart (from
   3.14 s, 1.55 s power2.out), the last grows to full bleed (4.69 s, 1.4 s power3.inOut, the window sized wrapper opening
   from the photo's box as the reference's step-4), then the header, statement and band fade in and the lines rise (5.79 s) */
html.ev3-js .ev3-li{transition:transform 1.1s var(--ev3-sine)}
html.ev3-intro .ev3-li{transform:translateY(100%)}
/* hidden (not only clipped) until they rise, so nothing reads them as white words over the cream loader */
html.ev3-intro:not(.ev3-done) .ev3-li{visibility:hidden}
html.ev3-intro.ev3-done .ev3-li{transform:none}
html.ev3-intro.ev3-done .ev3-l1 .ev3-li{transition-delay:.15s}
html.ev3-intro.ev3-done .ev3-l2 .ev3-li{transition-delay:.3s}
html.ev3-intro.ev3-done .ev3-l3 .ev3-li{transition-delay:.45s}
html.ev3-intro.ev3-done .ev3-l4 .ev3-li{transition-delay:.6s}
/* later loads of the home (no loader): the lines rise as the reference's do on arrival, by CSS alone */
html.ev3-pre .ev3-li{animation:ev3-rise 1.1s var(--ev3-sine) .15s both}
html.ev3-pre .ev3-l2 .ev3-li{animation-delay:.3s}
html.ev3-pre .ev3-l3 .ev3-li{animation-delay:.45s}
html.ev3-pre .ev3-l4 .ev3-li{animation-delay:.6s}
@keyframes ev3-rise{from{transform:translateY(100%)}}
html.ev3-intro .ev3-hd,html.ev3-intro .ev3-blk,html.ev3-intro .ev3-feat{opacity:0;transition:opacity .5s var(--ev3-ease)}
html.ev3-intro.ev3-done .ev3-hd,html.ev3-intro.ev3-done .ev3-blk,html.ev3-intro.ev3-done .ev3-feat{opacity:1}
html.ev3-intro .ev3-hero{z-index:1550;background:transparent}
html.ev3-intro.ev3-ground .ev3-hero{background:var(--ev3-ink)}
@media (max-width:767px){html.ev3-intro.ev3-ground .ev3-hero{background:var(--ev3-cream)}html.ev3-intro.ev3-ground .ev3-hero-f{background:var(--ev3-ink)}}
/* the photo shows undimmed while it grows; the resting dim arrives with the charcoal ground */
html.ev3-intro .ev3-hero-p img{opacity:1;transition:opacity .6s ease}
html.ev3-intro.ev3-ground .ev3-hero-p img{opacity:calc(1 - var(--ev3-rest) - (.75 - var(--ev3-rest)) * var(--hp,0))}
html.ev3-intro:not(.ev3-done) .ev3-list,html.ev3-intro:not(.ev3-done) .ev3-press{visibility:hidden}
/* the loader: cream, the drawing (a 30% copy under the charcoal one, drawn on stroke by stroke), the counter, the % sign */
.ev3-ld,.ev3-stack{display:none}
html.ev3-intro .ev3-ld{display:flex;position:fixed;inset:0;z-index:2000;background:var(--ev3-cream);align-items:center;justify-content:center;
  color:var(--ev3-ink);font:300 26px/1.15 var(--ev3-serif);transition:opacity .42s var(--ev3-ease)}
html.ev3-intro .ev3-ld.is-out{opacity:0;pointer-events:none}
.ev3-ld-d{position:relative;width:175px}
.ev3-ld-s{display:block;width:100%;height:auto}
/* the 30% copy is a background, not an image element: it loads only while the loader shows and as soon as the page is styled */
.ev3-ld-d::before{content:"";position:absolute;inset:0;background:url(/examples/elena-vale/assets/brand/beatrice-head.svg) 50% 0/100% auto no-repeat;opacity:.3}
/* each stroke is one unit long (pathLength 1): a dash of 1 after a gap of 2, offset just past 1, hides it whole */
.ev3-ld-s path{stroke-dasharray:1 2;stroke-dashoffset:1.001}
.ev3-ld.is-draw .ev3-ld-s path{animation:ev3-draw var(--d,.24s) var(--ev3-ease) var(--t,0s) forwards}
@keyframes ev3-draw{to{stroke-dashoffset:0}}
.ev3-ld-c{position:absolute;top:30px;left:50%;transform:translateX(-50%);height:100px;display:flex;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 40px,0 40px)}
/* the odometer: both columns 350 px up in 2 s power2.inOut, the second 50 ms before the first */
.ev3-ld-col{display:flex;flex-direction:column;transition:transform 2s var(--ev3-p2io)}
.ev3-ld-col span{flex:none;display:flex;align-items:center;justify-content:center;height:50px;transform:translateY(-5px)}
.ev3-ld-c1{transition-delay:.05s}
.ev3-ld.is-run .ev3-ld-col{transform:translateY(-350px)}
.ev3-ld-pc{position:absolute;bottom:30px;right:50%;transform:translateX(50%)}
/* the photo stack and the hero's starting box: --sw wide (50vw, 23.5vw from 768 px), placed as the reference places it */
html.ev3-intro{--sw:50vw}
html.ev3-intro .ev3-stack{display:block;position:fixed;left:calc(50% - var(--sw) / 2);top:calc(50% - var(--sw) * 264.5 / 406);
  width:var(--sw);aspect-ratio:406/580;z-index:1500;pointer-events:none}
.ev3-st{position:absolute;inset:0;clip-path:inset(50%)}
.ev3-st-p,.ev3-st-p img{display:block;width:100%;height:100%;object-fit:cover}
.ev3-st-p{transform:scale(.5)}
html.ev3-intro .ev3-stack.is-run .ev3-st{animation:ev3-open 1.55s var(--ev3-p3) forwards}
html.ev3-intro .ev3-stack.is-run .ev3-st-p{animation:ev3-grow 1.55s var(--ev3-p3) forwards}
.ev3-st-2,.ev3-st-2 .ev3-st-p{animation-delay:.2s!important}
.ev3-st-3,.ev3-st-3 .ev3-st-p{animation-delay:.4s!important}
html.ev3-intro.ev3-grow .ev3-stack{visibility:hidden}
@keyframes ev3-open{to{clip-path:inset(0)}}
@keyframes ev3-grow{to{transform:scale(1)}}
/* the hero photo is the fourth of the stack (0.6 s after the first), opens in the stack's box and grows to its resting
   frame. The frame itself never moves or resizes (nothing on the page shifts): site.js clips it to the growing box and
   scales the photo inside to fill that box, on the reference's box and eases. The hero sits above the stack (1550 over
   1500); inside it the photo keeps no z-index, so the headline rises over it as on the reference */
html.ev3-intro .ev3-hero-w{position:fixed;inset:0 0 auto;height:100vh}
html.ev3-intro.ev3-stage .ev3-hero-f{clip-path:inset(50%)}
html.ev3-intro.ev3-stage .ev3-hero-s{scale:.5}
html.ev3-intro .ev3-hero-s{transition:scale 1.55s var(--ev3-p3)}
html.ev3-intro.ev3-open .ev3-hero-s{scale:1}
@media (min-width:650px){html.ev3-intro .ev3-ld{font-size:30px}}
@media (min-width:768px){
  html.ev3-intro{--sw:23.5vw}
  .ev3-ld-d{width:277px}
  .ev3-ld-c{top:50%;left:40px;transform:translateY(-50%)}
  .ev3-ld-pc{bottom:50%;right:30px;transform:translateY(50%)}
  .ev3-st-p{scale:1.05}
  html.ev3-intro.ev3-open .ev3-hero-s{scale:1.05}
  html.ev3-intro.ev3-stage .ev3-hero-w{clip-path:inset(calc(50% - var(--sw) * 264.5 / 406) calc(50% - var(--sw) / 2)
    calc(50% - var(--sw) * 315.5 / 406) calc(50% - var(--sw) / 2));transition:clip-path 1.4s var(--ev3-p3io)}
  html.ev3-intro.ev3-stage.ev3-grow .ev3-hero-w{clip-path:inset(0)}
}
@media (max-width:767px){
  /* phones: the photo keeps its place in the page (the statement sits under it); the centred box can reach past the
     frame's foot on tall phones, so the frame lets the scaled photo paint there while its clip holds the box */
  html.ev3-intro .ev3-hero-w{position:relative;inset:auto;height:calc(100vw * 580 / 406)}
  html.ev3-intro .ev3-hero-f{overflow:visible}
}
@media (min-width:1024px){html.ev3-intro .ev3-ld{font-size:35px}}

/* ---------------------------------------------------------------- moving between pages: the page fades (0.4 s) and the
   header (0.5 s) before another of our pages loads, and the next page fades in, as the reference's route change */
html.ev3-leave main,html.ev3-leave .ev3-ft,html.ev3-leave .ev3-nav{opacity:0;transition:opacity .4s var(--ev3-ease)}
html.ev3-leave .ev3-hd{opacity:0;transition:opacity .5s var(--ev3-ease)}
html.ev3-enter main,html.ev3-enter .ev3-ft,html.ev3-enter .ev3-hd{animation:ev3-in .4s var(--ev3-ease) both}
@keyframes ev3-in{from{opacity:0}}

/* ---------------------------------------------------------------- the couples list */
.ev3-list{position:relative;z-index:1;background:var(--ev3-cream)}
.ev3-bl{display:flex;flex-direction:column;gap:62px;padding:25px 0 90px}
.ev3-b{position:relative}
.ev3-b-g{width:var(--ev3-cw);margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);column-gap:10px;row-gap:0}
.ev3-bp{position:relative;display:block;min-width:0}
.ev3-bp-a{display:flex;position:relative;text-decoration:none}
.ev3-bp-in{display:block;position:relative;width:100%;overflow:hidden;aspect-ratio:var(--ad);background:var(--ev3-cream)}
.ev3-bp-z{display:block;width:100%;height:100%;transition:transform .5s var(--ev3-sine)}
.ev3-bp-z picture,.ev3-bp-z img{display:block;width:100%;height:100%;object-fit:cover}
.ev3-flare{position:absolute;right:0;bottom:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ev3-flare::before{content:"";position:absolute;top:112.5%;left:112.5%;width:200vw;height:50%;
  background:linear-gradient(#fff0 0%,#ffffff26 35%,#ffffff40 50%,#ffffff26 65%,#fff0 100%);
  transform:translate(-50%,-50%) translate(42px,42px) rotate(-45deg)}
@media (hover:hover){
  .ev3-bp-a:hover .ev3-bp-z{transform:scale(1.04)}
  .ev3-bp-a:hover .ev3-flare{opacity:0;transform:translate(-100%,-100%) translate(-84px,-84px);
    transition:transform .6s cubic-bezier(.25,0,.25,1),opacity .4s cubic-bezier(.25,0,.25,1) .4s}
}
.ev3-b-n{text-align:center;padding-top:15px;font:300 26px/1.15 var(--ev3-serif)}
.ev3-nm{display:none}
@media (max-width:767px){
  .ev3-bp-2,.ev3-bp-3{display:none}
  .ev3-bp-1{grid-column:1/span 6}
  .ev3-bp-1 .ev3-bp-in{aspect-ratio:345/437}
}
@media (min-width:768px){
  .ev3-bl{gap:486px;padding:75vh 0}
  .ev3-b-g{grid-template-columns:repeat(12,1fr)}
  .ev3-bp-1{z-index:5}
  html.ev3-js .ev3-b-n{display:none}
  html.ev3-js .ev3-nm{display:flex;position:absolute;top:0;left:0;width:100%;height:100vh;align-items:center;justify-content:center;pointer-events:none}
  html.ev3-js .ev3-nm.is-fixed{position:fixed}
  html.ev3-js .ev3-nm.is-end{top:auto;bottom:0}
  .ev3-nm-c{width:var(--ev3-cw)}
  .ev3-nm-f{display:flex;justify-content:center;align-items:flex-start;width:100%}
  .ev3-nm-n{position:relative;flex-shrink:0;display:flex;justify-content:center;width:calc(var(--ap,0) * 100%);min-width:max-content;
    font:300 35px/1.15 var(--ev3-serif)}
  /* clipped for the letter roll; the clip reaches below the 1.15 line box so descenders stay whole */
  .ev3-nm-1,.ev3-nm-2{position:absolute;top:50%;display:block;clip-path:inset(.06em -.5em -.08em -.5em);white-space:nowrap}
  .ev3-nm-1{right:100%;transform:translateY(-50%) translateX(calc(100% * var(--ap,0)))}
  .ev3-nm-2{left:100%;transform:translateY(-50%) translateX(calc(-100% * var(--ap,0)))}
  .ev3-nm-w{display:flex;transition:transform 1s var(--ev3-ease)}
  .ev3-nm-w>span{display:block}
  .ev3-nm-b{flex-shrink:0;transition:opacity .7s cubic-bezier(.87,0,.13,1)}
  .ev3-nm.is-out .ev3-nm-w,.ev3-nm.is-out .ev3-nm-b{transform:translateY(100%);opacity:0}
  .ev3-nm.is-out .ev3-nm-b{transition:opacity .4s ease}
  .ev3-b-p0 .ev3-bp-1{grid-column:6/span 5}
  .ev3-b-p0 .ev3-bp-2{grid-column:3/span 4;margin-top:-28%;padding-right:6%}
  .ev3-b-p0 .ev3-bp-3{grid-column:8/span 2;align-self:end;margin-bottom:-50%}
  .ev3-b-p1 .ev3-bp-1{grid-column:4/span 6}
  .ev3-b-p1 .ev3-bp-2{grid-column:8/span 3;margin-top:-14%}
  .ev3-b-p1 .ev3-bp-3{grid-column:3/span 2;align-self:end;margin-top:-50%;margin-bottom:-50%}
  .ev3-b-p2 .ev3-bp-1{grid-column:3/span 5}
  .ev3-b-p2 .ev3-bp-2{grid-column:8/span 3;align-self:flex-start;margin-top:-57%}
  .ev3-b-p2 .ev3-bp-3{grid-column:7/span 3;align-self:end;margin-top:-15%;margin-bottom:-30%;padding-left:15%;padding-right:8%}
  .ev3-b-p3 .ev3-bp-2{grid-area:1/4/auto/span 2}
  .ev3-b-p3 .ev3-bp-1{grid-area:2/7/auto/span 4;margin-top:-11.3%;left:3%}
  .ev3-b-p3 .ev3-bp-3{grid-area:3/3/auto/span 4;align-self:end;margin-top:-48%;padding-right:3%}
  .ev3-b-p4 .ev3-bp-1{grid-column:3/span 5}
  .ev3-b-p4 .ev3-bp-2{grid-column:7/span 4;margin-top:-22%;padding-left:7%}
  .ev3-b-p4 .ev3-bp-3{grid-column:4/span 2;align-self:end;margin-top:-55%}
  .ev3-b-p5 .ev3-bp-1{grid-column:4/span 6}
  .ev3-b-p5 .ev3-bp-2{grid-column:3/span 3;margin-top:-16%}
  .ev3-b-p5 .ev3-bp-3{grid-column:9/span 2;align-self:end;margin-bottom:-45%}
  .ev3-b-p6 .ev3-bp-2{grid-area:1/3/auto/span 3}
  .ev3-b-p6 .ev3-bp-1{grid-area:2/6/auto/span 5;margin-top:-44%}
  .ev3-b-p6 .ev3-bp-3{z-index:1;grid-area:3/4/auto/span 3;margin-top:-16%;margin-bottom:-40%;padding-left:6%;padding-right:15%}
  .ev3-b-p7 .ev3-bp-2{grid-area:1/8/auto/span 2;margin-bottom:-20%}
  .ev3-b-p7 .ev3-bp-1{grid-area:2/3/auto/span 4;margin-bottom:-68%;padding-right:2.5%}
  .ev3-b-p7 .ev3-bp-3{grid-area:3/7/auto/span 4;align-self:end;margin-bottom:-15%;padding-left:2.5%}
  .ev3-b-p8 .ev3-bp-1{grid-column:6/span 5;margin-bottom:-16%}
  .ev3-b-p8 .ev3-bp-2{grid-column:3/span 4;padding-right:6.5%}
  .ev3-b-p8 .ev3-bp-3{grid-column:8/span 2;align-self:end;margin-bottom:-50%}
  .ev3-b-p9 .ev3-bp-1{grid-column:4/span 6;margin-bottom:-6%;padding-left:9%;padding-right:9%}
  .ev3-b-p9 .ev3-bp-2{grid-column:8/span 3}
  .ev3-b-p9 .ev3-bp-3{grid-column:3/span 2;align-self:end;margin-top:-50%}
  .ev3-b-p0m .ev3-bp-1{grid-column:3/span 5}
  .ev3-b-p0m .ev3-bp-2{grid-area:2/7/auto/span 4;margin-top:-28%;padding-left:6%}
  .ev3-b-p0m .ev3-bp-3{grid-column:4/span 2;align-self:end;margin-bottom:-50%}
  html:not(.ev3-js) .ev3-b-n{display:block;padding-top:25px}
}
.ev3-b.is-hidden{display:none}

/* the list's progress cursor (hover screens, 768 px and wider): a 108 px ring at 20% with a small triangle 25 px above and
   below its centre, as the reference's */
.ev3-cur{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .ev3-cur{display:block;position:fixed;top:0;left:0;z-index:1030;width:108px;height:108px;margin:-54px 0 0 -54px;pointer-events:none;
    opacity:0;transition:opacity .3s var(--ev3-ease);will-change:transform}
  .ev3-cur.is-on{opacity:1}
  .ev3-cur svg{display:block;width:100%;height:100%;opacity:.2;transform:rotate(-90deg);fill:none;stroke:var(--ev3-ink);stroke-width:1}
  .ev3-cur-p{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--cp,0))}
  .ev3-cur::before,.ev3-cur::after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border:4px solid transparent;
    border-top-width:0;border-bottom:6px solid var(--ev3-ink);transition:transform .4s var(--ev3-ease)}
  .ev3-cur::before{transform:translate(-50%,-50%) translateY(-25px)}
  .ev3-cur::after{transform:translate(-50%,-50%) translateY(25px) rotate(-180deg)}
}
@media (prefers-reduced-motion:reduce){.ev3-cur{display:none!important}}
.ev3-cur-q::before,.ev3-cur-q::after{display:none!important}

/* the fast navigator (press and hold on the list, hover screens from 768): a cream layer over the list (under the cursor)
   with every couple's main photo in one column, columns 6 and 7 of the grid, 100 px apart; the current couple's names at
   mid height close in from the container's edges to half its width (1.1 s expo in-out); header and filter bar step away */
.ev3-fn{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  html.ev3-js .ev3-fn{display:block;position:fixed;inset:0;z-index:900;background:var(--ev3-cream);opacity:0;visibility:hidden;
    pointer-events:none;cursor:grabbing;user-select:none;transition:opacity .6s cubic-bezier(.87,0,.13,1),visibility 0s .6s}
  html.ev3-js .ev3-fn.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s cubic-bezier(.87,0,.13,1)}
  html.ev3-js .ev3-fn.is-tr{pointer-events:none}
  .ev3-fn-c{position:absolute;top:0;left:50%;width:calc((var(--ev3-cw) - 110px) / 6 + 10px);transform:translate3d(-50%,0,0)}
  .ev3-fn-p{margin:0 0 100px;aspect-ratio:569/723;overflow:hidden;background:var(--ev3-beige);transition:opacity .4s var(--ev3-ease)}
  /* while a hold is young only the held couple's slot shows; the rest of the column comes in at 1.2 s */
  .ev3-fn.is-hold .ev3-fn-p:not(.is-cur){opacity:0}
  .ev3-fn-i{display:block;width:100%;height:100%;object-fit:cover}
  /* the names start at the container's edges, as the list's, and close in to half its width (65% at 1280 and under) over
     1.3 s expo in-out, moved rather than resized so nothing shifts */
  .ev3-fn-n{position:absolute;top:50%;left:50%;display:flex;justify-content:space-between;width:var(--ev3-cw);container-type:inline-size;
    transform:translate(-50%,-50%);font:300 35px/1.15 var(--ev3-serif);white-space:nowrap}
  .ev3-fn-1,.ev3-fn-2{display:block;transition:transform 1.3s cubic-bezier(.87,0,.13,1)}
  .ev3-fn.is-on .ev3-fn-1{transform:translateX(25cqw)}
  .ev3-fn.is-on .ev3-fn-2{transform:translateX(-25cqw)}
  @media (max-width:1280px){.ev3-fn.is-on .ev3-fn-1{transform:translateX(17.5cqw)}.ev3-fn.is-on .ev3-fn-2{transform:translateX(-17.5cqw)}}
  html.ev3-fn-open .ev3-hd{opacity:0;transition:opacity .5s var(--ev3-ease)}
  html.ev3-fn-open .ev3-fb{transform:translate(-50%,calc(100% + 40px))}
  .ev3-fn.is-tr~.ev3-cur{opacity:0}
}

/* the filter bar and panel */
.ev3-fb{position:fixed;left:50%;bottom:30px;z-index:950;transform:translate(-50%,calc(100% + 40px));transition:transform .7s var(--ev3-expo)}
html:not(.ev3-js) .ev3-fb{display:none}
.ev3-fb.is-on,.ev3-fb.is-open{transform:translate(-50%,0)}
/* the label centred in the bar and the chevron held 15 px from its right edge, as the reference; the side padding keeps
   a long place name clear of the chevron (it wraps to two lines, the count after its last word); under 360 px the left
   padding narrows so the default label stays on one line, a little left of centre */
.ev3-fb-b{position:relative;display:flex;align-items:center;justify-content:center;width:350px;max-width:calc(100vw - 50px);height:65px;
  padding:0 57px;background:#fff;color:var(--ev3-ink);border-radius:5px;font:400 16px/1.05 var(--ev3-sans);cursor:pointer;
  transition:background-color 1s var(--ev3-expo),color 1s var(--ev3-expo)}
@media (max-width:359px){.ev3-fb-b{padding-left:20px}}
.ev3-fb-t{display:block;text-align:center}
.ev3-fb-t sup{margin-left:.4ch;font-size:10px;line-height:1;vertical-align:8px}
.ev3-fb-c{position:absolute;right:15px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ev3-ink);color:#fff;
  transition:transform .45s var(--ev3-ease),background-color 1s var(--ev3-expo),color 1s var(--ev3-expo)}
.ev3-fb-c svg{width:12px;height:8px;transform:rotate(180deg)}
.ev3-fb.is-open .ev3-fb-b{background:var(--ev3-ink);color:#fff}
.ev3-fb.is-open .ev3-fb-c{background:#fff;color:var(--ev3-ink);transform:rotate(180deg)}
.ev3-fl{position:fixed;inset:0;z-index:940}
.ev3-fl-bd{position:absolute;inset:0;background:var(--ev3-beige);opacity:0;transition:opacity 1s var(--ev3-expo)}
.ev3-fl.is-open .ev3-fl-bd{opacity:.75}
.ev3-fl-p{position:absolute;left:50%;bottom:0;width:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;background:#fff;
  text-align:center;transform:translate(-50%,100%);transition:transform 1s var(--ev3-expo)}
.ev3-fl.is-open .ev3-fl-p{transform:translate(-50%,0)}
/* the kinds and the places share one cell, so the panel keeps the taller one's height when they swap */
.ev3-fl-v{display:grid}
.ev3-fl-m,.ev3-fl-s{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px 0 122px;
  transition:opacity .6s var(--ev3-ease) .3s,visibility 0s}
.ev3-fl.is-sub .ev3-fl-m,.ev3-fl:not(.is-sub) .ev3-fl-s{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--ev3-ease),visibility 0s .6s}
.ev3-fl-h{font:400 16px/1.1 var(--ev3-sans);padding:0 0 10px}
.ev3-fl-st{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px 20px;font:300 26px/1.15 var(--ev3-serif);cursor:pointer}
.ev3-fl-st svg{width:12px;height:8px;transform:rotate(180deg)}
.ev3-fl-lc{position:relative;width:100%}
.ev3-fl-l{display:flex;flex-direction:column;align-items:center}
.ev3-fl-l button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 20px;font:300 26px/1.15 var(--ev3-serif);cursor:pointer}
.ev3-fl-l button span{position:relative;display:block}
.ev3-fl-l button span::before{content:"";position:absolute;left:0;bottom:2px;width:100%;height:2px;background:currentColor;opacity:0;
  transition:opacity .3s var(--ev3-ease)}
.ev3-fl-l button.is-on span::before,.ev3-fl-l button:focus-visible span::before{opacity:1}
.ev3-fl-more svg{width:12px;height:8px;position:relative;top:3px}
@media (min-width:650px){.ev3-fl-l button,.ev3-fl-st{font-size:30px}}
@media (min-width:768px){
  .ev3-fb-b{font-size:18px}
  .ev3-fl-m,.ev3-fl-s{padding:40px 0 140px}
  .ev3-fl-h{font-size:18px;padding:30px 0 15px}
  .ev3-fl-st{padding-bottom:30px}
}
@media (min-width:1024px){.ev3-fl-l button,.ev3-fl-st{font-size:35px}}
@media (min-width:1281px){.ev3-fl-p{width:80.35%}}

/* ---------------------------------------------------------------- places band */
.ev3-press{position:relative;z-index:1;background:#fff;padding:71px 0;overflow:clip}
.ev3-press-tr{display:flex;width:max-content;animation:ev3-mq 50s linear infinite}
.ev3-press-l{display:flex;align-items:center;gap:20px;padding-left:20px;min-height:130px;font:300 26px/1.15 var(--ev3-serif);white-space:nowrap}
.ev3-press-l li{display:flex;align-items:center;gap:20px}
.ev3-press-l li::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}
@keyframes ev3-mq{to{transform:translateX(-50%)}}
@media (min-width:768px){
  .ev3-press{padding:125px 0}
  .ev3-press-tr{animation-duration:100s}
  .ev3-press-l{gap:50px;padding-left:50px;min-height:161px}
  .ev3-press-l li{gap:50px}
}
@media (min-width:650px){.ev3-press-l{font-size:30px}}
@media (min-width:1024px){.ev3-press-l{font-size:35px}}

/* ---------------------------------------------------------------- footer (revealed from under the page) */
.ev3-ft{position:relative;z-index:0;height:1326px;margin-top:-663px;color:var(--ev3-ink);
  background:linear-gradient(#dfdcd6bf,#dfdcd6bf),var(--ev3-cream)}
.ev3-ft-in{position:absolute;left:0;bottom:0;width:100%;height:663px;padding:30px 0;display:flex;flex-direction:column}
.ev3-ft-g{width:var(--ev3-cw);margin:0 auto;display:flex;flex-direction:column;flex:1}
.ev3-ft-n{order:1;height:145px}
.ev3-ft-n ul{display:flex;flex-direction:column}
.ev3-ft-n a{display:inline-block;padding:8px 0;min-height:24px;text-decoration:none;font:400 16px/1.1 var(--ev3-sans);position:relative}
.ev3-ft-n li:first-child{margin-top:-8px}
.ev3-ft-n a[aria-current]::after{content:"";position:absolute;left:0;bottom:6px;width:100%;height:1px;background:currentColor}
.ev3-ft-st{order:2;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ev3-ft-t{font:300 26px/1.15 var(--ev3-serif);max-width:420px}
.ev3-ft-mark{order:3;display:block;width:96px;height:auto;margin:auto auto 30px;color:var(--ev3-ink)}
.ev3-ft-legal{width:var(--ev3-cw);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 24px;padding-top:10px;
  border-top:1px solid #23232333;color:#232323ad;font:400 14px/1.3 var(--ev3-sans)}
.ev3-credit{display:flex;flex-wrap:wrap;gap:4px 18px}
.ev3-credit a{text-decoration:none;display:inline-block;padding:10px 0}
.ev3-credit a:hover{color:var(--ev3-ink)}
@media (min-width:650px){.ev3-ft-t{font-size:30px}}
@media (min-width:768px){
  .ev3-ft{height:1088px;margin-top:-544px}
  .ev3-ft-in{height:544px;padding:55px 0;justify-content:space-between}
  html.ev3-js .ev3-ft-in{top:calc(100% - 544px);bottom:auto;transform:translateY(calc(-50% * (1 - var(--fp,1))))}
  .ev3-ft-g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:10px;flex:0 0 auto;position:relative}
  .ev3-ft-st{grid-column:1/span 3;grid-row:1;gap:35px}
  .ev3-ft-mark{position:absolute;top:0;left:50%;width:125px;margin:0;transform:translateX(-50%)}
  .ev3-ft-n{grid-column:10/span 3;grid-row:1;height:auto}
  .ev3-ft-n li:first-child{margin-top:-12px}
  .ev3-ft-n a{padding:12px 0}
  .ev3-ft-legal{border-top:0;padding-top:0;font-size:16px}
}
@media (min-width:768px) and (max-height:544px){html.ev3-js .ev3-ft-in{top:0}}
@media (min-width:1024px){.ev3-ft-t{font-size:35px}}

/* ---------------------------------------------------------------- couple pages */
/* the hero box on cream: the 345:437 box runs 1.56vw past the photo's 1728:1557 frame before the details panel starts, so
   that strip is the page's own cream. The photo rests at the home hero's 0.6 over #232323 (white names reach 3:1 on every
   couple's photo, G12) and dims to 0.25 on scroll */
.ev3-ph{position:relative;z-index:1;aspect-ratio:345/437;background:var(--ev3-cream);overflow:hidden}
.ev3-ph-f{position:absolute;inset:0;background:var(--ev3-ink);overflow:hidden}
.ev3-ph-s,.ev3-ph-p,.ev3-ph-p img{display:block;width:100%;height:100%}
.ev3-ph-p img{object-fit:cover;object-position:50% 50%;opacity:calc(1 - var(--ev3-rest) - (.75 - var(--ev3-rest)) * var(--pp,0));
  transform:translateY(calc(40% * var(--pp,0)))}
.ev3-ct{position:absolute;top:119px;left:0;right:0;z-index:3;text-align:center;color:#fff;font:300 clamp(55px,15vw,235px)/1.177 var(--ev3-xl);margin:0}
.ev3-ct-l{display:block;clip-path:inset(.045em -.5em -.06em -.5em)}
.ev3-ct-i{display:block;transition:transform 1.2s cubic-bezier(.215,.61,.355,1)}
.ev3-ct-1{transform:translateY(calc(-30vw * var(--pp,0)))}
.ev3-ct-a{transform:translateY(calc(-15vw * var(--pp,0)))}
/* the couple arrows, as the reference's: white 45 px circles with an ink chevron, fixed at mid height 15 px from the edges
   (30 px from 768 px); on hover the circle shrinks to 0.8 and fills charcoal, and on hover screens a white 372 x 183 card
   opens from its middle with the neighbour couple's photo and names (1 s cubic-bezier(.075,.82,.165,1); 0.5 s back) */
.ev3-pa-w{position:fixed;top:50%;left:15px;right:15px;z-index:99;display:flex;justify-content:space-between;pointer-events:none;
  transition:opacity .3s var(--ev3-ease),visibility .3s var(--ev3-ease)}
html:not(.ev3-js) .ev3-pa-w{position:absolute;top:50vh}
.ev3-pa-w.is-off{opacity:0;visibility:hidden}
.ev3-pa{position:relative;display:inline-flex;align-items:center;transform:translateY(-50%);pointer-events:auto;text-decoration:none;color:var(--ev3-ink)}
.ev3-pa-c{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%;
  background:#fff;color:var(--ev3-ink);transition:transform .6s var(--ev3-ease),background-color .6s var(--ev3-ease),color .6s var(--ev3-ease)}
.ev3-pa-c svg{width:8px;height:12px;margin-left:1px}
.ev3-pa-prev .ev3-pa-c svg{transform:rotate(180deg);margin:0 1px 0 0}
.ev3-pa:hover .ev3-pa-c,.ev3-pa:focus-visible .ev3-pa-c{transform:scale(.8);background:var(--ev3-ink);color:#fff}
.ev3-pa:focus-visible{outline:0}
.ev3-pa:focus-visible .ev3-pa-c{outline:2px solid var(--ev3-ink);outline-offset:3px}
.ev3-pa-card{display:none}
@media (min-width:768px){.ev3-pa-w{left:30px;right:30px}}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .ev3-pa-card{display:flex;position:absolute;top:50%;z-index:1;width:372px;max-height:0;overflow:hidden;background:#fff;
    transform:translateY(-50%);transition:max-height .5s cubic-bezier(.87,0,.13,1)}
  .ev3-pa-next .ev3-pa-card{right:-29px;padding-right:60px}
  .ev3-pa-prev .ev3-pa-card{left:-29px;padding-left:60px}
  .ev3-pa-ci{display:flex;flex-shrink:0;align-items:center;justify-content:center;gap:38px;width:100%;height:183px;
    transform:translateY(16px);transition:transform .6s cubic-bezier(.87,0,.13,1)}
  .ev3-pa-prev .ev3-pa-ci{flex-direction:row-reverse}
  .ev3-pa-th{display:block;width:80px;height:80px;flex-shrink:0;object-fit:cover;background:var(--ev3-beige)}
  .ev3-pa-n{width:113px;font:300 22px/1.15 var(--ev3-serif);color:var(--ev3-ink)}
  .ev3-pa:hover .ev3-pa-card,.ev3-pa:focus-visible .ev3-pa-card{max-height:183px;transition:max-height 1s cubic-bezier(.075,.82,.165,1)}
  .ev3-pa:hover .ev3-pa-ci,.ev3-pa:focus-visible .ev3-pa-ci{transform:none;transition:transform 1s cubic-bezier(.075,.82,.165,1)}
}
/* the names rise as the page arrives (1.2 s power3.out, 0.2, 0.35 and 0.5 s), and the photo fades in (1 s) */
html.ev3-js .ev3-ct-i{animation:ev3-rise 1.2s var(--ev3-p3) .2s both}
html.ev3-js .ev3-ct-a .ev3-ct-i{animation-delay:.35s}
html.ev3-js .ev3-ct-3 .ev3-ct-i{animation-delay:.5s}
html.ev3-js .ev3-ph-s{animation:ev3-fadein 1s ease both}
@keyframes ev3-fadein{from{opacity:0}}
.ev3-pd{position:relative;z-index:2;background:var(--ev3-cream);padding:60px 0 90px}
.ev3-pd-in{width:var(--ev3-cw);margin:0 auto;text-align:center}
.ev3-pd-t{font:300 26px/1.15 var(--ev3-serif);max-width:690px;margin:0 auto}
.ev3-mt{display:flex;flex-direction:column;gap:22px;margin:60px auto 0}
/* small labels and the legal rows: the reference's ink at 0.5 reads 3.1:1 on cream; 0.68 reaches 5.2:1 (4.8 on the footer) */
.ev3-mt dt{font:400 clamp(14px,1.2vw,16px)/1.2 var(--ev3-sans);opacity:.68;margin-bottom:6px}
.ev3-mt dd{font:400 18px/1.25 var(--ev3-sans)}
.ev3-nt{margin-top:50px;display:flex;flex-direction:column;align-items:center}
.ev3-nt-b{display:inline-flex;align-items:center;gap:15px;min-height:44px;font:400 16px/1 var(--ev3-sans);cursor:pointer}
.ev3-nt-i{display:flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:50%;background:var(--ev3-ink);color:#fff;
  transition:transform .3s var(--ev3-ease)}
.ev3-nt-i svg{width:12px;height:12px}
.ev3-nt-b[aria-expanded=true] .ev3-nt-i{transform:rotate(45deg)}
.ev3-nt-p{margin-top:20px;background:#fff;padding:24px 28px;max-width:560px;font:400 18px/1.35 var(--ev3-sans)}
html.ev3-js .ev3-nt-p{display:none}
html.ev3-js .ev3-nt-p.is-open{display:block;animation:ev3-fade .3s var(--ev3-ease)}
@keyframes ev3-fade{from{opacity:0}}
@media (min-width:768px){
  .ev3-ph-f{bottom:auto;aspect-ratio:1728/1557}
  .ev3-ph-p img{object-position:50% 0}
  .ev3-ct{top:194px;width:var(--ev3-cw);left:50%;right:auto;transform:translateX(-50%);font-size:min(15vw,235px,calc((100svh - 218px) / 2.354))}
  /* two lines on windows too short for three (the fold rule): the ampersand joins line 1, "Ruby &" over "Tom" */
  .ev3-ct-1,.ev3-ct-a{display:inline-block;vertical-align:top}
  .ev3-ct-a{transform:translateY(calc(-30vw * var(--pp,0)))}
  .ev3-pd{margin-top:-35vw;padding:100px 0 168px}
  .ev3-pd-t{width:50%;max-width:none;font-size:30px}
  .ev3-mt{width:70%;flex-direction:row;justify-content:space-evenly;margin-top:150px}
  .ev3-mt-i{width:265px}
}
@media (min-width:1000px) and (min-height:748px){
  .ev3-ct{font-size:min(15vw,235px,calc((100svh - 218px) / 3.531))}
  .ev3-ct-1,.ev3-ct-a{display:block}
  .ev3-ct-a{transform:translateY(calc(-15vw * var(--pp,0)))}
}
@media (min-width:1024px){.ev3-pd-t{font-size:35px}}

/* gallery blocks: each photo keeps the art director's box (aspect --ad, and --am on phones) */
.ev3-gal{position:relative;z-index:2;background:var(--ev3-cream);padding-bottom:60px}
.ev3-gb{position:relative;margin:15px 0}
.ev3-gb-in{width:var(--ev3-cw);margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);column-gap:10px;row-gap:10px;align-items:start}
.ev3-gp{position:relative;margin:0;min-width:0}
.ev3-gp-m{position:relative;aspect-ratio:var(--am,var(--ad))}
.ev3-gp picture,.ev3-gp img{display:block;width:100%;height:100%;object-fit:cover}
.ev3-gb-medium .ev3-gp{grid-column:2/span 4}
.ev3-gb-large .ev3-gp,.ev3-gb-l-l .ev3-gp,.ev3-gb-l-s2 .ev3-gp-1,.ev3-gb-l-s3 .ev3-gp-1,.ev3-gb-s-l2 .ev3-gp-2,.ev3-gb-s-l3 .ev3-gp-3{grid-column:1/span 6}
.ev3-gb-fullbleed .ev3-gb-in,.ev3-gb-superposed .ev3-gb-in{width:100%;display:block}
.ev3-gb-fullbleed{margin:0}
.ev3-gb-l-s2 .ev3-gp-2{grid-column:4/span 3}
.ev3-gb-l-s3 .ev3-gp-2{grid-column:4/span 3}
.ev3-gb-l-s3 .ev3-gp-3{grid-column:1/span 3;grid-row:2}
.ev3-gb-s-l2 .ev3-gp-1{grid-column:1/span 3}
.ev3-gb-s2 .ev3-gp,.ev3-gb-s3 .ev3-gp,.ev3-gb-s4 .ev3-gp{grid-column:span 3}
[class*="ev3-gb-trio"] .ev3-gp-1{grid-column:1/span 6}
[class*="ev3-gb-trio"] .ev3-gp-2{grid-column:1/span 4;margin-top:-20px;z-index:2}
[class*="ev3-gb-trio"] .ev3-gp-3{grid-column:5/span 2;align-self:end}
.ev3-gb-superposed .ev3-gb-in{position:relative;aspect-ratio:375/485}
.ev3-gb-superposed .ev3-gp-1{position:absolute;inset:0}
.ev3-gb-superposed .ev3-gp-1 .ev3-gp-m{height:100%;aspect-ratio:auto}
.ev3-gb-superposed .ev3-gp-2{position:absolute;left:50%;top:50%;width:calc(50% - 20px);transform:translate(-50%,-50%)}
.ev3-gp .ev3-cat{position:absolute;right:7%;top:-49.5px;width:40px;height:auto;object-fit:contain;z-index:3;pointer-events:none}
/* phones stack the block's photos 10 px apart, so the photo the cat sits on keeps room above it for the cat's head
   (49.5 px above the edge) and never covers the photo before it */
@media (max-width:767px){.ev3-gp-cat{margin-top:46px}}
@media (min-width:768px){
  .ev3-gal{padding-bottom:100px}
  .ev3-gb{margin:100px 0}
  .ev3-gb-in{grid-template-columns:repeat(12,1fr);row-gap:0;align-items:end}
  .ev3-gp-m{aspect-ratio:var(--ad)}
  .ev3-gb-medium .ev3-gb-in,.ev3-gb-large .ev3-gb-in{display:flex;justify-content:center}
  .ev3-gb-medium .ev3-gp{width:49.93%}
  .ev3-gb-large .ev3-gp{width:74.8%}
  .ev3-gb-fullbleed{margin:100px 0}
  .ev3-gb-l-s2 .ev3-gp-1,.ev3-gb-l-s3 .ev3-gp-1,.ev3-gb-l-l .ev3-gp-1{grid-column:1/span 6}
  .ev3-gb-l-s2 .ev3-gp-2{grid-column:10/span 3}
  .ev3-gb-l-s3 .ev3-gp-2{grid-column:7/span 3;grid-row:auto}
  .ev3-gb-l-s3 .ev3-gp-3{grid-column:10/span 3;grid-row:auto}
  .ev3-gb-s-l2 .ev3-gp-1{grid-column:1/span 3}
  .ev3-gb-s-l2 .ev3-gp-2{grid-column:7/span 6}
  .ev3-gb-l-l .ev3-gp-2{grid-column:7/span 6}
  .ev3-gb-s2 .ev3-gp-1,.ev3-gb-s3 .ev3-gp-1,.ev3-gb-s4 .ev3-gp-1{grid-area:1/10/auto/span 3}
  .ev3-gb-s2 .ev3-gp-2,.ev3-gb-s3 .ev3-gp-2,.ev3-gb-s4 .ev3-gp-2{grid-area:1/7/auto/span 3}
  .ev3-gb-s3 .ev3-gp-3,.ev3-gb-s4 .ev3-gp-3{grid-area:1/4/auto/span 3}
  .ev3-gb-s4 .ev3-gp-4{grid-area:1/1/auto/span 3}
  [class*="ev3-gb-trio"] .ev3-gb-in{align-items:start}
  .ev3-gb-trio1 .ev3-gp-1{z-index:2;grid-column:6/span 6}
  .ev3-gb-trio1 .ev3-gp-2{grid-column:2/span 5;margin-top:-100px;z-index:1}
  .ev3-gb-trio1 .ev3-gp-3{grid-column:9/span 2;align-self:baseline;margin-top:186px}
  .ev3-gb-trio2 .ev3-gp-1{z-index:2;grid-column:4/span 6}
  .ev3-gb-trio2 .ev3-gp-2{grid-column:8/span 5;margin-top:-15%;z-index:3}
  .ev3-gb-trio2 .ev3-gp-3{grid-column:2/span 2;margin-top:-50%;align-self:start}
  .ev3-gb-trio3 .ev3-gp-1{grid-area:2/2/auto/span 6;margin-top:-45%}
  .ev3-gb-trio3 .ev3-gp-2{grid-area:1/8/auto/span 5;margin-top:0}
  .ev3-gb-trio3 .ev3-gp-3{z-index:2;grid-area:3/8/auto/span 2;margin-top:-33%;align-self:start}
  .ev3-gb-trio4 .ev3-gp-3{grid-area:1/1/auto/span 2;align-self:start}
  .ev3-gb-trio4 .ev3-gp-1{grid-area:2/7/auto/span 6;margin-top:-10%;margin-bottom:60%}
  .ev3-gb-trio4 .ev3-gp-2{grid-area:2/2/auto/span 5;align-self:end;margin-top:0}
  .ev3-gb-superposed .ev3-gb-in{aspect-ratio:1729/1139}
  .ev3-gb-superposed .ev3-gp-2{width:23.5%}
  .ev3-gp .ev3-cat{width:56px;top:-69.4px}
  /* the cat's head stands 69.4 px above its photo; the block above drifts down (speed -0.025) while this photo drifts up
     (-0.05), closing the 100 px gap by up to about 0.05 of the window's height, so the photo keeps that room above it */
  .ev3-gp-cat{margin-top:max(0px,calc(5vh - 10px))}
}

/* the end band. Without JavaScript or with reduced motion: "Next", the next couple's names as a link and our credit row.
   Otherwise the reference's: 250svh pulled up 50svh under the gallery's end; a fixed layer at mid height holds the names,
   parting from the ampersand (width 2ch + p x (100% - 2ch)) under the progress ring while the next couple's photo rises
   in a sticky window-high frame; at the end the photo opens to the full window and their page loads */
.ev3-eb{position:relative;z-index:1}
.ev3-eb-l{width:var(--ev3-cw);margin:0 auto;padding:120px 0 70px;text-align:center}
.ev3-eb-a{display:inline-flex;flex-direction:column;align-items:center;gap:18px;min-height:44px;text-decoration:none;color:var(--ev3-ink)}
.ev3-eb-k{font:400 16px/1 var(--ev3-sans);opacity:.68}
.ev3-eb-w{display:block;font:300 26px/1.15 var(--ev3-serif)}
.ev3-eb-n{display:flex;justify-content:center}
.ev3-eb-1,.ev3-eb-2,.ev3-eb-1>span,.ev3-eb-2>span{display:block}
.ev3-eb-a:hover .ev3-eb-w{opacity:.7}
.ev3-eb-cur,.ev3-eb-im{display:none}
.ev3-eb-c{width:var(--ev3-cw);margin:0 auto;padding:0 0 24px;color:#232323ad;font:400 14px/1.3 var(--ev3-sans)}
@media (min-width:650px){.ev3-eb-w{font-size:30px}}
@media (min-width:1024px){.ev3-eb-w{font-size:35px}}
@media (prefers-reduced-motion:no-preference){
  html.ev3-js .ev3-gal{background:none}
  html.ev3-js .ev3-eb{height:250svh;margin-top:-50svh}
  html.ev3-js .ev3-eb-l{position:fixed;left:0;top:50%;width:100%;height:50svh;margin:0;padding:0;transform:translateY(-50%);
    display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ev3-ease),visibility 0s .3s}
  html.ev3-js .ev3-eb.is-on .ev3-eb-l{opacity:1;visibility:visible;transition:opacity .3s var(--ev3-ease)}
  html.ev3-js .ev3-eb-a{display:block;position:relative;z-index:2;width:var(--ev3-cw);pointer-events:auto}
  html.ev3-js .ev3-eb-k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html.ev3-js .ev3-eb-w{display:flex;justify-content:center;width:100%;container-type:inline-size}
  /* the names part as the reference's box widening from 2ch to the container (width 2ch + p x (100% - 2ch)), drawn by
     moving each name rather than resizing the box, so nothing shifts: from the ampersand's sides to the container's edges */
  html.ev3-js .ev3-eb-n{position:relative;flex-shrink:0;display:flex;width:100%}
  html.ev3-js .ev3-eb-b{flex-shrink:0;width:100%;text-align:center}
  /* clipped for the drop at the end; the clip reaches below the line box so descenders stay whole */
  html.ev3-js .ev3-eb-1,html.ev3-js .ev3-eb-2{position:absolute;top:50%;white-space:nowrap;clip-path:inset(.06em -.5em -.08em -.5em)}
  html.ev3-js .ev3-eb-1{right:calc(50% + 1ch);transform:translateY(-50%) translateX(calc(var(--ep,0) * (100% - 50cqw + 1ch)))}
  html.ev3-js .ev3-eb-2{left:calc(50% + 1ch);transform:translateY(-50%) translateX(calc(var(--ep,0) * (50cqw - 1ch - 100%)))}
  html.ev3-js .ev3-eb-1>span,html.ev3-js .ev3-eb-2>span{transition:transform 1s var(--ev3-ease)}
  html.ev3-js .ev3-eb.is-out .ev3-eb-1>span,html.ev3-js .ev3-eb.is-out .ev3-eb-2>span{transform:translateY(100%)}
  html.ev3-js .ev3-eb.is-out .ev3-eb-b,html.ev3-js .ev3-eb.is-out .ev3-eb-cur{opacity:0;transition:opacity .3s var(--ev3-ease)}
  html.ev3-js .ev3-eb-cur{display:block;position:absolute;left:50%;top:50%;width:108px;height:108px;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
  html.ev3-js .ev3-eb-cur svg{display:block;width:100%;height:100%;opacity:.2;transform:rotate(-90deg);fill:none;stroke:var(--ev3-ink);stroke-width:1}
  html.ev3-js .ev3-eb-cur .ev3-cur-p{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--ep,0))}
  /* the photo: 406 px wide at most, smaller on short windows so it never reaches the credit row or the names before the end */
  html.ev3-js .ev3-eb-im{display:flex;position:sticky;top:0;height:100svh;align-items:center;justify-content:center;pointer-events:none;
    transform:translateY(calc((1 - var(--ei,0)) * 100%))}
  html.ev3-js .ev3-eb-ph{width:min(100vw,406px,calc((100svh - 260px) * 345 / 437));aspect-ratio:345/437;background:var(--ev3-beige)}
  html.ev3-js .ev3-eb-ph img{display:block;width:100%;height:100%;object-fit:cover}
  /* our credit row sits under the header while the band is in view (the photo never rises above it) */
  html.ev3-js .ev3-eb-c{position:fixed;left:50%;top:63px;z-index:1;width:var(--ev3-cw);padding:0;transform:translateX(-50%);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ev3-ease),visibility 0s .3s}
  html.ev3-js .ev3-eb.is-on.is-clear .ev3-eb-c{opacity:1;visibility:visible;transition:opacity .3s var(--ev3-ease)}
  html.ev3-js .ev3-eb.is-out .ev3-eb-c{opacity:0}
}
@media (prefers-reduced-motion:no-preference) and (min-width:768px){html.ev3-js .ev3-eb-c{top:107px}}
/* a photo opening into the next couple's hero frame as their page loads; the hero's own file fades in over it and it dims
   to the hero's rest. The layer holds still and is clipped to the growing box, the photos inside moved and scaled
   (site.js), so nothing on the page shifts */
.ev3-go{position:fixed;z-index:1200;overflow:hidden;pointer-events:none;background:var(--ev3-ink);clip-path:inset(50%)}
.ev3-go img{display:block;position:absolute;left:0;top:0;max-width:none;object-fit:cover;transform-origin:0 0}
.ev3-go-l{background:var(--ev3-cream)}
.ev3-go .ev3-go-h{opacity:0}
.ev3-go-d{position:absolute;inset:0;background:var(--ev3-ink);opacity:0}
/* after a photo opened into it, the couple's page shows at once (no fade), its names still rising */
html.ev3-hero-in .ev3-ph-s{animation:none}

/* ---------------------------------------------------------------- about */
.ev3-ahs{padding:95px 15px 60px;text-align:center}
.ev3-ah{font:300 clamp(55px,15vw,235px)/1.177 var(--ev3-xl);color:var(--ev3-ink)}
/* each line clips its words for the rise and the letter roll; line 1 rises 1.1 s sine from 0.15 s and lifts -8vw as you
   leave; the cycling word's letters rise as the reference's letter switcher mounts them (0.75 s power1.out, measured
   from 0.4 s: half way at about 0.64 s, 90% by 0.93 s) */
.ev3-ah-l{display:block;clip-path:inset(.045em -.5em -.06em -.5em)}
.ev3-ah-1{transform:translateY(calc(-8vw * var(--ahp,0)))}
.ev3-ah-2{margin-top:-2.71vw}
.ev3-ah-i{display:flex;justify-content:center}
html.ev3-js .ev3-ah-i{animation:ev3-rise 1.1s var(--ev3-sine) .15s both}
html.ev3-js .ev3-ah-2 .ev3-ah-i{animation:ev3-rise .75s cubic-bezier(.25,.46,.45,.94) .4s both}
.ev3-sec{position:relative;min-height:100svh}
/* the reference's collage (variant 2, both collages): a full width box of its own aspect that clips what overflows, with
   the container's grid at its top (6 columns on phones, 12 from 768, 10 px gaps, 1 px rows); each photo sits in its grid
   area with margins as shares of that area's width, as the reference's rules; inside its frame the photo is drawn 103 to
   118% tall, centred, and drifts at the reference's speed */
.ev3-coll{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:375/653;margin:100px 0}
.ev3-coll-1{margin:0}
.ev3-coll-i{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1px;gap:10px;align-items:start;
  width:var(--ev3-cw);margin:0 auto}
.ev3-co{position:relative;margin:0}
.ev3-co-f{position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center}
/* the reference's doubled photos: a lighten copy over the photo, so where another photo overlaps it the lighter shows */
.ev3-co-lt{position:absolute;inset:0;mix-blend-mode:lighten;pointer-events:none}
.ev3-co-m{flex:none;width:100%;height:115%}
.ev3-co-m picture,.ev3-co-m img{display:block;width:100%;height:100%;object-fit:cover}
.ev3-co-a{grid-area:1/1/auto/span 2;margin:55% 16% 0 -100%;aspect-ratio:220/330}
.ev3-co-a .ev3-co-m{height:103%}
.ev3-co-a>.ev3-co-f:first-child{z-index:1}
.ev3-co-a>.ev3-co-lt{z-index:3}
.ev3-co-b{grid-area:2/4/auto/span 2;margin:-10% -110% 0 0;aspect-ratio:460/625}
.ev3-co-c{z-index:7;grid-area:3/2/auto/span 4;margin:26% -25% 0 0;aspect-ratio:366/488}
.ev3-co-c .ev3-co-m{height:118%}
.ev3-co-d{z-index:2;grid-area:4/1/auto/span 5;margin:40% 25% 0 -25%;aspect-ratio:345/435}
.ev3-co-d .ev3-co-m{height:109%}
.ev3-co-e{grid-area:5/4/auto/span 2;margin:240% -100% 0 0;aspect-ratio:280/346}
.ev3-co-e>.ev3-co-lt{z-index:7}
/* the statement blocks (the reference's full width text): the first puts its rule between the label and the statement
   (border-between), the legal bits put it on top (border-top); labels 26 / 30 / 35 px, statements 26 / 38 / 55 px */
.ev3-fw{width:var(--ev3-cw);margin:0 auto;padding:100px 0;text-align:center;border-top:1px solid #23232340}
.ev3-lab{font:400 26px/1.15 var(--ev3-serif)}
.ev3-lab>span{display:block;max-width:400px;margin:0 auto;overflow:hidden}
.ev3-sst{font:300 26px/1.1 var(--ev3-serif)}
.ev3-lab+.ev3-sst{margin-top:100px}
.ev3-sst:not(:last-child){margin-bottom:25px}
.ev3-fw-b{border-top:0;margin-top:100px;padding-top:0}
.ev3-fw-b .ev3-lab{padding-bottom:100px;border-bottom:1px solid #23232340}
.ev3-fw-b .ev3-lab+.ev3-sst{margin-top:25px}
@media (min-width:650px){.ev3-lab{font-size:30px}.ev3-sst{font-size:38px}}
@media (min-width:1024px){.ev3-lab{font-size:35px}.ev3-sst{font-size:55px}}
/* the reference's appear steps (about): once a block's top is its offset above the window's foot (data-ev3-ap, set by the
   script), its label rises out of its line (0.5 s), its text unmasks along a diagonal (0.8 s) and its photos and titles
   fade or rise 20 px (0.3 s); without the script, or with reduced motion, everything simply shows */
html.ev3-js .ev3-ap-full{display:block;transform:translateY(100%);transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
html.ev3-js .ev3-ap-in{opacity:0;transition:opacity .3s cubic-bezier(.25,.46,.45,.94)}
html.ev3-js .ev3-ap-up{opacity:0;transform:translateY(20px);
  transition:opacity .3s cubic-bezier(.25,.46,.45,.94),transform .3s cubic-bezier(.25,.46,.45,.94)}
html.ev3-js .ev3-ap-mask{-webkit-mask-image:linear-gradient(115deg,#000 0% 33%,#0000 66% 100%);
  mask-image:linear-gradient(115deg,#000 0% 33%,#0000 66% 100%);-webkit-mask-size:300% 300%;mask-size:300% 300%;
  -webkit-mask-position:100% 100%;mask-position:100% 100%;
  transition:-webkit-mask-position .8s cubic-bezier(.455,.03,.515,.955),mask-position .8s cubic-bezier(.455,.03,.515,.955)}
html.ev3-js .is-in .ev3-ap-full,html.ev3-js .is-in .ev3-ap-up{transform:none}
html.ev3-js .is-in .ev3-ap-in,html.ev3-js .is-in .ev3-ap-up{opacity:1}
html.ev3-js .is-in .ev3-ap-mask{-webkit-mask-position:0 0;mask-position:0 0}
html.ev3-js .ev3-ap-d4{transition-delay:.4s}
html.ev3-js .ev3-ap-d5{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
  html.ev3-js .ev3-ap-full,html.ev3-js .ev3-ap-up{transform:none}
  html.ev3-js .ev3-ap-in,html.ev3-js .ev3-ap-up{opacity:1}
  html.ev3-js .ev3-ap-mask{-webkit-mask-image:none;mask-image:none}
}
/* big words over a full bleed photo that drifts down 30% of the section as it passes (130% tall, from -30%) */
.ev3-bw{position:relative;color:#fff;background:var(--ev3-ink);padding:100px 0 115px;overflow:hidden}
.ev3-bw-p{position:absolute;inset:0}
.ev3-bw-pi{position:absolute;inset:0}
.ev3-bw-p picture,.ev3-bw-p img{display:block;width:100%;height:100%;object-fit:cover}
.ev3-bw-p img{opacity:.7}
.ev3-bw-t{position:relative;display:flex;flex-direction:column;align-items:center;font:300 55px/1.15 var(--ev3-xl);text-align:center}
.ev3-who{padding:30px 0}
.ev3-pf{width:var(--ev3-cw);margin:0 auto;display:flex;flex-direction:column;gap:22px}
.ev3-pf+.ev3-pf{margin-top:60px}
.ev3-pf-p{margin:0}
.ev3-pf-p picture,.ev3-pf-p img{display:block;width:100%;height:auto;aspect-ratio:685/1028;object-fit:cover}
.ev3-pf-t h3{font:300 26px/1.15 var(--ev3-serif)}
.ev3-pf-t p{margin-top:22px;font:400 17px/1.25 var(--ev3-sans)}
/* services (phones): a photo, the cream panel, the second photo */
.ev3-svc{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--ev3-cream)}
.ev3-svc-ph{display:contents}
.ev3-svc-i{order:1;aspect-ratio:375/468}
.ev3-svc-i2{order:3}
.ev3-svc-i picture,.ev3-svc-i img{display:block;width:100%;height:100%;object-fit:cover}
.ev3-svc-g{order:2;width:var(--ev3-cw);margin:0 auto}
.ev3-svc-c{position:relative;padding:20px 0 75px;text-align:center}
.ev3-svc-bg{display:none}
.ev3-svc-t{font:300 26px/1.15 var(--ev3-serif);padding-bottom:100px}
.ev3-svc-k{font:400 16px/1.1 var(--ev3-sans);margin-bottom:42px}
.ev3-svc-l{display:flex;flex-direction:column;gap:6.2px;font:400 16px/1.1 var(--ev3-sans)}
/* kind words: the quote mark and each quote's photo sit above the text on phones; on wider windows the photo hangs from
   the first two lines, floated left, as the reference's */
.ev3-kw{position:relative;width:var(--ev3-cw);margin:0 auto;padding:15px 0 44px}
.ev3-kw-g{position:relative}
.ev3-kw-m{position:absolute;top:0;left:0;height:260px;display:flex;align-items:center}
.ev3-qm{display:block;width:38px;height:31px}
.ev3-kw-w{display:flex;flex-direction:column;gap:60px}
.ev3-q{display:block;margin:0}
.ev3-q blockquote{margin:0}
.ev3-q p{font:375 26px/1.1 var(--ev3-sans)}
.ev3-q-im{display:block;width:200px;margin:0 0 15px auto}
.ev3-q-ph{display:block;aspect-ratio:266/346}
.ev3-q-ph picture,.ev3-q-ph img{display:block;width:100%;height:100%;object-fit:cover}
.ev3-q figcaption{margin-top:50px;font:400 20px/1.25 var(--ev3-sans)}
.ev3-kw-z,.ev3-kw-n{display:none}
html.ev3-js .ev3-kw-w{display:grid}
html.ev3-js .ev3-q{grid-area:1/1;visibility:hidden}
html.ev3-js .ev3-q.is-on,html.ev3-js .ev3-q.is-in,html.ev3-js .ev3-q.is-leaving{visibility:visible}
/* the next quote's photo waiting at the window's left edge (wide windows, after the first change) */
html.ev3-js .ev3-q.is-wait .ev3-q-ph{visibility:visible}
html.ev3-js .ev3-q figcaption{opacity:0;transition:opacity 1s var(--ev3-p1)}
html.ev3-js .ev3-q.is-on figcaption{opacity:1}
html.ev3-js .ev3-kw-z{display:block;position:absolute;inset:0;z-index:2;width:100%;cursor:e-resize}
html.ev3-js .ev3-kw-z:focus-visible{outline:2px solid var(--ev3-ink);outline-offset:-2px}
html.ev3-js .ev3-kw-n{display:flex;justify-content:center;align-items:center;gap:15px;position:relative;z-index:3;margin-top:10px}
.ev3-kw-d{position:relative;width:44px;height:44px;cursor:pointer}
.ev3-kw-d::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--ev3-ink);opacity:.2;transition:opacity .3s var(--ev3-ease)}
.ev3-kw-d.is-on::before{opacity:1}
.ev3-kw-d:focus-visible{outline:2px solid var(--ev3-ink);outline-offset:-6px}
.ev3-lg{display:flex;flex-direction:column}
.ev3-lg .ev3-fw{padding-bottom:0}
/* the sub navigation: without JavaScript a list at the foot of the page; with it the reference's sticky bar (350 x 65,
   30 px above the foot, rising 0.7 s expo.out once the heading is passed, gone over the places band) and its list */
.ev3-snb-w,.ev3-snp-bd{display:none}
.ev3-snp{width:var(--ev3-cw);margin:0 auto;padding:30px 0 60px;text-align:center}
.ev3-snp ul{display:flex;flex-direction:column;align-items:center;gap:5px}
.ev3-snp a{display:inline-flex;align-items:center;min-height:44px;padding:6px;text-decoration:none;font:300 26px/1.15 var(--ev3-serif)}
.ev3-snp a span{position:relative}
html.ev3-js .ev3-snb-w{display:flex;position:fixed;left:0;bottom:-65px;z-index:1015;width:100%;height:65px;justify-content:center;
  pointer-events:none;transition:transform .7s var(--ev3-expo)}
html.ev3-js .ev3-sn.is-on .ev3-snb-w,html.ev3-js .ev3-sn.is-open .ev3-snb-w,html.ev3-js .ev3-sn:focus-within .ev3-snb-w{transform:translateY(calc(-100% - 30px))}
.ev3-snb{position:relative;width:350px;max-width:calc(100vw - 50px);height:65px;display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--ev3-ink);border-radius:5px;pointer-events:auto;font:400 16px/1 var(--ev3-sans);
  transition:color 1s var(--ev3-expo),background-color 1s var(--ev3-expo)}
.ev3-snb-t{height:100%;padding:0 60px;cursor:pointer;font:inherit;color:inherit}
.ev3-snb-l{display:inline-block}
.ev3-snb-a{position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;cursor:pointer;color:#fff;overflow:hidden;
  transition:opacity 1s var(--ev3-expo),color 1s var(--ev3-expo)}
.ev3-snb-a::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ev3-ink);
  transition:transform .45s cubic-bezier(.25,0,.25,1),background-color .45s cubic-bezier(.25,0,.25,1)}
.ev3-snb-pv{left:15px}
.ev3-snb-nx{right:15px}
.ev3-snb-i{position:absolute;inset:0;display:flex;width:200%;transition:transform .45s cubic-bezier(.25,0,.25,1)}
.ev3-snb-i svg{position:relative;width:50%;height:11px;margin:auto 0}
.ev3-snb-nx .ev3-snb-i{left:-100%}
.ev3-snb-pv .ev3-snb-i{transform:rotate(180deg)}
.ev3-snb-a[disabled]{opacity:.5;pointer-events:none}
.ev3-snb-a:focus-visible,.ev3-snb-t:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (hover:hover){
  .ev3-snb-a:not([disabled]):hover::before{transform:scale(1.2)}
  .ev3-snb-nx:not([disabled]):hover .ev3-snb-i{transform:translateX(50%)}
  .ev3-snb-pv:not([disabled]):hover .ev3-snb-i{transform:rotate(180deg) translateX(50%)}
}
.ev3-snb-a:active::before{transform:scale(.2)!important}
html.ev3-js .ev3-sn.is-open .ev3-snb{background:var(--ev3-ink);color:#fff}
html.ev3-js .ev3-sn.is-open .ev3-snb-a{color:var(--ev3-ink)}
html.ev3-js .ev3-sn.is-open .ev3-snb-a::before{background:#fff}
html.ev3-js .ev3-snp-bd{display:block;position:fixed;inset:0;z-index:1010;background:var(--ev3-beige);opacity:0;pointer-events:none;
  transition:opacity 1s var(--ev3-expo)}
html.ev3-js .ev3-sn.is-open .ev3-snp-bd{opacity:.75;pointer-events:auto}
html.ev3-js .ev3-snp{position:fixed;left:50%;bottom:0;z-index:1012;width:100%;max-width:546px;margin:0;padding:50px 0 122px;background:#fff;
  transform:translate(-50%,100%);visibility:hidden;transition:transform 1s var(--ev3-expo),visibility 0s 1s}
html.ev3-js .ev3-sn.is-open .ev3-snp{transform:translate(-50%,0);visibility:visible;transition:transform 1s var(--ev3-expo)}
html.ev3-js .ev3-snp a[aria-current] span::after,html.ev3-js .ev3-snp a:hover span::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor}
@media (min-width:650px){.ev3-snp a,.ev3-pf-t h3{font-size:30px}.ev3-svc-t{font-size:30px}}
@media (min-width:768px){
  .ev3-ahs{padding:180px 0 80px}
  .ev3-ah{font-size:min(15vw,235px,calc((100svh - 204px + 2.71vw) / 2.354))}
  .ev3-coll{aspect-ratio:1388/910;margin:calc(200 / 1728 * 100vw) 0}
  .ev3-coll-1{margin:0}
  .ev3-coll-i{grid-template-columns:repeat(12,1fr)}
  .ev3-co-a{grid-area:1/3/auto/span 3;margin:26% 16% 0 3%}
  .ev3-co-b{grid-area:1/7/auto/span 5;margin:0}
  .ev3-co-c{grid-area:2/5/auto/span 4;margin:26% 0 0}
  .ev3-co-d{grid-area:3/3/auto/span 4;margin:74% -9.2% 0 15%}
  .ev3-co-e{grid-area:4/8/auto/span 3;margin:142% 13% 0 -16%}
  .ev3-fw{padding:calc(150 / 1728 * 100vw) 0 calc(219 / 1728 * 100vw)}
  .ev3-lab+.ev3-sst{margin-top:calc(150 / 1728 * 100vw)}
  .ev3-sst:not(:last-child){margin-bottom:40px}
  .ev3-fw-b{margin-top:calc(219 / 1728 * 100vw);padding-top:0}
  .ev3-fw-b .ev3-lab{padding-bottom:calc(219 / 1728 * 100vw)}
  .ev3-fw-b .ev3-lab+.ev3-sst{margin-top:25px}
  .ev3-lg .ev3-fw{padding-bottom:calc(219 / 1728 * 100vw)}
  .ev3-bw{padding:calc(310 / 1728 * 100vw) 0 calc(353 / 1728 * 100vw)}
  .ev3-bw-pi{top:0;bottom:auto;height:130%;transform:translateY(calc((var(--bp,0) - 1) * 23.077%))}
  .ev3-bw-t{font-size:calc(253 / 1728 * 100vw);line-height:1.1}
  .ev3-pf{display:grid;grid-template-columns:repeat(12,1fr);column-gap:10px;align-items:start}
  .ev3-pf+.ev3-pf{margin-top:30px}
  .ev3-pf-p{grid-column:1/span 6}
  .ev3-pf-t{grid-column:8/span 5}
  .ev3-pf-t p{margin-top:40px}
  .ev3-svc{display:block;padding:max(60vh,40vw) 0}
  .ev3-svc-ph{display:block;position:absolute;left:0;top:-100dvh;width:100%;height:200dvh;transform:translateY(calc(200dvh * var(--sp,0)))}
  .ev3-svc-i{position:absolute;inset:0;aspect-ratio:auto}
  .ev3-svc-i2{opacity:0;transition:opacity .7s var(--ev3-ease)}
  .ev3-svc.is-2 .ev3-svc-i2{opacity:1}
  .ev3-svc-g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:10px}
  .ev3-svc-c{grid-column:3/span 8;padding:150px 58px}
  .ev3-svc-bg{display:block;position:absolute;z-index:0;top:0;left:50%;height:100%;width:calc(100% + (100vw - 100%) * var(--sk,0));
    transform:translateX(-50%);background:var(--ev3-cream)}
  .ev3-svc-c>:not(.ev3-svc-bg){position:relative;z-index:1}
  .ev3-svc-t{padding-bottom:150px}
  .ev3-svc-l{font-size:18px;padding-bottom:25px}
  .ev3-kw{padding:0;margin-bottom:100px}
  .ev3-kw::before{content:"";display:block;width:calc(266 / 1728 * 100vw);aspect-ratio:266/300}
  .ev3-kw-g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:10px}
  .ev3-kw-m{position:static;grid-column:2/span 1;height:auto;align-items:flex-start;padding-top:.2em;font-size:40px}
  .ev3-qm{width:calc(44 / 1728 * 100vw);height:auto}
  .ev3-kw-w{grid-column:3/span 10}
  .ev3-q p{font-size:26px}
  .ev3-q-im{position:relative;float:left;width:calc(266 / 1728 * 100vw);height:2em;margin:0 15px 0 0}
  .ev3-q-ph{position:absolute;right:0;bottom:0;width:100%;transform-origin:100% 100%}
  html.ev3-js .ev3-kw-n{gap:30px;margin-top:calc(166 / 1728 * 100vw)}
  .ev3-kw-d{width:20px;height:20px}
  .ev3-kw-d::before{left:5px;top:5px;margin:0}
  .ev3-kw-d::after{content:"";position:absolute;inset:-12px}
  .ev3-snb{font-size:18px}
  html.ev3-js .ev3-snp{padding-bottom:140px}
}
@media (min-width:1024px){
  .ev3-pf-t{grid-column:9/span 4}
  .ev3-pf-t h3{font-size:35px}
  .ev3-pf-t p{font-size:20px}
  .ev3-svc-c{padding:150px 140px}
  .ev3-svc-t{font-size:35px}
  .ev3-snp a{font-size:35px}
  .ev3-q p{font-size:40px}
}
@media (min-width:1280px){.ev3-kw-w{grid-column:5/span 8}}
@media (min-width:1680px){.ev3-q p{font-size:55px}}
@media (max-width:767px){
  .ev3-bw-pi{transform:none!important}
}

/* ---------------------------------------------------------------- contact */
.ev3-cs{position:relative;background:var(--ev3-cground)}
.ev3-cs-p{position:relative;width:100%;aspect-ratio:1/1;margin-top:55px}
.ev3-cs-p picture,.ev3-cs-p img{display:block;width:100%;height:100%;object-fit:cover}
.ev3-cs-g{position:relative;width:100%;padding:0 0 25svh}
.ev3-cc{background:var(--ev3-cream);padding:25px;position:relative}
.ev3-cc-h{font:300 35px/1.15 var(--ev3-serif);text-align:center;margin:20px 0 40px}
.ev3-fds{display:grid;grid-template-columns:1fr;gap:15px}
/* the reference's fields: the words inside the white box (placeholders in ink at 0.68, 5.5:1 on white), the label kept
   for screen readers; a date input draws its words over the empty box until it has focus or a value */
.ev3-fd{position:relative;display:flex;flex-direction:column}
.ev3-fd input,.ev3-fd select,.ev3-fd textarea{width:100%;min-height:56px;padding:24px 40px 24px 20px;border:1px solid transparent;border-radius:5px;background:#fff;
  color:var(--ev3-ink);font:300 clamp(16px,1.14vw,18px)/1.15 var(--ev3-sans)}
.ev3-fd ::placeholder{color:#232323ad;opacity:1}
.ev3-fd select:has(option[value=""]:checked){color:#232323ad}
.ev3-fd select option{color:var(--ev3-ink)}
.ev3-fd textarea{min-height:240px;resize:vertical}
/* one height for every single line box (a date input and a select would otherwise sit 2 and 3 px taller), their words
   centred in it */
.ev3-fd input,.ev3-fd select{height:calc(50px + 1.15em)}
.ev3-fd select,.ev3-fd input[type=date]{padding-top:0;padding-bottom:0}
.ev3-fd-p{position:absolute;left:21px;top:50%;transform:translateY(-50%);color:#232323ad;font:300 clamp(16px,1.14vw,18px)/1.15 var(--ev3-sans);pointer-events:none}
.ev3-fd-dt input:not(:focus):not(.has-v){color:transparent}
.ev3-fd-dt input:focus+.ev3-fd-p,.ev3-fd-dt input.has-v+.ev3-fd-p{visibility:hidden}
.ev3-fd input:focus-visible,.ev3-fd select:focus-visible,.ev3-fd textarea:focus-visible{outline:2px solid var(--ev3-ink);outline-offset:2px}
.ev3-form fieldset{border:0;margin:0;padding:0;min-width:0}
.ev3-form-f{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:30px;text-align:center}
.ev3-form-n{font:400 14px/1.35 var(--ev3-sans);opacity:.75}
.ev3-res{text-align:center;padding:20px 0;scroll-margin-top:75px}
.ev3-res:focus{outline:0}
@media (min-width:768px){.ev3-res{scroll-margin-top:117px}}
.ev3-res h2{font:300 35px/1.15 var(--ev3-serif);margin-bottom:24px}
.ev3-res p{font:400 16px/1.4 var(--ev3-sans);max-width:560px;margin:0 auto 20px}
.ev3-res-s{text-align:left;background:#fff;border-radius:5px;padding:20px 24px;margin:0 auto 20px;max-width:640px;font:400 16px/1.4 var(--ev3-sans)}
.ev3-res-m a{text-decoration:underline}
@media (min-width:768px){
  .ev3-cs-p{position:absolute;inset:0;aspect-ratio:auto;margin-top:0}
  .ev3-cs-g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:10px;width:var(--ev3-cw);margin:0 auto;padding:40svh 0 25svh}
  .ev3-cc{grid-column:2/span 10;padding:100px calc(150 / 1728 * 100vw)}
  .ev3-cc-h{font-size:65px;margin:0 0 86px}
  .ev3-fds{grid-template-columns:1fr 1fr;gap:25px 24px}
  .ev3-fd-w{grid-column:1/-1}
}
@media (min-width:1024px){.ev3-cc{grid-column:3/span 8}}

/* ---------------------------------------------------------------- reduced motion: everything rests */
@media (prefers-reduced-motion:reduce){
  .ev3-press-tr{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .ev3-press-l[aria-hidden]{display:none}
  .ev3-press-l{flex-wrap:wrap;justify-content:center;white-space:normal;padding:0 15px}
  .ev3-hero-p img{transform:none!important;opacity:calc(1 - var(--ev3-rest))!important}
  .ev3-l1,.ev3-l2,.ev3-l3,.ev3-ct-l{transform:none!important}
  .ev3-ph-p img{transform:none!important;opacity:calc(1 - var(--ev3-rest))!important}
  [data-speed],[data-speed-in]{transform:none!important}
  .ev3-nm-1{transform:translateY(-50%) translateX(100%)!important}
  .ev3-nm-2{transform:translateY(-50%) translateX(-100%)!important}
  html.ev3-js .ev3-ft-in{transform:none!important}
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:0s!important;animation-delay:0s!important}
}