:root{ /* Warm charcoal + brass on warm ivory. Deliberately NOT blue: every cool tone was converted to a warm neutral of identical luminance, so contrast ratios are unchanged. */ --ink:#1c1916; --ink-2:#4e4841; --ink-3:#7c7367; --ink-4:#aea393; --paper:#fcfbf8; --paper-2:#f4f2ec; --paper-3:#e6e5e2; --line:#e0dcd6; --green:#2d2924; --green-2:#444039; --green-soft:#f1ece6; --green-deep:#171511; --navy:#2d2924; --navy-2:#444039; --navy-deep:#171511; --gold:#a8762c; --gold-2:#c99a45; --gold-3:#d2be9b; --gold-soft:#f6f4f0; --amber:#a8762c; --amber-soft:#f6f4f0; --max:1140px; --serif:"Fraunces",Georgia,serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sh:0 1px 2px rgba(17,21,24,.04),0 8px 28px rgba(17,21,24,.06); --sh-lg:0 2px 4px rgba(17,21,24,.04),0 18px 50px rgba(17,21,24,.10); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--max);margin:0 auto;padding:0 30px} a{color:var(--green);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.018em} h2{font-size:clamp(30px,4.2vw,44px);margin-bottom:16px} h3{font-size:21px;margin-bottom:9px} p{margin-bottom:16px;color:var(--ink-2)} .lead{font-size:19.5px;color:var(--ink-2);line-height:1.6} /* Section label. Sized one step up with wider tracking, and carried across the full width of its block by a hairline rule, so it reads as a deliberate header for the section rather than a short stray line above the heading. */ .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.25em;text-transform:uppercase; color:var(--green-2);margin-bottom:16px;font-weight:500; display:flex;align-items:center;gap:14px} .eyebrow:after{content:"";flex:1 1 auto;min-width:24px;height:1px;background:currentColor;opacity:.3} .center{text-align:center} /* Headings carry a max-width (e.g. .page-hero h1 is 20ch) to keep line length readable. Inside a centred block that box has no auto margins, so the text was centred *within a box sitting on the left* — which reads as off-centre. Give constrained headings auto margins whenever their container is centred. */ .center h1,.center h2,.center h3,.center .lead,.center p{margin-left:auto;margin-right:auto} /* centred labels get a rule on both sides so the text stays optically centred */ .center .eyebrow{margin-left:auto;margin-right:auto} .center .eyebrow:before{content:"";flex:1 1 auto;min-width:24px;height:1px;background:currentColor;opacity:.3} /* on small screens the label wraps, and a hairline beside wrapped text reads as a mistake — drop the rules and let it sit as plain text */ @media(max-width:620px){ .eyebrow{display:block;letter-spacing:.19em;font-size:11.5px} .eyebrow:after,.center .eyebrow:before{display:none} } .mx{max-width:62ch} .mx.center{margin-left:auto;margin-right:auto} /* ---------- header ---------- */ header{position:sticky;top:0;z-index:80;background:rgba(252,251,249,.92);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)} .hrow{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:15px 0} .brand{display:flex;flex-direction:column;line-height:1.3} .brand .nm{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em} .brand .bk{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;margin-top:2px} nav{display:flex;gap:28px;align-items:center} nav a{font-size:14.5px;color:var(--ink-2);font-weight:500} nav a:hover{color:var(--green);text-decoration:none} .cta-sm{background:var(--gold-3);color:var(--navy-deep)!important;padding:10px 18px;border-radius:7px; font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .cta-ico{width:15px;height:15px;flex:none;display:block} .cta-sm:hover{background:#f0dcb4;text-decoration:none} .burger{display:none;background:none;border:1px solid var(--line);border-radius:7px;padding:9px 11px;cursor:pointer} .burger span{display:block;width:18px;height:1.8px;background:var(--ink);margin:3.5px 0;border-radius:2px} @media(max-width:900px){ nav{position:fixed;inset:66px 0 auto 0;background:var(--paper);flex-direction:column;align-items:stretch; gap:0;padding:10px 30px 22px;border-bottom:1px solid var(--line);display:none;box-shadow:var(--sh)} nav.open{display:flex} nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px} nav .cta-sm{text-align:center;margin-top:14px;border-bottom:none} .burger{display:block} } /* ---------- hero ---------- */ .hero{position:relative;padding:0;overflow:hidden;background:var(--navy-deep)} .hero-inner{position:relative;padding:104px 0 92px;z-index:2} /* With no photo behind it the hero is a lit warm panel rather than a flat block — a soft brass glow off to one side, the way light falls in the reference. Put an back inside .hero-bg and it layers underneath. */ .hero-bg{position:absolute;inset:0;z-index:0;background: radial-gradient(120% 90% at 78% 18%, rgba(224,189,124,.16) 0%, rgba(224,189,124,.05) 38%, rgba(224,189,124,0) 68%), radial-gradient(90% 70% at 8% 92%, rgba(168,118,44,.10) 0%, rgba(168,118,44,0) 60%), linear-gradient(155deg,#201d18 0%,var(--navy-deep) 55%,#100e0b 100%)} /* Background photography is filtered to the palette rather than trusted to match it: pulled off full saturation, nudged warm, and slightly darkened. A cool twilight shot and a warm interior both land in the same family, so swapping images can never drag the site back towards blue. */ .hero-bg img,.page-bg img{filter:saturate(.62) sepia(.22) brightness(.86) contrast(1.04)} /* The photo is shown at FULL opacity — it was previously fighting three separate reductions at once (55% opacity, 80% brightness and a 94% scrim), which is why it read as almost invisible. Legibility is handled by the scrim alone, so the darkening happens only where text actually sits. */ .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%; opacity:1;display:block;filter:saturate(.52) sepia(.30) brightness(.70) contrast(1.05)} .hero-bg:after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(23,21,17,.55) 0%,rgba(23,21,17,.30) 42%,rgba(45,41,36,0) 100%)} /* Scrim only where the copy is. Stops were solved against the actual pixels of hero-home.jpg: the photo's 95th-percentile brightness was measured in six vertical bands and each alpha set to the LOWEST value that still clears 4.6:1 for white text, plus a small margin — so the photo shows through as much as legibility allows rather than as little. Values are forced to decrease left to right; a gradient that got lighter then darker again would read as a mistake even where the maths allowed it. */ .hero-bg:has(img):after{background:linear-gradient(100deg, rgba(20,18,15,.62) 0%, rgba(20,18,15,.55) 15%, rgba(20,18,15,.32) 30%, rgba(20,18,15,.32) 45%, rgba(20,18,15,.25) 58%, rgba(20,18,15,.25) 66%, rgba(20,18,15,.08) 82%, rgba(20,18,15,0) 100%)} /* A short fade at the foot seats the credentials strip against the photo. */ .hero-bg:has(img):before{content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:1; background:linear-gradient(180deg,rgba(20,18,15,0) 0%,rgba(20,18,15,.40) 100%)} .hero .wrap{position:relative;z-index:2} .hero .eyebrow{color:var(--gold-3)} .hero h1{font-size:clamp(36px,5.2vw,60px);max-width:19ch;margin-bottom:22px;color:#fff; text-shadow:0 1px 26px rgba(12,10,8,.62),0 1px 3px rgba(12,10,8,.45)} .hero .lead,.hero .tagline{text-shadow:0 1px 16px rgba(12,10,8,.55)} .hero h1 em{font-style:normal;color:var(--gold-3)} .hero .lead{max-width:58ch;color:#d2cabf} .hero .lead strong{color:#fff;font-weight:600} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .btn{display:inline-block;background:linear-gradient(160deg,var(--gold-3) 0%,var(--gold-2) 78%);color:var(--navy-deep); border:1px solid var(--gold-2);border-radius:8px;box-shadow:0 2px 12px rgba(168,118,44,.24); padding:14px 26px;font-size:15.5px;font-weight:600;font-family:var(--sans);cursor:pointer;transition:.18s;text-align:center} .btn:hover{background:linear-gradient(160deg,#f0dcb4 0%,var(--gold-3) 82%);border-color:var(--gold-3); text-decoration:none;color:var(--navy-deep);box-shadow:0 5px 18px rgba(168,118,44,.34);transform:translateY(-1px)} .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.38);box-shadow:none} .btn.ghost:hover{background:rgba(255,255,255,.10);color:#fff;border-color:#fff;box-shadow:none;transform:translateY(-1px)} .btn.dark{background:linear-gradient(160deg,var(--navy-2) 0%,var(--navy) 72%);border-color:var(--navy);box-shadow:0 2px 12px rgba(45,41,36,.24)} .btn.dark:hover{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 82%);border-color:var(--navy-deep);box-shadow:0 5px 18px rgba(45,41,36,.3)} .btn:disabled{opacity:.35;cursor:not-allowed} /* credentials strip — verifiable facts only */ .creds{border-top:2px solid var(--gold);border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff 0%,var(--paper-2) 100%);position:relative;z-index:3} /* Columns are weighted rather than equal: "SRS — Seller Representative Specialist" is roughly three times the length of "Pellego, Inc.", and equal columns forced it onto a second line. Weights are sized from the actual string widths at 15px, with room to spare. */ .creds .wrap{display:grid;grid-template-columns:1fr 1.9fr 1fr 1.4fr;gap:0} /* Even padding on both sides and centred text — the old rule had 0 left padding, so the first cell sat flush against the edge and every label crowded the divider to its left. */ .cred{padding:22px 24px;border-right:1px solid var(--line);text-align:center; display:flex;flex-direction:column;justify-content:center} .cred:last-child{border-right:none} .cred .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-3);display:block;margin-bottom:7px;text-indent:.22em} .cred .v{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4;white-space:nowrap} /* Four columns only work while the widest value ("SRS — Seller Representative Specialist", ~296px at 15px) still has room. Below ~1100px it doesn't, so the strip goes to a 2x2 grid, then to a single column once even half the width is too narrow. Breakpoints are set from the measured string width, not guessed. */ @media(max-width:1100px){ .creds .wrap{grid-template-columns:1fr 1fr} .cred:nth-child(2n){border-right:none} .cred:nth-child(-n+2){border-bottom:1px solid var(--line)} } @media(max-width:780px){ .creds .wrap{grid-template-columns:1fr} .cred{border-right:none;border-bottom:1px solid var(--line);padding:16px 12px} .cred:last-child{border-bottom:none} .cred .v{white-space:normal} } /* ---------- sections ---------- */ section{scroll-margin-top:80px} .band{padding:82px 0} .band.alt{background:linear-gradient(180deg,#f7f3ea 0%,#f5f1e9 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .band.tight{padding:64px 0} /* dark contrast band */ .band.deep{background:linear-gradient(155deg,var(--green) 0%,var(--green-deep) 100%);border:none;position:relative;overflow:hidden} .band.deep:before{content:"";position:absolute;top:-140px;right:-100px;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(201,160,74,.20) 0%,rgba(201,160,74,0) 68%);pointer-events:none} .band.deep .wrap{position:relative;z-index:2} .band.deep h2{color:#fff} .band.deep .lead,.band.deep p{color:#d2cabf} .band.deep .eyebrow{color:var(--gold-2)} .band.deep .area{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);backdrop-filter:blur(2px)} .band.deep .area h3{color:#fff} .band.deep .area p{color:#bab3aa} .band.deep .area:hover{background:rgba(255,255,255,.09);border-color:rgba(201,160,74,.4)} .two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .two.wide{grid-template-columns:1.05fr .95fr} @media(max-width:900px){.two,.two.wide{grid-template-columns:1fr;gap:38px}} /* path cards */ .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:36px} .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;position:relative;overflow:hidden; transition:transform .22s ease,box-shadow .22s ease,border-color .22s;display:flex;flex-direction:column} .card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px; background:linear-gradient(90deg,var(--green) 0%,var(--gold-2) 100%);opacity:0;transition:opacity .22s} .card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--paper-3)} .card:hover:before{opacity:1} .card .ic{width:42px;height:42px;border-radius:11px; background:linear-gradient(150deg,var(--green-soft) 0%,var(--gold-soft) 100%); border:1px solid rgba(179,134,47,.18); display:flex;align-items:center;justify-content:center;margin-bottom:17px} .card .ic svg{width:20px;height:20px;stroke:var(--green);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .card p{font-size:15.5px;margin-bottom:16px;flex:1} .card a.go{font-size:14.5px;font-weight:600} /* feature list */ .flist{margin-top:24px} .fitem{display:grid;grid-template-columns:34px 1fr;gap:15px;padding:19px 0;border-top:1px solid var(--line)} .fitem:last-child{border-bottom:1px solid var(--line)} .fitem .n{font-family:var(--mono);font-size:12px;color:var(--green-2);padding-top:5px;font-weight:500} .fitem h3{font-size:17.5px;margin-bottom:5px} .fitem p{font-size:15.5px;margin:0} /* callout */ .callout{background:linear-gradient(120deg,var(--green-soft) 0%,rgba(233,242,237,.45) 100%); border-left:3px solid var(--green);border-radius:0 12px 12px 0;padding:20px 24px;margin:26px 0} .callout p{margin:0;font-size:15.5px;color:var(--ink-2)} .callout strong{color:var(--ink)} .callout.warn{background:linear-gradient(120deg,var(--gold-soft) 0%,rgba(250,243,226,.45) 100%);border-left-color:var(--gold)} /* photography */ .shot{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,var(--paper-3),var(--paper-2));box-shadow:var(--sh)} .shot img{width:100%;height:100%;object-fit:cover;display:block} .shot.tall{aspect-ratio:4/5} .shot.wide{aspect-ratio:16/10} .shot.band{aspect-ratio:auto;height:100%;min-height:340px;border-radius:0} .shot .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 16px;color:#fff;font-size:13px; background:linear-gradient(180deg,rgba(23,21,17,0) 0%,rgba(23,21,17,.78) 100%);font-family:var(--mono);letter-spacing:.04em} .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px} .duo .shot{aspect-ratio:1/1} @media(max-width:900px){.shot.tall,.duo .shot{aspect-ratio:16/10}} /* certificates */ .certgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px} @media(max-width:840px){.certgrid{grid-template-columns:1fr}} .cert{margin:0;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14); border-radius:14px;overflow:hidden;backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.28)} .cert a{display:block;background:#fff;line-height:0} .cert img{width:100%;height:auto;display:block;transition:transform .3s ease} .cert a:hover img{transform:scale(1.02)} .cert figcaption{padding:20px 22px 22px;display:flex;flex-direction:column;gap:5px} .cert figcaption strong{font-family:var(--serif);font-size:19px;font-weight:600;color:#fff} .cert figcaption span{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--gold-3)} .cert figcaption p{font-size:15px;color:#c8c1b7;margin:9px 0 0} /* areas */ .agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:34px} .area{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px} .area h3{font-size:17px;margin-bottom:6px} .area p{font-size:14.5px;margin:0;color:var(--ink-3)} /* tool */ .tool{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:var(--sh)} .tool-hd{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:6px} /* Tool headers are centred on every tool. */ .tool-hd{text-align:center} .tool-hd .sub{margin-left:auto;margin-right:auto;max-width:52ch} .tool-hd h3{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px} .tool-hd .sub{font-size:14px;color:var(--ink-3);margin:0} .q{padding:17px 0;border-bottom:1px solid var(--line)} .q:last-of-type{border-bottom:none} .q label{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:10px} .opts{display:flex;gap:8px;flex-wrap:wrap} .opt{font-size:13.5px;padding:8px 14px;border:1px solid var(--line);border-radius:22px;background:#fff;cursor:pointer;color:var(--ink-2);font-family:var(--sans);transition:.15s} .opt:hover{border-color:var(--green-2);color:var(--ink)} .opt[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff} /* ---------- form controls ---------- Every control is exactly --ctl-h tall and full width. Currency and unit affixes live INSIDE the bordered group, so a "$" prefix and a "%" suffix produce identically sized fields. */ :root{--ctl-h:46px} input[type=number],input[type=text],input[type=email],input[type=tel],select{ width:100%;height:var(--ctl-h);font-family:var(--sans);font-size:15px;color:var(--ink); border:1px solid var(--line);border-radius:8px;padding:0 14px;background:#fff; -webkit-appearance:none;appearance:none} textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink); border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:#fff} select{padding-right:38px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f7c90' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:11px} input:focus,textarea:focus,select:focus{outline:2px solid var(--gold-2);outline-offset:-1px;border-color:transparent} input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} input[type=number]{-moz-appearance:textfield} /* input group: bordered wrapper, borderless control inside */ .field{display:flex;align-items:stretch;height:var(--ctl-h);width:100%; border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden} .field:focus-within{outline:2px solid var(--gold-2);outline-offset:-1px;border-color:transparent} /* background-COLOR again, not the shorthand — `background:transparent` here was wiping the chevron off any select inside an input group, leaving the City and Month fields with no dropdown affordance at all. */ .field input,.field select{border:none;border-radius:0;height:100%;background-color:transparent; flex:1 1 auto;min-width:0} .field input:focus,.field select:focus{outline:none} .field span{display:flex;align-items:center;flex:0 0 auto;padding:0 13px;white-space:nowrap; font-family:var(--mono);font-size:13px;color:var(--ink-3); background:var(--paper-2);border-right:1px solid var(--line)} .field span:last-child{border-right:none;border-left:1px solid var(--line)} .field input+span{font-size:12.5px} .result{margin-top:24px;padding:22px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line);display:none} .result.show{display:block} .result .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-2);display:block;margin-bottom:10px;font-weight:500} .result h4{font-family:var(--serif);font-size:22px;margin-bottom:10px} .result p{font-size:15px;margin-bottom:11px} .result .note{font-size:13px;color:var(--ink-3);margin:0;line-height:1.6} /* bars */ .bars{margin-top:20px} .bar-row{margin-bottom:17px} .bar-lbl{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:7px} .bar-lbl span:last-child{font-family:var(--mono);font-weight:500;color:var(--ink)} .bar{height:11px;background:#fff;border:1px solid var(--line);border-radius:99px;overflow:hidden} .bar i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .55s cubic-bezier(.4,0,.2,1)} .bar i.b2{background:var(--amber)} .delta{margin-top:19px;padding-top:17px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-3)} .delta b{font-family:var(--mono);font-size:22px;color:var(--green);display:block;margin-top:4px} /* reviews */ .rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:34px} .rev{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column} .rev .stars{color:var(--amber);font-size:14px;letter-spacing:2px;margin-bottom:12px} .rev p{font-size:15px;color:var(--ink-2);flex:1} .rev .who{font-size:14px;font-weight:600;color:var(--ink);margin:0} .rev .src{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);letter-spacing:.08em;margin-top:2px} /* form */ .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:600px){.fgrid{grid-template-columns:1fr}} .fld{margin-bottom:15px} .fld label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--ink)} .consent{font-size:12.5px;color:var(--ink-3);margin:16px 0 18px;line-height:1.6} /* contact rail */ .crail{margin-top:30px} .crow{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)} .crow:last-child{border-bottom:1px solid var(--line)} .crow .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);width:74px;flex:0 0 74px;padding-top:4px} .crow .v{font-size:16px;color:var(--ink)} .crow .v a{font-weight:600} /* footer */ footer{background:linear-gradient(170deg,#2d2924 0%,#171511 100%);color:#c2bbb1;padding:62px 0 36px;font-size:14.5px; border-top:3px solid var(--gold)} footer a{color:#fff} footer a:hover{color:var(--gold-2)} .fcols{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:38px;margin-bottom:38px} @media(max-width:820px){.fcols{grid-template-columns:1fr 1fr;gap:28px}} @media(max-width:520px){.fcols{grid-template-columns:1fr}} footer h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#877e72;margin-bottom:14px;font-weight:500} footer ul{list-style:none} footer li{margin-bottom:8px;font-size:14px} .build{font-family:var(--mono);font-size:11px;opacity:.5;letter-spacing:.04em} .legal{border-top:1px solid #2e2b26;padding-top:26px;font-size:12.5px;line-height:1.75;color:#958b7e} .legal p{color:#958b7e;font-size:12.5px;margin-bottom:12px} .disclose{color:#fff!important;font-size:13.5px!important;margin-bottom:15px!important;font-weight:600;line-height:1.7!important} /* ---------- tools hub ---------- */ .tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:32px 0 30px} .tab{font-size:14.5px;font-weight:600;padding:11px 22px;border:1px solid var(--line);border-radius:26px; background:#fff;color:var(--ink-2);cursor:pointer;font-family:var(--sans);transition:.18s} .tab:hover{border-color:var(--gold);color:var(--ink)} .tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 3px 12px rgba(45,41,36,.24)} .panel{display:none} .panel.on{display:block} .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px} .tgrid .tool{margin:0} /* output table */ .otab{width:100%;border-collapse:collapse;margin-top:4px} .otab td{padding:9px 0;font-size:14.5px;border-bottom:1px solid var(--line);color:var(--ink-2)} .otab td:last-child{text-align:right;font-family:var(--mono);font-size:14px;color:var(--ink);white-space:nowrap} .otab tr.tot td{border-bottom:none;border-top:2px solid var(--ink);padding-top:13px;font-weight:700;color:var(--ink);font-size:16px} .otab tr.tot td:last-child{font-size:18px;color:var(--green)} .otab tr.sub td{color:var(--ink-3);font-size:13.5px} .otab tr.neg td:last-child{color:var(--gold)} .pill{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; padding:4px 9px;border-radius:5px;background:var(--green-soft);color:var(--green);margin-bottom:12px;font-weight:500} .pill.rank2{background:var(--gold-soft);color:var(--amber)} .miss{background:var(--gold-soft);border:1px solid rgba(179,134,47,.3);border-radius:9px;padding:14px 16px;font-size:13.5px;color:var(--ink-2);margin-top:14px} .verified{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;margin-top:14px;display:block} .actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .actions h5{font-size:13px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;font-weight:500} .actions ul{margin:0;padding-left:19px} .actions li{font-size:14.5px;color:var(--ink-2);margin-bottom:6px} .hint{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.5} .errbox,.warnbox{border-radius:10px;padding:15px 17px;margin-top:18px;font-size:14.5px;line-height:1.6} .errbox{background:#f5f0ef;border:1px solid #e2cac8;border-left:3px solid #a8322c;color:#7d2723} .warnbox{background:var(--gold-soft);border:1px solid rgba(179,134,47,.32);border-left:3px solid var(--gold);color:var(--ink-2)} .errbox strong,.warnbox strong{display:block;margin-bottom:7px} .errbox ul,.warnbox ul{margin:0;padding-left:19px} .errbox li,.warnbox li{margin-bottom:5px} .errbox li:last-child,.warnbox li:last-child{margin-bottom:0} input:invalid{border-color:#d99b95} .disc{font-size:12.5px;color:var(--ink-3);line-height:1.65;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)} .reveal{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}html{scroll-behavior:auto}} /* ========================================================== SCROLL BACKGROUND + DARK GLASS THEME Everything below overrides the light theme above. Delete this block to return to the light version. ========================================================== */ .bgstage{position:fixed;inset:0;z-index:0;background:var(--navy-deep);overflow:hidden} .bgimg{position:absolute;inset:0;opacity:0;transition:opacity 1.2s cubic-bezier(.4,0,.2,1);will-change:opacity} .bgimg.on{opacity:1} .bgimg img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04)} .bgscrim{position:absolute;inset:0; background:linear-gradient(180deg,rgba(19,17,14,.80) 0%,rgba(19,17,14,.72) 40%,rgba(19,17,14,.86) 100%)} body{background:var(--navy-deep);color:#ded6ca} /* Lift real content above the fixed .bgstage. `header` is deliberately excluded: `body>header` is more specific than `header{position:sticky}` and comes later, so including it here would silently reset the header to position:relative and it would scroll away. It gets sticky + its own z-index on the next line. */ body>div.hero,body>section,body>footer{position:relative;z-index:2} body>header{position:sticky;top:0;z-index:80} /* type */ h1,h2,h3,h4{color:#fff} p,.lead{color:#d1cabf} .eyebrow{color:var(--gold-3)} a{color:var(--gold-3)} a:hover{color:var(--gold-2)} /* header */ header{background:rgba(19,17,14,.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(255,255,255,.10)} .brand .nm{color:#fff} .brand .bk{color:#a99f8f} nav a{color:#d1cabf} nav a:hover{color:var(--gold-3)} @media(max-width:900px){nav{background:rgba(19,17,14,.97);border-bottom-color:rgba(255,255,255,.1)} nav a{border-bottom-color:rgba(255,255,255,.10)}} /* hero — global stage supplies the image */ .hero{background:var(--navy-deep)} /* hero photography — shown at low opacity behind the dark gradient */ .hero-bg img{display:block;opacity:.42} /* interior page heroes carry their own photograph */ .page-hero{position:relative;overflow:hidden} .page-hero>.wrap{position:relative;z-index:2} .page-bg{position:absolute;inset:0;z-index:0;background:var(--navy-deep)} .page-bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.38} .page-bg:after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,rgba(19,17,14,.93) 0%,rgba(19,17,14,.78) 48%,rgba(23,21,17,.55) 100%)} .hero-bg:after{background:linear-gradient(100deg,rgba(19,17,14,.55) 0%,rgba(19,17,14,.28) 60%,rgba(19,17,14,.10) 100%)} .creds{background:rgba(19,17,14,.70);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.10)} .cred{border-right-color:rgba(255,255,255,.12)} .cred .k{color:#a99f8f} .cred .v{color:#fff} @media(max-width:760px){.cred{border-bottom-color:rgba(255,255,255,.12)}} /* bands */ .band{background:rgba(23,21,17,.62);backdrop-filter:blur(3px)} .band.alt{background:rgba(19,17,14,.80);backdrop-filter:blur(6px); border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)} .band.deep{background:rgba(19,17,14,.55);backdrop-filter:blur(2px)} .band.deep:before{display:none} /* panels */ .card,.tool,.rev,.area{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14); backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.28)} .card:hover{border-color:rgba(201,154,69,.45);box-shadow:0 14px 44px rgba(0,0,0,.42)} .card p,.rev p,.area p,.tool p{color:#c8c1b7} .card .ic{background:rgba(201,154,69,.16);border-color:rgba(201,154,69,.34)} .card .ic svg{stroke:var(--gold-3)} .band.deep .area{background:rgba(255,255,255,.06)} .rev .src{color:#a09587} .tool-hd{border-bottom-color:rgba(255,255,255,.14)} .tool-hd .sub,.hint,.note,.result .note{color:#aca191} /* lists & rules */ .fitem,.step,.q,.crow,.otab td{border-color:rgba(255,255,255,.12)} .fitem p,.step p{color:#c8c1b7} .fitem .n,.step .n{color:var(--gold-3)} .q label,.fld label{color:#eee9e3} /* callouts */ .callout{background:rgba(68,64,57,.30);border-left-color:var(--gold-3)} .callout p{color:#d8d0c5} .callout strong{color:#fff} .callout.warn{background:rgba(168,118,44,.18);border-left-color:var(--gold-2)} /* form controls */ /* background-COLOR, not the `background` shorthand: the shorthand resets background-repeat/position/size, which made the select chevron tile across the full width of the control on the dark theme. */ input[type=number],input[type=text],input[type=email],input[type=tel],textarea,select{ background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.20);color:#f5f0ea} input::placeholder,textarea::placeholder{color:#948a7d} select option{background:#1f1d19;color:#f5f0ea} select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a8b4c6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:11px} input:focus,textarea:focus,select:focus{outline-color:var(--gold-2)} /* input group on the dark theme */ .field{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.20)} .field input,.field select{background-color:transparent;color:#f5f0ea} .field span{color:#bab3aa;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} .field span:last-child{border-left-color:rgba(255,255,255,.16)} .opt{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.20);color:#d1cabf} .opt:hover{border-color:var(--gold-2);color:#fff} .opt[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#fff} .consent{color:#a09587} /* tabs */ .tab{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#d1cabf} .tab:hover{border-color:var(--gold-2);color:#fff} .tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 3px 14px rgba(168,118,44,.34)} /* results & tables */ .result{background:rgba(19,17,14,.62);border-color:rgba(255,255,255,.14)} .result h4{color:#fff} .result p{color:#d1cabf} .result .tag,.pill{color:var(--gold-3);background:rgba(201,154,69,.16)} .pill.rank2{background:rgba(255,255,255,.09);color:#d8d0c5} .otab td{color:#c8c1b7} .otab td:last-child{color:#f5f0ea} .otab tr.tot td{border-top-color:var(--gold-3);color:#fff} .otab tr.tot td:last-child{color:var(--gold-3)} .otab tr.sub td{color:#a99f8f} .otab tr.neg td:last-child{color:var(--gold-2)} .actions h5{color:#a99f8f} .actions li{color:#c8c1b7} .miss{background:rgba(168,118,44,.16);border-color:rgba(201,154,69,.34);color:#d8d0c5} .miss strong{color:#fff} .verified{color:#a09587} .disc{color:#a09587;border-top-color:rgba(255,255,255,.12)} .warnbox{background:rgba(168,118,44,.18);border-color:rgba(201,154,69,.36);color:#e5ddd1} .warnbox strong{color:#fff} .errbox{background:rgba(168,44,44,.20);border-color:rgba(214,110,104,.44);color:#e9dbda} .errbox strong{color:#ece1e0} /* bars */ .bar{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16)} .bar i{background:var(--gold-2)} .bar i.b2{background:#92897c} .delta{border-top-color:rgba(255,255,255,.14);color:#aca191} .delta b{color:var(--gold-3)} .bar-lbl span:last-child{color:#f5f0ea} /* buttons */ .btn.ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.30)} .btn.ghost:hover{background:rgba(255,255,255,.13);border-color:#fff} /* imagery */ .shot{box-shadow:0 12px 40px rgba(0,0,0,.42);background:rgba(255,255,255,.05)} .crow .v{color:#eee9e3} /* footer — disclosures must stay clearly legible */ footer{background:rgba(13,12,9,.92);backdrop-filter:blur(10px);border-top:3px solid var(--gold);color:#c2bbb1} .legal{border-top-color:rgba(255,255,255,.14);color:#bab3aa} .legal p{color:#bab3aa} .disclose{color:#fff!important} footer h4{color:#a09587} @media(prefers-reduced-motion:reduce){.bgimg{transition:none}} /* ===== images more visible: lighter scrim, section-level veils only ===== */ .bgscrim{background:linear-gradient(180deg,rgba(19,17,14,.46) 0%,rgba(19,17,14,.38) 45%,rgba(19,17,14,.55) 100%)} .band{background:rgba(23,21,17,.42)} .band.alt{background:rgba(19,17,14,.55)} .band.deep{background:rgba(19,17,14,.34)} /* readability is preserved by the panels themselves, which stay solid enough */ .card,.tool,.rev,.area{background:rgba(21,19,16,.74);border-color:rgba(255,255,255,.16);backdrop-filter:blur(14px)} .result{background:rgba(14,12,10,.80)} .callout{background:rgba(32,29,26,.72)} .callout.warn{background:rgba(78,55,20,.70)} .creds{background:rgba(19,17,14,.80)} /* text gets a subtle shadow so it holds over brighter photography */ .hero h1,.band>.wrap>.center h2,.two>div>h2{text-shadow:0 2px 18px rgba(0,0,0,.55)} .hero .lead,.band>.wrap>.center .lead{text-shadow:0 1px 12px rgba(0,0,0,.5)} /* ===== hero two-column with portrait ===== */ /* The hero label is a service-area strip, not a short section label: 56 characters inside the narrower 1.25fr copy column. At the standard eyebrow size it wraps, stranding the hairline on its own line. So this one keeps its own scale — no rule, no wrapping, and a size that shrinks with the column so the five towns always sit on a single line. */ .hero .eyebrow{display:block;white-space:nowrap; font-size:clamp(10px,1.05vw,12.5px);letter-spacing:.19em} .hero .eyebrow:after{display:none} /* Below ~620px there is no size that fits 58 characters on one line, and nowrap would push a horizontal scrollbar onto the page. Let it wrap here. */ @media(max-width:620px){ .hero .eyebrow{white-space:normal;font-size:10.5px;letter-spacing:.14em;line-height:1.7} } .hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center} .hero-copy h1{font-size:clamp(32px,4.4vw,54px);max-width:17ch} .hero-portrait{display:flex;flex-direction:column;gap:16px} .portrait{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.20); box-shadow:0 24px 70px rgba(0,0,0,.55);background:rgba(255,255,255,.06);aspect-ratio:3/4} .portrait>img{width:100%;height:100%;object-fit:cover;display:block} /* shaded plate across the foot of the headshot — name left, SRS mark right */ .portrait-plate{position:absolute;left:0;right:0;bottom:0;z-index:2; padding:48px 18px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px; background:linear-gradient(180deg,rgba(19,17,14,0) 0%,rgba(19,17,14,.72) 42%,rgba(14,13,10,.94) 100%)} .pp-text{display:flex;flex-direction:column;gap:3px;min-width:0} .pp-name{font-family:var(--serif);font-size:18px;font-weight:600;color:#fff;line-height:1.2} .pp-lic{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--gold-3)} .pp-srs{height:56px;width:auto;display:block;flex:0 0 auto;margin-bottom:-2px} .pp-srs-txt{display:none;align-items:baseline;gap:1px;flex:0 0 auto; font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:.08em;color:#1c1916; background:var(--gold-3);border-radius:4px;padding:4px 9px} .pp-srs-txt em{font-style:normal;font-size:8px;position:relative;top:-4px} @media(max-width:900px){ .portrait-plate{padding:36px 14px 12px;gap:10px} .pp-name{font-size:15px} .pp-lic{font-size:10.5px} .pp-srs{height:42px} } .portrait-cap{background:rgba(19,17,14,.78);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16); border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:3px} .portrait-cap strong{color:#fff;font-family:var(--serif);font-size:18px;font-weight:600} .portrait-cap span{color:#bab3aa;font-family:var(--mono);font-size:11px;letter-spacing:.05em} @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:34px} .hero-portrait{flex-direction:row;align-items:center;gap:18px} .portrait{width:130px;flex:0 0 130px;aspect-ratio:3/4} } /* ===== section snapping ===== Proximity, not mandatory: short sections snap into place, but tall ones (the tools hub, buyers) stay freely scrollable so nothing is trapped or cut off. */ html{scroll-snap-type:y proximity;scroll-padding-top:70px} .hero,section{scroll-snap-align:start;scroll-snap-stop:always} .hero-inner{min-height:calc(100vh - 70px);display:flex;align-items:center;padding:64px 0} section{min-height:100vh;display:flex;align-items:center} section>.wrap{width:100%} /* sections that genuinely exceed one screen opt out of centring */ #buyers,#tools,#sellers{align-items:flex-start;padding-top:96px} @media(max-width:900px){ html{scroll-snap-type:none} section{min-height:0;display:block} .hero-inner{min-height:0} } /* section progress rail */ .rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60; display:flex;flex-direction:column;gap:13px} .rail a{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.35);transition:.22s;position:relative} .rail a:hover{background:var(--gold-3);transform:scale(1.3)} .rail a.on{background:var(--gold-2);border-color:var(--gold-3);transform:scale(1.35); box-shadow:0 0 0 4px rgba(201,154,69,.20)} .rail a span{position:absolute;right:20px;top:50%;transform:translateY(-50%); white-space:nowrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:#fff;background:rgba(19,17,14,.9);padding:4px 9px;border-radius:5px;opacity:0;pointer-events:none;transition:.2s} .rail a:hover span{opacity:1} @media(max-width:1100px){.rail{display:none}} /* ========================================================== MULTIPAGE ADDITIONS (split-site prototype) Shared across every page. Overrides win by source order. ========================================================== */ main{position:relative;z-index:2;display:block} /* active nav item for the current page */ nav a.active{color:var(--gold-3)} nav a.active:after{content:"";display:block;height:2px;background:var(--gold-2);margin-top:3px;border-radius:2px} @media(max-width:900px){nav a.active:after{display:none}} /* --- header brand: Pellego paired with the name, co-equal prominence --- */ /* --------------------------------------------------------------- HEADER LOCKUP — compliance note (CCR §2773) Pellego must appear at least as prominently as the agent name. The name is larger; the Pellego WORDMARK is a graphic of comparable visual weight sitting alongside it, with the brokerage name and licence number set directly beneath. Both licence numbers use the same 12px size as every other small label on the page, so nothing is smaller than the smallest other text. --------------------------------------------------------------- */ .brand{flex-direction:row!important;align-items:center;gap:11px;flex:0 1 auto;min-width:0} .brand:hover{text-decoration:none} /* Logo height tracks the name size: Pellego must read at least as prominently as the agent name (CCR §2773). It scales on the same viewport curve as the name but with a higher floor, slope and ceiling, so the mark is never the smaller of the two at any width. Name: clamp(22,2.4vw,30). */ .brand-logo{height:clamp(26px,2.8vw,34px);width:auto;display:block;flex:none} .brand-txt{display:flex;flex-direction:column;line-height:1.22;min-width:0} .brand-brokerage{display:flex;flex-direction:column;align-items:flex-start;gap:4px; padding-left:11px;border-left:1px solid rgba(255,255,255,.16);flex:none} /* two short lines instead of one long one — keeps the lockup narrow */ .brand-brokerage .bk{margin-top:0;white-space:nowrap;line-height:1.35} /* give the nav breathing room on mid-width screens before the burger kicks in */ @media(max-width:1240px){ .brand{gap:9px} .brand-brokerage{padding-left:9px} .brand-brokerage .bk{font-size:10.5px} nav{gap:20px} nav a{font-size:14px} } /* Below this the brokerage text under the logo is dropped so the nav never wraps. The Pellego wordmark stays, and the full disclosure with both licence numbers is in the footer and the