/* ============ Reset & base ============ */
*{box-sizing:border-box;margin:0;padding:0;}
/* Every rem-based size on this page (nearly all typography, plus a lot
   of clamp() spacing) resolves against THIS font-size, not body's — a
   fixed 16px default here is why fixed-viewport values elsewhere read
   "too big" on a standard/HD screen versus whatever larger reference
   display this was built on.
   Correction: an earlier version of this rule accidentally grew to
   17px at 1920px width — LARGER than the 16px browser default, i.e.
   backwards, making the "too big at HD" problem worse. This version
   shrinks instead: 14px at phone widths, 15px at 1920 (HD) specifically
   — genuinely below the old 16px default — capping at 15.5px so even
   4K/ultrawide never exceeds the old default by more than a hair. */
html{
  scroll-behavior:auto;overflow-x:hidden;scroll-padding-top:90px;
  font-size:clamp(14px, 0.1156vh + 13.75px, 15.5px);
}

:root{
  /* Palette swap: pink accent (was rust/brick), blues for everything else
     (was warm brown/olive/gold neutrals) — variable NAMES kept as-is so
     every page and -additions.css file that already reads var(--brick),
     var(--ink), var(--gold) etc. picks up the new colors automatically. */
  --chalk:#eef4f4;
  --chalk-2:#dbe6e6;
  --ink:#152223;
  --ink-soft:#476667;
  --ink-faint:#809c9d;
  --brick:#D6336C;
  --brick-deep:#B02857;
  --heritage:#336d70;
  --brass:#51a8ab;
  --gold:#92cdcf;
  --line: rgba(21,34,35,0.14);
  --line-strong: rgba(21,34,35,0.28);
  --line-dark: rgba(238,244,244,0.18);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Work Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --container-width: 1180px;
}

body{
  background:var(--chalk);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--brick);color:var(--chalk);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul,ol{list-style:none;}
button{font-family:inherit;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1!important;transform:none!important;}
}

.sheet-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--brick);
  display:flex;
  align-items:center;
  gap:10px;
}
.sheet-label::before{
  content:'';
  width:22px;height:1px;background:var(--brick);display:inline-block;
}
.sheet-label--light{ color:var(--gold); }
.sheet-label--light::before{ background:var(--gold); }

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-0.01em;line-height:1.04;}

section{position:relative;padding:min(8vh,80px) min(12.44vh,90px) min(4vh,40px);}
.section-inner{max-width:var(--container-width);margin:0 auto;}

/* corner brackets — drawing-sheet motif */
.plate{position:relative;}
.plate::before,.plate::after,
.plate .bl,.plate .br{
  content:'';position:absolute;width:16px;height:16px;
  border-color:var(--line-strong);
}
.plate::before{top:0;left:0;border-top:1px solid;border-left:1px solid;}
.plate::after{top:0;right:0;border-top:1px solid;border-right:1px solid;}
.plate .bl{bottom:0;left:0;border-bottom:1px solid;border-left:1px solid;}
.plate .br{bottom:0;right:0;border-bottom:1px solid;border-right:1px solid;}

/* cross-page footer links — shared with homeowners/developers/faqs pages,
   which each redeclare this via their own -additions.css (scoped under
   --h-* variables); defined here too, using the real site variables
   directly, so index.html can use it without needing a page-specific
   stylesheet of its own. */
.page-footer__links{
  display:flex;justify-content:center;align-items:center;gap:28px;
  padding:32px min(12.44vh,90px);
  font-family:var(--mono);font-size:0.85rem;
}
.page-footer__links a{ color:var(--ink-soft);text-decoration:none;transition:color 0.3s ease; }
.page-footer__links a:hover{ color:var(--brick); }
@media (max-width:640px){
  .page-footer__links{ flex-wrap:wrap;gap:16px 24px; }
}

/* Cost calculator floating frame — shared across every page with a
   "Cost Calculator" link (footers on all four pages, plus homeowners.html's
   two inline links). Same fixed-overlay + backdrop pattern as
   homeowners.html's .stage-modal, but much larger (a near-fullscreen
   "window" rather than a compact panel) since it hosts the whole
   cost-calculator.html page via iframe. Each page's own JS (script.js /
   homeowners.js / developers.js) wires up its own .js-open-calc triggers
   against this same markup/CSS. */
