§ 01 Capabilities
) .section-num--light for dark grounds .eyebrow mono uppercase label with a short gold rule; --light, --plain, --boxed (stamp-style box); --brass/--gold alias .lede / .lede--lg larger intro paragraph (muted) .display hero-scale Newsreader heading .h1 .h2 .h3 .h4 heading sizes without semantics .accent italic Newsreader span (redwood on light, gold on dark) .accent--gold / .accent--forest .prose long-form article copy (lists, blockquote, tables, links) .mono IBM Plex Mono with tabular figures .num right-aligned mono figure .dropcap first-letter drop cap for article openings .text-muted / .text-light / .text-redwood / .text-gold / .text-forest / .text-center .text-small / .text-xs / .text-serif / .caps / .tabular RULES .rule 1px hairline (hr or div) .rule--double ledger double rule .rule--gold gold hairline .rule--short 72px accent rule .hairline / .divider (Harbor aliases) BUTTONS & LABELS .btn base (redwood primary, 4px corners) .btn--forest (alias --navy) .btn--gold (alias --brass) .btn--white .btn--outline ghost on light .btn--light ghost on dark .btn--ghost text-style button .btn--sm / .btn--lg / .btn--block / .btn--icon .btn__icon (+ --arrow nudges) .btn-row / .btn-row--center .link-arrow underlined text link with arrow; .link-arrow--light .badge small solid label; --gold, --forest, --parchment, --soft, --light, --success .stamp docket status stamp (mono, boxed): --ok, --due, --pending, --muted, --light .chip / .chip--active / .pill-row HEADER / NAV / FOOTER (copy markup verbatim from index.html) .utility-bar thin forest top bar (collapses when header .is-scrolled; hidden <768px) .utility-bar__inner .utility-bar__note .utility-bar__links .site-header sticky ruled header .site-header__inner .brand / .brand__mark / .brand__name / .brand__tag / .brand--light .nav-toggle .nav .nav__list .nav__cta .nav__phone .nav-backdrop .site-footer forest footer .footer__main .footer__grid .footer__brand .footer__col .footer__bottom .footer__note .footer__legal .social .social__link HERO .hero home hero (forest, tree rings) .hero__photo (faded image slot) .hero__meta ledger meta line above the grid (§ 00 · firm · est.) .hero__grid .hero__copy .hero__title .hero__lede .hero__actions .hero__art .hero__trust ruled figure strip (li > strong + span) .hero__bg absolutely positioned decorative slot .docket-card SIGNATURE "Partner docket" ledger sheet (hero) .docket-card__tab .docket-card__head .docket-card__kicker .docket-card__client .docket-card__rows .docket-card__row (dt/dd) .docket-card__bars .docket-card__table .docket-card__meter .docket-card__date .docket-card__foot .seal round notary-style seal (absolute over a card) .page-hero inner-page banner (forest + rings) .page-hero__inner .breadcrumb .page-hero--image (set --hero-img) --center --split --parchment (light variant) .page-hero__meta row of mono facts under the lede .page-hero__num oversized faint "§" numeral slot (decorative) CARDS .card base paper card (8px corners, hairline, quiet hover) .card--flat / --parchment (alias --sand) / --forest (alias --navy) / --static / --hover / --xl .card__media (--square, --portrait) .card__body (--lg) .card__title .card__text .card__footer .card__link-overlay stretch a link over the card .card__num mono "01" index in the card corner .service-card capability card: .card__num + .icon-badge + h3 + p + .service-card__list + .link-arrow .feature-card compact icon-left feature; --plain, --dark; .feature-card__icon .glass translucent panel for dark grounds; --light .testimonial memo-style quote card .testimonial__re .testimonial__quote (--lg) .testimonial__author .testimonial__avatar .testimonial__name .testimonial__meta; --dark, --parchment .article-card briefing card .article-card__meta .article-card__cat .team-card headshot card .team-card__photo .team-card__role .team-card__creds .team-card__links .value-card numbered principle card .value-card__num .icon-badge 44px square icon tile; --gold, --forest, --redwood, --parchment, --light, --sm, --lg, --round .icon / .icon--sm bare inline icon .stat-row / .stat figures row .stat__value .stat__label .stat__note (use [data-count]) .stat-row--3 --bordered --dark --center LEDGER / DOCKET PATTERNS (Redwood-specific) .ledger ruled-paper panel with red margin rule .ledger__head .ledger__title .ledger__meta .ledger__row .ledger__label .ledger__value .ledger__foot .docket-table mono-figure table (wrap in .table-wrap); th/td .num, tr.is-total, tr.group .ledger-list numbered ruled list: li > .ledger-list__num + .ledger-list__title + .ledger-list__note .toc table-of-contents rows with dotted leaders li > a > .toc__num + .toc__title + .toc__lead + .toc__ref .rings add tree-ring texture to any dark block; .rings--paper for light grounds .pull-quote large Newsreader quote with gold rule PATTERNS .logo-strip software/credential text marks, ruled row; .logo-strip__item; .logo-strip__label is aplaced just BEFORE the strip (--sans, --mono, --serif), .logo-strip--dark .steps / .step ledger-column process .step__num .step__meta .step__title; --3, --vertical, --dark .tabs [data-tabs] .tabs__list .tabs__tab .tabs__panel (underline default); --pill, --dark, --center .framework 3 stage columns .framework__stage(--a/--b/--c) .framework__label .checklist tick list; --light, --gold, --2col, --lg .price-card engagement tier .price-card__ribbon .price-card__tier .price-card__desc .price-card__amount (.from .cur .num) .price-card__period .price-card__note .price-card__list .price-card__fine .price-card--featured (forest) .price-card--compact .price-grid / --4 .table-wrap .compare-table (.check .dash .group th.is-featured td.is-featured) .accordion [data-accordion] ruled rows .accordion__item .accordion__trigger .accordion__icon .accordion__panel .accordion__body .accordion__content; --boxed, --dark .accordion-group .accordion-group__title .cta-band forest CTA block with gold inset frame .cta-band__inner (--center) .cta-band__deco .cta-band--redwood / --parchment (alias --sand, --teal→redwood) .newsletter email capture .newsletter__form .newsletter__fine; --dark, --stack .info-list label/value rows .info-list__label .info-list__value; --dark .timeline dated deadline list .timeline__item (--past, --soon) .timeline__date .timeline__body .notice callout; --gold (alias --brass), --redwood, --danger, --parchment .calc calculator panel .calc__form .calc__result .calc__big .calc__rows .range-wrap .map-embed / .map-embed__pin .frame offset gold hairline frame behind media FORMS .form .form-grid .form-grid--2 (.span-2) .form__fields .field .field__label (.req .opt) .field__hint .field__error .input .select .textarea .input--lg .input-group .input-prefix[data-prefix] .checkbox/.radio (+ __box) .form-success .form-status .hp (honeypot) .form-card / .form-card--forest (alias --navy) UTILITIES .sr-only .skip-link .mt-0…9 .mb-0…8 .mx-auto .flex .flex-col .items-center .justify-between .gap-2…6 .w-full .max-w-sm/md/lg .rounded .shadow .relative .overflow-hidden .img-cover .aspect-video .aspect-square .hide-mobile .hide-desktop .grain (film grain on dark) MOTION [data-reveal] (+ ="left|right|scale|fade") [data-reveal-delay="1..6"] [data-reveal-stagger] .float / .float--slow (all disabled under prefers-reduced-motion; ?noreveal disables reveal) ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* palette */ --ivory: #FAF7F2; --parchment: #F1EBE1; --parchment-2: #E8DFD0; --paper: #FFFDF9; --white: #FFFFFF; --redwood: #8C3B2A; --redwood-2: #A8492F; --redwood-3: #C46A4E; --redwood-soft: #F5E7E0; --redwood-rgb: 140, 59, 42; --forest: #1E3329; --forest-2: #2A4538; --forest-3: #15251D; --forest-rgb: 30, 51, 41; --moss: #6B7F5E; --moss-2: #55684A; --moss-soft: #E6EBDF; --gold: #B8914A; --gold-2: #D9BE85; --gold-3: #8E6B2C; --gold-soft: #F4EBD9; --ink: #1C1B19; --muted: #625D55; --muted-2: #787166; --line: #E2D9CB; --line-strong: #CDBFA9; --success: #3F6B45; --success-soft: #E6EEE3; --danger: #A8352A; --danger-soft: #F8E6E2; /* on-dark text */ --on-dark: #F4EFE6; --on-dark-muted: rgba(244, 239, 230, .74); --on-dark-faint: rgba(244, 239, 230, .14); /* typography */ --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --fs-display: clamp(2.8rem, 5.8vw, 4.9rem); --fs-h1: clamp(2.4rem, 4.6vw, 3.7rem); --fs-h2: clamp(1.95rem, 3.3vw, 2.8rem); --fs-h3: clamp(1.3rem, 1.9vw, 1.55rem); --fs-h4: 1.15rem; --fs-lg: 1.14rem; --fs-md: 1rem; --fs-sm: .92rem; --fs-xs: .8rem; --fs-mono: .74rem; --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.65; /* spacing */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --section-y: clamp(4.5rem, 8.5vw, 7rem); --gutter: clamp(1.25rem, 4vw, 2.5rem); /* radii — squarer than a typical SaaS look */ --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-pill: 999px; /* shadows — restrained, warm */ --shadow-xs: 0 1px 1px rgba(28, 27, 25, .05); --shadow-sm: 0 1px 2px rgba(28, 27, 25, .05), 0 4px 14px -6px rgba(28, 27, 25, .1); --shadow-md: 0 2px 4px rgba(28, 27, 25, .04), 0 14px 30px -14px rgba(28, 27, 25, .2); --shadow-lg: 0 4px 10px rgba(21, 37, 29, .08), 0 32px 60px -24px rgba(21, 37, 29, .45); /* motion */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .28s; --dur-slow: .7s; /* layout */ --container: 1200px; --container-narrow: 800px; --container-wide: 1320px; --header-h: 76px; --utility-h: 36px; /* textures (generated tree-ring SVGs + paper noise) */ --rings-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='%23E3CB94' stroke-opacity='.16'%3E%3Cpath d='M510 500C510 501 510 503 509 504C509 505 508 506 507 507C506 508 505 508 503 509C502 509 501 509 500 509C498 509 497 509 495 509C494 508 493 508 492 507C491 506 490 505 490 504C489 503 489 501 489 500C489 499 489 497 490 496C490 495 491 494 492 493C493 492 494 492 495 491C497 491 498 490 500 490C501 490 502 491 504 491C505 492 506 492 507 493C508 494 509 495 509 496C510 497 510 499 510 500Z' stroke-width='1.4'/%3E%3Cpath d='M527 500C527 503 526 507 524 510C523 513 521 515 518 518C516 520 512 522 509 523C506 524 502 524 499 524C495 525 491 524 488 523C485 522 482 520 479 518C477 516 474 513 473 510C472 507 471 503 471 500C471 497 472 493 473 490C475 487 477 485 479 482C482 480 485 478 488 477C491 476 495 475 499 475C502 475 506 476 509 477C512 478 516 480 518 482C521 485 523 487 524 490C526 493 527 497 527 500Z' stroke-width='1.4'/%3E%3Cpath d='M553 500C554 506 552 514 549 519C546 525 542 531 536 535C531 540 525 543 518 545C512 547 504 549 497 549C490 549 483 548 476 546C470 544 463 540 458 536C453 531 449 525 446 519C443 513 442 506 442 500C442 494 443 487 446 481C449 475 453 469 459 465C464 460 470 456 476 454C483 452 490 450 497 450C504 451 512 452 518 455C525 457 531 461 536 465C541 469 546 475 549 481C552 487 553 494 553 500Z' stroke-width='0.8'/%3E%3Cpath d='M563 500C563 508 561 516 558 523C554 530 549 536 543 542C537 547 529 550 521 553C514 556 505 557 497 557C489 557 480 557 472 554C465 551 457 547 451 542C445 536 440 530 437 523C433 516 431 508 432 500C432 492 434 484 437 478C440 471 445 464 451 459C457 453 465 449 472 446C480 443 489 442 497 442C505 442 514 444 521 447C529 450 536 454 542 459C548 464 554 470 557 477C561 484 563 492 563 500Z' stroke-width='1.4'/%3E%3Cpath d='M577 500C577 509 575 520 571 528C567 537 560 545 553 551C545 557 535 562 526 565C517 568 506 570 496 570C486 570 475 569 466 566C457 563 447 558 440 551C432 545 426 536 422 528C418 519 416 509 416 500C416 491 418 481 422 472C427 464 433 456 440 449C447 443 456 437 466 433C475 430 486 428 496 429C506 429 517 431 526 435C535 438 545 443 552 450C559 456 566 464 570 472C575 481 577 491 577 500Z' stroke-width='0.8'/%3E%3Cpath d='M592 500C592 511 589 523 584 533C580 544 572 554 563 561C554 568 542 574 531 577C520 581 507 583 496 583C484 583 471 582 460 578C448 575 437 568 428 561C420 553 412 543 408 533C403 523 400 511 400 500C400 489 403 477 408 467C413 457 420 447 429 440C437 432 448 425 459 421C471 417 484 415 496 415C507 415 520 419 531 423C542 427 553 433 561 440C570 448 579 457 584 467C589 477 592 489 592 500Z' stroke-width='1.4'/%3E%3Cpath d='M604 500C604 513 601 526 596 538C590 549 581 561 571 569C561 577 548 584 535 588C522 592 508 594 495 594C481 595 467 593 454 589C442 585 429 578 419 569C409 560 401 549 395 537C390 526 386 512 386 500C386 488 390 474 395 463C401 451 410 440 419 431C429 423 441 415 454 410C467 406 481 403 495 404C508 404 523 408 535 412C547 417 560 424 570 432C580 441 589 451 595 462C601 474 604 487 604 500Z' stroke-width='0.8'/%3E%3Cpath d='M627 500C627 515 624 532 617 546C610 560 599 574 587 584C574 594 558 602 543 607C527 612 510 615 494 615C477 615 460 614 444 609C429 603 413 595 401 584C389 574 379 560 373 546C366 532 362 515 362 500C362 485 366 468 372 454C379 440 390 427 402 416C414 406 428 396 444 391C459 385 477 383 494 383C510 384 527 388 542 394C558 400 573 408 585 418C597 428 609 440 616 454C623 468 627 485 627 500Z' stroke-width='0.8'/%3E%3Cpath d='M642 500C642 517 638 536 630 551C623 567 610 582 596 594C583 605 565 613 547 619C530 624 511 627 493 628C475 628 455 627 438 621C421 615 403 605 390 594C376 582 365 566 358 551C350 535 346 517 346 500C346 483 350 465 358 449C365 434 377 419 391 407C404 395 420 385 438 378C455 372 475 369 493 370C511 370 530 375 547 382C564 388 581 397 595 408C608 419 621 434 629 449C637 464 642 483 642 500Z' stroke-width='0.8'/%3E%3Cpath d='M665 500C665 520 660 542 652 560C643 578 628 596 612 609C596 621 575 631 555 637C535 644 513 647 492 648C471 648 448 647 428 640C408 634 387 622 372 609C356 595 343 577 334 559C326 541 320 520 321 500C321 480 327 459 335 441C344 423 358 406 373 392C389 379 408 366 428 359C447 352 471 348 492 349C513 349 535 355 555 363C575 370 594 380 610 393C626 406 641 423 650 441C659 458 664 480 665 500Z' stroke-width='1.4'/%3E%3Cpath d='M692 500C692 523 687 549 677 570C667 591 650 612 631 627C612 642 587 652 564 659C540 667 515 671 491 672C466 672 440 670 416 663C393 655 369 642 351 626C333 611 317 590 307 569C297 548 291 523 291 500C291 477 298 452 308 432C319 411 334 391 352 375C370 359 392 344 416 336C439 327 466 323 491 324C515 325 541 332 564 341C586 349 609 361 628 376C646 391 664 411 674 431C685 452 691 477 692 500Z' stroke-width='0.8'/%3E%3Cpath d='M704 500C705 525 700 552 689 574C678 597 659 619 639 635C619 650 592 661 568 669C543 677 516 682 490 683C464 684 436 682 411 674C386 666 361 652 341 635C322 618 305 596 294 573C284 551 277 524 277 500C278 476 285 449 296 427C307 405 324 384 343 367C362 350 386 334 410 325C435 316 464 312 490 313C516 314 543 321 568 330C592 339 616 352 636 368C656 384 675 405 686 427C697 449 704 475 704 500Z' stroke-width='0.8'/%3E%3Cpath d='M728 500C728 527 722 558 710 583C698 608 677 632 654 650C632 667 602 679 575 688C547 696 518 702 489 703C460 704 428 702 401 693C373 684 345 669 323 650C302 632 283 607 271 582C259 557 252 527 252 500C253 473 261 444 273 419C286 394 304 371 326 352C347 333 373 315 400 306C427 296 460 292 489 293C518 294 548 302 575 312C602 322 629 335 651 353C673 371 694 394 707 418C720 443 727 473 728 500Z' stroke-width='0.8'/%3E%3Cpath d='M748 500C748 530 742 563 728 590C715 617 692 644 668 663C643 681 611 694 581 704C551 713 520 719 488 720C457 721 422 719 392 710C362 701 331 683 308 663C284 643 264 616 251 589C238 562 230 529 231 500C231 471 240 439 253 412C267 385 287 360 310 339C333 319 362 300 391 289C421 278 456 273 488 275C520 276 552 285 581 296C611 307 640 321 664 341C688 360 712 384 726 411C740 437 748 470 748 500Z' stroke-width='0.8'/%3E%3Cpath d='M780 500C780 534 773 571 758 602C743 632 717 662 689 684C662 705 625 719 591 729C558 740 522 746 487 747C451 748 412 747 379 736C345 725 310 706 284 684C257 661 235 631 220 600C205 569 196 533 196 500C196 467 207 431 222 401C237 370 260 342 286 319C312 295 344 274 378 262C411 250 451 245 487 246C522 248 558 258 591 271C624 283 657 299 684 321C711 342 738 370 754 400C770 430 779 466 780 500Z' stroke-width='1.4'/%3E%3Cpath d='M812 500C813 538 805 580 788 614C771 648 742 681 711 704C680 728 639 743 601 754C564 766 524 773 485 774C446 775 403 774 365 762C328 750 289 729 260 704C231 679 205 645 189 611C172 577 162 537 162 500C162 463 174 423 190 389C207 356 233 324 262 298C291 272 327 248 364 235C401 221 446 216 485 218C525 220 565 232 601 246C638 260 674 278 704 301C735 325 764 355 782 389C800 422 811 462 812 500Z' stroke-width='0.8'/%3E%3Cpath d='M831 500C833 540 825 585 807 621C790 658 759 694 726 719C692 744 649 759 608 771C568 783 526 790 484 791C442 792 397 790 357 778C317 765 277 743 245 716C214 690 187 654 169 618C152 582 140 539 140 500C140 461 152 418 170 382C188 346 215 312 246 284C277 257 315 231 355 217C394 203 442 198 484 200C526 202 569 216 607 231C646 246 684 265 716 290C748 315 780 347 799 382C818 417 830 460 831 500Z' stroke-width='0.8'/%3E%3Cpath d='M844 500C846 541 838 588 820 626C802 664 770 702 735 728C701 754 655 770 613 783C571 795 527 801 484 802C440 803 393 801 352 788C311 775 269 751 236 724C204 696 176 659 158 622C140 585 127 541 127 500C126 459 138 415 157 377C175 340 204 304 236 276C268 247 308 220 349 205C390 191 440 185 484 188C527 191 571 205 611 221C651 237 690 257 723 283C756 309 789 342 809 378C829 414 842 459 844 500Z' stroke-width='1.4'/%3E%3Cpath d='M872 500C874 545 865 595 845 636C826 677 791 718 754 746C716 774 666 790 621 803C576 816 529 823 482 824C435 825 385 824 340 810C296 797 250 772 214 743C179 713 149 673 129 633C109 592 95 544 96 500C96 456 110 408 130 368C150 328 182 290 216 259C251 228 293 199 337 183C382 167 435 161 482 164C529 166 577 182 620 199C663 216 706 237 742 265C777 293 813 329 835 368C857 407 870 455 872 500Z' stroke-width='0.8'/%3E%3Cpath d='M900 500C901 548 891 602 870 646C849 690 812 734 772 763C731 793 678 810 629 824C581 838 531 844 481 845C431 847 377 847 329 833C280 819 230 794 192 762C153 730 120 687 99 643C78 600 64 547 65 500C65 453 81 401 104 358C126 316 161 276 198 244C235 211 279 180 327 162C374 145 430 137 481 139C531 141 583 157 629 175C676 193 722 217 760 247C799 277 838 315 861 357C884 400 898 452 900 500Z' stroke-width='0.8'/%3E%3Cpath d='M917 500C919 550 909 607 887 653C865 698 826 744 784 775C742 807 686 825 635 839C585 853 532 859 480 860C428 861 372 861 322 846C272 831 219 805 180 772C141 739 107 694 85 648C63 603 48 549 48 500C47 451 62 397 85 352C107 307 144 265 183 231C222 197 269 164 318 146C368 129 428 120 480 123C533 126 586 145 634 164C682 183 729 207 769 239C809 270 850 308 875 352C900 395 916 450 917 500Z' stroke-width='0.8'/%3E%3Cpath d='M932 500C934 552 924 611 901 658C878 706 839 754 795 786C752 818 693 837 640 851C587 866 533 871 479 872C425 873 368 873 316 858C264 843 210 815 169 781C128 747 93 700 70 654C47 607 31 551 31 500C31 449 47 393 70 346C93 300 131 257 172 221C212 186 261 152 312 134C363 115 425 107 479 110C534 113 589 132 638 152C688 172 736 197 778 230C819 262 862 302 888 347C914 392 930 448 932 500Z' stroke-width='0.8'/%3E%3Cpath d='M942 500C944 553 934 613 911 662C887 711 846 759 801 792C756 824 696 843 643 858C589 873 534 880 479 881C424 883 364 882 311 867C259 851 204 822 162 787C121 752 85 704 62 657C38 609 21 552 21 500C21 448 37 391 61 343C84 295 122 251 163 214C204 178 255 143 307 124C360 106 423 99 479 103C535 106 590 126 641 146C692 166 741 191 784 224C827 257 871 297 897 343C923 389 940 447 942 500Z' stroke-width='0.8'/%3E%3Cpath d='M970 500C973 556 962 621 937 672C913 724 868 776 821 811C773 845 709 865 652 880C594 896 536 902 478 904C419 905 356 905 300 888C244 872 186 841 142 804C98 767 60 717 34 666C9 616 -9 556 -9 500C-9 444 8 384 33 333C58 283 99 235 142 196C186 158 239 120 295 101C351 81 419 74 478 78C537 82 595 104 649 125C703 147 755 173 801 207C846 242 893 285 921 334C949 382 967 444 970 500Z' stroke-width='0.8'/%3E%3Cpath d='M985 500C989 558 979 625 954 679C929 733 884 788 835 824C786 861 718 881 658 897C599 912 538 917 477 918C416 918 352 918 294 900C236 883 176 852 130 814C85 776 46 724 20 672C-7 619 -26 557 -27 500C-28 443 -11 379 15 327C41 274 83 225 128 184C174 144 229 105 287 85C345 64 416 56 477 61C538 65 599 89 654 112C710 135 763 163 809 199C855 235 904 279 933 329C962 379 982 442 985 500Z' stroke-width='0.8'/%3E%3Cpath d='M994 500C998 559 989 628 964 683C939 738 893 795 843 832C793 869 723 890 662 906C601 922 539 927 476 927C414 927 348 926 290 908C231 890 171 857 125 818C79 779 40 727 13 674C-14 621 -34 558 -36 500C-37 442 -21 377 5 323C31 269 73 218 119 177C165 135 222 95 282 74C341 53 414 45 476 51C539 56 601 81 657 105C713 130 766 158 813 195C860 232 909 276 939 326C969 377 990 441 994 500Z' stroke-width='0.8'/%3E%3Cpath d='M1000 500C1005 560 998 630 973 687C949 743 903 802 852 841C801 879 730 901 667 917C604 933 539 937 476 936C413 936 346 933 286 914C227 896 166 863 119 823C73 783 33 730 6 676C-22 623 -43 559 -45 500C-46 441 -31 375 -5 320C21 265 64 212 111 170C158 127 216 86 277 64C337 42 412 34 476 39C540 45 603 72 660 97C717 123 770 153 817 191C865 229 913 273 944 325C974 376 995 440 1000 500Z' stroke-width='0.8'/%3E%3Cpath d='M1025 500C1030 563 1021 636 995 695C969 755 922 817 869 857C815 897 740 920 674 936C609 952 541 955 475 954C409 954 339 952 277 933C215 913 150 880 101 839C52 797 11 741 -18 685C-46 628 -68 562 -70 500C-72 438 -56 369 -29 311C-2 253 44 199 94 155C143 110 203 68 267 45C330 22 408 13 475 18C542 24 608 53 667 79C727 106 781 138 831 177C881 217 933 262 965 316C997 370 1020 437 1025 500Z' stroke-width='0.8'/%3E%3Cpath d='M1057 500C1063 567 1053 644 1026 707C998 770 949 837 892 879C835 922 755 946 685 963C615 980 544 980 473 979C403 978 331 977 265 957C198 937 129 902 77 859C25 816 -19 756 -49 696C-79 636 -103 566 -105 500C-107 434 -91 360 -62 299C-33 238 17 181 70 134C122 87 186 43 253 18C320 -6 403 -17 473 -11C544 -5 615 26 677 54C740 83 797 118 849 160C902 201 957 249 992 305C1027 362 1051 433 1057 500Z' stroke-width='0.8'/%3E%3Cpath d='M1078 500C1084 569 1073 649 1045 715C1016 780 965 848 906 893C847 937 764 962 692 979C619 996 545 998 472 997C400 996 324 994 256 974C187 953 116 917 62 872C8 827 -36 765 -68 703C-99 641 -123 568 -125 500C-128 432 -112 355 -82 292C-52 229 -1 169 53 120C108 72 174 25 244 0C314 -25 399 -36 472 -29C546 -23 618 10 683 39C748 69 807 105 861 148C916 191 974 240 1010 298C1046 357 1072 431 1078 500Z' stroke-width='0.8'/%3E%3Cpath d='M480 500 L-60 570' stroke-width='1'/%3E%3C/svg%3E"); --rings-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='%238C3B2A' stroke-opacity='.10'%3E%3Cpath d='M510 500C510 501 510 503 509 504C509 505 508 506 507 507C506 508 505 508 503 509C502 509 501 509 500 509C498 509 497 509 495 509C494 508 493 508 492 507C491 506 490 505 490 504C489 503 489 501 489 500C489 499 489 497 490 496C490 495 491 494 492 493C493 492 494 492 495 491C497 491 498 490 500 490C501 490 502 491 504 491C505 492 506 492 507 493C508 494 509 495 509 496C510 497 510 499 510 500Z' stroke-width='1.4'/%3E%3Cpath d='M527 500C527 503 526 507 524 510C523 513 521 515 518 518C516 520 512 522 509 523C506 524 502 524 499 524C495 525 491 524 488 523C485 522 482 520 479 518C477 516 474 513 473 510C472 507 471 503 471 500C471 497 472 493 473 490C475 487 477 485 479 482C482 480 485 478 488 477C491 476 495 475 499 475C502 475 506 476 509 477C512 478 516 480 518 482C521 485 523 487 524 490C526 493 527 497 527 500Z' stroke-width='1.4'/%3E%3Cpath d='M553 500C554 506 552 514 549 519C546 525 542 531 536 535C531 540 525 543 518 545C512 547 504 549 497 549C490 549 483 548 476 546C470 544 463 540 458 536C453 531 449 525 446 519C443 513 442 506 442 500C442 494 443 487 446 481C449 475 453 469 459 465C464 460 470 456 476 454C483 452 490 450 497 450C504 451 512 452 518 455C525 457 531 461 536 465C541 469 546 475 549 481C552 487 553 494 553 500Z' stroke-width='0.8'/%3E%3Cpath d='M563 500C563 508 561 516 558 523C554 530 549 536 543 542C537 547 529 550 521 553C514 556 505 557 497 557C489 557 480 557 472 554C465 551 457 547 451 542C445 536 440 530 437 523C433 516 431 508 432 500C432 492 434 484 437 478C440 471 445 464 451 459C457 453 465 449 472 446C480 443 489 442 497 442C505 442 514 444 521 447C529 450 536 454 542 459C548 464 554 470 557 477C561 484 563 492 563 500Z' stroke-width='1.4'/%3E%3Cpath d='M577 500C577 509 575 520 571 528C567 537 560 545 553 551C545 557 535 562 526 565C517 568 506 570 496 570C486 570 475 569 466 566C457 563 447 558 440 551C432 545 426 536 422 528C418 519 416 509 416 500C416 491 418 481 422 472C427 464 433 456 440 449C447 443 456 437 466 433C475 430 486 428 496 429C506 429 517 431 526 435C535 438 545 443 552 450C559 456 566 464 570 472C575 481 577 491 577 500Z' stroke-width='0.8'/%3E%3Cpath d='M592 500C592 511 589 523 584 533C580 544 572 554 563 561C554 568 542 574 531 577C520 581 507 583 496 583C484 583 471 582 460 578C448 575 437 568 428 561C420 553 412 543 408 533C403 523 400 511 400 500C400 489 403 477 408 467C413 457 420 447 429 440C437 432 448 425 459 421C471 417 484 415 496 415C507 415 520 419 531 423C542 427 553 433 561 440C570 448 579 457 584 467C589 477 592 489 592 500Z' stroke-width='1.4'/%3E%3Cpath d='M604 500C604 513 601 526 596 538C590 549 581 561 571 569C561 577 548 584 535 588C522 592 508 594 495 594C481 595 467 593 454 589C442 585 429 578 419 569C409 560 401 549 395 537C390 526 386 512 386 500C386 488 390 474 395 463C401 451 410 440 419 431C429 423 441 415 454 410C467 406 481 403 495 404C508 404 523 408 535 412C547 417 560 424 570 432C580 441 589 451 595 462C601 474 604 487 604 500Z' stroke-width='0.8'/%3E%3Cpath d='M627 500C627 515 624 532 617 546C610 560 599 574 587 584C574 594 558 602 543 607C527 612 510 615 494 615C477 615 460 614 444 609C429 603 413 595 401 584C389 574 379 560 373 546C366 532 362 515 362 500C362 485 366 468 372 454C379 440 390 427 402 416C414 406 428 396 444 391C459 385 477 383 494 383C510 384 527 388 542 394C558 400 573 408 585 418C597 428 609 440 616 454C623 468 627 485 627 500Z' stroke-width='0.8'/%3E%3Cpath d='M642 500C642 517 638 536 630 551C623 567 610 582 596 594C583 605 565 613 547 619C530 624 511 627 493 628C475 628 455 627 438 621C421 615 403 605 390 594C376 582 365 566 358 551C350 535 346 517 346 500C346 483 350 465 358 449C365 434 377 419 391 407C404 395 420 385 438 378C455 372 475 369 493 370C511 370 530 375 547 382C564 388 581 397 595 408C608 419 621 434 629 449C637 464 642 483 642 500Z' stroke-width='0.8'/%3E%3Cpath d='M665 500C665 520 660 542 652 560C643 578 628 596 612 609C596 621 575 631 555 637C535 644 513 647 492 648C471 648 448 647 428 640C408 634 387 622 372 609C356 595 343 577 334 559C326 541 320 520 321 500C321 480 327 459 335 441C344 423 358 406 373 392C389 379 408 366 428 359C447 352 471 348 492 349C513 349 535 355 555 363C575 370 594 380 610 393C626 406 641 423 650 441C659 458 664 480 665 500Z' stroke-width='1.4'/%3E%3Cpath d='M692 500C692 523 687 549 677 570C667 591 650 612 631 627C612 642 587 652 564 659C540 667 515 671 491 672C466 672 440 670 416 663C393 655 369 642 351 626C333 611 317 590 307 569C297 548 291 523 291 500C291 477 298 452 308 432C319 411 334 391 352 375C370 359 392 344 416 336C439 327 466 323 491 324C515 325 541 332 564 341C586 349 609 361 628 376C646 391 664 411 674 431C685 452 691 477 692 500Z' stroke-width='0.8'/%3E%3Cpath d='M704 500C705 525 700 552 689 574C678 597 659 619 639 635C619 650 592 661 568 669C543 677 516 682 490 683C464 684 436 682 411 674C386 666 361 652 341 635C322 618 305 596 294 573C284 551 277 524 277 500C278 476 285 449 296 427C307 405 324 384 343 367C362 350 386 334 410 325C435 316 464 312 490 313C516 314 543 321 568 330C592 339 616 352 636 368C656 384 675 405 686 427C697 449 704 475 704 500Z' stroke-width='0.8'/%3E%3Cpath d='M728 500C728 527 722 558 710 583C698 608 677 632 654 650C632 667 602 679 575 688C547 696 518 702 489 703C460 704 428 702 401 693C373 684 345 669 323 650C302 632 283 607 271 582C259 557 252 527 252 500C253 473 261 444 273 419C286 394 304 371 326 352C347 333 373 315 400 306C427 296 460 292 489 293C518 294 548 302 575 312C602 322 629 335 651 353C673 371 694 394 707 418C720 443 727 473 728 500Z' stroke-width='0.8'/%3E%3Cpath d='M748 500C748 530 742 563 728 590C715 617 692 644 668 663C643 681 611 694 581 704C551 713 520 719 488 720C457 721 422 719 392 710C362 701 331 683 308 663C284 643 264 616 251 589C238 562 230 529 231 500C231 471 240 439 253 412C267 385 287 360 310 339C333 319 362 300 391 289C421 278 456 273 488 275C520 276 552 285 581 296C611 307 640 321 664 341C688 360 712 384 726 411C740 437 748 470 748 500Z' stroke-width='0.8'/%3E%3Cpath d='M780 500C780 534 773 571 758 602C743 632 717 662 689 684C662 705 625 719 591 729C558 740 522 746 487 747C451 748 412 747 379 736C345 725 310 706 284 684C257 661 235 631 220 600C205 569 196 533 196 500C196 467 207 431 222 401C237 370 260 342 286 319C312 295 344 274 378 262C411 250 451 245 487 246C522 248 558 258 591 271C624 283 657 299 684 321C711 342 738 370 754 400C770 430 779 466 780 500Z' stroke-width='1.4'/%3E%3Cpath d='M812 500C813 538 805 580 788 614C771 648 742 681 711 704C680 728 639 743 601 754C564 766 524 773 485 774C446 775 403 774 365 762C328 750 289 729 260 704C231 679 205 645 189 611C172 577 162 537 162 500C162 463 174 423 190 389C207 356 233 324 262 298C291 272 327 248 364 235C401 221 446 216 485 218C525 220 565 232 601 246C638 260 674 278 704 301C735 325 764 355 782 389C800 422 811 462 812 500Z' stroke-width='0.8'/%3E%3Cpath d='M831 500C833 540 825 585 807 621C790 658 759 694 726 719C692 744 649 759 608 771C568 783 526 790 484 791C442 792 397 790 357 778C317 765 277 743 245 716C214 690 187 654 169 618C152 582 140 539 140 500C140 461 152 418 170 382C188 346 215 312 246 284C277 257 315 231 355 217C394 203 442 198 484 200C526 202 569 216 607 231C646 246 684 265 716 290C748 315 780 347 799 382C818 417 830 460 831 500Z' stroke-width='0.8'/%3E%3Cpath d='M844 500C846 541 838 588 820 626C802 664 770 702 735 728C701 754 655 770 613 783C571 795 527 801 484 802C440 803 393 801 352 788C311 775 269 751 236 724C204 696 176 659 158 622C140 585 127 541 127 500C126 459 138 415 157 377C175 340 204 304 236 276C268 247 308 220 349 205C390 191 440 185 484 188C527 191 571 205 611 221C651 237 690 257 723 283C756 309 789 342 809 378C829 414 842 459 844 500Z' stroke-width='1.4'/%3E%3Cpath d='M872 500C874 545 865 595 845 636C826 677 791 718 754 746C716 774 666 790 621 803C576 816 529 823 482 824C435 825 385 824 340 810C296 797 250 772 214 743C179 713 149 673 129 633C109 592 95 544 96 500C96 456 110 408 130 368C150 328 182 290 216 259C251 228 293 199 337 183C382 167 435 161 482 164C529 166 577 182 620 199C663 216 706 237 742 265C777 293 813 329 835 368C857 407 870 455 872 500Z' stroke-width='0.8'/%3E%3Cpath d='M900 500C901 548 891 602 870 646C849 690 812 734 772 763C731 793 678 810 629 824C581 838 531 844 481 845C431 847 377 847 329 833C280 819 230 794 192 762C153 730 120 687 99 643C78 600 64 547 65 500C65 453 81 401 104 358C126 316 161 276 198 244C235 211 279 180 327 162C374 145 430 137 481 139C531 141 583 157 629 175C676 193 722 217 760 247C799 277 838 315 861 357C884 400 898 452 900 500Z' stroke-width='0.8'/%3E%3Cpath d='M917 500C919 550 909 607 887 653C865 698 826 744 784 775C742 807 686 825 635 839C585 853 532 859 480 860C428 861 372 861 322 846C272 831 219 805 180 772C141 739 107 694 85 648C63 603 48 549 48 500C47 451 62 397 85 352C107 307 144 265 183 231C222 197 269 164 318 146C368 129 428 120 480 123C533 126 586 145 634 164C682 183 729 207 769 239C809 270 850 308 875 352C900 395 916 450 917 500Z' stroke-width='0.8'/%3E%3Cpath d='M932 500C934 552 924 611 901 658C878 706 839 754 795 786C752 818 693 837 640 851C587 866 533 871 479 872C425 873 368 873 316 858C264 843 210 815 169 781C128 747 93 700 70 654C47 607 31 551 31 500C31 449 47 393 70 346C93 300 131 257 172 221C212 186 261 152 312 134C363 115 425 107 479 110C534 113 589 132 638 152C688 172 736 197 778 230C819 262 862 302 888 347C914 392 930 448 932 500Z' stroke-width='0.8'/%3E%3Cpath d='M942 500C944 553 934 613 911 662C887 711 846 759 801 792C756 824 696 843 643 858C589 873 534 880 479 881C424 883 364 882 311 867C259 851 204 822 162 787C121 752 85 704 62 657C38 609 21 552 21 500C21 448 37 391 61 343C84 295 122 251 163 214C204 178 255 143 307 124C360 106 423 99 479 103C535 106 590 126 641 146C692 166 741 191 784 224C827 257 871 297 897 343C923 389 940 447 942 500Z' stroke-width='0.8'/%3E%3Cpath d='M970 500C973 556 962 621 937 672C913 724 868 776 821 811C773 845 709 865 652 880C594 896 536 902 478 904C419 905 356 905 300 888C244 872 186 841 142 804C98 767 60 717 34 666C9 616 -9 556 -9 500C-9 444 8 384 33 333C58 283 99 235 142 196C186 158 239 120 295 101C351 81 419 74 478 78C537 82 595 104 649 125C703 147 755 173 801 207C846 242 893 285 921 334C949 382 967 444 970 500Z' stroke-width='0.8'/%3E%3Cpath d='M985 500C989 558 979 625 954 679C929 733 884 788 835 824C786 861 718 881 658 897C599 912 538 917 477 918C416 918 352 918 294 900C236 883 176 852 130 814C85 776 46 724 20 672C-7 619 -26 557 -27 500C-28 443 -11 379 15 327C41 274 83 225 128 184C174 144 229 105 287 85C345 64 416 56 477 61C538 65 599 89 654 112C710 135 763 163 809 199C855 235 904 279 933 329C962 379 982 442 985 500Z' stroke-width='0.8'/%3E%3Cpath d='M994 500C998 559 989 628 964 683C939 738 893 795 843 832C793 869 723 890 662 906C601 922 539 927 476 927C414 927 348 926 290 908C231 890 171 857 125 818C79 779 40 727 13 674C-14 621 -34 558 -36 500C-37 442 -21 377 5 323C31 269 73 218 119 177C165 135 222 95 282 74C341 53 414 45 476 51C539 56 601 81 657 105C713 130 766 158 813 195C860 232 909 276 939 326C969 377 990 441 994 500Z' stroke-width='0.8'/%3E%3Cpath d='M1000 500C1005 560 998 630 973 687C949 743 903 802 852 841C801 879 730 901 667 917C604 933 539 937 476 936C413 936 346 933 286 914C227 896 166 863 119 823C73 783 33 730 6 676C-22 623 -43 559 -45 500C-46 441 -31 375 -5 320C21 265 64 212 111 170C158 127 216 86 277 64C337 42 412 34 476 39C540 45 603 72 660 97C717 123 770 153 817 191C865 229 913 273 944 325C974 376 995 440 1000 500Z' stroke-width='0.8'/%3E%3Cpath d='M1025 500C1030 563 1021 636 995 695C969 755 922 817 869 857C815 897 740 920 674 936C609 952 541 955 475 954C409 954 339 952 277 933C215 913 150 880 101 839C52 797 11 741 -18 685C-46 628 -68 562 -70 500C-72 438 -56 369 -29 311C-2 253 44 199 94 155C143 110 203 68 267 45C330 22 408 13 475 18C542 24 608 53 667 79C727 106 781 138 831 177C881 217 933 262 965 316C997 370 1020 437 1025 500Z' stroke-width='0.8'/%3E%3Cpath d='M1057 500C1063 567 1053 644 1026 707C998 770 949 837 892 879C835 922 755 946 685 963C615 980 544 980 473 979C403 978 331 977 265 957C198 937 129 902 77 859C25 816 -19 756 -49 696C-79 636 -103 566 -105 500C-107 434 -91 360 -62 299C-33 238 17 181 70 134C122 87 186 43 253 18C320 -6 403 -17 473 -11C544 -5 615 26 677 54C740 83 797 118 849 160C902 201 957 249 992 305C1027 362 1051 433 1057 500Z' stroke-width='0.8'/%3E%3Cpath d='M1078 500C1084 569 1073 649 1045 715C1016 780 965 848 906 893C847 937 764 962 692 979C619 996 545 998 472 997C400 996 324 994 256 974C187 953 116 917 62 872C8 827 -36 765 -68 703C-99 641 -123 568 -125 500C-128 432 -112 355 -82 292C-52 229 -1 169 53 120C108 72 174 25 244 0C314 -25 399 -36 472 -29C546 -23 618 10 683 39C748 69 807 105 861 148C916 191 974 240 1010 298C1046 357 1072 431 1078 500Z' stroke-width='0.8'/%3E%3Cpath d='M480 500 L-60 570' stroke-width='1'/%3E%3C/svg%3E"); --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C3B2A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --tick-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9BE85' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --tick-moss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6B45' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); color-scheme: light; } /* ========================================================================== 2. RESET / BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.25rem); } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); color: var(--ink); background: var(--ivory); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } body.nav-open { overflow: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } svg { fill: none; } a { color: var(--redwood); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--forest); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } ul, ol { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } figure, blockquote { margin: 0; } dl, dd { margin: 0; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; } strong, b { font-weight: 600; } small { font-size: var(--fs-sm); } address { font-style: normal; } :focus-visible { outline: 2px solid var(--redwood-2); outline-offset: 3px; border-radius: var(--r-xs); } .section--forest :focus-visible, .section--navy :focus-visible, .site-footer :focus-visible, .utility-bar :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .cta-band :focus-visible, .price-card--featured :focus-visible { outline-color: var(--gold-2); } ::selection { background: var(--redwood); color: #fff; } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .display { font-family: var(--font-display); font-weight: 450; line-height: var(--lh-snug); letter-spacing: -.012em; color: var(--forest); margin: 0 0 .5em; font-optical-sizing: auto; text-wrap: balance; } h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 400; letter-spacing: -.02em; } h2, .h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: 400; letter-spacing: -.018em; } h3, .h3 { font-size: var(--fs-h3); font-weight: 500; } h4, .h4 { font-size: var(--fs-h4); font-weight: 500; letter-spacing: 0; } h5, h6 { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; } .display { font-size: var(--fs-display); line-height: 1.02; font-weight: 350; letter-spacing: -.028em; } .accent { font-style: italic; font-weight: inherit; color: var(--redwood); } .accent--gold { color: var(--gold-3); } .accent--forest { color: var(--forest); } /* § numbered section label */ .section-num { display: flex; align-items: center; gap: .85rem; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.35rem; } .section-num span { color: var(--redwood); letter-spacing: .06em; } .section-num::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); min-width: 2rem; } .section-num--light, .section--forest .section-num, .section--navy .section-num, .cta-band .section-num { color: var(--on-dark-muted); } .section-num--light span, .section--forest .section-num span, .section--navy .section-num span, .cta-band .section-num span { color: var(--gold-2); } .section-num--light::after, .section--forest .section-num::after, .section--navy .section-num::after, .cta-band .section-num::after { background: rgba(217, 190, 133, .3); } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--redwood); margin: 0 0 1.1rem; } .eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--gold); flex-shrink: 0; } .eyebrow--light { color: var(--gold-2); } .eyebrow--light::before { background: var(--gold-2); } .eyebrow--plain::before { display: none; } .eyebrow--gold, .eyebrow--brass { color: var(--gold-3); } .eyebrow--boxed { padding: .3rem .6rem; border: 1px solid currentColor; border-radius: var(--r-xs); } .eyebrow--boxed::before { display: none; } .lede { font-size: var(--fs-lg); line-height: 1.62; color: var(--muted); max-width: 62ch; text-wrap: pretty; } .lede--lg { font-size: clamp(1.14rem, 1.55vw, 1.3rem); } .mono, .tabular { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); letter-spacing: 0; } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .text-muted { color: var(--muted); } .text-light { color: var(--on-dark-muted); } .text-white { color: var(--on-dark); } .text-redwood { color: var(--redwood); } .text-gold, .text-brass { color: var(--gold-3); } .text-forest, .text-navy { color: var(--forest); } .text-teal { color: var(--redwood); } .text-center { text-align: center; } .text-left { text-align: left; } .text-small { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .text-serif { font-family: var(--font-display); } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .caps { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-mono); font-weight: 500; } .dropcap::first-letter { float: left; font-family: var(--font-display); font-size: 3.6em; line-height: .82; padding: .06em .12em 0 0; color: var(--redwood); } .prose { max-width: 68ch; } .prose > * + * { margin-top: 1.1em; } .prose p { margin-bottom: 0; } .prose h2 { margin-top: 2.1em; font-size: clamp(1.6rem, 2.6vw, 2.1rem); } .prose h3 { margin-top: 1.8em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose ul { list-style: square; } .prose ul li::marker { color: var(--gold); } .prose ol { list-style: decimal; } .prose ol li::marker { font-family: var(--font-mono); font-size: .85em; color: var(--redwood); } .prose li + li { margin-top: .4em; } .prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--redwood-rgb), .4); } .prose a:hover { text-decoration-color: currentColor; } .prose blockquote { margin: 1.6em 0; padding: .2rem 0 .2rem 1.4rem; border-left: 2px solid var(--redwood); font-family: var(--font-display); font-style: italic; font-size: 1.25em; line-height: 1.45; color: var(--forest); } .prose img { border-radius: var(--r-md); } .prose figcaption { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; color: var(--muted); margin-top: .6rem; } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .prose th, .prose td { padding: .65rem .75rem; border-bottom: 1px solid var(--line); text-align: left; } .prose th { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-bottom-color: var(--forest); } /* on-dark text */ .section--forest h1, .section--forest h2, .section--forest h3, .section--forest h4, .section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4, .hero h1, .hero h2, .hero h3, .page-hero h1, .page-hero h2, .page-hero h3, .cta-band h2, .cta-band h3, .card--forest h3, .card--forest h4, .card--navy h3, .card--navy h4, .site-footer h4 { color: var(--on-dark); } .section--forest p:not(.eyebrow):not(.section-num), .section--navy p:not(.eyebrow):not(.section-num), .hero p:not(.eyebrow), .page-hero p:not(.eyebrow), .cta-band p:not(.eyebrow):not(.section-num) { color: var(--on-dark-muted); } .section--forest a:not(.btn), .section--navy a:not(.btn), .hero a:not(.btn), .page-hero a:not(.btn) { color: var(--on-dark); } .section--forest a:not(.btn):hover, .section--navy a:not(.btn):hover, .hero a:not(.btn):hover, .page-hero a:not(.btn):hover { color: var(--gold-2); } .section--forest .accent, .section--navy .accent, .hero .accent, .page-hero .accent, .cta-band .accent { color: var(--gold-2); } .section--forest .eyebrow, .section--navy .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow { color: var(--gold-2); } .section--forest .eyebrow::before, .section--navy .eyebrow::before, .hero .eyebrow::before, .page-hero .eyebrow::before, .cta-band .eyebrow::before { background: var(--gold-2); } /* ========================================================================== 4. LAYOUT ========================================================================== */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); } .container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); } .section { position: relative; padding-block: var(--section-y); background-color: var(--ivory); background-image: var(--noise); } .section--parchment, .section--sand { background-color: var(--parchment); } .section--white { background-color: var(--paper); } .section--forest, .section--navy { background-color: var(--forest); background-image: var(--rings-light), linear-gradient(170deg, var(--forest) 0%, var(--forest-3) 100%); background-repeat: no-repeat; background-size: 1100px auto, cover; background-position: right -320px center, center; color: var(--on-dark); isolation: isolate; } .section--forest .lede, .section--navy .lede { color: var(--on-dark-muted); } .section--tight { padding-block: clamp(2.5rem, 5vw, 3.75rem); } .section--loose { padding-block: clamp(6rem, 11vw, 9rem); } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .section--border-top { border-top: 1px solid var(--line); } .section--ruled::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); } .section__head { max-width: 740px; margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); } .section__head h2 { margin-bottom: .5em; } .section__head .lede { margin-bottom: 0; } .section__head--center { margin-inline: auto; text-align: center; } .section__head--center .lede { margin-inline: auto; } .section__head--center .section-num { justify-content: center; } .section__head--center .section-num::before { content: ""; flex: 1; height: 1px; background: inherit; } .section__head--center .section-num::before, .section__head--center .section-num::after { background: var(--line-strong); max-width: 6rem; } .section__head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; } .section__head--row > div { max-width: 660px; } .section__head--row .btn, .section__head--row .link-arrow { flex-shrink: 0; margin-bottom: .4rem; } .grid { display: grid; gap: clamp(1.25rem, 2.4vw, 1.85rem); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); } .grid--2 { --cols: 2; } .grid--3 { --cols: 3; } .grid--4 { --cols: 4; } .grid--tight { gap: 1rem; } .grid--align-start { align-items: start; } .grid--align-center { align-items: center; } /* hairline-separated cells (ledger columns) */ .grid--ruled { gap: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); } .grid--ruled > * { padding: clamp(1.4rem, 2.6vw, 2rem); border-left: 1px solid var(--line); } .grid--ruled.grid--2 > *:nth-child(2n + 1), .grid--ruled.grid--3 > *:nth-child(3n + 1), .grid--ruled.grid--4 > *:nth-child(4n + 1) { border-left: 0; padding-left: 0; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .split--wide-text { grid-template-columns: 5fr 6fr; } .split--flip .split__media { order: 2; } .split--flip .split__body { order: 1; } .split__media { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 5 / 4; background: var(--parchment-2); box-shadow: var(--shadow-md); } .split__media--tall { aspect-ratio: 4 / 5; } .split__media--wide { aspect-ratio: 16 / 10; } .split__media img { width: 100%; height: 100%; object-fit: cover; } .split__media--framed::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 253, 249, .55); border-radius: var(--r-xs); pointer-events: none; } .split__body h2 { margin-bottom: .55em; } .split__body .lede { margin-bottom: 1.4rem; } .split__float { position: absolute; left: 1.1rem; bottom: 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .8rem 1rem; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: .8rem; max-width: calc(100% - 2.2rem); } .split__float strong { display: block; color: var(--forest); font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; line-height: 1; } .split__float span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .stack > * + * { margin-top: var(--s-5); } .stack--sm > * + * { margin-top: var(--s-3); } .stack--lg > * + * { margin-top: var(--s-7); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); } /* ========================================================================== 5. RULES, BUTTONS, LINKS, LABELS ========================================================================== */ .rule, .divider { height: 1px; border: 0; background: var(--line); margin: var(--s-7) 0; } .rule--double { height: 4px; background: none; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); } .rule--gold, .hairline { height: 1px; border: 0; background: var(--gold); opacity: .6; margin: var(--s-7) 0; } .rule--short, .hairline--short { width: 72px; margin: 1.25rem 0; background: var(--redwood); opacity: 1; height: 2px; } .hairline--center, .rule--center { margin-inline: auto; } .btn { --btn-bg: var(--redwood); --btn-fg: #fff; --btn-bd: var(--redwood); --btn-bg-h: var(--redwood-2); --btn-bd-h: var(--redwood-2); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .88rem 1.4rem; border-radius: 4px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); font-family: var(--font-body); font-weight: 500; font-size: .95rem; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover { background: var(--btn-bg-h); border-color: var(--btn-bd-h); color: var(--btn-fg); box-shadow: 0 8px 20px -12px rgba(var(--redwood-rgb), .8); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; } .btn--forest, .btn--navy { --btn-bg: var(--forest); --btn-bd: var(--forest); --btn-bg-h: var(--forest-2); --btn-bd-h: var(--forest-2); } .btn--forest:hover, .btn--navy:hover { box-shadow: 0 8px 20px -12px rgba(var(--forest-rgb), .9); } .btn--gold, .btn--brass { --btn-bg: var(--gold-2); --btn-fg: var(--forest-3); --btn-bd: var(--gold-2); --btn-bg-h: #E6CD97; --btn-bd-h: #E6CD97; } .btn--gold:hover, .btn--brass:hover { box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .6); } .btn--white { --btn-bg: var(--paper); --btn-fg: var(--forest); --btn-bd: var(--paper); --btn-bg-h: var(--parchment); --btn-bd-h: var(--parchment); } .btn--white:hover { box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .5); } .btn--outline { --btn-bg: transparent; --btn-fg: var(--forest); --btn-bd: var(--line-strong); --btn-bg-h: var(--paper); --btn-bd-h: var(--forest); } .btn--outline:hover { box-shadow: var(--shadow-xs); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--redwood); --btn-bd: transparent; --btn-bg-h: var(--redwood-soft); --btn-bd-h: transparent; } .btn--ghost:hover { box-shadow: none; } .btn--light { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: rgba(244, 239, 230, .35); --btn-bg-h: rgba(244, 239, 230, .08); --btn-bd-h: var(--gold-2); } .btn--light:hover { box-shadow: none; } .btn--teal { /* alias */ } .btn--sm { padding: .6rem 1rem; font-size: .86rem; } .btn--lg { padding: 1.02rem 1.75rem; font-size: 1rem; } .btn--block { width: 100%; } .btn--icon { padding: .7rem; width: 44px; height: 44px; } .btn__icon { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform var(--dur) var(--ease); } .btn:hover .btn__icon--arrow { transform: translateX(3px); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; } .btn-row--center { justify-content: center; } .link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; font-size: .94rem; color: var(--redwood); padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: color var(--dur) var(--ease), background-size var(--dur) var(--ease); } .link-arrow svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); } .link-arrow:hover { color: var(--forest); background-size: 100% 1px; } .link-arrow:hover svg { transform: translateX(4px); } .link-arrow--light { color: var(--gold-2); } .link-arrow--light:hover { color: #fff; } .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem; border-radius: var(--r-xs); background: var(--redwood); color: #fff; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.25; } .badge--gold, .badge--brass { background: var(--gold-2); color: var(--forest-3); } .badge--forest, .badge--navy { background: var(--forest); color: var(--on-dark); } .badge--parchment, .badge--sand { background: var(--parchment-2); color: var(--forest); } .badge--soft { background: var(--redwood-soft); color: var(--redwood); } .badge--light { background: rgba(244, 239, 230, .1); color: var(--on-dark); border: 1px solid rgba(244, 239, 230, .2); } .badge--success { background: var(--success-soft); color: var(--success); } /* Docket status stamp */ .stamp { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .5rem; border: 1px solid currentColor; border-radius: 2px; font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; color: var(--muted); background: transparent; } .stamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .stamp--ok { color: var(--success); background: var(--success-soft); } .stamp--due { color: var(--redwood); background: var(--redwood-soft); } .stamp--pending { color: var(--gold-3); background: var(--gold-soft); } .stamp--muted { color: var(--muted); background: var(--parchment); } .stamp--light { color: var(--gold-2); background: rgba(217, 190, 133, .08); } .stamp--plain::before { display: none; } .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: var(--r-xs); border: 1px solid var(--line-strong); background: var(--paper); color: var(--forest); font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; transition: all var(--dur) var(--ease); } .chip:hover { border-color: var(--redwood); color: var(--redwood); } .chip--active, .chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--on-dark); } .chip svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; } .pill-row { display: flex; flex-wrap: wrap; gap: .5rem; } /* ========================================================================== 6. HEADER / NAVIGATION ========================================================================== */ .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--forest); color: #fff; padding: .75rem 1.1rem; border-radius: var(--r-sm); font-weight: 600; transition: top .2s var(--ease); } .skip-link:focus { top: 1rem; color: #fff; } .site-header { position: sticky; top: 0; z-index: 100; background: var(--ivory); border-bottom: 1px solid var(--line-strong); transition: box-shadow var(--dur) var(--ease); } /* second hairline under the header: ledger double rule */ .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--line); pointer-events: none; } .site-header.is-scrolled { box-shadow: 0 10px 26px -18px rgba(21, 37, 29, .45); } .utility-bar { height: var(--utility-h); background: var(--forest-3); color: var(--on-dark-muted); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; overflow: hidden; transition: margin-top .32s var(--ease); } .site-header.is-scrolled .utility-bar { margin-top: calc(var(--utility-h) * -1); } .utility-bar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .utility-bar__note { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .12em; } .utility-bar__note span { color: var(--gold-2); } .utility-bar__links { display: flex; align-items: center; gap: 1.4rem; flex-shrink: 0; } .utility-bar__links a { color: var(--on-dark-muted); display: inline-flex; align-items: center; gap: .4rem; } .utility-bar__links a:hover { color: var(--gold-2); } .utility-bar__links svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .site-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); } .brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--forest); font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; letter-spacing: -.01em; line-height: 1; flex-shrink: 0; } .brand:hover { color: var(--forest); } .brand__mark { width: 38px; height: 44px; flex-shrink: 0; } .brand__name { display: flex; flex-direction: column; gap: .3rem; } .brand__tag { font-family: var(--font-mono); font-size: .56rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--redwood); padding-top: .3rem; border-top: 1px solid var(--line-strong); } .brand--light, .brand--light:hover { color: var(--on-dark); } .brand--light .brand__tag { color: var(--gold-2); border-top-color: rgba(217, 190, 133, .3); } .nav { display: flex; align-items: center; gap: var(--s-6); } .nav__list { display: flex; align-items: center; gap: .15rem; } .nav__list a { display: inline-block; padding: .5rem .75rem; color: var(--ink); font-weight: 500; font-size: .92rem; position: relative; transition: color var(--dur) var(--ease); } .nav__list a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .15rem; height: 1px; background: var(--redwood); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .nav__list a:hover { color: var(--redwood); } .nav__list a:hover::after { transform: scaleX(1); } .nav__list a[aria-current="page"] { color: var(--redwood); } .nav__list a[aria-current="page"]::after { transform: scaleX(1); height: 2px; } .nav__cta { display: flex; align-items: center; gap: .75rem; } .nav__phone { display: none; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .9rem; color: var(--forest); } .nav__phone svg { width: 16px; height: 16px; stroke: var(--redwood); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .nav__phone:hover { color: var(--redwood); } .nav__login { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; font-weight: 500; font-size: .92rem; color: var(--forest); border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .nav__login svg { width: 15px; height: 15px; fill: none; stroke: var(--redwood); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .nav__login:hover { color: var(--redwood); border-bottom-color: var(--redwood); } .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: var(--forest); position: relative; z-index: 130; background: var(--paper); } .nav-toggle span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.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(-6.5px) rotate(-45deg); } .nav-backdrop { position: fixed; inset: 0; background: rgba(21, 37, 29, .5); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); z-index: 90; } body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } @media (max-width: 1023px) { .nav-toggle { display: inline-flex; } .nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--ivory); border-left: 1px solid var(--line-strong); box-shadow: -24px 0 60px -24px rgba(21, 37, 29, .45); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: calc(var(--header-h) + 1rem) 1.5rem 2rem; transform: translateX(105%); visibility: hidden; transition: transform .38s var(--ease-out), visibility 0s linear .38s; z-index: 120; overflow-y: auto; } .nav.is-open { transform: translateX(0); visibility: visible; transition: transform .38s var(--ease-out), visibility 0s; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; counter-reset: navc; } .nav__list li { counter-increment: navc; } .nav__list a { display: flex; align-items: baseline; gap: .9rem; padding: .95rem .25rem; font-size: 1.2rem; font-family: var(--font-display); font-weight: 400; border-bottom: 1px solid var(--line); } .nav__list a::before { content: "§ " counter(navc, decimal-leading-zero); font-family: var(--font-mono); font-size: .68rem; color: var(--muted-2); letter-spacing: .06em; } .nav__list a::after { display: none; } .nav__list a[aria-current="page"] { color: var(--redwood); } .nav__cta { flex-direction: column; align-items: stretch; margin-top: 1.5rem; gap: 1rem; } .nav__cta .btn { width: 100%; } .nav__phone { display: inline-flex; justify-content: center; } .nav__login { justify-content: center; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm, 6px); } .nav__login:hover { border-color: var(--redwood); } } .nav__list a, .nav__login { white-space: nowrap; } @media (min-width: 1024px) and (max-width: 1199px) { .nav { gap: 1rem; } /* no room for a second login entry here; the utility bar's "Client portal" link goes to the same sign-in */ .nav__login { display: none; } .nav__list a { padding: .5rem .5rem; font-size: .87rem; } .nav__list a::after { left: .5rem; right: .5rem; } .brand { font-size: 1.35rem; } } /* ========================================================================== 7. HERO (home) + PAGE HERO (inner pages) + DOCKET CARD ========================================================================== */ .hero, .page-hero, .cta-band, .rings { background-color: var(--forest); background-image: var(--rings-light), radial-gradient(900px 520px at 88% 10%, rgba(168, 73, 47, .22), transparent 62%), linear-gradient(165deg, var(--forest-2) 0%, var(--forest) 45%, var(--forest-3) 100%); background-repeat: no-repeat; background-size: 1250px auto, cover, cover; background-position: right -380px top -260px, center, center; } .rings--paper { background-image: var(--rings-dark); background-repeat: no-repeat; background-size: 1100px auto; background-position: right -420px center; } .hero { position: relative; color: var(--on-dark); overflow: hidden; padding-block: clamp(2.25rem, 4vw, 3rem) 0; isolation: isolate; } .hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; } .hero__bg svg { width: 100%; height: 100%; } .hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 95%); mask-image: linear-gradient(to left, #000 20%, transparent 95%); } .hero__photo img { width: 100%; height: 100%; object-fit: cover; opacity: .2; mix-blend-mode: luminosity; filter: grayscale(1) contrast(1.1); } .hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-bottom: .9rem; margin-bottom: clamp(2.5rem, 5.5vw, 4.25rem); border-bottom: 1px solid rgba(217, 190, 133, .28); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); } .hero__meta span:first-child { color: var(--gold-2); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; } .hero__copy { max-width: 640px; } .hero__title { color: var(--on-dark); margin-bottom: 1.4rem; } .hero__title em { font-style: italic; color: var(--gold-2); } .hero__lede { color: var(--on-dark-muted); font-size: clamp(1.07rem, 1.45vw, 1.22rem); line-height: 1.62; max-width: 50ch; margin-bottom: 2.1rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; } .hero__art { position: relative; padding-top: 1.5rem; } /* ruled figure strip along the bottom of the hero */ .hero__trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid rgba(217, 190, 133, .28); } .hero__trust li { padding: 1.25rem 1.25rem 1.5rem; border-left: 1px solid rgba(244, 239, 230, .12); display: flex; flex-direction: column; gap: .3rem; font-size: var(--fs-sm); color: var(--on-dark-muted); line-height: 1.4; } .hero__trust li:first-child { border-left: 0; padding-left: 0; } .hero__trust strong { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--on-dark); font-variant-numeric: tabular-nums lining-nums; } .hero--center { text-align: center; } .hero--center .hero__copy { max-width: 800px; margin-inline: auto; } .hero--center .hero__lede, .hero--center .hero__actions { margin-inline: auto; justify-content: center; } /* ---------- Partner docket (signature ledger card) ---------- */ .docket-card { position: relative; max-width: 520px; margin-left: auto; background-color: var(--paper); background-image: linear-gradient(90deg, transparent 2.55rem, rgba(168, 73, 47, .45) 2.55rem, rgba(168, 73, 47, .45) calc(2.55rem + 1px), transparent calc(2.55rem + 1px), transparent 2.75rem, rgba(168, 73, 47, .45) 2.75rem, rgba(168, 73, 47, .45) calc(2.75rem + 1px), transparent calc(2.75rem + 1px)), var(--noise); color: var(--ink); border-radius: var(--r-sm); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 40px 70px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .08); padding: 1.35rem 1.4rem 1.1rem 3.35rem; } /* stacked sheets behind */ .docket-card::before, .docket-card::after { content: ""; position: absolute; inset: 0; background: var(--parchment); border-radius: var(--r-sm); z-index: -1; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); } .docket-card::before { transform: translate(10px, 10px) rotate(1.2deg); background: #EDE4D5; } .docket-card::after { transform: translate(18px, 18px) rotate(2.2deg); background: #E3D8C5; opacity: .75; } .docket-card__tab { position: absolute; top: -1.85rem; left: 3.35rem; padding: .45rem .9rem .5rem; background: var(--redwood); color: #FBEFE9; font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; border-radius: var(--r-xs) var(--r-xs) 0 0; } .docket-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; border-bottom: 2px solid var(--forest); margin-bottom: .2rem; } .docket-card__kicker { margin: 0 0 .25rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) !important; } .docket-card__client { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.15; color: var(--forest) !important; } .docket-card__rows { display: grid; } .docket-card__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem 1rem; padding: .72rem 0; border-bottom: 1px solid var(--line); } .docket-card__row dt { font-size: .88rem; font-weight: 500; color: var(--ink); line-height: 1.3; } .docket-card__row dt small { display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .05em; color: var(--muted-2); margin-top: .15rem; font-weight: 400; } .docket-card__row dd { text-align: right; font-family: var(--font-mono); font-size: .92rem; color: var(--forest); font-variant-numeric: tabular-nums; } .docket-card__big { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; color: var(--forest); letter-spacing: -.01em; } .docket-card__big small { font-size: .62rem; color: var(--muted-2); margin-left: .25rem; letter-spacing: .04em; } .docket-card__bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-left: auto; justify-content: flex-end; } .docket-card__bars i { display: block; width: 7px; background: var(--moss); border-radius: 1px 1px 0 0; opacity: .85; } .docket-card__bars i:last-child { background: var(--redwood); } .docket-card__table { width: 100%; border-collapse: collapse; font-size: .74rem; margin: .1rem 0 .15rem; } .docket-card__table th { font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); text-align: left; padding: .55rem 0 .3rem; border-bottom: 1px solid var(--line-strong); } .docket-card__table td { padding: .42rem 0; border-bottom: 1px dotted var(--line-strong); color: var(--ink); } .docket-card__table th + th, .docket-card__table td + td { text-align: right; padding-left: .6rem; } .docket-card__table td + td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .docket-card__table .is-low { color: var(--redwood); } .docket-card__meter { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: .5rem; } .docket-card__meter i { width: 9px; height: 9px; border: 1px solid var(--moss); border-radius: 1px; } .docket-card__meter i.on { background: var(--moss); } .docket-card__date { display: inline-flex; align-items: baseline; gap: .45rem; } .docket-card__date strong { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; line-height: 1; color: var(--redwood); } .docket-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .8rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: var(--muted-2) !important; } .docket-card__foot p { margin: 0; color: var(--muted-2) !important; } .docket-card__sig { font-family: var(--font-display); font-style: italic; font-size: .95rem; color: var(--forest); letter-spacing: 0; } /* notary-style seal */ .seal { position: absolute; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--forest-3); color: var(--gold-2); border: 1px solid rgba(217, 190, 133, .6); box-shadow: 0 0 0 5px var(--forest-3), 0 0 0 6px rgba(217, 190, 133, .45), 0 18px 30px -12px rgba(0, 0, 0, .6); font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; transform: rotate(-8deg); z-index: 2; } .seal strong { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; letter-spacing: 0; line-height: 1; color: var(--on-dark); text-transform: none; margin: .1rem 0; } .hero .seal { bottom: -2.75rem; left: -4.25rem; } /* ---------- Inner-page hero ---------- */ .page-hero { position: relative; color: var(--on-dark); padding-block: clamp(3.25rem, 6.5vw, 5.25rem) clamp(3.25rem, 6.5vw, 4.75rem); overflow: hidden; isolation: isolate; border-bottom: 3px double rgba(217, 190, 133, .5); } .page-hero--image::before { content: ""; position: absolute; inset: 0; background-image: var(--hero-img); background-size: cover; background-position: center; opacity: .16; filter: grayscale(1); mix-blend-mode: luminosity; z-index: -1; } .page-hero__inner { max-width: 780px; position: relative; } .page-hero h1 { margin-bottom: .55rem; } .page-hero .lede { color: var(--on-dark-muted); } .page-hero--center .page-hero__inner { margin-inline: auto; text-align: center; } .page-hero--center .lede { margin-inline: auto; } .page-hero--center .breadcrumb, .page-hero--center .page-hero__meta { justify-content: center; } .page-hero__meta { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid rgba(217, 190, 133, .25); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); } .page-hero__meta strong { color: var(--gold-2); font-weight: 500; } .page-hero--split .page-hero__inner { max-width: none; display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: end; } .page-hero__num { position: absolute; right: var(--gutter); bottom: -.18em; font-family: var(--font-display); font-weight: 300; font-size: clamp(8rem, 18vw, 15rem); line-height: 1; color: rgba(217, 190, 133, .09); pointer-events: none; z-index: -1; } .page-hero--parchment { background: var(--parchment); background-image: var(--rings-dark), var(--noise); background-repeat: no-repeat, repeat; background-size: 1100px auto, auto; background-position: right -420px center, 0 0; color: var(--ink); border-bottom: 3px double var(--line-strong); } .page-hero--parchment h1, .page-hero--parchment h2 { color: var(--forest); } .page-hero--parchment p:not(.eyebrow), .page-hero--parchment .lede { color: var(--muted); } .page-hero--parchment .breadcrumb, .page-hero--parchment .breadcrumb a, .page-hero--parchment .page-hero__meta { color: var(--muted); } .page-hero--parchment .breadcrumb [aria-current], .page-hero--parchment .page-hero__meta strong { color: var(--redwood); } .page-hero--parchment .eyebrow { color: var(--redwood); } .page-hero--parchment a:not(.btn) { color: var(--redwood); } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 1.5rem; } .breadcrumb a { color: var(--on-dark-muted) !important; } .breadcrumb a:hover { color: var(--gold-2) !important; } .breadcrumb li + li::before { content: "›"; opacity: .5; margin-right: .45rem; } .breadcrumb [aria-current] { color: var(--gold-2); } /* ========================================================================== 8. CARDS ========================================================================== */ .card { position: relative; background: var(--paper); border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .card:hover, .card--hover:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card--static:hover { transform: none; box-shadow: none; border-color: var(--line); } .card--flat { background: transparent; } .card--parchment, .card--sand { background: var(--parchment); border-color: transparent; } .card--forest, .card--navy { background: var(--forest); border-color: rgba(244, 239, 230, .08); color: var(--on-dark); } .card--forest p, .card--navy p { color: var(--on-dark-muted); } .card--teal { background: var(--redwood); border-color: transparent; color: #fff; } .card--teal h3, .card--teal h4 { color: #fff; } .card--teal p { color: rgba(255, 255, 255, .82); } .card--xl { border-radius: var(--r-xl); } .card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--parchment-2); position: relative; border-bottom: 1px solid var(--line); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease); filter: saturate(.85); } .card:hover .card__media img { transform: scale(1.03); filter: saturate(1); } .card__media--square { aspect-ratio: 1; } .card__media--portrait { aspect-ratio: 4 / 5; } .card__media .badge, .card__media .stamp { position: absolute; top: .9rem; left: .9rem; } .card__body { padding: clamp(1.35rem, 2.4vw, 1.8rem); display: flex; flex-direction: column; flex: 1; } .card__body--lg { padding: clamp(1.75rem, 3vw, 2.4rem); } .card__title { font-size: var(--fs-h3); margin-bottom: .5rem; } .card__title a { color: inherit; } .card__title a:hover { color: var(--redwood); } .card__text { color: var(--muted); margin-bottom: 1.2rem; } .card__footer { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .card__link-overlay::after { content: ""; position: absolute; inset: 0; z-index: 1; } .card__num { position: absolute; top: 1.2rem; right: 1.35rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted-2); } /* Service / capability card */ .service-card { padding: clamp(1.6rem, 2.6vw, 2.1rem); border-top: 3px solid var(--forest); border-radius: 0 0 var(--r-md) var(--r-md); } .service-card:hover { border-top-color: var(--redwood); } .service-card .icon-badge { margin-bottom: 1.4rem; } .service-card h3 { font-size: 1.45rem; margin-bottom: .55rem; } .service-card > p { color: var(--muted); margin-bottom: 1.25rem; } .service-card__list { display: grid; margin: 0 0 1.5rem; border-top: 1px solid var(--line); } .service-card__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dotted var(--line-strong); font-size: var(--fs-sm); color: var(--ink); } .service-card__list li span:last-child { font-family: var(--font-mono); font-size: .72rem; color: var(--muted-2); letter-spacing: .04em; white-space: nowrap; } .service-card .link-arrow { margin-top: auto; align-self: flex-start; } /* Feature card */ .feature-card { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.3rem 1.35rem; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .feature-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .feature-card--plain { background: transparent; border: 0; padding: 0; } .feature-card--plain:hover { box-shadow: none; } .feature-card--dark { background: rgba(244, 239, 230, .04); border-color: rgba(244, 239, 230, .12); color: var(--on-dark); } .feature-card--dark:hover { border-color: rgba(217, 190, 133, .4); } .feature-card--dark h4 { color: var(--on-dark); } .feature-card--dark p { color: var(--on-dark-muted); } .feature-card h4 { margin-bottom: .3rem; font-size: 1.12rem; } .feature-card p { color: var(--muted); font-size: var(--fs-sm); margin: 0; } .feature-card__icon { flex-shrink: 0; } /* Glass panel */ .glass { background: rgba(244, 239, 230, .06); border: 1px solid rgba(244, 239, 230, .14); border-radius: var(--r-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--on-dark); } .glass--light { background: rgba(255, 253, 249, .85); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-md); } /* Testimonial — memo style */ .testimonial { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(1.5rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: 1.1rem; position: relative; } .testimonial__re { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; } .testimonial__re b { color: var(--redwood); font-weight: 500; } .testimonial__stars { color: var(--gold); letter-spacing: .08em; font-size: .95rem; } .testimonial__quote { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.5; color: var(--forest); margin: 0; } .testimonial__quote::before { content: "\201C"; color: var(--redwood); margin-right: .05em; } .testimonial__quote::after { content: "\201D"; color: var(--redwood); margin-left: .02em; } .testimonial__quote--lg { font-size: clamp(1.3rem, 2vw, 1.7rem); } .testimonial__author { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: .4rem; } .testimonial__avatar { width: 46px; height: 46px; border-radius: var(--r-xs); background: var(--forest); color: var(--gold-2); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; flex-shrink: 0; overflow: hidden; } .testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; } .testimonial__name { display: block; font-weight: 600; color: var(--forest); font-size: .95rem; } .testimonial__meta { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; } .testimonial--dark { background: rgba(244, 239, 230, .05); border-color: rgba(244, 239, 230, .12); } .testimonial--dark .testimonial__quote, .testimonial--dark .testimonial__name { color: var(--on-dark); } .testimonial--dark .testimonial__meta, .testimonial--dark .testimonial__re { color: var(--on-dark-muted); } .testimonial--dark .testimonial__re { border-bottom-color: rgba(244, 239, 230, .14); } .testimonial--dark .testimonial__re b, .testimonial--dark .testimonial__quote::before, .testimonial--dark .testimonial__quote::after { color: var(--gold-2); } .testimonial--parchment, .testimonial--sand { background: var(--parchment); border-color: transparent; } /* Article / briefing card */ .article-card .card__body { padding: 1.35rem 1.45rem 1.5rem; } .article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; } .article-card__meta li + li::before { content: "/"; margin-right: .6rem; opacity: .5; } .article-card__cat { color: var(--redwood); } .article-card .card__title { font-size: 1.32rem; line-height: 1.25; } .article-card .card__text { font-size: var(--fs-sm); } /* Team card */ .team-card { text-align: left; } .team-card__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--parchment-2); border-bottom: 1px solid var(--line); } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(.25) sepia(.08); transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease); } .team-card:hover .team-card__photo img { transform: scale(1.02); filter: none; } .team-card .card__body { padding: 1.2rem 1.35rem 1.45rem; } .team-card h3 { font-size: 1.28rem; margin-bottom: .2rem; } .team-card__role { font-family: var(--font-mono); color: var(--redwood); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .75rem; line-height: 1.45; } .team-card__creds { font-family: var(--font-mono); font-size: .7rem; color: var(--muted-2); letter-spacing: .04em; } .team-card p { font-size: var(--fs-sm); color: var(--muted); } .team-card__links { display: flex; gap: .5rem; margin-top: 1rem; } /* Value card */ .value-card { padding: 1.75rem 1.6rem; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); position: relative; } .value-card__num { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; color: var(--redwood); padding-bottom: .8rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); } .value-card h3 { font-size: 1.3rem; } .value-card p { color: var(--muted); font-size: var(--fs-sm); } /* Icon badge */ .icon-badge { width: 46px; height: 46px; border-radius: var(--r-sm); display: inline-grid; place-items: center; background: var(--redwood-soft); color: var(--redwood); border: 1px solid rgba(var(--redwood-rgb), .15); flex-shrink: 0; } .icon-badge svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; } .icon-badge--gold, .icon-badge--brass { background: var(--gold-soft); color: var(--gold-3); border-color: rgba(184, 145, 74, .25); } .icon-badge--forest, .icon-badge--navy { background: var(--forest); color: var(--gold-2); border-color: var(--forest); } .icon-badge--redwood, .icon-badge--teal { background: var(--redwood); color: #fff; border-color: var(--redwood); } .icon-badge--parchment, .icon-badge--sand { background: var(--parchment); color: var(--forest); border-color: var(--line); } .icon-badge--light { background: rgba(244, 239, 230, .06); color: var(--gold-2); border-color: rgba(217, 190, 133, .3); } .icon-badge--sm { width: 36px; height: 36px; } .icon-badge--sm svg { width: 18px; height: 18px; } .icon-badge--lg { width: 58px; height: 58px; } .icon-badge--lg svg { width: 28px; height: 28px; } .icon-badge--round { border-radius: 50%; } .icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; } .icon--sm { width: 16px; height: 16px; } /* Stats */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .stat-row--3 { grid-template-columns: repeat(3, 1fr); } .stat-row--bordered { gap: 0; border-top: 2px solid var(--forest); border-bottom: 1px solid var(--line-strong); } .stat-row--bordered .stat { padding: 1.6rem 1.5rem 1.5rem; } .stat-row--bordered .stat:first-child { padding-left: 0; } .stat-row--bordered .stat + .stat { border-left: 1px solid var(--line); } .stat { text-align: left; } .stat__value { font-family: var(--font-display); font-size: clamp(2.5rem, 4.4vw, 3.7rem); font-weight: 300; line-height: 1; color: var(--forest); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; margin-bottom: .6rem; } .stat__value sup, .stat__value .stat__suffix { font-size: .5em; color: var(--redwood); vertical-align: baseline; margin-left: .04em; } .stat__label { color: var(--ink); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; } .stat__note { display: block; margin-top: .45rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); } .stat-row--dark .stat__value { color: var(--on-dark); } .stat-row--dark .stat__value sup, .stat-row--dark .stat__suffix { color: var(--gold-2); } .stat-row--dark .stat__label { color: var(--on-dark); } .stat-row--dark .stat__note { color: var(--on-dark-muted); } .stat-row--dark.stat-row--bordered { border-top-color: var(--gold-2); border-bottom-color: rgba(244, 239, 230, .15); } .stat-row--dark.stat-row--bordered .stat + .stat { border-color: rgba(244, 239, 230, .12); } .stat-row--center .stat { text-align: center; } .stat-row--center.stat-row--bordered .stat:first-child { padding-left: 1.5rem; } /* ========================================================================== 9. LEDGER / DOCKET PATTERNS (Redwood-specific) ========================================================================== */ /* Ruled-paper ledger panel */ .ledger { position: relative; background-color: var(--paper); background-image: linear-gradient(90deg, transparent 2.25rem, rgba(168, 73, 47, .4) 2.25rem, rgba(168, 73, 47, .4) calc(2.25rem + 1px), transparent calc(2.25rem + 1px)), repeating-linear-gradient(180deg, transparent 0, transparent calc(2.4rem - 1px), rgba(107, 127, 94, .16) calc(2.4rem - 1px), rgba(107, 127, 94, .16) 2.4rem); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.4rem 1.5rem 1.2rem 3.1rem; box-shadow: var(--shadow-sm); } .ledger__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-bottom: .75rem; margin-bottom: .25rem; border-bottom: 2px solid var(--forest); } .ledger__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--forest); margin: 0; line-height: 1.2; } .ledger__meta { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; min-height: 2.4rem; padding: .55rem 0; border-bottom: 1px solid var(--line); } .ledger__label { font-size: var(--fs-sm); color: var(--ink); } .ledger__label small { display: block; font-family: var(--font-mono); font-size: .66rem; color: var(--muted-2); letter-spacing: .04em; } .ledger__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--forest); text-align: right; } .ledger__foot { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; color: var(--muted-2); } .ledger__row.is-total { border-bottom: 3px double var(--forest); font-weight: 600; } /* Docket table (deadlines, schedules, fee tables) */ .docket-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; } .docket-table caption { text-align: left; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 0 .75rem; } .docket-table th, .docket-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .docket-table thead th { font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--parchment); border-bottom: 2px solid var(--forest); white-space: nowrap; } .docket-table tbody th { font-weight: 500; color: var(--forest); } .docket-table td.num, .docket-table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .docket-table .date { font-family: var(--font-mono); color: var(--redwood); white-space: nowrap; } .docket-table tbody tr { transition: background var(--dur) var(--ease); } .docket-table tbody tr:hover { background: rgba(241, 235, 225, .55); } .docket-table tr.group th { background: var(--ivory); font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--redwood); padding: .55rem 1rem; } .docket-table tr.is-total td, .docket-table tr.is-total th { border-top: 1px solid var(--forest); border-bottom: 3px double var(--forest); font-weight: 600; } .docket-table tbody tr:last-child td, .docket-table tbody tr:last-child th { border-bottom: 0; } /* Numbered ruled list */ .ledger-list { border-top: 1px solid var(--line-strong); counter-reset: ll; } .ledger-list li { counter-increment: ll; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--line); transition: background var(--dur) var(--ease), padding var(--dur) var(--ease); } .ledger-list li:hover { background: linear-gradient(90deg, rgba(241, 235, 225, .8), transparent); } .ledger-list__num { font-family: var(--font-mono); font-size: .72rem; color: var(--redwood); letter-spacing: .06em; } .ledger-list__num:empty::before { content: counter(ll, decimal-leading-zero); } .ledger-list__title { font-family: var(--font-display); font-size: 1.2rem; color: var(--forest); line-height: 1.3; } .ledger-list__title small { display: block; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--muted); margin-top: .15rem; line-height: 1.5; } .ledger-list__note { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--muted-2); text-align: right; white-space: nowrap; } /* Table of contents with dotted leaders */ .toc { display: grid; } .toc li { border-bottom: 1px solid var(--line); } .toc a { display: flex; align-items: baseline; gap: .85rem; padding: .85rem 0; color: var(--forest); transition: color var(--dur) var(--ease), padding var(--dur) var(--ease); } .toc a:hover { color: var(--redwood); padding-left: .4rem; } .toc__num { font-family: var(--font-mono); font-size: .72rem; color: var(--redwood); min-width: 2.6rem; } .toc__title { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.3; } .toc__lead { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-.3rem); min-width: 1.5rem; } .toc__ref { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; } .toc--dark a { color: var(--on-dark); } .toc--dark li { border-color: rgba(244, 239, 230, .12); } .toc--dark .toc__num { color: var(--gold-2); } .toc--dark .toc__lead { border-color: rgba(244, 239, 230, .25); } /* Pull quote */ .pull-quote { position: relative; padding: 1.5rem 0 1.5rem 2rem; border-left: 2px solid var(--redwood); font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.35; color: var(--forest); } .pull-quote cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* ========================================================================== 10. PATTERNS ========================================================================== */ /* Software / credential strip */ .logo-strip { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); } /* label sits OUTSIDE (just above) the .logo-strip so item nth-child math stays simple */ .logo-strip__label { text-align: center; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; } .logo-strip__item { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.35rem 1.25rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; color: var(--muted); white-space: nowrap; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .logo-strip__item + .logo-strip__item { border-left: 1px solid var(--line); } .logo-strip__item:hover { color: var(--forest); background: rgba(255, 253, 249, .6); } .logo-strip__item svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .logo-strip__item--sans { font-family: var(--font-body); font-weight: 600; letter-spacing: .02em; font-size: 1.02rem; } .logo-strip__item--mono { font-family: var(--font-mono); font-weight: 500; font-size: .98rem; letter-spacing: 0; } .logo-strip__item--serif { font-family: var(--font-display); font-style: italic; } .logo-strip--dark { border-color: rgba(244, 239, 230, .18); } .logo-strip--dark .logo-strip__item { color: var(--on-dark-muted); } .logo-strip--dark .logo-strip__item { border-color: rgba(244, 239, 230, .1) !important; } .logo-strip--dark .logo-strip__item:hover { color: #fff; background: rgba(255, 255, 255, .03); } .section--forest .logo-strip__label, .logo-strip__label--light { color: rgba(244, 239, 230, .6); } /* Process steps — ledger columns */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: step; border-top: 2px solid var(--forest); } .steps--3 { grid-template-columns: repeat(3, 1fr); } .step { position: relative; padding: 1.6rem 1.6rem 1.2rem; counter-increment: step; border-left: 1px solid var(--line); } .step:first-child { border-left: 0; padding-left: 0; } .step::before { content: ""; position: absolute; top: -6px; left: 1.6rem; width: 10px; height: 10px; background: var(--ivory); border: 2px solid var(--redwood); border-radius: 50%; } .step:first-child::before { left: 0; } .step__num { display: block; font-family: var(--font-display); font-size: 3rem; font-weight: 300; line-height: 1; color: var(--redwood); margin: .6rem 0 .9rem; font-variant-numeric: lining-nums; } .step__num::before { content: counter(step, decimal-leading-zero); } .step__meta { display: inline-block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .2rem .45rem; border: 1px solid var(--line-strong); border-radius: 2px; margin-bottom: .9rem; } .step__title { font-size: 1.3rem; margin-bottom: .45rem; } .step p { color: var(--muted); font-size: var(--fs-sm); margin: 0; } .steps--vertical { grid-template-columns: 1fr; border-top: 0; } .steps--vertical .step { border-left: 1px solid var(--line-strong); padding: 0 0 2rem 2.25rem; margin-left: .35rem; } .steps--vertical .step:first-child { padding-left: 2.25rem; border-left: 1px solid var(--line-strong); } .steps--vertical .step:last-child { border-left-color: transparent; } .steps--vertical .step::before, .steps--vertical .step:first-child::before { top: 0; left: -6px; } .steps--vertical .step__num { font-size: 1.1rem; font-family: var(--font-mono); font-weight: 500; margin: -.2rem 0 .4rem; } .steps--dark { border-top-color: var(--gold-2); } .steps--dark .step { border-color: rgba(244, 239, 230, .12); } .steps--dark .step::before { background: var(--forest); border-color: var(--gold-2); } .steps--dark .step__num { color: var(--gold-2); } .steps--dark .step__title { color: var(--on-dark); } .steps--dark .step p { color: var(--on-dark-muted); } .steps--dark .step__meta { color: var(--on-dark-muted); border-color: rgba(244, 239, 230, .2); } /* Tabs — index-tab underline by default */ .tabs__list { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line-strong); margin-bottom: 2rem; } .tabs__tab { padding: .85rem 1.15rem; font-weight: 500; font-size: .93rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); display: inline-flex; align-items: center; gap: .5rem; } .tabs__tab:hover { color: var(--forest); background: rgba(241, 235, 225, .6); } .tabs__tab[aria-selected="true"] { color: var(--redwood); border-bottom-color: var(--redwood); } .tabs__tab .badge { font-size: .6rem; padding: .15rem .4rem; } .tabs__panel[hidden] { display: none; } .tabs__panel { animation: fadeIn .35s var(--ease); } .tabs--pill .tabs__list { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .25rem; gap: .25rem; background: var(--paper); } .tabs--pill .tabs__tab { border: 0; margin: 0; border-radius: var(--r-xs); padding: .6rem 1rem; } .tabs--pill .tabs__tab[aria-selected="true"] { background: var(--forest); color: var(--on-dark); } .tabs--dark .tabs__list { border-color: rgba(244, 239, 230, .18); } .tabs--dark .tabs__tab { color: var(--on-dark-muted); } .tabs--dark .tabs__tab:hover { background: rgba(255, 255, 255, .04); color: var(--on-dark); } .tabs--dark .tabs__tab[aria-selected="true"] { color: var(--gold-2); border-bottom-color: var(--gold-2); } .tabs--center .tabs__list { justify-content: center; } .tabs--underline { /* default already */ } /* Framework — three stage columns */ .framework { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--forest); } .framework__stage { position: relative; padding: 1.75rem 1.75rem 1.5rem; border-left: 1px solid var(--line); } .framework__stage:first-child { border-left: 0; padding-left: 0; } .framework__stage--a, .framework__stage--acquire { --stage-color: var(--redwood); } .framework__stage--b, .framework__stage--operate { --stage-color: var(--gold-3); } .framework__stage--c, .framework__stage--exit { --stage-color: var(--moss-2); } .framework__label { display: inline-flex; align-items: baseline; gap: .6rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stage-color, var(--redwood)); margin-bottom: 1rem; } .framework__label span { font-family: var(--font-display); font-size: 2.2rem; font-weight: 300; letter-spacing: 0; color: var(--line-strong); line-height: 1; } .framework__stage h3 { font-size: 1.45rem; margin-bottom: .6rem; } .framework__stage > p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.1rem; } .framework--dark { border-top-color: var(--gold-2); } .framework--dark .framework__stage { border-color: rgba(244, 239, 230, .12); } .framework--dark .framework__stage h3 { color: var(--on-dark); } .framework--dark .framework__stage > p { color: var(--on-dark-muted); } .framework--dark .framework__label { color: var(--gold-2); } .framework--dark .framework__label span { color: rgba(244, 239, 230, .2); } /* Checklist */ .checklist { display: grid; gap: .6rem; } .checklist li { position: relative; padding-left: 1.75rem; font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; } .checklist li::before { content: ""; position: absolute; left: 0; top: .15em; width: 16px; height: 16px; border: 1px solid rgba(var(--redwood-rgb), .45); border-radius: 2px; background: var(--paper) var(--tick) center / 11px no-repeat; } .checklist--light li { color: var(--on-dark-muted); } .checklist--light li::before { border-color: rgba(217, 190, 133, .5); background-color: transparent; background-image: var(--tick-light); } .checklist--gold li::before, .checklist--brass li::before { border-color: rgba(184, 145, 74, .6); background-color: var(--gold-soft); } .checklist--moss li::before { border-color: rgba(63, 107, 69, .5); background-image: var(--tick-moss); background-color: var(--success-soft); } .checklist--2col { grid-template-columns: 1fr 1fr; gap: .6rem 1.75rem; } .checklist--lg li { font-size: var(--fs-md); padding-left: 2rem; } .checklist--lg li::before { width: 19px; height: 19px; background-size: 13px; top: .12em; } /* Engagement / price card */ .price-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--forest); border-radius: 0 0 var(--r-lg) var(--r-lg); padding: clamp(1.75rem, 3vw, 2.3rem); display: flex; flex-direction: column; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .price-card__ribbon { position: absolute; top: 1.35rem; right: 1.35rem; font-family: var(--font-mono); font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-3); background: var(--gold-2); padding: .3rem .55rem; border-radius: 2px; } .price-card__tier { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--redwood); margin-bottom: .7rem; } .price-card h3 { font-size: 1.6rem; margin-bottom: .5rem; } .price-card__desc { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.4rem; min-height: 3em; } .price-card__amount { display: flex; align-items: baseline; gap: .3rem; font-family: var(--font-display); color: var(--forest); margin-bottom: .3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .price-card__amount .from { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: flex-start; margin-top: .55rem; margin-right: .2rem; } .price-card__amount .num { font-family: var(--font-display); text-align: left; font-size: clamp(2.6rem, 4vw, 3.3rem); font-weight: 300; line-height: 1; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; } .price-card__amount .cur { font-size: 1.45rem; font-weight: 300; align-self: flex-start; margin-top: .3rem; } .price-card__period { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); letter-spacing: .02em; } .price-card__note { font-family: var(--font-mono); font-size: .68rem; color: var(--muted-2); margin-bottom: 1.3rem; letter-spacing: .02em; } .price-card__list { display: grid; gap: .55rem; margin: 1.3rem 0 1.75rem; padding-top: 1.3rem; border-top: 1px dotted var(--line-strong); } .price-card__list li { position: relative; padding-left: 1.6rem; font-size: var(--fs-sm); line-height: 1.5; } .price-card__list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 15px; height: 15px; background: var(--tick) center / 13px no-repeat; } .price-card__list li.is-muted { color: var(--muted-2); } .price-card__list li.is-muted::before { background: none; border-top: 1px solid var(--line-strong); width: 10px; top: .75em; height: 0; } .price-card .btn { margin-top: auto; } .price-card__fine { font-family: var(--font-mono); font-size: .66rem; color: var(--muted-2); text-align: center; margin-top: .85rem; letter-spacing: .02em; } .price-card--featured { background-color: var(--forest); background-image: var(--rings-light); background-repeat: no-repeat; background-size: 900px auto; background-position: right -520px top -380px; border-color: var(--forest); border-top-color: var(--gold-2); color: var(--on-dark); box-shadow: var(--shadow-lg); } .price-card--featured .price-card__tier { color: var(--gold-2); } .price-card--featured h3, .price-card--featured .h3, .price-card--featured .price-card__amount { color: var(--on-dark); } .price-card--featured .price-card__desc, .price-card--featured .price-card__period, .price-card--featured .price-card__note, .price-card--featured .price-card__fine, .price-card--featured .price-card__amount .from { color: var(--on-dark-muted); } .price-card--featured .price-card__amount, .price-card--featured .price-card__list { border-color: rgba(244, 239, 230, .16); } .price-card--featured .price-card__list li { color: var(--on-dark); } .price-card--featured .price-card__list li::before { background-image: var(--tick-light); } .price-card--featured .price-card__list li.is-muted { color: rgba(244, 239, 230, .45); } .price-card--compact { padding: 1.5rem; } .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } .price-grid--4 { grid-template-columns: repeat(4, 1fr); } /* Comparison table */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); } .compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: var(--fs-sm); } .compare-table th, .compare-table td { padding: .9rem 1.1rem; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; } .compare-table th:first-child, .compare-table td:first-child { text-align: left; } .compare-table thead th { background: var(--parchment); color: var(--forest); font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; border-bottom: 2px solid var(--forest); } .compare-table thead th small { display: block; font-family: var(--font-mono); font-weight: 400; color: var(--muted); font-size: .68rem; letter-spacing: .04em; margin-top: .2rem; } .compare-table thead th.is-featured { background: var(--forest); color: var(--on-dark); border-bottom-color: var(--gold-2); } .compare-table thead th.is-featured small { color: var(--on-dark-muted); } .compare-table tbody th { font-weight: 500; color: var(--ink); } .compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th { border-bottom: 0; } .compare-table tbody tr:hover td, .compare-table tbody tr:hover th { background: rgba(241, 235, 225, .5); } .compare-table td { font-family: var(--font-mono); font-size: .82rem; font-variant-numeric: tabular-nums; } .compare-table td.is-featured { background: rgba(30, 51, 41, .04); } .compare-table .group th { background: var(--ivory); color: var(--redwood); font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: .6rem 1.1rem; } .compare-table .check, .compare-table .dash { display: inline-grid; place-items: center; width: 20px; height: 20px; } .compare-table .check::before { content: ""; width: 15px; height: 15px; background: var(--tick) center / contain no-repeat; } .compare-table .dash { color: var(--line-strong); } .compare-table .dash::before { content: "—"; font-size: .8rem; } /* Accordion — ruled rows by default */ .accordion { display: grid; border-top: 1px solid var(--line-strong); } .accordion__item { border-bottom: 1px solid var(--line-strong); transition: background var(--dur) var(--ease); } .accordion__item.is-open { background: linear-gradient(180deg, rgba(241, 235, 225, .55), transparent); } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem .25rem; text-align: left; font-family: var(--font-display); font-size: 1.2rem; font-weight: 450; color: var(--forest); line-height: 1.3; transition: color var(--dur) var(--ease); } .accordion__trigger:hover { color: var(--redwood); } .accordion__trigger:focus-visible { outline-offset: -2px; } .accordion__icon { flex-shrink: 0; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); display: grid; place-items: center; color: var(--redwood); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .accordion__icon svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .accordion__icon svg line:last-child { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); transform-origin: center; } .accordion__trigger[aria-expanded="true"] .accordion__icon { background: var(--redwood); border-color: var(--redwood); color: #fff; } .accordion__trigger[aria-expanded="true"] .accordion__icon svg line:last-child { transform: rotate(90deg); opacity: 0; } .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s var(--ease); } .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; } .accordion__body { overflow: hidden; visibility: hidden; transition: visibility 0s linear .36s; } .accordion__item.is-open .accordion__body { visibility: visible; transition-delay: 0s; } .accordion__content { padding: 0 3rem 1.35rem .25rem; color: var(--muted); font-size: .96rem; } .accordion__content > * + * { margin-top: .75em; } .accordion__content ul { list-style: square; padding-left: 1.2em; } .accordion--boxed, .accordion--sand { border-top: 0; gap: .6rem; } .accordion--boxed .accordion__item, .accordion--sand .accordion__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); } .accordion--boxed .accordion__trigger, .accordion--sand .accordion__trigger { padding-inline: 1.25rem; } .accordion--boxed .accordion__content, .accordion--sand .accordion__content { padding-inline: 1.25rem; } .accordion--dark { border-color: rgba(244, 239, 230, .16); } .accordion--dark .accordion__item { border-color: rgba(244, 239, 230, .16); } .accordion--dark .accordion__item.is-open { background: rgba(255, 255, 255, .03); } .accordion--dark .accordion__trigger { color: var(--on-dark); } .accordion--dark .accordion__trigger:hover { color: var(--gold-2); } .accordion--dark .accordion__content { color: var(--on-dark-muted); } .accordion--dark .accordion__icon { border-color: rgba(244, 239, 230, .25); color: var(--gold-2); } .accordion-group + .accordion-group { margin-top: 3rem; } .accordion-group__title { font-size: 1.4rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; } /* CTA band */ .cta-band { position: relative; border-radius: var(--r-lg); overflow: hidden; color: var(--on-dark); padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.75rem, 5vw, 4rem); box-shadow: var(--shadow-lg); isolation: isolate; background-position: right -420px center, center, center; } .cta-band::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(217, 190, 133, .3); border-radius: var(--r-sm); pointer-events: none; } .cta-band--redwood, .cta-band--teal { background-color: var(--redwood); background-image: var(--rings-light), linear-gradient(150deg, var(--redwood-2), var(--redwood) 60%, #6E2C1F); } .cta-band--parchment, .cta-band--sand { background: var(--parchment); background-image: var(--rings-dark); background-repeat: no-repeat; background-size: 1100px auto; background-position: right -420px center; color: var(--ink); box-shadow: none; border: 1px solid var(--line); } .cta-band--parchment::after, .cta-band--sand::after { border-color: var(--line-strong); } .cta-band--parchment h2, .cta-band--parchment h3, .cta-band--sand h2, .cta-band--sand h3 { color: var(--forest); } .cta-band--parchment p, .cta-band--sand p { color: var(--muted) !important; } .cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; position: relative; z-index: 1; } .cta-band__inner--center { grid-template-columns: 1fr; text-align: center; max-width: 720px; margin-inline: auto; } .cta-band__inner--center .btn-row { justify-content: center; } .cta-band h2 { margin-bottom: .45em; } .cta-band p { max-width: 56ch; } .cta-band .btn-row { justify-content: flex-end; flex-wrap: nowrap; } .cta-band__deco { position: absolute; right: -6%; top: -30%; width: 55%; height: 160%; pointer-events: none; opacity: .5; z-index: 0; } .cta-band__deco svg { width: 100%; height: 100%; } /* Newsletter */ .newsletter { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem 3rem; align-items: center; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--paper); border: 1px solid var(--line); border-top: 3px double var(--forest); border-radius: 0 0 var(--r-md) var(--r-md); } .newsletter h3, .newsletter h2 { margin-bottom: .4rem; } .newsletter p:not(.eyebrow) { color: var(--muted); font-size: var(--fs-sm); margin: 0; } .newsletter__form { display: flex; gap: .6rem; } .newsletter__form .input { flex: 1; } .newsletter__form .btn { flex-shrink: 0; } .newsletter p.newsletter__fine, .newsletter__fine { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .02em; color: var(--muted-2) !important; margin-top: .65rem !important; } .newsletter--dark { background: rgba(244, 239, 230, .04); border-color: rgba(244, 239, 230, .14); border-top-color: var(--gold-2); } .newsletter--dark h3, .newsletter--dark h2 { color: var(--on-dark); } .newsletter--dark p, .newsletter--dark .newsletter__fine { color: var(--on-dark-muted) !important; } .newsletter--stack { grid-template-columns: 1fr; text-align: center; } .newsletter--stack .newsletter__form { max-width: 520px; margin-inline: auto; } /* Info list */ .info-list { display: grid; gap: 0; border-top: 1px solid var(--line); } .info-list li { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid var(--line); } .info-list__label { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; } .info-list__value { color: var(--ink); font-weight: 500; line-height: 1.45; } .info-list__value a { color: var(--forest); } .info-list__value a:hover { color: var(--redwood); } .info-list--dark { border-color: rgba(244, 239, 230, .12); } .info-list--dark li { border-color: rgba(244, 239, 230, .12); } .info-list--dark .info-list__label { color: rgba(244, 239, 230, .55); } .info-list--dark .info-list__value, .info-list--dark .info-list__value a { color: var(--on-dark); } /* Timeline (deadline calendar) */ .timeline { position: relative; display: grid; border-top: 1px solid var(--line-strong); } .timeline::before { content: ""; position: absolute; left: 84px; top: 0; bottom: 0; width: 1px; background: var(--line); } .timeline__item { display: grid; grid-template-columns: 72px 1fr; gap: 1.5rem; padding: 1.1rem 0; position: relative; border-bottom: 1px solid var(--line); } .timeline__item::before { content: ""; position: absolute; left: 80px; top: 1.55rem; width: 9px; height: 9px; background: var(--ivory); border: 2px solid var(--moss); border-radius: 50%; } .timeline__item--past { opacity: .62; } .timeline__item--past::before { border-color: var(--line-strong); } .timeline__item--soon::before { background: var(--redwood); border-color: var(--redwood); box-shadow: 0 0 0 4px rgba(var(--redwood-rgb), .15); } .timeline__date { text-align: left; line-height: 1; } .timeline__date strong { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--forest); font-variant-numeric: lining-nums; } .timeline__date span { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--redwood); margin-top: .35rem; } .timeline__body { padding-left: .75rem; } .timeline__body h4 { margin-bottom: .2rem; } .timeline__body p { font-size: var(--fs-sm); color: var(--muted); margin: 0; } /* Notice */ .notice { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--moss); color: var(--ink); font-size: var(--fs-sm); } .notice svg { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--moss-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: .1rem; } .notice--gold, .notice--brass { background: var(--gold-soft); border-color: rgba(184, 145, 74, .3); border-left-color: var(--gold); } .notice--gold svg, .notice--brass svg { stroke: var(--gold-3); } .notice--redwood, .notice--danger { background: var(--redwood-soft); border-color: rgba(var(--redwood-rgb), .2); border-left-color: var(--redwood); } .notice--redwood svg, .notice--danger svg { stroke: var(--redwood); } .notice--parchment, .notice--sand { background: var(--parchment); border-left-color: var(--forest); } .notice--parchment svg, .notice--sand svg { stroke: var(--forest); } .notice strong { color: var(--forest); } /* Calculator */ .calc { display: grid; grid-template-columns: 1.1fr .9fr; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-md); } .calc__form { padding: clamp(1.5rem, 3vw, 2.4rem); } .calc__result { padding: clamp(1.5rem, 3vw, 2.4rem); background-color: var(--forest); background-image: var(--rings-light); background-repeat: no-repeat; background-size: 800px auto; background-position: right -420px top -300px; color: var(--on-dark); display: flex; flex-direction: column; justify-content: center; } .calc__result h3, .calc__result h4 { color: var(--on-dark); } .calc__result p { color: var(--on-dark-muted); } .calc__big { font-family: var(--font-mono); font-size: clamp(2.2rem, 4.4vw, 3.3rem); font-weight: 500; line-height: 1; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: .5rem 0 1rem; } .calc__big.is-good, .calc__big.is-refund { color: #B9D3A8; } .calc__big.is-warn, .calc__big.is-owed { color: var(--gold-2); } .calc__rows { display: grid; gap: 0; margin-top: 1rem; border-top: 1px solid rgba(244, 239, 230, .16); font-size: var(--fs-sm); } .calc__rows li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dotted rgba(244, 239, 230, .18); color: var(--on-dark-muted); } .calc__rows li strong { color: #fff; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; } .range-wrap { display: flex; align-items: center; gap: 1rem; } .range-wrap output { min-width: 6ch; text-align: right; font-family: var(--font-mono); font-weight: 500; color: var(--forest); font-variant-numeric: tabular-nums; } input[type="range"] { width: 100%; accent-color: var(--redwood); } /* Map */ .map-embed { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--parchment-2); aspect-ratio: 16 / 9; } .map-embed iframe, .map-embed img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; filter: sepia(.15) saturate(.85); } .map-embed__pin { position: absolute; left: 1rem; bottom: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .8rem 1rem; box-shadow: var(--shadow-md); font-size: var(--fs-sm); display: flex; gap: .7rem; align-items: center; } /* Offset frame */ .frame { position: relative; z-index: 0; } .frame::before { content: ""; position: absolute; inset: -12px 12px 12px -12px; border: 1px solid var(--gold); border-radius: var(--r-md); opacity: .6; z-index: -1; pointer-events: none; } .frame--teal::before, .frame--redwood::before { border-color: var(--redwood); } /* ========================================================================== 11. FORMS ========================================================================== */ .form { display: grid; gap: 1.1rem; } .form-grid { display: grid; gap: 1.1rem; } .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: .4rem; } .field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--forest); display: flex; justify-content: space-between; gap: .5rem; } .field__label .req { color: var(--redwood); font-weight: 500; } .field__label .opt { font-family: var(--font-mono); color: var(--muted-2); font-weight: 400; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; } .field__hint { font-size: var(--fs-xs); color: var(--muted); } .field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: 500; display: none; } .field.is-invalid .field__error { display: block; } .field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(168, 53, 42, .12); } .input, .select, .textarea { width: 100%; padding: .82rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: .97rem; line-height: 1.4; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); appearance: none; -webkit-appearance: none; } .input::placeholder, .textarea::placeholder { color: var(--muted-2); } .input:hover, .select:hover, .textarea:hover { border-color: #B5A68E; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--redwood); box-shadow: 0 0 0 3px rgba(var(--redwood-rgb), .14); } .select { padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625D55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 15px; cursor: pointer; } .textarea { min-height: 140px; resize: vertical; } .input--lg { padding: 1rem 1.15rem; font-size: 1.02rem; } .input-group { position: relative; } .input-group .input { padding-left: 2.7rem; } .input-group svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--muted-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .input-prefix { position: relative; } .input-prefix .input { padding-left: 2rem; } .input-prefix::before { content: attr(data-prefix); position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: var(--font-mono); pointer-events: none; } .checkbox, .radio { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; line-height: 1.45; } .checkbox input, .radio input { position: absolute; opacity: 0; width: 1px; height: 1px; } .checkbox__box, .radio__box { flex-shrink: 0; width: 19px; height: 19px; margin-top: .1rem; border-radius: 3px; border: 1px solid var(--line-strong); background: var(--paper); display: grid; place-items: center; transition: all var(--dur) var(--ease); } .radio__box { border-radius: 50%; } .checkbox__box svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: all var(--dur) var(--ease); } .radio__box::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--dur) var(--ease); } .checkbox input:checked + .checkbox__box, .radio input:checked + .radio__box { background: var(--redwood); border-color: var(--redwood); } .checkbox input:checked + .checkbox__box svg { opacity: 1; transform: scale(1); } .radio input:checked + .radio__box::after { transform: scale(1); } .checkbox input:focus-visible + .checkbox__box, .radio input:focus-visible + .radio__box { outline: 2px solid var(--redwood-2); outline-offset: 2px; } .checkbox a { text-decoration: underline; text-underline-offset: 2px; } .form-status { font-size: var(--fs-sm); color: var(--muted); min-height: 1.4em; margin: 0; } .form-status.is-error { color: var(--danger); font-weight: 500; } .form-success { display: none; padding: 2rem; border-radius: var(--r-md); background: var(--success-soft); border: 1px solid rgba(63, 107, 69, .25); text-align: center; } .form-success.is-visible { display: block; animation: fadeUp .5s var(--ease-out); } .form-success .icon-badge { margin: 0 auto 1rem; background: var(--success); border-color: var(--success); color: #fff; } .form-success h3 { color: var(--forest); margin-bottom: .4rem; } .form-success p { color: var(--muted) !important; margin: 0; } .form.is-submitted .form__fields { display: none; } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .form-card { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--forest); border-radius: 0 0 var(--r-lg) var(--r-lg); padding: clamp(1.6rem, 3.5vw, 2.5rem); box-shadow: var(--shadow-md); } .form-card--forest, .form-card--navy { background: var(--forest-2); border-color: rgba(244, 239, 230, .1); border-top-color: var(--gold-2); color: var(--on-dark); } .form-card--forest .field__label, .form-card--navy .field__label { color: var(--on-dark); } .form-card--forest .input, .form-card--forest .select, .form-card--forest .textarea, .form-card--navy .input, .form-card--navy .select, .form-card--navy .textarea { background: rgba(255, 255, 255, .05); border-color: rgba(244, 239, 230, .22); color: #fff; } .form-card--forest .input::placeholder, .form-card--navy .input::placeholder, .form-card--forest .textarea::placeholder, .form-card--navy .textarea::placeholder { color: rgba(244, 239, 230, .45); } .form-card--forest .checkbox, .form-card--navy .checkbox { color: var(--on-dark-muted); } /* newsletter/inputs inside dark blocks */ .section--forest .input, .cta-band .input, .newsletter--dark .input { background: rgba(255, 255, 255, .06); border-color: rgba(244, 239, 230, .25); color: #fff; } .section--forest .input::placeholder, .cta-band .input::placeholder, .newsletter--dark .input::placeholder { color: rgba(244, 239, 230, .5); } /* ========================================================================== 12. FOOTER ========================================================================== */ .site-footer { background-color: var(--forest-3); background-image: var(--rings-light); background-repeat: no-repeat; background-size: 1200px auto; background-position: left -600px bottom -520px; color: var(--on-dark-muted); position: relative; overflow: hidden; border-top: 3px double rgba(217, 190, 133, .45); } .footer__main { position: relative; padding-block: clamp(3.5rem, 6vw, 5rem) clamp(2.5rem, 4vw, 3.25rem); } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 2.5rem 2rem; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .footer__brand { max-width: 330px; } .footer__brand .brand { margin-bottom: 1.25rem; } .footer__brand p { font-size: var(--fs-sm); line-height: 1.65; margin-bottom: 1.3rem; } .footer__col h4 { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); padding-bottom: .8rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(217, 190, 133, .22); } .footer__col ul { display: grid; gap: .55rem; } .footer__col a { color: var(--on-dark-muted); font-size: var(--fs-sm); transition: color var(--dur) var(--ease); } .footer__col a:hover { color: #fff; } .footer__col li { font-size: var(--fs-sm); line-height: 1.55; } .footer__col li svg { width: 15px; height: 15px; stroke: var(--gold-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: .25rem; } .footer__col li.with-icon { display: flex; gap: .6rem; align-items: flex-start; } .footer__bottom { position: relative; border-top: 1px solid rgba(244, 239, 230, .1); padding-block: 1.3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; } .footer__bottom p { margin: 0; } .footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer__bottom a { color: var(--on-dark-muted); } .footer__bottom a:hover { color: #fff; } .footer__note { color: rgba(244, 239, 230, .45); } .footer__note b { color: var(--gold-2); font-weight: 500; } .footer__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; } .social { display: flex; gap: .5rem; } .social__link { width: 36px; height: 36px; border-radius: var(--r-xs); display: inline-grid; place-items: center; border: 1px solid rgba(244, 239, 230, .18); color: var(--on-dark-muted); transition: all var(--dur) var(--ease); } .social__link svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .social__link:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--forest-3); } .social--light .social__link { border-color: var(--line-strong); color: var(--forest); } /* ========================================================================== 13. UTILITIES ========================================================================== */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--s-2) !important; } .mt-3 { margin-top: var(--s-3) !important; } .mt-4 { margin-top: var(--s-4) !important; } .mt-5 { margin-top: var(--s-5) !important; } .mt-6 { margin-top: var(--s-6) !important; } .mt-7 { margin-top: var(--s-7) !important; } .mt-8 { margin-top: var(--s-8) !important; } .mt-9 { margin-top: var(--s-9) !important; } .mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: var(--s-2) !important; } .mb-3 { margin-bottom: var(--s-3) !important; } .mb-4 { margin-bottom: var(--s-4) !important; } .mb-5 { margin-bottom: var(--s-5) !important; } .mb-6 { margin-bottom: var(--s-6) !important; } .mb-7 { margin-bottom: var(--s-7) !important; } .mb-8 { margin-bottom: var(--s-8) !important; } .mx-auto { margin-inline: auto; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .w-full { width: 100%; } .max-w-sm { max-width: 480px; } .max-w-md { max-width: 640px; } .max-w-lg { max-width: 820px; } .rounded { border-radius: var(--r-md); } .rounded-xl { border-radius: var(--r-xl); } .shadow { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .relative { position: relative; } .overflow-hidden { overflow: hidden; } .z-1 { position: relative; z-index: 1; } .img-cover { width: 100%; height: 100%; object-fit: cover; } .aspect-video { aspect-ratio: 16 / 9; } .aspect-square { aspect-ratio: 1; } .hide-desktop { display: none; } .grain { position: relative; } .grain::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .06; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } .grain > :not(.hero__bg, .hero__photo, .cta-band__deco) { position: relative; z-index: 1; } /* ========================================================================== 14. MOTION ========================================================================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Reveal-on-scroll: hidden ONLY once JS has marked the document (html.js) */ html.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; } html.js [data-reveal="left"] { transform: translateX(-26px); } html.js [data-reveal="right"] { transform: translateX(26px); } html.js [data-reveal="scale"] { transform: scale(.95); } html.js [data-reveal="fade"] { transform: none; } html.js [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: .08s !important; } [data-reveal-delay="2"] { transition-delay: .16s !important; } [data-reveal-delay="3"] { transition-delay: .24s !important; } [data-reveal-delay="4"] { transition-delay: .32s !important; } [data-reveal-delay="5"] { transition-delay: .40s !important; } [data-reveal-delay="6"] { transition-delay: .48s !important; } html.js [data-reveal-stagger] > [data-reveal]:nth-child(2) { transition-delay: .1s; } html.js [data-reveal-stagger] > [data-reveal]:nth-child(3) { transition-delay: .2s; } html.js [data-reveal-stagger] > [data-reveal]:nth-child(4) { transition-delay: .3s; } html.js [data-reveal-stagger] > [data-reveal]:nth-child(5) { transition-delay: .4s; } html.js [data-reveal-stagger] > [data-reveal]:nth-child(6) { transition-delay: .5s; } .float { animation: floaty 8s ease-in-out infinite; } .float--slow { animation-duration: 12s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html.js [data-reveal] { opacity: 1; transform: none; } .float { animation: none; } } /* ========================================================================== 15. RESPONSIVE ========================================================================== */ @media (max-width: 1100px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .footer__grid .footer__col:last-child { grid-column: 1 / -1; } .footer__grid .footer__col:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; } } @media (max-width: 1023px) { :root { --header-h: 68px; } .grid--4 { --cols: 2; } .grid--ruled.grid--4 > *:nth-child(2n + 1) { border-left: 0; padding-left: 0; } .stat-row { grid-template-columns: repeat(2, 1fr); } .stat-row--bordered .stat:nth-child(3) { border-left: 0; padding-left: 0; } .stat-row--bordered .stat:nth-child(n + 3) { border-top: 1px solid var(--line); } .steps { grid-template-columns: repeat(2, 1fr); } .steps .step:nth-child(3) { border-left: 0; padding-left: 0; } .steps .step:nth-child(3)::before { left: 0; } .steps .step:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 1rem; } .steps--dark .step:nth-child(n + 3) { border-top-color: rgba(244, 239, 230, .12); } .steps .step:nth-child(n + 3)::before { top: -6px; } .price-grid, .price-grid--4 { grid-template-columns: 1fr 1fr; } .hero__grid { grid-template-columns: 1fr; gap: 3.5rem; } .hero__copy { max-width: 680px; } .docket-card { margin-inline: auto; } .hero__art { width: 100%; max-width: 520px; margin-inline: auto; } .hero .seal { left: -1.25rem; } .hero__photo { width: 100%; opacity: .6; } .hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero__trust li:nth-child(3) { border-left: 0; padding-left: 0; } .hero__trust li:nth-child(n + 3) { border-top: 1px solid rgba(244, 239, 230, .12); } .page-hero--split .page-hero__inner { grid-template-columns: 1fr; } .cta-band__inner { grid-template-columns: 1fr; } .cta-band .btn-row { justify-content: flex-start; flex-wrap: wrap; } .framework { grid-template-columns: 1fr; } .framework__stage { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .framework__stage:first-child { border-top: 0; } .logo-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .logo-strip__item { padding: 1.1rem .75rem; } .logo-strip__item:nth-child(4n + 1) { border-left: 0; } .logo-strip__item:nth-child(n + 5) { border-top: 1px solid var(--line); } } @media (max-width: 767px) { :root { --section-y: clamp(3.5rem, 12vw, 4.75rem); } .utility-bar { display: none; } .hide-mobile { display: none !important; } .hide-desktop { display: initial; } .grid--2, .grid--3, .grid--4 { --cols: 1; } .grid--ruled > * { border-left: 0 !important; padding-left: 0 !important; padding-right: 0; border-top: 1px solid var(--line); } .grid--ruled > *:first-child { border-top: 0; } .split, .split--wide-text { grid-template-columns: 1fr; gap: 2rem; } .split--flip .split__media, .split--flip .split__body { order: 0; } .split__media { aspect-ratio: 16 / 11; } .split__media--tall { aspect-ratio: 1; } .steps, .steps--3 { grid-template-columns: 1fr; } .steps .step, .steps .step:nth-child(3) { border-left: 0; padding-left: 0; } .steps .step + .step { border-top: 1px solid var(--line); margin-top: 1rem; } .steps--dark .step + .step { border-top-color: rgba(244, 239, 230, .12); } .steps .step::before { left: 0; } .steps--vertical .step, .steps--vertical .step:first-child { padding-left: 2rem; border-left: 1px solid var(--line-strong); border-top: 0; margin-top: 0; } .steps--vertical .step::before { left: -6px; } .stat-row, .stat-row--3 { grid-template-columns: repeat(2, 1fr); } .stat-row--bordered .stat { padding: 1.3rem 1rem 1.2rem; } .stat-row--bordered .stat:nth-child(odd) { border-left: 0; padding-left: 0; } .price-grid, .price-grid--4 { grid-template-columns: 1fr; } .newsletter { grid-template-columns: 1fr; } .newsletter__form { flex-direction: column; } .form-grid--2 { grid-template-columns: 1fr; } .calc { grid-template-columns: 1fr; } .checklist--2col { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; max-width: none; } .footer__grid .footer__col:last-child ul { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; align-items: flex-start; } .hero__meta span:last-child { display: none; } .hero__actions .btn { width: 100%; } .hero__trust li { padding: 1rem .9rem 1.1rem; } .hero__trust strong { font-size: 1.35rem; } .docket-card { padding: 1.15rem 1rem .9rem 2.6rem; background-image: linear-gradient(90deg, transparent 1.9rem, rgba(168, 73, 47, .45) 1.9rem, rgba(168, 73, 47, .45) calc(1.9rem + 1px), transparent calc(1.9rem + 1px), transparent 2.1rem, rgba(168, 73, 47, .45) 2.1rem, rgba(168, 73, 47, .45) calc(2.1rem + 1px), transparent calc(2.1rem + 1px)), var(--noise); } .docket-card__tab { left: 2.6rem; } .docket-card::after { display: none; } .docket-card::before { transform: translate(6px, 6px) rotate(1deg); } .docket-card__row { grid-template-columns: 1fr; gap: .35rem; } .docket-card__row dd { text-align: left; } .docket-card__bars { margin-left: 0; justify-content: flex-start; } .hero .seal { display: none; } .hero .seal strong { font-size: 1.35rem; } .section__head--row { align-items: flex-start; flex-direction: column; } .tabs__list { overflow-x: auto; flex-wrap: nowrap; } .tabs__tab { flex: 0 0 auto; white-space: nowrap; } .timeline::before { left: 4px; } .timeline__item { grid-template-columns: 1fr; gap: .45rem; padding-left: 1.6rem; } .timeline__item::before { left: 0; top: 1.4rem; } .timeline__date { display: flex; align-items: baseline; gap: .6rem; } .timeline__date strong { font-size: 1.4rem; } .timeline__date span { margin-top: 0; } .timeline__body { padding-left: 0; } .btn-row .btn { flex: 1 1 auto; } .cta-band .btn-row .btn { width: 100%; } .ledger-list li { grid-template-columns: 2.25rem minmax(0, 1fr); } .ledger-list__note { grid-column: 2; text-align: left; } .toc__ref { display: none; } .logo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-strip__item { padding: 1rem .5rem; font-size: 1.1rem; } .logo-strip__item--sans, .logo-strip__item--mono { font-size: .92rem; } .logo-strip__item:nth-child(n) { border-left: 1px solid var(--line); border-top: 0; } .logo-strip__item:nth-child(odd) { border-left: 0; } .logo-strip__item:nth-child(n + 3) { border-top: 1px solid var(--line); } .logo-strip__item:last-child:nth-child(odd) { grid-column: 1 / -1; } .accordion__content { padding-right: .25rem; } .testimonial__quote--lg { font-size: 1.25rem; } .frame::before { inset: -8px 8px 8px -8px; } .page-hero__meta { gap: .5rem 1.25rem; } } @media (max-width: 420px) { .stat__value { font-size: 2.2rem; } .brand { font-size: 1.35rem; } .brand__mark { width: 32px; height: 38px; } .brand__tag { font-size: .5rem; letter-spacing: .2em; } } @media print { .site-header, .site-footer, .nav-toggle, .cta-band, .newsletter, .skip-link, .utility-bar { display: none !important; } .section { padding-block: 1.5rem; } html.js [data-reveal] { opacity: 1 !important; transform: none !important; } }