/* ============================================================
DESIGN TOKENS — matched from HubSpot CMS theme
============================================================ */
:root {
/* Colors */
--navy:         #0E1226;
--navy-deep:    #09152B;
--navy-header:  #1A3A5C;
--orange:       #ff9900;
--orange-dark:  #e17b00;
--gold:         #C9A961;
--white:        #ffffff;
--light-bg:     #fafafa;
--text-dark:    #0E1226;
--text-muted:   #647390;
--text-light:   rgba(255,255,255,0.75);
--border:       #D3DAE4;

/* Typography */
--ff-heading: 'Poppins', system-ui, sans-serif;
--ff-body:    'AR One Sans', system-ui, sans-serif;
--ff-ui:      'Inter', system-ui, sans-serif;

/* Layout */
--nav:         1480px;
--max:         1380px;
--max-narrow:  1296px;
--max-form:   900px;
}

* + p {margin-top: 25px;}

/* ============================================================
RESET / BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--ff-body); font-size: 1.125rem; font-weight: 400; line-height: 1.2; color: var(--white); background: var(--navy-deep); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--ff-heading); line-height: 1.2;  }

h1 {font-size: 57px !important; color: var(--white);font-weight: 500; }
h2 {font-size: 43px !important; font-weight: 500;  margin-bottom: 30px}
h3 {font-size: 32px !important; font-weight: 600; }
h4 {font-size: 24px !important; font-weight: 600; margin-bottom: 25px}
h5 {font-size: 20px !important; font-weight: 600; margin-bottom: 32px}
h6 {font-size: 18px !important; font-weight: 500;margin-bottom: 25 px}
p {font-size: 18px !important; font-weight: 400; line-height: 1.5;}

.subtitle {margin-bottom: 30px; color: #000;}
.section-sub {margin-bottom: 30px; }
.mb-30 {margin-bottom: 30px;}

/* ============================================================ SHARED UTILITIES ============================================================ */
.section-inner { max-width: var(--max); margin: 0 auto; padding: 60px 30px; }
.section-inner.narrow, .section-inner-meeting { max-width: var(--max-narrow); text-align: center;  margin: 0 auto;}
.section-inner.narrow-form { max-width: var(--max-form); }

