/* ============================================================================
   POPPELL INSURANCE AGENCY
   Palette sampled pixel-by-pixel from the client's banner and business card.
   ==========================================================================*/

:root{
  --paper:      #F5F1EC;
  --paper-lift: #FAF7F3;
  --sage:       #697061;
  --sage-deep:  #4E5548;
  --sage-soft:  #8C9384;
  --ink:        #2F352B;
  --clay:       #A97B52;
  --clay-light: #C09A76;
  --blush:      #E9DACB;
  --hair:       #DED5C8;

  --amber:      #B45309;   /* NEEDS markers only — never decorative */

  --disp: 'Bodoni Moda', Georgia, serif;
  --body: 'Jost', system-ui, -apple-system, sans-serif;
  --script: 'Parisienne', cursive;

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* The header is fixed, so an anchor jump would land content underneath it.
   Scoped to sections — applying it to every element with an id is broader
   than needed and affects things it should not. */
section[id], article[id], aside[id]{ scroll-margin-top:88px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

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

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:.75rem 1.25rem; }
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:2px; }

/* ─────────────────────────────────────────────────── TYPE */

.h2{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3.4rem);
  line-height:1.05; letter-spacing:-.018em;
  margin:.4rem 0 1.1rem;
}

.eyebrow{
  font-weight:500; font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--sage); margin:0;
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow .star{ color:var(--clay); font-size:.85em; }

.sec__lede{ max-width:50ch; color:var(--sage-deep); font-size:1.06rem; margin:0; }

.prose p{ margin:0 0 1.05rem; color:var(--sage-deep); }
.prose p:last-child{ margin-bottom:0; }

/* ─────────────────────────────────────────────────── NEEDS MARKER */

.needs{
  display:inline-block;
  font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber);
  border:1px dashed var(--amber); border-radius:3px;
  padding:.3rem .6rem; background:rgba(180,83,9,.05);
}

/* ─────────────────────────────────────────────────── HEADER */

.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(245,241,236,0);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.hdr.is-stuck{
  background:rgba(245,241,236,.93);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--hair);
}

.hdr__in{
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; gap:2rem; padding:1.1rem 0;
}

.hdr__mark{ text-decoration:none; line-height:1; margin-right:auto; }
.hdr__name{
  display:block; font-family:var(--disp); font-weight:700;
  font-size:1.35rem; letter-spacing:.14em; text-transform:uppercase;
}
.hdr__sub{
  display:block; font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--sage); margin-top:.28rem;
}

.hdr__nav{ display:flex; gap:1.6rem; }
.hdr__nav a{
  text-decoration:none; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage-deep); position:relative; padding-block:.3rem;
}
.hdr__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--clay); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.hdr__nav a:hover::after{ transform:scaleX(1); }

.hdr__cta{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  background:var(--sage); color:var(--paper-lift);
  font-size:.8rem; letter-spacing:.06em;
  padding:.6rem 1.1rem; border-radius:999px;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.hdr__cta:hover{ background:var(--sage-deep); transform:translateY(-1px); }
.hdr__cta svg{ width:15px; height:15px; fill:currentColor; }

.hdr__burger{ display:none; background:none; border:0; cursor:pointer;
  width:40px; height:40px; padding:10px; }
.hdr__burger span{ display:block; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease); }
.hdr__burger span+span{ margin-top:6px; }
.hdr__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.mnav{ display:none; flex-direction:column; background:var(--paper-lift);
  border-top:1px solid var(--hair); padding:.5rem 1.25rem 1.25rem; }
.mnav a{ text-decoration:none; padding:.9rem 0; border-bottom:1px solid var(--hair);
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage-deep); }
.mnav a:last-child{ border-bottom:0; color:var(--clay); }
.mnav.is-open{ display:flex; }

/* ─────────────────────────────────────────────────── HERO */

.hero{ padding-top:5.5rem; }

.hero__art{ overflow:hidden; position:relative; }

/* Plate and sway share one box so parallax moves the scene as a unit and
   the sway rides on top of it. */
.hero__scene{ position:relative; z-index:1; will-change:transform; }
.hero__scene picture{ display:block; }

/* The seam sits at y=470 of an 809px-tall image → 58.1%. skewX about that
   line means points ON it never move: dx grows linearly with height above
   the origin and is exactly 0 at the origin. That is why the cut is
   invisible, and why this is a shear and not a translate. */
.hero__sway{
  position:absolute; inset:0;
  background:url("/assets/brand/hero-sway.webp") no-repeat 0 0 / 100% 100%;
  transform-origin:50% 58.1%;
  animation:windSway 11s ease-in-out infinite;
  will-change:transform;
  pointer-events:none;
}
@keyframes windSway{
  0%   { transform:skewX(-0.28deg); }
  38%  { transform:skewX(0.55deg); }
  64%  { transform:skewX(0.12deg); }
  100% { transform:skewX(-0.28deg); }
}
.hero__art img{
  width:100%; transform:scale(1.06); opacity:0;
  animation:heroSettle 1.6s .15s var(--ease-out) forwards;
  will-change:transform,opacity;
}

/* ── SKY (behind the artwork) ─────────────────────────────────────── */
.hero__sky{
  position:absolute; inset:-8% -6%; z-index:0;
  pointer-events:none;
  will-change:transform;
}
.hero__sky svg{ width:100%; height:100%; display:block; }

/* Her banner already contains a sun. This is the glow around it. */
.sky__glow{
  transform-origin:center;
  animation:glowBreathe 11s ease-in-out infinite;
}
@keyframes glowBreathe{
  0%,100%{ opacity:.45; transform:scale(1); }
  50%    { opacity:.75; transform:scale(1.05); }
}

/* Birds cross the sky on long loops. Her banner has birds in it already —
   these are drawn to match and actually fly. */
.bird{ fill:none; stroke:var(--sage-soft); stroke-width:2.2; stroke-linecap:round; opacity:.65; }
.bird-g{ animation:flyAcross linear infinite; }
@keyframes flyAcross{
  from{ transform:translate3d(-14%,0,0); }
  to  { transform:translate3d(118%,0,0); }
}
.bird-flap{ animation:flap 1.1s ease-in-out infinite; transform-origin:center; }
@keyframes flap{
  0%,100%{ transform:scaleY(1); }
  50%    { transform:scaleY(.45); }
}

/* ── MOTES (in front) ─────────────────────────────────────────────── */
.hero__motes{
  position:absolute; inset:0; z-index:2;
  pointer-events:none; overflow:hidden;
  will-change:transform;
}
.mote{
  position:absolute; border-radius:50%;
  background:var(--clay-light); opacity:0;
  animation:drift linear infinite;
}
@keyframes drift{
  0%  { opacity:0; transform:translate3d(0,0,0); }
  12% { opacity:.5; }
  80% { opacity:.35; }
  100%{ opacity:0; transform:translate3d(38px,-90px,0); }
}
@keyframes heroSettle{ to{ transform:scale(1); opacity:1; } }

.hero__body{
  width:min(100% - 2.5rem, var(--wrap));
  margin:clamp(2.5rem,5vw,4.5rem) auto 0;
  max-width:900px; text-align:center;
}

.hero__h1{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(2.3rem,5.6vw,4.3rem);
  line-height:1.04; letter-spacing:-.022em;
  margin:0 0 1.4rem;
}
.hero__h1 em{ font-style:italic; font-weight:400; color:var(--clay); }

/* word-by-word mask reveal */
.word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.word > span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .9s var(--ease-out);
}
.is-split-in .word > span{ transform:translateY(0); }

