@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Fraunces:opsz,wght@9..144,400;9..144,500&display=swap');

:root {
  --slate: #262d2d;
  --slate-2: #35403f;
  --stone: #eee9df;
  --chalk: #f7f4ee;
  --river: #6f8288;
  --river-pale: #c7d0d0;
  --moss: #6d7864;
  --limestone: #d8cab7;
  --terra: #a65c43;
  --silver: #c7c9c5;
  --ink: #222827;
  --muted: #616967;
  --line: rgba(38,45,45,.19);
  --max: 1440px;
  --pad: clamp(1.1rem, 4vw, 4.6rem);
  --section: clamp(5rem, 10vw, 10rem);
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--stone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { width: 100%; display: block; object-fit: cover; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }
p { margin: 0; }
h1,h2,h3 { margin: 0; line-height: .98; letter-spacing: -.045em; font-weight: 500; }
ul { padding: 0; margin: 0; list-style: none; }

.shell { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .72rem; line-height: 1; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600;
}
.eyebrow::before { content: ""; width: 1.4rem; height: 1px; background: currentColor; }
.section-kicker { color: var(--terra); margin-bottom: 1.8rem; }
.serif { font-family: var(--serif); font-weight: 400; }
.muted { color: var(--muted); }

.skip-link {
  position: absolute; left: 1rem; top: -10rem; z-index: 999;
  background: var(--chalk); padding: .8rem 1rem; border: 1px solid var(--slate);
}
.skip-link:focus { top: 1rem; }

/* Header */
.top-rail {
  background: var(--slate); color: var(--chalk);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.top-rail .shell {
  min-height: 32px; display: flex; justify-content: space-between; align-items: center;
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
}
.site-header { background: rgba(238,233,223,.96); border-bottom: 1px solid var(--line); }
.nav-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 82px; gap: 2rem;
}
.wordmark {
  font-size: 1.02rem; letter-spacing: .14em; line-height: 1.05; text-transform: uppercase;
  font-weight: 600; justify-self: start;
}
.wordmark span { display: block; }
.desktop-nav { display: flex; gap: clamp(1rem, 2.2vw, 2.4rem); justify-content: center; }
.desktop-nav a {
  font-size: .78rem; letter-spacing: .05em; padding: .5rem 0; position: relative;
}
.desktop-nav a::after {
  content:""; position:absolute; left:0; right:100%; bottom:.2rem; height:1px; background:var(--terra);
  transition:right .2s ease;
}
.desktop-nav a:hover::after { right: 0; }
.nav-tag {
  justify-self: end; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.mobile-nav { display: none; }
.mobile-nav summary {
  cursor:pointer; list-style:none; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em;
}
.mobile-nav summary::-webkit-details-marker { display:none; }

/* Hero */
.hero { padding: clamp(2.4rem, 5vw, 5rem) 0 var(--section); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .64fr);
  grid-template-rows: auto auto; gap: 0 clamp(2rem,5vw,6rem); position: relative;
}
.hero-copy { padding-top: clamp(2rem, 5vw, 5rem); border-top: 1px solid var(--slate); }
.hero-code {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(2rem,4vw,4rem);
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
}
.hero h1 { font-size: clamp(4.5rem, 10.8vw, 10.5rem); max-width: 8.2ch; }
.hero .headline-indent { display:block; margin-left: clamp(1rem, 7vw, 7rem); color: var(--river); }
.hero-intro {
  width: min(33rem, 90%); margin: 2.3rem 0 0 auto; display:grid; grid-template-columns: 6rem 1fr; gap:1.2rem;
  align-items:start;
}
.hero-intro .number { color: var(--terra); font-size: .8rem; letter-spacing:.13em; }
.hero-intro p { font-size: clamp(1rem, 1.25vw, 1.2rem); max-width: 31rem; }
.hero-media {
  grid-column: 2; grid-row: 1 / span 2; min-height: 680px; position:relative; isolation:isolate;
}
.hero-media::before {
  content:""; position:absolute; width: 46%; height: 88%; right:-14%; top:6%; background: var(--river);
  z-index:-1;
}
.hero-media img { height:100%; min-height:680px; filter:saturate(.75) contrast(.94); }
.image-label {
  position:absolute; left:-1rem; bottom:1rem; background: var(--chalk);
  padding:.8rem 1rem; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
}
.hero-rail {
  margin-top: 3rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display:grid; grid-template-columns: 1fr 1fr 1fr; grid-column:1;
}
.hero-rail a, .hero-rail span {
  padding:1rem 0; font-size:.7rem; text-transform:uppercase; letter-spacing:.11em;
}
.hero-rail > * + * { border-left: 1px solid var(--line); padding-left:1rem; }
.hero-rail a { color: var(--terra); }

/* Commercial overview */
.overview { padding: var(--section) 0; background: var(--chalk); }
.overview-grid {
  display:grid; grid-template-columns: .38fr 1.25fr .62fr; gap:clamp(1.5rem,4vw,5rem); align-items:start;
}
.overview h2 { font-size:clamp(3rem,6.5vw,7rem); max-width:9ch; }
.overview .statement {
  font-family:var(--serif); font-size:clamp(1.4rem,2.2vw,2.15rem); line-height:1.25;
  color:var(--slate-2); padding-top:.5rem;
}
.overview .detail { max-width:25rem; padding-top: .65rem; }
.overview .detail p + p { margin-top: 1.4rem; }

/* Commerce index */
.commerce { padding: var(--section) 0; }
.commerce-head {
  display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:end; margin-bottom:4rem;
}
.commerce h2 { font-size:clamp(3.2rem,7vw,7.2rem); max-width:8ch; }
.commerce-head p { max-width:31rem; justify-self:end; }
.trade-index { border-top:1px solid var(--slate); }
.trade-row {
  display:grid; grid-template-columns: 7rem minmax(180px,.8fr) minmax(250px,1.1fr) minmax(180px,.65fr);
  align-items:center; gap:2rem; padding:1.35rem 0; border-bottom:1px solid var(--line);
}
.trade-row .n { font-family:var(--serif); font-size:2rem; color:var(--river); }
.trade-row h3 { font-size:clamp(1.35rem,2.2vw,2.1rem); letter-spacing:-.025em; }
.trade-row p { font-size:.9rem; color:var(--muted); max-width:33rem; }
.trade-row .strip { height:74px; overflow:hidden; }
.trade-row .strip img { height:100%; transition:transform .35s ease; filter:saturate(.7); }
.trade-row:hover .strip img { transform:scale(1.035); }

/* Approach */
.approach { padding: var(--section) 0; background:var(--slate); color:var(--chalk); }
.approach-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(3rem,7vw,8rem); }
.approach h2 { font-size:clamp(3.2rem,6.8vw,7rem); max-width:7.4ch; }
.method-list { border-top:1px solid rgba(255,255,255,.25); }
.method {
  display:grid; grid-template-columns:5rem 1fr 1fr; gap:2rem; padding:1.35rem 0;
  border-bottom:1px solid rgba(255,255,255,.16); align-items:start;
}
.method .n { color:var(--limestone); letter-spacing:.12em; }
.method strong { font-weight:500; font-size:1.12rem; }
.method p { color:rgba(247,244,238,.7); }

