:root {
  --ink: #101617;
  --ink-soft: #182021;
  --paper: #eeefeb;
  --white: #fff;
  --muted: #aeb9b8;
  --text: #344143;
  --line: rgba(255,255,255,.18);
  --line-dark: #c6cdca;
  --ease: cubic-bezier(.22,.74,.25,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0d1213; color: var(--white); font: 16px/1.65 "Lato", Arial, Helvetica, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button { font: inherit; }
:focus-visible { outline: 3px solid #cfe6e7; outline-offset: 4px; }
.site-header { position: absolute; z-index: 40; top: 0; left: 0; right: 0; height: 104px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px,5vw,76px); border-bottom: 1px solid var(--line); background: linear-gradient(#0b1010d6, transparent); }
.brand { display: flex; align-items: center; gap: 13px; min-width: 235px; }
.brand__image { position: relative; overflow: hidden; width: 166px; height: 61px; flex: 0 0 auto; }
.brand__image img { position: absolute; width: 248px; max-width: none; left: -38px; top: -89px; filter: url(#removeWhite); }
.brand__by { color: #d5dcdc; font-size: .77rem; line-height: 1.25; }
.nav { display: flex; align-items: center; gap: clamp(18px,2.4vw,36px); font-size: .88rem; }
.nav a { position: relative; padding: 10px 0; }
.nav a:not(.button)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: currentColor; transition: right .3s var(--ease); }
.nav a:not(.button):hover::after, .nav a[aria-current="page"]::after { right: 0; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 12px 24px; border: 1px solid var(--white); background: var(--white); color: var(--ink); }
.menu-toggle { display: none; border: 0; padding: 12px 0; background: transparent; color: #fff; cursor: pointer; }
.eyebrow { color: #aebcbc; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.guide-hero { min-height: 670px; position: relative; display: grid; align-items: end; overflow: hidden; background: #141b1c; }
.guide-hero__media { position: absolute; inset: 0; }
.guide-hero__media img { height: 100%; object-fit: cover; transform: scale(1.05); animation: settle 2s var(--ease) both; }
.guide-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,12,13,.92),rgba(7,12,13,.54) 62%,rgba(7,12,13,.25)),linear-gradient(0deg,rgba(7,12,13,.72),transparent 55%); }
.guide-hero__copy { position: relative; z-index: 2; max-width: 1120px; padding: clamp(180px,20vw,260px) clamp(20px,6vw,92px) clamp(76px,9vw,120px); }
h1,h2,h3,p { margin-top: 0; }
h1 { max-width: 1000px; margin: 14px 0 26px; font-size: clamp(3rem,7vw,7.1rem); font-weight: 400; line-height: .92; letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 4px 18px rgba(0,0,0,.32); }
.guide-hero__copy p { max-width: 720px; margin-bottom: 0; color: #d9e0df; font-size: clamp(1rem,1.55vw,1.2rem); }
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
.topics { padding: clamp(84px,11vw,158px) clamp(20px,6vw,92px); background: var(--paper); color: var(--ink); }
.section-head { display: grid; grid-template-columns: minmax(280px,.9fr) minmax(300px,1.1fr); gap: clamp(28px,7vw,100px); align-items: end; margin-bottom: clamp(48px,7vw,92px); }
.section-head .eyebrow { color: #667678; }
h2 { margin: 9px 0 0; font-size: clamp(2.45rem,5.2vw,5.35rem); line-height: .96; letter-spacing: .01em; text-transform: uppercase; }
.section-head p { max-width: 640px; margin: 0; color: #4f5c5e; font-size: 1.05rem; }
.topic-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: clamp(20px,2.3vw,34px); align-items: start; }
.topic-card { color: var(--white); position: relative; display: block; min-height: 500px; overflow: hidden; background: #1b2223; box-shadow: 0 22px 48px rgba(12,19,20,.16); opacity: 0; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.topic-card:nth-child(1) { grid-column: 1 / span 7; min-height: clamp(500px,47vw,700px); transform: translateX(-60px); }
.topic-card:nth-child(2) { grid-column: 8 / -1; min-height: clamp(430px,39vw,580px); margin-top: clamp(80px,10vw,150px); transform: translateX(60px); }
.topic-card:nth-child(3) { grid-column: 2 / span 5; min-height: clamp(430px,41vw,610px); margin-top: clamp(12px,3vw,44px); transform: translateY(65px); }
.topic-card:nth-child(4) { grid-column: 7 / span 6; min-height: clamp(510px,46vw,680px); margin-top: clamp(86px,11vw,164px); transform: translateY(65px); }
.topic-card.is-visible { opacity: 1; transform: none; }
.topic-card__media { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.35s var(--ease); }
.topic-card:nth-child(even) .topic-card__media { clip-path: inset(0 0 0 100%); }
.topic-card.is-visible .topic-card__media { clip-path: inset(0); }
.topic-card__media img { height: 100%; object-fit: cover; filter: brightness(.67) saturate(.84) contrast(1.05); transform: scale(1.07); transition: transform 1.4s var(--ease), filter .65s var(--ease); }
.topic-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(5,9,10,.02) 30%,rgba(5,9,10,.92) 100%); }
.topic-card__copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(25px,3.2vw,44px); }
.topic-card__copy .eyebrow { color: #c9d2d1; }
.topic-card__copy h3 { max-width: 620px; margin: 10px 0 18px; font-size: clamp(1.8rem,3.2vw,3.5rem); font-weight: 400; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.topic-card__link { display: inline-flex; align-items: center; gap: 11px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.topic-card__link::after { content: "→"; font-size: 1.2rem; transition: transform .3s var(--ease); }
.topic-card:hover .topic-card__media img { transform: scale(1.025); filter: brightness(.78) saturate(.92) contrast(1.04); }
.topic-card:hover .topic-card__link::after { transform: translateX(7px); }
.article-hero { min-height: 690px; position: relative; display: grid; align-items: end; overflow: hidden; }
.article-hero__media { position: absolute; inset: 0; }
.article-hero__media img { height: 100%; object-fit: cover; animation: settle 2s var(--ease) both; }
.article-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,12,13,.94),rgba(7,12,13,.48) 70%),linear-gradient(0deg,rgba(7,12,13,.78),transparent 55%); }
.article-hero__copy { position: relative; z-index: 2; width: min(1180px,100%); padding: clamp(180px,20vw,260px) clamp(20px,6vw,92px) clamp(70px,8vw,112px); }
.article-hero__copy h1 { max-width: 920px; }
.article-hero__copy p { max-width: 720px; color: #d8dfde; font-size: clamp(1rem,1.55vw,1.2rem); }
.article-hero__copy > .eyebrow { display: block; }\n.breadcrumb { display: flex; width: max-content; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.6); color: #d5dddd; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.article { padding: clamp(76px,10vw,146px) clamp(20px,6vw,92px); background: var(--paper); color: var(--ink); }
.article__intro { display: grid; grid-template-columns: minmax(250px,.78fr) minmax(360px,1.22fr); gap: clamp(38px,8vw,120px); align-items: start; max-width: 1380px; margin-bottom: clamp(58px,8vw,110px); }
.article__intro .eyebrow { color: #667678; }
.article__intro h2 { font-size: clamp(2.2rem,4.4vw,4.7rem); }
.article__lede { max-width: 700px; color: #3e4b4d; font-size: clamp(1.08rem,1.6vw,1.3rem); }
.comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(22px,3vw,42px); max-width: 1380px; }
.info-card { position: relative; padding: clamp(28px,4vw,54px); border-top: 1px solid #899695; background: rgba(255,255,255,.58); }
.info-card__number { display: block; margin-bottom: 36px; color: #6f7e80; font-size: .76rem; font-weight: 700; letter-spacing: .14em; }
.info-card h3 { margin-bottom: 20px; font-size: clamp(1.6rem,2.5vw,2.55rem); line-height: 1.08; text-transform: uppercase; }
.info-card p { color: var(--text); }
.info-card ul { margin: 22px 0 0; padding-left: 1.2em; color: var(--text); }
.info-card li { margin: 9px 0; padding-left: 4px; }
.feature-block { display: grid; grid-template-columns: minmax(300px,1.1fr) minmax(260px,.9fr); gap: clamp(34px,7vw,100px); max-width: 1380px; margin-top: clamp(74px,9vw,126px); padding-top: clamp(48px,6vw,86px); border-top: 1px solid var(--line-dark); }
.feature-block h2 { font-size: clamp(2rem,4vw,4.35rem); }
.feature-block__body { color: var(--text); }
.feature-block__body h3 { margin: 30px 0 8px; font-size: 1.15rem; text-transform: uppercase; }
.feature-block__body h3:first-child { margin-top: 0; }
.material-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(22px,3vw,42px); max-width: 1380px; }
.choice-note { max-width: 1380px; margin-top: clamp(48px,6vw,82px); padding: clamp(28px,4vw,52px); background: var(--ink); color: #e6ebea; }
.choice-note h3 { margin-bottom: 12px; font-size: clamp(1.5rem,2.3vw,2.4rem); text-transform: uppercase; }
.choice-note p { max-width: 920px; margin-bottom: 0; color: #c9d2d1; }
.article-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; max-width: 1380px; margin-top: clamp(60px,8vw,110px); padding-top: 28px; border-top: 1px solid var(--line-dark); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.article-nav a { border-bottom: 1px solid currentColor; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; padding: 36px clamp(20px,6vw,92px); border-top: 1px solid var(--line); color: #aeb8b8; font-size: .8rem; }
@media (max-width:900px) {
  .site-header { height: 88px; }
  .nav { position: fixed; inset: 88px 0 auto; display: grid; gap: 0; padding: 18px 22px 24px; background: #111617f7; border-bottom: 1px solid var(--line); transform: translateY(-130%); visibility: hidden; transition: transform .42s var(--ease),visibility .42s; }
  .nav.is-open { transform: none; visibility: visible; }
  .nav a { padding: 13px 0; }
  .menu-toggle { display: block; }
  .section-head,.article__intro { grid-template-columns: 1fr; }
  .topic-card:nth-child(n) { min-height: 500px; }
  .comparison,.material-list { grid-template-columns: 1fr; }
}
@media (max-width:650px) {
  .brand { min-width: 0; gap: 4px; }
  .brand__image { width: 128px; height: 48px; }
  .brand__image img { width: 192px; left: -29px; top: -69px; }
  .brand__by { font-size: .68rem; }
  .guide-hero,.article-hero { min-height: 610px; }
  h1 { font-size: clamp(2.55rem,13.5vw,4.35rem); }
  .topic-grid { display: block; }
  .topic-card:nth-child(n) { width: 100%; min-height: 430px; margin: 0 0 24px; }
  .topic-card:nth-child(even) { width: calc(100% - 28px); margin-left: 28px; }
  .topic-card:nth-child(3) { width: calc(100% - 36px); }
  .feature-block { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms!important; transition-duration: .01ms!important; }
  .topic-card { opacity: 1; transform: none; }
}