/*
Theme Name: CCHP - Chris Cote Headshots & Portraits
Theme URI: https://seacoastnhphotography.com
Author: Chris Cote
Author URI: https://seacoastnhphotography.com
Description: Custom theme for Chris Cote Headshots & Portraits. Early 20th century American trade/craft studio aesthetic. Navy and cream palette with Barlow / Barlow Condensed typography.
Version: 1.9.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: Private
Text Domain: cchp
*/

/* Fonts loaded via wp_enqueue_style in functions.php — no @import here. */

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* Colors */
  --navy:       #0c1a23;
  --cream:      #eaddc3;
  --parchment:  #f5f0e8;
  --rule:       #c8bfad;
  --hairline:   rgba(12, 26, 35, 0.15);
  --hairline-soft: rgba(12, 26, 35, 0.08);

  /* Typography */
  --font-slab:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:  'Barlow', Arial, sans-serif;

  /* Spacing */
  --gutter:     40px;
  --max-width:  1100px;

  /* Transitions */
  --transition: 0.2s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--parchment);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px — slightly larger to fill column space */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-slab);
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
}

h1 { font-size: clamp(2.25rem, 5vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
h3 { font-size: 1.3125rem; }

p { margin-bottom: 0; }
p + p { margin-top: 0.85em; }

.cchp-caps {
  font-family: var(--font-body);
  font-size: 0.688rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ============================================================
   LAYOUT
   ============================================================ */

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

.cchp-section {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* ============================================================
   RULED DIVIDER (diamond rule between sections)
   ============================================================ */

.cchp-rule {
  display: flex;
  align-items: center;
  padding: 32px var(--gutter);
  background: var(--parchment);
  position: relative;
  z-index: 2;
}

.cchp-rule-line {
  flex: 1;
  height: 1px;
  background: var(--navy);
  opacity: 0.25;
}

.cchp-rule-diamond {
  width: 6px;
  height: 6px;
  background: var(--navy);
  transform: rotate(45deg);
  opacity: 0.35;
  margin: 0 10px;
  flex-shrink: 0;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================

   Two header modes:
   1. .cchp-masthead    — big centered logo + nav band below (home page)
   2. .cchp-header      — compact horizontal logo + nav (interior pages)

   ============================================================ */

/* ── HOME: Big centered masthead ── */

.cchp-masthead {
  background: var(--navy);
  padding: 56px var(--gutter) 48px;
  text-align: center;
}

.cchp-masthead-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.cchp-masthead-logo-link {
  display: inline-block;
  text-decoration: none;
}

/* Banner ratio ~3.55:1. At 160px tall renders ~568px wide — masthead presence. */
.cchp-masthead-logo-img {
  height: 160px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.cchp-masthead-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.cchp-masthead-rule-line {
  flex: 1;
  height: 1px;
  background: var(--cream);
  opacity: 0.3;
}

.cchp-masthead-tagline-text {
  font-family: var(--font-body);
  font-size: 0.688rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.65;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Nav band beneath the masthead — separate strip, also navy */
.cchp-navband {
  background: var(--navy);
  border-top: 1px solid rgba(234, 221, 195, 0.18);
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── INTERIOR: Compact horizontal header ── */

.cchp-header {
  background: var(--navy);
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.cchp-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Banner ratio ~3.55:1. At 88px tall renders ~312px wide — present without
   overwhelming an interior page. */
.cchp-logo-img {
  height: 88px;
  width: auto;
  display: block;
}

/* ── Primary nav (used in both header modes) ── */

.cchp-nav {
  display: flex;
  gap: 28px;
  align-items: center;
  list-style: none;
}

.cchp-nav a {
  font-family: var(--font-body);
  font-size: 0.688rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--transition);
}

.cchp-nav a:hover,
.cchp-nav a.current-menu-item {
  opacity: 1;
}

.cchp-nav .cchp-nav-cta {
  background: var(--cream);
  color: var(--navy);
  padding: 7px 16px;
  opacity: 1;
}

.cchp-nav .cchp-nav-cta:hover {
  background: var(--parchment);
}

/* Dropdown */
.cchp-nav .menu-item-has-children {
  position: relative;
}

.cchp-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--navy);
  border-top: 2px solid var(--cream);
  min-width: 220px;
  list-style: none;
  padding: 8px 0;
  z-index: 200;
  margin-top: 0;
}

.cchp-nav .menu-item-has-children:hover .sub-menu {
  display: block;
}

.cchp-nav .sub-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 0.656rem;
  letter-spacing: 0.14em;
  opacity: 0.7;
  border-bottom: 1px solid rgba(234, 221, 195, 0.08);
}

.cchp-nav .sub-menu li:last-child a {
  border-bottom: none;
}

.cchp-nav .sub-menu a:hover {
  opacity: 1;
  background: rgba(234, 221, 195, 0.06);
}

/* Mobile nav toggle */
.cchp-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.cchp-nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cream);
  margin: 5px 0;
  transition: var(--transition);
}

/* ============================================================
   FOOTER
   ============================================================ */

.cchp-footer {
  background: var(--navy);
  padding: 32px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.cchp-footer p {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.4;
  line-height: 1.8;
}

.cchp-footer-right {
  text-align: right;
}

.cchp-footer-right p {
  font-size: 0.688rem;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0.55;
}

/* ============================================================
   HOME PAGE HERO
   ============================================================ */

.cchp-hero {
  position: relative;
  width: 100%;
  height: 680px;
  overflow: hidden;
  border-bottom: 3px solid var(--navy);
}

.cchp-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.cchp-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 56px;
  pointer-events: none;
}

.cchp-hero-text {
  max-width: 460px;
  pointer-events: auto;
}

.cchp-hero-eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 1;
  margin-bottom: 10px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.cchp-hero-headline {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--cream);
  line-height: 1.05;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.5);
}

.cchp-hero-services {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cchp-hero-service {
  font-family: var(--font-body);
  font-size: 0.688rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.cchp-hero-service::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--cream);
  opacity: 0.6;
  flex-shrink: 0;
}

/* ============================================================
   PAGE HERO BAND (interior pages)
   ============================================================ */

.cchp-page-hero {
  background: var(--navy);
  padding: 48px var(--gutter) 40px;
}

.cchp-page-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  max-width: var(--max-width);
  margin: 0 auto;
}

