/* The glass layer: frosted panes, capsule buttons, and paintbrushes floating behind the glass.
   Scoped to html.glass (set on every page), so removing that class returns the plain design. */
@property --shine{syntax:"<number>";inherits:true;initial-value:0}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

.glass{
  --g-tint:rgb(15 23 41 / .62);
  --g-bg:linear-gradient(145deg,rgb(255 255 255 / .12) 0%,rgb(255 255 255 / .035) 40%,rgb(255 255 255 / .02) 62%,rgb(255 255 255 / .07) 100%),var(--g-tint);
  --g-edge:linear-gradient(135deg,rgb(255 255 255 / .5) 0%,rgb(255 255 255 / .08) 32%,rgb(255 255 255 / .03) 62%,rgb(214 188 134 / .42) 100%);
  --g-blur:blur(22px) saturate(1.55);
  --g-shadow:inset 0 1px 0 rgb(255 255 255 / .16),inset 0 0 40px rgb(255 255 255 / .025),0 44px 90px -40px rgb(0 0 0 / .85),0 10px 30px -14px rgb(0 0 0 / .55);
  --g-shadow-hi:inset 0 1px 0 rgb(255 255 255 / .24),inset 0 0 40px rgb(255 255 255 / .05),0 60px 110px -40px rgb(0 0 0 / .9),0 0 0 1px rgb(214 188 134 / .14),0 0 60px -20px rgb(214 188 134 / .25);
  --g-r:22px;
  --text-2:#BFC6D6;
}

/* =========================================================
   1. The glass material, and how it comes alive under the pointer
   ========================================================= */
