/*
Theme Name:        Crestwell
Theme URI:         https://crestwellbuildinggroup.com
Description:        Self-contained theme for Crestwell Building Group — a custom home builder in GTA North. Editorial design system on Fraunces + Inter with self-hosted variable fonts. No page-builder dependency; Elementor optional for any extra pages.
Author:            Crestwell Building Group
Author URI:        https://crestwellbuildinggroup.com
Version:           2.2.1
Requires at least: 6.0
Requires PHP:      7.4
Text Domain:       crestwell
*/

/* =========================================================================
   1 · SELF-HOSTED VARIABLE FONTS
   Fraunces carries an optical-size (opsz) axis 9–144 — we lock it to 144
   for all display type (see §3). Inter carries a weight axis 100–900.
   ========================================================================= */
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-opsz-normal.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-opsz-italic.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-wght-normal.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-wght-italic.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
}

/* =========================================================================
   2 · DESIGN TOKENS  (mirror these into Elementor → Site Settings → Globals)
   ========================================================================= */
:root{
  --crw-ink:#0E1014;        /* headings, dark sections, buttons   → Global: Primary */
  --crw-bronze:#8B6F3A;     /* accent only — never a field         → Global: Accent  */
  --crw-paper:#F4F2EC;      /* primary background                                    */
  --crw-cream:#E8E3D6;      /* secondary / body-led surface                          */
  --crw-rule:#D9D4C7;       /* hairlines, dividers                                   */
  --crw-slate:#3A4049;      /* body text                           → Global: Text    */
  --crw-graphite:#1D2128;   /* dark surface variant                                  */
  --crw-muted:#8A8478;      /* meta labels, annotations                              */

  --crw-display:"Fraunces", Georgia, "Times New Roman", serif;
  --crw-body:"Inter", system-ui, -apple-system, sans-serif;

  --crw-opsz:"opsz" 144;    /* Fraunces display lock */
  --crw-maxw:1180px;
  --crw-ease:cubic-bezier(.2,.7,.2,1);
}

/* =========================================================================
   3 · BASE TYPOGRAPHY  (backs up the Elementor globals so the look holds
   even where a global isn't applied; guarantees the opsz-144 lock)
   ========================================================================= */
body{
  background:var(--crw-paper);
  color:var(--crw-slate);
  font-family:var(--crw-body);
  font-size:17px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Fraunces everywhere it's used for display, with the optical size pinned.
   Inter has no opsz axis, so this property is harmlessly ignored on body text. */
h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.crw-display{
  font-family:var(--crw-display);
  font-variation-settings:var(--crw-opsz);
  font-weight:400;
  color:var(--crw-ink);
  line-height:1.05;
  letter-spacing:-.012em;
}

a{color:var(--crw-bronze);text-decoration:none;}
strong,b{font-weight:600;color:var(--crw-ink);}

/* Accent helpers — wrap the bronze italic word inside a heading:
   e.g.  Built at the <span class="crw-bz-it">top.</span>  */
.crw-bz{color:var(--crw-bronze);}
.crw-bz-it{color:var(--crw-bronze);font-style:italic;}

/* =========================================================================
   4 · LOGO (inline SVG via the [crestwell_logo] shortcode)
   ========================================================================= */
.crw-logo{display:inline-block;line-height:0;}
.crw-logo svg{height:30px;width:auto;display:block;}      /* header + footer = 30px */
.crw-logo--lg svg{height:44px;}

/* =========================================================================
   5 · EYEBROW LABEL   (uppercase, letter-spaced, bronze em-dash)
   Apply class .crw-eyebrow to a Text/Heading widget.
   ========================================================================= */
.crw-eyebrow{
  display:flex;width:fit-content;align-items:center;gap:.75rem;margin:0 0 1.15rem;
  font-family:var(--crw-body);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--crw-muted);
}
.crw-eyebrow::before{content:"";width:26px;height:1px;background:var(--crw-bronze);}
.crw-eyebrow--center{justify-content:center;}

