/* ============================================================================
   Saks Industries — corporate site styles
   Phase 2 real site (SAK-27). Hand-authored, no build step.
   Design tokens live in :root so a future theme pass changes one place.
   ========================================================================== */

:root {
  /* Showa-modern, taken from the サ plaque: sumi slate, washi, warm stone.
     No second hue. Buttons and links use the same ink as the plaque. */
  --ink:        #1c1916;
  --ink-soft:   #3a342c;
  --brand:      #1c1916;
  --brand-dark: #0f0e0c;
  --accent:     #1c1916;
  --bg:         #f4efe6;
  --bg-soft:    #e7e0d4;
  --paper:      #f7f3ec;
  --bg-ink:     #161311;
  --line:       #d5cec2;
  --text:       #1c1916;
  --muted:      #5e574c;
  --on-ink:     #f4efe6;
  --on-ink-mut: #d2c9bb;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12  0 0 0 0 .1  0 0 0 0 .08  .2 .2 .2 0 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  --radius:   2px;
  --radius-s: 2px;
  --shadow:   0 1px 0 rgba(28,25,22,.05);
  --shadow-lg:0 10px 24px rgba(28,25,22,.08);
  --maxw:     1120px;
  --gap:      24px;
  --product-gap: 32px;
  /* One vertical rhythm for the home hero, inner page heroes, and sections. */
  --section-pad: 88px;
  --section-head-gap: 40px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card { transition: none; }
  .btn:active, .card:hover, .card:focus-within { transform: none; }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--grain);
  background-size: 160px 160px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Show JA/EN content driven by the <html lang> attribute set by i18n.js.
   Content authored inline as [data-i18n] is swapped by JS; this rule only
   guards the pre-JS flash for the lang toggle labels. */
[hidden] { display: none !important; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
.brand, .btn, .nav-link, .social a { text-decoration: none; }

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

h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0 0 .5em; font-weight: 800; }
h1, h2 { text-wrap: balance; letter-spacing: -.02em; }
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3 {
  letter-spacing: .04em;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.section { padding-block: var(--section-pad); }
.section--soft { background-color: var(--bg-soft); background-image: var(--grain); }
.section-head { max-width: 620px; margin: 0 0 var(--section-head-gap); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 12px;
  border-bottom: 4px double var(--ink); padding-bottom: 4px; line-height: 1.3;
}
.lede { font-size: 1.06rem; color: var(--muted); }

/* Skip link for keyboard users (carries forward the SAK-11 a11y baseline) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.site-footer :focus-visible,
.page-hero :focus-visible,
.cta-band :focus-visible { outline-color: var(--on-ink); }
/* Sticky header is 64px. Keep in-page targets (news, products) below it. */
[id] { scroll-margin-top: 84px; }
/* The language group clips a default outline. Draw the ring inside the control. */
.lang-btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
  position: relative;
  z-index: 1;
}
.lang-btn[aria-pressed="true"]:focus-visible { outline-color: var(--on-ink); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  /* Native <button> does not inherit the page font. Match <a class="btn">. */
  font-family: inherit; line-height: inherit;
  font-weight: 600; font-size: .98rem; padding: 12px 22px; border-radius: var(--radius-s);
  border: 1.5px solid transparent; cursor: pointer; transition: transform .08s ease, background .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: var(--ink-soft); color: var(--on-ink); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn--ghost-on-ink { background: transparent; color: var(--on-ink); border-color: rgba(244,239,230,.45); }
.btn--ghost-on-ink:hover { border-color: var(--on-ink); }
.btn--lg { padding: 15px 30px; font-size: 1.05rem; }

/* ---- Header / nav -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,239,230,.94); backdrop-filter: saturate(1.05) blur(8px);
  border-bottom: 4px double var(--ink);
}
/* Phone layout is the default so a missed desktop media query cannot leave
   the link row in the header bar. At ≥901px the links join that bar. */
.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "brand toggle lang";
  align-items: center;
  column-gap: 12px;
  grid-template-rows: 64px auto;
  min-width: 0;
}
.nav.is-open { grid-template-areas: "brand toggle lang" "links links links"; }
.brand { grid-area: brand; display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 44px; height: 44px; flex: none; object-fit: contain; }
.brand-lockup {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 0;
  /* Intrinsic ratio of saks-wordmark-ja.png (2578×190) at a 22px cap. */
  width: calc(22px * 2578 / 190);
  max-width: 100%;
  container-type: inline-size;
}
.brand-wordmark {
  display: block; width: 100%; height: 22px; max-height: 44px;
  object-fit: contain; object-position: left center;
}
/* Tracking matches the katakana at full width. Narrower slots step it down
   so the Latin line stays inside the image and does not clip a glyph. */
