.elementor-kit-6{--e-global-color-primary:#F8F8F5;--e-global-color-secondary:#ECEDE8;--e-global-color-text:#1B1E1E;--e-global-color-accent:#005EB8;--e-global-color-b8a54b6:#FFCD00;--e-global-color-c05a1a7:#6E7169;--e-global-color-af741f5:#49989B;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-size:210px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:181px;--e-global-typography-primary-letter-spacing:-4.2px;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-size:27px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:27px;--e-global-typography-secondary-letter-spacing:1.4px;--e-global-typography-text-font-family:"Hanken Grotesk";--e-global-typography-text-font-size:22px;--e-global-typography-text-font-weight:300;--e-global-typography-text-font-style:italic;--e-global-typography-text-line-height:33px;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Cormorant Garamond";--e-global-typography-accent-font-size:58px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:63px;--e-global-typography-accent-letter-spacing:-0.6px;--e-global-typography-fc1bc7c-font-family:"Cormorant Garamond";--e-global-typography-fc1bc7c-font-size:36px;--e-global-typography-fc1bc7c-font-weight:500;--e-global-typography-fc1bc7c-line-height:40px;--e-global-typography-fc1bc7c-letter-spacing:0px;--e-global-typography-2544b1a-font-family:"Cormorant Garamond";--e-global-typography-2544b1a-font-size:25px;--e-global-typography-2544b1a-font-weight:500;--e-global-typography-2544b1a-line-height:29px;--e-global-typography-2544b1a-letter-spacing:0px;--e-global-typography-0882ded-font-family:"Cormorant Garamond";--e-global-typography-0882ded-font-size:48px;--e-global-typography-0882ded-font-weight:500;--e-global-typography-0882ded-line-height:48px;--e-global-typography-0882ded-letter-spacing:0px;--e-global-typography-0193c9a-font-family:"Cormorant Garamond";--e-global-typography-0193c9a-font-size:22px;--e-global-typography-0193c9a-font-weight:400;--e-global-typography-0193c9a-line-height:22px;--e-global-typography-0193c9a-letter-spacing:0px;--e-global-typography-8ca87cc-font-family:"Hanken Grotesk";--e-global-typography-8ca87cc-font-size:12px;--e-global-typography-8ca87cc-font-weight:400;--e-global-typography-8ca87cc-text-transform:uppercase;--e-global-typography-8ca87cc-line-height:17px;--e-global-typography-8ca87cc-letter-spacing:2.9px;--e-global-typography-a1bee45-font-family:"Hanken Grotesk";--e-global-typography-a1bee45-font-size:17px;--e-global-typography-a1bee45-font-weight:300;--e-global-typography-a1bee45-line-height:30px;--e-global-typography-706247f-font-family:"Hanken Grotesk";--e-global-typography-706247f-font-size:14.5px;--e-global-typography-706247f-font-weight:300;--e-global-typography-706247f-line-height:24px;--e-global-typography-706247f-letter-spacing:0px;--e-global-typography-4e9a55b-font-family:"Hanken Grotesk";--e-global-typography-4e9a55b-font-size:12px;--e-global-typography-4e9a55b-font-weight:400;--e-global-typography-4e9a55b-text-transform:uppercase;--e-global-typography-4e9a55b-line-height:16px;--e-global-typography-4e9a55b-letter-spacing:1.7px;--e-global-typography-e1342a8-font-family:"Hanken Grotesk";--e-global-typography-e1342a8-font-size:12px;--e-global-typography-e1342a8-font-weight:400;--e-global-typography-e1342a8-text-transform:uppercase;--e-global-typography-e1342a8-line-height:16px;--e-global-typography-e1342a8-letter-spacing:1.9px;--e-global-typography-b41f693-font-family:"Hanken Grotesk";--e-global-typography-b41f693-font-size:12px;--e-global-typography-b41f693-font-weight:400;--e-global-typography-b41f693-text-transform:uppercase;--e-global-typography-b41f693-line-height:16px;--e-global-typography-b41f693-letter-spacing:1.9px;--e-global-typography-1210649-font-family:"Hanken Grotesk";--e-global-typography-1210649-font-size:11px;--e-global-typography-1210649-font-weight:400;--e-global-typography-1210649-text-transform:uppercase;--e-global-typography-1210649-line-height:15px;--e-global-typography-1210649-letter-spacing:2px;--e-global-typography-7213474-font-family:"Cormorant Garamond";--e-global-typography-7213474-font-size:17px;--e-global-typography-7213474-font-weight:400;--e-global-typography-7213474-font-style:italic;--e-global-typography-7213474-line-height:26px;--e-global-typography-7213474-letter-spacing:0px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:var( --e-global-typography-b41f693-font-family ), Sans-serif;font-size:var( --e-global-typography-b41f693-font-size );font-weight:var( --e-global-typography-b41f693-font-weight );text-transform:var( --e-global-typography-b41f693-text-transform );line-height:var( --e-global-typography-b41f693-line-height );letter-spacing:var( --e-global-typography-b41f693-letter-spacing );border-radius:2px 2px 2px 2px;padding:15px 30px 15px 30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.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-kit-6{--e-global-typography-primary-font-size:74px;--e-global-typography-secondary-font-size:24px;--e-global-typography-text-font-size:16px;--e-global-typography-accent-font-size:34px;--e-global-typography-accent-line-height:40px;--e-global-typography-accent-letter-spacing:-0.6px;--e-global-typography-fc1bc7c-font-size:26px;--e-global-typography-fc1bc7c-line-height:30px;--e-global-typography-2544b1a-font-size:23px;--e-global-typography-0882ded-font-size:38px;--e-global-typography-a1bee45-font-size:15px;--e-global-typography-706247f-font-size:14px;--e-global-typography-4e9a55b-font-size:11px;--e-global-typography-4e9a55b-line-height:17px;--e-global-typography-4e9a55b-letter-spacing:1.7px;--e-global-typography-e1342a8-font-size:14px;--e-global-typography-1210649-font-size:10px;--e-global-typography-7213474-font-size:17px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-b41f693-font-size );line-height:var( --e-global-typography-b41f693-line-height );letter-spacing:var( --e-global-typography-b41f693-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-b41f693-font-size );line-height:var( --e-global-typography-b41f693-line-height );letter-spacing:var( --e-global-typography-b41f693-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ============================================================================ VILLA EOS — SITE CUSTOM CSS Elementor → hamburger → Site Settings → Custom CSS ============================================================================ Your existing rules, merged with the additive layer, organised into parts. Everything you had is still here — nothing was dropped except one rule of mine that conflicted with yours (noted in Part 2). CONTENTS 0 Tokens 1 Layout fixes — square carousel, page header, header gutter 2 Anchors & scrolling 3 Accessibility — focus states, skip link 4 Resilience — no-JS, reduced motion 5 Mobile — tap targets, small text, carousel, gallery, CTA 6 Hero 7 Form 8 Media & polish 9 Print THREE THINGS TO KNOW · `.page-header{display:none}` (Part 1) hides "Elementor #7" but it is still in the DOM as one of two

s. Rename the page and switch on Page Settings → Hide Title. The CSS is a patch, not the fix. · Hiding the gallery captions (Part 5) works around 12 filename captions like "…Third Bedroom extrai". Those strings are also what Google reads. Fix them in the Media Library when you get a chance. · The hero scrim (Part 6) is commented out. Switch it on only if the hero container has no Background Overlay of its own — two scrims stack. ========================================================================= */ /* ============================================================================ 0 · TOKENS ========================================================================= */ :root{ --eos-ink: var(--e-global-color-text, #1B1E1E); --eos-sand: var(--e-global-color-primary, #F8F8F5); --eos-stone: var(--e-global-color-c05a1a7, #6E7169); --eos-sea: var(--e-global-color-af741f5, #49989B); --eos-focus: var(--e-global-color-af741f5, #49989B); /* One number for every anchor landing. Must stay >= your Elementor Anchor Offset (currently 80) or headings tuck under the sticky header. */ --eos-anchor-offset: 88px; /* Height of the sticky mobile CTA bar, used to pad the page bottom and lift the sound button clear of it. */ --eos-cta-height: 72px; } /* ============================================================================ 1 · LAYOUT FIXES ========================================================================= */ /* --- Square media box for the slide carousels ---------------------------- */ .square-carousel{ --sq-size: 100%; /* fixed size? set e.g. 420px */ width: 100%; max-width: var(--sq-size); margin-inline: auto; aspect-ratio: 1 / 1; overflow: hidden; } /* Every layer between the widget and the media fills that box. */ .square-carousel > .elementor-widget-container, .square-carousel .elementor-image-carousel-wrapper, .square-carousel .elementor-main-swiper, .square-carousel .swiper, .square-carousel .swiper-wrapper, .square-carousel .swiper-slide, .square-carousel .swiper-slide-inner, .square-carousel .elementor-carousel-image{ height: 100% !important; width: 100%; margin: 0; } .square-carousel .swiper-slide-inner{ display: block; } /* Images: cover + centred. */ .square-carousel .swiper-slide-image, .square-carousel .swiper-slide-inner img, .square-carousel figure img{ width: 100% !important; height: 100% !important; max-height: none; object-fit: cover; object-position: center; display: block; } /* The media carousel uses a background-image, not an . */ .square-carousel .elementor-carousel-image{ background-size: cover !important; background-position: center center !important; padding-bottom: 0 !important; } /* --- Hide the Hello Elementor page title -------------------------------- Still renders "Elementor #7" on the front page. NOTE: this hides it, it does not remove it. See the header of this file. */ .page-header{ display: none !important; } /* --- Header gutter ------------------------------------------------------- Outer padding is 20px, but .e-con-inner adds another 34 — header content started at 54px while every section starts at 20. */ @media (max-width: 1024px){ .elementor-location-header .e-con-inner{ padding-left: 0 !important; padding-right: 0 !important; max-width: 100%; } } /* ============================================================================ 2 · ANCHORS & SCROLLING ============================================================================ Your Elementor Anchor Offset (80) handles in-page nav clicks. This covers someone opening /#house cold, where Elementor's JS never runs. REMOVED FROM THE ORIGINAL ADDITIVE FILE: `html{ scroll-behavior:smooth }`. It fights Elementor Pro's anchor-offset JS, which animates the scroll itself — two engines on one click gives a stutter or an overshoot. Your Elementor offset works, so CSS smooth-scroll is the one to drop. ========================================================================= */ [id]{ scroll-margin-top: var(--eos-anchor-offset); } /* ============================================================================ 3 · ACCESSIBILITY ============================================================================ There is currently no visible focus state anywhere on the site. Tab through it and you cannot tell where you are — a WCAG 2.4.7 failure, four lines to fix. `:focus-visible` means mouse users never see a ring; keyboard users do. ========================================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .elementor-button:focus-visible, .swiper-pagination-bullet:focus-visible, .elementor-swiper-button:focus-visible{ outline: 2px solid var(--eos-focus); outline-offset: 3px; border-radius: 2px; } /* A teal ring vanishes on dark photography. Add a halo over the hero. */ .elementor-background-overlay ~ * a:focus-visible, [class*="hero"] a:focus-visible, [class*="hero"] button:focus-visible{ outline-color: #fff; box-shadow: 0 0 0 5px rgba(27, 30, 30, .45); } .elementor-element a:focus-visible{ outline-style: solid; } /* --- Skip link ----------------------------------------------------------- Hello Elementor prints one, but it measures 1×1px and never appears — so it exists for audits and helps nobody. */ .skip-link.screen-reader-text:focus, a.skip-link:focus{ position: fixed !important; top: 12px; left: 12px; z-index: 100000; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; padding: 12px 20px; background: var(--eos-ink); color: var(--eos-sand); font-family: "Hanken Grotesk", sans-serif; font-size: 15px; font-style: normal; letter-spacing: .06em; text-decoration: none; border-radius: 2px; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); } /* ============================================================================ 4 · RESILIENCE ============================================================================ 60 widgets carry .elementor-invisible, so most of the page is visibility:hidden until JS reveals it on scroll. If a script fails or a slow phone times out, the visitor gets empty white blocks — booking form included. This is a safety net, not a reason to change your entrance animations. ========================================================================= */ .no-js .elementor-invisible, html:not(.js) .elementor-invisible{ visibility: visible !important; animation: none !important; opacity: 1 !important; } /* REMOVED: a 4-second "failsafe reveal" that used to sit here. It set an animation on .elementor-invisible that forced visibility:visible four seconds after load — but Elementor keeps that class on every element you have not scrolled to yet. So everything below the fold revealed itself on a timer and then animated a SECOND time when you reached it, which looked like the content was already there before its own entrance. A timer cannot tell "not scrolled to yet" from "JavaScript broke", so it was the wrong mechanism. The .no-js rule above and the