@charset "UTF-8";

/* ============================================================
   MancherikalaM BigBazar — wholesale & retail, Changanassery
   Direction: the shop's own lit sign. A dark slatted wall, a
   golden arc, white geometric lettering — set against a warm
   paper page for everything below the hero. Generous tap
   targets, bilingual by default, readable on a cheap phone.

   Lettering follows the signboard: Quicksand for the rounded
   "MancherikalaM", Montserrat ExtraBold for "BIGBAZAR" and the
   headings. The bilingual layout comes from data-lang on <html>.
   ============================================================ */

/* ---- tokens ---- */

:root {
  --bg: #fbf7f0;
  --bg-soft: #f6efe4;
  --surface: #ffffff;
  --surface-2: #f4ece0;
  --line: #e4d8c6;
  --line-soft: #efe6d8;

  --text: #2a2118;
  --text-dim: #5d5247;
  --muted: #756859;

  /* Brand accent, contrast-checked: 4.98:1 on --bg, 5.32:1 under white. */
  --accent: #b8470d;
  --accent-strong: #8f3609;
  --accent-wash: #f8e9df;
  --accent-ring: #d4650f;
  --on-accent: #ffffff;

  /* The sign: a near-black slatted wall and a golden arc. These stay the
     same in light and dark mode — the hero is always "the sign". */
  --sign-wall: #1c1714;
  --sign-wall-2: #241d19;
  --sign-gold: #f3a712;
  --sign-ink: #ffffff;
  --sign-dim: #e2d6c8;

  --whatsapp: #1fa855;

  --radius: 12px;
  --radius-lg: 20px;
  --shell: 1180px;
  --tap: 48px;
  --header-h: 64px;

  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    system-ui, sans-serif;
  --display: "Montserrat", "Nunito Sans", -apple-system, "Segoe UI", sans-serif;
  --rounded: "Quicksand", "Nunito Sans", -apple-system, "Segoe UI", sans-serif;
  --ml: "Noto Sans Malayalam", "Nirmala UI", Manjari, Meera, AnjaliOldLipi,
    sans-serif;

  /* Malayalam needs more room: stacked vowel signs and conjunct
     clusters sit above and below the baseline. */
  --ml-size-adj: 1.06;
  --ml-line: 1.85;

  --shadow: 0 1px 2px rgba(42, 33, 24, .06), 0 6px 18px rgba(42, 33, 24, .07);
  --shadow-lift: 0 2px 4px rgba(42, 33, 24, .08), 0 14px 32px rgba(42, 33, 24, .12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171310;
    --bg-soft: #1d1814;
    --surface: #211c17;
    --surface-2: #2a231d;
    --line: #3a3129;
    --line-soft: #2d2620;

    --text: #f2ebe1;
    --text-dim: #c0b4a5;
    --muted: #9a8d7e;

    /* In dark mode the accent is a light colour, so ink on top of it
       flips to the page ground instead of white. 7.87:1 on --bg. */
    --accent: #ff8a3d;
    --accent-strong: #ffa366;
    --accent-wash: #2a1c12;
    --accent-ring: #ff8a3d;
    --on-accent: #171310;

    --sign-wall: #120e0c;
    --sign-wall-2: #1a1411;

    --whatsapp: #4ddd8a;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .45);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .55);
  }
}

/* ---- reset ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Keep anchor targets clear of the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Long Malayalam compounds must never push the page sideways. */
  overflow-wrap: break-word;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--accent);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

