@font-face{
  font-family:Manrope;
  src:url('/assets/fonts/manrope.woff2') format('woff2');
  font-weight:400 800;
  font-display:swap}

:root{
  --cream:#f6f4ed;
  --paper:#fffefa;
  --ink:#123d3c;
  --muted:#657269;
  --red:#cf1235;
  --line:#d8dfd5;
  --mint:#e2eadc;
  --teal:#084e4d;
  --font:Manrope,Arial,sans-serif}

*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:110px}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:1.0625rem/1.8 var(--font);
  -webkit-font-smoothing:antialiased}
body:has(dialog[open]){
  overflow:hidden}
h1,h2,h3,p{
  margin:0}
h1,h2,h3{
  font-weight:600;
  letter-spacing:-.055em;
  line-height:1.1}
h1{
  font-size:clamp(48px,5.8vw,86px)}
h2{
  font-size:clamp(34px,3.5vw,52px)}
h3{
  font-size:25px}
p{
  margin-bottom:22px}
a{
  color:inherit;
  text-decoration:none}
a:hover{
  color:var(--red)}
img{
  display:block;
  max-width:100%;
  height:auto}
svg{
  width:23px;
  height:23px;
  flex:none;
  vertical-align:middle}
button,input,textarea,select{
  font:inherit;
  color:inherit}
button{
  border:0;
  background:none;
  cursor:pointer}
a,button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--red);
  outline-offset:4px}
button:disabled{
  opacity:.45;
  cursor:not-allowed}
::selection{
  background:#b9d2b9;
  color:var(--ink)}
[hidden]{
  display:none!important}
.container{
  width:min(1360px,calc(100% - 96px));
  margin-inline:auto}
.section{
  padding-block:90px}
.section-tight{
  padding-top:10px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:0.6875rem;
  font-weight:800;
  letter-spacing:.15em;
  line-height:1.8;
  text-transform:uppercase}
.eyebrow i{
  height:5px;
  width:5px;
  background:var(--red);
  flex:none}
.button{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:14px 23px;
  border:1px solid transparent;
  border-radius:3px;
  font-size:0.9375rem;
  font-weight:800;
  line-height:1.7}
.button svg{
  width:20px;
  height:20px}
.button:hover{
  transform:translateY(-2px)}
.primary{
  background:var(--red);
  color:#fff}
.primary:hover{
  background:#aa0c2a;
  color:#fff}
.light{
  background:var(--paper);
  color:var(--ink)}
.light:hover{
  background:#e4e9dc;
  color:var(--ink)}
.outline{
  border-color:#b8c8b1;
  background:transparent}
.outline:hover{
  background:var(--mint)}
.button-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px}
.text-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  font-size:0.9375rem;
  font-weight:800}
.text-link svg{
  width:19px;
  height:19px}
.small-text{
  font-size:0.875rem;
  line-height:1.8;
  color:var(--muted)}
.sr-only{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
.skip-link{
  position:fixed;
  left:20px;
  top:-90px;
  padding:10px 20px;
  background:white;
  z-index:100}
.skip-link:focus{
  top:10px}
.js-only{
  display:none!important}
.enhanced .js-only{
  display:inline-flex!important}
.enhanced form.js-only{
  display:block!important}
.topbar{
  background:var(--ink);
  color:#e3ecdc;
  font-size:0.6875rem;
  letter-spacing:.02em;
  padding:8px 0}
.topbar .container{
  display:flex;
  justify-content:space-between;
  gap:20px}
.topbar a{
  display:flex;
  align-items:center;
  gap:10px}
.topbar a:hover{
  color:white}
.topbar svg{
  width:12px;
  height:12px}
.site-header{
  position:sticky;
  top:0;
  background:#f6f4edf7;
  backdrop-filter:blur(15px);
  border-bottom:1px solid #123d3c16;
  z-index:20}
.header-inner{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap}
.brand img{
  width:35px}
.brand>span{
  font-size:21px;
  font-weight:800;
  line-height:1;
  letter-spacing:-1px}
.brand-five{
  font-weight:500;
  margin-left:2px}
.brand small{
  display:block;
  font-size:5.5px;
  letter-spacing:1.5px;
  font-weight:800;
  margin-top:8px}
#shop-nav{
  display:flex;
  align-items:center;
  gap:25px}
#shop-nav>a{
  font-size:0.9375rem;
  font-weight:700;
  padding:12px 0}
.header-actions{
  display:flex;
  align-items:center;
  gap:15px}
.quote-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  font-size:0.875rem;
  font-weight:800}
.quote-link>svg{
  width:21px;
  height:21px}
.quote-count{
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border-radius:50%;
  background:var(--red);
  color:white;
  font-size:0.75rem}
.menu-toggle,.enhanced .menu-toggle{
  display:none!important}
.shop-hero{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:35px;
  align-items:center;
  padding-block:65px 75px}
.hero-copy h1{
  font-size:clamp(54px,5.8vw,84px);
  line-height:1.05;
  margin:23px 0 25px;
  font-weight:500}
.hero-copy h1>span{
  color:#5b7767}
.hero-copy>p{
  font-size:1.0625rem;
  line-height:1.9;
  max-width:490px}
.hero-copy .button-row{
  margin-top:27px}
.hero-footnote{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.6875rem;
  letter-spacing:.05em;
  margin-top:32px;
  color:var(--muted)}
.status-dot{
  width:5px;
  height:5px;
  background:#4b7b57;
  border-radius:50%;
  box-shadow:0 0 0 4px #b7ceae22}
.hero-products{
  position:relative;
  isolation:isolate;
  height:500px;
  border-radius:8px;
  background:#e4e9df;
  overflow:hidden}
.hero-orbit{
  position:absolute;
  width:410px;
  height:410px;
  border-radius:50%;
  border:1px solid #a6b89e55;
  top:55px;
  left:60px;
  box-shadow:0 0 0 40px #e4e9df,0 0 0 41px #b8c9af40}
.hero-caption{
  position:absolute;
  top:28px;
  left:28px;
  font-size:0.6875rem;
  letter-spacing:.22em;
  font-weight:800}
.hero-product{
  position:absolute;
  background:#fffefa;
  border:1px solid white;
  border-radius:5px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-shadow:0 15px 45px #193d2f12;
  transition:transform .4s}
.hero-product:hover{
  transform:translateY(-5px) rotate(0)}
.hero-product img{
  width:100%;
  object-fit:contain;
  mix-blend-mode:multiply}
.hero-product>span{
  font-size:0.6875rem;
  letter-spacing:.025em;
  padding:8px 12px 14px}
.hero-laptop{
  width:62%;
  top:70px;
  left:25px;
  transform:rotate(-6deg);
  padding:18px 12px 0}
.hero-laptop img{
  height:220px}
.hero-wifi{
  width:32%;
  bottom:28px;
  left:38px;
  transform:rotate(5deg);
  z-index:2;
  padding:12px 10px 0}
.hero-wifi img{
  height:127px}
.hero-printer{
  width:42%;
  bottom:52px;
  right:20px;
  transform:rotate(6deg);
  padding:15px 10px 0}
.hero-printer img{
  height:205px}
.hero-shop-label{
  position:absolute;
  right:25px;
  bottom:18px;
  font-size:0.625rem;
  letter-spacing:.16em}
.trust-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  padding-block:30px;
  border-block:1px solid var(--line)}
.trust-strip>span{
  font-size:0.6875rem;
  color:var(--muted);
  line-height:1.8}
.trust-strip strong{
  display:block;
  font-size:0.875rem;
  color:var(--ink);
  font-weight:700;
  margin-bottom:4px}
.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:36px}
.section-heading h2{
  margin-top:18px}
.section-heading>p{
  font-size:1.0625rem;
  line-height:1.9;
  margin-bottom:5px;
  max-width:490px}
.category-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:15px}
.category-card{
  display:flex;
  flex-direction:column;
  align-items:start;
  min-height:190px;
  padding:25px 22px;
  background:#eeeee6;
  border:1px solid #dfe3d7;
  border-radius:4px}
