:root{
  color-scheme: light;
  --ground:#F7F2E8;
  --solid:#FCFAF5;
  --ivory:#F7F2E8;
  --ivory-deep:#EFE7D8;
  --marble:#FCFAF5;
  --ink:#171512;
  --earth:#8C7B64;
  --earth-soft:#B9AC97;
  --line:#E2D8C4;
  --green:#1E4D3B;
  --green-deep:#143528;
  --green-tint:#E4ECE5;
  --midnight:#0E1B33;
  --gold:#B4934A;
  --gold-soft:#D9C48F;
  --gold-pale:#F1E7CF;
  --kraft:#CDB893;
  --kraft-deep:#B89E72;
  --kraft-ink:#2A2114;
  --pattern-alpha:.5;
  --section-ground:var(--ground);
  --photo-filter:brightness(1);   /* neutral, so it can chain with the hero grade */
  --sc-on:1;   /* Spectral Contour system: 1 on, 0 off */
  /* light: the hero sits on the ivory ground; the nav over it is dark ink on pale glass */
  --hero-ground:var(--ivory);
  --hero-frame:inset 0 0 0 1px rgba(180,147,74,.35), 0 26px 60px -34px rgba(23,21,18,.4);
  --hero-veil:rgba(23,21,18,.82);
  --over-ink:var(--midnight);
  --over-ink-soft:var(--earth);
  --over-glass:rgba(252,250,245,.62);
  --over-border:rgba(23,21,18,.14);
  --over-btn-bg:var(--green);
  --over-btn-ink:var(--marble);
  --over-hover:var(--gold);
  /* light: spectral contours in ethereal blue-green */
  --sc-a-col:rgba(24,158,168,.9);
  --sc-b-col:rgba(58,176,140,.78);
  --huruf-cta:#189EA8;
  --huruf-cta-hover:#3AB08C;
  --huruf-cta-ink:#FCFAF5;
  --sc-bloom:rgba(90,196,186,.34);
  --sc-bloom-strong:rgba(90,196,186,.5);
  --sc-ghost-a:rgba(24,158,168,.22);
  --sc-ghost-b:rgba(58,176,140,.18);
  --sc-idle:.2;
  --sc-idle-surf:.1;
  --sc-hover:.55;
  --sc-hover-surf:.4;
  --sc-act:.85;
  /* Flower of Life — circles of radius 72 on a hexagonal lattice; the 72×124.7 tile repeats seamlessly. Light: single gold line. */
  --fol-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='124.708' viewBox='0 0 72 124.708'%3E%3Cg fill='none' stroke='%23D9C48F' stroke-width='.7' opacity='.6'%3E%3Ccircle cx='-36' cy='-62.354' r='72'/%3E%3Ccircle cx='36' cy='-62.354' r='72'/%3E%3Ccircle cx='108' cy='-62.354' r='72'/%3E%3Ccircle cx='-72' cy='0' r='72'/%3E%3Ccircle cx='0' cy='0' r='72'/%3E%3Ccircle cx='72' cy='0' r='72'/%3E%3Ccircle cx='144' cy='0' r='72'/%3E%3Ccircle cx='-36' cy='62.354' r='72'/%3E%3Ccircle cx='36' cy='62.354' r='72'/%3E%3Ccircle cx='108' cy='62.354' r='72'/%3E%3Ccircle cx='-72' cy='124.708' r='72'/%3E%3Ccircle cx='0' cy='124.708' r='72'/%3E%3Ccircle cx='72' cy='124.708' r='72'/%3E%3Ccircle cx='144' cy='124.708' r='72'/%3E%3Ccircle cx='-36' cy='187.062' r='72'/%3E%3Ccircle cx='36' cy='187.062' r='72'/%3E%3Ccircle cx='108' cy='187.062' r='72'/%3E%3C/g%3E%3C/svg%3E");
  --frame-shadow:0 18px 40px -18px rgba(23,21,18,.35), 0 2px 6px rgba(23,21,18,.08);

  --serif:"EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --arabic:"Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
  --sans:"EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --accent-ink:#86662A;   /* upright gold accent lines; deep enough to read on ivory */

  --t-xs:.875rem; --t-sm:1rem; --t-md:1.125rem; --t-lg:1.4375rem;
  --t-xl:1.75rem; --t-2xl:2.5rem; --t-3xl:clamp(2.75rem,6vw,4.5rem);
  --measure:62ch;
  --wrap:1180px;
  --pad:clamp(1.25rem,5vw,4rem);
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --accent-ink:#CDAA5E;
  --ground:#06070D; --solid:#0F1017;
  --ivory:rgba(8,9,16,.94); --ivory-deep:rgba(5,6,12,.72); --marble:rgba(13,14,25,.66);
  --section-ground:rgba(6,7,13,.42);
  --ink:#E9E6F0; --earth:#A39FB4; --earth-soft:#6B6880; --line:rgba(150,160,215,.11);
  --green:#78B39A; --green-deep:#93C7AF; --green-tint:rgba(22,40,46,.72);
  --midnight:#F1EEF5; --gold:#CDAA5E; --gold-soft:#8C7645; --gold-pale:rgba(60,50,30,.6);
  --kraft:rgba(43,36,25,.9); --kraft-deep:#3A3122; --kraft-ink:#E8DCC3;
  --pattern-alpha:.34;
  --photo-filter:brightness(.82) saturate(.9);
  --bloom:.3;
  --sc-on:1;
  --hero-ground:#06070D;
  --hero-frame:inset 0 0 0 1px rgba(205,170,94,.28), 0 40px 80px -40px rgba(0,0,0,.8);
  --hero-veil:rgba(6,7,13,.88);
  --over-ink:#FCFAF5;
  --over-ink-soft:rgba(252,250,245,.88);
  --over-glass:rgba(6,7,13,.36);
  --over-border:rgba(252,250,245,.18);
  --over-btn-bg:#F1EEF5;
  --over-btn-ink:#0E1B33;
  --over-hover:#E3C57C;
  --sc-a-col:rgba(92,226,255,.85);
  --sc-b-col:rgba(255,96,216,.72);
  --huruf-cta:#5CE2FF;
  --huruf-cta-hover:#FF60D8;
  --huruf-cta-ink:#06070D;
  --sc-bloom:rgba(138,107,255,.32);
  --sc-bloom-strong:rgba(138,107,255,.48);
  --sc-ghost-a:rgba(92,226,255,.26);
  --sc-ghost-b:rgba(255,96,216,.2);
  --sc-idle:.14;
  --sc-idle-surf:.07;
  --sc-hover:.62;
  --sc-hover-surf:.42;
  --sc-act:.92;
  --fol-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='124.708' viewBox='0 0 72 124.708'%3E%3Cdefs%3E%3Cfilter id='g' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Cg id='c' fill='none'%3E%3Ccircle cx='-36' cy='-62.354' r='72'/%3E%3Ccircle cx='36' cy='-62.354' r='72'/%3E%3Ccircle cx='108' cy='-62.354' r='72'/%3E%3Ccircle cx='-72' cy='0' r='72'/%3E%3Ccircle cx='0' cy='0' r='72'/%3E%3Ccircle cx='72' cy='0' r='72'/%3E%3Ccircle cx='144' cy='0' r='72'/%3E%3Ccircle cx='-36' cy='62.354' r='72'/%3E%3Ccircle cx='36' cy='62.354' r='72'/%3E%3Ccircle cx='108' cy='62.354' r='72'/%3E%3Ccircle cx='-72' cy='124.708' r='72'/%3E%3Ccircle cx='0' cy='124.708' r='72'/%3E%3Ccircle cx='72' cy='124.708' r='72'/%3E%3Ccircle cx='144' cy='124.708' r='72'/%3E%3Ccircle cx='-36' cy='187.062' r='72'/%3E%3Ccircle cx='36' cy='187.062' r='72'/%3E%3Ccircle cx='108' cy='187.062' r='72'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23c' stroke='%238A6BFF' stroke-width='3' opacity='.38' filter='url(%23g)'/%3E%3Cuse href='%23c' stroke='%23FF5FD7' stroke-width='.45' opacity='.3' transform='translate(-.9 0)'/%3E%3Cuse href='%23c' stroke='%235AE0FF' stroke-width='.45' opacity='.3' transform='translate(.9 0)'/%3E%3Cuse href='%23c' stroke='%23FFFFFF' stroke-width='.3' opacity='.14'/%3E%3C/svg%3E");
  --frame-shadow:0 18px 40px -18px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;min-height:100%;background:var(--ground)}
body{
  min-height:100vh;
  min-height:100dvh;
  background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:var(--t-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* iOS Safari 26: keep the browser's sampled viewport edge on the studio
   backdrop instead of the full-screen spectral layers. This preserves the
   field through the page while fading only the final toolbar-adjacent strip. */
:root[data-theme="light"],
:root[data-theme="light"] body{background-color:#F7F2E8}
:root[data-theme="dark"],
:root[data-theme="dark"] body{background-color:#06070D}
@supports (-webkit-touch-callout:none){
  @media (max-width:820px){
    #field,#huruf{
      -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 5.25rem),transparent 100%);
      mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 5.25rem),transparent 100%);
    }
  }
}
img,svg{display:block;max-width:100%}
main,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}

/* ---------- Shared huruf; the Astral Field shader runs only in dark mode ----------
   Real Amiri letterforms sit behind the content in both themes. */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background:var(--ground);opacity:.5;transform:translateZ(0)}
#huruf{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;font-family:var(--arabic);direction:rtl}
/* the wayside ḥurūf: in the document, behind the page, scrolling with it natively —
   scenery the visitor passes. Only a faint counter-drift (depth ≈ .05) is layered on. */
body{position:relative}
#huruf-page{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;font-family:var(--arabic);direction:rtl;contain:paint}
#huruf-page span,
#huruf span{
  position:absolute;line-height:1;white-space:nowrap;
  color:rgba(178,190,255,calc(var(--o,.05) * 2.8));
  text-shadow:1.5px 0 0 rgba(90,225,255,.26), -1.5px 0 0 rgba(255,95,215,.22), 0 0 22px rgba(120,120,255,.16);
  transform:translate3d(0,calc(var(--sy,0px) * -1 * var(--depth,0)),0);
  filter:blur(var(--blur,0px));
  animation:huruf-breathe var(--dur,60s) ease-in-out infinite alternate;
  will-change:transform,opacity;
}
@keyframes huruf-breathe{from{opacity:.8}50%{opacity:1.45}to{opacity:.95}}
/* the traced letters: the same letterforms as the rest, with a quiet green
   energy along the edge — a hairline contour and a soft halo, nothing filled */
:is(#huruf,#huruf-page) span.traced{-webkit-text-stroke:.6px rgba(60,240,205,calc(var(--o,.05) * 3.2))}
@media (prefers-reduced-motion:reduce){ :is(#huruf,#huruf-page) span{animation:none} }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:var(--gold-pale);color:var(--ink)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;text-wrap:balance;color:var(--ink)}
h1{font-size:var(--t-3xl);letter-spacing:-.01em}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-lg)}
p{max-width:var(--measure)}
.eyebrow{font-weight:500;font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.lede{font-size:var(--t-lg);line-height:1.5;color:var(--ink)}
.muted{color:var(--earth)}
.ar{font-family:var(--arabic);direction:rtl;font-feature-settings:"liga","calt"}

/* ---------- layout ---------- */
.wrap{width:min(var(--wrap),100% - 2*var(--pad));margin-inline:auto}
section{padding-block:clamp(4rem,9vw,7.5rem)}
.section-head{display:grid;gap:.75rem;margin-bottom:clamp(2rem,5vw,3.5rem);max-width:var(--measure)}
.rule{display:flex;align-items:center;gap:1.25rem;width:min(var(--wrap),100% - 2*var(--pad));margin-inline:auto}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft) 20%,var(--gold-soft) 80%,transparent)}
.rule svg{width:12px;height:26px;fill:var(--gold);flex:none}

/* framed print treatment */
.frame{background:var(--solid);padding:clamp(.5rem,1.4vw,1rem);border:1px solid var(--line);box-shadow:var(--frame-shadow)}
.frame img{width:100%;height:auto}

/* ---------- nav: brand | links pill | icons ---------- */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ivory) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.75rem,1.5vw,1.5rem);min-height:4.25rem}
.brand{display:flex;align-items:center;gap:.75rem;white-space:nowrap}
.brand svg{width:17px;height:36px;fill:var(--midnight)}
.brand-name{font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:.02em;color:var(--midnight);line-height:1.1}
.brand-name small{display:block;font-weight:400;font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--earth);margin-top:.1rem;white-space:nowrap}
.nav-pill{display:flex;align-items:center;justify-content:flex-end;gap:clamp(.75rem,1.4vw,1.5rem);min-width:0;max-width:100%}
.nav-links{display:flex;align-items:center;gap:clamp(.7rem,1.5vw,1.6rem);list-style:none;flex-wrap:nowrap;min-width:0}
.nav-links a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:clamp(.875rem,.95vw,1rem);letter-spacing:.05em;color:var(--ink);padding-block:.25rem;border-bottom:1px solid transparent;transition:border-color .2s;white-space:nowrap}
.nav-links a:hover{border-bottom-color:var(--gold)}
.nav-enquire{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem 1rem;border:1px solid var(--gold);border-radius:999px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:background .2s;white-space:nowrap}
.nav-enquire{transition:background .45s cubic-bezier(.2,.6,.2,1),border-color .45s cubic-bezier(.2,.6,.2,1)}
.nav-enquire:hover{background:var(--gold-pale)}
.nav-right{display:flex;align-items:center;gap:.6rem}
.icon-btn,.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;background:none;border:1px solid var(--line);border-radius:50%;color:var(--earth);cursor:pointer;transition:color .2s,border-color .2s;flex:none}
.icon-btn,.theme-toggle{transition:color .45s cubic-bezier(.2,.6,.2,1),border-color .45s cubic-bezier(.2,.6,.2,1)}
.icon-btn:hover,.theme-toggle:hover{color:var(--gold);border-color:var(--gold-soft)}
.icon-btn svg,.theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .ico,.theme-toggle .ico{width:16px;height:16px;vertical-align:0}
.nav-toggle{display:none;min-height:2.75rem;background:none;border:1px solid var(--line);border-radius:999px;padding:.55rem .9rem;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}

/* small note for features that are not live yet */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,0);z-index:40;width:max-content;max-width:min(92vw,36rem);text-align:center;background:var(--solid);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:.7rem 1.2rem;font-size:var(--t-sm);line-height:1.45;box-shadow:var(--frame-shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,-.25rem)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;gap:.6rem;font-weight:500;font-size:var(--t-sm);letter-spacing:.12em;text-transform:uppercase;padding:.9rem 1.6rem;border-radius:2px;border:1px solid var(--green);background:var(--green);color:var(--marble);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn{transition:background .45s cubic-bezier(.2,.6,.2,1),border-color .45s cubic-bezier(.2,.6,.2,1),color .45s cubic-bezier(.2,.6,.2,1)}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep)}
/* Purchase CTAs echo the actual huruf: translucent offset colour traces rather
   than a loud rainbow fill. Keep the treatment atmospheric and mode-relative. */
:is(#basket-btn,.qa-add,.to-basket){
  background:
    linear-gradient(104deg,
      rgba(255,174,208,.34) 0%,
      rgba(183,174,226,.46) 23%,
      rgba(142,198,222,.52) 48%,
      rgba(129,190,193,.48) 72%,
      rgba(245,197,215,.30) 100%),
    color-mix(in srgb,var(--ivory) 72%,#A9D8D6 28%);
  border-color:rgba(125,190,187,.58);
  color:var(--midnight);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    0 7px 20px -16px rgba(71,145,151,.46);
  background-size:145% 100%;
}
:is(#basket-btn,.qa-add,.to-basket):hover{
  background-position:100% 50%;
  border-color:rgba(112,181,180,.72);
  color:var(--midnight);
}
:root[data-theme="dark"] :is(#basket-btn,.qa-add,.to-basket){
  background:
    linear-gradient(104deg,
      rgba(20,91,113,.72) 0%,
      rgba(40,78,113,.76) 22%,
      rgba(72,66,118,.78) 48%,
      rgba(92,47,100,.76) 73%,
      rgba(32,81,101,.70) 100%),
    #111522;
  border-color:rgba(104,108,164,.50);
  color:#F0EDF8;
  box-shadow:
    inset 0 0 0 1px rgba(104,205,222,.08),
    0 7px 22px -17px rgba(59,146,175,.44),
    0 0 14px -12px rgba(180,74,164,.34);
  background-size:145% 100%;
}
:root[data-theme="dark"] :is(#basket-btn,.qa-add,.to-basket):hover{
  background-position:100% 50%;
  border-color:rgba(127,112,178,.62);
  color:#F0EDF8;
}

/* Richer Colour — approved purchase CTA treatment.
   Calm centre, visible huruf energy at the edges, brighter spectral rim. */
:is(#basket-btn,.qa-add,.to-basket){
  background:
    radial-gradient(circle at 8% 50%, rgba(248,198,227,.42) 0%, rgba(248,198,227,0) 17%),
    radial-gradient(circle at 18% 52%, rgba(186,229,238,.34) 0%, rgba(186,229,238,0) 21%),
    radial-gradient(circle at 82% 52%, rgba(160,228,235,.24) 0%, rgba(160,228,235,0) 20%),
    radial-gradient(circle at 92% 50%, rgba(244,184,223,.42) 0%, rgba(244,184,223,0) 17%),
    linear-gradient(90deg,
      rgba(248,245,242,.98) 0%,
      rgba(232,244,246,.98) 34%,
      rgba(218,239,241,.98) 67%,
      rgba(246,243,241,.98) 100%);
  border:1px solid rgba(132,211,224,.82);
  color:var(--midnight);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 8px 22px -18px rgba(86,177,191,.38);
  background-size:100% 100%;
}
:is(#basket-btn,.qa-add,.to-basket):hover{
  border-color:rgba(122,221,236,.96);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.36),
    0 10px 24px -18px rgba(86,177,191,.44),
    0 0 0 1px rgba(186,229,238,.22);
  color:var(--midnight);
}
:root[data-theme="dark"] :is(#basket-btn,.qa-add,.to-basket){
  background:
    radial-gradient(circle at 8% 50%, rgba(69,211,236,.40) 0%, rgba(69,211,236,0) 18%),
    radial-gradient(circle at 18% 50%, rgba(73,118,226,.20) 0%, rgba(73,118,226,0) 23%),
    radial-gradient(circle at 78% 50%, rgba(120,104,239,.22) 0%, rgba(120,104,239,0) 24%),
    radial-gradient(circle at 92% 50%, rgba(224,72,205,.44) 0%, rgba(224,72,205,0) 18%),
    linear-gradient(90deg,
      rgba(12,22,40,.97) 0%,
      rgba(13,23,42,.98) 34%,
      rgba(14,21,43,.98) 67%,
      rgba(17,18,46,.97) 100%);
  border:1px solid rgba(95,214,239,.88);
  color:#F2EEF9;
  box-shadow:
    inset 0 0 0 1px rgba(168,230,244,.08),
    0 8px 24px -18px rgba(59,164,214,.46),
    0 0 18px -15px rgba(194,71,188,.34);
}
:root[data-theme="dark"] :is(#basket-btn,.qa-add,.to-basket):hover{
  border-color:rgba(132,232,255,.98);
  box-shadow:
    inset 0 0 0 1px rgba(168,230,244,.10),
    0 10px 24px -18px rgba(59,164,214,.52),
    0 0 20px -14px rgba(213,79,201,.42);
  color:#F2EEF9;
}
.btn.ghost{background:transparent;color:var(--green)}
.btn.ghost:hover{background:var(--green-tint)}
.btn.gold{background:var(--solid);background:transparent;border-color:var(--gold);color:var(--ink)}
.btn.gold:hover{background:var(--gold-pale)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn[aria-disabled="true"]:hover{background:var(--green);border-color:var(--green)}
.btn.ghost[aria-disabled="true"]:hover{background:transparent}

/* Laws of UX — interaction floor.
   Keep primary controls comfortably selectable without making every element visually loud. */
:is(button,a.btn,.nav-enquire,.nav-toggle,.icon-btn,.theme-toggle,.copy,.sample-note button){
  touch-action:manipulation;
}
:is(.copy,.sample-note button,.line .rm){
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
}
button:disabled,.btn[aria-busy="true"]{
  cursor:wait;
}


/* ---------- hero: an approach toward the Green Dome ----------
   Two photographic planes under a forward camera — 2.5D projection, not a 3D
   model. The near plane is the original umbrella and column clipped to their
   outline; the far plane is one continuous reconstructed view of the dome,
   minaret, sky and facade. Motion values follow the approved reference.
   Default height is a single screen so the page works without JavaScript;
   the script lengthens the scroll region once both layers have decoded. */
.hero{padding:0;position:relative;margin-top:-4.25rem;height:100svh;background:var(--hero-ground);color:#F1EEF5}
.hero.is-live{height:200svh}
.hero-sticky{position:sticky;top:0;height:100svh;padding:calc(4.25rem + .75rem) .75rem .75rem}
.hero-window{position:relative;height:100%;border-radius:28px;overflow:hidden;isolation:isolate;background:var(--ground);box-shadow:var(--hero-frame)}
.hero-scene{position:absolute;transform:translateZ(0);z-index:0}
.hero-layer{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:43% 66%;pointer-events:none;user-select:none}
.hero-layer--plane{visibility:hidden;will-change:transform;backface-visibility:hidden}
.is-ready .hero-layer--plane{visibility:visible}
.is-ready .hero-layer--original{visibility:hidden}
.hero-ghost{will-change:transform;position:absolute;right:-2vw;top:8%;z-index:1;font-family:var(--arabic);font-size:clamp(14rem,38vw,34rem);line-height:1;color:rgba(255,255,255,.07);direction:rtl;pointer-events:none;user-select:none}
/* the veil keeps the copy legible; it lifts as the copy clears */
.hero-window::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--veil,1);
  background:linear-gradient(180deg,rgba(6,7,13,.5) 0%,rgba(6,7,13,.12) 22%,rgba(6,7,13,.34) 50%,rgba(6,7,13,.3) 72%,var(--hero-veil) 100%),
             radial-gradient(ellipse 70% 90% at 50% 45%,transparent 45%,rgba(6,7,13,.45) 100%)}
