/* 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;
  /* WADI UPDATE - 2026-10-02 (CLD v1.6.26) pinch-zoom, not none: the intro
     holds the page still against a SCROLL, which is what it locks. A pinch
     is the reader looking closer and was never what this was for. */
  touch-action:pinch-zoom!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;
  /* The stage has its own tap-to-zoom and drag-to-pan (pointer events,
     unaffected), and now lets the browser's pinch through on top. */
  overflow:hidden;touch-action:pinch-zoom;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), (orientation:portrait) and (max-width:1200px){
  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), (orientation:portrait) and (max-width:1200px){}
@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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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 pinch-zoom;
  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) and (orientation:landscape), (min-width:1201px){}
.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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){}

/* 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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){}

/* 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 pinch-zoom;
  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) and (orientation:landscape), (min-width:1201px){
  .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 UPDATE - 2026-10-04 (CLD v1.6.27): width:100vw moved out of this
     700px block and into the mobile family block at the end of this file, so
     the drawer is full-width on every phone AND every portrait tablet instead
     of switching to the 430px desktop panel at 701px. The 18px side padding
     stays a phone value. */
  .wadi-basket-panel{
    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), (orientation:portrait) and (max-width:1200px){
  :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) and (orientation:landscape), (min-width:1201px){}

.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 pinch-zoom!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), (orientation:portrait) and (max-width:1200px){
  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) and (orientation:landscape), (min-width:1201px){}

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  :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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  :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) and (orientation:landscape), (min-width:1201px){
  :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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  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) and (orientation:landscape), (min-width:1201px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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) and (orientation:landscape), (min-width:1201px){
  /* 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) and (orientation:landscape), (min-width:1201px){
  .wadi-contact #wadi-footer{
    padding-bottom:var(--wadi-header-top)!important;
  }
}
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  :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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  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) and (orientation:landscape), (min-width:1201px){
  :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) and (orientation:landscape), (min-width:1201px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (min-width:901px) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  /* --- 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), (orientation:portrait) and (max-width:1200px){
  :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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px) 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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  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) and (orientation:landscape), (min-width:1201px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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 pinch-zoom;
  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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px){
  .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) and (orientation:landscape), (min-width:1201px) 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) and (orientation:landscape), (min-width:1201px){
  .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) and (orientation:landscape), (min-width:1201px){
  .pdp-finish-explore{
    margin-top:calc(clamp(24px,2.8vw,38px) - 5px)!important;
  }
}
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  .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) and (orientation:landscape), (min-width:1201px) 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) and (orientation:landscape), (min-width:1201px){
  .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) and (orientation:landscape), (min-width:1201px) 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) and (orientation:landscape), (min-width:1201px) 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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  :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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  :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), (orientation:portrait) and (max-width:1200px){
  .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), (orientation:portrait) and (max-width:1200px){
  .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;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-08 (CDX v1.6.4) — three iPad corrections, and one
   bottom line the contact page keeps everywhere
   ══════════════════════════════════════════════════════════════════════

   The fourth correction reported with these — the line drawing, the second
   gallery image and FINISHES starting on one line — is in site.js, not
   here. It was never a CSS fault: v1.4.4 already set --pdp-side-align-lift
   to 0, and the inline style site.js writes was overriding that value with
   one measured from the wrong box. The note on that function has the
   arithmetic.

   Scope for parts 1 and 2 is the query v1.5.6 established and v1.5.7 used
   after it: >=901px, <=1500px, and `any-pointer: coarse`. That is every
   iPad in both orientations — including one driven by a Magic Keyboard,
   which answers `pointer: fine` and is the reason ANY-pointer is the
   feature here — and it is false on a desktop and a laptop, which have no
   coarse input at all. So every non-touch layout is byte-for-byte what
   v1.6.3 shipped.

   Measurements below are from the static harness at the layout viewports a
   portrait iPad reports in Safari's desktop mode (960x1380 and 1024x1366)
   and the landscape pair (1180x820, 1366x1024).


   --- 1. The info page's team row fits the page it is drawn on ----------

   Reported with a portrait screenshot: the fourth column of the first team
   row — the second person's name and biography — runs off the right edge
   of the page and is cut mid-word.

   The row is four fixed-minimum tracks:

     minmax(170px,220px) minmax(200px,245px) minmax(200px,245px) minmax(170px,220px)

   170 + 200 + 200 + 170 is 740px of minimum before a single gap, and the
   gaps are clamp(28px,3.2vw,58px). A definite minimum cannot be shrunk, so
   below about 1180px of viewport the row is simply wider than the frame it
   sits in and the overflow is drawn past the edge:

     viewport      frame    row needs    over the edge
      960 x 1380   721px      832px         111px      <- the screenshot
     1024 x 1366   769px      838px          69px
     1180 x  820   886px      886px           0px
     1366 x 1024  1026px      849px           0px  (fits, 23px spare)

   The same four numbers as `fr` shares hold the proportion — 170:200:200:170
   is what the tracks were always meant to be — while letting the row shrink
   to whatever page it is given. Nothing is cut at any width.

   It is close to inert where the row already fits, which is what keeps the
   landscape iPads in this band looking as they do: at 1366x1024 the tracks
   go 197.2/227.2 -> 195.0/229.4, and at 1180x820 178.2/208.2 -> 177.8/208.9.
   Both are under 2.5px. At 960 the photographs come down from 200px to
   170px and the biography column from 170px to 144px, which is the row
   paying for itself instead of the page paying for it.

   A desktop window narrowed below ~1180px has the identical fault and is
   deliberately NOT included: it has no coarse pointer, so it keeps the
   v1.6.3 rendering exactly. Only the iPads that were reported move.

   --- 2. The contact photograph is a photograph, not a slot --------------

   Reported with the same screenshot set: "contact page image is not
   properly wide, it looks super tall."

   It is 42% of the frame wide and the whole of the page tall, and on a
   4:3 screen held upright those two facts do not survive each other:

     viewport      photograph      w/h
      960 x 1380   303 x 1125     0.27      <- the screenshot
     1024 x 1366   323 x 1111     0.29
     1180 x  820   372 x  561     0.66      (landscape: already right)
     1366 x 1024   431 x  762     0.57      (landscape: already right)
     1512 x  982   477 x  717     0.67      (a laptop, for reference)

   Two things, and between them a portrait iPad draws the picture a
   landscape one draws.

   a) The column takes its width out of the gutter beside it, not out of
      the copy. The 8.5vw column-gap is 82px at 960 — it was written for a
      1600px desktop — and 5vw capped at 64px gives the photograph that
      difference while leaving .contact-left within a pixel of the width it
      has today, which matters because the two email addresses in it are
      already wrapping at this size and must not wrap harder. 46.7% is the
      share that lands the left column back on its own number.

   b) A floor under the proportion. aspect-ratio sets the height from the
      width the column resolved to; max-height keeps it from ever being
      taller than the page, so it binds only where the page is tall enough
      to have caused the problem. In landscape max-height wins and the
      photograph still runs the full height, exactly as it does now.

     viewport      photograph     w/h      bound by
      960 x 1380   337 x  599    0.5625    aspect-ratio
     1024 x 1366   359 x  638    0.5625    aspect-ratio
     1180 x  820   414 x  561    0.74      max-height (full height, as now)
     1366 x 1024   479 x  762    0.63      max-height (full height, as now)

   align-self:end is what keeps part 3 true on the screens where the
   photograph no longer reaches the top: it is anchored to the bottom of
   the page, on the line the copy opposite it ends on, and the space it
   gives up opens above it — against the same white the copy column already
   carries above GET IN TOUCH.

   --- 3. One bottom line, on every desktop, laptop and iPad -------------

   "Push the content down by 7-10px so that social media icons and Mumbai
   and contact image end in the same bottom alignment."

   The two columns end on two different numbers: the photograph clears the
   page bottom by clamp(8px,1vw,16px), the copy by clamp(12px,1.4vw,22px).
   That is 6px of box difference at 1512 — and the eye is not reading the
   boxes. The Instagram mark is drawn 3.5px inside the bottom of its own
   18px box and "Mumbai" has no descender, so the ink stops about 10px
   above the photograph's edge, which is the 7-10px in the report.

   Both are written from one variable now, so they cannot drift apart
   again: the photograph clears the bottom by --wadi-contact-foot-gap, and
   the copy by that number less the 3.5px the icon holds back inside itself.
   The ink lands on the photograph's bottom edge.

     viewport      copy moves down
      960 x 1380       7.3px
     1024 x 1366       7.7px
     1366 x 1024       9.1px
     1512 x  982       9.6px
     1920 x 1080       9.8px

   Every width in the branch lands inside the range asked for. Below 901px
   nothing here applies: the phone contact page is a single column with the
   photograph above the copy and was not reported. */

@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  .wadi-contact .contact-page{
    --wadi-contact-foot-gap:clamp(8px,1vw,16px);
  }

  /* Restated from the v1.4.4 block above rather than edited into it, so the
     photograph's clearance and the copy's are the same token by
     construction. Same declarations, same numbers, one source. */
  .wadi-contact .contact-right{
    height:calc(100% - var(--wadi-contact-foot-gap))!important;
    margin-top:0!important;
    margin-bottom:var(--wadi-contact-foot-gap)!important;
  }

  /* max() is a floor: below a 3.5px gap the copy would be pushed past the
     page's own bottom edge rather than onto the photograph's. */
  .wadi-contact .contact-left{
    padding-bottom:max(0px,calc(var(--wadi-contact-foot-gap) - 3.5px))!important;
  }
}

@media (min-width:901px) and (max-width:1500px) and (any-pointer:coarse) and (orientation:landscape), (min-width:1201px) and (max-width:1500px) and (any-pointer:coarse){
  /* 1. The team row is proportional, so it fits whatever page it is given. */
  .info-page .info-team-row,
  .info-page .info-team-row:first-child,
  .info-page .info-team-row:last-child{
    grid-template-columns:
      minmax(0,170fr)
      minmax(0,200fr)
      minmax(0,200fr)
      minmax(0,170fr)!important;
  }

  /* 2a. The photograph's width comes out of the gutter beside it. */
  .wadi-contact .contact-page{
    column-gap:clamp(40px,5vw,64px)!important;
    grid-template-columns:minmax(0,1fr) minmax(300px,46.7%)!important;
  }

  /* 2b. A floor under the proportion, and the bottom edge part 3 aligns to.
     height:auto hands the block size to aspect-ratio; max-height keeps the
     photograph inside the page, so this is inert in landscape.

     width:100% is load-bearing and not a tidy-up. An aspect ratio transfers
     through AUTO sizes in both directions: with the width left to the grid's
     own stretch, clamping the height with max-height re-derives the width
     from the clamped height, and the photograph comes out NARROWER than its
     column instead of the same width and shorter. Measured on the harness at
     1180x820 without it: 372px wide before, 316px after — the landscape
     iPad losing 56px to a rule that was meant not to touch it. With a
     definite width the ratio only ever sets the height, and max-height
     clamps that height alone. */
  .wadi-contact .contact-right{
    align-self:end!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:9 / 16!important;
    max-height:calc(100% - var(--wadi-contact-foot-gap))!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-12 (CDX v1.6.5) — the product page becomes one
   full-screen photograph at a time, and four smaller corrections
   ══════════════════════════════════════════════════════════════════════

   Five changes, requested with four screenshots:

     1. The desktop and iPad product page is rebuilt to the first
        screenshot: a full-width photograph, the name and three actions
        pinned on the right, and no blur anywhere.
     2. The objects page's category rail stays on screen at the footer.
     3. Every page's footer ends on the home page's bottom spacing.
     4. The info statement is set to the studio statement's measure — the
        width of the two middle pictures — and both are justified.
     5. The contact page's text is all black, with slightly heavier heads.

   The new statements themselves are in translations.php.

   ──────────────────────────────────────────────────────────────────────
   1. THE PRODUCT PAGE SHOWCASE (901px and up)
   ──────────────────────────────────────────────────────────────────────

   single-product.php prints a new section, .pdp-show, ahead of the hero.
   It is its own markup rather than a restyle of the editorial section, so
   none of the ~470 PDP rules above can reach it and the phone layout —
   which IS the editorial section — is untouched. Below 901px .pdp-show is
   not drawn at all; above it the hero and the editorial section are not.
   Every iPad is in this branch in both orientations (Safari asks for the
   desktop site), which is where "desktops and iPads" puts it.

   One grid cell holds two things:

     .pdp-show-stack   every picture, each a full-screen slide with
                       position:sticky; top:0. A slide pins when it reaches
                       the top of the window and the next one, later in the
                       document and so painted above it, slides up over it.
                       That is "the next image coming in instead of the
                       first", to the last one, with no script involved.
     .pdp-show-info    the name, SPECIFICATIONS, FINISHES and ENQUIRE. Also
                       sticky, and one screen tall, so it stays exactly
                       where it is for the whole run. Both are bounded by
                       the section, so when the last picture leaves for the
                       footer they leave together.

   The name sits under the header by 12.5% of the screen and ENQUIRE ends
   11% above the bottom — the screenshot's proportions — and the column's
   right edge is the header's, so ENQUIRE and the basket count end on one
   vertical at every width.

   Heights are --wadi-vh-px (see wadi_viewport_metrics()): an iPad's
   toolbar settling mid-scroll must not resize the photograph under the
   reader. A logged-in editor's admin bar is 32px of fixed chrome over the
   top of the window, so the slides pin under it rather than behind it.

   The header is transparent here and loses its hairline, so the picture
   runs to the top edge as the screenshot shows. The frosted blur the base
   rules give a scrolled header (header.sc::after) was already switched off
   by the 2026-08-01 pass; nothing on this page blurs. */

.pdp-show{
  display:none;
}

@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  body.single-product{
    --pdp-show-top:0px;
    --pdp-show-h:calc(var(--wadi-vh-px,100vh) - var(--pdp-show-top));
  }
  body.single-product.admin-bar{
    --pdp-show-top:32px;
  }

  body.single-product .pdp-hero-sec,
  body.single-product .pdp-editorial-sec{
    display:none!important;
  }

  body.single-product header#hdr,
  body.single-product header#hdr.dk,
  body.single-product header#hdr::after{
    background:transparent!important;
  }
  body.single-product header#hdr::before{
    opacity:0!important;
  }

  .pdp-show{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    background:#fff;
  }
  .pdp-show .pdp-show-stack,
  .pdp-show .pdp-show-info{
    grid-area:1 / 1;
  }

  .pdp-show .pdp-show-slide{
    position:sticky;
    top:var(--pdp-show-top);
    height:var(--pdp-show-h);
    margin:0;
    overflow:hidden;
    background:#EEECE8;
  }
  .pdp-show .pdp-show-slide img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  .pdp-show .pdp-show-info{
    position:sticky;
    top:var(--pdp-show-top);
    z-index:2;
    align-self:start;
    justify-self:end;
    height:var(--pdp-show-h);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-end;
    padding:
      calc(var(--wadi-header-offset) + clamp(40px,12.5svh,160px) - var(--pdp-show-top))
      var(--wadi-edge)
      clamp(40px,11svh,140px)
      0;
    text-align:right;
    color:var(--dark);
  }

  /* Set in two lines in the screenshot. A max-width is what does that for
     any name, and min-width:min-content is the floor under it: a single
     word longer than the measure widens the column leftwards instead of
     running off the right edge. The negative margin takes the tracking
     after the last letter back, so the name ends on the same vertical as
     ENQUIRE. */
  .pdp-show .pdp-show-title{
    margin:0 -.06em 0 0!important;
    min-width:min-content;
    max-width:clamp(220px,22vw,440px);
    font-family:'Playfair Display',Georgia,serif!important;
    font-size:clamp(28px,2.35vw,46px)!important;
    font-weight:400!important;
    line-height:1.04!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
    text-align:right!important;
    color:inherit!important;
  }

  .pdp-show .pdp-show-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
  }

  .pdp-show .pdp-show-link{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    color:inherit!important;
    text-decoration:none!important;
    font-family:'Playfair Display',Georgia,serif!important;
    font-size:clamp(11px,.78vw,14px)!important;
    font-weight:400!important;
    line-height:1.75!important;
    letter-spacing:.2em!important;
    text-transform:uppercase!important;
    transition:opacity .3s ease;
  }
  .pdp-show .pdp-show-chev{
    display:block;
    flex:0 0 auto;
    width:.6em;
    height:.75em;
  }

  .pdp-show .pdp-show-enquire{
    margin:clamp(12px,1.9svh,26px) 0 0;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    color:inherit!important;
    font-family:'Playfair Display',Georgia,serif!important;
    font-size:clamp(26px,2.1vw,40px)!important;
    font-weight:500!important;
    line-height:1!important;
    letter-spacing:.02em!important;
    text-transform:uppercase!important;
    transition:opacity .3s ease;
  }

  .pdp-show .pdp-show-link:hover,
  .pdp-show .pdp-show-enquire:hover{
    opacity:.6;
  }

  /* Devanagari has no capitals and its conjuncts come apart under wide
     tracking — the same treatment every other label on the site gets. */
  body.wadi-devanagari .pdp-show .pdp-show-title,
  body.wadi-devanagari .pdp-show .pdp-show-link,
  body.wadi-devanagari .pdp-show .pdp-show-enquire{
    font-family:'Noto Serif Devanagari','Playfair Display',Georgia,serif!important;
  }
  body.wadi-devanagari .pdp-show .pdp-show-title,
  body.wadi-devanagari .pdp-show .pdp-show-link{
    letter-spacing:.04em!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   2. THE CATEGORY RAIL STAYS ON SCREEN AT THE FOOTER
   ──────────────────────────────────────────────────────────────────────

   v1.5.9 faded the rail — and the phone's filter button — out whenever the
   footer was on screen, because both are fixed and would otherwise sit on
   it. They stay now, and move out of its way instead: site.js publishes
   --obj-foot-lift, the height of footer currently in the window, and both
   rise by exactly that. The footer stop is the last panel pushed up by the
   footer's height, so a rail lifted by the same number is still level with
   that panel's bottom row, as it is at every other stop.

   The fade itself is gone from site.js (nothing sets .at-footer any more),
   so the v1.5.9 rule that keyed off it is inert rather than overridden.

   On a phone only the button moves. The rail there is the full-screen
   filter sheet and must stay where it is. */
@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  .objects-page-v2 .obj-rail{
    transform:translateY(calc(-1 * var(--obj-foot-lift,0px)));
  }
}
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  .objects-page-v2 .obj-filter-toggle{
    transform:translateX(-50%) translateY(calc(-1 * var(--obj-foot-lift,0px)));
  }
}


