/* =========================================================================
   Kelly Dorsey Insurance Services — design system  ·  Direction A: "The Neighbor"
   Warm, daylit, hand-made, personal. Cream is the field; forest is the ink;
   the cow is a character; Kelly's signature and handwriting make it a real person.
   NOT a dark-green corporate site. NOT a SaaS template.
   ========================================================================= */

:root {
  --forest:      #2A6B38;   /* the ink: headlines, buttons, links            */
  --forest-deep: #235C2F;
  --pine:        #173E22;   /* footer anchor only                            */
  --pine-deep:   #102D19;
  --brown:       #6E5238;   /* the cow + the handwriting + the marker         */
  --brown-soft:  #8A6B4C;
  --tan:         #B79B7D;   /* dashed rules, soft borders                     */
  --sage:        #D6E6C4;   /* warm emphasis panels                          */
  --sage-deep:   #C4DCAE;
  --sage-bright: #BDE2A7;

  --cream:       #FAF6EC;   /* THE paper, everywhere                          */
  --warmwhite:   #FFFDF8;   /* cards, polaroids, forms                        */
  --ink:         #211E1A;
  --soft:        #3C463A;   /* warm body on cream                            */
  --muted:       #6B6258;
  --line:        #E7E0D0;
  --line-dark:   rgba(255,253,248,.16);

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --hand:  'Caveat', 'Segoe Script', cursive;   /* signatures & asides only */

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.22rem, 1.12rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.7vw, 3rem);
  --step-4:  clamp(2.5rem, 1.95rem + 2.7vw, 4.2rem);
  --step-5:  clamp(2.9rem, 2.1rem + 4vw, 5.2rem);

  --wrap: 1180px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 22px 50px -30px rgba(23, 62, 34, .5);
  --shadow-soft: 0 12px 30px -24px rgba(23, 62, 34, .45);
  --tape: rgba(189,226,167,.55);
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--cream);
  /* faint warm dot-grid: daylight paper texture */
  background-image: radial-gradient(rgba(110,82,56,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
::selection { background: var(--sage-bright); color: var(--pine); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; color: var(--forest); letter-spacing: -0.012em; }
h1 { font-weight: 700; }

/* ----------------------------------------------------------------- layout */
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gut), 1340px); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.measure { max-width: 60ch; }
.muted { color: var(--muted); }

/* handwritten aside — the signature device */
.scribble, .eyebrow {
  font-family: var(--hand);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 0.7vw, 1.85rem);
  line-height: 1;
  color: var(--brown);
  display: inline-block;
  transform: rotate(-2deg);
}
.scribble.on-dark, .eyebrow.on-dark { color: var(--sage-bright); }

/* small uppercase label, used sparingly where restraint is needed */
.label { font-family: var(--sans); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brown); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--soft); max-width: 34ch; }

/* hand-drawn marker underline under a headline word: wrap word in <span class="u"> with inline svg */
.u { position: relative; white-space: nowrap; }
.u svg { position: absolute; left: -2%; bottom: -0.2em; width: 104%; height: 0.4em; overflow: visible; pointer-events: none; }