.hero-center{will-change:transform,opacity;position:absolute;inset:0;z-index:3;display:grid;align-content:center;justify-items:center;text-align:center;gap:1.15rem;padding:2.5rem 1.5rem 4.5rem;margin-inline:auto;width:min(64rem,100%)}
.hero-pill{display:inline-flex;align-items:center;gap:.6rem;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem 1.05rem;border:1px solid rgba(252,250,245,.32);border-radius:999px;color:rgba(252,250,245,.88);background:rgba(6,7,13,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-pill .ar{font-size:1.05rem;line-height:1;color:#E3C57C}
.hero h1{color:#F1EEF5;font-size:clamp(2.6rem,5.6vw,4.9rem);line-height:1.02;max-width:22ch;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero .lede{color:rgba(241,238,245,.86);max-width:54ch;font-size:var(--t-md);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.ask{width:min(680px,100%);margin-top:.75rem;background:rgba(10,11,20,.6);border:1px solid rgba(252,250,245,.16);border-radius:18px;padding:.55rem;display:flex;gap:.5rem;align-items:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.ask input{flex:1;min-width:0;background:transparent;border:0;color:#F1EEF5;font:inherit;font-size:var(--t-md);padding:.8rem 1rem}
.ask input::placeholder{color:rgba(241,238,245,.5)}
.ask button{flex:none;font:inherit;font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:.85rem 1.4rem;border-radius:999px;border:1px solid #F1EEF5;background:#F1EEF5;color:#0E1B33;cursor:pointer;transition:background .2s}
.ask button:hover{background:#FFFFFF}
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.hero-chips a{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:.42rem .9rem;border-radius:999px;border:1px solid rgba(252,250,245,.22);color:rgba(252,250,245,.8);background:rgba(6,7,13,.25);transition:background .2s,border-color .2s}
.hero-chips a:hover{background:rgba(252,250,245,.12);border-color:rgba(252,250,245,.5)}
.hero-proof{position:absolute;left:0;right:0;bottom:1.4rem;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem;padding:0 1.5rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(252,250,245,.62)}
.hero-proof span+span::before{content:"";display:inline-block;width:1px;height:.8em;background:rgba(252,250,245,.3);margin-right:2rem;vertical-align:-.1em}
/* floating glass nav over the hero: brand and icons sit outside; only the links + Enquire form the pill */
.nav.over{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.over .wrap{margin-top:.85rem;min-height:3.4rem}
.nav.over .nav-pill{justify-self:center;justify-content:center;padding:.35rem .4rem .35rem clamp(.9rem,1.4vw,1.4rem);border-radius:999px;background:var(--over-glass);border:1px solid var(--over-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.over .brand svg{fill:var(--over-ink)}
.nav.over .brand-name,.nav.over .nav-links a,.nav.over .nav-toggle{color:var(--over-ink)}
.nav.over .brand-name small{color:var(--over-ink-soft)}
.nav.over .nav-links a:hover{border-bottom-color:var(--over-hover)}
.nav.over .icon-btn,.nav.over .theme-toggle,.nav.over .nav-toggle{color:var(--over-ink-soft);border-color:var(--over-border);background:var(--over-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav.over .nav-enquire{background:var(--over-btn-bg);border-color:var(--over-btn-bg);color:var(--over-btn-ink)}
@media (prefers-reduced-motion:reduce){
  .hero,.hero.is-live{height:100svh}
  .hero-sticky{position:relative}
  .hero-layer--plane{will-change:auto}
}

/* ---------- guiding line ---------- */
.rawda{background:var(--ivory);padding-block:clamp(3rem,6vw,4.5rem);position:relative;overflow:hidden;isolation:isolate}
/* the brand's light behind the words: green rising from below, gold at the horizon, and in
   dark mode the astral violet and cyan drifting through. Soft and slow; opacity + transform only. */
.rawda::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  /* light: the day-side of the same band — sage and green-tint from below, warm gold at the
     horizon, a pale rose and a cool sky-blue drifting in from the corners */
  background:
    radial-gradient(ellipse 60% 55% at 50% 118%, rgba(30,77,59,.42) 0%, rgba(30,77,59,.16) 35%, transparent 70%),
    radial-gradient(ellipse 45% 40% at 50% 100%, rgba(217,196,143,.85) 0%, rgba(217,196,143,.3) 40%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 12% 20%, rgba(232,190,170,.55) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 88% 30%, rgba(170,200,225,.5) 0%, transparent 65%);
  animation:rawda-drift 38s cubic-bezier(.45,.05,.55,.95) infinite alternate;will-change:transform}
:root[data-theme="dark"] .rawda::before{background:
    radial-gradient(ellipse 60% 55% at 50% 118%, rgba(30,77,59,.85) 0%, rgba(30,77,59,.35) 35%, transparent 70%),
    radial-gradient(ellipse 45% 40% at 50% 100%, rgba(180,147,74,.45) 0%, rgba(180,147,74,.12) 40%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 12% 20%, rgba(80,60,200,.42) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 88% 30%, rgba(40,150,170,.34) 0%, transparent 65%)}

.rawda::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, var(--ground), transparent 28%, transparent 72%, var(--ground));opacity:.45}
.rawda .wrap{position:relative;z-index:1;display:grid;gap:1.25rem;justify-items:center;text-align:center}
@keyframes rawda-drift{from{transform:translate3d(-3%,2%,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.rawda::before{animation:none}}
.rawda .ar{font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.7;max-width:34ch;color:var(--gold);text-shadow:0 0 30px rgba(180,147,74,.18)}
.rawda blockquote{font-style:normal;font-size:var(--t-lg);color:var(--ink);max-width:44ch}
:root[data-theme="dark"] .rawda .ar{color:#E4C98A}

.rawda cite{display:block;font-style:normal;font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--earth);margin-top:.75rem}

/* ---------- haramayn gallery ---------- */
.haramayn{background:var(--marble)}
.haramayn .section-head{max-width:70ch}
.sites{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;margin-top:.25rem}
.sites span{font-size:var(--t-sm);color:var(--earth)}
.sites b{font-weight:500;color:var(--ink)}
/* the exhibition: rooms of four, matted frames on the marble, placards beneath */
.exhibit{display:grid;gap:0}
.room{display:grid;grid-template-columns:minmax(10rem,14rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;padding:clamp(1.5rem,3vw,2.25rem) 0}
.room+.room{border-top:1px solid var(--line)}
.room-head{position:sticky;top:6rem;display:grid;gap:.5rem;align-self:start}
.room-n{font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.room-head h3{font-size:var(--t-xl);font-weight:400}
.room-head p{font-size:var(--t-sm);color:var(--earth);max-width:22ch;text-wrap:pretty}
.room-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.75rem)}
.room-wall figure{display:grid;gap:.7rem;margin:0}
.room-wall .art{display:block;aspect-ratio:3/4;padding:8%;background:var(--solid);border:1px solid var(--line);box-shadow:var(--frame-shadow);transition:transform .9s cubic-bezier(.2,.6,.2,1),box-shadow .9s cubic-bezier(.2,.6,.2,1)}
.room-wall .art img{width:100%;height:100%;object-fit:cover;display:block;border:1px solid var(--line)}
.room-wall figure:hover .art{transform:translateY(-3px);box-shadow:0 22px 40px -22px rgba(23,21,18,.35)}
.room-wall figcaption{display:grid;gap:.1rem;padding-left:.15rem;border-left:1px solid var(--gold-soft);padding-left:.7rem}
.room-wall figcaption b{font-weight:500;color:var(--ink);font-size:var(--t-sm)}
.room-wall figcaption span{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--earth)}
@media (max-width:900px){.room{grid-template-columns:1fr}.room-head{position:static}.room-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.gallery figure{display:grid;gap:.5rem;margin:0}
.gallery .art{aspect-ratio:2/3;overflow:hidden;background:var(--ivory-deep);border:1px solid var(--line);box-shadow:var(--frame-shadow)}
.gallery .art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery figure:hover .art img{transform:scale(1.03)}
.gallery figcaption{font-size:var(--t-xs);color:var(--earth);line-height:1.3}
.gallery figcaption b{display:block;font-weight:500;color:var(--ink);font-size:var(--t-sm)}
.gallery-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.gallery-foot p{font-size:var(--t-sm);color:var(--earth);max-width:none}

/* ---------- shop ---------- */
.shop-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.product{display:grid;grid-template-rows:auto 1fr;background:var(--marble);border:1px solid var(--line)}
.product .tile{aspect-ratio:4/3;background:var(--ivory-deep);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.product .tile img{width:100%;height:100%;object-fit:cover}
.product .tile.contain{display:grid;place-items:center;padding:1rem}
.product .tile.contain img{position:absolute;inset:1rem;width:calc(100% - 2rem);height:calc(100% - 2rem);object-fit:contain;box-shadow:none;filter:drop-shadow(0 12px 18px rgba(23,21,18,.22))}
.product .tile .tag{position:absolute;top:.9rem;left:.9rem;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--green);background:var(--solid);padding:.3rem .6rem}
.product .tile.kraft{background:var(--kraft);color:var(--kraft-ink);display:grid;align-content:center;padding:1.5rem;gap:.4rem}
.product .tile.kraft .ar{font-size:2.6rem;line-height:1.1;color:var(--kraft-ink);text-align:left;direction:rtl}
.product .tile.kraft .t{font-family:var(--serif);font-size:var(--t-lg);line-height:1.15}
.product .tile.kraft .t small{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-top:.3rem}
.product-body{display:grid;gap:.75rem;padding:1.4rem 1.4rem 1.5rem;align-content:start}
.product h3{font-size:var(--t-lg)}
.product p{font-size:var(--t-sm);color:var(--earth)}
.product .titles{list-style:none;font-size:var(--t-md);color:var(--ink);display:grid;gap:.15rem}
.product .titles li::before{content:"— ";color:var(--gold)}
.product .price-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.5rem;padding-top:.9rem;border-top:1px solid var(--line)}
.product .price{font-size:var(--t-lg);color:var(--midnight);font-variant-numeric:tabular-nums}
.product .price small{display:block;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--earth)}
.product .btn{padding:.6rem 1rem;font-size:.75rem}
.product.wide{grid-column:span 3;grid-template-rows:none;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.product.wide .tile{aspect-ratio:auto;min-height:280px;border-bottom:0;border-right:1px solid var(--line)}

/* ---------- customer wall ---------- */
.homes{background:var(--ivory)}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:1rem}
.wall figure{margin:0;overflow:hidden;border:1px solid var(--line);background:var(--ivory-deep)}
.wall figure:first-child{grid-column:span 2;grid-row:span 2}
.wall img{width:100%;height:100%;object-fit:cover}
.homes .note{margin-top:1.25rem;font-size:var(--t-sm);color:var(--earth)}
/* what they said: three quiet quotes under the wall */
.said{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--line)}
.quote{margin:0;display:grid;gap:.9rem;align-content:start}
.quote p{font-size:var(--t-md);line-height:1.6;color:var(--ink);text-wrap:pretty}
.quote p::before{content:"“";color:var(--gold);margin-right:.05em}
.quote p::after{content:"”";color:var(--gold)}
.quote footer{display:grid;gap:.15rem;font-size:var(--t-xs)}
.quote footer b{font-weight:500;color:var(--ink);letter-spacing:.02em}
.quote footer span{color:var(--earth)}
@media (max-width:820px){.said{grid-template-columns:1fr}}

/* ---------- studio / founder ---------- */
.studio,.shop,.contact{background:var(--section-ground)}
.studio .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.studio-copy{display:grid;gap:1.25rem}
.studio-copy blockquote{font-style:normal;font-size:var(--t-lg);line-height:1.45;color:var(--ink);border-left:2px solid var(--gold);padding-left:1.25rem;max-width:52ch}
.hadith{display:grid;gap:.4rem;padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hadith .ar{font-size:1.5rem;color:var(--midnight);line-height:1.7}
.hadith em{font-size:var(--t-md)}
.hadith cite{font-style:normal;font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--earth)}
.definition{border-left:2px solid var(--gold);padding:.25rem 0 .25rem 1.25rem;display:grid;gap:.35rem;margin-top:.5rem;max-width:var(--measure)}
.definition .term{font-size:var(--t-xl);font-weight:500;color:var(--midnight)}
.definition .term .ar{font-size:1.15em;color:var(--green);margin-left:.5rem;direction:rtl;display:inline-block}
.definition .pos{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--earth)}
.studio-side{display:grid;gap:1.25rem}
.studio-side figcaption{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--earth)}
.pillars{display:grid;border-top:1px solid var(--line)}
.pillar{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:start}
.pillar .ar{font-size:1.7rem;line-height:1;color:var(--gold);min-width:3.2rem;text-align:center;padding-top:.15rem}
.pillar h3{margin-bottom:.2rem;font-size:var(--t-md)}
.pillar p{font-size:var(--t-sm);color:var(--earth)}

/* ---------- kraft: hand-lettered ---------- */
.kraft-section{background:var(--kraft);color:var(--kraft-ink);position:relative}
.kraft-section::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .08 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.kraft-section .wrap{position:relative}
.kraft-section h2,.kraft-section h3{color:var(--kraft-ink)}
.kraft-section .eyebrow{color:var(--kraft-ink);opacity:.8}
.kraft-section .muted{color:var(--kraft-ink);opacity:.75}
.words{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.word{display:grid;gap:.75rem;margin:0}
.word .art{aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(0,0,0,.18);box-shadow:var(--frame-shadow)}
.word .art img{width:100%;height:100%;object-fit:cover}
.word .ar{font-size:2.2rem;line-height:1;text-align:left;color:var(--kraft-ink)}
.word figcaption{display:grid;gap:.2rem}
.word figcaption b{font-weight:500;font-size:var(--t-md)}
.word figcaption span{font-size:var(--t-sm);opacity:.8}
.themes{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,.18)}
.themes span{font-size:var(--t-sm);border:1px solid rgba(0,0,0,.25);padding:.35rem .9rem;border-radius:999px}
.themes .lbl{border:0;padding-left:0;letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;opacity:.8;align-self:center}

/* ---------- commissions ---------- */
.commissions{background:var(--marble)}
.commissions .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem)}
.comm-copy{display:grid;gap:2rem;align-content:start}
.offer-list{display:grid;border-top:1px solid var(--line)}
.offer{padding:1.2rem 0;border-bottom:1px solid var(--line);display:grid;gap:.3rem}
.offer p{font-size:var(--t-sm);color:var(--earth)}
.process{display:grid;gap:1rem;counter-reset:step}
.process li{list-style:none;display:grid;grid-template-columns:2.25rem 1fr;gap:1rem;align-items:baseline;font-size:var(--t-sm);color:var(--earth)}
.process li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-size:var(--t-lg);color:var(--gold);font-variant-numeric:tabular-nums}
.process li strong{display:block;font-weight:400;color:var(--ink);font-size:var(--t-md)}
.terms{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.term-box{border:1px solid var(--line);padding:1rem 1.1rem;display:grid;gap:.2rem;background:var(--ivory)}
.term-box .k{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--earth)}
.term-box .v{font-size:var(--t-lg);color:var(--midnight)}
.form{background:var(--green-tint);border:1px solid var(--line);padding:clamp(1.5rem,4vw,2.5rem);display:grid;gap:1.1rem;align-content:start}
.form h3{font-size:var(--t-xl);color:var(--midnight)}
.field{display:grid;gap:.4rem}
.field label{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--earth-soft);padding:.6rem 0;border-radius:0}
.field select option{color:var(--ink);background:var(--solid)}
.field textarea{min-height:6.5rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--earth-soft)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form .btn{justify-self:start;margin-top:.5rem}
.form-note{font-size:var(--t-xs);color:var(--earth);letter-spacing:.02em}
.contact-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.25rem}
.btn.wa{background:var(--wa,#1E8E5A);border-color:var(--wa,#1E8E5A);color:#06120C;gap:.55rem}
.btn.wa:hover{filter:brightness(1.08)}
.btn.wa.ghost{background:transparent;color:var(--wa,#1E8E5A);border-color:var(--wa,#1E8E5A)}
.btn.wa.ghost:hover{background:color-mix(in srgb,var(--wa,#1E8E5A) 12%,transparent);filter:none}
:root[data-theme="dark"]{--wa:#4FBE86}

.btn.wa svg{width:16px;height:16px;fill:currentColor;flex:none}
.contact-actions{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  justify-self:center;
  align-self:center;
  gap:1.15rem;
  width:max-content;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
:is(.contact-actions,.form-actions) .contact-choice{
  --contact-cyan:#36BFD1;
  display:grid;
  justify-items:center;
  gap:.52rem;
  min-width:4.9rem;
  padding:0;
  border:0;
  background:transparent;
  color:var(--green);
  font-family:var(--ui);
  font-size:.625rem;
  font-weight:650;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  text-decoration:none;
}
:is(.contact-actions,.form-actions) .contact-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:3.35rem;
  height:3.35rem;
  border:1px solid color-mix(in srgb,var(--green) 70%,var(--line));
  border-radius:50%;
  background:color-mix(in srgb,var(--solid) 78%,var(--green-tint) 22%);
  box-shadow:0 10px 28px -24px rgba(20,42,36,.55);
  transition:
    transform .32s cubic-bezier(.16,1,.3,1),
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    color .28s ease;
}
:is(.contact-actions,.form-actions) .contact-icon::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid color-mix(in srgb,var(--contact-cyan) 52%,transparent);
  border-radius:50%;
  opacity:0;
  transform:scale(.88) rotate(-7deg);
  transition:opacity .28s ease,transform .38s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
:is(.contact-actions,.form-actions) .contact-choice:hover .contact-icon{
  transform:translateY(-2px) rotate(-3deg);
  border-color:var(--green);
  color:var(--green-deep);
  background:color-mix(in srgb,var(--solid) 62%,var(--green-tint) 38%);
  box-shadow:0 15px 32px -24px rgba(20,42,36,.72);
}
:is(.contact-actions,.form-actions) .contact-choice:nth-child(even):hover .contact-icon{
  transform:translateY(-2px) rotate(3deg);
}
:is(.contact-actions,.form-actions) .contact-choice:hover .contact-icon::after,
:is(.contact-actions,.form-actions) .contact-choice:focus-visible .contact-icon::after{
  opacity:.72;
  transform:scale(1) rotate(5deg);
}
:is(.contact-actions,.form-actions) .contact-choice:focus-visible{
  outline:none;
}
:is(.contact-actions,.form-actions) .contact-choice:focus-visible .contact-icon{
  outline:2px solid var(--contact-cyan);
  outline-offset:4px;
}
:is(.contact-actions,.form-actions) .contact-choice:active .contact-icon{
  transform:translateY(0) scale(.96);
}
:is(.contact-actions,.form-actions) .contact-choice svg{
  width:1.28rem;
  height:1.28rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
:is(.contact-actions,.form-actions) .contact-label{
  color:var(--earth);
  transition:color .25s ease;
}
:is(.contact-actions,.form-actions) .contact-choice:hover .contact-label{color:var(--green)}
:root[data-theme="dark"] :is(.contact-actions,.form-actions) .contact-choice{--contact-cyan:#5AD7E7}
:root[data-theme="dark"] :is(.contact-actions,.form-actions) .contact-icon{
  background:color-mix(in srgb,var(--solid) 88%,var(--green-tint) 12%);
  border-color:color-mix(in srgb,var(--green) 62%,var(--line));
}
:root[data-theme="dark"] :is(.contact-actions,.form-actions) .contact-choice:hover .contact-icon{
  background:color-mix(in srgb,var(--solid) 74%,var(--green-tint) 26%);
}

/* Contact routes form a narrow middle rail between studio copy and social links. */
.contact-actions .contact-choice{min-width:4.9rem}
.contact-actions .contact-icon{width:3.2rem;height:3.2rem}
.contact-actions .contact-icon::after{transform:scale(.9)}
.contact-actions .contact-choice:hover .contact-icon,
.contact-actions .contact-choice:nth-child(even):hover .contact-icon{
  transform:translateY(-2px);
}
.contact-actions .contact-choice:hover .contact-icon::after,
.contact-actions .contact-choice:focus-visible .contact-icon::after{
  transform:scale(1);
}

.form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:clamp(.9rem,1.8vw,1.25rem);
  margin-top:.65rem;
}
.form-actions .contact-choice{margin-top:0}
.contact-soon{font-size:var(--t-sm);color:var(--earth)}

/* ---------- contact / footer ---------- */
.contact .wrap{
  width:min(1120px,100% - 2*var(--pad));
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(5.5rem,6.5vw,6.75rem) minmax(0,1fr);
  column-gap:clamp(2rem,3.6vw,3.75rem);
  align-items:stretch;
}
.contact-block{display:grid;gap:1.15rem;align-content:start}
.contact-block:first-child{
  width:min(100%,29rem);
  max-width:none;
  justify-self:end;
}
.contact-block:last-child{
  width:min(100%,34rem);
  justify-self:start;
}
.contact-block:first-child .muted{max-width:43ch;line-height:1.7}
.contact-line{
  margin-top:.15rem;
  margin-bottom:.2rem;
  font-size:clamp(1.3rem,2.1vw,1.9rem);
  color:var(--midnight);
  word-break:break-word;
}
.contact-email-link{
  display:inline-flex;
  align-items:baseline;
  gap:.55rem;
  border-bottom:1px solid color-mix(in srgb,#36BFD1 82%,transparent);
  padding-bottom:.08em;
  transition:color .25s ease,border-color .25s ease;
}
.contact-email-link:hover{
  color:var(--green);
  border-bottom-color:var(--green);
}
.contact-arrow{
  display:inline-block;
  font-family:var(--ui);
  font-size:.62em;
  color:var(--green);
  transform:translate(0,0);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.contact-email-link:hover .contact-arrow{transform:translate(3px,-3px)}
:root[data-theme="dark"] .contact-email-link{border-bottom-color:#5AD7E7}

.contact .socials{
  list-style:none;
  display:grid;
  gap:.18rem;
  margin-top:.1rem;
}
.contact .socials li{
  display:grid;
  grid-template-columns:2.15rem minmax(5.5rem,7rem) minmax(0,1fr);
  align-items:center;
  gap:.8rem;
  min-height:2.85rem;
  padding:.28rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 62%,transparent);
  font-size:var(--t-sm);
}
.contact .socials li:last-child{border-bottom:0}
.social-mark{
  display:grid;
  place-items:center;
  width:1.9rem;
  height:1.9rem;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  border-radius:50%;
  color:var(--green);
  font-family:var(--ui);
  font-size:.72rem;
  line-height:1;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .25s ease,background .25s ease;
}
.contact .socials li:has(a:hover) .social-mark{
  transform:rotate(-6deg) translateY(-1px);
  border-color:color-mix(in srgb,var(--green) 72%,var(--line));
  background:color-mix(in srgb,var(--green-tint) 52%,transparent);
}
.contact .socials .k{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.6875rem;
  color:var(--earth);
  font-weight:500;
  align-self:center;
}
.contact .socials a{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  min-width:0;
  color:var(--ink);
  text-decoration:none;
}
.contact .socials a::after{
  content:"↗";
  flex:none;
  font-family:var(--ui);
  font-size:.72em;
  color:var(--earth-soft);
  transform:translate(0,0);
  transition:transform .25s ease,color .25s ease;
}
.contact .socials a:hover{color:var(--green)}
.contact .socials a:hover::after{color:var(--green);transform:translate(2px,-2px)}
.contact .socials .soon{color:var(--earth-soft)}

@media(max-width:900px){
  .contact .wrap{
    width:min(var(--wrap),100% - 2*var(--pad));
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .contact-block:first-child,
  .contact-block:last-child{
    width:100%;
    max-width:none;
    justify-self:stretch;
  }
  .contact-actions{
    grid-template-columns:repeat(2,max-content);
    justify-self:start;
    gap:1.4rem;
  }
}
@media(max-width:600px){
  .contact-actions{gap:1rem}
  .contact-actions .contact-icon{width:3.15rem;height:3.15rem}
  .contact .socials li{grid-template-columns:2rem minmax(5rem,6.5rem) minmax(0,1fr);gap:.65rem}
}

footer{background:var(--ivory-deep);border-top:1px solid var(--line);padding:2.5rem 0}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:var(--t-xs);color:var(--earth);letter-spacing:.04em}
footer .ar{font-size:1.15rem;color:var(--green)}
.footer-socials{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-socials a{letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;color:var(--earth);border-bottom:1px solid transparent}
.footer-socials a:hover{color:var(--green);border-bottom-color:var(--gold)}


/* =====================================================================
   SPECTRAL CONTOURING — both themes (colours per theme, multiplied by --sc-on).
   An element's edge decomposes into a few misregistered wavelengths:
   a cyan trace and a magenta trace, each showing only fragments of the
   perimeter (conic masks), drifting 1–3px on unequal, slow cycles, with a
   faint violet under-bloom. Interior stays dark. Idle ≈ residue; hover
   reveals; focus/active separates further; click sends a pulse outward;
   everything decays back over ~1.8s. Reusable: add .sc (interactive) or
   .sc-card (surfaces) to anything; the selector lists below apply it to
   the site's own controls and cards without markup changes.
   ===================================================================== */
@property --sc-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --sc-b{syntax:'<angle>';inherits:false;initial-value:140deg}
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button){position:relative;isolation:isolate}
:is(.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame){position:relative;isolation:isolate}
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button,.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::before,
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button,.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;z-index:2;
  opacity:calc(var(--sc-on) * var(--sc-i,var(--sc-idle)));
  transition:opacity 1.8s cubic-bezier(.2,.6,.2,1),transform 1.4s cubic-bezier(.2,.6,.2,1),box-shadow 1.4s cubic-bezier(.2,.6,.2,1);
  will-change:opacity;
}
/* cyan wavelength — fragments, slight blur, drifting up-left */
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button,.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::before{
  border:1px solid var(--sc-a-col);
  -webkit-mask:conic-gradient(from var(--sc-a),transparent 0 16%,#000 25% 43%,transparent 51% 67%,#000 75% 86%,transparent 93% 100%);
          mask:conic-gradient(from var(--sc-a),transparent 0 16%,#000 25% 43%,transparent 51% 67%,#000 75% 86%,transparent 93% 100%);
  filter:blur(.45px);
  animation:sc-spin-a 29s linear infinite,sc-drift-a 7.3s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
/* magenta wavelength with a violet under-bloom — different fragments, drifting down-right */
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button,.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::after{
  border:1px solid var(--sc-b-col);
  box-shadow:0 0 7px var(--sc-bloom),inset 0 0 0 1px var(--sc-bloom);
  -webkit-mask:conic-gradient(from var(--sc-b),#000 0 11%,transparent 19% 41%,#000 47% 57%,transparent 63% 81%,#000 88% 100%);
          mask:conic-gradient(from var(--sc-b),#000 0 11%,transparent 19% 41%,#000 47% 57%,transparent 63% 81%,#000 88% 100%);
  filter:blur(.6px);
  animation:sc-spin-b 41s linear infinite reverse,sc-drift-b 11.7s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
/* surfaces: draw on the inner edge (they clip overflow), fainter, favouring corners */
:is(.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame){--sc-i:var(--sc-idle-surf)}
:is(.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::before,
:is(.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::after{inset:0}
:is(.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::before{
  -webkit-mask:conic-gradient(from calc(var(--sc-a) + 25deg),#000 0 9%,transparent 14% 36%,#000 41% 52%,transparent 57% 79%,#000 85% 96%,transparent 100%);
          mask:conic-gradient(from calc(var(--sc-a) + 25deg),#000 0 9%,transparent 14% 36%,#000 41% 52%,transparent 57% 79%,#000 85% 96%,transparent 100%)}
/* attention: reveal (fast in), then decay (slow out via the base transition) */
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button):hover::before,
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button):hover::after,
:is(.sc,.ask):focus-within::before,:is(.sc,.ask):focus-within::after{opacity:calc(var(--sc-on) * var(--sc-hover));transition-duration:.5s}
:is(.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame):hover::before,
:is(.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame):hover::after{opacity:calc(var(--sc-on) * var(--sc-hover-surf));transition-duration:.6s}
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.hero-chips a,.tab,.ask button):is(:focus-visible,:active)::before{opacity:calc(var(--sc-on) * var(--sc-act));transform:translate(-2.2px,-1.2px);transition-duration:.25s}
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.hero-chips a,.tab,.ask button):is(:focus-visible,:active)::after{opacity:calc(var(--sc-on) * var(--sc-act));transform:translate(2.2px,1.6px);box-shadow:0 0 14px var(--sc-bloom-strong),inset 0 0 0 1px var(--sc-bloom);transition-duration:.25s}
/* click: a pulse of spectral energy travels outward, then the residue decays */
.sc-pulse::after{animation:sc-spin-b 41s linear infinite reverse,sc-drift-b 11.7s cubic-bezier(.45,.05,.55,.95) infinite alternate,sc-pulse .95s cubic-bezier(.2,.7,.2,1) 1 !important}
@keyframes sc-pulse{0%{inset:-2px;opacity:calc(var(--sc-on) * .95);filter:blur(.6px)}100%{inset:-16px;opacity:0;filter:blur(2px)}}
.sc-rest.sc-rest::before,.sc-rest.sc-rest::after{animation-play-state:paused}
@keyframes sc-spin-a{to{--sc-a:360deg}}
@keyframes sc-spin-b{to{--sc-b:500deg}}
@keyframes sc-drift-a{0%{transform:translate(-1px,-.5px)}37%{transform:translate(-1.7px,.5px)}63%{transform:translate(-.3px,-1.3px)}100%{transform:translate(-1.2px,.2px)}}
@keyframes sc-drift-b{0%{transform:translate(1px,1px)}29%{transform:translate(1.9px,.1px)}71%{transform:translate(.5px,1.7px)}100%{transform:translate(1.4px,.9px)}}
/* dark-mode focus for text fields: the underline splits into wavelengths */
.field :is(input,select,textarea):focus-visible{outline-color:transparent;border-bottom-color:var(--sc-a-col);box-shadow:0 1px 0 var(--sc-b-col),0 3px 0 var(--sc-bloom)}
/* typography: the most important words carry a hair of RGB separation */
h2{text-shadow:calc(var(--sc-on) * .7px) 0 0 var(--sc-ghost-a),calc(var(--sc-on) * -.7px) 0 0 var(--sc-ghost-b)}
.hero h1{text-shadow:calc(var(--sc-on) * .9px) 0 0 var(--sc-ghost-a),calc(var(--sc-on) * -.9px) 0 0 var(--sc-ghost-b),0 2px 30px rgba(0,0,0,.45)}
/* navigation: the active destination carries a residue instead of an underline */
.nav-links a.is-active{color:var(--green);border-bottom-color:transparent;text-shadow:calc(var(--sc-on) * .4px) 0 0 var(--sc-ghost-a),calc(var(--sc-on) * -.4px) 0 0 var(--sc-ghost-b),0 0 calc(var(--sc-on) * 8px) var(--sc-bloom)}
.nav.over .nav-links a.is-active{color:var(--over-ink)}
/* ḥurūf: the characters separate and re-form as they breathe */
/* the separation breathes as two fixed shadow states cross-faded on opacity: the glyph
   layer is rasterised once and only composited — no per-frame text-shadow repaint */
#huruf span:not(.traced){text-shadow:.8px -.3px 0 rgba(90,225,255,.2),-1px .5px 0 rgba(255,95,215,.18),0 0 18px rgba(120,120,255,.12)}
#huruf span:not(.traced)::before{content:attr(data-t);position:absolute;inset:0;color:transparent;pointer-events:none;
  text-shadow:2.8px .6px 0 rgba(90,225,255,.34),-2.2px -.4px 0 rgba(255,95,215,.28),0 0 34px rgba(120,120,255,.22);
  opacity:.4;animation:sc-huruf 47s cubic-bezier(.45,.05,.55,.95) infinite alternate;will-change:opacity}
@keyframes sc-huruf{0%{opacity:.35}33%{opacity:1}66%{opacity:0}100%{opacity:.8}}
/* the traced letters breathe in the green instead */
:is(#huruf,#huruf-page) span.traced{animation:huruf-breathe var(--dur,60s) ease-in-out infinite alternate;
  text-shadow:1.5px 0 0 rgba(90,225,255,.24),-1.5px 0 0 rgba(255,95,215,.2),0 0 22px rgba(120,120,255,.15),0 0 9px rgba(52,232,196,.2)}
@media (prefers-reduced-motion:reduce){
  :is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button,.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::before,
  :is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button,.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::after,
  #huruf span{animation:none}
}

/* the hero carries the heaviest compositing on the site, so the spectral
   contours stand down inside it — they animate continuously and sit on copy
   that clears during the approach */
.hero :is(.hero-pill,.ask,.hero-chips a)::before,
.hero :is(.hero-pill,.ask,.hero-chips a)::after{content:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product.wide{grid-column:span 2}
  .words{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .nav .wrap{grid-template-columns:auto auto;justify-content:space-between}
  .nav-toggle{display:inline-block}
  .nav-pill{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--solid);border-bottom:1px solid var(--line);padding:.5rem var(--pad) 1rem}
  .nav-pill.open{display:flex}
  .nav.over .nav-pill{justify-self:auto;padding:.5rem var(--pad) 1rem;border-radius:0 0 18px 18px;background:var(--solid);border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.over .nav-pill .nav-links a{color:var(--ink)}
  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-links a{display:block;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:var(--t-md)}
  .nav-pill .nav-enquire{margin-top:.9rem;justify-content:center;background:var(--green);border-color:var(--green);color:var(--marble)}
  .nav.over .nav-pill .nav-enquire{background:var(--green);border-color:var(--green);color:var(--marble)}
}
@media (max-width:820px){
  .hero-sticky{padding:calc(4.25rem + .5rem) .5rem .5rem}
  .hero-window{border-radius:20px}
  .hero-center{padding:2rem 1rem 4rem;gap:1rem}
  .hero h1{font-size:clamp(2.2rem,10vw,3.2rem)}
  .hero-ghost{font-size:60vw;top:5%;right:-8vw}
  .ask{flex-direction:column;align-items:stretch;padding:.5rem}
  .ask input{padding:.7rem .9rem}
  .hero-proof{display:none}
  .studio .wrap,.commissions .wrap,.contact .wrap{grid-template-columns:1fr}
  .shop-head{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px}
  .wall figure:first-child{grid-column:span 2;grid-row:span 2}
}
@media (max-width:600px){
  .hero.is-live{height:180svh}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-grid{grid-template-columns:1fr}
  .product.wide{grid-column:span 1;grid-template-columns:1fr}
  .product.wide .tile{border-right:0;border-bottom:1px solid var(--line)}
  .words{grid-template-columns:1fr}
  .field-row,.terms{grid-template-columns:1fr}
  .socials li{grid-template-columns:1fr}
}


/* =====================================================================
   PASSAGE — pages fade into one another instead of cutting.
   assets/passage.js adds .passage on load, then .passage-in; on an internal
   link it swaps to .passage-out and navigates once the fade has finished.
   ===================================================================== */
html.passage body{opacity:0;transition:opacity .32s cubic-bezier(.2,.6,.2,1)}
html.passage.passage-in body{opacity:1}
html.passage.passage-out body{opacity:0}

/* ---------- footer: legal + members ---------- */
.footer-legal{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-legal a{letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;color:var(--earth);border-bottom:1px solid transparent}
.footer-legal a:hover{color:var(--green);border-bottom-color:var(--gold)}
.icon-btn.is-active{color:var(--green);border-color:var(--gold-soft)}
.icon-btn{position:relative}
.cart-n{position:absolute;top:-.3rem;right:-.3rem;min-width:1.1rem;height:1.1rem;padding:0 .3rem;border-radius:999px;background:var(--green);color:var(--ivory);font-size:.62rem;line-height:1.1rem;text-align:center;letter-spacing:0;font-variant-numeric:tabular-nums}
.cart-n[hidden]{display:none}
.btn.to-basket{background:var(--green);border-color:var(--green);color:var(--ivory)}
.btn.to-basket.added{background:var(--green-deep);border-color:var(--green-deep)}
.price-line{display:flex;align-items:baseline;gap:.75rem;margin:.25rem 0 .5rem}
.price-line b{font-weight:500;font-size:var(--t-xl);color:var(--ink)}
.price-line span{font-size:var(--t-xs);color:var(--earth);letter-spacing:.14em;text-transform:uppercase}

/* ---------- basket page ---------- */
main.basket{padding-block:clamp(3rem,7vw,5rem)}
main.basket .wrap{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:clamp(2rem,5vw,4rem);align-items:start}
main.basket h1{font-size:var(--t-2xl);margin-bottom:1.5rem}
.lines{display:grid}
.line{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:1.25rem;align-items:center;padding:1.25rem 0;border-top:1px solid var(--line)}
.line:last-child{border-bottom:1px solid var(--line)}
.line .art{aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background:var(--ivory-deep)}
.line .art img{width:100%;height:100%;object-fit:cover;display:block}
.line .kraft{display:grid;place-items:center;font-family:var(--arabic);font-size:1.6rem;color:var(--midnight);background:var(--kraft,#CDB893)}
.line b{font-weight:500;color:var(--ink)}
.line .opt{font-size:var(--t-sm);color:var(--earth);margin-top:.15rem}
.line .rm{font:inherit;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;background:none;border:0;color:var(--earth);cursor:pointer;margin-top:.5rem;padding:0;border-bottom:1px solid transparent}
.line .rm:hover{color:var(--green);border-bottom-color:var(--gold)}
.line .right{display:grid;gap:.6rem;justify-items:end}
.line .sum{font-weight:500;font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px}
.qty button{font:inherit;width:2.75rem;height:2.75rem;background:none;border:0;color:var(--ink);cursor:pointer}
.qty span{min-width:1.6rem;text-align:center;font-variant-numeric:tabular-nums;font-size:var(--t-sm)}
.summary{position:sticky;top:5.5rem;background:var(--marble);border:1px solid var(--line);padding:clamp(1.25rem,3vw,1.75rem);display:grid;gap:1rem}
.summary dl{display:grid;gap:.5rem;margin:0}
.summary dl div{display:flex;justify-content:space-between;font-size:var(--t-sm);color:var(--earth)}
.summary dl div.total{border-top:1px solid var(--line);padding-top:.75rem;color:var(--ink);font-size:var(--t-md)}
.summary dl dd{margin:0;font-variant-numeric:tabular-nums}
.summary .fine{font-size:var(--t-xs);color:var(--earth);line-height:1.5}
.basket-empty{border:1px dashed var(--earth-soft);padding:3rem 2rem;text-align:center;color:var(--earth);display:grid;gap:1rem;justify-items:center}
@media (max-width:900px){main.basket .wrap{grid-template-columns:1fr}.summary{position:static}}
@media (max-width:520px){.line{grid-template-columns:4rem minmax(0,1fr)}.line .right{grid-column:1/-1;grid-auto-flow:column;justify-content:space-between;width:100%}}

/* ---------- preview bar (sample data / sample member) ---------- */
.sample-note{background:var(--gold-pale);border-bottom:1px solid var(--gold-soft);font-size:var(--t-sm)}
.sample-note .wrap{display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding-block:.6rem}
.sample-note b{font-weight:500}
.sample-note button{font:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:none;border:1px solid var(--gold-soft);border-radius:999px;padding:.3rem .8rem;cursor:pointer;color:var(--ink)}

/* ---------- members: the garden, once inside ---------- */
.member-hero{padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem)}
.member-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.member-hero h1{font-size:var(--t-2xl)}
.member-hero .ar{font-size:1.4rem;color:var(--gold);margin-bottom:.5rem}
.member-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:var(--t-sm);color:var(--earth)}
.member-meta b{font-weight:500;color:var(--ink)}
.m-section{padding-block:0 clamp(2.5rem,5vw,4rem)}
.m-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem}
.m-card{background:var(--marble);border:1px solid var(--line);padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1.1rem;align-content:start}
.m-card h2{font-size:var(--t-xl)}
.m-card .lead{font-size:var(--t-sm);color:var(--earth)}
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.invite-list{display:grid}
.invite-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem;align-items:center;padding:.85rem 0;border-top:1px solid var(--line)}
.invite-row code{font-family:var(--serif);font-size:var(--t-lg);letter-spacing:.14em;color:var(--midnight);font-variant-numeric:tabular-nums}
.invite-row .st{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--earth);white-space:nowrap}
.invite-row.used code{color:var(--earth-soft);text-decoration:line-through}
.copy{font:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .85rem;border:1px solid var(--gold);border-radius:999px;background:none;color:var(--ink);cursor:pointer;transition:background .2s}
.copy:hover{background:var(--gold-pale)}
.copy[disabled]{opacity:.4;cursor:default}
.dhikr{background:var(--green-tint);border:1px solid var(--line);padding:clamp(1.5rem,4vw,2.5rem);display:grid;gap:1rem;text-align:center;justify-items:center;align-content:center}
.dhikr .ar{font-size:clamp(1.7rem,3.6vw,2.5rem);color:var(--midnight);line-height:1.85}
.dhikr .tr{font-style:normal;font-size:var(--t-md);color:var(--ink);max-width:44ch}
.dhikr cite{font-style:normal;font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--earth)}
.early{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.early a{display:grid;gap:.5rem;align-content:start}
.early .art{aspect-ratio:2/3;overflow:hidden;border:1px solid var(--line);box-shadow:var(--frame-shadow);position:relative;background:var(--ivory-deep)}
.early img{width:100%;height:100%;object-fit:cover}
.early .until{position:absolute;left:.7rem;bottom:.7rem;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;background:var(--solid);color:var(--green);padding:.3rem .6rem}
.early b{font-weight:500;font-size:var(--t-sm);color:var(--ink)}
.early span{font-size:var(--t-xs);color:var(--earth)}
.saved-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.saved-grid a{display:grid;gap:.4rem}
.saved-grid .art{aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background:var(--ivory-deep)}
.saved-grid img{width:100%;height:100%;object-fit:cover}
.saved-grid b{font-weight:500;font-size:var(--t-sm)}
.saved-empty{border:1px dashed var(--earth-soft);padding:2rem;text-align:center;color:var(--earth);font-size:var(--t-sm);display:grid;gap:.75rem;justify-items:center}
.originals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.originals a{display:grid;gap:.5rem}
.originals .art{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);box-shadow:var(--frame-shadow)}
.originals img{width:100%;height:100%;object-fit:cover}
.originals b{font-weight:500;font-size:var(--t-sm)}
.originals span{font-size:var(--t-xs);color:var(--earth)}
.profile{display:grid;gap:.9rem;margin:0}
.profile div{display:grid;gap:.15rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.profile dt{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--earth)}
.profile dd{font-size:var(--t-md);color:var(--ink)}
@media (max-width:1000px){.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12}.saved-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.member-hero .wrap{grid-template-columns:1fr}}
@media (max-width:600px){.early,.originals{grid-template-columns:1fr 1fr}.saved-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.invite-row{grid-template-columns:1fr auto}.invite-row .st{grid-column:1 / -1}}

/* ---------- legal pages: returns · privacy · terms ---------- */
.legal{padding-block:clamp(3rem,7vw,5rem)}
.legal .wrap{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.legal-toc{position:sticky;top:5.5rem;display:grid;gap:.15rem;font-size:var(--t-sm)}
.legal-toc .eyebrow{margin-bottom:.75rem}
.legal-toc a{color:var(--earth);padding:.3rem 0 .3rem 1rem;border-left:1px solid var(--line);transition:color .2s,border-color .2s}
.legal-toc a:hover,.legal-toc a.is-active{color:var(--green);border-left-color:var(--gold)}
.legal-body{display:grid;gap:2.75rem;max-width:var(--measure)}
.legal-body header{display:grid;gap:1rem}
.legal-body h1{font-size:var(--t-2xl)}
.legal-body h2{font-size:var(--t-xl);margin-bottom:.8rem}
.legal-body p+p,.legal-body ul+p,.legal-body p+ul{margin-top:.8rem}
.legal-body ul{padding-left:1.15rem;display:grid;gap:.45rem;max-width:var(--measure)}
.legal-body li::marker{color:var(--gold)}
.legal-body a{border-bottom:1px solid var(--gold-soft)}
.legal-updated{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--earth)}
.legal-draft{border:1px solid var(--gold-soft);background:var(--gold-pale);padding:.85rem 1.1rem;font-size:var(--t-sm);color:var(--ink);max-width:var(--measure)}
.legal-next{display:flex;flex-wrap:wrap;gap:1.25rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:var(--t-sm)}
.legal-next a{color:var(--earth)}
.legal-next a:hover{color:var(--green)}
@media (max-width:820px){.legal .wrap{grid-template-columns:1fr}.legal-toc{position:static;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}.legal-toc .eyebrow{width:100%}.legal-toc a{border:0;padding:0}}

/* Checkout keeps its layout; all panel material comes from the shared tokens below. */
.checkout .wrap>section,.basket .wrap>section{padding:clamp(2rem,4vw,3rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}

/* =====================================================================
   SHARED FROST-GLASS PANELS — section surfaces across the whole studio
   The same quiet frame used by checkout now carries the major content groups
   on every page. Kraft keeps its warm tint while letting the same background breathe through.
   ===================================================================== */
:root{
  --panel-bg:rgba(255,255,255,.20);
  --panel-inner-bg:rgba(255,255,255,.10);
  --panel-kraft-bg:rgba(205,184,147,.48);
  --panel-border:rgba(255,255,255,.78);
  --panel-highlight:rgba(255,255,255,.6);
  --panel-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 50px -30px rgba(23,21,18,.25);
  --panel-radius:18px;
  --panel-blur:8px;
}
:root[data-theme="dark"]{
  --panel-bg:rgba(22,24,40,.56);
  --panel-inner-bg:rgba(22,24,40,.20);
  --panel-kraft-bg:rgba(43,36,25,.48);
  --panel-border:rgba(159,166,255,.18);
  --panel-highlight:rgba(255,255,255,.06);
  --panel-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px -30px rgba(0,0,0,.7);
}

:is(
  .rawda > .wrap,
  .haramayn > .wrap,
  .shop > .wrap,
  .homes > .wrap,
  .studio > .wrap,
  .commissions > .wrap,
  .contact > .wrap,
  .legal > .wrap,
  .member-hero > .wrap,
  .shop-head,
  .pdp,
  .notes,
  .reviews > .wrap,
  #homes-section > .wrap,
  #related-section > .wrap,
  .frost-panel,
  .checkout .wrap > section,
  .basket .wrap > section,
  .basket .wrap > aside,
  .m-card,
  .dhikr
){
  position:relative;
  isolation:isolate;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:var(--panel-radius);
  box-shadow:var(--panel-shadow);
  -webkit-backdrop-filter:blur(var(--panel-blur)) saturate(1.12);
  backdrop-filter:blur(var(--panel-blur)) saturate(1.12);
}

:is(
  .rawda > .wrap,
  .haramayn > .wrap,
  .shop > .wrap,
  .homes > .wrap,
  .studio > .wrap,
  .commissions > .wrap,
  .contact > .wrap,
  .legal > .wrap,
  .member-hero > .wrap,
  .shop-head,
  .pdp,
  .notes,
  .reviews > .wrap,
  #homes-section > .wrap,
  #related-section > .wrap,
  .frost-panel
){
  padding:clamp(1.5rem,3vw,3rem);
}

:root:not([data-theme="dark"]) :is(
  .rawda > .wrap,
  .haramayn > .wrap,
  .shop > .wrap,
  .homes > .wrap,
  .studio > .wrap,
  .commissions > .wrap,
  .contact > .wrap,
  .legal > .wrap,
  .member-hero > .wrap,
  .shop-head,
  .pdp,
  .notes,
  .reviews > .wrap,
  #homes-section > .wrap,
  #related-section > .wrap,
  .frost-panel,
  .checkout .wrap > section,
  .basket .wrap > section,
  .basket .wrap > aside,
  .m-card,
  .dhikr
)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 42%,rgba(180,147,74,.04));
  opacity:.8;
}

/* Shelves are the shop's repeated section units. Keep the bookish kraft shelf warm,
   but give it the same frame, radius and depth so the page still reads as one system. */
.shelf:not(.kraft){
  background:var(--panel-bg)!important;
  border-color:var(--panel-border)!important;
  border-radius:var(--panel-radius);
  box-shadow:var(--panel-shadow);
  -webkit-backdrop-filter:blur(var(--panel-blur)) saturate(1.12);
  backdrop-filter:blur(var(--panel-blur)) saturate(1.12);
}
.shelf.kraft{
  background:var(--panel-kraft-bg)!important;
  border-radius:var(--panel-radius);
  box-shadow:var(--panel-shadow);
  -webkit-backdrop-filter:blur(var(--panel-blur)) saturate(1.08);
  backdrop-filter:blur(var(--panel-blur)) saturate(1.08);
}

/* Nested pieces keep the same material, with a lighter internal edge instead of a
   second heavy shadow. */
:is(.product,.card .art,.panel.lead,.review,.term-box,.form,.ship,.assure div){
  border-radius:12px;
}
:root :is(.product,.panel.lead,.review,.term-box,.form,.ship,.assure div,.fold details){
  background:var(--panel-inner-bg);
  border-color:var(--panel-border);
}

@media (max-width:820px){
  :is(.rawda > .wrap,.haramayn > .wrap,.shop > .wrap,.homes > .wrap,.studio > .wrap,.commissions > .wrap,.contact > .wrap,.legal > .wrap,.member-hero > .wrap,.shop-head,.pdp,.notes,.reviews > .wrap,#homes-section > .wrap,#related-section > .wrap,.frost-panel){
    padding:clamp(1.15rem,5vw,1.75rem);
    border-radius:14px;
  }
}


/* Keep the order summary's existing sticky behavior while it uses the shared panel skin. */
.basket .wrap > aside.summary{position:sticky;top:5.5rem}
@media (max-width:900px){.basket .wrap > aside.summary{position:static}}


/* The same translucent blue huruf and rose/cyan refraction in both themes.
   A slightly deeper blue keeps the glass-like fill visible on ivory. */
:root:not([data-theme="dark"]) :is(#huruf,#huruf-page) span{
  color:rgba(112,137,202,calc(var(--o,.05) * 5));
  text-shadow:1.5px 0 0 rgba(90,225,255,.26),-1.5px 0 0 rgba(235,105,180,.24),0 0 22px rgba(120,120,255,.12);
}
:root:not([data-theme="dark"]) :is(#huruf,#huruf-page) span.traced{
  -webkit-text-stroke:.6px rgba(90,200,225,calc(var(--o,.05) * 3.2));
}
:root:not([data-theme="dark"]) #huruf span:not(.traced)::before{
  text-shadow:2.8px .6px 0 rgba(90,205,235,.28),-2.2px -.4px 0 rgba(235,105,180,.28),0 0 34px rgba(120,120,255,.16);
}
/* Keep fixed letters in view even at the foot of a long catalogue page. */
#huruf span{transform:translate3d(0,clamp(-12vh,calc(var(--sy,0px) * -1 * var(--depth,0)),0px),0)}
/* A solid section behind a glass card would conceal the huruf. Tint the cards,
   leaving the surrounding page open to the shared background. */
:root :is(.rawda,.haramayn,.shop,.homes,.studio,.commissions,.contact,.reviews){
  background:transparent;
}
:root .kraft-section{background:var(--panel-kraft-bg)}
body > footer{background:color-mix(in srgb,var(--ivory-deep) 36%,transparent)}
@media (prefers-reduced-motion:reduce){
  :is(#huruf,#huruf-page) span{animation:none;transform:none}
  #huruf span::before{animation:none}
}


/* Quiet routes through the existing exhibition and studio.
   Two small static glass panels: depth without a continuous animation cost. */
.hero-routes{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:.85rem}
.hero-routes .btn{
  padding:1rem 1.6rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.46);
  color:#F7F5F2;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.035)),
    rgba(20,67,52,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 12px 30px rgba(7,15,13,.20);
  /* Glass appearance without live backdrop blur: cheaper while the hero scrolls. */
  text-shadow:0 1px 10px rgba(0,0,0,.24);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.hero-routes .btn:hover{
  color:#fff;
  border-color:rgba(255,255,255,.72);
  background:
    linear-gradient(180deg,rgba(255,255,255,.21),rgba(255,255,255,.06)),
    rgba(20,67,52,.44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 14px 34px rgba(7,15,13,.26);
  transform:translateY(-1px);
}
.hero-routes .ghost{
  color:#F7F5F2;
  border-color:rgba(255,255,255,.40);
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.025)),
    rgba(11,15,18,.22);
}
.hero-routes .ghost:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.045)),
    rgba(11,15,18,.32);
}
.hero-routes .btn:focus-visible{
  outline:2px solid rgba(255,255,255,.92);
  outline-offset:3px;
}
.room-position{position:sticky;top:5rem;justify-self:end;z-index:6;display:flex;gap:.15rem;width:max-content;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--ivory) 80%,transparent);backdrop-filter:blur(8px)}
.room-position a{display:grid;place-items:center;min-width:2.5rem;min-height:2.5rem;padding:.35rem;color:var(--earth);font-size:.8rem}
.room-position a[aria-current]{color:var(--green);text-decoration:underline;text-underline-offset:.35em}
.room-position a:focus-visible{outline:1px solid var(--gold);outline-offset:2px;border-radius:999px}
:is(#haramayn,#studio,#commissions,#commission-form,#contact,.room){scroll-margin-top:8rem}
.gallery-routes{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;font-size:var(--t-sm)}
.gallery-routes a,.craft-route a{border-bottom:1px solid var(--line);padding-block:.5rem}
.concierge{padding-block:clamp(2rem,5vw,4rem);text-align:center}
.concierge .wrap{display:grid;justify-items:center;gap:.6rem}
.concierge h2{font-size:var(--t-xl)}
.concierge .ask{background:var(--panel-bg);border-color:var(--line);box-shadow:none}
.concierge .ask input{color:var(--ink)}
.concierge .ask input::placeholder{color:var(--earth)}
.concierge .ask button{background:var(--green);color:var(--ivory);border-color:var(--green)}
.concierge .note{font-size:var(--t-sm);color:var(--earth)}
.piece-facts{font-size:var(--t-sm);color:var(--earth);max-width:26rem}
.shop-entry{margin-top:clamp(2.4rem,5vw,3.8rem);max-width:none;text-align:center}
.shop-entry-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3.5rem;
  padding:.8rem 1.1rem .95rem;
  position:relative;
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.55vw,1.28rem);
  font-weight:400;
  line-height:1;
  letter-spacing:.035em;
  color:var(--ink);
  transition:color .28s ease;
}
.shop-entry-link::after{
  content:"";
  position:absolute;
  left:1.1rem;
  right:1.1rem;
  bottom:.58rem;
  height:1px;
  background:var(--gold-soft);
  opacity:.58;
  transform:scaleX(.82);
  transform-origin:center;
  transition:background .28s ease,opacity .28s ease,transform .35s cubic-bezier(.2,.6,.2,1);
}
.shop-entry-link:hover{color:var(--green-deep)}
.shop-entry-link:hover::after{background:var(--gold);opacity:.95;transform:scaleX(1)}
.shop-entry-link:focus-visible{outline:2px solid var(--gold);outline-offset:.35rem;border-radius:2px}
.craft-route{margin-top:1.5rem}
body > footer > .wrap > .ar{flex-basis:100%;display:block;text-align:center;margin-top:2rem;padding-block:2rem 1rem;line-height:2.4}
@media(max-width:600px){.hero-routes{gap:.6rem}.hero-routes .btn{font-size:.72rem}.room-position{top:4.75rem}.gallery-routes{flex-direction:column;align-items:flex-start}}


/* =====================================================================
   PERFORMANCE QUIET MODE
   Preserve the astral/spectral visual language without keeping decorative
   layers in continuous animation. Interaction and hero scroll motion remain.
   ===================================================================== */
:is(#huruf,#huruf-page) span{
  animation:none !important;
  will-change:auto;
}
#huruf span:not(.traced)::before{
  animation:none !important;
  will-change:auto;
}
.rawda::before{
  animation:none !important;
  will-change:auto;
}
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button,.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::before,
:is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button,.sc-card,.product,.gallery .art,.word .art,.wall figure,.frame)::after{
  animation:none;
}
/* Keep the click pulse as a short, finite response instead of a background loop. */
.sc-pulse::after{
  animation:sc-pulse .72s cubic-bezier(.2,.7,.2,1) 1 !important;
}


/* =====================================================================
   HIMMA VISUAL HIERARCHY — SALIENCE BUDGET
   Level 1: quiet architecture. Level 2: meaningful containment.
   Level 3: salient action. Art should remain the loudest visual object.
   ===================================================================== */
:root{
  --act-understand:var(--ivory);
  --act-enter:color-mix(in srgb,var(--ivory) 90%,var(--green-tint));
  --contained-bg:color-mix(in srgb,var(--solid) 94%,transparent);
}
:root[data-theme="dark"]{
  --act-understand:color-mix(in srgb,var(--ground) 90%,var(--solid));
  --act-enter:color-mix(in srgb,var(--ground) 86%,var(--green-tint));
  --contained-bg:color-mix(in srgb,var(--solid) 96%,transparent);
}

/* Level 1 — most sections are architectural, not cards. */
:is(
  .rawda > .wrap,
  .haramayn > .wrap,
  .shop > .wrap,
  .homes > .wrap,
  .studio > .wrap,
  .commissions > .wrap,
  .contact > .wrap,
  .shop-head
){
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
:is(
  .rawda > .wrap,
  .haramayn > .wrap,
  .shop > .wrap,
  .homes > .wrap,
  .studio > .wrap,
  .commissions > .wrap,
  .contact > .wrap
){padding:0!important}
.shop-head{padding:0!important}

/* Three quiet visual acts, without exposing labels to the visitor. */
.haramayn{background:var(--marble)!important}
.concierge,.studio{background:var(--act-understand)!important}
.kraft-section{background:var(--kraft)!important}
.shop,.commissions,.homes,.contact{background:var(--act-enter)!important}

/* Level 2 — containment only where the unit needs to be perceived as one thing. */
:is(
  .form,
  .term-box,
  .pdp,
  .notes,
  .review,
  .frost-panel,
  .checkout .wrap > section,
  .basket .wrap > section,
  .basket .wrap > aside,
  .m-card,
  .dhikr,
  .ship,
  .assure div
){
  background:var(--contained-bg)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.form{background:var(--green-tint)!important}
.term-box{background:transparent!important}

/* Shop shelves are grouped by proximity, heading rhythm and rules — not glass. */
.shelf:not(.kraft){
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.shelf.kraft{
  background:var(--kraft)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.shelf-head{border-bottom:1px solid var(--line)}
.shelf + .shelf{border-top:1px solid var(--line)!important}

/* Product information is editorial. The image is the contained object. */
.product{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.product .tile{border:1px solid var(--line)!important}
.product-body{padding:1rem 0 0!important}
.product.wide{gap:clamp(1.25rem,3vw,2rem)}
.product.wide .tile{border-right:1px solid var(--line)!important}
.product.wide .product-body{padding:clamp(.25rem,1.5vw,1rem) 0!important}

/* Passive surfaces no longer receive the spectral edge. Save it for action. */
:is(.product,.gallery .art,.word .art,.wall figure,.frame)::before,
:is(.product,.gallery .art,.word .art,.wall figure,.frame)::after{
  display:none!important;
}

/* The repeatable HIMMA drawing grammar: one green line + one restrained gold point.
   These support orientation and brand memory; they never sit over an artwork. */
.brand-drawing{
  display:block;
  width:clamp(4.25rem,7vw,6rem);
  height:clamp(4.25rem,7vw,6rem);
  color:var(--green);
  opacity:.86;
  flex:none;
}
.concierge .brand-drawing{margin:0 auto .4rem}
.studio-copy > .brand-drawing,
.comm-copy > .brand-drawing{margin-bottom:-.15rem}
.shop-head > .brand-drawing{
  align-self:start;
  justify-self:end;
  width:clamp(4.75rem,8vw,7rem);
  height:clamp(4.75rem,8vw,7rem);
}
@media (max-width:760px){
  .shop-head > .brand-drawing{justify-self:start}
}

/* Let space do the grouping. */
.section-head{margin-bottom:clamp(2.4rem,5.5vw,4rem)}
.gallery-foot{margin-top:clamp(2.25rem,5vw,3.5rem)}
.offer-list{margin-top:.25rem}
.contact-block{align-content:start}

/* Level 3 — reserve the strongest contrast for primary actions and active states. */
.btn:not(.ghost),.nav-enquire{font-weight:600}
.room-position a[aria-current]{
  background:var(--green);
  color:var(--marble);
  border-radius:999px;
  text-decoration:none;
}
.room-position{padding:.16rem}
.room-position a:not([aria-current]){opacity:.72}

/* Avoid a boxed-panel feel on mobile, too. */
@media (max-width:820px){
  :is(
    .rawda > .wrap,
    .haramayn > .wrap,
    .shop > .wrap,
    .homes > .wrap,
    .studio > .wrap,
    .commissions > .wrap,
    .contact > .wrap,
    .shop-head
  ){
    padding:0!important;
    border-radius:0!important;
  }
}
@media (max-width:760px){
  .product.wide{grid-template-columns:1fr}
  .product.wide .tile{min-height:220px}
  .product.wide .product-body{padding-top:.35rem!important}
}

/* =====================================================================
   HIMMA SPATIAL DESIGN SYSTEM · DEEP PASS 01
   A gallery journey with industrial-design discipline:
   one grid, controlled geometry, material depth, quiet motion.
   ===================================================================== */
:root{
  /* Quiet Garamond (2026-10-15): labels, nav and buttons share the house serif, never the device sans */
  --ui:"EB Garamond", Garamond, Georgia, "Times New Roman", serif;

  /* Master grid */
  --grid-max:1280px;
  --grid-pad:clamp(1.5rem,4.4vw,4.75rem);
  --grid-gap:clamp(1rem,2.4vw,2rem);
  --grid-reading:68ch;
  --wrap:var(--grid-max);
  --pad:var(--grid-pad);

  /* Geometry */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:38px;
  --r-round:999px;

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-smooth:cubic-bezier(.22,.61,.36,1);
  --t-fast:180ms;
  --t-med:360ms;
  --t-slow:760ms;

  /* Light material palette — mapped from the supplied warm mineral swatches. */
  --mat-page:#F3F0EA;
  --mat-page-alt:#EAE6DE;
  --mat-raised:#FBFAF6;
  --mat-soft:#E2E7E5;
  --mat-mist:#C9D4D5;
  --mat-sage:#879A96;
  --mat-ink:#1D2B34;
  --mat-muted:#736B60;
  --mat-line:#D1D5D3;
  --mat-line-soft:#E3E5E2;
  --mat-edge:#879BA2;
  --mat-gold:#B39359;

  /* Elevation: broad, soft, never cartoonish. */
  --e0:none;
  --e1:0 1px 1px rgba(22,34,41,.035),0 12px 32px -26px rgba(22,34,41,.22);
  --e2:0 2px 5px rgba(22,34,41,.045),0 24px 58px -36px rgba(22,34,41,.30);
  --e3:0 5px 14px rgba(22,34,41,.06),0 38px 86px -48px rgba(22,34,41,.39);
  --e-float:0 10px 34px -25px rgba(13,25,34,.36);
}

/* Light mode follows the supplied palette. */
:root:not([data-theme="dark"]){
  --ground:#F3F0EA;
  --solid:#FBFAF6;
  --ivory:#F3F0EA;
  --ivory-deep:#E7E2D9;
  --marble:#FBFAF6;
  --ink:#1D2B34;
  --earth:#736B60;
  --earth-soft:#A49B90;
  --line:#D1D5D3;
  --green:#687D78;
  --green-deep:#506862;
  --green-tint:#E2E8E5;
  --midnight:#1D2F3A;
  --gold:#B39359;
  --gold-soft:#CDB88B;
  --gold-pale:#EEE5D6;
  --kraft:#C9BBA6;
  --kraft-deep:#AD9B82;
  --kraft-ink:#2B2822;
  --section-ground:var(--ground);
  --hero-ground:var(--ground);
  --over-ink:var(--midnight);
  --over-ink-soft:var(--earth);
  --over-glass:rgba(251,250,246,.78);
  --over-border:rgba(29,43,52,.12);
  --frame-shadow:var(--e2);
}

/* Dark mode colour values remain the existing dark scheme; only aliases are added. */
:root[data-theme="dark"]{
  --mat-page:var(--ground);
  --mat-page-alt:#0A0C13;
  --mat-raised:#0F1017;
  --mat-soft:#121821;
  --mat-mist:#24303A;
  --mat-sage:#718D84;
  --mat-ink:var(--ink);
  --mat-muted:var(--earth);
  --mat-line:rgba(150,160,215,.13);
  --mat-line-soft:rgba(150,160,215,.075);
  --mat-edge:#8295A6;
  --mat-gold:var(--gold);
  --e1:0 1px 1px rgba(0,0,0,.25),0 12px 34px -24px rgba(0,0,0,.60);
  --e2:0 3px 8px rgba(0,0,0,.28),0 28px 66px -38px rgba(0,0,0,.74);
  --e3:0 7px 18px rgba(0,0,0,.32),0 44px 96px -48px rgba(0,0,0,.86);
  --e-float:0 12px 40px -24px rgba(0,0,0,.78);
}

/* ---------- master alignment ---------- */
body{background:var(--mat-page)}
.wrap{
  width:min(var(--grid-max),calc(100% - 2*var(--grid-pad)));
  margin-inline:auto;
}
.nav .wrap,footer .wrap,main>.wrap,main>section>.wrap{
  width:min(var(--grid-max),calc(100% - 2*var(--grid-pad)));
}
section{padding-block:clamp(5rem,9vw,8.5rem)}
.section-head{
  max-width:min(var(--grid-reading),100%);
  gap:.72rem;
  margin-bottom:clamp(2.25rem,5vw,4.5rem);
}
.section-head h2{letter-spacing:-.024em;text-wrap:balance}
.section-head .muted{max-width:58ch}
.eyebrow{
  font-family:var(--ui);
  font-size:.68rem;
  font-weight:650;
  letter-spacing:.20em;
  color:var(--mat-edge);
}
.muted{color:var(--mat-muted)}
main>section:not(.hero){background:transparent}
body>footer{background:var(--mat-page-alt);border-top:1px solid var(--mat-line-soft)}
main>section::before{display:none!important}

/* ---------- navigation ---------- */
.nav{
  background:color-mix(in srgb,var(--mat-page) 88%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--mat-line) 72%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08);
  box-shadow:none;
}
.nav .wrap{min-height:4.5rem}
.nav-pill{background:transparent;border:0;box-shadow:none}
.nav-links a{
  font-family:var(--ui);
  font-size:.92rem;
  letter-spacing:.018em;
  border-bottom:0;
  position:relative;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.42rem;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  opacity:.52;
  transition:transform var(--t-med) var(--ease-out);
}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-enquire{
  min-height:2.85rem;
  padding:.55rem 1.15rem;
  border-radius:var(--r-round);
  border-color:var(--mat-gold);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-med),box-shadow var(--t-med);
}
.nav-enquire:hover{transform:translateY(-1px);box-shadow:var(--e1)}
.icon-btn,.theme-toggle,.nav-toggle{
  border-color:var(--mat-line);
  transition:transform var(--t-fast) var(--ease-out),border-color var(--t-med),background var(--t-med),box-shadow var(--t-med);
}
.icon-btn:hover,.theme-toggle:hover,.nav-toggle:hover{
  transform:translateY(-1px);
  border-color:var(--mat-edge);
  background:color-mix(in srgb,var(--mat-raised) 82%,transparent);
  box-shadow:var(--e1);
}

/* Transparent hero nav stays elegant rather than turning into separate white capsules. */
.nav.over{background:transparent;border-color:transparent}
.nav.over .nav-pill{background:rgba(5,10,15,.26);border:1px solid rgba(237,244,247,.14);border-radius:var(--r-round);padding-inline:.65rem;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav.over .nav-links a,.nav.over .brand-name,.nav.over .brand-name small,.nav.over .icon-btn,.nav.over .theme-toggle{color:#F4F6F7}
.nav.over .brand svg{fill:#F4F6F7}
.nav.over .icon-btn,.nav.over .theme-toggle{background:rgba(5,10,15,.24);border-color:rgba(237,244,247,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ---------- controls + micro-interactions ---------- */
.btn{
  font-family:var(--ui);
  border-radius:var(--r-sm);
  min-height:46px;
  padding:.78rem 1.25rem;
  letter-spacing:.055em;
  font-weight:650;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    border-color var(--t-med),
    background-position var(--t-slow) var(--ease-smooth),
    background var(--t-med),
    color var(--t-med);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.ghost{
  border-color:var(--mat-line);
  background:color-mix(in srgb,var(--mat-raised) 48%,transparent);
  color:var(--ink);
}
.btn.ghost:hover{
  border-color:var(--mat-edge);
  background:color-mix(in srgb,var(--mat-raised) 82%,transparent);
  box-shadow:var(--e1);
}
:is(#basket-btn,.qa-add,.to-basket){
  border-radius:var(--r-sm);
  box-shadow:var(--e1);
}
:is(#basket-btn,.qa-add,.to-basket):hover{box-shadow:var(--e2)}
.choice,.qty,.save-star,.cat{
  font-family:var(--ui);
  transition:transform var(--t-fast) var(--ease-out),border-color var(--t-med),background var(--t-med),box-shadow var(--t-med),color var(--t-med);
}
.choice:active,.qty button:active,.save-star:active{transform:scale(.97)}

/* ---------- material hierarchy ---------- */
/* Text/content is not boxed. Art and true floating controls may have depth. */
.product,.review,.panel.lead,.fold details,.ship,.assure div,.way-card{
  border-radius:0!important;
  box-shadow:none!important;
}
.product,.review,.panel.lead,.fold details,.ship,.assure div{background:transparent!important}
.product{border:0!important;overflow:visible!important}
.product-body{padding:1rem 0 0!important}

.frame,.product .tile,.card .art,.rel .art,.room-wall .art,.wall figure,.gallery-main{
  border:1px solid var(--mat-line)!important;
  border-radius:var(--r-md)!important;
  overflow:hidden;
  box-shadow:var(--e2)!important;
  background:var(--mat-raised);
}
.frame,.product .tile,.card .art,.rel .art,.room-wall .art,.gallery-main{
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-med);
}
:is(.product,.card,.rel,.room-wall figure):hover :is(.tile,.art){
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--mat-edge) 65%,var(--mat-line))!important;
  box-shadow:var(--e3)!important;
}

/* Editorial accordions: seams only. */
.fold{gap:0!important;background:transparent!important;border:0!important}
.fold details{border:0!important;border-top:1px solid var(--mat-line-soft)!important}
.fold details:last-child{border-bottom:1px solid var(--mat-line-soft)!important}
.fold summary{
  min-height:62px;
  padding:1.05rem .1rem!important;
  font-size:clamp(1.08rem,1.7vw,1.28rem);
  transition:color var(--t-med),padding-left var(--t-med) var(--ease-out);
}
.fold summary:hover{color:var(--green);padding-left:.25rem!important}
.fold-body{margin:0!important;padding:.2rem 0 1.55rem!important;border:0!important}

/* Repeated wrappers never masquerade as cards. */
:is(
 .rawda>.wrap,.haramayn>.wrap,.shop>.wrap,.homes>.wrap,.studio>.wrap,
 .commissions>.wrap,.contact>.wrap,.legal>.wrap,.member-hero>.wrap,
 .notes,.reviews>.wrap,#homes-section>.wrap,#related-section>.wrap
){
  box-shadow:none!important;
  border-color:transparent!important;
}
:is(
 .rawda>.wrap,.haramayn>.wrap,.shop>.wrap,.homes>.wrap,.studio>.wrap,
 .commissions>.wrap,.contact>.wrap,.reviews>.wrap,#homes-section>.wrap,#related-section>.wrap
)::after{display:none!important}

/* Checkout + basket: one aligned instrument, not two floating cards. */
main.basket .wrap,main.checkout .wrap{
  width:min(1160px,calc(100% - 2*var(--grid-pad)));
  gap:clamp(2rem,5vw,5rem);
}
main.basket .wrap>section,main.basket .wrap>aside,main.checkout .wrap>section{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
}
main.basket .summary,main.checkout .co-pay{position:relative}
main.basket .summary::before,main.checkout .co-pay::before{
  content:"";position:absolute;left:calc(clamp(1rem,3vw,2.25rem) * -1);top:0;bottom:0;width:1px;background:var(--mat-line-soft)
}
.co-fields input{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--mat-line)!important;border-radius:0!important;padding:.7rem 0!important
}
.digital-delivery-note,.digital-consent{
  border-radius:var(--r-sm)!important;border-color:var(--mat-line)!important;background:var(--mat-page-alt)!important;box-shadow:none!important
}

/* ---------- scroll choreography ---------- */
.himma-reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.himma-reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
.himma-depth{
  --depth-y:0px;
  transform:translate3d(0,var(--depth-y),0);
  will-change:transform;
}
.himma-depth img{transform:translateZ(0)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .himma-reveal{opacity:1;transform:none;transition:none}
  .himma-depth{transform:none!important}
}

/* ---------- responsive ---------- */
@media(max-width:820px){
  section{padding-block:clamp(4rem,11vw,6rem)}
  main.basket .summary::before,main.checkout .co-pay::before{display:none}
}
@media(max-width:600px){
  :root{--grid-pad:1.25rem}
  .nav .wrap{min-height:4rem}
  .frame,.product .tile,.card .art,.rel .art,.room-wall .art,.gallery-main{border-radius:var(--r-sm)!important}
}


/* =====================================================================
   PIP-DECKS-INFORMED POLISH · 2026-09
   Borrow the discipline, not the look:
   clearer hierarchy, quieter product density, direct actions, no faux panels.
   ===================================================================== */

/* Major content should sit on the page plane. Old frost selectors remain in
   the history above, but these surfaces are now explicitly neutralised. */
:is(
  .rawda > .wrap,
  .haramayn > .wrap,
  .shop > .wrap,
  .homes > .wrap,
  .studio > .wrap,
  .commissions > .wrap,
  .contact > .wrap,
  .legal > .wrap,
  .member-hero > .wrap,
  .shop-head,
  .pdp,
  .notes,
  .reviews > .wrap,
  #homes-section > .wrap,
  #related-section > .wrap
){
  background:transparent!important;
  border-color:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Product-art mats should frame the work, not become the work. */
.room-wall .art{
  padding:clamp(.3rem,.65vw,.55rem)!important;
}
.room-wall .art img{
  border:0!important;
}
.product .tile.contain{
  padding:.38rem!important;
}
.product .tile.contain img{
  inset:.38rem!important;
  width:calc(100% - .76rem)!important;
  height:calc(100% - .76rem)!important;
}
.card .art.contain{
  padding:.4rem!important;
}

/* Product cards are objects in an edit, not billboards. */
.product-grid{
  gap:clamp(1rem,2vw,1.45rem);
}
.product h3{line-height:1.18}
.product-body{gap:.6rem}
.product .price-row{margin-top:.3rem}

/* Softer, quieter image elevation. */
:is(.product .tile,.card .art,.rel .art,.room-wall .art,.gallery-main){
  box-shadow:0 2px 5px rgba(22,34,41,.035),0 18px 44px -34px rgba(22,34,41,.24)!important;
}
:is(.product,.card,.rel,.room-wall figure):hover :is(.tile,.art){
  box-shadow:0 4px 10px rgba(22,34,41,.045),0 25px 56px -36px rgba(22,34,41,.30)!important;
}

/* Keep direct actions legible and tactile without turning them into oversized
   pills. Pip Decks' strength is a clear next action after each choice. */
.btn{
  border-radius:12px;
}
.btn.ghost{
  background:color-mix(in srgb,var(--mat-raised) 34%,transparent);
}
.btn.ghost:hover{
  background:color-mix(in srgb,var(--mat-raised) 78%,transparent);
}

/* Reduce the vertical tax between merchandising sections. */
.shop,.homes,.commissions,.contact{
  padding-block:clamp(4.25rem,7vw,6.75rem);
}

@media(max-width:700px){
  .room-wall .art{padding:.28rem!important}
  .product .tile.contain{padding:.3rem!important}
  .product .tile.contain img{
    inset:.3rem!important;
    width:calc(100% - .6rem)!important;
    height:calc(100% - .6rem)!important;
  }
}


/* FLUIDITY CORRECTION · REMOVE LEGACY WRAPPER FILMS */
/* The old frost system left pseudo-element films on wrappers even after the
   wrapper itself had been made transparent. Those films read as arbitrary
   gradient rectangles on otherwise continuous sections. */
:is(
  .rawda > .wrap,
  .haramayn > .wrap,
  .shop > .wrap,
  .homes > .wrap,
  .studio > .wrap,
  .commissions > .wrap,
  .contact > .wrap,
  .legal > .wrap,
  .member-hero > .wrap,
  .shop-head,
  .pdp,
  .notes,
  .reviews > .wrap,
  #homes-section > .wrap,
  #related-section > .wrap
)::before{
  display:none!important;
}

/* Rawda is one continuous material plane. The Arabic, quotation and faint
   background huruf provide the depth; it does not need a second overlay film. */
.home-page .rawda{
  background:linear-gradient(180deg,#09131B 0%,#0B151D 52%,#0A141B 100%)!important;
}
.home-page .rawda::after{
  display:none!important;
}


/* =====================================================================
   HIMMA INTERACTION MATERIAL · APPLE-INFORMED MICRO-MOTION
   The interface should feel alive only when the visitor touches it:
   quick lift on approach, soft light/shadow, slower settled return.
   Large reading surfaces remain still.
   ===================================================================== */
:root{
  --ui-lift-ease:cubic-bezier(.2,.8,.2,1);
  --ui-settle-ease:cubic-bezier(.16,1,.3,1);
  --ui-enter:240ms;
  --ui-settle:460ms;
  --ui-press:110ms;

  --ui-lift-sm:-1px;
  --ui-lift-md:-2px;
  --ui-lift-lg:-3px;

  --ui-scale-control:1;
  --ui-scale-icon:1;
  --ui-scale-card:1.004;

  --ui-shadow-control:
    0 1px 2px rgba(20,30,38,.035),
    0 10px 24px -18px rgba(20,30,38,.24);
  --ui-shadow-control-hover:
    0 2px 5px rgba(20,30,38,.055),
    0 16px 34px -20px rgba(20,30,38,.30);
  --ui-shadow-card:
    0 2px 5px rgba(20,30,38,.035),
    0 18px 44px -34px rgba(20,30,38,.24);
  --ui-shadow-card-hover:
    0 5px 12px rgba(20,30,38,.055),
    0 28px 58px -34px rgba(20,30,38,.34);
  --ui-focus:0 0 0 4px color-mix(in srgb,var(--mat-edge) 20%,transparent);
}
:root[data-theme="dark"]{
  --ui-shadow-control:
    0 1px 2px rgba(0,0,0,.24),
    0 12px 28px -18px rgba(0,0,0,.62);
  --ui-shadow-control-hover:
    0 3px 8px rgba(0,0,0,.32),
    0 20px 42px -22px rgba(0,0,0,.78);
  --ui-shadow-card:
    0 3px 8px rgba(0,0,0,.26),
    0 22px 48px -32px rgba(0,0,0,.72);
  --ui-shadow-card-hover:
    0 6px 16px rgba(0,0,0,.34),
    0 34px 68px -36px rgba(0,0,0,.88);
  --ui-focus:0 0 0 4px color-mix(in srgb,var(--mat-edge) 30%,transparent);
}

/* Resting states are calm. The slower duration is intentional: objects settle
   back into the page more softly than they rise from it. */
:where(
  .btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,
  .choice,.cat,.save-star,.thumb,.meaning-choice,
  .room-position a,.qa-add,.to-basket,
  .archive-interest input,.archive-interest .btn
){
  transition:
    transform var(--ui-settle) var(--ui-settle-ease),
    box-shadow var(--ui-settle) var(--ui-settle-ease),
    border-color var(--ui-settle) var(--ui-settle-ease),
    background-color var(--ui-settle) var(--ui-settle-ease),
    color var(--ui-settle) var(--ui-settle-ease),
    opacity var(--ui-settle) var(--ui-settle-ease),
    filter var(--ui-settle) var(--ui-settle-ease)!important;
}

/* Artwork and product visuals move as physical objects. Copy remains planted. */
:where(
  .product .tile,.card .art,.rel .art,.room-wall .art,.wall figure,
  .way-visual,.frame,.gallery-main,.thumb
){
  transform-origin:center center;
  transition:
    transform var(--ui-settle) var(--ui-settle-ease),
    box-shadow var(--ui-settle) var(--ui-settle-ease),
    border-color var(--ui-settle) var(--ui-settle-ease),
    filter var(--ui-settle) var(--ui-settle-ease)!important;
}

/* Text links don't float. Their feedback is optical instead of spatial. */
:where(
  .footer-legal a,.footer-socials a,.qa-detail,.shelf-foot a,
  .shop-entry a,.way-link,.gallery-foot a,.contact a
){
  transition:
    color var(--ui-enter) var(--ui-lift-ease),
    opacity var(--ui-enter) var(--ui-lift-ease),
    text-decoration-color var(--ui-enter) var(--ui-lift-ease),
    text-underline-offset var(--ui-enter) var(--ui-lift-ease);
}

/* Focus is a first-class interaction, not a browser afterthought. */
:where(
  .btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.choice,.cat,
  .save-star,.thumb,.meaning-choice,.room-position a,.qa-add,.to-basket,
  input,textarea,select,summary
):focus-visible{
  outline:none;
  box-shadow:var(--ui-focus),var(--ui-shadow-control-hover)!important;
}

/* Inputs breathe through edge/light, never through large movement. */
:where(input:not([type="checkbox"]):not([type="radio"]),textarea,select){
  transition:
    border-color var(--ui-enter) var(--ui-lift-ease),
    background-color var(--ui-enter) var(--ui-lift-ease),
    box-shadow var(--ui-settle) var(--ui-settle-ease);
}
:where(input:not([type="checkbox"]):not([type="radio"]),textarea,select):focus{
  border-color:color-mix(in srgb,var(--mat-edge) 72%,var(--mat-line))!important;
  background-color:color-mix(in srgb,var(--mat-raised) 88%,transparent)!important;
}

/* Fine-pointer lift system. Touch remains stable and direct. */
@media (hover:hover) and (pointer:fine){

  /* Primary controls: quick, slight rise + tiny scale + shallow elevation. */
  :where(
    .btn,.nav-enquire,.choice,.cat,.meaning-choice,
    .room-position a,.qa-add,.to-basket
  ):hover{
    transform:translate(0,var(--ui-lift-sm))!important;
    box-shadow:var(--ui-shadow-control-hover)!important;
    transition-duration:var(--ui-enter)!important;
    transition-timing-function:var(--ui-lift-ease)!important;
  }

  /* Compact icon controls can take a touch more scale because they have air. */
  :where(.icon-btn,.theme-toggle,.nav-toggle,.save-star):hover{
    transform:translate(0,var(--ui-lift-sm))!important;
    box-shadow:var(--ui-shadow-control-hover)!important;
    transition-duration:var(--ui-enter)!important;
    transition-timing-function:var(--ui-lift-ease)!important;
  }

  /* Cards don't become widgets. Only the physical artwork lifts. */
  :where(.product,.card,.rel,.room-wall figure,.wall figure,.way-card):hover
  :where(.tile,.art,.way-visual){
    transform:translate3d(0,var(--ui-lift-lg),0) scale(var(--ui-scale-card))!important;
    box-shadow:var(--ui-shadow-card-hover)!important;
    border-color:color-mix(in srgb,var(--mat-edge) 58%,var(--mat-line))!important;
    filter:saturate(1.015) brightness(1.005);
    transition-duration:300ms!important;
    transition-timing-function:var(--ui-lift-ease)!important;
  }

  /* Standalone framed objects use the same depth language. */
  :where(.frame,.gallery-main):hover{
    transform:translate3d(0,var(--ui-lift-md),0) scale(1.002)!important;
    box-shadow:var(--ui-shadow-card-hover)!important;
    border-color:color-mix(in srgb,var(--mat-edge) 56%,var(--mat-line))!important;
    transition-duration:300ms!important;
  }

  /* Thumbnails are small enough for a slightly clearer hover cue. */
  .thumb:hover{
    transform:translate3d(0,-2px,0) scale(1.018)!important;
    box-shadow:var(--ui-shadow-control-hover)!important;
    opacity:1!important;
    transition-duration:220ms!important;
  }

  /* Links breathe through tone/underline, not card-like elevation. */
  :where(
    .footer-legal a,.footer-socials a,.qa-detail,.shelf-foot a,
    .shop-entry a,.way-link,.gallery-foot a,.contact a
  ):hover{
    opacity:.78;
    text-underline-offset:.28em;
  }

  /* Accordions receive a tiny directional cue; the row itself stays planted. */
  .fold summary:hover{
    transform:translateX(2px);
    color:var(--green);
  }
  .fold summary svg{
    transition:transform 320ms var(--ui-settle-ease),color 220ms var(--ui-lift-ease);
    transform-origin:center;
  }
  .fold summary:hover svg{transform:rotate(12deg) scale(1.045)}
  .fold details[open] summary svg{transform:rotate(45deg)}

  /* Navigation brand should feel alive without bobbing around. */
  .brand{
    transition:opacity var(--ui-enter) var(--ui-lift-ease),filter var(--ui-enter) var(--ui-lift-ease);
  }
  .brand:hover{opacity:.82;filter:brightness(1.035)}

  /* Selected controls stay grounded; selection outranks hover. */
  :where(.choice[aria-pressed="true"],.cat.is-active,.cat[aria-current="true"],.meaning-choice.is-active):hover{
    transform:translate3d(0,-1px,0) scale(1.006)!important;
  }
}

/* Press states are faster and slightly compress, creating the second half of
   the physical feedback loop. */
:where(
  .btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.choice,.cat,
  .save-star,.thumb,.meaning-choice,.room-position a,.qa-add,.to-basket
):active{
  transform:translate3d(0,0,0) scale(.985)!important;
  transition-duration:var(--ui-press)!important;
  box-shadow:var(--ui-shadow-control)!important;
}

/* Motion is supplementary. Reduced-motion users keep all state changes without
   translation, scale, or delayed settling. */
@media (prefers-reduced-motion:reduce){
  :where(
    .btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.choice,.cat,
    .save-star,.thumb,.meaning-choice,.room-position a,.qa-add,.to-basket,
    .product .tile,.card .art,.rel .art,.room-wall .art,.wall figure,
    .way-visual,.frame,.gallery-main,.fold summary,.fold summary svg,.brand
  ){
    transition-duration:0.01ms!important;
    transform:none!important;
  }
}


/* HIMMA INTERACTION MATERIAL · UTILITY COVERAGE */
/* Small utility interactions use highlight rather than dramatic movement. */
:where(.qty button,.rm,.co-edit,.sample-note button,.archive-interest button){
  transition:
    transform var(--ui-settle) var(--ui-settle-ease),
    color var(--ui-enter) var(--ui-lift-ease),
    background-color var(--ui-enter) var(--ui-lift-ease),
    box-shadow var(--ui-settle) var(--ui-settle-ease),
    opacity var(--ui-enter) var(--ui-lift-ease)!important;
}
:where(.qty button,.rm,.co-edit,.sample-note button,.archive-interest button):focus-visible{
  outline:none;
  box-shadow:var(--ui-focus)!important;
}
.line .art{
  transform-origin:center;
  transition:
    transform var(--ui-settle) var(--ui-settle-ease),
    box-shadow var(--ui-settle) var(--ui-settle-ease),
    border-color var(--ui-settle) var(--ui-settle-ease)!important;
}
@media(hover:hover) and (pointer:fine){
  :where(.qty button,.sample-note button,.archive-interest button):hover{
    transform:translateY(-1px) scale(1.025);
    background:color-mix(in srgb,var(--mat-raised) 82%,transparent);
    box-shadow:var(--ui-shadow-control);
    transition-duration:var(--ui-enter)!important;
  }
  .rm:hover,.co-edit:hover{
    transform:translateY(-1px);
    opacity:.72;
    transition-duration:var(--ui-enter)!important;
  }
  .line .art:hover{
    transform:translateY(-2px) scale(1.01);
    box-shadow:var(--ui-shadow-control-hover);
    border-color:color-mix(in srgb,var(--mat-edge) 58%,var(--mat-line));
    transition-duration:var(--ui-enter)!important;
  }
}
:where(.qty button,.rm,.co-edit,.sample-note button,.archive-interest button):active{
  transform:scale(.96)!important;
  transition-duration:var(--ui-press)!important;
}
@media(prefers-reduced-motion:reduce){
  :where(.qty button,.rm,.co-edit,.sample-note button,.archive-interest button,.line .art){
    transition-duration:.01ms!important;
    transform:none!important;
  }
}


/* =====================================================================
   HIMMA CURATED MOTION MEDIA
   Motion behaves as material evidence, not decoration: quiet frames, poster
   first, no controls, no layout shift, no autoplay for reduced-motion users.
   ===================================================================== */
.motion-frame{
  position:relative;
  margin:0;
  display:grid;
  gap:.72rem;
  min-width:0;
}
.motion-frame video{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border:1px solid var(--mat-line);
  border-radius:var(--r-md);
  background:var(--mat-page-alt);
  box-shadow:var(--ui-shadow-card);
  opacity:.985;
  transition:
    transform var(--ui-settle) var(--ui-settle-ease),
    box-shadow var(--ui-settle) var(--ui-settle-ease),
    border-color var(--ui-settle) var(--ui-settle-ease),
    opacity .3s ease;
}
.motion-frame video.is-ready{opacity:1}
.motion-frame figcaption{
  display:grid;
  gap:.16rem;
  margin:0;
}
.motion-frame figcaption .motion-kicker{
  font-family:var(--ui);
  font-size:.64rem;
  font-weight:650;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--mat-edge);
}
.motion-frame figcaption b{
  font-size:.98rem;
  line-height:1.25;
}
.motion-frame figcaption span:last-child{
  font-family:var(--ui);
  font-size:.76rem;
  line-height:1.45;
  color:var(--mat-muted);
}
.motion-badge{
  position:absolute;
  top:.7rem;
  right:.7rem;
  z-index:2;
  padding:.38rem .58rem;
  border:1px solid color-mix(in srgb,var(--mat-line) 72%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--mat-raised) 78%,transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-family:var(--ui);
  font-size:.58rem;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mat-muted);
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .motion-frame:hover video{
    transform:translateY(-2px) scale(1.002);
    box-shadow:var(--ui-shadow-card-hover);
    border-color:color-mix(in srgb,var(--mat-edge) 54%,var(--mat-line));
  }
}

/* Homepage: motion is a second studio object beneath the palette reference,
   rather than another full-width hero. */
.home-page .studio-motion{
  margin-top:clamp(1.1rem,2.2vw,1.7rem);
}
.home-page .studio-motion video{
  aspect-ratio:4/3;
}
.home-page .studio-motion figcaption{
  padding-left:.1rem;
}
/* Keep the motion-study caption typographically consistent with the other
   Studio image captions while retaining its small hierarchy through weight/color. */
.home-page .studio-motion figcaption > *{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}

/* Archive: two pieces of physical evidence, deliberately smaller than product
   cards so the shelf remains editorial. */
.shop-page .archive-motion{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.85rem,2vw,1.35rem);
  width:min(100%,720px);
  margin-top:.15rem;
}
.shop-page .archive-motion .motion-frame video{
  aspect-ratio:4/3;
  border-radius:14px;
}
.shop-page .archive-motion .motion-frame figcaption b{
  font-size:.92rem;
}
:root[data-theme="dark"] .motion-frame video{
  background:#0B1118;
  border-color:rgba(150,160,215,.16);
}
:root[data-theme="dark"] .motion-badge{
  background:rgba(10,15,22,.68);
  border-color:rgba(220,229,235,.14);
  color:rgba(235,240,244,.72);
}
@media(max-width:700px){
  .shop-page .archive-motion{
    grid-template-columns:1fr;
    width:min(100%,420px);
  }
}
@media(prefers-reduced-motion:reduce){
  .motion-frame video{
    transform:none!important;
    transition:none!important;
  }
  .motion-badge::after{
    content:" still";
  }
}


/* =====================================================================
   ARCHIVE + STICKER MEDIA CORRECTION
   Real Archive artwork stays distinct from sticker collection imagery.
   GIFs are used as small material studies, not as oversized shop cards.
   ===================================================================== */
.motion-frame img[data-motion-gif]{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border:1px solid var(--mat-line);
  border-radius:var(--r-md);
  background:var(--mat-page-alt);
  box-shadow:var(--ui-shadow-card);
  transition:
    transform var(--ui-settle) var(--ui-settle-ease),
    box-shadow var(--ui-settle) var(--ui-settle-ease),
    border-color var(--ui-settle) var(--ui-settle-ease);
}
@media(hover:hover) and (pointer:fine){
  .motion-frame:hover img[data-motion-gif]{
    transform:translateY(-2px) scale(1.002);
    box-shadow:var(--ui-shadow-card-hover);
    border-color:color-mix(in srgb,var(--mat-edge) 54%,var(--mat-line));
  }
}

/* Sticker shelf: a modest visual reference strip before the purchasable cards.
   It is deliberately smaller than the art cards so it reads as context. */
.shop-page .sticker-showcase{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.8rem,1.5vw,1.1rem);
  width:100%;
  margin:1.35rem 0 1.8rem;
  align-items:start;
}
.shop-page .sticker-showcase .card-wrap{
  width:100%!important;
  max-width:none!important;
  min-width:0;
}
.shop-page .sticker-showcase .card{
  width:100%!important;
  max-width:none!important;
  min-width:0;
}
.shop-page .sticker-study{
  margin:0;
  min-width:0;
  display:grid;
  gap:.45rem;
}
.shop-page .sticker-study img{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border:1px solid var(--mat-line);
  border-radius:12px;
  background:var(--mat-page-alt);
  box-shadow:var(--ui-shadow-card);
  transition:
    transform var(--ui-settle) var(--ui-settle-ease),
    box-shadow var(--ui-settle) var(--ui-settle-ease);
}
.shop-page .sticker-study figcaption{
  font-family:var(--ui);
  font-size:.66rem;
  line-height:1.35;
  color:var(--mat-muted);
}
@media(hover:hover) and (pointer:fine){
  .shop-page .sticker-study:hover img{
    transform:translateY(-2px);
    box-shadow:var(--ui-shadow-card-hover);
  }
}
:root[data-theme="dark"] .shop-page .sticker-study img,
:root[data-theme="dark"] .motion-frame img[data-motion-gif]{
  background:#0B1118;
  border-color:rgba(150,160,215,.16);
}
@media(max-width:900px){
  .shop-page .sticker-showcase{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .shop-page .sticker-showcase{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:min(100%,520px);
  }
}
@media(max-width:520px){
  .shop-page .sticker-showcase{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(prefers-reduced-motion:reduce){
  .motion-frame img[data-motion-gif],
  .shop-page .sticker-study img{
    transform:none!important;
    transition:none!important;
  }
}


/* =====================================================================
   ARCHIVE PARCEL · CONSOLIDATED EXPERIENCE · 2026-10-02
   One visual system for the shop teaser and the dedicated Archive page.
   The actual parcel and real archive works do the visual work; detail stays
   quiet, familiar and easy to scan. No synthetic parcel mockups or GIF wall.
   ===================================================================== */

/* Shop: a concise route into the dedicated page, not a second landing page. */
.shop-page .archive-teaser{
  width:min(100%,1120px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(22rem,1.12fr);
  grid-template-areas:
    "heading visual"
    "body visual";
  column-gap:clamp(2rem,5vw,5rem);
  row-gap:1rem;
  align-items:center;
  padding-block:clamp(1.4rem,2.8vw,2.4rem);
  padding-inline:clamp(1.1rem,2.2vw,2rem) clamp(2.75rem,5.5vw,5rem);
  box-sizing:border-box;
}
.shop-page .archive-teaser-heading{
  grid-area:heading;
  display:grid;
  gap:.85rem;
  min-width:0;
  align-self:end;
}
.shop-page .archive-teaser-heading .eyebrow{margin:0}
.shop-page .archive-teaser-heading h2{
  margin:0;
  max-width:10ch;
  font-size:clamp(2.3rem,4vw,3.7rem);
  line-height:.96;
}
.shop-page .archive-teaser-heading>.muted{
  max-width:40ch;
  margin:0;
  color:var(--mat-muted);
  line-height:1.62;
}
.shop-page .archive-teaser-body{
  grid-area:body;
  display:grid;
  gap:.85rem;
  min-width:0;
  align-self:start;
}
.shop-page .archive-teaser-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 1rem;
  margin-top:.35rem;
  border-top:1px solid var(--mat-line-soft);
}
.shop-page .archive-teaser-meta span{
  display:grid;
  gap:.08rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--mat-line-soft);
}
.shop-page .archive-teaser-meta b{
  font-family:var(--ui);
  font-size:.76rem;
  font-weight:650;
}
.shop-page .archive-teaser-meta small{
  font-family:var(--ui);
  font-size:.68rem;
  line-height:1.4;
  color:var(--mat-muted);
}
.shop-page .archive-teaser-meta span:last-child:nth-child(odd){grid-column:1/-1}
.shop-page .archive-teaser-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1rem;
  align-items:center;
  margin-top:.35rem;
}
.shop-page .archive-teaser-actions .btn{min-height:48px}
.shop-page .archive-teaser-note{
  font-family:var(--ui);
  font-size:.72rem;
  color:var(--mat-edge);
}
.shop-page .archive-teaser-note:hover{opacity:.72}
.shop-page .archive-teaser-visual{
  grid-area:visual;
  margin:0;
  display:grid;
  place-items:center;
  min-width:0;
}
.shop-page .archive-teaser-visual img{
  display:block;
  width:min(100%,28rem);
  height:auto;
  object-fit:contain;
  border:0;
  background:transparent;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.20));
}
@media(max-width:820px){
  .shop-page .archive-teaser{
    width:min(100%,700px);
    grid-template-columns:minmax(0,1fr) minmax(11rem,.82fr);
    grid-template-areas:
      "heading visual"
      "body body";
    column-gap:clamp(1rem,4vw,2rem);
    row-gap:1.35rem;
    padding-inline:clamp(1rem,3.5vw,1.6rem) clamp(1.75rem,5vw,2.75rem);
    align-items:end;
  }
  .shop-page .archive-teaser-heading h2{max-width:13ch}
  .shop-page .archive-teaser-visual{
    width:min(100%,20rem);
    justify-self:end;
    align-self:end;
  }
}
@media(max-width:560px){
  .shop-page .archive-teaser{
    grid-template-columns:minmax(0,1fr) minmax(8.75rem,42%);
    column-gap:.8rem;
    padding-inline:1rem 1.35rem;
  }
  .shop-page .archive-teaser-heading{gap:.55rem}
  .shop-page .archive-teaser-heading h2{
    max-width:9ch;
    font-size:clamp(2rem,10vw,2.8rem);
  }
  .shop-page .archive-teaser-heading>.muted{
    font-size:.9rem;
    line-height:1.5;
  }
  .shop-page .archive-teaser-visual img{width:min(100%,12rem)}
  .shop-page .archive-teaser-meta{grid-template-columns:1fr}
  .shop-page .archive-teaser-actions{align-items:stretch}
  .shop-page .archive-teaser-actions .btn{width:100%}
}

/* Dedicated Archive page: editorial archive release · 2026-10-05 */
.archive-page .brand img{width:17px;height:36px;object-fit:contain}
.archive-page main{overflow:clip}

/* Text-led opening: no synthetic parcel image. */
.archive-page .archive-hero{
  padding-block:clamp(4.5rem,8vw,8rem);
  border-bottom:1px solid var(--mat-line-soft);
  background:
    radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--gold) 8%,transparent),transparent 28%),
    linear-gradient(180deg,color-mix(in srgb,var(--mat-page-alt) 36%,transparent),transparent 66%);
}
.archive-page .archive-hero-grid{
  width:min(1120px,calc(100% - 2*var(--grid-pad)));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(19rem,.85fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:end;
}
.archive-page .archive-hero-copy{
  display:grid;
  gap:1.15rem;
  align-content:end;
}
.archive-page .archive-hero-copy h1{
  max-width:8.5ch;
  margin:0;
  font-size:clamp(4rem,8.2vw,7.8rem);
  line-height:.86;
  letter-spacing:-.045em;
}
.archive-page .archive-hero-copy .lede{
  max-width:46ch;
  margin:0;
  color:var(--mat-muted);
  font-size:clamp(1rem,1.45vw,1.18rem);
  line-height:1.7;
}
.archive-page .archive-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  margin-top:.35rem;
}
.archive-page .archive-hero-actions .btn:not(.ghost),
.archive-page .archive-interest .btn{
  background:var(--signal-action,var(--green))!important;
  border-color:var(--signal-action,var(--green))!important;
  color:var(--signal-action-ink,var(--marble))!important;
}
.archive-page .archive-hero-actions .btn:not(.ghost):hover,
.archive-page .archive-interest .btn:hover{
  background:var(--signal-action-hover,var(--green-deep))!important;
  border-color:var(--signal-action-hover,var(--green-deep))!important;
}
.archive-page .archive-hero-facts{
  margin:0;
  display:grid;
  border-top:1px solid var(--mat-line);
  align-self:stretch;
}
.archive-page .archive-hero-facts>div{
  display:grid;
  grid-template-columns:minmax(7.5rem,.65fr) minmax(0,1.35fr);
  gap:.4rem 1rem;
  align-content:center;
  padding:1.05rem 0;
  border-bottom:1px solid var(--mat-line-soft);
}
.archive-page .archive-hero-facts span{
  font-family:var(--ui);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mat-muted);
}
.archive-page .archive-hero-facts strong{
  font-size:1.02rem;
  font-weight:500;
  color:var(--ink);
}
.archive-page .archive-hero-facts small{
  grid-column:2;
  font-family:var(--ui);
  font-size:.72rem;
  line-height:1.5;
  color:var(--mat-muted);
}

/* Shared editorial sections. */
.archive-page .archive-principle,
.archive-page .archive-gallery,
.archive-page .archive-contents,
.archive-page .archive-first-notice{
  padding-block:clamp(4.5rem,8vw,7.5rem);
}
.archive-page .archive-principle,
.archive-page .archive-gallery,
.archive-page .archive-contents{
  border-bottom:1px solid var(--mat-line-soft);
}
.archive-page .archive-principle-grid,
.archive-page .archive-contents-grid,
.archive-page .archive-notice-grid,
.archive-page .archive-gallery-head{
  width:min(1080px,calc(100% - 2*var(--grid-pad)));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(12rem,.34fr) minmax(0,.66fr);
  gap:clamp(2.5rem,6vw,6rem);
}
.archive-page :is(.archive-principle,.archive-contents,.archive-first-notice,.archive-gallery) h2{
  font-size:clamp(2.25rem,4vw,3.7rem);
  line-height:.94;
  letter-spacing:-.025em;
}
.archive-page .archive-principle-copy,
.archive-page .archive-contents-copy{
  display:grid;
  gap:1.1rem;
  max-width:46rem;
}
.archive-page .archive-principle-copy p,
.archive-page .archive-contents-copy>p{
  max-width:52ch;
  color:var(--mat-muted);
  line-height:1.72;
}

/* Real archive work: asymmetrical editorial layout, no flick-pass GIF. */
.archive-page .archive-gallery{background:color-mix(in srgb,var(--mat-page-alt) 48%,transparent)}
.archive-page .archive-gallery-head{
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
  align-items:end;
}
.archive-page .archive-gallery-head p:last-child{
  max-width:50ch;
  color:var(--mat-muted);
  line-height:1.68;
}
.archive-page .archive-gallery-grid{
  width:min(1120px,calc(100% - 2*var(--grid-pad)));
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,1.75rem);
  align-items:start;
}
.archive-page .archive-gallery-item,
.archive-page .archive-gallery .motion-frame{
  margin:0;
  display:grid;
  gap:.72rem;
  min-width:0;
}
.archive-page .archive-gallery-item--wide{grid-column:1/span 7}
.archive-page .archive-gallery-item--tall{grid-column:8/-1;margin-top:clamp(2rem,6vw,5rem)}
.archive-page .archive-gallery-item--detail{grid-column:1/span 5;margin-top:clamp(1rem,3vw,2.5rem)}
.archive-page .archive-gallery-item--motion{grid-column:6/-1;margin-top:clamp(3rem,7vw,6rem)}
.archive-page .archive-gallery-item img,
.archive-page .archive-gallery .motion-frame video{
  display:block;
  width:100%;
  object-fit:cover;
  border:1px solid var(--mat-line);
  border-radius:18px;
  background:var(--mat-page-alt);
  box-shadow:0 28px 70px -46px rgba(0,0,0,.45);
}
.archive-page .archive-gallery-item--wide img{aspect-ratio:1.28/1}
.archive-page .archive-gallery-item--tall img{aspect-ratio:.88/1}
.archive-page .archive-gallery-item--detail img{aspect-ratio:1/1}
.archive-page .archive-gallery-item--motion video{aspect-ratio:1.35/1}
.archive-page .archive-gallery-item figcaption,
.archive-page .archive-gallery .motion-frame figcaption{
  display:grid;
  gap:.14rem;
}
.archive-page .archive-gallery-item figcaption b,
.archive-page .archive-gallery .motion-frame figcaption b{
  font-size:.96rem;
  line-height:1.3;
}
.archive-page .archive-gallery-item figcaption span,
.archive-page .archive-gallery .motion-frame figcaption span:last-child{
  font-family:var(--ui);
  font-size:.72rem;
  line-height:1.45;
  color:var(--mat-muted);
}
.archive-page .archive-gallery .motion-badge{top:.65rem;right:.65rem}
:root[data-theme="dark"] .archive-page .archive-gallery-item img{
  background:#0B1118;
  border-color:rgba(150,160,215,.16);
}

/* Contents and planned formats: facts, not cards. */
.archive-page .archive-contents-list{
  display:grid;
  border-top:1px solid var(--mat-line-soft);
}
.archive-page .archive-contents-list div{
  display:grid;
  grid-template-columns:minmax(10rem,.7fr) minmax(0,1.3fr);
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--mat-line-soft);
}
.archive-page .archive-contents-list b{font-weight:500}
.archive-page .archive-contents-list span{
  font-family:var(--ui);
  color:var(--mat-muted);
  font-size:.84rem;
  line-height:1.5;
}
.archive-page .archive-formats{
  margin-top:clamp(1.8rem,3vw,2.5rem);
  border-top:1px solid var(--mat-line-soft);
}
.archive-page .archive-formats>.eyebrow{margin:1rem 0 .35rem}
.archive-page .archive-format-row{
  display:grid;
  grid-template-columns:minmax(6.5rem,.6fr) minmax(0,1.15fr) minmax(9rem,.85fr);
  gap:clamp(.75rem,2vw,1.2rem);
  align-items:baseline;
  padding:.9rem 0;
  border-bottom:1px solid var(--mat-line-soft);
}
.archive-page .archive-format-row b{
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
}
.archive-page .archive-format-row span,
.archive-page .archive-format-row em{
  font-family:var(--ui);
  font-size:.76rem;
  line-height:1.45;
  color:var(--mat-muted);
}
.archive-page .archive-format-row em{
  font-style:normal;
  text-align:right;
}
.archive-page .archive-format-note{
  margin-top:.9rem;
  max-width:54ch;
  font-family:var(--ui);
  font-size:.74rem;
  line-height:1.55;
  color:var(--mat-muted);
}

/* One commitment point, at the end of the explanation. */
.archive-page .archive-first-notice{
  background:color-mix(in srgb,var(--mat-page-alt) 74%,transparent);
}
.archive-page .archive-notice-copy{
  max-width:38rem;
  display:grid;
  gap:1rem;
}
.archive-page .archive-interest{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.7rem;
  align-items:end;
  margin-top:.5rem;
}
.archive-page .archive-interest label{
  display:grid;
  gap:.38rem;
  font-family:var(--ui);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--mat-muted);
}
.archive-page .archive-interest input{
  width:100%;
  min-height:50px;
  border:1px solid var(--mat-line);
  border-radius:12px;
  background:var(--mat-raised);
  color:var(--ink);
  padding:0 .9rem;
  font:inherit;
}
.archive-page .archive-interest input:focus{
  outline:2px solid color-mix(in srgb,var(--gold) 34%,transparent);
  outline-offset:2px;
}
.archive-page .archive-interest-note{
  grid-column:1/-1;
  margin:0;
  font-family:var(--ui);
  font-size:.7rem;
  line-height:1.45;
  color:var(--mat-muted);
}

@media(max-width:900px){
  .archive-page .archive-hero-grid{
    grid-template-columns:1fr;
    gap:3rem;
  }
  .archive-page .archive-hero-copy h1{max-width:10ch}
  .archive-page .archive-hero-facts{max-width:42rem}
  .archive-page .archive-principle-grid,
  .archive-page .archive-contents-grid,
  .archive-page .archive-notice-grid,
  .archive-page .archive-gallery-head{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
}
@media(max-width:680px){
  .archive-page .archive-hero{padding-block:3.6rem 4.5rem}
  .archive-page .archive-hero-copy h1{font-size:clamp(3.4rem,18vw,5.6rem)}
  .archive-page .archive-hero-facts>div{grid-template-columns:1fr;gap:.28rem}
  .archive-page .archive-hero-facts small{grid-column:1}
  .archive-page .archive-gallery-grid{grid-template-columns:1fr}
  .archive-page .archive-gallery-item--wide,
  .archive-page .archive-gallery-item--tall,
  .archive-page .archive-gallery-item--detail,
  .archive-page .archive-gallery-item--motion{
    grid-column:1;
    margin-top:0;
  }
  .archive-page .archive-gallery-item img,
  .archive-page .archive-gallery .motion-frame video{aspect-ratio:1.05/1}
  .archive-page .archive-interest{grid-template-columns:1fr}
  .archive-page .archive-interest .btn{width:100%}
  .archive-page .archive-contents-list div,
  .archive-page .archive-format-row{
    grid-template-columns:1fr;
    gap:.2rem;
  }
  .archive-page .archive-format-row em{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .shop-page .archive-teaser-visual img{filter:none}
}


/* MOBILE MENU SOLID-SURFACE FIX · 2026-10-01 */
@media(max-width:820px){
  .nav-pill.open,
  .nav.over .nav-pill.open{
    background:var(--solid)!important;
    color:var(--ink)!important;
    border:1px solid var(--line)!important;
    border-top:0!important;
    box-shadow:0 22px 48px -28px rgba(0,0,0,.55)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    opacity:1!important;
  }
  .nav-pill.open .nav-links a,
  .nav.over .nav-pill.open .nav-links a{
    color:var(--ink)!important;
  }
  .nav-pill.open .nav-enquire,
  .nav.over .nav-pill.open .nav-enquire{
    background:var(--green)!important;
    border-color:var(--green)!important;
    color:var(--marble)!important;
  }
}

/* ARTWORK CARD EDGE CLEANUP · 2026-10-01
   The artwork cards intentionally overscan their images by a hair. This hides
   stray paper/matte slivers without visibly cropping the composition, and the
   same rule is shared by exhibition, catalogue, related-work and PDP cards. */
:root{--art-card-bleed:1.03}

body :is(
  .room-wall .art,
  .gallery .art,
  .card .art,
  .rel .art,
  .product .tile,
  .wall figure
){
  overflow:hidden;
}

body :is(
  .room-wall .art,
  .gallery .art,
  .card .art,
  .rel .art,
  .product .tile,
  .wall figure
) img{
  scale:var(--art-card-bleed);
  transform-origin:center center;
}

/* Collapse the old white mat to a hairline. The 1.8% overscan above covers it
   at every card size while preserving the frame edge and rounded corners. */
body .room-wall .art,
body .card .art.contain,
body .product .tile.contain{
  padding:0!important;
}
body.home-page .room-wall .art{
  padding:0!important;
}
body .product .tile.contain img{
  inset:0!important;
  width:100%!important;
  height:100%!important;
}

/* Ratio-aware cards keep the same tiny bleed on hover instead of snapping
   back to an exposed matte. */
body .card:hover .art.ratio-aware img,
body .rel:hover .art.ratio-aware img{
  scale:var(--art-card-bleed)!important;
}


/* RESPONSIVE NAVIGATION · 2026-10-01
   Full navigation is visible whenever it fits. The menu control and stacked
   reveal are reserved for compact widths only. */
.nav .wrap{position:relative}
.nav .brand{grid-column:1}
.nav .nav-pill{grid-column:2}
.nav .nav-right{grid-column:3}

@media(min-width:1001px){
  .nav-toggle{display:none!important}
  .nav-pill,
  .nav.over .nav-pill{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    clip-path:none!important;
  }
  .nav-pill .nav-links li,
  .nav-pill .nav-enquire{
    opacity:1!important;
    transform:none!important;
  }
}

@media(max-width:1000px){
  .nav .wrap{
    grid-template-columns:auto 1fr auto!important;
  }
  .nav-toggle{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
  }
  .nav-pill,
  .nav.over .nav-pill{
    display:flex!important;
    position:absolute!important;
    z-index:30;
    top:100%;
    left:0;
    right:0;
    width:100%;
    max-width:none;
    flex-direction:column;
    align-items:stretch;
    gap:0!important;
    padding:.55rem var(--grid-pad) 1rem!important;
    border:1px solid var(--line)!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0 0 18px 18px!important;
    background:var(--solid)!important;
    color:var(--ink)!important;
    box-shadow:0 24px 58px -30px rgba(0,0,0,.55)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0,-18px,0) scale(.985);
    transform-origin:top center;
    clip-path:inset(0 0 100% 0 round 0 0 18px 18px);
    transition:
      opacity 190ms ease 170ms,
      transform 420ms cubic-bezier(.16,1,.3,1),
      clip-path 420ms cubic-bezier(.16,1,.3,1),
      visibility 0s linear 430ms;
  }
  .nav-pill.open,
  .nav.over .nav-pill.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0) scale(1);
    clip-path:inset(0 0 0 0 round 0 0 18px 18px);
    transition:
      opacity 160ms ease,
      transform 430ms cubic-bezier(.16,1,.3,1),
      clip-path 430ms cubic-bezier(.16,1,.3,1),
      visibility 0s linear 0s;
  }
  .nav-pill .nav-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .nav-pill .nav-links li,
  .nav-pill .nav-enquire{
    opacity:0;
    transform:translate3d(0,-12px,0);
    transition:
      opacity 150ms ease,
      transform 300ms cubic-bezier(.16,1,.3,1);
  }
  .nav-pill.open .nav-links li,
  .nav-pill.open .nav-enquire{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  .nav-pill.open .nav-links li:nth-child(1){transition-delay:70ms}
  .nav-pill.open .nav-links li:nth-child(2){transition-delay:105ms}
  .nav-pill.open .nav-links li:nth-child(3){transition-delay:140ms}
  .nav-pill.open .nav-links li:nth-child(4){transition-delay:175ms}
  .nav-pill.open .nav-enquire{transition-delay:210ms}

  .nav-pill:not(.open) .nav-enquire{transition-delay:0ms}
  .nav-pill:not(.open) .nav-links li:nth-child(4){transition-delay:25ms}
  .nav-pill:not(.open) .nav-links li:nth-child(3){transition-delay:50ms}
  .nav-pill:not(.open) .nav-links li:nth-child(2){transition-delay:75ms}
  .nav-pill:not(.open) .nav-links li:nth-child(1){transition-delay:100ms}

  .nav-pill .nav-links a,
  .nav.over .nav-pill .nav-links a{
    display:flex;
    width:100%;
    min-height:3.1rem;
    align-items:center;
    padding:.75rem 0;
    color:var(--ink)!important;
    border-bottom:1px solid var(--line);
    font-size:var(--t-md);
  }
  .nav-pill .nav-enquire,
  .nav.over .nav-pill .nav-enquire{
    margin-top:.9rem;
    justify-content:center;
    background:var(--green)!important;
    border-color:var(--green)!important;
    color:var(--marble)!important;
  }
}

@media (prefers-reduced-motion:reduce) and (max-width:1000px){
  .nav-pill,
  .nav-pill .nav-links li,
  .nav-pill .nav-enquire{
    transition:none!important;
    transform:none!important;
    clip-path:none!important;
  }
}


/* =====================================================================
   HIMMA COLOUR SIGNAL SYSTEM · 2026-10
   Colour is treated as pre-attentive communication, not decoration:
   green = action / presence / confirmation
   gold = value / attention / ceremonial emphasis
   mineral neutrals = reading / commerce / calm
   terracotta = error / destructive action
   spectral colour = atmosphere only, never the purchase signal
   ===================================================================== */
:root{
  --signal-action:#1E4D3B;
  --signal-action-hover:#143528;
  --signal-action-soft:#E4ECE5;
  --signal-action-ink:#FCFAF5;
  --signal-value:#B4934A;
  --signal-value-text:#745A28;
  --signal-value-soft:#F1E7CF;
  --signal-danger:#91483B;
  --signal-danger-soft:#F2E2DE;
  --signal-info:#587078;
  --signal-focus:rgba(180,147,74,.27);
  --huruf-cta:var(--signal-action);
  --huruf-cta-hover:var(--signal-action-hover);
  --huruf-cta-ink:var(--signal-action-ink);
}
:root:not([data-theme="dark"]){
  --green:#315F50;
  --green-deep:#1E4D3B;
  --green-tint:#E4ECE5;
  --mat-edge:#71827B;
  --ui-focus:0 0 0 4px var(--signal-focus);
}
:root[data-theme="dark"]{
  --signal-action:#7FB79F;
  --signal-action-hover:#9AC7B3;
  --signal-action-soft:rgba(127,183,159,.15);
  --signal-action-ink:#07110C;
  --signal-value:#D0AE65;
  --signal-value-text:#E2C98F;
  --signal-value-soft:rgba(208,174,101,.15);
  --signal-danger:#D48678;
  --signal-danger-soft:rgba(212,134,120,.13);
  --signal-info:#8CA7B0;
  --signal-focus:rgba(208,174,101,.26);
  --green:#78B39A;
  --green-deep:#93C7AF;
  --green-tint:rgba(22,40,46,.72);
  --mat-edge:#829A91;
  --huruf-cta:var(--signal-action);
  --huruf-cta-hover:var(--signal-action-hover);
  --huruf-cta-ink:var(--signal-action-ink);
  --ui-focus:0 0 0 4px var(--signal-focus);
}

:is(#basket-btn,.qa-add,.to-basket){
  background:var(--signal-action)!important;
  border-color:var(--signal-action)!important;
  color:var(--signal-action-ink)!important;
  background-image:none!important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--signal-value) 22%,transparent),
    0 10px 26px -20px color-mix(in srgb,var(--signal-action) 58%,transparent)!important;
}
:is(#basket-btn,.qa-add,.to-basket):hover{
  background:var(--signal-action-hover)!important;
  border-color:var(--signal-action-hover)!important;
  color:var(--signal-action-ink)!important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--signal-value) 30%,transparent),
    0 14px 30px -20px color-mix(in srgb,var(--signal-action) 68%,transparent)!important;
}
:is(#basket-btn,.qa-add,.to-basket)[aria-busy="true"]{filter:saturate(.72)}

.nav:not(.over) .nav-enquire{
  background:transparent!important;
  border-color:var(--signal-value)!important;
  color:var(--ink)!important;
}
.nav:not(.over) .nav-enquire:hover{
  background:var(--signal-value-soft)!important;
  border-color:var(--signal-value)!important;
  color:var(--ink)!important;
}

.meaning-choice.is-active,
.room-position a[aria-current]{
  background:var(--signal-action)!important;
  border-color:var(--signal-action)!important;
  color:var(--signal-action-ink)!important;
}
.cat.is-active{
  background:transparent!important;
  color:var(--signal-action)!important;
  border-bottom-color:var(--signal-action)!important;
}
:is(.choice,.qa-choice)[aria-pressed="true"]{
  background:var(--signal-action-soft)!important;
  border-color:var(--signal-action)!important;
  color:var(--signal-action)!important;
}
.qa-choice[aria-pressed="true"] small{color:var(--signal-action)!important}
.qa-status{color:var(--signal-action)!important}

.room-n,.difference-n{color:var(--signal-value-text)!important}
::selection{background:var(--signal-value-soft);color:var(--ink)}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{outline-color:var(--signal-value)!important}

:is(.co-msg.warn,.error,.field-error,.form-error){color:var(--signal-danger)!important}
:is(input,select,textarea)[aria-invalid="true"]{
  border-color:var(--signal-danger)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--signal-danger) 14%,transparent)!important;
}
.rm:hover,.rm:focus-visible{color:var(--signal-danger)!important}