.category-card>svg{
  width:32px;
  height:32px;
  margin-bottom:30px}
.category-card h3{
  font-size:18px;
  letter-spacing:-.03em;
  margin-bottom:16px}
.category-card>span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:10px;
  font-size:0.6875rem;
  margin-top:auto}
.category-card>span svg{
  width:16px;
  height:16px}
.category-card:hover{
  background:#dfe8d8;
  color:var(--ink);
  transform:translateY(-4px)}
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px}
.product-card{
  min-width:0;
  border:1px solid #e2e6dc;
  border-radius:5px;
  overflow:hidden;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  transition:box-shadow .25s,transform .25s}
.product-card:hover{
  box-shadow:0 15px 40px #183b3010;
  transform:translateY(-3px)}
.card-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1.12;
  background:#fff;
  padding:24px;
  border-bottom:1px solid #edf0e8;
  overflow:hidden}
.card-image img{
  width:100%;
  height:100%;
  max-height:235px;
  object-fit:contain;
  transition:transform .4s}
.product-card:hover .card-image img{
  transform:scale(1.035)}
.image-arrow{
  position:absolute;
  bottom:14px;
  right:14px;
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  background:#f4f6ee;
  border-radius:50%}
.image-arrow svg{
  width:14px;
  height:14px}
.card-copy{
  padding:21px;
  display:flex;
  flex-direction:column;
  flex:1}
.card-category{
  font-size:0.6875rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#64775e;
  margin-bottom:10px}
.card-copy h3{
  font-size:1.125rem;
  letter-spacing:-.025em;
  line-height:1.55;
  overflow-wrap:anywhere}
.card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:auto;
  padding-top:22px}
.quote-prompt{
  font-size:0.875rem;
  font-weight:700;
  min-height:44px;
  display:flex;
  align-items:center}
.add-button{
  border:1px solid #cbd7c4;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  font-size:22px;
  color:var(--ink);
  line-height:1}
.add-button:hover{
  background:var(--red);
  border-color:var(--red);
  color:white}
