/* ============================================================
   Najmees Computers — shared stylesheet for the secondary pages
   (Contact, Corporate & Bulk, Warranty & Grading).
   Uses the exact same design tokens as index.html / catalog.html
   so the look stays consistent. Dark theme is the default.
   ============================================================ */

:root{
  --ink: #14213D;
  --paper: #E9EBE2;
  --paper-bright: #F5F6F0;
  --brass: #C08A28;
  --teal: #2F6B5E;
  --charcoal: #1F2422;
  --text-2: #3a423f;
  --muted: #5f6763;
  --muted-2: #7c8482;
  --line: rgba(20,33,61,0.14);
  --shadow: 0 10px 30px rgba(20,33,61,0.14);
}
[data-theme="dark"]{
  --ink: #F2F3EE;
  --paper: #0A0F17;
  --paper-bright: #121A27;
  --brass: #E7B64A;
  --teal: #6E8C86;
  --charcoal: #d4dad6;
  --text-2: #c3cbc4;
  --muted: #9aa2a0;
  --muted-2: #7c8482;
  --line: rgba(242,243,238,0.10);
  --shadow: 0 18px 50px rgba(0,0,0,0.55);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
body{
  background:var(--paper); color:var(--charcoal);
  font-family:'IBM Plex Sans', sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
h1,h2,h3,.display{
  font-family:'Oswald', sans-serif; text-transform:uppercase;
  letter-spacing:0.02em; color:var(--ink); text-wrap:balance;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1320px; margin:0 auto; padding:0 24px;}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* ===== NAV ===== */
header{position:sticky; top:16px; z-index:50; background:transparent;}
.nav-pill{
  display:flex; align-items:center; justify-content:space-between; height:68px;
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 58%), rgba(245,246,240,0.70);
  backdrop-filter:blur(22px) saturate(190%); -webkit-backdrop-filter:blur(22px) saturate(190%);
  border:1px solid rgba(20,33,61,0.10); border-radius:16px; padding:0 12px 0 16px;
  box-shadow:0 8px 30px rgba(20,33,61,0.10),
             inset 0 1px 0 rgba(255,255,255,0.65),
             inset 0 -1px 0 rgba(20,33,61,0.05);
  width:100%;
  transition:height .35s cubic-bezier(.22,.61,.36,1), background-color .35s ease, box-shadow .35s ease;
}
[data-theme="dark"] .nav-pill{
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 58%), rgba(18,28,41,0.76);
  border-color:rgba(233,235,226,0.14);
  box-shadow:0 18px 50px rgba(0,0,0,0.5),
             inset 0 1px 0 rgba(255,255,255,0.10),
             inset 0 -1px 0 rgba(0,0,0,0.30);
}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none;}
.brand-mark{width:44px; height:44px; flex-shrink:0; fill:none; stroke-width:9; overflow:visible; transition:transform .3s ease;}
.brand-mark .bm-c{stroke:var(--brass);}
.brand-mark .bm-n{stroke:var(--ink);}
.brand:hover .brand-mark{transform:scale(1.06);}
.brand-name{font-family:'Oswald', sans-serif; font-weight:700; font-size:20px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); line-height:1.1;}
.brand-sub{font-family:'Inter', sans-serif; font-size:9.5px; letter-spacing:0.14em; color:var(--brass); text-transform:uppercase; margin-top:1px;}
.nav-links{position:relative; display:flex; align-items:center; gap:2px; font-size:13.5px; font-weight:500;}
.nav-indicator{
  position:absolute; top:50%; left:0; width:0; height:36px; transform:translateY(-50%);
  border-radius:999px; opacity:0; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.26));
  border:1px solid rgba(20,33,61,0.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 14px rgba(20,33,61,0.12);
  transition:left .34s cubic-bezier(.22,.68,.32,1), width .34s cubic-bezier(.22,.68,.32,1), opacity .25s ease;
}
[data-theme="dark"] .nav-indicator{
  background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border-color:rgba(255,255,255,0.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.24), 0 6px 16px rgba(0,0,0,0.38);
}
.nav-links a{
  position:relative; z-index:1; text-decoration:none; white-space:nowrap; color:var(--ink); opacity:0.64;
  padding:9px 14px; border-radius:999px; transition:opacity .2s ease, color .2s ease;
}
.nav-links a:hover{opacity:1;}
.nav-links a.active{opacity:1; color:var(--brass);}
.nav-cta{
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.08)), var(--teal);
  color:#fff; padding:11px 20px; border-radius:999px;
  font-weight:600; font-size:14px; letter-spacing:0.01em; text-decoration:none; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.24), 0 6px 16px rgba(47,107,94,0.26);
  transition:transform .18s cubic-bezier(.16,.84,.44,1), box-shadow .15s;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 24px rgba(47,107,94,0.36);}