main.basket .summary,
main.checkout .co-pay,
.qa-dialog{
  --sc-a-col:transparent;
  --sc-b-col:transparent;
}


/* =====================================================================
   HIMMA LIVING MOTION SYSTEM · 2026-10
   Life without noise: short, event-driven illustrated responses only.
   Nothing loops. Nothing competes with the artwork or protected peaks.
   ===================================================================== */
:root{
  --hm-life-green:var(--signal-action,var(--green,#1E4D3B));
  --hm-life-green-soft:var(--signal-action-soft,var(--green-tint,#E4ECE5));
  --hm-life-gold:var(--signal-value,var(--gold,#B4934A));
  --hm-life-danger:var(--signal-danger,#91483B);
  --hm-life-paper:var(--solid,#FBFAF6);
  --hm-life-ink:var(--ink,#1D2B34);
  --hm-life-ease:cubic-bezier(.16,1,.3,1);
}
.hm-fx-layer{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  overflow:hidden;
  contain:layout style paint;
}
.hm-cart-flight{
  position:fixed;
  width:20px;
  height:25px;
  left:var(--hm-x);
  top:var(--hm-y);
  margin:-12px 0 0 -10px;
  border:1px solid color-mix(in srgb,var(--hm-life-green) 70%,var(--hm-life-gold));
  border-radius:3px;
  background:var(--hm-life-paper);
  box-shadow:0 8px 18px -12px rgba(0,0,0,.35);
  transform-origin:center;
  animation:hm-cart-flight 720ms var(--hm-life-ease) forwards;
}
.hm-cart-flight::before{
  content:"";
  position:absolute;
  inset:4px 4px 7px;
  border:1px solid color-mix(in srgb,var(--hm-life-gold) 78%,transparent);
  background:
    linear-gradient(145deg,transparent 0 45%,color-mix(in srgb,var(--hm-life-green) 22%,transparent) 46% 64%,transparent 65%);
}
.hm-cart-flight::after{
  content:"";
  position:absolute;
  width:5px;height:5px;
  right:-4px;top:-4px;
  border-radius:50%;
  background:var(--hm-life-gold);
  box-shadow:-4px 6px 0 -1px var(--hm-life-green);
}
@keyframes hm-cart-flight{
  0%{opacity:0;transform:translate3d(0,4px,0) rotate(-7deg) scale(.72)}
  14%{opacity:1;transform:translate3d(0,-5px,0) rotate(4deg) scale(1)}
  54%{opacity:1;transform:translate3d(var(--hm-mx),var(--hm-my),0) rotate(-5deg) scale(.88)}
  88%{opacity:1;transform:translate3d(var(--hm-dx),var(--hm-dy),0) rotate(7deg) scale(.62)}
  100%{opacity:0;transform:translate3d(var(--hm-dx),var(--hm-dy),0) rotate(9deg) scale(.25)}
}
#cart-btn.hm-cart-catch{
  animation:hm-cart-catch 430ms var(--hm-life-ease);
}
@keyframes hm-cart-catch{
  0%,100%{transform:none}
  38%{transform:translateY(2px) rotate(-3deg) scale(.92)}
  68%{transform:translateY(-2px) rotate(2deg) scale(1.06)}
}
.hm-burst{
  position:fixed;
  left:var(--hm-x);
  top:var(--hm-y);
  width:1px;height:1px;
}
.hm-burst i{
  position:absolute;
  left:0;top:0;
  width:4px;height:4px;
  border-radius:1px;
  background:var(--hm-life-gold);
  animation:hm-burst 440ms var(--hm-life-ease) forwards;
  animation-delay:var(--hm-delay,0ms);
}
.hm-burst i:nth-child(even){background:var(--hm-life-green)}
@keyframes hm-burst{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0) scale(.4)}
  25%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--hm-dx),var(--hm-dy),0) rotate(70deg) scale(.8)}
}

.hm-sprig{
  position:fixed;
  left:var(--hm-x);
  top:var(--hm-y);
  width:42px;height:30px;
  color:var(--hm-life-gold);
  transform:translate(-50%,-60%) rotate(-7deg);
}
.hm-sprig path,.hm-sprig ellipse{
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:70;
  stroke-dashoffset:70;
  animation:hm-draw 620ms var(--hm-life-ease) forwards;
}
.hm-sprig ellipse{
  color:var(--hm-life-green);
  animation-delay:100ms;
}
@keyframes hm-draw{
  0%{opacity:0;stroke-dashoffset:70}
  20%{opacity:1}
  78%{opacity:1;stroke-dashoffset:0}
  100%{opacity:0;stroke-dashoffset:0}
}

.hm-pixels{
  position:fixed;
  left:var(--hm-x);
  top:var(--hm-y);
  width:34px;height:18px;
  transform:translate(-50%,-50%);
}
.hm-pixels i{
  position:absolute;
  width:5px;height:5px;
  border-radius:1px;
  background:var(--hm-life-green);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hm-life-paper) 34%,transparent);
  animation:hm-pixel-hop 520ms var(--hm-life-ease) forwards;
}
.hm-pixels i:nth-child(1){left:3px;top:9px;animation-delay:0ms}
.hm-pixels i:nth-child(2){left:14px;top:6px;background:var(--hm-life-gold);animation-delay:45ms}
.hm-pixels i:nth-child(3){left:25px;top:9px;animation-delay:90ms}
@keyframes hm-pixel-hop{
  0%{opacity:0;transform:translateY(5px) rotate(0) scale(.4)}
  28%{opacity:1;transform:translateY(-6px) rotate(20deg) scale(1)}
  72%{opacity:1;transform:translateY(0) rotate(0) scale(.9)}
  100%{opacity:0;transform:translateY(1px) scale(.55)}
}

.hm-ink-dot{
  position:fixed;
  left:var(--hm-x);top:var(--hm-y);
  width:7px;height:7px;
  margin:-3.5px;
  border-radius:50%;
  background:var(--hm-life-green);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--hm-life-gold) 50%,transparent);
  animation:hm-ink-dot 460ms var(--hm-life-ease) forwards;
}
@keyframes hm-ink-dot{
  0%{opacity:0;transform:scale(.35)}
  34%{opacity:1;transform:scale(1);box-shadow:0 0 0 1px color-mix(in srgb,var(--hm-life-gold) 45%,transparent)}
  72%{opacity:.8;box-shadow:0 0 0 8px transparent}
  100%{opacity:0;transform:scale(.55)}
}

