/* Clean-Cut Docs - site v2
 From: CleanCut_Docs_Brand_Guide.md (Website section) + Full Business Plan v3
 White nav bar | centered hero | gold rules | navy CTAs | gray footer
*/

@font-face {
  font-family: "Oranienbaum";
  src: url("fonts/Oranienbaum-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
 --navy: #1B2A4A;
 --gold: #C9A84C;
 --gold-muted: #9E8540;
 --cream: #F8F6F1;
 --charcoal: #2D2D2D;
 --gray: #666666;
 --light-gray: #999999;
 --line-gray: #CCCCCC;
 --section-line: #D0CCC5;
 --white: #FFFFFF;
 --alt: #F5F5F5;
 --font-heading: "Instrument Serif", "Times New Roman", Times, serif;
 --font-body: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
 --wrap: 68rem;
 --wrap-narrow: 42rem;
 --nav-h: 4.25rem;
 --shadow-soft: 0 12px 40px rgba(27, 42, 74, 0.06);
}

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

html { scroll-behavior: smooth; }

html, body {
 color-scheme: light;
 forced-color-adjust: none;
}
body {
 margin: 0;
 font-family: var(--font-body);
 font-size: 1rem;
 line-height: 1.65;
 color: var(--charcoal);
 background: var(--white);
 -webkit-font-smoothing: antialiased;
}

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

a {
 color: var(--navy);
 text-decoration-thickness: 1px;
 text-underline-offset: 0.18em;
}
a:hover { color: var(--gold-muted); }

.skip-link {
 position: absolute;
 left: -9999px;
 z-index: 200;
 background: var(--navy);
 color: #fff;
 padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.wrap {
 width: min(100% - 2.5rem, var(--wrap));
 margin-inline: auto;
}
.wrap-narrow {
 width: min(100% - 2.5rem, var(--wrap-narrow));
 margin-inline: auto;
}

/* ========== TOP NAV (brand guide: white bar, navy Lora, gold underline) ========== */
.site-nav-bar {
 position: sticky;
 top: 0;
 z-index: 100;
 background: color-mix(in srgb, var(--white) 97%, transparent);
 border-bottom: 1px solid var(--line-gray);
 backdrop-filter: blur(10px);
}

.nav-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 min-height: var(--nav-h);
}

.nav-logo {
 font-family: var(--font-heading);
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--navy);
 text-decoration: none;
 letter-spacing: 0.03em;
 white-space: nowrap;
}
.nav-logo:hover { color: var(--navy); opacity: 0.85; }
.nav-logo span {
 display: block;
 font-family: var(--font-body);
 font-size: 0.65rem;
 font-weight: 500;
 letter-spacing: 0.04em;
 color: var(--gray);
 text-transform: uppercase;
 margin-top: 0.1rem;
}

.nav-links {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: flex-end;
 gap: 0.15rem 0.15rem;
 list-style: none;
 margin: 0;
 padding: 0;
}

.nav-links a {
 display: inline-block;
 padding: 0.45rem 0.7rem;
 font-family: var(--font-body);
 font-size: 0.82rem;
 font-weight: 600;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--navy);
 text-decoration: none;
 border-bottom: 2px solid transparent;
 transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover,
.nav-links a.is-active {
 color: var(--navy);
 border-bottom-color: var(--gold);
}

.nav-links a.nav-cta {
 margin-left: 0.35rem;
 padding: 0.45rem 0.95rem;
 border: 1.5px solid var(--navy);
 border-bottom-width: 1.5px;
 font-family: var(--font-body);
 font-size: 0.8rem;
 font-weight: 600;
}
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta.is-active {
 background: var(--navy);
 color: #fff;
 border-color: var(--navy);
}

.nav-toggle {
 display: none;
 border: 1.5px solid var(--navy);
 background: transparent;
 color: var(--navy);
 font-family: var(--font-body);
 font-size: 0.8rem;
 font-weight: 600;
 padding: 0.4rem 0.75rem;
 cursor: pointer;
}

