:root{
  /* brand */
  --blue:#a1c2e5;
  --blue-soft:#edf4fb;
  --sage:#c9dad8;
  --green:#3d7a50;
  --green-deep:#1b4d31;
  --orange:#e0662f;
  --light-orange:#f0bea7 ;
  --brown:#a87a45;
  --white:#fff;
  /* surfaces + text */
  --bg:var(--blue-soft);
  --surface:var(--white);
  --text:var(--green-deep);
  --text-soft:#4d6b59;
  /* type */
  --font:'Montserrat','Avenir Next','Century Gothic',system-ui,sans-serif;
  --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.25rem; --fs-xl:1.6rem; --fs-hero:clamp(2.1rem,6vw,3.6rem);
  /* shape + space */
  --radius-sm:12px; --radius:24px; --radius-pill:999px;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem;
  --tabbar-h:64px;
  --max:1080px;
  --shadow:0 6px 20px rgba(27,77,49,.10);

  /* SPACING */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 60px;
    --spacing-3xl: 100px;
    --spacing-4xl: 120px;
}

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

html{scroll-behavior:smooth}

body{font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  overflow-x: hidden;
}
  

a{color:inherit}

:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

svg{width:24px;height:24px;fill:currentColor}

/* splash */
.splash{position:fixed;
  inset:0;
  z-index:100;
  background:var(--blue);
  display:grid;
  place-items:center;
  transition:opacity .5s ease,visibility .5s;
  z-index: 9999;
}

.splash img{width:min(80vw,420px);
  height:auto;
  animation:rise .9s ease both}

.splash.hide{opacity:0;visibility:hidden}

body.has-splash:not(.splash-done){overflow:hidden}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Navbar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: var(--spacing-sm) 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 1000;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.topbar.scrolled {
  background-color: rgba(123, 189, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 5.5%;
}

.brand{display:flex;
  align-items:center;
  gap:.35rem;
  text-decoration:none;
  color:var(--blue-soft);
}

.brand:hover { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}

.brand span{font-weight:800;
  font-size:1.7rem;
  letter-spacing:-.02em
}

.brand small{font-weight:700;
  font-size:.7rem;
  line-height:1
}
.topnav {display: none;}


/* bottom tab bar (mobile) */
.bottom-bar{position:fixed;
  inset:auto 0 0 0;
  z-index:1000;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--surface);
  border-top:2px solid var(--orange)
}

.bottom-bar a,.bottom-bar button{
  display:flex;
  flex-direction:
  column;align-items:center;
  justify-content:center;
  gap:2px;font:inherit;
  font-size:.7rem;
  font-weight:600;
  color:var(--text-soft);
  background:none;
  border:0;
  text-decoration:none;
  cursor:pointer
}

.bottom-bar [aria-current],.bottom-bar button[aria-expanded="true"]{
  color:var(--green-deep)
}

.bottom-bar a[aria-current] {
  color: var(--orange);
}
.bottom-bar [aria-current] svg {
  fill:var(--orange)
}

/* more drawer */
.scrim{position:fixed;
  inset:0;
  z-index:1001;
  background:rgba(27,77,49,.45)
}

.drawer{position:fixed;
  inset:auto 0 0 0;
  z-index:1002;
  background:var(--surface);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:var(--space-1) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
  transform:translateY(0);
  animation:up .25s ease both}
  
.drawer[hidden],.scrim[hidden]{display:none}
.drawer-handle{width:44px;height:5px;border-radius:var(--radius-pill);background:var(--sage);margin:.4rem auto var(--space-1)}
.drawer a{padding:1rem 0;font-weight:700;text-decoration:none;border-bottom:1px solid var(--sage)}
.drawer a:last-child{border-bottom:0}
.drawer [aria-current] svg {
  fill:var(--orange)
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}

  .more-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    color: var(--color-text-light);
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .more-sheet-item:last-child {
    border-bottom: none;
  }

  .more-sheet-item svg {
    width: 22px;
    height: 22px;
    color: var(--green-deep);
  }

  .more-sheet-item.active-link {
    color: var(--orange);
}