.add-button.selected{
  background:#e3eddc;
  border-color:#b2c4aa}
.sharp-feature{
  background:var(--teal);
  color:#fff;
  padding:65px 0;
  overflow:hidden}
.sharp-feature>.container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center}
.sharp-feature .eyebrow{
  color:#d3e4cb}
.sharp-feature .eyebrow i{
  background:#d3e4cb}
.sharp-feature h2{
  margin:20px 0 25px;
  font-size:52px}
.sharp-feature p{
  font-size:1.0625rem;
  line-height:1.9;
  color:#c9dcd2;
  max-width:440px}
.sharp-feature .button{
  margin-top:5px}
.sharp-visual{
  position:relative;
  min-height:360px;
  background:#e4e9df;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow:hidden}
.sharp-visual>span{
  position:absolute;
  top:25px;
  left:25px;
  color:#c2233a;
  font-weight:800;
  font-size:24px;
  letter-spacing:1px}
.sharp-visual>img{
  width:120%;
  max-width:none;
  height:330px;
  object-fit:contain;
  mix-blend-mode:multiply;
  margin-top:30px}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
  padding-top:15px}
.steps article{
  border-top:1px solid #b9c9b1;
  padding-top:25px}
.steps article>span{
  font-size:24px;
  color:#72916c}
.steps h3{
  font-size:25px;
  letter-spacing:-.035em;
  margin:23px 0 18px}
.steps p{
  font-size:1.0625rem;
  color:var(--muted);
  line-height:1.9;
  margin:0}
.help-band{
  background:var(--teal);
  color:white;
  padding:65px 0;
  position:relative}
.help-band>.container{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:100px;
  align-items:center}
.help-band h2{
  margin-top:18px;
  font-size:45px}
.help-band p{
  font-size:1.0625rem;
  line-height:1.9;
  color:#d0e0d2;
  max-width:490px}
.help-band .eyebrow{
  color:#d6e5c8}
.help-band .eyebrow i{
  background:#d6e5c8}
footer{
  padding:55px 0 20px}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:60px;
  padding-bottom:35px}
.footer-grid h2{
  font-size:0.875rem;
  letter-spacing:0;
  font-weight:800;
  margin-bottom:20px}
.footer-grid>div>a:not(.brand){
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.875rem;
  min-height:35px;
  overflow-wrap:anywhere}
.footer-grid>div>a svg{
  width:14px;
  height:14px}
.footer-grid>div>p{
  font-size:1.0625rem;
  color:var(--muted);
  margin-top:23px}
.footer-grid>div>span{
  font-size:0.875rem;
  color:var(--muted);
  display:block;
  margin-top:15px}
.back-company{
  margin-top:20px}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:0.875rem;
  color:var(--muted)}
.footer-bottom>a{
  min-height:36px;
  display:flex;
  align-items:center}
.page-intro{
  padding-block:65px 45px}
.page-intro h1{
  font-size:clamp(43px,5.6vw,75px);
  font-weight:500;
  margin:22px 0 25px}
.page-intro h1>span{
  color:#67806c}
.page-intro>p{
  font-size:1.0625rem;
  color:var(--muted);
  max-width:720px;
  line-height:1.9;
  margin:0}
.catalogue-section{
  padding-bottom:90px}
.catalogue-tools{
  display:none;
  grid-template-columns:1.6fr 1fr .8fr;
  gap:20px;
  padding:25px 0;
  border-block:1px solid var(--line);
  align-items:end}
.enhanced .catalogue-tools{
  display:grid}
.search-field{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:49px;
  background:var(--paper);
  border:1px solid #d2dccb;
  border-radius:3px;
  padding:0 15px}
.search-field>svg{
  width:18px;
  height:18px}
.search-field input{
  width:100%;
  border:0;
  background:transparent;
  padding:13px 0;
  font-size:1rem;
  min-width:0}
.search-field input:focus-visible{
  outline:0}
.search-field:focus-within{
  outline:2px solid var(--red);
  outline-offset:3px}
.tool-select label{
  font-size:1rem;
  font-weight:800;
  display:block;
  margin-bottom:7px}
.tool-select select{
  width:100%;
  min-width:0;
  padding:12px 32px 12px 13px;
  border:1px solid #d2dccb;
  border-radius:3px;
  background:var(--paper);
  font-size:1rem;
  min-height:49px}
.catalogue-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:22px 0;
  font-size:0.875rem}
.catalogue-status>p{
  margin:0;
  font-weight:700}
.catalogue-status>span{
  margin-left:auto;
  color:var(--muted);
  font-size:0.6875rem}
.catalogue-status .text-link{
  font-size:0.9375rem;
  min-height:35px}
.empty-state{
  padding:55px 20px;
  text-align:center}
.empty-state h2{
  font-size:34px;
  margin-bottom:20px}
.empty-state h3{
  font-size:28px;
  margin-bottom:20px}
.empty-state p{
  font-size:1.0625rem;
  color:var(--muted)}
.empty-state .button{
  margin-top:10px}
.notice{
  background:var(--mint);
  padding:20px;
  font-size:1rem}
.notice a{
  text-decoration:underline}
.breadcrumbs{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:0.6875rem;
  padding-top:30px;
  color:var(--muted)}
.product-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding-block:35px 60px}
.product-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:520px;
  padding:50px 35px;
  background:#fff;
  border:1px solid #e4e8de;
  border-radius:6px}
.product-stage>img{
  width:100%;
  height:400px;
  object-fit:contain}
.stage-caption{
  position:absolute;
  bottom:24px;
  font-size:0.6875rem;
  letter-spacing:.17em;
  color:#7d8c75}
.product-information h1{
  font-size:40px;
  line-height:1.2;
  letter-spacing:-.05em;
  margin:22px 0;
  overflow-wrap:anywhere}
.product-summary{
  font-size:1.0625rem;
  line-height:1.85;
  color:var(--muted)}
.quote-info{
  padding:22px 0;
  border-block:1px solid var(--line);
  margin-top:28px}
.quote-info strong{
  font-size:1.0625rem;
  font-weight:700}
.quote-info p{
  font-size:1.0625rem;
  line-height:1.85;
  margin:8px 0 0;
  color:var(--muted)}
.product-actions{
  align-items:end;
  gap:15px;
  flex-wrap:wrap;
  margin-top:25px}
.quantity-input label{
  font-size:1rem;
  font-weight:800;
  display:block;
  margin-bottom:8px}
.quantity-input input{
  width:76px;
  min-height:52px;
  padding:13px 10px;
  border:1px solid #bdcdb5;
  border-radius:3px;
  background:var(--paper);
  text-align:center;
  font-size:1rem}
.product-actions>.button{
  font-size:0.9375rem}
.product-information>.text-link{
  margin-top:18px;
  font-size:0.9375rem}
.product-notes{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:0.875rem;
  color:var(--muted);
  margin-top:25px}
.product-notes>span:before{
  content:'✓';
  margin-right:9px}
.detail-information{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px;
  border-top:1px solid var(--line)}
.detail-information h2{
  margin-top:18px}
.specification-copy>p{
  font-size:1.0625rem;
  line-height:1.95;
  color:#52695b;
  margin-bottom:20px;
  overflow-wrap:anywhere}
.spec-table{
  max-width:100%;
  overflow-x:auto;
  border-top:1px solid #bfceb6;
  margin-block:25px 30px}
.spec-table table{
  width:100%;
  border-collapse:collapse;
  font-size:0.875rem;
  line-height:1.75;
  text-align:left;
  table-layout:fixed}
.spec-table caption{
  text-align:left;
  font-size:1.0625rem;
  font-weight:800;
  padding-block:20px}
.spec-table th,.spec-table td{
  padding:12px 15px 12px 0;
  border-bottom:1px solid #d7e0d1;
  vertical-align:top;
  overflow-wrap:anywhere}
.spec-table th{
  width:38%;
  font-weight:700}
.specification-copy .small-text{
  font-size:0.875rem}
.quote-page{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
  padding:20px 0 90px}
.quote-page-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.quote-page-heading h2{
  font-size:29px}
.quote-page-heading .text-link{
  font-size:0.9375rem}
.quote-row{
  display:flex;
  gap:20px;
  align-items:center;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  min-width:0}
.quote-row-image{
  width:95px;
  height:95px;
  background:white;
  border:1px solid #e6eade;
  border-radius:4px;
  flex:none;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:center}
.quote-row-image img{
  width:100%;
  height:100%;
  object-fit:contain}
.quote-row-copy{
  min-width:0;
  flex:1}
.quote-row-title{
  font-size:1rem;
  font-weight:700;
  line-height:1.65;
  display:block;
  margin-bottom:15px;
  overflow-wrap:anywhere}
.quote-row-controls{
  display:flex;
  align-items:center;
  gap:0}
.qty-button{
  width:36px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #c9d7c0;
  line-height:1;
  background:#f4f6ee;
  font-size:18px;
  flex:none}
.qty-button:hover{
  background:#dce8d4}
.quantity-label{
  display:flex;
  height:38px}
.row-quantity{
  width:42px;
  min-width:0;
  height:38px;
  text-align:center;
  background:var(--paper);
  border:1px solid #c9d7c0;
  border-left:0;
  border-right:0;
  border-radius:0;
  padding:0;
  appearance:textfield;
  -moz-appearance:textfield;
  font-size:0.875rem}
.row-quantity::-webkit-inner-spin-button,.row-quantity::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0}
.remove-item{
  font-size:0.6875rem;
  color:#7c514d;
  min-height:38px;
  padding:0 0 0 15px}
.quote-empty-panel{
  padding:55px 24px;
  text-align:center;
  background:#ecf0e4;
  border-radius:5px;
  margin-top:25px}
.quote-empty-panel>span{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#dce6d6;
  margin:0 auto 25px}
.quote-empty-panel h3{
  font-size:29px;
  margin-bottom:18px}
.quote-empty-panel>p{
  font-size:1.0625rem;
  line-height:1.85;
  color:var(--muted);
  max-width:330px;
  margin-inline:auto}
.quote-note{
  font-size:0.875rem;
  padding:20px;
  background:#e8eee1;
  border-radius:3px;
  margin-top:25px;
  color:#4e6c51}
.request-panel{
  padding:34px;
  background:var(--paper);
  border:1px solid #e1e6d8;
  border-radius:5px}
.request-panel h2{
  font-size:33px;
  margin:16px 0 20px}
.request-panel>div>p{
  font-size:1.0625rem;
  color:var(--muted);
  line-height:1.85}
.form-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px}
form label,.draft-panel label{
  display:block;
  font-size:0.875rem;
  font-weight:800;
  margin-bottom:8px;
  line-height:1.65}
.request-panel input,.request-panel textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  border:1px solid #cbd7c3;
  border-radius:3px;
  background:var(--cream);
  padding:12px;
  font-size:1rem;
  line-height:1.8;
  min-height:48px;
  margin:0 0 23px}
.request-panel textarea{
  resize:vertical;
  min-height:120px}
.request-panel textarea::placeholder,.request-panel input::placeholder{
  color:#7c8877;
  font-size:1rem}
.request-panel .small-text{
  font-size:0.875rem;
  line-height:1.9;
  margin:0 0 22px}
.request-panel .button{
  font-size:0.9375rem;
  gap:18px}
.form-status{
  font-size:0.875rem;
  color:#7e4848;
  margin:15px 0 0}
.draft-panel{
  border-top:1px solid var(--line);
  padding-top:28px;
  margin-top:30px;
  scroll-margin-top:105px}
.draft-panel h3{
  font-size:27px;
  margin-bottom:20px;
  line-height:1.25}
.draft-panel>p{
  font-size:1.0625rem;
  color:var(--muted);
  line-height:1.9;
  overflow-wrap:anywhere}
.draft-panel>textarea{
  background:white;
  min-height:230px;
  margin-top:5px;
  font-size:1rem}
.draft-panel .button-row{
  gap:12px}
.draft-panel .button{
  font-size:0.9375rem;
  padding-inline:16px}
.draft-panel>.text-link{
  font-size:0.9375rem;
  margin-top:10px}
#request-copy-status{
  font-size:0.875rem;
  margin-top:15px}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  padding-top:10px}
