/* ============================================================================ PELLHURST PLUMBING CO. — the plumbing showroom concept. A SEPARATE STYLESHEET, LOADED INSTEAD OF studio.css AND INSTEAD OF caldervane.css. Same reasoning as Caldervane's: a concept has to look like a different company's website, not a Cyborg page in different colors. It also must not look like Caldervane, which is the specific thing the brief ruled out — "do NOT simply recolor Cyborg or Caldervane." So this file shares no token, no type scale and no component with either of them. See cyborg_studio_assets() in functions.php for the swap. ⚠ THE PALETTE IS THE TRADE'S OWN MATERIALS, AND EVERY PAIR BELOW WAS COMPUTED. Wet slate, brass, porcelain — the three things a plumber actually handles. Cyborg is near-black and teal; Caldervane is evergreen, chalk and amber. A plumbing brand arriving in a blue nobody chose is the cliche this is avoiding. The ratios are in the comments. The one that matters most: --pl-brass is the METAL, and it is a FILL that carries slate text (5.90:1). It is not a text color on slate — --pl-brass-lt is (7.81:1) — and it is not a text color on porcelain either — --pl-brass-tx is (5.29:1). Swapping one for another silently fails AA. ⚠ ONLY ONE SECTION SETS TYPE OVER A PHOTOGRAPH, AND THAT IS A MEASUREMENT, NOT A PREFERENCE. Every plate was sampled on a 12x7 grid before any copy was placed. pl-open's top-right quadrant reads 0.002-0.017 relative luminance, which clears porcelain body text at 4.5:1 (needs <= 0.157) with two orders of magnitude to spare, so section 01 sets copy on it. pl-stop's dark region is a single 240px column and pl-crew's is the crew's own clothing; neither can hold a paragraph at any width, so those sections put their copy on the slate ground instead. The Caldervane hero cost a full day to the opposite assumption. ⚠ NOTHING HERE IS SCOPED WITH A PARENT CLASS, because these routes load no other stylesheet. If that ever changes, scope the whole file under .pl-doc before it ships — the `pl-` prefix is a convention, not a guard, and the bare element rules below (h1, ul, img) would leak. ========================================================================= */ :root{ /* Ground — wet slate */ --pl-slate:#101619; /* the brand ground */ --pl-slate-2:#192227; /* raised surface */ --pl-slate-3:#0A0E10; /* recessed surface, and the page behind everything */ /* Ground — porcelain. Never #fff, which reads clinical next to brass. */ --pl-porc:#F2F1EE; --pl-porc-2:#E6E4DF; /* Brass. THREE values, and they are not interchangeable. */ --pl-brass:#B08D57; /* FILL, the metal. Slate on it = 5.90:1 */ --pl-brass-lt:#C9A468; /* TEXT on slate = 7.81:1 */ --pl-brass-tx:#7A5F33; /* TEXT on porcelain = 5.29:1 */ /* Quiet ink */ --pl-mist:#A9B6BD; /* body on slate = 8.79:1 */ --pl-mist-dim:#8494A0; /* quietest legible on slate = 5.84:1 */ --pl-mute:#56646B; /* body on porcelain = 5.42:1 */ /* Lines */ --pl-line:#D8D5CE; /* rule on porcelain */ --pl-line-d:rgba(169,182,189,.20); /* rule on slate */ --pl-line-d2:rgba(169,182,189,.34); /* Type. Fraunces + Public Sans — deliberately neither Caldervane's Archivo/Inter/Oswald nor Cyborg's. A serif display on a plumbing brand is the differentiator: it reads as craft and permanence rather than as a contractor template. */ --pl-disp:'Fraunces',Georgia,'Times New Roman',serif; --pl-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif; /* Measure. One container for the whole site so nothing drifts. */ --pl-wrap:1180px; --pl-gut:clamp(20px,4.4vw,56px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--pl-slate-3);color:var(--pl-porc); font-family:var(--pl-body);font-size:17px;line-height:1.64; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} button{font:inherit;color:inherit} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--pl-brass-lt);outline-offset:3px;border-radius:2px; } .pl-wrap{width:100%;max-width:var(--pl-wrap);margin-inline:auto;padding-inline:var(--pl-gut)} .pl-skip{position:absolute;left:-9999px} .pl-skip:focus{left:12px;top:12px;z-index:60;background:var(--pl-brass);color:var(--pl-slate);padding:10px 16px;border-radius:2px} /* ── Display type ────────────────────────────────────────────────────────── Fraunces is variable on opsz; large sizes want the display optical size and tighter tracking, small sizes want the text one. Set it explicitly rather than letting the browser pick, which it does inconsistently. */ .pl-d1,.pl-d2,.pl-d3{ font-family:var(--pl-disp);font-weight:600;line-height:1.04; letter-spacing:-.015em;font-variation-settings:'opsz' 120,'SOFT' 0,'WONK' 0; } .pl-d1{font-size:clamp(42px,6.2vw,92px)} .pl-d2{font-size:clamp(32px,4.3vw,62px)} .pl-d3{font-size:clamp(24px,2.5vw,36px);line-height:1.12} .pl-kick{ font-family:var(--pl-body);font-size:12px;font-weight:700; letter-spacing:.22em;text-transform:uppercase; } .pl-lede{font-size:clamp(18px,1.5vw,22px);line-height:1.55} .pl-body{font-size:17px;line-height:1.7} .pl-small{font-size:14px;line-height:1.6} /* ── Buttons ─────────────────────────────────────────────────────────────── Brass is a FILL here and carries slate text at 5.90:1. The ghost variant uses brass-lt for its text because that one is a text color on slate. */ .pl-btn{ display:inline-flex;align-items:center;gap:.55em; min-height:52px;padding:0 26px;border:0;border-radius:2px; font-weight:700;font-size:15px;letter-spacing:.04em; text-decoration:none;cursor:pointer; transition:transform .18s ease,background-color .18s ease,border-color .18s ease; } .pl-btn--solid{background:var(--pl-brass);color:var(--pl-slate)} .pl-btn--solid:hover{background:var(--pl-brass-lt)} .pl-btn--ghost{background:transparent;color:var(--pl-brass-lt);box-shadow:inset 0 0 0 2px var(--pl-line-d2)} .pl-btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--pl-brass-lt)} .pl-btn--onporc{background:var(--pl-slate);color:var(--pl-porc)} .pl-btn--onporc:hover{background:var(--pl-slate-2)} @media(prefers-reduced-motion:no-preference){ .pl-btn:hover{transform:translateY(-1px)} } /* ── Header ──────────────────────────────────────────────────────────────── Not fixed. A fixed bar on a concept homepage steals 72px from every full-bleed plate below it and forces a top margin onto every section that follows; the page reads taller and less cinematic for no gain. It scrolls away, and the close section carries the phone number again. */ .pl-head{position:relative;z-index:20;background:var(--pl-slate-3)} .pl-head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px} .pl-lock{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--pl-porc)} .pl-lock svg{width:30px;height:30px;flex:0 0 auto;color:var(--pl-brass)} .pl-lock-tx{display:flex;flex-direction:column;line-height:1.05} .pl-lock-a{font-family:var(--pl-disp);font-weight:700;font-size:21px;letter-spacing:-.01em;font-variation-settings:'opsz' 40} .pl-lock-b{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--pl-mist-dim)} .pl-head-nav{display:flex;align-items:center;gap:28px} .pl-head-nav a{font-size:14px;font-weight:600;text-decoration:none;color:var(--pl-mist)} .pl-head-nav a:hover{color:var(--pl-porc)} .pl-head-tel{font-family:var(--pl-disp);font-size:19px;font-weight:700;color:var(--pl-brass-lt);text-decoration:none;font-variation-settings:'opsz' 40} @media(max-width:860px){ .pl-head-nav a{display:none} .pl-head-nav .pl-head-tel{display:inline-block} } /* ══ 01 OPENING ═══════════════════════════════════════════════════════════ The one section that sets type over a photograph. The copy sits in the plate's top-right quadrant, measured at 0.002-0.017 luminance — porcelain body text needs <= 0.157 there, so the margin is enormous and stays so at every desktop crop because the plate's aspect (1.765) and a 1440x820 hero's (1.756) are within half a percent of each other. ⚠ BELOW 1024 THE COPY MOVES OFF THE PLATE ENTIRELY. A phone crops to a ~32%-wide vertical slice of the plate, and WHICH slice depends on object-position, so the measured quadrant is not reliably on screen. The plate becomes a fixed-aspect block and the copy sits on slate beneath it. This is why there are no mobile contrast numbers to report for this section: at that width there is no text on the photograph. ⚠ NO SCRIM, NO GRADIENT, NO GRADE. The plate makes its own dark region. */ .pl-open{position:relative;background:var(--pl-slate-3)} .pl-open-fig{position:relative;margin:0} .pl-open-img{width:100%;height:auto;display:block} .pl-open-copy{padding:34px 0 0} /* ⚠ PORCELAIN, NOT BRASS. The kicker sits on the plate and brass-lt at 12px is body text, needing a background at or below 0.050; its measured maximum there is 0.105 and it failed 40.85% of its own glyph pixels. Porcelain's threshold is 0.157, which that maximum clears. Every OTHER kicker on the site is brass-lt because every other kicker is on a flat ground. */ .pl-open-kick{color:var(--pl-porc);margin-bottom:14px} .pl-open-h1{margin-bottom:0} .pl-open-h1 em{font-style:italic;font-variation-settings:'opsz' 120,'WONK' 1;color:var(--pl-brass-lt)} .pl-open-below{background:var(--pl-slate-3);padding:30px 0 56px} .pl-open-lede{color:var(--pl-mist);max-width:46ch} .pl-open-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} @media(min-width:1024px){ .pl-open-fig{height:min(84svh,820px)} /* ⚠ 14%, NOT 50%, AND IT IS THE ULTRAWIDE CASE THAT SETS IT. Vertical crop happens whenever the hero is shorter than width/1.765, which is always true at 1920 (820px against the 1088px the plate's aspect wants). At 50% that crop ate 134px off the top — the dark hallway the headline sits on — and the headline went from 0.00% failing at 1440 to 3.01% at 1920 without one line of CSS changing. Biasing to the top keeps the dark band in frame at every width. Re-measure if you touch it. */ .pl-open-img{height:100%;object-fit:cover;object-position:50% 14%} .pl-open-copy{ position:absolute;inset:0; display:grid;align-content:start;justify-items:start; padding:clamp(36px,4.5vh,60px) 0 0; } .pl-open-copy > *{grid-column:1} .pl-open-inner{ width:100%;max-width:var(--pl-wrap);margin-inline:auto;padding-inline:var(--pl-gut); display:grid;grid-template-columns:1fr minmax(0,620px); } .pl-open-inner > *{grid-column:2} /* ⚠ THE HERO H1 IS SMALLER THAN .pl-d1 EVERYWHERE ELSE, AND THE REASON IS THE PHOTOGRAPH, NOT THE TYPOGRAPHY. The measured dark quadrant is the top 43% of the plate — rows 0-2 of the sample grid, 0.002-0.017. At .pl-d1's full 92px the headline alone is 287px tall and pushes the lede and the buttons to row 4, which is the lit water at 0.341-0.418 and fails every threshold there is. The first build of this section did exactly that and the lede was unreadable. So the whole lockup is sized to FIT the dark region: kicker, two lines of headline, two lines of lede and the buttons come to about 312px inside a 370px budget. If you enlarge anything here, re-measure under the glyphs — do not assume the margin is still there. */ .pl-open-h1{font-size:clamp(38px,4.4vw,64px);margin-bottom:0} .pl-open-kick{margin-bottom:14px} /* The lede sits under the plate but stays in the headline's column, so the two read as one lockup crossing the boundary rather than as a caption. */ .pl-open-below{padding:34px 0 64px} .pl-open-below-in{display:grid;grid-template-columns:1fr minmax(0,620px)} .pl-open-below-in > *{grid-column:2} .pl-open-lede{max-width:46ch;font-size:19px;line-height:1.5} .pl-open-acts{margin-top:26px} } /* ══ 02 TWO CALLS ═════════════════════════════════════════════════════════ Typographic, on porcelain. The brief's central insight for plumbing: one business, two customers who have nothing in common except the phone number they dial. Setting it as two columns of pure type — no photograph, no icon — is what makes it read as an argument rather than a services block. */ .pl-calls{background:var(--pl-porc);color:var(--pl-slate);padding-block:clamp(64px,9vw,120px)} .pl-calls-h{margin-bottom:16px} .pl-calls-sub{color:var(--pl-mute);max-width:52ch;margin-bottom:clamp(40px,5vw,64px)} .pl-calls-grid{display:grid;gap:clamp(32px,4vw,56px)} @media(min-width:820px){.pl-calls-grid{grid-template-columns:1fr 1fr}} .pl-call{border-top:2px solid var(--pl-slate);padding-top:24px} .pl-call-k{color:var(--pl-brass-tx);margin-bottom:14px} .pl-call-h{font-family:var(--pl-disp);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1.1;margin-bottom:14px;font-variation-settings:'opsz' 72} .pl-call-q{font-family:var(--pl-disp);font-style:italic;font-size:clamp(19px,1.7vw,23px);line-height:1.4;color:var(--pl-slate);margin-bottom:18px;font-variation-settings:'opsz' 40,'WONK' 1} .pl-call-b{color:var(--pl-mute);margin-bottom:22px} .pl-steps{display:flex;flex-wrap:wrap;gap:8px} .pl-step{ font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:7px 12px;border:1px solid var(--pl-line);border-radius:2px;color:var(--pl-slate); } /* ══ 03 STOP IT FIRST ═════════════════════════════════════════════════════ A split, not an overlay. pl-stop's only reliably dark region is one 240px column of shadow; a paragraph set on it would be legible at 1440 and not at 1280. So the photograph takes one half at full brightness and the copy takes the other on slate, which is legible at every width by construction. */ .pl-first{background:var(--pl-slate);padding-block:clamp(64px,9vw,120px)} .pl-first-grid{display:grid;gap:clamp(32px,4vw,64px);align-items:center} @media(min-width:900px){.pl-first-grid{grid-template-columns:1.05fr 1fr}} .pl-first-fig{margin:0;position:relative;border-radius:2px;overflow:hidden} .pl-first-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:56% 50%} .pl-first-cap{ margin-top:12px;color:var(--pl-mist-dim);font-size:13px;letter-spacing:.02em; } .pl-first-k{color:var(--pl-brass-lt);margin-bottom:16px} .pl-first-h{margin-bottom:20px} .pl-first-b{color:var(--pl-mist);margin-bottom:18px} .pl-first-b:last-of-type{margin-bottom:0} .pl-first-rule{display:block;width:64px;height:2px;background:var(--pl-brass);margin:26px 0} /* ══ 04 THE DECISION ══════════════════════════════════════════════════════ The immersive moment, and it is built with `position: sticky` and nothing else. ⚠ NO OPACITY CROSS-FADE, DELIBERATELY. The Caldervane scenes lost a quarter of their ground to stacked alpha — two plates at 50% composite to 50% upper, 25% lower and 25% page background, because coverage is 1 - product(1 - alpha), not the sum. A sticky plate holds at full opacity for the whole scene and cannot thin, so the defect is not merely fixed here, it is unreachable. ⚠ THE COPY RIDES IN SLATE CARDS, NOT ON THE PLATE. pl-heater is a bright utility room; its darkest usable block is the left third at 0.063-0.191, which clears porcelain at 3:1 but not at 4.5:1. Rather than constrain every line to large type, the cards carry their own ground. */ .pl-dec{background:var(--pl-slate-3);position:relative} .pl-dec-stage{position:relative} .pl-dec-pin{position:sticky;top:0;height:100svh;overflow:hidden} .pl-dec-pin img{width:100%;height:100%;object-fit:cover;object-position:50% 50%} .pl-dec-flow{position:relative;z-index:2;margin-top:-100svh;padding-block:12svh 16svh;pointer-events:none} .pl-dec-card{ pointer-events:auto; max-width:520px;margin-bottom:min(46svh,420px); background:color-mix(in srgb,var(--pl-slate) 92%,transparent); border-left:3px solid var(--pl-brass); padding:28px 28px 30px;border-radius:2px; backdrop-filter:blur(2px); } .pl-dec-card:last-child{margin-bottom:0} .pl-dec-card--r{margin-left:auto} .pl-dec-n{color:var(--pl-brass-lt);margin-bottom:12px} .pl-dec-h{font-family:var(--pl-disp);font-weight:700;font-size:clamp(23px,2.2vw,32px);line-height:1.12;margin-bottom:12px;font-variation-settings:'opsz' 72} .pl-dec-b{color:var(--pl-mist)} .pl-dec-cta{margin-top:22px} /* ⚠ REDUCED MOTION UN-PINS THE SCENE. A sticky plate with content scrolling over it is parallax by another name, and the page has to be readable without it. Un-pinned, the plate becomes an ordinary band and the cards stack beneath it — the same content in the same order, which is the test a reduced-motion path has to pass. */ @media(prefers-reduced-motion:reduce){ .pl-dec-pin{position:static;height:auto} .pl-dec-pin img{height:auto;aspect-ratio:16/9} .pl-dec-flow{margin-top:0;padding-block:48px} .pl-dec-card{margin-bottom:28px;backdrop-filter:none} .pl-dec-card--r{margin-left:0} } /* Same treatment below 900px: 100svh of pinned plate on a phone leaves the cards fighting a photograph for a 390px-wide column. */ @media(max-width:899.98px){ .pl-dec-pin{position:static;height:auto} .pl-dec-pin img{height:auto;aspect-ratio:4/3} .pl-dec-flow{margin-top:0;padding-block:40px} .pl-dec-card{margin-bottom:24px;max-width:none;backdrop-filter:none} .pl-dec-card--r{margin-left:0} } /* ══ 05 WHO COMES TO THE DOOR ═════════════════════════════════════════════ ⚠ THE VAN IN THIS PHOTOGRAPH IS BLANK AND THAT IS ON PURPOSE. A generative model cannot set a mark correctly — the plate that showed lettering on the uniforms rendered it as illegible pseudo-script, which is a fabricated brand name pretending to be a real one. The mark on this page is the SVG in cyborg_pl_mark(), everywhere it appears. No photograph on this site carries a mark, a plate or a sign. */ .pl-crew{background:var(--pl-slate);padding-block:clamp(64px,9vw,110px)} .pl-crew-fig{margin:0 0 clamp(36px,4.5vw,56px)} .pl-crew-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 42%;border-radius:2px} .pl-crew-grid{display:grid;gap:clamp(28px,4vw,56px)} @media(min-width:900px){.pl-crew-grid{grid-template-columns:1fr 1fr}} .pl-crew-k{color:var(--pl-brass-lt);margin-bottom:16px} .pl-crew-b{color:var(--pl-mist);margin-bottom:16px} .pl-crew-b:last-child{margin-bottom:0} .pl-crew-list{display:grid;gap:18px} .pl-crew-item{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start} .pl-crew-item svg{width:20px;height:20px;margin-top:3px;color:var(--pl-brass);flex:0 0 auto} .pl-crew-it-h{font-weight:700;margin-bottom:3px} .pl-crew-it-b{color:var(--pl-mist-dim);font-size:15px;line-height:1.6} /* ══ 06 CLOSE ═════════════════════════════════════════════════════════════ */ .pl-close{background:var(--pl-porc);color:var(--pl-slate);padding-block:clamp(64px,9vw,120px)} .pl-close-h{margin-bottom:18px} .pl-close-b{color:var(--pl-mute);max-width:56ch;margin-bottom:32px} .pl-close-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .pl-close-tel{ font-family:var(--pl-disp);font-weight:700;font-size:clamp(28px,3vw,42px); color:var(--pl-slate);text-decoration:none;font-variation-settings:'opsz' 72; } .pl-close-tel:hover{color:var(--pl-brass-tx)} .pl-close-area{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--pl-line);padding-top:28px} .pl-close-area-h{color:var(--pl-brass-tx);margin-bottom:12px} .pl-close-area-b{color:var(--pl-mute);max-width:60ch} /* ── Footer ────────────────────────────────────────────────────────────── */ .pl-foot{background:var(--pl-slate-3);padding-block:44px;color:var(--pl-mist-dim)} .pl-foot-in{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between} .pl-foot-lock{display:inline-flex;align-items:center;gap:11px;color:var(--pl-mist)} .pl-foot-lock svg{width:24px;height:24px;color:var(--pl-brass)} .pl-foot-nav{display:flex;flex-wrap:wrap;gap:22px} .pl-foot-nav a{font-size:14px;text-decoration:none;color:var(--pl-mist-dim)} .pl-foot-nav a:hover{color:var(--pl-mist)} .pl-foot-fine{width:100%;font-size:13px;line-height:1.6;color:var(--pl-mist-dim);opacity:.8} /* ══ SECONDARY: WATER HEATER REPLACEMENT ═══════════════════════════════════ The concept's one deep page. It reuses every token and most components from the homepage and adds only what a long-form explanatory page needs: a breadcrumb, a masthead that is type rather than a plate, a numbered sequence and a two-column comparison. ⚠ ITS MASTHEAD IS TYPOGRAPHIC ON PURPOSE. Opening it with another photograph would make it read as a second homepage. The plate it does carry sits below the first block, where it illustrates a specific claim rather than decorating an entrance. */ .pl-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--pl-mist-dim)} .pl-crumbs a{text-decoration:none;color:var(--pl-mist-dim)} .pl-crumbs a:hover{color:var(--pl-mist)} .pl-crumb-sep{opacity:.55} .pl-crumbs [aria-current="page"]{color:var(--pl-mist)} .pl-mast{background:var(--pl-slate);padding-block:clamp(44px,6vw,80px) clamp(56px,8vw,104px)} .pl-mast-k{color:var(--pl-brass-lt);margin:26px 0 16px} .pl-mast-h{margin-bottom:20px} .pl-mast-l{color:var(--pl-mist);max-width:56ch} .pl-mast-rule{display:block;width:64px;height:2px;background:var(--pl-brass);margin:28px 0 0} .pl-sec{padding-block:clamp(56px,8vw,104px)} .pl-sec--slate{background:var(--pl-slate)} .pl-sec--slate3{background:var(--pl-slate-3)} .pl-sec--porc{background:var(--pl-porc);color:var(--pl-slate)} .pl-sec--porc .pl-sec-b, .pl-sec--porc .pl-sec-l{color:var(--pl-mute)} .pl-sec--porc .pl-sec-k{color:var(--pl-brass-tx)} .pl-sec-k{color:var(--pl-brass-lt);margin-bottom:16px} .pl-sec-h{margin-bottom:18px} .pl-sec-l{color:var(--pl-mist);max-width:58ch;margin-bottom:clamp(32px,4vw,52px)} .pl-sec-b{color:var(--pl-mist)} /* A numbered sequence. Counter-driven so the numerals cannot drift from the order of the markup, which is what happens the first time a step is moved. */ .pl-seq{counter-reset:pl-seq;display:grid;gap:clamp(24px,3vw,36px)} @media(min-width:900px){.pl-seq{grid-template-columns:1fr 1fr}} .pl-seq-item{counter-increment:pl-seq;border-top:1px solid var(--pl-line-d);padding-top:20px} .pl-sec--porc .pl-seq-item{border-top-color:var(--pl-line)} .pl-seq-item::before{ content:counter(pl-seq,decimal-leading-zero); display:block;font-family:var(--pl-body);font-size:12px;font-weight:700; letter-spacing:.22em;color:var(--pl-brass-lt);margin-bottom:10px; } .pl-sec--porc .pl-seq-item::before{color:var(--pl-brass-tx)} .pl-seq-h{font-family:var(--pl-disp);font-weight:700;font-size:clamp(20px,1.9vw,26px);line-height:1.15;margin-bottom:10px;font-variation-settings:'opsz' 40} .pl-seq-b{color:var(--pl-mist);font-size:16px;line-height:1.66} .pl-sec--porc .pl-seq-b{color:var(--pl-mute)} /* The comparison. Two panels, no table — a table implies a spec sheet, and the honest content here is a paragraph of judgment on each side. */ .pl-cmp{display:grid;gap:clamp(24px,3vw,40px)} @media(min-width:860px){.pl-cmp{grid-template-columns:1fr 1fr}} .pl-cmp-p{background:var(--pl-slate-2);border-top:3px solid var(--pl-brass);padding:28px;border-radius:2px} .pl-cmp-h{font-family:var(--pl-disp);font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.15;margin-bottom:12px;font-variation-settings:'opsz' 40} .pl-cmp-b{color:var(--pl-mist);margin-bottom:16px} .pl-cmp-l{display:grid;gap:10px} .pl-cmp-l li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:15px;line-height:1.6;color:var(--pl-mist-dim)} .pl-cmp-l svg{width:18px;height:18px;margin-top:3px;color:var(--pl-brass)} .pl-plate{margin:0} .pl-plate img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 46%;border-radius:2px} .pl-plate figcaption{margin-top:12px;color:var(--pl-mist-dim);font-size:13px} .pl-note{ margin-top:clamp(32px,4vw,48px);border-left:3px solid var(--pl-brass); padding:18px 22px;background:var(--pl-slate-2);border-radius:2px; color:var(--pl-mist);font-size:16px;line-height:1.66; } .pl-sec--porc .pl-note{background:var(--pl-porc-2);color:var(--pl-mute)}