.cchp-page-hero-eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.5;
  margin-bottom: 12px;
}

.cchp-page-hero h1 {
  color: var(--cream);
  letter-spacing: -0.01em;
}

.cchp-page-hero-right p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cream);
  opacity: 0.7;
}

/* ============================================================
   PHOTO BAND

   Used on About and Portsmouth pages. Renders the photo at its
   natural aspect ratio — no forced cropping. Capped at 820px
   wide (centered) so a wide photo doesn't dominate the viewport
   on large screens.
   ============================================================ */

.cchp-photo-band {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px var(--gutter);
}

.cchp-photo-band img {
  display: block;
  width: 100%;
  max-width: 820px;
  height: 460px;
  object-fit: cover;
  object-position: center 30%;
  margin: 0 auto;
  border: 1px solid var(--hairline);
}
/* ============================================================
   SECTION HEADER
   ============================================================ */

.cchp-section-header {
  margin-bottom: 24px;
}

.cchp-section-header .cchp-caps {
  opacity: 0.45;
  display: block;
  margin-bottom: 6px;
}

.cchp-section-header h2 {
  font-size: 1.375rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.cchp-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.656rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  padding: 13px 28px;
  transition: var(--transition);
  text-decoration: none;
}

.cchp-btn-primary {
  background: var(--navy);
  color: var(--cream);
}

.cchp-btn-primary:hover {
  background: #1a2e3d;
  color: var(--cream);
}

.cchp-btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid rgba(12, 26, 35, 0.5);
}

.cchp-btn-secondary:hover {
  border-color: var(--navy);
}

.cchp-btn-cream {
  background: var(--cream);
  color: var(--navy);
}

.cchp-btn-cream:hover {
  background: var(--parchment);
}

.cchp-btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   CTA BAND
   ============================================================ */

.cchp-cta-band {
  background: var(--cream);
  border-top: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  padding: 48px var(--gutter);
  text-align: center;
}

.cchp-cta-band .cchp-caps {
  opacity: 0.5;
  display: block;
  margin-bottom: 10px;
}

.cchp-cta-band h2 {
  margin-bottom: 8px;
}

.cchp-cta-band p {
  font-size: 1rem;
  opacity: 0.65;
  font-style: italic;
  margin-bottom: 24px;
}

.cchp-cta-band .cchp-btn-row {
  justify-content: center;
}

/* ============================================================
   TESTIMONIAL BAND (full-width navy pull-quote)
   ============================================================ */

.cchp-testimonial-band {
  background: var(--navy);
  padding: 48px 80px;
  text-align: center;
}

.cchp-testimonial-band blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--cream);
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto 20px;
  opacity: 0.9;
}

