/* page-termite-control.css — Surfaces division, warm-bronze. RE-BASED 2026-08-17. Everything above the "TERMITE-SPECIFIC" divider is assets/page-pest-termite-control.css copied VERBATIM, so this page sits in the same design system as its reference sibling rather than merely resembling it. The omitted reference blocks are .compare (the deck has no them/us copy), .refs (no references section in the deck) and .nextstep/.next-card (no "Where this connects" band in the deck). Each comes back the moment the deck specifies the section. Below the divider are the components this page introduces and the reference does not have: the split-media sections (cloned from the homepage's .labband), the S2 full-bleed image band, the Section 3 video, the pull quote, the in-section certification row, the FAQ accordion and the contact lines. No new hex: every colour is an existing token or a value already in the donor sheets. */ :root{ --ink:#16191c; --ink-soft:#3d4248; --paper:#f4f1ea; --paper-deep:#ebe6db; --line:#d2ccbf; --accent:#6b4f2e; --night:#211a12; --night-text:#b3a78f; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:var(--paper);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} h1,h2,h3{font-family:'Archivo',sans-serif;font-weight:300;letter-spacing:-.025em;line-height:1.1;} .serif{font-family:'Fraunces',serif;font-style:italic;font-weight:300;letter-spacing:-.01em;} .eyebrow{font-family:'Archivo';font-weight:500;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);} .ac-hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;} .ac-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;} .ac-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,26,18,.55) 0%,rgba(33,26,18,.2) 35%,rgba(33,26,18,.86) 100%);} .ac-hero .inner{position:relative;padding-bottom:74px;width:100%;} .crumb{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:26px;} .crumb a{color:rgba(255,255,255,.7);text-decoration:none;} .crumb a:hover{color:#e8c79a;} .ac-hero h1{color:#fff;font-size:clamp(2.6rem,6vw,3.4rem);max-width:17ch;margin-bottom:14px;} .ac-hero h1 em{font-family:'Fraunces';font-style:italic;color:#e8c79a;font-size:1.04em;} .ac-hero .sub{color:rgba(255,255,255,.9);font-size:1.2rem;max-width:50ch;margin-bottom:18px;} .ac-hero .servesline{color:rgba(255,255,255,.62);font-size:.92rem;letter-spacing:.04em;} .ac-hero .cta-row{margin-top:34px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;} .hotline{color:rgba(255,255,255,.82);font-size:.92rem;letter-spacing:.02em;} .hotline strong{font-family:'Archivo';font-weight:500;color:#e8c79a;letter-spacing:.04em;} .stats{background:var(--night);color:var(--night-text);padding:40px 0;} .stats .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;} .stat{flex:1;min-width:160px;} .stat .n{font-family:'Archivo';font-weight:500;font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);color:#efe4d2;letter-spacing:-.03em;line-height:1;} .stat .t{font-size:clamp(.7rem, 0.66rem + 0.18vw, .76rem);letter-spacing:.1em;text-transform:uppercase;margin-top:8px;} .sec{padding:120px 0;} .sec-head{max-width:46ch;margin-bottom:60px;} .sec-head h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:18px 0;} .sec-head h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);} .sec-head p{color:var(--ink-soft);font-size:1.1rem;} .method-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .m-card{border-top:1px solid var(--line);padding-top:24px;} .m-card .idx{font-family:'Fraunces';font-style:italic;color:var(--accent);font-size:.9rem;} .m-card h3{font-size:1.35rem;margin:8px 0 12px;} .m-card p{color:var(--ink-soft);font-size:1rem;max-width:46ch;} @media(max-width:760px){.method-grid{grid-template-columns:1fr;}} /* reassurance band */ .calm{background:var(--paper-deep);} .calm .eyebrow{color:var(--accent);} .calm h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin:18px 0;max-width:24ch;} .calm h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);} .calm .lede{max-width:60ch;color:var(--ink-soft);font-size:1.12rem;} /* the difference */ .diff{background:var(--paper);} .diff .eyebrow{color:var(--accent);} .diff h2{color:var(--ink);font-size:clamp(1.9rem,3.8vw,3rem);margin:18px 0;max-width:24ch;} .diff h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);} .steps{counter-reset:step;} .step-row{display:grid;grid-template-columns:80px 1fr;gap:30px;padding:30px 0;border-top:1px solid var(--line);} .step-row .num{font-family:'Fraunces';font-style:italic;font-size:2.2rem;color:var(--accent);line-height:1;} .step-row h3{font-size:1.4rem;margin-bottom:8px;} .step-row p{color:var(--ink-soft);max-width:54ch;} /* NB the reference's .nextstep / .next-grid / .next-card connect-card component is deliberately NOT carried here. The deck specifies Sections 1-10 and no "Where this connects" band, so its links are inline in Section 2 instead and the component would be dead CSS. It comes back with the section if one is ever specified. */ .final{background:var(--night);color:var(--night-text);text-align:center;padding:120px 0;} .final .eyebrow{color:#c79a5e;} .final h2{color:#efe4d2;font-size:clamp(2rem,4.4vw,3.4rem);margin:22px auto;max-width:22ch;} .final h2 em{font-family:'Fraunces';font-style:italic;color:#d9b783;} .final p{color:#a89c84;max-width:46ch;margin:0 auto 30px;} .final .hotline-final{color:#b3a78f;font-size:.95rem;margin-top:26px;} .final .hotline-final strong{color:#e8c79a;font-weight:500;} .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);} .reveal.in{opacity:1;transform:none;} /* closing note under a section. Rule copied verbatim from assets/page-water.css. */ .frontier{margin-top:26px;font-family:'Fraunces';font-style:italic;color:var(--ink-soft);font-size:.98rem;max-width:72ch;} /* ---------- TERMITE-SPECIFIC ---------- */ /* ===================== HEADING SIZES: HOUSE LADDER ===================== 0.6.41 put a flat `body ... h2{ clamp(1.9rem, 0.91rem + 1.84vw, 2.75rem) }` here, which capped every section title at 44px and shrank this page below the rest of the site. Two things were wrong with it: - it was NOT inside a media query, so it overrode the house sizes at EVERY width, whereas assets/responsive.css's `body .X h2` ladder is scoped to @media (min-width:861px) and (max-width:1600px) and correctly stops applying above 1600px. That is why the cap bit hardest on wide desktops. - its stated reason ("3.3rem would sit level with the 3.4rem H1") used the wrong H1. The hero H1 is var(--hero-h1) = clamp(2.2rem, 1.5rem + 2.3vw, 4rem) = 64px at desktop, so 51.2rem-tier titles sit well below it, exactly as on the reference. The cap is gone. Nothing replaces it: the per-component declarations above are the donor's verbatim values, so this page now resolves through the identical cascade as /divisions/surfaces/pest-termite-control/ at every breakpoint - house ladder between 861 and 1600px, style.css + this sheet outside it. Section titles are a HIERARCHY, not one size, and long headings wrap at the house size rather than being shrunk to fit. S8's centered band deliberately uses .sec-head for its heading so it tracks the section-intro tier automatically instead of needing a rule of its own. */ /* ---- contrast on the dark bands (measured, see the report) ---- The hero eyebrow was --accent on the scrim at 2.07:1 and has been moved to the .hotline slot (10.90:1). The remaining dark-band text is lifted to existing tokens: eyebrow #e8c79a = 10.70:1 (was #c79a5e, 6.73:1), body --night-text #b3a78f = 7.24:1 (was #a89c84, 6.35:1). No new hex: both values already exist in these sheets. */ body .labband.tc-band .lb-txt .eyebrow, body section.final .eyebrow{ color:#e8c79a; } body .labband.tc-band .lb-txt p, body section.final p{ color:var(--night-text); } /* BAND ALTERNATION. The component classes each hardcode a background (.calm and .nextstep deep, .diff paper, .faq none), which on this page's section order produced two paper/paper neighbours. These two utilities override the component default so the page strictly alternates. (0,2,0) beats the components' (0,1,0), and they are declared after every component rule above, so they win on order as well as specificity. */ .sec.tc-bg-paper, .faq.tc-bg-paper, .creds.tc-bg-paper{background:var(--paper);} .sec.tc-bg-deep, .faq.tc-bg-deep, .creds.tc-bg-deep{background:var(--paper-deep);} /* BALANCING THE LONG TEXT-ONLY SECTIONS. Three deliberately different treatments so S6, S7 and S8 do not read as a run of identical narrow left columns. */ /* S8: a centered measure */ /* S8: a centered measure. The heading is a plain .sec-head so it inherits the house section-intro tier at every breakpoint; only layout is set here, never type size. */ .tc-centered{max-width:64ch;margin:0 auto;text-align:center;} .tc-centered .eyebrow{display:block;margin-bottom:18px;} .tc-centered .sec-head{max-width:none;margin:0 auto 26px;} .tc-centered .tc-body{max-width:none;margin-bottom:0;} /* Section 2 and 7 run several .lede paragraphs in sequence; the donor sheet only ever had one, so it carried no rhythm between them. */ .calm .lede + .lede{margin-top:22px;} /* body copy in a section whose measure is not already set by .sec-head or .lede */ .tc-body{color:var(--ink-soft);max-width:66ch;margin-bottom:22px;} .tc-body strong{color:var(--ink);font-weight:500;} /* in-page stills. No figcaption rule: the deck specifies alt text, not captions, and the invented italic captions were removed in the deck-fidelity sweep. */ .tc-figure{margin:46px 0 0;} .tc-figure img{width:100%;height:auto;display:block;border:1px solid var(--line);} .tc-figure-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .tc-figure-split img{height:100%;object-fit:cover;} @media(max-width:760px){.tc-figure-split{grid-template-columns:1fr;}} /* Section 3 narrative video. Below the fold, click-to-play, never a hero background. */ .tc-video{margin:50px 0;} .tc-video video{width:100%;height:auto;display:block;background:var(--night);border:1px solid var(--line);} /* SPLIT-MEDIA SECTIONS (S4, S7). Clone of the homepage .labband ("A Department of Microbiology"): the image half is full-bleed to the page edge and full height, the copy sits in the other half on the --night panel. .labband itself lives in style.css, so only the variants are here. Equal halves rather than the homepage's 1.25/.75, because the deck gives these sections three paragraphs, not one. */ /* Image-forward 60/40, image LEFT on both bands. The .tc-band-rev variant that put S7's image on the right (columns 40/60 plus order:1/2 on the two cells) is removed rather than left dead: no band uses it now. DOM order is [lb-img, lb-txt] on both, so no order juggling is needed anywhere, including when they stack. */ .labband.tc-band{grid-template-columns:60% 40%;min-height:620px;} /* fixed side padding, not 6vw: at 2560px 6vw was 153.6px a side, which would leave barely half of the text column for the copy */ .labband.tc-band .lb-txt{padding:96px 68px;} .labband.tc-band .lb-txt p{max-width:52ch;} .labband.tc-band .lb-txt p + p{margin-top:20px;} .labband.tc-band .lb-txt .tc-cta-line{margin-top:34px;} /* HEADING LINE COUNTS, set by measure and never by font-size or a
. Both panel headings sit at the unchanged 41.6px labband tier. S7 Warranty (107 chars): the natural 888px copy column at 2560px already falls inside the 839-1078px window that yields exactly three lines across a 0.48-0.56em advance range, so it needs no cap - only balancing. S4 Termatrac (53 chars): at 888px it wraps to two. Three lines needs a measure in the 419-539px window (same advance range); 470px sits inside it with ~51px of slack below and ~69px above, and the longest token "Termatrac:" is 233px at the widest advance, so it cannot overflow. text-wrap:balance evens the three lines on both and stops "don't." orphaning. */ .labband.tc-band .lb-txt h2{text-wrap:balance;} .labband.tc-head-cap .lb-txt h2{max-width:470px;} /* STACK AT <=1024px so iPad Pro portrait gets image-on-top / text-below instead of a 40% text sliver. Two traps are handled here: 1. .labband .lb-img img is position:absolute;inset:0, so the .lb-img cell has no intrinsic height once it stops being a grid row partner. style.css only supplies min-height at <=780px, so between 781 and 1024 the image would collapse to zero. aspect-ratio gives it height AND keeps the frame landscape. 2. the desktop heading cap must be released, or the stacked heading would be squeezed into 470px of a full-width panel. */ @media(max-width:1024px){ .labband.tc-band{grid-template-columns:1fr;min-height:0;} .labband.tc-band .lb-img{aspect-ratio:16/9;min-height:0;} .labband.tc-band .lb-txt{padding:72px 40px;} .labband.tc-head-cap .lb-txt h2{max-width:none;} } @media(max-width:780px){ .labband.tc-band .lb-txt{padding:64px 24px;} } /* S2 exception: full-bleed image band closing the editorial section, because three long paragraphs will not sit cleanly in a half-panel. The band is the section's last child, so the section's own bottom padding and the next section's top padding are zeroed via .tc-flush-bottom / .tc-flush-top and the image runs straight into Section 3. The 80px above it stays. */ .sec.tc-flush-bottom{padding-bottom:0;} /* 80px, not 0: zeroing this jammed the "Our Method" eyebrow against the image. The image still ends flush at S2's edge; only S3's text block gets the breathing room. */ .sec.tc-flush-top{padding-top:80px;} .tc-imgband{margin-top:80px;line-height:0;} .tc-imgband img{width:100%;height:clamp(560px,42vw,860px);object-fit:cover;display:block;} /* on a phone the 560px floor of that clamp renders taller than the ~390px viewport is wide, i.e. portrait. Drop to a landscape ratio there. Tablet portrait keeps 560px. */ @media(max-width:780px){ .tc-imgband img{height:auto;aspect-ratio:16/9;} } /* pull quote, display treatment per the deck */ .tc-pull{margin:50px 0 0;padding:30px 0 0;border-top:1px solid var(--line); font-family:'Fraunces';font-style:italic;font-weight:300; font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.25;color:var(--accent);max-width:26ch;} /* a CTA sitting inside a light editorial section */ .tc-cta-line{margin-top:38px;} /* CERTIFICATION CHIPS. The house chip component, copied declaration-for-declaration from assets/page-larsen.css:86-87 (/francois-larsen/), because that sheet does not load on this page. Same class names deliberately, so the two stay greppable as one component; the declarations are identical, so a future merge cannot conflict. Replaces the full-width .creds-row divider band that stood here through 0.6.42. */ .lr-chips{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;} .lr-chip{display:inline-block;border:1px solid var(--line);color:var(--accent);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:9px 18px;} /* Section 8 contact line under the CTA */ .tc-contactline{margin-top:22px;color:var(--ink-soft);font-size:.98rem;letter-spacing:.02em;} /* Section 10 service-area note, on the dark band */ .final .tc-servicearea{margin:26px auto 0;font-family:'Fraunces';font-style:italic; font-size:.9rem;color:#a89c84;max-width:52ch;} /* FAQ accordion, matched to the division idiom (authority: page-mold-remediation.css) */ .faq{padding:120px 0;border-top:1px solid var(--line);} .faq .eyebrow{color:var(--accent);} .faq h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:18px 0;max-width:24ch;} .faq h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);} .faq-list{margin-top:2.5rem;border-top:1px solid var(--line);} .faq-item{border-bottom:1px solid var(--line);} .faq-q{cursor:pointer;list-style:none;padding:1.5rem 2.5rem 1.5rem 0;position:relative;font-family:'Archivo',sans-serif;font-weight:500;color:var(--ink);font-size:1.125rem;} .faq-q::-webkit-details-marker{display:none;} .faq-q::after{content:'+';position:absolute;right:0;top:1.35rem;color:var(--accent);font-size:1.5rem;font-weight:300;line-height:1;} .faq-item[open] .faq-q::after{content:'\2013';} .faq-a{padding:0 0 1.75rem;color:var(--ink-soft);max-width:65ch;} .faq-a p{margin:0;}