/* Trade flow */
.flow { padding: var(--section) 0; background:var(--river-pale); }
.flow h2 { font-size:clamp(3rem,7vw,7.5rem); margin-bottom:4rem; }
.flow-line {
  position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--slate);
}
.stage { padding:1.25rem 1.2rem 0 0; min-height:225px; position:relative; }
.stage::before {
  content:""; position:absolute; width:11px; height:11px; border-radius:50%;
  background:var(--terra); top:-6px; left:0;
}
.stage:nth-child(even) { padding-top:4rem; }
.stage .n { font-family:var(--serif); font-size:2.3rem; color:var(--river); display:block; margin-bottom:1.5rem; }
.stage h3 { font-size:1.25rem; margin-bottom:.8rem; letter-spacing:-.02em; }
.stage p { max-width:12rem; font-size:.86rem; color:var(--slate-2); }

/* Goods */
.goods { padding: var(--section) 0; background:var(--chalk); }
.goods-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:3.5rem; }
.goods h2 { font-size:clamp(3.2rem,7vw,7.2rem); max-width:8ch; }
.goods-head p { max-width:31rem; }
.image-grid {
  display:grid; grid-template-columns:1.25fr .8fr .92fr; grid-template-rows:300px 230px; gap:1rem;
}
.photo { position:relative; overflow:hidden; background:var(--silver); }
.photo img { height:100%; filter:saturate(.72) contrast(.94); transition:transform .5s ease; }
.photo:hover img { transform:scale(1.025); }
.photo-a { grid-row:1 / span 2; }
.photo-b { grid-column:2 / span 2; }
.photo-label {
  position:absolute; left:0; bottom:0; background:rgba(247,244,238,.94); padding:.55rem .75rem;
  font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
}