@media (max-width: 900px) {
 .nav-toggle { display: inline-block; }
 .nav-links {
 display: none;
 position: absolute;
 left: 0;
 right: 0;
 top: 100%;
 flex-direction: column;
 align-items: stretch;
 background: var(--white);
 border-bottom: 1px solid var(--line-gray);
 padding: 0.5rem 1.25rem 1rem;
 box-shadow: var(--shadow-soft);
 }
 .nav-links.is-open { display: flex; }
 .nav-links a { padding: 0.75rem 0.25rem; }
 .nav-links a.nav-cta { margin: 0.5rem 0 0; text-align: center; }
}

/* ========== HERO - centered (plan + brand card energy) ========== */
.hero {
 text-align: center;
 padding: 4.5rem 0 3.75rem;
 background:
 linear-gradient(180deg, var(--cream) 0%, var(--white) 72%);
 border-bottom: 1px solid var(--section-line);
}

.hero-kicker {
 margin: 0 0 1rem;
 font-family: var(--font-body);
 font-size: 0.78rem;
 font-weight: 600;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--gray);
}

.hero h1 {
 margin: 0 auto 1rem;
 max-width: 20ch;
 font-family: var(--font-heading);
 font-size: clamp(2.15rem, 5vw, 3.2rem);
 font-weight: 400;
 line-height: 1.08;
 letter-spacing: 0.02em;
 color: var(--navy);
}

.hero-rule {
 width: 5.5rem;
 height: 0;
 margin: 0 auto 1.15rem;
 border: 0;
 border-top: 1.5px solid var(--gold);
}

.hero-sub {
 margin: 0 auto 0.5rem;
 max-width: 36rem;
 font-family: var(--font-heading);
 font-size: clamp(1.05rem, 2.2vw, 1.25rem);
 font-style: italic;
 color: var(--gold-muted);
}

.hero-lead {
 margin: 0 auto 1.75rem;
 max-width: 34rem;
 font-size: 1.05rem;
 color: var(--gray);
}

.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 justify-content: center;
}

/* ========== BUTTONS ========== */
.btn {
 display: inline-block;
 padding: 0.75rem 1.35rem;
 font-family: var(--font-body);
 font-size: 0.88rem;
 font-weight: 600;
 text-decoration: none;
 border: 1.5px solid var(--navy);
 color: var(--navy);
 background: var(--white);
 cursor: pointer;
 transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover {
 background: var(--navy);
 color: #fff;
 border-color: var(--navy);
}
.btn-gold {
 border-color: var(--gold);
 color: var(--navy);
}
.btn-gold:hover {
 background: var(--navy);
 border-color: var(--navy);
 color: #fff;
}
.btn-solid {
 background: var(--navy);
 color: #fff;
}
.btn-solid:hover {
 background: transparent;
 color: var(--navy);
}

/* ========== SECTIONS ========== */
.section {
 padding: 4rem 0;
}
.section-alt {
 background: var(--alt);
 border-top: 1px solid var(--section-line);
 border-bottom: 1px solid var(--section-line);
}
.section-head {
 text-align: center;
 margin-bottom: 2.5rem;
}
.section-head h2 {
 margin: 0 0 0.75rem;
 font-family: var(--font-heading);
 font-size: clamp(1.5rem, 3vw, 1.85rem);
 color: var(--navy);
}
.section-head .rule {
 width: 4rem;
 margin: 0 auto 1rem;
 border: 0;
 border-top: 1.5px solid var(--gold);
}
.section-head p {
 margin: 0 auto;
 max-width: 36rem;
 color: var(--gray);
}

h1, h2, h3, h4 {
 font-family: var(--font-heading);
 color: var(--navy);
 font-weight: 700;
 line-height: 1.25;
}
h1 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); margin: 0 0 1rem; }
h2 { font-size: 1.45rem; margin: 0 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 0 0 0.45rem; }

p { margin: 0 0 1rem; }
.muted { color: var(--gray); }
.center { text-align: center; }

/* Feature grid */
.feature-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
}
@media (max-width: 800px) {
 .feature-grid { grid-template-columns: 1fr; }
}

