/* ==========================================================================
   3DPrintIt — shared design system
   Preview stylesheet. Becomes the theme's style.css on build.
   ========================================================================== */

:root{
  --bg:#0c0c0d;
  --bg-2:#131315;
  --panel:#17171a;
  --orange:#e85d2c;
  --orange-soft:#f07a4e;
  --orange-deep:#8f3416;
  --text:#e6e4e0;
  --text-dim:#918d87;
  --border:#26262a;
  --radius:14px;
  --maxw:1140px;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-0.02em;}
a{color:var(--orange);}
img{max-width:100%;display:block;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- header ---------- */
header.site{
  padding:20px 0;position:sticky;top:0;z-index:20;
  background:rgba(12,12,13,0.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:var(--text);text-decoration:none;letter-spacing:-0.03em;}
.logo b{color:var(--orange);}
nav.main{display:flex;gap:26px;flex-wrap:wrap;}
nav.main a{color:var(--text-dim);text-decoration:none;font-size:14px;font-weight:500;}
nav.main a:hover,nav.main a.active{color:var(--text);}
nav.main a.active{position:relative;}
nav.main a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--orange);border-radius:2px;}

/* ---------- hero ---------- */
.hero{
  padding:96px 0 76px;
  background:
    radial-gradient(900px 400px at 15% -10%, rgba(232,93,44,0.13), transparent 70%),
    linear-gradient(var(--bg), var(--bg-2));
}
.hero.compact{padding:64px 0 52px;}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--orange);
  border:1px solid var(--orange-deep);border-radius:100px;
  padding:6px 14px;margin-bottom:24px;
}
h1{font-size:54px;line-height:1.08;font-weight:700;margin-bottom:22px;max-width:780px;}
.hero.compact h1{font-size:42px;}
h1 span{color:var(--orange);}
.lede{color:var(--text-dim);font-size:17.5px;max-width:660px;margin-bottom:34px;}
.lede:last-child{margin-bottom:0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:8px;
  background:var(--orange);color:#140702;
  transition:background .15s,transform .15s;
}
.btn:hover{background:var(--orange-soft);transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border);}
.btn.ghost:hover{background:var(--panel);border-color:var(--orange-deep);}
.btn.sm{font-size:13.5px;padding:10px 18px;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- spec strip ---------- */
.specs{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-2);}
.specs .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:30px;padding-bottom:30px;}
.spec .k{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;font-weight:600;}
.spec .v{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:500;}
.spec .v small{color:var(--orange);font-size:13px;font-weight:500;}

/* ---------- sections ---------- */
section.block{padding:84px 0;}
section.block.alt{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
section.block.tight{padding:56px 0;}
.sec-head{margin-bottom:44px;max-width:700px;}
h2{font-size:34px;font-weight:700;margin-bottom:14px;}
h3{font-size:19px;}
.sec-head p{color:var(--text-dim);font-size:16.5px;}

.card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:30px;
  transition:border-color .2s,transform .2s;
}
.card:hover{border-color:var(--orange-deep);transform:translateY(-2px);}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;}

/* ---------- service cards ---------- */
.svc .badge{
  width:40px;height:40px;border-radius:10px;
  background:rgba(232,93,44,0.12);border:1px solid var(--orange-deep);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--orange);font-size:15px;
  margin-bottom:18px;
}
.svc h3{margin-bottom:10px;font-size:20px;}
.svc p{color:var(--text-dim);font-size:15px;margin-bottom:16px;}
.svc ul{list-style:none;font-size:14px;color:var(--text-dim);}
.svc li{padding:5px 0 5px 20px;position:relative;}
.svc li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:2px;background:var(--orange);border-radius:2px;}

/* ---------- media cards (builds / products) ---------- */
.media-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .2s;}
.media-card:hover{border-color:var(--orange-deep);transform:translateY(-2px);}
.media-card .shot{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);font-size:13px;text-align:center;padding:14px;
  background:linear-gradient(140deg, #1d1d21, #141416);
  border-bottom:1px solid var(--border);
}
.media-card .shot img{width:100%;height:100%;object-fit:cover;}
.media-card .meta{padding:22px;}
.media-card .cat{font-size:11.5px;color:var(--orange);letter-spacing:0.08em;text-transform:uppercase;font-weight:600;margin-bottom:9px;}
.media-card h3{font-size:18px;margin-bottom:8px;}
.media-card p{font-size:14px;color:var(--text-dim);margin-bottom:14px;}
.media-card p:last-child{margin-bottom:0;}