.nav-cta:active{transform:translateY(0) scale(.97); transition-duration:.06s;}
/* scroll edge effect (desktop): the pill tightens + gains weight once content scrolls under it */
@media (min-width:1081px){
  header{transition:top .35s cubic-bezier(.22,.61,.36,1);}
  header.nav-condensed{top:8px;}
  header.nav-condensed .nav-pill{
    height:60px; background:rgba(245,246,240,0.92);
    box-shadow:0 14px 38px rgba(20,33,61,0.18), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(20,33,61,0.05);
  }
  [data-theme="dark"] header.nav-condensed .nav-pill{
    background:rgba(14,22,34,0.94);
    box-shadow:0 26px 52px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.35);
  }
}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0;}
.theme-switch{
  box-sizing:border-box; position:relative; width:52px; height:26px; flex-shrink:0;
  border:1px solid var(--line); border-radius:999px; background:rgba(128,128,128,0.22);
  padding:0; cursor:pointer; transition:background .3s ease; -webkit-tap-highlight-color:transparent;
}
.theme-switch:hover{border-color:var(--brass);}
[data-theme="dark"] .theme-switch{background:rgba(212,166,58,0.45);}
.theme-switch-knob{
  position:absolute; top:50%; left:3px; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; background:var(--paper-bright);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
  transition:transform .32s cubic-bezier(.4,0,.2,1), background .3s ease;
}
[data-theme="dark"] .theme-switch-knob{transform:translate(23px,-50%);}
.dark-toggle-icon{font-size:11px; line-height:1;}
.nav-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.nav-links-cta-mobile{display:none;}
@media (max-width:1080px){
  /* ===== mobile menu: clean full-screen sheet with a solid top bar ===== */
  .nav-toggle{display:block; position:relative; z-index:62;}
  .nav-cta{display:none;}

  /* the sliding sheet of links, flush under the bar, left-aligned with dividers */
  .nav-links{
    position:fixed; top:64px; left:0; right:0; bottom:0; z-index:58;
    background:var(--paper-bright); font-size:inherit;
    flex-direction:column; justify-content:flex-start; align-items:stretch; gap:0;
    padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 20px);
    overflow-y:auto; display:flex;
    visibility:hidden; opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility .32s;
  }
  .nav-links.open{visibility:visible; opacity:1; transform:none; pointer-events:auto;}
  .nav-links a{
    color:var(--ink); text-decoration:none;
    font-family:'IBM Plex Sans', sans-serif; text-transform:none; letter-spacing:normal;
    font-size:16px; font-weight:500; padding:17px 24px; border-bottom:1px solid var(--line);
    opacity:0; transform:translateX(18px);
    transition:opacity .35s ease, transform .42s cubic-bezier(.22,.61,.36,1);
  }
  .nav-links.open a{opacity:1; transform:none;}
  .nav-links.open a:nth-child(1){transition-delay:.05s;}
  .nav-links.open a:nth-child(2){transition-delay:.10s;}
  .nav-links.open a:nth-child(3){transition-delay:.15s;}
  .nav-links.open a:nth-child(4){transition-delay:.20s;}
  .nav-links.open a:nth-child(5){transition-delay:.25s;}
  .nav-links.open a:nth-child(6){transition-delay:.30s;}
  .nav-links.open a:nth-child(7){transition-delay:.35s;}
  .nav-links.open a:nth-child(8){transition-delay:.40s;}
  .nav-links a.active{color:var(--brass); font-weight:600;}

  /* primary action pushed to the bottom of the sheet */
  .nav-links-cta-mobile{
    order:1; margin:auto 24px 0; display:block; text-align:center;
    background:var(--teal); color:#fff !important; border:none !important;
    padding:17px 20px; border-radius:6px; font-weight:600; letter-spacing:0.03em;
    opacity:1 !important;
  }

  /* header flattens into a solid, edge-to-edge bar while the menu is open */
  body.menu-open{overflow:hidden;}
  body.menu-open header{position:fixed; top:0; left:0; right:0; z-index:60;}
  body.menu-open header .wrap{padding:0;}
  body.menu-open .nav-pill{
    height:64px; width:100%; border-radius:0; border:none;
    border-bottom:1px solid var(--line); box-shadow:none;
    background:var(--paper-bright); backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:0 20px;
  }

  /* hamburger morphs into an X */
  .nav-toggle span{transition:transform .25s ease, opacity .2s ease;}
  body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.menu-open .nav-toggle span:nth-child(2){opacity:0;}
  body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media (prefers-reduced-motion:reduce){
  .nav-links, .nav-links a{transition:none !important; transform:none !important;}
}