.feature-card {
 background: var(--white);
 border: 1px solid var(--line-gray);
 padding: 1.5rem 1.35rem 1.4rem;
 box-shadow: var(--shadow-soft);
}
.feature-card .dot {
 display: block;
 width: 0.45rem;
 height: 0.45rem;
 margin-bottom: 0.85rem;
 border-radius: 50%;
 background: var(--gold);
}
.feature-card p {
 margin: 0;
 font-size: 0.92rem;
 color: var(--gray);
}

/* Service cards */
.service-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.25rem;
}
@media (max-width: 720px) {
 .service-grid { grid-template-columns: 1fr; }
}

.service-card {
 background: var(--white);
 border: 1px solid var(--line-gray);
 padding: 1.5rem;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.service-card:hover {
 border-color: var(--gold);
 box-shadow: var(--shadow-soft);
}
.service-card .price {
 font-family: var(--font-heading);
 font-size: 1.05rem;
 color: var(--navy);
 font-weight: 700;
}
.service-card .meta {
 font-size: 0.8rem;
 color: var(--light-gray);
 text-transform: uppercase;
 letter-spacing: 0.06em;
}
.service-card p {
 margin: 0;
 flex: 1;
 font-size: 0.92rem;
 color: var(--gray);
}

/* Pricing tables */
.table-wrap {
 overflow-x: auto;
 margin: 0 0 2rem;
 border: 1px solid var(--line-gray);
 background: var(--white);
}
table.pricing {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.92rem;
}
table.pricing th,
table.pricing td {
 padding: 0.85rem 1rem;
 text-align: left;
 border-bottom: 1px solid var(--line-gray);
 vertical-align: top;
}
table.pricing th {
 font-family: var(--font-body);
 font-weight: 700;
 color: var(--navy);
 background: var(--white);
 border-bottom: 1.5px solid var(--navy);
}
table.pricing tr:nth-child(even) td { background: var(--alt); }
table.pricing tr:last-child td { border-bottom: 0; }
table.pricing .tier {
 font-weight: 700;
 color: var(--navy);
}
table.pricing .price-cell {
 font-family: var(--font-heading);
 font-weight: 700;
 color: var(--navy);
 white-space: nowrap;
}

/* Free banner */
.free-banner {
 text-align: center;
 padding: 3rem 1.5rem;
 background: var(--cream);
 border: 1px solid var(--section-line);
}
.free-banner h2 {
 margin-bottom: 0.5rem;
}
.free-banner .rule {
 width: 4rem;
 margin: 0.85rem auto 1rem;
 border: 0;
 border-top: 1.5px solid var(--gold);
}
.free-banner p {
 max-width: 32rem;
 margin: 0 auto 1.35rem;
 color: var(--gray);
}

/* Quote / pitch */
.pitch {
 text-align: center;
 padding: 3rem 1rem;
}
.pitch blockquote {
 margin: 0 auto 0.75rem;
 max-width: 28rem;
 font-family: var(--font-heading);
 font-size: clamp(1.2rem, 2.5vw, 1.5rem);
 font-style: italic;
 color: var(--navy);
 line-height: 1.4;
}
.pitch cite {
 font-style: normal;
 font-size: 0.85rem;
 color: var(--light-gray);
}

/* Page header (inner pages) */
.page-hero {
 text-align: center;
 padding: 3.25rem 0 2.5rem;
 background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
 border-bottom: 1px solid var(--section-line);
}
.page-hero h1 {
 margin: 0 auto 0.75rem;
}
.page-hero .rule {
 width: 4rem;
 margin: 0 auto 1rem;
 border: 0;
 border-top: 1.5px solid var(--gold);
}
.page-hero p {
 margin: 0 auto;
 max-width: 36rem;
 color: var(--gray);
}

.page-body {
 padding: 3rem 0 4rem;
}

/* Contact */
.contact-grid {
 display: grid;
 grid-template-columns: 0.9fr 1.2fr;
 gap: 2.5rem;
 align-items: start;
}
@media (max-width: 800px) {
 .contact-grid { grid-template-columns: 1fr; }
}

.contact-card {
 background: var(--white);
 border: 1px solid var(--line-gray);
 padding: 1.75rem;
 box-shadow: var(--shadow-soft);
}
.contact-card h2 { margin-top: 0; }
.contact-card p { margin-bottom: 0.55rem; }

.form-group { margin-bottom: 1.15rem; }
.form-group label {
 display: block;
 margin-bottom: 0.35rem;
 font-size: 0.85rem;
 font-weight: 700;
 color: var(--charcoal);
}
.form-group input,
.form-group select,
.form-group textarea {
 width: 100%;
 padding: 0.7rem 0.85rem;
 font-family: var(--font-body);
 font-size: 1rem;
 color: var(--charcoal);
 background: var(--alt);
 border: 1px solid var(--line-gray);
 border-radius: 0;
 outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
 border-color: var(--gold);
 background: var(--white);
}
.form-group textarea { min-height: 9rem; resize: vertical; }

.alert {
 padding: 0.95rem 1.1rem;
 margin-bottom: 1.25rem;
 border-left: 2px solid var(--gold);
 background: var(--alt);
 font-size: 0.92rem;
}
.alert-error { border-left-color: #8B3A3A; }
.form-note {
 margin-top: 0.85rem;
 font-size: 0.78rem;
 font-style: italic;
 color: var(--light-gray);
}

/* Steps */
.steps {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.25rem;
 counter-reset: step;
}
@media (max-width: 720px) {
 .steps { grid-template-columns: 1fr; }
}
.step {
 border-top: 1.5px solid var(--gold);
 padding-top: 1rem;
}
.step::before {
 counter-increment: step;
 content: "0" counter(step);
 display: block;
 margin-bottom: 0.5rem;
 font-family: var(--font-heading);
 font-size: 0.85rem;
 color: var(--gold-muted);
 letter-spacing: 0.08em;
}
.step p { margin: 0; font-size: 0.92rem; color: var(--gray); }

/* Footer - brand guide: #F5F5F5, thin rule top */
.site-footer {
 background: #F5F5F5;
 color: var(--charcoal);
 color-scheme: light;
 forced-color-adjust: none;
 border-top: 1px solid var(--line-gray);
 padding: 2.75rem 0 2rem;
 margin-top: 0;
}
.footer-grid {
 display: grid;
 grid-template-columns: 1.4fr 1fr 1fr;
 gap: 2rem;
 margin-bottom: 2rem;
}
@media (max-width: 720px) {
 .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
.footer-brand-name {
 margin: 0 0 0.35rem;
 font-family: var(--font-heading);
 font-size: 1.2rem;
 font-weight: 400;
 letter-spacing: 0.02em;
 color: var(--navy);
}

/* Kit CCD Builder (Monterey) — hide the photo column, brand the fields */
.kit-slot,
.kit-slot .formkit-form,
.kit-slot .formkit-input,
.kit-slot .formkit-submit {
 color-scheme: light;
}
.kit-slot .formkit-form {
 max-width: 100% !important;
 width: 100% !important;
 margin: 0 !important;
 background: transparent !important;
 overflow: visible !important;
 border-radius: 0 !important;
}
.kit-slot .formkit-form [data-style="image"] {
 display: block !important;
}
.kit-slot .formkit-form .formkit-column:first-of-type,
.kit-slot .formkit-form .formkit-background {
 display: none !important;
 height: auto !important;
 max-height: none !important;
 padding: 0 !important;
}
.kit-slot .formkit-form .formkit-column {
 padding: 0 !important;
 background: transparent !important;
}
.kit-slot .formkit-form .formkit-field {
 margin: 0 0 0.65rem 0 !important;
}
.kit-slot .formkit-form .formkit-input {
 width: 100% !important;
 padding: 0.7rem 0.8rem !important;
 border: 1px solid #CCCCCC !important;
 border-radius: 0 !important;
 background-color: #FFFFFF !important;
 color: #2D2D2D !important;
 font-family: var(--font-body) !important;
 font-size: 0.95rem !important;
}
.kit-slot .formkit-form .formkit-input:focus {
 border-color: #C9A84C !important;
 outline: none !important;
}
.kit-slot .formkit-form .formkit-submit {
 width: 100% !important;
 margin: 0 0 0.35rem !important;
 background-color: #1B2A4A !important;
 color: #FFFFFF !important;
 border: 1px solid #1B2A4A !important;
 border-radius: 0 !important;
 font-family: var(--font-body) !important;
 font-weight: 600 !important;
}
.kit-slot .formkit-form .formkit-submit > span {
 padding: 0.75rem 1rem !important;
 color: #FFFFFF !important;
}
.kit-slot .formkit-form .formkit-submit:hover,
.kit-slot .formkit-form .formkit-submit:focus {
 background-color: #1B2A4A !important;
}
.kit-slot .formkit-form .formkit-submit:hover > span,
.kit-slot .formkit-form .formkit-submit:focus > span {
 background-color: rgba(201, 168, 76, 0.22) !important;
}
.kit-slot .formkit-form .formkit-alert {
 margin: 0 0 0.75rem !important;
 border-radius: 0 !important;
 font-size: 0.9rem !important;
}
.kit-slot .formkit-form .formkit-powered-by-convertkit-container {
 display: none !important;
}
.kit-slot--page .formkit-form {
 max-width: 28rem !important;
}
.footer-brand-name + p {
 margin: 0 0 0.75rem;
 font-family: var(--font-heading);
 font-style: italic;
 font-size: 0.95rem;
 color: var(--gold-muted);
}
.footer-col h4 {
 margin: 0 0 0.75rem;
 font-size: 0.8rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--navy);
}
.footer-col ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
.footer-col li { margin-bottom: 0.4rem; }
.footer-col a {
 color: var(--gray);
 text-decoration: none;
 font-size: 0.9rem;
}
.footer-col a:hover { color: var(--navy); }
.footer-bottom {
 padding-top: 1.25rem;
 border-top: 1px solid var(--line-gray);
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem 1.25rem;
 justify-content: space-between;
 font-size: 0.8rem;
 color: var(--light-gray);
}
.footer-bottom a { color: var(--light-gray); text-decoration: none; }
.footer-bottom a:hover { color: var(--navy); }

/* Lists */
ul.clean {
 margin: 0 0 1.25rem;
 padding: 0;
 list-style: none;
}
ul.clean li {
 position: relative;
 padding-left: 1.15rem;
 margin-bottom: 0.55rem;
}
ul.clean li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.55em;
 width: 0.35rem;
 height: 0.35rem;
 border-radius: 50%;
 background: var(--gold);
}
ul.clean strong { color: var(--navy); }

.cta-row {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 justify-content: center;
 margin-top: 1.5rem;
}

@media print {
 .site-nav-bar, .nav-toggle { display: none !important; }
 .hero, .page-hero { background: #fff; }
}


/* ========== Logo: transparent gray + dark-mode light (no plate/box) ========== */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.nav-mark {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
}
.nav-wordmark {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--navy);
  line-height: 1.1;
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.nav-logo-text span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gray);
  text-transform: uppercase;
  margin-top: 0.15rem;
}

/* Site respects browser dark mode (logo swaps via <picture> - no plate/box) */
@media (prefers-color-scheme: dark) {
  :root {
    --navy: #A8C0E8;
    --gold: #D4B86A;
    --gold-muted: #C9A84C;
    --cream: #161616;
    --charcoal: #E8E6E1;
    --gray: #B0B0B0;
    --light-gray: #8A8A8A;
    --line-gray: #3A3A3A;
    --section-line: #3A3A3A;
    --white: #121212;
    --alt: #1C1C1C;
    --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.35);
  }
  body {
    background: var(--white);
    color: var(--charcoal);
  }
  .site-nav-bar {
    border-bottom-color: var(--line-gray);
  }
  .nav-links a.nav-cta:hover,
  .nav-links a.nav-cta.is-active {
    color: #121212;
  }
  .btn:hover,
  .btn-solid {
    color: #121212;
  }
  .btn-solid:hover {
    color: var(--navy);
  }
  .site-footer {
    background: #0d0d0d;
    color: var(--gray);
  }
  .nav-logo-img {
    background: transparent;
  }
}