a:hover {
  color: var(--accent-strong);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

/* ---- focus ---- */

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip:focus {
  left: 8px;
  top: 8px;
  z-index: 60;
  padding: .7rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Bilingual pairs

   Markup is always English-then-Malayalam so the page reads
   correctly with CSS and JS switched off. data-lang only
   reorders and resizes — nothing is ever hidden.
   ============================================================ */

.bi {
  display: flex;
  flex-direction: column;
  gap: .18em;
}

.bi > * {
  margin: 0;
  min-width: 0;
}

.bi-ml {
  font-family: var(--ml);
  line-height: var(--ml-line);
  /* Only the 400 weight of Noto Sans Malayalam is loaded. Inheriting 800
     from a heading would make the browser synthesise bold, which smears
     the script's conjuncts and vowel signs. */
  font-weight: 400;
  letter-spacing: 0;
}

/* English leads (default) */

[data-lang="en"] .bi-en {
  order: 1;
}

[data-lang="en"] .bi-ml {
  order: 2;
  font-size: .76em;
  font-weight: 400;
  color: var(--text-dim);
}

/* Malayalam leads */

[data-lang="ml"] .bi-ml {
  order: 1;
  font-size: calc(1em * var(--ml-size-adj));
  font-weight: 400;
  color: inherit;
}

[data-lang="ml"] .bi-en {
  order: 2;
  font-size: .76em;
  font-weight: 400;
  color: var(--text-dim);
}

/* Paragraph pairs need real spacing between the two blocks. */

.bi--prose {
  gap: .85rem;
}

[data-lang="en"] .bi--prose .bi-ml,
[data-lang="ml"] .bi--prose .bi-en {
  font-size: .95em;
  font-weight: 400;
  padding-left: .9rem;
  border-left: 3px solid var(--line);
}

/* Inside a filled button, and on the dark sign, the secondary line must
   stay legible, so it keeps the surrounding ink rather than --text-dim. */

[data-lang="en"] .btn .bi-ml,
[data-lang="ml"] .btn .bi-en,
[data-lang="en"] .hero .bi-ml,
[data-lang="ml"] .hero .bi-en {
  color: inherit;
  opacity: .82;
}

/* ---- layout ---- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.15rem;
}

.section {
  padding-block: 3.25rem;
}

.section--wash {
  background: var(--accent-wash);
}

.section--soft {
  background: var(--bg-soft);
}

/* --accent on --accent-wash sits just under AA for small text, so
   accent-coloured TEXT on a wash uses the darker --accent-strong. */

.section--wash .eyebrow {
  color: var(--accent-strong);
}

.section-head {
  max-width: 44rem;
  margin-bottom: 2rem;
}

.section-head h2 {
  font-size: clamp(1.5rem, 5.6vw, 2.25rem);
}

.section-lead {
  margin-top: .9rem;
  color: var(--text-dim);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .6rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* A short golden bar before each eyebrow echoes the arc on the sign. */

.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 3px;
  border-radius: 3px;
  background: var(--sign-gold);
}

/* ---- wordmark (the sign, in HTML) ---- */

.wordmark {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding-top: .5em;
  color: inherit;
  line-height: 1;
}

/* The arc stretches to the word's width; its stroke is non-scaling, so the
   thickness is set here in px and inherited into the <use> shadow tree. */

.wordmark-arc {
  position: absolute;
  top: 0;
  left: -.5em;
  width: calc(100% + 1em);
  height: 1.05em;
  color: var(--sign-gold);
  stroke-width: 3px;
  overflow: visible;
}

.wordmark-wheat {
  position: absolute;
  top: -.62em;
  right: 16%;
  width: .8em;
  height: .8em;
  color: var(--sign-gold);
}

.wordmark-top {
  font-family: var(--rounded);
  font-weight: 700;
  font-size: 1em;
  letter-spacing: .005em;
}

.wordmark-bottom {
  margin-top: .08em;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.32em;
  letter-spacing: .02em;
}

/* ---- header ---- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1.15rem;
  background: var(--sign-wall);
  color: var(--sign-ink);
  border-bottom: 3px solid var(--sign-gold);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--sign-ink);
  text-decoration: none;
  font-size: .95rem;
}

.brand:hover {
  color: var(--sign-ink);
}

.topbar-end {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

/* ---- language toggle ---- */

.lang {
  display: flex;
  flex: none;
  padding: 3px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
}

.lang-btn {
  min-height: 36px;
  padding: 0 .7rem;
  background: none;
  border: 0;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--sign-dim);
  cursor: pointer;
  white-space: nowrap;
}

.lang-btn[lang="ml"] {
  font-family: var(--ml);
  font-size: .78rem;
}

.lang-btn[aria-pressed="true"] {
  background: var(--sign-gold);
  color: var(--sign-wall);
}

/* ---- nav ---- */

.nav-toggle {
  display: grid;
  place-content: center;
  gap: 4px;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--sign-ink);
  border-radius: 2px;
}

.nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 39;
  display: none;
  flex-direction: column;
  padding: .5rem 1.15rem 1rem;
  background: var(--sign-wall);
  border-bottom: 3px solid var(--sign-gold);
  box-shadow: var(--shadow);
}

.nav.is-open {
  display: flex;
}

.nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: .4rem .2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: var(--sign-ink);
  font-weight: 700;
  text-decoration: none;
}

.nav a:last-child {
  border-bottom: 0;
}

.nav a:hover {
  color: var(--sign-gold);
}

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: var(--tap);
  padding: .7rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  flex: none;
  width: 22px;
  height: 22px;
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn--primary:hover {
  background: var(--accent-strong);
  color: var(--on-accent);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* On the dark sign: gold fill with wall-coloured ink (9:1), and an
   outlined white button beside it. */

.btn--gold {
  background: var(--sign-gold);
  color: var(--sign-wall);
}

.btn--gold:hover {
  background: #ffbd3d;
  color: var(--sign-wall);
}

.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: var(--sign-ink);
}

.btn--outline-light:hover {
  border-color: var(--sign-gold);
  color: var(--sign-gold);
}

.btn-stack {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: 1.5rem;
}

/* A control whose underlying value is still a [PLACEHOLDER] is flagged by
   main.js rather than left to produce a dead tap. All of this disappears by
   itself once the deploy fills the environment variables in. */

[data-placeholder] {
  border-style: dashed !important;
  border-color: var(--accent) !important;
  background: var(--accent-wash) !important;
  color: var(--accent-strong) !important;
  cursor: not-allowed;
}

[data-placeholder]::after {
  content: " — not added yet";
  font-size: .78em;
  font-weight: 700;
  opacity: .85;
}

.map-load[data-placeholder]::after {
  content: " — map link not added yet";
}

/* The sticky bar is two buttons across a 375px phone, with no room for the
   explanation; the same warning is already on the hero CTA above. */

.actionbar [data-placeholder]::after {
  content: none;
}

/* ============================================================
   Hero — the lit sign
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 2.25rem 2.75rem;
  color: var(--sign-ink);
  /* Vertical slats like the wall behind the real sign, with a warm glow
     where the arc lights it up. */
  background:
    radial-gradient(ellipse 70% 55% at 22% 18%, rgba(243, 167, 18, .2), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, .035) 14px 16px),
    linear-gradient(180deg, var(--sign-wall-2), var(--sign-wall));
}

.hero-inner {
  display: grid;
  gap: 2rem;
}

.hero-sign {
  font-size: clamp(1.9rem, 9.5vw, 3.6rem);
  margin-bottom: 1.25rem;
}

.hero-sign {
  padding: .45em .5em 0;
}

.hero-sign .wordmark-arc {
  stroke-width: 7px;
}

.footer-brand .wordmark-arc {
  stroke-width: 3.5px;
}

.brand .wordmark,
.footer-brand .wordmark {
  margin: .35em .5em 0;
}

.hero .eyebrow {
  color: var(--sign-gold);
}

.hero-tagline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.25;
}

.hero-tagline .bi-ml {
  font-family: var(--ml);
}

.hero-lead {
  margin-top: 1rem;
  max-width: 34rem;
  color: var(--sign-dim);
}

.hero-aside {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin-top: 1.25rem;
  font-weight: 700;
}

.hero-aside a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  color: var(--sign-ink);
  text-decoration: none;
}

.hero-aside a:hover {
  color: var(--sign-gold);
}

/* The aside links are plain text, not buttons, so the placeholder state
   needs no box — only the note. */

.hero-aside [data-placeholder] {
  border: 0 !important;
  background: none !important;
  color: var(--sign-dim) !important;
}

/* Three portrait photos, staggered like stacked sacks. */

.mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  align-items: start;
}

.mosaic img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.mosaic img:nth-child(2) {
  margin-top: 1.5rem;
}

.mosaic img:nth-child(3) {
  margin-top: .6rem;
}

/* ---- feature strip ---- */

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 2.25rem;
}

.feature {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .8rem .9rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.3;
}

.feature svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--sign-gold);
}

/* ============================================================
   About
   ============================================================ */

.about {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.about-sign {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sign-wall);
  box-shadow: var(--shadow-lift);
}

.about-sign img {
  width: 100%;
}

.about-sign figcaption {
  padding: .7rem 1rem;
  font-size: .85rem;
  color: var(--sign-dim);
}

.serve {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}

/* ============================================================
   Products — photo cards
   ============================================================ */

.photo-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.photo-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}

.photo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-2);
  border-bottom: 3px solid var(--sign-gold);
}

.photo-card figcaption {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .8rem .85rem 1rem;
}

.photo-card h3 {
  font-size: 1rem;
  letter-spacing: -.005em;
}

.photo-card .brands {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ============================================================
   Rice wall
   ============================================================ */

.split {
  display: grid;
  gap: 2rem;
}

.rice-groups {
  display: grid;
  gap: .7rem;
}

.rice-group {
  display: grid;
  align-content: start;
  gap: .45rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sign-gold);
  border-radius: var(--radius);
}

.rice-group h3 {
  font-size: 1rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.photo-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.note {
  margin-top: 1.25rem;
  font-size: .9rem;
  color: var(--muted);
}

/* ---- chips ---- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .25rem .8rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
}

.chip--accent {
  background: var(--accent-wash);
  border-color: transparent;
  color: var(--accent-strong);
}

.chips--center {
  justify-content: center;
}

.chips--lg .chip {
  min-height: 42px;
  padding: .4rem 1.05rem;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 800;
  background: var(--surface);
}

/* ============================================================
   Frozen foods
   ============================================================ */

.signboard {
  overflow: hidden;
  margin-bottom: .6rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.signboard img {
  width: 100%;
}

.ticks {
  display: grid;
  gap: .5rem;
  margin-top: 1.2rem;
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.ticks li::before {
  content: "\2713";
  flex: none;
  color: var(--accent);
  font-weight: 700;
}

.sub-head {
  margin: 1.5rem 0 .6rem;
  font-size: .78rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   For businesses
   ============================================================ */

.biz {
  padding: 1.6rem 1.25rem;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
}

.biz h2 {
  font-size: clamp(1.35rem, 5vw, 1.9rem);
}

.biz-lead {
  margin-top: 1rem;
  color: var(--text-dim);
}

.steps {
  display: grid;
  gap: .85rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 1rem 1rem 1rem 3.6rem;
  background: var(--bg-soft);
  border-radius: var(--radius);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: grid;
  place-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--sign-wall);
  color: var(--sign-gold);
  font-family: var(--display);
  font-weight: 800;
}

.step h3 {
  font-size: 1rem;
  margin-bottom: .2rem;
}

.step p {
  color: var(--text-dim);
  font-size: .95rem;
}

/* ============================================================
   Gallery + lightbox
   ============================================================ */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.gallery li {
  min-width: 0;
}

.gallery a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface);
  transition: transform .3s ease;
}

.gallery a:hover img {
  transform: scale(1.04);
}

.lightbox {
  width: min(94vw, 560px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--sign-wall);
  color: var(--sign-ink);
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgba(10, 8, 6, .85);
}

.lightbox img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
}

.lightbox p {
  margin: 0;
  padding: .7rem 1rem;
  font-size: .9rem;
  color: var(--sign-dim);
}

.lightbox-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: grid;
  place-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: rgba(0, 0, 0, .6);
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

/* ============================================================
   Visit us
   ============================================================ */

.visit {
  display: grid;
  gap: 1.75rem;
}

.visit-block + .visit-block {
  margin-top: 1.5rem;
}

.visit h3 {
  font-size: 1.05rem;
  margin-bottom: .5rem;
}

.address {
  font-style: normal;
  color: var(--text-dim);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

caption {
  padding: .75rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  text-align: left;
}

th,
td {
  padding: .7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

th {
  font-weight: 700;
  white-space: nowrap;
}

td {
  color: var(--text-dim);
}

/* ---- map (click to load) ---- */

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: 1rem;
  background: var(--accent-wash);
  border: 0;
  color: var(--accent-strong);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.map-load svg {
  width: 38px;
  height: 38px;
}

.map-load small {
  font-weight: 400;
  color: var(--text-dim);
}

/* ============================================================
   Footer — back to the sign wall
   ============================================================ */

.site-footer {
  padding-block: 2.75rem;
  background: var(--sign-wall);
  color: var(--sign-dim);
  border-top: 3px solid var(--sign-gold);
}

.footer-brand {
  margin-bottom: 2rem;
  color: var(--sign-ink);
  font-size: 1.15rem;
}

.footer-grid {
  display: grid;
  gap: 1.75rem;
}

.footer-col h2 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sign-gold);
  margin-bottom: .75rem;
}

.footer-links {
  display: grid;
  gap: .15rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  color: var(--sign-ink);
  font-weight: 700;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--sign-gold);
  text-decoration: underline;
}

.footer-links [data-placeholder] {
  border: 0 !important;
  background: none !important;
  color: var(--sign-dim) !important;
}

.legal {
  display: grid;
  gap: .3rem;
  margin: 0;
  font-size: .9rem;
}

.legal dt {
  font-weight: 700;
  color: var(--sign-dim);
  opacity: .75;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.legal dd {
  margin: 0 0 .6rem;
  color: var(--sign-ink);
}

.copyright {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .88rem;
}

/* ---- sticky action bar (mobile) ---- */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(42, 33, 24, .1);
}

.actionbar .btn {
  min-height: 46px;
  padding-inline: .5rem;
  font-size: .95rem;
}

.has-actionbar {
  /* Keep the bar from covering the last of the footer. */
  padding-bottom: calc(var(--tap) + 2.25rem);
}

/* ============================================================
   Wider screens
   ============================================================ */

@media (min-width: 600px) {
  .photo-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
  }

  .features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .btn-stack {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn-stack .btn {
    flex: 1 1 13rem;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  :root {
    --header-h: 72px;
  }

  body {
    font-size: 17.5px;
  }

  .section {
    padding-block: 5rem;
  }

  .hero {
    padding-block: 4rem 4.5rem;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
  }

  .mosaic {
    gap: .9rem;
  }

  .mosaic img:nth-child(2) {
    margin-top: 3rem;
  }

  .mosaic img:nth-child(3) {
    margin-top: 1.25rem;
  }

  .about {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }

  .photo-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
  }

  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 3rem;
  }

  .split--reverse > :first-child {
    order: 2;
  }

  .rice-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .visit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 2.5rem;
  }

  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .biz {
    padding: 2.75rem 2.5rem;
  }
}

/* Above the mobile breakpoint the sticky bar is unnecessary —
   the hero buttons are in reach. */

@media (min-width: 721px) {
  .actionbar {
    display: none;
  }

  .has-actionbar {
    padding-bottom: 0;
  }
}

/* The hamburger only exists while the nav is collapsed. Seven links need
   more room than a tablet has, so the inline nav waits for 1080px. */

@media (min-width: 1080px) {
  .nav-toggle {
    display: none;
  }

  /* In the DOM the nav follows .topbar-end so the mobile drawer can sit
     below the whole bar. On desktop they swap, putting the section links
     next to the brand and the language pill out at the right edge. */

  .nav {
    order: 2;
    margin-left: auto;
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .15rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .topbar-end {
    order: 3;
    margin-left: .75rem;
  }

  .nav a {
    min-height: 40px;
    padding: .35rem .65rem;
    border-bottom: 0;
    border-radius: var(--radius);
    font-size: .93rem;
  }

  .nav a:hover {
    background: rgba(255, 255, 255, .08);
  }
}

/* ---- motion ---- */

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- print ---- */

@media print {
  .topbar,
  .nav,
  .actionbar,
  .map,
  .skip,
  .gallery {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .hero,
  .site-footer {
    background: #fff;
    color: #000;
  }
}