/* ========================================================================== TaxFocused Enterprises & Tax Associates, Inc. Design system - deep navy + logo-matched copper Hand-written CSS. No build step. Portable into a GHL custom-code block. ========================================================================== */ /* ---------- Tokens ---------- */ :root{ --navy-950:#050E1C; --navy-900:#0A1A2F; --navy-850:#0C2039; --navy-800:#102A48; --navy-700:#1A3C63; --navy-600:#2A5183; --copper-200:#F6E3B4; --copper-300:#EFC670; --copper-400:#DFA83C; --copper-500:#C8921F; --copper-600:#B07010; /* logo core - accents, borders, icons */ --copper-700:#8A5E0D; /* Accessible variants. The logo copper is 4.44:1 on white, which fails WCAG AA for text under 24px, so small copper text and copper buttons use these. */ --copper-text:#83610C; /* small gold text on light: 5.42 on white, 5.17 on cream */ --copper-btn:#C8921F; /* button body: logo gold, navy-950 on it is 6.99 */ /* Metallic button stack. The specular band stops at 22%, above the cap height of 13.5px button text, so the composite behind the glyphs stays 4.7 to 5.1 against white. Pushing red up and green down buys saturation for free: luminance is ~72% green, so #B25E12 reads far more copper than #A55C18 at the same contrast. */ --btn-spec:linear-gradient(180deg,rgba(255,244,214,.42) 0%,rgba(255,244,214,.10) 52%,rgba(255,244,214,0) 100%); /* Metallic button body, matched to the logo's champagne-to-bronze ramp. Glyphs sit over the 20-78% band (5.3:1 to 9.5:1 for the navy text); the deepest bronze lives below the baseline. */ --btn-body:linear-gradient(179deg,#F1CE68 0%,#E3B143 20%,#CE9822 48%,#B67D12 78%,#9C6A0C 100%); --btn-body-hi:linear-gradient(179deg,#F7DA80 0%,#EBBC52 20%,#D9A52E 48%,#C48A18 78%,#A97612 100%); --btn-edge:#8A5E0D; /* Metallic TEXT ramps (fixed hex stops only - never currentColor, never animated; see the static-headline rule). Bright for navy backgrounds (worst stop 4.16:1 on navy-850), deep antique for cream (worst 3.6:1, large display text only). */ --gold-bright:linear-gradient(180deg,#FBEBB4 0%,#F3CF74 24%,#E2AC3B 50%,#C8921F 74%,#A9770F 100%); --gold-deep:linear-gradient(180deg,#B07010 0%,#96700F 42%,#83610C 72%,#6F4C08 100%); --cream-50:#FDFBF7; --cream-100:#F8F3EB; --cream-200:#EEE4D6; --cream-300:#E0D2BE; --ink:#13202E; --ink-soft:#3D4C5C; --muted:#5E6E85; /* was #64748B, which was 4.31 on cream */ --line:rgba(19,32,46,.12); --line-dark:rgba(240,213,184,.16); --ff-display:"Cormorant Garamond",Georgia,"Times New Roman",serif; --ff-ui:"Jost","Helvetica Neue",Arial,sans-serif; --r-sm:6px; --r:12px; --r-lg:20px; --r-xl:28px; --shadow-sm:0 1px 2px rgba(5,14,28,.06),0 2px 8px rgba(5,14,28,.05); --shadow:0 4px 12px rgba(5,14,28,.07),0 14px 40px rgba(5,14,28,.09); --shadow-lg:0 10px 30px rgba(5,14,28,.10),0 30px 70px rgba(5,14,28,.14); --ease:cubic-bezier(.22,.61,.36,1); --header-h:128px; --maxw:1200px; } /* Generated by _src/build-logo.py from the source artwork. Do not hand-edit. */ /* BRAND-METRICS:START */ :root{--brand-word-ratio:1;--brand-word-shift:0;--brand-gap-ratio:0;} /* BRAND-METRICS:END */ /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)} body{ margin:0;background:var(--cream-50);color:var(--ink); font-family:var(--ff-ui);font-weight:400;font-size:17px;line-height:1.72; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; /* overflow-x:hidden on turns the body into its own scrollport, which silently kills position:sticky on the header. clip contains the same horizontal overflow WITHOUT creating a scroll container, so the header keeps sticking. hidden stays first as the fallback for old engines. */ overflow-x:hidden; overflow-x:clip; } @supports (overflow-x:clip){ html{overflow-x:clip} } img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} input,select,textarea{font:inherit;color:inherit} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} :focus-visible{outline:2px solid var(--copper-500);outline-offset:3px;border-radius:4px} ::selection{background:var(--copper-500);color:#071223} /* ---------- Type ---------- */ h1,h2,h3,h4,.display{ font-family:var(--ff-display);font-weight:600;line-height:1.08; letter-spacing:-.012em;text-wrap:balance; } h1{font-size:clamp(2.6rem,6.2vw,4.5rem)} h2{font-size:clamp(2.05rem,4.1vw,3.2rem)} h3{font-size:clamp(1.32rem,2vw,1.72rem);line-height:1.2} h4{font-size:1.1rem;font-family:var(--ff-ui);font-weight:600;letter-spacing:.005em;line-height:1.4} p{text-wrap:pretty} .lead{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.7;color:var(--ink-soft)} .eyebrow{ font-family:var(--ff-ui);font-size:.735rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--copper-text); display:inline-flex;align-items:center;gap:.7rem; } .eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--copper-600),var(--copper-300));flex:none} .eyebrow.center::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--copper-600),var(--copper-300));flex:none} .gold{color:var(--copper-500)} .serif-em{font-family:var(--ff-display);font-style:italic;font-weight:500} /* ---------- Layout ---------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px} .wrap-wide{max-width:1360px} .wrap-narrow{max-width:880px} section{position:relative} .sec{padding-block:clamp(68px,8.5vw,124px)} .sec-sm{padding-block:clamp(52px,6vw,84px)} .grid{display:grid;gap:28px} /* ---------- Even rows: never strand a lone card ---------- repeat(auto-fit,minmax(...)) picks whatever column count fits the viewport, which leaves the last card alone on its own row whenever that count does not divide the number of cards (4 cards in 3 columns, 13 in 4, and so on). The column count is pinned to a divisor of the real card count instead. .grid-2 / .grid-3 are used where the count is fixed in the markup; the :has() quantity queries below cover the generated grids, whose card count varies per section, without needing a class on each one. */ .grid-2,.grid-3{grid-template-columns:1fr} @media (min-width:620px){ .grid-2{grid-template-columns:repeat(2,1fr)} } @media (min-width:880px){ .grid-3{grid-template-columns:repeat(3,1fr)} } .grid-4{grid-template-columns:1fr} @media (min-width:880px){ .grid-4{grid-template-columns:repeat(2,1fr)} } /* 3 cards: 3 across or 1, never 2 */ .res-grid:has(> :nth-child(3):last-child), .vid-grid:has(> :nth-child(3):last-child){grid-template-columns:1fr} @media (min-width:880px){ .res-grid:has(> :nth-child(3):last-child), .vid-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)} } /* 4 cards: 2 across (a clean 2x2) or 1, never 3 */ .res-grid:has(> :nth-child(4):last-child), .vid-grid:has(> :nth-child(4):last-child){grid-template-columns:1fr} @media (min-width:620px){ .res-grid:has(> :nth-child(4):last-child), .vid-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)} } /* 6 cards: 3 across, then 2, then 1 */ .res-grid:has(> :nth-child(6):last-child), .vid-grid:has(> :nth-child(6):last-child){grid-template-columns:1fr} @media (min-width:620px){ .res-grid:has(> :nth-child(6):last-child), .vid-grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,1fr)} } @media (min-width:880px){ .res-grid:has(> :nth-child(6):last-child), .vid-grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)} } /* 9 cards: 3 across; below that 2 across with the ninth spanning the row, so the tail is deliberate rather than stranded */ .res-grid:has(> :nth-child(9):last-child), .vid-grid:has(> :nth-child(9):last-child){grid-template-columns:1fr} @media (min-width:620px) and (max-width:879.98px){ .res-grid:has(> :nth-child(9):last-child), .vid-grid:has(> :nth-child(9):last-child){grid-template-columns:repeat(2,1fr)} .res-grid:has(> :nth-child(9):last-child) > :last-child, .vid-grid:has(> :nth-child(9):last-child) > :last-child{grid-column:1 / -1} } @media (min-width:880px){ .res-grid:has(> :nth-child(9):last-child), .vid-grid:has(> :nth-child(9):last-child){grid-template-columns:repeat(3,1fr)} } .center{text-align:center} .center .eyebrow{justify-content:center} .stack-sm>*+*{margin-top:.9rem} .stack>*+*{margin-top:1.35rem} .hr-gold{width:64px;height:2px;background:linear-gradient(90deg,var(--copper-600),var(--copper-300));border:0;margin:0} .center .hr-gold{margin-inline:auto} /* ---------- Surfaces ---------- */ .bg-cream{background:var(--cream-100)} .bg-white{background:#fff} .bg-navy{background:var(--navy-900);color:var(--cream-100)} /* Text on dark sections. .bg-navy-grad MUST be listed everywhere .bg-navy is: omitting it left --ink-soft body copy sitting on navy at under 2:1. */ .bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4, .bg-navy-grad h1,.bg-navy-grad h2,.bg-navy-grad h3,.bg-navy-grad h4{color:#fff} .bg-navy .lead,.bg-navy p, .bg-navy-grad .lead,.bg-navy-grad p{color:#C6D3E4} .bg-navy .eyebrow,.bg-navy-grad .eyebrow{color:var(--copper-300)} .bg-navy .eyebrow::before,.bg-navy .eyebrow.center::after, .bg-navy-grad .eyebrow::before,.bg-navy-grad .eyebrow.center::after{background:var(--copper-400)} .bg-navy .step-n,.bg-navy-grad .step-n{color:var(--copper-300)} .bg-navy .step p,.bg-navy-grad .step p, .bg-navy .rrr-item p,.bg-navy-grad .rrr-item p{color:#C6D3E4} .bg-navy .fineprint,.bg-navy-grad .fineprint{color:#A9BCD2} .bg-navy-grad{background: radial-gradient(1100px 620px at 12% 4%,rgba(192,118,47,.15),transparent 62%), radial-gradient(900px 560px at 92% 90%,rgba(42,81,131,.34),transparent 60%), linear-gradient(168deg,var(--navy-900) 0%,var(--navy-950) 100%); color:var(--cream-100); } .hair-top{border-top:1px solid var(--line)} .rule-gold-top::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px; background:linear-gradient(90deg,var(--copper-700),var(--copper-400) 45%,var(--copper-700)); } /* texture: fine diagonal weave, very subtle */ .texture::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:1; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 7px); } /* content must sit above the texture and vignette layers, or the overlay washes out buttons and body copy (measured: copper buttons dropped from 5.07:1 to 4.19:1 before this) */ .texture > .wrap,.texture > .wrap-wide{position:relative;z-index:2} .hero > .wrap{position:relative;z-index:2} /* ---------- Buttons ---------- */ .btn{ --fg:#071223; display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--ff-ui);font-size:.845rem;font-weight:600;letter-spacing:.11em; text-transform:uppercase;padding:.98rem 1.85rem;border-radius:var(--r-sm); color:var(--fg);border:1px solid var(--btn-edge); background-image:var(--btn-spec),var(--btn-body); /* the bevel is a fixed 11px band, so it stays above the cap height on a slim button as well as a large one - as a percentage it rode over the text */ background-size:100% 11px,100% 100%; background-repeat:no-repeat,no-repeat; background-position:0 0,0 0; position:relative;overflow:hidden;isolation:isolate; box-shadow: inset 0 1px 0 rgba(255,238,214,.34), inset 0 -1px 0 rgba(58,28,4,.28), 0 2px 8px rgba(120,62,12,.26); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-image .35s, color .3s, border-color .3s, filter .35s; white-space:nowrap; } /* narrow, bright specular sweep - reads as light travelling across metal */ .btn::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:62%;z-index:1;pointer-events:none; background:linear-gradient(104deg, transparent 0%, rgba(255,246,232,.10) 34%, rgba(255,251,244,.58) 50%, rgba(255,246,232,.10) 66%, transparent 100%); transform:translateX(-165%) skewX(-14deg); transition:transform .78s cubic-bezier(.3,.7,.3,1); } .btn > *{position:relative;z-index:2} .btn:hover{ transform:translateY(-2px); background-image:var(--btn-spec),var(--btn-body-hi); background-size:100% 11px,100% 100%;background-repeat:no-repeat; border-color:#9A5013; box-shadow: inset 0 1px 0 rgba(255,242,224,.44), inset 0 -1px 0 rgba(58,28,4,.3), 0 10px 26px rgba(150,78,16,.36), 0 0 0 1px rgba(224,177,131,.16); } .btn:hover::after{transform:translateX(230%) skewX(-14deg)} .btn:active{ transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(58,28,4,.36),0 1px 3px rgba(120,62,12,.3); } /* the large primary calls to action catch the light every few seconds */ .btn-lg::after{animation:btn-glint 7s var(--ease) 2.2s infinite} .btn-lg:hover::after{animation:none} @keyframes btn-glint{ 0%{transform:translateX(-165%) skewX(-14deg)} 14%{transform:translateX(230%) skewX(-14deg)} 100%{transform:translateX(230%) skewX(-14deg)} } .btn-lg{padding:1.12rem 2.3rem;font-size:.9rem} .btn-sm{padding:.72rem 1.3rem;font-size:.78rem} .btn-ghost{ --fg:var(--navy-900); background-image:none;background-color:transparent; border-color:rgba(19,32,46,.26);box-shadow:none; } .btn-ghost::after{display:none} .btn-ghost:hover{--fg:#fff;background-color:var(--navy-900);background-image:none;border-color:var(--navy-900);box-shadow:0 8px 22px rgba(5,14,28,.24)} .btn-outline-gold:hover{--fg:#fff;background-image:var(--btn-spec),var(--btn-body);background-size:100% 11px,100% 100%;background-repeat:no-repeat;border-color:var(--btn-edge);box-shadow:inset 0 1px 0 rgba(255,238,214,.34),0 8px 22px rgba(150,78,16,.3)} .bg-navy .btn-ghost,.bg-navy-grad .btn-ghost{--fg:var(--cream-100);border-color:rgba(240,213,184,.4)} .bg-navy .btn-ghost:hover,.bg-navy-grad .btn-ghost:hover{--fg:var(--navy-900);background-color:var(--cream-100);border-color:var(--cream-100)} .btn-outline-gold{ --fg:var(--copper-text); background-image:none;background-color:transparent; border-color:var(--copper-500);box-shadow:none; } .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:saturate(.6)} .btn:disabled::after{animation:none;transform:translateX(-165%) skewX(-14deg)} .link-gold{ font-family:var(--ff-ui);font-weight:600;font-size:.86rem;letter-spacing:.09em; text-transform:uppercase;color:var(--copper-text); display:inline-flex;align-items:center;gap:.5rem; } .link-gold svg{transition:transform .3s var(--ease)} .link-gold:hover svg{transform:translateX(5px)} .bg-navy .link-gold,.bg-navy-grad .link-gold{color:var(--copper-300)} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:70;background:rgba(253,251,247,.9); backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px); border-bottom:1px solid transparent;transition:box-shadow .35s var(--ease),border-color .35s,background .35s; } .site-header.is-stuck{box-shadow:0 6px 24px rgba(5,14,28,.09);border-bottom-color:var(--line);background:rgba(253,251,247,.97)} .header-inner{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h);flex-wrap:nowrap} /* The mark and the wordmark are separate images so the mark can be animated on its own. --brand-word-ratio / --brand-word-shift / --brand-gap-ratio are generated by _src/build-logo.py from the source artwork, so the two halves reassemble at exactly the proportions and spacing of the original lockup. Everything is driven off --brand-h; the breakpoints only change that. */ .brand{ display:flex;align-items:center;flex:0 1 auto;min-width:0; --brand-h:84px; } .brand-mark{height:var(--brand-h);width:auto;flex:none} .brand-word{ height:auto;max-height:calc(var(--brand-h) * var(--brand-word-ratio)); width:auto;max-width:100%;flex:0 1 auto; object-fit:contain;object-position:left center; /* gap-ratio is negative: in the original lockup the T tucks back under the mark's right tip, so this has to be a margin. Flex gap cannot go negative and the two halves would drift apart. */ margin-left:calc(var(--brand-h) * var(--brand-gap-ratio)); margin-top:calc(var(--brand-h) * var(--brand-word-shift)); } .nav{display:flex;align-items:center;gap:.15rem;margin-left:auto} .nav a{ font-size:.83rem;font-weight:500;letter-spacing:.055em;text-transform:uppercase; padding:.65rem .78rem;border-radius:var(--r-sm);color:var(--navy-800); position:relative;transition:color .25s; } .nav a::after{ content:"";position:absolute;left:.78rem;right:.78rem;bottom:.34rem;height:1.5px; background:var(--copper-500);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease); } .nav a:hover,.nav a[aria-current="page"],.nav a.is-active{color:var(--copper-700)} .nav a:hover::after,.nav a[aria-current="page"]::after,.nav a.is-active::after{transform:scaleX(1)} .header-cta{display:flex;align-items:center;gap:1rem;flex:none;margin-left:.5rem} /* slimmer than the in-page buttons: it sits next to a 34px phone chip */ .header-cta .btn{padding:.62rem 1.3rem;font-size:.795rem;letter-spacing:.085em} .header-cta .btn::after{animation:none} /* Portal is secondary to Get in Touch, so it is outlined rather than filled */ .btn-portal{ --fg:var(--navy-900); background-image:none;background-color:transparent; border-color:rgba(19,32,46,.28);box-shadow:none; } .btn-portal::after{display:none} .btn-portal:hover{ --fg:#fff;background-color:var(--navy-900);background-image:none; border-color:var(--navy-900);box-shadow:0 8px 20px rgba(5,14,28,.22); } .tel-link{ display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:1.02rem; letter-spacing:.01em;color:var(--navy-900);white-space:nowrap;transition:color .25s; font-variant-numeric:tabular-nums; } .tel-link .tel-ic{ width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center; background:linear-gradient(150deg,rgba(192,118,47,.18),rgba(192,118,47,.07)); border:1px solid rgba(192,118,47,.26); color:var(--copper-700);transition:background .3s,color .3s,transform .3s var(--ease),border-color .3s; } .tel-link .tel-ic svg{width:19px;height:19px} .tel-link:hover .tel-ic{border-color:var(--copper-600)} .tel-link:hover{color:var(--copper-700)} .tel-link:hover .tel-ic{background:var(--copper-600);color:#fff;transform:scale(1.06)} .tel-txt{display:block;line-height:1} /* Bars are absolutely positioned so the open state is an exact X regardless of button size or font metrics. */ .burger{display:none;position:relative;width:46px;height:46px;border-radius:var(--r-sm);color:var(--navy-900);border:1px solid var(--line)} .burger span{ position:absolute;left:50%;width:21px;height:2px;margin-left:-10.5px; background:currentColor;border-radius:2px; transition:transform .34s var(--ease),opacity .18s; } .burger span:nth-child(1){top:calc(50% - 7px)} .burger span:nth-child(2){top:calc(50% - 1px)} .burger span:nth-child(3){top:calc(50% + 5px)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* mobile drawer */ .mnav{ position:fixed;inset:0;z-index:69;background:var(--navy-950);color:var(--cream-100); transform:translateY(-100%);transition:transform .5s var(--ease),visibility .5s; padding:calc(var(--header-h) + 28px) 24px 40px;overflow-y:auto; /* closed drawer must not be reachable by keyboard or screen readers */ visibility:hidden; } .mnav.open{transform:translateY(0);visibility:visible} /* the drawer only exists below the desktop nav breakpoint */ @media (min-width:1081px){ .mnav{display:none} } .mnav a{display:block;font-family:var(--ff-display);font-size:1.85rem;font-weight:600;padding:.5rem 0;border-bottom:1px solid rgba(240,213,184,.13)} .mnav a:last-of-type{border-bottom:0} .mnav .btn{width:100%;margin-top:1.6rem} .mnav .mnav-foot{margin-top:1.6rem;font-size:.9rem;color:#9FB2C9;line-height:1.9} body.nav-open{overflow:hidden} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;padding-block:clamp(58px,8vw,104px);isolation:isolate} /* ---------- hero video ---------- The clip is color-graded at encode time toward navy and desaturated, so the browser runs no per-frame filter. The scrim is heaviest on the left, where the headline sits, and lifts toward the right where the calculator is in frame. */ .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--navy-950)} .hero-video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:74% 52%; display:block; } .hero-media::after{ content:"";position:absolute;inset:0; background: linear-gradient(101deg, rgba(4,11,22,.72) 0%, rgba(5,13,26,.66) 32%, rgba(5,14,28,.60) 58%, rgba(6,16,30,.56) 100%), radial-gradient(140% 130% at 6% 46%, rgba(3,9,18,.38), transparent 62%), linear-gradient(0deg, rgba(3,9,18,.50) 0%, rgba(3,9,18,0) 30%); } /* a copper rim, so the video reads as part of the brand rather than dropped in */ .hero-media::before{ content:"";position:absolute;inset:0;z-index:1; box-shadow:inset 0 1px 0 rgba(224,177,131,.20),inset 0 -1px 0 rgba(224,177,131,.10); } .hero-grid{display:grid;gap:clamp(40px,5vw,72px);align-items:center;grid-template-columns:1.12fr .88fr} .hero h1{color:#fff;margin-bottom:1.4rem;font-size:clamp(2.4rem,4.8vw,3.85rem);max-width:22ch} .hero .lead{color:#C9D6E6;max-width:38ch} .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem} /* The logo watermark now sits behind the process section instead of the hero. */ /* Same rule as .sec-mark: sized in vw with no px cap so no edge of the artwork is ever in frame. right:-22vw + 130vw puts the left edge at -8vw. */ .hero-mark{ position:absolute;right:-22vw;top:50%;transform:translateY(-50%); width:130vw;max-width:none;opacity:.05;pointer-events:none;filter:saturate(1.3); z-index:0; } /* Watermark. Sized in vw with no px cap so every edge of the artwork stays outside the section at any viewport width: 158vw starting at -38vw puts the right edge at 120vw, and the resulting height (~140vw) overruns the section top and bottom. Any px cap would let an edge back into frame on wide screens. */ /* the watermark deliberately overruns every edge, so its section clips it */ .sec:has(> .sec-mark){overflow:hidden} .sec-mark{ position:absolute;left:-22vw;top:50%;transform:translateY(-50%); width:130vw;max-width:none;opacity:.055;pointer-events:none; filter:saturate(1.35);z-index:0; } @media (max-width:860px){ .sec-mark{left:-30vw;opacity:.045;width:150vw} } /* hero card */ .hero-card{ /* opaque enough to guarantee text contrast over the video, still glassy */ background:linear-gradient(160deg,rgba(11,26,46,.62),rgba(6,16,30,.70)); border:1px solid rgba(240,213,184,.24); border-radius:var(--r-lg);padding:clamp(26px,3vw,38px); backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1); box-shadow:0 24px 64px rgba(2,7,16,.52),inset 0 1px 0 rgba(240,213,184,.12); } .hero-card h3{color:#fff;font-size:1.5rem;margin-bottom:.35rem} .hero-card .hc-sub{color:#A9BCD2;font-size:.94rem;line-height:1.6} .hc-list{margin-top:1.5rem;display:grid;gap:.9rem} .hc-list li{display:flex;gap:.85rem;align-items:flex-start;font-size:.955rem;color:#D8E2EE;line-height:1.55} .hc-list svg{width:19px;height:19px;flex:none;color:var(--copper-400);margin-top:2px} .hc-foot{margin-top:1.7rem;padding-top:1.4rem;border-top:1px solid rgba(240,213,184,.16)} /* ---------- Trust strip ---------- */ .trust{background:var(--navy-950);border-block:1px solid rgba(240,213,184,.11)} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .trust-item{ padding:30px 26px;text-align:center;border-left:1px solid rgba(240,213,184,.11); } .trust-item:first-child{border-left:0} .trust-n{font-family:var(--ff-display);font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:600;color:var(--copper-300);line-height:1;letter-spacing:-.02em} .trust-l{margin-top:.5rem;font-size:.715rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#9FB2C9} /* ---------- Cards ---------- */ .card{ background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(24px,2.6vw,34px);position:relative;overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s; box-shadow:var(--shadow-sm);height:100%; } .card::before{ content:"";position:absolute;inset:0 0 auto 0;height:2px; background:linear-gradient(90deg,var(--copper-600),var(--copper-300)); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease); } .card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(192,118,47,.32)} .card:hover::before{transform:scaleX(1)} .card h3{margin-bottom:.65rem;font-size:1.42rem} .card p{color:var(--ink-soft);font-size:.98rem} .card-dark{background:rgba(253,251,247,.045);border-color:rgba(240,213,184,.17);box-shadow:none} .card-dark h3,.card-dark h4{color:#fff} .card-dark p{color:#B9C8DA} .card-dark:hover{border-color:rgba(240,213,184,.42);background:rgba(253,251,247,.07)} .ico{ width:54px;height:54px;border-radius:var(--r-sm);display:grid;place-items:center; background:linear-gradient(150deg,rgba(192,118,47,.15),rgba(192,118,47,.05)); color:var(--copper-600);margin-bottom:1.25rem;border:1px solid rgba(192,118,47,.2); transition:background .4s,color .4s,transform .45s var(--ease); } .ico svg{width:25px;height:25px} .card:hover .ico{background:linear-gradient(150deg,var(--copper-600),var(--copper-700));color:#fff;transform:rotate(-4deg) scale(1.05)} .card-dark .ico{background:rgba(192,118,47,.16);border-color:rgba(240,213,184,.24);color:var(--copper-300)} .card-num{ font-family:var(--ff-display);font-size:2.6rem;font-weight:600;color:var(--copper-300); line-height:1;margin-bottom:.8rem;letter-spacing:-.02em; } .tick-list{display:grid;gap:.62rem;margin-top:1.15rem} .tick-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.945rem;line-height:1.55;color:var(--ink-soft)} .tick-list svg{width:17px;height:17px;flex:none;color:var(--copper-500);margin-top:3px} .card-dark .tick-list li{color:#C1CFDF} .card-dark .tick-list svg{color:var(--copper-400)} /* service list (compact, 13 services) */ .svc-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px} /* 13 services never divide evenly into 2, 3 or 4 columns, so the last one would always be left stranded alone on its own row. Spanning it full width makes the final row deliberate at every column count (12 divides by 1, 2, 3 and 4). */ .svc-rows > :last-child{grid-column:1 / -1} .svc-row{ background:#fff;color:var(--ink);padding:20px 22px;display:flex;gap:.9rem;align-items:flex-start; border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-sm); transition:background .3s,border-color .3s,transform .3s var(--ease); } .svc-row:hover{background:var(--cream-50);border-color:rgba(192,118,47,.34);transform:translateY(-2px)} .svc-row svg{width:18px;height:18px;color:var(--copper-500);flex:none;margin-top:5px} .svc-row strong{display:block;font-weight:600;font-size:.99rem;letter-spacing:.005em} .svc-row span{display:block;font-size:.875rem;color:var(--muted);line-height:1.55;margin-top:.2rem} /* ---------- About / split ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,76px);align-items:center} /* utility: top-align a split when both columns are of similar height */ .split-top{align-items:start} .split-media{position:relative} .figure-frame{ position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-900); box-shadow:var(--shadow-lg); } .figure-frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(240,213,184,.22);border-radius:var(--r-lg);pointer-events:none} .frame-offset{position:relative} .frame-offset::before{ content:"";position:absolute;inset:22px -22px -22px 22px;border:1.5px solid var(--copper-500); border-radius:var(--r-lg);z-index:0;opacity:.5; } .frame-offset>*{position:relative;z-index:1} .stat-badge{ position:absolute;bottom:-26px;left:-26px;background:var(--navy-900);color:#fff; border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow-lg); border:1px solid rgba(240,213,184,.24);z-index:2; } .stat-badge b{display:block;font-family:var(--ff-display);font-size:2.5rem;font-weight:600;color:var(--copper-300);line-height:1} .stat-badge span{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#9FB2C9;margin-top:.35rem} .brand-panel{ display:grid;place-items:center;padding:clamp(52px,7vw,92px) clamp(40px,6vw,76px); background: radial-gradient(700px 420px at 22% 14%,rgba(192,118,47,.2),transparent 60%), linear-gradient(160deg,var(--navy-850),var(--navy-950)); } .brand-panel img{width:min(84%,420px)} /* three pillars R/R/R */ .rrr{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)} .rrr-wide{margin-top:clamp(44px,5vw,72px);padding-top:clamp(34px,4vw,48px);border-top:1px solid var(--line)} .rrr-item{padding:26px 0 0;border-top:2px solid var(--copper-500)} .rrr-item h3,.rrr-item h4{font-family:var(--ff-display);font-size:1.55rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.5rem} .rrr-item p{font-size:.95rem;color:var(--ink-soft)} /* ---------- Process ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:s} .step{position:relative;padding-top:34px} .step::before{ content:"";position:absolute;top:11px;left:0;right:0;height:1px; background:linear-gradient(90deg,var(--copper-500),rgba(192,118,47,.12)); } .step-dot{ position:absolute;top:4px;left:0;width:15px;height:15px;border-radius:50%; background:var(--copper-600);box-shadow:0 0 0 4px rgba(192,118,47,.18); } .step-n{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-text);display:block;margin-bottom:.5rem} .step h4{font-family:var(--ff-display);font-size:1.4rem;font-weight:600;margin-bottom:.45rem} .step p{font-size:.93rem;color:var(--ink-soft)} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-q{ width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem; padding:1.35rem 0;text-align:left;font-family:var(--ff-display);font-size:clamp(1.12rem,1.7vw,1.36rem); font-weight:600;line-height:1.34;color:var(--navy-900);transition:color .25s; } .faq-q:hover{color:var(--copper-700)} .faq-ic{ width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;position:relative;margin-top:2px;transition:background .3s,border-color .3s,transform .4s var(--ease); } .faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--copper-600);border-radius:2px;transition:transform .35s var(--ease),background .3s} .faq-ic::before{width:12px;height:1.7px} .faq-ic::after{width:1.7px;height:12px} .faq-item.open .faq-ic{background:var(--copper-600);border-color:var(--copper-600);transform:rotate(90deg)} .faq-item.open .faq-ic::before,.faq-item.open .faq-ic::after{background:#fff} .faq-item.open .faq-ic::after{transform:scaleY(0)} .faq-a{overflow:hidden;height:0;transition:height .42s var(--ease)} .faq-a-inner{padding:0 3.2rem 1.6rem 0;color:var(--ink-soft);font-size:1rem} .faq-a-inner p+p{margin-top:.85rem} .faq-a-inner a{color:var(--copper-700);text-decoration:underline;text-underline-offset:3px} /* ---------- Resource / link grids ---------- */ .res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px} .res-card{ display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:24px 26px;position:relative;overflow:hidden; transition:transform .35s var(--ease),box-shadow .35s,border-color .3s; box-shadow:var(--shadow-sm); } .res-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(192,118,47,.34)} .res-card h4{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem;font-size:1.04rem} .res-card h4 .ext{width:14px;height:14px;color:var(--copper-500);flex:none;transition:transform .3s var(--ease)} .res-card:hover h4 .ext{transform:translate(3px,-3px)} .res-card p{font-size:.895rem;color:var(--muted);line-height:1.6} .res-card .host{ display:inline-block;margin-top:.85rem;font-size:.67rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--copper-700);background:rgba(192,118,47,.1); padding:.28rem .6rem;border-radius:3px; } .res-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.2rem} /* video grid */ .vid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px} .vid{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)} .vid-embed{position:relative;aspect-ratio:16/9;background:var(--navy-900)} .vid-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vid-body{padding:20px 22px} .vid-body h4{margin-bottom:.3rem;font-size:1.02rem} .vid-body p{font-size:.87rem;color:var(--muted)} /* ---------- Light-surface color guard ---------- These components can sit inside .bg-navy / .bg-navy-grad sections, where the inherited color is cream. Without this they render cream-on-white. */ .form-shell,.card:not(.card-dark),.res-card,.svc-row,.vid,.note,.summary{color:var(--ink)} .form-shell h2,.form-shell h3,.form-shell h4, .card:not(.card-dark) h2,.card:not(.card-dark) h3,.card:not(.card-dark) h4, .res-card h4,.vid-body h4,.note strong{color:var(--navy-900)} .form-shell p:not(.fsub):not(.fineprint):not(.err),.card:not(.card-dark) p{color:var(--ink-soft)} .form-shell .lead,.card:not(.card-dark) .lead,.note .lead{color:var(--ink-soft)} .form-shell .fineprint,.card:not(.card-dark) .fineprint,.note .fineprint{color:var(--muted)} .form-shell .eyebrow,.card:not(.card-dark) .eyebrow{color:var(--copper-text)} .form-shell .eyebrow::before,.form-shell .eyebrow.center::after, .card:not(.card-dark) .eyebrow::before,.card:not(.card-dark) .eyebrow.center::after{background:var(--copper-500)} .form-shell input,.form-shell select,.form-shell textarea{color:var(--ink)} .form-shell ::placeholder{color:#8A97A8;opacity:1} .opt b,.chip{color:var(--ink)} .opt small{color:var(--muted)} .form-shell a:not(.btn),.card:not(.card-dark) a:not(.btn):not(.link-gold){color:var(--copper-700)} /* ---------- Contact / form ---------- */ .contact-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,4vw,58px);align-items:start} /* The form column is shorter than the info card, so flush tops read as top-heavy. Dropping the form sits it better against the taller card. */ .contact-grid > :first-child{margin-top:clamp(0px,3.4vw,46px)} .form-shell{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-lg);overflow:hidden; } .form-head{padding:clamp(24px,3vw,34px) clamp(24px,3vw,38px) 0} .form-body{padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,38px) clamp(26px,3vw,36px)} .progress{display:flex;gap:6px;margin-top:1.4rem} .progress i{flex:1;height:3px;border-radius:2px;background:var(--cream-200);transition:background .45s var(--ease)} .progress i.done{background:linear-gradient(180deg,#DFA83C,#B07010)} .step-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem;font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)} .fstep{display:none;animation:fadeUp .45s var(--ease) both} .fstep.active{display:block} @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .fstep>h3{font-size:1.5rem;margin-bottom:.4rem} .fstep>.fsub{color:var(--muted);font-size:.93rem;margin-bottom:1.5rem} .opts{display:grid;gap:12px} .opts.two{grid-template-columns:1fr 1fr} .opt{ display:flex;gap:.95rem;align-items:flex-start;padding:17px 19px;cursor:pointer; border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff; transition:border-color .28s,background .28s,transform .28s var(--ease),box-shadow .28s; } .opt:hover{border-color:rgba(192,118,47,.5);background:var(--cream-50);transform:translateY(-1px)} .opt input{position:absolute;opacity:0;width:0;height:0} .opt-box{ width:21px;height:21px;flex:none;border:1.5px solid var(--line);border-radius:50%; display:grid;place-items:center;margin-top:2px;transition:border-color .25s,background .25s; } .opt-box::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .25s var(--ease)} .opt[data-multi] .opt-box{border-radius:5px} .opt[data-multi] .opt-box::after{border-radius:2px} .opt.sel{border-color:var(--copper-600);background:rgba(192,118,47,.055);box-shadow:0 2px 12px rgba(176,101,31,.12)} .opt.sel .opt-box{background:var(--copper-600);border-color:var(--copper-600)} .opt.sel .opt-box::after{transform:scale(1)} .opt b{display:block;font-weight:600;font-size:.99rem;line-height:1.35} .opt small{display:block;color:var(--muted);font-size:.845rem;line-height:1.5;margin-top:.22rem} .field{margin-bottom:1.05rem} .field label,.flabel{ display:block;font-size:.715rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--navy-800);margin-bottom:.5rem; } .field .req{color:var(--copper-text)} .field input,.field select,.field textarea{ width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm); background:var(--cream-50);font-size:1rem;transition:border-color .25s,background .25s,box-shadow .25s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--copper-500);background:#fff;box-shadow:0 0 0 3px rgba(192,118,47,.13); } .field textarea{min-height:112px;resize:vertical;line-height:1.65} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem} .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{ position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.05rem; border:1.5px solid var(--line);border-radius:999px;font-size:.9rem;font-weight:500; cursor:pointer;background:#fff;transition:border-color .25s,background .25s,color .25s,transform .25s var(--ease); } .chip input{position:absolute;opacity:0;width:0;height:0} .chip:hover{border-color:rgba(192,118,47,.5);transform:translateY(-1px)} .chip.sel{background:var(--copper-600);border-color:var(--copper-600);color:#fff!important} .chip.sel svg{color:#fff} .chip svg{width:14px;height:14px;color:var(--copper-500)} .form-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line)} .btn-back{ display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .25s; } .btn-back:hover{color:var(--navy-900)} .err{color:#A3241B;font-size:.85rem;margin-top:.5rem;display:none} .err.show{display:block} .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* the skip link must become visible when a keyboard user reaches it */ .skip{ position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-160%); background:var(--navy-900);color:#fff;padding:.8rem 1.3rem;border-radius:var(--r-sm); font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; box-shadow:var(--shadow);transition:transform .25s var(--ease); } .skip:focus{transform:translateY(0)} .summary{background:var(--cream-100);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 22px;margin-bottom:1.3rem} .summary dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.1rem;margin:0;font-size:.93rem} .summary dt{font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding-top:.22rem} .summary dd{margin:0;font-weight:500;color:var(--ink)} .fineprint{font-size:.82rem;color:var(--muted);line-height:1.6;margin-top:1rem} .form-done{display:none;text-align:center;padding:clamp(34px,5vw,58px) clamp(24px,3vw,38px)} .form-done.show{display:block} .done-ic{width:74px;height:74px;margin:0 auto 1.5rem;border-radius:50%;display:grid;place-items:center;background:rgba(192,118,47,.11);color:var(--copper-600)} .done-ic svg{width:34px;height:34px} /* contact info panel */ .info-card{background:var(--navy-900);color:#C6D3E4;border-radius:var(--r-lg);padding:clamp(26px,3vw,36px);box-shadow:var(--shadow-lg);position:relative;overflow:hidden} .info-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--copper-600),var(--copper-300))} .info-card h3{color:#fff;font-size:1.6rem;margin-bottom:.4rem} .info-list{display:grid;gap:1.35rem;margin-top:1.8rem} .info-item{display:flex;gap:1rem;align-items:flex-start} .info-item .ii{width:40px;height:40px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(192,118,47,.16);color:var(--copper-300);border:1px solid rgba(240,213,184,.2)} .info-item .ii svg{width:18px;height:18px} .info-item dt{font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#9FB2C9;margin-bottom:.28rem} .info-item dd{margin:0;font-size:1.02rem;color:#EAF0F7;line-height:1.55;font-weight:500} .info-item dd a:hover{color:var(--copper-300)} .info-item dd small{display:block;font-size:.86rem;color:#9FB2C9;font-weight:400;margin-top:.2rem} /* ---------- CTA band ---------- */ .cta-band{position:relative;overflow:hidden} .cta-band .wrap{position:relative;z-index:1} .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,56px);flex-wrap:wrap} .cta-inner h2{max-width:24ch} /* ---------- Page hero (inner pages) ---------- */ .phero{padding-block:clamp(70px,9vw,116px);position:relative;overflow:hidden} .phero h1{font-size:clamp(2.35rem,5.2vw,3.9rem);color:#fff;margin-bottom:1.1rem} .phero .lead{max-width:62ch;color:#C9D6E6} /* Page hero with a portrait alongside. The copy column is a hard grid track, so no line of text can run under or past the image. */ .phero-split .wrap{ display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(34px,4.5vw,68px);align-items:center; } .phero-split .phero-copy{min-width:0} .phero-split .phero-copy .lead{max-width:none} .phero-split h1{font-size:clamp(2.2rem,3.9vw,3.35rem)} .phero-media{min-width:0} .phero-media .portrait-frame{margin:0} @media (max-width:980px){ .phero-split .wrap{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)} .phero-split .phero-copy .lead{max-width:62ch} } /* Shared photo treatment: rounded, ringed, with a soft copper wash so a photograph sits in the same material language as the rest of the site. */ .portrait-frame{ position:relative;border-radius:var(--r-lg);overflow:hidden; background:var(--navy-900);box-shadow:var(--shadow-lg); border:1px solid rgba(240,213,184,.2); } .portrait-frame img{width:100%;height:auto;display:block} .portrait-frame::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(5,14,28,0) 58%,rgba(5,14,28,.34) 100%), radial-gradient(120% 90% at 50% 0%,rgba(192,118,47,.12),transparent 62%); } /* long-form prose */ .prose{font-size:1.045rem;line-height:1.82;color:var(--ink-soft)} .prose>*+*{margin-top:1.15rem} .prose h2{margin-top:2.6rem;color:var(--navy-900)} .prose h3{margin-top:2rem;color:var(--navy-900)} .prose h2+*,.prose h3+*{margin-top:.9rem} .prose strong{color:var(--ink);font-weight:600} .prose a{color:var(--copper-700);text-decoration:underline;text-underline-offset:3px} /* Markers are absolutely positioned rather than flex items, so inline / inside a list item stays in the same text flow. */ .prose ul{display:grid;gap:.62rem;margin-top:.9rem} .prose ul li{position:relative;padding-left:1.45rem} .prose ul li::before{ content:"";position:absolute;left:.3rem;top:.72em; width:6px;height:6px;border-radius:50%;background:var(--copper-500); } .prose ol{counter-reset:p;display:grid;gap:.72rem;margin-top:.9rem} .prose ol li{counter-increment:p;position:relative;padding-left:2.1rem} .prose ol li::before{ content:counter(p);position:absolute;left:0;top:.02em; font-family:var(--ff-display);font-weight:600;color:var(--copper-600); font-size:1.2rem;line-height:1.5; } .note{ border-left:3px solid var(--copper-500);background:var(--cream-100); padding:20px 24px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.97rem;color:var(--ink-soft); } .note strong{color:var(--navy-900)} /* two-col resolution list */ .acc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} /* ---------- Footer ---------- */ .site-footer{background:var(--navy-950);color:#A9BCD2;position:relative;overflow:hidden} .site-footer::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px; background:linear-gradient(90deg,var(--copper-700),var(--copper-400) 42%,var(--copper-600) 70%,var(--copper-700)); } .footer-glow{position:absolute;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(192,118,47,.14),transparent 66%);top:-340px;right:-200px;pointer-events:none} .footer-main{padding-block:clamp(52px,6.5vw,84px);position:relative;z-index:1} .footer-grid{display:grid;grid-template-columns:1.45fr .85fr .85fr 1.15fr;gap:clamp(28px,3.4vw,54px)} .footer-brand img{height:60px;width:auto;margin-bottom:1.4rem} .footer-brand p{font-size:.945rem;line-height:1.75;color:#9FB2C9;max-width:34ch} .footer-h{ font-family:var(--ff-ui);font-size:.715rem;font-weight:600;letter-spacing:.19em; text-transform:uppercase;color:var(--copper-300);margin-bottom:1.25rem; display:flex;align-items:center;gap:.6rem; } .footer-h::after{content:"";height:1px;flex:1;background:rgba(240,213,184,.17)} .footer-links{display:grid;gap:.72rem} .footer-links a{font-size:.945rem;color:#A9BCD2;transition:color .25s,transform .25s var(--ease);display:inline-flex;align-items:center;gap:.5rem} .footer-links a::before{content:"";width:0;height:1px;background:var(--copper-400);transition:width .3s var(--ease)} .footer-links a:hover{color:#fff} .footer-links a:hover::before{width:12px} .footer-contact{display:grid;gap:1.1rem} .fc-item{display:flex;gap:.85rem;align-items:flex-start;font-size:.945rem;line-height:1.6} .fc-item svg{width:17px;height:17px;color:var(--copper-400);flex:none;margin-top:3px} .fc-item a:hover{color:#fff} .fc-item b{display:block;color:#EAF0F7;font-weight:600} .socials{display:flex;gap:.6rem;margin-top:1.6rem} .socials a{ width:40px;height:40px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(240,213,184,.22);color:var(--copper-200); transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease); } .socials a svg{width:17px;height:17px} .socials a:hover{background:var(--copper-600);border-color:var(--copper-600);color:#fff;transform:translateY(-3px)} /* Powered by Launch Automation - present and clearly legible, but dialled back one notch from the original so it reads as a credit, not a second brand. */ .powered{ position:relative;z-index:1;border-top:1px solid rgba(240,213,184,.12); background:linear-gradient(180deg,rgba(192,118,47,.045),rgba(5,14,28,0)); } .powered-inner{ padding-block:22px;display:flex;align-items:center;justify-content:center; gap:clamp(10px,1.6vw,18px);flex-wrap:wrap;text-align:center; } .powered-label{font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#8497AD} .powered-brand{ display:inline-flex;align-items:center;gap:.62rem;padding:.5rem 1.05rem;border-radius:999px; border:1px solid rgba(240,213,184,.2);background:rgba(192,118,47,.075); font-family:var(--ff-display);font-size:clamp(1.06rem,1.5vw,1.24rem);font-weight:600; letter-spacing:.005em;color:#EEF3F9; transition:background .35s,border-color .35s,transform .35s var(--ease),box-shadow .35s,color .35s; } .powered-brand .pb-mark{width:18px;height:18px;flex:none;color:var(--copper-300);transition:transform .5s var(--ease)} .powered-brand:hover{background-image:var(--btn-spec),var(--btn-body);background-size:100% 11px,100% 100%;background-repeat:no-repeat;border-color:var(--btn-edge);color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,238,214,.3),0 10px 24px rgba(150,78,16,.32)} .powered-brand:hover .pb-mark{color:#fff;transform:rotate(180deg)} .powered-brand em{font-style:normal;color:var(--copper-300);transition:color .35s} .powered-brand:hover em{color:#fff} .powered-tag{font-size:.79rem;color:#8497AD;letter-spacing:.03em} @media (max-width:640px){ .powered-tag{display:none} .powered-inner{padding-block:18px;gap:10px} } .legal{border-top:1px solid rgba(240,213,184,.11);position:relative;z-index:1} .legal-inner{padding-block:22px;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;font-size:.83rem;color:#93A6BC} .legal-links{display:flex;gap:1.4rem;flex-wrap:wrap} .legal-links a:hover{color:var(--copper-200)} .disclaimer{padding-bottom:26px;position:relative;z-index:1} .disclaimer p{font-size:.775rem;line-height:1.7;color:#7B8EA4;max-width:110ch} /* back to top */ .totop{ position:fixed;right:22px;bottom:22px;z-index:60;width:48px;height:48px;border-radius:50%; background:var(--navy-900);color:var(--copper-300);display:grid;place-items:center; box-shadow:var(--shadow);border:1px solid rgba(240,213,184,.24); opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .35s,visibility .35s,transform .35s var(--ease),background .3s,color .3s; } .totop.show{opacity:1;visibility:visible;transform:none} .totop:hover{background:var(--copper-600);color:#fff} .totop svg{width:18px;height:18px} /* ---------- Motion (GSAP progressive enhancement) ---------- */ /* Content is NEVER pre-hidden in CSS. site.js hides below-the-fold items inline and an IntersectionObserver reveals them, with a timeout safety net. If JS or GSAP fails to load, everything is simply visible. */ .reveal,[data-hero]{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} .reveal,[data-hero]{opacity:1!important;transform:none!important} } /* ---------- Responsive ---------- */ @media (max-width:1080px){ .nav{display:none} .btn-portal{display:none} /* the drawer carries the portal link */ .burger{display:block} .footer-grid{grid-template-columns:1fr 1fr;gap:40px} .hero-grid{grid-template-columns:1fr;gap:44px} .hero-mark{right:-30vw;width:150vw;opacity:.045} .contact-grid{grid-template-columns:1fr} .contact-grid > :first-child{margin-top:0} .steps{grid-template-columns:1fr 1fr;gap:34px} .trust-grid{grid-template-columns:1fr 1fr} .trust-item:nth-child(3){border-left:0} .trust-item:nth-child(n+3){border-top:1px solid rgba(240,213,184,.11)} } @media (max-width:860px){ :root{--header-h:74px} .brand{--brand-h:48px} .split{grid-template-columns:1fr} .rrr{grid-template-columns:1fr} .rrr-item{padding-top:20px} .frame-offset::before{inset:16px -16px -16px 16px} .stat-badge{left:auto;right:-8px;bottom:-20px;padding:16px 20px} .stat-badge b{font-size:2rem} .cta-inner{flex-direction:column;align-items:flex-start} } @media (max-width:640px){ body{font-size:16.5px} .wrap{padding-inline:18px} /* everything in the header row has to fit inside ~354px */ .header-inner{gap:.5rem} .header-cta{gap:.5rem;margin-left:auto} .brand{--brand-h:40px} .header-cta .tel-txt{display:none} .tel-link .tel-ic{width:38px;height:38px} .tel-link .tel-ic svg{width:16px;height:16px} .header-cta .btn{padding:.6rem .95rem;font-size:.72rem;letter-spacing:.05em} .burger{width:42px;height:42px} .mnav a{font-size:1.6rem} .opts.two{grid-template-columns:1fr} .field-row{grid-template-columns:1fr;gap:0} .field-row .field{margin-bottom:1.05rem} .steps{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:34px} .trust-grid{grid-template-columns:1fr} .trust-item{border-left:0;border-top:1px solid rgba(240,213,184,.11);padding:24px} .trust-item:first-child{border-top:0} .legal-inner{flex-direction:column;text-align:center} .summary dl{grid-template-columns:1fr;gap:.15rem .5rem} .summary dt{margin-top:.6rem} .hero-actions .btn{width:100%} } @media (max-width:400px){ .wrap{padding-inline:16px} .brand{--brand-h:36px} .header-inner{gap:.4rem} .header-cta{gap:.4rem} .tel-link .tel-ic{width:34px;height:34px} .header-cta .btn{padding:.58rem .8rem;font-size:.7rem;letter-spacing:.03em} .burger{width:38px;height:38px} .mnav a{font-size:1.5rem} } @media print{ .site-header,.mnav,.totop,.site-footer,.form-shell{display:none!important} body{background:#fff;color:#000} } /* ========================================================================== POLISH LAYER Restrained detail only. Nothing here gates content visibility, nothing here is required for the page to work, and all of it collapses under prefers-reduced-motion (see the block at the end of the responsive section). ========================================================================== */ :root{ /* fine film grain, generated inline so it costs no request */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } /* ---------- 1. numerals ---------- */ .trust-n,.stat-badge b,.card-num,.tel-txt,.fc-item b,.info-item dd{font-variant-numeric:tabular-nums} /* ---------- 2. dark sections: seam hairline, grain, vignette ---------- */ .bg-navy-grad{box-shadow:inset 0 1px 0 rgba(224,177,131,.15)} /* Layer opacity is deliberately low and the per-layer alpha compensates, so the weave keeps its original weight while the grain stays a whisper. */ .texture::after{ background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.11) 0 1px,transparent 1px 7px), var(--grain); background-size:auto, 140px 140px; opacity:.10; z-index:0; } .hero::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(125% 95% at 50% 38%,transparent 46%,rgba(4,11,22,.32) 100%); } /* ---------- 4. header condenses on scroll ---------- Do NOT animate min-height or the logo's height here. A sticky element is in flow, so changing its height changes document height, which changes scrollY, which re-fires the scroll handler - the header oscillates continuously. Transform costs no layout, so the condense is done with scale instead. The condense scales the whole .brand, NOT the two images: .brand-mark owns its transform for the spin, and a second rule on the same property would cancel it. */ .brand{transform-origin:left center;transition:transform .38s var(--ease)} .site-header.is-stuck .brand{transform:scale(.86)} .header-cta{transition:transform .38s var(--ease)} .site-header.is-stuck .header-cta{transform:scale(.94)} /* ---------- 4b. the mark spins in on arrival ---------- Three full turns, decelerating, then a short overshoot and settle. Rotation, scale and opacity are animated as SEPARATE transform properties rather than as one packed `transform`, because a keyframe's easing is re-applied between every pair of keyframes. Packed into one transform the turn needed an intermediate keyframe to carry the mid-spin shrink, so the ease-out ran twice: it decelerated almost to a stop at that keyframe and then re-accelerated for the last stretch. That double deceleration was the hitch that read as clunky. Split apart, the turn is a single uninterrupted segment - it can only decelerate, so it cannot hitch - and scale is free to run its own curve underneath it. The scale curve has a job beyond decoration: the mark renders 67.8 x 60px, which sweeps a 90px bounding box at 45deg, and the header band is only 84px. So it shrinks through the fast part of the turn to stay off the edges, is back to full size as the spin lands, and only then pops. The pop peaks upright, after the rotation has finished, so it reads as a landing rather than as part of the turn. Fill is `backwards`, not `both`: forwards-filled animations outrank plain declarations forever, which would leave the hover scale below permanently dead. Backwards still holds the 0% frame through the delay, and releases each property to its resting value once the animation ends. */ @keyframes brand-spin{ from{rotate:0deg} to {rotate:1080deg} } @keyframes brand-turn{ from{rotate:0deg} to {rotate:360deg} } @keyframes brand-pop{ 0% {scale:.72; animation-timing-function:cubic-bezier(.22,.61,.36,1)} 8% {scale:.84; animation-timing-function:linear} 46% {scale:.86; animation-timing-function:cubic-bezier(.3,0,.2,1)} 72% {scale:1; animation-timing-function:cubic-bezier(.34,.9,.5,1)} 84% {scale:1.07; animation-timing-function:cubic-bezier(.22,.61,.36,1)} 100% {scale:1} } @keyframes brand-fade{from{opacity:0} to{opacity:1}} .brand-mark{ transform-origin:50% 50%; scale:1; /* pop reaches full size at 72% of 1.6s = 1.25s, exactly where the 1.25s turn lands; it peaks at 1.44s and is settled by 1.7s. */ animation: brand-spin 1.25s cubic-bezier(.15,.85,.25,1) .1s backwards, brand-pop 1.6s linear .1s backwards, brand-fade .28s var(--ease) .1s backwards; } /* Hover repeats the same signature - turn, land, pop - one turn instead of three. It is fine-pointer only: a phone fires :hover on the tap that navigates home, so a touch visitor was getting a spin on the way out. Scale must dip here too, and it has to dip FASTER than the turn reaches its first 45deg, or the mark sweeps a 96px box out of an 85px header. That is why the turn carries a 60ms delay: it gives the shrink a head start, so the widest moment of the rotation lands at scale .88 (80px) instead of at full size. The turn is deliberately the shorter of the two, so scale is back at full size exactly as the rotation stops and the pop reads as the landing. The resting transition below is what carries scale home if the pointer leaves mid-turn: the animation is removed, and the transition eases the value back instead of snapping it. */ @media (hover:hover) and (pointer:fine){ .brand-mark{transition:scale .3s var(--ease)} .brand:hover .brand-mark,.brand:focus-visible .brand-mark{ animation: brand-turn .62s cubic-bezier(.16,.84,.28,1) .06s, brand-turn-pop .80s linear; } } @keyframes brand-turn-pop{ 0% {scale:1; animation-timing-function:cubic-bezier(.22,.61,.36,1)} 18% {scale:.85; animation-timing-function:linear} 55% {scale:.87; animation-timing-function:cubic-bezier(.34,.9,.5,1)} 85% {scale:1; animation-timing-function:cubic-bezier(.34,.9,.5,1)} 93% {scale:1.05; animation-timing-function:cubic-bezier(.22,.61,.36,1)} 100% {scale:1} } /* ---------- 5. eyebrow rules draw themselves in ---------- */ .anim-ready .reveal .eyebrow::before,.anim-ready .reveal.eyebrow::before, .anim-ready [data-hero] .eyebrow::before,.anim-ready [data-hero].eyebrow::before, .anim-ready .reveal .eyebrow.center::after,.anim-ready .reveal.eyebrow.center::after{ transform:scaleX(0);transform-origin:center; transition:transform .75s .12s var(--ease); } .anim-ready .is-in .eyebrow::before,.anim-ready .is-in.eyebrow::before, .anim-ready .is-in .eyebrow.center::after,.anim-ready .is-in.eyebrow.center::after{transform:scaleX(1)} /* ---------- 6. light cards: lifted-paper shadow + corner accent ---------- */ .card:not(.card-dark){ box-shadow:0 1px 1px rgba(5,14,28,.04),0 3px 10px rgba(5,14,28,.05); } .card:not(.card-dark):hover{ box-shadow:0 2px 4px rgba(5,14,28,.05),0 16px 42px rgba(5,14,28,.11); } .card:not(.card-dark)::after{ content:"";position:absolute;right:0;bottom:0;width:52px;height:52px;pointer-events:none; background:linear-gradient(135deg,transparent 50%,rgba(192,118,47,.11) 50%); opacity:0;transition:opacity .45s var(--ease); } .card:not(.card-dark):hover::after{opacity:1} /* ---------- 7. mouse-tracked spotlight on dark panels ---------- */ .spot{position:relative} .spot::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .45s var(--ease); background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(224,177,131,.14),transparent 62%); } .spot:hover::after{opacity:1} /* ---------- 8. service rows: copper rail grows on hover ---------- */ .svc-row{position:relative;overflow:hidden} .svc-row::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:linear-gradient(180deg,var(--copper-400),var(--copper-600)); transform:scaleY(0);transform-origin:top;transition:transform .42s var(--ease); } .svc-row:hover::before{transform:scaleY(1)} /* ---------- 9. resource cards: arrow rail ---------- */ .res-card::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:linear-gradient(90deg,var(--copper-600),var(--copper-300)); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease); } .res-card:hover::after{transform:scaleX(1)} /* ---------- 10. the brand panel breathes ---------- */ .brand-panel{position:relative;overflow:hidden} .brand-panel::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(420px circle at 50% 46%,rgba(192,118,47,.26),transparent 66%); animation:breathe 9s ease-in-out infinite; } .brand-panel img{position:relative;z-index:1} @keyframes breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}} /* ---------- 12. back-to-top carries a scroll-progress ring ---------- */ .totop{overflow:visible} /* must out-specify `.totop svg{width:18px;height:18px}` above, or the ring renders as an 18px circle floating off the corner of the button */ .totop .tt-ring{ position:absolute;inset:0;width:100%;height:100%; transform:rotate(-90deg);pointer-events:none;overflow:visible; } .totop .tt-ring circle{ fill:none;stroke:var(--copper-400);stroke-width:2;stroke-linecap:round; stroke-dasharray:var(--ttc,132);stroke-dashoffset:var(--tto,132); transition:stroke-dashoffset .12s linear; opacity:.9; } /* ---------- 13. form micro-detail ---------- */ .form-shell{box-shadow:var(--shadow-lg),0 0 0 1px rgba(240,213,184,.09)} .field:focus-within label,.field:focus-within .flabel{color:var(--copper-text)} .opt.sel .opt-box{animation:pop .38s var(--ease)} @keyframes pop{0%{transform:scale(.82)}55%{transform:scale(1.14)}100%{transform:scale(1)}} .chip.sel::before{ content:"";width:9px;height:5px;flex:none;margin-right:.1rem; border-left:1.9px solid currentColor;border-bottom:1.9px solid currentColor; transform:rotate(-45deg) translate(1px,-2px); animation:tickin .32s var(--ease); } @keyframes tickin{0%{opacity:0;transform:rotate(-45deg) translate(1px,-2px) scale(.4)}100%{opacity:1;transform:rotate(-45deg) translate(1px,-2px) scale(1)}} .progress i{transition:background .5s var(--ease),transform .5s var(--ease);transform-origin:left} .progress i.done{transform:scaleY(1.35)} .btn:focus-visible{outline-offset:4px} /* ---------- 14. FAQ: copper rail on the open item ---------- */ .faq-item{position:relative} .faq-item::before{ content:"";position:absolute;left:-14px;top:.9rem;bottom:.9rem;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--copper-500),var(--copper-300)); transform:scaleY(0);transform-origin:top;transition:transform .42s var(--ease); } .faq-item.open::before{transform:scaleY(1)} @media (max-width:640px){ .faq-item::before{left:-10px} } /* ---------- 15. links in prose get a drawn underline ---------- */ .prose a,.faq-a-inner a{ text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .35s var(--ease),color .25s; padding-bottom:1px; } .prose a:hover,.faq-a-inner a:hover{background-size:100% 2px;color:var(--copper-600)} /* ---------- 16. section headings get a hairline flourish ---------- */ .trust-item{position:relative;transition:background .45s var(--ease)} .trust-item:hover{background:rgba(192,118,47,.05)} /* ---------- 17. scrollbar ---------- */ @media (pointer:fine){ html{scrollbar-width:thin;scrollbar-color:var(--copper-500) var(--cream-200)} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:var(--cream-200)} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--copper-500),var(--copper-700)); border-radius:99px;border:3px solid var(--cream-100); } ::-webkit-scrollbar-thumb:hover{background:var(--copper-600)} } /* ---------- 18. reduced motion: strip the decorative layer ---------- */ @media (prefers-reduced-motion:reduce){ .brand-panel::before{animation:none;opacity:.7;transform:none} .brand-mark,.brand:hover .brand-mark,.brand:focus-visible .brand-mark{animation:none} .spot::after,.card:not(.card-dark)::after{display:none} .tt-ring{display:none} .btn::after,.btn-lg::after{display:none} .anim-ready .reveal .eyebrow::before,.anim-ready .reveal.eyebrow::before, .anim-ready [data-hero] .eyebrow::before,.anim-ready [data-hero].eyebrow::before, .anim-ready .reveal .eyebrow.center::after,.anim-ready .reveal.eyebrow.center::after{transform:scaleX(1)} } /* ========================================================================== POLISH PASS 2 - corrections from the accessibility, SEO and copy audits ========================================================================== */ /* Heading levels were skipping (H1 to H3, H2 to H4). The tags changed; these keep the type scale exactly where it was. */ .hc-title{font-size:1.5rem;line-height:1.2;letter-spacing:-.012em;color:#fff;margin-bottom:.35rem} .rrr-h{font-family:var(--ff-display);font-size:1.55rem;font-weight:600;letter-spacing:-.01em;line-height:1.15;margin-bottom:.5rem} .step-h{font-family:var(--ff-display);font-size:1.4rem;font-weight:600;line-height:1.15;margin-bottom:.45rem} .card-h{font-family:var(--ff-ui);font-size:1.1rem;font-weight:600;letter-spacing:.005em;line-height:1.4} .res-h{ font-family:var(--ff-ui);font-size:1.04rem;font-weight:600;letter-spacing:.005em;line-height:1.4; display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem; } .res-h .ext{width:14px;height:14px;color:var(--copper-500);flex:none;transition:transform .3s var(--ease)} .res-card:hover .res-h .ext{transform:translate(3px,-3px)} .bg-navy .rrr-h,.bg-navy-grad .rrr-h,.bg-navy .step-h,.bg-navy-grad .step-h, .bg-navy .card-h,.bg-navy-grad .card-h{color:#fff} /* Contact panel: dt and dd are now direct children of the wrapper div, which is what the spec requires. Layout is icon + label on one line, value beneath. */ .info-item{ display:grid;grid-template-columns:40px 1fr;column-gap:1rem;row-gap:.3rem; align-items:start; } .info-item dt{grid-column:1 / -1;display:flex;align-items:center;gap:1rem;margin:0} .info-item .ik{ font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#9FB2C9; } .info-item dd{grid-column:2;margin:0;font-size:1.02rem;color:#EAF0F7;line-height:1.55;font-weight:500} /* Pointer targets: these text links measured 22 to 24px tall, just under the 24px minimum. Padding, not font size, so nothing reflows. */ .link-gold{padding-block:3px} .legal-links a{padding-block:4px} .fc-item a{display:inline-block;padding-block:2px} .info-item dd a{display:inline-block;padding-block:2px} .note a,.prose a,.faq-a-inner a,.fineprint a{padding-block:2px} /* Record retention reads far better as a table, and answer engines extract it. */ .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1.1rem} table.rt{width:100%;border-collapse:collapse;font-size:.98rem;min-width:460px} table.rt caption{ caption-side:top;text-align:left;font-size:.7rem;font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:var(--muted);padding-bottom:.7rem; } table.rt th,table.rt td{padding:.78rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} table.rt thead th{ font-family:var(--ff-ui);font-size:.7rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--navy-800);border-bottom:2px solid var(--copper-500); } table.rt tbody th{font-weight:600;color:var(--navy-900);white-space:nowrap;width:1%} table.rt tbody tr:last-child th,table.rt tbody tr:last-child td{border-bottom:0} table.rt tbody tr{transition:background .3s} table.rt tbody tr:hover{background:var(--cream-100)} /* ---------- Map band ---------- Was a small panel inside the contact card, which left the shorter form column with dead space beside it. Full width below the grid instead. */ .map-band{ position:relative;margin-top:clamp(34px,4.5vw,60px); border-radius:var(--r-lg);overflow:hidden; border:1px solid rgba(240,213,184,.22); box-shadow:0 26px 70px rgba(2,7,16,.46),inset 0 1px 0 rgba(240,213,184,.12); background:var(--navy-850); aspect-ratio:21/7; } .map-band iframe{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block; filter:grayscale(.48) contrast(1.06) brightness(.96); transition:filter .6s var(--ease); } .map-band:hover iframe{filter:grayscale(0) contrast(1) brightness(1)} .map-band::after{ content:"";position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(240,213,184,.10); border-radius:var(--r-lg); } .map-plate{ position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:2; background:linear-gradient(160deg,rgba(6,17,32,.93),rgba(4,11,22,.95)); border:1px solid rgba(240,213,184,.24);border-radius:var(--r); padding:16px 20px;max-width:min(92%,420px); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 14px 36px rgba(2,7,16,.45); } .map-plate-k{ display:block;font-size:.66rem;font-weight:600;letter-spacing:.19em; text-transform:uppercase;color:#9FB2C9;margin-bottom:.4rem; } .map-plate strong{display:block;color:#EAF0F7;font-size:1rem;font-weight:600;line-height:1.45} .map-plate .link-gold{margin-top:.7rem;color:var(--copper-300)} @media (max-width:1080px){ .map-band{aspect-ratio:16/9} } @media (max-width:640px){ .map-band{aspect-ratio:4/3;border-radius:var(--r)} .map-plate{left:12px;right:12px;bottom:12px;max-width:none;padding:14px 16px} .map-plate strong{font-size:.94rem} } /* ========================================================================== CARD FOOTERS ON A COMMON BASELINE Cards in a row hold different amounts of copy, so their calls to action sat at different heights. Each card is a column and its footer is pushed to the bottom, so every button in a row lines up regardless of the text above it. ========================================================================== */ .card{display:flex;flex-direction:column} .card > .card-cta{margin-top:auto;padding-top:1.6rem} .card-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center} /* buttons in a card footer must sit side by side; if a label is too long to fit the label gets shortened, the row does not wrap */ .card-cta .btn-sm{padding:.7rem 1.15rem;font-size:.755rem;letter-spacing:.07em} .card-cta .btn{flex:0 0 auto} /* the resource cards end in an IRS.GOV chip; pin it down so the row of chips is a straight line even when a title wraps to two lines */ .res-card{display:flex;flex-direction:column} .res-card p{flex:0 0 auto} .res-card .host{margin-top:auto;align-self:flex-start} /* a two-line card title must not push its own body down out of step */ .res-h{min-height:2.6em;align-items:flex-start} .vid{display:flex;flex-direction:column} .vid-body{display:flex;flex-direction:column;flex:1} .vid-body p{margin-top:.3rem} .acc-list .card h3{min-height:auto} /* ========================================================================== POLISH PASS 3 - motion layer Every rule here is decorative. Nothing in this block may hide content: the reveal states are applied by JS at runtime (see site.js) and carry a hard timeout, so a JS or CSS failure leaves the page fully readable. ========================================================================== */ /* ---------- 1. headlines are static ---------- Client rule (2026-08-17, repeated): headlines never animate, never hide, never change color mid-view. The word-split and shine effects that used to live here are deleted, not disabled. Do not reintroduce either. */ /* ---------- 2. magnetic primary buttons ---------- JS writes --mx/--my in px; the translate is capped by the clamp so the button can never wander off its own hit area. */ .btn{--mx:0px;--my:0px} @media (pointer:fine){ .btn.magnetic{ transform:translate3d(clamp(-9px,var(--mx),9px),clamp(-7px,var(--my),7px),0); transition:transform .45s cubic-bezier(.2,.8,.25,1),box-shadow .3s,filter .3s; } .btn.magnetic.is-pulling{transition:transform .12s linear} } /* ---------- 3. click ripple ---------- */ .btn .rip{ position:absolute;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(255,240,224,.55),rgba(255,240,224,0) 70%); transform:translate(-50%,-50%) scale(0);opacity:.9; animation:rip .62s cubic-bezier(.2,.7,.3,1) forwards; } @keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}} /* ---------- 4. cards: copper sheen sweep on hover ---------- A single skewed highlight crossing the card. Sits under the content (z-index 0 against the .card > * stacking already established above). */ .card,.res-card,.vid,.svc-row,.info-card{position:relative} .card::before,.res-card::before,.vid::before{ content:"";position:absolute;top:0;bottom:0;left:-60%;width:42%; background:linear-gradient(100deg, rgba(255,238,214,0) 0%,rgba(255,238,214,.13) 45%,rgba(255,238,214,0) 100%); transform:skewX(-14deg);opacity:0;pointer-events:none;z-index:0; } .card:hover::before,.res-card:hover::before,.vid:hover::before{ opacity:1;animation:sheen 1.05s cubic-bezier(.25,.6,.3,1); } .card-dark::before{background:linear-gradient(100deg, rgba(240,213,184,0) 0%,rgba(240,213,184,.10) 45%,rgba(240,213,184,0) 100%)} @keyframes sheen{from{left:-60%}to{left:120%}} /* the card itself lifts and the border warms */ .card,.res-card,.vid{ transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s; } .card:hover,.res-card:hover,.vid:hover{ transform:translateY(-4px);border-color:rgba(192,118,47,.34); } .card:not(.card-dark):hover,.res-card:hover,.vid:hover{box-shadow:var(--shadow)} /* ---------- 5. process rail draws itself ---------- */ .anim-ready .step::before{transform:scaleX(0);transform-origin:left center} .step.rail-in::before{ transform:scaleX(1); transition:transform .9s cubic-bezier(.22,.75,.25,1); transition-delay:calc(var(--i) * 110ms); } .anim-ready .step .step-dot{transform:scale(.2);opacity:0} .step.rail-in .step-dot{ transform:scale(1);opacity:1; transition:transform .55s cubic-bezier(.2,1.5,.4,1),opacity .4s; transition-delay:calc(var(--i) * 110ms + 120ms); } /* ---------- 6. photographs wipe up on first view, then drift ---------- */ .portrait-frame{--par:0px} .portrait-frame img{ transform:translate3d(0,var(--par),0) scale(1.045); transition:transform .7s cubic-bezier(.22,.75,.25,1); will-change:transform; } .anim-ready .portrait-frame::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg,var(--navy-950),var(--navy-900)); transform-origin:bottom center; } .portrait-frame.wipe-in::before{ transform:scaleY(0); transition:transform 1.05s cubic-bezier(.76,0,.24,1); } .portrait-frame.wipe-in img{transform:translate3d(0,var(--par),0) scale(1)} /* ---------- 7. nav: the existing per-link underline is the indicator. A sliding pill was tried here and removed: with the current-page underline also on screen, two marks at slightly different offsets read as a bug. ---- */ /* ---------- 8. (removed) heading shine ---------- The one-time gradient sweep set color:transparent on h1/h2 for 1.9s, which made headlines vanish and reappear. Removed permanently per client. */ /* ---------- 9. cross-page transition (progressive enhancement) ---------- */ /* The browser default here is a true cross-fade between the two snapshots. A hand-written ::view-transition-new that starts at opacity 0 is NOT the same thing: it fades the incoming page up from blank, which reads as a flash on a slow paint. Keep the default. */ @view-transition{navigation:auto} /* ---------- 10. tap comfort on the smallest phones ---------- WCAG 2.5.8 only asks for 24px, but a 34px phone chip is still a miss on a 320px screen. These pad the hit area without changing the visual size. */ @media (max-width:400px){ .tel-link .tel-ic{width:40px;height:40px} .burger{width:44px;height:44px} .header-cta .btn{padding-block:.72rem} .brand{padding-block:4px} } /* ---------- reduced motion: the whole layer stands down ---------- */ @media (prefers-reduced-motion:reduce){ .btn.magnetic{transform:none} .card::before,.res-card::before,.vid::before{display:none} .card:hover,.res-card:hover,.vid:hover{transform:none} .anim-ready .step::before,.anim-ready .step .step-dot{transform:none;opacity:1} .anim-ready .portrait-frame::before{display:none} .portrait-frame img{transform:none} @view-transition{navigation:none} } /* ---------- 11. touch devices get the same feedback, by press instead of hover The sheen, the lift and the magnetic pull are all hover- or fine-pointer- driven, which means a phone gets none of them. These give a touch visitor the same physical response on press. ---------- */ @media (hover:none){ .card,.res-card,.vid,.svc-row{ transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s; } .card:active,.res-card:active,.vid:active,.svc-row:active{ transform:scale(.985);border-color:rgba(192,118,47,.42); } .btn:active{transform:scale(.965)} .btn{transition:transform .16s var(--ease),box-shadow .3s,filter .3s} /* the sheen has no hover to fire from, so run it once on press */ .card:active::before,.res-card:active::before,.vid:active::before{ opacity:1;animation:sheen .8s cubic-bezier(.25,.6,.3,1); } .tel-link:active .tel-ic,.totop:active{transform:scale(.92)} .tel-link .tel-ic{transition:transform .16s var(--ease)} } @media (hover:none) and (prefers-reduced-motion:reduce){ .card:active,.res-card:active,.vid:active,.svc-row:active,.btn:active{transform:none} .card:active::before,.res-card:active::before,.vid:active::before{display:none} } /* ---------- Mobile sticky CTA bar (TaxFocused Collab) ---------- */ .mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr 1.7fr;gap:.45rem;background:rgba(5,14,28,.96);backdrop-filter:blur(8px);padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom));border-top:1px solid rgba(240,213,184,.16);transform:translateY(0);transition:transform .35s var(--ease)} .mcta a{display:flex;align-items:center;justify-content:center;min-height:46px;font-family:var(--ff-ui);font-weight:600;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--cream-100);border:1px solid rgba(240,213,184,.26);border-radius:10px;text-decoration:none} .mcta .mcta-main{background-image:var(--btn-spec),var(--btn-body);background-size:100% 11px,100% 100%;background-repeat:no-repeat;color:#071223;border-color:var(--btn-edge);font-weight:700} .mcta.mcta-hide{transform:translateY(120%)} @media (min-width:900px){.mcta{display:none !important}} @media (max-width:899px){.mcta{display:grid}body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}} @media (prefers-reduced-motion: reduce){.mcta{transition:none}} /* ---------- Section video backgrounds (client request 2026-08-17) ---------- */ .sec-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--navy-950)} .sec-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sec-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,14,28,.74) 0%,rgba(5,14,28,.58) 45%,rgba(5,14,28,.72) 100%)} .sec:has(> .sec-media){position:relative;overflow:hidden} .sec-media ~ .wrap,.phero > .wrap{position:relative;z-index:1} /* boxless promise items on dark video sections */ .why-item{padding:24px 0 0;border-top:2px solid var(--copper-500)} .why-item h3{font-family:var(--ff-display);font-size:1.45rem;font-weight:600;color:#fff;margin-bottom:.5rem} .bg-navy-grad .why-item p,.bg-navy .why-item p{color:#C6D3E4} /* ---------- Google reviews (real, from the firm's public listing) ---------- */ .rev-band{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:clamp(30px,3.5vw,44px)} .rev-score{font-family:var(--ff-display);font-weight:600;font-size:clamp(2.6rem,4vw,3.4rem);line-height:1;color:var(--ink)} .rev-stars{display:inline-flex;gap:.22rem} .rev-stars svg{width:26px;height:26px;fill:var(--copper-600)} .rev-stars-sm{margin-bottom:.9rem} .rev-stars-sm svg{width:17px;height:17px} .rev-q{margin:0 0 1.1rem;padding:0;border:0} .rev-q p{font-family:var(--ff-display);font-size:1.13rem;line-height:1.6;color:var(--ink);font-style:italic} .rev-who{display:flex;flex-direction:column;gap:.15rem;border-top:1px solid var(--line);padding-top:.9rem} .rev-who b{font-weight:600;letter-spacing:.01em} .rev-who span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} @media (max-width:640px){.rev-band{gap:.7rem}.rev-stars svg{width:21px;height:21px}} /* ---------- Hero cutout figure (client request 2026-08-17) ---------- Anchored flush to the hero's bottom edge over the video, no frame, no background: the next section's edge cuts the figure straight, per the approved reference. Text column keeps its grid cell so copy never runs under the figure. */ .hero .wrap{position:relative;z-index:2} /* Anchored to the centered layout (50% + offset), not the viewport edge, so Miguel sits in the right column of the grid at every width instead of drifting to the screen edge on wide monitors. */ .hero-figure{position:absolute;left:calc(50% + 48px);right:auto;bottom:0;top:auto;margin:0;z-index:2;pointer-events:none;line-height:0} .hero-figure img{height:min(620px,84vh);width:auto;display:block;filter:drop-shadow(0 30px 60px rgba(3,9,18,.6)) drop-shadow(0 6px 18px rgba(3,9,18,.45))} .hero-fig-slot{min-height:420px} @media (max-width:1180px){.hero-figure img{height:min(480px,72vh)}} /* ---------- gold key words in headlines ---------- .gw marks a key phrase. Bright gold on dark sections; the AA-safe copper on cream so small-viewport sizes still pass contrast. Color only, no gradient/clip tricks: those are what made headlines disappear. */ /* Solid-color fallback first: if background-clip:text is unsupported the glyphs stay painted in flat gold. The @supports block below switches the paint to the metallic gradient. Static styling only - nothing here toggles, animates, or depends on JS. */ .gw,.card-num{color:var(--copper-text)} .hero .gw,.phero .gw,.bg-navy .gw,.bg-navy-grad .gw,.cta-band .gw, .trust-n,.stat-badge b, .bg-navy .card-num,.bg-navy-grad .card-num,.card-dark .card-num{color:var(--copper-300)} .gw,.card-num,.trust-n,.stat-badge b{ background-image:var(--gold-deep); -webkit-background-clip:text;background-clip:text; } .hero .gw,.phero .gw,.bg-navy .gw,.bg-navy-grad .gw,.cta-band .gw, .trust-n,.stat-badge b, .bg-navy .card-num,.bg-navy-grad .card-num,.card-dark .card-num{ background-image:var(--gold-bright); } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .gw,.card-num,.trust-n,.stat-badge b, .hero .gw,.phero .gw,.bg-navy .gw,.bg-navy-grad .gw,.cta-band .gw, .bg-navy .card-num,.bg-navy-grad .card-num,.card-dark .card-num{color:transparent} } /* stat badge in normal flow (About: sits below the why-card, never over it) */ .stat-badge-flow{position:static;display:inline-block;margin-top:22px} /* ---------- footer map band + footer link icons ---------- */ .footer-map{padding:6px 0 44px} .footer-map .map-band{margin-top:0} .footer-links a{display:flex;align-items:center;gap:.6rem} .footer-links a::before{display:none} .footer-links a svg{width:15px;height:15px;flex:0 0 15px;color:var(--copper-300);opacity:.8;transition:opacity .25s} .footer-links a:hover svg{opacity:1} @media (max-width:860px){ .hero{padding-bottom:0;display:flex;flex-direction:column} .hero .wrap{order:1} .hero-figure{order:2;position:static;pointer-events:none;margin:2.2rem auto 0;text-align:center} .hero-grid{grid-template-columns:1fr} .hero-fig-slot{display:none} .hero-figure img{height:auto;width:min(74vw,360px);margin-inline:auto} }