:root{
  --paper:#faf7f1;
  --paper-deep:#f2ece0;
  --ink:#241f18;
  --ink-soft:#5b5346;
  --muted:#847c6c;
  --line:#e4dccb;
  --card-bg:#ffffff;
  --navy:#1f2a3c;
  --navy-soft:#33415a;
  --accent:#c8592f;
  --accent-dark:#a8451f;
  --accent-soft:#f4e2d5;
  --focus:#1f6f6b;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(36,31,24,.06), 0 8px 24px -12px rgba(36,31,24,.18);
  --shadow-card-hover:0 4px 10px rgba(36,31,24,.08), 0 20px 34px -16px rgba(36,31,24,.28);
  --max:1120px;
  color-scheme:light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;}
a{color:inherit;}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:.8em 1.2em; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,241,.92);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  position:relative;
}

.header-cta{
  margin-left:auto;
}

.logo{
  font-size:1.15rem; font-weight:700; letter-spacing:.02em;
  text-decoration:none; color:var(--navy); white-space:nowrap;
}
.logo .tm{font-size:.6em; vertical-align:super; margin-left:1px;}

.breadcrumb{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  min-width:160px;
}

.breadcrumb ol{
  list-style:none; display:flex; flex-wrap:wrap; gap:.4em; margin:0; padding:0;
  font-size:.82rem; color:var(--muted);
}
.breadcrumb li:not(:last-child)::after{content:"›"; margin-left:.4em; color:var(--muted);}
.breadcrumb a{text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb li[aria-current="page"]{color:var(--ink-soft); font-weight:600;}

.logo-nudge{
  color:#8C6329;
}

.btn{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.72em 1.3em; border-radius:999px; font-weight:700; font-size:.92rem;
  text-decoration:none; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  border:1px solid transparent;
}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 10px 20px -10px rgba(200,89,47,.6);}
.btn-primary:hover{background:var(--accent-dark); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn-outline:hover{background:var(--navy); color:#fff;}
.header-cta{padding:.55em 1.1em; font-size:.85rem;}

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 48px;
  background:
    radial-gradient(600px 260px at 85% -10%, var(--accent-soft), transparent 60%),
    var(--paper);
}
.hero-inner{max-width:760px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; letter-spacing:.14em; font-weight:700; color:var(--accent-dark);
  background:var(--accent-soft); padding:.5em 1em; border-radius:999px; margin:0 0 22px;
}
.eyebrow::before{content:"●"; font-size:.55em;}
.hero h1{
  font-size:clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  line-height:1.5; margin:0 0 .55em; color:var(--navy); font-weight:700;
}
.hero h1 small{
  display:block; font-size:.55em; font-weight:600; color:var(--ink-soft); margin-top:.6em;
}
.hero-lead{font-size:1.02rem; color:var(--ink-soft); margin:0 0 28px;}
.hero-signals{
  list-style:none; margin:0 0 34px; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.hero-signals li{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.6em 1.1em; font-size:.88rem; color:var(--ink-soft); box-shadow:var(--shadow-card);
}
.hero-scroll{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; font-size:.94rem; color:var(--navy); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid var(--accent);
}
.hero-scroll .arrow{display:inline-block; animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
@media (prefers-reduced-motion:reduce){.hero-scroll .arrow{animation:none;}}

/* ---------- Section shell ---------- */
section{padding:56px 0;}
.section-head{max-width:640px; margin:0 0 32px;}
.section-head h2{
  font-size:clamp(1.3rem, 1.1rem + .8vw, 1.7rem); color:var(--navy); margin:0 0 .5em; font-weight:700;
}
.section-head p{color:var(--ink-soft); margin:0;}

/* ---------- Empathy ---------- */
.empathy{background:var(--paper-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.empathy-grid{list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.empathy-grid a{
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px 20px; text-decoration:none; box-shadow:var(--shadow-card);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.empathy-grid a:hover{transform:translateY(-2px); box-shadow:var(--shadow-card-hover); border-color:var(--accent);}
.empathy-quote{color:var(--ink); font-weight:600; font-size:.98rem;}

/* ---------- Finder / pills ---------- */
.finder{text-align:center;}
.finder .section-head{margin-left:auto; margin-right:auto; text-align:center;}
.pills{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:920px; margin:0 auto;}
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  background:#fff; border:1.5px solid var(--navy); color:var(--navy);
  padding:.85em 1.4em; border-radius:999px; text-decoration:none; font-weight:700; font-size:.95rem;
  box-shadow:var(--shadow-card); transition:background-color .15s ease, color .15s ease, transform .15s ease;
}
.pill:hover, .pill.is-active{background:var(--navy); color:#fff; transform:translateY(-1px);}
.finder-note{margin:22px auto 0; color:var(--muted); font-size:.86rem; max-width:520px;}

/* ---------- Categories / cards ---------- */
.categories{padding-top:40px;}
.category{padding:34px 0;}
.category + .category{border-top:1px solid var(--line);}
.category-head{display:flex; gap:18px; align-items:flex-start; margin-bottom:26px; scroll-margin-top:90px;}
.category-icon{
  flex:none; width:52px; height:52px; border-radius:16px;
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
}
.category-icon svg{width:26px; height:26px;}
.category-eyebrow{font-size:.74rem; letter-spacing:.14em; font-weight:700; color:var(--accent-dark); margin:0 0 .3em;}
.category-head h2{font-size:clamp(1.2rem,1rem + .6vw,1.5rem); margin:0 0 .35em; color:var(--navy);}
.category-intro{margin:0; color:var(--ink-soft); max-width:640px;}

.card-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--shadow-card); scroll-margin-top:90px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover, .card:focus-within{transform:translateY(-3px); box-shadow:var(--shadow-card-hover); border-color:var(--accent);}
.card-eyebrow{
  display:flex; align-items:center; gap:.5em;
  font-size:.76rem; font-weight:700; letter-spacing:.06em; color:var(--focus);
  margin:0; text-transform:none;
}
.card-badge{
  background:var(--accent-soft); color:var(--accent-dark); font-size:.68rem; font-weight:700;
  padding:.2em .6em; border-radius:999px; letter-spacing:.04em;
}
.card-title{margin:0; font-size:1.05rem; line-height:1.55; color:var(--ink); font-weight:700;}
.card-pitch{margin:0; color:var(--ink-soft); font-size:.92rem; flex:1;}
.card-meta{margin:0; font-size:.82rem; color:var(--muted);}
.card-meta-label{font-weight:700; color:var(--ink-soft); margin-right:.4em;}
.card-link{
  margin-top:6px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:700; font-size:.9rem; color:var(--accent-dark); text-decoration:none;
  border-bottom:2px solid var(--accent-soft); padding-bottom:2px;
  transition:border-color .15s ease, color .15s ease;
}
.card-link:hover{border-color:var(--accent-dark); color:var(--accent-dark);}
.card-link .arrow, .card-link span[aria-hidden]{transition:transform .15s ease; display:inline-block;}
.card-link:hover span[aria-hidden]{transform:translateX(3px);}

/* ---------- Support section ---------- */
.category--support{
  margin-top:12px; padding:40px 28px; border-radius:var(--radius-lg);
  background:var(--navy); color:#fff; border-top:none;
}
.category--support .category-icon{background:#fff; color:var(--navy);}
.category--support .category-eyebrow{color:#e7c3ac;}
.category--support .category-head h2{color:#fff;}
.category--support .category-intro{color:#cfd6e0;}
.category--support .card{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);}
.category--support .card-title{color:#fff;}
.category--support .card-pitch{color:#dfe4ec;}
.category--support .card-meta{color:#aeb6c4;}
.category--support .card-meta-label{color:#dfe4ec;}
.category--support .card-eyebrow{color:#8fd4cf;}
.category--support .card-badge{background:rgba(255,255,255,.16); color:#fff;}
.category--support .card-link{color:#f2b791; border-color:rgba(255,255,255,.25);}
.category--support .card-link:hover{color:#fff; border-color:#fff;}
.category--support .card:hover, .category--support .card:focus-within{border-color:#fff;}

/* ---------- Concept ---------- */
.concept{background:var(--paper-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.concept-inner{max-width:720px; margin:0 auto; text-align:center;}
.concept-quote{
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); font-weight:700; color:var(--navy); margin:0 0 .6em;
}
.concept p{color:var(--ink-soft); margin:0 0 22px;}
.concept-link{font-weight:700; color:var(--accent-dark); text-decoration:none; border-bottom:2px solid var(--accent-soft);}
.concept-link:hover{border-color:var(--accent-dark);}

/* ---------- Final CTA ---------- */
.final-cta{text-align:center;}
.final-cta-inner{max-width:600px; margin:0 auto;}
.final-cta h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); color:var(--navy); margin:0 0 .5em;}
.final-cta p{color:var(--ink-soft); margin:0 0 28px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:#c9d0dc; padding:36px 0;}
.footer-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}

.footer-inner nav{
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-size:.86rem;
}

.copyright{
  margin:0;
  font-size:.82rem;
  color:#9aa4b5;
}

@media (max-width:640px){
  .header-inner{gap:10px;}
  .header-cta{order:3; width:100%; justify-content:center;}
  .hero{padding:44px 0 36px;}
  section{padding:44px 0;}
  .category-head{flex-direction:column;}
  .category--support{padding:30px 18px;}
  .footer-inner{flex-direction:column; align-items:flex-start;}
}

/* ---------- Visual navigation / card thumbnails ---------- */
.finder-visual{
  margin:0 auto 28px;
  max-width:1120px;
}
.finder-visual-caption{
  margin:0 0 12px;
  color:var(--muted);
  font-size:.82rem;
}
.category-visual-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}
.category-visual-link{
  display:block;
  min-width:0;
  text-decoration:none;
  color:var(--navy);
}
.category-visual-link figure{
  margin:0;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-card);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.category-visual-link img{
  display:block;
  width:100%;
  aspect-ratio:1.12 / 1;
  object-fit:cover;
}
.category-visual-label{
  display:block;
  padding:9px 8px 10px;
  text-align:center;
  font-size:.82rem;
  font-weight:700;
  line-height:1.4;
}
.category-visual-link:hover figure,
.category-visual-link:focus-visible figure{
  transform:translateY(-2px);
  box-shadow:var(--shadow-card-hover);
  border-color:var(--accent);
}
.category-visual-link:focus-visible{outline:none;}

.card-visual{
  margin:0 -2px 2px;
  border-radius:12px;
  overflow:hidden;
  background:var(--paper-deep);
  border:1px solid var(--line);
}
.card-visual img{
  display:block;
  width:100%;
  aspect-ratio:2.15 / 1;
  object-fit:cover;
}
@media (max-width:900px){
  .category-visual-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .category-visual-grid{grid-template-columns:repeat(2,1fr);}
  .category-visual-label{font-size:.78rem;}
  .card-visual img{aspect-ratio:2.0 / 1;}
}