/* ──────────────────────────────────────────────────────────────────────
   3. ONE BOTTOM SPACING UNDER EVERY FOOTER (901px and up)
   ──────────────────────────────────────────────────────────────────────

   "The footer spacing reduced, and the bottom spacing exactly like the
   second screenshot for all pages." The second screenshot is the home page,
   and in it the footer's rule sits 5.5% of the window above the bottom
   edge. That is clamp(25px, 2.94vh, 42px) under the 25px footer row — the
   home footer's own value from 2026-07-31, which the phone contact page was
   matched to in v1.5.9 — and at the 1728x957 the screenshot was taken at
   it puts the rule 53px above the bottom, 5.5% of the window, which is the
   screenshot's own proportion. It was 84-92px on every page before.

   The basket drawer and both finish drawers were built so their bottom
   band's rule lands on the site footer's rule (2026-08-12, "ENQUIRE NOW on
   the footer line"): panel padding = footer padding - 28px, the 28 being
   the band's 53px less the footer row's 25px. They follow the new number
   the same way. max() is the floor — below ~870px of window the footer's
   25px minimum is under 28px, and the band then sits at most 3px above the
   footer's rule instead of being given a negative padding.

   Phones keep the footer spacing each page already has. */
@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  #wadi-footer,
  body.home #wadi-footer,
  .wadi-contact #wadi-footer{
    padding-bottom:clamp(25px,2.94vh,42px)!important;
  }
  .wadi-basket-panel,
  .wadi-finish-panel{
    padding-bottom:max(0px,calc(clamp(25px,2.94vh,42px) - 28px))!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   WADI UPDATE - 2026-09-13 (CDX v1.6.6) — object filter and outer spacing
   ──────────────────────────────────────────────────────────────────────

   The mobile category rail must only be visible when the filter sheet is
   actually open. This final state rule protects it from any later "keep the
   rail visible" footer logic, so category text cannot sit over the grid.

   The single leftover portrait product keeps the base sizing: there is no
   obj-panel-n1 enlargement here.

   The outside gap is one token shared by the header top offset and the footer
   bottom padding. It is the v1.6.5 footer gap raised by 10%, so the final
   space below the footer matches the space above the fixed header. */
:root{
  --wadi-outer-gap:clamp(27.5px,3.234vh,46.2px);
  --wadi-header-top:var(--wadi-outer-gap)!important;
  --wadi-header-offset:calc(var(--wadi-header-top) + var(--wadi-header-h))!important;
}

#wadi-footer,
body.home #wadi-footer,
.wadi-contact #wadi-footer{
  padding-bottom:var(--wadi-outer-gap)!important;
}

.wadi-basket-panel,
.wadi-finish-panel{
  padding-bottom:max(0px,calc(var(--wadi-outer-gap) - 28px))!important;
}

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  body:not(.obj-filter-open) .objects-page-v2 .obj-rail{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(10px)!important;
  }

  body.obj-filter-open .objects-page-v2 .obj-rail{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   4. THE INFO STATEMENT IS AS WIDE AS THE STUDIO STATEMENT (901px and up)
   ──────────────────────────────────────────────────────────────────────

   On the studio page the statement spans the two middle columns of the
   picture grid below it. The info page's equivalent is the two portraits
   in the middle of each team row, which is the box drawn on the third
   screenshot.

   So the intro band is given the team row's own grid — the same 980px
   frame, the same four tracks, the same gutter — and the copy spans tracks
   2 to 4. Its edges are the portraits' edges by construction, at every
   width, including the proportional tracks v1.6.4 gave iPads. Nothing is
   measured and nothing can drift.

   The new statement is twice as long as the one it replaces and is now set
   at half the width, so it stands four times as tall — 128px -> 563px at
   1440x798 — and that ends the sticky intro. Pinned under the header, the
   band would reach past the bottom of that screen, and the team rows would
   scroll by underneath it unseen. It scrolls with the page now, and the
   fade that let the rows emerge from behind it goes with it.

   Justified, with the last line set left, as the studio statement already
   is at every width — so on a phone too, where the measure is untouched and
   the copy was centred. */
.info-page .info-intro-copy{
  text-align:justify!important;
  text-align-last:left!important;
}

@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  .info-page .info-sticky-panel,
  .admin-bar .info-page .info-sticky-panel{
    position:relative!important;
    top:auto!important;
  }
  .info-page .info-team-section{
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }

  .info-page .info-intro-band{
    display:grid!important;
    width:min(100%,980px)!important;
    min-height:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    grid-template-columns:minmax(170px,220px) minmax(200px,245px) minmax(200px,245px) minmax(170px,220px)!important;
    column-gap:clamp(28px,3.2vw,58px)!important;
    row-gap:0!important;
    align-items:center!important;
  }
  .info-page .info-intro-copy{
    grid-column:2 / 4!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
  }
}
@media (min-width:901px) and (max-width:1500px) and (any-pointer:coarse) and (orientation:landscape), (min-width:1201px) and (max-width:1500px) and (any-pointer:coarse){
  .info-page .info-intro-band{
    grid-template-columns:
      minmax(0,170fr)
      minmax(0,200fr)
      minmax(0,200fr)
      minmax(0,170fr)!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   5. THE CONTACT PAGE IS SET IN BLACK
   ──────────────────────────────────────────────────────────────────────

   The labels were the site's ink at 62%, the addresses and MUMBAI at 86%
   and the two icons at 86%, which read as grey against GET IN TOUCH. All
   of it is the full ink now — the same black as the heading and the menu —
   and the heading and the four labels go from 500 to 600. Every width.
   The label selector carries .contact-block so it outranks the 2026-08-26
   `.contact-block:nth-child(1) .contact-label` lock on the first label. */
body.wadi-contact .contact-page .contact-title,
body.wadi-contact .contact-page .contact-block .contact-label{
  color:var(--dark)!important;
  font-weight:600!important;
}
body.wadi-contact .contact-page .contact-block p,
body.wadi-contact .contact-page .contact-block a,
body.wadi-contact .contact-page .contact-social a,
body.wadi-contact .contact-page .contact-social svg{
  color:var(--dark)!important;
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-13 (CDX v1.6.7) — interaction and layout pass
   ══════════════════════════════════════════════════════════════════════ */

/* A smaller, shared outside edge above the header and below the footer. */
:root{
  --wadi-outer-gap:clamp(18px,2.2vh,30px);
}

/* Every overlay state locks the document while its own panel remains
   independently scrollable. The enquiry modal is above the retained basket. */
html.wadi-overlay-lock,
html.wadi-overlay-lock body{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
.wadi-modal{
  z-index:10300!important;
}

/* Give the basket action another 10px of clearance from the viewport edge. */
.wadi-basket-panel,
.wadi-finish-panel{
  padding-bottom:max(10px,calc(var(--wadi-outer-gap) - 18px))!important;
}
.wadi-basket-close,
.wadi-finish-close{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:30px!important;
  height:30px!important;
  padding:6px!important;
  font-size:0!important;
  letter-spacing:0!important;
}
.wadi-basket-close svg,
.wadi-finish-close svg{
  display:block;
  width:18px;
  height:18px;
}

/* Site-wide reveal durations and stagger delays are halved. */
.rv{
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)!important;
}
.rv.d1{transition-delay:.06s!important}
.rv.d2{transition-delay:.12s!important}
.rv.d3{transition-delay:.19s!important}
.rv.d4{transition-delay:.26s!important}
.sl{
  transition-duration:.55s!important;
}
.sl.d1{transition-delay:.075s!important}
.sl.d2{transition-delay:.15s!important}
.sl.d3{transition-delay:.23s!important}
.wipe::after{
  transition-duration:.625s!important;
}
.wipe img,
.wipe .proj-img{
  transition:opacity .3s .2s ease,transform .75s .05s cubic-bezier(.25,.46,.45,.94)!important;
}

/* Exactly two profiles occupy each desktop/iPad team viewport, with a single
   consistent horizontal gap and no accidental row gap. */
@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  .info-page .info-team-row,
  .info-page .info-team-row:first-child,
  .info-page .info-team-row:last-child{
    min-height:calc(100svh - var(--wadi-header-offset))!important;
    margin-bottom:0!important;
    column-gap:clamp(28px,3.2vw,58px)!important;
    row-gap:0!important;
  }
}

/* Category-driven portrait products: two 9:16 tiles per panel. Their column
   width matches a square tile, so the panel occupies the same screen region
   as the square grid. Partial panels always fill from the first grid slot. */
.objects-page-v2 .obj-panel-inner{
  justify-content:flex-start;
}
.objects-page-v2 .obj-panel-r9-16 .obj-tile-media{
  width:var(--obj-tile);
  height:auto;
  aspect-ratio:9 / 16;
}

/* The hover state is the second product image beneath a subtle 10% wash and
   blur, with the product title carried inside the image. */
.objects-page-v2 .obj-tile-hover-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(13,13,11,.10);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .325s ease;
  pointer-events:none;
}
.objects-page-v2 .obj-tile-hover-title{
  color:#fff;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(12px,1vw,17px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.14em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
}
@media(hover:hover){
  .objects-page-v2 .obj-tile-link:hover .obj-tile-hover-overlay{
    opacity:1;
  }
}

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  /* The mobile filter control is deliberately unframed. */
  .objects-page-v2 .obj-filter-toggle,
  body.obj-filter-open .objects-page-v2 .obj-filter-toggle{
    border:0!important;
    box-shadow:none!important;
  }

  .objects-page-v2 .obj-panel-r9-16 .obj-panel-inner{
    width:calc((var(--obj-m-tile-1-1) * 2) + var(--obj-m-gap));
  }
  .objects-page-v2 .obj-panel-r9-16 .obj-tile-media{
    width:var(--obj-m-tile-1-1);
    height:auto;
    aspect-ratio:9 / 16;
  }

  /* The contact image uses the requested 4:5 crop on phones. */
  .wadi-contact .contact-right{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4 / 5!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-13 (CDX v1.6.8) — mobile PDP/contact + form success
   ══════════════════════════════════════════════════════════════════════ */

/* Kept out of the desktop showcase; this row belongs directly below the
   phone/tablet gallery. */
.pdp-mobile-gallery-actions{
  display:none;
}

/* Make the submit control occupy the same 144 x 52 action box as Previous
   and Next. The CF7 spinner is overlaid so it cannot shift the button. */
.wadi-enquiry-submit-wrap{
  position:relative!important;
  display:flex!important;
  align-items:stretch!important;
  width:144px!important;
  min-width:144px!important;
  height:52px!important;
}
.wadi-enquiry-submit-wrap input[type="submit"]{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:52px!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.wadi-enquiry-submit-wrap .wpcf7-spinner{
  position:absolute!important;
  top:50%!important;
  right:8px!important;
  margin:0!important;
  transform:translateY(-50%)!important;
}

/* A successful CF7 send leaves one clean confirmation and a close action.
   Product steps, personal fields, progress and the native duplicate response
   are removed from the completed state. */
.wadi-enquiry-thanks{
  margin:0 0 clamp(22px,3vw,34px)!important;
  padding:clamp(28px,4vw,48px) 0!important;
  border-top:1px solid rgba(26,25,23,.14)!important;
  border-bottom:1px solid rgba(26,25,23,.14)!important;
  color:var(--dark)!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:clamp(18px,2vw,26px)!important;
  font-weight:400!important;
  line-height:1.35!important;
  text-align:center!important;
}
.wadi-enquiry-thanks[hidden]{
  display:none!important;
}
.wadi-enquiry-wizard.is-submitted [data-wadi-enquiry-progress],
.wadi-enquiry-wizard.is-submitted [data-wadi-enquiry-stage],
.wadi-enquiry-wizard.is-submitted [data-wadi-personal-step],
.wadi-enquiry-wizard.is-submitted [data-wadi-enquiry-next],
.wadi-enquiry-wizard.is-submitted [data-wadi-enquiry-submit],
.wadi-modal.wadi-enquiry-complete .wadi-modal-title,
.wadi-modal.wadi-enquiry-complete .wadi-modal-sub,
.wadi-modal.wadi-enquiry-complete .wpcf7-response-output{
  display:none!important;
}
.wadi-enquiry-wizard.is-submitted .wadi-enquiry-actions{
  justify-content:flex-start!important;
  margin-top:0!important;
}

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  .pdp-mobile-gallery-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-top:clamp(16px,4.6vw,24px);
  }
  .pdp-mobile-gallery-action{
    appearance:none;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:var(--dark)!important;
    font-family:'Playfair Display',Georgia,serif!important;
    font-size:clamp(10px,2.8vw,12px)!important;
    font-weight:500!important;
    line-height:1.2!important;
    letter-spacing:.14em!important;
    text-decoration:none!important;
    text-transform:uppercase!important;
  }
  .pdp-mobile-gallery-finishes{
    margin-left:auto;
    text-align:right;
  }
  #wadiProductSpecifications{
    scroll-margin-top:calc(var(--wadi-header-offset) + 16px);
  }

  /* Remove the older viewport-height cap that was forcing the 4:5 box back
     into a landscape crop. */
  .wadi-contact .contact-right{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4 / 5!important;
  }
}

