.elementor-kit-6{--e-global-color-primary:#08091A;--e-global-color-secondary:#040762;--e-global-color-text:#F4F5F9;--e-global-color-accent:#61CE70;--e-global-color-c54abf1:#14183A;--e-global-color-5bc1897:#2C3160;--e-global-color-e9a548a:#FDFEFF;--e-global-color-e2f23cb:#E8EAF3;--e-global-color-aa99745:#E58A33;--e-global-color-1ab9d65:#F09C48;--e-global-color-b73ae7c:#1C1103;--e-global-color-eeae9fb:#D87A14;--e-global-color-1783b66:#35D6B8;--e-global-color-4d2f22e:#F2635F;--e-global-color-8eb769b:#C4CBEC;--e-global-color-dab3f36:#A6AEDC;--e-global-color-702fb51:#7C84AE;--e-global-color-607438a:#475569;--e-global-color-9c4e553:#040762;--e-global-color-89ab24b:#FFFFFF1A;--e-global-typography-primary-font-family:"Plus Jakarta Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Plus Jakarta Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Plus Jakarta Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Plus Jakarta Sans";--e-global-typography-accent-font-weight:500;--e-global-typography-96da88d-font-family:"Plus Jakarta Sans";--e-global-typography-96da88d-font-size:68px;--e-global-typography-96da88d-font-weight:800;--e-global-typography-96da88d-line-height:1.05em;--e-global-typography-96da88d-letter-spacing:-0.03em;--e-global-typography-ba66b96-font-family:"Plus Jakarta Sans";--e-global-typography-ba66b96-font-size:48px;--e-global-typography-ba66b96-font-weight:800;--e-global-typography-ba66b96-line-height:1.05em;--e-global-typography-ba66b96-letter-spacing:-0.03em;--e-global-typography-ffcc5b1-font-family:"Plus Jakarta Sans";--e-global-typography-ffcc5b1-font-size:27px;--e-global-typography-ffcc5b1-font-weight:800;--e-global-typography-ffcc5b1-letter-spacing:-0.025em;--e-global-typography-d118fe1-font-family:"Plus Jakarta Sans";--e-global-typography-d118fe1-font-size:26px;--e-global-typography-d118fe1-font-weight:800;--e-global-typography-d118fe1-line-height:1.15em;--e-global-typography-d118fe1-letter-spacing:-0.02em;--e-global-typography-eae52df-font-family:"Plus Jakarta Sans";--e-global-typography-eae52df-font-size:17px;--e-global-typography-eae52df-font-weight:800;--e-global-typography-eae52df-letter-spacing:-0.01em;--e-global-typography-078bdeb-font-family:"Plus Jakarta Sans";--e-global-typography-078bdeb-font-size:12px;--e-global-typography-078bdeb-font-weight:800;--e-global-typography-078bdeb-text-transform:uppercase;--e-global-typography-078bdeb-letter-spacing:0.16em;--e-global-typography-1f37a36-font-family:"Plus Jakarta Sans";--e-global-typography-1f37a36-font-size:10px;--e-global-typography-1f37a36-font-weight:800;--e-global-typography-1f37a36-text-transform:uppercase;--e-global-typography-1f37a36-letter-spacing:0.14em;--e-global-typography-75c7795-font-family:"Plus Jakarta Sans";--e-global-typography-75c7795-font-size:17px;--e-global-typography-75c7795-font-weight:400;--e-global-typography-75c7795-line-height:1.6em;--e-global-typography-a318dcf-font-family:"Plus Jakarta Sans";--e-global-typography-a318dcf-font-size:15px;--e-global-typography-a318dcf-font-weight:400;--e-global-typography-a318dcf-line-height:1.6em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-aa99745 );color:var( --e-global-color-b73ae7c );border-radius:999px 999px 999px 999px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:var( --e-global-color-1ab9d65 );color:var( --e-global-color-b73ae7c );box-shadow:0px 8px 28px 0px rgba(229, 137.99999999999991, 51.000000000000014, 0.3);border-radius:999px 999px 999px 999px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.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;}}:root { --White:#ffffff; --Border_Color:#ffffff33; --Blue:rgb(4, 7, 98); --Black:#08091a; --Midnight:#08091a; --Royal_navy:#040762; --Light_canvas:#f4f5f9; --Card_dark:#14183A; --Card_dark_border:#2c3160; --Orange_dark:#e58a33; --Orange_hover:#f09c48; --Orange_ink:#1c1103; --Orange_light:#d87a14; --Green:#35d6b8; --Red:#f2635f; --Text_dark_1:#c4cbec; --Text_dark_2:#a6aedc; --Text_dark_3:#7c84ae; --Text_light_body:#475569; --Text_light_heading:#040762; --Card_light:#fdfeff; --Card_light_border:#E8EAF3; } /* Start custom CSS *//* ============================================================ THE LAUNCHWORKS v3 Site-wide stylesheet, version 2 WHERE THIS GOES Editor > hamburger menu (top left) > Site Settings > Custom CSS. Delete everything in the box and paste this whole file in its place. Save. WHAT CHANGED IN VERSION 2 Version 1 was written before the page was built. Four things only showed up once it was on staging. Sections 1, 5, 6, 7 and 8 below are new or rewritten. Sections 2, 3 and 4 are unchanged from version 1. VERSION 8, 26 AUGUST. Section 9 carries the whole mobile and tablet pass. Reduced motion moves from 9 to 10 so that it stays the last thing in the file, which it has to be. Nothing else has changed, so you can paste this straight over whatever is in the box. Versions 3 to 7 are superseded. Version 8 differs from 7 in three places, all asked for after seeing v7 on a phone: the hero now fills the screen, the headline is 50px instead of 38, and the footer columns stack instead of going two up, which removes a 180px hole in the middle of it. REVISION 2b, LATER ON 21 AUGUST. Two corrections. Section 1 was still wrong. It restored the easing on the three interaction cards but not the movement, because it did not deal with the inline transform. Section 8 is new. The sticky header rule from the note at the end of Step 14 of the build brief was sitting underneath the old stylesheet in the Custom CSS box, and clearing that box to paste version 2 deleted it. It is part of this file now. If you pasted an earlier copy of this file, paste this one over it. Dated 21 August 2026. The two HTML snippets carry their own styles and are not affected by this file. ============================================================ */ /* ------------------------------------------------------------ 1. CARD HOVER, ON CARDS THAT ALSO HAVE AN INTERACTION REWRITTEN IN VERSION 2, CORRECTED IN 2b. Three cards on the page carry both a card class and an Elementor Interaction: the right card in Section 5, the Service Provider Network strip in Section 7, and the right card in Section 9. In each case the build steps told you to put the scroll reveal and the card class on the same element. The Interactions engine (Motion One) drives the reveal by writing INLINE STYLES onto that element, and it leaves them there when the reveal has finished: style="transition: none; transform: translateY(0px);" Those two declarations break the hover in two separate ways, and both have to be undone. transition: none kills the 260ms ease, so the lift snaps. transform is the real problem. An inline style beats any normal CSS rule no matter how specific, so the hover rule's translate3d is ignored and the card does not move at all. The shadow and border still change, because those are not written inline, which is why it looks like a half working hover rather than a dead one. An !important author rule beats an inline normal declaration, and also beats a running Motion One animation. So the hover transform below is forced. Opacity is deliberately left alone so none of this can interfere with the reveal itself. Verified on staging: with the inline transform in place, the hover rule without !important computes to translateY(0), and with !important it computes to translateY(-3px). The proper fix is to stop putting a reveal on an element that carries a card class. Do that for anything built from now on. These rules cover what is already there. ------------------------------------------------------------ */ .lw-card-light, .lw-card-dark, .lw-card-navy{ transition-property:transform,box-shadow,border-color,background-color !important; transition-duration:260ms !important; transition-timing-function:cubic-bezier(.22,.9,.28,1) !important; } .lw-card-light:hover, .lw-card-light:focus-visible, .lw-card-dark:hover, .lw-card-dark:focus-visible, .lw-card-navy:hover, .lw-card-navy:focus-visible{ transform:translate3d(0px,-3px,0px) !important; } /* The buttons use a slightly springy curve, which is why they are separate. Add the class lw-btn to both buttons. The forced transform is here for the same reason as above, in case a button ever ends up with an Interaction on it. Note the button lift is 1px, not 3px. */ .lw-btn{ transition-timing-function:cubic-bezier(.34,1.36,.5,1) !important; } .lw-btn:hover, .lw-btn:focus-visible{ transform:translate3d(0px,-1px,0px) !important; } /* ------------------------------------------------------------ 2. THE DECORATIVE GLOWS Unchanged from version 1. ------------------------------------------------------------ */ .lw-glow{ border-radius:50%; pointer-events:none; } .lw-glow-hero-orange{ width:720px;height:720px; background:radial-gradient(circle,rgba(229,138,51,.22),transparent 68%); } .lw-glow-hero-blue{ width:560px;height:560px; background:radial-gradient(circle,rgba(136,150,255,.16),transparent 70%); } .lw-glow-pillars{ width:620px;height:620px; background:radial-gradient(circle,rgba(229,138,51,.10),transparent 70%); } .lw-glow-transparency{ width:600px;height:600px; background:radial-gradient(circle,rgba(136,150,255,.10),transparent 70%); } .lw-glow-book{ width:620px;height:620px; background:radial-gradient(circle,rgba(216,122,20,.07),transparent 70%); } /* ------------------------------------------------------------ 3. THE FAQ ACCORDION CHEVRON Unchanged from version 1. ------------------------------------------------------------ */ .lw-faq .e-n-accordion-item-title-icon span{ transition:transform 260ms cubic-bezier(.22,.9,.28,1); } .lw-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon span{ transform:rotate(90deg); } /* ------------------------------------------------------------ 4. REDUCED MOTION Unchanged from version 1. This block must stay at the bottom of the file so that it still overrides section 1. Moved to the end. See section 10. ------------------------------------------------------------ */ /* ------------------------------------------------------------ 5. THE FAQ CORNERS WHEN AN ITEM IS OPEN NEW IN VERSION 2. The Nested Accordion widget has one border radius setting and applies it whether the item is open or shut. When an item is open, the question keeps its rounded bottom corners while the answer panel below it is square across the top, so the two meet with a curl in the join. The widget has no open state control, so it has to be done here. The [open] .elementor-kit-6 is the same one section 3 already uses for the chevron, so we know it works on this accordion. ------------------------------------------------------------ */ .lw-faq .e-n-accordion-item[open] > .e-n-accordion-item-title{ border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-width:0; } /* ------------------------------------------------------------ 6. LINE ICONS WITH A FILL NEW IN VERSION 2. Seven of the uploaded SVGs have fill="currentColor" on the root and therefore spans the whole page. Verified on staging: without this rule the bar sits 868px above the window at a scroll position of 900px. With it, the bar sits at 0. ------------------------------------------------------------ */ [data-elementor-type="header"]{ position:sticky; top:0; z-index:100; } /* ------------------------------------------------------------ 9. MOBILE AND TABLET Version 8, 26 August 2026. Version 4 got most of this right. Four things it got wrong were found by auditing the live staging page in a browser rather than by reasoning about it, and every fix below was tested on the live page before it was written down. What each one was is recorded against the block that fixes it. BREAKPOINTS. Tablet 1024 and below, Mobile 767 and below. Elementor's own defaults. Nothing here touches a screen wider than 1024px: the desktop design is untouched. WHY SO MANY !important DECLARATIONS. Elementor writes each element's own styles as classes, and a class beats a class by load order, which we do not control. A Theme Style that sets type with !important beats both an ordinary rule and an inline style. Forcing on a doubled class or an ID removes the question. This is not belt and braces, it is the only thing that reliably works on this build. ------------------------------------------------------------ */ /* ============ 9a. TABLET AND BELOW, 1024 ============ */ @media (max-width:1024px){ /* --- The nine section frames. Class: lw-sec --- */ .lw-sec.lw-sec{ padding:80px 32px !important; min-height:0 !important} /* --- Every two column row goes vertical. Class: lw-row --- Elementor does not fold a flex row on its own, so without this the hero copy sits in a 55 per cent column about 200px wide on a phone and every heading in it shreds. */ .lw-row.lw-row{ flex-direction:column !important; gap:40px !important} .lw-row.lw-row > *{ width:100% !important; max-width:none !important} /* --- The two card rows. Class: lw-cards --- */ .lw-cards.lw-cards{ flex-direction:column !important; gap:20px !important} .lw-cards.lw-cards > *{width:100% !important} /* --- The columns that are switched off. Class: lw-off --- The hero panel column and the weekly report column. Hiding the panel alone leaves the hole it sat in, because the column still carries the height set on it during the build. This hides the hole. */ .lw-off.lw-off{display:none !important} /* --- Type --- */ .lw-h2,.lw-h2-html{font-size:38px !important} /* --- Touch targets, from 1024 down. A tablet is a touch device too, and a max-width rule flows downwards, so setting these here covers the phone as well. A button, a control, a thumbnail or an accordion header gets at least 44px of height. A text link in a dense list gets at least 36px with clear spacing, which is the honest compromise with a footer that would otherwise run to a screen of its own. NOTE THE SELECTOR ON THE BUTTON RULE. Version 4 wrote this as a bare .lw-btn, which also caught the Book a call button in the menu bar. With the four menu links still showing and wrapping, that button had no room, its label broke onto two lines, and a 999px radius on a nearly square button is a circle. It rendered as a large orange disc on a phone. The hero is the only button that needs to grow, so the rule is scoped to the hero's own button row and the menu bar button is left exactly as it is on the desktop. --- */ .lw-cta .lw-btn{padding:16px 24px !important;font-size:17px !important} .lw-flink.lw-flink{padding:10px 0 !important;display:inline-block} .lw-link.lw-link{padding:12px 0 !important;display:inline-block} /* --- 9a-i. THE MENU BAR --- Three separate things, and version 5 only did the first one, which is why the bar was still wrong afterwards. The bar is built as three columns inside a flex row: the logo, the four menu links, and the Book a call button. ONE. The links themselves. They were never hidden on this build: that was an assumption carried over from the mockup, where a class does it, and the Elementor header has no such rule. On a 390px phone all four wrapped to three lines each and the bar grew from 72px to 108px. */ [data-elementor-type="header"] .lw-link.lw-link{display:none !important} /* TWO. The column the links sit in. This is the part version 5 missed. Hiding the four links empties that middle column but does not remove it, and it went on occupying 150px of the 300px the bar had to work with. The button was left with a 75px column and squeezed, which is what still looked broken. :has(> .lw-link) picks out the one element whose DIRECT children are the menu links. Verified on the live page: it matches exactly one element, the links column. Without the child combinator it matches three, including the whole bar, which would hide the header completely. Do not remove the ">" from this .elementor-kit-6. */ [data-elementor-type="header"] *:has(> .lw-link){display:none !important} /* THREE. The bar's own side padding, 44px left and right, set during the build. On a phone that is 88px of a 388px screen spent on nothing, and it is what made the three columns fight over the remainder. Brought into line with the 20px the rest of the page uses. Then the two surviving columns are pushed to the ends, since with the middle one gone a centred row would leave the logo and the button huddled together. */ [data-elementor-type="header"] > *{ padding-left:20px !important; padding-right:20px !important} [data-elementor-type="header"] > * > *{ justify-content:space-between !important; width:100% !important} /* Insurance, not sizing. The label wrapping onto two lines is what turned this button into a disc, so it is told never to wrap. Its padding and font size are deliberately not touched here: it keeps its desktop 113 by 41 at every width. */ [data-elementor-type="header"] .lw-btn{white-space:nowrap !important} /* FOUR. The logo was being squashed. Measured on the live page: the file is 386 by 50, a ratio of 7.72, and it renders 190 by 25 on a desktop, which is right. On a phone it was rendering 153 by 25, a ratio of 6.12, so it was compressed to 79 per cent of its correct width and the wordmark looked wrong. The cause is the two constraints fighting. The height is pinned at 25px and the image also carries max-width:100%. Once the column got narrower than the logo needs, max-width won on the width while the pinned height held, and the picture stretched. Nothing was set to preserve the ratio. Two halves to the fix. The columns size to their content instead of splitting the bar in half, which gives the logo the 210px it actually wants. And the image is told to scale on both axes together, so if it ever does run out of room it gets smaller rather than distorted. Verified: 7.60 at every width from 320 to 1300, matching the desktop exactly. */ [data-elementor-type="header"] > * > * > *{ flex:0 1 auto !important; width:auto !important; min-width:0 !important} [data-elementor-type="header"] > * > * > *:last-child{flex:0 0 auto !important} [data-elementor-type="header"] img{ width:auto !important; height:auto !important; max-width:100% !important; max-height:25px !important} /* --- 9a-iv. THE HERO SITTING UNDER THE MENU BAR --- The hero carries margin-top:-72px, set during the build, so that its gradient runs up behind the bar. That is deliberate and correct: the bar is semi transparent and floats over the top of the hero. The hero's own 96px of top padding is what keeps the badge clear of it on a desktop. Block 9a takes every section's top padding down to 80, and 9b takes it to 56, which are both less than the 72px bar. So on a phone the badge slid underneath it. The hero is the only section with that negative margin, so it is the only one that needs its own number: the bar's 72px plus the same breathing room every other section gets. */ #top.lw-sec{padding-top:152px !important} /* --- 9a-ii. THE SCROLL REVEALS --- This is the flicker. Seventeen blocks carry an Elementor Interaction with trigger scrollIn and a fade in. What actually happens: the page paints with everything visible, then interactions-pro.min.js runs and sets the not-yet-revealed blocks to opacity 0, then fades each one in when you reach it. On a desktop that gap is short enough to miss. On a phone the script runs later and the blocks are taller, so you see the content, watch it vanish, and then watch it fade back in. Reading something and having it disappear is worse than having no animation at all. Measured on staging: thirty elements sitting at opacity 0 while their content had already been on screen. So there are no scroll reveals below 1024. An !important author declaration outranks both the inline style the engine writes and the animation itself, so the blocks simply never hide. The interactions can stay exactly as they are in the panel: nothing needs unpicking, and the desktop is untouched. Scoped to Elementor's own containers and widgets on purpose. The dimmed gallery thumbnails inside the Custom HTML snippets set their own opacity and must keep it. */ .elementor .e-con, .elementor .elementor-widget{ opacity:1 !important; transform:none !important} /* --- 9a-iii. THE FOOTER --- Found on the live page 26 August. The footer was built as a FLEX row, not a Grid, whatever Step 65 of the build brief says. grid-template-columns does nothing to a flex container, so version 4's footer rule was inert and the four columns stayed side by side at about 50px each. The email address is 189px wide and could not fit, which is what was pushing the whole page 95px sideways. Written as flex properties, so it works on the footer that exists rather than the one the brief describes. THE COLUMNS STACK RATHER THAN GOING TWO UP. Two up was tried first and it left a hole. The four blocks are very uneven: the brand blurb is 84px, Site has six links and runs to 274, Resources and Contact are 118 each. In a wrapped row the row is as tall as its tallest member, so Site and Resources shared a row 274 tall with Resources filling 118 of it, and Contact was stranded on a row of its own underneath. That is about 180px of nothing in the middle of the footer. Stacked, every block is its own height and nothing is stranded. It costs 133px of extra length, 746 against 613, and it is worth it. */ .lw-foot.lw-foot{ flex-wrap:wrap !important; gap:32px !important; width:100% !important} .lw-foot.lw-foot > *{ flex:0 0 100% !important; max-width:100% !important; min-width:0 !important} .lw-flink.lw-flink{overflow-wrap:anywhere !important} /* The footer sits outside the nine lw-sec boxes and kept its 44px side padding, which left it inset further than the rest of the page. */ [data-elementor-type="footer"] .lw-band{ padding-left:0 !important; padding-right:0 !important} [data-elementor-type="footer"] > *{ padding-left:20px !important; padding-right:20px !important} } /* ============ 9b. MOBILE AND BELOW, 767 ============ */ @media (max-width:767px){ .lw-sec.lw-sec{padding:56px 20px !important} /* 20px is the floor, not a preference. A card adds its own 22px of inner padding, so 20 gives 42px from the screen edge to the first letter. Below 20 the cards start to feel like they are falling off the screen. */ .lw-row.lw-row{gap:32px !important} /* --- THE HERO FILLS THE SCREEN --- Asked for on 26 August: on a phone the hero should own the first screen rather than showing the top of the next section under it. svh is the small viewport height, which is the height with the browser's own bars showing. Using it rather than vh means the hero is a full screen at the moment the page loads, when the address bar is at its tallest, instead of overflowing by the height of that bar and pushing the button under the fold. The plain vh line above it is the fallback for anything too old to know svh. The hero is pulled up 72px under the bar, so a hero exactly one screen tall ends exactly at the fold: the next section starts one pixel below it, out of sight. Top padding comes down from 128 to 96 at the same time. The section centres its content, so with a full screen to work in the 128 was pushing everything low. At 96 the gap under the bar is 91px and the space under the button is 77px, which reads as centred. It is still comfortably more than the 72px bar, so the badge cannot slide under it. */ #top.lw-sec{ min-height:100vh !important; min-height:100svh !important; padding-top:96px !important} .lw-h2,.lw-h2-html{font-size:30px !important;letter-spacing:-.02em !important} .lw-intro.lw-intro{font-size:16px !important;line-height:1.62 !important} /* --- The hero's two calls to action. Class: lw-cta --- Full width and 48px tall. The button measured 97 by 33 on a phone before any of this. */ .lw-cta.lw-cta{ flex-direction:column !important; align-items:stretch !important; gap:16px !important} .lw-cta.lw-cta > *{width:100% !important;text-align:center !important} .lw-cta .lw-btn{display:block !important;width:100% !important} } /* ============ 9c. SMALL PHONES, 380 AND BELOW ============ Elementor's smallest device view is Mobile at 767 and there is nothing under it. The extra breakpoint called Mobile Extra defaults to 880 and sits ABOVE Mobile, not below, so it is no help. Anything a 375px screen needs beyond a 430px one has to be written in this block. */ @media (max-width:380px){ .lw-h2,.lw-h2-html{font-size:27px !important} /* The menu bar at 320. The logo at its full 190px plus the button plus the gap is more than a 320px screen has, and the button column is what gets pushed off the edge. The logo column is already allowed to shrink at every width below 1024, and the button column is not, so the logo simply gets smaller and keeps its shape: 111 by 15 at 320px, still a ratio of 7.60. All that is left to do here is close the gap between them. Verified: no sideways scroll at 320. */ [data-elementor-type="header"] > * > *{gap:12px !important} /* min-width:auto on a flex or grid child is what makes a 320px screen scroll sideways: a column will not go narrower than its widest unbreakable content and pushes the page out. Confined to 380 and below so it cannot affect a screen anyone is holding. lw-band is the class from Step 88 of the fix guide. */ .lw-band > *,.lw-band > * > *{min-width:0} } /* ============ 9d. THE HOVER LIFT ON A TOUCH SCREEN ============ Every card lifts 3px on hover. A touch screen has no hover: it fakes one on tap and then LEAVES IT THERE until the next tap somewhere else, so tapping a card leaves it stuck in its raised state, reading as selected when nothing has been selected. hover:none is used rather than a width query on purpose. It asks the device what kind of pointer it has, which is the actual question. A touch laptop keeps its hover because it reports hover:hover. */ @media (hover:none){ .lw-card-light:hover,.lw-card-dark:hover,.lw-card-navy:hover, .lw-btn:hover{transform:none !important} } /* ============ 9e. THE HERO HEADLINE ============ A second copy of the sizes that snippet 1 already carries. Deliberate belt and braces. On 25 August the headline stopped responding to the device switcher, and the mechanism that does that is a theme or Theme Style rule setting h1 type with !important, which beats both an ordinary rule and an inline style. If snippet 1's own copy is ever lost, stripped or pasted over, this one still holds. THE SELECTOR HERE IS DELIBERATELY html #lw-h1 h1, one step more specific than the snippet's own copy. Snippet 1's styles sit in the body and therefore load after this file, so at equal specificity the snippet would win and a size changed here would appear to do nothing. With the extra step this file is the one that governs and the snippet's copy is what it was always meant to be: a fallback if this file is ever lost. The two are kept in step anyway. If one is changed, change both, so that whichever survives is right. SIZES. 68 on a desktop, 52 on a tablet, 50 on a phone and 42 below 380. The phone size went up from 38 on 26 August: at 38 it did not read as a hero. At 50 it is four lines, the longest rotating word still fits on one line at every width down to 320, and the whole hero still sits inside one screen. */ html #lw-h1 h1{ font-family:'Plus Jakarta Sans',sans-serif !important; font-size:68px !important; font-weight:800 !important; letter-spacing:-.03em !important; line-height:1.05 !important} @media (max-width:1024px){ html #lw-h1 h1{font-size:52px !important} } @media (max-width:767px){ html #lw-h1 h1{font-size:50px !important;letter-spacing:-.025em !important} } @media (max-width:380px){ html #lw-h1 h1{font-size:42px !important} } /* ------------------------------------------------------------ 10. THE BLOG Added 28 August 2026. Everything on the two blog templates. Every rule sits inside a class that only exists on the blog, so nothing here can touch the homepage. Reduced motion below is renumbered 11 so it stays last. ------------------------------------------------------------ */ .lw-blog-mast,.lw-art-mast{ background:linear-gradient(160deg,#05083A 0%,#040762 55%,#04084E 100%); border-top:4px solid var(--lw-orange,#E58A33); position:relative;overflow:hidden; } .lw-blog-mast:after,.lw-art-mast:after{ content:"";position:absolute;top:-160px;right:-120px;width:620px;height:620px; border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(229,138,51,.20),rgba(229,138,51,0) 62%); } .lw-blog-mast > *,.lw-art-mast > *{position:relative;z-index:1} .lw-cat{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#E58A33} .lw-rel .lw-cat,.lw-art .lw-cat{color:#D87A14} .lw-blog-chips a{ display:inline-block;padding:9px 16px;border-radius:999px; font-size:13px;font-weight:700;color:#C9CEE4; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); transition:background 140ms linear,color 140ms linear,border-color 140ms linear; } .lw-blog-chips a:hover{background:rgba(229,138,51,.14);border-color:rgba(229,138,51,.5);color:#fff} .lw-blog-chips a.is-current{background:var(--lw-orange,#E58A33);border-color:var(--lw-orange,#E58A33);color:#1C1103} .lw-blog-search input[type="search"]{ padding:12px 20px;border-radius:999px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); color:#fff;font:600 14px/1 'Plus Jakarta Sans',sans-serif;min-width:260px; } .lw-blog-search input[type="search"]::placeholder{color:#7C84AE} .lw-blog-search input[type="search"]:focus{outline:none;border-color:var(--lw-orange,#E58A33)} .lw-feat .lw-card{padding:0;overflow:hidden} .lw-feat .lw-card img{display:block;width:100%;height:100%;object-fit:cover} .lw-grid{counter-reset:lwpost 1} .lw-card{counter-increment:lwpost;position:relative} .lw-cover{position:relative;aspect-ratio:16/9;overflow:hidden; background:linear-gradient(150deg,#0B0F2E,#040762); border-bottom:1px solid rgba(255,255,255,.08)} .lw-cover:before{ content:counter(lwpost,decimal-leading-zero); position:absolute;right:20px;bottom:-22px; font:800 124px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.05em; color:rgba(255,255,255,.055);pointer-events:none; } .lw-cover .lw-emblem{position:absolute;left:22px;bottom:20px;height:24px;width:auto;opacity:.42} .lw-card h2,.lw-card h3{transition:color 140ms linear} .lw-card:hover h2,.lw-card:hover h3{color:#F09C48} .lw-card a h2,.lw-card a h3,.lw-card h2 a,.lw-card h3 a{color:#fff} .lw-rel .lw-card a h3,.lw-rel .lw-card h3 a{color:#040762} .lw-grid .elementor-pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:56px} .lw-grid .elementor-pagination .page-numbers{ min-width:42px;height:42px;padding:0 14px; display:inline-flex;align-items:center;justify-content:center; border-radius:999px;border:1px solid rgba(255,255,255,.12); font-size:14px;font-weight:700;color:#C9CEE4; transition:border-color 140ms linear,color 140ms linear; } .lw-grid .elementor-pagination a.page-numbers:hover{border-color:var(--lw-orange,#E58A33);color:#fff} .lw-grid .elementor-pagination .page-numbers.current{ background:var(--lw-orange,#E58A33);border-color:var(--lw-orange,#E58A33);color:#1C1103} .lw-grid .elementor-pagination .page-numbers.dots{border-color:transparent;opacity:.35} .lw-art-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:72px; max-width:1200px;margin:0 auto;padding:72px 44px 96px} .lw-toc{position:sticky;top:104px;align-self:start;background:none;border:0} .lw-toc .elementor-toc__list-item{list-style:none;margin:0} .lw-toc .elementor-toc__list-item-text{ display:block;font-size:14px;line-height:1.4;color:#475569; padding:9px 0 9px 14px;border-left:2px solid #DDE1EC; transition:color 140ms linear,border-color 140ms linear} .lw-toc .elementor-toc__list-item-text:hover{color:#040762;border-color:#D87A14} .lw-toc .elementor-toc__list-item.elementor-item-active .elementor-toc__list-item-text{ color:#040762;font-weight:700;border-color:#D87A14} .lw-art{max-width:680px;font-size:18px;line-height:1.72;color:#475569} .lw-art h2{margin:56px 0 16px;font-size:31px;font-weight:800;line-height:1.2; letter-spacing:-.025em;color:#040762;scroll-margin-top:110px} .lw-art h3{margin:36px 0 12px;font-size:21px;font-weight:800;letter-spacing:-.015em;color:#040762} .lw-art p{margin:0 0 22px} .lw-art ul,.lw-art ol{margin:0 0 22px;padding-left:22px} .lw-art li{margin:0 0 12px} .lw-art li::marker{color:#D87A14;font-weight:700} .lw-art strong{color:#040762;font-weight:700} .lw-art a{color:#D87A14;font-weight:600;border-bottom:1px solid rgba(216,122,20,.35)} .lw-art a:hover{color:#040762;border-color:#040762} .lw-art figure{margin:40px 0} .lw-art figure img{width:100%;height:auto;display:block;border-radius:8px} .lw-art figcaption{margin-top:12px;font-size:13.5px;color:#7A8296} .lw-art .is-in-short{ background:#FFF4E8;border:1px solid rgba(216,122,20,.22);border-radius:8px; padding:28px 30px;margin:0 0 40px} .lw-art .is-in-short .in-short-label{ margin:0;font-size:10px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:#D87A14} .lw-art .is-in-short ul{margin:16px 0 0} .lw-art .is-in-short li{margin:0 0 10px;font-size:16.5px;line-height:1.6;color:#3B3020} .lw-art blockquote{ position:relative;margin:40px 0;padding:8px 0 8px 58px;border:0; font-size:24px;line-height:1.42;font-weight:700;letter-spacing:-.015em;color:#040762} .lw-art blockquote:before{ content:'\201C';position:absolute;left:0;top:-6px; font-size:78px;line-height:1;color:#D87A14;opacity:.42} .lw-art blockquote p{margin:0} .lw-art .schema-faq{margin:56px 0 0;border-top:1px solid #DDE1EC} .lw-art .schema-faq-section{border-bottom:1px solid #DDE1EC;padding:22px 0} .lw-art .schema-faq-question{display:block;font-size:18px;font-weight:700;color:#040762;margin:0 0 10px} .lw-art .schema-faq-answer{margin:0;font-size:16.5px} .lw-author{display:flex;gap:20px;align-items:flex-start;margin:56px 0 0;padding:28px; background:#FDFEFF;border:1px solid #E8EAF3;border-radius:8px} .lw-author img{width:64px;height:64px;border-radius:999px;object-fit:cover;flex:0 0 auto} .lw-capture{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center; padding:40px 44px;border-radius:8px;background:#040762;border-top:4px solid var(--lw-orange,#E58A33)} .lw-capture input[type="email"]{ padding:15px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);color:#fff; font:600 15px/1 'Plus Jakarta Sans',sans-serif;min-width:270px} .lw-capture input[type="email"]::placeholder{color:#7C84AE} .lw-capture input[type="email"]:focus{outline:none;border-color:var(--lw-orange,#E58A33)} @media (max-width:1024px){ .lw-art-wrap{grid-template-columns:1fr;gap:0;padding:56px 44px 80px} .lw-toc{position:static;width:100%;max-width:680px;margin:0 auto 40px; padding:20px 24px 22px;background:#EAECF4;border-radius:8px} .lw-toc .elementor-toc__list-item-text{border-left:0;padding:8px 0;font-size:15px} .lw-toc .elementor-toc__list-item + .elementor-toc__list-item{border-top:1px solid #DDE1EC} .lw-art{margin:0 auto} .lw-capture{grid-template-columns:1fr;padding:34px} } @media (max-width:767px){ .lw-art-wrap{padding:40px 22px 64px} .lw-art{font-size:17px} .lw-art h2{font-size:25px;margin:44px 0 14px} .lw-art blockquote{font-size:20px;padding-left:44px} .lw-art blockquote:before{font-size:62px} .lw-author{flex-direction:column;gap:16px} .lw-blog-search input[type="search"]{width:100%;min-width:0} .lw-capture input[type="email"]{width:100%;min-width:0} .lw-grid .elementor-pagination{flex-wrap:wrap;row-gap:8px} } /* ---- 10m. ID hooks for the blog's structural containers ---- A container's class has to exist in Elementor before it will render. A CSS ID does not, so the four structural wrappers on the blog templates carry an ID instead. The styling is the same either way, and the class .elementor-kit-6s above still work if a class is used. */ #lw-art-mast{ background:linear-gradient(160deg,#05083A 0%,#040762 55%,#04084E 100%); border-top:4px solid #E58A33; position:relative;overflow:hidden; padding:88px 44px 72px; } #lw-art-mast:after{ content:"";position:absolute;top:-160px;right:-120px;width:620px;height:620px; border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(229,138,51,.20),rgba(229,138,51,0) 62%); } #lw-mast-wrap{position:relative;z-index:1;max-width:1112px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:0} #lw-art-body{background:#F4F5F9} #lw-art-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:72px; max-width:1200px;margin:0 auto;padding:72px 44px 96px} #lw-main{min-width:0} #lw-art-mast .lw-art-h1{margin:20px 0 0;font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1.06;max-width:22ch;color:#fff} #lw-art-mast .lw-art-lede{margin:22px 0 0;font-size:19px;line-height:1.6;color:#C4CBEC;max-width:58ch} #lw-art-mast .lw-byline{margin:34px 0 0} #lw-art-mast .lw-byline .elementor-icon-list-item, #lw-art-mast .lw-byline .elementor-icon-list-text{color:#7C84AE;font-size:14px} #lw-art-mast .lw-byline .elementor-post-info__item--type-author{color:#fff;font-weight:700} @media (max-width:1024px){ #lw-art-wrap{grid-template-columns:1fr;gap:0;padding:56px 44px 80px} #lw-art-mast .lw-art-h1{font-size:40px} } @media (max-width:767px){ #lw-art-mast{padding:56px 22px 48px} #lw-art-wrap{padding:40px 22px 64px} #lw-art-mast .lw-art-h1{font-size:31px} #lw-art-mast .lw-art-lede{font-size:17px} } /* ---- 10n. Beating Elementor's own Div Block rules, 17 September ---- Elementor ships '.elementor .e-div-block-base{display:block}', which outranks a plain class .elementor-kit-6, so a layout rule hung on a class is silently ignored on every Div Block. These rules are written to win whether the name was typed into the CSS ID field or the Classes box, so the blog works either way. Also: an atomic Div Block's tag list is div, header, section, article, aside, footer, a, button. There is no 'main'. The article column uses 'article' instead and the contents list is scoped to it. */ #lw-art-wrap,.lw-art-wrap{ display:grid !important; grid-template-columns:230px minmax(0,1fr); gap:72px;max-width:1200px;margin:0 auto;padding:72px 44px 96px} #lw-art-body,.lw-art-body{background:#F4F5F9} #lw-main,.lw-main{min-width:0} #lw-mast-wrap,.lw-mast-wrap{position:relative;z-index:1} /* the masthead must never be 800px tall, whatever else is on it */ #lw-art-mast.lw-sec,#lw-blog-mast.lw-sec{min-height:0 !important} /* The breadcrumb. Yoast's output inside a Shortcode widget. Its last item carries the class breadcrumb_last. */ .lw-crumb{font-size:13px;line-height:1.5;color:#7C84AE} .lw-crumb a{color:#A6AEDC;text-decoration:none;border:0} .lw-crumb a:hover{color:#fff} .lw-crumb .breadcrumb_last{color:#7C84AE} #lw-art-mast .lw-crumb{margin:0 0 26px} @media (max-width:1024px){ #lw-art-wrap,.lw-art-wrap{grid-template-columns:1fr !important;gap:0;padding:56px 44px 80px} } @media (max-width:767px){ #lw-art-wrap,.lw-art-wrap{padding:40px 22px 64px} } /* ---- 10o. Beating Elementor's own widget stylesheets ---- Same problem as 10n, one level down. Elementor loads four stylesheets AFTER the kit stylesheet this file lives in: base-desktop.css, the widget CSS (widget-table-of-contents.min.css), the template's own post-9031.css, and the per-element local-9031-frontend-desktop.css. Everything in them uses two or more classes, so on any property they also set, they win on specificity or on source order and our rule is discarded silently. These are the properties they were taking. Each one is checked against the live post on 17 September. Do not remove the importants: the page looks broken in three separate ways without them. */ /* The two-column box. Its padding was being zeroed by .elementor .e-3d47857-2e7076b, the per-element rule Elementor writes for every atomic Div Block. Without the padding the article sits 88px wider than the masthead and flush against it with no gap. */ #lw-art-wrap,.lw-art-wrap{padding:72px 44px 96px !important} /* The article body. Two properties were lost: max-width to .elementor.elementor .e-con > .elementor-widget{max-width:100%}, and colour to .elementor-widget-theme-post-content, which inherits the site's global Text colour. That global is Light_canvas, because the homepage is dark. On the blog it puts pale grey text on a pale grey background and the article is close to unreadable. */ .lw-art{max-width:680px !important;color:#475569 !important} /* The contents list. Elementor's Table of Contents widget draws itself as a bordered box with 20px of padding and an 18px navy title. The design is a plain sticky column with a 10px label. */ .lw-toc,.lw-toc .elementor-widget-container{ background:none !important;border:0 !important; border-radius:0 !important;box-shadow:none !important} .lw-toc .elementor-toc__header{ display:block !important;padding:0 !important; border:0 !important;background:none !important} .lw-toc .elementor-toc__header-title{ margin:0 0 14px !important;font-size:10px !important;font-weight:800 !important; letter-spacing:.14em !important;text-transform:uppercase !important; color:#8791A8 !important} .lw-toc .elementor-toc__body{ padding:0 !important;background:none !important; max-height:none !important;overflow:visible !important} .lw-toc .elementor-toc__list-wrapper{margin:0 !important;padding:0 !important} .lw-toc .elementor-toc__list-item{margin:0 !important;list-style:none !important} .lw-toc .elementor-toc__list-item .elementor-toc__list-wrapper{padding-left:14px !important} /* Elementor numbers every entry. It draws the number as a ::before on the text wrapper, inside a flex row, so the number's own width pushes the link across: "1." and "2." are not the same width in this typeface, and the entries end up a few pixels out of line with each other. The design has no numbers, so the marker goes. Setting Marker to None in the widget panel does the same thing, but it belongs here with the rest of the list styling rather than hidden in a template. */ .lw-toc .elementor-toc__list-item-text-wrapper{display:block !important} .lw-toc .elementor-toc__list-item-text-wrapper:before{ content:none !important;display:none !important;margin:0 !important} .lw-toc .elementor-toc__list-item-text{ display:block !important;font-size:14px !important;line-height:1.4 !important; color:#475569 !important;padding:9px 0 9px 14px !important; border-left:2px solid #DDE1EC !important;text-decoration:none !important} .lw-toc .elementor-toc__list-item-text:hover{ color:#040762 !important;border-left-color:#D87A14 !important} .lw-toc .elementor-toc__list-item-text.elementor-item-active{ color:#040762 !important;font-weight:700 !important;border-left-color:#D87A14 !important} /* ---- 10p. The site header's hairline ---- The approved design gives the sticky nav a 1px hairline along the bottom: border-bottom:1px solid rgba(255,255,255,.07). It is in both design files, the homepage and the article, and it has never been on the built header. Without it the translucent navy bar has no edge, so on a navy page the header and the page below it read as one block and the logo appears to float. Added 18 September. This is site wide, not blog only, because the header is one template and the design asks for it everywhere. */ .elementor-location-header header{ border-bottom:1px solid rgba(255,255,255,.07)} /* ---- 10q. The page background behind the header ---- The header is translucent: rgba(4,7,58,.78) with a 14px blur. It is drawn over whatever sits behind it, and at the top of a page that is the body background. Every design file sets the body to Midnight (#08091A). The built site left it white, so the header has been compositing navy over white and coming out as a pale slate band above a nearly black masthead. The hairline in section 10p is correct but it was never the problem. The fill was. Nothing else on the site shows the body background: every section paints its own. Checked on the homepage and the article, 18 September. */ body{background-color:#08091A} /* ---- 10r. The CTA band ---- Spacing taken from the design file: the headline sits 18px under the eyebrow (that is already in lw-h2), the body line 24px under the headline, and the button 36px under that. The measures stop the headline and the body line running the full width of the band. */ .lw-cta-band{text-align:center} .lw-cta-band .lw-h2{max-width:18ch;margin-left:auto !important;margin-right:auto !important} .lw-cta-band .lw-intro{margin:24px auto 0 !important;max-width:52ch} .lw-cta-band .lw-btn{margin-top:36px !important} /* ---- 10s. Inside the loop card ---- The card is one template used by two grids. Its insides were never styled here because the first version of the build guide put the image, the category, the headline and the excerpt straight into the card with no padded box around them. */ .lw-card .lw-inner{padding:26px 26px 24px} .lw-card .lw-card-heading{font-size:21px !important;line-height:1.25 !important;margin:0 !important} .lw-card-lede{margin:12px 0 20px !important;font-size:15px !important; line-height:1.55 !important;color:#A6AEDC !important} .lw-card .lw-byline .elementor-icon-list-item, .lw-card .lw-byline .elementor-icon-list-text{color:#7C84AE;font-size:12.5px} /* The related grid is light cards on the light canvas; the index grid is dark cards on navy. One Loop Item template serves both, so the card is built dark once and turned light here. */ .lw-rel .lw-card{background:#FDFEFF !important;border-color:#E8EAF3 !important} .lw-rel .lw-card .lw-card-heading{color:#040762 !important} .lw-rel .lw-card-lede{color:#475569 !important} .lw-rel .lw-card:hover .lw-card-heading{color:#D87A14 !important} .lw-rel .lw-card .lw-byline .elementor-icon-list-item, .lw-rel .lw-card .lw-byline .elementor-icon-list-text{color:#7A8296} /* ---- 10t. The masthead slides up under the header ---- This is how the homepage does it and it is what the translucent header is for. The hero on the homepage carries margin-top:-72px and padding-top:96px, so it starts 72px higher than it otherwise would, the sticky header sits on top of it, and the hero's own colour shows through the glass. The blog mastheads were built without that offset, so they started below the header and the header had nothing behind it but the page background. Same 72px, which is the header's height. The top padding goes up by the same 72 so the breadcrumb does not end up underneath the nav: 88 becomes 160, and on a phone 56 becomes 128. The homepage sets its offset in the Elementor panel. This is in the stylesheet instead, because everything structural on the blog is, and the blog templates are deliberately left empty of styling. */ #lw-art-mast,#lw-blog-mast{margin-top:-72px;padding-top:160px} @media (max-width:767px){ #lw-art-mast,#lw-blog-mast{padding-top:128px} } /* ---- 10u. The loop card: spacing, and a photo cover ---- Two things here. First, the spacing inside the card, which Elementor was zeroing: it writes a per-element padding rule for every Div Block, so the padding on lw-inner has to be marked important like everything else in section 10n. Design values: 26/26/24 around the text, 10px under the category, 12px over and 20px under the excerpt. Second, the cover. A post with a featured image shows it; a post without one shows the numbered navy block as before. The image comes from the [lw_cover_image] shortcode, which prints nothing at all when there is no thumbnail, so :has() can tell the two apart and switch the number off only when there is a photo to replace it. */ .lw-card{overflow:hidden} .lw-card .lw-inner{padding:26px 26px 24px !important} .lw-card .lw-inner .lw-cat{margin:0 0 10px !important} .lw-card .lw-card-heading{font-size:21px !important;line-height:1.25 !important;margin:0 !important} .lw-card-lede,.lw-card .lw-art-lede{ margin:12px 0 20px !important;font-size:15px !important; line-height:1.55 !important;color:#A6AEDC !important} .lw-card .lw-byline{margin:0 !important} .lw-rel .lw-card-lede,.lw-rel .lw-card .lw-art-lede{color:#475569 !important} /* The photo cover. */ .lw-cover .lw-thumb{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .lw-cover:has(.lw-thumb):before{content:none} .lw-cover:has(.lw-thumb):after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(4,7,58,0) 45%,rgba(4,7,58,.55) 100%)} .lw-cover .lw-emblem{z-index:2} /* Fix, 29 Sep 2026. The thumbnail sits inside a Shortcode widget, which Elementor makes position:relative. That widget is 0px tall, so the photo sized to nothing. Stretch the widget over the cover. */ .lw-cover > .elementor-widget:has(.lw-thumb){position:absolute;inset:0;margin:0} /* ---- 10v. The card's border and shadow ---- lw-card-dark is a homepage class. Its shadow is built for a dark card on a navy page: rgba(0,0,0,.36) at 8px 22px, plus a second one at .34. On the white related card sitting on the light canvas that reads as a hard halo with a white outline around it, which is what it looked like. These are the design file's own values for a light card: border #E8EAF3, radius 8, and a shadow at 6 and 7 per cent rather than 34 and 36. The radius is set on both blog grids because the design uses 8 there while the homepage uses 12, and the homepage is not touched. */ .lw-grid .lw-card,.lw-rel .lw-card{border-radius:8px !important} .lw-rel .lw-card{ border:1px solid #E8EAF3 !important; box-shadow:0 1px 2px rgba(4,7,98,.06),0 6px 16px rgba(4,7,98,.07) !important} .lw-rel .lw-card:hover{ border-color:rgba(216,122,20,.4) !important; box-shadow:0 2px 4px rgba(4,7,98,.08),0 24px 56px rgba(4,7,98,.16) !important} /* ---- 10w. The related posts block: spacing, and cards of one height ---- SPACING. The eyebrow, the heading and the grid were stacked with no space at all between them. The design puts 18px under the eyebrow and 36px under the heading. The band has no class of its own, so it is selected by what it contains. */ .lw-band:has(> .lw-rel) > .lw-cat{margin:0 !important} .lw-band:has(> .lw-rel) > .lw-h3, .lw-band:has(> .lw-rel) > h2{margin:18px 0 36px !important} /* ONE HEIGHT. Elementor stretches the loop item to fill its grid cell, but the card inside it keeps its own content height, so a card with a one line headline sat 26px short of its neighbours. Two things fix it together and both are needed: 1. The card fills its cell and the byline is pushed to the bottom, so whatever happens above it, every byline sits on the same line. 2. The headline and the excerpt are held to a fixed number of lines, two and three, so a long title or a long excerpt cannot make one card taller than the rest. A headline shorter than two lines still reserves both, and anything longer is cut with an ellipsis. If a headline is being cut and should not be, shorten the title rather than raising the clamp. Three lines here pushes the byline down and the row stops reading as a row. */ .lw-rel .elementor-loop-container > .e-loop-item{display:flex} .lw-card{display:flex;flex-direction:column;height:100%} .lw-card .lw-cover{flex:0 0 auto} .lw-card .lw-inner{flex:1 1 auto;display:flex !important;flex-direction:column} .lw-card .lw-byline{margin-top:auto !important} .lw-card .lw-card-heading{ display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden;min-height:2.5em} .lw-card-lede,.lw-card .lw-art-lede{ display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:3; overflow:hidden;min-height:4.65em} /* ---- 10x. The blog index masthead and the category pills ---- Written before Step 31 is built, not after, because section 10a styles these by class and Steps 31 and 32 ask for a CSS ID. That mismatch is what left the article masthead unstyled for a day. Both spellings work from here on. Sizes are the index design file's own: 96px above and 64px below the column, a 60px headline against the article's 52, and a 40px gap above the pill row. The top padding carries the header offset from section 10t, which is why it reads 168 rather than 96: the masthead starts 72px higher than it otherwise would, so it needs 72 more padding to put the eyebrow back where the design has it. Same arithmetic on the two smaller widths. */ #lw-blog-mast{ background:linear-gradient(160deg,#05083A 0%,#040762 55%,#04084E 100%); border-top:4px solid #E58A33; position:relative;overflow:hidden; padding:168px 44px 64px; } #lw-blog-mast:after{ content:"";position:absolute;top:-160px;right:-120px;width:620px;height:620px; border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(229,138,51,.20),rgba(229,138,51,0) 62%); } #lw-blog-mast > *{position:relative;z-index:1} #lw-blog-mast .lw-cat{color:#E58A33} #lw-blog-mast .lw-art-h1{ margin:18px 0 0;font-size:60px;font-weight:800;letter-spacing:-.03em; line-height:1.03;max-width:20ch;color:#fff} #lw-blog-mast .lw-art-lede{ margin:22px 0 0;font-size:19px;line-height:1.6;color:#C4CBEC;max-width:58ch} /* The pill row. Step 32 gives this box a CSS ID, so both spellings again. The pills themselves are styled in section 10b. */ #lw-blog-chips,.lw-blog-chips{ display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:40px 0 0} #lw-blog-chips a{ display:inline-block;padding:9px 16px;border-radius:999px; font-size:13px;font-weight:700;color:#C9CEE4;text-decoration:none; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); transition:background 140ms linear,color 140ms linear,border-color 140ms linear} #lw-blog-chips a:hover{ background:rgba(229,138,51,.14);border-color:rgba(229,138,51,.5);color:#fff} #lw-blog-chips a.is-current{ background:#E58A33;border-color:#E58A33;color:#1C1103} @media (max-width:1024px){ #lw-blog-mast{padding:152px 44px 56px} #lw-blog-mast .lw-art-h1{font-size:44px} } @media (max-width:767px){ #lw-blog-mast{padding:136px 22px 48px} #lw-blog-mast .lw-art-h1{font-size:34px} #lw-blog-mast .lw-art-lede{font-size:17px} } /* ---- 10y. The index: search box, featured card, CTA on light ---- THE SEARCH BOX. Elementor 4 renders the search widget as .e-search-input, not the old .elementor-search-form, and it sizes it from its own control defaults, which is why it came out 56px tall. These are the design's own values. The margin-left:auto pushes it to the right-hand end of the pill row, which is where the design has it; it needs no wrapper of its own. */ #lw-blog-chips .lw-blog-search{margin-left:auto} .lw-blog-search .e-search-input, .lw-blog-search input[type="search"]{ padding:10px 18px !important;border-radius:999px !important; background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.12) !important; color:#fff !important; font:600 14px/1 'Plus Jakarta Sans',sans-serif !important; min-width:260px;height:auto !important;box-shadow:none !important} .lw-blog-search .e-search-input::placeholder, .lw-blog-search input[type="search"]::placeholder{color:#7C84AE !important} .lw-blog-search .e-search-input:focus, .lw-blog-search input[type="search"]:focus{ outline:none !important;border-color:#E58A33 !important} /* THE FEATURED CARD. It is the same Loop Item as the six below it, so it arrives as a tall card with a 16 by 9 cover. The design lays the featured one out sideways: picture on the left, words on the right, 48px of padding and a 36px headline. Turned here rather than by building a second Loop Item template, for the same reason the related grid is: two templates drift, and every later change would have to be made twice. */ .lw-band:has(> .lw-feat) > .lw-cat{margin:0 0 22px !important;color:#7C84AE !important} /* The Latest label is grey in the design, not orange. It sits above the whole featured block rather than on a card, and the design uses its quiet label style there, the same one as On this page on an article. The orange eyebrow is for labels that sit on something. */ .lw-feat .lw-card{ display:grid !important;grid-template-columns:1.05fr .95fr; height:auto !important;overflow:hidden} .lw-feat .lw-cover{aspect-ratio:auto !important;min-height:420px;height:100%} .lw-feat .lw-cover:before{right:28px;bottom:-30px;font-size:160px} .lw-feat .lw-inner{padding:48px !important;justify-content:center} .lw-feat .lw-card-heading{ font-size:36px !important;line-height:1.12 !important; -webkit-line-clamp:4;min-height:0} .lw-feat .lw-card-lede,.lw-feat .lw-art-lede{ font-size:17px !important;-webkit-line-clamp:4;min-height:0; margin:16px 0 0 !important} .lw-feat .lw-byline{margin-top:32px !important} /* Section 10d told every image in the featured card to fill it. That was written when the cover held a photograph and nothing else. It now also holds the emblem, which was being blown up to 1110px wide. Only the thumbnail fills. */ .lw-feat .lw-card img{width:auto;height:auto;object-fit:initial} .lw-feat .lw-cover .lw-thumb{ width:100% !important;height:100% !important;object-fit:cover !important} .lw-feat .lw-cover .lw-emblem{height:24px !important;width:auto !important} @media (max-width:1024px){ .lw-feat .lw-card{grid-template-columns:1fr} .lw-feat .lw-cover{min-height:300px} .lw-feat .lw-inner{padding:32px !important} .lw-feat .lw-card-heading{font-size:28px !important} } /* THE CTA ON THE INDEX. Same band as the article's, but on Light_canvas, so the eyebrow takes the light-background orange and the body line takes the dark body grey. Scoped to the archive template, which means the article's CTA is untouched and there is no second class to remember. */ .elementor-location-archive .lw-cta-band .lw-cat{color:#D87A14 !important} .elementor-location-archive .lw-cta-band .lw-intro{color:#475569 !important} /* ---- 10z. The search box's height ---- Elementor sets a min-height on .e-search-input built from its own icon and padding variables, which is where the 56px was coming from. Our padding and line-height were already applying; they were just not the thing deciding the height. */ .lw-blog-search .e-search-input{min-height:0 !important} @media (max-width:767px){ #lw-blog-chips .lw-blog-search{width:100%;margin-left:0} .lw-blog-search .e-search-input, .lw-blog-search input[type="search"]{min-width:0 !important;width:100%} } /* ---- 10aa. The search results line ---- Printed by [lw_search_summary]. Same size and colour as the standfirst under the blog headline, so the two mastheads read as one family. */ .lw-search-summary{ margin:22px 0 0;font-size:19px;line-height:1.6;color:#C4CBEC;max-width:58ch} .lw-search-summary strong{color:#fff;font-weight:700} .lw-search-summary a{color:#E58A33;font-weight:600;border-bottom:1px solid rgba(229,138,51,.35)} .lw-search-summary a:hover{color:#fff;border-color:#fff} /* ------------------------------------------------------------ 10ab. RESPONSIVE CORRECTIONS, 22 SEPTEMBER 2026 Measured on staging at 1440, 1024, 768, 430, 390, 375 and 320, on the index, a post, search results and a category archive. The root cause of most of this: Elementor has generated no tablet and no mobile stylesheet for either blog template. local-9031-frontend-tablet.css, -mobile.css and the 9106 equivalents all 404. No element in either template carries a breakpoint value, so every band below the mastheads kept its desktop padding down to 320px. These rules supply what the templates never set. The site scale, taken off the homepage: 44px sides at desktop, 32px at tablet, 20px at mobile. ------------------------------------------------------------ */ /* 1. THE CALL TO ACTION BANDS. Both blog templates put lw-off on their CTA band. lw-off is the homepage class for hiding a dead column and section 9 sets it to display:none below 1024, so the blog lost its only in-page call to action on every tablet and phone. Scoped to the two blog templates and given an extra class of specificity so the homepage rule is untouched. */ @media (max-width:1024px){ .elementor-location-archive .lw-off.lw-off, .elementor-location-single .lw-off.lw-off{ display:flex !important; } } /* 2. THE ARTICLE COLUMN. Section 10o pins the wrapper padding with !important to beat Elementor's per-element rule, and it had no breakpoint variants, so it also beat the tablet and mobile paddings in 10n. The article kept 44px sides down to 320px: a 232px column, about 27 characters a line, against the design's 680px and 76. */ @media (max-width:1024px){ #lw-art-wrap,.lw-art-wrap{padding:56px 32px 80px !important} } @media (max-width:767px){ #lw-art-wrap,.lw-art-wrap{padding:40px 20px 64px !important} } /* 3. THE BANDS. Every band in both blog templates, mastheads included, brought to the site scale. The article body band is excluded because it holds no padding of its own: lw-art-wrap inside it does the work, in rule 2, and padding both would double count. */ @media (max-width:1024px){ .elementor-location-archive > .e-con, .elementor-location-single > .e-con:not(.lw-art-body){ padding-inline-start:32px !important; padding-inline-end:32px !important; } } @media (max-width:767px){ .elementor-location-archive > .e-con, .elementor-location-single > .e-con:not(.lw-art-body){ padding-inline-start:20px !important; padding-inline-end:20px !important; } } /* 4. THE FEATURED POST. The featured Loop Grid is one column at desktop and was never given a tablet value, so Elementor's own default of two columns applied at 1024 and 768. The featured card came out the same width as a regular card with an empty cell beside it, which is why it stopped reading as featured on a tablet. */ @media (max-width:1024px){ .lw-feat .elementor-loop-container{ grid-template-columns:1fr !important; } } /* 5. THE ARTICLE MASTHEAD HAD NO TABLET STEP. 160px top and 72px bottom at 768, the same as 1440, while the index masthead stepped to 152 and 56. Matched to the index. */ @media (max-width:1024px){ #lw-art-mast{ padding-top:152px !important; padding-bottom:56px !important; } } @media (max-width:767px){ #lw-art-mast{ padding-top:128px !important; padding-bottom:48px !important; } } /* 6. BREADCRUMB TAP TARGETS. Home and Blog were 15px high. The negative block margin gives the links a 35px hit area without moving anything on the page. */ @media (max-width:1024px){ .lw-crumb a{ display:inline-block; padding:10px 3px; margin-block:-10px; } } /* 7. THE AUTHOR BOX OVERFLOWED AT 320. 5px of sideways scroll on an article, from the author box text column refusing to shrink below its content. Clean at 375 up. */ @media (max-width:767px){ .elementor-author-box{flex-wrap:wrap !important} .elementor-author-box__text, .elementor-author-box__name, .elementor-author-box__bio{ min-width:0 !important; max-width:100% !important; } } /* 8. THE FEATURED COVER BELOW 380. The cover is pinned to a 300px minimum, which on a 320px screen makes it 230 wide by 300 tall, a portrait block. Given a ratio below 380 only, so 390 and up are exactly as designed. */ @media (max-width:380px){ .lw-feat .lw-cover{ min-height:0 !important; aspect-ratio:4/3; } } /* ------------------------------------------------------------ 10ac. CONTENTS LIST AND CARD RHYTHM, 22 SEPTEMBER 2026 ------------------------------------------------------------ */ /* 1. THE CONTENTS LIST WAS INSET FROM THE ARTICLE. Same root cause as 10ab rule 2. Section 10n gives the list a filled box at 1024 and down, with the left rail removed and the items flush inside it. Section 10o then re-imposes the desktop rail and its 14px inset with !important and no breakpoint variants, and Elementor's own widget stylesheet takes the box background back on source order. What shipped was the inset of a box with no box: the heading sat 24px in and the links 38px in, while every paragraph and heading below them sat flush. Brought flush to the article, with the item hairlines kept and a rule top and bottom so the block still reads as one thing. The In short box keeps its inset, because that one is a real filled card and its padding is doing a job. */ @media (max-width:1024px){ .lw-toc{ padding-left:0 !important; padding-right:0 !important; /* the article column is capped at 680 and centred, so the list has to be capped and centred the same way or it sits 12px to the left of the body text on a tablet. */ max-width:680px !important; margin:0 auto 40px !important; } .lw-toc .elementor-toc__list-item-text{ padding-left:0 !important; border-left:0 !important; font-size:15px !important; } .lw-toc .elementor-toc__list-item .elementor-toc__list-wrapper{ padding-left:16px !important; } .lw-toc .elementor-toc__body{ border-top:1px solid #DDE1EC !important; border-bottom:1px solid #DDE1EC !important; } } /* 2. THE GAP AFTER THE FEATURED POST. On a phone all seven cards are one column, so the index reads as a single list. The gap between the featured card and the next was 72px, the featured band's 16px bottom plus the grid band's 56px top, against 30px between every pair after it. Matched to the grid's own row gap, mobile only: at 1024 and up the featured card is full width against a two or three column grid, so the bigger break is doing real work there. */ @media (max-width:767px){ .elementor-location-archive > .e-con:has(.lw-feat){ padding-bottom:0 !important; } .elementor-location-archive > .e-con:has(.lw-feat) + .e-con{ padding-top:30px !important; } } /* ------------------------------------------------------------ 10ad. THE MOBILE AND TABLET MENU, 22 SEPTEMBER 2026 Until now the header hid its whole link column below 1024 and offered no toggle, so there was no route from the homepage to the blog, and no route from an article back to any section of the homepage except through the footer. Correct while the site was one page; wrong once the blog existed. Built with Elementor Pro's own Nav Menu widget, dropping into dropdown mode at 1024 and below, rather than a hand rolled toggle. The widget is widget bd9c44f in header template 1129, sitting beside Book a call, fed by the WordPress menu "Main menu", which carries the same five links as the desktop bar with root relative addresses so they work from any page. Desktop is untouched: the widget is hidden above 1024 and the five existing links carry on as they are. ------------------------------------------------------------ */ @media (min-width:1025px){ .lw-mob-menu{display:none !important} } @media (max-width:1024px){ /* the toggle sits next to Book a call, not under it */ [data-elementor-type="header"] .e-con:has(> .lw-mob-menu){ display:flex !important; align-items:center; gap:12px; } .lw-mob-menu{flex:0 0 auto;width:auto !important} .lw-mob-menu .elementor-widget-container{display:flex;justify-content:flex-end} /* the toggle. 44px hit area, 24px icon, the site's body colour */ .lw-mob-menu .elementor-menu-toggle{ width:44px !important; height:44px !important; padding:0 !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:#C4CBEC !important; } .lw-mob-menu .elementor-menu-toggle:hover{color:#fff !important} .lw-mob-menu .elementor-menu-toggle svg, .lw-mob-menu .elementor-menu-toggle i{ width:24px;height:24px;font-size:24px;fill:currentColor; } /* the panel. Fixed under the 72px bar, full width, dark. */ .lw-mob-menu .elementor-nav-menu--dropdown{ position:fixed !important; top:72px !important; left:0 !important; right:0 !important; width:100vw !important; max-width:100vw !important; margin:0 !important; padding:4px 20px 28px !important; background:#08091A !important; border-top:1px solid rgba(255,255,255,.14) !important; box-shadow:0 18px 40px rgba(0,0,0,.45) !important; z-index:120 !important; } /* the links */ .lw-mob-menu .elementor-nav-menu--dropdown a.elementor-item{ display:block !important; padding:18px 0 !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:20px !important; font-weight:600 !important; line-height:1.2 !important; color:#C4CBEC !important; background:transparent !important; border-bottom:1px solid rgba(255,255,255,.10) !important; } .lw-mob-menu .elementor-nav-menu--dropdown li:last-child a.elementor-item{ border-bottom:0 !important; } .lw-mob-menu .elementor-nav-menu--dropdown a.elementor-item:hover, .lw-mob-menu .elementor-nav-menu--dropdown a.elementor-item:focus, .lw-mob-menu .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{ color:#E58A33 !important; background:transparent !important; } } /* the panel opens and closes with Elementor's own slide, which is inside the 420ms ceiling. Reduced motion turns it off. */ @media (prefers-reduced-motion:reduce){ .lw-mob-menu .elementor-nav-menu--dropdown{transition:none !important} } /* ------------------------------------------------------------ 10ae. THE HEADER BAR ONCE THE TOGGLE IS IN IT, 22 SEP 2026 Adding the toggle put three things in a bar that had two, and the logo is the one that gives, because it is the only flexible item. It came out 141 wide at 390 and 59 wide at 320, where it is unreadable. Given a width and stopped from shrinking, with a smaller step below 380. Width and not height, so it can never be squashed out of ratio the way it was in August. ------------------------------------------------------------ */ @media (max-width:1024px){ [data-elementor-type="header"] .e-con:has(> a > img), [data-elementor-type="header"] .e-con:has(> .e-image-link-base){ flex:0 0 auto !important; } [data-elementor-type="header"] img{ width:150px !important; max-width:150px !important; height:auto !important; flex:0 0 auto !important; } } @media (max-width:380px){ /* 320 is the tight one: 20px page sides, a 112 logo, a 44 toggle and a 113 button do not fit in 280. The three columns each carry 10px of their own padding, which is 40px of the 41 that was overflowing, so that comes off first and the logo takes a second small step. */ [data-elementor-type="header"] .lw-band{gap:8px !important} [data-elementor-type="header"] .lw-band > .e-con{ padding-left:0 !important; padding-right:0 !important; } [data-elementor-type="header"] .e-con:has(> .lw-mob-menu){gap:8px !important} [data-elementor-type="header"] img{ width:104px !important; max-width:104px !important; } } /* ---- SPN seal strip, 30 September 2026 ---- Responsive rules for the classes built in the editor. Paste at the end of Site Settings > Custom CSS, ABOVE the reduced motion block. Doubled classes and !important so a value set on the classes in the editor never outranks them. */ /* Elementor V4 gives every Div Block width 100% and 10px padding by default. Claim, Checks and each Check must size to their content, or the row splits into equal halves and the labels wrap. */ .lw-seal-claim.lw-seal-claim, .lw-seal-checks.lw-seal-checks, .lw-seal-check.lw-seal-check{--width:auto;width:auto !important;flex:0 0 auto !important} .lw-seal-claim.lw-seal-claim, .lw-seal-checks.lw-seal-checks{padding:0 !important} /* Desktop: the three labels never break onto two lines */ .lw-seal-label.lw-seal-label{white-space:nowrap} /* Below 1200 the strip narrows: the heading goes above the checks */ @media (max-width:1199px){ .lw-seal-body.lw-seal-body{flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;gap:14px !important} .lw-seal-checks > .lw-seal-check:first-child{padding-left:0 !important} } /* Tablet: the checks become a short list */ @media (max-width:1024px){ .lw-seal-checks.lw-seal-checks{flex-direction:column !important;align-items:flex-start !important;gap:10px !important} .lw-seal-check.lw-seal-check{padding:0 !important;border-left:0 !important} } /* Phone: badge on top, everything left aligned */ @media (max-width:767px){ .lw-seal.lw-seal{flex-direction:column !important;margin-top:24px !important} .lw-seal-badge.lw-seal-badge{justify-content:flex-start !important;width:auto !important;min-width:0 !important;padding:22px 22px 0 !important;border-right:0 !important} .lw-seal-img.lw-seal-img{height:38px !important} .lw-seal-body.lw-seal-body{padding:18px 22px 22px !important;gap:16px !important} .lw-seal-label.lw-seal-label{white-space:normal} } /* ------------------------------------------------------------ 11. REDUCED MOTION For visitors who have asked their system to reduce motion. This block has to be the last thing in the file. It uses the transition shorthand, and a shorthand only beats the longhand properties in section 1 if it comes after them. ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ .lw-card-light,.lw-card-dark,.lw-card-navy,.lw-btn{ transition:none !important; } .lw-card-light:hover,.lw-card-dark:hover,.lw-card-navy:hover,.lw-btn:hover{ transform:none !important; } } [data-elementor-type="header"]{position:sticky;top:0;z-index:100} /* 6 Oct 2026. Blog text built with the newer Elementor elements (article and index H1, category labels, breadcrumbs) was falling back to the system font, because the kit sets no body font. */ .elementor .lw-art-h1, .elementor .lw-cat, .elementor .lw-crumb { font-family: "Plus Jakarta Sans", sans-serif; }/* End custom CSS */