:root{
  --paper:#fdfdfb;
  --paper-raised:#ffffff;
  --ink:#211d1a;
  --ink-soft:#5d564e;
  --rule:#e6e1d8;
  --laser:#d2241a;
  --laser-ink:#ffffff;
  --amber:#cc9a35;
  --amber-ink:#2a1f06;
  --laser-wash:#fbe9e7;
  --amber-wash:#fbf1dc;
  --steel:#8a8478;
  --focus:#1f6fd6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#17140f;
    --paper-raised:#211c16;
    --ink:#f1ece2;
    --ink-soft:#b8ae9d;
    --rule:#3a3327;
    --laser:#ff5c4d;
    --laser-ink:#1b0d0a;
    --amber:#d9ab52;
    --amber-ink:#1b1206;
    --laser-wash:#301715;
    --amber-wash:#302510;
    --steel:#9b9a8a;
    --focus:#7fb4ff;
  }
}
:root[data-theme="dark"]{
  --paper:#17140f;
  --paper-raised:#211c16;
  --ink:#f1ece2;
  --ink-soft:#b8ae9d;
  --rule:#3a3327;
  --laser:#ff5c4d;
  --laser-ink:#1b0d0a;
  --amber:#d9ab52;
  --amber-ink:#1b1206;
  --laser-wash:#301715;
  --amber-wash:#302510;
  --steel:#9b9a8a;
  --focus:#7fb4ff;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Karla",ui-sans-serif,system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:"Big Shoulders Display",ui-sans-serif,system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  text-wrap:balance;
  margin:0;
}
.mono{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
a{color:inherit;}
img{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* --- cut-line motif: a dashed rule standing for the laser's own path --- */
.cutline{
  border:none;
  border-top:1.5px dashed var(--rule);
  margin:0;
}
.cutline-accent{
  height:3px;
  width:64px;
  background:repeating-linear-gradient(90deg,var(--laser) 0 10px,transparent 10px 16px);
  margin-bottom:18px;
  border-radius:2px;
}

/* --- header --- */
header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
}
.brand{
  font-family:"Big Shoulders Display";
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:0.02em;
  display:flex;align-items:baseline;gap:8px;
  text-decoration:none;
}
.brand .dot{color:var(--laser);}
.navlinks{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-weight:600;font-size:0.92rem;letter-spacing:0.03em;text-transform:uppercase;}
.navlinks a{text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color .2s ease,color .2s ease;}
.navlinks a:hover,.navlinks a:focus-visible{border-color:var(--laser);}
.nav-cta{
  font-family:"IBM Plex Mono";font-weight:600;font-size:0.82rem;
  background:var(--ink);color:var(--paper);
  padding:9px 16px;text-decoration:none;letter-spacing:0.02em;
  border-radius:3px;
}
@media (max-width:760px){ .navlinks{display:none;} }

/* --- hero --- */
.hero{
  padding:76px 0 64px;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;
}
.eyebrow{
  font-family:"IBM Plex Mono";font-size:0.8rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--laser);
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:22px;height:1.5px;background:var(--laser);display:inline-block;
}
.hero h1{font-size:clamp(2.4rem,4.3vw,3.6rem);line-height:1.04;font-weight:800;}
.hero h1 em{font-style:normal;color:var(--laser);}
.hero p{max-width:46ch;color:var(--ink-soft);font-size:1.08rem;margin:20px 0 30px;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;}

.btn{
  font-weight:700;font-size:0.95rem;text-decoration:none;
  padding:14px 26px;border-radius:3px;display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s ease, box-shadow .15s ease;
  border:none;cursor:pointer;font-family:inherit;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--laser);color:var(--laser-ink);box-shadow:0 1px 0 rgba(0,0,0,0.08);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule);}
.btn-ghost:hover{border-color:var(--ink);}

.hero-plate{
  position:relative;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:10px;
}
.hero-plate img{border-radius:3px;width:100%;height:420px;object-fit:cover;}
.hero-tag{
  position:absolute;bottom:26px;left:26px;
  background:var(--paper);border:1px solid var(--rule);
  padding:8px 12px;border-radius:3px;
  font-family:"IBM Plex Mono";font-size:0.75rem;font-weight:600;
  display:flex;gap:10px;align-items:center;
  box-shadow:0 6px 18px rgba(20,14,8,0.12);
}
.hero-tag .swatch{width:9px;height:9px;border-radius:50%;background:var(--amber);}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding:48px 0 40px;}
  .hero-plate img{height:300px;}
}

/* --- section scaffolding --- */
section{padding:70px 0;}
.section-head{max-width:60ch;margin-bottom:40px;}
.section-head h2{font-size:clamp(1.8rem,2.6vw,2.4rem);font-weight:800;}
.section-head p{color:var(--ink-soft);margin-top:12px;font-size:1.02rem;}

/* --- gallery --- */
.gallery-strip{background:var(--paper-raised);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.piece{
  background:var(--paper-raised);
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
}
.piece img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.piece:hover img{transform:scale(1.045);}
.piece-tag{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 12px 9px;
  background:linear-gradient(0deg, rgba(10,8,5,0.72) 0%, rgba(10,8,5,0) 100%);
  color:#fff;
}
.piece-tag .cat{
  font-family:"IBM Plex Mono";font-size:0.66rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:#f3d98c;
}
.piece-tag .name{font-weight:700;font-size:0.92rem;margin-top:2px;}
@media (max-width:980px){ .gallery{grid-template-columns:repeat(2,1fr);} }

.gallery-foot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding:26px 0;
}
.gallery-foot p{color:var(--ink-soft);font-size:0.95rem;margin:0;}