/* keep the header from overflowing on phones (brand must shrink so the menu button never clips off) */
@media (max-width:560px){
  .wrap{padding:0 16px;}
  .nav-pill{height:58px; padding:0 12px;}
  .brand{flex-shrink:1; min-width:0; gap:9px;}
  .brand > div{min-width:0;}
  .brand-mark{width:36px; height:36px; font-size:20px; border-radius:10px;}
  .brand-name{font-size:16px; letter-spacing:0.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .brand-sub{display:none;}
  .nav-actions{gap:9px;}
  .nav-toggle{flex-shrink:0;}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:6px;}
}

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:3px;
  font-weight:600; font-size:14.5px; text-decoration:none; border:1.5px solid transparent;
  transition:transform .15s, box-shadow .15s; cursor:pointer; font-family:'IBM Plex Sans', sans-serif;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--ink); color:var(--paper-bright); box-shadow:var(--shadow);}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent;}

/* ===== page hero (secondary pages) ===== */
.page-hero{padding:72px 0 44px;}
.page-hero .eyebrow{
  font-family:'Inter', sans-serif; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--brass); margin-bottom:14px;
}
.page-hero h1{font-size:clamp(30px,5vw,52px); line-height:1.04; margin-bottom:18px;}
.page-hero p{font-size:clamp(15px,1.6vw,18px); color:var(--text-2); max-width:620px;}

/* ===== generic section ===== */
.section{padding:40px 0;}
.section-head{margin-bottom:28px; max-width:640px;}
.section-head .eyebrow{
  font-family:'Inter', sans-serif; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--teal); margin-bottom:10px;
}
.section-head h2{font-size:clamp(26px,3vw,36px); line-height:1.1;}
.prose p{color:var(--text-2); font-size:15.5px; margin-bottom:14px; max-width:680px;}

/* cards grid */
.card-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
@media (max-width:900px){ .card-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:560px){ .card-grid{grid-template-columns:1fr;} }
.card{
  background:var(--paper-bright); border:1.5px solid var(--line); border-radius:12px; padding:26px 24px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); border-color:var(--teal); box-shadow:var(--shadow);}
.card .card-ico{font-size:22px; margin-bottom:12px;}
.card h3{font-size:16px; text-transform:none; font-family:'IBM Plex Sans', sans-serif; font-weight:600; color:var(--ink); margin-bottom:8px;}
.card p{color:var(--text-2); font-size:14px;}

