/* ============================================================
   NAJI SPECIALTY COFFEE — Mesopotamian Editorial Brutalism
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --orange: #ee6f29;
  --orange-bright: #ff7d33;
  --brown: #3c231f;
  --brown-deep: #1a0f0c;
  --cream: #f4ece2;
  --cream-dim: #d8c7b4;

  --bg: var(--orange);
  --ink: var(--brown);

  --font-display: 'Jost', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --maxw: 1600px;
  --gutter: clamp(1.25rem, 4vw, 5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --nav-h: 46px;

  /* spacing scale */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;  --s-7: 3rem;   --s-8: 4.5rem;
  --s-9: 6rem;   --s-10: 9rem;

  /* section rhythm */
  --section-y: clamp(4rem, 9vw, 8rem);
  --block-y:   clamp(2rem, 4vw, 3.5rem);

  /* contrast-tuned text tones (replace ad-hoc opacity) */
  --ink-strong: var(--brown);
  --ink-soft:   #5a3a30;   /* on cream/orange */
  --cream-soft: #e6d6c2;   /* on brown/deep-brown */
  --cream-mute: #c9b59f;   /* meta/eyebrow on dark */

  /* border weight */
  --hair: 1.5px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  transition: background .8s var(--ease), color .8s var(--ease);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--brown); color: var(--orange); }

/* ---------- Custom cursor ---------- */
.cursor, .cursor-trail { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; will-change: transform; }
.cursor { width: 9px; height: 9px; background: var(--cream); transform: translate(-50%, -50%); transition: width .25s var(--ease), height .25s var(--ease), background .25s; }
.cursor-trail { width: 38px; height: 38px; border: 1px solid var(--cream); transform: translate(-50%, -50%); transition: transform .12s linear, width .3s var(--ease), height .3s var(--ease), opacity .3s; }
body.cursor-hover .cursor { width: 0; height: 0; }
body.cursor-hover .cursor-trail { width: 64px; height: 64px; background: rgba(244,236,226,.15); }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-trail { display: none; } body { cursor: auto; } }
@media (hover: hover) and (pointer: fine) { body, a, button { cursor: none; } }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--brown-deep);
  display: grid; place-items: center;
  transition: transform 1s var(--ease) .2s;
}
.preloader.done { transform: translateY(-100%); }
.preloader__inner { width: min(80vw, 320px); text-align: center; }
.preloader__mark { width: 120px; margin: 0 auto 2rem; color: var(--orange); }
.preloader__mark svg { width: 100%; height: auto; opacity: 0; transform: scale(.85); animation: pl-mark 1s var(--ease) forwards; }
@keyframes pl-mark { to { opacity: 1; transform: scale(1); } }
.preloader__word { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .5em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 1.25rem; padding-left: .5em; }
.preloader__bar { height: 2px; width: 100%; background: rgba(244,236,226,.18); overflow: hidden; }
.preloader__fill { height: 100%; width: 0; background: var(--orange); transition: width .2s linear; }
.preloader__pct { font-family: var(--font-mono); font-size: .7rem; color: var(--cream-dim); margin-top: .9rem; letter-spacing: .15em; }