.hero {
  background: 
   linear-gradient(90deg, rgba(62, 63, 63, 0.75) 0%, rgba(94, 92, 92, 0.4) 60%, rgba(66, 93, 105, 0.2) 100%), 
    url('images/icc-hero-background-light.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: 70% center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}

.hero-meta {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-soft);
}

.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 14ch;
  margin-bottom: var(--space-2);
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-sub {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-4, 1.5rem);
}

.cta-row{display:flex;
  gap:var(--space-2);
  flex-wrap:wrap}

.btn{display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.5rem;
  border-radius:var(--radius-pill);
  font-weight:700;
  text-decoration:none;
  border:2px solid var(--blue-soft);
  transition:transform .15s ease,background .15s ease
}

.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px}
.btn-primary{background:var(--blue-soft);color:var(--orange)}
.btn-primary:hover{background:var(--white);color:var(--green-deep)}
.btn-ghost{background:transparent;color: var(--blue-soft)}
.btn-ghost:hover{background:var(--blue-soft);color:var(--orange)}

/* sections */
.section-menu{
  margin:30px 2%;
  padding:var(--space-4) 0;
}

.section-menu>h2{
  font-size:var(--fs-xl);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 5.5% var(--space-3)}

/* category carousel */
.cat-wrap{position:relative}
.cat-track{
  display:flex;gap:var(--space-2);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:5.5%;
  padding:0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.cat-track::-webkit-scrollbar{display:none}

.cat-card{
  flex:0 0 85%;
  scroll-snap-align:start;
  background:var(--surface);
  border:2px solid var(--orange);
  border-radius:var(--radius);
  padding:var(--space-2);
  display:flex;flex-direction:column;gap:var(--space-2);
  text-align:center;
}

.cat-img{aspect-ratio:4/4;border-radius:var(--radius-sm);background:var(--sage) center/cover no-repeat}
.cat-card h3{font-size:var(--fs-base);font-weight:700;line-height:1.25}
.cat-btn{
  margin-top:auto;align-self:center;
  padding:.55rem 1.4rem;border-radius:var(--radius-pill);
  border:2px solid var(--green-deep);
  font-size:var(--fs-sm);font-weight:700;text-decoration:none;color:var(--green-deep);
  transition:background .15s ease,color .15s ease;
}
.cat-btn:hover{background:var(--green-deep);color:var(--white)}

.cat-arrow{display:none}

/* dots */
.cat-dots{display:flex;justify-content:center;gap:8px;margin-top:var(--space-3)}
.cat-dot{
  position:relative;
  width:8px;height:8px;padding:0;border:0;
  border-radius:var(--radius-pill);
  background:var(--sage);
  cursor:pointer;
  transition:width .25s ease,background .25s ease;
}
.cat-dot::after{content:"";position:absolute;inset:-10px -4px}   /* bigger tap area */
.cat-dot.active{width:24px;background:var(--orange)}

/* why island coffee club */
.section-why{
  margin:30px 0;
  padding:var(--space-4) 5.5%;
  background: var(--blue);
}
.section-why>h2{
  font-size:var(--fs-xl);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 var(--space-3);
}
.why-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2)}

.why-card{
  background:var(--surface);
  border:2px solid var(--orange);
  border-radius:var(--radius);
  padding:var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-1);
}
.why-num{
  font-size:2.4rem;font-weight:800;line-height:1;
  color:var(--brown);letter-spacing:-.03em;
}
/* accent line that draws in when the card appears */
.why-num::after{
  content:"";display:block;height:4px;width:0;margin-top:var(--space-1);
  border-radius:var(--radius-pill);background:var(--orange);
  transition:width .7s ease calc(var(--i,0) * 120ms + 250ms);
}
.why-card.is-visible .why-num::after{width:48px}
.why-card h3{font-size:var(--fs-lg);font-weight:800;line-height:1.2}
.why-card p{font-size:var(--fs-sm);color:var(--text-soft)}

/* scroll reveal (only active when JS is running) */
.js .reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 120ms);
}
.js .reveal.is-visible{opacity:1;transform:none}


