:root {
  --paper: #f1ebdf;
  --paper-light: #f8f4ec;
  --ink: #171b1a;
  --ink-soft: #4a4d49;
  --red: #a63125;
  --gold: #b58a2a;
  --footer: #111514;
  --rule: rgba(23,27,26,.15);
  --shadow: 0 24px 70px rgba(32,27,20,.18);
  --shell-max: 1440px;
  --header-h: 108px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper) url("assets/parchment-texture-tile.png") repeat;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button { border-radius: 0; }
.shell { width: min(var(--shell-max), calc(100% - 120px)); margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip-link:focus { top: 12px; }

/* Header intentionally lives inside the hero atmosphere. */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 30;
  background: transparent;
  border: 0;
}
.header-inner {
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(320px,1fr) auto auto;
  align-items: center;
  gap: 48px;
}
.brand { width: min(360px, 28vw); display: block; }
.brand img { width: 100%; height: auto; }
.desktop-nav { display: flex; gap: 46px; align-items: center; }
.desktop-nav a {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .075em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 50%; right: 50%; bottom: -10px;
  background: var(--red);
  transition: .18s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a.active::after { left: 0; right: 0; }

.button {
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease;
}
.button:hover { transform: translateY(-1px); }
.button-dark { color: #f6efe2; background: #121716; border: 1px solid var(--gold); box-shadow: inset 0 0 0 2px rgba(181,138,42,.13); }
.button-dark:hover { background: #232826; }
.button-outline { color: var(--ink); background: rgba(248,244,236,.28); border: 1px solid rgba(23,27,26,.62); }
.lock { position: relative; width: 11px; height: 9px; border: 1.5px solid var(--gold); display: inline-block; margin-top: 4px; }
.lock::before { content:""; position:absolute; left:1.7px; right:1.7px; height:7px; bottom:6px; border:1.5px solid var(--gold); border-bottom:0; border-radius:7px 7px 0 0; }
.header-login { min-width: 152px; }

.menu-toggle { display: none; width: 42px; height: 42px; padding: 8px; border: 0; background: rgba(246,241,232,.38); cursor: pointer; }
.menu-toggle span { display: block; height: 2px; margin: 6px 0; background: var(--ink); }
.mobile-nav { padding-block: 4px 16px; background: rgba(242,237,227,.96); border-top: 1px solid var(--rule); box-shadow: 0 18px 28px rgba(45,39,31,.08); }
.mobile-nav a { display: block; padding: 11px 0; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600; }

/* Hero: one continuous sumi composition. No rectangular art panel. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 700px;
  border-bottom: 1px solid var(--rule);
  background-color: var(--paper);
  background-image: url("assets/hero-construction-dojo-r2.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(242,237,227,.44) 0%, rgba(242,237,227,.18) 34%, rgba(242,237,227,0) 52%);
}
.hero-grid {
  position: relative;
  z-index: 2;
  min-height: 700px;
  display: block;
  padding-top: var(--header-h);
}
.hero-copy {
  position: relative;
  width: 39%;
  min-width: 520px;
  padding: 72px 0 54px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.eyebrow { margin: 0 0 18px; text-transform: uppercase; letter-spacing: .31em; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 500; }
.eyebrow span { color: var(--red); }
.hero h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 4.65vw, 72px);
  line-height: .96;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: -.026em;
}
.red-stroke { display: block; width: 44px; height: 2px; margin: 28px 0 24px; background: var(--red); }
.red-stroke.short { width: 34px; margin: 17px 0 16px; }
.hero-copy > p:not(.eyebrow):not(.hero-note) { max-width: 470px; margin: 0 0 18px; font-size: 17px; line-height: 1.54; }
.hero-login { min-width: 160px; margin-top: 4px; }
.hero-note { margin: 22px 0 0; padding-top: 13px; border-top: 2px solid var(--red); text-transform: uppercase; letter-spacing: .24em; font-size: 9px; }
.hero-art { display: none; }

.values { background: rgba(249,246,239,.72); border-bottom: 1px solid var(--rule); }
.values-grid { min-height: 132px; display: grid; grid-template-columns: repeat(4,1fr); }
.value-item { min-width: 0; display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 18px 28px; border-right: 1px solid var(--rule); }
.value-item:last-child { border-right: 0; }
.value-item img { width: 86px; height: 86px; object-fit: contain; justify-self: center; }
.value-item h2 { margin: 0 0 5px; text-transform: uppercase; letter-spacing: .17em; font-size: 13px; font-weight: 500; }
.value-item p { margin: 0; text-transform: uppercase; letter-spacing: .15em; font-size: 8px; }
.value-item div::after { content:""; display:block; width:22px; height:2px; margin-top:12px; background:var(--gold); }

.info-section { overflow: hidden; border-bottom: 1px solid var(--rule); background: rgba(246,241,232,.34); }
.info-grid { min-height: 330px; display: grid; grid-template-columns: 1fr 1fr; }
.info-card { position: relative; min-height: 330px; overflow: hidden; background-repeat: no-repeat; background-color: transparent; }
.info-card:first-child { border-right: 1px solid var(--rule); }
.about-card { background-image: url("assets/about-sumi-landscape-r2.webp"); background-size: auto 122%; background-position: left 58%; }
.contact-card { background-image: url("assets/contact-sumi-landscape-r2.webp"); background-size: auto 126%; background-position: right 58%; }
.info-card::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; }
.about-card::after { background: linear-gradient(90deg, rgba(242,237,227,0) 0%, rgba(242,237,227,.14) 28%, rgba(242,237,227,.92) 53%, rgba(242,237,227,.98) 100%); }
.contact-card::after { background: linear-gradient(90deg, rgba(242,237,227,.98) 0%, rgba(242,237,227,.92) 48%, rgba(242,237,227,.12) 74%, rgba(242,237,227,0) 100%); }
.info-copy { position: relative; z-index: 3; padding: 58px 46px; }
.about-card .info-copy { margin-left: 24%; max-width: 73%; }
.contact-card .info-copy { max-width: 68%; }
.info-copy h2 { margin:0; font-size:28px; text-transform:uppercase; letter-spacing:.18em; font-weight:500; }
.small-stroke { display:block; width:34px; height:2px; background:var(--red); margin:12px 0 18px; }
.info-copy p { margin:0 0 24px; font-size:15px; line-height:1.65; }
.edge-art { display:none; }

.platform { position:relative; overflow:hidden; min-height:380px; background:rgba(246,241,232,.28); }
.platform-grid { min-height:380px; display:grid; grid-template-columns:42% 58%; align-items:stretch; }
.platform-copy { position:relative; z-index:4; padding:54px 0 46px; }
.section-kicker { margin:0 0 8px; text-transform:uppercase; letter-spacing:.29em; font-family:Arial,Helvetica,sans-serif; font-size:11px; color:var(--red); font-weight:600; }
.platform-copy h2 { margin:0; font-family:Arial,Helvetica,sans-serif; font-size:40px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.platform-copy h2 span { color:var(--gold); font-weight:500; }
.platform-tagline { margin:5px 0 0; text-transform:uppercase; letter-spacing:.24em; font-size:10px; }
.platform-copy > p:not(.section-kicker):not(.platform-tagline) { max-width:500px; margin:0; font-size:15px; line-height:1.62; }
.platform-points { max-width:610px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:28px 0 30px; }
.platform-points div { border-left:2px solid var(--gold); padding-left:10px; }
.platform-points strong, .platform-points small { display:block; text-transform:uppercase; letter-spacing:.1em; font-family:Arial,Helvetica,sans-serif; }
.platform-points strong { font-size:10px; }
.platform-points small { margin-top:2px; font-size:7px; }
.platform-art { position:relative; min-width:0; overflow:visible; }
.platform-art::before { content:""; position:absolute; z-index:2; inset:0 auto 0 -18%; width:34%; background:linear-gradient(90deg,var(--paper),rgba(242,237,227,0)); }
.platform-art img { position:absolute; right:-3%; bottom:-1%; width:112%; max-width:none; height:auto; object-fit:contain; }

.site-footer { background:var(--footer); color:#eee8dc; }
.footer-inner { min-height:116px; display:grid; grid-template-columns:minmax(270px,1fr) auto minmax(290px,1fr); align-items:center; gap:34px; }
.footer-logo { width:290px; height:auto; }
.footer-nav { display:flex; align-items:center; justify-content:center; gap:13px; }
.footer-nav span,.footer-nav a { color:inherit; text-decoration:none; text-transform:uppercase; letter-spacing:.15em; font-size:8px; font-style:normal; }
.footer-nav i { font-style:normal; color:rgba(238,232,220,.55); }
.footer-inner p { margin:0; text-align:right; text-transform:uppercase; letter-spacing:.22em; font-size:9px; }

.login-dialog { width:min(520px,calc(100% - 32px)); padding:0; border:1px solid rgba(181,138,42,.68); background:var(--paper-light); color:var(--ink); box-shadow:var(--shadow); }
.login-dialog::backdrop { background:rgba(8,11,10,.74); backdrop-filter:blur(3px); }
.login-panel { position:relative; padding:34px; background:var(--paper-light) url("assets/parchment-texture-tile.png") repeat; }
.login-panel > img { width:min(360px,88%); margin:0 0 24px; }
.login-panel h2 { margin:0 0 10px; font-size:31px; font-weight:500; }
.dialog-copy { font-size:15px; }
.login-panel label { display:block; margin:14px 0 6px; font-family:Arial,Helvetica,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.login-panel input { width:100%; height:48px; border:1px solid rgba(23,27,26,.38); border-radius:0; background:rgba(255,255,255,.55); color:var(--ink); padding:0 13px; }
.dialog-submit { width:100%; margin-top:20px; }
.dialog-close { position:absolute; right:13px; top:8px; border:0; background:none; color:var(--ink); font-size:32px; cursor:pointer; }
.login-status { min-height:20px; margin:14px 0 0; color:var(--red); font-size:12px; }
.site-toast { position:fixed; z-index:100; left:50%; bottom:24px; transform:translate(-50%,20px); max-width:min(520px,calc(100% - 32px)); padding:13px 18px; border:1px solid var(--gold); background:var(--ink); color:#f4eddf; font-size:13px; opacity:0; pointer-events:none; transition:.2s ease; }
.site-toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:1199px) {
  :root { --header-h:96px; }
  .shell { width:min(980px,calc(100% - 64px)); }
  .header-inner { grid-template-columns:minmax(260px,1fr) auto auto; gap:26px; }
  .brand { width:min(330px,35vw); }
  .desktop-nav { gap:26px; }
  .hero,.hero-grid { min-height:650px; }
  .hero { background-position:58% center; }
  .hero-copy { width:46%; min-width:390px; padding-top:64px; }
  .hero h1 { font-size:clamp(48px,5.7vw,62px); }
  .hero-copy > p:not(.eyebrow):not(.hero-note) { font-size:16px; max-width:410px; }
  .values-grid { grid-template-columns:1fr 1fr; }
  .value-item { border-bottom:1px solid var(--rule); }
  .value-item:nth-child(2) { border-right:0; }
  .value-item:nth-child(3),.value-item:nth-child(4) { border-bottom:0; }
  .about-card .info-copy { margin-left:20%; max-width:78%; }
  .contact-card .info-copy { max-width:76%; }
  .platform-points { grid-template-columns:1fr 1fr; max-width:420px; }
  .platform-art img { width:126%; right:-14%; bottom:0; }
}

@media (max-width:767px) {
  :root { --header-h:88px; }
  .shell { width:calc(100% - 36px); }
  .header-inner { min-height:var(--header-h); grid-template-columns:minmax(0,1fr) auto auto; gap:10px; }
  .brand { width:min(218px,54vw); }
  .desktop-nav { display:none; }
  .header-login { min-width:94px; min-height:40px; padding:0 12px; font-size:10px; letter-spacing:.12em; }
  .menu-toggle { display:block; }

  .hero { min-height:760px; background-size:auto 100%; background-position:82% center; }
  .hero::before { background:linear-gradient(90deg,rgba(242,237,227,.66) 0%,rgba(242,237,227,.34) 56%,rgba(242,237,227,0) 82%); }
  .hero-grid { min-height:760px; padding-top:var(--header-h); }
  .hero-copy { width:100%; min-width:0; padding:42px 0 26px; }
  .eyebrow { margin-bottom:15px; font-size:11px; }
  .hero h1 { width:92%; font-size:clamp(40px,10.7vw,50px); line-height:.97; letter-spacing:-.025em; }
  .red-stroke { margin:21px 0 19px; }
  .hero-copy > p:not(.eyebrow):not(.hero-note) { max-width:82%; font-size:15px; line-height:1.5; text-shadow:0 1px rgba(246,241,232,.55); }
  .hero-note { margin-top:18px; font-size:8px; }

  .values { background:rgba(249,246,239,.78); }
  .values-grid { grid-template-columns:1fr; padding:12px 0; }
  .value-item,.value-item:nth-child(n) { min-height:94px; grid-template-columns:76px 1fr; gap:16px; padding:12px 18px; border-right:0; border-bottom:1px solid var(--rule); }
  .value-item:last-child { border-bottom:0; }
  .value-item img { width:68px; height:68px; }
  .value-item h2 { font-size:13px; }
  .value-item p { font-size:8px; color:#8b651a; font-weight:600; }
  .value-item div::after { display:none; }

  .info-grid { grid-template-columns:1fr; gap:0; padding-block:0; }
  .info-card { min-height:300px; border:0 !important; border-bottom:1px solid var(--rule) !important; }
  .about-card { background-size:auto 112%; background-position:right 55%; }
  .contact-card { background-size:auto 112%; background-position:right 58%; }
  .about-card::after,.contact-card::after { background:linear-gradient(90deg,rgba(242,237,227,.98) 0%,rgba(242,237,227,.94) 51%,rgba(242,237,227,.22) 82%,rgba(242,237,227,0) 100%); }
  .info-copy,.about-card .info-copy,.contact-card .info-copy { margin:0; max-width:67%; padding:36px 0 32px 18px; }
  .info-copy h2 { font-size:23px; }
  .info-copy p { font-size:14px; line-height:1.58; }
  .button-outline { min-height:42px; padding-inline:18px; font-size:10px; }

  .platform-grid { grid-template-columns:1fr; min-height:690px; }
  .platform-copy { padding:42px 0 24px; }
  .platform-copy h2 { font-size:35px; }
  .platform-points { grid-template-columns:1fr 1fr; max-width:100%; margin-bottom:22px; }
  .platform-art { min-height:330px; margin-inline:-18px; }
  .platform-art::before { display:none; }
  .platform-art img { width:118%; right:-9%; bottom:0; }

  .footer-inner { min-height:170px; grid-template-columns:1fr; gap:14px; padding:25px 0; text-align:center; }
  .footer-logo { width:min(285px,80%); margin-inline:auto; }
  .footer-nav { flex-wrap:wrap; }
  .footer-inner p { text-align:center; }
  .login-panel { padding:30px 24px; }
}

@media (max-width:430px) {
  .shell { width:calc(100% - 28px); }
  .brand { width:min(190px,49vw); }
  .header-login { min-width:84px; padding:0 9px; }
  .menu-toggle { width:38px; padding-inline:6px; }
  .hero { min-height:735px; background-position:83% center; }
  .hero h1 { font-size:clamp(38px,10.5vw,46px); }
  .hero-copy > p:not(.eyebrow):not(.hero-note) { max-width:86%; }
  .info-copy,.about-card .info-copy,.contact-card .info-copy { max-width:70%; padding-left:14px; }
  .platform-art { margin-inline:-14px; }
}

/* R2 browser-QA corrections */
.hero-art-mobile { display: none; }
.site-footer { overflow: hidden; }
.footer-inner > * { min-width: 0; }

@media (min-width: 768px) and (max-width: 1199px) {
  .footer-inner { grid-template-columns: minmax(190px,1fr) auto minmax(170px,1fr); gap: 18px; }
  .footer-logo { width: 215px; }
  .footer-inner p { max-width: 190px; justify-self: end; font-size: 8px; letter-spacing: .16em; }
  .info-copy h2 { font-size: 22px; letter-spacing: .13em; }
  .info-copy p { font-size: 14px; }
  .about-card::after { background: linear-gradient(90deg, rgba(242,237,227,0) 0%, rgba(242,237,227,.20) 24%, rgba(242,237,227,.96) 48%, rgba(242,237,227,.99) 100%); }
  .contact-card::after { background: linear-gradient(90deg, rgba(242,237,227,.99) 0%, rgba(242,237,227,.96) 52%, rgba(242,237,227,.18) 78%, rgba(242,237,227,0) 100%); }
  .about-card .info-copy { margin-left: 18%; max-width: 80%; }
  .contact-card .info-copy { max-width: 76%; }
  .platform-art { overflow: hidden; }
}

@media (max-width: 767px) {
  .hero {
    min-height: 0;
    background-image: none;
    background-color: var(--paper);
  }
  .hero::before { display: none; }
  .hero-grid {
    min-height: 0;
    padding-top: var(--header-h);
    display: flex;
    flex-direction: column;
  }
  .hero-copy { padding: 42px 0 18px; }
  .hero-copy > p:not(.eyebrow):not(.hero-note) { max-width: 100%; text-shadow: none; }
  .hero-art-mobile {
    display: block;
    position: relative;
    height: 430px;
    margin: -6px -18px 0;
    overflow: hidden;
  }
  .hero-art-mobile::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, var(--paper) 0%, rgba(242,237,227,.55) 10%, rgba(242,237,227,0) 27%);
  }
  .hero-art-mobile img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 79% center;
  }
  .value-item img { width: 76px; height: 76px; }
}

