/* =========================================================== Hot Tub Doctor — Inventory Reduction Sale landing page Palette: navy / red / white / gold Mobile-first. No external fonts or libraries. =========================================================== */ :root{ --navy-900:#08182F; --navy-800:#0C2245; --navy-700:#123059; --navy-600:#1B4079; --red:#E01F26; --red-dark:#B81920; --gold:#FFC629; --gold-light:#FFDA6B; --blue:#22A8E0; --ink:#16202E; --muted:#5A6B80; --line:#DCE3EC; --tint:#F1F5FA; --white:#fff; --wrap:1200px; --r:14px; --shadow:0 10px 30px rgba(8,24,47,.10); --shadow-lg:0 18px 50px rgba(8,24,47,.20); --header-h:72px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--white); line-height:1.55; overflow-x:hidden; /* belt-and-braces: never scroll sideways */ } img{max-width:100%;height:auto;display:block} h1,h2,h3{line-height:1.05;margin:0;text-wrap:balance} p{margin:0} ul{margin:0;padding:0;list-style:none} a{color:inherit} address{font-style:normal} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px} .center{text-align:center} .nowrap{white-space:nowrap} /* --------------------------------------------------------------- COMEBACK WEEKEND TOGGLE Driven by data-weekend2 on the tag. "hidden" removes every mention of Aug 28–30 from the page; "shown" reveals them all. display:none (not visibility) so the dates are absent from the accessibility tree and from copied text, not merely invisible. NOTE: these two rules are ALSO inlined in in index.html, because this file is cached for 7 days and a stale copy would otherwise let the embargoed dates render. Keep both copies in sync. --------------------------------------------------------------- */ [data-weekend2="hidden"] .w2-only{display:none !important} [data-weekend2="shown"] .w1-only{display:none !important} /* With weekend 2 hidden the event grid holds 2 cards, not 3 — centre them instead of leaving a hole in the third column. */ @media (min-width:960px){ [data-weekend2="hidden"] .event-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px;margin-inline:auto; } } .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--gold);color:var(--navy-900);padding:12px 18px;font-weight:800;border-radius:0 0 8px 0; } .skip-link:focus{left:0} /* Anchor targets clear the sticky header */ [id]{scroll-margin-top:calc(var(--header-h) + 12px)} /* ---------- buttons ---------- */ .btn{ --btn-bg:var(--red); --btn-fg:#fff; display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:inherit; background:var(--btn-bg);color:var(--btn-fg); border:2px solid transparent;border-radius:999px; padding:15px 28px; font-size:1rem;font-weight:900;letter-spacing:.02em;text-transform:uppercase; text-decoration:none;cursor:pointer;text-align:center; transition:transform .14s ease, box-shadow .14s ease, background-color .14s ease; box-shadow:0 6px 18px rgba(224,31,38,.28); min-height:52px; } .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(224,31,38,.36)} .btn:active{transform:translateY(0)} .btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px} .btn--primary{--btn-bg:var(--red)} .btn--primary:hover{background:var(--red-dark)} .btn--red{--btn-bg:var(--red)} .btn--red:hover{background:var(--red-dark)} .btn--gold{--btn-bg:var(--gold);--btn-fg:var(--navy-900);box-shadow:0 6px 18px rgba(255,198,41,.35)} .btn--gold:hover{background:var(--gold-light);box-shadow:0 12px 28px rgba(255,198,41,.45)} .btn--outline{ --btn-bg:transparent;--btn-fg:var(--navy-800); border-color:currentColor;box-shadow:none; } .btn--outline:hover{background:var(--navy-800);color:#fff;box-shadow:var(--shadow)} .btn--ghost{--btn-bg:rgba(255,255,255,.14);--btn-fg:#fff;border-color:rgba(255,255,255,.5);box-shadow:none} .btn--ghost:hover{background:rgba(255,255,255,.24)} .btn--sm{padding:11px 20px;font-size:.82rem;min-height:44px} .btn--lg{padding:17px 34px;font-size:1.05rem} .btn--xl{padding:19px 34px;font-size:1.1rem;width:100%} .btn--block{width:100%} @media (min-width:560px){ .btn--xl{width:auto;padding-inline:48px;font-size:1.2rem} } .ico{width:1.1em;height:1.1em;fill:currentColor;flex:none} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:60; background:#fff; border-bottom:3px solid var(--red); box-shadow:0 2px 14px rgba(8,24,47,.10); } .header-inner{ min-height:var(--header-h); display:flex;align-items:center;justify-content:space-between;gap:12px; padding-block:10px; } .brand{display:block;flex:0 1 auto;min-width:0} .brand-logo{width:min(206px,48vw);height:auto} .header-cta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none} .header-cta__label{ font-size:.62rem;font-weight:800;letter-spacing:.10em;text-transform:uppercase; color:var(--muted);white-space:nowrap; } .phone-link{ display:inline-flex;align-items:center;gap:.45em; font-size:1.28rem;font-weight:900;color:var(--navy-800); text-decoration:none;letter-spacing:-.01em;white-space:nowrap; padding:4px 2px;border-radius:8px; } .phone-link:hover{color:var(--red)} .phone-link:focus-visible{outline:3px solid var(--red);outline-offset:2px} .phone-link .ico{color:var(--red)} /* On small screens the header collapses to logo + a red call pill */ @media (max-width:600px){ :root{--header-h:64px} .header-cta__label{display:none} .phone-link{ background:var(--red);color:#fff; padding:10px 16px;border-radius:999px;font-size:1rem; box-shadow:0 4px 12px rgba(224,31,38,.3); } .phone-link:hover{color:#fff;background:var(--red-dark)} .phone-link .ico{color:#fff} } @media (max-width:360px){ .phone-number{display:none} /* icon-only call button on very narrow phones */ .phone-link{padding:11px 14px} .phone-link .ico{width:1.35em;height:1.35em} } /* ---------- hero ---------- */ .hero{ position:relative; background:var(--navy-900); /* fallback while the photo loads */ padding-block:44px 52px; overflow:hidden; } /* Layered with positive z-indexes: photo (0) < overlay (1) < content (2). Negative z-index children are not reliably painted above the parent background in every engine, so avoid that pattern here. */ .hero__bg{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:0; } /* Dark enough for AA text contrast, light enough that the photo still sells the product */ .hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg, rgba(6,18,36,.72) 0%, rgba(6,18,36,.48) 38%, rgba(6,18,36,.58) 62%, rgba(6,18,36,.86) 100%); } .hero__inner{position:relative;z-index:2;text-align:center;color:#fff} .hero__eyebrow{ display:inline-flex;align-items:center;gap:.55em; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.28); color:#fff; padding:8px 16px;border-radius:999px; font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; backdrop-filter:blur(4px); } .pulse-dot{ width:8px;height:8px;border-radius:50%;background:var(--red);flex:none; box-shadow:0 0 0 0 rgba(224,31,38,.7); animation:pulse 2s infinite; } @keyframes pulse{ 70%{box-shadow:0 0 0 10px rgba(224,31,38,0)} 100%{box-shadow:0 0 0 0 rgba(224,31,38,0)} } .hero__title{ margin-top:16px; font-size:clamp(2.9rem,12.5vw,7rem); font-weight:900;letter-spacing:-.03em;text-transform:uppercase; color:var(--gold); text-shadow:0 4px 22px rgba(0,0,0,.5); } .hero__sub{ margin:14px auto 0;max-width:46ch; font-size:clamp(1rem,3.6vw,1.5rem); font-weight:800;line-height:1.28;text-transform:uppercase;letter-spacing:.005em; text-shadow:0 2px 12px rgba(0,0,0,.5); } /* three offers, above the fold */ .offer-strip{ display:grid;gap:10px; grid-template-columns:1fr; margin:26px auto 0;max-width:960px; } @media (min-width:620px){ .offer-strip{grid-template-columns:repeat(3,1fr);gap:14px} } /* Dark scrim rather than a light wash: holds contrast on a bright phone screen outdoors, where a translucent white panel over the photo washes out. */ .offer-chip{ background:rgba(6,18,36,.62); border:1px solid rgba(255,255,255,.28); border-radius:var(--r); padding:14px 12px; display:flex;flex-direction:column;align-items:center;gap:1px; backdrop-filter:blur(8px) saturate(1.15); box-shadow:0 6px 20px rgba(4,12,24,.35); } @supports not (backdrop-filter:blur(2px)){ .offer-chip{background:rgba(6,18,36,.82)} /* no blur available -> lean on opacity */ } .offer-chip__label{ font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase; color:#CFE4F5; } .offer-chip__pre{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.82);text-transform:uppercase;letter-spacing:.05em} .offer-chip__price{ font-size:clamp(1.85rem,7vw,2.5rem);font-weight:900;color:var(--gold); letter-spacing:-.02em;line-height:1.05; } .offer-chip__price .per{font-size:.42em;font-weight:800;letter-spacing:0} .offer-chip--accent{background:rgba(28,20,2,.66);border-color:rgba(255,198,41,.62)} @supports not (backdrop-filter:blur(2px)){ .offer-chip--accent{background:rgba(28,20,2,.85)} } .hero__actions{margin-top:26px} .hero__urgency{ margin-top:14px; font-size:clamp(.85rem,3.2vw,1rem);font-weight:900;letter-spacing:.08em;text-transform:uppercase; color:var(--gold-light); } /* Phones: compact the offer chips into two tight lines each so the hero CTA still clears the fold above the sticky mobile action bar. */ @media (max-width:619px){ .hero{padding-block:26px 40px} .hero__eyebrow{font-size:.66rem;padding:7px 13px;line-height:1.35;letter-spacing:.06em} .hero__title{margin-top:12px} .hero__sub{margin-top:10px} .offer-strip{margin-top:18px;gap:8px} .offer-chip{ flex-flow:row wrap;align-items:baseline;justify-content:space-between; text-align:left;padding:9px 15px;gap:0 10px; } .offer-chip__label{flex:0 0 100%;font-size:.68rem} .offer-chip__pre{font-size:.74rem} .offer-chip__price{font-size:1.7rem} .hero__actions{margin-top:18px} .hero__urgency{margin-top:11px} } @media (min-width:900px){ .hero{padding-block:68px 76px} } /* ---------- generic sections ---------- */ .section{padding-block:56px} @media (min-width:900px){ .section{padding-block:80px} } .section--light{background:var(--white)} .section--tint{background:var(--tint)} .section--navy{background:var(--navy-800);color:#fff} .section-head{text-align:center;margin-bottom:34px} .section-title{ font-size:clamp(1.75rem,5.6vw,2.9rem); font-weight:900;letter-spacing:-.02em;text-transform:uppercase;color:var(--navy-900); } .section-title em{font-style:normal;color:var(--red)} .section-title--onDark{color:#fff} .section-title--onDark em{color:var(--gold)} .section-kicker{margin-top:10px;color:var(--muted);font-size:1.02rem;font-weight:600} .section--navy .section-kicker{color:#B9CBE0} .grid{display:grid;gap:20px;grid-template-columns:1fr} @media (min-width:640px){ .grid--3{grid-template-columns:repeat(2,1fr)} } @media (min-width:960px){ .grid--3{grid-template-columns:repeat(3,1fr)} } .card{ background:#fff;border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow); } /* ---------- event details ---------- */ .card--event{padding:26px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;border-top:5px solid var(--navy-700)} .card--event--location{border-top-color:var(--red)} .card--event__icon{ width:56px;height:56px;border-radius:50%; background:var(--tint);color:var(--navy-700); display:grid;place-items:center;margin-bottom:14px; } .card--event--location .card--event__icon{background:#FDECEC;color:var(--red)} .card--event__icon svg{width:28px;height:28px;fill:currentColor} .card--event__date{ font-size:1.5rem;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;color:var(--navy-900); margin-bottom:14px; } .daylist{width:100%;display:flex;flex-direction:column;gap:9px} .daylist li{ display:flex;flex-direction:column;gap:1px; background:var(--tint);border-radius:10px;padding:10px 12px; } .daylist__day{font-weight:800;font-size:.95rem;color:var(--navy-800)} .daylist__time{font-size:1rem;font-weight:700;color:var(--red);white-space:nowrap} /* Side-by-side only when the CARD is genuinely wide enough — stops mid-word wrapping in the narrow 3-up desktop layout, where a viewport media query would guess wrong. */ .card--event{container-type:inline-size} @container (min-width:330px){ .daylist li{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px;text-align:left} } @supports not (container-type:inline-size){ @media (min-width:640px) and (max-width:959px){ .daylist li{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px;text-align:left} } } .address{font-size:1.08rem;line-height:1.6;color:var(--navy-800);margin-bottom:18px} .address strong{font-size:1.22rem;display:inline-block;margin-block:2px} .card--event--location{justify-content:space-between} /* ---------- offers ---------- */ .card--offer{overflow:hidden;display:flex;flex-direction:column} .card--offer__media{aspect-ratio:4/3;overflow:hidden;background:var(--tint)} .card--offer__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .card--offer:hover .card--offer__media img{transform:scale(1.05)} .card--offer__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1} .card--offer__title{ font-size:1.6rem;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;color:var(--navy-900); } .price-tag{ font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--navy-700); background:linear-gradient(180deg,#FFF7DF,#FFEDB5); border:1px solid #F3D98A;border-radius:10px;padding:9px 14px;align-self:flex-start; } .price-tag strong{font-size:1.7rem;font-weight:900;color:var(--red);letter-spacing:-.02em} .price-tag .per{font-size:.9rem;font-weight:800;color:var(--red)} .price-tag--plain{font-size:1.05rem} .card--offer__copy{color:var(--muted);font-size:.98rem;flex:1} .card--offer--gold{border-color:#F3D98A} /* ---------- brands ---------- */ .brands{padding-block:46px;background:linear-gradient(180deg,var(--navy-800),var(--navy-900))} .brands .section-title{text-align:center} .brand-row{ margin-top:26px; display:grid;gap:18px;grid-template-columns:1fr; max-width:760px;margin-inline:auto; } @media (min-width:560px){ .brand-row{grid-template-columns:repeat(2,1fr)} } .brand-chip{ background:#fff;border-radius:var(--r); padding:22px 26px;display:grid;place-items:center; box-shadow:var(--shadow-lg); } .brand-chip img{width:100%;max-width:270px;height:auto} /* ---------- gallery ---------- */ .gallery-grid{ display:grid;gap:12px; grid-template-columns:repeat(2,1fr); } @media (max-width:400px){ .gallery-grid{grid-template-columns:1fr} } @media (min-width:1024px){ .gallery-grid{grid-template-columns:repeat(4,1fr);gap:16px} } .shot{ display:block;width:100%;padding:0;border:0;background:none;cursor:pointer; border-radius:12px;overflow:hidden;position:relative; box-shadow:var(--shadow); } .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .45s ease} .shot::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,24,47,0) 55%,rgba(8,24,47,.45)); opacity:0;transition:opacity .3s ease; } .shot:hover img{transform:scale(1.06)} .shot:hover::after{opacity:1} .shot:focus-visible{outline:3px solid var(--red);outline-offset:3px} #gallery .center{margin-top:28px} /* ---------- lead form ---------- */ .lead{background:linear-gradient(160deg,var(--navy-800) 0%,var(--navy-900) 60%,#061529 100%)} .lead__grid{display:grid;gap:32px;grid-template-columns:1fr} @media (min-width:940px){ .lead__grid{grid-template-columns:1fr 1.05fr;gap:48px;align-items:center} } /* This column is centred at every width (Synergy, 2026-08-14). It previously read as half-centred on desktop: the heading was centred while the copy sat flush left and the ticks hugged the left edge. Cause was a specificity-free override — `.lead__pitch{text-align:left}` lived inside the 940px media query but this rule came LATER in the file, so it won at every width. Media queries add no specificity, so source order decides. The desktop left-aligned variants are removed rather than reordered, since centred is now the intended design and a half-applied rule is what caused this. */ .lead__pitch{text-align:center} .lead__copy{margin-top:14px;font-size:1.08rem;color:#C9DAEC;max-width:46ch;margin-inline:auto} /* Ticks: a centred BLOCK whose items align left, not four independently centred rows. With align-items:center each row centred on its own text length, so the check icons stepped in and out by up to 92px at 375px — the ragged edge Synergy flagged on mobile. width:fit-content sizes the list to its longest item and margin-inline:auto centres that block, so every check shares one left edge while the group stays optically centred. */ .ticks{ margin-top:22px;display:flex;flex-direction:column;gap:12px; align-items:flex-start;width:fit-content;max-width:100%;margin-inline:auto;text-align:left; } .ticks li{ display:flex;align-items:center;gap:.6em; font-size:1.06rem;font-weight:800;color:#fff; } .ticks li::before{ content:"";width:26px;height:26px;border-radius:50%;flex:none; background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2308182F' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat; } .lead__dates{ margin-top:24px;padding:14px 18px;border-left:4px solid var(--gold); background:rgba(255,255,255,.06);border-radius:0 10px 10px 0; color:#DCE9F5;font-size:.98rem;display:inline-block;text-align:left; } .lead__dates strong{color:var(--gold);font-size:1.05rem} .lead__formwrap{width:100%} .form{ background:#fff;border-radius:18px;padding:26px 22px; box-shadow:var(--shadow-lg); display:flex;flex-direction:column;gap:15px; } @media (min-width:560px){ .form{padding:32px 30px} } .form__title{ font-size:1.35rem;font-weight:900;text-transform:uppercase;color:var(--navy-900); letter-spacing:-.01em;text-align:center; } .form__row{display:grid;gap:15px;grid-template-columns:1fr} @media (min-width:520px){ .form__row{grid-template-columns:1fr 1fr} } /* Visit planning block. A
is the correct element for grouping the two related selects under one legend, but it arrives with a browser default border, padding and margin that fight the flat card — so those are reset explicitly rather than relying on the reset at the top of this file, which does not cover form-specific UA styles. min-width:0 is required: fieldset defaults to min-inline-size:min-content, which stops the inner grid from shrinking and causes horizontal overflow on narrow phones. */ .form__visit{ border:0;margin:0;padding:14px 0 0;min-width:0; border-top:1px solid var(--line,#e6e8ee); display:flex;flex-direction:column;gap:12px; } .form__visit-legend{ padding:0; font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em; color:var(--navy-800); } .form__visit-hint{ font-size:.85rem;color:var(--muted);line-height:1.5;margin:0; } .form__visit select:disabled{opacity:.55;cursor:not-allowed} .field{display:flex;flex-direction:column;gap:6px} .field label{ font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--navy-800); } .req{color:var(--red)} .field input,.field select{ font-family:inherit;font-size:1rem;color:var(--ink); padding:13px 14px;border:2px solid var(--line);border-radius:10px;background:#fff; transition:border-color .15s ease, box-shadow .15s ease; min-height:50px;width:100%; } .field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235A6B80' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:22px; padding-right:42px; } .field input:focus,.field select:focus{ outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(34,168,224,.18); } .field input:focus-visible,.field select:focus-visible{outline:none} .field input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 4px rgba(224,31,38,.14)} .err{font-size:.82rem;font-weight:700;color:var(--red)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form__privacy{font-size:.82rem;color:var(--muted);text-align:center;line-height:1.5} .form__status{font-size:.95rem;font-weight:800;text-align:center;min-height:0} .form__status[data-state="ok"]{color:#127A3E} .form__status[data-state="err"]{color:var(--red)} /* ---------- final CTA ---------- */ .final-cta{ background: linear-gradient(135deg,var(--red) 0%,var(--red-dark) 55%,#8E1218 100%); color:#fff;padding-block:56px; } @media (min-width:900px){ .final-cta{padding-block:76px} } .final-cta__title{ font-size:clamp(1.8rem,6vw,3.2rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em; text-shadow:0 3px 14px rgba(0,0,0,.28); } .final-cta__dates{ margin:16px 0 26px; font-size:clamp(1.05rem,3.6vw,1.6rem);font-weight:900;text-transform:uppercase;letter-spacing:.04em; color:var(--gold); } .final-cta__or{margin-top:18px;font-size:1rem;font-weight:700;color:rgba(255,255,255,.92)} .final-cta__phone{font-weight:900;color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .final-cta__phone:hover{color:var(--gold)} /* ---------- footer ---------- */ .site-footer{background:var(--navy-900);color:#A8BDD4;padding-block:44px 30px;font-size:.94rem} .footer-grid{ display:grid;gap:26px;grid-template-columns:1fr;align-items:start; padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12); } @media (min-width:760px){ .footer-grid{grid-template-columns:1.2fr 1fr 1fr;gap:34px} } .footer-logo{width:210px;height:auto} .footer-address strong{color:#fff;font-size:1.05rem} .footer-address a{color:var(--gold);font-weight:800;text-decoration:none;white-space:nowrap} .footer-address a:hover{text-decoration:underline} .footer-links{display:flex;flex-direction:column;gap:10px} .footer-links a{color:#A8BDD4;text-decoration:none;font-weight:700} .footer-links a:hover{color:#fff;text-decoration:underline} .disclaimer{margin-top:22px;font-size:.8rem;color:#7C93AC;line-height:1.6} .copyright{margin-top:12px;font-size:.8rem;color:#7C93AC} /* ---------- mobile sticky bar ---------- */ .mobile-bar{ position:fixed;left:0;right:0;bottom:0;z-index:70; display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(8,24,47,.96); border-top:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px); } .mobile-bar .btn{min-height:50px;padding-inline:14px;font-size:.92rem;box-shadow:none} .mobile-bar__btn{flex:1} .mobile-bar__call{flex:0 0 auto;gap:.4em} /* "Call an Expert" is a much wider label than the "Call" this bar was sized for, and at 375px the pair overflowed the row, wrapping the primary red CTA onto two lines and letting the secondary button dominate. Both labels are held on one line and the type is tightened just at the narrow end, so the primary keeps its visual weight. Above 400px there is room for the original sizing. */ @media (max-width:400px){ .mobile-bar{gap:8px;padding-inline:10px} .mobile-bar .btn{font-size:.82rem;padding-inline:10px} .mobile-bar__btn, .mobile-bar__call span{white-space:nowrap} .mobile-bar__call{flex:0 1 auto;min-width:0} } @media (min-width:768px){ .mobile-bar{display:none} } @media (max-width:767px){ body{padding-bottom:76px} } /* ---------- lightbox ---------- */ .lightbox{ position:fixed;inset:0;z-index:120; background:rgba(4,12,24,.94); display:flex;align-items:center;justify-content:center; padding:16px; } .lightbox[hidden]{display:none} .lightbox__figure{margin:0;max-width:min(1100px,94vw);text-align:center} .lightbox__figure img{ max-width:100%;max-height:78vh;width:auto;border-radius:10px; box-shadow:0 24px 60px rgba(0,0,0,.6);margin-inline:auto; } .lightbox__figure figcaption{margin-top:14px;color:#DCE9F5;font-size:.95rem;font-weight:700} .lightbox__close{ position:absolute;top:12px;right:14px; width:46px;height:46px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.14);color:#fff;font-size:2rem;line-height:1; } .lightbox__nav{ position:absolute;top:50%;transform:translateY(-50%); width:52px;height:52px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.14);color:#fff;font-size:2.2rem;line-height:1; } .lightbox__nav--prev{left:10px} .lightbox__nav--next{right:10px} .lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.3)} .lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:3px solid var(--gold);outline-offset:2px} body.lb-open{overflow:hidden} /* --------------------------------------------------------------- POLICY PAGE (privacy.html) The landing page has no long-form prose anywhere, so there are no inherited styles for stacked headings, paragraphs and lists. These are scoped under .policy so they cannot leak into the LP if the class is ever reused. Measure is capped near 68ch: --wrap is 1200px, which is right for the multi-column LP but far too wide to read a legal document across on a desktop monitor. --------------------------------------------------------------- */ .policy{max-width:68ch;margin-inline:auto} .policy__title{text-align:left;margin-bottom:6px} .policy__updated{color:var(--muted);font-size:.9rem;margin-bottom:28px} .policy__lede{font-size:1.05rem} .policy h2{ font-size:1.15rem;font-weight:900;text-transform:uppercase;letter-spacing:.01em; color:var(--navy-900);margin-top:34px;margin-bottom:10px; } .policy p{margin-bottom:14px;line-height:1.7;color:var(--navy-800)} .policy ul{margin:0 0 16px;padding-left:1.15rem;display:flex;flex-direction:column;gap:7px} .policy li{line-height:1.65;color:var(--navy-800)} .policy a{color:var(--red);text-decoration:underline;text-underline-offset:2px} .policy a:hover{text-decoration:none} .policy__contact{ background:var(--tint);border-left:4px solid var(--gold); border-radius:0 10px 10px 0;padding:16px 18px;line-height:1.7; } .policy__back{margin-top:34px;margin-bottom:0} /* ---------- motion / print ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } @media print{ .site-header,.mobile-bar,.lightbox,.btn{display:none!important} .hero::after{background:none} body{color:#000} }