/* H&S Companies — site-wide bright refresh (2026) */

:root {
  --refresh-cream: #fcfbf6;
  --refresh-ivory: #fcfaf5;
  --refresh-mint: #e8f5f1;
  --refresh-teal: #0d8074;
  --refresh-teal-dark: #0c5d50;
  --refresh-ink: #17332e;
  --refresh-muted: #3f514b;
  --refresh-gold: #8a5e12;
  --refresh-line: #e3e9e6;
}

body[data-site-refresh] {
  color: var(--refresh-ink);
  background: var(--refresh-cream);
}

body[data-site-refresh] main :where(h1, h2, h3, p, li, dd) {
  text-wrap: pretty;
  word-break: auto-phrase;
}

body[data-site-refresh] .site-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(23, 51, 46, 0.08);
  box-shadow: 0 8px 28px -26px rgba(23, 51, 46, 0.45);
  backdrop-filter: blur(16px);
}

body[data-site-refresh] .site-header .nav-link {
  color: #1c3d36;
  font-weight: 600;
}

body[data-site-refresh] .site-header .nav-link:hover,
body[data-site-refresh] .site-header .nav-link[aria-current="page"] {
  color: var(--refresh-teal);
}

body[data-site-refresh] .hero-mesh {
  color: var(--refresh-ink) !important;
  background-color: var(--refresh-cream) !important;
  background-image:
    radial-gradient(circle at 88% 8%, rgba(210, 240, 233, 0.9), transparent 35%),
    radial-gradient(circle at 8% 95%, rgba(255, 239, 205, 0.72), transparent 30%) !important;
  border-bottom: 1px solid var(--refresh-line);
}

body[data-site-refresh] .hero-mesh.text-white,
body[data-site-refresh] .hero-mesh .text-white,
body[data-site-refresh] .hero-mesh .text-slate-100,
body[data-site-refresh] .hero-mesh .text-slate-200,
body[data-site-refresh] .hero-mesh .text-slate-300 {
  color: var(--refresh-ink) !important;
}

body[data-site-refresh] .hero-mesh .text-teal-200,
body[data-site-refresh] .hero-mesh .text-teal-300,
body[data-site-refresh] .hero-mesh .text-amber {
  color: var(--refresh-gold) !important;
}

body[data-site-refresh] .hero-mesh > .absolute {
  opacity: 0.34;
}

body[data-site-refresh] .eyebrow {
  color: var(--refresh-teal-dark) !important;
}

body[data-site-refresh] .eyebrow::before {
  background: var(--refresh-gold);
}

body[data-site-refresh] .card,
body[data-site-refresh] .shadow-card {
  border-color: var(--refresh-line) !important;
  box-shadow: 0 18px 42px -34px rgba(23, 51, 46, 0.45) !important;
}

body[data-site-refresh] .card {
  border-radius: 1.25rem;
  background: #fff;
}

body[data-site-refresh] a.card {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-site-refresh] a.card:hover {
  transform: translateY(-3px);
  border-color: rgba(13, 128, 116, 0.28) !important;
  box-shadow: 0 24px 50px -34px rgba(13, 128, 116, 0.5) !important;
}

body[data-site-refresh] :where(.bg-mist, .bg-slate-50, .bg-slate-100, .bg-mint-50) {
  background-color: var(--refresh-ivory) !important;
}

body[data-site-refresh] .bg-mint-100 {
  background-color: var(--refresh-mint) !important;
}

body[data-site-refresh] .btn-primary {
  color: #fff !important;
  background: var(--refresh-teal) !important;
  box-shadow: 0 14px 28px -18px rgba(13, 128, 116, 0.72);
}

body[data-site-refresh] .btn-primary:hover {
  background: var(--refresh-teal-dark) !important;
}

body[data-site-refresh] .btn-ghost {
  color: var(--refresh-ink) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(13, 128, 116, 0.28) !important;
}

body[data-site-refresh] :where(input, textarea, select) {
  border-color: #dbe5e1 !important;
  background-color: #fff !important;
}