@media(max-width:860px){
  .wadi-enquiry-submit-wrap{
    width:auto!important;
    min-width:0!important;
    height:52px!important;
    flex:1 1 0!important;
  }
}

@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  body.wadi-contact .contact-page .contact-title{
    font-size:19px!important;
  }
  body.wadi-contact .contact-page .contact-title-rule{
    margin-bottom:30px!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-13 (CDX v1.6.9) — final-step and mobile cleanup
   ══════════════════════════════════════════════════════════════════════ */

/* The aligned wrapper is display:flex, so it must explicitly honour the
   wizard's hidden state. Submit now replaces Next only on the final step. */
.wadi-enquiry-submit-wrap[hidden]{
  display:none!important;
}

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  /* The phone inherits the desktop image interaction exactly: both the second
     image and its title/blur overlay remain hidden until a real hover occurs. */
  .objects-page-v2 .wipe.on .obj-tile-hover,
  .objects-page-v2 .obj-tile-hover,
  .objects-page-v2 .obj-tile-hover-overlay{
    opacity:0;
  }
  @media(hover:hover){
    .objects-page-v2 .obj-tile-link:hover .obj-tile-hover,
    .objects-page-v2 .wipe.on .obj-tile-link:hover .obj-tile-hover,
    .objects-page-v2 .obj-tile-link:hover .obj-tile-hover-overlay{
      opacity:1;
    }
  }

  /* The mobile product page ends after the gallery action row. Product title,
     description, drawings, specification rows and finish details remain part
     of the desktop layout but are not drawn below the phone gallery. */
  .pdp-editorial-sec{
    grid-template-columns:minmax(0,1fr)!important;
    padding-bottom:clamp(28px,8vw,44px)!important;
  }
  .pdp-detail-panel,
  .pdp-info-panel{
    display:none!important;
  }
  .pdp-scroll-stack.pdp-image-carousel{
    margin-bottom:0!important;
  }
  .pdp-mobile-gallery-action{
    display:inline-flex;
    align-items:center;
    gap:.55em;
  }
  .pdp-mobile-gallery-chev{
    display:block;
    flex:0 0 auto;
    width:.6em;
    height:.75em;
  }

  /* The earlier landscape crop was 1.24:1. Adding 40% to that height while
     preserving its width gives 31:35—smaller than 4:5, but visibly taller
     than the previous image. Mobile contact may scroll so no details can be
     clipped behind the footer. */
  body.wadi-contact,
  body.wadi-contact.admin-bar{
    height:auto!important;
    min-height:100svh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  .wadi-contact .contact-page{
    flex:none!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .wadi-contact .contact-right{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:31 / 35!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-13 (CDX v1.6.10) — object grid interactions
   ══════════════════════════════════════════════════════════════════════ */

/* ALL is a permanent category option, including before a filter is active. */
.objects-page-v2 .obj-rail-all,
.objects-page-v2 .objects-index:not(.has-filter) .obj-rail-all{
  display:block!important;
}

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  /* First tap applies this class; the second tap follows the link. */
  .objects-page-v2 .obj-tile.is-previewing .obj-tile-hover,
  .objects-page-v2 .obj-tile.is-previewing .wipe.on .obj-tile-hover,
  .objects-page-v2 .obj-tile.is-previewing .obj-tile-hover-overlay{
    opacity:1;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-13 (CDX v1.6.11) — final spacing refinements
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  /* Keep 40% of the previous final-profile gap (a 60% reduction). */
  .info-page .info-team-row:last-child .info-person-text-left{
    margin-bottom:clamp(48px,6.8svh,76px)!important;
  }
}

@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  /* JS measures the first email endpoint after the active fonts load. */
  body.wadi-contact .contact-page .contact-title-rule{
    width:min(var(--wadi-contact-rule-width,392px),100%)!important;
    margin-bottom:30px!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-13 (CDX v1.6.12) — enquiry response cleanup
   ══════════════════════════════════════════════════════════════════════ */

/* Contact Form 7 always prints this container. Once its stale text has been
   cleared, it must not leave an empty bordered bar beneath the actions. */
.wadi-modal .wpcf7-response-output:empty{
  display:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}


/* ═════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-13 (CDX v1.6.14) — mobile contact bottom alignment
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  /* Fill any spare screen height so the contact copy and footer finish at
     the bottom. The zero shrink factor preserves natural document height on
     shorter screens, where the body's existing overflow-y:auto keeps every
     contact detail reachable. */
  .wadi-contact .contact-page{
    flex:1 0 auto!important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-13 (CDX v1.6.15) — requested mobile corrections
   ═════════════════════════════════════════════════════════════════════ */

/* Faster visual hand-off after the network response. The first useful
   pictures are explicitly prioritised in the templates; these shorter reveal
   durations remove the remaining artificial pause without changing layout. */
.rv{
  transition-duration:.32s!important;
}
.wipe::after{
  transition-duration:.36s!important;
}
.wipe img,
.wipe .proj-img{
  transition:opacity .16s .06s ease,transform .48s .02s cubic-bezier(.25,.46,.45,.94)!important;
}
.objects-page-v2 .obj-active-path{
  display:none;
}

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  /* An empty category still owns a complete objects viewport. That keeps the
     footer below the screen and prevents the fixed filter control from being
     lifted into a different position after a category is selected. */
  .objects-page-v2 .objects-index,
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    min-height:calc(100svh - var(--wadi-header-offset))!important;
  }
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .objects-page-v2 .objects-index.is-empty .obj-flow .obj-empty{
    margin:0;
  }
  .objects-page-v2 .objects-index.has-server-empty > .obj-none{
    display:none!important;
  }
  .objects-page-v2 .objects-index.is-empty{
    position:relative;
  }
  .objects-page-v2 .objects-index.is-empty:not(.has-server-empty) > .obj-none{
    display:flex!important;
    position:absolute;
    inset:0;
    align-items:center;
    justify-content:center;
    margin:0;
  }

  /* The supplied filter mark is the complete control: no white disc, shadow,
     border or blur is drawn behind it in either state. */
  .objects-page-v2 .obj-filter-toggle,
  body.obj-filter-open .objects-page-v2 .obj-filter-toggle{
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  /* Current parent and child labels sit in the reserved band above the first
     product row, aligned to the same edges as the mobile page frame. */
  .objects-page-v2 .obj-active-path{
    display:none;
    position:fixed;
    top:calc(var(--wadi-header-offset) + clamp(14px,2.8svh,24px));
    left:var(--wadi-page-inset);
    right:var(--wadi-page-inset);
    z-index:420;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    color:var(--dark);
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(10px,2.8vw,12px);
    line-height:1.2;
    letter-spacing:.16em;
    text-transform:uppercase;
    pointer-events:none;
  }
  .objects-page-v2 .obj-active-path.is-visible{
    display:flex;
  }
  .objects-page-v2 .obj-active-path [data-obj-active-child]{
    margin-left:auto;
    text-align:right;
  }

  /* The mobile PDP is one centred, non-scrolling composition between the
     menu rule and the now half-height enquiry bar. */
  body.single-product,
  body.single-product.admin-bar{
    --pdp-sticky-enquiry-h:28px;
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-bottom:0!important;
    overflow:hidden!important;
  }
  body.single-product .pdp-editorial-sec{
    width:var(--wadi-page-frame)!important;
    height:100svh!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:var(--wadi-header-offset) 0 calc(var(--pdp-sticky-enquiry-h) + env(safe-area-inset-bottom,0px))!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  body.single-product .pdp-scroll-stack.pdp-image-carousel{
    flex:0 0 auto!important;
    width:min(100%,52svh)!important;
    margin:0!important;
    overflow:visible!important;
  }
  body.single-product .pdp-image-window,
  body.single-product .pdp-image-slide{
    aspect-ratio:3 / 4!important;
  }
  body.single-product .pdp-mobile-gallery-actions{
    padding-top:clamp(14px,2.4svh,20px)!important;
  }
  body.single-product .pdp-enquire-btn{
    min-height:calc(var(--pdp-sticky-enquiry-h) + env(safe-area-inset-bottom,0px))!important;
    height:calc(var(--pdp-sticky-enquiry-h) + env(safe-area-inset-bottom,0px))!important;
  }

  /* The chevrons live wholly in the page gutter instead of covering the
     product photograph; their transparent hit areas remain generous. */
  body.single-product .pdp-image-nav{
    width:40px!important;
    height:84px!important;
    color:var(--dark)!important;
    filter:none!important;
  }
  body.single-product .pdp-image-prev{
    left:-40px!important;
  }
  body.single-product .pdp-image-next{
    right:-40px!important;
  }
  body.single-product .pdp-image-nav::before,
  body.single-product .pdp-image-nav::after{
    height:18px!important;
  }

  /* Add 15px to the drawer's former bottom clearance. The action and the
     selected-material thumbnail share one height at both mobile breakpoints. */
  .wadi-finish-panel{
    --wadi-finish-foot-h:44px;
    padding-bottom:max(15px,calc(var(--wadi-outer-gap) - 13px))!important;
  }
  .wadi-finish-foot-media{
    flex-basis:var(--wadi-finish-foot-h)!important;
    width:var(--wadi-finish-foot-h)!important;
    height:var(--wadi-finish-foot-h)!important;
    aspect-ratio:auto!important;
  }
  .wadi-finish-add{
    height:var(--wadi-finish-foot-h)!important;
    min-height:var(--wadi-finish-foot-h)!important;
  }

  /* GET IN TOUCH is four pixels larger on phones only. */
  body.wadi-contact .contact-page .contact-title{
    font-size:20px!important;
  }
}

@media(max-width:700px) and (max-height:700px){
  body.single-product .pdp-scroll-stack.pdp-image-carousel{
    width:min(100%,45svh)!important;
  }
}

@media(max-width:560px){
  .wadi-finish-panel{
    --wadi-finish-foot-h:36px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-14 (CLD v1.6.16) — requested corrections
   ══════════════════════════════════════════════════════════════════════

     1. Pictures load fast everywhere (functions.php + site.js); the
        <picture> wrapper they now come in is invisible to layout.
     2. Desktop and iPad product page: one photograph per scroll, and the
        logo, menu, name, SPECIFICATIONS, FINISHES and ENQUIRE turn white
        over a dark photograph (site.js decides; these rules draw it).
     3. Phone objects page: the category bar sits directly above each
        grid with a grey rule like the header's; the last grid sits just
        above the footer; one tap opens a product.
     4. Phone contact page: nothing fades in; it is simply there.
     5. Enquiry form: Previous, Next and Submit are always one width, and
        the thank-you message has no CLOSE button under it.
     6. Studio lightbox: previous / next arrows on every device.

   ──────────────────────────────────────────────────────────────────────
   1. <picture class="wadi-pic">
   ──────────────────────────────────────────────────────────────────────
   display:contents removes the wrapper's own box, so the <img> inside is
   laid out as the direct child of the figure or tile it always was. Every
   rule above that sizes, crops or animates these pictures still applies
   unchanged. */
picture.wadi-pic{
  display:contents;
}


/* ──────────────────────────────────────────────────────────────────────
   2. THE PRODUCT PAGE SHOWCASE: PAGING AND INK (901px and up)
   ──────────────────────────────────────────────────────────────────────

   site.js pages the showcase one photograph at a time and sets
   .is-ink-light on the logo, on each menu item, and on the name and the
   three actions, wherever the photograph behind that element is dark.
   White is the only ink change; everything else about each element —
   size, tracking, hover — is as it was.

   The logo is a picture of dark lettering, so it is turned white rather
   than recoloured: brightness(0) takes it to black whatever its artwork,
   and invert(1) takes black to white. The Devanagari wordmark is an SVG
   with the same class and follows the same rule.

   The divider between the language switcher and the bag is a 22% ink
   hairline; over a dark photograph it becomes a 55% white one. The open
   language menu is a white card with dark text and is deliberately NOT
   touched: `nav > a` and the toggle are matched, never the menu's links.

   On an iPad the pager needs the browser to leave vertical panning to it,
   exactly as on the objects page (see the 2026-09-03 note there): body
   withholds the pan while the pager is on, and hands it straight back the
   moment any drawer, the enquiry form or the lightbox opens, so each of
   those still scrolls its own contents. any-pointer, so an iPad with a
   keyboard or trackpad attached is still covered. */
@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  html.wadi-pdp-paged,
  html.wadi-pdp-paged body{
    scroll-behavior:auto!important;
  }

  body.single-product .pdp-show .pdp-show-title,
  body.single-product .pdp-show .pdp-show-link,
  body.single-product .pdp-show .pdp-show-enquire,
  body.single-product header#hdr nav > a,
  body.single-product header#hdr nav .wadi-lang-toggle,
  body.single-product header#hdr nav .wadi-basket-count{
    transition:color .35s ease,opacity .3s ease!important;
  }
  body.single-product header#hdr .logo .logo-img{
    transition:filter .35s ease!important;
  }
  body.single-product header#hdr nav > .wadi-header-divider{
    transition:background-color .35s ease!important;
  }

  body.single-product .pdp-show .pdp-show-title.is-ink-light,
  body.single-product .pdp-show .pdp-show-link.is-ink-light,
  body.single-product .pdp-show .pdp-show-enquire.is-ink-light{
    color:#FFFFFF!important;
  }

  body.single-product header#hdr .logo.is-ink-light .logo-img{
    filter:brightness(0) invert(1)!important;
  }
  body.single-product header#hdr nav > a.is-ink-light,
  body.single-product header#hdr nav > a.wadi-basket-link.is-ink-light .wadi-basket-count,
  body.single-product header#hdr nav > .wadi-lang.is-ink-light > .wadi-lang-toggle{
    color:#FFFFFF!important;
  }
  body.single-product header#hdr nav > .wadi-header-divider.is-ink-light{
    background:rgba(255,255,255,.55)!important;
  }
}

@media (min-width:901px) and (any-pointer:coarse) and (orientation:landscape), (min-width:1201px) and (any-pointer:coarse){
  html.wadi-pdp-paged body{
    touch-action:pan-x pinch-zoom!important;
    overscroll-behavior-y:none!important;
  }
  html.wadi-pdp-paged body.wadi-basket-open,
  html.wadi-pdp-paged body.wadi-modal-open,
  html.wadi-pdp-paged body.wadi-finish-open,
  html.wadi-pdp-paged body.pdp-lightbox-active{
    touch-action:auto!important;
    overscroll-behavior-y:auto!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   3. THE PHONE OBJECTS PAGE
   ──────────────────────────────────────────────────────────────────────

   --- a. The category bar is part of each panel -----------------------

   Two screenshots. In the first, LIGHTING and FLOOR floated under the
   menu with ~100px of empty page between them and the pictures. In the
   second, the same two labels sat ON the pictures. One cause: the labels
   were a single position:fixed strip under the header, and a panel is
   centred in the screen — so the gap was whatever the centring left, and
   on the footer stop, where the last panel is pushed up, the pictures
   rode up underneath the strip.

   The bar is now the first thing inside every panel (page-collection.php
   and site.js draw it): CATEGORY > SUBCATEGORY on the left, each part a
   link, the running count on the right, a hairline under it, then the
   pictures. It is in the flow above its own grid, so it is always exactly
   there and can never overlap a picture, on any screen, at any stop.

   The rule is the header's rule — same 1px, same 12% ink, and the same
   relationship to the words above it: on the header the menu sits inside
   the rule, which runs out to the page gutter, and here the labels line
   up with the pictures while the rule runs out to that same gutter. The
   gaps are the header's too: ~16px from the words to the rule.

   The bar's height is taken out of the strip the tiles are sized from, so
   on a short screen where the tile height binds, the pictures give up that
   height instead of pushing the grid past the filter button. On a normal
   phone the column binds and the tiles are exactly the size they were.

   --- b. The last panel ends on the footer ------------------------------

   "The bottom gap between footer and last product grid must be very
   low." Every panel is a full screen tall so that only one grid is in
   view at a stop, and the last one was too — its pictures centred, the
   footer after it, so the last stop showed ~250px of empty page between
   the last row and the footer.

   The last panel now gives back the footer's height (--obj-foot-h, which
   site.js measures) and stands its bar and pictures on its bottom edge,
   leaving only the room the floating filter button needs: its bottom
   offset, its 54px, and 12px of air. At the last stop the order is bar,
   pictures, filter button, footer. The panel is still exactly one stop
   tall, so the page lands on it cleanly and nothing of the panel above
   shows. A category that fits on one screen fills exactly one screen,
   with its footer.

   --- c. One tap opens a product ---------------------------------------

   The phone's second picture under a blurred title (first tap preview,
   second tap open) is gone. Neither the picture nor the overlay is drawn
   below 901px, the hover picture is never downloaded there, and site.js
   no longer holds the first tap back. Desktop hover is untouched. */
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  .objects-page-v2{
    --obj-m-bar-gap:15px;
    --obj-m-bar-under:18px;
    --obj-m-bar:48px;
    --obj-m-grid-w:calc((var(--obj-m-tile-1-1) * 2) + var(--obj-m-gap));
    --obj-m-strip:calc(
      var(--obj-m-vh)
      - var(--wadi-header-offset)
      - var(--obj-m-top)
      - var(--obj-m-head)
      - var(--obj-m-bottom)
      - var(--obj-m-bar)
    );
    --obj-m-end:calc(clamp(18px,3.2svh,32px) + 54px + 12px);
  }

  .objects-page-v2 .obj-panel{
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .objects-page-v2 .obj-panel-head{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex:0 0 auto;
    width:var(--obj-m-grid-w);
    max-width:100%;
    margin:0 0 var(--obj-m-bar-under);
    padding:0 0 var(--obj-m-bar-gap);
    color:var(--dark);
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(10px,2.8vw,12px);
    font-weight:400;
    line-height:1.2;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .objects-page-v2 .obj-panel-r2-3 .obj-panel-head{
    width:calc((var(--obj-m-tile-2-3) * 2) + var(--obj-m-gap));
  }
  .objects-page-v2 .obj-panel-head::after{
    content:'';
    position:absolute;
    bottom:0;
    left:calc(var(--wadi-edge) - (100vw - var(--obj-m-grid-w)) / 2);
    right:calc(var(--wadi-edge) - (100vw - var(--obj-m-grid-w)) / 2);
    height:1px;
    background:rgba(26,25,23,.12);
    pointer-events:none;
  }
  .objects-page-v2 .obj-crumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.2em .75em;
    min-width:0;
  }
  .objects-page-v2 .obj-crumb-link{
    color:inherit!important;
    text-decoration:none!important;
  }
  .objects-page-v2 .obj-crumb-sep{
    display:block;
    flex:0 0 auto;
    width:.55em;
    height:.7em;
  }
  .objects-page-v2 .obj-count{
    flex:0 0 auto;
    margin-left:auto;
    text-align:right;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  body.wadi-devanagari .objects-page-v2 .obj-panel-head{
    font-family:'Noto Serif Devanagari','Playfair Display',Georgia,serif;
    letter-spacing:.04em;
  }

  /* b. The index is exactly as tall as its panels, and the last panel
     ends on the footer. v1.6.15's full-screen minimum stays for the empty
     state, which has no panels.

     The footer's own 76px top margin (the phone rule every page shares)
     was part of the same empty band on this page, and the filter button
     already has its room inside the last panel, so here it goes. */
  .objects-page-v2 .objects-index:not(.is-empty){
    min-height:0!important;
  }
  .objects-page-v2 ~ #wadi-footer{
    margin-top:0!important;
  }
  .objects-page-v2 .obj-panel:last-child{
    min-height:calc(var(--obj-m-vh) - var(--wadi-header-offset) - var(--obj-m-top) - var(--obj-foot-h,48px));
    padding-bottom:var(--obj-m-end);
    justify-content:flex-end;
  }
  /* A single panel is also the first screen, which the page opens on with
     no pager gap above it. */
  .objects-page-v2 .obj-panel:only-child{
    min-height:calc(var(--obj-m-vh) - var(--wadi-header-offset) - var(--obj-foot-h,48px));
  }

  /* c. */
  .objects-page-v2 .obj-tile-hover,
  .objects-page-v2 .obj-tile-hover-overlay{
    display:none!important;
  }
}

/* A phone turned on its side has ~250px under its header. The tiles there
   are already at their 64px floor with v1.6.15's layout, and a grid that
   narrow cannot carry the bar without it wrapping and pushing the pictures
   into the filter button. So on that one screen the panels are exactly as
   v1.6.15 drew them, without the bar; upright, the bar is always there. */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  .objects-page-v2{
    --obj-m-bar:0px;
  }
  .objects-page-v2 .obj-panel-head{
    display:none;
  }
}