.cchp-testimonial-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 200px;
  margin: 0 auto 14px;
}

.cchp-testimonial-rule-line {
  flex: 1;
  height: 1px;
  background: var(--cream);
  opacity: 0.2;
}

.cchp-testimonial-dot {
  width: 4px;
  height: 4px;
  background: var(--cream);
  border-radius: 50%;
  opacity: 0.35;
  flex-shrink: 0;
}

.cchp-testimonial-band cite {
  font-family: var(--font-body);
  font-size: 0.656rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.45;
  font-style: normal;
  display: block;
}

/* ============================================================
   TWO-COLUMN INTRO
   ============================================================ */

.cchp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.cchp-two-col-item {
  padding: 0 24px;
  border-right: 1px solid var(--hairline);
}

.cchp-two-col-item:first-child { padding-left: 0; }
.cchp-two-col-item:last-child  { border-right: none; padding-right: 0; }

.cchp-two-col-item h2,
.cchp-two-col-item h3 {
  font-size: 1.0625rem;
  margin-bottom: 12px;
}

.cchp-two-col-item p {
  font-size: 1rem;
  line-height: 1.75;
  opacity: 0.8;
}

/* ============================================================
   PHOTO + COPY FEATURE ROW

   Photo column is narrower than the copy column so the photo
   gets a tighter crop on the subject and the text has more
   room to breathe (less dead space on long copy).

   Per-image modifier classes shift the crop horizontally for
   subjects that aren't centered in the source.
   ============================================================ */

.cchp-feature-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
}

/* When copy is on the LEFT and photo on the RIGHT, flip the ratio
   so the photo column stays narrower than the copy column. */
.cchp-feature-row--reversed {
  grid-template-columns: 7fr 5fr;
}

.cchp-feature-photo {
  overflow: hidden;
  border-right: 1px solid var(--hairline);
  align-self: start;
}

/* In a reversed row, the photo is the right-side cell — flip the divider */
.cchp-feature-row--reversed .cchp-feature-photo {
  border-right: none;
  border-left: 1px solid var(--hairline);
}

.cchp-feature-photo img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center 30%;
}
/* Subject sits left-of-center in source — pull crop left */
.cchp-feature-photo--subject-left img {
  object-position: 30% 50%;
}

/* Subject(s) span most of source — keep centered, slight downward bias */
.cchp-feature-photo--subject-wide img {
  object-position: 55% 60%;
}

.cchp-feature-copy {
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.cchp-feature-copy .cchp-caps { opacity: 0.45; }

.cchp-feature-copy h2 { font-size: 1.625rem; }

.cchp-feature-copy p {
  font-size: 1.0625rem;
  line-height: 1.75;
  opacity: 0.78;
}

/* ============================================================
   SERVICE CARDS GRID
   ============================================================ */

.cchp-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.cchp-card {
  background: var(--parchment);
  padding: 24px 28px;
}

.cchp-card .cchp-caps {
  opacity: 0.45;
  display: block;
  margin-bottom: 8px;
}

.cchp-card h3 {
  font-size: 1.125rem;
  margin-bottom: 10px;
}

.cchp-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  opacity: 0.75;
  margin-bottom: 14px;
}

.cchp-card-link {
  font-family: var(--font-body);
  font-size: 0.656rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid rgba(12, 26, 35, 0.35);
  padding-bottom: 1px;
  text-decoration: none;
}

/* ============================================================
   SESSION ENTRY CARDS (Headshots & Portraits page)

   Catalog-entry layout:
     [ portrait photo ][ navy header (title + price) ]
     [   left col    ][ body: description / includes ]

   Photo holds its natural ~3:4 portrait ratio. Right column
   stacks navy title bar + parchment body. Reads like an entry
   in a printed studio brochure.
   ============================================================ */

.cchp-session {
  display: grid;
  grid-template-columns: 420px 1fr;
  border: 1px solid rgba(12, 26, 35, 0.18);
  background: var(--parchment);
  margin-bottom: 32px;
  overflow: hidden;
}

.cchp-session-photo {
  overflow: hidden;
  background: var(--navy);
  border-right: 1px solid rgba(12, 26, 35, 0.18);
  /* Square crop — wider on the sides, slight loss top/bottom is fine */
  aspect-ratio: 1 / 1;
}

.cchp-session-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Keep eyes/face in upper-third of square frame */
  object-position: center 30%;
}

/* Modifier: when the source photo is landscape (e.g. environmental portrait
   showing context), use a centered crop instead of the upper-biased default
   so the workspace context (props, table, etc.) stays in frame. */
