/* ══════════════════════════════════════════════════════
   Casalinda Homes LLC
   Drawn from the logo: black ground, gold Roman caps,
   magenta roofline, purple secondary.
   Gold = structure and labels. Magenta = one action.
   Purple = one supporting role. Content sits on white.
   Type: Cinzel (display caps) · Jost (labels) · Barlow (body)
   ══════════════════════════════════════════════════════ */

:root{
  --black:   #000000;
  --plum:    #191521;   /* dark panels, warmer than black */
  --ink:     #211c29;   /* headings on light */
  --body:    #56505e;   /* body copy */
  --line:    #e2ded8;
  --wash:    #f7f5f1;   /* warm off-white section */
  --white:   #ffffff;

  --gold:    #c9a227;
  --gold-lt: #e6cd7a;
  --gold-dk: #8d6f16;

  --mag:     #a8175d;   /* primary action */
  --mag-dk:  #7f0f45;
  --purple:  #6e4e9c;

  --fd: "Cinzel", "Times New Roman", serif;
  --fl: "Jost", "Helvetica Neue", Arial, sans-serif;
  --fb: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --shell: 1200px;
  --gut: clamp(1.25rem, 4vw, 3rem);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

body{
  margin:0; background:var(--white); color:var(--body);
  font-family:var(--fb); font-size:1.0625rem; line-height:1.68;
}

h1,h2{
  font-family:var(--fd); font-weight:600; color:var(--ink);
  line-height:1.13; letter-spacing:.005em; margin:0 0 .6em;
}
h1{ font-size:clamp(2.15rem,5vw,3.9rem); }
h2{ font-size:clamp(1.7rem,3.3vw,2.55rem); }
h3{
  font-family:var(--fl); font-weight:600; font-size:1.15rem;
  color:var(--ink); letter-spacing:.005em; margin:0 0 .5em; line-height:1.25;
}

p{ margin:0 0 1.1rem; }
img{ display:block; width:100%; height:auto; }
a{ color:var(--mag); }
ul{ margin:0; padding:0; list-style:none; }

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

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.sr{ position:absolute; left:-9999px; }
.skip{ position:absolute; left:-9999px; background:var(--black); color:#fff; padding:.8rem 1.2rem; z-index:200; }
.skip:focus{ left:.5rem; top:.5rem; }

/* ── eyebrow labels ───────────────────────────── */
.eyebrow{
  font-family:var(--fl); font-size:.78rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.26em;
  color:var(--gold-lt); margin:0 0 1rem;
}
.eyebrow--dark{ color:var(--gold-dk); }

/* ── buttons ──────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--fl); font-weight:500; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.16em;
  padding:1.1rem 2.1rem; border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background-color .18s, color .18s, border-color .18s;
}
.btn--fill{ background:var(--mag); color:#fff; border-color:var(--mag); }
.btn--fill:hover{ background:var(--mag-dk); border-color:var(--mag-dk); }
.btn--gold{ background:transparent; color:var(--gold-lt); border-color:var(--gold); }
.btn--gold:hover{ background:var(--gold); color:var(--black); }
.btn--full{ width:100%; }

/* ── utility bar ──────────────────────────────── */
.util{ background:var(--black); color:#9d94a8; font-size:.84rem; }
.util__in{ display:flex; align-items:center; gap:1.15rem; min-height:44px; }
.util a{ color:#e6ddc6; text-decoration:none; font-weight:500; }
.util a:hover{ color:var(--gold-lt); }
.util__lic{
  font-family:var(--fl); text-transform:uppercase;
  letter-spacing:.2em; font-size:.72rem; color:var(--gold);
}
.util__sp{ flex:1; }
@media (max-width:1000px){
  .util__hide{ display:none; }
}
@media (max-width:720px){
  .util__lic{ letter-spacing:.12em; font-size:.66rem; }
  .util__in{ gap:1rem; }
}

/* ── header ───────────────────────────────────── */
.head{
  position:sticky; top:0; z-index:100;
  background:var(--black);
  border-bottom:1px solid rgba(201,162,39,.32);
}
.head__in{ display:flex; align-items:center; gap:1.5rem; min-height:132px; }
.brand{ display:block; margin-right:auto; line-height:0; }
.brand img{
  display:block;
  height:clamp(64px, 11vw, 112px);
  width:auto;
  max-width:100%;
  object-fit:contain;
}

.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  font-family:var(--fl); font-weight:400; font-size:.9rem;
  letter-spacing:.06em; color:#e8e3ee; text-decoration:none;
  padding:.35rem 0; border-bottom:1px solid transparent;
}
.nav a:hover{ color:var(--gold-lt); border-bottom-color:var(--gold); }
.nav__cta{
  background:var(--mag); color:#fff !important;
  padding:.8rem 1.5rem !important; border-bottom:0 !important;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.16em;
}
.nav__cta:hover{ background:var(--mag-dk); color:#fff !important; }

.head__call{
  display:none; align-items:center; gap:.45rem;
  margin-left:auto;
  font-family:var(--fl); font-size:.8rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--black); background:var(--gold);
  padding:.7rem 1.1rem; text-decoration:none;
  min-height:44px;
}
.head__call svg{ width:17px; height:17px; fill:currentColor; flex:none; }
.head__call:active{ background:var(--gold-lt); }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.6rem; cursor:pointer; min-height:44px; min-width:44px; align-items:center; justify-content:center; }
.burger span{ display:block; width:24px; height:2px; background:var(--gold-lt); }

@media (max-width:940px){
  .burger{ display:flex; margin-left:0; }
  .head__call{ display:inline-flex; }
  .head__in{ gap:.75rem; }
  .nav{
    position:absolute; top:100%; left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--black); padding:.25rem var(--gut) 1.4rem;
    border-bottom:1px solid rgba(201,162,39,.32);
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.09); }
  .nav__cta{ margin-top:1rem; text-align:center; }
}

