:root{
  --paper:#f6f5f0;
  --ink:#24271f;
  --muted:#72746a;
  --line:#dcded3;
  --olive:#626b3b;
  --accent:#dce4b8;
  --pad:clamp(24px,5vw,88px)}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{
  color:inherit;
  text-decoration:none}
button,input,textarea,select{
  font:inherit}
button,a,input,summary,select,textarea{
  -webkit-tap-highlight-color:transparent}
button{
  cursor:pointer}
button:disabled{
  cursor:default}
h1,h2,h3,h4,p{
  margin:0}
button,a{
  touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:5px}
main:focus{
  outline:none}
::selection{
  background:var(--accent)}
.skip{
  position:fixed;
  top:-100px;
  z-index:100;
  background:var(--ink);
  color:white;
  padding:15px}
.skip:focus{
  top:10px}
header{
  height:100px;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:28px;
  background:var(--paper)}
.logo{
  font-family:'Manrope',Arial,sans-serif;
  font-size:32px;
  font-weight:800;
  letter-spacing:-2px;
  white-space:nowrap}
.logo span{
  font-size:12px;
  vertical-align:top;
  line-height:25px;
  letter-spacing:0;
  margin-left:4px}
nav{
  display:flex;
  gap:36px;
  font-size:13px;
  font-weight:550}
nav a{
  padding:10px 0;
  border-bottom:1px solid transparent}
@media (hover:hover) and (pointer:fine){
  nav a:hover,nav a.current{
  border-color:var(--ink)}
}
.dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--olive);
  margin-left:5px}
.cart-link{
  font-size:12px;
  display:flex;
  gap:12px;
  align-items:center}
.cart-link span{
  background:var(--ink);
  color:white;
  width:25px;
  height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px}
.eyebrow{
  font-size:10px;
  letter-spacing:1.8px;
  font-weight:600;
  display:block}
.hero{
  padding:38px var(--pad) 52px}
.hero-kicker{
  display:flex;
  align-items:center;
  gap:10px}
.hero-kicker .dot{
  margin:0}
.hero-kicker>span:last-child{
  margin-left:auto;
  color:var(--muted);
  font-size:9px}
.hero h1{
  font-family:'Manrope',Arial,sans-serif;
  font-size:clamp(70px,7.9vw,126px);
  line-height:1.045;
  letter-spacing:-.055em;
  font-weight:500;
  margin:55px 0 38px;
  position:relative;
  max-width:1160px}
h1 em{
  font-style:normal;
  color:var(--olive)}
.hero-star{
  font-family:Arial,sans-serif;
  font-size:1.4em;
  position:absolute;
  right:2%;
  top:8%;
  color:var(--olive);
  font-weight:400;
  line-height:1}
.hero-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px}
.hero-bottom p{
  font-size:14px;
  line-height:1.8;
  color:#5e6157}
.btn{
  background:var(--ink);
  color:var(--paper);
  padding:19px 24px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  border:1px solid var(--ink);
  font-size:12px;
  line-height:1.3;
  font-weight:500;
  transition:background .2s,transform .2s}
@media (hover:hover) and (pointer:fine){
  .btn:hover{
  background:var(--olive);
  border-color:var(--olive);
  transform:translateY(-2px)}
}
.btn span{
  font-size:20px;
  line-height:12px}
.btn.light{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper)}
@media (hover:hover) and (pointer:fine){
  .btn.light:hover{
  background:var(--accent);
  border-color:var(--accent)}
}
.btn.full{
  width:100%}
.catalogue-section{
  padding:54px var(--pad) 70px;
  border-top:1px solid var(--line)}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:36px}
.section-heading h2,h2{
  font-family:'Manrope',Arial,sans-serif;
  font-weight:500;
  font-size:clamp(29px,3vw,46px);
  letter-spacing:-1.8px;
  line-height:1.2}
.section-heading h2{
  margin-top:16px}
.section-heading>p{
  font-size:12px;
  color:var(--muted);
  line-height:1.7}
.filters{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:30px}
.filters button{
  border:1px solid var(--line);
  border-radius:30px;
  background:transparent;
  font-size:11px;
  padding:11px 17px;
  color:var(--ink)}
.filters button small{
  font-size:9px;
  margin-left:10px;
  opacity:.65}
.filters button.active{
  background:var(--ink);
  color:white;
  border-color:var(--ink)}
.filters>span{
  margin-left:auto;
  letter-spacing:1.2px;
  font-size:8px;
  color:var(--muted)}
.product-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:38px 25px}
.product-card{
  display:block;
  min-width:0}
.product-art{
  height:340px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 28px 20px}
.art-label{
  position:absolute;
  top:20px;
  left:23px;
  text-transform:uppercase;
  font-size:8px;
  letter-spacing:1.1px;
  z-index:2}
.art-open{
  position:absolute;
  right:18px;
  bottom:18px;
  background:#ffffffa8;
  border-radius:50%;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  backdrop-filter:blur(5px);
  transition:transform .2s}
@media (hover:hover) and (pointer:fine){
  .product-card:hover .art-open{
  transform:rotate(45deg)}
}
@media (hover:hover) and (pointer:fine){
  .product-card:hover .mock-site,.product-card:hover .mock-app,.product-card:hover .phone,.product-card:hover .mock-shop{
  transform:translateY(-5px) rotate(0)}
}
.product-meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top:17px}
.product-meta h3{
  font-size:18px;
  font-weight:500;
  letter-spacing:-.5px;
  margin-bottom:7px}
.product-meta p{
  font-size:11px;
  color:var(--muted)}
.product-meta>span{
  text-align:right;
  color:var(--muted);
  font-size:9px;
  line-height:1.8;
  white-space:nowrap}
.product-meta b{
  font-size:14px;
  font-weight:500;
  color:var(--ink)}
.product-meta small{
  font-size:9px;
  color:var(--muted)}