/* numbered steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; counter-reset:step;}
.step{
  position:relative; background:var(--paper-bright); border:1.5px solid var(--line);
  border-radius:12px; padding:26px 22px 22px;
}
.step::before{
  counter-increment:step; content:counter(step);
  display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background:var(--ink); color:var(--paper-bright); font-family:'Oswald',sans-serif; font-weight:600; font-size:17px; margin-bottom:14px;
}
.step h3{font-size:15.5px; text-transform:none; font-family:'IBM Plex Sans',sans-serif; font-weight:600; color:var(--ink); margin-bottom:6px;}
.step p{color:var(--text-2); font-size:14px;}

/* grade badges */
.grade-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px;}
.grade{background:var(--paper-bright); border:1.5px solid var(--line); border-radius:12px; padding:24px; border-top:3px solid var(--brass);}
.grade .tag{
  display:inline-block; font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.04em;
  background:var(--brass); color:#14213D; padding:4px 12px; border-radius:4px; font-size:13px; margin-bottom:12px;
}
.grade h3{font-size:16px; text-transform:none; font-family:'IBM Plex Sans',sans-serif; font-weight:600; margin-bottom:8px; color:var(--ink);}
.grade p{color:var(--text-2); font-size:14px;}

/* checklist */
.checklist{list-style:none; display:grid; gap:12px; max-width:680px;}
.checklist li{position:relative; padding-left:30px; color:var(--text-2); font-size:15px;}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--teal); font-weight:700;}

/* ============================================================
   Bespoke section layouts (Corporate & Warranty)
   Replace the repeated emoji/tag card rhythm with distinct,
   on-brand families: an indexed ledger, a step timeline,
   big-letter grades, and a diagnostic report. No emoji, no
   identical boxes stacked three-across.
   ============================================================ */

/* --- indexed ledger: corporate "why buy in bulk" --- */
.ledger-grid{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 56px;}
.lg-item{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  padding:24px 2px; border-top:1px solid var(--line);
  transition:border-color .2s ease;
}
.lg-item:hover{border-color:var(--brass);}
.lg-index{
  font-family:'Oswald', sans-serif; font-weight:600; font-size:26px; line-height:1;
  color:var(--brass); letter-spacing:0.01em; min-width:30px;
}
.lg-item h3{font-size:16px; text-transform:none; font-family:'IBM Plex Sans', sans-serif; font-weight:600; color:var(--ink); margin-bottom:6px; letter-spacing:0;}
.lg-item p{color:var(--text-2); font-size:14px; line-height:1.55;}
@media (max-width:720px){ .ledger-grid{grid-template-columns:1fr; gap:0;} }

/* --- step timeline: corporate process --- */
.flow{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; position:relative;}
.flow-step{position:relative; padding-top:50px;}
.flow-step::before{content:''; position:absolute; top:17px; left:36px; right:-30px; height:2px; background:var(--line);}
.flow-step:last-child::before{display:none;}
.flow-node{
  position:absolute; top:0; left:0; width:36px; height:36px; border-radius:50%;
  background:var(--ink); color:var(--paper-bright); display:flex; align-items:center; justify-content:center;
  font-family:'Oswald', sans-serif; font-weight:600; font-size:15px; z-index:1;
}
.flow-step h3{font-size:15.5px; text-transform:none; font-family:'IBM Plex Sans', sans-serif; font-weight:600; color:var(--ink); margin-bottom:6px;}
.flow-step p{color:var(--text-2); font-size:14px; line-height:1.55;}
@media (max-width:860px){
  .flow{grid-template-columns:1fr; gap:0;}
  .flow-step{padding:0 0 28px 54px; min-height:48px;}
  .flow-step::before{top:36px; left:17px; right:auto; bottom:2px; width:2px; height:auto;}
  .flow-step:last-child{padding-bottom:0;}
}

