/* =========================================================
   豊岡情報センター リニューアルサイト — Design System
   ========================================================= */

:root{
  --bg:            #fbfaf8;
  --bg-panel:      #f2efe9;
  --bg-dark:       #12110f;
  --bg-dark-panel: #1c1a17;
  --ink:           #15130f;
  --ink-soft:      #5c584f;
  --ink-faint:     #928d80;
  --line:          #e2ddd2;
  --line-soft:     #ece8de;
  --accent:        #ff5a1f;
  --accent-ink:    #ffffff;
  --accent-soft:   #ffe4d6;
  --white:         #ffffff;

  --font-display: "Archivo", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body:    "Zen Kaku Gothic New", "Noto Sans JP", "Inter", sans-serif;
  --font-mono:    "Space Mono", "Archivo", monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 10vw, 148px);
  --radius: 2px;

  color-scheme: light;
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.01em;
  text-wrap:balance;
}

.wrap{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin-bottom:22px;
}
.eyebrow::after{
  content:"";
  height:1px;
  width:56px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

.section{ padding-block:var(--section-y); }
.section--alt{ background:var(--bg-panel); }
.section--dark{ background:var(--bg-dark); color:#f4f1ea; }
.section--dark .ink-soft{ color:#a8a296; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:56px;
  flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(28px,3.4vw,44px); }
.section-head .en{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--ink-faint);
  text-align:right;
  line-height:1.7;
}
.section--dark .section-head .en{ color:#6f6a5e; }

.lede{
  font-size:clamp(16px,1.6vw,19px);
  color:var(--ink-soft);
  max-width:56ch;
}
.section--dark .lede{ color:#c9c4b8; }

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  border-radius:1px;
  transition:transform .25s ease, background .25s ease;
}
.btn:hover{ background:#e64a12; transform:translateY(-2px); }
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn--ghost:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.section--dark .btn--ghost{ border-color:#3a372f; color:#f4f1ea; }
.section--dark .btn--ghost:hover{ background:#f4f1ea; color:var(--bg-dark); }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:700;
  font-size:14.5px;
  color:var(--ink);
  padding-bottom:2px;
  border-bottom:1px solid var(--line);
  transition:gap .2s ease, border-color .2s ease, color .2s ease;
}
.link-arrow svg{ width:16px; height:16px; flex:none; transition:transform .2s ease; }
.link-arrow:hover{ gap:14px; border-color:var(--accent); color:var(--accent); }
.link-arrow:hover svg{ transform:translateX(2px); }
.section--dark .link-arrow{ color:#f4f1ea; border-color:#3a372f; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:80;
  background:rgba(251,250,248,.86);
  backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:15.5px;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.brand .mark{
  width:34px; height:34px; flex:none;
  border-radius:3px;
  background:var(--ink);
  position:relative;
}
.brand .mark svg{ position:absolute; inset:0; margin:auto; width:19px; height:19px; }
.logo-tj{ height:34px; width:auto; flex:none; display:block; }
.brand small{
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:10.5px;
  color:var(--ink-faint);
  letter-spacing:.02em;
}

.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  position:relative;
  padding:10px 15px;
  font-size:14px;
  font-weight:700;
  color:var(--ink-soft);
  transition:color .2s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--ink); }
.main-nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:15px; right:15px; bottom:5px;
  height:2px;
  background:var(--accent);
}

.header-side{ display:flex; align-items:center; gap:22px; }
.header-tag{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--ink-faint);
  text-align:right;
  line-height:1.5;
  white-space:nowrap;
}
.header-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px;
  background:var(--ink);
  color:var(--white);
  font-size:13.5px;
  font-weight:700;
  border-radius:1px;
  white-space:nowrap;
  transition:background .2s ease;
}
.header-cta:hover{ background:var(--accent); }