/* Principles */
.principles { padding:var(--section) 0; }
.principles-grid { display:grid; grid-template-columns:.55fr 1.45fr; gap:4rem; }
.principles h2 { font-size:clamp(2.8rem,5.5vw,5.8rem); max-width:8ch; }
.principle-list { border-top:1px solid var(--slate); }
.principle {
  display:grid; grid-template-columns:4.5rem 1fr 1fr; gap:1.5rem; align-items:baseline;
  border-bottom:1px solid var(--line); padding:1.55rem 0;
}
.principle .n { color:var(--terra); font-size:.75rem; letter-spacing:.12em; }
.principle strong { font-size:clamp(1.2rem,2vw,1.8rem); font-weight:500; }
.principle p { font-size:.9rem; color:var(--muted); }

/* Journal */
.journal { padding:var(--section) 0; background:var(--limestone); }
.journal-head { display:grid; grid-template-columns:1fr .6fr; gap:3rem; align-items:end; margin-bottom:3.5rem; }
.journal h2 { font-size:clamp(3.1rem,7vw,7rem); }
.journal-head p { max-width:29rem; justify-self:end; }
.journal-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--slate); }
.note { padding:1.5rem 2rem 2rem 0; min-height:280px; }
.note + .note { border-left:1px solid rgba(38,45,45,.25); padding-left:2rem; }
.note .label { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terra); }
.note h3 { font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,2.6vw,2.6rem); line-height:1.05; margin:3rem 0 1.2rem; }
.note p { color:var(--slate-2); max-width:28rem; }

/* Office */
.office { background:var(--slate-2); color:var(--chalk); overflow:hidden; }
.office-grid { display:grid; grid-template-columns:1.2fr .8fr; min-height:590px; }
.office-main { padding:var(--section) var(--pad); position:relative; }
.office-main::before,
.office-main::after {
  content:""; position:absolute; pointer-events:none; opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
  background-size:54px 54px;
}
.office-main::before { inset:0; }
.office-main::after { width:260px; height:260px; right:-60px; bottom:-60px; transform:rotate(12deg); }
.office h2 { font-size:clamp(3.2rem,7vw,7.5rem); max-width:7ch; position:relative; z-index:1; }
.address { margin-top:4rem; font-family:var(--serif); font-size:clamp(1.6rem,3vw,3.2rem); line-height:1.12; position:relative; z-index:1; }
.office-panel {
  background:var(--river); padding:var(--section) clamp(2rem,5vw,5rem);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.office-panel .label { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:2rem; }
.office-panel p { max-width:23rem; color:rgba(247,244,238,.85); font-size:1.05rem; }

/* Footer */
.footer { background:var(--slate); color:var(--chalk); padding:4rem 0 2rem; border-top:1px solid rgba(255,255,255,.12); }
.footer-brand {
  font-size:clamp(3.2rem,9vw,9rem); line-height:.76; letter-spacing:-.055em; text-transform:uppercase; font-weight:500;
}
.footer-brand span { display:block; }
.footer-brand span:last-child { margin-left:12%; color:var(--river-pale); }
.footer-index {
  margin-top:4rem; border-top:1px solid rgba(255,255,255,.2);
  display:grid; grid-template-columns:1.2fr 2fr auto; gap:2rem; padding-top:1.5rem; align-items:start;
}
.footer-address, .footer-meta { font-size:.76rem; color:rgba(247,244,238,.7); line-height:1.7; }
.footer-links { display:flex; flex-wrap:wrap; gap:.8rem 1.8rem; font-size:.78rem; }
.footer-links a:hover { color:var(--limestone); }
.terra-mark { width:10px; height:10px; background:var(--terra); margin-top:.35rem; }

/* Legal */
.legal-hero { padding:clamp(4rem,8vw,8rem) 0 3rem; border-bottom:1px solid var(--line); }
.legal-hero .back { display:inline-block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--terra); margin-bottom:3rem; }
.legal-hero h1 { font-size:clamp(3.3rem,8vw,8rem); max-width:8ch; }
.legal-hero p { max-width:44rem; margin-top:2rem; color:var(--muted); }
.legal-wrap {
  display:grid; grid-template-columns:.33fr .67fr; gap:clamp(2rem,7vw,8rem);
  padding:clamp(3rem,7vw,7rem) 0 var(--section);
}
.legal-aside { position:sticky; top:2rem; align-self:start; }
.legal-aside .code { font-family:var(--serif); font-size:3rem; color:var(--river); }
.legal-aside p { font-size:.78rem; max-width:14rem; color:var(--muted); margin-top:1rem; }
.legal-copy { max-width:760px; }
.legal-copy section { padding-bottom:2.8rem; margin-bottom:2.8rem; border-bottom:1px solid var(--line); }
.legal-copy section:last-child { border-bottom:0; }
.legal-copy h2 { font-size:clamp(1.6rem,2.5vw,2.5rem); letter-spacing:-.025em; margin-bottom:1.1rem; }
.legal-copy p + p { margin-top:1rem; }
.legal-copy ul { list-style:disc; padding-left:1.2rem; margin-top:1rem; }
.legal-copy li + li { margin-top:.55rem; }