.hero__lede{ max-width:56ch; margin:0 auto 2.2rem; color:var(--sage-deep); font-size:1.08rem; }
.hero__acts{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* ─────────────────────────────────────────────────── BUTTONS */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 1.9rem; text-decoration:none;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  border-radius:999px; position:relative; overflow:hidden;
  transition:transform .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn span, .btn{ position:relative; }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid::before{
  content:''; position:absolute; inset:0; background:var(--clay);
  transform:translateY(101%); transition:transform .45s var(--ease-out); z-index:0;
}
.btn--solid:hover::before{ transform:translateY(0); }
.btn--solid > *{ position:relative; z-index:1; }
.btn--solid:hover{ transform:translateY(-2px); }
.btn--ghost{ border:1px solid var(--hair); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--clay); color:var(--clay); transform:translateY(-2px); }

/* ─────────────────────────────────────────────────── MARQUEE
   Her creed, set running. Straight off the bottom rule of her card. */

.marquee{
  margin-top:clamp(2.5rem,6vw,4.5rem);
  background:var(--sage);
  color:var(--paper-lift);
  overflow:hidden;
  padding:.95rem 0;
  --speed:46s;
}
.marquee__track{
  display:flex; width:max-content;
  animation:slide var(--speed) linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }

.marquee__item{
  display:inline-flex; align-items:center; gap:1.6rem;
  padding-right:1.6rem; white-space:nowrap;
  font-size:.76rem; letter-spacing:.28em; text-transform:uppercase;
}
.marquee__item i{ font-style:normal; color:var(--blush); font-size:.7em; }

/* ─────────────────────────────────────────────────── SECTIONS */

.sec{ padding:clamp(4rem,8vw,7rem) 0 0; }
.sec--contact{ padding-bottom:clamp(4rem,8vw,6rem); }

.sec__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:1rem clamp(2rem,6vw,5rem);
  align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.sec__head .eyebrow{ grid-column:1/-1; }
.sec__head .h2{ margin-bottom:0; }
.sec__head .sec__lede{ padding-bottom:.4rem; }

/* ─────────────────────────────────────────────────── COVERAGE ROWS
   Editorial rows rather than a card grid. The icon draws itself when the
   row is entered, so the artwork is a response to the reader, not decor. */

.rows{ border-top:1px solid var(--hair); }

.row{
  display:grid;
  grid-template-columns:92px minmax(0,.9fr) minmax(0,1.35fr);
  gap:0 clamp(1.25rem,3vw,2.5rem);
  align-items:center;
  padding:clamp(1.6rem,3vw,2.3rem) 0;
  border-bottom:1px solid var(--hair);
  position:relative;
  transition:color .45s var(--ease);
}
.row::before{
  content:''; position:absolute; inset:0 -1.25rem;
  background:var(--paper-lift);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
  z-index:0;
}
.row:hover::before{ transform:scaleX(1); }
.row > *{ position:relative; z-index:1; }

.row::after{
  content:''; position:absolute; left:-1.25rem; top:0; bottom:0; width:2px;
  background:var(--clay); transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease-out); z-index:1;
}
.row:hover::after{ transform:scaleY(1); }

.row__icon svg{ width:72px; height:auto; overflow:visible; }
.row__icon svg *{
  fill:none; stroke:var(--sage-soft);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .45s var(--ease);
}
.row:hover .row__icon svg *{ stroke:var(--clay); }
.row.is-drawing .row__icon svg *{ animation:iconDraw 1.1s var(--ease-out) forwards; }
@keyframes iconDraw{
  from{ stroke-dashoffset:var(--len,300); }
  to{ stroke-dashoffset:0; }
}

.row__label{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(1.5rem,2.9vw,2.2rem);
  letter-spacing:.02em; margin:0;
  transition:transform .5s var(--ease-out);
}
.row:hover .row__label{ transform:translateX(6px); }

.row__lede{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clay); margin:.3rem 0 0;
}
.row__body{ margin:0; color:var(--sage-deep); font-size:.97rem; }

/* ─────────────────────────────────────────────────── HERO REACH LINE */

.hero__reach{
  max-width:46ch; margin:-.6rem auto 2.2rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--clay);
}

/* ─────────────────────────────────────────────────── HOW WE MEET */

.howmeet{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:-1.6rem 0 2.4rem;
  padding:.55rem 1.1rem;
  border:1px solid var(--hair); border-radius:999px;
  background:var(--paper-lift);
  font-size:.8rem; color:var(--sage-deep);
}
.howmeet .star{ color:var(--clay); font-size:.8em; }

/* ─────────────────────────────────────────────────── EXISTING CUSTOMERS
   Quieter than the quote CTA on purpose. Existing customers and new
   prospects want opposite things and must not compete for one button. */

.svc{
  padding:clamp(3rem,6vw,4.5rem) 0;
  margin-top:clamp(3.5rem,7vw,5.5rem);
  border-top:1px solid var(--hair);
  background:linear-gradient(180deg, var(--paper-lift), var(--paper));
}
.svc__head{ margin-bottom:clamp(1.75rem,4vw,2.5rem); }
.svc__head .h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:0; }

/* Explicit column counts, not auto-fit. Six tiles divide evenly into 3 and
   2; auto-fit would leave orphan cells, and with a gap-and-background grid
   those empty cells render as a visible filled block. Borders live on the
   items so a partial row can never show phantom cells. */
.svc__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hair);
  border-left:1px solid var(--hair);
}
.svc__item{
  background:var(--paper);
  padding:1.4rem 1.3rem;
  display:flex; flex-direction:column; gap:.4rem;
  text-decoration:none; color:inherit;
  min-height:104px;
  border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  transition:background .4s var(--ease);
}
a.svc__item:hover{ background:var(--paper-lift); }
a.svc__item:hover .svc__label{ color:var(--clay); }

.svc__label{
  font-family:var(--disp); font-size:1.05rem; font-weight:600;
  transition:color .35s var(--ease);
}
.svc__meta{ font-size:.82rem; color:var(--sage); display:flex; gap:.9rem; flex-wrap:wrap; }
.svc__meta a{ color:var(--clay); text-decoration:none; border-bottom:1px solid transparent; }
.svc__meta a:hover{ border-bottom-color:var(--clay); }
.svc__needs{ margin-top:.35rem; }

/* ─────────────────────────────────────────────────── REVIEWS (stub)
   Styled now so enabling the flag needs no CSS work later. */

.revs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1.25rem,3vw,2rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.rev{ margin:0; padding:1.75rem 1.5rem; border:1px solid var(--hair); background:var(--paper-lift); }
.rev__q{ margin:0 0 1rem; font-family:var(--disp); font-size:1.05rem; color:var(--ink); }
.rev__q::before{ content:'\201C'; color:var(--clay); }
.rev__q::after{ content:'\201D'; color:var(--clay); }
.rev__a{ font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage); }
.rev__c{ display:block; letter-spacing:.06em; text-transform:none; color:var(--sage-soft); margin-top:.3rem; }

/* ─────────────────────────────────────────────────── PULL QUOTE
   Used by the life-insurance statement once it is approved. */

.pull{ padding:clamp(3rem,6vw,5rem) 0; text-align:center; }
.pull__lead{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.2;
  margin:0 0 1.2rem;
}
.pull__body{ margin:0 auto; max-width:52ch; color:var(--sage-deep); }
.pull__who{
  margin:1.4rem 0 0; font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage);
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.pull__who .star{ color:var(--clay); font-size:.8em; }
.pull{ background:var(--paper-lift); border-block:1px solid var(--hair); }