.nav-toggle{
  display:none;
  width:42px; height:42px;
  flex:none;
  border:1px solid var(--line);
  align-items:center;
  justify-content:center;
  border-radius:2px;
  background:var(--white);
}
.nav-toggle span{
  display:block; position:relative; width:18px; height:12px;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";
  position:absolute; left:0; right:0; height:1.6px;
  background:var(--ink);
  transition:transform .25s ease, top .25s ease, opacity .25s ease;
}
.nav-toggle span::before{ top:0; }
.nav-toggle span::after{ top:10px; }
.nav-toggle[aria-expanded="true"] span::before{ top:5px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:5px; transform:rotate(-45deg); }

.mobile-nav{
  display:none;
  position:fixed;
  inset:76px 0 0 0;
  background:var(--bg);
  z-index:70;
  padding:8px var(--gutter) 40px;
  overflow-y:auto;
}
.mobile-nav.is-open{ display:block; }
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:19px 2px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--font-display);
  font-size:21px;
  font-weight:800;
}
.mobile-nav .header-cta{
  display:flex; justify-content:center;
  margin-top:26px;
  padding:16px;
  font-size:15px;
}
.mobile-nav .mob-info{
  margin-top:30px;
  font-size:13px;
  color:var(--ink-soft);
  line-height:2;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding-top:clamp(48px,7vw,84px);
  padding-bottom:clamp(56px,7vw,90px);
  background:
    radial-gradient(1100px 480px at 82% -10%, #fff0e6 0%, transparent 60%),
    var(--bg);
  overflow:hidden;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,60px);
  align-items:center;
}
.hero-copy .kicker{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.18em;
  color:var(--ink-faint);
  margin-bottom:18px;
}
.hero-copy h1{
  font-size:clamp(58px,9vw,128px);
  line-height:.86;
  letter-spacing:-.02em;
  margin-bottom:20px;
}
.hero-copy h1 span{ color:var(--accent); }
.hero-copy .sub{
  font-size:clamp(21px,2.3vw,30px);
  font-weight:800;
  font-family:var(--font-display);
  margin-bottom:16px;
}
.hero-copy .desc{
  color:var(--ink-soft);
  font-size:15.5px;
  max-width:34ch;
  margin-bottom:8px;
}
.hero-copy .desc + .desc{ margin-top:-4px; }
.hero-copy .tagline-en{
  margin-top:22px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--ink-faint);
}
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