@media (min-width:1100px){
  .why-grid{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .why-num::after{width:48px;transition:none}
}

/* reviews */
.section-reviews{margin:30px 5.5%;padding:var(--space-4) 0}
.section-reviews>h2{
  font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;
  margin:0 0 var(--space-2);
}
.rev-rating{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  margin-bottom:var(--space-3);color:var(--text-soft);font-size:var(--fs-sm);
}
.rev-rating strong{font-size:var(--fs-lg);color:var(--brown)}
.g-logo{width:22px;height:22px}
/* 4.3 out of 5 stars: 86% filled */
.stars{
  letter-spacing:2px;font-size:1.05rem;
  background:linear-gradient(90deg,var(--orange) 86%,var(--sage) 86%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.rev-track{
  display:flex;gap:var(--space-2);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.rev-track::-webkit-scrollbar{display:none}

.rev-card{
  flex:0 0 85%;
  scroll-snap-align:start;
  background:var(--surface);
  border:2px solid var(--orange);
  border-radius:var(--radius);
  padding:var(--space-3);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-3);
}
.rev-card blockquote{font-size:var(--fs-base);line-height:1.6}
.rev-card blockquote::before{
  content:"\201C";display:block;
  font-size:3rem;line-height:.6;font-weight:800;color:var(--orange);
  margin-bottom:var(--space-1);
}
.rev-card footer{font-weight:700;color:var(--brown)}

.section-reviews .cat-dots{margin-top:var(--space-3)}

.link-more {
  text-decoration: none;
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.link-more:hover {
  color: var(--orange);
}

/* final CTA */
.section-cta{margin:30px 5.5%;padding:var(--space-4) 0}
.cta-panel{
  background:var(--green-deep);
  color:var(--blue-soft);
  border-radius:var(--radius);
  padding:var(--space-4) var(--space-3);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.cta-panel h2{
  font-size:clamp(1.7rem,5vw,2.8rem);
  font-weight:800;line-height:1.1;letter-spacing:-.02em;
  max-width:18ch;
  margin-bottom:var(--space-2);
  color:var(--white);
}
.cta-lead{font-size:var(--fs-lg);font-weight:600;max-width:40ch;margin-bottom:var(--space-1);color:var(--blue)}
.cta-text{max-width:56ch;margin-bottom:var(--space-3);opacity:.9}
.cta-panel .cta-row{justify-content:center}
.cta-address{margin-top:var(--space-3);font-size:var(--fs-sm);opacity:.75;max-width:40ch}

/* button hovers tuned for the dark panel */
.cta-panel .btn-primary:hover{background:var(--white);color:var(--green-deep)}
.cta-panel .btn-ghost:hover{background:var(--blue-soft);color:var(--orange)}

/* footer */
.footer{
  margin-top:var(--space-4);
  padding:var(--space-3) 5.5%;
  background:var(--green-deep);
  color:var(--blue-soft);
  text-align:center;
  font-size:var(--fs-sm);
  line-height:1.6;
}
.footer a{color:inherit;text-decoration:none}
.footer a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--orange); color: var(--orange);}
.footer-credit{font-weight:700}

/* mobile: Privacy and Terms live in the More drawer, so hide them here */
.footer-legal{display:none}

@media (min-width:768px){
  .topnav{display:flex;gap:var(--space-3); color: var(--blue-soft);}
  .topnav a{text-decoration:none;font-weight:600;padding:.4rem 0;border-bottom:3px solid transparent}
  .topnav a:hover,.topnav a[aria-current]{border-color:var(--orange); color: var(--green-deep);}

  .bottom-bar,.drawer,.scrim{display:none!important}

  .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 20px;
}

/* Section-Menu */
.cat-card{flex-basis:calc((100% - 3 * var(--space-2)) / 3.4)}
  .cat-wrap{padding-inline:64px} 
  .cat-arrow{
    display:grid;place-items:center;
    position:absolute;top:50%;transform:translateY(-60%);z-index:2;
    width:44px;height:44px;border-radius:50%;
    border:2px solid var(--orange);background:var(--surface);color:var(--green-deep);cursor:pointer;
  }
  .cat-prev{left:4px}
  .cat-next{right:4px}
  .cat-arrow:hover:not(:disabled){background:var(--orange);color:var(--white)}
  .cat-arrow:disabled{opacity:.3;cursor:default}

  /* Seection-Why */
    .why-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
    .section-why{margin:30px 0;}

  /* Section-Reviews  */
  .rev-card{flex-basis:calc((100% - 2 * var(--space-2)) / 2.4)}

  /* Final-CTA */
  .cta-panel{padding:var(--space-5) var(--space-4)}

  /* Footer */
  .footer{padding:var(--space-3) 5.5%;}
  .footer-legal{display:inline}

  body{padding-bottom:0}
}


/* ==========================
    MENU PAGE
============================*/

/* ===== menu page (append to styles.css) ===== */
.menu-hero {
  background: 
   linear-gradient(90deg, rgba(62, 63, 63, 0.75) 0%, rgba(94, 92, 92, 0.4) 60%, rgba(66, 93, 105, 0.2) 100%), 
    url('/images/menu-hero.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}
/* .menu-hero{background:var(--blue);padding:120px 5.5% var(--space-4);} */
.menu-hero h1{font-size:var(--fs-hero);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.2)}
.menu-hero p{margin-top:var(--space-1);max-width:40ch}

.menu-filter{position:sticky;top:80px;z-index:900;background:var(--bg);padding:var(--space-2) 5.5% var(--space-1);border-bottom:2px solid var(--sage)}
.menu-search{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:2px solid var(--orange);border-radius:var(--radius-pill);padding:0 1rem}
.menu-search svg{flex:none;fill:var(--text-soft)}
.menu-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--text);padding:.75rem 0;outline:none}
.menu-search:focus-within{outline:3px solid var(--orange);outline-offset:2px}

.chips{display:flex;gap:.5rem;overflow-x:auto;padding:var(--space-1) 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;white-space:nowrap;font:inherit;font-size:var(--fs-sm);font-weight:700;padding:.5rem 1.1rem;border-radius:var(--radius-pill);border:2px solid var(--sage);background:var(--surface);color:var(--green-deep);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.chips button:hover{border-color:var(--orange)}
.chips button.active{background:var(--green-deep);border-color:var(--green-deep);color:var(--white)}

.menu-body{margin:0 5.5%;padding:var(--space-3) 0 0;scroll-margin-top:170px}
.menu-cat{margin-bottom:var(--space-4);scroll-margin-top:170px}
.menu-cat[hidden],.menu-card[hidden],.add-panel[hidden],.menu-empty[hidden]{display:none}
.menu-cat h2{display:inline-block;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;margin-bottom:var(--space-2);padding-bottom:.35rem;border-bottom:4px solid var(--orange)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:var(--space-2)}

.menu-card{background:var(--surface);border:2px solid var(--orange);border-radius:var(--radius);padding:var(--space-2);display:flex;flex-direction:column;gap:.5rem}
.menu-card h3{font-size:var(--fs-base);font-weight:700;line-height:1.25}
.menu-desc{font-size:var(--fs-sm);color:var(--text-soft)}
.menu-var{font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--green-deep);padding:.5rem .75rem;border:2px solid var(--sage);border-radius:var(--radius-sm);background:var(--surface)}
.menu-foot{margin-top:auto;padding-top:.5rem;display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);flex-wrap:wrap}
.menu-price{font-size:var(--fs-lg);font-weight:800;color:var(--brown)}
.add-panel{display:flex;align-items:center;gap:.5rem}
.qty{display:inline-flex;align-items:center;border:2px solid var(--green-deep);border-radius:var(--radius-pill);overflow:hidden}
.qty button{width:34px;height:34px;border:0;background:transparent;font:inherit;font-size:1.1rem;font-weight:700;color:var(--green-deep);cursor:pointer}
.qty button:hover{background:var(--sage)}
.q-val{min-width:1.6rem;text-align:center;font-weight:700}
.add-open,.add-confirm{font:inherit;font-size:var(--fs-sm);font-weight:700;padding:.55rem 1.2rem;border-radius:var(--radius-pill);border:2px solid var(--green-deep);background:var(--green-deep);color:var(--white);cursor:pointer;transition:background .15s ease}
.add-open:hover,.add-confirm:hover{background:var(--green)}
.add-confirm:disabled{background:var(--orange);border-color:var(--orange);cursor:default}
.menu-empty{text-align:center;padding:var(--space-4) 0;color:var(--text-soft)}
.menu-note{margin:0 5.5%;padding-bottom:6rem;font-size:var(--fs-sm);color:var(--text-soft);text-align:center}