/* --- big-letter grades: warranty A / B / C --- */
.grades{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.grade-col{position:relative; padding-top:22px; border-top:2px solid var(--ink);}
.grade-letter{
  display:block; font-family:'Oswald', sans-serif; font-weight:700; font-size:68px; line-height:.85;
  color:var(--brass); margin-bottom:16px; letter-spacing:0;
}
.grade-col h3{font-size:16px; text-transform:none; font-family:'IBM Plex Sans', sans-serif; font-weight:600; color:var(--ink); margin-bottom:8px;}
.grade-col p{color:var(--text-2); font-size:14px; line-height:1.55;}
@media (max-width:720px){ .grades{grid-template-columns:1fr; gap:6px;} .grade-col{padding-bottom:18px;} }

/* --- diagnostic report rows: warranty testing checklist --- */
.report{display:grid; grid-template-columns:1fr 1fr; gap:0 56px;}
.report-row{
  display:grid; grid-template-columns:185px 1fr; gap:18px; align-items:baseline;
  padding:20px 0; border-top:1px solid var(--line);
}
.report-label{font-family:'Inter', sans-serif; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--teal);}
.report-row p{color:var(--text-2); font-size:14px; line-height:1.55;}
@media (max-width:980px){ .report{grid-template-columns:1fr;} }
@media (max-width:560px){ .report-row{grid-template-columns:1fr; gap:6px;} }

/* ============================================================
   Cinematic scroll band (warranty)
   A pinned, full-viewport stage: the statement assembles
   word-by-word while a parallax backdrop drifts. Driven by
   requestAnimationFrame in site.js; collapses to static under
   reduced motion.
   ============================================================ */
.cinema{position:relative; height:140vh;}
.cinema-stage{
  position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--paper);
}
/* parallax glow layer (no image needed) */
.cinema-bg{
  position:absolute; inset:-10%; z-index:0; pointer-events:none; will-change:transform;
  background:
    radial-gradient(60% 55% at 18% 22%, rgba(192,138,40,0.20), transparent 60%),
    radial-gradient(55% 55% at 84% 80%, rgba(47,107,94,0.18), transparent 62%);
}
[data-theme="dark"] .cinema-bg{
  background:
    radial-gradient(60% 55% at 18% 22%, rgba(231,182,74,0.15), transparent 60%),
    radial-gradient(55% 55% at 84% 80%, rgba(110,140,134,0.16), transparent 62%);
}
/* faint static grid for texture, masked to a soft vignette */
.cinema-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(circle at 50% 48%, #000 34%, transparent 78%);
  mask-image:radial-gradient(circle at 50% 48%, #000 34%, transparent 78%);
}
.cinema-content{position:relative; z-index:1; text-align:center; max-width:1040px; padding:0 24px; will-change:transform, opacity;}
.cinema-kicker{font-family:'Inter', sans-serif; font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--brass); margin-bottom:22px;}
.cinema-head{
  font-family:'Oswald', sans-serif; text-transform:uppercase; color:var(--ink);
  font-size:clamp(44px, 10vw, 132px); line-height:0.9; letter-spacing:0.005em;
  display:flex; gap:0 0.32em; justify-content:center; flex-wrap:wrap;
}
.cinema-head .cw{display:inline-block; will-change:transform, opacity;}
.cinema-sub{margin:26px auto 0; max-width:580px; font-size:clamp(15px,1.7vw,18px); line-height:1.55; color:var(--text-2); will-change:transform, opacity;}
@media (max-width:640px){ .cinema{height:125vh;} }
@media (prefers-reduced-motion:reduce){
  .cinema{height:auto;}
  .cinema-stage{position:relative; height:auto; min-height:52vh; padding:64px 0;}
  .cinema-bg, .cinema-content{transform:none !important;}
  .cinema-head .cw, .cinema-sub, .cinema-kicker{opacity:1 !important; transform:none !important;}
}

/* contact info + map */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:32px; align-items:start;}
.info-list{display:flex; flex-direction:column; gap:18px;}
.info-item{display:flex; gap:14px; align-items:flex-start;}
.info-item .ico{font-size:20px; width:42px; height:42px; flex-shrink:0; border-radius:10px;
  background:var(--paper-bright); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;}