.art-web{
  background:#e2d9cd}
.art-shop{
  background:#dadccf}
.art-app{
  background:#dfe4e7}
.art-ios{
  background:#e0e2d6}
.art-seo{
  background:#e7e1d9}
.mock-site{
  background:#f7f3e8;
  width:88%;
  height:253px;
  position:relative;
  box-shadow:0 18px 35px #40311d1c;
  transform:rotate(-3deg);
  transition:transform .4s;
  padding:17px;
  overflow:hidden}
.mock-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:5px;
  position:relative;
  z-index:2}
.mock-nav b{
  font-size:8px;
  line-height:1;
  letter-spacing:-.5px}
.mock-web-body{
  position:relative;
  z-index:1;
  margin-top:24px}
.mock-web-body small{
  font-size:4px;
  letter-spacing:1.1px}
.mock-web-body strong{
  display:block;
  font-family:Georgia,serif;
  font-size:32px;
  line-height:.99;
  font-weight:400;
  margin-top:10px}
.mock-web-body i{
  display:block;
  color:#905739;
  font-size:30px}
.mock-pill{
  display:inline-block;
  font-size:5px;
  border:1px solid #9e9c88;
  border-radius:20px;
  padding:6px 10px;
  margin-top:13px}
.arch{
  position:absolute;
  right:18px;
  top:50px;
  width:43%;
  height:169px;
  border-radius:70px 70px 0 0;
  background:#b3b7a1;
  overflow:hidden}
.sun{
  height:34px;
  width:34px;
  background:#ead9ad;
  border-radius:50%;
  position:absolute;
  top:25px;
  right:25px}
.hill{
  position:absolute;
  width:220px;
  height:170px;
  background:#747962;
  transform:rotate(-20deg);
  border-radius:45%;
  bottom:-70px;
  left:-30px}
.hill.two{
  background:#96866a;
  transform:rotate(30deg);
  left:35px;
  bottom:-85px}
.pool{
  position:absolute;
  bottom:10px;
  width:65%;
  height:25px;
  background:#adbebb;
  right:0;
  transform:skew(-30deg);
  border:4px solid #dbcdb7}
.mock-bottom{
  font-size:4px;
  letter-spacing:.8px;
  position:absolute;
  bottom:12px;
  left:17px;
  right:17px;
  display:flex;
  justify-content:space-between}
.mock-app{
  background:#fcfcfa;
  border-radius:6px;
  width:95%;
  height:253px;
  box-shadow:0 16px 35px #28344620;
  display:flex;
  overflow:hidden;
  transform:rotate(3deg);
  transition:transform .4s}
.mock-app aside{
  width:25%;
  padding:17px 10px;
  background:#f1f2ed;
  display:flex;
  flex-direction:column;
  gap:15px;
  font-size:5px}
.mock-app aside b{
  font-size:16px;
  letter-spacing:-1px;
  margin-bottom:15px}
.mock-app aside b span{
  font-size:7px;
  color:var(--olive)}
.mock-app aside small{
  margin-top:auto;
  font-size:4px}
.mock-app section{
  width:75%;
  padding:14px}
.mock-app-top{
  display:flex;
  justify-content:space-between;
  font-size:5px;
  border-bottom:1px solid #e7e7df;
  padding-bottom:10px;
  margin-bottom:15px}
.mock-app-top span{
  background:#dadecc;
  border-radius:50%;
  padding:3px}
.mock-app section>small{
  font-size:4px;
  color:#828578}
.mock-app h4{
  font-size:15px;
  margin:4px 0 12px;
  letter-spacing:-.5px;
  font-weight:500}
.mini-stats{
  display:flex;
  gap:8px}
.mini-stats>div{
  border:1px solid #e8e9e2;
  border-radius:3px;
  padding:8px;
  flex:1;
  font-size:5px}
.mini-stats b{
  display:block;
  font-size:15px;
  font-weight:500;
  margin:5px 0}
.mini-stats em{
  font-size:4px;
  color:#5f724b;
  font-style:normal}
.chart{
  border:1px solid #e8e9e2;
  border-radius:3px;
  margin-top:8px;
  padding:8px;
  height:74px;
  font-size:5px}
.bars{
  display:flex;
  gap:6px;
  align-items:flex-end;
  height:42px;
  margin-top:7px}
.bars i{
  background:#a8b789;
  flex:1;
  border-radius:2px 2px 0 0}
.bars i:nth-child(3n){
  background:#d1d9bd}
.mini-row{
  font-size:4px;
  display:flex;
  justify-content:space-between;
  margin-top:9px}
.phone{
  height:300px;
  width:152px;
  border:5px solid #262a24;
  border-radius:25px;
  background:#f8f8f0;
  position:relative;
  box-shadow:14px 17px 28px #3c473521;
  transform:rotate(-7deg) translateY(25px);
  padding:12px 10px 7px;
  transition:transform .4s;
  flex-shrink:0}
.phone-top{
  font-size:5px;
  display:flex;
  justify-content:space-between;
  margin-bottom:25px}
.island{
  width:44px;
  height:12px;
  background:#262a24;
  border-radius:10px;
  position:absolute;
  top:6px;
  left:49px}
.phone>small{
  font-size:4px;
  letter-spacing:.6px}
.phone h4{
  font-size:21px;
  font-weight:500;
  line-height:1.07;
  letter-spacing:-1px;
  margin:8px 0 12px}
.phone-landscape{
  height:92px;
  background:#b4c1bf;
  position:relative;
  overflow:hidden;
  border-radius:5px}
.mountain{
  position:absolute;
  height:110px;
  width:130px;
  background:#758874;
  transform:rotate(35deg);
  left:-30px;
  top:30px;
  z-index:1;
  border-radius:15px}
.mountain.back{
  left:45px;
  top:45px;
  background:#465c49;
  transform:rotate(50deg)}
.phone-landscape>span{
  position:absolute;
  z-index:2;
  bottom:8px;
  left:9px;
  color:white;
  font-size:4px}
.phone-caption{
  margin:9px 0;
  font-size:6px}
.phone-caption span{
  display:block;
  font-size:4px;
  color:#727969;
  margin-top:4px}
.phone-button{
  background:#394d37;
  color:white;
  font-size:5px;
  border-radius:4px;
  padding:7px}
.phone-tabs{
  font-size:5px;
  margin:10px 0;
  text-align:center}
.ios-label{
  font-size:28px;
  letter-spacing:-1px;
  line-height:1.1;
  margin-left:35px;
  color:#5e674c}
.mock-shop{
  background:#f5f0e6;
  width:84%;
  height:260px;
  position:relative;
  padding:18px 20px;
  transform:rotate(3deg);
  box-shadow:0 16px 35px #28344620;
  transition:transform .4s}
.shop-nav{
  font-family:Georgia,serif;
  font-size:17px;
  display:flex;
  justify-content:space-between;
  align-items:center}
.shop-nav span{
  font-family:Arial,sans-serif;
  font-size:5px}
.mock-shop>small{
  font-size:4px;
  letter-spacing:1px;
  display:block;
  margin-top:20px}
.mock-shop h4{
  font-family:Georgia,serif;
  font-size:22px;
  font-weight:400;
  margin-top:6px}
.vase{
  position:absolute;
  width:100px;
  height:115px;
  background:linear-gradient(90deg,#9f5f3e,#c3906e 40%,#ad7755 65%,#855239);
  bottom:29px;
  left:50%;
  transform:translateX(-50%);
  border-radius:30% 30% 43% 43%;
  box-shadow:15px 8px 10px #57372620}
.vase:before{
  content:'';
  position:absolute;
  width:52px;
  height:30px;
  left:24px;
  top:-12px;
  background:linear-gradient(90deg,#b8825c,#d2a080,#985f3e);
  border-radius:10% 10% 0 0}
.vase:after{
  content:'';
  position:absolute;
  width:52px;
  height:9px;
  background:#80513a;
  top:-16px;
  left:24px;
  border-radius:50%;
  border:3px solid #b68563}
.vase i{
  position:absolute;
  width:80px;
  height:62px;
  border-radius:50%;
  border:12px solid #ac7959;
  top:20px;
  right:-30px;
  z-index:-1}
.shop-caption{
  position:absolute;
  bottom:13px;
  left:20px;
  right:20px;
  display:flex;
  justify-content:space-between;
  font-size:5px}
.mock-seo{
  width:88%}
.seo-word{
  font-size:27px;
  line-height:1.1;
  letter-spacing:-1px;
  display:block;
  margin-bottom:20px}
.seo-word em{
  color:#777654;
  font-style:normal}
.search-bar{
  background:#fafaf8;
  border-radius:30px;
  padding:13px 15px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:16px;
  box-shadow:0 5px 20px #3827170a}
.search-bar span{
  font-size:9px;
  flex:1}
.search-bar b{
  font-size:11px;
  font-weight:400}
.search-result{
  background:#f4f3ee;
  padding:18px;
  margin:9px 6px 0;
  border-radius:7px;
  box-shadow:0 5px 20px #38271708}
.search-result small{
  font-size:6px}
.search-result h4{
  font-size:12px;
  font-weight:500;
  color:#545f43;
  margin:8px 0}
.search-result p{
  font-size:6px;
  line-height:1.6}
.seo-foot{
  display:block;
  font-size:6px;
  letter-spacing:1px;
  margin:22px 0 0}
.catalogue-note{
  display:flex;
  justify-content:space-between;
  margin-top:35px;
  font-size:11px;
  color:var(--muted);
  gap:15px}
.catalogue-note a{
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:5px}
.custom-banner{
  margin:0 var(--pad);
  background:#303b2c;
  color:#f1f1e6;
  padding:62px;
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  min-height:428px}
.custom-banner .eyebrow{
  font-size:8px;
  color:#c2cbb6}
.custom-banner h2{
  font-size:clamp(40px,4.5vw,65px);
  margin:24px 0 20px;
  line-height:1.05;
  letter-spacing:-2.5px}
.custom-banner p{
  font-size:12px;
  line-height:1.8;
  color:#d0d5c8;
  margin-bottom:25px}
.custom-banner .btn{
  font-size:11px;
  padding:16px 20px}
.custom-art{
  position:absolute;
  right:9%;
  top:55px;
  width:240px;
  height:285px}
.custom-art div{
  position:absolute;
  border:1px solid #9baa806e;
  height:230px;
  width:190px;
  top:25px;
  left:25px;
  transform:rotate(-20deg)}
.custom-art div:nth-child(2){
  transform:rotate(0)}
.custom-art div:nth-child(3){
  transform:rotate(20deg)}
.custom-art>span{
  font-size:45px;
  line-height:.95;
  letter-spacing:-2px;
  position:absolute;
  top:100px;
  left:48px;
  transform:rotate(-8deg);
  color:#dbe6bb}
.banner-note{
  position:absolute;
  bottom:32px;
  right:45px;
  letter-spacing:1.3px;
  font-size:7px;
  color:#afbaa3}
.method{
  padding:95px var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px}
.method h2,.faq h2{
  margin-top:20px}
.steps article{
  padding:0 0 25px 42px;
  position:relative;
  border-bottom:1px solid var(--line);
  margin-bottom:25px}
.steps article:last-child{
  margin:0}
.steps article>span{
  position:absolute;
  left:0;
  top:4px;
  font-size:9px;
  color:var(--olive)}
.steps h3{
  font-size:17px;
  font-weight:500;
  margin-bottom:10px;
  letter-spacing:-.3px}
.steps p{
  font-size:12px;
  color:var(--muted);
  line-height:1.8}
.faq{
  padding:60px var(--pad) 80px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px}
.faq details{
  border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;
  font-size:13px;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:23px 0}
.faq summary::-webkit-details-marker{
  display:none}
.faq summary span{
  font-size:20px;
  font-weight:400;
  line-height:15px}
.faq details[open] summary span{
  transform:rotate(45deg)}
.faq details p{
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  padding:0 28px 22px 0}
footer{
  padding:45px var(--pad) 25px;
  background:#eeeee6;
  border-top:1px solid var(--line)}
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-bottom:50px}
.footer-top p{
  font-size:14px;
  line-height:1.5;
  color:#676c5c}
.footer-top>a:last-child{
  font-size:13px;
  border-bottom:1px solid #a4a894;
  padding-bottom:7px}
.footer-bottom{
  font-size:9px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid var(--line);
  padding-top:20px}
.page-intro{
  padding:65px var(--pad) 60px}
.page-intro h1,.form-layout h1,.success h1{
  font-family:'Manrope',Arial,sans-serif;
  font-weight:500;
  font-size:clamp(40px,5.5vw,80px);
  letter-spacing:-.065em;
  line-height:1.12;
  margin:25px 0}
.page-intro p{
  font-size:14px;
  color:var(--muted);
  line-height:1.8}
.compact{
  padding-bottom:35px}
.breadcrumb{
  padding:30px var(--pad);
  font-size:11px;
  color:var(--muted)}
.breadcrumb a{
  color:var(--ink);
  margin-right:9px}
.detail-layout{
  padding:10px var(--pad) 80px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:65px;
  align-items:start}
.detail-art{
  height:430px}
.detail-art .mock-site,.detail-art .mock-app,.detail-art .mock-shop{
  max-width:420px}
.detail-art .phone{
  transform:rotate(-7deg)}
.product-config h1{
  font-size:48px;
  letter-spacing:-2.7px;
  font-weight:500;
  line-height:1.1;
  margin:20px 0}
.lead{
  font-size:14px;
  line-height:1.8;
  color:var(--muted)}
.price-line{
  display:flex;
  gap:12px;
  align-items:center;
  margin:26px 0}
.price-line strong{
  font-size:40px;
  font-weight:500;
  letter-spacing:-2px}
.price-line>span{
  font-size:10px;
  line-height:1.5;
  color:var(--muted)}
.delivery{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:16px 0;
  font-size:10px;
  display:flex;
  justify-content:space-between;
  margin-bottom:25px}
.delivery span{
  color:var(--muted)}
fieldset{
  border:0;
  padding:0;
  margin:0 0 22px;
  min-width:0}
legend{
  font-size:15px;
  font-weight:500;
  margin-bottom:17px}
.option{
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 0;
  font-size:11px;
  border-bottom:1px solid var(--line);
  cursor:pointer}
.option b{
  margin-left:auto;
  white-space:nowrap;
  font-size:10px;
  font-weight:500}
.option input,.consent input{
  accent-color:var(--olive);
  width:16px;
  height:16px;
  flex-shrink:0}
.tiny{
  font-size:9px;
  color:var(--muted);
  text-align:center;
  margin-top:12px}
.config-custom{
  margin-top:30px;
  background:#eaece1;
  padding:22px}
.config-custom h3{
  font-size:15px;
  font-weight:500}
.config-custom p{
  font-size:11px;
  color:var(--muted);
  margin:8px 0 16px}
.config-custom a{
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:5px}
.included{
  margin-top:40px}
.included h2{
  font-size:28px;
  margin:16px 0 23px;
  letter-spacing:-1px}
.included>p{
  font-size:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line)}
.included>p>span{
  margin-right:15px;
  color:var(--olive)}
.included p.muted{
  border:0;
  font-size:10px;
  color:var(--muted);
  line-height:1.8}
.selection-next{
  display:block;
  font-size:12px;
  text-align:center;
  margin-top:17px;
  text-decoration:underline;
  text-underline-offset:4px}
.basket-layout{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:55px;
  padding:0 var(--pad) 90px}
.basket-item{
  display:flex;
  gap:20px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  align-items:center}
.basket-icon{
  width:80px;
  height:85px;
  display:grid;
  place-items:center;
  font-size:30px;
  flex-shrink:0}
.basket-item h3{
  font-weight:500;
  font-size:20px;
  letter-spacing:-.5px}
.basket-item p{
  font-size:11px;
  color:var(--muted);
  margin:9px 0;
  line-height:1.6}
.basket-item>strong{
  margin-left:auto;
  font-size:14px;
  white-space:nowrap;
  font-weight:500}
.basket-item>strong small{
  font-size:9px}
.text-button{
  background:none;
  border:none;
  padding:0;
  border-bottom:1px solid var(--line);
  font-size:10px;
  color:var(--muted)}
.summary{
  background:#eaece1;
  padding:30px;
  align-self:start}
.summary h2{
  font-size:30px;
  margin:18px 0 25px}
.summary>div{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  border-bottom:1px solid #cdd2c0;
  padding-bottom:20px;
  gap:15px}
.summary p{
  font-size:12px;
  line-height:1.8;
  color:#6d735f;
  margin:20px 0}
.summary>small{
  display:block;
  text-align:center;
  font-size:9px;
  margin-top:14px;
  color:#6d735f}
.back-link{
  display:block;
  font-size:11px;
  margin:25px 0}
.empty{
  text-align:center;
  padding:70px var(--pad) 110px}
.empty>span{
  font-size:60px;
  color:var(--olive);
  display:block;
  margin-bottom:20px}
.empty p{
  font-size:14px;
  color:var(--muted);
  margin:20px 0 30px}
.form-layout{
  padding:65px var(--pad) 90px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px}
.form-layout>div>p{
  font-size:15px;
  color:var(--muted);
  line-height:1.8}
.form-layout .back-link{
  margin-top:0;
  margin-bottom:40px}
.form-note{
  margin-top:30px;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  max-width:420px}
.form-layout form{
  background:#efefe8;
  padding:32px}
.form-layout form>label,.form-row>label{
  display:block;
  font-size:11px;
  margin-bottom:23px}
.form-layout label>span{
  color:var(--muted)}
input:not([type=checkbox]),textarea,select{
  display:block;
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid #bcc1af;
  border-radius:0;
  padding:13px 0;
  color:var(--ink);
  font-size:13px;
  resize:vertical}
input::placeholder,textarea::placeholder{
  color:#838876;
  font-size:12px}
select{
  font-size:11px;
  min-height:44px}
.order-recap{
  padding:18px 0;
  margin-bottom:22px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.order-recap p{
  font-size:11px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin:10px 0}
.order-recap b{
  font-weight:500}
.order-recap p:last-child{
  margin-top:20px;
  padding-top:15px;
  border-top:1px solid var(--line)}
.form-layout label.consent{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:10px;
  line-height:1.6}
.bespoke-sign{
  display:flex;
  align-items:center;
  gap:20px;
  margin:42px 0;
  font-size:65px;
  color:var(--olive)}
.bespoke-sign span{
  font-size:13px;
  line-height:1.6;
  letter-spacing:0;
  color:var(--ink)}
.choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px}
.choice-grid label{
  position:relative;
  cursor:pointer}
.choice-grid input{
  position:absolute;
  opacity:0}
.choice-grid span{
  display:block;
  border:1px solid #cdd0c2;
  padding:12px;
  font-size:11px;
  transition:background .2s}
.choice-grid input:checked+span{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper)}
.choice-grid input:focus-visible+span{
  outline:2px solid var(--olive);
  outline-offset:3px}
.bespoke form>.eyebrow{
  margin-bottom:26px}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px}
.form-section{
  margin-top:15px}
.success{
  text-align:center;
  padding:75px var(--pad) 100px}
.success-mark{
  width:70px;
  height:70px;
  background:var(--accent);
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 35px;
  font-size:40px}
.success p{
  font-size:14px;
  color:var(--muted);
  line-height:1.8}
.success .form-note{
  margin:30px auto}
.success h1{
  font-size:60px}
.studio-intro{
  position:relative}
.studio-intro p{
  max-width:400px;
  position:absolute;
  right:var(--pad);
  bottom:75px}
.studio-values{
  padding:30px var(--pad) 85px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px}
.studio-values article{
  border-top:1px solid var(--line);
  padding-top:25px}
.studio-values article>span{
  font-size:9px;
  letter-spacing:1px}
.studio-values h2{
  font-size:27px;
  margin:25px 0 15px;
  letter-spacing:-1px}
.studio-values p{
  font-size:12px;
  color:var(--muted);
  line-height:1.8}
.studio-values+.custom-banner{
  margin-bottom:80px}
#toast{
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,20px);
  background:var(--ink);
  color:white;
  font-size:12px;
  padding:15px 25px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:20;
  box-shadow:0 5px 30px #0002}
#toast.show{
  opacity:1;
  transform:translate(-50%,0)}

@media(min-width:1500px){
  body{
  max-width:1800px;
  margin:auto}
.product-art{
  height:420px}
.mock-site,.mock-app,.mock-shop{
  scale:1.2}
.phone{
  scale:1.12}
.mock-seo{
  max-width:430px}
}
@media(max-width:1050px){
  .hero h1{
  font-size:9vw}
.hero-star{
  right:0;
  top:15%}
.product-art{
  padding-left:14px;
  padding-right:14px;
  height:300px}
.mock-site,.mock-app,.mock-shop{
  width:94%}
.ios-label{
  font-size:22px;
  margin-left:20px}
.custom-banner{
  padding:45px}
.custom-art{
  right:5%;
  scale:.8}
.detail-layout{
  gap:30px;
  grid-template-columns:1fr 1fr}
.detail-art{
  height:360px}
.detail-art .ios-label{
  display:none}
.form-layout{
  gap:45px}
.studio-intro p{
  position:static;
  margin-top:30px}
.basket-layout{
  gap:25px}
.basket-item{
  gap:13px}
.basket-icon{
  width:55px;
  height:65px}
}
@media(max-width:720px){
  header{
  height:83px;
  gap:15px;
  flex-wrap:wrap;
  padding-top:14px;
  padding-bottom:13px}
.logo{
  font-size:25px}
.logo span{
  font-size:9px;
  line-height:18px}
nav{
  order:3;
  width:100%;
  justify-content:center;
  gap:30px;
  font-size:10px}
nav a{
  padding:0}
.cart-link{
  font-size:10px}
.cart-link span{
  width:20px;
  height:20px;
  font-size:9px}
.hero{
  padding-top:27px;
  padding-bottom:36px}
.hero-kicker{
  font-size:8px;
  letter-spacing:1px}
.hero-kicker>span:last-child{
  display:none}
.hero h1{
  font-size:clamp(50px,10.4vw,74px);
  letter-spacing:-.055em;
  margin:34px 0 25px;
  line-height:1.09}
.hero-star{
  font-size:1em;
  right:0;
  top:15%}
.hero-bottom{
  display:block}
.hero-bottom p{
  font-size:12px;
  line-height:1.8}
.hero-bottom .btn{
  margin-top:25px;
  font-size:11px;
  padding:17px 20px;
  gap:45px}
.catalogue-section{
  padding-top:34px;
  padding-bottom:40px}
.section-heading{
  display:block;
  margin-bottom:24px}
.section-heading h2{
  font-size:29px;
  margin-top:13px}
.section-heading>p{
  margin-top:15px;
  font-size:11px}
.eyebrow{
  font-size:8px;
  letter-spacing:1.3px}
.filters{
  gap:5px;
  flex-wrap:wrap;
  margin-bottom:22px}
.filters button{
  font-size:10px;
  padding:10px 11px}
.filters button small{
  font-size:8px;
  margin-left:5px}
.filters>span{
  display:none}
.product-grid{
  grid-template-columns:1fr;
  gap:30px}
.product-art{
  height:300px;
  padding:40px 20px 20px}
.mock-site,.mock-app,.mock-shop{
  max-width:360px;
  width:91%}
.product-meta h3{
  font-size:18px}
.product-meta p{
  font-size:10px;
  line-height:1.6}
.product-meta b{
  font-size:13px}
.art-label{
  font-size:7px}
.ios-label{
  font-size:26px;
  margin-left:30px}
.catalogue-note{
  font-size:10px;
  line-height:1.7;
  display:block}
.catalogue-note a{
  display:inline-block;
  margin-top:13px}
.custom-banner{
  padding:32px 26px;
  min-height:395px}
.custom-banner h2{
  font-size:40px;
  letter-spacing:-2px;
  position:relative;
  z-index:1}
.custom-banner p{
  font-size:11px;
  position:relative;
  z-index:1;
  max-width:280px}
.custom-banner p br{
  display:none}
.custom-art{
  scale:.42;
  transform-origin:top right;
  right:-5px;
  top:33px;
  opacity:.45}
.custom-art>span{
  display:none}
.banner-note{
  font-size:6px;
  bottom:19px;
  left:26px;
  right:auto}
.custom-banner .eyebrow{
  font-size:6px;
  letter-spacing:1px;
  position:relative;
  z-index:1}
.custom-banner .btn{
  margin-top:5px}
.method{
  padding:48px var(--pad);
  grid-template-columns:1fr;
  gap:35px}
.method h2,.faq h2{
  font-size:30px;
  letter-spacing:-1.3px;
  margin-top:14px}
.steps article{
  padding-left:32px}
.steps h3{
  font-size:15px}
.steps p{
  font-size:11px}
.faq{
  padding:40px var(--pad);
  grid-template-columns:1fr;
  gap:20px}
.faq summary{
  font-size:12px}
.footer-top{
  flex-wrap:wrap;
  gap:25px;
  padding-bottom:30px}
.footer-top p{
  font-size:11px}
.footer-top>a:last-child{
  width:100%;
  font-size:12px}
.footer-bottom{
  flex-direction:column;
  font-size:8px;
  line-height:1.7}
footer{
  padding-top:32px}
.page-intro{
  padding-top:40px;
  padding-bottom:35px}
.page-intro h1,.form-layout h1{
  font-size:43px;
  letter-spacing:-2.5px}
.page-intro p{
  font-size:12px}
.detail-layout{
  grid-template-columns:1fr;
  gap:35px;
  padding-bottom:45px}
.detail-layout>div:first-child{
  display:contents}
.detail-art{
  order:0;
  height:310px}
.product-config{
  order:1}
.included{
  order:2;
  margin-top:10px}
.product-config h1{
  font-size:40px;
  margin-top:14px}
.lead{
  font-size:13px}
.price-line strong{
  font-size:36px}
.product-config .eyebrow{
  font-size:8px}
.breadcrumb{
  font-size:10px;
  padding-top:23px;
  padding-bottom:18px}
.detail-art .ios-label{
  display:block;
  font-size:24px}
.basket-layout{
  grid-template-columns:1fr;
  padding-bottom:45px}
.basket-item{
  align-items:flex-start;
  flex-wrap:wrap;
  position:relative;
  padding-bottom:40px}
.basket-item>strong{
  position:absolute;
  right:0;
  bottom:16px}
.basket-item>div:nth-child(2){
  flex:1}
.basket-item h3{
  font-size:17px}
.basket-item p{
  font-size:10px}
.summary{
  padding:25px}
.form-layout{
  grid-template-columns:1fr;
  gap:35px;
  padding-top:35px;
  padding-bottom:40px}
.form-layout form{
  padding:23px 18px}
.form-layout>div>p{
  font-size:13px}
.form-layout .form-note{
  margin-top:20px;
  font-size:10px}
.bespoke-sign{
  margin:25px 0;
  font-size:48px}
.bespoke-sign span{
  font-size:11px}
.form-row{
  gap:15px}
.form-layout form>label,.form-row>label{
  font-size:10px}
.form-layout h1{
  margin-top:20px}
.success{
  padding:55px var(--pad)}
.success h1{
  font-size:40px;
  letter-spacing:-2px}
.success p{
  font-size:12px}
.studio-values{
  grid-template-columns:1fr;
  gap:30px;
  padding-bottom:45px}
.studio-values+.custom-banner{
  margin-bottom:45px}
.empty{
  padding:40px var(--pad) 70px}
.empty h2{
  font-size:28px}
#toast{
  max-width:90%;
  width:max-content;
  text-align:center;
  font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*,*:before,*:after{
  transition:none!important;
  animation:none!important}
}


/* Product-first hero: explicit offer and two clear paths. */
.hero h1{
  font-size:clamp(64px,7vw,104px);
  margin:32px 0;
  letter-spacing:-.055em;
  line-height:1.04}

.hero-actions{
  display:flex;
  align-items:center;
  gap:26px;
  flex-shrink:0}

.hero-custom{
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){
  
.hero-custom:hover{
  border-color:var(--ink)}
}

@media(max-width:1050px){
  .hero-bottom{
  align-items:flex-start}
.hero-actions{
  gap:18px}
.hero-bottom p{
  font-size:12px}
.hero-custom{
  font-size:11px}
}

@media(max-width:720px){
  .hero h1{
  font-size:clamp(48px,12vw,72px);
  margin:28px 0;
  line-height:1.07}
.hero-actions{
  flex-wrap:wrap;
  gap:8px 22px;
  margin-top:24px}
.hero-bottom .btn{
  margin-top:0;
  gap:30px}
.hero-custom{
  font-size:11px;
  gap:10px}
.hero-bottom p{
  font-size:13px}
.hero{
  padding-bottom:32px}
}


/* Editorial product stage */
.hero-stage{
  padding:45px var(--pad) 25px;
  overflow:hidden;
  text-align:center;
  background:#f6f5f0;
  position:relative}

.hero-stage .hero-kicker{
  justify-content:center;
  font-size:9px;
  letter-spacing:2px}

.hero-stage h1{
  font-size:clamp(60px,7.6vw,118px);
  line-height:1.02;
  letter-spacing:-.065em;
  font-weight:550;
  margin:30px auto 24px;
  max-width:none}

.hero-stage h1 em{
  color:#657043}

.hero-stage .hero-promise{
  font-size:16px;
  line-height:1.6;
  color:#666b5c;
  letter-spacing:-.2px}

.hero-stage .hero-actions{
  justify-content:center;
  margin-top:26px;
  gap:30px}

.hero-stage .btn{
  border-radius:32px;
  padding:17px 23px;
  font-size:12px;
  gap:26px}

.hero-stage .hero-custom{
  border:none;
  font-size:12px;
  padding:17px 0}
@media (hover:hover) and (pointer:fine){
  
.hero-stage .hero-custom:hover{
  color:var(--olive)}
}

.hero-showcase{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.2fr .58fr;
  align-items:end;
  gap:24px;
  max-width:1180px;
  margin:60px auto 0;
  padding:0 12px 22px;
  isolation:isolate}

.hero-showcase:before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:35% -8% 8%;
  background:#e1e4d4;
  border-radius:50%;
  filter:blur(55px);
  opacity:.75}

.hero-object{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  position:relative;
  transition:transform .4s}
@media (hover:hover) and (pointer:fine){
  
.hero-object:hover{
  transform:translateY(-9px)}
}

.hero-object-content{
  width:100%;
  height:285px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
  text-align:left}

.hero-object-web{
  z-index:2;
  transform:rotate(-5deg) translateY(-12px)}
@media (hover:hover) and (pointer:fine){
  
.hero-object-web:hover{
  transform:rotate(-3deg) translateY(-21px)}
}

.hero-object-app{
  z-index:1;
  transform:translateY(-32px)}
@media (hover:hover) and (pointer:fine){
  
.hero-object-app:hover{
  transform:translateY(-41px)}
}

.hero-object-ios{
  z-index:3;
  transform:rotate(7deg) translateY(-5px)}
@media (hover:hover) and (pointer:fine){
  
.hero-object-ios:hover{
  transform:rotate(5deg) translateY(-14px)}
}

.hero-showcase .mock-site{
  width:100%;
  height:275px;
  transform:none;
  border:5px solid #fff;
  border-radius:7px;
  box-shadow:0 22px 30px -15px #28331f45,0 3px 8px #28331f12}

.hero-showcase .mock-web-body strong{
  font-size:38px}
.hero-showcase .mock-web-body i{
  font-size:35px}
.hero-showcase .arch{
  height:184px;
  top:49px;
  right:12px}

.hero-showcase .mock-app{
  width:100%;
  height:280px;
  transform:none;
  border:5px solid #fff;
  border-radius:9px;
  box-shadow:0 24px 34px -15px #28331f45,0 3px 8px #28331f12}

.hero-showcase .mock-app section{
  padding:16px}
.hero-showcase .mock-app h4{
  font-size:19px}
.hero-showcase .chart{
  height:87px}
.hero-showcase .bars{
  height:54px}
.hero-showcase .mini-stats b{
  font-size:18px}

.hero-showcase .phone{
  transform:none;
  width:157px;
  height:312px;
  box-shadow:12px 20px 25px -10px #28331f50;
  scale:1.05;
  transform-origin:bottom center}

.hero-showcase .ios-label{
  display:none}
.hero-object-caption{
  display:block;
  text-align:left;
  width:100%;
  font-size:7px;
  letter-spacing:1.4px;
  margin-top:22px;
  white-space:nowrap;
  color:#6e7561;
  line-height:1.8}
.hero-object-caption b{
  display:block;
  font-weight:500;
  font-size:10px;
  letter-spacing:0;
  color:var(--ink)}

.hero-stage-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #dde0d3;
  padding-top:21px;
  font-size:8px;
  letter-spacing:1.2px;
  color:#777b6e;
  margin-top:12px}
.hero-stage-foot a{
  font-size:11px;
  letter-spacing:0;
  color:var(--ink)}

@media(min-width:1500px){
  .hero-showcase .mock-site,.hero-showcase .mock-app,.hero-showcase .phone{
  scale:1}
.hero-object-content{
  height:310px}
.hero-showcase .mock-site,.hero-showcase .mock-app{
  height:300px}
}

@media(max-width:1050px){
  .hero-stage{
  padding-top:38px}
.hero-stage h1{
  font-size:8.6vw}
.hero-showcase{
  gap:15px;
  padding:0;
  margin-top:50px;
  grid-template-columns:1fr 1.1fr .6fr}
.hero-object-content{
  height:235px}
.hero-showcase .mock-site{
  height:233px}
.hero-showcase .mock-web-body strong{
  font-size:30px}
.hero-showcase .mock-web-body i{
  font-size:28px}
.hero-showcase .arch{
  height:153px}
.hero-showcase .mock-app{
  height:240px}
.hero-showcase .mock-app section{
  padding:9px}
.hero-showcase .mock-app h4{
  font-size:14px}
.hero-showcase .chart{
  height:66px}
.hero-showcase .bars{
  height:35px}
.hero-showcase .phone{
  scale:.86}
.hero-object-caption{
  font-size:6px;
  letter-spacing:.7px}
.hero-object-caption b{
  font-size:8px}
}

@media(max-width:720px){
  .hero-stage{
  padding:31px 24px 20px}
.hero-stage .hero-kicker{
  font-size:7px;
  letter-spacing:1.5px}
.hero-stage h1{
  font-size:clamp(41px,7.9vw,57px);
  letter-spacing:-.065em;
  margin:26px auto 19px;
  line-height:1.08}
.hero-stage .hero-promise{
  font-size:13px;
  max-width:260px;
  margin:auto;
  line-height:1.7}
.hero-stage .hero-actions{
  margin-top:22px;
  gap:5px 20px}
.hero-stage .btn{
  padding:14px 19px;
  font-size:11px}
.hero-stage .hero-custom{
  font-size:11px;
  padding:13px 0;
  gap:9px}
.hero-showcase{
  width:520px;
  left:50%;
  transform:translateX(-50%);
  grid-template-columns:220px 210px 90px;
  gap:0;
  margin-top:48px;
  margin-bottom:6px;
  padding:0 12px;
  align-items:end}
.hero-object-content{
  height:201px}
.hero-object-web{
  transform:rotate(-7deg) translate(5px,-8px);
  z-index:2}
.hero-object-app{
  transform:translate(-25px,-28px);
  z-index:1}
.hero-object-ios{
  transform:rotate(8deg) translate(-56px,7px);
  z-index:3}
.hero-showcase .mock-site{
  height:202px;
  padding:10px;
  border-width:3px}
.hero-showcase .mock-nav b{
  font-size:6px}
.hero-showcase .mock-nav>span{
  font-size:3px}
.hero-showcase .mock-web-body{
  margin-top:15px}
.hero-showcase .mock-web-body small{
  font-size:3px}
.hero-showcase .mock-web-body strong{
  font-size:26px}
.hero-showcase .mock-web-body i{
  font-size:25px}
.hero-showcase .mock-pill{
  font-size:4px;
  padding:5px 7px;
  margin-top:10px}
.hero-showcase .arch{
  height:137px;
  top:36px;
  right:9px}
.hero-showcase .mock-bottom{
  font-size:3px;
  left:10px;
  right:10px}
.hero-showcase .mock-app{
  height:206px;
  border-width:3px}
.hero-showcase .mock-app aside{
  padding:10px 5px;
  font-size:4px;
  gap:12px}
.hero-showcase .mock-app aside b{
  font-size:13px}
.hero-showcase .mock-app section{
  padding:8px}
.hero-showcase .mock-app-top{
  font-size:4px;
  margin-bottom:10px}
.hero-showcase .mock-app h4{
  font-size:12px}
.hero-showcase .mini-stats>div{
  padding:5px;
  font-size:4px}
.hero-showcase .mini-stats b{
  font-size:12px}
.hero-showcase .chart{
  height:56px;
  padding:5px}
.hero-showcase .bars{
  height:31px;
  gap:3px}
.hero-showcase .mini-row{
  font-size:3px}
.hero-showcase .phone{
  scale:.67;
  transform-origin:bottom center}
.hero-object-caption{
  display:none}
.hero-stage-foot{
  display:block;
  margin-top:25px;
  font-size:6px;
  letter-spacing:1px;
  line-height:1.8}
.hero-stage-foot a{
  display:block;
  font-size:10px;
  margin-top:8px}
.hero-showcase:before{
  inset:30% 8% 0}
}


.hero-stage .hero-kicker>.dot{
  display:inline-block;
  margin:0;
  flex-shrink:0}

/* Restrained editorial rhythm: typography, spacing and product alignment. */
:root{
  --paper:#f7f6f2;
  --ink:#242622;
  --muted:#686b63;
  --line:#ddded7}

body{
  font-family:'DM Sans',Arial,sans-serif}

.eyebrow{
  font-size:11px;
  letter-spacing:.25px;
  font-weight:500;
  text-transform:none}

header{
  height:84px}
nav{
  font-size:13px}

.dot{
  display:none!important}

.hero-stage{
  padding-top:38px;
  padding-bottom:36px;
  background:var(--paper)}

.hero-stage .hero-kicker{
  font-size:12px;
  letter-spacing:.1px;
  color:var(--muted)}

.hero-stage h1{
  letter-spacing:-.055em;
  font-weight:500;
  margin:22px auto 20px;
  animation:none}

.hero-stage h1 em{
  color:var(--ink)}

.hero-stage .hero-promise{
  font-size:15px;
  animation:none}

.hero-stage .hero-actions{
  margin-top:22px;
  animation:none}

.hero-stage .btn{
  border-radius:3px;
  padding:16px 22px}

.btn{
  border-radius:3px}
@media (hover:hover) and (pointer:fine){
  .btn:hover{
  transform:none}
}

.hero-showcase{
  margin-top:45px;
  padding-bottom:0;
  gap:32px;
  animation:none;
  align-items:end}

.hero-showcase:before{
  display:none}
@media (hover:hover) and (pointer:fine){
  
.hero-object,.hero-object-web,.hero-object-app,.hero-object-ios,.hero-object:hover,.hero-object-web:hover,.hero-object-app:hover,.hero-object-ios:hover{
  transform:none}
}

.hero-object-content{
  height:280px}

.hero-showcase .mock-site,.hero-showcase .mock-app{
  box-shadow:0 10px 23px -12px #2225;
  border-width:3px}

.hero-showcase .phone{
  box-shadow:0 10px 23px -12px #2225;
  scale:.93}

.hero-object-caption{
  font-size:11px;
  letter-spacing:0;
  line-height:1.4;
  margin-top:16px;
  color:var(--muted);
  text-align:center;
  font-weight:400}

.catalogue-section{
  padding-top:42px;
  padding-bottom:48px}
.section-heading{
  margin-bottom:24px}
.section-heading h2{
  margin-top:0}
.section-heading>p{
  font-size:12px}

h2,.section-heading h2{
  font-size:34px;
  letter-spacing:-1.3px}

.filters{
  gap:22px;
  margin-bottom:25px;
  border-bottom:1px solid var(--line)}

.filters button{
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  padding:12px 0;
  background:transparent;
  font-size:12px;
  color:var(--muted)}

.filters button.active{
  background:transparent;
  color:var(--ink);
  border-bottom-color:var(--ink)}

.filters button small{
  margin-left:6px;
  font-size:9px}

.product-grid{
  gap:30px 25px}
.product-meta{
  margin-top:14px}
.product-meta p{
  font-size:12px;
  line-height:1.6}
.product-meta>span{
  font-size:10px}

.art-label{
  font-size:10px;
  letter-spacing:0;
  text-transform:none}

.mock-site,.mock-app,.mock-shop,.phone{
  transform:none}
@media (hover:hover) and (pointer:fine){
  
.product-card:hover .mock-site,.product-card:hover .mock-app,.product-card:hover .phone,.product-card:hover .mock-shop{
  transform:none}
}

.art-open{
  border-radius:0;
  background:transparent;
  backdrop-filter:none}
@media (hover:hover) and (pointer:fine){
  .product-card:hover .art-open{
  transform:none}
}

.custom-banner{
  min-height:0;
  padding:40px 45px;
  background:#e9ebe3;
  color:var(--ink)}

.custom-banner .eyebrow{
  font-size:12px;
  letter-spacing:0;
  color:var(--muted)}

.custom-banner h2{
  font-size:40px;
  line-height:1.15;
  letter-spacing:-1.5px;
  margin:12px 0 15px}

.custom-banner p{
  color:var(--muted);
  font-size:13px;
  margin-bottom:22px}
.custom-banner .btn.light{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)}

.method{
  padding:56px var(--pad);
  gap:60px}
.method h2,.faq h2{
  margin-top:0}
.steps h3{
  font-size:16px}
.steps p{
  font-size:13px}
.steps article{
  margin-bottom:22px;
  padding-bottom:22px}

.faq{
  padding:42px var(--pad) 52px}
.faq summary{
  font-size:13px;
  padding:20px 0}

footer{
  padding-top:32px}
.footer-top{
  padding-bottom:32px}
.footer-top p{
  font-size:12px}

.page-intro{
  padding-top:45px;
  padding-bottom:40px}
.page-intro h1,.form-layout h1{
  letter-spacing:-.045em}
.form-layout{
  padding-top:48px;
  gap:64px}
.form-note{
  font-size:11px}
.product-config h1{
  letter-spacing:-1.8px}

@media(max-width:1050px){
  .hero-object-content{
  height:240px}
.hero-showcase{
  gap:20px}
.hero-showcase .phone{
  scale:.78}
.hero-object-caption{
  font-size:10px}
}

@media(max-width:720px){
  header{
  height:83px}
.hero-stage{
  padding:28px 24px}
.hero-stage .hero-kicker{
  font-size:11px}
.hero-stage h1{
  font-size:clamp(39px,7.9vw,57px);
  letter-spacing:-.05em;
  margin:21px auto 17px}
.hero-stage .hero-promise{
  font-size:13px;
  max-width:300px}
.hero-stage .hero-actions{
  margin-top:18px;
  gap:2px 18px}
.hero-stage .btn{
  padding:14px 18px}
.hero-stage .hero-custom{
  padding:14px 0}
.hero-showcase{
  width:100%;
  left:auto;
  transform:none;
  grid-template-columns:1fr 100px;
  gap:14px;
  padding:0;
  margin-top:32px;
  align-items:end}
.hero-object-app{
  display:none}
.hero-object-content{
  height:185px}
.hero-showcase .mock-site{
  height:177px;
  padding:9px;
  border-width:2px}
.hero-showcase .mock-web-body strong{
  font-size:21px}
.hero-showcase .mock-web-body i{
  font-size:20px}
.hero-showcase .mock-web-body{
  margin-top:14px}
.hero-showcase .mock-web-body small{
  letter-spacing:.2px}
.hero-showcase .arch{
  height:116px;
  width:43%;
  top:32px;
  right:7px}
.hero-showcase .mock-nav>span{
  font-size:2px}
.hero-showcase .mock-pill{
  font-size:3px;
  margin-top:8px}
.hero-showcase .phone{
  scale:.57;
  transform-origin:bottom center}
.hero-object-caption{
  display:block;
  font-size:10px;
  margin-top:12px}
.hero-object-web,.hero-object-ios{
  transform:none}
.hero-object-ios .hero-object-content{
  width:100px}
.catalogue-section{
  padding-top:28px;
  padding-bottom:32px}
.section-heading{
  margin-bottom:16px}
.section-heading h2,h2{
  font-size:29px}
.section-heading>p{
  font-size:12px;
  margin-top:10px}
.filters{
  gap:18px;
  flex-wrap:nowrap;
  margin-bottom:20px}
.filters button{
  font-size:10px;
  white-space:nowrap;
  padding:10px 0}
.filters button small{
  font-size:8px;
  margin-left:4px}
.product-meta p{
  font-size:11px}
.custom-banner{
  padding:28px 24px}
.custom-banner .eyebrow{
  font-size:11px}
.custom-banner h2{
  font-size:30px;
  letter-spacing:-1px}
.custom-banner p{
  font-size:12px}
.method{
  padding:36px var(--pad);
  gap:26px}
.method h2,.faq h2{
  font-size:28px}
.steps p{
  font-size:12px}
.faq{
  padding:32px var(--pad)}
.form-layout{
  padding-top:32px;
  gap:30px}
.footer-top p{
  font-size:11px}
}


/* Interaction foundations */
:root {
  
  --ease-out: cubic-bezier(.23,1,.32,1);
  
  --press-duration: 140ms;
  
  --feedback-duration: 180ms;
  
  --control-radius: 5px;
  
  --focus-ring: #526133;
  
}

html {
   scroll-behavior: auto;
   }

[hidden] {
   display: none !important;
   }

button, .btn, .hero-custom, .choice-grid label {
   user-select: none;
   }

h1,h2,h3 {
   text-wrap: balance;
   }

p {
   text-wrap: pretty;
   }

.price-line, .product-meta b, .summary b, .order-recap, .basket-item>strong {
   font-variant-numeric: tabular-nums;
   }

.btn {
  
  min-height: 48px;
  
  border-radius: var(--control-radius);
  
  transition: transform var(--press-duration) var(--ease-out), background-color var(--feedback-duration) ease, border-color var(--feedback-duration) ease;
  
}

.btn .button-label {
   font: inherit;
   line-height: 1.3;
   }

html[data-input="pointer"] .btn:active {
   transform: scale(.98);
   }

html[data-input="pointer"] .filters button:active {
   opacity: .65;
   }

.btn.is-added {
   background: #e5e9dc;
   border-color: #cad2bc;
   color: var(--ink);
   }

.selection-next {
   margin: 0;
   padding: 15px 0 3px;
   min-height: 44px;
   font-size: 13px;
   }

.option {
   min-height: 54px;
   border-radius: 3px;
   padding: 12px 10px;
   margin: 0 -10px;
   transition: background-color 140ms ease;
   }

.option:has(input:checked) {
   background: #e8ecdf;
   }

.option input, .consent input {
   width: 18px;
   height: 18px;
   }

.option:focus-within, .choice-grid label:focus-within {
   outline: 2px solid var(--focus-ring);
   outline-offset: 3px;
   }

.option input:focus-visible, .choice-grid input:focus-visible+span {
   outline: none;
   }

input:not([type=checkbox]), textarea, select {
   font-size: 16px;
   line-height: 1.5;
   padding: 12px 0;
   min-height: 48px;
   }

input::placeholder, textarea::placeholder {
   font-size: 14px;
   }

.form-layout form>label, .form-row>label {
   font-size: 13px;
   line-height: 1.5;
   }

.form-layout form {
   border: 1px solid var(--line);
   border-radius: 8px;
   }

.choice-grid span {
   border-radius: var(--control-radius);
   min-height: 44px;
   display: flex;
   align-items: center;
   font-size: 12px;
   }

.text-button {
   min-height: 44px;
   padding: 10px 0;
   border: 0;
   text-decoration: underline;
   text-underline-offset: 3px;
   font-size: 12px;
   }

nav a, .cart-link {
   min-height: 44px;
   display: inline-flex;
   align-items: center;
   }

.filters button {
   min-height: 44px;
   }

.product-meta>div {
   min-width: 0;
   }

.product-meta h3 {
   line-height: 1.3;
   }

.basket-item>div:nth-child(2), .form-layout>div {
   min-width: 0;
   overflow-wrap: anywhere;
   }

.success h1 {
   overflow-wrap: anywhere;
   }

#toast {
   bottom: max(24px,env(safe-area-inset-bottom));
   border-radius: 6px;
   max-width: calc(100vw - 32px);
   width: max-content;
   font-size: 13px;
   line-height: 1.5;
   transform: translate(-50%,8px);
   transition: opacity 160ms ease, transform 180ms var(--ease-out);
   }

#toast.show {
   transform: translate(-50%,0);
   }

@media (hover:hover) and (pointer:fine) {
  
  .option:hover {
   background: #eeefe7;
   }

  .option:has(input:checked):hover {
   background: #e3e8d8;
   }

  .product-card:hover h3, .hero-object:hover .hero-object-caption {
   text-decoration: underline;
   text-underline-offset: 5px;
   text-decoration-thickness: 1px;
   }

}

html[data-input="keyboard"] *, html[data-input="keyboard"] *::before, html[data-input="keyboard"] *::after {
   transition: none !important;
   animation: none !important;
   }

@media (max-width:720px) {
  
  header {
   height: auto;
   min-height: 104px;
   padding-top: 8px;
   padding-bottom: 0;
   row-gap: 0;
   }

  nav {
   gap: 28px;
   }

  nav a {
   padding: 0;
   font-size: 12px;
   }

  .cart-link {
   font-size: 11px;
   }

  .hero-stage {
   padding-top: 22px;
   }

  .hero-stage h1 {
   font-size: clamp(34px,9.7vw,60px);
   }

  .hero-stage .hero-actions {
   gap: 0 16px;
   }

  .hero-stage .hero-custom {
   min-height: 44px;
   }

  .filters {
   gap: 0;
   justify-content: space-between;
   }

  .filters button {
   font-size: 12px;
   }

  .filters button small {
   font-size: 9px;
   }

  .product-meta {
   gap: 14px;
   }

  .product-meta>span {
   font-size: 11px;
   }

  .product-meta b {
   font-size: 14px;
   }

  .tiny, .summary>small {
   font-size: 11px;
   line-height: 1.6;
   }

  .option {
   font-size: 12px;
   }

  .option b {
   font-size: 11px;
   }

  .form-row {
   grid-template-columns: 1fr;
   gap: 0;
   }

}

@media (prefers-reduced-motion:reduce) {
  
  *, *::before, *::after {
   animation: none !important;
   transition: none !important;
   }

  html[data-input="pointer"] .btn:active {
   transform: none;
   background: #424b38;
   color: white;
   }

}