:root {
  --ink:#17231f;
  --muted:#66716c;
  --bg:#f5f3ed;
  --paper:#fbfaf6;
  --green:#24483b;
  --line:#d7d9d2;
  --accent:#b69b68;
  --max:1180px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Helvetica Neue","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Arial,sans-serif;
  line-height:1.9;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

.site-header {
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max);
  margin:auto;
  padding:0 34px;
  border-bottom:1px solid rgba(23,35,31,.09)
}

.brand {
  display:flex;
  align-items:baseline;
  gap:18px
}

.brand-mark {
  font-family:Georgia,serif;
  font-size:29px;
  letter-spacing:.04em
}

.brand-name {
  font-size:12px;
  letter-spacing:.16em;
  color:var(--muted)
}

.nav {
  display:flex;
  gap:34px;
  font-size:12px;
  letter-spacing:.12em
}

.nav a:hover {
  opacity:.5
}

.hero {
  max-width:var(--max);
  min-height:610px;
  margin:auto;
  padding:110px 34px 70px;
  display:grid;
  grid-template-columns:1.45fr .55fr;
  position:relative;
  overflow:hidden
}

.eyebrow,.section-label,.role {
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--accent)
}

.hero h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(58px,7.3vw,108px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.035em;
  margin:24px 0 38px;
  max-width:900px
}

.lead {
  font-size:18px;
  letter-spacing:.04em;
  max-width:580px
}

.hero-aside {
  position:relative
}

.orb {
  position:absolute;
  border-radius:999px
}

.orb-a {
  width:290px;
  height:290px;
  right:-60px;
  top:60px;
  background:#e8e4d8
}

.orb-b {
  width:140px;
  height:140px;
  right:185px;
  top:260px;
  border:1px solid var(--accent)
}

.line {
  height:1px;
  width:300px;
  position:absolute;
  right:-20px;
  top:215px;
  background:var(--green);
  transform:rotate(-27deg)
}

.section {
  max-width:var(--max);
  margin:auto;
  padding:110px 34px;
  border-top:1px solid var(--line)
}

.section-label {
  margin:0 0 48px
}

.intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}

.intro h2,.people-head h2,.company h2 {
  font-family:Georgia,"Yu Mincho",serif;
  font-weight:400;
  font-size:clamp(36px,4.3vw,62px);
  line-height:1.45;
  margin:0
}

.copy p {
  margin:0 0 24px;
  font-size:15px
}

.focus {
  background:var(--bg);
  max-width:none;
  padding-left:max(34px,calc((100vw - var(--max))/2 + 34px));
  padding-right:max(34px,calc((100vw - var(--max))/2 + 34px))
}

.focus-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #bdc4be;
  border-bottom:1px solid #bdc4be
}

.focus-grid article {
  padding:42px 38px 46px 0;
  min-height:280px
}

.focus-grid article+article {
  border-left:1px solid #bdc4be;
  padding-left:38px
}

.focus-grid span {
  font-family:Georgia,serif;
  color:var(--accent)
}

.focus-grid h3 {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:28px;
  margin:38px 0 20px
}

.focus-grid p {
  font-size:14px;
  color:#53605a
}

.portfolio-link {
  margin-top:54px;
  padding:27px 0;
  border-bottom:1px solid #bdc4be;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.portfolio-link small {
  display:block;
  font-size:9px;
  letter-spacing:.2em;
  color:var(--muted)
}

.portfolio-link strong {
  font-family:Georgia,serif;
  font-size:25px;
  font-weight:400
}

.portfolio-link a {
  font-size:12px;
  border-bottom:1px solid var(--ink)
}

.people-head {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:90px;
  margin-bottom:100px
}

.people-head>p {
  font-size:15px;
  margin-top:20px
}

.person {
  display:grid;
  grid-template-columns:330px 1fr;
  gap:86px;
  align-items:start;
  padding:70px 0;
  border-top:1px solid var(--line)
}

