
/* ==========================================================================
   CAPSTONE HOUSE — GROUND FLOOR
   All rules scoped to .ch-page. No html/body dependencies.
   ========================================================================== */

.ch-page{
  /* --- Brand system: extracted from capstonelife.in --- */
  --ch-accent:      #F05E3E;   /* coral-orange — CTA fill, arrows, rules      */
  --ch-accent-2:    #F4A147;   /* amber — highlights on dark, hover states    */
  --ch-sand:        #E2D6C9;   /* warm neutral section background             */
  --ch-cream:       #FBF4F4;   /* off-white page ground                       */
  --ch-ink:         #333333;   /* primary text + headings                     */
  --ch-ink-deep:    #2F2F2F;   /* dark section backgrounds                    */
  --ch-muted:       #656565;   /* body / secondary text                       */
  --ch-line:        #E5E5E5;   /* hairline dividers                           */
  --ch-white:       #FFFFFF;
  --ch-scrim:       26,20,18;  /* warm dark scrim base (rgb triplet)          */

  /* Selection + pointer feedback. The UA defaults (blue selection block,
     grey tap flash) are the last stock colours that leak through the brand. */
  --ch-sel:         #FADFD6;   /* highlighter tint on light grounds           */
  --ch-sel-ink:     #2F2F2F;   /* 10.4:1 on --ch-sel                          */
  --ch-sel-dark:    rgba(244,161,71,.34);  /* amber veil on dark bands        */
  --ch-tint:        rgba(240,94,62,.055);  /* hover wash on light grounds     */
  --ch-tint-2:      rgba(240,94,62,.10);   /* pressed wash                    */

  --ch-sec:   clamp(56px, 7.2vw, 108px);   /* vertical section rhythm */
  --ch-gut:   clamp(20px, 5vw, 48px);      /* horizontal gutter       */
  --ch-max:   1200px;
  --ch-r:     4px;                          /* square-ish corners      */

  /* Layout-critical: do not rely on body */
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;              /* kills any stray horizontal scroll        */
  background: var(--ch-cream);
  color: var(--ch-muted);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){ .ch-page{ scroll-behavior: auto; } }

.ch-page *, .ch-page *::before, .ch-page *::after{ box-sizing: border-box; }
.ch-page :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd,dt,fieldset,legend){ margin:0; padding:0; }
.ch-page :where(ul,ol){ list-style: none; }
.ch-page :where(img,svg){ display:block; max-width:100%; }
.ch-page :where(img){ height:auto; }
.ch-page :where(button,input,select,textarea){ font:inherit; color:inherit; }
.ch-page :where(a){ color: inherit; text-decoration: none; }

/* --- Focus ring: visible, brand-coloured, never removed --- */
.ch-page :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline: 3px solid var(--ch-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.ch-page .ch-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--ch-ink-deep); color: var(--ch-white);
  padding: 12px 20px; font-weight:600; font-size:15px;
}
.ch-page .ch-skip:is(:hover,:focus){ left:12px; top:12px; color: var(--ch-white); }

/* ==========================================================================
   SELECTION + POINTER FEEDBACK
   Never let the UA blue show. `::selection` and `::-moz-selection` must stay
   in SEPARATE rules — a combined selector list is dropped whole by browsers
   that do not know one of the two.
   ========================================================================== */
.ch-page ::selection{ background: var(--ch-sel); color: var(--ch-sel-ink); text-shadow:none; }
.ch-page ::-moz-selection{ background: var(--ch-sel); color: var(--ch-sel-ink); text-shadow:none; }
.ch-page::selection{ background: var(--ch-sel); color: var(--ch-sel-ink); }

/* On the dark bands a light highlighter block flashes; veil the text instead. */
.ch-page :where(.ch-hero, .ch-sec--dark) ::selection{ background: var(--ch-sel-dark); color: var(--ch-white); }
.ch-page :where(.ch-hero, .ch-sec--dark) ::-moz-selection{ background: var(--ch-sel-dark); color: var(--ch-white); }

/* Kill the touch tap flash — every control below has a real :active state. */
.ch-page,
.ch-page :where(a,button,input,select,textarea,summary,[tabindex]){
  -webkit-tap-highlight-color: transparent;
}

/* Control labels are chrome, not copy: dragging or double-tapping across a
   button should press it, not paint a selection block over the label.
   Body copy, addresses and phone numbers stay selectable. */
.ch-page :where(.ch-btn, .ch-faq__q, .ch-float, .ch-logo, .ch-skip, .ch-faq__ico){
  -webkit-user-select: none; user-select: none;
}
.ch-page :where(.ch-btn, .ch-faq__q, .ch-float){ touch-action: manipulation; }

/* ==========================================================================
   THEME-STATE GUARD
   Astra skins bare `a` and `button` in their interaction states:
     a:hover, a:focus              { color: var(--ast-global-color-1) }
     button:hover, button:focus    { background: var(--ast-global-color-1);
                                     color: #fff }
   Both are (0,1,1) — one class plus one element — so they out-specify EVERY
   (0,1,0) single-class base rule in this file. That is the real cause of the
   solid blue FAQ row (the row keeps focus after a click) and of blue label
   text on the coral CTA (its :hover set background only, never color).
   Two defences, in order of preference:
     1. Every ch- component below declares its own :hover/:focus/:active
        colours at (0,2,0), which beats Astra outright. Do this for any new
        component — do NOT rely on the base rule holding.
     2. The guard below catches elements carrying no ch- class at all.
        `html .ch-page` + element + zero-weight :where() = (0,1,2): above
        Astra's (0,1,1), still below every ch- rule, so it can never flatten
        a component's own state. Deliberately specificity-based, not order-
        based — Astra's inline CSS may be printed either side of this file.
   ========================================================================== */
