/* GENERATED by tools/generator for Niagara Deck Washing Guide (deck-washing). Do not hand-edit. */ :root{--base:#241A12;--base-mid:#36281C;--base-soft:#5A4836;--accent:#B5763A;--accent-light:#D49A5C;--accent-pale:#F3E7D9;--warm:#3E8C86;--warm-deep:#2C6661;--cloud:#F7F4F0;--cloud-deep:#EEE7DE;--paper:#FBFAF7;--ink:#211913;--ink-soft:#544636;--ink-faint:#897664;--line:#E2D8CC;--accent-rgb:181,118,58;--accent-light-rgb:212,154,92;--warm-rgb:62,140,134;--hero-ink:#ECE0D2;--hero-ink-rgb:236,224,210;--art-gradient:linear-gradient(165deg,#5A4836 0%,#36281C 45%,#241A12 100%);--font-display:"Sora","Segoe UI",sans-serif;--font-body:"Inter","Segoe UI",sans-serif;--white:#FFFFFF;--maxw:1160px;--radius-xs:4px;--radius-s:8px;--radius-m:12px;--radius-l:20px;--radius-pill:999px;--radius:var(--radius-m);--radius-lg:var(--radius-l);--shadow:0 20px 56px -24px rgba(16,24,34,.42);--shadow-soft:0 8px 28px -14px rgba(16,24,34,.30);--ease:cubic-bezier(.22,.61,.36,1);--section-pad-dominant:var(--space-5xl) 0;--section-pad-standard:var(--space-4xl) 0;--section-pad-dense:var(--space-3xl) 0} @supports (color: oklch(0 0 0)){:root{--base:oklch(22.75% 0.0217 60.06);--base-mid:oklch(28.96% 0.0294 61.86);--base-soft:oklch(41.54% 0.0375 66.49);--accent:oklch(62.05% 0.1095 61.94);--accent-light:oklch(72.91% 0.1052 66.72);--accent-pale:oklch(93.37% 0.0228 71.78);--warm:oklch(58.97% 0.0771 188.49);--warm-deep:oklch(47.02% 0.0611 187.73);--cloud:oklch(96.84% 0.0062 75.41);--cloud-deep:oklch(93.1% 0.0143 74.42);--paper:oklch(98.5% 0.0041 91.45);--ink:oklch(22.11% 0.0171 58.6);--ink-soft:oklch(40.4% 0.0318 70.47);--ink-faint:oklch(57.85% 0.0356 65.49);--line:oklch(88.69% 0.0196 72.56);--hero-ink:oklch(91.25% 0.0229 71.77);--white:oklch(100% 0 0)}} /* Utopia fluid scales (Major Third 1.25, 320->1280px). Type steps map: hero h1 uses a bespoke larger clamp ABOVE the scale; page-hero h1->step-4; every section h2 (.section-head, about-copy, faq-intro, contact-copy)->step-3; body->step-0. (prose h2 keeps its own bespoke clamp.) Space scale drives the section-density grammar in :root above. */ :root{ --step--1:clamp(0.80rem,0.74rem + 0.30vw,1.00rem); --step-0:clamp(1.00rem,0.93rem + 0.38vw,1.25rem); --step-1:clamp(1.20rem,1.09rem + 0.58vw,1.56rem); --step-2:clamp(1.44rem,1.28rem + 0.80vw,1.95rem); --step-3:clamp(1.73rem,1.52rem + 1.06vw,2.44rem); --step-4:clamp(2.07rem,1.79rem + 1.42vw,3.05rem); --step-5:clamp(2.49rem,2.11rem + 1.91vw,3.82rem); --space-2xs:clamp(0.25rem,0.23rem + 0.10vw,0.31rem); --space-xs:clamp(0.50rem,0.46rem + 0.19vw,0.63rem); --space-s:clamp(0.75rem,0.70rem + 0.28vw,0.94rem); --space-m:clamp(1.00rem,0.93rem + 0.38vw,1.25rem); --space-l:clamp(1.50rem,1.39rem + 0.56vw,1.88rem); --space-xl:clamp(2.00rem,1.85rem + 0.75vw,2.50rem); --space-2xl:clamp(3.00rem,2.78rem + 1.13vw,3.75rem); --space-3xl:clamp(4.00rem,3.71rem + 1.50vw,5.00rem); --space-4xl:clamp(5.00rem,4.63rem + 1.88vw,6.25rem); --space-5xl:clamp(7.00rem,6.49rem + 2.63vw,8.75rem); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;font-family:var(--font-body);background:var(--paper);color:var(--ink); line-height:1.65;font-size:var(--step-0);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} a{color:inherit} h1,h2,h3{font-family:var(--font-display);line-height:1.12;letter-spacing:-.015em;margin:0} p{margin:0} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} .skip-link{position:absolute;left:-999px;top:0;z-index:999;background:var(--accent);color:var(--white);padding:10px 18px;border-radius:0 0 10px 0;font-weight:600} .skip-link:focus{left:0} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:5px} /* ---- Demo-safety markers (dispatch 2026-06-09T152330Z-002) ---- */ /* Persistent demo banner: first element inside , server-rendered. High-contrast, full-width, sticky-top. Survives JS-off (legal/safety notice). */ .lw-demo-banner{position:sticky;top:0;z-index:200;width:100%;background:#1a1a2e;color:#e8e8f0;font-size:.82rem;font-weight:600;line-height:1.5;text-align:center;padding:9px 20px;border-bottom:2px solid #4a4aff} .lw-demo-banner a{color:#a0a0ff;text-decoration:underline;text-underline-offset:2px} .lw-demo-banner a:hover{color:#c8c8ff} /* Demo form notice: top of the lead form, before the title. */ .lead-demo-note{background:#fffbe6;border:1.5px solid #d4a800;border-radius:var(--radius-s);padding:12px 16px;font-size:.86rem;color:#5a4400;line-height:1.55;margin:0 0 18px} /* PIPEDA Gate-3 pre-submit disclosure: directly above the submit button. Legible, not fine-print: full body size, left-ruled, own contrast-checked colour. */ .lead-pre-submit{background:var(--cloud);border-left:3px solid var(--accent);border-radius:var(--radius-s);padding:12px 16px;font-size:.9rem;color:var(--base-mid);line-height:1.55;margin:0 0 16px} .lead-pre-submit a{color:var(--accent);font-weight:600} /* Lead-in label above the Living Websites contact list. */ .contact-lw-note{font-size:.9rem;color:var(--ink-soft);font-weight:600;margin:0 0 12px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:0;font-family:var(--font-body);font-weight:600;font-size:.96rem;padding:13px 24px;border-radius:var(--radius-s);text-decoration:none;transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);line-height:1} .btn-primary{background:var(--accent);color:var(--white);box-shadow:0 8px 22px -10px rgba(var(--accent-rgb),.7)} .btn-primary:hover{background:var(--base-mid);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--base);box-shadow:inset 0 0 0 1.5px var(--base-soft)} .btn-ghost:hover{background:var(--cloud-deep);transform:translateY(-2px)} /* Ghost button on a dark --base background (hero / page-hero / services): the default color:var(--base) renders text invisible against its own background until hover. Re-tone to the hero ink so it reads at rest. */ .hero .btn-ghost,.page-hero .btn-ghost,.services .btn-ghost{color:var(--hero-ink);box-shadow:inset 0 0 0 1.5px rgba(var(--hero-ink-rgb),.45)} .hero .btn-ghost:hover,.page-hero .btn-ghost:hover,.services .btn-ghost:hover{background:rgba(var(--hero-ink-rgb),.16);color:var(--white)} .btn-block{width:100%} .site-header{position:sticky;top:0;z-index:100;background:rgba(251,253,254,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .header-inner{display:flex;align-items:center;justify-content:space-between;min-height:68px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--base)} .brand-mark{width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center} .brand-text{display:flex;flex-direction:column;line-height:1} .brand-text strong{font-family:var(--font-display);font-size:1.12rem;color:var(--base);letter-spacing:-.02em;font-weight:700} .brand-text em{font-style:normal;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:3px} .main-nav{display:flex;align-items:center} .nav-menu{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0} .nav-menu a{text-decoration:none;color:var(--base-mid);font-weight:600;font-size:.92rem;padding:9px 12px;border-radius:8px;transition:background .18s var(--ease),color .18s} .nav-menu a:not(.nav-cta):hover{background:var(--cloud-deep);color:var(--base)} .nav-cta{background:var(--warm);color:var(--base)!important;font-weight:600;margin-left:8px;padding:10px 18px} .nav-cta:hover{background:var(--warm-deep)!important} .nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;border-radius:8px} .nav-toggle span{width:24px;height:2.5px;background:var(--base);border-radius:2px;transition:.25s var(--ease)} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .hero{background:var(--base);color:var(--hero-ink);padding:64px 0 0;overflow:hidden;position:relative} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(165deg,rgba(var(--accent-light-rgb),.14) 0%,transparent 55%)} .hero-grid{display:grid;grid-template-columns:1fr .86fr;gap:48px;align-items:end;position:relative;z-index:1} .hero-copy{padding-bottom:64px} .eyebrow{display:inline-block;font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--warm);margin:0 0 20px} .hero h1{font-size:clamp(2.5rem,1.9rem + 3vw,4rem);color:var(--white);font-weight:700;margin-bottom:20px;max-width:16ch} .hero h1 .hl{color:var(--accent-light)} .hero-lede{font-size:1.12rem;color:rgba(var(--hero-ink-rgb),.82);max-width:42ch;margin:0 0 28px;font-weight:300} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px} .hero-trust{list-style:none;margin:0;padding:0;display:flex;gap:28px;flex-wrap:wrap} .hero-trust li{display:flex;flex-direction:column} .hero-trust strong{font-family:var(--font-display);font-size:1.45rem;color:var(--white);line-height:1} .hero-trust span{font-size:.78rem;color:rgba(var(--hero-ink-rgb),.6);margin-top:5px} .hero-art{position:relative;margin:0;align-self:end} .art-wrap{position:relative;border-radius:var(--radius-l) var(--radius-l) 0 0;overflow:hidden;box-shadow:var(--shadow)} .art-panel{width:100%;aspect-ratio:4/5;background:var(--art-gradient);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:relative} .art-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 36%,rgba(var(--accent-light-rgb),.12),transparent 60%)} .art-glyph,.art-plate{position:relative;z-index:1} .art-plate{font-family:var(--font-display);font-size:.9rem;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:.16em;text-transform:uppercase} .art-photo{display:block;width:100%;aspect-ratio:4/5;object-fit:cover} .art-wrap:has(.art-photo)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to top,rgba(15,23,20,.5),transparent);pointer-events:none} .art-wrap .art-photo+.art-plate{position:absolute;left:18px;bottom:15px;z-index:2;color:rgba(255,255,255,.94)} .offer-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .offer-media:has(.offer-photo) .offer-media-inner{position:relative;z-index:1} .offer-media:has(.offer-photo)::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,rgba(15,23,20,.30),transparent 42%);pointer-events:none} .status-tag{position:absolute;bottom:20px;left:16px;background:rgba(251,253,254,.95);color:var(--base);font-weight:600;font-size:.85rem;padding:9px 15px;border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);display:inline-flex;align-items:center;gap:9px;backdrop-filter:blur(6px)} .live-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.28)} #lw-live{display:inline-block;font-size:.88rem;color:rgba(var(--hero-ink-rgb),.8);font-style:italic;margin-top:16px;padding:8px 14px;background:rgba(255,255,255,.06);border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.14)} .page-hero{background:var(--base);color:var(--hero-ink);padding:52px 0 56px;position:relative;overflow:hidden} .page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(165deg,rgba(var(--accent-light-rgb),.14) 0%,transparent 55%)} .page-hero .wrap{position:relative;z-index:1} .page-hero h1{font-size:var(--step-4);color:var(--white);font-weight:700;max-width:20ch;margin-bottom:16px} .page-hero h1 .hl{color:var(--accent-light)} .page-hero .lede{font-size:1.1rem;color:rgba(var(--hero-ink-rgb),.82);max-width:54ch;font-weight:300;margin-bottom:20px} .crumb{font-size:.82rem;color:rgba(var(--hero-ink-rgb),.6);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap} .crumb a{color:rgba(var(--hero-ink-rgb),.78);text-decoration:none} .crumb a:hover{color:var(--accent-light)} .crumb .sep{color:rgba(255,255,255,.25)} .kicker{font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap} .section-head h2{font-size:var(--step-3);color:var(--base)} .offerings{background:var(--paper);padding:var(--section-pad-standard)} .offerings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .offer-card{background:var(--white);border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);transition:transform .25s var(--ease),box-shadow .25s var(--ease);display:flex;flex-direction:column} .offer-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .offer-media{width:100%;aspect-ratio:3/2;position:relative;overflow:hidden} .offer-media-inner{width:100%;height:100%;display:flex;align-items:flex-start;justify-content:space-between;padding:14px} .offer-badge{background:var(--white);color:var(--base);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-pill)} .offer-glyph{color:rgba(255,255,255,.92)} .offer-body{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column;gap:10px} .offer-title{font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:var(--base)} .offer-price{font-size:.95rem;font-weight:600;color:var(--warm-deep)} .offer-price span{color:var(--ink-faint);font-weight:300;font-size:.84rem} .offer-desc{font-size:.93rem;color:var(--ink-soft);font-weight:300;line-height:1.6} .offer-cta{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} .offer-cta a{font-size:.9rem;font-weight:600;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap .2s var(--ease),color .2s} .offer-cta a:hover{gap:10px;color:var(--base)} .offer-featured{grid-column:span 2} .offer-featured .offer-media{aspect-ratio:16/7} .offer-featured .offer-title{font-size:1.5rem} /* ---- NEW v1.1+ BLOCK: before/after gallery (power-washing visual proof; no , pure CSS) ---- */ .ba-section{background:var(--cloud-deep);padding:var(--section-pad-dense)} .ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .ba-card{border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);background:var(--white)} .ba-visual{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:16/9;position:relative} .ba-half{position:relative;display:flex;align-items:flex-end;padding:12px} .ba-half span{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(16,34,43,.55);padding:4px 9px;border-radius:var(--radius-pill);backdrop-filter:blur(3px)} .ba-before{background:linear-gradient(160deg,#8A9A86 0%,#6E7A5E 55%,#4A5238 100%)} .ba-after{background:linear-gradient(160deg,#BFE6EF 0%,#7FCEE0 55%,#1C97B8 100%)} .ba-visual::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:var(--white);box-shadow:0 0 0 1px var(--line)} .ba-cap{padding:16px 18px 18px} .ba-cap h3{font-size:1.02rem;color:var(--base);margin-bottom:6px} .ba-cap p{font-size:.9rem;color:var(--ink-soft);font-weight:300} .services{background:var(--base);color:var(--hero-ink);padding:var(--section-pad-dominant)} .services .kicker{color:var(--warm)} .services .section-head h2{color:var(--white)} .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .service-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-m);padding:28px 26px;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)} .service-card:hover{background:rgba(255,255,255,.1);border-color:rgba(var(--accent-light-rgb),.5);transform:translateY(-4px)} .service-icon{width:46px;height:46px;border-radius:var(--radius-m);background:rgba(var(--accent-light-rgb),.18);display:grid;place-items:center;margin-bottom:16px} .service-card h3{font-size:1.12rem;color:var(--white);margin-bottom:10px} .service-card p{color:rgba(var(--hero-ink-rgb),.74);font-size:.95rem;line-height:1.6} .prose-section{background:var(--paper);padding:var(--section-pad-dense)} .prose{max-width:760px;margin:0 auto} .prose h2{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--base);margin:40px 0 14px} .prose h2:first-child{margin-top:0} .prose h3{font-size:1.2rem;color:var(--base-mid);margin:26px 0 10px} .prose p{color:var(--ink-soft);font-size:1.04rem;font-weight:300;margin-bottom:16px} .prose ul{margin:0 0 18px;padding-left:0;list-style:none} .prose li{color:var(--ink-soft);font-size:1.02rem;font-weight:300;padding:8px 0 8px 30px;position:relative;border-bottom:1px solid var(--line)} .prose li::before{content:"";position:absolute;left:4px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--accent)} .prose strong{color:var(--base);font-weight:600} .prose .lead{font-size:1.14rem;color:var(--ink);font-weight:300;margin-bottom:24px} .callout{background:var(--accent-pale);box-shadow:inset 4px 0 0 var(--accent);border-radius:var(--radius-m);padding:20px 24px;margin:24px 0;color:var(--base-mid);font-size:.98rem;font-weight:300} .callout strong{color:var(--base)} .price-table{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:.98rem} .price-table th,.price-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)} .price-table th{font-family:var(--font-display);font-weight:600;color:var(--base);font-size:.92rem} .price-table td{color:var(--ink-soft);font-weight:300} .price-table td:last-child{color:var(--warm-deep);font-weight:600;white-space:nowrap} /* Responsive tables: a price-table's intrinsic min-width (cell padding + the nowrap last column) can exceed a phone viewport and widen the whole page. Wrap it so the table scrolls within its own box instead (mobile shift fix). */ .table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 24px} .table-scroll .price-table{margin:0} .about{background:var(--cloud-deep);padding:var(--section-pad-dense)} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .about-copy .kicker{color:var(--accent)} .about-copy h2{font-size:var(--step-3);color:var(--base);margin-bottom:24px;max-width:18ch} .about-copy p{color:var(--ink-soft);font-size:1.03rem;margin-bottom:16px;font-weight:300} .about-copy p:last-of-type{margin-bottom:0} .about-copy em{color:var(--accent);font-style:italic} .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .badge{background:var(--white);color:var(--base-mid);font-weight:600;font-size:.82rem;padding:7px 14px;border-radius:var(--radius-pill);border:1px solid var(--line)} .coverage{background:var(--white);border-radius:var(--radius-l);padding:30px 30px 26px;border:1px solid var(--line);box-shadow:var(--shadow-soft)} .coverage h3{font-family:var(--font-display);font-size:1.15rem;color:var(--base);margin-bottom:6px} .coverage>p{font-size:.92rem;color:var(--ink-soft);font-weight:300;margin-bottom:18px} .area-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .area-list li{font-size:.82rem;font-weight:600;color:var(--base-mid);background:var(--accent-pale);border:1px solid rgba(var(--accent-rgb),.22);padding:6px 11px;border-radius:8px} .area-list li a{text-decoration:none;color:inherit} .coverage-note{font-size:.84rem;color:var(--ink-faint);font-weight:300;border-top:1px solid var(--line);padding-top:14px} .notes{background:var(--accent-pale);padding:var(--section-pad-standard)} .notes .kicker{color:var(--accent)} .notes .section-head h2{color:var(--base)} .refresh-badge{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-faint);background:var(--white);padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--line);margin:0} .pulse{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;position:relative} .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:pulseRing 2.4s ease-out infinite} @keyframes pulseRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}} @media (prefers-reduced-motion:reduce){.pulse::after{animation:none}} .notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .note-card{background:var(--white);border-radius:var(--radius-m);padding:26px 24px 22px;border:1px solid var(--line);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;transition:transform .22s var(--ease),box-shadow .22s var(--ease)} .note-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .note-date{font-size:.78rem;color:var(--accent);font-weight:600;letter-spacing:.04em;margin-bottom:10px} .note-card h3{font-size:1.1rem;color:var(--base);margin-bottom:12px;line-height:1.28} .note-card p{color:var(--ink-soft);font-size:.94rem;margin-bottom:18px;font-weight:300} .note-tag{margin-top:auto;font-size:.78rem;font-weight:600;color:var(--accent);letter-spacing:.06em;text-transform:uppercase} /* ---- NEW F33 BLOCK: season report (live marine conditions + in-season-now species board + captain's log; fishing vertical) ---- */ .season-report{background:var(--accent-pale);padding:var(--section-pad-standard)} .season-report .kicker{color:var(--accent)} .season-report .section-head h2{color:var(--base)} .sr-conditions{background:var(--base);color:var(--hero-ink);border-radius:var(--radius-m);padding:16px 22px;margin:0 0 28px;font-size:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:10px;box-shadow:var(--shadow-soft)} .sr-cond-label{font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-light);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:5px 11px;border-radius:var(--radius-pill)} #lw-marine{color:rgba(var(--hero-ink-rgb),.92);font-weight:300} .sr-board-wrap{background:var(--white);border-radius:var(--radius-l);border:1px solid var(--line);box-shadow:var(--shadow-soft);overflow:hidden;margin-bottom:34px} .sr-board{width:100%;border-collapse:collapse;font-size:.96rem} .sr-board th,.sr-board td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line)} .sr-board thead th{font-family:var(--font-display);font-weight:600;color:var(--base);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;background:var(--cloud-deep)} .sr-board tbody tr:last-child td{border-bottom:0} .sr-name{font-weight:600;color:var(--base)} .sr-window,.sr-method{color:var(--ink-soft);font-weight:300} .sr-now{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.04em;padding:4px 11px;border-radius:var(--radius-pill);background:var(--cloud-deep);color:var(--ink-faint);white-space:nowrap} .sr-board tr.in-season{background:var(--accent-pale)} .sr-board tr.in-season .sr-name{color:var(--accent)} .sr-board tr.in-season .sr-now{background:var(--accent);color:var(--white)} .sr-log-head{font-family:var(--font-display);font-size:1.2rem;color:var(--base);margin:0 0 18px} .sr-logs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .sr-log{background:var(--white);border-radius:var(--radius-m);padding:22px 22px 20px;border:1px solid var(--line);border-top:3px solid var(--accent);box-shadow:var(--shadow-soft)} .sr-log-date{font-size:.78rem;color:var(--accent);font-weight:600;letter-spacing:.04em;margin-bottom:10px} .sr-log p:last-child{color:var(--ink-soft);font-size:.94rem;font-weight:300;margin:0} /* living-changelog engine layer: real, dated self-improvement record. Static by construction (no animation) so it is reduced-motion-safe and adds no CWV cost. Inert on any site whose record has no livingLog block. */ .living-log{background:var(--cloud);padding:var(--section-pad-standard)} .living-log .section-head{align-items:flex-start} .ll-stat{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-soft);background:var(--white);border:1px solid var(--line);padding:9px 15px;border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);white-space:nowrap} .ll-stat-label{color:var(--ink-faint)} .ll-stat b{color:var(--base);font-weight:600} .ll-since{color:var(--ink-soft);max-width:60ch;margin:0 0 28px} .ll-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:760px} .ll-entry{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px 22px;box-shadow:var(--shadow-soft)} .ll-when{display:flex;align-items:center;gap:12px;margin:0 0 6px} .ll-when time{color:var(--ink-faint);font-size:.82rem;font-variant-numeric:tabular-nums} .ll-kind{font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-pale);padding:3px 9px;border-radius:var(--radius-pill)} .ll-what{margin:0;color:var(--ink);font-weight:600} .ll-detail{margin:6px 0 0;color:var(--ink-soft);font-size:.95rem} @media (max-width:640px){.ll-stat{white-space:normal}} .faq{background:var(--paper);padding:var(--section-pad-standard)} .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start} .faq-intro .kicker{color:var(--accent)} .faq-intro h2{font-size:var(--step-3);color:var(--base);margin-bottom:18px;max-width:14ch} .faq-intro p{color:var(--ink-soft);font-size:1.02rem;font-weight:300} .faq-list{display:flex;flex-direction:column;gap:12px} .faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-soft);overflow:hidden} .faq-item summary{cursor:pointer;list-style:none;padding:20px 22px;font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--base);display:flex;align-items:center;justify-content:space-between;gap:16px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary .chev{flex:none;width:18px;height:18px;transition:transform .22s var(--ease);color:var(--accent)} .faq-item[open] summary .chev{transform:rotate(180deg)} .faq-item .faq-answer{padding:0 22px 20px;color:var(--ink-soft);font-size:.96rem;font-weight:300;line-height:1.66} .contact{background:var(--cloud-deep);padding:var(--section-pad-dominant)} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start} .contact-copy h2{font-size:var(--step-3);color:var(--base);margin-bottom:18px;max-width:16ch} .contact-copy>p{color:var(--ink-soft);font-size:1.03rem;margin-bottom:24px;font-weight:300} .contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .contact-list li{display:flex;align-items:center;gap:12px;font-size:1rem;font-weight:600;color:var(--base-mid)} .contact-list a{text-decoration:none} .contact-list a:hover{color:var(--accent);text-decoration:underline} .ci{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--white);border-radius:var(--radius-s);border:1px solid var(--line)} .lead-form{background:var(--white);border-radius:var(--radius-l);padding:32px;border:1px solid var(--line);box-shadow:var(--shadow-soft)} .form-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--base);margin:0 0 6px} .form-sub{font-size:.9rem;color:var(--ink-faint);margin:0 0 22px;font-weight:300} .form-field{margin-bottom:16px} .form-field label{display:block;font-weight:600;color:var(--base-mid);font-size:.88rem;margin-bottom:6px} .form-field input,.form-field textarea,.form-field select{width:100%;padding:11px 14px;border-radius:var(--radius-s);border:1.5px solid var(--line);background:var(--cloud);font-family:var(--font-body);font-size:.98rem;color:var(--ink);transition:border-color .18s var(--ease);resize:vertical} .form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--accent);outline:none} .form-success{background:var(--accent-pale);color:var(--base);font-weight:600;padding:12px 16px;border-radius:var(--radius-s);margin-top:14px;font-size:.94rem;border:1px solid rgba(var(--accent-rgb),.32)} .form-error{background:#fdecec;color:#7a1f1f;font-weight:600;padding:12px 16px;border-radius:var(--radius-s);margin-top:14px;font-size:.94rem;border:1px solid #e3b3b3} .form-fine{font-size:.8rem;color:var(--ink-faint);margin-top:12px;text-align:center} /* honeypot: off-screen, never shown to a real user (mirrors main-site .hp) */ .lead-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0} /* PIPEDA consent checkbox: required before submit. */ .lead-consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;font-size:.86rem;color:var(--ink-soft);line-height:1.5;font-weight:300;cursor:pointer} .lead-consent input{width:auto;flex:none;margin-top:3px} .site-footer{background:var(--base);color:rgba(var(--hero-ink-rgb),.62);padding:52px 0 38px} .footer-inner{display:grid;grid-template-columns:1.2fr 1fr 1.3fr;gap:36px;align-items:start} .footer-brand{display:flex;align-items:center;gap:12px} .footer-brand-text strong{display:block;font-family:var(--font-display);color:var(--white);font-size:1.1rem} .footer-brand-text em{font-style:normal;font-size:.78rem;color:var(--warm);letter-spacing:.1em} .footer-nav{display:flex;flex-direction:column;gap:10px} .footer-nav a{text-decoration:none;color:rgba(var(--hero-ink-rgb),.74);font-weight:600;font-size:.9rem;transition:color .18s} .footer-nav a:hover{color:var(--warm)} .footer-legal p{font-size:.84rem;line-height:1.65;margin-bottom:10px} .footer-legal strong{color:var(--white)} .footer-legal .disclaimer{font-size:.78rem;color:rgba(var(--hero-ink-rgb),.45)} .footer-legal .copyright{font-size:.78rem;color:rgba(var(--hero-ink-rgb),.45);margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)} @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;gap:0} .hero-copy{padding-bottom:40px} .hero-art{max-width:360px;margin:0 auto} .about-grid,.contact-grid,.faq-grid{grid-template-columns:1fr;gap:36px} .offerings-grid,.ba-grid{grid-template-columns:repeat(2,1fr)} .offer-featured{grid-column:span 2} .services-grid{grid-template-columns:repeat(2,1fr)} .notes-grid,.sr-logs{grid-template-columns:repeat(2,1fr)} .footer-inner{grid-template-columns:1fr 1fr} } @media (max-width:720px){ .nav-toggle{display:flex} .nav-menu{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 16px 18px;box-shadow:var(--shadow-soft);max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s var(--ease),visibility .3s} .nav-menu.open{max-height:520px;visibility:visible} .nav-menu li{width:100%} .nav-menu a{display:block;padding:13px 12px;border-radius:10px} .nav-cta{margin:8px 0 0;text-align:center} .offerings-grid,.services-grid,.notes-grid,.ba-grid,.sr-logs{grid-template-columns:1fr} .sr-board th:nth-child(3),.sr-board td:nth-child(3){display:none} .offer-featured,.offer-featured .offer-media{grid-column:span 1;aspect-ratio:3/2} .footer-inner{grid-template-columns:1fr;gap:28px} .section-head{flex-direction:column;align-items:flex-start} } @media (max-width:420px){ .hero h1{font-size:2.1rem} .btn{width:100%} .hero-cta{flex-direction:column} } /* signature: numbered-services */ .services-grid{counter-reset:svc}.service-card{position:relative;overflow:hidden;counter-increment:svc}.service-card::before{content:counter(svc,decimal-leading-zero);position:absolute;top:-.18em;right:.12em;font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,9vw,5.5rem);line-height:1;color:rgba(var(--accent-light-rgb),.10);pointer-events:none;z-index:0}.service-card>*{position:relative;z-index:1}