@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Libre+Caslon+Display&display=swap');
:root{--cream:#f2efe5;--green:#17382c;--mid:#315344;--sage:#d8dfd2;--line:#aeb9ac;--white:#fbfaf5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--green);font-family:'DM Sans',sans-serif}a{color:inherit}.topbar{height:98px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{display:flex;flex-direction:column;text-decoration:none;line-height:.9}.brand span{font-family:'Libre Caslon Display',serif;font-size:27px;letter-spacing:.13em}.brand small{font-size:8px;letter-spacing:.32em;margin-top:9px}.topbar nav{display:flex;gap:2.3rem}.topbar nav a{text-decoration:none;text-transform:uppercase;font-size:10px;letter-spacing:.17em}.menu{display:none;background:transparent;border:0;color:var(--green);font-size:10px;letter-spacing:.16em}.hero{min-height:calc(100vh - 98px);position:relative;overflow:hidden;display:grid;grid-template-columns:12% 76% 12%;align-items:center}.hero-copy{max-width:940px;padding:7vw 2vw 7vw 4vw;z-index:2}.eyebrow,.index{text-transform:uppercase;letter-spacing:.2em;font-size:9px;font-weight:600}.hero h1,.manifesto h2,.services h2,.sam h2,.area h2,.contact h2{font-family:'Libre Caslon Display',serif;font-weight:400}.hero h1{font-size:clamp(74px,9vw,145px);line-height:.82;letter-spacing:-.04em;margin:.34em 0}.hero h1 em,.manifesto h2 em,.contact h2 em{font-weight:400;color:#547060}.standfirst{font-size:18px;line-height:1.65;max-width:660px}.hero-actions{display:flex;align-items:center;gap:32px;margin-top:32px}.button{background:var(--green);color:var(--cream);text-decoration:none;padding:17px 23px;font-size:11px;letter-spacing:.08em}.quiet-link{font-size:11px;text-decoration:none;border-bottom:1px solid var(--green);padding-bottom:4px}.side-note{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;gap:18px;font-size:8px;letter-spacing:.2em;justify-self:center}.side-note b{font-family:'Libre Caslon Display';font-size:22px;font-weight:400}.hero-mark{position:absolute;width:min(56vw,760px);height:min(56vw,760px);right:-7vw;bottom:-11vw;opacity:.15}.hero-mark svg{width:100%;height:100%;fill:none;stroke:var(--green);stroke-width:1.2}.manifesto{padding:10vw 7vw;border-top:1px solid var(--line);display:grid;grid-template-columns:16% 48% 36%;gap:0}.manifesto h2{font-size:clamp(48px,5.4vw,88px);line-height:.98;margin:0 0 3vw}.large-copy{font-family:'Libre Caslon Display';font-size:27px;line-height:1.4}.manifesto-small{padding:7vw 2vw 0 4vw;font-size:14px;line-height:1.8}.services{background:var(--green);color:var(--cream);padding:9vw 7vw}.services-head{display:grid;grid-template-columns:18% 48% 34%;align-items:start}.services h2,.sam h2,.area h2,.contact h2{font-size:clamp(52px,6vw,96px);line-height:.92;margin:0}.services-head>p:last-child{line-height:1.7;padding:1vw 0 0 3vw;opacity:.8}.service-rows{margin-top:7vw;border-top:1px solid #5d756a}.service-rows article{display:grid;grid-template-columns:8% 35% 57%;align-items:center;padding:27px 0;border-bottom:1px solid #5d756a}.service-rows span{font-size:9px;opacity:.55}.service-rows h3{font-family:'Libre Caslon Display';font-weight:400;font-size:26px;margin:0}.service-rows p{margin:0;font-size:14px;line-height:1.6;opacity:.78;max-width:650px}.interlude{height:145px;display:flex;align-items:center;justify-content:center;gap:2.3vw;border-bottom:1px solid var(--line);overflow:hidden}.interlude p{font-family:'Libre Caslon Display';font-size:clamp(18px,2.1vw,34px);letter-spacing:.05em}.interlude i{font-size:16px;color:#718477}.sam{padding:10vw 7vw;display:grid;grid-template-columns:46% 54%;background:var(--sage)}.sam-copy{padding:6vw 3vw 0 2vw;line-height:1.8;font-size:14px}.sam-copy .large-copy{font-size:30px;line-height:1.35}.sam-sign{margin-top:45px;display:flex;flex-direction:column}.sam-sign span{font-family:'Libre Caslon Display';font-size:29px}.sam-sign small{font-size:8px;letter-spacing:.16em;margin-top:7px}.area{padding:9vw 7vw;display:grid;grid-template-columns:18% 8% 49% 25%;align-items:center}.area-line{height:1px;background:var(--green);width:70%}.area p:last-child{font-size:14px;line-height:1.7;padding-left:2vw}.contact{background:#102a21;color:var(--white);padding:9vw 7vw}.contact h2{font-size:clamp(68px,8vw,128px);margin:4vw 0 3vw}.contact h2 em{color:#8da294}.contact-intro{max-width:630px;font-size:17px;line-height:1.7}.contact-grid{margin-top:6vw;border-top:1px solid #536b61}.contact-grid a{display:grid;grid-template-columns:20% 80%;align-items:center;padding:24px 0;border-bottom:1px solid #536b61;text-decoration:none}.contact-grid small{font-size:8px;letter-spacing:.18em}.contact-grid span{font-family:'Libre Caslon Display';font-size:clamp(24px,3vw,45px)}.credentials{display:flex;gap:30px;margin-top:40px;font-size:8px;letter-spacing:.18em}footer{padding:45px 5vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end}footer p{font-size:9px;text-transform:uppercase;letter-spacing:.12em}footer p:last-child{text-align:right}
@media(max-width:800px){.topbar{height:82px}.brand span{font-size:22px}.menu{display:block}.topbar nav{display:none;position:absolute;top:82px;left:0;right:0;background:var(--cream);padding:28px 5vw;flex-direction:column;border-bottom:1px solid var(--line)}.topbar nav.show{display:flex}.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:18vw 6vw 22vw}.hero h1{font-size:17vw}.side-note{display:none}.hero-mark{width:100vw;height:100vw;right:-35vw;bottom:-20vw}.hero-actions{flex-direction:column;align-items:flex-start}.manifesto,.services-head,.sam,.area{grid-template-columns:1fr}.manifesto,.services,.sam,.area,.contact{padding:18vw 6vw}.manifesto h2{margin:9vw 0 5vw}.manifesto-small{padding:6vw 0 0}.services-head h2{margin:9vw 0 5vw}.services-head>p:last-child{padding:0}.service-rows article{grid-template-columns:12% 88%;gap:10px 0}.service-rows p{grid-column:2}.interlude{justify-content:flex-start;padding:0 6vw;width:100%;gap:20px}.interlude p:nth-of-type(n+4),.interlude i:nth-of-type(n+4){display:none}.sam h2{margin-top:9vw}.sam-copy{padding:7vw 0 0}.area-line{display:none}.area h2{margin:9vw 0 5vw}.area p:last-child{padding:0}.contact h2{font-size:17vw;margin:10vw 0 6vw}.contact-grid a{grid-template-columns:1fr;gap:8px}.credentials{flex-direction:column;gap:12px}footer{grid-template-columns:1fr;gap:25px}footer p:last-child{text-align:left}}

