/* Dropdown arrow for Languages button */
.main-navigation .menu .languages .dropdown-arrow {
display: inline-block;
width: 12px;
height: 12px;
margin-left: 7px;
vertical-align: middle;
position: relative;
top: -1px;
}
.main-navigation .menu .languages .dropdown-arrow::before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #1f2937;
margin: 0 auto;
transition: border-top-color 0.2s;
}
.main-navigation .menu .languages:hover .dropdown-arrow::before,
.main-navigation .menu .languages:focus-within .dropdown-arrow::before {
border-top-color: var(--accent);
}
/* Scrolled header: same arrow and dropdown alignment */
.site-header.scrolled .main-navigation .menu .languages .dropdown-arrow::before {
border-top: 6px solid #1f2937;
}
.site-header.scrolled .main-navigation .menu .languages:hover .dropdown-arrow::before,
.site-header.scrolled .main-navigation .menu .languages:focus-within .dropdown-arrow::before {
border-top-color: var(--accent);
}
/* Minimal styles approximating legalandcompliance.com layout */
:root{
--accent:#0a5a8a;
--muted:#6b6b6b;
--bg:#fff;
/* Dropdown alignment offsets (centered under the trigger). Adjust per breakpoint below. */
--submenu-offset-normal-x: 19px; /* normal header */
--submenu-offset-scrolled-x: 20px; /* scrolled header (compact) */
/* Banner controls */
--banner-max-width:1400px;
--banner-side-padding:60px;
--banner-min-height:185px;
--banner-logo-max-height:130px;
--banner-text-size:1.8rem;
--banner-corner-color:#20c6ff;
/* font size variables for easy tweaking */
--firm-name-size: 1.44rem; /* change this to grow/shrink firm name */
--firm-services-size: 0.9rem; /* change this to grow/shrink services text */
/* scrolled header tuning knobs */
--scrolled-row-height: 40px; /* reduced height for compact scrolled header */
--logo-x: 0px; /* push logo left(-)/right(+) */
--logo-y: 0px; /* nudge logo up(-)/down(+) */
--contact-x: 0px; /* push contact left(+)/right(-) since it sits on the right edge */
--contact-y: 0px; /* nudge contact up(-)/down(+) */
/* services tiles */
--tile-height: 240px; /* desktop tile height */
--tile-watermark-size: 15%; /* size of watermark on tile front - decrease to shrink, increase to enlarge */
/* mobile hero banner logo */
--mobile-hero-logo-width: 25px; /* change this to adjust banner logo width */
/* Feature image tuning */
--feature-image-column: 1.2fr; /* image 1/3 */
--feature-text-column: 1.8fr; /* text 2/3 */
--feature-image-aspect: 16/10; /* optional, not used when stretching */
--feature-image-min-height: 520px; /* baseline vertical size */
--feature-image-max-height: 720px; /* cap to prevent over-expansion on ultrawide */
--feature-image-radius: 10px; /* corner rounding */
--feature-image-object-position: center center; /* adjust focal point: e.g. left center */
--feature-image-bleed-left: 150px; /* desktop: amount image extends into left whitespace */
--feature-section-padding: 30px; /* top and bottom whitespace around feature section */
--feature-section-mobile-x-padding: 24px; /* horizontal padding for feature content on mobile */
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#222;line-height:1.6;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
/* Accessibility utility (keep; safe to leave even without search UI) */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Mobile header hidden by default on desktop/tablet */
.mobile-header { display: none; }
/* Keep mobile header visible when drawer/menu is open */
body.mobile-open .mobile-header { display:flex !important; }
/* Drawer topbar component removed */
.mobile-drawer-topbar { display: none; }
/* make the entire header area white to match screenshot */
.site-header{
background:linear-gradient(to bottom,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.45) 60%,
rgba(0,0,0,0) 100%); /* extra-strong top shading, extended fade */
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
position:relative;
z-index:10000; /* Increased to ensure dropdowns appear above hero */
border-bottom: none;
margin-top:0; /* ensure flush to very top */
}
/* Topbar: left-block (logo + firm info) sits flush left; topbar-inner contains right-side contact */
.topbar{position:relative;background:transparent}
.left-block{position:absolute;left:0;top:0;display:flex;align-items:center;gap:14px;padding:12px 16px}
.left-block .site-logo img{max-height:68px;display:block}
.left-text{line-height:1}
.firm-name{font-weight:700;font-size:var(--firm-name-size);color:#fff}
.firm-services{font-size:var(--firm-services-size);color:#e5e5e5}
.topbar-inner{display:flex;justify-content:flex-end;align-items:center;padding:14px 32px 0 0;width:100%}
.contact-block{flex:0 0 auto;text-align:right}
.contact-top{font-weight:400;font-size:0.86rem;color:#fff}
.contact-top strong{font-weight:700;font-size:1rem}
.contact-top a{color:#fff;text-decoration:none;font-weight:700;font-size:1.3rem}
/* Nav wrap under the topbar; nav aligned to right */
.nav-wrap{background:transparent;border-top:none;border-bottom:none}
.nav-inner{display:flex;align-items:center;padding:6px 16px 10px 0;justify-content:flex-end;width:100%}
.main-navigation .menu{list-style:none;margin:0;padding:0;display:flex;gap:0;align-items:center;margin-right:0}
.main-navigation .menu li{margin:0;display:flex;align-items:center}
.main-navigation .menu li a{
display:inline-block;
padding:12px 20px; /* unified horizontal rhythm */
text-decoration:none;
background:transparent;
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
font-size:0.75rem;
font-weight:600;
letter-spacing:0.5px;
text-transform:uppercase;
line-height:1.25;
color:#1f2937; /* default (scrolled) color; transparent overrides below */
transition:color .2s ease-out, text-shadow .2s ease-out;
}
.main-navigation .menu li a:hover,
.main-navigation .menu li.current-menu-item > a{
color:var(--accent, #0a5a8a);
}
/* Underline animation starting from center and expanding both ways */
.main-navigation .menu li{position:static} /* Remove relative positioning from li */
.main-navigation .menu li a{position:relative;overflow:visible}
.main-navigation .menu li a::after{
content:'';
position:absolute;
left:50%;
bottom:0;
height:3px;
width:100%;
background:currentColor; /* underline matches link color in both states */
transform-origin:center;
transform:translateX(-50%) scaleX(0);
transition:transform 0.25s cubic-bezier(.2,.9,.3,1);
opacity:0.95;
}
.main-navigation .menu li a:hover::after,
.main-navigation .menu li.current-menu-item > a::after{
transform:translateX(-50%) scaleX(1);
}
/* Transparent header (normal state, not scrolled): only color & readability enhancements */
.site-header:not(.scrolled) .main-navigation .menu li a{
color:#F2F6FF;
text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.site-header:not(.scrolled) .main-navigation .menu li a:hover,
.site-header:not(.scrolled) .main-navigation .menu li a:focus{
color:#FFFFFF;
}
.site-header:not(.scrolled) .main-navigation .menu li a:focus-visible::after{
transform:translateX(-50%) scaleX(1);
}
@media (prefers-reduced-motion: reduce){
.main-navigation .menu li a::after{transition:none}
}
/* Dividers more visible across mixed backgrounds */
.site-header:not(.scrolled) .main-navigation .menu > li + li::before{
color:rgba(255,255,255,.70);
}
/* Language arrow + icons inherit current color and halo */
.site-header:not(.scrolled) .main-navigation .menu .languages .dropdown-arrow{color:currentColor}
.site-header:not(.scrolled) .main-navigation .menu .languages .dropdown-arrow::before{
border-top-color:currentColor;
}
/* Ensure dropdown submenu text stays dark (do not inherit white) */
.site-header:not(.scrolled) .main-navigation .menu .sub-menu .menu-item a{
color:#111;
text-shadow:none;
}
/* Hover state for transparent header submenu: ensure white text overrides dark base color */
.site-header:not(.scrolled) .main-navigation .menu .sub-menu .menu-item a:hover,
.site-header:not(.scrolled) .main-navigation .menu .sub-menu .menu-item a:focus{
background:#062534;
color:#fff;
text-shadow:none;
}
/* Explicit hover/focus trigger for transparent header (redundant safety) */
.site-header:not(.scrolled) .main-navigation .menu .menu-item-has-children:hover > .sub-menu,
.site-header:not(.scrolled) .main-navigation .menu .menu-item-has-children:focus-within > .sub-menu{
display:block;
}
/* Ensure submenu stays above hero content in transparent state */
.site-header:not(.scrolled) .main-navigation .menu .sub-menu{z-index:10002}
/* Divider '|' between top-level menu items only */
.main-navigation .menu > li + li::before{
content:'|';
color:rgba(255,255,255,.55);
display:flex;
align-items:center;
margin:0 14px;
line-height:1;
}
/* If a hidden mobile Home item precedes, suppress the divider before the next item */
.main-navigation .menu > li.mobile-home-item + li::before{ content:none; }
/* Languages dropdown styles - aligned with link center, not li center */
.main-navigation .menu .menu-item-has-children{position:relative}
.main-navigation .menu .menu-item-has-children > a{position:relative}
.main-navigation .menu .sub-menu{
/* Position dropdown centered under the tag to match underline */
/* Offset to account for gap (24px) + half of divider spacing (14px) */
display:none;
position:absolute;
left:calc(50% + var(--submenu-offset-normal-x)); /* Shift right; tweak --submenu-offset-normal-x for normal header */
transform:translateX(-50%);
top:calc(100% + 0px);
background:#fff;
border:1px solid #e6e6e6;
box-shadow:0 8px 24px rgba(0,0,0,0.08);
padding:0;
width:130px;
min-width:min-content;
max-width:100%;
z-index:9999;
list-style:none;
overflow:hidden;
transition: all 0.2s ease-out;
}
.main-navigation .menu .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu .menu-item-has-children:focus-within > .sub-menu{
display:block;
}
.main-navigation .menu .sub-menu .menu-item a{
display:block;
padding:12px 24px;
color:#111;
white-space:nowrap;
width:100%;
}
/* Hover state for submenu options: dark background and white text. No underline/box animation. */
.main-navigation .menu .sub-menu .menu-item a:hover,
.main-navigation .menu .sub-menu .menu-item a:focus{
background:#062534;
color:#fff;
outline:none;
}
/* Remove the top-level underline animation for items inside the submenu */
.main-navigation .menu .sub-menu .menu-item a::after{display:none}
/* Divider between submenu items */
.main-navigation .menu .sub-menu .menu-item + .menu-item{border-top:1px solid #e6e6e6}
/* Slightly increase the hit area and remove border-radius for clean block appearance */
.main-navigation .menu .sub-menu .menu-item a{padding:12px 16px;border-radius:0}
.hero{
position:relative;
padding:0;
background:transparent;
margin-top:-108.5px; /* Pull hero up to cover top part of screen */
min-height:520px; /* Increased from 450px to show table and chairs */
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
margin-bottom:0; /* reset to 0, let image handle spacing */
line-height:0; /* eliminate line-height gap around inline images */
}
/* Mobile-only firm banner over the hero image */
.mobile-hero-banner{display:none}
.mobile-hero-banner{box-sizing:border-box}
.mobile-hero-banner .mobile-hero-text{line-height:1.2}
.mobile-hero-banner .firm-name{font-weight:700}
.mobile-hero-banner .firm-services{opacity:.9}
/* Hero image - must be block with no spacing to prevent gap */
.hero-image-full {
display:block; /* critical: prevents inline spacing below image */
width:100%;
height:520px; /* Match hero min-height for controlled sizing */
margin:0;
padding:0;
object-fit: cover; /* Crop to fill container */
object-position: center 55%; /* Shifted down to show table and chairs */
}
/* Move hero content further left and reduce vertical space */
.hero-inner{
position:relative;
z-index:2;
display:flex;
gap:24px;
align-items:center;
padding-top:240px; /* Increased from 200px to match taller hero */
padding-left:48px; /* shift content leftward */
}
/* Move hero content left and hide the small image/logo in the hero */
.hero-inner{justify-content:flex-start;padding-left: 0px}
.hero-image{display:none}
.hero-copy{flex:1}
/* Hero copy sizing & left alignment helpers. Adjust these variables to move/size the copy area. */
:root{
--hero-copy-max-width:720px;
--hero-copy-left-padding:0px;
--hero-banner-height:185px; /* default banner height (navy bar) */
}
.hero-copy{
max-width:var(--hero-copy-max-width);
padding-left:32px; /* move text further left */
text-align:left;
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.hero-copy h1 {
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
font-size: 3.6rem; /* slight reduction for sans-serif balance */
font-weight: 800;
color: #23406e;
margin: 0 0 16px;
line-height: 1.07; /* adjusted for Inter metrics */
letter-spacing: -1.2px; /* relaxed tracking for legibility */
text-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.lead {
color: #222e3a;
font-size: 1.13rem; /* 10% smaller */
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
font-weight: 400;
margin-bottom: 24px;
letter-spacing: 0.01em;
}
.button{display:inline-block;padding:10px 18px;border-radius:4px;background:#eee;color:#222;text-decoration:none}
.button.primary{background:var(--accent);color:#fff}
.hero-banner{
min-height:185px;
height:auto;
background:#1a3a52; /* dark blue for professional look */
width:100%;
margin-top:0; /* removed negative margin for equal padding */
padding-top:0;
/* Make sure the banner sits directly below the hero; its top edge lines up with the hero bottom in normal flow. */
}
/* Banner uses 3 equal columns via CSS Grid */
.banner-inner{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
align-items:center;
min-height:var(--banner-min-height);
color:#fff;
max-width:var(--banner-max-width);
margin:0 auto;
padding:32px var(--banner-side-padding);
gap:40px;
}
.banner-left{display:flex;align-items:center;justify-content:center;justify-self:start}
.banner-logo{max-height:var(--banner-logo-max-height);display:block;width:auto}
.banner-center{display:flex;align-items:center;justify-content:center;text-align:center;justify-self:center}
.banner-text{margin:0;color:#fff;font-style:italic;font-size:var(--banner-text-size);line-height:1.35;font-weight:400}
.banner-right{display:flex;align-items:center;justify-content:center;justify-self:end}
/* Ghost corner button (reference style), centered text and no default border */
.banner-cta-btn{position:relative;display:inline-grid;place-items:center;font-weight:700;font-size:1rem;letter-spacing:.5px;color:#eaf6fb;text-decoration:none;min-height:48px;padding:0 34px;min-width:210px;background:transparent;border:0;transition:color .3s ease, background-color .3s ease}
.banner-cta-btn::before,.banner-cta-btn::after{content:'';position:absolute;width:40px;height:14px;border:2px solid var(--banner-corner-color);opacity:.95;transition:all .35s cubic-bezier(.4,0,.2,1)}
.banner-cta-btn::before{top:-2px;left:-2px;border-bottom:none;border-right:none}
.banner-cta-btn::after{bottom:-2px;right:-2px;border-top:none;border-left:none}
.banner-cta-btn:hover{color:#0b2a3c;background-color:var(--banner-corner-color)}
.banner-cta-btn:hover::before,.banner-cta-btn:hover::after{width:calc(100% + 4px);height:calc(100% + 4px)}
/* Focus accessibility */
.banner-cta-btn:focus{outline:none}
.banner-cta-btn:focus::before,.banner-cta-btn:focus::after{width:calc(100% + 4px);height:calc(100% + 4px);box-shadow:0 0 0 3px rgba(0,149,217,.35)}
/* Mobile: stack vertically, center everything */
@media(max-width:699px){
/* Show and style the mobile banner on small screens */
/* Further enlarge banner (+~33%) and logo, make it in-flow so hero pushes down */
.mobile-hero-banner{display:flex;
position:relative;
z-index:2;
background:#1a3a52;
color:#fff;
gap:14px;
align-items:center;
padding:16px 18px;
min-height:74px;
flex-wrap:nowrap;
width:100%}
.mobile-hero-banner .mobile-hero-logo{width:var(--mobile-hero-logo-width,56px);height:auto;display:block}
/* Single-line firm name: prevent wrapping and clip gracefully */
.mobile-hero-banner .firm-name{font-size:.94rem;white-space:nowrap;line-height:1.15;letter-spacing:-.25px;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;max-width:100%;display:block}
/* Services line below, single-line and slightly smaller - MUST be visible */
.mobile-hero-banner .firm-services{font-size:.88rem;color:#e5e5e5;margin-top:5px;line-height:1.15;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;white-space:nowrap;display:block;opacity:1}
/* Ensure text container can shrink without forcing wrap */
.mobile-hero-banner .mobile-hero-text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;gap:2px}
.banner-inner{
grid-template-columns: 1fr;
row-gap:18px;
padding:28px 24px;
text-align:center;
}
.banner-left, .banner-center, .banner-right{justify-self:center}
.banner-text{font-size:1.3rem}
.banner-logo{max-height:70px}
.banner-cta-btn{min-width:180px;padding:0 26px}
}
/* Sticky/scrolled header styles ------------------------------------------------- */
/* Scroll progress bar - appears on top of scrolled header */
.scroll-progress-bar {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, #0a5a8a 0%, #2563eb 100%);
z-index: 10000;
width: 0%;
transition: width 0.1s ease-out;
opacity: 0;
pointer-events: none;
}
.scroll-progress-bar.visible {
opacity: 1;
}
/* Prevent background scroll when overlay is open */
body.search-lock{overflow:hidden}
.site-header{transition:all 220ms ease;}
.site-header .left-text{transition:opacity 200ms ease, transform 200ms ease;}
.site-header .left-block .site-logo img{transition:max-height 200ms ease;}
.site-header .nav-inner{transition:all 220ms ease;}
.site-header .topbar-inner{transition:all 220ms ease;}
/* Add phone to nav-inner for scrolled header */
.site-header .scrolled-phone{display:none;}
/* --- Scrolled header layout: completely redesigned to match reference --- */
.site-header.scrolled {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
z-index: 9999;
padding: 0;
}
/* Hide the original two-row layout structure when scrolled */
.site-header.scrolled .topbar {
display: none; /* Hide the topbar completely */
}
.site-header.scrolled .nav-wrap {
position: static;
background: #fff;
}
/* Redesign nav-inner as single centered row: logo | nav items | phone */
.site-header.scrolled .nav-inner {
display: flex;
align-items: center;
justify-content: space-between; /* space items evenly */
padding: 10px 32px;
gap: 48px;
max-width: 100%;
position:relative; /* allow absolute hitbox positioning */
}
/* Logo in scrolled header - CSS pseudo-element (will be clickable via JS) */
/* Real clickable scrolled logo element */
.site-header.scrolled .scrolled-logo-link{
position: relative;
display: inline-block;
width: 40px;
height: 40px;
flex-shrink: 0;
background: url('../images/logo-small-1.svg') center/contain no-repeat;
opacity: 1;
transition: opacity 0.2s ease;
}
.site-header.scrolled .scrolled-logo-link:hover{ opacity:.8; }
/* Navigation menu - centered, horizontal, ALL CAPS */
.site-header.scrolled .main-navigation { flex: 1; display: flex; justify-content: center; }
.site-header.scrolled .main-navigation .menu {
display: flex;
gap: 0; /* Remove gap, dividers will create spacing */
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.site-header.scrolled .main-navigation .menu li {
margin: 0;
position: relative; /* For submenu positioning */
display: flex;
align-items: center;
}
/* Scrolled header: inherits unified typography; just ensure color without text-shadow */
.site-header.scrolled .main-navigation .menu li a{color:#1f2937;text-shadow:none;padding:12px 20px;}
/* Dividers between items - inline, not absolute */
.site-header.scrolled .main-navigation .menu > li + li::before {
content: '|';
color: #d1d5db;
font-size: 0.75rem;
line-height: 1;
padding: 0 4px; /* Small padding around divider */
display: flex;
align-items: center;
height: 100%;
}
/* Suppress divider when a hidden mobile Home item is the previous sibling */
.site-header.scrolled .main-navigation .menu > li.mobile-home-item + li::before{ content:none; }
/* Show phone link in scrolled header */
.site-header.scrolled .scrolled-phone {
display: block;
font-size: 1.1rem;
font-weight: 700;
color: #1f2937;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.2s ease;
}
/* Push phone number left on desktop to prevent overflow in scrolled header */
@media (min-width: 1024px) {
.site-header.scrolled .scrolled-phone {
margin-right: 20px;
}
/* Reduce gap and padding in scrolled header to prevent phone overflow */
.site-header.scrolled .nav-inner {
gap: 24px;
padding: 10px 20px;
}
}
.site-header.scrolled .scrolled-phone:hover {
color: var(--accent);
}
/* Header searches ----------------------------------------------------------- */
/* Scrolled-state search lives in .nav-inner as .header-search;
Normal-state search lives in .topbar as .header-search-normal */
.header-search{display:flex;align-items:center;flex:0 0 auto;order:3}
.header-search-normal{display:flex;align-items:center;flex:0 0 auto;margin-right:16px}
/* Share styles between normal and scrolled searches */
.header-search .site-search-form,
.header-search-normal .site-search-form{display:flex;align-items:center;gap:8px}
.header-search .site-search-form .search-input-wrap,
.header-search-normal .site-search-form .search-input-wrap{position:relative;display:flex;align-items:center}
.header-search .site-search-form .search-field,
.header-search-normal .site-search-form .search-field{
width:clamp(180px, 20vw, 260px);
height:36px;
padding:8px 44px 8px 12px;
border:1px solid #d1d5db;
border-radius:8px;
background:#fff;
color:#111;
font-size:.95rem;
transition:border-color .2s, box-shadow .2s;
}
.header-search .site-search-form .search-field:focus,
.header-search-normal .site-search-form .search-field:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(10,90,138,.18);
}
.header-search .site-search-form .search-submit,
.header-search-normal .site-search-form .search-submit{
position:absolute;right:4px;top:50%;transform:translateY(-50%);
width:34px;height:34px;border:0;border-radius:6px;cursor:pointer;
background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;
transition:opacity .2s;
}
.header-search .site-search-form .search-submit:hover,
.header-search-normal .site-search-form .search-submit:hover{opacity:.9}
.header-search .site-search-form .search-submit svg,
.header-search-normal .site-search-form .search-submit svg{width:18px;height:18px}
/* Only show the .header-search (nav) when scrolled; hide it in normal state */
.site-header:not(.scrolled) .header-search{display:none}
/* Ordering for header cluster */
.site-header nav.main-navigation{order:2}
.site-header .scrolled-phone{order:4}
/* Hide search on mobile only - show on tablet and desktop */
@media (max-width: 699px){
.header-search{display:none}
.header-search-normal{display:none}
}
/* Mobile-only Home menu item styling: hidden on tablet/desktop */
@media (min-width:700px){
.main-navigation .menu .mobile-home-item{display:none !important;}
}
@media (max-width:699px){
.main-navigation .menu .mobile-home-item a{
font-weight:700;
letter-spacing:.5px;
}
}
/* Fix submenu positioning and hover behavior for scrolled header */
.site-header.scrolled .main-navigation .menu .menu-item-has-children{position:relative}
.site-header.scrolled .main-navigation .menu .sub-menu {
display: none;
position: absolute;
left: calc(50% + var(--submenu-offset-scrolled-x)); /* uses compact offset for scrolled header */
transform: translateX(-50%);
top: 100%;
background: #fff;
border: 1px solid #e6e6e6;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
padding: 0;
width: 130px;
min-width: min-content;
max-width: 100%;
z-index: 9999;
list-style: none;
overflow: hidden;
}
/* Show submenu on hover - with no gap */
.site-header.scrolled .main-navigation .menu .menu-item-has-children:hover > .sub-menu,
.site-header.scrolled .main-navigation .menu .menu-item-has-children:focus-within > .sub-menu {
display: block;
}
/* Submenu items styling for scrolled header */
.site-header.scrolled .main-navigation .menu .sub-menu .menu-item {
margin: 0;
}
.site-header.scrolled .main-navigation .menu .sub-menu .menu-item a {
display: block;
padding: 14px 20px;
color: #111;
white-space: nowrap;
width: 100%;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.2s ease;
}
/* Hover state for submenu options */
.site-header.scrolled .main-navigation .menu .sub-menu .menu-item a:hover,
.site-header.scrolled .main-navigation .menu .sub-menu .menu-item a:focus {
background: #062534;
color: #fff;
outline: none;
}
/* Remove underline animation for submenu items */
.site-header.scrolled .main-navigation .menu .sub-menu .menu-item a::after {
display: none;
}
/* Divider between submenu items */
.site-header.scrolled .main-navigation .menu .sub-menu .menu-item + .menu-item {
border-top: 1px solid #e6e6e6;
}
/* Remove the ::before divider for submenu items */
.site-header.scrolled .main-navigation .menu .sub-menu .menu-item::before {
display: none;
}
/* Responsive behavior for scrolled header */
@media (max-width: 1023px) {
.site-header.scrolled .nav-inner {
gap: 20px;
padding: 8px 16px;
}
.site-header.scrolled .main-navigation .menu {
gap: 0;
}
.site-header.scrolled .main-navigation .menu li a {
font-size: 0.7rem;
padding: 10px 12px;
}
.site-header.scrolled .scrolled-phone {
font-size: 1rem;
}
}
.services-section{
/* extra breathing room between banner and services content; adjust as needed */
margin-top:24px;
}
.services-section h2,.recent-posts h2{margin-top:0}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.service-card{background:#fff;border:1px solid #eee;padding:18px;border-radius:6px}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.post-excerpt{display:flex;gap:12px;background:#fff;border:1px solid #eee;padding:12px;border-radius:6px}
.post-thumb img{max-width:150px;height:auto}
.content-wrap{display:flex;gap:24px;padding:24px 0}
.primary-content{flex:2}
.site-sidebar{flex:1;max-width:320px}
/* Footer Section ---------------------------------------------------------------- */
.site-footer{
position:relative;
background:#1a2332;
color:#fff;
padding:0;
margin-top:-5px; /* reduced overlap - only edges touch */
min-height:700px; /* same as hero */
display:flex;
align-items:center;
justify-content:center; /* center content horizontally */
overflow:hidden;
z-index:10; /* ensure footer is above the section it overlaps */
}
/* Background image with sky blue tint */
.site-footer::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url('../images/footer-bg.jpg') center center/cover no-repeat;
opacity:0.3;
z-index:1;
}
/* Sky blue overlay tint */
.footer-overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(18, 43, 75, 0.35);
z-index:2;
}
/* Centered footer content - all elements stacked vertically */
.footer-content{
position:relative;
z-index:3;
display:flex;
flex-direction:column;
align-items:center; /* center horizontally */
gap:40px;
text-align:center;
padding:80px 40px;
max-width:700px;
margin:0 auto;
}
/* Firm Logo and Info - stacked vertically, centered */
.footer-firm{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:20px;
}
.footer-logo img{
max-height:120px; /* larger logo as shown in reference */
display:block;
}
.footer-firm-text{
line-height:1.5;
text-align:center;
}
.footer-firm-name{
font-weight:700;
font-size:1.15rem;
color:#fff;
margin-bottom:6px;
}
.footer-firm-services{
font-size:0.9rem;
color:rgba(255,255,255,0.9);
}
/* Address Section - icon above text, centered */
.footer-address{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}
.footer-section-title{
font-size:1.2rem;
font-weight:600;
color:#fff;
margin-bottom:8px;
display:block;
}
.footer-icon{
color:#fff;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.footer-icon svg{
width:32px;
height:32px;
}
.footer-address-text{
color:#fff;
font-size:1rem;
line-height:1.7;
}
/* Phone Section - icon above link, centered */
.footer-phone{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}
.footer-phone-link{
color:#fff;
text-decoration:none;
font-size:1.05rem;
font-weight:400;
position:relative;
display:inline-block;
transition:color 0.25s ease;
}
/* Underline animation - starts visible and scales away from center on hover (reverse of nav) */
.footer-phone-link::after{
content:'';
position:absolute;
left:50%;
bottom:0;
height:1px;
width:100%;
background:#fff;
transform-origin:center;
transform:translateX(-50%) scaleX(1);
transition:transform 0.25s cubic-bezier(.2,.9,.3,1);
}
/* Remove underline on hover by scaling to 0 */
.footer-phone-link:hover::after{
transform:translateX(-50%) scaleX(0);
}
/* Social Media Buttons - horizontal row, centered, with borders */
.footer-social{
display:flex;
gap:14px;
align-items:center;
justify-content:center;
}
.footer-social-btn{
width:46px;
height:46px;
border:2px solid rgba(255,255,255,0.5);
background:transparent;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
text-decoration:none;
transition:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
border-radius:0;
position:relative;
overflow:hidden;
}
.footer-social-btn svg{
transition:color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
width:22px;
height:22px;
position:relative;
z-index:1;
}
/* Background fill animation from bottom */
.footer-social-btn::before{
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
height:0;
background:#fff;
transition:height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index:0;
}
/* Hover: scale up, fill background white, change icon to dark */
.footer-social-btn:hover{
border-color:#fff;
transform:scale(1.1);
color:#1a2332;
}
.footer-social-btn:hover::before{
height:100%;
}
/* Florida Law Office Button - slanted, centered */
.footer-florida-btn{
display:inline-block;
padding:12px 36px;
background:transparent;
color:#fff;
text-decoration:none;
font-weight:700;
font-size:0.9rem;
letter-spacing:0.8px;
border:2px solid rgba(255,255,255,0.6);
transform:skewX(-8deg);
transition:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position:relative;
overflow:hidden;
font-style:italic;
}
/* Background fill animation from bottom - using professional blue */
.footer-florida-btn::before{
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
height:0;
background:#2563eb; /* professional blue shade */
transition:height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index:0;
}
.footer-florida-btn span{
position:relative;
z-index:1;
}
/* Straighten, scale up, fill with blue, keep white text */
.footer-florida-btn:hover{
transform:skewX(0deg) scale(1.05);
border-color:#2563eb;
color:#fff;
}
.footer-florida-btn:hover::before{
height:100%;
}
/* Responsive adjustments */
@media(max-width:600px){
.footer-content{gap:32px;padding:60px 24px}
.footer-logo img{max-height:80px}
.footer-firm-name{font-size:1rem}
.footer-firm-services{font-size:0.8rem}
.footer-address-text{font-size:0.9rem}
.footer-social{gap:12px}
.footer-social-btn{width:42px;height:42px}
.footer-florida-btn{padding:10px 28px;font-size:0.85rem}
}
.footer-inner{display:none} /* hide old footer styles */
.footer-menu{list-style:none;display:flex;gap:12px}
/* Flippable services tiles ---------------------------------------------------- */
.flip-services{margin-top:8px}
/* Make services section span full width while keeping small side gutters */
.flip-services.wrap{max-width:none;width:100%;padding-left:24px;padding-right:24px}
.flip-tiles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* Rationalized: Tablet 2 columns, Mobile 1 column */
@media (min-width:700px) and (max-width:1023px){.flip-tiles-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:699px){.flip-tiles-grid{grid-template-columns:1fr}}
.flip-tile{position:relative;perspective:1000px;height:var(--tile-height);cursor:pointer;outline:none}
.flip-tile:focus{box-shadow:0 0 0 3px rgba(10,90,138,.35)}
.flip-tile-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s}
.flip-tile:hover .flip-tile-inner,.flip-tile.flipped .flip-tile-inner{transform:rotateY(180deg)}
.flip-tile-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden}
/* Front: center the provided icon/image - watermark removed to eliminate visible box */
.flip-tile-front{display:flex;align-items:center;justify-content:center;background:#fff}
/* Watermark removed - was causing faint visible boxes:
.flip-tile-front::before{content:"";position:absolute;inset:0;background:url('../images/logo-small.svg') center/var(--tile-watermark-size) no-repeat;opacity:.08;pointer-events:none} */
/* Front content wrapper for image + title layout */
.flip-front-content{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
padding:16px;
width:100%;
height:100%;
}
/* Service title on front face */
.service-title-front{
font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size:1.05rem;
font-weight:600;
letter-spacing:0.5px;
color:#1a3a52;
text-align:center;
margin:0;
line-height:1.3;
}
.flip-tile-front img{
/* Logo sizing: uses adjustable variable for easy tuning */
width:auto;
height:auto;
max-width:100%;
max-height:var(--tile-logo-max-height,100%); /* was 80%; 100% is ~25% larger */
object-fit:contain;
display:block;
}
.flip-tile-back{
background:#1a3a52; /* matches banner background */
color:#fff;
display:flex;
flex-direction:column;
align-items:center; /* center horizontally */
justify-content:center; /* center vertically */
padding:18px 16px;
text-align:center; /* center text baseline */
transform:rotateY(180deg);
overflow:hidden;
box-sizing:border-box;
height:100%;
width:100%;
}
/* Center-outwards layout for ALL service tiles */
.flip-tiles-grid .flip-tile .flip-tile-back{
justify-content:center; /* center vertically so content expands outward evenly */
align-items:center; /* center horizontally */
}
.flip-tiles-grid .flip-tile .flip-tile-back p{
text-align:center;
max-width:90%;
margin-left:auto;
margin-right:auto;
}
.flip-tile-back h3{display:none}
.flip-tile-back p{
margin:0;
color:#e6f2f8;
/* Initial base size - will be dynamically adjusted by JavaScript */
font-size: 0.9rem;
line-height: 1.5;
width:100%;
text-align:center;
overflow: hidden; /* Hide any overflow since JS will adjust size */
word-break: break-word;
hyphens: auto;
white-space: normal;
display:block;
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
font-weight: 400;
letter-spacing: 0.01em;
}
/* Transactions Carousel -------------------------------------------------------- */
.transactions-carousel{background:#1a3a52;padding:64px 0 80px 0;margin-top:48px;overflow:hidden;position:relative;margin-bottom:0}
.carousel-wrapper{position:relative;width:100%;overflow:hidden}
.carousel-track{display:flex;gap:32px;animation:scroll-left 40s linear infinite;will-change:transform}
.carousel-track:hover{animation-play-state:paused}
@keyframes scroll-left{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.carousel-card{background:#fff;
border-radius:8px;
padding:42px 32px;
min-width:400px;
max-width:400px;
min-height:320px;
flex-shrink:0;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,.15)
}
.carousel-card .card-logo{font-weight:700;font-size:1.5rem;color:#062534;margin-bottom:16px;min-height:54px;display:flex;align-items:center;justify-content:center}
.carousel-card .card-divider{width:100%;border:none;border-top:1.5px solid #d1d5db;margin:16px 0}
.carousel-card .card-amount{font-size:2.2rem;font-weight:700;color:#062534;margin-bottom:12px}
.carousel-card .card-company{font-weight:600;color:#062534;margin-bottom:12px;font-size:1.35rem}
.carousel-card .card-desc{color:#6b6b6b;font-size:1.2rem;line-height:1.5}
@media(max-width:600px){
.carousel-card{min-width:260px;max-width:260px;padding:24px 18px;min-height:auto}
.carousel-card .card-logo{font-size:1.1rem;min-height:40px;margin-bottom:12px}
.carousel-card .card-divider{margin:12px 0;border-top:1px solid #d1d5db}
.carousel-card .card-amount{font-size:1.6rem;margin-bottom:8px}
.carousel-card .card-company{font-size:1rem;margin-bottom:8px}
.carousel-card .card-desc{font-size:0.9rem}
}
/* Blog Articles Carousel (replaces IPO cards) -------------------------------- */
/* Blog carousel layout */
.blog-carousel { --carousel-edge-gutter: clamp(16px, 6vw, 48px); }
.blog-carousel .carousel-wrapper { position: relative; width: 100%; }
.blog-carousel .carousel-viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
outline: none;
/* Create visible gutters so first/last cards are not stuck to screen edges */
padding-left: var(--carousel-edge-gutter);
padding-right: var(--carousel-edge-gutter);
/* Ensure snap positions honor the same insets */
scroll-padding-left: var(--carousel-edge-gutter);
scroll-padding-right: var(--carousel-edge-gutter);
}
.blog-carousel .carousel-viewport::-webkit-scrollbar { display: none; }
.blog-carousel .carousel-track {
display: flex;
gap: 24px;
/* Side paddings moved to viewport to avoid double-gutters */
padding: 0 0 24px 0;
margin: 0;
list-style: none;
animation: none !important; /* Override old marquee animation */
}
.blog-carousel .carousel-slide {
scroll-snap-align: start;
flex: 0 0 100%;
}
@media (min-width: 700px) {
.blog-carousel .carousel-slide { flex-basis: calc(50% - 12px); }
/* Adjust service tile height for tablet to prevent text clipping */
.flip-tile{height:280px;} /* increase from base 240px on tablets */
/* Keep banner layout matching desktop on tablet */
.banner-inner{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1024px) {
.blog-carousel .carousel-slide { flex-basis: calc(33.333% - 16px); }
.flip-tile{height:var(--tile-height);} /* revert to default on desktop */
}
/* Tablet-specific adjustments (700px–1023px) */
@media (min-width:700px) and (max-width:1023px){
/* Fine-tune dropdown alignment for tablet in both headers */
:root{
--submenu-offset-normal-x: 8px; /* normal header dropdown alignment */
--submenu-offset-scrolled-x: 7px; /* scrolled header dropdown alignment */
}
/* Removed tablet-specific font override: unified base size now applies */
}
/* Section title + controls */
.blog-carousel-header {
display: flex;
align-items: center;
justify-content: center; /* centered by default */
flex-direction: column;
text-align: center;
gap: 16px;
padding: 0 24px 18px;
max-width: 100% !important; /* override .wrap max-width */
width: 100%; /* ensure full width */
}
.blog-carousel-title { color: #fff; font-size: 1.6rem; margin: 0; }
.blog-carousel-controls { display: flex; gap: 12px; margin-top: 8px; justify-content: center; }
.carousel-prev, .carousel-next {
width: 44px; height: 44px; min-width: 44px;
border: 2px solid rgba(255,255,255,.7);
background: transparent; color: #fff;
border-radius: 50%;
display: grid; place-items: center;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.2s ease;
}
.carousel-prev:hover, .carousel-next:hover {
background: rgba(255,255,255,.15);
border-color: #fff;
}
.carousel-prev:focus-visible, .carousel-next:focus-visible {
outline: 3px solid rgba(32,198,255,.6);
outline-offset: 2px;
}
/* Dot pagination removed per request */
/* Card look (extends what you already have) */
.carousel-card.carousel-post{
background:#0f2636; /* darker panel for contrast on banner-blue background */
color:#eaf6fb;
border:1px solid rgba(255,255,255,0.08);
display: flex;
flex-direction: column;
}
.carousel-card.carousel-post .card-image{
width:100%;
aspect-ratio: 16 / 9;
border-radius:6px;
overflow:hidden;
margin-bottom:14px;
background:#0b1c29; /* fallback */
}
.carousel-card.carousel-post .card-image img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-card.carousel-post .card-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.carousel-card.carousel-post .card-chip {
display: inline-block;
padding: 4px 10px;
border: 1px solid rgba(255,255,255,.35);
border-radius: 999px;
font-size: .75rem;
color: #d7ecf7;
font-weight: 600;
}
.carousel-card.carousel-post .card-tags { display: inline-flex; gap: 8px; }
.carousel-card.carousel-post .card-tag {
font-style: normal;
color: #9fd9f5;
font-size: .78rem;
}
.carousel-card.carousel-post .card-title{
font-weight:800;
font-size:1.15rem;
color:#ffffff;
margin:4px 0 8px 0;
line-height:1.3;
}
.carousel-card.carousel-post .card-title a {
color: #fff;
text-decoration: none;
position:relative;
}
/* Underline animation for scrolled header (center-out similar to normal state) */
.site-header.scrolled .main-navigation .menu li a::after {
content:'';
position:absolute;
left:50%;
bottom:0;
width:100%;
height:2px;
background:#0a2e4a; /* dark blue underline */
transform:translateX(-50%) scaleX(0);
transform-origin:center;
transition:transform .25s cubic-bezier(.2,.9,.3,1);
opacity:.9;
}
.site-header.scrolled .main-navigation .menu li a:hover::after,
.site-header.scrolled .main-navigation .menu li.current-menu-item > a::after {
transform:translateX(-50%) scaleX(1);
}
.carousel-card.carousel-post .card-title a:hover {
text-decoration: underline;
}
/* Line clamps */
.carousel-card.carousel-post .card-title,
.carousel-card.carousel-post .card-excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.carousel-card.carousel-post .card-title {
-webkit-line-clamp: 2;
line-clamp: 2;
}
.carousel-card.carousel-post .card-excerpt {
-webkit-line-clamp: 3;
line-clamp: 3;
color: #d7ecf7;
line-height: 1.6;
font-size: 0.98rem;
margin-bottom: 12px;
}
.carousel-card.carousel-post .card-meta{
font-size:0.9rem;
color:#b9d5e4;
margin-bottom:12px;
}
/* Ghost/link CTA */
.carousel-card.carousel-post .card-ghost-link {
margin-top: auto;
align-self: flex-start;
color: #eaf6fb;
text-decoration: none;
position: relative;
font-weight: 700;
letter-spacing: .3px;
font-size: 0.95rem;
}
.carousel-card.carousel-post .card-ghost-link::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: rgba(255,255,255,.6);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s;
}
.carousel-card.carousel-post .card-ghost-link:hover::after,
.carousel-card.carousel-post .card-ghost-link:focus-visible::after {
transform: scaleX(1);
}
.carousel-card.carousel-post .card-ghost-link:focus-visible {
outline: 2px solid rgba(32,198,255,.8);
outline-offset: 4px;
}
/* Make sure this carousel does not auto-scroll (override any previous animation) */
.blog-carousel .carousel-track { animation: none !important; }
/* Responsive adjustments for blog carousel */
/* Header is centered by default; removed redundant 768px override */
/* Feature Section -------------------------------------------------------------- */
.feature-section{
background:#f8f9fa;
padding:var(--feature-section-padding) 0; /* vertical whitespace controlled by variable */
margin-top:0; /* no overlap upward */
position:relative;
z-index:auto;
overflow:hidden; /* ensure image doesn't escape horizontally */
}
.feature-content{
max-width:1200px;
margin:0 auto;
padding:0 32px 0 0; /* remove left padding so image can enlarge/bleed */
display:grid;
grid-template-columns:var(--feature-image-column) var(--feature-text-column);
gap:72px; /* breathing room between image and text */
align-items:center; /* vertically center image with text content */
position:relative;
}
/* Feature image sized by variables for easy adjustments */
.feature-image{
position:relative;
width:100%;
align-self:center; /* center align with text content */
background:#f8f9fa; /* subtle background in case of letterboxing */
border-radius:var(--feature-image-radius);
box-shadow:0 10px 28px rgba(0,0,0,.14);
overflow:hidden; /* contain image within bounds */
}
.feature-image img{
width:100%;
height:auto; /* natural height based on image aspect ratio */
display:block;
}
@media (min-width:1024px){
.feature-image{margin-left:calc(-1 * var(--feature-image-bleed-left));width:calc(100% + var(--feature-image-bleed-left));}
}
.feature-text{
padding:80px 0; /* restore vertical padding inside text column */
}
.feature-text h2{font-size:2.5rem;color:#062534;margin:0 0 24px;font-weight:700;line-height:1.2}
.feature-text .feature-icon{display:none}
.feature-text p{font-size:1.05rem;color:#4a5568;line-height:1.8;margin-bottom:16px}
@media(max-width:900px){
.feature-content{grid-template-columns:1fr;gap:32px;justify-items:center;padding:0 var(--feature-section-mobile-x-padding)}
/* Reorder for mobile: text first, image second */
.feature-text{grid-row:1;padding:16px 0 0;text-align:center}
.feature-image{grid-row:2;justify-self:center}
.feature-text h2{font-size:2rem}
}
@media(max-width:600px){
.feature-section{padding:var(--feature-section-padding) 0;margin-top:0}
.feature-text h2{font-size:1.75rem}
.feature-text p{font-size:0.95rem}
}
@media(max-width:1000px){
/* stack left block and right-side contact on smaller screens */
.left-block{position:relative;left:0;top:0;width:100%;padding:12px 16px}
.topbar-inner{padding:8px 16px 0 0}
.nav-inner{justify-content:flex-start}
}
@media(max-width:600px){
.hero-inner{flex-direction:column}
.content-wrap{flex-direction:column}
.footer-inner{flex-direction:column}
}
/* Secondary banner that sits under the feature section and overlaps its bottom edge */
.feature-banner{
/* Place cleanly after the feature section with no overlap */
margin-top:0;
position:relative;
z-index:auto;
}
/* CTA Section (Call to Action) ------------------------------------------------- */
.cta-section{
background:#000;
color:#fff;
padding:32px 0;
position:relative;
z-index:15; /* above footer */
}
.cta-inner{
max-width:1200px;
margin:0 auto;
padding:0 40px;
display:flex;
align-items:center;
justify-content:center; /* center content since CTA button was removed */
gap:32px;
}
.cta-text{
flex:1;
font-size:0.95rem;
color:#fff;
line-height:1.6;
text-align:center;
}
.cta-button {
flex: 0 0 auto;
display: inline-block;
padding: 12px 36px; /* match Florida button */
background: transparent; /* transparent base */
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 0.9rem; /* match Florida button */
letter-spacing: 0.8px; /* match Florida button */
border: 2px solid rgba(255,255,255,0.6); /* match Florida button outline */
border-radius: 0;
transform: skewX(-8deg);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
font-style: italic;
white-space: nowrap;
box-shadow: none;
}
/* Background fill animation from bottom - using professional blue */
.cta-button::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: #2563eb; /* professional blue shade */
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.cta-button span {
position: relative;
z-index: 1;
font-style: italic;
}
/* Desktop/Tablet: hover fills and straightens */
@media (hover: hover) and (pointer: fine) {
.cta-button:hover,
.cta-button:focus-visible {
transform: skewX(0deg) scale(1.05);
border-color: #2563eb;
color: #fff;
}
.cta-button:hover::before,
.cta-button:focus-visible::before { height: 100%; }
}
/* Mobile: tap/active fills with slight press */
@media (max-width: 600px) {
.cta-button{ padding:10px 28px; font-size:0.85rem; }
.cta-button:active {
transform: skewX(0deg) scale(0.98);
border-color: #2563eb;
color: #fff;
}
.cta-button:active::before { height: 100%; }
}
/* Hero Button - dark blue background (different from transparent CTA button) */
.hero-button {
display: inline-block;
padding: 12px 36px;
background: #0a3556; /* dark blue background */
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.8px;
border: 2px solid #0a3556;
border-radius: 0;
transform: skewX(-8deg);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
font-style: italic;
white-space: nowrap;
box-shadow: none;
}
.hero-button::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: #2563eb;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.hero-button span {
position: relative;
z-index: 1;
font-style: italic;
}
/* Desktop/Tablet: hover fills and straightens */
@media (hover: hover) and (pointer: fine) {
.hero-button:hover,
.hero-button:focus-visible {
transform: skewX(0deg) scale(1.05);
border-color: #2563eb;
color: #fff;
}
.hero-button:hover::before,
.hero-button:focus-visible::before { height: 100%; }
}
/* Mobile: tap/active fills with slight press */
@media (max-width: 600px) {
.hero-button{ padding:10px 28px; font-size:0.85rem; }
.hero-button:active {
transform: skewX(0deg) scale(0.98);
border-color: #2563eb;
color: #fff;
}
.hero-button:active::before { height: 100%; }
}
/* Responsive CTA */
@media(max-width:768px){
.cta-inner{
flex-direction:column;
text-align:center;
padding:0 24px;
}
.cta-text{
font-size:0.9rem;
}
.cta-button{
padding:12px 36px; /* keep consistent with Florida button */
font-size:0.9rem;
}
}
/* Resources Page -------------------------------------------------------------- */
.resources-hero{
position:relative;
margin-top:-108.5px; /* pull hero under transparent header like homepage */
min-height:520px;
line-height:0; /* eliminate gaps around inline image */
}
.resources-hero-image{
width:100%;
height:520px;
display:block;
object-fit:cover;
object-position:center 55%;
}
/* Semi-transparent effect via overlay for readability (keeps text full opacity) */
.resources-hero_overlay{
position:absolute;
inset:0;
/* TO ADJUST HERO OPACITY: Change the last number in rgba(255,255,255,X) below.
Range: 0.0 (fully transparent) to 1.0 (fully opaque white).
Current: 0.78 (strong white filter for high text contrast) */
background:rgba(255,255,255,0.95);
pointer-events:none;
}
.resources-hero_content{
position:absolute;
inset:0;
display:flex;
align-items:flex-end; /* position text toward bottom */
justify-content:center;
padding:24px 24px 60px; /* extra bottom padding for spacing from edge */
}
.resources-hero_text{
max-width:1080px;
color:#ffffff;
text-align:center; /* updated per new requirement */
font-size:1.05rem; /* base retained; paragraph specific doubling below */
line-height:1.8;
text-shadow:0 1px 2px rgba(0,0,0,.25);
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.resources-hero_text p{
margin:0;
font-size:1.2rem; /* reverted size; adjust here */
line-height:1.65;
font-weight:400;
letter-spacing:.2px;
color:#0f2636; /* navy blue font color */
}
.resources-hero_text p + p{margin-top:1em}
@media(max-width:900px){
.resources-hero{min-height:420px}
.resources-hero-image{height:420px;object-position:center 52%}
.resources-hero_text{max-width:92%;}
.resources-hero_text p{font-size:0.95rem;line-height:1.5}
}
@media(max-width:699px){
.resources-hero{margin-top:0;min-height:auto}
.resources-hero-image{height:60vh;object-position:center 50%}
.resources-hero_content{padding:18px}
.resources-hero_text{max-width:680px;}
.resources-hero_text p{font-size:0.92rem;line-height:1.45}
}
/* Resources Tiles Grid -------------------------------------------------------- */
.resources-tiles{
padding:0; /* remove all padding to fill viewport */
background:#f8f9fa;
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.resources-tiles .tiles-wrap{max-width:100%;margin:0;padding:0} /* full width, no side padding */
.resources-tiles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media (max-width:1023px){.resources-tiles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.resources-tiles-grid{grid-template-columns:1fr;gap:0}}
.resources-tiles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0} /* unified gap - tiles attached */
@media (max-width:699px){.resources-tiles-grid{grid-template-columns:1fr;gap:0}} /* single column on mobile */
@media (max-width:699px){
/* Remove any residual gap between hero and firm banner on About & Services */
.about-banner--firm, .about-banner.about-banner--firm {margin-top:-2px;}
.about-hero, .services-hero {margin-bottom:0;}
}
.resource-tile{background:#1a3a52;color:#fff;border:1px solid rgba(0,0,0,.08);border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:36px 28px;box-shadow:0 2px 8px rgba(0,0,0,.08);position:relative;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease, background .25s ease;z-index:1;will-change:transform}
.resources-tiles-grid .resource-tile{border:0;box-shadow:none} /* attach tiles: remove visual separation */
.resource-tile:hover,
.resource-tile:focus-visible{background:#162f43;color:#fff;border-color:transparent;z-index:20;transform:translateY(-8px);box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 0 0 2px #0f2636}
/* Hover lift effect: tile rises with outer shadow; remains attached thanks to zero grid gap. */
.resource-tile img{width:80px;height:80px;object-fit:contain;display:block;margin:0 0 18px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.resource-tile{text-decoration:none} /* Remove underline from tile links */
.resource-tile h3{margin:0;font-size:0.95rem;line-height:1.35;font-weight:600;text-align:center;letter-spacing:.35px;text-decoration:none}
.resource-tile h3 span{display:block;font-weight:400;margin-top:4px;font-size:.82rem;opacity:.85}
@media (max-width:699px){
.resource-tile{padding:24px 18px}
.resource-tile img{width:70px;height:70px;margin-bottom:14px}
.resource-tile h3{font-size:0.95rem}
}
/* Alternating background colors navy / white across tiles */
.resources-tiles-grid .resource-tile:nth-child(even){background:#ffffff;color:#1a3a52}
.resources-tiles-grid .resource-tile:nth-child(even) h3{color:#1a3a52}
.resources-tiles-grid .resource-tile:nth-child(even) img{filter:none}
.resources-tiles-grid .resource-tile:nth-child(even):hover{background:#f0f4f8;color:#1a3a52;border-color:rgba(0,0,0,.35)}
/* IPO Page Sections ---------------------------------------------------------- */
.ipo-articles{padding:40px 0;background:#ffffff}
.ipo-articles .section-title{margin:0 0 20px;font-size:1.4rem;font-weight:700;color:#0f2636;text-align:left}
.ipo-articles .tiles-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.ipo-articles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:1023px){.ipo-articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.ipo-articles-grid{grid-template-columns:1fr}}
.ipo-card{background:#ffffff;color:#0f2636;border:1px solid rgba(0,0,0,.08);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:box-shadow .25s ease,transform .25s ease;height:100%}
.ipo-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.18);transform:translateY(-4px)}
.ipo-card-image{display:block;background:#f5f7fa;flex-shrink:0}
.ipo-card-image img{display:block;width:100%;height:260px;object-fit:cover}
.ipo-card-body{padding:18px 18px 22px;display:flex;flex-direction:column;flex-grow:1}
.ipo-card-title{margin:0 0 10px;font-size:1.05rem;line-height:1.35;min-height:calc(1.05rem * 1.35 * 2);display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@supports not (-webkit-line-clamp: 2){
.ipo-card-title{display:block;max-height:calc(1.05rem * 1.35 * 2);overflow:hidden}
}
.ipo-card-title a{color:#0f2636;text-decoration:none}
.ipo-card-excerpt{margin:0 0 18px;color:#334e68;font-size:0.98rem;line-height:1.65;min-height:calc(0.98rem * 1.65 * 3);display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex-grow:1}
@supports not (-webkit-line-clamp: 3){
.ipo-card-excerpt{display:block;max-height:calc(0.95rem * 1.6 * 3);overflow:hidden}
}
.btn.btn-read{display:inline-block;background:#0f2636;color:#fff;text-decoration:none;padding:10px 14px;border-radius:4px;border:1px solid rgba(0,0,0,.08);transition:background .2s ease;margin-top:auto;align-self:flex-start}
.btn.btn-read:hover{background:#13364d}
.ipo-additional{padding:40px 0;background:#f8f9fa}
.ipo-additional .tiles-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.ipo-additional .section-title{margin:0 0 12px;font-size:1.4rem;font-weight:700;color:#0f2636}
.ipo-additional .section-lead{margin:0 0 16px;color:#0f2636;opacity:.9}
.ipo-additional .resource-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:699px){.ipo-additional .resource-links{grid-template-columns:1fr}}
.resource-link-item{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:14px 16px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.resource-link-title{margin:0 0 8px;font-weight:700;color:#0f2636;font-size:1rem}
.resource-link-url{display:block;color:#2563eb;text-decoration:none;word-break:break-all}
.resource-link-url:hover{color:#0a5a8a;text-decoration:underline}
/* Going Public page (mini sections) ----------------------------------------- */
.gp-articles{padding:40px 0;background:#ffffff}
.gp-articles .tiles-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.gp-section{margin:28px 0 42px}
.gp-block-title{margin:0 0 6px;font-size:1.35rem;font-weight:800;color:#0f2636}
.gp-block-text{margin:0 0 16px;color:#4a5568;line-height:1.7;max-width:90ch}
/* Reuse ipo-articles-grid for the three-card layout per section */
.gp-section .ipo-articles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:1023px){.gp-section .ipo-articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.gp-section .ipo-articles-grid{grid-template-columns:1fr}}
/* Additional resources (button group) */
.gp-additional{padding:40px 0;background:#f8f9fa}
.gp-additional .tiles-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.gp-additional .section-title{margin:0 0 12px;font-size:1.4rem;font-weight:700;color:#0f2636}
.gp-additional .section-lead{margin:0 0 18px;color:#0f2636;opacity:.9}
.gp-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:699px){.gp-links{grid-template-columns:1fr}}
.gp-links .resource-link-item{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:14px 16px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.gp-links .resource-link-title{margin:0 0 8px;font-weight:700;color:#0f2636;font-size:1rem}
.gp-links .resource-link-url{display:block;color:#2563eb;text-decoration:none;word-break:break-all}
.gp-links .resource-link-url:hover{color:#0a5a8a;text-decoration:underline}
/* About Us Page -------------------------------------------------------------- */
.about-hero{position:relative;margin-top:-108.5px;min-height:520px;line-height:0;/* ensure next banner does not overlap hero */margin-bottom:0}
.about-hero-image{width:100%;height:520px;object-fit:cover;object-position:center 50%;display:block}
.about-hero_overlay{position:absolute;inset:0;background:transparent}
@media(max-width:900px){.about-hero{min-height:420px;margin-bottom:0}.about-hero-image{height:420px}}
@media(max-width:699px){.about-hero{margin-top:0}.about-hero-image{height:55vh}}
.about-banner{background:#1a3a52;color:#fff;padding:34px 24px;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.about-banner--firm{margin-top:0}
.about-banner + .about-section{margin-top:34px}
.about-banner-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:42px}
.about-banner-left{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.about-banner-logo{width:120px;height:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.about-banner-photo{width:160px;height:160px;object-fit:cover;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.about-banner-text-group{flex:1 1 auto;text-align:center}
.about-banner-title{margin:0 0 10px;font-size:2.2rem;letter-spacing:.8px;font-weight:800;text-transform:uppercase;line-height:1.15;text-align:justify}
.about-banner-subtitle{margin:0;font-size:1rem;font-weight:500;letter-spacing:.5px;line-height:1.5;text-align:justify}
.about-founder-heading{margin:0 0 8px;font-size:1.9rem;font-weight:700;letter-spacing:.5px;line-height:1.2;text-align:justify}
.about-founder-subheading{margin:0;font-size:1rem;font-weight:500;line-height:1.5;text-align:justify}
@media(max-width:1023px){
.about-banner-inner{flex-direction:row;gap:28px}
.about-banner-title{font-size:1.9rem}
.about-founder-heading{font-size:1.7rem}
}
@media(max-width:699px){
.about-banner-inner{flex-direction:column;text-align:center;gap:22px}
.about-banner-logo{width:100px}
.about-banner-photo{width:140px;height:140px}
.about-banner-title{font-size:1.6rem;text-align:center}
.about-banner-subtitle{text-align:center}
.about-founder-heading{font-size:1.45rem;text-align:center}
.about-founder-subheading{text-align:center}
}
/* Make the founder banner a centered card matching text width */
.about-banner--founder{background:transparent;padding:22px 0}
.about-banner--founder .about-banner-inner{max-width:1080px;background:#1a3a52;border-radius:10px;padding:24px 28px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
@media(max-width:699px){
.about-banner--founder{padding:16px 12px}
.about-banner--founder .about-banner-inner{padding:20px}
}
.about-section{padding:0 0 40px;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.about-section:last-of-type{padding-bottom:60px}
.about-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.about-wrap p{margin:0 0 18px;color:#334e68;font-size:1.02rem;line-height:1.75}
.about-heading{margin:4px 0 18px;font-size:1.5rem;font-weight:800;color:#0f2636;letter-spacing:.4px}
.about-bullets{list-style:none;margin:0 0 22px;padding:0}
.about-bullets > li{position:relative;padding-left:20px;margin:0 0 10px;color:#0f2636;font-weight:500;line-height:1.55}
.about-bullets > li:before{content:'\2022';position:absolute;left:0;top:0;color:#2563eb;font-size:1.1rem;line-height:1.2}
.about-sub-bullets{list-style:none;margin:10px 0 18px;padding:0}
.about-sub-bullets li{position:relative;padding-left:18px;margin:0 0 10px;color:#334e68;font-weight:400;font-size:.95rem;line-height:1.5}
.about-sub-bullets li:before{content:'\25E6';position:absolute;left:0;top:0;color:#0f2636;font-size:.85rem;line-height:1.3}
@media(max-width:699px){
.about-wrap p{font-size:.95rem;line-height:1.55}
.about-heading{font-size:1.35rem}
}
/* Services Page -------------------------------------------------------------- */
.services-hero{position:relative;margin-top:-108.5px;min-height:520px;line-height:0;margin-bottom:0}
.services-hero-image{width:100%;height:520px;object-fit:cover;object-position:center 50%;display:block}
.services-hero_overlay{position:absolute;inset:0;background:transparent}
@media(max-width:900px){.services-hero{min-height:420px}.services-hero-image{height:420px}}
@media(max-width:699px){.services-hero{margin-top:0}.services-hero-image{height:55vh}}
.services-section{padding:0 0 40px;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.services-heading{margin:8px 0 20px;font-size:1.8rem;font-weight:900;color:#0f2636;letter-spacing:.6px;text-transform:uppercase;text-align:center}
.services-block{margin:0 0 18px}
.services-title{margin:0 0 8px;color:#0f2636;font-weight:800;font-size:1.15rem;letter-spacing:.3px}
.services-block p{margin:0 0 12px;color:#334e68;line-height:1.75;font-size:1.02rem}
/* ============================================================================
TABLET RESPONSIVE STYLES (768px - 1024px)
============================================================================ */
/* Tablet: Large tablets and landscape iPads (700px–1023px) */
@media (min-width:700px) and (max-width: 1023px) {
/* CSS Variables for Tablets */
:root {
--firm-name-size: 0.95rem;
--firm-services-size: 0.72rem;
--tile-height: 220px;
}
/* Header 1 (Normal): switch to a compact grid so content doesn't overflow */
.topbar {
display: grid;
grid-template-columns: auto 1fr auto; /* left: logo+firm, middle: spacer, right: contact */
align-items: center;
gap: 10px;
padding: 8px 12px 0 12px;
}
/* Make left block participate in flow (no absolute on tablets) */
.left-block {
position: static;
display: flex;
align-items: center;
}
/* Ensure contact sits at the far right of the grid */
.topbar-inner {
grid-column: 3;
justify-content: flex-end;
padding: 8px 0 0 0;
}
/* Header: Normal State - More aggressive size reductions */
.left-block .site-logo img {
max-height: 42px;
}
.left-block {
gap: 8px;
padding: 8px 10px;
}
.topbar-inner {
padding: 10px 16px 0 0;
}
.contact-top {
font-size: 0.72rem;
}
.contact-top strong {
font-size: 0.85rem;
}
.contact-top a {
font-size: 1rem;
}
/* Navigation */
.nav-inner {
padding: 4px 10px 6px 10px;
justify-content: center; /* center the menu under the topbar */
}
.main-navigation .menu {
gap: 10px;
flex-wrap: wrap; /* allow wrapping instead of overflowing */
}
.main-navigation .menu li a {
padding: 6px 8px;
font-size: 0.8rem;
}
.main-navigation .menu > li + li::before {
margin: 0 6px;
font-size: 0.7rem;
}
/* Scrolled Header for Tablets - Properly centered with consistent sizing */
.site-header.scrolled .nav-inner {
padding: 8px 16px;
gap: 12px;
justify-content: space-between;
align-items: center;
}
.site-header.scrolled .scrolled-logo-link {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.site-header.scrolled .main-navigation {
flex: 1;
display: flex;
justify-content: center;
}
.site-header.scrolled .main-navigation .menu {
display: flex;
gap: 0;
align-items: center;
}
.site-header.scrolled .main-navigation .menu li a {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
padding: 10px 12px;
letter-spacing: 0.4px;
line-height: 1.2;
}
.site-header.scrolled .main-navigation .menu > li + li::before {
content: '|';
padding: 0 4px;
font-size: 0.7rem;
line-height: 1;
display: flex;
align-items: center;
}
.site-header.scrolled .scrolled-phone {
font-size: 0.9rem;
font-weight: 700;
line-height: 1.2;
flex-shrink: 0;
}
/* Hero Section */
.hero {
min-height:400px; /* Increased from 350px to show table */
padding: 30px 0;
/* Pull hero farther up so its background sits fully behind the header (removes top white band) */
margin-top: -120px;
}
.hero-image-full {
height: 400px; /* Match min-height */
object-position: center 50%; /* Adjusted to show table area */
}
.hero-inner {
padding-top: 180px; /* Increased from 150px */
padding-left: 24px;
padding-right: 24px;
}
.hero-copy {
padding-left: 16px;
max-width: 90%;
}
.hero-copy h1 {
font-size: 2.8rem;
letter-spacing: -1.4px;
margin: 0 0 14px;
}
.lead {
font-size: 1rem;
margin-bottom: 20px;
}
/* Hero Banner */
.hero-banner {
height: 140px;
margin-top: -30px; /* Remove white gap between hero and banner on tablets */
}
.banner-logo {
max-height: 120px; /* Doubled from 60px for better visibility on tablets */
}
.banner-text {
font-size: 1.2rem;
}
/* Service Tiles */
.flip-tile {
height: var(--tile-height);
}
.flip-tiles-grid {
gap: 20px;
}
.flip-tile-front img {
max-width: 85%;
max-height: 75%;
}
.flip-tile-back {
padding: 16px;
}
/* Removed desktop-only font override: unified base 0.875rem now applies across all breakpoints */
/* Transactions Carousel */
.transactions-carousel {
padding: 48px 0 60px 0;
}
.carousel-card {
min-width: 320px;
max-width: 320px;
padding: 32px 24px;
min-height: 280px;
}
.carousel-card .card-logo {
font-size: 1.3rem;
min-height: 48px;
}
.carousel-card .card-amount {
font-size: 1.85rem;
}
.carousel-card .card-company {
font-size: 1.15rem;
}
.carousel-card .card-desc {
font-size: 1rem;
}
/* Feature Section - Flip layout on tablets (text top, image bottom) */
.feature-content {
padding: 0 20px;
gap: 48px;
grid-template-columns: 1fr;
grid-template-areas:
"text"
"image";
}
.feature-text {
grid-area: text;
}
.feature-image {
grid-area: image;
margin-left: 0;
width: 100%;
}
.feature-text {
padding: 60px 0;
}
.feature-text h2 {
font-size: 2.2rem;
}
.feature-text p {
font-size: 1rem;
}
/* Footer */
.site-footer {
min-height: 600px;
}
.footer-content {
gap: 32px;
padding: 60px 32px;
}
.footer-logo img {
max-height: 90px;
}
.footer-firm-name {
font-size: 1.05rem;
}
.footer-firm-services {
font-size: 0.85rem;
}
.footer-section-title {
font-size: 1.1rem;
}
.footer-address-text {
font-size: 0.95rem;
}
.footer-phone-link {
font-size: 1rem;
}
.footer-social-btn {
width: 42px;
height: 42px;
}
.footer-social-btn svg {
width: 20px;
height: 20px;
}
.footer-florida-btn {
padding: 11px 32px;
font-size: 0.85rem;
}
/* CTA Section - Keep horizontal on larger tablets */
.cta-section {
padding: 28px 0;
}
.cta-inner {
padding: 0 32px;
gap: 24px;
}
.cta-text {
font-size: 0.9rem;
}
.cta-button {
padding: 14px 38px;
font-size: 1rem;
}
/* Adjust wrap max-width for tablets */
.wrap {
max-width: 960px;
padding: 20px;
}
}
/* Tablet: Smaller tablets and large phones in landscape (769px - 900px) */
@media (min-width: 769px) and (max-width: 900px) {
/* Hero adjustments for medium tablets */
.hero {
min-height: 360px; /* Increased from 320px */
}
.hero-image-full {
height: 360px;
object-position: center 52%; /* Show table area */
}
.hero-inner {
padding-top: 160px; /* Increased from 135px */
}
.hero-copy h1 {
font-size: 2.4rem;
}
.lead {
font-size: 0.95rem;
}
/* Feature section already switches to 1-column at 900px */
.feature-text h2 {
font-size: 2rem;
}
/* CTA: Start considering vertical stack */
.cta-inner {
gap: 20px;
}
.cta-button {
padding: 13px 34px;
font-size: 0.95rem;
}
/* Hide the firm services tagline to free width on medium tablets */
.firm-services { display: none; }
}
/* Tablet Portrait & Large Phones (700px–768px) - Enhanced */
@media (min-width:700px) and (max-width: 768px) {
/* Header becomes more compact */
.left-block .site-logo img {
max-height: 36px;
}
/* Keep grid behavior on small tablets as well */
.topbar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
padding: 6px 8px 0 8px;
}
.left-block { position: static; }
.topbar-inner { grid-column: 3; padding: 6px 0 0 0; }
.left-block {
gap: 6px;
padding: 6px 8px;
}
.firm-name {
font-size: 0.85rem;
}
.firm-services {
font-size: 0.65rem;
}
.topbar-inner {
padding: 8px 12px 0 0;
}
.contact-top {
font-size: 0.65rem;
}
.contact-top strong {
font-size: 0.75rem;
}
.contact-top a {
font-size: 0.9rem;
}
.main-navigation .menu {
gap: 8px;
flex-wrap: wrap;
}
.main-navigation .menu li a {
padding: 5px 6px;
font-size: 0.72rem;
}
.main-navigation .menu > li + li::before {
margin: 0 4px;
font-size: 0.65rem;
}
/* Scrolled header at 768px */
.site-header.scrolled .nav-inner {
padding: 5px 12px;
gap: 12px;
}
.site-header.scrolled .nav-inner::before {
width: 26px;
height: 26px;
}
.site-header.scrolled .main-navigation .menu li a {
font-size: 0.55rem;
padding: 6px 8px;
letter-spacing: 0.2px;
}
.site-header.scrolled .main-navigation .menu > li + li::before {
padding: 0 1px;
font-size: 0.55rem;
}
.site-header.scrolled .scrolled-phone {
font-size: 0.8rem;
}
/* Hero for smaller tablets */
.hero {
min-height: 330px; /* Increased from 290px */
padding: 24px 0;
/* Ensure no top gap on small tablets */
margin-top: -110px;
}
.hero-image-full {
height: 330px;
object-position: center 50%; /* Show table area */
}
.hero-inner {
padding-top: 145px; /* Increased from 120px */
padding-left: 16px;
padding-right: 16px;
}
.hero-copy {
padding-left: 8px;
}
.hero-copy h1 {
font-size: 2.2rem;
letter-spacing: -1.2px;
}
.lead {
font-size: 0.9rem;
margin-bottom: 18px;
}
.cta-button {
padding: 12px 32px;
font-size: 0.95rem;
}
/* Hero Banner */
.hero-banner {
height: 120px;
}
.banner-logo {
max-height: 50px;
}
.banner-text {
font-size: 1.05rem;
}
/* Service tiles at 768px should be 2 columns */
.flip-tiles-grid {
gap: 16px;
}
.flip-tile {
height: 200px;
}
/* Carousel */
.carousel-card {
min-width: 280px;
max-width: 280px;
padding: 28px 20px;
min-height: 260px;
}
.carousel-card .card-logo {
font-size: 1.15rem;
}
.carousel-card .card-amount {
font-size: 1.6rem;
}
.carousel-card .card-company {
font-size: 1rem;
}
.carousel-card .card-desc {
font-size: 0.95rem;
}
/* Footer */
.footer-content {
gap: 28px;
padding: 50px 24px;
}
.footer-logo img {
max-height: 75px;
}
/* CTA stacks vertically at 768px (already defined above) */
}
/* =============================
MOBILE 699px and below (align with consolidated breakpoints)
============================= */
@media (max-width: 699px) {
/* Hide desktop header on mobile (keep nav for drawer) */
.topbar { display: none !important; }
/* Collapse nav-wrap so it doesn't create whitespace, but keep drawer nav rendered */
.site-header .nav-wrap{height:0;}
.site-header .nav-wrap .nav-inner{height:0;padding:0;}
/* Mobile sticky header: 3-button bar */
.mobile-header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: #0a5a8a;
height: 70px;
align-items: stretch;
}
.mobile-menu-btn, .mobile-email-btn, .mobile-call-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-decoration: none;
color: #fff;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.5px;
border: none;
background: transparent;
cursor: pointer;
transition: background 0.2s ease;
}
.mobile-menu-btn { border-right: 1px solid rgba(255,255,255,0.2); }
.mobile-email-btn { border-right: 1px solid rgba(255,255,255,0.2); }
.mobile-menu-btn:active, .mobile-email-btn:active, .mobile-call-btn:active {
background: rgba(255,255,255,0.1);
}
.mobile-menu-btn:focus-visible, .mobile-email-btn:focus-visible, .mobile-call-btn:focus-visible {
outline: 3px solid rgba(255,255,255,0.6);
outline-offset: -3px;
}
/* SVG icons for mobile header buttons */
.mobile-header .mobile-icon {
width: 24px;
height: 24px;
display: block;
stroke: currentColor;
flex-shrink: 0;
}
/* Adjust body padding for fixed mobile header */
body { padding-top: 70px; }
/* Hide progress bar on mobile */
.scroll-progress-bar{display:none}
/* Full-width drawer panel */
.main-navigation {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
max-width: none;
background: #153a4a; /* dark slate */
transform: translateX(-100%);
transition: transform 0.25s ease;
z-index: 9998; /* keep below mobile header */
box-shadow: 2px 0 12px rgba(0,0,0,0.25);
padding: 70px 0 32px 0; /* space for drawer topbar */
display: block;
overflow-y: auto;
}
/* Drawer top bar inside panel */
/* Removed mobile drawer topbar - replaced by inline Home menu item */
.main-navigation .menu { display: block; gap: 0; list-style: none; margin: 0; padding: 8px 0; }
.main-navigation .menu { display: block; gap: 0; list-style: none; margin: 0; padding: 8px 0; }
.main-navigation .menu li { display: block; border-bottom:1px solid rgba(255,255,255,0.08); }
/* Remove white separator line under the Languages item on mobile */
.main-navigation .menu li.languages{ border-bottom:none !important; }
.main-navigation .menu li a {
display: block;
padding: 16px 18px;
font-size: 1rem;
text-transform: none;
color: #e5eef2;
text-decoration: none;
border: 0;
}
/* Remove desktop underline hover effect inside drawer */
.main-navigation .menu li a::after{display:none}
/* EXCEPTION: Show arrow for Languages dropdown */
.main-navigation .menu .languages > a::after{display:inline-block !important;}
.main-navigation .menu li a:hover{color:#fff}
.main-navigation .menu > li + li::before { display: none; }
/* Languages parent button: add small down arrow beside text with transition */
.main-navigation .menu .languages > a{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
gap: 8px; /* reduce excessive gap between text and arrow */
}
.main-navigation .menu .languages > a::after{
content:'\25BE'; /* small down-pointing triangle - visible by default */
display:inline-block;
margin-left:0; /* removed auto margin to use gap instead */
flex-shrink:0; /* prevent arrow from shrinking */
font-size:0.85rem;
color:#e5eef2;
transition:transform 0.3s ease;
transform-origin:center;
opacity:1; /* ensure arrow is always visible */
/* Override desktop underline styling */
position:static;
background:none;
height:auto;
width:auto;
transform:none;
left:auto;
bottom:auto;
}
/* Rotate arrow when submenu is open */
.main-navigation .menu .languages.open > a::after{
transform:rotate(180deg);
}
/* Visual feedback removed per requirement - no background change on tap */
.main-navigation .menu .languages.open > a{
background:transparent;
}
.main-navigation .sub-menu {
position: static;
display: none;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
list-style: none;
background: #153a4a;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
/* Show submenu with smooth animation when parent has .open class */
.main-navigation .menu .menu-item-has-children.open > .sub-menu {
display: block;
max-height: 500px; /* Large enough for content */
padding: 6px 0 6px 22px; /* add padding when open */
}
.main-navigation .sub-menu li a {
font-size: 0.95rem;
padding: 14px 16px 14px 10px;
color: #e5eef2;
border-bottom:1px solid rgba(255,255,255,0.08);
display: block;
}
/* Stronger override for Languages dropdown - ensure it embeds under parent */
.main-navigation .menu .languages > .sub-menu{
position: static !important;
left: auto !important;
right: auto !important;
transform: none !important;
background: #153a4a !important;
border: none !important;
box-shadow: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
/* Padding is handled by the .open state above for smooth animation */
max-height:0; /* accordion collapsed */
overflow:hidden;
}
/* Submenu links match parent text color */
.main-navigation .menu .languages > .sub-menu li a{
color: #e5eef2 !important;
font-size: 0.95rem;
padding: 14px 16px 14px 10px;
border-bottom:1px solid rgba(255,255,255,0.08);
}
/* Hide desktop-only arrow element */
.main-navigation .menu .languages .dropdown-arrow{display:none !important}
.mobile-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 9997; /* below header and drawer */
}
body.mobile-open .main-navigation { transform: translateX(0); }
/* Elevate mobile header above drawer & overlay */
body.mobile-open .mobile-header { position:fixed; z-index:10002; }
body.mobile-open .mobile-overlay { opacity: 1; pointer-events: auto; }
/* Hide fixed mobile header bar when drawer is open so drawer topbar (with HOME) is visible */
/* Removed rule that hid mobile header while drawer open */
/* body.mobile-open .mobile-header { display: none !important; } */
/* Prevent body scroll when mobile menu is open */
body.mobile-open { overflow: hidden; height: 100vh; }
/* Center all text on mobile */
.hero-copy, .hero-copy h1, .hero-copy .lead, .hero-copy .button {
text-align: center;
}
/* Removed .hero-banner, .banner-inner, .banner-text from here - they have their own responsive rules */
.flip-tiles-grid, .flip-tile-front h3, .flip-tile-back p {
text-align: center;
}
.feature-text, .feature-text h2, .feature-text p {
text-align: center;
}
.footer-content, .footer-logo, .footer-firm-name, .footer-firm-services,
.footer-section-title, .footer-address-text, .footer-phone-link {
text-align: center;
}
.cta-inner, .cta-text, .cta-button {
text-align: center;
}
/* Mobile Header */
.firm-services { display: none; }
.left-block .site-logo img { max-height: 32px; }
.firm-name { font-size: 0.8rem; }
.contact-top { font-size: 0.6rem; }
.contact-top a { font-size: 0.85rem; }
/* Hero compact */
.hero { margin-top: 0; padding: 0; min-height: auto; }
.hero-inner { flex-direction: column; padding-top: 40px; }
/* Reduce hero image height on mobile to show content below */
.hero-image-full {
width:100%;
height: 60vh; /* Increased from 55vh to show table */
display:block;
object-fit: cover;
object-position: center 50%; /* Adjusted to show table and office space */
}
.hero-copy { padding-left: 10px; padding-right: 10px; max-width: 100%; }
.hero-copy h1 { font-size: 1.9rem; letter-spacing: -1px; margin-bottom: 12px; }
.lead { font-size: 0.95rem; margin-bottom: 16px; }
.hero-banner { height: auto; min-height: 160px; margin-top: 0; }
/* Services tiles: single column */
.flip-tiles-grid { grid-template-columns: 1fr; gap: 14px; }
.flip-tile { height: 200px; } /* increased from 190px for better text fitting */
.flip-tile-back { padding: 14px 12px; } /* adjusted padding for mobile */
/* Carousel: touch scroll with snap */
.carousel-wrapper { overflow: hidden; }
.carousel-track { animation: scroll-left 40s linear infinite; gap: 16px; }
.carousel-card { min-width: 260px; }
.transactions-carousel { margin-top: 36px; }
/* Feature already single column; tighten spacing */
.feature-section { padding: 48px 16px; margin-top: 0; }
.feature-text { padding: 24px 0; }
.feature-text h2 { font-size: 1.6rem; }
.feature-image { margin-left: 0; width: 100%; }
/* Feature banner spacing */
.feature-banner { margin-top: 0; }
/* Footer stack */
.footer-content { padding: 40px 18px; gap: 22px; }
.footer-logo img { max-height: 64px; }
.footer-section-title { font-size: 1rem; }
.footer-address-text, .footer-phone-link { font-size: 0.95rem; }
/* Disable desktop scrolled header on mobile */
.site-header.scrolled{position:static;box-shadow:none}
/* Keep nav-wrap visible when scrolled so dropdown menus remain accessible */
.site-header.scrolled .topbar{display:none !important}
/* Ensure nav-wrap retains height for hover dropdown positioning */
.site-header.scrolled .nav-wrap{display:block !important;height:auto}
.site-header.scrolled .nav-inner{padding:6px 24px}
.site-header.scrolled .main-navigation{flex:1}
/* Raise z-index for submenus explicitly (in case of new stacking contexts) */
.site-header.scrolled .main-navigation .menu .sub-menu{z-index:10001}
}
/* Final banner normalization: ensure tablet and desktop keep 3-column layout */
@media (min-width: 700px) {
.banner-inner { grid-template-columns: 1fr 1fr 1fr !important; }
/* Gap removed: hero and banner now sit flush without overlap */
}
/* Debug sentinel outlines removed (stable) */
/* Overrides: remove mobile Languages dropdown animation */
@media (max-width:699px){
.main-navigation .sub-menu{max-height:none!important;transition:none!important;}
.main-navigation .menu .menu-item-has-children.open > .sub-menu{max-height:none!important;transition:none!important;}
.main-navigation .menu .languages > a::after{transition:none!important;}
.main-navigation .menu .languages.open > a::after{transform:none!important;}
}