.menu-img{
  aspect-ratio:4/3;
  border-radius:var(--radius-sm);
  background:var(--sage);        /* shows while loading or when a photo is missing */
  overflow:hidden;
  margin-bottom:.25rem;
}
.menu-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Order button (goes to order.html) */
.order-fab{position:fixed;left:5.5%;right:5.5%;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 12px);z-index:950;display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding:.95rem 1.4rem;border-radius:var(--radius-pill);background:var(--green-deep);color:var(--white);font-weight:800;text-decoration:none;box-shadow:var(--shadow)}
.order-fab[hidden]{display:none}
.order-fab:hover{background:var(--green)}
.fab-total{color:var(--blue)}

/* chip arrows: desktop only */
.chips-wrap{position:relative}
.chip-arrow{display:none}

@media (min-width:768px){

  .menu-filter{padding-inline:5.5%}
  .menu-note{padding-bottom:var(--space-4)}
  .order-fab{left:auto;right:24px;bottom:24px;min-width:260px}

  .chips-wrap{padding-inline:48px;}
  .chip-arrow{
    display:grid;place-items:center;
    position:absolute;top:50%;transform:translateY(-50%);
    width:36px;height:36px;border-radius:50%;
    border:2px solid var(--orange);background:var(--surface);color:var(--green-deep);
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
    margin: 0 20px;
  }
  .chip-arrow svg{width:20px;height:20px}
  .chip-prev{left:0}
  .chip-next{right:0}
  .chip-arrow:hover:not(:disabled){background:var(--orange);color:var(--white)}
  .chip-arrow:disabled{opacity:.3;cursor:default}
}