.person.reverse {
  grid-template-columns:330px 1fr
}

.person img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  filter:grayscale(15%)
}

.person-body h3 {
  font-family:"Yu Mincho",serif;
  font-size:33px;
  font-weight:400;
  margin:10px 0 28px
}

.person-body h3 small {
  font-family:Georgia,serif;
  font-size:13px;
  color:var(--muted);
  margin-left:16px;
  letter-spacing:.05em
}

.person-body p:not(.role) {
  font-size:14px;
  margin:0 0 18px;
  max-width:680px
}

.company {
  background:var(--green);
  color:#f7f5ef;
  max-width:none;
  padding-left:max(34px,calc((100vw - var(--max))/2 + 34px));
  padding-right:max(34px,calc((100vw - var(--max))/2 + 34px))
}

.company .section-label {
  color:#cab484
}

.company-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}

.company h2 {
  color:#fff
}

.company dl {
  margin:0
}

.company dl div {
  display:grid;
  grid-template-columns:120px 1fr;
  padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.22)
}

.company dt {
  font-size:10px;
  letter-spacing:.16em;
  color:#cabfb1
}

.company dd {
  margin:0;
  font-size:13px
}

footer {
  background:var(--green);
  color:#aebdb6;
  border-top:1px solid rgba(255,255,255,.15);
  padding:28px max(34px,calc((100vw - var(--max))/2 + 34px));
  display:flex;
  justify-content:space-between;
  font-family:Georgia,serif;
  font-size:11px;
  letter-spacing:.08em
}

.heading-line {
  display:block;
  white-space:nowrap
}

.hero-copy {
  min-width:0
}

.people-head h2,.company-grid h2,.intro-grid h2 {
  min-width:0
}

@media(max-width:820px) {
  .site-header {
    height:76px;
    padding:0 20px
  }

  .brand-name,.nav {
    display:none
  }

  .hero {
    display:block;
    min-height:520px;
    padding:82px 20px 55px
  }

  .hero h1 {
    font-size:52px
  }

  .hero-aside {
    display:none
  }

  .section {
    padding:78px 20px
  }

  .intro-grid,.people-head,.company-grid {
    grid-template-columns:1fr;
    gap:38px
  }

  .focus {
    padding-left:20px;
    padding-right:20px
  }

  .focus-grid {
    grid-template-columns:1fr
  }

  .focus-grid article {
    min-height:0;
    padding:30px 0
  }

  .focus-grid article+article {
    border-left:0;
    border-top:1px solid #bdc4be;
    padding-left:0
  }

  .focus-grid h3 {
    margin:18px 0 10px
  }

  .portfolio-link {
    align-items:flex-end
  }

  .person,.person.reverse {
    grid-template-columns:1fr;
    gap:35px;
    padding:55px 0
  }

  .person img {
    max-width:280px
  }

  .company {
    padding-left:20px;
    padding-right:20px
  }

  .company dl div {
    grid-template-columns:90px 1fr
  }

  footer {
    padding:25px 20px
  }

  .heading-line {
    white-space:normal
  }

  .hero h1 .heading-line {
    white-space:nowrap
  }

  .people-head h2,.company-grid h2 {
    font-size:clamp(30px,8.2vw,42px);
    line-height:1.4
  }

}

/* --- Heading line-break control --- */
.fixed-heading > span {
  display: block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Keep intended two-line headings readable without orphaned final characters. */
.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 5.8rem);
}

.intro-grid h2, .people-head h2, .company-grid h2 {
  font-size: clamp(2rem, 4vw, 4.2rem);
}

@media (max-width: 700px) {
  .hero h1.fixed-heading {
    font-size: clamp(1.55rem, 7.4vw, 4rem);
  }

  .intro-grid h2.fixed-heading, .people-head h2.fixed-heading, .company-grid h2.fixed-heading {
    font-size: clamp(1.7rem, 7vw, 3.2rem);
  }

}