.gallery-main.hm-art-settle,
.room-wall .art.hm-art-settle,
.card .art.hm-art-settle{
  animation:hm-art-settle 620ms var(--hm-life-ease);
  transform-origin:50% 58%;
}
@keyframes hm-art-settle{
  0%{transform:rotate(0) translateY(0)}
  28%{transform:rotate(-.55deg) translateY(-2px)}
  62%{transform:rotate(.2deg) translateY(1px)}
  100%{transform:rotate(0) translateY(0)}
}

.hm-star-doodle{
  position:fixed;
  left:var(--hm-x);top:var(--hm-y);
  width:22px;height:22px;
  color:var(--hm-life-gold);
  transform:translate(-50%,-50%);
  animation:hm-star-doodle 620ms var(--hm-life-ease) forwards;
}
.hm-star-doodle path{
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;
  stroke-dasharray:64;stroke-dashoffset:64;
  animation:hm-star-path 440ms 40ms var(--hm-life-ease) forwards;
}
@keyframes hm-star-doodle{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-18deg) scale(.55)}
  35%{opacity:1;transform:translate(-50%,-50%) rotate(6deg) scale(1.06)}
  78%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(.95)}
  100%{opacity:0;transform:translate(-50%,-55%) scale(.65)}
}
@keyframes hm-star-path{to{stroke-dashoffset:0}}