body[data-site-refresh] :where(input, textarea, select):focus {
  border-color: var(--refresh-teal) !important;
  box-shadow: 0 0 0 3px rgba(13, 128, 116, 0.12) !important;
  outline: none;
}

body[data-site-refresh] main > section {
  scroll-margin-top: 84px;
}

body[data-site-refresh] main .grid > * {
  min-width: 0;
}

/* Demo lab: visual thumbnails generated for each interactive example. */
body[data-site-refresh] a.card[href^="demo-"] > div:first-child {
  background-position: center !important;
  background-size: cover !important;
  isolation: isolate;
}

body[data-site-refresh] a.card[href^="demo-"] > div:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(9, 48, 44, 0.04), rgba(9, 48, 44, 0.18));
  pointer-events: none;
}

body[data-site-refresh] a.card[href^="demo-"] > div:first-child > .grid-texture,
body[data-site-refresh] a.card[href^="demo-"] > div:first-child > .absolute.inset-0.grid {
  display: none;
}

body[data-site-refresh] a.card[href^="demo-"] > div:first-child > .live-badge,
body[data-site-refresh] a.card[href^="demo-"] > div:first-child > .soon-badge {
  z-index: 2;
  box-shadow: 0 8px 22px rgba(9, 48, 44, 0.2);
}