/* claims tile — the "call us first" one is the deliberate outlier */
.svc__item--flag{ background:var(--paper-lift); }
.svc__fine{ font-size:.76rem; color:var(--sage-soft); margin-top:.15rem; }

/* ─────────────────────────────────────────────────── SPECIALTY BAND
   A sage field breaks the cream run and gives the page a second dark beat
   between the marquee and the footer, so the specialty coverage reads as a
   different order of thing rather than four more rows. */

.band{
  background:var(--sage-deep);
  color:var(--paper);
  padding:clamp(3.5rem,7vw,6rem) 0;
  margin-top:clamp(4rem,8vw,7rem);
}
.eyebrow--inv{ color:var(--blush); }
.eyebrow--inv .star{ color:var(--clay-light); }
.h2--inv{ color:var(--paper); margin-bottom:clamp(2.5rem,5vw,3.5rem); }

/* Six tiles, 3 x 2. auto-fit gave 5 + 1 orphan at desktop, and an orphan in
   a gap-and-background grid renders as a visible empty block. Explicit
   columns, and the gap is real space so each tile can lift independently
   without tearing a shared hairline. */
.spec{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.7rem,1.4vw,1.1rem);
  perspective:1000px;
}
.spec__item{
  background:rgba(245,241,236,.055);
  border:1px solid rgba(245,241,236,.16);
  border-radius:14px;
  padding:1.7rem 1.5rem 1.5rem;
  transform:translateZ(0);
  transition:transform .42s var(--ease-out),
             background .42s var(--ease),
             border-color .42s var(--ease),
             box-shadow .42s var(--ease-out);
}
/* Pops off the page: lifts, grows a touch, and drops a real shadow onto the
   band behind it. */
.spec__item:hover,
.spec__item:focus-visible{
  transform:translateY(-10px) scale(1.025);
  background:rgba(245,241,236,.11);
  border-color:var(--clay-light);
  box-shadow:0 26px 44px -20px rgba(0,0,0,.55);
}
.spec__item:active{ transform:translateY(-4px) scale(1.01); }
.spec__label{
  font-family:var(--disp); font-weight:600;
  font-size:1.4rem; letter-spacing:.01em;
  margin:0 0 .8rem; color:var(--paper);
  transition:color .42s var(--ease);
}
.spec__item:hover .spec__label{ color:var(--blush); }
.spec__body{ margin:0; font-size:.95rem; color:rgba(245,241,236,.78); }

/* ─────────────────────────────────────────────────── TEAM
   The arch again, at a third the size. Repeating the shape rather than
   inventing a second frame keeps the page reading as one object. */

.crew{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1.75rem,4vw,3rem);
}

.mate{ text-align:center; }

.mate__arch{
  aspect-ratio:1/1.14;
  border-radius:999px 999px 6px 6px;
  overflow:hidden;
  background:var(--blush);
  border:1px solid var(--hair);
  display:grid; place-items:center;
  margin-bottom:1.2rem;
  transition:transform .7s var(--ease-out), border-color .7s var(--ease-out);
}
.mate:hover .mate__arch,
.mate:focus-within .mate__arch{
  transform:translateY(-7px);
  border-color:var(--clay-light);
}
.mate__name{ transition:color .45s var(--ease); }
.mate:hover .mate__name{ color:var(--clay); }
.mate__arch img{
  width:100%; height:100%;
  /* Cut to exactly this box's aspect with matched head scale, so cover has
     nothing to crop. Do not change the box aspect anywhere — see below. */
  object-fit:cover; object-position:50% 50%;
  transform:scale(1);
  transform-origin:50% 30%;
  transition:transform .7s var(--ease-out);
  will-change:transform;
}
.mate:hover .mate__arch img,
.mate:focus-within .mate__arch img{ transform:scale(1.11); }
.mate__ph{ padding:1rem; }

.mate__name{
  font-family:var(--disp); font-weight:600;
  font-size:1.3rem; margin:0 0 .25rem;
}
.mate__title{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage); margin:0 0 1rem;
}
.mate__tel{
  display:inline-block;
  font-family:var(--disp); font-size:1.3rem;
  text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--hair);
  padding-bottom:2px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.mate__tel:hover{ color:var(--clay); border-bottom-color:var(--clay); }
.mate__mail{
  display:block; margin-top:.7rem;
  font-size:.78rem; color:var(--sage-deep);
  text-decoration:none; word-break:break-all;
  transition:color .3s var(--ease);
}
.mate__mail:hover{ color:var(--clay); }

.contact__note{
  margin:1.1rem 0 0; font-size:.9rem; color:var(--sage-deep);
}
.contact__note a{ color:var(--clay); }

/* ─────────────────────────────────────────────────── RIDGELINE
   Signature. Her logo's mountains, flanked by the rule/star/rule rhythm
   from her business card. Draws itself as each section closes. */

.ridge{
  width:min(100% - 2.5rem, var(--wrap));
  margin:clamp(3.5rem,7vw,5.5rem) auto 0;
  display:flex; align-items:center; gap:clamp(.9rem,2vw,1.6rem);
}
.ridge__rule{ flex:1 1 auto; height:1px; background:var(--hair);
  transform:scaleX(0); transition:transform 1.1s var(--ease-out); }
.ridge__rule:first-child{ transform-origin:right; }
.ridge__rule:last-child{ transform-origin:left; }
.ridge.is-drawn .ridge__rule{ transform:scaleX(1); }

.ridge__star{ flex:0 0 auto; color:var(--clay); font-size:.7rem; line-height:1;
  opacity:0; transition:opacity .7s .8s var(--ease); }
.ridge.is-drawn .ridge__star{ opacity:1; }

.ridge__peaks{ flex:0 0 auto; width:clamp(180px,26vw,286px); height:auto; overflow:visible; }
.ridge__peaks path{ fill:none; stroke:var(--sage); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.ridge__peaks .tree{ stroke:var(--sage-soft); stroke-width:1.3; }
.ridge__peaks .glyph{ fill:var(--clay); stroke:none; opacity:0; }

.ridge__peaks path:not(.glyph){
  stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400);
}
.ridge.is-drawn .ridge__peaks path:not(.glyph){ animation:draw 1.5s var(--ease-out) forwards; }
.ridge.is-drawn .ridge__peaks path:nth-child(2){ animation-delay:.14s; }
.ridge.is-drawn .ridge__peaks .tree{ animation-delay:.5s; animation-duration:.7s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.ridge.is-drawn .ridge__peaks .glyph{ animation:fadeIn .7s .95s var(--ease) forwards; }
@keyframes fadeIn{ to{ opacity:1; } }

/* ─────────────────────────────────────────────────── ABOUT / ARCH
   The portrait sits in a southwestern arch — the doorway shape that runs
   through adobe and mission architecture across the Front Range — with the
   sun from her banner turning slowly behind it. Not a photo in a box. */

.about{
  display:grid;
  grid-template-columns:minmax(0,.66fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
}

.arch{ margin:0; position:relative; }

.arch__sun{
  position:absolute;
  width:86%; aspect-ratio:1; left:-26%; top:-9%;
  z-index:0; pointer-events:none;
}
.arch__sun svg{ width:100%; height:100%; animation:turn 90s linear infinite; }
.arch__sun circle,
.arch__sun path{ fill:none; stroke:var(--blush); stroke-width:1.2; }
.arch__sun .disc{ fill:var(--blush); stroke:none; opacity:.5; }
@keyframes turn{ to{ transform:rotate(360deg); } }

.arch__frame{
  position:relative; z-index:1;
  aspect-ratio:1/1.16;
  border-radius:999px 999px 6px 6px;
  overflow:hidden;
  background:var(--blush);
  border:1px solid var(--hair);
  /* the arch reveals upward from its own base on scroll-in */
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.3s var(--ease-out),
             transform .8s var(--ease-out),
             border-color .8s var(--ease-out);
}
.reveal.is-in .arch__frame,
.arch.is-in .arch__frame{ clip-path:inset(0 0 0 0); }

.arch__img{ width:100%; height:100%; }
.arch__img img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 26%;
  transform:scale(1);
  transform-origin:50% 30%;
  transition:transform .8s var(--ease-out);
  will-change:transform;
}
.arch:hover .arch__img img,
.arch:focus-within .arch__img img{ transform:scale(1.12); }

/* The frame itself lifts a little so the whole thing reads as coming
   toward you, not just the photo growing inside a static box. */
.arch__frame{ transition:clip-path 1.3s var(--ease-out),
                          transform .8s var(--ease-out),
                          border-color .8s var(--ease-out); }
.arch:hover .arch__frame,
.arch:focus-within .arch__frame{
  transform:translateY(-8px);
  border-color:var(--clay-light);
}
.arch__img .needs{ margin:2rem; }

.arch__cap{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage); margin:1.1rem 0 0; position:relative; z-index:1;
}
.arch__cap .dot{ color:var(--clay); font-style:normal; }