.cchp-session-photo--landscape img {
  object-position: center center;
}

.cchp-session-content {
  display: flex;
  flex-direction: column;
}

.cchp-session-header {
  background: var(--navy);
  padding: 18px 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

.cchp-session-header-left {
  flex: 1;
}

.cchp-session-header-right {
  text-align: right;
  flex-shrink: 0;
}

.cchp-session-type {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.5;
  margin-bottom: 6px;
}

.cchp-session-title {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--cream);
  line-height: 1.1;
}

.cchp-session-price {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--cream);
}

.cchp-session-duration {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.5;
  margin-top: 4px;
}

.cchp-session-body {
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 32px;
  flex: 1;
  background: var(--parchment);
}

.cchp-session-desc {
  border-right: 1px solid rgba(12, 26, 35, 0.12);
  padding-right: 28px;
}

.cchp-session-desc p {
  font-size: 1rem;
  line-height: 1.75;
  opacity: 0.82;
}

.cchp-session-includes-label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 12px;
  display: block;
}

.cchp-session-includes ul {
  list-style: none;
  padding: 0;
}

.cchp-session-includes ul li {
  font-size: 0.9375rem;
  line-height: 1.5;
  opacity: 0.82;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline-soft);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cchp-session-includes ul li:last-child { border-bottom: none; }

.cchp-session-includes ul li::before {
  content: '—';
  opacity: 0.3;
  font-size: 0.6875rem;
  flex-shrink: 0;
}

/* ============================================================
   RETOUCHING CARDS (was inline-styled)
   ============================================================ */

.cchp-card-cream { background: var(--cream); }

.cchp-retouch-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.cchp-retouch-title {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.0625rem;
}

.cchp-retouch-price {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 0.9375rem;
  opacity: 0.6;
}

.cchp-retouch-list {
  list-style: none;
  padding: 0;
}

.cchp-retouch-list li {
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline-soft);
  opacity: 0.82;
}

.cchp-retouch-list li::before {
  content: '+ ';
  opacity: 0.4;
}

.cchp-retouch-list li:last-child { border-bottom: none; }

/* ============================================================
   TEAM CALLOUT (was inline-styled)
   ============================================================ */

.cchp-team-callout {
  background: var(--navy);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cchp-team-callout-text .cchp-caps {
  color: var(--cream);
  opacity: 0.5;
  display: block;
  margin-bottom: 6px;
}

.cchp-team-callout-title {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--cream);
}

.cchp-team-callout-sub {
  font-size: 0.9375rem;
  color: var(--cream);
  opacity: 0.65;
  margin-top: 6px;
  font-style: italic;
}

/* ============================================================
   TEAM HEADSHOTS PAGE — 4-photo strip (portrait orientation)
   ============================================================ */

.cchp-team-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--navy);
  border-top: 1px solid var(--hairline);
  border-bottom: 2px solid var(--navy);
}

.cchp-team-strip-cell {
  overflow: hidden;
  background: var(--navy);
  /* Portrait aspect ratio so the headshots aren't squashed */
  aspect-ratio: 3 / 4;
}

.cchp-team-strip-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 20%;
}

/* ============================================================
   HOME PAGE TRIPTYCH

   The source image (photo-home-additional1.jpg) is itself a
   composite of three subjects side-by-side. We render it at
   its natural aspect ratio so faces don't get cropped.
   ============================================================ */

.cchp-triptych {
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 16px;
}

.cchp-triptych img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.cchp-triptych-caption {
  text-align: center;
  margin-top: 18px;
  font-size: 0.875rem;
  font-style: italic;
  opacity: 0.6;
}

/* ============================================================
   PRICING TABLE (Team Headshots)
   ============================================================ */

.cchp-pricing-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(12, 26, 35, 0.18);
}

.cchp-pricing-table thead tr {
  background: var(--navy);
}

.cchp-pricing-table thead th {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.6;
  padding: 14px 24px;
  text-align: left;
  font-weight: 400;
}

.cchp-pricing-table thead th:last-child { text-align: right; }

.cchp-pricing-table tbody tr {
  border-bottom: 1px solid rgba(12, 26, 35, 0.1);
}

.cchp-pricing-table tbody tr:last-child { border-bottom: none; }

.cchp-pricing-table tbody tr:nth-child(even) {
  background: rgba(12, 26, 35, 0.03);
}

.cchp-pricing-table tbody td { padding: 16px 24px; }

.cchp-tier-size {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1rem;
}