/* dashed hand-rule divider */
.dashrule { border: none; border-top: 1.5px dashed var(--tan); }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans); font-weight: 700; font-size: var(--step-0); line-height: 1;
  padding: 1em 1.6em; border-radius: 11px;
  background: var(--forest); color: var(--cream);
  box-shadow: var(--shadow-soft);
  transition: transform .4s var(--ease), background .3s var(--ease), box-shadow .4s var(--ease);
}
.btn:hover { background: var(--forest-deep); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn .arw { transition: transform .4s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
.btn-cream { background: var(--cream); color: var(--forest); }
.btn-cream:hover { background: var(--warmwhite); }

.ghost { font-weight: 700; color: var(--forest); border-bottom: 2px solid var(--tan); padding-bottom: 2px; transition: border-color .3s var(--ease); }
.ghost:hover { border-color: var(--forest); }
.ghost.on-dark { color: var(--cream); border-color: var(--sage-bright); }

.link-arw { font-weight: 700; color: var(--forest); display: inline-flex; align-items: center; gap: 0.45rem; border-bottom: 2px solid transparent; padding-bottom: 1px; transition: border-color .3s var(--ease); }
.link-arw .arw { transition: transform .4s var(--ease); }
.link-arw:hover { border-color: var(--forest); }
.link-arw:hover .arw { transform: translateX(4px); }
.link-arw.on-dark { color: var(--sage-bright); } .link-arw.on-dark:hover { border-color: var(--sage-bright); }

/* signature block */
.sig { display: inline-block; }
.sig .nm { font-family: var(--hand); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); color: var(--forest); line-height: 0.85; }
.sig small { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.35rem; letter-spacing: 0.02em; }
.sig.on-dark .nm { color: var(--cream); } .sig.on-dark small { color: var(--sage-bright); }

/* ----------------------------------------------------------------- header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-block: 1.1rem; transition: background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease); }
.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; justify-self: start; }
.brand img { height: 76px; width: auto; transition: height .45s var(--ease); }
.brand__name { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1; color: var(--forest); }
.brand__name small { display: block; font-family: var(--sans); font-weight: 700; font-size: 0.5rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brown); margin-top: 4px; }

.nav { display: flex; gap: clamp(1.1rem, 2.4vw, 2.3rem); justify-self: center; }
.nav a { font-size: 0.95rem; font-weight: 600; color: var(--ink); position: relative; padding-block: 0.4rem; transition: color .3s var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--forest); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover { color: var(--forest); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--forest); }

.header-cta { display: inline-flex; align-items: center; gap: 1.1rem; justify-self: end; }
.header-phone { font-weight: 700; color: var(--forest); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.header-phone svg { width: 15px; height: 15px; }
.header-cta .btn { padding: 0.78em 1.3em; font-size: 0.9rem; }

/* header sits on cream; once scrolled it gets a solid cream bar + rule so text stays legible */
.site-header.scrolled { background: rgba(250,246,236,.92); backdrop-filter: blur(6px); box-shadow: 0 1px 0 var(--line), 0 12px 30px -28px rgba(23,62,34,.5); padding-block: 0.65rem; }
.site-header.scrolled .brand img { height: 60px; }

.nav-toggle { display: none; justify-self: end; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 10px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 24px; height: 2px; background: var(--forest); position: relative; transition: .3s var(--ease); }
.nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; }

.mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--forest); display: flex; flex-direction: column; padding: 2rem var(--gut); transform: translateY(-100%); transition: transform .55s var(--ease); }
.mobile-menu.open { transform: translateY(0); }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu .brand__name { color: var(--cream); } .mobile-menu .brand__name small { color: var(--sage-bright); }
.mobile-menu__close { color: var(--cream); font-size: 2rem; line-height: 1; width: 46px; height: 46px; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 2.5rem; }
.mobile-menu nav a { font-family: var(--serif); font-size: clamp(2rem, 9vw, 3rem); color: var(--cream); padding-block: 0.5rem; border-bottom: 1px solid var(--line-dark); }
.mobile-menu__foot { margin-top: auto; color: var(--sage-bright); font-weight: 700; padding-top: 2rem; font-family: var(--hand); font-size: 1.6rem; }
.mobile-menu__foot a { color: var(--cream); }

/* ----------------------------------------------------------------- the cow as a character */
.cowchar { background: center/contain no-repeat; pointer-events: none; }
.cowchar--forest { background-image: url('../img/logo/cow-forest.svg'); }
.cowchar--brown  { background-image: url('../img/logo/cow-brown.svg'); }

/* ----------------------------------------------------------------- hero (daylight) */
.hero { position: relative; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(7.5rem, 13vw, 10rem) clamp(2.5rem, 6vw, 5rem); }
.hero--center .hero__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-block: clamp(8.5rem, 15vw, 12rem) clamp(3rem, 7vw, 6rem); }
.hero h1 { font-size: var(--step-5); line-height: 1.03; max-width: 16ch; }
.hero--center h1 { max-width: 20ch; }
.hero__sub { font-size: var(--step-1); line-height: 1.5; color: var(--soft); max-width: 38ch; margin-top: 1.5rem; }
.hero--center .hero__sub { margin-inline: auto; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 2.1rem; }
.hero--center .hero__actions { justify-content: center; }
.hero__cow { position: absolute; right: -2%; bottom: -1.5rem; width: clamp(120px, 17vw, 210px); aspect-ratio: 1; opacity: 0.9; z-index: 0; transform: scaleX(-1); }
.hero__inner > * { position: relative; z-index: 1; }

