/* SHOO IN interior pages: layout atoms on top of style.css */ .page-hero { padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(1.8rem, 4vw, 2.8rem); } /* When the hero feeds straight into a prose block (blog posts, legal pages, text-only service pages), trim its bottom padding so the lede flows into the body as a dek rather than floating over a doubled gap. */ .page-hero:has(+ .sec-flush) { padding-bottom: clamp(0.8rem, 2vw, 1.4rem); } .ph-kicker { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--azure-deep); } .ph-title { font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.06; max-width: 22ch; margin-top: 0.5rem; } .ph-title b { font-weight: 800; color: var(--azure); } .ph-lede { margin-top: 1.1rem; max-width: 62ch; color: var(--grey); font-size: 1.07rem; } /* Blog-post subtitle only (heroes that carry the read-time/date band): italic and body-sized, so it reads as an article standfirst. Other pages' heroes are unaffected. */ .page-hero:has(.ph-meta) .ph-lede { font-style: italic; font-size: 1rem; } /* Article byline band: set the read-time/date apart from the lede with space and a hairline rule so it reads as distinct metadata, not a stray line under the dek. */ .ph-meta { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); max-width: 60ch; color: var(--grey); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; } .ph-cta { margin-top: 1.6rem; } .page-photo { width: 100%; max-height: 430px; object-fit: cover; border-radius: 18px; display: block; box-shadow: 0 22px 44px -24px rgba(22, 33, 30, 0.35); } /* Photo that introduces a prose-only page (About): cap to the prose measure and left-align (block default) so the image matches the prose column's width and left edge. Scoped to .narrow so full-width service-page photos are untouched. */ .page-photo.narrow { max-width: 70ch; } /* About body: one centered reading column with the team photo at the top of it (full column width). Nothing is aligned to the hero watermark. */ .about-col { max-width: 70ch; margin: 0 auto; } .about-col .prose-col { max-width: none; } .about-photo { width: 100%; height: clamp(260px, 34vw, 400px); object-fit: cover; border-radius: 18px; display: block; box-shadow: 0 22px 44px -24px rgba(22, 33, 30, 0.35); margin-bottom: 1.8rem; } .prose-col { max-width: 70ch; } /* Blog posts only. The default 70ch column stopped well short of the hero mark and read as wasted space (X, 2026-07-27). MEASURED TWICE. The first attempt used 92ch, which aligned to the SVG ELEMENT's bounding box (right edge 1451px) rather than to the artwork drawn inside it (1415px), so it overshot by 37px and lined up with the header button instead of the mark. 1040px is the content width that lands on the visible artwork. The font bump is not cosmetic: at 16px this column runs about 89 characters, which is past a comfortable measure. At 1.06rem the same pixel width reads at about 84, so the space X wanted filled stays filled and the line gets shorter. */ .prose-col.prose-wide { max-width: 1040px; } .prose-col.prose-wide p, .prose-col.prose-wide li { font-size: 1.06rem; line-height: 1.65; } /* Justified, per X 2026-07-27. Justification fails at NARROW measures, where too few word gaps absorb the slack and you get rivers. At 84 characters there are plenty of gaps, so the stretch per gap stays small and the block reads as deliberate. Two conditions make it safe and both are met: hyphens:auto, and so the browser has a hyphenation dictionary. Turned OFF below 760px, where the measure shortens and justification starts costing more than it buys. */ @media (min-width: 760px) { .prose-col.prose-wide p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } } /* Figures are authored on a 640-unit viewBox and scale to their container, so widening the column to 1040px magnified every label by 1.63x and the figures started shouting over the body text (X, 2026-07-27). Capping at 840px puts a 12-unit label at about 15.7px against 17px body text, so the diagram sits just under the prose instead of above it. Applies to every blog figure, not only the one this was found on. */ /* Centred, because capping the width inside a 1040px column left 200px of dead white down the right of every figure (X, 2026-07-27). The cap and the centring have to travel together; one without the other is the bug. */ .prose-col.prose-wide figure svg { max-width: 840px; margin-left: auto; margin-right: auto; } .prose-col.prose-wide figcaption { max-width: 840px; margin-left: auto; margin-right: auto; } .prose-col h2 { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; margin: 1.9rem 0 0.6rem; } .prose-col > :first-child { margin-top: 0; } .prose-col p { color: var(--grey); margin-bottom: 0.9rem; } .prose-col a { color: var(--azure-deep); font-weight: 600; } .prose-col b { color: var(--ink); } .svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .svc-tile { display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; background: var(--tint-2); border: 1px solid var(--line); border-radius: 18px; padding: 1.6rem 1.5rem; transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; } .svc-tile:hover { transform: translateY(-4px); border-color: var(--azure); box-shadow: 0 16px 32px -20px rgba(12, 147, 132, 0.35); } .svc-tile h3 { font-size: 1.08rem; font-weight: 800; } .svc-tile p { font-size: 0.92rem; color: var(--grey); flex: 1; } .svc-tile span { font-size: 0.8rem; font-weight: 700; color: var(--azure-deep); } .tick-list { list-style: none; max-width: 70ch; display: grid; gap: 0.55rem; } .tick-list li { padding-left: 1.7rem; position: relative; color: var(--ink); font-weight: 500; } .tick-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--azure); font-weight: 800; } .vet-note { max-width: 70ch; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1.1rem; font-size: 0.95rem; color: var(--grey); } .vet-note a { color: var(--azure-deep); font-weight: 700; } .vet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .vet-card { background: var(--tint-2); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem 1.4rem; } .vet-card h3 { font-weight: 800; font-size: 1.05rem; margin-bottom: 0.5rem; } .vet-card p { font-size: 0.93rem; color: var(--grey); } .vet-banner { margin-top: 1.6rem; background: var(--navy); color: #d9efe9; border-radius: 14px; padding: 1.1rem 1.4rem; font-size: 0.97rem; } .vet-banner b { color: #ffffff; } .vet-banner a { color: var(--sky); font-weight: 700; } .addons { margin-top: 1.8rem; border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.4rem; background: var(--tint-2); } .addons h3 { font-weight: 800; font-size: 1rem; margin-bottom: 0.3rem; } .addons p { color: var(--grey); font-size: 0.95rem; } .translator { max-width: 720px; border: 1px solid var(--line); border-radius: 18px; padding: 1.6rem; background: var(--tint-2); } .tr-controls { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .tr-controls label { font-size: 0.8rem; font-weight: 700; color: var(--grey); display: grid; gap: 0.35rem; } .tr-controls select { font-family: var(--sans); font-size: 1rem; font-weight: 600; padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); min-width: 220px; } .tr-row { display: grid; gap: 0.15rem; padding: 0.85rem 0; border-top: 1px solid var(--line); } .tr-row span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-soft); } .tr-row b { font-size: 1.02rem; color: var(--ink); } .tr-row.trap b { color: var(--azure-deep); } .tr-note { margin-top: 0.9rem; font-size: 0.85rem; color: var(--grey-soft); } .tf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } .tf-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); } .tf-before { padding: 1.1rem 1.3rem; color: var(--grey-soft); text-decoration: line-through; text-decoration-color: rgba(12, 147, 132, 0.5); background: var(--tint-2); font-size: 0.95rem; } .tf-after { padding: 1.1rem 1.3rem; color: var(--ink); font-weight: 600; font-size: 0.98rem; border-top: 1px solid var(--line); } .demo-note { font-size: 0.85rem; color: var(--grey-soft); max-width: 70ch; } .demo-note a, .demo-note b { color: var(--azure-deep); } .legal-note { font-size: 0.85rem; font-style: italic; color: var(--grey-soft); border-top: 1px solid var(--line); padding-top: 0.9rem; margin-top: 1.4rem; } .byline { font-size: 0.85rem; color: var(--grey-soft); border-top: 1px solid var(--line); padding-top: 0.9rem; } .foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 1.6rem; } .foot-cols a { display: block; font-size: 0.88rem; color: #a7c0b8; text-decoration: none; padding: 0.22rem 0; } .foot-cols a:hover { color: var(--sky); } .foot-h { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; margin-bottom: 0.5rem; } .foot-blurb { font-size: 0.88rem; color: #a7c0b8; margin-top: 0.8rem; max-width: 30ch; } @media (max-width: 960px) { .svc-cards { grid-template-columns: 1fr; } .vet-grid { grid-template-columns: 1fr; } .tf-grid { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: 1fr 1fr; } .price-grid[style] { grid-template-columns: 1fr !important; } } @media print { .nav, footer, .closing, .pill, .ph-cta { display: none !important; } body { font-size: 12pt; } .page-hero { padding: 0 0 1rem; } } .ph-art { position: absolute; right: clamp(1rem, 4vw, 4rem); top: 1.2rem; width: 300px; height: 188px; opacity: 0.92; pointer-events: none; } /* The watermark is anchored to a FIXED top-right position (not vertically centered), so it sits identically on every hero and never drifts. The hero reserves a min-height to contain it, and the heading text reserves a right gutter the width of the watermark so a long heading can never run under it (the products "...price of lunch." heading did). Scoped to where the art shows (it is display:none below 1100px). */ @media (min-width: 1101px) { .page-hero { min-height: 300px; } .page-hero .ph-kicker, .page-hero .ph-title, .page-hero .ph-lede, .page-hero .ph-meta { max-width: calc(100% - 384px); } } .page-hero { position: relative; overflow: hidden; } .page-hero .wrap { position: relative; } @media (max-width: 1100px) { .ph-art { display: none; } } .cmp { margin-top: 2rem; border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem 1.6rem; background: var(--white); } .cmp h3 { font-weight: 800; font-size: 1.15rem; } .cmp-sub { color: var(--grey); font-size: 0.92rem; margin: 0.4rem 0 1rem; max-width: 72ch; } .cmp-table { width: 100%; border-collapse: collapse; } .cmp-table th { text-align: left; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-soft); padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--line); } .cmp-table td { padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--line); font-size: 0.98rem; } .cmp-table td:last-child { font-weight: 700; } .blur-name { display: inline-block; height: 14px; max-width: 60vw; border-radius: 7px; background: linear-gradient(90deg, #c7d9d4, #e3edea 60%, #d3e4df); filter: blur(4px); } .cmp-avg td { color: var(--grey); font-style: italic; } .cmp-us td { background: var(--tint); font-weight: 800; color: var(--azure-deep); } .cmp-us td:first-child { border-radius: 8px 0 0 8px; } .cmp-us td:last-child { border-radius: 0 8px 8px 0; } .cmp-note { margin-top: 0.9rem; font-size: 0.82rem; color: var(--grey-soft); max-width: 72ch; } .cap-banner { background: #123f38; color: #d9efe9; text-align: center; font-size: 0.9rem; font-weight: 600; padding: 0.7rem 1.2rem; } .paused-tag { font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #b0682a; background: #fdf1e3; border-radius: 99px; padding: 0.15rem 0.55rem; vertical-align: middle; margin-left: 0.4rem; } .cv-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .cv-gallery img { width: 100%; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 30px -18px rgba(22,33,30,0.35); } @media (max-width: 960px) { .cv-gallery { grid-template-columns: 1fr; } } /* Fan anchored to the card's RIGHT (X approved option D, 2026-07-29). It used to hang left:-168px off the card, pointing INWARD at the copy column. Once .hero-grid was capped at 1180px the card moved left and the fan slid under the hero paragraph, overlapping it by 138px. Anchored right it bleeds outward toward the page margin, clear of every piece of text at any width, and .hero-outer's overflow-x:clip handles the bleed. Rotations are mirrored so the fan opens away from the card. Do not restore a left offset here. */ .hero-fan { position: absolute; right: -260px; bottom: 26px; width: 300px; height: 220px; z-index: 1; pointer-events: none; } /* z-index 1, not -1: at -1 the fan rendered BEHIND .hero-grid::before, the big mint panel, which is what made it look washed out and half hidden. The card is lifted to z-index 2 so the fan still passes behind it. */ .review-card { position: relative; z-index: 2; } .hero-fan img { position: absolute; bottom: 0; width: 172px; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 22px 44px -14px rgba(22,33,30,0.42); background: #fff; transform-origin: bottom center; } .hero-fan img:nth-child(1) { left: 88px; transform: rotate(10deg); } .hero-fan img:nth-child(2) { left: 44px; transform: rotate(3deg); } .hero-fan img:nth-child(3) { left: 0; transform: rotate(-5deg); } @media (max-width: 1100px) { .hero-fan { display: none; } } .prose-col ol, .prose-col ul { padding-left: 1.5rem; margin: 0 0 1.1rem; } .prose-col li { color: var(--grey); margin-bottom: 0.5rem; padding-left: 0.15rem; } .prose-col li b { color: var(--ink); } /* Do NOT reintroduce `counter-reset: none` here. It suppresses each
    's own reset, so any
  1. earlier in the column keeps counting: a