.elementor-kit-9{--e-global-color-primary:#00A5E4;--e-global-color-secondary:#020618;--e-global-color-text:#051522;--e-global-color-accent:#0084D1;--e-global-color-a9bg:#F5FBFF;--e-global-color-a9tint:#F0F9FF;--e-global-color-a9surface:#FFFFFF;--e-global-color-a9hairline:#E2E8F0;--e-global-color-a9border:#CCDAE4;--e-global-color-a9muted:#45556C;--e-global-color-a9ondark:#90A1B9;--e-global-color-a9ondark2:#CAD5E2;--e-global-color-a9soft:#74D4FF;--e-global-color-a9sky200:#B8E6FE;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-size:96px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:0.89em;--e-global-typography-primary-letter-spacing:-0.065em;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-size:48px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.04em;--e-global-typography-secondary-letter-spacing:-0.045em;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.75em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:800;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.33em;--e-global-typography-accent-letter-spacing:0.18em;--e-global-typography-a9card-font-family:"Manrope";--e-global-typography-a9card-font-size:18px;--e-global-typography-a9card-font-weight:700;--e-global-typography-a9card-line-height:1.4em;--e-global-typography-a9card-letter-spacing:-0.02em;--e-global-typography-a9small-font-family:"Manrope";--e-global-typography-a9small-font-size:14px;--e-global-typography-a9small-font-weight:400;--e-global-typography-a9small-line-height:1.5em;--e-global-typography-a9small-letter-spacing:0em;--e-global-typography-a9lead-font-family:"Manrope";--e-global-typography-a9lead-font-size:20px;--e-global-typography-a9lead-font-weight:400;--e-global-typography-a9lead-line-height:1.6em;--e-global-typography-a9lead-letter-spacing:0em;--e-global-typography-a9stat-font-family:"Manrope";--e-global-typography-a9stat-font-size:48px;--e-global-typography-a9stat-font-weight:800;--e-global-typography-a9stat-line-height:1em;--e-global-typography-a9stat-letter-spacing:-0.06em;--e-global-typography-a9btn-font-family:"Manrope";--e-global-typography-a9btn-font-size:14px;--e-global-typography-a9btn-font-weight:700;--e-global-typography-a9btn-line-height:1.2em;--e-global-typography-a9btn-letter-spacing:0em;background-color:#F5FBFF;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   A9 Self Storage Inverness - supplementary CSS
   Only the things Elementor's own controls cannot express. Every block is
   numbered and explained so it can be maintained or removed safely.
   ========================================================================== */

/* 1. Content container. Reproduces the reference site's .site-container:
      max 1280px wide, 16px side gutters, opening to 32px from 640px up. */
.a9-container { width: min(100% - 2rem, 80rem) !important; margin-inline: auto !important; }
@media (min-width: 640px) { .a9-container { width: min(100% - 4rem, 80rem) !important; } }

/* 2. Smooth scrolling for the two anchor buttons that jump to #register. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 3. Hero image grading. Elementor's background overlay supports two colour
      stops; the reference uses a four-stop horizontal gradient plus a soft
      radial glow, rotating to vertical on mobile. */
#top { position: relative; }
#top::before, #top::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#top::before { background: linear-gradient(90deg, rgba(5,15,29,.96) 0%, rgba(5,15,29,.86) 38%, rgba(5,15,29,.25) 72%, rgba(5,15,29,.1) 100%); }
#top::after { background: radial-gradient(circle at 70% 40%, rgba(0,169,225,.15), transparent 32%); }
@media (max-width: 767px) {
  #top::before { background: linear-gradient(180deg, rgba(5,15,29,.86) 0%, rgba(5,15,29,.5) 44%, rgba(5,15,29,.96) 100%); }
}

/* 4. Balanced headline wrapping, so headings never leave a single orphan word. */
.a9-balance, .a9-balance h1, .a9-balance h2 { text-wrap: balance; }
.a9-pretty, .a9-pretty p { text-wrap: pretty; }

/* 5. Frosted glass on the translucent elements that sit over the hero photo. */
.a9-blur { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.a9-btn-outline .elementor-button { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* 6. Button glow and the 2px hover lift used across the page. */
.a9-btn-primary .elementor-button { box-shadow: 0 12px 32px rgba(0,169,225,.3); transition: background-color .2s ease, transform .2s ease; }
.a9-btn-outline .elementor-button { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.a9-btn-primary .elementor-button:hover,
.a9-btn-outline .elementor-button:hover { transform: translateY(-2px); }
.a9-logo-mark .elementor-icon { transition: transform .2s ease; }
.a9-logo:hover .a9-logo-mark .elementor-icon { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .a9-btn-primary .elementor-button:hover,
  .a9-btn-outline .elementor-button:hover,
  .a9-logo:hover .a9-logo-mark .elementor-icon { transform: none; }
}

/* 7. Room-size statistics: the unit sits small and untracked beside the numeral. */
.a9-stat p { margin: 0; }
.a9-stat .a9-unit { margin-left: 4px; font-size: 16px; letter-spacing: normal; font-weight: 800; }

/* 8. Founder portrait: the offset hairline frame behind the photograph.
      Uses ::after because Elementor containers already own ::before. */
.a9-portrait { position: relative; margin-inline: auto; }
.a9-portrait::after { content: ""; position: absolute; inset: -16px; transform: translate(16px, 16px); border: 1px solid #B8E6FE; border-radius: 34px; pointer-events: none; z-index: 0; background: none; }
.a9-portrait > * { position: relative; z-index: 1; }

/* 8b. Lucide icons are stroke-drawn outlines. Elementor fills SVGs with the
       icon colour by default, which turns them into solid blobs, so the
       stroke-based ones opt out. Any child carrying its own fill attribute
       (the keyhole dot) keeps it. */
svg[stroke="currentColor"] { fill: none !important; }
svg[stroke="currentColor"] > :not([fill]) { fill: none !important; }

/* 8c. Pills and badges hug their content instead of filling the column. */
.a9-hug { width: fit-content !important; }

/* 8d. Text Editor paragraphs inherit a theme bottom margin. All vertical
       rhythm on this page comes from container gaps and widget margins, so
       the stray margin is removed to keep spacing exact. */
.elementor-widget-text-editor p { margin-block: 0; }
.elementor-widget-text-editor p + p { margin-top: 1em; }

/* 8e. Icon widgets render an inline-block box, which leaves a few pixels of
       baseline descender space below the tile and pushes card heights out. */
.elementor-widget-icon .elementor-icon-wrapper { line-height: 0; }

/* 8g. Headings set to the span tag render inline, which adds baseline
       descender space inside the pills, the logo lockup and the stat labels. */
.elementor-widget-heading span.elementor-heading-title { display: block; }

/* 8f. Honeypot spam trap. This Elementor build renders the honeypot field
       without its own hiding class, so it is moved off screen here. It must
       stay in the DOM and stay empty: a submission that fills it is rejected.
       Off screen rather than display:none, because bots skip hidden fields. */
.elementor-widget-form .elementor-field-type-text:not(.elementor-field-group) {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 8h. Founder portrait keeps the reference 410:451 ratio at every width
       rather than a fixed height, so it never distorts on narrow screens. */
.a9-portrait-img img { aspect-ratio: 410 / 451; height: auto; width: 100%; object-fit: cover; }

/* 9. Quote attribution: name in bold, role in muted regular. */
.a9-attrib-wrap .a9-attrib { font-weight: 400; color: #62748E; }

/* 10. Privacy link inside the form card. */
.a9-form-note a { color: #0084D1; text-decoration: underline; text-underline-offset: 2px; }
.a9-form-note a:hover { color: #00A5E4; }

/* 11. Visible keyboard focus on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible { outline: 2px solid #00A5E4; outline-offset: 2px; border-radius: 4px; }

/* 12. Header sits above the hero grading layers. */
#a9-header { z-index: 30; }

/* 13. Footer links: the enquiry email and the build credit. Underlined so
       they read as links without relying on colour alone, and kept at the
       same #90A1B9 as the surrounding footer text for AA contrast. */
.a9-foot-link a,
.a9-credit a { color: #90A1B9; text-decoration: underline; text-underline-offset: 2px; transition: color .2s ease; }
.a9-foot-link a:hover,
.a9-credit a:hover { color: #74D4FF; }
.a9-credit p { text-align: center; }

/* 14. Consent banner. Complianz exposes its styling as CSS custom properties,
       so the A9 palette and Manrope are applied here rather than by editing the
       plugin. Pill buttons and the 28px radius match the page's card language. */
.cmplz-cookiebanner, .cmplz-manage-consent {
  --cmplz_banner_background_color: #FFFFFF;
  --cmplz_banner_border_color: #E2E8F0;
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_banner_border_radius: 28px 28px 28px 28px;
  --cmplz_text_color: #051522;
  --cmplz_hyperlink_color: #0084D1;
  --cmplz_button_border_radius: 999px 999px 999px 999px;
  --cmplz_button_accept_background_color: #00A5E4;
  --cmplz_button_accept_border_color: #00A5E4;
  --cmplz_button_accept_text_color: #FCFCFC;
  --cmplz_button_deny_background_color: #FFFFFF;
  --cmplz_button_deny_border_color: #CCDAE4;
  --cmplz_button_deny_text_color: #051522;
  --cmplz_button_settings_background_color: #FFFFFF;
  --cmplz_button_settings_border_color: #CCDAE4;
  --cmplz_button_settings_text_color: #45556C;
  --cmplz_slider_active_color: #00A5E4;
  --cmplz_slider_inactive_color: #90A1B9;
  --cmplz_category_header_always_active_color: #0084D1;
  font-family: Manrope, sans-serif;
}
.cmplz-cookiebanner .cmplz-title { font-weight: 800; letter-spacing: -0.02em; }
.cmplz-cookiebanner .cmplz-btn { font-weight: 700; transition: background-color .2s ease, transform .2s ease; }
.cmplz-cookiebanner .cmplz-btn:hover { transform: translateY(-1px); }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background-color: #00BCFF; }
@media (prefers-reduced-motion: reduce) { .cmplz-cookiebanner .cmplz-btn:hover { transform: none; } }
.cmplz-cookiebanner a:focus-visible, .cmplz-cookiebanner button:focus-visible { outline: 2px solid #00A5E4; outline-offset: 2px; }/* End custom CSS */