/* ---------- range / product cards ---------- */
.range-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:border-color .2s,transform .2s;}
.range-card:hover{border-color:var(--orange-deep);transform:translateY(-2px);}
.range-card h3{font-size:17px;margin-bottom:9px;}
.range-card p{font-size:14px;color:var(--text-dim);}
.rule{width:28px;height:3px;background:var(--orange);border-radius:3px;margin-bottom:16px;}

/* ---------- process steps ---------- */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s;}
.step{padding-top:26px;border-top:2px solid var(--border);position:relative;}
.step::before{
  counter-increment:s;content:"0" counter(s);
  position:absolute;top:-2px;left:0;padding-top:26px;
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--orange);
}
.step h3{font-size:19px;margin:28px 0 10px;}
.step p{color:var(--text-dim);font-size:15px;}

/* ---------- filters ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;}
.filter-btn{
  background:var(--panel);border:1px solid var(--border);color:var(--text-dim);
  font-family:inherit;font-size:14px;font-weight:500;
  padding:9px 18px;border-radius:100px;cursor:pointer;transition:all .15s;
}
.filter-btn:hover{border-color:var(--orange-deep);color:var(--text);}
.filter-btn.active{background:var(--orange);color:#140702;border-color:var(--orange);font-weight:600;}
.is-hidden{display:none !important;}

/* ---------- forms ---------- */
.form-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:34px;}
.field{margin-bottom:22px;}
.field:last-of-type{margin-bottom:26px;}
.field label{
  display:block;font-size:13px;font-weight:600;
  color:var(--text);margin-bottom:8px;
}
.field label .req{color:var(--orange);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--border);
  color:var(--text);font-family:inherit;font-size:15px;
  padding:13px 15px;border-radius:8px;outline:none;transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--orange);}
textarea{resize:vertical;min-height:130px;}
input[type=file]{
  width:100%;background:var(--bg);border:1px dashed var(--border);
  color:var(--text-dim);font-family:inherit;font-size:14px;
  padding:16px;border-radius:8px;
}
.hint{font-size:13px;color:var(--text-dim);margin-top:7px;}

/* ---------- detail table ---------- */
table.details{width:100%;border-collapse:collapse;font-size:15px;}
table.details tr{border-bottom:1px solid var(--border);}
table.details tr:last-child{border-bottom:none;}
table.details td{padding:14px 0;vertical-align:top;}
table.details td:first-child{color:var(--text-dim);font-size:13px;font-weight:600;width:120px;}

/* ---------- signup ---------- */
.signup{padding:84px 0;}
.signup-panel{
  border:1px solid var(--orange-deep);border-radius:18px;padding:44px;
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(232,93,44,0.14), transparent 70%),
    var(--panel);
}
.signup h2{font-size:30px;margin-bottom:12px;}
.signup p{color:var(--text-dim);font-size:16px;margin-bottom:26px;max-width:560px;}
.signup form{display:flex;gap:12px;flex-wrap:wrap;}
.signup input[type=email]{flex:1;min-width:260px;}
.signup .note{font-size:13.5px;color:var(--text-dim);margin-top:16px;}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--border);padding:36px 0;color:var(--text-dim);font-size:14px;background:var(--bg-2);}
footer.site .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;}
footer.site a{color:var(--text-dim);text-decoration:none;}
footer.site a:hover{color:var(--orange);}

