/* ============================================================
   NEEV PACKAGING — STYLESHEET
   ------------------------------------------------------------
   Structure:
   1. Design tokens (edit colors/fonts here)
   2. Base / reset
   3. Layout helpers
   4. Header / nav
   5. Hero
   6. Trust strip
   7. Intent selector (Tapes / Boxes / Other)
   8. Tape configurator (build-your-tape journey)
   9. Tape type gallery
   10. Foundation / pillars
   11. Education / credibility (guides, FAQ)
   12. Coming soon (Boxes & Other materials)
   13. Process
   14. Contact
   15. Footer
   16. Tape designer
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Brand colors */
  --forest:#133421;        /* Neev forest green — primary */
  --forest-ink:#0e2718;    /* darker green for hover states */
  --kraft:#9e713c;         /* kraft brown — accent / CTA highlight */
  --kraft-light:#c99a5f;   /* lighter kraft, secondary accent */
  --beige:#efe6d0;         /* light beige — section backgrounds */
  --cream:#f6f1e6;         /* warm white / page background */
  --white:#fffdf8;         /* warm white — card surfaces */

  /* Text */
  --ink:#1c1a15;
  --ink-soft:#5a5748;

  /* Structure */
  --line:rgba(19,52,33,0.14);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:8px;
  --shadow-soft:0 8px 24px rgba(19,52,34,0.08);
  --shadow-lift:0 14px 36px rgba(19,52,34,0.14);

  /* Type */
  --font-display:'Archivo Expanded', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

/* ---------- 2. BASE / RESET ---------- */
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-0.01em; color:var(--forest);}
a{color:inherit;}
img{max-width:100%; display:block;}
.mono{font-family:var(--font-mono);}
button{font-family:var(--font-body); cursor:pointer;}

/* ---------- 3. LAYOUT HELPERS ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:1;}
section{padding:88px 0; position:relative;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--kraft); margin-bottom:14px; font-weight:500; display:flex; align-items:center; gap:10px;
}
.section-eyebrow::before{content:""; width:22px; height:1px; background:var(--kraft); display:inline-block;}
.section-head h2{font-size:clamp(26px,3vw,36px); font-weight:700; line-height:1.15;}
.section-head p{color:var(--ink-soft); font-size:16px; margin-top:14px; max-width:560px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; font-weight:600; font-size:15px; padding:14px 28px;
  text-decoration:none; border:none; transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-primary{background:var(--forest); color:var(--white);}
.btn-primary:hover{background:var(--forest-ink); transform:translateY(-1px); box-shadow:var(--shadow-soft);}
.btn-ghost{background:transparent; color:var(--forest); border:1.5px solid var(--forest);}
.btn-ghost:hover{background:var(--forest); color:var(--white);}
.btn-sm{padding:10px 18px; font-size:13.5px;}
.btn:focus-visible{outline:2px solid var(--kraft); outline-offset:3px;}

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- 4. HEADER / NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,241,230,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:38px; width:38px;}
.brand span{font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--forest);}
.navlinks{display:flex; gap:32px; font-size:14.5px; font-weight:500; color:var(--ink-soft);}
.navlinks a{text-decoration:none; transition:color .15s;}
.navlinks a:hover{color:var(--forest);}
.navlinks a:focus-visible{outline:2px solid var(--kraft); outline-offset:4px;}
.nav-desktop{display:flex; align-items:center; gap:32px;}
@media(max-width:820px){ .nav-desktop{display:none;} }

/* ---------- 5. HERO ---------- */
.hero{padding:72px 0 0;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero h1{font-size:clamp(32px,4.4vw,54px); font-weight:800; line-height:1.06; margin-bottom:20px;}
.hero h1 em{font-style:normal; color:var(--kraft);}
.hero p.lede{font-size:17.5px; color:var(--ink-soft); max-width:480px; margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
.trust-line{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.trust-line .dot{width:6px; height:6px; border-radius:50%; background:var(--kraft);}

.hero-image{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lift); background:var(--beige);
}
.hero-image img{width:100%; height:auto; display:block;}
.hero-image .tag{
  position:absolute; top:18px; left:18px; background:var(--white); border:1px solid var(--line);
  border-radius:999px; padding:8px 14px; font-family:var(--font-mono); font-size:11px; color:var(--forest);
  letter-spacing:0.04em; box-shadow:var(--shadow-soft);
}

/* ---------- 6. TRUST STRIP ---------- */
.trust-strip{padding:36px 0; background:var(--forest);}
.trust-strip .wrap{
  display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:center;
}
.trust-item{display:flex; align-items:center; gap:10px; color:var(--white); font-size:13.5px; font-family:var(--font-mono); letter-spacing:0.02em;}
.trust-item svg{width:20px; height:20px; flex-shrink:0;}

/* ---------- 7. INTENT SELECTOR ---------- */
.selector{padding:80px 0 20px;}
.selector-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:800px){ .selector-grid{grid-template-columns:1fr;} }
.select-card{
  padding:28px; cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s;
  text-align:left; display:block; text-decoration:none; color:var(--ink);
}
.select-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--kraft-light);}
.select-card:focus-visible{outline:2px solid var(--kraft); outline-offset:3px;}
.select-card .status{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; display:inline-block; margin-bottom:16px;
}
.status.live{background:rgba(158,113,60,0.15); color:var(--kraft);}
.status.soon{background:rgba(19,52,33,0.08); color:var(--ink-soft);}
.select-card svg{width:34px; height:34px; margin-bottom:14px;}
.select-card h3{font-size:17.5px; margin-bottom:8px;}
.select-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.55;}
.select-card .go{margin-top:16px; font-family:var(--font-mono); font-size:12px; color:var(--forest); display:flex; align-items:center; gap:6px;}