/* console mock */
.hero-visual{ position:relative; }
.console{
  background:var(--bg-dark);
  border-radius:10px;
  padding:18px;
  box-shadow:0 40px 80px -30px rgba(20,15,5,.45);
  position:relative;
}
.console::before{
  content:"";
  position:absolute; left:18px; top:18px;
  width:9px; height:9px; border-radius:50%;
  background:#3a372f;
  box-shadow:16px 0 #3a372f, 32px 0 #3a372f;
}
.console-body{
  margin-top:26px;
  background:#0d0c0a;
  border-radius:6px;
  padding:20px;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:16px;
}
.console-menu{ display:flex; flex-direction:column; gap:3px; }
.console-menu button{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:4px;
  font-size:12.5px;
  color:#a8a296;
  text-align:left;
}
.console-menu button svg{ width:15px; height:15px; flex:none; color:var(--accent); }
.console-menu button.active{ background:#1c1a17; color:#fff; }
.console-stats{
  background:#151310;
  border:1px solid #29261f;
  border-radius:6px;
  padding:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.console-stat{ display:flex; flex-direction:column; gap:4px; }
.console-stat .num{
  font-family:var(--font-mono);
  font-size:22px;
  color:#fff;
  font-weight:700;
}
.console-stat .lbl{ font-size:11px; color:#8a8579; }
.console-stat.accent .num{ color:var(--accent); }
.console-foot{
  grid-column:1 / -1;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:10px; margin-top:2px;
  border-top:1px solid #29261f;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:#6f6a5e;
  letter-spacing:.04em;
}
.hero-visual-tag{
  position:absolute; right:-10px; bottom:-18px;
  background:var(--white);
  border:1px solid var(--line);
  padding:10px 16px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
  box-shadow:0 18px 36px -18px rgba(20,15,5,.25);
}

/* =========================================================
   DUOTONE PANEL — replaces photography with generative tech art
   ========================================================= */
.panel{
  position:relative;
  aspect-ratio:4/3;
  border-radius:4px;
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}
.panel::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.7;
}
.panel::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, transparent 30%, rgba(0,0,0,.55) 100%);
}
.panel .panel-glow{
  position:absolute; border-radius:50%;
  filter:blur(46px);
  opacity:.55;
  z-index:-1;
}
.panel-label{
  position:absolute; left:20px; bottom:18px; right:20px;
  z-index:2;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(26px,3vw,38px);
  color:#fff;
  letter-spacing:-.02em;
}
.panel-tag{
  position:absolute; left:20px; top:18px; z-index:2;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.65);
}
.panel-icon{
  position:absolute; z-index:2;
  color:rgba(255,255,255,.9);
}
.panel--a{ background:linear-gradient(135deg,#221f19,#0f0e0c); }
.panel--a .panel-glow{ width:220px;height:220px; background:var(--accent); right:-60px; top:-60px; }
.panel--b{ background:linear-gradient(135deg,#1a2622,#0d0f0e); }
.panel--b .panel-glow{ width:220px;height:220px; background:#3fae8a; left:-50px; bottom:-60px; }
.panel--c{ background:linear-gradient(135deg,#211a26,#0e0d10); }
.panel--c .panel-glow{ width:220px;height:220px; background:#8a6cff; right:-40px; bottom:-70px; }
.panel--d{ background:linear-gradient(135deg,#26201a,#0f0e0c); }
.panel--d .panel-glow{ width:200px;height:200px; background:#ffb02e; left:40%; top:-70px; }

/* =========================================================
   PHOTO FRAMES — real photography (object-fit: cover)
   ========================================================= */
.photo-frame{
  position:relative;
  overflow:hidden;
  border-radius:4px;
  background:var(--bg-panel);
  isolation:isolate;
}
.photo-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photo-frame.ratio-4-3{ aspect-ratio:4/3; }
.photo-frame.ratio-16-9{ aspect-ratio:16/9; }
.photo-frame.ratio-5-4{ aspect-ratio:5/4; }
.photo-frame.ratio-1-1{ aspect-ratio:1/1; }

/* small solid corner tag — never a wash across the whole photo */
.photo-tag{
  position:absolute; left:14px; top:14px; z-index:2;
  background:var(--ink);
  color:#fff;
  padding:7px 13px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  border-radius:2px;
}
.photo-tag.accent{ background:var(--accent); }

/* small disclaimer for AI-generated imagery */
.photo-credit{
  margin-top:10px;
  font-size:12px;
  color:var(--ink-faint);
  display:flex; align-items:flex-start; gap:6px;
}
.photo-credit svg{ width:14px; height:14px; flex:none; margin-top:1px; }

/* legibility scrim — reserved for full-bleed banner photography only,
   directional and localized behind text, never a color filter on the image */
.banner-photo{
  position:absolute; inset:0;
  z-index:0;
}
.banner-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.banner-photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,9,7,.82) 0%, rgba(10,9,7,.5) 42%, rgba(10,9,7,0) 68%);
}

/* per-image focal points (object-position) — tuned per photo, with
   mobile overrides so the key subject never gets cropped out */
.img-service-infra{ object-position:78% 50%; }
.img-service-support{ object-position:center 62%; }
.img-case-construction{ object-position:38% 48%; }
.img-case-manufacturing{ object-position:70% 55%; }
.img-case-hospitality{ object-position:center 68%; }
.img-recruit-engineer{ object-position:66% 38%; }
.img-company-history{ object-position:center 52%; }
.img-company-toyooka{ object-position:center 58%; }
.img-company-map{ object-position:center 45%; }
.img-custom-software{ object-position:58% 50%; }
.img-approach{ object-position:center 52%; }
.img-message{ object-position:35% 50%; }
.img-recruit-local{ object-position:center 45%; }
.img-recruit-ai{ object-position:62% 48%; }

@media (max-width:860px){
  .img-service-infra{ object-position:70% 50%; }
  .img-case-construction{ object-position:42% 42%; }
  .img-case-manufacturing{ object-position:62% 52%; }
  .img-recruit-engineer{ object-position:62% 34%; }
}

/* =========================================================
   FEATURES (numbered)
   ========================================================= */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,32px);
}
.feature-card .panel{ margin-bottom:22px; }
.feature-card .num{
  font-family:var(--font-mono);
  color:var(--accent);
  font-size:14px;
  font-weight:700;
  margin-bottom:6px;
  display:block;
}
.feature-card h3{ font-size:22px; margin-bottom:10px; }
.feature-card p{ color:var(--ink-soft); font-size:14.5px; }

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.service-card{
  background:var(--bg);
  padding:clamp(28px,3vw,40px) clamp(24px,3vw,34px);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.service-card .icon{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--bg-panel);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.service-card .icon svg{ width:24px; height:24px; }
.service-card .en{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--accent);
  font-weight:700;
}
.service-card h3{ font-size:21px; }
.service-card p{ color:var(--ink-soft); font-size:14.5px; flex:1; }

/* =========================================================
   CASE STUDIES
   ========================================================= */
.case-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,32px);
}
.case-card{ display:block; }
.case-card .panel{ margin-bottom:18px; }
.case-card .tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--accent);
  margin-bottom:8px;
  display:block;
}
.case-card h3{ font-size:19px; margin-bottom:8px; }
.case-card p{ color:var(--ink-soft); font-size:14px; margin-bottom:14px; }

/* =========================================================
   FLOW
   ========================================================= */
.flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  position:relative;
}
.flow::before{
  content:"";
  position:absolute; top:26px; left:calc(12.5% - 20px); right:calc(12.5% - 20px);
  height:1px; background:var(--line);
  z-index:0;
}
.flow-step{
  position:relative; z-index:1;
  padding-inline:18px;
  text-align:left;
}
.flow-step .num{
  width:52px; height:52px;
  border-radius:50%;
  background:var(--bg);
  border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:16px;
  margin-bottom:18px;
}
.flow-step:first-child{ padding-inline-start:0; }
.flow-step h4{ font-size:17px; margin-bottom:6px; }
.flow-step p{ font-size:13.5px; color:var(--ink-soft); }

/* =========================================================
   SPLIT (image+text)
   ========================================================= */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,72px);
  align-items:center;
}
.split.reverse .split-media{ order:2; }
.split-media .panel{ aspect-ratio:5/4; }
.split-copy .stat-row{
  display:flex; gap:36px; margin-top:30px; flex-wrap:wrap;
}
.split-copy .stat b{
  display:block; font-family:var(--font-display); font-size:clamp(30px,3vw,40px); color:var(--accent);
}
.split-copy .stat span{ font-size:12.5px; color:var(--ink-faint); font-family:var(--font-mono); letter-spacing:.06em; }