/* --- Layout balance fix v3 --- */
/* PEOPLE: keep the two columns visually connected on desktop/tablet. */
.people-head {
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  column-gap: 24px;
  align-items: start;
}

.people-head > p {
  max-width: 34rem;
  justify-self: start;
  margin-left: 0;
}

.people-head h2.fixed-heading {
  font-size: clamp(2.4rem, 3.1vw, 3.55rem);
}

/* COMPANY: give the long company name enough width before the info column. */
.company-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(410px, 0.88fr);
  column-gap: 28px;
  align-items: start;
}

.company-grid h2.fixed-heading {
  font-size: clamp(2.35rem, 3.4vw, 3.75rem);
  max-width: 100%;
}

/* Intermediate widths need a little tighter spacing and slightly smaller headings. */
@media (min-width: 821px) and (max-width: 1250px) {
  .people-head {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    column-gap: 18px;
  }

  .people-head h2.fixed-heading {
    font-size: clamp(2rem, 3.1vw, 3rem);
  }

  .people-head > p {
    max-width: 31rem;
  }

  .company-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.88fr);
    column-gap: 24px;
  }

  .company-grid h2.fixed-heading {
    font-size: clamp(2.15rem, 3.15vw, 3.25rem);
  }
}

/* Preserve the existing single-column mobile layout. */
@media (max-width: 820px) {
  .people-head,
  .company-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .people-head > p {
    max-width: none;
  }
}
/* --- End layout balance fix v3 --- */


/* --- ABOUT / PEOPLE centered heading adjustment --- */

/* ABOUT: keep a balanced 50/50 layout and center the heading block
   inside the left column while keeping the text itself left-aligned. */
.intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.intro-grid h2.fixed-heading {
  justify-self: center;
  width: max-content;
  max-width: 100%;
  text-align: center;
  font-size: clamp(2.7rem, 4.25vw, 4.35rem);
}

/* PEOPLE: give the long heading more room, then center the heading block
   within that left column. */
.people-head {
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  column-gap: 24px;
}

.people-head h2.fixed-heading {
  justify-self: center;
  width: max-content;
  max-width: 100%;
  text-align: center;
  font-size: clamp(2.65rem, 3.75vw, 4rem);
}

/* Intermediate desktop/tablet widths. */
@media (min-width: 821px) and (max-width: 1250px) {
  .intro-grid h2.fixed-heading {
    font-size: clamp(2.4rem, 4vw, 3.8rem);
  }

  .people-head {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    column-gap: 20px;
  }

  .people-head h2.fixed-heading {
    font-size: clamp(2.3rem, 3.45vw, 3.45rem);
  }
}

/* Mobile remains single-column; don't force max-content positioning. */
@media (max-width: 820px) {
  .intro-grid h2.fixed-heading,
  .people-head h2.fixed-heading {
    justify-self: start;
    width: auto;
    max-width: 100%;
  }
}
/* --- End ABOUT / PEOPLE centered heading adjustment --- */

/* --- Mobile layout correction 2026-08-27 ---
   Must remain after the desktop Layout balance fix so mobile rules win. */
@media (max-width: 820px) {
  .intro-grid,
  .people-head,
  .company-grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .people-head {
    row-gap: 38px;
  }

  .people-head > p {
    max-width: none;
    width: 100%;
  }

  .company-grid {
    row-gap: 38px;
  }

  .company-grid h2,
  .people-head h2,
  .intro-grid h2,
  .hero-copy,
  .copy,
  .person-body,
  .company-grid dl {
    min-width: 0;
    max-width: 100%;
  }

  .portfolio-link {
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .fixed-heading > span {
    white-space: normal;
  }

  .hero h1.fixed-heading > span {
    white-space: nowrap;
  }

  .company dl div {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
  }

  .portfolio-link {
    align-items: flex-start;
    flex-direction: column;
  }

  footer {
    gap: 12px;
    flex-wrap: wrap;
  }
}