/* --- about / why --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.about-copy p{color:var(--ink-soft);margin:0 0 16px;max-width:52ch;}
.about-copy p:last-child{margin-bottom:0;}
.specsheet{
  background:var(--paper-raised);border:1px solid var(--rule);border-radius:6px;padding:28px;
}
.specsheet .mono{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}
.spec-row{display:flex;justify-content:space-between;padding:13px 0;border-top:1px dashed var(--rule);font-size:0.95rem;}
.spec-row:first-of-type{border-top:none;}
.spec-row b{font-weight:700;}

@media (max-width:860px){ .split{grid-template-columns:1fr;gap:36px;} }

/* --- materials list --- */
.materials-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden;
}
.material-row{background:var(--paper-raised);padding:28px 30px;}
.material-row .mname{font-size:1.15rem;font-weight:700;font-family:"Karla";margin:10px 0 8px;}
.material-row p{color:var(--ink-soft);font-size:0.95rem;margin:0;max-width:46ch;}
.tag-pill{
  font-family:"IBM Plex Mono";font-size:0.66rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;display:inline-block;
}
.tag-pill.cut_engrave{background:var(--laser-wash);color:var(--laser);}
.tag-pill.engrave_only{background:var(--amber-wash);color:var(--amber);}

@media (max-width:760px){ .materials-grid{grid-template-columns:1fr;} }

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden;}
.why-card{background:var(--paper-raised);padding:30px 26px;}
.why-card .num{font-family:"IBM Plex Mono";font-size:0.78rem;color:var(--laser);font-weight:600;}
.why-card h3{font-size:1.18rem;text-transform:none;letter-spacing:0;margin:10px 0 8px;font-weight:700;font-family:"Karla";}
.why-card p{color:var(--ink-soft);font-size:0.95rem;margin:0;}
@media (max-width:760px){ .why-grid{grid-template-columns:1fr;} }

/* --- quote form --- */
.quote-section{background:var(--paper-raised);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.quote-shell{display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--paper);}
.quote-side{
  background:var(--ink);color:var(--paper);
  padding:44px 38px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.quote-side h2{color:var(--paper);font-size:1.9rem;}
.quote-side p{color:#cfc7b8;margin-top:14px;max-width:38ch;}
.quote-steps{margin-top:34px;display:flex;flex-direction:column;gap:16px;}
.qstep{display:flex;gap:12px;align-items:flex-start;font-size:0.92rem;color:#e7e1d3;}
.qstep .ix{font-family:"IBM Plex Mono";color:var(--amber);font-weight:600;flex:none;}
.quote-form{padding:44px 40px;}
.field{margin-bottom:20px;display:flex;flex-direction:column;gap:7px;}
.field label{font-size:0.82rem;font-weight:700;letter-spacing:0.02em;}
.field .opt{font-weight:500;color:var(--ink-soft);text-transform:none;}
.field input,.field textarea{
  font:inherit;padding:11px 13px;border:1.5px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink);
}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px;}
.field textarea{min-height:104px;resize:vertical;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.file-field{
  border:1.5px dashed var(--rule);border-radius:4px;padding:16px;font-size:0.88rem;color:var(--ink-soft);
  display:block;cursor:pointer;background:none;width:100%;text-align:left;
}
.file-field input[type="file"]{width:100%;font-family:inherit;font-size:0.85rem;color:var(--ink-soft);}
.form-msg{padding:14px 16px;border-radius:4px;margin-bottom:20px;font-size:0.92rem;}
.form-msg.success{background:var(--amber-wash);color:var(--amber-ink);}
.form-msg.error{background:var(--laser-wash);color:var(--laser);}
.field-error{color:var(--laser);font-size:0.82rem;margin:0;}
@media (max-width:860px){
  .quote-shell{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
}

/* --- footer --- */
footer{padding:54px 0 36px;}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;padding-bottom:30px;}
.foot-brand .brand{margin-bottom:10px;}
.foot-brand p{color:var(--ink-soft);max-width:34ch;font-size:0.92rem;}
.foot-links{display:flex;gap:56px;flex-wrap:wrap;}
.foot-col h4{font-family:"IBM Plex Mono";font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;}
.foot-col a{display:block;text-decoration:none;font-size:0.92rem;margin-bottom:8px;}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;font-size:0.84rem;color:var(--ink-soft);}

/* --- whatsapp fab --- */
.wa-fab{
  position:fixed;right:22px;bottom:22px;z-index:50;
  display:flex;align-items:center;gap:10px;
  background:#25D366;color:#06210f;
  padding:13px 18px 13px 14px;border-radius:999px;
  text-decoration:none;font-weight:700;font-size:0.9rem;
  box-shadow:0 10px 24px rgba(10,30,15,0.28);
  transition:transform .15s ease;
}
.wa-fab:hover{transform:translateY(-2px);}
.wa-fab svg{width:22px;height:22px;flex:none;}

@media (prefers-reduced-motion: reduce){
  .piece img, .btn, .wa-fab{transition:none;}
}