/* ==========================================================================
   Asian Emporio — site stylesheet  (v3 · bright showroom)
   Palette: brand identity document (Ojasvi Khandelwal, 2024), lifted for a
   bright ground. Copper #AE8035 is used as the brass accent; Oyster #EFEBE0
   is lightened to ivory and linen; Truffle #605F4B is deepened to charcoal.
   Type: Cormorant Garamond (display) + Manrope (text), self-hosted.
   Qanelas (brand body face) still takes over automatically if its licensed
   files are dropped into /assets/fonts/ and fonts.css is generated.
   Design idea: the page is a lit, ivory showroom; photographs of lighting sit
   in arched "windows", and product images sit in soft pools of light.
   ========================================================================== */

@font-face{font-family:"Cormorant Garamond";src:url("/assets/fonts/CormorantGaramond-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/fonts/Manrope-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* Qanelas @font-face rules are generated into /assets/css/fonts.css by the build only when the licensed files exist in static/assets/fonts/. */

:root{
  /* brand hues (unchanged) */
  --copper:#AE8035; --truffle:#605F4B; --oyster:#EFEBE0;
  --terracotta:#BB7458; --sand:#C4A380; --sage:#939580;

  /* bright system */
  --ivory:#FBF8F2;       /* primary ground */
  --linen:#F3EEE5;       /* secondary ground */
  --linen-2:#EAE3D6;
  --white:#FFFFFF;
  --line:#E7E0D2;        /* hairlines on ivory */
  --line-2:#D9CFBC;      /* stronger hairline, input borders */
  --ink:#24231D;         /* charcoal text */
  --ink-2:#3D3B32;
  --muted:#696756;       /* secondary text — AA on ivory, linen and white */
  --brass:#AE8035;       /* accent for rules, icons, glow (not body text) */
  --brass-deep:#83601F;  /* accent for text and hovers — AA */
  --brass-soft:#C9A96E;
  --champagne:#EADFC6;
  --glow:233,212,166;    /* rgb triplet for warm light */
  --char:#1F1E19;        /* footer ground */
  --char-2:#2A2922;
  --char-line:#37352D;

  /* legacy names kept so inline styles and scripts resolve */
  --night:var(--char); --night-2:var(--char-2); --night-3:#3A382F; --night-line:var(--char-line);
  --paper:var(--ivory); --paper-2:var(--linen); --paper-3:var(--linen-2); --paper-line:var(--line);

  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --font:"Qanelas","Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --fs-body:clamp(1rem,.97rem + .12vw,1.0625rem);
  --fs-small:clamp(.86rem,.84rem + .08vw,.92rem);
  --fs-lead:clamp(1.1rem,1rem + .42vw,1.32rem);
  --fs-h3:clamp(1.4rem,1.22rem + .6vw,1.8rem);
  --fs-h2:clamp(2.05rem,1.5rem + 2.3vw,3.7rem);
  --fs-h1:clamp(2.6rem,1.7rem + 3.7vw,5.4rem);
  --fs-display:clamp(3.1rem,1.6rem + 5.4vw,7.4rem);

  --gutter:clamp(1.1rem,.4rem + 3.6vw,4.5rem);
  --maxw:90rem;
  --measure:38rem;
  --sec:clamp(4.25rem,2.6rem + 7vw,10rem);
  --sec-tight:clamp(2.75rem,2rem + 3.5vw,5.5rem);
  --header-h:4.75rem;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --r-sm:3px; --r-md:6px; --r-lg:10px;
  --r-btn:3px; --r-card:4px;
  --shadow-soft:0 1px 2px rgba(60,46,18,.04),0 12px 32px -22px rgba(60,46,18,.22);
  --shadow-lift:0 2px 4px rgba(60,46,18,.04),0 26px 48px -26px rgba(60,46,18,.34);

  /* geometry shared by the image heroes: right edge of the content grid, and frame width */
  --edge:calc((100% - min(100%, var(--maxw))) / 2 + var(--gutter));
  --frame-w:calc((min(100%, var(--maxw)) - 2 * var(--gutter)) * .45);
}
@media (min-width:120rem){ :root{ --maxw:104rem; --gutter:clamp(4.5rem,6vw,9rem) } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem);background:var(--ivory)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.7;font-weight:400;color:var(--ink);background:var(--ivory);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga"}
::selection{background:var(--champagne);color:var(--ink)}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:rgba(174,128,53,.7);transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px;border-radius:var(--r-sm)}
.skip{position:fixed;left:1rem;top:-4rem;z-index:999;background:var(--ink);color:var(--ivory);padding:.75rem 1rem;border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:calc(env(safe-area-inset-top) + .75rem)}

/* ---------------------------------------------------------------- grounds
   The markup still marks some sections .dark (from the previous theme).
   In main they now render as the linen ground; only the footer is dark.   */
.dark{background:var(--linen);color:var(--ink)}
.paper-2{background:var(--linen)}
.muted,.t-muted{color:var(--muted)}

/* ---------------------------------------------------------------- type */
.t-display,.t-h1,.t-h2,.t-h3{font-family:var(--serif);color:var(--ink);font-optical-sizing:auto}
.t-display{font-size:var(--fs-display);font-weight:450;line-height:.96;letter-spacing:-.018em;text-wrap:balance}
.t-h1{font-size:var(--fs-h1);font-weight:480;line-height:1.02;letter-spacing:-.014em;text-wrap:balance}
.t-h2{font-size:var(--fs-h2);font-weight:500;line-height:1.06;letter-spacing:-.008em;text-wrap:balance}
.t-h3{font-size:var(--fs-h3);font-weight:560;line-height:1.18;letter-spacing:-.002em}
.t-lead{font-size:var(--fs-lead);line-height:1.6;font-weight:400;max-width:40rem;color:var(--ink-2)}
.t-lead.muted{color:var(--muted)}
.t-small{font-size:var(--fs-small);line-height:1.6}
.t-label{font-size:.72rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;color:var(--brass-deep)}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1.05em}
.prose ul{padding-left:1.1rem;margin-top:.8rem}
.prose li::marker{color:var(--brass)}
.prose li+li{margin-top:.35rem}
.prose h2{margin-top:2.6rem;margin-bottom:.7rem}
.prose h3{margin-top:1.9rem;margin-bottom:.5rem}
.prose a{text-decoration:underline;text-decoration-color:var(--brass)}
.prose a:hover{color:var(--brass-deep)}
.num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.sec{padding-block:var(--sec)}
.sec-tight{padding-block:var(--sec-tight)}
.stack>*+*{margin-top:var(--stack,1.25rem)}
.split{display:grid;gap:clamp(2rem,4vw,5rem);align-items:start}
@media (min-width:56rem){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .split--even{grid-template-columns:1fr 1fr}
  .split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split--center{align-items:center}
}
.head-row{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:end;justify-content:space-between;margin-bottom:clamp(2rem,4vw,3.5rem)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------------------------------------------------------------- section rhythm
   ivory → linen → ivory, with hairlines aligned to the content grid where two
   ivory sections meet. Written against the section sequences in the markup. */
.sec{background-color:var(--ivory)}
.sec.dark,.sec.paper-2,.sec-tight.paper-2{background-color:var(--linen)}
.sec.paper-2 + .sec.dark:not(.cta-band){background-color:var(--ivory)}
.sec.dark:not(.cta-band) + .sec.paper-2{background-color:var(--ivory)}
.sec:not(.dark):not(.paper-2) + .sec:not(.dark):not(.paper-2):not(.cta-band),
.sec.dark:not(.cta-band) + .sec.paper-2 + .sec:not(.dark):not(.paper-2),
.sec.paper-2 + .sec.dark:not(.cta-band) + .sec:not(.dark):not(.paper-2){
  background-image:linear-gradient(var(--line),var(--line));background-repeat:no-repeat;background-position:top center;
  background-size:calc((min(100%, var(--maxw)) - 2 * var(--gutter)) * var(--hair,1)) 1px}

/* ---------------------------------------------------------------- buttons */
.btn{--bg:var(--ink);--fg:var(--ivory);--bd:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.8rem 1.5rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);border-radius:var(--r-btn);font-family:var(--font);font-weight:600;font-size:.9rem;letter-spacing:.04em;line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;isolation:isolate;overflow:hidden;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .45s var(--ease),transform .15s ease-out;
  -webkit-tap-highlight-color:transparent;will-change:transform}