/* ---------- 8. TAPE CONFIGURATOR ---------- */
.configurator{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.config-layout{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:flex-start;}
@media(max-width:900px){ .config-layout{grid-template-columns:1fr;} }

.config-step{margin-bottom:36px;}
.config-step .step-label{
  font-family:var(--font-mono); font-size:12px; color:var(--kraft); text-transform:uppercase; letter-spacing:0.08em;
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.step-num{
  width:22px; height:22px; border-radius:50%; background:var(--forest); color:var(--white);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0;
}
.option-row{display:flex; gap:12px; flex-wrap:wrap;}
.option-pill{
  border:1.5px solid var(--line); border-radius:999px; padding:10px 20px; font-size:14px; font-weight:500;
  background:var(--cream); transition:all .15s; color:var(--ink-soft);
}
.option-pill.material{
  display:flex; align-items:center; gap:10px; border-radius:var(--radius-sm); padding:12px 18px 12px 12px;
}
.option-pill.material img{width:34px; height:34px;}
.option-pill:hover{border-color:var(--kraft-light);}
.option-pill.active{background:var(--forest); border-color:var(--forest); color:var(--white);}
.option-pill.material.active{background:var(--beige); border-color:var(--forest); color:var(--ink);}
.option-pill.material.active .mat-check{opacity:1;}
.mat-check{opacity:0; font-size:12px; color:var(--forest); margin-left:auto;}

.config-summary{
  position:sticky; top:100px; padding:28px; background:var(--beige); border-radius:var(--radius-lg);
}
.config-summary h3{font-size:17px; margin-bottom:18px;}
.summary-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(19,52,33,0.1); font-size:14px;}
.summary-row:last-of-type{border-bottom:none;}
.summary-row .k{color:var(--ink-soft); font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.04em;}
.summary-row .v{font-weight:600; color:var(--forest);}
.config-summary .btn{width:100%; margin-top:20px;}
.config-note{font-size:12px; color:var(--ink-soft); margin-top:12px; text-align:center;}

/* ---------- 9. TAPE TYPE GALLERY ---------- */
.tape-gallery{background:var(--beige);}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:800px){ .gallery-grid{grid-template-columns:1fr;} }
.gallery-card{padding:30px; text-align:center;}
.gallery-card img{width:120px; height:120px; margin:0 auto 20px;}
.gallery-card h4{font-size:17px; margin-bottom:8px;}
.gallery-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}

/* ---------- 10. FOUNDATION / PILLARS ---------- */
.pillar-diagram{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:10px; border-top:3px solid var(--forest);}
@media(max-width:760px){ .pillar-diagram{grid-template-columns:1fr 1fr;} }
.pillar{padding:26px 22px 0; border-left:1px solid var(--line);}
.pillar:first-child{border-left:none;}
.pillar .pnum{font-family:var(--font-mono); font-size:11px; color:var(--kraft); margin-bottom:14px;}
.pillar h4{font-size:16.5px; margin-bottom:8px;}
.pillar p{font-size:14px; color:var(--ink-soft); line-height:1.6;}
.beam-caption{text-align:center; margin-top:26px; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);}

/* ---------- 11. EDUCATION / CREDIBILITY ---------- */
.education{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.edu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:800px){ .edu-grid{grid-template-columns:1fr;} }
.edu-card{padding:28px; background:var(--cream); border-radius:var(--radius-md);}
.edu-card .edu-num{font-family:var(--font-mono); font-size:11px; color:var(--kraft); margin-bottom:14px;}
.edu-card h4{font-size:16px; margin-bottom:10px;}
.edu-card p{font-size:14px; color:var(--ink-soft); line-height:1.65;}

.faq{margin-top:44px; max-width:760px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  padding:18px 4px; font-weight:600; font-size:15px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; color:var(--forest);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:20px; color:var(--kraft); font-weight:400;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 4px 18px; font-size:14px; color:var(--ink-soft); line-height:1.65;}