/* =========================================================
   RECRUIT BANNER
   ========================================================= */
.recruit-banner{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  background:var(--ink);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:360px;
}
.recruit-banner .panel{ position:absolute; inset:0; border-radius:0; aspect-ratio:auto; }
.recruit-banner-copy{
  position:relative; z-index:2;
  padding:clamp(32px,5vw,64px);
  color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  grid-column:1/2;
}
.recruit-banner-copy h2{ font-size:clamp(28px,3.4vw,42px); color:#fff; margin-bottom:16px; }
.recruit-banner-copy p{ color:#d8d4c8; max-width:38ch; margin-bottom:26px; }

/* =========================================================
   CONTACT CTA BAND
   ========================================================= */
.contact-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
  padding:clamp(30px,4vw,46px);
  background:var(--bg-panel);
  border-radius:6px;
}
.contact-band-left{ display:flex; align-items:baseline; gap:22px; flex-wrap:wrap; }
.contact-band h2{ font-size:clamp(26px,3vw,36px); }
.contact-band p{ color:var(--ink-soft); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--bg-dark);
  color:#c9c4b8;
  padding-top:clamp(52px,7vw,84px);
}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr .8fr .8fr 1.1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid #29261f;
}
.footer-brand .brand{ color:#fff; margin-bottom:16px; }
.footer-brand .brand .mark{ background:var(--accent); }
.footer-brand address{ font-style:normal; font-size:13.5px; line-height:2; color:#a8a296; }
.footer-col h5{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#6f6a5e; margin-bottom:18px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14px; color:#c9c4b8; transition:color .2s; }
.footer-col a:hover{ color:var(--accent); }
.footer-tagline{ font-family:var(--font-display); font-weight:800; font-size:22px; color:#fff; margin-bottom:10px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-block:26px;
  font-size:12px; color:#6f6a5e;
  flex-wrap:wrap; gap:10px;
}

/* =========================================================
   PAGE HEADER (sub pages)
   ========================================================= */
.page-hero{
  padding-top:clamp(56px,8vw,96px);
  padding-bottom:clamp(40px,6vw,64px);
  border-bottom:1px solid var(--line-soft);
}
.page-hero .kicker{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.16em; color:var(--accent); font-weight:700;
  margin-bottom:18px;
}
.page-hero h1{ font-size:clamp(38px,6vw,72px); margin-bottom:18px; }
.page-hero .lede{ max-width:60ch; }
.crumbs{
  display:flex; gap:8px; align-items:center;
  font-size:12.5px; color:var(--ink-faint);
  margin-bottom:24px;
}
.crumbs a:hover{ color:var(--accent); }

/* generic content blocks */
.prose{ max-width:72ch; color:var(--ink-soft); font-size:16px; }
.prose h3{ color:var(--ink); font-size:22px; margin-bottom:14px; margin-top:8px;}
.prose p + p{ margin-top:16px; }

.def-table{ width:100%; border-collapse:collapse; }
.def-table tr{ border-top:1px solid var(--line); }
.def-table tr:first-child{ border-top:none; }
.def-table th,.def-table td{
  text-align:left; vertical-align:top;
  padding:20px 12px;
  font-size:14.5px;
}
.def-table th{
  width:220px; color:var(--ink-faint);
  font-family:var(--font-mono);
  font-weight:700; letter-spacing:.04em;
  font-size:12.5px; text-transform:uppercase;
  padding-left:0;
}
.def-table td{ color:var(--ink); }

.timeline{ display:flex; flex-direction:column; }
.timeline-row{
  display:grid; grid-template-columns:120px 1fr;
  gap:24px;
  padding-block:22px;
  border-top:1px solid var(--line);
}
.timeline-row:first-child{ border-top:none; }
.timeline-row .yr{ font-family:var(--font-mono); font-weight:700; color:var(--accent); }
.timeline-row p{ color:var(--ink-soft); font-size:14.5px; }

.tag-pill{
  display:inline-flex; padding:6px 14px;
  border:1px solid var(--line); border-radius:20px;
  font-size:12.5px; color:var(--ink-soft); font-weight:700;
}

.two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px);
}
.three-col{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,28px);
}

