/* ==========================================================================
   הרגע המושלם · Lusion-style concept · DARK
   One fixed WebGL canvas (z:1) lives between the section backgrounds (below)
   and the readable DOM content (z:2). Everything is readable without WebGL.
   Palette: black and white only (UI); the photographs and the logo are the only colour. One typeface: Heebo.
   ========================================================================== */


@font-face{font-family:"Varela Round";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/varelaround-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/playfair-italic-500.ttf) format("truetype")}  /* the big English headline: only the letters it needs (OFL) */
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/frankruhl-500.ttf) format("truetype")}  /* only the letters of "הרגע המושלם" (OFL) */
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/heebo-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/heebo-latin.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}

:root{
  --bg:#0a0a0a; --bg-2:#0f0f0f; --bg-3:#141414;
  --surface:#181818; --surface-2:#232323;
  --cream:#ffffff; --cream-2:rgba(255,255,255,.78); --cream-3:rgba(255,255,255,.58);
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.3);
  --lens:#ffffff; --lens-d:#bdbdbd; --lens-l:#ffffff; --on-lens:#000000;      /* black and white only */
  --flash:#ffffff;
  --gut:clamp(16px,3.4vw,48px);
  --r-xs:3px; --r-s:6px; --r:8px; --r-lg:10px;   /* the shape of the whole site: squarish, corners only slightly eased (never pills, never circles except dots and radios) */
  --f-sans:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;       /* ONE typeface for the whole site: Heebo (light for display, regular for text) */
  --f-mono:var(--f-sans);
  --f-serif:var(--f-sans); --f-display:var(--f-sans);
  --ease:cubic-bezier(.22,.8,.18,1); --ease-io:cubic-bezier(.65,0,.25,1);
  --hdr:76px;
  --sec-y:clamp(40px,4.8vw,72px);           /* one vertical rhythm: section padding top and bottom */
  --head-gap:clamp(28px,3.6vw,56px);        /* header block -> content */
  --vh:100vh;
  color-scheme:dark;
}
@supports (height:100svh){:root{--vh:100svh}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;background:var(--bg);scroll-padding-bottom:calc(var(--rc-h,76px) + clamp(10px,2vh,20px) + 24px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;font-family:var(--f-sans);font-size:17px;line-height:1.6;font-weight:400;color:var(--cream);background:var(--bg);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--lens);color:var(--on-lens)}
:focus-visible{outline:2px solid var(--lens-l);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;inset-block-start:10px;inset-inline-start:10px;z-index:300;background:var(--cream);color:var(--bg);padding:10px 16px;border-radius:var(--r-s);transform:translateY(-200%)}
.skip:focus{transform:none}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico--fill{fill:currentColor;stroke:none}

/* ---------------------------------------------------------------- global layers */
.gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s}
.gl-on .gl{opacity:1}
.gl.is-top{z-index:95}
.wrap{position:relative;z-index:2;width:min(100% - 2*var(--gut),1440px);margin-inline:auto}
.sec{position:relative;padding-block:var(--sec-y)}
.flash{position:fixed;inset:0;z-index:140;background:var(--flash);opacity:0;pointer-events:none}

/* ---------------------------------------------------------------- loader */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg);color:var(--cream);overflow:hidden;transition:opacity .5s}
.loader.is-done{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.loader__canvas{position:absolute;inset:0;width:100%;height:100%}
.loader__ui{position:absolute;inset:0;padding:var(--gut);display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.loader__top{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2)}
.loader__top img{width:46px;height:auto}
.loader__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.loader__hint{font-size:clamp(16px,1.6vw,22px);color:var(--cream-2)}
.loader__count{display:flex;align-items:flex-start;gap:6px;line-height:.82;font-family:var(--f-sans);font-weight:300;letter-spacing:-.05em;font-size:clamp(96px,18vw,300px)}
.loader__count b{font-weight:300;font-variant-numeric:tabular-nums;filter:blur(var(--blur,18px));transition:filter .2s}
.loader__count span{font-size:.22em;letter-spacing:0;margin-top:.12em;color:var(--cream-3)}
.loader.is-open{background:transparent;pointer-events:none}
.loader[hidden]{display:none!important}
.loader.is-open .loader__ui{opacity:0;transition:opacity .35s}

/* ---------------------------------------------------------------- header */
.hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;height:var(--hdr);padding-inline:var(--gut);display:flex;align-items:center;justify-content:space-between;pointer-events:none;transition:transform .5s var(--ease)}
.hdr::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;height:calc(100% + 34px);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(10,10,10,.72),rgba(10,10,10,.34) 55%,rgba(10,10,10,0))}
.hdr>*{pointer-events:auto}
/* below the opening stage the header is a real bar: page text never runs under the brand and the buttons */
.hdr::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(10,10,10,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);opacity:0;transition:opacity .35s}
.hdr.is-solid::after{opacity:1}
.hdr.is-solid::before{opacity:0}
.brand{display:flex;align-items:center;gap:12px}
/* the logo stands on its own (no chip): its colours are the brand's only colour on the page */
.brand__chip{display:block;transition:transform .5s var(--ease)}
.brand__chip img{width:54px;height:auto}
.brand:hover .brand__chip{transform:scale(1.06)}
.brand__txt{display:flex;flex-direction:column;line-height:1.1}
.brand__txt b{font-weight:500;font-size:17px;letter-spacing:-.01em;white-space:nowrap;color:var(--cream)}
.brand__txt i{font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;color:var(--cream-3)}
.hdr__actions{display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;height:42px;padding-inline:18px;border-radius:var(--r-s);font-size:14px;font-weight:500;letter-spacing:.01em;position:relative;overflow:hidden;isolation:isolate;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.pill--dark{background:var(--lens);color:var(--on-lens)}
.pill--light,.pill--round{background:rgba(255,255,255,.1);color:var(--cream);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pill--round{width:42px;padding:0;justify-content:center}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--on-lens);transition:transform .5s var(--ease)}
.pill--dark::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);transform:scale(0);border-radius:inherit;transition:transform .55s var(--ease)}
.pill--dark:hover::before{transform:scale(1.4)}
.pill--light:hover,.pill--round:hover{background:rgba(255,255,255,.2);border-color:var(--cream-3)}
.dots{display:inline-flex;gap:3px}
.dots i{width:4px;height:4px;border-radius:50%;background:currentColor;transition:transform .4s var(--ease)}
.pill--light:hover .dots i:first-child{transform:translateX(4px)}
.pill--light:hover .dots i:last-child{transform:translateX(-4px)}
.hdr.is-hidden{transform:translateY(-110%)}

/* menu */
.menu{position:fixed;inset:0;z-index:70;background:var(--bg);color:var(--cream);visibility:hidden;clip-path:circle(0px at var(--mx,92%) var(--my,36px));transition:clip-path .8s var(--ease-io),visibility 0s .8s}
.menu.is-open{visibility:visible;clip-path:circle(150% at var(--mx,92%) var(--my,36px));transition:clip-path .9s var(--ease-io),visibility 0s}
.menu__inner{height:100%;padding:calc(var(--hdr) + 3vh) var(--gut) var(--gut);display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow:auto}
.menu__nav{display:flex;flex-direction:column;margin-block:auto}
.menu__nav a{display:flex;align-items:baseline;gap:20px;padding-block:.12em;font-size:clamp(44px,8.4vh,112px);font-weight:300;letter-spacing:-.035em;line-height:1.04;color:var(--cream-3);transition:color .3s,transform .5s var(--ease)}
.menu__nav a i{font:400 12px/1 var(--f-mono);letter-spacing:.14em;color:var(--lens);font-style:normal;min-width:2.2em}
.menu__nav a:hover,.menu__nav a:focus-visible{color:var(--cream);transform:translateX(-14px)}
.menu__foot{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px;color:var(--cream-2)}
.menu__foot a{display:inline-flex;align-items:center;gap:10px}
.menu__foot a:hover{color:var(--lens-l)}
.menu.is-open .menu__nav a{animation:menuin .9s var(--ease) both}
.menu.is-open .menu__nav a:nth-child(2){animation-delay:.04s}.menu.is-open .menu__nav a:nth-child(3){animation-delay:.08s}.menu.is-open .menu__nav a:nth-child(4){animation-delay:.12s}.menu.is-open .menu__nav a:nth-child(5){animation-delay:.16s}.menu.is-open .menu__nav a:nth-child(6){animation-delay:.2s}.menu.is-open .menu__nav a:nth-child(7){animation-delay:.24s}
@keyframes menuin{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.menu__preview{position:absolute;inset-block:calc(var(--hdr) + 4vh) 14vh;inset-inline-end:var(--gut);width:min(34vw,520px);pointer-events:none}
.menu__preview img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:var(--r);box-shadow:0 40px 100px -30px rgba(0,0,0,.8);opacity:0;transform:translateY(40px) rotate(-3deg) scale(.94);transition:opacity .5s var(--ease),transform .9s var(--ease)}
.menu__preview img.is-on{opacity:1;transform:rotate(-2deg)}
.menu__preview img:nth-child(even){transform:translateY(40px) rotate(3deg) scale(.94)}
.menu__preview img:nth-child(even).is-on{transform:rotate(2.5deg)}
@media (max-width:980px){.menu__preview{display:none}}
.hdr.is-menu{z-index:75}
.hdr.is-menu::before,.hdr.is-menu::after{opacity:0}
.hdr.is-menu.is-hidden{transform:none}

/* location HUD + scroll bar + fab */
.fab{position:fixed;inset-block-end:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-end:var(--gut);z-index:58;display:inline-flex;align-items:center;gap:10px;height:48px;padding-inline:20px 22px;border-radius:var(--r-s);background:var(--surface-2);border:1px solid var(--line-2);color:var(--cream);font-weight:500;font-size:15px;box-shadow:0 12px 34px -10px rgba(0,0,0,.7);transition:transform .5s var(--ease),background .3s,color .3s,opacity .4s}
.fab .ico{color:var(--lens-l);transition:color .3s}
.fab:hover{background:var(--lens);color:var(--on-lens);border-color:var(--lens);transform:translateY(-3px)}
.fab:hover .ico{color:var(--on-lens)}
.fab.is-off{opacity:0;pointer-events:none;transform:translateY(20px)}