.info-item h4{font-size:13px; text-transform:uppercase; letter-spacing:0.05em; font-family:'Inter', sans-serif; color:var(--teal); margin-bottom:4px;}
.info-item a, .info-item p{color:var(--text-2); font-size:15px; text-decoration:none; display:block;}
.info-item a:hover{color:var(--brass);}
.map-embed{border-radius:14px; overflow:hidden; border:1.5px solid var(--line); box-shadow:var(--shadow); min-height:320px;}
.map-embed iframe{width:100%; height:100%; min-height:320px; border:0; display:block; filter:saturate(0.95);}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }

/* shop photo */
.shop-photo{border-radius:14px; overflow:hidden; border:1.5px solid var(--line); box-shadow:var(--shadow); position:relative;}
.shop-photo img{width:100%; height:auto; display:block;}
.delivery{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center;}
.delivery-copy h2{font-size:clamp(24px,3vw,34px); margin-bottom:14px;}
.delivery-copy p{color:var(--text-2); font-size:16px; line-height:1.65; margin-bottom:6px;}
.delivery-copy ul{list-style:none; margin:18px 0 0;}
.delivery-copy li{padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--text-2);}
.delivery-copy li::before{content:'—'; color:var(--brass); margin-right:10px;}
@media (max-width:900px){ .delivery{grid-template-columns:1fr; gap:28px;} }

/* ===== CTA band + query form ===== */
.cta-band{
  background:linear-gradient(135deg, rgba(37,86,74,0.86), rgba(26,61,53,0.80));
  color:#fff; padding:64px 0; position:relative; overflow:hidden; margin-top:40px;
  border-top:1px solid rgba(255,255,255,0.16); border-bottom:1px solid rgba(255,255,255,0.10);
}
.cta-band .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:32px;}
.cta-band h2{color:#fff; font-size:clamp(24px,3vw,32px); max-width:480px;}
.cta-band .btn-primary{background:var(--brass); color:#14213D;}
.cta-copy{flex:1; min-width:280px; display:flex; flex-direction:column; align-items:flex-start; gap:20px;}
.query-form{flex:1; min-width:300px; max-width:440px; display:flex; flex-direction:column; gap:12px;}
.query-form .qf-row{display:flex; gap:12px; flex-wrap:wrap;}
.query-form .qf-row > *{flex:1; min-width:140px;}
.query-form input, .query-form textarea{
  width:100%; font-family:'IBM Plex Sans', sans-serif; font-size:14px; padding:11px 14px; border-radius:8px;
  color:#fff; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.28);
  transition:border-color .18s ease, background .18s ease;
}
.query-form input::placeholder, .query-form textarea::placeholder{color:rgba(255,255,255,0.62);}
.query-form input:focus, .query-form textarea:focus{outline:none; border-color:var(--brass); background:rgba(255,255,255,0.16);}
.query-form textarea{resize:vertical; min-height:88px;}
.query-form .qf-actions{display:flex; gap:10px; flex-wrap:wrap;}
.query-form .qf-actions .btn{flex:1; min-width:150px; justify-content:center; font-size:14px;}
.query-form .btn-primary{border:none;}
.query-form .qf-email{background:#fff; color:#14213D; border:1px solid #fff; font-weight:600;}
.query-form .qf-email:hover{background:rgba(255,255,255,0.86); transform:translateY(-1px);}
.query-form .qf-hint{font-size:12px; color:rgba(255,255,255,0.72); margin:0;}

/* ===== footer ===== */
footer{padding:56px 0 40px; border-top:1px solid var(--line);}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 0.9fr 0.9fr; gap:32px; margin-bottom:40px;}
.social-row{display:flex; gap:10px;}
.foot-grid a.social-icon{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:background .2s ease, color .2s ease;
}
.social-icon svg{display:block;}
.foot-grid a.social-icon:hover{background:var(--teal); color:#fff;}
.foot-grid h5{font-family:'Inter', sans-serif; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); margin-bottom:14px;}
.foot-grid p, .foot-grid a{font-size:14px; color:var(--text-2); text-decoration:none; display:block; margin-bottom:8px;}
.foot-grid a:hover{color:var(--brass);}
.foot-bottom{font-family:'Inter', sans-serif; font-size:12px; color:var(--muted); padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; gap:28px;} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} }

