/* ═══════════════════════════════════════════════════════════
   CONCREET — Main Stylesheet
   Art direction: Warm natural / Playful artisan / Geordie soul
   Palette: Warm cream + concrete grey + sage green + terracotta
   Fonts: Playfair Display (display) + DM Sans (body)
═══════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --bg:            #faf7f2;
  --surface:       #f5f0e8;
  --surface-2:     #eee8da;
  --surface-dark:  #2c2a24;
  --divider:       #ddd5c4;
  --border:        #c9c0af;

  /* Text */
  --text:          #2c2a24;
  --text-muted:    #7a7060;
  --text-faint:    #b0a898;
  --text-inv:      #faf7f2;

  /* Accents */
  --sage:          #7a9e7e;      /* botanical green */
  --sage-light:    #d4e8d6;
  --terracotta:    #c4714a;      /* warm call-to-action */
  --terracotta-hover: #a85a35;
  --concrete:      #9a9690;      /* mid concrete grey */
  --concrete-dark: #4a4844;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;

  /* Scale */
  --text-xs:   clamp(0.75rem,  0.7rem + 0.2vw,  0.85rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.3vw,  1rem);
  --text-base: clamp(1rem,     0.96rem + 0.2vw,  1.125rem);
  --text-lg:   clamp(1.2rem,   1rem + 0.8vw,     1.75rem);
  --text-xl:   clamp(1.6rem,   1.2rem + 1.5vw,   2.5rem);
  --text-2xl:  clamp(2.2rem,   1.4rem + 2.8vw,   4rem);
  --text-hero: clamp(3rem,     1.5rem + 5.5vw,   7rem);

  /* Spacing */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem;
  --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem;

  --radius: 12px;
  --radius-sm: 6px;
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 2px 8px rgba(44,42,36,0.07);
  --shadow-md: 0 6px 24px rgba(44,42,36,0.10);
  --shadow-lg: 0 16px 48px rgba(44,42,36,0.14);

  --content: 1200px;
}

/* ─── RESET ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); font-size:var(--text-base); color:var(--text); background:var(--bg); line-height:1.65; }
img,svg,video { display:block; max-width:100%; height:auto; }
h1,h2,h3 { text-wrap:balance; line-height:1.1; }
p,li { text-wrap:pretty; max-width:68ch; }
button { cursor:pointer; background:none; border:none; font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
select { appearance:none; }
::selection { background:var(--sage-light); }
:focus-visible { outline:2px solid var(--sage); outline-offset:3px; border-radius:var(--radius-sm); }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ─── LAYOUT ─── */
.container { width:100%; max-width:var(--content); margin-inline:auto; padding-inline:clamp(var(--s6),5vw,var(--s16)); }
.section-pad { padding-block:clamp(var(--s16),8vw,var(--s24)); }