@media (max-width: 430px) {
  .hero-art-mobile { margin-inline: -14px; height: 405px; }
  .hero-art-mobile img { object-position: 80% center; }
}

@media (max-width: 780px) and (min-width: 768px) {
  .header-inner { grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; }
  .brand { width: min(245px,34vw); }
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .mobile-nav { width: min(704px,calc(100% - 64px)); }
}

@media (max-width: 767px) {
  .platform-grid { min-height: 0; }
  .platform-art img { width: 145%; right: -23%; }
}

/* =========================================================
   R3 ACCURACY PASS — hero buffer, edge-tucked art, icon scale,
   platform benefit icons, button/lock polish, textured footer.
   ========================================================= */

@media (min-width: 1200px) {
  /* Preserve a clean parchment breathing zone above the red sun so the
     navigation sits on quiet paper, matching the locked illustration. */
  .hero {
    min-height: 735px;
    background-size: cover;
    background-position: center 76px;
  }
  .hero-grid { min-height: 735px; }
  .hero-copy { padding-top: 82px; }

  /* Pull the decorative art toward the physical viewport edges while
     retaining the existing live-content grid. */
  .about-card {
    background-size: auto 128%;
    background-position: -112px 58%;
  }
  .contact-card {
    background-size: auto 132%;
    background-position: calc(100% + 112px) 58%;
  }
  .platform-art img {
    width: 129%;
    right: -12vw;
    bottom: -1%;
  }
}

