/* Northside Print theme styles. Built from design/responsive (the 2026 mockups). */
:root{--ink:#1D1D1F;--grey:#4D4D4F;--muted:#626268;--line:#E7E3DD;--paper:#FBFAF7;--red:#D41F28;--cyan:#00A3E0;--mag:#E6007E;--yel:#FFD000;
--tile:#FCFCFA;--tile-line:#E7E4DE;--gut:clamp(16px,4.4vw,64px);--max:1440px;
--in:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)))}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF;font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);font-size:16px;line-height:1.5}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--red)}
h1,h2,h3{font-family:'Inter Tight','DM Sans',sans-serif;margin:0;letter-spacing:-0.035em;font-weight:800;line-height:1.08}
p{margin:0}img{display:block;max-width:100%}button{font-family:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blob{position:absolute;pointer-events:none}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:12px;letter-spacing:.02em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 26px;border-radius:28px;font-weight:700;font-size:16px;border:0;cursor:pointer;white-space:nowrap}
.btn-white{background:#FFFFFF;color:var(--ink)}.btn-black{background:var(--ink);color:#FFFFFF}.btn-red{background:var(--red);color:#FFFFFF}
.btn-white:hover{color:var(--ink)}.btn-black:hover,.btn-red:hover{color:#FFFFFF}
.btn-outline{background:#FFFFFF;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.lift{box-shadow:0 10px 24px -10px rgba(0,0,0,.35)}
/* top bar */
.topbar{background:var(--ink);color:#FFFFFF;font-size:14px}
.topbar .wrap{height:60px;display:flex;align-items:center;justify-content:space-between;gap:24px;white-space:nowrap}
.usps{display:flex;gap:32px;align-items:center}
.usp{display:flex;gap:8px;align-items:center}.usp i{width:8px;height:8px;border-radius:50%;display:block}
.tb-right{display:flex;gap:24px;align-items:center}
.tb-phone{color:#FFFFFF;display:flex;gap:10px;align-items:center;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.01em}
.tb-phone:hover{color:#FFFFFF}
.tb-quote{height:40px;padding:0 20px;border-radius:20px;background:var(--red);color:#FFFFFF;display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px}
.tb-quote:hover{color:#FFFFFF}
/* header */
.site-header{background:#FFFFFF;border-bottom:1px solid var(--line);position:relative;z-index:10}
.site-header .wrap{height:96px;display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-word{display:flex;flex-direction:column;line-height:1}
.logo-word b{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:24px;letter-spacing:.02em;color:var(--grey)}
.logo-word small{font-size:10.5px;letter-spacing:.32em;margin-top:5px;color:var(--grey);font-weight:600}
.logo-word small span{color:var(--red)}
.nav{display:flex;gap:44px;align-items:center;margin-left:88px}
.nav a,.mnav a{display:flex;gap:6px;align-items:center;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.nav a{height:44px}
.nav-dd{position:relative}
.nav-dd .dd{position:absolute;left:-18px;top:100%;margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;width:500px;padding:14px;background:#FFFFFF;border-radius:16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.35),0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:20}
.nav-dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.nav-dd:hover .dd,.nav-dd:focus-within .dd{opacity:1;visibility:visible;transform:none}
.nav-dd .dd a{height:auto;padding:9px 12px;border-radius:10px;font-family:'DM Sans',sans-serif;font-weight:600;font-size:15px;letter-spacing:0;text-transform:none}
.nav-dd .dd a:hover{background:var(--paper)}
.nav-dd .dd .dd-all{grid-column:1/-1;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:6px;padding-top:14px;font-weight:700;gap:8px}
@media (prefers-reduced-motion:reduce){.nav-dd .dd{transition:none}}
.nav a[aria-current="page"]{color:var(--red);box-shadow:inset 0 -3px 0 var(--red)}
.hd-actions{margin-left:auto;display:flex;gap:12px;align-items:center}
.hd-btn{height:44px;padding:0 16px;border-radius:22px;display:flex;gap:8px;align-items:center;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.hd-login{box-shadow:inset 0 0 0 1.5px var(--line)}
.hd-cart{background:var(--ink);color:#FFFFFF;padding:0 18px;gap:10px}.hd-cart:hover{color:#FFFFFF}
.hd-cart em{font-style:normal;background:var(--red);border-radius:10px;padding:1px 7px;font-size:12px;letter-spacing:0}
.menu-btn{display:none;width:44px;height:44px;border-radius:22px;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);align-items:center;justify-content:center;cursor:pointer}
.mnav{display:none;border-top:1px solid var(--line);background:#FFFFFF}
.mnav a{padding:16px var(--gut);border-bottom:1px solid var(--line)}
.mnav a[aria-current="page"]{color:var(--red)}
.site-header.open .mnav{display:block}
/* footer */
.site-footer{position:relative;background:var(--ink);color:#FFFFFF;overflow:hidden}
.site-footer .wrap{position:relative;padding-top:84px;padding-bottom:32px}
.ft-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px}
.ft-brand{grid-column:span 2;display:flex;flex-direction:column;gap:20px}
.ft-brand p{color:#C9C7C3;font-size:14px;line-height:1.6;max-width:380px}
.ft-col{display:flex;flex-direction:column;gap:12px;font-size:14px}
.ft-col h4{margin:0 0 4px;font-size:15px;font-weight:700;color:#FFFFFF}
.ft-col a{color:#C9C7C3}.ft-col a.w{color:#FFFFFF}.ft-col span{color:#C9C7C3;line-height:1.6}
.ft-legal{display:flex;gap:18px;flex-wrap:wrap}.ft-legal a{color:#A9A7A3}.ft-legal a:hover{color:#FFFFFF}
.ft-bottom{margin-top:64px;border-top:1px solid #3A3A3D;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#A9A7A3}
.logo.dark .logo-word b,.logo.dark .logo-word small{color:#FFFFFF}
/* ---------- HOME ---------- */
.hero{position:relative;min-height:clamp(440px,43vw,620px);background:#FFFFFF url(../img/hero-paint.jpg) center/cover no-repeat;display:flex;align-items:center;overflow:hidden;
--step:56px;--bx:30px}
.hero-inner{padding:40px 0}
.hero h1{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(34px,5.3vw,76px);line-height:1;letter-spacing:-.04em}
.bar{display:block;background:var(--ink);color:#FFFFFF;padding:.18em var(--bx) .24em;white-space:nowrap}
.bar1{padding-left:var(--in)}
.bar2{margin-left:calc(var(--in) + var(--step));padding-right:var(--in)}
.bar .c{color:#6FD4FF}.bar .m{color:#FF3EA5}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0 calc(var(--in) + var(--step) + var(--bx))}
.hero-ctas .btn{height:60px;padding:0 30px;font-size:17px}
.trust{border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-top:44px;padding-bottom:44px}
.trust-item{display:flex;gap:16px;align-items:center}
.trust-item .dot{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trust-item b{display:block;font-size:16px}.trust-item span{font-size:14px;color:var(--muted)}
.sec{padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(56px,6vw,84px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:36px}
.sec-head h2{font-size:clamp(28px,2.7vw,38px);font-weight:700}
.sec-head p{font-size:17px;color:var(--muted);margin-top:10px;max-width:640px}
.more{display:flex;gap:8px;align-items:center;font-weight:600;white-space:nowrap}
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.shot{position:relative;background:var(--tile);border:1px solid var(--tile-line);border-radius:18px;overflow:hidden;aspect-ratio:1.24}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat{display:flex;flex-direction:column;gap:14px}
.cat-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cat-meta b{font-size:18px}.cat-meta span{font-size:14px;color:var(--muted);white-space:nowrap}
.sameday{position:relative;background:var(--cyan);color:#FFFFFF;overflow:hidden;margin-top:20px}
.sameday .wrap{position:relative;padding-top:clamp(56px,6vw,90px);padding-bottom:clamp(56px,6vw,90px)}
.sameday .sec-head h2,.sameday .sec-head p{color:#FFFFFF}
.sameday .more{color:#FFFFFF;font-weight:700}
.sd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sd-card{background:#FFFFFF;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px}
.sd-card .shot{border-radius:12px;aspect-ratio:274/170}
.sd-card b{font-size:17px}.sd-card .sub{font-size:14px;color:var(--muted)}
.sd-card .price{font-size:15px}.sd-card .price b{font-size:18px}.sd-card .price small{color:var(--muted);font-size:13px}
.how .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.how h2{font-size:clamp(28px,2.7vw,38px);font-weight:700}
.how-intro p{font-size:17px;color:var(--muted);margin-top:12px}
.step{display:flex;flex-direction:column;gap:16px;padding-top:8px}
.step .n{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:24px}
.step h3{font-size:22px;font-weight:700}.step p{color:var(--muted);line-height:1.55}
.help{padding-bottom:clamp(40px,5vw,64px)}
.help-box{position:relative;background:var(--mag);border-radius:24px;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px 40px;padding:48px 56px}
.help-box h2{font-size:30px;font-weight:700;color:#FFFFFF}
.help-box p{font-size:17px;color:#FFFFFF;opacity:.9;margin-top:10px}
.help-ctas{position:relative;display:flex;gap:14px;flex-wrap:wrap}
.help-copy{position:relative}
/* ---------- PRODUCT ---------- */
.crumb{padding-top:28px;font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--muted)}.crumb span:last-child{color:var(--ink)}
.pmain{display:grid;grid-template-columns:260px minmax(0,1fr) 470px;grid-template-rows:auto 1fr;grid-template-areas:'side img calc' 'side info calc';gap:28px 44px;padding-top:28px;align-items:start}
.side-desk{grid-area:side}.hero-shot{grid-area:img}.info{grid-area:info;min-width:0}.calc{grid-area:calc}
.side-panel{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:18px;padding:20px 12px;display:flex;flex-direction:column;gap:4px}
.side-title{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--muted);padding:0 12px 10px}
.side-row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:38px;line-height:1.25;padding:6px 12px;border-radius:10px;font-size:15px}
.side-row.on{background:#FFFFFF;font-weight:700;box-shadow:inset 0 0 0 2px var(--ink)}
.side-sub{display:flex;justify-content:space-between;height:32px;align-items:center;padding:0 12px 0 26px;font-size:14px;color:var(--muted)}
.sameday-card{position:relative;margin-top:24px;background:var(--yel);border-radius:16px;padding:22px;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.sameday-card>*:not(.blob){position:relative}.sameday-card b{font-size:17px}.sameday-card span{font-size:14px;line-height:1.45}
.sameday-card a{font-weight:700;font-size:14px;display:flex;gap:6px;align-items:center;margin-top:4px}
.side-mob{display:none;margin:20px 0 24px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:14px}
.side-mob summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;height:52px;padding:0 18px;font-weight:700}
.side-mob summary::-webkit-details-marker{display:none}
.side-mob[open] summary svg{transform:rotate(180deg)}
.side-mob .side-panel{box-shadow:none;background:transparent;padding:0 6px 12px}
.hero-shot{position:relative;background:var(--tile);border:1px solid var(--tile-line);border-radius:22px;overflow:hidden;aspect-ratio:494/600}
.hero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{height:50px;padding:0 18px;border:0;background:transparent;font-size:16px;font-weight:600;cursor:pointer;color:var(--muted);white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--red)}
.tabpanel{padding:20px 4px 0;font-size:16px;line-height:1.65;color:var(--muted)}
.tabpanel[hidden]{display:none}
.tpl-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.tpl-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font-weight:600;font-size:15px}
.tpl-list a small{color:var(--muted);font-weight:500}
.calc{display:flex;flex-direction:column;gap:22px;min-width:0}
.calc h1{font-size:clamp(30px,2.8vw,40px);font-weight:700}
.calc .lead{font-size:16px;line-height:1.55;color:var(--muted)}
.rule{height:1px;background:var(--line)}
.group{display:flex;flex-direction:column;gap:10px}
.group>b,.group>label>b{font-size:14px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opts.q{grid-template-columns:repeat(4,minmax(0,1fr))}
.opt{min-height:56px;border-radius:12px;border:0;cursor:pointer;text-align:left;padding:8px 16px;display:flex;flex-direction:column;justify-content:center;gap:2px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.opt[aria-pressed="true"]{background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--ink)}
.opt span{font-weight:600;font-size:15px}.opt small{font-size:13px;color:var(--muted)}
.opt.more-q{background:transparent;align-items:center;color:var(--muted);font-size:14px}
select{height:52px;border-radius:12px;border:1.5px solid var(--line);padding:0 44px 0 16px;font:inherit;font-size:15px;font-weight:500;color:var(--ink);width:100%;cursor:pointer;-webkit-appearance:none;appearance:none;background:#FFFFFF url("data:image/svg+xml;utf8,") no-repeat right 16px center}
select:hover{border-color:#CFCAC2}select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.08)}
.field{display:flex;flex-direction:column;gap:8px}.field b{font-size:14px}
.fields{display:flex;flex-direction:column;gap:18px}
.price-box{background:var(--paper);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:16px;box-shadow:inset 0 0 0 1.5px var(--line)}
.price-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.price-row small{font-size:14px;color:var(--muted);display:block}
.price-row .total{font-family:'Inter Tight',sans-serif;font-size:40px;font-weight:700;line-height:1;display:block;margin-top:4px}
.price-row .gst{text-align:right;font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.price-box .btn{width:100%;height:60px;font-size:17px}
.quote-box{border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:inset 0 0 0 1.5px var(--line)}
.quote-box b{font-size:17px}.quote-box span{font-size:14px;color:var(--muted);display:block;margin-top:4px}
.quote-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quote-btns .btn{height:52px;font-size:15px;font-weight:600;padding:0 12px}
.related{padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(56px,6vw,84px)}
.related-inner{margin-left:304px}
.related h2{font-size:28px;font-weight:700;margin-bottom:24px}
.rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.rel{display:flex;flex-direction:column;gap:10px}
.rel .shot{border-radius:16px;aspect-ratio:237/170}
.rel b{font-size:16px}.rel span{font-size:14px}
/* ---------- breakpoints ---------- */
@media (max-width:1280px){
.nav{margin-left:48px;gap:30px}
.usps .usp:nth-child(3){display:none}
.pmain{grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:'img calc' 'info calc';gap:28px 36px}
.side-desk{display:none}.side-mob{display:block}
.related-inner{margin-left:0}
}
@media (max-width:1040px){
.sameday .blob:first-child{display:none}
.nav{display:none}.menu-btn{display:flex}
.hd-login .t{display:none}.hd-login{padding:0 13px}
.trust .wrap{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px}
.sd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.how .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}.how-intro{grid-column:1/-1}
.ft-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ft-brand{grid-column:1/-1}
.help-box{flex-direction:column;align-items:flex-start;padding:40px}
}
@media (max-width:900px){
.usps{display:none}.topbar .wrap{justify-content:flex-end}
.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.pmain{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:'img' 'calc' 'info';gap:28px}
.hero-shot{aspect-ratio:660/500}
.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.sameday .blob,.help-box .blob{display:none}
.site-footer .blob{opacity:.35}
.topbar .wrap{height:52px;justify-content:space-between}
.tb-phone{font-size:18px}.tb-quote{height:36px;padding:0 14px;font-size:13px}
.site-header .wrap{height:72px}
.logo svg{width:40px;height:40px}.logo-word b{font-size:20px}.logo-word small{font-size:9px;letter-spacing:.28em}
.hd-cart .t{display:none}.hd-cart{padding:0 14px}
.hero{--step:18px;--bx:14px;min-height:480px;background-position:22% center}
.bar{white-space:normal}
.hero-ctas{margin-left:var(--in);margin-right:var(--in)}
.hero-ctas .btn{height:52px;font-size:16px;padding:0 22px}
.trust .wrap{grid-template-columns:minmax(0,1fr);padding-top:32px;padding-bottom:32px;gap:20px}
.cat-meta{flex-direction:column;gap:2px}.cat-meta b{font-size:16px}
.sd-grid{grid-template-columns:minmax(0,1fr)}
.how .wrap{grid-template-columns:minmax(0,1fr);gap:28px}
.help-box{padding:32px 24px;border-radius:20px}.help-box h2{font-size:26px}
.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.site-footer .wrap{padding-top:56px}
.opts.q{grid-template-columns:repeat(2,minmax(0,1fr))}
.price-row .total{font-size:34px}
.rel-grid{gap:16px 12px}
}
@media (max-width:420px){
.hd-login{display:none}
.tb-phone svg{display:none}
.hero h1{font-size:30px}
.quote-btns{grid-template-columns:minmax(0,1fr)}
.help-ctas .btn{width:100%}
}
/* ---------- shop + account ---------- */
.pg .crumb{padding-top:0}
.pg{padding-top:28px;padding-bottom:clamp(56px,6vw,88px)}
.pg-title{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin:18px 0 28px}
.pg-title h1{font-size:clamp(30px,3vw,42px);font-weight:700}
.pg-title p{color:var(--muted);margin-top:6px}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 28px;padding:0;list-style:none;font-size:14px;font-weight:600;color:var(--muted)}
.steps li{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.steps li i{font-style:normal;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--line)}
.steps li.done{color:var(--ink)}.steps li.done i{background:var(--ink);color:#FFFFFF;box-shadow:none}
.steps li.on{color:var(--ink);background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--ink)}.steps li.on i{background:var(--red);color:#FFFFFF;box-shadow:none}
.two{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:start}
.box{background:#FFFFFF;border-radius:18px;padding:24px;box-shadow:inset 0 0 0 1.5px var(--line)}
.box.soft{background:var(--paper)}
.box h2{font-size:22px;font-weight:700;margin-bottom:16px}
.box h3{font-size:17px;font-weight:700}
.stack-lg{display:flex;flex-direction:column;gap:24px}
.sticky{position:sticky;top:20px}
.item{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0;padding-top:0}
.item .shot{border-radius:12px;aspect-ratio:1.24}
.item h3{font-size:18px}
.spec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:10px 0 0;font-size:14px}
.spec dt{color:var(--muted)}.spec dd{margin:0}
.item-price{text-align:right;font-weight:700;font-size:19px;white-space:nowrap}
.item-price small{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:4px}
.item-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:14px;font-weight:600}
.item-actions a,.item-actions button{display:inline-flex;gap:6px;align-items:center;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:600;color:var(--ink)}
.item-actions button:hover,.item-actions a:hover{color:var(--red)}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);font-size:14px;line-height:1.5}
.note svg{flex-shrink:0;margin-top:1px}
.note.yel{background:#FFF8D6;box-shadow:inset 0 0 0 1.5px #F3DE7A}
.sum{display:flex;flex-direction:column;gap:2px}
.sum-row{display:flex;justify-content:space-between;gap:16px;font-size:15px;padding:6px 0}
.sum-row span:first-child{color:var(--muted)}
.sum-total{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;align-items:baseline}
.sum-total span:first-child{color:var(--ink);font-weight:700;font-size:16px}
.sum-total b{font-family:'Inter Tight',sans-serif;font-size:32px;font-weight:700;line-height:1}
.sum-gst{font-size:13px;color:var(--muted);text-align:right}
.mini{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14px}
.mini .shot{border-radius:10px;aspect-ratio:1}
.mini b{display:block;font-size:14.5px}.mini span{color:var(--muted);font-size:13px}
.mini-list{display:flex;flex-direction:column;gap:14px;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.btn-full{width:100%}
.btn-red.btn-full{height:60px;font-size:17px}
.btn-sm{height:44px;padding:0 18px;font-size:14px}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.linkish{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.coupon{display:flex;gap:10px}
.coupon input{flex:1;min-width:0}
/* forms */
.fields{display:flex;flex-direction:column;gap:16px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.row3{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.f{display:flex;flex-direction:column;gap:8px;min-width:0}
.f>b{font-size:14px}.f>b small{font-weight:500;color:var(--muted)}
.f input,.f textarea{height:52px;border-radius:12px;border:1.5px solid var(--line);padding:0 16px;font:inherit;font-size:15px;background:#FFFFFF;color:var(--ink);width:100%}
.f textarea{height:auto;min-height:104px;padding:14px 16px;resize:vertical}
.f input:focus,.f textarea:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.08)}
.hint{font-size:13px;color:var(--muted)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);flex-shrink:0}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.choice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer}
.choice:has(input:checked){background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--ink)}
.choice input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);flex-shrink:0}
.choice b{display:block;font-size:15.5px}.choice span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.choice em{font-style:normal;font-weight:700;margin-left:auto;white-space:nowrap}
.card-el{display:grid;grid-template-columns:minmax(0,1fr) 110px 90px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line);background:#FFFFFF;overflow:hidden}
.card-el input{border:0;height:52px;padding:0 16px;font:inherit;font-size:15px;min-width:0;background:transparent;color:var(--ink)}
.card-el input+input{border-left:1.5px solid var(--line)}
.card-el input:focus{outline:2px solid var(--ink);outline-offset:-2px}
.secure{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.sec-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sec-title i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:15px;flex-shrink:0}
.sec-title h2{margin:0}
/* order received + artwork */
.done-hero{display:flex;gap:20px;align-items:center;padding:28px;border-radius:20px;background:var(--ink);color:#FFFFFF;flex-wrap:wrap}
.done-hero .tick{width:64px;height:64px;border-radius:50%;background:var(--cyan);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.done-hero h1{font-size:clamp(28px,3vw,38px);font-weight:700;color:#FFFFFF}
.done-hero p{color:#D6D5D2;margin-top:6px}
.done-hero .btn{margin-left:auto}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--line)}
.facts div{background:#FFFFFF;padding:16px 18px}
.facts small{display:block;font-size:13px;color:var(--muted)}.facts b{font-size:16px}
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.next div{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.next .n{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Inter Tight',sans-serif;font-weight:700}
.next h3{font-size:17px}.next p{font-size:14px;color:var(--muted);line-height:1.5}
.addr{font-size:14.5px;line-height:1.6;font-style:normal}
.addr b{display:block;font-size:15px;margin-bottom:4px}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:30px 20px;border-radius:16px;border:2px dashed #CFCAC2;background:var(--paper);cursor:pointer}
.drop:hover,.drop.drag{border-color:var(--ink);background:#FFFFFF}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop b{font-size:16px}.drop span{font-size:13.5px;color:var(--muted)}
.files{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.files li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--line);font-size:14px}
.files li small{margin-left:auto;color:var(--muted)}
.art-item{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px}
.art-item .shot{border-radius:12px;aspect-ratio:1.24}
.uploaded{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px}
.guides{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5}
/* status pills */
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:12px;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-art{background:#FFF3B8;color:#6B5600}.st-print{background:#DDF2FB;color:#005F85}.st-ready{background:#FCE0EF;color:#9C0056}.st-done{background:#EEECE8;color:#55544F}
/* account */
.acct{display:grid;grid-template-columns:240px minmax(0,1fr);gap:44px;align-items:start}
.acct-nav{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:4px}
.acct-nav a{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:10px;font-weight:600;font-size:15px}
.acct-nav a[aria-current="page"]{background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--ink)}
.acct-nav hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.acct-user{padding:6px 14px 12px;font-size:14px;color:var(--muted)}.acct-user b{display:block;color:var(--ink);font-size:16px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.tile:hover{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.tile .ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.tile b{font-size:16px}.tile span{font-size:14px;color:var(--muted)}
.orders{width:100%;border-collapse:collapse;font-size:15px}
.orders th{text-align:left;font-size:13px;font-weight:700;color:var(--muted);padding:0 12px 12px;border-bottom:1.5px solid var(--ink)}
.orders td{padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.orders td:last-child,.orders th:last-child{text-align:right}
.orders .num{font-weight:700}
.orders .acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.addr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.auth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1040px}
.auth .box{padding:32px}
.perks{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.perks li{display:flex;gap:10px;align-items:center}
.narrow{max-width:520px}
.sent{display:none}
.sent.show{display:flex}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:14.5px}.kv dt{color:var(--muted)}.kv dd{margin:0}
@media (max-width:1040px){
.two{grid-template-columns:minmax(0,1fr)}.sticky{position:static}
.acct{grid-template-columns:minmax(0,1fr);gap:24px}
.acct-nav{flex-direction:row;overflow-x:auto;padding:8px;border-radius:14px}
.acct-nav a{flex-shrink:0;white-space:nowrap}.acct-nav hr,.acct-user{display:none}
.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.next{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
.item{grid-template-columns:96px minmax(0,1fr);gap:14px}
.item-price{grid-column:2;text-align:left}
.choices,.row2,.row3,.addr-grid,.auth,.tiles{grid-template-columns:minmax(0,1fr)}
.card-el{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.card-el input:first-child{grid-column:1/-1;border-bottom:1.5px solid var(--line)}
.card-el input:nth-child(2){border-left:0}
.orders thead{display:none}
.orders,.orders tbody,.orders tr,.orders td{display:block;width:100%}
.orders tr{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:6px 12px}
.orders td{padding:0;border:0;text-align:left!important}
.orders td[data-l]::before{content:attr(data-l) " ";color:var(--muted);font-size:13px}
.orders .acts{grid-column:1/-1;justify-content:flex-start;margin-top:6px}
.art-item{grid-template-columns:minmax(0,1fr)}.art-item .shot{max-width:220px}
.done-hero .btn{margin-left:0;width:100%}
.box{padding:20px}.auth .box{padding:24px}
}
/* ---------- catalogue + content pages ---------- */
.tbc{background:#FFF3B8;color:#6B5600;border-radius:4px;padding:0 5px;font-weight:600;white-space:nowrap}
.cat-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:start}
.cat-layout .side-desk{grid-area:auto;position:sticky;top:20px}
.crumb+.cat-layout{margin-top:24px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}
.pgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pcard{display:flex;flex-direction:column;gap:10px}
.pcard .shot{border-radius:16px;aspect-ratio:1.24}
.pcard .pills{display:flex;gap:6px;flex-wrap:wrap;min-height:0}
.pcard b{font-size:16.5px;line-height:1.3}
.pcard .spec-l{font-size:14px;color:var(--muted)}
.pcard .from{font-size:15px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pcard .from b{font-size:18px}.pcard .from small{color:var(--muted);font-size:13px}
.pcard .view{font-weight:700;font-size:14.5px;display:inline-flex;gap:6px;align-items:center}
.pcard:hover b{color:var(--red)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-bottom:24px}
.toolbar .count{color:var(--muted);font-size:14.5px}
.toolbar select{width:auto;min-width:200px}
.searchbox{display:flex;gap:10px;flex:1;max-width:520px}
.searchbox input{flex:1;min-width:0;height:52px;border-radius:26px;border:1.5px solid var(--line);padding:0 20px 0 46px;font:inherit;font-size:15px;background:#FFFFFF url("data:image/svg+xml;utf8,") no-repeat 18px center;color:var(--ink)}
.searchbox input:focus{outline:none;border-color:var(--ink)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:600;font-size:14px;white-space:nowrap}
.chip:hover,.chip[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink);background:#FFFFFF}
.chip small{color:var(--muted);font-weight:500}
.cat-sec{padding-top:40px;scroll-margin-top:20px}
.cat-sec:first-of-type{padding-top:8px}
.cat-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:1.5px solid var(--ink)}
.cat-sec-head h2{font-size:26px;font-weight:700}
.cat-sec-head span{color:var(--muted);font-size:14px;margin-left:10px}
.intro{font-size:17px;line-height:1.6;color:var(--muted);max-width:68ch}
.prose{max-width:72ch;font-size:16.5px;line-height:1.7;color:#3D3D42}
.prose h2{font-size:26px;font-weight:700;color:var(--ink);margin:36px 0 12px}
.prose h3{font-size:19px;font-weight:700;color:var(--ink);margin:26px 0 8px}
.prose p{margin:0 0 14px}.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}.prose li{margin-bottom:6px}
.prose a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.readmore summary{cursor:pointer;font-weight:700;list-style:none;display:inline-flex;gap:6px;align-items:center;margin-top:4px}
.readmore summary::-webkit-details-marker{display:none}
.readmore[open] summary{display:none}
.band{border-radius:22px;padding:36px 40px;display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;position:relative;overflow:hidden}
.band h2{font-size:28px;font-weight:700}.band p{margin-top:8px;font-size:16.5px;max-width:60ch}
.band>*:not(.blob){position:relative}.band .blob{position:absolute;pointer-events:none}
.band.ink{background:var(--ink);color:#FFFFFF}.band.ink h2{color:#FFFFFF}.band.ink p{color:#D6D5D2}
.band.mag{background:var(--mag);color:#FFFFFF}.band.mag h2{color:#FFFFFF}
.band.cyan{background:var(--cyan);color:#FFFFFF}.band.cyan h2{color:#FFFFFF}
.info2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.info-card{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.info-card .ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.info-card h2{font-size:24px;font-weight:700}
.info-card p{color:#3D3D42;line-height:1.6}
.info-card ul{margin:0;padding-left:20px;line-height:1.7;color:#3D3D42}
.az{columns:4 200px;column-gap:28px}
.az-group{break-inside:avoid;margin-bottom:22px}
.az-group h3{font-size:22px;font-weight:800;margin-bottom:6px;color:var(--red)}
.az-group a{display:block;padding:5px 0;font-size:15.5px}
.az-group a:hover{color:var(--red)}
.az-empty{display:none;color:var(--muted)}
.hero-plain{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;padding:12px 0 8px}
.hero-plain h1{font-size:clamp(34px,4.2vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1}
.hero-plain h1 .hl{background:var(--ink);color:#FFFFFF;padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero-plain p{font-size:18px;line-height:1.6;color:var(--muted);margin-top:18px;max-width:56ch}
.hero-plain .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-plain .shot{border-radius:22px;aspect-ratio:1.24}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-weight:700;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex-shrink:0;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{margin:0 0 18px;color:#3D3D42;line-height:1.6;max-width:68ch}
.contact-list{display:flex;flex-direction:column;gap:18px}
.contact-list div{display:flex;gap:14px;align-items:flex-start}
.contact-list .ico{width:44px;height:44px;border-radius:50%;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-list small{display:block;color:var(--muted);font-size:13px}.contact-list b{font-size:17px;word-break:break-word}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.rule-card{padding:20px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;flex-direction:column;gap:8px}
.rule-card .big{font:800 30px/1 'Inter Tight',sans-serif;letter-spacing:-.03em}
.rule-card span{font-size:14.5px;color:#3D3D42}
.diagram{border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);padding:24px;display:flex;justify-content:center}
.diagram svg{width:100%;max-width:520px;height:auto}
.toc{position:sticky;top:20px;display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.toc b{font-size:13px;letter-spacing:.12em;color:var(--muted);padding:4px 10px 8px}
.toc a{padding:8px 10px;border-radius:8px;font-size:14.5px;font-weight:600}
.toc a:hover{background:#FFFFFF}
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.draft svg{flex-shrink:0;margin-top:1px}
.draft{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:#FFF8D6;box-shadow:inset 0 0 0 1.5px #F3DE7A;font-size:14.5px;line-height:1.5;margin-bottom:28px;max-width:72ch}
.result-page{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.result-page .ico{width:44px;height:44px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.result-page b{font-size:17px}.result-page p{color:var(--muted);font-size:14.5px;margin-top:4px}.result-page small{color:var(--muted);font-size:13px}
.nf{text-align:center;padding:40px 0 20px;display:flex;flex-direction:column;align-items:center;gap:16px}
.nf .code{font:800 clamp(110px,18vw,200px)/0.9 'Inter Tight',sans-serif;letter-spacing:-.06em;color:var(--ink);text-shadow:-7px -5px 0 var(--cyan),7px 5px 0 var(--mag)}
.nf .code span{display:none}
.nf .code span{position:absolute;inset:0;mix-blend-mode:multiply}
.nf .code .c1{color:var(--cyan);transform:translate(-6px,-4px)}.nf .code .c2{color:var(--mag);transform:translate(6px,3px)}.nf .code .c3{color:var(--yel);transform:translate(2px,-7px)}
.nf h1{font-size:clamp(28px,3vw,40px);font-weight:700}
.nf p{color:var(--muted);font-size:17px;max-width:52ch}
.nf .searchbox{width:100%;max-width:520px;margin-top:8px}
@media (max-width:1280px){.cat-layout{grid-template-columns:minmax(0,1fr)}.pgrid.four{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1040px){.hero-plain{grid-template-columns:minmax(0,1fr)}.legal{grid-template-columns:minmax(0,1fr)}.toc{position:static;flex-direction:row;flex-wrap:wrap}.toc b{width:100%}}
@media (max-width:900px){.pgrid,.pgrid.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.info2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.band{padding:28px 22px;border-radius:18px}.band h2{font-size:24px}.pcard b{font-size:15px}.pcard .from b{font-size:16px}.info-card{padding:22px}.searchbox{max-width:none;width:100%}.toolbar select{width:100%}}
@media (max-width:640px){.tb-right{width:100%;justify-content:space-between}}
/* ===== Suburb pages ===== */
.sub-top{margin-top:28px}.sub-copy h1{font-size:clamp(34px,4.2vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--ink);margin:0 0 22px}.sub-copy h1 .hl{background:var(--ink);color:#FFFFFF;padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}.sub-copy .lead{font-size:18.5px;color:var(--ink)}.sub-copy .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.sub-copy .ctas a{text-decoration:none}
/* ===== WordPress additions (not in the mockups) ===== */
.sr,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100000;background:#FFFFFF;padding:10px 16px;border-radius:10px;box-shadow:0 0 0 2px var(--ink)}
.np-page{max-width:820px}
.np-page h1{font-size:clamp(32px,3.6vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--ink);margin:12px 0 24px}
.np-page img{height:auto;border-radius:12px}
.alignleft{float:left;margin:0 24px 16px 0}.alignright{float:right;margin:0 0 16px 24px}.aligncenter{margin-left:auto;margin-right:auto}
/* Suburb pages: first paragraph is the lead */
.sub-copy > p:first-of-type{font-size:18.5px;color:var(--ink)}
.sub-copy .nearby a{font-weight:700}
/* Quote form (WPForms) inside the design's form box */
.np-quote h2{font-size:24px;font-weight:700;margin-bottom:12px}
.np-quote .wpforms-container{margin:0!important}
.np-quote .wpforms-field{padding:0 0 16px!important;overflow:visible!important}
.np-quote .wpforms-field-label{font-weight:700!important;font-size:15px!important;color:var(--ink)!important;margin:0 0 8px!important}
.np-quote .wpforms-field-sublabel{font-size:13px!important;color:var(--muted)!important}
.np-quote .wpforms-required-label{color:var(--red)!important}
.np-quote input[type=text],.np-quote input[type=email],.np-quote input[type=tel],.np-quote input[type=number],.np-quote select{height:52px!important;border-radius:12px!important;border:1.5px solid var(--line)!important;padding:0 16px!important;font:inherit!important;font-size:15px!important;background:#FFFFFF!important;color:var(--ink)!important;width:100%!important;max-width:none!important;box-shadow:none!important}
.np-quote textarea{min-height:120px!important;height:120px!important;border-radius:12px!important;border:1.5px solid var(--line)!important;padding:14px 16px!important;font:inherit!important;font-size:15px!important;width:100%!important;max-width:none!important;box-shadow:none!important}
.np-quote input:focus,.np-quote textarea:focus,.np-quote select:focus{border-color:var(--ink)!important;box-shadow:0 0 0 3px rgba(29,29,31,.08)!important;outline:none!important}
.np-quote .wpforms-field-row{max-width:none!important}
.np-quote .wpforms-submit-container{padding:4px 0 0!important}
.np-quote button[type=submit]{width:100%;height:56px!important;border-radius:28px!important;background:var(--red)!important;color:#FFFFFF!important;border:0!important;font:inherit!important;font-weight:700!important;font-size:16px!important;padding:0 26px!important;cursor:pointer}
.np-quote button[type=submit]:hover{filter:brightness(.95)}
.np-quote .wpforms-confirmation-container-full{background:#E9F7EF!important;border:0!important;border-radius:12px;color:#0B6B31!important}
/* ===== Shop and category pages (WooCommerce) ===== */
.np-shop .woocommerce-ordering{float:none;margin:0}
.np-shop .toolbar .count{color:var(--muted);font-size:14.5px}
.pcard .from .woocommerce-Price-amount{font-weight:700;font-size:18px;color:var(--ink)}
.pcard .from .np-price-note,.pcard .from small{color:var(--muted);font-size:13px}
.pcard img{width:100%;height:100%;object-fit:cover}
.woocommerce-product-search{display:flex;gap:10px;flex:1;max-width:520px;width:100%}
.woocommerce-product-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.woocommerce-product-search input[type=search]{flex:1;min-width:0;height:52px;border-radius:26px;border:1.5px solid var(--line);padding:0 20px;font:inherit;font-size:15px;background:#FFFFFF;color:var(--ink)}
.woocommerce-product-search input[type=search]:focus{outline:none;border-color:var(--ink)}
.woocommerce-product-search button{height:52px;border-radius:26px;background:var(--ink);color:#FFFFFF;border:0;padding:0 24px;font:inherit;font-weight:700;cursor:pointer}
.np-shop .woocommerce-pagination{margin-top:32px}
.np-shop .woocommerce-pagination ul.page-numbers{display:flex;gap:8px;list-style:none;padding:0;margin:0;border:0}
.np-shop .woocommerce-pagination ul.page-numbers li{border:0;margin:0}
.np-shop .woocommerce-pagination .page-numbers a,.np-shop .woocommerce-pagination .page-numbers span{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;border-radius:20px;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:600;padding:0 12px}
.np-shop .woocommerce-pagination .page-numbers .current{background:var(--ink);color:#FFFFFF;box-shadow:none}
.np-about{margin-top:40px}
.np-woo{min-height:40vh}
/* suburb page picture */
.sub-photo{margin:28px 0 0;border-radius:18px;overflow:hidden;background:var(--paper,#f4f1ec)}.sub-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
/* ---------- home page (from index.html) ---------- */
.areas{padding-top:0}
.areas .area-box{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.areas h2{font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.area-list{display:flex;flex-wrap:wrap;gap:6px 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.area-list a{color:var(--grey);text-decoration:none}
.area-list a:hover{color:var(--red);text-decoration:underline}
.area-list a:not(:last-child)::after{content:"|";color:var(--line);margin:0 9px;display:inline-block}
.home-cats-wrap{display:none}
@media (max-width:640px){.home-cats-wrap{display:block}.home-cats-wrap .side-mob{margin:24px 0 0}.hero{min-height:250px}.hero-inner{padding:24px 0}.hero-ctas{display:none}.home-shop .sec-head{display:none}.home-shop{padding-top:40px}}
.sd-card .price .woocommerce-Price-amount{font-weight:700;font-size:18px}
/* ---------- information pages ---------- */
.np-artwork-copy > h2:first-child{margin-top:0}
.np-contact-form h2{margin-bottom:16px}
/* footer links paragraph (from the old site footer) */
.ft-brand .ft-links{margin-top:-8px}
.ft-brand .ft-links a{color:#FFFFFF;text-decoration:underline;text-underline-offset:2px}
.ft-brand .ft-links a:hover{color:#FFD000}
/* category pages: gap under the breadcrumb (the mobile dropdown sits between them, so the mockup's .crumb+.cat-layout rule missed on desktop) */
@media (min-width:1281px){.crumb~.cat-layout{margin-top:24px}}
/* artwork guidelines: diagram beside the text on desktop, stacked on tablets and phones */
.np-art-two{margin-top:40px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1040px){.np-art-two{grid-template-columns:minmax(0,1fr);gap:24px}.np-art-two .diagram{max-width:520px}}
/* Styled dropdowns (site.js): button + list under the field, replaces the phone's system picker. */
.np-select{position:relative;width:100%}
.np-select .np-select-native{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0;pointer-events:none;margin:0}
.np-select-btn{display:flex;align-items:center;width:100%;height:52px;border-radius:12px;border:1.5px solid var(--line);padding:0 44px 0 16px;font:inherit;font-size:15px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer;background:#FFFFFF url("data:image/svg+xml;utf8,") no-repeat right 16px center}
.np-select-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-select-btn:hover{border-color:#CFCAC2}
.np-select-btn:focus-visible,.np-select.is-open .np-select-btn{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.08)}
.np-select.is-open .np-select-btn{background-image:url("data:image/svg+xml;utf8,")}
.np-select-btn:disabled{opacity:.55;cursor:not-allowed}
.np-select-list{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;list-style:none;background:#FFFFFF;border:1.5px solid var(--ink);border-radius:12px;box-shadow:0 12px 32px rgba(29,29,31,.14);max-height:min(340px,60vh);overflow-y:auto;overscroll-behavior:contain}
.np-select-list li{position:relative;display:flex;align-items:center;min-height:46px;padding:10px 40px 10px 12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;line-height:1.3}
.np-select-list li:hover,.np-select-list li.is-active{background:#F3F1EC}
.np-select-list li[aria-selected="true"]{font-weight:700}
.np-select-list li[aria-selected="true"]::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;background:url("data:image/svg+xml;utf8,") no-repeat center}
.np-select-list li[aria-disabled="true"]{color:var(--muted);cursor:not-allowed}
.toolbar .np-select{width:auto;min-width:200px}
@media (max-width:640px){.np-select-btn{height:54px;font-size:16px}.np-select-list li{min-height:50px;font-size:16px}.toolbar .np-select{width:100%}}
/* Logo from the client's logo pack (29 Sep): colour on white, all-white in the footer. */
.logo img{display:block;height:48px;width:auto}
@media (max-width:640px){.logo img{height:40px}}
.info2.one{grid-template-columns:minmax(0,1fr)}
/* Mobile: product descriptions on category pages a little larger (client, 29 Sep, point 20). */
@media (max-width:640px){.pcard .spec-l{font-size:15.5px;line-height:1.4}}
/*
* Mobile readability (client, 29 Sep closing note): on phones only, reading text larger and
* grey text darker. Headings, buttons, menus, prices, the logo and the option buttons keep
* their sizes, so the layout doesn't move.
*/
@media (max-width:640px){
:root{--muted:#4A4A50}
body{font-size:17.5px}
.calc .lead,.tabpanel,.prose,.band p,.intro,.sec-head p,.how-intro p,.help-box p,.nf p,.hero-plain p{font-size:17.5px;line-height:1.6}
.crumb,.trust-item span,.sd-card .sub,.side-sub,.sameday-card span,.field b,.quote-box span,.spec,.note,.next p,.tile span,.rule-card span,.result-page p,.ft-brand p,.ft-col,.kv,.perks,.addr,.guides,.files li,.toc a,.draft,.pcard .spec-l{font-size:16px;line-height:1.5}
.hint,.contact-list small,.ft-bottom,.facts small,.mini span,.result-page small,.choice span{font-size:15px}
.area-list{font-size:16.5px}
}