/* a warm sweep of light across the primary button on hover */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(var(--glow),.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover{--bg:#34322A;--bd:var(--brass);box-shadow:0 14px 30px -16px rgba(131,96,31,.55)}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:scale(.98)}
.btn--line,.paper-btn-ink .btn--line,.btn--ink{--bg:transparent;--fg:var(--ink);--bd:rgba(36,35,29,.55)}
.btn--line::before{display:none}
.btn--line:hover{--bg:rgba(var(--glow),.22);--fg:var(--brass-deep);--bd:var(--brass);box-shadow:none}
.btn--dark{--bg:var(--ink);--fg:var(--ivory);--bd:var(--ink)}
.btn--dark:hover{--bg:#34322A;--bd:var(--brass)}
@media (max-width:26rem){.btn{white-space:normal;text-align:center;line-height:1.3}}
.form .btn{max-width:100%}
.btn--sm{min-height:2.75rem;padding:.55rem 1.1rem;font-size:.82rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.btn:disabled{opacity:.6;cursor:progress}
.link-arrow{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.92rem;letter-spacing:.02em;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:.15rem;min-height:2.75rem;transition:color .3s var(--ease),border-color .3s var(--ease)}
.link-arrow svg{width:1rem;height:1rem;transition:transform .35s var(--ease)}
.link-arrow:hover{color:var(--brass-deep)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------------------------------------------------------------- header */
.hdr{position:fixed;inset:0 0 auto;z-index:100;padding-top:env(safe-area-inset-top);color:var(--ink);background:rgba(251,248,242,.97);view-transition-name:site-header;
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease),transform .6s var(--ease)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .4s var(--ease)}
.hdr.is-solid{background:rgba(251,248,242,.84);box-shadow:0 18px 40px -30px rgba(60,46,18,.35);
  -webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%)}
.hdr.is-solid::after{opacity:1}
@media (prefers-reduced-transparency:reduce){.hdr.is-solid{background:var(--ivory)}}
.hdr-in{display:flex;align-items:center;gap:1.5rem;height:var(--header-h);transition:height .4s var(--ease)}
@media (min-width:74.01rem){.hdr.is-solid .hdr-in{height:4.15rem}}
/* Linear lockup. Brand document minimum for the shortened primary logo: 50px. */
.brand{display:inline-flex;align-items:center;flex:none;color:var(--brass);padding:.35rem 0;transition:opacity .3s}
.brand:hover{opacity:.85}
.brand svg{height:50px;width:auto}
.brand .logo-copper{color:var(--copper)}
.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.nav>a,.nav-group>button{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.4rem .85rem;border-radius:0;background:none;border:0;
  font-size:.9rem;font-weight:500;letter-spacing:.015em;text-decoration:none;cursor:pointer;color:var(--ink-2);transition:color .25s var(--ease)}
.nav>a::after,.nav-group>button::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.45rem;height:1px;background:var(--brass);transform:scaleX(0);transition:transform .45s var(--ease)}
.nav>a:hover,.nav-group>button:hover,.nav-group>button[aria-expanded="true"]{color:var(--ink)}
.nav>a:hover::after,.nav-group>button:hover::after,.nav-group>button[aria-expanded="true"]::after{transform:scaleX(1)}
.nav>a[aria-current="page"],.nav-group>button.is-current{color:var(--ink)}
.nav>a[aria-current="page"]::after,.nav-group>button.is-current::after{transform:scaleX(1);height:1.5px}
.nav-group{position:relative}
.nav-group>button svg{width:.62rem;height:.62rem;opacity:.7;transition:transform .35s var(--ease)}
.nav-group>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + .55rem);left:50%;translate:-50% 0;width:min(48rem,calc(100vw - 2rem));background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem 1.9rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem 2rem;
  box-shadow:0 40px 80px -40px rgba(60,46,18,.35),0 2px 6px rgba(60,46,18,.04);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s var(--ease),transform .35s var(--ease)}
.mega::before{content:"";position:absolute;left:1.9rem;right:1.9rem;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--brass-soft),transparent)}
.mega.is-open{opacity:1;transform:none;pointer-events:auto}
.mega h3,.mega .mega-h{font-size:.68rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:.7rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.mega a{display:block;padding:.38rem 0;text-decoration:none;font-size:.92rem;color:var(--ink-2);transition:color .25s var(--ease),transform .35s var(--ease)}
.mega a:hover{color:var(--brass-deep);transform:translateX(3px)}
.mega a[aria-current]{color:var(--brass-deep)}
.hdr-cta{margin-left:.75rem}
.menu-btn{display:none;margin-left:auto;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;border-radius:var(--r-btn);background:none;border:1px solid var(--line-2);cursor:pointer;color:var(--ink);transition:border-color .25s,background-color .25s}
.menu-btn:hover{border-color:var(--brass);background:rgba(var(--glow),.2)}
.menu-btn svg{width:1.2rem;height:1.2rem}
@media (max-width:74rem){
  .nav,.hdr-cta{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:22.5rem){ .brand svg{height:44px} }

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:200;background:var(--ivory);color:var(--ink);display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + .75rem) max(var(--gutter),env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 1.5rem) max(var(--gutter),env(safe-area-inset-left));
  overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.drawer::before{content:"";position:fixed;right:-20vmax;top:-20vmax;width:60vmax;height:60vmax;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--glow),.35),transparent);z-index:-1}
.drawer.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);border-bottom:1px solid var(--line)}
.drawer nav{margin-top:.75rem;display:flex;flex-direction:column;transform:translateY(10px);transition:transform .5s var(--ease)}
.drawer.is-open nav{transform:none}
.drawer nav>a,.drawer summary{display:flex;justify-content:space-between;align-items:center;min-height:3.6rem;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:clamp(1.45rem,1.2rem + 1.4vw,1.85rem);font-weight:500;letter-spacing:-.005em;text-decoration:none;cursor:pointer;list-style:none;color:var(--ink)}
.drawer nav>a:hover,.drawer summary:hover{color:var(--brass-deep)}
.drawer summary::-webkit-details-marker{display:none}
.drawer details[open] summary{color:var(--brass-deep)}
.drawer details[open] summary svg{transform:rotate(45deg)}
.drawer summary svg{width:.9rem;height:.9rem;color:var(--brass);transition:transform .35s var(--ease)}
.drawer details .sub{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1rem;padding:.6rem 0 1rem;border-bottom:1px solid var(--line)}
.drawer details .sub a{min-height:2.75rem;display:flex;align-items:center;text-decoration:none;color:var(--muted);font-size:.95rem}
.drawer details .sub a:hover{color:var(--brass-deep)}
@media (max-width:26rem){.drawer details .sub{grid-template-columns:1fr}}
.drawer .btn{margin-top:1.75rem;width:100%;min-height:3.4rem}
body.no-scroll{overflow:hidden}

/* ---------------------------------------------------------------- hero (home)
   Text on ivory at left; the scene in an arched window at right, with the
   brand mandala behind it as a pattern of light.                           */
.hero{position:relative;min-height:100vh;display:grid;align-items:center;overflow:hidden;isolation:isolate;background:var(--ivory)}
@supports (min-height:100svh){.hero{min-height:100svh}}
@media (min-width:56rem){.hero{min-height:max(40rem,min(100vh,62rem))}}
.hero-media{position:absolute;z-index:-1;top:calc(var(--header-h) + 1.25rem);bottom:clamp(1.5rem,4vh,3rem);right:var(--edge);width:var(--frame-w);
  border-radius:100vmax 100vmax var(--r-md) var(--r-md);overflow:hidden;background:var(--char);
  box-shadow:0 0 0 1px rgba(174,128,53,.22),0 0 0 10px rgba(251,248,242,.9),0 0 0 11px rgba(174,128,53,.18),0 60px 100px -50px rgba(80,58,18,.55)}
.hero-media img{position:absolute;inset:-7% 0 auto 0;width:100%;height:114%;object-fit:cover;object-position:50% 40%;opacity:0;transform:scale(1.08);
  transition:opacity 2s var(--ease) .5s,transform 6s var(--ease) .5s;translate:0 var(--py,0px)!important}
.hero.is-lit .hero-media img{opacity:1;transform:scale(1.0)}
/* warm ambient light behind the window */
.hero::after{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(42rem 38rem at calc(100% - var(--edge) - var(--frame-w) * .5) 45%,rgba(var(--glow),.55),rgba(var(--glow),.16) 48%,transparent 72%)}
.hero-mandala{rotate:var(--fx-rot,0deg);position:absolute;z-index:-2;right:calc(var(--edge) + var(--frame-w) * .5);top:50%;translate:50% -50%;width:min(58vw,46rem);aspect-ratio:1;pointer-events:none;color:var(--brass)}
.hero-mandala path{opacity:.05;transition:opacity .9s var(--ease)}
.hero.is-lit .hero-mandala path{opacity:.34;transition-delay:calc(var(--i) * 28ms)}
.hero.is-settled .hero-mandala path{opacity:.1;transition:opacity 2.4s var(--ease)}
.hero-mandala svg{width:100%;height:100%;filter:drop-shadow(0 0 14px rgba(174,128,53,.25))}
.hero-in{padding-top:calc(var(--header-h) + 3rem);padding-bottom:clamp(2.5rem,6vh,5rem)}
@media (min-width:56rem){
  .hero-in{padding-right:calc(max(var(--gutter),env(safe-area-inset-right)) + var(--frame-w) + clamp(2rem,4vw,5rem))}
}
.hero h1{color:var(--ink)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .ln>span{display:block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
.hero.is-lit h1 .ln>span{transform:none}
.hero.is-lit h1 .ln:nth-child(2)>span{transition-delay:.12s}
.hero.is-lit h1 .ln:nth-child(3)>span{transition-delay:.24s}
.hero-sub{margin-top:clamp(1.25rem,3vh,2rem);max-width:36rem;opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .6s,transform 1s var(--ease) .6s}
.hero.is-lit .hero-sub{opacity:1;transform:none}
.hero-sub .t-lead{color:var(--ink-2)}
.hero .btn:not(.btn--line){box-shadow:0 0 0 4px rgba(var(--glow),.35),0 18px 36px -18px rgba(131,96,31,.6)}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-small)}
.hero-meta>span{display:inline-flex;align-items:center;gap:.55rem}
.hero-meta>span::before{content:"";width:.38rem;height:.38rem;border-radius:50%;background:var(--brass);box-shadow:0 0 0 3px rgba(var(--glow),.45)}
@media (max-width:55.99rem){
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .hero-in{order:1;padding-top:calc(var(--header-h) + 2.25rem);padding-bottom:2rem}
  .hero-media{order:2;position:relative;inset:auto;width:auto;margin:0 max(var(--gutter),env(safe-area-inset-right)) 2.5rem max(var(--gutter),env(safe-area-inset-left));
    aspect-ratio:4/4.4;border-radius:min(46vw,20rem) min(46vw,20rem) var(--r-md) var(--r-md)}
  .hero::after{background:radial-gradient(34rem 30rem at 50% 78%,rgba(var(--glow),.5),transparent 70%)}
  .hero-mandala{right:50%;top:auto;bottom:-6rem;translate:50% 0;width:125vw}
}
@media (orientation:landscape) and (max-height:30rem){
  .hero{min-height:auto}
  .hero-in{padding-top:calc(var(--header-h) + 1.5rem);padding-bottom:2rem}
  .hero .t-display{font-size:clamp(2rem,6vw,3.2rem)}
}