.calc-modal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:32px;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;
}
.calc-modal.is-open{ opacity:1;pointer-events:auto; }
.calc-modal__backdrop{ position:absolute;inset:0;background:rgba(21,34,35,0.6); }
.calc-modal__frame{
  position:relative;
  width:min(1100px,100%);height:min(820px,100%);
  background:var(--chalk);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,0.35);
  transform:scale(0.97);
  transition:transform 0.35s ease;
}
.calc-modal.is-open .calc-modal__frame{ transform:scale(1); }
.calc-modal__frame iframe{ display:block;width:100%;height:100%;border:0; }
.calc-modal__close{
  position:absolute;top:14px;right:14px;z-index:1;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--chalk);
  color:var(--ink-soft);
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.15);
  transition:color 0.25s ease, border-color 0.25s ease;
}
.calc-modal__close:hover{ color:var(--brick);border-color:var(--brick); }
@media (max-width:780px){
  .calc-modal{ padding:0; }
  .calc-modal__frame{ width:100%;height:100%;border-radius:0; }
}

/* disclaimer footer */
.disclaimer{
  background:var(--ink);color:var(--chalk-2);
  padding:26px min(12.44vh,90px);
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.02em;
  line-height:1.6;
  text-align:center;
  opacity:0.85;
}
.disclaimer b{color:var(--chalk);}