/* ─── HEADER ─── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(250,247,242,0.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.site-header.scrolled { border-bottom-color:var(--divider); box-shadow:var(--shadow-sm); }
.header-inner {
  display:flex; align-items:center; gap:var(--s8);
  max-width:var(--content); margin-inline:auto;
  padding-inline:clamp(var(--s6),5vw,var(--s16));
  height:72px;
}
.logo { display:flex; align-items:center; gap:var(--s3); flex-shrink:0; }
.logo-text {
  font-family:var(--font-display);
  font-size:clamp(1.1rem,1.3vw,1.4rem);
  font-weight:700; letter-spacing:-0.01em;
}
.logo-dot { color:var(--terracotta); }
.main-nav { display:flex; align-items:center; gap:var(--s8); margin-left:auto; }
.main-nav a {
  font-size:var(--text-sm); font-weight:500;
  letter-spacing:0.04em; color:var(--text-muted);
  transition:color var(--transition);
}
.main-nav a:hover { color:var(--text); }
.main-nav .nav-cta {
  color:var(--terracotta); border:1.5px solid var(--terracotta);
  padding:var(--s2) var(--s5); border-radius:var(--radius-sm);
  transition:background var(--transition), color var(--transition);
}
.main-nav .nav-cta:hover { background:var(--terracotta); color:#fff; }

.mobile-menu-toggle {
  display:none; flex-direction:column; gap:5px;
  width:36px; height:36px; align-items:center; justify-content:center; margin-left:auto;
}
.mobile-menu-toggle span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform var(--transition), opacity var(--transition); transform-origin:center; }
.mobile-menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobile-menu-toggle.open span:nth-child(2){ opacity:0; }
.mobile-menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display:none; position:fixed; inset:0; top:72px; z-index:99;
  background:var(--bg); padding:var(--s12) clamp(var(--s6),5vw,var(--s16));
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity var(--transition), transform var(--transition);
}
.mobile-nav.open { opacity:1; transform:translateY(0); pointer-events:all; }
.mobile-nav nav { display:flex; flex-direction:column; gap:var(--s6); }
.mobile-link { font-family:var(--font-display); font-size:var(--text-xl); font-weight:500; color:var(--text); }
.mobile-cta { color:var(--terracotta); }

@media(max-width:860px){
  .main-nav{display:none;}
  .mobile-menu-toggle{display:flex;}
  .mobile-nav{display:block;}
}

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:500;
  letter-spacing:0.04em; padding:var(--s3) var(--s8);
  border-radius:var(--radius-sm); border:2px solid transparent;
  cursor:pointer; transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  text-decoration:none; white-space:nowrap;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--terracotta); color:#fff; border-color:var(--terracotta); }
.btn-primary:hover { background:var(--terracotta-hover); border-color:var(--terracotta-hover); }
.btn-outline { background:transparent; color:#fff; border-color:rgba(255,255,255,0.5); }
.btn-outline:hover { background:rgba(255,255,255,0.12); border-color:#fff; }
.btn-buy { background:var(--sage); color:#fff; border-color:var(--sage); font-size:var(--text-xs); padding:var(--s2) var(--s5); letter-spacing:0.06em; }
.btn-buy:hover { background:#5d8261; border-color:#5d8261; }
.btn-full { width:100%; }
.text-link { color:var(--terracotta); border-bottom:1px solid rgba(196,113,74,0.3); padding-bottom:1px; transition:border-color var(--transition); }
.text-link:hover { border-color:var(--terracotta); }

/* ─── SECTION HEADERS ─── */
.section-header { text-align:center; max-width:600px; margin-inline:auto; margin-bottom:clamp(var(--s10),4vw,var(--s16)); }
.section-eyebrow { font-size:var(--text-xs); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage); display:block; margin-bottom:var(--s3); }
.section-title { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:500; margin-bottom:var(--s4); }
.section-title em { font-style:italic; font-weight:400; color:var(--text-muted); }
.section-intro { font-size:var(--text-base); color:var(--text-muted); line-height:1.7; }