.contact-grid article{
  padding:40px;
  background:#e8ede1;
  border-radius:5px}
.contact-grid article>span{
  font-size:0.6875rem;
  letter-spacing:.16em;
  font-weight:800}
.contact-grid h2{
  font-size:32px;
  margin:30px 0 22px}
.contact-grid article>a{
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:1.0625rem;
  font-weight:700;
  min-height:44px;
  overflow-wrap:anywhere}
.contact-grid article>p{
  font-size:1.0625rem;
  color:var(--muted);
  line-height:1.9;
  margin:22px 0 0}
.contact-callout{
  padding:40px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  border-block:1px solid var(--line);
  align-items:center}
.contact-callout h2{
  margin-top:18px}
.contact-callout p{
  font-size:1.0625rem;
  color:var(--muted);
  max-width:450px}
.prose{
  max-width:760px;
  padding:10px 0 90px}
.prose h2{
  font-size:27px;
  margin:20px 0}
.prose p{
  font-size:1.0625rem;
  line-height:1.95;
  color:var(--muted)}
.prose a{
  text-decoration:underline;
  text-underline-offset:4px}
.icon-button{
  height:44px;
  width:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:20px;
  flex:none}
.icon-button:hover{
  background:#e5ecdf}
dialog{
  width:min(550px,calc(100% - 32px));
  padding:28px;
  border:1px solid #d2dec9;
  border-radius:7px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 35px 100px #0c353935;
  max-height:88dvh;
  overflow-y:auto}
dialog::backdrop{
  background:#062f37a8;
  backdrop-filter:blur(5px)}
.dialog-heading{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding-bottom:24px}
.dialog-heading h2{
  font-size:33px;
  margin-top:12px}
.dialog-heading .eyebrow{
  font-size:0.6875rem}
.dialog-heading .icon-button{
  margin-right:-5px}
.dialog-footer{
  border-top:1px solid var(--line);
  padding-top:25px}
.dialog-footer>p{
  font-size:1.0625rem;
  color:var(--muted)}
.dialog-footer .button{
  width:100%;
  font-size:0.9375rem}
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  max-width:650px;
  width:calc(100% - 40px);
  display:flex;
  align-items:center;
  gap:20px;
  padding:17px 20px;
  background:var(--ink);
  color:#fff;
  border-radius:5px;
  box-shadow:0 10px 35px #1033272b;
  z-index:25}
.toast>span{
  font-size:0.875rem;
  line-height:1.8;
  flex:1;
  overflow-wrap:anywhere}
.toast>a{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-size:0.875rem;
  font-weight:800;
  min-height:40px}
.toast>a:hover{
  color:#d8e9bc}
.toast>a svg{
  width:17px;
  height:17px}
.toast>button{
  color:#d9e9cb;
  font-size:0.9375rem;
  min-width:30px;
  min-height:40px}
.error-actions{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  padding-bottom:90px}

@media(max-width:1100px){
  .container{
  width:calc(100% - 64px)}
.header-inner{
  gap:20px}
#shop-nav{
  gap:20px}
#shop-nav>a{
  font-size:0.9375rem}
.brand>span{
  font-size:19px}
.brand img{
  width:32px}
.brand small{
  font-size:5px;
  letter-spacing:1.2px}
.header-actions{
  gap:10px}
.quote-label{
  display:none}
.shop-hero{
  gap:30px}
.hero-copy h1{
  font-size:66px}
.hero-products{
  height:460px}
.hero-laptop{
  left:15px;
  top:80px;
  width:67%}
.hero-laptop img{
  height:190px}
.hero-printer{
  right:15px;
  bottom:50px;
  width:45%}
.hero-printer img{
  height:170px}
.hero-wifi{
  left:20px;
  bottom:28px;
  width:34%}
.hero-wifi img{
  height:110px}
.hero-product>span{
  font-size:0.6875rem}
.hero-caption{
  font-size:0.6875rem}
.category-grid{
  gap:12px}
.category-card{
  padding:24px 17px}
.category-card h3{
  font-size:1.0625rem}
.category-card>span{
  font-size:0.6875rem}
.product-grid{
  gap:18px}
.card-image{
  padding:18px}
.card-copy{
  padding:18px}
.card-copy h3{
  font-size:1.125rem}
.card-bottom{
  gap:10px}
.quote-prompt{
  font-size:0.875rem}
.add-button{
  width:37px;
  height:37px}
.sharp-feature>.container{
  gap:65px}
.sharp-feature h2{
  font-size:45px}
.product-detail{
  gap:55px}
.product-stage{
  min-height:440px}
.product-stage>img{
  height:330px}
.product-information h1{
  font-size:35px}
.detail-information{
  gap:60px}
.quote-page{
  gap:40px}
.request-panel{
  padding:28px}
.request-panel .button{
  font-size:0.9375rem}
.form-pair{
  gap:14px}
}

@media(max-width:900px){
  .header-inner{
  height:76px}
#shop-nav{
  flex-direction:column;
  position:absolute;
  top:75px;
  left:0;
  right:0;
  background:var(--cream);
  padding:20px 32px 28px;
  align-items:stretch;
  gap:0;
  border-bottom:1px solid var(--line);
  box-shadow:0 25px 35px #17362e12}
#shop-nav>a{
  font-size:1.0625rem;
  padding:14px 0;
  border-bottom:1px solid var(--line)}
.enhanced #shop-nav{
  display:none}
.enhanced #shop-nav.open{
  display:flex}