/* =========================================================================
   6 · BUTTONS & ARROW LINKS
   Style native Elementor buttons by adding class .crw-btn (or .crw-btn--ghost
   on dark). Arrow text links use .crw-link.
   ========================================================================= */
.crw-btn,
.elementor-button.crw-btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--crw-body);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  background:var(--crw-ink);color:var(--crw-paper);
  padding:1.05rem 1.9rem;border:1px solid var(--crw-ink);border-radius:0;cursor:pointer;
  transition:background .3s var(--crw-ease),color .3s var(--crw-ease);
}
.crw-btn:hover,.elementor-button.crw-btn:hover{background:transparent;color:var(--crw-ink);}
.crw-btn--ghost{background:transparent;color:var(--crw-paper);border-color:rgba(244,242,236,.4);}
.crw-btn--ghost:hover{background:var(--crw-paper);color:var(--crw-ink);border-color:var(--crw-paper);}

.crw-link{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--crw-body);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--crw-ink);
  padding-bottom:.4rem;border-bottom:1px solid var(--crw-ink);
  transition:gap .3s var(--crw-ease),color .25s var(--crw-ease);
}
.crw-link:hover{gap:1rem;color:var(--crw-bronze);border-color:var(--crw-bronze);}

/* =========================================================================
   7 · SURFACES & HELPERS
   Add to an Elementor Section/Container.
   ========================================================================= */