/* the script signature writes itself left to right.
   NOTE: the clip lives on the inner span, never the observed <p>. A fully
   clipped element reports zero intersection area, so putting the clip on the
   observed node deadlocks — it can never trigger the class that unclips it. */
.signature{
  font-family:var(--script);
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  color:var(--clay);
  margin:1.8rem 0 0; line-height:1.25;
}
.signature span{
  display:inline-block;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.5s .25s var(--ease-out);
}
.signature.is-in span{ clip-path:inset(0 -.1em 0 0); }

.creed{
  list-style:none; margin:clamp(3rem,6vw,4.5rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:var(--hair);
  border-block:1px solid var(--hair);
}
.creed li{
  background:var(--paper);
  padding:1.5rem 1.5rem 1.5rem 2.6rem;
  position:relative;
  font-family:var(--disp); font-size:1.12rem;
  color:var(--sage-deep);
  transition:background .4s var(--ease);
}
.creed li:hover{ background:var(--paper-lift); }
.creed li::before{
  content:'\2726'; position:absolute; left:1.4rem; top:1.7rem;
  color:var(--clay); font-size:.7rem; font-family:var(--body);
}

/* ─────────────────────────────────────────────────── QUOTE FORM */

.formwrap{
  background:var(--paper-lift); border:1px solid var(--hair);
  padding:clamp(1.25rem,3vw,2rem); min-height:220px;
  display:grid; place-items:center;
}
.formwrap:has(iframe){ padding:0; display:block; min-height:0; position:relative; }
.formwrap iframe{ width:100%; border:0; display:block; min-height:600px; }
.formwrap.is-loading iframe{ opacity:0; }
.formwrap__wait{
  display:none; position:absolute; inset:0;
  align-items:center; justify-content:center; margin:0;
  color:var(--sage); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
}
.formwrap.is-loading .formwrap__wait{ display:flex; }

/* Slow / failed embed messaging. Both sit around the iframe; neither
   replaces it, so a late-arriving form still renders. */
.formwrap__slow,
.formwrap__alt{
  margin:0; padding:.9rem 1.1rem;
  font-size:.85rem; color:var(--sage-deep);
  background:var(--paper-lift);
  border-bottom:1px solid var(--hair);
}
.formwrap__alt{
  border-bottom:0; border-top:1px solid var(--hair);
  text-align:center; color:var(--sage);
  font-size:.8rem;
}
.formwrap__slow a, .formwrap__alt a{ color:var(--clay); }
.formwrap .ph{ text-align:center; }
.formwrap .ph p{ margin:.9rem 0 0; color:var(--sage); font-size:.9rem; }
.formwrap .ph a{ color:var(--clay); }

/* ─────────────────────────────────────────────────── CONTACT */

.contact{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  border-top:1px solid var(--hair);
  padding-top:clamp(2.5rem,5vw,4rem);
  align-items:start;
}
.contact__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2.5rem 2rem; }

.lbl{ font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--clay); margin:0 0 .8rem; }

.phone{
  display:block; font-family:var(--disp); font-weight:600;
  font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.05;
  letter-spacing:-.01em; text-decoration:none;
  transition:color .35s var(--ease);
}
.phone:hover{ color:var(--clay); }
.mail{
  display:inline-block; margin-top:.9rem; font-size:.95rem;
  color:var(--sage-deep); text-decoration:none;
  border-bottom:1px solid var(--hair); word-break:break-all;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.mail:hover{ color:var(--clay); border-bottom-color:var(--clay); }

address{ font-style:normal; color:var(--sage-deep); font-size:.95rem; }
.contact__area{ margin:0; color:var(--sage-deep); font-size:.95rem; max-width:34ch; }
[data-hours] div{ color:var(--sage-deep); font-size:.95rem; padding:.15rem 0; }
[data-hours] div + div{ border-top:1px solid var(--hair); margin-top:.5rem; padding-top:.65rem; }
address a{ color:var(--clay); text-decoration:none; border-bottom:1px solid var(--hair); }

/* ─────────────────────────────────────────────────── FOOTER */

.ftr{ background:var(--sage-deep); color:var(--paper);
  padding:clamp(3rem,6vw,4.5rem) 0 2.5rem; }
.ftr__top{
  display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between; align-items:flex-end;
  padding-bottom:2rem; border-bottom:1px solid rgba(245,241,236,.18);
}
.ftr__mark{ font-family:var(--disp); font-weight:700; font-size:1.6rem;
  letter-spacing:.14em; text-transform:uppercase; margin:0; }
.ftr__mark em{ display:block; font-style:normal; font-weight:400;
  font-size:.58rem; letter-spacing:.32em; margin-top:.4rem; color:var(--blush); }
.ftr__script{ font-family:var(--script); font-size:1.7rem; color:var(--blush); margin:.9rem 0 0; }
.ftr__meta{ font-size:.8rem; color:var(--blush); text-align:right; }
.ftr__meta p{ margin:.25rem 0; }
.ftr__meta img{ max-height:34px; margin-top:.9rem; margin-left:auto; }

.ftr__legal{ padding:2rem 0; font-size:.68rem; line-height:1.6;
  color:rgba(245,241,236,.6); max-width:92ch; }
.ftr__legal p{ margin:0 0 .75rem; }

.ftr__copy{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,241,236,.45); margin:0; }

/* ─────────────────────────────────────────────────── REVEALS */

.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.1s; }
.reveal[data-d="2"]{ transition-delay:.2s; }
.reveal[data-d="3"]{ transition-delay:.3s; }
.reveal[data-d="4"]{ transition-delay:.4s; }

/* Touch targets: inline links get real hit area on coarse pointers
   without changing how they look on desktop. */
@media (pointer:coarse){
  .hdr__nav a, .mnav a, .mail, address a,
  .mate__tel, .mate__mail, .contact__note a{ padding-block:.7rem; display:inline-block; }
  .hdr__mark{ padding-block:.35rem; }
}

/* ─────────────────────────────────────────────────── RESPONSIVE */

@media (max-width:900px){
  .spec{ grid-template-columns:repeat(2,1fr); }
  .svc__grid{ grid-template-columns:repeat(2,1fr); }
  .crew{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.5rem; }
}