.info-card{
  border:1px solid var(--line);
  padding:clamp(24px,2.6vw,32px);
  border-radius:4px;
}
.info-card h4{ font-size:18px; margin-bottom:10px; }
.info-card p{ color:var(--ink-soft); font-size:14px; }
.info-card .icon{
  width:44px;height:44px; border-radius:50%;
  background:var(--bg-panel); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.info-card .icon svg{ width:20px;height:20px; }

/* form */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form-grid .full{ grid-column:1/-1; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:13px; font-weight:700; color:var(--ink); }
.field label .req{ color:var(--accent); margin-left:4px; font-size:11px; }
.field input, .field select, .field textarea{
  border:1px solid var(--line);
  background:var(--white);
  padding:13px 14px;
  border-radius:3px;
  font-size:14.5px;
  width:100%;
}
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--accent); }
.form-note{ font-size:12.5px; color:var(--ink-faint); margin-top:6px; }
.form-success{
  display:none;
  align-items:center; gap:12px;
  padding:18px 20px;
  background:#eefaf3;
  border:1px solid #bfe8cf;
  color:#1c6b3d;
  border-radius:4px;
  font-size:14px;
  margin-top:18px;
}
.form-success.is-visible{ display:flex; }
.form-success svg{ width:20px;height:20px; flex:none; }