.hm-pay-dots{
  position:fixed;
  left:var(--hm-x);top:var(--hm-y);
  width:34px;height:8px;
  transform:translate(-50%,-50%);
}
.hm-pay-dots i{
  position:absolute;top:2px;
  width:4px;height:4px;border-radius:50%;
  background:var(--hm-life-green);
  animation:hm-pay-fold 620ms var(--hm-life-ease) forwards;
}
.hm-pay-dots i:nth-child(1){left:1px}
.hm-pay-dots i:nth-child(2){left:15px;background:var(--hm-life-gold);animation-delay:35ms}
.hm-pay-dots i:nth-child(3){left:29px;animation-delay:70ms}
@keyframes hm-pay-fold{
  0%{opacity:0;transform:translateY(4px) scale(.5)}
  30%{opacity:1;transform:translateY(-4px) scale(1)}
  70%{opacity:1;transform:translateY(0) scale(.9)}
  100%{opacity:0;transform:translateY(0) scale(.45)}
}

.hm-nav-stitch{
  position:fixed;
  left:var(--hm-x);
  top:var(--hm-y);
  width:38px;height:8px;
  transform:translate(-4px,-50%);
}
.hm-nav-stitch i{
  position:absolute;
  left:0;top:3px;
  width:9px;height:1px;
  background:var(--hm-life-gold);
  transform-origin:left center;
  animation:hm-stitch 250ms ease-out forwards;
}
.hm-nav-stitch i:nth-child(2){left:12px;background:var(--hm-life-green);animation-delay:35ms}
.hm-nav-stitch i:nth-child(3){left:24px;animation-delay:70ms}
@keyframes hm-stitch{
  0%{opacity:0;transform:translateX(-4px) scaleX(.2)}
  45%{opacity:.95;transform:translateX(0) scaleX(1)}
  100%{opacity:0;transform:translateX(6px) scaleX(.45)}
}

.qa-head{position:relative}
.hm-qa-doodle{
  position:absolute;
  right:4.25rem;
  top:50%;
  width:32px;height:18px;
  transform:translateY(-50%);
  pointer-events:none;
}
.hm-qa-doodle i{
  position:absolute;
  width:5px;height:5px;
  border:1px solid var(--hm-life-gold);
  border-radius:50%;
  animation:hm-qa-bubble 740ms var(--hm-life-ease) forwards;
}
.hm-qa-doodle i:nth-child(1){left:1px;top:8px}
.hm-qa-doodle i:nth-child(2){left:12px;top:2px;width:7px;height:7px;border-color:var(--hm-life-green);animation-delay:70ms}
.hm-qa-doodle i:nth-child(3){left:25px;top:9px;width:4px;height:4px;animation-delay:130ms}
@keyframes hm-qa-bubble{
  0%{opacity:0;transform:translateY(6px) scale(.4)}
  35%{opacity:1;transform:translateY(-3px) scale(1)}
  75%{opacity:.85;transform:translateY(0) scale(.9)}
  100%{opacity:0;transform:translateY(-2px) scale(.45)}
}

.hm-gate-glint{
  position:fixed;
  left:var(--hm-x);top:var(--hm-y);
  width:32px;height:22px;
  transform:translate(-50%,-50%);
}
.hm-gate-glint i{
  position:absolute;
  width:3px;height:3px;
  background:var(--gold,var(--hm-life-gold));
  animation:hm-gate-glint 620ms steps(5,end) forwards;
}
.hm-gate-glint i:nth-child(1){left:1px;top:9px}
.hm-gate-glint i:nth-child(2){left:12px;top:2px;animation-delay:55ms}
.hm-gate-glint i:nth-child(3){left:23px;top:12px;animation-delay:110ms}
.hm-gate-glint i:nth-child(4){left:29px;top:5px;animation-delay:150ms}
@keyframes hm-gate-glint{
  0%{opacity:0;transform:translate(0,4px) scale(1)}
  30%{opacity:1;transform:translate(0,-4px) scale(1.3)}
  75%{opacity:1;transform:translate(3px,-1px) scale(1)}
  100%{opacity:0;transform:translate(5px,0) scale(.6)}
}

@media(prefers-reduced-motion:reduce){
  .hm-fx-layer{display:none!important}
  .gallery-main.hm-art-settle,
  .room-wall .art.hm-art-settle,
  .card .art.hm-art-settle,
  #cart-btn.hm-cart-catch{animation:none!important}
}

/* === STACKED ROOMS · HORIZONTAL ROOM WALLS · 2026-10-02 === */
/* Rooms remain vertical exhibition chapters. Only each room's artwork wall
   scrolls horizontally, so vertical scrolling moves between rooms and
   horizontal scrolling explores the works inside the current room. */
.home-page .exhibit{
  display:grid!important;
  gap:0!important;
  min-width:0;
}

.home-page .exhibit .room{
  display:grid!important;
  grid-template-columns:minmax(10rem,14rem) minmax(0,1fr)!important;
  gap:clamp(1.5rem,4vw,3rem)!important;
  align-items:start;
  width:100%;
  max-width:100%;
  padding:clamp(2.3rem,4.5vw,4rem) 0!important;
  border-top:0!important;
  scroll-snap-align:none;
}
.home-page .exhibit .room+.room{
  border-top:1px solid var(--mat-line-soft,var(--line))!important;
}

.home-page .exhibit .room-head{
  position:sticky!important;
  top:6rem!important;
  display:grid!important;
  gap:.5rem;
  align-self:start;
  width:auto;
  max-width:none;
  margin:0;
}
.home-page .exhibit .room-head .room-n,
.home-page .exhibit .room-head h3,
.home-page .exhibit .room-head p{
  grid-area:auto!important;
}
.home-page .exhibit .room-head p{max-width:22ch!important}

.home-page .exhibit .room-wall{
  --room-card:clamp(13.5rem,20vw,18.5rem);
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:.35rem 0 clamp(.8rem,1.8vw,1.2rem);
  scroll-snap-type:x proximity;
  scroll-padding-inline:0;
  overscroll-behavior-inline:auto;
  overscroll-behavior-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x pan-y;
  cursor:grab;
}
.home-page .exhibit .room-wall::-webkit-scrollbar{display:none}
.home-page .exhibit .room-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:var(--room-card);
  gap:clamp(.9rem,1.8vw,1.4rem);
  width:max-content;
  min-width:100%;
}
.home-page .exhibit .room-wall figure{
  width:var(--room-card)!important;
  min-width:0;
  margin:0;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}
.home-page .exhibit .room-wall .art{width:100%}

@media(max-width:900px){
  .home-page .exhibit .room{
    grid-template-columns:1fr!important;
    gap:1.15rem!important;
  }
  .home-page .exhibit .room-head{
    position:static!important;
    top:auto!important;
  }
  .home-page .exhibit .room-head p{
    max-width:42ch!important;
  }
}

@media(max-width:700px){
  .home-page .exhibit .room{
    padding:1.8rem 0 2.2rem!important;
  }
  .home-page .exhibit .room-wall{
    --room-card:min(76vw,19rem);
    margin-inline:calc(var(--grid-pad,1rem) * -1);
    width:calc(100% + (var(--grid-pad,1rem) * 2));
    max-width:none;
    padding-inline:var(--grid-pad,1rem);
    scroll-padding-inline:var(--grid-pad,1rem);
    scroll-snap-type:x mandatory;
  }
  .home-page .exhibit .room-track{gap:.8rem!important}
  .home-page .exhibit .room-wall figcaption{
    padding-left:.55rem!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .home-page .exhibit .room-wall{scroll-behavior:auto!important}
}


/* ---------- verified collector proof ---------- */
.proof-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(16rem,.72fr);
  gap:clamp(1.5rem,5vw,4rem);
  align-items:end;
  margin-top:clamp(2.75rem,5vw,4.5rem);
  padding-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--line);
}
.proof-head h3{
  max-width:18ch;
  font-size:clamp(1.9rem,3.4vw,2.75rem);
  line-height:1.05;
}
.proof-head .muted{max-width:38ch;justify-self:end}
.said--verified{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin-top:1.35rem;
  padding-top:0;
  border:1px solid var(--line);
  background:var(--line);
}
.said--verified>*{
  min-width:0;
  padding:clamp(1.35rem,2.8vw,2.1rem);
  background:var(--solid);
}
.said--verified .quote{gap:1.15rem}
.said--verified .quote--feature{
  grid-row:span 2;
  align-content:center;
}
.said--verified .quote--feature p{
  font-size:clamp(1.35rem,2.35vw,2rem);
  line-height:1.48;
}
.said--verified .quote:not(.quote--feature) p{
  font-size:clamp(1.05rem,1.65vw,1.32rem);
  line-height:1.55;
}
.said--verified .quote footer{
  padding-top:.8rem;
  border-top:1px solid var(--line);
}
.delivery-proof{
  display:grid;
  gap:.85rem;
  align-content:start;
  margin:0;
}
.delivery-proof__kicker{
  font-family:var(--ui);
  font-size:var(--t-xs);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold);
}
.delivery-proof strong{
  max-width:20ch;
  font-size:clamp(1.45rem,2.35vw,2rem);
  line-height:1.12;
  font-weight:500;
  color:var(--ink);
}
.delivery-proof p{
  max-width:42ch;
  color:var(--earth);
  font-size:var(--t-sm);
  line-height:1.65;
}
.delivery-proof__time{
  margin-top:auto;
  padding-top:.8rem;
  border-top:1px solid var(--line);
  font-family:var(--ui);
  font-size:var(--t-xs);
  color:var(--earth);
}
@media(max-width:820px){
  .proof-head{grid-template-columns:1fr;align-items:start}
  .proof-head .muted{justify-self:start}
  .said--verified{grid-template-columns:1fr}
  .said--verified .quote--feature{grid-row:auto}
}


/* testimonial screenshot cards */
.said--verified>.proof-card{
  padding:0;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  background:var(--solid);
}
.proof-shot{
  display:grid;
  place-items:center;
  min-height:12rem;
  max-height:20rem;
  padding:.75rem;
  overflow:hidden;
  background:#07090d;
  border-bottom:1px solid var(--line);
}
.proof-shot img{
  display:block;
  width:auto;
  max-width:100%;
  height:100%;
  max-height:18.5rem;
  object-fit:contain;
  object-position:top center;
  border-radius:6px;
  background:#07090d;
}
.proof-card__body{
  padding:clamp(1.35rem,2.8vw,2.1rem);
}
.proof-card .quote{margin:0;flex:1}
.proof-card .delivery-proof{flex:1}
.proof-shot:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:-2px;
}
@media(max-width:820px){
  .proof-shot{min-height:10rem;max-height:17rem;padding:.6rem}
  .proof-shot img{max-height:15.8rem}
}


/* =====================================================================
   MOBILE HOMEPAGE SCROLL JOURNEY · 2026-10-03
   Reduce vertical tax without removing content. Card groups become compact
   horizontal shelves; headings use the full mobile measure; the exhibition
   behaves as one room at a time on compact screens.
   ===================================================================== */
@media(max-width:700px){
  body.home-page main > section:not(.hero){
    padding-block:clamp(2.75rem,8vw,3.4rem)!important;
  }

  body.home-page .section-head{
    max-width:none!important;
    gap:.5rem!important;
    margin-bottom:1.45rem!important;
  }

  body.home-page :is(
    .section-head h2,
    .reorchestrate-copy h2,
    .studio-copy h2,
    .comm-copy h2
  ){
    width:100%;
    max-width:none!important;
    font-size:clamp(2.15rem,9.35vw,2.7rem)!important;
    line-height:.99!important;
    letter-spacing:-.03em!important;
    text-wrap:pretty!important;
  }

  body.home-page :is(
    .section-head .muted,
    .reorchestrate-copy .lede,
    .comm-copy .muted
  ){
    max-width:none!important;
  }

  /* Opening value proposition: fewer headline rows and a shorter room demo. */
  body.home-page .reorchestrate{
    padding-block:clamp(2.8rem,8vw,3.5rem)!important;
  }
  body.home-page .reorchestrate-grid{
    gap:1.35rem!important;
  }
  body.home-page .reorchestrate-copy{
    gap:.8rem!important;
  }
  body.home-page .reorchestrate-copy .lede{
    font-size:1.04rem;
    line-height:1.52;
  }
  body.home-page .meaning-switcher{
    gap:.45rem;
    margin-top:.15rem;
  }
  body.home-page .meaning-choice{
    min-height:40px;
    padding:.5rem .78rem;
    font-size:.92rem;
  }
  body.home-page .room-demo-wall{
    min-height:260px!important;
  }
  body.home-page .room-demo-frame{
    width:min(42%,150px)!important;
  }

  /* "Choose how it lives" is a shelf, not three full mobile screens. */
  body.home-page .ways-grid{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column;
    grid-auto-columns:min(78vw,18rem);
    gap:.8rem!important;
    width:calc(100% + (var(--grid-pad,1rem) * 2));
    margin-inline:calc(var(--grid-pad,1rem) * -1);
    padding-inline:var(--grid-pad,1rem);
    padding-bottom:.35rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--grid-pad,1rem);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.home-page .way-card{
    min-width:0;
    scroll-snap-align:start;
  }
  body.home-page .way-copy{
    padding:1rem!important;
  }

  /* Exhibition: the five-room selector acts as tabs on mobile. */
  body.home-page .haramayn .sites{
    flex-wrap:nowrap;
    overflow-x:auto;
    width:calc(100% + (var(--grid-pad,1rem) * 2));
    margin-inline:calc(var(--grid-pad,1rem) * -1);
    padding-inline:var(--grid-pad,1rem);
    gap:1rem;
    scrollbar-width:none;
  }
  body.home-page .haramayn .sites span{
    flex:0 0 auto;
    white-space:nowrap;
  }
  body.home-page .room-position{
    position:sticky;
    top:4.4rem;
    justify-self:stretch;
    width:100%;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0;
    border-radius:14px;
    overflow:hidden;
    background:color-mix(in srgb,var(--solid) 94%,transparent);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  body.home-page .room-position a{
    min-width:0;
    min-height:2.65rem;
    padding:.35rem .2rem;
  }
  body.home-page .exhibit.rooms-tabbed .room[hidden]{
    display:none!important;
  }
  body.home-page .exhibit .room{
    padding:1.25rem 0 1.45rem!important;
    gap:.8rem!important;
  }
  body.home-page .exhibit .room-head{
    gap:.25rem!important;
  }
  body.home-page .exhibit .room-head p{
    max-width:none!important;
    font-size:.94rem;
    line-height:1.45;
  }
  body.home-page .exhibit .room-wall{
    --room-card:min(65vw,16rem)!important; /* ~15% smaller than the old 76vw card */
    padding-bottom:.55rem!important;
  }
  body.home-page .exhibit .room-track{
    gap:.72rem!important;
  }
  body.home-page .exhibit .room-wall figcaption{
    gap:.05rem;
    padding-left:.5rem!important;
  }
  body.home-page .exhibit .room-wall figcaption b{
    font-size:.92rem;
  }
  body.home-page .exhibit .room-wall figcaption span{
    font-size:.62rem;
  }
  body.home-page .gallery-routes{
    flex-direction:row!important;
    flex-wrap:nowrap;
    overflow-x:auto;
    white-space:nowrap;
    gap:1.1rem;
    padding-bottom:.25rem;
    scrollbar-width:none;
  }

  /* Founder media becomes one swipeable strip instead of three stacked images. */
  body.home-page .studio .wrap{
    gap:1.4rem!important;
  }
  body.home-page .studio-copy{
    gap:.9rem;
  }
  body.home-page .studio-copy p{
    line-height:1.52;
  }
  body.home-page .studio-side{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column;
    grid-auto-columns:min(72vw,18rem);
    gap:.8rem!important;
    width:calc(100% + (var(--grid-pad,1rem) * 2));
    margin-inline:calc(var(--grid-pad,1rem) * -1);
    padding-inline:var(--grid-pad,1rem);
    padding-bottom:.35rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--grid-pad,1rem);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.home-page .studio-side > *{
    min-width:0;
    margin:0;
    scroll-snap-align:start;
  }
  body.home-page .studio-side .definition{
    align-self:start;
    margin-top:0;
    padding:1rem;
    border:1px solid var(--line);
    border-left:2px solid var(--gold);
    background:color-mix(in srgb,var(--solid) 55%,transparent);
  }

  /* "Words worth carrying" mirrors the exhibition's swipe behaviour. */
  body.home-page .kraft-section .words{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column;
    grid-auto-columns:min(68vw,16rem);
    gap:.8rem!important;
    width:calc(100% + (var(--grid-pad,1rem) * 2));
    margin-inline:calc(var(--grid-pad,1rem) * -1);
    padding-inline:var(--grid-pad,1rem);
    padding-bottom:.35rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--grid-pad,1rem);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.home-page .kraft-section .word{
    min-width:0;
    gap:.5rem;
    scroll-snap-align:start;
  }
  body.home-page .kraft-section .word .ar{
    font-size:1.75rem;
  }
  body.home-page .kraft-section .word figcaption{
    gap:.1rem;
  }
  body.home-page .kraft-section .word figcaption span{
    font-size:.9rem;
  }
  body.home-page .craft-route{
    margin-top:1.05rem;
  }
  body.home-page .themes{
    flex-wrap:nowrap;
    overflow-x:auto;
    margin-top:1.35rem;
    padding-top:1rem;
    padding-bottom:.2rem;
    scrollbar-width:none;
  }
  body.home-page .themes span{
    flex:0 0 auto;
  }

  /* Home shop edit becomes a shelf so the page does not stack four product cards. */
  body.home-page .shop-head{
    margin-bottom:1.45rem!important;
  }
  body.home-page .shop-head > .brand-drawing{
    display:none;
  }
  body.home-page .shop .product-grid{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column;
    grid-auto-columns:min(78vw,19rem);
    gap:.85rem!important;
    width:calc(100% + (var(--grid-pad,1rem) * 2));
    margin-inline:calc(var(--grid-pad,1rem) * -1);
    padding-inline:var(--grid-pad,1rem);
    padding-bottom:.35rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--grid-pad,1rem);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.home-page .shop .product{
    min-width:0;
    scroll-snap-align:start;
  }
  body.home-page .shop .product.wide{
    grid-column:auto!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto 1fr!important;
  }
  body.home-page .shop .product.wide .tile{
    min-height:0!important;
    aspect-ratio:4/3!important;
    border-right:0!important;
  }
  body.home-page .shop .product-body{
    padding:.78rem 0 0!important;
  }
  body.home-page .shop .product-body > p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }
  body.home-page .shop .piece-facts{
    font-size:.84rem;
    line-height:1.4;
  }
  body.home-page .shop-entry{
    margin-top:1.35rem;
  }

  /* Commissions: preserve the information, cut the air and repeated vertical beats. */
  body.home-page .commissions .wrap{
    gap:1.35rem!important;
  }
  body.home-page .comm-copy{
    gap:1rem;
  }
  body.home-page .comm-copy > .brand-drawing{
    display:none;
  }
  body.home-page .offer-list{
    margin-top:0;
  }
  body.home-page .offer{
    padding:.72rem 0;
    gap:.18rem;
  }
  body.home-page .offer h3{
    font-size:1.08rem;
  }
  body.home-page .offer p{
    font-size:.9rem;
    line-height:1.43;
  }
  body.home-page .process{
    gap:.55rem;
  }
  body.home-page .process li{
    grid-template-columns:1.7rem 1fr;
    gap:.55rem;
    font-size:.9rem;
    line-height:1.4;
  }
  body.home-page .process li::before{
    font-size:1.05rem;
  }
  body.home-page .process li strong{
    display:inline!important;
    font-size:.98rem;
  }
  body.home-page .process li strong::after{
    content:" — ";
    color:var(--earth);
  }
  body.home-page .form{
    padding:1.05rem!important;
    gap:.72rem!important;
  }
  body.home-page .form h3{
    font-size:1.35rem;
  }
  body.home-page .field{
    gap:.25rem;
  }
  body.home-page .field input,
  body.home-page .field select,
  body.home-page .field textarea{
    padding:.5rem 0;
  }
  body.home-page .field textarea{
    min-height:4.5rem;
  }
  body.home-page .form > .field-row:last-of-type{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.75rem;
  }
  body.home-page .form-note{
    line-height:1.4;
  }

  /* Homes + collector messages: one social-proof chapter, two compact swipe strips. */
  body.home-page .homes .wall{
    display:grid!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    grid-auto-flow:column;
    grid-auto-columns:min(72vw,17rem);
    grid-auto-rows:auto;
    gap:.75rem!important;
    width:calc(100% + (var(--grid-pad,1rem) * 2));
    margin-inline:calc(var(--grid-pad,1rem) * -1);
    padding-inline:var(--grid-pad,1rem);
    padding-bottom:.3rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--grid-pad,1rem);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.home-page .homes .wall figure,
  body.home-page .homes .wall figure:first-child{
    grid-column:auto!important;
    grid-row:auto!important;
    width:auto;
    height:auto;
    aspect-ratio:4/3;
    scroll-snap-align:start;
  }
  body.home-page .homes .note{
    margin-top:.85rem;
    line-height:1.48;
  }
  body.home-page .homes .said--verified{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column;
    grid-auto-columns:min(80vw,19rem);
    gap:.8rem!important;
    width:calc(100% + (var(--grid-pad,1rem) * 2));
    margin:1.2rem calc(var(--grid-pad,1rem) * -1) 0!important;
    padding:0 var(--grid-pad,1rem) .3rem!important;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--grid-pad,1rem);
    border:0!important;
    background:transparent!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.home-page .homes .said--verified > .proof-card{
    scroll-snap-align:start;
    border:1px solid var(--line);
    border-radius:var(--r-sm,10px);
  }
  body.home-page .homes .proof-shot{
    min-height:8rem;
    max-height:11.5rem;
    padding:.5rem;
  }
  body.home-page .homes .proof-shot img{
    max-height:10.5rem;
  }
  body.home-page .homes .proof-card__body{
    padding:.9rem;
  }
  body.home-page .homes .quote p{
    font-size:1rem!important;
    line-height:1.48!important;
  }
  body.home-page .homes .delivery-proof{
    gap:.6rem;
  }
  body.home-page .homes .delivery-proof strong{
    font-size:1.25rem;
  }

  body.home-page .contact .wrap{
    gap:1.35rem!important;
  }

  body.home-page :is(
    .ways-grid,
    .haramayn .sites,
    .gallery-routes,
    .studio-side,
    .kraft-section .words,
    .themes,
    .shop .product-grid,
    .homes .wall,
    .homes .said--verified
  )::-webkit-scrollbar{
    display:none;
  }
}


/* COMPACT COLLECTOR PROOF RAIL · v81
   One horizontal proof shelf instead of a long vertical testimonial chapter. */
.home-page .proof-rail-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.15rem;
  padding-top:.9rem;
  border-top:1px solid var(--line);
  font-family:var(--ui);
  font-size:var(--t-xs);
  color:var(--earth);
}
.home-page .proof-rail-topline b{
  color:var(--ink);
  font-weight:600;
}
.home-page .proof-rail-controls{
  display:flex;
  align-items:center;
  gap:.4rem;
  flex:0 0 auto;
}
.home-page .proof-rail-hint{
  padding-inline:.2rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.home-page .proof-rail-btn{
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--solid);
  color:var(--ink);
  font:inherit;
  font-size:.95rem;
  cursor:pointer;
}
.home-page .proof-rail-btn:hover{border-color:var(--gold)}
.home-page .proof-rail-btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.home-page .homes .said--verified{
  display:grid!important;
  grid-template-columns:none!important;
  grid-auto-flow:column;
  grid-auto-columns:clamp(17.5rem,28vw,21rem);
  gap:.8rem!important;
  width:calc(100% + clamp(1rem,4vw,3rem));
  margin: .8rem 0 0!important;
  padding:0 clamp(1rem,4vw,3rem) .45rem 0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  -webkit-overflow-scrolling:touch;
  border:0!important;
  background:transparent!important;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--earth) 34%,transparent) transparent;
}
.home-page .homes .said--verified::-webkit-scrollbar{height:4px}
.home-page .homes .said--verified::-webkit-scrollbar-track{background:transparent}
.home-page .homes .said--verified::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--earth) 34%,transparent);
  border-radius:999px;
}
.home-page .homes .said--verified>.proof-card{
  min-width:0;
  height:100%;
  padding:0!important;
  scroll-snap-align:start;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--solid);
}
.home-page .homes .proof-shot{
  min-height:0!important;
  height:9rem!important;
  max-height:9rem!important;
  padding:.45rem!important;
}
.home-page .homes .proof-shot img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
}
.home-page .homes .proof-card__body{
  padding:.9rem 1rem 1rem!important;
}
.home-page .homes .proof-card .quote p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  font-size:.98rem!important;
  line-height:1.46!important;
}
.home-page .homes .proof-card .quote footer{
  margin-top:auto;
  padding-top:.65rem;
}
.home-page .homes .delivery-proof{
  gap:.5rem!important;
}
.home-page .homes .delivery-proof strong{
  font-size:1.18rem!important;
}
.home-page .homes .delivery-proof p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.home-page .homes .delivery-proof__time{
  margin-top:auto;
}