/* One card per row on phones, but cap the arch so three people don't turn
   into three screens of scrolling. */
@media (max-width:620px){
  .spec{ grid-template-columns:1fr; }
  .svc__grid{ grid-template-columns:1fr; }
  .mate__arch{ max-width:228px; margin-inline:auto; margin-bottom:1rem; }
  .mate__arch{ aspect-ratio:1/1.14; }
}

@media (max-width:980px){
  .about{ grid-template-columns:1fr; }
  .arch{ max-width:340px; }
  .sec__head{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .hdr__nav{ display:none; }
  .hdr__burger{ display:block; }
  .hdr__cta span{ display:none; }
  .hdr__cta{ padding:.6rem; }
  .hero{ padding-top:4.5rem; }

  /* Her banner is a wide letterbox. At phone width the wordmark shrinks to
     nothing, so zoom in and crop the flanking artwork.

     ZOOM THE SCENE, NOT THE IMAGE. The sway layer is sized to .hero__scene;
     scaling only the <img> left the plate at 554px and the cactus at 391px —
     the same artwork at two different scales, which is exactly the seam the
     shear was designed to avoid.

     -13.5% rather than the -21% that would simply centre the scene: her
     wordmark sits 5.3% left of the image's own centre (measured, not
     guessed), so a centred crop pushes it off the right edge. */
  /* NO ZOOM. Any zoom on a 2.4:1 banner has to eat the sides, and the
     sides are her four coverage icons and the creed line — cropping those
     chops BUSINESS in half, which reads as broken rather than as a crop.
     Full width keeps the wordmark ~175px across, which is perfectly legible
     on a phone. */
  .hero__art{ overflow:hidden; }
  .hero__scene{ width:100%; margin-left:0; }
  .hero__art img{ width:100%; max-width:none; }

  /* Tighter vertical rhythm — the banner is short at this width and the copy
     was sitting a long way from it. */
  .hero__body{ margin-top:1.6rem; }
  .hero__h1{ font-size:clamp(1.85rem,7.4vw,2.3rem); line-height:1.08; margin-bottom:1rem; }
  .hero__lede{ font-size:1rem; margin-bottom:1.1rem; }
  .hero__reach{ margin:-.2rem auto 1.6rem; font-size:.7rem; line-height:1.6; }
  /* Two pills of different widths stacked on top of each other looks like an
     accident. Same width, full bleed inside the copy column. */
  .hero__acts{
    flex-direction:column; align-items:stretch;
    gap:.65rem; padding-inline:clamp(1rem,8vw,3rem);
  }
  .hero__acts .btn{ width:100%; }

  /* Rows stack: icon and label on one line, copy beneath. */
  .row{ grid-template-columns:56px minmax(0,1fr); gap:.2rem 1rem; }
  .row__icon svg{ width:44px; }
  .row__copy{ grid-column:1/-1; margin-top:.7rem; }
  .row::before, .row::after{ inset-inline:-1rem; }
  .row::after{ left:-1rem; }

  .ftr__top{ flex-direction:column; align-items:flex-start; }
  .ftr__meta{ text-align:left; }
  .ftr__meta img{ margin-left:0; }
}

/* ─────────────────────────────────────────────────── REDUCED MOTION */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__art img{ opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; }
  .word > span{ transform:none; }
  .ridge__peaks path{ stroke-dashoffset:0; }
  .ridge__peaks .glyph, .ridge__star{ opacity:1; }
  .ridge__rule{ transform:none; }
  .arch__frame{ clip-path:none; }

  /* Hover transforms need selectors that actually outrank the :hover
     rules. A plain `.arch__img img{transform:none}` loses on specificity
     and silently does nothing — it looked correct and wasn't. */
  .arch:hover .arch__img img,
  .arch:focus-within .arch__img img,
  .mate:hover .mate__arch img,
  .mate:focus-within .mate__arch img{ transform:scale(1); }

  .arch:hover .arch__frame,
  .arch:focus-within .arch__frame,
  .mate:hover .mate__arch,
  .mate:focus-within .mate__arch{ transform:none; }
  .signature span{ clip-path:none; }
  .marquee__track{ animation:none; }
  .sky__glow, .bird-g, .bird-flap, .mote, .hero__sway{ animation:none; }
  .spec__item:hover{ transform:none; box-shadow:none; }
  .hero__sway{ transform:none; }
  .mote{ opacity:0; }
  .hero__sky, .hero__motes{ transform:none !important; }
  .arch__sun svg{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STACKING PANELS
   Hero → Coverage → Ally → Specialty scroll over one another, then the page
   returns to normal flow. Stacking everything makes a long page feel
   seasick and breaks anchor navigation, so it stops after four.

   Each panel is sticky at top:0 with a rising z-index, so the next one
   slides up over the last. Panels need an opaque background or you see
   through the stack.
   ═══════════════════════════════════════════════════════════════════════ */

@supports (position: sticky) {
  @media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
    /* The wrapper scopes the stickiness. Without it every panel stays stuck
       to the top for the whole document and the last one paints over the
       rest of the page. */
    .stack{ position:relative; }

    /* DWELL is the whole feel of this effect. A panel occupies
       100vh + dwell of document height but only ever shows its top 100vh,
       because it is pinned. The next panel's top edge sits at the bottom of
       that box, so you get `dwell` worth of free scrolling — panel pinned,
       nothing sliding over it — before the handover begins.
       Butt the panels together (dwell:0) and the next one starts covering
       the instant you touch the wheel, which reads as far too aggressive. */
    .stack{ --dwell:62vh; }
    /* Scoped to .stack so it outranks component rules that set their own
       position later in the file — .ally sets position:relative and at equal
       specificity the later rule was silently winning. */
    .stack .panel{
      position:sticky; top:0;
      background:var(--paper);
      min-height:calc(100vh + var(--dwell));
      padding-bottom:var(--dwell);   /* border-box, so content still gets 100vh */
      display:flex; flex-direction:column; justify-content:center;
    }
    .stack .panel#coverage{ z-index:1; }

    /* Ally is NOT sticky. It rides up over the pinned Coverage panel on a
       higher layer, and once it lands nothing is behind it pushing and
       nothing above it covering. A chat panel that the page scrolls over is
       unusable — you cannot read a reply or hit an input that is sliding. */
    .stack__last{
      position:relative; z-index:2;
      box-shadow:0 -30px 44px -30px rgba(47,53,43,.18);
    }
    /* Panels are opaque or you see straight through the stack. */
    .stack .panel > *{ position:relative; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ALLY
   The one loud section. Everything around it is quiet cream; this is a warm
   blush field with a rising sun behind her and the panel overlapping her.
   ═══════════════════════════════════════════════════════════════════════ */

.ally{
  position:relative; isolation:isolate;
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);
  overflow:hidden;
  background:var(--paper);
}

/* ── the field behind everything ── */
.ally__field{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.ally__field::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(233,218,203,.95) 0%, rgba(233,218,203,.45) 42%, rgba(245,241,236,0) 72%),
    linear-gradient(180deg, var(--paper-lift) 0%, var(--paper) 68%);
}
/* Paper grain. Her identity is printed on card stock; the site should not be
   perfectly flat. Inline SVG turbulence — no image request. */
.ally__grain{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
.ally__sun{
  position:absolute; right:6%; top:-6%;
  width:min(46vw,540px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(224,175,128,.42) 0%, rgba(224,175,128,.16) 52%, rgba(224,175,128,0) 72%);
  animation:allySun 14s ease-in-out infinite;
}
@keyframes allySun{
  0%,100%{ transform:scale(1) translateY(0); opacity:.85; }
  50%    { transform:scale(1.06) translateY(-10px); opacity:1; }
}
/* concentric rings, drawn by JS to match the ridgeline language */
.ally__sun svg{ position:absolute; inset:0; width:100%; height:100%; }
.ally__sun circle{ fill:none; stroke:var(--clay-light); opacity:.35; }
.ally__sun path{ stroke:var(--clay-light); opacity:.3; }

/* ── layout ── */
.ally__grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.ally__intro .h2{ font-size:clamp(2.3rem,4.8vw,3.6rem); }
.ally__pts{ list-style:none; margin:1.8rem 0 0; padding:0; }
.ally__pts li{
  position:relative; padding:.6rem 0 .6rem 1.7rem;
  color:var(--sage-deep); font-size:.95rem;
  border-bottom:1px solid rgba(169,123,82,.22);
}
.ally__pts li::before{
  content:'\2726'; position:absolute; left:0; top:.65rem;
  color:var(--clay); font-size:.7rem;
}

/* ── the stage: her, then the panel over her ── */
/* HOW MUCH OF HER SHOWS IS A RATIO OF HER OWN SIZE, NEVER OF THE VIEWPORT.
   Percentage padding resolves against the containing block's WIDTH, and her
   width is also a percentage of that width — so one multiplier fixes the crop
   at every screen size. Her source is 950x908, so height ≈ width × 0.956;
   showing 0.72 of her width means showing ~75% of her, which lands the panel
   edge at the collar.

   Resize her by changing --her alone. Both values move together and the crop
   cannot drift. An earlier version tied the padding to vh, so the laptop
   rules shrank her on one scale and the padding on another and the panel edge
   slid back up to her eyes. */
.ally__stage{
  position:relative;
  --her:56%;
  padding-top:calc(var(--her) * 0.72);
}

.ally__her{
  position:absolute; z-index:0;
  right:3%; top:0;
  width:var(--her); height:auto;
  filter:drop-shadow(0 20px 40px rgba(47,53,43,.22));
  transform:translateY(0);
  animation:allyFloat 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes allyFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-9px); }
}

.ally__box{
  position:relative; z-index:2;
  border:1px solid var(--hair);
  border-radius:22px;
  background:var(--paper-lift);
  overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(47,53,43,.4);
}

.ally__bar{
  display:flex; align-items:center; gap:1rem;
  padding:.95rem 1.15rem;
  background:var(--sage-deep); color:var(--paper);
}
.ally__id{ display:flex; flex-direction:column; margin-right:auto; min-width:0; }
.ally__name{ font-family:var(--disp); font-weight:600; font-size:1.12rem; line-height:1.1; letter-spacing:.02em; }
.ally__role{
  display:flex; align-items:center; gap:.45rem; margin-top:.25rem;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blush);
}
.ally__live{
  width:6px; height:6px; border-radius:50%; background:#7FC79B; flex:0 0 6px;
  animation:livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse{ 0%,100%{opacity:.45} 50%{opacity:1} }

.ally__human{
  flex:0 0 auto; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); text-decoration:none;
  border:1px solid rgba(245,241,236,.4); border-radius:999px;
  padding:.5rem .9rem; transition:background .3s var(--ease);
}
.ally__human:hover{ background:rgba(245,241,236,.16); }

