/* ==========================================================================
   HBB Dabke - shared design system
   Theme: locked dark. Accent: cedar green (single accent, whole site).
   Radius rule: buttons = pill, cards = 16px, inputs = 10px. No exceptions.
   ========================================================================== */

:root {
  --ink:      #0A0C0B;
  --ink-2:    #101413;
  --ink-3:    #171D1B;
  --line:     rgba(242, 241, 236, .10);
  --line-2:   rgba(242, 241, 236, .18);

  --bone:     #F2F1EC;
  --bone-dim: rgba(242, 241, 236, .66);
  --bone-mut: rgba(242, 241, 236, .44);

  --cedar:    #17A34A;
  --cedar-lt: #3ED271;
  --cedar-dk: #0B6B30;
  --cedar-08: rgba(23, 163, 74, .08);
  --cedar-16: rgba(23, 163, 74, .16);
  --cedar-28: rgba(23, 163, 74, .28);

  --r-card: 16px;
  --r-input: 10px;

  --shadow-1: 0 2px 8px rgba(0, 0, 0, .34);
  --shadow-2: 0 14px 40px rgba(0, 0, 0, .46), 0 0 0 1px rgba(242, 241, 236, .05);
  --shadow-3: 0 28px 70px rgba(0, 0, 0, .58), 0 0 0 1px var(--cedar-16);

  --sp-sec: 6.5rem;   /* section vertical rhythm, desktop */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}
h3, h4 { letter-spacing: -0.02em; line-height: 1.15; }

.font-num { font-variant-numeric: tabular-nums; }

/* ---------- page texture: layered radial glows + grain ------------------ */
.page-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 82% -8%, rgba(23, 163, 74, .17), transparent 62%),
    radial-gradient(46rem 34rem at 6% 34%, rgba(23, 163, 74, .09), transparent 60%),
    radial-gradient(70rem 44rem at 50% 116%, rgba(23, 163, 74, .12), transparent 66%);
}
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Lebanese-inspired geometric fret, used as a section divider texture */
.fret-band {
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 L6 0 L12 5 L18 0 L24 5 L30 0 L36 5 L42 0 L48 5' fill='none' stroke='%2317A34A' stroke-width='1.4' stroke-opacity='.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 48px 10px;
}

