/* Boise porch: trim, door, enamel plaques, clapboard, brass figures. */

@font-face {
    font-family: "Literata";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/literata-latin-f7659a86.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Literata";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/literata-latin-ext-698a507a.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --trim-white: #f6f5f1;
    --trim-shade: #ebe9e2;
    --rule: #d8d4ca;
    --door-juniper: #1f4337;
    --door-deep: #163329;
    --on-door: #dfe6e1;
    --enamel-slate: #2e4854;
    --enamel-letter: #e4ebea;
    --brass: #d9b574;
    --clapboard-sage: #dde3da;
    --clapboard-lap: #b9c2b6;
    --umber-ink: #2b2622;
    --umber-soft: #5a534c;
    --eave-shadow: #221e1b;
    --lamp: 226, 150, 52;
    --serif: "Literata", "Iowan Old Style", Georgia, serif;
    --gutter: clamp(20px, 4vw, 56px);
    --max-width: 1280px;
    --type-display: clamp(2.25rem, 1.2rem + 2.4vw, 3.25rem);
    --type-headline: clamp(1.5rem, 1.05rem + 1.4vw, 2.125rem);
    --type-title: 1.3125rem;
    --type-subhead: 1.125rem;
    --type-numeral: 1.625rem;
    --type-numeral-lg: 1.875rem;
    --type-lead: 1.125rem;
    --type-body: 1.0625rem;
    --type-ui: 0.9375rem;
    --type-label: 0.8125rem;
    --type-micro: 0.75rem;
    /* Checklist mark: drawn once, painted juniper through a mask. */
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M1.25 5.25 4.75 8.5 11.75 1.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-padding-top: 96px;
}

body {
    background: var(--trim-white);
    color: var(--umber-ink);
    font-family: var(--serif);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.65;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    caret-color: var(--umber-ink);
    accent-color: var(--door-juniper);
}

.utility-bar,
.site-footer,
.cta-band,
.front-door,
.home-cta,
.door-panel,
.plaque,
.city-numbers,
.calc-result {
    -webkit-font-smoothing: auto;
}

::selection {
    background: rgba(var(--lamp), 0.35);
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--door-juniper);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

a:hover {
    color: var(--door-deep);
    text-decoration-thickness: 2px;
}

/* A phone number never breaks across lines. */
a[href^="tel:"] {
    white-space: nowrap;
}

h1,
h2,
h3,
h4 {
    font-weight: 500;
    line-height: 1.12;
    color: var(--umber-ink);
    text-wrap: balance;
    letter-spacing: -0.015em;
    font-variation-settings: "opsz" 60, "wght" 500;
}

h1 {
    font-size: var(--type-display);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 72, "wght" 500;
}

h2 {
    font-size: var(--type-headline);
}

h3 {
    font-size: var(--type-title);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 36, "wght" 500;
}

.service-block h2,
.faq-group h2 {
    font-size: var(--type-title);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 36, "wght" 500;
}

p {
    text-wrap: pretty;
}

ul,
ol {
    padding-left: 1.25rem;
}

:focus-visible {
    outline: 2px solid var(--umber-ink);
    outline-offset: 3px;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.narrow {
    max-width: 72ch;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    background: var(--umber-ink);
    color: var(--trim-white);
    padding: 8px 12px;
}

.skip-link:focus {
    left: 8px;
}

/* Utility transom */
.utility-bar {
    background: var(--umber-ink);
    color: var(--trim-shade);
    font-size: var(--type-label);
}

.utility-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-block: 7px;
    flex-wrap: wrap;
}

.utility-bar nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.utility-bar a {
    color: var(--trim-white);
    text-decoration: none;
}

.utility-bar a:hover {
    text-decoration: underline;
}

.u-narrow {
    display: none;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--trim-white);
    border-bottom: 1px solid var(--rule);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--umber-ink);
}

.brand img {
    width: 36px;
    height: 40px;
}

.brand-name {
    display: block;
    font-size: var(--type-title);
    font-weight: 500;
    line-height: 1.1;
}

.brand-name small {
    display: block;
    font-size: var(--type-label);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--umber-soft);
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--umber-soft);
    border-radius: 3px;
    padding: 8px 14px;
    font: inherit;
    font-size: var(--type-ui);
    color: var(--umber-ink);
    cursor: pointer;
}

.main-nav > ul {
    display: flex;
    align-items: center;
    gap: 8px 26px;
    list-style: none;
    padding: 0;
}

.main-nav li {
    position: relative;
}

.main-nav > ul > li > a {
    display: block;
    padding: 8px 0;
    color: var(--umber-ink);
    text-decoration: none;
    font-size: var(--type-ui);
}

.main-nav > ul > li:not(.nav-cta) > a:hover,
.main-nav > ul > li > a[aria-current="page"] {
    color: var(--door-juniper);
    text-decoration: underline;
}

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    list-style: none;
    padding: 0;
    background: var(--trim-white);
    border: 1px solid var(--rule);
    box-shadow: 0 10px 24px -12px rgba(43, 38, 34, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 20;
}

.main-nav li:hover > .submenu,
.main-nav li:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li + li {
    border-top: 1px solid var(--rule);
}

.submenu a {
    display: block;
    padding: 11px 16px;
    color: var(--umber-ink);
    text-decoration: none;
    font-size: var(--type-ui);
}

.submenu a:hover {
    color: var(--door-juniper);
}

.nav-toggle,
.sub-toggle {
    display: none;
}

.main-nav .nav-cta {
    margin-left: 8px;
}

.main-nav > ul > li.nav-cta > a {
    padding: 9px 18px;
    background: var(--door-juniper);
    border-color: var(--door-juniper);
    color: var(--trim-white);
    text-decoration: none;
    box-shadow: none;
}

.main-nav > ul > li.nav-cta > a:hover {
    background: var(--door-deep);
    border-color: var(--door-deep);
    color: var(--trim-white);
}

/* Buttons: painted juniper, 3px corners. Plaques are square, slate, rimmed. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: 1px solid var(--door-juniper);
    border-radius: 3px;
    background: var(--door-juniper);
    color: var(--trim-white);
    font: 500 1rem/1.2 var(--serif);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease-out, box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover {
    background: var(--door-deep);
    color: var(--trim-white);
}

.btn-primary,
.btn-secondary {
    background: var(--door-juniper);
    border-color: var(--door-juniper);
    color: var(--trim-white);
}

.btn-primary:hover,
.btn-secondary:hover {
    background: var(--door-deep);
    color: var(--trim-white);
}

/* The porch lamp burns against a dark ground only: on trim white it is a smudge. */
.cta-band .btn-lit,
.front-door .btn-lit,
.home-cta .btn-lit,
.door-panel .btn-lit,
.door-hero .btn-lit,
.section-dark .btn-lit {
    box-shadow: 0 14px 34px -8px rgba(var(--lamp), 0.62), 0 5px 14px -5px rgba(var(--lamp), 0.5);
    animation: lamp-on 1600ms 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cta-band .btn-lit:hover,
.front-door .btn-lit:hover,
.home-cta .btn-lit:hover,
.door-panel .btn-lit:hover,
.door-hero .btn-lit:hover,
.section-dark .btn-lit:hover {
    box-shadow: 0 20px 46px -8px rgba(var(--lamp), 0.85), 0 6px 16px -4px rgba(var(--lamp), 0.6);
}

@keyframes lamp-on {
    0% { box-shadow: 0 14px 34px -8px rgba(var(--lamp), 0), 0 5px 14px -5px rgba(var(--lamp), 0); }
    12% { box-shadow: 0 14px 34px -8px rgba(var(--lamp), 0.3), 0 5px 14px -5px rgba(var(--lamp), 0.2); }
    18% { box-shadow: 0 14px 34px -8px rgba(var(--lamp), 0.05), 0 5px 14px -5px rgba(var(--lamp), 0.05); }
    100% { box-shadow: 0 14px 34px -8px rgba(var(--lamp), 0.62), 0 5px 14px -5px rgba(var(--lamp), 0.5); }
}

.btn-outline {
    background: transparent;
    color: var(--door-juniper);
    border-color: var(--door-juniper);
    box-shadow: none;
    animation: none;
}

.btn-outline:hover {
    background: rgba(31, 67, 55, 0.07);
    color: var(--door-deep);
    box-shadow: none;
}

/* The secondary action in a door band: an unlit outline, so the lamp stays on the one way in. */
.btn-on-dark {
    background: transparent;
    border-color: var(--trim-white);
    color: var(--trim-white);
    box-shadow: none;
    animation: none;
}

.btn-on-dark:hover {
    background: rgba(246, 245, 241, 0.1);
    color: var(--trim-white);
}

.btn-small {
    padding: 9px 18px;
    font-size: var(--type-ui);
}

.btn-row,
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
}