.cchp-tier-label {
  font-size: 0.6875rem;
  opacity: 0.45;
  font-style: italic;
  margin-top: 2px;
}

.cchp-tier-price {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.125rem;
  text-align: right;
}

/* ============================================================
   FAQ
   ============================================================ */

.cchp-faq-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.cchp-faq-section-header .cchp-caps { opacity: 0.38; white-space: nowrap; }

.cchp-faq-section-header-rule {
  flex: 1;
  height: 1px;
  background: var(--navy);
  opacity: 0.15;
}

.cchp-faq-list {
  border: 1px solid var(--hairline);
  margin-bottom: 36px;
}

.cchp-faq-item {
  border-bottom: 1px solid rgba(12, 26, 35, 0.12);
}

.cchp-faq-item:last-child { border-bottom: none; }

.cchp-faq-q {
  background: var(--navy);
  padding: 14px 28px;
}

.cchp-faq-q p {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--cream);
  line-height: 1.3;
}

.cchp-faq-a {
  padding: 18px 28px 20px;
  background: var(--parchment);
}

.cchp-faq-a p {
  font-size: 1rem;
  line-height: 1.75;
  opacity: 0.82;
}

/* ============================================================
   TESTIMONIALS GRID
   ============================================================ */

.cchp-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.cchp-testimonial-card {
  background: var(--parchment);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cchp-testimonial-card:nth-child(even) {
  background: #eee8d8;
}

.cchp-testimonial-card blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.85;
  flex: 1;
}

.cchp-testimonial-card-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(12, 26, 35, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.cchp-testimonial-card-rule {
  width: 20px;
  height: 1px;
  background: var(--navy);
  opacity: 0.25;
  flex-shrink: 0;
}

.cchp-testimonial-card cite {
  font-family: var(--font-body);
  font-size: 0.656rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
  font-style: normal;
}

.cchp-open-quote {
  font-family: var(--font-slab);
  font-size: 3rem;
  opacity: 0.08;
  line-height: 1;
  margin-bottom: -12px;
  display: block;
}

/* ============================================================
   PORTFOLIO GALLERY
   ============================================================ */

.cchp-portfolio-subnav {
  background: var(--cream);
  border-bottom: 2px solid var(--navy);
  padding: 0 var(--gutter);
  display: flex;
}

.cchp-portfolio-subnav a {
  font-family: var(--font-body);
  font-size: 0.656rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.5;
  padding: 14px 24px 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  transition: opacity var(--transition);
}

.cchp-portfolio-subnav a:hover { opacity: 0.8; }
.cchp-portfolio-subnav a.active { opacity: 1; border-bottom-color: var(--navy); }

.cchp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.cchp-gallery-cell {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--navy);
}

.cchp-gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s ease;
}

.cchp-gallery-cell:hover img {
  transform: scale(1.03);
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.cchp-bio {
  padding: 44px var(--gutter) 48px;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
}

.cchp-bio-label .cchp-caps { opacity: 0.38; }

.cchp-bio-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cchp-bio-text h2 { font-size: 1.625rem; margin-bottom: 4px; }

.cchp-bio-text p {
  font-size: 1.0625rem;
  line-height: 1.75;
  opacity: 0.82;
}

.cchp-signature {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(12, 26, 35, 0.12);
}

.cchp-signature-name {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.125rem;
}

.cchp-signature-title {
  font-size: 0.656rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.38;
  margin-top: 3px;
}

/* Gear grid */
.cchp-gear-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.cchp-gear-col { background: var(--parchment); }

.cchp-gear-col-header {
  background: var(--navy);
  padding: 12px 20px;
}

.cchp-gear-col-header span {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.55;
}

.cchp-gear-col ul {
  list-style: none;
  padding: 16px 20px;
}

.cchp-gear-col ul li {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.72;
  padding: 7px 0;
  border-bottom: 1px solid rgba(12, 26, 35, 0.07);
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.cchp-gear-col ul li:last-child { border-bottom: none; }

.cchp-gear-col ul li::before {
  content: '—';
  opacity: 0.25;
  font-size: 0.625rem;
  flex-shrink: 0;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.cchp-contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}

.cchp-contact-form {
  /* WPForms shortcode renders inside this column */
}

.cchp-contact-details {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  background: var(--cream);
  border: 1px solid var(--hairline);
}

.cchp-contact-block .cchp-caps {
  display: block;
  margin-bottom: 4px;
  opacity: 0.5;
}

.cchp-contact-block p {
  font-size: 1rem;
  line-height: 1.65;
}

.cchp-contact-block a {
  border-bottom: 1px solid rgba(12, 26, 35, 0.3);
  padding-bottom: 1px;
}

.cchp-contact-block a:hover {
  border-bottom-color: var(--navy);
}

/* ── WPForms theming — inherit the brand ── */
.cchp-contact-form .wpforms-form input[type="text"],
.cchp-contact-form .wpforms-form input[type="email"],
.cchp-contact-form .wpforms-form input[type="tel"],
.cchp-contact-form .wpforms-form input[type="url"],
.cchp-contact-form .wpforms-form textarea,
.cchp-contact-form .wpforms-form select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid rgba(12, 26, 35, 0.25);
  color: var(--navy);
  border-radius: 0;
  transition: border-color var(--transition);
}

.cchp-contact-form .wpforms-form input[type="text"]:focus,
.cchp-contact-form .wpforms-form input[type="email"]:focus,
.cchp-contact-form .wpforms-form input[type="tel"]:focus,
.cchp-contact-form .wpforms-form input[type="url"]:focus,
.cchp-contact-form .wpforms-form textarea:focus,
.cchp-contact-form .wpforms-form select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}