/* ---------- preview-only banner ---------- */
.preview-note{
  background:rgba(232,93,44,0.1);border-bottom:1px solid var(--orange-deep);
  color:var(--orange-soft);font-size:13px;text-align:center;padding:9px 16px;
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .grid-3,.step-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .specs .wrap{grid-template-columns:repeat(2,1fr);}
  h1{font-size:38px;}
  .hero.compact h1{font-size:32px;}
  h2{font-size:27px;}
  .hero{padding:64px 0 52px;}
  section.block{padding:60px 0;}
  .row2{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .grid-4{grid-template-columns:1fr;}
  nav.main{gap:16px;}
  .form-panel,.signup-panel{padding:26px;}
}

/* ---------- photo headers + render tags ---------- */
.hero.has-img{position:relative;background-color:var(--bg);background-size:cover;background-position:center;background-repeat:no-repeat;}
.hero.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,13,.97) 0%,rgba(12,12,13,.86) 42%,rgba(12,12,13,.35) 100%),linear-gradient(0deg,rgba(12,12,13,.9) 0%,transparent 40%);}
.hero.has-img>.wrap{position:relative;}
@media (max-width:760px){.hero.has-img::before{background:linear-gradient(rgba(12,12,13,.6),rgba(12,12,13,.88));}}
.media-card .shot.render{padding:0;position:relative;}
.media-card .shot .tag{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);background:rgba(12,12,13,.78);border:1px solid var(--border);border-radius:100px;padding:4px 10px;}

/* ---------- legal / privacy page ---------- */
.legal{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start;}
.legal-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--border);}
.legal-toc a{color:var(--text-dim);text-decoration:none;font-size:14px;padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;}
.legal-toc a:hover{color:var(--text);border-left-color:var(--orange);}
.legal-body{max-width:760px;}
.legal-body h2{font-size:24px;margin:44px 0 14px;scroll-margin-top:96px;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p,.legal-body li{color:var(--text-dim);font-size:15.5px;line-height:1.7;}
.legal-body p{margin-bottom:14px;}
.legal-body strong{color:var(--text);font-weight:600;}
.legal-body ul{margin:0 0 16px 20px;}
.legal-body li{margin-bottom:8px;}
.legal-body a{color:var(--orange);}
.legal-table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:14.5px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.legal-table td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:top;}
.legal-table tr:last-child td{border-bottom:0;}
.legal-table td:first-child{color:var(--text-dim);width:38%;}
.legal-table a{color:var(--orange);}
.form-privacy{font-size:12.5px;color:var(--text-dim);margin-top:14px;}
.form-privacy a{color:var(--text-dim);text-decoration:underline;}
@media (max-width:860px){.legal{grid-template-columns:1fr;gap:28px;}.legal-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 14px;border-left:0;}.legal-toc a{padding:2px 0;border-left:0;}}

/* ---------- multi-photo cards ---------- */
.gallery-shot .thumbs{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;}
.gallery-shot .thumbs button{width:46px;height:35px;padding:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--bg);cursor:pointer;opacity:.75;transition:opacity .15s,border-color .15s;}
.gallery-shot .thumbs button:hover{opacity:1;}
.gallery-shot .thumbs button.on{border-color:var(--orange);opacity:1;}
.gallery-shot .thumbs img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- sublimation page ---------- */
.media-card .spec-list{list-style:none;font-size:13.5px;color:var(--text-dim);margin-top:4px;}
.media-card .spec-list li{padding:4px 0 4px 18px;position:relative;}
.media-card .spec-list li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--orange);border-radius:2px;}
section[id]{scroll-margin-top:80px;}

/* ---------- image lightbox ---------- */
.media-card .shot img{cursor:zoom-in;}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:24px;background:rgba(8,8,9,.94);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;}
.lb.open{opacity:1;visibility:visible;}
.lb img{max-width:94vw;max-height:84vh;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6);cursor:zoom-out;}
.lb .lb-cap{color:var(--text-dim);font-size:14px;text-align:center;max-width:720px;}
.lb button{position:absolute;background:rgba(23,23,26,.85);border:1px solid var(--border);color:var(--text);width:46px;height:46px;border-radius:100px;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;}
.lb button:hover{border-color:var(--orange);color:var(--orange);}
.lb .lb-close{top:18px;right:18px;}
.lb .lb-prev{left:18px;top:50%;transform:translateY(-50%);}
.lb .lb-next{right:18px;top:50%;transform:translateY(-50%);}
.lb .lb-prev[hidden],.lb .lb-next[hidden]{display:none;}
@media(max-width:600px){.lb{padding:12px;}.lb img{max-width:100%;max-height:78vh;}.lb .lb-prev,.lb .lb-next{top:auto;bottom:18px;transform:none;}}
body.lb-lock{overflow:hidden;}