html .ch-page a:where(:not([class*="ch-"])):where(:hover,:focus,:active){ color: inherit; }
html .ch-page button:where(:not([class*="ch-"])):where(:hover,:focus,:active){
  background: none; color: inherit;
}

/* --- Type scale --- */
.ch-page :where(h1,h2,h3,h4,h5,h6){
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--ch-ink);
  line-height: 1.14;
  letter-spacing: -0.95px;     /* brand signature negative tracking */
}
.ch-page :where(h3,h4,h5,h6){ letter-spacing: -0.72px; line-height: 1.24; }

.ch-h2{ font-size: clamp(28px, 3.6vw, 46px); }
.ch-h3{ font-size: clamp(21px, 2.05vw, 27px); }
.ch-display{ font-family:'Abril Fatface', Georgia, 'Times New Roman', serif; font-weight:400; letter-spacing:-0.5px; }

.ch-lead{ font-size: clamp(16.5px, 1.32vw, 19px); line-height:1.68; }

/* Eyebrow — small caps label. Never accent-coloured on light (contrast). */
.ch-eyebrow{
  display:block;
  font-size: 12px; font-weight:700; line-height:1.5;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ch-ink);
}
.ch-eyebrow--onDark{ color: var(--ch-accent-2); }

/* Orange hairline mark — a brand motif, used as a rule not a fill */
.ch-mark{ width:38px; height:3px; background: var(--ch-accent); border:0; margin:0 0 18px; }
.ch-mark--c{ margin-inline:auto; }

.ch-wrap{ width:100%; max-width: var(--ch-max); margin-inline:auto; padding-inline: var(--ch-gut); }
.ch-sec{ padding-block: var(--ch-sec); }
.ch-sec--sand{ background: var(--ch-sand); color: var(--ch-ink); }   /* ink body text: AA on sand */
.ch-sec--white{ background: var(--ch-white); }
.ch-sec--dark{ background: var(--ch-ink-deep); color: var(--ch-sand); }
.ch-sec--dark :where(h1,h2,h3,h4){ color: var(--ch-white); }

.ch-shead{ max-width: 720px; margin-bottom: clamp(34px, 4vw, 56px); }
.ch-shead--c{ margin-inline:auto; text-align:center; }
.ch-shead .ch-eyebrow{ margin-bottom: 14px; }
.ch-shead p{ margin-top: 18px; }

/* ==========================================================================
   BUTTONS
   Contrast note: white on --ch-accent = 3.29:1 -> WCAG AA for LARGE text only.
   So every accent-filled button is >=19px/700 (= 14pt bold = "large text").
   Small controls use --ch-ink-deep (13.4:1) instead. This keeps the brand
   palette exact while holding AA on every text/background pair.
   ========================================================================== */
.ch-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 17px 28px;
  font-family:'Montserrat',sans-serif;
  font-size: 19px; font-weight:700; letter-spacing:-0.3px; line-height:1.1;
  border: 2px solid transparent; border-radius: var(--ch-r);
  cursor:pointer; text-align:center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.ch-btn svg{ flex:0 0 auto; }