/* the standing-camera right column: a taped polaroid + Kelly's signature */
.polaroid { background: var(--warmwhite); padding: 0.85rem 0.85rem 0; border-radius: 4px; box-shadow: var(--shadow); transform: rotate(2deg); position: relative; max-width: 440px; }
.polaroid--left { transform: rotate(-1.8deg); margin-right: auto; }
.polaroid::before, .polaroid::after { content: ""; position: absolute; top: -13px; width: 92px; height: 28px; background: var(--tape); border: 1px solid rgba(110,82,56,.18); }
.polaroid::before { left: 16%; transform: rotate(-4deg); }
.polaroid::after { right: 16%; transform: rotate(5deg); }
.polaroid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; }
.polaroid .cap { font-family: var(--hand); font-size: 1.55rem; color: var(--ink); text-align: center; padding: 0.45rem 0 0.65rem; line-height: 1; }
.hero .polaroid { margin-inline: auto; }
.hero__sigwrap { display: flex; justify-content: center; margin-top: 1.3rem; }

/* trust line under the hero copy */
.trustline { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1.5px dashed var(--tan); }
.hero--center .trustline { justify-content: center; }
.trustline span { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--soft); font-size: 0.95rem; }
.trustline svg { width: 19px; height: 19px; color: var(--forest); flex: none; }

/* ----------------------------------------------------------------- section heads */
.sec-head { display: grid; gap: 0.7rem; max-width: 56ch; }
.sec-head h2 { font-size: var(--step-3); }
.sec-head.split { max-width: none; grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 1.2rem 3rem; }
.sec-head.split p { color: var(--muted); }
@media (max-width: 800px) { .sec-head.split { grid-template-columns: 1fr; align-items: start; } }