/* ====================
    ORDER-PAGE
===================== */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.order-hero {
  background: 
   linear-gradient(90deg, rgba(62, 63, 63, 0.75) 0%, rgba(94, 92, 92, 0.4) 60%, rgba(66, 93, 105, 0.2) 100%), 
    url('/images/order-hero.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}

.order-hero h1{font-size:var(--fs-hero);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.2)}
.order-hero p{margin-top:var(--space-1);max-width:40ch}
.order-body{max-width:760px;margin:0 auto;padding:var(--space-3) 5.5% var(--space-4)}

/* empty state */
.order-empty{text-align:center;padding:var(--space-4) 0;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.empty-icon{width:112px;height:112px;border-radius:50%;background:var(--sage);display:grid;place-items:center;margin-bottom:var(--space-1)}
.empty-icon svg{width:52px;height:52px;fill:var(--green-deep)}
.order-empty h2{font-size:var(--fs-xl);font-weight:800}
.order-empty p{color:var(--text-soft)}
.empty-btn{margin-top:var(--space-2)}
.empty-btn:hover{background:var(--green);color:var(--white)}
.order-empty .btn-primary{background:var(--green-deep);color:var(--white);border-color:var(--green-deep)}

/* items */
.o-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}
.o-item{display:grid;grid-template-columns:72px 1fr auto;gap:var(--space-2);align-items:center;background:var(--surface);border:2px solid var(--orange);border-radius:var(--radius);padding:var(--space-2)}
.o-img{width:72px;height:72px;border-radius:var(--radius-sm);background:var(--sage);overflow:hidden}
.o-img img{width:100%;height:100%;object-fit:cover;display:block}
.o-info h3{font-size:var(--fs-base);font-weight:700;line-height:1.25}
.o-var{font-size:var(--fs-sm);font-weight:600;color:var(--green)}
.o-each{font-size:.8rem;color:var(--text-soft);margin-bottom:.4rem}
.o-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;gap:.5rem}
.o-price{font-weight:800;color:var(--brown);white-space:nowrap}
.o-remove{width:32px;height:32px;border:0;border-radius:50%;background:transparent;font-size:1.4rem;line-height:1;color:var(--text-soft);cursor:pointer}
.o-remove:hover{background:var(--sage);color:var(--green-deep)}

