/* ===== Barista Bura - design system ===== */
:root{
  --tomato:#c0392b;
  --tomato-dark:#9c2d20;
  --navy:#1b2a4a;
  --cream:#fbf3e6;
  --cream-dark:#f0e3cd;
  --paper:#fffaf2;
  --ink:#241c14;
  --gingham:#e7c9a6;
  --radius-lg:28px;
  --radius-sm:14px;
  --shadow-paper:0 18px 40px -20px rgba(27,42,74,.35);
  --maxw:1180px;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--cream);line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em;line-height:1.1}
p{margin:0 0 1em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:focus-visible{outline:3px solid var(--tomato);outline-offset:2px;border-radius:4px}
section{position:relative}

/* ===== utilities ===== */
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.u-grid{display:grid;gap:28px}
.u-grid-2{grid-template-columns:repeat(2,1fr)}
.u-grid-3{grid-template-columns:repeat(3,1fr)}
.u-mt-lg{margin-top:64px}
.u-mb-lg{margin-bottom:64px}
.u-center{text-align:center}
@media (max-width:760px){.u-grid-2,.u-grid-3{grid-template-columns:1fr}}

/* ===== reveal / motion ===== */
.reveal{opacity:1;transform:none}
.reveal.js-hidden{opacity:0;transform:translateY(26px)}
.reveal.js-hidden.in-view, .reveal.in-view{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.js-hidden{transition:none!important;opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ===== header ===== */
.site-header{background:var(--cream);border-bottom:3px solid var(--navy);position:sticky;top:0;z-index:40}
.site-header__inner{max-width:var(--maxw);margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo__mark{flex-shrink:0}
.logo__word{font-family:var(--font-display);font-size:1.4rem;color:var(--navy);font-weight:700}
.logo__word-accent{color:var(--tomato)}
.logo--footer .logo__word--footer{color:var(--cream)}
.logo__word--footer .logo__word-accent{color:#ff9d85}

.nav-toggle{display:none;background:none;border:2px solid var(--navy);border-radius:10px;padding:6px;color:var(--navy);cursor:pointer}
.site-nav{display:flex;align-items:center;gap:22px;font-weight:600}
.site-nav a{position:relative;padding:4px 2px;color:var(--navy)}
.site-nav a:not(.nav-cart)::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--tomato);transition:right .25s ease}
.site-nav a:not(.nav-cart):hover::after, .site-nav a.is-active::after{right:0}
.nav-cart{display:flex;align-items:center;gap:6px;background:var(--navy);color:var(--cream);padding:8px 14px;border-radius:999px}
.cart-count{background:var(--tomato);color:#fff;border-radius:999px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;padding:0 5px}
.cart-count--bump{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.nav-close{display:none}
.nav-overlay{display:none}

@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .site-nav{position:fixed;top:0;right:0;height:100%;width:min(300px,80vw);background:var(--navy);color:var(--cream);flex-direction:column;align-items:flex-start;padding:80px 26px 26px;gap:20px;
    transform:translateX(100%);visibility:hidden;transition:transform .3s ease, visibility .3s ease;z-index:60}
  .site-nav.is-open{transform:translateX(0);visibility:visible}
  .site-nav a{color:var(--cream)}
  .nav-close{display:inline-flex;position:absolute;top:18px;right:18px;background:none;border:2px solid var(--cream);border-radius:10px;color:var(--cream);padding:5px;cursor:pointer}
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(10,15,30,.5);opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease;z-index:50}
  .nav-overlay.is-open{opacity:1;visibility:visible}
  .nav-cart{margin-top:auto}
}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;padding:13px 26px;border-radius:999px;border:2px solid var(--navy);cursor:pointer;font-size:1rem;position:relative;overflow:hidden;background:transparent;color:var(--navy);min-height:44px;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;left:-100%;width:100%;background:var(--navy);z-index:-1;transition:left .3s ease}
.btn:hover::before{left:0}
.btn:hover{color:var(--cream)}
.btn--accent{background:var(--tomato);border-color:var(--tomato);color:#fff}
.btn--accent::before{background:var(--tomato-dark)}
.btn--accent:hover{color:#fff}
.btn--ghost-dark{border-color:var(--cream);color:var(--cream)}
.btn--ghost-dark::before{background:var(--cream)}
.btn--ghost-dark:hover{color:var(--navy)}
.btn--sm{padding:9px 18px;font-size:.9rem;min-height:38px}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* ===== hero (home) ===== */
.hero{padding:48px 0 80px;position:relative}
.hero__inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero__frame{border:10px solid var(--navy);border-radius:var(--radius-lg);padding:14px;background:var(--paper);box-shadow:var(--shadow-paper);position:relative}
.hero__frame::before{content:"";position:absolute;inset:-22px;background-image:radial-gradient(var(--navy) 0 4px, transparent 5px);background-size:22px 22px;background-position:center;opacity:.12;border-radius:40px;z-index:-1}
.hero__media{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/5;position:relative}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__badge{position:absolute;top:-24px;right:-24px;width:92px;height:92px}
.hero__eyebrow{font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tomato);font-size:.85rem}
.hero h1{font-size:clamp(2.4rem,6vw,4.1rem);color:var(--navy)}
.underline{position:relative;display:inline-block}
.underline svg{position:absolute;left:0;bottom:-6px;width:100%;height:14px}
.underline path{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.1s ease forwards .4s}
@media (prefers-reduced-motion: reduce){.underline path{animation:none;stroke-dashoffset:0}}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__lede{font-size:1.15rem;max-width:40ch}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
@media (max-width:860px){.hero__inner{grid-template-columns:1fr}.hero__frame{order:-1}}

/* ===== scalloped divider ===== */
.scallop{width:100%;height:36px;display:block}
.scallop--flip{transform:rotate(180deg)}

/* ===== gingham texture section ===== */
.gingham{background-color:var(--cream-dark);background-image:
  repeating-linear-gradient(0deg, rgba(27,42,74,.08) 0 2px, transparent 2px 28px),
  repeating-linear-gradient(90deg, rgba(27,42,74,.08) 0 2px, transparent 2px 28px);
  padding:72px 0;position:relative;overflow:hidden}

/* ===== section heading ===== */
.section-heading{text-align:center;max-width:620px;margin:0 auto 44px}
.section-heading .eyebrow{color:var(--tomato);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem}
.section-heading h2{font-size:clamp(1.9rem,4vw,2.6rem);color:var(--navy)}

/* ===== cards (courses) ===== */
.card-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media (max-width:760px){
  .card-strip{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .card-strip .product-card{scroll-snap-align:start}
}
.product-card{background:var(--paper);border:2px solid var(--navy);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease, box-shadow .3s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-paper)}
.product-card__media{aspect-ratio:4/3;overflow:hidden;position:relative}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .product-card__media img{transform:scale(1.08)}
.product-card__tag{position:absolute;top:12px;left:12px;background:var(--tomato);color:#fff;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px}
.product-card__body{padding:20px;display:flex;flex-direction:column;gap:8px;flex-grow:1}
.product-card__body h3{font-size:1.25rem;color:var(--navy)}
.product-card__meta{display:flex;gap:14px;font-size:.85rem;color:var(--tomato-dark);font-weight:600}
.product-card__price{font-weight:800;font-size:1.3rem;color:var(--navy);margin-top:auto}
.product-card__foot{display:flex;align-items:center;justify-content:space-between;padding:0 20px 20px;gap:10px}

/* ===== Aroma Kompas (signature feature) ===== */
.kompas{background:var(--navy);color:var(--cream);border-radius:var(--radius-lg);padding:46px 36px;position:relative;overflow:hidden}
.kompas h2{color:var(--cream)}
.kompas__chips{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.kompas-chip{border:2px solid var(--cream);color:var(--cream);background:transparent;border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer;min-height:44px}
.kompas-chip.is-selected,.kompas-chip:hover{background:var(--tomato);border-color:var(--tomato);color:#fff}
.kompas__result{background:rgba(255,250,242,.08);border:1px dashed var(--cream);border-radius:var(--radius-sm);padding:22px;min-height:120px}
.kompas-result-title{font-weight:800;font-size:1.2rem;margin-bottom:.3em}
.kompas__result .btn{margin-top:10px}

/* ===== testimonial-free place section ===== */
.place{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:80px 0}
.place__media{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:1/1;border:8px solid var(--paper);box-shadow:var(--shadow-paper)}
.place__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.place{grid-template-columns:1fr}}

/* ===== page hero (inner pages) ===== */
.page-hero{background:var(--navy);color:var(--cream);padding:64px 0 56px;position:relative;overflow:hidden}
.page-hero h1{color:var(--cream);font-size:clamp(2rem,4.5vw,3rem)}
.page-hero p{max-width:60ch;opacity:.9}
.breadcrumbs{display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--cream);opacity:.85;margin-bottom:18px}
.breadcrumbs a{text-decoration:underline}
.breadcrumbs span{opacity:.6}

/* ===== prose (legal pages) ===== */
.prose{max-width:72ch;margin:0 auto;padding:56px 20px}
.prose h2{color:var(--navy);margin-top:1.6em;font-size:1.5rem}
.prose h3{color:var(--navy);margin-top:1.2em;font-size:1.15rem}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--tomato-dark);text-decoration:underline}

/* ===== legal table of contents ===== */
.legal-toc{background:var(--paper);border:2px solid var(--navy);border-radius:var(--radius-sm);padding:22px 26px;max-width:72ch;margin:40px auto 0}
.legal-toc h2{margin-top:0;font-size:1.1rem;color:var(--navy)}
.legal-toc ol{margin:0;padding-left:1.3em}
.legal-toc a{color:var(--tomato-dark)}

/* ===== notice ===== */
.notice{border:2px solid var(--navy);background:var(--paper);border-radius:var(--radius-sm);padding:18px 22px;max-width:72ch;margin:24px auto;display:flex;gap:12px}
.notice--warn{border-color:var(--tomato);background:#fff2ee}
.notice svg{flex-shrink:0;color:var(--tomato-dark)}

/* ===== forms ===== */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:640px}
.form-grid .field--full{grid-column:1/-1}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:.92rem;color:var(--navy)}
.field input,.field select,.field textarea{font:inherit;padding:12px 14px;border:2px solid var(--navy);border-radius:10px;background:var(--paper);accent-color:var(--tomato);min-height:44px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--tomato)}
.field-error{color:var(--tomato-dark);font-size:.85rem;min-height:1.2em}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-msg{min-height:1.4em;font-weight:700}
.form-msg--ok{color:#1d7a46}
.form-msg--error{color:var(--tomato-dark)}
.field-inline{display:flex;gap:10px}
.field-inline input{flex-grow:1}
.newsletter-form{display:flex;flex-direction:column;gap:6px}

/* ===== FAQ ===== */
.faq{max-width:760px;margin:0 auto;padding:0 20px 60px;display:flex;flex-direction:column;gap:14px}
.faq-item{border:2px solid var(--navy);border-radius:var(--radius-sm);background:var(--paper);overflow:hidden}
.faq-item summary{padding:18px 22px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;color:var(--navy)}
.faq-item summary::after{content:"+";font-size:1.4rem;line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-item div{padding:0 22px 20px;color:var(--ink)}

/* ===== contact layout ===== */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:var(--maxw);margin:0 auto;padding:56px 20px}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-info__item{display:flex;gap:12px;align-items:flex-start}
.contact-info__item svg{color:var(--tomato-dark);flex-shrink:0;margin-top:3px}
@media (max-width:860px){.contact-layout{grid-template-columns:1fr}}

/* ===== product detail ===== */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:var(--maxw);margin:0 auto;padding:56px 20px}
.product-detail__media{border-radius:var(--radius-sm);overflow:hidden;border:8px solid var(--paper);box-shadow:var(--shadow-paper)}
.product-detail__thumbs{display:flex;gap:10px;margin-top:12px}
.product-detail__thumbs img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid var(--navy);cursor:pointer}
.product-detail__price{font-size:2rem;font-weight:800;color:var(--navy)}
.product-detail__meta{display:flex;gap:20px;margin:14px 0;font-weight:600;color:var(--tomato-dark)}
.product-detail__includes{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.product-detail__includes li{display:flex;gap:10px;align-items:flex-start}
.product-detail__includes svg{color:var(--tomato-dark);flex-shrink:0;margin-top:3px}
@media (max-width:860px){.product-detail{grid-template-columns:1fr}}

/* ===== cart / booking basket ===== */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:30px}
.cart-table th,.cart-table td{text-align:left;padding:14px 10px;border-bottom:2px solid var(--cream-dark)}
.cart-table img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.cart-row__name{display:flex;gap:12px;align-items:center;font-weight:700;color:var(--navy)}
.qty-input{width:64px;padding:8px;border:2px solid var(--navy);border-radius:8px;font:inherit}
.cart-summary{max-width:360px;margin-left:auto;background:var(--paper);border:2px solid var(--navy);border-radius:var(--radius-sm);padding:24px}
.cart-summary__row{display:flex;justify-content:space-between;padding:6px 0}
.cart-summary__total{font-weight:800;font-size:1.3rem;border-top:2px solid var(--cream-dark);margin-top:10px;padding-top:14px}
.cart-empty{text-align:center;padding:60px 20px;max-width:60ch;margin:0 auto}