.text-link {
    font-size: var(--type-ui);
}

/* House plaques */
.plaque {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
    padding: 10px 16px 11px;
    border-radius: 1px;
    background: var(--enamel-slate);
    box-shadow:
        inset 0 0 0 1px var(--brass),
        inset 0 0 0 4px var(--enamel-slate),
        inset 0 0 0 5px rgba(217, 181, 116, 0.4),
        0 4px 9px -3px rgba(0, 0, 0, 0.5);
    color: var(--enamel-letter);
}

.plaque-label {
    font-size: var(--type-label);
    line-height: 1.3;
    text-wrap: balance;
}

.figure {
    font-family: var(--serif);
    font-size: var(--type-numeral);
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--brass);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.figure small {
    font-size: var(--type-label);
}

.figure-inline {
    color: var(--brass);
    font-variant-numeric: lining-nums;
}

.roll {
    display: inline-block;
}

.roll.is-rolling {
    animation: roll 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes roll {
    0% { transform: translateY(55%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.plaque-rent {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.plaque-rent label {
    font-size: var(--type-label);
    line-height: 1.3;
}

.rent-well {
    display: inline-flex;
    align-items: baseline;
    margin-left: auto;
    padding: 3px 10px 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.32);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: text;
}

.plaque input {
    font-family: var(--serif);
    font-size: var(--type-numeral);
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--brass);
    white-space: nowrap;
    letter-spacing: -0.01em;
    width: 6ch;
    min-width: 3ch;
    border: 0;
    background: transparent;
    caret-color: var(--brass);
}

/* Hug the typed rent where the browser can; 6ch fits "99,999" elsewhere. */
@supports (field-sizing: content) {
    .plaque input {
        width: auto;
        field-sizing: content;
    }
}

.plaque input:focus {
    outline: none;
}

.rent-well:focus-within {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
}

.edge-caption {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 1px;
    background: rgba(43, 38, 34, 0.74);
    color: var(--trim-white);
    font-size: var(--type-micro);
    line-height: 1.4;
}

/* Homepage porch hero */
.porch-hero {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 110px);
    min-height: 620px;
    width: 100%;
    overflow: hidden;
    background: var(--umber-ink);
}

.porch-hero .hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
}

.hero-inner {
    position: relative;
    height: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

.porch-hero .hero-panel {
    position: absolute;
    left: clamp(20px, 4.2%, 64px);
    top: 50%;
    transform: translateY(-50%);
    width: min(40%, 540px);
    padding: clamp(28px, 3vw, 44px);
    background: var(--trim-white);
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 9px var(--trim-white),
        inset 0 0 0 10px var(--rule),
        0 24px 48px -24px rgba(10, 14, 20, 0.6);
}

.porch-hero .hero-lead {
    margin-top: 16px;
    font-size: var(--type-lead);
    line-height: 1.5;
    color: var(--umber-soft);
}

.plaque-wall {
    position: absolute;
    right: clamp(20px, 4.2%, 64px);
    top: 19%;
    width: clamp(360px, 28%, 400px);
}

.plaque-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.plaque-board {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 12px;
    background: var(--trim-white);
    box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.45);
    font-size: var(--type-label);
    color: var(--umber-ink);
}

.hero-caption {
    position: absolute;
    right: 16px;
    bottom: 14px;
}

/* Sections */
.section,
.band {
    padding-block: clamp(56px, 8vw, 104px);
}

.section-alt,
.clapboard {
    background-color: var(--clapboard-sage);
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(43, 38, 34, 0.05) 0px,
        rgba(43, 38, 34, 0.05) 1px,
        transparent 1px,
        transparent 48px
    );
}

/* Siding is wall only: content in a siding band sits on a trim-white board. */
.section-alt > .container {
    background: var(--trim-white);
    padding-block: clamp(28px, 4vw, 56px);
    box-shadow: 0 10px 24px -14px rgba(43, 38, 34, 0.45);
}

.section-dark {
    background: var(--door-juniper);
    color: var(--trim-white);
}

.section-dark a:not(.btn) {
    color: var(--trim-white);
}

/* Dark bands: the global h1-h4 rule sets umber-ink, which overrides the
   inherited light color. Every heading inside a dark band needs its own
   override so nothing renders dark-on-dark. */
.front-door h1,
.front-door h2,
.front-door h3,
.front-door h4,
.door-panel h1,
.door-panel h2,
.door-panel h3,
.door-panel h4,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.door-hero h1,
.cta-band h1,
.cta-band h2,
.cta-band h3,
.cta-band h4,
.home-cta h1,
.home-cta h2,
.home-cta h3,
.home-cta h4,
.site-footer h1,
.site-footer h3,
.site-footer h4 {
    color: var(--trim-white);
}

.section-head {
    max-width: 56ch;
    margin-bottom: 40px;
}

/* The register plate is evidence for the claim above it, so it sits closer to
   that claim than to whatever follows. At an even 40px on both sides it read as
   floating between two groups rather than belonging to one. */
.section-head:has(+ .city-numbers) {
    margin-bottom: 28px;
}

.section-head.center {
    margin-inline: auto;
    text-align: center;
}

.section-head p,
.intro {
    margin-top: 12px;
    max-width: 56ch;
    font-size: var(--type-lead);
    line-height: 1.5;
    color: var(--umber-soft);
}

.clapboard .intro,
.clapboard .section-head p {
    color: var(--umber-ink);
}

.eyebrow {
    display: none;
}

.lead {
    font-size: var(--type-lead);
    line-height: 1.5;
    color: var(--umber-soft);
}

.page-hero {
    padding-block: clamp(40px, 6vw, 72px);
    background: var(--trim-white);
    border-bottom: 1px solid var(--rule);
}

.page-hero h1 {
    margin-bottom: 20px;
}

.page-hero .lead {
    max-width: 56ch;
}

.page-hero .btn-row {
    margin-top: 24px;
}