/* ---------- Top nav (Synchrodogs colored tabs) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: var(--nav-h);
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1.5px solid var(--brown);
}
.nav__tab {
  display: flex; align-items: center; justify-content: center; gap: .5ch;
  border-right: 1.5px solid var(--brown);
  background: var(--cream-dim); color: var(--brown);
  transition: background .35s var(--ease), color .35s var(--ease), letter-spacing .35s var(--ease);
  position: relative; overflow: hidden;
}
.nav__tab:last-child { border-right: none; }
.nav__tab:nth-child(2) { background: var(--orange); }
.nav__tab:nth-child(3) { background: var(--brown); color: var(--cream); }
.nav__tab:nth-child(4) { background: var(--brown-deep); color: var(--cream); }
.nav__tab:hover { letter-spacing: .28em; }
.nav__tab::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--orange-bright); transition: width .4s var(--ease); }
.nav__tab[aria-current="page"]::after { width: 100%; }
.nav__tab[aria-current="page"] { background: var(--orange-bright); color: var(--brown-deep); }
.nav__num { font-size: .58em; opacity: .55; }

/* Floating brand chip + lang toggle */
.topbar { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 850; display: flex; justify-content: space-between; align-items: center; padding: .7rem var(--gutter); pointer-events: none; color: var(--cream); text-shadow: 0 1px 8px rgba(26,15,12,.45); }
.topbar__brand { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; pointer-events: auto; }
.lang { pointer-events: auto; display: inline-flex; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; border: 1px solid rgba(244,236,226,.5); border-radius: 100px; overflow: hidden; backdrop-filter: blur(6px); background: rgba(26,15,12,.28); text-shadow: none; }
.lang button { padding: .3rem .8rem; color: var(--cream); opacity: .6; transition: opacity .3s, background .3s, color .3s; }
.lang button.active { opacity: 1; background: var(--cream); color: var(--brown-deep); }
@media (max-width: 600px){ .topbar__city { display: none; } .topbar__brand img { height: 18px; } }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
main { padding-top: var(--nav-h); }

.theme-brown { background: var(--brown); color: var(--cream); }
.theme-deep { background: var(--brown-deep); color: var(--cream); }
.theme-brown ::selection, .theme-deep ::selection { background: var(--orange); color: var(--brown-deep); }

/* ---------- Typography ---------- */
.eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .8ch; }
.eyebrow::before { content: ''; width: 2.4rem; height: 1.5px; background: currentColor; }

.display { font-family: var(--font-display); font-weight: 700; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.h-mega { font-size: clamp(4rem, 18vw, 17rem); }
.h-xl   { font-size: clamp(2.6rem, 9vw, 8rem); }
.h-lg   { font-size: clamp(2rem, 5.5vw, 4.5rem); }
.h-md   { font-size: clamp(1.5rem, 3.4vw, 2.6rem); }
.lead   { font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 300; line-height: 1.45; max-width: 46ch; }
.muted  { color: var(--ink-soft); }
.theme-brown .muted, .theme-deep .muted { color: var(--cream-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .9ch;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 1.05rem 1.9rem; border: 1.5px solid var(--brown);
  border-radius: 100px; position: relative; overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), border-color .4s;
}
.btn span { position: relative; z-index: 2; }
.btn::before { content: ''; position: absolute; inset: 0; background: var(--brown); transform: translateY(101%); transition: transform .45s var(--ease); z-index: 1; }
.btn:hover { color: var(--orange); }
.btn:hover::before { transform: translateY(0); }
.btn .arr { transition: transform .45s var(--ease); }
.btn:hover .arr { transform: translate(4px, -4px); }
.theme-brown .btn, .theme-deep .btn { border-color: var(--cream); }
.theme-brown .btn::before, .theme-deep .btn::before { background: var(--cream); }
.theme-brown .btn:hover, .theme-deep .btn:hover { color: var(--brown-deep); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: var(--hair) solid var(--brown); padding-block: 1.1rem; white-space: nowrap; background: var(--cream); color: var(--brown); }
.theme-brown + .marquee, .theme-deep + .marquee { border-color: var(--brown); }
.marquee__track { display: inline-flex; gap: 0; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 3.2rem); letter-spacing: -.01em; padding-inline: 1.5rem; display: inline-flex; align-items: center; gap: 3rem; }
.marquee__track span::after { content: '✶'; font-size: .6em; color: var(--orange); }
.theme-brown .marquee__track span::after { color: var(--orange); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Reveal animations ---------- */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="clip"] { clip-path: inset(0 0 100% 0); opacity: 1; transform: none; transition: clip-path 1.1s var(--ease); }
[data-reveal="clip"].in { clip-path: inset(0 0 0 0); }
[data-reveal="scale"] { opacity: 0; transform: scale(1.08); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
[data-reveal="scale"].in { opacity: 1; transform: none; }

/* line-mask reveal for big headings (direct children only, so nested lang spans are unaffected) */
.lines > span { display: block; overflow: hidden; }
.lines > span > b { display: block; font-weight: inherit; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.lines.in > span > b { transform: none; }

/* ============================================================
   HOME
   ============================================================ */
.hero { min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; position: relative; padding-top: 4rem; }
.hero__word { position: relative; }
.hero__word .h-mega { display: block; }
.hero__sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.hero__media { position: absolute; right: var(--gutter); top: 8%; width: clamp(180px, 24vw, 360px); aspect-ratio: 3/4; overflow: hidden; border-radius: 4px; z-index: 2; border: var(--hair) solid var(--brown); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scroll { position: absolute; bottom: 1.5rem; left: var(--gutter); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; display: flex; align-items: center; gap: .8ch; opacity: .7; }
.hero__scroll .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brown); animation: bob 1.6s var(--ease) infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@media (max-width: 760px){ .hero__media { position: relative; right: auto; top: auto; width: 60%; margin: 2rem 0 0 auto; } }

.lamassu-bg { position: absolute; pointer-events: none; opacity: .07; color: var(--brown); z-index: 0; }

/* split intro */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } }
.figure { position: relative; overflow: hidden; border-radius: 4px; }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.figure:hover img { transform: scale(1.05); }
.figure__cap { position: absolute; left: 1rem; bottom: 1rem; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; background: var(--orange); color: var(--brown-deep); padding: .35rem .7rem; }

