@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Marcellus&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  --canvas-width: 1440px;
  --canvas-height: 2559px;
  --paper: #f7f2ec;
  --ink: #0d1c36;
  --ink-muted: #1b2a42;
  --navy: #071a31;
  --gold: #b9823f;
  --gold-light: #dcb76f;
  --line: #ded0bd;
  --serif: "Cormorant Garamond", "Garamond", Georgia, serif;
  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
  --radius-small: 3px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-width: var(--canvas-width);
  background: #d9d4cb;
  color: var(--ink);
}

body {
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.debug::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--canvas-width);
  height: var(--canvas-height);
  margin: 0 auto;
  background: url("./reference/renaissance-homepage.png") top center / 100% auto no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 999999;
}

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

.site-canvas {
  position: relative;
  width: var(--canvas-width);
  height: var(--canvas-height);
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
}

.browser-frame {
  position: relative;
  height: 43px;
  background: linear-gradient(90deg, #242523 0%, #111413 46%, #242724 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.browser-lights {
  position: absolute;
  top: 16px;
  left: 18px;
  display: flex;
  gap: 10px;
}

.browser-lights span {
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
}

.browser-lights span:nth-child(1) { background: #f35f56; }
.browser-lights span:nth-child(2) { background: #e9bd43; }
.browser-lights span:nth-child(3) { background: #5dc86a; }

.browser-controls {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0.76;
}

.left-controls { left: 93px; top: 12px; }
.right-controls { right: 18px; top: 12px; }

.browser-controls span {
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(230, 230, 230, 0.85);
  border-radius: 2px;
}

.left-controls span:nth-child(2),
.left-controls span:nth-child(3) {
  width: 12px;
  border-width: 0 0 1px 1px;
  transform: rotate(45deg);
}

.left-controls span:nth-child(3) {
  transform: rotate(225deg);
}

.browser-url {
  position: absolute;
  top: 7px;
  left: 450px;
  width: 546px;
  height: 27px;
  border-radius: 6px;
  background: rgba(116, 120, 116, 0.35);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font: 600 10px/27px var(--sans);
  text-align: center;
}

.lock {
  display: inline-block;
  width: 7px;
  height: 8px;
  margin-right: 5px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.85);
}

.hero {
  position: relative;
  height: 471px;
  background:
    radial-gradient(circle at 72% 36%, rgba(255, 255, 255, 0.92) 0 24%, rgba(247, 242, 235, 0.5) 45%, rgba(247, 242, 235, 0) 68%),
    linear-gradient(90deg, #fffefa 0%, #fbf6ee 54%, #f7f1e8 100%);
  border-bottom: 1px solid var(--line);
}

.site-header {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 92px;
  z-index: 5;
}

.brand {
  position: absolute;
  top: 32px;
  left: 55px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.23em;
  white-space: nowrap;
}

.brand-gold {
  color: var(--gold);
}

.nav {
  position: absolute;
  top: 42px;
  left: 494px;
  display: flex;
  align-items: center;
  gap: 51px;
  color: var(--ink);
  font: 400 10px/1 var(--sans);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: var(--radius-small);
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.button span,
button span {
  font-size: 21px;
  line-height: 0;
  transform: translateY(-1px);
}

.button-dark,
.contact-form button {
  background: var(--navy);
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.button-gold {
  background: linear-gradient(#e5c07a, #d7a95c);
  color: #141b27;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.hero-button {
  position: absolute;
  top: 27px;
  right: 48px;
  width: 246px;
  height: 40px;
}

.hero-art {
  position: absolute;
  right: 2px;
  top: 72px;
  width: 780px;
  height: 398px;
  object-fit: cover;
  z-index: 1;
}

.hero-copy {
  position: absolute;
  top: 124px;
  left: 91px;
  width: 520px;
  z-index: 2;
}

.hero-copy h1 {
  margin: 0;
  color: var(--ink);
  font: 500 75px/0.92 var(--serif);
  letter-spacing: -0.01em;
}

.hero-kicker {
  margin: 13px 0 0;
  color: var(--gold);
  font: 500 24px/1.2 var(--serif);
}

.rule {
  width: 48px;
  height: 1px;
  background: var(--gold);
}

.hero-copy .rule { margin: 17px 0 23px; }

.hero-body {
  width: 425px;
  margin: 0;
  color: var(--ink-muted);
  font: 400 13px/1.82 var(--sans);
  letter-spacing: -0.01em;
}

.summary-strip {
  position: relative;
  height: 211px;
  background: linear-gradient(90deg, #fbf7f1, #f7f2eb 50%, #fbf7ef);
  border-bottom: 1px solid var(--line);
}

.summary-strip::before,
.summary-strip::after {
  content: "";
  position: absolute;
  top: 34px;
  width: 1px;
  height: 147px;
  background: #d7c8b4;
}

.summary-strip::before { left: 512px; }
.summary-strip::after { left: 923px; }

.summary-item {
  position: absolute;
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 18px;
}

.icon-svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ink-stroke {
  fill: none;
  stroke: #26384f;
  stroke-width: 2.1;
}

.gold-stroke {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.1;
}

.gold-fill {
  fill: var(--gold);
}

.icon-faint {
  opacity: 0.42;
}

.icon-thin {
  stroke-width: 1.45;
}

.gold-heavy {
  stroke-width: 2.45;
}

.summary-icon {
  width: 58px;
  height: 60px;
}

.summary-one { top: 32px; left: 87px; width: 380px; }
.summary-two { top: 32px; left: 544px; width: 330px; }
.summary-three { top: 32px; left: 979px; width: 370px; }

.summary-number {
  display: inline-block;
  margin: 7px 17px 0 0;
  color: var(--gold);
  font: 500 23px/1 var(--serif);
}

.summary-item h2 {
  display: inline;
  margin: 0;
  color: var(--ink);
  font: 500 24px/1 var(--serif);
}

.summary-item p:not(.summary-number) {
  margin: 20px 0 0;
  color: var(--ink-muted);
  font: 400 11px/1.75 var(--sans);
}

.summary-item blockquote {
  position: relative;
  margin: 25px 0 0 30px;
  color: var(--ink);
  font: 600 italic 22px/1.25 var(--serif);
}

.summary-item blockquote::before,
.summary-item blockquote::after {
  position: absolute;
  color: var(--gold);
  font-size: 48px;
  line-height: 1;
}

.summary-item blockquote::before {
  content: "\201C";
  left: -33px;
  top: -8px;
}

.summary-item blockquote::after {
  content: "\201D";
  right: -27px;
  bottom: -24px;
}

.navy-banner {
  position: relative;
  height: 141px;
  overflow: hidden;
  background:
    url("./assets/cta-marble-bg-left.png") left top / 430px 141px no-repeat,
    url("./assets/cta-marble-bg-right.png") right top / 197px 141px no-repeat,
    linear-gradient(90deg, #07182f, #0b2038 52%, #07182f);
}

.vitruvian {
  position: absolute;
  left: 258px;
  top: 9px;
  width: 120px;
  height: 96px;
  fill: none;
  stroke: rgba(220, 183, 111, 0.82);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.86;
}

.vitruvian-guide {
  opacity: 0.46;
  stroke-width: 1.25;
}

.vitruvian-figure {
  stroke-width: 1.85;
}

.banner-divider {
  position: absolute;
  left: 408px;
  top: 30px;
  height: 78px;
  width: 1px;
  background: rgba(220, 183, 111, 0.58);
}

.navy-banner p {
  position: absolute;
  left: 456px;
  top: 32px;
  margin: 0;
  color: var(--gold-light);
  font: 500 32px/1.08 var(--serif);
}

.navy-banner .button {
  position: absolute;
  top: 43px;
  right: 158px;
  width: 276px;
  height: 53px;
}

.manifesto {
  position: relative;
  height: 317px;
  background: linear-gradient(90deg, #faf6ef, #fffdf9 48%, #f7f1e8);
  border-bottom: 1px solid var(--line);
}

.manifesto-texture {
  position: absolute;
  right: 0;
  top: 0;
  width: 231px;
  height: 315px;
  object-fit: cover;
  opacity: 0.72;
}

.section-label {
  position: absolute;
  color: var(--gold);
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.12em;
}

.section-label::after {
  content: "";
  display: inline-block;
  width: 31px;
  height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  background: var(--gold);
}

.manifesto-label { top: 52px; left: 90px; }

.manifesto h2 {
  position: absolute;
  top: 100px;
  left: 89px;
  margin: 0;
  color: var(--ink);
  font: 500 42px/1.16 var(--serif);
}

.manifesto-lines {
  position: absolute;
  top: 36px;
  left: 587px;
  width: 300px;
}

.manifesto-lines p {
  margin: 0;
  min-height: 77px;
  padding: 0 0 14px;
  border-bottom: 1px solid #d8c9b4;
  color: var(--ink);
  font: 500 17px/1.28 var(--serif);
}

.manifesto-lines p + p { padding-top: 16px; }

.manifesto blockquote {
  position: absolute;
  top: 78px;
  left: 994px;
  width: 280px;
  margin: 0;
  color: var(--ink);
  font: 600 italic 28px/1.24 var(--serif);
}

.manifesto blockquote span {
  display: block;
  color: var(--gold);
  font-size: 58px;
  line-height: 0.72;
}

.services {
  position: relative;
  height: 329px;
  background: #f3ede2;
  border-bottom: 1px solid var(--line);
}

.services-label {
  top: 39px;
  left: 90px;
  font-size: 12px;
}

.service {
  position: absolute;
  top: 88px;
  width: 220px;
  min-height: 190px;
  padding-left: 0;
  color: var(--ink);
}

.service::after { display: none; }

.service-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 0 28px 0;
}

.service h3 {
  margin: 0 0 16px;
  font: 500 22px/1.08 var(--serif);
}

.service p {
  margin: 0;
  font: 400 13px/1.52 var(--sans);
  color: var(--ink-muted);
}

.service-01 { left: 98px; width: 208px; }
.service-02 { left: 344px; width: 220px; }
.service-03 { left: 590px; width: 220px; }
.service-04 { left: 836px; width: 224px; }
.service-05 { left: 1082px; width: 224px; }

.vision {
  position: relative;
  height: 282px;
  background: linear-gradient(90deg, #f7f2ea, #fffdf9 50%, #f6f0e8);
  border-bottom: 1px solid var(--line);
}

.vision-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 646px;
  height: 281px;
  object-fit: cover;
  opacity: 0.92;
}

.vision-hands {
  position: absolute;
  top: 0;
  right: 0;
  width: 335px;
  height: 282px;
  object-fit: cover;
  opacity: 0.76;
}

.vision-copy {
  position: absolute;
  top: 0;
  left: 642px;
  z-index: 2;
  width: 530px;
  height: 282px;
  padding: 46px 0 0 48px;
  background: rgba(255, 253, 248, 0.93);
  border-left: 1px solid rgba(218, 204, 183, 0.78);
  border-right: 1px solid rgba(218, 204, 183, 0.66);
}

.vision-label {
  position: static;
  margin-bottom: 34px;
}

.vision h2 {
  position: static;
  width: 455px;
  margin: 0;
  font: 500 30px/1.18 var(--serif);
  color: var(--ink);
}

.vision p {
  position: static;
  width: 460px;
  margin: 25px 0 0;
  font: 400 10px/1.78 var(--sans);
  color: var(--ink-muted);
}

.insights {
  position: relative;
  height: 324px;
  background: #f3ede2;
  border-bottom: 1px solid var(--line);
}

.insights-label {
  top: 28px;
  left: 92px;
  font-size: 13px;
}

.insights-label::after,
.leadership-label::after { display: none; }

.insight-card {
  position: absolute;
  top: 78px;
  width: 420px;
  height: 222px;
  background: #f7f1e7;
  border: 1px solid #d7c7b0;
  overflow: hidden;
}

.insight-01 { left: 76px; }
.insight-02 { left: 510px; }
.insight-03 { left: 944px; }

.insight-card img {
  position: absolute;
  top: 32px;
  right: 36px;
  width: 112px;
  height: 142px;
  object-fit: cover;
  opacity: 0.86;
}

.insight-01 img {
  width: 116px;
  object-position: 38% center;
  opacity: 0.9;
}
.insight-02 img {
  object-position: 42% center;
  opacity: 0.78;
}
.insight-03 img {
  object-position: 45% center;
  width: 124px;
  opacity: 0.84;
}

.card-copy {
  position: absolute;
  top: 32px;
  left: 35px;
  z-index: 1;
  width: 215px;
}

.insight-03 .card-copy,
.insight-02 .card-copy { width: 215px; }

.category {
  margin: 0 0 18px;
  color: var(--gold);
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.25em;
}

.insight-card h3 {
  margin: 0 0 18px;
  font: 500 21px/1.08 var(--serif);
  color: var(--ink);
}

.insight-card p:not(.category) {
  margin: 0;
  color: var(--ink-muted);
  font: 400 13px/1.42 var(--sans);
}

.insight-card a {
  position: absolute;
  left: 0;
  top: 167px;
  color: var(--ink);
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.28em;
}

.insight-card a span {
  color: var(--gold);
  margin-left: 7px;
}

.leadership {
  position: relative;
  height: 180px;
  background: linear-gradient(90deg, #fffdf8, #faf5ee 50%, #fffdf8);
  border-bottom: 1px solid var(--line);
}

.leadership-label {
  top: 10px;
  left: 92px;
  font-size: 13px;
}

.leader-portrait {
  position: absolute;
  top: 34px;
  left: 160px;
  width: 176px;
  height: 138px;
  object-fit: cover;
}

.leader-copy {
  position: absolute;
  top: 36px;
  left: 441px;
  width: 360px;
}

.leader-copy h2 {
  margin: 0 0 15px;
  font: 500 27px/1 var(--serif);
  color: var(--ink);
}

.leader-copy p {
  margin: 0 0 13px;
  color: var(--ink-muted);
  font: 500 9.5px/1.45 var(--serif);
}

.stat {
  position: absolute;
  top: 34px;
  width: 155px;
  height: 126px;
  text-align: center;
  border-left: 1px solid #ddd0bd;
}

.stat-01 { left: 842px; }
.stat-02 { left: 1020px; }
.stat-03 { left: 1198px; border-right: 1px solid #ddd0bd; }

.stat-icon {
  display: block;
  width: 62px;
  height: 54px;
  margin: 0 auto 8px;
}

.stat strong {
  display: block;
  font: 500 27px/1 var(--serif);
  color: var(--ink);
}

.stat span {
  display: block;
  margin-top: 8px;
  color: var(--ink-muted);
  font: 500 9.5px/1.28 var(--sans);
}

.contact {
  position: relative;
  height: 157px;
  background: #fbf7f1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.contact-copy {
  position: absolute;
  top: 27px;
  left: 82px;
}

.contact-copy h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font: 500 41px/1 var(--serif);
}

.contact-copy p {
  margin: 0 0 23px;
  color: var(--ink);
  font: 500 20px/1 var(--serif);
}

.contact-form {
  position: absolute;
  inset: 24px auto auto 480px;
  width: 870px;
  height: 110px;
}

.contact-form input,
.contact-form textarea {
  position: absolute;
  height: 32px;
  border: 1px solid #d7c9b6;
  border-radius: 2px;
  background: rgba(255, 252, 247, 0.72);
  padding: 0 13px;
  color: var(--ink);
  font: 500 10px/1 var(--sans);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #8d826f;
  opacity: 1;
}

.contact-form input:nth-child(1) { left: 0; top: 0; width: 274px; }
.contact-form input:nth-child(2) { left: 286px; top: 0; width: 274px; }
.contact-form input:nth-child(3) { left: 0; top: 40px; width: 274px; }

.contact-form textarea {
  left: 286px;
  top: 40px;
  width: 274px;
  height: 78px;
  padding-top: 10px;
  resize: none;
}

.contact-form button {
  position: absolute;
  top: 16px;
  left: 588px;
  width: 300px;
  height: 54px;
  border: 0;
  border-radius: 3px;
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.05em;
}

.contact-form p {
  position: absolute;
  top: 84px;
  left: 605px;
  margin: 0;
  color: var(--ink-muted);
  font: 600 9px/1.35 var(--sans);
}

.site-footer {
  position: relative;
  height: 104px;
  background:
    url("./assets/footer-marble-left.png") left top / 78px 104px no-repeat,
    url("./assets/footer-marble-right.png") right top / 140px 104px no-repeat,
    linear-gradient(90deg, #07182f, #0b2038 51%, #07182f);
  color: #f8efe4;
}

.footer-brand {
  position: absolute;
  top: 24px;
  left: 91px;
}

.footer-brand strong {
  display: block;
  color: #f8efe4;
  font-family: var(--display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.26em;
  white-space: nowrap;
}

.footer-brand p {
  margin: 14px 0 0;
  color: var(--gold-light);
  font: 500 13px/1 var(--serif);
}

.site-footer nav {
  position: absolute;
  top: 45px;
  left: 504px;
  display: flex;
  gap: 42px;
  font: 500 10px/1 var(--sans);
}

.footer-legal {
  position: absolute;
  top: 32px;
  left: 1056px;
  width: 280px;
  font: 500 9px/1.4 var(--sans);
}

.footer-legal p { margin: 0 0 14px; }
.footer-legal a + a { margin-left: 30px; }