/* ---------- surfaces ---------------------------------------------------- */
.surface {
  background: linear-gradient(168deg, rgba(242, 241, 236, .055), rgba(242, 241, 236, .015));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.surface-2 {
  background: linear-gradient(168deg, rgba(242, 241, 236, .085), rgba(242, 241, 236, .022));
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
}
.surface-hover { transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.surface-hover:hover { transform: translateY(-4px); border-color: var(--cedar-28); box-shadow: var(--shadow-3); }

/* ---------- buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  white-space: nowrap;
  font-weight: 700; font-size: .95rem; letter-spacing: .005em;
  padding: .85rem 1.65rem; border-radius: 100px;
  transition: transform .22s var(--ease), background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
  cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--cedar-lt); outline-offset: 3px; }
.btn:active { transform: scale(.975); }

.btn-primary { background: var(--cedar); color: #04140A; box-shadow: 0 10px 26px rgba(23, 163, 74, .3); }
.btn-primary:hover { background: var(--cedar-lt); box-shadow: 0 14px 34px rgba(23, 163, 74, .42); transform: translateY(-2px); }
.btn-primary:active { transform: scale(.975); }

.btn-ghost { background: rgba(242, 241, 236, .05); color: var(--bone); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: rgba(242, 241, 236, .1); border-color: var(--cedar-28); transform: translateY(-2px); }
.btn-ghost:active { transform: scale(.975); }

.btn-sm { padding: .6rem 1.15rem; font-size: .84rem; }

.link-u { color: var(--cedar-lt); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s ease; }
.link-u:hover { color: var(--bone); }
.link-u:focus-visible { outline: 2px solid var(--cedar-lt); outline-offset: 3px; border-radius: 3px; }

/* ---------- nav --------------------------------------------------------- */
.nav-shell {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav-shell.scrolled {
  background: rgba(10, 12, 11, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-link {
  position: relative; font-size: .88rem; font-weight: 600; color: var(--bone-dim);
  padding: .4rem 0; transition: color .22s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--cedar); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--bone); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link:focus-visible { outline: 2px solid var(--cedar-lt); outline-offset: 4px; border-radius: 3px; }

/* ---------- hamburger --------------------------------------------------- */
#hamburger { transition: background-color .2s ease, border-color .2s ease; }
#hamburger:hover { background: rgba(23, 163, 74, .14) !important; border-color: var(--cedar-28) !important; }
#hamburger:focus-visible { outline: 2px solid var(--cedar-lt); outline-offset: 3px; }
.ham-lines { display: flex; flex-direction: column; gap: 5px; width: 18px; pointer-events: none; }
.ham-line {
  display: block; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .32s cubic-bezier(.34, 1.2, .64, 1), opacity .2s ease, width .32s cubic-bezier(.34, 1.2, .64, 1);
}
.ham-line:nth-child(2) { width: 12px; }
#hamburger.is-open .ham-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#hamburger.is-open .ham-line:nth-child(2) { opacity: 0; width: 0; }
#hamburger.is-open .ham-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- mobile drawer ----------------------------------------------- */
#drawerBackdrop {
  position: fixed; inset: 0; z-index: 590; background: rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
#drawerBackdrop.open { opacity: 1; pointer-events: auto; }
#mobileDrawer {
  display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 600;
  flex-direction: column; overflow-y: auto;
  min-height: 100vh; height: 100dvh;
  transform: translateX(100%); visibility: hidden;
  transition: transform .42s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .42s;
}
#mobileDrawer.open {
  transform: translateX(0); visibility: visible;
  transition: transform .42s cubic-bezier(.32, .72, 0, 1), visibility 0s linear 0s;
}
.drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: 1.5rem; letter-spacing: -.02em; color: var(--bone);
  padding: .7rem 0; border-bottom: 1px solid var(--line);
  transition: color .2s ease, padding-left .25s var(--ease);
}
.drawer-link:hover { color: var(--cedar-lt); padding-left: .5rem; }
.drawer-link:focus-visible { outline: 2px solid var(--cedar-lt); outline-offset: 3px; border-radius: 4px; }

/* ---------- language pill toggle ---------------------------------------- */
.lang-toggle {
  position: relative; display: inline-flex; align-items: center;
  background: rgba(23, 163, 74, .1); border: 1px solid rgba(23, 163, 74, .28);
  border-radius: 100px; padding: 3px; cursor: pointer; width: fit-content;
  transition: border-color .2s ease, background-color .2s ease;
}
.lang-toggle:hover { border-color: rgba(23, 163, 74, .5); background: rgba(23, 163, 74, .18); }
.lang-toggle:focus-visible { outline: 2px solid var(--cedar-lt); outline-offset: 3px; border-radius: 100px; }
.lang-pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--cedar); border-radius: 100px; pointer-events: none;
  transition: transform .35s cubic-bezier(.34, 1.15, .64, 1);
}
.lang-toggle.is-en .lang-pill { transform: translateX(100%); }
.lang-opt {
  position: relative; z-index: 1; font-size: .62rem; font-weight: 800; letter-spacing: .1em;
  padding: 4px 10px; color: rgba(242, 241, 236, .4); transition: color .25s ease;
  pointer-events: none; user-select: none;
}
.lang-toggle:not(.is-en) .lang-opt:nth-child(2),
.lang-toggle.is-en .lang-opt:nth-child(3) { color: #04140A; }

/* ---------- scroll reveal ----------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .surface-hover, .nav-link::after { transition: none; }
}

/* ---------- level wristband colors (semantic product data) -------------- */
.band { display: block; width: 100%; height: 6px; border-radius: 100px; }
.band-1 { background: linear-gradient(90deg, #05070A, #1C2229); box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .34); }
.band-2 { background: linear-gradient(90deg, #0E2350, #1E4A9E); }
.band-3 { background: linear-gradient(90deg, #A81E27, #E0424D); }
.band-4 { background: linear-gradient(90deg, #E4E1D8, #FFFFFF); }
.band-5 { background: linear-gradient(90deg, #38431F, #6E8046); }

/* ---------- forms ------------------------------------------------------- */
.field-label {
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  color: var(--bone); margin-bottom: .45rem;
}
.field-help { font-size: .76rem; color: var(--bone-mut); margin-top: .35rem; }
.field-error { font-size: .78rem; color: #FF8A93; margin-top: .35rem; display: none; }
.field-error.show { display: block; }

.input, .select, .textarea {
  width: 100%; background: rgba(10, 12, 11, .72); color: var(--bone);
  border: 1px solid var(--line-2); border-radius: var(--r-input);
  padding: .78rem 1rem; font-size: .95rem; font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.input::placeholder, .textarea::placeholder { color: rgba(242, 241, 236, .38); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(242, 241, 236, .3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--cedar); background: rgba(10, 12, 11, .9);
  box-shadow: 0 0 0 3px var(--cedar-16);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #FF6B76; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F2F1EC' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem;
}
.select option { background: #101413; color: var(--bone); }

/* choice cards used by the registration wizard */
.choice { display: block; cursor: pointer; position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-body {
  display: block;
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: rgba(242, 241, 236, .035); padding: 1.05rem 1.15rem;
  transition: border-color .22s ease, background-color .22s ease, transform .22s var(--ease);
  height: 100%;
}
.choice:hover .choice-body { border-color: rgba(23, 163, 74, .45); background: rgba(23, 163, 74, .07); transform: translateY(-2px); }
.choice input:focus-visible + .choice-body { outline: 2px solid var(--cedar-lt); outline-offset: 3px; }
.choice input:checked + .choice-body {
  border-color: var(--cedar); background: rgba(23, 163, 74, .13);
  box-shadow: 0 0 0 1px var(--cedar), 0 10px 28px rgba(23, 163, 74, .18);
}
.choice-check {
  position: absolute; top: .9rem; right: .95rem; width: 20px; height: 20px; border-radius: 100px;
  border: 1px solid var(--line-2); display: grid; place-items: center;
  font-size: .6rem; color: transparent; transition: all .22s ease;
}
.choice input:checked + .choice-body .choice-check { background: var(--cedar); border-color: var(--cedar); color: #04140A; }

/* status messages */
#status, .status { border-radius: var(--r-input); padding: .85rem 1.1rem; font-size: .9rem; font-weight: 600; }
#status.success, .status.success { background: rgba(23, 163, 74, .14); border: 1px solid var(--cedar-28); color: var(--cedar-lt); }
#status.error, .status.error { background: rgba(224, 66, 77, .13); border: 1px solid rgba(224, 66, 77, .34); color: #FF9AA2; }

/* ---------- wizard stepper --------------------------------------------- */
.step-rail { display: flex; align-items: center; gap: .5rem; }
.step-dot {
  flex: 1; height: 4px; border-radius: 100px; background: rgba(242, 241, 236, .12);
  transition: background-color .35s ease;
}
.step-dot.done { background: var(--cedar-dk); }
.step-dot.active { background: var(--cedar); }
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: stepIn .38s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wizard-step.active { animation: none; } }

/* ---------- misc -------------------------------------------------------- */
.eyebrow {
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cedar-lt);
}
.img-treat { position: relative; overflow: hidden; border-radius: var(--r-card); }
.img-treat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-treat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 12, 11, .72), rgba(10, 12, 11, 0) 58%);
}
.img-treat::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(200deg, rgba(23, 163, 74, .3), rgba(10, 12, 11, .1));
  mix-blend-mode: multiply;
}
/* portraits: keep faces readable, only a whisper of the brand tint */
.img-treat--soft::before { background: linear-gradient(200deg, rgba(23, 163, 74, .16), rgba(10, 12, 11, .04)); }
.img-treat--soft::after { background: linear-gradient(to top, rgba(10, 12, 11, .5), rgba(10, 12, 11, 0) 46%); }

.hr-line { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); border: 0; }

::selection { background: var(--cedar); color: #04140A; }

/* footer */
.foot-link { color: var(--bone-mut); font-size: .88rem; transition: color .2s ease; }
.foot-link:hover { color: var(--cedar-lt); }
.foot-link:focus-visible { outline: 2px solid var(--cedar-lt); outline-offset: 3px; border-radius: 3px; }
.websie-credit { color: rgba(242, 241, 236, .38); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.websie-credit:hover { color: var(--cedar-lt); }