.glass :is(.museum-label,.promise-list li,.fin-copy,.studio-copy,.faq-list,.finale-copy,.buy,.co-summary,.co-pay,.compare .table-wrap,.prose.page-pad,.thanks){
  --gx:50%;--gy:-30%;--ax:1;--ay:0;--lift:0px;--tilt-max:3deg;
  position:relative;
  background:radial-gradient(520px circle at var(--gx) var(--gy),rgb(255 250 238 / calc(var(--shine) * 1)),rgb(255 250 238 / 0) 60%),var(--g-bg);
  border:0;
  border-radius:var(--g-r);
  box-shadow:var(--g-shadow);
  -webkit-backdrop-filter:var(--g-blur);
  backdrop-filter:var(--g-blur);
  rotate:var(--ax) var(--ay) 0 var(--ang);
  translate:0 var(--lift);
  transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out),rotate .8s var(--ease-lux),translate .7s var(--ease-lux),box-shadow .6s var(--ease-out),--shine .6s var(--ease-out);
}
/* a gradient hairline edge that catches the light, brightest where the pointer is */
.glass :is(.museum-label,.promise-list li,.fin-copy,.studio-copy,.faq-list,.finale-copy,.buy,.co-summary,.co-pay,.compare .table-wrap,.prose.page-pad,.thanks)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(260px circle at var(--gx) var(--gy),rgb(255 248 228 / calc(var(--shine) * 6)),rgb(255 248 228 / 0) 70%),var(--g-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.glass .g-on{--shine:.07;--lift:-4px;box-shadow:var(--g-shadow-hi)}
.glass .g-on.museum-label,.glass .promise-list li.g-on{--shine:.09}
/* perspective lives on the parents so each pane tilts in real depth */
.glass :is(.piece-link,.promise-list,.fin-grid,.studio-grid,.faq-grid,.finale,.product-grid,.checkout-grid){perspective:1600px}
.glass .fin-copy,.glass .faq-list{--tilt-max:1.2deg}
/* panes that carry paragraphs get a slightly deeper tint, so text stays clear over any glow behind */
.glass :is(.fin-copy,.studio-copy,.faq-list,.finale-copy,.buy,.co-summary,.co-pay,.compare .table-wrap,.prose.page-pad,.thanks){--g-tint:rgb(15 23 41 / .72)}
.glass .studio-copy,.glass .finale-copy{--tilt-max:1.8deg}
.glass .buy,.glass .co-summary,.glass .co-pay{--tilt-max:.8deg}
.glass .prose.page-pad,.glass .thanks,.glass .compare .table-wrap{--tilt-max:0deg}

/* header: deeper frost and a lit lower edge */
.glass .site-head::before{background:rgb(11 18 34 / .48);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}
.glass .site-head.scrolled{border-bottom-color:rgb(255 255 255 / .1);box-shadow:inset 0 -1px 0 rgb(214 188 134 / .16)}

/* =========================================================
   2. Buttons, pills and chips: frosted capsules with a lit rim
   ========================================================= */
.glass .btn,.glass .cart-btn,.glass .seg span,.glass .wall-labels a,.glass .skip-hero,.glass .stepper{
  border:0;
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .34),inset 0 -1px 0 rgb(255 255 255 / .05),inset 0 0 0 1px rgb(255 255 255 / .14),0 12px 30px -14px rgb(0 0 0 / .7);
}
.glass .btn{
  --gx:50%;--gy:-40%;
  min-height:52px;padding:.75rem 1.7rem;font-weight:500;letter-spacing:.05em;
  transition:background-color .35s var(--ease-out),box-shadow .45s var(--ease-out),transform .35s var(--ease-lux),color .35s var(--ease-out),--shine .45s var(--ease-out);
}
/* clear glass */
.glass .btn-ghost{
  color:var(--text);
  background:radial-gradient(160px circle at var(--gx) var(--gy),rgb(255 255 255 / calc(var(--shine) * 1.6)),rgb(255 255 255 / 0) 70%),linear-gradient(180deg,rgb(255 255 255 / .14) 0%,rgb(255 255 255 / .05) 55%,rgb(255 255 255 / .08) 100%),rgb(11 18 34 / .42);
}
.glass .btn-ghost:hover{--shine:.12;color:var(--text);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 0 0 1px rgb(255 255 255 / .26),0 18px 40px -16px rgb(0 0 0 / .75),0 0 34px -10px rgb(190 205 235 / .35)}
/* gold glass for the one primary action */
.glass .btn-primary{
  color:#FFF8EA;
  background:radial-gradient(180px circle at var(--gx) var(--gy),rgb(255 246 222 / calc(var(--shine) * 2)),rgb(255 246 222 / 0) 70%),linear-gradient(180deg,rgb(244 228 190 / .62) 0%,rgb(214 188 134 / .34) 50%,rgb(214 188 134 / .46) 100%),rgb(11 18 34 / .55);
  box-shadow:inset 0 1px 0 rgb(255 250 236 / .7),inset 0 -1px 0 rgb(255 240 210 / .12),inset 0 0 0 1px rgb(232 211 166 / .55),inset 0 -12px 26px rgb(214 188 134 / .16),0 14px 36px -14px rgb(214 188 134 / .5);
  text-shadow:0 1px 1px rgb(40 28 8 / .35);
}
.glass .btn-primary:hover{--shine:.16;color:#FFFBF2;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 252 242 / .85),inset 0 0 0 1px rgb(240 222 184 / .8),inset 0 -12px 26px rgb(214 188 134 / .22),0 20px 44px -14px rgb(214 188 134 / .6),0 0 48px -8px rgb(214 188 134 / .5)}
.glass .btn:active{transform:translateY(0) scale(.98)}
/* the round arrow disc on forward links, like the reference */
.glass a.btn-primary{gap:1rem;padding-inline-end:.45rem}
.glass a.btn-primary::before{
  content:"";order:2;flex:none;width:38px;height:38px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 6l-6 6 6 6' fill='none' stroke='%23FFF8EA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat,linear-gradient(180deg,rgb(255 255 255 / .34),rgb(255 255 255 / .08));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),inset 0 0 0 1px rgb(255 255 255 / .28),0 4px 12px -4px rgb(0 0 0 / .5);
  transition:transform .5s var(--ease-lux);
}
.glass a.btn-primary:hover::before{transform:translateX(-4px)}
.glass .btn-lg{min-height:58px}