.about-hero-action {
    display: none;
}

.breadcrumbs {
    font-size: var(--type-label);
    color: var(--umber-soft);
    margin-bottom: 14px;
}

/* Tall tap target without moving the line. */
.breadcrumbs a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
    color: var(--umber-soft);
}

/* Section layouts. Owner pages open on the painted door; renter pages open on
   a board hung on the porch wall. Both then share the tab row and a closing door. */
.door-hero {
    padding-top: clamp(48px, 7vw, 96px);
    background: var(--door-deep);
    color: var(--on-door);
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* The copy pads the bottom so the fanlight can sit on the lintel. */
.door-hero-inner {
    position: relative;
    padding-bottom: clamp(48px, 7vw, 96px);
}

.door-hero.has-aside .door-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px clamp(32px, 6vw, 88px);
    align-items: end;
}

.door-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

.door-hero h1 {
    margin-bottom: 20px;
}

.porch-board h1 {
    margin-bottom: 14px;
}

.door-hero .lead {
    max-width: 56ch;
    color: var(--on-door);
}

.door-hero a:not(.btn) {
    color: var(--trim-white);
}

.door-hero :focus-visible {
    outline-color: var(--trim-white);
}

.door-hero .btn-row {
    margin-top: 28px;
}

.porch-board .btn-row {
    margin-top: 20px;
}

.door-hero .btn-primary {
    background: var(--trim-white);
    border-color: var(--trim-white);
    color: var(--door-juniper);
}

.door-hero .btn-primary:hover {
    background: var(--trim-shade);
    color: var(--door-deep);
}

.door-hero .plaque {
    box-shadow:
        inset 0 0 0 1px var(--brass),
        inset 0 0 0 4px var(--enamel-slate),
        inset 0 0 0 5px rgba(217, 181, 116, 0.4),
        0 6px 14px -4px rgba(0, 0, 0, 0.6);
}

.roofline {
    position: absolute;
    right: var(--gutter);
    bottom: 0;
    width: clamp(260px, 32vw, 440px);
    color: rgba(217, 181, 116, 0.3);
    pointer-events: none;
}

.porch-wall {
    padding-block: clamp(20px, 2.6vw, 36px);
}

.porch-wall-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px clamp(32px, 6vw, 88px);
    align-items: stretch;
}

/* One board height across the section, so the wall beside it lines up page to page. */
.porch-wall-inner .porch-board {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 20rem;
    padding: clamp(20px, 2.4vw, 32px);
}

.porch-board .lead {
    max-width: 56ch;
}

/* The wall column fills the board’s height: same top edge, same bottom edge. */
.porch-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-self: end;
    width: min(100%, 24rem);
}

/* One question per page, posted on the wall beside the board. */
.porch-aside .wall-note {
    background: var(--door-juniper);
    box-shadow:
        inset 0 2px 0 rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 0 6px var(--door-deep),
        inset 0 0 0 7px rgba(0, 0, 0, 0.3),
        inset 0 0 0 8px rgba(255, 255, 255, 0.05),
        0 10px 24px -12px rgba(22, 51, 41, 0.6);
    color: var(--on-door);
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 26px 28px 28px;
}

.wall-note-q {
    color: var(--trim-white);
    margin-bottom: 8px;
    font-size: var(--type-subhead);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.wall-note p + p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--on-door);
}

.wall-note a {
    color: var(--trim-white);
}

.wall-note :focus-visible {
    outline-color: var(--trim-white);
}


/* The tab row is the lintel under either hero: every sibling page, one line. */
.section-tabs {
    position: sticky;
    top: 77px;
    z-index: 40;
    background: var(--trim-white);
    border-bottom: 1px solid var(--rule);
}

.section-tabs .container {
    position: relative;
}

.section-tabs ul {
    display: flex;
    gap: clamp(20px, 2.6vw, 36px);
    padding: 0;
    list-style: none;
}

.section-tabs a {
    display: block;
    margin-bottom: -1px;
    padding-block: 15px 13px;
    border-bottom: 2px solid transparent;
    color: var(--umber-soft);
    font-size: var(--type-ui);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease-out, border-color 160ms ease-out;
}

.section-tabs a:hover {
    border-bottom-color: var(--rule);
    color: var(--umber-ink);
}

.section-tabs a[aria-current="page"] {
    border-bottom-color: var(--door-juniper);
    color: var(--umber-ink);
}

.section-tabs a:focus-visible {
    outline-offset: -2px;
}

/* Between the nav breakpoint and 1100px the hero buttons take a second row. */
@media (min-width: 961px) and (max-width: 1100px) {
    .porch-wall-inner .porch-board {
        min-height: 22rem;
    }
}

html:has(.section-tabs) {
    scroll-padding-top: 148px;
}

.board {
    padding: clamp(28px, 4vw, 56px);
    background: var(--trim-white);
    box-shadow: 0 10px 24px -14px rgba(43, 38, 34, 0.45);
}

.grid {
    display: grid;
    gap: 20px;
}

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

/* Cards are hairline-ruled list items: no box, no fill, no shadow. */
.card {
    padding-block: 18px 22px;
    border-top: 1px solid var(--rule);
}

.card h3 {
    margin-bottom: 8px;
}

.card p {
    color: var(--umber-soft);
    font-size: var(--type-body);
}

.card .card-link {
    display: inline-block;
    margin-top: 14px;
    font-size: var(--type-ui);
}

a.card {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.card:hover h3 {
    color: var(--door-juniper);
    text-decoration: underline;
}

.section-dark .card {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--trim-white);
}

.section-dark .card p {
    color: var(--on-door);
}

/* A city's reference figures as one engraved register plate.

   This was four separate plaques in a 20px-gap grid, each stretched to 1fr. The
   figures are unequal in length by nature ("8%" against "Application fee, per
   adult"), so equal boxes left every cell a different run of dead space on its
   right, and the row read as four objects that happened to land near each other.
   One frame, hairline rules between cells, and centred content: the space left
   over in each cell is now symmetric, which is what stops it looking arbitrary. */
.city-numbers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Clears the 5px of inset rules below, so no cell sits on the frame. */
    padding: 5px;
    background: var(--enamel-slate);
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 1px var(--brass),
        inset 0 0 0 4px var(--enamel-slate),
        inset 0 0 0 5px rgba(217, 181, 116, 0.4),
        0 4px 9px -3px rgba(0, 0, 0, 0.5);
}

.city-number {
    /* A little more below than above: the numeral's optical weight sits high, so
       equal padding reads as bottom-light. */
    padding: 20px 22px 24px;
    text-align: center;
}

.city-number + .city-number {
    border-left: 1px solid rgba(217, 181, 116, 0.28);
}

.city-number strong {
    display: block;
    font-size: var(--type-numeral-lg);
    font-weight: 500;
    line-height: 1.1;
    color: var(--brass);
    font-variant-numeric: lining-nums tabular-nums;
}

.city-number span {
    display: block;
    margin-top: 6px;
    font-size: var(--type-label);
    line-height: 1.35;
    color: var(--enamel-letter);
}

/* Two by two rather than one 350px-wide cell holding two short lines. The rules
   reorient with the grid: cell 3 starts a row, so it drops its left rule and the
   bottom pair gains a top one. */
