, which carries the same _css_classes for styling its inner .elementor-button link — see the dedicated Elementor Button widget bridge rules further down, which target that inner link directly. Without this qualifier the wrapper div picked up its own copy of the background/border, showing as a second rectangular outline around the real pill-shaped button. */ a.btn-primary, button.btn-primary{ background:var(--terracotta); color:#fff; box-shadow:0 12px 24px -8px rgba(217,123,76,.55); } a.btn-primary:hover, button.btn-primary:hover{ background:var(--terracotta-dark); transform:translateY(-2px); color:#fff; } a.btn-outline, button.btn-outline{ background:transparent; color:var(--paper); border:1.5px solid rgba(255,255,255,.55); } a.btn-outline:hover, button.btn-outline:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); } a.btn-dark-outline, button.btn-dark-outline{ background:transparent; color:var(--pine-900); border:1.5px solid var(--pine-900); } a.btn-dark-outline:hover, button.btn-dark-outline:hover{ background:var(--pine-900); color:#fff; } .btn-sm{ padding:11px 22px; font-size:13.5px; } .btn[disabled]{ opacity:.65; cursor:not-allowed; transform:none !important; } /* Eyebrow / kicker */ /* When Elementor renders this (the kicker widget carries class "elementor-widget"), its own frontend.min.css matches via .elementor-element:where(.e-con-full, .elementor-widget){align-items: var(--align-items); ...} — :where() always contributes zero specificity, so that selector's real specificity is just .elementor-element (1 class), tying our own 1-class .kicker rule; Elementor's loads later, so it silently wins the tie and resets align-items to the unset custom property's initial value ("normal") instead of "center" — leaving the dash (::before) and the label text vertically misaligned. !important forces ours to win instead. */ .kicker{ display:inline-flex !important; align-items:center !important; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta-dark); margin-bottom:16px !important; } .kicker::before{ content:''; width:22px; height:2px; background:var(--terracotta); display:inline-block; flex:none; } /* Elementor's Heading widget renders the kicker as a

, which now also picks up the generic p{margin:0 0 1em !important} rule above — spacing here should come only from .kicker's own margin-bottom on the wrapper, not from the inner tag too. */ .kicker p, .kicker .elementor-heading-title{ margin:0 !important; } .kicker.on-dark{ color:var(--gold-soft); } .kicker.on-dark::before{ background:var(--gold-soft); } /* ===== Topbar ===== */ .topbar{ background:var(--pine-900); color:#DCEAE3; font-size:12.5px; font-weight:600; } .topbar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:9px; padding-bottom:9px; gap:16px; } .topbar-items{ display:flex; gap:26px; min-width:0; } .topbar-items span{ display:inline-flex; align-items:center; gap:7px; opacity:.92; min-width:0; } .topbar-items svg{ width:14px; height:14px; stroke:var(--gold-soft); flex:none; } .topbar-right{ display:flex; gap:18px; align-items:center; flex:none; white-space:nowrap; } .topbar-right a{ opacity:.85; } .topbar-right a:hover{ opacity:1; color:var(--gold-soft); } /* ===== Header ===== */ .site-header{ position:sticky; top:0; z-index:100; border-bottom:1px solid var(--line); transition:box-shadow .3s ease; } .site-header::before{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; background:rgba(251,246,238,.86); backdrop-filter:blur(14px); } .site-header.is-stuck{ box-shadow:0 8px 30px -12px rgba(15,43,36,.18); } .nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:var(--container); margin:0 auto; } .brand{ display:flex; align-items:center; gap:12px; } .brand img{ max-height:var(--otr-logo-height, 64px); width:auto; } .brand-link{ display:flex; align-items:center; gap:12px; } .brand-mark{ width:46px; height:46px; border-radius:12px; background:linear-gradient(155deg, var(--pine-700), var(--pine-900)); display:flex; align-items:center; justify-content:center; color:var(--gold-soft); font-family:'Fraunces',serif; font-weight:600; font-size:19px; box-shadow: inset 0 0 0 1.5px rgba(231,185,104,.4); flex:none; } .brand-text{ line-height:1.15; } .brand-text b{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; color:var(--pine-900); display:block; } .brand-text small{ font-size:10.5px; letter-spacing:.16em; color:var(--terracotta-dark); font-weight:700; } .main-nav{ display:flex; align-items:center; gap:2px; } .main-nav > li{ position:relative; } .main-nav > li > a{ display:flex; align-items:center; gap:5px; white-space:nowrap; padding:12px 16px; font-weight:600; font-size:14.5px; color:var(--pine-900); border-radius:8px; transition:color .2s; } .main-nav > li > a:hover{ color:var(--terracotta-dark); } .main-nav svg{ width:13px; height:13px; margin-top:1px; } .main-nav .dd-toggle{ background:none; border:none; padding:0; margin-left:2px; cursor:pointer; display:none; } .dropdown, .main-nav .sub-menu{ position:absolute; top:100%; left:0; margin-top:6px; background:var(--paper); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); min-width:250px; padding:10px; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .2s ease; border:1px solid var(--line); z-index:50; } .main-nav li:hover .dropdown, .main-nav li:hover .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); } .dropdown a, .main-nav .sub-menu a{ display:block; padding:11px 14px; border-radius:8px; font-size:14px; font-weight:600; color:var(--ink); } .dropdown a:hover, .main-nav .sub-menu a:hover{ background:var(--ivory-deep); color:var(--terracotta-dark); } .dropdown a span{ display:block; font-size:12px; font-weight:500; color:var(--ink-soft); margin-top:2px; } .main-nav .menu-item-has-children > a::after{ content:'▾'; font-size:11px; margin-left:5px; position:relative; top:-1px; } .main-nav .menu-item-description{ display:block; font-size:12px; font-weight:500; color:var(--ink-soft); margin-top:2px; } .nav-actions{ display:flex; align-items:center; gap:18px; } .nav-phone{ display:flex; flex-direction:column; text-align:right; white-space:nowrap; } .nav-phone small{ font-size:10.5px; color:var(--ink-soft); font-weight:600; } .nav-phone strong{ font-size:14.5px; color:var(--pine-900); white-space:nowrap; } .burger{ display:none; width:26px; height:20px; position:relative; cursor:pointer; background:none; border:none; padding:0; } .burger span{ position:absolute; left:0; right:0; height:2px; background:var(--pine-900); border-radius:2px; transition:.3s; } .burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:9px; } .burger span:nth-child(3){ top:18px; } /* Elementor Containers default to padding:10px on all sides (in addition to the 20px gap default reset further down this file). Reset to 0 here, as early as possible in this file, so every component's own !important padding declared below — .hero .container, .mini-card, .journey-panel, .callout, .info-card, .step, etc. — reliably wins the tie (same specificity, later source position) instead of this default. The plain `padding` shorthand only covers "full"-width containers, which render with no extra wrapper. "Boxed" containers (Elementor's default content-width setting, e.g. split-media/split-body) render an inner .e-con-inner div whose padding Elementor sources from the --padding-top/right/bottom/left custom properties (via --padding-block-start/end, --padding-inline-start/end) rather than the padding shorthand — so a plain `padding:0` reset on .e-con never reaches it. Zero those custom properties too so the inner wrapper inherits 0 instead of Elementor's 10px fallback. */ .e-con{ padding:0 !important; --padding-top:0 !important; --padding-right:0 !important; --padding-bottom:0 !important; --padding-left:0 !important; } /* Elementor Containers also default to a 20px flex/grid gap between their OWN direct children (not just the .e-con-inner gap reset below, which only covers "boxed" containers) — "full"-width containers with more than one direct child (e.g. a sec-head + a card grid, both direct children of a .container) apply this gap themselves, stacking on top of the child elements' own margin-bottom spacing instead of replacing it. Reset here; every intentional-gap component (.why-grid, .split, .steps, etc.) already carries its own !important gap declared later in this file. */ .e-con{ gap:0 !important; } /* Elementor's own widget-image.min.css sets .elementor-widget-image img to display:inline-block (needed for its own alignment controls), which beats our global img{display:block} reset (style.css:51) on specificity. Left alone, an inline-block image with vertical-align:middle picks up a symmetric top/bottom "strut" gap from the surrounding line box — often 40px+ of invisible height — in any image widget that isn't inside a container with an explicit fixed height. Force it back to block here. */ .elementor-widget-image img{ display:block !important; } /* .container's own horizontal padding (defined earlier, above the .e-con reset) shares the same 1-class specificity as .e-con, so on Elementor pages the reset — being later in source — would otherwise win the tie and strip it. Reassert it here, after the reset, so it wins instead. */ .container{ padding:0 32px !important; } /* Elementor's own frontend.min.css only auto-centers a .e-con that is a DIRECT child of .elementor-section-wrap / [data-elementor-id] — i.e. only truly top-level Elementor elements (:is(.elementor-section-wrap, [data-elementor-id]) > .e-con{--margin-left:auto; --margin-right:auto}). Every .container nested one level deeper (inside a .sec-pad, .journey, .why, etc. wrapper — which is every section since those got their own sec-pad wrapper) falls back to Elementor's base --margin-left:0, so our own `margin:0 auto` above loses the specificity tie and the whole section's content sits flush-left instead of centered. Force it here. */ .container{ margin-left:auto !important; margin-right:auto !important; } /* ===== Hero ===== */ /* Elementor Containers default to flex-direction:column. align-items only controls the CROSS axis — in a column container that's horizontal, not vertical — so align-items:center alone was silently centering nothing visible (the child already spans full width) while leaving the actual vertical position at the flex default (flex-start), pinning content to the top of the 92vh box with all the extra height landing below it as empty space. Force flex-direction:row (matching plain CSS's own default, which is what this rule was written assuming) so align-items:center governs the vertical axis as intended. */ .hero{ position:relative; min-height:92vh !important; display:flex !important; flex-direction:row !important; align-items:center !important; background:var(--pine-900); color:#fff; overflow:hidden; margin-bottom:0 !important; } .hero-bg{ position:absolute !important; top:0; right:0; bottom:0; left:0; margin:0 !important; } .hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; border-radius:0 !important; margin:0 !important; } .hero-bg::after{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(100deg, rgba(15,43,36,.97) 15%, rgba(15,43,36,.75) 45%, rgba(15,43,36,.35) 78%); } .hero .container, .hero .container > .wp-block-group__inner-container, .hero .container > .e-con-inner{ position:relative; z-index:2; display:grid !important; grid-template-columns:1.15fr .85fr !important; gap:60px !important; align-items:center; padding-top:60px !important; padding-bottom:60px !important; } .hero h1{ font-size:clamp(2.5rem, 4.6vw, 3.9rem); color:#fff; margin-bottom:22px !important; } .hero p.lead{ font-size:18px; color:#D9E4DD; max-width:520px; margin-bottom:34px !important; } /* margin-bottom needs !important too — .hero-ctas is an Elementor container, and Elementor's own base CSS sets --margin-bottom:0px (and maps it through to margin-block-end) on every .e-con by default, which otherwise wins this tie the same way padding/gap defaults have throughout this file. */ .hero-ctas, .hero-ctas > .wp-block-group__inner-container, .hero-ctas > .e-con-inner{ display:flex !important; flex-direction:row !important; gap:16px !important; flex-wrap:wrap; margin-bottom:44px !important; } .hero-stats, .hero-stats > .wp-block-group__inner-container, .hero-stats > .e-con-inner{ display:flex !important; flex-direction:row !important; gap:34px !important; flex-wrap:wrap; } .hero-stats b{ display:block; font-family:'Fraunces',serif; font-size:26px; color:var(--gold-soft); } .hero-stats span{ font-size:12.5px; color:#C6D4CC; font-weight:600; } /* Elementor's Text Editor widget always wraps content in a

, unlike the plain

the native markup used for these icon-adjacent label pairs — which pulls in the generic p{line-height:1.7; margin:0 0 1em} prose rule and roughly doubles their height. Reset both explicitly. */ .hero-stats p, .trust-item p{ margin:0 !important; line-height:1.3 !important; } /* Native wp:button className variants — same "which button style" bridge already used for the theme's own markup and for Elementor's Button widget, just for a plain Gutenberg wp:button block. */ .wp-block-button.btn-primary .wp-block-button__link{ background:var(--terracotta) !important; color:#fff !important; border:none !important; box-shadow:0 12px 24px -8px rgba(217,123,76,.55); } .wp-block-button.btn-primary .wp-block-button__link:hover{ background:var(--terracotta-dark) !important; } .wp-block-button.btn-outline .wp-block-button__link{ background:transparent !important; color:var(--paper) !important; border:1.5px solid rgba(255,255,255,.55) !important; } .wp-block-button.btn-outline .wp-block-button__link:hover{ background:rgba(255,255,255,.12) !important; } /* Enquiry card in hero */ .enquiry-card{ background:var(--paper); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-lg); color:var(--ink); } .enquiry-card h3{ font-size:21px; margin-bottom:4px !important; } .enquiry-card .sub{ font-size:13.5px; color:var(--ink-soft); margin-bottom:20px !important; } .field{ margin-bottom:14px; } .field label{ display:block; font-size:12px; font-weight:700; color:var(--pine-800); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; } .field input, .field select, .field textarea{ width:100%; padding:13px 15px; border-radius:10px; border:1.5px solid var(--line); font-family:'Manrope',sans-serif; font-size:14.5px; background:var(--ivory); color:var(--ink); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--terracotta); background:#fff; } .enquiry-card .btn{ width:100%; margin-top:6px; } .enquiry-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; } .form-msg{ font-size:13px; font-weight:600; margin-top:12px; text-align:center; display:none; } .form-msg.show{ display:block; } .form-msg.ok{ color:var(--pine-700); } .form-msg.err{ color:#B23A2E; } /* ===== Trust strip ===== */ .trust-strip{ background:var(--paper); border-bottom:1px solid var(--line); } .trust-strip .container, .trust-strip .container > .wp-block-group__inner-container, .trust-strip .container > .e-con-inner{ display:flex !important; flex-direction:row !important; justify-content:space-between; padding:26px 32px !important; flex-wrap:wrap; gap:18px !important; } .trust-item, .trust-item > .wp-block-group__inner-container, .trust-item > .e-con-inner{ display:flex !important; flex-direction:row !important; align-items:center; gap:12px !important; width:auto !important; flex:0 0 auto !important; } .trust-item .ic{ width:42px; height:42px; border-radius:11px; background:var(--ivory-deep); display:flex; align-items:center; justify-content:center; flex:none; } .trust-item .ic svg{ width:20px; height:20px; stroke:var(--pine-700); } .trust-item b{ display:block; font-size:14px; color:var(--pine-900); } .trust-item span{ font-size:12px; color:var(--ink-soft); } /* ===== Section heading ===== */ .sec-head{ max-width:640px !important; margin-bottom:52px !important; } .sec-head.center{ margin-left:auto !important; margin-right:auto !important; text-align:center; } .sec-head h2{ font-size:clamp(1.9rem,3vw,2.6rem); color:var(--pine-900); } /* .elementor-heading-title bump: same reason as .cta-band h2 above — this only used to matter for .sec-head instances still inside .entry-content (covered by that generic bridge rule), but story-heading/video-heading are extracted out to their own

, outside .entry-content entirely, so they need their own explicit protection against Elementor's .elementor-widget-heading .elementor-heading-title{color:var(--e-global-color-primary)} default. */ .sec-head .elementor-heading-title{ color:var(--pine-900) !important; } /* Tag-scoped (h2, not just .elementor-heading-title) so this can't tie with .kicker .elementor-heading-title{font-family:'Manrope'...} elsewhere in this file — both are 2-class selectors and would otherwise depend on source order to decide which one wins for the kicker paragraph that also lives inside .sec-head. Needed for the same out-of-.entry-content reason as the color rule above: extracted story-heading/video-heading otherwise fall back to Elementor's default Roboto Kit font. */ .sec-head h2.elementor-heading-title{ font-family:'Fraunces', serif !important; font-weight:600; line-height:1.12; } .sec-pad{ padding:96px 0 !important; } /* Elementor Containers in flex mode default to a 20px gap between their direct children. That's fine for the grid-style card/column rows below (which set their own gap right back on top of this), but wrong for simple stacked-content containers — mini-card, split-body, journey-panel, and the page's own top-level section stack — where spacing is meant to come from each element's own margin (12px/20px/28px etc., not one uniform value). Reset to 0 here; every intentional-gap rule below carries its own !important gap to layer back on top of this default. */ :is(.entry-content, .editor-styles-wrapper) .e-con-inner{ gap:0 !important; } /* When a wp:group block has no explicit "layout" attribute, Gutenberg (and, equivalently, Elementor when a Container isn't set to content_width:full) wraps its children in one extra "inner" div — .wp-block-group__inner-container or .e-con-inner. Every *-grid/-row class in this file targets both "the outer class itself" and "that inner wrapper", so whichever one is actually present gets the real column/flex layout — but that means BOTH ends up display:grid at once here, and since the outer only ever has that ONE inner div as its child, the inner wrapper gets squeezed into a single column/cell of the OUTER grid before it can lay out its own real content full-width. Force that lone inner wrapper to span the outer grid/flex completely, neutralising the redundant outer split so only the inner wrapper's own grid-template-columns actually does any column-splitting. */ :is(.entry-content, .editor-styles-wrapper) .wp-block-group > .wp-block-group__inner-container:only-child, :is(.entry-content, .editor-styles-wrapper) .wp-block-group > .e-con-inner:only-child{ grid-column:1 / -1 !important; grid-row:1 / -1 !important; width:100% !important; flex:1 1 100% !important; } /* ===== Why choose (feature cards) ===== */ .why{ background:var(--ivory); } .why-grid, .why-grid > .wp-block-group__inner-container, .why-grid > .e-con-inner{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:22px !important; } .why-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); padding:32px 28px; transition:transform .3s ease, box-shadow .3s ease; } .why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; } .why-card .ic{ width:52px; height:52px; border-radius:14px; margin-bottom:20px !important; background:linear-gradient(155deg, var(--pine-700), var(--pine-900)); display:flex; align-items:center; justify-content:center; } .why-card .ic svg{ width:24px; height:24px; stroke:var(--gold-soft); } .why-card h3{ font-size:18px; color:var(--pine-900); margin-bottom:8px !important; } .why-card p{ font-size:14.5px; margin:0 !important; } /* Elementor Icon-Box widget bridge: same visual result when a .why-card / .info-card is built with Elementor instead of the theme's own markup. */ .why-card, .info-card{ text-align:left; } /* Elementor's icon-box widget wraps icon+title+description in a flex column with its own default 15px gap, IN ADDITION to the icon's own margin-bottom set above/below — the two stack instead of one replacing the other, double-spacing the icon from its title. The margin alone already matches the design's spacing, so zero the widget's own gap. */ .why-card .elementor-icon-box-wrapper, .info-card .elementor-icon-box-wrapper{ gap:0 !important; } /* Elementor's widget-icon-box.min.css sets .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-wrapper{text-align:center} — 3-class specificity, beating the 1-class .why-card{text-align:left} above regardless of source order — because these widgets default to the "icon above text" position (block-start) unless a JSON "position" setting says otherwise. text-align is inherited, so the title/description center themselves even though the icon itself (given its own explicit fixed size/flex rules above) doesn't visibly follow that centering. Force left here, with enough specificity + !important to actually win. */ .why-card .elementor-icon-box-wrapper, .info-card .elementor-icon-box-wrapper{ text-align:left !important; } /* Elementor's own widget-icon-box.min.css sets .elementor-widget-icon-box .elementor-icon-box-icon{display:inline-block} — same 2-class specificity as the rules below, loaded after this stylesheet, so it wins the tie and silently turns the flex centering back off. Without flex actually applying, the svg (an inline-level element) just sits at the top of the box instead of being centered, with every bit of the box's extra height collapsing below it. !important forces ours to win instead. */ .why-card .elementor-icon-box-icon{ width:52px; height:52px; border-radius:14px; margin-bottom:20px !important; background:linear-gradient(155deg, var(--pine-700), var(--pine-900)) !important; display:flex !important; align-items:center !important; justify-content:center !important; } .why-card .elementor-icon-box-icon svg{ width:24px; height:24px; fill:var(--gold-soft) !important; } .why-card .elementor-icon-box-title{ font-size:18px; color:var(--pine-900) !important; margin-bottom:8px !important; font-family:'Fraunces',serif; font-weight:600; } .why-card .elementor-icon-box-description{ font-size:14.5px; color:var(--ink-soft) !important; margin:0 !important; } .info-card .elementor-icon-box-icon{ margin-bottom:14px !important; width:auto; height:auto; background:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* margin:0 here overrides the native-rendering .info-card svg{margin-bottom: 14px} rule further down this file (meant for the plain, non-Elementor .ic svg pattern) — spacing between icon and title in the Elementor context already comes from the outer .elementor-icon-box-icon's own margin-bottom, so this second margin was stacking on top of it AND (since flex centering includes an item's margin box) pushing the icon off-center within its own span. */ .info-card .elementor-icon-box-icon svg{ width:26px; height:26px; fill:var(--terracotta-dark) !important; margin:0 !important; } /* One layer deeper: Elementor wraps the svg itself in (its own default styling: display:inline-block, font-size:50px, line-height:1 — meant for icon-FONT glyphs, which those properties do center via the text baseline, but an