:root{
    --ink:#211a16;
    --ink-soft:#3a2e27;
    --paper:#f6f2ea;
    --paper-dim:#eae3d6;
    --rust:#c1592f;
    --gold:#e7b23a;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;background:var(--ink);}
  body{
    font-family:'Archivo',system-ui,sans-serif;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .scroll-stage{ position:relative; height:230vh; }
  .hero{
    position:sticky;
    top:0;
    width:100%;
    height:100svh;
    min-height:640px;
    overflow:hidden;
    background-image:url("../assets/images/workshop-table.jpg");
    background-size:cover;
    background-position:center;
  }
  .scrim-top{
    position:absolute; inset:0 0 auto 0; height:26%;
    background:linear-gradient(to bottom, rgba(10,7,5,.55), rgba(10,7,5,0));
    pointer-events:none;
  }
  .scrim-bottom{
    position:absolute; inset:auto 0 0 0; height:22%;
    background:linear-gradient(to top, rgba(10,7,5,.5), rgba(10,7,5,0));
    pointer-events:none;
  }

  /* ---- Ink blot + bottle, top-left ---- */
  .ink-wrap{
    position:absolute;
    top:0; left:0;
    width:min(30vw,380px);
    height:min(30vw,380px);
    pointer-events:none;
    z-index:3;
  }
  .ink-wrap svg{width:100%;height:100%;}

  .logo{
    position:absolute;
    top:clamp(14px,3.2vw,34px);
    left:clamp(18px,3.6vw,40px);
    z-index:4;
    font-family:'Caveat',cursive;
    font-weight:700;
    font-size:clamp(38px,5.6vw,68px);
    color:var(--paper);
    letter-spacing:.5px;
    text-shadow:0 3px 10px rgba(0,0,0,.55);
    line-height:1;
  }

  /* ---- Nav buttons ---- */
  .btn{
    display:inline-block;
    text-decoration:none;
    font-family:'Archivo',sans-serif;
    font-weight:600;
    font-size:clamp(13px,1.1vw,15px);
    letter-spacing:.2px;
    color:var(--paper);
    background:rgba(33,26,22,.55);
    border:1px solid rgba(246,242,234,.35);
    padding:11px 22px;
    border-radius:3px;
    cursor:pointer;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:background .2s ease, border-color .2s ease;
  }
  .btn:hover{ background:rgba(193,89,47,.75); border-color:rgba(246,242,234,.6); }
  .btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

  .nav-top{
    position:absolute;
    top:clamp(14px,3.2vw,34px);
    right:clamp(18px,3.6vw,40px);
    z-index:4;
  }
  .nav-bottom{
    position:absolute;
    top:clamp(14px,3.2vw,34px);
    right:clamp(18px,3.6vw,40px);
    z-index:4;
    display:flex;
    gap:12px;
  }

  /* ---- Table items ---- */
  .items{ position:absolute; inset:0; z-index:2; }
  .item{
    position:absolute;
    width:auto;
    filter:drop-shadow(10px 16px 14px rgba(15,9,5,.38));
    will-change:transform, opacity;
  }
  .item.laptop{ top:2%;  right:27%;  width:21%;}
  .item.tshirt{ top:35%; right:2%;  width:23%; }
  .item.invite{ top:9%;  left:15%;   width:15%; rotate: 90deg; }
  .item.mug{    top:44%; left:36%;  width:11%; }
  .item.cutter{ top:65%; left:40%;  width:13%; }
  .item.idcards{bottom:9%; left:27%; width:13%; }

  .item.paper{
    position:fixed;
    z-index:25;
    pointer-events:none;
    filter:drop-shadow(10px 16px 14px rgba(15,9,5,.38));
    bottom:6%;
    left:4%;
    width:17%;
  }

  @media (max-width:640px){
    .item.laptop{ width:30%; }
    .item.tshirt{ width:32%; top:40%; }
    .item.invite{ width:24%; }
    .item.paper{ width:26%; }
    .item.mug{ width:16%; }
    .item.cutter{ width:19%; }
    .item.idcards{ width:19%; }
    .nav-bottom{ flex-direction:row; }
  }

  /* ---- Floating nav (appears once items swipe out) ---- */
  .floating-nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px clamp(18px,3.6vw,40px);
    padding-top:calc(14px + env(safe-area-inset-top,0px));
    background:rgba(20,15,12,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(246,242,234,.12);
    opacity:0;
    transform:translateY(-100%);
    pointer-events:none;
    transition:opacity .35s ease, transform .35s ease;
  }
  .floating-nav.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .floating-nav .logo-mini{
    font-family:'Caveat',cursive;
    font-weight:700;
    font-size:26px;
    color:var(--paper);
  }
  .floating-nav .links{ display:flex; gap:10px; }
  .btn-sm{ padding:8px 16px; font-size:13px; }

  /* ---- Content chapters ---- */
  .scene2{
    position:relative;
    z-index:5;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:110px 24px 60px;
    background:
      radial-gradient(circle at 14% 18%, rgba(193,89,47,.08), transparent 24%),
      linear-gradient(115deg, var(--paper), var(--paper-dim));
    color:var(--ink);
  }
  .scene2-inner{ max-width:520px; }
  .scene2-inner h2{
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:clamp(26px,4vw,40px);
    margin:0 0 14px;
    color:var(--ink);
  }
  .scene2-inner p{
    font-size:16px;
    line-height:1.6;
    color:var(--ink-soft);
    margin:0;
  }

  .chapter{position:relative;overflow:hidden;padding:clamp(76px,10vw,140px) clamp(22px,7vw,110px);background:var(--paper);color:var(--ink)}
  .chapter:nth-of-type(even){background:var(--paper-dim)}
  .chapter-inner{max-width:1240px;margin:0 auto}
  .eyebrow{display:inline-block;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rust)}
  .chapter h2{margin:0;font-size:clamp(38px,6vw,78px);line-height:.96;letter-spacing:-.045em}
  .chapter h3{margin:0 0 12px;font-size:clamp(22px,2.2vw,32px)}
  .chapter p{color:var(--ink-soft);font-size:clamp(15px,1.35vw,18px);line-height:1.7}
  .scribble{width:min(520px,76vw);height:10px;margin:28px auto 0;background:url("../assets/icons/scribble.svg") center/100% 100% no-repeat}
  .paper-scrap{position:absolute;background:var(--paper);box-shadow:0 18px 45px rgba(33,26,22,.14);border:1px solid rgba(33,26,22,.08)}
  .paper-scrap.one{width:170px;height:120px;left:-38px;bottom:9%;transform:rotate(7deg)}
  .paper-scrap.two{width:105px;height:82px;right:-25px;top:18%;transform:rotate(-13deg);background:#efe4ce}

  .services-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:52px}
  .services-head p{max-width:430px;margin:0}
  .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,38px)}
  .service-card{display:flex;flex-direction:column;min-width:0}
  .service-visual{position:relative;aspect-ratio:1.18;border:1px solid rgba(33,26,22,.12);overflow:hidden;background:#d9c8ac;box-shadow:0 20px 42px rgba(33,26,22,.12)}
  .service-visual:before,.service-visual:after{content:"";position:absolute;box-shadow:0 12px 22px rgba(33,26,22,.18)}
  .visual-paper {
    background: #d9c8ac url("../assets/images/stack of paper.webp") center / contain no-repeat;
  }
  .visual-banner {
    background: #d9c8ac url("../assets/images/banner.webp") center / contain no-repeat;
  }
  .visual-card {
    background: #d9c8ac url("../assets/images/business card.webp") center / contain no-repeat;
  }
  .service-card h3{margin-top:24px}
  .service-card p{margin:0 0 22px}
  .arrow-link{display:inline-flex;align-items:center;gap:12px;margin-top:auto;color:var(--ink);font-weight:700;text-decoration:none}
  .arrow-link span{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;transition:.2s}
  .arrow-link:hover span{background:var(--rust);border-color:var(--rust);color:var(--paper)}

  .split{display:grid;grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);align-items:center;gap:clamp(48px,8vw,120px)}
  .nfc-stage{position:relative;min-height:520px}
  .nfc-card {
    /* keep the existing positioning and sizing declarations */
    background: url("../assets/images/NFC card.jpg") center / cover no-repeat;
  }
  .nfc-card{position:absolute;width:min(330px,62%);aspect-ratio:1.58;border-radius:18px;padding:28px;box-shadow:0 30px 50px rgba(33,26,22,.25);font-weight:700}
  .nfc-card.a { left: 5%; top: 16%; background-color: var(--rust); color: var(--paper); transform: rotate(-12deg); }
  .nfc-card.b { right: 4%; top: 7%; background-color: var(--ink); color: var(--paper); transform: rotate(8deg); }
  .nfc-card.c { left: 28%; bottom: 8%; background-color: var(--gold); color: var(--ink); transform: rotate(2deg); }
  .nfc-chip, .nfc-card:after{display: none;}
  .nfc-copy .tag{display:inline-flex;margin-top:24px;padding:10px 15px;border:1px solid rgba(33,26,22,.25);border-radius:100px;font-weight:700}

  .express{background:var(--paper-dim);color:var(--ink)}
  .express .split{grid-template-columns:minmax(420px,1.2fr) minmax(0,.8fr)}
  .express h2,.express h3{color:var(--ink)}
  .express p{color:var(--ink-soft)}
  .express .light-link{color:var(--ink)}
  .express .light-link span{border-color:var(--ink)}
 .press-visual {
  position: relative;
  min-height: 560px;
  background: url("../assets/images/express printing.webp") center / cover no-repeat;
  overflow: hidden;
  border: 1px solid rgba(246,242,234,.12);
  border-radius: 6px;
}

