/* A-VADH: styles
   The page is laid out on the Figma canvas, 666 units wide. 1rem == 1 Figma pixel, and the root
   font-size scales the whole canvas to the viewport (capped at 1440px wide), so proportions
   always match the design. Add ?proto to the URL to render at exactly 1px per unit. */

:root {
  --bg: #000;
  --ink: #f2f2f2;
  --accent: #f26a21;
  --accent-deep: #cc5500;
  --font-display: "Roboto", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-hindi: "Noto Sans Devanagari", "Inter", sans-serif;
}
@property --glow { syntax: '<color>'; inherits: true; initial-value: rgba(0, 0, 0, 0); }
@property --grid { syntax: '<color>'; inherits: true; initial-value: rgba(0, 0, 0, 0); }
html { font-size: calc(min(100vw, 1440px) / 666); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.proto { font-size: 1px; scrollbar-width: none; scroll-behavior: auto; }
html.proto::-webkit-scrollbar { display: none; }
html.proto .site-header { position: absolute; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: #d6d6d6; font: 340 8rem/11.2rem var(--font-body); overflow-x: hidden; }
img { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--accent); color: #000; padding: 6px 10px; border-radius: 6px; font: 12px var(--font-body); }
.skip-link:focus { top: 8px; }
img.is-missing { visibility: hidden; }

/* ---- canvas ---- */
.page { position: relative; width: 666rem; height: 5525rem; margin-inline: auto; overflow: hidden; background: #000; }
.page > main > section { position: absolute; left: 0; width: 666rem; }
.page > main > section > * { position: absolute; }
.hero { top: 0; height: 470rem; }
.story { top: 470rem; height: 440rem; }
.products { top: 910rem; height: 2630rem; }
.philosophy { top: 3540rem; height: 550rem; }
.house { top: 4090rem; height: 710rem; overflow: visible; }
.contact { top: 4800rem; height: 725rem; }
.art { pointer-events: none; user-select: none; }

/* x positions were measured from screenshots; this trims the 2-unit systematic offset found when overlaying the Figma prototype */
.page > main > section > *:not(.ghost-title):not(.footer-art):not(.hero-fort):not(.podium):not(.contact-form), .product > * { margin-left: -2rem; }

/* ---- shared ---- */
.label { font: 620 8rem/11.2rem var(--font-body); color: #fff; }
.ghost-title {
  left: 0; width: 666rem; height: 84rem; display: block; overflow: visible;
  font: 900 84rem/84rem var(--font-display); text-transform: uppercase; white-space: nowrap; user-select: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 18%, rgba(0, 0, 0, 0) 92%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 18%, rgba(0, 0, 0, 0) 92%);
  color: #fff;
}
.ghost-title .t { display: inline-block; letter-spacing: var(--ls, .2em); }
.story .ghost-title { top: 22rem; left: -3rem; width: 673rem; }
.products .ghost-title { top: 17rem; }
.philosophy .ghost-title { top: 27rem; left: -3rem; width: 669rem; }
.contact .ghost-title { top: 137rem; left: -4rem; width: 668rem; }

/* iOS-style glass button: translucent body, bevelled rim, specular sheen; the bevel deepens on hover */
.arrow-btn, .glass-circle { --lift: 0; position: relative; display: inline-grid; place-items: center; flex: none; width: 27rem; height: 27rem; border-radius: 50%; border: 0; isolation: isolate; cursor: pointer;
  background:
    radial-gradient(120% 120% at 26% 14%, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015) 45%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .03)),
    rgba(0, 0, 0, .15);
  -webkit-backdrop-filter: blur(10rem) saturate(170%); backdrop-filter: blur(10rem) saturate(170%);
  box-shadow:
    inset 0 1rem .6rem -.5rem rgba(255, 255, 255, .3),
    inset 0 -1rem 1.2rem -1rem rgba(255, 255, 255, .1),
    0 2rem 5rem rgba(0, 0, 0, .5);
  transition: box-shadow .35s ease; }
.arrow-btn::before, .glass-circle::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1rem; pointer-events: none; opacity: .85;
  background: conic-gradient(from 205deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .06) 26%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .05) 74%, rgba(255, 255, 255, .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .3s ease, padding .3s ease; }
