/* Kitchen Remodeling New Bern. Navy, brass and Caslon. Square corners, hairline rules, no shadows. */
:root {
  --paper: #F6F1E7;
  --paper-2: #ECE4D4;
  --ink: #13243B;
  --ink-2: #45546A;
  --rule: rgba(19, 36, 59, .24);
  --link: #6E5217;
  --navy: #0E2038;
  --navy-2: #16304F;
  --on-navy: #F6F1E7;
  --on-navy-2: #C9CFD8;
  --brass: #C6A15B;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --text: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --ui: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B1828;
    --paper-2: #122439;
    --ink: #EFE8DA;
    --ink-2: #B8C1CD;
    --rule: rgba(239, 232, 218, .24);
    --link: #DDBE7E;
    --navy: #122B47;
    --navy-2: #1B3A5E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0B1828;
  --paper-2: #122439;
  --ink: #EFE8DA;
  --ink-2: #B8C1CD;
  --rule: rgba(239, 232, 218, .24);
  --link: #DDBE7E;
  --navy: #122B47;
  --navy-2: #1B3A5E;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.72 var(--text); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; }
h3 { font: 700 1.25rem/1.3 var(--text); margin: 0 0 .4em; }
.wrap { width: min(1240px, 100% - 3rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: var(--on-navy); padding: .6rem 1rem; z-index: 50; }
.skip:focus { left: .5rem; top: .5rem; }
.draft-bar { margin: 0; background: #7A1F1F; color: #fff; font: 600 .875rem/1.4 var(--ui); padding: .45rem 1rem; text-align: center; }

/* Header */
.site-head { background: var(--paper); border-bottom: 1px solid var(--rule); }
.head-row { display: flex; align-items: center; gap: 1.75rem; min-height: 84px; }
.brand { display: flex; align-items: center; gap: .8rem; color: var(--ink); text-decoration: none; font: 400 1.3rem/1.15 var(--display); margin-right: auto; }
.brand svg { width: 44px; height: 44px; flex: none; }
.mark-bg { fill: #0E2038; } .mark-line { fill: none; stroke: #C6A15B; stroke-width: 1; }
.mark-pull { fill: none; stroke: #C6A15B; stroke-width: 2.2; stroke-linecap: round; } .mark-dot { fill: #C6A15B; }
.brand small { display: block; font: 500 .78rem/1.3 var(--ui); color: var(--ink-2); margin-top: .2rem; }
.nav { display: flex; gap: 1.35rem; font: 500 .95rem/1 var(--ui); }
.nav a { color: var(--ink); text-decoration: none; padding: .5rem 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--brass); }
.head-call { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .4rem 1rem; background: var(--navy); color: var(--on-navy); font: 600 1.02rem/1 var(--ui); text-decoration: none; white-space: nowrap; }
.head-call svg { width: 18px; height: 18px; color: var(--brass); }
.head-call:hover { background: var(--navy-2); }
.menu-btn { display: none; min-height: 48px; padding: 0 1rem; background: none; color: var(--ink); border: 1px solid var(--rule); font: 600 .95rem/1 var(--ui); cursor: pointer; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 56px; padding: .8rem 1.5rem; background: var(--brass); color: #0E2038; font: 600 1.1rem/1.1 var(--ui); text-decoration: none; border: 1px solid var(--brass); transition: background-color .15s ease; }
.btn svg { width: 20px; height: 20px; }
.btn:hover { background: #D6B574; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem; margin: 1.4rem 0 .9rem; }
.cta-note { font: 500 .95rem/1.3 var(--ui); }

/* Page heads */
.eyebrow { font: 600 .82rem/1.3 var(--ui); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .9rem; display: flex; align-items: center; gap: .7rem; }
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--brass); flex: none; }
.answer { font-size: 1.2rem; line-height: 1.62; margin: 1.1rem 0 0; }
.meta-line { font: 500 .9rem/1.3 var(--ui); margin: 0; color: var(--ink-2); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .1rem .5rem; font: 500 .88rem/1.5 var(--ui); margin-bottom: 1.2rem; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--ink-2); }
.hero-home { position: relative; background: var(--navy); }
.hero-home .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-home .wrap { position: relative; display: flex; align-items: flex-end; min-height: min(78vh, 760px); padding-block: 4rem 0; }
.plate { background: var(--navy); color: var(--on-navy); width: min(700px, 100%); padding: 3rem 3rem 2.2rem; outline: 1px solid var(--brass); outline-offset: -12px; }
.plate .eyebrow { color: var(--brass); }
.plate .meta-line { color: var(--on-navy-2); }
.hero-sub { border-bottom: 1px solid var(--rule); }
.hero-sub-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; padding-block: 3.5rem; }
.hero-fig { margin: 0; position: relative; }
.hero-fig::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--brass); z-index: -1; }
.hero-fig { z-index: 0; }
.hero-fig figcaption { position: absolute; left: 0; bottom: 0; background: var(--navy); color: var(--on-navy); font: 500 .8rem/1.3 var(--ui); padding: .35rem .6rem; }
.hero-plain { background: var(--navy); color: var(--on-navy); padding-block: 4rem; }
.hero-plain .eyebrow { color: var(--brass); } .hero-plain .meta-line { color: var(--on-navy-2); }
.hero-plain a:not(.btn) { color: #E5CB94; } .hero-plain .hero-copy { max-width: 820px; }

/* Sections */
.band { padding-block: clamp(3.25rem, 7vw, 5.5rem); border-bottom: 1px solid var(--rule); }
.band.alt { background: var(--paper-2); }
.band.dark { background: var(--navy); color: var(--on-navy); border-bottom: 0; }
.band.dark a:not(.btn) { color: #E5CB94; }
.band.dark .eyebrow { color: var(--brass); }
.band-head { max-width: 760px; margin-bottom: 2.5rem; }
.band-head p:last-child { margin-bottom: 0; }
.band-head h2 + p { margin-top: 1rem; }
.prose { max-width: 720px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split .band-head { margin-bottom: 0; position: sticky; top: 1.5rem; }

/* Proof strip */
.proof { background: var(--navy); color: var(--on-navy); border-top: 1px solid var(--brass); }
.proof ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof li { padding: 1.5rem 1.4rem; border-left: 1px solid rgba(198, 161, 91, .4); }
.proof li:first-child { border-left: 0; padding-left: 0; }
.proof strong { display: block; font: 400 1.5rem/1.2 var(--display); color: var(--brass); margin-bottom: .2rem; }
.proof span { font: 500 .95rem/1.4 var(--ui); }

/* Ledger list: big serif names on hairlines */
.ledger { border-top: 1px solid var(--rule); }
.ledger a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 10.5rem; gap: 1.5rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.ledger strong { font: 400 clamp(1.55rem, 2.6vw, 2.15rem)/1.15 var(--display); }
.ledger span { font-size: 1.02rem; line-height: 1.55; }
.ledger .go { font: 600 .92rem/1 var(--ui); color: var(--link); white-space: nowrap; text-align: right; }
.ledger a:hover strong { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: .14em; text-decoration-thickness: 1px; }
.band.dark .ledger, .band.dark .ledger a { border-color: rgba(198, 161, 91, .4); }
.band.dark .ledger a { color: var(--on-navy); } .band.dark .ledger .go { color: var(--brass); }

/* Numbered steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem; counter-reset: st; }
.steps li { counter-increment: st; border-top: 1px solid var(--brass); padding-top: 1rem; }
.steps li::before { content: "No. " counter(st); display: block; font: italic 400 1.05rem/1 var(--text); margin-bottom: .8rem; color: var(--link); }
.band.dark .steps li::before { color: var(--brass); }
.steps.four { grid-template-columns: repeat(4, 1fr); }
.steps p { margin: 0; font-size: 1.04rem; }

/* Checklists */
.checklist li { position: relative; padding: .8rem 0 .8rem 1.9rem; border-bottom: 1px solid var(--rule); }
.checklist li:first-child { border-top: 1px solid var(--rule); }
.checklist li::before { content: ""; position: absolute; left: .15rem; top: 1.55rem; width: .7rem; height: .7rem; transform: rotate(45deg); border: 1px solid var(--brass); background: var(--brass); }
.note { border-left: 3px solid var(--brass); padding: .2rem 0 .2rem 1.2rem; margin: 1.5rem 0; font-style: italic; }

/* FAQ */
.faq { max-width: 880px; border-top: 1px solid var(--rule); }
.faq-group { font: 600 .82rem/1.3 var(--ui); letter-spacing: .16em; text-transform: uppercase; margin: 2.5rem 0 .8rem; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.2rem; padding: 1.05rem 0; font: 700 1.12rem/1.4 var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 400 1.6rem/1 var(--display); color: var(--link); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0 0 1.1rem; }

/* Tables */
.tbl-wrap { margin: 1.5rem 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
caption { text-align: left; font: 500 .92rem/1.4 var(--ui); margin-bottom: .6rem; }
th { font: 600 .9rem/1.3 var(--ui); text-align: left; border-bottom: 2px solid var(--brass); padding: .6rem .8rem .6rem 0; }
td { border-bottom: 1px solid var(--rule); padding: .7rem .8rem .7rem 0; vertical-align: top; }
.source { font: 500 .92rem/1.5 var(--ui); color: var(--ink-2); }

/* Estimator */
.est { border: 1px solid var(--brass); padding: 2rem; }
.est fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
.est legend { font: 600 1rem/1.3 var(--ui); margin-bottom: .55rem; padding: 0; }
.est label { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-size: 1.05rem; cursor: pointer; }
.est input { width: 1.25rem; height: 1.25rem; accent-color: #8A6A28; flex: none; margin: 0; }
.est .result { border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.est .range { display: block; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1.2 var(--display); }
.est .why { font-size: 1rem; margin: .4rem 0 0; }

/* Images */
.fig { margin: 0; }
.fig figcaption { font: 500 .92rem/1.5 var(--ui); margin-top: .6rem; color: var(--ink-2); }
.pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 900px; }
.media { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* Closing call band */
.close-band { background: var(--navy); color: var(--on-navy); padding-block: clamp(3.25rem, 7vw, 5.5rem); border-top: 1px solid var(--brass); }
.close-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.close-band .eyebrow { color: var(--brass); }
.close-title { font: 400 clamp(1.9rem, 3.4vw, 2.9rem)/1.12 var(--display); margin: 0 0 1rem; text-wrap: balance; }
.phone-big { display: inline-block; font: 400 clamp(2.3rem, 5.6vw, 3.8rem)/1.1 var(--display); color: var(--brass); text-decoration: none; margin: .3rem 0 .7rem; white-space: nowrap; }
.phone-big:hover { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 1px; }
.close-area { font: 500 .98rem/1.5 var(--ui); margin: 0; }
.ready { border: 1px solid rgba(198, 161, 91, .55); padding: 1.6rem 1.7rem; }
.ready-h { font: 700 1.15rem/1.3 var(--text); margin: 0 0 .7rem; }
.ready li { padding: .5rem 0; border-top: 1px solid rgba(198, 161, 91, .3); font-size: 1.02rem; line-height: 1.5; }

/* Footer */
.foot { background: #081524; color: #D5DAE1; font: 500 .96rem/1.6 var(--ui); padding: 3.5rem 0 2rem; }
.foot a { color: #E9EDF2; }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem; }
.foot-h { font: 400 1.25rem/1.25 var(--display); color: #E5CB94; margin: 0 0 .6rem; }
.foot-h a { color: inherit; text-decoration: none; }
.foot-h a:hover { text-decoration: underline; }
.foot li { padding: .22rem 0; }
.foot address { font-style: normal; }
.disclosure { border-top: 1px solid rgba(198, 161, 91, .4); margin: 2.5rem 0 1rem; padding-top: 1.4rem; font-size: .9rem; line-height: 1.6; }
.legal { font-size: .9rem; margin: 0; }

/* Phone call bar */
.mobile-bar { display: none; }

@media (max-width: 1180px) {
  .head-row { flex-wrap: wrap; gap: .75rem 1rem; min-height: 76px; padding-block: .7rem; }
  .menu-btn { display: block; order: 3; }
  .head-call { order: 2; }
  .nav { display: none; order: 4; width: 100%; flex-direction: column; gap: 0; padding-bottom: .5rem; font-size: 1.05rem; }
  .nav.open { display: flex; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 960px) {
  .hero-sub-grid { grid-template-columns: 1fr; gap: 2.2rem; padding-block: 2.5rem; }
  .hero-fig { margin-right: 14px; }
  .split, .media, .close-grid { grid-template-columns: 1fr; }
  .split .band-head { position: static; }
  .steps, .steps.four { grid-template-columns: repeat(2, 1fr); }
  .proof ul { grid-template-columns: repeat(2, 1fr); }
  .proof li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(198, 161, 91, .4); }
  .proof li:nth-child(-n+2) { border-top: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-id { grid-column: 1 / -1; }
  .ledger a { grid-template-columns: 1fr; gap: .35rem; }
  .ledger .go { text-align: left; }
}
@media (max-width: 640px) {
  body { font-size: 1.1rem; padding-bottom: 76px; }
  .wrap { width: calc(100% - 2rem); }
  .brand { font-size: 1.12rem; flex: 1 1 0; min-width: 0; }
  .brand small { display: none; }
  .plate .eyebrow::before { display: none; }
  .plate .eyebrow { font-size: .78rem; letter-spacing: .12em; }
  .brand svg { width: 38px; height: 38px; }
  .head-call { display: none; }
  .hero-home { background: var(--navy); }
  .hero-home .hero-img { position: static; height: 190px; }
  .hero-home .wrap { display: block; min-height: 0; padding: 0; width: 100%; }
  .plate { width: 100%; padding: 2rem 1.5rem 1.8rem; outline-offset: -8px; }
  .btn { width: 100%; }
  .cta-row { margin-top: 1.2rem; }
  .steps, .steps.four, .pair { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .est { padding: 1.3rem; }
  .ready { padding: 1.2rem; }
  .mobile-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--navy); padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--brass); }
  /* Stack tables as labelled rows */
  .tbl-wrap thead { position: absolute; left: -999px; }
  .tbl-wrap tr { display: block; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
  .tbl-wrap td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0; text-align: right; }
  .tbl-wrap td::before { content: attr(data-label); font: 600 .9rem/1.5 var(--ui); text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* Phone line at the end of each major section */
.sec-call { grid-column: 1 / -1; margin: 2rem 0 0; }
.sec-call a { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; font: 600 1.05rem/1 var(--ui); color: var(--link); text-decoration: none; border-bottom: 1px solid var(--brass); }
.sec-call a:hover { border-bottom-width: 2px; }
.sec-call svg { width: 18px; height: 18px; }
.band.dark .sec-call a { color: var(--brass); }