/* Actual Hesperis brand asset */
.brand-logo{display:block;line-height:normal}
.brand-logo img{display:block;width:190px;max-height:78px;object-fit:contain;object-position:left center}
.footer-logo img{width:210px}
@media(max-width:800px){
  .brand-logo img{width:150px;max-height:62px}
  .footer-logo img{width:185px}
}

/* V3 refinements — 29 Sep 2026 */

/* Dark Hesperis-green masthead */
.site-header{
  background:#18392B;
  border-bottom-color:rgba(255,255,255,.16);
}
.site-header .nav a,
.site-header .menu-btn{
  color:#fff;
}
.site-header .menu-btn{
  border-color:rgba(255,255,255,.38);
}

/* Larger actual Hesperis logo in the masthead */
.site-header .brand-logo img{
  width:260px;
  max-height:100px;
}

/* The supplied logo has a light field, so give it a clean intentional panel on green */
.site-header .brand-logo{
  background:#f7f6f2;
  padding:7px 12px;
  border-radius:2px;
}

/* Let the introductory copy form a normal paragraph */
.hero-copy p,
.hero .lead{
  max-width:720px;
  width:100%;
}

/* Keep mobile header clean */
@media(max-width:800px){
  .site-header .brand-logo img{
    width:205px;
    max-height:80px;
  }
  .site-header .brand-logo{
    padding:5px 9px;
  }
  .site-header .nav{
    background:#18392B;
  }
  .site-header .nav a{
    color:#fff;
  }
}

/* V4 — definitive live-site corrections */

/* HEADER: Hesperis green with white navigation */
header,
.site-header,
.topbar,
header.topbar {
  background: #18392B !important;
}
header nav a,
.site-header nav a,
.topbar nav a,
.nav a,
header .nav a {
  color: #FFFFFF !important;
}
header .menu-btn,
.site-header .menu-btn,
.topbar .menu-btn {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.55) !important;
}

