:root {
  --evergreen: #0a3028;
  --evergreen-deep: #06271f;
  --gold: #c6a064;
  --gold-light: #dfbd80;
  --ivory: #f7f3ed;
  --paper: #fcfaf6;
  --paper-alt: #f2f0e9;
  --ink: #1a2521;
  --muted: #596761;
  --border: #dcdcd4;
  --serif: 'Playfair Display', Georgia, serif;
  --ampersand-serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --section-space: clamp(3.5rem, 5.8vw, 5.2rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { text-decoration: none; }
img, svg { max-width: 100%; }
.container { max-width: 1240px; padding-inline: clamp(1.25rem, 3.4vw, 2.25rem); }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.skip-link { position: fixed; top: -70px; left: 1rem; z-index: 100; padding: .75rem 1rem; background: white; color: var(--ink); }
.skip-link:focus { top: 1rem; }
.section-space { padding-block: var(--section-space); }
.short-rule { display: block; width: 45px; height: 3px; background: var(--gold); }
.eyebrow { display: flex; align-items: center; gap: .8rem; font-size: .75rem; font-family: var(--sans); font-weight: 700; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: #53685f; margin: 0 0 2rem; }
.eyebrow > span { flex: none; display: inline-block; width: 30px; height: 2px; background: var(--gold); }

/* BUTTONS - no transforms or gradient changes on hover, to avoid flicker */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; border-radius: 2px; border-width: 1px; font-size: .73rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; min-height: 49px; line-height: 1.3; padding: .85rem 1.25rem; white-space: nowrap; box-shadow: none; transform: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
/* Map our gold CTA colors into Bootstrap's own button-state variables.
   Bootstrap's .btn:first-child:active selector otherwise overrides the pressed state. */
.btn-gold {
  --bs-btn-color: #102d25;
  --bs-btn-bg: #c7a166;
  --bs-btn-border-color: #c7a166;
  --bs-btn-hover-color: #0e2b23;
  --bs-btn-hover-bg: #dfbd80;
  --bs-btn-hover-border-color: #dfbd80;
  --bs-btn-focus-shadow-rgb: 198,160,100;
  --bs-btn-active-color: #102d25;
  --bs-btn-active-bg: #c19a5d;
  --bs-btn-active-border-color: #c19a5d;
  --bs-btn-disabled-color: #102d25;
  --bs-btn-disabled-bg: #c7a166;
  --bs-btn-disabled-border-color: #c7a166;
  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
}
.btn-gold:hover,
.btn-gold:focus-visible {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
  box-shadow: none;
}
.btn-gold:active,
.btn-gold:first-child:active {
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  color: var(--bs-btn-active-color);
  box-shadow: none;
}
.btn-outline-gold { background: rgba(2,25,20,.22); color: #fefcf7; border-color: #d0ab70; }
.btn-outline-gold:hover, .btn-outline-gold:focus-visible, .btn-outline-gold:active { background: rgba(255,255,255,.12); border-color: #efcd93; color: #fff; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* NAVIGATION */
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; }
.navbar { padding-block: 1rem; }
.nav-inner { position: relative; }
.navbar-brand { margin: 0; padding: 0; }
.brand-logo { display: block; width: clamp(140px, 13vw, 177px); height: auto; }
.navbar-nav { gap: clamp(.65rem, 1.8vw, 1.6rem); }
.navbar-dark .navbar-nav .nav-link { color: rgba(250,247,239,.93); font-size: .87rem; font-weight: 500; padding: .6rem; }
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus-visible { color: var(--gold-light); }
.nav-action { margin-left: .55rem; }
.nav-action .btn { min-height: 44px; padding-inline: 1.2rem; }
.desktop-navigation { display: none; }
@media (min-width: 992px) {
  .desktop-navigation { display: flex; align-items: center; }
}

/* HERO */
.hero-section { position: relative; min-height: clamp(680px, 76vh, 820px); background-color: var(--evergreen-deep); background-image: linear-gradient(90deg, rgba(4,33,26,.72) 0%, rgba(4,33,26,.57) 28%, rgba(4,33,26,.19) 53%, rgba(4,33,26,0) 75%), url('../assets/devout-design-hero-bg.webp'); background-size: cover; background-position: center center; color: #f9f7f1; isolation: isolate; }
.hero-inner { min-height: inherit; display: flex; align-items: center; }
.hero-copy { position: relative; z-index: 1; max-width: min(51%, 610px); padding-block: 11rem 5rem; }
/* Every headline phrase occupies exactly one intentional line. */
.hero-copy h1 { margin: 0; font: 500 clamp(2.25rem, 3.1vw, 3.35rem)/1.17 var(--serif); letter-spacing: -.012em; font-kerning: normal; }
.hero-headline-line { display: inline-block; white-space: nowrap; }
.hero-copy h1 .hero-headline-accent { color: var(--gold-light); }
.hero-copy .short-rule { margin-block: 1.65rem 1.3rem; }
.hero-copy p { max-width: 31rem; font-size: 1rem; line-height: 1.65; color: rgba(249,247,241,.94); margin: 0 0 1.6rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* SERVICES */
.services-section { background: var(--paper); }
.services-grid { --bs-gutter-x: 0; --bs-gutter-y: 2rem; }
.service-column { position: relative; }
/* Icons sit beside their titles; descriptions align with the title text. */
.service-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 1rem; align-items: start; height: 100%; padding: 0 clamp(1.25rem, 2.7vw, 2.5rem); }
.service-column:first-child .service-card { padding-left: 0; }
.service-column:last-child .service-card { padding-right: 0; }
.service-column + .service-column::before { position: absolute; content: ''; left: 0; top: .1rem; bottom: .1rem; width: 1px; background: var(--border); }
.service-icon { width: 38px; height: 38px; margin-top: .12rem; fill: none; stroke: #be8c46; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-content { min-width: 0; }
.service-card h3 { margin: 0 0 .85rem; font: 500 clamp(1.65rem, 2vw, 1.95rem)/1.18 var(--serif); letter-spacing: -.014em; text-wrap: balance; }
.service-card p { max-width: 19rem; color: var(--muted); font-size: 1rem; line-height: 1.62; margin: 0; text-wrap: pretty; }

/* PROCESS */
.process-section { background: var(--paper-alt); }
.process-section .eyebrow { margin-bottom: 1rem; }
.process-list { list-style: none; margin: 0; padding: 0 0 0 .55rem; counter-reset: steps; }
.process-item { position: relative; display: grid; grid-template-columns: 225px minmax(0, 1fr); column-gap: clamp(.9rem, 1.8vw, 1.4rem); align-items: center; padding: 1.3rem 0; border-bottom: 1px solid var(--border); }
.process-item:last-child { border-bottom: 0; padding-bottom: .1rem; }
.process-item:not(:last-child)::before { content: ''; position: absolute; z-index: 0; top: calc(50% + 26px); bottom: calc(-50% + 26px); left: 25px; width: 1px; background: var(--gold); }
.process-heading { display: flex; align-items: center; gap: 1.15rem; }
.step-number { display: inline-flex; align-items: center; justify-content: center; position: relative; flex: 0 0 52px; width: 52px; height: 52px; border: 1.5px solid var(--gold); border-radius: 50%; background: var(--paper-alt); color: var(--ink); font-weight: 600; font-size: 1rem; }
.process-heading h3 { margin: 0; font: 500 clamp(1.7rem, 2.25vw, 2.2rem)/1.24 var(--serif); letter-spacing: -.014em; }
.process-item p { max-width: none; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.62; text-wrap: pretty; }
@media (min-width: 1200px) {
  .process-item p { white-space: nowrap; }
}

/* FOUNDATION - text and image occupy separate columns */
.foundation-section { background: #f8f4ed; overflow: hidden; }
.foundation-grid { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); align-items: stretch; min-height: 440px; }
.foundation-copy { position: relative; z-index: 1; padding: clamp(3.5rem, 5.5vw, 5.1rem) clamp(2rem, 4.5vw, 4rem) clamp(3.5rem, 5.5vw, 5.1rem) 0; }
.foundation-copy .eyebrow { margin-bottom: 1.45rem; }
.foundation-copy h2 { max-width: 28rem; margin: 0 0 1.25rem; font: 500 clamp(2.2rem, 3vw, 3.25rem)/1.19 var(--serif); letter-spacing: -.014em; text-wrap: balance; }
.foundation-copy p { max-width: 29rem; margin: 0; color: #52615b; font-size: 1.02rem; line-height: 1.67; text-wrap: pretty; }
.foundation-art { min-height: 440px; position: relative; background: url('../assets/foundation-bg.png') 76% 36% / cover no-repeat; }
.foundation-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #f8f4ed 0%, rgba(248,244,237,.7) 11%, rgba(248,244,237,.07) 35%, rgba(248,244,237,.06) 100%); }

/* CONTACT & FOOTER */
.contact-section { color: var(--ivory); padding-block: clamp(2.7rem, 4.5vw, 4.1rem); background: radial-gradient(ellipse at 14% 80%, rgba(55,112,86,.32), transparent 43%), #082e26; }
.contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.contact-copy .short-rule { margin-bottom: 1.1rem; }
.contact-copy h2 { margin: 0; font: 500 clamp(2rem, 3vw, 3.3rem)/1.23 var(--serif); letter-spacing: -.014em; text-wrap: balance; }
.contact-inner .btn { flex-shrink: 0; }
.site-footer { background: #071e19; color: #c6d2ca; padding-block: 1.4rem; font-size: .85rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-footer a { color: #e0e8e0; }
.site-footer a:hover { color: var(--gold-light); }

@media (max-width: 1199.98px) {
  .hero-section { min-height: 700px; background-position: 56% center; }
  .hero-copy { max-width: 52%; padding-block: 10rem 4.5rem; }
  .hero-copy h1 { font-size: clamp(2.15rem, 3.55vw, 3.2rem); }
  .foundation-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foundation-copy { padding-right: 2rem; }
  .foundation-art { background-position: 74% center; }
}
@media (max-width: 991.98px) {
  .hero-section { min-height: 740px; background-position: 62% center; background-image: linear-gradient(90deg, rgba(4,33,26,.87) 0%, rgba(4,33,26,.71) 38%, rgba(4,33,26,.25) 74%), url('../assets/devout-design-hero-bg.webp'); }
  .hero-copy { max-width: 60%; padding-top: 10.25rem; }
  .hero-copy h1 { font-size: clamp(2.1rem, 4.25vw, 2.9rem); }
  .services-grid { --bs-gutter-y: 2.2rem; }
  .service-column + .service-column::before { display: none; }
  .service-card, .service-column:first-child .service-card, .service-column:last-child .service-card { padding: 0; }
  .service-column:not(:last-child) .service-card { padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
  .service-card h3 { max-width: 28rem; }
  .foundation-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foundation-copy { padding-right: 1.5rem; }
  .foundation-art { background-position: 72% center; }
}
/* Tablet: keep real text clear of the photographic device screens. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-section { min-height: 0; background-image: none; overflow: hidden; }
  .hero-section::before { position: absolute; content: ''; left: 0; right: 0; bottom: 0; height: 410px; background: url('../assets/devout-design-hero-bg.webp') 80% bottom / auto 420px no-repeat; }
  .hero-section::after { position: absolute; content: ''; left: 0; right: 0; bottom: 355px; height: 70px; background: linear-gradient(180deg, var(--evergreen-deep), rgba(6,39,31,0)); }
  .hero-inner { min-height: 0; align-items: flex-start; padding-bottom: 410px; }
  .hero-copy { width: 100%; max-width: 39rem; padding: 10.25rem 0 2rem; }
  .hero-copy h1 { font-size: clamp(2.5rem, 6vw, 3.45rem); }
  .hero-copy p { max-width: 34rem; }
  .hero-actions .btn { min-height: 49px; }
}
@media (max-width: 767.98px) {
  .navbar { padding-block: .8rem; }
  .brand-logo { width: 147px; }
  .hero-section { min-height: 0; background-image: none; padding: 0; overflow: hidden; }
  .hero-section::before { position: absolute; content: ''; left: 0; right: 0; bottom: 0; height: 335px; background: url('../assets/devout-design-hero-bg.webp') 77% bottom / auto 350px no-repeat; }
  .hero-section::after { position: absolute; content: ''; left: 0; right: 0; bottom: 265px; height: 90px; background: linear-gradient(180deg, #06271f 0%, rgba(6,39,31,0) 100%); }
  .hero-inner { min-height: 0; align-items: flex-start; padding-bottom: 335px; }
  .hero-copy { width: 100%; max-width: 34rem; padding: 10.2rem 0 1.25rem; }
  .hero-copy h1 { font-size: clamp(1.8rem, 6.45vw, 3.1rem); line-height: 1.14; }
  .hero-copy .short-rule { margin-block: 1.4rem 1.15rem; }
  .hero-copy p { max-width: 33rem; font-size: .98rem; margin-bottom: 1.35rem; }
  .hero-actions { gap: .65rem; }
  .hero-actions .btn { min-height: 48px; }
  .eyebrow { margin-bottom: 1.5rem; }
  .process-item { grid-template-columns: 1fr; gap: .65rem; padding-block: 1.2rem; }
  .process-item:not(:last-child)::before { display: none; }
  .process-heading { gap: 1.1rem; }
  .process-item p { padding-left: 4.25rem; }
  .foundation-grid { display: flex; flex-direction: column; }
  .foundation-copy { padding: 3.8rem 0 2.1rem; }
  .foundation-copy h2 { max-width: 35rem; }
  .foundation-copy p { max-width: 35rem; }
  .foundation-art { min-height: 280px; width: calc(100% + 2 * clamp(1.25rem, 3.4vw, 2.25rem)); margin-inline: calc(-1 * clamp(1.25rem, 3.4vw, 2.25rem)); background-position: 74% 35%; }
  .foundation-art::before { background: linear-gradient(180deg,#f8f4ed 0%, rgba(248,244,237,.07) 16%, rgba(248,244,237,0) 100%); }
  .contact-inner { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .footer-inner { flex-wrap: wrap; }
}
@media (max-width: 430px) {
  .hero-copy { padding-top: 8.9rem; }
  .hero-copy h1 { font-size: clamp(1.6rem, 7.6vw, 2.2rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-section::before { height: 305px; background-size: auto 310px; background-position: 100% bottom; }
  .hero-section::after { bottom: 255px; height: 70px; }
  .hero-inner { padding-bottom: 305px; }
  .foundation-art { min-height: 235px; background-position: 75% center; }
  .contact-inner .btn { width: 100%; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Preserve Playfair's distinctive ampersand if the overall serif changes. */
.serif-amp { font-family: var(--ampersand-serif); font-weight: 500; }