@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --color-primary: #001939;
  --color-primary-container: #002d5e;
  --color-secondary: #4c5e84;
  --color-accent: #cef14a;
  --color-accent-dim: #b3d42d;
  --color-text: #191c1d;
  --color-text-light: #43474f;
  --color-background: #f8f9fa;
  --color-surface: #ffffff;
  --color-surface-low: #f3f4f5;
  --color-surface-high: #e7e8e9;
  --color-surface-container: #edeeef;
  --color-surface-variant: #e1e3e4;
  --color-border: #c3c6d0;
  --color-success: #0f766e;
  --color-danger: #ba1a1a;
  --color-selection-text: #171e00;
  --font-heading: Manrope, Arial, sans-serif;
  --font-body: Inter, Arial, sans-serif;
  --radius: 8px;
  --shadow-soft: 0 24px 40px rgba(25, 28, 29, 0.05);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-background); line-height: 1.6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 300; padding: 10px 14px; border-radius: 6px; background: var(--color-primary); color: #fff; }
.skip-link:focus-visible { top: 16px; }
::selection { background: var(--color-accent); color: var(--color-selection-text); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
img { display: block; max-width: 100%; }
main { display: block; }
.container { width: min(100%, var(--layout-max-width)); margin: 0 auto; padding-left: var(--layout-container-padding); padding-right: var(--layout-container-padding); }
.section { padding: var(--layout-section-spacing) 0; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); box-shadow: 0 14px 32px rgba(25,28,29,0.04); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-min-height); }
.site-header__desktop { display: none; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 34px; height: 34px; background: linear-gradient(135deg, var(--color-primary) 0 50%, transparent 50% 100%), linear-gradient(225deg, var(--color-primary-container) 0 50%, transparent 50% 100%); border-radius: 2px; }
.brand__text { display: flex; flex-direction: column; font-size: var(--header-brand-caption-size); line-height: 1; color: var(--color-primary); }
.brand__text strong { font-family: var(--font-heading); font-size: var(--header-brand-size); font-weight: 800; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: var(--nav-font-size); font-weight: 700; text-transform: uppercase; }
.site-nav__list { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.site-nav__list--mobile, .site-nav--mobile { flex-direction: column; align-items: stretch; gap: 12px; }
.site-nav__item { position: relative; list-style: none; }
.site-nav__submenu { display: none; margin: 0; padding: 12px 0; list-style: none; }
.site-nav__item--has-children:hover > .site-nav__submenu, .site-nav__item--has-children:focus-within > .site-nav__submenu { display: block; }
.site-nav__link { position: relative; color: var(--color-text-light); display: inline-flex; align-items: center; min-height: 44px; }
.site-nav__link--active, .site-nav__link:hover { color: var(--color-primary); }
.site-nav__link--active::after, .site-nav__link:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 2px; background: var(--color-accent); }
.site-nav--mobile .site-nav__link--active::after, .site-nav--mobile .site-nav__link:hover::after { display: none; }
.site-nav__submenu { position: absolute; top: 100%; left: 50%; min-width: 240px; padding-top: 12px; background: rgba(255,255,255,0.97); border: 1px solid rgba(195,198,208,0.2); border-radius: 12px; box-shadow: 0 18px 40px rgba(25,28,29,0.12); transform: translateX(-50%); z-index: 30; }
.site-nav__submenu .site-nav__item { width: 100%; }
.site-nav__submenu .site-nav__link { display: block; padding: 10px 18px; white-space: nowrap; }
.site-nav__submenu .site-nav__link--active::after, .site-nav__submenu .site-nav__link:hover::after { display: none; }
.site-nav__submenu .site-nav__link:hover, .site-nav__submenu .site-nav__link--active { background: rgba(169,199,255,0.14); }
.nav-toggle { border: 1px solid rgba(195,198,208,0.2); background: rgba(255,255,255,0.84); color: var(--color-primary); padding: var(--nav-toggle-padding-y) var(--nav-toggle-padding-x); border-radius: var(--nav-toggle-radius); font-weight: 700; }
.site-header__mobile { background: rgba(255,255,255,0.92); }
.site-nav--mobile { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 24px 24px; }
.site-header__mobile .site-nav__list { padding: 16px 24px 24px; }
.site-header__mobile .site-nav__submenu { display: block; position: static; min-width: 0; margin-top: 8px; padding: 0 0 0 16px; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.site-header__mobile .site-nav__submenu .site-nav__link { padding: 6px 0; white-space: normal; }
.site-header__mobile .site-nav__submenu .site-nav__link:hover, .site-header__mobile .site-nav__submenu .site-nav__link--active { background: transparent; }
.site-header__mobile .site-header__cta { display: inline-flex; }
.site-header__cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--header-cta-button-min-height); padding: 0 var(--header-cta-button-padding-x); border-radius: var(--header-cta-button-radius); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dim)); color: var(--color-selection-text); font-size: var(--header-cta-button-font-size); font-weight: 800; text-transform: uppercase; }
.site-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; font-weight: 700; cursor: pointer; text-align: center; }
.site-button__loading { display: none; align-items: center; gap: 10px; }
.site-button--is-calculating .site-button__label { display: none; }
.site-button--is-calculating .site-button__loading { display: inline-flex; }
.site-button__spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.32); border-top-color: #fff; border-radius: 50%; animation: site-button-spin 0.8s linear infinite; }
@keyframes site-button-spin { to { transform: rotate(360deg); } }
.site-button--primary { width: 100%; min-height: var(--form-submit-button-min-height); padding: 0 var(--form-submit-button-padding-x); border-radius: var(--form-submit-button-radius); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container)); color: #fff; font-size: var(--form-submit-button-font-size); }
.site-button--primary:disabled { cursor: wait; opacity: 0.92; }
.hero { padding: var(--hero-padding-top) 0 var(--hero-padding-bottom); }
.hero--calculator { background: radial-gradient(circle at top, rgba(169,199,255,0.22), transparent 46%), linear-gradient(135deg, rgba(0,25,57,0.025), rgba(0,45,94,0.045)), var(--color-background); }
.quick-calculator { position: relative; z-index: 2; margin-top: 0; padding: 0 0 var(--calculator-section-padding-bottom); background: transparent; }
.quick-calculator .container { width: min(100%, var(--calculator-container-max-width)); padding-left: var(--calculator-container-padding); padding-right: var(--calculator-container-padding); }
.quick-calculator__inner { display: grid; gap: 28px; }
.quick-calculator__inner--tight { gap: 0; }
.quick-calculator__intro { max-width: var(--hero-intro-max-width); text-align: center; margin: 0 auto; }
.quick-calculator__eyebrow { margin: 0 0 12px; color: var(--color-primary); font-size: var(--hero-eyebrow-size); font-weight: 800; text-transform: uppercase; }
.quick-calculator__title { margin: 0; color: var(--color-text); font-family: var(--font-heading); font-size: var(--hero-title-size); font-weight: 800; line-height: 1.05; }
.quick-calculator__hero-subtitle { margin: 16px 0 0; color: var(--color-primary); font-size: var(--hero-subtitle-size); font-weight: 800; text-transform: uppercase; }
.quick-calculator__card { display: block; gap: 22px; margin-top: var(--calculator-card-overlap); padding: var(--calculator-card-padding); background: var(--color-surface); border-radius: var(--calculator-card-top-radius) var(--calculator-card-top-radius) var(--calculator-card-bottom-radius) var(--calculator-card-bottom-radius); box-shadow: var(--shadow-soft); width: min(100%, var(--calculator-card-width)); margin-left: auto; margin-right: auto; }
.quick-calculator__grid { display: grid; gap: var(--form-grid-gap); }
.contact-form__grid { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { color: var(--color-primary); font-size: var(--form-label-size); font-weight: 700; text-transform: uppercase; }
.form-field input, .form-field select { width: 100%; min-height: var(--form-field-min-height); padding: var(--form-field-padding-y) var(--form-field-padding-x); border: 1px solid rgba(195,198,208,0.2); border-radius: var(--form-field-border-radius); background: var(--color-surface-high); color: var(--color-text); font-weight: 600; }
.form-field input:focus, .form-field select:focus { outline: 2px solid rgba(62,95,146,0.18); border-color: rgba(62,95,146,0.2); background: var(--color-surface); }
.form-field__hint, .form-field__error, .quick-calculator__warning, .quick-calculator__disclaimer { margin: 0; font-size: var(--form-helper-text-size); }
.form-field__hint, .quick-calculator__warning { color: var(--color-text-light); }
.form-field__error { color: var(--color-danger); min-height: 1.35em; }
.quick-calculator__options { margin-top: 4px; display: grid; gap: var(--form-options-gap); padding-top: var(--form-options-padding-y); padding-bottom: var(--form-options-padding-y); }
.toggle-field { display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; color: var(--color-text); font-weight: 700; }
.toggle-field input { width: 18px; height: 18px; accent-color: var(--color-accent-dim); }
.quick-calculator__result { margin-top: var(--results-margin-top); padding: var(--results-padding); background: var(--color-surface-low); border-radius: var(--results-panel-border-radius); }
.quick-calculator__result-label { margin: 0; color: var(--color-primary); font-size: var(--results-label-size); font-weight: 800; text-transform: uppercase; }
.quick-calculator__result-headline { margin: 10px 0 12px; font-family: var(--font-heading); font-size: var(--results-headline-size); font-weight: 800; line-height: 1; }
.quick-calculator__result-supporting { margin: 0; color: var(--color-text-light); }
.quick-calculator__breakdown { margin-top: 20px; display: grid; gap: var(--results-breakdown-gap); }
.quick-calculator__breakdown p { margin: 0; }
.quick-calculator__breakdown-total { padding-top: 10px; font-weight: 800; }
.calculator__actions { margin-top: var(--form-actions-margin-top); }
.calculator__terms { margin: 12px 0 0; text-align: center; color: var(--color-text-light); font-size: var(--terms-font-size); }
.quick-calculator__reset { width: 100%; min-height: var(--form-reset-button-min-height); margin-top: var(--form-reset-button-margin-top); border: 1px solid rgba(62,95,146,0.2); border-radius: var(--form-reset-button-radius); background: rgba(255,255,255,0.7); color: var(--color-primary); font-weight: 700; cursor: pointer; }
.quick-calculator__disclaimer { margin-top: 16px; color: var(--color-text-light); }
.content { background: var(--color-surface-low); }
.content__inner { width: min(100%, 1000px); }
.content h2, .content h3 { margin: 0 0 12px; color: var(--color-text); font-family: var(--font-heading); line-height: 1.15; }
.content h2 { font-size: var(--content-heading-xl-size); }
.content h3 { margin-top: 28px; font-size: var(--content-heading-lg-size); }
.content p, .content li { color: var(--color-text-light); font-size: var(--content-body-size); }
.content ul { margin: 14px 0 18px 20px; }
.guides-page--editorial { padding-top: 18px; }
.guides-stage { padding: 12px 0 22px; }
.guides-featured-hero { position: relative; min-height: 440px; overflow: hidden; border-radius: 8px; background: linear-gradient(160deg, #0d3f93 0%, #03285e 58%, #031938 100%); }
.guides-featured-hero__media, .guides-featured-hero__overlay { position: absolute; inset: 0; }
.guides-featured-hero__media { background: linear-gradient(180deg, rgba(6,40,94,0.16), rgba(2,14,34,0.72)), radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 22%), repeating-linear-gradient(155deg, rgba(4,15,38,0.28) 0 12px, rgba(5,18,42,0.48) 12px 24px), linear-gradient(180deg, rgba(0,0,0,0) 0 32%, rgba(0,0,0,0.28) 32% 100%); transform: scale(1.08); transform-origin: center; }
.guides-featured-hero__overlay { background: linear-gradient(180deg, rgba(0,25,57,0.12) 0%, rgba(0,25,57,0.64) 100%); }
.guides-featured-hero__content { position: relative; z-index: 1; max-width: 700px; padding: 34px 34px 34px; color: #fff; }
.guides-pill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 999px; background: var(--color-accent); color: var(--color-selection-text); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.guides-featured-hero h1 { margin: 18px 0 14px; color: #fff; font-family: var(--font-heading); font-size: clamp(1.8rem, 3.6vw, 3.05rem); font-weight: 800; line-height: 0.98; }
.guides-featured-hero p { margin: 0; max-width: 34rem; color: rgba(255,255,255,0.82); font-size: 1.03rem; }
.guides-featured-hero__actions { margin-top: 22px; }
.guides-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border: 0; border-radius: 12px; font-weight: 800; }
.guides-button--accent { background: var(--color-accent); color: var(--color-selection-text); }
.guides-listing { padding-top: 32px; padding-bottom: 52px; }
.guides-listing__header { display: grid; gap: 18px; margin-bottom: 28px; }
.guides-listing__intro { max-width: 540px; }
.guides-listing__intro h2 { margin: 0 0 12px; color: var(--color-text); font-family: var(--font-heading); font-size: clamp(1.55rem, 2vw, 2.2rem); font-weight: 800; line-height: 1; }
.guides-listing__intro p, .guides-listing__archive { color: var(--color-text-light); }
.guides-listing__rule { display: none; height: 2px; background: rgba(195,198,208,0.36); }
.guides-listing__archive { font-weight: 700; white-space: nowrap; }
.guides-cards-grid { display: grid; gap: 20px; }
.guides-card { overflow: hidden; border-radius: 8px; background: rgba(255,255,255,0.88); box-shadow: 0 14px 30px rgba(25,28,29,0.05); transition: transform 180ms ease, box-shadow 180ms ease; }
.guides-card__link { display: flex; flex-direction: column; min-height: 100%; color: inherit; }
.guides-card:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(25,28,29,0.12); }
.guides-card__image { position: relative; min-height: 210px; transition: transform 240ms ease; }
.guides-card--sky .guides-card__image { background: linear-gradient(180deg, #a8d8fa 0%, #bde2ff 56%, #7d5f3c 56%, #77542b 100%); }
.guides-card--charcoal .guides-card__image { background: linear-gradient(180deg, #14181d 0%, #232b31 45%, #343f46 100%); }
.guides-card--green .guides-card__image { background: linear-gradient(180deg, #8fd0ff 0%, #d8f0ff 32%, #97c96f 33%, #6ca650 100%); }
.guides-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,25,57,0) 0%, rgba(0,25,57,0.18) 100%); }
.guides-card__tag { position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--color-primary); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
.guides-card__body { display: flex; flex-direction: column; min-height: 250px; padding: 22px 20px 18px; }
.guides-card__body h3 { margin: 0 0 12px; color: var(--color-text); font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; line-height: 1.05; transition: color 180ms ease; }
.guides-card__body p { margin: 0; color: var(--color-text-light); font-size: 0.96rem; }
.guides-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(195,198,208,0.28); }
.guides-card__date, .guides-card__action { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.guides-card__date { color: #8b9099; }
.guides-card__action { color: var(--color-primary); text-decoration: none; transition: color 180ms ease, opacity 180ms ease; }
.guides-card:hover .guides-card__image { transform: scale(1.03); }
.guides-card:hover .guides-card__body h3 { color: var(--color-primary-container); }
.guides-card:hover .guides-card__action, .guides-card__link:focus-visible .guides-card__action { color: var(--color-primary-container); opacity: 0.82; }
.guides-card__link:focus-visible { outline: 2px solid rgba(62,95,146,0.3); outline-offset: -2px; }
.guides-subscribe { padding-top: 56px; padding-bottom: 108px; }
.guides-subscribe__panel { position: relative; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, #071f45 0%, #06234b 56%, #0b2a50 100%); }
.guides-subscribe__glow { position: absolute; border-radius: 999px; filter: blur(48px); opacity: 0.18; }
.guides-subscribe__glow--right { top: -80px; right: -60px; width: 240px; height: 240px; background: var(--color-accent); }
.guides-subscribe__glow--left { bottom: -140px; left: -110px; width: 340px; height: 340px; background: #3c68a8; }
.guides-subscribe__content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 58px 24px 52px; text-align: center; }
.guides-subscribe__content h2 { margin: 0; color: #fff; font-family: var(--font-heading); font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 800; line-height: 0.98; }
.guides-subscribe__content p { color: rgba(215,225,242,0.82); }
.guides-subscribe__content > p { margin: 20px auto 0; max-width: 40rem; }
.guides-subscribe__form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 28px auto 0; }
.guides-subscribe__form input { width: 100%; min-height: 52px; padding: 0 18px; border: 0; border-radius: 10px; background: rgba(133,155,198,0.24); color: #fff; }
.guides-subscribe__form input::placeholder { color: rgba(215,225,242,0.62); }
.guides-subscribe__fineprint { margin-top: 14px; color: rgba(215,225,242,0.42); font-size: 0.64rem; font-weight: 800; text-transform: uppercase; }
.site-footer--guides { background: #f8f9fc; color: var(--color-primary); }
.site-footer__inner--guides { padding-top: 34px; padding-bottom: 38px; align-items: center; text-align: center; }
.site-footer__brand-block { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.site-footer__brand-name { color: var(--color-primary); font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; }
.site-footer--guides .site-footer__copy { color: #8b92a1; font-size: 0.7rem; text-transform: uppercase; }
.site-footer--guides .site-footer__nav, .site-footer--guides .site-footer__nav .site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; margin: 0; padding: 0; list-style: none; }
.site-footer--guides .site-footer__link, .site-footer--guides .site-footer__nav a { color: #8b92a1; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.site-footer--guides .site-footer__copy a { color: var(--color-primary); }
.site-footer--guides .site-footer__link:hover, .site-footer--guides .site-footer__link:focus-visible, .site-footer--guides .site-footer__nav a:hover, .site-footer--guides .site-footer__nav a:focus-visible { color: #5d6677; }
.article-page { padding-top: 28px; padding-bottom: 84px; }
.article-layout { display: grid; gap: 36px; }
.article-layout__main { min-width: 0; }
.article-layout__sidebar--spacer { display: none; }
.article-header { padding: 12px 0 28px; }
.article-header--toc { padding-bottom: 18px; }
.article-header__inner { max-width: 860px; text-align: center; }
.article-header__eyebrow { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 14px; border-radius: 999px; background: var(--color-accent); color: var(--color-selection-text); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.article-header__title { margin: 18px auto 24px; max-width: 900px; color: var(--color-primary); font-family: var(--font-heading); font-size: clamp(2rem, 4.8vw, 3.9rem); font-weight: 800; line-height: 1.5; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; padding: 20px 0; color: var(--color-text-light); font-size: 0.92rem; border-top: 1px solid rgba(195,198,208,0.32); border-bottom: 1px solid rgba(195,198,208,0.32); }
.article-meta__author, .article-meta__item { display: inline-flex; align-items: center; gap: 10px; }
.article-meta__avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--color-surface-high); color: var(--color-primary); font-size: 0.78rem; font-weight: 800; }
.article-toc { align-self: start; }
.article-toc__title { margin: 0 0 14px; color: var(--color-text); font-family: var(--font-heading); font-size: 1.25rem; }
.article-toc__toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(0,25,57,0.16); border-radius: 10px; background: #fff; color: var(--color-primary); font-weight: 700; }
.article-toc__nav { display: grid; border-left: 1px solid rgba(25,28,29,0.3); margin-top: 12px; }
.article-toc__nav[hidden] { display: none; }
.article-toc__link { padding: 14px 16px; color: #676d77; font-size: 0.88rem; line-height: 1.35; }
.article-toc__link--active { color: var(--color-primary); font-weight: 700; border: 1px solid rgba(0,25,57,0.28); border-left: 4px solid var(--color-accent); background: rgba(255,255,255,0.96); }
.article-stage__inner { max-width: 860px; }
.article-stage--toc .article-stage__inner { max-width: none; }
.article-hero--post { margin-bottom: 40px; }
.article-hero__post-image { width: 100%; height: auto; object-fit: cover; }
.article-body { max-width: 700px; margin: 0 auto; }
.article-body--wp .entry-content > :first-child { margin-top: 0; }
.article-section { margin-bottom: 34px; }
.article-section--table-intro { margin-bottom: 28px; }
.article-cost-table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,244,245,0.96)); box-shadow: 0 22px 44px rgba(25,28,29,0.08); }
.article-cost-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; }
.article-cost-table th, .article-cost-table td { padding: 18px 20px; text-align: left; border-bottom: 1px solid rgba(195,198,208,0.22); }
.article-cost-table thead th { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container)); color: #fff; font-family: var(--font-heading); font-size: 1.08rem; }
.article-cost-table tbody tr:last-child td, .article-cost-table tbody tr:last-child th { border-bottom: 0; }
.article-cost-table__subhead th { background: rgba(206,241,74,0.14); color: var(--color-text); font-weight: 800; }
.article-cost-table tbody tr:not(.article-cost-table__subhead):nth-child(even) td { background: rgba(255,255,255,0.62); }
.article-cost-table tbody tr:not(.article-cost-table__subhead):nth-child(odd) td { background: rgba(248,249,250,0.88); }
.article-cost-table td:not(:first-child), .article-cost-table__subhead th:not(:first-child) { white-space: nowrap; width: 110px; font-weight: 700; }
.article-cost-table__footnote { padding: 18px 20px 20px; background: rgba(0,25,57,0.035); }
.article-cost-table__footnote p { margin: 0; }
.article-cost-table__footnote p + p { margin-top: 4px; }
.article-cost-table__footnote a { color: #5567ff; }
.article-body__lead, .article-body p { color: var(--color-text-light); }
.article-body h2, .article-body h3, .article-body h4, .article-related h3, .article-related h4 { color: var(--color-text); font-family: var(--font-heading); }
.article-body h2 { margin: 44px 0 14px; font-size: clamp(1.8rem, 2.2vw, 2.5rem); line-height: 1.12; }
.article-body h3 { margin: 30px 0 10px; font-size: 1.35rem; }
.article-body ul, .article-body ol { padding-left: 22px; color: var(--color-text-light); }
.article-body li + li { margin-top: 8px; }
.article-related { margin-top: 58px; }
.article-related h3 { margin: 0 0 20px; font-size: 1.8rem; }
.article-related__grid { display: grid; gap: 20px; }
.article-related__card { display: block; color: inherit; }
.article-related__image { aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: 6px; background-color: var(--color-surface-high); }
.article-related__image--copper { background: linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,0.12)), linear-gradient(135deg, #8bc0ef 0 45%, #5f7288 45% 70%, #bf7f53 70% 100%); }
.article-related__image--timber { background: linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,0.1)), linear-gradient(135deg, #4ca6ee 0 40%, #734a29 40% 78%, #d6e5f2 78% 100%); }
.article-related__image--plan { background: linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,0.08)), linear-gradient(135deg, #f4f4f4 0 42%, #d5d8df 42% 100%); }
.article-related__image--thumb { background-size: cover; background-position: center; }
.article-related h4 { margin: 0 0 4px; font-size: 1.05rem; }
.article-related p { margin: 0; color: var(--color-text-light); font-size: 0.82rem; }
.article-checklist { margin: 0; padding-left: 20px; color: var(--color-text-light); }
.article-checklist li + li { margin-top: 8px; }
.faq { background: var(--color-surface); padding-top: var(--faq-padding-top); padding-bottom: var(--faq-padding-bottom); }
.faq__inner { width: min(100%, 1000px); }
.faq__title { margin: 0 0 26px; text-align: center; font-family: var(--font-heading); font-size: var(--faq-title-size); color: var(--color-text); }
.faq-item { margin-bottom: 12px; background: var(--color-surface-low); border-radius: 8px; }
.faq-item:last-child { margin-bottom: 0; }
.faq-item__question { position: relative; list-style: none; padding: 22px 24px; cursor: pointer; font-size: var(--faq-question-size); font-weight: 700; color: var(--color-primary); }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--color-primary); }
.faq-item[open] .faq-item__question::after { content: "-"; }
.faq-item__answer { padding: 0 24px 22px; color: var(--color-text-light); }
.about-page { background: var(--color-background); }
.about-hero { padding: 24px 0 28px; background: var(--color-background); }
.about-hero__inner { width: min(100%, 820px); }
.about-hero__panel { width: 100%; padding: 0; }
.about-hero__eyebrow { display: inline-flex; align-items: center; min-height: 28px; margin: 0 0 18px; padding: 0 10px; background: rgba(169,199,255,0.18); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; border-radius: 4px; }
.about-hero__summary { margin: 0; color: var(--color-primary); font-size: 1rem; font-weight: 700; line-height: 1.65; }
.about-hero__text { margin: 8px 0 0; color: var(--color-text-light); font-size: 1rem; line-height: 1.65; }
.about-standards { background: var(--color-surface-low); }
.about-principles__grid { display: grid; gap: 20px; }
.about-principle-card { padding: 18px; border-radius: 8px; background: var(--color-surface); box-shadow: 0 14px 24px rgba(25,28,29,0.04); }
.about-principle-card__label { margin: 0 0 8px; color: var(--color-primary); font-size: 0.8rem; font-weight: 800; }
.about-copy__inner h2, .about-principle-card h3 { display: block; margin: 0; font-family: var(--font-heading); color: var(--color-text); }
.about-principle-card h3 { font-size: 1.05rem; line-height: 1.25; }
.about-principle-card p { margin: 8px 0 0; color: var(--color-text-light); font-size: 1rem; line-height: 1.65; }
.about-copy { background: var(--color-surface); }
.about-copy--muted { background: var(--color-surface-low); }
.about-copy__inner { width: min(100%, 820px); }
.about-copy__inner h2 { font-size: 1.2rem; line-height: 1.25; }
.about-copy__inner p { margin: 10px 0 0; color: var(--color-text-light); font-size: 1rem; line-height: 1.7; }
.about-copy__inner a { color: var(--color-primary); text-decoration: underline; }
.about-copy__meta { margin: 0 0 20px !important; color: var(--color-text-muted, var(--color-text-light)); font-size: 0.85rem !important; }
.about-copy__privacy-notice { margin-top: 20px !important; padding: 12px 16px; background: rgba(169,199,255,0.12); border-left: 3px solid var(--color-primary); border-radius: 4px; font-size: 0.85rem !important; color: var(--color-text-light); }
.about-hero + .section { padding-top: 40px; }
.site-footer { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container)); color: rgba(255,255,255,0.92); }
.site-footer__inner { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; padding-bottom: 22px; }
.site-footer__copy { margin: 0; font-size: var(--footer-copy-size); }
.site-footer__copy a { color: var(--color-accent); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 16px 22px; font-size: var(--footer-nav-size); }
.site-footer__nav .site-nav__list { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 0; list-style: none; }
.site-footer__link { display: block; color: rgba(255,255,255,0.92); }
.site-footer__link:hover, .site-footer__link:focus-visible { color: var(--color-accent); }
@media (min-width: 768px) { .nav-toggle { display: none; } .site-header__desktop { display: inline-flex; } .quick-calculator__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact-form__grid { grid-template-columns: 1fr; } .guides-page--editorial { padding-top: 24px; } .guides-listing__header { grid-template-columns: minmax(0, 1fr) minmax(180px, 0.56fr) auto; align-items: end; gap: 24px; } .guides-listing__rule { display: block; margin-bottom: 14px; } .guides-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .guides-subscribe__form { flex-direction: row; } .guides-subscribe__form input { flex: 1 1 auto; } .guides-subscribe__form .guides-button { flex: 0 0 auto; } .article-aside-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr); } .article-tags-share { flex-direction: row; justify-content: space-between; align-items: center; } .article-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-principles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (min-width: 1024px) { .hero { padding-bottom: var(--hero-padding-bottom-desktop); } .quick-calculator .container { padding-left: var(--calculator-container-padding-desktop); padding-right: var(--calculator-container-padding-desktop); } .quick-calculator__card { margin-top: var(--calculator-card-overlap-desktop); padding: var(--calculator-card-padding-desktop); } .guides-featured-hero__content { padding: 38px 40px 38px; } .guides-subscribe__content { padding-left: 56px; padding-right: 56px; } .site-footer__inner--guides { flex-direction: row; justify-content: space-between; text-align: left; } .site-footer__brand-block { align-items: flex-start; } .site-footer--guides .site-footer__nav, .site-footer--guides .site-footer__nav .site-nav__list { justify-content: center; } }
@media (min-width: 1100px) { .article-layout { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.62fr); align-items: start; } .article-layout--single-column { grid-template-columns: minmax(0, 1fr); } .article-header__inner { max-width: none; text-align: left; } .article-header__title { margin-left: 0; line-height: 1.08; } .article-meta { justify-content: flex-start; } .article-toc { position: fixed; top: calc(var(--header-min-height) + 18px); right: max(24px, calc((100vw - var(--layout-max-width)) / 2 + var(--layout-container-padding))); width: min(320px, calc(100vw - 48px)); max-height: calc(100vh - var(--header-min-height) - 36px); overflow: auto; } .article-toc__toggle { display: none; } .article-toc__nav { margin-top: 0; } .article-toc__nav[hidden] { display: grid; } .article-layout__sidebar--spacer { display: block; min-width: 320px; } .article-body { max-width: none; margin: 0; } .article-page--has-toc .article-related { width: min(100%, var(--layout-max-width)); padding-right: calc(320px + 36px + var(--layout-container-padding)); } }