.main-nav a.is-active::after {
  transform: scaleX(1);
}

.articles-page,
.article-detail-page {
  background: var(--white);
}

.articles-hero {
  position: relative;
  min-height: 760px;
  padding: calc(var(--header-height) + 105px) 0 0;
  overflow: hidden;
  background: var(--paper);
}

.articles-hero-grid {
  display: grid;
  min-height: 560px;
  grid-template-columns: 1.25fr .55fr;
  align-items: center;
  gap: 9vw;
}

.articles-hero-copy h1 {
  max-width: 900px;
  font-size: clamp(58px, 6.8vw, 98px);
}

.articles-hero-copy > p:last-child {
  max-width: 670px;
  margin: 42px 0 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.8;
}

.articles-hero-aside {
  display: grid;
  min-height: 320px;
  padding: 45px 0 35px 55px;
  align-content: center;
  border-left: 1px solid var(--line);
}

.editorial-number {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 92px;
  line-height: 1;
}

.articles-hero-aside p {
  margin: 16px 0 30px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
}

.editorial-line {
  width: 100%;
  height: 1px;
  margin-bottom: 18px;
  background: var(--line);
}

.articles-hero-aside small {
  color: var(--ink-soft);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.article-marquee {
  display: flex;
  min-width: max-content;
  padding: 20px 30px;
  align-items: center;
  justify-content: center;
  gap: 28px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.article-marquee i {
  width: 4px;
  height: 4px;
  background: var(--accent);
  transform: rotate(45deg);
}

.article-feed-section {
  --article-feed-gap: 24px;
  padding: 130px 0 145px;
  background: var(--white);
}

.feed-heading {
  display: grid;
  margin-bottom: var(--article-feed-gap);
  grid-template-columns: 1fr .55fr;
  align-items: end;
  gap: 70px;
}

.feed-heading h2 {
  font-size: clamp(44px, 4.8vw, 68px);
}

.feed-heading > p {
  max-width: 470px;
  margin: 0 0 6px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.85;
}

.article-feed {
  display: grid;
  width: 100%;
  max-width: 780px;
  margin-right: auto;
  margin-left: 0;
  grid-template-columns: 1fr;
  gap: var(--article-feed-gap);
}

.article-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  border: 0;
  background: #f3f3f3;
}

.article-card-visual,
.article-title-visual {
  position: relative;
  display: block;
  overflow: hidden;
}

.article-card-visual {
  height: 418px;
  max-height: 418px;
  min-height: 0;
}
.article-card-visual > img{display:block;width:100%;height:100%;max-width:100%;max-height:418px;object-fit:contain}.managed-cover{display:grid;place-items:center;background:var(--green);color:var(--white);font:42px var(--serif);text-decoration:none}.managed-cover span{opacity:.75}.managed-detail{max-width:900px;padding-top:calc(var(--header-height) + 80px);padding-bottom:120px}.managed-detail h1{font-size:clamp(42px,7vw,78px);margin:25px 0 50px}.managed-detail-cover{width:100%;max-height:520px;object-fit:cover;margin-bottom:45px}.article-body{font-size:17px;line-height:1.85}.article-body h2{margin-top:55px;font-size:36px}.article-body h3{margin-top:38px;font-size:25px}.article-body blockquote{margin:35px 0;padding:10px 25px;border-left:3px solid var(--accent);color:var(--ink-soft)}
.managed-article-layout{display:block}.article-inline-image{margin:42px 0}.article-inline-image img{display:block;width:100%;height:auto}.article-inline-image figcaption{margin-top:9px;color:var(--ink-soft);font-size:13px}.article-cta{margin:50px 0;padding:36px;background:var(--green);color:var(--white)}.article-cta h3{margin-top:0}.article-cta a{color:#efb18d}@media(max-width:800px){.managed-detail{max-width:calc(100% - 28px)}}

.visual-mortgage {
  background: var(--green);
  color: var(--white);
}

.visual-mortgage::before {
  position: absolute;
  top: -110px;
  right: -60px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  content: "";
}

.visual-mortgage::after {
  position: absolute;
  right: 82px;
  bottom: -150px;
  width: 370px;
  height: 370px;
  border: 1px solid rgba(216, 155, 121, .35);
  border-radius: 50%;
  content: "";
}

.visual-rate {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 9%;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  transform: translateY(-50%);
}

.visual-rate strong {
  color: #d89b79;
  font-family: var(--serif);
  font-size: clamp(60px, 6.2vw, 92px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .9;
}

.visual-rate span {
  max-width: 130px;
  padding-bottom: 7px;
  color: #b7c1bc;
  font-size: 9px;
  letter-spacing: .08em;
  line-height: 1.6;
  text-transform: uppercase;
}

.visual-caption {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 26px;
  color: rgba(255, 255, 255, .58);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.visual-market {
  background: #dcd8cd;
  color: var(--ink);
}

.visual-market::before {
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(23, 36, 31, .14);
  content: "";
}

.visual-market .visual-caption {
  color: rgba(23, 36, 31, .55);
}

.market-diagram {
  position: absolute;
  top: 50%;
  right: 12%;
  left: 12%;
  display: grid;
  height: 190px;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 14px;
  transform: translateY(-55%);
}

.market-diagram > span {
  position: absolute;
  top: -35px;
  left: 0;
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.market-diagram .bar {
  display: block;
  background: var(--green);
}

.bar-one { height: 100%; }
.bar-two { height: 77%; }
.bar-three { height: 55%; }
.bar-four { height: 35%; background: var(--accent) !important; }

.article-card-content {
  display: flex;
  padding: 32px 34px 36px;
  flex-direction: column;
}

.article-card-meta,
.article-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--accent-dark);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.6;
  text-transform: uppercase;
}

.article-card-meta {
  margin-bottom: 28px;
}

.article-card-meta span:last-child,
.article-detail-meta span:last-child {
  color: var(--ink-soft);
}

.article-card h2,
.article-card h3 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.4;
}

.article-card h2 a,
.article-card h3 a {
  color: inherit;
  text-decoration: none;
}

.article-card-content > p {
  max-width: 560px;
  margin: 0 0 34px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.8;
}

.article-read-link {
  display: inline-flex;
  margin-top: auto;
  align-items: center;
  gap: 13px;
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 600;
}

/* Article detail */

.article-detail-hero {
  padding: calc(var(--header-height) + 75px) 0 75px;
  background: var(--paper);
}

.article-back {
  display: inline-block;
  margin-bottom: var(--article-rhythm);
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 600;
}

.article-title-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: stretch;
  gap: 70px;
}

.article-title-copy {
  padding: 18px 0 20px;
}

.article-title-copy h1 {
  margin-top: 28px;
  font-size: clamp(50px, 5.6vw, 80px);
  line-height: 1.16;
}

.article-lead {
  max-width: 790px;
  margin: 38px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.85;
}

.article-title-visual {
  min-height: 420px;
}

.article-title-visual .visual-rate {
  left: 11%;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
}

.article-title-visual .visual-rate strong {
  font-size: clamp(58px, 5.5vw, 82px);
}

.article-title-visual .market-diagram {
  height: 220px;
}

.article-freshness {
  display: grid;
  margin-top: 55px;
  padding: 23px 0;
  grid-template-columns: 90px 1fr;
  align-items: start;
  gap: 25px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.article-freshness strong {
  color: var(--accent-dark);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.article-freshness p {
  max-width: 860px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.75;
}

.article-layout {
  display: grid;
  padding-top: 115px;
  padding-bottom: 130px;
  grid-template-columns: 225px minmax(0, 770px);
  justify-content: center;
  gap: clamp(65px, 9vw, 130px);
}

.article-aside {
  position: sticky;
  top: 120px;
  height: max-content;
  padding-top: 8px;
}

.article-aside > span {
  display: block;
  margin-bottom: 19px;
  color: var(--accent-dark);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.article-aside nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.article-aside nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.55;
  transition: color .2s ease, padding-left .2s ease;
}

.article-aside nav a:hover {
  padding-left: 6px;
  color: var(--accent-dark);
}

.aside-consult {
  display: inline-block;
  margin-top: 27px;
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 600;
}

.article-body {
  min-width: 0;
}

.article-body section {
  margin-bottom: 100px;
  scroll-margin-top: 120px;
}

.article-body section:last-of-type {
  margin-bottom: 80px;
}

.article-body p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.9;
}

.article-opening {
  margin-bottom: 32px;
  color: var(--ink) !important;
  font-family: var(--serif);
  font-size: clamp(21px, 2.1vw, 29px) !important;
  line-height: 1.65 !important;
}

.article-section-label {
  margin-bottom: 17px !important;
  color: var(--accent-dark) !important;
  font-size: 8px !important;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.article-body h2 {
  margin-bottom: 35px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.3;
}

.article-body h3 {
  font-family: var(--serif);
  font-weight: 400;
}

.article-scenarios {
  display: grid;
  margin: 44px 0;
  grid-template-columns: 1fr 1fr;
}

.scenario-card {
  display: flex;
  min-height: 390px;
  padding: 30px;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
}

.scenario-card + .scenario-card {
  border-left: 0;
}

.scenario-card > span {
  color: var(--accent-dark);
  font-size: 8px;
  letter-spacing: .14em;
}

.scenario-card h3 {
  margin: 55px 0 18px;
  font-size: 27px;
}

.scenario-card p {
  font-size: 12px;
  line-height: 1.8;
}

.scenario-card strong {
  margin-top: auto;
  padding-top: 25px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

.scenario-dark {
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
}

.scenario-dark > span {
  color: #d89b79;
}

.scenario-dark p {
  color: #b7c1bc;
}

.scenario-dark strong {
  border-color: rgba(255, 255, 255, .16);
}

.historic-rates {
  display: grid;
  margin: 45px 0;
  grid-template-columns: 1.25fr repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.historic-rates > p {
  margin: 0;
  padding: 27px 20px 27px 0;
  align-self: center;
  color: var(--accent-dark);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.historic-rates > div {
  padding: 23px 18px;
  border-left: 1px solid var(--line);
}

.historic-rates strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
}

.historic-rates span {
  color: var(--ink-soft);
  font-size: 8px;
  line-height: 1.4;
}

.article-quote {
  margin: 50px 0;
  padding: 35px 40px;
  border-left: 3px solid var(--accent);
  background: var(--paper);
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.65;
}

.article-list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.article-list li {
  display: grid;
  padding: 25px 0;
  grid-template-columns: 55px 1fr;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.article-list li > span {
  color: var(--accent-dark);
  font-size: 8px;
  letter-spacing: .12em;
}

.article-list p {
  margin: 0;
  color: var(--ink) !important;
}

.article-qa {
  border-top: 1px solid var(--line);
}

.article-qa > div {
  display: grid;
  padding: 28px 0;
  grid-template-columns: .8fr 1.2fr;
  gap: 45px;
  border-bottom: 1px solid var(--line);
}

.article-qa h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
}

.article-qa p {
  margin: 0;
  font-size: 12px;
}

.article-author-note {
  display: grid;
  padding-top: 35px;
  grid-template-columns: 70px 1fr;
  gap: 24px;
  border-top: 1px solid var(--line);
}

.author-monogram {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--ink);
  font-family: var(--serif);
  font-size: 15px;
}

.article-author-note span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-dark);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.article-author-note strong {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
}

.article-author-note p {
  margin: 8px 0 0;
  font-size: 10px;
}

.market-points {
  margin: 45px 0 0;
  border-top: 1px solid var(--line);
}

.market-points article {
  display: grid;
  padding: 30px 0;
  grid-template-columns: 55px 1fr;
  gap: 15px;
  border-bottom: 1px solid var(--line);
}

.market-points article > span {
  color: var(--accent-dark);
  font-size: 8px;
  letter-spacing: .12em;
}

.market-points h3 {
  margin: 0 0 10px;
  font-size: 21px;
}

.market-points p {
  margin: 0;
  font-size: 12px;
}

.forecast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.forecast-grid > div {
  min-height: 300px;
  padding: 32px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.forecast-grid > div + div {
  border-left: 0;
}

.forecast-grid > div > span {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 34px;
}

.forecast-grid h3 {
  margin: 65px 0 14px;
  font-size: 23px;
}

.forecast-grid p {
  margin: 0;
  font-size: 12px;
}

.action-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.action-list article {
  min-height: 325px;
  padding: 28px 28px 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.action-list article > span {
  color: var(--accent-dark);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.action-list h3 {
  margin: 65px 0 16px;
  font-size: 21px;
}

.action-list p {
  margin: 0;
  font-size: 12px;
}

.article-summary {
  padding: 48px !important;
  background: var(--paper);
}

.article-summary h2 {
  font-size: clamp(29px, 3.5vw, 43px);
}

.article-summary p:not(.article-section-label) {
  margin-bottom: 30px;
}

.article-summary .button {
  width: max-content;
}

.next-article {
  padding: 85px 0 95px;
  background: var(--paper-deep);
}

.next-article-inner > span {
  display: block;
  margin-bottom: 27px;
  color: var(--accent-dark);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.next-article-inner > a {
  display: flex;
  padding-top: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  border-top: 1px solid var(--line);
}

.next-article h2 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.35;
}

.next-article i {
  display: grid;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  place-items: center;
  border: 1px solid var(--ink);
  color: var(--accent-dark);
  font-size: 25px;
  font-style: normal;
  transition: background .25s ease, color .25s ease;
}

.next-article a:hover i {
  background: var(--ink);
  color: var(--white);
}

@media (max-width: 1100px) {
  .articles-hero-grid {
    grid-template-columns: 1.15fr .5fr;
  }

  .article-title-grid {
    gap: 42px;
  }

  .article-layout {
    grid-template-columns: 190px minmax(0, 720px);
    gap: 60px;
  }
}

@media (max-width: 1024px) {
  .articles-hero {
    min-height: auto;
  }

  .articles-hero-grid {
    padding: 60px 0 85px;
    grid-template-columns: 1fr;
  }

  .articles-hero-aside {
    min-height: 0;
    padding: 35px 0 0;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 30px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .editorial-number {
    font-size: 70px;
  }

  .articles-hero-aside p {
    margin: 0 0 8px;
  }

  .articles-hero-aside .editorial-line,
  .articles-hero-aside small {
    display: none;
  }

  .feed-heading,
  .article-title-grid,
  .article-layout {
    grid-template-columns: 1fr;
  }

  .feed-heading {
    gap: 30px;
  }

  .article-feed {
    grid-template-columns: 1fr;
  }

  .article-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-card-visual {
    height: 418px;
    max-height: 418px;
    min-height: 0;
  }

  .article-title-visual {
    min-height: 350px;
  }

  .article-freshness {
    grid-template-columns: 70px 1fr;
  }

  .article-layout {
    padding-top: 85px;
    gap: 80px;
  }

  .article-aside {
    position: static;
  }

  .article-aside nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-left: 1px solid var(--line);
  }

  .article-aside nav a {
    padding: 14px 16px;
    border-right: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .articles-hero {
    padding-top: calc(var(--header-height) + 42px);
  }

  .articles-hero-grid {
    padding: 35px 0 60px;
    gap: 45px;
  }

  .articles-hero-copy h1 {
    font-size: 43px;
    line-height: 1.18;
  }

  .articles-hero-copy > p:last-child {
    margin-top: 30px;
    font-size: 14px;
  }

  .article-marquee {
    justify-content: flex-start;
    overflow: hidden;
  }

  .article-marquee span:last-child,
  .article-marquee i:last-of-type {
    display: none;
  }

  .article-feed-section {
    padding: 78px 0 85px;
  }

  .feed-heading h2 {
    font-size: 42px;
  }

  .article-card {
    grid-template-columns: 1fr;
  }

  .article-card-visual {
    height: 310px;
    max-height: 310px;
    min-height: 0;
  }

  .article-card-content {
    padding: 27px 24px 30px;
  }

  .article-card h2,
  .article-card h3 {
    font-size: 24px;
  }

  .visual-rate {
    left: 8%;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
  }

  .visual-rate strong {
    font-size: 65px;
  }

  .market-diagram {
    height: 160px;
  }

  .article-detail-hero {
    padding: calc(var(--header-height) + 40px) 0 55px;
  }

  .article-back {
    margin-bottom: 45px;
  }

  .article-title-copy h1 {
    margin-top: 23px;
    font-size: 38px;
    line-height: 1.23;
  }

  .article-lead {
    margin-top: 28px;
    font-size: 14px;
  }

  .article-title-visual {
    min-height: 310px;
  }

  .article-freshness {
    margin-top: 40px;
    padding: 20px 0;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .article-layout {
    padding-top: 65px;
    padding-bottom: 85px;
    gap: 65px;
  }

  .article-aside nav {
    grid-template-columns: 1fr;
  }

  .article-body section {
    margin-bottom: 75px;
  }

  .article-body h2 {
    font-size: 35px;
  }

  .article-scenarios,
  .forecast-grid,
  .action-list {
    grid-template-columns: 1fr;
  }

  .scenario-card {
    min-height: 360px;
  }

  .scenario-card + .scenario-card,
  .forecast-grid > div + div {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .historic-rates {
    grid-template-columns: repeat(3, 1fr);
  }

  .historic-rates > p {
    grid-column: 1 / -1;
    padding: 20px 0;
  }

  .historic-rates > div:first-of-type {
    border-left: 0;
  }

  .historic-rates > div {
    padding: 18px 9px;
  }

  .historic-rates strong {
    font-size: 23px;
  }

  .article-quote {
    padding: 28px 24px;
  }

  .article-qa > div {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .action-list article {
    min-height: 290px;
  }

  .article-summary {
    padding: 35px 25px !important;
  }

  .article-summary .button {
    width: 100%;
  }

  .next-article {
    padding: 70px 0 75px;
  }

  .next-article-inner > a {
    align-items: flex-start;
  }

  .next-article h2 {
    font-size: 31px;
  }

  .next-article i {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
}
/* Private realtor comparison article */

.article-card-wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
}

.article-card-wide .article-card-visual {
  max-height: 418px;
  min-height: 0;
}

.article-card-wide .article-card-content {
  justify-content: flex-start;
}

.article-card-wide .article-card-content > p {
  max-width: 620px;
}

.visual-private {
  background: var(--accent);
  color: var(--white);
}

.visual-private::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 25% 100%;
  content: "";
}

.visual-private::after {
  position: absolute;
  top: 50%;
  right: 9%;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.private-figure {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 10%;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  transform: translateY(-50%);
}

.private-figure strong {
  font-family: var(--serif);
  font-size: clamp(72px, 7vw, 106px);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .85;
}

.private-figure span {
  max-width: 145px;
  padding-bottom: 5px;
  font-size: 9px;
  letter-spacing: .1em;
  line-height: 1.65;
  text-transform: uppercase;
}

.comparison-band {
  display: grid;
  margin: 48px 0 0;
  grid-template-columns: 1fr 1fr;
}

.comparison-band > div {
  min-height: 245px;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.comparison-band > div + div {
  border-left: 0;
  background: var(--green);
  color: var(--white);
}

.comparison-band span {
  display: block;
  margin-bottom: 55px;
  color: var(--accent-dark);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.comparison-band > div + div span {
  color: #d89b79;
}

.comparison-band strong {
  display: block;
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
}

.comparison-band p {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
}

.comparison-band > div + div p {
  color: #b7c1bc;
}

.advantage-list {
  border-top: 1px solid var(--line);
}

.advantage-list article {
  display: grid;
  padding: 30px 0;
  grid-template-columns: 60px 1fr;
  gap: 15px;
  border-bottom: 1px solid var(--line);
}

.advantage-list article > span {
  padding-top: 4px;
  color: var(--accent-dark);
  font-size: 8px;
  letter-spacing: .12em;
}

.advantage-list h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.5;
}

.advantage-list p {
  margin: 0;
  font-size: 12px;
}

.agency-cases {
  display: grid;
  margin: 42px 0;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.agency-cases article {
  min-height: 295px;
  padding: 28px 28px 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.agency-cases article > span {
  color: var(--accent-dark);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.agency-cases h3 {
  margin: 60px 0 14px;
  font-size: 21px;
  line-height: 1.5;
}

.agency-cases p {
  margin: 0;
  font-size: 12px;
}

.choice-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.choice-checklist li {
  display: grid;
  padding: 27px 0;
  grid-template-columns: 60px 1fr;
  gap: 15px;
  border-bottom: 1px solid var(--line);
}

.choice-checklist li > span {
  padding-top: 4px;
  color: var(--accent-dark);
  font-size: 8px;
  letter-spacing: .12em;
}

.choice-checklist h3 {
  margin: 0 0 9px;
  font-size: 19px;
  line-height: 1.5;
}

.choice-checklist p {
  margin: 0;
  font-size: 12px;
}

.private-summary {
  margin-top: 55px;
}

.article-sources {
  padding-top: 5px;
  border-top: 1px solid var(--line);
}

.article-sources h2 {
  margin-bottom: 28px;
}

.article-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.article-sources li {
  border-bottom: 1px solid var(--line);
}

.article-sources li a {
  display: block;
  padding: 17px 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.55;
  transition: color .2s ease, padding-left .2s ease;
}

.article-sources li a:hover {
  padding-left: 6px;
  color: var(--accent-dark);
}

.sources-note {
  margin: 24px 0 0 !important;
  font-size: 9px !important;
}

@media (max-width: 1024px) {
  .article-card-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .visual-private::after {
    width: 95px;
    height: 95px;
  }

  .private-figure {
    left: 8%;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .private-figure strong {
    font-size: 78px;
  }
}

@media (max-width: 560px) {
  .article-card-wide {
    grid-template-columns: 1fr;
  }

  .article-card-wide .article-card-visual {
    height: 310px;
    max-height: 310px;
    min-height: 0;
  }

  .private-figure {
    align-items: flex-end;
    flex-direction: row;
  }

  .private-figure strong {
    font-size: 68px;
  }

  .comparison-band,
  .agency-cases {
    grid-template-columns: 1fr;
  }

  .comparison-band > div + div {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .comparison-band span {
    margin-bottom: 38px;
  }

  .agency-cases article {
    min-height: 270px;
  }

  .advantage-list article,
  .choice-checklist li {
    grid-template-columns: 45px 1fr;
  }

  .advantage-list h3 {
    font-size: 20px;
  }
}
/* SEO article visuals */

.seo-visual {
  background: var(--green);
  color: var(--white);
}

.seo-visual::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 25% 100%;
  content: "";
}

.seo-visual::after {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.seo-figure {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 9%;
  left: 9%;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  transform: translateY(-50%);
}

.seo-figure strong {
  font-family: var(--serif);
  font-size: clamp(64px, 6.5vw, 98px);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .9;
}

.seo-figure span {
  max-width: 160px;
  padding-bottom: 6px;
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
  letter-spacing: .1em;
  line-height: 1.65;
  text-transform: uppercase;
}

.visual-check {
  background: var(--green);
}

.visual-documents {
  background: #dcd8cd;
  color: var(--ink);
}

.visual-documents::before {
  inset: 9%;
  border: 1px solid rgba(23, 36, 31, .13);
  background: repeating-linear-gradient(to bottom, transparent 0 34px, rgba(23, 36, 31, .1) 34px 35px);
}

.visual-documents::after {
  width: 115px;
  height: 145px;
  border-color: rgba(23, 36, 31, .2);
  border-radius: 0;
  transform: translateY(-50%) rotate(5deg);
}

.visual-documents .seo-figure strong {
  font-size: clamp(48px, 5vw, 76px);
}

.visual-documents .seo-figure span,
.visual-documents .visual-caption {
  color: rgba(23, 36, 31, .6);
}

.visual-fee {
  background: var(--accent);
}

.visual-fee::before {
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, .1) 48% 52%, transparent 52% 100%),
    linear-gradient(45deg, transparent 0 48%, rgba(255, 255, 255, .07) 48% 52%, transparent 52% 100%);
  background-size: 90px 90px;
}

.visual-fee::after {
  border-radius: 0;
  transform: translateY(-50%) rotate(45deg);
}

.visual-fee .seo-figure strong {
  font-size: clamp(54px, 5.6vw, 84px);
}

.visual-newbuild {
  background: var(--green-soft);
}

.visual-newbuild::before {
  inset: 12% 9% 0 44%;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px) 0 0 / 100% 17%,
    linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px) 0 0 / 33.333% 100%;
}

.visual-newbuild::after {
  top: auto;
  right: 8%;
  bottom: 0;
  width: 34%;
  height: 42%;
  border-color: rgba(216, 155, 121, .45);
  border-radius: 0;
  transform: none;
}

@media (max-width: 560px) {
  .seo-figure {
    top: 47%;
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
  }

  .seo-figure strong {
    font-size: 68px;
  }

  .visual-documents .seo-figure strong {
    font-size: 48px;
  }

  .visual-fee .seo-figure strong {
    font-size: 58px;
  }
}

/* Shared typography hierarchy */
.feed-heading > p,
.article-lead { font-size: 16px; }

.article-body p,
.scenario-card p,
.article-qa p,
.market-points p,
.forecast-grid p,
.action-list p,
.comparison-band p,
.advantage-list p,
.agency-cases p,
.choice-checklist p { font-size: 16px; }

.article-card-content > p { font-size: 12px; }

.article-read-link,
.article-back,
.article-aside nav a,
.aside-consult,
.article-sources li a { font-size: 14px; }

@media (min-width: 1025px) {
  .feed-heading h2,
  .article-body h2,
  .article-summary h2,
  .next-article h2 { font-size: clamp(36px, 3.5vw, 52px); }
}

@media (max-width: 560px) {
  .feed-heading h2,
  .article-body h2,
  .article-summary h2,
  .next-article h2 { font-size: clamp(32px, 10vw, 48px); }
}

/* Unified managed article layout */
.managed-detail{width:min(calc(100% - 48px),1180px);max-width:none}
.managed-detail.has-next-article{padding-bottom:0}
.managed-detail>.eyebrow{margin:0 0 clamp(22px,2.5vw,34px)}
.managed-detail>h1{max-width:1120px;margin:0;line-height:1.08;text-wrap:balance}
.managed-detail>.article-lead{max-width:900px;margin:clamp(36px,4vw,52px) 0 0;font-size:17px;line-height:1.8}
.managed-article-layout{display:block;margin-top:clamp(52px,6vw,78px)}
.article-content{width:100%;min-width:0;max-width:780px;clear:both}.article-content>:first-child{margin-top:0}.article-content>:last-child{margin-bottom:0}.article-content p{margin:0 0 1.45em}.article-content h2,.article-content h3{scroll-margin-top:calc(var(--article-header-offset,110px) + 12px)}.article-content h2{margin:clamp(58px,7vw,82px) 0 24px}.article-content h3{margin:clamp(38px,5vw,54px) 0 18px}.article-content ul,.article-content ol{margin:0 0 30px;padding-left:1.5em}.article-content li+li{margin-top:10px}
.article-content .article-font-manrope{font-family:Manrope,Arial,sans-serif}.article-content .article-font-prata{font-family:Prata,Georgia,serif}.article-content .article-font-roboto{font-family:Roboto,Arial,sans-serif}.article-content .article-font-open-sans{font-family:"Open Sans",Arial,sans-serif}.article-content .article-font-lora{font-family:Lora,Georgia,serif}.article-content .article-font-merriweather{font-family:Merriweather,Georgia,serif}.article-content .article-font-montserrat{font-family:Montserrat,Arial,sans-serif}
.article-content .article-text-ink{color:#17241f}.article-content .article-text-soft{color:#66706c}.article-content .article-text-accent{color:#b86d49}.article-content .article-text-green{color:#24463b}.article-content .article-text-white{color:#fff}
.article-content .article-bg-gray{background:#f3f3f3}.article-content .article-bg-paper{background:#f5f3ed}.article-content .article-bg-peach{background:#f7e4d9}.article-content .article-bg-sage{background:#dcebe4}.article-content .article-bg-green{background:#24463b}.article-content .article-bg-ink{background:#17241f}
.article-content .article-line-height-compact{line-height:1.4}.article-content .article-line-height-normal{line-height:1.6}.article-content .article-line-height-relaxed{line-height:1.8}.article-content .article-line-height-loose{line-height:2}
.article-content .article-indent-1{padding-inline-start:24px}.article-content .article-indent-2{padding-inline-start:48px}.article-content .article-indent-3{padding-inline-start:72px}.article-content .article-indent-4{padding-inline-start:96px}
.article-content blockquote{margin:32px 0;padding:0;border:0;background:#f3f3f3;color:var(--ink);line-height:inherit}.article-content blockquote blockquote{margin:0;padding:0;background:transparent}.article-content blockquote>:last-child{margin-bottom:0}
@media(max-width:1024px){.managed-detail{width:min(calc(100% - 28px),780px)}.managed-detail>.eyebrow{margin-bottom:20px}.managed-detail>h1{line-height:1.12}.managed-detail>.article-lead{margin-top:28px;line-height:1.7}.managed-article-layout{margin-top:clamp(38px,10vw,52px)}.article-content h2{margin-top:52px}.article-content h3{margin-top:38px}.article-content .article-indent-1{padding-inline-start:16px}.article-content .article-indent-2{padding-inline-start:32px}.article-content .article-indent-3{padding-inline-start:48px}.article-content .article-indent-4{padding-inline-start:64px}.article-content blockquote{margin:26px 0;padding:0}}

/* Public article: single readable column without a table of contents. */
.managed-detail {
  --article-rhythm: 45px;
  width: min(calc(100% - 64px), 780px);
  padding-top: calc(var(--header-height) + var(--article-rhythm));
  max-width: 780px;
  margin-right: auto;
  margin-left: max(32px, calc((100% - var(--container)) / 2));
}

.managed-detail > .article-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: var(--article-rhythm);
}

.article-topline > .article-back,
.article-topline > .article-meta {
  margin: 0;
  font-size: 8px;
}

.article-topline > .article-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  text-align: right;
}

.article-topline > .article-meta > span + span::before {
  content: '·';
  margin-right: 8px;
}

.managed-detail > .managed-detail-cover {
  margin-bottom: var(--article-rhythm);
}

.managed-detail > h1 {
  max-width: 780px;
  font-size: 24px;
  line-height: 1.35;
}

.managed-detail > .article-lead {
  max-width: 780px;
  margin-top: var(--article-rhythm);
  font-size: 14px;
  line-height: 1.7;
}

.managed-article-layout,
.managed-article-layout.without-toc {
  display: block;
  width: 100%;
  max-width: 780px;
  margin-top: var(--article-rhythm);
}

.article-content {
  width: 100%;
  max-width: 780px;
  font-size: 14px;
  line-height: 1.75;
}

.article-content p,
.article-content li,
.article-content blockquote,
.article-content figcaption,
.article-content .scenario-card p,
.article-content .article-qa p,
.article-content .market-points p,
.article-content .forecast-grid p,
.article-content .action-list p,
.article-content .comparison-band p,
.article-content .advantage-list p,
.article-content .agency-cases p,
.article-content .choice-checklist p {
  font-size: 14px;
}

.article-content h2,
.article-content h3,
.article-content .article-cta h3 {
  font-size: 18px;
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .managed-detail > .article-topline {
    gap: 12px;
  }

  .managed-detail {
    --article-rhythm: 32px;
    width: min(calc(100% - 28px), 780px);
    margin-left: 14px;
  }

  .managed-detail > h1 {

    font-size: 24px;
  }

  .managed-detail > .article-lead {
    font-size: 14px;
  }
}