/* Radwraps — seaside shop. Sand ground, sea-blue type and buttons, sun for numbers and highlights, mint for help, hut red for small accents. */
:root{
  --sand:#F4EBDA; --sand-2:#EADCC3; --sea:#0D4A6B; --sea-2:#0A3A55; --deep:#0B2231; --red:#D33B2C; --red-ink:#B0281C;
  --sun:#F6BA2F; --mint:#A6DDCB; --white:#FFFFFF; --muted:#4C5A63; --line:#DCCFB8; --ctrl:#857A68; --good:#1E6B52;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Atkinson Hyperlegible",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--sand);color:var(--deep);font:17px/1.55 var(--body)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset{margin:0}
fieldset{border:0;padding:0;min-width:0}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;text-wrap:balance}
img{max-width:100%;display:block}
a{color:var(--sea)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--sea);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:16px}
@media (min-width:768px){.wrap{padding-inline:32px}}
.num{font-family:var(--display);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:15px;line-height:22px}
.eb{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:14px;background:var(--sea);color:var(--white);border:2px solid var(--sea);font:700 17px/1.1 var(--body);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--sea-2);border-color:var(--sea-2)}
.btn.ghost{background:transparent;color:var(--sea)}
.btn.ghost:hover{background:var(--white)}
.btn.sun{background:var(--sun);border-color:var(--sun);color:var(--deep)}
.btn.sm{min-height:42px;padding:0 16px;font-size:15px}
.btn.block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.link{font-weight:700;color:var(--sea);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;font:inherit;font-weight:700;cursor:pointer}
.ctas{display:flex;flex-wrap:wrap;gap:10px}

/* header */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--sand);border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{width:136px;height:auto;display:block;--rad:var(--sea);--wraps:var(--sea)}
.head nav{display:flex;gap:4px;flex:1;min-width:0}
.head nav a{font-weight:700;font-size:15px;text-decoration:none;padding:9px 12px;border-radius:10px;color:var(--sea);white-space:nowrap}
.head nav a:hover{background:var(--white)}
.head nav a[aria-current="page"]{background:var(--white);box-shadow:inset 0 -3px 0 var(--sun)}
.basket-btn{position:relative;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;color:var(--sea);padding:8px 10px;border-radius:10px}
.basket-btn .count[data-n="0"]{position:absolute;width:1px;height:1px;min-width:0;padding:0;overflow:hidden;clip:rect(0 0 0 0)}
.basket-btn .count{min-width:22px;height:22px;border-radius:11px;background:var(--red-ink);color:var(--white);font:700 12px/22px var(--body);text-align:center;padding:0 6px}
.menu-btn{display:none;background:none;border:0;color:var(--sea);padding:8px;cursor:pointer}
@media (max-width:1020px){
  .head nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--sand);border-bottom:1px solid var(--line);padding:8px 16px 16px;display:none}
  .head nav.open{display:flex}
  .head nav a{font-size:18px;padding:12px}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:10px}
  .head .wrap{gap:4px;min-height:64px}
  .head .wrap > a:first-child{margin-right:auto}
}
@media (max-width:400px){.logo{width:116px}}

/* awning scallops and stripes */
.awning{height:16px;background:radial-gradient(circle at 12px 0,var(--sand) 11.5px,transparent 12.5px) 0 0/24px 16px repeat-x}
.stripes{height:14px;background:repeating-linear-gradient(90deg,var(--sea) 0 36px,var(--sand) 36px 48px,var(--mint) 48px 84px,var(--sand) 84px 96px,var(--sun) 96px 132px,var(--sand) 132px 144px,var(--red) 144px 180px,var(--sand) 180px 192px)}

/* pages */
.page{padding-bottom:0}
.sec{padding-block:72px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 40px;margin-bottom:32px}
.sec-head h2{font-size:clamp(34px,4.4vw,54px)}
.sec-head p{max-width:56ch;color:var(--muted)}
.band-sea{background:var(--sea);color:var(--white)}
.band-sea a{color:var(--white)}
.band-mint{background:var(--mint)}
.band-sun{background:var(--sun)}
.band-white{background:var(--white)}

