/* v2 city template styles (self-hosted fonts + v2 design, from approved mockup) */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/montserrat-300.woff2) format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-400.woff2) format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-500.woff2) format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-600.woff2) format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-700.woff2) format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-800.woff2) format('woff2');} @font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/montserrat-400i.woff2) format('woff2');} @font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/spectral-300.woff2) format('woff2');} @font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-400.woff2) format('woff2');} @font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/spectral-500.woff2) format('woff2');} @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spectral-600.woff2) format('woff2');} @font-face{font-family:'Spectral';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/spectral-300i.woff2) format('woff2');} @font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/spectral-400i.woff2) format('woff2');} @font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/spectral-500i.woff2) format('woff2');} /* ================= TOKENS ================= */ :root{ --navy:#16283c; --navy-deep:#0f1d2d; --navy-soft:#22374e; --teal:#14907f; --teal-deep:#0e6f62; --gold:#F0B40C; --ground:#f4f8f8; /* cool near-white */ --ground-2:#e9f0f0; /* deeper cool band */ --card:#ffffff; --ink:#16283c; --ink-soft:#41556a; --ink-faint:#6b7d8f; --hairline:rgba(22,40,60,.14); --hairline-dark:rgba(255,255,255,.14); --disp:"Montserrat",sans-serif; --body:"Spectral",Georgia,serif; --shadow-photo:0 30px 60px -28px rgba(15,29,45,.45); --wrap:1320px; /* was 1200: the page was capped well inside a 1440 screen and left ~720px unused at 1920 */ } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ background:var(--ground); color:var(--ink); font-family:var(--body); font-size:17.5px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:var(--teal-deep); } ::selection{ background:var(--teal); color:#fff; } /* filmic grain, very quiet */ body::after{ content:""; position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.035; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,4vw,48px); } /* type voices */ .kicker{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--teal-deep); display:flex; align-items:center; gap:14px; margin-bottom:20px; } .kicker::before{ content:""; width:34px; height:2px; background:var(--gold); flex-shrink:0; } h1,h2,h3{ font-family:var(--disp); color:var(--navy); } h2{ font-weight:800; font-size:clamp(34px,4.6vw,62px); line-height:1.04; letter-spacing:-0.015em; text-wrap:balance; } .scene{ font-family:var(--body); font-style:italic; font-weight:500; font-size:clamp(25px,3.3vw,44px); line-height:1.32; letter-spacing:-0.005em; color:var(--navy); text-wrap:balance; } .prose p{ max-width:64ch; color:var(--ink-soft); } .prose p + p{ margin-top:1.1em; } .prose strong{ font-weight:600; color:var(--navy); } /* buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; padding:17px 30px; border-radius:3px; border:2px solid transparent; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease; white-space:nowrap; cursor:pointer; } .btn-teal{ background:var(--teal); color:#fff; box-shadow:0 14px 28px -14px rgba(14,111,98,.6); } .btn-teal:hover{ background:var(--teal-deep); transform:translateY(-2px); box-shadow:0 18px 32px -14px rgba(14,111,98,.7); } .btn-ghost{ border-color:rgba(255,255,255,.7); color:#fff; background:rgba(22,40,60,.12); } .btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; } .btn-navy{ background:var(--navy); color:#fff; } .btn-navy:hover{ background:var(--navy-deep); transform:translateY(-2px); } .btn-ghost-navy{ border-color:var(--navy); color:var(--navy); background:transparent; } .btn-ghost-navy:hover{ background:var(--navy); color:#fff; } .btn-white{ background:#fff; color:var(--navy); } .btn-white:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(15,29,45,.5); } /* reveals: visible without JS */ html.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); } html.js .rv.in{ opacity:1; transform:none; } html.js .rv.d1{ transition-delay:.08s; } html.js .rv.d2{ transition-delay:.16s; } html.js .rv.d3{ transition-delay:.24s; } @media (prefers-reduced-motion:reduce){ html.js .rv{ opacity:1; transform:none; transition:none; } } /* ================= HEADER ================= */ .topbar{ position:sticky; top:0; z-index:60; background:rgba(244,248,248,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline); transition:box-shadow .25s ease; } .topbar.scrolled{ box-shadow:0 10px 30px -18px rgba(15,29,45,.35); } .topbar .wrap{ display:flex; align-items:center; gap:26px; height:72px; } .topbar .logo img{ height:34px; width:auto; } .topnav{ display:flex; gap:24px; margin-left:auto; align-items:center; } .topnav a.navlink{ font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); } .topnav a.navlink:hover{ color:var(--teal-deep); } .topnav a.phone{ font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--navy); text-decoration:none; } .topnav .btn{ padding:12px 20px; font-size:12.5px; } @media (max-width:1060px){ .topnav a.navlink{ display:none; } } @media (max-width:560px){ .topnav a.phone{ display:none; } .topbar .wrap{ height:64px; } .topbar .logo img{ height:28px; } } /* ================= HERO ================= */ .hero{ position:relative; min-height:min(96vh,980px); display:flex; align-items:flex-end; overflow:hidden; background:var(--navy); } .hero .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 42%; transform:scale(1.06); animation:heroSettle 2.8s cubic-bezier(.2,.6,.2,1) forwards; } @keyframes heroSettle{ to{ transform:scale(1.0); } } @media (prefers-reduced-motion:reduce){ .hero .bg{ animation:none; transform:none; } } .hero .scrim{ position:absolute; inset:0; background: linear-gradient(to top, rgba(15,29,45,.92) 0%, rgba(15,29,45,.42) 34%, rgba(15,29,45,.08) 60%), linear-gradient(98deg, rgba(15,29,45,.86) 0%, rgba(15,29,45,.5) 36%, rgba(15,29,45,.12) 62%, rgba(15,29,45,0) 80%); } @media (max-width:700px){ .hero .scrim{ background: linear-gradient(to top, rgba(15,29,45,.95) 0%, rgba(15,29,45,.62) 40%, rgba(15,29,45,.42) 72%, rgba(15,29,45,.58) 100%); } .hero .kicker, .hero .factline{ text-shadow:0 1px 12px rgba(15,29,45,.65); } } .hero .wrap{ position:relative; z-index:2; width:100%; padding-top:150px; padding-bottom:clamp(120px,14vh,180px); } .hero .kicker{ color:var(--gold); margin-bottom:14px; } .hero .kicker::before{ background:var(--gold); } .hero .factline{ font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.78); margin-bottom:26px; } .hero h1{ color:#fff; font-weight:800; letter-spacing:-0.02em; font-size:clamp(44px,7vw,98px); line-height:.99; max-width:13ch; margin-bottom:26px; text-wrap:balance; text-shadow:0 2px 30px rgba(15,29,45,.4); } .hero .lede{ font-family:var(--body); font-size:clamp(18px,1.7vw,22px); line-height:1.6; color:rgba(255,255,255,.94); max-width:56ch; margin-bottom:16px; } .hero .hero-tag{ margin-top:0; } .hero .factline{ margin-bottom:26px; } .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; } /* ================= CREDENTIALS: the verdict card ================= */ .cred{ position:relative; z-index:5; } .cred-card{ max-width:var(--wrap); margin:clamp(-96px,-9vw,-70px) auto 0; background:var(--navy); color:#fff; border-radius:4px; box-shadow:0 40px 80px -34px rgba(15,29,45,.6); border-top:3px solid var(--gold); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4vw,64px); padding:clamp(30px,4vw,54px) clamp(24px,4vw,56px) clamp(30px,4vw,48px); } @media (max-width:1240px){ .cred-card{ margin-left:clamp(20px,4vw,48px); margin-right:clamp(20px,4vw,48px); } } .cred-intro .lead-in{ font-family:var(--body); font-style:italic; font-size:16.5px; line-height:1.65; color:rgba(255,255,255,.72); margin-bottom:14px; } .cred-intro h2{ color:#fff; font-size:clamp(24px,2.6vw,34px); font-weight:800; line-height:1.12; letter-spacing:-0.01em; margin-bottom:18px; } .cred-note{ font-family:var(--body); font-style:italic; font-size:15.5px; line-height:1.6; color:var(--gold); border-left:2px solid var(--gold); padding-left:16px; margin-top:20px; } .cred-rows{ align-self:center; } .cred-row{ display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--hairline-dark); } .cred-row:last-child{ border-bottom:none; } .cred-row .lbl{ font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); white-space:nowrap; } .cred-row .dots{ flex:1; border-bottom:1px dotted rgba(255,255,255,.28); transform:translateY(-4px); } .cred-row .val{ font-family:var(--disp); font-weight:700; font-size:15.5px; color:#fff; letter-spacing:.02em; white-space:nowrap; } .cred-row .val .star{ color:var(--gold); margin-right:4px; } @media (max-width:880px){ .cred-card{ grid-template-columns:1fr; } .cred-row .lbl{ white-space:normal; } } /* ================= PROMISES ================= */ .promises{ padding:clamp(90px,11vw,160px) 0 clamp(80px,9vw,130px); } .promises-head{ max-width:840px; margin-bottom:clamp(44px,6vw,72px); } .promises-head .dek{ margin-top:20px; font-size:19px; color:var(--ink-soft); max-width:58ch; } .promise-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); } .promise{ background:var(--card); border:1px solid var(--hairline); border-radius:4px; padding:clamp(26px,3vw,40px) clamp(24px,3vw,38px) clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; } .promise::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; } .promise:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -28px rgba(15,29,45,.35); } .promise:hover::before{ transform:scaleX(1); } .promise h3{ font-weight:800; font-size:clamp(19px,1.8vw,23px); line-height:1.2; letter-spacing:-0.01em; } .promise p{ font-size:16.5px; color:var(--ink-soft); flex:1; } .promise a{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; color:var(--teal-deep); display:inline-flex; align-items:center; gap:8px; } .promise a::after{ content:"\2192"; transition:transform .2s ease; } .promise a:hover::after{ transform:translateX(4px); } @media (max-width:820px){ .promise-grid{ grid-template-columns:1fr; } } /* ================= PROOF CORE ================= */ .proof{ background:var(--card); border-top:1px solid var(--hairline); padding:clamp(90px,11vw,160px) 0 0; } .proof-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,5vw,88px); align-items:start; margin-bottom:clamp(60px,7vw,100px); } .proof-grid .sticky{ position:sticky; top:112px; } .proof-grid h2{ margin-bottom:22px; } .proof-grid .dek{ font-size:19px; color:var(--ink-soft); max-width:44ch; font-style:italic; } .proof-prose p{ font-size:18.5px; } @media (max-width:880px){ .proof-grid{ grid-template-columns:1fr; } .proof-grid .sticky{ position:static; } } /* full bleed photo moments */ .bleed{ position:relative; overflow:hidden; } .bleed img{ width:100%; height:clamp(380px,62vh,720px); object-fit:cover; } html.js .bleed img{ transform:scale(1.05); transition:transform 1.6s cubic-bezier(.2,.6,.2,1); } html.js .bleed.in img{ transform:scale(1); } .bleed .cap{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top, rgba(15,29,45,.78), rgba(15,29,45,0)); padding:70px clamp(20px,4vw,48px) 22px; } .bleed .cap p{ max-width:var(--wrap); margin:0 auto; font-family:var(--body); font-style:italic; font-size:15.5px; color:rgba(255,255,255,.92); } .proof-close{ padding:clamp(70px,9vw,120px) 0 clamp(80px,10vw,140px); } .proof-close .prose{ margin:0 auto; max-width:760px; } .proof-close .prose p{ font-size:18.5px; max-width:none; } .pull{ text-align:center; margin:clamp(50px,7vw,90px) auto; font-family:var(--disp); font-weight:800; letter-spacing:-0.02em; font-size:clamp(34px,5.4vw,72px); line-height:1.04; color:var(--navy); max-width:16ch; text-wrap:balance; } .pull .accent{ color:var(--teal); } .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); max-width:900px; margin:clamp(50px,6vw,80px) auto 0; text-align:center; } .stat::before{ content:""; display:block; width:30px; height:2px; background:var(--gold); margin:0 auto 18px; } .stat .n{ font-family:var(--disp); font-weight:800; font-size:clamp(38px,4.6vw,60px); line-height:1; color:var(--navy); letter-spacing:-0.02em; } .stat .l{ font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px; } .seals{ display:flex; align-items:center; justify-content:center; gap:clamp(20px,3vw,36px); flex-wrap:wrap; margin-top:clamp(44px,5vw,64px); } .seals img{ height:clamp(88px,10vw,120px); width:auto; filter:drop-shadow(0 10px 20px rgba(15,29,45,.25)); } .seals .seal-line{ font-family:var(--body); font-style:italic; font-size:15.5px; color:var(--ink-soft); max-width:34ch; line-height:1.6; border-left:2px solid var(--gold); padding-left:18px; } @media (max-width:640px){ .stats{ grid-template-columns:1fr; gap:34px; } } /* ================= PRICING ================= */ .pricing{ background:var(--ground-2); border-top:1px solid var(--hairline); padding:clamp(90px,11vw,160px) 0 clamp(80px,10vw,140px); } .pricing .scene{ max-width:34ch; margin-bottom:clamp(40px,5vw,64px); } .pricing .scene .figures{ font-style:normal; font-weight:600; color:var(--teal-deep); } .pricing h2{ max-width:16ch; margin-bottom:26px; } .pricing-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,4.5vw,72px); align-items:start; } .pricing-prose p{ font-size:18px; } .price-card{ background:var(--card); border:1px solid var(--hairline); border-radius:4px; border-top:3px solid var(--teal); padding:clamp(24px,3vw,36px); box-shadow:0 26px 54px -30px rgba(15,29,45,.3); } .price-card .pc-kicker{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:10px; } .price-card h3{ font-weight:800; font-size:22px; margin-bottom:12px; } .price-card p{ font-size:16px; color:var(--ink-soft); margin-bottom:18px; } .price-card .pc-link{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--teal-deep); display:inline-flex; gap:8px; align-items:center; } .price-card .pc-link::after{ content:"\2192"; } .checklist{ margin-top:22px; background:var(--card); border:1px solid var(--hairline); border-radius:4px; padding:clamp(22px,2.6vw,30px); } .checklist .cl-title{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); margin-bottom:14px; } .checklist ul{ list-style:none; display:flex; flex-direction:column; gap:9px; } .checklist li{ display:flex; gap:12px; align-items:baseline; font-size:16.5px; color:var(--ink-soft); } .checklist li svg{ flex-shrink:0; transform:translateY(2px); } .candor{ margin-top:clamp(48px,6vw,72px); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,4.5vw,72px); align-items:center; } .candor .photo{ position:relative; border-radius:4px; overflow:hidden; box-shadow:var(--shadow-photo); } .candor .photo img{ width:100%; height:clamp(300px,36vw,460px); object-fit:cover; } .candor .photo figcaption{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top, rgba(15,29,45,.82), rgba(15,29,45,0)); padding:56px 24px 18px; font-family:var(--body); font-style:italic; font-size:15px; color:rgba(255,255,255,.92); } .candor-body .say-so{ font-family:var(--body); font-style:italic; font-size:clamp(19px,2vw,23px); line-height:1.55; color:var(--navy); border-left:3px solid var(--gold); padding-left:22px; margin-bottom:30px; } @media (max-width:880px){ .pricing-grid, .candor{ grid-template-columns:1fr; } } /* ================= TIMELINE ================= */ /* ---------- timeline (from B) ---------- */ .timeline{ background:#fff; border-top:1px solid var(--hairline); padding:clamp(64px,8vw,110px) 0 clamp(64px,8vw,100px); } .timeline .wrap{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px); align-items:start; } .tl-head{ position:sticky; top:112px; } .tl-head p{ margin-top:14px; font-size:18.5px; color:var(--ink-soft); max-width:34ch; } .steps{ position:relative; } .steps::before{ content:""; position:absolute; left:35px; top:16px; bottom:16px; width:4px; background:linear-gradient(var(--teal) 0 82%, rgba(20,144,127,.25)); } .step{ position:relative; display:grid; grid-template-columns:72px 1fr; gap:clamp(20px,3vw,32px); padding:19px 0; align-items:start; } .step .n{ position:relative; z-index:2; width:72px; height:72px; background:var(--navy); color:#fff; font-family:var(--disp); font-weight:900; font-size:30px; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 26px -12px rgba(15,29,44,.55); } .step:nth-child(even) .n{ background:var(--teal); } .step .txt{ padding-top:10px; font-size:19px; color:var(--ink-soft); max-width:52ch; } .step .txt b{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:18px; letter-spacing:.02em; color:var(--navy); margin-right:2px; } @media (max-width:900px){ .timeline .wrap{ grid-template-columns:minmax(0,1fr); } .tl-head{ position:static; } } @media (max-width:640px){ .steps::before{ left:24px; } .step{ grid-template-columns:50px 1fr; } .step .n{ width:50px; height:50px; font-size:21px; } .step .txt{ padding-top:4px; font-size:17.5px; } } /* ---------- booking band (from B) ---------- */ .bookband{ background:var(--teal); color:#fff; padding:clamp(58px,7vw,92px) 0; position:relative; overflow:hidden; } .bookband::before{ content:""; position:absolute; inset:0; background:radial-gradient(800px 400px at 90% 120%, rgba(15,29,44,.28), transparent 65%); pointer-events:none; } .bookband .wrap{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,4vw,64px); align-items:center; } .bookband h2{ color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:-.005em; font-size:clamp(30px,4.2vw,56px); line-height:1.03; text-wrap:balance; max-width:20ch; } .bookband p{ margin-top:14px; font-size:18.5px; color:rgba(255,255,255,.88); max-width:48ch; } .book-ctas{ display:flex; flex-direction:column; gap:14px; align-items:stretch; min-width:340px; } .book-ctas .btn{ justify-content:center; } @media (max-width:820px){ .bookband .wrap{ grid-template-columns:minmax(0,1fr); } .book-ctas{ max-width:420px; min-width:0; } } /* ---------- awards navy band (from B) ---------- */ .pullband{ background:var(--navy); color:#dfe7ee; padding:clamp(60px,8vw,100px) 0; position:relative; overflow:hidden; } .pullband::before{ content:""; position:absolute; inset:0; background:radial-gradient(1000px 500px at 85% 110%, rgba(20,144,127,.16), transparent 65%); pointer-events:none; } .pullband .wrap{ position:relative; } .pullband .bigpull{ font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:clamp(34px,5.6vw,72px); line-height:1.0; letter-spacing:-.01em; color:#fff; max-width:16ch; text-wrap:balance; } .pullband .bigpull .g{ color:var(--teal); } .pullband .after{ margin-top:26px; font-size:clamp(17.5px,1.8vw,20px); line-height:1.65; color:#d8e2ec; max-width:62ch; } .statrow{ margin-top:clamp(40px,5vw,60px); padding-top:clamp(28px,3vw,40px); border-top:1px solid rgba(255,255,255,.16); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,40px); } .statrow .stat .num{ font-family:var(--disp); font-weight:900; font-size:clamp(44px,5.4vw,76px); line-height:1; color:#fff; letter-spacing:-.01em; } .statrow .stat .num .u{ color:var(--teal); } .statrow .stat .lbl{ margin-top:8px; font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#8fa1b3; } .statrow .stat .lbl .stars{ color:var(--gold); font-size:13px; letter-spacing:.08em; margin-right:6px; } .sealrow{ margin-top:clamp(34px,4vw,48px); display:flex; align-items:center; gap:clamp(20px,3vw,36px); flex-wrap:wrap; } .sealrow img{ height:clamp(96px,10vw,132px); width:auto; filter:drop-shadow(0 10px 20px rgba(0,0,0,.4)); } .sealrow p{ font-family:var(--body); font-style:italic; font-size:15.5px; color:#d8e2ec; max-width:44ch; line-height:1.6; } @media (max-width:700px){ .statrow{ grid-template-columns:minmax(0,1fr); gap:22px; } } /* ================= CARE (dark) ================= */ .care{ background:var(--navy-deep); color:#dfe7ee; padding:clamp(70px,9vw,120px) 0; position:relative; overflow:hidden; } .care::before{ content:""; position:absolute; inset:0; background:radial-gradient(1100px 560px at 10% 0%, rgba(20,144,127,.14), transparent 60%); pointer-events:none; } .care .wrap{ position:relative; } .care .kicker{ color:var(--teal); } .care h2{ color:#fff; margin-bottom:26px; } .care .scene{ color:#e8eef4; margin-bottom:24px; } .care .prose{ color:#d8e2ec; font-size:18px; } .care .prose p{ color:#d8e2ec; } .care .prose strong{ color:#fff; } .care-pull{ margin:30px 0 0; padding:6px 0 6px 24px; border-left:3px solid var(--gold); font-family:var(--body); font-style:italic; font-weight:500; font-size:clamp(19px,2vw,23px); line-height:1.55; color:#fff; max-width:34em; } .care-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,72px); align-items:start; } .care-media{ display:flex; flex-direction:column; gap:22px; } .care-media figure img{ width:100%; aspect-ratio:16/11.5; object-fit:cover; box-shadow:0 34px 60px -30px rgba(0,0,0,.6); } .care-media figcaption{ margin-top:10px; font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.06em; color:#8fa1b3; line-height:1.6; } .vidslot{ position:relative; background:var(--navy-soft); border:1px solid rgba(255,255,255,.12); aspect-ratio:16/8.5; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; cursor:pointer; transition:border-color .2s ease; } .vidslot:hover{ border-color:var(--teal); } .vidslot .play{ width:64px; height:64px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -10px rgba(20,144,127,.7); transition:transform .2s ease; } .vidslot:hover .play{ transform:scale(1.08); } .vidslot .vl{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#8fa1b3; } .vidslot .vt{ font-family:var(--body); font-style:italic; font-size:15.5px; color:#dfe7ee; } .care-ctas{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; } @media (max-width:900px){ .care-grid{ grid-template-columns:minmax(0,1fr); } } /* ================= REVIEWS ================= */ .reviews{ padding:clamp(90px,11vw,160px) 0 clamp(80px,10vw,140px); } .reviews-head{ text-align:center; max-width:760px; margin:0 auto clamp(48px,6vw,72px); } .reviews-head .stars{ font-size:26px; letter-spacing:8px; color:var(--gold); margin-bottom:18px; } .reviews-head .kicker{ justify-content:center; } .reviews-head .kicker::after{ content:""; width:34px; height:2px; background:var(--gold); flex-shrink:0; } .review-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); align-items:start; } .trophy{ background:#fff; border:1px solid var(--hairline); border-radius:4px; padding:18px 18px 14px; position:relative; box-shadow:0 40px 74px -32px rgba(15,29,45,.5); transition:transform .3s ease, box-shadow .3s ease; } .trophy::after{ content:""; position:absolute; left:18px; right:18px; bottom:8px; height:2px; background:var(--gold); opacity:.55; border-radius:1px; } .trophy img{ width:100%; height:auto; border-radius:2px; } .trophy:nth-child(1){ transform:rotate(-1.8deg) translateY(14px); } .trophy:nth-child(2){ transform:rotate(1.1deg) translateY(-10px); } .trophy:nth-child(3){ transform:rotate(-1.2deg) translateY(20px); } .trophy:hover{ transform:rotate(0deg) translateY(-2px) scale(1.02); box-shadow:0 48px 86px -34px rgba(15,29,45,.6); } .reviews-foot{ text-align:center; margin-top:clamp(48px,6vw,70px); } .reviews-foot .foot-line{ font-family:var(--body); font-style:italic; font-size:19px; color:var(--navy); margin-bottom:16px; } .reviews-foot a{ font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:var(--teal-deep); text-decoration:none; border-bottom:2px solid var(--teal); padding-bottom:3px; } .reviews-foot a:hover{ color:var(--navy); border-color:var(--gold); } @media (max-width:880px){ .review-row{ grid-template-columns:1fr; max-width:560px; margin:0 auto; } .trophy:nth-child(n){ transform:none; } } /* ================= FAQ ================= */ .faq{ background:var(--card); border-top:1px solid var(--hairline); padding:clamp(90px,11vw,150px) 0; } .faq-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,5vw,80px); align-items:start; } .faq-grid .sticky{ position:sticky; top:112px; } .faq-grid h2{ max-width:12ch; } .faq-grid .dek{ margin-top:18px; font-style:italic; font-size:18px; color:var(--ink-soft); max-width:38ch; } .qa{ border-bottom:1px solid var(--hairline); } .qa:first-of-type{ border-top:1px solid var(--hairline); } .qa summary{ list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:18px; padding:24px 0; font-family:var(--disp); font-weight:700; font-size:clamp(16.5px,1.7vw,19.5px); color:var(--navy); line-height:1.35; } .qa summary::-webkit-details-marker{ display:none; } .qa summary .tog{ flex-shrink:0; width:26px; height:26px; border-radius:50%; border:2px solid var(--teal); color:var(--teal-deep); display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; transform:translateY(4px); transition:transform .25s ease, background .25s ease, color .25s ease; } .qa[open] summary .tog{ background:var(--teal); color:#fff; transform:translateY(4px) rotate(45deg); } .qa .ans{ padding:0 0 26px 44px; } .qa .ans p{ font-size:17px; color:var(--ink-soft); max-width:62ch; } .qa .ans p + p{ margin-top:.9em; } @media (max-width:880px){ .faq-grid{ grid-template-columns:1fr; } .faq-grid .sticky{ position:static; } } /* ================= SERVICES ================= */ .services{ background:var(--ground-2); border-top:1px solid var(--hairline); padding:clamp(90px,11vw,150px) 0; } .services-grid{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(36px,5vw,80px); align-items:center; } .service-list{ list-style:none; margin-top:34px; } .service-list li{ border-bottom:1px solid var(--hairline); } .service-list li:first-child{ border-top:1px solid var(--hairline); } .service-list a{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 4px; text-decoration:none; font-family:var(--disp); font-weight:700; font-size:clamp(19px,2vw,25px); letter-spacing:-0.01em; color:var(--navy); transition:padding .22s ease, color .22s ease; } .service-list a::after{ content:"\2192"; color:var(--teal); font-weight:600; transition:transform .22s ease; } .service-list a:hover{ color:var(--teal-deep); padding-left:14px; } .service-list a:hover::after{ transform:translateX(6px); } .nearby{ margin-top:26px; font-family:var(--body); font-size:16.5px; color:var(--ink-soft); } .nearby a{ color:var(--teal-deep); font-weight:600; } .ba-pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .ba-pair figure{ position:relative; border-radius:4px; overflow:hidden; box-shadow:var(--shadow-photo); } .ba-pair img{ width:100%; height:clamp(200px,22vw,300px); object-fit:cover; } .ba-pair figcaption{ position:absolute; top:12px; left:12px; font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:rgba(15,29,45,.82); padding:6px 12px; border-radius:2px; } .ba-cap{ grid-column:1 / -1; font-family:var(--body); font-style:italic; font-size:15px; color:var(--ink-soft); margin-top:2px; } @media (max-width:880px){ .services-grid{ grid-template-columns:1fr; } } /* ================= ESTIMATE ================= */ /* overflow:clip, not hidden. Both clip the ::before glow, but `hidden` makes this a scroll container, which silently kills position:sticky on the copy column inside it. `clip` does not. The `hidden` line stays first as the fallback for browsers without clip: there the copy simply scrolls instead of sticking. */ .estimate{ background:var(--navy); color:#fff; padding:clamp(90px,11vw,160px) 0 clamp(80px,10vw,130px); position:relative; overflow:hidden; overflow:clip; } .estimate::before{ content:""; position:absolute; left:-10%; bottom:-30%; width:55%; height:80%; background:radial-gradient(ellipse at center, rgba(20,144,127,.14), transparent 65%); pointer-events:none; } /* Single column: the booking embed is responsive and tall, so pairing it beside a short receipts column stretched the section with ~575px of dead space. Promise and receipts read across the top, calendar gets the full width underneath. */ /* Two columns again. It went single-column when the booking embed was full width and left a wide empty band; now that .est-book is capped at the 640px the Field Stash slot grid actually needs, the copy sits beside it instead of above it. */ .est-grid{ display:grid; grid-template-columns:minmax(0,1fr) 640px; gap:clamp(32px,4vw,64px); align-items:start; position:relative; z-index:2; } @media (max-width:1080px){ .est-grid{ grid-template-columns:minmax(0,1fr); } } .estimate .kicker{ color:var(--gold); } .estimate h2{ color:#fff; margin-bottom:20px; max-width:22ch; } /* 12ch was sized for a narrow left column beside the form. The section is a single full-width column now, so that setting broke the heading over three lines against 1,100px of empty navy. */ .estimate .dek{ font-family:var(--body); font-style:italic; font-size:19px; color:rgba(255,255,255,.85); max-width:44ch; margin-bottom:36px; } .receipts{ display:grid; grid-template-columns:repeat(3,auto); gap:clamp(22px,3vw,44px); justify-content:start; margin-bottom:40px; } .receipt .r-val{ font-family:var(--disp); font-weight:800; font-size:clamp(26px,2.8vw,38px); color:#fff; line-height:1; } .receipt .r-lbl{ font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:8px; } .receipt{ border-left:2px solid var(--gold); padding-left:16px; } .nap{ font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.08em; color:rgba(255,255,255,.72); } .est-form{ background:#fff; border-radius:6px; padding:clamp(26px,3vw,40px); box-shadow:0 50px 100px -40px rgba(0,0,0,.6); } .est-form h3{ font-weight:800; font-size:22px; margin-bottom:6px; } .est-form .form-sub{ font-family:var(--body); font-style:italic; font-size:15px; color:var(--ink-soft); margin-bottom:22px; } .field{ margin-bottom:16px; } .field label{ display:block; font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; } .field input, .field select, .field textarea{ width:100%; font-family:var(--body); font-size:16.5px; color:var(--ink); padding:13px 14px; border:1.5px solid var(--hairline); border-radius:3px; background:var(--ground); outline:none; transition:border-color .2s ease, box-shadow .2s ease; } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,144,127,.18); background:#fff; } .field textarea{ min-height:96px; resize:vertical; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .est-form .btn{ width:100%; margin-top:6px; } .est-form .alt-line{ text-align:center; margin-top:16px; font-family:var(--body); font-size:15px; color:var(--ink-soft); } .est-form .alt-line a{ color:var(--teal-deep); font-weight:600; } @media (max-width:880px){ .est-grid{ grid-template-columns:minmax(0,1fr); } .receipts{ justify-content:space-between; } } @media (max-width:560px){ .field-row{ grid-template-columns:1fr; } /* minmax(0,1fr) + min-width:0, or the "Deposit, $1,000 max" label blows the column past .wrap and gets clipped by overflow-x:hidden at 390. */ .receipts{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; } .receipt{ min-width:0; } } /* ================= FOOTER ================= */ footer{ background:var(--navy-deep); color:rgba(255,255,255,.65); padding:38px 0 46px; } footer .wrap{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; } footer img{ height:26px; width:auto; filter:brightness(0) invert(1); opacity:.85; } footer p{ font-family:var(--disp); font-weight:500; font-size:12.5px; letter-spacing:.06em; } footer .foot-right{ margin-left:auto; display:flex; gap:22px; align-items:center; flex-wrap:wrap; } footer a{ color:rgba(255,255,255,.75); text-decoration:none; font-family:var(--disp); font-size:12.5px; font-weight:600; letter-spacing:.08em; } footer a:hover{ color:#fff; } /* ================= MOBILE STICKY BAR ================= */ .stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; grid-auto-flow:column; grid-auto-columns:1fr; /* auto, not 1fr 1fr: /careers/ hides the call link and the lone CTA must fill the bar */ box-shadow:0 -10px 30px -12px rgba(15,29,45,.4); } .stickybar a{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--disp); font-weight:700; font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:17px 10px; } .stickybar .call{ background:var(--navy); color:#fff; } .stickybar .book{ background:var(--teal); color:#fff; } @media (max-width:820px){ .stickybar{ display:grid; } body{ padding-bottom:56px; } } /* town trust line in awards band */ .town-trust{ margin-top:20px; font-family:var(--disp); font-weight:800; font-size:clamp(18px,2vw,24px); letter-spacing:-.01em; color:var(--gold); } /* Anchor targets sit under a 73px sticky header. Without this, clicking "Book Your Estimate Online" lands past the section heading and the visitor arrives at a bare form with no idea what they are looking at. */ section[id], [id="estimate"], [id="crew"]{ scroll-margin-top: 118px; } /* ---- booking card ---------------------------------------------------------- The Field Stash embed renders its own white card, its own border radius and its own footer, so the wrapper must add no chrome of its own: a second white box around it read as a border. The iframe fills its container and Field Stash centres the form at about 540px inside it, so a full-width container just stretches their cream page background into a wide empty field. Cap the container near the form's real width and that band becomes a normal margin. */ .est-book{ background:transparent; box-shadow:none; padding:0; border-radius:0; max-width:640px; width:100%; } @media (max-width:680px){ .est-book{ max-width:none; } } /* ---- crew roster + callback figure --------------------------------------- Sits at the bottom of the proof section. The faces are evidence for the "A Consistent Crew, and One Person in Charge" claim directly above them, so they are deliberately plain: five equal portraits, first names only, no titles or tags, alphabetical. Do not add roles here. */ .proof-sub{ font-family:var(--disp); font-weight:800; font-size:clamp(19px,2vw,23px); line-height:1.2; letter-spacing:-0.01em; color:var(--navy); margin:34px 0 14px; } .crew-roster{ list-style:none; margin:clamp(40px,6vw,72px) 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,2vw,26px); } .crew-face{ margin:0; } .cf-frame{ position:relative; overflow:hidden; border-radius:3px; background:var(--ground-2); aspect-ratio:4/5; box-shadow:0 18px 40px -28px rgba(15,29,45,.5); } .cf-frame img{ width:100%; height:100%; object-fit:cover; display:block; } .cf-name{ margin-top:12px; font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); text-align:center; padding-bottom:0; } .callback-stat{ margin-top:clamp(34px,4.5vw,54px); display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); border-left:3px solid var(--gold); padding-left:clamp(18px,2.4vw,28px); } .cb-val{ font-family:var(--disp); font-weight:800; font-size:clamp(30px,4.4vw,52px); line-height:1; letter-spacing:-0.02em; color:var(--navy); flex-shrink:0; /* Divi injects an inline "p { padding-bottom: 1em; }" AFTER this stylesheet, so a 52px number was sitting in a 104px box and reading as top-aligned against its sentence no matter what align-items said. Same reason .cb-lbl and .cf-name reset it. */ padding-bottom:0; } .cb-lbl{ font-family:var(--body); font-size:clamp(16px,1.7vw,18.5px); line-height:1.6; color:var(--ink-soft); max-width:46ch; padding-bottom:0; } @media (max-width:860px){ .crew-roster{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } } /* The number stays beside its sentence, vertically centred against it, on anything wider than a phone. It used to stack at 860, which put "Fewer than 1%" on top of the line it belongs to on any narrowed desktop window. Below 560 the sentence would be squeezed into a column too narrow to read, so there it stacks. */ @media (max-width:560px){ .callback-stat{ flex-direction:column; align-items:flex-start; gap:6px; } } @media (max-width:460px){ /* Stays at three columns rather than dropping to two: five faces then wrap 3+2 instead of 2+2+1, which halves the scroll depth and leaves no orphan row. */ .crew-roster{ gap:10px; } .cf-name{ margin-top:8px; font-size:11px; letter-spacing:.08em; } } /* Receipts stack while the estimate section is two columns: the copy column is about 406px there, which is too narrow for three of them side by side. Below 1080 the section is single column again and they go back to a row. */ @media (min-width:1081px){ .est-grid .receipts{ grid-template-columns:minmax(0,1fr); gap:16px; justify-content:stretch; } /* Fixed first track so the three labels start on the same line, whatever the value above them is ("10%" and "Fixed" are very different widths). */ /* 130px, not a ch/em value: those resolve against .receipt's inherited body size, not the 38px display size of .r-val, so the value overlapped its own label. */ .est-grid .receipt{ display:grid; grid-template-columns:130px minmax(0,1fr); align-items:baseline; gap:14px; } .est-grid .receipt .r-lbl{ margin-top:0; } .est-grid .nap{ text-wrap:balance; } .est-grid .nap a{ white-space:nowrap; } } /* The copy column sticks while the booking form scrolls past it, the same way the proof and FAQ sections behave. It keeps the deposit cap, the fixed price and the no-subcontractors line in view for the whole time someone is filling the form in. Only while the section is two columns. */ @media (min-width:1081px){ .est-grid > div:first-child{ position:sticky; top:112px; align-self:start; } } /* ---- two-tier header ------------------------------------------------------- Row 1 is site navigation and is identical on every page. Row 2 is the page's own section anchors, deliberately smaller and quieter so it reads as a jump list rather than as competing navigation. */ .topbar .topbar-main{ display:flex; align-items:center; gap:26px; height:64px; } /* .topbar .wrap sets height:72px and outranks a bare .subbar, so this needs the same specificity or the "tiny" second row silently renders taller than the primary one. */ .topbar .subbar{ height:30px; } .topnav a.navlink.is-here{ color:var(--teal-deep); } .subbar{ display:flex; align-items:center; border-top:1px solid var(--hairline); } .subnav{ display:flex; align-items:center; gap:20px; margin-left:auto; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } .subnav::-webkit-scrollbar{ display:none; } .subnav-lede{ font-family:var(--disp); font-weight:700; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); flex-shrink:0; margin-right:2px; } .subnav a{ font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--ink-faint); white-space:nowrap; flex-shrink:0; } .subnav a:hover{ color:var(--teal-deep); } @media (max-width:900px){ .topbar .topbar-main{ gap:16px; } .topnav{ gap:16px; } .topnav a.navlink{ font-size:11px; letter-spacing:.08em; } } @media (max-width:760px){ /* The five site links no longer fit beside the logo and the CTA, so the whole second row becomes the site nav on phones and the page anchors drop. Navigation beats shortcuts, and mobile is 58% of clicks, so it must not be the tier that disappears. */ .topbar .topbar-main .topnav a.navlink{ display:none; } .subbar{ height:auto; padding:8px 0 9px; } .subnav{ margin-left:0; gap:16px; } .subnav-lede{ display:none; } .subnav .jump{ display:none; } .subnav .sitelink{ display:inline; color:var(--ink-soft); font-size:11.5px; font-weight:700; } } /* Above 760 the site links live in row 1, so the row-2 copies stay out of the way. */ @media (min-width:761px){ .subnav .sitelink{ display:none; } } /* ---- flyouts --------------------------------------------------------------- Hover AND :focus-within, so a keyboard reaches them with no JavaScript. Touch has no hover, so tapping the parent navigates to a page listing the same children. */ .topnav .hasmenu{ position:relative; display:inline-flex; align-items:center; } .topnav .caret{ display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4px solid currentColor; opacity:.55; } .topnav .flyout{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px); min-width:230px; padding:8px; display:flex; flex-direction:column; gap:1px; background:#fff; border:1px solid var(--hairline); border-radius:4px; box-shadow:0 26px 50px -24px rgba(15,29,45,.45); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s ease, transform .14s ease, visibility .14s; z-index:70; } .topnav .hasmenu:hover .flyout, .topnav .hasmenu:focus-within .flyout{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } /* a hover bridge, so the pointer can travel from the label to the panel */ .topnav .hasmenu::after{ content:""; position:absolute; top:100%; left:0; right:0; height:10px; } .topnav .flyout a{ font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.02em; text-transform:none; color:var(--ink-soft); text-decoration:none; padding:9px 12px; border-radius:3px; white-space:nowrap; } .topnav .flyout a:hover, .topnav .flyout a:focus{ background:var(--ground-2); color:var(--teal-deep); } @media (max-width:760px){ .topnav .flyout, .topnav .caret{ display:none; } } /* ---- row 2 sits LEFT --------------------------------------------------------- Right-aligned it sat directly under the Book button, putting small grey text in the most valuable corner of the page and competing with the one thing that matters. */ .subnav{ margin-left:0; margin-right:auto; } /* ---- video testimonial ------------------------------------------------------ Poster + play button. The