/* ============ Reveal animation ============ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.9s cubic-bezier(.2,.65,.3,1), transform 0.9s cubic-bezier(.2,.65,.3,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ============ Side index (desktop only) ============ */
.side-index{
  position:fixed;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.side-index__dot{
  position:relative;
  width:8px;height:8px;
  border-radius:50%;
  border:none;
  background:var(--ink-faint);
  opacity:0.45;
  cursor:pointer;
  transition:all 0.35s ease;
  padding:0;
}
.side-index__dot span{
  position:absolute;
  right:20px;top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:0.66rem;
  letter-spacing:0.06em;
  white-space:nowrap;
  color:var(--ink-soft);
  opacity:0;
  transition:opacity 0.25s ease;
  background:var(--chalk);
  padding:3px 9px;
  border:1px solid var(--line);
}
.side-index__dot:hover span{opacity:1;}
.side-index__dot.is-active{
  background:var(--brick);
  opacity:1;
  transform:scale(1.4);
}
@media (max-width:960px){
  .side-index{display:none;}
}

/* ============ Sticky header ============ */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px min(10.67vh,60px);
  transform:translateY(-100%);
  transition:transform 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
}
.site-header.is-visible{
  transform:translateY(0);
  background:rgba(238,241,245,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.site-header__mark{
  display:flex;align-items:center;gap:0.7rem;
}
.site-header__badge{
  flex-shrink:0;width:34px;height:34px;
}
.site-header__wordmark{
  display:flex;flex-direction:column;line-height:1;
}
.site-header__wordmark-main{
  font-family:var(--serif);
  font-size:1rem;
  color:var(--ink);
  transition:color 0.3s ease;
}
.site-header__wordmark-main em{font-style:italic;color:var(--brick);font-weight:300;}
.site-header__wordmark-sub{
  margin-top:0.3rem;
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.site-header__nav{display:none;}
@media (min-width:960px){ .site-header__nav{display:block;} }
.site-header__menu{
  display:flex;align-items:center;gap:1.6rem;
}
.site-header__menu a{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color 0.3s ease;
}
.site-header__menu a:hover{ color:var(--brick); }
/* Color alone (dark -> brown) read as too subtle a change for the
   active/current section — an underline makes it unambiguous at a
   glance, distinct from the plain color-only hover state above. */
.site-header__menu a.is-active{
  color:var(--brick);
  text-decoration:underline;
  text-underline-offset:5px;
}
.site-header__actions{
  display:flex;align-items:center;gap:clamp(14px,5.33vh,26px);
}
.site-header__phone{
  font-size:0.85rem;color:var(--ink-soft);display:none;
}
@media (min-width:560px){ .site-header__phone{display:inline;} }
.site-header__cta{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:10px 18px;
  border:1px solid var(--ink);
  transition:background 0.3s ease, color 0.3s ease;
  white-space:nowrap;
}
.site-header__cta:hover{ background:var(--ink); color:var(--chalk); }

/* ============ NAV placeholder kept for no-js fallback ============ */
noscript .side-index,noscript .site-header{ display:none; }

/* ============ HERO ============ */
.hero-pin{ position:relative; height:130vh; }
.hero{
  position:relative;
  height:100svh;min-height:640px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#141712;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  position:absolute; inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;
}
.hero-media img.is-active{ opacity:0.62; visibility:visible; z-index:2; }
.hero-media::after{
  content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg, rgba(22,33,46,0.15) 0%, rgba(22,33,46,0.35) 55%, rgba(22,33,46,0.92) 100%);
}
.hero-content{
  position:relative;z-index:4;color:#F2EEE4;
  padding:0 min(12.44vh,90px) 70px;
}
.hero-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:22px;
  display:flex;align-items:center;gap:12px;
}
.hero-eyebrow::before{ content:'';width:34px;height:1px;background:var(--gold); }
.hero h1{
  font-size:clamp(2rem,6.76vh,4.5rem);
  max-width:14ch;font-weight:400;
}
.hero h1 em{ font-style:italic;color:var(--gold);font-weight:300; }
.hero-sub{
  margin-top:26px;max-width:44ch;font-size:17px;line-height:1.6;color:#C9C4B7;font-weight:300;
}
.hero-cta{
  margin-top:34px;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:#F2EEE4;padding:15px 26px;border:1px solid rgba(242,238,228,0.45);
  transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease;
}
.hero-cta:hover{ background:#F2EEE4; color:var(--ink); border-color:#F2EEE4; }
.hero-scroll{
  position:absolute;bottom:28px;right:min(12.44vh,90px);z-index:4;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;
  color:#B9B29B;text-transform:uppercase;
  writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;
}
.hero-scroll .tick{ width:1px;height:34px;background:#B9B29B; }

/* ============ CREDIBILITY / AWARDS STRIP (beat 02) ============ */
.stats{
  background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath transform='translate(5.4,5.4) scale(1.05)' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z' fill='rgba(238,241,245,0.05)'/%3E%3C/svg%3E");
  background-size:36px 36px;
  color:var(--chalk);
  padding:70px min(12.44vh,90px);
  position:relative;z-index:5;
}
.awards-row{
  max-width:var(--container-width);margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;
  gap:clamp(32px,10.67vh,72px);
}
.award-badge{
  width:64px;height:64px;
  flex-shrink:0;
}
.award-badge--wide{ width:78px; }
.award-badge svg{
  display:block;width:100%;height:100%;
  color:#c6e8e9;
  transition:color 0.3s ease;
}
.award-badge:hover svg{ color:#ffffff; }

/* ============ DILEMMA (beat 03) ============ */
.dilemma{ background:var(--chalk);padding-top:min(8vh,80px);padding-bottom:min(4vh,40px); }
.dilemma .head{ max-width:820px; }
.dilemma h2{ font-size:clamp(1.7rem,6.22vh,3rem);margin-top:min(1.5vh,12px); }
.dilemma h2 em{ font-style:italic;color:var(--brick); }
.dilemma-grid{ margin-top:min(5vh,48px);display:grid;grid-template-columns:1fr 1fr;gap:60px; }
.worry-list{ display:flex;flex-direction:column; }
.worry{
  padding:min(2vh,16px) 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
  position:relative;
}
.worry:last-child{ border-bottom:1px solid var(--line); }
.worry .tag{ font-family:var(--mono);font-size:11px;color:var(--brick);padding-top:3px; }
.worry p{ font-size:16.5px;line-height:1.55;color:var(--ink-soft);max-width:40ch; }
.quote-block{
  align-self:start;position:relative;padding:min(3.5vh,28px);
  background:var(--chalk-2);
}
.quote-block blockquote{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,2.84vh,1.4rem);line-height:1.44;color:var(--ink);
}
.quote-block blockquote .word{ display:inline-block; }
.quote-block cite{
  display:block;margin-top:22px;font-style:normal;
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.04em;
  color:var(--ink-soft);
}

.dilemma-calc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brick);
  border: 1.5px solid var(--brick);
  padding: 12px 28px;
  transition: all 0.3s ease;
  font-weight: 500;
  text-decoration: none;
}
.dilemma-calc-link:hover {
  background: var(--brick);
  color: #ffffff;
}

/* ============ WHO THEY ARE (beat 04) ============ */
.who{ background:var(--ink);color:var(--chalk);overflow:hidden; }
.who-bg{ position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none; }
.who-bg img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1);
  opacity:0.1;
  transform:scale(1.06);
}
.who > .section-inner{ position:relative;z-index:1; }
.who-inner{ display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:start; }
.who h2{ font-size:clamp(1.6rem,5.33vh,2.6rem);color:var(--chalk);max-width:12ch; }
.who h2 em{ color:var(--gold);font-style:italic; }
.who-copy p{ font-size:16.5px;line-height:1.65;color:#C9C4B7;margin-top:20px;max-width:52ch; }
.team-row{ margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:26px 30px; }
.team-item{
  border-top:1px solid var(--line-dark);
  padding:16px 8px 16px;
  cursor:pointer;
  transition:background 0.3s ease, padding 0.3s ease;
  border-bottom:1px solid transparent;
}
.team-item:hover{
  background:rgba(238,241,245,0.03);
}
.team-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.team-item .name{ font-family:var(--serif);font-size:1.05rem;color:var(--chalk); }
.team-toggle-icon{
  position:relative;
  width:12px;height:12px;
  display:inline-block;
  flex-shrink:0;
  opacity:0.55;
  transition:transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}
.team-item:hover .team-toggle-icon,
.team-item.is-expanded .team-toggle-icon{
  opacity:1;
  transform:rotate(90deg);
}
.team-toggle-icon::before,
.team-toggle-icon::after{
  content:'';
  position:absolute;
  background:var(--gold);
  transition:transform 0.35s ease;
}
.team-toggle-icon::before{
  top:5px;left:0;
  width:12px;height:2px;
}
.team-toggle-icon::after{
  top:0;left:5px;
  width:2px;height:12px;
}
.team-item:hover .team-toggle-icon::after,
.team-item.is-expanded .team-toggle-icon::after{
  transform:scaleY(0);
}
.team-item .yrs{ font-family:var(--mono);font-size:10.5px;color:var(--gold);letter-spacing:0.04em;margin-top:4px; }
.team-bio{
  max-height:0;
  opacity:0;
  overflow:hidden;
  font-size:13px;
  line-height:1.6;
  color:#C9C4B7;
  margin-top:0;
  transition:max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, margin-top 0.4s ease;
}
.team-item:hover .team-bio,
.team-item.is-expanded .team-bio{
  max-height:180px;
  opacity:1;
  margin-top:12px;
}
.who-logos{
  margin-top:44px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.who-logos img{ height:46px;width:auto;border-radius:3px; }
.who-logos .arb-logo{
  height:76px;
  filter:brightness(0) invert(1);
}

/* --- WHO THEY ARE TESTIMONIALS CAROUSEL --- */
.who-testimonials-container {
  max-width: var(--container-width);
  margin: 0 auto;
  border-top: 1px solid var(--line-dark);
  margin-top: min(8vh, 80px);
  padding-top: min(6vh, 60px);
}
.who-testimonials {
  position: relative;
  text-align: center;
}
.who-testimonials__title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vh, 2.4rem);
  color: var(--chalk);
  margin: 0 auto min(4vh, 40px);
  font-weight: 500;
}
.testimonials-slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}
.testimonials-viewport {
  overflow: hidden;
  margin: 0 60px; /* Space for the absolute side arrows */
}
.testimonials-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.testimonial-slide {
  flex: 0 0 100%;
  text-align: center;
  opacity: 0.15;
  transition: opacity 0.5s ease;
  padding: 0 10px;
}
.testimonial-slide.is-active {
  opacity: 1;
}
.testimonial-text {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3.2vh, 1.55rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--chalk-2);
  max-width: 44ch;
  margin: 0 auto 24px;
  font-weight: 300;
}
.testimonial-author {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-transform: uppercase;
}
.testimonial-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  padding: 0;
}
.testimonial-arrow:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.testimonial-arrow--prev {
  left: 0;
}
.testimonial-arrow--next {
  right: 0;
}
.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: min(4vh, 32px);
}
.testi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  border: none;
  cursor: pointer;
  opacity: 0.4;
  padding: 0;
  transition: all 0.3s ease;
}
.testi-dot:hover {
  opacity: 0.8;
}
.testi-dot.is-active {
  background: var(--gold);
  opacity: 1;
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .testimonials-viewport {
    margin: 0 45px;
  }
  .testimonial-arrow {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 480px) {
  .testimonials-viewport {
    margin: 0;
  }
  .testimonials-slider {
    padding-bottom: 50px;
  }
  .testimonial-arrow {
    top: auto;
    bottom: 0;
    transform: none;
  }
  .testimonial-arrow--prev {
    left: calc(50% - 45px);
  }
  .testimonial-arrow--next {
    right: calc(50% - 45px);
  }
  .testimonials-dots {
    margin-top: 15px;
  }
}

/* ============ FEATURED (beat 04, moved before the team) ============ */
.featured{
  background-color:var(--chalk);
  background-image:radial-gradient(rgba(21,34,35,0.08) 1.5px, transparent 1.5px);
  background-size:26px 26px;
  padding-top:min(8vh,80px);padding-bottom:min(4vh,40px);
}
.featured-head{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px; }
.featured-head h2{ font-size:clamp(1.6rem,5.69vh,2.6rem);max-width:13ch; }
.featured-head h2 em{ font-style:italic;color:var(--heritage); }
.featured-head__right{ display:flex;align-items:center;gap:18px; }

.carousel-nav{ display:flex;gap:6px; }
.carousel-nav__btn{
  width:28px;height:28px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--brick);
  background:transparent;
  color:var(--brick);
  cursor:pointer;
  transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease;
}
.carousel-nav__btn svg{ width:12px;height:12px; }
.carousel-nav__btn:hover{
  background:var(--brick);
  color:var(--chalk);
  border-color:var(--brick);
}