/* teaser drink rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 26vw, 340px); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.5rem; scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: currentColor; }
.drink-card { scroll-snap-align: start; }
.drink-card__img { aspect-ratio: 3/4; overflow: hidden; border-radius: 4px; position: relative; }
.drink-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.drink-card:hover .drink-card__img img { transform: scale(1.07); }
.drink-card__meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: .85rem; gap: 1rem; }
.drink-card__name { font-weight: 600; text-transform: uppercase; letter-spacing: .01em; font-size: 1.05rem; }
.drink-card__price { font-family: var(--font-mono); font-weight: 700; color: var(--orange); }
.theme-brown .drink-card__price { color: var(--orange); }
.drink-card__desc { font-size: .85rem; color: var(--ink-soft); margin-top: .35rem; line-height: 1.45; }
.theme-brown .drink-card__desc, .theme-deep .drink-card__desc { color: var(--cream-soft); }

/* location */
.loc { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem,5vw,4rem); align-items: end; }
@media (max-width: 860px){ .loc { grid-template-columns: 1fr; } }
.loc__list { font-family: var(--font-mono); font-size: .85rem; line-height: 2.2; letter-spacing: .04em; }
.loc__list dt { color: var(--ink-soft); text-transform: uppercase; font-size: .72rem; letter-spacing: .2em; margin-top: 1rem; }
.theme-brown .loc__list dt, .theme-deep .loc__list dt { color: var(--cream-mute); }
.loc__list dd { font-size: 1rem; }

/* ============================================================
   MENU
   ============================================================ */
.menu-head { display: flex; flex-direction: column; gap: 1.5rem; }
.menu-cat { padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1.5px solid currentColor; }
.menu-cat__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.menu-cat__head .idx { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); }
.theme-brown .menu-cat__head .idx, .theme-deep .menu-cat__head .idx { color: var(--cream-mute); }
.menu-cat__head small { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); letter-spacing: .1em; text-transform: uppercase; }
.theme-brown .menu-cat__head small, .theme-deep .menu-cat__head small { color: var(--cream-mute); }

.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 900px){ .menu-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .menu-grid { grid-template-columns: 1fr; } }
.menu-item__img { aspect-ratio: 1/1; overflow: hidden; border-radius: 4px; position: relative; background: var(--brown-deep); }
.menu-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; }
.menu-item:hover .menu-item__img img { transform: scale(1.06); }
.menu-item__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1rem; }
.menu-item__name { font-weight: 600; text-transform: uppercase; font-size: 1.1rem; letter-spacing: .01em; }
.menu-item__price { font-family: var(--font-mono); font-weight: 700; color: var(--orange); white-space: nowrap; }
.menu-item__desc { font-size: .85rem; color: var(--ink-soft); line-height: 1.5; margin-top: .4rem; max-width: 38ch; }
.theme-brown .menu-item__desc, .theme-deep .menu-item__desc { color: var(--cream-soft); }