.enhanced .menu-toggle{
  display:flex!important;
  flex-direction:column;
  gap:5px;
  align-items:center;
  justify-content:center;
  width:40px;
  height:44px;
  padding:10px}
.menu-toggle>span{
  height:1px;
  width:21px;
  background:var(--ink);
  transition:transform .2s}
.menu-toggle[aria-expanded=true]>span:first-child{
  transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded=true]>span:last-child{
  transform:translateY(-3px) rotate(-45deg)}
.quote-label{
  display:inline}
.shop-hero{
  grid-template-columns:1fr 1fr;
  gap:25px;
  padding-block:50px}
.hero-copy h1{
  font-size:58px}
.hero-copy>p{
  font-size:1.0625rem}
.hero-copy .button-row{
  gap:15px}
.hero-copy .button{
  font-size:0.9375rem;
  padding-inline:18px;
  gap:18px}
.hero-copy .text-link{
  font-size:0.9375rem}
.hero-products{
  height:420px}
.hero-laptop{
  left:17px;
  top:80px;
  width:75%}
.hero-laptop img{
  height:150px}
.hero-printer{
  width:48%;
  right:13px;
  bottom:57px}
.hero-printer img{
  height:145px}
.hero-wifi{
  width:38%;
  left:13px;
  bottom:20px}
.hero-wifi img{
  height:98px}
.hero-product>span{
  font-size:0.6875rem}
.hero-caption{
  font-size:0.6875rem;
  top:24px;
  left:20px}
.hero-orbit{
  left:10px}
.hero-shop-label{
  font-size:0.625rem}
.trust-strip{
  gap:20px}
.trust-strip>span{
  font-size:0.6875rem}
.trust-strip strong{
  font-size:0.875rem}
.section{
  padding-block:70px}
.section-tight{
  padding-top:5px}
.section-heading{
  gap:40px}
.section-heading h2{
  font-size:41px}
.section-heading>p{
  font-size:1.0625rem}
.category-grid{
  grid-template-columns:repeat(3,1fr)}
.category-card{
  min-height:175px;
  padding:22px}
.category-card h3{
  font-size:18px}
.category-card>span{
  font-size:0.6875rem}
.category-card>svg{
  margin-bottom:25px}
.product-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px}
.card-copy h3{
  font-size:1.125rem}
.sharp-feature>.container{
  gap:40px}
.sharp-feature h2{
  font-size:40px}
.sharp-feature p{
  font-size:1.0625rem}
.sharp-visual{
  min-height:325px}
.sharp-visual>img{
  height:280px}
.steps{
  gap:30px}
.steps h3{
  font-size:22px}
.steps p{
  font-size:1.0625rem}
.help-band>.container{
  gap:50px}
.help-band h2{
  font-size:40px}
.help-band p{
  font-size:1.0625rem}
.footer-grid{
  gap:35px;
  grid-template-columns:1.1fr 1fr 1.1fr}
.footer-grid .brand>span{
  font-size:1.0625rem}
.footer-grid .brand img{
  width:28px}
.footer-grid .brand small{
  font-size:4px;
  letter-spacing:1px}
.footer-grid>div>a:not(.brand){
  font-size:0.875rem}
.catalogue-tools{
  grid-template-columns:1.4fr 1fr 1fr;
  gap:15px}
.search-field{
  padding-inline:12px}
.search-field input{
  font-size:1rem}
.tool-select select{
  font-size:1rem;
  padding-left:10px}
.catalogue-status>span{
  font-size:0.6875rem}
.product-detail{
  gap:35px}
.product-information h1{
  font-size:31px}
.product-stage{
  min-height:390px;
  padding-inline:25px}
.product-stage>img{
  height:300px}
.product-summary{
  font-size:1rem}
.quote-info{
  margin-top:20px;
  padding-block:18px}
.quote-info p{
  font-size:1.0625rem}
.product-actions .button{
  font-size:0.9375rem;
  padding-inline:18px;
  gap:15px}
.product-notes{
  font-size:0.875rem}
.detail-information{
  gap:45px}
.specification-copy>p{
  font-size:1.0625rem}
.spec-table table{
  font-size:0.875rem}
.quote-page{
  gap:30px}
.request-panel{
  padding:24px}
.form-pair{
  grid-template-columns:1fr;
  gap:0}
.quote-row{
  gap:15px}
.quote-row-image{
  width:75px;
  height:75px;
  padding:10px}
.quote-row-title{
  font-size:1rem}
.qty-button{
  width:31px;
  height:35px}
.row-quantity{
  width:35px;
  height:35px}
.quantity-label{
  height:35px}
.remove-item{
  font-size:0.6875rem;
  padding-left:12px;
  min-height:35px}
.quote-page-heading{
  align-items:start;
  gap:12px}
.quote-page-heading h2{
  font-size:26px}
.quote-page-heading .text-link{
  font-size:0.9375rem;
  gap:10px}
.quote-page-heading .text-link svg{
  width:16px}
.contact-grid article{
  padding:32px}
.contact-grid h2{
  font-size:29px}
.contact-grid article>a{
  font-size:1rem;
  gap:12px}
.contact-grid article>a svg{
  width:18px}
.contact-callout{
  gap:50px}
}

@media(max-width:650px){
  html{
  scroll-padding-top:90px}
.container{
  width:calc(100% - 40px)}
.topbar{
  font-size:0.6875rem;
  padding:7px 0}
.topbar .container>span{
  font-size:0.6875rem}
.topbar a{
  font-size:0.6875rem;
  gap:6px}
.topbar svg{
  width:10px;
  height:10px}
.header-inner{
  height:72px;
  gap:15px}
.brand img{
  width:29px}
.brand>span{
  font-size:18px}
.brand small{
  font-size:4.4px;
  letter-spacing:1.05px;
  margin-top:7px}
.brand{
  gap:8px}
.quote-label{
  display:none}
.quote-link{
  gap:7px}
.quote-link>svg{
  width:21px}
.quote-count{
  width:22px;
  height:22px;
  font-size:0.75rem}
.header-actions{
  gap:11px}
.enhanced .menu-toggle{
  width:33px;
  padding:6px}
.menu-toggle>span{
  width:19px}
.enhanced #shop-nav{
  top:71px;
  padding-inline:24px}
.shop-hero{
  display:flex;
  flex-direction:column;
  gap:35px;
  padding-block:40px}
.hero-copy{
  width:100%}
.hero-copy .eyebrow{
  font-size:0.6875rem}
.hero-copy h1{
  font-size:58px;
  line-height:1.06;
  margin:21px 0 23px}
.hero-copy h1 br:last-child{
  display:initial}
.hero-copy>p{
  font-size:1.0625rem;
  line-height:1.9;
  max-width:410px}
.hero-copy .button-row{
  gap:20px;
  margin-top:25px}
.hero-copy .button{
  font-size:0.9375rem;
  gap:18px;
  padding-inline:18px}
.hero-copy .text-link{
  font-size:0.9375rem;
  gap:15px}