/* Full-bleed, click-and-drag horizontal carousel with momentum
   (script.js) and an infinite loop in both directions: the track
   holds three identical .carousel-set copies back to back, and a
   scroll listener silently shifts scrollLeft by one set-width when
   it nears either end, snapping back into the middle copy — since
   the copies are pixel-identical the jump is invisible. Only the
   middle (real) copy is staggered in on scroll / reachable by
   keyboard; the flanking copies are aria-hidden loop buffers.
   Frames keep their own varied heights (top-aligned, uneven at the
   bottom) so width follows each photo's natural aspect ratio at
   that height — a real contact-sheet "different scale" look. */
.carousel{
  margin-top:34px;
  /* Break out of .featured's own inherited section padding (the
     same min(12.44vh,90px) every other section uses — left untouched
     here so section headings all stay aligned) rather than
     removing that padding at the section level, which would
     misalign this section's heading against every other one's. */
  margin-left:calc(-1 * min(12.44vh,90px));
  margin-right:calc(-1 * min(12.44vh,90px));
  width:calc(100% + 2 * min(12.44vh,90px));
  overflow-x:auto;
  overflow-y:hidden;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 0 26px;
  overscroll-behavior-x:contain;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel.is-dragging{ cursor:grabbing; }
.carousel-track{
  display:flex;
  align-items:flex-start;
  gap:3px;
  width:max-content;
}
.carousel-set{
  display:flex;
  align-items:flex-start;
  gap:3px;
}
.carousel-item{
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
  /* Each figure's --h is now itself a vh value (33vh-62vh, converted
     from the old flat-px set by dividing every value by the same
     constant, so the ratios between frames are pixel-identical to
     before) rather than a px ceiling clamped per-item. A per-item
     min() cap flattened every frame that happened to exceed it down
     to the same height, destroying the "different scale" look on
     shorter screens; pure vh scales the whole row proportionally
     with the viewport instead, so relative height differences hold
     at any resolution — matches how a real photo contact-sheet
     reference site does it. */
  height:var(--h, 45vh);
}
.carousel-item img{
  height:100%;
  width:auto;
  display:block;
  object-fit:cover;
  background:#ddd;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
/* A few frames are forced to a tall 9:16 crop instead of following
   their source image's own aspect ratio — width is derived from
   the (taller) height automatically via aspect-ratio, cropped to
   fit with object-fit:cover. */
.carousel-item--portrait img{
  aspect-ratio:9/16;
  width:auto;
}
.carousel-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px;
  background:rgba(21,34,35,0.4);
  opacity:0;
  transform:scale(1.01);
  transform-origin:center;
  transition:opacity 0.4s ease,transform 0.4s ease;
  pointer-events:none;
}
.carousel-item:hover .carousel-overlay,
.carousel-item:focus-within .carousel-overlay{
  opacity:1;
  /* Scaling down from a hair over full-bleed to 98.5% (rather than
     resizing inset/margin) leaves an even gap on all four sides
     without needing to know the frame's own width/height. Half the
     previous 97% shrink again, down to a near-hairline seam. */
  transform:scale(0.985);
}
.carousel-overlay .num{
  font-family:var(--mono);font-size:33px;letter-spacing:0.02em;color:var(--gold);margin-bottom:10px;line-height:1;
}
.carousel-overlay .desc{
  font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.3;color:#F2EEE4;max-width:22ch;
}
/* No mobile-specific override needed anymore — .carousel-item's
   height is pure vh now, so it already scales proportionally with
   the actual viewport on any device/orientation without a separate
   cap layered on top. */

/* ============ PROCESS (beat 06) — now on a light background ============ */
.process{ background:var(--chalk);color:var(--ink);overflow:hidden; }
.process-bg{ position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none; }
.process-bg img{
  width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);
  opacity:0.07;transform:scale(1.04);
}
.process > .section-inner{ position:relative;z-index:1; }
.process-head{ max-width:640px; }
.process-head h2{ color:var(--ink);font-size:clamp(1.6rem,5.69vh,2.6rem); }
.process-head h2 em{ color:var(--brick);font-style:italic; }
.steps{ margin-top:60px; }
.step{ border-top:1px solid var(--line); }
.steps .step:last-child{ border-bottom:1px solid var(--line); }
.step-toggle{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:90px 1fr 24px;gap:24px;align-items:baseline;
  padding:26px 0;color:inherit;
}
.step .sk-num{ font-family:var(--mono);font-size:12px;color:var(--brick);letter-spacing:0.05em; }
.step .s-name{ font-family:var(--serif);font-size:1.2rem;color:var(--ink); }
.step .s-teaser{ font-size:14.5px;line-height:1.55;color:var(--ink-soft);max-width:46ch;margin-top:0.4rem; }
.step-plus{ position:relative;width:16px;height:16px;justify-self:end; }
.step-plus::before,.step-plus::after{
  content:'';position:absolute;top:50%;left:50%;background:var(--brick);
  transform:translate(-50%,-50%);transition:transform 0.3s ease;
}
.step-plus::before{ width:13px;height:1.5px; }
.step-plus::after{ width:1.5px;height:13px; }
.step-toggle[aria-expanded="true"] .step-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.step-detail{ height:0;overflow:hidden;grid-column:1/-1; }
.step-detail-inner{ padding:0 0 26px 114px;max-width:52ch; }
.step-detail p{ font-size:14px;line-height:1.7;color:var(--ink-soft); }
@media (max-width:640px){ .step-detail-inner{ padding-left:0; } }