.ally__log{
  padding:1.25rem; min-height:230px; max-height:44vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:.85rem; scrollbar-width:thin;
}
.msg{ max-width:84%; font-size:.95rem; animation:msgIn .4s var(--ease-out) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px); } }
.msg p{ margin:0 0 .5rem; } .msg p:last-child{ margin-bottom:0; }
.msg a{ color:var(--clay); }
.msg--ally{
  align-self:flex-start; background:var(--paper);
  border:1px solid var(--hair); border-radius:4px 16px 16px 16px;
  padding:.8rem 1rem; color:var(--sage-deep);
}
.msg--you{
  align-self:flex-end; background:var(--sage); color:var(--paper-lift);
  border-radius:16px 4px 16px 16px; padding:.8rem 1rem;
}
.dots{ display:inline-flex; gap:5px; padding:.15rem 0; }
.dots i{ width:6px; height:6px; border-radius:50%; background:var(--sage-soft);
  animation:blink 1.3s ease-in-out infinite; }
.dots i:nth-child(2){ animation-delay:.18s; }
.dots i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,80%,100%{opacity:.25} 40%{opacity:1} }

.ally__chips{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1.25rem 1rem; }
.chip{
  font:inherit; font-size:.8rem; cursor:pointer;
  background:var(--paper); color:var(--sage-deep);
  border:1px solid var(--hair); border-radius:999px;
  padding:.5rem .9rem; text-align:left;
  animation:msgIn .35s var(--ease-out) both;
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.chip:hover{ border-color:var(--clay); color:var(--clay); transform:translateY(-1px); }

.ally__form{ display:flex; gap:.6rem; padding:0 1.25rem 1rem; }
.ally__input{
  flex:1; font:inherit; font-size:.95rem;
  padding:.8rem 1rem; min-height:48px;
  border:1px solid var(--hair); border-radius:999px;
  background:var(--paper); color:var(--ink);
}
.ally__input::placeholder{ color:var(--sage-soft); }
.ally__send{
  flex:0 0 48px; width:48px; height:48px; cursor:pointer;
  border:0; border-radius:50%; background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.ally__send:hover{ background:var(--clay); transform:translateY(-1px) scale(1.04); }
.ally__send svg{ width:18px; height:18px; fill:currentColor; }

.ally__fine{
  margin:0; padding:.9rem 1.25rem 1.1rem;
  border-top:1px solid var(--hair);
  font-size:.72rem; line-height:1.55; color:var(--sage);
}
.ally__fine a{ color:var(--clay); }

@media (max-width:1000px){
  .ally__grid{ grid-template-columns:1fr; }
  /* Above the panel rather than behind it — at this width she would sit on
     top of the messages. */
  /* One column now, so the stage is the full width — she needs to be a much
     smaller share of it. The crop ratio takes care of itself. */
  .ally__stage{ --her:30%; }
  .ally__her{ right:3%; top:0; }
}
@media (max-width:560px){
  .ally__stage{ --her:46%; }
  .ally__her{ right:2%; }
  .ally__human{ display:none; }
  .ally__log{ max-height:none; min-height:190px; }
  .msg{ max-width:92%; }
}

@media (prefers-reduced-motion:reduce){
  .ally__sun, .ally__her, .ally__live, .dots i{ animation:none; }
  .msg, .chip{ animation:none; }
}

/* nav chat link */
.hdr__chat{
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--clay) !important; font-weight:500;
}
.hdr__chatdot{
  width:6px; height:6px; border-radius:50%; background:var(--clay);
  animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{opacity:.35; transform:scale(1)} 50%{opacity:1; transform:scale(1.35)} }
.hdr__chat::after{ background:var(--clay) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   INTERIOR PAGES
   ═══════════════════════════════════════════════════════════════════════ */

.lede-sec{ padding:clamp(7rem,12vw,10rem) 0 clamp(7rem,11vw,9.5rem); }
.crumbs{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage); margin-bottom:1.4rem;
}
.crumbs a{ color:var(--sage); text-decoration:none; }
.crumbs a:hover{ color:var(--clay); }
.crumbs span[aria-current]{ color:var(--clay); }

.h1{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(2.3rem,5.4vw,4rem); line-height:1.04;
  letter-spacing:-.02em; margin:0 0 1.2rem; max-width:18ch;
}
.lede-sec__intro{ max-width:56ch; font-size:1.1rem; color:var(--sage-deep); margin:0; }
.lede-sec__acts{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }

.article__h{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(1.45rem,2.7vw,2rem); line-height:1.15;
  margin:2.6rem 0 1rem;
}
.article__h:first-child{ margin-top:0; }
.article p{ color:var(--sage-deep); margin:0 0 1.1rem; font-size:1.02rem; }

.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative; padding:.7rem 0 .7rem 1.9rem;
  border-bottom:1px solid var(--hair); color:var(--sage-deep); font-size:.97rem;
}
.ticks li::before{
  content:'\2726'; position:absolute; left:0; top:.75rem;
  color:var(--clay); font-size:.72rem;
}