/* The bar is a phone element; the desktop and iPad rail already names the
   category, underlined. */
@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  .objects-page-v2 .obj-panel-head{
    display:none;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   4. THE PHONE CONTACT PAGE IS SIMPLY THERE
   ──────────────────────────────────────────────────────────────────────
   Every block on the page carries the site's .rv reveal (fade up 28px as
   it scrolls into view). On a phone the page is short and the fade read
   as the details arriving late; they are drawn at once, in place. Above
   900px the reveal is unchanged. */
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  body.wadi-contact .contact-page .rv,
  body.wadi-contact .contact-page .rv.on{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   5. THE ENQUIRY FORM'S BUTTONS
   ──────────────────────────────────────────────────────────────────────
   Measured before this change at 390px: Previous 159 / Next 159 on the
   product steps, but Previous 182 / Submit 136 on the last one. Each is
   `flex:1 1 0`, and a flex basis of zero still keeps an item's padding —
   the two <button>s carry 22px a side, the Submit wrapper carries none, so
   Previous out-grew it by exactly 44px. Desktop was already 144 / 144.

   One rule for every device now: each action is a fixed 144px wide; below
   861px each is exactly half the row less half the 10px gap between them.
   An explicit width rather than a flex share, because a share is still
   inflated by whatever padding and border the item carries — Previous has
   a 1px outline and Submit's wrapper has none, which alone left them 2px
   apart. The labels are centred, so the side padding is simply dropped.

   The thank-you message stands alone: the CLOSE button that used to sit
   bottom-left under it is not drawn — the cross at the top right of the
   box is the way out, as it is on every other screen of the form. */
.wadi-enquiry-actions .wadi-enquiry-nav,
.wadi-enquiry-actions .wadi-enquiry-submit-wrap{
  box-sizing:border-box!important;
  flex:0 0 144px!important;
  width:144px!important;
  min-width:144px!important;
}
@media(max-width:860px){
  .wadi-enquiry-actions .wadi-enquiry-nav,
  .wadi-enquiry-actions .wadi-enquiry-submit-wrap{
    flex:0 0 calc(50% - 5px)!important;
    width:calc(50% - 5px)!important;
    min-width:0!important;
    max-width:calc(50% - 5px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}
.wadi-enquiry-wizard.is-submitted .wadi-enquiry-actions{
  display:none!important;
}
.wadi-enquiry-wizard.is-submitted .wadi-enquiry-thanks{
  margin-bottom:0!important;
}


/* ──────────────────────────────────────────────────────────────────────
   6. THE STUDIO LIGHTBOX
   ──────────────────────────────────────────────────────────────────────
   site.js now opens the studio photographs as one gallery, so the arrows
   the product lightbox draws on a phone — outlined squares either side of
   the picture, in the row with it — appear here on every device. The
   product gallery's thumbnail strip is not part of the request and is not
   drawn for the studio; the photograph keeps that height. */
.pdp-lightbox.is-studio .pdp-lightbox-thumbs{
  display:none!important;
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-14 (CLD v1.6.17) — requested corrections
   ══════════════════════════════════════════════════════════════════════

     1. Phone objects page: one category bar, fixed under the header, with
        only its count changing ("4/20 PRODUCTS"); every grid centred in
        the same place under it; and the footer at the bottom of the screen
        whatever the category holds — many pieces, one, or none.
     2. Phone product page: the arrows either side of the gallery are drawn
        whole. They were being cut off at the edge of the page frame.
     3. Enquiry form: the thank-you message sits in the middle of a phone's
        screen, and its close cross sits above the message's top rule,
        flush with the rule's right end.
     4. Enquiry form: CF7's error message sits above Previous / Submit
        (functions.php prints it there with [response]).
     5. Desktop and iPad contact page: the rule under GET IN TOUCH runs to
        where the longer address's ".com" ends. site.js measures it; the
        rule already reads the width it writes.

   ──────────────────────────────────────────────────────────────────────
   1. THE PHONE OBJECTS PAGE
   ──────────────────────────────────────────────────────────────────────

   Three screens were compared: LIGHTING, SEATING (one short panel) and
   OBJECTS (empty). In v1.6.16 each drew its own layout — the bar sat on
   top of each panel's grid, so it was high on LIGHTING and low on SEATING,
   where the single panel stood on the footer, and the empty category was
   a full screen with the footer below it, off the bottom. Now all three
   are the same screen:

     header
     the bar  — .obj-bar, position:fixed right under the header; the words
                line up with the pictures, the grey rule runs under them
     the grid — centred between the bar and the filter button
     the filter button
     the footer, at the last stop (on a one-panel or empty category, that
                is the first and only screen)

   HOW EVERY STOP COMES OUT THE SAME. A panel is exactly one window under
   the bar tall (--obj-m-stop), and the pager (site.js) lands it with its
   top on the bar's rule. The last panel is shorter by the footer's height
   (--obj-foot-h, measured by site.js) and gives the same amount back from
   its bottom padding, so its grid is centred on exactly the line every
   other grid is, and when the page reaches the end the footer fills the
   bottom of the screen. An empty category is that last panel with the
   message in place of the grid.

   THE FILTER BUTTON NO LONGER RIDES UP. It used to sit 18-32px above the
   bottom of the window and rise with the footer at the last stop, which
   moved it — and the grid centred above it would have had to move too.
   It now always sits where it rose to: the same gap above the footer's
   top edge, footer on screen or not. The grid is centred between the bar
   and the button, keeping 18px clear of each on a screen short enough
   for the pictures to shrink. The desktop and iPad rail still rides.

   A phone on its side (under 501px tall) is left exactly as it was: there
   is no room there for the bar, so it is not drawn, and the pager goes
   back to its old stops. The first media query is written as "portrait,
   or taller than 500px" for that reason.

   v1.6.16's .obj-panel-head rules above are left in place and match
   nothing: neither page-collection.php nor site.js draws that element
   any more. */
.objects-page-v2 .obj-bar{
  display:none;
}

@media (max-width:900px) and (orientation:portrait), (max-width:900px) and (min-height:501px), (orientation:portrait) and (min-width:901px) and (max-width:1200px){
  /* Declared on the index rather than on <main>: --obj-foot-h is written
     onto the index by site.js, and a custom property can only see the
     ones on its own element and its ancestors. The tile sizes are
     restated here for the same reason, from the same formula as before,
     so they size from the new strip. */
  .objects-page-v2 .objects-index{
    --obj-m-barh:49px;
    --obj-m-air:18px;
    --obj-m-stop:calc(var(--obj-m-vh) - var(--wadi-header-offset) - var(--obj-m-barh));
    --obj-m-toggle-b:calc(var(--obj-foot-h,48px) + clamp(18px,3.2svh,32px));
    --obj-m-clear:calc(var(--obj-m-toggle-b) + 54px + var(--obj-m-air));
    --obj-m-strip:calc(var(--obj-m-stop) - var(--obj-m-air) - var(--obj-m-clear));
    --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)));
    --obj-m-grid-w:calc((var(--obj-m-tile-1-1) * 2) + var(--obj-m-gap));
  }

  /* The bar. 18px from the header rule to the words, 16px from the words
     to its own rule — the header's own spacing, and where the supplied
     screenshot has them. The words and the rule span the grid. */
  .objects-page-v2 .obj-bar{
    position:fixed;
    top:var(--wadi-header-offset);
    left:0;
    right:0;
    z-index:4990;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    height:var(--obj-m-barh);
    padding:0 calc((100% - var(--obj-m-grid-w)) / 2) 16px;
    background:#FFFFFF;
    color:var(--dark);
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(10px,2.8vw,12px);
    font-weight:400;
    line-height:1.2;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .objects-page-v2 .obj-bar::after{
    content:'';
    position:absolute;
    left:calc((100% - var(--obj-m-grid-w)) / 2);
    right:calc((100% - var(--obj-m-grid-w)) / 2);
    bottom:0;
    height:1px;
    background:rgba(26,25,23,.12);
    pointer-events:none;
  }
  .objects-page-v2 .obj-bar .obj-crumb{
    flex-wrap:nowrap;
    overflow:hidden;
    white-space:nowrap;
  }
  body.wadi-devanagari .objects-page-v2 .obj-bar{
    font-family:'Noto Serif Devanagari','Playfair Display',Georgia,serif;
    letter-spacing:.04em;
  }

  /* The panels: one stop each, the first starting under the bar. */
  .objects-page-v2 .obj-flow{
    padding-top:var(--obj-m-barh);
  }
  .objects-page-v2 .obj-panel{
    min-height:var(--obj-m-stop);
    padding-top:var(--obj-m-air);
    padding-bottom:var(--obj-m-clear);
    justify-content:center;
  }
  .objects-page-v2 .obj-panel:last-child,
  .objects-page-v2 .obj-panel:only-child{
    min-height:calc(var(--obj-m-stop) - var(--obj-foot-h,48px));
    padding-bottom:max(0px,calc(var(--obj-m-clear) - var(--obj-foot-h,48px)));
    justify-content:center;
  }

  /* The empty category is the last panel with the message in it. */
  .objects-page-v2 .objects-index.is-empty,
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    min-height:calc(var(--obj-m-vh) - var(--wadi-header-offset) - var(--obj-foot-h,48px))!important;
  }
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    padding-top:calc(var(--obj-m-barh) + var(--obj-m-air));
    padding-bottom:max(0px,calc(var(--obj-m-clear) - var(--obj-foot-h,48px)));
  }
  .objects-page-v2 .objects-index.is-empty .obj-flow .obj-empty,
  .objects-page-v2 .objects-index.is-empty:not(.has-server-empty) > .obj-none{
    padding-top:0;
    padding-bottom:0;
  }
  .objects-page-v2 .objects-index.is-empty:not(.has-server-empty) > .obj-none{
    top:calc(var(--obj-m-barh) + var(--obj-m-air));
    bottom:max(0px,calc(var(--obj-m-clear) - var(--obj-foot-h,48px)));
  }

  /* The filter button, in one place for good. */
  .objects-page-v2 .obj-filter-toggle{
    bottom:var(--obj-m-toggle-b);
    transform:translateX(-50%);
  }
}