/* ─── HERO ─── */
.hero {
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end; overflow:hidden; background:#1e1c18;
}
.hero-image-wrap { position:absolute; inset:0; }
.hero-img {
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  transform:scale(1.04); animation:heroZoom 16s ease-out forwards;
}
@keyframes heroZoom { from{transform:scale(1.04)} to{transform:scale(1.0)} }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,28,20,0.2) 0%, rgba(30,28,20,0.4) 50%, rgba(30,28,20,0.88) 100%);
}
.hero-content {
  position:relative; z-index:2; width:100%;
  max-width:var(--content); margin-inline:auto;
  padding-inline:clamp(var(--s6),5vw,var(--s16));
  padding-bottom:clamp(var(--s16),8vw,var(--s24));
  padding-top:120px;
}
.hero-eyebrow {
  font-size:var(--text-xs); letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.55); display:block; margin-bottom:var(--s4);
  animation:fadeUp 1s 0.2s both;
}
.hero-headline {
  font-family:var(--font-display); font-size:var(--text-hero);
  font-weight:500; color:#fff; line-height:0.95;
  margin-bottom:var(--s8); animation:fadeUp 1s 0.4s both; letter-spacing:-0.01em;
}
.hero-headline em { font-style:italic; font-weight:400; color:rgba(255,255,255,0.72); }
.hero-sub {
  font-size:var(--text-lg); font-weight:300; color:rgba(255,255,255,0.7);
  line-height:1.6; margin-bottom:var(--s10); max-width:500px;
  animation:fadeUp 1s 0.6s both;
}
.hero-actions { display:flex; gap:var(--s4); flex-wrap:wrap; animation:fadeUp 1s 0.8s both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* Circular badge */
.hero-badge {
  position:absolute; bottom:clamp(var(--s12),6vw,var(--s20));
  right:clamp(var(--s6),5vw,var(--s16)); z-index:3;
  width:88px; height:88px; border-radius:50%;
  background:var(--terracotta); display:flex; align-items:center; justify-content:center;
  animation:fadeUp 1s 1s both, spin 20s linear infinite;
  box-shadow:0 4px 20px rgba(196,113,74,0.4);
}
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.badge-inner { display:flex; flex-direction:column; align-items:center; animation:counterSpin 20s linear infinite; }
@keyframes counterSpin { from{transform:rotate(0deg)} to{transform:rotate(-360deg)} }
.badge-top,.badge-mid,.badge-bot { color:#fff; font-weight:700; line-height:1.1; }
.badge-top { font-size:1.1rem; }
.badge-mid { font-size:0.75rem; letter-spacing:0.06em; }
.badge-bot { font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; opacity:0.85; }

/* ─── MARQUEE ─── */
.marquee-strip { background:var(--surface-dark); overflow:hidden; white-space:nowrap; padding-block:var(--s4); }
.marquee-track { display:inline-flex; gap:var(--s6); animation:marquee 24s linear infinite; }
.marquee-track span { font-size:var(--text-xs); letter-spacing:0.12em; text-transform:uppercase; color:rgba(250,247,242,0.6); font-weight:500; flex-shrink:0; }
.marquee-track .dot { color:var(--terracotta); opacity:1; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── INTRO STATEMENT ─── */
.intro-statement { background:var(--surface); padding-block:clamp(var(--s12),5vw,var(--s20)); }
.intro-quote {
  max-width:800px; margin-inline:auto; text-align:center;
  border-left:3px solid var(--sage); padding-left:var(--s8);
  text-align:left;
}
.intro-quote p {
  font-family:var(--font-display); font-style:italic;
  font-size:var(--text-lg); font-weight:400; color:var(--text-muted);
  line-height:1.65; max-width:unset;
}

/* ─── PRODUCTS ─── */
.products { background:var(--bg); }
.products-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--s8);
}
.product-card {
  background:var(--surface); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow var(--transition), transform var(--transition);
}
.product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.product-card--featured { border:2px solid var(--sage-light); }
.product-image-wrap { position:relative; overflow:hidden; aspect-ratio:4/3; }
.product-image-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 600ms cubic-bezier(0.16,1,0.3,1); }
.product-card:hover .product-image-wrap img { transform:scale(1.04); }
.product-tag {
  position:absolute; top:var(--s4); left:var(--s4);
  background:var(--terracotta); color:#fff;
  font-size:var(--text-xs); font-weight:600; letter-spacing:0.08em;
  padding:var(--s1) var(--s3); border-radius:var(--radius-sm);
}
.product-body { padding:var(--s6); }
.product-cat { font-size:var(--text-xs); letter-spacing:0.14em; text-transform:uppercase; color:var(--sage); font-weight:600; display:block; margin-bottom:var(--s2); }
.product-name { font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; margin-bottom:var(--s3); }
.product-desc { font-size:var(--text-sm); color:var(--text-muted); line-height:1.65; margin-bottom:var(--s4); }
.ingredient-list {
  list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2);
  margin-bottom:var(--s5);
}
.ingredient-list li {
  font-size:var(--text-xs); background:var(--sage-light); color:#3d6b42;
  padding:var(--s1) var(--s3); border-radius:999px; font-weight:500;
  letter-spacing:0.04em;
}
.product-footer {
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s4); flex-wrap:wrap; padding-top:var(--s4);
  border-top:1px solid var(--divider);
}
.product-price { font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; color:var(--text); }
.products-note { text-align:center; margin-top:var(--s10); color:var(--text-muted); font-size:var(--text-sm); }

