@font-face {

      font-family: Manrope;

      src: url('/assets/2f6733e50a9e-Manrope-Regular.ttf') format('truetype');

      font-weight: 400;

      font-display: swap;

    }

    @font-face {

      font-family: Libre;

      src: url('/assets/05a954219613-LibreBaskerville.ttf') format('truetype');

      font-weight: 400;

      font-display: swap;

    }

    :root {

      --navy: #13243b;

      --ivory: #f7f6f2;

      --slate: #465363;

      --mist: #e7e8e5;

      --platinum: #9b9d9d;

      --rule: rgba(19, 36, 59, .22);

      --ease: cubic-bezier(.22, 1, .36, 1);

    }

    * {

      box-sizing: border-box;

    }

    html {

      scroll-behavior: smooth;

      scroll-padding-top: 124px;

    }

    body {

      margin: 0;

      background: var(--ivory);

      color: var(--navy);

      font-family: Manrope, Arial, sans-serif;

      font-size: 17px;

      line-height: 1.7;

      -webkit-font-smoothing: antialiased;

    }

    a {

      color: inherit;

      text-decoration: none;

    }

    button, input, select, textarea {

      font: inherit;

    }

    button, a, input, select, textarea {

      -webkit-tap-highlight-color: transparent;

    }

    button {

      cursor: pointer;

    }

    img {

      max-width: 100%;

      display: block;

    }

    h1, h2, h3, h4, p {

      margin-top: 0;

    }

    body h1, body h2, body h3, body h4 {

      font-family: Libre, Georgia, serif;

      font-weight: 400;

      letter-spacing: -.045em;

      line-height: 1.25;

    }

    body h1 {

      font-size: clamp(42px, 4.6vw, 64px);

      margin-bottom: 28px;

    }

    body h2 {

      font-size: clamp(32px, 3.3vw, 46px);

      margin-bottom: 26px;

    }

    body h3 {

      font-size: 26px;

      margin-bottom: 20px;

    }

    p {

      margin-bottom: 20px;

    }

    p:last-child {

      margin-bottom: 0;

    }

    :focus-visible {

      outline: 2px solid var(--navy);

      outline-offset: 5px;

    }

    ::selection {

      background: var(--mist);

      color: var(--navy);

    }

    [hidden] {

      display: none !important;

    }

    .skip-link {

      position: fixed;

      z-index: 200;

      top: -100px;

      left: 24px;

      background: var(--navy);

      color: var(--ivory);

      padding: 14px 20px;

    }

    .skip-link:focus {

      top: 12px;

    }

    .wrap {

      width: min(1200px, calc(100% - 128px));

      margin-inline: auto;

    }

    .muted {

      color: var(--slate);

    }

    .small {

      font-size: 14px;

      line-height: 1.65;

    }

    .line-link {

      display: inline-flex;

      align-items: center;

      gap: 18px;

      border-bottom: 1px solid currentColor;

      padding: 4px 0;

      font-size: 14px;

      line-height: 1.6;

    }

    .line-link span {

      flex: none;

      font-size: 20px;

      transition: transform .25s;

    }

    .line-link:hover span {

      transform: translate(3px, -3px);

    }

    .button {

      min-height: 50px;

      display: inline-flex;

      gap: 24px;

      align-items: center;

      justify-content: space-between;

      padding: 14px 22px;

      border: 1px solid var(--navy);

      background: var(--navy);

      color: var(--ivory);

      font-size: 14px;

      line-height: 1.5;

      text-align: left;

    }

    .button.secondary {

      color: var(--navy);

      background: transparent;

    }

    .button:hover {

      background: var(--slate);

      border-color: var(--slate);

      color: var(--ivory);

    }

    .site-header {

      height: 106px;

      position: sticky;

      top: 0;

      z-index: 90;

      background: rgba(247, 246, 242, .97);

      border-bottom: 1px solid var(--rule);

      display: flex;

      align-items: center;

      gap: 32px;

      padding-inline: clamp(24px, 4.5vw, 72px);

    }

    .site-logo {

      width: 270px;

      flex: none;

    }

    .site-logo img {

      width: 100%;

      height: 66px;

      object-fit: contain;

      object-position: left center;

    }

    .desktop-nav {

      display: flex;

      align-items: center;

      gap: 30px;

      margin-left: auto;

      font-size: 13px;

    }

    .desktop-nav a {

      padding-block: 14px;

      position: relative;

    }

    .desktop-nav a.active-section {

      border-bottom: 1px solid var(--navy);

    }

    .header-action {

      font-size: 12px;

      white-space: nowrap;

      border-bottom: 1px solid var(--navy);

      padding-block: 8px;

      display: flex;

      gap: 16px;

    }

    .menu-toggle {

      display: none;

      border: 1px solid var(--navy);

      width: 44px;

      height: 44px;

      align-items: center;

      justify-content: center;

      background: transparent;

      flex: none;

      margin-left: auto;

    }

    .mobile-menu {

      position: fixed;

      top: 86px;

      left: 0;

      right: 0;

      background: var(--ivory);

      border-bottom: 1px solid var(--rule);

      padding: 18px 24px 26px;

      z-index: 89;

      max-height: calc(100svh - 86px);

      overflow: auto;

    }

    .mobile-menu a {

      display: flex;

      justify-content: space-between;

      padding: 16px 0;

      border-bottom: 1px solid var(--rule);

      font-size: 20px;

      font-family: Libre, Georgia, serif;

    }

    .section {

      padding-block: 88px;

    }

    .section.mist {

      background: var(--mist);

    }

    .section-border {

      border-bottom: 1px solid var(--rule);

    }

    .plan-desk {

      display: grid;

      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);

      gap: 80px;

      align-items: start;

    }

    .schematic-grid {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 32px;

      margin-top: 48px;

    }

    .schematic-box {

      border-top: 1px solid var(--platinum);

      padding-top: 24px;

    }

    .schematic-box h3 {

      font-size: 18px;

      margin-bottom: 12px;

    }

    .schematic-box p {

      font-size: 14px;

      color: var(--slate);

    }

    .schematic-drawing {

      width: 100%;

      aspect-ratio: 4/3;

      background: var(--mist);

      border: 1px solid var(--rule);

      margin-bottom: 20px;

      display: flex;

      align-items: center;

      justify-content: center;

      color: var(--platinum);

    }

    .property-diagram-full {

      width: 100%;

      background: var(--navy);

      color: var(--ivory);

      padding-block: 60px;

      position: relative;

      overflow: hidden;

    }

    .property-diagram-full .concept-label {

      position: absolute;

      right: 24px;

      bottom: 24px;

      font-size: 11px;

      opacity: 0.7;

    }

    .field-grid {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 24px;

    }

    .field.full {

      grid-column: 1 / -1;

    }

    .field label {

      display: block;

      font-size: 14px;

      margin-bottom: 8px;

    }

    .field input, .field select, .field textarea {

      width: 100%;

      padding: 12px;

      background: var(--ivory);

      border: 1px solid #757b7e;

      color: var(--navy);

      min-height: 48px;

    }

    .field textarea {

      min-height: 120px;

      resize: vertical;

    }

    .tool-result {

      background: var(--ivory);

      border: 1px solid var(--rule);

      padding: 32px;

    }

    .tool-result h3 {

      font-size: 22px;

      margin-bottom: 16px;

    }

    .tool-result textarea {

      width: 100%;

      border: 1px solid var(--rule);

      background: var(--mist);

      font-size: 14px;

      line-height: 1.6;

      padding: 16px;

      margin-bottom: 20px;

    }

    .budget-checklist {

      margin-top: 32px;

      border-top: 1px solid var(--platinum);

      padding-top: 28px;

    }

    .budget-checklist ul {

      list-style: none;

      padding: 0;

      margin: 0;

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 16px 40px;

    }

    .budget-checklist li {

      font-size: 14px;

      color: var(--slate);

      padding-left: 20px;

      position: relative;

    }

    .budget-checklist li::before {

      content: '—';

      position: absolute;

      left: 0;

      color: var(--platinum);

    }

    .site-footer {

      background: var(--ivory);

      color: var(--navy);

      padding-block: 80px 40px;

      border-top: 1px solid var(--rule);

    }

    .footer-grid {

      display: grid;

      grid-template-columns: 1.2fr 1fr 1fr;

      gap: 60px;

    }

    .footer-logo {

      display: block;

      width: min(235px, 100%);

      margin-bottom: 24px;

    }

    .footer-links {

      display: flex;

      flex-direction: column;

      gap: 12px;

    }

    .footer-links strong {

      font-weight: 400;

      color: var(--slate);

      margin-bottom: 8px;

      display: block;

    }

    .footer-bottom {

      margin-top: 60px;

      padding-top: 24px;

      border-top: 1px solid var(--rule);

      display: flex;

      justify-content: space-between;

      font-size: 12px;

      color: var(--slate);

    }

    @media (max-width: 900px) {

      .wrap {

        width: calc(100% - 64px);

      }

      .plan-desk {

        grid-template-columns: 1fr;

        gap: 48px;

      }

      .schematic-grid {

        grid-template-columns: 1fr;

      }

      .footer-grid {

        grid-template-columns: 1fr 1fr;

      }

      .footer-brand {

        grid-column: 1 / -1;

      }

    }

    @media (max-width: 780px) {

      .desktop-nav, .header-action {

        display: none;

      }

      .enhanced .menu-toggle {

        display: flex;

      }

      .field-grid {

        grid-template-columns: 1fr;

      }

      .budget-checklist ul {

        grid-template-columns: 1fr;

      }

    }