/* Ananta — shared design system (redesign, branch only). Self-hosted Fraunces + General
   Sans, warm-neutral editorial palette, cinematic full-bleed sections. Used by the new
   landing + subpages. Motion engine in /site.js (GSAP + Lenis). Cookie-free. */

/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-wght-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'General Sans';src:url('/fonts/general-sans-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-grotesk-normal.woff2?v=2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-grotesk-italic.woff2?v=2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}

:root{
  --cream:#F4EFE8;--cream-2:#EAE2D5;--ink:#1B1712;--soft:#6E655A;--line:#D9CFC1;
  --dark:#14100C;--accent:#9C7B58;
  --serif:'Fraunces',Georgia,'Times New Roman',serif; /* display family back to Fraunces serif per Ivana 14.7. (more lux, HBA-like) */
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,90px);--ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--cream);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{display:block;max-width:100%}
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none} /* no play glyph when iOS blocks autoplay (Low Power Mode); site.js retries on first touch */
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
::selection{background:var(--ink);color:var(--cream)}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}

/* film grain */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
.lab-flag{position:fixed;left:12px;bottom:12px;z-index:95;background:rgba(20,16,12,.78);color:#fff;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:100px;backdrop-filter:blur(6px)}

/* type primitives */
.eyebrow{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--soft)}
.display{font-family:var(--serif);font-weight:450;line-height:1.06;letter-spacing:-.015em}
.lede{font-family:var(--serif);font-weight:330;font-size:clamp(22px,2.6vw,32px);line-height:1.35}
.sensory{font-family:var(--serif);font-style:italic;font-weight:360;font-size:clamp(18px,2vw,24px);line-height:1.45}
.ln{will-change:transform}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,2.4vw,30px) var(--pad);color:#fff;mix-blend-mode:difference;transition:transform .5s var(--ease)}
.nav.hide{transform:translateY(-130%)}
.nav__brand{font-family:var(--serif);font-weight:360;font-size:21px;letter-spacing:.32em;text-transform:uppercase;display:flex;align-items:center}
.nav__logo{display:block;width:clamp(48px,5vw,62px);height:clamp(48px,5vw,62px);background-color:currentColor;-webkit-mask:url(/ananta-seal.png) center/contain no-repeat;mask:url(/ananta-seal.png) center/contain no-repeat;filter:drop-shadow(0 1px 10px rgba(0,0,0,.32))}
.nav__links{display:flex;gap:clamp(20px,3vw,46px);align-items:center;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.nav__links a{opacity:1;transition:opacity .3s}.nav__links a:hover{opacity:.55}
.nav__cta{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;border:1px solid currentColor;border-radius:100px;padding:9px 20px;transition:opacity .3s}
.nav__cta:hover{opacity:.65}
@media(max-width:860px){.nav__links{display:none}}

/* Projects dropdown — pure CSS (hover / focus-within). Plain text, no panel: the nav runs
   mix-blend difference, a solid background would invert; bare text stays legible anywhere. */
.nav__drop{position:relative;display:flex;align-items:center}
.nav__drop>a{display:inline-flex;align-items:center}
.nav__caret{width:9px;height:6px;margin-left:7px;transition:transform .3s var(--ease)}
.nav__drop:hover .nav__caret,.nav__drop:focus-within .nav__caret{transform:rotate(180deg)}
.nav__dropdown{position:absolute;top:100%;left:0;padding-top:16px;display:flex;flex-direction:column;gap:12px;white-space:nowrap;font-size:11px;letter-spacing:.14em;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.nav__drop:hover .nav__dropdown,.nav__drop:focus-within .nav__dropdown{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}

/* hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--dark)}
.hero__media{position:absolute;inset:-15% 0}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.34) 0%,rgba(10,8,6,.10) 32%,rgba(10,8,6,.18) 60%,rgba(10,8,6,.60) 100%)}
.hero__inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(86px,15vh,150px);color:#fff}
.hero .eyebrow{color:rgba(255,255,255,.82);margin-bottom:22px}
.hero__wordmark{display:block;width:min(62vw,720px);aspect-ratio:782.5 / 153;background-color:#fff;-webkit-mask:url(/ananta-wordmark.svg) center/contain no-repeat;mask:url(/ananta-wordmark.svg) center/contain no-repeat;filter:drop-shadow(0 3px 32px rgba(10,8,6,.42));margin-bottom:clamp(18px,2.4vh,28px)}
.hero__tag{font-family:var(--serif);font-weight:340;font-size:clamp(19px,2.2vw,30px);line-height:1.22;letter-spacing:-.01em;max-width:22ch;color:#fff;text-shadow:0 2px 28px rgba(10,8,6,.46)}
.hero__sub{margin-top:26px;font-weight:300;font-size:clamp(15px,1.5vw,18px);color:rgba(255,255,255,.8);max-width:36ch}
/* landing hero — osmo-style cut-out parallax: palm-free bg plate (far) / dark wordmark+tagline (mid) /
   palm cutout (near) / cream fade (front, bottom). At rest the fg palms sit over the empty plate so it
   reads as one beach photo; on scroll the layers drift at different rates (plate lags, wordmark rises,
   palms rise fastest) and the wordmark is sandwiched between them. The bottom fades into the cream
   "Who we are" section so the sand/ground connects to the page below. Scoped to .hero--cutout so the
   shared .hero/.hero__inner/.hero__scrim used by the subpages stay untouched. */
.hero--cutout{background:var(--cream)}
.hero__layer{position:absolute;inset:0;will-change:transform}
.hero__layer picture{display:contents}
.hero__layer img{width:100%;height:100%;object-fit:cover;display:block}
.hero--cutout .hero__bg{z-index:1}
.hero--cutout .hero__bg img{transform:scale(1.2)}
.hero--cutout .hero__fg{z-index:4;pointer-events:none}
.hero--cutout .hero__fg img{transform:scale(1.2)}
/* light atmosphere only — the centre sky stays bright so the dark wordmark reads. soft corner lift + faint top shade, no centre darkening */
.hero--cutout .hero__scrim{z-index:2;background:radial-gradient(125% 80% at 50% 34%,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 46%),linear-gradient(180deg,rgba(22,30,36,.14) 0%,rgba(22,30,36,0) 22%,rgba(22,30,36,0) 100%)}
/* wordmark group sits in the open upper-centre sky — biased up off the geometric centre via the large padding-bottom */
.hero--cutout .hero__inner{z-index:3;justify-content:center;align-items:center;text-align:center;padding:0 var(--pad) clamp(120px,24vh,260px)}
.hero--cutout .hero__wordmark{width:min(48vw,580px);background-color:var(--ink);filter:drop-shadow(0 1px 22px rgba(20,24,28,.16));margin-bottom:clamp(14px,2.2vh,24px)}
.hero--cutout .hero__tag{max-width:26ch;color:var(--ink);text-shadow:none;opacity:.8}
/* the sand/ground dissolves into the cream "Who we are" section below — osmo "the ground connects to the page" */
.hero--cutout .hero__fade{position:absolute;left:0;right:0;bottom:-1px;height:42%;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(244,239,232,0) 0%,rgba(244,239,232,.4) 50%,rgba(244,239,232,.9) 85%,var(--cream) 100%)}
.hero--cutout .scrollcue{z-index:6;color:rgba(27,23,18,.55)}
.hero--cutout .scrollcue span{background:linear-gradient(rgba(27,23,18,.5),rgba(27,23,18,0))}
/* mobile: portrait composition (palm crowns frame the top corners, see /hero-bali*-m.webp). Barely scale so the framing palms aren't cropped; logo drops into the open mid-sky between palms and beach */
@media(max-width:768px){
  .hero--cutout .hero__bg img{transform:scale(1.03)}
  .hero--cutout .hero__fg img{transform:scale(1.03)}
  .hero--cutout .hero__inner{justify-content:center;padding:0 var(--pad) clamp(40px,9vh,90px)}
  .hero--cutout .hero__fade{height:32%}
}
/* landing hero — video loop: two stacked <video> elements, /site.js crossfades 4 clips between
   them. Keeps the approved centred wordmark composition from the cutout hero, but white over
   footage. Scoped to .hero--video; the cutout rules above stay for easy revert. */
.hero--video .hero__media{inset:0}
.hero--video .hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.hero--video .hero__media video.is-active{opacity:1}
/* readability on bright clips (terraces, Kelingking): a centred radial pool of shade behind the
   wordmark/copy block, on top of the usual top/bottom linear shade — edges of the footage stay lively */
.hero--video .hero__scrim{background:radial-gradient(120% 70% at 50% 46%,rgba(10,8,6,.42) 0%,rgba(10,8,6,.18) 48%,rgba(10,8,6,0) 72%),linear-gradient(180deg,rgba(10,8,6,.34) 0%,rgba(10,8,6,.10) 34%,rgba(10,8,6,.16) 62%,rgba(10,8,6,.52) 100%)}
.hero--video .hero__inner{justify-content:center;align-items:center;text-align:center;padding:0 var(--pad) clamp(60px,10vh,120px)}
.hero--video .hero__wordmark{width:min(48vw,580px)}
.hero--video .hero__tag{max-width:30ch}
.hero--video .hero__sub{max-width:52ch;margin-left:auto;margin-right:auto;text-shadow:0 1px 18px rgba(10,8,6,.5)}
@media(max-width:768px){.hero--video .hero__wordmark{width:min(72vw,420px)}}

/* subpage hero — scroll-expansion: the video starts as a centred card and grows to full-bleed
   as you scroll (clip-path scrub in /site.js). Scoped to .hero--expand; landing hero untouched.
   No-JS / reduced-motion: the .js-gated rules drop, leaving a normal full-bleed hero. */
.hero--expand{background:var(--dark)}
.hero--expand .hero__stage{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero--expand .hero__media{inset:0}
.hero--expand .scrollcue{z-index:6}
.js .hero--expand .hero__media{clip-path:inset(12% 10% 23% 10% round 14px);will-change:clip-path}
@media(max-width:768px){
  .js .hero--expand .hero__media{clip-path:inset(8% 5% 25% 5% round 12px)}
}
/* subpage hero identity — the project brand reads as the title card (Ananta wordmark +
   place word, big), so it's unmistakable which project you're on. Mirrors the landing
   showcase lockup. The tagline sits below as a supporting line, not a competing headline. */
.hero--expand .hero__brand{font-family:var(--serif);font-weight:330;font-size:clamp(40px,6.6vw,90px);line-height:1;color:#fff;margin:0 0 clamp(14px,2.2vh,22px);text-shadow:0 2px 26px rgba(10,8,6,.42)}
.hero__brandmark{display:inline-block;height:.96em;width:calc(.96em * 782.5 / 153);vertical-align:baseline;background-color:#fff;-webkit-mask:url(/ananta-wordmark.svg) left center/contain no-repeat;mask:url(/ananta-wordmark.svg) left center/contain no-repeat;margin-right:.26em;position:relative;top:.05em;filter:drop-shadow(0 2px 20px rgba(10,8,6,.4))}
.hero__brand-place{font-size:.62em}
.hero__tagline{font-family:var(--serif);font-weight:340;font-size:clamp(18px,1.9vw,27px);line-height:1.2;letter-spacing:-.01em;color:rgba(255,255,255,.9);max-width:26ch;text-shadow:0 2px 22px rgba(10,8,6,.4)}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:rgba(255,255,255,.7);font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px}
.scrollcue span{width:1px;height:42px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* section shells */
.section{padding:clamp(90px,15vh,200px) var(--pad)}
.section--cream{background:var(--cream)}.section--dark{background:var(--dark);color:#fff}
.wrap{max-width:1180px;margin:0 auto}.wrap--narrow{max-width:880px}

/* prolog: landing dropped its prolog section, but subpage intros still are <section class="prolog"> */
.prolog{background:var(--cream);padding:clamp(100px,18vh,210px) var(--pad)}
.prolog__head{font-size:clamp(34px,6vw,84px)}
.prolog__body{max-width:60ch;margin-top:40px;font-size:clamp(17px,1.4vw,20px);color:#473f36}
.prolog__body p+p{margin-top:18px}

/* projects = full-bleed cinematic cards */
.project{position:relative;height:92svh;min-height:620px;overflow:hidden;display:block;color:#fff}
.project__media{position:absolute;inset:0}
.project__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.4s var(--ease)}
.project:hover .project__media img{transform:scale(1.09)}
.project__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,4,.2),rgba(8,6,4,0)35%,rgba(8,6,4,.78))}
.project__body{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) clamp(46px,7vh,86px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px}
.project__status{font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:18px}
.project__name{font-family:var(--serif);font-weight:330;font-size:clamp(38px,6vw,86px);line-height:1;color:#fff}
/* "Ananta" rendered as the wordmark logo — it's the dominant brand mark, with the place
   word ("Villas"/"Canggu") set smaller and tucked on the same baseline. Recolored via
   currentColor (mask technique, same as nav/hero). em units keep both scaling with the
   responsive heading. The sr-only "Ananta " inside keeps the h2 reading "Ananta Villas". */
.project__brandmark{display:inline-block;height:.96em;width:calc(.96em * 782.5 / 153);vertical-align:baseline;background-color:currentColor;-webkit-mask:url(/ananta-wordmark.svg) left center/contain no-repeat;mask:url(/ananta-wordmark.svg) left center/contain no-repeat;margin-right:.26em;position:relative;top:.05em}
.project__place{font-size:.68em}
.project__meta{list-style:none;font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;color:rgba(255,255,255,.82);text-align:right;line-height:1.9}
.project__cta{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:5px}

/* ---------------------------------------------------------------------------
   Project showcase — hba-style cover-stack. One pinned caption per project; the
   lead image is full-bleed, each following image is smaller (contained) and slides
   UP to COVER the previous, which stays behind dimmed — the soft overlap that reads
   as a blend ("přelínání"). Motion layout (sticky + stacked absolute layers) is gated
   on .js; without JS / reduced motion the images simply flow, caption pinned at the foot. */
.showcase{position:relative;background:var(--dark);color:#fff}
.showcase__sticky{position:relative;display:block;color:inherit;background:var(--dark)}
.showcase__media{position:relative}
.showcase__shot{position:relative;display:block;margin:0}
.showcase__shot img{display:block;width:100%;height:auto;object-fit:cover}
.showcase__shot--inset{padding:6svh clamp(28px,8vw,120px)}
.showcase__dim{display:none}
.showcase__scrim{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(8,6,4,.34),rgba(8,6,4,0)26%,rgba(8,6,4,0)50%,rgba(8,6,4,.84))}
.showcase__count{position:absolute;z-index:5;right:var(--pad);top:clamp(90px,14vh,130px);font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.62)}
.showcase__body{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:0 var(--pad) clamp(46px,7vh,86px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px}
/* motion layout: pin the viewport, stack the images as full-screen layers.
   Each inset's figure is transparent and only its contained image rides up; the
   dimming is a separate, NON-moving layer (.showcase__dim) that fades in over the
   scene behind it — so the background darkens in place (like hba) instead of a hard
   shadow edge sliding up with the image. */
.js .showcase{height:240vh}
.js .showcase__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.js .showcase__media{position:absolute;inset:0}
.js .showcase__shot{position:absolute;inset:0;display:grid;place-items:center;will-change:transform}
.js .showcase__shot--lead{padding:0}
.js .showcase__shot--lead img{width:100%;height:100svh}
.js .showcase__shot--inset{padding:0 0 13svh;background:transparent}
.js .showcase__shot--inset img{width:min(76vw,1180px);height:62svh}
.js .showcase__dim{display:block;position:absolute;inset:0;background:#080a09;opacity:0;pointer-events:none}
@media(max-width:768px){
  .js .showcase{height:220vh}
  .js .showcase__shot--inset{padding:0 0 16svh}
  .js .showcase__shot--inset img{width:88vw;height:54svh}
  .showcase__body{flex-direction:column;align-items:flex-start}
  /* on mobile the stacked caption rides up onto the image — strengthen the lower scrim so
     the eyebrow/name keep contrast instead of blending into a bright photo */
  .showcase__scrim{background:linear-gradient(180deg,rgba(8,6,4,.42),rgba(8,6,4,0)20%,rgba(8,6,4,0)30%,rgba(8,6,4,.55)56%,rgba(8,6,4,.93))}
}

/* panels (day-in-life / lifestyle) */
.panel{position:relative;height:100svh;min-height:600px;overflow:hidden}
.panel__media{position:absolute;inset:0}
.panel__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.panel__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,4,.18),rgba(8,6,4,0)40%,rgba(8,6,4,.72))}
.panel__cap{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) clamp(54px,9vh,110px);color:#fff;max-width:760px}
.panel__title{font-family:var(--serif);font-weight:330;font-size:clamp(34px,5.2vw,78px);line-height:1.05;color:#fff;margin-bottom:22px}
.panel__sensory{color:rgba(255,255,255,.88);max-width:40ch}

/* invest */
.invest .eyebrow{margin-bottom:30px}
.invest__head{font-size:clamp(30px,4.4vw,60px);max-width:18ch}
.invest__lead{max-width:54ch;margin-top:28px;font-size:clamp(17px,1.4vw,20px);color:#473f36}
.invest__close{margin-top:38px;font-family:var(--serif);font-weight:340;font-size:clamp(19px,1.9vw,26px);line-height:1.3;max-width:34ch}
.kpis{display:flex;flex-wrap:wrap;gap:clamp(30px,5vw,80px);margin-top:60px;border-top:1px solid var(--line);padding-top:44px}
.kpi{display:flex;flex-direction:column;gap:8px}
.kpi .num{font-family:var(--serif);font-weight:350;font-size:clamp(38px,4.4vw,62px);line-height:1}
.kpi .num small{font-size:.5em;vertical-align:super;color:var(--accent)}
.kpi .cap{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--soft)}
.faq{margin-top:70px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;font-family:var(--serif);font-weight:380;font-size:clamp(19px,2vw,26px);display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:24px;color:var(--soft);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 28px;max-width:68ch;color:#473f36}
.invest__cta-row{margin-top:60px}

/* gallery — static render tiles (villas), no lightbox by design */
.gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery__grid img{width:100%;aspect-ratio:12/7;object-fit:cover}
@media(max-width:768px){.gallery__grid{grid-template-columns:1fr;gap:10px}}

/* ghost / solid buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.18em;text-transform:uppercase;border-radius:100px;padding:16px 34px;cursor:pointer;border:1px solid var(--ink);background:none;color:var(--ink);transition:background .4s var(--ease),color .4s var(--ease)}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn svg{width:15px;height:15px}
.btn--light{border-color:#fff;color:#fff}.btn--light:hover{background:#fff;color:var(--ink)}

/* partners / ticker */
.ticker{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;margin-top:48px;font-family:var(--sans);font-size:13px;letter-spacing:.03em;color:var(--soft)}
.ticker strong{color:var(--ink);font-weight:600}

/* contact */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.contact__photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.contact__credit{margin-top:16px;font-family:var(--sans);font-size:13px;color:var(--soft)}
.contact__credit strong{display:block;font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:380;letter-spacing:0}
.contact h2{font-size:clamp(28px,3.6vw,48px);max-width:16ch}
.contact p{margin-top:22px;max-width:46ch;color:#473f36}
.contact__lines{margin-top:34px;display:flex;flex-direction:column;gap:4px}
.contact__lines label{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-top:16px}
.contact__lines a{font-family:var(--serif);font-size:clamp(18px,1.8vw,22px);font-weight:360}
@media(max-width:780px){.contact__grid{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--cream);border-top:1px solid var(--line);padding:46px var(--pad);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--soft)}
.foot__brand{display:inline-block;height:16px;width:calc(16px * 782.5 / 153);background-color:var(--ink);-webkit-mask:url(/ananta-wordmark.svg) left center/contain no-repeat;mask:url(/ananta-wordmark.svg) left center/contain no-repeat}
.foot__note{max-width:48ch}
.foot__right{display:flex;align-items:center;gap:22px}
.foot__link{color:var(--soft);transition:color .25s}
.foot a:hover{color:var(--ink)}
.social-ig{display:inline-flex;opacity:.7;transition:opacity .25s}.social-ig:hover{opacity:1}

/* lead capture modal (carried from live, restyled) */
.modal{position:fixed;inset:0;background:rgba(20,16,12,.62);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(5px)}
.modal.open{display:flex}
.modal__box{background:var(--cream);max-width:560px;width:100%;padding:46px 40px;position:relative;max-height:90vh;overflow-y:auto}
.modal__x{position:absolute;top:14px;right:18px;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.modal h3{font-family:var(--serif);font-weight:360;font-size:32px;letter-spacing:0;margin-bottom:8px}
.modal__lead{color:var(--soft);font-size:15px;margin-bottom:26px}
.modal label{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin:16px 0 4px}
.modal input{width:100%;padding:11px 0;background:none;border:0;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:16px;color:var(--ink);outline:none}
.modal input:focus{border-bottom-color:var(--ink)}
.modal__check{display:flex;align-items:flex-start;gap:10px;margin-top:18px;cursor:pointer}
.modal__check input{width:auto;margin-top:4px;flex-shrink:0}
.modal__check span{flex:1;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--soft);text-transform:none;letter-spacing:normal}
.modal__check em{font-style:normal;opacity:.6;font-size:11px}
.modal__check a{color:var(--ink);text-decoration:underline}
.modal__send{margin-top:26px;width:100%;background:var(--ink);color:var(--cream);border:0;padding:15px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.modal__send:hover{background:#000}
.modal__success{text-align:center}.modal__success .tick{font-size:48px;color:#8b9779;margin-bottom:10px}
.modal__error{margin-top:14px;color:#a23b3b;font-size:13px;line-height:1.45}
.modal__pack-link{display:inline-block;margin:10px 6px 0;padding:12px 26px;border:1px solid var(--ink);font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.modal__pack-link:hover{background:var(--ink);color:var(--cream)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.cf-turnstile-target{margin-top:18px;min-height:65px}

@media(max-width:768px){
  body{font-size:16px}
  .hero__wordmark{width:78vw}
  .hero__tag{font-size:clamp(17px,4.4vw,22px)}
  .panel__title,.project__name,.hero--expand .hero__brand{font-size:clamp(30px,8.4vw,46px)}
  .prolog__head,.invest__head{font-size:clamp(28px,8vw,40px)}
  .lede{font-size:inherit;line-height:inherit} /* mobile keeps two type sizes only (Ivana 14.7.) */
  .project__body{flex-direction:column;align-items:flex-start}.project__meta{text-align:left}
  .panel,.hero,.project{min-height:520px}
}
@media(prefers-reduced-motion:reduce){
  html.js [data-hero-line]{opacity:1!important;transform:none!important}
  .panel__media,.project__media img,.panel__media img{transform:none!important;clip-path:none!important}
  .scrollcue span{animation:none}.grain{display:none}
  *{scroll-behavior:auto!important}
}

/* ============ Redesign additions (Claude Code): mobile nav, proof bar, team, contact actions ============ */

/* Mobile nav: burger in the bar + full-screen overlay. Burger shows <=860px (where .nav__links hide). */
.nav__right{display:flex;align-items:center;gap:clamp(10px,1.5vw,16px)}
.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;background:none;border:0;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
.nav__burger span{display:block;width:24px;height:1.5px;background:currentColor}
/* HBA-like rows (Ivana 14.7.): uniform uppercase items, hairline dividers, chevron on the expandable row */
.navmenu{position:fixed;inset:0;z-index:90;background:var(--cream);color:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);transform:translateY(-100%);visibility:hidden;transition:transform .5s cubic-bezier(.7,0,.2,1),visibility 0s linear .5s}
.navmenu.open{transform:translateY(0);visibility:visible;transition:transform .5s cubic-bezier(.7,0,.2,1),visibility 0s}
.navmenu a,.navmenu__drop summary{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);padding:19px 2px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.navmenu>a:first-of-type{border-top:1px solid var(--line)}
.navmenu__drop{border-bottom:1px solid var(--line)}
.navmenu__drop summary{list-style:none;cursor:pointer;border-bottom:0;-webkit-tap-highlight-color:transparent}
.navmenu__drop summary::-webkit-details-marker{display:none}
.navmenu__caret{width:11px;height:7px;transition:transform .35s var(--ease)}
.navmenu__drop[open] .navmenu__caret{transform:rotate(180deg)}
.navmenu__drop[open]{padding-bottom:12px}
.navmenu a.navmenu__sub{border-bottom:0;padding:7px 2px 7px 20px;font-size:12px;letter-spacing:.18em;color:#473f36}
.navmenu__close{position:absolute;top:18px;right:20px;padding:10px;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
@media(max-width:860px){.nav__burger{display:flex}}
@media(min-width:861px){.navmenu{display:none}}

/* Team / who builds and runs it: named-operator trust block */
.team__head{font-size:clamp(30px,4.4vw,58px);max-width:16ch}
.team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.5vw,40px);margin-top:clamp(40px,6vh,72px)}
.team__item{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--ink);padding-top:18px}
.team__role{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.team__item strong{font-family:var(--serif);font-weight:360;font-size:clamp(20px,2vw,27px);color:var(--ink);letter-spacing:.01em}
.team__item a{border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .25s}
.team__item a:hover{border-bottom-color:var(--ink)}
.team__note{font-family:var(--sans);font-size:13px;color:var(--soft);line-height:1.45}
@media(max-width:760px){.team__grid{grid-template-columns:1fr 1fr;gap:24px}}

/* Contact: primary pack CTA + secondary call / WhatsApp */
.contact__actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.news__cta{margin-top:38px}
.btn--ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* Who we are — brand-level intro (hba-style editorial), sits right under the hero */
.brandintro{background:var(--cream);padding:clamp(90px,16vh,180px) var(--pad);border-bottom:1px solid var(--line)}
.brandintro__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,86px);align-items:start}
.brandintro__head{font-size:clamp(30px,4.2vw,58px);max-width:15ch}
.brandintro__body{padding-top:clamp(6px,1vw,16px)}
.brandintro__body .lede{margin-bottom:22px}
/* "Ananta" rendered as the wordmark logo inline in the lede (mask + currentColor, same technique as nav/showcase) */
.brandmark-inline{display:inline-block;height:.66em;width:calc(.66em * 782.5 / 153);background-color:currentColor;-webkit-mask:url(/ananta-wordmark.svg) left center/contain no-repeat;mask:url(/ananta-wordmark.svg) left center/contain no-repeat;vertical-align:baseline;position:relative;top:.02em;margin-right:.14em}
.brandintro__img{margin-top:clamp(50px,8vh,100px);width:100%;aspect-ratio:16 / 7;overflow:hidden}
.brandintro__img--video{aspect-ratio:16 / 9}
.brandintro__img img,.brandintro__img video{width:100%;height:100%;object-fit:cover}
.brandintro__img--zoom{aspect-ratio:2 / 1}
.brandintro__img--zoom img{animation:slowzoom 50s ease-in-out infinite alternate}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){.brandintro__img--zoom img{animation:none}}
@media(max-width:860px){.brandintro__grid{grid-template-columns:1fr;gap:22px}.brandintro__img{aspect-ratio:16 / 10}.brandintro__img--video{aspect-ratio:4 / 3}.brandintro__img--zoom{aspect-ratio:4 / 3}}

/* For-investors bridge: the life → the return, with a clear, prominent deck CTA */
.bridge{text-align:center}
.bridge__inner{max-width:780px;margin:0 auto}
.bridge__head{font-size:clamp(32px,5vw,68px);margin-top:8px}
.bridge__lead{margin:26px auto 0;max-width:52ch;font-size:clamp(16px,1.3vw,19px);color:#473f36}
.bridge__cta{margin-top:42px;display:flex;flex-direction:column;align-items:center;gap:14px}
.bridge__cta-note{font-family:var(--sans);font-size:13px;letter-spacing:.01em;color:var(--soft)}
.btn--lg{padding:19px 42px;font-size:14px}