@media(max-width:820px){
  .home-page .proof-rail-topline{
    align-items:center;
    margin-top:1rem;
  }
  .home-page .proof-rail-topline>span{
    max-width:15rem;
    line-height:1.35;
  }
  .home-page .proof-rail-hint{display:none}
  .home-page .homes .said--verified{
    grid-auto-columns:min(74vw,17.5rem)!important;
    width:calc(100% + var(--grid-pad,1rem))!important;
    margin-right:calc(var(--grid-pad,1rem) * -1)!important;
    padding-right:var(--grid-pad,1rem)!important;
    scrollbar-width:none!important;
  }
  .home-page .homes .said--verified::-webkit-scrollbar{display:none}
  .home-page .homes .proof-shot{
    height:8.2rem!important;
    max-height:8.2rem!important;
  }
}


/* Ayatul Kursi collector composite · v83 */
.home-page .homes .proof-shot--quality{
  display:block;
  padding:.45rem!important;
  background:#07090d;
}
.home-page .homes .proof-shot--quality img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:6px;
}


/* ================================================================
   Unified testimonial viewing tab
   One shared container size; source image dimensions never resize it.
   ================================================================ */
button.proof-shot{
  -webkit-appearance:none;
  appearance:none;
  font:inherit;
  color:inherit;
  border:0;
  border-bottom:1px solid var(--line);
  cursor:zoom-in;
}
.proof-theatre{
  position:fixed;
  inset:0;
  z-index:1190;
  pointer-events:none;
  opacity:0;
  background:rgba(5,8,10,.18);
  transition:opacity 180ms ease;
}
.proof-theatre.is-open{opacity:1}
.proof-popover{
  position:fixed;
  z-index:1200;
  display:none;
  box-sizing:border-box;
  padding:10px;
  margin:0;
  border:1px solid color-mix(in srgb,var(--line) 78%,transparent);
  border-radius:16px;
  background:var(--solid);
  box-shadow:
    0 26px 62px rgba(0,0,0,.28),
    0 3px 12px rgba(0,0,0,.14);
  overflow:hidden;
  cursor:zoom-out;
  transform-origin:50% 50%;
  will-change:transform,clip-path,opacity,filter;
}
.proof-popover.is-open{display:block}
.proof-popover__stage{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  border-radius:10px;
  background:color-mix(in srgb,var(--solid) 92%,var(--earth) 8%);
}
.proof-popover img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  flex:none;
  border-radius:8px;
  background:transparent;
  cursor:default;
}
@media(max-width:820px){
  .proof-popover{padding:8px;border-radius:14px}
  .proof-popover__stage{border-radius:9px}
}
@media (prefers-reduced-motion:reduce){
  .proof-theatre{transition:none!important}
}


/* AUTO COLLECTOR PROOF RAIL · v93
   The testimonial shelf now travels slowly to the end and reverses.
   Manual swipe/trackpad/keyboard input remains available without a visible scrollbar. */
.home-page .proof-rail-topline{
  justify-content:flex-start;
}
.home-page .proof-rail-controls{
  display:none!important;
}
.home-page .homes .said--verified{
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  scrollbar-width:none!important;
}
.home-page .homes .said--verified::-webkit-scrollbar{
  display:none!important;
}


/* COMPACT STUDIO EDITORIAL SPREAD · v93 */
/* Desktop only: turn the founder media stack into one editorial composition.
   Mobile keeps the existing swipe rail. */
@media (min-width:821px){
  .home-page .studio{
    padding-block:clamp(3.25rem,5vw,5rem)!important;
  }
  .home-page .studio>.wrap{
    grid-template-columns:minmax(0,1.08fr) minmax(28rem,.92fr);
    gap:clamp(2.25rem,4.5vw,4.5rem)!important;
    align-items:start;
  }
  .home-page .studio-copy{
    gap:.82rem;
    align-content:start;
  }
  .home-page .studio-copy>p{
    margin:0;
    max-width:60ch;
    line-height:1.56;
  }
  .home-page .studio-copy>.lede{
    margin-bottom:.08rem;
  }
  .home-page .studio-copy>.studio-light{
    display:block;
    margin:.3rem 0 .15rem;
    padding:.62rem 0 .62rem 1rem;
    border-left:1px solid var(--gold);
    line-height:1.2;
  }
  .home-page .studio-light .ar{
    display:inline-block;
    margin-bottom:.18rem;
    font-size:1.5rem;
    line-height:1.25;
  }
  .home-page .studio-light em{
    font-size:.98rem;
  }
  .home-page .studio-copy>.definition{
    margin-top:.22rem;
  }

  .home-page .studio-side{
    display:grid!important;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    grid-template-rows:auto auto auto;
    gap:.85rem!important;
    align-items:start;
  }
  .home-page .studio-side>*{
    min-width:0;
    margin:0;
  }
  .home-page .studio-side>.frame:nth-of-type(1){
    grid-column:1;
    grid-row:1 / span 2;
  }
  .home-page .studio-side>.frame:nth-of-type(2){
    grid-column:2;
    grid-row:1;
  }
  .home-page .studio-side>.studio-motion{
    grid-column:2;
    grid-row:2;
    margin:0!important;
  }
  .home-page .studio-side>.definition{
    grid-column:1 / -1;
    grid-row:3;
    max-width:none;
    margin:.05rem 0 0!important;
    padding:.72rem 0 .72rem 1rem;
  }

  .home-page .studio-side>.frame:nth-of-type(1)>img{
    display:block;
    width:100%;
    height:clamp(24rem,31vw,31rem);
    object-fit:cover;
    object-position:center;
  }
  .home-page .studio-side>.frame:nth-of-type(2)>img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
  }
  .home-page .studio-side>.studio-motion video{
    aspect-ratio:1 / 1!important;
    object-fit:cover!important;
  }
  .home-page .studio-side figcaption{
    font-size:clamp(.64rem,.62vw,.72rem);
    line-height:1.35;
    letter-spacing:.085em;
  }
  .home-page .studio-motion figcaption{
    display:grid;
    gap:.18rem;
    line-height:1.35;
  }
}


/* UX LAWS AUDIT 01 · journey ending + action hierarchy
   Serial Position / Peak-End / Von Restorff / Similarity / Continuity */
.home-page .gallery-routes .gallery-route-primary{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.68rem .9rem;
  border:1px solid color-mix(in srgb,var(--signal-action) 58%,var(--line));
  border-radius:999px;
  background:var(--signal-action);
  color:var(--solid);
  text-decoration:none;
  font-weight:700;
}
.home-page .gallery-routes .gallery-route-primary:hover,
.home-page .gallery-routes .gallery-route-primary:focus-visible{
  filter:brightness(.96);
  text-decoration:none;
}
.home-page .journey-end{
  padding-block:clamp(3.5rem,7vw,6.5rem);
}
.home-page .journey-end__inner{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);
  gap:clamp(1.5rem,5vw,5rem);
  align-items:end;
}
.home-page .journey-end__copy{
  max-width:48rem;
}
.home-page .journey-end__copy h2{
  margin:.35rem 0 .8rem;
}
.home-page .journey-end__copy .muted{
  max-width:58ch;
  margin:0;
}
.home-page .journey-end__actions{
  display:grid;
  gap:.75rem;
  justify-items:stretch;
}
.home-page .journey-end__actions .btn{
  width:100%;
  min-height:48px;
  justify-content:center;
  text-align:center;
}
.home-page .journey-end__primary{
  box-shadow:0 10px 30px color-mix(in srgb,var(--signal-action) 18%,transparent);
}
@media(max-width:820px){
  .home-page .journey-end__inner{
    grid-template-columns:1fr;
    align-items:start;
  }
  .home-page .journey-end__actions{
    max-width:32rem;
  }
}
@media (prefers-reduced-motion:reduce){
  .home-page .gallery-routes .gallery-route-primary,
  .home-page .journey-end__actions .btn{
    transition:none!important;
  }
}


/* UX LAWS AUDIT 02 · discoverability + interaction grammar
   Discoverability / Affordances / Constraints / Mental Model / Jakob /
   Similarity / Stroop / Fitts / Doherty */
.nav-links a[aria-current="page"],
.footer-legal a[aria-current="page"],
#account-btn[aria-current="page"]{
  text-decoration-thickness:1px;
  text-underline-offset:.42em;
}
.shop-page .cat{
  min-height:44px!important;
}
.shop-page .cat[aria-current="location"]{
  font-weight:650!important;
}
.choice{
  position:relative;
}
.choice[aria-pressed="true"]{
  padding-right:2.15rem;
  font-weight:600;
}
.choice[aria-pressed="true"]::after{
  content:"✓";
  position:absolute;
  right:.7rem;
  top:50%;
  transform:translateY(-50%);
  font-size:.8rem;
  line-height:1;
  font-weight:800;
}
.qty button:disabled{
  opacity:.34;
  cursor:not-allowed;
}
.qty button:disabled:hover{
  color:inherit;
}
@media (prefers-reduced-motion:reduce){
  .choice[aria-pressed="true"]::after{
    transform:translateY(-50%);
  }
}


/* === GLOBAL DISCLOSURE LANGUAGE · ١ / ٠ ===
   Closed disclosures show Arabic one (١): enter/open.
   Open disclosures show ṣifr (٠): return/close.
   Motion is handled in chrome.js so every page uses the same disclosure rhythm. */
details > summary{
  position:relative;
}
details:not(.commission-section-disclosure) > summary::after{
  content:"١"!important;
  font-family:var(--arabic, "Amiri", serif)!important;
  font-size:1.15rem!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:none!important;
  transform:none!important;
}
details:not(.commission-section-disclosure)[open] > summary::after{
  content:"٠"!important;
  transform:none!important;
}
details:not(.commission-section-disclosure) > summary > svg:last-child{
  display:none!important;
}
@media(prefers-reduced-motion:reduce){
  details:not(.commission-section-disclosure) > summary::after{transition:none!important}
}


/* === HOME TESTIMONIAL CONVEYOR · gapless right-to-left === */
.home-page .testimonial-marquee{
  position:relative;
  box-sizing:border-box;
  width:100vw;
  max-width:100vw;
  margin-top:.9rem;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  padding-inline:var(--grid-pad);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
}
.home-page .testimonial-track{
  display:flex;
  align-items:stretch;
  width:max-content;
  min-width:max-content;
  gap:.8rem;
  margin:0;
  padding:0;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.home-page .testimonial-track>.proof-card{
  display:flex;
  flex:0 0 clamp(17.5rem,21vw,21rem);
  flex-direction:column;
  width:auto;
  min-width:0;
  height:auto;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--solid);
}
.home-page .testimonial-track>.proof-card .proof-shot{
  display:grid;
  place-items:center;
  flex:0 0 9rem;
  width:100%;
  min-height:9rem;
  height:9rem;
  max-height:9rem;
  padding:.45rem;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#07090d;
}
.home-page .testimonial-track>.proof-card .proof-shot img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:none;
  object-fit:contain;
  object-position:top center;
}
.home-page .testimonial-track>.proof-card .proof-card__body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  padding:.9rem 1rem 1rem;
}
.home-page .testimonial-track>.proof-card .quote,
.home-page .testimonial-track>.proof-card .delivery-proof{height:100%}
.home-page .testimonial-track>.proof-card .quote p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  font-size:.98rem;
  line-height:1.46;
}
.home-page .testimonial-track>.proof-card .quote footer{
  margin-top:auto;
  padding-top:.65rem;
  border-top:1px solid var(--line);
}
.home-page .testimonial-track>.proof-card .delivery-proof{gap:.5rem}
.home-page .testimonial-track>.proof-card .delivery-proof strong{font-size:1.18rem}
.home-page .testimonial-track>.proof-card .delivery-proof p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.home-page .testimonial-track>.proof-card .delivery-proof__time{margin-top:auto}
/* Collector shots are painted as a background inside a fixed box, not as an
   <img> sized by percentage height inside a grid button: Safari on iPhone left
   those boxes empty. Top of each screenshot shows; the photo stays centred. */
.home-page .testimonial-track>.proof-card .proof-shot{position:relative;display:block}
.home-page .testimonial-track>.proof-card .proof-shot__img{
  position:absolute;
  top:.45rem;
  right:.45rem;
  bottom:.45rem;
  left:.45rem;
  display:block;
  border-radius:6px;
  background-color:#07090d;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top center;
}
.home-page .testimonial-track>.proof-card .proof-shot--quality .proof-shot__img{background-position:center}
@media(max-width:820px){
  .home-page .testimonial-marquee{padding-inline:var(--grid-pad,1rem)}
  .home-page .testimonial-track>.proof-card{flex-basis:min(74vw,17.5rem)}
  .home-page .testimonial-track>.proof-card .proof-shot{
    flex-basis:8.2rem;
    min-height:8.2rem;
    height:8.2rem;
    max-height:8.2rem;
  }
}
@media(prefers-reduced-motion:reduce){
  .home-page .testimonial-marquee{
    overflow-x:auto;
    -webkit-mask-image:none;
    mask-image:none;
    scrollbar-width:none;
  }
  .home-page .testimonial-marquee::-webkit-scrollbar{display:none}
  .home-page .testimonial-track{transform:none!important}
}


/* UX LAWS AUDIT 05 · perceptual hierarchy + content composition
   Similarity / Proximity / Closure / Continuity / Selective Attention /
   Von Restorff / Serial Position / Aesthetic-Usability / Stroop */

/* Narrative sections should read as one journey, not as a stack of equal cards.
   Keep strong panel treatment for transactional/decision surfaces instead. */
.home-page :is(.rawda,.haramayn,.studio,.homes) > .wrap{
  background:transparent!important;
  border-color:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  padding-inline:0!important;
}
.home-page :is(.rawda,.haramayn,.studio,.homes) > .wrap::before{
  display:none!important;
}
.home-page :is(.rawda,.haramayn,.studio,.homes){
  position:relative;
}
.home-page :is(.haramayn,.studio,.homes)::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(var(--wrap),calc(100% - 2*var(--pad)));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line) 86%,transparent);
}
.home-page .rawda > .wrap{
  max-width:min(62rem,calc(100% - 2*var(--pad)));
  text-align:center;
}
.home-page .rawda blockquote{
  margin-inline:auto;
}
.home-page .studio .studio-copy{
  max-width:48rem;
}
.home-page .homes .section-head{
  margin-bottom:clamp(1.5rem,3vw,2.4rem);
}

/* Commerce / enquiry sections retain containment because boundaries matter there. */
.home-page :is(.shop,.commissions,.contact) > .wrap{
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 20px 48px -38px rgba(23,21,18,.24);
}

/* Shop shelves are related catalogue groups: proximity + alignment do the grouping.
   Remove equal heavy cards so products, not containers, hold attention. */
.shop-page .shelf:not(.kraft){
  background:transparent!important;
  border:0!important;
  border-top:1px solid var(--mat-line,var(--line))!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  padding-top:clamp(2.25rem,4vw,3.5rem);
}
.shop-page .shelf:not(.kraft)::before{
  display:none!important;
}
.shop-page .shelf + .shelf{
  margin-top:clamp(1.5rem,3vw,2.5rem);
}
.shop-page .shelf.kraft{
  box-shadow:0 12px 30px -28px rgba(23,21,18,.32);
}

/* Product decision area is the focal point. Supporting proof becomes quieter
   and more continuous after the purchase decision. */
.product-page :is(.reviews > .wrap,#homes-section > .wrap,#related-section > .wrap){
  background:transparent!important;
  border-color:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  padding-inline:0!important;
}
.product-page :is(.reviews > .wrap,#homes-section > .wrap,#related-section > .wrap)::before{
  display:none!important;
}
.product-page :is(.reviews,#homes-section,#related-section){
  position:relative;
}
.product-page :is(.reviews,#homes-section,#related-section)::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(1080px,calc(100% - 2*var(--grid-pad)));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--mat-line,var(--line)) 12%,var(--mat-line,var(--line)) 88%,transparent);
}
.product-page .section-head{
  max-width:46rem;
}

/* Keep salience scarce: supporting buttons stay visually secondary. */
.product-page .reviews .btn.ghost,
.home-page .journey-end__actions .btn.ghost{
  box-shadow:none!important;
}

/* On small screens, preserve open grouping instead of re-introducing card shells. */
@media(max-width:820px){
  .home-page :is(.rawda,.haramayn,.studio,.homes) > .wrap,
  .product-page :is(.reviews > .wrap,#homes-section > .wrap,#related-section > .wrap){
    padding-inline:0!important;
    border-radius:0!important;
  }
}


/* STUDIO MOTION CAPTION · match the surrounding studio cards */
.home-page .studio-motion .studio-motion-caption{
  display:grid!important;
  gap:.28rem!important;
  margin:0!important;
  padding:0!important;
  font-family:var(--serif)!important;
  font-size:clamp(.64rem,.62vw,.72rem)!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:1.35!important;
  letter-spacing:.085em!important;
  text-transform:uppercase!important;
  color:var(--earth)!important;
}
.home-page .studio-motion .studio-motion-caption .motion-kicker{
  display:none!important;
}
.home-page .studio-motion .studio-motion-caption b{
  display:block!important;
  margin:0!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  text-transform:inherit!important;
  color:inherit!important;
}
.home-page .studio-motion .studio-motion-caption .motion-fineprint{
  display:block!important;
  margin:.08rem 0 0!important;
  max-width:44ch!important;
  font-family:var(--serif)!important;
  font-size:.92em!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:1.42!important;
  letter-spacing:.045em!important;
  text-transform:none!important;
  color:var(--earth)!important;
}
.home-page .studio-motion .studio-motion-caption .motion-date{
  display:block!important;
  margin:.06rem 0 0!important;
  font-family:var(--serif)!important;
  font-size:.82em!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:1.35!important;
  letter-spacing:.085em!important;
  text-transform:uppercase!important;
  color:var(--earth)!important;
}


/* =====================================================================
   VISUAL REMEDIATION · AUDITS 01–05
   Stronger visible consequence from the Laws of UX findings.
   Brand identity is preserved; presentation, hierarchy and decision surfaces
   are deliberately re-composed.
   ===================================================================== */

/* ---------- shared action grammar ---------- */
body :is(.btn,.nav-enquire,.contact-choice){
  border-radius:12px;
}
body .btn{
  font-family:var(--ui);
  font-size:.76rem;
  font-weight:650;
  letter-spacing:.08em;
}
body .btn.ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
  box-shadow:none;
}
body .btn.ghost:hover{
  background:color-mix(in srgb,var(--solid) 72%,transparent);
  border-color:var(--gold-soft);
  color:var(--ink);
}
body :is(#basket-btn,.to-basket,.journey-end__primary){
  background:var(--signal-action)!important;
  border-color:var(--signal-action)!important;
  color:var(--signal-action-ink)!important;
  box-shadow:0 14px 30px -20px color-mix(in srgb,var(--signal-action) 52%,transparent)!important;
}

/* ---------- AUDIT 01 · homepage journey becomes visibly staged ---------- */
.home-page .reorchestrate{
  position:relative;
  padding-block:clamp(5rem,9vw,8rem);
  background:
    radial-gradient(circle at 76% 24%,color-mix(in srgb,var(--gold-pale) 66%,transparent),transparent 24rem),
    linear-gradient(180deg,color-mix(in srgb,var(--ivory-deep) 54%,transparent),transparent);
}
.home-page .reorchestrate::before{
  content:"01 · See the idea";
  position:absolute;
  top:1.35rem;
  left:max(var(--pad),calc((100vw - var(--wrap))/2));
  font-family:var(--ui);
  font-size:.66rem;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--earth);
}
.home-page .reorchestrate-grid{
  grid-template-columns:minmax(17rem,.8fr) minmax(0,1.2fr)!important;
  gap:clamp(2.5rem,7vw,7rem)!important;
  align-items:center;
}
.home-page .reorchestrate-copy{
  align-content:center;
}
.home-page .reorchestrate-copy h2{
  font-size:clamp(2.6rem,5vw,4.8rem)!important;
  line-height:.96!important;
  letter-spacing:-.045em!important;
  max-width:11ch!important;
}
.home-page .reorchestrate-copy .lede{
  max-width:36rem!important;
}
.home-page .meaning-switcher{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem!important;
  margin-top:1rem;
}
.home-page .meaning-choice{
  position:relative;
  min-height:52px!important;
  padding:.75rem .9rem!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--solid) 74%,transparent)!important;
  text-align:left;
}
.home-page .meaning-choice[aria-pressed="true"]{
  border-color:var(--green)!important;
  background:var(--green-tint)!important;
  color:var(--green)!important;
  box-shadow:0 10px 24px -20px color-mix(in srgb,var(--green) 48%,transparent);
}
.home-page .meaning-choice[aria-pressed="true"]::after{
  content:"✓";
  position:absolute;
  right:.75rem;
  top:50%;
  transform:translateY(-50%);
  font-weight:800;
}
.home-page .room-demo{
  transform:translateY(1rem);
}
.home-page .room-demo-wall{
  min-height:clamp(28rem,54vw,42rem)!important;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 38px 90px -54px rgba(24,22,18,.5);
}

/* Format choices become a strong editorial trio rather than three equal cards. */
.home-page .ways-to-live{
  position:relative;
  padding-block:clamp(5rem,9vw,8rem);
}
.home-page .ways-to-live::before{
  content:"02 · Choose how it lives";
  position:absolute;
  top:1.35rem;
  left:max(var(--pad),calc((100vw - var(--wrap))/2));
  font-family:var(--ui);
  font-size:.66rem;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--earth);
}
.home-page .ways-to-live .section-head{
  max-width:52rem;
}
.home-page .ways-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(.9rem,2vw,1.5rem)!important;
  align-items:stretch;
}
.home-page .way-card{
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  overflow:hidden;
  background:var(--solid);
  box-shadow:0 18px 46px -38px rgba(24,22,18,.42);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.home-page a.way-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold-soft)!important;
  box-shadow:0 28px 54px -38px rgba(24,22,18,.5);
}
.home-page .way-card .way-visual{
  min-height:clamp(14rem,22vw,22rem);
}
.home-page .way-copy{
  padding:clamp(1.25rem,2.5vw,2rem)!important;
}
.home-page .way-copy h3{
  font-size:clamp(1.55rem,2.4vw,2.25rem);
}
.home-page .way-card--future{
  opacity:.72;
  box-shadow:none;
}

/* Exhibition becomes a distinct gallery chapter. */
.home-page .haramayn{
  position:relative;
  padding-block:clamp(6rem,10vw,9rem);
  background:
    radial-gradient(circle at 15% 10%,rgba(180,147,74,.09),transparent 28rem),
    color-mix(in srgb,var(--midnight) 96%,#18242b 4%);
  color:#F3F0E9;
}
.home-page .haramayn::before{
  content:"03 · Enter the exhibition";
  position:absolute;
  top:1.6rem;
  left:max(var(--pad),calc((100vw - var(--wrap))/2));
  font-family:var(--ui);
  font-size:.66rem;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(243,240,233,.56);
}
.home-page .haramayn > .wrap{
  color:inherit;
}
.home-page .haramayn :is(h2,h3,b){
  color:#F7F4ED;
}
.home-page .haramayn :is(.eyebrow,.room-n){
  color:#D7BE79;
}
.home-page .haramayn :is(.muted,.sites,.room-head p,figcaption span){
  color:rgba(243,240,233,.66)!important;
}
.home-page .haramayn .section-head{
  max-width:60rem;
}
.home-page .haramayn .section-head h2{
  font-size:clamp(3rem,6.4vw,6.2rem);
  line-height:.92;
  letter-spacing:-.045em;
}
.home-page .haramayn .sites{
  margin-top:1.3rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.home-page .haramayn .room-position{
  border-color:rgba(255,255,255,.16);
  background:rgba(9,15,19,.7);
}
.home-page .haramayn .room-position a{
  color:rgba(255,255,255,.58);
}
.home-page .haramayn .room-position a[aria-current]{
  color:#E4C77E;
}
.home-page .haramayn .room{
  padding-block:clamp(2.5rem,5vw,4.2rem);
  border-top:1px solid rgba(255,255,255,.12);
}
.home-page .haramayn .room-wall .art{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 24px 56px -38px rgba(0,0,0,.78);
}
.home-page .haramayn .gallery-routes{
  align-items:center;
  margin-top:2.4rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.home-page .haramayn .gallery-routes a{
  color:#F4F1E9;
  border-bottom-color:rgba(255,255,255,.18);
}
.home-page .haramayn .gallery-routes .gallery-route-primary{
  border-radius:12px;
  background:#F0E8D5;
  border-color:#F0E8D5;
  color:#15242B;
}

/* Understanding + maker read as editorial pages, not utility panels. */
.home-page #meaning{
  padding-block:clamp(6rem,11vw,10rem);
}
.home-page #meaning .wrap{
  max-width:70rem;
}
.home-page #meaning h2{
  max-width:13ch;
  font-size:clamp(3rem,6vw,5.8rem);
  line-height:.94;
  letter-spacing:-.04em;
}
.home-page #meaning > .wrap > p:not(.eyebrow){
  margin-left:auto;
  max-width:42rem;
  font-size:clamp(1.1rem,1.7vw,1.45rem);
  line-height:1.6;
}
.home-page .studio{
  padding-block:clamp(6rem,10vw,9rem);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ivory-deep) 38%,transparent));
}
.home-page .studio .wrap{
  grid-template-columns:minmax(0,1.05fr) minmax(18rem,.72fr)!important;
  gap:clamp(3rem,8vw,8rem)!important;
  align-items:start;
}
.home-page .studio-copy h2{
  font-size:clamp(3rem,5.5vw,5.2rem);
  line-height:.95;
  letter-spacing:-.04em;
  max-width:11ch;
}
.home-page .studio-copy > p{
  max-width:43rem;
}
.home-page .studio-side{
  position:sticky;
  top:7rem;
}
.home-page .studio-side .frame{
  border-radius:20px;
  overflow:hidden;
}

/* Shop is unmistakably a commerce chapter. */
.home-page .shop{
  padding-block:clamp(5.5rem,9vw,8rem);
  background:var(--mat-page-alt,var(--ivory-deep));
}
.home-page .shop > .wrap{
  border-radius:28px!important;
  border-color:var(--line)!important;
  background:var(--solid)!important;
  padding:clamp(1.4rem,4vw,3.5rem)!important;
  box-shadow:0 28px 64px -50px rgba(23,21,18,.48)!important;
}
.home-page .shop-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2rem;
  align-items:end;
}
.home-page .shop-head .section-head{
  margin-bottom:0;
}
.home-page .shop-head h2{
  font-size:clamp(2.7rem,5vw,4.6rem);
  line-height:.96;
  letter-spacing:-.04em;
}
.home-page .shop .product-grid{
  margin-top:2.4rem;
  gap:1rem!important;
}
.home-page .shop .product{
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  overflow:hidden;
  background:var(--mat-raised,var(--solid));
  box-shadow:none!important;
}
.home-page .shop .product:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 44px -36px rgba(23,21,18,.5)!important;
}
.home-page .shop-entry{
  text-align:right!important;
}

/* Commission chapter gets a visibly different warm decision surface. */
.home-page .commissions{
  padding-block:clamp(6rem,10vw,9rem);
  background:
    radial-gradient(circle at 82% 20%,rgba(180,147,74,.12),transparent 28rem),
    color-mix(in srgb,var(--kraft) 34%,var(--ivory));
}
.home-page .commissions > .wrap{
  border:0!important;
  border-radius:30px!important;
  background:color-mix(in srgb,var(--solid) 66%,transparent)!important;
  box-shadow:0 30px 74px -54px rgba(47,35,18,.5)!important;
  padding:clamp(1.5rem,4vw,3.5rem)!important;
}
.home-page .comm-copy h2{
  font-size:clamp(2.8rem,5vw,4.8rem);
  line-height:.96;
  letter-spacing:-.04em;
  max-width:11ch;
}
.home-page .form{
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:var(--solid)!important;
  box-shadow:0 24px 50px -42px rgba(23,21,18,.48);
}
.home-page .contact-choice{
  min-height:52px;
}
.home-page .journey-end{
  margin-top:0;
  padding-block:clamp(5rem,9vw,8rem)!important;
  background:var(--midnight);
  color:#F2EFE7;
}
.home-page .journey-end h2{
  color:#F8F5ED;
  font-size:clamp(3rem,6vw,5.5rem);
  line-height:.94;
  letter-spacing:-.04em;
}
.home-page .journey-end .eyebrow{color:#D8BD77}
.home-page .journey-end .muted{color:rgba(242,239,231,.7)}
.home-page .journey-end__primary{
  background:#EEE5D1!important;
  border-color:#EEE5D1!important;
  color:#14242B!important;
}
.home-page .journey-end__actions .ghost{
  color:#F3EFE7;
  border-color:rgba(255,255,255,.26);
}
.home-page .journey-end__actions .ghost:hover{
  color:#fff;
  background:rgba(255,255,255,.07);
}

/* ---------- AUDIT 02 · interaction grammar is visibly consistent ---------- */
.nav-links a[aria-current="page"]{
  position:relative;
  color:var(--green);
  text-decoration:none!important;
}
.nav-links a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:.1rem;
  right:.1rem;
  bottom:.38rem;
  height:2px;
  border-radius:999px;
  background:var(--gold);
}
.shop-page .cat{
  border-radius:999px;
  transition:background .2s,border-color .2s,color .2s;
}
.shop-page .cat[aria-current="location"]{
  background:var(--green)!important;
  border-color:var(--green)!important;
  color:var(--marble)!important;
  text-decoration:none!important;
}

/* ---------- AUDIT 03 · product page becomes a clear 3-stage decision ---------- */
.product-page .pdp{
  grid-template-columns:minmax(0,1.35fr) minmax(22rem,.78fr)!important;
  gap:clamp(2.5rem,6vw,6.5rem)!important;
}
.product-page .buy{
  position:sticky!important;
  top:5.8rem!important;
  padding:clamp(1.5rem,2.5vw,2.25rem)!important;
  border:1px solid var(--mat-line,var(--line))!important;
  border-radius:24px!important;
  background:color-mix(in srgb,var(--mat-raised,var(--solid)) 94%,transparent)!important;
  box-shadow:0 28px 64px -46px rgba(23,34,41,.45)!important;
}
.product-page .buy h1{
  max-width:13ch!important;
  font-size:clamp(2.4rem,4.3vw,4.1rem)!important;
  line-height:.95!important;
  letter-spacing:-.04em!important;
}
.product-page #options{
  counter-reset:decision-step;
  margin-top:.6rem!important;
  gap:1.15rem!important;
}
.product-page #options .opt{
  counter-increment:decision-step;
  padding-top:1rem;
  border-top:1px solid var(--mat-line,var(--line));
}
.product-page #options .opt-label{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.55rem;
  align-items:center;
}
.product-page #options .opt-label::before{
  content:counter(decision-step);
  display:grid;
  place-items:center;
  width:1.65rem;
  height:1.65rem;
  border-radius:999px;
  background:var(--mat-soft,var(--green-tint));
  color:var(--green);
  font-size:.7rem;
  letter-spacing:0;
}
.product-page #options .opt-label .pick{
  grid-column:3;
}
.product-page .choices{
  gap:.6rem!important;
}
.product-page .choice{
  min-height:70px!important;
  border-radius:14px!important;
  padding:.8rem .85rem!important;
  background:var(--mat-raised,var(--solid))!important;
}
.product-page .choice[aria-pressed="true"]{
  border:2px solid var(--green)!important;
  background:var(--green-tint)!important;
  color:var(--green)!important;
  box-shadow:0 12px 28px -22px color-mix(in srgb,var(--green) 48%,transparent)!important;
}
.product-page .choice[aria-pressed="true"]::after{
  width:1.35rem;
  height:1.35rem;
  display:grid;
  place-items:center;
  right:.65rem!important;
  border-radius:999px;
  background:var(--green);
  color:white;
}
.product-page .selection-summary{
  margin-top:.8rem!important;
  padding:1rem!important;
  border:1px solid var(--mat-line,var(--line))!important;
  border-radius:14px;
  background:var(--mat-page-alt,var(--ivory-deep));
}
.product-page #basket-btn,
.product-page #cta-enquire{
  min-height:56px!important;
  border-radius:14px!important;
}
.product-page .made,
.product-page .ship,
.product-page .assure{
  opacity:.88;
}
.product-page .pdp-gallery{
  top:6rem!important;
}

/* Supporting proof deliberately drops in visual weight after purchase. */
.product-page :is(.reviews,#homes-section,#related-section){
  padding-block:clamp(4rem,7vw,6.5rem);
}
.product-page :is(.reviews,#homes-section,#related-section) h2{
  font-size:clamp(2.1rem,4vw,3.6rem);
}

/* ---------- AUDIT 04 · basket/checkout visibly communicate progress ---------- */
.basket-page main.basket{
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mat-soft) 40%,transparent));
}
.basket-page .line{
  border-radius:18px!important;
}
.basket-page .line .art{
  border-radius:12px!important;
}
.basket-page .summary{
  border-radius:24px!important;
  background:var(--mat-raised,var(--solid))!important;
}
.basket-page .summary::before{
  content:"Order summary";
  display:block;
  font-family:var(--ui);
  font-size:.68rem;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--earth);
}
.basket-page #checkout{
  min-height:56px!important;
}
.checkout .co-progress{
  margin-bottom:1.5rem!important;
}
.checkout .co-progress ol{
  position:relative;
  gap:0!important;
  padding:.8rem 1rem!important;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--solid) 72%,transparent);
}
.checkout .co-progress li{
  position:relative;
  justify-content:center;
  text-align:center;
}
.checkout .co-progress li:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  left:calc(50% + 3.1rem);
  right:calc(-50% + 3.1rem);
  height:1px;
  background:var(--line);
}
.checkout .co-progress li.is-done:not(:last-child)::after{
  background:color-mix(in srgb,var(--green) 48%,var(--line));
}
.checkout .co-order-card,
.checkout .co-details-card,
.checkout .co-payment-card{
  border-radius:22px!important;
}
.checkout .co-payment-card{
  box-shadow:0 26px 60px -48px rgba(23,21,18,.48);
}
.checkout #pay{
  min-height:58px!important;
  border-radius:14px!important;
}