.callout{
  margin:2.6rem 0 0; padding:1.4rem 1.5rem;
  border-left:2px solid var(--clay); background:var(--paper-lift);
}
.callout p{ margin:0; font-size:.95rem; }
.callout a{ color:var(--clay); }

.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--hair); border:1px solid var(--hair); }
.tile{
  background:var(--paper); padding:1.4rem 1.3rem; min-height:88px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  text-decoration:none; color:inherit;
  transition:background .4s var(--ease);
}
.tile:hover{ background:var(--paper-lift); }
.tile__label{ font-family:var(--disp); font-size:1.1rem; font-weight:600; }
.tile__go{ color:var(--clay); transition:transform .4s var(--ease-out); }
.tile:hover .tile__go{ transform:translateX(5px); }

/* rows and spec items are links now */
a.row{ text-decoration:none; color:inherit; }
.row__go{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  color:var(--clay); opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease-out);
  z-index:1;
}
a.row:hover .row__go{ opacity:1; transform:translateY(-50%) translateX(-4px); }
a.spec__item{ text-decoration:none; color:inherit; position:relative; display:block; }
.spec__go{
  display:inline-block; margin-top:1.1rem; color:var(--clay-light);
  transition:transform .42s var(--ease-out), opacity .42s var(--ease);
  opacity:.65;
}
a.spec__item:hover .spec__go{ transform:translateX(7px); opacity:1; }

.ftr__meta a{ color:var(--blush); text-decoration:none; }
.ftr__meta a:hover{ color:var(--paper); }

@media (max-width:860px){
  .ally__log{ max-height:none; min-height:180px; }
  .msg{ max-width:92%; }
  .ally__human{ display:none; }
  .lede-sec{ padding-top:6rem; }
}

@media (prefers-reduced-motion:reduce){
  .dots i, .hdr__chatdot{ animation:none; }
}

/* Live status dot on the Ally header — she is genuinely always up, and the
   dot says so without claiming a human is watching. */
.ally__role{ display:flex; align-items:center; gap:.45rem; }
.ally__live{
  width:6px; height:6px; border-radius:50%; background:#7FC79B; flex:0 0 6px;
  animation:livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse{ 0%,100%{opacity:.45} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .ally__live{ animation:none; opacity:1; } }

/* ═══════════════════════════════════════════════════════════════════════
   SHORT VIEWPORTS — laptops
   A 13" MacBook is ~800px of viewport, a smaller laptop ~700px. Every
   section was authored against 900px and overflowed on both, which matters
   most for the pinned panels: a pinned panel only ever shows its top 100vh,
   so anything past that is not merely below the fold, it is unreachable.

   These rules compress type, padding and the arch portraits until each
   section fits. Measured, not guessed.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-height: 900px) and (min-width: 861px) {
  .sec{ padding-top:clamp(2.5rem,5vh,4rem); }
  .sec__head{ margin-bottom:clamp(1.25rem,2.5vh,2rem); }
  .h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
  .sec__lede{ font-size:1rem; }

  /* Coverage rows are the tallest block on the page. */
  .row{ padding:clamp(.9rem,1.8vh,1.5rem) 0; }
  .row__label{ font-size:clamp(1.3rem,2.2vw,1.75rem); }
  .row__body{ font-size:.92rem; }
  .row__icon svg{ width:56px; }

  /* Ally */
  .ally{ padding:clamp(2rem,4vh,3.5rem) 0 clamp(1.75rem,3vh,3rem); }
  .ally__intro .h2{ font-size:clamp(2rem,3.6vw,2.9rem); }
  .ally__pts{ margin-top:1.1rem; }
  .ally__pts li{ padding:.45rem 0 .45rem 1.7rem; font-size:.9rem; }
  .ally__stage{ --her:46%; }
  .ally__log{ min-height:150px; max-height:34vh; }
  .ally__fine{ font-size:.68rem; padding:.7rem 1.25rem .85rem; }

  /* Team arches were 390px tall before a single line of text. */
  .crew{ gap:clamp(1.25rem,3vw,2.25rem); }
  /* Scale the arch DOWN, never reshape it. The portraits are cut to
     1:1.14; changing the box aspect makes object-fit:cover crop the
     difference off the bottom, which lands on their chins. */
  .mate__arch{ max-width:230px; margin:0 auto .85rem; }
  .mate__name{ font-size:1.15rem; }
  .mate__title{ margin-bottom:.65rem; }
  .mate__tel{ font-size:1.15rem; }
  .mate__mail{ font-size:.72rem; margin-top:.5rem; }

  .band{ padding:clamp(2.5rem,5vh,4rem) 0; margin-top:clamp(2.5rem,5vh,4.5rem); }
  .spec__item{ padding:1.35rem 1.25rem 1.3rem; }
  .spec__body{ font-size:.89rem; }
  .spec__label{ font-size:1.25rem; margin-bottom:.6rem; }

  .arch{ max-width:290px; }
  .creed li{ padding:1.1rem 1.4rem 1.1rem 2.4rem; font-size:1rem; }
}

/* Tighter still under 780px of viewport. */
@media (max-height: 780px) and (min-width: 861px) {
  .h2{ font-size:clamp(1.7rem,3vw,2.3rem); }
  .row{ padding:.8rem 0; }
  .row__label{ font-size:1.35rem; }
  .row__lede{ font-size:.66rem; }
  .row__body{ font-size:.88rem; }
  .sec__lede{ font-size:.94rem; }
  .ally__stage{ --her:38%; }
  .ally__log{ min-height:130px; max-height:30vh; }
  .ally__pts li{ font-size:.86rem; padding:.35rem 0 .35rem 1.6rem; }
  .mate__arch{ max-width:196px; margin:0 auto .7rem; }
  .crew{ grid-template-columns:repeat(3,1fr); }
  .mate__name{ font-size:1.08rem; }
  .mate__tel{ font-size:1.08rem; }
  .mate__mail{ margin-top:.4rem; }
}

/* Below ~660px of viewport height there is nothing left to compress without
   making it unreadable. Stacking is dropped and the page scrolls normally —
   a clipped pinned panel is far worse than no effect. */
@media (max-height: 660px) {
  .stack .panel{
    position:static; min-height:0; padding-bottom:0; box-shadow:none;
  }
  .stack__last{ box-shadow:none; }
}

.ftr__social{ margin-top:.5rem !important; }
.ftr__social a{ color:var(--blush); text-decoration:none; }
.ftr__social a:hover{ color:var(--paper); }

/* ═══════════════════════════════════════════════════════════════════════
   SPEC TILE HOVER — specificity fix
   The tiles carry .reveal, and `.reveal.is-in{transform:none}` is two
   classes, so it ties with `.spec__item:hover` and wins on source order.
   The hover was computing to `none` and doing nothing at all. Three classes
   settles it outright rather than relying on where in the file this sits.
   ═══════════════════════════════════════════════════════════════════════ */