/* ── hero ─────────────────────────────────────── */
.hero{ position:relative; background:var(--black); isolation:isolate; }
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover; opacity:.38;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(103deg, rgba(0,0,0,.95) 0%, rgba(25,21,33,.8) 52%, rgba(25,21,33,.45) 100%);
}
.hero__in{ padding-block:clamp(4rem,10vw,8.5rem); max-width:940px; }
.hero h1{ color:#fff; }
.hero h1::after{
  content:""; display:block; width:96px; height:2px;
  background:var(--gold); margin:1.5rem 0 1.6rem;
}
.hero__sub{ color:#cbc3d4; font-size:clamp(1.02rem,1.5vw,1.24rem); max-width:58ch; margin-bottom:2.4rem; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* ── credential strip ─────────────────────────── */
.strip{ background:var(--plum); }
.strip__in{ display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid rgba(201,162,39,.22); }
.strip__in > div{ padding:1.9rem 1.4rem; border-right:1px solid rgba(201,162,39,.22); }
.strip__n{
  display:block; font-family:var(--fd); font-weight:600;
  font-size:1.5rem; color:var(--gold-lt); line-height:1.1;
}
.strip__l{
  display:block; margin-top:.45rem; font-family:var(--fl);
  text-transform:uppercase; letter-spacing:.18em;
  font-size:.7rem; color:#9d94a8;
}
@media (max-width:780px){
  .strip__in{ grid-template-columns:repeat(2,1fr); }
  .strip__in > div{ padding:1.35rem 1rem; }
}

/* ── section shells ───────────────────────────── */
.sec{ padding-block:clamp(3.75rem,8vw,6.5rem); }
.sec--wash{ background:var(--wash); border-block:1px solid var(--line); }
.lede{ max-width:62ch; margin-bottom:clamp(2.25rem,4vw,3.25rem); }
.lede p:last-child{ margin-bottom:0; font-size:1.08rem; }

.grid{ display:grid; gap:clamp(1.5rem,2.5vw,2.25rem); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:940px){ .grid--3{ grid-template-columns:1fr; } }
@media (max-width:780px){ .grid--2{ grid-template-columns:1fr; } }

/* ── owners intro ─────────────────────────────── */
.sec--tight{ padding-block:clamp(3rem,6vw,4.75rem); }
.lede--mid{ margin-left:auto; margin-right:auto; text-align:center; }

.owners{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:720px){ .owners{ grid-template-columns:1fr; } }

.owner{ margin:0; }
.owner img{
  aspect-ratio:4/5; object-fit:cover; width:100%;
  border-bottom:3px solid var(--gold);
}
.owner figcaption{ padding-top:1.15rem; }
.owner__n{
  display:block; font-family:var(--fd); font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--ink);
  line-height:1.15;
}
.owner__t{
  display:block; margin-top:.3rem; margin-bottom:.85rem;
  font-family:var(--fl); text-transform:uppercase;
  letter-spacing:.2em; font-size:.74rem; color:var(--gold-dk);
}
.owner figcaption p{ margin:0; font-size:1rem; }

/* ── service cards ────────────────────────────── */
.svc{ background:#fff; border:1px solid var(--line); border-top:2px solid var(--gold); }
.svc img{ aspect-ratio:3/2; object-fit:cover; }
.svc__b{ padding:1.7rem 1.6rem 1.9rem; }
.svc__b > p{ font-size:1rem; margin-bottom:1.2rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.chips li{
  font-family:var(--fl); font-size:.78rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink); background:var(--wash);
  border:1px solid var(--line); padding:.4rem .7rem;
}
.svc__more{
  margin:2.25rem 0 0; padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-family:var(--fl); font-size:1rem; color:var(--ink);
}
.svc__more a{ color:var(--mag); }

/* ── our work carousel ────────────────────────
   Sized so the heading, one row of photos and the
   dots all fit in a single screenful. svh keeps
   mobile browser chrome from cutting it off.     */
#projects{
  display:flex; flex-direction:column; justify-content:center;
  min-height:100svh;
  padding-block:clamp(2rem,5vh,4rem);
}
#projects .lede{ margin-bottom:clamp(1.25rem,3vh,2rem); }
#projects .lede p:last-child{ font-size:1rem; }
.work{ position:relative; }
.work__track{
  display:flex; gap:1.25rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-bottom:.25rem;
}
.work__track::-webkit-scrollbar{ display:none; }
.work__track:focus-visible{ outline:3px solid var(--gold); outline-offset:6px; }
.work__track figure{
  margin:0; flex:0 0 calc((100% - 1.25rem) / 2);
  scroll-snap-align:start;
}
.work__track img{
  width:100%; object-fit:cover;
  aspect-ratio:4/3;
  height:clamp(150px, 40svh, 380px);
}
.work__track figcaption{
  margin-top:.6rem; font-family:var(--fl);
  text-transform:uppercase; letter-spacing:.16em;
  font-size:.76rem; color:var(--ink);
}
@media (max-width:700px){
  .work__track{ gap:1rem; }
  .work__track figure{ flex:0 0 100%; }
}

.work__dots{
  display:flex; justify-content:center; align-items:center;
  gap:.7rem; margin-top:clamp(1rem,2.5vh,1.75rem);
}
.work__dot{
  width:11px; height:11px; padding:0;
  border:1px solid var(--gold-dk); border-radius:50%;
  background:transparent; cursor:pointer;
  transition:background-color .16s, transform .16s;
}
.work__dot:hover{ background:var(--gold-lt); }
.work__dot[aria-selected="true"]{
  background:var(--mag); border-color:var(--mag);
  transform:scale(1.25);
}
/* keep the tap target comfortable without making the dot huge */
.work__dot{ position:relative; }
.work__dot::after{ content:""; position:absolute; inset:-11px; }

/* ── about ────────────────────────────────────── */
.about{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;
}
@media (max-width:880px){ .about{ grid-template-columns:1fr; } }
.about__i{ margin:0; }
.about__i img{ aspect-ratio:4/5; object-fit:cover; }
@media (max-width:880px){ .about__i img{ aspect-ratio:16/9; } }
.ticks{ margin-top:1.6rem; }
.ticks li{ position:relative; padding:.45rem 0 .45rem 1.9rem; color:var(--ink); font-weight:500; }
.ticks li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:11px; height:6px;
  border-left:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
}