/* ---------------------------------------------------------------- inner page hero */
.phero{position:relative;padding-top:calc(var(--header-h) + clamp(3rem,8vw,6.5rem));padding-bottom:clamp(2.5rem,6vw,4.5rem);overflow:hidden;isolation:isolate;
  background:radial-gradient(56rem 26rem at 88% -4rem,rgba(var(--glow),.34),transparent 70%),var(--ivory)}
.phero.dark{background:radial-gradient(50rem 34rem at 92% 20%,rgba(var(--glow),.42),rgba(var(--glow),.1) 50%,transparent 72%),var(--ivory);color:var(--ink)}
.phero h1{color:var(--ink)}
.phero .t-lead{margin-top:1.4rem}
.phero .btn-row{margin-top:2.1rem}
.phero-watermark{position:absolute;z-index:-1;right:-7rem;top:calc(var(--header-h) + 1rem);width:30rem;color:var(--brass);opacity:.08;pointer-events:none;filter:drop-shadow(0 0 20px rgba(174,128,53,.4))}
@media (max-width:40rem){.phero-watermark{width:20rem;right:-9rem;top:3rem;opacity:.08}}

.phero.phero--image{min-height:clamp(34rem,84vh,52rem);display:grid;align-items:center;padding-top:calc(var(--header-h) + clamp(2.5rem,5vw,4rem));padding-bottom:clamp(3rem,6vw,5rem);
  background:radial-gradient(44rem 36rem at calc(100% - var(--edge) - var(--frame-w) * .5) 50%,rgba(var(--glow),.5),rgba(var(--glow),.14) 50%,transparent 74%),var(--ivory)}
.phero--image .phero-media{position:absolute;z-index:-1;top:calc(var(--header-h) + 1.25rem);bottom:clamp(1.5rem,3vw,2.75rem);right:var(--edge);width:var(--frame-w);
  border-radius:100vmax 100vmax var(--r-md) var(--r-md);overflow:hidden;background:var(--char);
  box-shadow:0 0 0 1px rgba(174,128,53,.22),0 0 0 10px rgba(251,248,242,.9),0 0 0 11px rgba(174,128,53,.18),0 50px 90px -50px rgba(80,58,18,.5)}
.phero--image .phero-media img{position:absolute;inset:-7% 0 auto 0;width:100%;height:114%;object-fit:cover;object-position:50% 45%;transform:scale(1.04);translate:0 var(--py,0px);transition:transform 2.4s var(--ease)}
.phero--image:hover .phero-media img{transform:scale(1.0)}
@media (min-width:56rem){
  .phero--image .wrap{padding-right:calc(max(var(--gutter),env(safe-area-inset-right)) + var(--frame-w) + clamp(2rem,4vw,5rem))}
}
@media (max-width:55.99rem){
  .phero.phero--image{display:flex;flex-direction:column;min-height:0;padding-bottom:2.5rem;
    background:radial-gradient(34rem 30rem at 50% 82%,rgba(var(--glow),.45),transparent 70%),var(--ivory)}
  .phero--image .wrap{order:1}
  .phero--image .phero-media{order:2;position:relative;inset:auto;width:auto;margin:2.5rem max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));
    aspect-ratio:4/4.2;border-radius:min(46vw,20rem) min(46vw,20rem) var(--r-md) var(--r-md)}
}

/* breadcrumbs */
.crumbs{font-size:.8rem;letter-spacing:.02em;margin-bottom:1.5rem;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .6rem;list-style:none;padding:0}
.crumbs li{display:inline-flex;align-items:center;gap:.6rem}
.crumbs li+li::before{content:"";width:.28rem;height:.28rem;border-top:1px solid var(--brass);border-right:1px solid var(--brass);transform:rotate(45deg)}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--brass-deep);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-2)}

/* ---------------------------------------------------------------- reveals */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
.curtain{position:relative;overflow:hidden}
.curtain img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.curtain::after{content:"";position:absolute;inset:0;background:var(--ivory);transform-origin:top;transition:transform 1.2s var(--ease-in-out)}
.paper .curtain::after,.curtain.on-paper::after{background:var(--ivory)}
.curtain.is-in img{transform:scale(1)}
.curtain.is-in::after{transform:scaleY(0)}
.no-js [data-reveal]{opacity:1;transform:none}
.no-js .curtain::after{display:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .curtain::after{display:none}.curtain img{transform:none;transition:none}
  .hero-media img{opacity:1;transform:none;transition:none}
  .hero h1 .ln>span{transform:none;transition:none}
  .hero-sub{opacity:1;transform:none;transition:none}
  .hero-mandala path{opacity:.1!important;transition:none!important}
  .btn::before{display:none}
  .phero--image .phero-media img{transform:none;transition:none}
  .p-card,.cat-tile,.rail-card,.panel,a.panel{transition:none!important}
}

/* ---------------------------------------------------------------- disciplines list */
.disciplines{border-top:1px solid var(--line-2)}
.disc{position:relative;display:grid;grid-template-columns:1fr auto;gap:.25rem 1.5rem;align-items:center;padding:clamp(1.35rem,2.4vw,2.1rem) 0;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--ink)}
.disc::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.disc:hover::before,.disc:focus-visible::before{transform:scaleX(1)}
.disc h3{font-family:var(--serif);font-size:clamp(1.75rem,1.2rem + 2.4vw,3.5rem);font-weight:500;letter-spacing:-.01em;line-height:1.05;transition:color .35s var(--ease),transform .6s var(--ease)}
.disc p{grid-column:1;color:var(--muted);max-width:36rem;font-size:var(--fs-small);margin-top:.2rem}
.disc .arr{grid-row:1/span 2;grid-column:2;width:3rem;height:3rem;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink);transition:background-color .35s,border-color .35s,color .35s}
.disc .arr svg{width:1rem;height:1rem;transition:transform .45s var(--ease)}
.disc:hover h3,.disc:focus-visible h3{color:var(--brass-deep);transform:translateX(.5rem)}
.disc:hover .arr{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.disc:hover .arr svg{transform:translateX(2px)}
.disc-peek{position:fixed;left:0;top:0;width:clamp(14rem,22vw,22rem);aspect-ratio:4/5;z-index:5;pointer-events:none;border-radius:100vmax 100vmax var(--r-md) var(--r-md);overflow:hidden;
  box-shadow:0 0 0 6px rgba(251,248,242,.95),0 40px 70px -30px rgba(60,46,18,.5);opacity:0;scale:.92;transition:opacity .3s var(--ease),scale .45s var(--ease)}
.disc-peek.is-on{opacity:1;scale:1}
.disc-peek img{width:100%;height:100%;object-fit:cover}
@media (hover:none),(max-width:56rem){.disc-peek{display:none}}

/* ---------------------------------------------------------------- sticky story */
.story{display:grid;gap:2rem}
.story-media{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/5;background:var(--linen-2);box-shadow:var(--shadow-lift)}
.story-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.story-media img.is-active{opacity:1;transform:scale(1)}
.story-steps{display:flex;flex-direction:column}
.story-step{padding-block:clamp(2rem,12vh,9rem);opacity:.38;transition:opacity .6s var(--ease)}
.story-step.is-active{opacity:1}
.story-step h3{margin-bottom:.75rem}
.story-step .n{display:inline-flex;align-items:center;gap:.75rem;color:var(--brass-deep);font-size:.72rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem}
.story-step .n::after{content:"";width:2.5rem;height:1px;background:var(--brass)}
@media (min-width:56rem){
  .story{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(3rem,6vw,7rem);align-items:start}
  .story-media{position:sticky;top:calc(var(--header-h) + 2rem);aspect-ratio:4/5;max-height:calc(100vh - var(--header-h) - 4rem)}
  .story-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center}
}
@media (max-width:55.99rem){
  .story-media{display:none}
  .story-step{opacity:1;padding-block:1.75rem;border-top:1px solid var(--line-2)}
  .story-step .m-img{display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/2;margin-bottom:1.25rem;box-shadow:var(--shadow-soft)}
  .story-step .m-img img{width:100%;height:100%;object-fit:cover}
}
@media (min-width:56rem){.story-step .m-img{display:none}}

/* ---------------------------------------------------------------- product image "pool of light"
   Catalogue crops often carry a white ground; multiply lets that ground take on
   the warm light behind the product, and the glow brightens on hover.         */
.p-card .img,.cat-tile .img,.rail-card .img.is-product,.gallery-main{isolation:isolate;
  background:radial-gradient(75% 65% at 50% 46%,#FFFFFF 0%,#FFFFFF 42%,#F7F2E8 100%)}
.p-card .img::before,.cat-tile .img::before,.rail-card .img.is-product::before,.gallery-main::before{content:"";position:absolute;inset:8%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--glow),.55),rgba(var(--glow),0));opacity:0;transform:scale(.85);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.p-card .img img,.cat-tile .img img,.rail-card .img.is-product img,.gallery-main img{mix-blend-mode:multiply}