.spec .spec__item.is-in:hover,
.spec .spec__item.is-in:focus-visible{
  transform:translateY(-10px) scale(1.025);
  background:rgba(245,241,236,.11);
  border-color:var(--clay-light);
  box-shadow:0 26px 44px -20px rgba(0,0,0,.55);
}
.spec .spec__item.is-in:active{ transform:translateY(-4px) scale(1.01); }

@media (prefers-reduced-motion:reduce){
  .spec .spec__item.is-in:hover{ transform:none; box-shadow:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FRONT RANGE — interior page headers
   Drawn, not photographed. A stock Pikes Peak shot would sit badly against
   hand-illustrated brand artwork, and this shares the ridgeline's line
   language so the whole site reads as one hand.
   ═══════════════════════════════════════════════════════════════════════ */
.lede-sec{ position:relative; overflow:hidden; }
.lede-sec > .wrap{ position:relative; z-index:1; }

.frontrange{
  position:absolute; inset:auto 0 0 0; z-index:0;
  height:clamp(120px,15vw,190px);
  pointer-events:none;
  /* Gone well before it reaches the copy. A backdrop that crosses a headline
     stops being a backdrop and starts being noise. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 38%, #000 72%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 38%, #000 72%);
}
.frontrange svg{ width:100%; height:100%; display:block; }
.frontrange path, .frontrange line{
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.fr__far { stroke:var(--sage-soft); stroke-width:1.1; opacity:.38; }
.fr__near{ stroke:var(--sage);      stroke-width:1.4; opacity:.6; }
.fr__fin { stroke:var(--clay);      stroke-width:1.3; opacity:.45; }
.fr__pine{ stroke:var(--sage-soft); stroke-width:1.1; opacity:.5; }
.fr__base{ stroke:var(--hair);      stroke-width:1;   opacity:.9; }

/* Draws itself once on load, same gesture as the ridgeline divider. */
.frontrange path{ stroke-dasharray:2600; stroke-dashoffset:2600;
  animation:frDraw 2.4s var(--ease-out) forwards; }
.fr__near{ animation-delay:.18s; }
.fr__fin { animation-delay:.5s; }
.fr__pine{ animation-delay:.85s; animation-duration:1.2s; }
@keyframes frDraw{ to{ stroke-dashoffset:0; } }
.frontrange line{ transform:scaleX(0); transform-origin:center;
  animation:frRule 1.4s .1s var(--ease-out) forwards; }
@keyframes frRule{ to{ transform:scaleX(1); } }

@media (prefers-reduced-motion:reduce){
  .frontrange path{ stroke-dashoffset:0; animation:none; }
  .frontrange line{ transform:none; animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SPECIALTY — alternating tiles
   Cream on positions 2, 4 and 6 so the grid reads as a checkerboard:
   top-middle, bottom-left, bottom-right.

   The pattern has to be redeclared per column count. At three columns
   `:nth-child(even)` gives exactly 2,4,6. At two columns the same selector
   would light up the entire right-hand column instead of alternating, so
   two columns needs 4n+2 and 4n+3.
   ═══════════════════════════════════════════════════════════════════════ */
.spec .spec__item.alt{
  background:var(--paper-lift);
  border-color:var(--hair);
}
.spec .spec__item.alt .spec__label{ color:var(--ink); }
.spec .spec__item.alt .spec__body { color:var(--sage-deep); }
.spec .spec__item.alt .spec__go   { color:var(--clay); }

.spec .spec__item.alt.is-in:hover,
.spec .spec__item.alt.is-in:focus-visible{
  background:#fff;
  border-color:var(--clay);
  box-shadow:0 26px 44px -20px rgba(0,0,0,.42);
}
.spec .spec__item.alt.is-in:hover .spec__label{ color:var(--clay); }

/* ═══════════════════════════════════════════════════════════════════════
   QUOTE FORM
   ═══════════════════════════════════════════════════════════════════════ */
.qf{ margin-top:clamp(1.5rem,3vw,2.25rem); }
.qf__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem 1.25rem; }
.qf__f{ display:flex; flex-direction:column; grid-column:1/-1; border:0; padding:0; margin:0; }
.qf__f--half{ grid-column:auto; }

.qf__lab{
  font-family:var(--disp); font-weight:600; font-size:.95rem;
  margin:0 0 .3rem; padding:0; color:var(--ink);
}
.req{ color:var(--clay); }
.qf__help{ color:var(--sage); font-size:.84rem; margin:0 0 .45rem; line-height:1.5; }

.qf input[type=text],.qf input[type=tel],.qf input[type=email],
.qf select,.qf textarea{
  width:100%; font:inherit; font-size:.96rem; color:var(--ink);
  padding:.72rem .9rem; min-height:48px;
  border:1px solid var(--hair); border-radius:10px; background:var(--paper-lift);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.qf textarea{ min-height:104px; resize:vertical; line-height:1.6; }
.qf input:focus,.qf select:focus,.qf textarea:focus{
  border-color:var(--clay); box-shadow:0 0 0 3px rgba(169,123,82,.14); outline:none;
}

.qf__checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.45rem; }
.qf__opt{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  padding:.6rem .8rem; border:1px solid var(--hair); border-radius:10px;
  background:var(--paper-lift); font-size:.9rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.qf__opt:hover{ border-color:var(--clay); }
.qf__opt input{ accent-color:var(--clay); width:17px; height:17px; flex:0 0 auto; }
.qf__opt:has(input:checked){ border-color:var(--clay); background:#fff; }

.qf__err{
  display:none; margin:.35rem 0 0; font-size:.83rem; color:var(--clay);
}
.is-bad .qf__err{ display:block; }
.is-bad input,.is-bad textarea,.is-bad select{ border-color:var(--clay); }
.qf__err--consent{ margin:.2rem 0 0; }
.qf__err--consent.is-on{ display:block; }

/* Consent — visually weighted, never pre-ticked. */
.qf__consent{
  display:flex; gap:.8rem; align-items:flex-start; cursor:pointer;
  margin:1.4rem 0 0; padding:.95rem 1.1rem;
  border:1px solid var(--hair); border-left:3px solid var(--clay);
  border-radius:0 10px 10px 0; background:var(--paper-lift);
  font-size:.9rem; line-height:1.55; color:var(--sage-deep);
}
.qf__consent input{ accent-color:var(--clay); width:19px; height:19px; margin-top:.1rem; flex:0 0 auto; }
.qf__consent.is-bad{ border-color:var(--clay); background:#FBF3EC; }

.qf__foot{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-top:1.5rem; }
.qf__note{ font-size:.88rem; color:var(--sage); }
.qf__note a{ color:var(--clay); }
.qf__status{ margin:.9rem 0 0; font-size:.9rem; }
.qf__status.is-bad{ color:var(--clay); }
.qf__status a{ color:var(--clay); }

.qf__done{ text-align:center; padding:2.5rem 1rem; }
.qf__tick{
  width:58px; height:58px; border-radius:50%; background:var(--sage);
  color:var(--paper); display:grid; place-items:center;
  margin:0 auto 1rem; font-size:1.6rem;
}
.qf__done h3{ font-family:var(--disp); font-weight:600; font-size:1.6rem; margin:0 0 .5rem; }
.qf__done p{ color:var(--sage-deep); max-width:44ch; margin:0 auto; }
.qf__done a{ color:var(--clay); }

@media (max-width:640px){
  .qf__grid{ grid-template-columns:1fr; }
  .qf__f--half{ grid-column:1/-1; }
}