/* ── contact ──────────────────────────────────── */
.contact{ background:var(--plum); color:#bcb2c6; padding-block:clamp(3.5rem,7vw,6rem); }
.contact__in{
  display:grid; gap:clamp(2.25rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;
}
@media (max-width:880px){ .contact__in{ grid-template-columns:1fr; } }
.contact h2{ color:#fff; }
.contact__sub{ font-size:1.08rem; margin-bottom:2rem; }
.contact dl{ margin:0; border-top:1px solid rgba(201,162,39,.28); }
.contact dt{
  font-family:var(--fl); text-transform:uppercase;
  letter-spacing:.2em; font-size:.7rem; color:var(--gold);
  padding-top:1rem;
}
.dt__r{
  display:inline-block; margin-left:.55rem;
  letter-spacing:.14em; font-size:.64rem;
  color:#9d94a8;
}
.contact dd{
  margin:0 0 1rem; padding-bottom:1rem;
  border-bottom:1px solid rgba(201,162,39,.28);
  color:#fff; font-weight:500; font-size:1.05rem; word-break:break-word;
}
.contact dd a{ color:#fff; text-decoration:none; }
.contact dd a:hover{ color:var(--gold-lt); text-decoration:underline; }

.form{ background:#fff; padding:clamp(1.5rem,3vw,2.25rem); border-top:2px solid var(--gold); }
.f{ margin-bottom:1.1rem; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:520px){ .f2{ grid-template-columns:1fr; } }
.f label{
  display:block; margin-bottom:.4rem; font-family:var(--fl);
  text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; font-weight:500; color:var(--ink);
}
.f input,.f select,.f textarea{
  width:100%; font-family:var(--fb); font-size:1rem; color:var(--ink);
  background:var(--wash); padding:.85rem .9rem; border:1px solid var(--line);
}
.f textarea{ resize:vertical; }
.f input:focus,.f select:focus,.f textarea:focus{ background:#fff; border-color:var(--gold); }
.form__fine{ margin:.9rem 0 0; font-size:.85rem; }

/* ── footer ───────────────────────────────────── */
.foot{ background:var(--black); color:#9d94a8; padding-block:clamp(2.75rem,6vw,4rem) 2rem; }
.foot__in{ display:grid; gap:2.25rem; grid-template-columns:2fr 1fr 1fr; }
@media (max-width:780px){ .foot__in{ grid-template-columns:1fr; } }
.foot__logo{
  display:block;
  height:120px; width:auto; max-width:100%;
  object-fit:contain;
  margin-bottom:1.25rem;
}
.foot p{ font-size:.96rem; margin-bottom:.6rem; }
.foot__lic{
  font-family:var(--fl); text-transform:uppercase;
  letter-spacing:.18em; font-size:.72rem; color:var(--gold);
}
.foot h3{
  color:#fff; font-family:var(--fl); font-size:.74rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; margin-bottom:1rem;
}
.foot li{ padding:.28rem 0; font-size:.96rem; }
.foot a{ color:#e0d9e8; text-decoration:none; }
.foot a:hover{ color:var(--gold-lt); text-decoration:underline; }
.foot__legal{
  grid-column:1/-1; margin:0; padding-top:1.75rem;
  border-top:1px solid rgba(201,162,39,.2);
  font-size:.82rem; color:#7d7489;
}


/* ══ floating contact cluster ══════════════════════════
   Fixed bottom-right. Always reachable while scrolling.
   Respects the iOS home-indicator safe area.            */
.fab{
  position:fixed; z-index:120;
  right:clamp(.9rem,3vw,1.6rem);
  bottom:calc(clamp(.9rem,3vw,1.6rem) + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; align-items:flex-end; gap:.6rem;
}
.fab__b{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:52px; padding:0 1.15rem;
  border-radius:999px; text-decoration:none;
  font-family:var(--fl); font-size:.78rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  transition:transform .16s, background-color .16s;
}
.fab__b svg{ width:20px; height:20px; fill:currentColor; flex:none; }
.fab__b:active{ transform:scale(.96); }
.fab__b--call{ background:var(--mag); color:#fff; }
.fab__b--call:hover{ background:var(--mag-dk); }
.fab__b--text{ background:var(--gold); color:var(--black); }
.fab__b--text:hover{ background:var(--gold-lt); }
.fab__b--mail{ background:var(--plum); color:var(--gold-lt); border:1px solid var(--gold); }
.fab__b--mail:hover{ background:var(--black); }

/* keep the cluster clear of the footer's last line */
.foot{ padding-bottom:calc(6rem + env(safe-area-inset-bottom, 0px)); }

/* on small screens drop the labels on the two secondary buttons
   so the cluster stays out of the way, but keep "Call" spelled out */
@media (max-width:620px){
  .fab{ gap:.5rem; }
  .fab__b{ min-height:50px; }
  .fab__b--text,.fab__b--mail{ width:50px; padding:0; justify-content:center; }
  .fab__b--text .fab__t,.fab__b--mail .fab__t{ position:absolute; left:-9999px; }
}
@media (prefers-reduced-motion:reduce){
  .fab__b:active{ transform:none; }
}
@media print{ .fab{ display:none; } }

/* ══ intro animation ═══════════════════════════════════
   The butterfly and crown are separate layers cut out of
   the logo, positioned by percentage so the composite is
   pixel-identical to the original once it settles.
   Only runs when script.js adds .is-on, so a JS failure
   can never leave a black screen.                        */
.intro{
  position:fixed; inset:0; z-index:300;
  display:none;
  place-items:center;
  background:#000;
}
.intro.is-on{ display:grid; }
.intro.is-out{ animation:introOut .55s ease forwards; }
@keyframes introOut{ to{ opacity:0; visibility:hidden; } }

.intro__logo{
  position:relative;
  width:min(78vw, 620px);
  aspect-ratio:1112 / 590;
}
.intro__base{
  position:absolute; inset:0;
  width:100%; height:100%;
  animation:introBase .8s ease-out both;
}
@keyframes introBase{
  from{ opacity:0; transform:scale(.97); }
  to{ opacity:1; transform:none; }
}

/* butterfly: flies in from the left, settles into its slot */
.intro__bf{
  position:absolute;
  left:38.309%; top:11.017%; width:13.040%; height:auto;
  transform-origin:50% 50%;
  animation:introFly 1.5s cubic-bezier(.22,.68,.3,1) .45s both,
            introFlutter .16s ease-in-out .45s 8 alternate;
}
@keyframes introFly{
  0%   { opacity:0; transform:translate(-260%, 150%) rotate(-22deg) scale(.7); }
  35%  { opacity:1; }
  55%  { transform:translate(-90%, -40%) rotate(9deg) scale(.92); }
  78%  { transform:translate(-18%, 24%) rotate(-5deg) scale(1); }
  100% { opacity:1; transform:none; }
}
@keyframes introFlutter{
  from{ scale:1 1; }
  to  { scale:.72 1; }
}

/* crown sparkles: four-point glints, staggered after the landing */
.intro__spark{
  position:absolute;
  width:7.2%; aspect-ratio:1;
  opacity:0;
  background:
    radial-gradient(closest-side, rgba(255,246,214,.95), rgba(255,246,214,0) 70%),
    conic-gradient(from 0deg,
      rgba(255,246,214,0) 0deg,   rgba(255,246,214,.9) 6deg,  rgba(255,246,214,0) 12deg,
      rgba(255,246,214,0) 78deg,  rgba(255,246,214,.9) 90deg, rgba(255,246,214,0) 102deg,
      rgba(255,246,214,0) 168deg, rgba(255,246,214,.9) 180deg,rgba(255,246,214,0) 192deg,
      rgba(255,246,214,0) 258deg, rgba(255,246,214,.9) 270deg,rgba(255,246,214,0) 282deg,
      rgba(255,246,214,0) 360deg);
  animation:introSpark 1s ease-out both;
}
@keyframes introSpark{
  0%   { opacity:0; transform:scale(.2) rotate(0deg); }
  45%  { opacity:1; transform:scale(1) rotate(35deg); }
  100% { opacity:0; transform:scale(.5) rotate(70deg); }
}
/* positioned over the crown, which occupies 53.5%–67.6% across, 2.9%–16.8% down */
.intro__spark--1{ left:55.0%; top:2.0%;  animation-delay:1.75s; }
.intro__spark--2{ left:62.5%; top:4.5%;  animation-delay:1.95s; width:5.4%; }
.intro__spark--3{ left:58.5%; top:9.5%;  animation-delay:2.15s; width:6.2%; }
.intro__spark--4{ left:65.5%; top:11.0%; animation-delay:2.35s; width:4.6%; }

@media (prefers-reduced-motion:reduce){
  .intro{ display:none !important; }
}

/* ══ scroll reveal ═════════════════════════════════════
   Headings and copy lift, fade and sharpen as each block
   reaches the viewport. Deliberately excluded: the utility
   bar, the header and the footer, which stay put.

   Everything below is gated three ways, so text can never
   be left stranded at opacity 0:
     · html.js-anim is set by the inline script in <head>,
       so with JS off none of this applies;
     · that script skips the class for anyone who prefers
       reduced motion;
     · @media screen keeps the hidden state out of print,
       and script.js drops the flag outright if the browser
       has no IntersectionObserver.

   The lists sit inside :where() so they carry no specificity
   of their own and .is-in below can always outrank them.
   script.js adds .is-in one element at a time and sets --rd
   to the element's place in its own group, which staggers
   siblings without needing a class on every tag.         */
@media screen{

  html.js-anim :where(
    .hero__in > .eyebrow,
    .hero__in > h1,
    .hero__in > .hero__sub,
    .hero__in > .hero__btns,
    .strip__in > div,
    .lede > *,
    .owner figcaption > *,
    .svc__b > *,
    .svc__more,
    .about > div > *,
    .contact__in > div > *,
    .form
  ){
    opacity:0;
    transform:translateY(22px);
    filter:blur(3px);
    transition:opacity .7s cubic-bezier(.22,.68,.3,1),
               transform .7s cubic-bezier(.22,.68,.3,1),
               filter .7s cubic-bezier(.22,.68,.3,1);
    transition-delay:calc(var(--rd, 0) * 80ms);
    will-change:opacity, transform;
  }

  /* headings travel a little further, so the eyebrow above
     lands first and the heading follows it in */
  html.js-anim :where(
    .hero__in > h1,
    .lede > h2,
    .about > div > h2,
    .contact__in > div > h2
  ){
    transform:translateY(32px);
  }

  html.js-anim .is-in{
    opacity:1;
    transform:none;
    filter:none;
    will-change:auto;
  }
}