/* floating WhatsApp */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:60; width:58px; height:58px; border-radius:50%;
  background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px;
  text-decoration:none; box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.22,.61,.36,1);
  animation:waPulse 2.6s infinite;
}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(47,107,94,0.45), var(--shadow);}
  70%{box-shadow:0 0 0 14px rgba(47,107,94,0), var(--shadow);}
  100%{box-shadow:0 0 0 0 rgba(47,107,94,0), var(--shadow);}
}
.wa-float:hover{transform:scale(1.07);}
.wa-float:active{transform:scale(.92); transition-duration:.06s;}
@media (prefers-reduced-motion:reduce){ .wa-float{animation:none;} }

/* ============================================================
   Apple-style interaction polish
   Fluid-interface principles: respond on pointer-DOWN, instantly;
   keep press feedback continuous; no dead default tap-flash;
   clear keyboard focus; honor reduced motion.
   ============================================================ */

/* no default grey/blue tap flash — we supply our own press states */
a, button, .btn, .nav-cta, .social-icon, .wa-float, .theme-switch, .card, input, textarea{
  -webkit-tap-highlight-color:transparent;
}

/* buttons: lift on hover, press in instantly on pointer-down */
.btn{transition:transform .14s cubic-bezier(.22,.61,.36,1), box-shadow .14s ease;}
.btn:active{transform:translateY(0) scale(.975); transition-duration:.06s;}

/* primary nav CTA — lift + deeper glow (defined with the nav styles above) */
.nav-cta:active{transform:translateY(0) scale(.97); transition-duration:.06s;}

/* cards: subtle press so touch feels direct, not just hover */
.card:active{transform:translateY(-1px) scale(.993); transition-duration:.08s;}

/* social icons: include transform so the press reads */
.foot-grid a.social-icon{transition:background .2s ease, color .2s ease, transform .14s cubic-bezier(.22,.61,.36,1);}
.foot-grid a.social-icon:active{transform:scale(.92); transition-duration:.06s;}

/* query-form email button press */
.query-form .qf-email:active{transform:translateY(0) scale(.975); transition-duration:.06s;}

/* keyboard users get a clear, on-brand focus ring (mouse/touch don't) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-cta:focus-visible,
.social-icon:focus-visible, .theme-switch:focus-visible, .nav-links a:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px; border-radius:4px;
}

/* reduced motion: keep meaning (opacity/color), drop the movement */
@media (prefers-reduced-motion:reduce){
  .btn, .card, .wa-float, .nav-cta, .foot-grid a.social-icon, .theme-switch-knob, .query-form .qf-email{
    transition:none;
  }
  .btn:hover, .btn:active, .card:hover, .card:active, .wa-float:hover, .wa-float:active,
  .nav-cta:active, .foot-grid a.social-icon:active, .query-form .qf-email:hover{
    transform:none;
  }
}

/* ===== Inter for numeric step indices (keeps layout/colours; numerals only) ===== */
.lg-index, .flow-node{
  font-family:'Inter','IBM Plex Sans',sans-serif; font-variant-numeric:tabular-nums;
}