.arrow-btn::after, .glass-circle::after { content: ""; position: absolute; left: 14%; top: 5%; width: 72%; height: 46%; border-radius: 50% / 62% 62% 38% 38%; pointer-events: none; opacity: .12; filter: blur(.25rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transition: opacity .3s ease, transform .45s ease; }
.arrow-btn svg, .glass-circle svg { position: relative; z-index: 1; width: 20rem; height: 20rem; fill: none; stroke: #ff8130; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: filter .3s ease; }
/* hover: only the outer bevel deepens and a soft glow appears; the button size and its contents stay put */
.link-cta:hover .arrow-btn, .hero-cta:hover .arrow-btn, .arrow-btn:hover, .glass-circle:hover, .diamond-btn:hover .glass-circle, .link-cta:focus-visible .arrow-btn, .hero-cta:focus-visible .arrow-btn {
  box-shadow:
    inset 0 1rem .6rem -.5rem rgba(255, 255, 255, .3),
    inset 0 -1rem 1.2rem -1rem rgba(255, 255, 255, .1),
    0 0 7rem rgba(255, 255, 255, .22),
    0 0 14rem rgba(255, 140, 60, .12),
    0 2rem 5rem rgba(0, 0, 0, .5); }
.diamond-btn:hover .glass-circle::before, .link-cta:hover .arrow-btn::before, .hero-cta:hover .arrow-btn::before, .arrow-btn:hover::before, .glass-circle:hover::before, .link-cta:focus-visible .arrow-btn::before, .hero-cta:focus-visible .arrow-btn::before { opacity: 1; padding: 2rem; filter: drop-shadow(0 0 1.5rem rgba(255, 255, 255, .55)); }
.link-cta { display: flex; align-items: center; gap: 8rem; height: 27rem; }
.cta-text { font: 340 12.1rem/14rem var(--font-body); color: #dcdcdc; white-space: nowrap; }

/* ---- header ---- */
.site-header { position: fixed; top: 0; left: 50%; z-index: 50; width: 666rem; height: 60rem; margin-left: -333rem; pointer-events: none; }
.pill { position: absolute; top: 22rem; height: 27rem; display: flex; align-items: center; border-radius: 14rem; isolation: isolate; pointer-events: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .06)), rgba(14, 14, 14, .55);
  -webkit-backdrop-filter: blur(10rem) saturate(170%); backdrop-filter: blur(10rem) saturate(170%);
  box-shadow: inset 0 1rem .6rem -.4rem rgba(255, 255, 255, .5), inset 0 -1rem 1rem -.8rem rgba(255, 255, 255, .2), inset 0 0 6rem rgba(255, 255, 255, .04), 0 3rem 8rem rgba(0, 0, 0, .5);
  transition: box-shadow .35s ease, background .35s ease, transform .4s cubic-bezier(.2, .9, .25, 1.3); }
.pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1rem; pointer-events: none; opacity: .75; transition: opacity .3s, padding .3s;
  background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, .3) 62%, rgba(255, 255, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pill:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .09)), rgba(14, 14, 14, .5);
  box-shadow: inset 0 1.4rem .8rem -.4rem rgba(255, 255, 255, .8), inset 0 -1.6rem 1.4rem -.9rem rgba(255, 255, 255, .34), inset 0 0 9rem rgba(255, 255, 255, .09), 0 5rem 12rem rgba(0, 0, 0, .6); }