.crw-paper{background:var(--crw-paper);}
.crw-cream{background:var(--crw-cream);}
.crw-ink{background:var(--crw-ink);color:#cfcabb;}
.crw-graphite{background:var(--crw-graphite);color:#cfcabb;}

/* Sticky header — pure CSS, no Elementor Pro motion effects required.
   Add .crw-sticky and .crw-header to the UAE header container. */
.crw-sticky{position:sticky;top:0;z-index:100;}
.crw-header{background:rgba(244,242,236,.9);backdrop-filter:saturate(120%) blur(8px);-webkit-backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--crw-rule);padding-inline:clamp(1.4rem,5vw,5rem);}

/* On dark surfaces, flip headings/eyebrows/body to light tones */
.crw-ink h1,.crw-ink h2,.crw-ink h3,.crw-ink h4,.crw-ink .elementor-heading-title,
.crw-graphite h1,.crw-graphite h2,.crw-graphite h3,.crw-graphite h4,.crw-graphite .elementor-heading-title{color:var(--crw-paper);}
.crw-ink p,.crw-graphite p{color:#cfcabb;}
.crw-ink .crw-eyebrow,.crw-graphite .crw-eyebrow{color:#948f84;}
.crw-ink .crw-link,.crw-graphite .crw-link{color:var(--crw-paper);border-color:var(--crw-paper);}
.crw-ink .crw-link:hover,.crw-graphite .crw-link:hover{color:var(--crw-bronze);border-color:var(--crw-bronze);}

/* Hairline divider — class on an empty Divider/Spacer or a container border */
.crw-hairline{border:none;border-top:1px solid var(--crw-rule);height:0;margin:0;}
.crw-ink .crw-hairline,.crw-graphite .crw-hairline{border-color:rgba(217,212,199,.18);}

/* Lede — italic Fraunces intro line */
.crw-lede,.crw-lede .elementor-heading-title{
  font-family:var(--crw-display);font-variation-settings:var(--crw-opsz);
  font-style:italic;color:var(--crw-ink);line-height:1.5;font-weight:400;
}

/* =========================================================================
   8 · META / STAT ITEMS
   Label (.crw-k) over a Fraunces value (.crw-v). Build the row with an
   Elementor container set to flex; drop a small block per item.
   ========================================================================= */
.crw-k{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--crw-muted);font-weight:500;margin-bottom:.4rem;font-family:var(--crw-body);}
.crw-v{font-family:var(--crw-display);font-variation-settings:var(--crw-opsz);font-size:1.15rem;color:var(--crw-ink);line-height:1.2;}

.crw-stat-fig{font-family:var(--crw-display);font-variation-settings:var(--crw-opsz);font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--crw-ink);}
.crw-stat-fig sup{font-size:.4em;vertical-align:super;color:var(--crw-bronze);}

/* Index numeral for belief/phase blocks */
.crw-idx{font-family:var(--crw-display);font-variation-settings:var(--crw-opsz);font-style:italic;color:var(--crw-bronze);font-size:.95rem;display:block;}

/* =========================================================================
   9 · PROCESS — "YOU RECEIVE" list
   Apply .crw-receive to an Elementor Icon List (or a plain list).
   ========================================================================= */
.crw-rk{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--crw-bronze);font-weight:600;margin-bottom:.9rem;font-family:var(--crw-body);}
.crw-receive ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.5rem;}
.crw-receive li{font-size:.92rem;color:var(--crw-slate);padding-left:1.1rem;position:relative;}
.crw-receive li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--crw-bronze);border-radius:50%;}
.crw-ink .crw-receive li,.crw-graphite .crw-receive li{color:#cfcabb;}

/* Pull quote */
.crw-quote{border-left:2px solid var(--crw-bronze);padding:.3rem 0 .3rem 1.6rem;}
.crw-quote p,.crw-quote .elementor-heading-title{
  font-family:var(--crw-display);font-variation-settings:var(--crw-opsz);
  font-style:italic;font-size:1.4rem;line-height:1.45;color:var(--crw-ink);margin:0;
}

/* =========================================================================
   10 · WPFORMS — editorial styling to match the mockup
   Scope everything under .crw-form-card so it never leaks to other forms.
   ========================================================================= */
.crw-form-card{background:#fff;border:1px solid var(--crw-rule);box-shadow:0 1px 0 var(--crw-bronze) inset;padding:clamp(1.6rem,3vw,2.6rem);}
.crw-form-card .wpforms-field-label{
  font-family:var(--crw-body)!important;font-size:.66rem!important;letter-spacing:.14em;
  text-transform:uppercase;color:var(--crw-muted)!important;font-weight:500!important;margin-bottom:.5rem;
}
.crw-form-card .wpforms-field input.wpforms-field-medium,
.crw-form-card .wpforms-field input[type=text],
.crw-form-card .wpforms-field input[type=email],
.crw-form-card .wpforms-field input[type=tel],
.crw-form-card .wpforms-field select,
.crw-form-card .wpforms-field textarea{
  width:100%!important;max-width:100%!important;border:none!important;
  border-bottom:1px solid var(--crw-rule)!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  font-family:var(--crw-body)!important;font-size:1rem!important;color:var(--crw-ink)!important;
  padding:.5rem 0!important;transition:border-color .25s var(--crw-ease);
}
.crw-form-card .wpforms-field input:focus,
.crw-form-card .wpforms-field select:focus,
.crw-form-card .wpforms-field textarea:focus{outline:none!important;border-color:var(--crw-bronze)!important;}
.crw-form-card .wpforms-field textarea{min-height:90px;resize:vertical;}
.crw-form-card .wpforms-submit{
  background:var(--crw-ink)!important;color:var(--crw-paper)!important;border:1px solid var(--crw-ink)!important;
  border-radius:0!important;font-family:var(--crw-body)!important;font-size:.74rem!important;font-weight:600!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;padding:1.05rem 1.9rem!important;
  transition:background .3s var(--crw-ease),color .3s var(--crw-ease);
}
.crw-form-card .wpforms-submit:hover{background:transparent!important;color:var(--crw-ink)!important;}

/* =========================================================================
   11 · ENTRANCE (optional; respects reduced-motion)
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
  .crw-rise{opacity:0;transform:translateY(16px);animation:crw-rise .9s var(--crw-ease) forwards;}
  @keyframes crw-rise{to{opacity:1;transform:none;}}
}

/* =========================================================================
   12 · RESPONSIVE — most layout is handled by Elementor's own container
   controls; these only cover the custom grids above.
   ========================================================================= */
@media (max-width:880px){
  .crw-receive ul{grid-template-columns:1fr;}
}

/* =========================================================================
   13 · LAYOUT HELPERS  (for the importable Elementor templates)
   Apply to full-width Elementor containers. display:contents neutralises any
   Elementor .e-con-inner wrapper so grandchildren still flow as grid items.
   ========================================================================= */
.crw-section{padding-block:clamp(56px,9vh,112px);}
.crw-boxed{max-width:var(--crw-maxw);margin-inline:auto;width:100%;}
.crw-center{text-align:center;}
.crw-center .crw-eyebrow{justify-content:center;}
.crw-topline{border-top:1px solid var(--crw-rule);padding-top:2rem;}
.crw-ink .crw-topline,.crw-graphite .crw-topline{border-color:rgba(217,212,199,.18);}

.crw-2col,.crw-grid2,.crw-3col,.crw-4col,.crw-5col{
  display:grid!important;gap:clamp(1.5rem,4vw,3rem);
  max-width:var(--crw-maxw);margin-inline:auto;width:100%;align-items:start;
}
.crw-2col>.e-con-inner,.crw-grid2>.e-con-inner,.crw-3col>.e-con-inner,
.crw-4col>.e-con-inner,.crw-5col>.e-con-inner{display:contents;}
.crw-2col{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(2rem,6vw,5rem);}
.crw-grid2{grid-template-columns:1fr 1fr;gap:1.6rem 2.5rem;}
.crw-3col{grid-template-columns:repeat(3,1fr);}
.crw-4col{grid-template-columns:repeat(4,1fr);gap:1.5rem 2rem;}
.crw-5col{grid-template-columns:repeat(5,1fr);gap:clamp(1.2rem,2.5vw,2rem);}

@media (max-width:880px){
  .crw-2col,.crw-grid2,.crw-3col,.crw-4col,.crw-5col{grid-template-columns:1fr 1fr;}
  .crw-2col{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .crw-grid2,.crw-3col,.crw-4col,.crw-5col{grid-template-columns:1fr;}
}

/* =========================================================================
   14 · HTML-WIDGET METHOD — header/nav/footer styling + the Elementor
   overrides that make the live site match the prototype.
   (Lesson from the Elevation build: don't depend on Elementor applying
   classes to its own wrappers — paste real markup into HTML widgets and
   let these rules style it.)
   ========================================================================= */

/* Hide Hello Elementor's native header/footer — ours come from the
   Elementor/UAE templates as HTML widgets. */
.site-header,.site-footer{display:none!important;}
/* Let full-width sections / HTML widgets span the page. */
.elementor-section,.e-con{max-width:100%!important;}
.elementor-widget-html{width:100%;}

/* Links on dark surfaces */
.crw-ink a:not(.crw-btn),.crw-graphite a:not(.crw-btn),.crw-footer a:not(.crw-btn){color:#cfcabb;transition:color .25s var(--crw-ease);}
.crw-ink a:not(.crw-btn):hover,.crw-graphite a:not(.crw-btn):hover,.crw-footer a:not(.crw-btn):hover{color:var(--crw-paper);}

/* Header bar */
.crw-header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;max-width:var(--crw-maxw);margin-inline:auto;min-height:74px;}
.crw-nav{display:flex;gap:clamp(1rem,2.4vw,2.3rem);align-items:center;flex-wrap:wrap;}
.crw-nav a{font-family:var(--crw-body);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--crw-slate);text-decoration:none;position:relative;padding:.4rem 0 .55rem;line-height:1.75;transition:color .25s var(--crw-ease);}
.crw-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--crw-bronze);transition:right .3s var(--crw-ease);}
.crw-nav a:hover{color:var(--crw-ink);}
.crw-nav a:hover::after,.crw-nav a.is-active::after{right:0;}
.crw-nav a.is-active{color:var(--crw-ink);}

