/* Atlas Motion Systems — UI replica
   Design tokens (colors, fluid type scale, grid math) taken from the live
   site's stylesheet. Layout re-implemented as normal document flow instead
   of the original's canvas/WebGL + scroll-jacked sticky-panel engine. */

/* Instrument Sans (SIL OFL) standing in for Suisse Intl. Static instances cut
   from the variable font at wght 500 and 560, because those match Suisse's
   Regular and Medium stem thickness (the font's own 400 looks thin next to
   it). Text width lands within ~1% of Suisse, and the vertical metrics are
   pinned to Suisse's so line boxes keep their height. */
@font-face{font-family:"Noto Sans Gurmukhi";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/NotoSansGurmukhi-Medium-shabad.woff2) format("woff2")}
@font-face{font-family:"Alex Brush";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/AlexBrush-Regular-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}
@font-face{font-family:"Raleway";font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/Raleway-Italic-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}   /* the hero invitation line */
@font-face{font-family:"Tangerine";font-style:normal;font-weight:700;font-display:block;src:url(../fonts/Tangerine-Bold-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}   /* the names on the loading screen */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;ascent-override:98.6%;descent-override:31.1%;line-gap-override:0%;src:url(../fonts/InstrumentSans-Regular-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;ascent-override:98.6%;descent-override:31.1%;line-gap-override:0%;src:url(../fonts/InstrumentSans-Regular-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}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;ascent-override:98.6%;descent-override:31.1%;line-gap-override:0%;src:url(../fonts/InstrumentSans-Medium-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;ascent-override:98.6%;descent-override:31.1%;line-gap-override:0%;src:url(../fonts/InstrumentSans-Medium-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{
  --color-white:#eee8e8;
  --color-warm-white:#fffde0;
  --color-black:#3a0e1a;
  --color-dark-black:#2a0a13;
  --color-grey:#c0c0c0;
  --color-dark-grey:#4a1824;
  --color-thesis-grey:#999999;
  --color-spec-grey:#bbbbbb;
  --color-primary:#f65893;

  /* Fluid type/space scale, exactly as the original: every size is a fixed
     number of units where one unit is 1/1440th of the viewport width. There
     are no clamps — a second, narrower scale takes over below 768px. */
  /* One hundredth of the real viewport height; JS keeps it in sync so
     mobile URL-bar chrome doesn't resize pinned sections mid-scroll. */
  --vh: 1vh;
  /* Desktop: the unit follows the window's height (1/810th, the same as 1/1440th of the width on a 16:9 screen),
     like the 3D scenes do, so narrowing the window does not shrink the type; it is capped at 1/1000th of the width
     so nothing outgrows a narrow window. The side padding stays tied to the width, so the columns keep their room. */
  --screen-unit: min(100vh / 810, 100vw / 1000);
  --site-outer-padding-x: calc(32 * 100vw / 1440);
  --site-padding-x: calc(202 * 100vw / 1440);
  --site-padding-y: calc(16 * var(--screen-unit));
  /* The original's vertical unit: one 820th of the real viewport height.
     Used to park elements at a fixed fraction of a pinned screen. */
  --height-unit: calc(var(--vh) * .1219512195);
  --header-height: 76.375px;
  /* Column helpers: the original places things on a 24-col grid, so a start
     column N is (N-1) span-widths in, and a span of N is N cols + N-1 gaps. */
  --col-4: calc(3 * var(--grid-span-width));
  --col-7: calc(6 * var(--grid-span-width));
  --col-13: calc(12 * var(--grid-span-width));
  --span-8: calc(8 * var(--grid-column-width) + 7 * var(--grid-gap-width));
  --span-12: calc(12 * var(--grid-column-width) + 11 * var(--grid-gap-width));
  --span-18: calc(18 * var(--grid-column-width) + 17 * var(--grid-gap-width));

  --grid-columns: 24;
  --grid-gap-scale: calc(20 / 24);
  --grid-gap-width: calc((100vw - var(--site-padding-x) * 2) / ((var(--grid-columns) / var(--grid-gap-scale)) + var(--grid-columns) - 1));
  --grid-column-width: calc(var(--grid-gap-width) / var(--grid-gap-scale));
  --grid-span-width: calc(var(--grid-gap-width) + var(--grid-column-width));
  --grid-span-2: calc(var(--grid-span-width) * 1 + var(--grid-column-width));
  --grid-span-17: calc(var(--grid-span-width) * 16 + var(--grid-column-width));
  --grid-span-24: calc(var(--grid-span-width) * 23 + var(--grid-column-width));

  --hero-title: calc(64 * var(--screen-unit));
  --h1: calc(184 * var(--screen-unit));
  --h2: calc(150 * var(--screen-unit));
  --h3: calc(116 * var(--screen-unit));
  --h4: calc(76 * var(--screen-unit));
  --h5: calc(30 * var(--screen-unit));
  --h6: calc(17 * var(--screen-unit));
  --p1: calc(24 * var(--screen-unit));
  --p2: calc(18 * var(--screen-unit));
  --p3: calc(16 * var(--screen-unit));
  --p4: calc(14 * var(--screen-unit));
  --caption1: calc(14 * var(--screen-unit));
  --caption2: calc(24 * var(--screen-unit));
  --nav-link: calc(12 * var(--screen-unit));
  --default: calc(16 * var(--screen-unit));
}

/* The original's narrow-screen scale: a different unit base (1/375) and its
   own set of step values, rather than shrinking the desktop scale. */
@media (max-width: 767.98px){
  :root{
    --screen-unit: 100vw / 375;
    --site-padding-x: calc(11 * var(--screen-unit));
    --site-outer-padding-x: calc(11 * var(--screen-unit));
    --site-padding-y: calc(47 * var(--screen-unit));
    --grid-columns: 12;
    --grid-gap-scale: calc(4 / 12);
    --hero-title: calc(38 * var(--screen-unit));
    --h1: calc(96 * var(--screen-unit));
    --h2: calc(38 * var(--screen-unit));
    --h3: calc(26 * var(--screen-unit));
    --h4: calc(16 * var(--screen-unit));
    --caption1: calc(16 * var(--screen-unit));
    --caption2: calc(18 * var(--screen-unit));
    --nav-link: calc(12 * var(--screen-unit));
    --default: calc(12 * var(--screen-unit));
    --p1: calc(16 * var(--screen-unit));
    --p2: calc(12 * var(--screen-unit));
    --p3: calc(8 * var(--screen-unit));
    --p4: calc(6 * var(--screen-unit));
  }
}

*{box-sizing:border-box}
html{width:100%;font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif;color:var(--color-white);background:var(--color-black) url(../images/preloader-bg.webp) left bottom/100% auto fixed no-repeat;-ms-overflow-style:none;scrollbar-width:none}
/* The scrollbar is hidden so the layout viewport is the full window width —
   every fluid size is derived from 100vw, so a 15px gutter would shift the
   whole type scale. */
html::-webkit-scrollbar{display:none}
body{width:100%;margin:0;font-weight:300;font-size:var(--default);line-height:1.2;background:transparent}
@media (max-width:767.98px){html{background-image:url(../images/preloader-bg-m.webp)}}
a{color:inherit}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p{margin:0}

.o-container{width:100%;padding:0 var(--site-padding-x)}
.section{position:relative;width:100%}
.section__inner{padding-top:var(--site-padding-y);padding-bottom:var(--site-padding-y)}

.nav-link{font-weight:500;font-size:var(--nav-link);line-height:1;text-transform:uppercase;letter-spacing:-.36px;border:1px solid var(--color-white);display:inline-flex}
.nav-link>a{padding:.6em;text-decoration:none;color:inherit}

/* Type scale — line-heights and tracking are the original's exact values.
   Letter-spacing stays in fixed px on purpose: the sizes are fluid, so
   constant tracking keeps large headings tight without over-tightening
   small text. */
h1{font-size:var(--h1);line-height:.891;letter-spacing:-5.52px}
h2{font-size:var(--h2);line-height:.88;letter-spacing:-4.5px}
h3{font-size:var(--h3);line-height:.886;letter-spacing:-3.48px}
h4{font-size:var(--h4);line-height:.894;letter-spacing:-2.28px}
h5{font-size:var(--h5);line-height:1.13;letter-spacing:-.9px}
h6{font-size:var(--h6);line-height:1.2;letter-spacing:-.51px;font-weight:500}
.p1{font-size:var(--p1);line-height:1.25;letter-spacing:-.72px;font-weight:300}
.p2{font-size:var(--p2);line-height:1.444;letter-spacing:-.54px;font-weight:300}
.p3{font-size:var(--p3);line-height:1.25;letter-spacing:-.48px;font-weight:400}
.p4{font-size:var(--p4);line-height:1;letter-spacing:-.42px;font-weight:400}
.caption1,.caption2{font-weight:500;text-transform:uppercase}
.caption1{font-size:var(--caption1);line-height:1.1667}
.caption2{font-size:var(--caption2);line-height:.833;letter-spacing:-.72px}

/* ---------- Header ---------- */
#site-header{position:fixed;left:var(--site-outer-padding-x);right:var(--site-outer-padding-x);top:var(--site-padding-y);height:auto;z-index:100;display:flex;justify-content:space-between}
#site-header-nav{display:flex;flex-direction:column;gap:1em;align-items:flex-start;justify-content:space-between;z-index:11}
#site-header-nav ul{display:flex;gap:.4em}
#site-header-nav a{color:var(--color-white);text-decoration:none}
#site-header-nav li:hover{opacity:.7}
#site-header-cta-container{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
/* Original: the rule between nav and CTA that scales out during the
   header's entrance, then fades (driven from js/main.js). */
#site-header-cta__separator{background-color:var(--color-white);height:1px;position:absolute;bottom:0;left:300px;right:300px;opacity:0;pointer-events:none}
#site-header-cta{background-color:var(--color-white);will-change:transform,opacity;backface-visibility:hidden}
#site-header-logo{will-change:transform,opacity;backface-visibility:hidden}
#site-header-cta a{height:calc(26 * var(--screen-unit));display:flex;align-items:center;justify-content:center;color:var(--color-black);text-decoration:none}

/* ---------- Hero ---------- */
#home-hero{position:relative;min-height:100vh}
#hero-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}
#home-hero .section__inner{position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#3a0e1a url(../images/home-video-poster.jpg) center/cover no-repeat}
#home-hero .section__inner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,6,12,.15),rgba(30,6,12,.55) 80%);z-index:1}
.hero-content-wrap{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
#home-hero__content{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em}
/* The original's hero lockup: the block is four line-heights tall with the
   lines spread apart, and the last line is pushed out to the right edge. */
/* Columns 4..21 of 24, four line-heights tall, the three lines spread down
   it with the last one pushed to the right edge -- all straight from the
   original. It is static: nothing animates it on scroll. */
#home-hero .hero-title{height:4lh;width:var(--span-18);margin-left:var(--col-4);margin-right:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left}
#home-hero .hero-title > span{white-space:nowrap}
#home-hero .hero-title > span:nth-child(2){align-self:center}   /* "Invites You" sits centred, evenly between the other two lines */
#home-hero .hero-title > span:nth-child(3){align-self:flex-end}
/* The opening line is set in Alex Brush, the same script as the names on the loading screen, bigger and
   bolder than the capitals it replaced (Alex Brush has one weight, so the bold is an outline stroke in the
   text colour). On a phone the longest line (6.76 em wide) is sized to fit the screen and starts at the
   left edge. The background grid's reference box below uses the same size and line height so the grid still
   frames the title. */
:root{--hero-script:min(calc(var(--hero-title) * 1.3),13vh)}
@media (max-width:767.98px){:root{--hero-script:11.7vw}#home-hero .hero-title{margin-left:0;width:100%}}
#home-hero .hero-title{font-family:"Tangerine",cursive;font-weight:700;text-transform:none;letter-spacing:0;font-size:var(--hero-script);line-height:1.02;-webkit-text-stroke:.03em currentColor;paint-order:stroke fill}
#home-hero .hero-title{text-shadow:0 1px 1px rgba(10,2,4,1),0 2px 4px rgba(10,2,4,1),0 4px 10px rgba(10,2,4,.95),0 8px 24px rgba(10,2,4,.9),0 16px 48px rgba(10,2,4,.85),0 28px 80px rgba(10,2,4,.75);filter:drop-shadow(0 6px 28px rgba(10,2,4,.6))}   /* depth against the moving video */
/* iPhone/iPad Safari paints the stacked shadows on the outline stroke too (and the drop-shadow filter as a dark smudge),
   so they came out far heavier there: a lighter set, without the filter. */
@supports (-webkit-touch-callout:none){#home-hero .hero-title{text-shadow:0 1px 2px rgba(10,2,4,.75),0 3px 10px rgba(10,2,4,.45);filter:none}}
.hero-title{font-size:var(--hero-title);line-height:.906;letter-spacing:-1.92px;font-weight:500;text-transform:uppercase;display:flex;flex-direction:column}
/* The original parks the copy at top:100% of the lockup and slides it up
   half a viewport into place across the hero pin (JS drives --hero-copy-y). */
.hero-copy{position:absolute;top:100%;left:0;right:0;height:auto;margin:0;padding-top:calc(2 * var(--p1));
  font-family:"Raleway",sans-serif;font-style:italic;font-size:calc(1.125 * var(--p1));font-weight:500;line-height:1.1667;letter-spacing:0;
  transform:translateY(var(--hero-copy-y, 0px))}
.hero-copy .hero-name{font-weight:inherit;white-space:nowrap;--tc:#f2c14e}   /* both names in the same gold */
.hero-copy .hn{display:inline-block}
.hero-copy.tc-go .hn{animation:tc-paint .5s ease-out both;animation-delay:calc(var(--k) * 110ms + .2s)}
.hero-copy > span{display:block;width:var(--span-18);margin-left:var(--col-4);text-align:left;text-wrap:balance}   /* left-aligned under the title, on its columns (4-21), so both start at the same edge */
/* Fixed, not absolute: in the original it never moves. It is visible only
   at the very top of the page and fades out over ~0.25s on the first
   scroll -- it is not tied to scroll position beyond that. */
#home-hero__scroll-to-explore{position:fixed;left:0;right:0;bottom:var(--site-padding-y);height:0;z-index:4;
  text-align:right;pointer-events:none;opacity:1;transition:opacity .25s ease}
#home-hero__scroll-to-explore.is-hidden{opacity:0}
#home-hero__scroll-to-explore > span{position:absolute;right:calc(var(--site-padding-x) + 3 * var(--grid-span-width));bottom:0;text-align:right}

/* ---------- Intro ---------- */
#home-intro{background:var(--color-black)}
/* The mountain lands here, on the "right motor for the mission" beat.
   Three stacked mattes: sky furthest back, distant ridge, foreground peak. */
#home-intro__scenery{position:absolute;inset:0;overflow:hidden;z-index:0}
/* One scene, not stacked bands: the wide matte covers the section and the
   foreground peak sits on the bottom edge. */
#home-intro__scenery img{position:absolute;left:0;width:100%;max-width:none;object-fit:cover}
/* Keep the headline legible over the scenery. */
#home-intro .section__inner:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(30,6,12,.45),rgba(30,6,12,.15) 45%,rgba(30,6,12,.55))}
#home-intro__shabad{margin:0 0 calc(30 * var(--screen-unit));text-align:center;font-family:"Noto Sans Devanagari","Nirmala UI","Mangal","Kohinoor Devanagari",sans-serif;font-weight:500;color:var(--color-warm-white);text-transform:none;letter-spacing:0;line-height:1.75;font-size:max(14px,min(calc(22 * var(--screen-unit)),4.7vw));white-space:nowrap}   /* 4.7vw: the longest line (about 18.2 em wide) always fits the screen */
#home-intro__shabad .split-line{display:block}
#home-intro__shabad .split-line:first-child{color:#e6b83f;font-size:2.6em;line-height:1.05;margin-bottom:.1em}   /* the Ik Onkar, larger than the verse */
#home-intro__shabad .word{white-space:nowrap}
#home-intro__shabad .char-mask{overflow:visible}   /* the Ik Onkar glyph is wider than its advance; the default mask was cutting its tail off */
#home-intro .intro-content{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ---------- Clouds: the page 1 -> 2 hand-off ----------
   They belong to the transition out of the hero and into the intro, not
   behind the mountain. Driven by the hero's scroll progress in main.js. */
/* Lives inside the hero's stacking context so it paints above the video and
   below the lockup, but is fixed rather than absolute: that lets it hold its
   place over the seam as the hero scrolls off and the intro rises, instead of
   being clipped to the hero. overflow:hidden on the sticky parent does not
   clip it, because sticky is not a containing block for fixed children. */
#page-clouds{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;overflow:hidden}
#page-clouds .cloud{position:absolute;width:auto;max-width:none;will-change:transform,opacity}
/* Start below the fold and travel upward; spread horizontally so the rise
   reads as a bank of cloud passing, not a single sprite. */
#page-clouds .cloud--a{bottom:0;left:-18%;height:66%}
#page-clouds .cloud--b{bottom:-8%;left:26%;height:58%}
#page-clouds .cloud--c{bottom:4%;left:58%;height:72%}
/* position:fixed is the original's actual mechanism here -- the intro never
   scrolls, later sections simply paint over it. */
#home-intro .section__inner{position:fixed;top:0;left:0;right:0;height:calc(var(--vh) * 100);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:0}
/* Fixed full-screen hero scene (js/scene-hero.js), as the original's #canvas.
   Once it is running it replaces the DOM stand-ins: the <video> only feeds
   the WebGL texture (the original hides it the same way), and the DOM
   clouds, intro scenery and gradient overlays give way to the real layers. */
#hero-canvas{position:fixed;top:0;left:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;visibility:hidden}
html.has-hero-scene #hero-canvas{visibility:visible}
html.has-hero-scene #home-hero .section__inner{background:none}
html.has-hero-scene #home-hero .section__inner:after,html.has-hero-scene #home-intro .section__inner:after{display:none}
html.has-hero-scene #hero-video{visibility:hidden}
html.has-hero-scene #page-clouds,html.has-hero-scene #home-intro__scenery{display:none}
html.has-hero-scene #home-intro{background:none}
/* The contour wallpaper is the page's default background from the first screen to the end (RSVP): the still sits fixed behind
   everything, the hero's moving clouds play on top of it, and from the thesis section on the live shader (terrain-canvas) takes over
   with the same placement. */
#home-intro__scenery{background:url(../images/preloader-bg.webp) left bottom/100% auto no-repeat}
html.has-hero-scene #home-drone{background:none}
html.has-hero-scene #home-drone .section__inner:after{display:none}
html.has-hero-scene #drone-canvas,html.has-hero-scene #drone-fallback{display:none}
#home-intro__copy{color:var(--color-warm-white)}
/* Countdown under the intro lines. It uses the same type as those lines (Instrument Sans
   medium, uppercase, tight tracking = .caption2), and fades and un-blurs on scroll with the
   last letters of the copy (see tickIntro), so it is invisible until that code runs. */
#home-intro__countdown{margin-top:calc(44 * var(--screen-unit));color:var(--color-warm-white);font-weight:500;text-transform:uppercase;letter-spacing:-.03em;text-shadow:0 1px 18px rgba(0,0,0,.35)}
#home-intro__countdown .cd-row{display:flex;justify-content:center;align-items:flex-start;gap:calc(44 * var(--screen-unit))}
#home-intro__countdown .cd-unit{display:flex;flex-direction:column;align-items:center;min-width:calc(104 * var(--screen-unit))}
#home-intro__countdown .cd-num{font-size:calc(52 * var(--screen-unit));font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#home-intro__countdown .cd-label{margin-top:.9em;font-size:var(--caption1);font-weight:500;line-height:1.1667;letter-spacing:-.03em;opacity:.75}
#home-intro__countdown .cd-note{margin:calc(30 * var(--screen-unit)) 0 0;font-size:var(--caption2);font-weight:500;line-height:.833;letter-spacing:-.72px;opacity:.9}
@media (max-width: 767.98px){
  #home-intro__countdown{margin-top:calc(34 * var(--screen-unit))}
  #home-intro__countdown .cd-row{gap:calc(12 * var(--screen-unit))}
  #home-intro__countdown .cd-unit{min-width:calc(64 * var(--screen-unit))}
  #home-intro__countdown .cd-num{font-size:calc(34 * var(--screen-unit))}
  #home-intro__countdown .cd-note{margin-top:calc(22 * var(--screen-unit))}
}

/* ---------- Drone / ramp section ---------- */
#home-drone{background:var(--color-black)}
#home-drone .section__inner{position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden;color:var(--color-warm-white)}
/* Title and copy both sit on columns 7..18; the title takes the slack so the
   copy stays pinned near the bottom, exactly as the original's grid does. */
#home-drone .scene-content{height:100%;display:flex;flex-direction:column}
#home-drone__title{flex:1;margin-top:calc(110 * var(--screen-unit));margin-left:var(--col-7);width:var(--span-12);text-transform:uppercase}
/* The h2 keeps its natural two-line height -- it is the container that
   stretches, so the copy stays anchored near the bottom. */
#home-drone__title h2{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
#home-drone__title .hero-title{font-size:var(--hero-title)}
/* The invitation text, laid out as on the card: hosts, the request, "Wedding Ceremony", the couple, her parents,
   a rule, then the date and place. Each line is split into words (main.js), which fade in one after another. */
#home-drone{--inv:var(--p1)}
#home-drone__desc{margin:0 0 calc(80 * var(--screen-unit)) var(--col-7);width:var(--span-12);text-align:center;display:flex;flex-direction:column;align-items:center}
#home-drone__desc p{margin:0;font-size:var(--inv);line-height:1.25;font-weight:400;letter-spacing:0;text-wrap:balance}
#home-drone__desc .inv-host{font-size:calc(var(--inv) * 1.3);font-weight:500}
#home-drone__desc .inv-sub{font-size:calc(var(--inv) * .82);font-weight:300;font-style:italic;opacity:.9;margin-bottom:.7em}
#home-drone__desc .inv-lead{margin:.2em 0}
#home-drone__desc .inv-parent{white-space:nowrap;margin-bottom:0}
#home-drone__desc .inv-parent + .inv-parent{margin-bottom:.7em}
#home-drone__desc .inv-title{font-size:calc(var(--inv) * 2.1);font-weight:500;color:#dcae4d;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;margin:.25em 0}
#home-drone__desc .inv-name{font-family:"Tangerine",cursive;font-weight:700;font-size:calc(var(--inv) * 2.3);line-height:1.05;margin:.1em 0;white-space:nowrap}
#home-drone__desc .inv-name .word{padding:0 .1em}
#home-drone__desc .inv-amp{color:#dcae4d;font-size:calc(var(--inv) * 1.4);line-height:1}
#home-drone__desc .inv-rule{display:block;width:min(60%,12em);height:1px;margin:1em 0 .9em;background:linear-gradient(90deg,transparent,#dcae4d,transparent)}
#home-drone__desc .inv-date{font-size:calc(var(--inv) * 1.4);font-weight:600}
#home-drone__desc .inv-place{font-size:calc(var(--inv) * .8);letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-top:.4em}

/* ---------- Process / motor section ---------- */
/* Generic 24-column row, as the original's .o-grid. Children place
   themselves with --grid-column-start / --grid-column-span. */
.o-grid{position:relative;display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);grid-template-rows:repeat(var(--rows,1),1fr);column-gap:var(--grid-gap-width);row-gap:0;height:100%}
.o-grid>*{grid-column:auto / span var(--grid-column-span,var(--grid-columns));grid-column-start:var(--grid-column-start,auto)}

/* Pin geometry (1 vh = one viewport). The original pins the inner a full
   viewport before the section arrives with a JS counter-transform, and fades
   it in over the last half of that. A JS transform judders against native
   scrolling (see the drone), so native stickiness does it here instead: the
   section starts two viewports early, overlapping the drone's (now 3vh)
   section, and is one viewport taller. Its sticky inner therefore pins at
   exactly the original's moment, the drone holds under it until the motor is
   fully opaque, and the page's total height is unchanged. The black moves
   from the section to the inner so the drone shows through the overlap until
   the fade starts. */
#home-motor{margin-top:calc(var(--vh) * -200);scroll-margin-top:calc(var(--vh) * -100);pointer-events:none}
#home-motor .section__inner{pointer-events:auto;position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;background:var(--color-black);opacity:0;visibility:hidden}
#jdm{position:absolute;top:0;scroll-margin-top:calc(var(--vh) * -100)}
#home-motor__head,#home-motor__desc-2,#home-motor__title{z-index:2}
#home-motor .scene-canvas,#home-motor .scene-fallback{z-index:0}
/* The same golden contour wallpaper as the sections that follow, behind the objects. */
#events-terrain{position:absolute;top:0;left:0;display:block;z-index:0;pointer-events:none}

/* Head row: step number + dots (cols 1-3), "Our Process" (4-7),
   "NDAA-Compliant Motors" (15-18), step bars (24). */
#home-motor__head{margin-top:calc(46 * var(--screen-unit));height:auto}   /* date and time sit above the first grid line */
#home-motor__nav{--grid-column-start:1;--grid-column-span:3;display:flex;flex-direction:column;font-size:calc(34 * var(--screen-unit));letter-spacing:calc(-1.015 * var(--screen-unit));font-weight:300}
#home-motor__nav>span:nth-child(1){position:relative;display:inline-block;transform:translate(-.1ch)}
#home-motor__nav>span:nth-child(1)>span:nth-child(1){visibility:hidden}
#home-motor__nav>span:nth-child(1){line-height:1.1;white-space:nowrap}
#home-motor__nav .nav-date{font-size:2em}   /* the date line only; day and time stay at the base size */
#home-motor__nav-list{list-style-type:none;margin:0;padding:0;display:flex;gap:.5em}
#home-motor__nav-list li{position:relative;width:4px;height:4px;margin-top:.5em;transition:transform .25s;transform:scale(1);will-change:transform;cursor:pointer}
#home-motor__nav-list li:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;border:1px solid var(--color-white);transition:background-color .25s}
#home-motor__nav-list li.is-active:before{background-color:var(--color-white)}
#home-motor__nav-list li:hover{transform:scale(1.05)}
#home-motor__jdm{--grid-column-start:4;--grid-column-span:4;display:flex;flex-direction:column;align-items:flex-end;font-size:calc(32 * var(--screen-unit));line-height:calc(27 * var(--screen-unit));letter-spacing:calc(-.96 * var(--screen-unit))}
#home-motor__ndaa{--grid-column-start:15;--grid-column-span:4;text-transform:uppercase;font-size:calc(13 * var(--screen-unit));letter-spacing:calc(-.39 * var(--screen-unit))}
#home-motor__lines{--grid-column-start:24;--grid-column-span:1;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
#home-motor__lines span{width:100%;height:1px;background-color:var(--color-white)}
#home-motor__lines span:nth-child(1){transform:translate(-50%) scaleX(2)}

/* Step copy: one <p> per step, only the showing one displayed; JS rises its
   words in line by line. */
#home-motor__desc-2{position:absolute;left:0;right:0;height:auto;top:calc(490 * var(--height-unit))}
#home-motor__desc-2 p{--grid-column-start:1;--grid-column-span:7;margin:0;font-size:calc(20 * var(--screen-unit));line-height:1.3;font-weight:400;letter-spacing:calc(-.4 * var(--screen-unit));display:none}
#home-motor__desc-2 p:first-child{display:block}
#home-motor__desc-2 .split-line{overflow:hidden}

/* Title row: a rule across cols 1-3 (hidden on step 3, whose long word
   reaches that far) and the step word right-aligned across cols 4-24.
   The h2's first span is an invisible sizer; the real words are stacked,
   absolutely positioned, and slide in from the right. */
#home-motor__title{height:auto}
#home-motor__title>span:first-child{--grid-column-start:1;--grid-column-span:3;position:relative;width:100%;margin:1em 0}
#home-motor__title>span:first-child:before{content:"";position:absolute;left:0;top:clamp(0px,(var(--vh) * 100 - 820px) * -1,100%);right:0;width:100%;height:1px;background:var(--color-white);opacity:0;transition:opacity .5s}
#home-motor__title>span:first-child.is-active:before{opacity:1}
#home-motor__title h2{position:relative;--grid-column-start:4;--grid-column-span:21;margin:0;text-align:right;text-transform:uppercase;font-size:var(--h2);line-height:.88;letter-spacing:calc(-4.5 * var(--screen-unit));font-weight:500}
#home-motor__title h2>span:first-child{display:block;--line-height:.89832;--letter-spacing:-4.317;--font-size:144;font-size:calc(var(--font-size) * var(--screen-unit));letter-spacing:calc(var(--letter-spacing) * var(--screen-unit));line-height:var(--line-height);visibility:hidden}
#home-motor__title-list,#home-motor__number-list{position:absolute;left:0;top:0}
#home-motor__title-list span:not(.dg),#home-motor__number-list span:not(.dg){white-space:nowrap;position:absolute;left:0;top:0;transform:translate(100%);transition:transform .5s,opacity .5s;opacity:0;text-transform:uppercase}
#home-motor__title-list span.is-active:not(.dg),#home-motor__number-list span.is-active:not(.dg){opacity:1;transform:translate(0)}
#home-motor__title-list span.is-next:not(.dg),#home-motor__number-list span.is-next:not(.dg){transform:translate(-100%)}
/* Event words: letters turn their own colour one by one, left to right, each time a word becomes active */
#home-motor__title-list>span:nth-child(1){--tc:#f2b632}
#home-motor__title-list>span:nth-child(2){--tc:#78962b}
#home-motor__title-list>span:nth-child(3){--tc:#a45cff}
#home-motor__title-list>span:nth-child(4){--tc:#f0925a}
#home-motor__title-list>span:nth-child(5){--tc:#f0463c}
#home-motor__title-list>span:nth-child(6){--tc:#f7dc8a}
#home-motor__title-list>span:nth-child(7){--tc:#d9a933}
#home-motor__title-list span.tc:not(.dg),#home-motor__number-list span.tc:not(.dg){display:inline-block;position:static;opacity:1;transform:none;transition:none}   /* the generic title-list span rule would otherwise hide and absolutely position each letter */
#home-motor__title-list.tc-go>span.is-active .tc{animation:tc-paint .5s ease-out both;animation-delay:calc(var(--k) * 110ms + .2s)}
#home-motor__number-list>span:nth-child(1){--tc:#f2b632}
#home-motor__number-list>span:nth-child(2){--tc:#78962b}
#home-motor__number-list>span:nth-child(3){--tc:#a45cff}
#home-motor__number-list>span:nth-child(4){--tc:#f0925a}
#home-motor__number-list>span:nth-child(5){--tc:#f0463c}
#home-motor__number-list>span:nth-child(6){--tc:#f7dc8a}
#home-motor__number-list>span:nth-child(7){--tc:#d9a933}
#home-motor__number-list.tc-go>span.is-active .tc{animation:tc-paint .5s ease-out both;animation-delay:calc(var(--k) * 110ms + .2s)}
@keyframes tc-paint{from{color:inherit}to{color:var(--tc)}}
#home-motor__title-list{--line-height:.89832;--letter-spacing:-4.317;--font-size:144;inset:0}
#home-motor__title-list>span.is-long{top:auto;bottom:0;font-size:calc(88 * var(--screen-unit))}
#home-motor__title-list>span{left:unset;right:0;white-space:nowrap;font-size:calc(var(--font-size) * var(--screen-unit));letter-spacing:calc(var(--letter-spacing) * var(--screen-unit));line-height:var(--line-height)}

@media (max-width: 767.98px){
  #home-motor__head{margin-top:calc(98 * var(--screen-unit))}
  #home-motor__nav-list,#home-motor__jdm,#home-motor__lines,#home-motor__title>span:first-child{display:none}
  #home-motor__nav .nav-date{font-size:1.4em}   /* twice the size runs off a phone and into the step text below; this is the largest that clears both */
  #home-motor__ndaa{--grid-column-start:8;--grid-column-span:5;text-align:right}
  /* The date block above is sized by width (ends at ~220 units), the copy was
     parked by height (~29vh), so on a shorter-than-2:1 phone the copy rode up
     over the time line. Never let it sit above the date block plus a gap. */
  #home-motor__desc-2{top:max(calc(240 * var(--height-unit)), calc(236 * var(--screen-unit)))}
  #home-motor__desc-2 p{--grid-column-start:1;--grid-column-span:10;text-align:left;font-size:calc(16 * var(--screen-unit))}
  #home-motor__title h2{--grid-column-start:1;--grid-column-span:12;text-align:right}
  #home-motor__title h2>span:first-child,#home-motor__title-list{--font-size:50;--line-height:1.29128;--letter-spacing:-1.44}
  #home-motor__title-list>span.is-long{font-size:calc(29 * var(--screen-unit))}
}

/* ---------- Thesis ---------- */
#home-thesis{position:relative;isolation:isolate;background:var(--color-black)}
#home-thesis .section__inner{display:flex;flex-direction:column;justify-content:space-between;height:auto;
  padding-top:calc(var(--header-height) + 2 * var(--site-padding-y));padding-bottom:0}
#home-thesis__content{flex:1;display:flex}
#home-thesis__image{position:relative;flex:none;width:calc(var(--site-padding-x) + var(--grid-span-17));overflow:hidden}
#home-thesis__image img{object-fit:cover;height:100%;width:100%}
#home-thesis__copy{flex:1;padding-left:var(--grid-span-2);padding-right:var(--site-padding-x);font-weight:300}
#home-thesis__copy p{display:flex;flex-direction:column;gap:1.2em;font-size:var(--default)}
#home-thesis__copy a{margin-top:2em;width:20ch;padding:.5em .6em;line-height:1;display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;background:#c0c0c01a;border:none}

/* ---------- Gallery ---------- */
#home-gallery{padding-top:4rem;padding-bottom:2rem}
#home-gallery__gallery{display:flex;flex-direction:column;gap:1.4em;align-items:flex-end}
.main-images-container{position:relative;width:100%;max-height:75vh;overflow:hidden;aspect-ratio:1036/629;background:var(--color-dark-grey)}
.main-images-wrapper{width:100%;height:100%;position:relative}
.main-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.main-image.is-active{opacity:1}
.thumbnails-container{position:relative;display:flex;gap:.7em;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}   /* one row: the photos that do not fit are hidden off to the side, and the row slides to the one on show */
.thumbnails-container::-webkit-scrollbar{display:none}
.thumbnail-button{flex:none;padding:0;border:none;cursor:pointer;width:80px;height:56px;opacity:.35;transition:opacity .2s ease-in-out;background:transparent}
.thumbnail-button.is-active,.thumbnail-button:hover{opacity:1}
.thumbnail-button img{width:100%;height:100%;object-fit:cover}

/* ---------- Specs / Ecosystem ---------- */
/* isolate: the robot canvas (#home-specs__image, z -1) must stay inside this
   section, or it sinks behind #home-thesis's opaque terrain backdrop. */
#home-specs{--active-ratio:1;position:relative;isolation:isolate;min-height:calc(var(--vh) * 100)}
#home-gallery .section__inner{display:flex;flex-direction:column;height:unset;gap:calc(102 * var(--screen-unit));
  padding-top:calc(40 * var(--screen-unit));padding-bottom:0;color:var(--color-grey)}   /* was 200: with the section's own 4rem it left a big empty band above the photos */
#home-specs .section__inner{position:relative;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:center}
/* ---------- Terrain contour wallpaper ----------
   HEIGHT.webp drawn by the original's Terrain shader (js/terrain.js). The
   original paints it on its full-screen WebGL canvas behind the whole DOM.
   On the home page the canvas sticks inside the backdrop, which runs from
   the thesis section to the end of the document. */
/* Painted inside #home-thesis's stacking context, which paints above the
   fixed intro -- so the intro copy stops showing through the transparent
   sections below. */
#terrain-backdrop{position:absolute;top:0;left:0;width:100%;z-index:-2;background:var(--color-black);pointer-events:none}
#terrain-canvas{position:sticky;top:0;display:block;width:100%;height:calc(var(--vh) * 100);pointer-events:none}
/* Thesis and contact: fixed behind the page content. */
#page-terrain{position:fixed;top:0;left:0;width:100%;height:calc(var(--vh) * 100);z-index:-3;display:block;pointer-events:none}
#terrain-canvas.is-fixed{position:fixed;left:0;z-index:-1}
#home-specs__hero{position:relative;margin-top:calc(60 * var(--screen-unit))}   /* the photo starts right under the gallery (it was 200: an empty band between them) */
/* Sizing box for the WebGL robot (the original's rule; the image itself is
   painted on the terrain canvas, so the box stays empty). */
#home-specs__image{position:absolute;top:0;left:50%;transform:translate(-50%);width:calc(var(--site-padding-x) + var(--grid-span-24));aspect-ratio:1832/1234;z-index:-1;pointer-events:none}
#home-specs__robot{display:block;width:100%;height:100%}
#home-specs__title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;text-transform:uppercase;font-size:var(--hero-title);letter-spacing:calc(-1.92 * var(--screen-unit));padding-top:calc(380 * var(--screen-unit));padding-bottom:calc(100 * var(--screen-unit))}
#home-specs__list{position:relative;padding-bottom:calc(140 * var(--screen-unit))}
/* Cards sit on the 24-column grid, 7 columns each (starts 1 / 10 / 18). The
   middle one is pulled back a column and dropped 4em — the original's stagger. */
#home-specs__list>ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);column-gap:var(--grid-gap-width);row-gap:0}
#home-specs__list>ul>li{grid-column:var(--spec-col) / span 7}
#home-specs__list>ul>li:nth-child(1){--spec-col:1}
#home-specs__list>ul>li:nth-child(2){--spec-col:10;transform:translate(calc(-1 * var(--grid-column-width)),4em)}
#home-specs__list>ul>li:nth-child(3){--spec-col:18}
/* isolation keeps the z-index:-1 frame inside the card; without it the frame
   sinks behind the terrain backdrop on cards without a transform. */
#home-specs__list li{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:calc(52 * var(--screen-unit)) calc(44 * var(--screen-unit)) calc(20 * var(--screen-unit));min-height:calc(350 * var(--screen-unit))}
/* The frame is its own element so it can scale open from the centre; the
   corner ticks ride its edges. Border + fill live here, not on the <li>. */
#home-specs__list .squares-decorator{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;border:1px solid rgba(255,255,255,.2);background:#10100f4d}
#home-specs__list .squares-decorator > span{position:absolute;width:calc(6 * var(--screen-unit));height:calc(6 * var(--screen-unit));background:var(--color-white)}
#home-specs__list .squares-decorator > span:nth-child(1){top:0;left:0;transform:translate(-50%,-50%)}
#home-specs__list .squares-decorator > span:nth-child(2){top:0;right:0;transform:translate(50%,-50%)}
#home-specs__list .squares-decorator > span:nth-child(3){bottom:0;left:0;transform:translate(-50%,50%)}
#home-specs__list .squares-decorator > span:nth-child(4){bottom:0;right:0;transform:translate(50%,50%)}
#home-specs__list .squares-decorator > span:nth-child(5){top:25%;right:0;transform:translate(50%,25%)}
#home-specs__list .squares-decorator > span:nth-child(6){top:25%;left:0;transform:translate(-50%,25%)}
/* The original ships the pixel icons but hides them (display:none everywhere). */
.home-spec__icon{display:none;width:calc(60 * var(--screen-unit));height:calc(60 * var(--screen-unit))}
/* Copy block fills the rest of the card and centres vertically. */
#home-specs__list li>div:nth-child(2){flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}   /* name on top, address and directions at the bottom */
#home-specs__list h6{text-transform:uppercase;margin:0;font-size:var(--h6);line-height:1.2;letter-spacing:-.51px;font-weight:500}
#home-specs__list .caption1{color:var(--color-spec-grey);font-weight:300;text-transform:none;letter-spacing:-.72px;margin:1em 0}
/* Venue cards: the name on top in the invitation's script, a thin gold rule, then the address and a directions button at the bottom. */
#home-specs__list li{min-height:calc(250 * var(--screen-unit));text-align:center}
#home-specs__list li>div:first-child{padding-bottom:calc(18 * var(--screen-unit));border-bottom:1px solid rgba(220,174,77,.45)}
#home-specs__list h6{font-family:"Alex Brush",cursive;font-weight:400;text-transform:none;letter-spacing:0;font-size:calc(32 * var(--screen-unit));line-height:1.1;color:var(--color-warm-white)}
#home-specs__list li>div:nth-child(2) .caption1:not(.venue-link){color:var(--color-warm-white);opacity:.9;font-size:calc(18 * var(--screen-unit));line-height:1.35;letter-spacing:0;margin:1.1em 0 1em}
#home-specs__list .venue-link{align-self:center;display:inline-flex;align-items:center;margin:0 0 .4em;padding:.6em .9em;border:1px solid #dcae4d;color:#dcae4d;font-size:calc(14 * var(--screen-unit));font-weight:500;letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;text-decoration:none;transition:background .25s ease,color .25s ease}
#home-specs__list .venue-link:hover,#home-specs__list .venue-link:focus-visible{background:#dcae4d;color:var(--color-black)}

/* ---------- Build to spec CTA ---------- */
#home-build-to-spec{position:relative;overflow:hidden}
#home-build-to-spec .section__inner{position:relative;z-index:2;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding-top:calc(250 * var(--screen-unit));padding-bottom:calc(150 * var(--screen-unit))}
/* Sentence case at weight 500, exactly as the original -- uppercase made each
   line wrap and doubled the block (660px instead of 285px). The two lines
   are then pulled together with the original's negative leading. */
#home-build-to-spec-title{width:100%;display:flex;flex-direction:column;text-align:center;
  font-size:calc(var(--h2) * .75);line-height:1.1;letter-spacing:calc(-4.5 * .75 * var(--screen-unit));font-weight:500}
#home-build-to-spec-title > :nth-child(1){margin-top:-.1em}
#home-build-to-spec-title > :nth-child(2){margin-top:-.2em}
#home-build-to-spec-title .char-mask{overflow-clip-margin:.05em}
#home-rsvp{position:relative;margin-top:calc(80 * var(--screen-unit));max-width:46ch;display:flex;flex-direction:column;align-items:center;gap:calc(48 * var(--screen-unit));text-align:center;font-size:var(--p1,1.1em)}
#home-rsvp p{margin:0;color:var(--color-white)}
#home-rsvp__love{text-transform:uppercase;font-weight:500;white-space:nowrap}
#home-build-to-spec-button{position:relative;margin-top:calc(120 * var(--screen-unit))}
/* flex + fit-content, not inline-flex: an inline-flex anchor sits in a line
   box and the extra leading pushed the button ~28px down the section. */
#home-build-to-spec-button > div{display:flex;flex-direction:column;align-items:center;justify-content:center}
#home-build-to-spec-button a{position:relative;background:var(--color-dark-black);text-decoration:none;color:var(--color-white);padding:31px 44px 31px 52px;font-size:var(--caption1);display:flex;align-items:center;gap:1em;border:none;width:fit-content;overflow:hidden}
#home-build-to-spec-button a svg{width:1.5em;height:1.5em;fill:var(--color-white)}
#home-build-to-spec-button a:hover{background:var(--color-primary);color:var(--color-black)}
#home-build-to-spec-button a:hover svg{fill:var(--color-black)}

/* ---------- Footer ---------- */
/* As on the original: z-index 2 and opaque, so it paints over the fixed
   #background-grid (also z 2, earlier in the DOM) and the grid ends at the
   last section instead of running through the footer. */
#site-footer{position:relative;background-color:transparent;z-index:2;padding-top:calc(52 * var(--screen-unit));padding-bottom:calc(60 * var(--screen-unit))}
#site-footer:before,#site-footer:after{content:"";position:absolute;left:0;width:100%;height:8px;border-top:1px solid var(--color-warm-white);border-bottom:1px solid var(--color-warm-white);opacity:.1}
#site-footer:before{top:8px}
#site-footer:after{bottom:8px}
/* Rows are .o-grid (24 columns) as on the original; the values below are
   its desktop rules. */
#site-footer a{text-decoration:none}
#site-footer__top,#site-footer__bottom,#site-footer__top a,#site-footer__bottom a{color:#cccbbd80}
#site-footer__links,#site-footer__social,#site-footer__emails{display:flex;flex-direction:column;gap:calc(16 * var(--screen-unit));padding-bottom:0;text-transform:uppercase}
#site-footer__links > div:first-child,#site-footer__social > div:first-child,#site-footer__emails > div:first-child{color:#cccbbd80;margin-bottom:calc(8 * var(--screen-unit))}
#site-footer__links a,#site-footer__social a,#site-footer__emails a{color:var(--color-white)}
#site-footer__links{--grid-column-start:1;--grid-column-span:9}   /* spread across the width: left, middle, right, in line with the bottom row */
#site-footer__social{--grid-column-start:10;--grid-column-span:9}
#site-footer__emails{--grid-column-start:19;--grid-column-span:6}
#site-footer__emails > a{white-space:nowrap;word-break:normal;overflow-wrap:normal}
/* names in one column, numbers lined up in the next */
#site-footer__emails a .flip-a,#site-footer__emails a .flip-b{display:grid;grid-template-columns:6.5em auto;column-gap:.5em;align-items:baseline}
#site-footer__emails a .flip-b{grid-auto-flow:column;white-space:nowrap}
#site-footer__emails a .flip-a span{text-align:left}
#site-footer__bottom{padding-top:calc(72 * var(--screen-unit))}
#site-footer__bottom > :nth-child(1){--grid-column-start:1;--grid-column-span:9}
#site-footer__bottom > :nth-child(2){--grid-column-start:10;--grid-column-span:5}
#site-footer__bottom > :nth-child(3){--grid-column-start:15;--grid-column-span:4}
#site-footer__bottom > :nth-child(4){--grid-column-start:19;--grid-column-span:6;text-align:right}

/* ---------- Scroll indicator ----------
   The original's own scrollbar (the native one is hidden): a white bar on
   the right edge that tracks the scroll position and can be dragged. It
   slides in during the preloader handoff; on phones it only shows while
   scrolling. Driven from js/main.js. */
#scroll-indicator{position:fixed;top:0;right:0;width:0;height:calc(var(--vh) * 100);z-index:20}
#scroll-indicator__bar{position:absolute;top:0;right:0;width:10px;height:200px;background-color:var(--color-white);pointer-events:auto;transform:translate3d(100%,0,0);touch-action:none;user-select:none}
@media (max-width:767.98px){#scroll-indicator__bar{width:4px;height:100px}}

/* ---------- Preloader ---------- */
/* Preloader — the original's markup and rules. It is transparent: the page
   background and the background grid (sized to #preloader-content while it
   runs) show through, and the page itself stays hidden until it starts. */
#preloader{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center}
#preloader canvas{position:fixed;top:0;left:0;width:100%;height:100%}
#preloader .o-container{height:auto}
#preloader-content{--grid-column-span:10;--grid-column-start:8;position:relative;top:calc(25px - var(--pn-h) / 2);overflow:hidden;display:flex;flex-direction:column;align-items:center;--pn-h:calc(var(--pn-size) * 4.6)}   /* names stacked above the diya; the box rises by half their height so the diya keeps its place, 25px below centre, where the mandala is */
#preloader-left{order:1}
#preloader-content::before{order:2}
#preloader-right{order:3}
#preloader-logo{order:4}
#preloader-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5em;margin-top:calc(81 * var(--screen-unit));margin-bottom:calc(87 * var(--screen-unit))}
#preloader-logo>span:nth-child(1){height:7em}
#preloader-logo svg{display:block;fill:var(--color-white)}
#preloader-left,#preloader-right{will-change:transform;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25em;text-transform:uppercase;font-size:calc(2 * var(--default));text-shadow:0 0 5px #3a0e1a,0 0 10px #3a0e1a,0 0 18px #3a0e1a,0 0 28px #3a0e1a}
#preloader-left span,#preloader-right span{display:inline-block}
/* The two names on the loading screen: gold Tangerine script, stacked, with a line-heart-line between */
#preloader{--pn-size:calc(1.9 * var(--default))}   /* the names' size; the divider and spacing follow it */
#preloader-left span:nth-child(2),#preloader-right span:first-child{font-family:"Tangerine",cursive;font-weight:700;text-transform:none;font-size:calc(var(--pn-size) * 1.92);line-height:1;white-space:nowrap;position:relative;padding:.18em .22em .26em;margin:-.18em -.22em -.26em;color:transparent;text-shadow:none;background:linear-gradient(100deg,#d9b46a 0%,#f3dca4 24%,#fff3d1 34%,#e8c886 46%,#c99d52 62%,#f3dca4 80%,#d9b46a 100%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 2px #3a0e1a) drop-shadow(0 0 6px #3a0e1a) drop-shadow(0 0 14px #3a0e1a);animation:name-shimmer 3.4s linear infinite}
#preloader-left span:nth-child(2)::before,#preloader-right span:first-child::before,#preloader-left span:nth-child(2)::after,#preloader-right span:first-child::after{content:"";position:absolute;width:.34em;height:.34em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 14.2 9.8 24 12 14.2 14.2 12 24 9.8 14.2 0 12 9.8 9.8Z' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;pointer-events:none;animation:name-twinkle 2.6s ease-in-out infinite}
#preloader-left span:nth-child(2)::before,#preloader-right span:first-child::before{left:8%;top:6%}
#preloader-left span:nth-child(2)::after,#preloader-right span:first-child::after{right:6%;bottom:12%;width:.26em;height:.26em;animation-delay:1.3s}
#preloader-left span:nth-child(2)::after,#preloader-right span:first-child::before{animation-delay:.7s}
@keyframes name-shimmer{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes name-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){#preloader-left span:nth-child(2),#preloader-right span:first-child{animation:none;background-position:0 0}#preloader-left span:nth-child(2)::before,#preloader-right span:first-child::before,#preloader-left span:nth-child(2)::after,#preloader-right span:first-child::after{animation:none}}
#preloader-left span:nth-child(1){display:none}   /* the white loading bar beside the name is gone */
#preloader-content::before{content:"";flex:none;width:calc(var(--pn-size) * 6.5);height:calc(var(--pn-size) * .72);margin:calc(var(--pn-size) * .12) 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5 10.3 20C4.2 14.5.2 10.9.2 6.5.2 2.9 3 .2 6.5.2c2 0 3.9.9 5.5 2.4C13.6 1.1 15.5.2 17.5.2c3.5 0 6.3 2.7 6.3 6.3 0 4.4-4 8-10.1 13.5Z' fill='%23e8c886'/%3E%3C/svg%3E") center/auto 100% no-repeat,linear-gradient(90deg,transparent,#c99d52 60%) left center/40% 1px no-repeat,linear-gradient(90deg,#c99d52 40%,transparent) right center/40% 1px no-repeat;filter:drop-shadow(0 0 4px #3a0e1a);opacity:calc(1 - var(--pn-out, 0));transform:scale(calc(1 + var(--pn-out, 0) * .25))}   /* line, heart, line between the names; --pn-out (0..1) fades it as the loader leaves */
#preloader-right span:last-child{display:none}
@media (max-width:767.98px){#preloader-content{--grid-column-span:10;--grid-column-start:2}}
html.js:not(.preloader-done) #site-header,html.js:not(.preloader-done) #site-content{visibility:hidden}
/* #hero-canvas sets its own visibility, so it needs hiding explicitly. */
html.js:not(.preloader-done) #hero-canvas{visibility:hidden}
html.preloader-done #preloader{pointer-events:none}
html.js:not(.preloader-done) body{overflow:hidden}


/* ---------- Background grid (2D canvas, mirrors the original) ---------- */
#background-grid{position:fixed;top:0;left:0;width:100%;height:100%;transform-origin:0 0;pointer-events:none;z-index:2;transition:opacity .8s ease}
/* no grid lines on the loading screen; they fade in as it hands over to the page (the canvas keeps drawing underneath) */
html.js:not(.preloader-done) #background-grid{opacity:0}
/* Invisible reference box the grid brackets — matches the hero title block */
#background-grid-ref{position:fixed;top:0;left:0;height:100vh;width:100%;pointer-events:none;visibility:hidden;z-index:-1}
#background-grid-ref .o-container{position:relative;height:100%}
#background-grid-ref__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:4lh;font-size:var(--hero-script);line-height:1.02;width:calc(var(--grid-span-width) * 18 + .5 * var(--grid-column-width))}
#site-content{position:relative;z-index:1}

/* ---------- Scroll reveal (progressive enhancement) ---------- */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
html.js .reveal.is-visible{opacity:1;transform:none}

/* ---------- Editorial pages (Thesis, Contact) ---------- */
.editorial-page .section__inner{padding-top:calc(220 * var(--screen-unit));padding-bottom:calc(140 * var(--screen-unit))}
.editorial-page__title{text-transform:uppercase;font-weight:500;display:flex;flex-direction:column;margin-bottom:calc(64 * var(--screen-unit))}
.editorial-page__image{width:100%;max-height:60vh;overflow:hidden;margin-bottom:calc(80 * var(--screen-unit))}
.editorial-page__image img{width:100%;height:100%;object-fit:cover}
.editorial-page__content{max-width:62ch;margin-left:auto;display:flex;flex-direction:column;gap:calc(36 * var(--screen-unit))}
.thesis-text p{margin:0;color:var(--color-white)}
.editorial-page__content .thesis-text:last-child p{text-transform:uppercase;font-weight:500}

/* ---------- Writing index ---------- */
#writing-list{max-width:62ch;margin-left:auto;display:flex;flex-direction:column;gap:calc(48 * var(--screen-unit))}
#writing-list a{display:flex;flex-direction:column;gap:.7em;text-decoration:none;color:var(--color-white)}
.writing-date{color:var(--color-spec-grey)}
.writing-title{font-size:var(--h5);line-height:1.13;letter-spacing:-.9px;font-weight:500;text-transform:uppercase}
.writing-excerpt{color:var(--color-spec-grey)}
#writing-list a:hover .writing-title{color:var(--color-primary)}

/* ---------- Contact form ---------- */
#contact-form{max-width:62ch;margin-left:auto;margin-top:calc(72 * var(--screen-unit));display:grid;grid-template-columns:1fr 1fr;gap:calc(28 * var(--screen-unit))}
.contact-field{display:flex;flex-direction:column;gap:.6em}
.contact-field--wide{grid-column:1 / -1}
.contact-field label{font-size:var(--caption1);text-transform:uppercase;font-weight:500;color:var(--color-spec-grey)}
.contact-field input,.contact-field textarea{background:transparent;border:0;border-bottom:1px solid #ffffff33;color:var(--color-white);font-family:inherit;font-size:var(--p2);padding:.6em 0;outline:none;resize:vertical}
.contact-field input:focus,.contact-field textarea:focus{border-bottom-color:var(--color-white)}
#contact-submit{grid-column:1 / -1;justify-self:start;background:var(--color-white);color:var(--color-black);border:0;font-family:inherit;font-weight:500;text-transform:uppercase;font-size:var(--caption1);letter-spacing:-.36px;padding:1.1em 2em;cursor:pointer;transition:background .2s ease,color .2s ease}
#contact-submit:hover{background:var(--color-primary);color:var(--color-black)}
#contact-note{grid-column:1 / -1;color:var(--color-spec-grey);text-transform:none}
#contact-emails{max-width:62ch;margin-left:auto;margin-top:calc(72 * var(--screen-unit));display:flex;flex-wrap:wrap;gap:calc(28 * var(--screen-unit)) calc(64 * var(--screen-unit));text-transform:uppercase}
#contact-emails div{display:flex;flex-direction:column;gap:.6em}
#contact-emails span{color:#cccbbd80}
#contact-emails a{color:var(--color-white);text-decoration:none}
/* The sign-off after the phone numbers: same gap as above them, or it runs into the last number. */
#contact-emails + .editorial-page__content{margin-top:calc(72 * var(--screen-unit))}

/* ---------- Page transitions ---------- */
/* The original cross-fades its page container: 0.2s out, 0.3s in. */
html.js #site-content{transition:opacity .3s ease}
/* Keep wide content (motor title slides, terrain, footer columns on phones)
   from widening the layout viewport — the fixed header spans the layout
   viewport, so that pushed its menu button off-screen. clip, not hidden,
   so sticky sections keep working. */
#site-content,#site-footer{overflow-x:clip}
html.js.is-page-entering #site-content{opacity:0;transition:none}
html.js.is-page-leaving #site-content{opacity:0;transition-duration:.2s}
/* Header, footer and grid are outside #site-content, so they stay
   mounted and untouched across a swap — exactly as in the original. */

/* ---------- WebGL scenes ---------- */
.scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity .8s ease}
.scene-canvas.is-ready{opacity:1}
/* Static stand-in shown until the scene is ready, and permanently if WebGL
   is unavailable — these are the original site's own fallback renders. */
.scene-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1;transition:opacity .8s ease}
.scene-fallback.is-hidden{opacity:0}
#home-drone .scene-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center}
#home-drone .section__inner:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(30,6,12,.82) 0%,rgba(30,6,12,.45) 45%,rgba(30,6,12,.08) 75%)}

/* ---------- Split text (per-character reveal) ---------- */
.split-line{display:block}
.word{display:inline-block;white-space:nowrap}
.char-mask{display:inline-block;overflow:hidden;overflow-clip-margin:.05em;vertical-align:top}
/* The script (Alex Brush) lettering has long swashes that reach past each letter's box, so the mask around each letter is
   widened (overflow-clip-margin only works with overflow:clip) instead of cutting the first letters of a line short. */
#home-specs__list h6 .char-mask,#home-hero .hero-title .char-mask{overflow:clip;overflow-clip-margin:.4em}
.char{display:inline-block;will-change:transform,opacity}
html.js .is-split-pending{opacity:0}

/* ---------- Flip-text link hover ---------- */
.flip-wrap{display:inline-block;overflow:hidden;position:relative;vertical-align:top}
.flip-wrap .flip-a,.flip-wrap .flip-b{display:block;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.flip-wrap .flip-b{position:absolute;left:0;top:0;transform:translateY(100%)}
a:hover .flip-wrap .flip-a{transform:translateY(-100%)}
a:hover .flip-wrap .flip-b{transform:translateY(0)}

/* ---------- Responsive ---------- */
/* ---------- Phones: the original's max-width:767.98px rules ----------
   Ported from its stylesheet and checked element by element against the
   live site at 390px. Spans are on the phone grid (12 columns, see :root
   above): n columns = n * --grid-column-width + (n - 1) * --grid-gap-width,
   and each column start adds one --grid-span-width. */
@media (max-width: 767.98px){
  /* Header: logo, Order Now and the menu button in one centred row. Only
     the nav links and the subtitle go. */
  #site-header{align-items:center}
  #site-header-nav ul{display:none}
  #site-header-cta-container{flex-direction:row;align-items:center;gap:calc(8 * var(--screen-unit))}
  #site-header-cta__subtitle{display:none}
  #home-hero__scroll-to-explore > span{left:0;right:0;text-align:center}

  /* Hero: the title takes the full width; its size is --hero-script (Alex Brush: the longest line,
     "Our Families", is 6.76 em wide, so 13.5vw is the most that fits; 11.7vw is in use). Copy on columns 2..11. */
  #home-hero .hero-title{width:100%;margin-left:0;font-size:var(--hero-script)}
  .hero-copy{line-height:1.25;letter-spacing:0}
  .hero-copy > span{width:calc(10 * var(--grid-column-width) + 9 * var(--grid-gap-width));margin-left:var(--grid-span-width)}

  /* Drone: title and copy drop to the bottom-left of the pinned frame. */
  #home-drone .scene-content{justify-content:flex-end}
  #home-drone__title{flex:none;margin:0 0 0 var(--grid-span-width);width:calc(11 * var(--grid-column-width) + 10 * var(--grid-gap-width))}
  #home-drone__title h2{align-items:flex-start;text-align:left}
  #home-drone{--inv:4.7vw}
  #home-drone__desc{margin:0 auto calc(70 * var(--screen-unit));width:calc(100% - 2 * var(--site-padding-x))}

  /* Thesis: image full-bleed on top (its box runs past the right edge and is
     clipped, as on the original), copy below with a wide right margin. */
  #home-thesis__content{flex-direction:column;flex-wrap:nowrap;gap:0}
  #home-thesis__copy{padding-left:calc(var(--site-padding-x) + var(--grid-column-width));padding-right:calc(var(--grid-span-width) * 3 + var(--grid-column-width))}
  #home-thesis__copy p{font-size:var(--default);margin-top:3em}
  #home-thesis__copy a{margin-top:2em}

  /* Gallery */
  #home-gallery .section__inner{gap:calc(52 * var(--screen-unit))}
  #home-gallery__gallery{gap:calc(22 * var(--screen-unit))}
  .thumbnails-container{gap:calc(7 * var(--screen-unit))}
  .thumbnail-button{width:calc(40 * var(--screen-unit));height:calc(29 * var(--screen-unit))}

  /* Ecosystem: the first title line spans the full width with the logo
     between the words; cards stack in one column, inset a column. */
  #home-specs__hero{width:100%;margin-top:calc(30 * var(--screen-unit));padding:0 var(--site-padding-x)}
  #home-specs__title{width:100%}
  #home-specs__list>ul{display:flex;flex-direction:column;gap:2em;padding:0 var(--grid-column-width)}
  #home-specs__list>ul>li:nth-child(n){transform:none}
  #home-specs__list h6{font-size:calc(34 * var(--screen-unit))}
  #home-specs__list .venue-link{font-size:calc(15 * var(--screen-unit));letter-spacing:.1em;padding:.6em 1.2em}

  /* Closing CTA */
  #home-build-to-spec .section__inner{padding-top:calc(106 * var(--screen-unit))}
  #home-build-to-spec-title{font-size:calc(40.5 * var(--screen-unit));line-height:calc(37 * var(--screen-unit));letter-spacing:-1.2px}
  #home-build-to-spec-title > :nth-child(1),#home-build-to-spec-title > :nth-child(2){margin-top:0}
  #home-build-to-spec-button{padding-top:calc(36 * var(--screen-unit))}
  #home-build-to-spec-button > div{gap:2em}
  #home-build-to-spec-button a{font-size:16px;padding:17px 24px 18px 17px}

  /* Footer: one centred column, a large logo above the legal links. */
  #site-footer{padding-top:calc(30 * var(--screen-unit));padding-bottom:calc(64 * var(--screen-unit))}
  #site-footer__top,#site-footer__bottom{display:flex;flex-direction:column;gap:1em;font-size:calc(11 * var(--screen-unit));letter-spacing:calc(-.33 * var(--screen-unit))}
  #site-footer__links,#site-footer__social,#site-footer__emails{text-align:center;gap:calc(10 * var(--screen-unit));padding-bottom:calc(14 * var(--screen-unit))}
  #site-footer__emails{padding-bottom:0}
  #site-footer__emails a{letter-spacing:.03em;word-spacing:.2em}   /* the tight footer tracking ran the digits together; every number gets the same gap above it */
  #site-footer__bottom{margin-top:0;padding-top:calc(36 * var(--screen-unit));padding-bottom:calc(24 * var(--screen-unit));align-items:center;gap:1.25em}
  #site-footer__bottom > :nth-child(3){display:none}
}

/* Background music toggle (js/music.js): bottom left, above the page, shown once the loader is gone */
#sound-toggle{position:fixed;left:var(--site-outer-padding-x);bottom:calc(16 * var(--screen-unit));z-index:100;display:flex;align-items:center;gap:.7em;padding:.55em .8em;border:1px solid rgba(238,232,232,.45);background:rgba(30,6,12,.78);color:var(--color-white);font:inherit;font-size:calc(12 * var(--screen-unit));line-height:1;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:opacity .4s ease,border-color .2s;will-change:opacity;transform:translateZ(0)}
#sound-toggle:hover{border-color:var(--color-white)}
#sound-toggle[hidden]{display:none}
html:not(.preloader-done) #sound-toggle{opacity:0;pointer-events:none}
.sound-toggle__bars{display:flex;align-items:flex-end;gap:2px;width:14px;height:12px}
.sound-toggle__bars i{display:block;width:3px;height:3px;background:#e8b64a;transform-origin:bottom}
#sound-toggle.is-playing .sound-toggle__bars i{animation:sound-bar 1s ease-in-out infinite alternate}
#sound-toggle.is-playing .sound-toggle__bars i:nth-child(2){animation-delay:-.4s}
#sound-toggle.is-playing .sound-toggle__bars i:nth-child(3){animation-delay:-.75s}
@keyframes sound-bar{from{height:3px}to{height:12px}}
@media (prefers-reduced-motion:reduce){#sound-toggle.is-playing .sound-toggle__bars i{animation:none;height:9px}}

/* Loading screen backdrop: the mandala as golden lines, cut along the circles drawn in the artwork into four
   rings. Three double-line circles (at .346, .570 and .765 of the radius; the cuts run through the empty
   gap between the two lines of each pair) split it, so each ring keeps its own circle line and the seams
   are invisible. Each ring is its own layer with its own mask and turns at its own pace, alternating
   direction. A wide, soft ring of light is born at the centre and spreads outward across all of them at an
   even pace, like the glint on the terrain wallpaper (a scaled pseudo-element, so it stays smooth; each
   ring's mask clips it to the lines). main.js fades the backdrop out with the loader. */
/* The first thing on the loading screen after the maroon: a small (about 35 KB) still of the contour wallpaper. The live wallpaper
   (#preloader-terrain, 770 KB texture) fades in over it once its texture is in, so there is never a blank wait. */
#preloader-backdrop{position:absolute;inset:0;pointer-events:none;background:#3a0e1a url(../images/preloader-bg.webp) left bottom/100% auto no-repeat}   /* same placement as the live shader: texture as wide as the screen, anchored to the bottom */
@media (max-width:767.98px){#preloader-backdrop{background-image:url(../images/preloader-bg-m.webp)}}
#preloader-terrain{opacity:0;transition:opacity 1.2s ease}
#preloader-terrain.is-ready{opacity:1}
#preloader-terrain{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}   /* contour wallpaper (js/preloader-terrain.js) */
.pfw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}   /* fireworks (js/preloader-fireworks.js) */
#preloader-mandala{--m:min(96vmin,1000px);position:absolute;left:50%;top:calc(50% + 25px);width:var(--m);height:var(--m);margin:calc(var(--m) / -2) 0 0 calc(var(--m) / -2);pointer-events:none;opacity:0;animation:mandala-in 1.4s ease .1s forwards}
.pm-ring{position:absolute;inset:0;display:block;background:linear-gradient(115deg,#b98a30 0%,#dcae4d 50%,#b98a30 100%);will-change:transform;contain:paint;backface-visibility:hidden}   /* own layer per ring, and the 4x glow inside is clipped to the ring box instead of rasterised at 4000px */
/* The old travelling glow lived inside each masked, turning ring and forced all four to be redrawn on every frame (a stutter
   on desktop). The shimmer is now an opacity wave from the inner ring outward, which the compositor does on its own. */
.pm-ring:after{display:none}
.pm-r1{-webkit-mask:url(../images/preloader-ring-1.webp) center/contain no-repeat;mask:url(../images/preloader-ring-1.webp) center/contain no-repeat;animation:mandala-turn 60s linear infinite,mandala-glint 4.2s ease-in-out 0s infinite}
.pm-r2{-webkit-mask:url(../images/preloader-ring-2.webp) center/contain no-repeat;mask:url(../images/preloader-ring-2.webp) center/contain no-repeat;animation:mandala-turn-back 90s linear infinite,mandala-glint 4.2s ease-in-out .35s infinite}
.pm-r3{-webkit-mask:url(../images/preloader-ring-3.webp) center/contain no-repeat;mask:url(../images/preloader-ring-3.webp) center/contain no-repeat;animation:mandala-turn 130s linear infinite,mandala-glint 4.2s ease-in-out .7s infinite}
.pm-r4{-webkit-mask:url(../images/preloader-ring-4.webp) center/contain no-repeat;mask:url(../images/preloader-ring-4.webp) center/contain no-repeat;animation:mandala-turn-back 180s linear infinite,mandala-glint 4.2s ease-in-out 1.05s infinite}
@keyframes mandala-in{to{opacity:.9}}
@keyframes mandala-ring{0%{transform:scale(.04)}78%,100%{transform:scale(4.2)}}
@keyframes mandala-glint{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes mandala-turn{to{transform:rotate(360deg)}}
@keyframes mandala-turn-back{to{transform:rotate(-360deg)}}
/* on a phone the whole pattern fits the screen with a small margin (inside the arch frame) */
@media (max-width:767.98px){#preloader-mandala{--m:min(66vw,72vh);animation-name:mandala-in-bright}.pm-ring{background:linear-gradient(115deg,#d8a640 0%,#f7dc8a 50%,#d8a640 100%)}}
@keyframes mandala-in-bright{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pm-ring{animation:none}}

/* The loading screen waits for a click: once the page is ready a small line at the bottom says so,
   and the loader only leaves when it is clicked or tapped (main.js, runPreloader). Text only. */
#preloader-enter{position:absolute;left:50%;bottom:max(5vh,calc(32 * var(--screen-unit)));transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:1em;padding:.6em 1.2em;border:0;background:none;color:var(--color-warm-white);font:inherit;font-size:var(--caption1);line-height:1;letter-spacing:.22em;font-weight:500;text-shadow:0 0 4px #3a0e1a,0 0 8px #3a0e1a,0 0 14px #3a0e1a,0 0 22px #3a0e1a;text-transform:uppercase;white-space:nowrap;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s}
html.preloader-ready:not(.preloader-done) #preloader-enter{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s;animation:enter-pulse 2.2s ease-in-out .8s infinite}
#preloader-enter:focus,#preloader-enter:focus-visible{outline:none}   /* just the text, no box or ring */
html.preloader-ready:not(.preloader-done) #preloader{cursor:pointer}
@keyframes enter-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){html.preloader-ready:not(.preloader-done) #preloader-enter{animation:none}}

/* Watercolour floral arch around the loading screen, phone only (the supplied picture; the window of the arch is
   cleared so the burgundy shows through, the paper is toned to gold and the flowers keep their colours). It is
   scaled to cover the screen and centred. It fades in with the loader and leaves with it (inside
   #preloader-backdrop). */
.pf{display:none}
@media (max-width:767.98px){
  .pf{display:block;position:absolute;inset:0;pointer-events:none;opacity:0;background:url(../images/preloader-frame.webp) center/cover no-repeat;animation:mandala-in 1.4s ease .1s forwards}
  #preloader #preloader-enter{bottom:166px;font-size:calc(var(--caption1) * .5)}
  #preloader{padding-top:7vh}   /* the name block and mandala sit a little lower, centred in the arch window */
  #preloader-mandala{margin-top:calc(var(--m) / -2 + 3.5vh)}
}
/* Desktop: no picture behind the mandala; the loader is the plain maroon with the gold mandala, names and tap line. */
@media (min-width:768px){
  .pf{display:none}
  /* The names sit above the mandala, clear of its rim, as on phones: the diya drops by the extra gap
     (--pl-gap) and the box rises by half of it, so the diya stays at the mandala's centre. */
  #preloader{--pm:min(56vh,520px);--pn-size:calc(1.9 * 1.5 * var(--default))}   /* names half as big again as on phones */
  #preloader-mandala{--m:var(--pm)}
  #preloader-content{--pl-gap:calc(var(--pm) / 2 - 3.5em + 2.5vh - 81 * var(--screen-unit));top:calc(25px - var(--pn-h) / 2 - var(--pl-gap) / 2)}
  #preloader-logo{margin-top:calc(81 * var(--screen-unit) + var(--pl-gap))}
  /* On one line: Sunny, then the line-heart-line, then Nikita; the diya wraps onto its own row below. */
  #preloader-content{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;--pn-h:calc(var(--pn-size) * 1.8)}
  #preloader-left{grid-area:1/1;align-items:flex-end}
  /* Here the line runs up and down through the heart, a short upright divider between the names (its negative margins keep
     the row as tall as the names, so --pn-h stays as it is). */
  #preloader-content::before{grid-area:1/2;width:calc(var(--pn-size) * .9);height:calc(var(--pn-size) * 3);margin:calc(var(--pn-size) * -.55) calc(var(--pn-size) * 1.1);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5 10.3 20C4.2 14.5.2 10.9.2 6.5.2 2.9 3 .2 6.5.2c2 0 3.9.9 5.5 2.4C13.6 1.1 15.5.2 17.5.2c3.5 0 6.3 2.7 6.3 6.3 0 4.4-4 8-10.1 13.5Z' fill='%23e8c886'/%3E%3C/svg%3E") center/auto calc(var(--pn-size) * .72) no-repeat,linear-gradient(180deg,transparent,#c99d52 60%) center top/1px 38% no-repeat,linear-gradient(180deg,#c99d52 40%,transparent) center bottom/1px 38% no-repeat}
  #preloader-right{grid-area:1/3;align-items:flex-start}
  #preloader-logo{grid-area:2/1/3/4}
  #preloader #preloader-enter{bottom:calc(9vh + 36px)}
}
@media (prefers-reduced-motion:reduce){.pf{animation:none;opacity:1}}