:root{
  --cream:#FFF9F2;
  --milk:#FBF0E4;
  --beige:#F1DFC6;
  --tan:#DCB78E;
  --brown:#8C5A3C;
  --brown-dark:#4A2E1E;
  --accent:#B5722E;
  --accent-dark:#8F571E;
  --white:#FFFFFF;
  --on-accent:#FFFFFF;
  --surface-light-text:#FFF9F2;
  --shadow-sm: 0 6px 18px rgba(74,46,30,0.08);
  --shadow-md: 0 14px 34px rgba(74,46,30,0.12);
  --shadow-lg: 0 24px 56px rgba(74,46,30,0.16);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --header-h: 84px;
  --ease: cubic-bezier(.22,1,.36,1);
  --hero-glow-a: rgba(220,183,142,.55);
  --hero-glow-b: rgba(181,114,46,.28);
  --hero-text-glow: rgba(255,255,255,.5);
  --pill-bg: rgba(255,255,255,.6);
  --pill-border: rgba(140,90,60,.18);
  --header-scrolled-bg: rgba(255,249,242,0.9);
}

:root[data-theme="dark"]{
  --cream:#1C130C;
  --milk:#251A10;
  --beige:#3A2A18;
  --tan:#C99B6E;
  --brown:#CBA37A;
  --brown-dark:#F4E6D3;
  --accent:#E0954A;
  --accent-dark:#C97A2E;
  --white:#2A1D12;
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.28);
  --shadow-md: 0 14px 34px rgba(0,0,0,0.34);
  --shadow-lg: 0 24px 56px rgba(0,0,0,0.42);
  --hero-glow-a: rgba(224,149,74,.22);
  --hero-glow-b: rgba(151,94,36,.35);
  --hero-text-glow: rgba(0,0,0,.45);
  --pill-bg: rgba(255,255,255,.08);
  --pill-border: rgba(255,255,255,.16);
  --header-scrolled-bg: rgba(28,19,12,0.85);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: var(--header-h);
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--brown-dark);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--font-head); margin:0; font-weight:700; color:var(--brown-dark); transition: color .6s var(--ease); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Reveal on scroll ----------
   Opacity/transform are driven every frame by JS, in direct proportion to
   scroll position (see script.js) rather than via a fixed-duration CSS
   transition — a canned transition runs at a fixed wall-clock speed no
   matter how fast the page is scrolled, so it drifts out of sync with fast
   scrolling and reads as janky. Scrubbing the values straight from scroll
   position keeps it glued to the cursor/wheel at any speed. */