.hero-footnote{
  font-size:0.6875rem;
  margin-top:23px}
.hero-products{
  width:100%;
  height:360px}
.hero-laptop{
  width:64%;
  left:15px;
  top:65px;
  padding-top:14px}
.hero-laptop img{
  height:155px}
.hero-printer{
  width:42%;
  right:15px;
  bottom:42px}
.hero-printer img{
  height:145px}
.hero-wifi{
  width:32%;
  left:25px;
  bottom:20px;
  padding:8px 8px 0}
.hero-wifi img{
  height:96px}
.hero-product>span{
  font-size:0.6875rem}
.hero-caption{
  font-size:0.6875rem;
  top:21px;
  left:22px}
.hero-shop-label{
  font-size:0.625rem;
  right:17px;
  bottom:14px}
.hero-orbit{
  width:290px;
  height:290px;
  top:50px;
  left:40px}
.trust-strip{
  grid-template-columns:1fr 1fr;
  gap:22px;
  padding-block:25px}
.trust-strip>span{
  font-size:0.6875rem}
.trust-strip strong{
  font-size:0.875rem}
.section{
  padding-block:55px}
.section-tight{
  padding-top:0}
.section-heading{
  display:block;
  margin-bottom:30px}
.section-heading h2{
  font-size:37px;
  margin-top:16px}
.section-heading>p{
  font-size:1.0625rem;
  margin-top:23px;
  line-height:1.9}
.section-heading>p br{
  display:none}
.section-heading>.text-link{
  margin-top:20px;
  font-size:0.9375rem}
.eyebrow{
  font-size:0.6875rem}
.category-grid{
  grid-template-columns:1fr 1fr;
  gap:12px}
.category-card{
  min-height:165px;
  padding:20px}
.category-card>svg{
  width:29px;
  height:29px;
  margin-bottom:22px}
.category-card h3{
  font-size:1.0625rem;
  margin-bottom:14px}
.category-card>span{
  font-size:0.6875rem}
.category-card:last-child{
  grid-column:1/-1;
  min-height:125px;
  display:grid;
  grid-template-columns:45px 1fr;
  align-items:center;
  gap:8px 10px}
.category-card:last-child>svg{
  grid-row:span 2;
  margin:0}
.category-card:last-child h3{
  margin:0}
.category-card:last-child>span{
  max-width:200px}
.product-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px}
.card-image{
  padding:14px;
  aspect-ratio:1}
.card-image img{
  max-height:150px}
.image-arrow{
  bottom:9px;
  right:9px;
  width:24px;
  height:24px}
.image-arrow svg{
  width:12px;
  height:12px}
.card-copy{
  padding:15px 13px}
.card-category{
  font-size:0.6875rem;
  margin-bottom:9px;
  letter-spacing:.11em}
.card-copy h3{
  font-size:1.125rem;
  line-height:1.55;
  letter-spacing:-.015em}
.card-bottom{
  gap:5px;
  padding-top:18px;
  align-items:center}
.quote-prompt{
  font-size:0.875rem;
  line-height:1.65;
  max-width:80px}
.add-button{
  width:34px;
  height:34px;
  font-size:20px}
.sharp-feature{
  padding-block:45px}
.sharp-feature>.container{
  display:flex;
  flex-direction:column;
  gap:35px;
  align-items:stretch}
.sharp-visual{
  min-height:290px;
  padding:15px}
.sharp-visual>span{
  font-size:23px;
  top:21px;
  left:24px}
.sharp-visual>img{
  height:260px;
  margin-top:25px}
.sharp-feature h2{
  font-size:38px;
  margin:18px 0 23px}
.sharp-feature p{
  font-size:1.0625rem;
  line-height:1.9}
.sharp-feature .eyebrow{
  font-size:0.6875rem}
.sharp-feature .button{
  font-size:0.9375rem}
.steps{
  grid-template-columns:1fr;
  gap:30px;
  padding-top:0}
.steps article{
  padding-top:22px}
.steps article>span{
  font-size:23px}
.steps h3{
  font-size:26px;
  margin:18px 0 17px}
.steps p{
  font-size:1.0625rem}
.help-band{
  padding-block:50px}
.help-band>.container{
  display:block}
.help-band h2{
  font-size:37px;
  margin-top:18px}
.help-band>.container>div:last-child{
  margin-top:25px}
.help-band p{
  font-size:1.0625rem;
  margin-bottom:25px}
.help-band .button{
  font-size:0.9375rem}
footer{
  padding-top:40px}
.footer-grid{
  grid-template-columns:1fr 1fr;
  gap:35px 24px;
  padding-bottom:30px}
.footer-grid>div:first-child{
  grid-column:1/-1}
.footer-grid>div:first-child>p{
  margin-top:20px;
  font-size:1.0625rem}
.footer-grid .brand img{
  width:31px}
.footer-grid .brand>span{
  font-size:20px}
.footer-grid .brand small{
  font-size:5px;
  letter-spacing:1.1px}
.footer-grid .back-company{
  margin-top:5px}
.footer-grid h2{
  font-size:0.6875rem;
  margin-bottom:15px}
.footer-grid>div>a:not(.brand){
  font-size:0.875rem;
  min-height:38px;
  line-height:1.8;
  overflow-wrap:anywhere}
.footer-grid>div>span{
  font-size:0.6875rem;
  line-height:1.9}
.footer-bottom{
  flex-wrap:wrap;
  gap:14px 20px;
  font-size:0.875rem}
.footer-bottom>span:nth-child(2){
  order:3;
  flex-basis:100%}
.footer-bottom>a{
  margin-left:auto}
.page-intro{
  padding-block:42px 35px}
.page-intro h1{
  font-size:44px;
  margin:20px 0 24px;
  line-height:1.14}
.page-intro>p{
  font-size:1.0625rem;
  line-height:1.9}
.catalogue-section{
  padding-bottom:55px}
.catalogue-tools{
  grid-template-columns:1fr 1fr;
  gap:17px 12px;
  padding-block:22px}
.search-field{
  grid-column:1/-1;
  padding-inline:13px;
  min-height:49px}
.search-field input{
  font-size:1rem;
  min-height:48px}
.search-field input::placeholder{
  font-size:1rem}
.tool-select label{
  font-size:1rem;
  margin-bottom:8px}
.tool-select select{
  font-size:1rem;
  min-height:47px;
  padding:11px 25px 11px 9px}
.catalogue-status{
  gap:15px;
  padding-block:18px;
  font-size:0.875rem;
  flex-wrap:wrap}
.catalogue-status>span{
  display:none}
.catalogue-status .text-link{
  margin-left:auto;
  font-size:0.9375rem}
.breadcrumbs{
  font-size:0.6875rem;
  padding-top:23px;
  gap:10px}
.product-detail{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:30px;
  padding-block:25px 40px}
.product-stage{
  min-height:330px;
  padding:35px 25px}
.product-stage>img{
  height:260px}
.stage-caption{
  bottom:18px;
  font-size:0.6875rem}
