/* ============================================================ Service Dog Experts, Palm City FL Palette: warm charcoal ink, cream and bone canvas, brand red as a disciplined accent, one deep teal support tone. Type: Fraunces (editorial serif) + Nunito Sans (humane sans). Motion: everything is visible by default. The head script adds .anim to only when motion is welcome, and every animated rule is nested under .anim. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, form { margin: 0; padding: 0; } ul, ol { list-style: none; } /* height:auto keeps the width/height attributes (there for layout stability) from beating aspect-ratio and object-fit crops */ img { max-width: 100%; height: auto; display: block; } /* every photo ships WebP derivatives through , and every frame in this file sizes its directly (100% of an aspect-ratio box, a grid cell, an absolute inset). display:contents removes the wrapper's box so those rules keep addressing the img, and the explicit display:none on means nothing is riding on the UA sheet to keep the candidates out of the layout. */ picture { display: contents; } picture > source { display: none; } button { font: inherit; color: inherit; } :root { /* ink */ --ink: #241B19; --ink-2: #382A26; --ink-3: #55433D; --muted: #6B5A54; /* canvas */ --cream: #FBF5EA; --bone: #F2E9D9; --paper: #FFFCF6; --paper-2: #FFFEFB; /* accent */ --red: #D62828; --red-mid: #C21F26; --red-deep: #A81D22; --red-tint: rgba(214, 40, 40, 0.09); /* support */ --teal: #2F6B6E; --line: rgba(36, 27, 25, 0.13); --line-soft: rgba(36, 27, 25, 0.08); --line-light: rgba(251, 245, 234, 0.16); --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wrap: 1220px; --pad: clamp(1.15rem, 4vw, 2.6rem); --r-lg: 26px; --r-md: 18px; --r-sm: 12px; --sh-1: 0 1px 2px rgba(36, 27, 25, 0.05), 0 6px 18px rgba(36, 27, 25, 0.06); --sh-2: 0 2px 4px rgba(36, 27, 25, 0.05), 0 14px 40px rgba(36, 27, 25, 0.10); --sh-3: 0 4px 8px rgba(36, 27, 25, 0.06), 0 28px 70px rgba(36, 27, 25, 0.16); --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D62828'%3E%3Cellipse cx='8' cy='7.4' rx='2.5' ry='3.3'/%3E%3Cellipse cx='16' cy='7.4' rx='2.5' ry='3.3'/%3E%3Cellipse cx='3.5' cy='13' rx='2.2' ry='2.9'/%3E%3Cellipse cx='20.5' cy='13' rx='2.2' ry='2.9'/%3E%3Cpath d='M12 11.3c3.4 0 6.2 2.7 6.2 5.5 0 2.1-1.7 3.5-4.1 3.5-1.1 0-1.5-.4-2.1-.4s-1 .4-2.1.4c-2.4 0-4.1-1.4-4.1-3.5 0-2.8 2.8-5.5 6.2-5.5z'/%3E%3C/svg%3E"); --paw-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8A0A0'%3E%3Cellipse cx='8' cy='7.4' rx='2.5' ry='3.3'/%3E%3Cellipse cx='16' cy='7.4' rx='2.5' ry='3.3'/%3E%3Cellipse cx='3.5' cy='13' rx='2.2' ry='2.9'/%3E%3Cellipse cx='20.5' cy='13' rx='2.2' ry='2.9'/%3E%3Cpath d='M12 11.3c3.4 0 6.2 2.7 6.2 5.5 0 2.1-1.7 3.5-4.1 3.5-1.1 0-1.5-.4-2.1-.4s-1 .4-2.1.4c-2.4 0-4.1-1.4-4.1-3.5 0-2.8 2.8-5.5 6.2-5.5z'/%3E%3C/svg%3E"); } body { background: var(--cream); color: var(--ink-2); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.68; font-weight: 400; letter-spacing: 0.002em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; font-variation-settings: "opsz" 60; } h1 { font-size: clamp(2.6rem, 6.1vw, 4.6rem); font-variation-settings: "opsz" 120; } h2 { font-size: clamp(2rem, 4vw, 3.1rem); } h3 { font-size: clamp(1.28rem, 1.9vw, 1.62rem); line-height: 1.16; } h4 { font-size: 0.8rem; } em { font-style: italic; } a { color: var(--red-deep); } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100px; left: 12px; z-index: 200; background: var(--ink); color: var(--cream); padding: 0.8rem 1.15rem; border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 700; font-size: 0.92rem; text-decoration: none; transition: top 0.16s ease; } .skip-link:focus { top: 0; } :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; } /* ---------- shared bits ---------- */ .paw-word { font-family: var(--sans); font-weight: 800; color: var(--red); letter-spacing: 0.04em; font-size: 0.82em; vertical-align: 0.04em; } .eyebrow { font-family: var(--sans); font-size: 0.775rem; font-weight: 800; letter-spacing: 0.19em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.7rem; } .eyebrow::before { content: ""; width: 26px; height: 2px; flex: none; background: var(--red); border-radius: 2px; } .sec-head { max-width: 46rem; margin-bottom: clamp(2.4rem, 5vw, 4rem); } .sec-head h2 { margin-bottom: 1.1rem; } .sec-head h2 em { color: var(--red-deep); } .sec-sub { font-size: clamp(1.03rem, 1.4vw, 1.16rem); color: var(--muted); max-width: 40rem; } .sec-head-row { max-width: none; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; } .sec-head-row .sec-sub { padding-bottom: 0.35rem; } .sec-head-light h2 { color: var(--cream); } .sec-head-light h2 em { color: #F2A9A9; } .sec-head-light .sec-sub { color: #D5C7B8; } .sec-head-light .eyebrow { color: #9CC8C4; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0.82rem 1.5rem; border: 1px solid transparent; border-radius: 999px; font-family: var(--sans); font-weight: 800; font-size: 0.96rem; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: transform 0.22s cubic-bezier(.2,.7,.3,1), background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, border-color 0.22s ease; } .btn svg { flex: none; } .btn-red { background: var(--red-mid); color: #FFF8F1; box-shadow: 0 2px 4px rgba(168, 29, 34, 0.18), 0 12px 26px rgba(168, 29, 34, 0.22); } .btn-red:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(168,29,34,.2), 0 18px 34px rgba(168,29,34,.28); } .btn-ink { background: transparent; color: var(--ink); border-color: rgba(36, 27, 25, 0.28); } .btn-ink:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-2px); } .btn-lg { min-height: 56px; padding: 1rem 1.9rem; font-size: 1.02rem; } .btn-sm { min-height: 44px; padding: 0.6rem 1.1rem; font-size: 0.9rem; } .btn-block { display: flex; width: 100%; } .cta-link { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; font-weight: 800; font-size: 0.95rem; color: var(--red-deep); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s ease, gap 0.2s ease, color 0.2s ease; } .cta-link span { transition: transform 0.25s cubic-bezier(.2,.7,.3,1); display: inline-block; } .cta-link:hover { border-color: var(--red); } .cta-link:hover span { transform: translateX(4px); } /* ---------- proof rows: separator dots that survive a wrap ---------- The dot trails the item it follows rather than leading the next one, so it can never open a new line looking like a stray bullet. It is also absolutely positioned in the flex gutter rather than sitting in the text flow, for two reasons: it stays optically centred between the two phrases at every size, and because it carries no width, hiding one cannot reflow the row. That is what lets app.js add .sep-end to the last item on each visual line and drop the dot there, so a wrap never leaves a dot dangling at the end of a line. The column gutter is therefore the dot plus its two margins, and the row gutter stays on --sep-gap so wrapped lines keep their tight vertical rhythm. */ .kicker, .hero-fine { column-gap: calc(var(--sep-gap) * 2 + 4px); row-gap: var(--sep-gap); } .kicker > span, .hero-fine > span { position: relative; } .kicker > span:not(:last-child)::after, .hero-fine > span:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; margin-left: var(--sep-gap); width: 4px; height: 4px; border-radius: 50%; background: var(--red); opacity: 0.75; transform: translateY(-50%); } .kicker > span.sep-end::after, .hero-fine > span.sep-end::after { content: none; } .nowrap { white-space: nowrap; } /* paw bulleted task lists */ .tasks { display: grid; gap: 0.62rem; } .tasks li { position: relative; padding-left: 1.85rem; font-size: 0.985rem; line-height: 1.55; color: var(--ink-3); } .tasks li::before { content: ""; position: absolute; left: 0; top: 0.24em; width: 1.05rem; height: 1.05rem; background: var(--paw) center / contain no-repeat; opacity: 0.92; } .tasks-light li { color: #D9CDBD; } .tasks-light li::before { background-image: var(--paw-light); } .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chips li { font-size: 0.85rem; font-weight: 700; color: var(--ink-3); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.42rem 0.85rem; line-height: 1.35; } /* ============================================================ MOTION Visible by default. .anim (set by the head script when prefers-reduced-motion is not set) opts into the choreography. ============================================================ */ .hi, .rv { opacity: 1; } .anim .hi { opacity: 0; animation: hiIn 0.85s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: var(--d, 0s); } .anim .hi-scale { animation-name: hiScale; animation-duration: 1.15s; } @keyframes hiIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes hiScale { from { opacity: 0; transform: translateY(18px) scale(0.965); } to { opacity: 1; transform: none; } } .anim .rv { opacity: 0; transform: var(--rv-from, translateY(28px)); } .anim .rv-scale { --rv-from: scale(0.965); } .anim .rv-fade { --rv-from: none; } .anim .rv.rv-in { opacity: 1; transform: none; transition: opacity 0.75s cubic-bezier(.2,.75,.25,1) var(--rvd, 0s), transform 0.85s cubic-bezier(.2,.75,.25,1) var(--rvd, 0s); } /* A print, a save-to-PDF, or an unfurl/preview bot never scrolls, so the IntersectionObserver may never see a section intersect and .anim would leave the page a stack of empty colour bands. Nothing on paper waits for the observer. (app.js carries the on-screen equivalents of this failsafe.) */ @media print { .hi, .rv, .anim .hi, .anim .rv { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(251, 245, 234, 0.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; } .site-header.scrolled { border-bottom-color: var(--line-soft); box-shadow: 0 10px 30px rgba(36, 27, 25, 0.06); background: rgba(251, 245, 234, 0.94); } .header-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; } .brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); padding: 0.35rem 0; } .brand-mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--red-mid); color: var(--cream); border-radius: 13px; box-shadow: 0 2px 4px rgba(168, 29, 34, 0.2), 0 8px 18px rgba(168, 29, 34, 0.18); transition: transform 0.3s cubic-bezier(.2,.7,.3,1); } .brand:hover .brand-mark { transform: rotate(-7deg) scale(1.05); } .brand-text { display: grid; line-height: 1.1; } .brand-text strong { font-family: var(--serif); font-weight: 600; font-size: 1.16rem; letter-spacing: -0.012em; } .brand-text em { font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-top: 0.15rem; } /* compact tap-to-call, lives outside #nav so it survives the mobile drawer */ .header-call { display: none; align-items: center; gap: 0.42rem; min-height: 44px; padding: 0 0.9rem; margin-left: auto; border-radius: 999px; background: var(--red-mid); color: #FFF8F1; font-family: var(--sans); font-weight: 800; font-size: 0.9rem; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 4px rgba(168, 29, 34, 0.18), 0 8px 20px rgba(168, 29, 34, 0.2); transition: background-color 0.22s ease; } .header-call:hover { background: var(--red-deep); } .header-call svg { flex: none; } .nav-toggle { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); cursor: pointer; } .nav { display: flex; align-items: center; gap: clamp(0.4rem, 1.4vw, 1.35rem); } .nav > a:not(.btn) { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.2rem; font-size: 0.925rem; font-weight: 700; letter-spacing: 0.005em; color: var(--ink-2); text-decoration: none; /* the desktop bar is one 74px row or nothing: a two-line "Available Dogs" is never the right answer, so the drawer takes over instead (see 1040px) */ white-space: nowrap; transition: color 0.2s ease; } /* the bar has to clear the descenders or it reads as a strikethrough: inside the 44px hit area the glyphs bottom out 12.4px above the box, so 8px puts the bar in the gap under the p and g rather than through them. It is also inset by the link's own 0.2rem of side padding, so it underlines the word, not the padding. */ .nav > a:not(.btn)::after { content: ""; position: absolute; left: 0.2rem; right: calc(100% - 0.2rem); bottom: 8px; height: 2px; background: var(--red); border-radius: 2px; transition: right 0.28s cubic-bezier(.2,.7,.3,1); } .nav > a:not(.btn):hover { color: var(--ink); } .nav > a:not(.btn):hover::after, .nav > a[aria-current="true"]::after { right: 0.2rem; } .nav > a[aria-current="true"] { color: var(--ink); } .nav-call { margin-left: 0.35rem; } .nav-call span { white-space: nowrap; } /* on the desktop bar neither side may be squeezed into a wrap. Scoped to the band where the full nav is on screen, so the compact header can still compress the brand on a 320px phone. */ @media (min-width: 1041px) { .brand, .nav { flex: 0 0 auto; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding: clamp(2.4rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 5.5rem); overflow: hidden; } .hero-amb { position: absolute; inset: 0; pointer-events: none; } .amb { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; } .amb-a { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: -12%; right: -8%; background: radial-gradient(circle at 50% 50%, rgba(214, 40, 40, 0.14), rgba(214, 40, 40, 0) 68%); } .amb-b { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; bottom: -18%; left: -12%; background: radial-gradient(circle at 50% 50%, rgba(47, 107, 110, 0.13), rgba(47, 107, 110, 0) 68%); } .hero-grid { position: relative; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .kicker { --sep-gap: 0.6rem; display: flex; flex-wrap: wrap; align-items: center; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.5rem; } .hero-title { margin-bottom: 1.5rem; } .hero-title > span { display: block; } .hero-title > span:nth-child(2) { color: var(--red-deep); font-style: italic; font-weight: 500; } .hero-title > span:nth-child(3) { font-size: 0.62em; font-weight: 500; letter-spacing: -0.005em; } .hero-sub { font-size: clamp(1.09rem, 1.55vw, 1.3rem); line-height: 1.6; color: var(--ink-3); max-width: 34rem; margin-bottom: 2.1rem; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.9rem; } .hero-fine { --sep-gap: 0.55rem; font-size: 0.87rem; color: var(--muted); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); max-width: 34rem; } .hero-art { position: relative; } .arch { position: relative; aspect-ratio: 1066 / 1400; border-radius: 50% 50% 20px 20px / 34% 34% 3% 3%; overflow: hidden; background: var(--bone); box-shadow: var(--sh-3); } .arch-img { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; object-fit: cover; object-position: 50% 30%; will-change: transform; } .arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(190deg, rgba(214, 40, 40, 0.10) 0%, rgba(214, 40, 40, 0) 42%), linear-gradient(0deg, rgba(36, 27, 25, 0.34) 0%, rgba(36, 27, 25, 0) 45%); pointer-events: none; } .arch-ring { position: absolute; inset: 12px; border: 1px solid rgba(251, 245, 234, 0.4); border-radius: 50% 50% 12px 12px / 34% 34% 2% 2%; pointer-events: none; } .inset-card { position: absolute; left: -6%; bottom: 6%; width: min(268px, 62%); display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 0.85rem; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 0.75rem; box-shadow: var(--sh-2); } /* the collar is the one studio shot in the set: both crops go tight to the patch and both get a warm multiply wash so the flat grey joins the palette */ .thumb-collar, .collar-frame { position: relative; display: block; overflow: hidden; background: var(--bone); } .thumb-collar { width: 72px; height: 72px; border-radius: 11px; } /* Measured: the SERVICE DOG patch spans 20.1% to 84.6% of the source width, so a 1.5x zoom only leaves a 66.7% window and cut the last letter whatever the origin. 1.35x opens the window to 74.1%, and at 60% the patch lands inside it with about 4.5% of clearance on each side, both white borders intact. */ .thumb-collar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transform-origin: 60% 62%; } .collar-frame { width: 100%; aspect-ratio: 4 / 3; } .collar-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.38); transform-origin: 50% 57%; } .thumb-collar::after, .collar-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(165deg, rgba(214, 40, 40, 0.17), rgba(214, 40, 40, 0) 58%), rgba(242, 233, 217, 0.9); mix-blend-mode: multiply; } .inset-card figcaption { display: grid; gap: 0.16rem; } .inset-card strong { font-family: var(--serif); font-size: 0.98rem; font-weight: 600; color: var(--ink); line-height: 1.15; } .inset-card span { font-size: 0.775rem; color: var(--muted); line-height: 1.35; } /* ============================================================ TRUST STRIP ============================================================ */ .trust { background: var(--ink); color: #E4D9CB; padding: clamp(2.6rem, 5vw, 4rem) 0; position: relative; } .trust::before, .trust::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(214, 40, 40, 0.55), transparent); } .trust::before { top: 0; } .trust::after { bottom: 0; } /* three shared tracks, glyph / heading / body, and every item spans all three. The headings do not wrap to the same number of lines, so without the subgrid the five bodies sit on two different baselines about 20px apart. Row gaps stay at 0 everywhere because a subgridded item inherits its parent's gutters, which would open the gap *inside* each item: the band-to-band rhythm in the wrapped layouts is padding on the items instead, pulled back off the section below. */ .trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto auto 1fr; gap: 0; } .trust-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; padding: 0 clamp(0.9rem, 1.8vw, 1.6rem); border-left: 1px solid var(--line-light); } .trust-item:first-child { border-left: 0; padding-left: 0; } /* only the 5-up ends its last item at the wrap edge; in the 3-up that item is the middle of row 2 and keeps its right padding (see the 1080px block) */ .trust-item:last-child { padding-right: 0; } /* if subgrid is missing, reserve two lines of heading so the bodies still line up */ @supports not (grid-template-rows: subgrid) { .trust-item { display: block; } .trust-item h3 { min-height: 2.32em; } } .trust-glyph { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 0.95rem; color: #F0A5A5; border: 1px solid rgba(240, 165, 165, 0.32); border-radius: 12px; } .trust-glyph svg { width: 22px; height: 22px; } .trust-item h3 { font-size: 1.06rem; color: var(--cream); margin-bottom: 0.4rem; letter-spacing: -0.005em; } .trust-item p { font-size: 0.895rem; line-height: 1.5; color: #B9A99A; } /* ============================================================ STORY ============================================================ */ .story { padding: clamp(3.6rem, 8vw, 6.5rem) 0; } .story-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); } .story-lead h2 { font-size: clamp(2rem, 3.6vw, 3rem); } .story-lead h2 em { color: var(--red-deep); display: block; } .story-body { padding-top: 0.4rem; } .story-big { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.55; color: var(--ink-2); margin-bottom: 1.15rem; } .story-body p { color: var(--muted); } /* the strongest single number they have, given a line of its own */ .story-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.75rem; margin-top: 1.6rem; padding: 1rem 1.15rem 1.05rem; background: var(--paper); border: 1px solid var(--line-soft); border-left: 3px solid var(--red); border-radius: 0 var(--r-md) var(--r-md) 0; } .story-stat strong { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 2.5vw, 2.05rem); line-height: 1; letter-spacing: -0.02em; color: var(--red-deep); } .story-stat span { font-size: 0.94rem; font-weight: 700; line-height: 1.4; color: var(--ink-3); max-width: 21rem; /* two even lines beat a full line and a two-word orphan */ text-wrap: balance; } .signature { margin-top: 1.9rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--ink) !important; line-height: 1.3; } /* ============================================================ PROGRAMS ============================================================ */ .programs { background: var(--bone); padding: clamp(3.6rem, 8vw, 6.5rem) 0 clamp(3.2rem, 7vw, 5.5rem); border-top: 1px solid var(--line-soft); } .prog-list { display: grid; gap: clamp(2rem, 4vw, 3rem); } /* each card carries the hue of its own badge, so the five real badge colours read as chosen rather than imported. Defaults are the brand red. */ .prog { --accent: var(--red-deep); --accent-line: rgba(168, 29, 34, 0.3); display: grid; grid-template-columns: minmax(168px, 232px) 2fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.5rem, 3.2vw, 2.6rem); box-shadow: var(--sh-1); transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(.2,.7,.3,1); } .prog:hover { box-shadow: var(--sh-2); transform: translateY(-3px); } .prog:nth-child(even) { grid-template-columns: 2fr minmax(168px, 232px); } .prog:nth-child(even) .prog-badge { order: 2; } .prog:nth-child(1) { --accent: #A81D22; --accent-line: rgba(168, 29, 34, 0.3); } .prog:nth-child(2) { --accent: #1D4E77; --accent-line: rgba(29, 78, 119, 0.3); } .prog:nth-child(3) { --accent: #6E3277; --accent-line: rgba(110, 50, 119, 0.3); } .prog:nth-child(4) { --accent: #1F6591; --accent-line: rgba(31, 101, 145, 0.34); } .prog:nth-child(5) { --accent: #2F6B6E; --accent-line: rgba(47, 107, 110, 0.34); } /* the plate is a real cream mat: padding gives the badge room, and the ring carries the card's accent so the device is visible, not a halo */ .prog-badge { display: grid; place-items: center; align-self: center; } .plate { position: relative; display: grid; place-items: center; width: 100%; max-width: 232px; aspect-ratio: 1; padding: 15px; background: var(--paper-2); border-radius: 50%; border: 2px solid var(--accent-line, var(--line-soft)); box-shadow: var(--sh-1); isolation: isolate; overflow: hidden; transition: transform 0.4s cubic-bezier(.2,.7,.3,1), box-shadow 0.4s ease, border-color 0.4s ease; } .plate img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .prog:hover .plate { transform: scale(1.035); border-color: var(--accent); box-shadow: var(--sh-2); } /* the obedience seal is pure black line art. A real duotone rather than a faded one: the art stays at full strength so the ring type keeps its edges, and a lighten overlay takes the per-channel maximum, so #000 lifts to the palette's warm charcoal while the cream mat is left exactly where it was. */ .plate-sm { max-width: 152px; padding: 12px; background: var(--cream); border-color: rgba(36, 27, 25, 0.16); } .plate-sm::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: var(--ink); mix-blend-mode: lighten; pointer-events: none; } .prog-body { padding-top: 0.35rem; } .prog-body h3 { margin-bottom: 0.7rem; } .prog-lede { font-size: clamp(1.02rem, 1.35vw, 1.13rem); line-height: 1.6; color: var(--ink-3); max-width: 36rem; padding-bottom: 1.35rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line-soft); } .prog-cols { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.3rem, 3vw, 2.4rem); } .prog-cols h4, .price-cols h3 { font-family: var(--sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.95rem; } .prog .prog-cols h4 { color: var(--accent); } .prog-cta { margin-top: clamp(1.2rem, 2.4vw, 1.7rem); } /* ============================================================ AVAILABLE DOGS ============================================================ */ .dogs { padding: clamp(3.6rem, 8vw, 6.5rem) 0; } .dog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); } .dog-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(.2,.7,.3,1); } .dog-card:hover { box-shadow: var(--sh-2); transform: translateY(-4px); } /* --z lives on the wrapper so a per-photo .pos-* class can raise it without losing to this rule's specificity */ .dog-photo { --z: 1; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone); } .dog-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z)); transition: transform 0.7s cubic-bezier(.2,.7,.3,1); } .dog-card:hover .dog-photo img { transform: scale(calc(var(--z) * 1.045)); } .pos-6 { object-position: 50% 16%; } .pos-7 { object-position: 56% 42%; } .pos-8 { object-position: 50% 20%; } /* a tight head crop, so this card and the hero read as two deliberate framings of the same portrait rather than a repeat */ .pos-9 { --z: 1.4; transform-origin: 46% 24%; } .dog-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(36, 27, 25, 0.42) 0%, rgba(36, 27, 25, 0) 46%); } .dog-role { position: absolute; left: 0.85rem; bottom: 0.85rem; z-index: 2; background: var(--red-mid); color: #FFF8F1; font-size: 0.735rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; padding: 0.42rem 0.8rem; border-radius: 999px; box-shadow: 0 6px 16px rgba(36, 27, 25, 0.28); } /* honest labelling lives in one plain sentence under the grid (.dogs-photo-note), not in four dark pills fighting the four red role pills */ /* flex column so all four CTAs share a baseline whatever the copy length */ .dog-body { padding: 1.25rem 1.35rem 1.35rem; flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .dog-body h3 { font-size: 1.42rem; margin-bottom: 0.3rem; } .dog-body p { font-size: 0.925rem; color: var(--muted); margin-bottom: 0.5rem; } .dog-body .cta-link { margin-top: auto; } .dogs-note { margin-top: clamp(1.6rem, 3vw, 2.4rem); font-size: 0.98rem; color: var(--muted); text-align: center; } .dogs-note a { font-weight: 800; } /* the photography disclosure, said in plain words a family can read */ .dogs-photo-note { margin-top: clamp(1.5rem, 2.8vw, 2.2rem); font-family: var(--serif); font-style: italic; font-size: 0.95rem; line-height: 1.5; color: var(--muted); text-align: center; } .dogs-photo-note + .dogs-note { margin-top: 0.55rem; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); max-width: 34rem; margin-left: auto; margin-right: auto; } /* ============================================================ PROCESS ============================================================ */ .process { background: var(--paper); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: clamp(3.6rem, 8vw, 6.5rem) 0; } .process-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .steps { position: relative; padding-left: 2.5rem; display: grid; gap: clamp(1.6rem, 3vw, 2.3rem); } .steps::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--red) 0%, rgba(214, 40, 40, 0.18) 88%, transparent 100%); border-radius: 2px; } .step { position: relative; } .step::before { content: ""; position: absolute; left: -2.5rem; top: 0.28em; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 2px solid var(--red); box-shadow: 0 0 0 5px var(--paper); } .step::after { content: ""; position: absolute; left: calc(-2.5rem + 6px); top: calc(0.28em + 6px); width: 8px; height: 8px; border-radius: 50%; background: var(--red); transition: transform 0.3s ease; } .step h3 { margin-bottom: 0.45rem; font-size: clamp(1.18rem, 1.7vw, 1.4rem); } .step p { color: var(--muted); max-width: 38rem; font-size: 1rem; } .process-aside { position: sticky; top: 96px; display: grid; gap: 1.1rem; } .access-card { background: var(--cream); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); } .access-card figcaption { padding: 1.3rem 1.35rem 1.45rem; } .access-card h3 { font-size: 1.22rem; margin-bottom: 0.5rem; } .access-card p { font-size: 0.93rem; color: var(--muted); } .aside-cta { background: var(--bone); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 1.15rem 1.25rem 1.25rem; text-align: center; } .aside-cta p { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin-bottom: 0.85rem; } /* ============================================================ INVESTMENT ============================================================ */ .invest { background: var(--ink); padding: clamp(3.6rem, 8vw, 6.5rem) 0; position: relative; overflow: hidden; } .invest::before { content: ""; position: absolute; top: -22%; right: -10%; width: 44vw; height: 44vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle at 50% 50%, rgba(214, 40, 40, 0.17), rgba(214, 40, 40, 0) 68%); filter: blur(50px); pointer-events: none; } .invest .wrap { position: relative; } .invest-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(1.2rem, 2.6vw, 2rem); align-items: start; } .price-card { background: linear-gradient(165deg, rgba(251, 245, 234, 0.07), rgba(251, 245, 234, 0.03)); border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(1.6rem, 3.2vw, 2.7rem); } .price-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #9CC8C4; margin-bottom: 0.9rem; } .price { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 3.5rem); color: var(--cream); line-height: 1.02; letter-spacing: -0.02em; padding-bottom: 1.6rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--line-light); } .price-to { font-family: var(--sans); font-size: 0.34em; font-weight: 700; color: #B9A99A; letter-spacing: 0.06em; vertical-align: 0.35em; padding: 0 0.25rem; } .price-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.3rem, 3vw, 2.4rem); } .price-cols h3 { color: #9CC8C4; } /* lists sitting on the ink band read light */ .price-card .tasks li { color: #D9CDBD; } .price-card .tasks li::before { background-image: var(--paw-light); } .pay-stack { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); } .pay-card { background: rgba(251, 245, 234, 0.05); border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.6vw, 1.9rem); } .pay-card h3 { color: var(--cream); font-size: 1.3rem; margin-bottom: 1.1rem; } .pay-card .tasks { margin-bottom: 1.5rem; } /* The seal sits above the copy, not beside it. Beside it, inside the 0.75fr column of the desktop invest grid, the copy column was about 200px wide, which broke the heading over two lines and the paragraph into four ragged ones. The 1080px block puts them side by side again, because there the invest grid is one column and the card has the width for it. */ .obed-card { display: grid; grid-template-columns: 1fr; gap: 0.95rem; align-items: center; background: var(--cream); border-radius: var(--r-lg); padding: clamp(1.3rem, 2.4vw, 1.7rem); isolation: isolate; } .obed-card h3 { font-size: 1.14rem; margin-bottom: 0.35rem; } .obed-card p { font-size: 0.92rem; color: var(--muted); } .obed-price { font-family: var(--serif); font-size: 1.08rem !important; color: var(--red-deep) !important; font-weight: 600; margin-bottom: 0.4rem; } .obed-price span { display: block; font-family: var(--sans); font-size: 0.78rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 0.15rem; } .invest-note { margin-top: clamp(1.6rem, 3vw, 2.3rem); font-size: 0.93rem; color: #B9A99A; text-align: center; } /* ============================================================ NATIONWIDE ============================================================ */ .reach { background: var(--bone); padding: clamp(3.6rem, 8vw, 6.5rem) 0; } .reach-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .reach-copy h2 { margin-bottom: 1.1rem; } .reach-copy h2 em { color: var(--red-deep); } .reach-list { display: grid; gap: 0.9rem; margin: 1.9rem 0 2.1rem; } .reach-list li { display: grid; grid-template-columns: 11.5rem 1fr; gap: 0.6rem; align-items: baseline; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line-soft); } .reach-list strong { font-family: var(--sans); font-size: 0.73rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); } .reach-list span { color: var(--ink-3); font-size: 0.99rem; } /* the map art is a black silhouette on white: multiply drops the white into the bone canvas, and the negative margins trim its dead bands. No isolation here on purpose, the section background is the backdrop. */ .reach-map { position: relative; text-align: center; /* its own bone backdrop so multiply holds even while the reveal transform makes this figure a stacking context */ background: var(--bone); overflow: hidden; } .reach-map img { width: 100%; margin: -8% 0 -11%; mix-blend-mode: multiply; } /* the art is a pure black silhouette, which is colder and harder than anything else in the palette. A real duotone instead of a faded one: lighten takes the per-channel maximum, so #000 lifts to the palette's warm charcoal (#241B19) while the red paws (214,40,40) and the bone ground are left exactly where they are, every channel of both already sitting above the ink. */ .reach-map::after { content: ""; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: lighten; pointer-events: none; } .reach-map figcaption { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--ink-3); margin-top: 0.4rem; } /* ============================================================ CONTACT ============================================================ */ .contact { position: relative; padding: clamp(3.6rem, 8vw, 6.5rem) 0; background: radial-gradient(80% 60% at 12% 0%, rgba(214, 40, 40, 0.08), rgba(214, 40, 40, 0) 70%), radial-gradient(70% 60% at 100% 100%, rgba(47, 107, 110, 0.09), rgba(47, 107, 110, 0) 70%), var(--cream); } .contact-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .contact-copy h2 { margin-bottom: 1.1rem; } .contact-list { display: grid; gap: 0.35rem; margin-top: 2.1rem; } .contact-list li { display: grid; grid-template-columns: 46px 1fr; gap: 0.9rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); } .contact-list li:last-child { border-bottom: 0; } .ci { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--paper); border: 1px solid var(--line); color: var(--red-deep); } .ci svg { width: 21px; height: 21px; } .ct { display: grid; gap: 0.1rem; } .ct strong { font-family: var(--sans); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .ct a, .ct span:not(strong) { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.2; } /* the 44px hit area is centred, so a border-bottom would sit ~13px under the digits and read as a stray rule. The underline goes on the text itself, which also matches the same number in .form-fine. */ .ct a { display: inline-flex; align-items: center; align-self: start; justify-self: start; width: max-content; min-height: 44px; text-decoration: underline; text-decoration-color: rgba(214, 40, 40, 0.32); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 0.2s ease; } .ct a:hover { text-decoration-color: var(--red); } /* ---------- form ---------- */ .form-card { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.5rem, 3.2vw, 2.4rem); box-shadow: var(--sh-2); display: grid; gap: 1.05rem; } .form-card-head { margin-bottom: 0.2rem; } .form-card-head h3 { font-size: 1.55rem; margin-bottom: 0.35rem; } .form-card-head p { font-size: 0.93rem; color: var(--muted); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; } .field { display: grid; gap: 0.4rem; } .field label { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .field .opt { text-transform: none; letter-spacing: 0.02em; color: var(--muted); font-weight: 600; } .field input, .field select, .field textarea { font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.8rem 0.9rem; min-height: 48px; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .field textarea { resize: vertical; min-height: 118px; line-height: 1.55; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A54' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 5.5 6-5.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 18px; padding-right: 2.5rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--paper-2); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47, 107, 110, 0.16); } /* the textarea placeholder carries the only guidance on what to write, so it is held to AA on the cream field (6.0:1) */ .field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; } .form-fine { font-size: 0.84rem; color: var(--muted); text-align: center; } .form-fine a { font-weight: 800; white-space: nowrap; } .form-success { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(2rem, 4vw, 3rem); box-shadow: var(--sh-2); text-align: center; } .form-success:focus { outline: none; } .form-success-glyph { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 1.2rem; border-radius: 50%; background: var(--red-tint); color: var(--red-deep); border: 1px solid rgba(214, 40, 40, 0.24); } .form-success h3 { font-size: 1.65rem; margin-bottom: 0.6rem; } .form-success p { color: var(--muted); max-width: 30rem; margin: 0 auto; } .form-success .form-demo-note { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); font-size: 0.82rem; color: var(--muted); } /* ============================================================ FOOTER ============================================================ */ /* the bottom padding is 5rem, not 2rem, because the demo widget's fixed pill (.srw-fab, bottom:20px on desktop and 12px under 480px, about 42px tall) owns the band the legal line would otherwise sit in. 5rem clears it at every width. */ .site-footer { background: var(--ink); color: #B9A99A; padding: clamp(2.8rem, 6vw, 4.5rem) 0 5rem; border-top: 3px solid var(--red-mid); } /* the column gutter is generous, the row gutter is not: .footer-copy is a row of its own spanning all three columns, so a 56px row gap plus its own margin was opening a 90px+ dead band under the tallest column at desktop widths */ .footer-in { display: grid; grid-template-columns: 1.5fr 0.75fr 0.9fr; column-gap: clamp(1.8rem, 4vw, 3.5rem); row-gap: clamp(1.5rem, 3vw, 2.2rem); } .footer-brand .brand { color: var(--cream); } .footer-brand .brand-text em { color: #9F8E82; text-transform: none; letter-spacing: 0.02em; font-size: 0.775rem; } .footer-note { font-size: 0.895rem; margin-top: 1.1rem; max-width: 26rem; line-height: 1.6; } /* the brand column is the shortest of the three, and the one place in the footer without a call to action: the pill closes the ragged bottom and earns its keep */ .footer-cta { margin-top: 1.3rem; } /* gap 0: the 44px hit area on each link already carries the rhythm */ .footer-nav, .footer-contact { display: grid; gap: 0; align-content: start; } .footer-nav h2, .footer-contact h2 { font-family: var(--sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #9CC8C4; margin-bottom: 0.35rem; } .footer-nav a, .footer-contact a, .footer-contact span { font-size: 0.94rem; color: #D9CDBD; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: color 0.2s ease; } /* inline sentence links get a comfortable hit area (vertical padding on an inline box still grows the pointer target to ~49px) with no horizontal padding, so the punctuation after the number stays welded to it */ .dogs-note a, .form-fine a, .form-demo-note a { padding: 0.85rem 0; } .form-demo-note a { font-weight: 800; white-space: nowrap; } .footer-nav a:hover, .footer-contact a:hover { color: var(--cream); } .footer-copy { grid-column: 1 / -1; margin-top: 0; padding-top: 1.4rem; border-top: 1px solid var(--line-light); font-size: 0.83rem; color: #B9A99A; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1080px) { .prog, .prog:nth-child(even) { grid-template-columns: 150px 1fr; } .prog:nth-child(even) .prog-badge { order: 0; } .plate { max-width: 150px; padding: 10px; } /* the invest grid is single column here, so the seal finally has room */ .plate-sm { max-width: 176px; padding: 14px; } .obed-card { grid-template-columns: 176px 1fr; } .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: -1.6rem; } .trust-item { padding-bottom: 1.6rem; } .trust-item:nth-child(3) { padding-right: 0; } .trust-item:nth-child(4) { border-left: 0; padding-left: 0; } .trust-item:last-child { padding-right: clamp(0.9rem, 1.8vw, 1.6rem); } .dog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } .process-grid { grid-template-columns: 1fr; } .process-aside { position: static; grid-template-columns: 1fr 1fr; align-items: start; } .invest-grid { grid-template-columns: 1fr; } } /* ---- header: the drawer takes over well before the bar can collide ---- The five nav links plus the call pill plus the brand need roughly 945px of incompressible width, and the wrap only offers min(1220,W) - 2*pad, which crosses over around 1026px. Handing the nav to the drawer at 1040px keeps a real margin, and the section layouts below stay on their own 900px breakpoint so the two-column hero survives on a 1024px tablet. */ @media (max-width: 1040px) { .nav-toggle { display: inline-flex; } .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--cream); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); box-shadow: 0 18px 40px rgba(36, 27, 25, 0.12); padding: 0.5rem var(--pad) 1.15rem; display: none; } .nav.open { display: flex; } .nav > a:not(.btn) { min-height: 52px; font-size: 1.02rem; border-bottom: 1px solid var(--line-soft); white-space: normal; } .nav > a:not(.btn)::after { display: none; } /* the drawer's own call button is redundant once .header-call is on screen */ .nav-call { display: none; } .header-call { display: inline-flex; } .header-in { position: relative; gap: 0.6rem; } } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 2.6rem; } .hero-art { max-width: 460px; margin: 0 auto; width: 100%; } .inset-card { left: auto; right: -2%; bottom: -4%; } .story-grid { grid-template-columns: 1fr; gap: 1.6rem; } .sec-head-row { grid-template-columns: 1fr; align-items: start; gap: 1.2rem; } .reach-grid, .contact-grid { grid-template-columns: 1fr; } .reach-map { max-width: 560px; margin: 0 auto; } .footer-in { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 680px) { body { font-size: 1.02rem; } .hero { padding-top: 1.6rem; } /* stay wrapped inline with the red dot separators: stacking these two lines cost roughly 90px of above-fold space and pushed the dog below the fold */ .kicker { --sep-gap: 0.45rem; letter-spacing: 0.11em; font-size: 0.74rem; margin-bottom: 1.1rem; } .hero-fine { --sep-gap: 0.45rem; font-size: 0.84rem; padding-top: 1.1rem; } /* tightened rhythm buys back the pixels the dog's face needs above the fold */ .hero-title { margin-bottom: 1.1rem; } .hero-sub { margin-bottom: 1.5rem; } .hero-ctas { margin-bottom: 1.35rem; gap: 0.7rem; } .hero-title span:nth-child(3) { font-size: 0.68em; } .hero-ctas .btn { width: 100%; } /* two-up: the dividers are gone here, so the gutter is the only separation and it has to be declared, not inherited from the 3-up block's column-gap of 0 */ .trust-grid { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; row-gap: 0; margin-bottom: -1.8rem; } .trust-item, .trust-item:last-child { border-left: 0; padding: 0 0 1.8rem; } .prog, .prog:nth-child(even) { grid-template-columns: 1fr; gap: 1.4rem; } .prog-badge { justify-items: start; } .plate { max-width: 128px; padding: 8px; } .prog-cols { grid-template-columns: 1fr; gap: 1.5rem; } .price-cols { grid-template-columns: 1fr; } .dog-grid { grid-template-columns: 1fr; } .dog-photo { aspect-ratio: 3 / 2; } .pos-6, .pos-8 { object-position: 50% 22%; } /* the head crop is what keeps this card from being the hero photograph a second time, so --z stays at 1.4 here: only the framing point moves */ .pos-9 { object-position: 50% 20%; } .process-aside { grid-template-columns: 1fr; } .steps { padding-left: 2.1rem; } .step::before { left: -2.1rem; } .step::after { left: calc(-2.1rem + 6px); } .obed-card { grid-template-columns: 1fr; gap: 0.9rem; } .plate-sm { max-width: 152px; padding: 12px; } .reach-list li { grid-template-columns: 1fr; gap: 0.15rem; } .reach-map figcaption { margin-top: -0.5rem; } .field-row { grid-template-columns: 1fr; } .footer-in { grid-template-columns: 1fr; } .inset-card { width: min(240px, 78%); right: 0; } } /* ---- the compact call pill starts well above the smallest phone ---- Measured: the full pill is 153px wide, and with the toggle and the two 0.6rem gaps the brand is left under 200px from 421px down, so "Service Dog Experts" broke onto two lines and the 74px row grew to 78px on every 430px phone (15 Plus, 14/15/16 Pro Max) and every 480px landscape. Folding the number into its icon returns roughly 107px, which holds the one-line row from 320px to 520px, and above that the full pill fits again. */ @media (max-width: 520px) { .brand-text strong { font-size: 1.04rem; } /* the number folds into the icon, the aria-label keeps the name intact */ .header-call { width: 46px; padding: 0; justify-content: center; } .header-call-num { display: none; } } @media (max-width: 420px) { /* two-up all the way down: one column turned these five short headings into a 1,100px unbroken dark band, which is a wall, not a trust strip. The gutter is set once in the 680px block so it never inverts by viewport. */ .trust-item h3 { font-size: 1rem; } .trust-item p { font-size: 0.85rem; } } /* ---- the price range has to hold one line ---- Measured at 390px: the price card offers 302px of text width, and at the old 2.2rem floor "$18,000 to $25,000" needs about 298px, so it broke as "$18,000 to" / "$25,000" and stranded the small "to" at the end of line one, at the exact moment the number has to feel calm. 7.6vw puts it at 1.85rem on a 390px screen and holds one line down to 320px, where the floor takes over. */ @media (max-width: 400px) { .price { font-size: clamp(1.6rem, 7.6vw, 2.2rem); } } /* ============================================================ REDUCED MOTION, the final word ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .hi, .anim .hi, .rv, .anim .rv, .anim .rv.rv-in { opacity: 1 !important; transform: none !important; animation: none !important; } .amb { transform: none !important; } .arch-img { transform: none !important; } } html { scroll-behavior: smooth; } section[id], #top { scroll-margin-top: 88px; }