:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f5f6f8;
  --border: #e4e6ea;
  --border-strong: #c9cdd4;
  --text-primary: #12141a;
  --text-secondary: #565b66;
  --text-muted: #8b8f99;
  --navy: #0e1f4d;
  --navy-deep: #05183b;
  --accent: #0e1f4d;
  --accent-bright: #1c3f9e;
  --accent-dim: #e9edf7;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
}
h1,h2,h3{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.01em; }

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:50;
  background:var(--navy-deep);
  border-bottom:1px solid rgba(255,255,255,0.1);
  overflow:hidden;
}
header::before{
  content:''; position:absolute; top:0; right:-8%; bottom:0; width:38%;
  background:var(--accent-bright); opacity:0.22;
  clip-path:polygon(38% 0, 100% 0, 68% 100%, 0 100%);
  z-index:0;
}
header .wrap.nav{ position:relative; z-index:1; }
.nav{ display:flex; align-items:stretch; height:88px; gap:24px; }
.logo-link{
  display:flex; align-items:center; flex-shrink:0;
  background:var(--accent-bright);
  clip-path:polygon(0 0, 100% 0, 76% 100%, 0 100%);
  margin-left:-40px; padding:0 48px 0 40px;
}
.logo-link img{ height:78px; width:auto; display:block; }
.nav .links{ display:flex; flex:1; justify-content:center; align-items:center; gap:5px; flex-wrap:nowrap; }
.nav-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; padding-left:16px; border-left:1px solid rgba(255,255,255,0.18); }
.nav .links a{
  font-size:9.5px; font-weight:700; letter-spacing:0.01em; text-transform:uppercase;
  color:var(--accent-bright); background:#ffffff;
  white-space:nowrap;
  padding:7px 10px; border-radius:4px;
  transition:background 0.15s, color 0.15s, transform 0.15s;
}
.nav .links a:hover{ background:var(--accent-bright); color:#ffffff; transform:translateY(-1px); }
.nav .links a.active{ background:var(--accent-bright); color:#ffffff; }
.btn{
  font-family:var(--font-body);
  font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  padding:12px 22px;
  border-radius:2px;
  border:1px solid var(--border-strong);
  display:inline-block;
  transition:all 0.15s;
  flex-shrink:0;
}
.btn-primary{
  background:var(--accent);
  color:#ffffff;
  border-color:var(--accent);
}
.btn-primary:hover{ background:var(--accent-bright); border-color:var(--accent-bright); }
.btn-ghost{ border-color:var(--border-strong); color:var(--text-primary); }
.btn-ghost:hover{ border-color:var(--text-primary); }
.nav-cta{ background:#ffffff; color:var(--accent-bright); border-color:#ffffff; }
.nav-cta:hover{ background:var(--navy-deep); color:#ffffff; border-color:var(--navy-deep); }
.nav-cta.request-help-btn{ background:transparent; color:#ffffff; border-color:rgba(255,255,255,0.5); }
.nav-cta.request-help-btn:hover{ background:rgba(255,255,255,0.12); color:#ffffff; border-color:#ffffff; }

.lang-toggle{
  display:flex; align-items:center; gap:2px; flex-shrink:0;
}
.lang-btn{
  font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.03em;
  background:none; border:none; padding:6px 9px;
  color:rgba(255,255,255,0.55); cursor:pointer; transition:color 0.15s;
}
.lang-btn:hover{ color:#ffffff; }
.lang-btn.active{ color:#ffffff; text-decoration:underline; text-underline-offset:3px; }

.menu-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,0.3); border-radius:2px;
  width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  color:#ffffff;
}
.menu-toggle svg{ display:block; }
.mobile-menu{
  display:none; flex-direction:column; gap:8px;
  border-bottom:1px solid rgba(255,255,255,0.1); background:var(--navy-deep);
  padding:12px 40px 22px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  padding:12px 16px; font-size:13px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--accent-bright); background:#ffffff; border-radius:5px;
}
.mobile-menu a.active{ background:var(--accent-bright); color:#ffffff; }
.mobile-menu a.mobile-cta{
  background:var(--accent-bright); color:#ffffff; text-align:center; margin-top:6px;
}
.mobile-menu a.mobile-cta.request-help-btn{
  background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,0.4); margin-top:0;
}

/* ===== Section shared ===== */
section{ padding:110px 0; border-top:1px solid var(--border); }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{ font-size:38px; line-height:1.15; margin-top:16px; }
.section-head p{ color:var(--text-secondary); margin-top:16px; font-size:16px; max-width:520px; }

/* ===== Simple page hero (stub / content pages) ===== */
.page-hero{ padding:100px 0 80px; border-top:none; position:relative; overflow:hidden; }
.page-hero h1{ font-size:48px; line-height:1.1; margin:18px 0 20px; }
.page-hero p{ color:var(--text-secondary); max-width:600px; font-size:17px; }

.coming-soon{
  border-top:1px solid var(--border);
  padding-top:32px; text-align:left; max-width:640px;
}
.coming-soon .eyebrow{ display:block; margin-bottom:12px; }
.coming-soon h3{ font-size:20px; margin-bottom:10px; font-weight:500; }
.coming-soon p{ color:var(--text-secondary); font-size:15px; }

.prints-list{ list-style:none; margin-top:16px; }
.prints-list li{
  font-size:15px; color:var(--text-primary); padding:14px 0; border-top:1px solid var(--border);
  padding-left:20px; position:relative;
}
.prints-list li:first-child{ border-top:none; }
.prints-list li::before{ content:'—'; position:absolute; left:0; color:var(--accent-bright); }
.quote-callout{
  margin-top:44px; padding-top:28px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.quote-callout strong{ font-size:16px; font-weight:600; }

.how-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.how-steps-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.how-step{ border-top:1px solid var(--border); padding-top:24px; }
.how-num{ font-size:13px; color:var(--accent-bright); font-weight:600; margin-bottom:16px; display:block; }
.how-step h3{ font-size:17px; margin-bottom:10px; }
.how-step p{ font-size:14px; color:var(--text-secondary); }
@media (max-width:860px){ .how-steps, .how-steps-3{ grid-template-columns:1fr; } }

.contact-box{
  border-top:1px solid var(--border); padding-top:48px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
}
.contact-box h2{ font-size:32px; margin-bottom:14px; }
.contact-box p{ color:var(--text-secondary); font-size:15px; max-width:420px; }
.contact-links{ display:flex; flex-direction:column; gap:10px; text-align:right; }
.contact-links a{ font-size:14px; color:var(--text-secondary); }
.contact-links a:hover{ color:var(--accent); }

footer{ border-top:1px solid var(--border); padding:36px 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-muted); letter-spacing:0.03em; flex-wrap:wrap; gap:12px; }

/* ===== Dynamic color-block section ===== */
.block-navy{
  background:var(--navy-deep); color:#ffffff; border-top:none;
  position:relative; overflow:hidden;
}
.block-navy::before{
  content:''; position:absolute; top:0; right:-10%; bottom:0; width:45%;
  background:var(--accent-bright); opacity:0.35;
  clip-path:polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}
.block-navy .eyebrow{ color:#9db4ff; }
.block-navy h2, .block-navy h3{ color:#ffffff; }
.block-navy p{ color:#c3c9db; }
.block-navy .process-step{ border-top-color:rgba(255,255,255,0.18); position:relative; z-index:1; }
.block-navy .process-num{ color:#9db4ff; }
.block-navy .process-step p{ color:#c3c9db; }

/* ===== Add-to-cart controls ===== */
.add-cart-btn{
  font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--accent-bright); background:none; border:1px solid var(--border-strong); border-radius:2px;
  padding:9px 16px; cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:6px;
}
.add-cart-btn:hover{ border-color:var(--accent-bright); background:var(--accent-dim); }
.add-cart-btn.added{ border-color:var(--accent-bright); background:var(--accent-bright); color:#fff; }

.cart-btn{
  position:relative; background:none; border:1px solid rgba(255,255,255,0.3); border-radius:2px;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  color:#ffffff;
}
.cart-btn .cart-badge{
  position:absolute; top:-6px; right:-6px; background:var(--accent-bright); color:#fff;
  font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.cart-badge.hidden{ display:none; }

.cart-overlay{
  display:none; position:fixed; inset:0; background:rgba(10,15,30,0.4); z-index:90;
}
.cart-overlay.open{ display:block; }
.cart-drawer{
  position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100%; background:#fff;
  z-index:91; box-shadow:-8px 0 30px rgba(0,0,0,0.15); transition:right 0.25s ease; display:flex; flex-direction:column;
}
.cart-drawer.open{ right:0; }
.cart-head{ padding:24px 28px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.cart-head h3{ font-size:16px; font-weight:600; }
.cart-close{ background:none; border:none; cursor:pointer; font-size:20px; color:var(--text-secondary); line-height:1; }
.cart-items{ flex:1; overflow-y:auto; padding:12px 28px; }
.cart-item{ padding:16px 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.cart-item:first-child{ border-top:none; }
.cart-item-name{ font-size:14px; font-weight:500; }
.cart-item-sub{ font-size:12px; color:var(--text-muted); margin-top:6px; display:flex; align-items:center; gap:8px; }
.qty-controls{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--border-strong); border-radius:3px; }
.qty-btn{ background:none; border:none; width:22px; height:22px; cursor:pointer; font-size:13px; color:var(--text-primary); }
.qty-btn:hover{ background:var(--surface-raised); }
.qty-val{ font-size:12px; min-width:18px; text-align:center; display:inline-block; }
.cart-item-right{ text-align:right; flex-shrink:0; }
.cart-item-linetotal{ font-size:13px; font-weight:600; margin-bottom:6px; }
.cart-item-remove{ background:none; border:none; color:var(--text-muted); font-size:11px; cursor:pointer; text-decoration:underline; }
.cart-empty{ padding:40px 0; text-align:center; color:var(--text-muted); font-size:13px; }

.cart-totals{ padding:16px 28px; border-top:1px solid var(--border); background:var(--surface-raised); }
.cart-promo{ display:flex; gap:8px; margin-bottom:8px; }
.promo-input{
  flex:1; font-family:var(--font-body); font-size:12px; padding:9px 10px;
  border:1px solid var(--border-strong); border-radius:3px; background:#fff; color:var(--text-primary);
}
.promo-apply-btn{
  font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  background:var(--navy); color:#fff; border:none; border-radius:3px; padding:0 14px; cursor:pointer;
}
.promo-apply-btn:hover{ background:var(--accent-bright); }
.promo-msg{ font-size:11px; margin-bottom:8px; min-height:14px; }
.promo-msg.ok{ color:#1a7f4b; }
.promo-msg.error{ color:#c0392b; }
.cart-totals-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-secondary); padding:4px 0; }
.cart-totals-final{ font-size:15px; font-weight:600; color:var(--text-primary); border-top:1px solid var(--border); margin-top:6px; padding-top:10px; }

.cart-foot{ padding:24px 28px; border-top:1px solid var(--border); }
.cart-foot p{ font-size:12px; color:var(--text-muted); margin-bottom:14px; }
.cart-foot .btn{ width:100%; text-align:center; }
.cart-foot-actions{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }

.order-result{ margin-top:16px; padding:14px; background:var(--accent-dim); border-radius:5px; }
.order-result-label{ font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--navy); margin-bottom:8px; }
.order-code-row{ display:flex; align-items:center; gap:8px; }
.order-code-row code{
  flex:1; font-family:var(--font-mono); font-size:12px; background:#fff; border:1px solid var(--border-strong);
  border-radius:3px; padding:8px 10px; word-break:break-all;
}
.order-code-row button{
  font-family:var(--font-body); font-size:11px; font-weight:600; text-transform:uppercase;
  background:var(--navy); color:#fff; border:none; border-radius:3px; padding:8px 12px; cursor:pointer; flex-shrink:0;
}
.order-result-note{ font-size:11px; color:var(--text-secondary); margin-top:10px; margin-bottom:0; }

.decode-toggle{
  display:block; width:100%; text-align:left; background:none; border:none; padding:10px 0 0;
  font-size:12px; color:var(--text-muted); text-decoration:underline; cursor:pointer;
}
.decode-panel{ display:none; margin-top:12px; gap:8px; flex-direction:column; }
.decode-panel.open{ display:flex; }
.decode-output{ font-size:12px; color:var(--text-secondary); }
.decode-list{ list-style:none; padding:0; margin:8px 0; }
.decode-list li{ padding:4px 0; border-top:1px solid var(--border); font-size:12px; }
.decode-list li:first-child{ border-top:none; }
.decode-meta{ font-size:11px; color:var(--text-muted); margin-top:4px; }

@media (max-width:900px){
  .nav .links{ display:none; }
  .menu-toggle{ display:flex; }
  .nav-cta.request-help-btn{ display:none; }
  .page-hero h1{ font-size:34px; }
  .section-head h2{ font-size:28px; }
  .block-navy::before{ display:none; }
  .contact-box{ flex-direction:column; align-items:flex-start; }
  .contact-links{ text-align:left; }
}

@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .nav{ height:72px; gap:8px; }
  .logo-link{ margin-left:-20px; padding:0 24px 0 20px; }
  .logo-link img{ height:52px; }
  .nav-right{ gap:6px; padding-left:8px; }
  .nav-cta{ display:none; }
  .lang-btn{ padding:6px 6px; font-size:11px; }
  .cart-btn, .menu-toggle{ width:34px; height:34px; }
  .mobile-menu{ padding:12px 20px 20px; }

  section{ padding:64px 0; }
  .page-hero{ padding:52px 0 40px; }
  .page-hero h1{ font-size:28px; }
  .section-head{ margin-bottom:40px; }
  .section-head h2{ font-size:24px; }
  .section-head p{ font-size:15px; }

  .cart-drawer{ width:100%; max-width:100%; right:-100%; }
  .cart-head, .cart-items, .cart-totals, .cart-foot{ padding-left:20px; padding-right:20px; }

  .contact-box{ padding-top:36px; }
  .contact-box h2{ font-size:26px; }
  .contact-links{ text-align:left; }
}