@media (max-width: 720px) {
    .city-numbers {
        grid-template-columns: repeat(2, 1fr);
    }

    .city-number {
        padding: 18px 14px 20px;
    }

    .city-number:nth-child(3) {
        border-left: 0;
    }

    .city-number:nth-child(n+3) {
        border-top: 1px solid rgba(217, 181, 116, 0.28);
    }
}

.fine-print {
    margin-top: 18px;
    max-width: 72ch;
    font-size: var(--type-label);
    color: var(--umber-soft);
}

.section-dark .fine-print {
    color: var(--on-door);
}

/* Steps */
.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding-top: 0;
}

.steps li::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    margin-bottom: 16px;
    padding: 10px 0 11px;
    border-radius: 1px;
    background: var(--enamel-slate);
    color: var(--brass);
    font-size: var(--type-numeral-lg);
    font-weight: 500;
    box-shadow:
        inset 0 0 0 1px var(--brass),
        inset 0 0 0 4px var(--enamel-slate),
        inset 0 0 0 5px rgba(217, 181, 116, 0.4),
        0 4px 9px -3px rgba(0, 0, 0, 0.5);
}

.steps h3 {
    font-size: var(--type-subhead);
    margin-bottom: 6px;
}

.steps p {
    font-size: var(--type-body);
    color: var(--umber-soft);
    max-width: 60ch;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.split.top {
    align-items: start;
}

.split > div > p {
    max-width: 56ch;
}

.split > div > p + p {
    margin-top: 14px;
}

.split h2 {
    margin-bottom: 16px;
}

.image-placeholder {
    aspect-ratio: 4 / 3;
    max-width: 100%;
    display: grid;
    place-items: center;
    border-radius: 1px;
    background: var(--trim-white);
    border: 1px dashed var(--umber-soft);
    color: var(--umber-soft);
    font-size: var(--type-label);
    text-align: center;
    padding: 20px;
}

.portal-shot img {
    width: 100%;
    height: auto;
}

.portal-shot figcaption {
    margin-top: 8px;
}

.app-shot {
    margin-bottom: 18px;
}

.app-shot img {
    display: block;
    width: 100%;
    height: 260px;
    padding: 16px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 1px;
}

.app-shot figcaption {
    margin-top: 8px;
}

/* About: story and a shared line on the left, the two operators on the right.
   DOM order is story, people, contact so narrow screens meet the people first. */
.hiring {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "story people"
        "contact people";
    column-gap: clamp(40px, 5vw, 72px);
    align-items: start;
}

.hiring-story { grid-area: story; }
.hiring-people { grid-area: people; }
.hiring-contact { grid-area: contact; }

.hiring-story p {
    margin-top: 16px;
    max-width: 44ch;
    font-size: var(--type-lead);
    line-height: 1.5;
    color: var(--umber-soft);
}

.hiring-people {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 40px);
}

/* Portrait, nameplate, and bio share rows across the pair, so the nameplates
   match in height even when one role wraps. */
.operator {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
}

/* A framed portrait with an enamel nameplate screwed to the bottom of the mat. */
.portrait {
    position: relative;
    padding: 10px;
    background: var(--trim-white);
    box-shadow:
        inset 0 0 0 1px var(--rule),
        0 10px 24px -14px rgba(43, 38, 34, 0.45);
    border-radius: 1px;
}

.portrait img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 1px;
}

.portrait .edge-caption {
    position: absolute;
    top: 20px;
    left: 20px;
    margin-right: 20px;
}

.nameplate {
    position: relative;
    z-index: 1;
    width: fit-content;
    min-width: min(15rem, calc(100% - 40px));
    max-width: calc(100% - 40px);
    margin: -30px 0 0 20px;
    padding: 11px 18px 12px;
    gap: 1px;
    justify-content: flex-start;
}

.nameplate h3 {
    font-size: var(--type-title);
    line-height: 1.2;
    color: var(--brass);
}

.nameplate p {
    font-size: var(--type-label);
    letter-spacing: 0.01em;
    color: var(--enamel-letter);
}

.operator > p {
    margin-top: 16px;
    max-width: 44ch;
    line-height: 1.55;
    color: var(--umber-soft);
}

.hiring-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 32px;
    font-size: var(--type-ui);
}

.hiring-contact h3 {
    margin-bottom: 8px;
    font-size: var(--type-subhead);
}

.hiring-phone {
    font-size: var(--type-title);
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.3;
}

.hiring-hours {
    margin-top: 4px;
    color: var(--umber-soft);
}

@media (max-width: 960px) {
    .hiring {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "story" "people" "contact";
    }

    .hiring-people {
        margin-top: 36px;
    }

    .hiring-contact {
        margin-top: 36px;
    }
}

/* Phones: square crops keep both faces close to the top of the section. */
@media (max-width: 600px) {
    .hiring-people {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .operator + .operator {
        margin-top: 40px;
    }

    .portrait {
        padding: 8px;
    }

    .portrait img {
        aspect-ratio: 1 / 1;
        object-position: 50% 22%;
    }

    .portrait .edge-caption {
        top: 16px;
        left: 16px;
    }

    .nameplate {
        margin: -26px 0 0 16px;
    }
}

.photo-frame {
    position: relative;
}

.photo-frame img {
    width: 100%;
    object-fit: cover;
    border-radius: 1px;
}

.photo-frame .edge-caption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    margin-right: 12px;
}