/* cards */
.o-card{background:var(--surface);border:2px solid var(--sage);border-radius:var(--radius);padding:var(--space-3);margin-bottom:var(--space-2)}
.o-card h2{font-size:var(--fs-lg);font-weight:800;margin-bottom:var(--space-2)}
.otype{border:0;padding:0;margin:0 0 var(--space-2);display:grid;gap:.5rem}
.radio{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border:2px solid var(--sage);border-radius:var(--radius-sm);font-weight:700;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.radio input{accent-color:var(--green-deep);width:18px;height:18px;margin:0}
.radio:has(input:checked){border-color:var(--orange);background:var(--blue-soft)}
.field{margin-bottom:var(--space-2)}
.field label{display:block;margin-bottom:.35rem;font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--orange)}
.field input{width:100%;font:inherit;color:var(--text);padding:.85rem 1rem;border:2px solid var(--sage);border-radius:var(--radius-sm);background:var(--surface)}
.field input:focus{outline:none;border-color:var(--orange)}
.o-saved{font-size:.8rem;color:var(--text-soft)}

/* summary */
.o-summary{background:var(--blue-soft)}
.o-row{display:flex;justify-content:space-between;gap:var(--space-2);font-weight:600}
.o-note{margin:.5rem 0 var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--sage);font-size:.8rem;font-style:italic;color:var(--text-soft)}
.o-total{font-size:var(--fs-xl);font-weight:800;color:var(--orange)}

/* send buttons */
.o-error{margin:var(--space-2) 0;padding:.8rem 1rem;border-radius:var(--radius-sm);background:#fdecea;color:#a12a1a;font-weight:600;font-size:var(--fs-sm)}
.o-send{display:grid;gap:.75rem;margin-top:var(--space-2)}
.send-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;font:inherit;font-weight:800;padding:1rem 1.4rem;border:0;border-radius:var(--radius-pill);color:var(--white);cursor:pointer;transition:transform .15s ease,filter .15s ease}
.send-btn svg{width:22px;height:22px;fill:currentColor}
.send-btn:hover{filter:brightness(1.08)}
.send-btn:active{transform:scale(.98)}
.send-fb{background:#0a7cff}
.send-sms{background:var(--green-deep)}
.o-copied{margin-top:var(--space-2);padding:.8rem 1rem;border-radius:var(--radius-sm);background:var(--sage);color:var(--green-deep);font-weight:600;font-size:var(--fs-sm);text-align:center}
.o-clear{display:block;margin:var(--space-3) auto 0;background:none;border:0;font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--text-soft);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.o-clear:hover{color:var(--orange)}

@media (min-width:600px){
  .o-send{grid-template-columns:1fr 1fr}
  .o-item{grid-template-columns:96px 1fr auto}
  .o-img{width:96px;height:96px}
}


/* ===========================
  CONTACT-PAGE
 ============================ */
[hidden]{display:none!important}

.contact-hero {
  background: 
   linear-gradient(90deg, rgba(62, 63, 63, 0.75) 0%, rgba(94, 92, 92, 0.4) 60%, rgba(66, 93, 105, 0.2) 100%), 
    url('/images/contact-us-hero.png') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}
.contact-hero h1{font-size:var(--fs-hero);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.2)}
.contact-hero p{margin-top:var(--space-1);max-width:40ch}

.c-section{max-width:var(--max);margin:0 auto;padding:var(--space-4) 5.5% 0}
.c-section>h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;margin-bottom:var(--space-3)}
.c-lead{max-width:56ch;margin:calc(var(--space-2) * -1) 0 var(--space-3);color:var(--text-soft)}
#visit{scroll-margin-top:96px}