/* capsules */
.glass .cart-btn{background:linear-gradient(180deg,rgb(255 255 255 / .12),rgb(255 255 255 / .04)),rgb(11 18 34 / .35);transition:box-shadow .4s var(--ease-out),transform .35s var(--ease-lux)}
.glass .cart-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 0 0 1px rgb(214 188 134 / .5),0 12px 30px -14px rgb(0 0 0 / .7),0 0 26px -8px rgb(214 188 134 / .4)}
.glass .cart-count{box-shadow:inset 0 1px 0 rgb(255 255 255 / .6)}
.glass .seg span{background:linear-gradient(180deg,rgb(255 255 255 / .1),rgb(255 255 255 / .03)),rgb(11 18 34 / .3);color:var(--text-2)}
.glass .seg label:hover span{color:var(--text);box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),inset 0 0 0 1px rgb(255 255 255 / .26)}
.glass .seg input:checked+span{color:#FFF8EA;background:linear-gradient(180deg,rgb(242 224 184 / .42),rgb(214 188 134 / .2)),rgb(11 18 34 / .4);box-shadow:inset 0 1px 0 rgb(255 250 236 / .65),inset 0 0 0 1px rgb(232 211 166 / .6)}
.glass .stepper{background:linear-gradient(180deg,rgb(255 255 255 / .1),rgb(255 255 255 / .03));border-radius:var(--r-pill)}
.glass .skip-hero{background:linear-gradient(180deg,rgb(255 255 255 / .12),rgb(255 255 255 / .04)),rgb(11 18 34 / .45)}

/* the wall labels on the hero: name first, a hairline, then the number */
.glass .wall-labels a{
  align-items:center;gap:.7rem;min-height:42px;padding:.5rem 1.15rem .42rem;
  background:linear-gradient(180deg,rgb(255 255 255 / .14),rgb(255 255 255 / .04)),rgb(8 12 24 / .5);
  transition:box-shadow .4s var(--ease-out),transform .4s var(--ease-lux);
}
.glass .wall-labels a:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 0 0 1px rgb(214 188 134 / .55),0 14px 34px -14px rgb(0 0 0 / .8),0 0 30px -8px rgb(214 188 134 / .45)}
.glass .wall-labels .no{order:2;padding-inline-start:.7rem;border-inline-start:1px solid rgb(255 255 255 / .2);font-size:.66rem;line-height:1.1;letter-spacing:.2em}

/* =========================================================
   3. Sections laid out as layers
   ========================================================= */
/* works: each label is a pane laid over the bottom of its frame; the frosted strip shows the painting */
.glass .museum-label{margin:-56px 14px 0;padding:calc(56px + .85rem) 1.35rem 1.25rem;max-width:none;z-index:2;border-top:0;--tilt-max:3.5deg}
.glass .museum-label .label-meta{border-top-color:rgb(255 255 255 / .1)}

/* the marquee becomes a frosted band, so whatever floats behind it softens */
.glass .marquee{background:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / .02)),rgb(15 23 41 / .5);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-block-color:rgb(255 255 255 / .1);box-shadow:inset 0 1px 0 rgb(255 255 255 / .1)}

/* promises: four floating tiles */
.glass .promises{position:relative;isolation:isolate;background:none;border:0;padding-block:var(--sp-6)}
.glass .promise-list{gap:1.2rem;padding-block:0}
.glass .promise-list li{padding:1.4rem 1.35rem;align-items:center}
.glass .promise-list svg{flex:none;width:44px;height:44px;padding:9px;border-radius:50%;background:linear-gradient(180deg,rgb(255 255 255 / .14),rgb(255 255 255 / .03));box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 0 0 1px rgb(255 255 255 / .1)}