/* Eyebrow label — colour varies by section bg */
.section-eyebrow { display: block; font-family: var(--ff-ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; text-align: center; }
.heading-orange { color: var(--orange); }


/* ============================================================
BUTTONS
============================================================ */
.btn-orange { display: inline-block; background: var(--orange); color: var(--white); font-family: var(--ff-ui); font-weight: 500; font-size: 0.9375rem; padding: 0.75rem 1.6rem; border-radius: 8px; border: 2px solid var(--orange); transition: background 0.2s, border-color 0.2s; cursor: pointer; }
.btn-orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn-outline { display: inline-block; background: transparent; color: var(--white); font-family: var(--ff-ui); font-weight: 500; font-size: 0.9375rem; padding: 0.75rem 1.6rem; border-radius: 8px; border: 2px solid var(--orange); transition: color 0.2s, border-color 0.2s; }
.btn-outline:hover { color: var(--orange); border-color: var(--orange); }

/* ============================================================
NAV  — background: #1A3A5C
============================================================ */

.navbar { position: sticky; top: 0; z-index: 100; background: #000; background-image: linear-gradient(to bottom, rgba(26, 58, 92, 1), rgba(26, 58, 92, 0.4)) !important; background-position: left top !important; background-size: auto !important; background-repeat: no-repeat !important; box-shadow: 0 2px 16px rgba(0,0,0,0.3); padding: 20px clamp(1.25rem, 4vw, 2rem); }
.nav-inner { max-width: var(--nav); margin: 0 auto; flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { height: 72px; width: auto; }

/* ============================================================ HERO — background: #0E1226 ============================================================ */

.hero { background: var(--navy);  }
.hero-inner { max-width: var(--max); margin: 0 auto; padding: 40px clamp(1.25rem, 4vw, 2rem) 80px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; min-height: 85vh; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-img img { width: 100%; height: auto; object-fit: cover; }

/* ============================================================
WHAT YOU GET  — background: #FAFAFA
============================================================ */
.what-you-get { background: var(--light-bg); }
.what-you-get .section-inner { text-align: center; }
.what-you-get h2 { color: var(--orange); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; text-align: left; }
.feature-card { background: var(--navy); border: 1px solid var(--border); border-radius: 16px; padding:32px; color: var(--white); -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; }

/* ============================================================ PRICING — background: #09152B (dark, not white!) ============================================================ */

.pricing-section { background: var(--navy-deep); text-align: center; }
.pricing-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.pricing-card { background: #fff; color: var(--text-dark); border-radius: 16px; padding:30px;  }
.pricing-card:hover { border-color: var(--orange); }

/* ============================================================ PROCESS — background: #FAFAFA ============================================================ */

.process-section { background: var(--light-bg); color: var(--text-dark); }
.heading_box { text-align: center; }
.process-section h2 { color: var(--orange); }
.steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }




/* ============================================================
VIDEO  — background: gradient #09152B → #1A3A5C
============================================================ */
.video-section { background: linear-gradient(to bottom right, var(--navy-deep), var(--navy-header)); color: var(--white);  }
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 16px 48px rgba(0,0,0,0.45); margin-bottom: 1.25rem; }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* ============================================================ RESERVE FORM — background: #FAFAFA, card: #0E1226 ============================================================ */

.reserve-section {  color: var(--text-dark); background: var(--light-bg); }
.reserve-section  .form_header {text-align: center;}


/* .meeting_box {display:none; } */


[data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content { margin: 0 auto; padding: 40px; background: #0b1a30 !important; border-radius: 8px !important; box-shadow: 0 20px 40px rgba(0,0,0,.2) !important; -webkit-border-radius: 8px !important; -moz-border-radius: 8px !important; -ms-border-radius: 8px !important; -o-border-radius: 8px !important; }

/* Labels */

[data-hsfc-id=Renderer] .hsfc-FieldLabel { color: #fff !important; font-size: 14px !important; font-weight: 400; margin-bottom: 10px; display: block; }
[data-hsfc-id=Renderer] .hsfc-TextInput, [data-hsfc-id=Renderer] .hsfc-TextareaInput { padding: 15px !important; color: #fff !important; margin: 0; border-radius: 8px !important; -webkit-border-radius: 8px !important; -moz-border-radius: 8px !important; -ms-border-radius: 8px !important; -o-border-radius: 8px !important; background-color: transparent !important; border: 1px solid #fff !important; }
[data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret { background: transparent !important; border: 1px solid #fff !important; border-radius: 8px 0 0 8px !important; border-right: 0 !important; -webkit-border-radius: 8px 0 0 8px !important; -moz-border-radius: 8px 0 0 8px !important; -ms-border-radius: 8px 0 0 8px !important; -o-border-radius: 8px 0 0 8px !important; }
/* Modern browsers */
input::placeholder,
textarea::placeholder , .hsfc-PhoneInput, .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl)>.hsfc-TextInput{color: #d6d8ddd5 !important; font-size: 14px; }
.hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl)>.hsfc-TextInput{ border-radius: 0 8px 8px 0 !important; -webkit-border-radius: 0 8px 8px 0 !important; -moz-border-radius: 0 8px 8px 0 !important; -ms-border-radius: 0 8px 8px 0 !important; -o-border-radius: 0 8px 8px 0 !important; }
.hs-form-required { color: #d4af37;}
[data-hsfc-id=Renderer] .hsfc-DropdownOptions__Search { background-color: #0b1a30; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }
input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active, 
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  textarea:-webkit-autofill:active { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px #0b1a30 inset !important;  }
[data-hsfc-id=Renderer] .hsfc-DropdownOptions { border-radius: 8px !important; -webkit-border-radius: 8px !important; -moz-border-radius: 8px !important; -ms-border-radius: 8px !important; -o-border-radius: 8px !important; }
[data-hsfc-id=Renderer] .hsfc-DropdownInput__Caret>span {   border-top: 6px solid rgb(255 255 255) !important;}
/* Submit */
[data-hsfc-id=Renderer] .hsfc-Button, [data-hsfc-id=Renderer] .hsfc-Button:not([disabled]):focus { background-color: #ff9900 !important; padding: 14px 24px !important;  color: #fff !important; font-weight: 500 !important; }
[data-hsfc-id=Renderer] .hsfc-Button:hover { background: #c49c2d !important; transform: translateY(-2px) !important; }
.hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }
.hs-error-msg { color: #ff8f8f; font-size: 13px; }

[data-hsfc-id=Renderer] .hsfc-TextInput , [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl)>.hsfc-TextInput{ padding: 15px !important;  color: #fff !important; font-size: 18px !important;}

[data-hsfc-id=Renderer] .hsfc-DropdownInput__Caret { bottom: 0; height: 53px !important;}
[data-hsfc-id=Renderer] .hsfc-DropdownInput>input { padding-right: 40px !important;}
/* ============================================================ FOOTER — gradient #1A3A5C → #000000 ============================================================ */

.meeting { background:#0b1a30 !important; text-align: center;  }
.section-inner-meeting {padding: 60px 30px;}
.MeetingsPublic {    min-width: 295px !important; overflow: hidden;}


.meeting_box::-webkit-scrollbar , .embedded::-webkit-scrollbar {width: 5px;}
.meeting_box::-webkit-scrollbar-track, .embedded::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey;  border-radius: 10px;}
.meeting_box::-webkit-scrollbar-thumb, .embedded::-webkit-scrollbar-thumb{  background: #6e73f9; border-radius: 10px;}
.meeting_box::-webkit-scrollbar-thumb:hover, .embedded::-webkit-scrollbar-thumb:hover { background: #000fff; }

/* ============================================================
RESPONSIVE
============================================================ */


.site-footer { background: #000; background-image: linear-gradient(to bottom, rgba(26, 58, 92, 0.8), rgba(0, 0, 0, 1)) !important; background-position: left top !important; background-size: auto !important; background-repeat: no-repeat !important; padding: 60px; }
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
.footer-logo img { height: 90px; width: auto; margin-bottom: 0.25rem; }
.footer-address { font-size: 16px !important; color: #fff;  }
.footer-legal { font-size: 14px !important; color: #fff; }



/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 992px) {
.hero-inner { grid-template-columns: 1fr; min-height: auto; padding: 40px; }
.hero-img img { height: auto; }
.section-inner , .site-footer { padding:40px 20px; }
.section-inner-meeting { padding:10px; }
}


@media (max-width: 768px) {
  
h1 {font-size: 44px !important; color: var(--white);font-weight: 500; }
h2 {font-size: 30px !important; font-weight: 500;  margin-bottom: 25px}
h3 {font-size: 28px !important; font-weight: 600; }
h4 {font-size: 20px !important; font-weight: 600; margin-bottom: 25px}
h5 {font-size: 18px !important; font-weight: 600; margin-bottom: 25px}
h6 {font-size: 16px !important; font-weight: 500;margin-bottom: 20px}
p {font-size: 16px !important; font-weight: 400; line-height: 1.5;}

.subtitle, .section-sub , .mb-30 {margin-bottom: 25px;}
.nav-logo img { height: 55px;}
.hero-inner { grid-template-columns: 1fr; min-height: auto; }
.hero-img img { height: auto; }
.feature-card, .pricing-card  {padding:  25px 20px }
.feature-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
.steps-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.process-section .section-eyebrow { text-align: left; }

/* //btn// */

.btn-orange, .btn-outline { text-align: center; }

/* //form// */

.reserve-form { padding: 24px; }

[data-hsfc-id=Renderer] .hsfc-TextInput, [data-hsfc-id=Renderer] .hsfc-PhoneInput {margin-bottom: 20px !important;}
[data-hsfc-id=Renderer] .hsfc-Row, [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl)>.hsfc-TextInput {margin-bottom: 0 !important;}
[data-hsfc-id=Renderer] .hsfc-Row { width: 100% !important;  display: block !important;}
[data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content { padding: 30px 20px !important;}

}


@media (prefers-reduced-motion: reduce) {
* { transition: none !important; scroll-behavior: auto !important; }
}