/* ---------- AUDIT 05 · hierarchy and composition ---------- */
.shop-page .shop-head{
  padding-block:clamp(2.5rem,5vw,4.5rem)!important;
}
.shop-page .shop-head h1{
  max-width:11ch;
  font-size:clamp(3rem,6vw,5.6rem);
  line-height:.93;
  letter-spacing:-.045em;
}
.shop-page .cats{
  position:sticky;
  top:4.6rem;
  z-index:8;
  padding:.55rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--solid) 88%,transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 24px -22px rgba(23,21,18,.4);
}
.shop-page .shelf{
  padding-block:clamp(3.5rem,6vw,5.5rem)!important;
}
.shop-page .shelf-head{
  max-width:54rem;
  margin-bottom:clamp(1.5rem,3vw,2.5rem)!important;
}
.shop-page .shelf-head h2{
  font-size:clamp(2.2rem,4.4vw,4rem);
  line-height:.96;
  letter-spacing:-.035em;
}
.shop-page .card{
  border-radius:18px!important;
}
.shop-page .card .art{
  border-radius:16px!important;
  overflow:hidden;
}
.shop-page .card h3{
  font-size:1.08rem;
}
.shop-page .archive-shelf{
  border:0!important;
  border-radius:26px!important;
  padding:clamp(1.5rem,4vw,3rem)!important;
  background:var(--midnight)!important;
  color:#F4F0E7;
}
.shop-page .archive-shelf :is(h2,h3,b){color:#F7F3EB}
.shop-page .archive-shelf :is(.eyebrow,.muted){color:rgba(247,243,235,.68)!important}

/* Responsive preservation */
@media(max-width:900px){
  .home-page .reorchestrate-grid,
  .home-page .studio .wrap{
    grid-template-columns:1fr!important;
  }
  .home-page .studio-side{
    position:static;
  }
  .home-page .ways-grid{
    grid-template-columns:1fr!important;
  }
  .product-page .buy{
    position:relative!important;
    top:auto!important;
  }
}
@media(max-width:600px){
  .home-page :is(.reorchestrate,.ways-to-live,.haramayn,.studio,.shop,.commissions,.journey-end){
    padding-block:3.5rem!important;
  }
  .home-page :is(.reorchestrate,.ways-to-live,.haramayn)::before{
    top:.75rem;
    left:var(--grid-pad,1rem);
  }
  .home-page .reorchestrate-copy h2,
  .home-page .haramayn .section-head h2,
  .home-page #meaning h2,
  .home-page .studio-copy h2,
  .home-page .shop-head h2,
  .home-page .comm-copy h2,
  .home-page .journey-end h2{
    font-size:clamp(2.35rem,11vw,3.4rem)!important;
    max-width:none!important;
  }
  .home-page .meaning-switcher{
    grid-template-columns:1fr;
  }
  .home-page .ways-grid{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(82vw,19rem)!important;
  }
  .home-page .way-card .way-visual{
    min-height:16rem;
  }
  .home-page .haramayn{
    margin-inline:0;
  }
  .home-page .studio-side{
    display:grid!important;
    grid-auto-flow:column;
  }
  .home-page .shop-head{
    grid-template-columns:1fr;
  }
  .home-page .shop > .wrap,
  .home-page .commissions > .wrap{
    border-radius:20px!important;
    padding:1rem!important;
  }
  .product-page .buy{
    padding:1rem!important;
    border-radius:18px!important;
  }
  .product-page #options .opt-label{
    grid-template-columns:auto 1fr;
  }
  .product-page #options .opt-label .pick{
    grid-column:2;
    text-align:left;
    margin-left:0;
  }
  .checkout .co-progress li:not(:last-child)::after{display:none}
  .checkout .co-progress ol{
    grid-template-columns:1fr!important;
    border-radius:14px;
  }
  .checkout .co-progress li{
    justify-content:flex-start;
    text-align:left;
  }
  .shop-page .cats{
    top:4.2rem;
    border-radius:16px;
  }
}


.product-page .config-intro{
  display:grid;
  gap:.35rem;
  margin-top:.75rem;
  padding-top:1rem;
  border-top:1px solid var(--mat-line,var(--line));
}
.product-page .config-intro>span{
  font-family:var(--ui);
  font-size:.64rem;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green);
}
.product-page .config-intro h2{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.55rem,2.2vw,2rem);
  line-height:1.05;
  letter-spacing:-.02em;
}
.product-page .config-intro p{
  margin:0;
  max-width:38ch;
  color:var(--mat-muted,var(--earth));
  font-size:.9rem;
  line-height:1.5;
}


/* STUDIO MOTION CARD · same navy framed-card shell as neighbouring studio cards */
.home-page .studio-side > .studio-motion.frame{
  display:grid!important;
  gap:.6rem!important;
  margin:0!important;
  padding:clamp(.5rem,1.4vw,1rem)!important;
  background:var(--solid)!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  box-shadow:var(--frame-shadow)!important;
  overflow:hidden!important;
}
.home-page .studio-side > .studio-motion.frame video{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
  object-fit:cover!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#111!important;
}
.home-page .studio-side > .studio-motion.frame .studio-motion-caption{
  display:grid!important;
  gap:.28rem!important;
  margin:0!important;
  padding:0!important;
  font-family:var(--serif)!important;
  font-size:clamp(.64rem,.62vw,.72rem)!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:1.35!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  color:var(--earth)!important;
}
.home-page .studio-side > .studio-motion.frame .motion-kicker{
  display:none!important;
}
.home-page .studio-side > .studio-motion.frame .studio-motion-caption b{
  display:block!important;
  margin:0!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  text-transform:inherit!important;
  color:inherit!important;
}
.home-page .studio-side > .studio-motion.frame .motion-fineprint{
  display:block!important;
  margin:.12rem 0 0!important;
  font-family:var(--serif)!important;
  font-size:.82em!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:1.42!important;
  letter-spacing:.035em!important;
  text-transform:none!important;
  color:var(--earth)!important;
}
.home-page .studio-side > .studio-motion.frame .motion-date{
  display:block!important;
  margin:.08rem 0 0!important;
  font-family:var(--serif)!important;
  font-size:.72em!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:1.35!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  color:var(--earth)!important;
  opacity:.88;
}


/* =====================================================================
   VISUAL CALIBRATION PASS · post-remediation
   Corrects overscale, clipping, image crop, copy alignment and the journey-end
   regression identified during visual review.
   ===================================================================== */

/* Re-orchestrate: bring the scene back inside the page rhythm. */
.home-page .reorchestrate{
  overflow:hidden;
}
.home-page .reorchestrate-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;
  gap:clamp(1.75rem,4vw,3.75rem)!important;
}
.home-page .reorchestrate-copy{
  min-width:0;
}
.home-page .reorchestrate-copy h2{
  max-width:12ch!important;
  font-size:clamp(2.5rem,4.35vw,4rem)!important;
}
.home-page .room-demo{
  transform:none!important;
  min-width:0;
  max-width:100%;
}
.home-page .room-demo-wall{
  width:100%!important;
  max-width:100%!important;
  min-height:clamp(22rem,39vw,30rem)!important;
  aspect-ratio:4/3;
  overflow:hidden!important;
}
.home-page .room-demo-frame{
  max-width:min(44%,15.5rem)!important;
}

/* Ways-to-live: reduce the cards by ~15% and restore consistent proportions. */
.home-page .ways-to-live .wrap{
  overflow:visible;
}
.home-page .ways-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(.8rem,1.6vw,1.15rem)!important;
  align-items:start!important;
}
.home-page .way-card{
  align-self:start;
  min-width:0;
}
.home-page .way-card .way-visual{
  min-height:0!important;
  aspect-ratio:4/3!important;
}
.home-page .way-visual{
  overflow:hidden;
  background:var(--ivory-deep);
}
.home-page .way-visual > img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.home-page .way-stack{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:.45rem!important;
  padding:clamp(.9rem,1.8vw,1.35rem)!important;
}
.home-page .way-stack > img{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  height:auto!important;
  max-height:100%!important;
  object-fit:contain!important;
  filter:none!important;
}
.home-page .digital-preview{
  min-height:0!important;
  aspect-ratio:4/3!important;
}
.home-page .way-copy{
  display:grid!important;
  align-content:start!important;
  gap:.45rem!important;
  min-height:0!important;
  padding:1rem 1.05rem 1.15rem!important;
}
.home-page .way-copy :is(h3,p,.way-link,.eyebrow){
  margin:0!important;
}
.home-page .way-copy h3{
  font-size:clamp(1.35rem,2vw,1.8rem)!important;
  line-height:1.05;
}
.home-page .way-copy p{
  min-height:0!important;
  line-height:1.45;
}
.home-page .way-link{
  margin-top:.35rem!important;
}

/* Exhibition cards: ~15% smaller, no forced image crop. */
.home-page .exhibit .room-wall{
  --room-card:clamp(11.5rem,17vw,15.75rem)!important;
}
.home-page .exhibit .room-track{
  gap:clamp(.75rem,1.35vw,1rem)!important;
}
.home-page .exhibit .room-wall .art{
  padding:7%!important;
}
.home-page .exhibit .room-wall .art img{
  object-fit:contain!important;
  object-position:center!important;
  background:var(--solid);
}
.home-page .exhibit .room-head{
  min-width:0;
}
.home-page .exhibit .room-head p{
  max-width:20ch!important;
}
.home-page .exhibit .room-wall figcaption{
  min-width:0;
}

/* Studio media: stop irregular stretching and keep copy/cards aligned. */
.home-page .studio .wrap{
  grid-template-columns:minmax(0,1.12fr) minmax(17rem,.62fr)!important;
  gap:clamp(2.4rem,5vw,5rem)!important;
}
.home-page .studio-side{
  width:100%;
  max-width:30rem;
  justify-self:end;
}
.home-page .studio-side > *{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.home-page .studio-side .frame{
  padding:.72rem!important;
}
.home-page .studio-side .frame > img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
}
.home-page .studio-side .studio-motion video{
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:contain!important;
}
.home-page .studio-side figcaption{
  min-width:0;
  overflow-wrap:anywhere;
}
.home-page .studio-side .definition{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* Home shop cards: keep media proportions clean and copy aligned. */
.home-page .shop .product{
  min-width:0;
}
.home-page .shop .product .tile{
  aspect-ratio:4/3!important;
  min-height:0!important;
}
.home-page .shop .product .tile img{
  object-fit:contain!important;
  object-position:center!important;
}
.home-page .shop .product-body{
  display:grid;
  align-content:start;
  gap:.45rem;
}
.home-page .shop .product-body > *{
  margin-top:0!important;
}

/* Closing CTA: reset accidental blank/white layout and keep it compact. */
.home-page .journey-end{
  position:relative;
  isolation:isolate;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  padding-block:clamp(3.75rem,6vw,5.5rem)!important;
  background:#101D24!important;
  color:#F2EFE7!important;
}
.home-page .journey-end::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 78% 15%,rgba(180,147,74,.12),transparent 24rem),
    linear-gradient(180deg,#101D24,#0D181E);
}
.home-page .journey-end__inner{
  width:min(var(--wrap),100% - 2*var(--pad))!important;
  max-width:var(--wrap)!important;
  min-height:0!important;
  grid-template-columns:minmax(0,1fr) minmax(16rem,.55fr)!important;
  gap:clamp(1.5rem,4vw,3.5rem)!important;
  align-items:center!important;
}
.home-page .journey-end__copy{
  max-width:44rem!important;
}
.home-page .journey-end__copy h2{
  margin:.3rem 0 .7rem!important;
  color:#F8F5ED!important;
  font-size:clamp(2.6rem,4.8vw,4.4rem)!important;
  line-height:.96!important;
}
.home-page .journey-end__copy .muted{
  color:rgba(242,239,231,.72)!important;
}
.home-page .journey-end__actions{
  align-self:center!important;
  width:100%;
  max-width:24rem;
  justify-self:end;
}
.home-page .journey-end__actions .btn{
  min-height:52px!important;
}
.home-page .journey-end__primary{
  background:#EEE5D1!important;
  border-color:#EEE5D1!important;
  color:#14242B!important;
}
.home-page .journey-end__actions .ghost{
  color:#F3EFE7!important;
  border-color:rgba(255,255,255,.28)!important;
  background:transparent!important;
}

/* Keep the decorative divider outside the CTA from creating a visual white break. */
.home-page .journey-end + .rule{
  margin-block:0;
  padding-block:1rem;
  background:#101D24;
}
.home-page .journey-end + .rule::before,
.home-page .journey-end + .rule::after{
  background:linear-gradient(90deg,transparent,rgba(216,189,119,.38),transparent);
}

/* Tablet calibration. */
@media(max-width:900px){
  .home-page .ways-grid{
    grid-template-columns:1fr!important;
  }
  .home-page .studio .wrap{
    grid-template-columns:1fr!important;
  }
  .home-page .studio-side{
    position:static!important;
    max-width:none;
    justify-self:stretch;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
  }
  .home-page .journey-end__inner{
    grid-template-columns:1fr!important;
  }
  .home-page .journey-end__actions{
    justify-self:start;
    max-width:30rem;
  }
}

/* Mobile keeps the existing swipe grammar, but uses the calibrated sizes. */
@media(max-width:600px){
  .home-page .reorchestrate-grid{
    grid-template-columns:1fr!important;
    gap:1.25rem!important;
  }
  .home-page .room-demo-wall{
    min-height:0!important;
    aspect-ratio:4/3!important;
  }
  .home-page .ways-grid{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(72vw,16rem)!important;
    gap:.75rem!important;
  }
  .home-page .way-card .way-visual{
    aspect-ratio:4/3!important;
    min-height:0!important;
  }
  .home-page .exhibit .room-wall{
    --room-card:min(65vw,16rem)!important;
  }
  .home-page .studio-side{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(68vw,16rem)!important;
    overflow-x:auto;
    gap:.75rem!important;
  }
  .home-page .journey-end{
    padding-block:3.25rem!important;
  }
  .home-page .journey-end__copy h2{
    font-size:clamp(2.3rem,10vw,3.1rem)!important;
  }
}


/* =====================================================================
   VISUAL CALIBRATION PATCH 02
   Restores collection stack, fixes light-mode contrast, gives hover effects
   breathing room, removes image-edge rims, and returns ~5% size from the prior
   15% reduction (net ~10% reduction).
   ===================================================================== */

/* 1) Light mode: do not inherit the dark-gallery text palette. */
:root:not([data-theme="dark"]) .home-page .haramayn{
  background:
    radial-gradient(circle at 15% 10%,rgba(180,147,74,.07),transparent 28rem),
    var(--marble)!important;
  color:var(--ink)!important;
}
:root:not([data-theme="dark"]) .home-page .haramayn :is(h2,h3,b){
  color:var(--ink)!important;
}
:root:not([data-theme="dark"]) .home-page .haramayn :is(.muted,.sites,.room-head p,figcaption span){
  color:var(--earth)!important;
}
:root:not([data-theme="dark"]) .home-page .haramayn :is(.eyebrow,.room-n){
  color:var(--gold)!important;
}
:root:not([data-theme="dark"]) .home-page .haramayn .sites,
:root:not([data-theme="dark"]) .home-page .haramayn .room,
:root:not([data-theme="dark"]) .home-page .haramayn .gallery-routes{
  border-color:var(--line)!important;
}
:root:not([data-theme="dark"]) .home-page .haramayn .room-position{
  background:color-mix(in srgb,var(--solid) 92%,transparent)!important;
  border-color:var(--line)!important;
}
:root:not([data-theme="dark"]) .home-page .haramayn .room-position a{
  color:var(--earth)!important;
}
:root:not([data-theme="dark"]) .home-page .haramayn .room-position a[aria-current]{
  color:var(--green)!important;
}
:root:not([data-theme="dark"]) .home-page .haramayn .gallery-routes a{
  color:var(--ink)!important;
  border-bottom-color:var(--line)!important;
}
:root:not([data-theme="dark"]) .home-page .haramayn .gallery-routes .gallery-route-primary{
  background:var(--green)!important;
  border-color:var(--green)!important;
  color:var(--marble)!important;
}

/* 2) Return ~5% size to the "ways" cards: net reduction is now about 10%. */
.home-page .ways-to-live > .wrap{
  width:min(1240px,calc(100% - 2 * var(--pad)))!important;
  max-width:none!important;
}
.home-page .ways-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(.85rem,1.45vw,1.05rem)!important;
}
.home-page .way-card .way-visual{
  aspect-ratio:1.27 / 1!important;
}

/* 3) Hover treatment gets breathing room instead of being cut by the card shell. */
.home-page .way-card{
  overflow:visible!important;
}
.home-page .way-visual{
  overflow:hidden!important;
  border-radius:20px 20px 0 0;
}
.home-page .way-copy{
  border-radius:0 0 20px 20px;
}
.home-page a.way-card:hover,
.home-page a.way-card:focus-visible{
  z-index:3;
}
.home-page a.way-card:hover .way-visual,
.home-page a.way-card:focus-visible .way-visual{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 42%,transparent),
             0 20px 44px -30px color-mix(in srgb,var(--gold) 48%,transparent);
}

/* 4) Full-bleed image tolerance: remove pale rims without aggressive cropping. */
.home-page .way-visual:not(.way-stack) > img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:scale(1.035)!important;
  transform-origin:center!important;
}
/* 5) Restore the original slightly fanned/diagonal collection stack. */
.home-page .way-stack{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  grid-template-columns:1fr!important;
  padding:0!important;
  overflow:hidden!important;
  background:var(--green-tint)!important;
}
.home-page .way-stack > img{
  position:absolute!important;
  inset:auto!important;
  width:32%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:3/4!important;
  object-fit:cover!important;
  object-position:center!important;
  border:6px solid var(--solid)!important;
  box-shadow:var(--frame-shadow)!important;
  filter:none!important;
}
.home-page .way-stack > img:nth-child(1){
  z-index:1!important;
  transform:translateX(-64%) rotate(-5deg)!important;
}
.home-page .way-stack > img:nth-child(2){
  z-index:3!important;
  transform:translateX(0) rotate(0deg)!important;
}
.home-page .way-stack > img:nth-child(3){
  z-index:2!important;
  transform:translateX(64%) rotate(5deg)!important;
}

/* Keep dark mode intentionally dark; the contrast fix above only affects light. */
:root[data-theme="dark"] .home-page .haramayn{
  background:
    radial-gradient(circle at 15% 10%,rgba(180,147,74,.09),transparent 28rem),
    color-mix(in srgb,var(--midnight) 96%,#18242b 4%)!important;
  color:#F3F0E9!important;
}

/* Mobile/tablet: retain swipe behavior and proportional growth without overflow. */
@media(max-width:900px){
  .home-page .ways-to-live > .wrap{
    width:min(var(--wrap),calc(100% - 2 * var(--pad)))!important;
  }
}
@media(max-width:600px){
  .home-page .ways-grid{
    grid-auto-columns:min(76vw,17rem)!important;
  }
  .home-page .way-card .way-visual{
    aspect-ratio:4/3!important;
  }
  .home-page .way-stack > img{
    width:34%!important;
  }
}


/* EXHIBITION ART RIM CLEANUP · live visual QA
   Remove the bright seam around artwork while retaining the dark rounded frame. */
.home-page .exhibit .room-wall .art{
  position:relative;
  overflow:hidden!important;
  padding:6%!important;
  background:color-mix(in srgb,var(--midnight) 84%,#000 16%)!important;
  border-color:color-mix(in srgb,var(--line) 72%,transparent)!important;
}
.home-page .exhibit .room-wall .art img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  transform:scale(1.025)!important;
  transform-origin:center!important;
}
:root:not([data-theme="dark"]) .home-page .exhibit .room-wall .art{
  background:color-mix(in srgb,var(--ink) 8%,var(--solid) 92%)!important;
}


/* EXHIBITION CARD THEME LOCK · keep the card shell in HIMMA's dark gallery tone
   in both themes; only surrounding page copy changes for light-mode contrast. */
.home-page .exhibit .room-wall .art,
:root:not([data-theme="dark"]) .home-page .exhibit .room-wall .art,
:root[data-theme="dark"] .home-page .exhibit .room-wall .art{
  background:#101D24!important;
  border-color:rgba(216,189,119,.18)!important;
}
.home-page .exhibit .room-wall .art img{
  border-radius:10px;
}


/* =====================================================================
   UX LAWS AUDIT 06 · performance / feedback / accessibility / recovery
   ===================================================================== */

/* Busy controls must communicate work immediately without changing layout. */
:is(#checkout,#pay,#basket-btn,#form-submit,[data-busy-ui])[aria-busy="true"]{
  position:relative;
  cursor:wait!important;
}
:is(#checkout,#pay,#basket-btn,#form-submit,[data-busy-ui])[aria-busy="true"]::after{
  content:"";
  display:inline-block;
  width:.82rem;
  height:.82rem;
  margin-left:.55rem;
  border:1.5px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  vertical-align:-.08rem;
  animation:himma-busy-spin .7s linear infinite;
}
@keyframes himma-busy-spin{to{transform:rotate(360deg)}}

/* Recovery messages should look like recovery states, not decorative copy. */
.co-msg.warn,
.form-note.is-error{
  color:var(--signal-danger,var(--terracotta,#91483B))!important;
  font-weight:600;
}
.co-msg:focus-visible,
.form-note:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
  border-radius:4px;
}

/* Disabled controls remain legible while clearly unavailable. */
button:disabled,
[aria-disabled="true"]{
  cursor:not-allowed;
}
button:disabled{
  opacity:.56;
}

/* Practical target floor for dense transactional controls. */
:is(.qty button,.thumb,.save-star,.icon-btn,.theme-toggle,.nav-toggle,.cat){
  min-width:44px;
  min-height:44px;
}

/* Reduced-motion means no ornamental response animation, but state changes stay visible. */
@media(prefers-reduced-motion:reduce){
  :is(#checkout,#pay,#basket-btn,#form-submit,[data-busy-ui])[aria-busy="true"]::after{
    animation:none;
    border-right-color:currentColor;
    opacity:.55;
  }
  .sc-pulse,
  .hm-burst,
  .hm-cart-flight,
  .hm-cart-catch{
    animation:none!important;
  }
  :where(.btn,.choice,.thumb,.product,.card,.way-card,.icon-btn,.theme-toggle,.nav-toggle){
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}


/* =====================================================================
   UX LAWS AUDIT 08 · whole-journey consistency + regression guardrails
   Peak-End / Flow / Goal-Gradient / Jakob / Mental Model / Discoverability /
   Campbell + regression against the full Laws of UX operating set.
   ===================================================================== */

.skip-link{
  position:fixed;
  left:1rem;
  top:.75rem;
  z-index:1000;
  min-height:44px;
  display:flex;
  align-items:center;
  padding:.65rem .9rem;
  border:1px solid var(--gold);
  border-radius:10px;
  background:var(--solid);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:650;
  letter-spacing:.04em;
  box-shadow:var(--frame-shadow);
  transform:translateY(calc(-100% - 2rem));
  transition:transform .18s ease;
}
.skip-link:focus{
  transform:translateY(0);
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.legal-toc a[aria-current]{
  text-decoration-line:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:.34em;
}
:where(main,[id],section[id],article[id]){
  scroll-margin-top:5.25rem;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .skip-link{transition:none!important}
}


/* Audit 08 closes the colour-semantics regression documented in Decision 009:
   purchase/commit actions are green; spectral colour returns to atmosphere. */
:is(#basket-btn,.qa-add,.to-basket),
:root[data-theme="dark"] :is(#basket-btn,.qa-add,.to-basket){
  background:var(--green)!important;
  background-image:none!important;
  background-size:auto!important;
  border-color:var(--green)!important;
  color:var(--marble)!important;
  box-shadow:0 8px 20px -16px color-mix(in srgb,var(--green) 60%,transparent)!important;
}
:is(#basket-btn,.qa-add,.to-basket):hover,
:root[data-theme="dark"] :is(#basket-btn,.qa-add,.to-basket):hover{
  background:var(--green-deep)!important;
  border-color:var(--green-deep)!important;
  color:var(--marble)!important;
  box-shadow:0 10px 24px -16px color-mix(in srgb,var(--green) 72%,transparent)!important;
}
:is(#basket-btn,.qa-add,.to-basket):focus-visible{
  outline:2px solid var(--gold)!important;
  outline-offset:3px;
}


/* LIGHT SHOP ARCHIVE CONTRAST FIX · 2026-10-07 */
/* The archive teaser uses a pale paper surface in light mode. An older
   archive-shelf rule supplied copy colours for a midnight surface, leaving
   the heading and key facts nearly invisible once the background was restored
   to paper. Pin light-mode copy to the normal readable material palette. */
:root:not([data-theme="dark"]) .shop-page #studio-shop .archive-shelf{
  color:var(--ink);
}
:root:not([data-theme="dark"]) .shop-page #studio-shop .archive-shelf :is(h2,h3,b){
  color:var(--ink);
}
:root:not([data-theme="dark"]) .shop-page #studio-shop .archive-shelf :is(.eyebrow,.muted){
  color:var(--earth)!important;
}
:root:not([data-theme="dark"]) .shop-page #studio-shop .archive-teaser-meta small{
  color:var(--earth);
}
:root:not([data-theme="dark"]) .shop-page #studio-shop .archive-teaser-note{
  color:var(--green);
}


/* SHOP ARCHIVE FEATURE PILL · 2026-10-07 */
/* Temporary Archive Parcel route on the shop: a compact feature capsule,
   deliberately distinct from the permanent catalogue shelves. */
.shop-page #studio-shop .archive-shelf{
  width:min(100%,1040px)!important;
  margin-inline:auto!important;
  padding:0!important;
  border:1px solid rgba(164,194,183,.18)!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at 82% 18%,rgba(205,170,94,.11),transparent 26%),
    linear-gradient(110deg,#081219 0%,#0B1B1B 58%,#10231E 100%)!important;
  color:#F5F1E9!important;
  box-shadow:0 26px 70px -48px rgba(0,0,0,.72)!important;
  overflow:visible!important;
}
.shop-page #studio-shop .archive-shelf + .shelf{
  border-top:1px solid var(--line)!important;
}
.shop-page #studio-shop .archive-teaser{
  width:100%;
  min-height:210px;
  margin:0;
  display:grid;
  grid-template-columns:minmax(210px,.9fr) minmax(320px,1.15fr) minmax(190px,.62fr);
  grid-template-areas:"heading body visual";
  align-items:center;
  gap:clamp(1rem,2.2vw,2rem);
  padding:1.1rem 1.2rem 1.1rem clamp(1.6rem,3vw,2.5rem);
  box-sizing:border-box;
}
.shop-page #studio-shop .archive-teaser-heading{
  grid-area:heading;
  align-self:center;
  display:grid;
  gap:.5rem;
}
.shop-page #studio-shop .archive-teaser-heading .eyebrow{
  margin:0;
  color:rgba(235,230,217,.62)!important;
  font-size:.62rem;
  letter-spacing:.2em;
}
.shop-page #studio-shop .archive-teaser-heading h2{
  margin:0;
  max-width:9ch;
  color:#F7F3EB!important;
  font-size:clamp(2rem,3vw,3.05rem);
  line-height:.91;
  letter-spacing:-.035em;
}
.shop-page #studio-shop .archive-teaser-heading>.muted{
  max-width:31ch;
  margin:0;
  color:rgba(235,230,217,.72)!important;
  font-size:.82rem;
  line-height:1.45;
}
.shop-page #studio-shop .archive-teaser-body{
  grid-area:body;
  align-self:center;
  display:grid;
  gap:.9rem;
  min-width:0;
}
.shop-page #studio-shop .archive-teaser-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;
  margin:0;
  padding:0;
  border:0;
}
.shop-page #studio-shop .archive-teaser-meta span,
.shop-page #studio-shop .archive-teaser-meta span:last-child:nth-child(odd){
  grid-column:auto;
  display:grid;
  align-content:start;
  gap:.18rem;
  min-width:0;
  padding:0;
  border:0;
}
.shop-page #studio-shop .archive-teaser-meta b{
  color:#F7F3EB!important;
  font-family:var(--ui);
  font-size:.72rem;
  font-weight:650;
}
.shop-page #studio-shop .archive-teaser-meta small{
  color:rgba(235,230,217,.56)!important;
  font-family:var(--ui);
  font-size:.61rem;
  line-height:1.35;
}
.shop-page #studio-shop .archive-teaser-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem .8rem;
  align-items:center;
  margin:0;
}
.shop-page #studio-shop .archive-teaser-actions .btn{
  min-height:42px;
  padding:.6rem 1rem;
  border-radius:999px;
  border-color:#8DBBA9;
  background:#8DBBA9;
  color:#07120F;
  font-size:.66rem;
  letter-spacing:.11em;
}
.shop-page #studio-shop .archive-teaser-actions .btn:hover{
  background:#A2C9BA;
  border-color:#A2C9BA;
}
.shop-page #studio-shop .archive-teaser-note{
  color:rgba(235,230,217,.58)!important;
  font-size:.64rem;
}
.shop-page #studio-shop .archive-teaser-note:hover{color:#F7F3EB!important;opacity:1}
.shop-page #studio-shop .archive-teaser-visual{
  grid-area:visual;
  position:relative;
  align-self:center;
  justify-self:end;
  width:100%;
  min-width:0;
  margin:0;
  display:grid;
  place-items:center;
  overflow:visible;
}
.shop-page #studio-shop .archive-teaser-visual img{
  display:block;
  width:min(100%,230px);
  height:auto;
  object-fit:contain;
  border:0;
  background:transparent;
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.42));
  transform:translate(.5rem,-.1rem) scale(1.08);
  transform-origin:center;
}
@media(max-width:940px){
  .shop-page #studio-shop .archive-shelf{
    width:min(100%,760px)!important;
    border-radius:34px!important;
  }
  .shop-page #studio-shop .archive-teaser{
    min-height:0;
    grid-template-columns:minmax(0,1fr) minmax(150px,.42fr);
    grid-template-areas:
      "heading visual"
      "body visual";
    gap:1rem 1.2rem;
    padding:1.35rem 1.35rem 1.3rem 1.55rem;
  }
  .shop-page #studio-shop .archive-teaser-heading h2{max-width:12ch}
  .shop-page #studio-shop .archive-teaser-visual img{
    width:min(100%,190px);
    transform:scale(1.03);
  }
}
@media(max-width:640px){
  .shop-page #studio-shop .archive-shelf{
    border-radius:26px!important;
  }
  .shop-page #studio-shop .archive-teaser{
    grid-template-columns:minmax(0,1fr) 118px;
    grid-template-areas:
      "heading visual"
      "body body";
    padding:1.15rem;
    gap:.85rem;
  }
  .shop-page #studio-shop .archive-teaser-heading{
    gap:.4rem;
  }
  .shop-page #studio-shop .archive-teaser-heading h2{
    font-size:clamp(1.9rem,9.5vw,2.6rem);
    max-width:9ch;
  }
  .shop-page #studio-shop .archive-teaser-heading>.muted{
    font-size:.76rem;
    max-width:28ch;
  }
  .shop-page #studio-shop .archive-teaser-visual{
    justify-self:end;
  }
  .shop-page #studio-shop .archive-teaser-visual img{
    width:118px;
    transform:scale(1.04);
  }
  .shop-page #studio-shop .archive-teaser-meta{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.55rem;
  }
  .shop-page #studio-shop .archive-teaser-meta b{font-size:.67rem}
  .shop-page #studio-shop .archive-teaser-meta small{font-size:.56rem}
  .shop-page #studio-shop .archive-teaser-actions{
    align-items:stretch;
  }
  .shop-page #studio-shop .archive-teaser-actions .btn{
    width:auto;
    min-height:40px;
  }
}
@media(max-width:420px){
  .shop-page #studio-shop .archive-teaser{
    grid-template-columns:1fr 96px;
  }
  .shop-page #studio-shop .archive-teaser-visual img{width:96px}
  .shop-page #studio-shop .archive-teaser-meta{
    grid-template-columns:1fr;
    gap:.45rem;
  }
  .shop-page #studio-shop .archive-teaser-meta span{
    grid-template-columns:auto 1fr;
    gap:.55rem;
    align-items:baseline;
  }
}

/* Tighten the transition from the final divider into Contact. */
.home-page .contact{
  padding-top:clamp(2rem,4vw,3.5rem);
}
@media(max-width:820px){
  .home-page .contact{padding-top:2rem}
}


/* HOME SHOP MOBILE RAIL · horizontal gesture lock
   Prevent vertical rubber-banding inside the product shelf: a gesture that
   begins on this rail is reserved for left/right browsing. */
@media(max-width:760px){
  body.home-page .shop .product-grid{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    touch-action:pan-x!important;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:none;
    overscroll-behavior-inline:contain;
    overscroll-behavior-block:none;
  }
  body.home-page .shop .product-grid > .product{
    touch-action:pan-x!important;
  }
}


/* =====================================================================
   EDGE TOLERANCE PASS · 2026-10-07
   Protect framed/product/checkout content from feeling clipped at either
   viewport edge on desktop, tablet and mobile. Full-bleed art remains full
   bleed; contained UI gains consistent breathing room.
   ===================================================================== */
:where(
  .product-page main>.wrap,
  .shop-page #studio-shop>.wrap,
  main.basket>.wrap,
  main.checkout>.wrap,
  .legal>.wrap,
  .member-hero>.wrap,
  .studio-page main>.wrap
){
  min-width:0;
  max-width:calc(100% - 2 * var(--grid-pad));
  margin-inline:auto;
}

:where(
  .pdp,
  .buy,
  .selection-summary,
  .ship,
  .buy-proof,
  .summary,
  .co-pay,
  .co-order-card,
  .m-card,
  .panel,
  .card,
  .shelf
){
  min-width:0;
}

:where(
  .pdp,
  .buy,
  .selection-summary,
  .ship,
  .buy-proof,
  .summary,
  .co-pay,
  .co-order-card,
  .m-card,
  .panel,
  .card,
  .shelf
) :where(h1,h2,h3,h4,p,span,b,strong,small,dd,dt,a,button,label){
  min-width:0;
  overflow-wrap:break-word;
}

@media(max-width:760px){
  :where(
    .product-page main>.wrap,
    .shop-page #studio-shop>.wrap,
    main.basket>.wrap,
    main.checkout>.wrap,
    .legal>.wrap,
    .member-hero>.wrap,
    .studio-page main>.wrap
  ){
    width:calc(100% - 2.5rem)!important;
    max-width:none!important;
  }
}

@media(max-width:420px){
  :where(
    .product-page main>.wrap,
    .shop-page #studio-shop>.wrap,
    main.basket>.wrap,
    main.checkout>.wrap,
    .legal>.wrap,
    .member-hero>.wrap,
    .studio-page main>.wrap
  ){
    width:calc(100% - 2rem)!important;
  }
}

/* Header logo sizing: homepage is the reference across site navigation. */
:root{
  --brand-mark-width:17px;
  --brand-mark-height:36px;
  --brand-name-size:1.25rem;
  --brand-subtitle-size:.625rem;
  --brand-gap:.75rem;
}
.nav .brand{gap:var(--brand-gap)}
.nav .brand>svg,.nav .brand>img{
  width:var(--brand-mark-width)!important;
  height:var(--brand-mark-height)!important;
  flex-shrink:0;
}
.nav .brand>img{object-fit:cover}
.nav .brand-name{font-size:var(--brand-name-size)!important}
.nav .brand-name small{font-size:var(--brand-subtitle-size)!important}

/* Archive Parcel CTA · bright sky-cyan · 2026-10-09 */
.shop-page #studio-shop .archive-shelf .archive-teaser-actions > a.btn,
:root:not([data-theme="dark"]) .shop-page #studio-shop .archive-shelf .archive-teaser-actions > a.btn{
  background:#00B8F0!important;
  border-color:#00B8F0!important;
  color:#062D3D!important;
}
.shop-page #studio-shop .archive-shelf .archive-teaser-actions > a.btn:hover,
:root:not([data-theme="dark"]) .shop-page #studio-shop .archive-shelf .archive-teaser-actions > a.btn:hover{
  background:#31C9FA!important;
  border-color:#31C9FA!important;
  color:#062D3D!important;
}

