/* =================================================================
   Aroi Japan Market — our own Japanese-wagyu e-commerce venture.
   Built ON TOP of the shared kinetic system (webdesign.css / body.wd-dark):
   inherits the dark tokens, header/footer theming, wd-* sections and reveals.
   Only the Aroi-specific pieces live here, all ar- prefixed.
   Accent = the site brand; the wagyu crimson appears only inside the mocks.
   ================================================================= */
.ar {
  /* Page chrome uses the SITE BRAND, so Aroi still reads as a System Sense
     venture. The crimson below is reserved for the product mocks (the shop
     tile and the certificate) — keeping it there is what makes those two
     blocks read as screenshots rather than as page decoration. */
  --ar: var(--brand);
  --ar-rgb: var(--brand-rgb);
  --ar-demo: #c11a3c;              /* wagyu crimson — demo mocks ONLY */
  --ar-demo-rgb: 193, 26, 60;
  --ar-demo-deep: #7d0f26;
}
/* Aroi runs a narrower shell than the rest of the kinetic pages (1280/1160), the
   same 1120 as JongDee: at full width the hero left too much slack around the
   product tile. This one value drives the header, the hero and every section.
   It is declared on BODY, not on .ar — the header sits outside <main>, so a token
   scoped to .ar would not resolve there and max-width would silently drop out. */
body.ar-page { --ar-shell: 1120px; }
/* the header is outside <main>, so it is scoped by the body class. This has to
   land after webdesign.css's body.wd-dark rule — it does, because ss-aroi is
   enqueued with ss-kinetic as a dependency. */
body.ar-page .header-inner { max-width: var(--ar-shell); }
/* sections: overrides .wd-wrap's 1160px so the whole page shares one edge */
.ar .wd-wrap { max-width: var(--ar-shell); }
/* buttons deliberately use the plain wd-btn--solid brand style, no override */

/* =================================================================
   HERO — copy left, shop product tile right
   ================================================================= */
.ar-hero { padding: 130px 40px 90px; min-height: auto; overflow: hidden; }
.ar-hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--ar-shell); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
.ar-hero-copy { text-align: left; }

/* NOT a flex container: the word-reveal replaces this element's children with
   its own word spans, and flex would then stack every word on its own line. */
.ar-hero-title { margin: 0; display: block; }
.ar-wordmark {
  display: block; margin-bottom: 10px;
  font-size: clamp(2.8rem, 5.2vw, 4.4rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: var(--fg);
}
/* the dot matches the Aroi lockup used on the Our Work page */
.ar-wordmark em { color: var(--ar); font-style: normal; }
/* the supporting line stays clearly smaller than the wordmark, and takes its
   width from the hero column rather than a ch cap */
.ar-hero-tag {
  display: block;
  font-size: clamp(1.35rem, 2.1vw, 1.95rem); font-weight: 700; line-height: 1.3;
  letter-spacing: -.02em; color: #fff;
}
.ar-hero-sub {
  margin: 24px 0 0; max-width: 52ch; color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.75;
}
.ar-hero-cta { justify-content: flex-start; margin-top: 34px; }
.ar-hero-note {
  margin: 20px 0 0; max-width: 46ch; font-size: .92rem; line-height: 1.7;
  color: var(--muted); padding-left: 14px; border-left: 2px solid rgba(var(--ar-rgb), .5);
}

/* ---- hero mock: a product tile as it appears in the shop ---- */
.ar-hero-media { position: relative; display: flex; justify-content: center; }
/* warm halo picked up from the photograph, so the white tile doesn't float as a
   bare rectangle on the dark hero */
.ar-hero-glow {
  position: absolute; z-index: 0; inset: -26% -20%;
  background:
    radial-gradient(52% 52% at 50% 46%, rgba(var(--ar-demo-rgb), .55), transparent 72%),
    radial-gradient(46% 46% at 62% 68%, rgba(var(--ar-rgb), .22), transparent 70%);
  filter: blur(44px); pointer-events: none;
}
.ar-tile {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px; border-radius: 20px; overflow: hidden;
  background: #fff; color: #14100f;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 40px 70px rgba(0, 0, 0, .5);
  animation: ar-float 7s ease-in-out infinite;
}
@keyframes ar-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.ar-tile-shot {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: #241a16;   /* shows only while the photo decodes */
}
/* the product photograph fills the shot area; the source is 1.6:1 and the steak
   sits dead centre, so a 4:3 cover crop keeps the whole cut plus the garnish */
.ar-tile-shot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.ar-tile-grade {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(20, 12, 12, .78); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
}
.ar-tile-body { padding: 18px 20px 22px; }
.ar-tile-brand {
  margin: 0 0 7px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #8a7d78;
}
.ar-tile-name {
  margin: 0 0 12px; font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: #14100f;
}
.ar-tile-price {
  margin: 0 0 16px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--ar-demo);
}
.ar-tile-price span { font-size: .95rem; font-weight: 700; opacity: .65; }
.ar-tile-btn {
  display: block; text-align: center; padding: 12px 20px; border-radius: 999px;
  background: var(--ar-demo); color: #fff; font-size: .95rem; font-weight: 700;
}