.checklist {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.checklist li {
    position: relative;
    padding-left: 22px;
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    /* Centered on the first line's lowercase letters: half the line box, then
       down to Literata's x-height middle. Works at any line-height. */
    top: calc(0.5lh + 0.15em);
    width: 13px;
    height: 10px;
    transform: translateY(-50%);
    background: var(--door-juniper);
    -webkit-mask: var(--check) center / contain no-repeat;
    mask: var(--check) center / contain no-repeat;
}

.prose h2 {
    font-size: var(--type-headline);
    margin-top: 44px;
    margin-bottom: 12px;
}

.prose h3 {
    margin-top: 28px;
    margin-bottom: 8px;
}

.prose p,
.prose ul,
.prose ol {
    margin-bottom: 14px;
    color: var(--umber-soft);
}

.prose li + li {
    margin-top: 6px;
}

.prose > :first-child {
    margin-top: 0;
}

.service-block {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding-block: 40px;
    border-top: 1px solid var(--rule);
}

.service-block:first-child {
    border-top: 0;
    padding-top: 0;
}

.service-block p {
    color: var(--umber-soft);
    max-width: 64ch;
}

.service-block .checklist {
    grid-template-columns: 1fr 1fr;
}

/* A board on siding holds a heading block and its actions side by side. Without
   this the copy keeps its 56ch measure and leaves two-thirds of the board empty. */
.band-split {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.band-split .section-head {
    margin-bottom: 0;
}

@media (max-width: 960px) {
    .band-split {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

/* Areas: the section is hardware, not the painted door. Owner pages open on
   door-deep and renter pages on siding; a city page opens on enamel, because a
   map is wayfinding and wayfinding on this house is brass engraved on slate. */
.door-hero.area-hero {
    background: var(--enamel-slate);
    color: var(--enamel-letter);
    /* The map is a tall shape — Ada County's cities run north to south — so this
       hero carries less padding than the owner door, or it towers over it. */
    padding-top: clamp(44px, 6vw, 80px);
}

.area-hero .door-hero-inner {
    padding-bottom: clamp(44px, 6vw, 80px);
}

.area-hero .lead {
    color: var(--enamel-letter);
}

.area-hero .btn-primary {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--eave-shadow);
}

.area-hero .btn-primary:hover {
    background: var(--trim-white);
    border-color: var(--trim-white);
    color: var(--eave-shadow);
}

.door-hero.area-hero.has-aside .door-hero-inner {
    align-items: center;
}

.area-map {
    margin: 0;
}

.area-map svg {
    display: block;
    width: auto;
    height: clamp(230px, 30vw, 380px);
    margin-inline: auto;
    /* No clipping. This used to be overflow:hidden to cut off the Ada County
       path, which ran ~990 units past the bottom of the viewBox. That path is no
       longer drawn, every city fits the frame (Kuna reaches y=1293 of 1343), and
       clipping now would only cut the focus ring off the map's own links. */
    overflow: visible;
}

/* These outlines are the only thing identifying four link targets, so they are
   held to WCAG 1.4.11 (3:1 for non-text UI). The old 0.5-alpha stroke measured
   2.38:1 on enamel slate and the 0.08 fill about 1.2:1 — a table of contents you
   had to already know was there. 0.78 alpha measures ~3.6:1. */
.map-city path {
    fill: rgba(217, 181, 116, 0.16);
    stroke: rgba(217, 181, 116, 0.78);
    stroke-width: 2.5;
    stroke-linejoin: round;
    transition: fill 160ms ease-out, stroke 160ms ease-out;
}

.map-city text {
    font-family: var(--serif);
    font-size: 46px;
    fill: var(--enamel-letter);
    fill-opacity: 0.72;
    text-anchor: middle;
    dominant-baseline: middle;
    /* A slate halo so a label stays legible over a jagged boundary. */
    paint-order: stroke fill;
    stroke: var(--enamel-slate);
    stroke-width: 7;
    stroke-linejoin: round;
}

/* Raised from 0.26 when the resting fill went 0.08 -> 0.16 for contrast: the
   old value left only 0.10 of separation, and "you are here" has to stay obvious
   now that every other shape is a link too. */
.map-city.is-current path {
    fill: rgba(217, 181, 116, 0.36);
    stroke: var(--brass);
    stroke-width: 4;
}

/* The current city is the one label that must win. Brass on its own brass fill
   disappears, so it goes trim-white and keeps the slate halo. */
.map-city.is-current text {
    fill: var(--trim-white);
    fill-opacity: 1;
    stroke-width: 8;
}

/* On the index the map is the section's table of contents. */
.area-map.is-linked .map-city a {
    cursor: pointer;
}

.area-map.is-linked .map-city:hover path,
.area-map.is-linked .map-city a:focus-visible path {
    fill: rgba(217, 181, 116, 0.24);
    stroke: var(--brass);
    stroke-width: 4;
}

.area-map.is-linked .map-city:hover text,
.area-map.is-linked .map-city a:focus-visible text {
    fill: var(--trim-white);
    fill-opacity: 1;
}

/* A paint change alone cannot carry focus here: fill moved 1.33:1 and stroke
   2.09:1 between states, both under the 3:1 that WCAG 2.2 SC 2.4.11 wants. A
   real ring is also the only focus cue that survives the shapes being small. */
.area-map.is-linked .map-city a:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

/* Home base. The map exists to prove "four cities, one drive", which is a claim
   about distance from somewhere — so the somewhere has to be on the drawing. */
.map-home circle {
    fill: none;
    stroke: var(--trim-white);
    stroke-width: 3;
}

.map-home .map-home-pip {
    fill: var(--trim-white);
    stroke: none;
}

.map-home text {
    font-family: var(--sans);
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.06em;
    fill: var(--trim-white);
    text-anchor: middle;
    paint-order: stroke fill;
    stroke: var(--enamel-slate);
    stroke-width: 7;
    stroke-linejoin: round;
}

/* The current city stays legible as "you are here" even though every shape is
   now a link: its brass is solid where the others are 0.78, and the rest-state
   rule below never outranks it because .is-current adds a class. */

/* The map gets smaller on a phone, and SVG text scales with it — at the stacked
   size a 46-unit label renders around 8px. Sizes here are viewBox units, so the
   labels grow as the drawing shrinks and end up about the same on screen. */
@media (max-width: 960px) {
    .map-city text {
        font-size: 74px;
        stroke-width: 11;
    }

    .map-city.is-current text {
        stroke-width: 12;
    }

    /* The labels grow as the drawing shrinks, which reopens the collision with
       Boise's label that the 60-unit lift clears on desktop. Another 40 user
       units of separation buys ~7px at this size. */
    .map-home text {
        font-size: 62px;
        stroke-width: 11;
        transform: translateY(-40px);
    }

    .map-home circle {
        stroke-width: 5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-city path {
        transition: none;
    }
}

/* The city's two numbers, in the label column beside its description. */
.area-figures {
    margin-top: 6px;
    font-size: var(--type-label);
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--umber-soft);
}

/* Pricing: fee plaques on the owner door, then a first-year ledger on enamel. */
.pricing-plaques .plaque-grid {
    gap: 12px;
}

.pricing-plaques .figure {
    font-size: var(--type-numeral-lg);
}

.plaque-caption {
    margin-top: 14px;
    font-size: var(--type-label);
    color: var(--umber-soft);
}

.door-hero .plaque-caption {
    color: var(--on-door);
}

.first-year-ledger {
    max-width: 34rem;
}

.ledger {
    gap: 0;
    padding: 20px 24px 6px;
}

.ledger-rent {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(217, 181, 116, 0.4);
}

.ledger-rent label {
    font-size: var(--type-ui);
}

.ledger dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding-block: 14px;
    border-bottom: 1px solid rgba(228, 235, 234, 0.14);
}

.ledger dl > div:last-child {
    border-bottom: 0;
}

.ledger dt {
    font-size: var(--type-ui);
    line-height: 1.35;
}

.ledger dt small {
    display: block;
    margin-top: 2px;
    font-size: var(--type-label);
    color: rgba(228, 235, 234, 0.78);
}

.ledger dd {
    font-size: var(--type-numeral);
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--brass);
    white-space: nowrap;
}

.ledger .ledger-total,
.ledger dl > div:has(+ .ledger-total) {
    border-bottom-color: rgba(217, 181, 116, 0.4);
}

.ledger-total dt {
    font-weight: 500;
    color: var(--trim-white);
}

.ledger-total dd {
    font-size: var(--type-numeral-lg);
}

.fee-line {
    margin-top: 4px;
    font-size: var(--type-ui);
    font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 600px) {
    .ledger {
        padding-inline: 16px;
    }

    .ledger dl > div {
        gap: 12px;
    }

    .ledger-total dd {
        font-size: var(--type-numeral);
    }
}

/* Keep the phone number on one line. */
.faq-contact a {
    white-space: nowrap;
}

/* The two compared columns get equal width; the fee name stays narrow. */
@media (min-width: 601px) {
    .fee-table table {
        table-layout: fixed;
    }

    .fee-table th:first-child {
        width: 24%;
    }
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 1px;
    background: var(--clapboard-sage);
    color: var(--door-deep);
    font-size: var(--type-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-clay {
    background: var(--enamel-slate);
    color: var(--brass);
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: 1px;
    background: var(--trim-white);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-body);
}

th,
td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

thead th {
    background: var(--trim-shade);
    font-weight: 500;
}

/* Row headers read like the cells beside them; the stacked layout gives them weight. */
tbody th {
    font-weight: 400;
}

tbody tr:last-child th,
tbody tr:last-child td {
    border-bottom: 0;
}

/* Tables with 3+ columns clip on narrow screens: .table-stack renders each
   row as a labeled, stacked block instead. thead stays in the DOM (and
   readable to assistive tech) but is visually hidden. */
@media (max-width: 600px) {
    .table-stack table,
    .table-stack tbody,
    .table-stack tr,
    .table-stack tbody th,
    .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack thead th {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .table-stack tbody tr {
        padding: 16px 18px;
        border-bottom: 1px solid var(--rule);
    }

    .table-stack tbody tr:last-child {
        border-bottom: 0;
    }

    .table-stack tbody th,
    .table-stack td {
        padding: 3px 0;
        border-bottom: 0;
    }

    .table-stack tbody th,
    .table-stack td:first-child {
        margin-bottom: 6px;
        font-size: var(--type-lead);
        font-weight: 500;
        color: var(--umber-ink);
    }

    .table-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--type-micro);
        color: var(--umber-soft);
    }
}

/* FAQ */
.faq {
    display: grid;
    gap: 0;
}

.faq details,
.qa {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    padding: 0;
}

.faq details:first-child,
.qa:first-child {
    border-top: 1px solid var(--rule);
}

.faq summary,
.qa summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 20px;
    cursor: pointer;
    list-style: none;
    padding: 18px 0;
    position: relative;
    font-weight: 500;
    font-size: var(--type-subhead);
    line-height: 1.4;
}