.reveal, .reveal-scale{
  opacity:0;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .reveal-scale{ transition:none; opacity:1; transform:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:transparent;
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), height .5s var(--ease);
}
.site-header.scrolled{
  background:var(--header-scrolled-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  height:72px;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.logo{
  font-family:var(--font-head);
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--brown-dark);
  display:flex;
  align-items:center;
  gap:10px;
  transition: color .5s var(--ease);
}
.logo svg{ flex-shrink:0; }
.nav-links{
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-links a{
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  font-size:.98rem;
  color:var(--brown-dark);
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.nav-links a:hover{ background:var(--beige); color:var(--accent-dark); }
.nav-cta{
  background:var(--accent) !important;
  color:var(--on-accent) !important;
  box-shadow: var(--shadow-sm);
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.nav-cta:hover{ background:var(--accent-dark) !important; }

.controls-group{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:6px;
  padding-left:14px;
  border-left:1px solid rgba(140,90,60,.2);
}
.lang-toggle{
  display:flex;
  align-items:center;
  border-radius:999px;
  background:var(--milk);
  padding:4px;
  gap:2px;
  box-shadow: var(--shadow-sm);
  transition: background-color .5s var(--ease);
}
.lang-toggle button{
  border:none;
  background:transparent;
  padding:7px 12px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--brown);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.lang-toggle button.active{
  background:var(--accent);
  color:var(--on-accent);
}
.theme-toggle{
  width:42px; height:42px;
  border-radius:50%;
  border:none;
  background:var(--milk);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow-sm);
  position:relative;
  flex-shrink:0;
  transition: background-color .5s var(--ease), transform .5s var(--ease);
}
.theme-toggle:hover{ transform:rotate(-12deg) scale(1.06); }
.theme-toggle svg{
  position:absolute;
  width:20px; height:20px;
  color:var(--brown-dark);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.theme-toggle .ic-sun{ opacity:1; transform:scale(1) rotate(0deg); }
.theme-toggle .ic-moon{ opacity:0; transform:scale(.4) rotate(-60deg); }
:root[data-theme="dark"] .theme-toggle .ic-sun{ opacity:0; transform:scale(.4) rotate(60deg); }
:root[data-theme="dark"] .theme-toggle .ic-moon{ opacity:1; transform:scale(1) rotate(0deg); }

.burger{
  display:none;
  width:46px; height:46px;
  border-radius:50%;
  border:none;
  background:var(--milk);
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow: var(--shadow-sm);
  transition: background-color .5s var(--ease);
}
.burger span, .burger span::before, .burger span::after{
  content:"";
  position:absolute;
  width:20px; height:2px;
  background:var(--brown-dark);
  border-radius:2px;
  transition: transform .4s var(--ease), opacity .4s var(--ease), top .4s var(--ease), background-color .5s var(--ease);
}
.burger span{ top:50%; transform:translateY(-50%); }
.burger span::before{ top:-7px; }
.burger span::after{ top:7px; }
.burger.open span{ background:transparent; }
.burger.open span::before{ top:0; transform:rotate(45deg); }
.burger.open span::after{ top:0; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed;
  top:var(--header-h);
  left:16px; right:16px;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  z-index:999;
  transform: translateY(-14px) scale(.98);
  opacity:0;
  pointer-events:none;
  transition: transform .45s var(--ease), opacity .45s var(--ease), background-color .5s var(--ease);
}
.mobile-menu.open{
  transform:none;
  opacity:1;
  pointer-events:auto;
}
.mobile-menu a{
  padding:14px 16px;
  border-radius:var(--radius-sm);
  font-weight:600;
  transition: background-color .35s var(--ease);
}
.mobile-menu a:hover{ background:var(--milk); }
.mobile-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 8px 4px;
  margin-top:4px;
  border-top:1px solid rgba(140,90,60,.15);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(60% 50% at 85% 15%, var(--hero-glow-a), transparent 60%),
    radial-gradient(50% 45% at 10% 85%, var(--hero-glow-b), transparent 60%),
    linear-gradient(180deg, var(--milk) 0%, var(--beige) 100%);
  transition: background-color .6s var(--ease);
}
.hero-bg-illustration{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.9;
  will-change: transform;
}
.hero-bg-illustration svg{ width:100%; height:100%; }

.hero-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  padding:0 24px;
  max-width:820px;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--pill-bg);
  border:1px solid var(--pill-border);
  padding:8px 18px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-dark);
  backdrop-filter: blur(6px);
  transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.hero h1{
  font-size:clamp(3.2rem, 9vw, 6.4rem);
  line-height:1;
  color:var(--brown-dark);
  text-shadow: 0 2px 30px var(--hero-text-glow);
}
.hero p.subtitle{
  font-size:clamp(1.05rem, 2vw, 1.35rem);
  color:var(--brown);
  max-width:560px;
  font-weight:500;
}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:8px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:17px 34px;
  border-radius:999px;
  font-weight:700;
  font-size:1rem;
  border:2px solid transparent;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  min-height:44px;
}
.btn-primary{
  background:var(--accent);
  color:var(--on-accent);
  box-shadow: 0 14px 30px rgba(181,114,46,.35);
}
.btn-primary:hover{
  background:var(--accent-dark);
  transform:translateY(-4px);
  box-shadow: 0 20px 38px rgba(143,87,30,.4);
}
.btn-ghost{
  background:transparent;
  border-color:var(--brown-dark);
  color:var(--brown-dark);
}
.btn-ghost:hover{
  background:var(--brown-dark);
  color:var(--cream);
  transform:translateY(-4px);
}

.scroll-cue{
  position:absolute;
  bottom:32px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--brown);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.06em;
}
.scroll-cue .mouse{
  width:24px; height:38px;
  border:2px solid var(--brown);
  border-radius:14px;
  position:relative;
}
.scroll-cue .mouse::before{
  content:"";
  position:absolute;
  top:6px; left:50%;
  width:4px; height:8px;
  background:var(--accent);
  border-radius:2px;
  transform:translateX(-50%);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ opacity:1; transform:translate(-50%,0);}
  70%{ opacity:0; transform:translate(-50%,10px);}
  100%{ opacity:0; transform:translate(-50%,10px);}
}