/* Responsive */
@media (max-width: 1000px) {
  .desktop-nav, .nav-tag { display:none; }
  .nav-row { grid-template-columns:1fr auto; }
  .mobile-nav { display:block; justify-self:end; position:relative; }
  .mobile-nav[open] .mobile-links {
    display:grid; position:absolute; right:0; top:2.2rem; width:min(78vw,320px); background:var(--chalk);
    border:1px solid var(--line); padding:.5rem; z-index:20; box-shadow:0 12px 28px rgba(38,45,45,.12);
  }
  .mobile-links { display:none; }
  .mobile-links a { padding:.8rem; border-bottom:1px solid var(--line); font-size:.85rem; }
  .mobile-links a:last-child { border-bottom:0; }

  .hero-grid { grid-template-columns:1fr .72fr; gap:2rem; }
  .hero-media, .hero-media img { min-height:560px; }
  .hero h1 { font-size:clamp(4rem,10vw,7.2rem); }
  .overview-grid { grid-template-columns:.4fr 1fr; }
  .overview .detail { grid-column:2; }
  .trade-row { grid-template-columns:4rem .9fr 1.1fr; }
  .trade-row .strip { display:none; }
  .approach-grid, .principles-grid { grid-template-columns:1fr; }
  .approach h2, .principles h2 { max-width:10ch; }
}

@media (max-width: 760px) {
  .top-rail .shell { min-height:28px; }
  .top-rail span:last-child { display:none; }
  .nav-row { min-height:68px; }
  .hero { padding-top:1.4rem; }
  .hero-grid { display:flex; flex-direction:column; }
  .hero-copy { padding-top:1.3rem; }
  .hero h1 { font-size:clamp(4rem,21vw,7rem); }
  .hero .headline-indent { margin-left:0; }
  .hero-intro { width:100%; margin:2rem 0 0; grid-template-columns:3rem 1fr; }
  .hero-media { order:2; min-height:500px; margin-top:2rem; }
  .hero-media img { min-height:500px; }
  .hero-media::before { right:-8%; width:34%; }
  .hero-rail { order:3; grid-template-columns:1fr 1fr; margin-top:1.4rem; }
  .hero-rail span:nth-child(2) { border-left:1px solid var(--line); }
  .hero-rail a { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); padding-left:0; }

  .overview-grid { grid-template-columns:1fr; }
  .overview h2 { max-width:10ch; }
  .overview .detail { grid-column:auto; }
  .overview .statement { margin-top:1rem; }

  .commerce-head, .goods-head, .journal-head { display:block; }
  .commerce-head p, .goods-head p, .journal-head p { margin-top:1.5rem; }
  .trade-row { grid-template-columns:3rem 1fr; gap:.8rem 1rem; padding:1.2rem 0; }
  .trade-row p { grid-column:2; }
  .trade-row .n { font-size:1.5rem; }

  .method { grid-template-columns:3rem 1fr; gap:1rem; }
  .method p { grid-column:2; }

  .flow-line {
    display:block; border-top:0; border-left:1px solid var(--slate); margin-left:.35rem;
  }
  .stage, .stage:nth-child(even) { padding:0 0 2.5rem 2rem; min-height:0; }
  .stage::before { left:-6px; top:.2rem; }
  .stage .n { font-size:1.8rem; margin-bottom:.4rem; }
  .stage p { max-width:28rem; }

  .image-grid { grid-template-columns:1fr 1fr; grid-template-rows:300px 220px 220px; }
  .photo-a { grid-row:1; grid-column:1 / -1; }
  .photo-b { grid-column:1 / -1; }

  .principle { grid-template-columns:3rem 1fr; }
  .principle p { grid-column:2; }

  .journal-grid { grid-template-columns:1fr; }
  .note { min-height:0; padding:1.5rem 0 2rem; }
  .note + .note { border-left:0; border-top:1px solid rgba(38,45,45,.25); padding-left:0; }
  .note h3 { margin-top:1.5rem; }

  .office-grid { grid-template-columns:1fr; min-height:0; }
  .office-main, .office-panel { padding:5rem var(--pad); }
  .office-panel { min-height:300px; }

  .footer-index { grid-template-columns:1fr auto; }
  .footer-links { grid-column:1 / -1; grid-row:2; }

  .legal-wrap { grid-template-columns:1fr; }
  .legal-aside { position:static; display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:start; }
}

@media (max-width: 480px) {
  .top-rail { display:none; }
  .image-grid { display:block; }
  .photo { height:250px; margin-bottom:1rem; }
  .footer-index { grid-template-columns:1fr; }
  .terra-mark { margin-top:0; }
}