.elementor-kit-5{--e-global-color-primary:#092030;--e-global-color-secondary:#092C46;--e-global-color-text:#092030;--e-global-color-accent:#AC8B55;--e-global-color-atlsand:#F3ECDD;--e-global-color-atlcream:#FAF7F1;--e-global-color-atlrule:rgba(9, 32, 48, 0.2);--e-global-color-atlink60:rgba(9, 32, 48, 0.6);--e-global-color-atlgold80:rgba(172, 139, 85, 0.8);--e-global-typography-primary-font-family:"Cinzel";--e-global-typography-primary-font-size:60px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1.133em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Cinzel";--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.5em;--e-global-typography-text-letter-spacing:-0.04em;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-size:20px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:-0.04em;--e-global-typography-atlh3-font-family:"Cinzel";--e-global-typography-atlh3-font-size:32px;--e-global-typography-atlh3-font-weight:600;--e-global-typography-atlh3-text-transform:uppercase;--e-global-typography-atlh3-line-height:1.25em;--e-global-typography-atlh3-letter-spacing:-0.02em;--e-global-typography-atleyebrow-font-family:"Cinzel";--e-global-typography-atleyebrow-font-size:20px;--e-global-typography-atleyebrow-font-weight:600;--e-global-typography-atleyebrow-text-transform:uppercase;--e-global-typography-atleyebrow-line-height:1.4em;--e-global-typography-atleyebrow-letter-spacing:-0.02em;--e-global-typography-atlnum-font-family:"Cinzel";--e-global-typography-atlnum-font-size:40px;--e-global-typography-atlnum-font-weight:400;--e-global-typography-atlnum-text-transform:uppercase;--e-global-typography-atlnum-line-height:1em;--e-global-typography-atlnum-letter-spacing:-0.02em;--e-global-typography-atlcard-font-family:"Montserrat";--e-global-typography-atlcard-font-size:24px;--e-global-typography-atlcard-font-weight:500;--e-global-typography-atlcard-text-transform:none;--e-global-typography-atlcard-line-height:1.333em;--e-global-typography-atlcard-letter-spacing:-0.04em;--e-global-typography-atllead-font-family:"Montserrat";--e-global-typography-atllead-font-size:20px;--e-global-typography-atllead-font-weight:500;--e-global-typography-atllead-text-transform:none;--e-global-typography-atllead-line-height:1.4em;--e-global-typography-atllead-letter-spacing:-0.04em;--e-global-typography-atlbody18-font-family:"Montserrat";--e-global-typography-atlbody18-font-size:18px;--e-global-typography-atlbody18-font-weight:400;--e-global-typography-atlbody18-text-transform:none;--e-global-typography-atlbody18-line-height:1.444em;--e-global-typography-atlbody18-letter-spacing:-0.04em;--e-global-typography-atlsmall-font-family:"Montserrat";--e-global-typography-atlsmall-font-size:14px;--e-global-typography-atlsmall-font-weight:400;--e-global-typography-atlsmall-text-transform:none;--e-global-typography-atlsmall-line-height:1.571em;--e-global-typography-atlsmall-letter-spacing:-0.04em;--e-global-typography-atlnav-font-family:"Montserrat";--e-global-typography-atlnav-font-size:14px;--e-global-typography-atlnav-font-weight:500;--e-global-typography-atlnav-text-transform:none;--e-global-typography-atlnav-line-height:1.571em;--e-global-typography-atlnav-letter-spacing:-0.04em;--e-global-typography-atllight-font-family:"Montserrat";--e-global-typography-atllight-font-size:14px;--e-global-typography-atllight-font-weight:300;--e-global-typography-atllight-text-transform:none;--e-global-typography-atllight-line-height:1.571em;--e-global-typography-atllight-letter-spacing:-0.04em;background-color:var( --e-global-color-atlsand );color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-secondary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-atlcream );border-radius:100px 100px 100px 100px;padding:15px 65px 15px 65px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-atlcream );border-radius:100px 100px 100px 100px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:var( --e-global-color-primary );}.elementor-kit-5 a:hover{color:var( --e-global-color-accent );}.elementor-kit-5 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-5 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-5 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-atlh3-font-family ), Sans-serif;font-size:var( --e-global-typography-atlh3-font-size );font-weight:var( --e-global-typography-atlh3-font-weight );text-transform:var( --e-global-typography-atlh3-text-transform );line-height:var( --e-global-typography-atlh3-line-height );letter-spacing:var( --e-global-typography-atlh3-letter-spacing );}.elementor-kit-5 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-atlcard-font-family ), Sans-serif;font-size:var( --e-global-typography-atlcard-font-size );font-weight:var( --e-global-typography-atlcard-font-weight );text-transform:var( --e-global-typography-atlcard-text-transform );line-height:var( --e-global-typography-atlcard-line-height );letter-spacing:var( --e-global-typography-atlcard-letter-spacing );}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{border-style:solid;border-width:2px 2px 2px 2px;border-color:rgba(250, 247, 241, 0.1);transition:200ms;}.elementor-kit-5 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea:focus,.elementor-kit-5 .elementor-field-textual:focus{border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-accent );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px;}.e-con{--container-max-width:1360px;--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:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-5{--e-global-typography-primary-font-size:44px;--e-global-typography-secondary-font-size:34px;--e-global-typography-accent-font-size:18px;--e-global-typography-atlh3-font-size:28px;--e-global-typography-atlcard-font-size:22px;--e-global-typography-atllead-font-size:18px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-5 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-5 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-5 h3{font-size:var( --e-global-typography-atlh3-font-size );line-height:var( --e-global-typography-atlh3-line-height );letter-spacing:var( --e-global-typography-atlh3-letter-spacing );}.elementor-kit-5 h4{font-size:var( --e-global-typography-atlcard-font-size );line-height:var( --e-global-typography-atlcard-line-height );letter-spacing:var( --e-global-typography-atlcard-letter-spacing );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-primary-font-size:32px;--e-global-typography-secondary-font-size:27px;--e-global-typography-text-font-size:15px;--e-global-typography-accent-font-size:17px;--e-global-typography-atlh3-font-size:24px;--e-global-typography-atleyebrow-font-size:17px;--e-global-typography-atlnum-font-size:34px;--e-global-typography-atlcard-font-size:20px;--e-global-typography-atllead-font-size:17px;--e-global-typography-atlbody18-font-size:16px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-5 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-5 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-5 h3{font-size:var( --e-global-typography-atlh3-font-size );line-height:var( --e-global-typography-atlh3-line-height );letter-spacing:var( --e-global-typography-atlh3-letter-spacing );}.elementor-kit-5 h4{font-size:var( --e-global-typography-atlcard-font-size );line-height:var( --e-global-typography-atlcard-line-height );letter-spacing:var( --e-global-typography-atlcard-letter-spacing );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ---- one-page scrolling. The header is FIXED, so it covers the top 86px of the viewport (20 offset + 66 tall) at every scroll position. An anchor target must clear that or the section heading lands underneath it. 106 = 86 + the design's own 20 rhythm. `scroll-padding-top` on the scrollport is what both CSS smooth scrolling and scrollIntoView() honour; a per-target `scroll-margin-top` would have to be restated on every section. */ html { scroll-behavior: smooth; scroll-padding-top: 106px; } /* The header is not one height: 66 on desktop, 50 once the nav collapses to a toggle, 68 on a phone. A single offset leaves sections underneath it at one end of the range or 60px of dead space at the other. Each value is measured, not guessed: 20 (the top offset) + the height + the design's own 20. */ @media (max-width: 1024px) { html { scroll-padding-top: 96px; } } @media (max-width: 767px) { html { scroll-padding-top: 98px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---- 0. the header floats over the hero, and stays ---------------------- The frame draws the masthead INSIDE the cover, on top of the photograph, so the Theme Builder header is taken out of flow rather than stacked above the page. 20 from the top and 20 either side, capped at the Kit's 1360. FIXED, not Elementor's sticky module. Sticky is built for a header that sits in normal flow and detaches on scroll: it measures the element, injects a `.elementor-sticky__spacer` to hold the gap it leaves, then switches it to fixed. This header was never in flow — it is already positioned out of it so the hero photograph shows through — so there is no gap to hold, and the spacer would add 86px of blank ground above the hero. One property does the whole job, with no JS, no layout shift, and nothing to re-measure on resize. The containment is unchanged: the 1360 cap and the 20 gutters below. */ .elementor-location-header { position: fixed; top: 20px; left: 0; right: 0; z-index: 50; /* The cap lives HERE, on the wrapper, not on the masthead. Elementor ships `:is(.elementor-section-wrap,[data-elementor-id]) > .e-con { max-width: min(100%,var(--width)) }` at (0,2,0), and --width is 100%, so a `.atl-masthead { max-width: 1360px }` at (0,1,0) loses and computes to 100%. That was invisible at 1400, where the wrapper is 1360 anyway, and ran the header full-bleed on anything wider while the page stayed boxed. Capping the wrapper sidesteps the specificity fight entirely: 1400 minus the 20 gutters leaves the masthead its 1360 at every width. */ max-width: 1400px; margin-inline: auto; padding: 0 20px; pointer-events: none; } .elementor-location-header > * { pointer-events: auto; } /* The theme's
starts the page; the header sits over its first section. */ body { position: relative; } /* ---- 1. backdrop blur ---------------------------------------------------- */ .atl-masthead { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .atl-glass { -webkit-backdrop-filter: blur(9.8px); backdrop-filter: blur(9.8px); } /* ---- 2. the service card's arrow disc ------------------------------------ */ /* Drawn flush into the card's bottom-right corner: a 40px navy disc with the 12px arrow centred. The card is the positioning context. */ .atl-card { position: relative; } .atl-card .atl-card__go { position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var( --e-global-color-secondary, #092C46 ); } .atl-card .atl-card__go .elementor-icon { display: flex; } /* The arrow disc is absolutely positioned in the card's bottom-right notch and the card is `space-between`, so the body is pushed down INTO the disc's band. At exactly 1400 that is harmless: the frame insets the body to 346 of a 400 content box, which clears the 40px disc horizontally. Below 1400 the card narrows, the body's max-width caps it at the full content box, and the last line runs under the disc — a real 20x20 collision at 1025-1399, and a worse one once the min-height is dropped for the stack. Reserve the disc's own space instead of relying on a width that only works at one viewport: 40 of disc plus 12 of air, in place of the card's 20. Scoped below 1400 so the desktop composition is untouched. */ @media (max-width: 1399px) { .atl-card { padding-bottom: 52px; } } /* ---- 2b. the service card's notched corner ------------------------------- Figma's "Rectangle 7" is a VECTOR, not a rounded rect: the bottom-right corner is a three-arc notch the navy disc sits in. From the exported path: V285 C440 298.807 428.807 310 415 310 convex r25 C401.193 310 390 321.193 390 335 CONCAVE r25 C390 348.807 378.807 360 365 360 convex r25 Masking the CARD is wrong: a mask clips its descendants, so the disc that is supposed to sit in the bite disappears with it. The bite is drawn instead — a 75x75 overlay in the page-ground colour, masked to the INVERSE of the card path (box minus card, via fill-rule evenodd). Fixed size, anchored bottom right, so it never distorts as the card resizes. */ .atl-card { position: relative; } .atl-card::after { content: ''; position: absolute; right: 0; bottom: 0; width: 75px; height: 75px; z-index: 1; pointer-events: none; background: var( --e-global-color-atlsand, #F3ECDD ); -webkit-mask: url('data:image/svg+xml;utf8,') 0 0 / 75px 75px no-repeat; mask: url('data:image/svg+xml;utf8,') 0 0 / 75px 75px no-repeat; } /* The disc sits IN the bite, above it. */ .atl-card .atl-card__go { z-index: 2; } /* ---- 2c. the step connector --------------------------------------------- Sparkle, 1px hairline at 10%, sparkle, drawn in the row's own 139 gap as a single ::after on each non-final card. The sparkles overhang the card edges by 10, exactly as the frame's 158-wide "Guide" group does across a 138 gap. */ .atl-steprow > .atl-step { position: relative; } .atl-steprow > .atl-step:not(:last-child)::after { content: ''; position: absolute; left: 100%; top: 50%; /* The frame's "Guide" group is 158 across a 138 gap: it starts 10 BEFORE the card edge and ends 10 after the next one, so both sparkles are centred on the edges rather than tucked inside the gap. Gap + 20, offset -10. */ width: 159px; height: 20px; margin: -10px 0 0 -10px; pointer-events: none; background: url('data:image/svg+xml;utf8,') left center no-repeat, url('data:image/svg+xml;utf8,') right center no-repeat, linear-gradient( rgba( 250, 247, 241, .1 ) 0 0 ) center / calc(100% - 20px) 1px no-repeat; } @media (max-width: 1024px) { .atl-steprow > .atl-step::after { display: none; } } /* Caps, not fixed widths — the design states 1360 and 318, and both have to survive a narrower viewport. */ .atl-footer { max-width: 1360px; } .atl-step__copy { max-width: 318px; } /* The Icon widget carries inline line-height, so a 24px glyph occupies 31px and the row it sits in stops matching the drawn height. */ .elementor-widget-icon .elementor-icon { display: flex; line-height: 0; } /* ---- 3. hairlines -------------------------------------------------------- */ /* Hero strip: a vertical rule before every cell except the first. */ .atl-strip .atl-stat { border-left: 1px solid rgba( 250, 247, 241, .2 ); } .atl-strip .atl-stat--first { border-left: 0; padding-left: 0; } /* Stacked, the vertical rule between strip cells is meaningless and reads as a stray line down the left edge. */ @media (max-width: 1024px) { .atl-strip .atl-stat { border-left: 0; padding-left: 0; } /* Four cells at their natural width wrap 1 / 2 / 1 and read as a mistake. Two up is even at every phone size; the design has no narrow frame. */ .atl-strip > .elementor-element { width: calc(50% - 10px); } } @media (max-width: 479px) { .atl-strip { row-gap: 24px; } } /* Why-us: a horizontal rule under every row. */ .atl-whyus .atl-why__row { border-bottom: 1px solid var( --e-global-color-atlrule, rgba( 9, 32, 48, .2 ) ); } /* ---- 4. small corrections the controls cannot express -------------------- */ /* Text-editor links inherit the run's colour; only the hover is left to state. The contact block MUST be in this list: its phone and email are links on a navy panel, and without it they take the Kit's navy link colour and vanish into the background. */ .atl-footer a, #contact .elementor-widget-text-editor a { color: inherit; text-decoration: none; } #contact .elementor-widget-text-editor a:hover, #contact .elementor-widget-text-editor a:focus-visible { color: var( --e-global-color-accent, #AC8B55 ); } /* ---- footer link HIT AREAS ---------------------------------------------- An Icon List item is a block: its fills the whole column, so the phone number's link ran the full 237px of the Contact column and you could hover — and click — a hand's width of empty space beside it. Figma sizes each of these to its own text ("Payroll" is 45 wide, not 212). Shrink the anchor to its content so the target is the words and nothing else. `width: auto` on the
  • too: the item is a flex row, and left alone it stretches the anchor back out. */ .atl-footlist .elementor-icon-list-item > a { display: inline-flex; width: auto; max-width: 100%; } /* Below 1025 the footer columns stack, and a single 20 gap on the column put the address 52px under the email while the phone and email sit on a 32 pitch — the address looked detached from the block it belongs to. The gap goes to zero so the runs keep one rhythm, and the 20 is given back to the HEADING alone, which is the only place it was doing any work. */ @media (max-width: 1024px) { .atl-footcols > .e-con { gap: 0; } .atl-footcols > .e-con > .elementor-widget-heading { margin-bottom: 20px; } /* The address is a text run, not a link, so it has none of the touch padding that sets the links' rhythm. Match it so its first line lands on the same 32 grid. */ .atl-footcols .elementor-widget-text-editor p { padding-block: 5px; } } /* The
  • stays a BLOCK. Shrinking it too makes the items inline-level and the column collapses into one line — "Services Why Us Reviews" ran together on a single row. Only the anchor inside it may shrink. */ .atl-footlist .elementor-icon-list-item { justify-content: flex-start; } /* The address and the two social labels are text runs, not lists — same fix. inline-BLOCK, not inline: it still shrinks to the text, but it can also take the vertical padding the touch-target rule adds below 1025. As `inline` those three links were 40px tall on every phone, because padding-block does nothing to an inline box. */ .atl-footer .elementor-widget-text-editor a { display: inline-block; } /* ---- footer links: ONE hover for all of them ----------------------------- The footer sits on sand, and every link rests at 60% navy (the frame's own value). Hover takes them to full navy: darker, not gold. Gold was the Kit's link hover and it read as a different interaction from the rest of the page — and on the ten icon-list links it never showed at all, because Elementor paints those labels on an inner span that covers whatever the is set to. Those ten are handled natively by `text_color_hover` on the widget; this covers the three that are raw inside a text editor. */ .atl-footer a { transition: color .2s; } .atl-footer a:hover, .atl-footer a:focus-visible { color: var( --e-global-color-primary, #092030 ); } /* The social label is the link; the gold arrow beside it is a separate widget, so only a rule on the ROW can darken the pair together. Without this the label goes navy and the arrow stays gold, which is the same mismatch one level down. COLOR, not fill. `arrow-link` is an open path — `fill="none"`, `stroke="currentColor"` — so the glyph is painted by its STROKE, and the stroke resolves through `currentColor` to the `color` property the Icon widget sets. Setting `fill` on the svg computes fine and paints nothing. The row is 104 wide and the inside it only 64, so hovering the arrow half of the row would otherwise leave the label untouched. Driving both off the row makes the pair behave as the single link it reads as. */ .atl-socialrow .elementor-icon svg, .atl-socialrow a { transition: color .2s; } .atl-socialrow:hover .elementor-icon svg, .atl-socialrow:hover a { color: var( --e-global-color-primary, #092030 ); } /* The reviews row is an Elfsight embed now, not three cards we lay out. It brings its own grid, its own pagination and its own breakpoints, so the row gives it the full width and gets out of the way — no track arithmetic, no fixed card sizing, nothing for the embed's own layout to fight. */ .atl-reviews { overflow-x: visible; } .atl-reviews > .elementor-element { width: 100%; max-width: 100%; } /* Below 1025 the row kept three cards side by side and squeezed each to ~225px, which wrapped the five-star rating onto two lines. The cards hold the frame's 440 instead and the row becomes a real carousel — the arrows above it already scroll this element, and they are only hidden at desktop where all three fit. Snap points make a drag land on a card edge rather than mid-card. */ @media (max-width: 1024px) { } /* Masthead links are Button widgets so they can carry an icon; without this the flex row shrinks them and "Personal Tax" breaks across two lines. */ .atl-masthead .elementor-button { white-space: nowrap; } /* Cinzel and Montserrat are not Trajan's metrics, so the nav runs a little wide and margin-left:auto has no slack left to give. Guarantee the gap. */ .atl-masthead .atl-push-right { padding-left: 36px; } /* ---- centre the desktop nav on the bar ----------------------------------- The frame positions the nav with a flat 197 left margin, which was right for the six service links it drew. With three, that fixed offset pins the block at x434 whatever the viewport — 161px left of centre at 1400, and drifting with width (−101 at 1280, −51 at 1180, +26 at 1025). It is an offset, not a centring, so it can only be correct at one width. Taking the nav out of flow centres it on the BAR rather than on whatever space is left between the logo and the actions, so it holds at every desktop width. Nothing else moves: the logo stays at the left edge and the actions keep their own `margin-left:auto`, which still resolves to the right edge once the nav no longer occupies flow. The margin has to be zeroed here too — Elementor writes it as a shorthand at (0,3,0), so this .elementor-kit-5 carries one class more to win, and on an absolutely positioned box a stray 197 would simply shift it back off centre. Desktop only: below 1025 the nav collapses to the toggle and is positioned static by the mobile block further down. */ @media (min-width: 1025px) { .elementor-location-header .atl-masthead .elementor-element.atl-nav { position: absolute; left: 50%; transform: translateX(-50%); margin-left: 0; margin-inline-start: 0; } } /* The masthead's Contact pill takes the Kit hover like every other pill: brass fill, cream label. This rule used to recolour the LABEL to brass too, which once the fill became brass would have painted brass on brass. Gone. "Portal log in" is the exception — a Button widget with no fill, no radius and no padding, so it has no background to move. It keeps its navy label and announces itself with a brass underline instead, which still honours the rule that a button's text never changes colour on hover. */ .atl-masthead .elementor-button[href*="portal"] .elementor-button-text { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s; } .atl-masthead .elementor-button[href*="portal"]:hover .elementor-button-text, .atl-masthead .elementor-button[href*="portal"]:focus-visible .elementor-button-text { border-bottom-color: var( --e-global-color-accent, #AC8B55 ); } /* margin-left:auto, which an Elementor dimension control cannot express: it is numeric + unit, so 'auto' comes out as `autopx` and the declaration is dropped. Used for the masthead's right-hand group and the slider arrows. */ .atl-push-right { margin-left: auto; } /* `label_position: none` still RENDERS the label element — it just does not add the screen-only class — so every field group carried a visible 16px label and the panel ran 48px tall. Hide it accessibly rather than with display:none, so each input keeps its accessible name. */ .atl-formpanel .elementor-field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The row gap is between rows; the last row does not need one before the panel's own bottom padding. */ .atl-formpanel .elementor-field-group:last-child { margin-bottom: 0; } /* The design's gap before Submit is 40, not the 20 between field rows. */ .atl-formpanel .elementor-field-type-submit { margin-top: 20px; } /* Form field heights. The design draws 44px inputs and a 150px message box; Elementor has a padding control but no height control for either. */ .atl-formpanel .elementor-field-group .elementor-field-textual { height: 44px; } .atl-formpanel .elementor-field-group textarea.elementor-field-textual { height: 150px; } .atl-formpanel .elementor-field-textual::placeholder { color: rgba( 250, 247, 241, .6 ); opacity: 1; } /* The design draws a plain box; the browser's resize grip is not part of it. */ .atl-formpanel textarea.elementor-field-textual { resize: vertical; } /* ---- 5. the 1025-1399 band ---------------------------------------------- The design is 1400 wide and Elementor's tablet breakpoint is 1024, so every width the design states verbatim (440 cards, 900 columns, 140 step gutters) has no instruction between the two. Left fixed they wrap into a ragged 2+2+1 and the page grows a thousand pixels. Expressed as fractions of the 1360 track they equal the drawn value at exactly 1400 and shrink cleanly below. */ @media (min-width: 1025px) { /* Services only. This is the 3-up CARD grid — it used to cover `.atl-reviews` too, back when that row held three cards of its own. The reviews row is a single Elfsight embed now, and the leftover .elementor-kit-5 was sizing it to a third of the track. */ .atl-services > .e-con-inner > .elementor-element { width: calc(33.333% - 13.34px); } .atl-whyus > .e-con-inner > .elementor-element:first-child { flex: 0 0 440px; } .atl-whyus > .e-con-inner > .elementor-element:last-child { flex: 1 1 auto; width: auto; } #contact > .e-con-inner > .elementor-element:first-child { flex: 0 0 440px; } #contact > .e-con-inner > .atl-formpanel { flex: 1 1 auto; width: auto; } /* Four 325 cells + three 20 gutters is exactly 1360, so they wrap the moment the track is narrower. As a quarter each they hold to the tablet break. */ .atl-strip > .elementor-element { width: calc(25% - 15px); } .atl-glass { width: min(900px, 100%); } .atl-herocopy { width: min(734px, 100%); } /* The zig-zag is stated in absolute px (1358 / 858 / a 249 inset) because that is how the frame draws it. Between 1025 and the design width there is no room for those numbers, so the rows become proportional: the three cards hold their 360 basis and the CONNECTORS absorb the slack, which is what gives 139 each at exactly 1358. */ .atl-steprow { width: 100% !important; } .atl-steprow--offset { width: 63.18% !important; margin-left: 18.34% !important; } .atl-steprow > .atl-step { flex: 0 1 360px; min-width: 0; } /* 28 + 432 + 814 is 1274 against a 1232 track at 1280, so the columns wrap and the footer doubles in height. Brand fixed, links fluid, gutter down to a floor of 24 — 130 at the design width. */ .atl-foottop > .atl-footbrand { flex: 0 0 432px; } /* 814 is the frame's own block: 237 + 131 + 212 + 130 + 104. Letting it grow into the leftover space pushed every column right — Navigation to 861 where the frame puts it at 828, and Follow us to 1236 against 1170. */ /* nowrap so the block SHRINKS below 1400 instead of dropping under the brand, which added 260px of footer at 1280. */ .atl-foottop { flex-wrap: nowrap; } .atl-foottop > .atl-footcols { flex: 0 1 814px; width: 814px; max-width: 814px; min-width: 0; } /* When the block does shrink (below 1294), Contact and Navigation give up width but never below their longest word: the email address and the "Navigation" label. Elementor's `min-width: 0` on every container let them go to 148 and 132 at 1025, under the 207 and 123 their text needs. */ .atl-footcols > .e-con:not(:last-child) { min-width: min-content; } } /* The footer COLUMN headings are single labels; "Follow us" breaks over two lines inside its 104 column. Scoped to h4 on purpose: the gold tagline below is a heading widget too, and it is SUPPOSED to break over three lines. */ .atl-footer h3.elementor-heading-title { white-space: nowrap; } /* Footer links are single labels; "Personal Tax" must not break in two. */ .atl-footlist .elementor-icon-list-text { white-space: nowrap; } .atl-footlist .elementor-icon-list-item { padding: 0; } /* Between phone and desktop the three link columns wrap onto their own lines rather than squeezing. The floor only applies where there is room for it. */ @media (min-width: 601px) and (max-width: 1024px) { .atl-footcols { flex-wrap: wrap; column-gap: 48px; row-gap: 32px; } .atl-footcols > .elementor-element { width: auto; min-width: 150px; } } /* ---- 6. touch targets --------------------------------------------------- The masthead links are 18px of text. Below the tablet breakpoint they become real targets without moving anything on desktop. */ @media (max-width: 1024px) { /* A CTA belongs AFTER the thing it is asking you to act on. On desktop each of these sections is a row — a 440 intro column on the left, content on the right — so the heading and its button sit together and read as a lead-in. Stacked, that puts "Get started" second on the screen, above everything it is selling: 4% down the services section and 8% down why-us. `display: contents` dissolves the intro wrapper so its heading and button become direct children of the section and can be ordered independently. It is safe on these two specifically because both intros are pure layout — no background, border, radius or padding to lose with the box. */ .atl-cta-intro { display: contents; } /* Order the heading and button THROUGH the wrapper, not as children of the section. `display: contents` removes the box from LAYOUT — the children become flex items of the section — but it does not change SELECTOR matching: in the DOM the heading is still a grandchild, so `#services > .e-con-inner > .elementor-widget-heading` matches nothing. The wrapper itself takes no order either; its children carry their own. */ .atl-cta-intro > .elementor-widget-heading { order: 1; } .atl-cta-intro > .elementor-widget-button { order: 3; margin-top: 40px; } #services > .e-con-inner > .elementor-element:not(.atl-cta-intro), #why-us > .e-con-inner > .elementor-element:not(.atl-cta-intro) { order: 2; } /* how-it-works has no intro wrapper — heading and button are already direct children of the section, so they are ordered directly. */ #how-it-works > .e-con-inner > .elementor-widget-heading { order: 1; } #how-it-works > .e-con-inner > .e-con { order: 2; } #how-it-works > .e-con-inner > .elementor-widget-button { order: 3; margin-top: 40px; } /* The step cards centre their number, title and copy because on desktop each is a 360-wide cell where centring reads as composed. Stacked they are full-width, and a centred ragged paragraph across a whole phone screen reads as an accident — worse, the number and title centre while the text block sits left, so nothing lines up with anything. Everything goes left, as one edge. */ .atl-step, .atl-step__copy { align-items: flex-start; } .atl-step .elementor-heading-title, .atl-step .elementor-widget-text-editor, .atl-step .elementor-widget-text-editor p { text-align: left; } /* The carousel is meant to run off the right edge so the next card is visibly cut — that IS the affordance that says "there is more". The section's own right gutter stops it short and the cut looks like a layout error instead. Drop it on the right only; the left edge keeps the gutter so the first card still lines up with the heading above it. */ #testimonials { padding-right: 0; } #testimonials > .e-con-inner > :not(.atl-reviews) { padding-right: 16px; } /* Touch padding on bare runs of text: footer columns, and the phone/email block in the contact section. 5px, not 11. At 11 each footer link is a 44px row holding 22px of text, and eleven of those stacked is a footer of islands — the frame's own link pitch is 32 (y6501/6533/6565). 22 + 10 lands exactly on that 32, which is still comfortably above the 24px WCAG AA target minimum; 44 is the AAA figure and it is not worth this much air on a phone. */ .atl-footer a, #contact .elementor-widget-text-editor a { display: inline-block; padding-block: 5px; } .atl-masthead .elementor-button { min-height: 44px; } /* Elementor renders the menu toggle as a 33x33
    . It is the only way into the navigation on a phone and it is the smallest target on the page. */ .atl-masthead .elementor-menu-toggle { min-width: 44px; min-height: 44px; } /* The logo is a link too — 140x30 of image. Padding rather than height so the mark itself does not change size. */ .atl-masthead .elementor-widget-image a { display: inline-block; padding-block: 7px; } } /* The phone bar reads logo | Contact | toggle. In DOM order the nav sits second, because on desktop it follows the logo — so the toggle is moved to the end for phones only, rather than reordering the markup and breaking the desktop row. The push-right inset goes with it: at 375 the bar has 303px to work in and 36px of padding is the difference between fitting and wrapping. */ /* Portal log in is a menu item ONLY on the small breakpoints. At desktop the masthead carries a dedicated Portal button beside the nav, so the item would be the same destination twice. */ @media (min-width: 1025px) { /* Mirrors Elementor's own `.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li { display: flex }` and adds the class, so this is (0,4,0) against their (0,3,0). At (0,2,0) it lost and the item stayed visible beside the Portal button — the same destination twice. */ .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.atl-portal-item { display: none; } } /* Everything below applies wherever the TOGGLE is showing, which is <=1024 — the nav's breakpoint. Scoping this to <=767 was the bug that left 768-1024 with a horizontal nav overlapping the Contact pill. */ @media (max-width: 1024px) { /* The bar reads logo | Contact | toggle. In DOM order the nav sits second, because on desktop it follows the logo — so the toggle moves to the end here rather than reordering the markup and breaking the desktop row. */ .atl-masthead .atl-nav { order: 3; } /* Contact and the toggle were touching: the bar's gap is 0 and the push-right inset is removed for width. Put a real gap back. */ .atl-masthead { column-gap: 12px; } /* The dropdown hangs off the nav widget, which sits at the right end of the bar. Taking the widget out of the positioning chain hands the panel the masthead as its containing block, so left:0/right:0 make it exactly as wide as the pill at every width — no fixed width, no 100vw (which counts a scrollbar the pill does not). */ .atl-masthead .atl-nav { position: static; } .atl-masthead .elementor-nav-menu--dropdown { /* Elementor's own absolute positioning rides in on the inline styles the stretch JS writes. With stretch off the panel is static, so it opens IN FLOW and stretches the pill from 68 to 275 tall instead of hanging under it. It has to be positioned here. */ position: absolute; left: 0; right: 0; width: auto; top: 100%; } } @media (max-width: 767px) { /* Only the phone is tight enough to need the inset back. */ .atl-masthead .atl-push-right { padding-left: 0; } /* The frame's 20 top offset is a desktop proportion. On a phone the bar is pinned over a ~660px viewport, so 20 above it is a fifth of the gap doing nothing — and every pixel of it is height the hero has to be pushed down to clear. Half of it reads the same and gives the headline back 10px. */ .elementor-location-header { top: 10px; } } /* ---- form submit result ------------------------------------------------- Elementor's success tick is a base64 data URI with fill="#008a20" baked into the plugin's own stylesheet — no control reaches it, and a pure green tick is the one saturated colour on a page built from two navies, brass and cream. Redrawn as the same 14x11 path in brass. Written URL-encoded rather than base64 so the colour is legible and editable here (%23 is the # a data URI cannot carry raw). The tick is decoration: the message itself says "successful", so the state is never carried by colour alone. */ .elementor-widget-form .elementor-message-success.elementor-message-svg::before { background-image: url('data:image/svg+xml;utf8,'); } /* Elementor ships the result 10px under the button. The panel is built on a 20 rhythm and the message is the one thing the user is looking for after a submit, so it gets the same 20 every other run in the panel has. */ .elementor-widget-form .elementor-message { margin-top: 20px; } /* ---- form field focus -------------------------------------------------- The brass focus border itself is NATIVE — Kit -> Theme Style -> Form Fields -> Focus, so it is editable in Site Settings and every future form inherits it. Nothing about the colour is restated here. A colour change alone is a weak focus indicator, so keyboard focus also gets a real ring. Pointer focus keeps just the brass border. */ .elementor-widget-form .elementor-field-textual:focus-visible { outline: 2px solid var( --e-global-color-accent, #AC8B55 ); outline-offset: 2px; } /* Keyboard focus must stay visible — :where() would give this zero specificity. */ .atl-footer a:focus-visible, .atl-card a:focus-visible, .elementor-button:focus-visible { outline: 2px solid var( --e-global-color-accent, #AC8B55 ); outline-offset: 3px; } /* ==== 5. inner pages: Theme Builder templates and page bodies ============ Everything below is scoped to classes the inner-page builders set, so none of it reaches the homepage. Values come from Kit variables, never hex. */ /* ---- 5a. running copy (.atl-prose: page bodies, and posts as .atl-article) */ .atl-prose p:last-child { margin-bottom: 0; } .atl-prose ul, .atl-prose ol { margin: 0 0 16px; padding-left: 1.25em; } .atl-prose ul:last-child, .atl-prose ol:last-child { margin-bottom: 0; } .atl-prose li { margin-bottom: 8px; } .atl-prose li::marker { color: var( --e-global-color-accent, #AC8B55 ); } /* A link inside copy has to look like one. The Kit already colours it (navy, brass on hover); the underline is the only addition. */ .atl-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .atl-prose a:hover, .atl-prose a:focus-visible { text-decoration-thickness: 2px; } /* The Remote page's list of 106 communities: flowed into columns, no bullets. 140, not 170: at 170 a phone got ONE column, 106 names and 2,400px of scrolling. 140 gives two on every phone, four from 768. */ .atl-prose ul.atl-columns { columns: 4 140px; column-gap: 20px; list-style: none; padding-left: 0; } .atl-prose ul.atl-columns li { break-inside: avoid; margin-bottom: 6px; } /* Posts carry h2-h4 of their own. The Kit sizes those tags for page sections (Cinzel 40 / 32); inside an article they are sub-heads, so they step down to the card and lead tokens. (0,2,1) against the Kit's (0,2,0). */ .atl-article.elementor-widget-theme-post-content h2, .atl-article.elementor-widget-theme-post-content h3, .atl-article.elementor-widget-theme-post-content h4, .atl-article.elementor-widget-theme-post-content h5, .atl-article.elementor-widget-theme-post-content h6 { font-family: var( --e-global-typography-atlcard-font-family ), sans-serif; font-weight: var( --e-global-typography-atlcard-font-weight ); letter-spacing: var( --e-global-typography-atlcard-letter-spacing ); text-transform: none; margin: 32px 0 12px; } .atl-article.elementor-widget-theme-post-content h2 { font-size: 24px; line-height: 1.33; } .atl-article.elementor-widget-theme-post-content h3 { font-size: 20px; line-height: 1.4; } .atl-article.elementor-widget-theme-post-content h4, .atl-article.elementor-widget-theme-post-content h5, .atl-article.elementor-widget-theme-post-content h6 { font-size: 18px; line-height: 1.44; } .atl-article.elementor-widget-theme-post-content > :first-child { margin-top: 0; } .atl-article.elementor-widget-theme-post-content p { margin: 0 0 16px; } .atl-article.elementor-widget-theme-post-content img { max-width: 100%; height: auto; border-radius: 20px; } /* The hidden pages carry the old site's own WordPress content (2026-09-21), and its images use WordPress's alignment classes: More Than Just Taxes floats its logo beside the text, About centres its banner. Nothing on this site styled those classes, so every image sat inline. flow-root keeps a float inside. */ .atl-article.elementor-widget-theme-post-content { display: flow-root; } .atl-article.elementor-widget-theme-post-content .alignleft { float: left; margin: 4px 24px 16px 0; } .atl-article.elementor-widget-theme-post-content .alignright { float: right; margin: 4px 0 16px 24px; } .atl-article.elementor-widget-theme-post-content .aligncenter { display: block; margin-left: auto; margin-right: auto; } .atl-article.elementor-widget-theme-post-content figure { margin: 0 0 16px; } @media (max-width: 480px) { /* A 182px float leaves a 150px column of text on a phone: stack instead. */ .atl-article.elementor-widget-theme-post-content .alignleft, .atl-article.elementor-widget-theme-post-content .alignright { float: none; display: block; margin: 0 0 16px; } } /* A phone number is one unit: "(907) 373-" at the end of a line and "8829" on the next is how it wrapped on a phone. */ .atl-prose a[href^="tel:"], .atl-article a[href^="tel:"] { white-space: nowrap; } /* A checklist group that spans its whole row (the lone last card: Schedule C's eighteen expenses) flows its ticks into two columns instead of one long run beside an empty half. A phone has room for one, so it collapses by itself. */ .atl-span .atl-ticks .elementor-icon-list-items { columns: 2 260px; column-gap: 40px; } .atl-span .atl-ticks .elementor-icon-list-item { break-inside: avoid; } /* The contact band's email is 295px of 20px type beside a 24 icon and a 10 gap: 329 against the 328 a 360 phone gives the row, so the envelope dropped onto a line of its own while phone and address kept theirs. 19px brings all three rows back to one line down to 350. */ @media (max-width: 374px) { #contact .atl-contactrow .elementor-widget-text-editor { font-size: 19px; } } /* ---- 5b. the page hero's portal link: the masthead's brass underline ------ */ .atl-herolink .elementor-button-text { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s; } .atl-herolink .elementor-button:hover .elementor-button-text, .atl-herolink .elementor-button:focus-visible .elementor-button-text { border-bottom-color: var( --e-global-color-accent, #AC8B55 ); } /* ---- 5c. FAQ: one card per question -------------------------------------- The item is painted as ONE card: the widget's two native backgrounds (title and pane) leave a seam across the middle (theme CLAUDE.md). Elementor's own hairlines on the summary and the pane are cleared at (0,3,0). */ .atl-faq .e-n-accordion-item { background: var( --e-global-color-atlcream, #FAF7F1 ); border-radius: 25px; overflow: hidden; } .atl-faq .e-n-accordion-item .e-n-accordion-item-title, .atl-faq .e-n-accordion-item > .e-con { border: 0; } .atl-faq .e-n-accordion-item-title { cursor: pointer; } /* The question is an h3, so the Kit's h3 (Cinzel 32 caps, at (0,2,0)) outranks the widget's title typography, which Elementor wraps in :where(). The lead token, restated from Kit variables at (0,2,1). */ .atl-faq h3.e-n-accordion-item-title-text { font-family: var( --e-global-typography-atllead-font-family ), sans-serif; font-size: var( --e-global-typography-atllead-font-size ); font-weight: var( --e-global-typography-atllead-font-weight ); line-height: var( --e-global-typography-atllead-line-height ); letter-spacing: var( --e-global-typography-atllead-letter-spacing ); text-transform: none; margin: 0; } /* ---- 5d. cards that are links ------------------------------------------- The homepage and hub service cards, and the blog's post cards, are containers. The Kit's prose link colours would cascade into every line, so they are pinned across the states; only the deliberate hover moves (theme CLAUDE.md, Full-card links). */ a.atl-card--link, a.atl-card--link:link, a.atl-card--link:visited, a.atl-card--link:hover, a.atl-card--link:active, a.atl-postcard, a.atl-postcard:link, a.atl-postcard:visited, a.atl-postcard:hover, a.atl-postcard:active { color: inherit; text-decoration: none; } /* Service card: the arrow disc turns brass. */ a.atl-card--link .atl-card__go { transition: background-color .2s; } a.atl-card--link:hover .atl-card__go, a.atl-card--link:focus-visible .atl-card__go { background: var( --e-global-color-accent, #AC8B55 ); } /* Post card: a brass edge, and "Read more" sits at the foot of every card so a row of different-length excerpts still lines up. */ a.atl-postcard { transition: box-shadow .2s; } a.atl-postcard:hover, a.atl-postcard:focus-visible { box-shadow: inset 0 0 0 2px var( --e-global-color-accent, #AC8B55 ); } .atl-postcard .atl-postcard__more { margin-top: auto; } a.atl-card--link:focus-visible, a.atl-postcard:focus-visible { outline: 2px solid var( --e-global-color-accent, #AC8B55 ); outline-offset: 3px; } /* ---- 5e. the blog's pagination: 44px targets, the button palette -------- */ .atl-postgrid .elementor-pagination { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .atl-postgrid .elementor-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 22px; font-family: var( --e-global-typography-atlnav-font-family ), sans-serif; font-weight: var( --e-global-typography-atlnav-font-weight ); color: var( --e-global-color-primary, #092030 ); background: var( --e-global-color-atlcream, #FAF7F1 ); text-decoration: none; transition: background-color .2s; } .atl-postgrid .elementor-pagination .page-numbers.current { background: var( --e-global-color-secondary, #092C46 ); color: var( --e-global-color-atlcream, #FAF7F1 ); } .atl-postgrid .elementor-pagination a.page-numbers:hover, .atl-postgrid .elementor-pagination a.page-numbers:focus-visible { background: var( --e-global-color-accent, #AC8B55 ); } /* On the first and last page Elementor prints Previous / Next as a SPAN: no link, so it must not look like one. */ .atl-postgrid .elementor-pagination span.prev, .atl-postgrid .elementor-pagination span.next { opacity: .45; } /* The ellipsis is not a page: no pill behind it. */ .atl-postgrid .elementor-pagination .page-numbers.dots { background: transparent; min-width: 24px; padding: 0; } /* Page 4 is ten targets (Previous 1 2 3 4 5 6 ... 8 Next) and a phone wrapped them over two and three rows. The phone pager is Previous | this page | Next; the other numbers stay in the markup for crawlers and screen readers' lists. */ @media (max-width: 767px) { .atl-postgrid .elementor-pagination .page-numbers:not(.prev):not(.next):not(.current) { display: none; } } /* ---- 5f. the office map: rounded like every other panel ------------------ */ .atl-map { overflow: hidden; border-radius: 30px; } .atl-map iframe { display: block; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Cinzel'; font-display: auto; src: url('https://thealaskataxlady.com/wp-content/uploads/2026/09/Cinzel-Variable.woff2') format('woff2'), url('https://thealaskataxlady.com/wp-content/uploads/2026/09/Cinzel-Variable.ttf') format('truetype'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Montserrat'; font-display: auto; src: url('https://thealaskataxlady.com/wp-content/uploads/2026/09/Montserrat-Variable.woff2') format('woff2'), url('https://thealaskataxlady.com/wp-content/uploads/2026/09/Montserrat-Variable.ttf') format('truetype'); } /* End Custom Fonts CSS */