/* ---------- Section shared ---------- */
section{ position:relative; }
.section-pad{ padding:120px 0; }
.section-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 64px;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.8rem;
  font-weight:800;
  color:var(--accent-dark);
  transition: color .5s var(--ease);
}
.section-head h2{
  font-size:clamp(2.1rem, 4vw, 3rem);
}
.section-head p{
  color:var(--brown);
  font-size:1.05rem;
}

.divider{
  display:block;
  width:100%;
  line-height:0;
  color:var(--milk);
}
.divider.flip{ transform:scaleY(-1); }

/* ---------- About ---------- */
.about{ background:var(--milk); transition: background-color .6s var(--ease); }
.about-intro{
  max-width:760px;
  margin:0 auto 72px;
  text-align:center;
  font-size:1.15rem;
  color:var(--brown);
}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:44px 32px;
  text-align:center;
  box-shadow: var(--shadow-sm);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), background-color .6s var(--ease);
}
.card:hover{
  transform:translateY(-10px);
  box-shadow: var(--shadow-lg);
}
.card-icon{
  width:76px; height:76px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--beige), var(--tan));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brown-dark);
  transition: transform .65s var(--ease), background .6s var(--ease);
}
.card:hover .card-icon{ transform:rotate(-8deg) scale(1.08); }
.card h3{ font-size:1.3rem; }
.card p{ color:var(--brown); font-size:.98rem; }

/* ---------- Gallery ---------- */
.gallery{ background:var(--cream); transition: background-color .6s var(--ease); }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.product-card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4/5;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.product-card:hover{
  transform:translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.product-visual{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .9s var(--ease);
}
.product-card:hover .product-visual{ transform:scale(1.08); }
.product-visual svg{ width:46%; height:46%; }

.product-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 22px 22px;
  background: linear-gradient(0deg, rgba(74,46,30,.78) 0%, rgba(74,46,30,0) 100%);
  color:var(--surface-light-text);
  text-align:left;
  transform:translateY(4px);
  transition: transform .5s var(--ease);
}
.product-card:hover .product-caption{ transform:translateY(0); }
.product-caption h3{ color:var(--surface-light-text); font-size:1.15rem; margin-bottom:4px; }
.product-caption span{ font-size:.85rem; opacity:.85; }

/* ---------- Contacts ---------- */
.contacts{
  background: linear-gradient(180deg, var(--brown-dark) 0%, #3a2115 100%);
  color:var(--surface-light-text);
}
:root[data-theme="dark"] .contacts{
  background: linear-gradient(180deg, #150d07 0%, #0f0904 100%);
}
.contacts .eyebrow{ color:var(--tan); }
.contacts .section-head h2{ color:var(--surface-light-text); }
.contacts .section-head p{ color:#E4CDB6; }

.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:40px;
  align-items:stretch;
}
.contact-info{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  padding:44px;
  display:flex;
  flex-direction:column;
  gap:26px;
  justify-content:center;
}
.contact-row{
  display:flex;
  align-items:center;
  gap:18px;
}
.contact-row .ic{
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(220,183,142,.16);
  display:flex; align-items:center; justify-content:center;
  color:var(--tan);
  flex-shrink:0;
}
.contact-row a, .contact-row address{
  font-style:normal;
  font-size:1.08rem;
  font-weight:600;
  color:var(--surface-light-text);
  transition: color .4s var(--ease);
}
.contact-row .label{
  display:block;
  font-size:.8rem;
  font-weight:600;
  color:#C9A98A;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:2px;
}
.contact-row a:hover{ color:var(--tan); }

.map-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  min-height:280px;
  background:#2c1810;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
}
.map-img-link{
  position:absolute;
  inset:0;
  z-index:0;
}
.map-img-link img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.map-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(20,12,6,.15) 0%, rgba(15,9,4,.72) 100%);
}
.map-frame a.map-cta{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 28px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:var(--surface-light-text);
  font-weight:700;
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.map-frame a.map-cta:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-3px);
}

.social-row{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
  gap:20px;
}
.social-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:26px 12px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:var(--surface-light-text);
  font-weight:700;
  font-size:.95rem;
  transition: transform .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.social-btn svg{ width:30px; height:30px; transition: transform .6s var(--ease); }
.social-btn:hover{
  transform:translateY(-6px);
  background:var(--accent);
  border-color:var(--accent);
  box-shadow: 0 16px 30px rgba(181,114,46,.35);
}
.social-btn:hover svg{ transform:scale(1.15) rotate(-6deg); }