/* Principles are visual anchors in the approved concept: slightly larger,
   but with generous internal safe space so brushwork never clips. */
.value-item { grid-template-columns: 112px 1fr; gap: 18px; }
.value-item img { width: 100px; height: 100px; padding: 3px; object-fit: contain; }

/* Platform benefit icons restored. */
.platform-points div {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 9px;
  border-left: 0;
  padding-left: 0;
}
.platform-points img { width: 28px; height: 28px; object-fit: contain; }
.platform-points span { display: block; min-width: 0; }

/* Illustration-like button finish: crisp black ink surface, restrained gold
   perimeter and internal hairline rather than a modern flat CTA. */
.button-dark {
  position: relative;
  isolation: isolate;
  min-height: 50px;
  border: 1px solid #9f7823;
  background:
    linear-gradient(rgba(17,21,20,.97),rgba(17,21,20,.97)),
    url("assets/footer-ink-texture-r3.png") repeat;
  box-shadow:
    inset 0 0 0 2px rgba(181,138,42,.16),
    inset 0 0 0 4px rgba(10,13,12,.9);
}
.button-dark::after {
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(181,138,42,.34);
  pointer-events:none;
  z-index:-1;
}
.button-dark:hover { background:#1c211f; }

.lock {
  width: 13px;
  height: 11px;
  margin-top: 4px;
  border: 1.6px solid var(--gold);
}
.lock::before {
  left: 2px;
  right: 2px;
  height: 8px;
  bottom: 8px;
  border-width: 1.6px;
}
.lock::after {
  content:"";
  position:absolute;
  left:50%; top:3px;
  width:2px; height:4px;
  background:var(--gold);
  transform:translateX(-50%);
}

/* Dark sumi texture instead of a flat black footer bar. */
.site-footer {
  position: relative;
  background: #111514 url("assets/footer-ink-texture-r3.png") repeat;
  background-size: 420px 420px;
}
.site-footer::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 38%,rgba(255,255,255,.018) 72%,transparent),
    repeating-linear-gradient(176deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px);
  opacity:.55;
}
.footer-inner { position:relative; z-index:1; }