/* text-only price list */
.price-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 2.5rem; }
@media (max-width: 760px){ .price-list { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px){ .price-list { grid-template-columns: 1fr; } }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px dashed currentColor; padding-bottom: .6rem; }
.price-row .n { text-transform: uppercase; font-weight: 500; font-size: .95rem; }
.price-row .p { font-family: var(--font-mono); font-weight: 700; color: var(--orange); }
.price-row small { display: block; font-weight: 400; color: var(--ink-soft); text-transform: none; font-size: .78rem; }
.theme-brown .price-row small, .theme-deep .price-row small { color: var(--cream-mute); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero { min-height: 70svh; display: flex; align-items: flex-end; }
.about-q { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 4vw, 3.2rem); line-height: 1.25; letter-spacing: -.01em; max-width: 22ch; }
.about-q b { font-weight: 700; color: var(--orange); }
.about-cols { columns: 2; column-gap: clamp(2rem,5vw,4rem); font-size: 1.05rem; line-height: 1.7; }
.about-cols p { margin-bottom: 1.2rem; break-inside: avoid; }
@media (max-width: 760px){ .about-cols { columns: 1; } }
.refs { display: flex; flex-wrap: wrap; gap: .6rem; }
.refs span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 100px; padding: .5rem 1rem; }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
@media (max-width: 640px){ .stat-row { grid-template-columns: 1fr; gap: 1.5rem; } }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem,7vw,6rem); line-height: 1; color: var(--orange); }
.stat .lbl { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--cream-soft); margin-top: .5rem; }
:not(.theme-brown):not(.theme-deep) > .stat .lbl, .section:not(.theme-brown):not(.theme-deep) .stat .lbl { color: var(--ink-soft); }

/* ============================================================
   FEATURED (blog index — image only, hover reveal)
   ============================================================ */
.feat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem,2vw,1.75rem); }
.feat-card { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4/5; display: block; background: var(--brown-deep); }
.feat-card.wide { grid-column: span 7; aspect-ratio: 16/10; }
.feat-card.tall { grid-column: span 5; }
.feat-card.half { grid-column: span 6; aspect-ratio: 3/2; }
.feat-card.third { grid-column: span 4; }
@media (max-width: 860px){ .feat-card, .feat-card.wide, .feat-card.tall, .feat-card.half, .feat-card.third { grid-column: span 6; aspect-ratio: 4/5; } }
@media (max-width: 540px){ .feat-card, .feat-card.wide, .feat-card.tall, .feat-card.half, .feat-card.third { grid-column: span 12; } }
.feat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.feat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,15,12,.85), rgba(26,15,12,0) 55%); opacity: 0; transition: opacity .5s var(--ease); }
.feat-card:hover img { transform: scale(1.06); }
.feat-card:hover::after { opacity: 1; }
.feat-card__body { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.4rem; z-index: 2; color: var(--cream); transform: translateY(14px); opacity: 0; transition: transform .55s var(--ease), opacity .55s var(--ease); }
.feat-card:hover .feat-card__body { transform: none; opacity: 1; }
.feat-card__tag { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-bright); }
.feat-card__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.2rem,2vw,1.7rem); line-height: 1.05; margin-top: .4rem; }
.feat-card__excerpt { font-size: .85rem; opacity: .8; margin-top: .5rem; max-width: 40ch; }

/* article */
.article-hero { min-height: 60svh; display: flex; align-items: flex-end; }
.article-body { max-width: 64ch; margin-inline: auto; font-size: 1.12rem; line-height: 1.8; }
.article-body h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem,3vw,2.2rem); margin: 2.5rem 0 1rem; letter-spacing: -.01em; }
.article-body p { margin-bottom: 1.4rem; }
.article-body blockquote { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem,3vw,2rem); line-height: 1.35; color: var(--orange); border-left: 3px solid var(--orange); padding-left: 1.5rem; margin: 2.5rem 0; }
.article-meta { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; display: flex; gap: 1.5rem; color: var(--cream-soft); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--brown-deep); color: var(--cream); padding-block: clamp(3rem,7vw,6rem) 2rem; }
.footer__word { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(4rem, 22vw, 22rem); line-height: .8; letter-spacing: -.03em; color: var(--orange); display: block; margin-bottom: 2rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
@media (max-width: 760px){ .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.footer h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-mute); margin-bottom: 1rem; }
.footer a { display: block; padding: .25rem 0; transition: color .3s, padding-left .3s; }
.footer a:hover { color: var(--orange); padding-left: .4rem; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; border-top: 1px solid rgba(244,236,226,.18); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; color: var(--cream-mute); }