/* A phone on its side keeps v1.6.16's layout, bar or no bar — but its
   empty category now also ends on the footer, like every other one. */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  .objects-page-v2 .objects-index.is-empty,
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    min-height:calc(var(--obj-m-vh) - var(--wadi-header-offset) - var(--obj-foot-h,48px))!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   2. THE PHONE PRODUCT GALLERY'S ARROWS
   ──────────────────────────────────────────────────────────────────────
   v1.6.15 moved the two chevrons off the photograph into the gutter
   beside it (40px outside the carousel). But the section that holds the
   carousel is the page frame, and it clipped anything outside itself —
   so where the photograph fills the frame, the chevrons were cut away
   entirely, and where it is a little narrower (a shorter screen, as in
   the screenshot), only the tips of the two strokes survived, as two
   faint marks. The section no longer clips: nothing else in it reaches
   outside it (the slides are clipped by their own window, and the
   ENQUIRE bar is fixed), and the page itself still cannot scroll. The
   chevrons are drawn at full ink rather than 72%, since a touch screen
   never shows their hover state. */
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  body.single-product .pdp-editorial-sec{
    overflow:visible!important;
  }
  body.single-product .pdp-image-nav{
    opacity:1!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   3. THE THANK-YOU MESSAGE
   ──────────────────────────────────────────────────────────────────────
   On a phone the dialog is pinned to the top of the screen, because the
   form's steps are taller than the screen and scroll inside it. The
   thank-you is a few lines, so once the form is sent the dialog is
   centred instead.

   The cross sat 18px from the box's top and right edges, which put it
   ON the message's top rule and 6px short of the rule's right end. It
   now sits above the rule — the rule moves down to 16px under the cross
   — and its right edge is the rule's right end: the button's 6px of
   padding around the 18px mark is taken off its right offset. The cross
   is also set in the site's ink: a <button> left to the browser is drawn
   in iOS's system blue, which is the pale blue in the screenshot. */
.wadi-modal .wadi-modal-close{
  color:var(--dark)!important;
}
.wadi-modal.wadi-enquiry-complete .wadi-modal-close{
  top:18px!important;
  right:calc(clamp(26px,3.4vw,44px) - 6px)!important;
}
.wadi-modal.wadi-enquiry-complete .wadi-modal-box{
  padding-top:58px!important;
}
@media(max-width:860px){
  .wadi-modal.wadi-enquiry-complete{
    align-items:center!important;
  }
  .wadi-modal.wadi-enquiry-complete .wadi-modal-close{
    top:12px!important;
    right:12px!important;
  }
  .wadi-modal.wadi-enquiry-complete .wadi-modal-box{
    padding-top:52px!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   4. THE FORM'S ERROR MESSAGE
   ──────────────────────────────────────────────────────────────────────
   Now printed above the buttons, it takes the same gap above itself as
   the buttons keep above them, so it sits evenly between the fields and
   the buttons. Hidden, as before, while it has nothing to say. */
.wadi-modal .wpcf7-response-output{
  margin:clamp(22px,3vw,34px) 0 0!important;
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-14 (CLD v1.6.18) — requested corrections
   ══════════════════════════════════════════════════════════════════════

     1. Phone objects page: the category bar sits a little above the
        pictures instead of right under the header — still fixed, still
        the same place on every screen.
     2. Phone objects page: only the grid on screen is drawn. The next
        grid no longer shows under Safari's floating toolbar.
     3. Enquiry form: the thank-you message is half the size, text too.
     4. Phone product page: everything, ENQUIRE NOW included, is on
        screen from the start, and the page no longer scrolls.

   ──────────────────────────────────────────────────────────────────────
   1 + 2. THE PHONE OBJECTS PAGE
   ──────────────────────────────────────────────────────────────────────

   1. The bar is lowered to sit 16px above the pictures. That means the
   pictures must start on the same line in every panel — the bar is fixed
   and cannot follow them — so every grid is now top-aligned on one line,
   --obj-m-t, rather than centred in its panel. The line is where v1.6.17
   put the top of a centred two-portrait grid, so on the screen supplied
   those pictures have not moved at all and only the bar has come down to
   them; four squares start on the same line and reach further down. The
   line is clamped so that four squares always fit above the filter
   button, and never rises above where the bar used to be. Tile sizes
   are exactly v1.6.17's.

   The bar is still one white band from the header down to its own rule,
   so pictures moving between stops pass under it as before; the words
   and rule are simply at the bottom of a taller band. Each panel starts
   on that rule, as v1.6.17's did.

   2. On an iPhone with Safari's floating toolbar, about 100px of page
   shows below the bottom of the window, around and through the toolbar
   — and the next panel's pictures started 76px below the window, in that
   strip. Every panel but the last is now 160px taller than a stop. The
   pager still lands each panel's top on the bar, so nothing on screen
   moves, but the next grid now starts ~180px below the window and the
   one before ends ~100px above it — neither can show at either end. The
   last panel keeps its size, so the footer still ends the page at the
   bottom of the window. */
@media (max-width:900px) and (orientation:portrait), (max-width:900px) and (min-height:501px), (orientation:portrait) and (min-width:901px) and (max-width:1200px){
  .objects-page-v2 .objects-index{
    /* v1.6.17's fixed bar (49px) and the air under it (18px): what the
       tile strip and the centred line were measured from, kept as a
       constant so neither changes. */
    --obj-m-top0:67px;
    --obj-m-under:16px;
    --obj-m-extra:160px;
    --obj-m-strip:calc(var(--obj-m-vh) - var(--wadi-header-offset) - var(--obj-m-top0) - var(--obj-m-clear));
    --obj-m-h916:calc(var(--obj-m-tile-1-1) * 16 / 9);
    --obj-m-h4:calc((var(--obj-m-tile-1-1) * 2) + var(--obj-m-row));
    --obj-m-reg-b:calc(var(--obj-m-vh) - var(--obj-m-clear));
    --obj-m-t:clamp(
      calc(var(--wadi-header-offset) + 63px),
      calc(((var(--wadi-header-offset) + var(--obj-m-top0) + var(--obj-m-reg-b)) / 2) - (var(--obj-m-h916) / 2)),
      calc(var(--obj-m-reg-b) - var(--obj-m-h4))
    );
    /* The bar's band, header to rule. --obj-m-stop (v1.6.17) reads it. */
    --obj-m-barh:calc(var(--obj-m-t) - var(--obj-m-under) - var(--wadi-header-offset));
  }

  .objects-page-v2 .obj-bar{
    padding-bottom:14px;
  }

  .objects-page-v2 .obj-panel{
    min-height:calc(var(--obj-m-stop) + var(--obj-m-extra));
    padding-top:var(--obj-m-under);
    padding-bottom:0;
    justify-content:flex-start;
  }
  .objects-page-v2 .obj-panel:last-child,
  .objects-page-v2 .obj-panel:only-child{
    min-height:calc(var(--obj-m-stop) - var(--obj-foot-h,48px));
    padding-top:var(--obj-m-under);
    padding-bottom:0;
    justify-content:flex-start;
  }

  /* An empty category keeps its message centred where it was: on the
     centre line of a two-portrait grid, clear of the lowered bar. */
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    padding-top:var(--obj-m-top0);
  }
  .objects-page-v2 .objects-index.is-empty:not(.has-server-empty) > .obj-none{
    top:var(--obj-m-top0);
  }
}


/* ──────────────────────────────────────────────────────────────────────
   3. THE THANK-YOU MESSAGE, AT HALF SIZE
   ──────────────────────────────────────────────────────────────────────
   Every measure of the sent state is halved: the box's width and padding,
   the space between the rules and the words, the words themselves (26 ->
   13px on a desktop, 18 -> 9px on a phone), the cross (18 -> 9px) and
   its distance from the rule (16 -> 8px). The cross keeps a finger-sized
   target: its padding stays 8px and its offsets are taken back by the
   same 8px, so the mark sits exactly where a halved layout puts it —
   above the rule, flush with its right end. */
.wadi-modal.wadi-enquiry-complete .wadi-modal-box{
  width:min(490px,47vw)!important;
  padding:clamp(13px,1.7vw,22px)!important;
  padding-top:29px!important;
  border-radius:4px!important;
}
.wadi-modal.wadi-enquiry-complete .wadi-enquiry-thanks{
  padding:clamp(14px,2vw,24px) 0!important;
  font-size:clamp(9px,1vw,13px)!important;
}
.wadi-modal.wadi-enquiry-complete .wadi-modal-close{
  padding:8px!important;
  top:4px!important;
  right:calc(clamp(13px,1.7vw,22px) - 8px)!important;
}
.wadi-modal.wadi-enquiry-complete .wadi-modal-close svg{
  display:block;
  width:9px;
  height:9px;
}
@media(max-width:860px){
  .wadi-modal.wadi-enquiry-complete .wadi-modal-box{
    width:min(47vw,320px)!important;
    padding:12px 9px!important;
    padding-top:26px!important;
  }
  .wadi-modal.wadi-enquiry-complete .wadi-modal-close{
    top:1px!important;
    right:1px!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   4. THE PHONE PRODUCT PAGE STAYS ON ONE SCREEN
   ──────────────────────────────────────────────────────────────────────
   Recorded on an iPhone: ENQUIRE NOW sat under Safari's floating toolbar
   and only came into view when the page was scrolled. Two causes.

   The page could scroll at all. The body was locked with overflow:hidden,
   but <html> carries overflow-x:clip, which stops the browser from
   applying the body's overflow to the window — so the lock never held
   (the same trap the drawers hit in v1.6.7). The lock is now on <html>.

   The page was sized from 100svh, and the bar was pinned to bottom:0. On
   iOS 26 neither is guaranteed to be the part of the screen the toolbar
   leaves clear. The page is now sized from the window height site.js
   measured when it loaded (--wadi-vh-px), or 100svh if that is smaller,
   and the bar is placed from the TOP of the window at that height — so it
   is always the last thing above the toolbar, directly under the
   gallery, whatever the toolbar does afterwards. On any other phone that
   is exactly where bottom:0 put it. */
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  html:has(> body.single-product){
    overflow:hidden!important;
  }
  body.single-product,
  body.single-product.admin-bar{
    --pdp-vh:min(100svh,var(--wadi-vh-px,100svh));
    height:var(--pdp-vh)!important;
    min-height:var(--pdp-vh)!important;
    max-height:var(--pdp-vh)!important;
  }
  body.single-product .pdp-editorial-sec{
    height:var(--pdp-vh)!important;
  }
  body.single-product .pdp-enquire-btn{
    top:calc(var(--pdp-vh) - var(--pdp-sticky-enquiry-h) - env(safe-area-inset-bottom,0px))!important;
    bottom:auto!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-16 (CLD v1.6.19) — desktop and iPad only (901px
   and up). Phones are untouched.
   ══════════════════════════════════════════════════════════════════════

   1. OBJECTS: portrait (9:16) pieces are as tall as the square grid — two
      squares and the gap between them — so they start on the square
      grid's top line and end on its bottom line, which is the OBJECTS line
      of the category rail. Width is unchanged (one square tile).

   2. OBJECTS: a short last panel fills the grid in order. The inner box is
      always the full two-row block, packed from the top-left, so a single
      piece sits in the first slot instead of floating mid-screen.

   3. OBJECTS: an empty category still owns a full panel's height, so the
      footer stays below the screen as it does for every other category
      (and the fixed rail is not lifted with it). The message stays where
      it is. A category that is empty on page load shows the message once.

   4. INFO: each team row spans the page frame — the header's own width,
      logo to basket — and the portraits grow into it, so the biographies
      reach both edges. The tracks keep their 170:200:200:170 proportion.
      Both sides use the site's 14px heading and 14px body text. */
@media (min-width:901px) and (orientation:landscape), (min-width:1201px){
  .objects-page-v2 .obj-panel-inner{
    height:var(--obj-block);
    justify-content:flex-start;
    align-content:flex-start;
  }
  .objects-page-v2 .obj-panel-r9-16 .obj-tile-media,
  .objects-page-v2 .obj-panel-r2-3 .obj-tile-media{
    height:var(--obj-block);
    aspect-ratio:auto;
  }

  .objects-page-v2 .objects-index.is-empty{
    min-height:calc(100svh - var(--wadi-header-offset))!important;
  }
  .objects-page-v2 .objects-index.has-server-empty > .obj-none{
    display:none!important;
  }

  .info-page .info-team-row,
  .info-page .info-team-row:first-child,
  .info-page .info-team-row:last-child{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    grid-template-columns:
      minmax(0,170fr)
      minmax(0,200fr)
      minmax(0,200fr)
      minmax(0,170fr)!important;
  }
  .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;
  }
  .info-page .info-person-text h2,
  body .info-page .info-person-text h2,
  .info-page .info-person-text p,
  body .info-page .info-person-text p{
    font-size:14px!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-16 (CLD v1.6.20) — every width.
   ══════════════════════════════════════════════════════════════════════

   FINISHES page: each card's square now holds the finish's own swatch
   photograph (assets/finishes/, 3:2 with the sphere centred), cropped to
   the square the gradient used to fill. Grid, card and name are unchanged.
   Product-page swatches need nothing here: the rail, drawers and footers
   already crop an uploaded swatch image to their own frames. */
.finishes-page .finish-card.has-image .finish-swatch{
  background:#F1EFEA;
}
.finishes-page .finish-card.has-image .finish-swatch img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-16 (CLD v1.6.21) — every width.
   ══════════════════════════════════════════════════════════════════════

   FINISHES drawers: the selected swatch is marked by its outline alone.
   The round tick in its corner is gone from the markup, and this rule
   keeps it hidden should a cached page still carry it.

   The outline sits 3px outside the swatch, but the scroll box had no side
   padding, so its overflow cut the outline off the left of the first
   column and the right of the last. The box now reaches 4px further on
   each side and pads the same 4px back in: the content stays exactly
   where it was and the whole outline shows. */
.wadi-finish-check,
.wadi-finish-card.is-selected .wadi-finish-check{
  display:none!important;
}
.wadi-finish-scroll{
  margin-left:-4px!important;
  margin-right:-4px!important;
  padding-left:4px!important;
  padding-right:4px!important;
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-16 (CLD v1.6.22) — every device.
   ══════════════════════════════════════════════════════════════════════

   INFO page scroll snapping. site.js pages the statement,
   each screen of profiles and the footer (see the INFO pager there), and
   adds .wadi-info-paged to <html> while it drives.

   The page is moved only by that pager: scroll-behavior stays auto so its
   easing is the only animation, and on any touch screen body withholds the
   vertical pan so the browser cannot start a momentum scroll underneath a
   swipe — the same arrangement as the objects page and the product
   showcase. The basket and the enquiry form hand the pan straight back
   while they are open, so each still scrolls its own contents. */
html.wadi-info-paged,
html.wadi-info-paged body{
  scroll-behavior:auto!important;
}
@media (any-pointer:coarse){
  html.wadi-info-paged body{
    touch-action:pan-x pinch-zoom!important;
    overscroll-behavior-y:none!important;
  }
  html.wadi-info-paged body.wadi-basket-open,
  html.wadi-info-paged body.wadi-modal-open{
    touch-action:auto!important;
    overscroll-behavior-y:auto!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-09-19 (CLD v1.6.23) — phones only (900px and under).
   Desktop and iPad (901px and up) are untouched.
   ══════════════════════════════════════════════════════════════════════

     1. OBJECTS: every grid is centred in the white space between the
        header's rule and the bottom of the screen.
     2. OBJECTS: the footer is never on the first screen. It is one scroll
        past the last grid, whatever the category holds — many pieces, two,
        or none.
     3. FOOTER: PRIVACY is set at the copyright line's size, still black.

   ──────────────────────────────────────────────────────────────────────
   1 + 2. THE PHONE OBJECTS PAGE
   ──────────────────────────────────────────────────────────────────────

   In the supplied screenshot (ALL, four squares) the pictures sat about
   18px above the middle of the white space. They were never centred in
   it: v1.6.18 put every grid's top on one line, worked out from a two-
   portrait grid centred between the bar and a filter button that was held
   a footer's height (44px) above the bottom of the window, so that the
   button would not move at the footer stop.

   The footer is off the screen now, so the button goes back to the foot
   of the window (18-32px up, where v1.5.9 drew it) and the white space is
   the whole window under the header. --obj-m-c is its centre line, and
   every grid is centred on it: four squares, two portraits, and the one
   row of a category that only ever has one row (SEATING, TABLE). The short
   last panel of a category that has full grids — the lone square at the
   end of ALL — is packed from the top-left of the four-square block, as
   desktop has done since v1.6.19, rather than floating mid-screen.

   The bar stays where it was asked to be: fixed, in one place on every
   screen and in every category, 16px above the top of a four-square grid.
   Two portraits are ~52px shorter than four squares, so centring them
   leaves ~42px between the bar's rule and their tops.

   Tile sizes are v1.6.18's to the pixel — the strip they are measured
   from does not change. Only where each grid sits has moved.

   The footer is one scroll past the last grid. The last panel is a full
   stop tall like every other, so the footer starts at the bottom edge of
   the window, and the pager (site.js) now always keeps the end of the page
   as a stop of its own; before, a stop only 44px past the last one was
   folded into it. One more swipe from the last grid brings the footer up,
   and the bar and the filter button rise with the page by exactly the
   footer's height (--obj-foot-lift, as the desktop rail already does), so
   it reads as the page scrolling on. A category that fits on one screen
   opens with its footer out of sight, like every other.

   Safari's floating toolbar shows ~100px of page below the window (see
   v1.6.18, note 2), and that strip is where the footer now waits. site.js
   marks the footer .obj-foot-out while none of it is inside the window,
   and it is not drawn until it is. */
@media (max-width:900px) and (orientation:portrait), (max-width:900px) and (min-height:501px), (orientation:portrait) and (min-width:901px) and (max-width:1200px){
  .objects-page-v2 .objects-index{
    --obj-m-c:calc((var(--wadi-header-offset) + var(--obj-m-vh)) / 2);
    /* The four-square block centred on that line. The floor is v1.6.18's:
       never so high that the bar's words run into the header. */
    --obj-m-t:max(
      calc(var(--wadi-header-offset) + 63px),
      calc(var(--obj-m-c) - (var(--obj-m-h4) / 2))
    );
    /* How tall a panel of squares is: the four-square block, so a short
       last panel packs from its top... */
    --obj-m-hsq:var(--obj-m-h4);
    --obj-m-toggle-y:clamp(18px,3.2svh,32px);
  }
  /* ...unless no panel in the category reaches a second row, and then its
     one row is the grid. Written as :not(:has()) so that a browser without
     :has() drops the rule and keeps the packed layout, which always fits. */
  .objects-page-v2 .objects-index:not(:has(.obj-panel-r1-1:is(.obj-panel-n3,.obj-panel-n4,.obj-panel-n5,.obj-panel-n6))){
    --obj-m-hsq:var(--obj-m-tile-1-1);
  }

  /* A panel lands with its top on the bar's rule, 16px above --obj-m-t,
     and pads down by half of what it is shorter than four squares. */
  .objects-page-v2 .obj-flow > .obj-panel.obj-panel-r1-1{
    padding-top:calc(var(--obj-m-under) + ((var(--obj-m-h4) - var(--obj-m-hsq)) / 2));
  }
  .objects-page-v2 .obj-flow > .obj-panel.obj-panel-r9-16{
    padding-top:calc(var(--obj-m-under) + ((var(--obj-m-h4) - var(--obj-m-h916)) / 2));
  }

  /* The last panel is a whole stop, so the footer starts below the window. */
  .objects-page-v2 .obj-panel:last-child,
  .objects-page-v2 .obj-panel:only-child{
    min-height:var(--obj-m-stop);
  }

  /* So does an empty category, with its message on the centre line. */
  .objects-page-v2 .objects-index.is-empty,
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    min-height:calc(var(--obj-m-vh) - var(--wadi-header-offset))!important;
  }
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    padding-top:0;
    padding-bottom:0;
  }
  .objects-page-v2 .objects-index.is-empty:not(.has-server-empty) > .obj-none{
    top:0;
    bottom:0;
  }

  /* The filter button at the foot of the window. It and the bar rise with
     the footer at the last stop. */
  .objects-page-v2 .obj-filter-toggle{
    bottom:var(--obj-m-toggle-y);
    transform:translateX(-50%) translateY(calc(-1 * var(--obj-foot-lift,0px)));
  }
  .objects-page-v2 .obj-bar{
    transform:translateY(calc(-1 * var(--obj-foot-lift,0px)));
  }
}

/* A phone on its side keeps v1.6.16's layout, but its footer is also one
   scroll past the last grid. The last panel (or the only one) fills the
   window under the header exactly, so the pager lands it with the footer
   just below the window, and its grid centred where every other panel's
   is; an empty category fills the window too. The filter button already
   rises with the footer here (v1.6.5). */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  .objects-page-v2 .obj-panel:last-child,
  .objects-page-v2 .obj-panel:only-child{
    min-height:calc(var(--obj-m-vh) - var(--wadi-header-offset));
    padding-bottom:var(--obj-m-bottom);
    justify-content:center;
  }
  .objects-page-v2 .objects-index.is-empty,
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    min-height:calc(var(--obj-m-vh) - var(--wadi-header-offset))!important;
  }
}

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  .objects-page-v2 ~ #wadi-footer{
    transition:opacity .3s ease;
  }
  .objects-page-v2 ~ #wadi-footer.obj-foot-out{
    opacity:0;
    pointer-events:none;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   3. PRIVACY AT THE COPYRIGHT LINE'S SIZE
   ──────────────────────────────────────────────────────────────────────
   Below 521px the copyright line is sized to the width (v1.4.6: 8.5px at
   390px) while PRIVACY stayed at 10px. It now takes the same size, in
   each script; its black, weight and tracking are unchanged. From 521px
   to 900px the two were already both 10px. */
@media(max-width:520px){
  #wadi-footer .ft-privacy{
    font-size:clamp(5.7px,calc(3.9vw - 6.72px),10px)!important;
  }
  body.wadi-devanagari #wadi-footer .ft-privacy{
    font-size:clamp(7.8px,calc(4.78vw - 7.45px),10px)!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-10-02 (CLD v1.6.24)
   ══════════════════════════════════════════════════════════════════════

   1. THE FINISHES DRAWER ASKS FOR A MATERIAL FIRST (every width)
   ──────────────────────────────────────────────────────────────────────
   A piece is made of more than one material, so MATERIAL OPTIONS no longer
   lays every finish out at once. It lists the families the piece is made
   of — METAL and GLASS for a light, WOOD and LEATHER for a chair — and a
   family opens its own drawer of finishes over it, whose BACK arrow comes
   back to the list so the other family can be chosen too. Each family
   keeps its own choice, and the row carries it.

   Everything above the list is untouched: the same panel, the same header,
   the same photograph at the top, the same ADD TO ENQUIRY band. A row is
   built from the parts already in the drawer — the card's swatch size, the
   card name's type, MORE INFO's chevron — so the two screens read as one.

   A piece whose finishes are all one family never gets a family drawer
   (single-product.php leaves it out) and keeps today's grid. */
.wadi-finish-drawer-group{
  z-index:10235!important;
}

.wadi-finish-cats{
  display:flex!important;
  flex-direction:column!important;
  margin:0!important;
  border-top:1px solid rgba(26,25,23,.12)!important;
}
.wadi-finish-cat{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:flex!important;
  align-items:center!important;
  gap:clamp(14px,1.8vw,20px)!important;
  width:100%!important;
  margin:0!important;
  padding:clamp(14px,1.7vw,18px) 0!important;
  border:0!important;
  border-bottom:1px solid rgba(26,25,23,.12)!important;
  background:transparent!important;
  color:var(--dark)!important;
  text-align:left!important;
  cursor:none!important;
  transition:opacity .25s ease!important;
}
.wadi-finish-cat:hover{
  opacity:.62!important;
}
.wadi-finish-cat-media{
  flex:0 0 clamp(44px,5vw,56px)!important;
  width:clamp(44px,5vw,56px)!important;
  aspect-ratio:1/1!important;
  display:block!important;
  overflow:hidden!important;
  background:#F1EFEA!important;
}
.wadi-finish-cat-media .pdp-finish-img,
.wadi-finish-cat-media .pdp-finish-swatch{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:0!important;
}
.wadi-finish-cat-text{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}
.wadi-finish-cat-name{
  display:block!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:500!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:var(--dark)!important;
}
body.wadi-devanagari .wadi-finish-cat-name{
  font-family:'Noto Serif Devanagari','Playfair Display',Georgia,serif!important;
  letter-spacing:.04em!important;
}
.wadi-finish-cat-pick{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:11px!important;
  line-height:1.3!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:rgba(26,25,23,.56)!important;
}
.wadi-finish-cat-ic{
  flex:0 0 auto!important;
  display:block!important;
  color:rgba(26,25,23,.5)!important;
}
.wadi-finish-cat:focus-visible{
  outline:1px solid rgba(26,25,23,.65)!important;
  outline-offset:4px!important;
}

.wadi-finish-group-pane[hidden]{
  display:none!important;
}

/* The theme hands the native cursor back wherever there is no hover-capable
   pointer; the row is cursor:none like the rest of the drawer, so it is
   restated here, after that block, exactly as the other controls are. */
@media (hover:none), (pointer:coarse){
  .wadi-finish-cat{
    cursor:auto!important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   2. THE PHONE OBJECTS PAGE: THE BAR AND ITS GRID, CENTRED TOGETHER
   ──────────────────────────────────────────────────────────────────────
   Supplied: a phone screenshot of ALL with "this grid isn't center aligned
   in the white space", and then, of the first attempt at that, "category
   and count is wayyyyy too up — just keep it above grid like it was
   before".

   So the bar is where the live site has always drawn it: its rule 16px
   above the pictures, the band above it filling up to the header, every
   panel's grid starting on that same 16px. That is v1.6.22's arrangement,
   restored exactly — v1.6.23's per-ratio padding, which dropped a short
   grid to a shared centre line and left SEATING's one row sitting 100px
   below the rule, is off again.

   What changes is where the block sits. v1.6.18 placed the GRID on the
   middle of the window under the header, so the rule and its 16px hung
   above that line and the page carried more empty white below the
   pictures than above them. The block is now centred as one piece —
   the rule, the 16px and the grid under it — between the header's rule
   and the top of the filter button:

     header rule  ─┐
                   │  the same distance
     CATEGORY      │
     ─────────────┴─  the bar's rule
     16px
     the grid
                  ─┐  the same distance
     filter button ─┘

   Measured from the two-portrait grid, as v1.6.22 measured its own line,
   so the categories drawn that way — FLOOR, CEILING, and the screens ALL
   opens on — are centred to the pixel; a four-square grid is 51px taller
   and reaches that much further down, which is what the live site does
   today. On a 393x854 phone the bar's rule lands 5px below where the live
   site puts it and the pictures 5px below theirs: the screen the studio
   asked to keep, with the white space evenly split around it.

   Tile sizes are untouched: --obj-m-strip, --obj-m-clear and --obj-m-top0
   are left exactly as v1.6.18 wrote them, so no picture changes size.
   --obj-m-barh is still derived from the grid's line, so --obj-m-stop and
   every pager stop follow it with nothing else to change.

   The rule under CATEGORY and the count is 5px nearer the words than it
   was (14px of air under them, now 9px), as asked.

   THE FOOTER WAITS FURTHER DOWN. v1.6.23 put the footer's top edge exactly
   on the bottom of the window and faded it until a pixel of it came in.
   Safari's floating toolbar leaves ~100px of page showing below that edge,
   and its reported window height grows as the toolbar collapses, so on a
   short category — FLOOR's two pieces, in the screenshot — the footer
   could show through that strip at rest, with no scrolling at all. The
   last panel now ends 120px below the window instead of on it, which puts
   the footer clear of the strip whatever the toolbar does, and the fade
   needs 6px of it in view rather than one. One more swipe still brings it
   up, and because the panel's grid is packed against its top, those 120px
   are added underneath the pictures: nothing on the resting screen moves. */
@media (max-width:900px) and (orientation:portrait), (max-width:900px) and (min-height:501px), (orientation:portrait) and (min-width:901px) and (max-width:1200px){
  .objects-page-v2 .objects-index{
    --obj-m-air:18px;
    --obj-m-tail:120px;
    /* The top of the filter button: the bottom of the white space, as the
       header's rule is the top of it. */
    --obj-m-btn-t:calc(var(--obj-m-vh) - var(--obj-m-toggle-y) - 54px);
    /* Every grid's top. Placed so the bar's rule, its 16px and a
       two-portrait grid are centred between those two edges. Floored at
       v1.6.18's line so the bar's words can never run into the header,
       and capped on the FOUR-SQUARE block so the tallest grid a category
       can hold still keeps --obj-m-air clear of the button. */
    --obj-m-t:clamp(
      calc(var(--wadi-header-offset) + 63px),
      calc(
        ((var(--wadi-header-offset) + var(--obj-m-btn-t)) / 2)
        - ((var(--obj-m-under) + var(--obj-m-h916)) / 2)
        + var(--obj-m-under)
      ),
      max(
        calc(var(--wadi-header-offset) + 63px),
        calc(var(--obj-m-btn-t) - var(--obj-m-air) - var(--obj-m-h4))
      )
    );
    /* Header rule to the bar's own rule, 16px above the pictures.
       --obj-m-stop (v1.6.17) is written from this. */
    --obj-m-barh:calc(var(--obj-m-t) - var(--obj-m-under) - var(--wadi-header-offset));
  }

  /* 9px under the words rather than 14px. */
  .objects-page-v2 .obj-bar{
    padding-bottom:9px;
  }

  /* Every panel starts on the bar's 16px, whatever it holds — v1.6.22's
     rule, in place of v1.6.23's shared centre line. */
  .objects-page-v2 .obj-flow > .obj-panel.obj-panel-r1-1,
  .objects-page-v2 .obj-flow > .obj-panel.obj-panel-r9-16{
    padding-top:var(--obj-m-under);
  }

  /* The last panel ends below Safari's strip, under its own pictures. */
  .objects-page-v2 .obj-panel:last-child,
  .objects-page-v2 .obj-panel:only-child{
    min-height:calc(var(--obj-m-stop) + var(--obj-m-tail));
  }

  /* An empty category: the message where the pictures would have been,
     and its footer the same swipe away as everyone else's. */
  .objects-page-v2 .objects-index.is-empty,
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    min-height:calc(var(--obj-m-vh) - var(--wadi-header-offset) + var(--obj-m-tail))!important;
  }
  .objects-page-v2 .objects-index.is-empty .obj-flow{
    padding-top:calc(var(--obj-m-barh) + var(--obj-m-under));
    padding-bottom:var(--obj-m-tail);
  }
  .objects-page-v2 .objects-index.is-empty:not(.has-server-empty) > .obj-none{
    top:calc(var(--obj-m-barh) + var(--obj-m-under));
    bottom:var(--obj-m-tail);
  }
}


/* ──────────────────────────────────────────────────────────────────────
   3. NO SOCIAL MARKS IN THE CONTACT PAGE'S FOOTER
   ──────────────────────────────────────────────────────────────────────
   The page already gives Instagram its own line in the details column, so
   the two marks in the footer repeated it directly underneath. PRIVACY
   stays, and with the marks gone it simply ends the row — .ft-nav's own
   gap collapses to nothing, so nothing else needs moving. Every other
   page keeps both. */
body.wadi-contact #wadi-footer .ft-socials{
  display:none!important;
}
/* The marks were the tallest thing in the row, so taking them out shortened
   the footer band — and the contact page, which is sized to fill exactly
   what the footer leaves, grew by the same amount. The row keeps the height
   they gave it, at each of the four sizes .ft-social is drawn at, so the
   band is the band every other page has and nothing above it moves. */
body.wadi-contact #wadi-footer .ft-nav{
  min-height:16px!important;
}
@media(min-width:1921px){
  body.wadi-contact #wadi-footer .ft-nav{
    min-height:min(32px,max(16px,.834vw))!important;
  }
}
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  body.wadi-contact #wadi-footer .ft-nav{
    min-height:15px!important;
  }
}
@media(max-width:520px){
  body.wadi-contact #wadi-footer .ft-nav{
    min-height:12px!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-10-04 (CLD v1.6.27) — ONE LAYOUT PER DEVICE FAMILY
   ══════════════════════════════════════════════════════════════════════

   Measured against v1.6.26 across 37 viewports: the site had THREE
   independent "mobile vs desktop" lines, so devices between them landed in
   a hybrid state belonging to neither family.

       520 -> 521px   header 84 -> 116px, gutter 21 -> 33.3px
       700 -> 701px   basket drawer full-width -> 430px panel
       900 -> 901px   the whole page layout family

   A portrait iPad at 1024px was above all three: it drew the laptop page,
   the laptop header and the laptop drawer. There are now exactly two
   families and one line between them.

   ── 1. THE LINE IS ORIENTATION-AWARE, NOT WIDTH-ONLY ──────────────────

   Every `max-width:900px` block in this file now reads

       (max-width:900px), (orientation:portrait) and (max-width:1200px)

   and every `min-width:901px` block

       (min-width:901px) and (orientation:landscape), (min-width:1201px)

   The two are exact complements — at any viewport exactly one of them
   matches — so nothing that was already in the right family moved. The
   only viewports whose family changes are portrait ones between 901 and
   1200px wide: Surface Pro (912), iPad Air 13 / Pro 12.9 (1024) and
   iPad Pro 13 M4 (1032), which now draw the phone page like every other
   portrait tablet instead of the laptop page.

   Orientation rather than width alone, because iPadOS requests desktop
   sites by default and Safari can then report a layout viewport wider
   than the device; `orientation` is aspect-based and survives that, a
   width-only rule does not. The three compound
   `(orientation:landscape) and (max-height:500px)` blocks are untouched —
   a portrait tablet can never match them.

   ── 2. THE MOBILE RAMP IS CONTINUOUS ──────────────────────────────────

   The header height and the page gutter stepped at 521px. They now ramp.
   Both are anchored so that every value AT or BELOW 430px is exactly what
   it was before, and 744px upward is exactly what it was before; only the
   431-743px band — which no real device in the matrix occupies — changes,
   and that is the band that carries the ramp.

       gutter      21px held to 430  ->  37px at 744, then held
                   slope 100*(37-21)/(744-430) = 5.0955vw
                   intercept 21 - 16*430/314   = -0.91px
       header      84px held to 430  ->  116px at 744, then held
                   slope 100*(116-84)/(744-430) = 10.1911vw
                   intercept 84 - 32*430/314    = 40.18px

   These supersede, by source order, `--wadi-responsive-edge:21px` /
   `--wadi-header-h:84px` in the 520px blocks above and
   `clamp(27px,6.4vw,37px)` / `116px` in the 900px block. Those are left in
   place so the history of each value stays readable.

   `--wadi-header-offset` is `calc(--wadi-header-top + --wadi-header-h)`
   and resolves at use, so every page's top padding follows the ramp with
   no further change.

   ── 3. ONE DRAWER FOR THE WHOLE FAMILY ────────────────────────────────

   `width:100vw` has moved out of the 700px block (see the note there) so
   the basket and finishes panels are full-width on every phone and every
   portrait tablet. Before, a portrait iPad got the 430px desktop panel —
   42% of the screen against a phone's 100%.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  :root{
    --wadi-responsive-edge:clamp(21px,calc(5.0955vw - 0.91px),37px)!important;
    --wadi-edge:var(--wadi-responsive-edge)!important;
    --wadi-header-h:clamp(84px,calc(10.1911vw + 40.18px),116px)!important;
  }

  .wadi-basket-panel{
    width:100vw!important;
  }
  /* The finishes panel keeps its own 22px sliver of the page behind it — the
     value it already had on every phone — instead of a fixed 470px that read
     as 93% of a 320px phone and 46% of a 1024px portrait iPad. Below 492px
     this computes to exactly what it computed to before. */
  .wadi-finish-panel{
    width:calc(100vw - 22px)!important;
  }
  /* The hero band is width:100% with aspect-ratio:1/1 capped at min(30vh,300px),
     so the photograph inside it (object-fit:contain) is as tall as the cap and
     the rest of the band is backing. On a phone the band is ~364px at its
     widest and the picture nearly fills it. Without a cap, the sheet's new
     width would stretch that band to ~940px on a portrait iPad and leave the
     photograph marooned in the middle of it. 420px is the phone's widest band
     plus its own margin, so no phone reaches the cap and every portrait tablet
     reads like one. */
  .wadi-finish-hero{
    max-width:420px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   WADI UPDATE - 2026-10-04 (CLD v1.6.28)
   THE OBJECTS GRID AND THE SCROLLBAR
   ──────────────────────────────────────────────────────────────────────

   Reported from an ASUS Vivobook: the objects index drew two tiles across
   with the third column's worth of space left empty on the right, and a
   panel of three 9:16 pieces showed two. It is not that laptop, and it is
   not Windows as such — it is the scrollbar.

   The arithmetic at the top of this section sizes every tile from

     --obj-frame : 100vw - 2 x edge - rail - gap

   and the panel that holds the tiles has padding of exactly `edge + rail +
   gap` on the left and `edge` on the right, so its content box is
   algebraically the same expression. The width budget therefore leaves
   EXACTLY ZERO slack: when it is the term min() takes, three tiles plus two
   gaps equal the box that holds them to the pixel. That was deliberate and
   it is what makes the pictures reach both ends of the frame.

   Zero slack survives nothing. macOS and Android draw overlay scrollbars,
   so 100vw and the layout width are one number and the row fits. Windows
   and Linux draw a classic scrollbar about 15px wide: 100vw still counts
   those 15px and the panel's content box does not, so three tiles came out
   one scrollbar wider than the box, max-width:100% clamped .obj-panel-inner
   and the flow wrapped to two. Which budget binds depends on the window's
   shape, so it is not every Windows machine — 1536x730 (a 1080p laptop at
   Windows' default 125%), 1600x771 and 1440x700 all bind on width and all
   broke; 1920x919 and 1280x578 bind on height, keep 30-60px of slack and
   were fine. That is why it had never been seen here.

   The fix is to measure the frame against the box that actually holds it.
   A container query length does that by definition: 100cqw is the content
   box of the nearest container ancestor, which is .obj-flow — the layout
   width, scrollbar already taken out. No JavaScript, so nothing can flash
   two-across before a script corrects it, and no measuring pass to keep in
   step with zoom or a rotation.

   .obj-flow is a safe container: it is display:block / width:100% in both
   layout families (the phone adds only a padding-top), and nothing inside
   it is position:fixed — the bar, the rail and the filter button are all
   siblings of it — so the containing block that container-type establishes
   reaches nothing that was relying on the viewport.

   The phone's --obj-m-col is the same expression over two columns and had
   the same zero slack, so it is corrected here too. It only ever showed on
   a Windows device narrow enough or portrait enough to take the phone
   layout, which is why the report came from the desktop grid. Note which
   declaration it mirrors: --obj-m-col is set twice, and the one that wins
   is the v1.6.5 page-inset version (`(--wadi-page-frame - gap) / 2`), not
   the older --wadi-edge one above it. The line below is that expression
   with --wadi-page-frame written out, so the two cannot drift; copying the
   superseded formula instead widens every phone tile by 12px.

   @supports guards the lot: in a browser without container queries the
   100vw definitions above stand, which is today's behaviour. Where there is
   no classic scrollbar the two expressions are equal and every measured
   rect is byte-identical — verified against the live page at 1600x771,
   where tile, panel and rail do not move by a hundredth of a pixel. */

@supports (container-type:inline-size){

  .objects-page-v2 .obj-flow{
    container-type:inline-size;
  }

  .objects-page-v2{
    --obj-frame:calc(100cqw - (var(--wadi-edge) * 2) - var(--obj-rail) - var(--obj-gap));
  }

  @media (max-width:900px), (orientation:portrait) and (max-width:1200px){
    .objects-page-v2{
      --obj-m-col:calc((100cqw - (var(--wadi-page-inset) * 2) - var(--obj-m-gap)) / 2);
    }
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-10-04 (CLD v1.6.29) — the phone and portrait-tablet
   contact page is measured to the screen it is on
   ══════════════════════════════════════════════════════════════════════

   Reported against v1.6.28, with two screenshots:

     "For portrait tablets some tabs show way too much gap between image
      and footer"
     "for contact page, for mobiles and portrait tabs i have to scroll
      down a bit to see the footer content ... it should all be in the
      viewport"

   Measured across the 37-device matrix, both are one fault. v1.6.9 gave
   the photograph a fixed 31:35 of its column, and v1.6.0 made the column
   the MENU's width — so the picture's height follows the screen's WIDTH
   while the room it has to fill follows the screen's HEIGHT:

     device                          column  picture  room  slack / short
      1032x1376 iPad Pro 13 M4         488     551     863    +312
      1024x1366 iPad Air 13 / Pro 12.9 488     551     854    +303
       912x1368 Surface Pro            492     556     855    +300
       800x1280 Galaxy Tab S9          496     560     777    +217
       430x932  iPhone 15/16 Pro Max   332     375     535    +160
       390x844  iPhone 13 / 14 / 16e   324     366     457     +91   ok
       744x1133 iPad mini 6/7          498     562     648     +85   ok
       768x1024 iPad mini 5 / 9.7      496     560     551      -9   scrolls
       375x667  iPhone SE2 / SE3 / 8   319     360     298     -62   scrolls
       320x568  iPhone SE 1            278     314     216     -98   scrolls

   The column cannot move: every phone page is set to the menu's measure
   and the contact page is not allowed to be the one exception. So the
   photograph's HEIGHT is what gives, and it is the only thing on the page
   that can — the <img> inside is object-fit:cover, so the box re-crops
   rather than letterboxing, while GET IN TOUCH through FOLLOW US and the
   footer are type and must keep their own leading.

   site.js measures the three lengths CSS cannot know — the copy block,
   the footer, and 100svh as the browser is actually drawing it right now
   — and publishes one length here. Its comment carries the arithmetic.

   `auto` is the fallback and it is load-bearing: with no custom property
   the height is auto, aspect-ratio below resolves it, and the page is
   v1.6.28 to the pixel. Nothing here depends on the script having run.

   aspect-ratio only ever sets a dimension that is auto, so once the
   custom property lands the ratio is inert — it is left in place as that
   fallback, not as a second opinion on the height.

   Desktop, laptop and landscape-iPad contact pages are not in this media
   query and were not reported; they are untouched. */

@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  .wadi-contact .contact-right{
    height:var(--wadi-contact-img-h,auto)!important;
    aspect-ratio:31 / 35!important;
    min-height:0!important;
    max-height:none!important;
    flex:0 0 auto!important;
  }
}

/* A signed-in editor loses the top of the screen to the WordPress admin
   bar — 32px, or 46px below 783px — because WordPress gives <html> a
   margin-top for it. Every page in this theme has ignored that (`.admin-bar
   .contact-page` is the same declaration as `.contact-page`), and on a page
   that is meant to end exactly on the bottom of the screen it is the
   difference between fitting and a 46px scroll: body is held at 100svh,
   <html> adds its margin on top, and the document is 100svh + 46 tall.

   site.js measures the bar and publishes its height. Unset — a logged-out
   visitor, or no script — this falls back to 0px and the rule is today's. */
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  body.wadi-contact.admin-bar{
    min-height:calc(100svh - var(--wadi-admin-bar-h,0px))!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-10-05 (CLD v1.6.30) — four tablet corrections
   ══════════════════════════════════════════════════════════════════════

   Reported from a portrait-tablet rig. All four are one fault wearing
   four coats: a length written from the screen's WIDTH (or as a flat
   cap) placed in a box whose room comes from the screen's HEIGHT, or the
   other way about. Each is given the term it was missing. Every rule
   below is a min()/max() around today's value, so a screen that already
   had room keeps the layout it has, to the pixel.


   1. PRODUCT PAGE, phone layout — SPECIFICATIONS and FINISHES slid
      underneath the fixed ENQUIRE NOW bar.

   The mobile product page is one composition that must not scroll: the
   screen, less the header and less the 28px enquiry bar. Inside it the
   photograph is `min(100%,52svh)` WIDE and drawn 3:4, so it is 69.3svh
   TALL, and the two actions under it add ~30px more. The budget is

       69.3svh + 30px + --wadi-header-offset + 28px <= 100svh

   which holds while the header is a small enough share of the screen —
   that is, on a tall screen. The header does not shrink with the screen,
   so below ~620px of height the sum passes 100svh; .pdp-editorial-sec
   centres its overflow, and half of it goes under the bar. Measured:
   768x1024 +81px of clearance, 879x620 -1px, 879x460 -25px.

   The photograph is the only part that can give, so it is also capped by
   the height actually left over. A tall screen is unchanged. */
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  body.single-product{
    /* .pdp-editorial-sec centres what it is given, so slack is split top
       and bottom: the gap the bar actually gets is half of whatever this
       exceeds the ~29px actions row by. 78px is a 24px gap; the 86px
       ceiling is the most a 767px-tall screen can carry and still be left
       exactly as it is. */
    --pdp-mobile-stack-foot:clamp(78px,12svh,86px);
    /* x 0.75 because the window below it is 3:4: this is a WIDTH. */
    --pdp-mobile-stack-fit:calc(
      (100svh
        - var(--wadi-header-offset)
        - var(--pdp-sticky-enquiry-h)
        - var(--pdp-mobile-stack-foot)
      ) * 0.75);
  }
  body.single-product .pdp-scroll-stack.pdp-image-carousel{
    width:min(100%,52svh,var(--pdp-mobile-stack-fit))!important;
  }
}
/* Restated, not edited into, the 45svh rule above: same cap, that rule's
   own fraction. */
@media(max-width:700px) and (max-height:700px){
  body.single-product .pdp-scroll-stack.pdp-image-carousel{
    width:min(100%,45svh,var(--pdp-mobile-stack-fit))!important;
  }
}


/* 2. INFO, phone layout — the studio statement ran wider than the
      portraits and biographies underneath it.

   The team row is capped at 360px (`width:min(100%,360px)`); the intro
   band was never capped at all, so it kept growing with the page. On a
   375px phone both are the page measure and they agree — which is why
   this has never shown. Above about 400px the row stops and the band
   does not: at 768px the statement is 496px over a 360px portrait, 68px
   proud on each side.

   One cap, named once, for both. Phones are 100% of the page either way
   and do not move. */
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  :root{
    --wadi-info-measure:360px;
  }
  .info-page .info-intro-band,
  .info-page .info-intro-copy,
  .info-page .info-team-row,
  .info-page .info-team-row:first-child,
  .info-page .info-team-row:last-child{
    width:min(100%,var(--wadi-info-measure))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* 3. INFO, phone layout — a profile was taller than the screen.

   A profile is the portrait, 16px, the name and the biography. The
   portrait is square and as wide as the column, so its HEIGHT is the
   column's width — 360px at the cap — while the room for the whole
   profile is 100svh less the header. Those two numbers never meet:
   360 + 16 + ~102 = 478px needs a 595px-tall screen and is handed
   whatever there is.

   The portrait is the only part that can give — the name and the
   biography are type and keep their leading — so it is capped by the
   room left after them, with a 200px floor under it. 767px of height
   and taller is unchanged; the floor is what a landscape phone gets,
   where a whole profile cannot be made to fit by any width. */
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  :root{
    /* 16px + the name + the biography + the gap under it. */
    --wadi-info-profile-foot:clamp(150px,24svh,200px);
  }
  .info-page .info-person-photo,
  .info-page .info-team-row:last-child .info-person-photo:first-of-type{
    width:min(
      100%,
      max(200px,calc(100svh - var(--wadi-header-offset) - var(--wadi-info-profile-foot)))
    )!important;
  }
}


/* 4. INFO, desktop layout below 1260px — the biographies ran taller than
      the portraits beside them.

   Since v1.6.19 the team row spans the page frame in fixed proportions,
   170:200:200:170, so the biography's column is 15.05% of the page: 217px
   at 1440, 154px at 1024, 136px at 902. The type does not follow it. At
   14px a 217px column takes the biography in 8 lines and it sits 162px
   against a 255px portrait; the same 14px in a 136px column takes 14
   lines and 246px against a 160px portrait — half again as tall as the
   picture it is set beside, and MANGESH LUNGARE breaks over two lines.

   Column width and type size are made one ratio. 1.117vw reaches 14px at
   1253px and is held there to the 1260px edge of the query, so the size
   is continuous across that edge, 1261px and up is today's page exactly,
   and so is everything from 1253px up. Below that the biography keeps the
   8 lines it has on a desktop and the name keeps its single line. */
@media (min-width:901px) and (max-width:1260px) and (orientation:landscape),
       (min-width:1201px) and (max-width:1260px){
  .info-page .info-person-text h2,
  body .info-page .info-person-text h2,
  .info-page .info-person-text p,
  body .info-page .info-person-text p{
    font-size:min(14px,1.117vw)!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WADI UPDATE - 2026-10-08 (CLD v1.6.32) — the black rectangle round a tile
   ══════════════════════════════════════════════════════════════════════

   Reported from a Windows machine and from an iPad: a hard black
   rectangle drawn tight around a product tile on OBJECTS, and around
   other links elsewhere. Nobody on a Mac or on a phone could see it.

   It is not the theme's. Nothing here had ever given a link or a button
   a focus mark — only the finishes controls and the basket have one — so
   everything else fell through to the browser's own, and Chrome's is
   `outline:auto`: a 2px black ring with a white one inside it, square to
   the box, drawn in the browser's colours rather than the page's.

   Why it divides along those lines. The ring is painted when the browser
   decides keyboard focus should be SHOWN, and whether a click puts
   keyboard focus on a link at all is a platform rule, not a page one. On
   macOS it does not — Full Keyboard Access is off by default — so a Mac
   never had anything to draw, and a phone has no keyboard to draw it
   for. On Windows, and on an iPad carrying a pointer or a keyboard, the
   click does focus the link, and the ring stays on whatever was last
   opened. That is why it was photographed under the cursor, on the one
   tile that had just been visited, while the two beside it were clean.

   So the site is given a focus mark of its own: the hairline the
   finishes swatches already use — 1px of the page's own ink, held off
   the box — drawn only for :focus-visible, which is the browser's own
   answer to "was this focus reached by keyboard". A mouse or a finger
   now leaves nothing behind; a reader moving on Tab keeps a mark to
   follow. The plain :focus rules clear the browser's ring on engines too
   old to know :focus-visible, where a click never showed one anyway.

   The rules carry no !important, so the marks already designed for the
   basket, the finishes and the PDP controls — all of which are
   !important — are untouched and keep their own weight. */

a:focus,
button:focus,
summary:focus,
[tabindex]:focus{
  outline:none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:1px solid rgba(26,25,23,.55);
  outline-offset:4px;
}

/* A field already answers focus with its border, so its ring sits closer
   in and does not read as a second frame around the first. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:1px solid rgba(26,25,23,.55);
  outline-offset:2px;
}

/* The tiles are photographs that run to their own edge. The gap between
   them is 24–44px, so the hairline has room to sit clear of the picture
   rather than cut into it, and it is taken a shade lighter still against
   the cream. */
.objects-page-v2 .obj-tile-link:focus-visible{
  outline:1px solid rgba(26,25,23,.45);
  outline-offset:4px;
}

/* Upright, the grid closes to a 14–20px gap. 3px keeps two neighbouring
   marks from meeting in the middle of it. */
@media (max-width:900px), (orientation:portrait) and (max-width:1200px){
  .objects-page-v2 .obj-tile-link:focus-visible{
    outline-offset:3px;
  }
}