/* ---------------------------------------------------------------- rail (categories) */
.rail-vp{overflow:hidden;touch-action:pan-y;cursor:grab;outline-offset:6px;padding-block:.5rem 1.25rem;margin-block:-.5rem -1.25rem}
.rail-vp.is-drag{cursor:grabbing}
.rail-track{display:flex;gap:clamp(.9rem,1.6vw,1.5rem);will-change:transform}
.rail-card{flex:0 0 clamp(15rem,24vw,21rem);text-decoration:none;user-select:none;-webkit-user-select:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:.6rem .6rem 1.15rem;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.rail-card .img{position:relative;aspect-ratio:4/5;border-radius:2px;overflow:hidden;background:var(--linen-2)}
.rail-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);-webkit-user-drag:none}
.rail-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--champagne)}
.rail-card:hover img{transform:scale(1.05)}
.rail-card:hover .img.is-product::before{opacity:1;transform:scale(1)}
.rail-card h3{margin-top:1rem;padding-inline:.5rem;font-family:var(--serif);font-size:1.4rem;font-weight:560;line-height:1.15;color:var(--ink);transition:color .3s}
.rail-card:hover h3{color:var(--brass-deep)}
.rail-card p{padding-inline:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.rail-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2rem}
.rail-bar{flex:1;height:1px;background:var(--line-2);position:relative;overflow:hidden;max-width:24rem}
.rail-bar i{position:absolute;inset:0 auto 0 0;width:22%;background:var(--brass)}
.rail-btns{display:flex;gap:.5rem}
.icon-btn{width:3rem;height:3rem;border-radius:50%;border:1px solid var(--line-2);background:var(--white);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background-color .3s,color .3s,border-color .3s}
.icon-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.icon-btn svg{width:1rem;height:1rem}
@media (prefers-reduced-motion:reduce){.rail-card img{transition:none}}

/* ---------------------------------------------------------------- grids & cards */
.cat-grid{display:grid;gap:clamp(.9rem,1.5vw,1.4rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
.cat-tile{display:flex;flex-direction:column;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:.6rem .6rem 1.25rem;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.cat-tile .img{position:relative;aspect-ratio:1;border-radius:2px;overflow:hidden;display:grid;place-items:center;margin-bottom:1.1rem}
.cat-tile .img img{width:80%;height:80%;object-fit:contain;transition:transform .8s var(--ease)}
.cat-tile h3{padding-inline:.55rem;font-family:var(--serif);font-size:1.4rem;font-weight:560;line-height:1.15;color:var(--ink);transition:color .3s}
.cat-tile p{padding-inline:.55rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--champagne)}
.cat-tile:hover .img img{transform:scale(1.06)}
.cat-tile:hover .img::before{opacity:1;transform:scale(1)}
.cat-tile:hover h3{color:var(--brass-deep)}

.p-grid{display:grid;gap:clamp(.75rem,1.5vw,1.4rem);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:40rem){.p-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:75rem){.p-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:130rem){.p-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.p-grid>li{display:flex;min-width:0}
.p-card{position:relative;display:flex;flex-direction:column;flex:1;text-decoration:none;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.p-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--brass),transparent);transform:scaleX(0);transition:transform .6s var(--ease)}
.p-card .img{position:relative;aspect-ratio:1;overflow:hidden;display:grid;place-items:center}
.p-card .img img{width:84%;height:84%;object-fit:contain;transition:transform .8s var(--ease)}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--champagne)}
.p-card:hover::after{transform:scaleX(1)}
.p-card:hover .img img{transform:scale(1.06)}
.p-card:hover .img::before{opacity:1;transform:scale(1)}
.p-card .img .noimg{color:var(--linen-2);width:40%}
.p-card .meta{padding:.9rem 1rem 1.1rem;border-top:1px solid var(--line)}
.p-card .coll{font-size:.66rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.p-card h3{font-family:var(--font);font-size:.95rem;font-weight:600;line-height:1.35;margin-top:.3rem;overflow-wrap:anywhere;color:var(--ink);transition:color .3s}
.p-card:hover h3{color:var(--brass-deep)}
.p-card .fac{font-size:.8rem;color:var(--muted);margin-top:.3rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:39.99rem){.p-card .meta{padding:.75rem .75rem .9rem}.p-card h3{font-size:.88rem}}
.badge{position:absolute;left:.6rem;top:.6rem;z-index:1;font-size:.66rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .55rem;border-radius:2px;background:var(--ivory);border:1px solid var(--line);color:var(--brass-deep)}

.cards-3{display:grid;gap:clamp(.9rem,1.5vw,1.4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.panel{position:relative;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.5rem,2.6vw,2.25rem);background:var(--white);box-shadow:var(--shadow-soft);color:var(--ink)}
.panel::before{content:"";position:absolute;left:clamp(1.5rem,2.6vw,2.25rem);top:-1px;width:2.5rem;height:2px;background:var(--brass)}
.panel h3,.panel h2{margin-bottom:.7rem}
.panel p{color:var(--muted)}
.panel p a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--brass)}
.panel p a:hover{color:var(--brass-deep)}
a.panel{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
a.panel::after{content:"";position:absolute;right:clamp(1.5rem,2.6vw,2.25rem);top:clamp(1.6rem,2.7vw,2.4rem);width:.55rem;height:.55rem;border-top:1px solid var(--brass-deep);border-right:1px solid var(--brass-deep);transform:rotate(45deg);transition:transform .45s var(--ease)}
a.panel h3,a.panel h2{padding-right:1.75rem;transition:color .3s}
a.panel:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--champagne)}
a.panel:hover h3,a.panel:hover h2{color:var(--brass-deep)}
a.panel:hover::after{transform:translateX(3px) rotate(45deg)}
.panel ul.prose{color:var(--ink-2)}

/* people */
.people{display:grid;gap:1.25rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.person{padding:1.6rem 0;border-top:1px solid var(--line-2)}
.paper .person,.person.on-paper{border-color:var(--line-2)}
.person .monogram{width:3.5rem;height:3.5rem;border-radius:50%;border:1px solid var(--brass);display:grid;place-items:center;color:var(--brass-deep);font-family:var(--serif);font-size:1.2rem;font-weight:600;margin-bottom:1.1rem;letter-spacing:.06em;
  background:radial-gradient(closest-side,rgba(var(--glow),.45),transparent);box-shadow:0 0 0 5px rgba(var(--glow),.18)}
.person h3{font-family:var(--serif);font-size:1.6rem;font-weight:560;line-height:1.15}
.person p{margin-top:.35rem;color:var(--muted)}
.person p a{color:var(--ink-2)}
.person p a:hover{color:var(--brass-deep)}
.paper .person p,.person.on-paper p{color:var(--muted)}

/* spec facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:0 2rem;border-top:1px solid var(--line-2)}
.facts div{padding:1.25rem 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--brass-deep)}
.facts dd{margin-top:.4rem;font-size:1.02rem;color:var(--ink);line-height:1.6}
.facts dd a:not(.link-arrow){text-decoration-color:var(--brass)}
.facts dd a:not(.link-arrow):hover{color:var(--brass-deep)}

/* figure */
.figure{border-radius:var(--r-md);overflow:hidden;background:var(--linen-2);box-shadow:var(--shadow-soft)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure--tall{aspect-ratio:4/5}
.figure--wide{aspect-ratio:16/10}
figcaption{font-size:.8rem;color:var(--muted);margin-top:.6rem}

/* FAQ */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;min-height:3.75rem;padding:1.2rem 0;
  font-family:var(--serif);font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem);font-weight:540;line-height:1.25;color:var(--ink);transition:color .3s}
.faq summary:hover,.faq details[open] summary{color:var(--brass-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line-2);position:relative;color:var(--ink);background:var(--white);transition:background-color .3s,border-color .3s,color .3s}
.faq summary:hover .pm{border-color:var(--brass)}
.faq details[open] summary .pm{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:.7rem;height:1px;background:currentColor;translate:-50% -50%;transition:transform .35s var(--ease)}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq .a{padding:0 0 1.6rem;max-width:44rem;color:var(--muted)}
.faq .a a{color:var(--ink-2);text-decoration-color:var(--brass)}
.faq .a p+p{margin-top:.75rem}

/* CTA band — a pool of warm light on ivory */
.cta-band{position:relative;overflow:hidden;isolation:isolate}
.sec.cta-band,.sec.cta-band.dark{background:radial-gradient(46rem 34rem at 84% 62%,rgba(var(--glow),.6),rgba(var(--glow),.16) 48%,transparent 72%),var(--ivory);color:var(--ink);border-top:1px solid var(--line)}
.cta-band .mark{position:absolute;right:-4rem;bottom:-8rem;width:min(34rem,72vw);color:var(--brass);opacity:.14;z-index:-1;filter:drop-shadow(0 0 22px rgba(174,128,53,.45))}
.cta-band h2{max-width:20ch}
.cta-band .btn:not(.btn--line){box-shadow:0 0 0 4px rgba(var(--glow),.35),0 18px 36px -18px rgba(131,96,31,.55)}