.cchp-contact-form .wpforms-form label.wpforms-field-label {
  font-family: var(--font-body);
  font-size: 0.688rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 8px;
  display: block;
}

.cchp-contact-form .wpforms-form button[type="submit"],
.cchp-contact-form .wpforms-form .wpforms-submit {
  font-family: var(--font-body);
  font-size: 0.656rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--cream);
  padding: 14px 32px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition);
}

.cchp-contact-form .wpforms-form button[type="submit"]:hover,
.cchp-contact-form .wpforms-form .wpforms-submit:hover {
  background: #1a2e3d;
  color: var(--cream);
}

.cchp-contact-form .wpforms-field {
  margin-bottom: 20px;
}

/* ============================================================
   TEAM HEADSHOTS PAGE — Process steps, includes band, pricing
   (extracted from inline styles, font sizes brought up to match
   the rest of the site)
   ============================================================ */

.cchp-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.cchp-process-step {
  background: var(--parchment);
  padding: 28px 26px;
}

.cchp-process-number {
  font-family: var(--font-slab);
  font-size: 2rem;
  opacity: 0.12;
  line-height: 1;
  margin-bottom: 10px;
}

.cchp-process-title {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 10px;
}

.cchp-process-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  opacity: 0.78;
}

/* Pricing footnote */
.cchp-pricing-footnote {
  margin-top: 18px;
  font-size: 0.875rem;
  opacity: 0.62;
  font-style: italic;
  line-height: 1.7;
}

/* Pricing column right alignment */
.cchp-pricing-col-right { text-align: right; }

/* Includes band — navy header bar + 2-col list body */
.cchp-includes-band {
  border: 1px solid rgba(12, 26, 35, 0.18);
}

.cchp-includes-band-header {
  background: var(--navy);
  padding: 14px 28px;
}

.cchp-includes-band-header .cchp-caps {
  color: var(--cream);
  opacity: 0.6;
}

.cchp-includes-grid {
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--parchment);
}

.cchp-includes-col {
  padding-right: 28px;
  border-right: 1px solid var(--hairline-soft);
}

.cchp-includes-col:last-child {
  padding-right: 0;
  padding-left: 28px;
  border-right: none;
}

.cchp-includes-col-title {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 14px;
}

.cchp-includes-list {
  list-style: none;
  padding: 0;
}

.cchp-includes-list li {
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline-soft);
  display: flex;
  gap: 10px;
  align-items: baseline;
  opacity: 0.82;
}

.cchp-includes-list li::before {
  content: '—';
  opacity: 0.3;
  flex-shrink: 0;
}

.cchp-includes-list li:last-child {
  border-bottom: none;
}

/* ============================================================
   WORDPRESS DEFAULTS — kill horizontal rules and block separators
   that would clash with our diamond rules. Targeted, not nuclear.
   ============================================================ */