.brand-wordmark-en {
  display: block; font-size: 10.5px; font-weight: 800; line-height: 1;
  letter-spacing: 1.31em; color: var(--ink); text-transform: uppercase;
  white-space: nowrap;
}
@container (max-width: 270px) {
  .brand-wordmark-en { letter-spacing: .95em; }
}
@container (max-width: 220px) {
  .brand-wordmark-en { letter-spacing: .58em; }
}
@container (max-width: 170px) {
  .brand-wordmark-en { letter-spacing: .32em; }
}

.nav-links {
  grid-area: links;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 4px 0 12px;
}
.nav.is-open .nav-links { display: flex; }
.nav-link {
  color: var(--text); font-weight: 600; font-size: .96rem; padding: 8px 12px;
  border-radius: var(--radius-s);
}
.nav-link:hover { background: var(--bg-soft); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 800; box-shadow: inset 0 -2px 0 var(--ink); }
.nav-cta { margin-left: 6px; }
/* Contact is a primary button. Keep the label white in hover, focus, and the
   current-page state — the generic current-link color would paint it brand-on-brand. */
.nav-link.nav-cta,
.nav-link.nav-cta:hover,
.nav-link.nav-cta:focus-visible,
.nav-link.nav-cta[aria-current="page"] {
  color: var(--on-ink);
  background: var(--ink);
  box-shadow: none;
}
.nav-link.nav-cta:hover,
.nav-link.nav-cta[aria-current="page"]:hover { background: var(--ink-soft); color: var(--on-ink); }
.nav-link.nav-cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.nav-toggle {
  grid-area: toggle;
  display: inline-flex; flex: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper);
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 1px; position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.lang-toggle {
  grid-area: lang; justify-self: end; flex: none;
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden;
}
.lang-btn {
  font: inherit; font-size: .82rem; font-weight: 700; padding: 6px 10px; border: 0; cursor: pointer;
  background: var(--paper); color: var(--muted);
}
.lang-btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

@media (min-width: 901px) {
  .nav, .nav.is-open {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand links lang";
    column-gap: 20px;
    grid-template-rows: 64px;
    height: 64px;
  }
  .nav-toggle { display: none; }
  .nav-links, .nav.is-open .nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: auto;
    max-width: none;
    padding: 0;
  }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { background-color: var(--bg-soft); background-image: var(--grain); border-bottom: 4px double var(--ink); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-block: var(--section-pad); }