@media(max-width:700px){
  .products-grid { grid-template-columns:1fr; }
  .product-body { padding:var(--s5); }
}

/* ─── INGREDIENTS ─── */
.ingredients { background:var(--surface); }
.ingredients-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(var(--s12),6vw,var(--s24)); align-items:center;
}
.ingredients-text .section-title { text-align:left; }
.ingredients-body { font-size:var(--text-base); color:var(--text-muted); line-height:1.75; margin-bottom:var(--s8); }
.ingredients-badges { display:flex; flex-wrap:wrap; gap:var(--s3); }
.ing-badge {
  display:flex; align-items:center; gap:var(--s2);
  background:var(--bg); border:1px solid var(--divider);
  padding:var(--s2) var(--s4); border-radius:var(--radius-sm);
  font-size:var(--text-xs); font-weight:500; letter-spacing:0.04em;
  color:var(--text-muted);
}
.ing-badge svg { color:var(--sage); flex-shrink:0; }

.ingredients-card {
  background:var(--bg); border-radius:var(--radius);
  padding:var(--s8); border:1px solid var(--divider);
}
.ing-card-title {
  font-family:var(--font-display); font-size:var(--text-lg);
  font-weight:600; margin-bottom:var(--s6);
  padding-bottom:var(--s4); border-bottom:1px solid var(--divider);
}
.ing-item {
  display:flex; gap:var(--s4); margin-bottom:var(--s5);
  align-items:flex-start;
}
.ing-item:last-child { margin-bottom:0; }
.ing-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.ing-dot--dark   { background:var(--concrete-dark); }
.ing-dot--light  { background:#e0dbd0; border:1px solid var(--border); }
.ing-dot--green  { background:var(--sage); }
.ing-dot--warm   { background:var(--terracotta); }
.ing-item strong { display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--s1); }
.ing-item p { font-size:var(--text-xs); color:var(--text-muted); line-height:1.6; max-width:unset; }

@media(max-width:768px){
  .ingredients-layout { grid-template-columns:1fr; }
  .ingredients-text .section-title { text-align:center; }
  .ingredients-text .section-eyebrow { text-align:center; display:block; }
}

/* ─── STORY ─── */
.story { background:var(--bg); }
.story-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s12),6vw,var(--s24)); align-items:center; }
.story-image img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.story-text .section-title { text-align:left; }
.story-text .section-eyebrow { text-align:left; display:block; }
.story-body { font-size:var(--text-base); color:var(--text-muted); line-height:1.75; margin-bottom:var(--s5); }
.story-body:last-of-type { margin-bottom:var(--s8); }

@media(max-width:768px){
  .story-layout { grid-template-columns:1fr; }
  .story-text .section-title,.story-text .section-eyebrow { text-align:center; }
  .story-image { order:-1; }
}

/* ─── TESTIMONIALS ─── */
.testimonials { background:var(--surface); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); }
.testimonial {
  background:var(--bg); border-radius:var(--radius); padding:var(--s6);
  display:flex; flex-direction:column; gap:var(--s4);
}
.stars { color:var(--terracotta); font-size:1rem; letter-spacing:2px; }
.testimonial p { font-family:var(--font-display); font-style:italic; font-size:var(--text-base); color:var(--text); line-height:1.6; }
.testimonial footer cite { font-size:var(--text-xs); color:var(--text-muted); font-style:normal; letter-spacing:0.06em; }