/* ----------------------------------------------------------------- promise row */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.promise__item { display: grid; gap: 0.5rem; }
.promise__num { width: 34px; height: 34px; border-radius: 50%; background: var(--sage); color: var(--forest); display: grid; place-items: center; }
.promise__num svg { width: 17px; height: 17px; }
.promise__item h3 { font-size: var(--step-1); margin-top: 0.3rem; }
.promise__item p { color: var(--muted); max-width: 34ch; }
@media (max-width: 760px) { .promise { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ----------------------------------------------------------------- two lanes (warm brochure cards) */
.lanes { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
.lane { background: var(--warmwhite); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.lane:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lane__photo { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.lane__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.lane:hover .lane__photo img { transform: scale(1.04); }
.lane__pin { position: absolute; top: 0.9rem; left: 0.9rem; background: var(--cream); color: var(--brown); font-family: var(--hand); font-size: 1.25rem; line-height: 1; padding: 0.3rem 0.8rem; border-radius: 20px; box-shadow: var(--shadow-soft); transform: rotate(-2deg); }
.lane__body { padding: clamp(1.4rem, 3vw, 2.1rem); display: flex; flex-direction: column; }
.lane h3 { font-size: var(--step-2); }
.lane p { color: var(--muted); margin-top: 0.6rem; max-width: 42ch; }
.lane__tags { margin-top: 1rem; font-size: 0.88rem; color: var(--soft); font-weight: 600; }
.lane .link-arw { margin-top: auto; padding-top: 1.3rem; align-self: flex-start; }
@media (max-width: 820px) { .lanes { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- a note from Kelly (replaces dark quote band) */
.note { background: var(--sage); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem); position: relative; overflow: hidden; }
.note__cow { position: absolute; right: -3%; bottom: -12%; width: clamp(150px, 22vw, 280px); aspect-ratio: 1; opacity: 0.5; }
.note__inner { position: relative; z-index: 1; max-width: 60ch; }
.quotes { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); }
.quote { font-family: var(--serif); font-style: italic; font-size: var(--step-2); line-height: 1.36; color: var(--pine); padding-left: 1.3rem; position: relative; }
.quote::before { content: ""; position: absolute; left: 0; top: 0.35em; bottom: 0.3em; width: 3px; background: var(--brown); border-radius: 2px; }
.note .sig { margin-top: 1.6rem; }

/* ----------------------------------------------------------------- coverage (warm cards) */
.coverage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.coverage--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .coverage, .coverage--two { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .coverage, .coverage--two { grid-template-columns: 1fr; } }
.coverage__item { background: var(--warmwhite); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 1.8rem); box-shadow: var(--shadow-soft); transition: transform .4s var(--ease); }
.coverage__item:nth-child(3n+2) { transform: rotate(-0.7deg); }
.coverage__item:nth-child(3n) { transform: rotate(0.6deg); }
.coverage__item:hover { transform: translateY(-4px) rotate(0); }
.coverage__no { width: 32px; height: 32px; border-radius: 50%; background: var(--sage); color: var(--forest); display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-weight: 600; margin-bottom: 0.8rem; }
.coverage__item h3 { font-size: var(--step-1); }
.coverage__item p { color: var(--muted); margin-top: 0.45rem; font-size: 0.96rem; }

/* ----------------------------------------------------------------- carrier marquee */
/* Logos render as a flat forest-green silhouette (CSS mask of the logo's alpha)
   and reveal their real colors on hover. The strip auto-scrolls and pauses on
   hover; the track holds two identical copies so translateX(-50%) loops seamlessly.
   Per-item margin (not flex gap) keeps the two halves exactly equal-width. */
.carriers { margin-top: clamp(2.75rem, 5vw, 4.25rem); }
.carriers__label { text-align: center; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.carriers__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.carriers__track { display: flex; align-items: center; width: max-content; list-style: none; margin: 0; padding: 0.4rem 0; animation: kd-marquee 32s linear infinite; }
.carrier { position: relative; flex: none; width: clamp(108px, 11vw, 146px); height: 42px; margin-right: clamp(2.5rem, 6vw, 5rem); }
.carrier__mark { display: block; width: 100%; height: 100%; background: var(--forest); opacity: 0.8;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  transition: opacity .3s var(--ease); }
.carrier__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s var(--ease); }
.carrier:hover .carrier__mark { opacity: 0; }
.carrier:hover .carrier__img { opacity: 1; }
/* Auto-scroll always on (intentionally not gated on prefers-reduced-motion, per
   the design ask). Pauses on hover so a logo can be moused for its full color. */
.carriers__viewport:hover .carriers__track { animation-play-state: paused; }
@keyframes kd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----------------------------------------------------------------- editorial feature rows */
.featrow { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); }
.feat { display: grid; grid-template-columns: 0.35fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding-bottom: clamp(1.6rem, 3.5vw, 2.6rem); border-bottom: 1.5px dashed var(--tan); }
.feat:last-child { border-bottom: none; padding-bottom: 0; }
.feat__idx { font-family: var(--hand); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--brown); line-height: 0.9; }
.feat h3 { font-size: var(--step-2); }
.feat p { color: var(--muted); margin-top: 0.6rem; max-width: 56ch; }
@media (max-width: 720px) { .feat { grid-template-columns: 1fr; gap: 0.4rem; } }
/* featrow nested inside a split column: compact the index so text isn't cramped */
.split__body .featrow { gap: clamp(1.1rem, 2.2vw, 1.6rem); }
.split__body .feat { grid-template-columns: auto 1fr; gap: 0.9rem; padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
.split__body .feat__idx { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; }
.split__body .feat h3 { font-size: var(--step-1); }

/* ----------------------------------------------------------------- split media + text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
.split--reverse .split__media { order: 2; }
/* media fills its column so a short photo never floats beside long copy */
.split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); height: 100%; min-height: 340px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.split__body { align-self: center; }
.split__body h2 { font-size: var(--step-3); margin-top: 0.4rem; }
.split__body p { color: var(--muted); margin-top: 1rem; }
.split__body .btn, .split__body .link-arw { margin-top: 1.6rem; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } .split__media { height: auto; min-height: 0; aspect-ratio: 4/5; } .split__media img { object-position: center top; } }

/* ----------------------------------------------------------------- the cow teaser */
.cow-teaser { background: var(--sage); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.cow-teaser__mark { width: clamp(120px, 17vw, 190px); aspect-ratio: 1; background: url('../img/logo/cow-forest.svg') center/contain no-repeat; }
.cow-teaser h2 { font-size: var(--step-2); color: var(--pine); margin-top: 0.4rem; }
.cow-teaser p { color: var(--soft); margin-top: 0.8rem; max-width: 52ch; }
.cow-teaser .link-arw { margin-top: 1.2rem; }
@media (max-width: 700px) { .cow-teaser { grid-template-columns: 1fr; } .cow-teaser__mark { margin: 0 auto; } }

/* trait map (about) */
.traits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.trait { background: var(--warmwhite); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.trait dt { font-family: var(--serif); font-style: italic; color: var(--brown); font-size: 1.1rem; }
.trait dd { margin-top: 0.35rem; color: var(--ink); }
@media (max-width: 620px) { .traits { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- CTA (warm sage panel, not a dark band) */
.cta-band { }
.cta-panel { background: var(--sage); border-radius: var(--radius-lg); padding: clamp(2.2rem, 5vw, 4rem); position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cta-panel__cow { position: absolute; right: -2%; bottom: -16%; width: clamp(150px, 22vw, 270px); aspect-ratio: 1; opacity: 0.55; z-index: 0; }
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { font-size: var(--step-3); color: var(--pine); max-width: 18ch; }
.cta-panel p { color: var(--soft); margin-top: 0.9rem; max-width: 44ch; }
.cta-panel__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.cta-panel__phone { font-family: var(--hand); font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); color: var(--forest); line-height: 0.9; }
@media (max-width: 820px) { .cta-panel { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- forms */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-aside h2 { font-size: var(--step-2); }
.contact-aside .big-phone { display: block; font-family: var(--hand); font-size: clamp(2.6rem, 2rem + 3vw, 3.8rem); color: var(--forest); margin-top: 0.3rem; line-height: 0.9; }
.contact-aside dl { margin-top: 2rem; display: grid; gap: 1.3rem; }
.contact-aside dt { font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brown); }
.contact-aside dd { margin-top: 0.25rem; color: var(--ink); }

.form { background: var(--warmwhite); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.6rem); box-shadow: var(--shadow-soft); }
.field { display: grid; gap: 0.45rem; margin-bottom: 1.2rem; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea { font: inherit; font-size: 0.98rem; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 0.85em 1em; width: 100%; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(42,107,56,.14); }
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }
.form__note { font-size: 0.85rem; color: var(--muted); margin-top: 0.8rem; font-family: var(--hand); font-size: 1.25rem; }

/* ----------------------------------------------------------------- footer (the single warm anchor) */
.site-footer { background: var(--forest); color: #DCEBD2; padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; position: relative; overflow: hidden; }
.site-footer .cowchar { position: absolute; right: -3%; top: -10%; width: clamp(160px, 20vw, 260px); aspect-ratio: 1; opacity: 0.12; background-image: url('../img/logo/cow-cream.svg'); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(1.5rem, 4vw, 3rem); position: relative; z-index: 1; }
.footer-brand img { height: 54px; }
.footer-brand p { margin-top: 1rem; max-width: 30ch; color: #BBD2AE; }
.footer-brand .sig { margin-top: 1.2rem; }
.footer-col h4 { font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-bright); margin-bottom: 1rem; }
.footer-col a, .footer-col p { display: block; color: #D2E4C7; padding-block: 0.3rem; transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--cream); }
.footer-phone { font-family: var(--hand); font-size: 1.9rem; color: var(--cream) !important; }
.footer-bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; color: #9DB492; position: relative; z-index: 1; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- reveal motion */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  [data-reveal].in { opacity: 1; transform: none; }
  [data-reveal][data-delay="1"] { transition-delay: .08s; }
  [data-reveal][data-delay="2"] { transition-delay: .16s; }
  [data-reveal][data-delay="3"] { transition-delay: .24s; }
}

/* ----------------------------------------------------------------- responsive */
@media (max-width: 940px) {
  .nav, .header-cta .btn, .header-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: contents; }
  .site-header__inner { grid-template-columns: 1fr auto; }
  .hero__inner { grid-template-columns: 1fr; }
  .polaroid { max-width: 480px; margin-inline: auto; }
  .hero__sigwrap { justify-content: center; }
}