/* WĀDI — site.css */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --w:#FFFFFF;--cream:#FAFAF8;--light:#ECEAE5;--mid:#B8B4AC;--dim:#6E6B65;
  --dark:#1A1917;--black:#0D0D0B;
  --accent:#b88162;
}
html{overflow-x:clip;scroll-behavior:auto}
body{background-color:#FFFFFF;color:var(--dark);font-weight:300;line-height:1.62;
  overflow-x:clip;cursor:none;transition:background-color 2.2s cubic-bezier(.16,1,.3,1);}
h1,h2,h3,h4,h5,h6{text-transform:uppercase;}
html.pdp-intro-lock,
body.pdp-intro-lock{
  height:100%;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}
body.pdp-intro-lock{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
}

/* noise */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");}

[data-bg]{transition:background-color 2.2s cubic-bezier(.16,1,.3,1),color 2.2s cubic-bezier(.16,1,.3,1);}

/* glow — small + dark on light, warm on dark sections */
#glow{position:fixed;inset:0;pointer-events:none;z-index:9001;
  transition:background .5s;}
body.s-dk #glow{background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(255,248,220,.08),transparent 70%);}

/* cursor */
#cur{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--dark);border-radius:50%;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:multiply;
  transition:width .25s,height .25s,background .3s,opacity .25s,mix-blend-mode .3s;}
#curR{position:fixed;top:0;left:0;width:36px;height:36px;border:1px solid rgba(26,25,23,.22);
  border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  transition:width .5s cubic-bezier(.16,1,.3,1),height .5s,border-color .3s,opacity .4s;}
#cur.hov{width:4px;height:4px;opacity:.28}
#curR.hov{width:54px;height:54px}
#cur.inv{background:white;mix-blend-mode:normal}
#curR.inv{border-color:rgba(255,255,255,.22)}
#cur.zoom{opacity:0}
#curR.zoom{width:64px;height:64px;border-color:rgba(26,25,23,.55);background:rgba(250,250,248,.24);backdrop-filter:blur(4px);}
#curR.zoom::before,#curR.zoom::after{
  content:'';position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);opacity:.72;}
#curR.zoom::before{width:18px;height:1px;}
#curR.zoom::after{width:1px;height:18px;}
body.pdp-lightbox-active #cur{
  width:8px!important;height:8px!important;background:white;mix-blend-mode:normal;
  opacity:1!important;z-index:13001;}
body.pdp-lightbox-active #cur.zoom{opacity:0!important;}
body.pdp-lightbox-active #curR{
  border-color:rgba(255,255,255,.64);color:white;opacity:1!important;z-index:13000;}
body.pdp-lightbox-active #curR.zoom{
  width:64px;height:64px;border-color:rgba(255,255,255,.68);
  background:rgba(255,255,255,.08);}

/* loader */
#loader{position:fixed;inset:0;background:var(--dark);z-index:10000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.8rem;
  transition:opacity .45s ease;}
.ld-logo{height:54px;width:auto;filter:brightness(0) invert(1);
  opacity:0;transform:translateY(14px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1);}
#loader .ld-logo{height:54px!important;max-height:54px!important;width:auto!important;max-width:min(220px,42vw)!important;object-fit:contain!important;}
.ld-logo.vis{opacity:1;transform:translateY(0);}
.ld-pct{font-size:.56rem;letter-spacing:.3em;font-family:var(--sans);color:var(--mid);}
.ld-bar{width:100px;height:1px;background:rgba(255,255,255,.1);position:relative;overflow:hidden;margin-top:.3rem;}
.ld-bar-fill{position:absolute;top:0;left:0;height:100%;background:var(--mid);width:0;transition:width .1s;}

/* Suppress any legacy page-builder / Salient theme header elements */
#header-outer,#top-bar,.header-outer,.nectar-header,.top-bar,
.page-header-bg,body>div[class*="header"]:not(#hdr),
body>header:not(#hdr){display:none!important;}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--wadi-edge);height:var(--wadi-header-h);color:var(--dark);
  background:#FFFFFF!important;border-bottom:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:color .95s cubic-bezier(.16,1,.3,1),background .95s cubic-bezier(.16,1,.3,1);gap:clamp(16px,3vw,40px);}
header::before{content:'';position:absolute;left:var(--wadi-edge);right:var(--wadi-edge);bottom:7px;height:1px;background:rgba(26,25,23,.08);pointer-events:none;}
header::after{content:'';position:absolute;inset:0;background:rgba(250,250,248,0);
  backdrop-filter:blur(0px);transition:background 1s cubic-bezier(.16,1,.3,1),backdrop-filter 1s cubic-bezier(.16,1,.3,1);z-index:-1;}
header#hdr{z-index:5000;}
header.sc::after{background:rgba(250,250,248,.92);backdrop-filter:blur(24px);}
header.dk{color:var(--dark);}
header.dk::after{background:rgba(255,255,255,0);}
header.dk.sc::after{background:rgba(255,255,255,.96);backdrop-filter:blur(24px);}
.logo{text-decoration:none;display:flex;align-items:center;flex-shrink:0;}
/* !important guards against WooCommerce/builder img overrides */
.logo-img{width:auto!important;
  filter:none;transition:filter .4s;display:block;}
header.dk .logo-img{filter:none;}
.h-right{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px);margin-left:auto;white-space:nowrap;}
.h-right nav{display:flex;align-items:center;gap:clamp(24px,3.85vw,78px);}
nav a{font-size:16px;line-height:1;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:currentColor;
  text-decoration:none;opacity:1;position:relative;transition:opacity .3s;}
nav a::after{content:'';position:absolute;bottom:-3px;left:0;right:100%;height:1px;
  background:var(--accent);transition:right .4s;}
nav a:hover{opacity:1;}
nav a:hover::after{right:0;}
nav a.active{opacity:1;}
nav a.active::after{right:0;}
.h-book-btn{letter-spacing:.16em;text-transform:uppercase;
  border:1px solid currentColor;padding:9px 18px;
  color:inherit;text-decoration:none;flex-shrink:0;
  opacity:.65;transition:opacity .3s;}
.h-book-btn:hover{opacity:1;}

/* section scale */
.sf{will-change:padding,border-radius;
  transition:padding .9s cubic-bezier(.16,1,.3,1),border-radius .9s cubic-bezier(.16,1,.3,1);}
.sf:not(.in){padding-left:3vw!important;padding-right:3vw!important;border-radius:12px;overflow:hidden;}
.sf.in{padding-left:var(--sfp,0)!important;padding-right:var(--sfp,0)!important;border-radius:0;}

/* reveal */
.rv{opacity:0;transform:translateY(28px);}
.rv.on{opacity:1;transform:translateY(0);}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.38s}.rv.d4{transition-delay:.52s}
.ov{overflow:hidden;}
.sl{display:block;transform:translateY(102%);transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.sl.on{transform:translateY(0);}
.sl.d1{transition-delay:.15s}.sl.d2{transition-delay:.3s}.sl.d3{transition-delay:.46s}

/* wipe */
.wipe{position:relative;overflow:hidden;}
.wipe::after{content:'';position:absolute;inset:0;background:var(--wipe-color,var(--cream));
  transform:translateY(0);z-index:2;}
.wipe.on::after{transform:translateY(101%);}
.wipe img,.wipe .proj-img{opacity:0;transform:scale(1.1);
  transition:opacity .6s .4s ease,transform 1.5s .1s cubic-bezier(.25,.46,.45,.94)!important;}
.wipe.on img,.wipe.on .proj-img{opacity:1;transform:scale(1.04)!important;}
.proj-item:hover .wipe.on .proj-img{transform:scale(1)!important;}

/* ─── HERO (home full-screen) ─── */
.hero{height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.admin-bar .hero{height:calc(100vh - 32px);}
@media(max-width:782px){.admin-bar .hero{height:calc(100vh - 46px);}}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transition:transform 7s ease;will-change:transform;display:block;}
.hero-bg.ld{transform:scale(1.02);}
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(13,13,11,.52) 0%,rgba(13,13,11,.24) 42%,rgba(13,13,11,.12) 100%),
    rgba(13,13,11,.12);}
.hero-statement{
  position:relative;z-index:4;
  width:min(980px,86vw);
  padding:calc(86px + 8vh) 20px 8vh;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-height:100%;text-align:center;color:#fff;pointer-events:auto;}
.hero-statement-title{
  font-family:var(--serif);
  line-height:1.12;font-weight:300;letter-spacing:.02em;
  text-transform:uppercase;margin:0 0 1.2rem;
  text-shadow:0 16px 48px rgba(0,0,0,.34);}
.hero-statement-link{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.1vw,2rem);
  line-height:1;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;text-decoration:none;text-shadow:0 14px 40px rgba(0,0,0,.36);
  transition:opacity .28s ease,letter-spacing .28s ease;}
.hero-statement-link:hover{opacity:.72;letter-spacing:.12em;}
.home-reference-page{background:#FFFFFF;}
.home-video-section{
  background:#FFFFFF;}
.home-video-shell{
  margin:0 auto;}
.home-video-frame{
  overflow:hidden;}
.home-hero-video{
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;}
.home-hero-poster{filter:saturate(.9) contrast(.96);}
.hero-content{position:relative;z-index:2;padding:0 6vw 8vw;color:white;max-width:700px;width:100%;}
.hero-eye{letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.45);
  margin-bottom:1.8rem;opacity:0;transform:translateY(14px);
  transition:opacity .9s ease,transform .9s ease;}
.hero-eye.on{opacity:1;transform:translateY(0);}
.hero-h{font-family:var(--serif);font-weight:300;
  line-height:1.02;letter-spacing:-.01em;margin-bottom:2rem;color:white;}
.hero-h em{font-style:italic;}
.hero-p{letter-spacing:.04em;
  color:rgba(255,255,255,.55);max-width:310px;margin-bottom:2.6rem;
  opacity:0;transform:translateY(14px);transition:opacity .9s .35s ease,transform .9s .35s ease;}
.hero-p.on{opacity:1;transform:translateY(0);}
.hero-scroll{position:absolute;bottom:48px;right:52px;
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;pointer-events:none;}
.sc-bar{width:1px;height:44px;background:rgba(255,255,255,.18);position:relative;overflow:hidden;}
.sc-bar::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:rgba(255,255,255,.6);animation:sb 1.7s ease infinite;}
@keyframes sb{0%{top:-100%}100%{top:100%}}
.sc-lbl{font-size:.44rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.36);writing-mode:vertical-rl;}

/* page inner hero */
.pg-hero{min-height:70vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;}
.pg-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.pg-hero-overlay{position:absolute;inset:0;
  background:linear-gradient(to right,rgba(13,13,11,.72) 45%,rgba(13,13,11,.2) 100%);}
.pg-hero-content{position:relative;z-index:2;padding:calc(var(--wadi-header-h) + 5vw) 6vw 7vw;color:white;}
.pg-hero-sub{letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:1.4rem;display:block;}
.pg-hero-h{font-family:var(--serif);font-weight:300;
  line-height:1.05;letter-spacing:-.01em;}
.pg-hero-h em{font-style:italic;}
/* plain text pg-hero (no image) */
.pg-hero-plain{padding:calc(var(--wadi-header-h) + clamp(50px,8vw,100px)) clamp(40px,7vw,100px) clamp(50px,6vw,80px);
  border-bottom:1px solid var(--light);}
.pg-hero-plain .pg-hero-sub{color:var(--mid);}
.pg-hero-plain .pg-hero-h{color:var(--dark);}

/* cta */
.cta{display:inline-flex;align-items:center;gap:14px;letter-spacing:.2em;
  text-transform:uppercase;color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:7px;
  transition:gap .35s,border-color .3s;opacity:.85;}
.cta:hover{gap:22px;opacity:1;border-color:var(--accent);}
.cta-dk{border-color:rgba(26,25,23,.35);color:var(--dark);}
.cta-dk:hover{border-color:var(--accent);}

/* ─── ABOUT SECTION ─── */
.about-sec{padding:clamp(80px,12vw,160px) clamp(40px,7vw,100px);text-align:center;}
.about-num{font-family:var(--serif);font-size:clamp(80px,12vw,160px);font-weight:300;
  line-height:1;display:block;}
.ey{letter-spacing:.34em;text-transform:uppercase;color:var(--mid);
  display:block;margin-bottom:1.3rem;}
.about-q{font-family:var(--serif);font-weight:300;
  line-height:1.38;letter-spacing:.02em;margin-bottom:1.6rem;text-transform:uppercase;}
.about-q em,.sh em{font-style:italic;}
.sh{font-family:var(--serif);font-weight:300;
  line-height:1.1;letter-spacing:-.01em;}
.bt{letter-spacing:.03em;color:var(--dim);max-width:480px;margin-bottom:1rem;margin-left:auto;margin-right:auto;}
.stats{display:flex;gap:clamp(28px,5vw,60px);padding-top:2.4rem;margin-top:2.4rem;
  border-top:1px solid var(--light);}
.stat-n{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:300;display:block;line-height:1;color:var(--accent);}
.stat-l{font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin-top:.4rem;display:block;}

/* ─── INTRO SECTION ─── */
.about-sec{transition:background-color 2.2s cubic-bezier(.16,1,.3,1);}
.about-sec .ey,.about-sec .about-q,.about-sec .bt,
.about-sec .about-num,.about-sec .stat-n,.about-sec .stat-l
{transition:color 2.2s cubic-bezier(.16,1,.3,1);}
.about-sec .stats{transition:border-color 2.2s cubic-bezier(.16,1,.3,1);}
/* light editorial default */
.about-sec{background-color:#FFFFFF;color:var(--dark);}
.about-sec .ey{color:var(--mid);}
.about-sec .bt{color:var(--dim);}
.about-sec .about-num{color:rgba(26,25,23,.1);}
.about-sec .stat-l{color:var(--mid);}
.about-sec .stats{border-top-color:var(--light);}
.about-sec.inv{background-color:#FFFFFF;color:var(--dark);}
.about-sec.inv .ey{color:var(--mid);}
.about-sec.inv .bt{color:var(--dim);}
.about-sec.inv .about-num{color:rgba(26,25,23,.1);}
.about-sec.inv .stat-l{color:var(--mid);}
.about-sec.inv .stats{border-top-color:var(--light);}
.intro-sec .about-q{max-width:760px;margin-left:auto;margin-right:auto;}
.intro-sec .intro-copy{max-width:760px;text-align:justify;text-align-last:left;}

/* ─── EDITORIAL ─── */
#editorial{padding:clamp(80px,10vw,130px) 0;overflow:hidden;}
.ed-head{padding:0 clamp(40px,7vw,100px);margin-bottom:3rem;
  display:flex;justify-content:space-between;align-items:flex-end;}
.ed-track{display:flex;gap:14px;padding:8px clamp(40px,7vw,100px) 32px;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;cursor:grab;}
.ed-track:active{cursor:grabbing;}
.ed-track::-webkit-scrollbar{display:none;}
.ed-card{flex:0 0 320px;scroll-snap-align:start;position:relative;overflow:hidden;background:var(--cream);aspect-ratio:3/4;}
.ed-card.lg{flex:0 0 440px;}.ed-card.xl{flex:0 0 500px;}
.ed-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s cubic-bezier(.25,.46,.45,.94);}
.ed-card:hover img{transform:scale(1.05);}
.ed-cap{position:absolute;bottom:0;left:0;right:0;padding:36px 22px 22px;
  background:linear-gradient(transparent,rgba(13,13,11,.55));color:white;}
.ed-num{font-size:.42rem;letter-spacing:.24em;opacity:.6;margin-bottom:.3rem;}
.ed-title{font-family:var(--serif);font-size:.9rem;font-weight:300;letter-spacing:.04em;}
.ed-body{font-size:.56rem;line-height:1.55;opacity:.6;margin-top:.28rem;max-width:180px;}
.ed-memo{display:flex;flex-direction:column;justify-content:space-between;
  padding:36px 28px;aspect-ratio:3/4;background:var(--cream);}
.memo-big{font-family:var(--serif);font-size:2.6rem;font-weight:300;color:var(--mid);}
.memo-f{display:flex;flex-direction:column;gap:2px;margin-top:.6rem;}
.memo-r{font-size:.42rem;letter-spacing:.12em;color:var(--mid);border-bottom:1px solid var(--light);padding-bottom:2px;}
.memo-n{font-family:var(--serif);font-size:1rem;font-weight:300;letter-spacing:.08em;text-transform:uppercase;}
.memo-s{font-family:var(--serif);font-style:italic;font-size:.86rem;color:var(--mid);}

/* ─── PROJECTS ─── */
#projects{padding:clamp(80px,12vw,160px) clamp(40px,7vw,100px);background:var(--dark);}
.proj-head{display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:clamp(48px,7vw,96px);}
.proj-yr{font-family:var(--serif);font-size:clamp(4rem,8vw,7rem);font-weight:300;
  color:rgba(255,255,255,.05);line-height:1;}
.proj-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;row-gap:28px;}
.proj-item{position:relative;cursor:none;}
.proj-item:nth-child(1){grid-column:span 7;}
.proj-item:nth-child(2){grid-column:span 5;margin-top:80px;}
.proj-item:nth-child(3){grid-column:span 5;}
.proj-item:nth-child(4){grid-column:span 7;margin-top:-60px;}
.proj-wrap{overflow:hidden;background:#1e1e1c;}
.proj-wrap.tall{aspect-ratio:4/3;}.proj-wrap.wide{aspect-ratio:3/4;}
.proj-img{width:100%;height:100%;object-fit:cover;display:block;}
.proj-reveal{position:absolute;bottom:0;left:0;right:0;
  padding:40px 18px 18px;background:linear-gradient(transparent,rgba(13,13,11,.72));
  color:white;transform:translateY(100%);transition:transform .52s cubic-bezier(.16,1,.3,1);}
.proj-item:hover .proj-reveal{transform:translateY(0);}
.proj-rn{font-family:var(--serif);font-size:1.1rem;font-weight:300;display:block;}
.proj-rm{font-size:.46rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:.6;margin-top:.3rem;display:flex;gap:14px;}

/* ─── PRESS ─── */
.press-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px);
  margin-top:clamp(40px,6vw,64px);}
.press-item{padding-bottom:clamp(20px,3vw,36px);border-bottom:1px solid var(--light);}
.press-pub{font-size:.42rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);margin-bottom:.6rem;}
.press-q{font-family:var(--serif);font-size:.98rem;font-weight:300;line-height:1.5;margin-bottom:.6rem;color:var(--dark);}
.press-date{font-size:.46rem;letter-spacing:.14em;color:var(--mid);}

/* ─── SERVICES ─── */
#services{padding:clamp(80px,12vw,160px) clamp(40px,7vw,100px);}
.svc-list{margin-top:clamp(40px,6vw,80px);}
.svc-item{display:grid;grid-template-columns:60px 1fr 1fr 22px;gap:28px;
  align-items:start;padding:26px 0;border-top:1px solid var(--light);
  position:relative;overflow:hidden;cursor:none;}
.svc-item:last-child{border-bottom:1px solid var(--light);}
.svc-item::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:var(--accent);transition:width .65s ease;}
.svc-item:hover::after{width:100%;}
.svc-num{font-family:var(--serif);font-size:.68rem;font-style:italic;color:var(--mid);}
.svc-name{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.65rem);font-weight:300;line-height:1.2;}
.svc-desc{font-size:.63rem;line-height:1.9;color:var(--dim);max-width:340px;}
.svc-arr{font-size:1rem;color:var(--mid);transition:transform .38s,color .3s;align-self:center;}
.svc-item:hover .svc-arr{transform:translate(6px,-6px);color:var(--dark);}
.ft-brand{display:flex;align-items:center;flex-shrink:0;}
.ft-nav{display:flex;align-items:center;gap:clamp(18px,2.7vw,42px);}
.ft-links{list-style:none;display:flex;align-items:center;gap:clamp(24px,3.6vw,70px);}
.ft-links a{color:rgba(26,25,23,.72);text-decoration:none;letter-spacing:.38em;text-transform:uppercase;transition:color .3s;}
.ft-links a:hover{color:var(--dark);}
.ft-socials{display:flex;align-items:center;gap:clamp(14px,1.5vw,24px);}
.ft-social{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:rgba(26,25,23,.72);transition:color .3s;}
.ft-social:hover{color:var(--dark);}
.ft-copy{letter-spacing:.34em;text-transform:uppercase;color:rgba(26,25,23,.22);}

/* ─── ACCORDION ─── */
.acc{border-top:1px solid var(--light);}
.acc-item{border-bottom:1px solid var(--light);}
.acc-hd{display:flex;justify-content:space-between;align-items:center;
  padding:15px 0;cursor:none;user-select:none;}
.acc-lb{letter-spacing:.18em;text-transform:uppercase;}
.acc-ic{width:16px;height:16px;position:relative;flex-shrink:0;}
.acc-ic::before,.acc-ic::after{content:'';position:absolute;background:currentColor;transition:transform .4s,opacity .4s;}
.acc-ic::before{width:10px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%);}
.acc-ic::after{width:1px;height:10px;top:50%;left:50%;transform:translate(-50%,-50%);}
.acc-item.op .acc-ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.acc-bd{max-height:0;overflow:hidden;transition:max-height .5s ease;}
.acc-in{padding:0 0 18px;color:var(--dark);opacity:.65;}
.acc-in p+p{margin-top:.7rem;}
.acc-tbl{list-style:none;}
.acc-tbl li{display:flex;gap:14px;padding:5px 0;border-bottom:1px solid var(--light);}
.acc-tbl li:last-child{border:none;}
.acc-tbl li span:first-child{font-size:.46rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);min-width:88px;}

/* ─── PDP (product page) ─── */
.pdp-layout{display:grid;grid-template-columns:52% 1fr;align-items:start;padding-top:86px;}
.pdp-gallery{position:sticky;top:86px;height:calc(100vh - 86px);overflow:hidden;background:var(--cream);}
.pdp-gallery-inner{position:relative;width:100%;height:100%;}
.pdp-gallery-img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;
  opacity:0;transition:opacity .85s cubic-bezier(.25,.46,.45,.94);}
.pdp-gallery-img.active{opacity:1;}
.pdp-gallery-thumbs{position:absolute;bottom:24px;left:20px;display:flex;flex-direction:column;gap:5px;z-index:2;}
.pdp-thumb{width:44px;height:56px;object-fit:cover;opacity:.38;cursor:none;
  transition:opacity .3s;border:1.5px solid transparent;display:block;}
.pdp-thumb.on{opacity:1;border-color:rgba(255,255,255,.55);}
.pdp-info-scroll{padding:clamp(36px,5vw,60px) clamp(28px,4vw,52px);min-height:calc(100vh - 76px);}
.pdp-brand{font-size:.46rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mid);margin-bottom:.85rem;}
.pdp-title{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.8rem);font-weight:300;
  line-height:1.1;letter-spacing:-.01em;margin-bottom:.35rem;}
.pdp-title em{font-style:italic;}
.pdp-sub{font-family:var(--serif);font-size:.84rem;font-style:italic;color:var(--mid);margin-bottom:1.6rem;}
.pdp-price{font-family:var(--serif);font-size:1.4rem;font-weight:300;margin-bottom:1.8rem;}
.pdp-price small{font-size:.56rem;letter-spacing:.1em;color:var(--mid);font-family:var(--sans);}
.pdp-actions{display:flex;gap:10px;margin-bottom:2.2rem;}
.btn-p{flex:1;color:var(--w);border:none;
  padding:14px 22px;letter-spacing:.22em;text-transform:uppercase;
  cursor:none;font-family:var(--sans);transition:background .3s;font-weight:300;}
.btn-s{width:46px;flex-shrink:0;background:none;border:1px solid var(--light);
  cursor:none;transition:border-color .3s;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--dark);}
.btn-s:hover{border-color:var(--dark);}
.pdp-trigger{padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--light);}
.pdp-trigger:first-child{padding-top:0;}
.pdp-trigger-lbl{letter-spacing:.24em;text-transform:uppercase;color:var(--mid);margin-bottom:.6rem;display:block;}
.pdp-trigger-title{font-family:var(--serif);font-size:1.1rem;font-weight:300;margin-bottom:.5rem;}
.pdp-trigger-body{color:var(--dim);}

/* ─── SHOP / COLLECTION GRID ─── */
.coll-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.pc{position:relative;cursor:none;text-decoration:none;color:inherit;display:block;}
.pc-img{aspect-ratio:1;overflow:hidden;background:var(--cream);margin-bottom:14px;position:relative;}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.25,.46,.45,.94);}
.pc:hover .pc-img img{transform:scale(1.07);}
.pc-ov{position:absolute;inset:0;background:rgba(26,25,23,.48);
  display:flex;align-items:center;justify-content:center;letter-spacing:.22em;text-transform:uppercase;color:white;
  opacity:0;transition:opacity .35s;z-index:2;}
.pc:hover .pc-ov{opacity:1;}
.pc-brand{letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin-bottom:3px;}
.pc-name{font-family:var(--serif);font-weight:300;display:block;margin-bottom:2px;}
.pc-price{display:none;}
.pc-tag{letter-spacing:.18em;text-transform:uppercase;color:var(--mid);
  opacity:0;transform:translateY(5px);transition:opacity .35s,transform .35s;margin-top:3px;}
.pc:hover .pc-tag{opacity:1;transform:translateY(0);}

/* ── Second gallery image on hover ─── */
/* Use .pc-img .pc-img-hover (specificity 0,2,0) to beat .wipe img (0,1,1) on transition */
.pc-img .pc-img-hover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .65s ease!important;z-index:1;}
/* Keep hover image hidden after wipe animation (.wipe.on img sets opacity:1, specificity 0,2,1 = 21) */
/* .wipe.on .pc-img-hover specificity 0,3,0 = 30 → wins */
.wipe.on .pc-img-hover{opacity:0;}
.pc:hover .pc-img-hover{opacity:1;}

/* ── Enquire Now button on card ─── */
.pc-enquire{
  display:inline-block;margin-top:10px;
  border:1.5px solid var(--accent);color:var(--accent);background:none;letter-spacing:.18em;text-transform:uppercase;
  padding:8px 16px;cursor:none;font-family:var(--sans);font-weight:300;
  transition:background .25s,color .25s;}
.pc-enquire:hover{background:var(--accent);color:white;}
.proc-car-slide .pc-enquire{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.5);}
.proc-car-slide .pc-enquire:hover{background:var(--accent);border-color:var(--accent);color:white;}

/* ─── COLLECTION PAGE ─── */
.coll-products-sec .coll-grid{grid-template-columns:repeat(2,1fr)!important;gap:26px!important;max-width:1160px;margin:0 auto;}
.coll-products-sec .pc-img{aspect-ratio:1!important;}
.coll-story-sec{padding:clamp(60px,8vw,100px) clamp(40px,7vw,100px);
  display:grid;grid-template-columns:1fr 1.7fr;gap:clamp(40px,6vw,80px);align-items:start;
  transition:background-color 2.4s cubic-bezier(.16,1,.3,1),color 2.4s cubic-bezier(.16,1,.3,1);}
.coll-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;overflow:hidden;}
.coll-gal-item{overflow:hidden;aspect-ratio:4/3;position:relative;}
.coll-gal-item.tall{aspect-ratio:3/4;grid-row:span 2;}
.coll-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s ease;}
.coll-gal-item:hover img{transform:scale(1.05);}
.coll-products-sec{padding:clamp(60px,8vw,100px) clamp(40px,7vw,100px);}
.coll-process-sec{padding:clamp(60px,8vw,100px) clamp(40px,7vw,100px);background:#FFFFFF;}
.sketch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:clamp(30px,4vw,48px);}
.sketch-item{aspect-ratio:1;overflow:hidden;background:var(--w);}
.sketch-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s ease;}
.sketch-item:hover img{transform:scale(1.06);}

/* ─── OBJECTS PAGE ─── */
.objects-page{background:#FFFFFF;color:var(--dark);}
.objects-rule{height:1px;background:rgba(26,25,23,.08);margin-bottom:clamp(62px,5vw,104px);}
.objects-head{justify-content:space-between;align-items:center;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(26,25,23,.22);}
.object-card{min-width:0;}
.object-link{color:inherit;text-decoration:none;}
.object-media{
  position:relative;overflow:hidden;background:#F3F1EC;
  width:100%;}
.object-ratio-1-1 .object-media{aspect-ratio:1/1;}
.object-ratio-9-16 .object-media{aspect-ratio:9/16;}
.object-ratio-4-5 .object-media{aspect-ratio:4/5;}
.object-ratio-3-4 .object-media{aspect-ratio:3/4;}
.object-ratio-2-3 .object-media{aspect-ratio:2/3;}
.object-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .55s ease;}
.object-link:hover .object-media img{transform:scale(1.035);}
.object-media .object-media-hover{position:absolute;inset:0;opacity:0;z-index:1;}
.wipe.on .object-media-hover{opacity:0;}
.object-link:hover .object-media-hover{opacity:1;}
.object-meta{
  margin:0 0 3px;
  min-height:0;
  display:flex;flex-direction:column;justify-content:flex-start;
  align-self:end;}
.object-type{
  display:block;line-height:1.2;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(26,25,23,.22);
  margin-bottom:7px;}
.object-name{
  font-family:var(--serif);
  line-height:1.15;font-weight:300;letter-spacing:.02em;text-transform:uppercase;}
.objects-empty{
  grid-column:1/-1;text-align:center;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);}

/* ─── ABOUT PAGE FONT OVERRIDES (+30%) ─── */
.about-founder-outer .ey{font-size:.62rem;}
.about-founder-outer .founder-role{font-size:.57rem;}
.about-founder-outer .bt{font-size:.86rem;}
.about-founder-outer .about-pg-portfolio{font-size:.62rem;}
.studio-philo-sec .ey{font-size:.62rem;}
.studio-philo-sec .about-q{font-size:clamp(1.95rem,3.38vw,3.38rem);}
.studio-philo-sec .bt{font-size:.86rem;}
.team-sec .team-name{font-size:1.17rem;}
.team-sec .team-role{font-size:.55rem;}

/* ─── ABOUT PAGE ─── */
.founder-sec{padding:clamp(60px,8vw,100px) clamp(40px,7vw,100px);
  display:grid;grid-template-columns:2fr 3fr;gap:clamp(40px,6vw,80px);align-items:start;}
.founder-img-wrap{overflow:hidden;}
.founder-img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform .75s ease;}
.founder-img-wrap:hover .founder-img{transform:scale(1.04);}
.founder-role{font-size:.44rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mid);margin-bottom:1.4rem;}
.founder-name{font-family:var(--serif);font-weight:300;
  line-height:1.1;letter-spacing:-.01em;margin-bottom:1.6rem;}
.philosophy-sec{padding:clamp(60px,8vw,100px) clamp(40px,7vw,100px);background:var(--cream);}
.design-principles{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,28px);
  margin-top:clamp(40px,6vw,64px);}
.principle{padding:clamp(22px,3vw,34px);background:var(--w);}
.principle-num{font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--light);display:block;margin-bottom:.6rem;}
.principle-name{font-family:var(--serif);font-size:clamp(.9rem,1.6vw,1.3rem);font-weight:300;margin-bottom:.5rem;}
.principle-body{color:var(--dim);}
.studio-imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.studio-img{overflow:hidden;aspect-ratio:3/4;position:relative;cursor:none;}
.studio-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s ease;}
.studio-img:hover img{transform:scale(1.06);}
.studio-img-cap{position:absolute;bottom:0;left:0;right:0;padding:24px 14px 12px;
  background:linear-gradient(transparent,rgba(13,13,11,.6));color:white;
  opacity:0;transition:opacity .35s;}
.studio-img:hover .studio-img-cap{opacity:1;}
.studio-img-cap span{letter-spacing:.2em;text-transform:uppercase;}

/* ─── PROCESS PAGE ─── */
.process-intro{padding:clamp(60px,8vw,100px) clamp(40px,7vw,100px);
  display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(40px,6vw,80px);}
.process-step{padding:clamp(48px,7vw,100px) clamp(40px,7vw,100px);
  display:grid;grid-template-columns:200px 1fr;gap:clamp(40px,6vw,80px);align-items:start;
  border-top:1px solid var(--light);}
.step-num{font-family:var(--serif);font-size:clamp(5rem,9vw,9rem);font-weight:300;
  color:var(--light);line-height:1;display:block;}
.step-label{font-size:.46rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mid);
  margin-bottom:.7rem;display:block;margin-top:.5rem;}
.step-content{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);}
.step-title{font-family:var(--serif);font-weight:300;
  line-height:1.15;letter-spacing:-.01em;margin-bottom:1.2rem;}
.step-title em{font-style:italic;}
.step-body{font-size:.64rem;line-height:1.95;color:var(--dim);}
.step-imgs{display:flex;flex-direction:column;gap:6px;}
.step-img{overflow:hidden;background:var(--cream);}
.step-img.tall{aspect-ratio:3/4;}
.step-img.wide{aspect-ratio:16/9;}
.step-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s ease;}
.step-img:hover img{transform:scale(1.05);}

/* ─── HERO CAPTIONS — 3-column bottom bar with progress bars ─── */
.hero-captions{
  position:absolute;
  bottom:clamp(24px,2.5vw,40px);left:0;right:0;
  z-index:10;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  pointer-events:none;}
.hero-cap-item{
  padding:clamp(16px,2.2vw,26px) clamp(24px,4vw,52px) clamp(14px,2vw,22px);
  border-top:1px solid rgba(255,255,255,.22);
  opacity:.38;
  transition:opacity .55s ease;}
.hero-cap-item.active{opacity:1;}
.hero-cap-hd{
  display:flex;
  align-items:baseline;
  gap:.55rem;
  margin-bottom:.55rem;}
.hero-cap-num{
  font-size:clamp(.88rem,.74rem + .36vw,1.18rem);
  letter-spacing:.12em;
  color:var(--accent);
  font-family:var(--serif);
  font-style:italic;
  flex-shrink:0;}
.hero-cap-item:not(.active) .hero-cap-num{color:rgba(255,255,255,.42);}
.hero-cap-title{
  font-size:clamp(.82rem,.74rem + .22vw,1.02rem);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:white;
  font-family:var(--sans);
  font-weight:400;
  line-height:1.3;}
.hero-cap-sub{
  font-size:clamp(.88rem,.8rem + .18vw,1.02rem);
  color:rgba(255,255,255,.52);
  line-height:1.6;
  margin-bottom:clamp(10px,1.6vw,18px);
  letter-spacing:.02em;}
.hero-cap-prog{
  height:1px;
  background:rgba(255,255,255,.15);
  overflow:hidden;}
.hero-cap-prog-fill{
  height:100%;
  background:var(--accent);
  width:0%;}

/* ─── HERO SLIDESHOW — continuous rAF ticker ─── */
.hero-slides{
  position:absolute;inset:0;
  display:flex;
  will-change:transform;}
/* each slide = full viewport width; JS clones them for seamless loop */
.hero-slide{flex:0 0 100vw;height:100%;position:relative;overflow:hidden;}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);}
.hero-slide.active img{animation:hKenB 9s ease-out forwards;}
@keyframes hKenB{0%{transform:scale(1.06);}100%{transform:scale(1.01);}}

/* Click zones — invisible halves of the hero */
.hero-zone{position:absolute;top:0;height:100%;width:50%;z-index:2;cursor:none;}
.hero-zone-prev{left:0;}
.hero-zone-next{right:0;}

/* Arrow cursor (replaces dot + ring over hero) */
#heroCur{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;
  font-family:var(--serif);font-size:1.5rem;font-weight:300;color:white;
  opacity:0;transform:translate(-50%,-50%);will-change:transform;
  text-shadow:0 2px 16px rgba(0,0,0,.6);letter-spacing:-.02em;
  transition:opacity .2s;}

/* Pass clicks through content to the zones */
.hero-content{pointer-events:none;}
.hero-content .cta{pointer-events:auto;}

/* Slide counter */
.hero-counter{position:absolute;bottom:clamp(28px,4vw,52px);right:6vw;z-index:3;
  display:flex;align-items:center;gap:5px;
  font-size:.42rem;letter-spacing:.22em;color:rgba(255,255,255,.4);}
.hero-counter-sep{opacity:.35;}
#heroN{color:var(--accent);}

/* ─── HERO HEADING (small, bottom-left) ─── */
.hero-h-sm{
  font-family:var(--serif);font-weight:300;
  line-height:1.22;letter-spacing:-.01em;margin-bottom:1.4rem;color:white;}
.hero-h-sm em{font-style:italic;}

/* ─── PROCESS PREVIEW (split: sticky image + step list) ─── */
.proc-sec{padding:clamp(80px,12vw,160px) clamp(40px,7vw,100px);background:#FFFFFF;color:var(--dark);
  border-top:1px solid rgba(26,25,23,.06);border-bottom:1px solid rgba(26,25,23,.06);}
.proc-sec .ey{color:var(--mid)!important;}
.proc-sec .sh{color:var(--dark)!important;}
.proc-toprow{margin-bottom:clamp(48px,7vw,80px);}
.proc-layout{display:grid;grid-template-columns:1fr 380px;gap:clamp(40px,6vw,72px);align-items:start;}

/* Sticky image stage */
.proc-visual{position:sticky;top:clamp(96px,12vw,140px);}
.proc-stage{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream);}
.proc-slide{position:absolute;inset:0;opacity:0;transition:opacity .85s ease;}
.proc-slide.active{opacity:1;}
.proc-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 6s ease;}
.proc-slide.active img{transform:scale(1.04);}
.proc-num-d{
  position:absolute;bottom:20px;left:24px;
  font-family:var(--serif);font-size:clamp(4rem,7vw,6.5rem);font-weight:300;
  color:rgba(26,25,23,.08);line-height:1;pointer-events:none;user-select:none;
  transition:opacity .5s;}

/* Steps */
.proc-steps{}
.proc-step{
  padding:clamp(16px,2.2vw,26px) 0;border-top:1px solid rgba(26,25,23,.08);
  cursor:none;transition:opacity .4s;}
.proc-step:last-child{border-bottom:1px solid rgba(26,25,23,.08);}
/* dim header/body/prog only — carousel stays fully visible always */
.proc-step:not(.active) .proc-step-hd,
.proc-step:not(.active) .proc-step-body,
.proc-step:not(.active) .proc-prog{opacity:.24;transition:opacity .4s;}
.proc-step:hover:not(.active) .proc-step-hd,
.proc-step:hover:not(.active) .proc-step-body,
.proc-step:hover:not(.active) .proc-prog{opacity:.5;}
.proc-step-hd,.proc-step-body,.proc-prog{transition:opacity .4s;}
.proc-step-hd{display:flex;align-items:baseline;gap:14px;}
.proc-step-n{
  font-family:var(--serif);font-style:italic;font-size:.44rem;
  color:rgba(26,25,23,.28);flex-shrink:0;transition:color .4s;}
.proc-step.active .proc-step-n{color:var(--accent);}
.proc-step-name{
  font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.6rem);
  font-weight:300;color:var(--dark);line-height:1.15;}
.proc-step-name em{font-style:italic;}
.proc-step-body{
  font-size:.62rem;line-height:1.88;color:var(--dim);
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .48s ease,opacity .4s,margin-top .3s;}
.proc-step.active .proc-step-body{max-height:120px;opacity:1;margin-top:.75rem;}
.proc-prog{
  height:1px;background:rgba(26,25,23,.1);
  margin-top:clamp(12px,1.8vw,20px);overflow:hidden;
  opacity:0;transition:opacity .3s;}
.proc-step.active .proc-prog{opacity:1;}
.proc-prog-fill{height:100%;background:var(--accent);width:0%;}

/* ─── ABOUT PAGE (simplified) ─── */
.about-pg{padding:calc(var(--wadi-header-h) + clamp(60px,8vw,100px)) clamp(40px,7vw,100px) clamp(60px,8vw,100px);
  display:grid;grid-template-columns:2fr 3fr;gap:clamp(40px,6vw,80px);align-items:start;
  min-height:80vh;background-color:#FFFFFF;}
.about-pg-img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;display:block;}
.about-pg-portfolio{display:inline-flex;align-items:center;gap:12px;margin-top:2rem;
  font-size:.48rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dark);
  text-decoration:none;border:1px solid var(--dark);padding:13px 24px;
  transition:background .3s,color .3s;}
.about-pg-portfolio:hover{color:var(--w);}
.admin-bar .about-pg{padding-top:calc(var(--wadi-header-h) + 32px + clamp(60px,8vw,100px));}

/* ─── PDP: first image viewport-height ─── */
.gi-hero{height:calc(100vh - 76px);width:100%;object-fit:cover;display:block;}
.admin-bar .gi-hero{height:calc(100vh - 108px);}

/* ─── PDP below-fold alignment ─── */
.wpdp-below{padding:clamp(60px,8vw,100px) clamp(40px,7vw,100px);border-top:1px solid var(--light);}
.wpdp-below-hd{display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:clamp(36px,5vw,56px);}

/* ─── ACCENT: btn-p uses accent ─── */
.btn-p{background:var(--accent);}
.btn-p:hover{background:var(--dark);}
.about-pg-portfolio:hover{background:var(--accent);border-color:var(--accent);}

/* ─── HOTSPOT SECTION ─── */
.hs-section{padding:0;overflow:hidden;}
/* width driven by scroll via JS — no CSS transition needed */
.hs-wrap{position:relative;width:80%;margin:0 auto;}
.hs-img{width:100%;display:block;object-fit:cover;aspect-ratio:16/8;vertical-align:top;}
/* dot */
.hs-dot{position:absolute;cursor:none;z-index:4;transform:translate(-50%,-50%);}
.hs-core{
  width:12px;height:12px;border-radius:50%;
  background:var(--accent);position:relative;z-index:2;
  transition:transform .3s;box-shadow:0 0 0 3px rgba(184,129,98,.25);}
.hs-dot.hs-active .hs-core{transform:scale(1.4);}
.hs-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(184,129,98,.55);
  animation:hs-pulse 2.4s ease-out infinite;}
.hs-ring:nth-child(3){animation-delay:.9s;}
.hs-ring:nth-child(4){animation-delay:1.8s;}
@keyframes hs-pulse{
  0%{opacity:.9;transform:scale(1);}
  100%{opacity:0;transform:scale(3.8);}}
/* tooltip — shown on hover, CSS only */
.hs-tip{
  position:absolute;bottom:calc(100% + 18px);left:50%;
  transform:translateX(-50%) translateY(10px);
  background:white;width:210px;
  padding:0 0 14px;pointer-events:none;
  box-shadow:0 16px 56px rgba(0,0,0,.16);
  opacity:0;transition:opacity .6s ease,transform .4s ease;z-index:10;overflow:hidden;}
.hs-dot.hs-active .hs-tip{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
/* invisible bridge that spans the gap between tooltip bottom and the dot, prevents mouseleave flicker */
.hs-dot.hs-active .hs-tip::after{
  content:'';position:absolute;top:100%;left:-15px;right:-15px;height:32px;}
/* tooltip edge & position variants */
.hs-dot.hs-below .hs-tip{bottom:auto;top:calc(100% + 18px);transform:translateX(-50%) translateY(-10px);}
.hs-dot.hs-active.hs-below .hs-tip{transform:translateX(-50%) translateY(0);}
.hs-dot.hs-edge-l .hs-tip{left:0;transform:translateX(0) translateY(10px);}
.hs-dot.hs-active.hs-edge-l .hs-tip{transform:translateX(0) translateY(0);}
.hs-dot.hs-edge-r .hs-tip{left:auto;right:0;transform:translateX(0) translateY(10px);}
.hs-dot.hs-active.hs-edge-r .hs-tip{transform:translateX(0) translateY(0);}
/* tooltip image */
.hs-tip-img{width:100%;aspect-ratio:1;overflow:hidden;margin-bottom:12px;}
.hs-tip-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1);}
.hs-dot.hs-active .hs-tip-img img{transform:scale(1.04);}
/* tooltip text content */
.hs-tip-name{
  font-family:var(--serif);font-size:.92rem;font-weight:300;
  display:block;margin:0 14px .8rem;color:var(--dark);line-height:1.25;}
.hs-tip-btn{
  display:block;width:calc(100% - 28px);margin:0 14px;background:none;
  border:1.5px solid var(--accent);color:var(--accent);
  font-size:.42rem;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 10px;cursor:none;font-family:var(--sans);font-weight:300;
  transition:background .25s,color .25s;}
.hs-tip-btn:hover{background:var(--accent);color:white;}

/* ─── PROCESS SECTION CAROUSEL ─── */
.proc-car-wrap{margin-top:1.1rem;overflow:visible;}
.proc-car{overflow:hidden;}
.proc-car-track{display:flex;transition:transform .62s cubic-bezier(.16,1,.3,1);}
.proc-car-slide{
  flex:0 0 100%;display:grid;
  grid-template-columns:1fr 1fr;gap:7px;}
/* cards in dark context */
.proc-car-slide .pc{text-decoration:none;color:var(--dark);}
.proc-car-slide .pc-img{
  aspect-ratio:1;background:var(--cream);}
.proc-car-slide .pc-brand{color:var(--mid);}
.proc-car-slide .pc-name{color:var(--dark);}
.proc-car-slide .pc-price{color:var(--accent);}
.proc-car-slide .pc-ov{background:rgba(184,129,98,.55);}
/* nav */
.proc-car-nav{display:flex;align-items:center;gap:9px;margin-top:11px;}
.proc-car-btn{
  background:none;border:1px solid rgba(26,25,23,.16);
  width:30px;height:30px;cursor:none;
  display:flex;align-items:center;justify-content:center;
  color:rgba(26,25,23,.55);
  transition:border-color .3s,color .3s;}
.proc-car-btn:hover:not([disabled]){border-color:var(--accent);color:var(--accent);}
.proc-car-btn[disabled]{opacity:.2;pointer-events:none;}
.proc-car-va{
  font-size:.42rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;margin-left:auto;
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(184,129,98,.35);padding-bottom:3px;
  transition:gap .3s,border-color .3s;}
.proc-car-va:hover{gap:14px;border-color:var(--accent);}
/* auto-advance progress bar */
.proc-car-prog{height:1px;background:rgba(26,25,23,.1);margin-top:14px;overflow:hidden;}
.proc-car-prog-fill{height:100%;background:var(--accent);width:0%;}

/* ─── PROCESS LAB: second homepage process section ─── */
.process-lab-sec{
  padding:clamp(50px,7vw,100px) clamp(32px,7vw,100px);
  background:#FFFFFF;overflow:hidden;}
.process-lab-head{
  display:grid;grid-template-columns:minmax(180px,.45fr) 1fr;
  gap:clamp(28px,5vw,72px);align-items:end;
  margin-bottom:clamp(28px,4vw,56px);}
.process-lab-head .ey{margin-bottom:0;}
.process-lab-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,24px);}
.process-lab-card{
  position:static;overflow:visible;background:transparent;min-height:0;}
.process-lab-card-large{grid-row:auto;min-height:0;}
/* image wrapper — overflow hidden for scale effect */
.plc-img{overflow:hidden;height:clamp(240px,24vw,400px);}
.plc-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.015);
  transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s ease;}
.process-lab-card:hover .plc-img img{transform:scale(1.055);filter:contrast(.96) brightness(.94);}
/* caption below image, not overlaid */
.process-lab-card figcaption{
  position:static;
  padding:clamp(16px,2.2vw,28px) 0 0;
  background:none;color:var(--dark);}
.process-lab-card figcaption span{
  display:block;font-size:clamp(.72rem,.66rem + .15vw,.84rem);
  letter-spacing:.28em;text-transform:uppercase;margin-bottom:.65rem;
  color:var(--dim);}
.process-lab-card figcaption p{
  font-size:clamp(1.06rem,1rem + .18vw,1.2rem);
  line-height:1.8;color:var(--dim);max-width:none;}
.process-lab-note{
  min-height:clamp(240px,24vw,400px);background:#FAFAF8;color:var(--dark);
  border:1px solid rgba(26,25,23,.08);
  padding:clamp(28px,3.8vw,52px);
  display:flex;flex-direction:column;justify-content:space-between;}
.process-lab-note span{
  display:block;font-size:clamp(.72rem,.66rem + .15vw,.84rem);
  letter-spacing:.28em;text-transform:uppercase;margin-bottom:.65rem;
  color:var(--mid);}
.process-lab-note p{
  font-family:var(--serif);
  line-height:1.18;font-weight:300;letter-spacing:-.01em;}

/* ─── COLLECTION HERO CAROUSEL ─── */
.coll-hero-wrap{position:relative;height:50vh;overflow:hidden;}
.coll-hero-track{
  display:flex;height:100%;
  will-change:transform;
  animation:collTicker 28s linear infinite;}
.coll-hero-item{flex:0 0 calc(100vw / 3);height:100%;overflow:hidden;flex-shrink:0;}
@keyframes collTicker{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.coll-hero-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  transition:transform 6s ease;}
.coll-hero-overlay{
  position:absolute;inset:0;
  background:rgba(13,13,11,.42);pointer-events:none;}
.coll-hero-center{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:white;pointer-events:none;z-index:2;
  padding:0 clamp(20px,5vw,80px);}
.coll-hero-eye{letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:1.2rem;display:block;}
.coll-hero-h{
  font-family:var(--serif);font-size:clamp(2.2rem,4.5vw,5rem);font-weight:300;
  line-height:1.08;letter-spacing:-.01em;}
.coll-hero-h em{font-style:italic;}
[data-dark] .about-q,[data-dark] .sh,[data-dark] h1,[data-dark] h2,[data-dark] h3{color:var(--w);}
[data-dark] .bt,[data-dark] .ey{color:rgba(255,255,255,.52);}

/* ─── STUDIO PHILOSOPHY ─── */
.studio-philo-sec{
  padding:clamp(60px,8vw,100px) clamp(40px,7vw,100px);
  background-color:var(--w);
  text-align:center;}
.philo-inner{
  display:block;
  max-width:800px;
  margin:clamp(24px,4vw,40px) auto 0;}

/* ─── TEAM SECTION ─── */
.team-sec{padding:clamp(60px,8vw,100px) clamp(40px,7vw,100px);text-align:center;}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);}
.team-member{position:relative;}
.team-img-wrap{overflow:hidden;aspect-ratio:3/4;margin-bottom:12px;}
.team-img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  filter:grayscale(1);transition:transform .75s ease,filter .4s;}
.team-member:hover .team-img{transform:scale(1.04);filter:grayscale(.6);}
.team-info{padding:0 2px;text-align:left;}
.team-name{font-family:var(--serif);font-weight:300;display:block;
  line-height:1.2;margin-bottom:3px;}
.team-role{font-size:.42rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);display:block;}

/* ─── PDP NEW LAYOUT ─── */
.pdp-hero-sec{
  --pdp-intro-progress:0;
  --pdp-media-width:min(645px,calc(100vw - 48px));
  --pdp-image-gap:clamp(22px,3vw,42px);
  position:relative;
  padding:calc(var(--wadi-header-h) + clamp(12px,2vw,24px)) clamp(18px,4vw,60px) 0;
  background:#fff;}
.pdp-hero-inner{
  position:relative!important;
  width:var(--pdp-media-width)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 auto!important;
  padding:0;
  overflow:visible!important;
  background:transparent!important;
  display:block;}
.pdp-hero-inner::after{
  display:none;}
.pdp-hero-img{
  width:100%!important;
  max-height:none!important;
  height:auto!important;
  display:block!important;
  object-fit:unset!important;
  aspect-ratio:auto!important;
  background:transparent!important;
  transform:none;
  transition:filter .8s ease,transform 1s cubic-bezier(.16,1,.3,1);}
.pdp-hero-sec.is-released .pdp-hero-img{filter:contrast(.98) brightness(.98);}
.pdp-hero-meta{
  position:fixed;inset:0;z-index:950;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,242,237,.58);
  opacity:calc(1 - var(--pdp-intro-progress,0));
  transform:translate3d(0,calc(var(--pdp-intro-progress,0) * -24px),0);
  pointer-events:none;
  will-change:opacity,transform;
  transition:opacity .18s linear,transform .18s linear;}
.pdp-hero-meta.away,.pdp-hero-sec.is-released .pdp-hero-meta{
  opacity:0;transform:translate3d(0,-24px,0);pointer-events:none;}
.pdp-hero-glass{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--dark);
  padding:clamp(34px,5vw,70px) clamp(26px,4vw,56px);
  box-sizing:border-box;
  pointer-events:none;}
.pdp-hero-ey{letter-spacing:.3em;text-transform:uppercase;
  color:rgba(110,107,101,.72);margin-bottom:.8rem;display:block;}
.pdp-hero-title{
  font-family:var(--serif);
  font-weight:300;line-height:.94;letter-spacing:-.01em;margin-bottom:1rem;
  color:var(--dark);}
.pdp-hero-title em{font-style:italic;}
.pdp-hero-desc{color:rgba(26,25,23,.58);
  max-width:520px;margin:0 auto;
  text-align:justify;text-align-last:center;}
.pdp-hero-facts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;
  margin-top:1.3rem;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(26,25,23,.45);}

.pdp-editorial-sec{
  --pdp-col-gap:clamp(22px,3vw,48px);
  position:relative;
  background:#fff;}
.pdp-detail-panel{
  scrollbar-width:none;
  z-index:3;}
.pdp-detail-panel::-webkit-scrollbar,.pdp-tabs::-webkit-scrollbar{display:none;}
.pdp-detail-intro{
  margin:0 0 clamp(20px,2.7vw,34px);
  line-height:1.72;
  letter-spacing:.015em;
  color:var(--dim);
  text-align:justify;
  text-align-last:left;
  max-height:28svh;
  overflow:auto;
  padding-right:4px;
  scrollbar-width:none;
  flex:0 0 auto;}
.pdp-detail-intro::-webkit-scrollbar{display:none;}
.pdp-tabs{
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px 12px;
  flex-wrap:wrap;overflow:visible;scrollbar-width:none;
  border-bottom:1px solid var(--light);
  flex:0 0 auto;
  margin-bottom:clamp(22px,3vw,36px);}
.pdp-tab{
  position:relative;appearance:none;border:0;background:none;border-radius:0;
  padding:0 0 12px;color:var(--mid);
  font-family:var(--serif);font-size:clamp(.82rem,.78rem + .26vw,1rem);line-height:1.1;
  font-weight:300;white-space:nowrap;cursor:none;
  transition:color .28s ease;}
.pdp-tab::after{
  content:'';position:absolute;left:0;right:100%;bottom:-1px;height:1px;
  background:var(--dark);transition:right .34s cubic-bezier(.16,1,.3,1);}
.pdp-tab.active{color:var(--dark);}
.pdp-tab.active::after,.pdp-tab:hover::after{right:0;}
.pdp-tab-panels{
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
  padding-right:4px;
  scrollbar-width:none;}
.pdp-tab-panels::-webkit-scrollbar{display:none;}
.pdp-tab-panel[hidden]{display:none!important;}
.pdp-spec-table{display:block;margin:0;border-top:1px solid var(--light);}
.pdp-spec-table div{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;border-bottom:1px solid var(--light);
  padding:9px 0;}
.pdp-spec-table dt,.pdp-spec-table dd{
  font-size:clamp(.76rem,.72rem + .14vw,.88rem);
  line-height:1.45;color:var(--dim);}
.pdp-spec-table dt{font-weight:300;}
.pdp-spec-table dd{text-align:right;margin:0;color:var(--dark);}
.pdp-tab-note{
  font-size:clamp(.78rem,.74rem + .14vw,.9rem);line-height:1.72;letter-spacing:.015em;
  color:var(--dim);
  text-align:justify;
  text-align-last:left;}
.pdp-spec-table+.pdp-tab-note{margin-top:1.35rem;}
.pdp-rich-content{
  font-size:clamp(.76rem,.72rem + .14vw,.88rem);
  line-height:1.72;
  color:var(--dim);
  overflow-wrap:anywhere;}
.pdp-rich-content p{margin:0 0 1rem;}
.pdp-rich-content p:last-child{margin-bottom:0;}
.pdp-rich-content a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(184,129,98,.35);}
.pdp-rich-content ul,.pdp-rich-content ol{margin:0 0 1rem 1.1rem;padding:0;}
.pdp-rich-content li+li{margin-top:.35rem;}
.pdp-rich-content img{
  display:block;
  max-width:100%;
  max-height:min(34svh,330px);
  width:auto;
  height:auto;
  margin:14px 0;
  background:#FAFAF8;
  cursor:none;}
.pdp-resource-list{display:grid;gap:10px;}
.pdp-resource-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 0;border-top:1px solid var(--light);
  color:inherit;text-decoration:none;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;}
.pdp-resource-item::after{content:'Open';font-size:.62rem;letter-spacing:.18em;color:var(--mid);}
.pdp-tab-enq{
  margin-top:clamp(24px,3.5vw,46px);
  flex:0 0 auto;
  width:min(210px,100%);
  min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(26,25,23,.28);
  background:transparent;color:var(--dark);
  font-family:var(--sans);font-weight:300;
  font-size:.52rem;letter-spacing:.24em;text-transform:uppercase;
  cursor:none;transition:background .32s ease,color .32s ease,border-color .32s ease;}
.pdp-tab-enq:hover{background:var(--dark);border-color:var(--dark);color:var(--w);}
.pdp-scroll-stack{
  max-width:none;}
.pdp-stack-card{
  box-shadow:none;cursor:none;}
.pdp-stack-card img{max-height:none;
  display:block;transform:none;
  transition:filter .45s ease;}
.pdp-stack-card:hover img{filter:contrast(.98) brightness(.96);}
.pdp-related-rail{
  grid-column:3;
  position:sticky;
  top:calc(var(--wadi-header-h) + 24px);
  align-self:start;
  justify-self:start;
  width:min(280px,calc(100% - var(--pdp-edge-pad)));
  margin-right:var(--pdp-edge-pad);
  height:calc(100svh - var(--wadi-header-h) - 42px);
  max-height:calc(100svh - var(--wadi-header-h) - 42px);
  overflow:visible;
  scrollbar-width:none;
  display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);
  opacity:1;transform:none;pointer-events:auto;
  z-index:2;
  background:#fff;}
.admin-bar .pdp-related-rail{top:calc(var(--wadi-header-h) + 52px);height:calc(100svh - var(--wadi-header-h) - 74px);max-height:calc(100svh - var(--wadi-header-h) - 74px);}
.pdp-related-rail::-webkit-scrollbar{display:none;}
.pdp-related-label{
  display:block;letter-spacing:.28em;text-transform:uppercase;
  color:var(--mid);margin-bottom:0;}
.pdp-related-card{
  display:block;text-decoration:none;color:inherit;}
.pdp-related-img{
  width:100%;
  aspect-ratio:1;
  height:auto;
  overflow:hidden;background:#FAFAF8;margin-bottom:9px;}
.pdp-related-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s ease;}
.pdp-related-card:hover .pdp-related-img img{transform:scale(1.055);}
.pdp-related-meta{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);
  margin-bottom:.2rem;}
.pdp-related-name{
  display:block;font-family:var(--serif);
  font-weight:300;line-height:1.18;margin-bottom:.25rem;}
.pdp-related-price{letter-spacing:.08em;color:var(--dim);}

.pdp-carousel-sec{
  background:#FFFFFF;
  padding:clamp(58px,8vw,104px) clamp(28px,6vw,96px);
  border-top:1px solid rgba(26,25,23,.06);}
.pdp-carousel-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(24px,4vw,64px);margin-bottom:clamp(30px,4vw,48px);}
.pdp-carousel-head .ey{margin-bottom:0;}
.pdp-carousel-head .about-q{margin-bottom:0;text-align:right;}
.pdp-carousel-window{overflow:hidden;width:100%;}
.pdp-carousel-track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc(33.333333% - 12px);
  gap:18px;will-change:transform;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.pdp-carousel-card{display:block;text-decoration:none;color:inherit;cursor:none;}
.pdp-carousel-img{
  aspect-ratio:1;overflow:hidden;background:#FAFAF8;margin-bottom:14px;}
.pdp-carousel-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s ease;}
.pdp-carousel-card:hover .pdp-carousel-img img{transform:scale(1.055);filter:contrast(.98) brightness(.96);}
/* carousel controls row: prev | dots | next */
.pdp-carousel-controls{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:clamp(24px,3vw,36px);}
.pdp-carousel-prev,.pdp-carousel-next{
  background:none;border:1px solid rgba(26,25,23,.2);
  width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  cursor:none;color:var(--dark);
  transition:border-color .3s,color .3s;}
.pdp-carousel-prev:hover,.pdp-carousel-next:hover{border-color:var(--accent);color:var(--accent);}
.pdp-carousel-dots{
  display:flex;align-items:center;justify-content:center;gap:10px;}
.pdp-carousel-controls .pdp-carousel-dots{margin-top:0;}
.pdp-carousel-dots button{
  width:7px;height:7px;border-radius:50%;
  border:1px solid rgba(26,25,23,.28);background:transparent;
  padding:0;cursor:none;transition:background .32s ease,transform .32s ease,border-color .32s ease;}
.pdp-carousel-dots button.active{
  background:var(--dark);border-color:var(--dark);transform:scale(1.22);}
.pdp-readmore{margin:0 0 clamp(24px,3.2vw,44px);}
.pdp-readmore .pdp-detail-intro{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  line-height:1.74;
  max-height:none;
  overflow:hidden;
  margin:0;
  padding-right:0;
  text-align:justify;
  text-align-last:left;}
.pdp-readmore.is-open .pdp-detail-intro{
  display:block;
  -webkit-line-clamp:unset;
  overflow:visible;}
.pdp-readmore-toggle{
  appearance:none;background:none;border:0;border-bottom:1px solid rgba(26,25,23,.35);
  margin-top:clamp(14px,1.6vw,22px);padding:0 0 6px;
  color:var(--dark);font-family:var(--sans);font-weight:300;
  letter-spacing:.28em;text-transform:uppercase;cursor:none;
  transition:border-color .28s ease,color .28s ease;}
.pdp-readmore-toggle:hover{border-color:var(--accent);color:var(--accent);}
.pdp-enquire-link{
  display:inline-flex;align-items:center;
  align-self:flex-start;
  width:max-content;
  max-width:100%;
  color:var(--dark);text-decoration:none;
  border-bottom:1px solid rgba(26,25,23,.42);
  padding-bottom:7px;
  letter-spacing:.3em;text-transform:uppercase;
  transition:color .28s ease,border-color .28s ease,letter-spacing .28s ease;}
.pdp-enquire-link:hover{color:var(--accent);border-color:var(--accent);letter-spacing:.34em;}
.pdp-info-panel{
  justify-self:start;
  scrollbar-width:none;}
.pdp-info-panel::-webkit-scrollbar{display:none;}
.pdp-info-label{
  display:block;
  letter-spacing:.34em;text-transform:uppercase;color:var(--mid);
  margin-bottom:clamp(14px,1.5vw,22px);}
.pdp-info-table{display:block;}
.pdp-info-row{grid-template-columns:minmax(94px,.78fr) minmax(0,1fr);}
.pdp-info-row dt{font-weight:300;}
.pdp-info-row dd{overflow-wrap:anywhere;}
.pdp-info-row dd a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(26,25,23,.32);padding-bottom:3px;}
.pdp-info-row dd a:hover{color:var(--accent);border-color:var(--accent);}
.pdp-info-finishes{border-top:0;margin:0;}
.pdp-info-finishes .acc-item{border-bottom:1px solid rgba(26,25,23,.1);}
.pdp-info-finishes .acc-hd{
  width:100%;appearance:none;background:none;border:0;
  padding:clamp(12px,1.15vw,18px) 0;
  color:rgba(26,25,23,.82);
  display:grid;grid-template-columns:minmax(94px,.78fr) minmax(0,1fr);
  gap:clamp(16px,1.6vw,28px);}
.pdp-info-finishes .acc-lb{
  font-size:16px;line-height:1.5;
  letter-spacing:.22em;color:rgba(26,25,23,.52);}
.pdp-info-finishes .acc-ic{justify-self:end;align-self:center;}
.pdp-info-finishes .acc-in{padding:0 0 clamp(18px,2vw,28px);opacity:1;color:var(--dark);}
.pdp-finish-swatch,
.pdp-finish-img{
  display:block;background:#E7DFCF;}
.pdp-finish-swatch{position:relative;overflow:hidden;}
.pdp-finish-swatch::before,
.pdp-finish-swatch::after{content:'';position:absolute;inset:0;pointer-events:none;}
.pdp-finish-swatch-1{
  background:
    linear-gradient(90deg,rgba(255,255,255,.2),transparent 20%,rgba(112,82,34,.2) 48%,transparent 78%,rgba(255,255,255,.16)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 8px),
    linear-gradient(135deg,#8E7440,#C4A968 34%,#DCC990 56%,#A4874E 78%,#6F5A32);}
.pdp-finish-swatch-2{
  background:
    linear-gradient(90deg,rgba(255,255,255,.12),transparent 22%,rgba(88,62,42,.18) 50%,transparent 74%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 9px),
    linear-gradient(135deg,#5B4632,#8A6C49 38%,#B09162 62%,#6E5238);}
.pdp-finish-swatch-3{
  background:
    radial-gradient(circle at 24% 45%,rgba(201,157,102,.18),transparent 28%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px),
    linear-gradient(135deg,#3F3028,#6E4F3F 40%,#8B684E 62%,#4D3930);}
.pdp-finish-swatch-4{
  background:
    linear-gradient(90deg,rgba(255,255,255,.35),transparent 18%,rgba(91,90,84,.18) 48%,transparent 74%,rgba(255,255,255,.22)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 8px),
    linear-gradient(135deg,#A7A696,#D4D1C4 38%,#8F8E83 64%,#C2BFB2);}
.pdp-finish-swatch::before{
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 5px);
  mix-blend-mode:soft-light;opacity:.65;}
.pdp-finish-name{
  display:block;text-transform:uppercase;
  line-height:1.45;color:rgba(26,25,23,.82);}

.pdp-lightbox{
  position:fixed;inset:0;z-index:12000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,13,11,.88);
  opacity:0;pointer-events:none;
  transition:opacity .32s ease;}
.pdp-lightbox.open{opacity:1;pointer-events:auto;}
.pdp-lightbox.single .pdp-lightbox-nav,
.pdp-lightbox.single .pdp-lightbox-count{display:none;}
.pdp-lightbox-stage{
  max-width:min(86vw,1320px);max-height:82vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;cursor:none;}
.pdp-lightbox-img{
  max-width:100%;max-height:82vh;
  width:auto;height:auto;object-fit:contain;display:block;
  box-shadow:0 24px 90px rgba(0,0,0,.32);
  transform:translate3d(0,0,0) scale(.985);
  transform-origin:center center;
  user-select:none;-webkit-user-drag:none;
  transition:transform .38s cubic-bezier(.16,1,.3,1);}
.pdp-lightbox.open .pdp-lightbox-img{transform:scale(1);}
.pdp-lightbox.is-zoomed .pdp-lightbox-img{cursor:none;}
.pdp-lightbox.is-dragging .pdp-lightbox-img{cursor:none;transition:none;}
.pdp-lightbox-close,.pdp-lightbox-nav{
  position:absolute;background:none;border:1px solid rgba(255,255,255,.25);
  color:white;cursor:none;font-family:var(--sans);font-weight:300;
  transition:background .25s ease,border-color .25s ease;}
.pdp-lightbox-close{
  top:clamp(18px,3vw,38px);right:clamp(18px,3vw,38px);
  width:44px;height:44px;font-size:1.2rem;line-height:1;}
.pdp-lightbox-nav{
  top:50%;transform:translateY(-50%);
  width:54px;height:54px;font-size:1.4rem;}
.pdp-lightbox-prev{left:clamp(18px,3vw,38px);}
.pdp-lightbox-next{right:clamp(18px,3vw,38px);}
.pdp-lightbox-close:hover,.pdp-lightbox-nav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);}
.pdp-lightbox-count{
  position:absolute;left:50%;bottom:clamp(18px,3vw,36px);
  transform:translateX(-50%);color:rgba(255,255,255,.58);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;}

/* ─── FINISHES PAGE ─── */
.finishes-page{
  min-height:100vh;background:#FFFFFF;color:var(--dark);}
.finishes-hero{
  padding:clamp(70px,10vw,150px) clamp(24px,6vw,96px) clamp(28px,5vw,66px);
  border-bottom:1px solid rgba(26,25,23,.08);}
.finishes-ey{
  display:block;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--mid);margin-bottom:1.1rem;}
.finishes-title{
  font-family:var(--serif);font-size:clamp(4rem,9vw,10rem);
  font-weight:300;line-height:.9;letter-spacing:-.02em;}
.finishes-grid-wrap{
  padding:clamp(34px,5vw,76px) clamp(24px,6vw,96px) clamp(72px,9vw,132px);}
.finishes-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(22px,3vw,44px) clamp(18px,2.4vw,32px);}
.finish-card{display:block;color:var(--dark);}
.finish-swatch{
  aspect-ratio:1;background:var(--f1);
  position:relative;overflow:hidden;margin-bottom:clamp(12px,1.5vw,18px);
  box-shadow:inset 0 0 0 1px rgba(26,25,23,.08);}
.finish-swatch::before,.finish-swatch::after{
  content:'';position:absolute;inset:0;pointer-events:none;}
.finish-card.metal .finish-swatch{
  background:
    linear-gradient(90deg,rgba(255,255,255,.18),transparent 18%,rgba(0,0,0,.18) 42%,transparent 68%,rgba(255,255,255,.12)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 7px),
    linear-gradient(135deg,var(--f3),var(--f1) 34%,var(--f2) 56%,var(--f1) 78%,var(--f3));}
.finish-card.metal .finish-swatch::before{
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 5px);
  mix-blend-mode:soft-light;opacity:.65;}
.finish-card.wood .finish-swatch{
  background:
    radial-gradient(ellipse at 28% 50%,rgba(255,255,255,.09),transparent 38%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px,rgba(0,0,0,.12) 13px 17px),
    linear-gradient(90deg,var(--f3),var(--f1) 30%,var(--f2) 58%,var(--f1) 78%,var(--f3));}
.finish-card.wood .finish-swatch::after{
  background:repeating-radial-gradient(ellipse at 45% 52%,rgba(255,255,255,.1) 0 1px,transparent 1px 12px);
  transform:scaleX(1.8);opacity:.38;mix-blend-mode:soft-light;}
.finish-card.stone .finish-swatch{
  background:
    linear-gradient(125deg,transparent 0 24%,var(--f3) 25%,transparent 29% 48%,rgba(255,255,255,.28) 49%,transparent 52%),
    radial-gradient(circle at 18% 26%,rgba(255,255,255,.18),transparent 18%),
    radial-gradient(circle at 82% 70%,rgba(0,0,0,.18),transparent 22%),
    linear-gradient(135deg,var(--f1),var(--f2));}
.finish-card.stone .finish-swatch::before{
  background:repeating-linear-gradient(112deg,transparent 0 28px,rgba(255,255,255,.18) 29px,transparent 31px);
  opacity:.5;}
.finish-name{
  line-height:1.45;letter-spacing:.24em;text-transform:uppercase;
  font-family:var(--sans);font-weight:300;color:rgba(26,25,23,.82);}

/* ─── STUDIO PAGE ─── */
.studio-page{
  padding-top:var(--wadi-header-h);background-color:#FFFFFF;}
.admin-bar .studio-page{padding-top:calc(var(--wadi-header-h) + 32px);}
.studio-masonry{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:clamp(10px,1.4vw,18px);
  padding:clamp(28px,4vw,58px) clamp(16px,3vw,44px);}
.studio-masonry-item:nth-child(n){grid-row:auto;}
.studio-book-btn{
  position:fixed;
  bottom:clamp(20px,3vw,32px);
  left:50%;
  right:auto;
  transform:translateX(-50%);
  z-index:500;
  background:var(--dark);color:var(--w);border:none;
  padding:16px clamp(24px,3.5vw,44px);letter-spacing:.22em;text-transform:uppercase;
  cursor:none;font-family:var(--sans);font-weight:300;
  box-shadow:0 8px 32px rgba(0,0,0,.22);
  transition:background .32s ease,transform .32s cubic-bezier(.16,1,.3,1);}
.studio-book-btn:hover{background:var(--accent);transform:translateX(-50%) translateY(-2px);}

/* ─── ENQUIRY MODAL ─── */
.wadi-modal{
  position:fixed;inset:0;z-index:10100;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;
  transition:opacity .4s ease;}
.wadi-modal.open{opacity:1;pointer-events:auto;}
.wadi-modal-overlay{
  position:absolute;inset:0;
  background:rgba(13,13,11,.55);
  backdrop-filter:blur(5px);}
.wadi-modal-box{
  position:relative;z-index:1;
  background:var(--w);
  transform:translateY(22px);
  transition:transform .4s cubic-bezier(.16,1,.3,1);}
.wadi-modal.open .wadi-modal-box{transform:translateY(0);}
.wadi-modal-close{
  position:absolute;top:18px;right:18px;
  background:none;border:none;cursor:none;
  opacity:.35;transition:opacity .25s;padding:6px;line-height:1;}
.wadi-modal-close:hover{opacity:1;}
.wadi-modal-title{font-weight:300;margin-bottom:.5rem;}
.wadi-modal-sub{text-transform:uppercase;margin-bottom:2.2rem;min-height:1em;display:block;}

/* ─── TYPE + MOTION POLISH ─── */
.hero-p,.bt,.acc-in,.pdp-trigger-body,.principle-body,
.pdp-hero-desc{
  font-size:clamp(.94rem,.86rem + .22vw,1.08rem);
  line-height:1.9;}
.acc-tbl li,.pdp-related-price{font-size:clamp(.84rem,.78rem + .15vw,.96rem);}
.rv{transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1);}
.wipe::after{transition:transform 1.25s cubic-bezier(.76,0,.24,1);}

/* ─── RESPONSIVE ─── */
@media(max-width:1250px){}
@media(max-width:1100px){
  .pdp-layout{grid-template-columns:1fr;}
  .pdp-gallery{position:static;height:60vw;}
  .pdp-editorial-sec{
    --pdp-col-gap:clamp(14px,2vw,26px);
    padding-left:0;padding-right:0;}
  .pdp-detail-panel{top:calc(var(--wadi-header-h) + 18px);margin-left:var(--pdp-edge-pad);}
  .pdp-related-rail{position:sticky;top:calc(var(--wadi-header-h) + 18px);display:flex;grid-column:3;grid-template-columns:none;max-height:calc(100svh - var(--wadi-header-h) - 38px);overflow:visible;margin-right:var(--pdp-edge-pad);}
  .admin-bar .pdp-related-rail{top:calc(var(--wadi-header-h) + 50px);max-height:calc(100svh - var(--wadi-header-h) - 70px);}
  .pdp-related-label{grid-column:1/-1;margin-bottom:0;}
  .finishes-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .coll-story-sec{grid-template-columns:1fr;}
  .proc-layout{grid-template-columns:1fr;}
  .proc-visual{position:static;}
  .process-lab-head{grid-template-columns:1fr;}
  .process-lab-grid{grid-template-columns:1fr;}
  .plc-img,.process-lab-note{height:clamp(260px,35vw,400px);}
  /* philo-inner is now single column by default */
}
@media(max-width:900px){
  header{height:78px;padding:0 20px;gap:12px;}
  .logo-img{height:20px!important;max-width:78px!important;}
  nav a{font-size:13px;font-weight:700;letter-spacing:.18em;}
  .h-right{gap:10px;}
  .h-right nav{gap:10px;}
  .h-book-btn{display:none;}
  .pdp-hero-sec{padding:calc(var(--wadi-header-h) + 12px) 12px 20px;}
  .admin-bar .pdp-hero-sec{padding-top:calc(var(--wadi-header-h) + 46px + 12px);}
  .pdp-hero-inner{width:min(620px,100%)!important;height:auto!important;min-height:0!important;padding:0;}
  .pdp-hero-img{width:100%!important;max-height:none!important;}
  .pdp-hero-glass{padding:28px 18px;}
  .pdp-editorial-sec{padding:24px 18px 52px;}
  .pdp-detail-panel{margin-bottom:32px;}
  .pdp-detail-intro{max-height:none;overflow:visible;}
  .pdp-tab-panels{overflow:visible;}
  .pdp-rich-content img{max-height:none;width:100%;}
  .pdp-tabs{gap:12px;margin-bottom:22px;}
  .pdp-tab{font-size:.9rem;}
  .pdp-scroll-stack{max-width:none;}
  .pdp-stack-card{width:100%;margin-left:0;}
  .pdp-related-rail{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px;margin-right:0;height:auto;max-height:none;overflow:visible;width:100%;}
  .pdp-related-img{height:auto;aspect-ratio:1;}
  .pdp-related-label{grid-column:1/-1;}
  .pdp-info-row{grid-template-columns:minmax(110px,.5fr) minmax(0,1fr);}
  .finishes-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-content{padding-bottom:16vw;}
  .about-sec{grid-template-columns:1fr;}
  .proj-grid{grid-template-columns:1fr 1fr;row-gap:16px;}
  .proj-item:nth-child(n){grid-column:span 1!important;margin-top:0!important;}
  .press-grid{grid-template-columns:1fr;}
  .coll-grid{grid-template-columns:1fr;}
  .coll-products-sec .coll-grid{grid-template-columns:1fr!important;max-width:560px;}
  .coll-hero-item{flex:0 0 100%;}
  .coll-hero-h{font-size:clamp(1.9rem,7vw,3rem);}
  .pdp-carousel-head{display:block;}
  .pdp-carousel-head .about-q{text-align:left;margin-top:1rem;}
  .pdp-carousel-track{grid-auto-columns:calc(50% - 9px);}
  .plc-img,.process-lab-note{height:clamp(200px,48vw,320px);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .founder-sec{grid-template-columns:1fr;}
  .about-pg{grid-template-columns:1fr;}
  .design-principles{grid-template-columns:1fr;}
  .studio-imgs{grid-template-columns:repeat(2,1fr);}
  .process-step{grid-template-columns:1fr;}
  .step-content{grid-template-columns:1fr;}
  .ft-main{flex-direction:column;align-items:center;text-align:center;}
  .ft-nav,.ft-links,.ft-socials{justify-content:center;flex-wrap:wrap;}
  .objects-rule{margin-bottom:72px;}
  .objects-grid{display:block;}
  .object-card+.object-card{margin-top:clamp(42px,8vw,72px);}
  .object-link{display:flex;gap:0;}
  .sf:not(.in){padding-left:0!important;padding-right:0!important;}
  .svc-item{grid-template-columns:40px 1fr 22px;}.svc-desc{display:none;}
  .sketch-grid{grid-template-columns:repeat(2,1fr);}
  .proc-layout{grid-template-columns:1fr;}
  .proc-visual{position:static;margin-bottom:2rem;}
  .hero-h-sm{font-size:clamp(1.6rem,5vw,2.4rem);}
  .studio-page{padding-top:var(--wadi-header-h);}
  .admin-bar .studio-page{padding-top:calc(var(--wadi-header-h) + 46px);}
  .studio-masonry{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:10px;padding:18px 12px;}
  .studio-book-btn{left:50%;right:auto;transform:translateX(-50%);bottom:18px;width:calc(100% - 32px);justify-content:center;}
  .studio-book-btn:hover{transform:translateX(-50%) translateY(-2px);}
}
@media(max-width:560px){
  :root{--wadi-edge:18px;--wadi-header-h:72px;}
  body{font-size:16px;}
  header{height:72px;}
  .logo-img{height:16px!important;max-width:64px!important;}
  .h-right{gap:6px;}
  .h-right nav{gap:5px;justify-content:flex-end;}
  nav a{font-size:9px;letter-spacing:.1em;}
  .pdp-hero-sec{padding-top:calc(var(--wadi-header-h) + 12px);}
  .admin-bar .pdp-hero-sec{padding-top:calc(var(--wadi-header-h) + 46px);}
  .pdp-hero-title{font-size:clamp(2rem,12vw,3.2rem);}
  .pdp-hero-desc{font-size:.9rem;}
  .pdp-detail-panel{height:auto;max-height:none;overflow:visible;}
  .admin-bar .pdp-detail-panel{height:auto;max-height:none;}
  .pdp-related-rail{grid-template-columns:1fr;}
  .pdp-carousel-sec{padding:52px 20px;}
  .pdp-carousel-track{grid-auto-columns:100%;}
  .finishes-page{padding-top:var(--wadi-header-h);}
  .admin-bar .finishes-page{padding-top:calc(var(--wadi-header-h) + 46px);}
  .finishes-grid-wrap{padding-left:18px;padding-right:18px;}
  .finish-name{letter-spacing:.18em;}
  .process-lab-sec{padding:56px 20px;}
  .plc-img,.process-lab-note{height:clamp(180px,58vw,280px);}
  .studio-masonry{grid-template-columns:1fr;grid-auto-rows:auto;}
  .studio-masonry-item,.studio-masonry-item:nth-child(n){grid-row:auto;}
  .home-video-section{padding:28px 0 58px;}
  .home-video-frame{min-height:260px;height:58vh;}
  .objects-index{padding-top:48px;}
  .objects-head{align-items:flex-start;gap:18px;line-height:1.6;}
  .pdp-info-row{grid-template-columns:1fr;gap:4px;}
  .pdp-info-row dd{text-align:left;}
  .pdp-info-finishes .acc-hd{grid-template-columns:1fr auto;gap:12px;}
}

/* Final typography lock: body 14px, headings 16px. */
body,button,input,textarea,select,p,li,dt,dd,
.bt,.acc-in,.pdp-trigger-body,.principle-body,.pdp-hero-desc,
.pdp-readmore .pdp-detail-intro,.pdp-info-row dt,.pdp-info-row dd,
.pdp-readmore-toggle,.pdp-enquire-link,.pdp-finish-name,
.ey,.pg-hero-sub,.coll-hero-eye,.hero-eye,.pdp-hero-ey,
.pdp-related-label,.pc-brand,.pc-tag,.acc-lb,.pdp-trigger-lbl,
.studio-img-cap span,.object-type,.cta,.pc-ov,.pc-enquire,.btn-p,
.h-book-btn,.studio-book-btn,.objects-head,.ft-links a,.ft-copy,
.pdp-info-label,.pdp-finish-list,.pdp-finish-item,.acc-hd{
  font-size:14px!important;}
h1,h2,h3,h4,h5,h6,
.hero-statement-title,.hero-h,.hero-h-sm,.pg-hero-h,
.about-q,.sh,.pdp-hero-title,.pdp-related-name,.pc-name,
.object-name,.finish-name,.wadi-modal-title,.team-name,
.founder-name,.step-title,.process-lab-note p{
  font-size:16px!important;}

header#hdr,
header#hdr.dk{
  background:#FFFFFF!important;
  color:var(--dark)!important;
}
header#hdr .h-right,
header#hdr nav{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
header#hdr nav a{
  color:var(--dark)!important;
  opacity:1!important;
}
@media(max-width:782px){}

.objects-grid{
  flex-direction:column;
  align-items:center!important;
  gap:clamp(42px,4vw,76px)!important;
}
.objects-pair{
  display:grid!important;
  grid-template-columns:minmax(120px,190px) minmax(160px,280px) minmax(160px,280px) minmax(120px,190px)!important;
  column-gap:clamp(14px,1.2vw,24px)!important;
  row-gap:0!important;
  width:min(100%,968px)!important;
  align-items:end!important;
}
.object-card{display:contents!important;}
.object-link{display:contents!important;}
.object-card-left .object-media{grid-column:2!important;grid-row:1!important;}
.object-card-right .object-media{grid-column:3!important;grid-row:1!important;}
.object-card-left .object-meta{grid-column:1!important;grid-row:1!important;text-align:right!important;}
.object-card-right .object-meta{grid-column:4!important;grid-row:1!important;text-align:left!important;}
@media(max-width:700px){
  .objects-pair{
    grid-template-columns:minmax(78px,1fr) minmax(104px,38vw) minmax(104px,38vw) minmax(78px,1fr)!important;
    column-gap:10px!important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   WADI UPDATE — 2026-07-04
   Header trim · Objects 2:3 · PDP restructure · Contact page
   ══════════════════════════════════════════════════════════════════ */

/* ── Objects: display every card as 2:3 portrait (backend ratio still stored) ── */
.objects-grid .object-media{aspect-ratio:2/3!important;}

/* ── PDP hero overlay: only category + title, a little larger ── */
.pdp-hero-glass .pdp-hero-ey{
  font-size:clamp(.82rem,.6rem + .55vw,1.05rem)!important;
  letter-spacing:.34em;color:rgba(110,107,101,.8);
  margin-bottom:clamp(1.1rem,1.6vw,1.6rem);}

/* ── PDP left column: Sq Ft · Year · Dimensions ── */
.pdp-detail-specs{
  display:block;margin:0 0 clamp(24px,2.8vw,38px);
  border-top:1px solid rgba(26,25,23,.12);}
.pdp-detail-spec{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:clamp(10px,1vw,15px) 0;border-bottom:1px solid rgba(26,25,23,.12);}
.pdp-detail-spec dt{text-transform:uppercase;
  color:rgba(26,25,23,.5);font-weight:300;}
.pdp-detail-spec dd{
  margin:0;text-transform:uppercase;
  color:rgba(26,25,23,.82);text-align:right;}
.pdp-detail-drawings-label{
  display:block;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(26,25,23,.5);margin-bottom:clamp(12px,1.4vw,18px);}
.pdp-detail-drawings-note{
  margin:0;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(26,25,23,.68);}
.pdp-drawing-stack{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px);}
.pdp-drawing-card{cursor:none;}
.pdp-drawing-card img{display:block;
  transition:filter .45s ease,transform .9s cubic-bezier(.16,1,.3,1);}
.pdp-drawing-card:hover img{filter:contrast(.98) brightness(.97);transform:scale(1.015);}

/* ── PDP left column: Enquire Now outline button ── */
.pdp-enquire-btn{
  appearance:none;
  align-self:flex-start;
  font-family:var(--sans);font-weight:300;cursor:none;
  transition:background .3s ease,color .3s ease,border-color .3s ease;}
.pdp-enquire-btn:hover{border-color:var(--dark);}

/* ── PDP right column: Finishes always open, no toggle icon ── */
.pdp-info-finishes-open{margin-top:clamp(8px,1vw,14px);}
.pdp-finishes-lb{
  display:block;text-transform:uppercase;
  color:rgba(26,25,23,.52);
  padding:clamp(12px,1.15vw,18px) 0 clamp(14px,1.6vw,20px);
  border-bottom:1px solid rgba(26,25,23,.1);}
.contact-title{color:var(--dark);}
.contact-intro{
  font-size:14px!important;line-height:1.68;color:var(--dark);
  max-width:24ch;margin:0;}
.contact-label{margin-bottom:.75rem;}
.contact-block p{
  margin:0;}
.contact-block a{text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,color .3s ease;}
.contact-block a:hover{color:var(--dark);border-color:rgba(26,25,23,.4);}
.contact-right{
  position:relative;overflow:hidden;}
.contact-right img{display:block;}

@media(max-width:900px){}
@media(max-width:560px){}

/* ══════════════════════════════════════════════════════════════════
   WADI UPDATE — 2026-07-04 (round 2)
   Footer sizing · PDP 12px · scrolling side columns · studio grid · contact
   ══════════════════════════════════════════════════════════════════ */

/* ── Footer: menu items match the header nav size; copyright smaller ── */
#wadi-footer .ft-links a{font-size:10px!important;letter-spacing:.28em;}

/* ── PDP: uniform 12px text in the editorial view ── */
.pdp-detail-intro,
.pdp-readmore .pdp-detail-intro,
.pdp-readmore-toggle,
.pdp-enquire-btn,
.pdp-detail-spec dt,
.pdp-detail-spec dd,
.pdp-detail-drawings-label,
.pdp-detail-drawings-note,
.pdp-info-label,
.pdp-info-row dt,
.pdp-info-row dd,
.pdp-finishes-lb,
.pdp-finish-name{
  font-size:12px!important;}
.pdp-detail-spec dt,.pdp-detail-spec dd,
.pdp-info-row dt,.pdp-info-row dd,
.pdp-finishes-lb,.pdp-finish-name{letter-spacing:.18em!important;}

/* ── PDP: side columns stay beside the gallery for the whole scroll ──
   (html/body use overflow-x:clip, not hidden, so sticky actually works) */
.pdp-detail-panel,
.pdp-info-panel,
.admin-bar .pdp-detail-panel,
.admin-bar .pdp-info-panel{
  align-self:start!important;}
/* Read More button — force 12px and a lighter, tighter treatment */
.pdp-readmore .pdp-readmore-toggle{
  font-size:12px!important;font-weight:300!important;letter-spacing:.2em!important;}
.studio-masonry-item:hover img{transform:scale(1.04);}
@media(max-width:820px){
  .studio-grid{grid-template-columns:1fr 1fr;gap:12px;padding:24px 14px 64px;}
  .studio-col{gap:12px;}
  .studio-col-1{margin-top:clamp(20px,7vw,52px);}
}
@media(max-width:520px){
  .studio-grid{grid-template-columns:1fr;}
  .studio-col-1{margin-top:0;}
}
@media(min-width:901px){
  .wadi-contact .contact-page{
    grid-template-rows:minmax(0,1fr);}
  .wadi-contact .contact-right{min-height:0;}
}

/* ══════════════════════════════════════════════════════════════════
   WADI UPDATE — 2026-07-04 (round 3)
   Objects category summary above the divider line
   ══════════════════════════════════════════════════════════════════ */
.objects-head{margin-bottom:clamp(16px,1.8vw,26px)!important;}
.objects-summary{flex-wrap:wrap;gap:8px clamp(20px,2.6vw,40px);
  margin-bottom:clamp(20px,2.2vw,34px);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(26,25,23,.4);}
.objects-summary-item{display:inline-flex;align-items:baseline;gap:8px;}
.objects-summary-item em{font-style:normal;color:rgba(26,25,23,.66);letter-spacing:.12em;}

/* WADI UPDATE - 2026-07-07 requested layout refinements */

footer{
  background:#FFFFFF;
  border-top:0;
  padding:0 var(--wadi-edge) clamp(12px,0.4vw,22px)!important;
  color:var(--dark);
}
.ft-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  border-top:1px solid rgba(26,25,23,.08);
  padding-top:clamp(18px,1.3vw,34px);
}
.ft-btm{
  background:transparent;
  border-top:0;
  padding:clamp(8px,.1vw,16px) 0 0;
  display:flex;
  justify-content:center;
  text-align:center;
}
.ft-logo{
  width:clamp(104px,8vw,142px)!important;
  height:auto!important;
  max-width:76px!important;
  filter:none;
  display:block;
}

.pdp-hero-glass{
  width:min(var(--pdp-media-width),calc(100vw - 48px))!important;
  max-width:var(--pdp-media-width)!important;
}
.pdp-hero-glass .pdp-hero-title{
  max-width:100%;
  font-size:clamp(2.45rem,5.1vw,5.85rem)!important;
  line-height:.95;
  letter-spacing:0;
  margin-bottom:0;
  overflow-wrap:anywhere;
  word-break:normal;
  text-wrap:balance;
}

.studio-page{
  background:#F8F3EC;
}
.studio-grid{
  display:grid;
  padding:clamp(52px,6vw,112px) var(--wadi-edge) clamp(78px,8vw,140px);
}
.studio-col{
  flex-direction:column;
  gap:clamp(74px,8vw,144px);
}
.studio-col-1{
  margin-top:clamp(64px,7vw,132px);
}
.studio-masonry-item{
  margin:0;
  overflow:hidden;
  display:block;
  background:#F3F1EC;
  cursor:none;
}
.studio-masonry-item img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block;
  transform:none;
  transition:transform .95s cubic-bezier(.16,1,.3,1),filter .55s ease;
}

.contact-page{
  min-height:100vh;
  color:var(--dark);
  align-items:stretch;
}
.contact-content{
  grid-template-columns:minmax(140px,.78fr) minmax(0,1.45fr);
  gap:clamp(24px,3.5vw,60px);
}
.contact-block a{
  overflow-wrap:anywhere;
}
.contact-social a{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--dark);
  margin-right:0;
  letter-spacing:0;
}

.about-page-v2{
  background:#FFFFFF;
  color:var(--dark);
  padding:calc(var(--wadi-header-h) + clamp(34px,4.5vw,72px)) var(--wadi-edge) clamp(60px,6vw,96px);
}
.admin-bar .about-page-v2{
  padding-top:calc(var(--wadi-header-h) + 32px + clamp(34px,4.5vw,72px));
}
.about-founder-panel{
  display:flex;
  align-items:flex-start;
}
.about-founder-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(120px,1.2fr) minmax(210px,.72fr) minmax(140px,220px);
  gap:clamp(32px,6vw,116px);
  align-items:start;
  padding:clamp(14px,1.4vw,20px) 0;
}
.about-founder-label{
  margin:0;
}
.about-founder-copy{
  max-width:260px;
  font-size:clamp(.72rem,.7rem + .12vw,.86rem);
  line-height:1.15;
  color:var(--dark);
  text-align:justify;
}
.about-founder-copy p{
  margin:0;
}
.about-founder-photo{
  margin:0;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  justify-self:end;
}
.about-founder-photo img,
.about-team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1);
}
.about-team-grid{
  margin:0 auto;
  display:grid;
}
.about-team-photo{
  margin:0 0 12px;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#F3F1EC;
}
.about-team-info{
  text-align:left;
}
.about-team-name{
  display:block;
  font-family:var(--serif);
  font-size:clamp(.86rem,.84rem + .14vw,1rem);
  line-height:1.2;
  color:var(--dark);
}
.about-team-role{
  display:block;
  margin-top:3px;
  font-size:clamp(.42rem,.4rem + .08vw,.5rem);
  line-height:1.4;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(26,25,23,.44);
}

@media(max-width:900px){
  .contact-content{
    grid-template-columns:1fr;
    gap:26px;
  }
  .studio-grid{
    grid-template-columns:1fr 1fr;
    padding:28px 16px 70px;
  }
  .studio-col{
    gap:16px;
  }
  .studio-col-1{
    margin-top:clamp(24px,7vw,56px);
  }
  .about-founder-row{
    grid-template-columns:1fr minmax(130px,34vw);
    gap:28px;
  }
  .about-founder-copy{
    grid-column:1;
    max-width:none;
  }
  .about-founder-photo{
    grid-column:2;
    grid-row:1 / span 2;
  }
  .about-team-grid{
    gap:34px 24px;
  }
  .about-team-card,
  .about-team-card:nth-child(4),
  .about-team-card:nth-child(5){
    grid-column:auto;
  }
}

/* WADI UPDATE - 2026-08-04 CF7 multi-step basket enquiry */
.wadi-modal-box{
  width:min(980px,94vw)!important;
  max-height:min(90vh,860px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-width:thin;
  padding:clamp(26px,3.4vw,44px)!important;
  border:1px solid rgba(26,25,23,.12)!important;
  border-radius:8px!important;
  box-shadow:0 28px 90px rgba(13,13,11,.18)!important;
}
.wadi-modal-title{
  margin:0 48px 8px 0!important;
  font-family:var(--serif)!important;
  font-size:clamp(2rem,3.1vw,3rem)!important;
  line-height:1.02!important;
  color:var(--dark)!important;
}
.wadi-modal-sub{
  margin:0 0 clamp(24px,3vw,34px)!important;
  color:rgba(26,25,23,.54)!important;
  font-family:var(--sans)!important;
  font-size:11px!important;
  letter-spacing:.16em!important;
}
.wadi-modal .wpcf7 form{
  margin:0!important;
}
.wadi-enquiry-wizard{
  color:var(--dark)!important;
  font-family:var(--sans)!important;
}
.wadi-enquiry-progress{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 clamp(22px,3vw,34px)!important;
}
.wadi-enquiry-progress-item{
  appearance:none!important;
  width:46px!important;
  height:46px!important;
  border:1px solid rgba(26,25,23,.15)!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  background:#f4f4f4!important;
  color:rgba(26,25,23,.58)!important;
  font-family:var(--sans)!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:1!important;
  cursor:none!important;
  transition:background .24s ease,color .24s ease,border-color .24s ease!important;
}
.wadi-enquiry-progress-item.is-active,
.wadi-enquiry-progress-item.is-complete{
  background:var(--dark)!important;
  border-color:var(--dark)!important;
  color:#fff!important;
}
.wadi-enquiry-progress-line{
  display:block!important;
  flex:1 1 36px!important;
  width:auto!important;
  min-width:34px!important;
  height:2px!important;
  background:#e2e2e2!important;
}
.wadi-enquiry-progress-line.is-complete{
  background:var(--dark)!important;
}
.wadi-enquiry-step-panel{
  border:1px solid rgba(26,25,23,.1)!important;
  border-radius:8px!important;
  padding:clamp(22px,3vw,34px)!important;
  background:#fff!important;
}
.wadi-enquiry-step-head{
  margin:0 0 clamp(20px,2.4vw,28px)!important;
}
.wadi-enquiry-step-head h4{
  margin:0 0 6px!important;
  font-family:var(--sans)!important;
  font-size:clamp(1.25rem,1rem + .75vw,1.85rem)!important;
  line-height:1.12!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.wadi-enquiry-step-head p{
  margin:0!important;
  color:rgba(26,25,23,.62)!important;
  font-size:15px!important;
  line-height:1.5!important;
}
.wadi-enquiry-product-card{
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding:0 0 clamp(20px,2.4vw,28px)!important;
  margin:0 0 clamp(20px,2.4vw,30px)!important;
  border-bottom:1px solid rgba(26,25,23,.1)!important;
}
.wadi-enquiry-product-media{
  width:92px!important;
  aspect-ratio:1/1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:1px solid rgba(26,25,23,.12)!important;
  background:#f2f2f2!important;
  color:rgba(26,25,23,.38)!important;
  font-size:10px!important;
  letter-spacing:.22em!important;
}
.wadi-enquiry-product-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.wadi-enquiry-product-body{
  min-width:0!important;
}
.wadi-enquiry-product-kicker,
.wadi-enquiry-product-qty{
  display:block!important;
  color:rgba(26,25,23,.48)!important;
  font-size:11px!important;
  letter-spacing:.16em!important;
  line-height:1.2!important;
  text-transform:uppercase!important;
}
.wadi-enquiry-product-title{
  margin:8px 0!important;
  color:var(--dark)!important;
  font-family:var(--serif)!important;
  font-size:clamp(1.45rem,1.1rem + 1vw,2.1rem)!important;
  font-weight:300!important;
  line-height:1.05!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
}
.wadi-enquiry-groups{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
.wadi-enquiry-choice-group{
  min-width:0!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
}
.wadi-enquiry-choice-group legend,
.wadi-enquiry-field>span{
  display:block!important;
  margin:0 0 8px!important;
  color:var(--dark)!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.wadi-enquiry-option-grid{
  display:grid!important;
  grid-template-columns:1fr;
  gap:8px!important;
}
.wadi-enquiry-check{
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 12px!important;
  border:1px solid rgba(26,25,23,.13)!important;
  border-radius:6px!important;
  background:#fff!important;
  color:rgba(26,25,23,.82)!important;
  font-size:13px!important;
  line-height:1.25!important;
  cursor:none!important;
  transition:border-color .22s ease,background .22s ease!important;
}
.wadi-enquiry-check:hover,
.wadi-enquiry-check:focus-within{
  border-color:rgba(26,25,23,.45)!important;
  background:#fafafa!important;
}
.wadi-enquiry-check input{
  flex:0 0 auto!important;
  width:15px!important;
  height:15px!important;
  accent-color:var(--dark)!important;
}
.wadi-enquiry-notes{
  display:block!important;
  margin:clamp(18px,2.2vw,26px) 0 0!important;
}
.wadi-enquiry-field input,
.wadi-enquiry-field textarea{
  width:100%!important;
  border:1px solid rgba(26,25,23,.13)!important;
  border-radius:6px!important;
  background:#fff!important;
  color:var(--dark)!important;
  font-family:var(--sans)!important;
  font-size:15px!important;
  line-height:1.4!important;
  padding:14px 16px!important;
  box-shadow:none!important;
  outline:none!important;
  transition:border-color .22s ease,background .22s ease!important;
}
.wadi-enquiry-field input{
  min-height:54px!important;
}
.wadi-enquiry-field textarea{
  min-height:116px!important;
  resize:vertical!important;
}
.wadi-enquiry-field input:focus,
.wadi-enquiry-field textarea:focus{
  border-color:rgba(26,25,23,.62)!important;
  background:#fafafa!important;
}
.wadi-enquiry-personal-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
}
.wadi-enquiry-field-wide{
  grid-column:1/-1!important;
}
.wadi-enquiry-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:clamp(22px,3vw,34px) 0 0!important;
}
.wadi-enquiry-nav,
.wadi-enquiry-submit-wrap input[type="submit"]{
  appearance:none!important;
  min-width:144px!important;
  min-height:52px!important;
  border-radius:8px!important;
  padding:0 22px!important;
  font-family:var(--sans)!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  cursor:none!important;
  transition:background .24s ease,color .24s ease,border-color .24s ease,opacity .24s ease!important;
}
.wadi-enquiry-prev{
  border:1px solid rgba(26,25,23,.11)!important;
  background:#fff!important;
  color:rgba(26,25,23,.56)!important;
}
.wadi-enquiry-prev:not(:disabled):hover{
  border-color:var(--dark)!important;
  color:var(--dark)!important;
}
.wadi-enquiry-prev:disabled{
  opacity:.45!important;
}
.wadi-enquiry-next,
.wadi-enquiry-submit-wrap input[type="submit"]{
  margin-left:auto!important;
  border:1px solid var(--dark)!important;
  background:var(--dark)!important;
  color:#fff!important;
}
.wadi-enquiry-next:hover,
.wadi-enquiry-submit-wrap input[type="submit"]:hover{
  background:#fff!important;
  color:var(--dark)!important;
}
.wadi-enquiry-submit-wrap{
  margin-left:auto!important;
}
.wadi-enquiry-submit-wrap .wpcf7-spinner{
  margin-left:10px!important;
}
.wadi-enquiry-storage,
.wpcf7-form-control-wrap[data-name="wadi-basket-summary"],
.wpcf7-form-control-wrap[data-name="wadi-enquiry-details"],
.wpcf7-form-control-wrap[data-name="wadi-enquiry-products-json"]{
  display:none!important;
}
.wadi-modal .wpcf7-not-valid-tip{
  margin-top:7px!important;
  color:#111!important;
  font-size:12px!important;
}
.wadi-modal .wpcf7-response-output{
  margin:18px 0 0!important;
  padding:12px 14px!important;
  border:1px solid rgba(26,25,23,.18)!important;
  border-radius:6px!important;
  color:var(--dark)!important;
  font-size:13px!important;
}
body.wadi-modal-open #cur,
body.wadi-basket-open #cur{
  z-index:14050!important;
  opacity:1!important;
}
body.wadi-modal-open #curR,
body.wadi-basket-open #curR{
  z-index:14049!important;
  opacity:1!important;
}
body.wadi-modal-open .wadi-modal,
body.wadi-basket-open .wadi-basket-drawer{
  cursor:none!important;
}
@media(max-width:860px){
  .wadi-modal{
    align-items:flex-start!important;
    padding:18px 0!important;
  }
  .wadi-modal-box{
    width:min(94vw,640px)!important;
    padding:24px 18px!important;
  }
  .wadi-enquiry-progress{
    gap:7px!important;
  }
  .wadi-enquiry-progress-item{
    width:38px!important;
    height:38px!important;
    font-size:14px!important;
  }
  .wadi-enquiry-groups,
  .wadi-enquiry-personal-grid{
    grid-template-columns:1fr!important;
  }
  .wadi-enquiry-product-card{
    grid-template-columns:74px minmax(0,1fr)!important;
    gap:14px!important;
  }
  .wadi-enquiry-product-media{
    width:74px!important;
  }
  .wadi-enquiry-actions{
    gap:10px!important;
  }
  .wadi-enquiry-nav,
  .wadi-enquiry-submit-wrap,
  .wadi-enquiry-submit-wrap input[type="submit"]{
    min-width:0!important;
    flex:1 1 0!important;
  }
}
@media(max-width:520px){
  .wadi-modal-title{
    font-size:2rem!important;
  }
  .wadi-enquiry-step-panel{
    padding:18px 14px!important;
  }
  .wadi-enquiry-progress{
    overflow-x:auto!important;
    padding-bottom:4px!important;
  }
  .wadi-enquiry-progress-line{
    min-width:24px!important;
  }
}
@media(max-width:560px){
  .contact-blocks{
    gap:24px;
  }
  .contact-left{
    padding:40px 22px 56px;
  }
  .studio-col-1{
    margin-top:0;
  }
  .about-page-v2{
    padding-left:22px;
    padding-right:22px;
  }
  .about-founder-panel{
    min-height:0;
  }
  .about-founder-row{
    grid-template-columns:1fr;
    gap:22px;
    padding:18px 0 28px;
  }
  .about-founder-photo{
    grid-column:auto;
    grid-row:auto;
    justify-self:start;
    width:min(220px,72vw);
  }
}

/* WADI UPDATE - 2026-07-07 final refinement pass */

@media(min-width:901px){}
.contact-block p{
  overflow-wrap:anywhere;
}

.studio-masonry-item{
  aspect-ratio:4/5!important;
}

.about-founder-panel{
  border-top:1px solid rgba(26,25,23,.08)!important;
  border-bottom:1px solid rgba(26,25,23,.08)!important;
}
.about-founder-label,
.about-team-title{
  font-family:var(--sans)!important;
  font-size:clamp(.5rem,.44rem + .14vw,.64rem)!important;
  line-height:1.3!important;
  font-weight:500!important;
  letter-spacing:.34em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.28)!important;
}
.about-team-title{
  margin:0 0 clamp(42px,5vw,72px)!important;
  text-align:center!important;
}

/* WADI UPDATE - 2026-07-17 requested PDP/contact/about/studio refinements */
.pdp-editorial-sec{
  --pdp-edge-pad:clamp(29px,5.4vw,86px)!important;
}
.pdp-detail-panel{
  margin-left:var(--pdp-edge-pad)!important;
}
.pdp-info-panel{
  margin-right:var(--pdp-edge-pad)!important;
}
.pdp-editorial-sec p:not(.pdp-detail-intro),
.pdp-editorial-sec button,
.pdp-editorial-sec .pdp-readmore .pdp-readmore-toggle,
.pdp-editorial-sec dt,
.pdp-editorial-sec dd,
.pdp-editorial-sec span,
.pdp-editorial-sec a,
.pdp-editorial-sec li{
  font-size:10px!important;
}
.pdp-finish-list{
  --pdp-finish-square:clamp(58px,4vw,80px);
  display:grid!important;
  grid-template-columns:repeat(4,var(--pdp-finish-square))!important;
  justify-content:space-between!important;
  align-items:start!important;
  gap:clamp(10px,1.2vw,16px)!important;
}
.pdp-finish-item{
  display:grid!important;
  grid-template-rows:auto auto;
  width:var(--pdp-finish-square)!important;
  min-width:0!important;
  gap:8px!important;
}
.pdp-finish-swatch,
.pdp-finish-img{
  width:var(--pdp-finish-square)!important;
  height:var(--pdp-finish-square)!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
}
.pdp-finishes-lb{
  margin-bottom:clamp(12px,1.4vw,18px)!important;
}

@media(min-width:901px){
  .contact-page,
  .wadi-contact .contact-page{
    width:calc(100% - var(--wadi-edge) - var(--wadi-edge))!important;
    margin:0 auto!important;
    grid-template-columns:minmax(0,58%) minmax(280px,42%)!important;
    overflow:hidden!important;
  }
  .contact-left{
    padding:clamp(48px,6.5vw,110px) clamp(30px,4.5vw,84px) clamp(48px,6.5vw,110px) 0!important;
    justify-content:center!important;
  }
  .contact-right{
    min-height:0!important;
    align-self:stretch!important;
    overflow:hidden!important;
  }
}
.contact-title{
  padding-bottom:clamp(64px,5vw,96px)!important;
}

.about-team-grid{
  width:100%!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(18px,2.2vw,36px)!important;
}
.about-founder-panel{
  min-height:clamp(210px,26.6vw,329px)!important;
}
.about-team-panel{
  padding-top:clamp(41px,4.9vw,73px)!important;
}
.about-team-card,
.about-team-card:nth-child(4),
.about-team-card:nth-child(5){
  grid-column:auto!important;
}

.studio-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:start!important;
  gap:clamp(186px,6vw,92px)!important;
}
.studio-col{
  display:contents!important;
}
.studio-masonry-item:nth-child(2){
  transform:translateY(clamp(26px,4vw,70px));
}
.studio-masonry-item:nth-child(3n+2):not(:nth-child(2)){
  transform:translateY(clamp(-54px,-3.4vw,-24px));
}
.studio-masonry-item.rv.on:nth-child(2){
  transform:translateY(clamp(26px,4vw,70px));
}
.studio-masonry-item.rv.on:nth-child(3n+2):not(:nth-child(2)){
  transform:translateY(clamp(-54px,-3.4vw,-24px));
}

@media(max-width:1100px){
  .pdp-editorial-sec{
    --pdp-edge-pad:clamp(19px,3vw,34px)!important;
  }
}
@media(max-width:900px){
  .pdp-detail-panel,
  .pdp-info-panel{
    margin-left:0!important;
    margin-right:0!important;
  }
  .about-team-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .studio-grid{
    gap:16px!important;
  }
  .studio-masonry-item:nth-child(2),
  .studio-masonry-item:nth-child(3n+2):not(:nth-child(2)),
  .studio-masonry-item.rv.on:nth-child(2),
  .studio-masonry-item.rv.on:nth-child(3n+2):not(:nth-child(2)){
    transform:none;
  }
}
@media(max-width:560px){
  .pdp-finish-list,
  .about-team-grid,
  .studio-grid{
    grid-template-columns:1fr!important;
  }
  .pdp-finish-item{
    width:var(--pdp-finish-square)!important;
  }
  .contact-title{
    padding-bottom:48px!important;
  }
}

/* WADI UPDATE - 2026-07-28 screenshot layout pass */
:root{
  --wadi-edge:clamp(24px,12.45vw,230px);
  --wadi-frame-width:calc(100% - var(--wadi-edge) - var(--wadi-edge));
}

header#hdr{
  padding:0 var(--wadi-edge)!important;
}
header#hdr::before{
  left:var(--wadi-edge)!important;
  right:var(--wadi-edge)!important;
  background:rgba(26,25,23,.12)!important;
}
header#hdr nav a{
  font-size:10px!important;
  letter-spacing:.34em!important;
}
header#hdr nav a::after,
#wadi-footer nav a::after{
  display:none!important;
}
.logo-img{
  height:clamp(18px,1.25vw,25px)!important;
  max-width:82px!important;
}

#wadi-footer{
  width:100%;
  padding:0 var(--wadi-edge) clamp(44px,5vw,82px)!important;
  background:#fff!important;
}
#wadi-footer .ft-main{
  border-top:1px solid rgba(26,25,23,.12)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
}
#wadi-footer .ft-copy{
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.32)!important;
  text-align:left!important;
}
#wadi-footer .ft-nav{
  display:flex!important;
  align-items:center!important;
  gap:clamp(16px,1.8vw,28px)!important;
}
#wadi-footer .ft-privacy{
  color:rgba(26,25,23,.72)!important;
  text-decoration:none!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.28em!important;
  text-transform:uppercase!important;
}
#wadi-footer .ft-socials{
  gap:10px!important;
}
#wadi-footer .ft-social{
  width:16px!important;
  height:16px!important;
  color:rgba(26,25,23,.62)!important;
}
.home-video-section{
  padding:clamp(74px,7.5vw,136px) 0 clamp(102px,8.9vw,170px)!important;
}
.home-video-shell{
  width:var(--wadi-frame-width)!important;
}
.home-video-frame{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:2.21/1!important;
  background:#B8B8B8!important;
}
.objects-index{
  padding:clamp(14px,1.8vw,32px) 0 clamp(80px,8vw,150px)!important;
}
.objects-shell{
  width:100%!important;
  margin:0!important;
}
.objects-head,
.objects-summary,
.objects-rule{
  display:none!important;
}
.objects-grid{
  display:block!important;
  width:100%!important;
  margin:0!important;
}
.objects-set{
  position:relative;
  width:100%;
  padding:0 var(--wadi-edge);
}
.objects-set + .objects-set::before{
  content:'';
  position:absolute;
  top:0;
  left:var(--wadi-edge);
  right:var(--wadi-edge);
  height:1px;
  background:rgba(26,25,23,.12);
}
.objects-page .object-card,
.objects-page .object-link{
  min-width:0!important;
}
.objects-page .object-link{
  color:inherit!important;
  text-decoration:none!important;
}
.objects-page .object-card-left .object-media,
.objects-page .object-card-right .object-media,
.objects-page .object-card-left .object-meta,
.objects-page .object-card-right .object-meta{
  grid-column:auto!important;
  grid-row:auto!important;
  text-align:center!important;
}
.objects-page .object-media{
  background:#D9D9D9!important;
}
.objects-page .object-name{
  text-transform:uppercase!important;
}
.object-title-top .object-link,
.object-title-bottom .object-link{
  display:flex!important;
  flex-direction:column;
}

.pdp-editorial-sec{
  --pdp-media-width:clamp(220px,16vw,305px)!important;
  --pdp-image-gap:clamp(22px,2.4vw,34px)!important;
  width:var(--wadi-frame-width)!important;
  margin:0 auto!important;
  padding:clamp(20px,2.6vw,44px) 0 clamp(44px,4.8vw,86px)!important;
  display:grid!important;
  /* Symmetric flanking tracks — see the 2026-08-17 note further down. */
  grid-template-columns:minmax(220px,260px) minmax(0,1fr) var(--pdp-media-width) minmax(0,1fr) minmax(220px,260px)!important;
  gap:0!important;
  align-items:start!important;
}
.pdp-detail-panel,
.pdp-info-panel,
.admin-bar .pdp-detail-panel,
.admin-bar .pdp-info-panel{
  position:static!important;
  top:auto!important;
  margin:0!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  background:transparent!important;
}
.pdp-detail-panel{
  grid-column:1!important;
  padding-top:clamp(88px,8vw,124px)!important;
  min-height:clamp(620px,44vw,850px)!important;
  display:flex!important;
  flex-direction:column;
}
.pdp-copy-block{
  margin:0!important;
}
.pdp-product-title{
  margin:0 0 12px!important;
  font-family:var(--sans)!important;
  font-size:14px!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
}
.pdp-editorial-sec .pdp-detail-intro,
.pdp-editorial-sec .pdp-readmore .pdp-detail-intro{
  display:block!important;
  margin:0!important;
  max-width:220px!important;
  font-family:var(--serif)!important;
  font-size:11px!important;
  line-height:1.22!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.78)!important;
  text-align:left!important;
  text-align-last:left!important;
  overflow:visible!important;
}
.pdp-detail-drawings{
  margin:clamp(104px,8.8vw,136px) 0 clamp(28px,3vw,46px)!important;
}
.pdp-drawing-card{
  width:100%!important;
  aspect-ratio:3/2!important;
  margin:0!important;
  background:#E9E9E9!important;
  border:0!important;
  overflow:hidden!important;
}
.pdp-drawing-card img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#E9E9E9!important;
}
.pdp-drawing-placeholder{
  display:block!important;
}
.pdp-enquire-btn{
  margin-top:auto!important;
}
.pdp-scroll-stack{
  grid-column:3!important;
  width:100%!important;
  display:grid!important;
  gap:var(--pdp-image-gap)!important;
  margin:0!important;
}
.pdp-stack-card{
  aspect-ratio:3/4!important;
  width:100%!important;
  margin:0!important;
  background:#B7B7B7!important;
  overflow:hidden!important;
}
.pdp-stack-card img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.pdp-info-panel{
  grid-column:5!important;
  padding-top:clamp(52px,5.6vw,94px)!important;
  min-height:clamp(620px,44vw,850px)!important;
  display:flex!important;
  flex-direction:column;
}
.pdp-side-heading{
  display:block!important;
  margin:0 0 20px!important;
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.25em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.66)!important;
}
.pdp-dimension-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0!important;
  margin:0 0 clamp(54px,6vw,94px)!important;
  padding-top:7px!important;
  border-top:1px solid rgba(26,25,23,.16)!important;
}
/* WADI UPDATE - 2026-08-12 (CLD request) single rule under SPECIFICATIONS.
   The grid already draws a full-width border-top; the per-cell border-top
   drew a second rule 7px beneath it, reading as a double line. */
.pdp-dimension-grid div{
  border-top:0!important;
  padding-top:7px!important;
}
.pdp-dimension-grid dt,
.pdp-dimension-grid dd{
  display:block!important;
  margin:0!important;
  font-size:7px!important;
  line-height:1!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.62)!important;
  text-align:left!important;
}
.pdp-dimension-grid dd{
  padding-top:20px!important;
  color:rgba(26,25,23,.72)!important;
}
.pdp-info-table{
  margin:0 0 clamp(54px,6vw,92px)!important;
  border-top:0!important;
}
.pdp-info-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:7px 0!important;
  border-bottom:1px solid rgba(26,25,23,.14)!important;
}
.pdp-info-row dt,
.pdp-info-row dd,
.pdp-download-row{
  margin:0!important;
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.72)!important;
  text-decoration:none!important;
}
.pdp-info-row dd{
  text-align:right!important;
}
.pdp-download-box{
  margin:0!important;
}
.pdp-download-row{
  display:block!important;
  padding:8px 0!important;
  border-bottom:1px solid rgba(26,25,23,.14)!important;
}
.pdp-color-row{
  margin-top:6px!important;
}
.pdp-finishes-box{
  width:122px!important;
  min-height:120px!important;
  margin-top:auto!important;
  margin-left:auto!important;
  border:1px solid rgba(26,25,23,.32)!important;
  padding:13px!important;
  display:block!important;
}
.pdp-finishes-box .pdp-finishes-lb{
  display:none!important;
}
.pdp-finishes-box .pdp-finish-list{
  --pdp-finish-square:39px!important;
  display:grid!important;
  grid-template-columns:repeat(2,var(--pdp-finish-square))!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.pdp-finishes-box .pdp-finish-item{
  width:var(--pdp-finish-square)!important;
  gap:0!important;
}
.pdp-finishes-box .pdp-finish-swatch,
.pdp-finishes-box .pdp-finish-img{
  width:var(--pdp-finish-square)!important;
  height:var(--pdp-finish-square)!important;
}
.pdp-finishes-box .pdp-finish-name{
  display:none!important;
}

.info-page{
  padding:calc(var(--wadi-header-h) + clamp(70px,7.4vw,118px)) var(--wadi-edge) clamp(72px,7vw,120px);
}
.info-sticky-panel{
  position:sticky;
}
.info-intro-band{
  display:flex;
  align-items:center;
}
.info-intro-copy{
  margin:0;
  font-family:var(--serif);
  font-size:16px!important;
  line-height:1.6;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.info-person-photo{
  margin:0;
  overflow:hidden;
  background:#B7B7B7;
}
.info-person-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  display:block;
}
.info-person-text{
  padding-bottom:0;
}
.info-person-text h2{
  font-family:var(--sans)!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
}
.info-person-text p{
  margin:0;
  font-family:var(--serif);
  color:#111;
}

.studio-page-ref{
  background:#fff!important;
}
.studio-ref-intro{
  width:var(--wadi-frame-width);
  margin:0 auto;
  padding:clamp(70px,7.8vw,124px) 0 clamp(58px,6.2vw,94px);
  display:flex;
  justify-content:center;
}
.studio-ref-intro p{
  width:min(370px,100%);
  margin:0;
  font-family:var(--serif);
  font-size:13px!important;
  line-height:1.25;
  font-weight:700;
  color:#111;
}
.studio-ref-grid{
  width:var(--wadi-frame-width);
  margin:0 auto;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(10px,1vw,13px)!important;
  padding:0 0 clamp(86px,8.8vw,136px)!important;
}
.studio-ref-item,
.studio-ref-item:nth-child(2),
.studio-ref-item:nth-child(3n+2):not(:nth-child(2)),
.studio-ref-item.rv.on:nth-child(2),
.studio-ref-item.rv.on:nth-child(3n+2):not(:nth-child(2)){
  aspect-ratio:1/1!important;
  transform:none!important;
  margin:0!important;
  background:#B7B7B7!important;
}
.studio-ref-item img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.contact-page{
  width:var(--wadi-frame-width)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(300px,42%)!important;
  column-gap:clamp(60px,8.5vw,120px)!important;
  background:#fff!important;
}
.contact-left{
  min-width:0;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
}
.contact-title{
  margin:0!important;
  padding:0!important;
  font-family:var(--sans)!important;
  font-size:clamp(28px,2.2vw,34px)!important;
  line-height:1!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
}
.contact-title-rule{
  width:min(392px,100%);
  height:1px;
  background:rgba(26,25,23,.12);
  margin:11px 0 clamp(88px,9vw,124px);
}
.contact-content{
  display:block!important;
  margin:0 0 clamp(8px,1.4vw,18px)!important;
}
.contact-blocks{
  width:min(420px,100%)!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(30px,3.2vw,46px) clamp(42px,4vw,74px)!important;
}
.contact-label{
  display:block!important;
  margin:0 0 6px!important;
  font-size:9px!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  color:rgba(26,25,23,.62)!important;
}
.contact-block p,
.contact-block a{
  font-size:11px!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  color:rgba(26,25,23,.86)!important;
}
.contact-social{
  display:flex!important;
  gap:14px!important;
  align-items:center!important;
}
.contact-right{
  align-self:start!important;
  height:calc(100% - 30px)!important;
  min-height:0!important;
  margin-top:14px!important;
  margin-bottom:16px!important;
  background:#B7B7B7!important;
}
.contact-right img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
@media(min-width:901px){
  body.wadi-contact{
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.wadi-contact.admin-bar{
    height:calc(100vh - 32px)!important;
    min-height:calc(100vh - 32px)!important;
  }
  .wadi-contact .contact-page{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
  }
  .wadi-contact #wadi-footer{
    flex:0 0 auto!important;
  }
}

@media(max-width:1100px){
  .pdp-editorial-sec{
    grid-template-columns:minmax(190px,240px) minmax(0,1fr) var(--pdp-media-width) minmax(0,1fr) minmax(190px,240px)!important;
  }
}

@media(max-width:900px){
  .home-video-section{
    padding-top:clamp(44px,8vw,78px)!important;
  }
  .pdp-detail-panel,
  .pdp-info-panel{
    padding-top:0!important;
  }
  .pdp-enquire-btn{
    margin-top:20px!important;
  }
  .pdp-scroll-stack{
    margin:42px 0!important;
  }
  .info-page{
    padding-left:var(--wadi-edge);
    padding-right:var(--wadi-edge);
  }
  .contact-page{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }
}

@media(max-width:700px){
  :root{
    --wadi-edge:clamp(6px,1.8vw,12px);
    --wadi-header-h:72px;
  }
  header#hdr{
    padding:0 18px!important;
  }
  header#hdr::before{
    left:18px!important;
    right:18px!important;
  }
  #wadi-footer{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .objects-set{
    padding-left:var(--wadi-edge);
    padding-right:var(--wadi-edge);
  }
  .objects-set + .objects-set::before{
    left:var(--wadi-edge);
    right:var(--wadi-edge);
  }
  .objects-set-grid .objects-set-inner{
    gap:20px 16px!important;
  }
  .objects-page .object-meta{
    min-height:52px!important;
  }
  .object-feature-card{
    width:min(82vw,56svh);
  }
}

@media(max-width:560px){
  header#hdr nav a{
    font-size:9px!important;
    letter-spacing:.11em!important;
  }
  #wadi-footer .ft-main{
    align-items:flex-start!important;
  }
  .objects-page .object-name{
    font-size:20px!important;
  }
  .info-intro-copy{
    font-size:13px!important;
  }
  .info-team-row{
    grid-template-columns:1fr;
  }
  .studio-ref-grid{
    grid-template-columns:1fr!important;
  }
  .contact-blocks{
    grid-template-columns:1fr!important;
  }
}

/* WADI UPDATE - 2026-07-29 viewport + font refinements */
:root{
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Playfair Display',Georgia,serif;
}
body,
button,input,textarea,select,
h1,h2,h3,h4,h5,h6,
p,a,span,li,dt,dd,figcaption{
  font-family:'Playfair Display',Georgia,serif!important;
}
header#hdr nav a{
  font-family:'Playfair Display',Georgia,serif!important;
  font-weight:600!important;
}

@media(min-width:901px){
  body.home{
    height:100svh!important;
    min-height:100svh!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.home.admin-bar{
    height:calc(100svh - 32px)!important;
    min-height:calc(100svh - 32px)!important;
  }
  body.home .home-reference-page{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    padding-top:var(--wadi-header-h)!important;
  }
  body.home.admin-bar .home-reference-page{
    padding-top:calc(var(--wadi-header-h) + 32px)!important;
  }
  body.home .home-video-section{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    padding:clamp(12px,2.2vh,24px) 0!important;
  }
  body.home .home-video-shell{
    height:100%!important;
    display:flex!important;
    align-items:center!important;
  }
  body.home .home-video-frame{
    width:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }
  body.home #wadi-footer{
    flex:0 0 auto!important;
  }
  body.home #wadi-footer .ft-main{
    padding-top:clamp(10px,1.2vh,16px)!important;
  }
}
.info-team-row{
  position:relative!important;
  z-index:1!important;
}
.objects-set-grid .objects-set-inner{
  margin:0 auto!important;
}
.objects-page .object-card{
  display:block!important;
}
.objects-page .object-meta,
.object-title-top .object-meta,
.object-title-bottom .object-meta{
  order:0!important;
  min-height:clamp(28px,4.2vh,42px)!important;
  width:100%!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.objects-page .object-name{
  text-align:center!important;
  font-family:'Playfair Display',Georgia,serif!important;
  letter-spacing:.02em!important;
}
.objects-page .object-media,
.object-title-top .object-media,
.object-title-bottom .object-media{
  order:1!important;
  flex:0 1 auto!important;
  height:clamp(150px,30svh,315px)!important;
  width:auto!important;
  max-width:100%!important;
  margin:0 auto!important;
}
.objects-page .object-media img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.object-feature-card .object-link{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}

@media(max-width:900px){
  .objects-set-grid .objects-set-inner{
    min-height:0!important;
  }
}

.info-page{
  overflow:visible!important;
}
.info-team-row{
  margin-bottom:clamp(76px,7vw,118px)!important;
}
.objects-set + .objects-set::before{
  display:none!important;
}
.objects-page .object-link{
  justify-content:flex-start!important;
}
.object-feature-card .object-meta{
  order:0!important;
}
.object-feature-card .object-media{
  order:1!important;
}

@media(max-width:900px){}

/* WADI UPDATE - 2026-07-29 final info/header/object correction */
:root{
  --wadi-header-h:clamp(42px,2.6vw,52px)!important;
}
header#hdr{
  height:var(--wadi-header-h)!important;
  align-items:center!important;
}
@media(max-width:782px){
  .admin-bar header#hdr{
    top:var(--wadi-header-top)!important;
  }
}
header#hdr::before{
  bottom:0!important;
}

#wadi-footer .ft-main{
  padding-top:8px!important;
}
body.home #wadi-footer .ft-main{
  padding-top:8px!important;
}

.info-page{
  padding-top:calc(var(--wadi-header-offset) + clamp(34px,3.6vw,62px))!important;
  background:#fff!important;
  color:#111!important;
}
.admin-bar .info-page{
  padding-top:calc(var(--wadi-header-offset) + clamp(34px,3.6vw,62px))!important;
}
.info-sticky-panel{
  top:calc(var(--wadi-header-offset) + clamp(8px,1vw,18px))!important;
  z-index:20!important;
  background:#fff!important;
}
.admin-bar .info-sticky-panel{
  top:calc(var(--wadi-header-offset) + clamp(8px,1vw,18px))!important;
}
.info-intro-band{
  min-height:clamp(178px,13.5vw,220px)!important;
  background:#fff!important;
  color:#111!important;
  padding:clamp(26px,3vw,50px) clamp(28px,3.2vw,48px)!important;
  border:0!important;
}
.info-intro-copy{
  color:#111!important;
}
.info-team-section{
  position:relative!important;
  z-index:1!important;
  margin-top:clamp(42px,5vw,76px)!important;
  padding-top:0!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 clamp(72px,8vw,128px),#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 clamp(72px,8vw,128px),#000 100%);
}
.info-team-row,
.info-team-row:first-child,
.info-team-row:last-child{
  width:min(100%,980px)!important;
  min-height:calc(100svh - var(--wadi-header-offset) - clamp(330px,34vw,430px))!important;
  display:grid!important;
  grid-template-columns:minmax(170px,220px) minmax(200px,245px) minmax(200px,245px) minmax(170px,220px)!important;
  gap:clamp(28px,3.2vw,58px)!important;
  align-items:center!important;
  margin:0 auto clamp(72px,7vw,116px)!important;
}
.info-team-row:first-child{
  min-height:calc(100svh - var(--wadi-header-offset) - clamp(330px,34vw,430px))!important;
}
.info-person-text{
  align-self:center!important;
  padding:0!important;
}
.info-person-text-left{
  text-align:right!important;
}
.info-person-text-right{
  text-align:left!important;
}
.info-person-photo{
  width:100%!important;
  max-width:245px!important;
  aspect-ratio:1/1!important;
  align-self:center;
}
.info-person-text h2{
  font-size:14px!important;
  margin:0 0 12px!important;
  line-height:1.15!important;
}
.info-person-text p{
  font-size:12px!important;
  line-height:1.2!important;
}
.info-team-row:last-child .info-person-text-left{
  grid-column:1!important;
}
.info-team-row:last-child .info-person-photo:first-of-type{
  grid-column:2!important;
}
.info-team-row:last-child .info-person-text-left + .info-person-photo + figure,
.info-team-row:last-child .info-person-text-right{
  display:none!important;
}
.objects-index{
  padding-top:clamp(12px,1.5vw,24px)!important;
}
.objects-set-grid{
  min-height:calc(100svh - var(--wadi-header-offset))!important;
}
.objects-set + .objects-set{
  margin-top:40px!important;
  /* Both sides, so the centring added on 2026-08-17 stays even. Zeroing only
     the top left every set after the first sitting 14px high in its own frame. */
  padding-top:0!important;
  padding-bottom:0!important;
}
.objects-set-grid .objects-set-inner{
  align-items:start!important;
}
.objects-page .object-slot-1 .object-meta,
.objects-page .object-slot-2 .object-meta,
.objects-page .object-title-top .object-meta{
  order:0!important;
}
.objects-page .object-slot-1 .object-media,
.objects-page .object-slot-2 .object-media,
.objects-page .object-title-top .object-media{
  order:1!important;
}
.objects-page .object-slot-3 .object-media,
.objects-page .object-slot-4 .object-media,
.objects-page .object-title-bottom .object-media{
  order:0!important;
}
.objects-page .object-slot-3 .object-meta,
.objects-page .object-slot-4 .object-meta,
.objects-page .object-title-bottom .object-meta{
  order:1!important;
}

@media(max-width:900px){
  .info-team-row,
  .info-team-row:first-child,
  .info-team-row:last-child{
    grid-template-columns:1fr 1fr!important;
  }
}

/* WADI UPDATE - 2026-07-29 objects close-grid + feature scale */
html,
body,
header#hdr,
header#hdr::after{
  background:#fff!important;
}
#glow{
  background:none!important;
}
/* WADI UPDATE - 2026-08-17 (CLD request) the products sit in the middle of the
   screen rather than up against the header.

   Each set is already a full viewport tall (min-height above), but its contents
   were pinned to the top, so every set left a viewport's worth of empty page
   underneath it — which is what made a snap look like it had shoved the grid up
   under the header. Centring the contents uses that space on both sides.
   The padding is matched top and bottom so the centring is not skewed by it. */
.objects-set-grid{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  padding-top:clamp(8px,1vw,18px)!important;
  padding-bottom:clamp(8px,1vw,18px)!important;
}
.objects-set-grid .objects-set-inner{
  width:max-content!important;
  max-width:calc(100vw - 48px)!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,max-content)!important;
  grid-template-rows:repeat(2,max-content)!important;
  gap:40px!important;
  justify-content:center!important;
  align-content:start!important;
}
.objects-page .object-card,
.objects-page .object-link{
  width:max-content!important;
  height:auto!important;
  min-height:0!important;
}
.objects-page .object-link{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}
.objects-page .object-media{
  height:clamp(210px,31svh,350px)!important;
  width:auto!important;
  margin:0!important;
}
.objects-page .object-ratio-2-3 .object-media{
  aspect-ratio:2/3!important;
}
.objects-page .object-ratio-1-1 .object-media{
  aspect-ratio:1/1!important;
}
.objects-page .object-meta{
  width:100%!important;
  min-height:30px!important;
  margin:0!important;
}
.objects-page .object-name,
.object-feature-card .object-name{
  font-size:16px!important;
  line-height:1.08!important;
  font-weight:500!important;
}
/* Feature sets are centred on the same reasoning as the grid sets above. */
.objects-set-feature{
  min-height:calc(100svh - var(--wadi-header-offset))!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  padding-top:clamp(8px,1vw,18px)!important;
  padding-bottom:clamp(8px,1vw,18px)!important;
}
.object-feature-card{
  width:max-content!important;
  max-width:calc(100vw - 48px)!important;
}
.object-feature-card .object-link{
  width:max-content!important;
  max-width:100%!important;
}
.object-feature-card .object-media{
  height:min(82svh,calc(100svh - var(--wadi-header-offset) - 58px),760px)!important;
  width:auto!important;
  aspect-ratio:2/3!important;
  margin:0!important;
}
.object-feature-card .object-meta{
  min-height:34px!important;
}

@media(max-width:900px){}

/* WADI UPDATE - 2026-07-30 enquiry basket drawer */
header#hdr .wadi-basket-link{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  white-space:nowrap;
}
header#hdr .wadi-basket-link .wadi-basket-icon{
  width:17px!important;
  height:17px!important;
  display:block!important;
  flex:0 0 auto!important;
  color:currentColor!important;
}
header#hdr .wadi-basket-link .wadi-basket-count{
  display:inline-block!important;
  min-width:.75em!important;
  text-align:center!important;
  font-variant-numeric:tabular-nums;
}

.objects-page .object-media-link{
  display:contents!important;
  color:inherit!important;
  text-decoration:none!important;
}
.objects-page .object-title-link{
  color:inherit!important;
  text-decoration:none!important;
}
.objects-page .object-meta,
.object-feature-card .object-meta{
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
}
.objects-page .object-name,
.object-feature-card .object-name{
  width:auto!important;
  max-width:calc(100% - 30px)!important;
  flex:0 1 auto!important;
}
.object-quick-add{
  appearance:none!important;
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:rgba(26,25,23,.6)!important;
  line-height:1!important;
  cursor:none!important;
  transition:opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1),color .25s ease!important;
}
.object-quick-add .wadi-bag-icon{
  width:100%!important;
  height:100%!important;
  display:block!important;
  overflow:visible!important;
}
.object-quick-add .wadi-bag-icon path{
  transition:stroke-width .25s ease,stroke .25s ease!important;
}
.object-quick-add:hover{
  opacity:.7!important;
  transform:translateY(-1px)!important;
}
.object-quick-add.is-added{
  color:var(--black)!important;
}
/* WADI UPDATE - 2026-08-17 (CLD request) the new bag artwork is drawn on a
   32-unit grid with a 2.5 stroke, where the old one was 20 units with a 1.3
   stroke. The "added" weight has to move with it — the old value of 2 would now
   read thinner than the resting state, not heavier. */
.object-quick-add.is-added .wadi-bag-icon path{
  stroke-width:3.4;
}
.object-title-link:focus-visible,
.object-quick-add:focus-visible,
.wadi-basket-link:focus-visible,
.wadi-basket-close:focus-visible,
.wadi-basket-qty-btn:focus-visible,
.wadi-basket-enquire:focus-visible{
  outline:1px solid rgba(26,25,23,.65)!important;
  outline-offset:4px!important;
}
.pdp-enquire-btn{
  white-space:nowrap;
}

.wadi-basket-drawer{
  position:fixed!important;
  inset:0!important;
  z-index:10250!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .36s ease!important;
}
.wadi-basket-drawer.open{
  opacity:1!important;
  pointer-events:auto!important;
}
.wadi-basket-backdrop{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  background:rgba(13,13,11,.18)!important;
  cursor:none!important;
}
.wadi-basket-panel{
  position:absolute!important;
  top:0!important;
  right:0!important;
  width:min(430px,calc(100vw - 22px))!important;
  height:100%!important;
  background:#fff!important;
  color:var(--dark)!important;
  border-left:1px solid rgba(26,25,23,.12)!important;
  transform:translateX(100%)!important;
  transition:transform .52s cubic-bezier(.16,1,.3,1)!important;
  display:flex!important;
  flex-direction:column;
  gap:0!important;
  /* WADI UPDATE - 2026-08-12 align drawer with header/footer (CLD request):
     top padding matches the fixed header's own offset (var(--wadi-header-top))
     so .wadi-basket-head below can reproduce the header's exact height/line.
     Bottom padding is set per-breakpoint below — on desktop it is derived so
     the ENQUIRE NOW band lands on the site footer's line (see next rule). */
  padding-top:var(--wadi-header-top,0px)!important;
  padding-right:clamp(22px,3vw,34px)!important;
  padding-bottom:clamp(12px,.4vw,22px)!important;
  padding-left:clamp(22px,3vw,34px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-width:thin;
  outline:none!important;
  box-shadow:-24px 0 70px rgba(13,13,11,.08)!important;
}
.wadi-basket-drawer.open .wadi-basket-panel{
  transform:translateX(0)!important;
}
.wadi-basket-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  height:var(--wadi-header-h)!important;
  flex:0 0 auto!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
  border-bottom:1px solid rgba(26,25,23,.14)!important;
}
.wadi-basket-title{
  margin:0!important;
  font-family:'Playfair Display',Georgia,serif!important;
  line-height:1!important;
  font-weight:500!important;
  text-transform:uppercase!important;
}
.wadi-basket-close{
  appearance:none!important;
  border:0!important;
  background:transparent!important;
  color:rgba(26,25,23,.62)!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  cursor:none!important;
}
.wadi-basket-close:hover{
  color:var(--dark)!important;
}
.wadi-basket-list{
  display:flex!important;
  flex-direction:column;
  gap:0!important;
  padding:clamp(18px,2.4vw,30px) 0!important;
}
.wadi-basket-item{
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  gap:16px!important;
  align-items:center!important;
  padding:0 0 18px!important;
  margin:0 0 18px!important;
  border-bottom:1px solid rgba(26,25,23,.11)!important;
}
.wadi-basket-media{
  display:block!important;
  width:82px!important;
  aspect-ratio:1/1!important;
  background:#E9E7E1!important;
  color:inherit!important;
  text-decoration:none!important;
  overflow:hidden!important;
}
.wadi-basket-media img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
}
.wadi-basket-media.is-empty::before{
  content:'WADI';
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  font-size:10px!important;
  letter-spacing:.22em!important;
  color:rgba(26,25,23,.32)!important;
}
.wadi-basket-item-body{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
}
.wadi-basket-item-title{
  min-width:0!important;
  color:var(--dark)!important;
  text-decoration:none!important;
  font-size:14px!important;
  line-height:1.16!important;
  font-weight:500!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
.wadi-basket-qty{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:26px 30px 26px;
  align-items:center!important;
  min-height:28px!important;
  border:0!important;
}
.wadi-basket-qty-btn{
  appearance:none!important;
  width:26px!important;
  height:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--dark)!important;
  font-size:17px!important;
  line-height:1!important;
  cursor:none!important;
}
.wadi-basket-qty-btn:hover{
  background:rgba(26,25,23,.06)!important;
}
.wadi-basket-qty-value{
  display:block!important;
  min-width:30px!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:28px!important;
  border:0!important;
}
.wadi-basket-empty{
  margin:clamp(28px,3vw,42px) 0!important;
  color:rgba(26,25,23,.52)!important;
  font-size:13px!important;
  line-height:1.4!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.wadi-basket-empty[hidden]{
  display:none!important;
}
.wadi-basket-enquire{
  appearance:none!important;
  width:100%!important;
  min-height:44px!important;
  padding:0 18px!important;
  border:1px solid var(--dark)!important;
  background:var(--dark)!important;
  color:#fff!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:12px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  cursor:none!important;
  transition:background .25s ease,color .25s ease!important;
}
.wadi-basket-enquire:hover{
  background:#fff!important;
  color:var(--dark)!important;
}
/* WADI UPDATE - 2026-08-12 align drawer with header/footer (CLD request):
   mirrors the site footer's own border-top + padding-top band (.ft-main)
   so ENQUIRE NOW sits in the same footer-style row instead of being pinned
   flush to the bottom of the drawer. */
.wadi-basket-foot{
  margin-top:auto!important;
  flex:0 0 auto!important;
  /* padding-top matches .ft-main's own 8px so the drawer's rule and the site
     footer's rule land on exactly the same line (verified: 0px delta). */
  padding-top:8px!important;
  border-top:1px solid rgba(26,25,23,.08)!important;
}
/* WADI UPDATE - 2026-08-12 ENQUIRE NOW on the footer line (CLD request).
   Desktop only — on mobile the drawer covers the full width so the site
   footer is never visible beside it and this alignment is moot.

   The site footer's rule sits (footer padding-bottom + .ft-main height)
   above the viewport bottom = var(--wadi-header-top) + 25px.
   The drawer's rule sits (panel padding-bottom + 1px border + 8px
   padding-top + 44px button) above it. Solving for equal offsets gives
   panel padding-bottom = var(--wadi-header-top) - 28px.
   Verified live at 1600x900: both rules at y=791 (0px delta), and
   ENQUIRE NOW's top within 1px of the footer text's top. */
@media(min-width:901px){
  .wadi-basket-panel{
    padding-bottom:calc(var(--wadi-header-top) - 28px)!important;
  }
}

@media(max-width:700px){
  header#hdr nav{
    gap:8px!important;
  }
  header#hdr nav a{
    font-size:8px!important;
    letter-spacing:.08em!important;
  }
  .objects-page .object-meta,
  .object-feature-card .object-meta{
    gap:5px!important;
  }
  .object-quick-add{
    width:20px!important;
    height:20px!important;
    flex-basis:20px!important;
    font-size:20px!important;
  }
  .wadi-basket-panel{
    width:100vw!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .wadi-basket-item{
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:13px!important;
  }
  .wadi-basket-media{
    width:72px!important;
  }
  .wadi-basket-item-body{
    align-items:flex-start!important;
    flex-direction:column;
    gap:12px!important;
  }
}

/* WADI UPDATE - 2026-07-30 responsive reference layouts */
.home-video-frame-responsive-extra{
  display:none!important;
}

@media(max-width:900px){
  :root{
    --wadi-responsive-edge:clamp(27px,6.4vw,37px);
    --wadi-header-h:116px!important;
    --wadi-edge:var(--wadi-responsive-edge);
  }

  header#hdr{
    height:var(--wadi-header-h)!important;
    padding:0 var(--wadi-responsive-edge)!important;
    flex-direction:column;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:0!important;
  }
  header#hdr::before{
    left:var(--wadi-responsive-edge)!important;
    right:var(--wadi-responsive-edge)!important;
    bottom:0!important;
  }
  header#hdr .logo{
    height:58px!important;
    width:100%!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
  }
  header#hdr .logo-img{
    height:25px!important;
    max-width:96px!important;
  }
  header#hdr .h-right{
    width:100%!important;
    margin:16px 0 0!important;
    justify-content:center!important;
  }
  header#hdr nav{
    width:100%!important;
    justify-content:center!important;
    gap:clamp(18px,6.1vw,42px)!important;
  }
  header#hdr nav a{
    line-height:1!important;
    letter-spacing:.23em!important;
    font-weight:500!important;
  }

  .home-reference-page,
  .objects-page,
  .studio-page-ref,
  .contact-page{
    padding-top:var(--wadi-header-offset)!important;
  }

  #wadi-footer{
    margin-top:clamp(74px,11svh,124px)!important;
    padding:0 var(--wadi-responsive-edge) clamp(44px,7vw,58px)!important;
  }
  #wadi-footer .ft-main{
    padding-top:14px!important;
    align-items:center!important;
    flex-direction:row!important;
  }
  #wadi-footer .ft-copy{
    font-size:7px!important;
    letter-spacing:.14em!important;
  }
  #wadi-footer .ft-nav{
    gap:clamp(18px,4vw,28px)!important;
  }
  #wadi-footer .ft-privacy{
    font-size:8px!important;
    letter-spacing:.22em!important;
  }
  #wadi-footer .ft-social{
    width:15px!important;
    height:15px!important;
  }
  body.home .home-video-section,
  .home-video-section{
    padding:clamp(108px,13svh,138px) 0 clamp(86px,10svh,118px)!important;
    display:block!important;
  }
  .home-video-shell{
    width:calc(100% - (var(--wadi-responsive-edge) * 2))!important;
    max-width:520px!important;
    display:grid!important;
    gap:clamp(56px,8.6svh,78px)!important;
  }
  .home-video-frame{
    aspect-ratio:1.94/1!important;
    height:auto!important;
    min-height:0!important;
  }
  .home-video-frame-responsive-extra{
    display:block!important;
  }

  .objects-index{
    padding:clamp(74px,9svh,92px) 0 0!important;
  }
  .objects-set{
    padding-left:var(--wadi-responsive-edge)!important;
    padding-right:var(--wadi-responsive-edge)!important;
  }
  .objects-set + .objects-set{
    margin-top:clamp(70px,9svh,110px)!important;
  }
  .objects-set-grid{
    min-height:auto!important;
    padding-top:0!important;
  }
  .objects-set-grid .objects-set-inner{
    width:100%!important;
    max-width:540px!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,auto)!important;
    justify-content:center!important;
  }
  .objects-page .object-meta,
  .object-feature-card .object-meta{
    gap:5px!important;
  }
  .object-quick-add{
    width:20px!important;
    height:20px!important;
    flex-basis:20px!important;
    font-size:20px!important;
  }
  .objects-set-feature{
    min-height:auto!important;
  }
  .object-feature-card,
  .object-feature-card .object-link{
    width:min(100%,540px)!important;
    max-width:540px!important;
  }
  .object-feature-card .object-media{
    width:min(100%,260px)!important;
    height:auto!important;
    aspect-ratio:3/4!important;
    margin:0 auto!important;
  }

  .info-page{
    padding:calc(var(--wadi-header-offset) + clamp(36px,6vw,54px)) var(--wadi-responsive-edge) 0!important;
  }
  .info-sticky-panel{
    position:static!important;
    top:auto!important;
    background:#fff!important;
  }
  .info-intro-band{
    min-height:0!important;
    padding:0!important;
    display:block!important;
    background:#fff!important;
  }
  .info-intro-copy{
    margin:0!important;
    font-size:8px!important;
    line-height:1.48!important;
    letter-spacing:.04em!important;
    font-weight:500!important;
    text-align:justify!important;
    text-align-last:left!important;
  }
  .info-team-section{
    margin-top:clamp(72px,10svh,104px)!important;
    padding-top:0!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .info-team-row,
  .info-team-row:first-child,
  .info-team-row:last-child{
    width:min(100%,360px)!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column;
    align-items:center!important;
    gap:0!important;
    margin:0 auto!important;
  }
  .info-team-row > .info-person-photo:first-of-type{
    order:1!important;
  }
  .info-team-row > .info-person-text-left{
    order:2;
  }
  .info-team-row > .info-person-photo:nth-of-type(2){
    order:3!important;
  }
  .info-team-row > .info-person-text-right{
    order:4;
  }
  .info-person-photo,
  .info-team-row:last-child .info-person-photo:first-of-type{
    width:clamp(138px,30vw,176px)!important;
    max-width:none!important;
    aspect-ratio:1/1!important;
    margin:0 0 13px!important;
    grid-column:auto!important;
  }
  .info-person-text,
  .info-person-text-left,
  .info-person-text-right,
  .info-team-row:last-child .info-person-text-left{
    width:min(100%,286px)!important;
    text-align:left!important;
    align-self:center!important;
    padding:0!important;
    margin:0 0 clamp(66px,9svh,92px)!important;
    grid-column:auto!important;
    display:block!important;
  }
  .info-team-row:last-child .info-person-text-left + .info-person-photo + figure,
  .info-team-row:last-child .info-person-text-right{
    display:none!important;
  }
  .info-person-text h2{
    text-align:center!important;
    font-size:10px!important;
    line-height:1.2!important;
    font-weight:500!important;
    letter-spacing:.03em!important;
    margin:0 0 16px!important;
  }
  .info-person-text p{
    font-size:8px!important;
    line-height:1.44!important;
    letter-spacing:.04em!important;
    font-weight:500!important;
    text-align:justify!important;
    text-align-last:left!important;
  }

  .studio-page-ref{
    padding-top:var(--wadi-header-offset)!important;
  }
  .studio-ref-intro{
    padding:clamp(42px,7svh,62px) 0 clamp(52px,7svh,70px)!important;
  }
  .studio-ref-intro p{
    width:min(100%,440px)!important;
    font-size:8px!important;
    line-height:1.45!important;
    letter-spacing:.04em!important;
    font-weight:500!important;
    text-align:justify!important;
    text-align-last:left!important;
  }
  .studio-ref-grid{
    width:min(calc(100% - (var(--wadi-responsive-edge) * 2)),460px)!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:clamp(14px,3vw,18px)!important;
    padding:0 0 clamp(78px,11svh,120px)!important;
  }
  .studio-ref-item,
  .studio-ref-item:nth-child(2),
  .studio-ref-item:nth-child(3n+2):not(:nth-child(2)),
  .studio-ref-item.rv.on:nth-child(2),
  .studio-ref-item.rv.on:nth-child(3n+2):not(:nth-child(2)){
    aspect-ratio:2/3!important;
  }

  .contact-page{
    width:calc(100% - (var(--wadi-responsive-edge) * 2))!important;
    padding-top:var(--wadi-header-offset)!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
  }
  .contact-right{
    order:1;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1.24/1!important;
    margin:clamp(38px,6svh,54px) 0 0!important;
  }
  .contact-left{
    order:2;
    padding:clamp(30px,5svh,42px) 0 0!important;
  }
  .contact-title{
    font-size:18px!important;
    line-height:1!important;
    font-weight:400!important;
    margin:0!important;
  }
  .contact-title-rule{
    width:100%!important;
    margin:11px 0 30px!important;
  }
  .contact-content{
    margin:0!important;
  }
  .contact-blocks{
    width:100%!important;
    flex-direction:column;
    gap:0!important;
  }
  .contact-block{
    margin:0 0 28px!important;
  }
  .contact-block:nth-child(1) .contact-label{
    font-size:0!important;
  }
  .contact-block:nth-child(1) .contact-label::after{
    content:'Email';
    font-size:10px!important;
  }
  .contact-label{
    margin:0 0 8px!important;
    font-size:10px!important;
    line-height:1.2!important;
    color:rgba(26,25,23,.58)!important;
  }
  .contact-block p,
  .contact-block a{
    font-size:12px!important;
    line-height:1.3!important;
    color:#111!important;
  }
  .contact-social{
    gap:24px!important;
  }
  .contact-social a{
    width:24px!important;
    height:24px!important;
    margin:0!important;
  }
  .contact-social svg{
    width:24px!important;
    height:24px!important;
  }
}

@media(max-width:520px){
  :root{
    --wadi-responsive-edge:21px;
  }
  header#hdr{
    padding:0 var(--wadi-responsive-edge)!important;
  }
  header#hdr::before{
    left:var(--wadi-responsive-edge)!important;
    right:var(--wadi-responsive-edge)!important;
  }
  header#hdr .logo{
    height:35px!important;
  }
  header#hdr .logo-img{
    height:20px!important;
    max-width:78px!important;
  }
  header#hdr nav{
    gap:clamp(14px,5.7vw,25px)!important;
  }
  header#hdr nav a{
    letter-spacing:.18em!important;
  }

  #wadi-footer{
    margin-top:76px!important;
    padding-left:var(--wadi-responsive-edge)!important;
    padding-right:var(--wadi-responsive-edge)!important;
  }
  #wadi-footer .ft-main{
    padding-top:12px!important;
  }
  #wadi-footer .ft-copy{
    max-width:170px!important;
    font-size:5px!important;
    line-height:1.2!important;
  }
  #wadi-footer .ft-nav{
    gap:15px!important;
  }
  #wadi-footer .ft-privacy{
    font-size:5px!important;
  }
  #wadi-footer .ft-social{
    width:12px!important;
    height:12px!important;
  }

  body.home .home-video-section,
  .home-video-section{
    padding:84px 0 82px!important;
  }
  .home-video-shell{
    width:calc(100% - (var(--wadi-responsive-edge) * 2))!important;
    gap:54px!important;
  }

  .objects-index{
    padding-top:82px!important;
  }
  .objects-set-grid .objects-set-inner{
    max-width:100%!important;
    gap:16px 14px!important;
  }
  .object-quick-add{
    width:16px!important;
    height:16px!important;
    flex-basis:16px!important;
    font-size:16px!important;
  }

  .info-page{
    padding-top:calc(var(--wadi-header-offset) + 18px)!important;
  }
  .info-intro-copy{
    font-size:7px!important;
    line-height:1.44!important;
  }
  .info-person-photo{
    width:138px!important;
  }
  .info-person-text{
    width:min(100%,236px)!important;
  }

  .studio-ref-intro{
    padding:25px 0 52px!important;
  }
  .studio-ref-grid{
    width:min(calc(100% - 92px),260px)!important;
    gap:14px!important;
  }

  .contact-right{
    margin-top:38px!important;
  }
  .contact-left{
    padding-top:30px!important;
  }
  .contact-title{
    font-size:16px!important;
  }
}

/* WADI UPDATE - 2026-07-31 spacing + mobile object alignment + PDP carousel */
:root{
  --pdp-sticky-enquiry-h:56px;
}
header#hdr,
.admin-bar header#hdr{
  top:var(--wadi-header-top)!important;
}
.home-reference-page,
body.home .home-reference-page,
.objects-page,
.studio-page-ref,
.finishes-page,
.contact-page,
.admin-bar .home-reference-page,
body.home.admin-bar .home-reference-page,
.admin-bar .objects-page,
.admin-bar .studio-page-ref,
.admin-bar .finishes-page,
.admin-bar .contact-page{
  padding-top:var(--wadi-header-offset)!important;
}
.pdp-hero-sec,
.admin-bar .pdp-hero-sec{
  padding-top:calc(var(--wadi-header-offset) + clamp(12px,2vw,24px))!important;
}
@media(min-width:901px){}

.pdp-image-carousel{
  grid-column:3!important;
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  overflow:visible!important;
}
.pdp-image-window{
  width:100%!important;
  overflow:hidden!important;
  touch-action:pan-y!important;
  cursor:none!important;
}
.pdp-image-track{
  display:flex!important;
  width:100%!important;
  will-change:transform!important;
}
.pdp-image-carousel.is-dragging .pdp-image-track{
  transition:none!important;
}
.pdp-image-slide{
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  aspect-ratio:3/4!important;
  margin:0!important;
  overflow:hidden!important;
  background:#B7B7B7!important;
}
.pdp-image-slide img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
}
.pdp-image-slide:hover img{
  filter:contrast(.98) brightness(.96)!important;
}
.pdp-image-nav{
  position:absolute!important;
  top:50%!important;
  width:34px!important;
  height:112px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:rgba(26,25,23,.72)!important;
  transform:translateY(-50%)!important;
  z-index:8!important;
  cursor:none!important;
  opacity:.72!important;
  transition:opacity .24s ease,color .24s ease!important;
}
.pdp-image-nav:hover{
  opacity:1!important;
  color:var(--dark)!important;
}
.pdp-image-prev{
  left:clamp(-54px,-3vw,-24px)!important;
}
.pdp-image-next{
  right:clamp(-54px,-3vw,-24px)!important;
}
.pdp-image-nav::before,
.pdp-image-nav::after{
  content:''!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:1px!important;
  height:44px!important;
  background:currentColor!important;
}
.pdp-image-prev::before{
  transform:translate(-50%,-100%) rotate(30deg)!important;
  transform-origin:50% 100%!important;
}
.pdp-image-prev::after{
  transform:translate(-50%,0) rotate(-30deg)!important;
  transform-origin:50% 0!important;
}
.pdp-image-next::before{
  transform:translate(-50%,-100%) rotate(-30deg)!important;
  transform-origin:50% 100%!important;
}
.pdp-image-next::after{
  transform:translate(-50%,0) rotate(30deg)!important;
  transform-origin:50% 0!important;
}
.pdp-image-nav-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0!important;
}
.pdp-image-carousel.is-single .pdp-image-nav{
  display:none!important;
}

body.wadi-pdp-has-sticky-enquiry{
  padding-bottom:calc(var(--pdp-sticky-enquiry-h) + env(safe-area-inset-bottom,0px))!important;
}
.pdp-enquire-btn{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:9000!important;
  width:100%!important;
  min-width:0!important;
  min-height:calc(var(--pdp-sticky-enquiry-h) + env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
  padding:0 clamp(20px,4vw,46px) env(safe-area-inset-bottom,0px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-top:1px solid rgba(26,25,23,.72)!important;
  background:var(--dark)!important;
  color:#fff!important;
  box-shadow:0 -12px 34px rgba(13,13,11,.08)!important;
  font-size:11px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
.pdp-enquire-btn:hover{
  background:#fff!important;
  color:var(--dark)!important;
}

@media(max-width:900px){
  header#hdr,
  .admin-bar header#hdr{
    top:var(--wadi-header-top)!important;
  }
  #wadi-footer,
  body.home #wadi-footer{
    padding-bottom:clamp(66px,10.5vw,87px)!important;
  }
  .objects-set-grid .objects-set-inner{
    align-items:start!important;
    gap:clamp(22px,5vw,30px) clamp(14px,4vw,18px)!important;
  }
  .objects-page .object-media,
  .objects-page .object-ratio-1-1 .object-media,
  .objects-page .object-ratio-2-3 .object-media,
  .objects-page .object-title-top .object-media,
  .objects-page .object-title-bottom .object-media,
  .objects-page .object-slot-1 .object-media,
  .objects-page .object-slot-2 .object-media,
  .objects-page .object-slot-3 .object-media,
  .objects-page .object-slot-4 .object-media{
    order:1!important;
    grid-row:1!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:3/4!important;
    margin:0!important;
  }
  .objects-page .object-meta,
  .object-feature-card .object-meta,
  .objects-page .object-title-top .object-meta,
  .objects-page .object-title-bottom .object-meta,
  .objects-page .object-slot-1 .object-meta,
  .objects-page .object-slot-2 .object-meta,
  .objects-page .object-slot-3 .object-meta,
  .objects-page .object-slot-4 .object-meta{
    order:2!important;
    grid-row:2!important;
    min-height:clamp(42px,9vw,56px)!important;
    align-items:flex-start!important;
    justify-content:center!important;
    text-align:center!important;
  }
  .pdp-image-carousel{
    margin:42px 0 0!important;
  }
  .pdp-image-nav{
    color:rgba(255,255,255,.9)!important;
    filter:drop-shadow(0 1px 7px rgba(0,0,0,.32))!important;
  }
  .pdp-image-prev{
    left:8px!important;
  }
  .pdp-image-next{
    right:8px!important;
  }
}

@media(max-width:520px){}

/* WADI UPDATE - 2026-07-31 mobile title restore + larger outer spacing */
:root{
  --wadi-header-top:84px!important;
  --wadi-header-offset:calc(var(--wadi-header-top) + var(--wadi-header-h))!important;
}
#wadi-footer{
  padding-bottom:clamp(46px,5.9vw,92px)!important;
}
body.home #wadi-footer{
  padding-bottom:clamp(25px,2.94vh,42px)!important;
}
@media(min-width:901px){}

@media(max-width:900px){
  :root{
    --wadi-header-top:101px!important;
    --wadi-header-offset:calc(var(--wadi-header-top) + var(--wadi-header-h))!important;
  }
  body.home{
    height:100svh!important;
    min-height:100svh!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.home .home-reference-page{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    padding-top:var(--wadi-header-offset)!important;
  }
  body.home .home-video-section{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    display:flex!important;
    align-items:center!important;
    padding:clamp(8px,1.6svh,16px) 0!important;
  }
  body.home .home-video-shell{
    width:min(calc(100% - (var(--wadi-responsive-edge) * 2)),44svh,520px)!important;
    max-width:none!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(2,auto)!important;
    gap:clamp(10px,1.8svh,16px)!important;
    align-content:center!important;
    justify-items:center!important;
  }
  body.home .home-video-frame{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
  }
  body.home .home-video-frame-responsive-extra{
    display:block!important;
  }
  body.home #wadi-footer{
    flex:0 0 auto!important;
    margin-top:0!important;
    padding-bottom:clamp(92px,14.7vw,122px)!important;
  }

  .objects-page .object-link{
    grid-template-rows:auto minmax(42px,auto)!important;
  }
  .objects-page .object-meta,
  .object-feature-card .object-meta{
    min-height:clamp(42px,9vw,56px)!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
  .object-feature-card .object-link{
    display:grid!important;
    grid-template-rows:minmax(42px,auto) auto!important;
    row-gap:8px!important;
  }
  .object-feature-card .object-meta{
    order:0!important;
    grid-row:1!important;
  }
  .object-feature-card .object-media{
    order:1!important;
    grid-row:2!important;
  }
}

@media(max-width:520px){
  :root{
    --wadi-header-top:55px!important;
  }
  body.home .home-video-shell{
    width:calc(100% - (var(--wadi-responsive-edge) * 2))!important;
    gap:10px!important;
  }
  #wadi-footer,
  body.home #wadi-footer{
    padding-bottom:59px!important;
  }
  .objects-page .object-meta,
  .object-feature-card .object-meta{
    min-height:38px!important;
  }
}

/* WADI UPDATE - 2026-07-31 object mobile grid recovery */
@media(max-width:900px){
  .objects-page .objects-index{
    padding-top:clamp(70px,9svh,92px)!important;
  }
  .objects-page .objects-set{
    width:100%!important;
    padding-left:var(--wadi-responsive-edge)!important;
    padding-right:var(--wadi-responsive-edge)!important;
  }
  /* Mobile sets are content-height, so there is nothing to centre in — they
     keep the top alignment and the flush padding they already had. */
  .objects-page .objects-set-grid{
    display:flex!important;
    justify-content:center!important;
    align-items:flex-start!important;
    min-height:auto!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .objects-page .objects-set-grid .objects-set-inner{
    width:100%!important;
    max-width:540px!important;
    height:auto!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    gap:clamp(24px,5.6vw,36px) clamp(14px,4vw,18px)!important;
    justify-content:center!important;
  }
  .objects-page .objects-set-count-1 .objects-set-inner{
    grid-template-columns:minmax(0,1fr)!important;
    max-width:min(100%,420px)!important;
  }
  .objects-page .object-card{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:block!important;
  }
  .objects-page .object-link{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    row-gap:8px!important;
    align-items:start!important;
    justify-items:stretch!important;
  }
  .objects-page .object-title-top .object-link,
  .objects-page .object-slot-1 .object-link,
  .objects-page .object-slot-2 .object-link,
  .objects-page .objects-set-count-1 .object-link{
    grid-template-rows:minmax(34px,auto) auto!important;
  }
  .objects-page .object-title-bottom .object-link,
  .objects-page .object-slot-3 .object-link,
  .objects-page .object-slot-4 .object-link{
    grid-template-rows:auto minmax(34px,auto)!important;
  }
  .objects-page .object-media-link{
    display:contents!important;
    color:inherit!important;
    text-decoration:none!important;
  }
  .objects-page .object-media,
  .objects-page .object-ratio-1-1 .object-media,
  .objects-page .object-ratio-2-3 .object-media{
    width:100%!important;
    height:auto!important;
    aspect-ratio:3/4!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .objects-page .object-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .objects-page .object-meta{
    width:100%!important;
    min-height:34px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    text-align:center!important;
  }
  .objects-page .object-name,
  .object-feature-card .object-name{
    width:auto!important;
    max-width:calc(100% - 24px)!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.08!important;
    font-weight:500!important;
    letter-spacing:.01em!important;
    text-align:center!important;
  }
  .objects-page .object-quick-add{
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
    font-size:18px!important;
    line-height:1!important;
  }
  .objects-page .object-slot-1 .object-meta,
  .objects-page .object-slot-2 .object-meta,
  .objects-page .object-title-top .object-meta,
  .objects-page .objects-set-count-1 .object-meta{
    grid-row:1!important;
    order:0!important;
  }
  .objects-page .object-slot-1 .object-media,
  .objects-page .object-slot-2 .object-media,
  .objects-page .object-title-top .object-media,
  .objects-page .objects-set-count-1 .object-media{
    grid-row:2!important;
    order:1!important;
  }
  .objects-page .object-slot-3 .object-media,
  .objects-page .object-slot-4 .object-media,
  .objects-page .object-title-bottom .object-media{
    grid-row:1!important;
    order:0!important;
  }
  .objects-page .object-slot-3 .object-meta,
  .objects-page .object-slot-4 .object-meta,
  .objects-page .object-title-bottom .object-meta{
    grid-row:2!important;
    order:1!important;
  }

  .objects-page .objects-set-feature{
    min-height:auto!important;
    display:flex!important;
    justify-content:center!important;
    align-items:flex-start!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .objects-page .object-feature-card{
    width:min(100%,420px)!important;
    max-width:420px!important;
    min-height:0!important;
    display:block!important;
  }
  .objects-page .object-feature-card .object-link{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(34px,auto) auto!important;
    row-gap:8px!important;
    justify-items:stretch!important;
  }
  .objects-page .object-feature-card .object-meta{
    grid-row:1!important;
    order:0!important;
    width:100%!important;
    min-height:34px!important;
  }
  .objects-page .object-feature-card .object-media{
    grid-row:2!important;
    order:1!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:3/4!important;
    margin:0 auto!important;
  }
}

@media(max-width:520px){
  .objects-page .objects-set-grid .objects-set-inner{
    max-width:100%!important;
    gap:24px 14px!important;
  }
  .objects-page .object-link,
  .objects-page .object-feature-card .object-link{
    row-gap:7px!important;
  }
  .objects-page .object-meta,
  .objects-page .object-feature-card .object-meta{
    min-height:34px!important;
  }
  .objects-page .object-name,
  .object-feature-card .object-name{
    font-size:14px!important;
  }
}

/* WADI UPDATE - 2026-08-01 header cover + mobile object grid alignment */
header#hdr{
  isolation:isolate;
  overflow:visible!important;
  background:#fff!important;
}
header#hdr::after{
  content:''!important;
  position:absolute!important;
  top:calc(0px - var(--wadi-header-top,0px))!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  z-index:-1!important;
  background:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

@media(max-width:900px){
  .objects-page{
    --wadi-mobile-object-title-row:38px;
    --wadi-mobile-object-row-gap:7px;
  }
  .objects-page .objects-set-grid .objects-set-inner{
    align-items:start!important;
  }
  .objects-page .objects-set-grid .object-card,
  .objects-page .objects-set-grid .object-card + .object-card{
    margin-top:0!important;
    align-self:start;
  }
  .objects-page .objects-set-grid .object-link{
    align-content:start!important;
    align-items:start!important;
    row-gap:var(--wadi-mobile-object-row-gap)!important;
  }
  .objects-page .objects-set-grid .object-title-top .object-link,
  .objects-page .objects-set-grid .object-slot-1 .object-link,
  .objects-page .objects-set-grid .object-slot-2 .object-link,
  .objects-page .objects-set-grid.objects-set-count-1 .object-link{
    grid-template-rows:var(--wadi-mobile-object-title-row) auto!important;
  }
  .objects-page .objects-set-grid .object-title-bottom .object-link,
  .objects-page .objects-set-grid .object-slot-3 .object-link,
  .objects-page .objects-set-grid .object-slot-4 .object-link{
    grid-template-rows:auto var(--wadi-mobile-object-title-row)!important;
  }
  .objects-page .objects-set-grid .object-meta{
    min-height:var(--wadi-mobile-object-title-row)!important;
    height:var(--wadi-mobile-object-title-row)!important;
    align-items:center!important;
  }
  .objects-page .objects-set-grid .object-media{
    align-self:start;
  }
}

@media(max-width:520px){
  .objects-page{
    --wadi-mobile-object-title-row:34px;
  }
}

/* WADI UPDATE - 2026-08-01 PDP gallery: desktop stack + mobile top carousel */
@media(min-width:901px){
  .pdp-scroll-stack.pdp-image-carousel{
    grid-column:3!important;
    display:grid!important;
    gap:var(--pdp-image-gap)!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    overflow:visible!important;
  }
  .pdp-scroll-stack.pdp-image-carousel .pdp-image-window{
    overflow:visible!important;
    touch-action:auto!important;
  }
  .pdp-scroll-stack.pdp-image-carousel .pdp-image-track{
    display:grid!important;
    gap:var(--pdp-image-gap)!important;
    width:100%!important;
    will-change:auto!important;
    transform:none!important;
    transition:none!important;
  }
  .pdp-scroll-stack.pdp-image-carousel .pdp-image-slide{
    flex:none!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .pdp-scroll-stack.pdp-image-carousel .pdp-image-nav{
    display:none!important;
  }
}

@media(max-width:900px){
  .pdp-hero-sec{
    display:none!important;
  }
  .pdp-editorial-sec{
    flex-direction:column;
  }
  .pdp-scroll-stack.pdp-image-carousel{
    order:0;
  }
  .pdp-detail-panel{
    order:1;
  }
  .pdp-info-panel{
    order:2;
  }
}

/* WADI UPDATE - 2026-08-04 desktop requested spacing fixes */
@media(min-width:901px){
  :root{
    --wadi-info-intro-gap:clamp(34px,3.6vw,62px);
  }

  body.home #wadi-footer{
    padding-bottom:var(--wadi-header-top)!important;
  }

  .info-page,
  .admin-bar .info-page{
    padding-top:calc(var(--wadi-header-offset) + var(--wadi-info-intro-gap))!important;
  }
  .info-sticky-panel,
  .admin-bar .info-sticky-panel{
    position:sticky!important;
    top:calc(var(--wadi-header-offset) + var(--wadi-info-intro-gap))!important;
    z-index:40!important;
    background:#fff!important;
    isolation:isolate;
  }
  .info-sticky-panel::before{
    content:''!important;
    position:absolute!important;
    left:calc(-1 * var(--wadi-edge))!important;
    right:calc(-1 * var(--wadi-edge))!important;
    top:calc(-1 * var(--wadi-info-intro-gap))!important;
    height:calc(var(--wadi-info-intro-gap) + 1px)!important;
    background:#fff!important;
    z-index:0!important;
    pointer-events:none!important;
  }
  .info-intro-band{
    position:relative!important;
    z-index:1!important;
  }
  .studio-ref-item,
  .studio-ref-item:nth-child(2),
  .studio-ref-item:nth-child(3n+2):not(:nth-child(2)),
  .studio-ref-item.rv.on:nth-child(2),
  .studio-ref-item.rv.on:nth-child(3n+2):not(:nth-child(2)){
    aspect-ratio:3/4!important;
  }
}

/* WADI UPDATE - 2026-08-04 follow-up desktop refinements */
@media(min-width:901px){
  :root{
    --wadi-studio-grid-gap:clamp(10px,1vw,13px);
    --wadi-contact-image-gap:clamp(16px,1.55vw,28px);
  }

  body.home .home-video-frame{
    height:min(37.8vw,calc(100svh - var(--wadi-header-offset) - 249px))!important;
  }
  body.home.admin-bar .home-video-frame{
    height:min(36vw,calc(100svh - var(--wadi-header-offset) - 292px))!important;
  }

  .studio-ref-intro{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:var(--wadi-studio-grid-gap)!important;
  }
  .studio-ref-intro p{
    grid-column:2 / 4!important;
    width:100%!important;
    max-width:none!important;
  }
  .studio-ref-grid{
    gap:var(--wadi-studio-grid-gap)!important;
  }

  .contact-page,
  .admin-bar .contact-page{
    padding-top:calc(var(--wadi-header-offset) + var(--wadi-contact-image-gap))!important;
  }
  .contact-right{
    height:calc(100% - var(--wadi-contact-image-gap))!important;
    margin-top:0!important;
    margin-bottom:var(--wadi-contact-image-gap)!important;
  }
}

/* WADI UPDATE - 2026-08-04 PDP requested refinements */
.pdp-hero-meta{
  backdrop-filter:blur(8.64px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(8.64px) saturate(1.08)!important;
}

@media(min-width:901px){
  .pdp-editorial-sec{
    --pdp-media-width:min(645px,max(305px,calc(var(--wadi-frame-width) - 740px)))!important;
    --pdp-image-gap:clamp(22px,2.4vw,34px)!important;
    --pdp-side-align-lift:40px;
    --pdp-side-align-top:calc((var(--pdp-media-width) * 4 / 3) + var(--pdp-image-gap) - var(--pdp-side-align-lift));
    --pdp-side-align-bottom:calc((var(--pdp-media-width) * 8 / 3) + var(--pdp-image-gap) - var(--pdp-side-align-lift));
    /* WADI UPDATE - 2026-08-17 (CLD request) the gallery now sits dead centre.
       The left spacer used to be a fixed clamp() while the right one was 1fr,
       so the flexible side swallowed all the slack and pushed the gallery off
       centre — 45px at 1440px wide. Both spacers are 1fr and both outer tracks
       are the same size, which centres the middle column at every width.

       The tracks floor at 190px rather than 220px: just above the 901px
       breakpoint two 220px rails plus the 305px gallery are wider than the
       frame, and the grid used to overflow to the right — which read as the
       gallery being off centre again at exactly the width it was meant to
       fix. */
    grid-template-columns:minmax(190px,260px) minmax(0,1fr) var(--pdp-media-width) minmax(0,1fr) minmax(190px,260px)!important;
  }
  .pdp-detail-panel,
  .pdp-info-panel{
    position:relative!important;
    display:block!important;
    min-height:var(--pdp-side-align-bottom)!important;
  }
  /* The information rail keeps the width and the right edge it already had —
     widening its track was only ever a way to balance the grid, not a change
     to the rail itself. */
  .pdp-info-panel{
    max-width:220px!important;
    margin-left:auto!important;
  }
  .pdp-scroll-stack.pdp-image-carousel .pdp-image-slide{
    aspect-ratio:3/4!important;
    background:#B7B7B7!important;
  }
  .pdp-scroll-stack.pdp-image-carousel .pdp-image-slide img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .pdp-detail-drawings{
    position:absolute!important;
    top:var(--pdp-side-align-top)!important;
    left:0!important;
    right:0!important;
    margin:0!important;
  }
  .pdp-download-box{
    position:absolute!important;
    top:var(--pdp-side-align-top)!important;
    left:0!important;
    right:0!important;
    margin:0!important;
  }
  body.wadi-pdp-has-sticky-enquiry{
    padding-bottom:0!important;
  }
  .pdp-enquire-btn{
    position:absolute!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    z-index:auto!important;
    width:auto!important;
    min-width:166px!important;
    min-height:28px!important;
    margin-top:auto!important;
    padding:0 12px!important;
    display:inline-flex!important;
    align-self:flex-start!important;
    border:1px solid rgba(26,25,23,.75)!important;
    background:transparent!important;
    color:rgba(26,25,23,.72)!important;
    box-shadow:none!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:.02em!important;
    text-transform:uppercase!important;
  }
  .pdp-detail-panel .pdp-enquire-btn{
    left:0!important;
    bottom:0!important;
  }
  .pdp-finishes-box{
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    margin:0!important;
    border-color:rgba(26,25,23,.32)!important;
  }
  .pdp-enquire-btn:hover{
    background:var(--dark)!important;
    color:#fff!important;
  }
}

/* WADI UPDATE - 2026-08-04 mobile PDP detail split */
@media(max-width:900px){
  .pdp-editorial-sec{
    --pdp-mobile-detail-gap:clamp(24px,7vw,68px);
    width:var(--wadi-frame-width)!important;
    margin:0 auto!important;
    padding-top:calc(var(--wadi-header-offset) + clamp(12px,2vw,20px))!important;
    padding-bottom:clamp(78px,15vw,118px)!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.12fr) minmax(116px,.72fr)!important;
    column-gap:var(--pdp-mobile-detail-gap)!important;
    row-gap:0!important;
    align-items:start!important;
  }

  .pdp-detail-panel,
  .pdp-info-panel,
  .admin-bar .pdp-detail-panel,
  .admin-bar .pdp-info-panel{
    display:contents!important;
    position:static!important;
    top:auto!important;
    width:auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:transparent!important;
  }

  .pdp-scroll-stack.pdp-image-carousel{
    grid-column:1 / -1!important;
    grid-row:1!important;
    width:100%!important;
    margin:0 0 clamp(48px,8.5vw,72px)!important;
  }

  .pdp-copy-block{
    grid-column:1 / -1!important;
    grid-row:2!important;
    width:100%!important;
    margin:0 0 clamp(58px,10vw,82px)!important;
    padding-top:clamp(18px,3.8vw,26px)!important;
    border-top:1px solid rgba(26,25,23,.14)!important;
  }

  .pdp-product-title{
    margin:0 0 12px!important;
    max-width:100%!important;
  }

  .pdp-editorial-sec .pdp-detail-intro,
  .pdp-editorial-sec .pdp-readmore .pdp-detail-intro{
    max-width:min(100%,66ch)!important;
    margin:0!important;
    overflow:visible!important;
  }

  .pdp-detail-drawings{
    grid-column:1!important;
    grid-row:3 / span 4!important;
    align-self:start;
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    margin:0!important;
  }

  .pdp-drawing-card{
    width:100%!important;
    aspect-ratio:5 / 7!important;
    margin:0!important;
    background:#E1E1E1!important;
    border:0!important;
  }

  .pdp-drawing-card img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    background:#E1E1E1!important;
  }

  .pdp-spec-box{
    grid-column:2!important;
    grid-row:3!important;
    align-self:start;
    min-width:0!important;
    margin:0!important;
  }

  .pdp-download-box{
    grid-column:2!important;
    grid-row:4!important;
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    margin:clamp(42px,8vw,68px) 0 0!important;
    min-width:0!important;
  }

  .pdp-finishes-box{
    grid-column:2!important;
    grid-row:5!important;
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    min-height:0!important;
    margin:clamp(52px,9vw,76px) 0 0!important;
    padding:clamp(10px,2.8vw,13px)!important;
    border:1px solid rgba(26,25,23,.32)!important;
  }

  .pdp-finishes-box .pdp-finish-list{
    --pdp-finish-square:clamp(34px,7vw,42px)!important;
    grid-template-columns:repeat(2,var(--pdp-finish-square))!important;
    justify-content:space-between!important;
    gap:clamp(10px,2.4vw,12px)!important;
  }

  .pdp-finishes-box .pdp-finish-item,
  .pdp-finishes-box .pdp-finish-swatch,
  .pdp-finishes-box .pdp-finish-img{
    width:var(--pdp-finish-square)!important;
  }

  .pdp-finishes-box .pdp-finish-swatch,
  .pdp-finishes-box .pdp-finish-img{
    height:var(--pdp-finish-square)!important;
  }

  .pdp-image-nav{
    width:26px!important;
    height:72px!important;
  }

  .pdp-image-nav::before,
  .pdp-image-nav::after{
    height:27px!important;
  }

  body.wadi-pdp-has-sticky-enquiry{
    padding-bottom:calc(var(--pdp-sticky-enquiry-h) + env(safe-area-inset-bottom,0px))!important;
  }

  .pdp-enquire-btn{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:9000!important;
    width:100%!important;
    min-width:0!important;
    min-height:calc(var(--pdp-sticky-enquiry-h) + env(safe-area-inset-bottom,0px))!important;
    margin:0!important;
    padding:0 clamp(20px,4vw,46px) env(safe-area-inset-bottom,0px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-top:1px solid rgba(26,25,23,.72)!important;
    background:var(--dark)!important;
    color:#fff!important;
    box-shadow:0 -12px 34px rgba(13,13,11,.08)!important;
  }
}

@media(max-width:520px){
  .pdp-editorial-sec{
    grid-template-columns:minmax(0,1fr) minmax(112px,.76fr)!important;
    column-gap:clamp(18px,6vw,28px)!important;
    padding-bottom:96px!important;
  }

  .pdp-copy-block{
    margin-bottom:clamp(44px,11vw,58px)!important;
  }

  .pdp-finishes-box .pdp-finish-list{
    --pdp-finish-square:clamp(29px,8.8vw,38px)!important;
  }

  .pdp-image-nav{
    width:22px!important;
    height:60px!important;
  }

  .pdp-image-nav::before,
  .pdp-image-nav::after{
    height:23px!important;
  }
}

/* WADI UPDATE - 2026-08-04 contact single-viewport tightening */
body.wadi-contact{
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}

body.wadi-contact.admin-bar{
  height:calc(100svh - 32px)!important;
  min-height:calc(100svh - 32px)!important;
  max-height:calc(100svh - 32px)!important;
}

.wadi-contact .contact-page{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
}

.wadi-contact #wadi-footer{
  flex:0 0 auto!important;
  margin-top:0!important;
}

@media(min-width:901px){
  .wadi-contact .contact-page,
  .wadi-contact.admin-bar .contact-page{
    padding-top:calc(var(--wadi-header-offset) + clamp(10px,1vw,18px))!important;
  }

  .wadi-contact .contact-left{
    justify-content:flex-end!important;
    padding-bottom:clamp(12px,1.4vw,22px)!important;
  }

  .wadi-contact .contact-title-rule{
    margin-bottom:clamp(48px,5vw,78px)!important;
  }

  .wadi-contact .contact-content{
    margin-bottom:0!important;
  }

  .wadi-contact .contact-blocks{
    gap:clamp(22px,2.4vw,34px) clamp(38px,4vw,74px)!important;
  }

  .wadi-contact .contact-right{
    height:calc(100% - clamp(8px,1vw,16px))!important;
    margin-top:0!important;
    margin-bottom:clamp(8px,1vw,16px)!important;
  }

  .wadi-contact #wadi-footer .ft-main{
    padding-top:8px!important;
  }
}

@media(max-width:900px){
  .wadi-contact .contact-page{
    flex:0 1 auto!important;
    width:calc(100% - (var(--wadi-responsive-edge) * 2))!important;
    padding-top:var(--wadi-header-offset)!important;
    display:flex!important;
    flex-direction:column!important;
  }

  .wadi-contact .contact-right{
    flex:0 0 auto!important;
    aspect-ratio:1.24 / 1!important;
    height:auto!important;
    max-height:42svh!important;
    margin:clamp(26px,4.4svh,38px) 0 0!important;
  }

  .wadi-contact .contact-left{
    flex:0 1 auto!important;
    min-height:0!important;
    padding:clamp(18px,3.2svh,26px) 0 0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
  }

  .wadi-contact .contact-title-rule{
    margin:8px 0 clamp(18px,3.2svh,28px)!important;
  }

  .wadi-contact .contact-block{
    margin:0 0 clamp(15px,2.7svh,23px)!important;
  }

  .wadi-contact .contact-block:nth-child(4){
    margin-top:0!important;
    margin-bottom:0!important;
  }

  .wadi-contact .contact-social{
    gap:clamp(19px,5vw,24px)!important;
  }

  .wadi-contact #wadi-footer .ft-main{
    padding-top:8px!important;
  }
}

@media(max-width:520px){
  .wadi-contact .contact-right{
    max-height:39svh!important;
    margin-top:clamp(18px,4.4svh,30px)!important;
  }

  .wadi-contact .contact-left{
    padding-top:clamp(13px,2.8svh,20px)!important;
  }

  .wadi-contact .contact-title{
    font-size:16px!important;
  }

  .wadi-contact .contact-title-rule{
    margin-bottom:clamp(14px,2.5svh,21px)!important;
  }

  .wadi-contact .contact-block{
    margin-bottom:clamp(11px,2.1svh,17px)!important;
  }

  .wadi-contact .contact-block p,
  .wadi-contact .contact-block a{
    font-size:11px!important;
    line-height:1.25!important;
  }

  .wadi-contact .contact-label{
    margin-bottom:5px!important;
    font-size:9px!important;
  }

  .wadi-contact .contact-social a,
  .wadi-contact .contact-social svg{
    width:21px!important;
    height:21px!important;
  }
}

/* WADI UPDATE - 2026-08-12 mobile nav sizing (CLD request)
   Nav link font-size +3px on mobile, plus more breathing room between the
   logo and the menu row beneath it. Placed last on purpose: this selector
   has been redeclared across several earlier mobile passes above (all at
   the same specificity), so putting the final say here is the reliable way
   to raise it rather than editing every prior occurrence. */
@media(max-width:900px){
  header#hdr .h-right{
    margin-top:28px!important;
  }
  header#hdr nav a{
    font-size:13px!important;
  }
}
@media(max-width:520px){
  header#hdr .h-right{
    margin-top:18px!important;
  }
  header#hdr nav a{
    font-size:9px!important;
  }
}

/* WADI UPDATE - 2026-08-12 last profile always visible (CLD request):
   the final info-team-row sits right before the footer, where users often
   land after a fast scroll to the bottom. If that scroll finishes before
   the row's scroll-reveal fade transition completes, it can look "half"
   visible right when the footer appears. Skip the fade for just this row
   so it's always shown at full opacity, no race against scroll speed. */
/* Desktop only: on mobile the intro panel isn't sticky, so there is nothing
   to be clipped by and the last profile should still fade in like the rest. */
@media(min-width:901px){
  .info-team-row:last-child.rv,
  .info-team-row:last-child .rv{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* WADI UPDATE - 2026-08-12 last profile clipped by sticky intro (CLD request).
   The .info-sticky-panel is opaque white at z-index 40, so team rows scroll
   *behind* it by design. At maximum scroll the last row was still 192px
   underneath it — i.e. visibly cut in half — while 224px of empty space sat
   between that row and the footer. Reclaiming that space drops the row clear
   of the sticky panel, and releasing its viewport-derived min-height (which
   is what made the row 344px tall) buys real headroom instead of the ~4px
   the spacing change alone produced.
   Verified live at 1600x900, scrolled to the very bottom: row fully visible
   with 122px clearance below the sticky panel and the footer fully in view. */
@media(min-width:901px){
  .info-team-row:last-child{
    min-height:0!important;
    margin-bottom:0!important;
  }
  .info-page{
    padding-bottom:32px!important;
  }
}

/* WADI UPDATE - 2026-08-12 studio page font + grid reveal (CLD request) */
@media(min-width:901px){
  /* Match the INFO page's intro font-size (16px) without touching the
     paragraph's existing width/measure. */
  .studio-ref-intro p{
    font-size:16px!important;
  }
  /* WADI UPDATE - 2026-08-18 (CLD request) the intro no longer fills the whole
     first screen — it now stops one image row short of the bottom, so the
     opening viewport is the statement plus the first four images and every
     later row arrives on scroll. The height that does that is set in the
     2026-08-18 block at the end of this file; only the alignment and the
     minimum gap under the copy live here. */
  .studio-ref-intro{
    align-content:start!important;
    padding-bottom:clamp(48px,5vw,80px)!important;
  }
}

/* WADI UPDATE - 2026-08-12 contact footer bottom spacing (CLD request):
   the contact page pins its footer to a single viewport with its own
   bottom-padding overrides (2026-08-04 "single-viewport tightening"), which
   left it much tighter than the homepage footer. Top spacing already
   matches (.ft-main padding-top:8px on both) — this only re-syncs the
   bottom padding to the exact same values/expressions the homepage footer
   uses at each breakpoint. */
@media(min-width:901px){
  .wadi-contact #wadi-footer{
    padding-bottom:var(--wadi-header-top)!important;
  }
}
@media(max-width:900px){
  .wadi-contact #wadi-footer{
    padding-bottom:clamp(92px,14.7vw,122px)!important;
  }
}
@media(max-width:520px){
  .wadi-contact #wadi-footer{
    padding-bottom:59px!important;
  }
}

/* WADI UPDATE - 2026-08-12 mobile header nav-to-underline gap (CLD request):
   at <=520px the stacked logo/nav content (35px logo + 18px gap + 17px nav)
   already slightly exceeds the fixed 68px header box, so the nav row sits
   flush against (and slightly past) the header's bottom underline. Grow
   just the header element's own box — not the shared --wadi-header-h
   variable other pages use for top padding/offsets — so this stays a
   contained visual fix with ~14px clearance instead of a sitewide change. */
@media(max-width:520px){}

/* WADI UPDATE - 2026-08-12 disable custom cursor on touch devices (CLD request):
   the mouse-follow cursor dots (#cur/#curR) and the site's cursor:none
   rules make sense for a pointer device, but on touch screens they either
   sit inert off-screen or can jump to a stray spot after a tap. Restore
   the native cursor and hide the custom dots wherever there's no real
   hover-capable pointer. */
@media (hover:none), (pointer:coarse){
  #cur,#curR{
    display:none!important;
  }
  *{
    cursor:auto!important;
  }
}

/* WADI UPDATE - 2026-08-12 desktop body + menu type +2px (CLD request).
   Mirrors the "Final typography lock" selector list further up (which pins
   body copy at 14px) and re-pins it at 16px for desktop only. Headings and
   bold display copy are deliberately NOT included, so they keep their sizes:
     - h1-h6 and the 16px heading list are untouched
     - .info-intro-copy (700 weight) stays 16px
     - .studio-ref-intro p (700 weight) stays 16px
   Verified live at 1600x900 — body 14->16, menu 10->12, profile bio 12->14,
   while .info-intro-copy stayed 16px and .info-person-text h2 stayed 14px. */
@media(min-width:901px){
  body,button,input,textarea,select,p,li,dt,dd,
  .bt,.acc-in,.pdp-trigger-body,.principle-body,.pdp-hero-desc,
  .pdp-readmore .pdp-detail-intro,.pdp-info-row dt,.pdp-info-row dd,
  .pdp-readmore-toggle,.pdp-enquire-link,.pdp-finish-name,
  .ey,.pg-hero-sub,.coll-hero-eye,.hero-eye,.pdp-hero-ey,
  .pdp-related-label,.pc-brand,.pc-tag,.acc-lb,.pdp-trigger-lbl,
  .studio-img-cap span,.object-type,.cta,.pc-ov,.pc-enquire,.btn-p,
  .h-book-btn,.studio-book-btn,.objects-head,.ft-links a,.ft-copy,
  .pdp-info-label,.pdp-finish-list,.pdp-finish-item,.acc-hd{
    font-size:16px!important;
  }
  /* Body copy that carries its own smaller size override further up. */
  .info-person-text p{
    font-size:14px!important;
  }
  /* Menu +2px (10px -> 12px). */
  header#hdr nav a{
    font-size:12px!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-12 (CLD round 4)
   ══════════════════════════════════════════════════════════════════════ */

/* --- 1. Small-screen header height, done via the shared variable ------
   The previous pass raised header#hdr's height directly to open up the
   nav-to-underline gap, but left --wadi-header-h at its old value. Every
   page's top padding is derived from --wadi-header-offset (which is built
   from --wadi-header-h), so content ended up 16px too high and text began
   touching the header rule. Setting the variable instead keeps the header
   box and every page offset in agreement. */
@media(max-width:520px){
  :root{
    --wadi-header-h:84px!important;
    --wadi-header-offset:calc(var(--wadi-header-top) + var(--wadi-header-h))!important;
  }
  header#hdr{
    height:var(--wadi-header-h)!important;
  }
}

/* --- 2. Studio intro copy -------------------------------------------
   New multi-paragraph studio statement, justified per request. The copy
   now sits in .studio-ref-intro-copy, so the desktop grid placement moves
   from the <p> onto that wrapper. */
.studio-ref-intro-copy p{
  text-align:justify;
  text-align-last:left;
}
.studio-ref-intro-copy p + p{
  margin-top:1.15em;
}
@media(min-width:901px){
  .studio-ref-intro-copy{
    grid-column:2 / 4!important;
    width:100%!important;
    max-width:none!important;
  }
  .studio-ref-intro-copy p{
    width:100%!important;
    max-width:none!important;
    font-size:16px!important;
  }
}

/* --- 3. Mobile INFO + STUDIO: gap below header, matched text width ---
   Both pages had their intro copy sitting tight under the header rule and
   running wider than the team member descriptions. One shared gap value
   and one shared measure keeps the two pages consistent. */
@media(max-width:900px){
  :root{
    --wadi-mobile-intro-gap:76px;
    /* Mirrors .info-person-text's own width so the intro copy and the team
       member descriptions share one measure. Both values are tracked below
       at the 520px breakpoint, where .info-person-text narrows to 236px. */
    --wadi-mobile-text-measure:286px;
  }

  .info-page{
    padding-top:calc(var(--wadi-header-offset) + var(--wadi-mobile-intro-gap))!important;
  }
  .info-intro-band{
    width:min(100%,var(--wadi-mobile-text-measure))!important;
    margin:0 auto!important;
  }
  .info-intro-copy{
    width:100%!important;
  }

  .studio-ref-intro{
    margin:0 auto!important;
    padding-top:var(--wadi-mobile-intro-gap)!important;
    justify-content:center!important;
  }
  .studio-ref-intro-copy,
  .studio-ref-intro-copy p{
    width:100%!important;
    max-width:none!important;
  }

  /* One profile per viewport, each fading in as it arrives. The reveal
     class now sits on the individual photo/text blocks (see page-about.php)
     rather than the two-person row, so they no longer all appear at once. */
  .info-person-photo{
    margin-bottom:16px!important;
  }
  .info-person-text,
  .info-person-text-left,
  .info-person-text-right,
  .info-team-row:last-child .info-person-text-left{
    margin-bottom:clamp(120px,17svh,190px)!important;
  }
}

/* --- 4. Mobile CONTACT: careers email directly under the WADI email ---
   The mobile order was Email -> Location -> Careers -> Follow us, which
   pushed Careers past the contact page's single-viewport clip so it was
   never visible. Restore natural order and move the divider rule onto
   Location, which is now the block that starts the second group. */
@media(max-width:900px){
  .contact-block:nth-child(1){order:1!important;}
  .contact-block:nth-child(2){
    order:2!important;
  }
  .contact-block:nth-child(3){
    order:3!important;
  }
  .contact-block:nth-child(4){
    order:4!important;
    margin-top:10px!important;
  }
}
@media(max-width:520px){
  .wadi-contact .contact-block:nth-child(2){
    padding-top:0!important;
  }
  .wadi-contact .contact-block:nth-child(3){
    padding-top:clamp(14px,2.4svh,20px)!important;
  }
}

/* --- 5. PDP right rail: consistent, minimal, readable ----------------
   Screenshot showed mixed sizes and long values wrapping mid-word
   ("WAXED ALUMINIU/M"). Values settle at 12px, section headings at 14px,
   and the label/value rows get room to break on whole words. */
@media(min-width:901px){
  .pdp-info-panel .pdp-side-heading,
  .pdp-info-panel .pdp-finishes-lb{
    font-size:14px!important;
    line-height:1.3!important;
    letter-spacing:.14em!important;
  }
  .pdp-spec-box .pdp-dimension-grid dt,
  .pdp-spec-box .pdp-dimension-grid dd,
  .pdp-info-panel .pdp-info-row dt,
  .pdp-info-panel .pdp-info-row dd,
  .pdp-info-panel .pdp-download-row{
    font-size:12px!important;
    line-height:1.45!important;
    letter-spacing:.08em!important;
  }
  /* Give the value column enough width to wrap on words, not letters. */
  .pdp-info-panel .pdp-info-row{
    grid-template-columns:minmax(72px,auto) minmax(0,1fr)!important;
    column-gap:14px!important;
    align-items:baseline!important;
  }
  .pdp-info-panel .pdp-info-row dd{
    text-align:right!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none;
  }
}

/* Small phones: .info-person-text narrows to 236px, so the shared intro
   measure follows it to keep INFO and STUDIO copy the same width. */
@media(max-width:520px){
  :root{
    --wadi-mobile-text-measure:236px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-12 (CLD round 5)
   ══════════════════════════════════════════════════════════════════════ */

/* --- 1. Basket drawer title sized to the menu ------------------------
   Was 20px against a 12px nav. The head keeps its fixed
   height:var(--wadi-header-h), so the drawer's rule stays aligned with the
   site header's rule regardless of this change.

   WADI UPDATE - 2026-08-17 (CLD request) 12px at every width. This is now the
   only rule that sets the drawer title's size — the desktop-only 14px override
   that used to sit further down has gone, so there is one place to change it. */
.wadi-basket-title{
  font-size:12px!important;
  letter-spacing:.18em!important;
}

/* --- 2. Studio scroll cue (removed) ---------------------------------
   WADI UPDATE - 2026-08-18 (CLD request) the hairline + SCROLL label that used
   to sit under the studio statement has gone, together with its travelling
   glow keyframes and the round-6 rule that lifted it 150px. The first row of
   four images now sits inside the opening viewport (see the 2026-08-18 block
   at the end of this file), so there is nothing left to cue. */

/* --- 3. Mobile studio copy matches the image grid width --------------
   Overrides the shared INFO/STUDIO measure set in round 4 so the studio
   statement lines up exactly with the imagery below it. Values mirror
   .studio-ref-grid at each breakpoint. */
@media(max-width:900px){
  .studio-ref-intro{
    width:min(calc(100% - (var(--wadi-responsive-edge) * 2)),460px)!important;
    max-width:460px!important;
  }
}
@media(max-width:520px){
  .studio-ref-intro{
    width:min(calc(100% - 92px),260px)!important;
    max-width:260px!important;
  }
}

/* --- 4. Mobile contact: two columns so nothing is cut off ------------
   The contact page is locked to a single viewport with overflow:hidden, so
   a four-block stack pushed Location and Follow us out of sight. Pairing
   them into a second column halves the stack height and keeps every block
   on screen. */
@media(max-width:900px){
  .contact-blocks{
    display:grid!important;
    row-gap:0!important;
  }
  .contact-block:nth-child(1){grid-column:1!important;grid-row:1!important;}
  .contact-block:nth-child(2){grid-column:1!important;grid-row:2!important;}
  .contact-block:nth-child(3){grid-column:2!important;grid-row:1!important;}
  .contact-block:nth-child(4){grid-column:2!important;grid-row:2!important;}
  /* the divider belonged to the old single-column stack */
  .contact-block:nth-child(2),
  .contact-block:nth-child(3),
  .wadi-contact .contact-block:nth-child(2),
  .wadi-contact .contact-block:nth-child(3){
    border-top:0!important;
    padding-top:0!important;
    margin-top:0!important;
  }
  /* room for the label again now that Follow us has its own column */
  .contact-block:nth-child(4) .contact-label{
    display:block!important;
  }
  .contact-block p,
  .contact-block a{
    overflow-wrap:anywhere!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-12 (CLD round 6)
   ══════════════════════════════════════════════════════════════════════ */

/* --- 1. Desktop logo +25% -------------------------------------------
   Base desktop logo was height:clamp(18px,1.25vw,25px)/max-width:82px. */
@media(min-width:901px){
  header#hdr .logo-img{
    height:clamp(23px,1.56vw,31px)!important;
    max-width:103px!important;
  }
}

/* --- 2. Drawer BASKET title ------------------------------------------
   WADI UPDATE - 2026-08-17 (CLD request) the desktop-only 14px override that
   used to live here is gone; the title is 12px at every width, set once in
   round 5 above. */

/* --- 3. Studio scroll cue position (removed) ------------------------
   WADI UPDATE - 2026-08-18 (CLD request) removed with the cue itself; see
   round 5 above. */

/* --- 4. Mobile contact: push the second column to the edge ----------
   Columns were two equal tracks, so the right column started immediately
   after the left one's text. Sizing both to their content and spreading
   them apart puts the second column against the right edge, which opens
   up the gap between them. */
@media(max-width:900px){
  .contact-blocks{
    grid-template-columns:max-content max-content!important;
    justify-content:space-between!important;
    column-gap:clamp(20px,6vw,40px)!important;
  }
}

/* --- 5. Objects page scroll snapping --------------------------------
   Desktop only: each .objects-set (a 4-up grid or a single feature piece)
   is already ~one viewport tall, so snapping lands on whole sets and never
   between them. Implemented in site.js against Lenis rather than CSS
   scroll-snap, because Lenis drives scrollTop itself each frame and native
   snap fights it. scroll-behavior is pinned to auto so the JS animation is
   the only thing moving the page. */
@media(min-width:901px){
  html.wadi-objects-snap,
  html.wadi-objects-snap body{
    scroll-behavior:auto!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-12 (CLD round 7) language switcher + Devanagari
   ══════════════════════════════════════════════════════════════════════ */

/* --- Devanagari typography -------------------------------------------
   Playfair Display carries no Devanagari glyphs, so Marathi/Hindi would
   otherwise fall back to an unrelated system face. Noto Serif Devanagari is
   loaded only for those languages and sits in FRONT of Playfair, so Latin
   characters inside Marathi/Hindi pages (emails, "3D CAD", sizes) still
   render in the brand face. Every size, weight, spacing and box stays
   exactly as it is — only the glyph source changes. */
body.wadi-devanagari,
body.wadi-devanagari button,
body.wadi-devanagari input,
body.wadi-devanagari textarea,
body.wadi-devanagari select,
body.wadi-devanagari h1,
body.wadi-devanagari h2,
body.wadi-devanagari h3,
body.wadi-devanagari h4,
body.wadi-devanagari h5,
body.wadi-devanagari h6,
body.wadi-devanagari p,
body.wadi-devanagari a,
body.wadi-devanagari span,
body.wadi-devanagari li,
body.wadi-devanagari dt,
body.wadi-devanagari dd,
body.wadi-devanagari figcaption{
  font-family:'Noto Serif Devanagari','Playfair Display',Georgia,serif!important;
}

/* --- Header language switcher ---------------------------------------- */
.wadi-lang{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
}
.wadi-lang-toggle{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:currentColor!important;
  font-family:inherit!important;
  font-size:inherit!important;
  line-height:1!important;
  font-weight:inherit!important;
  text-transform:uppercase!important;
  cursor:none!important;
  transition:opacity .3s ease!important;
}
.wadi-lang-toggle:hover{
  opacity:.6!important;
}
.wadi-lang-initial{
  display:inline-block!important;
  line-height:1!important;
}
.wadi-lang-caret{
  display:block!important;
  flex:0 0 auto!important;
  transition:transform .28s cubic-bezier(.16,1,.3,1)!important;
}
.wadi-lang.open .wadi-lang-caret{
  transform:rotate(180deg)!important;
}

/* the dropdown */
.wadi-lang-menu{
  position:absolute!important;
  top:calc(100% + 12px)!important;
  right:0!important;
  z-index:6000!important;
  min-width:132px!important;
  margin:0!important;
  padding:6px 0!important;
  list-style:none;
  background:#fff!important;
  border:1px solid rgba(26,25,23,.14)!important;
  box-shadow:0 18px 44px rgba(13,13,11,.10)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(-6px)!important;
  transition:opacity .26s ease,transform .26s cubic-bezier(.16,1,.3,1),visibility .26s!important;
}
.wadi-lang.open .wadi-lang-menu{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
}
.wadi-lang-option{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:8px 14px!important;
  color:rgba(26,25,23,.62)!important;
  text-decoration:none!important;
  font-size:11px!important;
  line-height:1.2!important;
  letter-spacing:.12em!important;
  white-space:nowrap;
  cursor:none!important;
  transition:color .22s ease,background .22s ease!important;
}
.wadi-lang-option:hover{
  color:var(--dark)!important;
  background:rgba(26,25,23,.04)!important;
}
.wadi-lang-option.is-current{
  color:var(--dark)!important;
}
.wadi-lang-option-initial{
  min-width:20px!important;
  text-transform:uppercase!important;
}
.wadi-lang-option-name{
  opacity:.86!important;
}
.wadi-lang-option::after{
  display:none!important;
}

/* --- Divider before the bag icon ------------------------------------- */
.wadi-header-divider{
  display:inline-block!important;
  flex:0 0 auto!important;
  width:1px!important;
  height:14px!important;
  background:rgba(26,25,23,.22)!important;
}

/* The nav gap is large by design; the switcher, divider and bag belong
   together as one cluster, so they get their own tighter rhythm without
   touching the spacing of the four page links. */
header#hdr nav .wadi-lang,
header#hdr nav .wadi-header-divider,
header#hdr nav .wadi-basket-link{
  margin-left:0!important;
}
header#hdr nav .wadi-header-divider{
  margin-left:calc(-1 * clamp(10px,1.6vw,32px))!important;
  margin-right:calc(-1 * clamp(10px,1.6vw,32px))!important;
}

@media(max-width:900px){
  .wadi-lang-menu{
    top:calc(100% + 9px)!important;
    min-width:118px!important;
  }
  .wadi-lang-option{
    font-size:11px!important;
    padding:7px 12px!important;
  }
  .wadi-header-divider{
    height:12px!important;
  }
}
@media(max-width:520px){
  .wadi-lang-toggle{
    gap:3px!important;
  }
  .wadi-lang-caret{
    width:7px!important;
    height:5px!important;
  }
  .wadi-header-divider{
    height:10px!important;
  }
  .wadi-lang-menu{
    min-width:104px!important;
  }
  .wadi-lang-option{
    font-size:10px!important;
    padding:6px 10px!important;
  }
}

/* Touch devices get the native cursor back (round 2), so the switcher
   should follow that rather than keep cursor:none. */
@media (hover:none), (pointer:coarse){
  .wadi-lang-toggle,
  .wadi-lang-option{
    cursor:pointer!important;
  }
}

/* --- Devanagari: beat the ID-scoped and !important font pins -----------
   header#hdr nav a (and the 2026-07-29 typography pass) pin Playfair with
   !important, which outranks the plain body.wadi-devanagari selectors above.
   These repeat the same selectors with the language class in front so the
   Devanagari face actually lands. */
body.wadi-devanagari header#hdr nav a,
body.wadi-devanagari .wadi-lang-toggle,
body.wadi-devanagari .wadi-lang-option,
body.wadi-devanagari .wadi-basket-title,
body.wadi-devanagari .wadi-basket-enquire,
body.wadi-devanagari .wadi-basket-item-title,
body.wadi-devanagari .wadi-basket-close,
body.wadi-devanagari .wadi-modal-title,
body.wadi-devanagari .pdp-enquire-btn,
body.wadi-devanagari .pdp-side-heading,
body.wadi-devanagari .pdp-finishes-lb,
body.wadi-devanagari .contact-title,
body.wadi-devanagari .contact-label,
body.wadi-devanagari .objects-head,
body.wadi-devanagari .object-name,
body.wadi-devanagari .info-intro-copy,
body.wadi-devanagari .info-person-text h2,
body.wadi-devanagari .ft-copy,
body.wadi-devanagari .ft-privacy{
  font-family:'Noto Serif Devanagari','Playfair Display',Georgia,serif!important;
}

/* Devanagari is a conjunct script: the wide Latin tracking the design uses
   (.34em on the nav, .2-.3em on labels) pulls matras and half-forms away
   from their base letters and reads as broken. Tracking is dialled back for
   Devanagari only — every font-size, weight, padding and box is untouched,
   so the layout keeps its shape. English is completely unaffected. */
body.wadi-devanagari header#hdr nav a{
  letter-spacing:.08em!important;
}
body.wadi-devanagari .ft-copy,
body.wadi-devanagari .ft-privacy,
body.wadi-devanagari .objects-head,
body.wadi-devanagari .objects-summary-item,
body.wadi-devanagari .pdp-side-heading,
body.wadi-devanagari .pdp-finishes-lb,
body.wadi-devanagari .pdp-finish-name,
body.wadi-devanagari .pdp-info-row dt,
body.wadi-devanagari .pdp-info-row dd,
body.wadi-devanagari .pdp-download-row,
body.wadi-devanagari .pdp-dimension-grid dt,
body.wadi-devanagari .pdp-dimension-grid dd,
body.wadi-devanagari .pdp-hero-ey,
body.wadi-devanagari .pdp-enquire-btn,
body.wadi-devanagari .contact-label,
body.wadi-devanagari .info-intro-copy,
body.wadi-devanagari .info-person-text h2,
body.wadi-devanagari .object-name,
body.wadi-devanagari .wadi-basket-title,
body.wadi-devanagari .wadi-basket-enquire,
body.wadi-devanagari .wadi-basket-item-title,
body.wadi-devanagari .wadi-basket-close,
body.wadi-devanagari .wadi-lang-option{
  letter-spacing:.06em!important;
}
/* Slightly more air for the single-glyph language initial. */
body.wadi-devanagari .wadi-lang-initial{
  letter-spacing:.04em!important;
}
/* Devanagari has no letter case, so uppercasing is a no-op that only makes
   the intent unclear; drop it where it was purely a Latin styling choice. */
body.wadi-devanagari header#hdr nav a,
body.wadi-devanagari .contact-label,
body.wadi-devanagari .info-person-text h2,
body.wadi-devanagari .object-name,
body.wadi-devanagari .pdp-side-heading,
body.wadi-devanagari .wadi-basket-title{
  text-transform:none!important;
}

/* Give the switcher the same optical tracking as the nav in English. */
.wadi-lang-toggle{
  letter-spacing:.18em!important;
}

/* --- Devanagari wordmark sizing --------------------------------------
   Measured from the supplied artwork:
     English  1043x363 — a single-line wordmark, ink fills 91% of the frame.
     Marathi   536x372 — a two-line lockup: वाडी is 72% of the ink, the
                         कला कार्यालय sub-line 19%, with a gap between.
   At an identical box height the Marathi main word would render about 28%
   smaller than WĀDI, because it only owns two-thirds of its frame. The
   header logo is therefore given a proportional bump for Devanagari so वाडी
   reads at the same optical size as WĀDI. Nothing else moves: the header
   box, nav, divider, bag and every page offset are unchanged — the logo just
   uses more of the height already available inside the header.
   To force strict parity with English instead, delete this block. */
body.wadi-devanagari header#hdr .logo-img,
body.wadi-devanagari header#hdr .wadi-wordmark{
  height:clamp(29px,2vw,40px)!important;
}
@media(max-width:900px){
  body.wadi-devanagari header#hdr .logo-img,
  body.wadi-devanagari header#hdr .wadi-wordmark{
    height:32px!important;
  }
}
@media(max-width:520px){
  body.wadi-devanagari header#hdr .logo-img,
  body.wadi-devanagari header#hdr .wadi-wordmark{
    height:26px!important;
  }
}

/* The preloader renders at 54px, where the two-line lockup sits comfortably,
   so it keeps the same height as the English mark. */

/* Built-in fallback wordmark (only used when no artwork is supplied). */
.wadi-wordmark{
  display:block;
  width:auto;
}
.wadi-wordmark .wadi-wordmark-main{
  font-family:'Noto Serif Devanagari',serif;
  font-weight:700;
  font-size:228px;
}
.wadi-wordmark .wadi-wordmark-sub{
  font-family:'Noto Serif Devanagari',serif;
  font-weight:600;
  font-size:82px;
}
#loader .wadi-wordmark{
  height:54px!important;
  max-width:min(220px,42vw)!important;
}

/* --- Logo colour ------------------------------------------------------
   The header logo sits inside <a class="logo">, and an <a> with no colour of
   its own falls back to the browser's default link blue. The inline SVG
   wordmark paints with currentColor, so it inherited that blue. Pin the link
   to the brand colour and paint the wordmark explicitly. */
.logo,
#loader .ld-logo,
header#hdr .logo{
  color:var(--dark)!important;
}
.wadi-wordmark,
.wadi-wordmark text{
  fill:var(--dark)!important;
}
/* The preloader inverts its mark to white via filter, which works on the
   inline SVG too — no colour override needed there. */
#loader .wadi-wordmark{
  fill:var(--dark)!important;
}

/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-18 (CLD request)
   ══════════════════════════════════════════════════════════════════════ */

/* --- 1. Studio: statement + four images in the opening viewport -------
   The 2026-08-12 rule made .studio-ref-intro a full screen tall so no image
   row could half-appear below the fold. The request is now the opposite: the
   first row of four should be *in* the opening viewport, with the rest
   arriving on scroll.

   So the intro stops exactly one row short of the bottom instead. The row's
   own height is not a free number — the grid is four equal columns of the
   frame at 3:4 — so it is derived rather than guessed:

     column = (frame - 3 gaps) / 4     row = column x 4/3 = (frame - 3 gaps) / 3

   with `frame` written in vw (100vw - 2 x --wadi-edge) so the value is usable
   inside a height calc, which a percentage-based width is not. */
@media(min-width:901px){
  :root{
    /* Gap left under the first row at the fold. It has to be *smaller* than the
       row gap, or the second row's top edge lands above the fold and a sliver
       of it shows — the exact "peek" this layout is meant to avoid. One gutter
       minus 2px puts row two just past the bottom edge at every width. */
    --wadi-studio-breath:calc(var(--wadi-studio-grid-gap) - 2px);
    /* svh-based so the statement gives space back on a short window instead of
       pushing the images under the fold. */
    --wadi-studio-pad-top:clamp(56px,9svh,124px);
    --wadi-studio-pad-bottom:clamp(30px,5svh,80px);
    --wadi-studio-row-h:calc((100vw - (var(--wadi-edge) * 2) - (var(--wadi-studio-grid-gap) * 3)) / 3);
    --wadi-studio-width:var(--wadi-frame-width);
  }
  .studio-ref-intro,
  .studio-ref-grid{
    width:var(--wadi-studio-width)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  /* Fills the screen down to the top of the first row, and no further. max()
     keeps it from going negative on a window too short to hold both. */
  .studio-ref-intro{
    min-height:max(0px,calc(100svh - var(--wadi-header-offset) - var(--wadi-studio-row-h) - var(--wadi-studio-breath)))!important;
    padding-top:var(--wadi-studio-pad-top)!important;
    padding-bottom:var(--wadi-studio-pad-bottom)!important;
  }
}

/* A row four columns wide is roughly a quarter of the window tall, so on a
   window that is wide but short it cannot fit under the statement at any
   padding. There the row is capped by the height actually left over and the
   grid narrowed to match — the only way to keep four images on screen. Intro
   and grid take the same width, so the copy stays aligned to the middle two
   columns exactly as before.

   Deliberately gated at 1500px rather than applied throughout: narrowing the
   grid also narrows the statement, which makes it taller, which leaves less
   room for the row. Above 1500px the measure is wide enough (~6 lines) that
   the loop settles; below it, it runs away, and the uncapped layout fits
   anyway because the row is proportionally smaller. */
@media(min-width:1500px){
  :root{
    /* ~10 lines of the statement at this size — more than it ever runs to at
       this width, so the cap errs toward leaving the grid alone. */
    --wadi-studio-copy-allow:200px;
    --wadi-studio-intro-min:calc(var(--wadi-studio-pad-top) + var(--wadi-studio-copy-allow) + var(--wadi-studio-pad-bottom));
    --wadi-studio-row-cap:calc(100svh - var(--wadi-header-offset) - var(--wadi-studio-intro-min) - var(--wadi-studio-breath));
    --wadi-studio-row-h:min(
      calc((100vw - (var(--wadi-edge) * 2) - (var(--wadi-studio-grid-gap) * 3)) / 3),
      var(--wadi-studio-row-cap)
    );
    /* min() against the frame keeps a scrollbar's worth of 100vw from widening
       the grid past its own frame; the calc only ever narrows it. */
    --wadi-studio-width:min(
      var(--wadi-frame-width),
      calc((var(--wadi-studio-row-h) * 3) + (var(--wadi-studio-grid-gap) * 3))
    );
  }
}

/* --- 2. Objects: the first set is centred like all the others --------
   Every .objects-set is a viewport tall below the header and centres its
   contents (2026-08-17). The first one still read as sitting low, because
   .objects-index carried a top padding of up to 24px: the first set's box
   started that far below the header, so its centre did too, and the paging
   script folds a stop that close to the top of the page into the top of the
   page itself (NEAR = 48 in site.js), so there was no scroll position that
   corrected it.

   Zeroing that padding on desktop lines the first set's box up with the strip
   of viewport under the header, which is what the other sets get when the
   pager lands on them. The bottom padding is untouched — it is the run-out
   under the last set. Mobile keeps its own padding (sets are content-height
   there, so there is nothing to centre). */
@media(min-width:901px){
  .objects-index{
    padding-top:0!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-19 (CLD request) Marathi / Hindi numerals
   ══════════════════════════════════════════════════════════════════════

   The digits themselves are swapped in PHP (wadi_num) and JS (wadiNum).
   This block only makes sure they are DRAWN in the right face: Playfair
   Display carries no Devanagari glyphs, so any counter still pinned to
   var(--sans)/var(--serif) would fall back to whatever the visitor's OS
   supplies and look unrelated to the rest of the page.

   Every one of these elements holds nothing but a number, so only the glyph
   source changes — no size, weight, tracking, width or box is touched, and
   English is completely unaffected. */
body.wadi-devanagari .ld-pct,
body.wadi-devanagari .hero-counter,
body.wadi-devanagari #heroN,
body.wadi-devanagari .stat-n,
body.wadi-devanagari .step-num,
body.wadi-devanagari .pdp-lightbox-count,
body.wadi-devanagari .objects-summary-item em,
body.wadi-devanagari .wadi-basket-count,
body.wadi-devanagari .wadi-basket-qty-value,
body.wadi-devanagari .wadi-enquiry-progress-item,
body.wadi-devanagari .wadi-enquiry-product-kicker,
body.wadi-devanagari .wadi-enquiry-product-qty{
  font-family:'Noto Serif Devanagari','Playfair Display',Georgia,serif!important;
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-19 (CLD request) Studio statement
   ══════════════════════════════════════════════════════════════════════ */

/* --- 1. The statement sits in the middle of its screen ----------------
   .studio-ref-intro is a four-column grid on desktop and was carrying
   align-content:start (round 8), which packs its single row against the top
   of the box — so the copy read as top-aligned with a tall empty gap beneath
   it. Centring the row instead puts the statement in the middle of the space
   between the header and the first image row.

   Nothing about the fold changes: the height, the padding and the derived
   row height that keep the first four images in the opening viewport are all
   left exactly as they are. Only where the copy sits inside that box moves.
   The padding still acts as the floor, so a longer statement (Marathi and
   Hindi both run longer than the English) grows the box downward as before
   rather than colliding with the header. */
@media(min-width:901px){
  .studio-ref-intro{
    align-content:center!important;
    /* align-content centres inside the CONTENT box, so the round-8 padding
       (81px top against 45px bottom at 1440x900) pushed the centred copy 18px
       low. Matching the top pad to the bottom one makes the centre an honest
       centre. This can only ever REMOVE height from the section, never add
       it, so the first image row stays exactly where it is at the fold. */
    padding-top:var(--wadi-studio-pad-bottom)!important;
  }
}

/* Mobile and tablet use the same flex/grid box a screen shorter, so the same
   centring applies — there is no separate height to fight with there. */
@media(max-width:900px){
  .studio-ref-intro{
    align-content:center!important;
    align-items:center!important;
  }
}

/* --- 2. The statement is set in capitals ------------------------------
   Applied to the paragraph only, so the size, weight, measure, justification
   and line-height are all untouched. Devanagari has no letter case, so
   Marathi and Hindi are unaffected and keep rendering exactly as they do
   now — this changes the English statement. */
.studio-ref-intro p,
.studio-ref-intro-copy p{
  text-transform:uppercase;
}

/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-26 (CDX request)
   ══════════════════════════════════════════════════════════════════════ */

/* PT Serif numerals wherever a readable number appears. */
:root{
  --wadi-number-font:"PT Serif",Georgia,serif;
}
.wadi-num{
  font-family:var(--wadi-number-font)!important;
  font-size:1em!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:inherit!important;
  letter-spacing:0!important;
  font-variant-numeric:tabular-nums!important;
  font-feature-settings:"tnum" 1!important;
}

/* Match the language toggle to the visible menu item type at every size. */
header#hdr nav .wadi-lang-toggle{
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:.34em!important;
}
body.wadi-devanagari header#hdr nav .wadi-lang-toggle{
  letter-spacing:.08em!important;
}
@media(max-width:900px){
  header#hdr nav .wadi-lang-toggle{
    font-size:13px!important;
    font-weight:500!important;
    letter-spacing:.23em!important;
  }
}
@media(max-width:520px){
  header#hdr nav .wadi-lang-toggle{
    font-size:9px!important;
    font-weight:500!important;
    letter-spacing:.18em!important;
  }
}

/* INFO intro statement centred per request. */
.info-intro-copy{
  text-align:center!important;
  text-align-last:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* CONTACT typography: uniform body copy, 14px uppercase headings/labels. */
.contact-title,
.wadi-contact .contact-title,
.contact-label,
.wadi-contact .contact-label,
.contact-block:nth-child(1) .contact-label,
.wadi-contact .contact-block:nth-child(1) .contact-label{
  font-size:14px!important;
  line-height:1.22!important;
  font-weight:500!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
.contact-block:nth-child(1) .contact-label::after,
.wadi-contact .contact-block:nth-child(1) .contact-label::after{
  content:none!important;
  display:none!important;
}
.contact-block p,
.contact-block a,
.wadi-contact .contact-block p,
.wadi-contact .contact-block a{
  font-size:12px!important;
  line-height:1.42!important;
  font-weight:400!important;
  letter-spacing:0!important;
}

/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-28 (CDX v1.4.1) — tablets use the mobile and the
   desktop layouts, not a third one of their own
   ══════════════════════════════════════════════════════════════════════

   Five separate tablet passes used to sit here, added one on top of another
   as each attempt failed on a real device. Every one of them rebuilt the
   objects grid from scratch for the 700–1366px range: `width:max-content`
   columns, a media box with its HEIGHT fixed and its width left to the
   intrinsic size of whichever photograph happened to be in it, and a
   viewport-derived scale that each pass computed differently.

   That is what broke iPads. `max-content` columns are sized from the images
   themselves, so two cards holding differently proportioned source files
   resolved to two different widths — the columns stopped lining up, and where
   a column came out narrower than the fixed height asked for, `object-fit:
   cover` cropped the picture to fit. On top of that, --wadi-responsive-edge is
   only defined below 901px, so a 1024px iPad fell back to the desktop
   --wadi-edge (12.45vw ≈ 128px a side) and drew the whole grid small and
   marooned in the middle of the screen, with the sets pinned high and the
   bottom half of every page empty.

   All five passes are gone. Nothing replaces them, which is the point: the
   objects page already has two layouts that work and are maintained —

     • ≤900px  the mobile grid: fluid `1fr` columns, `aspect-ratio` media,
               fixed title rows. A portrait iPad (744–900px) now gets this,
               the same composition as a phone at the tablet's own scale.
     • ≥901px  the desktop grid: a 2x2 of ratio-led cards centred in the strip
               below the header. A landscape iPad, and a 1024px portrait one,
               now get this — the same composition as a laptop.

   Both are width-driven and both fit the strip under the header at every iPad
   size (744x1133, 810x1080, 1024x768, 1024x1366, 1133x744, 1180x820,
   1194x834, 1366x1024 all verified), so there is nothing left for a
   tablet-only rule to correct. */


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-26 (CDX follow-up)
   PDP title numerals + compact specifications
   ══════════════════════════════════════════════════════════════════════ */

/* Product-name numerals should follow the surrounding title, not the small
   readable-number treatment used for measurements and counters. */
.pdp-product-title .wadi-num,
.pdp-hero-title .wadi-num,
.pc-name .wadi-num,
.object-name .wadi-num,
.object-title-link .wadi-num,
.pdp-related-name .wadi-num,
.wadi-basket-item-title .wadi-num,
.wadi-enquiry-product-title .wadi-num{
  font-family:inherit!important;
  font-size:inherit!important;
  line-height:inherit!important;
  font-weight:inherit!important;
  letter-spacing:inherit!important;
  vertical-align:baseline!important;
}

/* Keep dimensions and the rest of SPECIFICATIONS together as one block. */
.pdp-spec-box .pdp-dimension-grid{
  margin-bottom:clamp(12px,1vw,18px)!important;
}
.pdp-spec-box .pdp-info-table{
  margin-top:0!important;
  margin-bottom:0!important;
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-28 (CDX tablet + PDP downloads follow-up)
   ══════════════════════════════════════════════════════════════════════ */

@media(min-width:901px){
  .pdp-editorial-sec{
    --pdp-media-width:min(645px,max(305px,calc(var(--wadi-frame-width) - 844px)))!important;
    grid-template-columns:minmax(228px,312px) minmax(0,1fr) var(--pdp-media-width) minmax(0,1fr) minmax(228px,312px)!important;
  }

  .pdp-info-panel{
    width:100%!important;
    max-width:264px!important;
    margin-left:auto!important;
  }

  .pdp-spec-box,
  .pdp-download-box{
    width:100%!important;
    max-width:none!important;
  }

  .pdp-download-box{
    position:static!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    margin:clamp(42px,5vw,76px) 0 0!important;
  }
}

.pdp-download-list{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border-top:1px solid rgba(26,25,23,.16)!important;
}
.pdp-download-row{
  display:grid!important;
  grid-template-columns:minmax(72px,auto) minmax(0,1fr)!important;
  column-gap:14px!important;
  align-items:baseline!important;
  padding:9px 0!important;
  border-bottom:1px solid rgba(26,25,23,.14)!important;
}
.pdp-download-row dt,
.pdp-download-row dd{
  margin:0!important;
  font-size:12px!important;
  line-height:1.45!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.72)!important;
}
.pdp-download-row dt{
  font-weight:300!important;
}
.pdp-download-row dd{
  text-align:right!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none;
}

@media(max-width:900px){
  .pdp-download-box{
    width:100%!important;
  }

  .pdp-download-row{
    grid-template-columns:minmax(0,auto) minmax(0,1fr)!important;
  }

  .pdp-download-row dt,
  .pdp-download-row dd{
    font-size:10px!important;
  }
}

/* WADI UPDATE - 2026-08-28: real tablet + mobile snap follow-up. */
html.wadi-objects-snap,
html.wadi-objects-snap body{
  scroll-behavior:auto!important;
  overscroll-behavior:none!important;
}

/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-08-28 (CDX v1.4.0) — one snap engine on the objects page
   ══════════════════════════════════════════════════════════════════════

   The previous pass added native CSS scroll-snap for phones on top of the JS
   pager that already owned the page. Two engines then fought over the same
   swipe: the pager eased to a set centred below the header, while
   `scroll-snap-align:start` — with nothing to clear the fixed header — pulled
   the page straight back to the set's raw top edge, which sits behind the
   header. Whichever won the race decided where you landed, so a swipe stopped
   somewhere arbitrary and usually left a grid halfway up the screen.

   Native snap is gone. The pager is the only thing that moves the page, and on
   phones it now lands on the top edge of a set (see targetFor() in site.js),
   so every grid begins in the same place. `touch-action` keeps the browser
   from starting its own momentum scroll underneath the gesture — without it
   iOS ignores preventDefault() once a flick is already rolling, which is what
   made the snap look intermittent. pinch-zoom stays allowed. */
html.wadi-objects-paged .objects-page{
  touch-action:pan-x pinch-zoom;
}

/* WADI UPDATE - 2026-08-28 (CDX v1.4.1) The rule above only covered <main>.
   The header is fixed over the top ~140px of a phone screen and the preloader
   covers all of it for the first second and a half, and both sit outside
   <main> — so a swipe that began on either one was a swipe the browser was
   still allowed to pan vertically. Once it had started that pan, iOS marks the
   rest of the touchmoves non-cancelable and preventDefault() stops working, so
   the page free-scrolled through the gesture: the loose, unsnapped feel that
   showed up on the first swipes and settled once the reader's thumb had moved
   down into the grid.

   Restricted here rather than on <html>/<body>, deliberately. touch-action is
   intersected down the ancestor chain, so restricting the root would also stop
   the basket drawer and the enquiry modal from scrolling their own contents;
   both are body-level siblings of these three and keep touch-action:auto. */
html.wadi-objects-paged header#hdr,
html.wadi-objects-paged #wadi-footer,
html.wadi-objects-paged #loader{
  touch-action:pan-x pinch-zoom;
}

/* Landing on a set's top edge only reads as "the start of the grid" if the
   whole grid is above the fold once it gets there. Mobile sets are
   content-height, so on a short phone a 2x2 set ran past the bottom of the
   screen and the lower row's titles were cut off at every stop.

   The cap below is the width at which the two media boxes — 3/4, so a column
   is three quarters of its own height — plus both title rows and every gap
   still fit the strip under the header. It is a ceiling, not a size: on a
   normal phone the column is already narrower than this and nothing changes.
   Height comes from --wadi-vh-px (see wadi_viewport_metrics()), so the address
   bar appearing does not resize the grid. */
/* WADI UPDATE - 2026-08-28 (CDX v1.4.1) Raised from 699px to 900px so portrait
   tablets get the same guarantee. They run the mobile grid but have far more
   width than a phone, so the 540px ceiling was the binding limit and the set
   came out 822px tall — taller than the strip on a 1024px-tall iPad, which is
   how the bottom row's titles ended up cut off at the fold. The two title rows
   are 38px there rather than 34, so the arithmetic reads the real values
   instead of restating the phone's. */
@media(max-width:900px){
  .objects-page{
    --wadi-m-vh:var(--wadi-vh-px,100svh);
    --wadi-m-col-gap:clamp(14px,4vw,18px);
    --wadi-m-row-gap:clamp(24px,5.6vw,36px);
    --wadi-m-title-row:var(--wadi-mobile-object-title-row,34px);
    --wadi-m-link-gap:var(--wadi-mobile-object-row-gap,8px);
    /* 34px covers the gap the pager leaves under the header plus a line of
       slack for a title that wraps. */
    --wadi-m-strip:calc(var(--wadi-m-vh) - var(--wadi-header-offset) - 34px);
    --wadi-m-media-h:calc((
      var(--wadi-m-strip)
      - var(--wadi-m-row-gap)
      - (var(--wadi-m-title-row) * 2)
      - (var(--wadi-m-link-gap) * 2)
    ) / 2);
    --wadi-m-fit-w:calc((var(--wadi-m-media-h) * 1.5) + var(--wadi-m-col-gap));
    --wadi-m-single-w:calc((
      var(--wadi-m-strip)
      - var(--wadi-m-title-row)
      - var(--wadi-m-link-gap)
    ) * .75);
  }

  .objects-page .objects-set-grid .objects-set-inner{
    max-width:min(540px,var(--wadi-m-fit-w))!important;
  }

  .objects-page .objects-set-count-1 .objects-set-inner{
    max-width:min(420px,var(--wadi-m-single-w))!important;
  }
}

/* WADI UPDATE - 2026-08-28 (CDX v1.4.1) Portrait tablets: the opening view is
   the same view every stop gives.

   .objects-index carries up to 92px of top padding, which is where the first
   set sits when the page is at rest. The pager lands every set after it 16px
   under the header, so the difference between the two was its own scroll stop
   — a ~70px nudge that had to be spent before the first real page turn, and
   the thing that made the snapping feel like it took a couple of swipes to
   wake up. Phones don't show it because their first set is already whole on
   screen and site.js folds a set it can see in full into the top of the page.

   Matching the padding to the pager's own START_GAP makes the first set land
   in the same place at rest as it does when scrolled to, so there is nothing
   left between the top of the page and the first set for a stop to occupy.
   Below 700px the phone padding is untouched. */
@media(min-width:700px) and (max-width:900px){
  .objects-page .objects-index{
    padding-top:20px!important;
  }
}



/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-01 (CDX v1.4.2) — the objects grid fits the fold on
   wide-but-short screens
   ══════════════════════════════════════════════════════════════════════

   Reported against real hardware: on most desktops and on iPads the objects
   page is correct, but on a 1366x768 notebook, a 1280x720/1024x600 tablet and
   any iPad or Samsung tab whose browser chrome eats enough height, the FIRST
   2x2 set hangs past the bottom of the screen — the lower row of images is
   sliced and both of its titles are gone. Later sets read as fine.

   The cause is a floor, not a breakpoint. Every desktop grid set is built to
   the strip of viewport under the header:

     .objects-set-grid  min-height : 100svh - var(--wadi-header-offset)
     .object-media      height     : clamp(210px, 31svh, 350px)

   31svh is the intended, height-aware size and it behaves: at 900px of
   viewport a set measures 658px against a 774px strip and centres with room
   to spare. But below roughly 677px of viewport, 31svh drops under the 210px
   floor, the floor takes over, and the set's height stops responding to the
   screen while the strip keeps shrinking. A set is then

     2 x (30px title + 210px media) + 40px row gap  =  520px

   plus this section's own 8-18px of padding — 547px against a 499px strip on
   a 1366x768 notebook. 48px hangs below the fold.

   That is also why only the first set looked broken. `.objects-set +
   .objects-set` zeroes the padding, so every later set is 520px rather than
   547px and loses 21px instead of 48 — enough to keep its titles. The first
   set is the one the page opens on and the one that carries the padding, so
   it takes the whole overflow where it is most visible.

   Portrait tablets and phones already have this guarantee: v1.4.1 gave the
   <=900px branch a --wadi-m-fit-w derived from the real viewport height. The
   >=901px branch never got the equivalent, which is precisely the band these
   devices land in — wide enough for the desktop layout, too short for its
   floor. This adds it.

   --wadi-obj-fit is the media height at which a whole set — two title rows,
   two image rows, the row gap and the section padding — measures exactly the
   strip. Applied through min(), so it can only ever REDUCE the existing
   clamp, never raise it:

     viewport 900px  ->  31svh = 279px, fit = 323px  ->  min() = 279px, unchanged
     viewport 768px  ->  31svh = 238px, fit = 257px  ->  min() = 238px, unchanged
     viewport 700px  ->  31svh = 217px, fit = 223px  ->  min() = 217px, unchanged
     viewport 677px  ->  floor  = 210px, fit = 212px ->  min() = 210px, unchanged
     viewport 625px  ->  floor  = 210px, fit = 186px ->  min() = 186px, FITS
     viewport 552px  ->  floor  = 210px, fit = 149px ->  min() = 149px, FITS

   So every screen that is correct today renders byte-for-byte as it does
   today — the cap is inert at any viewport taller than ~677px — and the
   screens that were cut off now hold the complete 2x2 set with all four
   titles, in the same layout, at a proportionally smaller size. Nothing about
   the design changes; only the size the images are drawn at on a screen too
   short to hold them whole.

   One fit for every grid set rather than a per-set one, deliberately. Later
   sets have no padding and could afford ~7px more image, but then the first
   set would be visibly smaller than the ones under it on exactly the devices
   this is fixing. The sets stay identical to each other and the 13.66px of
   slack on the later ones is absorbed by the centring they already do.

   Scoped to the 3- and 4-up sets: those are the only ones that stack two
   rows. A set of one or two is a single row (267px), fits at any height this
   layout ever sees, and is left exactly alone — as is the feature card, whose
   height is already derived from svh with no floor to trip over. */
@media(min-width:901px){
  .objects-page .objects-set-grid{
    /* Read straight off the rules above so the arithmetic stays honest if the
       section padding, the row gap or the title row is ever retuned. The title
       row is .object-meta's min-height; a long name widens the max-content
       card rather than wrapping, so 30px holds at every name length. */
    --wadi-obj-pad:clamp(8px,1vw,18px);
    --wadi-obj-gap:40px;
    --wadi-obj-title:30px;
    --wadi-obj-fit:calc((
      100svh
      - var(--wadi-header-offset)
      - (var(--wadi-obj-pad) * 2)
      - var(--wadi-obj-gap)
      - (var(--wadi-obj-title) * 2)
    ) / 2);
  }
  /* max() is a floor against a degenerate window, not a size — on anything
     wide enough for this branch the fit is far above it and it never binds. */
  .objects-page .objects-set-count-3 .object-media,
  .objects-page .objects-set-count-4 .object-media{
    height:min(
      clamp(210px,31svh,350px),
      max(120px,var(--wadi-obj-fit))
    )!important;
  }
}


/* --- The two columns line up ------------------------------------------
   Follow-up to the cap above, verified on a Galaxy Tab at 1280x620.

   A card is `width:max-content`, so it is as wide as its widest child — and
   that is the title row, not the image, whenever the name is long. At
   1280x620 the image is 122.8px wide and "CLOUD FOUR FOUR" is a 185px row, so
   that card is 185px while its neighbour above it is 123px. Both sit at the
   start of the same column track, and `.object-link{align-items:center}` then
   centres each image inside its own card — so the wide card's image is pushed
   (185 - 123) / 2 = 31px right of the narrow one's. The column reads as
   broken even though every card is exactly where the grid put it.

   This is not new — v1.4.1 drifted 23px at the same size — but the height cap
   makes the images narrower, which lets the title row dominate more of them,
   and 23px became 31px. It is present at every width below ~1920x937, where
   the image finally gets wider than the longest title and the question stops
   arising:

     1024x552  image 101.8px  ->  38.4px drift
     1280x620  image 122.8px  ->  31.2px drift   (the reported device)
     1440x789  image 163.1px  ->  11.1px drift
     1920x937  image 193.6px  ->   0

   justify-items centres each CARD in its column track. The card already
   centres its own image, so the image ends up centred in the track too — and
   since every image in a set is the same width, they all land on the same
   centre line whatever their titles run to. Drift measures 0 at every size
   tested, and because it moves cards inside tracks that are already there, no
   set changes height and the fit above is untouched.

   Chosen over `align-items:flex-start`, which would also align the images but
   by pinning them to the left of their cards — that flushes each title to its
   image's left edge and drops the centred composition the page is built on.
   Above ~1920x937 this rule is inert: every card is already image-width, so
   centring it in a track of that same width moves nothing. */
@media(min-width:901px){
  .objects-page .objects-set-grid .objects-set-inner{
    justify-items:center!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-01 (CDX v1.4.4) — the two side rails line up with
   the second gallery image again
   ══════════════════════════════════════════════════════════════════════

   Reported on desktop and on tablets: DOWNLOADS starts a little above the
   second image in the gallery, and the line drawing starts above them both.
   The ask is that the line drawing, the second gallery image and the
   DOWNLOADS panel all begin on one line, and that ADD TO ENQUIRY and the
   finishes square finish on that image's bottom edge.

   The machinery for this already exists — it is the --pdp-side-align-*
   block from 2026-08-04. Both rails are position:relative and the four
   pieces are pinned to the gallery's own arithmetic:

     --pdp-side-align-top    = image height + image gap  - lift
     --pdp-side-align-bottom = image height x 2 + gap    - lift

   where image height is the 3:4 slide drawn at --pdp-media-width. So
   `top:var(--pdp-side-align-top)` IS the second image's top edge and the
   rails' min-height IS its bottom edge — offset by --pdp-side-align-lift,
   which was 40px. That 40px is the whole of the misalignment on the left,
   and it is why the drawing and the button read as sitting high.

   Two things are corrected here.

   1. The lift goes to 0. Nothing else consumes it, so the four pinned
      pieces move down 40px onto the image's real edges and the rails grow
      40px taller to match. Measured at 1600x900: drawing top 442.3 -> 482.3
      against a second image at 482.3; ADD TO ENQUIRY and the finishes box
      bottom 848.9 -> 888.9 against an image bottom of 888.9.

   2. DOWNLOADS goes back into that system. The 2026-09-01 (v1.4.2) pass
      that narrowed the information rail also reset .pdp-download-box to
      position:static with a margin-top, which took it out of the alignment
      and left it floating 21.5px above the second image — dependent on how
      tall SPECIFICATIONS happened to be rather than on the gallery. It is
      pinned to --pdp-side-align-top again, so it starts on the same line as
      the drawing opposite it whatever the spec table above it does. The
      width and right edge that pass gave the rail are untouched.

   --pdp-media-width is restated in vw. It was
   `max(305px, calc(var(--wadi-frame-width) - 844px))`, and --wadi-frame-width
   is a percentage chain — which resolves against the element's WIDTH in
   grid-template-columns but against its HEIGHT in the top/min-height calcs
   above. The two agreed only because the 305px floor happened to win in both
   places; above ~2069px of viewport, where the gallery actually grows, they
   would have parted company and the rails would have aligned to nothing. The
   vw form has no percentage, so the track and the arithmetic are the same
   number by construction. It resolves to the identical width the old form
   produced — verified at 1280, 1600, 1920, 2200 and 2560 (305 / 305 / 305 /
   436 / 645px). */
@media(min-width:901px){
  .pdp-editorial-sec{
    --pdp-media-width:min(645px,max(305px,calc(100vw - 1764px)))!important;
    --pdp-side-align-lift:0px!important;
  }

  .pdp-download-box{
    position:absolute!important;
    top:var(--pdp-side-align-top)!important;
    left:0!important;
    right:0!important;
    margin:0!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-01 (CDX v1.4.4) — one type scale on phones and
   portrait tablets
   ══════════════════════════════════════════════════════════════════════

   Small type had drifted apart below 901px. Each pass that fixed a page
   set its own sizes for that page, and the site ended up reading at nine
   different sizes on a phone: 5px and 7px in the footer, 7px in the PDP
   dimension grid, 8px in the INFO and STUDIO statements and the PDP spec
   rows, 9px and 13px in the header, 10px, 11px, 12px, 13px elsewhere.

   Two sizes now, the pair the site already uses in the two places that
   were done last and are right — the contact page ("uniform body copy,
   14px uppercase headings/labels", further up) and the desktop PDP rail
   ("values settle at 12px, section headings at 14px"):

     body copy, values, list rows, buttons        12px
     headings, and the uppercase label above them 14px

   with three exceptions the studio asked for by name, all chrome rather
   than page copy:

     header nav links   10px
     footer PRIVACY     10px
     footer copyright   10px

   The language toggle joins the nav links at 10px: it sits in the same
   row as OBJECTS/INFO/STUDIO/CONTACT and has tracked their size at every
   width so far.

   Placed last, and deliberately in one @media(max-width:900px) block
   rather than one per breakpoint. Every earlier rule this replaces has
   equal or lower specificity and sits above it, so source order settles
   the cascade — including the 520px rules, since a 900px query matches a
   375px phone too. Where an earlier rule is MORE specific (the PDP rail's
   `.pdp-info-panel .pdp-info-row dt`, the contact page's
   `.wadi-contact .contact-label`), the same size is restated below with a
   `body ` prefix so it outranks it. The two selector lists are the theme's
   own body/heading lists from the "Final typography lock" further up, so
   anything that lock covers is covered here.

   Untouched on purpose: .wadi-basket-title (12px) and .wadi-basket-close
   (10px). Those are drawer chrome sized to the header rather than copy on
   a page, and they sit on the header's own line — see the drawer-head
   alignment further down. */
@media(max-width:900px){
  /* --- 12px: body copy ------------------------------------------------ */
  body,button,input,textarea,select,p,li,dt,dd,
  .bt,.acc-in,.pdp-trigger-body,.principle-body,.pdp-hero-desc,
  .pdp-readmore .pdp-detail-intro,.pdp-readmore-toggle,.pdp-enquire-link,
  .pdp-finish-name,.ey,.pg-hero-sub,.coll-hero-eye,.hero-eye,.pdp-hero-ey,
  .pdp-related-label,.pc-brand,.pc-tag,.acc-lb,.pdp-trigger-lbl,
  .studio-img-cap span,.object-type,.cta,.pc-ov,.pc-enquire,.btn-p,
  .h-book-btn,.studio-book-btn,.objects-head,.ft-links a,
  .pdp-info-label,.pdp-finish-list,.pdp-finish-item,.acc-hd,
  .objects-summary,.wadi-modal-sub{
    font-size:12px!important;
  }

  /* The same 12px, restated where the rule it replaces is more specific
     than the list above. */
  body .info-intro-copy,
  body .info-person-text p,
  body .studio-ref-intro p,
  body .studio-ref-intro-copy p,
  body .contact-block p,
  body .contact-block a,
  body .wadi-contact .contact-block p,
  body .wadi-contact .contact-block a,
  body .wadi-lang-option,
  body .wadi-enquiry-product-media,
  body .wadi-enquiry-product-kicker,
  body .wadi-enquiry-product-qty,
  body .wadi-basket-empty,
  body .wadi-basket-item-title,
  body .pdp-enquire-btn,
  body .pdp-editorial-sec .pdp-detail-intro,
  body .pdp-editorial-sec p:not(.pdp-detail-intro),
  body .pdp-editorial-sec button,
  body .pdp-editorial-sec dt,
  body .pdp-editorial-sec dd,
  body .pdp-editorial-sec span,
  body .pdp-editorial-sec a,
  body .pdp-editorial-sec li,
  body .pdp-spec-box .pdp-dimension-grid dt,
  body .pdp-spec-box .pdp-dimension-grid dd,
  body .pdp-info-panel .pdp-info-row dt,
  body .pdp-info-panel .pdp-info-row dd,
  body .pdp-info-panel .pdp-download-row,
  body .pdp-info-panel .pdp-download-row dt,
  body .pdp-info-panel .pdp-download-row dd{
    font-size:12px!important;
  }

  /* --- 14px: headings, and the label that heads a block --------------- */
  h1,h2,h3,h4,h5,h6,
  .hero-statement-title,.hero-h,.hero-h-sm,.pg-hero-h,
  .about-q,.sh,.pdp-hero-title,.pdp-related-name,.pc-name,
  .object-name,.finish-name,.team-name,
  .founder-name,.step-title,.process-lab-note p,
  .pdp-side-heading,.pdp-finishes-lb,.pdp-product-title{
    font-size:14px!important;
  }

  /* .wadi-modal-title is in the theme's heading list but is left out of this
     one. It is display type, not a label above a paragraph: the enquiry
     dialog draws it at clamp(2rem,3.1vw,3rem), so it is 32px on a phone
     where every other heading in the list is already 16px. Taking the list
     literally would have dropped it to 14px and flattened the dialog. The
     rest of the list moves 16 -> 14, which is the step this is about. */

  body .info-person-text h2,
  body .pdp-info-panel .pdp-side-heading,
  body .pdp-info-panel .pdp-finishes-lb,
  body .contact-label,
  body .wadi-contact .contact-label,
  body .contact-block:nth-child(1) .contact-label,
  body .wadi-contact .contact-block:nth-child(1) .contact-label{
    font-size:14px!important;
  }

  /* --- 10px: the three chrome items named in the request -------------- */
  header#hdr nav a,
  header#hdr nav .wadi-lang-toggle{
    font-size:10px!important;
  }

  #wadi-footer .ft-copy,
  #wadi-footer .ft-privacy{
    font-size:10px!important;
  }
}

/* The menu row is a single non-wrapping flex line, so its width is the four
   link widths plus six gaps. Raising the links from 9px to 10px widens that
   line by ~11px on a phone, and at 375px it was already 3px wider than the
   frame — so the gap comes down to pay for it. Measured at 375x667: the row
   was 336px against a 333px frame and is now 313px, i.e. this is narrower
   than what shipped rather than wider. Only the spacing moves; the type is
   the size that was asked for.

   The copyright line is the other half of that arithmetic. At 5px it fitted
   the 170px cap it was given; at 10px it needs about 350px, which no phone
   frame has, so the cap is released and it wraps to two lines against the
   footer's own space-between rather than three inside a box too small for
   it. */
@media(max-width:520px){
  header#hdr nav{
    gap:clamp(8px,3.9vw,25px)!important;
  }

  #wadi-footer .ft-copy{
    max-width:none!important;
    line-height:1.35!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-01 (CDX v1.4.4) — BASKET sits on the menu line
   ══════════════════════════════════════════════════════════════════════

   On a desktop the drawer's title lines up with the menu for free: the
   header is one horizontal bar, .wadi-basket-head is given the header's
   exact height, and centring the title inside it puts it on the same line
   as OBJECTS/INFO/STUDIO/CONTACT.

   Below 901px the header stops being one bar. It becomes a column — the
   logo on its own row, then the menu row beneath it — so the menu is no
   longer in the middle of the header and centring the title no longer
   points at it. Measured at 618x1384: the menu row runs 187-204 from the
   top of the page while BASKET sat at 152.5-164.5, 37px above it.

   Reproducing the header's own stack inside the head fixes it without
   guessing at a number. The head keeps its height (so the drawer's rule
   still lands on the header's rule, which is what the 2026-08-12 pass was
   for) and gains the header's two vertical steps as padding:

     padding-top    = logo row + the gap under it
     padding-bottom = whatever is left under the menu row, less the 1px rule

   What remains between them is exactly the menu row, and align-items:center
   centres BASKET and CLOSE in it — on the menu's line at both breakpoints,
   at 618x1384 and at 375x667, without either value being written twice.

   The three measurements are variables rather than literals, and the rules
   that own them are re-pointed at the same variables, so the logo height,
   the gap under it and the menu row's own height cannot drift apart from
   the drawer again. The menu row's height is the bag icon: it is the
   tallest thing in the row at every width, which is why the links sit
   centred within 17px rather than filling it. */
:root{
  --wadi-hdr-nav-row:17px;
}

header#hdr .wadi-basket-link .wadi-basket-icon{
  width:var(--wadi-hdr-nav-row)!important;
  height:var(--wadi-hdr-nav-row)!important;
}

@media(max-width:900px){
  :root{
    --wadi-hdr-logo-h:58px;
    --wadi-hdr-nav-gap:28px;
  }

  header#hdr .logo{
    height:var(--wadi-hdr-logo-h)!important;
  }

  header#hdr .h-right{
    margin-top:var(--wadi-hdr-nav-gap)!important;
  }

  .wadi-basket-head{
    align-items:center!important;
    padding-top:calc(var(--wadi-hdr-logo-h) + var(--wadi-hdr-nav-gap))!important;
    padding-bottom:calc(
      var(--wadi-header-h)
      - var(--wadi-hdr-logo-h)
      - var(--wadi-hdr-nav-gap)
      - var(--wadi-hdr-nav-row)
      - 1px
    )!important;
  }
}

@media(max-width:520px){
  :root{
    --wadi-hdr-logo-h:35px;
    --wadi-hdr-nav-gap:18px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-01 (CDX v1.4.4) — air between the contact image
   and the contact copy on phones and portrait tablets
   ══════════════════════════════════════════════════════════════════════

   GET IN TOUCH started 26px under the interior photograph, which read as
   the copy being stuck to it. The request is to drop the copy 50-70px, or
   further if there is room.

   The catch is that the contact page is the one page locked to a single
   screen: body is 100svh with overflow:hidden, so anything added here is
   taken off the bottom rather than scrolled to. Measured before this
   change, the space left under the footer was 364px at 618x1384 (the
   reported device), 188px at 412x915, 135px at 390x844 — and 18px at
   810x1080 and 0px at both 768x1024 and 375x667. A flat 60px would have
   cut the footer off an iPad in portrait and a small phone.

   So the gap is written in svh and paid for out of the photograph, which
   is capped by max-height on exactly the screens that have no room:

     - Where the frame is the binding constraint (the tall, narrow
       viewports, including the reported one) the cap is inert and the
       photograph is not touched at all: 42svh was 581px against an image
       already drawn at 439px. The gap simply takes some of the 364px of
       slack.
     - Where max-height is what is sizing the image (iPad portrait, short
       phones) lowering it 42->37svh and 39->34svh returns ~50px, and the
       svh gap spends less than that, so those screens end up with MORE
       room under the footer than they had, not less.

   Measured after: gap 26->86px at 618x1384 (+60, the requested shift) with
   304px still free; 26->64px at 768x1024 with 40px free where there was 0;
   19->44px at 375x667 with 10px free where there was 0. */
@media(max-width:900px){
  .wadi-contact .contact-right{
    max-height:37svh!important;
  }

  .wadi-contact .contact-left{
    padding-top:clamp(44px,6.2svh,88px)!important;
  }
}

@media(max-width:520px){
  .wadi-contact .contact-right{
    max-height:34svh!important;
  }

  .wadi-contact .contact-left{
    padding-top:clamp(38px,6.6svh,80px)!important;
  }
}

/* The contact page is the one page that pays for the taller footer, because
   it is the one page locked to a single screen — everywhere else the extra
   line of copyright simply makes a scrolling page 25px longer.

   On a short phone it had nowhere to take that from: 375x667 was already
   overrunning its own frame by 8px before any of this (that is v1.4.3's
   number, measured), and the 10px copyright plus the 14px labels pushed the
   overrun to 25px. The footer's own bottom padding is the cheapest 35px on
   the page — it is empty space between the copyright line and the bottom
   edge of the screen — so on short phones the contact page takes it back and
   the copy fits again with room to spare.

   Gated on height as well as width so it only reaches the screens that are
   actually out of room. A tall phone has 75-125px spare and keeps the 59px
   footer exactly as it is; nothing about the reported device changes. */
@media(max-width:520px) and (max-height:780px){
  body.wadi-contact #wadi-footer{
    padding-bottom:24px!important;
  }
}

/* The one place the 12px body size does not fit the box it was given.

   WIDTH / DEPTH / HEIGHT sit in a three-column grid inside the information
   rail. On a desktop that rail is 264px, so a third of it is 88px and the
   longest label needs 84 — it fits. On a phone the rail is 112-134px, a
   third of it is 37-45px, and at 12px "HEIGHT" needs 61px: measured
   overflowing its cell by 16px at 375px wide and by 24px at 320px. At the
   7px it used to be it fitted, which is why this only appears now.

   Three columns is not recoverable at this width — even at the rail's own
   .08em tracking the label is still wider than the cell — so on phones and
   portrait tablets the three dimensions become three rows, drawn exactly
   like the MATERIAL / WEIGHT / LEAD TIME rows directly beneath them. Label
   left, value right, one hairline between each. The rail reads as one table
   instead of a grid above a table, and every value has the full width to
   wrap into. Desktop keeps its three columns. */
@media(max-width:900px){
  .pdp-spec-box .pdp-dimension-grid{
    grid-template-columns:minmax(0,1fr)!important;
    padding-top:0!important;
  }

  .pdp-spec-box .pdp-dimension-grid div{
    display:flex!important;
    align-items:baseline!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:7px 0!important;
    border-bottom:1px solid rgba(26,25,23,.14)!important;
  }

  .pdp-spec-box .pdp-dimension-grid dd{
    padding-top:0!important;
    text-align:right!important;
  }
}

/* SPECIFICATIONS is fourteen characters of a single unbreakable word, and
   the rail it heads is 112-140px on a phone. At 14px it needs 159px of the
   .25em tracking it inherits, so it ran out of the rail by 25px at 375 and
   47px at 320. Tracking is the only thing that can give: the rail's own
   headings are already .14em on desktop, which is what it takes below 900px,
   and .08em — the tracking the rail's value rows use — is what it takes on a
   phone. Measured need against available: 137 vs 140 at 390 (.14em), 128 vs
   128 at 360 and 134 vs 134 at 375 (.08em). The size stays 14px throughout;
   only the letter-spacing follows the width, exactly as it already does
   between the desktop rail and the rest of the site. */
@media(max-width:900px){
  .pdp-info-panel .pdp-side-heading,
  .pdp-info-panel .pdp-finishes-lb{
    letter-spacing:.14em!important;
  }
}

@media(max-width:520px){
  .pdp-info-panel .pdp-side-heading,
  .pdp-info-panel .pdp-finishes-lb{
    letter-spacing:.08em!important;
  }
}

/* Same arithmetic, one row further down. 3D CAD / AVAILABLE ON REQUEST is a
   two-column row in the same narrow rail, and at 12px "AVAILABLE" was 3px
   wider than the value column at 360px — the one width where the label side
   is wide enough to squeeze it. Six pixels of the column gap covers it
   without breaking the word or restacking a row that reads correctly at
   every other size. */
@media(max-width:520px){
  .pdp-info-panel .pdp-download-row{
    column-gap:8px!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.4.5) — the PDP side rails stop touching
   the gallery on a portrait iPad
   ══════════════════════════════════════════════════════════════════════

   Reported on an iPad Pro 12.9": on the product page the text runs into the
   photograph. Measured on the live site at 1024x1250 (portrait) the two
   flanking gutters of .pdp-editorial-sec are literally 0px wide —

     grid-template-columns  computed  232px  0px  305px  0px  232px

   so SPECIFICATIONS begins on the gallery's right edge and the description
   block ends on its left edge, with nothing between them.

   The cause is track sizing, not a missing breakpoint. The 2026-08-28 pass
   set, for every width from 901px up:

     minmax(228px,312px) minmax(0,1fr) var(--pdp-media-width)
     minmax(0,1fr) minmax(228px,312px)

   Grid grows tracks that have a definite maximum BEFORE it hands anything to
   the flexible ones, so the two rails climb from 228px towards 312px out of
   the free space and the `1fr` gutters only ever receive what the rails could
   not use. The rails need 168px to reach 312px, so the gutters stay at zero
   until the section is wider than 929px:

     frame = 100% - 2 x clamp(24px,12.45vw,230px) = 0.751 x viewport

     viewport 1024  ->  frame  769px  ->  rails 232px, gutters   0px
     viewport 1150  ->  frame  864px  ->  rails 280px, gutters   0px
     viewport 1237  ->  frame  929px  ->  rails 312px, gutters   0px
     viewport 1320  ->  frame  991px  ->  rails 312px, gutters  31px
     viewport 1366  ->  frame 1026px  ->  rails 312px, gutters  48px
     viewport 1600  ->  frame 1202px  ->  rails 312px, gutters 136px

   A landscape iPad at 1366 is above the collapse and reads correctly, which
   is why only the portrait orientation was reported as unreadable — and why
   desktops, which all sit further right on that table, were never affected.
   The band that is actually broken is 901px to roughly 1237px, and it is
   still thin up to ~1300px.

   The fix is to reserve the gutters first and let the rails take what is
   left, which is the same composition expressed the other way round:

     minmax(0,1fr) <gutter> var(--pdp-media-width) <gutter> minmax(0,1fr)

   A fixed gutter track cannot be eaten by a neighbour, so the separation is
   guaranteed at every width in the band, and the rails — which only ever
   held a title, a sentence, a spec table and a drawing — absorb the
   difference. The gallery keeps its 305px at 1024px and above; below that the
   section is too narrow to hold 305px and two readable rails, so the media
   width eases down with the viewport instead of squeezing the type.

     viewport  media   gutter   rail        (was: rail / gutter)
      901px    268px    26px    178px        186px / 0px
     1024px    305px    26px    206px        232px / 0px
     1180px    305px    30px    262px        280px / 0px
     1320px    305px    32px    311px        312px / 31px

   The band stops at 1320px because that is where the two rules converge:
   at 1321px the existing declaration produces a 312px rail and a 31.5px
   gutter, and at 1320px this one produces 311px and 32px. The crossover is
   under a pixel wide, so there is no step at the breakpoint and nothing at
   1366px or above renders any differently than it does today.

   --pdp-side-align-top / -bottom are derived from --pdp-media-width, so the
   line drawing, the DOWNLOADS panel, ADD TO ENQUIRY and the finishes square
   follow the gallery to its new size on their own and stay pinned to the
   second image's top and bottom edges, exactly as the v1.4.4 pass set them.

   Placed last so it lands after the 2026-08-28 and v1.4.4 blocks it narrows;
   both are !important at equal specificity and source order settles it. */
@media(min-width:901px) and (max-width:1320px){
  .pdp-editorial-sec{
    /* 29.8vw reaches 305px at exactly 1024px, so a portrait iPad keeps the
       full-size gallery and only genuinely narrower windows trade it down. */
    --pdp-media-width:clamp(240px,29.8vw,305px)!important;
    --pdp-side-gutter:clamp(26px,2.5vw,32px);
    grid-template-columns:
      minmax(0,1fr)
      var(--pdp-side-gutter)
      var(--pdp-media-width)
      var(--pdp-side-gutter)
      minmax(0,1fr)!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.4.5) — the objects page holds its stop
   on a touch screen
   ══════════════════════════════════════════════════════════════════════

   Reported with a screenshot from an iPad Pro 12.9" in landscape: the page
   is resting with the bottom row of one set at the top of the screen, a band
   of empty page under it, and the top row of the next set below that. The
   objects page is built so that cannot happen — site.js pages it one whole
   set per gesture, and "the page never rests between two of them".

   It happens because nothing actually holds the page still under a finger.
   Lenis is constructed with `smoothTouch: false`, so on a touch device it
   does not drive scrolling at all and `lenis.stop()` withholds nothing; the
   only thing standing between a swipe and the browser's own scroll is the
   pager's preventDefault on touchmove — and iOS stops making touchmove
   cancelable the moment it has decided the gesture is a pan. What decides
   that is `touch-action`, and `touch-action` was declared on .objects-page,
   the header, the footer and the loader, but never on the elements that
   actually scroll. html and body kept `touch-action: auto`, so the document
   was free to pan, the gesture went non-cancelable, and the native scroll
   ran underneath the pager and stopped wherever momentum ran out.

   Declaring it on the scrolling elements themselves is the missing half of
   the 2026-08-17 rule rather than a new mechanism: same value, same reason.
   `pan-x pinch-zoom` and not `none` deliberately — vertical panning is what
   the pager owns, while pinch-to-zoom stays available, which on a tablet is
   an accessibility affordance and not a nicety.

   Scoped to coarse pointers so a desktop mouse, a trackpad and a scrollbar
   drag are untouched: there, the wheel handler's preventDefault has always
   been sufficient and this rule never applies.

   site.js gains the matching safety net — if the page ever does come to rest
   between two sets, for this reason or any other, it eases onto the nearest
   one — so the two changes cover each other.

   Declared on body rather than on html as well, and lifted the moment an
   overlay opens. A touch-action on an ancestor is intersected with the
   element's own, and an inner scroller cannot win back a behaviour an
   ancestor withheld — so a blanket rule here would have left the basket
   drawer and the enquiry modal unable to scroll their own contents on a
   touch screen, which is the classic way this property is got wrong. Every
   touch lands inside body, so body alone is enough to withhold the page pan,
   and the two open-state classes the drawer and the modal already set (the
   same two the pager's own overlayOpen() reads) hand it straight back. Plain
   class selectors on that same element, so there is no :has() and nothing to
   support: it behaves identically on an old iPad and a new one. */
@media (hover:none), (pointer:coarse){
  html.wadi-objects-paged body{
    touch-action:pan-x pinch-zoom!important;
    overscroll-behavior-y:none!important;
  }
  html.wadi-objects-paged body.wadi-basket-open,
  html.wadi-objects-paged body.wadi-modal-open{
    touch-action:auto!important;
    overscroll-behavior-y:auto!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.4.6) — three mobile corrections
   ══════════════════════════════════════════════════════════════════════
   Phones and portrait tablets only. Nothing in this section applies above
   900px, and the footer part applies only below 520px, so every desktop and
   landscape-tablet layout is byte-for-byte what v1.4.5 shipped. */


/* --- 1. CONTACT headings come down to the size of the menu -------------
   Reported from an iPhone: GET IN TOUCH, EMAIL FOR WADI, CAREERS, LOCATION
   and FOLLOW US are too big on a phone; they should read at the size of the
   menu items above them.

   They are at 14px because the 2026-09-01 (v1.4.4) type pass put every
   heading and block label in the ≤900px band at 14px, and the menu at 10px.
   This moves that one page's title and labels onto the menu's 10px. The
   values under them are untouched at 12px, so the labels are now smaller
   than the copy they head — which is the intent: they are tracked, uppercase
   and grey, the copy is dark, and the hierarchy is carried by weight and
   colour rather than by size, exactly as it is in the header.

   Only the size moves. The .14em tracking, the 500 weight, the uppercasing
   and every margin stay as they are, so the blocks keep their shape.

   Devanagari gets 12px rather than 10px for the same reason its menu does
   below — matching its own menu, not the Latin number. See part 2. */
@media(max-width:900px){
  .contact-title,
  .wadi-contact .contact-title,
  .contact-label,
  .wadi-contact .contact-label,
  .contact-block:nth-child(1) .contact-label,
  .wadi-contact .contact-block:nth-child(1) .contact-label{
    font-size:10px!important;
  }
  body.wadi-devanagari .contact-title,
  body.wadi-devanagari .contact-label,
  body.wadi-devanagari .contact-block:nth-child(1) .contact-label,
  body.wadi-devanagari.wadi-contact .contact-title,
  body.wadi-devanagari.wadi-contact .contact-label,
  body.wadi-devanagari.wadi-contact .contact-block:nth-child(1) .contact-label{
    font-size:12px!important;
  }
}


/* --- 2. The Marathi and Hindi menu reads like the English one ----------
   Reported: in the regional languages the menu items sit too close to each
   other, where English is wide and clean.

   Both halves of that are measurable. At 390px, with the same 10px size and
   the same 15.2px gap in every language:

     English   OBJECTS 54.9  INFO 31.1  STUDIO 47.9  CONTACT 59.6
               the seven-item row spans 323px of a 348px bar — 25px spare
     Marathi   वस्तू 16.9   माहिती 25.9  स्टुडिओ 29.1  संपर्क 21.4
               the same row spans 212px — 136px spare

   So the row is not too tight, it is far too loose: the words are a third
   of the width of the English ones and the gaps between them are identical,
   which reads as four small clusters marooned in the middle of an empty bar.
   Two causes, both addressed here.

   Size. 10px of Devanagari is not 10px of Latin. The Latin menu is set in
   caps, so its 10px is 10px of cap height; Devanagari has no case, and its
   base glyphs sit well below the em box with the matras above, so the same
   number draws visibly smaller type. 12px is the usual optical step for
   Devanagari against tracked Latin caps and brings वस्तू to the weight of
   OBJECTS on the page. The switcher initial (म / हिं) goes with it, since
   it sits on that same line and has tracked the menu at every width so far.

   Spacing. The gap is the reason the words cluster, so it scales with the
   room the shorter words leave. The four links plus the switcher, divider
   and bag come to roughly 163px in Devanagari at 12px against 252px in
   English, and the formula spends that 89px difference on the six gaps:

     viewport   gap    row      bar     (English row / bar, for comparison)
      320px    14px   247px    278px          307px / 278px
      360px    20px   283px    318px          315px / 318px
      390px    25px   313px    348px          323px / 348px
      430px    31px   349px    388px          333px / 388px
      520px    42px   415px    478px          —

   which is the English proportion, arrived at from the other direction. The
   42px ceiling is the menu's own existing maximum, so nothing widens past
   what English already uses, and the 12px floor keeps the row inside the
   frame on a 320px phone in Hindi, whose words are the widest of the three.

   English is untouched — every selector here is scoped to .wadi-devanagari. */
@media(max-width:900px){
  body.wadi-devanagari header#hdr nav a,
  body.wadi-devanagari header#hdr nav .wadi-lang-toggle{
    font-size:12px!important;
  }
  body.wadi-devanagari header#hdr nav{
    gap:clamp(12px,calc(15.45vw - 35.4px),42px)!important;
  }
}


/* --- 3. The footer sits on one line on a phone ------------------------
   Reported: the copyright wraps to two lines and PRIVACY sits above the
   social icons, where a desktop has all three on one row.

   Measured on the live site, the row breaks below about 455px and is
   correct at every width above it:

     viewport   bar    copy at 10px   room for it   result
      320px    278px      271px          147px      2 lines, nav stacked
      390px    348px      271px          217px      2 lines, nav stacked
      440px    398px      271px          267px      2 lines, nav stacked
      470px    428px      271px          297px      1 line, nav on one row
      560px    488px      271px          384px      1 line, nav on one row

   The copyright is 10px because v1.4.4 put it there with the rest of the
   small type, and its note records the consequence honestly: "at 10px it
   needs about 350px, which no phone frame has, so the cap is released and
   it wraps to two lines". That is the line being revisited, and 10px and
   one line cannot both be true on a 320px phone. Two things give, in the
   order that costs the least.

   Tracking first. The line is set at .14em, and on a 42-character string
   that is 5.9px of pure letter-spacing per point of size — 22 percent of
   its whole width. Easing it to .08em buys back most of what is needed
   without touching the size at all, and it is still unmistakably the
   tracked uppercase rule the footer is set in. English measures 24.6px of
   width per point of size afterwards, against 27.1px before.

   Size second, and only by as much as the frame actually demands. It is the
   largest that fits rather than a flat number, so it reaches the full 10px
   at 430px and above, where the room exists, and eases down below that:

     320px  5.8px    375px  7.9px    414px  9.4px
     360px  7.3px    390px  8.5px    430px  10px (capped)

   Devanagari has its own line because its copyright is a shorter string —
   209px in Marathi and 217px in Hindi against 271px in English — so it
   holds the full 10px from 375px up and eases only on the narrowest phones.

   Every size above is checked against the room left after PRIVACY, the
   icons and the gaps, with 8px to spare, at 320, 360, 375, 390, 414, 430,
   470 and 520px in all three languages. That margin matters here because
   the line is nowrap: it can no longer wrap out of trouble, so it must be
   measured rather than estimated.

   Two supporting changes, both confined to where the break happens:
   .ft-nav stops wrapping, so PRIVACY and the icons stay on one row rather
   than stacking when the copy squeezes them; and its gap eases from 15px
   down to 12px under ~470px, which is worth 3px to the copy and is exactly
   15px again from 470px to 520px, so the band that already reads correctly
   is not touched at all. .ft-main keeps its 24px gap, and colour, weight
   and the icons' size are all unchanged. */
@media(max-width:520px){
  #wadi-footer .ft-main{
    flex-wrap:nowrap!important;
  }
  #wadi-footer .ft-copy{
    max-width:none!important;
    white-space:nowrap!important;
    line-height:1!important;
    flex:0 1 auto!important;
    letter-spacing:.08em!important;
    font-size:clamp(5.7px,calc(3.9vw - 6.72px),10px)!important;
  }
  body.wadi-devanagari #wadi-footer .ft-copy{
    font-size:clamp(7.8px,calc(4.78vw - 7.45px),10px)!important;
  }
  #wadi-footer .ft-nav{
    flex-wrap:nowrap!important;
    flex:0 0 auto!important;
    gap:clamp(12px,3.2vw,15px)!important;
  }
  #wadi-footer .ft-privacy{
    white-space:nowrap!important;
  }
  #wadi-footer .ft-socials{
    flex:0 0 auto!important;
    flex-wrap:nowrap!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.4.7) — the objects page opens on the
   first set on a phone
   ══════════════════════════════════════════════════════════════════════

   Reported from an iPhone: the grid does not start centred, one swipe only
   nudges it into place, and the second swipe is the first that actually
   turns a page.

   This is the same fault the 2026-08-28 (v1.4.1) block above fixed for
   portrait tablets, and its own note says why phones were left out: "Phones
   don't show it because their first set is already whole on screen and
   site.js folds a set it can see in full into the top of the page." That
   holds only if the set really does fit, and the top padding is what stops
   it. Measured on the live site at 390x660:

     header bottom                              139px
     .objects-index padding-top  clamp(70,9svh,92)  70px
     first set top                              209px
     first set height                           489px
     strip below the header                     521px   (the set fits it)

   wholeAtTop() asks whether 209 + 489 lands inside the 660px viewport. It
   does not — 698 — so the set is not folded away, and it gets a stop of its
   own at 209 - 139 - 16 = 54px. NEAR is 48, so 54 clears it by six pixels
   and survives as a separate stop:

     stops  0, 54, 613, 1188, 1747, 2306, 2866, 3009
            └── the wasted first swipe

   Six pixels is the whole of the reported behaviour. The page opens at 0
   with the grid 70px below the header and its bottom row cut off; the first
   swipe spends itself travelling 54px to sit the grid 16px under the header;
   only the second one reaches the next set.

   The fix is the tablet one, applied at the width where the pager actually
   changes behaviour. site.js aligns phone stops to the top of a set plus its
   START_GAP of 16px (startAlignQuery is max-width:699px), so making the
   padding that same 16px means the page at rest already IS the first set's
   stop:

     first set top      139 + 16 = 155px
     its stop           155 - 139 - 16 = 0     — the same place as scroll 0
     stops              0, 559, 1134, 1693, 2252, 2812, 2955

   One swipe from the top now lands on the second set. The opening view is
   the view the pager gives every other set: 16px under the header, with the
   set whole on screen — at 390x660 that is 16px of air above the grid and
   16px below it, which is the framing that was being reached by the wasted
   swipe.

   Deliberately matched to the pager's constant rather than chosen to look
   right: if START_GAP is ever retuned, this padding is the number to move
   with it. 699px rather than 700px so the CSS and startAlignQuery change
   over on the same pixel — 700-900px keeps the 20px the v1.4.1 block gave
   it, and nothing at 901px and above is touched. */
@media(max-width:699px){
  .objects-page .objects-index{
    padding-top:16px!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.4.8) — the product page's finishes,
   its enquiry button and its downloads panel
   ══════════════════════════════════════════════════════════════════════

   Four changes, all of them on the desktop / landscape-tablet layout
   (901px and up) except the last, which is the phone carousel's tap
   targets. Everything else below 901px is byte-for-byte v1.4.7: the new
   parts of the finishes markup are switched off there, and the two new
   drawers are display:none, so a phone renders the page it rendered
   yesterday.

   1. ENQUIRE NOW moves under the gallery and sticks to the viewport.
   2. DOWNLOADS is gone unless the studio turns it back on, and FINISHES
      takes the line it used to hold — the top edge of the gallery's
      second image, level with the line drawing opposite.
   3. FINISHES becomes a rail-width panel: the current material, a row of
      switches, and EXPLORE. Any of them opens a drawer.
   4. The phone carousel's arrows get a hit area big enough to miss.
   ────────────────────────────────────────────────────────────────────── */


/* --- 1. ENQUIRE NOW, centred under the gallery and sticky -------------

   The button used to close the left rail; it now sits in the gallery
   column and stays on screen for as long as the editorial section — the
   title, the description, SPECIFICATIONS — is being read.

   It is `position:sticky; bottom:…` inside a dock that shares the
   gallery's own grid cell. Sharing the cell is what keeps the section
   the height it already was: the dock draws no box of its own, so the
   --pdp-side-align-* arithmetic that pins the line drawing, the finishes
   panel and the rails to the second image is untouched. Both the gallery
   window and the dock are placed explicitly, because an auto-placed item
   would otherwise be pushed into a second row by the one that is pinned.

   Sticky holds the button `--pdp-enquire-inset` above the bottom of the
   window while the gallery is on screen, and lets it come to rest on the
   gallery's bottom edge as the section ends, so it never floats over the
   footer. The white fill is new and is the only reason it is here rather
   than kept transparent: it now sits over a photograph rather than the
   page, and an outline alone disappears against a mid-grey image. */
@media(min-width:901px){
  .pdp-editorial-sec{
    --pdp-enquire-inset:clamp(26px,3.4vw,52px);
  }

  .pdp-scroll-stack.pdp-image-carousel .pdp-image-window{
    grid-column:1!important;
    grid-row:1!important;
  }

  .pdp-enquire-dock{
    grid-column:1!important;
    grid-row:1!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    height:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    padding:0 0 clamp(8px,.9vw,14px)!important;
    margin:0!important;
    /* The dock covers the gallery, so only the button itself may take a
       click — the slides underneath keep opening the lightbox. */
    pointer-events:none!important;
    z-index:9!important;
  }

  .pdp-enquire-dock .pdp-enquire-btn{
    position:sticky!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:var(--pdp-enquire-inset)!important;
    z-index:9!important;
    width:auto!important;
    min-width:166px!important;
    min-height:28px!important;
    margin:0!important;
    padding:0 14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    /* flex-end, not the flex-start the v1.4.4 rule set for the left rail —
       the button's resting place is the bottom of the gallery, and sticky
       only ever lifts it up from there. */
    align-self:flex-end!important;
    pointer-events:auto!important;
    border:1px solid rgba(26,25,23,.75)!important;
    background:rgba(255,255,255,.94)!important;
    color:rgba(26,25,23,.82)!important;
    box-shadow:none!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:.02em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    cursor:none!important;
  }
  .pdp-enquire-dock .pdp-enquire-btn:hover{
    background:var(--dark)!important;
    color:#fff!important;
  }
}


/* --- 2 & 3. The information rail's second block ----------------------

   .pdp-rail-second is what is now pinned to --pdp-side-align-top, rather
   than DOWNLOADS being pinned there on its own. That single move is what
   puts FINISHES on the line drawing's line: with DOWNLOADS off — its
   default from v1.4.8 — the block's first child IS the finishes panel,
   so FINISHES starts exactly where the drawing and the second gallery
   image start. Switch DOWNLOADS back on in the Customizer and it takes
   that line with FINISHES below it, which is the order the rail read in
   before and needs no second rule.

   Below 901px the wrapper is display:contents, so .pdp-spec-box,
   .pdp-download-box and .pdp-finishes-box stay direct children of the
   phone grid and land in the rows the 2026-08-04 mobile pass gives them.

   The panel itself is the rail's full width — the same width as
   SPECIFICATIONS above it, which is what "as wide as the specs panel"
   asks for — and drops the 122px bordered square it used to be. The
   switches keep the swatch images and the four gradient fallbacks
   exactly as they are; only their shape changes, from a 39px square to a
   4:3 rectangle three to a row. The selected one carries a grey ring
   (hover shows a lighter one), so the default finish reads as chosen
   from the first paint.

   Every selector here is scoped to .pdp-rail-second, which only the
   WooCommerce product template prints. page-product.php — the static
   sample page that shares these class names — therefore keeps the v1.4.7
   bordered square exactly as it is.
   */
@media(min-width:901px){
  .pdp-rail-second{
    position:absolute!important;
    top:var(--pdp-side-align-top)!important;
    left:0!important;
    right:0!important;
    margin:0!important;
  }

  /* DOWNLOADS is no longer pinned in its own right — it is the first
     child of the block that is. */
  .pdp-rail-second .pdp-download-box{
    position:static!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    margin:0 0 clamp(34px,3.8vw,58px)!important;
  }

  .pdp-rail-second .pdp-finishes-box{
    position:static!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    display:block!important;
  }

  .pdp-rail-second .pdp-finishes-box .pdp-finishes-lb{
    display:block!important;
    margin:0 0 clamp(18px,2vw,26px)!important;
    padding:0!important;
    border-bottom:0!important;
    color:rgba(26,25,23,.66)!important;
  }

  /* The current material, under the rule that closes the heading. */
  .pdp-finish-current{
    display:grid!important;
    grid-template-columns:clamp(40px,4.4vw,56px) minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:clamp(10px,1.1vw,14px)!important;
    padding-top:clamp(12px,1.4vw,18px)!important;
    border-top:1px solid rgba(26,25,23,.16)!important;
  }
  .pdp-finish-current-media{
    display:block!important;
    width:100%!important;
    aspect-ratio:4/3!important;
    overflow:hidden!important;
    background:#E7DFCF!important;
  }
  .pdp-finish-current-media .pdp-finish-img,
  .pdp-finish-current-media .pdp-finish-swatch{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
  }
  .pdp-finish-current-text{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
  }
  .pdp-finish-current-kicker,
  .pdp-finish-current-name{
    display:block!important;
    font-size:12px!important;
    line-height:1.3!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }
  .pdp-finish-current-kicker{
    color:rgba(26,25,23,.56)!important;
  }
  .pdp-finish-current-name{
    color:rgba(26,25,23,.82)!important;
  }

  /* The switches. */
  .pdp-rail-second .pdp-finishes-box .pdp-finish-list{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    justify-content:stretch!important;
    gap:clamp(8px,1vw,12px)!important;
    margin:clamp(20px,2.4vw,30px) 0 0!important;
  }
  .pdp-rail-second .pdp-finishes-box .pdp-finish-item{
    width:100%!important;
    min-width:0!important;
    display:block!important;
    gap:0!important;
  }
  .pdp-rail-second .pdp-finishes-box .pdp-finish-swatch,
  .pdp-rail-second .pdp-finishes-box .pdp-finish-img{
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
    outline:1px solid transparent!important;
    outline-offset:3px!important;
    transition:outline-color .24s ease!important;
  }
  .pdp-rail-second .pdp-finishes-box .pdp-finish-item:hover .pdp-finish-swatch,
  .pdp-rail-second .pdp-finishes-box .pdp-finish-item:hover .pdp-finish-img{
    outline-color:rgba(26,25,23,.2)!important;
  }
  .pdp-rail-second .pdp-finishes-box .pdp-finish-item.is-selected .pdp-finish-swatch,
  .pdp-rail-second .pdp-finishes-box .pdp-finish-item.is-selected .pdp-finish-img{
    outline-color:rgba(26,25,23,.5)!important;
  }

  .pdp-finish-explore{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:clamp(24px,2.8vw,38px) 0 0!important;
    font-size:12px!important;
    line-height:1.3!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    color:rgba(26,25,23,.72)!important;
  }
  .pdp-finish-explore:hover{
    color:var(--dark)!important;
  }
  .pdp-finish-explore-ic{
    flex:0 0 auto!important;
    transition:transform .28s cubic-bezier(.16,1,.3,1)!important;
  }
  .pdp-finish-explore:hover .pdp-finish-explore-ic{
    transform:translateX(3px)!important;
  }
}

/* The two new buttons carry no button chrome at any width — on a phone
   .pdp-finish-item has to keep drawing exactly the swatch square it drew
   as a <div>. */
.pdp-finishes-box .pdp-finish-item,
.pdp-finish-explore{
  appearance:none!important;
  -webkit-appearance:none!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  font-family:inherit!important;
  text-align:left!important;
  cursor:none!important;
}

/* Phones and portrait tablets keep the v1.4.7 finishes square: the block
   wrapper disappears into the grid, and the two pieces the drawer added
   are not drawn at all. (v1.4.9: the drawers themselves are no longer
   hidden here — tapping a swatch opens them. See section 2 of the v1.4.9
   block at the end of this file.) */
@media(max-width:900px){
  .pdp-rail-second{
    display:contents!important;
  }
  .pdp-finish-current,
  .pdp-finish-explore{
    display:none!important;
  }
}


/* --- 3b. The finish drawers ------------------------------------------

   Two of them, both built on the basket drawer's geometry — the same
   right-hand slide, the same header line on the site header's own row,
   the same footer band — so the three read as one family. They are a
   little wider than the basket (470px against 430px) because the options
   grid is three swatches across; everything else is the basket's.

   Unlike the basket, the panel itself does not scroll: the header and
   the ADD TO ENQUIRY band are fixed and .wadi-finish-scroll takes the
   overflow, so ten finishes scroll under a footer that stays put.

   Both sit below the basket in the stack. They are closed before it
   opens, so the order never matters in practice, but if anything ever
   raced the basket would still be the drawer on top. */
.wadi-finish-drawer{
  position:fixed!important;
  inset:0!important;
  z-index:10230!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .36s ease!important;
}
.wadi-finish-drawer-info{
  z-index:10240!important;
}
.wadi-finish-drawer.open{
  opacity:1!important;
  pointer-events:auto!important;
}
.wadi-finish-backdrop{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  border:0!important;
  background:rgba(13,13,11,.18)!important;
  cursor:none!important;
}
.wadi-finish-panel{
  position:absolute!important;
  top:0!important;
  right:0!important;
  width:min(470px,calc(100vw - 22px))!important;
  height:100%!important;
  background:#fff!important;
  color:var(--dark)!important;
  border-left:1px solid rgba(26,25,23,.12)!important;
  transform:translateX(100%)!important;
  transition:transform .52s cubic-bezier(.16,1,.3,1)!important;
  display:flex!important;
  flex-direction:column!important;
  padding-top:var(--wadi-header-top,0px)!important;
  padding-right:clamp(22px,3vw,34px)!important;
  padding-bottom:clamp(12px,.4vw,22px)!important;
  padding-left:clamp(22px,3vw,34px)!important;
  overflow:hidden!important;
  outline:none!important;
  box-shadow:-24px 0 70px rgba(13,13,11,.08)!important;
}
.wadi-finish-drawer.open .wadi-finish-panel{
  transform:translateX(0)!important;
}
/* Same derivation as the basket's: the ADD TO ENQUIRY band lands on the
   site footer's own rule. See the 2026-08-12 note on .wadi-basket-panel. */
@media(min-width:901px){
  .wadi-finish-panel{
    padding-bottom:calc(var(--wadi-header-top) - 28px)!important;
  }
}

.wadi-finish-head{
  position:relative!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  height:var(--wadi-header-h)!important;
  padding:0!important;
  margin:0!important;
  border-bottom:1px solid rgba(26,25,23,.14)!important;
}
.wadi-finish-title{
  margin:0!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:500!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
.wadi-finish-title-sr{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0!important;
}
.wadi-finish-close,
.wadi-finish-back{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:rgba(26,25,23,.62)!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  cursor:none!important;
}
.wadi-finish-close:hover,
.wadi-finish-back:hover{
  color:var(--dark)!important;
}

.wadi-finish-scroll{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-width:thin;
  padding:clamp(18px,2.4vw,30px) 0 clamp(14px,1.8vw,24px)!important;
}

.wadi-finish-hero{
  width:100%!important;
  aspect-ratio:1/1!important;
  /* Capped against the viewport rather than left square: a 470px panel makes
     a square hero 402px tall, which on a laptop leaves one row of finishes
     under it. The cap keeps the first row and MORE INFO on screen without a
     scroll, and short windows shrink it further. */
  max-height:min(34vh,340px)!important;
  margin:0 0 clamp(20px,2.4vw,28px)!important;
  background:#F1EFEA!important;
  overflow:hidden!important;
}
.wadi-finish-hero .wadi-finish-hero-img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
/* The detail drawer opens on the material itself, so it is cropped to
   fill rather than fitted inside the frame. */
.wadi-finish-hero-full{
  aspect-ratio:3/2!important;
}
.wadi-finish-hero-full .wadi-finish-hero-img{
  object-fit:cover!important;
}
.wadi-finish-hero-fill{
  display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
}

.wadi-finish-heading{
  display:block!important;
  margin:0 0 clamp(14px,1.7vw,20px)!important;
  font-size:14px!important;
  line-height:1.3!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.66)!important;
}

.wadi-finish-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(18px,2.2vw,26px) clamp(12px,1.4vw,16px)!important;
  margin:0!important;
}
.wadi-finish-card{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:9px!important;
  margin:0!important;
}
.wadi-finish-card-media{
  appearance:none!important;
  -webkit-appearance:none!important;
  position:relative!important;
  display:block!important;
  width:100%!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  cursor:none!important;
}
.wadi-finish-card-media .pdp-finish-img,
.wadi-finish-card-media .pdp-finish-swatch{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  outline:1px solid transparent!important;
  outline-offset:3px!important;
  transition:outline-color .24s ease!important;
}
.wadi-finish-card-media:hover .pdp-finish-img,
.wadi-finish-card-media:hover .pdp-finish-swatch{
  outline-color:rgba(26,25,23,.2)!important;
}
.wadi-finish-card.is-selected .pdp-finish-img,
.wadi-finish-card.is-selected .pdp-finish-swatch{
  outline-color:rgba(26,25,23,.5)!important;
}
.wadi-finish-check{
  position:absolute!important;
  top:-8px!important;
  right:-8px!important;
  width:20px!important;
  height:20px!important;
  border-radius:50%!important;
  background:var(--dark)!important;
  color:#fff!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
}
.wadi-finish-card.is-selected .wadi-finish-check{
  display:flex!important;
}
.wadi-finish-card-name{
  display:block!important;
  font-size:12px!important;
  line-height:1.35!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.82)!important;
}
.wadi-finish-more{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:rgba(26,25,23,.6)!important;
  font-family:inherit!important;
  font-size:12px!important;
  line-height:1.3!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  cursor:none!important;
}
.wadi-finish-more span{
  border-bottom:1px solid rgba(26,25,23,.34)!important;
  padding-bottom:2px!important;
}
.wadi-finish-more:hover{
  color:var(--dark)!important;
}

.wadi-finish-pane[hidden]{
  display:none!important;
}
.wadi-finish-pane-name{
  margin:0 0 clamp(12px,1.5vw,18px)!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:14px!important;
  line-height:1.3!important;
  font-weight:500!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--dark)!important;
}
.wadi-finish-pane-note{
  margin:0 0 clamp(24px,3vw,38px)!important;
  font-size:12px!important;
  line-height:1.62!important;
  letter-spacing:.04em!important;
  color:rgba(26,25,23,.72)!important;
}
.wadi-finish-spec{
  margin:0!important;
  padding:0!important;
  border-top:1px solid rgba(26,25,23,.16)!important;
}
.wadi-finish-spec-row{
  display:grid!important;
  grid-template-columns:minmax(96px,auto) minmax(0,1fr)!important;
  column-gap:14px!important;
  align-items:baseline!important;
  padding:9px 0!important;
  border-bottom:1px solid rgba(26,25,23,.14)!important;
}
.wadi-finish-spec-row dt,
.wadi-finish-spec-row dd{
  margin:0!important;
  font-size:12px!important;
  line-height:1.45!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.72)!important;
}
.wadi-finish-spec-row dd{
  text-align:right!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none;
}

.wadi-finish-foot{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:clamp(12px,1.8vw,20px)!important;
  /* 8px, like the basket's, so the rule lands on the site footer's. */
  padding-top:8px!important;
  border-top:1px solid rgba(26,25,23,.08)!important;
}
.wadi-finish-foot-current{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.wadi-finish-foot-media{
  flex:0 0 44px!important;
  width:44px!important;
  aspect-ratio:4/3!important;
  overflow:hidden!important;
  background:#E7DFCF!important;
}
.wadi-finish-foot-media .pdp-finish-img,
.wadi-finish-foot-media .pdp-finish-swatch{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
}
.wadi-finish-foot-text{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}
.wadi-finish-foot-kicker,
.wadi-finish-foot-name{
  display:block!important;
  font-size:12px!important;
  line-height:1.3!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.wadi-finish-foot-kicker{
  color:rgba(26,25,23,.56)!important;
}
.wadi-finish-foot-name{
  color:var(--dark)!important;
}
.wadi-finish-add{
  appearance:none!important;
  -webkit-appearance:none!important;
  flex:0 0 auto!important;
  min-height:44px!important;
  padding:0 clamp(16px,2vw,26px)!important;
  border:1px solid var(--dark)!important;
  background:var(--dark)!important;
  color:#fff!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:12px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  cursor:none!important;
  transition:background .25s ease,color .25s ease!important;
}
.wadi-finish-add:hover{
  background:#fff!important;
  color:var(--dark)!important;
}
.wadi-finish-close:focus-visible,
.wadi-finish-back:focus-visible,
.wadi-finish-more:focus-visible,
.wadi-finish-add:focus-visible,
.wadi-finish-card-media:focus-visible,
.pdp-finish-item:focus-visible,
.pdp-finish-explore:focus-visible{
  outline:1px solid rgba(26,25,23,.65)!important;
  outline-offset:4px!important;
}


/* --- 4. The phone carousel's arrows get a hit area --------------------

   Reported: a tap near an arrow opens the lightbox instead of paging,
   because the arrow's box is only as big as the chevron drawn inside it
   — 26x72 on a phone, 22x60 below 520px — and everything around it is
   the slide, which is the lightbox trigger.

   The box roughly doubles. The chevron does not: it is drawn by the
   ::before/::after pair at the button's centre, and those keep the
   heights the earlier passes gave them (27px, then 23px). So the arrow
   looks identical and the target around it is 56x116 rather than 26x72.

   The left offsets are the arithmetic that keeps it looking identical:
   the chevron sat at 8 + 26/2 = 21px from the edge and now sits at
   -7 + 56/2 = 21px, and below 520px at 8 + 22/2 = 19 = -5 + 48/2. The
   overhang is transparent and falls in the page margin outside the
   frame, so nothing is clipped and nothing else moves. */
@media(max-width:900px){
  .pdp-image-nav{
    width:56px!important;
    height:116px!important;
  }
  .pdp-image-prev{
    left:-7px!important;
  }
  .pdp-image-next{
    right:-7px!important;
  }
}

@media(max-width:520px){
  .pdp-image-nav{
    width:48px!important;
    height:96px!important;
  }
  .pdp-image-prev{
    left:-5px!important;
  }
  .pdp-image-next{
    right:-5px!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.4.9) — five corrections to v1.4.8
   ══════════════════════════════════════════════════════════════════════
   1. The cursor stays visible over the finish drawers.
   2. The finish drawers work on a phone.
   3. The phone carousel's arrows take their colour from the photograph.
   4. The footer copyright is legible on a 32" screen.
   5. The PDP intro holds the whole viewport, so only the hero shows
      through its blur.
   ────────────────────────────────────────────────────────────────────── */


/* --- 1. The cursor over the finish drawers ---------------------------

   The site draws its own cursor as two fixed dots at z-index 9999/9998 and
   hides the real one. Any drawer sits above that, so the 2026-07-30 basket
   pass lifts the dots to 14050/14049 while it is open. The finish drawers
   are new and were not in that selector list, so opening one left the dots
   underneath it and the pointer vanished. Same treatment, same numbers. */
body.wadi-finish-open #cur{
  z-index:14050!important;
  opacity:1!important;
}
body.wadi-finish-open #curR{
  z-index:14049!important;
  opacity:1!important;
}
body.wadi-finish-open .wadi-finish-drawer{
  cursor:none!important;
}


/* --- 2. The finish drawers on a phone --------------------------------

   v1.4.8 shipped them desktop-only: display:none below 901px and the rail
   switches disabled. Both are lifted — the display:none rule is gone from
   the block above and the script no longer gates on width — so tapping any
   swatch in the phone's finishes square opens the same two drawers.

   The panel is the basket's width, which on a phone is the screen less
   22px, and the options grid drops from three across to two below 560px:
   at 375px three columns leave 95px for a swatch and a name like
   "OIL RUBBED BRONZE [WAXED]", which breaks into five lines. Two columns
   give 148px and two lines.

   The phone's finishes square itself is untouched — no current-material
   line, no EXPLORE, same 2x2 of swatches inside the same bordered box. */
@media(max-width:900px){
  .wadi-finish-scroll{
    padding-top:clamp(16px,4vw,24px)!important;
    padding-bottom:clamp(12px,3vw,18px)!important;
  }
  .wadi-finish-hero{
    max-height:min(30vh,300px)!important;
  }
  .wadi-finish-add{
    min-height:40px!important;
    padding:0 clamp(14px,4vw,20px)!important;
  }
}

@media(max-width:560px){
  .wadi-finish-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .wadi-finish-foot-media{
    flex:0 0 36px!important;
    width:36px!important;
  }
}

/* The theme hands the native cursor back wherever there is no hover-capable
   pointer (the 2026-08-12 touch block). That block sits above this file's
   v1.4.8 section, so the drawers' own cursor:none out-ranked it on a touch
   screen. Restated here, after them. */
@media (hover:none), (pointer:coarse){
  .wadi-finish-backdrop,
  .wadi-finish-close,
  .wadi-finish-back,
  .wadi-finish-more,
  .wadi-finish-add,
  .wadi-finish-card-media,
  .pdp-finish-item,
  .pdp-finish-explore,
  .pdp-enquire-dock .pdp-enquire-btn{
    cursor:auto!important;
  }
}


/* --- 3. Arrows that can be seen on the picture behind them -----------

   The default stays white with a dark shadow, which is right on a dark
   photograph. site.js measures the strip of the current slide each arrow
   actually covers — undoing the object-fit:cover crop first — and adds
   .is-on-light when that strip is pale. Then the arrow is drawn in the
   site's ink with a light halo instead, which is the same treatment
   inverted. An image that cannot be measured (cross-origin, or not yet
   loaded) never gets the class and keeps the white. */
@media(max-width:900px){
  .pdp-image-nav.is-on-light{
    color:rgba(26,25,23,.82)!important;
    filter:drop-shadow(0 1px 7px rgba(255,255,255,.55))!important;
  }
  .pdp-image-nav.is-on-light:hover{
    color:var(--dark)!important;
  }
}


/* --- 4. The footer copyright on a very large screen -------------------

   Reported from a 32" 4K monitor at 100%: the copyright reads as "sand
   particles". It is 8px — the smallest type in the theme — set at 32%
   black, and the theme's type is fixed px throughout, so on a 3840px
   viewport it is a third of the apparent size it has on a laptop while
   everything around it is merely small.

   The three items in the footer row scale together from 1920px up, so the
   row keeps its proportions rather than the copyright overtaking PRIVACY:

     viewport   copyright   privacy   icons     (all unchanged below 1920)
      1920px      8.1px      10.1px    16.2px
      2560px     10.8px      13.4px    21.5px
      3440px     14.4px      18.0px    28.9px
      3840px     16.0px      20.0px    32.0px   (capped)

   The floors mean nothing changes at 1920 or below — max() picks the
   existing size until the viewport is wider than that — and the caps stop
   it growing past 2x on anything wider than a 4K panel. Colour, tracking
   and weight are untouched. */
@media(min-width:1921px){
  #wadi-footer .ft-copy{
    font-size:min(16px,max(8px,.417vw))!important;
  }
  #wadi-footer .ft-privacy{
    font-size:min(20px,max(10px,.521vw))!important;
  }
  /* The icon's box and the artwork inside it scale by the same factor, so
     the 16px box holding an 18px svg that ships today is reproduced exactly
     at 1920 and grows from there — no step at the breakpoint. */
  #wadi-footer .ft-social{
    width:min(32px,max(16px,.834vw))!important;
    height:min(32px,max(16px,.834vw))!important;
  }
  #wadi-footer .ft-social svg{
    width:min(36px,max(18px,.938vw))!important;
    height:min(36px,max(18px,.938vw))!important;
  }
}


/* --- 5. The PDP intro holds one viewport -----------------------------

   Reported from the same 32" screen: the blurred hero shows two pieces
   instead of one.

   There is only ever one hero image. .pdp-hero-meta is the intro's glass —
   position:fixed, inset:0, a translucent wash with a backdrop-filter over
   the WHOLE viewport — and .pdp-hero-sec is only as tall as its own
   content: the header offset plus an image capped at 645px wide, so about
   1020px for a 3:4 photograph. On a 900px-tall laptop the section is
   taller than the window and the glass covers nothing but the hero, which
   is what it was drawn against. On a 2160px-tall panel the section ends
   1100px above the fold, the editorial gallery below it is already on
   screen — and at that width the gallery is drawn at the same 645px as the
   hero — so its first frame sits under the same blur and reads as a second
   copy of the piece.

   A full-viewport minimum on the section puts the next one back below the
   fold, which is what the intro assumes everywhere else. --wadi-vh-px is
   the height the device actually reports (set in wp_head before first
   paint, see wadi_viewport_metrics) with svh as the fallback; on a window
   shorter than the hero the minimum is inert and nothing moves. The intro
   itself is driven by wheel and touch travel, not by scroll position, so
   its release is unaffected. Desktop only — the hero is display:none
   below 901px. */
@media(min-width:901px){
  .pdp-hero-sec,
  .admin-bar .pdp-hero-sec{
    min-height:var(--wadi-vh-px,100svh)!important;
    box-sizing:border-box!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.5.0) — five corrections to v1.4.9
   ══════════════════════════════════════════════════════════════════════
   1. The phone's finishes panel is the desktop panel.
   2. The PDP intro fills a very large screen instead of sitting in the
      top quarter of it.
   3. The intro's title is centred in the space the reader can see.
   4. PDP numerals read at the size of the type around them.
   5. SPECIFICATIONS and FINISHES take the product title's ink and weight.
   ────────────────────────────────────────────────────────────────────── */


/* --- 1. The phone's finishes panel ------------------------------------

   v1.4.8 kept the phone on the old bordered square — a 2x2 of 33px
   swatches in a boxed panel — because the ask then was to leave mobile
   alone. It now gets the desktop composition: the FINISHES heading, the
   rule under it, the current material, three switches across and EXPLORE,
   with no border and no box.

   The panel still lives in the narrow right-hand column of the phone
   grid, which is 134px at 375px wide — the same width as SPECIFICATIONS
   directly above it, so "as wide as the specs panel" holds here too. The
   three switches come out 39x29px each. Every measurement below is the
   desktop rule with a smaller clamp; nothing new is invented for the
   phone.

   The one thing kept from the old panel is its top margin, which is what
   separates it from the block above it in that column. */
@media(max-width:900px){
  .pdp-rail-second .pdp-finishes-box{
    padding:0!important;
    border:0!important;
  }

  .pdp-rail-second .pdp-finishes-box .pdp-finishes-lb{
    display:block!important;
    margin:0 0 clamp(12px,3.4vw,18px)!important;
    padding:0!important;
    border-bottom:0!important;
  }

  .pdp-finish-current{
    display:grid!important;
    grid-template-columns:clamp(34px,9.6vw,44px) minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:clamp(8px,2.4vw,11px)!important;
    padding-top:clamp(9px,2.6vw,13px)!important;
    border-top:1px solid rgba(26,25,23,.16)!important;
  }
  .pdp-finish-current-media{
    display:block!important;
    width:100%!important;
    aspect-ratio:4/3!important;
    overflow:hidden!important;
    background:#E7DFCF!important;
  }
  .pdp-finish-current-media .pdp-finish-img,
  .pdp-finish-current-media .pdp-finish-swatch{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
  }
  .pdp-finish-current-text{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
  }
  .pdp-finish-current-kicker,
  .pdp-finish-current-name{
    display:block!important;
    font-size:12px!important;
    line-height:1.25!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
  }
  .pdp-finish-current-kicker{
    color:rgba(26,25,23,.56)!important;
  }
  .pdp-finish-current-name{
    color:rgba(26,25,23,.82)!important;
  }

  .pdp-rail-second .pdp-finishes-box .pdp-finish-list{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    justify-content:stretch!important;
    gap:clamp(6px,1.9vw,9px)!important;
    margin:clamp(14px,3.8vw,20px) 0 0!important;
  }
  .pdp-rail-second .pdp-finishes-box .pdp-finish-item{
    width:100%!important;
    min-width:0!important;
    display:block!important;
    gap:0!important;
  }
  .pdp-rail-second .pdp-finishes-box .pdp-finish-swatch,
  .pdp-rail-second .pdp-finishes-box .pdp-finish-img{
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
    outline:1px solid transparent!important;
    outline-offset:2px!important;
  }
  .pdp-rail-second .pdp-finishes-box .pdp-finish-item.is-selected .pdp-finish-swatch,
  .pdp-rail-second .pdp-finishes-box .pdp-finish-item.is-selected .pdp-finish-img{
    outline-color:rgba(26,25,23,.5)!important;
  }

  .pdp-finish-explore{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    margin:clamp(16px,4.4vw,24px) 0 0!important;
    font-size:12px!important;
    line-height:1.3!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
    color:rgba(26,25,23,.72)!important;
  }
  .pdp-finish-explore-ic{
    flex:0 0 auto!important;
    width:13px!important;
    height:13px!important;
  }
}


/* --- 2. The intro on a very large screen -----------------------------

   v1.4.9 gave .pdp-hero-sec a full-viewport minimum so nothing else could
   show through the intro's blur. That fixed the second image but left the
   consequence the studio then reported: the picture is still capped at
   645px wide, so on a 32" panel it sits in the top quarter of the screen
   with white under it.

   The cap is what has to move. Above this breakpoint the section is sized
   from the height instead: --pdp-hero-avail is the room between the
   header and the bottom of the window, the image is allowed to grow to
   fill it, and max-height holds it there. Because the browser recomputes
   the width from a constrained height on a replaced element, this works
   for whatever shape the photograph is — a tall piece fills the height
   and takes the width it needs, a wide one is held by the width instead.
   The 645px floor means the image can only ever get bigger than it is
   today, never smaller.

     viewport      available    picture (3:4)      of the window
      2560x1440      1252px      939 x 1252px          87%
      3440x1440      1252px      939 x 1252px          87%
      3840x2160      1972px     1479 x 1972px          91%

   The gate is deliberately two-sided. min-height:1200px excludes every
   laptop (900 and 1080 are the common ones) and a landscape iPad at 1024;
   min-width:1500px excludes a portrait iPad, which is 1366 tall but only
   1024 wide. So the layouts the studio has signed off — phones, both iPad
   orientations, and every laptop — render exactly as they do in v1.4.9,
   and only a desktop panel bigger than both is affected. */
@media(min-width:1500px) and (min-height:1200px){
  .pdp-hero-sec{
    --pdp-hero-pad:clamp(12px,2vw,24px);
    --pdp-hero-avail:calc(var(--wadi-vh-px,100svh) - var(--wadi-header-offset) - var(--pdp-hero-pad) - var(--pdp-hero-pad));
    --pdp-media-width:min(calc(100vw - 96px),max(645px,calc(var(--pdp-hero-avail) * .8)))!important;
    padding-bottom:var(--pdp-hero-pad)!important;
  }
  .pdp-hero-img{
    max-height:var(--pdp-hero-avail)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* --- 3. The intro's title, centred in what the reader can see --------

   .pdp-hero-meta is fixed at inset:0 and centres its content on the
   VIEWPORT, but the top var(--wadi-header-offset) of that viewport is
   behind the fixed header — so the title is drawn half the header's
   height above the middle of the space it is actually read in. That is
   140px of offset, i.e. 70px high: 3% of a 32" panel, where nobody
   notices, and 11% of a 1366x768 laptop, where the studio did.

   The glass keeps inset:0 — the blur still covers the whole window, which
   is the point of it — and the centring is corrected with padding, so the
   title now sits on the middle of the visible area at every height. */
.pdp-hero-meta{
  padding-top:var(--wadi-header-offset,0px)!important;
  box-sizing:border-box!important;
}


/* --- 4. PDP numerals ---------------------------------------------------

   WITHDRAWN 2026-09-03 (CDX v1.5.1). This block raised the rail's numerals
   to calc(1em + 2px) so PT Serif's digits matched Playfair's caps. The
   studio has since settled the PDP on two sizes and two only — 14px for
   the section headings, 12px for everything else, numerals included — so
   the numerals go back to the 1em they inherit from .wadi-num. The
   title exceptions are kept: a product name with a number in it follows
   its own heading, which was true before this block and stays true. */
@media(min-width:901px){
  .pdp-product-title .wadi-num,
  .pdp-hero-title .wadi-num{
    font-size:inherit!important;
  }
}


/* --- 5. SPECIFICATIONS and FINISHES in the title's ink ----------------

   Both headings were 66% black at the body weight, which put them behind
   the values they head. They take the product title's colour and weight —
   the same family and size they already had — so the two sides of the
   gallery are headed the same way. */
.pdp-info-panel .pdp-side-heading,
.pdp-info-panel .pdp-download-heading,
.pdp-info-panel .pdp-rail-second .pdp-finishes-box .pdp-finishes-lb{
  color:var(--dark)!important;
  font-weight:800!important;
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.5.1) — the product page settles on
   two sizes, one ink, and one specification list
   ══════════════════════════════════════════════════════════════════════
   1. Two sizes on the PDP: 14px headings, 12px everything else — the
      numerals included, which withdraws the v1.5.0 +2px rule above.
   2. The rail's type is full black rather than three shades of grey.
   3. The inch mark is drawn a size up.
   The fourth change — SPECIFICATIONS as one list, ordered width, height,
   depth, weight, colour temp, lead time — is in single-product.php: the
   three-across dimension grid is gone and every measurement is an ordinary
   row, so no CSS was needed for it beyond retiring the grid's spacing.
   ────────────────────────────────────────────────────────────────────── */


/* --- 1. Two sizes, and only two ---------------------------------------

   The rail was already 14/12; the two things that were not are the
   description opposite it (11px, set in the 2026-07-28 pass) and the
   ADD TO ENQUIRY button (10px, from the 2026-08-04 pass). Both come to
   12px, so every word on the page below the section headings is one size.

   The button is measured, not guessed: "ADD TO ENQUIRY" at 12px Playfair
   with .02em tracking is 118px, plus 28px of padding, inside a 166px
   minimum — so it fills more of the button it already had and does not
   grow it. */
@media(min-width:901px){
  .pdp-editorial-sec .pdp-detail-intro,
  .pdp-editorial-sec .pdp-readmore .pdp-detail-intro{
    font-size:12px!important;
  }
  .pdp-enquire-dock .pdp-enquire-btn{
    font-size:12px!important;
  }
  /* Restated so the size cannot drift with the surrounding em: the rail is
     12px and its numerals are 12px, full stop. */
  .pdp-info-panel .wadi-num,
  .pdp-info-panel .pdp-info-row dt,
  .pdp-info-panel .pdp-info-row dd,
  .pdp-info-panel .pdp-download-row,
  .pdp-info-panel .pdp-download-row dt,
  .pdp-info-panel .pdp-download-row dd,
  .pdp-info-panel .pdp-finish-current-kicker,
  .pdp-info-panel .pdp-finish-current-name,
  .pdp-info-panel .pdp-finish-explore,
  /* The label INSIDE the button, not just the button: the 2026-07-17 rule
     sizes `.pdp-editorial-sec span` as well as `button`, so sizing only the
     button left its own <span> child at 10px. */
  .pdp-info-panel .pdp-finish-explore-lb{
    font-size:12px!important;
  }
  .pdp-info-panel .pdp-side-heading,
  .pdp-info-panel .pdp-download-heading,
  .pdp-info-panel .pdp-rail-second .pdp-finishes-box .pdp-finishes-lb,
  .pdp-product-title{
    font-size:14px!important;
  }
}


/* --- 2. The rail in black ---------------------------------------------

   The information rail carried three greys — .72 on the spec rows and the
   downloads, .82 on the current finish, .56 on its kicker — which on a
   white page read as three different weights of the same 12px type. All
   of it is the page's ink now, matching the headings above them (v1.5.0)
   and the product title opposite. The description opposite comes with
   them — it is the page's other body copy, and "other text" in the
   request covers it — so the whole editorial view is one ink. */
.pdp-editorial-sec .pdp-detail-intro,
.pdp-editorial-sec .pdp-readmore .pdp-detail-intro,
.pdp-info-panel .pdp-info-row dt,
.pdp-info-panel .pdp-info-row dd,
.pdp-info-panel .pdp-info-row dd a,
.pdp-info-panel .pdp-download-row,
.pdp-info-panel .pdp-download-row dt,
.pdp-info-panel .pdp-download-row dd,
.pdp-info-panel .pdp-finish-current-kicker,
.pdp-info-panel .pdp-finish-current-name,
.pdp-info-panel .pdp-finish-explore{
  color:var(--dark)!important;
}


/* --- 3. The inch mark, a size up --------------------------------------

   The prime is a quote glyph: in Playfair it is drawn small and high on
   the line, so beside a 12px numeral it read as a stray tick rather than a
   unit. It is wrapped by wadi_pdp_measure_html() — on the escaped output,
   so only the mark the template put there can ever be wrapped — and set a
   third larger.

   line-height:0 is what keeps the row the height it was. The rail's rows
   are set with a unitless line-height, which a child inherits as a NUMBER
   and multiplies by its OWN size — so at 1.34em the mark's line box grew
   with it and pushed the three dimension rows 6px taller than the three
   below them. Zeroing it collapses the span's inline box onto the
   baseline: the glyph still draws at its full size, but it no longer has
   a say in how tall the line is, so every row and every rule stays where
   it was. Measured: all six rows 32.4px, before and after. */
.pdp-info-panel .pdp-inch{
  font-size:1.34em!important;
  line-height:0!important;
  letter-spacing:0!important;
  vertical-align:baseline!important;
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.5.2) — FINISHES sits on the menu line
   ══════════════════════════════════════════════════════════════════════

   Reported from a phone: the finishes drawer's heading sits above where
   BASKET sits in the basket drawer.

   It is the 2026-09-01 (v1.4.4) rule, which the finish drawers were
   written after and never picked up. Its reasoning applies here word for
   word: below 901px the site header stops being one horizontal bar and
   becomes a column — the logo on its own row, the menu row beneath it —
   so a title centred in a head the height of the whole header points at
   the middle of that column rather than at the menu.

   .wadi-basket-head answers that by reproducing the header's own stack as
   padding: the logo row plus the gap under it above, whatever is left
   under the menu row below. What remains between them is exactly the menu
   row, and align-items:center puts the title in it. The same three
   variables are used here, so the two drawers cannot drift apart from the
   header or from each other — and the ≤520px block that shrinks the logo
   and the gap moves all three together.

   Both drawers are covered: the options drawer's FINISHES / CLOSE and the
   detail drawer's BACK / CLOSE now share the basket's line. The head keeps
   its height, so the rule beneath it still lands on the header's own rule,
   which is what the 2026-08-12 pass was for.

   Only the vertical placement moves. The panel keeps the width it has —
   min(470px, 100vw - 22px) against the basket's full-width-under-700px —
   so the two headings start at different distances from the screen edge,
   each 22px and 18px inside its own panel respectively. */
@media(max-width:900px){
  .wadi-finish-head{
    align-items:center!important;
    padding-top:calc(var(--wadi-hdr-logo-h) + var(--wadi-hdr-nav-gap))!important;
    padding-bottom:calc(
      var(--wadi-header-h)
      - var(--wadi-hdr-logo-h)
      - var(--wadi-hdr-nav-gap)
      - var(--wadi-hdr-nav-row)
      - 1px
    )!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.5.3) — the product title joins the
   SPECIFICATIONS line, and every uppercase heading takes its tracking
   ══════════════════════════════════════════════════════════════════════

   Two changes, reported together from a desktop screenshot of CLOUD 18.

   1. The product title sat 31px below SPECIFICATIONS, so the editorial
      view started on two different lines depending on which side you
      read first.
   2. The three headings on that page carried three different letter
      spacings — SPECIFICATIONS at .14em, FINISHES at .18em, the product
      title at .02em — which is what made them read as three unrelated
      labels rather than one row of section heads.
   ────────────────────────────────────────────────────────────────────── */


/* --- 1. One line for the title and SPECIFICATIONS ----------------------

   The rail and the description column are two cells of the same grid and
   have always started at the same y. What separated the headings inside
   them was the panels' own padding: the 2026-07-28 pass gave the left
   column clamp(88px,8vw,124px) and the rail clamp(52px,5.6vw,94px), a
   gap of 31px at 1300px and 30px at 1440px — the offset in the report.

   The left column takes the rail's padding, so both headings start at the
   same distance from the top of the section at every width.

   The line-height goes with it. Both headings are 14px Playfair at 800,
   but the title was set 1.1 against the rail's 1.3: identical box tops
   with different leading puts the two BASELINES 1.4px apart, which at
   14px is visible as the title sitting fractionally high. At 1.3 the two
   line boxes are the same 18.2px and the baselines coincide exactly.

   What does NOT move, and was the thing to check: the line drawing
   opposite FINISHES. .pdp-detail-drawings is position:absolute with
   top:var(--pdp-side-align-top), and an absolutely positioned child is
   laid out against its containing block's PADDING box — whose top edge is
   the panel's top edge, not the top of its content. Changing padding-top
   therefore cannot move it. Measured at 901 / 960 / 1024 / 1112 / 1180 /
   1280 / 1366 / 1440 / 1536 / 1680 / 1728 / 1920 / 2200: the drawing and
   FINISHES stay on the same line at all thirteen, the section keeps its
   height to the pixel, and title-vs-SPECIFICATIONS is 0px at every one.

   Below 901px nothing here applies. The phone and portrait-tablet layout
   deliberately stacks the description above the rail — .pdp-copy-block is
   grid-row 2 across both columns, .pdp-spec-box is grid-row 3 in the
   right-hand column — so there is no shared line to sit on, and both
   panels are already padding:0 there. */
@media(min-width:901px){
  .pdp-detail-panel{
    padding-top:clamp(52px,5.6vw,94px)!important;
  }
  .pdp-product-title{
    line-height:1.3!important;
  }
}


/* --- 2. One tracking for the uppercase headings -----------------------

   SPECIFICATIONS is the reference at .14em. It goes to the headings the
   theme itself names as headings — the roster in the 2026-07-17
   typography lock, `h1..h6` plus the named title classes — but only to
   the ones set in CAPS, which is every heading this change can sensibly
   reach:

     .hero-statement-title  .02em -> .14em
     .about-q               .02em -> .14em
     .object-name           .02em -> .14em
     .finish-name           .24em -> .14em   (.18em under 1100px)
     .pdp-finishes-lb       .18em -> .14em
     .pdp-product-title     .02em -> .14em
     .info-person-text h2   0     -> .14em

   The mixed-case display serif in the same roster is left alone on
   purpose: .hero-h, .hero-h-sm, .pg-hero-h, .sh, .pdp-hero-title,
   .coll-hero-h, .founder-name, .step-title, .pc-name, .team-name,
   .pdp-related-name and .wadi-modal-title are set as prose at -.01em, and
   tracking lower-case Playfair out to .14em spaces the letters of a word
   apart rather than the words of a line — it is a caps device. Those
   lines would also re-wrap, which is a different change from this one.

   .pdp-finish-name is left out for the same reason from the other
   direction: it is a swatch label, and the theme lists it with the body
   copy, not with the headings. It keeps the .18em it shares with the rest
   of the rail's labels. */
.hero-statement-title,
.about-q,
.object-name,
.objects-page .object-name,
.finish-name,
.pdp-product-title,
.pdp-side-heading,
.pdp-download-heading,
.pdp-finishes-lb,
.pdp-info-panel .pdp-side-heading,
.pdp-info-panel .pdp-finishes-lb,
.pdp-info-panel .pdp-rail-second .pdp-finishes-box .pdp-finishes-lb,
.info-person-text h2,
body .info-person-text h2{
  letter-spacing:.14em!important;
}

/* The one place .14em does not fit, restated so this block cannot undo
   it. On a 360px phone the rail is ~112px wide and SPECIFICATIONS needs
   137px at .14em against the 128px it has; the 2026-09-01 pass measured
   the fit and dropped it to .08em there. That exception is about width,
   not about consistency, and it still holds. */
@media(max-width:520px){
  .pdp-info-panel .pdp-side-heading,
  .pdp-info-panel .pdp-download-heading,
  .pdp-info-panel .pdp-finishes-lb,
  /* Matched selector-for-selector against the block above. Both are
     !important, so the cascade is decided on specificity, not order: the
     four-class form there would otherwise beat a two-class exception here
     and put FINISHES back to .14em on the one width the exception exists
     for. */
  .pdp-info-panel .pdp-rail-second .pdp-finishes-box .pdp-finishes-lb,
  .pdp-info-panel .pdp-rail-second .pdp-download-box .pdp-download-heading{
    letter-spacing:.08em!important;
  }
}

/* The other place .14em does not fit, found the same way. On the info page
   the two person columns are minmax(170px,220px) inside a 980px row, so
   between 901px and roughly 1200px they sit on their 170px floor. The
   longest name in the studio list, VINEESHA PITHADIYA, is 146px untracked;
   .14em adds 1.96px to each of its 18 characters and asks for 181px of the
   170px there is, so the name broke onto a second line across the whole
   laptop range — 1024 and 1180 included. At .08em the same 18 characters
   ask for 166px and it stays on one line with 4px to spare.

   The window closes at 1240px rather than at the 1200px where it measures
   as fixed: at 1201px the name fits by a single pixel, which is inside the
   variance between how one browser and the next rounds a glyph advance.
   At 1241px it has 7px, which is a real fit. Above that the column has
   grown off its floor and .14em is what the heading gets, the same as
   every other heading on the site. */
@media(min-width:901px) and (max-width:1240px){
  .info-person-text h2,
  body .info-person-text h2{
    letter-spacing:.08em!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-03 (CDX v1.5.4) — ENQUIRE NOW comes out from
   over the photograph, and reads in the page's own ink
   ══════════════════════════════════════════════════════════════════════

   Four changes, all from one read of the product page.

   1. The sticky button is ENQUIRE NOW rather than ADD TO ENQUIRY, on
      desktop and on the phone bar. That is `pdp_enquire_now` in
      translations.php — a new key, because the two finish drawers keep
      ADD TO ENQUIRY and mean it.
   2. Its text is the page's full ink, and the button is a little taller.
   3. It comes to rest BELOW the last image instead of on top of it.
   4. EXPLORE moves up 5px.
   ────────────────────────────────────────────────────────────────────── */


/* --- 1. The button rests below the stack, not on it -------------------

   On desktop the gallery is not a carousel — `.pdp-image-nav` is
   display:none above 901px and `.pdp-image-track` is a grid, so the
   middle column is a vertical STACK of every image. The carousel and its
   arrows are the phone layout. So "the last image" is the bottom edge of
   .pdp-image-window, and the button was resting 13px above it: the dock
   was placed in the window's own grid cell (grid-row 1 / grid-column 1)
   at height:100% with padding-bottom:clamp(8px,.9vw,14px), which put its
   resting place inside the photograph by the button's own height again.

   Sharing that cell was deliberate — it is what let the dock give sticky
   a full-column track without adding height to the section. Both things
   are still wanted, so the dock now spans TWO rows instead of one: the
   image stack, and a new row exactly the height of the button. Spanning
   is what keeps the sticky track full-length; the second row is what puts
   the resting place under the photograph.

   The row gap does the spacing. `.pdp-scroll-stack`'s own gap has never
   separated the images from each other — they are children of
   .pdp-image-track, which carries its own gap — so above 901px the
   stack's row-gap applies to exactly one thing, the space between the
   last image and the button, and can be set to suit it without touching
   the space between images.

   The section grows by that row plus that gap and nothing else. The line
   drawing and FINISHES do not move: both are position:absolute against
   their own panels' padding boxes, measured from the panel's top edge,
   so a taller middle column cannot reach them. */
@media(min-width:901px){
  .pdp-editorial-sec{
    --pdp-enquire-h:34px;
    --pdp-enquire-drop:clamp(14px,1.3vw,20px);
  }

  .pdp-scroll-stack.pdp-image-carousel{
    grid-template-rows:auto var(--pdp-enquire-h)!important;
    row-gap:var(--pdp-enquire-drop)!important;
  }

  .pdp-scroll-stack.pdp-image-carousel .pdp-image-window{
    grid-row:1!important;
  }

  .pdp-enquire-dock{
    /* 1 / 3 — from the start of the image row to the end of the button
       row, the gap between them included. */
    grid-row:1 / 3!important;
    /* The padding was what held the button off the bottom of the old
       one-row box. The second row is that space now, and it is real. */
    padding:0!important;
  }

  .pdp-enquire-dock .pdp-enquire-btn{
    /* Was 28px. The label is shorter than ADD TO ENQUIRY, so the 166px
       minimum still holds it on one line with room to spare. */
    min-height:var(--pdp-enquire-h)!important;
    /* Was rgba(26,25,23,.82) — the same three-quarter grey the rail
       carried before v1.5.1 put it in full ink. The button is the last
       thing on the page still saying it quietly. */
    color:var(--dark)!important;
  }
}


/* --- 2. EXPLORE, five pixels up --------------------------------------

   The button has two margins in this file and they are easy to mix up:
   clamp(24px,2.8vw,38px) in the v1.4.8 desktop block, and
   clamp(16px,4.4vw,24px) in the v1.4.9 block that puts it back on phones.
   The second reads like the later, winning rule — it IS later in the file
   — but it sits inside @media(max-width:900px), so above 901px the
   desktop clamp is what draws. Measured on v1.5.3: 25.2px at 901,
   28.7px at 1024, 38px at 1440 — the 2.8vw curve, not the 4.4vw one.

   So each width band keeps its own clamp and has 5px taken off it. The
   button moves with the viewport exactly as it did and is 5px higher at
   every width, rather than jumping to one fixed value. Both bands are
   done because it is one control: on a phone the finishes square shows
   the same EXPLORE, and leaving that one where it was would have made
   the spacing above it differ by 5px between layouts. */
@media(min-width:901px){
  .pdp-finish-explore{
    margin-top:calc(clamp(24px,2.8vw,38px) - 5px)!important;
  }
}
@media(max-width:900px){
  .pdp-finish-explore{
    margin-top:calc(clamp(16px,4.4vw,24px) - 5px)!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-04 (CDX v1.5.5) — the objects page fits an iPad
   ══════════════════════════════════════════════════════════════════════

   Reported with screenshots from an iPad Air 10.9" in both orientations,
   and the same fault on an iPad Pro 12.9" (5th gen): the grid is a small
   island marooned in white, the two columns do not line up, and the
   feature card runs off the bottom of the screen.

   The 2026-08-28 (v1.4.1) block above settled that tablets use one of the
   two layouts the site already maintains rather than a third of their own,
   and that stands — nothing here adds a tablet layout. What it got wrong is
   which tablet lands where: "a portrait iPad (744–900px) now gets [the
   mobile grid]". Safari on iPadOS requests desktop sites by default, so a
   portrait iPad reports a layout viewport of ~980–1024px, not 820. Every
   iPad, in both orientations, is therefore in the >=901px branch — the
   desktop grid — and the two faults below are what that branch does at a
   tablet's proportions. Measured on v1.5.4:

     viewport      strip   media      set inner    of width   off-centre
     1024 x 1250   1124    233 x 350  506.7 x 800    49.5%       0px
     1024 x 1339   1213    233 x 350  506.7 x 800    49.5%       0px
     1180 x  700    574    145 x 217  417.9 x 534    31.7%      15px
     1366 x  900    774    186 x 279  444.9 x 658    31.4%       8px

   --- 1. The set grows into the strip it is given -----------------------

   The desktop media height is `clamp(210px, 31svh, 350px)`, and v1.4.2
   added a `--wadi-obj-fit` cap through min() so a screen too short to hold
   a whole set draws it smaller. That covers short screens. Nothing covers
   TALL ones: on a portrait iPad the 350px ceiling binds at 1130px of
   viewport and the set stops growing, so 1124px of strip carries an 800px
   set and 324px of it is simply empty. That empty band under a
   half-width grid is the "marooned" the screenshots show.

   The fit arithmetic v1.4.2 already wrote is the answer — it is the media
   height at which a whole set measures exactly the strip. It was applied
   only as a ceiling; here it is the size itself, so the set fills the
   strip on a tall screen exactly as it shrinks to it on a short one. Two
   guards ride with it:

     --wadi-tab-breath  taken out of the strip before it is halved, so the
                        set is deliberately smaller than the space rather
                        than exactly equal to it. v1.4.2's cap left zero
                        slack by construction; on a device whose browser
                        chrome moves that is a title clipped at the fold.
     --wadi-tab-col     the widest a column can be inside the frame the
                        set actually has (100vw less --wadi-edge twice).
                        Height is the binding constraint for a 2:3 set at
                        every iPad size; for a 1:1 set, whose media is as
                        wide as it is tall, this is what binds instead and
                        it is the difference between a set that fits the
                        frame and one 19px wider than the screen.

   The result, with the same rules and the same composition:

     viewport      media 2:3    media 1:1    set inner    of width  slack
     1024 x 1250   322 x 483    364 x 364    684 / 769    67 / 75%   37px
     1024 x 1339   354 x 531    364 x 364    748 / 769    73 / 75%   40px
     1180 x  700   143 x 215    215 x 215    326 / 470    28 / 40%   21px
     1366 x  900   207 x 310    310 x 310    453 / 660    33 / 48%   27px

   A landscape iPad gains a little and a portrait one gains a great deal,
   which is the right split: a landscape strip is 574px tall and two rows
   of 2:3 images inside it are small because the screen is short, not
   because a rule is wrong.

   --- 2. The two columns are the same width ------------------------------

   `grid-template-columns: repeat(2, max-content)` sizes each track to the
   widest card in it, and a card is as wide as its title row whenever the
   name is longer than the picture. "CLOUD FOUR FOUR" is a 219px row at
   every viewport, so on any screen whose media is narrower than that the
   two tracks come out different — 218.9 and 159 at 1180x700 — and two
   things follow. The pair of images is centred on the inner box, not on
   the screen, so the whole composition sits (219 - 159) / 2 = 15px right
   of centre. And the space between the two pictures is the 40px gap plus
   the slack in both tracks: 84px between images only 145px wide, unevenly
   divided, which is the "columns don't line up" in the screenshots.

   v1.4.2's `justify-items: center` is what puts each image on its track's
   centre line, and that is still doing its job — the images ARE aligned
   with each other. It cannot equalise the tracks themselves, which is the
   half this adds. `1fr` under the inner box's own `width: max-content`
   resolves both tracks to the largest max-content contribution in either
   of them, so the columns are identical by construction, the gap between
   the images is symmetric, and the pair is centred on the screen because
   the box it is centred in is now symmetric too. Off-centre measures 0px
   at every size tested.

   Inert wherever the tracks already agree — a portrait iPad after part 1
   above, and every desktop, where the media is wider than the longest
   title and both tracks were already media-width.

   --- 3. The feature card keeps clear of the fold -----------------------

   `min(82svh, 100svh - offset - 58px, 760px)` plus the 34px title row
   leaves the card exactly 24px short of the strip, at every viewport where
   the middle term wins — which is every landscape iPad. 24px is not a
   margin, it is a rounding error: it is what is left after the card has
   claimed the strip, and it does not grow with the screen. The reported
   screenshot is that card with its bottom edge past the fold.

   96px rather than 58px, and 78svh rather than 82svh, put a real margin
   there: 62px of slack at 1180x700 and at 1366x900, against 24px before.
   The 760px ceiling is untouched, so a portrait iPad — where that ceiling
   is what binds — draws the identical card it draws today.

   --- Scope -------------------------------------------------------------

   `any-pointer: coarse` with a 1500px ceiling: every iPad in both
   orientations (1024x1366 portrait through 1366x1024 landscape, and the
   ~980-1024px desktop-mode viewport a smaller iPad reports), and no mouse.
   A desktop and a laptop have no coarse input at all, so every non-touch
   layout is byte-for-byte what v1.5.4 shipped. Below 901px is untouched,
   so phones and any tablet genuinely reporting a narrow viewport keep the
   mobile grid.

   ANY-pointer rather than pointer — see the v1.5.6 note at the end of this
   file, which is what that word is doing here. */
@media (min-width:901px) and (max-width:1500px) and (any-pointer:coarse){
  .objects-page .objects-set-grid{
    /* Read off the v1.4.2 block's own constants, so if the section
       padding, the row gap or the title row is retuned there this moves
       with it rather than drifting away from it. */
    --wadi-tab-breath:clamp(16px,3svh,40px);
    --wadi-tab-frame:calc(100vw - (var(--wadi-edge) * 2));
    --wadi-tab-col:calc((var(--wadi-tab-frame) - var(--wadi-obj-gap)) / 2);
    --wadi-tab-fit:calc((
      100svh
      - var(--wadi-header-offset)
      - (var(--wadi-obj-pad) * 2)
      - var(--wadi-obj-gap)
      - (var(--wadi-obj-title) * 2)
      - var(--wadi-tab-breath)
    ) / 2);
  }

  /* 1. The set is drawn to the strip it has, tall or short. Scoped to the
     3- and 4-up sets for the same reason v1.4.2 scoped its cap to them:
     they are the only ones that stack two rows, and the arithmetic above
     halves the strip. A set of one or two is a single row and is left
     exactly as it is. max() is a floor against a degenerate window. */
  .objects-page .objects-set-ratio-2-3.objects-set-count-3 .object-media,
  .objects-page .objects-set-ratio-2-3.objects-set-count-4 .object-media{
    height:max(210px,min(var(--wadi-tab-fit),calc(var(--wadi-tab-col) * 1.5)))!important;
  }
  .objects-page .objects-set-ratio-1-1.objects-set-count-3 .object-media,
  .objects-page .objects-set-ratio-1-1.objects-set-count-4 .object-media{
    height:max(210px,min(var(--wadi-tab-fit),var(--wadi-tab-col)))!important;
  }

  /* 2. Both columns the same width. Plain `1fr` rather than
     `minmax(0,1fr)`: the base size has to stay the track's max-content
     contribution for the inner box's `width:max-content` to resolve to
     anything, and a 0 floor would collapse it. */
  .objects-page .objects-set-grid .objects-set-inner{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* 3. The feature card, with a margin rather than a remainder. */
  .object-feature-card .object-media{
    height:min(78svh,calc(100svh - var(--wadi-header-offset) - 96px),760px)!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-04 (CDX v1.5.6) — v1.5.5 reaches the iPad it was
   written for, and a picture can no longer be squeezed out of shape
   ══════════════════════════════════════════════════════════════════════

   v1.5.5 shipped and the iPad looked the same. The screenshots say why,
   and they say it in one detail: the two columns are still different
   widths — CLOUD FOUR FOUR's picture is visibly wider than CLOUD ONE's
   beside it, in both orientations. That is v1.5.4's `max-content` tracks.
   v1.5.5's `1fr` makes the two identical by construction, so if they are
   still unequal the block never matched. Nothing inside it was wrong; the
   query on the front of it was.

   --- 1. any-pointer, not pointer -------------------------------------

   `pointer: coarse` asks what the PRIMARY input is. Attach a Magic
   Keyboard, a Smart Keyboard Folio or any Bluetooth trackpad or mouse to
   an iPad — which is how most iPad Airs and Pros are actually used — and
   iPadOS answers `pointer: fine` and `hover: hover`, exactly as a laptop
   does. The touchscreen has not gone anywhere; it simply stopped being
   the primary. So a keyboard-case iPad matched none of v1.5.5's three
   conditions and kept the v1.5.4 layout, which is the one in the
   screenshots.

   `any-pointer: coarse` is the media feature for this: true when ANY
   available input is coarse, whatever the primary happens to be. It stays
   true on an iPad with a trackpad attached and on one without, and it is
   false on a desktop and a laptop, which have no coarse input at all — so
   the scope v1.5.5 promised is unchanged, it just now includes the iPads
   it was missing. Supported everywhere the site runs (Safari 9+).

   The four `@media (hover:none), (pointer:coarse)` blocks further up this
   file are deliberately NOT changed. Those govern touch BEHAVIOUR — the
   pager's touch-action, hover states that a finger cannot produce — and
   for those the question really is what the primary input is: an iPad
   driven by a trackpad should get the hover treatment. This block governs
   LAYOUT, which depends on the screen and not on what is pointing at it.

   --- 2. The aspect ratio always wins ----------------------------------

   Second thing in the same screenshots: the pictures are not merely
   unequal, they are narrow vertical slices with their sides cut away. A
   2:3 box on a near-square photograph crops the sides by design — every
   one of these four is forced to 2:3 by page-collection.php while its
   source file is roughly square (462x478, 484x542, 622x610, 600x612) — but
   what is on screen is far narrower than 2:3, so something is taking the
   box below its own ratio and `object-fit: cover` is cutting the picture
   to match.

   That something is `max-width: 100%`, set on .object-media in the
   2026-07-29 block. The media's width comes from `width: auto` plus
   `aspect-ratio`, so it is a size derived from the height — but the
   max-width is 100% of the CARD, and the card is `width: max-content`,
   which in a squeezed `max-content` track is the track. Whenever a track
   resolves narrower than height x 2/3, the ratio loses, the box goes
   narrower than 2:3 at unchanged height, and the picture is cropped
   harder — differently in each column, because the tracks differ. It is
   the same root as part 1: unequal tracks. This makes it impossible
   rather than merely unlikely.

   Deliberately at >=901px and NOT inside the tablet query, so it holds
   even if a device somehow matches neither. It is provably inert on every
   layout that is correct today: the media width is already EXACTLY
   height x 2/3 at every desktop size measured on the live site (223.195 /
   334.8 and 161.195 / 241.8 are both 0.66670), which is the arithmetic
   saying max-width is not binding there and has nothing to release. And it
   cannot overflow: width is bounded by the height, the height by
   `clamp(210px,31svh,350px)` outside the tablet query and by
   --wadi-tab-col inside it, and a 2x233px pair plus a 40px gap is 506px
   against the 677px frame at the narrowest width this branch ever sees. */
@media(min-width:901px){
  .objects-page .object-media,
  .object-feature-card .object-media{
    max-width:none!important;
  }
}



/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-04 (CDX v1.5.7) — the product page's intro fills
   an iPad instead of leaving a third of it empty
   ══════════════════════════════════════════════════════════════════════

   Reported with two portrait screenshots: the piece sits up under the
   header, then a band of empty page, then the editorial columns begin.
   "Too much gap — ideally it should look and work like desktop."

   Measured on v1.5.6 at 960x1380, the layout viewport a portrait iPad
   reports in Safari's desktop mode (the 645px hero image fills 67% of the
   width in both screenshots, which is what fixes the width at ~960 — see
   the objects note above for why an iPad is in this branch at all):

     .pdp-hero-sec   min-height  1380px   (one viewport, from v1.5.1)
     content         146 + 860 = 1006px
     dead white                   374px

   Two rules meeting badly, neither wrong on its own:

     .pdp-hero-sec  --pdp-media-width : min(645px, 100vw - 48px)
     .pdp-hero-sec  min-height        : var(--wadi-vh-px, 100svh)

   The image is sized from WIDTH alone and capped at 645px, so it is
   645x860 at every viewport from 693px wide upward — the same photograph
   on a 1920px desktop and on a 960px tablet. The section is sized from
   HEIGHT, one whole viewport, which v1.5.1 added so the editorial gallery
   stays below the fold while the intro's fixed glass is up. On a 1080px
   laptop the two agree: an 860px image in a 1080px section is 62px of
   slack, and the piece reads as filling the screen. On a portrait tablet
   the viewport is 1280-1380px tall and the image is still 860, so the
   same 62px becomes a third of the screen, all of it below the piece.

   The same pair fails the other way in landscape, which the report does
   not mention but is the same fault: at 1180x700 the strip under the
   header is 554px and the image is still 860, so the section grows past
   the viewport and the piece cannot be seen whole at all.

   Two changes, and between them the hero reads on a tablet the way it
   reads on a desktop — one screen, one piece.

   1. The image answers to the height as well as the width.

        --pdp-media-width : min( the header's frame , strip x 3/4 )

      3/4 because the hero is a 3:4 portrait, so that IS its height budget
      written as a width. The strip is read from the same
      `var(--wadi-vh-px, 100svh)` the min-height uses, deliberately: the
      two are then the same number by construction, whichever value that
      variable holds.

      The frame is `100vw - 2 x --wadi-edge` — the header's own rule, not
      the section's wider `clamp(18px,4vw,60px)` padding. Bounding it by
      the section's padding does fill a portrait screen completely, but at
      960px the image comes out 883px wide against a header rule 721px
      wide, so the piece overhangs the line above it by 81px a side and
      reads as broken alignment rather than as a bigger picture. Inside
      the header frame it lands at 78-85% of the strip, which is the 80%
      a 1920x1080 desktop draws.

   2. The section centres what it holds.

      With the image bounded by the frame, a very tall portrait screen can
      still have height to spare — 137px at 960x1380. Left at the bottom
      that is the reported gap again, smaller; split evenly above and
      below it is the composition the objects page already uses, and it is
      what makes the piece sit IN the screen rather than at the top of it.
      justify-content only moves what is already there; the fixed intro
      glass is out of flow and does not move.

     viewport      image before   image after   white below the piece
     960 x 1280    645 x 860      721 x  961      274 ->  87 (87 above)
     960 x 1380    645 x 860      721 x  961      374 -> 137 (137 above)
     1024 x 1366   645 x 860      769 x 1025      360 ->  97 (97 above)
     1180 x  700   645 x 860      415 x  554    overflowed ->  0
     1366 x  900   645 x 860      565 x  754    overflowed ->  0

   Scope is the query the objects page uses, and only .pdp-hero-sec is
   touched. The editorial section below keeps every column, rail and
   alignment it has — it already IS the desktop layout on a tablet, which
   is what the report asked for. Desktops and laptops have no coarse
   input, so the 645px hero they draw today is byte-for-byte unchanged,
   and below 901px the hero is display:none. */
@media (min-width:901px) and (max-width:1500px) and (any-pointer:coarse){
  .pdp-hero-sec,
  .admin-bar .pdp-hero-sec{
    --pdp-hero-breath:clamp(16px,2.5svh,40px);
    /* The section's own padding-top, restated so the strip below is the
       real space under the header rather than an estimate of it. */
    --pdp-hero-top:calc(var(--wadi-header-offset) + clamp(12px,2vw,24px));
    --pdp-media-width:min(
      calc(100vw - (var(--wadi-edge) * 2)),
      calc((
        var(--wadi-vh-px,100svh)
        - var(--pdp-hero-top)
        - var(--pdp-hero-breath)
      ) * 0.75)
    )!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    padding-bottom:var(--pdp-hero-breath)!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-04 (CDX v1.5.8) — one gap between the intro and
   the gallery, and it is the gallery's own
   ══════════════════════════════════════════════════════════════════════

   Reported from a laptop, with a screenshot of the gallery's own spacing
   as the reference: "the gap between hero image and image gallery is too
   much. THE GAP MUST BE ALWAYS SAME LIKE RIGHT NOW WE HAVE BETWEEN IMAGE
   GALLERY."

   Two spacings are in play and they have never agreed:

     between two gallery images   --pdp-image-gap   clamp(22px,2.4vw,34px)
     between the hero and the     hero padding-bottom + .pdp-editorial-sec
     first gallery image          padding-top, on top of whatever the hero
                                  section's min-height left unused

   The min-height is the large term. v1.5.1 made .pdp-hero-sec at least one
   whole viewport so the gallery stayed below the fold while the intro's
   fixed glass is up, and the hero's own content is header offset + an
   860px image = about 1015px. On a window shorter than that the minimum is
   inert and the gap is the 44px of editorial padding. On anything taller —
   which is most laptops once the window is full height, and every portrait
   tablet — the difference becomes the gap, and it grows with the screen:
   44px at 1728x1000, 330px at 1728x1343, 374px at 960x1380.

   So the hero stops reserving a viewport it does not fill, and the one
   spacing that remains is set to the gallery's own:

     .pdp-hero-sec     min-height     : 0
     .pdp-hero-sec     padding-bottom : 0
     .pdp-editorial-sec padding-top   : var(--pdp-image-gap)

   Measured at 1728x1000: gap 44px -> 34px, against 34px between the
   gallery images themselves. The two are now the same number by
   construction — --pdp-image-gap is declared on .pdp-editorial-sec and
   both the gallery's row gap and this padding read it — so the rhythm
   holds at every width instead of only where the arithmetic happened to
   land.

   Bounded at 2399px so v1.5.1's fix survives where it was reported. That
   was a 32" screen, and the fault needed the gallery to be drawn at the
   SAME 645px as the hero — which happens once --pdp-media-width comes off
   its floor, at 100vw - 1764px >= 645px, i.e. 2409px and up. Below that
   the gallery is 305px against a 645px hero and cannot read as a second
   copy of the piece, so there is nothing for the full-viewport minimum to
   prevent and it is only producing the gap. At 2400px and above the hero
   still holds a whole viewport, exactly as v1.5.1 left it.

   The tablet rule from v1.5.7 above still sizes the hero image to the
   strip under the header, so an iPad still sees the whole piece in one
   screen; what it no longer does is pad the section out to a viewport
   afterwards. Its justify-content becomes inert once there is no spare
   height to distribute, and is left in place rather than removed so the
   2400px band above keeps it. */
@media (min-width:901px) and (max-width:2399px){
  .pdp-hero-sec,
  .admin-bar .pdp-hero-sec{
    min-height:0!important;
    padding-bottom:0!important;
  }
  .pdp-editorial-sec{
    padding-top:var(--pdp-image-gap)!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-08 (CDX v1.5.9)
   ══════════════════════════════════════════════════════════════════════

   Five changes, requested with three screenshots:

     1. The objects index is rebuilt to the two screenshots — a categories
        rail bottom-left, three pictures across, no names and no quick-add,
        and the scroll snapping it already had.
     2. On a phone the same rail becomes a sheet behind a floating FILTER
        button, over a blurred page. The 2x2 grid of four stays.
     3. Every page is drawn to the objects page's measure on a phone.
     4. The lightbox trades its 01 / 06 counter for a thumbnail strip and
        moves its arrows off the picture, on every device.
     5. The phone contact page puts its content and its footer at the
        bottom of the screen, where the home page puts them.

   ──────────────────────────────────────────────────────────────────────
   1 + 2. THE OBJECTS INDEX
   ──────────────────────────────────────────────────────────────────────

   Written from scratch rather than layered onto the rules above, and it can
   be: page-collection.php now emits .obj-panel / .obj-tile / .obj-tile-media
   instead of .objects-set / .object-card / .object-media, so not one of the
   ~180 objects rules earlier in this file reaches this markup. They are not
   deleted — the classes are simply no longer produced, which is the same
   thing at render time and leaves the history intact. .objects-page and
   .objects-index keep their names, because site.js and the touch-action
   rules key off them; both are re-stated below.

   THE ARITHMETIC. One number does the whole layout:

     --obj-tile  =  min( (strip - gap) / 2 , (frame - 2 gap) / 3 )

   where `strip` is the viewport under the header less the top and bottom
   breathing, and `frame` is what is left of the width once the rail and its
   gutter are taken out. Every tile in every panel is that wide. A square
   piece is that tall as well; a 2:3 piece is `2 tiles + gap` tall — exactly
   two squares stacked. So the two panel types are the same height by
   construction, and three 2:3 pieces or six squares are the same screenful.
   That is the pair of screenshots, and it is also where the 2:3 tile's
   apparent proportion comes from: tile / (2 tile + gap) is about 0.46, the
   narrow upright picture in the first screenshot, not a 0.667 crop.

   The first term is the height budget, the second the width budget, and
   min() takes whichever binds. On a 16:9 desktop the height binds and the
   pictures fill the screen; on a portrait tablet the width binds and the
   panel is shorter than the strip, so the leftover is split above and below
   by align-items:center — --obj-slack is that leftover, written out so the
   fixed rail can be offset by the same half of it and stay level with the
   bottom row. In the screenshots the rail's last line and the pictures'
   bottom edge are on one line; here they are on one line by arithmetic,
   at every viewport.

   A panel is `100svh - header offset` tall and the page carries that offset
   as padding, so the first panel occupies the strip under the header exactly
   as the pager's own stops do — no correction is needed when it lands.

   PANEL COUNTS are decided twice, in wadi_even_panels() in PHP and in
   evenPanels() in site.js, because a screenful is three or six pictures on a
   desktop and four on a phone and only the browser knows which. site.js
   moves the tiles between panels rather than rebuilding them, so the reveal
   observers stay attached and the pictures do not reload. */

.objects-page-v2{
  --obj-gap:clamp(24px,2.6vw,44px);
  --obj-top:clamp(10px,1.6svh,26px);
  --obj-bottom:clamp(26px,4svh,54px);
  --obj-rail:clamp(112px,10vw,168px);
  --obj-strip:calc(100svh - var(--wadi-header-offset) - var(--obj-top) - var(--obj-bottom));
  --obj-frame:calc(100vw - (var(--wadi-edge) * 2) - var(--obj-rail) - var(--obj-gap));
  /* max() is a floor against a degenerate window, not a size. */
  --obj-tile:max(88px,min(
    calc((var(--obj-strip) - var(--obj-gap)) / 2),
    calc((var(--obj-frame) - (var(--obj-gap) * 2)) / 3)
  ));
  --obj-block:calc((var(--obj-tile) * 2) + var(--obj-gap));
  --obj-slack:max(0px,calc(var(--obj-strip) - var(--obj-block)));
}

.objects-page-v2 .objects-index{
  padding:0!important;
  margin:0!important;
  width:100%!important;
}
.objects-page-v2 .obj-flow{
  display:block;
  width:100%;
}

.objects-page-v2 .obj-panel{
  position:relative;
  width:100%;
  min-height:calc(100svh - var(--wadi-header-offset));
  margin:0;
  padding:var(--obj-top) var(--wadi-edge) var(--obj-bottom)
          calc(var(--wadi-edge) + var(--obj-rail) + var(--obj-gap));
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* The width is pinned to three columns so the flow wraps at three and a
   short last row (five squares, say) centres under a full one instead of
   hanging off one end. */
.objects-page-v2 .obj-panel-inner{
  display:flex;
  flex-wrap:wrap;
  gap:var(--obj-gap);
  width:calc((var(--obj-tile) * 3) + (var(--obj-gap) * 2));
  max-width:100%;
  justify-content:center;
  align-content:center;
}

.objects-page-v2 .obj-tile{
  flex:0 0 auto;
  margin:0;
  padding:0;
  min-width:0;
}
.objects-page-v2 .obj-tile-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.objects-page-v2 .obj-tile-media{
  position:relative;
  overflow:hidden;
  background:#D9D9D9;
  width:var(--obj-tile);
}
.objects-page-v2 .obj-panel-r1-1 .obj-tile-media{
  height:var(--obj-tile);
}
.objects-page-v2 .obj-panel-r2-3 .obj-tile-media{
  height:var(--obj-block);
}
.objects-page-v2 .obj-tile-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* The second gallery image on hover, mirroring what .object-media-hover did
   for the old card. .wipe.on img sets opacity:1 on every picture inside the
   box once the reveal has run, so the hover copy has to be put back to 0 at
   a specificity that beats it (0,3,0 against 0,2,1) and raised again only
   while the pointer is over the tile. */
.objects-page-v2 .obj-tile-hover{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:1;
  transition:opacity .65s ease;
}
.objects-page-v2 .wipe.on .obj-tile-hover{
  opacity:0;
}
.objects-page-v2 .obj-tile-link:hover .obj-tile-hover,
.objects-page-v2 .wipe.on .obj-tile-link:hover .obj-tile-hover{
  opacity:1;
}

/* Nothing here — either the shop is empty (rendered by PHP) or the reader
   has filtered down to a category with nothing in it (site.js puts
   .is-empty on the index and reveals the same line). */
.objects-page-v2 .obj-empty,
.objects-page-v2 .obj-none{
  padding:clamp(60px,12svh,140px) var(--wadi-edge);
  text-align:center;
  font-family:'Playfair Display',Georgia,serif;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.objects-page-v2 .obj-none{
  display:none;
}
.objects-page-v2 .objects-index.is-empty .obj-none{
  display:block;
}

/* ── The categories rail ─────────────────────────────────────────────── */

.objects-page-v2 .obj-rail{
  position:fixed;
  left:var(--wadi-edge);
  bottom:calc(var(--obj-bottom) + (var(--obj-slack) / 2));
  width:var(--obj-rail);
  z-index:400;
}
.objects-page-v2 .obj-rail-list,
.objects-page-v2 .obj-rail-sub{
  list-style:none;
  margin:0;
  padding:0;
}
.objects-page-v2 .obj-rail-list{
  display:flex;
  flex-direction:column;
  gap:clamp(13px,1.7svh,22px);
}
.objects-page-v2 .obj-rail-sub{
  margin-top:clamp(4px,.6svh,8px);
  padding-left:1.8em;
  display:flex;
  flex-direction:column;
  gap:clamp(1px,.25svh,4px);
}
.objects-page-v2 .obj-rail-link{
  display:inline-block;
  color:var(--dark);
  text-decoration:none;
  text-transform:uppercase;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(9px,.72vw,12px);
  font-weight:400;
  letter-spacing:.16em;
  line-height:1.5;
  opacity:.86;
  transition:opacity .3s ease;
}
.objects-page-v2 .obj-rail-link:hover,
.objects-page-v2 .obj-rail-link.is-active{
  opacity:1;
}
.objects-page-v2 .obj-rail-link.is-active{
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
}
.objects-page-v2 .obj-rail-child{
  opacity:.7;
}
/* ALL is the way back out of a filter, and it is only a way back once there
   is something to come back from. site.js puts .has-filter on and takes it
   off as the reader picks categories, so the default page is the rail in
   the screenshots and nothing else. */
.objects-page-v2 .objects-index:not(.has-filter) .obj-rail-all{
  display:none;
}

/* The rail and the phone's FILTER button are fixed, so at the page's last
   stop — the footer — they would sit on top of it. site.js watches the
   footer and flips this class; fading is used rather than moving, so no
   panel above changes by a pixel. Never while the sheet is open. */
.objects-page-v2 .obj-rail,
.objects-page-v2 .obj-filter-toggle{
  transition:opacity .3s ease;
}
body:not(.obj-filter-open) .objects-page-v2 .objects-index.at-footer .obj-rail,
body:not(.obj-filter-open) .objects-page-v2 .objects-index.at-footer .obj-filter-toggle{
  opacity:0;
  pointer-events:none;
}

/* On a desktop and a tablet the FILTER button and its scrim do not exist. */
.objects-page-v2 .obj-filter-toggle,
.objects-page-v2 .obj-filter-scrim{
  display:none;
}

/* ── Phones ──────────────────────────────────────────────────────────────
   The grid of four is the grid of four the page has today, minus the two
   title rows it used to reserve. Heights come from --wadi-vh-px, so the
   address bar sliding away does not resize the pictures mid-scroll.

   Two tile widths rather than one: four squares are two rows of one tile
   each, but four 2:3 pieces are two rows of one-and-a-half tiles, so the
   height each may claim is the strip split three ways rather than two. */
@media(max-width:900px){
  .objects-page-v2{
    --obj-m-vh:var(--wadi-vh-px,100svh);
    --obj-m-gap:clamp(14px,4vw,20px);
    --obj-m-row:clamp(16px,4.4vw,26px);
    /* The pager's own START_GAP: a phone lands a panel this far under the
       header, so this is exactly the height the panel must give back. */
    --obj-m-top:16px;
    /* Clear of the floating FILTER button. */
    --obj-m-bottom:clamp(66px,11svh,104px);
    --obj-m-strip:calc(var(--obj-m-vh) - var(--wadi-header-offset) - var(--obj-m-top) - var(--obj-m-bottom));
    --obj-m-col:calc((100vw - (var(--wadi-edge) * 2) - var(--obj-m-gap)) / 2);
    --obj-m-tile-1-1:max(64px,min(var(--obj-m-col),calc((var(--obj-m-strip) - var(--obj-m-row)) / 2)));
    --obj-m-tile-2-3:max(64px,min(var(--obj-m-col),calc((var(--obj-m-strip) - var(--obj-m-row)) / 3)));
  }

  .objects-page-v2 .obj-panel{
    min-height:calc(var(--obj-m-vh) - var(--wadi-header-offset) - var(--obj-m-top));
    padding:0 var(--wadi-edge) var(--obj-m-bottom);
    justify-content:center;
  }
  .objects-page-v2 .obj-panel-inner{
    gap:var(--obj-m-row) var(--obj-m-gap);
  }
  .objects-page-v2 .obj-panel-r1-1 .obj-panel-inner{
    width:calc((var(--obj-m-tile-1-1) * 2) + var(--obj-m-gap));
  }
  .objects-page-v2 .obj-panel-r2-3 .obj-panel-inner{
    width:calc((var(--obj-m-tile-2-3) * 2) + var(--obj-m-gap));
  }
  .objects-page-v2 .obj-panel-r1-1 .obj-tile-media{
    width:var(--obj-m-tile-1-1);
    height:var(--obj-m-tile-1-1);
  }
  .objects-page-v2 .obj-panel-r2-3 .obj-tile-media{
    width:var(--obj-m-tile-2-3);
    height:calc(var(--obj-m-tile-2-3) * 1.5);
  }

  /* The floating filter button. Fixed rather than sticky: the objects page
     is a stack of full-screen panels driven by a pager, so there is no
     scroll container for a sticky element to stick inside — fixed is what
     "always at the bottom of the screen" means here. */
  .objects-page-v2 .obj-filter-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:clamp(18px,3.2svh,32px);
    z-index:9400;
    min-width:118px;
    padding:12px 26px;
    border:1px solid rgba(26,25,23,.22);
    border-radius:100px;
    background:rgba(255,255,255,.94);
    box-shadow:0 6px 26px rgba(26,25,23,.12);
    color:var(--dark);
    font-family:'Playfair Display',Georgia,serif;
    font-size:12px;
    font-weight:400;
    letter-spacing:.2em;
    text-transform:uppercase;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    transition:opacity .3s ease;
  }

  /* "The whole background page goes blur." The scrim is the page-wide blur
     and it sits ABOVE the header (z-index 5000) as well as the grid, so the
     list is read against one even surface rather than against a sharp
     header and a soft grid. */
  .objects-page-v2 .obj-filter-scrim{
    display:block;
    position:fixed;
    inset:0;
    z-index:9300;
    border:0;
    padding:0;
    background:rgba(255,255,255,.58);
    -webkit-backdrop-filter:blur(18px) saturate(112%);
    backdrop-filter:blur(18px) saturate(112%);
    opacity:0;
    visibility:hidden;
    transition:opacity .34s ease,visibility 0s linear .34s;
  }
  body.obj-filter-open .objects-page-v2 .obj-filter-scrim{
    opacity:1;
    visibility:visible;
    transition:opacity .34s ease,visibility 0s;
  }

  .objects-page-v2 .obj-rail{
    position:fixed;
    inset:0;
    left:0;
    bottom:0;
    width:auto;
    z-index:9350;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:calc(var(--wadi-header-offset) + 12px) var(--wadi-edge) clamp(96px,16svh,150px);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .34s ease,transform .34s cubic-bezier(.16,1,.3,1),visibility 0s linear .34s;
    overflow-y:auto;
  }
  body.obj-filter-open .objects-page-v2 .obj-rail{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity .34s ease,transform .34s cubic-bezier(.16,1,.3,1),visibility 0s;
  }
  .objects-page-v2 .obj-rail-list{
    align-items:center;
    text-align:center;
    gap:clamp(18px,2.6svh,30px);
  }
  .objects-page-v2 .obj-rail-sub{
    align-items:center;
    padding-left:0;
    margin-top:clamp(8px,1.2svh,14px);
    gap:clamp(6px,1svh,12px);
  }
  .objects-page-v2 .obj-rail-link{
    font-size:15px;
    letter-spacing:.2em;
    line-height:1.4;
    opacity:1;
  }
  .objects-page-v2 .obj-rail-child{
    font-size:12px;
    opacity:.72;
  }
  /* ALL is always reachable from the sheet — a phone has no hover to hint
     that tapping the current category clears it. */
  .objects-page-v2 .objects-index:not(.has-filter) .obj-rail-all{
    display:block;
  }
}

/* The pager owns the wheel and the swipe on this page and the sheet is an
   overlay over it (site.js counts obj-filter-open with the basket drawer and
   the enquiry modal). The list scrolls itself when a long taxonomy runs past
   a short screen. */
body.obj-filter-open{
  overflow:hidden;
}


/* ──────────────────────────────────────────────────────────────────────
   3. EVERY PAGE IS THE OBJECTS PAGE'S WIDTH ON A PHONE
   ──────────────────────────────────────────────────────────────────────

   The objects page's measure is `100% - 2 x --wadi-responsive-edge`, which
   is 21px a side — 333px of a 375px phone. Measured on the live site at
   375px, the home page, the contact page and the product page were already
   drawn to it and two pages were not:

     studio   intro + image grid   260px   (58 -> 318)
     info     copy and portraits   236px   (70 -> 306)   236px below 520px
     finishes cards                339px   (18 -> 357)

   Both narrow measures date from a pass that matched the info page's copy
   to the studio statement, and they have been the same number as each other
   ever since — just not the same number as everything else on the site.
   They are set to the shared measure here rather than at each of the four
   places they are declared above, so there is one value to move if the page
   gutter is ever retuned. Nothing below is a size: every rule is the same
   `100% of the column` written for a box that had been given a fixed width.

   Only phones and small tablets. Above 900px each page keeps the measure it
   has, which is where all the desktop composition lives. */
@media(max-width:900px){
  :root{
    --wadi-page-measure:calc(100% - (var(--wadi-responsive-edge) * 2));
  }

  /* STUDIO — the statement and the image grid, which are already one
     column and were simply narrower than the page. */
  .studio-page-ref .studio-ref-intro,
  .studio-page-ref .studio-ref-grid{
    width:var(--wadi-page-measure)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* INFO — the intro band, each biography and each portrait. The portrait
     goes with them: it and the copy under it are one composition, and a
     138px picture over a full-width paragraph reads as a mistake rather
     than as a smaller picture. */
  .info-page .info-intro-band,
  .info-page .info-intro-copy,
  .info-page .info-person-text,
  .info-page .info-person-text-left,
  .info-page .info-person-text-right,
  .info-page .info-team-row:last-child .info-person-text-left,
  .info-page .info-person-photo,
  .info-page .info-team-row:last-child .info-person-photo:first-of-type{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* FINISHES — 3px a side wider than everything else. The gutter lives on
     .finishes-grid-wrap's padding and the grid inside it is already 100% of
     that, so the gutter is what moves; giving the grid --wadi-page-measure
     as well would take the edge out twice and narrow it by 42px. */
  .finishes-page .finishes-grid-wrap{
    padding-left:var(--wadi-responsive-edge)!important;
    padding-right:var(--wadi-responsive-edge)!important;
  }
  .finishes-page .finishes-grid{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .finishes-page .finishes-hero{
    padding-left:var(--wadi-responsive-edge)!important;
    padding-right:var(--wadi-responsive-edge)!important;
  }
}
@media(max-width:520px){
  .studio-page-ref .studio-ref-intro,
  .studio-page-ref .studio-ref-grid{
    width:var(--wadi-page-measure)!important;
    max-width:none!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   4. THE LIGHTBOX: THUMBNAILS, AND ARROWS OFF THE PICTURE
   ──────────────────────────────────────────────────────────────────────

   "Instead of numbers at the bottom of the lightbox image, display small
   thumbnails of the product image gallery, and keep the arrows off the
   image so that users can navigate them easily. Keep the thumbnails and
   arrows visible for all devices."

   The counter is gone from site.js and a strip of thumbnails is built in
   its place. The arrows were `position:absolute` against the viewport at
   18-38px from each edge, while the picture was allowed 86vw — so on any
   phone, and on a landscape photograph on a laptop, they sat ON the
   picture. They are now flex items in a row with the picture between them:

     .pdp-lightbox         column   close / frame / thumbs
     .pdp-lightbox-frame   row      prev / stage / next
     .pdp-lightbox-stage   flex:1   the picture, centred in what is left

   The picture is bounded by the row it is in rather than by a vw figure, so
   there is no width at which the two can overlap — the arrows reserve their
   own column first and the photograph gets the remainder. align-items is
   stretch so the stage has a definite height for `max-height:100%` to
   resolve against; the arrows are centred individually.

   Nothing about the zoom and drag changes: clampPan() measures
   stage.clientWidth/clientHeight, and the stage is now exactly the box the
   picture is drawn in. */
.pdp-lightbox{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.8vh,20px);
  padding:clamp(58px,8vh,92px) clamp(10px,2vw,30px) clamp(14px,2.2vh,26px);
}
.pdp-lightbox-frame{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:clamp(6px,1.4vw,24px);
  width:100%;
  min-height:0;
}
.pdp-lightbox-stage{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  max-height:100%;
}
.pdp-lightbox-img{
  max-width:100%;
  max-height:100%;
}
.pdp-lightbox-nav{
  position:static;
  transform:none;
  align-self:center;
  flex:0 0 auto;
  width:clamp(36px,3.4vw,54px);
  height:clamp(36px,3.4vw,54px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(1.1rem,1.6vw,1.4rem);
  line-height:1;
}
.pdp-lightbox-prev,
.pdp-lightbox-next{
  left:auto;
  right:auto;
}

.pdp-lightbox-thumbs{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(6px,.7vw,10px);
  max-width:100%;
  padding:2px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:auto;
}
.pdp-lightbox-thumbs::-webkit-scrollbar{
  display:none;
}
.pdp-lightbox-thumb{
  flex:0 0 auto;
  width:clamp(42px,3.6vw,60px);
  height:clamp(42px,3.6vw,60px);
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  overflow:hidden;
  opacity:.5;
  transition:opacity .28s ease,border-color .28s ease;
}
.pdp-lightbox-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.pdp-lightbox-thumb:hover{
  opacity:.82;
}
.pdp-lightbox-thumb.is-current{
  opacity:1;
  border-color:rgba(255,255,255,.85);
}
/* One picture is not a gallery: no arrows, no strip, and the photograph
   gets the height the strip would have taken. */
.pdp-lightbox.single .pdp-lightbox-thumbs{
  display:none;
}


/* ──────────────────────────────────────────────────────────────────────
   5. THE PHONE CONTACT PAGE SITS ON THE BOTTOM OF THE SCREEN
   ──────────────────────────────────────────────────────────────────────

   Reported with a screenshot: the footer is "way too up", with a band of
   empty page under it.

   body.wadi-contact is a 100svh column of two children — the page and the
   footer — and the page was `flex:0 1 auto`. A flex item that may shrink
   but not grow takes only its content height, so both children stacked
   against the TOP of the column and every pixel the content did not need
   was left at the bottom, below the footer. That is the empty band, and it
   is why the footer does not sit where the home page's footer sits.

   The page grows now, and inside it .contact-left is pushed down by an auto
   top margin: the picture keeps its place under the header, the gap opens
   between the picture and the copy, and GET IN TOUCH through FOLLOW US land
   directly above the footer — "all the elements at the bottom except the
   image", which is the request. The footer's own bottom padding is matched
   to the home page's, so the two pages end on the same line.

   Desktop is untouched: it has its own two-column layout in the 901px
   branch above and was never reported. */
@media(max-width:900px){
  .wadi-contact .contact-page{
    flex:1 1 auto!important;
    min-height:0!important;
  }
  .wadi-contact .contact-left{
    margin-top:auto!important;
    flex:0 0 auto!important;
  }
  .wadi-contact #wadi-footer{
    padding-bottom:clamp(25px,2.94vh,42px)!important;
  }
  .wadi-contact #wadi-footer .ft-main{
    padding-top:clamp(10px,1.2vh,16px)!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-08 (CDX v1.6.0) — the phone's page measure is the
   menu's, and a 2:3 panel is three pictures wide
   ══════════════════════════════════════════════════════════════════════

   Two corrections to v1.5.9, both reported against it.

   --- 1. Three across, not two -----------------------------------------

   Handled in page-collection.php and site.js, not here: v1.5.9 spread a run
   of tiles evenly over the panels it needed, so the four 2:3 pieces came out
   2 + 2. They are chunked now, so a panel is filled to the row — three 2:3
   pieces, six squares — and the remainder is what is left in the last one.
   Nothing in the CSS changes for it; the grid was always three columns.

   --- 2. The page is as wide as the menu, not as wide as the header ------

   "It should be as wide as the menu items — the page layout must start from
   the O of OBJECTS and end at the cart number, not the full menu width."

   v1.5.9 put every phone page on the objects page's measure, which is the
   header's own gutter, --wadi-responsive-edge, 21px a side. That is where
   the header's RULE ends, and the rule is wider than the words above it: the
   menu row is centred and content-sized, so it sits inside that gutter by
   another ~13px a side at 390px.

     390px phone     header rule   21 -> 369    (348 wide)
                     menu items    34 -> 357    (323 wide)   <- the ask

   The menu's span is not a percentage and cannot be written here — it is
   however wide the words set, and it changes with the language (Marathi and
   Hindi are longer than English). header.php measures it after the header
   and before <main>, and publishes --wadi-nav-inset; everything below is
   built from that.

   max() is a floor, and it is the one thing that keeps this safe. Below
   ~340px the menu row runs out of room and squeezes into its own gutter —
   at 320px the first link starts 6.6px from the edge — and without the
   floor the content would follow it out there and end up WIDER than the
   page has ever been. Floored at --wadi-responsive-edge, a phone that
   narrow simply keeps the 21px measure it has today.

   Everything is expressed against --wadi-page-inset, so if the menu is ever
   re-set the pages move with it. --wadi-page-measure is v1.5.9's variable
   redefined, which is what carries the studio page and the finishes grid
   across without restating them.

   Only the CONTENT moves. The header rule and the footer rule keep the 21px
   gutter deliberately: they are the page's edges, the content is inset from
   them, and .ft-main draws the footer rule with its own border-top, so
   narrowing the footer text would narrow that line and break the pair.

   Above 900px nothing here applies. */
@media(max-width:900px){
  :root{
    --wadi-page-inset:max(
      var(--wadi-responsive-edge),
      var(--wadi-nav-inset,var(--wadi-responsive-edge))
    );
    --wadi-page-measure:calc(100% - (var(--wadi-page-inset) * 2));
    --wadi-page-frame:calc(100vw - (var(--wadi-page-inset) * 2));
  }

  /* HOME — the shell is min(frame, 44svh, 520px); only the frame changes. */
  body.home .home-video-shell{
    width:min(var(--wadi-page-frame),44svh,520px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* INFO — the gutter is the page's own padding, and every band, portrait
     and biography inside it is already 100% of that (v1.5.9). */
  body .info-page{
    padding-left:var(--wadi-page-inset)!important;
    padding-right:var(--wadi-page-inset)!important;
  }

  /* STUDIO — reads --wadi-page-measure from v1.5.9, so it needs nothing
     here. Left as a note rather than a rule so the next reader does not go
     looking for the line that moves it. */

  /* FINISHES — v1.5.9 moved the gutter onto the wrapper; this re-points it
     at the new inset. The grid inside is 100% of the wrapper and follows. */
  .finishes-page .finishes-grid-wrap,
  .finishes-page .finishes-hero{
    padding-left:var(--wadi-page-inset)!important;
    padding-right:var(--wadi-page-inset)!important;
  }

  /* CONTACT — the page is a fixed-width column centred in the viewport. */
  body.wadi-contact .contact-page{
    width:var(--wadi-page-frame)!important;
  }

  /* PRODUCT — the editorial section is the whole of the phone layout; the
     hero is display:none below 901px. It was var(--wadi-frame-width), which
     is the same 21px gutter written the long way. */
  body .pdp-editorial-sec{
    width:var(--wadi-page-frame)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* OBJECTS — the panel's own padding is the gutter, and the tile width is
     half of what is left inside it, so both read the new inset. */
  .objects-page-v2 .obj-panel{
    padding-left:var(--wadi-page-inset);
    padding-right:var(--wadi-page-inset);
  }
  .objects-page-v2{
    --obj-m-col:calc((var(--wadi-page-frame) - var(--obj-m-gap)) / 2);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-08 (CDX v1.6.1) — the filter control is the icon
   ══════════════════════════════════════════════════════════════════════

   Three changes, and two of them are not here: the word FILTER is now the
   three-sliders mark from wadi_filter_icon() (page-collection.php), and a tap
   anywhere on the open sheet closes it (site.js). The rail also lists every
   category rather than only the ones that already hold something, which is
   why LIGHTING now opens onto CEILING / WALL / FLOOR / TABLE with SEATING and
   OBJECTS under it.

   What is left for the stylesheet is the button itself. It was a 118px pill
   built around a word set at .2em; an icon needs none of that width, so it
   becomes a circle of the same height, and the mark is centred in it. The
   ring, the shadow and the blur are the pill's own, unchanged — only the
   shape it is drawn around. */
@media(max-width:900px){
  .objects-page-v2 .obj-filter-toggle{
    min-width:0!important;
    width:54px;
    height:54px;
    padding:0;
    border-radius:50%;
    /* Nothing sets type any more; cleared so a stray inherited letter-spacing
       cannot push the icon off centre inside the circle. */
    font-size:0;
    letter-spacing:0;
  }
  .objects-page-v2 .obj-filter-toggle .wadi-filter-icon{
    display:block;
    width:23px;
    height:23px;
  }
  /* Pressed state: the sheet is open and this is one of the ways back out. */
  body.obj-filter-open .objects-page-v2 .obj-filter-toggle{
    border-color:rgba(26,25,23,.42);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-08 (CDX v1.6.2) — the phone grid stops touching
   the menu rule
   ══════════════════════════════════════════════════════════════════════

   Reported with a screenshot: on the objects page the top row of pictures
   sits hard against the line under the menu, with no air between them.

   It is arithmetic, and it only shows on a SHORT viewport, which is why the
   390x844 measurement taken when this shipped did not catch it. The mobile
   tile is

     tile = min( column , (strip - row gap) / N )        N = 3 for 2:3, 2 for 1:1

   and the panel then centres two rows of it inside a content box exactly
   `strip` tall. When the COLUMN is the smaller term — a normal phone held in
   a browser with little chrome — the two rows come out shorter than the strip
   and the leftover is split above and below as air. But when the second term
   wins, the arithmetic is an identity:

     2 x 1.5 x (strip - row) / 3  +  row  =  strip

   The grid is then exactly the height of the box that holds it, the centring
   has nothing to distribute, and the first row starts on the box's top edge —
   which is the header rule. Safari's bottom bar is what tips it over: at
   393 x 705 the column is 154.6px and the height term is 151.7px, so the
   height binds and the slack is 0.0px. The same phone with the toolbars
   hidden is 393 x 852, where the column binds and there is 40px of air.

   So the gap stops being whatever the arithmetic happens to leave over and
   becomes a reserved band: --obj-m-head is taken OUT of the strip before the
   tile is sized, and put back as the panel's own padding-top. The grid can
   still fill the strip completely — it just cannot reach into that band. It
   is on top of the 16px the pager already leaves when it lands a panel, so
   the visible gap under the rule is ~40px on the reported viewport.

   The pictures give up the height the band takes: 151.7 -> 143.7px wide at
   393 x 705, about 5%. Nothing else moves — the bottom padding that clears
   the filter button, the two columns, the gaps and every desktop and tablet
   size are all as they were. */
@media(max-width:900px){
  .objects-page-v2{
    --obj-m-head:clamp(18px,3.4svh,36px);
    --obj-m-strip:calc(
      var(--obj-m-vh)
      - var(--wadi-header-offset)
      - var(--obj-m-top)
      - var(--obj-m-head)
      - var(--obj-m-bottom)
    );
  }
  .objects-page-v2 .obj-panel{
    padding-top:var(--obj-m-head);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-08 (CDX v1.6.3) — the filter mark folds into a
   close cross, and unfolds again
   ══════════════════════════════════════════════════════════════════════

   The three sliders already have the shape of the answer: two of the bars
   ARE the cross, once they have moved onto the centre line and turned. So
   nothing is swapped or cross-faded — the same three lines are still on
   screen, they have just been folded, and the same transition run backwards
   is what unfolds them. That is what makes it read as one control changing
   state rather than as two icons trading places.

     bar 1   y 5.6   ->  down 6.4, turn +45, shortened to .62
     bar 2   y 12    ->  collapsed to nothing along its own length
     bar 3   y 18.4  ->  up 6.4,   turn -45, shortened to .62
     knobs           ->  drawn in toward the centre and faded out

   ORDER AND ORIGIN are the whole trick and are easy to get wrong. Every
   transform here is about `transform-origin: 12px 12px` — the icon's own
   centre, in user units, which is where the cross has to meet. CSS applies a
   transform list RIGHT TO LEFT, so `rotate() translateY() scaleX()` shortens
   the bar first, then slides it onto the centre line, and only then turns it
   about that centre. Writing it the other way round turns the bar first and
   then slides the diagonal sideways, which misses the centre and reads as a
   broken X.

   transform-box is deliberately left at its default (view-box) rather than
   set to fill-box: a horizontal line has a zero-height bounding box, so
   fill-box would give each bar a different vertical origin and the three
   would fold to three different places.

   .62 rather than a full-width bar: an X drawn on the full 20.8-unit span
   overhangs the circle it sits in. 12.9 units is the same visual weight as
   the sliders it replaces.

   The timing is the site's own easing, the one the drawer and the pager use.
   The bars carry the longer duration and the knobs a shorter one, so the
   knobs are gone before the fold is finished rather than riding down with
   it. Reduced-motion gets the same two states with no travel between them. */
.wadi-filter-bar,
.wadi-filter-knob{
  transform-origin:12px 12px;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}
.wadi-filter-knob{
  transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .18s ease;
}

body.obj-filter-open .wadi-filter-bar-1{
  transform:rotate(45deg) translateY(6.4px) scaleX(.62);
}
body.obj-filter-open .wadi-filter-bar-3{
  transform:rotate(-45deg) translateY(-6.4px) scaleX(.62);
}
/* Along its own length, so it reads as being drawn into the crossing point
   rather than as a line that blinked out. */
body.obj-filter-open .wadi-filter-bar-2{
  transform:scaleX(0);
  opacity:0;
}
body.obj-filter-open .wadi-filter-knob{
  transform:scale(.35);
  opacity:0;
}

@media (prefers-reduced-motion:reduce){
  .wadi-filter-bar,
  .wadi-filter-knob{
    transition:none;
  }
}