.hero-copy .eyebrow { margin-bottom: 16px; }
.hero-copy p { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
/* Home hero sits in a half column. A slightly smaller display size, tighter
   leading, and a fixed gap under the title keep it to about two lines. */
.hero .hero-copy h1 {
  font-size: clamp(2rem, 2.1vw + 1.05rem, 2.65rem);
  line-height: 1.14;
  letter-spacing: -0.028em;
  margin-bottom: 14px;
}
html[lang="ja"] .hero .hero-copy h1 { letter-spacing: .04em; }
.hero .hero-copy p { line-height: 1.65; margin-bottom: 0; }
.hero-art {
  border-radius: var(--radius);
  border: 4px double var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow: hidden;
  line-height: 0;
}
.hero-art picture, .hero-art img { display: block; width: 100%; height: auto; }

/* ---- Hero "growing" animation (作る → 守る → 育てる) ---------------------
   Plays once on load, in time with the headline. Opt-in only: the inline
   gate in index.html <head> adds html.hero-grow when motion is allowed and
   the browser supports @property + image-set(type()). No JS, reduced motion,
   print, or an older browser => no class => the static image, untouched.

   Layers (all the same file as <picture>, so no extra download):
     img            the real image, held faint (washi ghost) underneath
     .hero-art::before        1 作る  build    left planting, wipes left → right
     .hero-art picture::after 2 守る  protect  scarecrow + sluice gate, opens from centre
     .hero-art::after         3 育てる grow    rises bottom → top over the rice
   Every layer runs the same 3.6s keyframes, so they all end on one frame:
   the overlays drop back to visibility:hidden and the img to its natural
   style. The resting state is the plain <img>: no opacity, filter, or mask.
   Bands come from the art at 1280×720: planting 0–40%, scarecrow 50–62%,
   sluice gate 62–70%, rice plant 71–96%. */
@property --hg-make { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --hg-guard { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --hg-grow { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

@media screen and (prefers-reduced-motion: no-preference) {
  html.hero-grow {
    --hg-dur: 3.6s;
    --hg-vermilion: rgba(185, 115, 90, .3); /* the sun, faded */
  }
  html.hero-grow .hero-art { position: relative; }
  html.hero-grow .hero-art img { animation: hero-grow-base var(--hg-dur) linear backwards; }

  html.hero-grow .hero-art::before,
  html.hero-grow .hero-art picture::after,
  html.hero-grow .hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    visibility: hidden;
    background: url("hero-tanbo.jpg") 0 0 / 100% 100% no-repeat;
    background-image: image-set(url("hero-tanbo.webp") type("image/webp"), url("hero-tanbo.jpg") type("image/jpeg"));
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
  /* 1 作る: a soft edge sweeps across the planting rows. */
  html.hero-grow .hero-art::before {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--hg-make) - 14%), transparent var(--hg-make));
            mask-image: linear-gradient(90deg, #000 calc(var(--hg-make) - 14%), transparent var(--hg-make));
    animation: hero-grow-make var(--hg-dur) linear backwards;
  }
  /* 2 守る: the scarecrow and sluice gate open out from the band centre (59%). */
  html.hero-grow .hero-art picture::after {
    -webkit-mask-image: linear-gradient(90deg,
      transparent calc(59% - var(--hg-guard) - 7%), #000 calc(59% - var(--hg-guard)),
      #000 calc(59% + var(--hg-guard)), transparent calc(59% + var(--hg-guard) + 7%));
            mask-image: linear-gradient(90deg,
      transparent calc(59% - var(--hg-guard) - 7%), #000 calc(59% - var(--hg-guard)),
      #000 calc(59% + var(--hg-guard)), transparent calc(59% + var(--hg-guard) + 7%));
    animation: hero-grow-guard var(--hg-dur) linear backwards;
  }
  /* 3 育てる: a feathered line rises from the soil, so the stalks come up and
     the heads arrive last. Left of the rice is already shown, so this layer
     only reads on the right band (and settles the seams between stages). */
  html.hero-grow .hero-art::after {
    -webkit-mask-image: linear-gradient(0deg, #000 calc(var(--hg-grow) - 24%), transparent var(--hg-grow));
            mask-image: linear-gradient(0deg, #000 calc(var(--hg-grow) - 24%), transparent var(--hg-grow));
    animation: hero-grow-rise var(--hg-dur) linear backwards;
  }

  /* Headline: each verb gets a faint vermilion brush under it while its stage
     plays, then the stroke lifts away. hero-grow.js wraps the verbs. */
  html.hero-grow .hero-verb {
    background: linear-gradient(var(--hg-vermilion), var(--hg-vermilion)) 0 92% / 0% .3em no-repeat;
    animation: var(--hg-dur) linear backwards;
  }
  html.hero-grow .hero-verb[data-stage="1"] { animation-name: hero-grow-verb-1; }
  html.hero-grow .hero-verb[data-stage="2"] { animation-name: hero-grow-verb-2; }
  html.hero-grow .hero-verb[data-stage="3"] { animation-name: hero-grow-verb-3; }
}

/* Timeline (share of 3.6s): 作る 4–38%, 守る 33–67%, 育てる 62–96%. */
@keyframes hero-grow-base {
  0%, 94% { opacity: .2; }
  100%    { opacity: 1; }
}
@keyframes hero-grow-make {
  0%, 4%   { visibility: visible; --hg-make: 0%; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
  38%, 100% { visibility: visible; --hg-make: 56%; }
}
@keyframes hero-grow-guard {
  0%, 33%  { visibility: visible; --hg-guard: 0%; opacity: 0; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
  47%      { opacity: 1; }
  67%, 100% { visibility: visible; --hg-guard: 11%; opacity: 1; }
}
@keyframes hero-grow-rise {
  0%, 62%  { visibility: visible; --hg-grow: 0%; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
  96%, 100% { visibility: visible; --hg-grow: 124%; }
}
@keyframes hero-grow-verb-1 {
  0%, 4%   { background-size: 0% .3em; background-position: 0 92%; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
  20%      { background-size: 100% .3em; background-position: 0 92%; }
  36%      { background-size: 100% .3em; background-position: 100% 92%; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
  48%, 100% { background-size: 0% .3em; background-position: 100% 92%; }
}
@keyframes hero-grow-verb-2 {
  0%, 33%  { background-size: 0% .3em; background-position: 0 92%; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
  49%      { background-size: 100% .3em; background-position: 0 92%; }
  65%      { background-size: 100% .3em; background-position: 100% 92%; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
  77%, 100% { background-size: 0% .3em; background-position: 100% 92%; }
}
@keyframes hero-grow-verb-3 {
  0%, 62%  { background-size: 0% .3em; background-position: 0 92%; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
  78%      { background-size: 100% .3em; background-position: 0 92%; }
  90%      { background-size: 100% .3em; background-position: 100% 92%; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
  100%     { background-size: 0% .3em; background-position: 100% 92%; }
}

/* ---- Trust / partners ---------------------------------------------------- */
.partners { border-bottom: 1px solid var(--line); background-color: var(--paper); background-image: var(--grain); }
/* padding shorthand would wipe .container's 24px inset and shift this strip
   left of the header, hero, and About/Products content. */
.partners-inner { display: flex; align-items: center; gap: 28px; padding-block: 26px; flex-wrap: wrap; }
.partners-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.badge {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .82rem;
  color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: var(--radius-s);
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---- Cards grid (services / expertise) ----------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 9px 9px, var(--ink) 1.4px, transparent 1.6px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--ink) 1.4px, transparent 1.6px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--ink) 1.4px, transparent 1.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--ink) 1.4px, transparent 1.6px);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
  .card:has(a):hover {
    border-color: var(--ink);
    box-shadow: var(--shadow-lg);
  }
}
.card:focus-within {
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-s); display: grid; place-items: center;
  background: var(--ink); color: var(--on-ink);
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { margin: 4px 0 2px; }
.card p { color: var(--muted); margin: 0; }
.card-cta { margin-top: auto; font-weight: 700; color: var(--ink); padding-top: 10px; align-self: flex-start; text-decoration: underline; }
.card-cta::after { content: " →"; }
.card-cta:hover, .card-cta:focus-visible { text-decoration: underline; }

/* News is a feed (date, tag, headline), not a service card. One panel gives
   the block weight; the headline is larger than the old 1.05rem inline size. */
.news-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.news-item {
  display: grid; grid-template-columns: 9.25rem minmax(0, 1fr);
  column-gap: 28px; align-items: center; padding: 22px 26px;
}
.news-item + .news-item { border-top: 1px solid var(--line); }
.news-kicker { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.news-date {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .92rem;
  letter-spacing: .01em; color: var(--ink); line-height: 1.2;
}
.news-item h3 {
  margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.015em;
}

/* ---- Company address (quiet, under the mission) -------------------------- */
.company-address {
  max-width: 40rem; margin: 8px auto 0; padding-top: 22px;
  border-top: 1px solid var(--line); font-style: normal; text-align: center;
}
.company-address-name { display: block; font-weight: 700; color: var(--ink); }
.company-address-line { display: block; margin-top: 6px; color: var(--muted); line-height: 1.6; }
html[lang="ja"] .company-address {
  word-break: keep-all; line-break: strict; overflow-wrap: anywhere;
}

/* ---- Company IDs + map ---------------------------------------------------- */
.company-ids {
  max-width: 40rem; margin: 14px auto 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 6px 28px; font-size: .9rem; color: var(--muted);
}
.company-id { display: flex; gap: 10px; align-items: baseline; }
.company-id dt { margin: 0; }
.company-id dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.company-map {
  max-width: 48rem; margin: 26px auto 0; padding: 4px;
  border: 4px double var(--ink); background: var(--paper, #f7f3ea);
}
.company-map iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0;
  filter: grayscale(1) contrast(1.05);
}
.company-map figcaption { margin-top: 8px; text-align: center; font-size: .85rem; }
.company-map figcaption a { color: var(--ink); }
@media (max-width: 560px) { .company-map iframe { aspect-ratio: 4 / 3; } }

/* ---- Products ------------------------------------------------------------ */
.products-grid { gap: var(--product-gap); }
.product-card { padding: 0; gap: 0; height: 100%; }
.product-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(140deg, var(--ink-soft), var(--ink));
}
.product-media > .product-img,
.product-media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.product-media > div.product-img {
  display: grid;
  place-items: center;
  color: var(--on-ink-mut);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.product-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tag {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--bg-soft); padding: 4px 10px; border-radius: var(--radius-s); border: 1px solid var(--ink);
}
.product-card p { color: var(--muted); margin: 0; }
.product-card .btn { align-self: flex-start; margin-top: auto; }
.product-card .btn:focus-visible { outline-offset: 3px; }

/* ---- Contact ------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--ink); font-size: .92rem; }
.field input, .field textarea {
  width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: var(--radius-s); background: var(--paper); color: var(--text);
}
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: none; }
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.info-block { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.info-block:last-of-type { border-bottom: 0; }
.info-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-s); display: grid; place-items: center; background: var(--bg-soft); color: var(--ink); border: 1px solid var(--ink); }
.info-icon svg { width: 20px; height: 20px; }
.info-title { font-weight: 700; color: var(--ink); }
.info-block p { margin: 2px 0 0; color: var(--muted); }

/* ---- Legal ---------------------------------------------------------------- */
.legal-intro { padding: 64px 0 0; }
.legal-body { padding-top: 2rem; padding-bottom: 80px; }
.prose {
  max-width: 66ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  text-wrap: pretty;
}
.prose h1 {
  font-size: clamp(1.85rem, 1.2vw + 1.2rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
}
html[lang="ja"] .prose h1,
html[lang="ja"] .prose h2,
html[lang="ja"] .news-item h3 { letter-spacing: .04em; }
.prose .eyebrow { margin-bottom: 10px; }
.prose h2 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  margin: 2.15rem 0 0.55rem;
}
.prose p { margin: 0 0 0.85em; }
.prose p:last-child { margin-bottom: 0; }
.prose ul,
.prose ol { margin: 0 0 0.85em; padding-left: 1.3em; }
.prose li { margin: 0.4em 0; }
.prose li > ul,
.prose li > ol { margin: 0.35em 0 0.15em; }
.legal-body .prose > :first-child { margin-top: 0; }
.prose .legal-updated { color: var(--muted); font-size: .875rem; margin: 0; line-height: 1.5; }
.prose .interim-notice,
.interim-notice {
  background: var(--bg-soft); border: 4px double var(--ink); border-radius: var(--radius-s);
  padding: 12px 16px; margin: 1rem 0 0; font-size: .9375rem; line-height: 1.65; color: var(--text);
}

/* ---- Page hero (inner pages) --------------------------------------------- */
.page-hero { background: var(--bg-ink); color: var(--on-ink); padding-block: var(--section-pad); border-bottom: 4px double var(--on-ink); }
.page-hero h1 { color: var(--on-ink); }
.page-hero .eyebrow { color: var(--on-ink); border-bottom-color: var(--on-ink); }
.page-hero p,
.page-hero .hero-copy p {
  color: var(--on-ink-mut);
  max-width: 46ch;
  font-size: 1.15rem;
  margin: 0;
}
/* On sumi, a sumi primary button disappears. Invert it: washi fill, sumi label.
   Secondary stays an outline in washi so it reads against the same ground. */
.page-hero .btn--primary,
.cta-band .btn--primary {
  background: var(--on-ink);
  color: var(--ink);
}
.page-hero .btn--primary:hover,
.cta-band .btn--primary:hover {
  background: var(--paper);
  color: var(--ink);
}
.page-hero .btn--secondary,
.cta-band .btn--secondary {
  color: var(--on-ink);
  border-color: var(--on-ink);
  background: transparent;
}
.page-hero .btn--secondary:hover,
.page-hero .btn--secondary:focus-visible,
.cta-band .btn--secondary:hover,
.cta-band .btn--secondary:focus-visible {
  border-color: var(--paper);
  color: var(--paper);
  background: transparent;
}

/* ---- CTA band ------------------------------------------------------------ */
.cta-band { background: var(--bg-ink); color: var(--on-ink); border-radius: var(--radius); border: 4px double rgba(244,239,230,.45); padding: 44px; text-align: center; }
.cta-band h2 { color: var(--on-ink); }
.cta-band p { color: var(--on-ink-mut); max-width: 52ch; margin: 0 auto 24px; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: var(--bg-ink); color: var(--on-ink-mut); padding: 56px 0 28px; }
/* The official mark's inner panel is transparent. On the dark footer, a washi
   tile sits behind the image so the サ stays visible. The PNG is unchanged. */
.site-footer .brand-mark {
  background-color: var(--paper);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.site-footer .brand-wordmark-en { color: var(--on-ink); }
/* The katakana file is black ink. Invert only on the dark footer so the
   original glyphs read as washi without rewriting the PNG. */
.site-footer .brand-wordmark { filter: invert(1); }
.site-footer h4 { color: var(--on-ink); font-size: .95rem; margin: 0 0 14px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-links a { color: var(--on-ink-mut); text-decoration: underline; text-underline-offset: .15em; }
.footer-links a:hover { color: var(--on-ink); }
.footer-desc { max-width: 34ch; margin-top: 14px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 40px; padding-top: 20px; border-top: 4px double rgba(244,239,230,.4);
  font-size: .88rem; flex-wrap: wrap;
}
.social { display: flex; gap: 10px; }
.social a { width: 34px; height: 34px; border-radius: var(--radius-s); display: grid; place-items: center; background: rgba(244,239,230,.08); color: var(--on-ink); }
.social a:hover { background: var(--on-ink); color: var(--ink); }
.social svg { width: 18px; height: 18px; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --section-pad: 64px;
    --section-head-gap: 28px;
    --product-gap: 24px;
  }
  .hero-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .contact-grid, .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .section.legal-intro { padding: 40px 0 0; }
  .section.legal-body { padding-top: 28px; }
  .nav-link { padding: 12px; max-width: 100%; }
  .nav-cta { margin-left: 0; }
  .nav.is-open .nav-links {
    border-top: 1px solid var(--line);
    margin-top: 8px;
    padding-top: 8px;
  }
}
@media (max-width: 400px) {
  .brand-lockup { width: calc(18px * 2578 / 190); }
  .brand-wordmark { height: 18px; }
  .brand-wordmark-en { font-size: 9px; letter-spacing: .5em; }
}
@container (max-width: 140px) {
  .brand-wordmark-en { letter-spacing: .22em; }
}
@media (max-width: 360px) {
  .brand-wordmark-en { display: none; }
}
@media (max-width: 620px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero-btns .btn { flex: 1; }
  .cta-band { padding: 32px 22px; }
  .news-item { grid-template-columns: 1fr; row-gap: 10px; align-items: start; padding: 18px 18px; }
}

/* ---- Contact polish + shared a11y (appended so earlier rhythm rules stay intact) ---- */
:root {
  /* Focus and control edges stay on the Showa ink and stone, which already clear 3:1.
     Dark surfaces restate a washi ring below so this block does not paint sumi on sumi. */
  --focus: var(--ink);
  --control-line: var(--muted);
}

:focus-visible { outline-color: var(--ink); }
.lang-btn:focus-visible { outline-color: var(--ink); }
.site-footer :focus-visible,
.page-hero :focus-visible,
.cta-band :focus-visible,
.lang-btn[aria-pressed="true"]:focus-visible { outline-color: var(--on-ink); }
main[tabindex="-1"]:focus { outline: none; }

/* Mobile header shows the language control before the drawer; desktop shows it after the links.
   Separate nodes keep tab order equal to that visual order. */
.lang-toggle-desktop { display: none; }
.nav-toggle,
.lang-toggle { border-color: var(--control-line); }
.lang-btn { color: var(--muted); }
.btn--secondary { border-color: var(--control-line); }

.field label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-flag {
  flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand-dark);
}
.field-flag--optional { color: var(--muted); font-weight: 600; }
.field input,
.field textarea { border-color: var(--control-line); }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus,
.field textarea:focus {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  box-shadow: none;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.is-submitted .field input:invalid,
.is-submitted .field textarea:invalid { border-color: #9f1239; }
.field input[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus,
.is-submitted .field input:invalid:focus,
.is-submitted .field textarea:invalid:focus { outline-color: #9f1239; border-color: #9f1239; }

.contact-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px 28px 32px;
}
.contact-panel .section-head { margin-bottom: 20px; }
.contact-panel .section-head .lede { margin: 0; }
.contact-aside-title { font-size: 1.25rem; margin: 0 0 4px; }
.contact-email { margin-top: 8px; }
.contact-partners { padding-top: 18px; display: grid; gap: 10px; }
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; }
.form-status { border-radius: var(--radius-s); padding: 12px 14px; margin: 0 0 18px; }
.form-status:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-status--ok { background: #e7f6ee; border: 1px solid #1f7a45; color: #14532d; }
.form-status--ok a { color: #14532d; font-weight: 700; text-decoration: underline; }
.form-status--error { background: #fdecee; border: 1px solid #9f1239; color: #9f1239; }

@media (min-width: 901px) {
  .lang-toggle-mobile { display: none; }
  .lang-toggle-desktop { display: inline-flex; }
}
@media (max-width: 620px) {
  .contact-panel { padding: 22px 18px 26px; }
  .contact-panel .btn { width: 100%; }
}