/* Guide card, relocated from the old (now-removed) reassurance
   section to sit at the bottom of Process — same card, just no
   longer paired with a second column, so it's capped to a sane
   width and given a divider to separate it from the steps above. */
.guide-card--in-process{
  margin-top:70px;
  padding-top:50px;
}

/* No boxed card background — the brochure shot and its copy sit directly on the section */
.guide-card{
  display:flex;
  gap:40px;
  align-items:flex-start;
}
.guide-card__media{
  flex:0 0 auto;
  width:364px;
  aspect-ratio:16/10;
  overflow:hidden;
}
.guide-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.guide-card__content{
  flex:1;
  min-width:0;
  display:grid;
  grid-template-areas:
    "label ."
    "title desc"
    "list  desc";
  grid-template-columns:1fr 1.2fr;
  grid-template-rows:auto auto auto;
  gap:0 60px;
}
.guide-card__label{ grid-area:label; margin-bottom:16px; }
.guide-card__title{ grid-area:title; }
.guide-card__desc{ grid-area:desc; }
.guide-card__list{ grid-area:list; margin-top:24px; }

.guide-card .sheet-label{ margin-bottom:16px; }
.guide-card h3{ font-size:1.35rem;line-height:1.2; }
.guide-card p{ font-size:14.5px;color:var(--ink-soft);line-height:1.55; }
.guide-list{ display:flex;flex-direction:column;gap:8px; }
.guide-list span{ font-family:var(--mono);font-size:11.5px;color:var(--heritage); }