body[data-site-refresh] a.card[href^="demo-"] > div:last-child::before {
  content: "こんなお悩みに　" var(--concern);
  display: block;
  margin-bottom: 0.75rem;
  color: #0f766e;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

body[data-site-refresh] a.card[href="gas-demo.html"] > div:last-child::before {
  content: "こんなお悩みに　毎日の転記や通知を自動化したい";
  display: block;
  margin-bottom: 0.75rem;
  color: #0f766e;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

body[data-site-refresh] a.card[href="demo-masking.html"] { --concern: "個人情報を安全に扱いたい"; }
body[data-site-refresh] a.card[href="demo-aggregate.html"] { --concern: "毎月の集計を手作業から変えたい"; }
body[data-site-refresh] a.card[href="demo-minutes.html"] { --concern: "会議後の決定事項やToDoを整理したい"; }
body[data-site-refresh] a.card[href="demo-manual.html"] { --concern: "ベテランのコツを若手へ残したい"; }
body[data-site-refresh] a.card[href="demo-expense.html"] { --concern: "経費の仕分け作業を減らしたい"; }
body[data-site-refresh] a.card[href="demo-scam.html"] { --concern: "怪しいメッセージを見分けたい"; }
body[data-site-refresh] a.card[href="demo-invoice.html"] { --concern: "請求書の記載漏れを防ぎたい"; }
body[data-site-refresh] a.card[href="demo-subsidy.html"] { --concern: "使えそうな支援制度の方向性を知りたい"; }
body[data-site-refresh] a.card[href="demo-roi.html"] { --concern: "自動化で浮く時間と金額を知りたい"; }
body[data-site-refresh] a.card[href="demo-cancel.html"] { --concern: "無断キャンセルの損失を把握したい"; }
body[data-site-refresh] a.card[href="demo-meeting.html"] { --concern: "会議にかかる人件費を見える化したい"; }
body[data-site-refresh] a.card[href="demo-recruit.html"] { --concern: "採用と離職のコストを整理したい"; }
body[data-site-refresh] a.card[href="demo-dx.html"] { --concern: "自社のDX現在地を知りたい"; }
body[data-site-refresh] a.card[href="demo-shadow-ai.html"] { --concern: "社員の無断AI利用が心配"; }
body[data-site-refresh] a.card[href="demo-keyperson.html"] { --concern: "あの人しかできない業務を減らしたい"; }
body[data-site-refresh] a.card[href="demo-ai-literacy.html"] { --concern: "AI活用を何から始めるか知りたい"; }

body[data-site-refresh] a.card[href="demo-masking.html"] > div:first-child { background-image: url("assets/demo-cards/masking.jpg") !important; }
body[data-site-refresh] a.card[href="demo-aggregate.html"] > div:first-child { background-image: url("assets/demo-cards/aggregate.jpg") !important; }
body[data-site-refresh] a.card[href="demo-minutes.html"] > div:first-child { background-image: url("assets/demo-cards/minutes.jpg") !important; }
body[data-site-refresh] a.card[href="demo-manual.html"] > div:first-child { background-image: url("assets/demo-cards/manual.jpg") !important; }
body[data-site-refresh] a.card[href="demo-expense.html"] > div:first-child { background-image: url("assets/demo-cards/expense.jpg") !important; }
body[data-site-refresh] a.card[href="demo-scam.html"] > div:first-child { background-image: url("assets/demo-cards/scam.jpg") !important; }
body[data-site-refresh] a.card[href="demo-invoice.html"] > div:first-child { background-image: url("assets/demo-cards/invoice.jpg") !important; }
body[data-site-refresh] a.card[href="demo-subsidy.html"] > div:first-child { background-image: url("assets/demo-cards/subsidy.jpg") !important; }
body[data-site-refresh] a.card[href="demo-roi.html"] > div:first-child { background-image: url("assets/demo-cards/roi.jpg") !important; }
body[data-site-refresh] a.card[href="demo-cancel.html"] > div:first-child { background-image: url("assets/demo-cards/cancel.jpg") !important; }
body[data-site-refresh] a.card[href="demo-meeting.html"] > div:first-child { background-image: url("assets/demo-cards/meeting.jpg") !important; }
body[data-site-refresh] a.card[href="demo-recruit.html"] > div:first-child { background-image: url("assets/demo-cards/recruit.jpg") !important; }
body[data-site-refresh] a.card[href="demo-dx.html"] > div:first-child { background-image: url("assets/demo-cards/dx.jpg") !important; }
body[data-site-refresh] a.card[href="demo-shadow-ai.html"] > div:first-child { background-image: url("assets/demo-cards/shadow-ai.jpg") !important; }
body[data-site-refresh] a.card[href="demo-keyperson.html"] > div:first-child { background-image: url("assets/demo-cards/keyperson.jpg") !important; }
body[data-site-refresh] a.card[href="demo-ai-literacy.html"] > div:first-child { background-image: url("assets/demo-cards/ai-literacy.jpg") !important; }

body[data-site-refresh] footer {
  background: #07372f !important;
}

body[data-site-refresh] footer,
body[data-site-refresh] footer :where(p, a, h2, h3, h4, li, span, time) {
  color: rgba(255, 255, 255, 0.85) !important;
}

body[data-site-refresh] footer :where(.text-white, .font-bold) {
  color: #fff !important;
}

/* Accent gold used as TEXT on light content -> darker for readability.
   Scoped to main so footer/dark-surface amber accents keep their bright gold. */
body[data-site-refresh] main :where(.text-amber, .text-amber-light) {
  color: #8a5e12 !important;
}

/* Sub-page hero lede: one consistent size/weight/colour across all pages
   (they were authored per-page at 16/18px and varying weights). */
body[data-site-refresh] .hero-mesh .lede {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) !important; /* 16 -> 20px (matches home hero) */
  font-weight: 500 !important;
  line-height: 1.85 !important;
  color: #334039 !important;
}

/* Body copy: crisper, slightly heavier for older readers (tone unchanged). */
body[data-site-refresh] main :where(.text-slate-600, .jp-pretty, .lede) {
  color: #334039 !important;
}
body[data-site-refresh] main p:not([class*="font-bold"]) {
  font-weight: 500;
}

@media (max-width: 639px) {
  body[data-site-refresh] .hero-mesh h1 {
    font-size: clamp(2rem, 9vw, 2.65rem) !important;
    line-height: 1.28 !important;
  }

  body[data-site-refresh] main > section {
    overflow-wrap: anywhere;
  }
}