/* ===== cookie banner ===== */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--navy);color:var(--cream);padding:18px 22px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;z-index:80;box-shadow:0 -10px 30px rgba(0,0,0,.2)}
.cookie-banner p{margin:0;max-width:60ch}
.cookie-banner a{text-decoration:underline;color:var(--cream)}
.cookie-banner__actions{display:flex;gap:10px;flex-shrink:0}

/* ===== footer ===== */
.site-footer{background:var(--navy);color:var(--cream);padding-top:14px;position:relative}
.footer-wave{width:100%;height:30px}
.site-footer__inner{max-width:var(--maxw);margin:0 auto;padding:30px 20px 10px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:32px}
.footer-col h3{font-size:1rem;color:var(--cream);margin-bottom:12px}
.footer-col{display:flex;flex-direction:column;gap:9px}
.footer-col a:hover{text-decoration:underline}
.footer-contact{display:flex;gap:8px;align-items:center}
.footer-contact a{display:flex;gap:8px;align-items:center}
.site-footer__bottom{text-align:center;padding:18px 20px 26px;font-size:.85rem;opacity:.75;border-top:1px solid rgba(255,255,255,.15);margin-top:20px}
@media (max-width:860px){.site-footer__inner{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.site-footer__inner{grid-template-columns:1fr}}

/* ===== grain texture overlay ===== */
.grain-overlay{position:absolute;inset:0;width:100%;height:100%;opacity:.05;pointer-events:none;z-index:0}

/* =========================================================
   COMPONENTS:
   .container - max-width content wrapper with side padding
   .u-grid / .u-grid-2 / .u-grid-3 - utility grid layouts
   .reveal - scroll-reveal wrapper (JS adds .in-view)
   .site-header / .site-nav / .nav-toggle / .nav-overlay - header & mobile nav
   .logo / .logo__mark / .logo__word - logo lockup
   .cart-count - badge showing basket item count
   .btn / .btn--accent / .btn--ghost-dark / .btn--sm / .btn--block - buttons with fill-sweep hover
   .hero / .hero__frame / .hero__media / .hero__badge - home hero composition
   .underline - SVG drawn-underline wrapper around key words
   .scallop - scalloped section divider SVG
   .gingham - gingham-check textured section background
   .section-heading - centered eyebrow + title block
   .card-strip / .product-card - course cards grid/strip
   .kompas / .kompas__chips / .kompas-chip / .kompas__result - Aroma Kompas signature feature
   .place / .place__media - photo + text split section
   .page-hero - inner page header band
   .breadcrumbs - breadcrumb trail
   .prose - long-form legal/text content column
   .legal-toc - table of contents box for legal pages
   .notice / .notice--warn - callout box
   .form-grid / .field / .field-error - form layout and fields
   .hp-field - visually hidden honeypot input
   .form-msg / .form-msg--ok / .form-msg--error - form status message
   .faq / .faq-item - FAQ accordion (details/summary)
   .contact-layout / .contact-info - contact page split layout
   .product-detail / .product-detail__includes - product/service detail layout
   .cart-table / .cart-summary / .cart-empty - booking basket & checkout summary
   .cookie-banner - cookie consent banner
   .site-footer / .footer-col - site footer
   .grain-overlay - subtle SVG grain texture layer
   ========================================================= */

/* ===== hero text content ===== */
.hero__text{display:flex;flex-direction:column;gap:24px}

/* ===== cart row (item in basket) ===== */
.cart-row{display:flex;align-items:center;gap:20px;background:var(--paper);border:2px solid var(--navy);border-radius:var(--radius-sm);padding:18px 22px;margin-bottom:14px}
.cart-row__image{flex-shrink:0}
.cart-row__content{flex-grow:1}
.cart-row__controls{display:flex;gap:12px;align-items:center;flex-shrink:0}
@media (max-width:620px){
  .cart-row{flex-wrap:wrap;gap:12px}
  .cart-row__controls{width:100%;justify-content:flex-start}
}

/* ===== quantity button (increment/decrement) ===== */
.qty-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:2px solid var(--navy);border-radius:8px;background:var(--paper);color:var(--navy);font-weight:700;cursor:pointer;padding:0;min-height:36px;transition:background .2s ease, color .2s ease}
.qty-btn:hover{background:var(--navy);color:var(--cream)}

/* ===== quantity value display ===== */
.qty-val{display:inline-flex;align-items:center;justify-content:center;min-width:40px;font-weight:700;color:var(--navy);font-size:1rem}

/* ===== remove button ===== */
.remove-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:2px solid var(--tomato);border-radius:8px;background:transparent;color:var(--tomato);font-weight:700;font-size:.85rem;cursor:pointer;min-height:36px;transition:background .2s ease, color .2s ease}
.remove-btn:hover{background:var(--tomato);color:#fff}

/* ===== product form ===== */
.product-form{display:flex;flex-direction:column;gap:20px;max-width:500px}

/* wg-contrast-autofix */
#siteNav a.nav-cart { color: #ffffff !important; }