/* ===== CART BUTTON + DRAWER (site-wide) ===== */
.cart-btn{
  position:relative; background:none; border:none; cursor:pointer;
  font-size:20px; padding:6px; line-height:1;
}
.cart-badge{
  position:absolute; top:-4px; right:-6px;
  background:var(--brass); color:var(--ink);
  font-family:'Inter', sans-serif; font-size:10.5px; font-weight:600;
  min-width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.cart-overlay{
  position:fixed; inset:0; background:rgba(20,33,61,0.45);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:70;
}
.cart-overlay.open{opacity:1; pointer-events:auto;}
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:380px; max-width:90vw;
  background:var(--paper-bright); z-index:71; box-shadow:-12px 0 30px rgba(20,33,61,0.2);
  transform:translateX(100%); transition:transform .3s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{padding:22px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.cart-head h3{font-size:17px;}
.cart-close{background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink);}
.cart-items{flex-grow:1; overflow-y:auto; padding:16px 24px;}
.cart-empty{color:var(--muted); font-size:14px; padding:30px 0; text-align:center;}
.cart-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.cart-item img{width:56px; height:56px; object-fit:cover; border-radius:4px; flex-shrink:0;}
.cart-item-info{flex-grow:1;}
.cart-item-info h5{font-size:13.5px; margin-bottom:4px; text-transform:none; font-family:'IBM Plex Sans'; color:var(--ink); font-weight:600;}
.cart-item-info span{font-family:'Inter', sans-serif; font-size:11.5px; color:var(--teal);}
.qty-controls{display:flex; align-items:center; gap:8px; margin-top:6px;}
.qty-controls button{
  width:22px; height:22px; border-radius:3px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink);
  cursor:pointer; font-size:14px; font-weight:600; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s;
}
.qty-controls button:hover{background:var(--paper-bright); border-color:var(--brass);}
.cart-item-info h5{color:var(--ink);}
.cart-item-info span{color:var(--teal);}
.qty-controls .qty-val{font-family:'Inter', sans-serif; font-size:13px; min-width:16px; text-align:center;}
.cart-remove{background:none; border:none; color:#b5493f; font-size:11.5px; cursor:pointer; margin-top:4px; font-family:'Inter', sans-serif; padding:0;}
.cart-foot{padding:20px 24px; border-top:1px solid var(--line);}
.cart-note{font-size:11.5px; color:var(--muted); margin-bottom:14px; line-height:1.5;}
.cart-foot .btn{width:100%; justify-content:center;}
@media (max-width:480px){
  .cart-drawer{width:100%;}
}

/* ===== Cookie consent banner (site-wide) ===== */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:150;
  background:var(--ink); color:var(--paper-bright); border-radius:10px;
  padding:18px 20px; box-shadow:0 14px 40px rgba(20,33,61,0.3);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  transform:translateY(140%); transition:transform .4s cubic-bezier(.16,.84,.44,1);
  max-width:620px; margin:0 auto;
}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner p{font-size:13px; color:color-mix(in srgb, var(--paper-bright) 85%, transparent); margin:0; flex:1; min-width:220px;}
.cookie-banner a{color:var(--brass); text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:10px; flex-shrink:0;}
.cookie-btn{
  font-family:'IBM Plex Sans'; font-size:13px; font-weight:600; padding:9px 18px;
  border-radius:5px; border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
}
.cookie-btn-accept{background:var(--brass); color:var(--ink);}
.cookie-btn-dismiss{background:transparent; color:color-mix(in srgb, var(--paper-bright) 70%, transparent); border-color:color-mix(in srgb, var(--paper-bright) 25%, transparent);}
@media (max-width:480px){
  .cookie-banner{flex-direction:column; align-items:stretch; text-align:center;}
  .cookie-banner-actions{justify-content:center;}
}

/* ===== Toast notifications (site-wide) ===== */
.toast-container{position:fixed; top:100px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px;}
.toast{
  background:var(--ink); color:var(--paper-bright); padding:14px 20px; border-radius:8px;
  box-shadow:0 10px 30px rgba(20,33,61,0.25); font-family:'IBM Plex Sans', sans-serif;
  font-size:14px; display:flex; align-items:center; gap:10px;
  transform:translateX(120%); transition:transform .3s ease;
}
.toast.show{transform:translateX(0);}
.toast.success{background:var(--teal);}
.toast.error{background:#b5493f;}
.toast-icon{flex-shrink:0; font-weight:700;}
@media (max-width:480px){
  .toast{font-size:13px; padding:12px 16px;}
}