/* ---------- 12. COMING SOON ---------- */
.coming-soon{background:var(--beige);}
.cs-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media(max-width:800px){ .cs-grid{grid-template-columns:1fr;} }
.cs-card{overflow:hidden;}
.cs-image{height:200px; overflow:hidden; position:relative; background:var(--cream);}
.cs-image img{width:100%; height:100%; object-fit:cover; filter:saturate(0.9);}
.cs-image.icon-fill{display:flex; align-items:center; justify-content:center; gap:22px;}
.cs-image.icon-fill svg{width:38px; height:38px;}
.soon-badge{
  position:absolute; top:14px; right:14px; background:var(--forest); color:var(--white);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; padding:5px 12px; border-radius:999px;
}
.cs-body{padding:26px 24px;}
.cs-body h3{font-size:18px; margin-bottom:8px;}
.cs-body p{font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:18px;}
.notify-form{display:flex; gap:8px;}
.notify-form input{
  flex:1; border:1px solid var(--line); border-radius:999px; padding:11px 16px; font-family:var(--font-body); font-size:13.5px;
  background:var(--cream);
}
.notify-form input:focus{outline:none; border-color:var(--kraft);}
.notify-form button{white-space:nowrap;}

/* ---------- 13. PROCESS ---------- */
.process{background:var(--forest); color:var(--white);}
.process .section-eyebrow{color:var(--kraft-light);}
.process .section-eyebrow::before{background:var(--kraft-light);}
.process .section-head h2{color:var(--white);}
.process .section-head p{color:rgba(255,253,248,0.72);}
.spec-strip{position:relative; padding-top:20px;}
.spec-line{
  position:absolute; top:52px; left:0; right:0; height:1px;
  background:repeating-linear-gradient(90deg, rgba(201,154,95,0.5) 0 8px, transparent 8px 14px); z-index:0;
}
@media(max-width:800px){ .spec-line{display:none;} }
.spec-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative; z-index:1;}
@media(max-width:800px){ .spec-grid{grid-template-columns:1fr 1fr;} }
.spec-step{display:flex; flex-direction:column; align-items:flex-start;}
.spec-marker{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--kraft-light);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; color:var(--kraft-light);
  background:var(--forest); margin-bottom:18px;
}
.spec-step h4{font-size:16px; font-weight:700; margin-bottom:8px; color:var(--white);}
.spec-step p{font-size:13.5px; color:rgba(255,253,248,0.68); line-height:1.6;}

/* ---------- 14. CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
@media(max-width:800px){ .contact-grid{grid-template-columns:1fr; gap:40px;} }
.contact-card{padding:34px;}
.contact-row{display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.contact-row:last-child{border-bottom:none;}
.contact-row .label{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--kraft); width:90px; flex-shrink:0; padding-top:2px;}
.contact-row .val{font-size:15.5px; color:var(--ink); font-weight:500;}
.contact-row .val a{text-decoration:none; color:var(--forest); border-bottom:1px solid var(--kraft-light);}
.placeholder-note{font-size:12.5px; color:var(--ink-soft); font-style:italic; margin-top:4px;}

.form-card h3{font-size:19px; margin-bottom:6px;}
.form-card > p{font-size:14px; color:var(--ink-soft); margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 14px;
  font-family:var(--font-body); font-size:14.5px; background:var(--cream); color:var(--ink);
  transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--kraft);}
.field textarea{resize:vertical; min-height:90px;}
.submit-btn{width:100%; margin-top:6px;}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}
.form-status{font-size:13.5px; margin-top:12px; min-height:18px;}
.form-status.sending{color:var(--ink-soft);}
.form-status.success{color:var(--forest); font-weight:600;}
.form-status.error{color:#a13a2a;}
.notify-form + .form-status{margin-top:10px;}

/* ---------- 15. FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:32px 0;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.footer-row .brand span{font-size:15px;}
.footer-row img{height:26px; width:26px;}
footer .fine{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);}

/* ---------- 16. TAPE DESIGNER ---------- */
.dropzone{
  border:1.5px dashed var(--line); border-radius:var(--radius-md); padding:28px; text-align:center;
  background:var(--cream); cursor:pointer; transition:border-color .15s; display:block;
}
.dropzone:hover, .dropzone.dragover{border-color:var(--kraft-light);}
.dropzone input[type="file"]{display:none;}
.dropzone .dz-label{font-size:14px; color:var(--ink-soft);}
.dropzone .dz-label strong{color:var(--forest);}
.dropzone .dz-filename{font-family:var(--font-mono); font-size:12px; color:var(--forest); margin-top:8px; display:block;}

.designer-field{margin-bottom:18px;}
.designer-field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:8px;}
.designer-field input[type="text"]{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 14px;
  font-family:var(--font-body); font-size:14.5px; background:var(--cream); color:var(--ink);
}
.designer-field input[type="text"]:focus{outline:none; border-color:var(--kraft);}

.color-swatch-row{display:flex; gap:10px; flex-wrap:wrap;}
.color-swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--line); cursor:pointer;
  position:relative; transition:transform .15s; padding:0;
}
.color-swatch:hover{transform:translateY(-2px);}
.color-swatch.active{border-color:var(--forest); box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--forest);}

.designer-canvas-wrap{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px;
  box-shadow:var(--shadow-soft); position:sticky; top:100px;
}
#tape-canvas{width:100%; height:auto; border-radius:var(--radius-sm); display:block;}