.faq summary::-webkit-details-marker,
.qa summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(17.25px + 0.7em);
    width: 16px;
    height: 1.5px;
    background: var(--door-juniper);
    box-shadow: 0 0 0 0 var(--door-juniper);
}

.faq details:not([open]) summary::after {
    box-shadow: 0 0 0 0 currentColor;
}

.faq details:not([open]) summary::before {
    content: "";
    position: absolute;
    right: 7.25px;
    top: calc(10px + 0.7em);
    width: 1.5px;
    height: 16px;
    background: var(--door-juniper);
}

.faq summary:hover,
.qa summary:hover {
    color: var(--door-juniper);
}

.faq details > div,
.qa .answer {
    padding: 0 40px 20px 0;
    max-width: 64ch;
    color: var(--umber-soft);
}

.faq-group + .faq-group {
    margin-top: 40px;
}

.faq-group h2 {
    margin-bottom: 16px;
}

.notice {
    padding: 18px 22px;
    border-radius: 1px;
    background: var(--trim-white);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--door-juniper);
    box-shadow: 0 10px 24px -14px rgba(43, 38, 34, 0.45);
    color: var(--umber-ink);
}

.notice-warn {
    border-left-color: var(--umber-soft);
}

.notice strong {
    display: block;
    margin-bottom: 4px;
}

/* Front door CTA */
.cta-band,
.home-cta,
.front-door {
    background: var(--door-juniper);
    color: var(--trim-white);
}

.cta-band {
    border-radius: 1px;
    padding: clamp(36px, 5vw, 68px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    box-shadow:
        inset 0 2px 0 rgba(0, 0, 0, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 14px var(--door-deep),
        inset 0 0 0 15px rgba(0, 0, 0, 0.3),
        inset 0 0 0 16px rgba(255, 255, 255, 0.06);
    background: var(--door-deep);
}

.cta-band h2,
.home-cta h2,
.front-door h2 {
    margin-bottom: 8px;
}

.cta-band p,
.home-cta p,
.front-door .intro {
    color: var(--on-door);
    max-width: 56ch;
    line-height: 1.7;
}

.cta-band .btn-primary,
.cta-band .btn-lit,
.front-door .btn-lit,
.front-door .btn-primary,
.home-cta .btn-primary {
    background: var(--trim-white);
    border-color: var(--trim-white);
    color: var(--door-juniper);
}

.cta-band .btn-primary:hover,
.cta-band .btn-lit:hover,
.front-door .btn-lit:hover,
.front-door .btn-primary:hover,
.home-cta .btn-primary:hover {
    background: var(--trim-shade);
    color: var(--door-deep);
}

.cta-band a:not(.btn),
.front-door a:not(.btn),
.home-cta a:not(.btn) {
    color: var(--trim-white);
}

.cta-band :focus-visible,
.front-door :focus-visible,
.home-cta :focus-visible {
    outline-color: var(--trim-white);
}

.door-panel {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px clamp(32px, 6vw, 88px);
    align-items: center;
    padding: clamp(36px, 5vw, 68px);
    border-radius: 1px;
    background: var(--door-deep);
    box-shadow:
        inset 0 2px 0 rgba(0, 0, 0, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 14px var(--door-deep),
        inset 0 0 0 15px rgba(0, 0, 0, 0.3),
        inset 0 0 0 16px rgba(255, 255, 255, 0.06);
}

.listing-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.listing {
    background: var(--trim-white);
    border: 1px solid var(--rule);
    border-radius: 1px;
    overflow: hidden;
}

.listing .image-placeholder {
    border-radius: 0;
    aspect-ratio: 16 / 10;
}

.listing-body {
    padding: 20px;
}

.listing-price {
    display: inline-block;
    margin-bottom: 4px;
}

.listing-price .figure {
    font-size: var(--type-numeral);
}

.listing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-block: 6px 14px;
    font-size: var(--type-label);
    color: var(--umber-soft);
}

.form {
    display: grid;
    gap: 16px;
    background: var(--trim-white);
    border: 1px solid var(--rule);
    border-radius: 1px;
    padding: clamp(22px, 4vw, 34px);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field {
    display: grid;
    gap: 6px;
}

.field label,
.field legend {
    font-size: var(--type-ui);
    font-weight: 500;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--umber-soft);
    border-radius: 2px;
    background: var(--trim-white);
    font: inherit;
    font-size: var(--type-body);
    color: var(--umber-ink);
}

.field-check {
    grid-template-columns: 1.15em 1fr;
    gap: 10px 12px;
    align-items: start;
}

.field-check input[type="checkbox"] {
    width: auto;
    margin-top: 0.35em;
    padding: 0;
    border: 0;
    accent-color: var(--door-juniper);
}

.field-check label {
    font-weight: 400;
    font-size: var(--type-label);
    color: var(--umber-soft);
    line-height: 1.5;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid var(--umber-ink);
    outline-offset: 0;
    border-color: var(--umber-ink);
}

.field textarea {
    min-height: 120px;
    resize: vertical;
}

.field .hint {
    font-size: var(--type-label);
    color: var(--umber-soft);
}

.form-status {
    font-size: var(--type-ui);
    padding: 12px 14px;
    border-radius: 1px;
    background: var(--clapboard-sage);
}

.calc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

.calc-result {
    background: var(--enamel-slate);
    color: var(--enamel-letter);
    border-radius: 1px;
    padding: 28px;
    box-shadow:
        inset 0 0 0 1px var(--brass),
        inset 0 0 0 4px var(--enamel-slate),
        inset 0 0 0 5px rgba(217, 181, 116, 0.4);
}

.calc-result dl {
    display: grid;
    gap: 14px;
}

.calc-result dt {
    font-size: var(--type-label);
    color: var(--enamel-letter);
}

.calc-result dd {
    font-size: var(--type-numeral-lg);
    line-height: 1.1;
    color: var(--brass);
    font-variant-numeric: lining-nums tabular-nums;
}

.calc-disclaimer {
    margin-top: 12px;
    font-size: var(--type-label);
    color: var(--umber-soft);
}

.calc-asterisk a {
    color: inherit;
    text-decoration: none;
    margin-left: 2px;
    line-height: 1;
}

.area-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.area-list a,
.area-list span {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 1px;
    border: 1px solid var(--rule);
    background: var(--trim-white);
    color: var(--umber-ink);
    text-decoration: none;
    font-size: var(--type-ui);
}

.area-list a:hover {
    border-color: var(--door-juniper);
    color: var(--door-deep);
}

.site-footer {
    background: var(--eave-shadow);
    color: var(--trim-shade);
    font-size: var(--type-label);
    padding-top: 56px;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
    padding-bottom: 48px;
}

.footer-info {
    padding-right: clamp(8px, 1.5vw, 28px);
    border-right: 1px solid rgba(246, 245, 241, 0.12);
}

.footer-info p {
    max-width: 42ch;
    margin-top: 4px;
    font-size: var(--type-ui);
    line-height: 1.55;
    letter-spacing: 0.01em;
}

/* The brand line, not a sentence of copy: set at subhead size. */
.footer-slogan {
    margin-top: 10px;
    font-size: var(--type-subhead);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 40px);
    row-gap: 32px;
}

.site-footer h2 {
    font-size: var(--type-ui);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--trim-white);
    margin-bottom: 16px;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 10px;
}

