/* ============================================================ Thirlwell Pressure Washing - thirlwellpressurewashing.ca Static rebuild. Layout + type measured off the original Framer page render (framer-full-2.jpeg @1440w) and src/framer-reference.html. See FIX-SPEC.md (type/colour) + FIX-SPEC-2.md (layout). Critical hero styles are inlined in index.html . Type system: Inter (--display) - h1 / h2 / h3 / h4 headings Manrope (--sans) - buttons, nav, labels, eyebrows, body copy Accent: #C8A96E gold. There is no blue on this site. ============================================================ */ /* ---------- base ---------- */ h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--head)} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit} a{text-decoration:none} :focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:6px} .hero h1,.together h2,.quote h2,.foot .foot__h{color:#fff} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:-.16px;line-height:22px; padding:12px 20px;border-radius:11px;border:1px solid transparent; cursor:pointer;text-align:center;transition:transform .12s ease,filter .12s ease; } .btn:hover{filter:brightness(1.04)} .btn:active{transform:translateY(1px)} /* primary = gold, warm inset edges (no blue tint) */ .btn--primary{background:var(--cta);color:#fff;border-color:var(--cta-edge);box-shadow:var(--btn-shadow);padding:12px 29px} .btn--white,.btn--ghost{background:#fff;color:var(--ink-2);border-color:rgba(0,0,0,.06);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)} .btn--block{width:100%} .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none} .btn__ico{width:16px;height:16px;flex:0 0 auto} .btnrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .center{display:flex;justify-content:center} /* ---------- nav ---------- */ .nav__left{display:flex;align-items:center;gap:14px} .nav__menu{display:flex;align-items:center;gap:30px} .nav__links{display:flex;align-items:center;gap:36px} .nav__links a{color:#fff;font-size:16px;font-weight:500;letter-spacing:-.16px;opacity:.92} .nav__links a:hover{opacity:1} .nav__cta{padding:12px 22px;font-size:16px} .nav__burger{display:none;width:42px;height:42px;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer} .nav__burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .18s ease,opacity .18s ease} .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ---------- social proof row ---------- */ .proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px} .proof__item{display:flex;align-items:center;gap:10px} .proof__sep{width:1px;height:18px;background:rgba(255,255,255,.4)} .avatars{display:flex} .avatar{display:block;width:28px;height:28px;border-radius:999px;overflow:hidden;border:2px solid #fff;background:#fff;margin-left:-9px} .avatar:first-child{margin-left:0} .avatar img{width:100%;height:100%;object-fit:cover} .proof__txt{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap} .proof__num{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.01em} .proof__label{font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:-.01em;opacity:.9} .stars{display:flex;gap:2px;color:#F0B429} .star{width:13px;height:13px;display:block} .proof__rating{font-family:var(--sans);font-size:14px;font-weight:500} .proof--light{color:#fff} /* ---------- section shells ---------- */ .sec{padding:120px 0} .sec--intro{padding:87px 0 0} .sec--services{padding:209px 0 94px} .sec--how{padding:113px 0 90px} .sec--where{padding:97px 0 55px} .sec--faq{padding:56px 0 84px} /* eyebrow: gold dot + uppercase letter-spaced Manrope label. No pills. */ .eyebrow{ display:flex;align-items:center;gap:10px;margin:0; font-family:var(--sans);font-size:15px;font-weight:400;line-height:1.5; letter-spacing:.06em;text-transform:uppercase;color:rgba(16,16,16,.66); } .eyebrow::before{content:"";width:7px;height:7px;flex:0 0 auto;border-radius:999px;background:var(--cta)} .sechead{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left} .sechead h2{font-size:56px;font-weight:700;letter-spacing:-2.24px;line-height:1.08} .sechead--center{align-items:center;text-align:center} .sechead--center .eyebrow{justify-content:center} /* ---------- what we do (left-aligned statement block) ---------- */ .intro{display:flex;flex-direction:column;align-items:flex-start;gap:22px;text-align:left} .intro__body{display:flex;flex-direction:column;gap:56px} .intro__body h4,.intro__body p{ font-family:var(--display);font-size:36px;font-weight:600; letter-spacing:-1.08px;line-height:1.3;color:var(--head); } /* ---------- before / after proof grid ---------- */ .ba{margin-top:43px;background:#fff;border:1px solid rgba(6,6,7,.09);border-radius:18px;padding:10px} .ba__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ba__cell{position:relative;overflow:hidden;border-radius:9px;aspect-ratio:585/500;background:#111;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none} .ba__cell picture{display:block;position:absolute;inset:0} .ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none} .ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))} .ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;transform:translateX(-50%);background:rgba(255,255,255,.92);box-shadow:0 0 5px rgba(0,0,0,.28);z-index:2;pointer-events:none} .ba__tag{ position:absolute;top:16px;z-index:3; font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-.01em;color:#1B1B21; background:rgba(240,240,240,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border-radius:8px;padding:5px 12px;line-height:1.3; } .ba__tag--b{left:16px} .ba__tag--a{right:16px} .ba__handle{ position:absolute;left:var(--pos);top:50%;transform:translate(-50%,-50%);z-index:3; width:46px;height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center; background:rgba(235,235,235,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); color:#1B1B21;pointer-events:none; } .ba__handle svg{width:26px;height:16px} .ba__cta{margin-top:26px} /* ---------- services ---------- */ .sec--services .sechead--center{padding-bottom:6px;border-bottom:1px solid var(--line)} .svc{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;padding:42px 0 60px} .svc+.svc{border-top:1px solid var(--line);padding-top:44px} .svc--flip .svc__main{order:2} .svc--flip .svc__side{order:1} .svc__main{display:flex;flex-direction:column;gap:22px;align-items:flex-start} .svc__main h3{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.6px;line-height:1.2;text-align:left} .svc__main>p{font-family:var(--sans);font-size:16px;line-height:1.62;color:var(--grey);letter-spacing:-.01em} .benefits{display:flex;flex-direction:column;gap:11px;width:100%;margin-top:6px} .benefits li{display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:var(--panel);border:1px solid rgba(6,6,7,.07);border-radius:12px;padding:18px 18px 20px} .benefits img{width:34px;height:auto;flex:0 0 auto} .benefits span{font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.3;color:var(--head)} .svc__main .btn{margin-top:6px} .svc__side{display:flex;flex-direction:column;gap:10px} .svc__listhead{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--head)} .svc__spark{width:17px;height:17px;flex:0 0 auto;color:var(--cta)} .ticks{display:flex;flex-direction:column;gap:7px;padding-left:12px} .ticks li{position:relative;padding-left:14px;font-family:var(--sans);font-size:15px;color:var(--grey);line-height:1.5;letter-spacing:-.01em} .ticks li::before{content:"\2022";position:absolute;left:0;top:0;color:var(--grey)} .shot{margin:22px 0 0;background:#F8F8F8;border:1px solid rgba(6,6,7,.08);border-radius:14px;padding:10px} .shot img{width:100%;height:625px;object-fit:cover;border-radius:8px} /* ---------- why we do them together (black -> gold gradient) ---------- */ .together{background:linear-gradient(180deg,#000 0%,#000 17%,#C8A96E 100%);color:#fff;padding:98px 0 39px} .together__in{display:flex;flex-direction:column;align-items:flex-start} .together h2{font-size:56px;font-weight:700;letter-spacing:-2.24px;line-height:1.08;color:#fff;margin-bottom:38px} .together p{font-family:var(--sans);font-size:17px;line-height:1.62;color:#fff;letter-spacing:-.01em;max-width:1200px} .together__emph{margin-top:34px!important} .together__photo{width:100%;height:1610px;object-fit:cover;border-radius:16px;margin-top:36px} .together__cta{width:100%;margin-top:44px} /* ---------- how it works ---------- */ .how{display:grid;grid-template-columns:600px 1fr;gap:32px;align-items:start} .collage{position:relative;height:720px} .collage picture{display:block;position:absolute} .collage img{width:100%;height:100%;object-fit:cover;border-radius:6px} .collage__a{left:50px;top:0;width:493px;height:363px} .collage__b{left:25px;top:385px;width:257px;height:335px} .collage__c{left:302px;top:375px;width:259px;height:277px} .collage__stat{ position:absolute;left:259px;top:196px;width:189px;height:208px;z-index:2; background:var(--cta);border-radius:20px;color:#fff; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px; } .collage__num{font-family:var(--sans);font-size:93px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#fff} .collage__label{font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.35;color:#fff;margin-top:4px} .how__copy{padding-top:0} .how__copy .sechead{margin-bottom:72px} .steps{display:flex;flex-direction:column;gap:32px} .step{display:flex;gap:24px;align-items:flex-start} .step__num{ flex:0 0 auto;width:62px;height:62px;border-radius:999px;background:var(--cta);color:#fff; display:flex;align-items:center;justify-content:center; font-family:var(--sans);font-size:26px;font-weight:500;line-height:1; } .step__txt{display:flex;flex-direction:column;gap:7px;padding-top:6px} .step h3{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.4px;line-height:1.25} .step p{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--grey);letter-spacing:-.01em} .how__cta{margin-top:88px} /* ---------- where we work ---------- */ .where{display:grid;grid-template-columns:1fr 592px;gap:16px;align-items:start} .where__copy{display:flex;flex-direction:column;align-items:flex-start;padding-top:11px} .where h2{font-size:56px;font-weight:700;letter-spacing:-2.24px;line-height:1.08;margin-top:5px} .where__body{font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.8;color:var(--head);letter-spacing:-.02em;max-width:34ch;margin-top:39px} .where__lines{font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.45;color:var(--head);letter-spacing:-.02em;margin-top:27px} .where__copy .btn{margin-top:37px} .where__map{height:618px;border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid rgba(6,6,7,.08)} .where__map iframe{width:100%;height:100%;border:0;display:block} /* ---------- faq ---------- */ .faq{display:flex;flex-direction:column;align-items:center;gap:28px} .faq__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px} .faq__head .eyebrow{justify-content:center} .faq__head h2{font-size:56px;font-weight:700;letter-spacing:-2.24px;line-height:1.1} .faq__list{display:flex;flex-direction:column;gap:25px;width:100%;background:var(--panel);border:1px solid rgba(6,6,7,.07);border-radius:18px;padding:11px} .qa{background:transparent;border-radius:11px;overflow:hidden} .qa[open]{background:#FBFBFB;box-shadow:0 1px 2px rgba(0,0,0,.05)} .qa summary{display:flex;align-items:center;gap:22px;padding:15px 24px;cursor:pointer;list-style:none;font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.4px;color:var(--head)} .qa summary::-webkit-details-marker{display:none} .qa__ico{width:18px;height:18px;flex:0 0 auto;color:var(--cta);transition:transform .2s ease} .qa[open] .qa__ico{transform:rotate(45deg)} .qa[open] summary{padding-top:16px;padding-bottom:6px} .qa__body{padding:0 24px 16px 64px} .qa__body p{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--grey);letter-spacing:-.01em} /* ---------- quote ---------- */ .quotewrap{padding:0 0 42px} .quote{position:relative;border-radius:16px;overflow:hidden;isolation:isolate;background:#111;color:#fff} .quote__bg{position:absolute;inset:0;z-index:-2} .quote__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%} .quote::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,6,7,.90) 0%,rgba(6,6,7,.86) 18%,rgba(46,39,22,.82) 38%,rgba(112,94,58,.80) 62%,rgba(178,150,97,.82) 88%,rgba(198,168,110,.84) 100%)} .quote__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:95px 20px 100px} .quote__call{ display:inline-flex;align-items:center;gap:8px;background:var(--cta);border:1px solid var(--cta-edge); box-shadow:var(--btn-shadow);border-radius:999px;padding:7px 18px;color:#fff; font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:-.01em; } .quote__call strong{font-weight:600} .quote__call svg{width:15px;height:15px;flex:0 0 auto} .quote__h2{font-size:51px;font-weight:700;letter-spacing:-2.04px;line-height:1.1;color:#fff} .quote__sub{font-family:var(--sans);font-size:16px;line-height:1.6;color:#fff} .quote .proof{margin-top:2px} .qform{width:100%;max-width:598px;background:#F0F0F0;border-radius:16px;padding:30px;display:grid;grid-template-columns:1fr;gap:20px;margin-top:2px;text-align:left} .field{display:flex;flex-direction:column;gap:7px} .field--full{grid-column:1/-1} .field label{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--head)} .opt{font-weight:500;color:var(--grey)} .field input,.field select,.field textarea{ font-family:var(--sans);font-size:16px;color:var(--head);background:#fff; border:1px solid rgba(6,6,7,.14);border-radius:11px;padding:15px 14px;width:100%; appearance:none;-webkit-appearance:none; } .field textarea{resize:vertical;min-height:110px} .field select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101010' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px} .field input::placeholder,.field textarea::placeholder{color:rgba(16,16,16,.4)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cta);outline:none;box-shadow:0 0 0 3px rgba(200,169,110,.35)} .field [aria-invalid="true"]{border-color:#C2410C} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .qform__msg{grid-column:1/-1;margin:0;font-family:var(--sans);font-size:15px;line-height:1.55;padding:14px 16px;border-radius:12px} .qform__msg[data-state="ok"]{background:rgba(200,169,110,.22);border:1px solid rgba(169,138,80,.6);color:var(--head)} .qform__msg[data-state="err"]{background:rgba(194,65,12,.10);border:1px solid rgba(194,65,12,.45);color:var(--head)} .qform__msg a{color:var(--gold-ink);font-weight:700} .qform--done .field,.qform--done button[data-submit]{display:none} /* ---------- footer ---------- */ .foot{background:var(--ink-3);color:#fff;padding:68px 0 20px} .foot__top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px} .foot__brand img{width:257px;height:auto;filter:brightness(0) invert(1)} .foot__nav{display:flex;flex-direction:column;align-items:flex-end;gap:16px} .foot__nav ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:30px} .foot__nav ul a{font-family:var(--sans);font-size:16px;font-weight:400;color:#fff;letter-spacing:-.16px} .foot__nav ul a:hover{opacity:.75} .foot__cta{margin-top:14px} .foot__h{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.02em;color:#fff;margin-bottom:14px} .foot__mid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:33px} .foot__col ul{display:flex;flex-direction:column;gap:8px} .foot__col li,.foot__col a{font-family:var(--sans);font-size:15px;font-weight:400;color:rgba(255,255,255,.72);line-height:1.5} .foot__col a:hover{color:#fff} .foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px} .foot__bar p{font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.72)} .foot__legal{display:flex;align-items:center;gap:88px} .foot__legal span{display:none} .foot__legal a:hover{color:#fff} /* legacy 4-column footer shape - still used by privacy.html / terms.html */ .foot__in{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:40px;align-items:start} .foot__in .foot__brand img{width:200px} .foot__in .foot__col a{color:rgba(255,255,255,.72)} .foot__in .foot__col a:hover{color:#fff} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1199px){ .sec{padding:96px 0} .sec--intro{padding:80px 0 0} .sec--services{padding:150px 0 100px} .sec--where{padding:130px 0 70px} .sec--how{padding:90px 0} .sechead h2,.together h2,.where h2,.faq__head h2{font-size:46px;letter-spacing:-1.6px} .quote__h2{font-size:44px;letter-spacing:-1.5px} .intro__body h4,.intro__body p{font-size:32px;letter-spacing:-.9px} .intro__body{gap:32px} .together__photo{height:1100px} .how{grid-template-columns:480px 1fr;gap:28px} .collage{height:600px;transform-origin:top left} .collage__a{left:40px;width:410px;height:302px} .collage__b{left:20px;top:320px;width:214px;height:279px} .collage__c{left:251px;top:312px;width:215px;height:230px} .collage__stat{left:215px;top:163px;width:157px;height:173px;border-radius:16px} .collage__num{font-size:70px} .collage__label{font-size:15px} .where{grid-template-columns:1fr 480px} .where__map{height:540px} .shot img{height:500px} } @media (max-width:1023px){ .svc{grid-template-columns:1fr;gap:36px} .svc--flip .svc__main{order:1} .svc--flip .svc__side{order:2} .how{grid-template-columns:1fr;gap:48px} .collage{height:600px;max-width:480px} .where{grid-template-columns:1fr;gap:40px} .where__map{height:420px} .together__photo{height:760px} .shot img{height:440px} } @media (max-width:809px){ :root{--pad:20px} .sec{padding:64px 0} .sec--intro{padding:56px 0 0} .sec--services{padding:80px 0 56px} .sec--where{padding:72px 0 48px} .sec--how{padding:64px 0} .sec--faq{padding:64px 0 72px} .sechead h2,.together h2,.where h2,.faq__head h2{font-size:34px;letter-spacing:-1.1px} .quote__h2{font-size:32px;letter-spacing:-1.05px} .intro__body h4,.intro__body p{font-size:24px;letter-spacing:-.6px;line-height:1.35} .intro__body{gap:20px} .sec--services .sechead--center{padding-bottom:32px} .svc{padding:28px 0 34px} .svc+.svc{padding-top:32px} .svc__main h3{font-size:22px;letter-spacing:-.44px} .benefits span{font-size:16px} /* mobile nav */ .nav__burger{display:flex} .nav__in{height:72px} .nav__menu{ position:absolute;left:0;right:0;top:72px;background:rgba(0,0,0,.97); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); flex-direction:column;align-items:stretch;gap:6px;padding:16px 20px 22px; border-top:1px solid rgba(255,255,255,.1); display:none; } .nav__menu.is-open{display:flex} .nav__links{flex-direction:column;align-items:stretch;gap:2px} .nav__links a{display:block;padding:12px 4px;font-size:17px;opacity:1} .nav__cta{margin-top:8px;width:100%} .ba{margin-top:36px;padding:8px;border-radius:14px} .ba__grid{grid-template-columns:1fr;gap:8px} .ba__cta{margin-top:24px} .ba__cta .btn{width:100%} .together{padding:60px 0 76px} .together h2{margin-bottom:22px} .together__photo{height:420px;margin-top:26px} .together__cta{margin-top:28px} .together__cta .btn{width:100%} .collage{height:auto;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative} .collage picture{position:static;width:auto!important;height:auto!important;left:auto!important;top:auto!important} .collage__a{grid-column:1/-1} .collage img{height:200px} .collage__a img{height:230px} .collage__stat{position:static;width:auto;height:auto;grid-column:1/-1;padding:22px;flex-direction:row;gap:16px;justify-content:flex-start;text-align:left;border-radius:16px} .collage__num{font-size:56px} .how__copy .sechead{margin-bottom:32px} .step__num{width:52px;height:52px;font-size:22px} .step{gap:16px} .how__cta{margin-top:32px;width:100%} .where__map{height:300px} .where__body,.where__lines{font-size:17px} .where__copy .btn{width:100%} .faq{gap:30px} .faq__list{padding:8px;border-radius:14px;gap:8px} .qa summary{font-size:17px;padding:14px 16px;gap:14px} .qa[open] summary{padding-top:18px;padding-bottom:6px} .qa__body{padding:0 16px 18px 48px} .quotewrap{padding:0 0 24px} .quote__in{padding:56px 16px 44px} .qform{padding:18px;grid-template-columns:1fr} .shot img{height:280px} .foot{padding:56px 0 32px} .foot__top{flex-direction:column;gap:28px} .foot__brand img{width:200px} .foot__nav{align-items:flex-start} .foot__nav ul{justify-content:flex-start;gap:18px} .foot__mid{grid-template-columns:1fr;gap:28px;margin-top:44px} .foot__in{grid-template-columns:1fr 1fr;gap:28px} .foot__in .foot__brand{grid-column:1/-1} .foot__bar{margin-top:40px;flex-direction:column;gap:10px} .foot__legal{gap:24px} .btnrow .btn{flex:1 1 auto} } @media (max-width:479px){ .hero__in{gap:16px} .btnrow{width:100%} .btnrow .btn{width:100%} .collage{grid-template-columns:1fr} .foot__in{grid-template-columns:1fr} .collage__stat{flex-direction:column;align-items:flex-start;gap:4px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ---------- legal stub pages ---------- */ .legal{padding:88px 0 120px} .legal__in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px} .legal h1{font-size:44px;letter-spacing:-1.4px} .legal h2{font-size:24px;margin-top:18px} .legal p,.legal li{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--grey)} .legal ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:8px} .legal a{color:var(--gold-ink);font-weight:600} .legal__meta{font-size:14px;color:var(--grey)} @media (max-width:809px){.legal{padding:56px 0 72px}.legal h1{font-size:32px}} /* ---------- reviews / testimonials (imagery pass 2026-08-17) ---------- */ .sec--reviews{padding:40px 0 110px} .revhead{margin-bottom:52px} .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .review{margin:0;display:flex;flex-direction:column;gap:16px;background:var(--panel);border-radius:14px;padding:28px 26px} .review .stars{gap:3px} .review__quote{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;letter-spacing:-.01em;color:var(--ink-2)} .review__who{display:flex;align-items:center;gap:12px;margin-top:auto} .review__face{display:block;width:44px;height:44px;border-radius:999px;overflow:hidden;flex:0 0 auto} .review__face img{width:100%;height:100%;object-fit:cover} .review__meta{display:flex;flex-direction:column;line-height:1.35} .review__meta strong{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--head)} .review__meta span{font-size:13.5px;color:var(--grey)} @media (max-width:1024px){.reviews{grid-template-columns:1fr 1fr}} @media (max-width:700px){.reviews{grid-template-columns:1fr}.revhead{margin-bottom:32px}.sec--reviews{padding:24px 0 84px}} /* ============================================================ STICKY QUOTE CTA (added 2026-08-18) Desktop: floating pill bottom-right. Mobile: full-width bar. Auto-hides while the quote form itself is on screen. ============================================================ */ .stickycta{ position:fixed;z-index:60;right:24px;bottom:24px; display:flex;align-items:center;gap:10px; opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .25s ease,transform .25s ease,visibility .25s; } .stickycta.is-on{opacity:1;visibility:visible;transform:translateY(0)} .stickycta .btn{box-shadow:0 10px 30px rgba(0,0,0,.28),var(--btn-shadow)} .stickycta__call{display:none} @media (max-width:809px){ :root{--pad:22px} /* dangling divider looked broken once the row wrapped */ .proof__sep{display:none} .proof{gap:8px 12px} .stickycta{ left:0;right:0;bottom:0; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background:rgba(6,6,7,.92); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.12); transform:translateY(100%); } .stickycta.is-on{transform:translateY(0)} .stickycta .btn{flex:1 1 auto;box-shadow:var(--btn-shadow)} .stickycta__call{display:inline-flex;flex:0 0 auto;width:54px;padding:0;justify-content:center} body.has-stickycta{padding-bottom:76px} } /* ============================================================ WORK PAGE (work.html) ============================================================ */ .workhero{background:var(--ink);color:#fff;padding:104px 0 56px;text-align:center} .workhero h1{color:#fff;font-family:var(--display);font-size:52px;font-weight:700;letter-spacing:-2px;line-height:1.05;margin:0 0 14px;text-wrap:balance} .workhero p{max-width:620px;margin:0 auto;color:rgba(255,255,255,.82);font-size:17px;line-height:1.55} .workhero .proof{margin-top:26px} .worknav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px} .worknav a{font-size:14px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 18px;text-decoration:none} .worknav a:hover{background:rgba(255,255,255,.1);color:#fff} .wsec{padding:80px 0} .wsec--alt{background:var(--panel)} .wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px} .gr{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:14px} .gr__top{display:flex;align-items:center;justify-content:space-between;gap:12px} .gr__src{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)} .gr blockquote{margin:0;font-size:17px;line-height:1.6;color:var(--head)} .gr__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px} .gr__ini{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--gold);color:var(--ink);font-weight:700;font-size:16px} .gr__name{font-weight:700;font-size:15px} .gr__meta{display:block;font-weight:400;font-size:13px;color:var(--grey);margin-top:2px} @media (max-width:809px){ .workhero{padding:88px 0 44px} .workhero h1{font-size:34px;letter-spacing:-1.2px} .wsec{padding:56px 0} .wgrid{grid-template-columns:1fr;gap:14px;margin-top:26px} .gr{padding:22px} } /* real-review initials avatar (replaced AI headshots 2026-08-18) */ .review__ini{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--gold);color:var(--ink);font-family:var(--display);font-weight:800;font-size:18px} /* ============================================================ ABOUT PAGE (about.html) — added 2026-08-18 ============================================================ */ .abhero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate} .abhero__bg{position:absolute;inset:0;z-index:-2} .abhero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 32%} .abhero::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(6,6,7,.30) 0%,rgba(6,6,7,.16) 30%,rgba(6,6,7,.55) 52%,rgba(6,6,7,.88) 76%,rgba(6,6,7,.96) 100%)} .abhero__in{padding:330px 0 84px;text-align:center} .abhero h1{color:#fff;font-family:var(--display);font-size:56px;font-weight:700;letter-spacing:-2.1px;line-height:1.04;margin:14px 0 16px;text-wrap:balance} .abhero p{max-width:620px;margin:0 auto;color:rgba(255,255,255,.90);font-size:18px;line-height:1.6} .abhero .eyebrow{color:var(--gold)} .story{max-width:760px;margin:0 auto} .story p{font-size:19px;line-height:1.72;color:var(--head)} .story p+p{margin-top:20px} .story .lead{font-size:24px;line-height:1.55;letter-spacing:-.3px;font-weight:500} .story blockquote{margin:34px 0;padding:22px 0 22px 26px;border-left:3px solid var(--gold); font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.35;color:var(--head)} .abstats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .abstat{background:var(--panel);border-radius:16px;padding:30px 26px;text-align:center} .abstat b{display:block;font-family:var(--num);font-size:46px;font-weight:700;letter-spacing:-1.6px;color:var(--gold-ink);font-variant-numeric:tabular-nums} .abstat span{display:block;margin-top:6px;font-size:15px;color:var(--grey);line-height:1.45} .abgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px} .abcard{background:var(--panel);border-radius:16px;padding:28px} .abcard h3{font-size:20px;letter-spacing:-.4px;margin-bottom:10px} .abcard p{font-size:16.5px;line-height:1.6;color:var(--grey)} .abphoto{margin-top:44px;border-radius:18px;overflow:hidden} .abphoto img{width:100%;display:block} .abcap{margin-top:12px;font-size:14px;color:var(--grey);text-align:center} @media (max-width:809px){ .abhero__in{padding:250px 0 56px} .abhero h1{font-size:34px;letter-spacing:-1.2px} .abhero p{font-size:16.5px} .story p{font-size:17.5px} .story .lead{font-size:21px} .story blockquote{font-size:22px;padding-left:20px} .abstats{grid-template-columns:1fr;gap:12px;margin-top:32px} .abstat{padding:24px} .abgrid{grid-template-columns:1fr;gap:12px} }