/* ============ ACTION (beat 08) ============ */
.action{
  position:relative;overflow:hidden;
  color:var(--chalk);
  padding:0;
}
.action-media{ position:absolute;inset:0;overflow:hidden; }
.action-media img{ width:100%;height:120%;object-fit:cover; }
.action-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(21,34,35,0.88) 0%, rgba(21,34,35,0.93) 55%, rgba(21,34,35,0.97) 100%);
}
.action > .section-inner{
  position:relative;z-index:2;
  padding:min(8vh,80px) 0 0;
}
.action-head{ text-align:center;max-width:760px;margin:0 auto; }
.action-head h2{ font-size:clamp(1.8rem,7.11vh,3.2rem);color:var(--chalk); }
.action-head h2 em{ font-style:italic;color:var(--gold); }
.action-head p{ margin-top:20px;font-size:16px;color:#C9C4B7;max-width:48ch;margin-left:auto;margin-right:auto;line-height:1.6; }

.action-contact{
  margin:44px auto 0;max-width:640px;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
}
.action-contact a{
  flex:1 1 220px;padding:1.1rem 1.4rem;text-align:center;
  border:1px solid rgba(238,241,245,0.22);
  transition:border-color 0.3s ease, background 0.3s ease;
}
.action-contact a:hover{ border-color:var(--gold);background:rgba(255,255,255,0.04); }
.action-contact .lbl{
  display:block;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:0.45rem;
}
.action-contact .val{ font-family:var(--serif);font-size:1.05rem; }

.qualify{ max-width:640px;margin:56px auto 0; }
.qualify-label{
  font-family:var(--mono);font-size:0.76rem;letter-spacing:0.03em;color:var(--gold);
  text-align:center;margin-bottom:1.6rem;
}
.qualify__group + .qualify__group{ margin-top:1.4rem; }
.qualify__q{
  display:block;font-family:var(--serif);font-size:1rem;color:var(--chalk);margin-bottom:0.7rem;
}
.qualify__options{ display:flex;flex-wrap:wrap;gap:0.55rem; }
.qualify__opt{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.82);font-size:0.82rem;padding:0.55rem 1.05rem;
  border-radius:100px;cursor:pointer;
  transition:background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.qualify__opt:hover{ border-color:rgba(255,255,255,0.5); }
.qualify__opt.is-active{ background:var(--brick);border-color:var(--brick);color:#fff; }

.action-form{
  max-width:640px;margin:2rem auto 0;
  display:flex;flex-direction:column;gap:0.9rem;
}
.action-form-row{ display:flex;gap:0.9rem;flex-wrap:wrap; }
.action-form input,.action-form textarea{
  flex:1 1 220px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.2);
  padding:0.85rem 1.05rem;color:#fff;font-family:var(--sans);font-size:0.9rem;
}
.action-form input::placeholder,.action-form textarea::placeholder{ color:rgba(255,255,255,0.45); }
.action-form input:focus,.action-form textarea:focus{ outline:none;border-color:var(--gold); }
.action-form button{
  align-self:center;margin-top:0.6rem;padding:0.95rem 2.4rem;
  background:var(--brick);color:#fff;border:none;
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;transition:background 0.3s ease, transform 0.3s ease;
}
.action-form button:hover{ background:var(--brick-deep);transform:translateY(-1px); }
.action-form-note{ text-align:center;font-size:0.74rem;color:rgba(255,255,255,0.4); }

.action-footer{
  position:relative;z-index:2;margin-top:70px;
  padding:2rem min(12.44vh,90px) 2.4rem;
  border-top:1px solid rgba(255,255,255,0.14);
  font-family:var(--mono);font-size:11px;letter-spacing:0.03em;
  color:rgba(255,255,255,0.5);text-align:center;
}

/* ============ Image Mask Reveal ============ */
.media-reveal{
  clip-path:inset(0% 0% 100% 0%);
  will-change:clip-path;
}

/* ============ Custom Cursor ============ */
.custom-cursor-dot{
  position:fixed;top:0;left:0;width:6px;height:6px;
  background-color:var(--brick);border-radius:50%;
  pointer-events:none;z-index:10000;
  transform:translate3d(-50%,-50%,0);
  transition:width 0.2s,height 0.2s,background-color 0.2s;
  will-change:transform;opacity:0;
}
.custom-cursor-follower{
  position:fixed;top:0;left:0;width:36px;height:36px;
  border:1.5px solid var(--brick);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate3d(-50%,-50%,0);
  will-change:transform;
  transition:border-color 0.3s,background-color 0.3s,width 0.3s,height 0.3s,opacity 0.3s;
  opacity:0;
}
.custom-cursor-follower.is-hovered{
  width:56px;height:56px;background-color:rgba(214,51,108,0.08);border-color:var(--brick);
}
.custom-cursor-dot.is-hovered{ width:10px;height:10px;background-color:var(--brick); }
.custom-cursor-follower.is-dark-bg{ border-color:var(--gold); }
.custom-cursor-dot.is-dark-bg{ background-color:var(--gold); }
.custom-cursor-follower.is-dark-bg.is-hovered{
  background-color:rgba(169,203,232,0.12);border-color:var(--gold);
}
@media (pointer:coarse){
  .custom-cursor-dot,.custom-cursor-follower{ display:none!important; }
}

@media (max-width:860px){
  .dilemma-grid,.who-inner{ grid-template-columns:1fr; }
  .guide-card--in-process{ max-width:none; }
  .guide-card{ flex-direction:column; gap:28px; }
  .guide-card__media{ width:100%; max-width:364px; }
  .guide-card__content{
    grid-template-areas:
      "label"
      "title"
      "desc"
      "list";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 16px;
  }
  .guide-card__label{ margin-bottom:0; }
  .guide-card__list{ margin-top:0; }
  .awards-row{ gap:28px 40px; }
  .award-badge{ width:52px;height:52px; }
  .award-badge--wide{ width:64px; }
  .team-row{ grid-template-columns:1fr; }
  .step-toggle{ grid-template-columns:50px 1fr 24px; }
}

/* These two used to trigger at 1600/1920px — i.e. exactly at a
   standard "HD" 1920x1080 monitor — widening the container right
   where the complaint was coming from (1180px -> 1560px cuts the
   side margins roughly in half, and the vw-driven clamp() headings
   are also near their upper bound at that width, so the two effects
   compound). Pushed out well past 1920 and past 2560 (QHD) so both
   land on the base 1180px container; only genuine 4K/ultrawide
   displays get the wider treatment now. */
@media (min-width: 2200px) {
  :root {
    --container-width: 1380px;
  }
}

@media (min-width: 2600px) {
  :root {
    --container-width: 1560px;
  }
}

@media (min-width: 1360px) {
  .site-header {
    padding-left: calc((100% - var(--container-width)) / 2);
    padding-right: calc((100% - var(--container-width)) / 2);
  }
}

/* Raised from 1440 to 2000px — the original threshold, like the
   --container-width one above, never reached a standard 1920px HD
   screen, so none of this section's size-downs (padding, hero
   height, paragraph sizes) were actually applying at the exact
   resolution they were needed for. */
@media (max-width: 2000px) {
  :root {
    --container-width: 1024px;
  }
  .hero {
    min-height: 500px;
  }
  .hero-content {
    padding-bottom: 40px;
  }
  .hero-sub {
    margin-top: 16px;
    font-size: 15px;
  }
  .hero-cta {
    margin-top: 20px;
    padding: 12px 20px;
  }
  section {
    padding: clamp(60px, 14.22vh, 100px) clamp(24px, 8.89vh, 60px);
  }
  .dilemma-grid {
    gap: clamp(24px, 7.11vh, 44px);
  }
  .who-inner {
    gap: clamp(32px, 8.89vh, 50px);
  }
  .guide-card__content {
    gap: 0 clamp(24px, 7.11vh, 44px);
  }
  .worry p, .who-copy p {
    font-size: 15px;
  }
  .step .s-teaser, .guide-card p {
    font-size: 13.5px;
  }
  .step-detail p {
    font-size: 13px;
  }
}

@media (max-width: 1200px) {
  :root {
    --container-width: 920px;
  }
}