/* cursor */
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------------------------------------------------------------- typography helpers */
.label{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3);margin-bottom:clamp(20px,3vw,40px)}
.label .num{display:inline-grid;place-items:center;min-width:34px;height:24px;padding-inline:8px;border-radius:var(--r-s);border:1px solid var(--line-2);color:var(--lens-l);font-size:11px;letter-spacing:.06em}
.label span:last-child{font-family:var(--f-sans);font-size:14px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--cream)}
.h2{font-size:clamp(44px,7.4vw,128px);font-weight:300;line-height:.96;letter-spacing:-.04em}
.h2--xl{font-size:clamp(50px,8.6vw,150px)}
.lead{font-size:clamp(18px,1.55vw,24px);line-height:1.55;max-width:40ch;color:var(--cream-2);margin-top:clamp(18px,2vw,32px)}
.textlink{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(28px,3vw,48px);font-weight:500;border-bottom:1.5px solid currentColor;padding-bottom:4px}
.textlink .ico{transition:transform .4s var(--ease)}
.textlink:hover .ico{transform:translateX(-6px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding-inline:28px;border-radius:var(--r-s);font-weight:500;font-size:16px;position:relative;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow .4s,color .4s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:none}
.btn--wa{background:var(--lens);color:var(--on-lens)}
.btn--wa .ico{transition:color .3s}
.btn--lg{height:62px;font-size:17px;width:100%}
.round{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:var(--r);border:1.5px solid var(--line-2);transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.round:hover{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.round:active{transform:scale(.92)}

/* reveals (only when JS booted: html.fx): things rise into place, always sharp */
.fx [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.fx [data-reveal].is-in{opacity:1;transform:none}
.fx [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.fx [data-split] .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*45ms)}
.fx [data-split].is-in .w>span{transform:none}
@media (prefers-reduced-motion:reduce){.fx [data-reveal],.fx [data-split] .w>span{opacity:1;transform:none;transition:none}}

/* the cream "exposure" token used for focus rings on photos */
.no-js #menuBtn,.no-js .fab{display:none}
.no-js .gl{display:none}

/* between pages: a short cross-fade (the page background is already dark, so nothing flashes) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
/* the top bar is its own layer in the transition: it stays where it is while the page behind it changes */
.hdr{view-transition-name:site-header}
::view-transition-group(site-header){animation-duration:.01s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* the page you are on */
.menu__nav a.is-current span{color:var(--lens-l)}
.menu__nav a.is-current i{color:var(--lens-l)}
.foot__nav a.is-current{color:var(--lens-l)}

/* ---------------------------------------------------------------- header: the logo, clear links, one call to action */
.hdr__nav{display:none}
@media (min-width:1000px){
  .hdr__nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,44px);margin-inline:clamp(28px,4.4vw,72px) auto}
  #menuBtn{display:none}
}
.hdr__nav a{position:relative;padding-block:10px;font-size:15px;font-weight:400;color:var(--cream-2);transition:color .3s}
.hdr__nav a::after{content:"";position:absolute;inset-inline:0;bottom:4px;height:1px;background:var(--lens);transform:scaleX(0);transition:transform .45s var(--ease)}
.hdr__nav a:hover,.hdr__nav a.is-current{color:var(--cream)}
.hdr__nav a:hover::after,.hdr__nav a.is-current::after{transform:scaleX(1)}
.hdr__actions .pill--dark{padding-inline:22px}

/* the interface is black and white; the logo and the photographs keep their own colours */

/* ---------------------------------------------------------------- STAGE (full-bleed hero wall + the flight) */
.stage{position:relative;height:calc(var(--vh)*7.4)}
.stage__pin{position:sticky;top:0;height:var(--vh);z-index:2;overflow:hidden}
.hero{position:absolute;inset:0;overflow:hidden}

/* static (no-WebGL / no-JS) wall: the same tilted wall, built from plain images */
.hero__wallfb{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.hero__wallfb .wf{position:absolute;inset:-22% -16%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.8vw,28px);transform:perspective(1500px) rotateY(-22deg) rotateX(7deg) rotateZ(7deg) scale(1.1);filter:brightness(.62)}
.hero__wallfb .wf>div{display:flex;flex-direction:column;gap:clamp(10px,1.8vw,28px);min-width:0}
.hero__wallfb img{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;border-radius:6px;background:var(--surface)}
.js:not(.no-gl) .hero__wallfb,.gl-on .hero__wallfb{display:none}

/* legibility: soft ink at the top (header) and bottom (copy) of the wall */
.hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(10,10,10,.5) 0,rgba(10,10,10,0) 20%),linear-gradient(to top,rgba(10,10,10,.88) 0,rgba(10,10,10,.5) 14%,rgba(10,10,10,0) 34%)}

/* the headline: drawn in WebGL (same words, same face) when the wall is live; real text for everything else. One weight, one size for both lines. */
.hero__title{position:absolute;z-index:2;inset-inline-start:5vw;inset-inline-end:var(--gut);inset-block-start:max(88px,calc(50vh - 13.4vw));display:flex;flex-direction:column;align-items:flex-start;color:var(--cream);line-height:1.04;letter-spacing:-.022em;font-weight:300}
.gl-on .hero__title{opacity:0;pointer-events:none;will-change:transform,opacity}

.hero__foot{position:absolute;z-index:3;inset-inline:var(--gut);inset-block-end:clamp(22px,5.2vh,54px);display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;pointer-events:none}
.hero__foot>*{pointer-events:auto}
.hero__tag{text-shadow:0 2px 18px rgba(10,10,10,.9),0 0 3px rgba(10,10,10,.6);max-width:35ch;font-size:clamp(16px,1.3vw,20px);line-height:1.55;font-weight:300;color:var(--cream)}
.hero__cue{position:absolute;z-index:3;inset-inline:0;margin-inline:auto;width:max-content;inset-block-end:clamp(26px,5.6vh,60px);display:inline-flex;align-items:center;gap:10px;color:var(--cream)}
.hero__cue .ico{width:18px;height:18px;animation:cue 1.8s var(--ease-io) infinite}
@keyframes cue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

/* the two lines of the tagline, told where they mean something (the same words as the hero's paragraph, which stays for the static page) */
.gl-on .hero__foot{display:none}
.beatscrim{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(to top,rgba(10,10,10,.86) 0,rgba(10,10,10,.55) 24%,rgba(10,10,10,0) 56%)}
.beat{display:none;position:absolute;z-index:3;inset-inline-start:var(--gut);inset-block-end:clamp(56px,12vh,130px);max-width:min(20ch,64vw);margin:0;font-size:clamp(28px,4vw,68px);font-weight:300;line-height:1.1;letter-spacing:-.022em;color:var(--cream);opacity:0;pointer-events:none;will-change:transform,opacity}
.gl-on .beat{display:block}

/* the flight: a thin line that fills as you travel, and a way out */
.rail{position:absolute;z-index:3;inset-inline-end:var(--gut);inset-block-start:50%;width:2px;height:min(28vh,220px);margin-top:calc(min(28vh,220px)/-2);background:rgba(255,255,255,.2);opacity:0;pointer-events:none;display:none}
.rail i{display:block;width:100%;height:100%;background:var(--cream);transform-origin:50% 0;transform:scaleY(0)}
.gl-on .rail{display:block}
.skipj{position:absolute;z-index:4;inset-block-end:22px;inset-inline-end:var(--gut);display:none;align-items:center;gap:10px;font:400 14px/1 var(--f-sans);color:var(--cream);padding:11px 18px;border-radius:var(--r-s);background:rgba(10,10,10,.5);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s}
.gl-on .skipj{display:inline-flex}
.skipj.is-on{opacity:1;pointer-events:auto}
.skipj .ico{width:16px;height:16px}

/* intro: the interface settles in as the iris opens onto the wall */
/* the top bar is never hidden or re-animated by a page change; it only slides in once, right after the first-visit iris */
.fx:not(.is-opening) .hero__foot,.fx:not(.is-opening) .hero__cue{opacity:0}
.has-iris.is-opening .hdr{animation:fxDown 1.1s var(--ease) .55s backwards}
.is-opening .hero__foot{animation:fxUp 1.2s var(--ease) .95s backwards}
.is-opening .hero__cue{animation:fxFade 1s ease 1.3s backwards}
@keyframes fxDown{from{opacity:0;transform:translateY(-100%)}}
@keyframes fxUp{from{opacity:0;transform:translateY(26px)}}
@keyframes fxFade{from{opacity:0}}

/* no-GL / reduced-motion: the stage is a normal, readable page section */
:is(.no-gl,.no-js) .stage{height:auto}
:is(.no-gl,.no-js) .stage__pin{position:relative;height:auto;overflow:visible}
:is(.no-gl,.no-js) .hero{position:relative;inset:auto;min-height:var(--vh);padding:calc(var(--hdr) + 40px) var(--gut) 40px;display:flex;flex-direction:column;justify-content:flex-end;gap:28px}
:is(.no-gl,.no-js) .hero__title{position:relative;inset:auto}
:is(.no-gl,.no-js) .hero__foot{position:relative;inset:auto;flex-wrap:wrap;align-items:flex-end}
:is(.no-gl,.no-js) .hero__cue,:is(.no-gl,.no-js) .skipj,:is(.no-gl,.no-js) .rail{display:none}
.no-js .hero{min-height:auto}