/* ---------------------------------------------------------------- forms */
.form{display:grid;gap:1.15rem}
.form-row{display:grid;gap:1.15rem}
@media (min-width:40rem){.form-row{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field label,.field legend{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:3.15rem;padding:.75rem .95rem;border-radius:var(--r-btn);border:1px solid var(--line-2);
  background:#FDFBF8;color:var(--ink);font-size:16px;line-height:1.4;transition:border-color .25s,box-shadow .25s,background-color .25s;-webkit-appearance:none;appearance:none}
.field input::placeholder,.field textarea::placeholder{color:#9A9684}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C9BDA5}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2383601F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:.75rem;padding-right:2.5rem}
.field textarea{min-height:7.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);background-color:var(--white);box-shadow:0 0 0 4px rgba(var(--glow),.45)}
.field [aria-invalid="true"]{border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(187,116,88,.18)}
.field .err{font-size:.85rem;color:#8f4f36;min-height:0}
.type-pills{display:flex;flex-wrap:wrap;gap:.5rem;border:0;padding:0;margin:0}
.type-pills legend{margin-bottom:.6rem}
.type-pills label{position:relative}
.type-pills input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.type-pills span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem 1rem;border-radius:var(--r-btn);border:1px solid var(--line-2);background:var(--white);font-size:.88rem;transition:background-color .25s,border-color .25s,color .25s}
.type-pills label:hover span{border-color:var(--brass)}
.type-pills input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--ivory);box-shadow:inset 0 -2px 0 var(--brass)}
.type-pills input:focus-visible+span{outline:2px solid var(--brass-deep);outline-offset:3px}
.check{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:var(--fs-small);color:var(--ink-2)}
.check a{text-decoration-color:var(--brass)}
.check input{width:1.3rem;height:1.3rem;margin:.15rem 0 0;accent-color:var(--brass-deep)}
.hp{position:absolute!important;left:-9999px!important}
.form-status{border-radius:var(--r-btn);padding:0;font-size:.95rem}
.form-status.is-ok{padding:1rem 1.1rem;background:rgba(147,149,128,.14);border:1px solid rgba(147,149,128,.5)}
.form-status.is-err{padding:1rem 1.1rem;background:rgba(187,116,88,.09);border:1px solid rgba(187,116,88,.4)}
.form-status a{text-decoration:underline}
.form-note{font-size:.82rem;color:var(--muted)}
/* Form cards are always white paper on the page; the !important overrides an
   inline background left in the markup from the previous theme.            */
.form-card{position:relative;background:var(--white)!important;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.35rem,3vw,2.6rem);
  box-shadow:0 2px 4px rgba(60,46,18,.03),0 40px 80px -50px rgba(60,46,18,.35)}
.form-card::before{content:"";position:absolute;left:clamp(1.35rem,3vw,2.6rem);right:clamp(1.35rem,3vw,2.6rem);top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent)}
.form-card .btn[type=submit]{min-width:12rem}