/* Footer */
.crw-footer{background:var(--crw-ink);padding:clamp(48px,7vh,80px) clamp(1.4rem,5vw,5rem) 24px;}
.crw-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;max-width:var(--crw-maxw);margin-inline:auto;padding-bottom:3rem;}
.crw-foot-tag{font-family:var(--crw-display);font-variation-settings:var(--crw-opsz);font-style:italic;color:#cfcabb;margin-top:.8rem;font-size:1rem;}
.crw-foot-col h5{font-family:var(--crw-body);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--crw-bronze);font-weight:500;margin:0 0 1.1rem;}
.crw-foot-col ul{list-style:none;margin:0;padding:0;}
.crw-foot-col li{margin-bottom:.65rem;font-size:.92rem;}
.crw-foot-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;max-width:var(--crw-maxw);margin-inline:auto;padding-top:1.5rem;border-top:1px solid rgba(217,212,199,.16);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#6f6a61;}
@media(max-width:880px){.crw-foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.crw-foot-grid{grid-template-columns:1fr;}.crw-header-inner{justify-content:center;text-align:center;}}


/* =========================================================================
   15 · VERTICAL RHYTHM  (the fix for the collapsed/overlapping spacing)
   Spacing is now intrinsic to the elements, so HTML-widget blocks render
   with correct rhythm without depending on Elementor container gaps.
   ========================================================================= */
