/* Fuyu Work Hero trial. All non-Hero application logic is kept verbatim. */
body:has(#view-home:not(.hidden)) {
  background-color: #f8f0e1;
  background-image: none;
}
[data-theme="dark"] body:has(#view-home:not(.hidden)) { background-color: #0d1914; }
body:has(#view-home:not(.hidden)) .ambience { opacity: .2; }
body:has(#view-home:not(.hidden)) header.site-header {
  background: rgba(248,240,225,.86);
  padding-block: 1.05rem;
}
[data-theme="dark"] body:has(#view-home:not(.hidden)) header.site-header {
  background: rgba(13,25,20,.88);
}
body:has(#view-home:not(.hidden)) .header-container {
  max-width: 1680px;
  padding-inline: clamp(24px,5.4vw,104px);
}
section.hero-section {
  --hero-paper: #f8f0e1;
  --hero-ink: #25372e;
  --hero-gold: #a17d43;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  width: 100%;
  max-width: none;
  height: clamp(440px,32vw,620px);
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: clip;
  border-bottom: 1px solid rgba(160,125,67,.17);
  background: var(--hero-paper);
  text-align: left;
}
[data-theme="dark"] section.hero-section {
  --hero-paper: #0d1914;
  --hero-ink: #ede6d4;
  --hero-gold: #c7ad79;
}
.hero-content {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: calc(100% - clamp(48px,14.6vw,280px));
  max-width: 1600px;
  height: 100%;
  margin-inline: auto;
  padding: clamp(25px,2.6vw,48px) 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hero-title {
  max-width: 38%;
  margin: 0 0 11px;
  font-family: var(--font-literary);
  font-size: clamp(38px,3.55vw,66px);
  line-height: 1.32;
  letter-spacing: .045em;
  font-weight: 500;
  color: var(--hero-ink);
  text-wrap: nowrap;
}
.hero-title span { display: block; }
.hero-sub-en {
  max-width: 260px;
  font-family: var(--font-display);
  font-size: clamp(9px,.76vw,12px);
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: .23em;
  color: #8c7a5e;
  margin: 0 0 17px;
}
[data-theme="dark"] .hero-sub-en { color: #b0a58b; }
.hero-sub-en span { display: block; }
.hero-rule {
  width: 26px;
  height: 1px;
  background: var(--hero-gold);
  margin-bottom: 17px;
}
.hero-quote-block {
  border: 0;
  padding: 0;
  width: min(35%,380px);
  margin: 0 0 20px;
  color: #6f6a58;
  font-family: var(--font-literary);
  font-size: clamp(11px,.98vw,15px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .065em;
}
.hero-quote-block span { display: block; }
[data-theme="dark"] .hero-quote-block { color: #b4baab; }
.btn-hero-primary {
  min-height: 44px;
  padding: 10px 29px;
  gap: 25px;
  font-family: var(--font-literary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.5;
  color: #d6bd82;
  background: #243d33;
  border: 1px solid rgba(180,147,82,.65);
  box-shadow: inset 0 0 12px rgba(210,183,116,.1),0 4px 14px rgba(55,67,40,.1);
  text-align: center;
}
.btn-hero-primary:hover {
  background: #2f4b3d;
  border-color: #be9b59;
  color: #f0ddb2;
  box-shadow: inset 0 0 16px rgba(210,183,116,.14),0 5px 18px rgba(55,67,40,.15);
}
[data-theme="dark"] .btn-hero-primary { background: #1f352c; color: #d7c08c; }
.btn-hero-primary:focus-visible { outline: 2px solid var(--hero-gold); outline-offset: 5px; }
.hero-visual-stage {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  mask-image: linear-gradient(to right,rgba(0,0,0,.12),rgba(0,0,0,.38) 20%,#000 42%);
  -webkit-mask-image: linear-gradient(to right,rgba(0,0,0,.12),rgba(0,0,0,.38) 20%,#000 42%);
}
.hero-mountain-img,
[data-theme="light"] .hero-mountain-img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: none;
  transition: opacity .5s ease;
  mask-image: linear-gradient(to bottom,transparent 0%,#000 6%,#000 89%,transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 6%,#000 89%,transparent 100%);
}
.hero-vertical-quote {
  z-index: 2;
  top: auto;
  bottom: 14%;
  right: clamp(26px,4.8vw,96px);
  width: 120px;
  display: block;
  transform: none;
  writing-mode: horizontal-tb;
  color: #575642;
  text-shadow: 0 1px 5px var(--hero-paper),0 0 12px var(--hero-paper);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .16em;
}
.hero-vertical-quote .quote-cn span { display: block; }
.hero-vertical-quote .quote-en {
  display: block;
  font-family: var(--font-display);
  font-size: 8px;
  line-height: 1.85;
  letter-spacing: .19em;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(161,125,67,.35);
  width: 92px;
}
[data-theme="dark"] .hero-vertical-quote { color: #b4b69e; }
.hero-threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #b99353;
  opacity: .75;
  pointer-events: none;
}
.hero-threads .thread { fill: none;stroke: #b08b4b;stroke-width: .55;opacity: .28; }
[data-theme="dark"] .hero-threads { fill: #d1b577;opacity: .58; }
.hero-grain {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-image: url('assets/hero-trial/paper-fibre.svg');
  opacity: .12;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .hero-grain { mix-blend-mode: screen;opacity: .045; }
section.archipelago-section { padding-top: 2.2rem; }
/* Original v4.0 grid has a 320px minimum track inside a padded page. */
#view-dashboard .dashboard-grid {
  grid-template-columns: repeat(auto-fill,minmax(min(320px,100%),1fr));
}
@media (min-width: 1700px) {
  .hero-content { padding-top: 46px; }
  .hero-quote-block { margin-bottom: 28px; }
  .hero-sub-en { margin-bottom: 24px; }
  .hero-rule { margin-bottom: 23px; }
}
@media (min-width: 769px) and (max-width: 1050px) {
  section.hero-section { height: 440px; }
  .hero-content { width: calc(100% - 80px); }
  .hero-title { font-size: 38px; }
  .hero-quote-block { width: 32%;font-size: 11px; }
  .hero-vertical-quote { right: 22px;width: 90px;font-size: 11px; }
  .hero-visual-stage { inset: -8px -5% -12px; width: 110%; }
}
@media (max-width: 768px) {
  body:has(#view-home:not(.hidden)) header.site-header { padding-block: 14px; }
  body:has(#view-home:not(.hidden)) .header-container { padding-inline: 20px;gap: 9px; }
  .header-right-actions { gap: .7rem; }
  .header-sep { display: none; }
  .brand-wrap { gap: 7px; }
  .brand-title { font-size: 22px; }
  .brand-logo-svg { width: 29px;height: 29px; }
  .mobile-services-capsule { padding: 6px 10px;font-size: 11px; }
  .mobile-services-capsule > span:first-child { display: none; }
  section.hero-section {
    height: auto;
    min-height: 550px;
    padding: 0;
    gap: 0;
    text-align: left;
  }
  .hero-content {
    width: calc(100% - 44px);
    height: auto;
    min-height: 550px;
    padding: 28px 0;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto minmax(180px,47vw) auto auto;
    align-content: start;
    justify-items: start;
    align-items: start;
  }
  .hero-title { grid-row: 1;max-width: none;font-size: clamp(30px,8.5vw,42px);line-height: 1.38;letter-spacing: .045em;margin: 0 0 11px; }
  .hero-sub-en { grid-row: 2;max-width: 180px;font-size: 8px;line-height: 1.75;letter-spacing: .19em;margin: 0; }
  .hero-rule { display: none; }
  .hero-quote-block { grid-row: 4;border: 0;padding: 0;width: calc(100% - 85px);max-width: 325px;text-align: left;font-size: 12px;line-height: 1.95;letter-spacing: .035em;margin: 0 0 19px; }
  .hero-quote-block span:last-child { max-width: none; }
  .btn-hero-primary { grid-row: 5;min-height: 43px;padding: 10px 24px;font-size: 13px;gap: 19px; }
  .hero-visual-stage { inset: 74px 0 auto; width: 100%;height: 270px;mask-image:none;-webkit-mask-image:none; }
  .hero-mountain-img,[data-theme="light"] .hero-mountain-img {
    max-width: none;
    object-position: 66% center;
    mask-image: linear-gradient(to bottom,transparent 0%,#000 9%,#000 77%,transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 9%,#000 77%,transparent 100%);
  }
  .hero-vertical-quote { display: block;right: 17px;bottom: 50px;width: 74px;font-size: 10px;line-height: 1.9;letter-spacing: .16em;opacity: .92; }
  .hero-vertical-quote .quote-en { font-size: 6px;width: 60px;line-height: 1.7;margin-top: 8px;padding-top: 8px; }
  .hero-threads { display: none; }
  section.archipelago-section { padding-top: 26px; }
}
@media (max-width: 350px) {
  body:has(#view-home:not(.hidden)) .header-container { padding-inline: 14px;gap: 6px; }
  .header-right-actions { gap: 7px; }
  .mobile-services-capsule { padding: 5px 8px;font-size: 10px; }
  .brand-title { font-size: 20px; }
  .brand-logo-svg { width: 25px;height: 25px; }
  .hero-content { width: calc(100% - 36px); }
  .hero-quote-block { font-size: 12px;width: calc(100% - 75px); }
  .hero-vertical-quote { right: 12px;width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-threads .orbit-mote { display: none; }
}