/* ---------- Border glow (ported from React Bits' BorderGlow, hover-only, cursor-tracked) ----------
   Colors are baked in once as var()-references to the site's own palette (so light/dark theme
   just works), rather than reimplementing the original's per-instance color builder — every glow
   on this page shares the same warm accent/tan/brown mix. Only the cursor math stays in JS. */
.border-glow-card{
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 32;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --cone-spread: 24;
  --fill-opacity: 0.4;
  --glow-padding: 18px;
  --glow-color: hsl(36deg 85% 62% / 100%);
  --glow-color-60: hsl(36deg 85% 62% / 60%);
  --glow-color-50: hsl(36deg 85% 62% / 50%);
  --glow-color-40: hsl(36deg 85% 62% / 40%);
  --glow-color-30: hsl(36deg 85% 62% / 30%);
  --glow-color-20: hsl(36deg 85% 62% / 20%);
  --glow-color-10: hsl(36deg 85% 62% / 10%);
  --gradient-one:   radial-gradient(at 80% 55%, var(--accent) 0px, transparent 50%);
  --gradient-two:   radial-gradient(at 69% 34%, var(--tan) 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, var(--brown) 0px, transparent 50%);
  --gradient-four:  radial-gradient(at 41% 38%, var(--accent) 0px, transparent 50%);
  --gradient-five:  radial-gradient(at 86% 85%, var(--tan) 0px, transparent 50%);
  --gradient-six:   radial-gradient(at 82% 18%, var(--brown) 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, var(--tan) 0px, transparent 50%);
  --gradient-base:  linear-gradient(var(--accent) 0 100%);
  position: relative;
  isolation: isolate;
}
.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  transition: opacity .25s ease-out;
  z-index:-1;
}
.border-glow-card:not(:hover)::before,
.border-glow-card:not(:hover)::after,
.border-glow-card:not(:hover) > .edge-light{
  opacity:0;
  transition: opacity .7s ease-in-out;
}

/* colored mesh-gradient ring — only on elements with an opaque --card-bg (padding-box trick needs
   a solid color to mask the center); translucent/image-backed elements get .glow-outline instead */
.border-glow-card::before{
  border:1px solid transparent;
  background:
    linear-gradient(var(--card-bg, var(--white)) 0 100%) padding-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image: conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%));
}

.border-glow-card::after{
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer + inner glow ring — safe on any background, this is the main "glow" effect */
.border-glow-card > .edge-light{
  inset: calc(var(--glow-padding) * -1);
  z-index:1;
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}
.border-glow-card > .edge-light::before{
  content:"";
  position:absolute;
  inset: var(--glow-padding);
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

/* elements with a translucent/image background skip the mesh ring+fill and keep only the edge glow */
.border-glow-card.glow-outline::before,
.border-glow-card.glow-outline::after{ content:none; }

.btn.border-glow-card{ --glow-padding: 14px; }
.nav-cta.border-glow-card{ --glow-padding: 12px; --card-bg: var(--accent); }
.btn-primary.border-glow-card{ --card-bg: var(--accent); }
.card.border-glow-card{ --glow-padding: 26px; --card-bg: var(--white); }
.product-card.border-glow-card{ --glow-padding: 22px; }
.social-btn.border-glow-card{ --glow-padding: 16px; }
.map-frame a.map-cta.border-glow-card{ --glow-padding: 14px; }
.hero-eyebrow.border-glow-card{ --glow-padding: 10px; --cone-spread: 32; }
.lang-toggle.border-glow-card{ --glow-padding: 10px; --card-bg: var(--milk); }
.theme-toggle.border-glow-card{ --glow-padding: 10px; --card-bg: var(--milk); }

@media (prefers-reduced-motion: reduce){
  .border-glow-card::before,
  .border-glow-card::after,
  .border-glow-card > .edge-light{ transition:none; }
}

/* ---------- Footer ---------- */
.site-footer{
  background:#2c1810;
  color:#C9A98A;
  text-align:center;
  padding:28px 24px;
  font-size:.9rem;
}
.site-footer strong{ color:var(--surface-light-text); }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .cards-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .social-row{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 720px){
  .nav-links{ display:none; }
  .controls-group{ display:none; }
  .burger{ display:flex; }
  .section-pad{ padding:88px 0; }
  .cards-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .hero-actions{ flex-direction:column; width:100%; }
  .btn{ width:100%; }
}

@media (max-width: 480px){
  .gallery-grid{ grid-template-columns:1fr; }
  .social-row{ grid-template-columns:1fr 1fr; }
}