hr,
.wp-block-separator {
  display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  :root { --gutter: 20px; }

  .cchp-nav { display: none; }
  .cchp-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy);
    padding: 16px 20px;
    gap: 16px;
    border-top: 1px solid rgba(234, 221, 195, 0.1);
  }
  .cchp-nav-toggle { display: block; }

  /* Logo sizes drop down on mobile */
  .cchp-logo-img { height: 60px; }
  .cchp-masthead { padding: 36px 20px 28px; }
  .cchp-masthead-logo-img { height: 96px; }

  /* On mobile, drop the rule lines and just show centered tagline text */
  .cchp-masthead-tagline { gap: 0; margin-top: 18px; }
  .cchp-masthead-rule-line { display: none; }
  .cchp-masthead-tagline-text {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    white-space: normal;
    text-align: center;
    flex: 0 1 auto;
    max-width: 100%;
  }

  .cchp-page-hero-inner,
  .cchp-two-col,
  .cchp-feature-row,
  .cchp-cards-grid,
  .cchp-session,
  .cchp-session-body,
  .cchp-testimonials-grid,
  .cchp-bio,
  .cchp-gear-grid,
  .cchp-process-grid,
  .cchp-includes-grid,
  .cchp-contact-grid { grid-template-columns: 1fr; }

  .cchp-includes-col {
    padding-right: 0;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-right: none;
    border-bottom: 1px solid var(--hairline-soft);
  }
  .cchp-includes-col:last-child {
    padding-left: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }

  /* Session card: stack photo above content; keep square crop */
  .cchp-session-photo {
    border-right: none;
    border-bottom: 1px solid rgba(12, 26, 35, 0.18);
    aspect-ratio: 1 / 1;
  }

  .cchp-two-col-item {
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  .cchp-two-col-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .cchp-feature-photo {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .cchp-feature-photo img { min-height: 240px; }

  .cchp-session-desc {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(12, 26, 35, 0.12);
    padding-bottom: 20px;
    margin-bottom: 4px;
  }

  /* Team strip: 2x2 grid on mobile */
  .cchp-team-strip { grid-template-columns: repeat(2, 1fr); }

  /* Triptych is a single image — naturally responsive, no extra rules needed */

  .cchp-testimonial-band { padding: 40px 24px; }

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

  .cchp-hero { height: 460px; }
  .cchp-hero-overlay { padding: 24px; }
  .cchp-hero-headline { font-size: 2rem; }

  .cchp-footer { flex-direction: column; text-align: center; }
  .cchp-footer-right { text-align: center; }

  h1 { font-size: 2rem; }
}

@media (max-width: 480px) {
  .cchp-gallery-grid { grid-template-columns: 1fr; }
  .cchp-pricing-table { font-size: 0.8125rem; }
  .cchp-pricing-table tbody td { padding: 12px 16px; }
  .cchp-team-strip { grid-template-columns: 1fr; }
}

/* Tablet / narrow desktop: shrink session card photo column so right side
   isn't squeezed. Below 768px the responsive block above stacks them. */
@media (max-width: 1024px) and (min-width: 769px) {
  .cchp-session { grid-template-columns: 320px 1fr; }
  .cchp-session-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cchp-session-desc {
    border-right: none;
    border-bottom: 1px solid var(--hairline-soft);
    padding-right: 0;
    padding-bottom: 16px;
  }
}
.cchp-bio-signature {
  margin-top: 28px;
}

.cchp-bio-signature img {
  display: block;
  max-width: 240px;
  height: auto;
  /* If your signature is dark and parchment background tints it weird,
     uncomment the next line to ensure it stays pure navy */
  /* filter: brightness(0) saturate(100%) invert(8%) sepia(15%) saturate(2000%) hue-rotate(180deg) brightness(95%) contrast(96%); */
}

.cchp-photo-caption {
  text-align: center;
  margin-top: 12px;
  font-size: 0.688rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ============================================================
   ESTIMATE PAGE — Photography Project Estimator
   ============================================================ */

.cchp-est {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-body);
  color: var(--navy);
}

.cchp-est-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.cchp-est-field {
  display: flex;
  flex-direction: column;
}

.cchp-est .cchp-est-field#pec-extras-field,
.cchp-est-fieldset > .cchp-est-field {
  margin-bottom: 18px;
}

.cchp-est-label {
  font-family: var(--font-body);
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.75;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cchp-est-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgba(12, 26, 35, 0.45);
  border-radius: 50%;
  background: var(--parchment);
  color: var(--navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  opacity: 0.6;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.cchp-est-info:hover,
.cchp-est-info:focus {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
  outline: none;
  opacity: 1;
}

.cchp-est-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  background: var(--cream);
  border: 1px solid rgba(12, 26, 35, 0.25);
  color: var(--navy);
  border-radius: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cchp-est-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}

.cchp-est-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-body);
  line-height: 1.6;
}

.cchp-est-hint {
  font-size: 0.8125rem;
  color: var(--navy);
  opacity: 0.55;
  margin-top: 6px;
  font-style: italic;
}