.product-information .eyebrow{
  font-size:0.6875rem}
.product-information h1{
  font-size:34px;
  margin:18px 0 23px;
  line-height:1.25}
.product-summary{
  font-size:1.0625rem;
  line-height:1.9}
.quote-info{
  margin-top:22px;
  padding-block:20px}
.quote-info strong{
  font-size:1.0625rem}
.quote-info p{
  font-size:1.0625rem}
.product-actions{
  gap:12px;
  margin-top:25px;
  align-items:end}
.quantity-input label{
  font-size:1rem}
.quantity-input input{
  font-size:1rem;
  width:68px;
  min-height:52px}
.product-actions>.button{
  font-size:0.9375rem;
  padding-inline:18px;
  gap:18px}
.product-information>.text-link{
  font-size:0.9375rem;
  margin-top:16px}
.product-notes{
  font-size:0.875rem;
  margin-top:23px;
  gap:8px}
.detail-information{
  display:block}
.detail-information h2{
  font-size:37px;
  margin:18px 0 28px}
.specification-copy>p{
  font-size:1.0625rem;
  line-height:1.9}
.spec-table table{
  font-size:0.875rem;
  line-height:1.85}
.spec-table caption{
  font-size:1.0625rem}
.spec-table th,.spec-table td{
  padding-block:13px;
  line-height:1.85}
.specification-copy .small-text{
  font-size:0.875rem}
.quote-page{
  display:flex;
  flex-direction:column;
  gap:35px;
  padding:10px 0 55px}
.quote-page>div{
  width:100%}
.quote-page-heading{
  align-items:center;
  gap:15px}
.quote-page-heading h2{
  font-size:28px}
.quote-page-heading .text-link{
  font-size:0.9375rem;
  gap:10px}
.quote-row{
  gap:15px;
  padding-block:20px}
.quote-row-image{
  width:74px;
  height:80px;
  padding:10px}
.quote-row-title{
  font-size:1rem;
  margin-bottom:13px}
.qty-button{
  width:33px;
  height:38px}
.row-quantity{
  width:37px;
  height:38px;
  font-size:1.0625rem}
.quantity-label{
  height:38px}
.remove-item{
  font-size:0.6875rem;
  min-height:38px;
  padding-left:12px}
.quote-empty-panel{
  padding:35px 20px;
  margin-top:20px}
.quote-empty-panel h3{
  font-size:28px}
.quote-empty-panel p{
  font-size:1.0625rem}
.quote-empty-panel .button{
  font-size:0.9375rem}
.quote-note{
  font-size:0.875rem;
  line-height:1.85}
.request-panel{
  padding:25px 21px}
.request-panel .eyebrow{
  font-size:0.6875rem}
.request-panel h2{
  font-size:32px;
  margin-top:17px}
.request-panel>div>p{
  font-size:1.0625rem}
.request-panel input,.request-panel textarea{
  font-size:1rem;
  min-height:49px;
  margin-bottom:21px}
form label,.draft-panel label{
  font-size:0.875rem}
.request-panel .small-text{
  font-size:0.875rem}
.request-panel .button{
  font-size:0.9375rem;
  min-height:51px;
  width:100%;
  gap:17px}
.form-pair{
  grid-template-columns:1fr;
  gap:0}
.draft-panel h3{
  font-size:27px}
.draft-panel>.textarea,.request-panel .draft-panel>textarea{
  font-size:1rem}
.draft-panel .button-row{
  gap:12px}
.draft-panel>.text-link{
  font-size:0.9375rem}
.draft-panel>p{
  font-size:1.0625rem}
.contact-grid{
  grid-template-columns:1fr;
  gap:17px;
  padding-top:0}
.contact-grid article{
  padding:28px}
.contact-grid article>span{
  font-size:0.6875rem}
.contact-grid h2{
  font-size:29px;
  margin:25px 0 20px}
.contact-grid article>a{
  font-size:1.0625rem;
  gap:13px}
.contact-grid article>p{
  font-size:1.0625rem;
  line-height:1.9}
.contact-callout{
  display:block;
  padding-block:30px}
.contact-callout h2{
  font-size:37px;
  margin:18px 0 26px}
.contact-callout p{
  font-size:1.0625rem}
.contact-callout .button{
  font-size:0.9375rem}
.prose{
  padding:0 0 50px}
.prose h2{
  font-size:25px}
.prose p{
  font-size:1.0625rem}
.toast{
  bottom:12px;
  width:calc(100% - 24px);
  padding:13px 14px;
  gap:12px;
  flex-wrap:wrap}
.toast>span{
  font-size:0.875rem;
  flex-basis:calc(100% - 35px);
  order:1}
.toast>a{
  font-size:0.875rem;
  order:3;
  min-height:32px}
.toast>button{
  order:2;
  min-width:22px;
  min-height:32px}
.toast>a svg{
  width:16px}
dialog{
  padding:23px;
  max-height:90dvh}
.dialog-heading{
  padding-bottom:20px}
.dialog-heading h2{
  font-size:30px}
.dialog-heading .icon-button{
  margin:-3px -7px 0 0}
.dialog-footer p{
  font-size:1.0625rem}
.dialog-footer .button{
  font-size:0.9375rem}
.empty-state{
  padding:40px 10px}
.empty-state h2{
  font-size:31px}
.empty-state h3{
  font-size:27px}
.empty-state p{
  font-size:1.0625rem}
.error-actions{
  padding-bottom:55px;
  gap:15px;
  flex-direction:column;
  align-items:start}
}