/* =================================================================
   WHAT OMI WAGYU IS (light)
   ================================================================= */
/* The heading lives INSIDE the left column so the trio card runs alongside the
   whole block, the same treatment as the JongDee guest section. */
.ar-omi-layout {
  display: grid; grid-template-columns: 1fr minmax(0, 360px);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.ar-omi-copy .wd-h2 { max-width: 18ch; }
.ar-omi-copy .wd-lead { margin-bottom: 0; }

/* the three great wagyu, with ours picked out */
.ar-trio { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ar-trio-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 20px 24px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .4s, background-color .4s;
}
.ar-trio-name { font-size: 1.15rem; font-weight: 700; color: var(--fg); }
.ar-trio-item.is-ours {
  background: rgba(var(--ar-rgb), .1);
  border-color: rgba(var(--ar-rgb), .45);
  transform: scale(1.04);
}
.ar-trio-item.is-ours .ar-trio-name { color: var(--ar); font-size: 1.32rem; }
.ar-trio-note {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ar);
  padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(var(--ar-rgb), .45);
}
.ar-omi-cards { margin-top: clamp(36px, 5vw, 60px); }

/* =================================================================
   THE RANGE
   ================================================================= */
.ar-range-grid {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px);
}
.ar-range-card {
  display: flex; flex-direction: column;
  padding: 26px 28px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .4s;
}
.ar-range-card:hover { transform: translateY(-4px); border-color: rgba(var(--ar-rgb), .45); }
.ar-range-title { margin: 0 0 10px; font-size: 1.16rem; font-weight: 700; color: var(--fg); }
.ar-range-price {
  margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--ar);
}
.ar-range-desc { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }

.ar-range-foot {
  margin-top: clamp(30px, 4vw, 44px);
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px;
}
/* pre-launch pill — the shop lists products before it opens, so the date has to
   sit right next to the CTA that takes people there */
.ar-open-badge {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 8px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ar); background: rgba(var(--ar-rgb), .12);
  border: 1px solid rgba(var(--ar-rgb), .42);
}
.ar-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ar);
  box-shadow: 0 0 0 0 rgba(var(--ar-rgb), .7); animation: ar-pulse 2.2s ease-out infinite;
}
@keyframes ar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--ar-rgb), .7); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--ar-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--ar-rgb), 0); }
}
.ar-range-note { margin: 0; max-width: 46ch; color: var(--muted); font-size: .9rem; line-height: 1.65; }

/* =================================================================
   COLD CHAIN (light)
   ================================================================= */
.ar-ship-steps {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px);
}
.ar-step {
  position: relative; padding: 26px 28px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .4s;
}
.ar-step:hover { transform: translateY(-4px); border-color: rgba(var(--ar-rgb), .45); }
.ar-step-n {
  display: block; font-size: .9rem; font-weight: 800; color: var(--ar);
  letter-spacing: .1em; margin-bottom: 10px;
}
.ar-step h3 { margin: 0 0 8px; font-size: 1.18rem; font-weight: 700; color: var(--fg); }
.ar-step p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }

/* =================================================================
   PROVENANCE — copy left, certificate mock right
   ================================================================= */
.ar-auth-grid {
  display: grid; grid-template-columns: 1fr minmax(0, 520px);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.ar-auth-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.ar-auth-list li {
  display: flex; align-items: flex-start; gap: 13px;
  color: var(--fg); font-size: 1.02rem; line-height: 1.6;
}
.ar-check {
  position: relative; flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px;
  border-radius: 50%; background: rgba(var(--ar-rgb), .14);
  border: 1px solid rgba(var(--ar-rgb), .45);
}
.ar-check::after {
  content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 9px;
  border: solid var(--ar); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* link out to the certificate published on the shop */
.ar-cert-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
  color: var(--ar); font-weight: 700; font-size: 1rem; text-decoration: none;
  border-bottom: 1px solid rgba(var(--ar-rgb), .4); padding-bottom: 3px;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.ar-cert-link:hover { border-color: var(--ar); gap: 13px; }
.ar-cert-link svg { width: 17px; height: 17px; }

/* the scanned certificate — a white mount and a lift on hover so it reads as a
   document you can open, not as page furniture */
.ar-cert { margin: 0; width: 100%; max-width: 520px; margin-inline: auto; }
.ar-cert-shot {
  display: block; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ar-cert-shot:hover { transform: translateY(-4px); box-shadow: 0 38px 74px rgba(0, 0, 0, .62); }
.ar-cert-shot img { display: block; width: 100%; height: auto; }
.ar-cert-cap {
  margin: 14px 0 0; text-align: center;
  color: var(--muted); font-size: .85rem; line-height: 1.6;
}

/* =================================================================
   CLOSING CTA — the shared .cta-rig band (style.css) in a dark skin.
   Structure, streaks, badge and title strokes all come from style.css;
   only what is hardcoded light there is restated here.
   ================================================================= */
.cta-rig--dark {
  background:
    radial-gradient(72% 92% at 50% 0%, rgba(var(--ar-demo-rgb), .20), transparent 70%),
    radial-gradient(54% 74% at 50% 100%, rgba(var(--ar-rgb), .10), transparent 72%),
    var(--bg);
  border-top-color: var(--line);
}
/* the dot grid is a black stipple on the light band — invert it */
.cta-rig--dark::before { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px); }
.cta-rig--dark .cta-rig-title { color: var(--fg); }
.cta-rig--dark .cta-rig-sub   { color: var(--muted); }

/* second action: same monospace treatment as .cta-rig-phone on the light band,
   but a plain link — a shop closes on the shop, not on the office number */
.cta-rig-alt {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 1rem; letter-spacing: .04em;
  transition: color .2s var(--ease);
}
.cta-rig-alt:hover { color: var(--ar); }

.ar-cta-badge { margin-top: 34px; }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1040px) {
  .ar-hero-inner { grid-template-columns: 1fr; gap: 54px; }
  .ar-hero-copy { text-align: center; }
  .ar-hero-sub { margin-left: auto; margin-right: auto; }
  .ar-hero-cta { justify-content: center; }
  .ar-hero-note { margin-inline: auto; text-align: left; }
  .ar-auth-grid { grid-template-columns: 1fr; }
  /* stacked: copy first so the heading still introduces the section — the trio
     must NOT jump above it now that the heading lives in this column */
  .ar-omi-layout { grid-template-columns: 1fr; }
  .ar-omi-copy .wd-h2 { max-width: 22ch; }
  .ar-range-grid, .ar-ship-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ar-range-grid, .ar-ship-steps { grid-template-columns: 1fr; }
  .ar-trio-item.is-ours { transform: none; }
}
@media (max-width: 480px) {
  .ar-trio-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-tile, .ar-badge-dot { animation: none; }
  .ar-range-card:hover, .ar-step:hover, .ar-trio-item { transform: none; }
}