/* ============================================================================ All Phase Plastering and Stucco — WL00011 Design lock (CLAUDE.md §4): lime-plaster ground, warm brown-black ink, single clay/terracotta accent reserved for ACTION only, system serif headings, no webfont, feTurbulence plaster grain. Chassis: WL00012_TPP structure + WL00009_GACS a11y layer. ========================================================================= */ /* ---------- Tokens ---------- */ :root{ /* Ground — lime plaster */ --ground: #FBF8F2; --ground-2: #F5EFE4; --ground-3: #F2EBDF; --ground-4: #E9E0CF; /* deepest band, still warm */ /* Ink — never pure black */ --ink: #33291E; /* headings */ --body: #635749; /* body copy */ --muted: #736758; /* 4.65:1 on ground — AA audited, do not lighten */ --ink-band: #2B2118; /* dark section band */ --on-dark: #F3EDE1; --on-dark-muted: #C3B7A5; /* Accent — clay/terracotta. ACTION ONLY. 5.39:1 on ground, 5.71:1 reversed. */ --clay: #A44E2C; --clay-deep: #8A3F22; --clay-wash: #F6E9E2; /* Lines + shadow */ --line: rgba(51,41,30,.13); --line-strong: rgba(51,41,30,.22); --line-dark: rgba(243,237,225,.16); --shadow-sm: 0 1px 2px rgba(51,41,30,.05), 0 4px 14px rgba(51,41,30,.06); --shadow-md: 0 2px 6px rgba(51,41,30,.06), 0 14px 34px rgba(51,41,30,.09); /* House glow affordance */ --glow-line: rgba(164,78,44,.55); --glow: 0 0 10px 1px rgba(164,78,44,.30), 0 0 2px rgba(164,78,44,.45); --glow-line-lt: rgba(243,237,225,.65); --glow-lt: 0 0 10px 1px rgba(243,237,225,.42), 0 0 2px rgba(243,237,225,.6); /* Type */ --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wrap: 1140px; --radius: 14px; /* Plaster grain — inline feTurbulence, costs no request */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* ⚠️ overflow-x:clip MUST NOT live on — it silently kills position:sticky on the header (verified 2026-08-01: header scrolled to top:-1120 with it, top:0 without). It lives on instead: same horizontal guard, sticky intact. */ body{ overflow-x:clip; margin:0; font-family:var(--sans); font-size:17px; line-height:1.68; color:var(--body); background:var(--ground); -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* The plaster surface itself — grain over a slow vertical wash */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,var(--ground) 0%,var(--ground-2) 46%,var(--ground-3) 100%); } body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:var(--grain);opacity:.055;mix-blend-mode:multiply; } img{max-width:100%;height:auto;display:block} a{color:var(--clay);text-decoration:none} a:hover{color:var(--clay-deep)} h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.16;letter-spacing:-.012em;margin:0 0 .5em} h1{font-size:clamp(2.1rem,5.1vw,3.5rem);letter-spacing:-.021em} h2{font-size:clamp(1.6rem,3.3vw,2.35rem)} h3{font-size:clamp(1.16rem,2vw,1.42rem)} h4{font-size:1.02rem} p{margin:0 0 1.1em} ul,ol{margin:0 0 1.2em;padding-left:1.15em} li{margin-bottom:.5em} strong{color:var(--ink);font-weight:600} hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0} /* ---------- Layout ---------- */ .wrap{width:min(var(--wrap),calc(100% - 2.6rem));margin-inline:auto} .wrap-narrow{width:min(760px,calc(100% - 2.6rem));margin-inline:auto} section{padding:clamp(3.2rem,7vw,5.4rem) 0} .band{background:var(--ground-3);border-block:1px solid var(--line);position:relative} .band-deep{background:var(--ground-4);border-block:1px solid var(--line);position:relative} .band-dark{background:var(--ink-band);color:var(--on-dark-muted);position:relative;overflow:hidden} .band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:var(--on-dark)} .band-dark::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image:var(--grain);opacity:.09;mix-blend-mode:overlay; } .band-dark > *{position:relative;z-index:1} .eyebrow{ font-family:var(--sans);font-size:.735rem;font-weight:700;letter-spacing:.17em; text-transform:uppercase;color:var(--clay);margin:0 0 1rem; } .band-dark .eyebrow{color:#D9895F} .lede{font-size:clamp(1.06rem,1.6vw,1.2rem);color:var(--body);max-width:62ch} .band-dark .lede{color:var(--on-dark-muted)} .section-head{max-width:64ch;margin-bottom:2.6rem} /* ---------- Skip link ---------- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--clay);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 8px 0} .skip-link:focus{left:0} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(251,248,242,.93); backdrop-filter:saturate(150%) blur(9px); border-bottom:1px solid var(--line); transition:border-color .25s ease, box-shadow .25s ease; } .site-header.scrolled{box-shadow:0 6px 22px rgba(51,41,30,.06)} [id]{scroll-margin-top:5.5rem} .header-inner{display:flex;align-items:center;gap:1rem;padding:1.05rem 0;position:relative} .brand{display:flex;align-items:center;gap:.62rem;position:relative;color:var(--ink)} .brand:hover{color:var(--ink)} .brand-mark{flex:none;width:50px;height:50px;border-radius:50%} .brand-words{display:flex;flex-direction:column;line-height:1.14} .brand-name{white-space:nowrap;font-family:var(--serif);font-size:1.31rem;font-weight:600;color:var(--ink);letter-spacing:-.015em} .brand-trade{white-space:nowrap;font-family:var(--serif);font-size:1.31rem;font-weight:500;letter-spacing:-.012em;color:var(--muted);margin-top:.05rem} .main-nav{display:flex;align-items:center;gap:.15rem;margin-left:auto} .main-nav a{ position:relative;padding:.54rem .8rem;border-radius:9px; font-size:1.02rem;font-weight:500;color:var(--body);white-space:nowrap; } .main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--ink)} .main-nav a[aria-current="page"]{font-weight:600} .main-nav a[aria-current="page"]::before{ content:"";position:absolute;left:.74rem;right:.74rem;bottom:.24rem;height:2px; background:var(--clay);border-radius:2px; } /* ⚠️ The nav CTA is an INSIDE .main-nav, so `.main-nav a` (0,1,1) out-specifies `.btn-primary` (0,1,0) and was painting brown-on-clay — a contrast failure caught in render review 2026-07-31. Keep this override. */ .main-nav a.btn-primary, .main-nav a.btn-primary:hover{color:#fff} .main-nav a.btn-primary[aria-current="page"]::before{display:none} .call-btn{ display:inline-flex;align-items:center;gap:.5rem;position:relative; padding:.7rem 1.2rem;border-radius:999px;background:var(--clay);color:#fff; font-size:1.15rem;font-weight:600;white-space:nowrap; } .call-btn:hover{background:var(--clay-deep);color:#fff} .call-btn svg{width:19px;height:19px;fill:currentColor;flex:none} .menu-toggle{ display:none;flex:none;width:42px;height:38px;border:1px solid var(--line-strong); border-radius:10px;background:transparent;cursor:pointer;padding:0; } .menu-toggle span{display:block;width:18px;height:1.8px;background:var(--ink);margin:3.6px auto;border-radius:2px;transition:transform .22s ease,opacity .22s ease} /* ---------- Buttons + the house glow affordance ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem;position:relative; padding:.86rem 1.5rem;border-radius:999px;font-size:1rem;font-weight:600; font-family:var(--sans);cursor:pointer;border:1.5px solid transparent;text-align:center; transition:background .2s ease,color .2s ease,border-color .2s ease; } .btn-primary{background:var(--clay);color:#fff;border-color:var(--clay)} .btn-primary:hover{background:var(--clay-deep);border-color:var(--clay-deep);color:#fff} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)} .btn-ghost:hover{color:var(--ink);border-color:var(--ink);background:rgba(51,41,30,.035)} .band-dark .btn-ghost{color:var(--on-dark);border-color:var(--line-dark)} .band-dark .btn-ghost:hover{color:var(--on-dark);border-color:var(--on-dark);background:rgba(243,237,225,.07)} .btn svg{width:17px;height:17px;fill:currentColor;flex:none} .btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center} /* Invisible-until-hover glow. ⚠️ Implemented with `outline` + `outline-offset`, NOT an inset:-4px pseudo-element. An absolutely-positioned ::after at inset:-4px paints outside its box and adds 4px to the document's scrollWidth, which gave every page carrying a .btn/.card-link/.arrow-link a phantom 4px horizontal scroll on mobile (measured 2026-07-31: sw=394 vs cw=390 at every viewport). `outline` draws outside the border box but NEVER contributes to layout or scroll size, and outline-offset gives the same floating-ring look with a transparent gap. Do not revert this to a pseudo-element. */ .btn,.call-btn,.brand,.main-nav a,.card-link,.arrow-link{ outline:1.5px solid transparent;outline-offset:3px; transition:outline-color .25s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease; } .btn:hover,.call-btn:hover,.brand:hover,.main-nav a:hover,.card-link:hover,.arrow-link:hover{ outline-color:var(--glow-line);box-shadow:var(--glow); } .band-dark .btn:hover,.band-dark .arrow-link:hover,.site-footer a:hover{ outline-color:var(--glow-line-lt);box-shadow:var(--glow-lt); } /* Focus always beats hover — the focus ring is an accessibility requirement, not decoration. */ :focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px} .band-dark :focus-visible,.site-footer :focus-visible{outline-color:#E5A883} .arrow-link{ display:inline-flex;align-items:center;gap:.4rem;position:relative; font-weight:600;font-size:.96rem;color:var(--clay);padding:.2rem .3rem;border-radius:999px; } .arrow-link svg{width:15px;height:15px;fill:currentColor;transition:transform .22s ease} .arrow-link:hover svg{transform:translateX(3px)} /* ---------- Hero ---------- */ .hero{padding:clamp(3.4rem,8vw,6.2rem) 0 clamp(3rem,6vw,4.6rem);position:relative;overflow:hidden} .hero-grid{position:relative;z-index:1;display:block} .hero-grid > div{max-width:34rem} .hero-brand{ font-family:var(--serif);font-size:2.375rem;font-weight:600;letter-spacing:-.012em; white-space:nowrap; color:var(--clay);margin:0 0 1rem; } .hero h1{margin-bottom:.44em;max-width:15ch} .hero .lede{font-size:clamp(1.08rem,1.7vw,1.25rem);margin-bottom:1.7rem} .hero-meta{ display:flex;flex-wrap:wrap;gap:.5rem 1.35rem;margin-top:1.9rem;padding-top:1.4rem; border-top:1px solid var(--line);font-size:.885rem;color:var(--muted); } .hero-meta span{display:inline-flex;align-items:center;gap:.42rem} .hero-meta svg{width:15px;height:15px;fill:var(--clay);flex:none} /* Hero surface panel — the launch state with no photos. When photos land this becomes the photo slot; grid already accounts for it. */ /* Hero watermark — NO CONTAINER. This is the whole point: on the reference site the artwork is not in a box, it bleeds into the page background behind the text. An earlier version put the logo inside a bordered, rounded panel and it read as "a card with a logo in it" instead of a background. There is no .hero-panel any more. Do not reintroduce one. The badge is bled ~30% off the right edge and clipped by .hero{overflow:hidden} — a circle with a small bite out of it looks like a mistake; one clearly running off the edge looks deliberate. */ .hero-wm{ position:absolute;z-index:0;pointer-events:none; right:12%;top:50%;transform:translateY(-50%); width:min(560px,46vw);max-width:none;height:auto; opacity:.22; } .knock-strip{padding:clamp(1.9rem,3.4vw,2.5rem) 0} .knock-inner{display:flex;gap:1.6rem 2.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap} .knock-inner .eyebrow{margin-bottom:.4rem} .knock-line{font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.14rem);color:var(--ink);margin:0;max-width:66ch;line-height:1.5} .knock-inner .btn{flex:none} /* ---------- Trust strip (plain statements — no fake badges) ---------- */ .trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)} .trust-item{background:var(--ground-2);padding:1.5rem 1.2rem;text-align:center} .trust-num{font-family:var(--serif);font-size:1.85rem;color:var(--ink);line-height:1;margin-bottom:.38rem;display:block} .trust-label{font-size:.775rem;letter-spacing:.085em;text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1.4} /* ---------- Cards ---------- */ .grid{display:grid;gap:1.35rem} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} .card{ background:var(--ground);border:1px solid var(--line);border-radius:var(--radius); padding:1.65rem 1.6rem;box-shadow:var(--shadow-sm);position:relative; transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease; } .card h3{margin-bottom:.5rem} .card p:last-child{margin-bottom:0} .card-link{display:block;color:inherit} .card-link:hover{color:inherit} .card-link:hover .card,.card-link:focus-visible .card{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow-md)} .card-link .card{height:100%;display:flex;flex-direction:column} .card-link .arrow-link{margin-top:auto;padding-top:.9rem} .card-icon{width:34px;height:34px;fill:var(--clay);margin-bottom:.95rem} .card-kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--clay);margin-bottom:.55rem} /* ---------- Service list (mechanism-level, never bare labels) ---------- */ .svc-list{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem} .svc-item{padding-left:1.6rem;position:relative;border-left:2px solid var(--line);padding-block:.1rem} .svc-item::before{content:"";position:absolute;left:-2px;top:.55rem;width:2px;height:1.5rem;background:var(--clay);border-radius:2px} .svc-item h3{margin-bottom:.35rem;font-size:1.14rem} .svc-item p{margin-bottom:0;font-size:.965rem} /* ---------- Steps ---------- */ .steps{counter-reset:s;display:grid;gap:1.6rem} .step{position:relative;padding-left:3.4rem;counter-increment:s} .step::before{ content:counter(s);position:absolute;left:0;top:-.12rem;width:2.35rem;height:2.35rem; display:grid;place-items:center;border-radius:50%;background:var(--clay-wash); color:var(--clay);font-family:var(--serif);font-size:1.12rem;font-weight:600; border:1px solid rgba(164,78,44,.24); } .step h3{font-size:1.1rem;margin-bottom:.3rem} .step p:last-child{margin-bottom:0} /* ---------- Callout ---------- */ .callout{ border-left:3px solid var(--clay);background:var(--clay-wash); padding:1.25rem 1.4rem;border-radius:0 10px 10px 0;margin:1.9rem 0; } .callout p:last-child{margin-bottom:0} .callout strong{color:var(--clay-deep)} /* ---------- Work gallery (real photos) ---------- Rebuilt 2026-07-31: the before/after pair markup was removed. Hubert has no "before" photographs — every image we hold is a finished job — so a before/after frame would have been a layout pretending to hold evidence it does not have. Straight portfolio instead. When real before shots arrive, reinstate the paired card; do not fake it in the meantime. */ .work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem;align-items:start} .work-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .work-card{ margin:0;background:var(--ground);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow-sm); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; } .work-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)} .work-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--ground-4)} .work-card.is-tall img{aspect-ratio:3/4} .work-card figcaption{padding:1.05rem 1.15rem;font-size:.93rem;color:var(--body)} .work-card figcaption strong{ display:block;color:var(--ink);font-family:var(--serif);font-size:1.05rem; margin-bottom:.24rem;line-height:1.3; } .work-meta{ display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.11em; text-transform:uppercase;font-weight:700;color:var(--clay); } /* ---------- FAQ ---------- */ .faq-list{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{ cursor:pointer;list-style:none;padding:1.25rem 2.6rem 1.25rem 0;position:relative; font-family:var(--serif);font-size:1.09rem;font-weight:600;color:var(--ink);line-height:1.4; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:"";position:absolute;right:.55rem;top:1.62rem;width:9px;height:9px; border-right:2px solid var(--clay);border-bottom:2px solid var(--clay); transform:rotate(45deg);transition:transform .22s ease; } .faq-item[open] summary::after{transform:rotate(-135deg)} .faq-item summary:hover{color:var(--clay-deep)} .faq-answer{padding:0 2.6rem 1.35rem 0} .faq-answer p:last-child{margin-bottom:0} /* ---------- Diagnostic table ---------- */ .table-wrap{overflow-x:auto;margin:1.8rem 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--ground)} table{border-collapse:collapse;width:100%;min-width:520px;font-size:.94rem} th,td{text-align:left;padding:.85rem 1.05rem;border-bottom:1px solid var(--line);vertical-align:top} th{font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--ground-3)} tr:last-child td{border-bottom:0} td strong{color:var(--ink)} /* ---------- Photo drop zone (port of WL00012_TPP .q-drop) ---------- */ .q-drop{ display:flex;align-items:center;justify-content:center;text-align:center; border:2px dashed var(--line-strong);border-radius:var(--radius); padding:1.9rem 1.1rem;cursor:pointer;margin-bottom:1.05rem; background:rgba(164,78,44,.045);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; } .q-drop:hover,.q-drop.drag{border-color:var(--clay);background:#fff;box-shadow:0 0 0 3px rgba(164,78,44,.13)} .q-drop:focus-visible{outline:2px solid var(--clay);outline-offset:3px} .q-drop-in{display:flex;flex-direction:column;gap:.34rem;align-items:center;pointer-events:none} .q-drop-ic{width:30px;height:30px;fill:var(--clay);opacity:.85} .q-drop-in strong{color:var(--ink);font-family:var(--serif);font-size:1.1rem;font-weight:600} .q-drop-sub{color:var(--muted);font-size:.88rem;line-height:1.45} .q-thumbs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.05rem} .q-thumb{position:relative;width:78px;height:78px;border-radius:10px;overflow:hidden;border:1px solid var(--line-strong)} .q-thumb img{width:100%;height:100%;object-fit:cover} .q-thumb .rm{ position:absolute;top:3px;right:3px;width:21px;height:21px;border-radius:50%; background:rgba(43,33,24,.78);color:#fff;border:0;cursor:pointer;font-size:13px;line-height:1; display:flex;align-items:center;justify-content:center;padding:0; } .q-thumb .rm:hover{background:var(--clay)} /* ---------- Forms ---------- */ .q-form{display:grid;gap:1.5rem} .q-card{background:var(--ground);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow-sm)} .q-card > h2{font-size:1.24rem;margin-bottom:.35rem;display:flex;align-items:baseline;gap:.6rem} .q-num{font-family:var(--serif);font-size:.9rem;color:var(--clay);border:1px solid rgba(164,78,44,.3);background:var(--clay-wash);width:1.7rem;height:1.7rem;border-radius:50%;display:inline-grid;place-items:center;flex:none;align-self:center} .q-hint{font-size:.9rem;color:var(--muted);margin-bottom:1.2rem} .field{display:grid;gap:.38rem;margin-bottom:1.05rem} .field label{font-size:.86rem;font-weight:600;color:var(--ink)} .field .req{color:var(--clay)} input[type=text],input[type=tel],input[type=email],select,textarea{ font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--ground-2); border:1px solid var(--line-strong);border-radius:10px;padding:.72rem .85rem;width:100%; transition:border-color .18s ease,background .18s ease; } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--clay);background:#fff;box-shadow:0 0 0 3px rgba(164,78,44,.13)} textarea{min-height:130px;resize:vertical;line-height:1.6} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem} .chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.1rem} .chip{position:relative} .chip input{position:absolute;opacity:0;width:0;height:0} .chip span{ display:inline-block;padding:.55rem .95rem;border:1px solid var(--line-strong);border-radius:999px; font-size:.9rem;font-weight:500;cursor:pointer;background:var(--ground-2);color:var(--body); transition:all .18s ease; } .chip input:checked + span{background:var(--clay);border-color:var(--clay);color:#fff;font-weight:600} .chip input:focus-visible + span{outline:2px solid var(--clay);outline-offset:2px} .chip span:hover{border-color:var(--ink)} .check{display:flex;gap:.65rem;align-items:flex-start;font-size:.88rem;color:var(--muted);line-height:1.55} .check input{margin-top:.28rem;flex:none;accent-color:var(--clay);width:16px;height:16px} .q-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-note{font-size:.84rem;color:var(--muted);margin-top:.9rem} .form-status{margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;font-size:.94rem;display:none} .form-status.ok{display:block;background:#EDF3EC;border:1px solid #BFD6BB;color:#2F5029} .form-status.err{display:block;background:var(--clay-wash);border:1px solid rgba(164,78,44,.32);color:var(--clay-deep)} /* ---------- CTA band ---------- */ .cta-band{text-align:center} .cta-band h2{margin-bottom:.5rem} .cta-band .lede{margin:0 auto 1.8rem} .cta-band .btn-row{justify-content:center} /* ---------- Footer ---------- */ .site-footer{background:var(--ink-band);color:var(--on-dark-muted);padding:3.4rem 0 1.6rem;position:relative;overflow:hidden} .site-footer::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.08;mix-blend-mode:overlay;pointer-events:none} .site-footer > *{position:relative;z-index:1} .foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:2.4rem;padding-bottom:2.2rem;border-bottom:1px solid var(--line-dark)} .site-footer h4{color:var(--on-dark);font-family:var(--sans);font-size:.735rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem} .site-footer a{color:var(--on-dark-muted);display:block;padding:.2rem 0;font-size:.94rem} .site-footer a:hover{color:var(--on-dark)} .foot-logo{width:65px;height:65px;border-radius:50%;margin-bottom:.85rem;display:block} .foot-brand .brand-name{color:var(--on-dark);font-size:1.2rem;display:block} .foot-brand .brand-trade{color:#9C8D79} .foot-blurb{font-size:.92rem;margin:.9rem 0 0;max-width:34ch;color:var(--on-dark-muted)} .foot-nap span{display:block;padding:.2rem 0;font-size:.94rem} .foot-base{ display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between; padding-top:1.5rem;font-size:.845rem;color:#9C8D79; } .foot-base a{display:inline;padding:0;font-size:.845rem} .foot-legal a:not(:last-child){margin-right:.2rem} .foot-note{font-size:.79rem;color:#8B7D6A;margin-top:1.4rem;max-width:76ch;line-height:1.6} /* ---------- Page header (inner pages) ---------- */ .page-head{padding:clamp(2.6rem,5.5vw,4rem) 0 clamp(1.8rem,3.5vw,2.6rem)} .page-head h1{margin-bottom:.4em} .breadcrumb{font-size:.83rem;color:var(--muted);margin-bottom:1.1rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center} .breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--clay)} .breadcrumb .sep{opacity:.5} /* ---------- Prose ---------- */ .prose h2{margin-top:2.6rem} .prose h3{margin-top:1.9rem} .prose > :first-child{margin-top:0} .prose ul li::marker{color:var(--clay)} /* ---------- Preview banner ---------- */ .preview-flag{ background:var(--ink-band);color:var(--on-dark);text-align:center; font-size:.8rem;padding:.5rem 1rem;letter-spacing:.03em; } .preview-flag strong{color:#E5A883} /* ---------- Responsive ---------- */ @media(max-width:980px){ .hero-brand{font-size:1.9rem} /* keeps one line between 641 and 980 */ .hero-wm{right:-4%;width:min(420px,58vw);opacity:.14} .hero-wm{right:-12%;top:auto;bottom:-4%;transform:none;width:min(330px,74vw);opacity:.11} .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .foot-cols{grid-template-columns:1fr 1fr;gap:2rem} } @media(max-width:1080px){ .menu-toggle{display:block;margin-left:auto;order:3} .call-btn{margin-left:auto;order:2} .main-nav{ position:fixed;inset:83px 0 auto 0;background:var(--ground);flex-direction:column; align-items:stretch;padding:1rem 1.3rem 1.6rem;gap:.1rem;margin-left:0; border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(51,41,30,.14); transform:translateY(-135%);transition:transform .26s ease;z-index:-1; } body.nav-open .main-nav{transform:none} body.nav-open{overflow:hidden} .main-nav a{padding:.82rem .7rem;border-radius:10px;font-size:1rem} .main-nav a[aria-current="page"]::before{left:.7rem;right:auto;width:16px;bottom:.5rem} body.nav-open .menu-toggle span:nth-child(1){transform:translateY(5.4px) rotate(45deg)} body.nav-open .menu-toggle span:nth-child(2){opacity:0} body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)} .grid-3,.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .trust-strip{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ /* 320px guards — these overflows existed all along, hidden by html{overflow-x:clip}. That clip had to move to so the header could actually stick, so they are fixed at the source now instead of being masked. (2026-08-01) */ .btn{max-width:100%;white-space:normal;text-align:center} .call-btn{font-size:1.05rem;padding:.62rem 1rem} .hero-brand{font-size:min(1.337rem,5.3vw)} /* desktop 38px; phone back to the pre-38px size, shrinking below ~404px so nowrap can never clip */ body{font-size:16.5px} .wrap,.wrap-narrow{width:calc(100% - 2rem)} .grid-2,.grid-3,.grid-4,.work-grid,.work-grid-2,.field-row{grid-template-columns:1fr} .foot-cols{grid-template-columns:1fr;gap:1.9rem} .brand-words{display:none} .brand-mark{width:46px;height:46px} /* The phone number stays VISIBLE on mobile — a bare handset icon reads as decoration to Hubert's customers. Font and padding come down so logo + full number + hamburger still fit inside a 320px viewport. */ .call-btn{padding:.55rem .8rem;font-size:1rem;gap:.4rem} .call-btn svg{width:17px;height:17px} /* Buttons size to their text on mobile. Full-width made the hero CTA span the whole screen. */ .btn{width:auto} .btn-row{flex-direction:row;flex-wrap:wrap;align-items:center} .cta-band .btn-row{justify-content:center;align-items:center} .faq-item summary{font-size:1.02rem} } /* ---------- Motion ---------- */ @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} html{scroll-behavior:auto} } /* ---------- Print ---------- */ @media print{ .site-header,.site-footer,.preview-flag,.btn,.call-btn{display:none} body::before,body::after{display:none} body{background:#fff;color:#000} }