.press-visual::before,
.press-visual::after {
  display: none;
}

  .footer{display:flex;justify-content:space-between;gap:24px;padding:26px clamp(22px,7vw,110px);background:#120d0b;color:rgba(246,242,234,.68);font-size:13px}

  @media (max-width:820px){
    .services-head{display:block}.services-head p{margin-top:20px}.service-grid{grid-template-columns:1fr}.split,.express .split{grid-template-columns:1fr}.nfc-stage{min-height:430px}.press-visual{min-height:440px}.express-copy{order:-1}
  }
  @media (max-width:640px){
    .logo{font-size:clamp(31px,10vw,44px);max-width:45vw}.nav-bottom{gap:6px}.nav-bottom .btn,.nav-top .btn{padding:8px 10px;font-size:11px}.chapter{padding-inline:20px}.chapter h2{font-size:clamp(38px,13vw,60px)}.scene2{min-height:86vh}.nfc-stage{min-height:360px}.nfc-card{padding:20px;border-radius:12px}.press-visual{min-height:350px}.floating-nav .links{gap:5px}.btn-sm{padding:7px 9px;font-size:11px}.footer{flex-direction:column}
  }

  @media (prefers-reduced-motion:no-preference){
    .logo, .nav-top, .nav-bottom{ animation:fadeIn .8s ease both; }
    .nav-top{ animation-delay:.1s; }
    .nav-bottom{ animation-delay:.2s; }
  }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

/* Multi-page navigation additions retain the original glass-button treatment. */
.home-page{background:var(--ink)}
.logo-mini{text-decoration:none}
.nav-bottom{align-items:center}
.nav-bottom a[aria-current="page"],.floating-nav a[aria-current="page"]{background:rgba(193,89,47,.82);border-color:rgba(246,242,234,.7)}
.home-nav-toggle{display:none;position:absolute;right:clamp(18px,3.6vw,40px);top:clamp(14px,3.2vw,34px);z-index:6;padding:10px 14px;border:1px solid rgba(246,242,234,.45);border-radius:3px;background:rgba(33,26,22,.72);color:var(--paper);font:600 14px 'Archivo',sans-serif;cursor:pointer}
.home-more{margin-top:28px}
.light-link{color:var(--paper)}
.light-link span{border-color:var(--paper)}
@media(max-width:900px){
  .home-nav-toggle{display:inline-flex}
  .nav-bottom{position:absolute;left:18px;right:18px;top:76px;display:none;flex-direction:column;align-items:stretch;padding:12px;background:rgba(20,15,12,.94);border:1px solid rgba(246,242,234,.15);backdrop-filter:blur(10px)}
  .nav-bottom[data-open="true"]{display:flex}
  .nav-bottom .btn,.nav-bottom a{padding:10px 14px;font-size:13px}
  .floating-nav .links{max-width:72vw;overflow-x:auto;padding-bottom:2px}
}
@media(max-width:640px){.floating-nav .logo-mini{font-size:22px}.floating-nav .links a{padding:7px 8px;font-size:10px}}