h1,h2,h3{margin:0 0 1.1rem;}
h4,h5,h6{margin:0 0 .55rem;}
p{margin:0 0 1.1rem;line-height:1.75;}
.crw-lede{margin:0 0 1.4rem;}
.crw-idx{margin:0 0 .45rem;}
.crw-display{margin:0 0 .4rem;}
.crw-stat-fig{margin:0 0 .55rem;}
.crw-btn,.crw-link{margin-top:.5rem;}
.crw-quote{margin:1.7rem 0;}
.crw-receive{margin-top:1.5rem;}
.crw-k{margin:0 0 .4rem;}
.crw-foot-col li{line-height:1.45;}
.crw-foot-tag{margin-top:1rem;}

/* readable measure for body copy in single-column blocks */
.crw-boxed > p,.crw-boxed > .crw-lede{max-width:62ch;}

/* don't leave a trailing gap at the bottom of a block/column */
.crw-section > *:last-child,.crw-boxed > *:last-child,
.crw-form-card > *:last-child,[class*="crw-"] > *:last-child > p:last-child{margin-bottom:0;}


/* =========================================================================
   16 · TYPE SCALE + POLISH  (matches the approved HTML prototype)
   ========================================================================= */
h1{font-size:clamp(2.6rem,7vw,5rem);}
h2{font-size:clamp(1.9rem,4.4vw,3.1rem);}
h3{font-size:1.55rem;}
h4{font-size:1.25rem;}
.crw-bigmark{font-size:clamp(3.4rem,11vw,7.5rem);line-height:.95;letter-spacing:-.025em;}
.crw-lede{font-size:clamp(1.15rem,2vw,1.5rem);}
#content > .crw-section:first-child .crw-boxed > p{font-size:clamp(1.2rem,2.1vw,1.6rem);max-width:46ch;}
.crw-5col h4{font-size:1.05rem;}
.crw-5col p{font-size:.86rem;}

/* mobile body gutter — text never touches the screen edge; full-bleed backgrounds stay */
.crw-section{padding-inline:clamp(1.4rem,5vw,5rem);}

/* clickable contact details: keep ink, go bronze on hover */
.crw-v a{color:inherit;text-decoration:none;transition:color .25s var(--crw-ease);}
.crw-v a:hover{color:var(--crw-bronze);}

/* roomier "you receive" lists */
.crw-receive ul{gap:.75rem 1.5rem;}
.crw-receive li{line-height:1.4;}

/* custom dropdown chevron (our transparent field bg had wiped the native arrow) */
.crw-form-card .wpforms-field select{
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  background-color:transparent!important;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%233A4049%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M6%209l6%206%206-6%27/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right .15rem center!important;background-size:14px!important;
  padding-right:1.6rem!important;
}