/* the headline: two big words filled with the photograph the story ends on (the couple); the small words stay plain white */
.ht-p{display:block;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:13vw;line-height:1.02;letter-spacing:-.01em;padding-inline-end:.14em;color:inherit}
.ht-b{display:block;align-self:flex-end;color:#fff;filter:drop-shadow(0 .02em .04em rgba(0,0,0,.45)) drop-shadow(0 .06em .3em rgba(0,0,0,.5))}
.ht-p:last-child{color:transparent;background:linear-gradient(100deg,#f6e3a1 0%,#e2b552 38%,#fff1bd 55%,#c8962e 100%);-webkit-background-clip:text;background-clip:text}

@media (max-width:760px){.ht-p{font-size:16.5vw}}

/* ---------------------------------------------------------------- HOME · about, closing call (the album, "אלבום חיים", is in 22-album.css) */
.kick{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:400;letter-spacing:.14em;color:var(--cream-2);margin-bottom:clamp(24px,3.4vw,48px)}
.kick::before{content:"";width:36px;height:1px;background:var(--cream-3)}

/* about: ONE full-bleed scene (it rises over the end of the flight). His best photographs fade behind it (the picture of the active card), his name and one line on the right, his portrait and five of his frames as a row of cards on the left (three in view, the active one taller) */
.hab{position:sticky;top:0;--cw:clamp(138px,14.2vw,248px);--cg:clamp(8px,1.1vw,18px);position:relative;z-index:3;display:flex;align-items:center;min-height:var(--vh);padding-block:calc(var(--sec-y)*1.6);overflow:hidden;isolation:isolate;background:var(--bg)}
/* it rises over the whole last screen of the pinned flight (the flight stays where it is, like the hero of tekno-art.com under the page that scrolls over it) and has covered it completely when the pin ends */
.gl-on .hab{margin-top:calc(var(--vh)*-1);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -30px 80px rgba(0,0,0,.5)}
.hab__bg{position:absolute;inset:0;z-index:-2}
.hab__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity 1.3s var(--ease),transform 8s linear}
.hab__bg img.is-on{opacity:1;transform:none}
.hab__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(8,8,8,.55) 0,rgba(8,8,8,.34) 32%,rgba(8,8,8,0) 62%,rgba(8,8,8,0) 100%),linear-gradient(180deg,rgba(10,10,10,.45) 0,rgba(10,10,10,0) 22%,rgba(10,10,10,0) 70%,var(--bg) 100%)}
.hab__in{width:100%;max-width:1500px;margin-inline:auto;padding-inline:var(--gut);display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,100px)}
.hab__txt{min-width:0}
.hab .kick{margin-bottom:clamp(14px,1.8vw,26px)}
.hab__name{font-size:clamp(56px,8vw,148px);font-weight:600;letter-spacing:-.045em;line-height:.94}
.hab__lede{max-width:25em;margin-top:clamp(18px,2.2vw,32px);font-size:clamp(18px,1.6vw,25px);font-weight:300;line-height:1.5;color:var(--cream)}
.hab__btn{margin-top:clamp(22px,2.6vw,38px);height:54px;padding-inline:26px;font-size:16px}
.hab__btn .ico{width:20px;height:20px}
/* the cards: his portrait is fixed and tall; each photograph sits in a slot beside it (--s, set by hab.js): the active one next to the portrait, the next after it, the rest wait off to the left or tuck behind the portrait */
.hab__cards{--ch:calc(var(--cw)*1.3);--ch-on:calc(var(--cw)*1.7);min-width:0;display:grid;justify-items:center;gap:clamp(20px,2.2vw,34px)}
.hab__view{position:relative;width:var(--cw);max-width:100%;height:var(--ch-on);overflow:hidden}
.hab__c{position:absolute;z-index:1;right:0;bottom:0;display:block;width:var(--cw);height:var(--ch);padding:0;border:0;border-radius:var(--r);overflow:hidden;background:var(--surface-2);box-shadow:0 34px 60px -34px rgba(0,0,0,.95);transform:translateX(calc(var(--s,0)*(var(--cw) + var(--cg))*-1));transition:transform .85s var(--ease),height .85s var(--ease),opacity .6s}
.hab__c.is-on{cursor:default}
.hab__me{position:absolute;z-index:2;right:0;bottom:0;margin:0;width:var(--cw);height:var(--ch-on);border-radius:var(--r);overflow:hidden;background:var(--surface-2);box-shadow:0 34px 60px -34px rgba(0,0,0,.95)}
.hab__me>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hab__c.is-off{opacity:0;pointer-events:none}
.hab__c.no-tr,.hab:not(.is-ready) .hab__c{transition:none}
.hab__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.74);transition:filter .85s var(--ease)}
.hab__c.is-on img{filter:none}
.hab__c:hover:not(.is-on) img{filter:brightness(.94)}
.hab__c:focus-visible,.hab__arr:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.hab__ph{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse 90% 70% at 40% 28%,#262626,#111 74%)}
.hab__ph img{position:static;width:46%;height:auto;opacity:.8}
.hab__ctl{display:flex;gap:12px}
.hab__arr{display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:var(--r);background:rgba(255,255,255,.92);color:#0a0a0a;cursor:pointer;transition:transform .4s var(--ease),background .3s}
.hab__arr:hover{background:#fff;transform:scale(1.07)}
.hab__arr .ico{width:22px;height:22px}
@media (max-width:900px){
  .hab{--cw:clamp(118px,33vw,176px);--cg:10px}
  .hab__in{grid-template-columns:1fr;gap:clamp(30px,8vw,48px)}
  .hab__veil{background:linear-gradient(180deg,rgba(10,10,10,.5) 0,rgba(10,10,10,.3) 42%,rgba(10,10,10,.5) 70%,var(--bg) 100%)}
  .hab__cards{justify-items:start}
  .hab__view{width:100%}
  .hab__name{font-size:clamp(54px,16vw,96px)}
}
@media (prefers-reduced-motion:reduce){.hab__bg img,.hab__c,.hab__c img{transition:none}.hab__bg img{transform:none}}

/* closing call */
.homecta{padding-block:calc(var(--sec-y)*1.5)}
.homecta__in{display:grid;gap:clamp(16px,2vw,28px);justify-items:start;max-width:980px}
.homecta .h2{font-size:clamp(36px,5vw,84px)}
.homecta__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,3vw,40px);margin-top:clamp(8px,1.4vw,20px)}
.homecta__act .btn{width:auto;min-width:240px}
.homecta__alt{font-size:clamp(17px,1.5vw,22px);font-weight:300;color:var(--cream-2);border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:color .3s,border-color .3s}
.homecta__alt:hover{color:var(--cream);border-color:var(--cream)}

/* while the viewer is open the hero's words step out of the way (the viewer's veil is not fully opaque) */
.viewer-open .hero__title,.viewer-open .hero__foot,.viewer-open .hero__cue,.viewer-open .rail,.viewer-open .skipj{opacity:0!important;transition:opacity .25s}
.hab::after{content:"";position:absolute;inset:0;z-index:2;background:#0a0a0a;opacity:var(--dim,0);pointer-events:none}

/* ---------------------------------------------------------------- HOME · "אלבום חיים": an album on a dark table. Scrolling opens it, page after page; the last spread becomes the whole screen and the next section rises over it. */
.alb{position:relative;z-index:4;height:var(--vh);background:#0a0a0a;--bh:min(calc(var(--vh)*.76),58vw,calc(var(--vh) - var(--hdr)*2 - 24px));--bw:calc(var(--bh)*.75);--cy:50%}
.alb__pin{position:relative;height:100%;overflow:hidden;background:#0a0a0a radial-gradient(ellipse 70% 52% at 50% 50%,#2a2a2a 0,#161616 55%,#0a0a0a 100%)}     /* the light falls off to the page's own black before the top and bottom edges: no seam against the sections around it */
.alb__grain{position:absolute;inset:0;pointer-events:none;opacity:.9;-webkit-mask-image:radial-gradient(ellipse 70% 52% at 50% 50%,#000 0,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 70% 52% at 50% 50%,#000 0,#000 40%,transparent 100%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.alb__shadow{position:absolute;left:50%;top:var(--cy);width:calc(var(--bw)*2.5);height:calc(var(--bh)*1.18);margin:calc(var(--bh)*-.5) 0 0 calc(var(--bw)*-1.25);background:radial-gradient(ellipse 50% 50% at 50% 56%,rgba(0,0,0,.78),rgba(0,0,0,0) 70%);pointer-events:none;opacity:0}

/* the album: leaves hinged on the spine (the right edge, as in a Hebrew book) */
.alb__scene{position:absolute;left:50%;top:var(--cy);width:0;height:0;perspective:2600px;perspective-origin:50% 36%}
.alb__book{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.alb__leaf{position:absolute;right:0;top:calc(var(--bh)/-2);width:var(--bw);height:var(--bh);transform-origin:100% 50%;transform-style:preserve-3d}
.alb .pg{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#eeece8;color:#141414;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.alb .pg--b{transform:rotateY(180deg)}
.alb .pg--fin{box-shadow:none}                  /* the last spread is one photograph: no page edge, and its spine shading melts away as it grows (see album.js) */
.alb .pg::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:#000;opacity:var(--sh,0)}
.alb .pg::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:var(--sp,1);background:linear-gradient(to left,rgba(0,0,0,.3) 0,rgba(0,0,0,.09) 8%,rgba(0,0,0,0) 22%)}
.alb .pg--b::after{background:linear-gradient(to right,rgba(0,0,0,.3) 0,rgba(0,0,0,.09) 8%,rgba(0,0,0,0) 22%)}     /* the right-hand pages are the backs of the leaves: their spine is at their left edge */

/* the cover: black linen with the mark in foil */
.alb .pg--cover{background:#0b0b0b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),-2px 0 0 #1c1c1c,-4px 0 0 #121212}
.alb .cv{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse 90% 70% at 38% 26%,#202020,#0a0a0a 72%)}
.alb .cv__fr{position:absolute;inset:6%;border:1px solid rgba(255,255,255,.14);border-radius:2px}
.alb .cv__logo{position:relative;z-index:1;width:64%;height:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.9))}
.alb .cv__sheen{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.2) 49%,rgba(255,255,255,0) 62%);background-size:300% 100%;background-position:var(--sx,0%) 0}
.alb .ep{position:absolute;inset:0;display:grid;place-items:center;background:#161616}
.alb .ep img{width:36%;height:auto;opacity:.55}

/* the pages: paper, photographs with a generous mat, one title page. Every photograph is a link that opens the viewer. */
.alb .tp{position:absolute;inset:0;padding:12% 11% 11%;display:flex;flex-direction:column;justify-content:flex-end;gap:6%;direction:rtl}
.alb .tp p{margin:0;font-size:calc(var(--bw)*.17);font-weight:300;line-height:1.02;letter-spacing:-.025em;color:#141414}
.alb .tp i{display:block;width:30%;height:1px;background:rgba(0,0,0,.45)}
.alb .tp small{font:500 calc(var(--bw)*.028)/1 var(--f-sans);letter-spacing:.24em;color:rgba(0,0,0,.5)}
.alb .pp{position:absolute;inset:0;padding:9%;display:grid;gap:5.5%;align-content:center}
.alb .pp>a,.alb .pf>a{display:block;min-width:0;min-height:0;overflow:hidden;background:#d8d5ce;box-shadow:0 1px 3px rgba(0,0,0,.28);cursor:zoom-in}
.alb .pp img,.alb .pf img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.alb .pp--2r{grid-template-rows:1fr 1fr}
.alb .pp--1>a{aspect-ratio:3/2}
.alb .pp--2c{grid-template-columns:1fr 1fr;align-items:center}
.alb .pp--2c>a{aspect-ratio:3/4}
.alb .pp--mix{grid-template-columns:1fr 1fr}
.alb .pp--mix>a{aspect-ratio:1}
.alb .pp--mix>a:first-child{grid-column:1/-1;aspect-ratio:3/2}
.alb .pf{position:absolute;inset:0}
.alb .pf>a{position:absolute;inset:0;box-shadow:none}
.alb .fin{position:absolute;inset:0;background-repeat:no-repeat;background-size:200% 100%;background-color:#141414}
.alb .fin--l{background-position:0 0}
.alb .fin--r{background-position:100% 0}


/* the words: the section's title and its link (as before; they leave when the cover opens), then the arrows and a link under the open album */
.alb__head{position:absolute;z-index:8;inset-inline:0;margin-inline:auto;width:min(100% - 2*var(--gut),1440px);inset-block-start:calc(var(--hdr) + clamp(24px,5vh,60px));display:flex;align-items:baseline;justify-content:space-between;gap:24px;pointer-events:none}
.alb__title{margin:0;font-size:clamp(36px,4.4vw,72px);font-weight:300;line-height:1.05;letter-spacing:-.02em;color:var(--cream);will-change:transform,opacity}
.alb__link{margin-top:0;white-space:nowrap;pointer-events:auto;text-shadow:0 1px 14px rgba(0,0,0,.7)}


.alb__more{position:absolute;z-index:8;inset-inline:0;margin:0 auto;width:max-content;inset-block-end:clamp(14px,3.6vh,40px);opacity:0;visibility:hidden}
.alb__nav{position:absolute;z-index:8;top:var(--cy);width:54px;height:54px;margin-top:-27px;display:grid;place-items:center;border-radius:50%;background:rgba(10,10,10,.72);border:1px solid var(--line-2);color:var(--cream);opacity:0;visibility:hidden;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease),opacity .3s}
.alb__nav:hover:not(:disabled){background:var(--cream);color:#000;border-color:var(--cream)}
.alb__nav:active:not(:disabled){transform:scale(.93)}
.alb__nav:disabled{cursor:default;opacity:.28!important}
.alb__nav .ico{width:22px;height:22px}
.alb__nav--next{left:max(10px,calc(50% - var(--bw) - 76px))}
.alb__nav--prev{right:max(10px,calc(50% - var(--bw) - 76px))}
.alb__pin{touch-action:pan-y}

/* phones: the album flips UP like a notepad. Two portrait pages are stacked and hinged across the middle, so each page is far bigger than half of a wide spread */
@media (max-width:760px){
  .alb{height:var(--vh);--bh:min(calc(var(--vh)*.43),calc(100vw*1.15))}
  .alb__head{flex-direction:column;align-items:flex-start;gap:10px}
  .alb__leaf{right:auto;left:calc(var(--bw)/-2);top:0;transform-origin:50% 0}
  .alb .pg--b{transform:rotateX(180deg)}
  .alb .pg::after{background:linear-gradient(to bottom,rgba(0,0,0,.3) 0,rgba(0,0,0,.09) 8%,rgba(0,0,0,0) 22%)}
  .alb .pg--b::after{background:linear-gradient(to top,rgba(0,0,0,.3) 0,rgba(0,0,0,.09) 8%,rgba(0,0,0,0) 22%)}
  .alb .fin{background-size:auto 200%}
  .alb .fin--r{background-position:63% 0}
  .alb .fin--l{background-position:63% 100%}
  .alb__shadow{display:none}
  .alb__nav--next{left:max(8px,calc(50% - var(--bw)/2 - 56px))}
  .alb__nav--prev{right:max(8px,calc(50% - var(--bw)/2 - 56px))}
  .alb__nav{width:46px;height:46px;margin-top:-23px}
}

/* no script / reduced motion: the album simply lies open on one spread, under its title, as a normal section */
html.alb-static .alb,html.no-js .alb{height:auto;--cy:calc(50% + 90px)}
html.alb-static .alb__pin,html.no-js .alb__pin{position:relative;height:calc(var(--bh) + 290px)}
@media (max-width:760px){html.alb-static .alb__pin,html.no-js .alb__pin{height:calc(var(--bh)*2 + 260px)}}

/* the real 3D album (album3d.js) takes over from the CSS one when WebGL is available */
.alb__cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.alb-gl .alb__scene,.alb-gl .alb__shadow{display:none}
html.alb-static .alb__cv,html.no-js .alb__cv{inset-block-start:150px;height:calc(100% - 150px)}

/* ---------------------------------------------------------------- the tile of a photograph (gallery and viewer origin) */
.tile__a{display:block;position:relative}
.tile__frame{display:block;position:relative;aspect-ratio:var(--ar);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.tile__img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile__a:hover .tile__img{transform:scale(1.035)}

/* every inner page ends with a link to the next one */
.pagenext{padding-block:clamp(24px,4vw,64px) clamp(48px,7vw,110px)}
.pagenext__a{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);padding-block:clamp(22px,3vw,44px);border-block:1px solid var(--line-2);transition:border-color .4s,color .4s}
.pagenext__k{font:500 13px/1 var(--f-mono);letter-spacing:.16em;color:var(--lens-l)}
.pagenext__t{font-size:clamp(32px,5.4vw,88px);font-weight:300;letter-spacing:-.04em;line-height:1;flex:1;min-width:0}
.pagenext__a .ico{width:clamp(28px,3.4vw,52px);height:clamp(28px,3.4vw,52px);transition:transform .5s var(--ease)}
.pagenext__a:hover{border-color:var(--lens)}
.pagenext__a:hover .ico{transform:translateX(-10px);color:var(--lens-l)}

/* inner pages start below the fixed header */
body:not(.page-home) main>section:first-child{padding-top:calc(var(--hdr) + clamp(20px,3.6vw,52px))}

/* ---------------------------------------------------------------- REVIEWS · the real screenshots run from right to left (they pause on hover / focus / the pause button; with reduced motion they are a plain row you can scroll) */
.rev .lead{max-width:46ch}
.rev__head{margin-bottom:var(--head-gap)}
.mq{direction:ltr;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.mq__track{display:flex;width:max-content;animation:mq 80s linear infinite}
.mq__row{display:flex;gap:clamp(14px,1.8vw,26px);margin:0;padding:0 clamp(14px,1.8vw,26px) 0 0;list-style:none}
.mq__card{flex:none;width:clamp(300px,44vw,620px);direction:rtl}
.mq:hover .mq__track,.mq:focus-within .mq__track,.mq.is-paused .mq__track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.shot__btn{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;border-radius:var(--r)}
.shot__btn:focus-visible{outline-offset:5px}
.mq__card img{display:block;width:100%;height:auto;border-radius:var(--r);background:#fff;box-shadow:0 18px 48px -18px rgba(0,0,0,.8)}
.rev__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(20px,2.4vw,32px)}
.mq__pause{display:inline-flex;align-items:center;gap:10px;height:40px;padding-inline:16px;border-radius:var(--r-s);border:1px solid var(--line-2);font-size:14px;color:var(--cream-2);transition:background .3s,color .3s}
.mq__pause:hover{background:var(--cream);color:var(--bg)}
.mq__pause .ico{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.mq__track{animation:none}.mq__row[aria-hidden="true"]{display:none}.mq__pause{display:none}}
.rvbox{position:fixed;inset:0;z-index:320;background:rgba(10,10,10,.95);display:flex;flex-direction:column}
.rvbox[hidden]{display:none}
.rvbox__x{align-self:flex-start;margin:calc(14px + env(safe-area-inset-top,0px)) var(--gut) 8px;width:48px;height:48px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface-2);display:grid;place-items:center;color:var(--cream)}
.rvbox__scroll{flex:1;overflow:auto;display:grid;place-items:center;padding:12px var(--gut) 28px;-webkit-overflow-scrolling:touch}
.rvbox__scroll img{display:block;max-width:none;width:auto;height:auto;border-radius:var(--r);background:#fff;box-shadow:0 22px 60px -18px rgba(0,0,0,.8)}

/* ---------------------------------------------------------------- INNER PAGES · about, services, gallery, pricing. One head (kicker, title, one line), then sections with air. */
.ph{margin-bottom:clamp(28px,4vw,60px);max-width:1100px}
.ph--s{margin-bottom:clamp(22px,3vw,44px)}
.ph__k{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:400;letter-spacing:.12em;color:var(--cream-2);margin-bottom:clamp(14px,1.8vw,24px)}
.ph__k::before{content:"";width:36px;height:1px;background:var(--cream-3)}
.ph__h{font-size:clamp(48px,8.6vw,152px);font-weight:300;line-height:.95;letter-spacing:-.045em}
.ph__h2{font-size:clamp(30px,4.4vw,72px);font-weight:300;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.ph__l{margin-top:clamp(16px,2vw,30px);font-size:clamp(18px,1.7vw,26px);font-weight:300;line-height:1.5;color:var(--cream-2);max-width:44ch}
.chip{display:inline-flex;align-items:center;gap:10px;height:46px;padding-inline:22px;border-radius:var(--r-s);border:1.5px solid var(--line-2);font-size:16px;font-weight:400;color:var(--cream);background:transparent;transition:background .3s,color .3s,border-color .3s}
.chip i{font-style:normal;font-size:14px;color:var(--cream-3);transition:color .3s}
.chip:hover{border-color:var(--cream)}
.chip.is-on{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.chip.is-on i{color:rgba(0,0,0,.55)}
.ticks{display:grid;gap:12px;margin-block:clamp(18px,2.2vw,30px)}
.ticks li{display:flex;align-items:flex-start;gap:14px;font-size:clamp(16px,1.25vw,18.5px);line-height:1.55;color:var(--cream)}
.ticks .ico{margin-top:4px;width:20px;height:20px;color:var(--cream)}
.ab-n{font-size:14px;font-weight:500;letter-spacing:.14em;color:var(--cream-3)}

/* ---------------------------------------------------------------- ABOUT */
.ab-hero{padding-bottom:clamp(40px,6vw,96px)}
.ab-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,110px);align-items:center}
.ab-hero .manifesto{font-size:clamp(22px,2.3vw,36px);line-height:1.4;margin-top:clamp(20px,2.8vw,40px);max-width:32ch}
.ab-hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:clamp(28px,3.4vw,50px)}
.ab-hero__act .btn{width:auto;min-width:200px}
.ab-hero__act .textlink{margin:0}
.ab-collage{position:relative;aspect-ratio:1/1.1;width:min(100%,560px);justify-self:center}
.ab-collage figure{position:absolute;margin:0;border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:0 30px 70px -24px rgba(0,0,0,.85)}
.ab-img{display:block;width:100%;height:100%;object-fit:cover}
.ab-collage .c1{inset-inline-end:0;inset-block-start:0;width:62%;aspect-ratio:2/3;transform:rotate(2.2deg)}
.ab-collage .c2{inset-inline-start:0;inset-block-end:2%;width:58%;aspect-ratio:3/2;transform:rotate(-3deg)}
.ab-collage .c3{inset-inline-start:6%;inset-block-start:3%;width:30%;aspect-ratio:1;transform:rotate(4deg)}
.ab-why__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);counter-reset:none}
.ab-why__c{display:grid;gap:10px;align-content:start;padding:clamp(22px,2.6vw,40px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.ab-why__c h3{font-size:clamp(22px,2.1vw,32px);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.ab-why__c p{color:var(--cream-2);font-size:clamp(16px,1.2vw,18px);line-height:1.65;max-width:44ch}
.ab-q{margin:clamp(28px,4vw,56px) 0 0;max-width:34ch;font-size:clamp(20px,2.1vw,32px);font-weight:300;line-height:1.4;color:var(--cream-2);padding-inline-start:22px;border-inline-start:2px solid var(--cream-3)}
.ab-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.ab-steps li{display:grid;gap:10px;align-content:start;padding-top:clamp(18px,2vw,28px);border-top:2px solid var(--cream)}
.ab-steps .ab-n{font-size:clamp(40px,4vw,64px);font-weight:300;letter-spacing:-.03em;color:var(--cream);line-height:1}
.ab-steps h3{font-size:clamp(22px,2vw,30px);font-weight:300;line-height:1.2}
.ab-steps p{color:var(--cream-2);font-size:clamp(16px,1.2vw,18px);line-height:1.6;max-width:30ch}
.ab-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:clamp(8px,1vw,14px);align-items:stretch}
.ab-strip__i{display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.ab-strip__i .ab-img{transition:transform 1.2s var(--ease)}
.ab-strip:hover .ab-strip__i .ab-img{transform:scale(1.04)}
.ab-strip__go{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:12px;padding-inline:10px 0;font-size:clamp(16px,1.3vw,20px);font-weight:500;writing-mode:horizontal-tb}
.ab-strip__go .ico{transition:transform .4s var(--ease)}
.ab-strip:hover .ab-strip__go .ico{transform:translateX(-6px)}
.ab-card__in{padding:clamp(30px,5vw,80px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--surface-2),var(--surface) 60%)}
.ab-card__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}
.ab-card__links a{display:inline-flex;align-items:center;gap:12px;height:54px;padding-inline:22px;border-radius:var(--r-s);border:1.5px solid var(--line-2);font-size:17px;transition:background .3s,color .3s,border-color .3s}
.ab-card__links a:hover{background:var(--cream);color:var(--bg);border-color:var(--cream)}
@media (max-width:900px){
  .ab-hero__grid{grid-template-columns:1fr}
  .ab-collage{order:-1;width:min(100%,380px)}
  .ab-why__grid,.ab-steps{grid-template-columns:1fr}
  .ab-strip{grid-template-columns:repeat(5,minmax(46%,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .ab-strip__i{scroll-snap-align:start}
  .ab-strip__go{display:none}
}

/* ---------------------------------------------------------------- GALLERY */
.gl__bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,3.4vw,50px)}
.gl__grp{margin-bottom:clamp(44px,6.4vw,100px)}
.gl__grp[hidden]{display:none}
.gl__h{display:flex;align-items:baseline;gap:16px;font-size:clamp(30px,4vw,64px);font-weight:300;letter-spacing:-.03em;line-height:1;margin-bottom:clamp(16px,2vw,30px)}
.gl__h i{font-style:normal;font-size:clamp(15px,1.3vw,20px);color:var(--cream-3);letter-spacing:0}
.gl__rows{--rh:clamp(170px,19vw,300px);display:flex;flex-wrap:wrap;gap:clamp(8px,1.1vw,16px)}
.gl__rows::after{content:"";flex-grow:999}
.gl__t{flex:calc(var(--ar)*100) 1 calc(var(--ar)*var(--rh));min-width:0;margin:0}
.gal .tile__frame{width:100%;height:auto;aspect-ratio:var(--ar);border-radius:var(--r)}
.gl__all.is-fading{opacity:0;transition:opacity .18s}
.gl__all{transition:opacity .3s}
.gl__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(20px,3vw,48px);padding:clamp(26px,4vw,60px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface)}
.gl__cta .ph__h2{max-width:20ch}
.gl__ctaa{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.gl__ctaa .btn{width:auto;min-width:200px}
.gl__ctaa .textlink{margin:0}
@media (max-width:700px){.gl__rows{--rh:130px}}

/* ---------------------------------------------------------------- SERVICES · what I do and what each service includes (no prices on this page; the prices are on the pricing page) */
.sx-head{padding-bottom:clamp(8px,2vw,24px)}
.sx-menu{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);margin-top:clamp(8px,1vw,16px)}
.sx-menu a{display:grid;gap:12px;transition:transform .5s var(--ease)}
.sx-menu a:hover{transform:translateY(-4px)}
.sx-menu__f{display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.sx-menu__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.sx-menu a:hover .sx-menu__img{transform:scale(1.05)}
.sx-menu__t{display:flex;align-items:baseline;gap:12px}
.sx-menu__t i{font-style:normal;font-size:14px;letter-spacing:.14em;color:var(--cream-3)}
.sx-menu__t b{font-size:clamp(18px,1.45vw,24px);font-weight:300;letter-spacing:-.02em}

.sx__s{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(30px,6vw,110px);align-items:center;padding-block:clamp(44px,7vw,120px);border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 10px)}
.sx__s:nth-of-type(even) .sx__fig{order:2}
.sx__fig{margin:0;aspect-ratio:4/5;max-height:calc(var(--vh) - var(--hdr) - 7vh);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.sx__img{width:100%;height:100%;object-fit:cover;display:block}
.sx__no{font-size:clamp(46px,5vw,84px);font-weight:200;letter-spacing:-.04em;line-height:1;color:var(--cream-3);margin-bottom:clamp(6px,1vw,14px)}
.sx__h{font-size:clamp(32px,3.9vw,60px);font-weight:300;line-height:1.02;letter-spacing:-.035em}
.sx__tag{margin-top:clamp(10px,1.2vw,18px);font-size:clamp(16px,1.35vw,20px);color:var(--cream-2)}
.sx .ticks{margin-block:clamp(18px,2.2vw,32px)}
.sx__up{margin-top:clamp(18px,2vw,28px);font-size:14px;font-weight:500;letter-spacing:.1em;color:var(--cream-3)}
.sx__list{margin-block:10px clamp(18px,2vw,28px);border-top:1px solid var(--line-2)}
.sx__list li{display:grid;gap:3px;padding-block:14px;border-bottom:1px solid var(--line)}
.sx__list b{font-weight:400;font-size:clamp(17px,1.35vw,20px)}
.sx__list span{font-size:15px;line-height:1.6;color:var(--cream-2);max-width:52ch}
.sx__list--plain{margin-top:8px}
.sx__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin-block:clamp(16px,2vw,28px)}
.sx__two h3{font-size:clamp(18px,1.5vw,22px);font-weight:400;margin-bottom:8px}
.sx__two p{font-size:15.5px;line-height:1.65;color:var(--cream-2)}
.sx__body .textlink{margin-top:clamp(6px,1vw,14px)}
.sx__more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);padding-block:clamp(32px,5vw,80px);border-top:1px solid var(--line)}
.sx__card{padding:clamp(22px,2.8vw,40px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.sx__card h2{font-size:clamp(24px,2.4vw,38px);font-weight:300;letter-spacing:-.03em;margin-bottom:6px}
.sx__card--wide{grid-column:1/-1}
.sx__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(18px,2.6vw,40px);margin-block:10px 4px;border-top:1px solid var(--line-2)}
.sx__grid li{display:grid;gap:3px;align-content:start;padding-block:14px;border-bottom:1px solid var(--line)}
.sx__grid b{font-weight:400;font-size:clamp(17px,1.35vw,20px)}
.sx__grid span{font-size:15px;line-height:1.6;color:var(--cream-2)}
.sx__card .textlink{margin-top:14px}
.sx__areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sx__areas li{display:inline-flex;align-items:center;height:42px;padding-inline:18px;border:1px solid var(--line-2);border-radius:var(--r-s);font-size:16px}
.sx__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(8px,2vw,24px);padding:clamp(28px,4.4vw,64px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--surface-2),var(--surface) 62%)}
.sx__cta .ph__h2{max-width:18ch}
.sx__cta .ph__l{max-width:36ch}
.sx__cta-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.sx__cta-act .btn{width:auto;min-width:200px}
.sx__cta-act .textlink{margin:0}
@media (max-width:900px){
  .sx-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx__grid{grid-template-columns:1fr}
  .sx__s{grid-template-columns:1fr}
  .sx__s:nth-of-type(even) .sx__fig{order:0}
  .sx__fig{aspect-ratio:4/3;max-height:none}
  .sx__two,.sx__more{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- PRICING · what it costs: one base price, rows for everything that can be added (grouped lists, like a settings page), tabs to jump, a live offer beside it */
.pr{padding-bottom:clamp(40px,6vw,96px)}
.pr-tabs{display:flex;gap:2px;overflow-x:auto;position:sticky;inset-block-start:var(--hdr);z-index:30;margin:0 calc(var(--gut)*-1) clamp(22px,3vw,40px);padding:0 var(--gut);background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none}
.pr-tabs::-webkit-scrollbar{display:none}
.pr-tabs a{position:relative;display:inline-flex;align-items:center;height:54px;padding-inline:16px;white-space:nowrap;font-size:15.5px;color:var(--cream-3);transition:color .3s}
.pr-tabs a::after{content:"";position:absolute;inset-inline:16px;bottom:-1px;height:2px;background:var(--cream);transform:scaleX(0);transition:transform .4s var(--ease)}
.pr-tabs a:hover,.pr-tabs a.is-here{color:var(--cream)}
.pr-tabs a.is-here::after{transform:scaleX(1)}
.pr-tabs a[hidden]{display:none}
.pr-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,390px);gap:clamp(24px,4.4vw,80px);align-items:start}
.pr-main{min-width:0}
.pr-sec{border:0;padding:0;margin:0 0 clamp(40px,5.4vw,84px);min-width:0;scroll-margin-top:calc(var(--hdr) + 74px)}
.pr-sh{display:block;float:none;width:100%;padding:0;margin-bottom:clamp(14px,1.8vw,24px)}
.pr-h{display:block;font-size:clamp(28px,3.2vw,50px);font-weight:300;letter-spacing:-.035em;line-height:1.05}
.pr-sub{font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--cream-2);margin:clamp(22px,2.6vw,36px) 0 10px}
.pr-note{font-size:15.5px;line-height:1.6;color:var(--cream-2);max-width:62ch;margin:0 0 12px}

/* the event: three segments */
.pr-seg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:6px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:rgba(255,255,255,.03)}
.pr-seg label{position:relative;display:block}
.pr-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.pr-seg span{display:grid;place-items:center;height:60px;border-radius:var(--r);font-size:clamp(17px,1.5vw,21px);color:var(--cream-2);transition:background .3s,color .3s}
.pr-seg input:hover+span{background:rgba(255,255,255,.07);color:var(--cream)}
.pr-seg input:checked+span{background:var(--cream);color:var(--bg);font-weight:500}
.pr-seg input:focus-visible+span{outline:2px solid var(--cream);outline-offset:3px}
/* the personal-quote panel (a wedding, or any other event) */
.pr-note--ev{margin-top:12px}
.pr-quote{margin-top:16px;padding:clamp(18px,2.4vw,30px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(160deg,#1a1a1a,#111 70%);display:grid;gap:18px}
.pr-quote__t{font-size:clamp(18px,1.6vw,24px);font-weight:300;line-height:1.45;max-width:40ch}
.pr-p--rng{font-size:clamp(16px,1.45vw,22px);letter-spacing:-.01em}
.pr-mid[hidden],.pr-quote[hidden],.pr-sub2[hidden],#pbRest[hidden],.pr-f[hidden]{display:none}
.pr-quote .pr-sub{margin-top:0}
.pr-mid .pr-f{margin-top:14px}
.pr-mid .ticks{margin-block:clamp(16px,2vw,22px) 2px;gap:10px}
.pr-mid .ticks li{font-size:15.5px}
.pr-vat{font-size:14px;line-height:1.55;color:var(--cream-3)}

/* the head: the words, and the base price beside them (the answer to "how much" is on the first screen) */
.pr-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:clamp(24px,5vw,90px);align-items:center;margin-bottom:clamp(26px,3.4vw,48px)}
.pr-head .ph{margin-bottom:0}
.pr-head .ph__h{font-size:clamp(46px,6.6vw,112px)}
.pr-base{padding:clamp(22px,2.6vw,38px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(160deg,#1c1c1c,#111 62%)}
.pr-eyebrow{font-size:14px;font-weight:500;letter-spacing:.12em;color:var(--cream-3)}
/* the price menu in the head: every event, the wedding first, each a link that chooses the event below */
.pr-menu{display:grid;margin-top:clamp(6px,.8vw,10px)}
.pr-menu li+li{border-top:1px solid var(--line)}
.pr-menu a{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:clamp(12px,1.3vw,16px) 12px;margin-inline:-12px;border-radius:var(--r);transition:background .3s}
.pr-menu a:hover{background:rgba(255,255,255,.05)}
.pr-menu a span{min-width:0;font-size:clamp(17px,1.35vw,20px);line-height:1.35;color:var(--cream)}
.pr-menu a b{flex:none;font-size:clamp(22px,1.9vw,29px);font-weight:300;letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-from__n{margin-top:clamp(10px,1.2vw,16px);padding-top:clamp(12px,1.4vw,16px);border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--cream-3)}

/* rows */
.pr-box{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.02)}
.pr-box>*+*{border-top:1px solid var(--line)}
.pr-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:clamp(16px,1.8vw,24px) clamp(16px,2vw,28px);cursor:pointer;isolation:isolate}
.pr-row input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.pr-c{display:block;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);transition:background-color .25s,border-color .25s}
.pr-c--sq{border-radius:var(--r-s)}
.pr-t{min-width:0;display:grid;gap:4px}
.pr-t b{font-size:clamp(17px,1.4vw,20px);font-weight:400;line-height:1.35}
.pr-t small{font-size:14.5px;line-height:1.55;color:var(--cream-3);max-width:58ch}
.pr-p{font-size:clamp(21px,1.9vw,29px);font-weight:300;letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-p--inc{font-size:16px;color:var(--cream-3);letter-spacing:0}
.pr-bg{position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.1);opacity:0;transition:opacity .3s}
.pr-bg::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--cream)}
.pr-row:not(.pr-row--ctr):hover{background:rgba(255,255,255,.035)}
.pr-row:hover .pr-c{border-color:var(--cream-3)}
.pr-row input:focus-visible~.pr-c{outline:2px solid var(--cream);outline-offset:3px}
.pr-row input:checked~.pr-bg{opacity:1}
.pr-row input:checked~.pr-c{background:var(--cream) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/15px no-repeat;border-color:var(--cream)}
.pr-row--ctr{grid-template-columns:minmax(0,1fr) auto auto;cursor:default}
.pr-step{display:flex;align-items:center;gap:10px}
.pr-step .round{width:46px;height:46px}
.pr-step .round:hover{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.pr-step output{min-width:2.2ch;text-align:center;font-size:26px;font-weight:300}
.pr-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pr-f{display:grid;gap:6px;font-size:14.5px;color:var(--cream-2)}
.pr-f--w{margin-top:12px}
.pr-f textarea{min-height:96px;padding:14px 16px;border-radius:var(--r);border:1.5px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--cream);font:inherit;font-size:17px;line-height:1.5;resize:vertical;transition:border-color .25s,background .25s}
.pr-f textarea:focus{outline:none;border-color:var(--cream);background:rgba(255,255,255,.08)}
.pr-f input{height:54px;padding-inline:16px;border-radius:var(--r);border:1.5px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--cream);font-size:17px;transition:border-color .25s,background .25s}
.pr-f input:focus{outline:none;border-color:var(--cream);background:rgba(255,255,255,.08)}

/* the offer: beside the list on a computer, a bar at the bottom on a phone */
.pr-sum{position:sticky;inset-block-start:calc(var(--hdr) + 74px);display:grid;gap:14px;padding:clamp(18px,2vw,28px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:rgba(20,20,20,.96);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.pr-sumh{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pr-sumh b{font-size:clamp(20px,1.7vw,26px);font-weight:400}
.pr-tg{display:none;align-items:center;gap:8px;height:38px;padding-inline:14px;border-radius:var(--r-s);border:1.5px solid var(--line-2);font-size:14.5px}
.pr-tg .ico{width:16px;height:16px;transition:transform .35s var(--ease)}
.pr-sum.is-open .pr-tg .ico{transform:rotate(180deg)}
.pr-sumb{max-height:min(44vh,420px);overflow:auto}
.pr-list{display:grid}
.pr-list .pr-gl{display:block;padding-block:12px 4px;border-bottom:0;font-size:12.5px;font-weight:500;letter-spacing:.12em;color:var(--cream-3)}
.pr-list li{display:flex;justify-content:space-between;gap:16px;padding-block:9px;border-bottom:1px dashed var(--line-2);font-size:15px;line-height:1.4;color:var(--cream-2)}
.pr-list li span:last-child{white-space:nowrap;color:var(--cream);font-variant-numeric:tabular-nums}
.pr-tot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;padding-top:4px}
.pr-tot span{font-size:15px;color:var(--cream-2)}
.pr-tot b{font-size:clamp(38px,3.6vw,54px);font-weight:300;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-tot b.is-rng{font-size:clamp(26px,2.2vw,34px);letter-spacing:-.03em}
.pr-sum .btn{width:100%}
.pr-sum .btn[aria-disabled="true"]{opacity:.5;cursor:default}
.pr-sum .btn[aria-disabled="true"]::before{display:none}
.pr-hint{font-size:13.5px;line-height:1.55;color:var(--cream-3)}
.pr-hint a{color:var(--cream);border-bottom:1px solid var(--cream-3)}
@media (max-width:1000px){
  .pr{padding-bottom:150px}
  .pr-form{grid-template-columns:1fr}
  .pr-sum{position:fixed;inset-inline:10px;inset-block-end:calc(10px + env(safe-area-inset-bottom,0px));inset-block-start:auto;z-index:60;grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-areas:"h h" "b b" "t s";gap:10px 14px;padding:12px 14px;border-radius:var(--r-lg);transition:opacity .3s,transform .4s var(--ease),visibility 0s}
  .pr-sum.is-away{opacity:0;visibility:hidden;transform:translateY(20px);pointer-events:none}
  .pr-sumh{grid-area:h}
  .pr-sumh b{font-size:16px}
  .pr-tg{display:inline-flex}
  .pr-sumb{grid-area:b;display:none;max-height:42vh}
  .pr-sum.is-open .pr-sumb{display:block}
  .pr-tot{grid-area:t;flex-direction:column;align-items:flex-start;gap:0;padding:0}
  .pr-tot span{font-size:12.5px}
  .pr-tot b{font-size:28px}
  .pr-tot b.is-rng{font-size:20px}
  .pr-sum .btn{grid-area:s;height:50px;font-size:15px;padding-inline:12px;white-space:normal;line-height:1.1;text-align:center}
  .pr-hint{display:none}
}
@media (max-width:900px){.pr-head{grid-template-columns:1fr;align-items:start}}
@media (max-width:640px){
  .pr-row{gap:12px}
  .pr-row--ctr{grid-template-columns:minmax(0,1fr) auto}
  .pr-row--ctr .pr-step{grid-column:1/-1;justify-self:end}
  .pr-seg{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pr-seg label{grid-column:span 2}
  .pr-seg label:nth-child(n+4){grid-column:span 3}
  .pr-seg span{height:54px;font-size:16px}
}

/* ---------------------------------------------------------------- CONTACT */
.contact{background:var(--bg-2);padding-bottom:0}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.contact__list{display:grid;gap:12px;margin-top:clamp(24px,3vw,44px)}
.contact__list a{display:inline-flex;align-items:center;gap:14px;font-size:clamp(18px,1.6vw,24px);font-weight:300;transition:color .3s,transform .4s var(--ease)}
.contact__list a:hover{color:var(--lens-l);transform:translateX(-6px)}
.contact__list .ico{color:var(--lens-l)}
.form{display:grid;gap:18px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(22px,2.6vw,40px);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.field{position:relative}
.field input{width:100%;height:60px;padding:22px 16px 6px;border-radius:var(--r-s);background:rgba(255,255,255,.07);border:1.5px solid transparent;color:var(--cream);transition:border-color .3s,background .3s}
.field input:focus{outline:none;border-color:var(--lens);background:rgba(255,255,255,.1)}
.field label{position:absolute;inset-inline-start:16px;top:19px;font-size:16px;color:var(--cream-3);pointer-events:none;transition:transform .35s var(--ease),font-size .35s,color .3s;transform-origin:right top}
.field input:focus+label,.field input:not(:placeholder-shown)+label{transform:translateY(-12px);font-size:12px;color:var(--lens-l)}
.field__err{display:block;min-height:0;font-size:13px;color:var(--cream);padding:4px 4px 0}
.field.has-error input{border-color:var(--cream);box-shadow:0 0 0 1px var(--cream)}
.kinds{display:flex;flex-wrap:wrap;gap:8px}
.kinds legend{width:100%;font-size:13px;color:var(--cream-3);margin-bottom:8px}
.kinds label{position:relative}
.kinds input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.kinds span{display:inline-flex;align-items:center;height:42px;padding-inline:18px;border-radius:var(--r-s);border:1.5px solid var(--line-2);font-size:15px;transition:background .3s,color .3s,border-color .3s}
.kinds input:checked+span{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.kinds input:focus-visible+span{outline:2px solid var(--lens-l);outline-offset:3px}
.form__hint{font-size:13.5px;color:var(--cream-3);text-align:center}
.form__hint a{color:var(--cream);border-bottom:1px solid var(--cream-3)}

/* ---------------------------------------------------------------- FOOTER */
.foot{position:relative;background:var(--bg);color:var(--cream);overflow:hidden;padding-top:var(--sec-y);border-top:1px solid var(--line)}
.foot__top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 48px;flex-wrap:wrap;padding-bottom:clamp(36px,4.6vw,68px);border-bottom:1px solid var(--line)}
.foot__line{max-width:19em;font-size:clamp(30px,4.4vw,72px);font-weight:300;line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.foot__line span{color:var(--cream-2)}
.foot__cta{display:inline-flex;align-items:center;gap:14px;height:62px;padding-inline:30px 26px;border-radius:var(--r-s);background:var(--lens);color:var(--on-lens);font-weight:500;font-size:18px;transition:background .3s,color .3s}
.foot__cta:hover{background:var(--cream);color:var(--bg)}
.foot a.foot__cta{color:var(--on-lens)}
.foot a.foot__cta:hover{color:var(--bg)}
.foot__grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:clamp(32px,5vw,96px);align-items:start;padding-block:clamp(36px,5vw,76px)}
.foot__brand img{width:clamp(120px,12vw,176px);height:auto}
.foot__nav,.foot__contact{display:flex;flex-direction:column;gap:12px;font-size:18px}
.foot b{font:500 13px/1 var(--f-mono);letter-spacing:.16em;color:var(--cream-3);margin-bottom:10px;text-transform:uppercase}
.foot a{color:var(--cream);width:max-content;transition:color .3s}
.foot a:hover{color:var(--lens-l)}
.foot__contact .foot__tel{font-size:clamp(26px,2.6vw,40px);font-weight:300;letter-spacing:-.02em}
.social{display:flex;gap:12px;margin-top:10px}
.social a{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r);border:1.5px solid var(--line-2);transition:background .3s,border-color .3s,color .3s}
.social a:hover{background:var(--lens);border-color:var(--lens);color:var(--on-lens)}
.foot__big{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(54px,13.6vw,300px);line-height:.8;letter-spacing:-.03em;white-space:nowrap;text-align:center;margin-block:clamp(8px,2vw,28px) -.08em;user-select:none;background:linear-gradient(to bottom,rgba(255,255,255,.92),rgba(255,255,255,.2) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.5)}
.foot__legal{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px 28px;font-size:14px;color:var(--cream-2);border-top:1px solid var(--line);position:relative;background:var(--bg)}
.totop{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r);border:1.5px solid var(--line-2);color:var(--cream);transition:background .3s,color .3s}
.totop:hover{background:var(--lens);border-color:var(--lens);color:var(--on-lens)}
@media (max-width:760px){
  .foot__top{flex-direction:column;align-items:flex-start}
  .foot__cta{width:100%;justify-content:center}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
  .foot__contact{grid-column:1/-1}
}

/* ---------------------------------------------------------------- VIEWER */
.viewer{position:fixed;inset:0;z-index:100;visibility:hidden;opacity:0;transition:opacity .4s,visibility 0s .4s}
.viewer.is-open{visibility:visible;opacity:1;transition:opacity .4s}
.viewer__scrim{position:absolute;inset:0;background:rgba(10,10,10,.95)}
.gl-on .viewer__scrim{background:transparent}
.viewer__fig{position:absolute;inset:0;margin:auto;display:grid;place-items:center;padding:clamp(60px,9vh,96px) clamp(16px,6vw,110px) clamp(60px,10vh,100px);touch-action:none;cursor:grab}
.viewer__fig:active{cursor:grabbing}
.viewer__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--r);box-shadow:0 40px 120px -30px rgba(0,0,0,.8);user-select:none;-webkit-user-drag:none}
.gl-on .viewer__img{opacity:0}
.viewer__cap{display:none;position:absolute;inset-inline:0;inset-block-end:clamp(14px,3vh,30px);text-align:center;color:var(--cream-2);font-size:15px;padding-inline:80px}
.viewer__btn{position:absolute;z-index:3;display:grid;place-items:center;width:54px;height:54px;border-radius:var(--r);background:rgba(255,255,255,.12);border:1px solid var(--line);color:var(--cream);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s,color .3s,transform .4s var(--ease)}
.viewer__btn:hover{background:var(--lens);color:var(--on-lens)}
.viewer__close{inset-block-start:18px;inset-inline-end:18px}
.viewer__prev{inset-block-start:50%;inset-inline-start:clamp(10px,2vw,28px);margin-top:-27px}
.viewer__next{inset-block-start:50%;inset-inline-end:clamp(10px,2vw,28px);margin-top:-27px}
.viewer__count{position:absolute;inset-block-start:30px;right:var(--gut);z-index:3;color:var(--cream-2);font:500 12px/1 var(--f-mono);letter-spacing:.16em}

/* ---------------------------------------------------------------- WebGL planes: the <img> stays for SEO / fallback but WebGL paints it */
.gl-on img[data-gl="plane"]{opacity:0}
.gl-on .tile__a:hover .tile__img{transform:none}
.gl-on .tile__img{transition:none}
.gl-on .tile__frame.gl-ready,.gl-on .about__fig.gl-ready{background:transparent}
.tile__a:focus-visible{outline-offset:6px;border-radius:var(--r-lg)}
.svc__a:focus-visible{outline-offset:-4px;border-radius:var(--r)}
.hero__cue:focus-visible,.skipj:focus-visible{border-radius:var(--r-s)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .hero__foot{flex-direction:column;align-items:stretch;gap:16px}
  .hero__tag{max-width:46ch}
  .hero__act{justify-content:flex-start}
  .hero__cue{display:none}
  .about__split{grid-template-columns:1fr}
  .about__side{position:relative;inset-block-start:auto;order:-1;max-width:520px}
  .contact__grid{grid-template-columns:1fr}
  .svc__a{grid-template-columns:minmax(0,1fr) auto}
  .svc__p{grid-column:1/-1;grid-row:2}
}
@media (max-width:760px){
  :root{--hdr:64px}
  body{font-size:16px}
  .brand__txt i{display:none}
  .brand__txt b{font-size:16px}
  .pill{height:38px;padding-inline:13px;font-size:13px;gap:8px}
  .brand{gap:9px}
  .brand__chip img{width:46px}
  .hdr__actions{gap:6px}
  .pill--round,.hdr .pill--dark{display:none}
  .menu__nav a{font-size:clamp(34px,6.2vh,52px);gap:14px}
  .menu__foot{font-size:14px;gap:10px 22px}
  .hero__cta-x{display:none}
  .skipj{inset-block-end:auto;inset-block-start:calc(var(--hdr) + 4px);inset-inline-end:auto;inset-inline-start:var(--gut)}
  .hero__title{inset-block-start:max(110px,calc(50vh - 22vw))}
  .hero__t1{font-size:clamp(42px,15vw,86px)}
  .hero__t2{font-size:clamp(42px,15vw,86px)}
  .hero__foot{inset-block-end:calc(18px + env(safe-area-inset-bottom,0px))}
  .hero__tag{max-width:none;font-size:15px}
  .hero__act{justify-content:space-between}
  .hero__cta{flex:1;justify-content:center;height:54px}
  .hero__cue{display:none}
  .about__q{max-width:none}
  .svc__a{grid-template-columns:1fr auto;gap:10px 16px}
  .svc__h{grid-column:1}
  .svc__p{grid-column:1/-1;grid-row:auto}
  .svc__go{grid-column:2;grid-row:2}
  .svc__fig{display:block;grid-column:1/-1;order:5}
  .fab{padding-inline:0;width:52px;height:52px;justify-content:center;inset-inline-end:14px}
  .fab span{display:none}
  .viewer__prev,.viewer__next{inset-block-start:auto;inset-block-end:18px;margin:0}
  .viewer__prev{inset-inline-start:auto;inset-inline-end:calc(var(--gut) + 64px)}
  .viewer__next{inset-inline-end:var(--gut)}
  .viewer__cap{display:none}
  .hero__wallfb .wf{grid-template-columns:repeat(3,minmax(0,1fr));inset:-12% -26%}
  .hero__wallfb .wf>div:nth-child(n+4){display:none}
}
@media (max-height:620px) and (min-width:761px){
  .hero__title{inset-block-start:clamp(96px,17vh,140px)}
  .hero__tag{font-size:15px}
}
@media (max-height:520px) and (orientation:landscape){
  .hero__tag{display:none}
  .hero__cue{inset-block-end:8px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .hero__cue .ico{animation:none}
}

/* ---------------------------------------------------------------- WhatsApp: a small round button that lives in the page gutter (never over content) */
.fab{display:none}
@media (min-width:1101px){
  .foot .fab,.fab{display:grid;place-items:center;width:50px;height:50px;padding:0;gap:0;inset-block-end:calc(24px + env(safe-area-inset-bottom,0px));inset-inline-end:10px;border-radius:var(--r);background:#fff;border:0;color:#000;box-shadow:0 8px 26px -6px rgba(0,0,0,.65)}
  .foot .fab{width:50px}     /* .foot a{width:max-content} would squeeze it into an oval */
  .fab .ico{width:24px;height:24px;color:#000}
  .fab:hover{background:#fff;transform:scale(1.08)}
  .fab:hover .ico{color:#000}
  .fab span{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap;padding:9px 16px;border-radius:var(--r-s);background:var(--cream);color:var(--bg);font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
  .fab:hover span,.fab:focus-visible span{opacity:1;transform:translateY(-50%)}
}

/* ---------------------------------------------------------------- type floor: nothing informational below 13px, body copy 15px+ */
.label{font-size:13px}
.label .num{font-size:13px;min-width:40px;height:28px}
.label span:last-child{font-size:15px}
.brand__txt i{font-size:13px;letter-spacing:.14em}
.svc__no,.why__n,.grp legend span,.menu__nav a i{font-size:13px}
.why__h,.about__cap,.tile__cap,.receipt__tag,.foot b,.viewer__count{font-size:13px}
.receipt__fine,.form__hint,.foot__legal{font-size:14px}
.cursor__label{font-size:13px}
.hero__tag{font-size:clamp(17px,1.4vw,21px);color:rgba(255,255,255,.9)}

/* ---------------------------------------------------------------- phones: journey text sits on a dark gradient, above the thumb zone */
@media (max-width:760px){
}

/* the page's scrollbar: a slim strip of film with a small camera lens riding on it */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
.filmbar{position:fixed;z-index:70;right:10px;top:72px;bottom:12px;width:4px;border-radius:1px;background-color:transparent;box-shadow:inset 0 0 0 1px #2e2e2e;opacity:0;pointer-events:none;transition:opacity .6s ease;cursor:grab;touch-action:none;user-select:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6'%3E%3Crect x='.5' y='2' width='.9' height='2' rx='.3' fill='%23363636' fill-opacity='1'/%3E%3Crect x='2.6' y='2' width='.9' height='2' rx='.3' fill='%23363636' fill-opacity='1'/%3E%3C/svg%3E");background-repeat:repeat-y}
html.is-ready .filmbar{opacity:1;pointer-events:auto}
.viewer-open .filmbar,.menu-open .filmbar{opacity:0!important;pointer-events:none!important}
.filmbar.is-drag{cursor:grabbing}
.filmbar__fill{position:absolute;left:0;right:0;top:0;height:0;background:#000;box-shadow:inset 0 0 0 1px #2e2e2e;border-radius:2px 2px 0 0;pointer-events:none}
.filmbar__lens{position:absolute;left:50%;top:0;width:19px;height:19px;filter:drop-shadow(0 0 0 #000) drop-shadow(0 1px 4px rgba(255,255,255,.18));transition:scale .25s ease;will-change:transform;pointer-events:none}
.filmbar__lens svg{display:block;width:100%;height:100%}
.filmbar:hover .filmbar__lens,.filmbar.is-drag .filmbar__lens{scale:1.15}
@media (max-width:760px){.filmbar{display:none}}

/* ---------------------------------------------------------------- TYPOGRAPHY · ONE typeface (Heebo) and ONE colour (white, in three strengths): light for display, regular for text */
:root{--f-display:var(--f-sans)}
h1,h2,h3,.h2,.hero__t1,.hero__t2,.about__bandh,.pagenext__t,.band__title,.band__price,.manifesto,.foot__line,.homecta .h2,.loader__count,.menu__nav a span,.svc__h,.why h3,.why__h,.opt__box i{font-family:var(--f-sans);font-weight:300;letter-spacing:-.025em}
h3,.svc__h,.why h3,.band__title,.menu__nav a span{font-weight:300}
.about__bandh{text-shadow:none}
.band__price{letter-spacing:-.04em}
.hero__title{text-shadow:none}
/* the small Latin mark: the same typeface, small capitals with air */
.brand__txt i,.loader__top span{font-family:var(--f-sans);font-style:normal;font-weight:400;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-3)}
.brand__txt i{font-size:10.5px}
/* numerals of the sections, rows and chapters speak the same typeface */
.label .num,.why__n,.svc__no,.menu__nav a i,.pagenext__k,.svc__ghost{font-family:var(--f-sans);font-style:normal}
.label .num,.why__n,.svc__no,.menu__nav a i,.pagenext__k{font-weight:400;font-size:13px;letter-spacing:.1em}
.svc__ghost{font-weight:300;letter-spacing:-.02em}

/* ---------------------------------------------------------------- CALM · fewer lines, more air, one hierarchy */
.why{border-top:0}
.why li{border-bottom:0;padding-block:clamp(16px,1.8vw,26px)}
.why__h{font:300 clamp(26px,2.6vw,38px)/1.2 var(--f-display);letter-spacing:-.01em;text-transform:none;color:var(--cream);margin-bottom:clamp(8px,1.4vw,20px)}
.svc__list{border-top:0}
.svc__row{border-bottom:1px solid rgba(255,255,255,.09)}
.opts{border-top-color:rgba(255,255,255,.1)}
.opt{border-bottom-color:rgba(255,255,255,.08)}
.opt__box i{font-family:var(--f-display);font-weight:300;letter-spacing:-.01em}
.step{border-top-color:rgba(255,255,255,.1)}
.pagenext__a{border-block-color:rgba(255,255,255,.12)}
.rv__thumb{opacity:.68}
.foot__top,.foot__legal{border-color:rgba(255,255,255,.08)}

/* ---------------------------------------------------------------- FINAL · black and white, a fixed solid top bar, moderate type sizes, one spacing rhythm */
:root{--hdr:64px;--sec-y:clamp(56px,6vw,96px);--head-gap:clamp(32px,3.6vw,52px)}
body{font-size:16px}

/* the top bar: attached to the top edge, always there; a soft veil over the hero, frosted glass after scrolling */
.hdr{height:var(--hdr);padding-inline:var(--gut)}
.hdr.is-hidden,.hdr.is-solid{transform:none}
.brand__chip img{width:50px}
.brand__txt b{font-size:16px}
.brand__txt i{font-size:13px}
.hdr__nav a{font-size:15px}
.pill{height:38px;font-size:14px}
.pill--dark{background:#fff;color:#000}
.pill--dark::before{background:#d9d9d9}
.btn--wa{background:#fff;color:#000}

/* moderate headings: the photographs are the stars */
h1,.h2,.gal .h2,.homecta .h2{font-size:clamp(32px,3.6vw,52px);line-height:1.12;letter-spacing:-.01em}
.about__bandh{font-size:clamp(40px,5.4vw,76px);line-height:1}
.manifesto{font-size:clamp(22px,2.1vw,32px);line-height:1.4}
.about__q{font-size:clamp(17px,1.4vw,21px)}
.why__h{font-size:clamp(22px,2vw,30px)}
.why h3{font-size:clamp(19px,1.5vw,24px)}
.svc__h{font-size:clamp(26px,2.5vw,38px)!important}
.band__title{font-size:clamp(30px,3.2vw,48px)}
.band__price{font-size:clamp(64px,7vw,108px)}
.opt__box b{font-size:clamp(17px,1.3vw,20px)}
.opt__box i{font-size:clamp(24px,2.3vw,32px)}
.pagenext__t{font-size:clamp(28px,3.2vw,46px)}
.foot__line{font-size:clamp(24px,2.5vw,36px)}
.lead{font-size:clamp(16px,1.2vw,19px)}
.hero__tag{font-size:clamp(15px,1.15vw,18px)}

/* one rhythm: every section has the same padding, every heading the same gap below it */
.sec{padding-block:var(--sec-y)}
.h2,h1.h2{margin-bottom:0}
.rev__head{margin-bottom:var(--head-gap)}
.gal .h2{margin-bottom:var(--head-gap)}
/* about: each reason is a title with its text below it (one column, on every screen) */
.why li{display:block}
.why li h3{margin-bottom:8px}
.why p{max-width:52ch}