.cchp-est-fieldset {
  border: 1px solid var(--hairline);
  padding: 22px 24px 8px;
  margin: 8px 0 24px;
  background: rgba(12, 26, 35, 0.02);
}

.cchp-est-legend {
  font-family: var(--font-body);
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0 8px;
  background: var(--parchment);
}

.cchp-est-fieldset-intro {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--navy);
  opacity: 0.72;
  margin-bottom: 18px;
}

.cchp-est-output {
  background: var(--cream);
  border: 1px solid var(--hairline);
  padding: 22px 24px;
  margin-top: 8px;
}

.cchp-est-output-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.cchp-est-output-header .cchp-caps {
  display: block;
  opacity: 0.5;
  margin-bottom: 4px;
}

.cchp-est-output-title {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy);
  margin: 0;
}

.cchp-est-breakdown {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: 0.9375rem;
  color: var(--navy);
}

.cchp-est-breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.cchp-est-breakdown li:last-child {
  border-bottom: none;
}

.cchp-est-line-label {
  opacity: 0.78;
  flex: 1;
}

.cchp-est-line-value {
  font-family: var(--font-slab);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cchp-est-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 2px solid var(--navy);
  margin-top: 6px;
}

.cchp-est-total-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.65;
}

.cchp-est-total-value {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 1.875rem;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.cchp-est-disclaimer {
  font-size: 0.875rem;
  color: var(--navy);
  opacity: 0.7;
  margin: 20px 0 0;
  line-height: 1.65;
  font-style: italic;
  padding: 14px 18px;
  background: rgba(12, 26, 35, 0.03);
  border-left: 3px solid var(--navy);
}

.cchp-est-disclaimer strong {
  font-style: normal;
  font-weight: 700;
  font-family: var(--font-slab);
  letter-spacing: 0.04em;
}

.cchp-est-email-section {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.cchp-est-email-header {
  margin-bottom: 14px;
}

.cchp-est-email-header .cchp-caps {
  display: block;
  opacity: 0.5;
  margin-bottom: 4px;
}

.cchp-est-email-intro {
  font-size: 0.9375rem;
  color: var(--navy);
  opacity: 0.78;
  margin-bottom: 18px;
  line-height: 1.6;
}

.cchp-est-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--navy);
  opacity: 0.75;
  margin: 8px 0 18px;
  cursor: pointer;
  line-height: 1.5;
}

.cchp-est-consent input[type="checkbox"] {
  margin: 4px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

.cchp-est-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cchp-est-feedback {
  font-size: 0.875rem;
  margin: 12px 0 0;
  min-height: 20px;
  line-height: 1.5;
  font-style: italic;
}

.cchp-est-feedback-error {
  color: #8a2010;
  font-style: normal;
}

.cchp-est-feedback-success {
  color: #2d4f2d;
  font-style: normal;
}

.cchp-est-tip-portal {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 280px;
  padding: 10px 12px;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(12, 26, 35, 0.35);
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s, visibility 0.12s;
  z-index: 2147483647;
}

.cchp-est-tip-portal.cchp-est-tip-visible {
  opacity: 1;
  visibility: visible;
}

.cchp-est-tip-portal::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--cchp-est-arrow-left, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--navy);
}

.cchp-est-tip-portal[data-placement="below"]::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--navy);
}

@media (max-width: 600px) {
  /* Stack two-column grids into single column on mobile */
  .cchp-est-grid { grid-template-columns: 1fr; }
  
  /* Tighter fieldset padding on small screens */
  .cchp-est-fieldset { padding: 20px 18px 6px; }
  
  /* Restore vertical spacing between fields when they stack */
  .cchp-est-grid .cchp-est-field {
    margin-bottom: 16px;
  }
  .cchp-est-grid .cchp-est-field:last-child {
    margin-bottom: 0;
  }
  
  /* Add breathing room between the major estimator sections */
  .cchp-est-output {
    margin-top: 20px;
  }
  
  .cchp-est-disclaimer {
    margin-top: 24px;
  }
  
  .cchp-est-email-section {
    margin-top: 32px;
    padding-top: 28px;
  }
  
  /* Stack the action buttons full-width on mobile */
  .cchp-est-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .cchp-est-actions .cchp-btn {
    width: 100%;
    text-align: center;
  }
  
  /* Fix the total row from cramping its label and value */
  .cchp-est-total-row {
    gap: 12px;
  }
  
  .cchp-est-total-value {
    font-size: 1.625rem;
  }
}