@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Noto+Serif+JP:wght@400;500;600&display=swap');

/* Display text stays live HTML. Fonts have local fallbacks. */
:root {
  --display: 'Cormorant Garamond', 'Baskerville', 'Times New Roman', serif;
  --serif: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}
body {font-weight:400; line-height:1.8; -webkit-font-smoothing:antialiased;}
.site-header {height:auto; min-height:88px; gap:24px; padding-block:18px;}
.site-header .brand {display:flex; flex-direction:row; align-items:center; gap:14px; font:600 clamp(23px,2.15vw,32px)/1.1 var(--display); letter-spacing:.16em;}
.site-header .brand-mark-wrap {display:flex; flex:0 0 58px; align-items:center; justify-content:center;}
.site-header .brand-mark {display:block; width:58px; height:44px; object-fit:contain; filter:drop-shadow(0 2px 7px rgba(36,174,160,.26));}
.site-header .brand-name {display:flex; flex-direction:column; align-items:flex-start;}
.site-header .brand small {font:500 12px/1.5 var(--serif); letter-spacing:.16em; margin-top:7px;}
.site-header nav {gap:clamp(18px,2.3vw,36px); flex-wrap:wrap; justify-content:flex-end;}
.site-header nav a {font:400 14px/1.6 var(--serif); padding-block:10px; letter-spacing:.06em;}
.site-header nav .nav-contact {padding:10px 20px; border-color:#b4a077;}

#hero {height:clamp(620px,52vw,850px); background:#020b16;}
.earth-scene {position:absolute; inset:0; z-index:0; overflow:hidden;}
#earth {display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%;}
.hero-shade {background:linear-gradient(90deg,rgba(2,10,20,.73),rgba(2,10,20,.55) 38%,rgba(2,10,20,.08) 71%),linear-gradient(0deg,rgba(2,10,20,.44),transparent 32%);}
.hero-copy {padding:clamp(112px,11vw,160px) 5.8% 0; width:79%;}
.wordmark {font:500 clamp(25px,3.1vw,46px)/1.25 var(--display); letter-spacing:.14em; margin-bottom:34px;}
.hero-copy h1 {font:500 clamp(40px,4.95vw,78px)/1.12 var(--display); letter-spacing:-.025em; text-shadow:0 2px 22px #020b1677;}
.hero-copy h1 span {overflow-wrap:normal;}
.hero-copy h1 span:first-child {color:#fffdf5; text-shadow:0 0 16px rgba(255,245,211,.34),0 2px 22px #020b1677;}
.hero-copy h1 span:nth-child(2) {color:#f0c85e; background:linear-gradient(105deg,#fff0ad 0%,#f6d56f 36%,#c99531 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none; filter:drop-shadow(0 0 12px rgba(238,190,76,.26));}
#subtitle {font:400 clamp(16px,1.55vw,24px)/2 var(--serif); letter-spacing:.14em; margin-top:28px;}
.hero-caption {font:400 14px/1.8 var(--serif); letter-spacing:.1em;}
#nara-label {font-size:12px; letter-spacing:.13em; text-shadow:0 1px 8px #000;}
#hero-light {opacity:.85;}
#hero-light,#nara-label {visibility:hidden;}
.eyebrow {font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.24em;}
.section-heading>.eyebrow:first-child {color:#bd8d32; font-size:16px; font-weight:600; letter-spacing:.3em;}
.section-heading h2+.eyebrow,.build-copy .eyebrow {color:#d2a94b; font-size:16px; font-weight:600; letter-spacing:.28em;}
/* The gold story line continues through the business and infrastructure sections. */
#hero-thread {stroke-linecap:round;}
#circulation-line path,#bridge-line path {stroke-linecap:round; stroke-linejoin:round;}
.section-heading h2,.build-copy h2,.sub-hero h1,.business-grid h2,.business-statement h2,.company-info h2,.contact h2 {font-family:var(--serif); font-weight:400; line-height:1.55; letter-spacing:.04em;}
.body-copy,.section-heading .body-copy,.build-copy .body-copy,.sub-hero>p:last-child {font-size:16px; line-height:2.15;}
.company-info dd small {font:500 16px/1.8 var(--display); letter-spacing:.12em;}
.contact-actions a {font-family:var(--sans); font-size:16px;}
.business-label {font-size:clamp(14px,1.4vw,21px);}
footer {font-size:14px;}

@media(max-width:1000px) {
  .site-header {flex-wrap:wrap;}
  .site-header nav {justify-content:flex-start;}
  .hero-copy {width:92%;}
}
@media(max-width:700px) {
  .site-header {padding:18px 7% 12px; gap:12px;}
  .site-header nav {display:flex; width:100%; gap:0 20px;}
  .site-header nav a {font-size:14px; min-height:44px; display:flex; align-items:center;}
  .site-header nav .nav-contact {padding:8px 0; border:0; border-radius:0;}
  #hero {height:590px;}
  .earth-scene {inset:auto auto 48px -5%; width:110%; aspect-ratio:1779 / 884; height:auto;}
  #earth {object-fit:fill;}
  .hero-shade {background:linear-gradient(180deg,#020b16 0%,#020b16 35%,#020b1644 66%,#020b1622 83%,#020b16 100%);}
  .site-header .brand-mark-wrap {flex-basis:46px;}
  .site-header .brand-mark {width:46px; height:36px;}
  .site-header .brand {gap:10px; font-size:23px;}
  .hero-copy {padding:100px 7% 0; width:100%;}
  .hero-copy h1 {font-size:clamp(31px,7.8vw,50px); line-height:1.17;}
  #subtitle {font-size:16px; letter-spacing:.04em; margin-top:23px; max-width:none;}
  .hero-caption {left:7%; bottom:17px; font-size:12px;}
  .sub-hero {min-height:0; padding:60px 7%;}
  .sub-hero h1 {font-size:clamp(28px,6.8vw,44px);}
  .section-heading h2,.build-copy h2 {font-size:36px;}
  .business-label {font-size:14px;}
  .contact-actions {flex-direction:column; align-items:flex-start;}
  .contact-actions a {max-width:100%; overflow-wrap:anywhere;}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}}