/* finishes: the controls float on one pane */
.glass .finishes{position:relative;isolation:isolate}
.glass .fin-copy{padding:clamp(1.8rem,3vw,2.9rem)}
.glass .fin-copy .opt-body{background:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / .02));border-color:rgb(255 255 255 / .14)}
.glass .fin-copy .opt input:checked+.opt-body{background:linear-gradient(180deg,rgb(242 224 184 / .14),rgb(214 188 134 / .05));border-color:rgb(232 211 166 / .7)}
.glass .fin-stage .fin-layers{border-radius:var(--g-r)}

/* studio: a wide picture, and a pane of glass that overlaps its far edge */
.glass .studio{position:relative;isolation:isolate}
.glass .studio-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:0;align-items:center}
.glass .studio-img{grid-column:1 / 9;grid-row:1}
.glass .studio-img img{border-radius:var(--g-r)}
.glass .studio-img figcaption{position:absolute;z-index:4;top:14px;inset-inline-end:14px;margin:0;padding:.3rem .8rem;border-radius:var(--r-pill);font-size:.75rem;letter-spacing:.08em;color:var(--text);background:linear-gradient(180deg,rgb(255 255 255 / .14),rgb(255 255 255 / .04)),rgb(11 18 34 / .55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 0 0 1px rgb(255 255 255 / .14)}
.glass .studio-copy{grid-column:7 / 13;grid-row:1;z-index:2;padding:clamp(2rem,3.4vw,3.2rem);max-width:600px;justify-self:end}
.glass .studio-copy p{max-width:none}

/* faq: one sheet */
.glass .faq{position:relative;isolation:isolate}
.glass .faq-list{padding:.5rem clamp(1.3rem,2.6vw,2.3rem)}
.glass .faq-list details:first-child{border-top:0}
.glass .faq-list details:last-child{border-bottom:0}
.glass .faq-list summary::after{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:1.3rem;background:linear-gradient(180deg,rgb(255 255 255 / .12),rgb(255 255 255 / .03));box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 0 0 1px rgb(255 255 255 / .12)}

/* finale: a card hanging in the gallery */
.glass .finale-copy{width:min(760px,100% - 2 * var(--gutter));padding:clamp(2.2rem,4vw,3.6rem);margin-block:var(--sp-7);z-index:2}
.glass .finale-media img{opacity:.55}

/* =========================================================
   4. Paintbrushes behind the glass (placed and moved by brushes.js)
   ========================================================= */
.brush-depth{position:absolute;inset:0;z-index:-1;pointer-events:none}
.brush{position:absolute;width:auto;max-width:none;transform:translate3d(0,var(--py,0px),0) rotate(calc(var(--rot,0deg) + var(--turn,0deg)));will-change:transform;filter:drop-shadow(0 34px 30px rgb(0 0 0 / .45))}
.brush.far{opacity:.82;filter:blur(1.4px) drop-shadow(0 24px 22px rgb(0 0 0 / .4))}
.finale .brush-depth{z-index:0}

/* =========================================================
   5. Store pages: product, cart, checkout, and the text pages
   ========================================================= */
.glass .buy{padding:clamp(1.5rem,2.6vw,2.4rem);align-self:start}
.glass .main-shot>img{background:linear-gradient(160deg,rgb(255 255 255 / .06),rgb(255 255 255 / .02));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1),0 40px 80px -40px rgb(0 0 0 / .8);border-radius:var(--g-r)}
.glass .thumb{border:0;border-radius:12px;background:rgb(255 255 255 / .04);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12);transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-lux)}
.glass .thumb:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .3)}
.glass .thumb[aria-current="true"]{box-shadow:inset 0 0 0 1px rgb(232 211 166 / .85),0 0 22px -6px rgb(214 188 134 / .5)}
.glass .buy .opt-body{background:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / .02));border-color:rgb(255 255 255 / .14)}
.glass .buy .opt input:checked+.opt-body{background:linear-gradient(180deg,rgb(242 224 184 / .14),rgb(214 188 134 / .05));border-color:rgb(232 211 166 / .7)}
.glass .compare .table-wrap{padding:.4rem clamp(1rem,2.4vw,2rem)}
.glass .compare tbody tr:last-child :is(th,td){border-bottom:0}
.glass .other .frame{border-radius:4px}
.glass .co-summary,.glass .co-pay{padding:clamp(1.3rem,2.4vw,2rem)}
.glass .prose.page-pad{margin-top:calc(var(--head-h) + 2rem);margin-bottom:var(--sp-7);padding:clamp(1.5rem,4vw,3.2rem)}
.glass .thanks{margin-top:calc(var(--head-h) + 2rem);margin-bottom:var(--sp-7);padding:clamp(1.5rem,4vw,3.2rem)}
.glass .contact-list div{border-bottom-color:rgb(255 255 255 / .1)}
/* the cart: a tall pane of glass sliding in from the edge */
.glass dialog.drawer{background:linear-gradient(160deg,rgb(255 255 255 / .1),rgb(255 255 255 / .03) 40%,rgb(255 255 255 / .05)),rgb(15 23 41 / .8);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);box-shadow:inset -1px 0 0 rgb(255 255 255 / .16),0 0 80px rgb(0 0 0 / .55)}
.glass dialog.drawer::backdrop{background:rgb(5 8 18 / .5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.glass .drawer-head{border-bottom-color:rgb(255 255 255 / .1)}
.glass .drawer-foot{background:rgb(255 255 255 / .04);border-top-color:rgb(255 255 255 / .1)}
.glass .ci{border-bottom-color:rgb(255 255 255 / .08)}
.glass .nudge{border:0;background:linear-gradient(180deg,rgb(242 224 184 / .1),rgb(214 188 134 / .03));box-shadow:inset 0 0 0 1px rgb(232 211 166 / .3);border-radius:14px}
.glass .sticky-buy{background:linear-gradient(180deg,rgb(255 255 255 / .1),rgb(255 255 255 / .03)),rgb(15 23 41 / .78);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border-top:0;box-shadow:inset 0 1px 0 rgb(255 255 255 / .16)}
.glass .toast{color:var(--text);background:linear-gradient(180deg,rgb(255 255 255 / .16),rgb(255 255 255 / .05)),rgb(15 23 41 / .8);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 0 0 1px rgb(255 255 255 / .14),0 14px 34px rgb(0 0 0 / .5)}
.glass .notice{border:0;background:linear-gradient(180deg,rgb(242 224 184 / .1),rgb(214 188 134 / .03));box-shadow:inset 0 0 0 1px rgb(232 211 166 / .4);border-radius:14px}

@media (max-width:900px){
  .glass .studio-img,.glass .studio-copy{grid-column:1 / -1}
  .glass .studio-copy{grid-row:2;margin:-64px 12px 0;max-width:none;justify-self:stretch}
  .glass .museum-label{margin:-44px 10px 0;padding-top:calc(44px + .75rem)}
}
@media (max-width:560px){
  .glass .promise-list li{padding:1.1rem}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{--g-tint:rgb(15 23 41 / .93)}
}
@media (prefers-reduced-motion:reduce){
  .glass :is(.museum-label,.promise-list li,.fin-copy,.studio-copy,.faq-list,.finale-copy,.buy,.co-summary,.co-pay,.compare .table-wrap,.prose.page-pad,.thanks){rotate:none;translate:none}
  .glass .btn:hover,.glass .wall-labels a:hover,.glass .cart-btn:hover{transform:none}
  .brush{transform:rotate(var(--rot,0deg))}
}
@media (prefers-reduced-transparency:reduce){
  .glass{--g-tint:rgb(15 23 41 / .95)}
}