.site-footer a {
    color: var(--trim-white);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.site-footer .brand {
    color: var(--trim-white);
    margin-bottom: 16px;
}

.site-footer .brand-name small {
    color: var(--trim-shade);
}

.footer-contact {
    margin-top: 22px;
    display: grid;
    gap: 6px;
    font-size: var(--type-label);
    line-height: 1.45;
    letter-spacing: 0.01em;
}

.footer-bottom {
    border-top: 1px solid rgba(246, 245, 241, 0.12);
    padding-block: 22px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: var(--type-label);
}

.footer-bottom nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.eho {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.error-page main {
    min-height: 60vh;
    display: grid;
    place-items: center;
    text-align: center;
}

.error-code {
    font-size: clamp(5rem, 14vw, 9rem);
    line-height: 1;
    color: var(--clapboard-sage);
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 40px; }
.mt-4 { margin-top: 56px; }
.center { text-align: center; }
.muted { color: var(--umber-soft); }

.center .btn-row {
    justify-content: center;
}

.services,
.band.faq,
.section-ruled {
    border-top: 1px solid var(--rule);
}

.section:has(> .container > .cta-band) {
    background: var(--door-juniper);
}

.hero-actions {
    margin-top: 26px;
}

/* Homepage bands */
.terms-grid,
.why-grid,
.services-grid,
.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.why-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
}

.services-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    margin-top: 36px;
}

.terms-note {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    max-width: 60ch;
    font-size: var(--type-ui);
    color: var(--umber-soft);
}

.why-next {
    margin-top: 22px;
}

.points,
.service-list,
.faq-links,
.terms-list {
    list-style: none;
    padding: 0;
}

.points {
    margin-top: 28px;
}

.points li {
    padding-block: 20px;
    border-top: 1px solid var(--rule);
}

.points p,
.service p {
    margin-top: 4px;
    max-width: 60ch;
    color: var(--umber-soft);
}

.points a {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--type-ui);
}

.manager-slot {
    display: block;
    width: fit-content;
    margin-top: 8px;
    padding: 3px 10px;
    border: 1px dashed var(--umber-soft);
    font-size: var(--type-label);
    color: var(--umber-soft);
}

.service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 36px;
}

.service {
    padding-block: 18px 22px;
    border-top: 1px solid var(--rule);
}

.service h3 {
    font-size: var(--type-subhead);
}

.service h3 a {
    color: var(--umber-ink);
    text-decoration: none;
}

.service h3 a:hover {
    color: var(--door-juniper);
    text-decoration: underline;
}

.covered {
    display: block;
    margin-top: 8px;
    font-size: var(--type-label);
    color: var(--umber-soft);
}

.services-photo img {
    aspect-ratio: 4 / 3;
}

.porch-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin-top: 32px;
    list-style: none;
    padding: 0;
}

.porch-steps .plaque {
    display: inline-flex;
    align-items: center;
    width: 3.5rem;
    margin-bottom: 16px;
    padding: 10px 0 11px;
}

.porch-steps .figure {
    font-size: var(--type-numeral-lg);
}

.porch-steps p {
    margin-top: 6px;
}

.terms-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 36px;
}

/* Every commitment gets the same plaque, whatever its figure, so the four
   read as a set rather than boxes sized to their contents. */
.terms-list .plaque {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 11rem;
    padding: 12px 16px 13px;
}

.terms-list .figure {
    font-size: var(--type-numeral-lg);
    white-space: nowrap;
}

.terms-list p {
    margin-top: 12px;
    max-width: 32ch;
    text-wrap: pretty;
}

.faq-links {
    display: grid;
    gap: 6px;
    margin-top: 18px;
}

.areas h3 {
    font-size: var(--type-subhead);
}

.areas p {
    margin-top: 4px;
    color: var(--on-door);
}

.areas ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 14px;
    list-style: none;
    font-size: var(--type-lead);
    padding: 0;
}

@media (max-width: 1200px) {
    .main-nav > ul {
        gap: 6px 16px;
    }
}

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .footer-info {
        padding-right: 0;
        border-right: none;
        padding-bottom: 32px;
        border-bottom: 1px solid rgba(246, 245, 241, 0.12);
    }

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