/* ============================================================
   BRAND ASSETS (real wordmark + lamassu)
   ============================================================ */
.brand-mark { display: inline-block; line-height: 0; }
.brand-mark img { display: block; height: 100%; width: auto; }

/* topbar wordmark */
.topbar__brand { display: inline-flex; align-items: center; gap: .65rem; line-height: 0; }
.topbar__brand img { height: 20px; width: auto; display: block; }
.topbar__city { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; line-height: 1; }

/* hero wordmark replaces the Jost text */
.hero__wordmark { display: block; width: clamp(280px, 60vw, 1100px); height: auto; max-width: 100%; transform: translateY(110%); transition: transform 1.1s var(--ease) .25s; }
.lines.in .hero__wordmark { transform: none; }

/* footer giant wordmark image */
.footer__word { display: block; margin-bottom: 2rem; line-height: 0; }
.footer__word img { display: block; width: 100%; max-width: 1400px; height: auto; }

/* lamassu silhouette watermark (now from real icon) */
.lamassu-bg { position: absolute; pointer-events: none; opacity: .09; z-index: 0; user-select: none; }
.lamassu-bg img { display: block; width: 100%; height: auto; }
.theme-brown .lamassu-bg, .theme-deep .lamassu-bg { opacity: .12; }
.lamassu-bg--cream img { content: url('../logo/icon-cream.png'); }

/* preloader uses real full logo */
.preloader__mark img { display: block; width: 100%; height: auto; }

/* ============================================================
   HOST STRIP (Experience: how we host)
   ============================================================ */
.host-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 760px){ .host-strip { grid-template-columns: 1fr; } }
.host-cell { border-top: var(--hair) solid currentColor; padding-top: 1.25rem; }
.host-cell h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .01em; margin-bottom: .6rem; }
.host-cell p  { font-size: .95rem; line-height: 1.55; color: var(--ink-soft); max-width: 32ch; }
.theme-brown .host-cell p, .theme-deep .host-cell p { color: var(--cream-soft); }
.host-cell ul { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin-top: .8rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; }
.host-cell li { padding: .35rem .7rem; border: 1px solid currentColor; border-radius: 100px; }

/* ============================================================
   SOCIAL PROOF STRIP
   ============================================================ */
.proof { padding-block: clamp(2.5rem, 5vw, 4rem); }
.proof .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1.5rem 3rem; }
.proof__stars { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.02em; color: var(--orange); }
.proof__stars b { color: var(--cream); margin-right: .25em; }
.proof__line { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--cream-soft); max-width: 32ch; }
.proof__source { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-mute); }

/* ============================================================
   PISTACHIO PILLAR (signature line on home)
   ============================================================ */
.pillar-note { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-mute); margin-top: 1rem; }

/* hero quote (founder ethos) */
.hero__quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.4; color: var(--ink-soft); max-width: 38ch; margin-top: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--brown); }
.hero__quote cite { display: block; font-style: normal; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-soft); margin-top: .6rem; }

/* button hover safety on orange surfaces */
.btn:hover { outline: var(--hair) solid var(--brown); outline-offset: -1px; }
.theme-brown .btn:hover, .theme-deep .btn:hover { outline-color: var(--cream); }

/* utility */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mt-4{margin-top:4rem}.mt-5{margin-top:5rem}
[hidden]{display:none !important}
.lang-es{display:none}
body.es .lang-en{display:none}
body.es .lang-es{display:inline}
body.es .lang-es.block{display:block}