/* hero picker (home) */
.hero{padding-block:44px 56px}
.hero-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:16px 40px;margin-bottom:28px}
@media (max-width:860px){.hero-top{grid-template-columns:1fr}}
.hero-side{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hero h1{font-size:clamp(42px,6vw,82px);max-width:13ch}
.hero-top p{font-size:19px;line-height:28px;color:var(--muted);max-width:40ch}
.hero-top .aside{display:inline-flex;gap:10px;align-items:center;background:var(--white);border-radius:999px;padding:8px 8px 8px 16px;font-weight:700;font-size:15px;text-decoration:none;color:var(--sea)}
.hero-top .aside span{background:var(--sun);color:var(--deep);border-radius:999px;padding:4px 10px;font-size:13px}
.picker{background:var(--white);border-radius:24px;padding:clamp(12px,2vw,24px);display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px 32px;align-items:start}
@media (max-width:980px){.picker{grid-template-columns:1fr}}
.pk-stage{display:flex;flex-direction:column;gap:10px;min-width:0}
@media (min-width:981px){.pk-stage{position:sticky;top:96px}}
.pk-cap{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:15px}
.pk-cap .kind{color:var(--muted)}
.pk-cap .concept{margin-left:auto;font:11px var(--mono);color:var(--muted)}
.pk-panel{display:flex;flex-direction:column;gap:14px;min-width:0}
.step-label{display:flex;gap:10px;align-items:center;font-weight:700;font-size:16px}
.step-label b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sun);font:800 14px var(--display)}
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--sand)}
.seg button{flex:1;font:700 15px/1.2 var(--body);background:none;border:0;border-radius:999px;padding:10px 12px;cursor:pointer;color:var(--sea);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--sea);color:var(--white)}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:980px){.chips{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
.chips button{display:flex;flex-direction:column;gap:6px;text-align:left;font:700 13px/1.25 var(--body);color:var(--deep);background:none;border:0;padding:0;cursor:pointer}
.chips img{width:100%;aspect-ratio:196/114;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px rgba(11,34,49,.12)}
.chips button[aria-pressed="true"] img{box-shadow:0 0 0 3px var(--red)}
.chips button:focus-visible{outline:none}.chips button:focus-visible img{outline:3px solid var(--sea);outline-offset:3px}
.size-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field .lab{font-weight:700;font-size:15px}
.field label span{font-weight:400;color:var(--muted)}
.input,select.input,textarea.input{font:500 18px/1.2 var(--display);color:var(--deep);background:var(--white);border:2px solid var(--ctrl);border-radius:12px;padding:12px 14px;width:100%;min-width:0}
textarea.input,.input.text{font:17px/1.4 var(--body)}
.input:focus{outline:none;border-color:var(--sea);box-shadow:0 0 0 3px rgba(13,74,107,.18)}
.input[aria-invalid="true"]{border-color:var(--red-ink)}
.err{color:var(--red-ink);font-weight:700;font-size:15px}
.price{min-height:48px;font-size:15px;line-height:22px}
.price b{display:block;font:800 32px/1.1 var(--display);color:var(--sea)}

/* before/after */
.ba{position:relative;aspect-ratio:3/2;max-width:100%;overflow:hidden;border-radius:16px;background:#CFCAC1;touch-action:pan-y}
.ba .l{position:absolute;inset:0;background-size:cover;background-position:center}
.ba .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D4A6B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5'/%3E%3Cpath d='m15 7 5 5-5 5'/%3E%3C/svg%3E");background-size:22px;background-repeat:no-repeat;background-position:center}
.ba .lab{position:absolute;top:12px;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:rgba(11,34,49,.66);color:#fff;padding:4px 8px;border-radius:6px;pointer-events:none}
.ba .lab.b{left:12px}.ba .lab.a{right:12px}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba:focus-within .handle::after{outline:3px solid var(--sun);outline-offset:2px}
.picker[data-room="nursery"] .ba [data-o="before"],.picker[data-room="nursery"] .ba .handle,.picker[data-room="nursery"] .ba .lab,.picker[data-room="nursery"] .ba input{display:none}
.picker[data-room="nursery"] .ba .after{clip-path:none}
.photo{background-size:cover;background-position:center;background-color:#D8D0C2}

/* trust bar */
.trust .awning{background:radial-gradient(circle at 12px 0,var(--sand) 11.5px,var(--sea) 12.5px) 0 0/24px 16px repeat-x}
.trust ul{list-style:none;padding:20px 0 28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px}
@media (max-width:900px){.trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trust li{display:flex;gap:12px;align-items:center;font-weight:700;font-size:16px;line-height:21px}
.trust li svg{flex:none;color:var(--sun)}

/* tickets (steps) */
.tickets{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:t}
@media (max-width:980px){.tickets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tickets{grid-template-columns:1fr}}
.ticket{position:relative;background:var(--white);border-radius:18px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ticket::before{content:"";position:absolute;left:0;right:0;top:64px;border-top:2px dashed var(--line)}
.ticket .n{font:800 34px/1 var(--display);color:var(--sea);display:flex;justify-content:space-between;align-items:center;height:40px;margin-bottom:12px}
.ticket .n svg{color:var(--red)}
.ticket b{font:800 22px/1.15 var(--display)}
.ticket span{color:var(--muted);font-size:16px;line-height:24px}
.ticket .link{margin-top:auto;padding-top:6px;font-size:15px}

/* product range */
.range{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1100px){.range{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.range{grid-template-columns:1fr}}
.prod{background:var(--white);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.prod .photo{aspect-ratio:4/3;max-width:100%;background-size:240%;background-position:50% 58%}
.prod .photo.n{background-position:50% 50%}
.prod .body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod h3{font-size:26px}
.prod p{color:var(--muted);font-size:16px;line-height:24px}
.prod .rate{font:800 20px/1.2 var(--display);color:var(--sea);margin-top:auto;padding-top:8px}
.prod .rate span{display:block;font:400 14px/1.4 var(--body);color:var(--muted)}
.prod .btn{margin-top:8px}

/* audience doors */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.doors{grid-template-columns:1fr}}
.door{display:grid;grid-template-rows:auto 1fr;min-width:0}
.door .photo{aspect-ratio:16/10;max-width:100%;background-position:center 62%}
.door .txt{padding:32px clamp(16px,4vw,48px) 40px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.door h3{font-size:clamp(32px,3.6vw,46px)}
.door p{max-width:40ch}
.door.home{background:var(--mint)}.door.nursery{background:var(--sun)}
.door .eb{color:var(--deep)}

/* designs */
.cat-pills{display:flex;flex-wrap:wrap;gap:10px}
.cat-pills button,.cat-pills a{display:inline-flex;gap:8px;align-items:center;background:var(--white);border:2px solid transparent;border-radius:999px;padding:9px 16px;text-decoration:none;font:700 15px/1.2 var(--body);color:var(--deep);cursor:pointer}
.cat-pills span{font-weight:400;color:var(--muted);font-size:14px}
.cat-pills button[aria-pressed="true"]{border-color:var(--sea);background:var(--sea);color:var(--white)}
.cat-pills button[aria-pressed="true"] span{color:#CFE0E8}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:20px}
.dtile{display:flex;flex-direction:column;gap:8px;min-width:0}
.dtile .img{aspect-ratio:5/3;border-radius:12px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(11,34,49,.1)}
.dtile b{font-size:16px;line-height:20px}
.dtile .meta{font-size:14px;color:var(--muted)}
.dtile .btn{align-self:flex-start}
.strip-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}

/* proof pair */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:860px){.pair{grid-template-columns:1fr}}
.card{border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card h2,.card h3{font-size:clamp(30px,3.4vw,42px)}
.card .big{font:800 clamp(56px,8vw,96px)/.9 var(--display);color:var(--sun);font-variant-numeric:tabular-nums}
.card.sea{background:var(--sea);color:var(--white)}
.card.sea p{color:#DCE7EC}
.card.mint{background:var(--mint)}
.card.white{background:var(--white)}
.card .ic{color:var(--red)}

/* postcard */
.postcard{position:relative;background:var(--white);border-radius:6px;padding:32px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 40px;box-shadow:0 18px 40px rgba(11,34,49,.12);transform:rotate(-.6deg)}
@media (max-width:860px){.postcard{grid-template-columns:1fr;transform:none}}
.postcard::after{content:"";position:absolute;top:18px;right:18px;width:64px;height:76px;border:2px dashed var(--red);border-radius:4px;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(211,59,44,.08) 6px 12px)}
.postcard .lines{border-left:2px solid var(--line);padding-left:24px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.postcard .lines span{border-bottom:2px solid var(--line);padding-bottom:8px;font-size:15px;color:var(--muted)}
.postcard h2{font-size:clamp(32px,4vw,48px);padding-right:72px}

/* faq */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--white);border-radius:14px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;font:800 19px/1.25 var(--display);padding:18px 32px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font:800 24px var(--display);color:var(--sea)}
.faq details[open] summary::after{content:"\2013"}
.faq details > div{padding:0 0 18px;color:var(--muted);max-width:70ch;display:flex;flex-direction:column;gap:8px}
.faq-group{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px 40px;padding-block:28px;border-top:2px solid var(--line)}
@media (max-width:860px){.faq-group{grid-template-columns:1fr}}
.faq-group h2{font-size:30px}

/* footer */
.foot{background:var(--deep);color:#D6E2E8}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:56px 32px}
@media (max-width:900px){.foot .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot .wrap{grid-template-columns:1fr}}
.foot .logo{--rad:#FFFFFF;--wraps:#FFFFFF;width:150px}
.foot .tag{font:800 28px/1.1 var(--display);color:var(--sun);margin-top:16px;max-width:12ch}
.foot h4{font:700 15px var(--body);color:var(--white);margin-bottom:10px}
.foot ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.foot a{color:#D6E2E8;text-decoration:none}.foot a:hover{color:var(--white);text-decoration:underline}
.foot .base{border-top:1px solid #23394A;padding-block:18px 28px;font-size:13px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;grid-template-columns:none}

/* ===== configurator ===== */
.cfg-head{padding-block:28px 20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 32px}
.cfg-head h1{font-size:clamp(36px,4.6vw,60px)}
.stepper{list-style:none;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.stepper button{display:inline-flex;gap:8px;align-items:center;font:700 15px var(--body);background:var(--white);color:var(--muted);border:0;border-radius:999px;padding:8px 14px 8px 8px;cursor:pointer}
.stepper button b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sand-2);color:var(--deep);font:800 13px var(--display)}
.stepper button[aria-current="step"]{background:var(--sea);color:var(--white)}
.stepper button[aria-current="step"] b{background:var(--sun)}
.stepper button.done b{background:var(--mint)}
.stepper button[disabled]{cursor:not-allowed;opacity:.6}
.cfg{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px 32px;align-items:start;padding-bottom:72px}
@media (max-width:980px){.cfg{grid-template-columns:1fr}}
.stage{background:var(--sand-2);border-radius:24px;padding:clamp(16px,3vw,40px) clamp(16px,3vw,40px) 0;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;overflow:hidden}
@media (min-width:981px){.stage{position:sticky;top:96px}}
.stage .wall{width:100%;display:flex;flex-direction:column;align-items:center}
.rad{position:relative;width:100%;max-width:620px;background:#FBFAF7;border-radius:10px;box-shadow:0 2px 0 #E2DED6,0 12px 24px rgba(11,34,49,.10);padding:3.2% 3.2%}
.rad::before,.rad::after{content:"";position:absolute;bottom:-26px;width:10px;height:26px;background:linear-gradient(90deg,#B87333,#D89A61,#B87333);border-radius:2px}
.rad::before{left:3%}.rad::after{right:3%}
.cover{position:relative;width:100%;aspect-ratio:var(--ar,1.6667);border-radius:8px;overflow:hidden;background:repeating-linear-gradient(90deg,#F1EFEA 0 10px,#E6E3DC 10px 12px);touch-action:none;cursor:grab}
.cover:active{cursor:grabbing}
.cover .img{position:absolute;inset:0;background-repeat:no-repeat}
.cover .trim{position:absolute;inset:4%;border:2px dashed rgba(255,255,255,.9);border-radius:4px;box-shadow:0 0 0 1px rgba(11,34,49,.25);pointer-events:none}
.cover:focus-visible{outline:3px solid var(--sea);outline-offset:4px}
.floor{width:calc(100% + 80px);height:40px;margin-top:26px;background:linear-gradient(#D9C9AC,#CDBB9B);border-top:6px solid #FBFAF7}
.stage-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;width:100%;font-size:15px;padding-bottom:18px}
.dims{font:500 14px var(--mono);color:var(--muted)}
.panel{background:var(--white);border-radius:24px;padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:18px;min-width:0}
.panel h2{font-size:30px}
.panel .help{background:var(--sand);border-radius:12px;padding:14px 16px;font-size:15px;line-height:22px}
.panel details summary{cursor:pointer;font-weight:700;color:var(--sea)}
.panel details[open] summary{margin-bottom:10px}
.panel ol{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick button{font:500 14px var(--mono);background:var(--sand);border:0;border-radius:999px;padding:8px 12px;cursor:pointer;color:var(--deep)}
.quick button:hover{background:var(--sand-2)}
.unit{display:inline-flex;background:var(--sand);border-radius:999px;padding:3px}
.unit button{font:700 14px var(--body);border:0;background:none;padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--sea)}
.unit button[aria-pressed="true"]{background:var(--sea);color:var(--white)}
.msg{border-radius:12px;padding:12px 14px;font-size:15px;line-height:22px}
.msg.ok{background:#E3F2EC;color:#14523E}
.msg.warn{background:#FCEFD0;color:#6A4A00}
.msg.bad{background:#F9E0DD;color:#8C1F14}
.nav-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:16px}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line)}
.tabs button{font:700 16px var(--body);background:none;border:0;padding:10px 14px;margin-bottom:-2px;border-bottom:3px solid transparent;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected="true"]{color:var(--sea);border-bottom-color:var(--sea)}
.pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:520px){.pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pick-grid button{display:flex;flex-direction:column;gap:6px;background:none;border:0;padding:0;text-align:left;font:700 13px/1.25 var(--body);color:var(--deep);cursor:pointer}
.pick-grid .img{aspect-ratio:5/3;border-radius:8px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(11,34,49,.12)}
.pick-grid button[aria-pressed="true"] .img{box-shadow:0 0 0 3px var(--red)}
.pick-grid button:focus-visible{outline:none}.pick-grid button:focus-visible .img{outline:3px solid var(--sea);outline-offset:3px}
.drop{border:2px dashed var(--ctrl);border-radius:16px;padding:28px 16px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;background:var(--sand)}
.drop.over{border-color:var(--sea);background:#E6EEF2}
.drop svg{color:var(--sea)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:22px}
.check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--sea)}
.range-row{display:flex;gap:12px;align-items:center}
.range-row input[type=range]{flex:1;accent-color:var(--sea)}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.qbadge{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--body);border-radius:999px;padding:4px 10px}
.qbadge.good{background:#E3F2EC;color:#14523E}.qbadge.ok{background:#FCEFD0;color:#6A4A00}.qbadge.low{background:#F9E0DD;color:#8C1F14}
.summary{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:16px}
.summary dt{color:var(--muted)}
.summary dd{font-weight:700;text-align:right}
.qty{display:inline-flex;align-items:center;border:2px solid var(--ctrl);border-radius:12px;overflow:hidden}
.qty button{width:42px;height:42px;border:0;background:var(--white);font:800 20px var(--display);color:var(--sea);cursor:pointer}
.qty output{min-width:40px;text-align:center;font:800 18px var(--display)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--deep);color:var(--white);padding:12px 18px;border-radius:12px;font-weight:700;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px)}

/* ===== nurseries ===== */
.n-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px 48px;align-items:center;padding-block:40px 64px}
@media (max-width:900px){.n-hero{grid-template-columns:1fr}.n-hero .photo{order:-1}}
.n-hero h1{font-size:clamp(44px,6vw,80px)}
.n-hero p{font-size:19px;line-height:29px;color:var(--muted);max-width:44ch}
.n-hero .photo{aspect-ratio:3/2;border-radius:24px;max-width:100%}
.n-hero .who{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.n-hero .who span{background:var(--white);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.three{grid-template-columns:1fr}}
.three .card{background:var(--white);padding:0;overflow:hidden}
.three .card .photo,.three .card .art{aspect-ratio:5/3;max-width:100%}
.three .card .art{background:var(--sand-2);display:grid;place-items:center}
.three .card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px}
.three .card h3{font-size:26px}
.three .card p{color:var(--muted);font-size:16px;line-height:24px}
.quote-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:32px 48px;align-items:start}
@media (max-width:980px){.quote-wrap{grid-template-columns:1fr}}
.qform{background:var(--white);border-radius:24px;padding:clamp(18px,2.6vw,32px);display:flex;flex-direction:column;gap:18px;color:var(--deep)}
.qform .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.qform .grid2{grid-template-columns:1fr}}
.rads{display:flex;flex-direction:column;gap:10px}
.radrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr) minmax(0,.7fr) minmax(0,1.5fr) auto;gap:8px;align-items:end;background:var(--sand);border-radius:14px;padding:12px}
@media (max-width:760px){.radrow{grid-template-columns:repeat(2,minmax(0,1fr))}.radrow .rm{grid-column:2;justify-self:end}}
.radrow .field label{font-size:13px}
.radrow .input{font-size:16px;padding:10px 12px}
.rm{background:none;border:0;color:var(--red-ink);font-weight:700;cursor:pointer;padding:10px 6px}
.est{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;border-top:2px dashed var(--line);padding-top:14px}
.est b{font:800 30px var(--display);color:var(--sea)}
.done-msg{background:#E3F2EC;color:#14523E;border-radius:14px;padding:16px 18px;font-weight:700}
.asks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:860px){.asks{grid-template-columns:1fr}}
.ask{background:var(--white);border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.ask b{font:800 20px/1.25 var(--display)}
.ask p{color:var(--muted);font-size:16px;line-height:24px}

/* ===== measure ===== */
.m-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px 48px;align-items:start}
@media (max-width:900px){.m-grid{grid-template-columns:1fr}}
.diagram{background:var(--white);border-radius:24px;padding:24px}
.diagram svg{width:100%;height:auto;display:block}
.m-steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
.m-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.m-steps .n{width:44px;height:44px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font:800 20px var(--display)}
.m-steps b{display:block;font:800 22px/1.2 var(--display);margin-bottom:4px}
.m-steps span{color:var(--muted)}
.types{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:760px){.types{grid-template-columns:repeat(2,minmax(0,1fr))}}
.types button{background:var(--white);border:2px solid transparent;border-radius:14px;padding:14px 10px;font:700 15px var(--body);color:var(--deep);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px}
.types button svg{color:var(--sea)}
.types button[aria-pressed="true"]{border-color:var(--sea)}
.conv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.table{width:100%;border-collapse:collapse;font-size:16px;background:var(--white);border-radius:16px;overflow:hidden}
.table th,.table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.table th{font-weight:700;background:var(--sand-2)}
.table td.num{font-family:var(--display)}

/* ===== basket ===== */
.bk{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px 40px;align-items:start;padding-bottom:72px}
@media (max-width:900px){.bk{grid-template-columns:1fr}}
.lines{display:flex;flex-direction:column;gap:12px}
.line{background:var(--white);border-radius:18px;padding:16px;display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:16px;align-items:center}
@media (max-width:560px){.line{grid-template-columns:96px minmax(0,1fr)}.line .lp{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}}
.line .img{aspect-ratio:5/3;border-radius:10px;background-size:cover;background-position:center}
.line b{font:800 19px/1.2 var(--display)}
.line .meta{font-size:14px;color:var(--muted)}
.line .acts{display:flex;gap:14px;margin-top:6px;font-size:14px}
.line .lp{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.line .lp .num{font-size:22px;font-weight:800;color:var(--sea)}
.empty{background:var(--white);border-radius:24px;padding:40px 28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.empty h2{font-size:32px}
.paybox{background:var(--white);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:14px}
.pay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pay button{min-height:46px;border-radius:12px;border:2px solid var(--deep);background:var(--white);font:700 15px var(--body);color:var(--deep);cursor:pointer}
.pay button.dark{background:var(--deep);color:var(--white)}

.band-white .ticket,.band-white .types button{background:var(--sand)}
.dir{list-style:none;padding:0;columns:3 220px;column-gap:40px}
.dir li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);break-inside:avoid;font-weight:700}
.dir li a{text-decoration:none;color:var(--deep)}.dir li a:hover{color:var(--sea);text-decoration:underline}
.dir .num{color:var(--muted);font-weight:500}

/* review round: tap targets, search, final band */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:var(--sea)}
.icon-btn:hover{background:var(--white)}
.seg button,.stepper button,.quick button{min-height:44px}
.unit button{min-height:40px}
.pk-title{font-size:17px;margin:0 0 12px;color:var(--muted)}
.pk-title b{color:var(--deep)}
.final .awning{background:radial-gradient(circle at 12px 0,var(--sand) 11.5px,var(--sea) 12.5px) 0 0/24px 16px repeat-x}
.final .wrap{padding-block:40px 64px;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:20px 40px;align-items:center}
@media (max-width:860px){.final .wrap{grid-template-columns:1fr}}
.final h2{font-size:clamp(34px,4.4vw,56px)}
.final p{color:#DCE7EC;margin-top:10px}
.final .small{grid-column:1/-1;margin-top:0}
.final .small .link{color:var(--white)}
.btn.ghost.light{color:var(--white);border-color:var(--white)}
.btn.ghost.light:hover{background:rgba(255,255,255,.12)}
.more{margin-top:14px;font-size:15px}

/* header: dark, to match the footer */
.head{background:var(--deep);border-bottom:0;color:var(--white)}
.head .logo{--rad:#FFFFFF;--wraps:#FFFFFF}
.head nav a{color:var(--white)}
.head nav a:hover{background:rgba(255,255,255,.08)}
.head nav a[aria-current="page"]{background:rgba(255,255,255,.10);box-shadow:inset 0 -3px 0 var(--sun)}
.head .icon-btn,.head .basket-btn,.head .menu-btn{color:var(--white)}
.head .icon-btn:hover,.head .basket-btn:hover{background:rgba(255,255,255,.08)}
.head :focus-visible{outline-color:var(--sun)}
@media (max-width:1020px){.head nav{background:var(--deep);border-bottom:1px solid #1C3242}}

/* hero: upload your own */
.pk-upload{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;width:100%;border:2px dashed var(--ctrl);border-radius:12px;background:var(--sand);color:var(--sea);font:700 16px var(--body);cursor:pointer}
.pk-upload:hover{border-color:var(--sea);background:#EDE3CF}
.pk-upload[aria-pressed="true"]{border-style:solid;border-color:var(--red);background:var(--white)}
.pk-q{margin:0;font-size:14px;line-height:20px;padding:10px 12px}
.ba .own{position:absolute;left:35.9%;top:46.9%;width:29.2%;height:23.1%;border-radius:5px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.18)}
.picker[data-room="nursery"] .ba .own{left:36.9%;top:37.7%;width:27.6%;height:26.8%}

/* checkout */
.co-h{font:800 24px/1.1 var(--display);margin-bottom:6px;padding:0}
.co-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.co-or::before,.co-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.card-slot{display:flex;gap:12px;align-items:center;border:2px dashed var(--ctrl);border-radius:12px;padding:20px 16px;color:var(--muted);font-size:15px;background:var(--sand)}
.card-slot svg{color:var(--sea);flex:none}
.co-lines{display:flex;flex-direction:column;gap:12px}
.co-line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:15px;line-height:20px}
.co-line .img{aspect-ratio:5/3;border-radius:8px;background-size:cover;background-position:center}
.co-line .num{font-weight:800;color:var(--sea)}

.p-plain{background-image:url("../img/living-plain.jpg")}
.p-botanical{background-image:url("../img/living-botanical.jpg")}
.p-arches{background-image:url("../img/living-arches.jpg")}
.p-floral{background-image:url("../img/living-floral.jpg")}
.p-huts{background-image:url("../img/living-huts.jpg")}
.p-brush{background-image:url("../img/living-brush.jpg")}
.p-city{background-image:url("../img/living-city.jpg")}
.p-sage{background-image:url("../img/living-sage.jpg")}
.p-mirror{background-image:url("../img/living-mirror.jpg")}
.p-n-woodland{background-image:url("../img/nursery-woodland.jpg")}
.p-n-sea{background-image:url("../img/nursery-sea.jpg")}
.d-botanical{background-image:url("../img/design-botanical.jpg")}
.d-arches{background-image:url("../img/design-arches.jpg")}
.d-floral{background-image:url("../img/design-floral.jpg")}
.d-huts{background-image:url("../img/design-huts.jpg")}
.d-brush{background-image:url("../img/design-brush.jpg")}
.d-city{background-image:url("../img/design-city.jpg")}
.d-sage{background-image:url("../img/design-sage.jpg")}
.d-n-woodland{background-image:url("../img/design-n-woodland.jpg")}
.d-n-sea{background-image:url("../img/design-n-sea.jpg")}

/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:80;background:var(--sun);color:var(--deep);font-weight:700;padding:10px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}

/* ===== mobile optimisation ===== */
/* anchors and step scrolls land below the sticky header */
[id]{scroll-margin-top:84px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:break-word}
/* no grey flash on tap; controls respond instantly (no double-tap zoom delay) */
a,button,summary,label,select,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cover{touch-action:none}
/* header tap targets */
.head .wrap > a:first-child{display:inline-flex;align-items:center;min-height:44px}
.basket-btn{min-height:44px;min-width:44px;justify-content:center}
/* scrollable tables instead of page overflow */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px}

#email-txt{overflow-wrap:anywhere;min-width:0}
.ba .lab{font-size:12px}
.cfg-head > div{min-width:0;max-width:100%}

@media (max-width:640px){
  .sec{padding-block:48px}
  .sec-head{margin-bottom:24px}
  /* bigger touch targets for text links and small controls */
  .link{display:inline-flex;align-items:center;min-height:44px}
  p .link,li .link,.small .link,.more .link{display:inline;min-height:0;padding-block:10px}
  .dir li{padding:0;min-height:48px;align-items:center}
  .dir li a{display:flex;align-items:center;min-height:48px;flex:1}
  .unit button{min-width:44px;min-height:44px}
  .panel details summary{padding-block:10px}
  .rm{min-height:44px;padding-inline:10px}
  .qty button{width:44px;height:44px}
  .faq summary{padding-block:16px}
  .foot ul{gap:0}
  .foot ul a{display:inline-flex;align-items:center;min-height:44px}
  .foot .wrap{gap:24px;padding-block:40px 24px}
  /* product switch fits on one line */
  .seg button{white-space:normal;padding:8px 6px;font-size:14px;line-height:1.15}
  /* stepper: one row of four */
  .stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%}
  .stepper button{width:100%;flex-direction:column;gap:2px;padding:6px 2px;border-radius:14px;font-size:13px}
  /* configurator stage: less chrome, more cover */
  .cfg-head{padding-block:20px 16px}
  .cfg{gap:16px;padding-bottom:48px}
  .stage{padding:16px 16px 0;border-radius:18px;gap:10px}
  .rad::before,.rad::after{height:16px;bottom:-16px}
  .floor{height:20px;margin-top:16px}
  .stage-cap{padding-bottom:12px;font-size:14px}
  .panel{border-radius:18px}
  .nav-row{position:sticky;bottom:0;background:var(--white);margin-inline:-18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));z-index:5}
  .nav-row .btn{flex:1}
  /* cards and forms */
  .card{padding:24px 20px;border-radius:18px}
  .postcard{padding:24px 20px}
  .postcard::after{width:48px;height:58px;top:14px;right:14px}
  .postcard h2{padding-right:56px}
  .qform{border-radius:18px}
  .paybox{padding:20px;border-radius:18px}
  .empty{padding:28px 20px}
  .ctas .btn{flex:1 1 auto}
  .ticket .link{min-height:44px;padding-top:0}
  .head .icon-btn,.head .basket-btn,.head .menu-btn{flex:none}
  .picker{border-radius:18px}
  .door .txt{padding-block:24px 32px}
  .line{padding:12px;gap:12px}
  .line .lp{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px}
  .line .acts{flex-wrap:wrap;gap:4px 16px}
  .line .acts .link{white-space:nowrap}
  .table th,.table td{padding:10px 8px;font-size:15px}
  .table th:first-child,.table td:first-child{padding-left:14px}
  .table td{white-space:nowrap}
  .toast{bottom:calc(16px + env(safe-area-inset-bottom,0px));text-align:center}
}
@media (max-width:380px){
  .table th,.table td{padding:9px 6px;font-size:14px}
  .table th:first-child,.table td:first-child{padding-left:10px}
  .card.white:has(.table-scroll){padding-inline:16px}
  .table td:first-child{white-space:normal}
}
@media (max-width:360px){
  .seg button{font-size:13px}
  .chips{gap:8px}
  .hero h1{font-size:38px}
}

/* phone-sized room photos */
@media (max-width:640px){
  .ba .p-plain,.door .p-plain,.n-hero .p-plain{background-image:url("../img/m/living-plain.jpg");background-image:image-set(url("../img/m/living-plain.avif") type("image/avif"),url("../img/m/living-plain.jpg") type("image/jpeg"))}
  .ba .p-botanical,.door .p-botanical,.n-hero .p-botanical{background-image:url("../img/m/living-botanical.jpg");background-image:image-set(url("../img/m/living-botanical.avif") type("image/avif"),url("../img/m/living-botanical.jpg") type("image/jpeg"))}
  .ba .p-arches,.door .p-arches,.n-hero .p-arches{background-image:url("../img/m/living-arches.jpg");background-image:image-set(url("../img/m/living-arches.avif") type("image/avif"),url("../img/m/living-arches.jpg") type("image/jpeg"))}
  .ba .p-floral,.door .p-floral,.n-hero .p-floral{background-image:url("../img/m/living-floral.jpg");background-image:image-set(url("../img/m/living-floral.avif") type("image/avif"),url("../img/m/living-floral.jpg") type("image/jpeg"))}
  .ba .p-huts,.door .p-huts,.n-hero .p-huts{background-image:url("../img/m/living-huts.jpg");background-image:image-set(url("../img/m/living-huts.avif") type("image/avif"),url("../img/m/living-huts.jpg") type("image/jpeg"))}
  .ba .p-brush,.door .p-brush,.n-hero .p-brush{background-image:url("../img/m/living-brush.jpg");background-image:image-set(url("../img/m/living-brush.avif") type("image/avif"),url("../img/m/living-brush.jpg") type("image/jpeg"))}
  .ba .p-city,.door .p-city,.n-hero .p-city{background-image:url("../img/m/living-city.jpg");background-image:image-set(url("../img/m/living-city.avif") type("image/avif"),url("../img/m/living-city.jpg") type("image/jpeg"))}
  .ba .p-sage,.door .p-sage,.n-hero .p-sage{background-image:url("../img/m/living-sage.jpg");background-image:image-set(url("../img/m/living-sage.avif") type("image/avif"),url("../img/m/living-sage.jpg") type("image/jpeg"))}
  .ba .p-mirror,.door .p-mirror,.n-hero .p-mirror{background-image:url("../img/m/living-mirror.jpg");background-image:image-set(url("../img/m/living-mirror.avif") type("image/avif"),url("../img/m/living-mirror.jpg") type("image/jpeg"))}
  .ba .p-n-woodland,.door .p-n-woodland,.n-hero .p-n-woodland{background-image:url("../img/m/nursery-woodland.jpg");background-image:image-set(url("../img/m/nursery-woodland.avif") type("image/avif"),url("../img/m/nursery-woodland.jpg") type("image/jpeg"))}
  .ba .p-n-sea,.door .p-n-sea,.n-hero .p-n-sea{background-image:url("../img/m/nursery-sea.jpg");background-image:image-set(url("../img/m/nursery-sea.avif") type("image/avif"),url("../img/m/nursery-sea.jpg") type("image/jpeg"))}
}

/* keyword line inside the H1 (SEO): small mono kicker above the headline */
h1 .kicker{display:block;font:500 13px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink);margin-bottom:14px}
/* real <img> photos (indexable), same crop as the old background boxes */
picture.photo{display:block;overflow:hidden;background:#D8D0C2}
picture.photo img{display:block;width:100%;height:100%;object-fit:cover}
.door picture.photo img{object-position:center 62%}
.n-hero picture.photo{aspect-ratio:3/2;border-radius:24px}
.door picture.photo{aspect-ratio:16/10}