@media(max-width:365px){
  .container{
  width:calc(100% - 32px)}
.topbar .container>span{
  font-size:0.6875rem}
.topbar a{
  font-size:0.6875rem}
.brand>span{
  font-size:1.0625rem}
.brand img{
  width:27px}
.brand small{
  font-size:3.9px;
  letter-spacing:.85px}
.header-inner{
  gap:12px}
.header-actions{
  gap:7px}
.quote-link{
  gap:6px}
.quote-count{
  width:20px;
  height:20px}
.quote-link>svg{
  width:19px}
.enhanced .menu-toggle{
  width:29px}
.hero-copy h1{
  font-size:50px}
.hero-copy .button-row{
  gap:15px}
.hero-copy .button{
  font-size:0.9375rem;
  padding-inline:16px;
  gap:14px}
.hero-copy .text-link{
  font-size:0.9375rem;
  gap:10px}
.hero-products{
  height:325px}
.hero-laptop{
  top:65px;
  width:67%;
  left:12px}
.hero-laptop img{
  height:132px}
.hero-printer{
  right:12px;
  bottom:42px;
  width:43%}
.hero-printer img{
  height:127px}
.hero-wifi{
  left:18px;
  bottom:20px;
  width:33%}
.hero-wifi img{
  height:82px}
.hero-product>span{
  font-size:0.6875rem}
.category-card{
  padding:18px 16px}
.category-card h3{
  font-size:1.0625rem}
.category-card>span{
  font-size:0.6875rem}
.product-grid{
  gap:10px}
.card-copy{
  padding:13px 11px}
.card-copy h3{
  font-size:1.125rem}
.card-bottom{
  gap:5px;
  flex-wrap:wrap}
.quote-prompt{
  font-size:0.875rem;
  max-width:none;
  min-height:30px}
.add-button{
  width:31px;
  height:31px;
  margin-left:auto}
.card-image{
  padding:13px}
.card-category{
  font-size:0.6875rem}
.section-heading h2,.help-band h2,.sharp-feature h2{
  font-size:34px}
.page-intro h1{
  font-size:38px}
.footer-grid{
  gap:30px 20px}
.footer-grid>div>a:not(.brand){
  font-size:0.6875rem}
.product-information h1{
  font-size:30px}
.product-stage{
  min-height:290px}
.product-stage>img{
  height:225px}
.product-actions{
  gap:10px}
.product-actions .button{
  font-size:0.9375rem;
  padding-inline:15px;
  gap:12px}
.quantity-input input{
  width:62px}
.quote-row{
  gap:11px}
.quote-row-image{
  width:60px;
  height:70px}
.quote-row-title{
  font-size:1rem}
.qty-button{
  width:29px}
.row-quantity{
  width:33px}
.remove-item{
  font-size:0.6875rem;
  padding-left:9px}
.quote-page-heading h2{
  font-size:25px}
.quote-page-heading .text-link{
  font-size:0.9375rem}
.request-panel{
  padding:23px 18px}
.request-panel .button{
  font-size:0.9375rem;
  gap:12px}
.contact-grid article{
  padding:25px}
.contact-grid article>a{
  font-size:0.875rem}
.contact-grid h2{
  font-size:27px}
.dialog-heading h2{
  font-size:27px}
dialog{
  padding:20px}
}

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

@media print{
  .topbar,.site-header,.help-band,footer,.product-actions,.js-only,dialog,.toast,.request-panel{
  display:none!important}
.container{
  width:95%}
body{
  background:white}
.section{
  padding-block:25px}
.product-card,.quote-row{
  break-inside:avoid}
.product-detail{
  gap:30px}
.product-information h1{
  font-size:30px}
}


/* Keep compact controls easy to use by touch. */
.shop-hero>*,.section-heading>*,.product-detail>*,.detail-information>*,.quote-page>*,.footer-grid>*{
  min-width:0}
.hero-copy>p,.section-heading>p,.steps p,.product-summary,.specification-copy>p,.prose p{
  line-height:1.75}
.topbar a{
  min-height:28px}
.trust-strip strong{
  font-size:1rem}
.trust-strip>span{
  font-size:0.875rem}
.footer-grid h2{
  font-size:0.875rem}
.hero-product>span{
  text-align:center;
  line-height:1.5;
  order:-1;
  max-width:100%;
  padding:0 8px 10px}
.hero-copy>p{
  max-width:46ch}
.card-copy h3{
  line-height:1.5}
.card-bottom{
  flex-wrap:wrap}
.quote-prompt{
  max-width:none}
.quote-row-controls .remove-item{
  font-size:0.875rem}
.quote-page-heading{
  flex-wrap:wrap}
.quote-label{
  font-size:0.875rem}
.topbar,.hero-footnote{
  font-size:0.75rem}
.search-field input,.tool-select select,.request-panel input,.request-panel textarea,.draft-panel>textarea{
  font-size:1rem}
.request-panel input::placeholder,.request-panel textarea::placeholder{
  font-size:1rem}
.spec-table table{
  font-size:0.9375rem}
.product-information>.text-link,.product-actions>.button,.request-panel .button,.draft-panel .button,.dialog-footer .button{
  font-size:0.9375rem}
.dialog-footer{
  position:sticky;
  bottom:-28px;
  background:var(--paper);
  padding-bottom:12px}
.toast>span,.toast>a{
  font-size:0.875rem}
.toast>button{
  min-width:44px;
  min-height:44px}

@media(max-width:1100px){
  .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:900px){
  .product-detail,.detail-information,.quote-page{
    grid-template-columns:1fr;
    gap:36px}
  .product-stage{
    min-height:380px}
  .request-panel{
    padding:32px}
  .quote-row-image{
    width:90px;
    height:90px}
  .spec-table table{
    font-size:0.9375rem}
}

@media(max-width:650px){
  body{
    font-size:1rem}
  .hero-copy>p,.section-heading>p,.steps p,.product-summary,.specification-copy>p,.prose p{
    font-size:1rem}
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar .container{
    align-items:center}
  .topbar .container>span,.topbar a{
    font-size:0.6875rem}
  .topbar .container>span{
    max-width:22ch}
  .header-actions{
    gap:10px}
  .enhanced .menu-toggle{
    width:44px}
  .quote-link{
    min-width:44px}
  .hero-copy .button-row{
    gap:12px 20px}
  .request-panel{
    padding:24px}
  .contact-grid article>a{
    font-size:1rem}
  .dialog-footer{
    bottom:-22px}
  .toast{
    gap:10px;
    padding:14px;
    flex-wrap:wrap}
  .toast>span{
    flex-basis:calc(100% - 64px)}
  .toast>a{
    order:3}
}

@media(max-width:480px){
  .product-grid{
    grid-template-columns:1fr}
  .card-image{
    aspect-ratio:1.4;
    padding:24px}
  .card-image img{
    max-height:220px}
  .card-copy{
    padding:22px}
  .card-bottom{
    justify-content:space-between}
  .hero-products{
    height:380px}
  .hero-product>span{
    font-size:0.6875rem}
  .hero-footnote{
    font-size:0.75rem}
  .quote-row{
    align-items:start;
    gap:14px}
  .quote-row-image{
    width:64px;
    height:72px}
  .quote-row-controls .remove-item{
    padding-left:12px}
}

.add-button{
  width:44px;
  height:44px}

.quote-count{
  min-width:23px;
  width:auto;
  padding-inline:5px}

.quote-row-controls{
  flex-wrap:wrap;
  row-gap:9px}

.qty-button{
  width:44px;
  height:44px}

.row-quantity{
  width:42px;
  height:44px}

.quantity-label{
  height:44px}

.remove-item{
  min-height:44px}

@media(max-width:900px){
  html:not(.enhanced) .header-inner{
  height:auto;
  min-height:76px;
  flex-wrap:wrap}
html:not(.enhanced) #shop-nav{
  position:static;
  flex-basis:100%;
  order:3;
  padding:0 0 18px;
  box-shadow:none;
  border-bottom:0}
}

@media(max-width:650px){
  .card-bottom{
  flex-wrap:wrap}
.add-button{
  width:44px;
  height:44px;
  font-size:22px}
.qty-button{
  width:44px;
  height:44px}
.row-quantity{
  width:42px;
  height:44px}
.quantity-label{
  height:44px}
.remove-item{
  min-height:44px}
.quote-count{
  min-width:22px;
  width:auto}
}