@media(max-width:768px){ .testimonials-grid { grid-template-columns:1fr; } }

/* ─── CONTACT ─── */
.contact { background:var(--surface-2); }
.contact-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(var(--s12),6vw,var(--s24)); align-items:start; }
.contact-intro .section-title { text-align:left; }
.contact-intro .section-eyebrow { text-align:left; display:block; }
.contact-body { font-size:var(--text-sm); color:var(--text-muted); line-height:1.75; margin-bottom:var(--s6); }
.contact-links { display:flex; flex-direction:column; gap:var(--s3); }
.contact-social { display:flex; align-items:center; gap:var(--s3); font-size:var(--text-sm); color:var(--text-muted); transition:color var(--transition); }
.contact-social:hover { color:var(--terracotta); }
.contact-form { background:var(--bg); border-radius:var(--radius); padding:clamp(var(--s6),4vw,var(--s10)); display:flex; flex-direction:column; gap:var(--s5); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }
.form-group { display:flex; flex-direction:column; gap:var(--s2); }
.form-group label { font-size:var(--text-xs); letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:var(--text-muted); }
.form-group input,.form-group select,.form-group textarea {
  font:inherit; font-size:var(--text-sm); padding:var(--s3) var(--s4);
  background:var(--surface); border:1.5px solid var(--divider);
  border-radius:var(--radius-sm); color:var(--text); width:100%;
  outline:none; transition:border-color var(--transition), box-shadow var(--transition);
}
.form-group select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7060' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; cursor:pointer; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-light); }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--text-faint); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-note { font-size:var(--text-xs); color:var(--text-faint); text-align:center; letter-spacing:0.04em; max-width:unset; }

@media(max-width:860px){ .contact-layout{grid-template-columns:1fr;} .contact-intro .section-title,.contact-intro .section-eyebrow{text-align:center;} }
@media(max-width:540px){ .form-row{grid-template-columns:1fr;} }

/* ─── FOOTER ─── */
.site-footer { background:var(--surface-dark); color:var(--text-inv); padding-block:clamp(var(--s16),6vw,var(--s24)); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s12); margin-bottom:var(--s16); }
.footer-brand .logo { color:var(--text-inv); margin-bottom:var(--s5); }
.footer-tagline { font-size:var(--text-sm); color:rgba(250,247,242,0.5); line-height:1.7; margin-bottom:var(--s5); max-width:260px; }
.footer-instagram { display:flex; align-items:center; gap:var(--s2); font-size:var(--text-sm); color:rgba(250,247,242,0.6); transition:color var(--transition); }
.footer-instagram:hover { color:var(--text-inv); }
.footer-nav { display:flex; flex-direction:column; gap:var(--s3); }
.footer-nav-heading { font-size:var(--text-xs); letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--text-inv); margin-bottom:var(--s2); }
.footer-nav a { font-size:var(--text-sm); color:rgba(250,247,242,0.5); transition:color var(--transition); }
.footer-nav a:hover { color:var(--text-inv); }
.footer-bottom { border-top:1px solid rgba(250,247,242,0.1); padding-top:var(--s8); display:flex; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; }
.footer-bottom p { font-size:var(--text-xs); color:rgba(250,247,242,0.4); max-width:unset; }
.footer-tagline-bottom { font-family:var(--font-display); font-style:italic; color:rgba(250,247,242,0.3) !important; }

@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} .footer-brand{grid-column:span 2;} }
@media(max-width:540px){ .footer-grid{grid-template-columns:1fr;} .footer-brand{grid-column:span 1;} .footer-bottom{flex-direction:column;} }

/* ─── SCROLL REVEAL ─── */
.reveal { opacity:0; transform:translateY(18px); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }