/* ==========================================================================
   Irvine Coffee Co.
   Palette taken from the Irvine logo and company profile.
   Shape rule: interactive elements are pills, media and tiles use --r (28px),
   the single hero feature photo is an arch.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  /* brand */
  --navy: #133546;
  --green: #2c8070;
  --green-deep: #22695a;
  --cream: #faf9f2;
  --sky: #d3e8ef;
  --peach: #f8e7d6;

  /* semantic, light */
  --bg: var(--cream);
  --bg-alt: #f1efe4;
  --surface: #fffefa;
  --ink: var(--navy);
  --muted: #45616e;
  --line: rgb(19 53 70 / 0.13);
  --accent: var(--green-deep);
  --btn-bg: var(--green-deep);
  --btn-fg: var(--cream);
  --btn-hover: #1b5a4d;
  --shadow: 0 1px 2px rgb(19 53 70 / 0.06), 0 18px 48px -18px rgb(19 53 70 / 0.28);

  /* tiles */
  --t-green-bg: #246b5c;  --t-green-fg: var(--cream);
  --t-navy-bg: var(--navy); --t-navy-fg: var(--cream);
  --t-sky-bg: var(--sky);  --t-sky-fg: var(--navy);
  --t-peach-bg: var(--peach); --t-peach-fg: var(--navy);
  --t-plain-bg: var(--bg-alt); --t-plain-fg: var(--navy);

  --band-bg: var(--green-deep);
  --band-fg: var(--cream);
  --footer-bg: var(--navy);

  /* taken from the watercolour */
  --sky-1: #c2e0ec;
  --sky-2: #d4eaf1;
  --haze: #e6eff0;
  --sand-1: #f6e7cf;
  --sand-2: #f1ddbd;
  --hero-muted: #3d5b69;
  --wash-sand: #f7eedf;
  --wash-sky: #e4f0f4;

  /* system */
  --r: 28px;
  --r-sm: 18px;
  --pill: 999px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b2230;
    --bg-alt: #0f2a3a;
    --surface: #102e3f;
    --ink: #eef0e8;
    --muted: #a3b8c1;
    --line: rgb(238 240 232 / 0.14);
    --accent: #6cc9a8;
    --btn-bg: #5bbf9c;
    --btn-fg: #0b2230;
    --btn-hover: #74d0af;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 24px 60px -20px rgb(0 0 0 / 0.6);

    --t-green-bg: #1d5d50;  --t-green-fg: #f3f2ea;
    --t-navy-bg: #e9e6d7;   --t-navy-fg: var(--navy);
    --t-sky-bg: #16415a;    --t-sky-fg: #eef0e8;
    --t-peach-bg: #4a3129;  --t-peach-fg: #f6e9dc;
    --t-plain-bg: #12364a;  --t-plain-fg: #eef0e8;

    --band-bg: #1d5d50;
    --footer-bg: #07192a;

    --sky-1: #0b2230;
    --sky-2: #10324a;
    --haze: #1b4257;
    --sand-1: #163448;
    --sand-2: #0f2839;
    --hero-muted: #b9ccd3;
    --wash-sand: #1b2f36;
    --wash-sky: #0f2d3d;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--green); color: var(--cream); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--pill);
  font-weight: 600; text-decoration: none; transition: top 0.2s;
}
.skip:focus { top: 12px; }

#top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

/* ---------- icons (Phosphor Bold, inlined as masks at the end of this file) ---------- */
.ic {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat;
}

/* ---------- buttons ---------- */
.btn {
  --lift: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.8rem 1.45rem;
  border-radius: var(--pill);
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transform: translateY(var(--lift));
  transition: transform 0.35s var(--ease), background-color 0.25s, border-color 0.25s, box-shadow 0.35s var(--ease), color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { transition: transform 0.35s var(--ease); }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
@media (hover: hover) {
  .btn:hover { --lift: -2px; }
  .btn--primary:hover { background: var(--btn-hover); box-shadow: 0 14px 30px -14px rgb(34 105 90 / 0.7); }
  .btn--ghost:hover { border-color: var(--ink); }
  .btn:hover .ic--arrow-right { transform: translateX(3px); }
  .btn:hover .ic--arrow-up-right { transform: translate(2px, -2px); }
}
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.12s; }
.handle { opacity: 0.88; font-weight: 500; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  transition: background-color 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 var(--line);
}
.nav__bar { height: 100%; display: flex; align-items: center; gap: 2rem; padding-inline: 10px; }
.nav__logo { display: block; flex: none; border-radius: 8px; }
.nav__logo img { height: 34px; width: auto; }
.nav__logo .logo-light { display: none; }
@media (prefers-color-scheme: dark) {
  .nav__logo .logo-dark { display: none; }
  .nav__logo .logo-light { display: block; }
}
.nav__links { display: flex; gap: 0.25rem; margin-left: auto; }
.nav__links a {
  position: relative;
  padding: 0.55rem 0.9rem;
  border-radius: var(--pill);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s;
}
@media (hover: hover) { .nav__links a:hover { background: var(--line); } }
.nav__cta { min-height: 44px; padding: 0.65rem 1.15rem; font-size: 0.95rem; }
.nav__toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  border-radius: var(--pill);
  border: 1.5px solid var(--line);
  background: var(--surface);
  align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
}

.drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49;
  margin: 0 var(--gutter);
  padding: 1.25rem;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: grid; gap: 1rem;
}
.drawer[hidden] { display: none; }
.drawer__links { display: grid; }
.drawer__links a {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em;
  padding: 0.5rem 0.25rem;
  text-decoration: none;
}
.drawer .btn { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .drawer:not([hidden]) { animation: drop 0.45s var(--ease); }
}
@keyframes drop { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }

@media (max-width: 899px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* ---------- hero: the watercolour shop, painted straight onto a sky-to-sand background ---------- */
.hero {
  --pw: min(76vw, 1240px);               /* painting width */
  --ph: calc(var(--pw) * 0.5444);        /* painting height (1800 x 980) */
  --hz: calc(100% - var(--ph) * 0.44);   /* where the painted horizon sits */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(640px, 100svh, 960px);
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 9vh, 7rem));
  padding-bottom: calc(var(--ph) * 0.35);
  background: linear-gradient(180deg,
    var(--sky-1) 0%,
    var(--sky-2) calc(var(--hz) - 22%),
    var(--haze) calc(var(--hz) - 1.5%),
    var(--sand-1) calc(var(--hz) + 3%),
    var(--sand-2) 100%);
}
.hero__scene {
  position: absolute; z-index: -1;
  right: -8vw; bottom: 0;
  width: var(--pw);
}
.hero__drawing {
  display: block; width: 100%; height: auto;
  translate: var(--px, 0px) var(--py, 0px);
  transition: translate 1.2s var(--ease);
}
.hero__copy { position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.hero h1 {
  font-size: clamp(3rem, 5.5vw, 5.4rem);
  font-weight: 800;
  line-height: 0.93;
  letter-spacing: -0.045em;
  max-width: 10ch;
}
.hl { color: var(--accent); }
.hero__sub {
  margin-top: 1.4rem;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--hero-muted);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero .btn--ghost { background: rgb(250 249 242 / 0.55); border-color: rgb(19 53 70 / 0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (prefers-color-scheme: dark) {
  .hero .btn--ghost { background: rgb(11 34 48 / 0.45); border-color: rgb(238 240 232 / 0.3); color: var(--ink); }
  .hero__drawing { filter: brightness(0.94) saturate(0.95); }
}

/* The palm badge: big, sways with the pointer, shakes when tapped */
.palm-badge {
  --size: clamp(150px, 13vw, 200px);
  position: absolute;
  left: 13%;
  bottom: 9%;
  width: var(--size);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #faf9f2;
  box-shadow: 0 22px 50px -16px rgb(19 53 70 / 0.45), 0 0 0 1px rgb(19 53 70 / 0.06);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.palm-badge:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 4px; border-radius: 50%; }
.palm-badge__ring { position: absolute; inset: 3%; width: 94%; height: 94%; }
.palm-badge__ring text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  fill: var(--navy);
  transition: fill 0.3s;
}
.palm-badge__palm {
  position: relative;
  width: 44%;
  aspect-ratio: 600 / 726;
  translate: 0 4%;
}
.palm-badge__palm img { position: absolute; inset: 0; width: 100%; height: 100%; }
.palm-badge__leaves {
  transform-origin: 41% 42%;
  transform: rotate(var(--sway, 0deg));
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.palm-badge__trunk { transform-origin: 41% 100%; }
@media (hover: hover) {
  .palm-badge:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 28px 60px -18px rgb(19 53 70 / 0.5), 0 0 0 1px rgb(19 53 70 / 0.06); }
  .palm-badge:hover .palm-badge__ring text { fill: var(--green-deep); }
}
.palm-badge:active { transform: scale(0.96); transition-duration: 0.15s; }

@media (prefers-reduced-motion: no-preference) {
  .palm-badge__ring { animation: spin 28s linear infinite; }
  .palm-badge:hover .palm-badge__ring { animation-duration: 9s; }
  .palm-badge__leaves { animation: breeze 5s ease-in-out infinite; }
  .palm-badge.is-shaking .palm-badge__leaves { animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
  .palm-badge.is-shaking .palm-badge__trunk { animation: wobble 1s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
  .palm-badge.is-shaking { animation: hop 0.6s var(--ease); }
  [data-in] { animation: rise 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 100ms + 80ms); }
  .hero__scene { animation: settle 1.6s var(--ease) both; }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes breeze { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 3deg; } }
@keyframes shake {
  0% { rotate: 0deg; } 15% { rotate: -16deg; } 32% { rotate: 13deg; }
  50% { rotate: -8deg; } 68% { rotate: 5deg; } 84% { rotate: -2deg; } 100% { rotate: 0deg; }
}
@keyframes wobble { 0%, 100% { rotate: 0deg; } 20% { rotate: -3deg; } 45% { rotate: 2deg; } 70% { rotate: -1deg; } }
@keyframes hop { 0%, 100% { transform: none; } 35% { transform: translateY(-8px) scale(1.06); } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes settle { from { opacity: 0; transform: translateY(24px); } }

@media (max-width: 899px) {
  .hero {
    --pw: 128vw;
    min-height: 0;
    padding-top: calc(var(--nav-h) + 1.75rem);
    padding-bottom: calc(var(--ph) * 0.92);
  }
  .hero__scene { right: auto; left: -14vw; }
  .hero h1 { max-width: none; }
  .palm-badge { --size: clamp(112px, 30vw, 150px); left: 14%; bottom: 6%; }
}
@media (max-width: 420px) {
  .hero__cta .btn { flex: 1 1 100%; }
}

/* ---------- marquee ---------- */
.marquee {
  background: var(--band-bg);
  color: var(--band-fg);
  overflow: hidden;
  padding-block: clamp(1rem, 2vw, 1.4rem);
  rotate: -1.2deg;
  margin-inline: -2%;
  width: 104%;
}
.marquee__track { display: flex; width: max-content; }
.marquee__group {
  display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem);
  padding-right: clamp(1.25rem, 2.5vw, 2.25rem);
  margin: 0; list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.marquee .sep {
  width: 1.1em; height: 1.1em; border-radius: 50%;
  background: var(--cream) url("assets/img/palm.webp") center 55% / 52% auto no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 38s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section__head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head h2, .story h2 { font-size: clamp(2.3rem, 5vw, 4rem); }
.section__head p { margin-top: 1rem; color: var(--muted); font-size: 1.125rem; max-width: 52ch; }

/* reveal on scroll (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- menu ---------- */
.tabs {
  position: relative;
  display: flex;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  padding: 5px;
  border-radius: var(--pill);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__thumb {
  position: absolute; top: 5px; bottom: 5px; left: 0;
  width: var(--w, 0px);
  transform: translateX(var(--x, 0px));
  border-radius: var(--pill);
  background: var(--ink);
  transition: transform 0.5s var(--ease), width 0.5s var(--ease);
}
.tabs__tab {
  position: relative;
  flex: none;
  min-height: 46px;
  padding: 0.6rem 1.25rem;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--pill);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  transition: color 0.35s;
  -webkit-tap-highlight-color: transparent;
}
.js .tabs__tab[aria-selected="true"] { color: var(--bg); }

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.panel[hidden] { display: none; }
.panel__info h3 { font-size: clamp(2rem, 3.6vw, 3rem); }
.panel__lede { margin-top: 0.75rem; font-size: 1.125rem; color: var(--muted); max-width: 46ch; }

.items {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2rem;
}
.items li { display: grid; gap: 0.15rem; }
.items strong { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.items span { color: var(--muted); font-size: 0.95rem; line-height: 1.45; }

.chips__label { margin-top: 1.75rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.chips { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li {
  padding: 0.45rem 0.9rem;
  border-radius: var(--pill);
  background: var(--t-sky-bg);
  color: var(--t-sky-fg);
  font-size: 0.92rem; font-weight: 600;
}

.panel__media {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
}
.panel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--bg-alt);
}
.panel__media img:not(.panel__main) { aspect-ratio: 1; }
.panel__main { grid-row: 1 / 3; }

@media (prefers-reduced-motion: no-preference) {
  .panel.is-entering .panel__info > * { animation: rise 0.7s var(--ease) both; }
  .panel.is-entering .panel__info > :nth-child(2) { animation-delay: 60ms; }
  .panel.is-entering .panel__info > :nth-child(n+3) { animation-delay: 120ms; }
  .panel.is-entering .panel__media img { animation: pop 0.8s var(--ease) both; }
  .panel.is-entering .panel__media img:nth-child(2) { animation-delay: 80ms; }
  .panel.is-entering .panel__media img:nth-child(3) { animation-delay: 160ms; }
}
@keyframes pop { from { opacity: 0; transform: scale(0.94); } }

@media (max-width: 899px) {
  .panel { grid-template-columns: 1fr; gap: 1.75rem; }
  .panel__media { order: -1; }
}
@media (max-width: 560px) {
  .items { grid-template-columns: 1fr; }
}

.menu__order {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.menu__order p { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); font-weight: 500; }
.menu__order p .ic { color: var(--accent); }

/* ---------- story ---------- */
.story {
  background: var(--wash-sand);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  overflow: hidden;
}
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.story__media { position: relative; }
.story__blob {
  position: absolute; inset: -7% -12% 14% 28%;
  background: var(--green);
  border-radius: 45% 55% 40% 60% / 55% 40% 60% 45%;
  opacity: 0.9;
}
.story__photo {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
}
.story__photo img { width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story__photo img { animation: drift linear both; animation-timeline: view(); scale: 1.14; }
  }
}
@keyframes drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
.story__copy > p { margin-top: 1.25rem; font-size: 1.125rem; color: var(--muted); max-width: 52ch; }
.story__copy > p:first-of-type { margin-top: 1.5rem; }
.story__mission {
  margin-top: 2.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
}
.story__mission blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.story__mission figcaption { margin-top: 0.75rem; font-size: 0.95rem; font-weight: 600; color: var(--accent); }
@media (max-width: 899px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__media { max-width: 460px; }
}

/* ---------- values ---------- */
.values__row { display: grid; gap: 0.75rem; }
.value {
  --tbg: var(--t-plain-bg); --tfg: var(--t-plain-fg);
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--r);
  background: var(--tbg);
  color: var(--tfg);
  overflow: hidden;
}
.value--green { --tbg: var(--t-green-bg); --tfg: var(--t-green-fg); }
.value--sky   { --tbg: var(--t-sky-bg);   --tfg: var(--t-sky-fg); }
.value--peach { --tbg: var(--t-peach-bg); --tfg: var(--t-peach-fg); }
.value--navy  { --tbg: var(--t-navy-bg);  --tfg: var(--t-navy-fg); }
.value--plain { border: 1px solid var(--line); }
.value h3 { font: inherit; letter-spacing: normal; }
.value__btn {
  width: 100%;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 0; background: none; color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r);
}
.value__btn:focus-visible { outline-color: currentColor; outline-offset: -6px; }
.value__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  transform-origin: left bottom;
  transition: transform 0.7s var(--ease);
}
.value__ic {
  order: 2; margin-left: auto;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tfg);
  color: var(--tbg);
  transition: transform 0.6s var(--ease);
}
.value.is-open .value__ic { transform: rotate(90deg); }
.value__desc { padding: 0 1.5rem 1.5rem; max-width: 42ch; font-size: 1.02rem; line-height: 1.55; }
.js .value:not(.is-open) .value__desc { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .value.is-open .value__desc { animation: fade 0.6s var(--ease) both; animation-delay: 0.15s; }
}
@keyframes fade { from { opacity: 0; transform: translateY(10px); } }

/* horizontal accordion on wide screens (JS only; without JS the stacked list shows everything) */
@media (min-width: 1100px) {
  .js .values__row { display: flex; height: 25rem; }
  .js .value { flex: 1 1 0; min-width: 0; transition: flex-grow 0.7s var(--ease); }
  .js .value.is-open { flex-grow: 2.7; }
  .js .value h3 { flex: 1; display: flex; }
  .js .value__btn { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 1.5rem; }
  .js .value__ic { order: 0; margin-left: 0; }
  .js .value__name { font-size: 1.4rem; }
  .js .value.is-open .value__name { transform: scale(1.5); }
  .js .value__desc { width: 22rem; max-width: none; padding-top: 0.25rem; }
  .js .value:not(.is-open) .value__btn:hover .value__ic { transform: rotate(45deg); }
}

/* ---------- follow ---------- */
.follow { padding-bottom: clamp(4rem, 7vw, 6rem); }
.follow__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.strip {
  --pad: max(var(--gutter), calc((100vw - var(--max)) / 2));
  display: flex;
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--pad);
  padding: 0.5rem var(--pad) 2.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  cursor: grab;
  outline-offset: -3px;
}
.strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip.is-dragging img { pointer-events: none; }
.strip__item {
  flex: 0 0 clamp(230px, 24vw, 330px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--bg-alt);
}
.strip__item:nth-child(even) { margin-top: 2.25rem; }
.strip__item img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; transition: transform 1s var(--ease); }
@media (hover: hover) { .strip__item:hover img { transform: scale(1.05); } }

/* ---------- visit ---------- */
.visit { background: var(--wash-sky); }
.visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
.visit__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(0.75rem, 1.2vw, 1rem) clamp(0.75rem, 1.2vw, 1rem) clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.visit__video { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--r-sm); background: #0b2230; }
.facts {
  list-style: none; margin: 1.75rem 0 0; padding: 0 clamp(0.5rem, 1.5vw, 1rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem;
}
.facts li { display: flex; gap: 0.85rem; align-items: flex-start; min-width: 0; }
.facts li:first-child { grid-column: 1 / -1; }
.facts__ic {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sky); color: var(--navy);
}
@media (prefers-color-scheme: dark) { .facts__ic { background: #16415a; color: var(--ink); } }
.facts strong { display: block; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--muted); font-weight: 600; }
.facts span, .facts a { display: block; font-weight: 600; overflow-wrap: anywhere; }
.facts a { text-decoration: none; }
@media (hover: hover) { .facts a:hover { text-decoration: underline; } }
.openstate {
  display: inline-flex !important; align-items: center; gap: 0.45rem;
  margin-top: 0.4rem;
  padding: 0.2rem 0.65rem 0.2rem 0.55rem;
  border-radius: var(--pill);
  font-size: 0.82rem;
  background: var(--bg-alt);
}
.openstate[hidden] { display: none !important; }
.openstate::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b0433a; }
.openstate.is-open::before { background: #2fa37f; box-shadow: 0 0 0 3px rgb(47 163 127 / 0.2); }
.visit__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; padding-inline: clamp(0.5rem, 1.5vw, 1rem); }
.rating {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 1.25rem clamp(0.5rem, 1.5vw, 1rem) 0;
  font-weight: 600; font-size: 0.95rem;
  color: var(--muted);
  text-decoration: none;
  align-self: flex-start;
}
.rating .ic { color: var(--accent); }
@media (hover: hover) { .rating:hover { color: var(--ink); } }
.visit__map {
  border-radius: var(--r);
  overflow: hidden;
  min-height: 440px;
  background: var(--sky);
  border: 1px solid var(--line);
}
.visit__map iframe { width: 100%; height: 100%; min-height: 440px; border: 0; display: block; }
@media (prefers-color-scheme: dark) {
  .visit__map iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.7) brightness(0.95); }
}
@media (max-width: 899px) {
  .visit__grid { grid-template-columns: 1fr; }
  .visit__map, .visit__map iframe { min-height: 340px; }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
  .visit__cta .btn { flex: 1 1 100%; }
}

/* ---------- footer ---------- */
.footer {
  background: var(--footer-bg);
  color: #e9ede6;
  padding-top: clamp(3.5rem, 6vw, 5rem);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer__brand img { width: 170px; height: auto; }
.footer__brand p { margin-top: 1rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.footer__col { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.footer__col h3 { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: #9fb8c2; margin-bottom: 0.35rem; }
.footer__col a { text-decoration: none; }
@media (hover: hover) { .footer__col a:hover { text-decoration: underline; } }
.footer__social { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
.footer__social a {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgb(233 237 230 / 0.25);
  font-size: 1.2rem;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
@media (hover: hover) { .footer__social a:hover { background: #e9ede6; color: var(--navy); border-color: #e9ede6; text-decoration: none; } }
.footer__legal { border-top: 1px solid rgb(233 237 230 / 0.14); padding-block: 1.5rem; font-size: 0.9rem; color: #9fb8c2; }
@media (max-width: 719px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- motion safety net ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- icon glyphs: Phosphor Icons (MIT), bold weight ---------- */
.ic--arrow-right { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E"); }
.ic--arrow-up-right { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z'/%3E%3C/svg%3E"); }
.ic--clock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Zm68-84a12,12,0,0,1-12,12H128a12,12,0,0,1-12-12V72a12,12,0,0,1,24,0v44h44A12,12,0,0,1,196,128Z'/%3E%3C/svg%3E"); }
.ic--coffee { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M212,76H32A12,12,0,0,0,20,88v48a100.24,100.24,0,0,0,26.73,68H32a12,12,0,0,0,0,24H208a12,12,0,0,0,0-24H193.27a100.75,100.75,0,0,0,20-32A44,44,0,0,0,256,128v-8A44.05,44.05,0,0,0,212,76Zm-16,60a76.27,76.27,0,0,1-42,68H86a76.27,76.27,0,0,1-42-68V100H196Zm36-8a20,20,0,0,1-12.57,18.55A97.17,97.17,0,0,0,220,136V101.68A20,20,0,0,1,232,120ZM68,48V24a12,12,0,0,1,24,0V48a12,12,0,0,1-24,0Zm40,0V24a12,12,0,0,1,24,0V48a12,12,0,0,1-24,0Zm40,0V24a12,12,0,0,1,24,0V48a12,12,0,0,1-24,0Z'/%3E%3C/svg%3E"); }
.ic--envelope-simple { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M224,44H32A12,12,0,0,0,20,56V192a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A12,12,0,0,0,224,44ZM193.15,68,128,127.72,62.85,68ZM44,188V83.28l75.89,69.57a12,12,0,0,0,16.22,0L212,83.28V188Z'/%3E%3C/svg%3E"); }
.ic--fork-knife { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M68,88V40a12,12,0,0,1,24,0V88a12,12,0,0,1-24,0ZM220,40V224a12,12,0,0,1-24,0V180H152a12,12,0,0,1-12-12,273.23,273.23,0,0,1,7.33-57.82C157.42,68.42,176.76,40.33,203.27,29A12,12,0,0,1,220,40ZM196,62.92C182.6,77,175,98,170.77,115.38A254.41,254.41,0,0,0,164.55,156H196ZM128,39A12,12,0,0,0,104,41l4,47.46a28,28,0,0,1-56,0L56,41A12,12,0,1,0,32,39L28,87c0,.34,0,.67,0,1a52.1,52.1,0,0,0,40,50.59V224a12,12,0,0,0,24,0V138.59A52.1,52.1,0,0,0,132,88c0-.33,0-.66,0-1Z'/%3E%3C/svg%3E"); }
.ic--instagram-logo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,72a24,24,0,1,1,24-24A24,24,0,0,1,128,152ZM176,20H80A60.07,60.07,0,0,0,20,80v96a60.07,60.07,0,0,0,60,60h96a60.07,60.07,0,0,0,60-60V80A60.07,60.07,0,0,0,176,20Zm36,156a36,36,0,0,1-36,36H80a36,36,0,0,1-36-36V80A36,36,0,0,1,80,44h96a36,36,0,0,1,36,36ZM196,76a16,16,0,1,1-16-16A16,16,0,0,1,196,76Z'/%3E%3C/svg%3E"); }
.ic--list { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z'/%3E%3C/svg%3E"); }
.ic--map-pin { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M128,60a44,44,0,1,0,44,44A44.05,44.05,0,0,0,128,60Zm0,64a20,20,0,1,1,20-20A20,20,0,0,1,128,124Zm0-112a92.1,92.1,0,0,0-92,92c0,77.36,81.64,135.4,85.12,137.83a12,12,0,0,0,13.76,0,259,259,0,0,0,42.18-39C205.15,170.57,220,136.37,220,104A92.1,92.1,0,0,0,128,12Zm31.3,174.71A249.35,249.35,0,0,1,128,216.89a249.35,249.35,0,0,1-31.3-30.18C80,167.37,60,137.31,60,104a68,68,0,0,1,136,0C196,137.31,176,167.37,159.3,186.71Z'/%3E%3C/svg%3E"); }
.ic--phone { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M224,154.8l-47.09-21.11-.18-.08a19.94,19.94,0,0,0-19,1.75,13.08,13.08,0,0,0-1.12.84l-22.31,19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a11.76,11.76,0,0,0,.85-1.15,20,20,0,0,0,1.66-18.83,1.42,1.42,0,0,1-.08-.18L101.2,32A20.06,20.06,0,0,0,80.42,20.15,60.27,60.27,0,0,0,28,80c0,81.61,66.39,148,148,148a60.27,60.27,0,0,0,59.85-52.42A20.06,20.06,0,0,0,224,154.8ZM176,204A124.15,124.15,0,0,1,52,80,36.29,36.29,0,0,1,80.48,44.46l18.82,42L80.14,109.28a12,12,0,0,0-.86,1.16A20,20,0,0,0,78,130.08c9.42,19.28,28.83,38.56,48.31,48A20,20,0,0,0,146,176.63a11.63,11.63,0,0,0,1.11-.85l22.43-19.07,42,18.81A36.29,36.29,0,0,1,176,204Z'/%3E%3C/svg%3E"); }
.ic--star { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M243,96a20.33,20.33,0,0,0-17.74-14l-56.59-4.57L146.83,24.62a20.36,20.36,0,0,0-37.66,0L87.35,77.44,30.76,82A20.45,20.45,0,0,0,19.1,117.88l43.18,37.24-13.2,55.7A20.37,20.37,0,0,0,79.57,233L128,203.19,176.43,233a20.39,20.39,0,0,0,30.49-22.15l-13.2-55.7,43.18-37.24A20.43,20.43,0,0,0,243,96ZM172.53,141.7a12,12,0,0,0-3.84,11.86L181.58,208l-47.29-29.08a12,12,0,0,0-12.58,0L74.42,208l12.89-54.4a12,12,0,0,0-3.84-11.86L41.2,105.24l55.4-4.47a12,12,0,0,0,10.13-7.38L128,41.89l21.27,51.5a12,12,0,0,0,10.13,7.38l55.4,4.47Z'/%3E%3C/svg%3E"); }
.ic--tiktok-logo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M224,68a44.05,44.05,0,0,1-44-44,12,12,0,0,0-12-12H128a12,12,0,0,0-12,12V156a16,16,0,1,1-22.85-14.47A12,12,0,0,0,100,130.69V88A12,12,0,0,0,85.9,76.19a79.35,79.35,0,0,0-47.08,27.74A81.84,81.84,0,0,0,20,156a80,80,0,0,0,160,0V122.67A107.47,107.47,0,0,0,224,132a12,12,0,0,0,12-12V80A12,12,0,0,0,224,68Zm-12,39.15a83.05,83.05,0,0,1-37-14.91A12,12,0,0,0,156,102v54a56,56,0,0,1-112,0,57.86,57.86,0,0,1,32-51.56V124a40,40,0,1,0,64,32V36h17.06A68.21,68.21,0,0,0,212,90.94Z'/%3E%3C/svg%3E"); }
.ic--x { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z'/%3E%3C/svg%3E"); }
.ic--pause { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z'/%3E%3C/svg%3E"); }
.ic--play { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z'/%3E%3C/svg%3E"); }
.ic--moped { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M212,124c-1.22,0-2.43.06-3.62.16L175.24,35.79A12,12,0,0,0,164,28H132a12,12,0,0,0,0,24h23.68l30.23,80.6A44.28,44.28,0,0,0,171,152h-29.2L119.24,91.79A12,12,0,0,0,108,84H28a12,12,0,0,0,0,24h4v2.92A60.14,60.14,0,0,0,0,164a12,12,0,0,0,12,12h4.74a44,44,0,0,0,86.52,0h65.48A44,44,0,1,0,212,124ZM48,130.05a12,12,0,0,0,8-11.32V108H99.68l16.5,44H26.06A36,36,0,0,1,48,130.05ZM60,188a20,20,0,0,1-18.32-12H78.32A20,20,0,0,1,60,188Zm152,0a20,20,0,1,1,20-20A20,20,0,0,1,212,188Z'/%3E%3C/svg%3E"); }