/* The wall and the placard.
   One idea: a plate is shown the way it will live, on a wall, in a frame, with a museum label beside it.
   One effect: the linen cloth that lifts to unveil a plate (preview ready, gift reveal). Everything else holds still.
   Type: EB Garamond for voice, Alegreya Sans for labels and controls (both SIL OFL). Colour: limewash, oak, brass, lamp-black green. */
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/EBGaramond-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/EBGaramond-400i.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/EBGaramond-600.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(/assets/fonts/AlegreyaSans-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(/assets/fonts/AlegreyaSans-400i.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(/assets/fonts/AlegreyaSans-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --wall:#ece6da;--wall-2:#e3dac8;--paper:#f8f4eb;--ink:#1d2422;--ink-2:#434c49;--muted:#59615c;
  --night:#1b2220;--night-2:#252e2b;--night-ink:#ebe5d6;--night-muted:#adb5ab;
  --brass:#c9a24a;--brass-d:#7a5a1a;--brass-l:#e6c978;--verdigris:#245a53;--oxblood:#8a2e2a;--danger:#8a1f1f;
  --oak-1:#b89462;--oak-2:#8a6338;--oak-3:#6f4d2b;
  --line:rgba(29,36,34,.22);--line-night:rgba(235,229,214,.24);
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;--sans:"Alegreya Sans","Gill Sans","Trebuchet MS",sans-serif;
  --r:3px;--gut:clamp(16px,4vw,32px);--max:1180px;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--wall) var(--noise);color:var(--ink);font:400 18px/1.55 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--verdigris);text-underline-offset:.18em}
