
.ct-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
border:1px solid #E5E1D6;
background:#FFFFFF;
}

/* three across, two rows: contact channels above, offices below */
.ct-grid.ct-3{grid-template-columns:repeat(3,1fr);}
.ct-grid.ct-3 .ct-card:nth-child(3n+1){border-left:0;}
.ct-grid.ct-3 .ct-card:nth-child(n+4){border-top:1px solid #E5E1D6;}
.ct-card{
display:flex;
flex-direction:column;
padding:34px 30px 28px;
border-left:1px solid #E5E1D6;
position:relative;
transition:background-color .35s ease;
}
.ct-card:first-child{border-left:0;}

/* Hover warms the whole cell. Scoped to hover-capable pointers because on touch :hover sticks
   after a tap, which would leave a card highlighted with no way to clear it. */
@media(hover:hover){
.ct-card:hover{background:#FDF7EC;}
.ct-card:hover .ct-vl{color:#A66A00;}
.ct-vl{transition:color .35s ease;}
}

.ct-lb{
font-family:'Montserrat',sans-serif;
font-size:var(--e-global-typography-label01-font-size);
font-weight:700;
letter-spacing:1.4px;
text-transform:uppercase;
color:#A66A00;
margin-bottom:14px;
}
.ct-vl{
font-family:'Poppins',sans-serif;
font-size:var(--e-global-typography-0aa87fb-font-size);
font-weight:700;
letter-spacing:-.4px;
line-height:1.25;
color:#16150F;
word-break:break-word;
}
.ct-ds{
font-family:'Montserrat',sans-serif;
font-size:var(--e-global-typography-small01-font-size);
line-height:1.7;
color:#6E6B60;
margin:12px 0 0;
}

/* the action sits on a common baseline across all four, however long the description runs */
.ct-cta{
margin-top:auto;
padding-top:28px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
text-decoration:none;
}
.ct-cta span:first-child{
font-family:'Montserrat',sans-serif;
font-size:var(--e-global-typography-btn0001-font-size);
font-weight:600;
color:#A66A00;
transition:color .2s ease;
}
.ct-ic{
flex:0 0 34px;
width:34px;
height:34px;
border-radius:999px;
background:#FFBE1D;
color:#FFFFFF;
display:inline-flex;
align-items:center;
justify-content:center;
transition:background-color .2s ease,transform .2s ease;
}
.ct-ic svg{width:17px;height:17px;display:block;}
.ct-cta:hover .ct-ic{background:#E5A312;transform:translateY(-2px);}
.ct-cta:hover span:first-child{color:#7A4E00;}
/* 2026-10-09 (Alwin): the site-wide button hover (rm-motion.php gives a.ct-cta the rm-btn fill) painted the
   whole action row black. These links are text-and-icon actions, not filled buttons, so the row stays clear
   and only the label and the yellow circle respond. */
.ct-cta.rm-btn:hover,.ct-cta.rm-btn:focus-visible{background-color:transparent!important;border-color:transparent!important;color:inherit!important;}
.ct-cta:focus-visible{outline:2px solid #16150F;outline-offset:3px;}

@media(max-width:1024px){
.ct-grid,.ct-grid.ct-3{grid-template-columns:repeat(2,1fr);}
.ct-grid .ct-card{border-left:1px solid #E5E1D6;border-top:0;}
.ct-grid .ct-card:nth-child(odd){border-left:0;}
.ct-grid .ct-card:nth-child(n+3){border-top:1px solid #E5E1D6;}
}
@media(max-width:640px){
.ct-grid,.ct-grid.ct-3{grid-template-columns:1fr;}
.ct-grid .ct-card{border-left:0;border-top:0;}
.ct-grid .ct-card+.ct-card{border-top:1px solid #E5E1D6;}
}
@media(prefers-reduced-motion:reduce){
.ct-ic,.ct-card,.ct-vl{transition:none;}
.ct-cta:hover .ct-ic{transform:none;}
}

/* the consultation prompt: dark panel against the white form card beside it */
.cf-book{
border:1px solid #23231E;
border-radius:16px;
padding:28px 28px 26px;
background:#16150F;
}
.cf-bk-lb{
display:block;
font-family:'Montserrat',sans-serif;
font-size:var(--e-global-typography-label01-font-size);
font-weight:700;
letter-spacing:1.4px;
text-transform:uppercase;
color:#FFBE1D;
margin-bottom:12px;
}
.cf-book h3{
font-family:'Poppins',sans-serif;
font-size:var(--e-global-typography-0aa87fb-font-size);
font-weight:700;
letter-spacing:-.5px;
line-height:1.3;
color:#F9F7F2;
margin:0 0 10px;
}
.cf-book p{
font-family:'Montserrat',sans-serif;
font-size:var(--e-global-typography-small01-font-size);
line-height:1.7;
color:#B8B4A8;
margin:0 0 22px;
}
.cf-bk-btn{
display:inline-flex;
align-items:center;
gap:8px;
font-family:'Montserrat',sans-serif;
font-size:var(--e-global-typography-btn0001-font-size);
font-weight:600;
color:#16150F;
background:#FFBE1D;
border:1px solid #FFBE1D;
border-radius:999px;
padding:12px 22px;
text-decoration:none;
transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.cf-bk-btn svg{width:15px;height:15px;}
/* on a dark panel the hover inverts to light rather than to ink, which would vanish */
.cf-bk-btn:hover{background:#F9F7F2;border-color:#F9F7F2;color:#16150F;}
.cf-bk-btn:focus-visible{outline:2px solid #FFBE1D;outline-offset:3px;}

/* Contact form: two fields per row so the form stays short rather than a single long column.
   The whole form sits in a card, matching the consultation prompt beside it.

   At half width the two columns still hold, which keeps the form's height unchanged - the
   fields simply get narrower rather than stacking, which would have doubled its length. */
.cf-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px 18px;
border:1px solid #E5E1D6;
border-radius:16px;
background:#FFFFFF;
padding:30px 28px 28px;
}
.cf-f{display:flex;flex-direction:column;min-width:0;}
.cf-f.cf-full{grid-column:1 / -1;}
.cf-f.cf-submit{grid-column:1 / -1;margin-top:6px;}

.cf-f label{
font-family:'Montserrat',sans-serif;
font-size:var(--e-global-typography-formlab-font-size);
font-weight:600;
letter-spacing:.2px;
color:#16150F;
margin-bottom:8px;
}
.cf-grid input[type=text],
.cf-grid input[type=tel],
.cf-grid input[type=email],
.cf-grid select,
.cf-grid textarea{
width:100%;
box-sizing:border-box;
font-family:'Montserrat',sans-serif;
font-size:var(--e-global-typography-81ee7dd-font-size);
color:#16150F;
background:#FFFFFF;
border:1px solid #E5E1D6;
border-radius:10px;
padding:11px 12px;
transition:border-color .2s ease;
}
.cf-grid textarea{min-height:96px;resize:vertical;}
.cf-grid input:focus,
.cf-grid select:focus,
.cf-grid textarea:focus{outline:none;border-color:#FFBE1D;}

/* Contact Form 7 wraps every field in its own elements, and those carry margins of their own
   that stack on top of the grid gap. Left alone they were roughly quadrupling the row spacing. */
.cf-grid .wpcf7-form-control-wrap{display:block;margin:0;}
.cf-grid p{margin:0;}
.cf-grid br{display:none;}
.cf-grid .wpcf7-not-valid-tip{
font-family:'Montserrat',sans-serif;
font-size:var(--e-global-typography-meta001-font-size);
margin-top:5px;
}

.cf-grid input[type=submit]{
font-family:'Montserrat',sans-serif;
font-size:var(--e-global-typography-btn0001-font-size);
font-weight:600;
color:#16150F;
background:#FFBE1D;
border:1px solid #FFBE1D;
border-radius:999px;
padding:14px 34px;
width:auto;
cursor:pointer;
transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.cf-grid input[type=submit]:hover{background:#16150F;border-color:#16150F;color:#FFFFFF;}
.cf-grid input[type=submit]:focus-visible{outline:2px solid #16150F;outline-offset:3px;}

@media(max-width:767px){
.cf-grid{grid-template-columns:1fr;gap:14px;padding:24px 20px 22px;}
}

/* 2026-10-09: the consultation panel now carries the Calendly booking calendar itself, so a visitor
   can pick a slot without leaving the page. The calendar sits flush to the panel's lower edge on a
   light ground (Calendly draws on white). Calendly's script still loads only once the visitor
   interacts and the calendar nears the screen (rm-third-party-lazy.php). */
.cf-cal{padding-bottom:0;overflow:hidden;}
.cf-cal p{margin-bottom:20px;}
.cf-cal-fr{position:relative;margin:0 -28px;background:#FFFFFF;border-top:1px solid #23231E;}
.cf-cal-fr::before{content:'Loading available times\2026';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:var(--e-global-typography-small01-font-size);color:#8A867A;}
.cf-cal-fr .calendly-inline-widget{position:relative;z-index:1;}
.cf-cal-fr .calendly-inline-widget iframe{display:block;}
.cf-cal-alt{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 -28px;padding:16px 20px;font-family:'Montserrat',sans-serif;font-size:var(--e-global-typography-small01-font-size);font-weight:600;color:#F9F7F2;text-decoration:none;border-top:1px solid #23231E;transition:color .2s ease;}
.cf-book a.cf-cal-alt,.cf-book a.cf-cal-alt:visited{color:#F9F7F2;}
.cf-book a.cf-cal-alt:hover{color:#FFBE1D;}
.cf-cal-alt:focus-visible{outline:2px solid #FFBE1D;outline-offset:-4px;}
@media(max-width:767px){
.cf-cal{padding:24px 20px 0;}
.cf-cal-fr,.cf-cal-alt{margin:0 -20px;}
}

/* 2026-10-09 (Alwin): the booking card is light, matching the white cards on Get a Quote. */
.cf-book.cf-cal{background:#FFFFFF;border-color:#E5E1D6;}
.cf-cal .cf-bk-lb{color:#6E6B60;}
.cf-cal h3{color:#16150F;}
.cf-cal p{color:#4A4840;}
.cf-cal .cf-cal-fr{border-top-color:#E5E1D6;}
.cf-book a.cf-cal-alt,.cf-book a.cf-cal-alt:visited{color:#16150F;background:#F9F7F2;border-top-color:#E5E1D6;}
.cf-book a.cf-cal-alt:hover{color:#16150F;background:#FFBE1D;}
.cf-cal-alt:focus-visible{outline-color:#16150F;}
.cf-cal-fr .calendly-spinner{display:none;}
/* 2026-10-19 (Alwin): both phone numbers shown, each one its own call link */
.ct-nums{display:flex;flex-direction:column;gap:2px;}
.ct-card a.ct-num,.ct-card a.ct-num:visited{color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;text-decoration:none;}
.ct-card a.ct-num:hover{color:#A66A00;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;}
.ct-card a.ct-num:focus-visible{outline:2px solid #16150F;outline-offset:3px;border-radius:4px;}
/* 2026-10-19 (Alwin): Phone and WhatsApp cards carry two numbers. Each number is its own action row
   (label + yellow circle) so it is clear which number a tap calls or opens; no card-wide link. */
.ct-acts{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;}
.ct-acts .ct-cta{margin-top:0;padding:10px 0;min-height:44px;box-sizing:border-box;border-top:1px solid #EFEBE0;}
.ct-acts .ct-cta:first-child{border-top:0;padding-top:0;}
.ct-acts .ct-cta:last-child{padding-bottom:0;min-height:0;}

.ct-multi .ct-ds{margin-bottom:0;}
/* 2026-10-19 (Alwin): "Would you rather speak to someone?" card, full width under the form + calendar in every
   CTA section (shared Elementor template, placed with [rm_el_template]). Each number is its own link. */
.rm-speak-wrap{margin-top:40px;}
.rm-speak.e-con{display:grid!important;grid-template-columns:minmax(220px,1fr) 2.4fr;grid-template-rows:auto auto;column-gap:40px;row-gap:0;align-content:center;--padding-top:26px;--padding-bottom:26px;--padding-left:32px;--padding-right:32px;padding:26px 32px;background:#FFFFFF;border:1px solid #E5E1D6!important;border-radius:16px;}
/* the card is rendered as its own top-level Elementor container, so the site-wide section divider rules (rm-section-rules) also match it and were removing its top border on some pages */
.rm-speak>.rm-speak-eb{grid-column:1;grid-row:1;align-self:end;margin:0;}
.rm-speak>.rm-speak-h{grid-column:1;grid-row:2;align-self:start;margin:0;}
.rm-speak>.rm-speak-chw{grid-column:2;grid-row:1 / 3;align-self:center;min-width:0;width:100%;}
.rm-speak .rm-speak-eb .elementor-heading-title{font-family:'Montserrat',sans-serif;font-size:var(--e-global-typography-label01-font-size);font-weight:700;letter-spacing:1.4px;line-height:1.4;text-transform:uppercase;color:#6E6B60;margin:0 0 8px;}
.rm-speak .rm-speak-h .elementor-heading-title{font-family:var(--e-global-typography-4a2aa40-font-family),'Poppins',sans-serif;font-size:var(--e-global-typography-4a2aa40-font-size);font-weight:var(--e-global-typography-4a2aa40-font-weight,700);line-height:var(--e-global-typography-4a2aa40-line-height,1.3);letter-spacing:var(--e-global-typography-4a2aa40-letter-spacing,-.5px);color:#16150F;margin:0;}
.rm-sp-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);}
.rm-sp-c{display:flex;flex-direction:column;padding:12px 22px;border-left:1px solid #E5E1D6;transition:background-color .35s ease;}
.rm-sp-lb{font-family:'Montserrat',sans-serif;font-size:var(--e-global-typography-label01-font-size);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#A66A00;margin-bottom:4px;}
.rm-speak a.rm-sp-a,.rm-speak a.rm-sp-a:visited{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;text-decoration:none;border-top:1px solid #EFEBE0;color:#A66A00;}
.rm-speak .rm-sp-lb+a.rm-sp-a{border-top:0;}
.rm-sp-a span:first-child{font-family:'Montserrat',sans-serif;font-size:var(--e-global-typography-btn0001-font-size);font-weight:600;color:#A66A00;overflow-wrap:anywhere;transition:color .2s ease;}
.rm-sp-ic{flex:0 0 30px;width:30px;height:30px;border-radius:999px;background:#FFBE1D;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease;}
.rm-sp-ic svg{width:15px;height:15px;display:block;}
@media(hover:hover){
.rm-sp-c:hover{background:#FDF7EC;}
.rm-sp-a:hover .rm-sp-ic{background:#E5A312;transform:translateY(-2px);}
.rm-sp-a:hover span:first-child{color:#7A4E00;}
}
.rm-speak a.rm-sp-a:focus-visible{outline:2px solid #16150F;outline-offset:2px;border-radius:4px;}
@media(max-width:1279px){
.rm-speak.e-con{grid-template-columns:1fr;}
.rm-speak>.rm-speak-eb{grid-row:1;}
.rm-speak>.rm-speak-h{grid-row:2;}
.rm-speak>.rm-speak-chw{grid-column:1;grid-row:3;margin-top:18px;}
.rm-sp-c:first-child{border-left:0;padding-left:0;}
}
/* tablet: WhatsApp and Call side by side, Email on its own row so the address never breaks */
@media(max-width:900px){
.rm-sp-ch{grid-template-columns:repeat(2,minmax(0,1fr));}
.rm-sp-c:nth-child(3){grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid #E5E1D6;margin-top:6px;padding-top:16px;}
}
@media(max-width:767px){
.rm-sp-ch{grid-template-columns:1fr;}
.rm-speak-wrap{margin-top:32px;}
.rm-speak.e-con{--padding-top:24px;--padding-bottom:12px;--padding-left:20px;--padding-right:20px;padding:24px 20px 12px;}
.rm-sp-ch{grid-template-columns:1fr;}
.rm-sp-c,.rm-sp-c:first-child,.rm-sp-c:nth-child(3){grid-column:auto;margin-top:0;border-left:0;border-top:1px solid #E5E1D6;padding:14px 0;}
}
@media(prefers-reduced-motion:reduce){.rm-sp-c,.rm-sp-ic,.rm-sp-a span:first-child{transition:none;}.rm-sp-a:hover .rm-sp-ic{transform:none;}}