@media (min-width: 768px) and (max-width: 1199px) {
  .hero { background-position: 58% 54px; }
  .value-item { grid-template-columns: 100px 1fr; }
  .value-item img { width: 90px; height: 90px; }
  .platform-points div { grid-template-columns: 28px 1fr; }
  .platform-points img { width: 26px; height: 26px; }
}

@media (max-width: 767px) {
  .value-item { grid-template-columns: 88px 1fr !important; }
  .value-item img { width: 80px; height: 80px; }
  .platform-points div { grid-template-columns: 28px 1fr; gap:8px; }
  .platform-points img { width: 26px; height: 26px; }
}

/* R3 final scale correction for the four principles. */
@media (min-width: 1200px) {
  .value-item { grid-template-columns: 120px 1fr; }
  .value-item img { width: 110px; height: 110px; }
}

/* =========================================================
   R4 BALANCE / TUCK PASS
   Restores the approved composition geometry without changing
   the page structure or introducing new visual direction.
   ========================================================= */

@media (min-width: 1200px) {
  /* Header remains a true overlay. The hero artwork is fitted inside the
     hero from the navigation atmosphere to the bottom rule, not shifted
     down as a separate rectangular panel. */
  .site-header { background: transparent !important; }
  .hero {
    min-height: 650px;
    background-size: auto 84%;
    background-position: right bottom;
    background-color: var(--paper);
  }
  .hero-grid { min-height: 650px; }
  .hero-copy { padding-top: 58px; padding-bottom: 42px; }

  /* Edge artwork belongs to the page edge, while copy keeps the reference
     alignment. Remove the constrained shell only for this illustration band. */
  .info-section .info-grid {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .info-card { min-height: 330px; }
  .about-card {
    background-size: auto 100%;
    background-position: left bottom;
  }
  .contact-card {
    background-size: auto 100%;
    background-position: right bottom;
  }
  .about-card::after {
    background: linear-gradient(90deg,
      rgba(242,237,227,0) 0%,
      rgba(242,237,227,.14) 22%,
      rgba(242,237,227,.82) 42%,
      rgba(242,237,227,.98) 58%,
      rgba(242,237,227,.98) 100%);
  }
  .contact-card::after {
    background: linear-gradient(90deg,
      rgba(242,237,227,.98) 0%,
      rgba(242,237,227,.98) 44%,
      rgba(242,237,227,.80) 61%,
      rgba(242,237,227,.12) 82%,
      rgba(242,237,227,0) 100%);
  }
  .about-card .info-copy {
    margin-left: 36%;
    max-width: 58%;
    padding: 58px 32px 48px 0;
  }
  .contact-card .info-copy {
    margin-left: 6%;
    max-width: 58%;
    padding: 58px 32px 48px 0;
  }

  /* The platform illustration is shown whole and tucked to the right edge.
     Height is derived from the section, avoiding the R3 width/offset crop. */
  .platform { min-height: 460px; }
  .platform .platform-grid {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    min-height: 460px;
    grid-template-columns: 42% 58%;
  }
  .platform-copy {
    padding: 58px 24px 48px max(60px, calc((100vw - 1440px) / 2));
  }
  .platform-art { min-height: 460px; overflow: visible; }
  .platform-art::before {
    left: -10%;
    width: 27%;
  }
  .platform-art img {
    width: auto;
    height: 100%;
    max-width: none;
    right: 0;
    bottom: 0;
    object-fit: contain;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Avoid the R3 artwork shift on tablet: keep the nav over parchment and
     fit the hero toward the lower-right without a visible header strip. */
  .site-header { background: transparent !important; }
  .hero {
    background-size: auto 90%;
    background-position: 72% bottom;
  }

  /* Keep tablet decorative art fully present rather than oversized/cropped. */
  .about-card { background-size: auto 100%; background-position: left bottom; }
  .contact-card { background-size: auto 100%; background-position: right bottom; }
  .platform-art { overflow: visible; }
  .platform-art img {
    width: auto;
    height: 100%;
    max-width: none;
    right: -4%;
    bottom: 0;
  }
}

/* R4.1 hero blend correction after browser inspection. */
@media (min-width: 1200px) {
  .hero {
    background-size: auto 96%;
    background-position: right bottom;
  }
  .hero::before {
    background:
      linear-gradient(180deg,
        rgba(242,237,227,.98) 0%,
        rgba(242,237,227,.92) 8%,
        rgba(242,237,227,.52) 16%,
        rgba(242,237,227,0) 24%),
      linear-gradient(90deg,
        rgba(242,237,227,.98) 0%,
        rgba(242,237,227,.98) 26%,
        rgba(242,237,227,.78) 35%,
        rgba(242,237,227,.20) 49%,
        rgba(242,237,227,0) 60%);
  }
}

/* R4.2 tablet platform containment — preserve the complete device asset
   without allowing it to invade live copy. */
@media (min-width: 768px) and (max-width: 1023px) {
  .platform-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .platform-copy {
    padding: 42px 32px 28px;
  }
  .platform-art {
    min-height: 400px;
    margin: 0;
    overflow: hidden;
  }
  .platform-art::before { display: none; }
  .platform-art img {
    width: 100%;
    height: auto;
    max-width: none;
    right: 0;
    bottom: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .platform-art { overflow: hidden; }
  .platform-art img {
    width: 100%;
    height: auto;
    max-width: none;
    right: 0;
    bottom: 0;
  }
}

/* =========================================================
   R5 FINAL-VISUAL POLISH PASS
   Goal-post alignment only: header fit, stronger locks,
   principle scale, blossoming edge art, platform blend,
   and sumi footer finish. No structural redesign.
   ========================================================= */

@media (min-width: 1200px) {
  /* Reference header geometry: brand left, nav truly centred, login right. */
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 34px;
    min-height: 112px;
  }
  .brand {
    width: 350px;
    max-width: 30vw;
    justify-self: start;
    align-self: center;
  }
  .brand img {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
  }
  .desktop-nav { justify-self: center; }
  .header-login {
    justify-self: end;
    min-width: 142px;
    min-height: 47px;
    padding-inline: 20px;
  }

  /* Principles are larger visual anchors, matching the illustration rather
     than reading as tiny utility icons. */
  .values-grid { min-height: 142px; }
  .value-item {
    grid-template-columns: 142px 1fr;
    gap: 14px;
    padding: 14px 24px;
  }
  .value-item img {
    width: 132px;
    height: 132px;
    padding: 0;
  }

  /* Purpose-built transparent sumi artwork now grows from the page edges.
     It is not squeezed into a background box. */
  .about-card,
  .contact-card {
    background-image: none !important;
  }
  .edge-art {
    display: block;
    position: absolute;
    z-index: 0;
    top: 50%;
    width: auto;
    max-width: none;
    height: 132%;
    transform: translateY(-50%);
    object-fit: contain;
    pointer-events: none;
  }
  .edge-art-left { left: -3.5%; }
  .edge-art-right { right: -3.5%; }
  .about-card::after {
    background: linear-gradient(90deg,
      rgba(242,237,227,0) 0%,
      rgba(242,237,227,.04) 22%,
      rgba(242,237,227,.38) 39%,
      rgba(242,237,227,.88) 56%,
      rgba(242,237,227,.98) 68%,
      rgba(242,237,227,.98) 100%);
  }
  .contact-card::after {
    background: linear-gradient(90deg,
      rgba(242,237,227,.98) 0%,
      rgba(242,237,227,.98) 34%,
      rgba(242,237,227,.84) 47%,
      rgba(242,237,227,.34) 63%,
      rgba(242,237,227,.04) 80%,
      rgba(242,237,227,0) 100%);
  }

  /* Transparent platform illustration can bloom into the parchment instead
     of beginning at a visible rectangular seam. */
  .platform-art {
    overflow: visible;
    min-height: 430px;
  }
  .platform-art::before { display: none; }
  .platform-art img {
    width: 118%;
    height: auto;
    max-width: none;
    right: -4%;
    bottom: -1%;
    object-fit: contain;
  }
}

/* A filled, weightier lock matching the goal-post artwork. */
.lock {
  position: relative;
  width: 14px;
  height: 11px;
  margin-top: 5px;
  border: 0;
  border-radius: 1px;
  background: var(--gold);
  box-shadow: 0 0 0 1px rgba(181,138,42,.14);
}
.lock::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  left: 1px;
  top: -7px;
  border: 2px solid var(--gold);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.lock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 2px;
  height: 5px;
  border-radius: 2px;
  background: #111514;
  transform: translateX(-50%);
}

/* Goal-post button dimensions: compact, deliberate, double-edged ink frame. */
.header-login.button-dark { letter-spacing: .17em; }
.hero-login { min-width: 150px; }
.button-dark {
  border-color: #a17a26;
  box-shadow:
    inset 0 0 0 2px rgba(181,138,42,.18),
    inset 0 0 0 4px rgba(7,10,9,.92),
    0 1px 0 rgba(255,255,255,.06);
}

/* Footer now behaves like a painted sumi band rather than flat UI chrome. */
.site-footer {
  background-color: #101413;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.10)),
    url("assets/footer-sumi-texture-r5.png");
  background-repeat: repeat, repeat;
  background-size: auto, 1200px 260px;
  border-top: 1px solid rgba(10,12,11,.86);
}
.site-footer::before {
  background:
    linear-gradient(90deg,rgba(255,255,255,.018),transparent 26%,rgba(255,255,255,.012) 60%,transparent),
    repeating-linear-gradient(178deg,rgba(255,255,255,.012) 0 1px,transparent 1px 8px);
  opacity: .72;
}
.footer-inner { min-height: 124px; }
.footer-logo { width: 278px; }
.footer-inner p {
  position: relative;
  padding-right: 34px;
}
.footer-inner p::after {
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:22px;
  height:2px;
  background:var(--red);
  transform:translateY(-50%);
}

@media (min-width: 768px) and (max-width: 1199px) {
  .header-inner { grid-template-columns: 1fr auto auto; }
  .brand img { max-height: 88px; object-fit: contain; }
  .value-item { grid-template-columns: 116px 1fr; }
  .value-item img { width: 108px; height: 108px; padding: 0; }

  .about-card,
  .contact-card { background-image: none !important; }
  .edge-art {
    display:block;
    position:absolute;
    z-index:0;
    top:50%;
    height:120%;
    width:auto;
    max-width:none;
    transform:translateY(-50%);
  }
  .edge-art-left { left:-8%; }
  .edge-art-right { right:-8%; }
  .about-card::after { background:linear-gradient(90deg,rgba(242,237,227,.04),rgba(242,237,227,.92) 54%,rgba(242,237,227,.99) 100%); }
  .contact-card::after { background:linear-gradient(90deg,rgba(242,237,227,.99),rgba(242,237,227,.90) 48%,rgba(242,237,227,.04) 100%); }

  .platform-art img { width: 108%; right: -4%; }
}

@media (max-width: 767px) {
  .brand img { max-height: 72px; object-fit: contain; }
  .value-item { grid-template-columns: 98px 1fr !important; }
  .value-item img { width: 92px; height: 92px; padding: 0; }

  .about-card,
  .contact-card { background-image: none !important; }
  .edge-art {
    display:block;
    position:absolute;
    z-index:0;
    right:-18%;
    left:auto;
    bottom:-12%;
    top:auto;
    height:118%;
    width:auto;
    max-width:none;
    transform:none;
  }
  .about-card::after,
  .contact-card::after {
    background:linear-gradient(90deg,rgba(242,237,227,.99) 0%,rgba(242,237,227,.94) 48%,rgba(242,237,227,.25) 78%,rgba(242,237,227,0) 100%);
  }
  .platform-art img { width: 122%; right: -11%; }
  .footer-inner { min-height: 174px; }
  .footer-inner p { padding-right:0; }
  .footer-inner p::after { display:none; }
}

/* R5.1 browser-inspection correction: preserve the improved blending without
   letting the transparent platform artwork invade the live benefit copy. */
@media (min-width: 1200px) {
  .brand { width: 360px; max-width: 31vw; }
  .brand img { max-height: none; }
  .platform-art img {
    width: 100%;
    right: 0;
    bottom: 0;
  }
  .footer-logo { width: 292px; }
}

/* =========================================================
   R6 COHESION / BLOOM PASS
   Final visual integration only. Structure and copy remain locked.
   ========================================================= */

@media (min-width: 1200px) {
  /* Let the sumi edge pieces grow into the parchment instead of reading as
     narrow side decorations. The R6 assets have a true transparent fade. */
  .info-card { min-height: 350px; }
  .edge-art {
    top: auto;
    bottom: -5%;
    height: 154%;
    transform: none;
    opacity: .98;
  }
  .edge-art-left { left: -1.25%; }
  .edge-art-right { right: -1.25%; }

  /* The old protective wash was too strong and visually squeezed the art.
     R6 uses a slower, softer dissolve while keeping the live copy pristine. */
  .about-card::after {
    background: linear-gradient(90deg,
      rgba(242,237,227,0) 0%,
      rgba(242,237,227,.02) 28%,
      rgba(242,237,227,.16) 44%,
      rgba(242,237,227,.56) 61%,
      rgba(242,237,227,.90) 75%,
      rgba(242,237,227,.97) 100%);
  }
  .contact-card::after {
    background: linear-gradient(90deg,
      rgba(242,237,227,.97) 0%,
      rgba(242,237,227,.90) 25%,
      rgba(242,237,227,.56) 39%,
      rgba(242,237,227,.16) 56%,
      rgba(242,237,227,.02) 72%,
      rgba(242,237,227,0) 100%);
  }
  .about-card .info-copy {
    margin-left: 35.5%;
    max-width: 58.5%;
    padding-top: 60px;
  }
  .contact-card .info-copy {
    margin-left: 6%;
    max-width: 58.5%;
    padding-top: 60px;
  }

  /* Show the complete device composition with a little air above it and a
     natural transparent dissolve into the copy. No top/right crop. */
  .platform { min-height: 470px; }
  .platform .platform-grid { min-height: 470px; }
  .platform-art {
    min-height: 470px;
    overflow: visible;
  }
  .platform-art img {
    width: auto;
    height: 94%;
    max-width: none;
    right: 0;
    bottom: 0;
    object-fit: contain;
  }

  /* One final small lift so the four principle illustrations carry the same
     visual authority as the reference without changing the strip geometry. */
  .value-item { grid-template-columns: 148px 1fr; }
  .value-item img { width: 138px; height: 138px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .edge-art {
    top: auto;
    bottom: -5%;
    height: 142%;
    transform: none;
  }
  .edge-art-left { left: -4%; }
  .edge-art-right { right: -4%; }
  .about-card::after {
    background: linear-gradient(90deg,rgba(242,237,227,0),rgba(242,237,227,.12) 36%,rgba(242,237,227,.88) 67%,rgba(242,237,227,.98));
  }
  .contact-card::after {
    background: linear-gradient(90deg,rgba(242,237,227,.98),rgba(242,237,227,.88) 33%,rgba(242,237,227,.12) 64%,rgba(242,237,227,0));
  }
  .platform-art img {
    width: auto;
    height: 94%;
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 767px) {
  /* On phones the art becomes an atmospheric right-side wash rather than a
     squashed miniature of the desktop composition. */
  .info-card { min-height: 320px; }
  .edge-art {
    top: auto;
    bottom: -8%;
    right: -14%;
    left: auto;
    height: 132%;
    transform: none;
    opacity: .92;
  }
  .about-card::after,
  .contact-card::after {
    background: linear-gradient(90deg,
      rgba(242,237,227,.99) 0%,
      rgba(242,237,227,.94) 45%,
      rgba(242,237,227,.48) 70%,
      rgba(242,237,227,.08) 90%,
      rgba(242,237,227,0) 100%);
  }
  .platform-art { min-height: 340px; overflow: hidden; }
  .platform-art img {
    width: auto;
    height: 100%;
    max-width: none;
    right: -7%;
    bottom: 0;
  }
}

/* R6.1 mobile platform preservation — keep the complete device composition
   visible on narrow screens rather than filling the art well by height. */
@media (max-width: 767px) {
  .platform-art { min-height: 275px; }
  .platform-art img {
    width: 124%;
    height: auto;
    max-width: none;
    right: -12%;
    bottom: 0;
  }
}
@media (max-width: 430px) {
  .platform-art { min-height: 260px; }
  .platform-art img { width: 128%; right: -14%; }
}

/* =========================================================
   R7 FINAL COHESION PASS
   Locked: layout, About Us, Contact Us, principles, footer.
   Scope: hero fade + Platform fit only.
   ========================================================= */

/* Hero artwork now dissolves into the parchment rather than reading as a
   background image that simply stops at the copy/section boundaries. */
@media (min-width: 1200px) {
  .hero::before {
    display:block;
    background:
      linear-gradient(90deg,
        rgba(242,237,227,.98) 0%,
        rgba(242,237,227,.90) 17%,
        rgba(242,237,227,.60) 31%,
        rgba(242,237,227,.22) 44%,
        rgba(242,237,227,.04) 56%,
        rgba(242,237,227,0) 66%),
      linear-gradient(180deg,
        rgba(242,237,227,0) 0%,
        rgba(242,237,227,0) 77%,
        rgba(242,237,227,.10) 86%,
        rgba(242,237,227,.42) 94%,
        rgba(242,237,227,.78) 100%);
  }

  /* Keep the complete device composition inside its art well. */
  .platform-art img {
    width: 100%;
    height: auto;
    max-width: none;
    right: 0;
    bottom: 0;
    object-fit: contain;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero::before {
    display:block;
    background:
      linear-gradient(90deg,
        rgba(242,237,227,.96) 0%,
        rgba(242,237,227,.82) 22%,
        rgba(242,237,227,.44) 39%,
        rgba(242,237,227,.10) 56%,
        rgba(242,237,227,0) 70%),
      linear-gradient(180deg,
        rgba(242,237,227,0) 0%,
        rgba(242,237,227,0) 78%,
        rgba(242,237,227,.20) 91%,
        rgba(242,237,227,.64) 100%);
  }
  .platform-art img {
    width: 100%;
    height: auto;
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 767px) {
  /* Mobile uses the dedicated hero art element, so fade that element itself. */
  .hero-art-mobile::before {
    display:block;
    background:
      linear-gradient(180deg,
        var(--paper) 0%,
        rgba(242,237,227,.68) 8%,
        rgba(242,237,227,.16) 21%,
        rgba(242,237,227,0) 35%,
        rgba(242,237,227,0) 78%,
        rgba(242,237,227,.20) 90%,
        rgba(242,237,227,.72) 100%),
      linear-gradient(90deg,
        rgba(242,237,227,.45) 0%,
        rgba(242,237,227,.10) 26%,
        rgba(242,237,227,0) 48%);
  }
  .platform-art img {
    width: 112%;
    height: auto;
    right: -6%;
    bottom: 0;
  }
}

@media (max-width: 430px) {
  .platform-art img { width: 116%; right: -8%; }
}

/* =========================================================
   R8 PRECISION CORRECTION PASS
   Locked: About Us, Contact Us, copy, header, footer, buttons.
   Scope: preserve hero geometry while fading, restore full Platform fit,
   and refine the four-principles bar to the approved illustration.
   ========================================================= */

@media (min-width: 1200px) {
  /* Preserve the approved R6 hero geometry exactly. R8 changes only the
     dissolve, not the scale or position of the artwork. */
  .hero {
    min-height: 650px;
    background-size: auto 96%;
    background-position: right bottom;
  }
  .hero-grid { min-height: 650px; }
  .hero::before {
    display: block;
    background:
      linear-gradient(90deg,
        rgba(242,237,227,.99) 0%,
        rgba(242,237,227,.98) 28%,
        rgba(242,237,227,.88) 34%,
        rgba(242,237,227,.58) 41%,
        rgba(242,237,227,.22) 49%,
        rgba(242,237,227,.05) 55%,
        rgba(242,237,227,0) 60%),
      linear-gradient(180deg,
        rgba(242,237,227,.46) 0%,
        rgba(242,237,227,.16) 8%,
        rgba(242,237,227,0) 16%,
        rgba(242,237,227,0) 87%,
        rgba(242,237,227,.12) 94%,
        rgba(242,237,227,.42) 100%);
  }

  /* Four equal reference-style cells. Remove the full-height template grid
     lines and replace them with inset dividers. */
  .values {
    position: relative;
    z-index: 8;
    border-bottom: 0;
    background: rgba(250,247,240,.90);
    box-shadow:
      0 15px 30px rgba(46,38,28,.13),
      0 4px 10px rgba(46,38,28,.07);
  }
  .values-grid {
    width: 100%;
    max-width: none;
    min-height: 150px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .value-item {
    position: relative;
    min-height: 150px;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 17px;
    padding: 15px 34px;
    border: 0 !important;
  }
  .value-item::before {
    content: "";
    position: absolute;
    top: 23px;
    bottom: 23px;
    right: 0;
    width: 1px;
    background: rgba(70,61,49,.24);
  }
  .value-item:last-child::before { display: none; }
  .value-item img {
    width: 138px;
    height: 138px;
    padding: 0;
  }

  /* Keep the entire Platform composition inside its right-hand art well.
     The transparent left fade remains intact, but no device/tree edge is
     sacrificed to a width-based crop. */
  .platform-art {
    min-height: 470px;
    overflow: visible;
  }
  .platform-art img {
    width: 94%;
    height: auto;
    max-width: none;
    right: 1.5%;
    bottom: 0;
    object-fit: contain;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Keep the same principle treatment in a balanced 2×2 tablet grid. */
  .values {
    position: relative;
    z-index: 8;
    border-bottom: 0;
    box-shadow: 0 12px 24px rgba(46,38,28,.11);
  }
  .values-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }
  .value-item,
  .value-item:nth-child(n) {
    position: relative;
    min-height: 130px;
    grid-template-columns: 116px minmax(0,1fr);
    border: 0 !important;
    padding: 14px 26px;
  }
  .value-item::before {
    content:"";
    position:absolute;
    top:20px;
    bottom:20px;
    right:0;
    width:1px;
    background:rgba(70,61,49,.22);
  }
  .value-item:nth-child(2n)::before { display:none; }
  .value-item:nth-child(-n+2)::after {
    content:"";
    position:absolute;
    left:24px;
    right:24px;
    bottom:0;
    height:1px;
    background:rgba(70,61,49,.18);
  }
  .value-item img { width:108px; height:108px; }

  .hero {
    background-size: auto 90%;
    background-position: 72% bottom;
  }
  .hero::before {
    display:block;
    background:
      linear-gradient(90deg,
        rgba(242,237,227,.98) 0%,
        rgba(242,237,227,.90) 30%,
        rgba(242,237,227,.54) 44%,
        rgba(242,237,227,.16) 57%,
        rgba(242,237,227,0) 68%),
      linear-gradient(180deg,
        rgba(242,237,227,.38) 0%,
        rgba(242,237,227,.08) 12%,
        rgba(242,237,227,0) 22%,
        rgba(242,237,227,0) 88%,
        rgba(242,237,227,.30) 100%);
  }
  .platform-art img {
    width: 94%;
    height: auto;
    right: 3%;
    bottom: 0;
  }
}

@media (max-width: 767px) {
  .values {
    position:relative;
    z-index:8;
    border-bottom:0;
    box-shadow:0 10px 20px rgba(46,38,28,.10);
  }
  .values-grid { padding: 8px 0; }
  .value-item,
  .value-item:nth-child(n) {
    position:relative;
    border:0 !important;
    min-height:100px;
  }
  .value-item::before {
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:0;
    height:1px;
    background:rgba(70,61,49,.18);
  }
  .value-item:last-child::before { display:none; }

  /* Preserve the full Platform illustration on phones as well. */
  .platform-art { min-height: 255px; overflow: hidden; }
  .platform-art img {
    width: 100%;
    height: auto;
    right: 0;
    bottom: 0;
  }
}

/* =========================================================
   R9 HERO SEAM / TRUE FADE PASS
   R8 is the locked visual baseline. Scope is deliberately limited to
   the hero artwork integration: no size change, no copy/layout change,
   no About/Contact/Platform/Principles/footer changes.
   ========================================================= */
@media (min-width: 1200px) {
  .hero {
    /* Same locked R8 scale. The 26px upward tuck uses the former 4% spare
       height at the bottom instead of leaving an obvious blank band above. */
    background-image: url("assets/hero-construction-dojo-r9.webp");
    background-size: auto 96%;
    background-position: right 0 bottom 26px;
    background-color: var(--paper);
  }
  .hero::before {
    /* The asset itself now has real transparency. This overlay is only a
       restrained copy-protection wash, not the fade effect. */
    display: block;
    background:
      linear-gradient(90deg,
        rgba(242,237,227,.22) 0%,
        rgba(242,237,227,.13) 29%,
        rgba(242,237,227,.04) 42%,
        rgba(242,237,227,0) 53%),
      linear-gradient(180deg,
        rgba(242,237,227,0) 0%,
        rgba(242,237,227,0) 88%,
        rgba(242,237,227,.18) 96%,
        rgba(242,237,227,.40) 100%);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero {
    background-image: url("assets/hero-construction-dojo-r9.webp");
    background-size: auto 90%;
    background-position: 72% center;
    background-color: var(--paper);
  }
  .hero::before {
    display:block;
    background:linear-gradient(90deg,
      rgba(242,237,227,.26) 0%,
      rgba(242,237,227,.13) 34%,
      rgba(242,237,227,.03) 50%,
      rgba(242,237,227,0) 62%);
  }
}

@media (max-width: 767px) {
  .hero-art-mobile img { content: url("assets/hero-construction-dojo-r9.webp"); }
  .hero-art-mobile::before {
    background:
      linear-gradient(180deg,
        var(--paper) 0%,
        rgba(242,237,227,.42) 7%,
        rgba(242,237,227,.08) 18%,
        rgba(242,237,227,0) 30%,
        rgba(242,237,227,0) 84%,
        rgba(242,237,227,.15) 93%,
        rgba(242,237,227,.48) 100%);
  }
}

/* =========================================================
   R10 FUNCTIONALITY PASS — VISUAL BASELINE R9 LOCKED
   Adds only Learn More + Contact dialog functionality.
   No R9 page layout / artwork selectors are changed here.
   ========================================================= */
.content-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: min(88vh, 820px);
  padding: 0;
  border: 1px solid rgba(181,138,42,.68);
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: auto;
}
.content-dialog::backdrop {
  background: rgba(8,11,10,.74);
  backdrop-filter: blur(3px);
}
.content-panel {
  position: relative;
  padding: 38px 40px 40px;
  background:
    linear-gradient(rgba(248,244,236,.90), rgba(248,244,236,.90)),
    url("assets/parchment-texture-tile.png") repeat;
}
.content-panel h2 {
  max-width: 590px;
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  font-weight: 500;
}
.content-panel > p:not(.section-kicker):not(.dialog-note):not(.privacy-note) {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.65;
}
.content-panel .small-stroke { margin: 16px 0 6px; }
.learn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0 22px;
  background: rgba(70,61,49,.18);
  border: 1px solid rgba(70,61,49,.18);
}
.learn-grid > div {
  min-height: 94px;
  padding: 18px 20px;
  background: rgba(248,244,236,.86);
}
.learn-grid strong,
.learn-grid span { display: block; }
.learn-grid strong {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
}
.learn-grid span {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
}
.dialog-note {
  margin: 0;
  padding-top: 2px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.dialog-actions .button { min-width: 180px; }
.contact-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.contact-panel label > span,
.contact-message-label > span {
  display: block;
  margin: 0 0 7px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
}
.contact-panel input,
.contact-panel textarea {
  width: 100%;
  border: 1px solid rgba(23,27,26,.38);
  border-radius: 0;
  background: rgba(255,255,255,.56);
  color: var(--ink);
  padding: 12px 13px;
  font: inherit;
  outline: none;
}
.contact-panel input { height: 48px; }
.contact-panel textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.contact-panel input:focus,
.contact-panel textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(181,138,42,.12);
}
.contact-message-label { display: block; margin-top: 16px; }
.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.contact-status {
  min-height: 19px;
  margin: 12px 0 0;
  font-size: 12px;
}
.contact-status.success { color: #315c3c; }
.contact-status.error { color: var(--red); }
.privacy-note {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}
.contact-panel .dialog-submit:disabled { opacity: .72; cursor: wait; }

@media (max-width: 620px) {
  .content-panel { padding: 32px 22px 28px; }
  .learn-grid, .contact-field-grid { grid-template-columns: 1fr; }
  .learn-grid > div { min-height: 76px; }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .dialog-actions .button { width: 100%; min-width: 0; }
}