/* ============================================================ KODIAK BUILDS / KODIAK JUNK REMOVAL, Variant A Black Olive Structural clone of the Thirlwell PW build (projects/thirlwell-web), re-skinned to Variant A "Black Olive": ink #0B0B0B, bone #F3F1EA, olive #556B2F, bear red #D7191C (CTA and one accent only). Bebas Neue on big display slots (overrides at the bottom of this file), Inter and Manrope everywhere else. Critical hero styles are inlined in each page . ============================================================ */ /* ---------- 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(--olive);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(--olive)} .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:flex;flex-direction:column;gap:28px;padding:42px 0 60px} .svc+.svc{border-top:1px solid var(--line);padding-top:44px} .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(--olive)} .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%,#3F5222 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(--olive);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(--olive);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(--olive);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(20,26,11,.82) 38%,rgba(40,52,22,.80) 62%,rgba(55,70,30,.82) 88%,rgba(63,82,34,.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(--olive);outline:none;box-shadow:0 0 0 3px rgba(85,107,47,.30)} .field [aria-invalid="true"]{border-color:#D7191C} .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(85,107,47,.16);border:1px solid rgba(63,82,34,.55);color:var(--head)} .qform__msg[data-state="err"]{background:rgba(215,25,28,.10);border:1px solid rgba(215,25,28,.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){ .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}} /* ============================================================ MR. GET IT DONE overrides (Variant A) - appended after all responsive blocks so these win the cascade. ============================================================ */ /* Bebas on the big display slots */ .sechead h2,.together h2,.where h2,.faq__head h2,.quote__h2{ font-family:"Bebas Neue",Impact,var(--display);font-weight:400; letter-spacing:.01em;text-transform:uppercase; } .sechead h2,.together h2,.where h2,.faq__head h2{font-size:66px;line-height:.95} .quote__h2{font-size:58px;line-height:.98} .quote__h2 em{font-style:normal;color:#BFD98A} .together h2 em{font-style:normal;color:#D9E8B8} @media (max-width:1199px){ .sechead h2,.together h2,.where h2,.faq__head h2{font-size:54px;letter-spacing:.01em} .quote__h2{font-size:48px;letter-spacing:.01em} } @media (max-width:809px){ .sechead h2,.together h2,.where h2,.faq__head h2{font-size:42px;letter-spacing:.01em} .quote__h2{font-size:38px;letter-spacing:.01em} } /* text logo (no image asset yet) */ .nav__logo{font-family:"Bebas Neue",Impact,sans-serif;font-size:27px;letter-spacing:.03em;color:#fff;line-height:1;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px} .nav__mark{width:34px;height:34px;display:block;flex:none} .nav__logo em{font-style:normal;color:var(--cta)} .foot__brand .nav__logo{font-size:32px} .foot__brand .nav__mark{width:40px;height:40px} .foot__tag{font-family:var(--sans);font-size:14px;color:rgba(255,255,255,.6);margin-top:12px;max-width:300px;line-height:1.6} /* hazard stripe divider - the Variant A signature */ .stripe{height:10px;background:repeating-linear-gradient(-45deg,var(--cta) 0 18px,#0B0B0B 18px 36px)} /* photo placeholder slots (until real job shots drop in) */ .ph{position:relative;background:#161616;display:grid;place-items:center;overflow:hidden;border-radius:8px;min-height:120px} .ph::before{content:"";position:absolute;inset:0;background: radial-gradient(120% 90% at 30% 20%,rgba(85,107,47,.12),transparent 60%), repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0 14px,transparent 14px 28px)} .ph>span{position:relative;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8A8A85;text-align:center;padding:0 16px;line-height:1.6} .ph--after{background:#1C2410} .ph--after::before{background: radial-gradient(120% 90% at 60% 30%,rgba(85,107,47,.34),rgba(85,107,47,.05) 65%), repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px)} .ph--after>span{color:#A9BD7A} /* placeholder geometry per structural slot */ .ba__cell .ph{position:absolute;inset:0;border-radius:0;min-height:0} .ba__cell .ba__after .ph{position:absolute;inset:0} .shot .ph{height:625px;border-radius:8px} .together .ph{width:100%;height:520px;border-radius:16px;margin-top:36px} .quote__bg .ph{position:absolute;inset:0;border-radius:0} .collage .ph{position:absolute;border-radius:6px;min-height:0} @media (max-width:1199px){.shot .ph{height:500px}} @media (max-width:1023px){.shot .ph{height:440px}.together .ph{height:420px}} @media (max-width:809px){ .shot .ph{height:280px}.together .ph{height:320px;margin-top:26px} .collage{height:auto;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:10px} .collage .ph{position:static;width:auto!important;height:200px!important;left:auto!important;top:auto!important} .collage .ph.collage__a{grid-column:1/-1;height:230px!important} } @media (max-width:479px){.collage{grid-template-columns:1fr}} /* benefit tiles: orange check icon instead of image assets */ .benefits svg{width:32px;height:32px;flex:0 0 auto;color:var(--olive)} /* honest trust row (replaces avatar/star proof - no invented counts) */ .proof--plain .proof__label{opacity:1;font-weight:500} .proof--plain .proof__sep{background:rgba(255,255,255,.35)} /* photo drop-in geometry (added at image-wiring pass) */ .together__photo{width:100%;height:520px;object-fit:cover;border-radius:16px;margin-top:36px} @media (max-width:809px){.together__photo{height:320px;margin-top:26px}} .shot img{height:625px} @media (max-width:1199px){.shot img{height:500px}} @media (max-width:1023px){.shot img{height:440px}} @media (max-width:809px){.shot img{height:280px}} /* ============================================================ CLIENT REVISIONS 2026-08-20 (Yashua's markup doc) ============================================================ */ /* depth pass - "make the boxes have more depth" */ .benefits li{ background:linear-gradient(165deg,#FFFFFF 0%,#F3F1EA 72%,#ECE9DF 100%); border:1px solid rgba(6,6,7,.09);border-radius:16px; box-shadow:0 1px 2px rgba(6,6,7,.05),0 14px 28px -16px rgba(6,6,7,.28),inset 0 1px 0 rgba(255,255,255,.9); } .ba{box-shadow:0 1px 2px rgba(6,6,7,.04),0 20px 44px -24px rgba(6,6,7,.3)} .shot{box-shadow:0 1px 2px rgba(6,6,7,.04),0 16px 32px -20px rgba(6,6,7,.26)} .faq__list{box-shadow:0 1px 2px rgba(6,6,7,.04),0 20px 44px -24px rgba(6,6,7,.26)} .qa[open]{box-shadow:0 8px 20px -10px rgba(6,6,7,.18)} .collage__stat{box-shadow:0 16px 32px -14px rgba(63,82,34,.55)} .step__num{box-shadow:0 10px 20px -10px rgba(63,82,34,.5)} .qform{box-shadow:0 26px 54px -30px rgba(0,0,0,.55)} .where__map{box-shadow:0 1px 2px rgba(6,6,7,.04),0 20px 44px -24px rgba(6,6,7,.3)} /* what we do - check chips + core-services trio + trust split + CTA */ .wedo__chips{display:flex;flex-wrap:wrap;gap:10px} .chip{ display:inline-flex;align-items:center;gap:8px; background:linear-gradient(165deg,#fff 0%,#F0EEE6 100%);border:1px solid rgba(6,6,7,.09);border-radius:999px; padding:9px 16px;font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--head); box-shadow:0 1px 2px rgba(6,6,7,.05),0 10px 20px -12px rgba(6,6,7,.24); } .chip svg{width:16px;height:16px;flex:0 0 auto;color:var(--olive)} .trio{margin-top:56px} .trio .eyebrow{margin-bottom:18px} .trio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .tcard{ background:linear-gradient(170deg,#fff 0%,#F2F0E9 100%);border:1px solid rgba(6,6,7,.09);border-radius:18px; padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start; box-shadow:0 1px 2px rgba(6,6,7,.05),0 18px 36px -22px rgba(6,6,7,.3),inset 0 1px 0 rgba(255,255,255,.9); } .tcard svg{width:30px;height:30px;color:var(--olive)} .tcard h3{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.4px;line-height:1.25} .tcard p{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--grey);letter-spacing:-.01em} .trust{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px} .trust__col{ background:linear-gradient(170deg,#fff 0%,#F2F0E9 100%);border:1px solid rgba(6,6,7,.09);border-radius:18px; padding:28px;display:flex;flex-direction:column;gap:10px; box-shadow:0 1px 2px rgba(6,6,7,.05),0 18px 36px -22px rgba(6,6,7,.3),inset 0 1px 0 rgba(255,255,255,.9); } .trust__col h3{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.4px} .trust__col p{font-family:var(--sans);font-size:15.5px;line-height:1.65;color:var(--grey);letter-spacing:-.01em} .trust__col--promise{background:linear-gradient(170deg,#141414 0%,#060607 100%);border-color:rgba(255,255,255,.08);box-shadow:0 20px 40px -22px rgba(6,6,7,.5)} .trust__col--promise h3{color:#fff} .trust__col--promise p{color:rgba(255,255,255,.82)} .wedo__cta{margin-top:44px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px} .wedo__cta>p{font-family:var(--sans);font-size:17px;color:var(--grey)} .wedo__cta-big{font-family:var(--display);font-size:24px;font-weight:600;color:var(--head);letter-spacing:-.5px;line-height:1.3} .wedo__cta .btn{margin-top:16px} /* where we work - community trust bullets */ .where__trust{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:26px} .where__trust li{ background:linear-gradient(165deg,#fff 0%,#F3F1EA 100%);border:1px solid rgba(6,6,7,.09);border-radius:14px; padding:16px 18px;display:flex;gap:14px;align-items:flex-start; box-shadow:0 1px 2px rgba(6,6,7,.05),0 12px 24px -14px rgba(6,6,7,.26),inset 0 1px 0 rgba(255,255,255,.9); } .where__trust svg{width:22px;height:22px;flex:0 0 auto;color:var(--olive);margin-top:2px} .where__trust p{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--grey);letter-spacing:-.01em} .where__trust strong{display:block;font-weight:600;color:var(--head);margin-bottom:2px} .where__close{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--head);letter-spacing:-.02em;line-height:1.5;margin-top:26px;max-width:38ch} /* footer slogan */ .foot__slogan{font-family:var(--bebas);font-size:26px;letter-spacing:.02em;line-height:1.1;color:#fff;text-transform:uppercase;margin:0 0 14px;max-width:280px} .foot__slogan em{font-style:normal;color:var(--cta)} /* sticky mobile CTA bar */ .mcta{display:none;transform:translateY(0);transition:transform .25s ease} @media (max-width:809px){ .mcta{ position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(6,6,7,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -14px 34px rgba(0,0,0,.4); } .mcta.is-hidden{transform:translateY(120%)} .mcta__quote{flex:1 1 auto} .mcta__call{flex:0 0 auto;padding:12px 18px} .foot{padding-bottom:104px} } /* mobile spacing pass - breathing room, nothing flush to the screen edge */ @media (max-width:809px){ :root{--pad:28px} .nav__in{gap:12px} .mcta{padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px))} .trio{margin-top:40px} .trio__grid{grid-template-columns:1fr;gap:12px} .tcard{padding:22px 20px 24px} .trust{grid-template-columns:1fr;gap:12px} .trust__col{padding:24px 20px} .wedo__cta{margin-top:36px} .wedo__cta-big{font-size:20px} .wedo__cta .btn{width:100%} .chip{font-size:13.5px;padding:8px 14px} .ba{padding:8px} .qa__body{padding-right:20px} .quote__in{padding:52px 22px 44px} .nav__menu{padding:16px 28px 22px} .foot__slogan{font-size:24px} .hero__sub{padding:0 6px} .together p{font-size:16px} .where__close{margin-top:22px} } /* ============================================================ KODIAK VARIANT A "BLACK OLIVE" — root token fallbacks + new sections. Appended 2026-09-03. :root fallbacks let index.html's own inline :root override any of these without editing this file. ============================================================ */ :root{ --cta:#D7191C;--cta-edge:#B3151A; --olive:#556B2F;--olive-deep:#3F5222;--olive-light:#7A8F4A; --gold:#556B2F;--gold-deep:#3F5222;--gold-ink:#3F5222; --paper:#F3F1EA; } /* ---------- reviews: horizontal card flow, scroll snap, no library ---------- Same markup works as a "card row" on desktop (several cards visible, can still be dragged/scrolled with a trackpad or arrow keys) and a swipeable one-card-at-a-time flow on mobile. Section stays [hidden] until main.js finds at least one review in the #reviews-data JSON block. */ .reviews{background:var(--ink);color:#fff;padding:96px 0} .reviews .sechead h2{color:#fff} .reviews .eyebrow{color:rgba(255,255,255,.66)} .reviews__grid{ display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad); padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin; } .rev{ flex:0 0 340px;scroll-snap-align:start; background:#141414;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:26px; } .rev__stars{color:#F5B301;letter-spacing:2px;font-size:15px} .rev__txt{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.88);margin:14px 0} .rev__foot{display:flex;align-items:center;justify-content:space-between;gap:10px} .rev__who{font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.12em;margin:0} .rev__badge{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--olive-light);background:rgba(85,107,47,.22);border:1px solid rgba(122,143,74,.4);border-radius:999px;padding:3px 10px;flex:0 0 auto} .reviews__sub{font-family:var(--sans);font-size:15px;line-height:1.5;color:rgba(255,255,255,.66);margin-top:4px;max-width:46ch} .reviews__cta{margin-top:34px;text-align:center} @media (max-width:809px){ .reviews__grid{gap:12px} .rev{flex-basis:82vw} } /* ---------- photo gallery ---------- */ .gallery{padding:0 0 56px} .gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .gallery__grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block} @media (max-width:809px){ .gallery__grid{grid-template-columns:repeat(2,1fr)} } /* ---------- hero real-photo strip ("real backyards" proof, right under the fold) ---------- */ .hero__photos{display:flex;gap:10px;justify-content:center;margin-top:4px} .hero__photos img{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.25)} .hero__photos-label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:2px} @media (max-width:809px){ .hero__photos img{width:72px;height:54px} } /* ---------- service card photo (Decks / Fences / Junk Removal) ---------- */ .tcard__photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:2px} /* ---------- crew photo slot (placeholder until Wes sends one) ---------- */ .crew-photo{width:100%;height:340px;object-fit:cover;border-radius:16px;margin-top:20px} @media (max-width:809px){.crew-photo{height:220px}} /* ---------- language toggle chip ---------- */ .lang{font-size:12px;letter-spacing:.08em;opacity:.7;margin-left:12px} /* ============================================================ CLIENT REVIEW PASS 2026-09-05 (Frost's screen recording) mobile: smaller hero logo, one hero CTA, olive tint bands, tighter section rhythm. ============================================================ */ @media (max-width:809px){ .hero__logo{width:110px} .hero__in .btnrow .btn--ghost{display:none} .sec--services,.sec--where{background:#EAEEDD} .sec{padding:52px 0} .sec--services{padding:64px 0 48px} } /* ---------- trust pair, moved above How It Works (structural pass 2026-09-05) ---------- */ .sec--trustpair{padding:0 0 60px} @media (max-width:809px){.sec--trustpair{padding:0 0 36px}} /* ---------- one CTA at the end of What We Take (structural pass 2026-09-05) ---------- */ .svc__cta{margin-top:16px} /* ================= NORTHSTONE PASS (Variant C, 2026-09-08) ================= Frost picked C off thenorthstonegroup.com and said keep the brand colours. Measured off that page: hero 92px at weight 200, tracking -3.7px over a full bleed dusk photo, ONE hot accent used sparingly, full width black authority bands as rhythm breaks, eyebrow above every headline, a stat row. Everything below changes TYPE and RHYTHM only. Every brand token stays: ink #0B0B0B, olive #556B2F, bear red #D7191C, bone #F3F1EA. Applied to kodiak-builds only. The junk site stays as it is on Frost's word, because it converts cold paid traffic and thin quiet type hurts that job. */ /* the signature: ultralight, oversized, tight */ .hero h1{ font-family:var(--sans); font-weight:200; text-transform:none; font-size:clamp(42px,7.4vw,96px); letter-spacing:-.042em; line-height:.96; text-wrap:balance; } .hero h1 em{font-style:normal;font-weight:200;color:rgba(255,255,255,.72)} .hero__sub{ font-family:var(--sans);font-weight:300; font-size:clamp(15px,1.35vw,19px);line-height:1.62; letter-spacing:-.01em;max-width:58ch;margin-left:auto;margin-right:auto; } .hero__in{gap:22px} .hero__logo{width:170px;height:auto} /* NOTE: section heads deliberately KEEP Bebas. Measured off thenorthstonegroup.com, the hero there is weight 200 but every section h2 is weight 400. The ultralight is a hero move, not a site wide one. Making everything light would flatten Kodiak's character for no gain. */ /* Northstone's eyebrow is a quiet label, not a bullet. Keep the olive dot as the brand tie, drop the weight and widen the tracking. */ .eyebrow{ font-size:11px;font-weight:600;letter-spacing:.2em; color:rgba(16,16,16,.55);gap:9px; } .eyebrow::before{width:5px;height:5px} .reviews .eyebrow,.together .eyebrow{color:rgba(255,255,255,.6)} /* THE STAT ROW. Only verified numbers: 17 reviews at 5.0 on Google and 100% recommended across 7 Facebook recommendations, both from the Sep 5 pull. Deliberately NOT Northstone's "3400+ projects" furniture, Kodiak is two carpenters plus one hire and 18 months old. */ .statband{background:var(--ink);color:#fff;padding:64px 0} .statband .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .stat__n{ font-family:var(--sans);font-weight:200; font-size:clamp(40px,5.4vw,74px);letter-spacing:-.045em;line-height:1; color:#fff; } .stat__l{ font-family:var(--sans);font-size:13px;font-weight:400;line-height:1.4; color:rgba(255,255,255,.62);margin-top:14px;padding-top:14px; border-top:1px solid rgba(255,255,255,.22);max-width:190px; } @media (max-width:809px){ .statband{padding:44px 0} .statband .wrap{grid-template-columns:1fr 1fr;gap:22px} .stat__l{font-size:12px} } /* AUTHORITY BAND. Northstone breaks the page with full width black strips. Olive rule keeps it Kodiak rather than a copy of their yellow. */ .authband{background:var(--ink);color:#fff;padding:56px 0} .authband .wrap{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap} .authband h2{ font-family:var(--sans);font-weight:200;color:#fff; font-size:clamp(26px,3.4vw,46px);letter-spacing:-.04em;line-height:1.05;margin:0; } .authband p{ font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.6; color:rgba(255,255,255,.66);margin:0;max-width:46ch; } .authband__rule{width:56px;height:2px;background:var(--olive-light);flex:0 0 auto} @media (max-width:809px){.authband .wrap{flex-direction:column;gap:14px}} /* more air between sections, Northstone's restraint */ .sec{padding-top:clamp(64px,7vw,108px);padding-bottom:clamp(64px,7vw,108px)} /* the photo is bright midday, the reference is dusk. Thin white type needs a floor. */ .hero::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:linear-gradient(180deg,rgba(6,6,7,.62) 0%,rgba(6,6,7,.40) 42%,rgba(6,6,7,.72) 100%); } .hero__in{position:relative;z-index:1} .hero__sub{color:rgba(255,255,255,.86)} /* ============================================================================ CRAFT PASS 2026-09-08. Builds on the Northstone pass above, does not undo it. Frost: "really upgrade the feel of this whole website". Five things were actually wrong, not vague: 1. the hero carried six stacked blocks over a bright photo 2. section heads were weight 700 while the hero is weight 200, so the page read as two different sites 3. the promise card was a heading plus one line in a stretched grid cell, which rendered as a tall black void 4. the gallery was eight uneven crops in a plain grid 5. two identical quote buttons sat within a screen of each other ========================================================================== */ /* 1. HERO. Logo and the thumbnail strip are gone from the markup. What is left gets room and sits on the floor of the frame, the way the reference does, instead of floating dead centre. */ .hero__in{ min-height:clamp(560px,76vh,760px); display:flex;flex-direction:column;justify-content:flex-end; align-items:flex-start;text-align:left; padding-bottom:clamp(48px,6vw,76px); } .hero h1{max-width:15ch;margin:0} .hero__sub{max-width:46ch;margin:22px 0 0;font-weight:300;font-size:clamp(16px,1.5vw,19px);line-height:1.62} .hero .proof{justify-content:flex-start;margin-top:30px} .hero .btn-row,.hero__ctas{justify-content:flex-start} /* the floor gradient carries the type now that it sits low in the frame */ .hero::after{ background:linear-gradient(180deg,rgba(6,6,7,.30) 0%,rgba(6,6,7,.20) 30%,rgba(6,6,7,.82) 100%); } @media (max-width:809px){ .hero__in{min-height:auto;padding-top:46px;padding-bottom:52px} .hero h1{max-width:none} } /* 2. ONE HEADING SYSTEM. The hero is Manrope 200. Section heads at weight 700 uppercase fought it. Northstone's own section h2s are regular weight, the ultralight is a hero move, so these come down to 300 and lose the caps. */ .sechead h2,.together h2,.where h2,.faq__head h2,.quote__h2{ font-family:var(--sans);font-weight:300; letter-spacing:-.035em;line-height:1.06;text-transform:none; } .sechead h2,.together h2,.where h2,.faq__head h2{font-size:clamp(34px,4.4vw,58px)} .quote__h2{font-size:clamp(32px,4vw,52px)} .eyebrow{font-weight:600;letter-spacing:.2em} /* 3. THE PROMISE CARD. Real content instead of a void, and the cell no longer has to stretch to match the photo beside it. */ .trust{align-items:start} .promise__list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:0} .promise__list li{ font-family:var(--sans);font-size:14.5px;font-weight:300;line-height:1.5; color:rgba(255,255,255,.62);padding:15px 0; border-top:1px solid rgba(255,255,255,.13); } .promise__list li:first-child{border-top:0;padding-top:6px} .promise__list span{ display:block;font-weight:600;font-size:15.5px;color:#fff; letter-spacing:-.01em;margin-bottom:3px; } .promise__foot{ margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13); font-size:14.5px;font-weight:300;color:rgba(255,255,255,.62); } .trust__col--promise h3{color:#fff} .trust__col--promise p{color:rgba(255,255,255,.66)} /* 4. GALLERY. One crop ratio so eight photos read as a portfolio rather than a contact sheet, and a hairline so the light ones do not bleed into the paper. */ .gallery__grid img{ aspect-ratio:4/3;object-fit:cover;width:100%;height:auto; border-radius:14px;border:1px solid rgba(6,6,7,.10); background:#EDEAE2; } .gallery__grid{gap:14px} /* Hero legibility. The vertical scrim alone was not enough: the headline sits over sunlit siding and windows, which is the brightest part of the frame. A second scrim weighted to the left carries the type without flattening the deck on the right, which is the half worth seeing. */ .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(100deg,rgba(6,6,7,.86) 0%,rgba(6,6,7,.68) 34%,rgba(6,6,7,.24) 62%,rgba(6,6,7,.06) 100%); } .hero h1{text-shadow:0 2px 40px rgba(0,0,0,.5)} .hero__sub{color:rgba(255,255,255,.92);text-shadow:0 1px 20px rgba(0,0,0,.55)} @media (max-width:809px){ .hero::before{background:linear-gradient(180deg,rgba(6,6,7,.55) 0%,rgba(6,6,7,.45) 40%,rgba(6,6,7,.8) 100%)} } /* The reviews rail clipped the fourth card mid word at desktop width, which read as a bug rather than as more to scroll. Fade the edge so the peek is deliberate. */ .reviews__grid{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%); } /* Route through to the junk removal landing page from the service block. */ .svc__more{margin-top:14px} .svc__more a{ font-family:var(--sans);font-size:15px;font-weight:600;color:var(--olive-deep); text-decoration:none;border-bottom:1px solid rgba(85,107,47,.35);padding-bottom:2px; } .svc__more a:hover{border-bottom-color:var(--olive)} /* ============================================================================ FROST REVIEW, recording 98 (kSRThsFKKp), 2026-09-08. His words by timestamp in output/recordings/98-kSRThsFKKp/breakdown/. ========================================================================== */ /* [00:13] "add some movement to this still image in the front... swaps images between this and like an image of the crew". Slow cross fade, 16s round trip, so it reads as a breath rather than a slideshow. */ .hero__bg{position:absolute;inset:0} .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero__img--a{animation:heroSwap 16s ease-in-out infinite} .hero__img--b{opacity:0;animation:heroSwapB 16s ease-in-out infinite} @keyframes heroSwap{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}} @keyframes heroSwapB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .hero__img--a{animation:none;opacity:1} .hero__img--b{animation:none;opacity:0} } /* [00:41] "add a little more space in between all this like our work the real jobs real backyards, that need some space between that" [00:49] "add some space between our clients say and their review boards" */ .sechead{margin-bottom:clamp(38px,4.4vw,64px)} .sechead--center{margin-bottom:clamp(42px,5vw,72px)} .gallery{padding-top:clamp(72px,8vw,120px)} .reviews .sechead{margin-bottom:clamp(46px,5.2vw,76px)} /* [00:55] "our services this can look stronger, this isn't like boom" Bigger photo, heavier name, olive rule under it, more room to breathe. */ .tcard__photo{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;border-radius:14px} .tcard h3{ font-family:var(--sans);font-size:clamp(24px,2.1vw,31px);font-weight:700; letter-spacing:-.022em;line-height:1.16;margin-top:22px;position:relative;padding-top:20px; } .tcard h3::before{ content:"";position:absolute;top:0;left:0;width:52px;height:4px; background:var(--olive);border-radius:2px; } .tcard p{font-size:16px;line-height:1.6;margin-top:12px;color:var(--grey)} /* [01:07] The junk removal card carries the line rather than a photo that is not really junk removal. Swap it for a real job photo the day one exists. */ .tcard__photo--type{ aspect-ratio:4/3;border-radius:14px;background:linear-gradient(165deg,#161616 0%,#060607 100%); border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column; justify-content:flex-end;gap:14px;padding:30px; } .tcard__eyebrow{ font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--olive-light); } .tcard__line{ font-family:var(--sans);font-size:clamp(21px,1.9vw,27px);font-weight:700; line-height:1.2;letter-spacing:-.02em;color:#fff; } /* Codex pre deploy review, 2026-09-08. Four P2s, all correct. The alt text and the junk page canonical are fixed in the markup. */ /* The CTA alignment rule targeted .btn-row and .hero__ctas. The markup uses .btnrow, so it matched nothing and never did anything. */ .hero .btnrow{justify-content:flex-start} /* The reviews rail mask faded the last card at every width, including once the rail was scrolled to its end, so on a phone the final review stayed dimmed with nowhere left to scroll. Desktop only, where there really is more rail. */ .reviews__grid{-webkit-mask-image:none;mask-image:none} @media (min-width:810px){ .reviews__grid{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%); } }