.ch-btn--primary{ background: var(--ch-accent); color: var(--ch-white); }
.ch-btn--primary:hover{ background: #D94A2B; }
.ch-btn--ghost{ background: transparent; color: var(--ch-ink); border-color: var(--ch-ink); }
.ch-btn--ghost:hover{ background: var(--ch-ink); color: var(--ch-white); }
.ch-btn--onDark{ background: transparent; color: var(--ch-white); border-color: rgba(255,255,255,.72); }
.ch-btn--onDark:hover{ background: var(--ch-white); color: var(--ch-ink); border-color: var(--ch-white); }
.ch-btn--solidDark{ background: var(--ch-ink-deep); color: var(--ch-white); }
.ch-btn--solidDark:hover{ background: #1B1B1B; }
/* Label colour restated per state — see THEME-STATE GUARD. A variant appears
   here only for the states its own rules above do not already colour. */
.ch-btn--primary:is(:hover,:focus,:active),
.ch-btn--solidDark:is(:hover,:focus,:active),
.ch-btn--onDark:focus{ color: var(--ch-white); }
.ch-btn--ghost:focus{ color: var(--ch-ink); }
.ch-btn--sm{ font-size:15px; font-weight:600; padding: 11px 20px; letter-spacing:0; }
.ch-btn--block{ width:100%; }
@media (prefers-reduced-motion: no-preference){
  .ch-btn:hover{ transform: translateY(-1px); }
}
/* Pressed states. Declared AFTER the hover rules so a held pointer reads as
   pressed, not hovered, at equal specificity. */
.ch-btn:active{ transform: translateY(0); }
.ch-btn--primary:active{ background: #C4441F; }
.ch-btn--ghost:active{ background: #232323; border-color:#232323; color: var(--ch-white); }
.ch-btn--onDark:active{ background: #EFE7E0; border-color:#EFE7E0; color: var(--ch-ink); }
.ch-btn--solidDark:active{ background: #131313; }

/* Text link with the brand's thin orange underline */
.ch-link{
  font-weight:600; color: var(--ch-ink);
  border-bottom: 2px solid var(--ch-accent);
  padding-bottom: 1px;
}
.ch-link:hover{ color: var(--ch-accent); border-bottom-color: var(--ch-ink); }
.ch-link:is(:focus,:active){ color: var(--ch-ink); }
.ch-link{ transition: color .16s ease, border-color .16s ease; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.ch-hdr{
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,244,244,.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--ch-line);
  transition: padding .22s ease, box-shadow .22s ease;
}
.ch-hdr__in{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block: 18px;
  transition: padding .22s ease;
}
.ch-hdr.is-scrolled{ box-shadow: 0 1px 0 rgba(51,51,51,.10); }
.ch-hdr.is-scrolled .ch-hdr__in{ padding-block: 9px; }
.ch-hdr.is-scrolled .ch-logo__mark{ width: 30px; height: 30px; }

.ch-logo{ display:inline-flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; overflow:hidden; }
/* Colour is inherited here (the name/sub children set their own), but state it
   for the states anyway — see THEME-STATE GUARD. */
.ch-logo:is(:hover,:focus,:active){ color: inherit; }
.ch-logo__mark{ width:38px; height:38px; flex:0 0 auto; transition: width .22s ease, height .22s ease; }
.ch-logo__txt{ display:flex; flex-direction:column; line-height:1.05; min-width:0; row-gap:6px; }
.ch-logo__name{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px;
  letter-spacing:-0.4px; color: var(--ch-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ch-logo__sub{
  font-size:10px; font-weight:600; letter-spacing:1.3px; text-transform:uppercase;
  color: var(--ch-muted); white-space:nowrap;
}
.ch-hdr__cta{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.ch-hdr__tel{ font-size:15px; font-weight:600; color: var(--ch-ink); white-space:nowrap; }
.ch-hdr__tel{ transition: color .16s ease; }
.ch-hdr__tel:hover{ color: var(--ch-accent); }
.ch-hdr__tel:is(:focus,:active){ color: var(--ch-ink); }
@media (max-width: 640px){
  .ch-hdr__tel{ display:none; }
  .ch-logo__name{ font-size:15px; }
}
@media (max-width: 460px){
  .ch-logo__mark{ width:32px; height:32px; }
  .ch-hdr.is-scrolled .ch-logo__mark{ width:28px; height:28px; }
  .ch-logo__name{ font-size:14.5px; letter-spacing:-0.5px; }
  .ch-btn--sm{ padding:11px 15px; font-size:14.5px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.ch-hero{ position:relative; isolation:isolate; background: var(--ch-ink-deep); }
.ch-hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.ch-hero__media img{ width:100%; height:100%; object-fit:cover; object-position: 62% 50%; }
.ch-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg,
      rgba(var(--ch-scrim),.90) 0%,
      rgba(var(--ch-scrim),.80) 30%,
      rgba(var(--ch-scrim),.46) 62%,
      rgba(var(--ch-scrim),.20) 100%),
    linear-gradient(to top, rgba(var(--ch-scrim),.60) 0%, rgba(var(--ch-scrim),0) 42%);
}
.ch-hero__in{
  position:relative; z-index:2;
  padding-block: clamp(72px, 11vw, 148px) clamp(40px, 5vw, 64px);
  max-width: 860px;
}
.ch-hero h1{
  color: var(--ch-white);
  margin: 18px 0 0;
  font-size: clamp(33px, 5.1vw, 62px);
  line-height: 1.08;
}
.ch-hero h1 .ch-hero__l1{
  display:block;
  font-family:'Abril Fatface', Georgia, serif; font-weight:400;
  letter-spacing:-0.6px;
}
.ch-hero h1 .ch-hero__l2{
  display:block; margin-top:.34em;
  font-family:'Montserrat',sans-serif; font-weight:600;
  font-size: .70em; letter-spacing:-0.72px; line-height:1.2;
  color: rgba(255,255,255,.94);
}
.ch-hero h1 em{
  font-style: normal;
  box-shadow: inset 0 -0.14em 0 var(--ch-accent);
}
.ch-hero__sub{
  margin-top: 24px; max-width: 590px;
  color: rgba(255,255,255,.86);
  font-size: clamp(16px, 1.35vw, 19px); line-height:1.66;
}
.ch-hero__sub b{ color: var(--ch-white); font-weight:600; }
.ch-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 34px; }
@media (max-width: 560px){
  .ch-hero__cta{ gap:12px; }
  .ch-hero__cta .ch-btn{ width:100%; font-size:16px; padding:16px 14px; }
  .ch-final__cta .ch-btn{ width:100%; }
}

@media (max-width: 860px){
  .ch-hero__media img{ object-position: 58% 50%; }
  .ch-hero__scrim{
    background:
      linear-gradient(to bottom,
        rgba(var(--ch-scrim),.90) 0%,
        rgba(var(--ch-scrim),.86) 45%,
        rgba(var(--ch-scrim),.90) 100%);
  }
}

/* Location + availability strip */
.ch-strip{
  position:relative; z-index:2;
  border-top: 1px solid rgba(255,255,255,.20);
  background: rgba(var(--ch-scrim),.55);
}
.ch-strip ul{
  display:flex; flex-wrap:wrap; gap: 8px clamp(20px,3.4vw,46px);
  padding-block: 16px;
}
.ch-strip li{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:600; letter-spacing:.2px;
  color: rgba(255,255,255,.92);
}
.ch-strip svg{ color: var(--ch-accent-2); flex:0 0 auto; }

/* ==========================================================================
   STAT BAR
   ========================================================================== */
.ch-stats{ background: var(--ch-white); border-bottom:1px solid var(--ch-line); }
.ch-stats ul{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  padding-block: clamp(34px, 4.4vw, 60px);
  gap: clamp(22px, 3vw, 40px);
}
.ch-stat{ border-top: 3px solid var(--ch-accent); padding-top: 18px; }
.ch-stat__n{
  display:block;
  font-family:'Montserrat',sans-serif; font-weight:700; color: var(--ch-ink);
  font-size: clamp(30px, 4.1vw, 54px); line-height:1; letter-spacing:-1.6px;
  font-variant-numeric: tabular-nums;
}
.ch-stat__n small{ font-size:.42em; font-weight:700; letter-spacing:-0.3px; margin-left:.18em; }
.ch-stat__l{
  display:block; margin-top:10px;
  font-size:13px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase;
  color: var(--ch-muted);
}
@media (max-width: 760px){
  .ch-stats ul{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .ch-stat__l{ font-size:11.5px; letter-spacing:.7px; }
  .ch-stat__n small{ font-size:.38em; }
}

/* ==========================================================================
   PLUG AND WORK — value columns
   ========================================================================== */
.ch-vals{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(28px, 3.6vw, 56px); }
.ch-val__n{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:1.4px; color: var(--ch-muted); display:block; margin-bottom:12px;
}
.ch-val h3{ margin-bottom:12px; }
.ch-val p{ font-size:15.5px; }
.ch-val__hr{ border:0; border-top:1px solid var(--ch-line); margin-bottom:20px; }
@media (max-width: 860px){ .ch-vals{ grid-template-columns:1fr; gap:34px; } }

.ch-quote{
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--ch-white); border-left: 4px solid var(--ch-accent);
  border-radius: var(--ch-r);
}
.ch-quote p{
  font-family:'Montserrat',sans-serif; font-weight:600; color: var(--ch-ink);
  font-size: clamp(19px, 2.2vw, 27px); line-height:1.34; letter-spacing:-0.72px;
}

/* ==========================================================================
   WALKTHROUGH
   ========================================================================== */
.ch-band{ position:relative; }
.ch-band__fig{ position:relative; }
.ch-band__fig img{ width:100%; height: clamp(240px, 38vw, 470px); object-fit: cover; }
.ch-band__cap{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
  padding-top:14px;
  font-size:13px; font-weight:600; letter-spacing:.4px; color: var(--ch-muted);
}
.ch-band__cap b{ color: var(--ch-ink); }

.ch-rows{ display:grid; gap: clamp(52px, 7vw, 104px); margin-top: clamp(46px, 6vw, 84px); }
.ch-row{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 68px); align-items:center;
}
.ch-row--flip .ch-row__media{ order:2; }
.ch-row__media{ position:relative; }
.ch-row__media img{ width:100%; aspect-ratio: 16/9; object-fit:cover; border-radius: var(--ch-r); }
.ch-row__media--pair{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.ch-row__media--pair img{ aspect-ratio: 4/5; }
.ch-row__body .ch-eyebrow{ margin-bottom:14px; }
.ch-row__body h3{ margin-bottom:14px; }
.ch-row__body p{ font-size:16px; max-width: 46ch; }
.ch-fact{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:22px; padding:9px 16px 9px 14px;
  background: var(--ch-white); border:1px solid var(--ch-line); border-radius: var(--ch-r);
  font-size:14px; font-weight:700; color: var(--ch-ink); letter-spacing:-0.2px;
}
.ch-fact::before{ content:""; width:8px; height:8px; background: var(--ch-accent); flex:0 0 auto; }
@media (max-width: 880px){
  .ch-row{ grid-template-columns:1fr; gap:22px; }
  .ch-row--flip .ch-row__media{ order:0; }
}

/* ==========================================================================
   AMENITIES
   ========================================================================== */
.ch-amen{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px, 1.8vw, 22px); }
.ch-amen li{
  display:flex; gap:16px; align-items:flex-start;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(51,51,51,.10);
  border-radius: var(--ch-r);
  padding: clamp(20px, 2.2vw, 26px);
}
.ch-amen__ico{ flex:0 0 auto; width:28px; height:28px; color: var(--ch-ink); }
.ch-amen__ico svg{ width:28px; height:28px; }
.ch-amen h3{ font-size:16.5px; letter-spacing:-0.4px; line-height:1.35; }
.ch-amen p{ font-size:14px; line-height:1.6; color: #4A4A4A; margin-top:6px; }
@media (max-width: 900px){ .ch-amen{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .ch-amen{ grid-template-columns: 1fr; } }

/* ==========================================================================
   LOCATION
   ========================================================================== */
.ch-loc{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 4.4vw, 70px); align-items:center; }
.ch-loc__fig img{ width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius: var(--ch-r); }
.ch-loc__fig figcaption{ padding-top:12px; font-size:13px; font-weight:600; color: var(--ch-muted); letter-spacing:.3px; }
.ch-times{ margin-top: 26px; border-top:1px solid var(--ch-line); }
.ch-times__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding: 14px 0; border-bottom:1px solid var(--ch-line);
}
.ch-times dt, .ch-times__k{ font-size:15.5px; font-weight:600; color: var(--ch-ink); }
.ch-times__v{
  font-size:14px; font-weight:700; color: var(--ch-ink); white-space:nowrap;
  letter-spacing:-0.2px;
}
.ch-addr{
  margin-top:26px; padding: 20px 22px;
  background: var(--ch-white); border:1px solid var(--ch-line); border-radius: var(--ch-r);
  font-size:15px;
}
.ch-map{
  margin-top:20px; border:1px solid var(--ch-line); border-radius: var(--ch-r);
  overflow:hidden; background: var(--ch-white); line-height:0;
}
.ch-map iframe{ display:block; width:100%; height:300px; border:0; }
.ch-addr strong{ display:block; color: var(--ch-ink); font-weight:700; margin-bottom:4px; letter-spacing:-0.3px; }
@media (max-width: 900px){ .ch-loc{ grid-template-columns:1fr; } }

/* ==========================================================================
   ENGAGEMENT CARDS
   ========================================================================== */
.ch-plans{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(18px, 2.4vw, 30px); }
.ch-plan{
  display:flex; flex-direction:column;
  background: var(--ch-white); border:1px solid var(--ch-line);
  border-top: 4px solid var(--ch-accent);
  border-radius: var(--ch-r);
  padding: clamp(26px, 3.2vw, 40px);
}
.ch-plan h3{ margin-bottom:10px; }
.ch-plan__kicker{ font-size:13px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color: var(--ch-muted); margin-bottom:14px; display:block; }
.ch-plan > p{ font-size:15.5px; }
.ch-plan ul{ margin: 22px 0 0; display:grid; gap:11px; }
.ch-plan li{ display:flex; gap:11px; font-size:15px; line-height:1.55; }
.ch-plan li svg{ flex:0 0 auto; margin-top:5px; color: var(--ch-accent); }
.ch-por{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  margin-top:26px; padding-top:22px; border-top:1px solid var(--ch-line);
}
.ch-por__n{
  font-family:'Montserrat',sans-serif; font-weight:700; color: var(--ch-ink);
  font-size: clamp(21px, 2.1vw, 26px); letter-spacing:-0.72px;
}
.ch-por__t{ font-size:13.5px; font-weight:600; color: var(--ch-muted); }
.ch-plan .ch-btn{ margin-top:24px; }
@media (max-width: 820px){ .ch-plans{ grid-template-columns:1fr; } }

.ch-magnet{
  margin-top: clamp(24px, 3vw, 34px);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--ch-ink-deep); border-radius: var(--ch-r);
}
.ch-magnet p{ color: var(--ch-sand); font-size:16px; font-weight:500; flex:1 1 320px; min-width:0; }
.ch-magnet p b{ color: var(--ch-white); font-weight:700; }

/* ==========================================================================
   LEAD FORM
   ========================================================================== */
.ch-form-sec{ background: var(--ch-white); }
.ch-formgrid{ display:grid; grid-template-columns: .92fr 1.08fr; gap: clamp(34px, 4.6vw, 76px); align-items:start; }
@media (max-width: 900px){ .ch-formgrid{ grid-template-columns:1fr; } }

.ch-formaside h2{ margin-bottom:18px; }
.ch-tick{ margin-top:26px; display:grid; gap:13px; }
.ch-tick li{ display:flex; gap:12px; font-size:15.5px; line-height:1.55; }
.ch-tick svg{ flex:0 0 auto; margin-top:5px; color: var(--ch-accent); }
.ch-tick b{ color: var(--ch-ink); font-weight:700; }

.ch-formcard{
  background: var(--ch-cream);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-r);
  padding: clamp(24px, 3vw, 38px);
}
.ch-field{ margin-bottom: 20px; }
.ch-field > label,
.ch-field .ch-legend{
  display:block; margin-bottom:8px;
  font-size:14px; font-weight:700; color: var(--ch-ink); letter-spacing:-0.2px;
}
/* Required marker: --ch-accent on cream is only 3.0:1, so the glyph itself is
   --ch-ink (11.6:1) and the accent stays on the rules and CTAs. */
.ch-req{ color: var(--ch-ink); font-weight:700; }
.ch-hint{ display:block; font-size:13px; font-weight:500; color: var(--ch-muted); margin-top:-2px; margin-bottom:8px; letter-spacing:0; }
.ch-input, .ch-select{
  width:100%; padding: 14px 16px;
  background: var(--ch-white);
  border: 1px solid #CFC7C0; border-radius: var(--ch-r);
  font-size:16px; color: var(--ch-ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ch-input::placeholder{ color: #8A8A8A; }
.ch-input:hover, .ch-select:hover{ border-color: #A9A09A; }
.ch-input:focus, .ch-select:focus{ border-color: var(--ch-ink); box-shadow: 0 0 0 3px rgba(240,94,62,.22); }
.ch-input:focus:not(:focus-visible), .ch-select:focus:not(:focus-visible){ outline:none; }
.ch-input:focus-visible, .ch-select:focus-visible{ outline: 3px solid var(--ch-accent); outline-offset: 2px; }
.ch-select{
  appearance:none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23333' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 16px center; padding-right:44px;
}
.ch-tel{ display:flex; }
.ch-tel__cc{
  display:flex; align-items:center; padding: 0 14px;
  background: #F2ECE7; border:1px solid #CFC7C0; border-right:0;
  border-radius: var(--ch-r) 0 0 var(--ch-r);
  font-size:16px; font-weight:600; color: var(--ch-ink);
}
.ch-tel .ch-input{ border-radius: 0 var(--ch-r) var(--ch-r) 0; }

.ch-radios{ display:grid; gap:10px; border:0; }
.ch-radio{
  display:flex; align-items:center; gap:12px;
  padding: 13px 16px;
  background: var(--ch-white); border:1px solid #CFC7C0; border-radius: var(--ch-r);
  font-size:15.5px; color: var(--ch-ink); cursor:pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.ch-radio:hover{ border-color: #A9A09A; }
.ch-radio input{ accent-color: var(--ch-accent); width:18px; height:18px; flex:0 0 auto; margin:0; }
.ch-radio:has(input:checked){ border-color: var(--ch-ink); background: #FFF8F5; }
.ch-radio:has(input:focus-visible){ outline: 3px solid var(--ch-accent); outline-offset:2px; }

.ch-err{
  display:none; margin-top:7px;
  font-size:13.5px; font-weight:600; color: #B3300F;   /* 5.6:1 on cream — AA */
}
.ch-field.is-invalid .ch-err{ display:block; }
.ch-field.is-invalid .ch-input,
.ch-field.is-invalid .ch-select,
.ch-field.is-invalid .ch-tel__cc{ border-color: #B3300F; }
.ch-field.is-invalid .ch-radio{ border-color: #B3300F; }

.ch-formfoot{ margin-top: 26px; }
.ch-consent{ font-size:12.5px; line-height:1.6; color: var(--ch-muted); margin-top:14px; }
.ch-btn[aria-busy="true"]{ opacity:.72; cursor: progress; }
.ch-spin{ width:16px; height:16px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation: ch-spin .7s linear infinite; }
@keyframes ch-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ch-spin{ animation-duration: 2s; } }

.ch-success{
  display:none;
  background: var(--ch-cream); border:1px solid var(--ch-line);
  border-top: 4px solid var(--ch-accent); border-radius: var(--ch-r);
  padding: clamp(28px, 3.4vw, 44px);
}
.ch-success.is-on{ display:block; }
.ch-success__ico{ width:52px; height:52px; color: var(--ch-accent); margin-bottom:20px; }
.ch-success h3{ margin-bottom:12px; }
.ch-success p{ font-size:16px; }
.ch-success .ch-btn{ margin-top:24px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.ch-faq{ max-width: 860px; margin-inline:auto; border-top:1px solid var(--ch-line); }
.ch-faq__item{ border-bottom:1px solid var(--ch-line); }
.ch-faq__q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  /* Bled 12px past the row so the hover wash has breathing room, then pulled
     back by the same 12px — the text still starts 2px from the row edge. */
  width: calc(100% + 24px); margin-inline: -12px;
  padding: 22px 14px; background: transparent; border:0; cursor:pointer; text-align:left;
  border-radius: var(--ch-r);
  font-family:'Montserrat',sans-serif; font-weight:700; font-size: clamp(16px,1.5vw,18.5px);
  letter-spacing:-0.4px; line-height:1.4; color: var(--ch-ink);
  transition: color .18s ease, background-color .18s ease;
}
.ch-faq__q:focus{ color: var(--ch-ink); background: transparent; }
.ch-faq__q:hover{ color: var(--ch-accent); background: var(--ch-tint); }
.ch-faq__q:active{ color: var(--ch-accent); background: var(--ch-tint-2); }
@media (prefers-reduced-motion: reduce){ .ch-faq__q{ transition:none; } }
.ch-faq__ico{ flex:0 0 auto; width:20px; height:20px; margin-top:3px; color: var(--ch-accent); transition: transform .22s ease; }
.ch-faq__q[aria-expanded="true"] .ch-faq__ico{ transform: rotate(45deg); }
.ch-faq__a{ display:none; padding: 0 clamp(20px,4vw,64px) 26px 2px; }
.ch-faq__a.is-open{ display:block; }
.ch-faq__a p{ font-size:15.5px; }
.ch-faq__a p + p{ margin-top:12px; }
@media (prefers-reduced-motion: reduce){ .ch-faq__ico{ transition:none; } }

/* ==========================================================================
   FINAL CTA + FOOTER
   ========================================================================== */
.ch-final{ text-align:center; }
.ch-final h2{
  font-family:'Abril Fatface', Georgia, serif; font-weight:400; letter-spacing:-0.5px;
  font-size: clamp(28px, 4vw, 52px); line-height:1.14; max-width: 20ch; margin-inline:auto;
}
.ch-final p{ margin-top:20px; color: var(--ch-sand); font-size: clamp(16px,1.3vw,18px); max-width: 56ch; margin-inline:auto; }
.ch-final__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }

.ch-foot{ background: var(--ch-cream); border-top:1px solid var(--ch-line); padding-block: clamp(34px,4vw,54px); }
.ch-foot__in{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items:start; }
.ch-foot__brand{ font-size:14.5px; max-width: 46ch; }
.ch-foot__brand .ch-logo{ margin-bottom:16px; }
.ch-foot__contact{ display:grid; gap:10px; font-size:14.5px; }
.ch-foot__contact a{ font-weight:600; color: var(--ch-ink); }
.ch-foot__contact a{ transition: color .16s ease; }
.ch-foot__contact a:hover{ color: var(--ch-accent); }
.ch-foot__legal{
  margin-top: clamp(28px,3.4vw,40px); padding-top:20px; border-top:1px solid var(--ch-line);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  font-size:12.5px; color: var(--ch-muted);
}
@media (max-width: 760px){ .ch-foot__in{ grid-template-columns:1fr; } }

/* ==========================================================================
   FLOATING WHATSAPP + MOBILE STICKY BAR
   ========================================================================== */
.ch-float{
  position: fixed; right: 20px; bottom: 22px; z-index: 70;
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 20px 14px 16px;
  background: var(--ch-ink-deep); color: var(--ch-white);
  border-radius: 48px; box-shadow: 0 6px 22px rgba(47,47,47,.26);
  font-size:15px; font-weight:700; letter-spacing:-0.2px;
  transition: background-color .18s ease, box-shadow .22s ease, transform .18s ease;
}
.ch-float:hover{ background: #1B1B1B; box-shadow: 0 10px 28px rgba(47,47,47,.32); }
.ch-float:is(:hover,:focus,:active){ color: var(--ch-white); }
.ch-float:active{ transform: scale(.97); }
.ch-float svg{ flex:0 0 auto; color: var(--ch-accent-2); }

.ch-mobar{ display:none; }
@media (max-width: 760px){
  .ch-mobar{
    display:grid; grid-template-columns: 1fr 1fr; gap:10px;
    position: fixed; left:0; right:0; bottom:0; z-index: 75;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(251,244,244,.97);
    border-top:1px solid var(--ch-line);
    box-shadow: 0 -2px 14px rgba(47,47,47,.10);
  }
  .ch-mobar .ch-btn{ padding: 14px 10px; font-size:16px; }
  .ch-float{
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    padding: 12px 16px;
  }
  .ch-float__t{ display:none; }
  .ch-float{ border-radius:50%; padding:15px; }
  .ch-page{ padding-bottom: 86px; }   /* clear the sticky bar */
}

/* ==========================================================================
   MOTION — fade-up only, fully gated behind prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  .ch-page .ch-fade{ opacity:0; transform: translateY(22px); transition: opacity .62s ease, transform .62s cubic-bezier(.2,.7,.3,1); }
  .ch-page .ch-fade.is-in{ opacity:1; transform:none; }
}
.ch-page.ch-no-js .ch-fade{ opacity:1 !important; transform:none !important; }

.ch-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Print: keep it sane */
@media print{
  .ch-hdr, .ch-float, .ch-mobar, .ch-hero__media{ display:none !important; }
}


/* ==========================================================================
   THEME-OVERRIDE HARDENING — deliberately minimal.
   The base reset uses :where() (zero specificity). Astra already zeroes
   p/h/li margins itself, so the ONLY real conflict is Astra's
   `.ast-single-post .entry-content a` (0,2,1), which underlined every link.
   Do NOT re-declare margins here: `.ch-page p{margin:0}` is (0,1,1) and would
   out-specify the design's own `.ch-hero__sub{margin-top:24px}` (0,1,0),
   flattening spacing across the whole page.
   ========================================================================== */
.ch-page a, .ch-page a:link, .ch-page a:visited,
.ch-page a:hover, .ch-page a:focus, .ch-page a:active{ text-decoration: none !important; }
.ch-page ul, .ch-page ol{ list-style: none; }
.ch-page img, .ch-page svg{ display: block; max-width: 100%; }
.ch-page img{ height: auto; border-radius: 0; }
.ch-page button{ text-transform: none; }

/* ==========================================================================
   FLUENT FORMS SKIN (form id 3) — plugin markup wearing the ch- design
   ========================================================================== */
.ch-page .ch-ff .fluentform{ margin:0; }
.ch-page .ch-ff .ff-el-group{ margin-bottom:20px; }
.ch-page .ch-ff .ff-el-group:last-of-type{ margin-bottom:0; }
.ch-page .ch-ff .ff-el-input--label label,
.ch-page .ch-ff legend{
  font-family:'Montserrat',sans-serif; font-size:14px; font-weight:700;
  color: var(--ch-ink); letter-spacing:-0.2px; margin-bottom:8px; line-height:1.4;
}
.ch-page .ch-ff .ff-el-input--label.ff-el-is-required label:after,
.ch-page .ch-ff .ff-el-is-required > label:after{ color: var(--ch-ink) !important; }
.ch-page .ch-ff .ff-el-help-message{
  font-size:13px; font-weight:500; color: var(--ch-muted); margin:-2px 0 8px; line-height:1.5;
}
.ch-page .ch-ff input[type=text],
.ch-page .ch-ff input[type=email],
.ch-page .ch-ff input[type=tel],
.ch-page .ch-ff select{
  width:100%; padding:14px 16px; height:auto;
  background: var(--ch-white); color: var(--ch-ink);
  border:1px solid #CFC7C0; border-radius: var(--ch-r);
  font-family:'Montserrat',sans-serif; font-size:16px; line-height:1.4;
  box-shadow:none; transition: border-color .16s ease, box-shadow .16s ease;
}
.ch-page .ch-ff input::placeholder{ color:#8A8A8A; }
.ch-page .ch-ff input:hover, .ch-page .ch-ff select:hover{ border-color:#A9A09A; }
.ch-page .ch-ff input:focus, .ch-page .ch-ff select:focus{
  border-color: var(--ch-ink); box-shadow:0 0 0 3px rgba(240,94,62,.22); outline:none;
}
.ch-page .ch-ff input:focus-visible, .ch-page .ch-ff select:focus-visible{
  outline:3px solid var(--ch-accent); outline-offset:2px;
}
.ch-page .ch-ff .ff-el-form-check{
  display:flex; align-items:center; gap:12px; margin:0 0 10px;
  padding:13px 16px; background: var(--ch-white);
  border:1px solid #CFC7C0; border-radius: var(--ch-r);
  transition: border-color .16s ease, background-color .16s ease;
}
.ch-page .ch-ff .ff-el-form-check:hover{ border-color:#A9A09A; }
.ch-page .ch-ff .ff-el-form-check:has(input:checked){ border-color: var(--ch-ink); background:#FFF8F5; }
.ch-page .ch-ff .ff-el-form-check-label{
  display:flex; align-items:center; gap:12px; margin:0; width:100%;
  font-family:'Montserrat',sans-serif; font-size:15.5px; color: var(--ch-ink); cursor:pointer;
}
.ch-page .ch-ff .ff-el-form-check input[type=radio]{
  width:18px; height:18px; margin:0; flex:0 0 auto; accent-color: var(--ch-accent);
}
.ch-page .ch-ff .ff-el-form-check:has(input:focus-visible){ outline:3px solid var(--ch-accent); outline-offset:2px; }
.ch-page .ch-ff .ff-el-is-error input, .ch-page .ch-ff .ff-el-is-error select{ border-color:#B3300F; }
.ch-page .ch-ff .error, .ch-page .ch-ff .text-danger{
  display:block; margin-top:7px; font-family:'Montserrat',sans-serif;
  font-size:13.5px; font-weight:600; color:#B3300F;
}
.ch-page .ch-ff .ff-btn-submit, .ch-page .ch-ff button[type=submit]{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:6px; padding:17px 24px;
  background: var(--ch-accent); color: var(--ch-white);
  border:2px solid transparent; border-radius: var(--ch-r);
  font-family:'Montserrat',sans-serif; font-size:19px; font-weight:700;
  letter-spacing:-0.3px; line-height:1.1; cursor:pointer; box-shadow:none;
  transition: background-color .18s ease;
}
.ch-page .ch-ff .ff-btn-submit:hover, .ch-page .ch-ff button[type=submit]:hover{ background:#D94A2B; }
.ch-page .ch-ff .ff-btn-submit:active, .ch-page .ch-ff button[type=submit]:active{ background:#C4441F; }
/* Plugin controls follow the same rule as the hand-built ones: labels are
   chrome, so a drag across them presses instead of painting a selection. */
.ch-page .ch-ff .ff-btn-submit, .ch-page .ch-ff button[type=submit],
.ch-page .ch-ff .ff-el-form-check-label{
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
.ch-page .ch-ff .ff-btn-submit:focus-visible{ outline:3px solid var(--ch-ink); outline-offset:3px; }
.ch-page .ch-ff .ff-message-success{
  background: var(--ch-cream); border:1px solid var(--ch-line);
  border-top:4px solid var(--ch-accent); border-radius: var(--ch-r);
  padding: clamp(24px,3vw,36px); color: var(--ch-muted);
  font-family:'Montserrat',sans-serif; font-size:16px; line-height:1.7;
}
.ch-page .ch-ff .ff-message-success strong{ color: var(--ch-ink); }
.ch-page .ch-ff .ff-message-success a{ color: var(--ch-ink); font-weight:600; border-bottom:2px solid var(--ch-accent); }

/* ==========================================================================
   ASTRA RESET — this page brings its own header, footer and gutters
   ========================================================================== */
body.page-id-17 #masthead, body.page-id-17 #colophon,
body.page-id-17 .ast-above-header, body.page-id-17 .ast-below-header,
body.page-id-17 .site-header, body.page-id-17 .site-footer,
body.page-id-17 .ast-breadcrumbs-wrapper, body.page-id-17 .entry-header,
body.page-id-17 .ast-single-entry-banner,
body.page-id-17 #ast-scroll-top{ display:none !important; }
body.page-id-17 #page, body.page-id-17 #content, body.page-id-17 .site-content,
body.page-id-17 #primary, body.page-id-17 .site-main, body.page-id-17 .ast-container,
body.page-id-17 .entry-content, body.page-id-17 .ast-article-single{
  max-width:none !important; width:100% !important;
  margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important;
}
/* NOTE: do NOT put `overflow-x: hidden` on body here. It forces
   `overflow-y: auto`, which turns body into a nested scroll container and
   silently kills scroll events, position:sticky and IntersectionObserver.
   `.ch-page { overflow-x: clip }` already contains any horizontal overflow
   without creating a scrollport. */