.mock-note{
  display:flex; gap:10px; align-items:flex-start;
  font-size:12.5px; color:var(--ink-faint);
  padding:14px 16px;
  background:var(--bg-panel);
  border-radius:4px;
  margin-bottom:28px;
}
.mock-note svg{ width:16px;height:16px; flex:none; margin-top:2px; color:var(--accent); }

/* job listing */
.job-card{
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(24px,3vw,34px);
  display:flex; flex-direction:column; gap:16px;
}
.job-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.job-card h3{ font-size:22px; }
.job-meta{ display:flex; gap:10px; flex-wrap:wrap; }
.job-detail{ display:grid; grid-template-columns:110px 1fr; row-gap:10px; column-gap:16px; font-size:14px; }
.job-detail dt{ color:var(--ink-faint); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding-top:2px;}
.job-detail dd{ color:var(--ink); margin:0; }

/* voice / interview card */
.voice-card{
  background:var(--bg-panel);
  border-radius:6px;
  padding:clamp(24px,3vw,32px);
  display:flex; flex-direction:column; gap:16px;
}
.voice-card .role{
  display:flex; align-items:center; gap:14px;
}
.voice-card .avatar{
  width:52px;height:52px;border-radius:50%;
  background:var(--ink); color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:800;
}
.voice-card .role h4{ font-size:15px; }
.voice-card .role span{ font-size:12px; color:var(--ink-faint); }
.voice-card p{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- scroll reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.2,.65,.3,1), transform .6s cubic-bezier(.2,.65,.3,1);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal-group] [data-reveal]:nth-child(1){ transition-delay:0ms; }
[data-reveal-group] [data-reveal]:nth-child(2){ transition-delay:140ms; }
[data-reveal-group] [data-reveal]:nth-child(3){ transition-delay:280ms; }
[data-reveal-group] [data-reveal]:nth-child(4){ transition-delay:420ms; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .main-nav, .header-side .header-tag{ display:none; }
  .nav-toggle{ display:flex; }
  .hero .wrap{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:36px; }
}

.mobile-break{ display:none; }
@media (max-width:860px){
  .mobile-break{ display:inline; }
  .feature-grid, .service-grid, .case-grid, .three-col{ grid-template-columns:1fr; }
  .service-grid{ border:none; gap:14px; background:none; }
  .service-card{ border:1px solid var(--line); border-radius:4px; }
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .flow{ grid-template-columns:1fr; gap:18px; }
  .flow::before{ display:none; }
  .flow-step{
    padding-inline:0;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:16px;
    row-gap:2px;
  }
  .flow-step .num{ grid-column:1; grid-row:1/3; margin-bottom:0; }
  .flow-step h4{ grid-column:2; grid-row:1; }
  .flow-step p{ grid-column:2; grid-row:2; }
  .flow-step{ padding-bottom:18px; border-bottom:1px solid var(--line); }
  .flow-step:last-child{ padding-bottom:0; border-bottom:none; }
  .recruit-banner{ grid-template-columns:1fr; min-height:0; }
  .recruit-banner-copy{ grid-column:auto; }
  .recruit-banner .panel{ position:relative; aspect-ratio:16/10; }
  .recruit-banner .banner-photo{ position:relative; aspect-ratio:4/3; }
  .recruit-banner .banner-photo::after{ background:linear-gradient(180deg, rgba(10,9,7,0) 45%, rgba(10,9,7,.85) 100%); }
  .footer-top{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .def-table th{ width:130px; }
  .job-detail{ grid-template-columns:100px 1fr; }
  .contact-band{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:560px){
  .site-header .header-cta{ display:none; }
}

@media (max-width:520px){
  .hero-copy h1{ font-size:clamp(48px,16vw,72px); }
  .console-body{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .section-head{ align-items:flex-start; }
  .section-head .en{ text-align:left; }
}