/* LOGO: deliberately larger */
header .brand-logo img,
.site-header .brand-logo img,
.topbar .brand-logo img,
header .brand img,
.topbar .brand img {
  width: 290px !important;
  max-width: 32vw !important;
  height: auto !important;
  max-height: 112px !important;
}

/* HERO INTRO: normal flowing paragraph */
.hero-text p,
.hero-copy p,
.hero .lede,
.hero .lead,
.hero p.lede,
.hero p.lead {
  width: 100% !important;
  max-width: 720px !important;
  display: block !important;
}

/* Existing desktop grid was constraining the text column. */
.hero-grid,
.hero-inner,
.hero {
  --copy-width: 720px;
}

/* Mobile: paragraph gets essentially the full available screen width */
@media (max-width: 800px) {
  header .brand-logo img,
  .site-header .brand-logo img,
  .topbar .brand-logo img,
  header .brand img,
  .topbar .brand img {
    width: 220px !important;
    max-width: 62vw !important;
    max-height: 90px !important;
  }

  .hero-text,
  .hero-copy,
  .hero-text p,
  .hero-copy p,
  .hero .lede,
  .hero .lead,
  .hero p.lede,
  .hero p.lead {
    width: 100% !important;
    max-width: none !important;
  }
}

/* V5 exact fixes */
.site-header,
header.site-header{
  min-height:112px !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
}
.site-header .inner,
.site-header .header-inner{
  min-height:112px !important;
  align-items:center !important;
}
.site-header .brand-logo{
  align-self:center !important;
  margin:0 !important;
}
.site-header .brand-logo img{
  width:270px !important;
  height:auto !important;
  max-height:96px !important;
  object-fit:contain !important;
  display:block !important;
}

/* Dedicated selector: this is the exact opening paragraph */
.hero-intro{
  width:min(680px, 100%) !important;
  max-width:680px !important;
  min-width:0 !important;
  display:block !important;
  white-space:normal !important;
  line-height:1.6 !important;
  margin-top:30px !important;
}

/* The old grid column itself is what was keeping the paragraph narrow */
.hero-copy,
.hero-text{
  width:min(720px, 100%) !important;
  max-width:720px !important;
  min-width:0 !important;
}

/* On desktop give the text side real room */
@media(min-width:801px){
  .hero-grid{
    grid-template-columns:minmax(0, 720px) 1fr !important;
  }
}
@media(max-width:800px){
  .site-header,
  header.site-header,
  .site-header .inner,
  .site-header .header-inner{
    min-height:88px !important;
  }
  .site-header .brand-logo img{
    width:200px !important;
    max-height:72px !important;
  }
  .hero-intro{
    width:100% !important;
    max-width:none !important;
    line-height:1.55 !important;
  }
}


/* V7 — ROOT CAUSE FIX
   .hero-copy was auto-placed into the hero grid's 12% first column.
   Put it across columns 1–2 so its text has the intended usable width. */
@media (min-width: 801px) {
  .hero-copy {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 940px !important;
    min-width: 0 !important;
  }

  .hero-copy .hero-intro {
    width: 560px !important;
    max-width: 100% !important;
    margin-top: 28px !important;
    line-height: 1.6 !important;
  }

  .side-note {
    grid-column: 2 !important;
    grid-row: 1 !important;
    z-index: 3 !important;
  }
}

/* V8 — final hero spacing cleanup */

/* Keep the logo fully inside the masthead. */
.topbar {
  min-height: 118px !important;
  height: 118px !important;
  align-items: center !important;
  overflow: hidden !important;
}
.topbar .brand-logo {
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  margin: 0 !important;
}
.topbar .brand-logo img {
  width: 270px !important;
  max-width: 100% !important;
  height: 106px !important;
  max-height: 106px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Give the copy and EST marker separate real estate. */
@media (min-width: 801px) {
  .hero-copy {
    grid-column: 1 / 3 !important;
    max-width: 1120px !important;
    padding-right: 260px !important;
    box-sizing: border-box !important;
  }

  .hero-copy .hero-intro {
    width: 760px !important;
    max-width: 100% !important;
  }

  .side-note {
    grid-column: 2 !important;
    justify-self: end !important;
    margin-right: 70px !important;
    transform: none !important;
    z-index: 4 !important;
  }
}

@media (max-width: 800px) {
  .topbar {
    height: 90px !important;
    min-height: 90px !important;
  }
  .topbar .brand-logo img {
    width: 195px !important;
    height: 78px !important;
    max-height: 78px !important;
  }
}