/* Blue palette aligned with Pure Salmon Technology's brand colours. */
:root {
  --ink: #012e53;
  --paper: #ffffff;
  --muted: #475f74;
  --line: #d6e5f0;
  --blue: #0a638d;
  --sky: #90d0f7;
  --light-blue: #d0ebfb;
  --salmon: var(--sky);
}
body { background: #fff; }
.draft { background: var(--light-blue); color: var(--ink); }
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid #244e70;
  box-shadow: 0 3px 15px #012e5312;
}
header .nav { width: min(1400px, 94%); height: 92px; gap: 30px; }
header .brand { width: 243px; }
header .links, html[lang=ja] header .links {
  display: flex;
  position: static;
  flex-direction: row;
  align-items: center;
  gap: 23px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
header .links a { padding: 10px 0; white-space: nowrap; border-bottom: 2px solid transparent; }
header .links a:hover { color: var(--sky); border-bottom-color: var(--sky); }
header .links a[aria-current=page] { color: var(--sky); border-bottom: 2px solid var(--sky); }
header .lang { border-color: #5d7c97; }
header .lang button { color: #fff; }
header .lang button.active { background: var(--sky); color: var(--ink); }
header .menu { display: none; }
header a:focus-visible, header button:focus-visible { outline-color: var(--sky); }
a:focus-visible, button:focus-visible { outline-color: var(--blue); }
.hero { background: var(--ink); }
.hero:after {
  background: linear-gradient(90deg, #012e53ed, #012e536b 70%, #012e5342), linear-gradient(0deg, #012e536b, transparent 65%);
}
.hero h1 em { color: var(--sky); }
.hero .eyebrow:before { background: var(--sky); }
.hero p { color: #e3f1fc; }
.hero .button { background: var(--sky); color: var(--ink); }
.hero .button:hover { background: var(--light-blue); }
.button { background: var(--blue); color: #fff; }
.button:hover { background: var(--ink); color: #fff; }
.page-heading { background: #eff7fd; }
.page-panel, .pst-scope, .career { background: #eaf5fc; }
.breadcrumb { color: #42627d; }
.text-link { color: var(--blue); border-color: var(--blue); }
.text-link:hover { color: var(--ink); border-color: var(--ink); }
.content-label, .num, .tech-panel-wrap .eyebrow, .ras-process li:before { color: var(--blue); }
.tech-tabs button[aria-selected=true] { color: var(--blue); border-bottom-color: var(--blue); }
.tech-tabs button:hover { color: var(--blue); }
.tech { background: var(--ink); }
.tech .eyebrow, .tech-step span:first-child { color: var(--sky); }
.tech .text-link { color: #fff; border-color: var(--sky); }
.inquiry { background: var(--light-blue); }
.inquiry .button { background: var(--blue); }
footer, .home-footer { background: var(--ink); }
.footer-nav a:hover, .home-footer a:hover { color: var(--sky); }
.investor-tech { font-size: 14px; }
.investor-tech .eyebrow { color: var(--blue); font-size: 10px; margin-bottom: 15px; }
.investor-tech h2 { font-size: 42px; margin-bottom: 23px; }
.investor-tech h3 { font-size: 19px; font-weight: 500; line-height: 1.35; margin-bottom: 12px; }
.investor-tech p { color: var(--muted); line-height: 1.75; }
.investor-overview { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.investor-overview .pst-image img { height: 330px; }
.investor-overview p { margin-bottom: 14px; }
.it-metrics { margin: 30px 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--ink); color: white; padding: 26px 30px; gap: 30px; }
.it-metrics > div + div { border-left: 1px solid #456582; padding-left: 30px; }
.it-metrics strong { display: block; color: var(--sky); font-family: Georgia, 'Yu Mincho', serif; font-size: 37px; font-weight: 400; line-height: 1.2; margin-bottom: 9px; }
.it-metrics span { font-size: 11px; display: block; max-width: 245px; }
.it-japan { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.it-japan p { margin-bottom: 0; text-align: justify; }
.it-source { font-size: 10px; color: var(--muted); margin-top: 23px; line-height: 1.7; }
.it-source a { text-decoration: underline; text-underline-offset: 3px; color: var(--blue); }
.it-section-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 65px; align-items: center; margin-bottom: 28px; }
.it-section-head h2 { margin-bottom: 0; }
.it-section-head > p { margin-bottom: 0; }
.it-section-head.it-section-stack { grid-template-columns: 1fr; gap: 14px; }
.it-section-stack > p { max-width: 50%; }
/* The RAS illustration ends the left column and the HyFlow illustration the right one:
   both columns stretch, both figures sit at the bottom with the same 2:1 shape, so they line up. */
.it-process-columns > div { display: flex; flex-direction: column; }
#panel-water .it-process-columns { grid-template-columns: 1fr 1fr; }
#panel-water .it-process-columns > div:first-child { padding-right: 33px; }
.it-water-figure, .it-feeding-figure { margin: 28px 0 0; }
.it-feeding-copy { margin-top: 30px; }
.it-water-figure { margin-top: auto; padding-top: 28px; }
.it-water-figure img, .it-feeding-figure img { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; object-fit: cover; border-radius: 6px; }
.it-water-figure figcaption, .it-feeding-figure figcaption { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--muted, #5b6b78); }
/* The water-reuse figure sits on the empty top-left of the blue RAS illustration. */
.it-water-frame { position: relative; }
.it-water-frame .it-water { position: absolute; top: 0; left: 0; margin: 0; padding: 18px 22px; background: none; text-shadow: 0 1px 8px rgba(0, 40, 80, .35); }
.it-water-frame .it-water strong { display: block; color: #fff; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; margin: 0 0 4px; }
.it-water-frame .it-water span { display: block; color: rgba(255, 255, 255, .9); font-size: 12px; letter-spacing: .02em; }
.it-reference-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.it-reference { border: 1px solid var(--line); }
.it-reference > img { width: 100%; height: 155px; }
.it-reference-copy { padding: 22px; }
.it-date { color: var(--blue); font-size: 9px; letter-spacing: .07em; display: block; margin-bottom: 13px; }
.it-reference h3 { font-family: Georgia, 'Yu Mincho', serif; font-size: 26px; margin-bottom: 12px; }
.it-ref-number { display: block; font-size: 14px; margin-bottom: 14px; color: var(--blue); }
.it-reference p { font-size: 12px; }
.it-reference .text-link { font-size: 11px; margin-top: 3px; }
.it-context { background: #eff7fd; padding: 16px 20px; font-size: 11px; margin: 24px 0 0; }
.it-process-columns { display: grid; grid-template-columns: 1.1fr 1fr; gap: 45px; }
.investor-tech .ras-process { margin-top: 5px; gap: 22px 28px; }
.it-water { margin: 25px 0 12px; padding: 18px 20px; background: #eff7fd; font-size: 11px; }
.it-water strong { display: inline-block; font-size: 19px; font-weight: 500; color: var(--blue); margin-bottom: 5px; }
.it-efficiency { border-left: 1px solid var(--line); padding-left: 32px; }
.it-efficiency p { font-size: 12px; }
.it-small { font-size: 10px !important; }
.it-control-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.it-control-grid > article { padding: 25px; background: #eff7fd; }
.it-control-grid h3 { font-size: 25px; margin: 18px 0; }
.it-control-grid .it-chip { text-transform: uppercase; }
/* NJORD's logo exists only in white, so it sits on a navy tile beside the card title. */
.it-card-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0; }
.it-card-title h3 { margin: 0; }
.it-njord-logo { flex: none; display: flex; align-items: center; padding: 9px 14px; background: #012e53; border-radius: 4px; }
.it-njord-logo img { display: block; width: 96px; height: auto; }
.it-control-grid p, .it-control-grid .pst-points { font-size: 12px; }
.it-control-grid .text-link { font-size: 11px; margin-top: 6px; }
.it-chip { color: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.it-support-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.it-support-grid article { padding: 24px 22px 0 0; }
.it-support-grid article + article { border-left: 1px solid var(--line); padding-left: 22px; }
.it-support-grid article > span { color: var(--blue); font-size: 11px; }
.it-support-grid h3 { margin: 17px 0 13px; font-size: 19px; }
.it-support-grid p { font-size: 12px; }
.it-support-summary { background: var(--ink); color: white; padding: 22px 28px; margin-top: 22px; }
.it-support-summary p { color: #d0ebfb; margin-bottom: 0; font-size: 13px; }
/* One PST picture closes each card; cards stretch so the pictures line up across a row. */
.it-control-grid > article, .it-support-grid > article { display: flex; flex-direction: column; }
.it-card-figure { margin: auto 0 0; padding-top: 22px; }
.it-card-figure img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 6px; }
.it-card-figure figcaption { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--muted, #5b6b78); }
/* Fixed heights (not aspect ratios) because the cards in a row differ slightly in inner width. */
.it-control-2 .it-card-figure img, .it-support-2 .it-card-figure img { aspect-ratio: auto; height: clamp(220px, 23vw, 330px); object-position: center 35%; }
.it-support-3 .it-card-figure img { aspect-ratio: auto; height: clamp(180px, 18vw, 260px); }
.it-support-summary .it-card-figure figcaption { color: #d0ebfb; }
.it-support-3 { grid-template-columns: repeat(3, 1fr); }
.it-support-grid article { padding-bottom: 6px; }
html[lang=ja] .investor-tech h2 { font-size: 35px; line-height: 1.35; }
@media (max-width: 900px) {
  .investor-tech .tech-tabs { flex-wrap: wrap; gap: 0 23px; }
  .investor-tech .tech-tabs button { width: auto; }
  .investor-overview, .it-section-head { gap: 30px; }
  .it-reference-grid, .it-control-grid { gap: 16px; }
  .it-reference-copy, .it-control-grid > article { padding: 18px; }
  .it-support-grid { grid-template-columns: repeat(2, 1fr); }
  .it-support-grid article:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .investor-overview, .it-section-head, .it-japan, .it-process-columns { grid-template-columns: 1fr; gap: 24px; }
  .it-section-stack > p { max-width: none; }
  .investor-tech h2 { font-size: 33px; }
  .investor-overview .pst-image img { height: 230px; }
  .it-metrics { gap: 14px; padding: 22px 16px; }
  .it-metrics > div + div { padding-left: 14px; }
  .it-metrics strong { font-size: 27px; }
  .it-metrics span { font-size: 9px; }
  .it-reference-grid, .it-control-grid { grid-template-columns: 1fr; }
  .it-reference > img { height: 210px; }
  .it-efficiency { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 25px; }
  #panel-water .it-process-columns { grid-template-columns: 1fr; }
  #panel-water .it-process-columns > div:first-child { padding-right: 0; }
  .it-support-grid { gap: 10px; }
  html[lang=ja] .investor-tech h2 { font-size: 29px; }
}
.team-content { padding: 26px 0 50px; }
.team-group-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; padding: 10px 0 25px; }
.team-group-photo { min-height: 320px; background: linear-gradient(145deg, #eaf5fc, #d0ebfb); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.group-photo-label { font-size: 12px; color: #42627d; }
.team-group-copy h2 { font-size: 42px; margin-bottom: 22px; }
.team-group-copy .eyebrow { font-size: 10px; color: var(--blue); margin-bottom: 14px; }
.team-group-copy p { font-size: 14px; color: var(--muted); }
.team-focus { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 18px; }
.team-focus strong { color: var(--blue); font-size: 12px; }
.team-focus p { font-size: 12px; margin-top: 8px; }
.team-profile-note { font-size: 10px !important; margin-top: 23px; }
.role-section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin: 30px 0; }
.role-section-heading .eyebrow { color: var(--blue); font-size: 10px; margin-bottom: 12px; }
.role-section-heading h2 { font-size: 40px; margin-bottom: 0; }
.role-section-heading > p { font-size: 14px; color: var(--muted); margin: 0; }
.role-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.role-card { border: 1px solid var(--line); background: #fff; }
.role-portrait { height: 150px; display: flex; justify-content: center; align-items: center; background: #eaf5fc; }
.role-portrait span { font-family: Georgia, serif; font-size: 45px; color: #659abb; letter-spacing: -.025em; }
.role-card-copy { padding: 20px; }
.role-card h3 { font-size: 17px; line-height: 1.4; font-weight: 500; margin-bottom: 12px; }
.role-card p { font-size: 12px; margin-bottom: 8px; color: var(--blue); }
.role-card-copy > span { font-size: 10px; color: var(--muted); }
@media (max-width: 760px) {
  .role-section-heading { grid-template-columns: 1fr; gap: 20px; }
  .role-roster { grid-template-columns: repeat(2, 1fr); }
  .role-portrait { height: 125px; }
}
@media (max-width: 480px) {
  .role-roster { grid-template-columns: 1fr; }
}
.partners-content { padding: 26px 0 45px; }
.partners-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; margin: 26px 0; align-items: center; }
.partners-intro .eyebrow { grid-column: 1 / -1; }
.partners-intro .eyebrow { color: var(--blue); font-size: 10px; margin-bottom: 14px; }
.partners-intro h2 { font-size: 43px; margin-bottom: 18px; }
.partners-intro p { font-size: 14px; color: var(--muted); max-width: 600px; }
html[lang=ja] .partners-intro h2 { font-size: 36px; }
.partners .page-heading { padding: 30px 0 15px; }
.partners .breadcrumb { margin-bottom: 15px; }
.partners .page-heading h1 { font-size: 52px; }
html[lang=ja] .partners .page-heading h1 { font-size: 43px; }
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.partner-grid-four { grid-template-columns: repeat(4, 1fr); }
.partner-card { padding: 26px; border: 1px solid var(--line); border-top: 3px solid var(--blue); display: flex; flex-direction: column; }
.partner-discipline { font-size: 9px; font-weight: 700; letter-spacing: .13em; color: var(--blue); }
.partner-name { min-height: 118px; padding: 25px 0 18px; display: flex; flex-direction: column; justify-content: center; }
.partner-name h3 { font-family: Arial, 'Yu Gothic', sans-serif; font-size: 28px; font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.035em; }
.partner-name > span { font-size: 10px; color: var(--muted); margin-top: 9px; }
.partner-card p { font-size: 12px; color: var(--muted); flex: 1; margin-bottom: 20px; }
.partner-card .text-link { font-size: 11px; align-self: flex-start; margin-top: 0; }
.partner-related { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 30px; align-items: center; }
/* Compact page headings on every page (#main outranks the older per-page heading sizes). */
#main > .page-heading { padding: 24px 0 18px; }
#main > .page-heading .breadcrumb { margin-bottom: 12px; }
#main > .page-heading h1 { font-size: clamp(34px, 3.4vw, 48px); margin-bottom: 8px; }
html[lang=ja] #main > .page-heading h1 { font-size: clamp(30px, 2.8vw, 40px); }
#main > .page-heading p { font-size: 15px; margin-bottom: 0; }
@media (max-width: 760px) {
  #main > .page-heading { padding: 20px 0 16px; }
  #main > .page-heading h1, html[lang=ja] #main > .page-heading h1 { font-size: 30px; }
  #main > .page-heading p { font-size: 14px; }
}
/* Key figures open the Overview, directly under the section navigation. */
/* Overview key figures: set in the photo's black-and-white top-left corner when the photo is wide enough
   (one column from 761px, beside the timeline from 1200px), a row under it otherwise. */
.photo-frame { position: relative; }
.photo-frame .facts { margin-top: 26px; border-top: 0; padding-top: 0; }
@media (min-width: 761px) and (max-width: 1000px), (min-width: 1200px) {
  /* Figures spread down the left edge: capacity at the top, site area mid-height, building area at the bottom. */
  .photo-frame .facts { position: absolute; inset: 0; margin: 0; padding: 3.2% 0 3.2% 3.2%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(8, 18, 26, .66), rgba(8, 18, 26, .4) 24%, rgba(8, 18, 26, 0) 46%); pointer-events: none; }
  .photo-frame .fact { max-width: 22%; min-width: 190px; }
  .photo-frame .fact { padding: 0; border: 0; }
  .photo-frame .fact .big { color: #fff; font-size: clamp(30px, 3.1vw, 46px); white-space: nowrap; margin-bottom: 6px; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
  .photo-frame .fact p { color: rgba(255, 255, 255, .86); font-size: 12px; line-height: 1.45; }
}
.partner-related p { color: var(--muted); font-size: 12px; margin-bottom: 0; }
.partner-related .text-link { margin-top: 0; }
header .links, html[lang=ja] header .links { gap: 18px; font-size: 12px; }
@media (max-width: 1150px) and (min-width: 901px) {
  header .nav { gap: 16px; }
  header .brand { width: 189px; }
  header .links, html[lang=ja] header .links { gap: 10px; font-size: 11px; }
}
@media (max-width: 900px) {
  .team-content .tech-tabs { flex-wrap: wrap; gap: 0 22px; }
  .team-content .tech-tabs button { width: auto; }
  .partner-grid-four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .partners-intro { grid-template-columns: 1fr; gap: 0; }
  html[lang=ja] .partners-intro h2 { font-size: 30px; }
  .partners .page-heading h1, html[lang=ja] .partners .page-heading h1 { font-size: 37px; }
  .team-group-layout { grid-template-columns: 1fr; gap: 28px; }
  .team-group-photo { min-height: 220px; }
  .team-group-copy h2, .partners-intro h2 { font-size: 33px; }
  .partner-grid { grid-template-columns: 1fr; gap: 18px; }
  .partner-name { min-height: 95px; }
  .partner-related { align-items: flex-start; flex-direction: column; gap: 15px; }
}
.team-draft { font-size: 11px; color: var(--muted); margin: -8px 0 28px; }
.team-section-intro .eyebrow { color: var(--blue); font-size: 10px; margin-bottom: 10px; }
.team-section-intro h2 { font-size: 38px; margin-bottom: 24px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.team-card { border-bottom: 2px solid var(--light-blue); }
.team-photo { height: 210px; background: #eaf5fc; position: relative; overflow: hidden; }
.portrait-shape { width: 66px; height: 66px; border-radius: 50%; background: #c2dded; position: absolute; top: 30px; left: calc(50% - 33px); }
.portrait-shape:after { content: ''; position: absolute; width: 130px; height: 100px; border-radius: 70px 70px 0 0; background: #c2dded; left: -32px; top: 80px; }
.portrait-label { position: absolute; bottom: 13px; left: 0; right: 0; text-align: center; font-size: 10px; color: #42627d; letter-spacing: .05em; }
.team-card-copy { padding: 20px 0; }
.team-card h3 { font-family: Georgia, 'Yu Mincho', serif; font-size: 25px; font-weight: 400; margin-bottom: 8px; }
.team-role { font-size: 12px; font-weight: 600; color: var(--blue); }
.team-card p { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.team-grid.board-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
.board-photo { width: 156px; height: 156px; border-radius: 50%; overflow: hidden; background: #e8eef2; }
.board-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Board: Representative Directors on the first row, Directors from the second. */
.board-grid .board-row-start { grid-column-start: 1; }
/* Many supplied portraits have white backgrounds; a fine outline keeps every circle visible. */
.board-photo { box-shadow: 0 0 0 1px #d5e0e8; }
/* Head office and Construction use the board card layout. */
.team-grid.office-grid { margin-top: 10px; }
.team-grid.ops-grid { margin-top: 10px; }
/* Production and operations: people first, then the team photo. */
#panel-operations .ops-team-photo { margin-top: 56px; max-width: 900px; }
/* Until a portrait and biography arrive: initials in a dashed circle, greyed placeholder text. */
.board-photo-placeholder { display: flex; align-items: center; justify-content: center; border: 1px dashed #9fb3c2; color: #7b8f9e; font-family: Georgia, 'Yu Mincho', serif; font-size: 34px; letter-spacing: .04em; }
.board-card p.bio-placeholder { color: #8a9ba8; font-style: italic; }
.board-initials { font-family: Georgia, serif; font-size: 65px; font-weight: 400; letter-spacing: -.04em; color: #659abb; }
.board-portrait-note { position: absolute; bottom: 15px; font-size: 9px; color: #42627d; }
.board-card h3 { font-size: 23px; line-height: 1.25; margin-bottom: 10px; }
.board-card .team-role { display: block; min-height: 22px; font-size: 12px; letter-spacing: .02em; }
/* Company line: readable, in ink, between the role and the biography. */
.board-affiliation { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ink); letter-spacing: .01em; }
.board-card p { font-size: 12px; line-height: 1.8; margin-top: 17px; }
.board-source { display: inline-block; font-size: 10px; margin-top: 17px; color: var(--blue); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.progress-content { padding: 30px 0 55px; }
.progress-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 28px; }
.progress-intro .eyebrow { color: var(--blue); font-size: 10px; margin-bottom: 13px; }
.progress-intro h2 { font-size: 43px; margin-bottom: 0; }
.progress-intro p { color: var(--muted); font-size: 14px; max-width: 480px; margin-bottom: 0; }
.progress .page-heading { padding: 30px 0 15px; }
.progress .breadcrumb { margin-bottom: 15px; }
.progress .page-heading h1 { font-size: 52px; }
.progress-filters { display: flex; gap: 9px; flex-wrap: wrap; padding: 20px 0; margin-bottom: 15px; border-top: 1px solid var(--line); }
.progress-filter { border: 1px solid var(--line); padding: 10px 16px; color: var(--ink); background: #fff; font-size: 12px; display: inline-flex; gap: 12px; align-items: center; }
.progress-filter[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.progress-filter:hover { border-color: var(--blue); }
.filter-count { font-size: 10px; opacity: .65; }
.progress-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
.media-card { min-width: 0; }
.media-card.media-featured { grid-column: span 2; }
.media-open { padding: 0; border: 0; position: relative; background: #eaf5fc; display: block; width: 100%; overflow: hidden; }
.media-open img { width: 100%; height: 250px; object-fit: cover; transition: transform .25s; }
.media-featured .media-open img { height: 360px; }
.progress-gallery[data-filter=all] .media-card:nth-child(2) .media-open img { height: 360px; }
.media-open:hover img { transform: scale(1.025); }
.media-open-label { position: absolute; right: 13px; bottom: 13px; background: var(--ink); color: white; padding: 6px 12px; font-size: 10px; }
.media-meta { display: flex; justify-content: space-between; gap: 14px; color: var(--blue); font-size: 10px; margin-top: 17px; }
.media-meta > span:first-child { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.media-card h3 { font-family: Georgia, 'Yu Mincho', serif; font-size: 23px; font-weight: 400; line-height: 1.35; margin: 11px 0; }
.media-caption { font-size: 12px; line-height: 1.7; color: var(--muted); margin-bottom: 0; }
.progress-small { font-size: 10px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 22px; margin-top: 36px; }
.progress-empty { text-align: center; padding: 70px 25px; background: #eff7fd; }
.progress-empty h3 { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: 28px; }
.progress-empty p { font-size: 14px; color: var(--muted); margin-bottom: 0; }
#media-viewer { width: min(1400px, 94vw); max-width: 94vw; max-height: 94svh; border: 0; padding: 0; background: #fff; color: var(--ink); }
#media-viewer::backdrop { background: #001a30e8; }
.viewer-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--ink); color: white; font-size: 12px; }
.viewer-toolbar button { border: 1px solid #64829a; padding: 7px 15px; background: transparent; color: white; font-size: 12px; }
#viewer-media { background: #001c33; }
#viewer-media img, #viewer-media video { width: 100%; max-height: 65svh; object-fit: contain; display: block; }
.viewer-details { padding: 20px 24px; display: flex; gap: 30px; justify-content: space-between; align-items: start; }
.viewer-details h2, html[lang=ja] .viewer-details h2 { font-size: 26px; line-height: 1.3; margin-bottom: 10px; }
.viewer-details p { font-size: 12px; color: var(--muted); margin-bottom: 7px; }
#viewer-date { font-size: 10px; color: var(--blue); }
.viewer-navigation { display: flex; gap: 8px; flex-shrink: 0; }
.viewer-navigation button { background: #eff7fd; color: var(--ink); border: 1px solid var(--line); padding: 9px 14px; font-size: 12px; }
.viewer-navigation button:disabled { opacity: .4; cursor: default; }
.video-preview-mark { display: flex; min-height: 250px; align-items: center; justify-content: center; font-size: 50px; color: var(--blue); }
html[lang=ja] .progress-intro h2 { font-size: 36px; }
html[lang=ja] .progress .page-heading h1 { font-size: 43px; }
.home .hero > img { object-position: center 55%; opacity: .9; }
header .nav { width: min(1480px, 96%); gap: 22px; }
header .brand { width: 216px; }
header .links, html[lang=ja] header .links { gap: 14px; font-size: 12px; }
@media (max-width: 1200px) and (min-width: 901px) {
  header .nav { height: auto; display: grid; grid-template-columns: 1fr auto; gap: 0; width: 94%; }
  header .brand { padding: 12px 0; width: 196px; }
  header .lang { grid-column: 2; grid-row: 1; }
  header .links, html[lang=ja] header .links { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; margin: 0; border-top: 1px solid #355b7b; padding-bottom: 5px; gap: 12px; }
}
@media (max-width: 900px) {
  header .nav { width: 92%; }
  header .links, header .links.open, html[lang=ja] header .links { gap: 0 16px; font-size: 11px; }
  .progress-gallery { grid-template-columns: repeat(2, 1fr); }
  .media-card.media-featured { grid-column: span 2; }
  .media-card:nth-child(2) .media-open img { height: 250px; }
}
@media (max-width: 600px) {
  .progress-intro { grid-template-columns: 1fr; gap: 20px; }
  .progress-intro h2, html[lang=ja] .progress-intro h2 { font-size: 32px; }
  .progress .page-heading h1, html[lang=ja] .progress .page-heading h1 { font-size: 36px; }
  .progress-gallery { grid-template-columns: 1fr; gap: 28px; }
  .media-card.media-featured { grid-column: auto; }
  .media-open img, .media-featured .media-open img, .media-card:nth-child(2) .media-open img { height: auto; aspect-ratio: 16 / 9; }
  .progress-filter { padding: 8px 12px; font-size: 11px; }
  .viewer-details { flex-direction: column; gap: 16px; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .media-open img { transition: none; } }
@media (max-width: 1000px) {
  .team-grid.board-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .board-photo { width: 132px; height: 132px; }
}
@media (max-width: 480px) {
  .team-grid.board-grid { grid-template-columns: 1fr; }
}
.team .page-heading { padding: 30px 0 15px; }
.team .breadcrumb { margin-bottom: 15px; }
.team .page-heading h1 { font-size: 52px; }
@media (max-width: 1150px) and (min-width: 901px) {
  header .links, html[lang=ja] header .links { gap: 12px; font-size: 11px; }
}
@media (max-width: 760px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .team-photo { height: 190px; }
  .team .page-heading h1 { font-size: 38px; }
  .team-section-intro h2 { font-size: 30px; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1150px) and (min-width: 901px) {
  header .nav { gap: 20px; }
  header .brand { width: 209px; }
  header .links, html[lang=ja] header .links { gap: 15px; font-size: 12px; }
}
/* Keep the page links visible on smaller screens in a horizontal second row. */
@media (max-width: 900px) {
  html { scroll-padding-top: 155px; }
  header .nav { height: auto; display: grid; grid-template-columns: 1fr auto; gap: 0; width: 92%; }
  header .brand { width: 209px; padding: 14px 0; }
  header .lang { grid-column: 2; grid-row: 1; margin-left: 0; }
  header .links, header .links.open, html[lang=ja] header .links {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 16px;
    width: 100%;
    margin: 0;
    padding: 0 0 8px;
    border-top: 1px solid #355b7b;
    border-bottom: 0;
    font-size: 12px;
  }
  header .links a { padding: 10px 0 7px; }
}
@media (max-width: 560px) {
  html { scroll-padding-top: 175px; }
  header .brand { width: 189px; padding: 12px 0; }
  header .links, header .links.open, html[lang=ja] header .links {
    justify-content: flex-start;
    gap: 0 18px;
    font-size: 11px;
  }
  header .links a { padding: 8px 0 5px; }
  .hero { min-height: 570px; }
}

/* Brief, optional photographic introduction on the homepage. */
.site-intro[hidden]{display:none}
html.intro-open{overflow:hidden}
.site-intro{position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;overflow:hidden;z-index:10000;background:#062d48;color:white;opacity:1;transition:opacity 1s ease;isolation:isolate}
.site-intro.is-leaving{opacity:0;pointer-events:none}
.intro-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:57% center;z-index:-2}
.intro-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,27,47,.7),rgba(0,27,47,.12) 65%),linear-gradient(0deg,rgba(0,24,43,.65),transparent 45%);z-index:-1}
.intro-top{position:absolute;top:5vh;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center}
.intro-top img{width:190px;height:auto}
.intro-skip{color:#fff;background:rgba(3,33,53,.35);border:1px solid #ffffff80;border-radius:30px;padding:12px 21px;cursor:pointer;font:inherit;font-size:12px}
.intro-skip:focus-visible{outline:3px solid #9bdbff;outline-offset:5px}
.site-intro .intro-copy{position:absolute;left:6%;bottom:18%;max-width:620px}
.site-intro .intro-copy .eyebrow{color:#bce4fc;font-size:11px;letter-spacing:.22em}
.site-intro .intro-copy h2{font-size:clamp(52px,6.7vw,98px);line-height:1.04;font-weight:400;color:white;margin:25px 0 20px}
.site-intro .intro-copy p{font-size:16px;letter-spacing:.02em;color:#e5f0f6}
.intro-bottom{position:absolute;bottom:6%;left:6%;right:6%;display:flex;align-items:center;gap:24px;font-size:10px;letter-spacing:.13em}
.intro-line{height:1px;flex:1;background:#ffffff60}
.intro-replay{background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
@media(max-width:600px){.intro-top{top:30px}.intro-top img{width:150px}.site-intro .intro-copy{bottom:23%;right:6%}.site-intro .intro-copy h2{font-size:58px}.site-intro .intro-copy p{font-size:14px}.intro-bottom{bottom:40px;gap:15px;font-size:8px}.intro-bottom span:last-child{max-width:120px}.intro-image{object-position:58% center}.home-footer .wrap{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.site-intro{transition:none}}

/* Photographic facility guide; coordinates stay relative to the complete image. */
.facility-explorer{padding:30px 0 45px}
.facility-toolbar{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:20px}
.facility-toolbar .eyebrow{margin:0;color:var(--blue);font-size:10px}
.facility-toolbar p{margin:0;font-size:12px;color:var(--muted)}
.facility-layout{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(280px,1fr);gap:25px;align-items:start}
.facility-map{position:relative;aspect-ratio:16/9;background:#dae8f2;overflow:hidden;border-radius:2px}
.facility-map>img{width:100%;height:100%;object-fit:contain}
.facility-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#063753;color:white;border:2px solid white;box-shadow:0 0 0 5px #032a4330,0 3px 14px #001c3760;display:grid;place-items:center;padding:0;font-size:12px;font-weight:700;cursor:pointer;z-index:2}
.facility-pin.is-selected{background:#9bd9ff;color:#07304b;box-shadow:0 0 0 7px #9bd9ff70,0 3px 14px #001c3760}
.facility-pin:hover{background:#207ca7}
.facility-pin:focus-visible{outline:3px solid #9bd9ff;outline-offset:6px}
.pin-label{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#062f4d;color:white;padding:5px 10px;white-space:nowrap;font-size:10px;opacity:0;pointer-events:none;border-radius:2px}
.facility-pin:hover .pin-label,.facility-pin:focus-visible .pin-label{opacity:1}
.facility-map-stamp{position:absolute;bottom:12px;left:14px;background:#062f4ddc;color:white;padding:5px 9px;letter-spacing:.12em;font-size:8px}
.facility-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.facility-choice{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;padding:10px 12px;border:1px solid #cee0ec;background:white;color:#17445c;cursor:pointer}
.facility-choice>span:first-child{font-size:10px;color:#5c7b90}
.facility-choice.is-selected{background:#073753;border-color:#073753;color:white}
.facility-choice.is-selected>span:first-child{color:#a5ddfb}
.facility-date{font-size:10px;color:#47677d;margin:15px 0 8px}
.facility-map-note{font-size:11px;color:var(--muted);max-width:650px;margin-bottom:0}
.facility-detail[hidden]{display:none}
.facility-detail{background:#edf5fb;border:1px solid #dae7f1}
.facility-detail>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.facility-detail-copy{padding:25px}
.facility-detail-copy .eyebrow{font-size:9px;color:#236483;margin-bottom:12px}
.facility-detail-copy h2{font-size:30px;line-height:1.12;margin-bottom:16px}
.facility-detail-copy p{font-size:12px;line-height:1.8;color:#405c70;margin-bottom:15px}
.facility-detail-copy p.facility-context{font-size:11px;color:#61798b;border-top:1px solid #d5e3ed;padding-top:15px}
.facility-detail-copy .text-link{font-size:11px}
.project-map-callout{margin-top:30px;padding:26px 30px;background:#e9f4fc;display:flex;align-items:center;justify-content:space-between;gap:25px;border-left:3px solid #3a93ba}
.project-map-callout .eyebrow{font-size:9px;margin-bottom:8px;color:#236483}
.project-map-callout p{margin:0;font-size:14px}
.project-map-callout a{white-space:nowrap;font-size:13px}
.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}
@media(max-width:1000px){.facility-layout{grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr)}.facility-pin{width:36px;height:36px}.facility-detail-copy{padding:20px}.facility-detail-copy h2{font-size:27px}}
@media(max-width:760px){.facility-layout{grid-template-columns:1fr}.facility-toolbar{display:block}.facility-toolbar p{margin-top:8px}.facility-detail{display:grid;grid-template-columns:1fr 1.2fr}.facility-detail>img{height:100%;min-height:220px}.facility-pin{width:34px;height:34px;font-size:10px}.project-map-callout{display:block}.project-map-callout a{display:inline-block;margin-top:15px}}
@media(max-width:500px){.facility-detail{display:block}.facility-detail>img{min-height:0;height:auto}.facility-choices{gap:6px}.facility-choice{padding:9px;font-size:10px}.facility-pin{width:30px;height:30px}.facility-map-stamp{font-size:7px;bottom:7px;left:8px}.pin-label{display:none}.facility-toolbar p{font-size:11px}}

/* Seven primary sections, with project pages grouped in a disclosure. */
.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}
header .nav-project{position:relative;align-self:stretch;display:flex;align-items:center}
header .nav-project-heading{display:flex;align-items:center;gap:3px}
header .project-toggle{display:flex;align-items:center;justify-content:center;width:32px;min-height:44px;border:0;background:transparent;color:inherit;padding:0}
header .project-toggle svg{transition:transform .15s}
header .project-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
header .is-project-active>.nav-project-heading>a{color:var(--sky);border-bottom-color:var(--sky)}
header .project-submenu{position:absolute;top:100%;left:-18px;min-width:190px;padding:10px 18px 14px;display:flex;flex-direction:column;gap:0;background:var(--ink);border:1px solid #355b7b;box-shadow:0 14px 24px #012e5329;z-index:60}
header .project-submenu[hidden]{display:none}
header .project-submenu a{display:block;padding:10px 0;font-size:13px}
.project-section-nav{display:flex;flex-wrap:wrap;gap:10px 32px;padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.project-section-nav a{padding:5px 0;border-bottom:2px solid transparent}
.project-section-nav a:hover,.project-section-nav a[aria-current=page]{color:var(--blue);border-bottom-color:var(--blue)}
@media(max-width:900px){
 html{scroll-padding-top:100px}
 header .nav{position:relative;display:flex;height:76px;gap:18px}
 header .brand{width:196px;padding:0}
 header .lang{margin-left:auto}
 header .menu{display:block;color:white;min-height:44px;padding:8px 0;font-size:11px}
 /* Apply the panel layout to the open state too, overriding earlier horizontal-menu rules in both languages. */
 header .links,header .links.open,html[lang=ja] header .links,html[lang=ja] header .links.open{display:none;position:absolute;top:100%;left:-4.35%;right:-4.35%;width:auto;margin:0;padding:14px 6% 22px;border-top:1px solid #355b7b;background:var(--ink);max-height:calc(100dvh - 110px);overflow-y:auto}
 header .links.open,html[lang=ja] header .links.open{display:flex;flex-direction:column;align-items:stretch;gap:0;font-size:14px}
 header .links>a{display:block;padding:12px 0}
 header .nav-project{display:block;align-self:stretch}
 header .nav-project-heading{justify-content:space-between}
 header .nav-project-heading>a{flex:1;padding:12px 0}
 header .project-toggle{width:44px}
 header .project-submenu{position:static;border:0;border-left:1px solid #5d7c97;margin:0 0 8px 5px;padding:0 0 0 18px;box-shadow:none;min-width:0}
 header .project-submenu a{font-size:13px;padding:10px 0}
 .project-section-nav{gap:10px 24px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){header .project-toggle svg{transition:none}}

/* Strategic location and regional market connections. */
.location-content{padding:35px 0 45px}
.location-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-bottom:30px}
.location-intro .eyebrow{font-size:10px;color:#216c91;margin-bottom:15px}.location-intro h2{font-size:43px;line-height:1.12;margin:0}
.location-intro>p{font-size:14px;color:#4c6577;line-height:1.9;margin:0}
.market-map{position:relative;aspect-ratio:1000/480;border:1px solid #d0e3f1;background:#edf6fc;overflow:hidden}
.market-connections{display:block;width:100%;height:100%}.market-connections [data-city-line].is-selected{stroke:#197ca9;stroke-width:3;stroke-dasharray:none}
.market-map-top,.market-map-bottom{position:absolute;left:25px;right:25px;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#47738e;letter-spacing:.1em}
.market-map-top{top:22px}.market-map-bottom{bottom:20px;letter-spacing:0;font-size:10px}
.market-city,.market-home{position:absolute;left:var(--mx);top:var(--my);transform:translate(-50%,-10px);text-align:center;padding:0;border:0;background:none;color:#124b6a;display:flex;align-items:center;flex-direction:column;font:inherit}
.market-city{cursor:pointer;min-width:90px}.market-city strong{font-size:22px;line-height:1.3;margin-top:12px}.market-city>span:last-child{font-size:9px;letter-spacing:.12em;margin-top:4px;color:#50778d}
.market-city-dot{display:block;width:18px;height:18px;border:4px solid white;background:#34799e;border-radius:50%;box-shadow:0 0 0 1px #8bb7d1}
.market-city[aria-pressed=true] .market-city-dot{background:#0b4b70;box-shadow:0 0 0 7px #70c5f35e}
.market-home{color:#063452;transform:translate(-50%,-13px)}.market-home-dot{width:26px;height:26px;display:block;background:#0a5178;border:5px solid #9cdbff;border-radius:50%;box-shadow:0 0 0 1px #0c5278}
.market-home strong{font-size:28px;line-height:1.2;margin-top:14px}.market-home>span:last-child{font-size:8px;letter-spacing:.14em;margin-top:6px;color:#315d77}
.market-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.market-cards article{padding:24px;border:1px solid #d4e4ef;border-top:3px solid #c1daea;background:white;transition:background .2s,border-color .2s}
.market-cards article.is-selected{border-color:#347da3;background:#eef7fd}.market-cards .eyebrow{font-size:9px;color:#4481a2;margin-bottom:12px}.market-cards h3{font-family:Arial,sans-serif;font-size:24px;margin-bottom:14px}.market-cards p{font-size:12px;line-height:1.8;margin:0;color:#506879}
.location-rationale{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;border-top:1px solid #d8e5ee;margin-top:35px;padding-top:30px}.location-rationale .eyebrow{font-size:9px;color:#2a759b;margin-bottom:12px}.location-rationale h2{font-size:34px;line-height:1.12;margin:0}.location-rationale h3{font-family:Arial,sans-serif;font-size:15px;margin-bottom:12px}.location-rationale p{font-size:12px;line-height:1.8;color:#526b7d;margin:0}
.location-sources{font-size:10px;color:#6c8291;margin-top:25px}.location-sources a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.location-intro{grid-template-columns:1fr;gap:20px}.location-intro h2{font-size:36px}.market-map{aspect-ratio:1000/620}.market-connections{height:auto;position:absolute;top:10%;left:0}.market-city[data-city=osaka]{top:59.2%!important}.market-city[data-city=nagoya]{top:41.45%!important}.market-city[data-city=tokyo]{top:27.75%!important}.market-home{top:62.42%!important}.market-map-top{font-size:7px;left:15px;right:15px;top:16px}.market-map-top span:last-child{display:none}.market-map-bottom{bottom:12px;left:15px;right:15px;font-size:8px}.market-city strong{font-size:17px;margin-top:9px}.market-city>span:last-child{font-size:7px}.market-home strong{font-size:21px}.market-home>span:last-child{font-size:6px}.market-cards{grid-template-columns:1fr;gap:12px}.market-cards article{padding:20px}.location-rationale{grid-template-columns:1fr;gap:22px}}
@media(prefers-reduced-motion:reduce){.market-cards article{transition:none}}
/* Geographical location explorer; all map geometry is bundled locally. */
.geo-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);border:1px solid var(--line);background:#eef6fa}
.geo-map{position:relative;min-width:0;align-self:center;aspect-ratio:1000/650;overflow:hidden}
.geo-coast{display:block;width:100%;height:100%}
.geo-connection{fill:none;stroke:#83acbc;stroke-width:2;stroke-dasharray:5 7;opacity:.45}
.geo-connection.is-selected{stroke:#097ca8;stroke-width:4;stroke-dasharray:10 7;opacity:1;animation:route-flow 18s linear infinite}
@keyframes route-flow{to{stroke-dashoffset:-170}}
.geo-map-top{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;gap:15px;font-size:9px;font-weight:700;letter-spacing:.1em;color:#47738e;z-index:1}
.geo-city,.geo-tsu{position:absolute;left:var(--gx);top:var(--gy);transform:translate(-50%,-8px);display:flex;align-items:center;flex-direction:column;background:none;border:0;color:#124b6a;padding:0;z-index:2;font:inherit}
.geo-city{min-width:65px;min-height:52px}
.geo-city strong{font-size:16px;line-height:1.2;margin-top:8px;background:#eef6fae6;padding:2px 5px;border-radius:3px}
.geo-dot{width:16px;height:16px;border:3px solid white;background:#387794;border-radius:50%;box-shadow:0 0 0 1px #6e9eb5}
.geo-city[aria-pressed=true] .geo-dot{background:#087dab;box-shadow:0 0 0 6px #68b4d53d}
.geo-city[aria-pressed=true] strong{color:#006b93}
.geo-tsu{transform:translate(-50%,-10px);pointer-events:none}
.geo-hub{width:20px;height:20px;border:4px solid #b8e2f9;background:#073d5a;border-radius:50%;box-shadow:0 0 0 5px #0a638d20}
.geo-tsu>span:nth-child(2){font-size:18px;font-weight:700;line-height:1.2;margin-top:12px;background:#eef6faeb;padding:2px 5px}
.geo-tsu small{font-size:8px;color:#476a7c;background:#eef6faeb;padding:1px 4px}
.geo-inset{position:absolute;left:18px;bottom:25px;width:95px;height:90px;background:#ffffffbd;border:1px solid #d0e0e7}
.geo-map-note{position:absolute;right:18px;left:130px;bottom:12px;text-align:right;font-size:9px;color:#607d8c;margin:0}
.geo-details{background:white;padding:28px;border-left:1px solid var(--line);min-width:0}
.geo-selectors{display:flex;gap:6px;padding-bottom:26px}
.geo-selector{flex:1;font-size:12px;padding:10px 5px;background:white;border:1px solid #c7dce9;color:#25566e}
.geo-selector[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}
.geo-detail[hidden]{display:none}
.geo-detail .eyebrow{font-size:10px;color:#227e9f;margin-bottom:12px}
.geo-detail h2{font-size:32px;line-height:1.15;margin-bottom:20px}
.geo-detail>p{font-size:13px;color:var(--muted);line-height:1.8}
.geo-metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid var(--line);padding-top:20px;margin:25px 0}
.geo-metrics dt{font-size:10px;color:#637c8a;margin-bottom:8px}
.geo-metrics dd{font-size:29px;line-height:1.2;margin:0;color:var(--ink)}
.geo-metrics dd small{font-size:13px;margin-left:5px}
.geo-detail .text-link{font-size:12px}
.geo-estimate{font-size:10px;color:#6a7d88;line-height:1.7;margin:22px 0 0}
.geo-facility{display:flex;justify-content:space-between;align-items:center;gap:25px;background:#f1f7fb;padding:25px 30px;border:1px solid var(--line);border-top:0}
.geo-facility .eyebrow{font-size:10px;margin-bottom:8px}.geo-facility p{font-size:14px;margin:0}.geo-facility .button{font-size:12px;padding:12px 20px;min-height:44px}
.geo-comparison{margin-top:40px}.geo-comparison h2{font-size:29px;margin-bottom:22px}
.geo-comparison table{border-collapse:collapse;width:100%;text-align:left;font-size:14px}
.geo-comparison thead th{font-size:10px;letter-spacing:.07em;color:#5d7b8c;padding:12px 15px;background:#f0f6fa}
.geo-comparison td,.geo-comparison tbody th{border-bottom:1px solid var(--line);padding:10px 15px;font-weight:400}
.geo-table-city{border:0;background:none;text-align:left;padding:6px 0;color:var(--ink);font-size:14px}.geo-table-city small{display:block;font-size:9px;color:#688493;letter-spacing:.07em}.geo-table-city[aria-pressed=true]{color:#087dab;font-weight:700}
@media(max-width:1000px){.geo-layout{grid-template-columns:1fr}.geo-map{width:100%}.geo-details{border-left:0;border-top:1px solid var(--line)}.geo-detail h2{font-size:30px}.geo-metrics{max-width:400px}.geo-inset{width:110px;height:100px}}
@media(max-width:560px){.geo-map-top{left:12px;right:12px;top:12px;font-size:7px}.geo-map-top span:last-child{display:none}.geo-city strong{font-size:12px;margin-top:5px}.geo-tsu>span:nth-child(2){font-size:13px}.geo-tsu small{font-size:6px}.geo-dot{width:12px;height:12px}.geo-city{min-width:44px;transform:translate(-50%,-6px)}.geo-hub{width:16px;height:16px}.geo-tsu{transform:translate(-50%,-8px)}.geo-inset{width:60px;height:55px;left:10px;bottom:25px}.geo-map-note{font-size:7px;left:85px;right:10px;bottom:10px}.geo-details{padding:22px}.geo-facility{padding:22px;align-items:start;flex-direction:column;gap:18px}.geo-comparison thead th{font-size:8px;padding:10px}.geo-comparison td,.geo-comparison tbody th{padding:10px;font-size:12px}.geo-selector{min-height:44px}}
@media(prefers-reduced-motion:reduce){.geo-connection.is-selected{animation:none}}

.about #strategic-location{border-top:1px solid var(--line);margin-top:30px;padding-top:40px;scroll-margin-top:115px}
/* Authentic partner identities with consistent, generous logo space. */
.partners-content .partner-card{padding:24px;border:1px solid #d7e5ef;border-top:0;border-radius:4px;background:#fff;box-shadow:0 7px 26px #123b5908;overflow:hidden}
.partners-content .partner-discipline{font-size:9px;letter-spacing:.13em;color:#42738f;margin:0 0 16px}
.partner-logo{height:150px;display:flex;align-items:center;justify-content:center;padding:24px;margin:0 0 22px;background:linear-gradient(145deg,#f5f9fc,#fff);border:1px solid #e8eff5;border-radius:3px}
.partner-logo img{display:block;max-width:100%;max-height:88px;width:auto;height:auto;object-fit:contain;filter:none}
.partner-logo-dark{background:#073753;border-color:#073753}
.partner-logo-artelia img{max-width:235px;width:100%}
.partner-logo-ocglobal img{height:103px;max-height:103px;max-width:130px}
.partner-logo-shimizu img{width:220px;max-width:100%}
.partner-logo-pst img{width:235px;max-width:100%}
.partner-logo-cflow img{width:210px;max-width:100%}
.partner-logo-linde img{width:176px;max-height:102px}
.partner-logo-baader img{width:215px;max-width:100%}
.partner-logo-smbc img{width:138px;max-height:70px;image-rendering:auto}
.partner-logo-8f img{width:126px;max-height:90px}
.partner-logo-mori-trust img{width:188px;max-width:100%}
.partner-logo-jicn{padding:10px}.partner-logo-jicn img{height:126px;max-height:126px;width:auto}
.partner-logo-toagosei img{width:250px;max-width:100%}
.partner-logo-benchmark img{width:230px;max-width:100%}
.partner-logo-skretting img{width:200px;max-width:100%}
.partners-content .partner-card p{font-size:12px;line-height:1.8}
@media(min-width:1001px){.partner-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.partners-content .partner-card{padding:20px}.partner-logo{height:142px;margin-bottom:20px}}

.project-overview-photo{margin-top:30px;margin-bottom:0}
.project-overview-photo img{display:block;width:100%;height:auto;border-radius:3px}
.project-overview-photo figcaption{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:12px;color:#627d90;font-size:11px}
.project-overview-photo figcaption a{color:#226686;font-weight:600;white-space:nowrap}
@media(max-width:600px){.project-overview-photo{margin-top:22px}.project-overview-photo>img{max-height:none}.project-overview-photo figcaption{font-size:9px;gap:12px}}

/* Sustainability copy supplied by Pure Salmon Japan. */
.sustain-opening{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-top:50px;padding-bottom:50px;align-items:start}
.sustain-opening h2{font-size:46px;line-height:1.12;margin-bottom:26px;max-width:490px}
.sustain-opening p{font-size:15px;line-height:1.9;color:var(--muted);margin:0}
.sustain-opening>div:last-child{padding-top:5px}
.sustain-pillars{padding-top:40px;padding-bottom:55px;border-top:1px solid var(--line)}
.sustain-section-head{max-width:800px;margin-bottom:35px}.sustain-section-head .eyebrow{font-size:10px;color:var(--blue);margin-bottom:16px}.sustain-section-head h2{font-size:42px;line-height:1.15;margin-bottom:24px}.sustain-section-head p{font-size:15px;line-height:1.9;color:var(--muted);margin:0}
.sustain-pillar-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 50px;border-bottom:1px solid var(--line)}
.sustain-pillar{display:grid;grid-template-columns:32px 1fr;gap:15px;padding:30px 0;border-top:1px solid var(--line)}
.sustain-number{font-size:11px;color:var(--blue);padding-top:5px;letter-spacing:.08em}
.sustain-pillar h3{font-size:23px;line-height:1.3;font-weight:400;margin:0 0 16px}
.sustain-pillar p{font-size:14px;line-height:1.85;color:var(--muted);margin:0}
.sustain-culture{background:var(--ink);color:white;padding:45px 0}
.sustain-culture>.wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;align-items:start}
.sustain-culture .eyebrow{color:var(--sky);font-size:10px;margin-bottom:18px}
.sustain-culture h2{font-size:43px;line-height:1.15;margin:0}
.sustain-culture p{font-size:14px;line-height:1.9;color:#d0e4f0;margin:0}
.sustain-progress{padding-top:50px;padding-bottom:55px}.sustain-progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.sustain-progress-grid article{border-top:1px solid var(--line);padding-top:22px}
.sustain-progress-grid h3{font-size:19px;font-weight:400;line-height:1.4;margin-bottom:16px}
.sustain-progress-grid p{font-size:14px;line-height:1.85;color:var(--muted);margin:0}
@media(max-width:900px){.sustain-opening{gap:35px}.sustain-opening h2{font-size:38px}.sustain-pillar-grid{gap:0 30px}.sustain-culture>.wrap{gap:35px}.sustain-progress-grid{gap:25px}}
@media(max-width:650px){.sustain-opening{grid-template-columns:1fr;gap:25px;padding-top:35px;padding-bottom:35px}.sustain-opening h2{font-size:36px}.sustain-opening p,.sustain-section-head p{font-size:14px}.sustain-pillars{padding-top:30px;padding-bottom:35px}.sustain-section-head h2{font-size:34px}.sustain-pillar-grid{grid-template-columns:1fr}.sustain-pillar{padding:25px 0;grid-template-columns:25px 1fr;gap:10px}.sustain-pillar h3{font-size:22px}.sustain-culture>.wrap{grid-template-columns:1fr;gap:25px}.sustain-culture h2{font-size:35px}.sustain-progress{padding-top:35px;padding-bottom:35px}.sustain-progress-grid{grid-template-columns:1fr;gap:25px}}
.partner-logo-fortress img{width:240px;max-width:100%;max-height:90px}
.partner-logo-tor img{width:230px;max-width:100%;max-height:105px}

.production-content{padding:35px 0 45px}
.production-intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:30px}
.production-intro .eyebrow{font-size:10px;color:#287297;margin-bottom:15px}
.production-intro h2{font-size:42px;line-height:1.12;margin:0}
.production-intro>p{font-size:14px;color:#526c7d;line-height:1.9;margin:0}
.production-film{border:1px solid #d8e6f0;border-radius:4px;overflow:hidden;background:#f2f7fb}
.production-film-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:24px 28px}
.production-film-heading .eyebrow{font-size:9px;color:#357b9e;margin-bottom:8px}
.production-film-heading h3{font-family:Georgia,'Yu Mincho',serif;font-size:29px;font-weight:400;line-height:1.2;margin:0}
.production-film-meta{display:flex;gap:20px;font-size:11px;color:#57778e;white-space:nowrap}
.production-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:600px;background:#031b2b;object-fit:contain}
.production-film>p{font-size:12px;color:#526c7d;margin:0;padding:18px 28px}
.production-films{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.production-films .production-film-heading{align-items:flex-start}
.production-films .production-film-heading h3{font-size:24px}
@media(max-width:900px){.production-films{grid-template-columns:1fr}}
.production-related{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid #d5e4ef;margin-top:30px;padding-top:22px;font-size:12px;color:#526c7d}
.production-related>div{display:flex;gap:25px}.production-related .text-link{margin-top:0;font-size:12px}
@media(max-width:600px){.production-intro{grid-template-columns:1fr;gap:18px}.production-intro h2{font-size:34px}.production-film-heading{padding:20px;align-items:flex-start;flex-direction:column;gap:14px}.production-film-heading h3{font-size:26px}.production-film>p{padding:16px 20px}.production-related{align-items:flex-start;flex-direction:column}}


/* Marketing refresh (Oct 2026): homepage doorways beneath the hero */
.home-paths { padding: 56px 0 64px; background: #fff; }
.home-paths h2 { font-size: 34px; margin: 0 0 30px; }
.paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.path { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.path img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 18px; background: #e8eef2; }
.path-name { font-family: Georgia, 'Yu Mincho', serif; font-size: 24px; line-height: 1.25; margin-bottom: 8px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
.path-body { font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 34ch; }
.path:hover .path-name, .path:focus-visible .path-name { text-decoration-color: currentColor; }
.path:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
html[lang=ja] .home-paths h2 { font-size: 30px; }
@media (max-width: 760px) {
  .home-paths { padding: 40px 0 48px; }
  .home-paths h2 { font-size: 28px; margin-bottom: 22px; }
  .paths-grid { grid-template-columns: 1fr; gap: 30px; }
  .path img { aspect-ratio: 16 / 9; }
}
/* Board portraits: one consistent circular, monochrome treatment */
.board-card .team-card-copy { padding-top: 22px; }
/* About: company facts read as a register, values leading */
.about .page-panel { padding: 34px 36px; }
.about .page-panel h3 { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.about .page-panel p { font-size: 17px; color: var(--ink); margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.about .page-panel .text-link { margin-top: 4px; }

/* Japanese hero: break only at intended points */
html[lang=ja] .home .hero h1 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.3; word-break: keep-all; max-width: none; }
html[lang=ja] .home .hero p { max-width: 30em; }
html[lang=ja] .home-paths h2, html[lang=ja] .path-name { word-break: keep-all; }

/* Selected metropolitan markets: quiet red geographic highlights. */
.geo-metro-area{fill:#cd6262;fill-opacity:.14;stroke:#b95353;stroke-opacity:.58;stroke-width:2;opacity:0;transition:opacity .3s ease;pointer-events:none}
.geo-metro-area.is-selected{opacity:1}
.home-purpose{display:grid;grid-template-columns:1.1fr 1fr;gap:90px;padding-top:50px;padding-bottom:50px}
.purpose-opening>.eyebrow{color:var(--blue);font-size:10px;margin-bottom:16px}.purpose-opening h2{font-size:44px;line-height:1.15;margin:0 0 20px}.purpose-opening p{font-size:15px;line-height:1.85;color:var(--muted);max-width:500px}
.purpose-statements article+article{margin-top:23px}.purpose-statements h3{font-size:14px;color:var(--ink);font-weight:600;margin-bottom:8px}.purpose-statements p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.purpose-statements .text-link{margin-top:20px}
.home .hero h1{font-size:clamp(45px,5vw,69px)}.home .hero p{max-width:580px}.site-intro .intro-copy>p{max-width:670px}
@media(max-width:760px){.home-purpose{grid-template-columns:1fr;gap:20px;padding-top:35px;padding-bottom:35px}.purpose-opening h2{font-size:36px}.home .hero h1{font-size:44px}.site-intro .intro-copy>p{font-size:14px;max-width:90%}}
.press-list{padding-top:40px;padding-bottom:25px}.press-list>h2{font-size:34px;margin-bottom:24px}
.press-item{display:grid;grid-template-columns:180px 1fr;gap:35px;border-top:1px solid var(--line);padding:32px 0}
.press-meta{font-size:12px;color:var(--muted);padding-top:5px}.press-meta time{display:block;margin-bottom:12px}.press-meta span{font-size:9px;letter-spacing:.1em;color:var(--blue)}
.press-copy h3{font-size:20px;line-height:1.4;font-weight:400;max-width:750px;margin:0 0 10px}.press-copy p{font-size:14px;color:var(--muted);line-height:1.8;max-width:750px;margin:0 0 20px}.press-copy .button{font-size:12px;padding:13px 20px}
.press-format-note{font-size:11px;color:var(--muted);margin:0}
@media(max-width:650px){.press-item{grid-template-columns:1fr;gap:10px;padding:25px 0}.press-meta{display:flex;gap:15px;align-items:center}.press-meta time{margin:0}.press-copy h3{font-size:18px}}
.technology-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:20px 32px;margin-bottom:16px}
.technology .technology-title-row h1{margin:0}
.technology-title-logo{display:flex;align-items:center;justify-content:center;flex:none;width:260px}
.technology-title-logo img{display:block;width:100%;height:auto}
.technology-title-logo:focus-visible{outline:2px solid #368cbd;outline-offset:5px}
@media(max-width:600px){.technology-title-row{gap:14px 18px}.technology-title-logo{width:180px}.technology .technology-title-row h1{font-size:32px}html[lang=ja] .technology .technology-title-row h1{font-size:30px}}
.geo-map{align-self:start}
.geo-population{margin:0 0 22px;padding:18px 20px;background:#fbf2f1;border-left:3px solid #cc8181}
.geo-population-region{display:block;font-size:12px;font-weight:600;color:#874646}
.geo-population .geo-population-number{margin:8px 0 10px;font-family:Georgia,'Yu Mincho',serif;font-size:48px;line-height:1.1;color:#8b4141}
.geo-population-number span{font-family:Arial,sans-serif;font-size:13px;white-space:nowrap}
.geo-population .geo-population-definition{font-size:11px;line-height:1.6;color:#735b5b;margin:0 0 9px}
.geo-population-year{font-size:9px;color:#846969}
.geo-population-source{font-size:10px;line-height:1.8;color:var(--muted);margin:12px 0 20px;max-width:850px}
.geo-population-source a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.geo-details .geo-selector{min-height:44px}
@media(max-width:560px){.geo-population{padding:16px}.geo-population .geo-population-number{font-size:42px}.geo-population-source{font-size:10px}.geo-map-note{left:85px;font-size:8px;line-height:1.35}.geo-city{min-height:44px}}
@media(prefers-reduced-motion:reduce){.geo-metro-area{transition:none}}

/* ===== Homepage story (Oct 2026 refresh, pass 2) ===== */
.home .hero h1 { font-size: clamp(56px, 7.4vw, 112px); line-height: 1.02; max-width: 12ch; }
.home .hero p { font-size: 17px; max-width: 480px; }

.manifesto { background: var(--ink); color: #fff; padding: clamp(64px, 9vw, 128px) 0; }
.manifesto-lead { font-family: Georgia, 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: clamp(30px, 3.7vw, 54px); line-height: 1.18; letter-spacing: -.025em; max-width: 21em; margin: 0 0 40px; }
.manifesto-turn { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.7; color: var(--sky); max-width: 34em; margin: 0 0 0 auto; padding-left: 28px; border-left: 2px solid var(--sky); }
html[lang=ja] .manifesto-lead { font-size: clamp(26px, 3vw, 44px); line-height: 1.5; letter-spacing: 0; word-break: keep-all; }

.home-facts { border-bottom: 1px solid var(--line); background: #fff; }
.facts-row { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.facts-row > div { padding: 44px 28px 40px; border-left: 1px solid var(--line); }
.facts-row > div:first-child { border-left: 0; padding-left: 0; }
.facts-row dt { font-family: Georgia, 'Yu Mincho', serif; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.03em; color: var(--ink); margin-bottom: 12px; }
.facts-row dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 22ch; }

.home-how { background: #f1f7fb; padding: clamp(64px, 8vw, 110px) 0; }
.how-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.how-intro h2 { font-size: clamp(36px, 3.8vw, 54px); margin-bottom: 22px; }
.how-intro p { font-size: 16px; color: var(--muted); max-width: 30em; margin-bottom: 26px; }
html[lang=ja] .how-intro h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.35; letter-spacing: 0; word-break: keep-all; }
.how-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.how-steps li { counter-increment: step; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 20px; padding: 26px 0; border-top: 1px solid #c7dceb; }
.how-steps li:last-child { border-bottom: 1px solid #c7dceb; }
.how-steps li::before { content: counter(step); grid-row: 1 / 3; font-family: Georgia, serif; font-size: 44px; line-height: 1; color: var(--blue); }
.how-steps strong { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--ink); margin-bottom: 6px; }
.how-steps span { font-size: 15px; line-height: 1.65; color: var(--muted); }

.home-paths { padding: clamp(64px, 8vw, 110px) 0; }
.home-paths h2 { font-size: clamp(32px, 3.4vw, 46px); margin-bottom: 36px; }

.home-partners { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.hp-head { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 40px; align-items: end; margin-bottom: 36px; }
.hp-head h2 { font-size: clamp(30px, 3vw, 42px); margin: 0; max-width: 14em; }
.hp-head p { margin: 0; color: var(--muted); font-size: 15px; }
html[lang=ja] .hp-head h2 { line-height: 1.4; letter-spacing: 0; word-break: keep-all; }
.logo-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logo-wall li { background: #fff; height: 96px; display: flex; align-items: center; justify-content: center; padding: 18px 20px; }
.logo-wall img { max-height: 40px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

.home-close { padding: 0 0 clamp(64px, 8vw, 110px); }
.close-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; }
.close-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: #fff; min-height: 340px; text-decoration: none; }
.close-card img { width: 100%; height: 100%; object-fit: cover; }
.close-copy { display: flex; flex-direction: column; padding: 40px 36px; }
.close-title { font-family: Georgia, 'Yu Mincho', serif; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 16px; }
.close-body { font-size: 15px; line-height: 1.65; color: #cfe2ee; margin-bottom: 28px; }
.close-link { margin-top: auto; font-size: 13px; font-weight: 700; align-self: flex-start; border-bottom: 1px solid var(--sky); padding-bottom: 4px; color: var(--sky); }
.close-plain { grid-template-columns: 1fr; background: var(--light-blue); color: var(--ink); }
.close-plain .close-body { color: var(--muted); }
.close-plain .close-link { color: var(--blue); border-color: var(--blue); }
.close-card:hover .close-link, .close-card:focus-visible .close-link { border-bottom-width: 2px; }
html[lang=ja] .close-title { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.4; letter-spacing: 0; word-break: keep-all; }

/* ===== About & Careers (pass 2) ===== */
.about-why, .career-why { background: #f1f7fb; padding: clamp(56px, 7vw, 96px) 0; }
.about-why h2, .career-why h2, .career-fit h2, .about-group h2, .career-lead h2 { font-size: clamp(32px, 3.4vw, 48px); margin-bottom: 36px; }
html[lang=ja] .about-why h2, html[lang=ja] .career-why h2, html[lang=ja] .career-fit h2, html[lang=ja] .about-group h2, html[lang=ja] .career-lead h2 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.4; letter-spacing: 0; word-break: keep-all; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.why-grid article { border-top: 2px solid var(--blue); padding-top: 22px; }
.why-grid h3, .fit-grid h3 { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: 25px; line-height: 1.25; margin-bottom: 12px; color: var(--ink); }
.why-grid p, .fit-grid p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }
.about-group { padding: clamp(56px, 7vw, 96px) 0; }
.group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.group-grid img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.group-grid p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.group-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; }
.group-links .text-link { margin: 0; }

.career-lead-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; padding: clamp(48px, 6vw, 80px) 0; }
.career-lead img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.career-lead p { font-size: 17px; line-height: 1.75; color: var(--muted); margin-bottom: 30px; }
.career-fit { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.fit-grid article { padding: 26px 0; border-top: 1px solid var(--line); }
.career-cta { background: var(--ink); color: #fff; padding: clamp(56px, 7vw, 90px) 0; }
.career-cta h2 { font-size: clamp(32px, 3.4vw, 46px); margin-bottom: 16px; }
.career-cta p { color: #cfe2ee; max-width: 36em; }
.career-cta .button { background: var(--sky); color: var(--ink); margin: 10px 0 18px; }
.career-cta .page-note { color: #9fbdd0; }

@media (max-width: 960px) {
  .facts-row { grid-template-columns: repeat(2, 1fr); }
  .facts-row > div { padding: 30px 20px; }
  .facts-row > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .facts-row > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .how-grid, .group-grid, .career-lead-grid { grid-template-columns: 1fr; }
  .hp-head { grid-template-columns: 1fr; gap: 14px; }
  .logo-wall { grid-template-columns: repeat(4, 1fr); }
  .close-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .home .hero h1 { font-size: 52px; }
  .manifesto-turn { margin-left: 0; padding-left: 18px; }
  .facts-row dt { font-size: 32px; }
  .how-steps li { grid-template-columns: 44px 1fr; column-gap: 14px; }
  .how-steps li::before { font-size: 32px; }
  .how-steps strong { font-size: 22px; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .logo-wall li { height: 80px; }
  .close-card { grid-template-columns: 1fr; }
  .close-card img { aspect-ratio: 16 / 9; height: auto; }
  .why-grid, .fit-grid { grid-template-columns: 1fr; gap: 28px; }
  .fit-grid { gap: 0; }
}
.logo-wall .logo-invert img { filter: brightness(0) saturate(0); opacity: .85; }
.logo-wall .logo-tall img { max-height: 60px; }
.career-cta { background: var(--blue); } .career-cta p { color: #e3f2fb; } .career-cta .page-note { color: #c4e3f5; }
html[lang=ja] .facts-row dd, html[lang=ja] .path-body, html[lang=ja] .why-grid p { word-break: keep-all; overflow-wrap: anywhere; }
/* keep-all headings with no spaces must still be able to break on narrow (360px) phones */
html[lang=ja] .home .hero h1, html[lang=ja] .home-paths h2, html[lang=ja] .path-name, html[lang=ja] .manifesto-lead, html[lang=ja] .how-intro h2, html[lang=ja] .hp-head h2, html[lang=ja] .close-title, html[lang=ja] .about-why h2, html[lang=ja] .career-why h2, html[lang=ja] .career-fit h2, html[lang=ja] .about-group h2, html[lang=ja] .career-lead h2 { overflow-wrap: anywhere; }

/* Full-site aerial visit with per-area photography. */
.site-visit{padding-top:30px;padding-bottom:50px}.visit-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.visit-toolbar .eyebrow{font-size:10px;color:var(--blue);margin:0}.visit-toolbar p{font-size:12px;color:var(--muted);margin:0}
.visit-map{position:relative;background:#eaf2f6;border:1px solid var(--line);scroll-margin-top:110px}.visit-main-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}.visit-map-stamp{position:absolute;left:16px;top:15px;background:#012e53d9;color:white;padding:7px 11px;font-size:9px;letter-spacing:.12em}.visit-map-note{font-size:10px;color:var(--muted);margin:10px 0 18px}
.visit-pin{position:absolute;left:var(--vx);top:var(--vy);transform:translate(-50%,-50%);border:0;padding:0;min-width:40px;min-height:40px;background:none;color:#012e53;display:flex;justify-content:center;align-items:center;z-index:2}.visit-pin-number{display:grid;place-items:center;width:32px;height:32px;border:2px solid white;border-radius:50%;background:#d0ebfb;box-shadow:0 2px 10px #0008;font-size:11px;font-weight:700}.visit-pin-label{position:absolute;bottom:calc(100% + 3px);background:#012e53ed;color:white;font-size:10px;padding:4px 8px;white-space:nowrap;opacity:0;pointer-events:none}.visit-pin:hover .visit-pin-label,.visit-pin:focus-visible .visit-pin-label{opacity:1}.visit-pin[aria-pressed=true] .visit-pin-number{background:white;box-shadow:0 0 0 6px #90d0f775,0 2px 10px #0008}
.visit-choices{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);padding-bottom:24px}.visit-choice{display:flex;align-items:center;gap:10px;min-height:44px;border:1px solid var(--line);padding:9px 15px;background:white;color:var(--ink);font-size:12px}.visit-choice-number{font-size:9px;opacity:.7}.visit-choice[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}
.visit-details{scroll-margin-top:110px}.visit-detail-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:24px 0;color:var(--muted);font-size:9px;letter-spacing:.1em}.visit-back{font-size:11px;letter-spacing:0;border:0;background:none;color:var(--blue);padding:8px 0}.visit-panel[hidden]{display:none}.visit-panel-heading{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:28px;align-items:start}.visit-panel-heading .eyebrow{font-size:10px;color:var(--blue);margin-bottom:14px}.visit-panel-heading h2{font-size:40px;line-height:1.15;margin:0}.visit-panel-heading>p{max-width:760px;font-size:14px;color:var(--muted);line-height:1.85;margin:0}
.visit-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.visit-photo{margin:0;min-width:0}.visit-photo-open{display:block;position:relative;width:100%;border:0;padding:0;background:#edf3f7;cursor:zoom-in}.visit-photo-open img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}.visit-photo-zoom{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:30px;height:30px;color:white;background:#012e53cc;font-size:20px}.visit-photo figcaption{font-size:11px;color:var(--muted);margin-top:9px}.visit-gallery>.visit-photo:only-child{grid-column:1/-1;max-width:900px}
.visit-lightbox{padding:0;border:0;background:#062439;color:white;width:min(1300px,96vw);max-width:96vw;max-height:96dvh;overflow:hidden}.visit-lightbox::backdrop{background:#00111eea}.visit-viewer{display:flex;flex-direction:column;max-height:96dvh}.visit-viewer-top,.visit-viewer-bottom{display:flex;justify-content:space-between;gap:25px;align-items:center;padding:14px 22px}.visit-viewer-top{border-bottom:1px solid #34556b}.visit-viewer-counter{font-size:12px}.visit-viewer-close{background:transparent;border:1px solid #658399;color:white;padding:8px 16px;font-size:12px}.visit-viewer-stage{display:grid;grid-template-columns:50px minmax(0,1fr) 50px;align-items:center;min-height:0;background:#001725}.visit-viewer-image{width:100%;height:min(70dvh,760px);object-fit:contain;min-height:0}.visit-viewer-prev,.visit-viewer-next{padding:10px 0;border:0;background:none;color:white;font-size:25px;min-height:50px}.visit-viewer-prev:disabled,.visit-viewer-next:disabled{opacity:.25}.visit-viewer-caption{font-size:13px;margin:0}.visit-viewer-original{font-size:11px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}.visit-viewer-open{overflow:hidden}
@media(max-width:760px){.visit-toolbar{display:block}.visit-toolbar p{margin-top:9px}.visit-map-stamp{font-size:6px;padding:4px 7px;left:8px;top:8px}.visit-pin-number{width:26px;height:26px;font-size:9px}.visit-pin{min-width:32px;min-height:32px}.visit-pin-label{display:none}.visit-choices{gap:6px}.visit-choice{font-size:11px;padding:9px 11px}.visit-panel-heading{grid-template-columns:1fr;gap:18px}.visit-panel-heading h2{font-size:32px}.visit-gallery{gap:20px}.visit-map,.visit-details{scroll-margin-top:95px}.visit-viewer-stage{grid-template-columns:36px minmax(0,1fr) 36px}.visit-viewer-top,.visit-viewer-bottom{padding:12px 16px}.visit-viewer-bottom{align-items:start;flex-direction:column;gap:10px}}
@media(max-width:520px){.visit-gallery{grid-template-columns:1fr}.visit-detail-bar{gap:10px;font-size:8px}.visit-back{font-size:10px}.visit-pin-number{width:23px;height:23px;font-size:8px}}

/* Building sequence follows the user-confirmed salmon lifecycle. */
.visit-choices{display:block}.visit-overview-choice{margin-bottom:20px}.visit-choice-heading{font-family:Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--blue);margin:20px 0 12px}.visit-lifecycle-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.visit-support-choices{display:flex;flex-wrap:wrap;gap:8px}.visit-lifecycle-choices .visit-choice{justify-content:flex-start;text-align:left;min-height:54px}.visit-pin-number{min-width:32px;width:auto;padding:0 7px}.visit-pin[aria-pressed=true] .visit-pin-label{opacity:1}.visit-stage-nav{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:24px;margin-top:35px;gap:20px}.visit-stage-nav[hidden]{display:none}.visit-stage-nav button{background:white;border:1px solid var(--line);color:var(--ink);padding:12px 18px;font-size:12px;min-height:44px}.visit-stage-nav button:disabled{opacity:.35;cursor:default}.visit-stage-counter{font-size:12px;color:var(--muted)}
@media(max-width:700px){.visit-lifecycle-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.visit-pin-number{min-width:25px;width:auto;font-size:9px}.visit-pin[aria-pressed=true] .visit-pin-label{opacity:0}.visit-lifecycle-choices .visit-choice{padding:10px;font-size:11px}.visit-stage-nav{gap:10px}.visit-stage-nav button{padding:10px 12px;font-size:11px}}

/* Interior sections await the user's building photographs. */
.visit-interior-heading{font-family:Arial,sans-serif;font-size:10px;color:var(--blue);font-weight:700;letter-spacing:.12em;margin:32px 0 18px}.visit-interior-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.visit-interior-section{border-top:1px solid var(--line);padding-top:22px}.visit-interior-section>h3{font-size:23px;font-weight:400;line-height:1.3;margin:0 0 15px}.visit-interior-pending{font-size:13px;color:var(--muted);margin:0}.visit-interior-section:only-child{grid-column:1/-1}.visit-interiors .visit-gallery{margin-top:20px}.visit-interiors .visit-gallery:empty{display:none}
@media(max-width:650px){.visit-interior-grid{grid-template-columns:1fr;gap:25px}}
.visit-interiors .visit-photo-open img{display:block;width:100%;aspect-ratio:4/3;height:auto;max-height:none;object-fit:cover}

/* Duration and transfer weight stay with each department and its photographs. */
.visit-department-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 22px;max-width:560px;border:1px solid #cfe2ee;background:#f1f7fb}
.visit-department-metric{padding:15px;min-width:0}.visit-department-metric+.visit-department-metric{border-left:1px solid #cfe2ee}
.visit-department-metric dt{display:flex;align-items:flex-start;gap:7px;font-size:10px;color:#476c82;line-height:1.5;min-height:30px}.visit-department-metric dt svg{flex-shrink:0;margin-top:1px;color:var(--blue)}
.visit-department-metric dd{margin:10px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 10px}.visit-metric-value{font-size:27px;line-height:1.2;color:var(--ink)}.visit-metric-pending{font-size:10px;color:#668297}
@media(max-width:1000px) and (min-width:651px){.visit-department-metric{padding:12px 10px}.visit-department-metric dt{font-size:9px;gap:5px}.visit-department-metric dd{display:block}.visit-metric-pending{display:block;margin-top:4px}}
@media(max-width:650px){.visit-department-metric dt{min-height:0}.visit-department-metrics{max-width:none}}
.visit-department-metric dt{font-size:11px}.visit-metric-pending{font-size:11px}

/* Keep department photographs compact beneath their KPI panels. */
.visit-interiors .visit-gallery>.visit-photo:only-child{width:100%;max-width:560px}

/* Keep the opening project statement readable within the aerial hero. */
.home .hero h1{font-size:clamp(42px,4.7vw,64px);max-width:850px;line-height:1.08}
.home .hero p{max-width:590px}
@media(max-width:760px){.home .hero h1{font-size:42px}.home .hero-content{padding-top:42px;padding-bottom:100px}}

/* Educational copy stays with its existing stage title, KPIs and photographs. */
.site-visit .visit-key-process{font-size:12px;font-weight:600;color:var(--blue);line-height:1.5;margin:0 0 8px}
.site-visit .visit-stage-description{font-size:13px;line-height:1.75;color:var(--muted);max-width:760px;margin:0 0 20px}

/* =====================================================================
   Site explorer (interactive guide, Oct 2026 rebuild) — sx-*
   ===================================================================== */
@property --fx { syntax: '<number>'; inherits: false; initial-value: 50; }
@property --fy { syntax: '<number>'; inherits: false; initial-value: 50; }
@property --fr { syntax: '<number>'; inherits: false; initial-value: 12; }
.sx { --sx-ease: cubic-bezier(.22, .8, .2, 1); --sx-glass: rgba(1, 30, 54, .74); margin-top: 6px; }
.sx-stage { position: relative; height: clamp(540px, calc(100svh - 150px), 880px); overflow: hidden; overflow: clip; background: #0b2236; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; isolation: isolate; }
.sx-stage.is-dragging { cursor: grabbing; }
.sx-stage::before { content: ''; position: absolute; inset: -40px; background: var(--sx-bg) center / cover; filter: blur(28px) brightness(.45) saturate(.8); }
.sx-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 30px 80px rgba(0,0,0,.45); transition: transform .95s var(--sx-ease); will-change: transform; }
.sx-base { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.sx.is-ready .sx-base { opacity: 1; }
.sx-canvas::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(1,24,44,.35), transparent 22%, transparent 78%, rgba(1,24,44,.35)); }
.sx-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .7s ease, --fx .95s var(--sx-ease), --fy .95s var(--sx-ease), --fr .95s var(--sx-ease);
  background: radial-gradient(ellipse calc(var(--fr) * 1%) calc(var(--fr) * 1.78%) at calc(var(--fx) * 1%) calc(var(--fy) * 1%), rgba(1,24,44,0) 0%, rgba(1,24,44,0) 62%, rgba(1,24,44,.66) 100%); }
.sx-stage.is-spot .sx-shade { opacity: 1; }

/* production-flow route */
.sx-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; transition: opacity .4s; }
.sx-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sx-route-base { stroke: rgba(255,255,255,.26); stroke-width: 9; }
.sx-route-flow { stroke: var(--sky); stroke-width: 3.5; stroke-dasharray: .9 1.9; animation: sx-flow 7s linear infinite; opacity: .95; }
.sx-route-progress { stroke: #fff; stroke-width: 5; stroke-dasharray: 0 200; transition: stroke-dasharray 1s var(--sx-ease); filter: drop-shadow(0 0 6px rgba(144,208,247,.9)); }
@keyframes sx-flow { to { stroke-dashoffset: -28; } }
.sx-stage.no-route .sx-route { opacity: 0; }

/* pins */
.sx-pins { position: absolute; inset: 0; z-index: 3; }
.sx-pin { position: absolute; left: var(--x); top: var(--y); width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 0; border: 0; background: none; cursor: pointer; transform: scale(var(--inv, 1)); transform-origin: 50% 50%; transition: transform .95s var(--sx-ease), opacity .4s; }
.sx-stage.is-dragging .sx-pin, .sx-stage.is-dragging .sx-canvas { transition: none; }
.sx-pin-dot { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); font: 700 13px/1 Arial, sans-serif; letter-spacing: .02em; box-shadow: 0 6px 18px rgba(0,18,36,.42), 0 0 0 4px rgba(255,255,255,.28); transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--sx-ease); }
.sx-pin-support { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
.sx-pin-support .sx-pin-dot { background: var(--ink); color: #fff; font-size: 11px; box-shadow: 0 5px 14px rgba(0,18,36,.4), 0 0 0 2px rgba(255,255,255,.85); }
.sx-pin:hover .sx-pin-dot, .sx-pin:focus-visible .sx-pin-dot { transform: scale(1.12); }
.sx-pin:focus-visible { outline: none; }
.sx-pin:focus-visible .sx-pin-dot { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--sky); }
.sx-pin.is-active .sx-pin-dot { background: var(--sky); color: var(--ink); box-shadow: 0 8px 24px rgba(0,18,36,.5), 0 0 0 4px #fff; transform: scale(1.14); }
.sx-pin.is-active .sx-pin-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--sky); animation: sx-pulse 2.2s var(--sx-ease) infinite; }
@keyframes sx-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.sx-pin.is-visited .sx-pin-dot::before { content: ''; position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--sky); border: 2px solid #fff; }
.sx-pin-label { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); white-space: nowrap; background: rgba(1,30,54,.94); color: #fff; font: 600 12px/1 Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; padding: 8px 12px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--sx-ease); box-shadow: 0 6px 18px rgba(0,18,36,.35); }
.sx-pin:hover .sx-pin-label, .sx-pin:focus-visible .sx-pin-label, .sx-pin.is-active:not(.sx-pin-extra) .sx-pin-label { opacity: 1; transform: translate(-50%, 0); }
.sx-stage.is-spot .sx-pin:not(.is-active) { opacity: .62; }
.sx-stage.is-spot .sx-pin:not(.is-active):hover { opacity: 1; }
.sx-stage.no-support .sx-pin-support { opacity: 0; pointer-events: none; }

/* map chrome */
.sx-topbar { position: absolute; z-index: 5; top: 18px; left: 18px; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.sx-toggles { display: flex; gap: 8px; }
.sx-toggle, .sx-zoom button, .sx-hintbar { pointer-events: auto; background: var(--sx-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; border: 1px solid rgba(255,255,255,.16); }
.sx-toggle { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px; border-radius: 999px; font-size: 12px; font-weight: 600; transition: background .2s, color .2s; }
.sx-toggle[aria-pressed=false] { color: rgba(255,255,255,.62); }
.sx-toggle:hover { background: rgba(1,30,54,.9); }
.sx-swatch { width: 16px; height: 4px; border-radius: 2px; background: var(--sky); transition: opacity .2s; }
.sx-swatch-support { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; }
.sx-toggle[aria-pressed=false] .sx-swatch { opacity: .3; }
.sx-zoom { position: absolute; z-index: 5; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.sx-zoom button { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; transition: background .2s, opacity .2s; }
.sx-zoom button:hover:not(:disabled) { background: rgba(1,30,54,.92); }
.sx-zoom button:disabled { opacity: .45; cursor: default; }
.sx-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sx-zoom .sx-reset { width: auto; height: 34px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .04em; margin-top: 4px; }
.sx-hintbar { position: absolute; z-index: 5; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 18px; border-radius: 999px; font-size: 13px; white-space: nowrap; transition: opacity .35s, transform .35s var(--sx-ease); }
.sx-start { border: 0; border-radius: 999px; background: var(--sky); color: var(--ink); font-weight: 700; font-size: 13px; padding: 9px 16px; }
.sx-start:hover { background: #fff; }
.sx-drag { display: none; }
.sx-stage.has-panel .sx-hintbar, .sx-stage.is-touring .sx-hintbar { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }

/* panel */
.sx-panel { position: absolute; z-index: 6; top: 18px; right: 18px; bottom: 18px; width: min(430px, 40%); display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: 20px; box-shadow: 0 24px 60px rgba(0,18,36,.38); transform: translateX(calc(100% + 40px)); opacity: 0; transition: transform .6s var(--sx-ease), opacity .4s; cursor: auto; user-select: text; -webkit-user-select: text; outline: none; }
.sx-panel.is-open { transform: none; opacity: 1; }
.sx-panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 26px 28px 22px; scrollbar-width: thin; animation: sx-in .5s var(--sx-ease); }
@keyframes sx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sx-grab { display: none; }
.sx-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #eef5fa; color: var(--ink); display: grid; place-items: center; transition: background .2s; }
.sx-close:hover { background: var(--light-blue); }
.sx-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.sx-panel.is-overview .sx-close { display: none; }
.sx-panel-head { display: flex; align-items: center; gap: 10px; min-height: 36px; padding-right: 44px; }
.sx-kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.sx-code { font: 700 11px/1 Arial, sans-serif; letter-spacing: .06em; background: var(--ink); color: #fff; padding: 5px 8px; border-radius: 6px; }
.sx-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 10px 0 4px; }
.sx-progress span { height: 3px; border-radius: 2px; background: #dbe8f1; }
.sx-progress .is-done { background: var(--blue); }
.sx-progress .is-now { background: var(--sky); box-shadow: 0 0 0 1px var(--blue) inset; }
.sx-title { font-family: Georgia, 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-weight: 400; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -.02em; margin: 12px 0 16px; outline: none; }
html[lang=ja] .sx-title { line-height: 1.45; letter-spacing: 0; font-size: clamp(22px, 1.8vw, 27px); }
.sx-body { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; }
.sx-sub { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.sx-hero { position: relative; margin: 0 0 18px; }
.sx-hero-btn { display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #e8eef2; cursor: zoom-in; }
.sx-hero-btn img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; transition: transform .6s var(--sx-ease); }
.sx-hero-btn:hover img { transform: scale(1.04); }
.sx-hero-count { position: absolute; top: 10px; left: 10px; background: rgba(1,30,54,.8); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px; pointer-events: none; }
.sx-hero-cap { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }
.sx-hero-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: #e8eef2; }
.sx-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 18px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sx-facts div { background: #fff; padding: 14px 12px; }
.sx-facts dt { font-family: Georgia, 'Yu Mincho', serif; font-size: 21px; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 6px; white-space: nowrap; }
.sx-facts dd { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.sx-cta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; border: 0; border-radius: 14px; background: var(--ink); color: #fff; padding: 16px 18px; margin: 0 0 18px; transition: background .2s, transform .2s; }
.sx-cta:hover { background: var(--blue); }
.sx-cta strong { display: block; font-size: 15px; }
.sx-cta small { display: block; font-size: 12px; color: #b9d7ea; margin-top: 3px; }
.sx-cta-arrow { font-size: 20px; transition: transform .25s var(--sx-ease); }
.sx-cta:hover .sx-cta-arrow { transform: translateX(4px); }
.sx-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sx-thumbs-sm { margin-top: 14px; }
.sx-photo:not(.sx-hero-btn) { padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: #e8eef2; cursor: zoom-in; }
.sx-photo:not(.sx-hero-btn) img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; transition: transform .5s var(--sx-ease), opacity .2s; }
.sx-photo:hover img { transform: scale(1.06); }
.sx-tabs { display: flex; gap: 4px; padding: 4px; margin: 4px 0 16px; background: #eef5fa; border-radius: 12px; }
.sx-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 13px; font-weight: 600; padding: 9px 8px; transition: background .2s, color .2s, box-shadow .2s; }
.sx-tabs button[aria-selected=true] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(1,46,83,.12); }
.sx-tab-n { font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #d6e5f0; color: var(--ink); }
.sx-tabs button[aria-selected=true] .sx-tab-n { background: var(--sky); }
.sx-section { animation: sx-in .4s var(--sx-ease); }
.sx-process { font-family: Georgia, 'Yu Mincho', serif; font-size: 19px; line-height: 1.3; color: var(--ink); margin: 0 0 8px; }
.sx-desc { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.sx-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.sx-metric { background: #f1f7fb; border-radius: 12px; padding: 13px 14px; }
.sx-metric dt { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.sx-metric dt svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sx-metric dd { margin: 0; font-family: Georgia, 'Yu Mincho', serif; font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.sx-pending { font-family: Arial, sans-serif; font-size: 12px; color: var(--muted); letter-spacing: 0; }
.sx-pending-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; padding: 11px 13px; border: 1px dashed #c7dceb; border-radius: 10px; }
.sx-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sx-step { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; padding: 11px 13px; font-size: 13px; font-weight: 600; line-height: 1.3; transition: border-color .2s, background .2s; }
.sx-step small { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sx-step:hover { border-color: var(--blue); }
.sx-step-next { grid-column: 2; text-align: right; align-items: flex-end; background: var(--ink); border-color: var(--ink); color: #fff; }
.sx-step-next small { color: #b9d7ea; }
.sx-step-next small::after { content: ' →'; }
.sx-step-prev small::before { content: '← '; }
.sx-step-next:hover { background: var(--blue); border-color: var(--blue); }
.sx-keys { font-size: 11.5px; color: #8299ab; margin: 12px 0 0; text-align: center; }
html[lang=ja] .sx-kicker, html[lang=ja] .sx-sub, html[lang=ja] .sx-step small { letter-spacing: .04em; }

/* journey rail */
.sx-journey { padding: clamp(36px, 5vw, 60px) 0 clamp(48px, 6vw, 80px); }
.sx-journey-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.sx-journey-head h2 { font-size: clamp(28px, 3vw, 40px); margin: 0; }
.sx-total { margin: 0; display: flex; align-items: baseline; gap: 10px; color: var(--muted); font-size: 13px; max-width: 30em; }
.sx-total strong { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: 28px; color: var(--ink); white-space: nowrap; letter-spacing: -.02em; }
.sx-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; }
.sx-rail::before { content: ''; position: absolute; left: 0; right: 0; top: 36px; height: 2px; background: var(--line); }
.sx-rail li { position: relative; }
.sx-rail li.is-done::after, .sx-rail li.is-now::after { content: ''; position: absolute; left: 0; top: 36px; height: 2px; width: 100%; background: var(--blue); }
.sx-rail li.is-now::after { width: 50%; }
.sx-node { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border: 0; background: none; color: var(--ink); padding: 0 14px 14px 0; }
.sx-node-fish { height: 72px; display: flex; align-items: center; }
.sx-node-fish svg { width: calc(var(--size) * 1.5); height: auto; overflow: visible; transition: transform .3s var(--sx-ease); }
.sx-node-fish path { fill: #fff; stroke: #9fc3da; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .3s, stroke .3s; }
.sx-node-fish i { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #9fc3da; }
.sx-node-code { font: 700 11px/1 Arial, sans-serif; letter-spacing: .08em; color: var(--blue); }
.sx-node-name { font-family: Georgia, 'Yu Mincho', serif; font-size: 19px; line-height: 1.2; }
.sx-node-meta { font-size: 12.5px; color: var(--muted); }
.sx-node:hover .sx-node-fish svg { transform: translateX(4px); }
.sx-node:hover .sx-node-fish path { stroke: var(--blue); }
.is-done .sx-node-fish path { fill: var(--blue); stroke: var(--blue); }
.is-done .sx-node-fish i { background: var(--blue); border-color: var(--blue); }
.is-now .sx-node-fish path { fill: var(--sky); stroke: var(--ink); }
.is-now .sx-node-fish i { background: var(--sky); border-color: var(--ink); }
.sx-node.is-active .sx-node-name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sx-journey-foot { display: flex; justify-content: space-between; align-items: center; gap: 18px 32px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.sx-support-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sx-chips-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.sx-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: border-color .2s, background .2s; }
.sx-chip:hover { border-color: var(--blue); }
.sx-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.sx-footnote { margin: 0; font-size: 12px; color: #8299ab; max-width: 46em; }

/* photo viewer */
.sx-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(2,14,26,.985); color: #fff; }
.sx-lightbox::backdrop { background: rgba(2,14,26,.7); }
.sx-lightbox[open] { animation: sx-fade .3s ease; }
@keyframes sx-fade { from { opacity: 0; } }
html.sx-viewer-open { overflow: hidden; }
.sx-viewer { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.sx-viewer-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
.sx-viewer-count { font-size: 13px; color: #b9d7ea; font-variant-numeric: tabular-nums; }
.sx-viewer-close { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; }
.sx-viewer-close:hover { background: rgba(255,255,255,.14); }
.sx-viewer-stage { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; min-height: 0; padding: 0 12px; }
.sx-viewer-stage figure { margin: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.sx-viewer-img { max-width: 100%; max-height: calc(100dvh - 230px); width: auto; height: auto; object-fit: contain; border-radius: 6px; opacity: 0; transform: scale(.985); transition: opacity .35s, transform .45s var(--sx-ease); }
.sx-viewer-img.is-in { opacity: 1; transform: none; }
.sx-viewer-cap { font-size: 14px; color: #dbe9f3; text-align: center; }
.sx-viewer-nav { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; justify-self: center; }
.sx-viewer-nav:hover { background: rgba(255,255,255,.16); }
.sx-viewer-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-viewer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px 18px; }
.sx-viewer-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sx-viewer-strip button { flex: none; width: 74px; padding: 0; border: 2px solid transparent; border-radius: 7px; overflow: hidden; opacity: .55; background: none; transition: opacity .2s, border-color .2s; }
.sx-viewer-strip button[aria-current=true] { opacity: 1; border-color: var(--sky); }
.sx-viewer-strip button:hover { opacity: 1; }
.sx-viewer-strip img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.sx-viewer-original { flex: none; color: var(--sky); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--sky); padding-bottom: 2px; }
.sx-noscript { position: absolute; inset: auto 0 0; padding: 16px; background: #fff; text-align: center; }

@media (max-width: 1100px) { .sx-panel { width: min(400px, 46%); } }
@media (max-width: 760px) {
  .sx-stage { height: min(68svh, 560px); min-height: 400px; }
  .sx-topbar { top: 12px; left: 12px; right: 12px; }
  .sx-toggle { height: 34px; padding: 0 12px; font-size: 11.5px; }
  .sx-zoom { left: auto; right: 12px; bottom: 74px; }
  .sx-zoom .sx-reset { display: none; }
  .sx-hintbar { bottom: 14px; left: 12px; right: 12px; transform: none; justify-content: space-between; white-space: normal; padding: 6px 6px 6px 14px; font-size: 12px; }
  .sx-hint-text { flex: 1; }
  .sx-stage.has-panel .sx-hintbar, .sx-stage.is-touring .sx-hintbar { transform: translateY(12px); }
  .sx-pin { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .sx-pin-dot { font-size: 12px; }
  .sx-pin-support { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .sx-pin-label { display: none; }
  .sx-pin.is-active .sx-pin-label { display: block; }
  .sx-panel { position: fixed; z-index: 70; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 60svh; border-radius: 22px 22px 0 0; transform: translateY(110%); box-shadow: 0 -12px 40px rgba(0,18,36,.32); transition: transform .5s var(--sx-ease), opacity .3s; }
  .sx-panel.is-open { transform: translateY(var(--drag, 0px)); }
  .sx-panel.is-sheet-drag { transition: none; }
  .sx-panel.is-away { transform: translateY(110%); }
  .sx-grab { display: block; flex: none; height: 22px; cursor: grab; touch-action: none; }
  .sx-grab::before { content: ''; display: block; width: 42px; height: 5px; border-radius: 3px; background: #c9d9e4; margin: 9px auto 0; }
  .sx-panel-head { touch-action: none; }
  .sx-panel-body { padding: 4px 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .sx-close { top: 16px; right: 14px; }
  .sx-title { font-size: 25px; margin: 8px 0 12px; }
  .sx-hero-btn img { aspect-ratio: 16 / 9; }
  .sx-keys { display: none; }
  .sx-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -6vw; padding: 0 6vw; }
  .sx-rail li { flex: 0 0 44%; scroll-snap-align: start; }
  .sx-total { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-canvas, .sx-pin, .sx-panel, .sx-shade, .sx-route-progress { transition: none !important; }
  .sx-route-flow, .sx-pin.is-active .sx-pin-dot::after { animation: none; }
}
/* Production: a stage-led lifecycle with authentic, dated PSJ photography. */
.production .page-heading{padding:28px 0 18px}.production .breadcrumb{margin-bottom:16px}.production .page-heading h1{font-size:52px}.production .page-heading p{margin-bottom:0;max-width:800px}
.production-content{padding-top:36px}.production-intro{grid-template-columns:1fr;gap:16px;margin-bottom:32px}.production-intro h2{font-size:clamp(32px,3.5vw,46px)}.production-intro>p{max-width:760px}
.prod-journey{border:1px solid var(--line);background:#f5f9fc}.prod-journey-heading{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px 25px}.prod-journey-heading h3{font-size:19px;margin:0}.prod-journey-heading>span{font-size:11px;color:var(--muted)}
.prod-tabs{display:flex;border-block:1px solid var(--line);background:white;overflow-x:auto;scrollbar-width:thin}.prod-tabs button{font:inherit;flex:1;min-width:110px;cursor:pointer;border:0;border-right:1px solid var(--line);border-bottom:3px solid transparent;text-align:left;padding:14px 15px;color:var(--muted);background:white;font-size:11px;line-height:1.4}.prod-tabs button:last-child{border-right:0}.prod-tabs b{display:block;font-size:10px;letter-spacing:.08em;margin-bottom:7px;color:#5086a6}.prod-tabs button[aria-selected=true]{background:#012e53;color:white;border-bottom-color:#90d0f7}.prod-tabs button[aria-selected=true] b{color:#90d0f7}.prod-tabs button:hover{background:#e6f3fc;color:var(--ink)}.prod-tabs button[aria-selected=true]:hover{background:#01406e;color:white}.prod-tabs button:focus-visible{outline:3px solid #4ea6d7;outline-offset:-4px}
.prod-stage[hidden]{display:none!important}.prod-stage{display:grid;grid-template-columns:1fr 1fr;min-height:430px}.prod-stage figure{margin:0}.prod-stage-photo{position:relative;background:#082e47;min-height:430px;overflow:hidden}.prod-stage-photo img{display:block;width:100%;height:430px;object-fit:cover}.prod-stage-photo.eggs img{object-position:center 59%}.prod-stage-photo figcaption{position:absolute;bottom:0;left:0;right:0;padding:36px 22px 15px;background:linear-gradient(transparent,#001c30e8);color:white;font-size:11px}.prod-stage-copy{padding:35px 36px;align-self:center}.prod-stage-copy .eyebrow{font-size:10px;color:var(--blue);margin-bottom:15px}.prod-stage-copy h3{font-size:34px;font-weight:400;margin:0 0 15px;font-family:Georgia,'Yu Mincho',serif}.prod-stage-copy>p{font-size:13px;line-height:1.85;color:var(--muted);margin-bottom:18px}.prod-stage-metrics{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);padding-top:20px;margin:20px 0}.prod-stage-metrics dt{font-size:10px;color:var(--muted);margin-bottom:6px}.prod-stage-metrics dd{font-size:25px;margin:0;color:var(--ink)}.prod-stage-copy .prod-plan-note{font-size:10px;line-height:1.6}.prod-stage-copy .text-link{font-size:12px}
.prod-stage-plan{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 20%,#227ea288,transparent 65%),#012e53;color:white;padding:35px;display:flex;flex-direction:column;justify-content:flex-end;min-height:430px}.prod-plan-number{position:absolute;top:10px;left:25px;font-size:210px;font-weight:300;line-height:1;color:#90d0f733;letter-spacing:-.08em}.prod-stage-plan>span:not(.prod-plan-number){font-size:10px;letter-spacing:.15em;color:#a1d8fa;z-index:1}.prod-stage-plan strong{font-size:35px;font-family:Georgia,serif;font-weight:400;margin:12px 0;z-index:1}.prod-stage-plan small{font-size:12px;z-index:1}
.prod-people{display:grid;grid-template-columns:1.1fr 1fr;gap:55px;align-items:center;margin:50px 0}.prod-people figure{margin:0}.prod-people img{width:100%;height:auto;display:block}.prod-people figcaption,.prod-photo-grid figcaption{font-size:10px;line-height:1.6;color:var(--muted);margin-top:9px}.prod-people .eyebrow,.prod-section-heading .eyebrow{font-size:10px;color:var(--blue);margin-bottom:15px}.prod-people h2{font-size:38px;line-height:1.15;margin:0 0 20px}.prod-people p{font-size:14px;line-height:1.85;color:var(--muted)}.prod-people .text-link{font-size:12px}
.prod-milestones{border-top:1px solid var(--line);padding-top:35px}.prod-section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:25px}.prod-section-heading h2{font-size:32px;margin:0}.prod-section-heading>p{max-width:330px;font-size:12px;color:var(--muted);margin:0}.prod-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:35px}.prod-photo-grid figure{margin:0}.prod-photo-grid img{width:100%;height:300px;object-fit:cover;display:block}.prod-photo-grid a{display:block}.prod-photo-grid a:hover{opacity:.9}.production-film{max-width:100%}.production-film video{max-height:490px}
@media(max-width:760px){.production .page-heading h1{font-size:38px}.production-intro{grid-template-columns:1fr;gap:18px}.prod-journey-heading{padding:18px}.prod-journey-heading h3{font-size:16px}.prod-journey-heading>span{font-size:10px}.prod-tabs button{min-width:115px;padding:12px}.prod-stage{grid-template-columns:1fr}.prod-stage-photo,.prod-stage-plan{min-height:260px}.prod-stage-photo img{height:280px}.prod-stage-plan{padding:25px}.prod-plan-number{font-size:180px}.prod-stage-plan strong{font-size:30px}.prod-stage-copy{padding:25px}.prod-stage-copy h3{font-size:30px}.prod-people{grid-template-columns:1fr;gap:25px;margin:35px 0}.prod-people h2{font-size:32px}.prod-section-heading{display:block}.prod-section-heading h2{font-size:28px;margin-bottom:15px}.prod-photo-grid{gap:12px;grid-template-columns:1fr 1fr}.prod-photo-grid figure:last-child{grid-column:1 / -1}.prod-photo-grid figure:last-child img{height:230px;object-position:center 55%}.prod-photo-grid img{height:240px}.prod-photo-grid figcaption{font-size:10px}.prod-stage-metrics dd{font-size:24px}}

/* Viewport-sized facility guide, with a compact persistent exit bar. */
body.facility{overflow:hidden}
.facility>.draft,.facility>header,.facility>footer,.facility #main>.page-heading,.facility #main>.project-section-nav{display:none}
.facility .sx{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;width:100%;height:100dvh;margin:0;background:#fff;overflow:hidden}
.sx-guide-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:0 0 60px;padding:8px 24px;background:#062f4d;color:#fff;box-sizing:border-box}
.sx-guide-title{display:flex;align-items:baseline;gap:18px;font-family:Georgia,'Yu Mincho',serif;font-size:23px;line-height:1.2}
.sx-guide-title small{font-family:Arial,sans-serif;font-size:9px;letter-spacing:.12em;color:#bdd7e7}
.sx-guide-actions{display:flex;align-items:center;gap:18px}.sx-exit{display:flex;align-items:center;gap:14px;border:1px solid #6a8ba1;border-radius:6px;padding:8px 13px;font-size:12px;white-space:nowrap;color:#fff;min-height:38px;box-sizing:border-box}.sx-exit:hover{background:#214c67}.sx-exit:focus-visible{outline:2px solid white;outline-offset:3px}
.facility .sx-stage{flex:1 1 auto;height:auto;min-height:0;width:100%}
.facility .sx-panel{top:14px;bottom:14px}
.facility .sx-journey{flex:0 0 auto;max-height:145px;overflow:auto;width:100%;max-width:none;padding:12px 24px;box-sizing:border-box}
.facility .sx-journey-head,.facility .sx-node-fish,.facility .sx-footnote{display:none}
.facility .sx-rail{min-width:720px}.facility .sx-rail::before,.facility .sx-rail li::after{display:none}
.facility .sx-node{gap:4px;padding:0 12px 8px 0}.facility .sx-node-name{font-size:16px}.facility .sx-node-meta{font-size:11px}
.facility .sx-journey-foot{margin-top:4px;padding-top:8px}.facility .sx-chip{font-size:11px;padding:6px 11px}.facility .sx-chips-label{font-size:9px}
@media(max-width:760px){.sx-guide-bar{flex-basis:54px;padding:7px 12px;gap:8px}.sx-guide-title{font-size:18px}.sx-guide-title small{display:none}.sx-guide-actions{gap:8px}.sx-guide-actions .lang button{padding:4px 6px}.sx-exit{font-size:11px;padding:7px 9px;gap:8px}.facility .sx-journey{max-height:124px;padding:9px 12px;overflow-x:hidden}.facility .sx-panel{position:absolute;top:auto;left:0;right:0;bottom:0;max-height:62%;width:100%}.facility .sx-rail{min-width:0;margin:0;padding:0}.facility .sx-node-name{font-size:14px}.facility .sx-journey-foot{min-width:0}.facility .sx-chips-label{display:none}}

.sx-guide-bar .lang button{color:#d6e8f3}.sx-guide-bar .lang button.active{background:#a5d6f4;color:#062f4d}

/* Give desktop guide copy more room while retaining a clear map majority. */
@media(min-width:761px){.facility .sx-panel{width:min(520px,43%)}.facility .sx-panel-body{padding-left:24px;padding-right:24px}.facility .sx-hero-btn img,.facility .sx-hero-video video{height:min(24dvh,230px);aspect-ratio:auto}}
/* Phone legibility floor: captions, notes and sources at least 11px; map labels at least 9px.
   Uppercase eyebrow labels keep their design size. !important overrides the many page-specific sizes. */
@media(max-width:760px){
.hero-bottom span,.hero-bottom .scroll,.home-footer,.home-footer span,.home-footer a,.home-footer button,.footer-bottom span,
figcaption,figcaption span,figcaption a,.fact p,.it-metrics span,
.geo-map-note,.geo-population-year,.geo-estimate,.geo-population-source span,.geo-population-source a,.geo-metrics dt,
.prod-plan-note,.prod-stage-copy .prod-plan-note,.prod-stage-metrics dt span,
.board-source{font-size:11px!important;line-height:1.5}
.geo-map-top span,.geo-tsu small,.geo-layout th,.geo-table-city small{font-size:9px!important}
}

/* =====================================================================
   Motion layer — the interactive guide's feel applied site-wide.
   Same easing as .sx (--sx-ease), soft rounded surfaces, guide-style
   segmented tabs, fade-up reveals (source/motion.js) and page crossfades.
   All movement is skipped when the visitor prefers reduced motion.
   ===================================================================== */
:root { --m-ease: cubic-bezier(.22, .8, .2, 1); }

/* Surfaces: rounded like the guide's panels and photos */
.page-panel, .role-card, .partners-content .partner-card { border-radius: 16px; }
.partner-logo { border-radius: 12px; }
.close-card { border-radius: 20px; overflow: hidden; }
.path img, .group-grid img, main figure:not(.prod-stage-photo) img, main video, .prod-photo-grid a { border-radius: 14px; }
.prod-photo-grid a { overflow: hidden; }
.prod-journey { border-radius: 18px; overflow: hidden; }

/* Buttons and links */
.button { border-radius: 999px; transition: background .3s var(--m-ease), color .3s, transform .4s var(--m-ease), box-shadow .4s var(--m-ease); }
.text-link { transition: color .25s, border-color .25s; }
header .links a { transition: color .25s, border-color .25s; }
header .lang button { transition: background .3s var(--m-ease), color .3s; }
body > header { transition: box-shadow .4s var(--m-ease); }
body > header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 18, 36, .28); }

/* Guide-style segmented tabs (Team, Partners, Technology) */
.tech-tabs { display: flex; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; background: #eef5fa; border: 0; border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.tech-tabs button { border: 0; border-radius: 10px; padding: 10px 18px; white-space: nowrap; color: var(--muted); transition: background .35s var(--m-ease), color .3s, box-shadow .35s var(--m-ease); }
.tech-tabs button:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
.tech-tabs button[aria-selected=true] { background: #fff; color: var(--ink); border: 0; box-shadow: 0 2px 8px rgba(1, 46, 83, .12); }
@media (max-width: 760px) {
  .tech-tabs { width: 100%; flex-wrap: wrap; justify-content: stretch; }
  .tech-tabs button { flex: 1 1 calc(50% - 4px); width: auto; padding: 10px 12px; text-align: center; white-space: normal; }
}
.prod-tabs button { transition: background .35s var(--m-ease), color .3s, border-color .35s var(--m-ease); }

@media (prefers-reduced-motion: no-preference) {
  /* Page-to-page crossfade; the header stays in place */
  @view-transition { navigation: auto; }
  body > header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--m-ease); }

  @keyframes m-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Page headings settle in on load, line by line */
  .page-heading .wrap > * { animation: m-rise .8s var(--m-ease) both; }
  .page-heading .wrap > :nth-child(2) { animation-delay: .08s; }
  .page-heading .wrap > :nth-child(3) { animation-delay: .16s; }
  .page-heading .wrap > :nth-child(n+4) { animation-delay: .24s; }

  /* Scroll reveals (classes set by motion.js) */
  .motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--m-ease) var(--reveal-delay, 0ms), transform .9s var(--m-ease) var(--reveal-delay, 0ms); }
  .motion .reveal.is-in { opacity: 1; transform: none; }

  /* Tab content fades up like the guide's panel sections */
  [role=tabpanel]:not([hidden]) { animation: m-rise .5s var(--m-ease); }

  /* Menus open softly */
  header .links.open, header .project-submenu:not([hidden]) { animation: m-rise .35s var(--m-ease); }
  header .project-toggle svg { transition: transform .35s var(--m-ease); }

  /* Hover: lift buttons and link cards, slow zoom on photos */
  .button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(1, 46, 83, .22); }
  .page-panel, .role-card, .partners-content .partner-card { transition: transform .5s var(--m-ease), box-shadow .5s var(--m-ease); }
  .page-panel:has(a):hover, .partners-content .partner-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(1, 46, 83, .12); }
  .path img { transition: transform .7s var(--m-ease), box-shadow .7s var(--m-ease); }
  .path:hover img, .path:focus-visible img { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(1, 46, 83, .18); }
  .close-card img, .prod-photo-grid img { transition: transform .9s var(--m-ease); }
  .close-card:hover img, .prod-photo-grid a:hover img { transform: scale(1.04); }
  .prod-photo-grid a:hover { opacity: 1; }
}
@media print { .motion .reveal { opacity: 1 !important; transform: none !important; } }

/* =====================================================================
   Progress timeline (Mie project Overview, #progress) and homepage
   "Latest update" strip. Content: source/timeline.json, markup: timeline_content.py.
   ===================================================================== */
/* Overview layout: timeline column on the left, photo, panels and partners on the right */
.project-layout { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: clamp(32px, 4vw, 60px); align-items: start; padding: 34px 0 clamp(56px, 7vw, 96px); }
.project-main .project-overview-photo { margin: 0; }
.project-main .page-content { padding: 36px 0 0; }
.project-main .partner-related { margin: 36px 0 0; }

.tl-section { scroll-margin-top: 110px; }
.tl-head h2 { font-size: 28px; line-height: 1.15; margin: 10px 0 10px; }
html[lang=ja] .tl-head h2 { font-size: 23px; line-height: 1.45; }
.tl-head p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; }

/* Vertical line: each milestone draws the segment above its dot (::before) and below it (::after),
   solid while the project has passed through it and dashed from "current position" on. */
.tlv { margin: 26px 0 18px; }
.tlv-phase { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.tlv-rail { display: flex; flex-direction: column; }
.tlv-rail .tlv-phase-next { position: relative; margin: 0; padding: 2px 0 18px 32px; color: #7e9bb0; }
.tlv-rail .tlv-phase-next::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, #a9c9de 0 6px, transparent 6px 12px); }
.tlh-node { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); padding: 0 0 22px; cursor: pointer; font: inherit; }
.tlv-rail .tlh-node { padding-bottom: 16px; }
.tlh-node::before, .tlh-node::after { content: ''; position: absolute; left: 8px; width: 2px; }
.tlh-node::before { top: 0; height: 11px; }
.tlh-node::after { top: 11px; bottom: 0; }
.tlh-node.is-done::before, .tlh-node.is-done:not(.is-current)::after { background: var(--blue); }
.tlh-node.is-planned::before, .tlh-node.is-current::after, .tlh-node.is-planned::after { background: repeating-linear-gradient(to bottom, #a9c9de 0 6px, transparent 6px 12px); }
.tlv-rail > .tlh-node:first-child::before, .tlh-node.is-last::after { display: none; }
.tlv-text { display: flex; flex-direction: column; align-items: flex-start; }
.tlh-date { height: 18px; line-height: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: var(--blue); }
.tlh-node.is-planned .tlh-date { color: #7e9bb0; }
.tlh-dot { position: relative; z-index: 1; width: 16px; height: 16px; margin: 3px 0 0 1px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #fff; transition: transform .35s var(--m-ease), box-shadow .35s var(--m-ease); }
.tlh-node.is-planned .tlh-dot { background: #fff; border: 2px dashed #8fb6cf; }
.tlh-node.is-current .tlh-dot { background: var(--sky); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--ink); }
.tlh-now { margin-top: 8px; background: var(--ink); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tlh-title { font-family: Georgia, 'Yu Mincho', serif; font-size: 17px; line-height: 1.25; margin: 2px 0 4px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color .25s, text-decoration-color .25s; }
html[lang=ja] .tlh-title { font-size: 16px; line-height: 1.45; }
.tlh-short { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.tlh-node.is-planned .tlh-title { color: #3d5d74; }
.tlh-node:hover .tlh-title { color: var(--blue); }
.tlh-node:hover .tlh-dot { transform: scale(1.18); }
.tlh-node[aria-selected=true] .tlh-title { color: var(--ink); text-decoration-color: var(--blue); }
.tlh-node[aria-selected=true]:not(.is-current) .tlh-dot { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--blue); transform: scale(1.12); }
.tlh-node:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.tlh-panel { margin-top: 4px; }

/* Detail card in the main column, under the photo */
.tl-detail { margin-top: 28px; }
.tl-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 28px; }
.tl-card.has-image { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.tl-card.is-planned { background: #f7fafc; border: 1px dashed #c7dceb; }
.tl-card.is-planned h3 { color: #3d5d74; }
.tl-card img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border-radius: 12px; display: block; }
.tl-date { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0; }
.tl-card.is-planned .tl-date { color: #7e9bb0; }
.tl-card h3 { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; margin: 8px 0 10px; }
html[lang=ja] .tl-card h3 { letter-spacing: 0; line-height: 1.45; font-size: 19px; }
.tl-card p:not(.tl-date) { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0 0 12px; }
.tl-card .text-link { font-size: 13px; margin-top: 4px; }
.tl-note { margin-top: 14px; }

.latest-strip { background: var(--light-blue); padding: 18px 0; }
.latest-card { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 999px; padding: 10px 26px 10px 10px; color: var(--ink); text-decoration: none; box-shadow: 0 6px 22px rgba(1, 46, 83, .08); }
.latest-badge { display: inline-flex; align-items: center; gap: 9px; flex: none; background: var(--ink); color: #fff; border-radius: 999px; padding: 9px 16px 9px 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.latest-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.latest-date { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.latest-title { flex: 1; font-family: Georgia, 'Yu Mincho', serif; font-size: 20px; line-height: 1.3; }
.latest-link { flex: none; font-size: 13px; font-weight: 700; color: var(--blue); }

/* Narrower screens: one column — photo, timeline list, its detail card, then the panels and partners line */
@media (max-width: 1000px) {
  .project-layout { display: flex; flex-direction: column; gap: 0; padding-top: 26px; }
  .project-main { display: contents; }
  .project-main .project-overview-photo { order: 1; }
  .project-aside { order: 2; margin-top: 36px; border-top: 1px solid var(--line); padding-top: 36px; }
  .project-main .tl-detail { order: 3; margin-top: 8px; }
  .project-main .page-content { order: 4; }
  .project-main .partner-related { order: 5; }
}
@media (max-width: 760px) {
  .tl-card.has-image { grid-template-columns: 1fr; gap: 18px; }
  .tl-card { padding: 20px; }
  .latest-card { flex-wrap: wrap; gap: 8px 12px; border-radius: 20px; padding: 14px 16px; }
  .latest-title { flex-basis: 100%; font-size: 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tlh-node.is-current .tlh-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--sky); animation: sx-pulse 2.2s cubic-bezier(.22, .8, .2, 1) infinite; }
  .latest-badge::before { animation: m-dot 2.2s ease-in-out infinite; }
  @keyframes m-dot { 50% { opacity: .35; } }
  .latest-card { transition: transform .5s var(--m-ease), box-shadow .5s var(--m-ease); }
  .latest-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(1, 46, 83, .14); }
  .latest-link span[aria-hidden] { display: inline-block; transition: transform .35s var(--m-ease); }
  .latest-card:hover .latest-link span[aria-hidden] { transform: translateX(4px); }
}

/* =====================================================================
   Pure Salmon Academy — Careers section (source/academy.html, #academy),
   plus the pointer card on Production.
   ===================================================================== */
.career-academy { padding: clamp(56px, 7vw, 96px) 0; background: linear-gradient(180deg, #eef6fc, #fff 70%); border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.academy-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.academy-intro h2 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.1; margin: 14px 0 22px; }
html[lang=ja] .academy-intro h2 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.4; letter-spacing: 0; word-break: keep-all; overflow-wrap: anywhere; }
.academy-intro p { font-size: 15px; line-height: 1.75; color: var(--muted); }
.academy-intro .academy-lead { font-size: 18px; line-height: 1.65; color: var(--ink); }
.academy-intro figure { margin: 0; }
.academy-intro img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; border-radius: 20px; }
.academy-intro figcaption { font-size: 12px; color: var(--muted); margin-top: 10px; }
.academy-subhead { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); margin: clamp(48px, 6vw, 72px) 0 20px; }
.academy-how { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.academy-how article { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; }
.academy-how h4, .academy-learn h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.academy-how p { font-size: 14.5px; line-height: 1.75; color: var(--muted); margin: 0; }
.academy-learn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.academy-learn li { background: #eaf5fc; border-radius: 16px; padding: 22px 20px; }
.academy-learn li > span { display: block; font-family: Georgia, 'Yu Mincho', serif; font-size: 28px; line-height: 1; color: var(--blue); margin-bottom: 18px; }
.academy-learn p { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0; }
.academy-grow { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); background: var(--ink); color: #fff; border-radius: 24px; padding: clamp(28px, 4vw, 52px); }
.academy-grow .eyebrow { color: var(--sky); }
.academy-grow h3 { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.2; color: #fff; margin: 14px 0 16px; }
.academy-grow p { color: #c9e2f2; font-size: 14.5px; line-height: 1.75; margin: 0; }
.academy-grow ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.academy-grow li { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 16px; }
.academy-grow h4 { font-size: 16px; font-weight: 700; color: var(--sky); margin: 0 0 6px; }

/* On Production the Academy sits below the team photo, so it shows text only. */
.prod-academy { margin-top: 20px; }
.prod-academy .academy-intro { grid-template-columns: 1fr; }
.prod-academy .academy-intro > div { max-width: 860px; }
.production-more { padding-top: clamp(40px, 5vw, 64px); }

.academy-callout { display: block; margin-top: 26px; padding: 18px 22px; border-radius: 16px; background: #eaf5fc; color: var(--ink); text-decoration: none; }
.academy-callout strong { display: block; font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: 19px; margin-bottom: 6px; }
.academy-callout > span { display: block; font-size: 14px; line-height: 1.6; color: var(--muted); }
.academy-callout em { display: block; margin-top: 10px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--blue); }
.it-support-grid article .text-link { display: inline-block; margin-top: 12px; font-size: 12px; }

@media (max-width: 1100px) { .academy-learn { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .academy-intro, .academy-how, .academy-grow { grid-template-columns: 1fr; }
  .academy-learn { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .academy-callout { transition: transform .5s var(--m-ease), box-shadow .5s var(--m-ease); }
  .academy-callout:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(1, 46, 83, .12); }
  .academy-callout em span[aria-hidden] { display: inline-block; transition: transform .35s var(--m-ease); }
  .academy-callout:hover em span[aria-hidden] { transform: translateX(4px); }
}

/* Sustainability point 08: the circularity / pet food cell, in blue, linking to the Marly & Dan shop. */
.sustain-pillar-circular { scroll-margin-top: 160px; margin: 18px 0; padding: 26px 24px 24px 20px; border-top: 0; border-radius: 16px; background: #eaf5fc; color: var(--ink); text-decoration: none; }
.sustain-circular-copy { display: flex; align-items: flex-start; gap: 20px; }
.sustain-circular-copy img { flex: none; width: 62px; height: auto; display: block; margin-top: 4px; }
.sustain-circular-tag { display: block; font-size: 10px; letter-spacing: .1em; color: var(--blue); margin-bottom: 8px; }
.sustain-pillar-circular em { display: block; margin-top: 12px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--blue); }
@media (max-width: 650px) { .sustain-pillar-circular { padding: 22px 16px 20px 14px; } .sustain-circular-copy img { width: 50px; } }
@media (prefers-reduced-motion: no-preference) {
  .sustain-pillar-circular { transition: transform .5s var(--m-ease), box-shadow .5s var(--m-ease); }
  .sustain-pillar-circular:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(1, 46, 83, .12); }
  .sustain-pillar-circular em span[aria-hidden] { display: inline-block; transition: transform .35s var(--m-ease); }
  .sustain-pillar-circular:hover em span[aria-hidden] { transform: translateX(4px); }
}
/* =====================================================================
   Production lifecycle dial (pc-*) — Oct 2026
   ===================================================================== */
.prod-journey.is-dial { background: linear-gradient(180deg, #f5f9fc, #fff 70%); }
.pc { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; border-top: 1px solid var(--line); }
.pc-dial { position: relative; width: min(calc(100% - 170px), 580px); aspect-ratio: 1; margin: 70px auto 84px; justify-self: center; user-select: none; -webkit-user-select: none; touch-action: none; }
.pc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pc-track { fill: none; stroke: #e6eef4; stroke-width: 46; }
.pc-seg { fill: none; stroke-width: 46; cursor: pointer; transition: stroke .35s, stroke-width .35s; }
.pc-fresh { stroke: #d2eaf8; } .pc-salt { stroke: #bcd3e3; }
.pc-fresh.is-done { stroke: #a9dbf8; } .pc-salt.is-done { stroke: #6aa3c4; }
.pc-fresh.is-now { stroke: #6cc0f2; stroke-width: 54; } .pc-salt.is-now { stroke: #0a638d; stroke-width: 54; }
.pc-seg:hover { filter: brightness(1.04); }
.pc-progress { fill: none; stroke: rgba(255,255,255,.95); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 1000; cursor: grab; }
.pc-ticks line { stroke: #b8cddc; stroke-width: 1.2; } .pc-ticks .pc-tick-major { stroke: #7f9fb6; stroke-width: 2; }
.pc-zone { font: 700 12.5px/1 Arial, 'Hiragino Kaku Gothic ProN', sans-serif; letter-spacing: .32em; fill: #7d9bb0; }
.pc-exit-line { fill: none; stroke: #8fb1c8; stroke-width: 2.2; stroke-dasharray: 4 6; }
.pc-exit-node { fill: #fff; stroke: #0a638d; stroke-width: 3; cursor: pointer; transition: fill .3s; }
.pc-dial.is-exit .pc-exit-node { fill: var(--ink); stroke: var(--sky); }
.pc-knob { position: absolute; z-index: 3; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--ink), 0 8px 20px rgba(1,46,83,.35); cursor: grab; display: grid; place-items: center; transition: box-shadow .2s, transform .2s; }
.pc-knob span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.pc-dial.is-salt .pc-knob span { background: var(--blue); }
.pc-knob:hover, .pc-knob:focus-visible { transform: scale(1.12); outline: none; box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--sky), 0 8px 20px rgba(1,46,83,.35); }
.pc-dial.is-dragging, .pc-dial.is-dragging .pc-knob { cursor: grabbing; }
.pc-core { position: absolute; left: 50%; top: 50%; width: 56%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.pc-fish { height: 130px; display: grid; place-items: center; }
.pc-fish svg { width: 100%; max-width: 250px; overflow: visible; transform: scale(var(--fs, .4)); transition: transform .5s cubic-bezier(.22,.8,.2,1); }
.pc-dial.is-playing .pc-fish svg, .pc-dial.is-dragging .pc-fish svg { transition: transform .12s linear; }
.pc-fish .f-egg circle { fill: #f2875a; stroke: #e46a3d; stroke-width: 1.5; transition: opacity .4s; }
.pc-fish .f-egg .f-egg-eye { fill: #2b2b2b; stroke: none; }
.pc-fish .f-body { transition: opacity .4s; }
/* Fish: colours per stage (back-to-belly gradient and fins). Default = post-smolt. */
.pc-fish { --c-back: #4c6c82; --c-side: #c3d2dc; --c-side2: #e3eaef; --c-belly: #fbfdfe; --c-fin: #7e98a8; }
.pc-fish .g-back { stop-color: var(--c-back); } .pc-fish .g-side { stop-color: var(--c-side); }
.pc-fish .g-side2 { stop-color: var(--c-side2); } .pc-fish .g-belly { stop-color: var(--c-belly); }
.pc-fish stop { transition: stop-color .6s; }
.pc-fish .f-main { fill: url(#pc-fish-body); stroke: #5d7a86; stroke-width: 1.4; }
.pc-fish .f-tail, .pc-fish .f-fin { fill: var(--c-fin); stroke: #5d7a86; stroke-width: 1.2; transition: fill .6s; }
.pc-fish .f-ray { fill: none; stroke: #5d7a86; stroke-width: .8; opacity: .4; }
.pc-fish .f-pec { opacity: .92; }
.pc-fish .f-v { opacity: 0; transition: opacity .5s; }
.pc-fish .f-std, .pc-fish .f-tail-adult { opacity: 1; }
.pc-fish .f-grp { transition: transform .5s cubic-bezier(.22,.8,.2,1); }
.pc-fish .f-eyes { transform-box: fill-box; transform-origin: center; transition: transform .5s; }
.pc-fish .f-yolk { fill: #f2a06e; stroke: #e07a45; stroke-width: 1.2; opacity: 0; transition: opacity .4s; }
.pc-fish .f-parr ellipse { fill: #4a5640; opacity: 0; transition: opacity .6s; }
.pc-fish .f-red circle { fill: #c4633a; opacity: 0; transition: opacity .6s; }
.pc-fish .f-sheen { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: .35; transition: opacity .6s; }
.pc-fish .f-spots g { fill: #1f3647; opacity: 0; transition: opacity .6s; }
.pc-fish .f-line { fill: none; stroke: #6f8d99; stroke-width: 1; opacity: .6; }
.pc-fish .f-gill { fill: none; stroke: #5d7a86; stroke-width: 1.3; }
.pc-fish .f-eye { fill: #0f2230; } .pc-fish .f-eye-hi { fill: #fff; }
.pc-fish[data-phase=egg] .f-body { opacity: 0; }
.pc-fish[data-phase=egg] svg { transform: scale(.62); }
.pc-fish:not([data-phase=egg]) .f-egg { opacity: 0; }
/* Juveniles (alevin, fry, smolt): slender body, deeply forked tail, larger eye; fins follow the slimmer outline. */
.pc-fish:is([data-phase=alevin],[data-phase=fry],[data-phase=smolt]) :is(.f-std, .f-tail-adult) { opacity: 0; }
.pc-fish:is([data-phase=alevin],[data-phase=fry],[data-phase=smolt]) :is(.f-slim, .f-tail-parr) { opacity: 1; }
.pc-fish:is([data-phase=alevin],[data-phase=fry],[data-phase=smolt]) .f-dorsal { transform: translateY(6px); }
.pc-fish:is([data-phase=alevin],[data-phase=fry],[data-phase=smolt]) .f-adi { transform: translateY(3px); }
.pc-fish:is([data-phase=alevin],[data-phase=fry],[data-phase=smolt]) .f-anal { transform: translateY(-2px); }
.pc-fish:is([data-phase=alevin],[data-phase=fry],[data-phase=smolt]) .f-pelv { transform: translateY(-4.5px); }
.pc-fish:is([data-phase=alevin],[data-phase=fry]) .f-eyes { transform: scale(1.25); }
.pc-fish:is([data-phase=alevin],[data-phase=fry]) .f-sheen { opacity: 0; }
/* Alevin: pale and translucent, yolk sac, faint parr marks. */
.pc-fish[data-phase=alevin] { --c-back: #c6cfba; --c-side: #dfe3d4; --c-side2: #e9ebdf; --c-belly: #f5f2e6; --c-fin: #c3c9b6; }
.pc-fish[data-phase=alevin] .f-yolk { opacity: 1; }
.pc-fish[data-phase=alevin] .f-parr ellipse { opacity: .18; }
/* Fry/parr: muted greenish-brown with dark vertical parr marks and small red spots. */
.pc-fish[data-phase=fry] { --c-back: #66704b; --c-side: #9b9f76; --c-side2: #b7b893; --c-belly: #e8e4c9; --c-fin: #a3a684; }
.pc-fish[data-phase=fry] .f-parr ellipse { opacity: .55; }
.pc-fish[data-phase=fry] .f-red circle { opacity: .75; }
/* Smolt: silvering, parr marks fading. */
.pc-fish[data-phase=smolt] { --c-back: #6c8798; --c-side: #cad6de; --c-side2: #e3e9ee; --c-belly: #f8fafb; --c-fin: #93a8b4; }
.pc-fish[data-phase=smolt] .f-parr ellipse { opacity: .13; }
/* Post-smolt onwards: silver with a darker back and spots above the lateral line, more of them as the fish grows. */
.pc-fish:is([data-phase=postsmolt],[data-phase=pregrow],[data-phase=growout]) .f-s1 { opacity: .85; }
.pc-fish:is([data-phase=pregrow],[data-phase=growout]) .f-s2 { opacity: .85; }
.pc-fish[data-phase=growout] .f-s3 { opacity: .85; }
.pc-fish[data-phase=pregrow] { --c-back: #44647a; --c-side: #bccbd6; --c-side2: #dfe7ed; --c-fin: #6f8ea2; }
.pc-fish[data-phase=pregrow] .f-std { opacity: 0; } .pc-fish[data-phase=pregrow] .f-strong { opacity: 1; }
.pc-fish[data-phase=pregrow] .f-dorsal { transform: translateY(-2px); }
.pc-fish[data-phase=pregrow] .f-pelv { transform: translateY(2px); }
.pc-fish[data-phase=pregrow] .f-anal { transform: translateY(1px); }
.pc-fish[data-phase=growout] { --c-back: #3c5a70; --c-side: #b6c7d3; --c-side2: #dce5ec; --c-belly: #fdfefe; --c-fin: #62819a; }
.pc-fish[data-phase=growout] .f-std { opacity: 0; } .pc-fish[data-phase=growout] .f-full { opacity: 1; }
.pc-fish[data-phase=growout] .f-dorsal { transform: translateY(-4px); }
.pc-fish[data-phase=growout] .f-adi { transform: translateY(-1px); }
.pc-fish[data-phase=growout] .f-pelv { transform: translateY(4px); }
.pc-fish[data-phase=growout] .f-anal { transform: translateY(2px); }
.pc-fish.is-exit svg { transform: scale(var(--fs)) translateX(14px); }
.pc-readout { margin: 6px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pc-zone-now { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.pc-month { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-of { font-size: 12px; color: var(--muted); }
html[lang=ja] .pc-zone-now { letter-spacing: .08em; }
.pc-labels { position: absolute; inset: 0; pointer-events: none; }
.pc-label { position: absolute; left: var(--x); top: var(--y); transform: translate(var(--ax), var(--ay)); pointer-events: auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 9px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 12.5px/1.25 Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; white-space: nowrap; cursor: pointer; transition: color .2s, background .2s; }
.pc-label b { font-size: 10.5px; color: #8aa6ba; letter-spacing: .04em; }
.pc-label:hover { color: var(--ink); background: rgba(208,235,251,.6); }
.pc-label[aria-selected=true] { color: #fff; background: var(--ink); }
.pc-label[aria-selected=true] b { color: var(--sky); }
.pc-label:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pc-play { position: absolute; left: 50%; bottom: -62px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 16px 9px 12px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 16px rgba(1,46,83,.08); transition: border-color .2s, background .2s; }
.pc-play:hover { border-color: var(--blue); }
.pc-play svg { width: 16px; height: 16px; fill: var(--ink); }
.pc-play .pc-i-pause { display: none; }
.pc-play[aria-pressed=true] .pc-i-play { display: none; }
.pc-play[aria-pressed=true] .pc-i-pause { display: block; }
.pc-panel { align-self: stretch; padding: 36px 36px 34px; border-left: 1px solid var(--line); background: #fff; display: flex; align-items: center; }
.prod-journey.is-dial .prod-stage { display: block; min-height: 0; width: 100%; animation: pc-in .45s cubic-bezier(.22,.8,.2,1); }
@keyframes pc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.prod-journey.is-dial .prod-stage-plan { display: none; }
.prod-journey.is-dial .prod-stage-photo { position: relative; min-height: 0; margin: 0 0 26px; border-radius: 14px; overflow: hidden; background: #082e47; }
.prod-journey.is-dial .prod-stage-photo img { width: 100%; height: 270px; object-fit: cover; }
.prod-journey.is-dial .prod-stage-photo.eggs img { object-position: center 45%; }
.prod-journey.is-dial .prod-stage-photo figcaption { padding: 34px 18px 13px; font-size: 11.5px; }
.prod-journey.is-dial .prod-stage-copy { padding: 0; }
.prod-journey.is-dial .prod-stage-copy h3 { font-size: clamp(28px, 2.6vw, 38px); }
@media (max-width: 980px) {
  .pc { grid-template-columns: 1fr; }
  .pc-panel { border-left: 0; border-top: 1px solid var(--line); padding: 28px 24px; }
}
@media (max-width: 760px) {
  .pc-dial { width: calc(100% - 64px); margin: 48px auto 64px; }
  .pc-label { font-size: 0; gap: 0; padding: 6px 8px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(1,46,83,.12); }
  .pc-label b { font-size: 11px; color: var(--ink); }
  .pc-label[aria-selected=true] b { color: var(--sky); }
  .pc-core { width: 60%; }
  .pc-fish { height: 84px; }
  .pc-zone { font-size: 13px; }
  .pc-play { bottom: -50px; }
  .prod-journey.is-dial .prod-stage-photo img { height: 210px; }
}
@media (prefers-reduced-motion: reduce) { .pc-fish svg, .pc-seg, .prod-journey.is-dial .prod-stage { transition: none; animation: none; } }

/* About: opening section (Oct 2026) */
.about-lead { padding: clamp(48px, 6vw, 88px) 0; overflow: hidden; }
.about-lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; padding-left: max(6vw, calc((100vw - 1280px) / 2)); }
.about-lead-copy h2 { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.04; margin-bottom: 28px; }
html[lang=ja] .about-lead-copy h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.35; letter-spacing: 0; }
.about-lead-copy p { font-size: 16px; line-height: 1.8; color: var(--muted); max-width: 34em; margin: 0 0 16px; }
.about-lead-copy .about-lead-intro { font-family: Georgia, 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.55; color: var(--ink); margin-bottom: 22px; }
.about-lead-links { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 28px !important; }
.about-lead-links .text-link { margin: 0; }
.about-lead-photo { position: relative; margin: 0; height: clamp(440px, 46vw, 640px); }
.about-lead-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; border-radius: 22px 0 0 22px; }
.about-lead-photo::after { content: ''; position: absolute; inset: 0; border-radius: 22px 0 0 22px; background: linear-gradient(90deg, rgba(1,46,83,.18), transparent 35%), linear-gradient(0deg, rgba(1,46,83,.25), transparent 30%); pointer-events: none; }
.about-profile { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--line); }
.about-profile h2 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 24px; }
.profile-row { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--ink); }
.profile-row > div { padding: 18px 24px 18px 0; border-bottom: 1px solid var(--line); }
.profile-row dt { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.profile-row dd { margin: 0; font-size: 17px; color: var(--ink); }
@media (max-width: 860px) {
  .about-lead-grid { grid-template-columns: 1fr; padding-left: 0; }
  .about-lead-copy { padding: 0 6vw; }
  .about-lead-photo { height: 340px; order: -1; margin-left: 6vw; }
  .profile-row { grid-template-columns: 1fr; }
}

/* Keep stage names legible on small lifecycle dials. */
@media(max-width:760px){.pc-label{font-size:10px;line-height:1.2;max-width:100px;display:flex;gap:4px}.pc-label span{display:inline}.pc-label b{font-size:9px;flex-shrink:0}.pc-dial{width:calc(100% - 88px)}.pc-labels button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}}

/* Centre the chef and salmon in the About opening photograph. */
.about-lead-photo img{object-position:50% 50%}
/* Public business model, between mission/vision and egg-to-plate strategy. */
.home-model{padding:64px 0;background:#fff}.model-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:end;margin-bottom:34px}.model-intro .eyebrow{font-size:10px;color:var(--blue);margin-bottom:17px}.model-intro h2{font-size:clamp(32px,3.4vw,46px);line-height:1.12;margin:0}.model-intro>p{font-size:14px;line-height:1.9;color:var(--muted);margin:0}.model-pillars{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}.model-pillars article{padding:27px 24px 30px;border-right:1px solid var(--line)}.model-pillars article:last-child{border:0}.model-icon{display:grid;place-items:center;width:48px;height:48px;background:var(--light-blue);color:var(--blue);border-radius:50%;margin-bottom:23px}.model-icon svg{width:25px;height:25px}.model-pillars h3{font:400 27px/1.2 Georgia,'Yu Mincho',serif;margin:0 0 17px}.model-pillars p{font-size:13px;line-height:1.85;color:var(--muted);margin:0}.model-insight{padding:28px 32px;background:var(--ink);color:white;margin-top:22px}.model-insight .eyebrow{font-size:10px;letter-spacing:.16em;color:var(--sky);margin-bottom:15px}.model-insight p{font:400 29px/1.4 Georgia,'Yu Mincho',serif;margin:0}.geo-selectors{flex-wrap:wrap}.geo-selector{flex:1;min-width:65px}.geo-city-kyoto strong{transform:translate(14px,-33px)}.geo-kyoto-source{font-size:11px;margin-top:25px}.geo-kyoto-source a{color:var(--blue);text-decoration:underline}
@media(max-width:900px){.model-intro{grid-template-columns:1fr;gap:22px}.model-pillars{grid-template-columns:1fr 1fr}.model-pillars article:nth-child(2){border-right:0}.model-pillars article:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:560px){.home-model{padding:38px 0}.model-pillars article{padding:22px 17px}.model-pillars h3{font-size:23px}.model-pillars p{font-size:12px}.model-icon{width:42px;height:42px;margin-bottom:16px}.model-insight{padding:24px}.model-insight p{font-size:24px}.geo-city-kyoto strong{transform:translate(10px,-27px)}}

/* =====================================================================
   Strategic location map (lm-*), Nov 2026: origin + seven cities + region views
   ===================================================================== */
.lm-section { padding: clamp(48px, 6vw, 88px) 0; }
.lm-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: 30px; }
.lm-intro h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; margin: 0; }
html[lang=ja] .lm-intro h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.4; letter-spacing: 0; }
.lm-intro p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.lm-card { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(1,46,83,.08); }
.lm-map { position: relative; aspect-ratio: 16 / 10; min-height: 380px; overflow: hidden; background: #dcebf4; user-select: none; -webkit-user-select: none; }
.lm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lm-land { fill: #fdfefe; stroke: #93b6cb; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.lm-focus { fill: rgba(213, 76, 60, .14); stroke: #d54c3c; opacity: 0; transition: opacity .4s; }
.lm-focus.is-on { opacity: 1; }
.lm-route-line { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 1.5 2.2; opacity: .75; }
.lm-route-line.is-drawn { animation: lm-draw 1s ease forwards; }
@keyframes lm-draw { from { opacity: 0; } to { opacity: .75; } }
.lm-overlay { position: absolute; inset: 0; }
.lm-city, .lm-home, .lm-local { position: absolute; left: 0; top: 0; will-change: transform; }
.lm-city { width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; }
.lm-dot { position: absolute; left: 15px; top: 15px; width: 14px; height: 14px; border-radius: 50%; background: #2c6f93; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(1,46,83,.35); transition: transform .25s, background .25s; }
.lm-label { position: absolute; white-space: nowrap; font: 700 13px/1 Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; color: var(--ink); background: rgba(255,255,255,.92); padding: 6px 9px; border-radius: 999px; box-shadow: 0 2px 10px rgba(1,46,83,.12); transition: opacity .25s, background .25s, color .25s; }
.lm-side-right .lm-label { left: 36px; top: 10px; }
.lm-side-left .lm-label { right: 36px; top: 10px; }
.lm-side-above .lm-label { left: 22px; bottom: 36px; transform: translateX(-50%); }
.lm-side-below .lm-label { left: 22px; top: 36px; transform: translateX(-50%); }
.lm-city.lm-label-hidden .lm-label { opacity: 0; pointer-events: none; }
.lm-city:hover .lm-label, .lm-city:focus-visible .lm-label { opacity: 1; }
.lm-city:hover .lm-dot { transform: scale(1.2); }
.lm-city[aria-pressed=true] .lm-dot { background: #d54c3c; transform: scale(1.25); }
.lm-city[aria-pressed=true] .lm-label { background: var(--ink); color: #fff; opacity: 1; }
.lm-city:focus-visible { outline: none; }
.lm-city:focus-visible .lm-dot { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--sky); }
.lm-home { padding: 0; border: 0; background: none; cursor: pointer; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 2; }
.lm-home-dot { position: absolute; left: 11px; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 4px solid var(--sky); box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 6px 14px rgba(1,46,83,.4); }
.lm-home-dot::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--ink); opacity: 0; animation: lm-pulse 2.6s ease-out infinite; }
@keyframes lm-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
.lm-home-label { position: absolute; left: 40px; top: 26px; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; background: var(--ink); color: #fff; padding: 7px 11px 8px; border-radius: 10px; box-shadow: 0 6px 16px rgba(1,46,83,.3); text-align: left; }
.lm-home-label strong { font: 700 13px/1.1 Arial, 'Hiragino Kaku Gothic ProN', sans-serif; }
.lm-home-label small { font-size: 10.5px; color: var(--sky); font-weight: 600; letter-spacing: .04em; }
.lm-home[aria-pressed=true] .lm-home-label { background: #d54c3c; }
.lm-home[aria-pressed=true] .lm-home-label small { color: #fff; }
.lm-home:focus-visible { outline: none; }
.lm-home:focus-visible .lm-home-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--blue); }
.lm-local { opacity: 0; transition: opacity .4s; pointer-events: none; }
.lm-map[data-view=chubu] .lm-local { opacity: 1; }
.lm-local-dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #8aa6ba; border: 1.5px solid #fff; }
.lm-local-label { position: absolute; left: 9px; top: -8px; font: 600 11px/1 Arial, 'Hiragino Kaku Gothic ProN', sans-serif; color: #56768b; white-space: nowrap; }
.lm-views { position: absolute; z-index: 3; top: 14px; left: 14px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(1,46,83,.1); }
.lm-views button { border: 0; background: none; border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 700; color: var(--muted); transition: background .2s, color .2s; }
.lm-views button[aria-pressed=true] { background: var(--ink); color: #fff; }
.lm-views button:hover:not([aria-pressed=true]) { color: var(--ink); }
.lm-inset { position: absolute; z-index: 3; right: 14px; bottom: 14px; width: 88px; height: 76px; padding: 4px; background: rgba(255,255,255,.85); border-radius: 10px; box-shadow: 0 4px 14px rgba(1,46,83,.1); }
.lm-inset-view { fill: rgba(213,76,60,.15); stroke: #d54c3c; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lm-panel { padding: 30px 30px 28px; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.lm-region { animation: lm-in .4s cubic-bezier(.22,.8,.2,1); }
@keyframes lm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lm-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
html[lang=ja] .lm-eyebrow { letter-spacing: .06em; }
.lm-selected { margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.lm-selected-label { font-size: 11px; color: var(--muted); }
.lm-selected-name { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: clamp(28px, 2.4vw, 36px); line-height: 1.1; color: var(--ink); }
.lm-copy { font-size: 14px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; }
.lm-metric { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; margin-bottom: 16px; }
.lm-metric-number { font-family: Georgia, 'Yu Mincho', serif; font-size: 30px; line-height: 1.1; color: var(--ink); margin: 0 0 6px; }
.lm-metric-def { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.lm-metric-year { font-size: 11.5px; color: var(--muted); margin: 0; }
.lm-metric-year a { text-decoration: underline; text-underline-offset: 2px; }
.lm-region-cities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.lm-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.lm-chip[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.lm-chip:hover { border-color: var(--blue); }
.lm-panel .text-link { align-self: flex-start; font-size: 12.5px; }
.lm-footnote { font-size: 12px; color: var(--muted); margin: 14px 0 0; max-width: 60em; }
@media (max-width: 980px) {
  .lm-intro { grid-template-columns: 1fr; gap: 14px; }
  .lm-card { grid-template-columns: 1fr; }
  .lm-panel { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .lm-map { aspect-ratio: 1 / 1; min-height: 0; }
  .lm-views { left: 10px; right: 10px; top: 10px; justify-content: space-between; }
  .lm-views button { padding: 7px 9px; font-size: 11px; }
  .lm-label { font-size: 12px; padding: 5px 8px; }
  .lm-inset { width: 66px; height: 58px; }
  .lm-panel { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { .lm-home-dot::after { animation: none; } .lm-route-line.is-drawn { animation: none; } }

/* Homepage (brief v57): figures note, progress feature, people & partners */
.facts-row-3 { grid-template-columns: repeat(3, 1fr) !important; }
.facts-source { font-size: 12px; color: var(--muted); margin: 0; padding: 0 0 26px; }
.home-progress { padding: clamp(64px, 8vw, 110px) 0; background: #f1f7fb; }
.hpr-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.hpr-copy h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; margin-bottom: 18px; }
html[lang=ja] .hpr-copy h2 { line-height: 1.4; letter-spacing: 0; font-size: clamp(28px, 3vw, 42px); }
.hpr-copy p { color: var(--muted); font-size: 16px; line-height: 1.75; margin-bottom: 24px; }
.hpr-media { display: grid; grid-template-columns: 2.2fr 1fr; gap: 14px; align-items: end; }
.hpr-media figure { margin: 0; }
.hpr-media img { width: 100%; height: auto; display: block; border-radius: 14px; object-fit: cover; }
.hpr-main a { position: relative; display: block; }
.hpr-main img { aspect-ratio: 16 / 10; }
.hpr-side img { aspect-ratio: 3 / 4; object-position: center 55%; }
.hpr-play { position: absolute; left: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; background: rgba(1,46,83,.85); display: grid; place-items: center; transition: transform .25s; }
.hpr-play svg { width: 18px; height: 18px; fill: #fff; }
.hpr-main a:hover .hpr-play { transform: scale(1.08); }
.hpr-media figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }
.home-people { padding: clamp(64px, 8vw, 110px) 0; }
.hpe-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.hpe-photo { margin: 0; } .hpe-photo img { width: 100%; height: auto; border-radius: 16px; display: block; }
.hpe-photo figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }
.hpe-copy h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; margin-bottom: 18px; }
html[lang=ja] .hpe-copy h2 { line-height: 1.4; letter-spacing: 0; font-size: clamp(28px, 3vw, 42px); }
.hpe-copy > p { color: var(--muted); font-size: 16px; line-height: 1.75; }
.hpe-links { display: flex; gap: 14px 30px; flex-wrap: wrap; margin: 22px 0 30px; }
.hpe-links .text-link { margin: 0; }
.hpe-logos { display: grid; gap: 16px; border-top: 1px solid var(--line); padding-top: 22px; }
.hpe-logos > div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; }
.hpe-logos span { font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.4; }
.hpe-logos ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hpe-logos img { height: 30px; width: auto; max-width: 130px; object-fit: contain; }
.hpe-logos .logo-tall img { height: 40px; }
.hpe-logos .logo-invert img { filter: brightness(0) saturate(0); opacity: .85; }
.hpe-note { font-size: 12px !important; color: var(--muted); margin-top: 18px; }
.hero .button-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); margin-left: 10px; }
.hero .button-secondary:hover { background: rgba(255,255,255,.12); }
@media (max-width: 900px) { .hpr-grid, .hpe-grid { grid-template-columns: 1fr; } .facts-row-3 { grid-template-columns: 1fr !important; } }
@media (max-width: 600px) { .hpe-logos > div { grid-template-columns: 1fr; gap: 8px; } .hero .button-secondary { margin: 10px 0 0; } }
/* About (brief v57) */
.about-lead-photo figcaption { position: absolute; right: 14px; bottom: 12px; z-index: 1; font-size: 11px; color: #fff; background: rgba(1,30,54,.6); padding: 4px 9px; border-radius: 999px; }
.about-purpose { padding: 0 0 clamp(48px, 6vw, 80px); }
.purpose-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.purpose-pair article { background: #fff; padding: clamp(26px, 3vw, 40px); }
.purpose-pair h3 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; font-family: inherit; }
html[lang=ja] .purpose-pair h3 { letter-spacing: .06em; }
.purpose-pair p { font-family: Georgia, 'Yu Mincho', serif; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; color: var(--ink); margin: 0; }
@media (max-width: 760px) { .purpose-pair { grid-template-columns: 1fr; } }
/* Our farm: key milestones (achievements only) and dated site photography */
.ms-section, .sp-section { padding: clamp(48px, 6vw, 84px) 0 0; }
.sp-section { padding-bottom: clamp(56px, 7vw, 96px); }
.ms-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: 28px; }
.ms-head h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; margin: 0; }
html[lang=ja] .ms-head h2 { line-height: 1.4; letter-spacing: 0; font-size: clamp(28px, 3vw, 42px); }
.ms-head p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.ms-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.ms-list.ms-single { grid-template-columns: 1fr; }
.ms-item { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.ms-single .ms-item { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.ms-photo { margin: 0; height: 100%; } .ms-photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }
.ms-copy { padding: clamp(24px, 3.4vw, 48px); position: relative; }
.ms-copy::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px #d6eefb; margin-bottom: 18px; }
.ms-copy time { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
html[lang=ja] .ms-copy time { letter-spacing: .04em; }
.ms-copy h3 { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; color: var(--ink); margin-bottom: 12px; }
.ms-copy p { color: var(--muted); font-size: 15.5px; line-height: 1.75; margin: 0; }
.sp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.sp-grid figure { margin: 0; }
.sp-grid img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 12px; display: block; background: #e8eef2; }
.sp-grid figcaption { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.sp-grid time { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
.sp-film { position: relative; display: block; }
.sp-play { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(1,46,83,.85); display: grid; place-items: center; }
.sp-play svg { width: 15px; height: 15px; fill: #fff; }
@media (max-width: 760px) { .ms-head { grid-template-columns: 1fr; gap: 12px; } .ms-single .ms-item { grid-template-columns: 1fr; } .ms-photo img { min-height: 220px; } }
/* Our farm: overview photo, explorer card */
.project .project-overview-photo { margin-top: 34px; }
.farm-explorer { padding-top: clamp(40px, 5vw, 64px); }
.farm-explorer-card { position: relative; display: block; border-radius: 20px; overflow: hidden; color: #fff; min-height: 300px; }
.farm-explorer-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,.8,.2,1); }
.farm-explorer-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,30,54,.88), rgba(1,30,54,.35) 60%, rgba(1,30,54,.1)); }
.farm-explorer-card:hover img { transform: scale(1.03); }
.farm-explorer-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; max-width: 520px; padding: clamp(28px, 4vw, 56px); }
.farm-explorer-copy .eyebrow { color: var(--sky); margin: 0; }
.farm-explorer-copy strong { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; }
.farm-explorer-copy > span:not(.eyebrow) { color: #d6e8f4; font-size: 15px; line-height: 1.7; }
.farm-explorer-go { width: 48px; height: 48px; border-radius: 50%; background: var(--sky); color: var(--ink) !important; display: grid; place-items: center; font-size: 20px !important; margin-top: 10px; transition: transform .25s; }
.farm-explorer-card:hover .farm-explorer-go { transform: translateX(4px); }
.project .partner-related { padding-top: 0; }
/* Technology (brief v57): summaries lead each tab, single portfolio note */
.it-control-2 { grid-template-columns: 1fr 1fr !important; }
.it-support-2 { grid-template-columns: 1fr 1fr !important; }
.it-portfolio-note { font-size: 12.5px; line-height: 1.6; color: var(--muted); background: #f1f7fb; border-left: 3px solid var(--blue); padding: 12px 16px; margin: 22px 0 0; }
@media (max-width: 760px) { .it-control-2, .it-support-2 { grid-template-columns: 1fr !important; } }
.sustain-pillars { padding-top: clamp(40px, 5vw, 64px); }
.sustain-detail { font-size: 13px !important; color: var(--ink) !important; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.career-mie { padding: clamp(48px, 6vw, 80px) 0; }
.career-pair article { max-width: 46em; }
.career-pair p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.team-section-intro p, .team-group-text p, .team-group-real p { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 44em; }
.team-group-text { padding: 10px 0 40px; }
.team-group-real { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding-bottom: 40px; }
.team-group-photo-real { margin: 0; } .team-group-photo-real img { width: 100%; height: auto; border-radius: 14px; display: block; }
.team-group-photo-real figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) { .team-group-real { grid-template-columns: 1fr; } }
.press-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
/* Press reader dialog (News): the release text in a centred sheet, styled like the PDF template. */
.press-reader { padding: 0; border: 0; border-radius: 14px; width: min(760px, 94vw); max-width: 94vw; max-height: 90dvh; overflow: hidden; color: var(--ink); background: #fff; box-shadow: 0 30px 80px rgba(0,18,36,.45); }
.press-reader[open] { display: flex; flex-direction: column; }
.press-reader::backdrop { background: rgba(0,17,30,.72); }
html:has(.press-reader[open]) { overflow: hidden; }
.press-reader-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 28px; background: #062f4d; color: #fff; }
.press-reader-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #bdd7e7; }
.press-reader-close { flex: none; border: 1px solid #6a8ba1; border-radius: 6px; background: none; color: #fff; font-size: 12px; padding: 7px 14px; cursor: pointer; }
.press-reader-close:hover { background: #214c67; }
.press-reader-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 30px 40px 10px; }
.press-reader .press-reader-body h2 { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: 28px; line-height: 1.3; white-space: pre-line; margin: 0 0 12px; }
.press-reader-body h3 { font-size: 15px; color: #062f4d; margin: 26px 0 8px; }
.press-reader-body p { font-size: 15px; line-height: 1.8; margin: 0 0 14px; }
.press-reader-body .press-reader-sub { font-size: 16px; line-height: 1.6; color: var(--muted); margin-bottom: 24px; }
.press-reader-body .press-reader-detail { margin-bottom: 4px; }
.press-reader-body .press-reader-note { font-size: 13px; color: var(--muted); }
.press-reader-body .press-reader-contact { font-size: 14px; line-height: 1.6; }
.press-reader-body a { color: var(--blue); }
.press-reader-foot { padding: 14px 40px 18px; border-top: 1px solid var(--line); }
.press-reader-foot .text-link { margin: 0; }
@media (max-width: 760px) {
  .press-reader { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .press-reader-top { padding: 12px 18px; }
  .press-reader-body { padding: 22px 20px 6px; }
  .press-reader .press-reader-body h2 { font-size: 22px; white-space: normal; }
  .press-reader-foot { padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
}
.press-actions .text-link { margin: 0; }

/* Navigation (review v58): six main items, compact Careers utility link */
header .links { gap: 26px; font-size: 13px; }
html[lang=ja] header .links { gap: 22px; font-size: 12.5px; }
header .nav-utility-mobile { display: none; }
header .nav-careers { flex: none; font-size: 12px; font-weight: 600; color: #cfe2ee; padding: 5px 0 5px 16px; border-left: 1px solid rgba(255,255,255,.25); white-space: nowrap; }
header .nav-careers:hover, header .nav-careers[aria-current=page] { color: var(--sky); }
@media (max-width: 1100px) and (min-width: 901px) { header .links { gap: 16px; font-size: 12px; } html[lang=ja] header .links { gap: 13px; font-size: 11.5px; } header .nav-careers { padding-left: 12px; } }
@media (max-width: 900px) {
  header .nav-careers { display: none; }
  header .links.open .nav-utility-mobile { display: flex; flex-direction: column; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); }
  header .nav-utility-mobile a { display: block; padding: 11px 0; font-size: 13px; color: #cfe2ee; }
}
.footer-top.footer-top-4 { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
@media (max-width: 760px) { .footer-top.footer-top-4 { grid-template-columns: 1fr 1fr; } .footer-top.footer-top-4 > div:first-child { grid-column: 1 / -1; } }
/* Our farm progress (review v58): original rail, text-only card for steps without a photograph */
.tl-card.tl-card-text { background: linear-gradient(135deg, var(--ink), #0a4a73); color: #fff; }
.tl-card.tl-card-text .tl-date { color: var(--sky); }
.tl-card.tl-card-text h3 { color: #fff; }
.tl-card.tl-card-text p { color: #d6e8f4; }
.tl-card.tl-card-text .text-link { color: var(--sky); border-color: var(--sky); }
.sp-section { padding: clamp(36px, 5vw, 60px) 0 clamp(48px, 6vw, 80px); }
.sp-details { border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.sp-details summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 20px 24px; font-weight: 700; color: var(--ink); }
.sp-details summary::-webkit-details-marker { display: none; }
.sp-details summary::after { content: '+'; margin-left: auto; font-size: 20px; color: var(--blue); }
.sp-details[open] summary::after { content: '–'; }
.sp-details summary small { font-weight: 400; color: var(--muted); font-size: 13px; }
.sp-details .sp-grid { padding: 4px 24px 24px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* Careers real photograph (638 × 418): modest panel, natural aspect */
.career-photo-real { margin: 0; justify-self: center; max-width: 638px; width: 100%; }
.career-photo-real img { width: 100%; height: auto !important; aspect-ratio: 638 / 418; object-fit: cover; border-radius: 14px; display: block; }
.career-photo-real figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }
.close-team { object-position: center 35%; }
.close-grid { grid-template-columns: 1.6fr 1fr 1fr !important; }
.close-sus { background: #f1f7fb !important; }
@media (max-width: 960px) { .close-grid { grid-template-columns: 1fr !important; } }
.hpe-photo img { max-height: 560px; object-fit: cover; object-position: center 30%; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.pc-note { font-size: 12.5px; color: var(--muted); margin-top: 14px !important; margin-bottom: 0; }
.it-chip-inline { display: inline-block; margin: 22px 0 8px; font-size: 12px; }
.it-reference-copy .it-chip { display: inline-block; margin-bottom: 8px; }

/* Strategic map — night style (Nov 2026 refinement) */
.lm-card { background: #fff; border: 0; box-shadow: 0 30px 70px rgba(1,30,54,.18); }
.lm-map { background: #062a45; aspect-ratio: 16 / 10.5; }
.lm-land-shadow { fill: #000; opacity: .35; transform: translate(0, 3px); filter: url(#lm-glow); }
.lm-land { fill: url(#lm-land-fill); stroke: rgba(144,208,247,.55); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.lm-routes path { fill: none; stroke: rgba(144,208,247,.28); stroke-dasharray: 2 3; stroke-linecap: round; }
.lm-route-line { stroke: var(--sky); opacity: .95; stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(144,208,247,.8)); }
@keyframes lm-draw { from { opacity: 0; } to { opacity: .95; } }
.lm-route-dot { fill: #fff; opacity: 0; filter: drop-shadow(0 0 4px #fff); }
.lm-route-dot.is-on { opacity: 1; }
.lm-focus { fill: rgba(232,92,74,.18); stroke: #ff7a66; }
/* city markers */
.lm-dot { left: 16px; top: 16px; width: 12px; height: 12px; background: var(--sky); border: 2px solid #062a45; box-shadow: 0 0 0 3px rgba(144,208,247,.25), 0 0 14px rgba(144,208,247,.7); }
.lm-city:hover .lm-dot { transform: scale(1.3); }
.lm-city[aria-pressed=true] .lm-dot { background: #ff7a66; box-shadow: 0 0 0 3px rgba(255,122,102,.3), 0 0 16px rgba(255,122,102,.8); }
.lm-label { background: none; box-shadow: none; color: #e6f2fa; font-weight: 600; padding: 4px 6px; text-shadow: 0 1px 6px rgba(0,0,0,.6); letter-spacing: .01em; }
.lm-primary .lm-label { font-weight: 700; color: #fff; font-size: 14px; }
.lm-city[aria-pressed=true] .lm-label { background: #fff; color: var(--ink); text-shadow: none; padding: 6px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.lm-city:focus-visible .lm-dot { box-shadow: 0 0 0 3px #062a45, 0 0 0 6px var(--sky); }
/* origin */
.lm-home-dot { background: #fff; border: 5px solid var(--sky); box-shadow: 0 0 0 5px rgba(144,208,247,.25), 0 0 26px rgba(144,208,247,.9); }
.lm-home-dot::after { border-color: var(--sky); }
.lm-home-label { background: var(--sky); color: var(--ink); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.lm-home-label small { color: #0a4a73; }
.lm-home[aria-pressed=true] .lm-home-label { background: #fff; }
.lm-home[aria-pressed=true] .lm-home-label small { color: var(--blue); }
/* region and local labels */
.lm-region-label { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; font: 700 11px/1 Arial, 'Hiragino Kaku Gothic ProN', sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(144,208,247,.75); white-space: nowrap; translate: -50% -50%; transition: opacity .4s; }
html[lang=ja] .lm-region-label { letter-spacing: .12em; }
.lm-map:not([data-view=all]) .lm-region-label { opacity: 0; }
.lm-map[data-view=chubu] [data-region-label=chubu], .lm-map[data-view=kansai] [data-region-label=kansai], .lm-map[data-view=tokyo] [data-region-label=tokyo] { opacity: .9; }
.lm-local { opacity: 0; }
.lm-local-dot { background: rgba(144,208,247,.6); border-color: #062a45; }
.lm-local-label { color: rgba(214,232,244,.8); }
/* controls on dark */
.lm-views { background: rgba(3,25,43,.7); box-shadow: 0 6px 18px rgba(0,0,0,.25); border: 1px solid rgba(144,208,247,.2); }
.lm-views button { color: rgba(214,232,244,.8); }
.lm-views button[aria-pressed=true] { background: var(--sky); color: var(--ink); }
.lm-views button:hover:not([aria-pressed=true]) { color: #fff; }
.lm-inset { background: rgba(3,25,43,.75); border: 1px solid rgba(144,208,247,.2); box-shadow: none; }
.lm-inset path { fill: #2b6d96; }
.lm-inset-view { fill: rgba(255,122,102,.25); stroke: #ff7a66; }
/* panel */
.lm-panel { padding: 34px 32px; background: linear-gradient(180deg, #fff, #f5f9fc); }
.lm-regions-list { display: flex; flex-direction: column; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.lm-regions-title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
html[lang=ja] .lm-regions-title { letter-spacing: .04em; }
.lm-region-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 12px 14px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.lm-region-row:hover { border-color: var(--blue); transform: translateX(2px); box-shadow: 0 6px 16px rgba(1,46,83,.08); }
.lm-region-row strong { display: block; font-size: 14px; color: var(--ink); }
.lm-region-row small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.lm-region-row em { font-style: normal; font-family: Georgia, 'Yu Mincho', serif; font-size: 19px; color: var(--ink); white-space: nowrap; }
.lm-regions-year { font-size: 11px; color: var(--muted); margin-top: 4px; }
.lm-footnote { margin-top: 16px; }
@media (max-width: 600px) { .lm-map { aspect-ratio: 1 / 1.05; } .lm-primary .lm-label { font-size: 13px; } .lm-region-label { font-size: 10px; } }
.lm-map { aspect-ratio: auto; min-height: clamp(500px, 44vw, 640px); }
@media (max-width: 980px) { .lm-map { min-height: 0; aspect-ratio: 16 / 11; } }
@media (max-width: 600px) { .lm-map { aspect-ratio: 1 / 1.05; } }
@media (max-width: 600px) { .lm-region-label { display: none; } }
/* 901–1180 px: two tidy rows — logo, Careers and language on top; the seven menu items below. */
@media (max-width: 1180px) and (min-width: 901px) {
  header .nav { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0 18px; height: auto; }
  header .brand { grid-column: 1; grid-row: 1; width: 202px; padding: 12px 0; }
  header .nav-careers { grid-column: 2; grid-row: 1; }
  header .lang { grid-column: 3; grid-row: 1; margin-left: 0; }
  header .links, html[lang=ja] header .links { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; gap: 0 12px; width: 100%; border-top: 1px solid #355b7b; padding: 0 0 4px; font-size: 13px; }
  html[lang=ja] header .links { font-size: 12.5px; }
  header .links > a, header .nav-project-heading > a { padding: 10px 0 8px; }
}

/* Strategic map — balanced palette: charcoal sea, warm stone land, sand accents; brand sky only for Tsu */
.lm-map { background: #132634; }
.lm-land { stroke: rgba(236,224,198,.45); }
.lm-routes path { stroke: rgba(236,220,186,.32); }
.lm-route-line { stroke: #f1e3c2; opacity: .95; filter: drop-shadow(0 0 4px rgba(241,227,194,.55)); }
.lm-route-dot { fill: #fffaf0; filter: drop-shadow(0 0 4px rgba(255,250,240,.9)); }
.lm-dot { background: #efe4cc; border-color: #1a2a33; box-shadow: 0 0 0 3px rgba(239,228,204,.18), 0 0 10px rgba(239,228,204,.45); }
.lm-label { color: #f2ece0; }
.lm-primary .lm-label { color: #fff; }
.lm-region-label { color: rgba(226,206,168,.78); }
.lm-local-dot { background: rgba(226,206,168,.7); border-color: #1a2a33; }
.lm-local-label { color: rgba(236,226,206,.8); }
.lm-views { background: rgba(16,28,36,.78); border-color: rgba(236,224,198,.18); }
.lm-views button { color: rgba(236,229,214,.8); }
.lm-inset { background: rgba(16,28,36,.8); border-color: rgba(236,224,198,.18); }
.lm-inset path { fill: #6b7a74; }
.lm-city:focus-visible .lm-dot { box-shadow: 0 0 0 3px #1a2a33, 0 0 0 6px #efe4cc; }
/* Map: trip time and distance from Tsu */
.lm-trip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.lm-trip > div { background: #f3efe6; border-radius: 12px; padding: 12px 14px; }
.lm-trip-label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.lm-trip strong { font-family: Georgia, 'Yu Mincho', serif; font-weight: 400; font-size: 26px; color: var(--ink); }
.lm-trip-chip { position: absolute; left: 0; top: 0; z-index: 2; translate: -50% -50%; white-space: nowrap; font: 700 12px/1 Arial, 'Hiragino Kaku Gothic ProN', sans-serif; color: #2a2620; background: #f1e3c2; padding: 7px 11px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.35); opacity: 0; pointer-events: none; }
.lm-trip-chip.is-on { animation: lm-chip .5s ease .2s forwards; }
@keyframes lm-chip { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .lm-trip-chip.is-on { animation: none; opacity: 1; } }
@media (max-width: 600px) { .lm-trip strong { font-size: 22px; } .lm-trip-chip { font-size: 11px; padding: 6px 9px; } }
/* Map hit areas shrink where cities sit close together (no zoom on selection) */
.lm-city { width: var(--hit, 44px); height: var(--hit, 44px); margin: calc(var(--hit, 44px) / -2) 0 0 calc(var(--hit, 44px) / -2); }
.lm-city.lm-primary, .lm-city[aria-pressed=true] { z-index: 2; }
.lm-dot { left: calc(50% - 6px); top: calc(50% - 6px); }
.lm-side-right .lm-label { left: calc(50% + 12px); top: calc(50% - 12px); }
.lm-side-left .lm-label { right: calc(50% + 12px); left: auto; top: calc(50% - 12px); }
.lm-side-above .lm-label { left: 50%; bottom: calc(50% + 12px); top: auto; }
.lm-side-below .lm-label { left: 50%; top: calc(50% + 12px); }
.lm-trip-chip { translate: -50% -160%; }
@media (max-width: 600px) { .lm-trip-chip { display: none; } }
.lm-trip-chip.is-below { translate: -50% 70%; }
/* Chip above all markers; lighter warm land needs slightly stronger label shadows */
.lm-trip-chip, .lm-trip-chip.is-below { z-index: 6; translate: -50% -50%; }
.lm-land { stroke: rgba(245,236,214,.55); }
.lm-label { text-shadow: 0 1px 3px rgba(20,16,10,.75), 0 0 10px rgba(20,16,10,.45); }
.lm-region-label { color: rgba(250,238,210,.9); text-shadow: 0 1px 4px rgba(20,16,10,.55); }
.lm-local-label { color: #fbf3e2; text-shadow: 0 1px 3px rgba(20,16,10,.7); }
.lm-routes path { stroke: rgba(250,240,215,.45); }
.lm-inset path { fill: #8a7d6a; }
/* 10,000 tonnes of salmon as the lead figure */
.facts-row .fact-lead dt { font-size: clamp(44px, 4.6vw, 68px); color: var(--blue); }
.facts-row .fact-lead dd { font-weight: 700; color: var(--ink); }
html[lang=ja] h1, html[lang=ja] h2, html[lang=ja] h3 { word-break: keep-all; overflow-wrap: anywhere; }
/* Technology tabs: short labels that always fit; wrap rather than scroll on narrower screens */
.investor-tech .tech-tabs { flex-wrap: wrap; overflow: visible; gap: 0 28px; }

/* Former soulofjapan.co.jp pages rebuilt on this site (3 November 2026). */
.page-grid.page-grid-single { grid-template-columns: minmax(0, 560px); }
.press-archive { padding-top: 10px; }
.privacy-policy { padding-top: 40px; padding-bottom: 70px; }
.privacy-policy > * { max-width: 820px; }
.privacy-policy .privacy-lead { font-size: 16px; line-height: 1.8; color: var(--ink); margin-bottom: 36px; }
.privacy-policy article { padding: 24px 0; border-top: 1px solid var(--line); }
.privacy-policy h2 { font-size: 20px; margin-bottom: 12px; }
.privacy-policy p, .privacy-policy li, .privacy-policy dd { font-size: 14px; line-height: 1.8; color: var(--muted); }
.privacy-policy ul { padding-left: 1.2em; margin: 8px 0 0; }
.privacy-policy dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 12px 0 0; }
.privacy-policy dt { font-size: 14px; font-weight: 600; color: var(--ink); }
.privacy-policy dd { margin: 0; }
.privacy-date { margin-top: 28px; font-size: 13px; color: var(--ink); }
.career-vacancies { padding: clamp(56px, 7vw, 90px) 0; scroll-margin-top: 90px; }
.career-vacancies h2 { font-size: 38px; margin-bottom: 12px; }
.vac-intro { color: var(--muted); font-size: 16px; margin-bottom: 34px; }
.vac-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }
.vac-group { border-top: 1px solid var(--line); padding-top: 18px; }
.vac-group h3 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.vac-group ul { list-style: none; padding: 0; margin: 0; }
.vac-group li { font-size: 15px; line-height: 1.5; color: var(--ink); padding: 7px 0; }
.vac-group li a { font-size: 13px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.career-cta .page-note a { color: inherit; text-decoration: underline; }
@media (max-width: 900px) { .vac-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .vac-groups { grid-template-columns: 1fr; } .privacy-policy dl { grid-template-columns: 1fr; gap: 2px; } .privacy-policy dd { margin-bottom: 10px; } }
html[lang=ja] .privacy-policy h2 { font-size: 19px; line-height: 1.5; letter-spacing: .02em; }
.contact-address { margin: 12px 0 0; font-size: 14px; } .contact-address a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
/* Home business model: intro paragraph under the heading, as on the Technology tabs. */
.model-intro.model-intro-stack { grid-template-columns: 1fr; }
.model-intro-stack .model-intro-text { max-width: 46em; margin: 18px 0 0; font-size: 15px; line-height: 1.85; color: var(--muted); }
/* Business-model cards: titles take two lines' height so the texts below line up across the row. */
@media (min-width: 901px) { .model-pillars h3 { min-height: 2.4em; } }
/* Homepage hero: shorter, so the start of the next section shows on first view. */
@media (min-width: 761px) { .home .hero { height: calc(100svh - 270px); min-height: 520px; max-height: 680px; } }
/* Home: tighter join between egg to plate and Progress in Mie (same background, so the gap read as empty space). */
.home .home-how { padding-bottom: clamp(36px, 4vw, 52px); }
.home .home-progress { padding-top: clamp(36px, 4vw, 52px); }
/* Partners tabs: intro text under the title, as on the Technology tabs. */
.partners-content .partners-intro { grid-template-columns: 1fr; align-items: start; }
.partners-content .partners-intro p { max-width: 46em; margin-top: 4px; font-size: 15px; line-height: 1.8; }
/* PST's original colour logo (wide format) in the homepage partner logo row. */
.hpe-logos .logo-pst img { height: 26px; max-width: 160px; }
/* Our farm: every milestone card takes the same height, so the photo below stays still while hovering the timeline. */
@media (min-width: 761px) { .project-main .tlh-panel .tl-card { min-height: 280px; } .project-main .tlh-panel .tl-card-text { display: flex; flex-direction: column; justify-content: center; } }
/* Our farm timeline: pause/play control for the automatic rotation. */
.tl-autoplay { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 14px 0 0 2px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--blue); font-size: 10px; line-height: 1; cursor: pointer; }
.tl-autoplay:hover { border-color: var(--blue); }
.tl-autoplay:focus-visible { outline: 2px solid #368cbd; outline-offset: 3px; }

/* Our farm: site photographs as a single-picture slideshow with a mini timeline on the image. */
.sp-section { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(56px, 7vw, 90px); }
.sp-head { margin-bottom: 22px; }
.sp-head h2 { font-size: clamp(28px, 2.6vw, 36px); margin: 0 0 8px; }
.sp-head p { margin: 0; color: var(--muted); font-size: 15px; }
.sp-show { position: relative; border-radius: 14px; overflow: hidden; background: #0b1d27; }
.sp-stage { position: relative; aspect-ratio: 16 / 9; }
.sp-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.sp-slide.is-active { opacity: 1; z-index: 1; }
.sp-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-slide .sp-film { display: block; position: relative; height: 100%; }
.sp-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 28px 96px; background: linear-gradient(rgba(5, 15, 22, 0), rgba(5, 15, 22, .55) 35%, rgba(5, 15, 22, .9)); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.sp-slide figcaption time { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.sp-slide figcaption span { display: block; max-width: 52em; font-size: 15px; line-height: 1.55; }
.sp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-start; gap: 18px; padding: 0 28px 20px; }
.sp-track { position: relative; flex: 1; display: grid; grid-template-columns: repeat(var(--sp-count), 1fr); list-style: none; margin: 0; padding: 0; }
.sp-track::before, .sp-track::after { content: ""; position: absolute; top: 6px; left: calc(50% / var(--sp-count)); height: 2px; }
.sp-track::before { right: calc(50% / var(--sp-count)); background: rgba(255, 255, 255, .3); }
.sp-track::after { width: calc((100% - 100% / var(--sp-count)) * var(--sp-progress, 0)); background: var(--sky); transition: width .9s ease; }
.sp-dot { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.sp-dot-mark { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background .3s, box-shadow .3s; }
.sp-dot.is-past .sp-dot-mark { background: var(--sky); }
.sp-dot.is-active .sp-dot-mark { background: #fff; box-shadow: 0 0 0 4px rgba(126, 200, 240, .45); }
.sp-dot-date { font-size: 11px; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.sp-dot.is-active .sp-dot-date { color: #fff; font-weight: 600; }
.sp-dot:hover .sp-dot-mark { background: #fff; }
.sp-dot:focus-visible, .sp-toggle:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.sp-toggle { flex: none; width: 30px; height: 30px; margin-top: -8px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgba(5, 15, 22, .35); color: #fff; font-size: 10px; line-height: 1; cursor: pointer; }
.sp-toggle:hover { background: rgba(255, 255, 255, .15); }
@media (max-width: 760px) {
  .sp-stage { aspect-ratio: 4 / 3; }
  .sp-slide figcaption { padding: 50px 16px 84px; }
  .sp-slide figcaption span { font-size: 13px; }
  .sp-bar { padding: 0 16px 16px; gap: 10px; }
  .sp-dot-date { display: none; }
  .sp-dot.is-active .sp-dot-date { display: block; }
}
@media (prefers-reduced-motion: reduce) { .sp-slide, .sp-track::after { transition: none; } }
.sp-slide .sp-play { left: 50%; top: 42%; bottom: auto; width: 68px; height: 68px; transform: translate(-50%, -50%); background: rgba(1, 46, 83, .8); box-shadow: 0 0 0 6px rgba(255, 255, 255, .18); }
.sp-slide .sp-play svg { width: 24px; height: 24px; }
.sp-slide .sp-film:hover .sp-play { background: rgba(1, 46, 83, .95); }
/* Our farm: tighter join between the timeline/overview block and the site-photo slideshow. */
body.project .project-layout { padding-bottom: 24px; }
#site-photographs.sp-section { padding-top: 32px; }
/* Our farm: breathing room between the Partners line and the footer. */
body.project .partner-related { margin-bottom: 56px; }
/* Our farm: tighter spacing around the slideshow and above the timeline. */
#site-photographs.sp-section { padding-bottom: 36px; }
body.project .partner-related { margin-top: 0; }
body.project .project-layout { padding-top: 18px; }
.sp-head h2 { margin-bottom: 0; }
/* Slideshow caption: date on its own line, description below at full width. The description always reserves two lines, so the date sits at the same height on every picture. */
.sp-slide figcaption time { display: block; white-space: nowrap; }
.sp-slide figcaption span { display: block; max-width: none; min-height: 3.1em; }
/* Slideshow caption sits just above the mini timeline. */
.sp-slide figcaption { padding-bottom: 74px; }
.sp-slide figcaption span { min-height: 1.55em; }
@media (max-width: 760px) { .sp-slide figcaption { padding-bottom: 64px; } }
/* Lifecycle dial on phones and small tablets: stage labels become numbered chips (01-07) around the dial; the selected
   stage's name is the heading just below, and the full name stays available to screen readers. The chips sit a little
   further out so the knob never covers them, and the play button moves down clear of chip 05. */
@media (max-width: 760px) {
  .pc-dial { width: min(calc(100% - 72px), 440px); margin-bottom: 104px; }
  .pc-label { width: auto; max-width: none; min-width: 32px; height: 32px; padding: 0 8px; justify-content: center; align-items: center; border-radius: 999px;
    transform: translate(var(--ax), var(--ay)) translate(calc(var(--cos, 0) * 6px), calc(var(--sin, 0) * 6px)); }
  .pc-label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pc-label b { font-size: 12px; }
  .pc-play { bottom: -86px; white-space: nowrap; }
}
/* Lifecycle dial centre on phones and small tablets: fish and month readout scale with the dial so they stay inside the ring.
   The freshwater/saltwater line is already written along the ring, so it only shows for "To market". */
@media (max-width: 760px) {
  .pc-dial { container-type: inline-size; }
  .pc-fish { height: min(27cqw, 110px); }
  .pc-readout { margin-top: 1cqw; gap: 0; }
  .pc-month { font-size: clamp(15px, 9.5cqw, 30px); }
  .pc-of { font-size: clamp(10px, 5.2cqw, 13px); line-height: 1.25; }
  .pc-zone-now { font-size: clamp(9px, 4.6cqw, 11px); letter-spacing: .12em; }
  .pc-readout:has(.pc-month:not(:empty)) .pc-zone-now { display: none; }
}
/* Stage panel under the dial (phones and tablets): building label and stage title come first, right below the dial,
   then the photo, then the description and figures. */
@media (max-width: 980px) {
  .prod-journey.is-dial .prod-stage:not([hidden]) { display: flex; flex-direction: column; }
  .prod-journey.is-dial .prod-stage-copy { display: contents; }
  .prod-journey.is-dial .prod-stage-copy > * { order: 4; }
  .prod-journey.is-dial .prod-stage-copy > .eyebrow { order: 1; }
  .prod-journey.is-dial .prod-stage-copy > h3 { order: 2; margin-bottom: 18px; }
  .prod-journey.is-dial .prod-stage-photo { order: 3; }
}