/* ---------------------------------------------------------------- catalogue */
.cat-layout{display:grid;gap:2rem}
@media (min-width:64rem){.cat-layout{grid-template-columns:16.5rem minmax(0,1fr);gap:clamp(2rem,3vw,3.5rem)}}
.filters{position:relative}
@media (min-width:64rem){.filters{position:sticky;top:calc(var(--header-h) + 1.25rem);max-height:calc(100vh - var(--header-h) - 2.5rem);overflow:auto;padding-right:.5rem;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}}
.filters fieldset{border:0;padding:0;margin:0 0 1.25rem;border-top:1px solid var(--line-2);padding-top:1rem}
.filters legend{font-weight:650;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);padding:0;margin-bottom:.6rem;float:left;width:100%}
.filters legend+*{clear:both}
.filters .opt{display:flex;align-items:center;gap:.6rem;min-height:2.4rem;font-size:.9rem;cursor:pointer;color:var(--ink-2)}
.filters .opt:hover{color:var(--ink)}
.filters .opt input{width:1.1rem;height:1.1rem;accent-color:var(--brass-deep);margin:0;flex:none}
.filters .opt .c{margin-left:auto;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.filters .more{background:none;border:0;padding:.35rem 0;min-height:2.4rem;color:var(--brass-deep);text-decoration:underline;text-decoration-color:var(--brass);cursor:pointer;font-size:.86rem}
.cat-bar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.search{position:relative;flex:1 1 18rem;max-width:34rem}
.search input{width:100%;min-height:3.15rem;padding:.7rem 1rem .7rem 2.9rem;border-radius:var(--r-btn);border:1px solid var(--line-2);background:var(--white);font-size:16px;transition:border-color .25s,box-shadow .25s}
.search input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 4px rgba(var(--glow),.45)}
.search svg{position:absolute;left:1rem;top:50%;translate:0 -50%;width:1.1rem;height:1.1rem;color:var(--brass-deep)}
.cat-bar select{min-height:3.15rem;border-radius:var(--r-btn);border:1px solid var(--line-2);background-color:var(--white);padding:.6rem 2.3rem .6rem 1rem;font-size:16px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2383601F' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;background-size:.7rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;padding:.35rem .85rem;border-radius:var(--r-btn);border:1px solid var(--line-2);background:var(--white);font-size:.84rem;cursor:pointer;transition:border-color .25s,color .25s}
.chip svg{width:.65rem;height:.65rem;color:var(--brass-deep)}
.chip:hover{border-color:var(--brass);color:var(--brass-deep)}
.result-count{font-size:.72rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.filter-toggle{display:none}
@media (max-width:63.99rem){
  .filter-toggle{display:inline-flex}
  .filters{position:fixed;inset:0;z-index:250;background:var(--ivory);padding:calc(env(safe-area-inset-top) + 1rem) max(var(--gutter),env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 6rem) max(var(--gutter),env(safe-area-inset-left));
    overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
  .filters.is-open{transform:none;visibility:visible;transition:transform .45s var(--ease)}
  .filters-foot{position:fixed;left:0;right:0;bottom:0;padding:1rem max(var(--gutter),env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 1rem);background:var(--ivory);border-top:1px solid var(--line);display:flex;gap:.75rem}
  .filters-foot .btn{flex:1}
}
@media (min-width:64rem){.filters-head .icon-btn,.filters-foot{display:none}}
.filters-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.load-more{display:flex;justify-content:center;margin-top:2.75rem}
.empty{padding:3rem 0;text-align:left;max-width:34rem}
.pager{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:3rem}
.pager a,.pager span{min-width:2.75rem;min-height:2.75rem;display:inline-grid;place-items:center;padding:0 .8rem;border-radius:var(--r-btn);border:1px solid var(--line-2);background:var(--white);text-decoration:none;font-variant-numeric:tabular-nums;transition:border-color .25s,color .25s}
.pager a:hover{border-color:var(--brass);color:var(--brass-deep)}
.pager [aria-current]{background:var(--ink);color:var(--ivory);border-color:var(--ink)}

/* ---------------------------------------------------------------- product detail */
.pd{display:grid;gap:clamp(2rem,4vw,5rem)}
@media (min-width:62rem){.pd{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.gallery-main{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:grid;place-items:center;cursor:zoom-in;box-shadow:var(--shadow-soft)}
.gallery-main::before{opacity:.8;transform:scale(1);inset:14%}
.gallery-main img{width:86%;height:86%;object-fit:contain;transition:transform .5s var(--ease),opacity .35s}
.gallery-main.is-catalogue img{width:100%;height:100%;object-fit:contain;background:#fff}
@media (hover:hover) and (pointer:fine){.gallery-main:hover img{transform:scale(1.6)}}
.gallery-main button{position:absolute;inset:0;background:none;border:0;cursor:zoom-in}
.thumbs{display:flex;gap:.6rem;margin-top:.8rem;overflow-x:auto;padding:.2rem .1rem .35rem;scrollbar-width:thin}
.thumbs button{flex:0 0 5rem;height:5rem;border-radius:var(--r-card);overflow:hidden;background:#fff;border:1px solid var(--line);padding:0;cursor:pointer;transition:border-color .25s}
.thumbs button:hover{border-color:var(--brass-soft)}
.thumbs button[aria-pressed="true"]{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass)}
.thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pd-info{position:relative}
@media (min-width:62rem){.pd-info{position:sticky;top:calc(var(--header-h) + 1.5rem)}}
.pd-info h1{font-family:var(--serif);font-size:clamp(2.1rem,1.5rem + 2.2vw,3.4rem);font-weight:500;letter-spacing:-.01em;line-height:1.05;overflow-wrap:anywhere;color:var(--ink)}
.pd-info .lede{margin-top:1rem;color:var(--muted);font-size:1.05rem}
.pd-actions{display:grid;gap:.6rem;margin-top:1.75rem}
.pd-actions .btn{width:100%}
.pd-price{margin-top:1.5rem;padding:1rem 0;border-block:1px solid var(--line);font-family:var(--serif);font-size:1.45rem;font-weight:560;line-height:1.2;color:var(--ink)}
.pd-price small{display:block;font-family:var(--font);color:var(--muted);font-size:.8rem;font-weight:400;margin-top:.3rem;line-height:1.5}
.spec{display:grid;grid-template-columns:minmax(8rem,38%) 1fr;border-top:1px solid var(--line-2)}
.spec dt,.spec dd{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.spec dt{color:var(--muted);padding-right:1rem}
.spec dd{color:var(--ink)}
.spec dd a{text-decoration-color:var(--brass)}
.spec dd a:hover{color:var(--brass-deep)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);box-shadow:var(--shadow-soft)}
.table-wrap:focus-visible{outline-offset:2px}
table.v{border-collapse:collapse;width:100%;min-width:34rem;font-size:.88rem}
table.v th,table.v td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.v th{font-size:.68rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);background:var(--linen);white-space:nowrap}
table.v tbody tr:hover td{background:#FDFAF4}
table.v tr:last-child td{border-bottom:0}
.sources{font-size:.85rem;color:var(--muted)}
.sources li+li{margin-top:.35rem}
.note{font-size:.88rem;border-left:2px solid var(--brass);padding:.35rem 0 .35rem 1rem;color:var(--muted);background:linear-gradient(90deg,rgba(var(--glow),.22),transparent 60%)}
.note a{color:var(--ink-2);text-decoration-color:var(--brass)}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,80rem);max-height:94vh;width:100%}
dialog.lightbox::backdrop{background:rgba(243,238,229,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.lightbox img{width:100%;max-height:88vh;object-fit:contain;background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:0 60px 120px -60px rgba(60,46,18,.45)}
dialog.lightbox .close{position:absolute;right:.75rem;top:.75rem;background:var(--ink);color:var(--ivory);border-color:var(--ink)}
dialog.lightbox .close:hover{background:var(--brass-deep);border-color:var(--brass-deep)}

/* ---------------------------------------------------------------- footer (the one dark ground) */
.ftr{position:relative;overflow:hidden;isolation:isolate;padding-top:clamp(4.5rem,8vw,7.5rem);padding-bottom:calc(env(safe-area-inset-bottom) + 2rem)}
.ftr,.ftr.dark{background:var(--char);color:#EDE7DA}
/* a thin line of light where the page meets the footer */
.ftr::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;width:min(70rem,92%);height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,110,.9),transparent)}
.ftr::after{content:"";position:absolute;z-index:-2;top:-18rem;left:50%;translate:-50% 0;width:min(70rem,120%);height:26rem;background:radial-gradient(closest-side,rgba(174,128,53,.16),transparent);pointer-events:none}
.ftr .mark{position:absolute;z-index:-1;right:-10rem;top:-6rem;width:36rem;color:var(--brass);opacity:.06}
.ftr-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.ftr-brand{grid-column:1/-1}
@media (min-width:62rem){.ftr-grid{grid-template-columns:1.6fr repeat(4,1fr)}.ftr-brand{grid-column:auto}}
.ftr-brand svg{width:12.5rem;height:auto;color:var(--brass-soft)}
.ftr .muted{color:#ADA894}
.ftr h2{font-family:var(--font);font-size:.7rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--char-line)}
.ftr ul{display:flex;flex-direction:column;gap:0}
.ftr li a{display:inline-flex;align-items:center;min-height:2.6rem;text-decoration:none;color:#E6E0D2;font-size:.92rem;transition:color .25s var(--ease),transform .35s var(--ease)}
.ftr li a:hover{color:#E3C88F;transform:translateX(3px)}
.ftr a:not(.btn){color:#E6E0D2}
.ftr address{font-style:normal;color:#B2AD9B;line-height:1.75;font-size:.92rem}
.ftr address a{text-decoration-color:rgba(201,169,110,.7)}
.ftr address a:hover{color:#E3C88F}
.ftr .link-arrow{color:#F3EEE3;border-color:var(--brass-soft)}
.ftr .link-arrow:hover{color:#E3C88F}
.ftr-base{margin-top:3.75rem;padding-top:1.5rem;border-top:1px solid var(--char-line);display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;color:#A39E8B;font-size:.8rem}
.ftr :focus-visible{outline-color:var(--brass-soft)}

/* scroll progress */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:150;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--brass-soft),var(--brass));pointer-events:none}
@media (prefers-reduced-motion:reduce){.progress{display:none}}

/* utility */
.mt-s{margin-top:.75rem}.mt-m{margin-top:1.5rem}.mt-l{margin-top:2.5rem}.mt-xl{margin-top:clamp(3rem,6vw,5rem)}
.maxw-s{max-width:36rem}.maxw-m{max-width:48rem}
.center-y{align-self:center}

@media print{
  .hdr,.ftr,.drawer,.pd-actions,.thumbs,.enquire,.progress,.skip,.cta-band{display:none!important}
  body{background:#fff;color:#000}
  .pd{grid-template-columns:1fr 1fr}
  .gallery-main{border:1px solid #ddd;box-shadow:none}
  .phero,.sec{padding-block:1rem;background:#fff}
}
.rail-card .img.is-product{display:grid;place-items:center}
.rail-card .img.is-product img{width:82%;height:82%;object-fit:contain}
.noimg{color:var(--linen-2)}
.ftr ul,.cat-grid,.sources{list-style:none;padding:0;margin:0}
.split>*,.pd>*,.cat-layout>*,.story>*,.form-row>*{min-width:0}
.t-display,.t-h1,.t-h2,.t-h3{overflow-wrap:break-word}
@media (max-width:30rem){.t-display,.t-h1,.t-h2,.t-h3{hyphens:auto;-webkit-hyphens:auto}}
.field input[type=checkbox],.field input[type=radio]{-webkit-appearance:auto;appearance:auto;min-height:0;width:1.3rem;height:1.3rem;padding:0;border:0;box-shadow:none;background:none}
.field input[type=checkbox]:focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px}
.field.type-pills input[type=radio]{width:100%;height:100%;min-height:0}
.field.type-pills{flex-direction:row}

/* ---------------------------------------------------------------- image fit
   Percentage heights don't resolve inside aspect-ratio grid frames, so tall
   product images used to spill past the frame and lose their lower half.
   Positioning them absolutely inside the frame keeps the whole product visible. */
.p-card .img img,.cat-tile .img img,.rail-card .img.is-product img,.gallery-main img{position:absolute;inset:0;margin:auto;max-width:none}
.p-card .img img{width:84%;height:84%}
.cat-tile .img img{width:80%;height:80%}
.rail-card .img.is-product img{width:82%;height:82%}
.gallery-main img{width:86%;height:86%}
.gallery-main.is-catalogue img{width:100%;height:100%}
.gallery-main button{z-index:1}

/* ==========================================================================
   MOTION LAYER
   Driven by /assets/js/fx-init.js (adds .fx-on before first paint) and
   /assets/js/fx.js (tags and reveals). Without .fx-on — no JS, reduced
   motion, or a failed script — every rule below is inert and all content
   is simply visible.
   Motion vocabulary: things rise out of warm light, slowly; nothing bounces.
   ========================================================================== */
@property --ga{syntax:"<number>";inherits:false;initial-value:0}

@keyframes fxUp{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@keyframes fxItem{from{opacity:0;translate:0 44px;scale:.975}to{opacity:1;translate:0 0;scale:1}}
@keyframes fxRise{from{opacity:0;translate:0 72px}to{opacity:1;translate:0 0}}
@keyframes fxWord{from{translate:0 112%}to{translate:0 0}}
@keyframes fxCurtain{from{clip-path:inset(100% -10% -10% -10%)}to{clip-path:inset(-10% -10% -10% -10%)}}
@keyframes fxCurtainImg{from{scale:1.22}to{scale:1.1}}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@keyframes fxBreathe{0%,100%{opacity:1;scale:1}50%{opacity:.72;scale:1.06}}
@keyframes fxDrift{from{translate:-4% 3%}to{translate:5% -4%}}
@keyframes fxSpin{to{rotate:360deg}}
@keyframes fxShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes fxKen{from{scale:1}to{scale:1.07}}
@keyframes fxBloom{from{opacity:.85;scale:0}to{opacity:0;scale:30}}
@keyframes fxMarquee{to{transform:translate3d(-50%,0,0)}}
@keyframes fxMandalaIn{from{opacity:0;rotate:-24deg;scale:.9}}

/* ---------------------------------------------------------------- page transitions
   Same-origin navigations cross-fade (supported browsers); the header stays put. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.34s var(--ease-in-out) both fxVtOut}
::view-transition-new(root){animation:.62s var(--ease) both fxVtIn}
@keyframes fxVtOut{to{opacity:0;translate:0 -12px}}
@keyframes fxVtIn{from{opacity:0;translate:0 16px}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------------------------------------------------------------- home hero: the lights come on
   The arch rises open, the room brightens from dusk, lines of type lift in
   sequence, then the supporting copy follows.                               */
.fx-on .hero .hero-media{clip-path:inset(100% -20% -20% -20%);transition:clip-path 1.8s var(--ease-in-out) .1s}
.fx-on .hero.is-lit .hero-media{clip-path:inset(-20% -20% -20% -20%)}
.fx-on .hero .hero-media img{opacity:1;transform:none;scale:1.32;filter:brightness(.28) saturate(.7);transition:scale 3.4s var(--ease) .1s,filter 2.6s ease .8s}
.fx-on .hero.is-lit .hero-media img{scale:1;filter:none}
.fx-on .hero::after{opacity:0}
.fx-on .hero.is-lit::after{animation:fxFade 2.4s ease .9s both,fxBreathe 11s ease-in-out 3.3s infinite}
.fx-on .hero .hero-sub{opacity:1;transform:none;transition:none}
.fx-on .hero .hero-sub>*{opacity:0}
.fx-on .hero.is-lit .hero-sub>*{animation:fxUp 1.2s var(--ease) both}
.fx-on .hero.is-lit .hero-sub>:nth-child(1){animation-delay:.7s}
.fx-on .hero.is-lit .hero-sub>:nth-child(2){animation-delay:.9s}
.fx-on .hero.is-lit .hero-sub>:nth-child(3){animation-delay:1.1s}
.fx-on .hero h1 .ln>span{transition:transform 1.4s var(--ease)}
.fx-on .hero .btn:not(.btn--line){animation:fxGlowPulse 5s ease-in-out 3s infinite}
@keyframes fxGlowPulse{0%,100%{box-shadow:0 0 0 4px rgba(var(--glow),.35),0 18px 36px -18px rgba(131,96,31,.6)}50%{box-shadow:0 0 0 7px rgba(var(--glow),.22),0 22px 44px -16px rgba(131,96,31,.7)}}

/* ---------------------------------------------------------------- inner page heroes */
.fx-on .phero:not(.fx-lit) .wrap>*{opacity:0}
.fx-on .phero.fx-lit .wrap>*{animation:fxUp 1.1s var(--ease) .8s both}
.fx-on .phero.fx-lit .wrap>.crumbs{animation-delay:.05s}
.fx-on .phero.fx-lit .wrap>h1{animation:none;opacity:1}
.fx-on .phero.fx-lit .wrap>.t-lead{animation-delay:.5s}
.fx-on .phero.fx-lit .wrap>.btn-row{animation-delay:.7s}
.fx-on .phero h1 .fx-w>span{translate:0 112%}
.fx-on .phero.fx-lit h1 .fx-w>span{animation:fxWord 1.2s var(--ease) calc(.12s + var(--wi) * 60ms) both}
.fx-on .phero.fx-lit .phero-watermark{animation:fxMandalaIn 2.4s var(--ease) .2s both}

.fx-on .phero--image .phero-media{clip-path:inset(100% -20% -20% -20%);transition:clip-path 1.6s var(--ease-in-out) .05s}
.fx-on .phero--image.fx-lit .phero-media{clip-path:inset(-20% -20% -20% -20%)}
.fx-on .phero--image .phero-media img{scale:1.28;filter:brightness(.32) saturate(.75);transition:scale 3s var(--ease) .05s,filter 2.3s ease .6s,transform 2.4s var(--ease)}
.fx-on .phero--image.fx-lit .phero-media img{scale:1;filter:none}
/* the warm light behind the arch breathes */
.fx-on .phero.phero--image{background:var(--ivory)}
.phero.phero--image::after{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;opacity:0;
  background:radial-gradient(44rem 36rem at calc(100% - var(--edge) - var(--frame-w) * .5) 50%,rgba(var(--glow),.55),rgba(var(--glow),.14) 50%,transparent 74%)}
.fx-on .phero--image.fx-lit::after{animation:fxFade 2.2s ease .6s both,fxBreathe 11s ease-in-out 2.8s infinite}
@media (max-width:55.99rem){
  .phero.phero--image::after{background:radial-gradient(34rem 30rem at 50% 82%,rgba(var(--glow),.5),transparent 70%)}
}

/* ---------------------------------------------------------------- scroll reveals */
.fx-on [data-fx]:not(.fx-in):not([data-fx=words]):not([data-fx=curtain]){opacity:0}
.fx-on [data-fx=up].fx-in{animation:fxUp 1.05s var(--ease) var(--fx-d,0ms) both}
.fx-on [data-fx=item].fx-in{animation:fxItem 1.1s var(--ease) var(--fx-d,0ms) both}
.fx-on [data-fx=rise].fx-in{animation:fxRise 1.3s var(--ease) var(--fx-d,0ms) both}
.fx-on [data-fx=curtain]:not(.fx-in){clip-path:inset(100% -10% -10% -10%)}
.fx-on [data-fx=curtain].fx-in{animation:fxCurtain 1.5s var(--ease-in-out) var(--fx-d,0ms) both}
.fx-on .figure[data-fx=curtain].fx-in img{animation:fxCurtainImg 2.2s var(--ease) var(--fx-d,0ms) both}
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.fx-w>span{display:inline-block}
.fx-on [data-fx=words]:not(.fx-in) .fx-w>span{translate:0 112%}
.fx-on [data-fx=words].fx-in .fx-w>span{animation:fxWord 1.15s var(--ease) calc(var(--fx-d,0ms) + var(--wi) * 55ms) both}
.fx-on .p-grid>li.fx-pop{animation:fxItem .75s var(--ease) calc(var(--pi) * 38ms) both}
.fx-on [data-reveal]{transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}

/* section hairlines draw outward from the centre as a section arrives */
.fx-sec{transition:background-size 1.8s var(--ease)}
.fx-on .fx-sec:not(.fx-seen){--hair:0}

/* the sticky story's photograph drifts slowly while it is the active one */
.fx-on .story-media img.is-active{animation:fxKen 12s ease-out both}
.fx-on .story-step .m-img img{scale:1.12;translate:0 var(--py,0px)}
.fx-on .figure img{scale:1.1;translate:0 var(--py,0px)}

/* ---------------------------------------------------------------- the marquee (home) */
.fx-marquee{position:relative;overflow:hidden;background:var(--ivory);border-block:1px solid var(--line);padding-block:clamp(1.1rem,2.2vw,1.9rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.fx-mq-track{display:flex;width:max-content;animation:fxMarquee 80s linear infinite;will-change:transform}
.fx-marquee:hover .fx-mq-track{animation-play-state:paused}
.fx-mq-group{display:flex;align-items:center;flex:none}
.fx-mq-item{font-family:var(--serif);font-size:clamp(1.85rem,1.2rem + 2.8vw,3.8rem);font-weight:450;letter-spacing:-.01em;line-height:1.15;color:var(--ink);white-space:nowrap;padding-inline:clamp(1.3rem,2.8vw,2.9rem)}
.fx-mq-item.is-alt{color:var(--brass-deep)}
.fx-marquee svg{flex:none;width:clamp(1.05rem,1.5vw,1.55rem);height:auto;color:var(--brass);filter:drop-shadow(0 0 8px rgba(174,128,53,.35))}
.fx-reduced .fx-mq-track{animation:none}
@media (prefers-reduced-motion:reduce){.fx-mq-track{animation:none}}

/* ---------------------------------------------------------------- light that follows the cursor */
.fx-light{position:absolute;left:0;top:0;z-index:-2;width:44rem;height:44rem;margin:-22rem 0 0 -22rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--glow),.46),rgba(var(--glow),.14) 55%,transparent);opacity:0;transition:opacity .9s var(--ease);will-change:transform}
.fx-lighton>.fx-light{opacity:1}
.cta-band .fx-light{width:36rem;height:36rem;margin:-18rem 0 0 -18rem}

/* cards catch a soft light under the pointer; --ga fades it in and out */
.p-card,.cat-tile,.rail-card,.panel,.disc{--ga:0;transition-property:transform,box-shadow,border-color,--ga;transition-duration:.6s;transition-timing-function:cubic-bezier(.22,1,.36,1);
  background-image:radial-gradient(24rem circle at var(--mx,50%) var(--my,0%),rgba(233,212,166,calc(var(--ga) * .34)),transparent 62%)}
.p-card:hover,.cat-tile:hover,.rail-card:hover,.panel:hover,.disc:hover{--ga:1}
.disc{transition-duration:.6s}

/* ---------------------------------------------------------------- cards, deeper hover */
.p-card,.cat-tile,.rail-card,a.panel{transition-duration:.6s;transition-timing-function:var(--ease)}
.p-card:hover,.cat-tile:hover,.rail-card:hover,a.panel:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(60,46,18,.04),0 34px 60px -30px rgba(80,58,18,.38),0 0 0 1px rgba(201,169,110,.35)}
.p-card .img img,.cat-tile .img img,.rail-card img{transition:transform 1.1s var(--ease)}
.p-card:hover .img img{transform:scale(1.09)}
.cat-tile:hover .img img{transform:scale(1.09)}
.rail-card:hover img{transform:scale(1.08)}
.p-card .meta h3,.cat-tile h3,.rail-card h3{transition:color .35s,translate .6s var(--ease)}
.p-card:hover .meta h3,.cat-tile:hover h3,.rail-card:hover h3{translate:3px 0}
/* project / application panels: the brass accent runs the full width */
.panel::before{transition:width .8s var(--ease),box-shadow .8s var(--ease)}
.panel:hover::before{width:calc(100% - 2 * clamp(1.5rem,2.6vw,2.25rem));box-shadow:0 0 12px rgba(174,128,53,.5)}
.person .monogram{transition:box-shadow .6s var(--ease),background-color .6s}
.person:hover .monogram{box-shadow:0 0 0 8px rgba(var(--glow),.28),0 0 30px rgba(174,128,53,.28)}
.story-step h3{transition:translate .8s var(--ease)}
.story-step.is-active h3{translate:0 0}
.fx-on .story-step:not(.is-active) h3{translate:-6px 0}

/* ---------------------------------------------------------------- buttons */
.btn{transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),box-shadow .55s var(--ease),transform .45s var(--ease),background-size .6s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.12s}
.btn::after{content:"";position:absolute;z-index:-1;left:var(--rx,50%);top:var(--ry,50%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(var(--glow),.55);opacity:0;pointer-events:none}
.btn.fx-bloom::after{animation:fxBloom .8s var(--ease) both}
.btn--line{background-image:linear-gradient(rgba(var(--glow),.38),rgba(var(--glow),.38));background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0}
.btn--line:hover{--bg:transparent;background-size:100% 100%}
.link-arrow{background-image:linear-gradient(var(--brass-deep),var(--brass-deep));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:color .35s var(--ease),background-size .6s var(--ease)}
.link-arrow:hover{background-size:100% 1px}
.icon-btn{transition:background-color .35s,color .35s,border-color .35s,transform .45s var(--ease)}
.icon-btn:hover{transform:scale(1.06)}

/* ---------------------------------------------------------------- navigation */
.hdr.fx-hide{transform:translateY(calc(-100% - 2px));box-shadow:none}
.nav{position:relative}
.nav.has-ink>a::after,.nav.has-ink>.nav-group>button::after{display:none}
.fx-ink{position:absolute;left:0;bottom:.45rem;height:1.5px;width:0;border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,var(--brass-soft),var(--brass),var(--brass-soft));box-shadow:0 0 10px rgba(174,128,53,.5);
  transition:transform .6s var(--ease),width .6s var(--ease),opacity .4s var(--ease)}
.fx-on .mega h3,.mega .mega-h{opacity:0;translate:0 6px;transition:opacity .45s var(--ease),translate .55s var(--ease)}
.fx-on .mega a{opacity:0;translate:0 8px;transition:color .25s var(--ease),transform .35s var(--ease),opacity .45s var(--ease) calc(var(--i,0) * 20ms + 60ms),translate .6s var(--ease) calc(var(--i,0) * 20ms + 60ms)}
.fx-on .mega.is-open h3,.fx-on .mega.is-open a{opacity:1;translate:0 0}
.fx-on .drawer nav>*{opacity:0;translate:0 14px;transition:opacity .5s var(--ease),translate .7s var(--ease)}
.fx-on .drawer.is-open nav>*{opacity:1;translate:0 0}
.fx-on .drawer.is-open nav>:nth-child(2){transition-delay:.04s}.fx-on .drawer.is-open nav>:nth-child(3){transition-delay:.08s}
.fx-on .drawer.is-open nav>:nth-child(4){transition-delay:.12s}.fx-on .drawer.is-open nav>:nth-child(5){transition-delay:.16s}
.fx-on .drawer.is-open nav>:nth-child(6){transition-delay:.2s}.fx-on .drawer.is-open nav>:nth-child(7){transition-delay:.24s}
.fx-on .drawer.is-open nav>:nth-child(n+8){transition-delay:.28s}

/* ---------------------------------------------------------------- ambient light */
.cta-band::after{content:"";position:absolute;z-index:-2;right:-8%;bottom:-30%;width:min(62rem,120vw);height:44rem;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--glow),.34),transparent);animation:fxDrift 18s ease-in-out infinite alternate}
.cta-band .mark{translate:0 var(--py,0px);animation:fxSpin 240s linear infinite}
.ftr .mark{animation:fxSpin 320s linear infinite reverse}
.ftr::before{background:linear-gradient(90deg,transparent 0%,rgba(201,169,110,.45) 30%,rgba(245,222,170,1) 50%,rgba(201,169,110,.45) 70%,transparent 100%);background-size:220% 100%;animation:fxShimmer 10s linear infinite}
.hero-meta>span::before{animation:fxDot 4s ease-in-out infinite}
.hero-meta>span:nth-child(2)::before{animation-delay:1.3s}.hero-meta>span:nth-child(3)::before{animation-delay:2.6s}
@keyframes fxDot{0%,100%{box-shadow:0 0 0 3px rgba(var(--glow),.45)}50%{box-shadow:0 0 0 6px rgba(var(--glow),.12),0 0 12px rgba(174,128,53,.5)}}
.fx-num{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
.progress{box-shadow:0 0 10px rgba(174,128,53,.55)}

/* ---------------------------------------------------------------- phones: lighter, shorter */
@media (max-width:40rem){
  .fx-on [data-fx=item].fx-in{animation-duration:.85s}
  .fx-on [data-fx=up].fx-in{animation-duration:.85s}
  .p-card:hover,.cat-tile:hover,.rail-card:hover,a.panel:hover{transform:translateY(-3px)}
  .cta-band::after{animation:none}
}
@media (hover:none){
  .btn:hover{transform:none}
  .p-card:hover .meta h3,.cat-tile:hover h3,.rail-card:hover h3{translate:0 0}
}

@media (prefers-reduced-motion:reduce){
  .cta-band::after,.cta-band .mark,.ftr .mark,.ftr::before,.hero-meta>span::before,.story-media img.is-active{animation:none!important}
  .btn:hover,.p-card:hover,.cat-tile:hover,.rail-card:hover,a.panel:hover{transform:none}
  .fx-light{display:none}
}
@media print{
  [data-fx],.fx-w>span{opacity:1!important;animation:none!important;clip-path:none!important;translate:none!important}
  .fx-marquee,.fx-light{display:none!important}
}
/* without JavaScript the home hero is shown settled (was hidden before) */
.no-js .hero-media img{opacity:1;transform:none}
.no-js .hero-sub{opacity:1;transform:none}
.no-js .hero h1 .ln>span{transform:none}
.no-js .hero-mandala path{opacity:.1}

/* ---------------------------------------------------------------- consent notice
   Shown only when analytics is configured and the visitor has not chosen yet. */
.consent{position:fixed;z-index:300;left:50%;bottom:calc(env(safe-area-inset-bottom) + 1rem);translate:-50% 0;width:min(46rem,calc(100vw - 2rem));
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;justify-content:space-between;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.35rem;
  box-shadow:0 2px 6px rgba(60,46,18,.05),0 30px 60px -30px rgba(60,46,18,.45);
  opacity:0;translate:-50% 14px;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.consent.is-in{opacity:1;translate:-50% 0}
.consent::before{content:"";position:absolute;left:1.35rem;right:1.35rem;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent)}
.consent-t{flex:1 1 20rem;font-size:.9rem;line-height:1.6;color:var(--ink-2);margin:0}
.consent-t a{text-decoration:underline;text-decoration-color:var(--brass)}
.consent-t a:hover{color:var(--brass-deep)}
.consent-b{display:flex;gap:.6rem;flex:0 0 auto}
@media (max-width:34rem){.consent{padding:1rem}.consent-b{width:100%}.consent-b .btn{flex:1}}
@media (prefers-reduced-motion:reduce){.consent{transition:none;opacity:1;translate:-50% 0}}

/* ---------------------------------------------------------------- brand ticker at the top
   The marquee now sits directly under the header, above the hero, so it reads
   as a slim brand line rather than a band interrupting the page. */
.fx-marquee--top{margin-top:calc(var(--header-h) + env(safe-area-inset-top));border-top:0;background:var(--ivory);padding-block:clamp(.7rem,1.2vw,1.15rem)}
.fx-marquee--top .fx-mq-item{font-size:clamp(1.15rem,.85rem + 1.2vw,1.9rem);font-weight:480;padding-inline:clamp(1rem,2vw,2.1rem)}
.fx-marquee--top svg{width:clamp(.75rem,1vw,1rem)}
.fx-marquee--top .fx-mq-track{animation-duration:95s}
/* the hero keeps filling the screen under it */
.has-topbar .hero{min-height:calc(100svh - var(--topbar-h,4rem))}
@media (min-width:56rem){
  .has-topbar .hero{min-height:max(36rem,calc(min(100vh,62rem) - var(--topbar-h,4rem)))}
  .has-topbar .hero-in{padding-top:clamp(2rem,5vh,4rem)}
  .has-topbar .hero-media{top:clamp(1.5rem,4vh,3rem)}
}
@media (max-width:55.99rem){
  .has-topbar .hero-in{padding-top:clamp(1.5rem,4vh,2.5rem)}
}

/* ---------------------------------------------------------------- anchored discipline image
   Previously this followed the cursor around the section. It now sits on the
   right of the list, opens once, and drifts only slightly with the scroll. */
@media (min-width:64rem){
  .sec .wrap:has(> .disc-peek){position:relative}
  .disc-peek{position:absolute;inset:auto;right:max(var(--gutter),env(safe-area-inset-right));top:50%;left:auto;
    width:clamp(17rem,25vw,23rem);aspect-ratio:4/5;
    transform:translateY(-50%)!important;translate:0 var(--py,0px);
    opacity:0;scale:.97;pointer-events:none;
    clip-path:inset(100% 0 0 0 round 100vmax 100vmax var(--r-md) var(--r-md));
    transition:opacity .9s var(--ease),scale .9s var(--ease),clip-path 1.5s var(--ease-in-out),box-shadow .7s var(--ease)}
  .disc-peek.fx-open{opacity:1;scale:1;clip-path:inset(0 0 0 0 round 100vmax 100vmax var(--r-md) var(--r-md))}
  .disc-peek.is-on{scale:1.02;box-shadow:0 0 0 6px rgba(251,248,242,.95),0 0 0 7px rgba(174,128,53,.28),0 46px 80px -34px rgba(80,58,18,.5)}
  .disc-peek img{transition:opacity .5s var(--ease)}
  /* keep the rows clear of the image */
  .disciplines{padding-right:calc(clamp(17rem,25vw,23rem) + clamp(2rem,4vw,4rem))}
  .disc p{max-width:44ch}
}
@media (min-width:64rem) and (prefers-reduced-motion:reduce){
  .disc-peek{opacity:1;scale:1;clip-path:none;transition:none;translate:none}
}
@media (max-width:63.99rem){.disc-peek{display:none}}

/* price on catalogue cards */
.p-card .p-price{margin-top:.5rem;font-size:.95rem;font-weight:650;letter-spacing:.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.p-card .p-price.is-req{font-size:.8rem;font-weight:500;letter-spacing:.02em;color:var(--muted)}
@media (max-width:39.99rem){.p-card .p-price{font-size:.88rem}.p-card .p-price.is-req{font-size:.74rem}}

/* ---------------------------------------------------------------- whole images, no crop, no zoom
   Arch frames show the full photograph (contain) over a soft blurred copy of
   itself, so nothing is cut off and nothing is enlarged past its real pixels. */
.hero-media img.media-bg,.phero-media img.media-bg{position:absolute;inset:0!important;width:100%!important;height:100%!important;object-fit:cover;object-position:50% 50%;filter:blur(28px) saturate(1.05) brightness(.8)!important;scale:1.18!important;transform:none!important;opacity:1!important;pointer-events:none}
.hero-media img.media-main,.phero-media img.media-main{position:absolute;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:50% 50%!important;transform:none!important;scale:1!important;translate:none!important}
.disc-peek img{object-fit:contain}
.disc-peek.is-on{scale:1}
.figure--whole{aspect-ratio:auto}
.figure--whole img{scale:1!important;translate:none!important;transform:none!important;object-fit:contain}
.rail-card img,.rail-card:hover img{transform:none!important}
.hero-media img.media-main,.phero-media img.media-main{object-position:50% 100%!important}
.disc-peek{border-radius:var(--r-lg)!important}
.disc-peek.fx-open{clip-path:inset(0 0 0 0 round var(--r-lg))!important}