a:hover{color:var(--ink)}
.dark a:not(.btn){color:var(--brass-l)}.dark a:not(.btn):hover{color:#fff}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:2px}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}.skip:focus{left:8px;top:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
.narrow{max-width:780px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.012em;margin:0 0 .45em;font-feature-settings:"liga","onum"}
h1{font-size:clamp(2.7rem,6.2vw,4.9rem)}h2{font-size:clamp(2rem,4.2vw,3.1rem)}h3{font-size:1.55rem;line-height:1.15}
h1 em,h2 em{font-style:italic;color:var(--brass-d)}.dark h1 em,.dark h2 em{color:var(--brass-l)}
p{margin:0 0 1em}
.lead{font:400 clamp(1.25rem,2vw,1.5rem)/1.45 var(--serif);max-width:36em}
.eyebrow{font:700 .78rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-d);margin:0 0 1rem;display:flex;gap:.7em;align-items:center}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
.dark .eyebrow{color:var(--brass)}
.fine{font-size:.95rem;color:var(--muted)}.dark .fine{color:var(--night-muted)}
.err{color:var(--danger);font-weight:700}.dark .err{color:#ffb4a8}
.ok{color:var(--verdigris);font-weight:700}
.badge{display:inline-block;font:700 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;background:#f4e5b8;color:#5b430f;border:1px solid #c9a24a;padding:.35em .6em;border-radius:99px}

/* sections: crop marks in the corners, like a printed plate */
.sect{position:relative;padding:clamp(56px,9vw,112px) 0}
.sect::before,.sect::after{content:"";position:absolute;top:22px;width:15px;height:15px;opacity:.45;color:var(--ink);background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat}
.sect::before{left:var(--gut)}.sect::after{right:var(--gut)}
.sect.alt{background:var(--wall-2)}
.dark{background:radial-gradient(90% 70% at 50% 0,#2b3532 0,var(--night) 60%,#151a19 100%);color:var(--night-ink)}
.dark.sect::before,.dark.sect::after{color:var(--night-ink)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media(max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev .split-copy{order:-1}}

/* header and footer */
.site-head{background:var(--night);color:var(--night-ink);border-bottom:1px solid var(--line-night)}
.bar{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:600 1.45rem/1 var(--serif);margin-right:auto}
.dark .brand,.site-head .brand{color:var(--night-ink)}
.mark svg{width:34px;height:34px;display:block}
.nav{display:flex;gap:24px}
.nav a{color:var(--night-ink);text-decoration:none;letter-spacing:.02em;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--brass);color:#fff}
.region{display:flex;border:1px solid var(--line-night);border-radius:99px;overflow:hidden}
.rg{background:none;border:0;color:var(--night-ink);padding:7px 13px;font:700 .85rem var(--sans);cursor:pointer;letter-spacing:.04em;min-height:36px}
.rg[aria-pressed=true]{background:var(--brass);color:#1d1608}
.nav-toggle{display:none;background:none;border:1px solid var(--line-night);color:var(--night-ink);border-radius:var(--r);padding:8px 14px;font:700 .9rem var(--sans);min-height:40px}
@media(max-width:820px){.js .nav-toggle{display:inline-block}.js .nav{display:none;flex-basis:100%;flex-direction:column;gap:0;order:5}.js .nav.open{display:flex}.nav a{padding:13px 0;border-bottom:1px solid var(--line-night)}}
.devbar{background:#f4e5b8;color:#4a360a;text-align:center;font-size:.9rem;padding:7px var(--gut);border-bottom:1px solid #c9a24a}
.site-foot{padding:56px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot-grid nav{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.foot-h{font:700 .78rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:0 0 8px}
.foot-grid a{color:var(--night-ink);text-decoration:none}.foot-grid a:hover{text-decoration:underline}
.credit{border-top:1px solid var(--line-night);margin-top:34px;padding-top:18px;font-size:.9rem;color:var(--night-muted)}
.linkish{background:none;border:0;color:var(--night-ink);padding:0;font:inherit;cursor:pointer;text-align:left}.linkish:hover{text-decoration:underline}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}

/* buttons: brass plaques */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.65em 1.5em;border:1px solid #8a6a22;border-radius:var(--r);background:linear-gradient(#dcb85f,#c29a3e);color:#1d1608;font:700 1.02rem var(--sans);letter-spacing:.03em;text-decoration:none;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 2px 0 #8a6a22,0 10px 18px -10px rgba(0,0,0,.55);transition:transform .12s,filter .12s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);color:#1d1608}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 0 0 #8a6a22}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none;filter:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.dark .btn.ghost{color:var(--night-ink);border-color:var(--night-ink)}
.btn.ghost:hover{background:rgba(0,0,0,.06);color:var(--ink)}.dark .btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn.small{min-height:40px;padding:.4em 1em;font-size:.95rem}
.btn.block{width:100%}
.link{background:none;border:0;padding:0;color:var(--verdigris);font:inherit;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}

/* forms */
label,.lbl{display:block;font-weight:700;font-size:.95rem;margin:0 0 .3em;letter-spacing:.02em}
input[type=text],input[type=email],input[type=search],input[type=date],input[type=number],select,textarea{width:100%;min-height:48px;padding:.55em .8em;font:400 1.05rem var(--sans);color:var(--ink);background:#fffdf8;border:1px solid #8d948e;border-radius:var(--r);box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
textarea{min-height:92px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--brass);outline-offset:1px;border-color:var(--ink)}
input[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 2px rgba(138,31,31,.2)}
input[type=checkbox],input[type=radio]{accent-color:var(--verdigris);width:20px;height:20px;margin:0;flex:none}
.field{margin-bottom:1rem}.hint{font-size:.9rem;color:var(--muted);margin:.3em 0 0}
.check{display:flex;gap:.7em;align-items:flex-start;font-weight:400;font-size:1rem;margin:0 0 .7rem}.check span{padding-top:1px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the frame, the mat, the plate, the placard */
.frame{padding:clamp(9px,1.5vw,17px);background:linear-gradient(135deg,var(--oak-1),var(--oak-2) 42%,var(--oak-1) 58%,var(--oak-3));box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 5px rgba(0,0,0,.35) inset,0 34px 44px -24px rgba(0,0,0,.6),0 10px 18px -8px rgba(0,0,0,.45);border-radius:2px}
.frame[data-frame=black]{background:linear-gradient(135deg,#34383a,#0f1112 50%,#2c3032)}
.frame[data-frame=white]{background:linear-gradient(135deg,#fbf9f4,#e6e0d3 50%,#fbf9f4)}
.frame[data-frame=brass]{background:linear-gradient(135deg,#e8cd82,#a8812f 45%,#e8cd82 58%,#8c6a22)}
.mat{background:#f6f1e6;padding:clamp(7px,2vw,24px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),inset 2px 3px 9px rgba(0,0,0,.2)}
.plate{position:relative;overflow:hidden;background:#1d2422;box-shadow:0 0 0 1px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.2)}
.plate>img{width:100%;height:auto;display:block}
.placard{background:#f6f1e4;color:var(--ink);border:1px solid rgba(0,0,0,.2);box-shadow:0 1px 0 #fff inset,0 10px 16px -12px rgba(0,0,0,.5);padding:11px 15px 10px;margin:22px 0 0;max-width:32em;font-size:.98rem;line-height:1.35}
.placard b{display:block;font:600 1.3rem/1.15 var(--serif)}
.placard .meta{display:block;font:700 .72rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.placard .badge{margin-top:8px}
.wall-card{position:relative}.wall-card>.badge{margin-top:14px}
figure{margin:0}

/* the cloth: the one effect */
.cloth{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:clamp(14px,3vw,28px);color:#3a3326;
  background:linear-gradient(90deg,rgba(0,0,0,.07),transparent 7%,rgba(255,255,255,.12) 16%,transparent 27%,rgba(0,0,0,.05) 41%,transparent 55%,rgba(255,255,255,.1) 68%,transparent 80%,rgba(0,0,0,.06)),
  repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 2px,transparent 2px 5px),repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 2px,transparent 2px 6px),linear-gradient(180deg,#e8e0cc,#d8cdb3);
  box-shadow:0 14px 30px rgba(0,0,0,.35);transform-origin:50% 0;transition:transform 1.6s cubic-bezier(.65,0,.25,1)}
.cloth::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13px;background:repeating-linear-gradient(90deg,#cdc2a5 0 6px,#e0d7c0 6px 12px)}
.plate.is-open .cloth{transform:translateY(-104%);pointer-events:none}
.plate.is-peek .cloth{transform:translateY(-41%)}
.cloth-inner{width:min(100%,420px)}
.phases{list-style:none;margin:0 0 14px;padding:0;text-align:left;font-size:1.02rem}
.phases li{display:flex;gap:.6em;align-items:baseline;padding:.12em 0;opacity:.5}
.phases li::before{content:"";width:.72em;height:.72em;border-radius:50%;border:2px solid currentColor;flex:none;transform:translateY(.05em)}
.phases li.done{opacity:1}.phases li.done::before{background:var(--verdigris);border-color:var(--verdigris)}
.phases li.now{opacity:1;font-weight:700}.phases li.now::before{border-color:#6b4f12;background:var(--brass);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:translateY(.05em) scale(1.35)}}
.track{height:7px;background:rgba(0,0,0,.16);border-radius:7px;overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--verdigris);transition:width .6s ease}
.track.indet i{width:35%;animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{margin-left:-35%}100%{margin-left:100%}}
.cloth-note{font-size:.92rem;margin:.7em 0 0;opacity:.85}

/* landing */
.hero{overflow:clip;padding:clamp(40px,7vw,88px) 0 clamp(64px,9vw,120px);background:radial-gradient(70% 80% at 74% 42%,#3b4842 0,var(--night) 58%,#121716 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.addr-form{display:grid;grid-template-columns:1fr auto;gap:10px;margin:1.6rem 0 .8rem;max-width:580px;align-items:end}
.addr-form label{grid-column:1/-1;margin:0;color:var(--night-ink)}
@media(max-width:520px){.addr-form{grid-template-columns:1fr}}
.hero-wall{position:relative;padding-top:26px}
.hero-wall::before{content:"";position:absolute;inset:-6% -10% auto;height:75%;background:radial-gradient(60% 100% at 50% 0,rgba(255,232,170,.22),transparent 70%);pointer-events:none}
.lamp{position:absolute;top:0;left:50%;width:30%;height:9px;transform:translateX(-50%);background:linear-gradient(#e6c978,#9a7a2c);border-radius:6px 6px 2px 2px;box-shadow:0 10px 36px 6px rgba(255,226,150,.3)}
.lamp::after{content:"";position:absolute;left:50%;top:9px;width:3px;height:17px;background:#8a6a22;transform:translateX(-50%)}
.hero-wall .placard{margin-left:auto;margin-right:0;max-width:24em}
.compare{position:relative;aspect-ratio:var(--ar,4/3);overflow:hidden;background:#222;touch-action:pan-y;user-select:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .top{clip-path:inset(0 0 0 var(--p,50%))}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}
.compare .handle::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:var(--brass) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1608' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l-6 6 6 6M15 6l6 6-6 6'/></svg>") center/26px no-repeat;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare:focus-within .handle::after{outline:3px solid var(--verdigris);outline-offset:3px}
.compare .tag{position:absolute;bottom:10px;background:rgba(20,26,24,.82);color:#fff;font:700 .74rem var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px;pointer-events:none}
.compare .tag.l{left:10px}.compare .tag.r{right:10px}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);margin-top:36px}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--paper);border:1px solid var(--line);padding:clamp(18px,3vw,30px);box-shadow:0 18px 30px -24px rgba(0,0,0,.5);display:flex;flex-direction:column}
.tier.feature{border-color:var(--brass-d);box-shadow:0 0 0 3px rgba(201,162,74,.35),0 18px 30px -24px rgba(0,0,0,.5)}
.tier .mini{margin-bottom:20px}
.tier h3{display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap;margin-bottom:.15em}
.price{font:600 1.9rem var(--serif);color:var(--brass-d)}
.price-uk{margin:0 0 1rem}
.ticks{list-style:none;margin:0 0 1.4rem;padding:0;flex:1}
.ticks li{padding:.28em 0 .28em 1.7em;position:relative}
.ticks li::before{content:"";position:absolute;left:.1em;top:.7em;width:.55em;height:.3em;border-left:2px solid var(--verdigris);border-bottom:2px solid var(--verdigris);transform:rotate(-45deg)}
.tier-note{margin-top:22px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;margin:1.4rem 0 1rem}
.swatch{all:unset;box-sizing:border-box;cursor:pointer;border:2px solid transparent;border-radius:var(--r);background:var(--paper);color:var(--ink);padding:6px;display:grid;gap:6px;text-align:center;font:700 .8rem/1.2 var(--sans);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.swatch img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:2px}
.swatch>*{align-self:start}.swatch{align-content:start}
.swatch[aria-pressed=true],.swatch:has(input:checked){border-color:var(--brass);box-shadow:0 0 0 2px #fff inset,0 3px 10px rgba(0,0,0,.4)}
.swatch:focus-visible,.swatch:has(input:focus-visible){outline:3px solid var(--brass-l);outline-offset:2px}
.steps3{list-style:none;counter-reset:s;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,4vw,44px)}
.steps3 li{counter-increment:s;border-top:1px solid var(--ink);padding-top:14px;font-size:1.08rem}
.steps3 li::before{content:"No. " counter(s);display:block;font:italic 1.9rem var(--serif);color:var(--brass-d);margin-bottom:4px}
@media(max-width:760px){.steps3{grid-template-columns:1fr}}
.page-gift .tiers{align-items:start}.page-gift .tier .ticks{flex:none}.page-gift .tier>.btn{align-self:flex-start}
.steps-v{list-style:none;counter-reset:s;margin:1.1rem 0 1.2rem;padding:0;display:grid;gap:12px}
.steps-v li{counter-increment:s;display:grid;grid-template-columns:3.4rem 1fr;gap:8px;align-items:baseline;border-top:1px solid var(--line);padding-top:10px}
.steps-v li::before{content:"No. " counter(s);font:italic 1.25rem var(--serif);color:var(--brass-d)}
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font:600 1.3rem/1.25 var(--serif);list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 1.6rem/1 var(--sans);color:var(--brass-d)}
details[open] summary::after{content:"\2212"}
details p{margin:.8em 0 0;max-width:42em}

/* page shells for the quieter pages */
.page{padding:clamp(36px,6vw,72px) 0 clamp(56px,8vw,100px)}
.page h1{font-size:clamp(2.3rem,5vw,3.6rem)}
.prose{font:400 1.2rem/1.6 var(--serif);max-width:44em}
.prose h2{font-size:1.9rem;margin-top:1.6em}.prose h3{font-size:1.4rem;margin-top:1.3em}
.prose ul{padding-left:1.2em}.prose li{margin:.3em 0}
.prose table,.table{border-collapse:collapse;width:100%;font:400 1rem/1.4 var(--sans);margin:1em 0}
.table th,.table td,.prose td,.prose th{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.table th,.prose th{background:var(--wall-2);font-weight:700}
.tablewrap{overflow-x:auto}
.draft{background:#f4e5b8;border:1px solid #c9a24a;padding:10px 14px;font-size:.95rem;margin:0 0 24px;max-width:44em}
.card{background:var(--paper);border:1px solid var(--line);padding:clamp(18px,3vw,30px);box-shadow:0 18px 30px -26px rgba(0,0,0,.5)}
.notice{border-left:4px solid var(--brass);background:rgba(201,162,74,.14);padding:10px 14px;margin:0 0 1.2rem}
.notice.err{border-color:var(--danger);background:rgba(138,31,31,.08);color:var(--ink)}

/* the order flow */
.create{padding:clamp(28px,5vw,56px) 0 clamp(56px,8vw,100px)}
.stepper{list-style:none;display:flex;gap:0;margin:0 0 30px;padding:0;counter-reset:st;border-bottom:1px solid var(--line)}
.stepper li{flex:1;counter-increment:st;padding:10px 6px;font:700 .78rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;text-align:center}
.stepper .sn{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;font-size:1.15rem;display:block}
.stepper li[aria-current=step]{color:var(--ink);border-bottom-color:var(--brass)}
.stepper li.done{color:var(--verdigris)}
@media(max-width:560px){.stepper li{font-size:.62rem;letter-spacing:.02em;padding-inline:2px;overflow-wrap:anywhere}}
.panel[hidden]{display:none}
.panel>h1,.panel>h2{margin-bottom:.3em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:.8rem 0}
.chip{border:1px solid var(--ink);border-radius:99px;background:transparent;padding:6px 14px;font:700 .88rem var(--sans);cursor:pointer;color:var(--ink);min-height:36px}
.chip:hover{background:rgba(0,0,0,.06)}
.addr-big{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:660px;align-items:end}
.addr-big label{grid-column:1/-1}
@media(max-width:560px){.addr-big{grid-template-columns:1fr}}
.stage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:start}
@media(max-width:900px){.stage{grid-template-columns:1fr}}
.choose{display:grid;gap:16px}
.choose .tier{padding:18px}
.choose .tier h3{font-size:1.4rem}
.who-line{margin:.2rem 0 1rem;color:var(--muted)}
.chip-status{display:inline-flex;align-items:center;gap:.6em;font:700 .9rem/1.3 var(--sans);background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:5px 12px;margin-top:12px}
.chip-status::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--brass);animation:pulse 1.2s ease-in-out infinite}
.chip-status.ready::before{background:var(--verdigris);animation:none}

/* configurator */
.cfg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:start}
.cfg-stage{position:sticky;top:12px}
@media(max-width:900px){.cfg{grid-template-columns:1fr}.cfg-stage{top:0;z-index:6;background:var(--wall);padding:6px 0 10px;margin:0 calc(-1*var(--gut));padding-inline:var(--gut);box-shadow:0 10px 14px -12px rgba(0,0,0,.45)}.cfg-stage .plate img{max-height:34vh;width:100%;object-fit:contain;background:#1d2422}.cfg-stage .placard{display:none}.cfg-stage .frame{padding:7px}.cfg-stage .mat{padding:6px}}
.cfg-stage .plate img{transition:opacity .25s}
.cfg-stage .plate img.swap{opacity:.35}
.group{border:1px solid var(--line);background:var(--paper);padding:16px 18px 6px;margin:0 0 16px}
.group>legend{font:italic 1.55rem/1.1 var(--serif);padding:0 8px;margin-left:-8px;float:left;width:100%;margin-bottom:10px}
.group>legend+*{clear:both}
.group .hint{margin-bottom:.8rem}
.finish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-bottom:12px}
.finish-grid .swatch{box-shadow:0 1px 4px rgba(0,0,0,.3);position:relative;color:var(--ink)}
.sw-wait{aspect-ratio:4/3;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#e9e2d0 0 8px,#f3eee2 8px 16px);font-size:.75rem;font-weight:400;color:var(--muted);border-radius:2px}
.finish-grid .swatch input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.seg{display:grid;gap:8px;margin-bottom:14px}
.seg label{display:flex;gap:.7em;align-items:flex-start;border:1px solid var(--line);background:#fffdf8;padding:11px 12px;cursor:pointer;font-weight:400;margin:0}
.seg label:has(input:checked){border-color:var(--verdigris);box-shadow:0 0 0 2px rgba(36,90,83,.25)}
.seg b{display:block;font-weight:700}
.rows{display:grid;gap:12px;margin-bottom:12px}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.6fr) auto;grid-template-areas:"addr addr x" "cap yrs ." "mem mem ." "pins pins ." "inl inl inl";gap:8px;align-items:end;padding:12px;background:#fffdf8;border:1px solid var(--line)}
.row .mem{grid-area:mem}.row .pinpick{grid-area:pins}.row .addr{grid-area:addr}.row .cap{grid-area:cap}.row .yrs{grid-area:yrs}.row .btn-x{grid-area:x}.row .inl{grid-area:inl;margin:0}
.row .btn-x{min-height:48px;min-width:44px;border:1px solid var(--line);background:transparent;border-radius:var(--r);cursor:pointer;font:700 1.2rem var(--sans);color:var(--muted)}
.row .btn-x:hover{color:var(--danger);border-color:var(--danger)}
.row label{font-size:.82rem;margin-bottom:.2em}
.row input[type=text]{min-height:44px}
.row .town-thumb{grid-area:inl}
#home-row{grid-template-areas:"addr yrs" "inl inl";grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}
.crest-box{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin-bottom:12px}
.crest-box canvas{width:120px;height:140px;background:repeating-conic-gradient(#e9e3d3 0 25%,#f6f1e6 0 50%) 0 0/16px 16px;border:1px solid var(--line)}
@media(max-width:520px){.crest-box{grid-template-columns:1fr}}
.tinctures,.symbols{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tinct,.sym{position:relative;display:block;margin:0}
.tinct input,.sym input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tinct span{display:block;width:38px;height:38px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #777}
.sym span{display:grid;place-items:center;width:44px;height:44px;background:#fffdf8;border:1px solid var(--line);border-radius:var(--r)}
.sym svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tinct:has(input:checked) span,.sym:has(input:checked) span{box-shadow:0 0 0 3px var(--verdigris)}
.tinct:has(input:focus-visible) span,.sym:has(input:focus-visible) span{outline:3px solid var(--brass);outline-offset:2px}
.frames{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cfg-bar{position:sticky;bottom:0;z-index:7;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--night);color:var(--night-ink);padding:12px calc(50vw - 50% + var(--gut));margin:28px calc(50% - 50vw) calc(-1*clamp(56px,8vw,100px));border-top:2px solid var(--brass)}
.cfg-bar .sum{font:600 1.35rem var(--serif)}.cfg-bar .sum small{display:block;font:400 .85rem var(--sans);color:var(--night-muted)}
.live-placard .crestline{display:flex;gap:12px;align-items:center;margin-top:8px}
.live-placard canvas{width:44px;height:52px}
.live-placard ol{margin:.5em 0 0;padding-left:1.4em;font-size:.95rem}
.pending{color:var(--muted);font-style:italic}

/* checkout */
.co{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(22px,4vw,48px);align-items:start}
@media(max-width:900px){.co{grid-template-columns:1fr}}
.summary{background:var(--paper);border:1px solid var(--line);padding:18px 20px}
.summary dl{margin:0}.summary .line{display:flex;justify-content:space-between;gap:12px;padding:.35em 0;border-bottom:1px dotted var(--line)}
.summary .line.total{font:600 1.5rem var(--serif);border-bottom:0;border-top:2px solid var(--ink);margin-top:8px;padding-top:.6em}
.summary .thumb{margin-bottom:14px}
.gift-fields{margin:.4rem 0 1rem;padding:14px;background:rgba(201,162,74,.12);border:1px solid var(--brass)}
.gift-fields[hidden]{display:none}

/* download, reveal, thanks, library */
.dl-item{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,44px);align-items:center;margin:0 0 44px}
@media(max-width:820px){.dl-item{grid-template-columns:1fr}}
.dl-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.dl-list{list-style:none;margin:0;padding:0}.dl-list li{padding:.5em 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.reveal{min-height:calc(100vh - 64px);padding:clamp(28px,5vw,60px) 0 70px;text-align:center}
.reveal .wall-card{max-width:900px;margin:0 auto}
.reveal h1{margin-bottom:.2em}
.countdown{font:italic clamp(1.8rem,5vw,3rem) var(--serif);color:#5b430f;margin:0 0 .3em}
.gift-note{max-width:34em;margin:26px auto 0;background:#f6f1e4;color:var(--ink);padding:22px 26px;border:1px solid rgba(0,0,0,.2);font:italic 1.45rem/1.4 var(--serif);box-shadow:0 18px 30px -22px rgba(0,0,0,.7);opacity:0;transform:translateY(14px);transition:opacity .9s .9s,transform .9s .9s}
.reveal.shown .gift-note{opacity:1;transform:none}
.gift-note small{display:block;font:700 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px;font-style:normal}
.lib-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.lib-list li{background:var(--paper);border:1px solid var(--line);padding:14px}
.vcard{max-width:520px;margin:20px auto;padding:30px;text-align:center;background:var(--paper);border:3px double var(--brass-d)}
.vcard .code{font:600 2rem/1.2 var(--serif);letter-spacing:.08em;margin:.4em 0}
.mock-note{border:2px dashed var(--danger);padding:10px 14px;background:rgba(138,31,31,.06);margin-bottom:18px}
.fakecard{opacity:.6;pointer-events:none}

@media(max-width:520px){.bar{gap:10px}.brand{font-size:1.2rem}.mark svg{width:28px;height:28px}.rg{padding:6px 9px;font-size:.78rem;min-height:34px}.nav-toggle{padding:6px 10px}}
@media(max-width:600px){body{font-size:17px}.frame{padding:7px}.mat{padding:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.site-head,.site-foot,.devbar,.btn,.nav,.cfg-bar,.no-print{display:none!important}body{background:#fff}.vcard{border-color:#000}}

/* configurator v2: four steps, pin colours, toggles, sizes, side-by-side */
.cstep[hidden]{display:none}
.csteps{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 14px;flex-wrap:wrap}
.csteps li{flex:1 1 0;min-width:90px}
.csteps button{width:100%;min-height:44px;border:1px solid var(--line);background:#fffdf8;font:600 .95rem var(--sans);cursor:pointer;border-radius:var(--r);color:var(--ink-2)}
.csteps button b{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--wall-2);margin-right:.35em;font-size:.85em}
.csteps button[aria-current=step]{border-color:var(--verdigris);box-shadow:0 0 0 2px rgba(36,90,83,.25);color:var(--ink)}
.csteps button[aria-current=step] b{background:var(--verdigris);color:#fff}
.csteps button.done b{background:var(--brass);color:#1d2422}
.pinpick{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pinpick:before{content:"Colour";font:600 .82rem var(--sans);margin-right:4px;color:var(--ink-2)}
.pin{position:relative;display:block;margin:0}
.pin input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pin span{display:block;width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #777}
.pin:has(input:checked) span{box-shadow:0 0 0 3px var(--verdigris)}
.pin:has(input:focus-visible) span{outline:3px solid var(--brass);outline-offset:2px}
.toggles{display:grid;gap:10px;margin-top:14px}
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;width:max-content}
.seg2 label{margin:0;padding:10px 22px;background:#fffdf8;cursor:pointer;font-weight:600}
.seg2 label:has(input:checked){background:var(--verdigris);color:#fff}
.seg2 input{position:absolute;opacity:0}
.seg2 label:has(input:focus-visible){outline:3px solid var(--brass);outline-offset:-3px}
.switch{display:flex;gap:.7em;align-items:center;margin:0;cursor:pointer;font-weight:400}
.switch input{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:26px;border-radius:13px;background:#b9b3a4;position:relative;cursor:pointer;transition:background .15s;margin:0}
.switch input:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.switch input:checked{background:var(--verdigris)}
.switch input:checked:after{left:23px}
.switch input:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.sizes label{display:block;margin:0;border:1px solid var(--line);background:#fffdf8;padding:11px 12px;cursor:pointer}
.sizes label:has(input:checked){border-color:var(--verdigris);box-shadow:0 0 0 2px rgba(36,90,83,.25)}
.sizes input{position:absolute;opacity:0}
.sizes label:has(input:focus-visible){outline:3px solid var(--brass);outline-offset:2px}
.sizes b{display:block}.sizes small{display:block;color:var(--muted);font-size:.82rem}
.sbs{margin:22px 0}
.sbs img{width:100%;height:auto;border:1px solid var(--line)}
.sbs figcaption{margin-top:8px;font-size:.92rem;color:var(--muted)}
.sbs-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,24px)}
@media(max-width:560px){.sbs-row{grid-template-columns:1fr}}
.sbs-cell .placard{text-align:center}

/* create flow v2: place, review, sizes, extras, consents */
.geo{max-width:660px;margin-top:1.4rem}
.geo-msg{font:400 1.2rem/1.4 var(--serif);margin:0 0 .8rem;min-height:1.4em}.geo-msg:focus{outline:none}
.cands{border:0;padding:0;margin:0 0 1rem}.cands>legend{font:700 .95rem var(--sans);margin-bottom:.4rem;padding:0}
.cand{display:flex;gap:.8em;align-items:flex-start;border:1px solid var(--line);background:#fffdf8;padding:12px 14px;margin:0 0 8px;cursor:pointer;font-weight:400}
.cand:has(input:checked){border-color:var(--verdigris);box-shadow:0 0 0 2px rgba(36,90,83,.25)}
.cand:has(input:focus-visible){outline:3px solid var(--brass);outline-offset:2px}
.cand-t{display:grid;gap:.1em;min-width:0}.cand-t b{overflow-wrap:anywhere}.cand-t small{color:var(--muted);font-size:.9rem}.cand-t .conf{font-weight:700;color:var(--verdigris)}
.tips{margin:0 0 1rem;padding-left:1.2em}
.pin-fig{margin:1rem 0 0}
.pin-frame{position:relative;aspect-ratio:4/3;width:100%;background:repeating-linear-gradient(45deg,#e9e2d0 0 10px,#f3eee2 10px 20px);border:1px solid var(--line);overflow:hidden}
.pin-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pin-wait{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.6em;padding:16px;text-align:center}.pin-wait p{margin:0;max-width:24em}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid rgba(0,0,0,.18);border-top-color:var(--verdigris);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pin-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.notify{margin:.4rem 0 1rem;padding:14px;border:1px solid var(--line);background:var(--paper)}
.szgrp{margin:0 0 14px}.szgrp>legend{font:700 .95rem var(--sans);padding:0;margin-bottom:6px}
.extras{display:grid;gap:12px;margin-bottom:1rem}
.switch.xs{align-items:flex-start}.switch.xs input{margin-top:.15em}.switch .xh{display:block;color:var(--muted);font-size:.9rem}
.xn input{max-width:7em}
.rv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:start}
@media(max-width:900px){.rv{grid-template-columns:1fr}}
.rv-pic{position:sticky;top:12px}@media(max-width:900px){.rv-pic{position:static}}
.rv-text h2{font-size:clamp(1.8rem,3.4vw,2.4rem)}.rv-text h2:focus{outline:none}
.rv-grp{border:1px solid var(--line);background:var(--paper);padding:10px 14px;margin:0 0 10px}.rv-grp h3{font:700 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-d);margin:0 0 .3em}
.rv-row{display:grid;grid-template-columns:minmax(5.5em,.35fr) minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:.3em 0;border-top:1px dotted var(--line)}
.rv-l{color:var(--muted);font-size:.9rem}.rv-v{overflow-wrap:anywhere;font-family:var(--serif);font-size:1.15rem}
.rv-approve{margin:1rem 0;padding:12px 14px;border:2px solid var(--brass);background:rgba(201,162,74,.12)}
.consents{margin:0 0 1rem}
select{appearance:auto}
@media(max-width:560px){.rv-row{grid-template-columns:1fr auto}.rv-l{grid-column:1/-1}}