.pill:hover::before { opacity: 1; padding: 1.5rem; }
.logo-pill { left: 45rem; width: 71rem; justify-content: center; }
.logo-pill img { width: 48rem; height: auto; }
.main-nav { left: 351rem; width: 212rem; justify-content: center; gap: 11.5rem; font: 320 8rem/10rem var(--font-body); color: #dcdcdc; }
.main-nav a { position: relative; padding: 4rem 5rem; margin: 0 -5rem; border-radius: 10rem; transition: background .3s ease, box-shadow .3s ease, color .3s ease; }
.main-nav a:hover, .main-nav a.is-current { background: rgba(255, 255, 255, .1); box-shadow: inset 0 1rem .6rem -.4rem rgba(255, 255, 255, .7), inset 0 -1rem 1rem -.8rem rgba(255, 255, 255, .3), 0 1rem 4rem rgba(0, 0, 0, .4); color: #fff; }
.header-actions { left: 571rem; width: 53rem; justify-content: center; gap: 9rem; }
.header-actions a { display: grid; place-items: center; width: 19rem; height: 19rem; margin: 0 -2rem; border-radius: 50%; transition: background .3s ease, box-shadow .3s ease, transform .4s cubic-bezier(.2, .9, .25, 1.35); }
.header-actions a:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 1.2rem .7rem -.4rem rgba(255, 255, 255, .8), inset 0 -1.4rem 1.2rem -.9rem rgba(255, 255, 255, .35), 0 2rem 5rem rgba(0, 0, 0, .5); }
.header-actions svg { width: 17rem; height: 17rem; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- hero ---- */
.hero-temple { left: 20rem; top: 95rem; width: 358rem; height: auto; mix-blend-mode: screen; }
.hero-fort { left: 119rem; top: 61rem; width: 555rem; height: auto; mix-blend-mode: screen; }
.hero-copy { left: 381rem; top: 150rem; width: 198rem; text-align: justify; }
.hero-title { left: 92rem; top: 317rem; font: 300 21.5rem/25rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #ededed; white-space: nowrap; }
.hero-hindi { left: 92rem; top: 355rem; font: 300 14rem/18rem var(--font-hindi); color: #f0f0f0; }
.hero-cta { left: 506rem; top: 317rem; width: 73rem; display: flex; flex-direction: column; align-items: flex-end; gap: 14rem; }

/* ---- story ---- */
.story-copy { left: 92rem; top: 140rem; width: 213rem; }
.story-copy p { margin-top: 0; }
.story-copy p + p { margin-top: 11.2rem; }
.story-art { left: 337rem; top: 129rem; width: 282rem; height: auto; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 52%, transparent 100%); }
.story-cta { left: 92rem; top: 314rem; }

/* ---- products ---- */
.product-tabs { left: 0; width: 666rem; top: 129rem; display: flex; justify-content: center; gap: 25.5rem; font: 340 12.3rem/14rem var(--font-body); }
.product-tabs a { color: #5b5b5b; padding-bottom: 2rem; border-bottom: 1rem solid transparent; transition: color .25s, border-color .25s; white-space: nowrap; }
.product-tabs a:hover { color: #9a9a9a; }
.product-tabs a.is-active { color: #e8e8e8; border-bottom-color: #bdbdbd; }

.product { display: contents; }
.product > * { position: absolute; }
.info { left: 0; top: 0; width: 0; height: 0; }
.product-art { mix-blend-mode: screen; height: auto; }
.product-title { font: 300 20rem/29.5rem var(--font-display); letter-spacing: .25em; word-spacing: 0; text-transform: uppercase; color: #e9e9e9; white-space: nowrap; }
.index { font: 200 50rem/50rem var(--font-display); letter-spacing: .1em; color: var(--accent); right: 81rem; white-space: nowrap; text-align: right; }
.variant-picker { left: 83rem; width: 11rem; height: 31rem; border-radius: 6rem; cursor: pointer; touch-action: none; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .06));
  -webkit-backdrop-filter: blur(8rem) saturate(160%); backdrop-filter: blur(8rem) saturate(160%);
  box-shadow: inset 0 1rem .6rem -.4rem rgba(255, 255, 255, .5), inset 0 -1rem 1rem -.8rem rgba(255, 255, 255, .2), 0 2rem 6rem rgba(0, 0, 0, .5);
  transition: box-shadow .3s ease, transform .4s cubic-bezier(.2, .9, .25, 1.35); }
.variant-picker::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1rem; pointer-events: none; opacity: .75; transition: opacity .3s, padding .3s;
  background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .15) 35%, rgba(255, 255, 255, .3) 65%, rgba(255, 255, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.variant-picker:hover { box-shadow: inset 0 1.4rem .8rem -.4rem rgba(255, 255, 255, .85), inset 0 -1.6rem 1.2rem -.9rem rgba(255, 255, 255, .35), 0 4rem 9rem rgba(0, 0, 0, .6); }
.variant-picker:hover::before { opacity: 1; padding: 1.5rem; }
.variant-picker .thumb { position: absolute; left: 2.5rem; top: 2.5rem; width: 6rem; height: 6rem; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 36% 30%, #ffa468 0, #ec6a26 38%, #c4470f 78%, #a63a0a 100%);
  box-shadow: 0 0 4rem rgba(242, 106, 33, .65), 0 0 .8rem rgba(255, 150, 80, .9), inset 0 -.6rem .8rem rgba(120, 30, 0, .45), inset 0 .5rem .6rem rgba(255, 220, 180, .55);
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.variant-picker[aria-valuemax="1"] { cursor: default; }
.can-wrap { left: 0; top: 0; width: 0; height: 0; transition: --glow 1s ease, --grid 1s ease; }
.can-wrap > * { position: absolute; }
.can { left: var(--cx, 212rem); top: var(--cy); transform: translate(-50%, -50%); height: auto; z-index: 2; will-change: transform, opacity, filter; }
.glow { left: calc(var(--cx, 212rem) - 85rem); top: calc(var(--cy) - 120rem); width: 170rem; height: 240rem; border-radius: 50%; background: radial-gradient(closest-side, var(--glow, rgba(150, 12, 48, .17)), rgba(0, 0, 0, 0)); }
.floor {
  left: calc(var(--cx, 212rem) - 114rem); top: var(--fy); width: 229rem; height: 38rem; transform-origin: 50% 100%;
  background:
    linear-gradient(var(--grid, rgba(255, 60, 100, .38)) 1rem, transparent 1rem) 0 0 / 100% 7.6rem,
    linear-gradient(90deg, var(--grid, rgba(255, 60, 100, .38)) 1rem, transparent 1rem) 0 0 / 22.9rem 100%;
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 38%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 60%, #000 38%, transparent 78%);
  clip-path: polygon(11% 0, 89% 0, 100% 100%, 0 100%);
}
.info > div { position: absolute; left: 376rem; width: 213rem; font: 340 8.6rem/10rem var(--font-body); color: #d6d6d6; }
.info h4 { font: 620 8.6rem/10rem var(--font-body); color: #fff; }
.info .variant-text { will-change: transform, opacity, filter; }
.order { left: 83rem; }

/* product 01 */
.p1 .product-art { left: 134rem; top: 225rem; width: 383rem; }
.p1 .product-title { left: 83rem; top: 401rem; word-spacing: 8rem; }
.p1 .index { top: 412rem; }
.p1 .variant-picker { top: 613rem; }
.p1 .can-wrap { --cx: 206rem; --cy: 621rem; --fy: 712rem; }
.p1 .info .i1 { top: 538rem; } .p1 .info .i2 { top: 613rem; } .p1 .info .i3 { top: 678rem; }
.p1 .order { top: 803rem; }
/* product 02 */
.p2 .product-art { left: 154rem; top: 981rem; width: 345rem; }
.p2 .product-title { left: 83rem; top: 1189rem; word-spacing: 8rem; }
.p2 .index { top: 1198rem; }
.p2 .variant-picker { top: 1414rem; }
.p2 .can-wrap { --cx: 209rem; --cy: 1418rem; --fy: 1512rem; --glow: rgba(140, 60, 210, .2); --grid: rgba(180, 110, 255, .5); }
.p2 .info .i1 { top: 1340rem; } .p2 .info .i2 { top: 1414rem; } .p2 .info .i3 { top: 1480rem; }
.p2 .order { top: 1613rem; }
/* product 03 */
.p3 .product-art { left: 180rem; top: 1788rem; width: 293rem; }
.p3 .product-title { left: 83rem; top: 2063rem; }
.p3 .index { top: 2101rem; }
.p3 .variant-picker { top: 2332rem; }
.p3 .can-wrap { --cx: 209rem; --cy: 2323rem; --fy: 2416rem; --glow: rgba(255, 130, 0, .1); --grid: rgba(255, 200, 90, .3); }
.p3 .info .i1 { top: 2258rem; } .p3 .info .i2 { top: 2333rem; } .p3 .info .i3 { top: 2398rem; }
.p3 .order { top: 2500rem; }

/* ---- philosophy ---- */
.statement { left: 92rem; top: 144.5rem; font: 300 16.7rem/24rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #e2e2e2; white-space: nowrap; }
.sphere { left: 246rem; top: 218rem; width: 176rem; height: 181rem; }
.sphere .globe { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .17); stroke-width: 1.7; }
.sphere img { position: absolute; left: 50%; top: 50%; width: 58rem; height: auto; transform: translate(-50%, -50%); }
.underline-link { left: 92rem; top: 435rem; color: #d2d2d2; font: italic 300 13.3rem/16rem var(--font-display); text-decoration: underline; text-underline-offset: 3rem; text-decoration-thickness: 1rem; }
.know { left: 490rem; top: 432rem; }

/* ---- house of A-VADH ---- */
.podium { left: 0; top: 0; width: 666rem; height: 710rem; }
.podium > * { position: absolute; }
.podium img { width: auto; filter: drop-shadow(0 6rem 8rem rgba(0, 0, 0, .8)); }
.ped { --rim: 12rem; left: var(--x); top: calc(var(--y) - var(--rim) / 2); width: var(--w); height: var(--h); filter: none !important; }
.ped::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--rim) / 2); bottom: 0;
  background:
    radial-gradient(ellipse 55% 50% at 24% 0%, rgba(255, 255, 255, .08), transparent 72%),
    linear-gradient(90deg, rgba(0, 0, 0, .45) 0, rgba(255, 255, 255, .02) 12%, rgba(255, 255, 255, .045) 30%, rgba(0, 0, 0, .25) 58%, rgba(0, 0, 0, .7) 100%),
    linear-gradient(180deg, #181818, #0b0b0b 55%, #010101);
  border-radius: 0 0 50% 50% / 0 0 calc(var(--rim) * 1.4) calc(var(--rim) * 1.4);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--solid, 45%), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 var(--solid, 45%), transparent 100%); }
.ped::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rim); border-radius: 50%;
  background: radial-gradient(ellipse 70% 120% at 28% 20%, #2c2c2c 0, #1a1a1a 55%, #0d0d0d 100%);
  box-shadow: inset 0 1rem 0 rgba(255, 255, 255, .06); }
.ped-oil { --x: 322rem; --y: 186rem; --w: 135rem; --h: 140rem; --rim: 9rem; --solid: 35%; }
.ped-freeze { --x: 56rem; --y: 318rem; --w: 309rem; --h: 380rem; --rim: 12rem; --solid: 40%; }
.ped-vacuum { --x: 133rem; --y: 470rem; --w: 475rem; --h: 250rem; --rim: 14rem; --solid: 62%; }
.b-large { left: 349rem; top: 9rem; height: 206rem; clip-path: inset(9.5% 27% 10% 27% round 3rem); }
.b-medium { left: 400rem; top: 50rem; height: 151rem; clip-path: inset(7.5% 31% 9% 16.5% round 3rem); }
.b-small { left: 333rem; top: 80rem; height: 132rem; clip-path: inset(12% 31% 15% 21.5% round 3rem); }
.f { top: 194rem; height: 142rem; clip-path: inset(16% 23.5% 14% 27.5% round 4rem); }
.f1 { left: 72.5rem; } .f2 { left: 119.5rem; } .f3 { left: 165.5rem; } .f4 { left: 207.5rem; }
.v { top: 343.5rem; height: 147rem; clip-path: inset(16% 23.5% 14% 27.5% round 4rem); }
.v1 { left: 154rem; } .v2 { left: 201rem; } .v3 { left: 248rem; } .v4 { left: 298rem; } .v5 { left: 345rem; }
.v6 { left: 389rem; } .v7 { left: 431rem; } .v8 { left: 472rem; } .v9 { left: 511rem; }
.house-title { left: 0; top: 508rem; width: 448rem; display: block; text-align: right; font: 300 30.3rem/46.5rem var(--font-display); letter-spacing: .3em; text-transform: uppercase; overflow: hidden; background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0, rgba(255, 255, 255, .95) 55%, rgba(255, 255, 255, .42) 82%, rgba(255, 255, 255, .14) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.house-title span { display: block; margin-right: -9rem; }
.house-cta { left: 320rem; top: 686rem; }

/* ---- contact / footer ---- */
.footer-art { left: -1rem; top: 353rem; width: 666rem; height: auto; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
.contact-form { left: 0; top: 0; width: 666rem; height: 0; }
.contact-form > * { position: absolute; }
.field { left: 189rem; width: 212rem; display: block; }
.f-name { top: 294rem; } .f-contact { top: 323rem; }
.field input { width: 100%; height: 18rem; padding: 0 4rem; background: none; border: 0; border-bottom: 1rem solid rgba(255, 255, 255, .3); border-radius: 0; font: 340 11.9rem/16rem var(--font-body); color: #d6d6d6; }
.field input::placeholder { color: #d6d6d6; opacity: 1; }
.field input:focus { outline: 0; border-bottom-color: var(--accent); }
.field input.is-invalid { border-bottom-color: #ff5a5a; }
.diamond-btn { left: 410rem; top: 267rem; width: 110rem; height: 110rem; padding: 0; border: 0; background: none; cursor: pointer; isolation: isolate; transition: transform .45s cubic-bezier(.2, .9, .25, 1.35); }
.diamond-btn::before, .diamond-btn::after { content: ""; position: absolute; left: 20rem; top: 20rem; width: 70rem; height: 70rem; transform: rotate(45deg); border-radius: 2rem; pointer-events: none; }
.diamond-btn::before { background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .0) 48%, rgba(255, 255, 255, .03)); -webkit-backdrop-filter: blur(8rem) saturate(160%); backdrop-filter: blur(8rem) saturate(160%);
  box-shadow: inset 0 1rem .7rem -.5rem rgba(255, 255, 255, .55), inset 0 -1rem 1rem -.8rem rgba(255, 255, 255, .22), inset 0 0 8rem rgba(255, 255, 255, .05), 0 3rem 8rem rgba(0, 0, 0, .5); transition: box-shadow .35s ease, background .35s ease; z-index: -1; }
.diamond-btn::after { padding: 1.1rem; opacity: .85; transition: opacity .3s ease, padding .3s ease;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 35%, rgba(255, 255, 255, .5) 62%, rgba(255, 255, 255, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.diamond-btn:hover::before, .diamond-btn:focus-visible::before { box-shadow: inset 0 1rem .7rem -.5rem rgba(255, 255, 255, .55), inset 0 -1rem 1rem -.8rem rgba(255, 255, 255, .22), 0 0 8rem rgba(255, 255, 255, .2), 0 3rem 8rem rgba(0, 0, 0, .5); }
.diamond-btn:hover::after, .diamond-btn:focus-visible::after { opacity: 1; padding: 2rem; filter: drop-shadow(0 0 1.5rem rgba(255, 255, 255, .55)); }
.diamond-text { position: absolute; left: 27rem; top: 32rem; width: 42rem; height: 46rem; white-space: nowrap; transform: rotate(-45deg); font: 300 11.5rem/15rem var(--font-body); text-align: center; color: #ececec; }
.diamond-arrow { position: absolute; left: 74rem; top: 45rem; width: 20rem; height: 20rem; }
.form-status { left: 193rem; top: 350rem; width: 300rem; font: 400 8rem/11rem var(--font-body); color: #bdbdbd; }
.footer-logo { left: 245rem; top: 526rem; width: 181rem; }
.footer-logo img { width: 100%; height: auto; }
.footer-contact { left: 0; top: 662rem; width: 666rem; display: flex; justify-content: center; align-items: center; gap: 9rem; font: 340 10.7rem/14rem var(--font-body); color: #dcdcdc; }
.footer-contact .sep { width: 1rem; height: 11rem; background: rgba(255, 255, 255, .6); }
.footer-contact a:hover { color: var(--accent); }
.copyright { left: 0; top: 685rem; width: 666rem; text-align: center; font: 340 9.95rem/14rem var(--font-body); color: #d6d6d6; }

/* reveal-on-scroll (subtle, no layout shift) */
.js .reveal { opacity: 0; transition: opacity .8s ease; }
.js .reveal.is-in, html.proto .reveal { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } .js .reveal { opacity: 1; } }