@media (max-width: 960px) {
    .about-hero-action {
        display: flex;
    }

    /* One-line utility bar at tablet width too: drop the "Serving..." span. */
    .utility-bar .container > span {
        display: none;
    }

    .nav-toggle {
        display: inline-block;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        background: var(--trim-white);
        border-bottom: 1px solid var(--rule);
        padding: 12px var(--gutter) 24px;
    }

    .site-header.nav-open .main-nav {
        display: block;
    }

    .main-nav > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .main-nav > ul > li > a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-block: 10px;
    }

    .main-nav > ul > li:has(> .submenu) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: center;
        column-gap: 8px;
    }

    .sub-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--umber-soft);
        border-radius: 3px;
        background: none;
        font: inherit;
        cursor: pointer;
    }

    .sub-toggle::before,
    .sub-toggle::after {
        content: "";
        position: absolute;
        background: var(--door-juniper);
    }

    .sub-toggle::before {
        width: 10px;
        height: 1.5px;
    }

    .sub-toggle::after {
        width: 1.5px;
        height: 10px;
    }

    .main-nav li.is-open > .sub-toggle::after {
        display: none;
    }

    .submenu {
        display: none;
        position: static;
        grid-column: 1 / -1;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        padding: 0 0 8px 4px;
    }

    .main-nav li.is-open > .submenu {
        display: block;
    }

    .submenu li + li {
        border-top: 0;
    }

    .main-nav .nav-cta {
        order: -1;
        margin: 0 0 8px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--rule);
    }

    .main-nav > ul > li.nav-cta > a {
        display: inline-flex;
        width: auto;
        min-height: 0;
        padding: 9px 18px;
    }

    .submenu a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .porch-hero {
        aspect-ratio: auto;
        max-height: none;
        min-height: 0;
        overflow: visible;
        background: var(--trim-white);
    }

    .hero-inner {
        position: static;
        height: auto;
    }

    .porch-hero .hero-photo {
        position: relative;
        aspect-ratio: 4 / 3;
        object-position: 52% 50%;
    }

    .hero-caption {
        top: 12px;
        bottom: auto;
        right: 12px;
    }

    .porch-hero .hero-panel {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: auto;
        margin: -40px var(--gutter) 0;
        box-shadow: inset 0 0 0 9px var(--trim-white), inset 0 0 0 10px var(--rule);
    }

    .plaque-wall {
        position: static;
        width: auto;
        margin-top: 28px;
        padding: 24px var(--gutter) 28px;
        background: var(--umber-ink) url("/assets/porch-e207e146.webp") 22% 40% / 280% auto no-repeat;
    }

    .plaque-grid {
        max-width: 480px;
    }

    .terms-grid,
    .why-grid,
    .services-grid,
    .faq-grid,
    .door-panel,
    .split,
    .calc,
    .service-block,
    .door-hero.has-aside .door-hero-inner,
    .porch-wall-inner,
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .grid-3,
    .grid-4,
    .stats,
    .steps,
    .porch-steps {
        grid-template-columns: 1fr 1fr;
    }

    /* Two sticky bars eat a phone screen: the tab row scrolls with the page,
       and sideways when the tabs outrun the width. */
    .section-tabs {
        position: static;
    }

    html:has(.section-tabs) {
        scroll-padding-top: 96px;
    }

    .section-tabs .container {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - 28px), transparent);
    }

    .section-tabs .container::-webkit-scrollbar {
        display: none;
    }

    .section-tabs ul {
        width: max-content;
        padding-inline-end: 28px;
    }

    .roofline {
        width: 240px;
    }

    .porch-board {
        display: block;
        min-height: 0;
    }

    .porch-aside {
        justify-items: stretch;
        justify-self: stretch;
        width: auto;
    }
}

@media (max-width: 600px) {
    .site-footer .footer-secondary,
    .site-footer .footer-secondary-group {
        display: none;
    }

    body {
        font-size: 1rem;
    }

    /* Utility bar: one row, every link visible, no side-scroll. Dual
       labels (see .u-wide/.u-narrow) swap to short text so it all fits.
       Links keep a tall tap target. */
    .utility-bar .container {
        padding-block: 0;
        gap: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .utility-bar nav {
        flex-wrap: nowrap;
        gap: 4px;
        width: 100%;
    }

    .utility-bar a {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 13px 10px;
        white-space: nowrap;
    }

    .utility-bar .u-wide {
        display: none;
    }

    .utility-bar .u-narrow {
        display: inline;
    }

    .porch-hero .hero-panel {
        margin-inline: 12px;
        padding: 26px 22px;
    }

    h1 {
        font-size: 2.125rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .stats,
    .steps,
    .form-row,
    .service-block .checklist,
    .terms-list,
    .service-list,
    .porch-steps {
        grid-template-columns: 1fr;
    }

    /* Terms and steps: plaque in a fixed-width left column, text beside
       it, instead of a full-width plaque stacked above the text. */
    .board {
        padding-inline: 22px;
    }

    .terms-list li {
        display: grid;
        grid-template-columns: 6.25rem 1fr;
        align-items: start;
        gap: 0 14px;
    }

    /* Tall enough for a figure with its unit underneath, so single-line
       figures ("24/7", "$0") get the same plaque as "60–90 days". */
    .terms-list .plaque {
        width: 100%;
        min-height: 4.25rem;
        padding: 10px 8px 11px;
    }

    /* A unit ("days", "repair") drops under its figure so the plaque
       column stays narrow. */
    .terms-list .figure {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: var(--type-numeral);
        line-height: 1.1;
        text-align: center;
    }

    .terms-list p {
        margin-top: 0;
    }

    .porch-steps li {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr);
        grid-template-areas: "plaque h3" "plaque p";
        align-items: start;
        gap: 0 16px;
    }

    .porch-steps li .plaque {
        grid-area: plaque;
    }

    .porch-steps li h3 {
        grid-area: h3;
    }

    .porch-steps li p {
        grid-area: p;
    }

    .porch-steps .plaque {
        margin-bottom: 0;
    }

    /* Footer: brand block full width, link groups in a 2-column grid
       (inherits the 2-column rule from the 1100px breakpoint), links
       given a taller tap target. */
    .footer-grid ul a,
    .footer-contact > *,
    .footer-bottom nav a {
        display: inline-block;
        padding-block: 9px;
    }

    .door-panel {
        padding: 36px 26px;
    }

    /* The roofline would sit under the buttons on a phone. */
    .roofline {
        display: none;
    }

    .porch-wall-inner {
        gap: 20px;
    }

}

/* A media query adds no specificity, so a bare `.btn-lit` (0,1,0) here never beat
   the `.door-hero .btn-lit` (0,2,0) that sets the lamp animation — the porch lamp
   kept firing for every visitor who asked for less motion. `:where()` contributes
   zero specificity, so `:where(...) .btn-lit` still scores (0,1,0) while matching
   the same places; `!important` on the reset would work too, but this keeps the
   cascade honest and reads as the deliberate override it is. */
@media (prefers-reduced-motion: reduce) {
    .btn-lit,
    :where(.cta-band, .front-door, .home-cta, .door-panel, .door-hero, .section-dark) .btn-lit,
    .roll.is-rolling {
        animation: none;
    }

    /* Every transition on the site, rather than a list that drifts out of date:
       the section tabs and the map paths were each missed by the old enumeration. */
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Touch target floor

   WCAG 2.5.5 (AAA) wants 44px. The footer links sat at 39.4px and the area
   card-links at 24px — close enough to look fine and miss often, one-handed.
   Prose links are deliberately excluded: an inline link inside a sentence is
   exempt under 2.5.8, and padding one out would wreck the line box.
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .site-footer nav a,
    .footer-bottom nav a,
    .footer-contact > a,
    .hiring-contact > a,
    .card-link,
    .section-tabs li > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .nav-toggle {
        min-height: 44px;
    }
}

/* ---------------------------------------------------------------------------
   Print

   The utility tables are the most printed thing on this site — a resident
   setting up power and water at a new address wants them on paper or in a PDF.
   Printed as-designed they arrive behind a full-bleed slate hero and a dark
   footer, so this strips the furniture and keeps the table.
   --------------------------------------------------------------------------- */
@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .site-header,
    .utility-bar,
    .section-tabs,
    .site-footer,
    .cta-band,
    .area-map,
    .skip-link,
    .nav-toggle,
    .flash {
        display: none !important;
    }

    .section {
        padding: 12pt 0 !important;
    }

    /* A printed link is useless unless it says where it goes. Tel and mailto
       already read as their own text, so only http(s) gets the treatment. */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }

    table {
        border-collapse: collapse;
        page-break-inside: auto;
    }

    tr,
    .faq details {
        page-break-inside: avoid;
    }

    th,
    td {
        border: 1px solid #999 !important;
        padding: 4pt 6pt !important;
    }

    /* Collapsed answers print as nothing at all otherwise. */
    .faq details > div {
        display: block !important;
    }
}