/* legacy.css */
/* designbox legacy stylesheet.
   Moved out of the WordPress Customizer on 12 Sep 2026 so it can be cached and
   minified instead of being inlined on every page load. Rules for the retired
   quote form (id 3) were dropped at the same time.
   Original backed up at /wp-content/novamira-sandbox/customizer-css.bak-20260912.css */

/* Underline Button */
.db-underline-icon-button{padding:0 !important;color:#fff;background-color:transparent !important;border-bottom:1px solid #fff;transition:ease-in-out all .2s}
.db-underline-icon-button svg{width:15px;height:15px}
.db-underline-icon-button:hover{color:#a1a1a1}
.db-underline-icon-button:hover svg path{transition:.2s ease-in-out all;fill:#a1a1a1}
/* Quote Form */
.quote-form-services .ff-el-input--label.ff-el-is-required.asterisk-right, .quote-website-selection .ff-el-input--label.ff-el-is-required.asterisk-right{width: 100%; display: flex; justify-content: center; text-align: center; padding-bottom: 50px;}
.quote-form-services label.ff-el-image-input-src{width: 65px !important; height: 65px !important;}
.quote-form-services .ff-el-form-check-input.ff-el-form-check-checkbox{display: none;}
.quote-form-services .ff-el-form-check.ff-el-form-check-.ff-el-image-holder.ff_item_selected{background-color: rgb(0, 0, 0, 0.05); border: 1.5px solid #000;}
.quote-form-services .ff-el-form-check.ff-el-form-check-.ff-el-image-holder{padding: 40px; border-radius: 20px; border: 1.5px solid #F3F4F6; transition: ease-in-out all .2s;}
.form-heading-styling{font-size: 22px; font-weight: 600;}
.quote-form-services .ff_el_checkable_photo_holders{display: flex !important; gap: 30px;}
.quote-form-services label.ff-el-image-input-src{margin-bottom: 20px;}
.form-heading-styling{padding-bottom: 10px;}
.ff-btn-secondary:not(.ff_btn_no_style){background-color: #1F56DF !important; padding: 15px 45px; border-radius: 25px;}
.ff-el-group.quote-form-services.ff_list_3col{margin-bottom: 50px;}
#fluentform_5 .ff-step-container{display: flex; flex-direction: column;}
#fluentform_5 .ff-el-progress-bar span{display: none;}
#fluentform_5 .ff-step-progress-wrap{display: flex; flex-direction: row; justify-content: space-between; width: 100%; align-items: center;}
#fluentform_5 .ff-el-progress-status{width: auto; font-weight: 600; font-size: 16px; padding: 8px 25px; border: 2px solid #F3F4F6; border-radius: 25px;}
#fluentform_5 .ff-el-progress{width: 26%; border-radius: 1.25rem;}
.quote-website-selection .ff-el-form-check-input.ff-el-form-check-radio{display: none;}
.quote-website-selection .ff-el-form-check-label span{display: flex !important; flex-direction: row !important; flex-wrap: wrap; column-gap: 10px; row-gap: 0;}
.web-service-description-quote{width: 100%; color: #6A7282;}
.quote-website-selection .ff-el-input--content{display: flex; flex-direction: column; gap: 20px;}
.quote-website-selection .ff-el-form-check.ff-el-form-check-{padding: 25px; border: 2px solid #E5E7EB; border-radius: 16px; transition: all ease-in-out .2s;}
.quote-website-selection .ff-el-form-check.ff-el-form-check-.ff_item_selected{background-color: rgb(0, 0, 0, 0.05); border: 2px solid #000;}
.form-checkboxes-container-styling .ff-el-input--content{display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap;}
.form-checkboxes-container-styling .ff-el-form-check label>span{border: 1px solid #E5E7EB !important; border-radius: 12px !important; font-size: 18px !important; padding: 15px !important; color: #000 !important;}
.form-solo-heading-container{padding-bottom: 50px;}
.form-checkboxes-container-styling label{font-size: 20px; color: #000;}
.form-checkboxes-container-styling .ff-el-form-check.ff_item_selected label>span{background-color: #000 !important; color: #fff !important; box-shadow: none !important;}
.branding-form-options span{display: flex; flex-direction: column; text-align: left !important;}
.branding-form-options .ff-el-form-check.ff-el-form-check-{width: 50% !important;}
.branding-form-options .ff-el-form-check.ff-el-form-check- span{width: 100%;}
.ff-el-group.branding-form-options.ff_list_buttons .ff-el-input--content .ff-el-form-check.ff-el-form-check-{width: 50% !important;}
.branding-form-options .ff-el-input--content{display: flex; gap: 40px;}
.branding-form-options .ff-el-form-check-label span{border: 2px solid #E5E7EB !important; border-radius: 16px !important;}
#fluentform_5 .ff-el-progress-bar{background-color: #572cce;}
.branding-form-options .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label>span{background-color: rgb(0,0,0,0);}
.branding-form-options .ff-el-form-check label>span{background-color: rgb(0,0,0,0) !important; box-shadow: none !important; border-radius: 16px !important}
.branding-form-options .ff-el-form-check.ff_item_selected{background-color: rgb(0,0,0,0.05) !important; border-radius: 16px;}
.branding-form-options  .ff-el-form-check label>span:hover{color: #606266 !important;}
.branding-form-options .ff-el-form-check.ff_item_selected label>span{color: #000 !important; border: 2px solid #000 !important;}
.branding-requirements-header{padding-bottom: 50px;}
.branding-form-options span h3{padding-bottom: 10px;}
.branding-form-options span p{font-size: 18px;}
.add-ons-container .ff-el-input--content{display: flex; gap: 20px; flex-wrap: wrap !important; font-size: 20px;}
.add-ons-container .ff-el-form-check.ff-el-form-check-{padding: 5px 20px; border: 1px solid #E5E7EB; border-radius: 14px;}
.add-ons-container .ff-el-form-check label.ff-el-form-check-label{margin-bottom: 0 !important; display: flex; gap: 12px; justify-content: center; align-items: center !important; color: #000;}
.add-ons-container .ff-el-form-check-label .ff-el-form-check-input{top: 0 !important;}
.add-ons-container .ff-el-form-check-checkbox{height: 16px !important; width: 16px;}
.ff-t-container.ff-column-container.ff_columns_total_2.brochure-requirements-container{gap: 80px !important;}
.brochure-title-container{padding-bottom: 50px;}
#fluentform_5 .ff-btn.ff-btn-prev.ff-btn-secondary{padding-left: 0; padding-right: 0; color: #4A5565; background-color: transparent !important;}
#fluentform_5 .ff-btn.ff-btn-prev.ff-btn-secondary::before{content: ""; display: inline-block; width: 25px; height: 25px; background-image: url('/wp-content/uploads/2026/07/Icon.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: 10px; margin-bottom: 3px; vertical-align: middle;}
#fluentform_5 label{color: #000;}
form.fluent_form_5 .ff-btn-submit:not(.ff_btn_no_style){background-color: #1F56DF !important; border-radius: 30px; padding: 12px 25px; font-size: 18px; font-weight: 600;}
.ff-default .ff-el-form-control:focus{border-color: #1F56DF !important;}
.checkbox-absolute-tick .ff-el-form-check{position: relative;}
.checkbox-absolute-tick .ff-el-form-check.ff_item_selected::after{content: ""; position: absolute; top: 24px; right: 24px; width: 24px; height: 24px; background-image: url('/wp-content/uploads/2026/07/tick-icon-design-box.svg'); background-size: contain; background-repeat: no-repeat; background-position: center;}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label>span{white-space: wrap !important;}
/* Contact Form */
select#ff_4_dropdown{background-color: #fff;}
#fluentform_4 button.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style{border-radius: 30px; width: 300px; font-size: 18px; font-weight: 600;}
#fluentform_4 button.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style:hover{opacity: 1; background-color: #fff; color: #000;}
#fluentform_4 .ff_t_c{font-size: 16px;}
/* Support Form */
.reason-for-support .ff-el-form-check-input.ff-el-form-check-radio{display: none;}
.support-form-checkboxes-container-styling .ff-el-input--content{display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap;}
.support-form-checkboxes-container-styling .ff-el-form-check label>span{border: 1px solid #E5E7EB !important; border-radius: 12px !important; font-size: 18px !important; padding: 15px !important; color: #000 !important;}
.support-form-checkboxes-container-styling label{font-size: 20px; color: #000;}
.support-form-checkboxes-container-styling .ff-el-form-check.ff_item_selected label>span{background-color: #000 !important; color: #fff !important; box-shadow: none !important;}
#brxe-vtzinm{position: absolute; top: 20px; right: 20px; height: auto; width: 40px;}
.brx-popup.brxe-popup-2573 .brx-popup-content{position: relative;}
/* Team */

/* Tablet */
@media screen and (max-width:479px){
#brxe-dsyrgt p{text-wrap: wrap;}
/* Forms */
	.quote-form-services .ff_el_checkable_photo_holders{flex-direction: column; gap: 15px;}
.quote-form-services .ff-el-form-check.ff-el-form-check-.ff-el-image-holder{width: 100%;}
.quote-form-services .ff-el-form-check.ff-el-form-check-.ff-el-image-holder{padding: 20px;}
.quote-form-services span{font-size: 14px;}
.form-heading-styling{font-size: 18px;}
.web-service-description-quote{font-size: 12px; padding-top: 10px;}
.form-checkboxes-container-styling .ff-el-form-check label>span{padding: 10px !important;}
.brochure-title-container, .branding-requirements-header, .quote-form-services .ff-el-input--label.ff-el-is-required.asterisk-right, .quote-website-selection .ff-el-input--label.ff-el-is-required.asterisk-right{padding-bottom: 20px;}
.quote-form-services label.ff-el-image-input-src{width: 40px !important; height: 40px !important;}
.quote-form-services .ff-el-form-check.ff-el-form-check-.ff-el-image-holder, .branding-requirements-header, .brochure-title-container{margin-bottom: 0 !important;}
.quote-website-selection .ff-el-input--content{gap: 10px;}
.branding-form-options .ff-el-input--content{flex-direction: column; gap: 10px;}
.ff-el-group.branding-form-options.ff_list_buttons .ff-el-input--content .ff-el-form-check.ff-el-form-check-{width: 100% !important;}
.quote-form-services span, .step-subheading-wording{font-size: 16px !important;}
.form-checkboxes-container-styling label{font-size: 18px;}
.add-ons-container .ff-el-input--content{gap: 10px;}
.support-form-checkboxes-container-styling .ff-el-form-check label>span{font-size: 15px !important; padding: 10px !important;}
}

/* site-a69ba74b6f.css */
/* db-booking-loader */

.db-bkload{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:14px;padding:26px;background:#fff;border-radius:inherit;pointer-events:none}
.db-bkload__bar{height:12px;border-radius:999px;background:#ECE6FA;position:relative;overflow:hidden}
.db-bkload__bar:nth-child(1){width:42%}
.db-bkload__bar:nth-child(2){width:88%;height:150px;border-radius:12px}
.db-bkload__bar:nth-child(3){width:64%}
.db-bkload__bar::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:dbBkShimmer 1.6s ease-in-out infinite}
.db-bkload__note{margin-top:auto;font-size:13px;color:rgba(22,22,22,.55)}
@keyframes dbBkShimmer{100%{transform:translateX(100%)}}
.db-bkframe{opacity:0;transition:opacity .35s ease}
.db-bkready .db-bkframe{opacity:1}
.db-bkready .db-bkload{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
@media(prefers-reduced-motion:reduce){.db-bkload__bar::after{animation:none}.db-bkframe,.db-bkready .db-bkload{transition:none}}

/* db-dark-stats */

.db-act--dark .ecs-why-stats .n,
.db-act--dark .ecs-why-stats .n span,
.db-act--dark .ecs-why-stats .accent,
.db-act--dark .db-ga-num,
.db-act--dark .db-ga-num span,
.db-act--dark .db-ga-acc,
.db-act--dark .res-metric .n,
.db-act--dark .res-metric .n span,
.db-act--dark .res-metric .accent{color:#fff !important}

/* db-h1-weight */
body h1{font-weight:600}
/* db-reviews-star-align */
.brxe-rvstar{align-self:flex-start;justify-content:flex-start;margin-inline-end:auto;}
/* db-cta-button */

.db-cta{position:relative;display:inline-flex;align-items:center;gap:0;padding:14px 28px;border-radius:999px;background:#2056DF;color:#fff !important;font-size:15px;font-weight:500;line-height:1;text-decoration:none;border:none;overflow:hidden;isolation:isolate;cursor:pointer;transition:color .35s ease,box-shadow .45s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.db-cta::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#4F27C7 0%,#2056DF 100%);transform:translateX(-101%);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.db-cta:hover::before,.db-cta:focus-visible::before{transform:translateX(0)}
.db-cta:hover,.db-cta:focus-visible{color:#fff !important;box-shadow:0 10px 30px rgba(79,39,199,.4)}
.db-cta::after{content:'\2192';display:inline-block;width:0;opacity:0;transform:translateX(-8px);font-size:1.05em;line-height:1;transition:width .45s cubic-bezier(.22,1,.36,1),opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.db-cta:hover::after,.db-cta:focus-visible::after{width:22px;opacity:1;transform:translateX(9px)}
.db-cta:focus-visible{outline:2px solid #9F86FF;outline-offset:3px}
@media (max-width:767px){.db-cta{padding:13px 24px;font-size:14px}}
@media (prefers-reduced-motion:reduce){
  .db-cta::before{display:none}
  .db-cta::after{width:22px;opacity:1;transform:none}
  .db-cta,.db-cta::after{transition:none}
}

/* Legacy .btn anchors (16 Sept 2026).
   Several pages write their CTAs as inline <a class="btn btn-primary"> inside a
   text element rather than as a Bricks button, so they never picked up .db-cta
   and kept their own 10px radius: square next to the pills everywhere else.
   Given the same pill, gradient wipe and lift here rather than rewriting the
   markup on every page.
   No ::after arrow is added: these anchors already carry their own arrow, as a
   glyph in the label or a .arrow span, and would otherwise show two.
   !important on the radius because one page pins it to an element ID. */
body .btn{border-radius:999px !important}
body .btn-primary{position:relative;overflow:hidden;isolation:isolate;background:#2056DF;color:#fff;border:none;transition:color .35s ease,box-shadow .45s ease,transform .18s ease}
body .btn-primary::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#4F27C7 0%,#2056DF 100%);transform:translateX(-101%);transition:transform .6s cubic-bezier(.22,1,.36,1)}
body .btn-primary:hover::before,body .btn-primary:focus-visible::before{transform:translateX(0)}
body .btn-primary:hover,body .btn-primary:focus-visible{background:#2056DF;color:#fff;box-shadow:0 10px 30px rgba(79,39,199,.4)}
body .btn-primary:focus-visible{outline:2px solid #9F86FF;outline-offset:3px}
@media (prefers-reduced-motion:reduce){body .btn-primary::before{display:none}body .btn-primary{transition:none}}

/* Secondary hover contrast (16 Sept 2026). .btn-secondary inherits its colour
   from the section, and the page rules that flip it on dark surfaces are keyed to
   .dark / .migration / .darkblue only. On a section using a different dark class
   the hover filled white while the text stayed white, so the label disappeared.
   Set explicitly for both surfaces instead of relying on inherit. */
body .btn-secondary:hover,body .btn-secondary:focus-visible{background:#161616;color:#fff;border-color:#161616}
.act--dark .btn-secondary:hover,.act--dark .btn-secondary:focus-visible,
.db-act--dark .btn-secondary:hover,.db-act--dark .btn-secondary:focus-visible,
.act-dark .btn-secondary:hover,.act-dark .btn-secondary:focus-visible,
.dark .btn-secondary:hover,.migration .btn-secondary:hover,.darkblue .btn-secondary:hover{background:#fff !important;color:#161616 !important;border-color:#fff !important}
/* Buttons that carry their own icon (a Bricks button with an icon set renders it as an
   inline svg or <i>) keep just that icon: no extra ::after arrow on hover, which showed
   two arrows side by side (26 Sep 2026). Small gap so the icon does not touch the label. */
.db-cta:has(> svg, > i){gap:10px}
.db-cta:has(> svg, > i)::after{content:none;display:none}
.db-cta > svg{flex:none;width:18px;height:auto}

/* db-why-section */

/* --- Section chrome (six web design pages) --- */
.why-sec{position:relative;overflow-x:clip;overflow-y:visible;padding:clamp(90px,11vw,150px) 0;background:linear-gradient(180deg,#101018 0%,#15151F 48%,#101018 100%)}
.why-sec .why-inner{position:relative;z-index:1;align-items:stretch}
.why-sec .why-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px)}
.why-sec .why-orb.a{width:520px;height:520px;background:var(--indigo,#4F27C7);opacity:.20;top:-180px;left:auto;right:-140px}
.why-sec .why-orb.b{width:420px;height:420px;background:var(--blue,#2056DF);opacity:.14;bottom:80px;left:-120px;right:auto;top:auto}
.why-sec .why-orb.c,.why-sec .why-orb.d{display:none}

/* --- Inner content (all pages, including the lead gen block) --- */
.db-why p{color:var(--pale-2,#A1A1A1)}
.db-why h2,.db-why h3,.db-why h5{color:#fff}
.db-why .why-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:end;margin-bottom:clamp(44px,5vw,70px)}
.db-why .why-head h2{color:#fff;font-family:'Aeonik', 'Aeonik Fallback';font-weight:600;font-size:clamp(2.6rem,3.4vw,3.8rem);line-height:1.06}
.db-why .why-head > div > p{margin-top:16px;color:var(--pale-2,#A1A1A1);max-width:64ch;text-wrap:balance}
.db-why .why-stats{display:flex;gap:clamp(30px,3.8vw,64px);justify-content:flex-end;flex-wrap:wrap}
.db-why .why-stats .num-item{text-align:right}
.db-why .why-stats .num-item .n{font-family:'Aeonik', 'Aeonik Fallback';font-weight:600;font-size:clamp(3rem,4vw,4.2rem);color:#fff !important;line-height:1;display:flex;align-items:baseline;justify-content:flex-end}
body .db-why .why-stats .num-item .n .accent,body .db-why .why-stats .accent,body .db-why .why-stats .num-item .n span,body .db-why .why-stats .num-item .n span[data-count]{color:#fff !important}
.db-why .why-stats .num-item .l{font-size:12.5px;color:var(--pale-2,#A1A1A1);margin-top:8px;max-width:20ch;margin-left:auto;text-wrap:balance;line-height:1.45}
.db-why .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,34px)}
.db-why .why-grid .why-item{background:var(--dfill-1,rgba(255,255,255,.035));border:1px solid var(--dline-1,rgba(255,255,255,.1));border-radius:16px;padding:clamp(24px,2.6vw,34px)}
.db-why .why-grid .why-item h3{font-family:'Aeonik', 'Aeonik Fallback';font-weight:600;font-size:clamp(1.9rem,2.1vw,2.2rem);color:#fff;margin:0 0 12px;line-height:1.15}
.db-why .why-grid .why-item p{font-size:14.5px;color:var(--pale-2,#A1A1A1);line-height:1.65;margin:0;text-wrap:pretty}

/* --- Team intro copy: needs air before the photos --- */
.db-why .team-wrap{margin-top:clamp(56px,6vw,84px);margin-bottom:clamp(28px,3vw,40px)}
.db-why .team-wrap h3{font-weight:400;font-size:clamp(24px,2.4vw,33px);color:#fff;margin:0 0 12px}
.db-why .team-wrap p{margin:0;max-width:52ch}

/* --- Collage: three wrappers, one result --- */
.db-why .db-team-images,.db-why .team-collage{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,3.6vw,50px)}
.db-why .db-team-images figure,.db-why .db-team-images .brxe-image,.db-why .team-collage .ph,.db-why .team-collage .tphoto{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--dline-1,rgba(255,255,255,.1));background:var(--dfill-1,rgba(255,255,255,.035));aspect-ratio:3/2}
.db-why .db-team-images img,.db-why .team-collage .ph img,.db-why .team-collage .tphoto img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Carried over from the per page CSS this module replaces --- */
.db-why .askai{position:relative;width:100%;margin-top:clamp(88px,9vw,140px);text-align:center}
.db-why .askai h3{font-weight:400;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.015em;color:#fff;margin:0 0 20px}
.db-why .askai p{max-width:46ch;margin:0 auto 34px;color:var(--pale-2,#A1A1A1)}
.db-why .askai .btns{width:100%}
.db-why .askai .btns p{display:flex !important;gap:14px;row-gap:14px;flex-wrap:wrap;justify-content:center;margin:0 !important;max-width:none !important;width:100%}
.db-why .askai .btns a{display:inline-flex;align-items:center;font-size:14px;font-weight:500;padding:12px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05);color:#fff;text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease,transform .18s ease}
.db-why .askai .btns a:hover{background:#fff;color:#161616;transform:translateY(-1px)}


/* Orphan control (16 Sept 2026). Updated: balance, not pretty.
   pretty only prevents a SINGLE word on the last line, so a two word tail like
   'with us.' still dropped. balance evens the lines instead, and 64ch is wide
   enough that a typical lead sits on one line at desktop widths.
   Original note: A 44ch lead and a 16ch stat label were both just
   narrow enough to drop the last word onto its own line: 'us.' under the lead and
   'year' / 'clients' under the stats. Widened a little and left to text-wrap, which
   balances the label lines and keeps a single word off the end of the lead. Applied
   to the strategy pages too, which had the identical values and the same problem. */
body .ecs-why-lead{max-width:64ch;text-wrap:balance}
body .ecs-why-stats{gap:clamp(30px,3.8vw,64px)}
body .ecs-why-stats .l{max-width:20ch;margin-top:8px;text-wrap:balance;line-height:1.45}
body .ecs-why-grid .why-item p{text-wrap:pretty}

@media (max-width:820px){
  .db-why .why-head{grid-template-columns:1fr;gap:24px}
  .db-why .why-stats{justify-content:flex-start}
  .db-why .why-stats .num-item{text-align:left}
  .db-why .why-stats .num-item .n{justify-content:flex-start}
  .db-why .why-stats .num-item .l{margin-left:0}
  .db-why .why-grid{grid-template-columns:1fr}
  .db-why .db-team-images,.db-why .team-collage{grid-template-columns:1fr}
}
@media (max-width:600px){
  .db-why .askai{margin-top:112px}
  .db-why .askai .btns p{display:grid !important;grid-template-columns:1fr 1fr;gap:12px}
  .db-why .askai .btns a{width:100%;justify-content:center}
}

/* ---- Prefixed why variants (16 Sept 2026) ----------------------------------
   The marketing and AI pages carry the same Why us component under their own
   class prefix: db-ga-why-grid, db-seo-why-item, db-li-num-item and so on, one
   prefix per page. Thirteen copies of one design, which is why they had drifted
   into flat text with small left aligned indigo stats while the strategy pages
   had cards and large white ones.

   Matched on the shared suffix rather than each prefix, so a new page picks the
   design up automatically. Scoped to .db-act--dark because every one of these
   sections is a dark act, which also keeps the attribute selectors off anything
   unrelated and beats the per page rules without needing !important. */
.db-act--dark [class*="-why-head"]{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:end;margin-bottom:clamp(44px,5vw,70px)}
.db-act--dark [class*="-why-head"] h2{font-family:'Aeonik', 'Aeonik Fallback';font-weight:600;font-size:clamp(2.6rem,3.4vw,3.8rem);line-height:1.06;color:#fff}
.db-act--dark [class*="-why-lead"] .db-sub{margin-top:16px;max-width:64ch;text-wrap:balance;color:var(--pale-2,#A1A1A1)}
.db-act--dark [class*="-why-stats"]{display:flex;gap:clamp(30px,3.8vw,64px);justify-content:flex-end;flex-wrap:wrap}
.db-act--dark [class*="-num-item"]{text-align:right}
.db-act--dark [class*="-num-item"] > [class*="-num"]:not([class*="-num-l"]){font-family:'Aeonik', 'Aeonik Fallback';font-weight:600;font-size:clamp(3rem,4vw,4.2rem);line-height:1;color:#fff !important}
body .db-act--dark [class*="-num-item"] > [class*="-num"] span{color:#fff !important}
.db-act--dark [class*="-num-l"]{font-size:12.5px;color:var(--pale-2,#A1A1A1);margin-top:8px;max-width:20ch;margin-left:auto;text-wrap:balance;line-height:1.45}
.db-act--dark [class*="-why-grid"]{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,34px)}
.db-act--dark [class*="-why-grid"] > [class*="-why-item"]{background:var(--dfill-1,rgba(255,255,255,.035));border:1px solid var(--dline-1,rgba(255,255,255,.1));border-radius:16px;padding:clamp(24px,2.6vw,34px)}
.db-act--dark [class*="-why-item"] h3{font-family:'Aeonik', 'Aeonik Fallback';font-weight:600;font-size:clamp(1.9rem,2.1vw,2.2rem);color:#fff;margin:0 0 12px;line-height:1.15}
.db-act--dark [class*="-why-item"] p{font-size:14.5px;color:var(--pale-2,#A1A1A1);line-height:1.65;margin:0;text-wrap:pretty}
@media (max-width:820px){
  .db-act--dark [class*="-why-head"]{grid-template-columns:1fr;gap:24px}
  .db-act--dark [class*="-why-stats"]{justify-content:flex-start}
  .db-act--dark [class*="-num-item"]{text-align:left}
  .db-act--dark [class*="-num-l"]{margin-left:0}
  .db-act--dark [class*="-why-grid"]{grid-template-columns:1fr}
}

/* Ask-the-machines line (16 Sept 2026): was running the full section width. */
.db-why .askai p{max-width:1000px !important;margin-inline:auto;text-wrap:pretty}

/* db-faq-tidy */

/* Answer: sized and coloured like body copy, not inherited from the section. */
details .a{font-size:16px !important;line-height:1.7;color:rgba(22,22,22,.86);max-width:68ch}
details .a p{font-size:inherit;line-height:inherit;margin:0 0 14px}
details .a p:last-child{margin-bottom:0}
details .a ul,details .a ol{font-size:inherit;line-height:inherit;margin:0 0 14px;padding-left:20px}
details .a li{margin-bottom:6px}
details .a a{color:#2056DF}

/* Question: one size everywhere. Was 17px on some lists and 16.8px on others. */
details > summary{font-size:17px}
details > summary h3.faq-q,details > summary h3{font-size:17px;line-height:1.4}

@media (max-width:767px){
  details .a{font-size:15px !important}
  details > summary,details > summary h3.faq-q,details > summary h3{font-size:15.5px}
}

/* ---- One FAQ toggle, sitewide (16 Sept 2026) --------------------------------
   Standardised on the /website-design/ marker: a light indigo + at the right of
   the row that rotates 45 degrees into a cross when the item opens. No circle.

   Matched on the element, not the class. The FAQ container carries 22 different
   class names across the site and the answer div 16, with many having none, so
   any class based match missed half the pages. Every <details> is an FAQ except
   the plan comparison on the care plans page (.cmp) and the three vs toggles on
   the AI pages (.db-vs-toggle), both excluded.

   Two pages draw their marker as a real element in the markup rather than a
   pseudo element: span.ico on membership and span.faq-tog on branding. Those are
   hidden, or the page shows two markers. Note .eco-faq-q is NOT a marker, it is
   the question text, so it must not be caught by the same rule.

   !important because several pages scope their marker to an element ID
   (#brxe-xxxxxx summary::after), which outranks any class based rule. */
details:not(.cmp):not(.db-vs-toggle) > summary{list-style:none !important;cursor:pointer;display:block;position:relative;padding-right:44px}
details:not(.cmp):not(.db-vs-toggle) > summary::-webkit-details-marker{display:none}
details:not(.cmp):not(.db-vs-toggle) > summary > .ico,
details:not(.cmp):not(.db-vs-toggle) > summary > .faq-tog{display:none !important}
details:not(.cmp):not(.db-vs-toggle) > summary::after{
  content:'+' !important;position:absolute;right:4px;top:50%;
  transform:translateY(-50%) !important;transform-origin:50% 50%;
  font-family:'Aeonik', 'Aeonik Fallback',sans-serif;font-size:24px;font-weight:300;line-height:1;
  color:#4F27C7;background:none;border:none;width:auto;height:auto;border-radius:0;
  display:block;transition:transform .25s ease,color .25s ease;
}
/* !important here too: the per page BASE rule is ID scoped (#brxe-xxxxxx
   summary::after) at 1,0,2 and an id outranks the three classes in this
   selector, so without it the base transform won and the + never rotated. */
details[open]:not(.cmp):not(.db-vs-toggle) > summary::after{transform:translateY(-50%) rotate(45deg) !important;background:none !important;color:#4F27C7}
details:not(.cmp):not(.db-vs-toggle) > summary:hover::after{color:#2056DF}
/* on the dark acts the indigo is too low contrast, lift it */
.db-act--dark details:not(.cmp):not(.db-vs-toggle) > summary::after,
.act-dark details:not(.cmp):not(.db-vs-toggle) > summary::after{color:#9F86FF}
@media (prefers-reduced-motion:reduce){details:not(.cmp):not(.db-vs-toggle) > summary::after{transition:none}}

/* db-seo-prose */

.sp-track,[class*="-sp-inner"]{font-size:14.5px !important;color:rgba(22,22,22,.8) !important}
.seo-prose h3{color:rgba(22,22,22,.62) !important}
@media (max-width:760px){
  .sp-flow{cursor:grab}
  .sp-track{padding-block:2px}
}

/* Real columns, not grid cells (16 Sept 2026).
   The per page rule is #brxe-xxxx .sp-track{display:grid;grid-template-columns:1fr 1fr}.
   A grid puts each paragraph in its own cell, so three paragraphs fill cells 1, 2
   and 3 and leave cell 4 empty: one short column, one long one, and a hole at the
   bottom right. Multi column flows the text instead and balances the two columns
   whatever the paragraph count, which is what this block always wanted.
   !important because the page rules are ID scoped and would otherwise win. */
@media (min-width:761px){
  .sp-track,[class*="-sp-inner"]{display:block !important;columns:2 !important;column-gap:clamp(36px,4vw,72px) !important;column-fill:balance;grid-template-columns:none !important}
  .sp-text,[class*="-sp-text"]{display:block;margin:0 0 18px;break-inside:auto}
  .sp-text:last-child,[class*="-sp-text"]:last-child{margin-bottom:0}
}

/* Links in the prose block (16 Sept 2026). They inherited the grey body colour
   with no underline, so every internal link we added down here was invisible. */
.sp-text a,[class*="-sp-text"] a,.seo-prose a{color:#2056DF !important;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(32,86,223,.45)}
.sp-text a:hover,[class*="-sp-text"] a:hover,.seo-prose a:hover{color:#1A48BD !important;text-decoration-color:currentColor}

/* db-mnav-css */
/* ===== Design Box Mobile Menu ===== */
.db-mnav{ display:none; }

/* Mobile top bar (hidden by default; shown <=991px) */
/* ===== Floating mobile bar (transparent at top, glass on scroll) ===== */
.db-mnav__topbar{ display:none; }

.db-mnav__topbar{
  position:fixed; top:5px; left:5px; right:5px; height:56px; z-index:99996;
  border-radius:999px;
  background:transparent;
  border:1px solid transparent;
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease, box-shadow .4s ease, transform .55s cubic-bezier(.16,.84,.28,1), opacity .45s ease;
  pointer-events:none;
}
/* Hidden while scrolling down, back on scroll up. Matches the desktop header. */
.db-mnav--hidden .db-mnav__topbar{ transform:translateY(-120%); opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.4,0,.7,.2), opacity .2s ease; }
@media (prefers-reduced-motion:reduce){
  .db-mnav__topbar{ transition:background .4s ease, border-color .4s ease; }
  .db-mnav--hidden .db-mnav__topbar{ transform:none; opacity:1; }
}
/* Glass background once scrolled */
.db-mnav.is-scrolled .db-mnav__topbar{
  background:rgba(22,22,26,0.55);
  border-color:rgba(255,255,255,0.12);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 8px 30px rgba(0,0,0,0.28);
}

/* Call icon (left, inside the bar) */
.db-mnav__call{
  position:absolute; top:50%; left:16px; transform:translateY(-50%); z-index:100000;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; pointer-events:auto;
  transition:background .3s ease, opacity .25s ease;
}
.db-mnav__call:hover{ background:rgba(255,255,255,0.08); }
.db-mnav__call svg{ display:block; width:25px; height:25px; opacity:.92; transform:translateY(-0.5px); }

/* Centered logo */
.db-mnav__logo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:99998;
  height:56px; display:flex; align-items:center; justify-content:center;
  pointer-events:auto;
}
.db-mnav__logo img{ height:34px; width:auto; display:block; }

/* When menu open, hide the call icon + centered logo (keep only the hamburger/X) */
.db-mnav.is-open .db-mnav__call,
.db-mnav.is-open .db-mnav__logo{ opacity:0; pointer-events:none; transition:opacity .25s ease; }

/* Toggle (right, inside the bar) */
.db-mnav__toggle{
  position:fixed; top:11px; right:16px; z-index:100000;
  width:44px; height:44px; border:0; border-radius:50%;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; pointer-events:auto;
  transition:background .3s ease;
}
.db-mnav__toggle:hover{ background:rgba(255,255,255,0.08); }
.db-mnav__bars{ position:relative; width:20px; height:14px; display:block; }
.db-mnav__bars i{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background:#fff; transition:transform .35s cubic-bezier(.7,0,.2,1), opacity .25s ease, top .35s cubic-bezier(.7,0,.2,1);
}
.db-mnav__bars i:nth-child(1){ top:0; }
.db-mnav__bars i:nth-child(2){ top:6px; }
.db-mnav__bars i:nth-child(3){ top:12px; }
.db-mnav.is-open .db-mnav__bars i:nth-child(1){ top:6px; transform:rotate(45deg); }
.db-mnav.is-open .db-mnav__bars i:nth-child(2){ opacity:0; }
.db-mnav.is-open .db-mnav__bars i:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* Overlay */
.db-mnav__overlay{
  position:fixed; inset:0; z-index:99999; display:flex; justify-content:flex-end;
}
.db-mnav__overlay[hidden]{ display:none; }
.db-mnav__backdrop{
  position:absolute; inset:0; background:rgba(8,8,12,0.42);
  opacity:0; transition:opacity .45s ease;
}
.db-mnav.is-open .db-mnav__backdrop{ opacity:1; }

.db-mnav__sheet{
  position:relative; width:100%; max-width:520px; height:100%;
  background:rgba(20,20,26,0.62);
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-left:1px solid rgba(255,255,255,0.10);
  box-shadow:-20px 0 60px rgba(0,0,0,.45);
  clip-path:inset(0 0 0 0);
  transform:translateX(100%);
  transition:transform .55s cubic-bezier(.76,0,.24,1);
  display:flex; flex-direction:column;
}
.db-mnav.is-open .db-mnav__sheet{ transform:translateX(0); }

.db-mnav__inner{
  flex:1; display:flex; flex-direction:column;
  padding:96px 32px 36px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}

/* List */
.db-mnav__list{ list-style:none; margin:0; padding:0; flex:1; }
.db-mnav__item{ border-bottom:1px solid rgba(255,255,255,0.035); }
/* Staggered entrance (CSS, not GSAP delay) */
.db-mnav__item, .db-mnav__foot{
  opacity:0; transform:translateY(26px);
  transition:opacity .55s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.db-mnav.is-open .db-mnav__item,
.db-mnav.is-open .db-mnav__foot{ opacity:1; transform:translateY(0); }
.db-mnav.is-open .db-mnav__item:nth-child(1){ transition-delay:.20s; }
.db-mnav.is-open .db-mnav__item:nth-child(2){ transition-delay:.26s; }
.db-mnav.is-open .db-mnav__item:nth-child(3){ transition-delay:.32s; }
.db-mnav.is-open .db-mnav__item:nth-child(4){ transition-delay:.38s; }
.db-mnav.is-open .db-mnav__item:nth-child(5){ transition-delay:.44s; }
.db-mnav.is-open .db-mnav__item:nth-child(6){ transition-delay:.50s; }
.db-mnav.is-open .db-mnav__foot{ transition-delay:.56s; }
.db-mnav__item:first-child{ border-top:1px solid rgba(255,255,255,0.08); }

.db-mnav__link{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; background:none; border:0; cursor:pointer; text-align:left;
  font-family:"Aeonik", 'Aeonik Fallback',sans-serif; font-weight:500; font-size:26px; line-height:1.15;
  letter-spacing:-.01em; color:#fff; text-decoration:none; text-shadow:0 1px 3px rgba(0,0,0,0.35);
  padding:20px 2px; transition:color .25s ease, opacity .25s ease;
}
.db-mnav__link:hover{ color:#9aa7ff; }

/* Chevron */
.db-mnav__chev{
  position:relative; display:inline-block; width:16px; height:16px; flex:0 0 auto; margin-right:2px;
  color:#ffffff;
  transition:transform .4s cubic-bezier(.76,0,.24,1);
}
.db-mnav__chev::before{
  content:""; position:absolute; top:42%; left:50%;
  width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  border-radius:1px;
  transform:translate(-50%,-50%) rotate(45deg);
  opacity:.85;
}
.db-mnav__trigger[aria-expanded="true"] .db-mnav__chev{ transform:rotate(180deg); color:#fff; }
.db-mnav__trigger[aria-expanded="true"]{ color:#9aa7ff; }

/* Sub (accordion) */
.db-mnav__sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.76,0,.24,1); }
.db-mnav__trigger[aria-expanded="true"] + .db-mnav__sub{ grid-template-rows:1fr; }
.db-mnav__subinner{ overflow:hidden; }
.db-mnav__sub a{
  display:block; font-family:"Aeonik", 'Aeonik Fallback',sans-serif; font-size:15px; font-weight:400;
  color:rgba(255,255,255,.72); text-decoration:none; text-shadow:0 1px 2px rgba(0,0,0,0.3); padding:8px 2px 8px 4px;
  transition:color .25s ease, padding-left .25s ease;
}
.db-mnav__sub a:first-child{ padding-top:4px; }
.db-mnav__sub a:last-child{ padding-bottom:22px; }
.db-mnav__sub a:hover{ color:#fff; padding-left:10px; }

/* Footer */
.db-mnav__foot{ margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.db-mnav__cta{
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:"Aeonik", 'Aeonik Fallback',sans-serif; font-weight:600; font-size:16px; letter-spacing:.01em;
  color:#fff; text-decoration:none; background:#3b5bfd; border-radius:999px;
  padding:18px 24px; transition:transform .25s ease, background .25s ease;
}
.db-mnav__cta:hover{ background:#2f4cf0; transform:translateY(-2px); }
.db-mnav__phone{
  text-align:center; font-family:"Aeonik", 'Aeonik Fallback',sans-serif; font-size:14px; font-weight:500;
  color:rgba(255,255,255,.78); text-decoration:none; letter-spacing:.02em;
  transition:color .25s ease;
}
.db-mnav__phone:hover{ color:#fff; }

/* Lock scroll */
body.db-mnav-lock{ overflow:hidden; }

/* ===== Breakpoint: show mobile menu, hide desktop nav (<=991px) ===== */
@media (max-width:991px){
  .db-mnav{ display:block; }

  /* Suppress the ORIGINAL mega-nav's built-in mobile UI (left burger, panels, dropdowns) */
  #brx-header .mega-nav__burger,
  #brx-header [class*="mega-nav__burger"],
  #brx-header .mega-nav__panel,
  #brx-header [class*="mega-nav__panel"],
  #brx-header .mega-nav__dropdown-wrapper,
  #brx-header [class*="mega-nav__dropdown"],
  #brx-header .mega-nav__backdrop{ display:none !important; }

  /* Hide the desktop nav links */
  #brx-header .mega-nav__bar-inner{ display:none !important; }

  /* Hide the ORIGINAL template mobile header row (centered logo + left burger + phone icon) */
  #brx-header .mega-nav__bar-end,
  #brx-header [class*="mega-nav__bar-end"]{ display:none !important; }

  /* Hide the original mobile bar container (#brxe-egqlea): centered logo + left burger + phone icon */
  #brx-header #brxe-egqlea,
  #brx-header .brxe-container{ display:none !important; }

  /* The slide-out menu already has the phone + CTA, so hide them in the bar
     to give a clean logo-left / hamburger-right layout with no overlap */
  #brx-header .mega-nav__bar-list.is--actions{ display:none !important; }

  /* Hide the entire desktop nav container; my topbar provides the mobile header */
  #brx-header .mega-nav__container{ display:none !important; }

  /* Show my mobile top bar: call icon (left), centered logo, hamburger (right) */
  /* Show the floating bar elements on mobile */
  .db-mnav__topbar{ display:block; }
  .db-mnav__call{ display:flex; }
  .db-mnav__logo{ display:flex; }
}
@media (max-width:520px){
  .db-mnav__link{ font-size:22px; }
  .db-mnav__inner{ padding:88px 24px 30px; }
}
.db-mnav__contact{ text-align:center; font-family:"Aeonik", 'Aeonik Fallback',sans-serif; font-size:15px; font-weight:400; color:rgba(255,255,255,.75); text-decoration:none; transition:color .25s ease; }
.db-mnav__contact:hover{ color:#fff; }

/* wp-custom-css */

/* Moved to wp-content/plugins/designbox-core/assets/legacy.css on 12 Sep 2026.
   Loaded by designbox-core/includes/db-legacy-css.php.
   Pre-move backup: novamira-sandbox/customizer-css.bak-20260912.css
   Do not add CSS here. It overrides Bricks unpredictably. Use the plugin. */


/* db-support-form */
.brx-popup.brxe-popup-2573 .brx-popup-content{max-height:calc(100dvh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#fluentform_5 .ff-el-group{margin-bottom:16px}
#fluentform_5 .ff-el-input--label label{font-size:14px;font-weight:500;color:#161616;margin-bottom:6px}
#fluentform_5 input.ff-el-form-control,#fluentform_5 select.ff-el-form-control,#fluentform_5 textarea.ff-el-form-control{font-size:16px;line-height:1.4;padding:13px 15px;border:1px solid #E4E2DB;border-radius:10px;color:#161616;background:#fff;box-shadow:none;height:auto;width:100%}
#fluentform_5 input.ff-el-form-control:focus,#fluentform_5 textarea.ff-el-form-control:focus{border-color:#2056DF;outline:none;box-shadow:none}
#fluentform_5 textarea.ff-el-form-control{min-height:110px}
#fluentform_5 .ff-btn-secondary:not(.ff_btn_no_style){background-color:#2056DF!important;border-radius:999px;padding:14px 30px;font-size:16px;font-weight:600}
#fluentform_5 .ff-btn.ff-btn-prev.ff-btn-secondary{background:transparent!important;color:#5b5b5b;padding:14px 2px;border-radius:0;border-bottom:1px solid rgba(91,91,91,.45)}
@media (max-width:767px){
.brx-popup.brxe-popup-2573 .brx-popup-content{width:calc(100vw - 20px)!important;max-width:none!important;padding:16px 16px 18px!important;border-radius:18px}
.brx-popup.brxe-popup-2573 #brxe-vtzinm{position:absolute!important;top:10px!important;right:10px!important;width:30px!important;height:30px!important;display:flex!important;align-items:center;justify-content:center}
.brx-popup.brxe-popup-2573 #brxe-vtzinm svg{width:16px!important;height:16px!important}
#brxe-cwjiwx{padding:0!important}
#brxe-skhphz{row-gap:12px!important;align-items:flex-start!important}
#brxe-cwnfgo{font-size:20px!important;line-height:1.2!important;margin:0!important;text-align:left!important;padding-right:36px}
#fluentform_5 .ff-el-progress-status{display:none!important}
#fluentform_5 .ff-el-progress{width:100%!important;height:6px!important}
#fluentform_5 .ff-step-header.ff-step-header--progress{margin-bottom:16px!important}
#fluentform_5 .ff-el-group{margin-bottom:12px}
#fluentform_5 .support-form-checkboxes-container-styling .ff-el-input--content{display:flex!important;flex-direction:column!important;gap:6px!important}
#fluentform_5 .support-form-checkboxes-container-styling .ff-el-form-check{width:100%!important;margin:0!important;padding:0!important}
#fluentform_5 .support-form-checkboxes-container-styling .ff-el-form-check label{width:100%;margin:0}
#fluentform_5 .support-form-checkboxes-container-styling .ff-el-form-check label>span{display:block!important;width:100%!important;font-size:15px!important;line-height:1.35!important;padding:11px 14px!important;border-radius:10px!important;text-align:left!important}
#fluentform_5 .support-form-checkboxes-container-styling label{font-size:14px!important}
#fluentform_5 .step-nav{display:flex;align-items:center;gap:12px;margin-top:18px}
#fluentform_5 .ff-btn-next,#fluentform_5 .ff-btn-submit{flex:1 1 auto;padding:13px 18px;font-size:15px!important}
#fluentform_5 .ff-btn.ff-btn-prev.ff-btn-secondary{flex:0 0 auto}
#fluentform_5 .ff_upload_btn.ff-btn{width:100%;padding:15px 14px!important;font-size:15px}
}
/* db-support-scroll */
@media (max-width:767px){
.brx-popup.brxe-popup-2573 #brxe-cwnfgo{position:sticky;top:0;z-index:3;background:#fff;padding-top:2px;padding-bottom:8px}
.brx-popup.brxe-popup-2573 .brx-popup-content::after{content:"";display:block;position:sticky;bottom:-18px;left:0;height:34px;margin-top:-34px;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff 78%)}
}
/* db-support-gate */
#fluentform_5 .db-s-gate{margin-bottom:20px}
#fluentform_5 .db-s-note{background:#F5F4F0;border:1px solid #E4E2DB;border-radius:12px;padding:18px 20px;margin:0 0 20px}
#fluentform_5 .db-s-note__t{margin:0 0 6px;font-size:16px;font-weight:600;color:#161616}
#fluentform_5 .db-s-note__p{margin:0 0 14px;font-size:14px;line-height:1.6;color:#4B5563}
#fluentform_5 .db-s-note__btn{display:inline-block;background:#2056DF;color:#fff;text-decoration:none;border-radius:999px;padding:10px 22px;font-size:15px}
#fluentform_5 .db-s-note__btn:hover{background:#1A48BD;color:#fff}
#fluentform_5 .db-s-note__alt{display:inline-block;margin-left:14px;font-size:14px;color:#2056DF;text-decoration:none;border-bottom:1px solid rgba(32,86,223,.35)}
@media (max-width:767px){
#fluentform_5 .db-s-note__btn{display:block;text-align:center}
#fluentform_5 .db-s-note__alt{display:block;margin:12px 0 0}
}