/* buttons on light backgrounds */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-weight:700;padding:.8rem 1.5rem;border-radius:var(--radius-pill);border:2px solid var(--green-deep);background:var(--green-deep);color:var(--white);text-decoration:none;cursor:pointer;transition:background .15s ease,transform .15s ease}
.c-btn svg{width:20px;height:20px}
.c-btn:hover{background:var(--green)}
.c-btn:active{transform:scale(.97)}
.c-btn:disabled{opacity:.6;cursor:default}

/* info cards */
.c-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
.c-card{background:var(--surface);border:2px solid var(--orange);border-radius:var(--radius);padding:var(--space-3);display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.c-card:hover {background:var(--surface);border:2px solid var(--green-deep);border-radius:var(--radius);padding:var(--space-3);display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.c-icon{width:48px;height:48px;border-radius:50%;background:var(--sage);display:grid;place-items:center}
.c-icon svg{fill:var(--green-deep)}
.c-card h3{font-size:var(--fs-lg);font-weight:800;line-height:1.2}
.c-card p{font-size:var(--fs-sm);color:var(--text-soft);flex:1}
.c-card .c-btn{margin-top:.4rem}

/* form */
.cf{background:var(--surface);border:2px solid var(--sage);border-radius:var(--radius);padding:var(--space-3);display:grid;gap:var(--space-2)}
.cf-row{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
.cf-field label{display:block;margin-bottom:.35rem;font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--orange)}
.cf-field input,.cf-field textarea{width:100%;font:inherit;color:var(--text);padding:.85rem 1rem;border:2px solid var(--sage);border-radius:var(--radius-sm);background:var(--surface);resize:vertical}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--orange)}
.cf-field [aria-invalid]{border-color:#c0392b}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-status{padding:.8rem 1rem;border-radius:var(--radius-sm);font-weight:600;font-size:var(--fs-sm)}
.cf-status.success{background:var(--sage);color:var(--green-deep)}
.cf-status.error{background:#fdecea;color:#a12a1a}
.cf-send{justify-self:start}

/* map */
.c-map{display:block;width:100%;aspect-ratio:4/3;border:0;border-radius:var(--radius);background:var(--sage);margin-bottom:var(--space-3)}

@media (min-width:640px){
  .c-grid{grid-template-columns:repeat(2,1fr)}
  .cf-row{grid-template-columns:1fr 1fr}
  .c-map{aspect-ratio:16/9}
}
@media (min-width:1100px){
  .c-grid{grid-template-columns:repeat(4,1fr)}
  .c-map{aspect-ratio:21/9}
}


/* =========================
  PRIVACY + TERMS - PAGES
  ======================== */

  .privacy-hero {
  background: 
   linear-gradient(90deg, rgba(62, 63, 63, 0.75) 0%, rgba(94, 92, 92, 0.4) 60%, rgba(66, 93, 105, 0.2) 100%), 
    url('/images/hero-privacy.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}

 .terms-hero {
  background: 
   linear-gradient(90deg, rgba(62, 63, 63, 0.75) 0%, rgba(94, 92, 92, 0.4) 60%, rgba(66, 93, 105, 0.2) 100%), 
    url('/images/hero-terms.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}

.privacy-hero h1, .terms-hero h1{font-size:var(--fs-hero);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.2)}
.privacy-hero p, .terms-hero p{margin-top:var(--space-1);max-width:40ch}

.legal{max-width:760px;margin:0 auto;padding:var(--space-4) 5.5% 0}
.legal p,.legal li{line-height:1.7}
.legal p{margin-bottom:var(--space-2)}
.legal h2{font-size:var(--fs-lg);font-weight:800;line-height:1.25;margin:var(--space-4) 0 var(--space-1);padding-top:var(--space-2);border-top:2px solid var(--sage)}
.legal h2:first-of-type{margin-top:var(--space-3)}
.legal ul{padding-left:1.25rem;margin:0 0 var(--space-2);display:grid;gap:.5rem}
.legal a{font-weight:700;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px}
.legal a:hover{color:var(--green)}
.legal-cross{margin-top:var(--space-4)}