/* mobile header: stack the logo over a centred nav */
@media (max-width:680px){
  .crw-header-inner{flex-direction:column;gap:.55rem;padding:12px 0;min-height:0;}
  .crw-nav{justify-content:center;gap:.55rem 1rem;}
  .crw-nav a{font-size:.7rem;padding:.2rem 0;}
}

/* =========================================================================
   17 · PACKAGE-MATCH PASS — text wordmark, phase block, entrance reveal,
   mobile dropdown legibility, contact-line overflow
   ========================================================================= */

/* Wordmark as live text (identical to the prototype) */
.crw-logo{font-family:var(--crw-display);font-variation-settings:"opsz" 144;font-size:30px;letter-spacing:-.02em;line-height:1;text-decoration:none;display:inline-block;white-space:nowrap;color:var(--crw-ink);}
.crw-logo .crw-crest{color:var(--crw-ink);}
.crw-logo .crw-well{color:var(--crw-bronze);font-style:italic;}
.crw-footer .crw-logo .crw-crest{color:var(--crw-paper);}

/* Phase number block — exact prototype structure (fixes overlap + duration styling) */
.crw-phase-num .crw-bignum{font-family:var(--crw-display);font-variation-settings:"opsz" 144;font-size:clamp(3.4rem,7vw,5.5rem);line-height:.9;display:block;color:var(--crw-ink);}
.crw-phase-num .crw-pk{font-family:var(--crw-body);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--crw-muted);font-weight:500;margin-top:1rem;}
.crw-phase-num .crw-pk span{display:block;color:var(--crw-bronze);margin-top:.2rem;}
.crw-ink .crw-phase-num .crw-bignum{color:var(--crw-paper);}
@media (max-width:880px){
  .crw-phase-num{display:flex;align-items:baseline;gap:1.4rem;}
  .crw-phase-num .crw-pk{margin-top:0;}
}

/* Entrance animation — matches the prototype (hero rises in on load, staggered) */
@media (prefers-reduced-motion:no-preference){
  .crw-reveal{opacity:0;transform:translateY(16px);animation:crwrise .9s var(--crw-ease) forwards;}
  .crw-reveal.crw-d1{animation-delay:.08s;}
  .crw-reveal.crw-d2{animation-delay:.16s;}
  .crw-reveal.crw-d3{animation-delay:.24s;}
  .crw-reveal.crw-d4{animation-delay:.32s;}
  @keyframes crwrise{to{opacity:1;transform:none;}}
}

/* Mobile: legible dropdown text */
.crw-form-card .wpforms-field select{font-size:1.05rem!important;}

/* Contact direct details: scale + wrap so the long email never overflows on mobile */
.crw-contact-line{font-size:clamp(1.05rem,4.5vw,1.5rem);overflow-wrap:anywhere;}


/* =========================================================================
   18 · CONTACT FORM (WPForms) — two-column rows + helper notes to match package
   ========================================================================= */
.crw-form-card .crw-half{float:left;width:48%;box-sizing:border-box;}
.crw-form-card .crw-half.crw-half-first{margin-right:4%;}
.crw-form-card .wpforms-field:not(.crw-half){clear:both;}
.crw-form-card .wpforms-submit-container{clear:both;}
.crw-form-card .crw-form-help{font-family:var(--crw-display);font-variation-settings:var(--crw-opsz);font-style:italic;color:var(--crw-muted);font-size:.92rem;line-height:1.5;margin:.55rem 0 0;}
.crw-form-card .crw-form-respond{font-family:var(--crw-display);font-variation-settings:var(--crw-opsz);font-style:italic;color:var(--crw-muted);font-size:.98rem;line-height:1.5;margin:1.4rem 0 .9rem;clear:both;}
@media (max-width:600px){
  .crw-form-card .crw-half{float:none;width:100%;}
  .crw-form-card .crw-half.crw-half-first{margin-right:0;}
}