/* EXHIBITION ROOMS · continuous phone walk · 2026-10-11
   Desktop: the flow wrapper is invisible (rooms stack as before).
   Phones: rooms ١–٥ sit side by side in one sideways scroll; each room's
   title stays pinned at the left while its own works pass, and cards are
   25% smaller than before (16rem -> 12rem). */
.home-page .exhibit .room-flow{display:contents}
@media(max-width:700px){
  body.home-page .exhibit .room-flow{
    display:flex;align-items:flex-start;gap:2rem;position:relative;
    overflow-x:auto;overflow-y:hidden;
    margin-inline:calc(var(--grid-pad,1rem) * -1);
    padding-inline:var(--grid-pad,1rem);
    scroll-padding-inline:var(--grid-pad,1rem);
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.home-page .exhibit .room-flow::-webkit-scrollbar{display:none}
  body.home-page .exhibit .room-flow>.room{
    flex:none;display:block!important;width:max-content!important;max-width:none!important;min-width:0;
    border:0!important;padding-inline:0!important;
  }
  body.home-page .exhibit .room-flow .room-head{
    position:sticky!important;left:0;
    width:calc(100vw - (var(--grid-pad,1rem) * 2));
    max-width:calc(100vw - (var(--grid-pad,1rem) * 2));
    margin-bottom:.85rem;
  }
  body.home-page .exhibit .room-flow .room-wall{
    --room-card:min(48.75vw,12rem)!important;
    display:block!important;
    overflow:visible!important;
    margin:0!important;width:max-content!important;max-width:none!important;
    padding-inline:0!important;
    scroll-snap-type:none!important;
  }
  body.home-page .exhibit .room-flow .room-wall figure{scroll-snap-align:start}
}

/* EXHIBITION ROOMS · tight stacking · 2026-10-11
   Where rooms stack vertically (wider than phones), the space between one
   room's captions and the next room's title closes to a small break. The
   divider line between rooms stays. Phones keep the sideways walk above. */
@media(min-width:701px){
  body.home-page .exhibit .room{
    padding-block:clamp(.9rem,1.6vw,1.35rem)!important;
  }
  body.home-page .exhibit .room:first-child,
  body.home-page .exhibit .room-flow>.room:first-child{
    padding-top:clamp(2.3rem,4.5vw,4rem)!important;
  }
  body.home-page .exhibit .room:last-child,
  body.home-page .exhibit .room-flow>.room:last-child{
    padding-bottom:clamp(2.3rem,4.5vw,4rem)!important;
  }
  body.home-page .exhibit .room-wall{
    padding-bottom:.6rem!important;
  }
}

/* ===== Salawat strip · site-wide, quiet, above all page chrome =====
   One short line of salawat on a near-black band with a hairline below.
   Fixed colours in both themes so it reads the same everywhere. */
.salawat-bar{
  position:relative;
  z-index:30;
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:.45rem 1rem .4rem;
  background:#0a0908;
  border-bottom:1px solid rgba(255,255,255,.09);
  color:#f3eee6;
  font-family:var(--arabic);
  font-size:clamp(.92rem,.84rem + .3vw,1.12rem);
  line-height:1.9;
  font-weight:400;
  text-align:center;
  letter-spacing:0;
  text-wrap:balance;
}
@media (max-width:640px){
  .salawat-bar{font-size:.86rem;line-height:1.85;padding:.4rem .9rem .35rem}
}
/* A quiet arrival: the words fade in once on load, then stay still. */
@media (prefers-reduced-motion:no-preference){
  .salawat-bar > span{display:inline-block;animation:salawat-in 1.8s cubic-bezier(.22,.61,.36,1) both}
}
@keyframes salawat-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}


/* === HIMMA ICON SYSTEM ===
   One outline family for the whole site, drawn in assets/icons.svg (Lucide
   geometry, 24px grid, 2-unit line, round ends) and shipped as the font
   assets/himma-icons.woff2 (scripts/build_icon_font.py), so icons are drawn
   by the same renderer as the type and stay as sharp as the letters at any
   size or zoom. Icons take the colour of the text they sit beside.
   Markup: <i class="ico" data-icon="bag" aria-hidden="true"></i>
   Sizes: 16px in chips and small labels, 18px default, 22px for a section
   intro; any rule may resize an icon by width/height, the glyph follows.
   Never place an icon over an artwork or sacred text. Map: docs/icons.md */
@font-face{font-family:"HIMMA Icons";src:url("himma-icons.woff2?v=3") format("woff2");font-display:block}
.ico{
  display:inline-block;flex:none;position:relative;
  width:1.125rem;height:1.125rem;
  vertical-align:-.2em;
  container-type:size;
  font-style:normal;pointer-events:none;
}
.ico::before{
  position:absolute;inset:0;
  font:normal 400 100cqh/1 "HIMMA Icons";
  speak:never;text-transform:none;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.ico--sm{width:1rem;height:1rem}
.ico--lg{width:1.375rem;height:1.375rem}
/* ICON GLYPHS · generated by scripts/build_icon_font.py */
.ico[data-icon="bag"]::before{content:"\e001"}
.ico[data-icon="user"]::before{content:"\e002"}
.ico[data-icon="sun"]::before{content:"\e003"}
.ico[data-icon="moon"]::before{content:"\e004"}
.ico[data-icon="set"]::before{content:"\e005"}
.ico[data-icon="image"]::before{content:"\e006"}
.ico[data-icon="gallery"]::before{content:"\e007"}
.ico[data-icon="package"]::before{content:"\e008"}
.ico[data-icon="ticket"]::before{content:"\e009"}
.ico[data-icon="pen"]::before{content:"\e00a"}
.ico[data-icon="objects"]::before{content:"\e00b"}
.ico[data-icon="monitor"]::before{content:"\e00c"}
.ico[data-icon="book"]::before{content:"\e00d"}
.ico[data-icon="layers"]::before{content:"\e00e"}
.ico[data-icon="frame"]::before{content:"\e00f"}
.ico[data-icon="hanging"]::before{content:"\e010"}
.ico[data-icon="ruler"]::before{content:"\e011"}
.ico[data-icon="finish"]::before{content:"\e012"}
.ico[data-icon="truck"]::before{content:"\e013"}
.ico[data-icon="info"]::before{content:"\e014"}
.ico[data-icon="check-circle"]::before{content:"\e015"}
.ico[data-icon="check"]::before{content:"\e016"}
.ico[data-icon="plus"]::before{content:"\e017"}
.ico[data-icon="minus"]::before{content:"\e018"}
.ico[data-icon="x"]::before{content:"\e019"}
.ico[data-icon="arrow-left"]::before{content:"\e01a"}
.ico[data-icon="arrow-right"]::before{content:"\e01b"}
.ico[data-icon="chevron-down"]::before{content:"\e01c"}
.ico[data-icon="message"]::before{content:"\e01d"}
.ico[data-icon="mail"]::before{content:"\e01e"}
.ico[data-icon="lock"]::before{content:"\e01f"}
.ico[data-icon="trash"]::before{content:"\e020"}
.ico[data-icon="h-user"]::before{content:"\e021"}
.ico[data-icon="h-bag"]::before{content:"\e022"}
.ico[data-icon="h-sun"]::before{content:"\e023"}
.ico[data-icon="h-moon"]::before{content:"\e024"}
.ico[data-icon="box-frame"]::before{content:"\e025"}
/* /ICON GLYPHS */
/* icon beside a short label: chips, links, list headings */
.ico-label{display:inline-flex;align-items:center;gap:.5em}
/* [icon] eyebrow · the section's first visual cue, set in the eyebrow's own colour */
.ico-eyebrow{display:flex;align-items:center;gap:.55rem}
.ico-eyebrow .ico{width:1rem;height:1rem}
/* [icon] heading, then the description aligned under the heading text */
.ico-head{display:grid;grid-template-columns:auto 1fr;column-gap:.65rem;align-items:start}
.ico-head>.ico{grid-row:1;margin-top:.12em}
.ico-head>:not(.ico){grid-column:2}
/* icon-only controls keep a 44px target while the glyph stays small */
.ico-btn{display:inline-grid;place-items:center;min-width:2.75rem;min-height:2.75rem}

/* placements shared by product.html and build-a-set.html */
.fa-ways dt.ico-label{display:flex;gap:.55rem}
.fa-ways dt.ico-label+dd{padding-left:1.7rem}
.fa-ways dt.ico-label .ico{color:var(--gold)}
.canvas-commission .ico,.bs-larger .ico{color:var(--green);vertical-align:-.17em}
.bs-rails legend .ico{margin-right:.4rem;vertical-align:-.17em}
.bs-plus .ico{width:.95rem;height:.95rem}
/* =====================================================================
   BUTTON SPECTRUM · 2026-10-14 (neo)
   Every interactive button carries the spectral edge in both themes,
   almost hidden at rest and revealed on hover / focus / press:
   dark = misregistered cyan/magenta wavelengths over a violet bloom,
   light = daytime "spectral sunshine": a fine yellow-to-orange ray rim
   with a warm halo. The effect lives on the edge and halo only — fills
   keep their semantic colours (Decision 009) — and is scoped to buttons,
   so artwork surfaces, sacred text and the Salawat strip are untouched.
   Static; hover/focus only brighten it, so reduced motion is unaffected.
   ===================================================================== */
/* the site's own contoured controls (::before/::after rims, see SPECTRAL CONTOURING) */
:root[data-theme="dark"] :is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button){
  --sc-a-col:rgba(110,234,255,1);
  --sc-b-col:rgba(255,92,222,.95);
  --sc-bloom:rgba(150,116,255,.55);
  --sc-bloom-strong:rgba(160,126,255,.75);
  --sc-idle:.16;
  --sc-hover:.95;
  --sc-act:1;
}
:root:not([data-theme="dark"]) :is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button){
  --sc-a-col:rgba(255,206,26,1);
  --sc-b-col:rgba(240,92,22,.9);
  --sc-bloom:rgba(255,170,40,.42);
  --sc-bloom-strong:rgba(255,150,30,.62);
  --sc-idle:.28;
  --sc-hover:1;
  --sc-act:1;
}
/* sunshine: a clean warm yellow line (the earlier fine ray hatching aliased into a jagged dashed edge on wide buttons, neo 2026-10-14) */
:root:not([data-theme="dark"]) :is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button)::before{
  filter:none;
}

/* one halo for every interactive button, including page-specific ones,
   shown only on hover / focus. !important because many pages pin their own
   button shadows; a chosen option keeps its inset ring (--btn-ring). */
:root{
  --btn-ring:var(--gold);
  --btn-spec-hover:
    -1.5px -1px 0 0 rgba(110,234,255,.75),
    1.5px 1px 0 0 rgba(255,92,222,.65),
    0 0 18px -4px rgba(150,116,255,.5),
    0 12px 26px -20px rgba(0,0,0,.6);
}
:root:not([data-theme="dark"]){
  --btn-spec-hover:
    0 0 0 1px rgba(255,206,26,.6),
    0 0 12px -3px rgba(255,180,30,.45),
    0 0 22px -8px rgba(240,92,22,.28),
    0 12px 26px -22px rgba(22,34,41,.3);
}
.weekly-draw-page .wd-quick-select button{--btn-ring:#2fd1c8}
:is(.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.fa-cta,.hs-cta,.bs-cta,.wd-cta,.wd-enter-now,.wd-add-entry,.wd-ticket-step,.wd-quick-select button,.canvas-edition,.accessory-control,.accessory-cta,.single-chip,.hd-tab,.meaning-choice,.exhibit-arrow,.studio-objects-arrow,.contact-choice,.ap-buy-option,.ap-matter-wheel-control,.himma-cart-close,.wd-entry-close,.save-star,.himma-cart-open,.himma-cart-checkout,.himma-cart-continue,.choice,.google,.dots,.tk-theme,#basket-btn,.qa-add,.to-basket){
  transition-property:background,background-color,border-color,color,box-shadow,transform,opacity;
}
:is(.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.fa-cta,.hs-cta,.bs-cta,.wd-cta,.wd-enter-now,.wd-add-entry,.wd-ticket-step,.wd-quick-select button,.canvas-edition,.accessory-control,.accessory-cta,.single-chip,.hd-tab,.meaning-choice,.exhibit-arrow,.studio-objects-arrow,.contact-choice,.ap-buy-option,.ap-matter-wheel-control,.himma-cart-close,.wd-entry-close,.save-star,.himma-cart-open,.himma-cart-checkout,.himma-cart-continue,.choice,.google,.dots,.tk-theme,#basket-btn,.qa-add,.to-basket):is(:hover,:focus-visible,:active){
  box-shadow:var(--btn-spec-hover)!important;
}
:is(.canvas-edition,.choice,.wd-quick-select button,.single-chip,.hd-tab):is([aria-pressed="true"],[aria-checked="true"],[aria-selected="true"]):is(:hover,:focus-visible,:active){
  box-shadow:inset 0 0 0 1px var(--btn-ring),var(--btn-spec-hover)!important;
}
/* the archive parcel's selected card keeps its own lit face */
.ap-buy-option.is-selected:is(:hover,:focus-visible,:active){box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5),var(--btn-spec-hover)!important}
@media (prefers-reduced-motion:reduce){
  :is(.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.fa-cta,.hs-cta,.bs-cta,.wd-cta,.wd-enter-now,.wd-add-entry,.wd-ticket-step,.wd-quick-select button,.canvas-edition,.accessory-control,.accessory-cta,.single-chip,.hd-tab,.meaning-choice,.exhibit-arrow,.studio-objects-arrow,.contact-choice,.ap-buy-option,.ap-matter-wheel-control,.himma-cart-close,.wd-entry-close,.save-star,.himma-cart-open,.himma-cart-checkout,.himma-cart-continue,.choice,.google,.dots,.tk-theme,#basket-btn,.qa-add,.to-basket){transition-duration:0s}
}

/* =====================================================================
   SPECTRUM ORBIT · 2026-10-14 (neo)
   On hover or keyboard focus, the spectral outline of every interactive
   button slowly travels around it: one angle (--orb) turns once every 6s
   and drives both the coloured halo offsets and the rims' starting angle,
   so it works on circles, pills and cards alike. The turn pauses where it
   is when the pointer leaves, so nothing snaps back while the glow fades;
   at rest nothing animates (PERFORMANCE QUIET MODE). Reduced motion: no orbit.
   The zero-specificity :where() lets any button that already runs its own
   animation keep it.
   ===================================================================== */
@property --orb{syntax:'<angle>';inherits:true;initial-value:0deg}
@keyframes btn-orbit{to{--orb:360deg}}
:where(.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.fa-cta,.hs-cta,.bs-cta,.wd-cta,.wd-enter-now,.wd-add-entry,.wd-ticket-step,.wd-quick-select button,.canvas-edition,.accessory-control,.accessory-cta,.single-chip,.hd-tab,.meaning-choice,.exhibit-arrow,.studio-objects-arrow,.contact-choice,.ap-buy-option,.ap-matter-wheel-control,.himma-cart-close,.wd-entry-close,.save-star,.himma-cart-open,.himma-cart-checkout,.himma-cart-continue,.choice,.google,.dots,.tk-theme,#basket-btn,.qa-add,.to-basket,.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button){
  animation:btn-orbit 6s linear infinite;
  animation-play-state:paused;
}
:where(.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.fa-cta,.hs-cta,.bs-cta,.wd-cta,.wd-enter-now,.wd-add-entry,.wd-ticket-step,.wd-quick-select button,.canvas-edition,.accessory-control,.accessory-cta,.single-chip,.hd-tab,.meaning-choice,.exhibit-arrow,.studio-objects-arrow,.contact-choice,.ap-buy-option,.ap-matter-wheel-control,.himma-cart-close,.wd-entry-close,.save-star,.himma-cart-open,.himma-cart-checkout,.himma-cart-continue,.choice,.google,.dots,.tk-theme,#basket-btn,.qa-add,.to-basket,.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button):is(:hover,:focus-visible,:focus-within){animation-play-state:running}
/* the halo, redeclared on each button so it reads that button's --orb.
   The thin coloured edges don't move by offset (Firefox snaps box-shadow
   offsets to whole pixels, so a 1.8px circle stepped and looked blocky,
   neo 2026-10-18); each colour has a fixed 2px edge on all four sides whose
   strength follows the orbit angle, so the light glides round smoothly. */
:root[data-theme="dark"] :where(.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.fa-cta,.hs-cta,.bs-cta,.wd-cta,.wd-enter-now,.wd-add-entry,.wd-ticket-step,.wd-quick-select button,.canvas-edition,.accessory-control,.accessory-cta,.single-chip,.hd-tab,.meaning-choice,.exhibit-arrow,.studio-objects-arrow,.contact-choice,.ap-buy-option,.ap-matter-wheel-control,.himma-cart-close,.wd-entry-close,.save-star,.himma-cart-open,.himma-cart-checkout,.himma-cart-continue,.choice,.google,.dots,.tk-theme,#basket-btn,.qa-add,.to-basket,.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button){
  --btn-spec-hover:
    0px -2px 0 0 rgb(110 234 255 / calc(0.75 * max(0, -1 * sin(var(--orb) + 214deg)))),
    0px 2px 0 0 rgb(110 234 255 / calc(0.75 * max(0, sin(var(--orb) + 214deg)))),
    -2px 0px 0 0 rgb(110 234 255 / calc(0.75 * max(0, -1 * cos(var(--orb) + 214deg)))),
    2px 0px 0 0 rgb(110 234 255 / calc(0.75 * max(0, cos(var(--orb) + 214deg)))),
    0px -2px 0 0 rgb(255 92 222 / calc(0.65 * max(0, -1 * sin(var(--orb) + 34deg)))),
    0px 2px 0 0 rgb(255 92 222 / calc(0.65 * max(0, sin(var(--orb) + 34deg)))),
    -2px 0px 0 0 rgb(255 92 222 / calc(0.65 * max(0, -1 * cos(var(--orb) + 34deg)))),
    2px 0px 0 0 rgb(255 92 222 / calc(0.65 * max(0, cos(var(--orb) + 34deg)))),
    0 0 18px -4px rgba(150,116,255,.5),
    0 12px 26px -20px rgba(0,0,0,.6);
}
:root:not([data-theme="dark"]) :where(.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.fa-cta,.hs-cta,.bs-cta,.wd-cta,.wd-enter-now,.wd-add-entry,.wd-ticket-step,.wd-quick-select button,.canvas-edition,.accessory-control,.accessory-cta,.single-chip,.hd-tab,.meaning-choice,.exhibit-arrow,.studio-objects-arrow,.contact-choice,.ap-buy-option,.ap-matter-wheel-control,.himma-cart-close,.wd-entry-close,.save-star,.himma-cart-open,.himma-cart-checkout,.himma-cart-continue,.choice,.google,.dots,.tk-theme,#basket-btn,.qa-add,.to-basket,.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button){
  --btn-spec-hover:
    0 0 0 1px rgba(255,206,26,.6),
    0px -2px 0 0 rgb(255 196 20 / calc(0.55 * max(0, -1 * sin(var(--orb) + 300deg)))),
    0px 2px 0 0 rgb(255 196 20 / calc(0.55 * max(0, sin(var(--orb) + 300deg)))),
    -2px 0px 0 0 rgb(255 196 20 / calc(0.55 * max(0, -1 * cos(var(--orb) + 300deg)))),
    2px 0px 0 0 rgb(255 196 20 / calc(0.55 * max(0, cos(var(--orb) + 300deg)))),
    calc(cos(var(--orb) + 300deg) * 2px) calc(sin(var(--orb) + 300deg) * 2px) 12px -3px rgba(255,180,30,.45),
    calc(cos(var(--orb) + 120deg) * 3px) calc(sin(var(--orb) + 120deg) * 3px) 22px -8px rgba(240,92,22,.28),
    0 12px 26px -22px rgba(22,34,41,.3);
}
/* the rims start from the same travelling angle (the second a little faster) */
:root :is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button)::before{
  -webkit-mask:conic-gradient(from calc(var(--sc-a) + var(--orb)),transparent 0 16%,#000 25% 43%,transparent 51% 67%,#000 75% 86%,transparent 93% 100%);
          mask:conic-gradient(from calc(var(--sc-a) + var(--orb)),transparent 0 16%,#000 25% 43%,transparent 51% 67%,#000 75% 86%,transparent 93% 100%);
}
:root :is(.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button)::after{
  -webkit-mask:conic-gradient(from calc(var(--sc-b) + var(--orb) * 1.5),#000 0 11%,transparent 19% 41%,#000 47% 57%,transparent 63% 81%,#000 88% 100%);
          mask:conic-gradient(from calc(var(--sc-b) + var(--orb) * 1.5),#000 0 11%,transparent 19% 41%,#000 47% 57%,transparent 63% 81%,#000 88% 100%);
}
/* WhatsApp / Email: only the round icon carries the outline, not the card */
:is(.contact-actions,.form-actions) .contact-choice:is(:hover,:focus-visible,:active):not(#_){box-shadow:none!important}
:is(.contact-actions,.form-actions) .contact-choice:is(:hover,:focus-visible,:active) .contact-icon{box-shadow:var(--btn-spec-hover)!important}
@media (prefers-reduced-motion:reduce){
  :where(.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.fa-cta,.hs-cta,.bs-cta,.wd-cta,.wd-enter-now,.wd-add-entry,.wd-ticket-step,.wd-quick-select button,.canvas-edition,.accessory-control,.accessory-cta,.single-chip,.hd-tab,.meaning-choice,.exhibit-arrow,.studio-objects-arrow,.contact-choice,.ap-buy-option,.ap-matter-wheel-control,.himma-cart-close,.wd-entry-close,.save-star,.himma-cart-open,.himma-cart-checkout,.himma-cart-continue,.choice,.google,.dots,.tk-theme,#basket-btn,.qa-add,.to-basket,.sc,.btn,.nav-enquire,.icon-btn,.theme-toggle,.nav-toggle,.hero-pill,.ask,.hero-chips a,.tab,.ask button){animation:none}
}

/* ---------- contact letter (3D) ----------
   "Write to the studio." as a letter on the studio table: a floating card
   resting above two loose sheets, with a finial stamp and postmark. Depth is
   visible but still at rest; a mouse pointer tilts it a few degrees and the
   layers separate. At rest nothing on the card is lifted in Z, so text and
   icons render exactly as sharp as the rest of the page (Firefox included).
   Social links live in the footer only. */
.contact-letter{padding-block:clamp(3rem,6vw,5rem)}
.cl-stage{
  --rx:0deg; --ry:0deg; --gx:50%; --gy:30%;
  --cl-card:#FCFAF5;
  --cl-edge:color-mix(in srgb,var(--gold) 22%,transparent);
  --cl-sheet-near:#F3ECDD;
  --cl-sheet-far:#EADFC8;
  --cl-shadow:rgba(73,48,24,.16);
  --cl-sheen:rgba(255,253,246,.62);
  width:min(1000px,100% - 2*var(--pad));
  margin-inline:auto;
  perspective:1600px;
  padding:.75rem 0;
}
:root[data-theme="dark"] .cl-stage{
  --cl-card:#121420;
  --cl-edge:rgba(205,170,94,.2);
  --cl-sheet-near:#0D0F19;
  --cl-sheet-far:#0A0B13;
  --cl-shadow:rgba(0,0,0,.62);
  --cl-sheen:rgba(90,215,231,.09);
}
.cl-rig{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.cl-stage.is-tilting .cl-rig{transition-duration:.45s}

.cl-sheet{
  position:absolute;
  inset:0;
  border-radius:34px;
  border:1px solid var(--cl-edge);
  pointer-events:none;
}
.cl-sheet--far{
  background:var(--cl-sheet-far);
  transform:translate3d(-1.6%,4%,-110px) rotate(-3deg) scale(1.03);
  box-shadow:0 30px 60px -36px var(--cl-shadow);
}
.cl-sheet--near{
  background:
    repeating-linear-gradient(180deg,transparent 0 27px,color-mix(in srgb,var(--gold) 14%,transparent) 27px 28px),
    var(--cl-sheet-near);
  transform:translate3d(1.4%,2.2%,-55px) rotate(1.7deg) scale(1.015);
  box-shadow:0 22px 48px -30px var(--cl-shadow);
}

.cl-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  transform-style:preserve-3d;
  border-radius:34px;
  border:1px solid var(--cl-edge);
  background:
    radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--gold-pale) 45%,transparent),transparent 26rem),
    var(--cl-card);
  box-shadow:
    0 44px 90px -46px var(--cl-shadow),
    0 12px 26px -18px var(--cl-shadow);
}
/* Soft light that follows the pointer while the card is tilting. */
.cl-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle 26rem at var(--gx) var(--gy),var(--cl-sheen),transparent 70%);
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.cl-stage.is-tilting .cl-card::after{opacity:1}

.cl-message,.cl-address{
  position:relative;
  z-index:1;
  padding:clamp(2.25rem,4.4vw,3.6rem);
  transform-style:preserve-3d;
}
.cl-message{display:grid;align-content:center;gap:1rem}
.cl-message h2{
  font-size:clamp(2.3rem,4.2vw,3.5rem);
  line-height:1.02;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.cl-message .muted{max-width:36ch;line-height:1.7}
.cl-address{
  display:grid;
  align-content:end;
  gap:.85rem;
  padding-top:clamp(7rem,10vw,8.5rem);
  border-left:1px dashed color-mix(in srgb,var(--gold) 34%,transparent);
  margin-block:clamp(1.5rem,3vw,2.25rem);
  padding-block:0;
}
.cl-to{
  font-family:var(--ui);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--earth);
}
.cl-address .contact-line{
  margin:0;
  font-size:clamp(1.25rem,1.9vw,1.65rem);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.cl-address .contact-actions{
  grid-template-columns:repeat(2,max-content);
  justify-self:start;
  align-self:start;
  gap:1.5rem;
  margin-top:.65rem;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
/* Layers separate only while the pointer is on the letter. */
.cl-stage.is-tilting .cl-message h2{transform:translateZ(22px)}
.cl-stage.is-tilting .cl-address .contact-line{transform:translateZ(18px)}
.cl-stage.is-tilting .cl-address .contact-actions{transform:translateZ(34px)}
.cl-stage.is-tilting .cl-stamp{transform:translateZ(46px) rotate(4deg)}

/* Finial stamp with perforated edge, lifted furthest off the card. */
.cl-stamp{
  position:absolute;
  z-index:2;
  top:clamp(1.5rem,3vw,2.25rem);
  right:clamp(1.5rem,3vw,2.5rem);
  width:4.4rem;
  height:5.3rem;
  transform:rotate(4deg);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.cl-stamp__face{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  background:var(--gold-pale);
  outline:4px dotted var(--cl-card);
  outline-offset:-2px;
  box-shadow:
    inset 0 0 0 6px var(--gold-pale),
    inset 0 0 0 7px color-mix(in srgb,var(--gold) 55%,transparent),
    0 14px 24px -14px var(--cl-shadow);
}
.cl-stamp__face svg{
  width:42%;
  height:62%;
  fill:var(--gold);
}
:root[data-theme="dark"] .cl-stamp__face{background-color:#1D1A14}
.cl-postmark{
  position:absolute;
  left:-2.4rem;
  top:1.7rem;
  width:3.4rem;
  height:3.4rem;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--green) 30%,transparent);
  transform:rotate(-14deg);
}
.cl-postmark::after{
  content:"";
  position:absolute;
  left:70%;
  top:34%;
  width:3.2rem;
  height:1.1rem;
  background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--green) 26%,transparent) 0 1px,transparent 1px 5px);
  border-radius:50%/20%;
}

@media(max-width:760px){
  .cl-card{grid-template-columns:1fr}
  .cl-message{padding:2.1rem 1.5rem 1.4rem}
  .cl-message h2{padding-right:4.25rem}
  .cl-address{
    padding:1.5rem 1.5rem 2rem;
    margin:0 1.5rem;
    padding-inline:0;
    border-left:0;
    border-top:1px dashed color-mix(in srgb,var(--gold) 34%,transparent);
  }
  .cl-stamp{top:1.4rem;right:1.25rem;width:3.5rem;height:4.25rem}
  .cl-postmark{left:-1.6rem;top:1.9rem;width:2.7rem;height:2.7rem}
  .cl-postmark::after{display:none}
  .cl-sheet,.cl-card{border-radius:24px}
  .cl-sheet--far{transform:translate3d(-2%,2.4%,-80px) rotate(-2.4deg) scale(1.02)}
  .cl-sheet--near{transform:translate3d(1.6%,1.2%,-40px) rotate(1.4deg)}
}
@media(prefers-reduced-motion:reduce){
  .cl-rig,.cl-card::after,.cl-stamp,.cl-message h2,.cl-address .contact-line,.cl-address .contact-actions{transition:none}
}

/* Quiet Garamond (2026-10-15): the site speaks upright. Emphasis and quotations
   keep their colour and weight, but no element falls back to the browser italic. */
em,i,cite,q,blockquote,address,dfn,var{font-style:normal}

/* =====================================================================
   HIMMA KINETICS · 2026-10-16
   Motions adapted from the Kinetics library (kinetics.colorion.co), applied
   to features that repeat across pages; behaviour lives in assets/kinetics.js.
   The house spring comes from its physics section: stiffness 320, damping 24,
   mass 1 (about 5% overshoot). The glide is critically damped (260 / 32), so
   things that travel far arrive without overshooting their place.
   ===================================================================== */
:root{
  --k-spring:linear(0,0.051,0.155,0.3,0.44,0.587,0.707,0.817,0.896,0.962,1.003,1.033,1.048,1.055,1.055,1.05,1.043,1.035,1.027,1.02,1.013,1.008,1.004,1.001,0.999,0.998,0.997,0.997,0.997,0.997,0.998,0.998,0.999,0.999,0.999,1,1);
  --k-glide:linear(0,0.046,0.135,0.241,0.349,0.461,0.552,0.632,0.7,0.762,0.808,0.846,0.877,0.904,0.924,0.94,0.953,0.963,0.971,0.977,0.982,0.986,0.989,0.992,0.994,0.995,0.996,0.997,0.998,0.998,1);
  --k-draw-ease:cubic-bezier(.65,0,.35,1);
  --k-line:var(--gold);
}

/* Underline Draw · quiet text links. A gold hairline draws in from the left on
   hover or focus and leaves to the right. Links that already rest on a rule keep
   it; the gold runs along it. */
:is(.footer-legal a,.footer-socials a,.studio-entry-link,.gallery-routes a:not(.gallery-route-primary),.legal-next a,.archive-teaser-note){
  position:relative;
}
:is(.footer-legal a,.footer-socials a,.studio-entry-link,.gallery-routes a:not(.gallery-route-primary),.legal-next a,.archive-teaser-note)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--k-line);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform 420ms var(--k-draw-ease);
  pointer-events:none;
}
:is(.footer-legal a,.footer-socials a,.studio-entry-link,.gallery-routes a:not(.gallery-route-primary),.legal-next a,.archive-teaser-note):is(:hover,:focus-visible)::after{
  transform:scaleX(1);
  transform-origin:left center;
}
/* the footer's instant gold border hands over to the drawn line */
:is(.footer-legal a,.footer-socials a):hover{border-bottom-color:transparent!important}
@media(hover:hover) and (pointer:fine){
  :is(.footer-legal a,.footer-socials a):hover{opacity:1}
}

/* Learn more hover (transitions.dev) · arrows on "→" links step forward on
   hover or focus with the house spring, and return the same way. */
.k-arrow{display:inline-block;transition:transform 520ms var(--k-spring)}
.k-arrow--gap{margin-left:.3em}
a:is(:hover,:focus-visible) > .k-arrow{transform:translateX(.22rem)}

/* Tab Pill Glide · the shop's category rail. While the active fill travels,
   the arriving tab hides its own fill (kinetics.js); at rest every tab is unchanged. */
.k-glide-rail{position:relative}
.k-glide-pill{position:absolute;left:0;top:0;z-index:0;pointer-events:none;will-change:transform,width}

/* Ring settle · chosen options. Colour comes from the chip's own edge, so gold
   options settle in gold; the default is gold too. */
.k-ring{
  position:absolute;
  z-index:5;
  box-sizing:border-box;
  border:1.5px solid var(--gold);
  pointer-events:none;
  transform-origin:center;
}

/* Loading skeletons · one quiet structure for anything slow (kinetics.js).
   Tone only: no shimmer sweep and no colour, a slow breath while waiting, and
   a dissolve into the real thing. Reduced motion keeps a still block. */
:root{
  --k-skel:color-mix(in srgb,var(--ink) 7%,transparent);
  --k-skel-deep:color-mix(in srgb,var(--ink) 12%,transparent);
}
:root[data-theme="dark"]{
  --k-skel:color-mix(in srgb,var(--ink) 9%,transparent);
  --k-skel-deep:color-mix(in srgb,var(--ink) 15%,transparent);
}
@keyframes k-skel-in{from{opacity:0}to{opacity:1}}
@keyframes k-skel-breathe{0%,100%{background-color:var(--k-skel)}50%{background-color:var(--k-skel-deep)}}
.k-skel-veil{
  position:absolute;
  z-index:3;
  pointer-events:none;
  background-color:var(--k-skel);
  animation:k-skel-in 300ms ease both,k-skel-breathe 1.8s ease-in-out 300ms infinite;
  transition:opacity 440ms var(--k-draw-ease);
}
.k-skel-veil.is-done{opacity:0;animation-play-state:paused}
.k-skel{
  display:grid;
  gap:.7rem;
  padding-block:1rem;
  animation:k-skel-in 300ms ease 300ms both;
}
.k-skel-line{
  display:block;
  height:.85rem;
  border-radius:999px;
  background-color:var(--k-skel);
  animation:k-skel-breathe 1.8s ease-in-out 300ms infinite;
}
.k-skel-line:nth-of-type(3n+1){width:72%}
.k-skel-line:nth-of-type(3n+2){width:94%}
.k-skel-line:nth-of-type(3n){width:58%}
.k-skel--tiles{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}
.k-skel--tiles .k-skel-line{width:auto;height:auto;aspect-ratio:3/4;border-radius:var(--r-sm,10px)}

/* Toast Overshoot · the status note rises a touch past its place and settles. */
.toast{transform:translate(-50%,.85rem);transition:opacity .25s ease,transform .3s cubic-bezier(.4,0,1,1)}
.toast.show{transform:translate(-50%,-.25rem);transition:opacity .25s ease,transform 600ms var(--k-spring)}

@media(prefers-reduced-motion:reduce){
  :is(.footer-legal a,.footer-socials a,.studio-entry-link,.gallery-routes a,.legal-next a,.archive-teaser-note)::after{transition:none}
  .toast,.toast.show{transition:opacity .2s;transform:translate(-50%,0)}
  .k-ring,.k-glide-pill{display:none}
  .k-skel-veil,.k-skel,.k-skel-line{animation:none;transition:none}
  .k-arrow,a:is(:hover,:focus-visible) > .k-arrow{transition:none;transform:none}
}