/* AI COLOR SYSTEM / REBRANDING MAP
   This block documents existing colors; it does not introduce a new palette.
   PRIMARY: --color-brand-primary (#0056b3), exposed as --teal.
   SECONDARY VISUAL ROLE: --color-text-ink (#1b2a38), exposed as --ink.
     This is the dark neutral anchor; there is no separate saturated secondary brand hue.
   BASE NEUTRAL: --color-page-paper (#f8f6f3), exposed as --paper.
   ACCESSIBILITY ACCENT: --color-focus-ring (#b57c28), independent gold focus outline.
   SUPPORTING FAMILY: pale teal surfaces, borders, wave layers and darker hover tones.
   STATUS COLORS: auxiliary form success/error colors communicate state, not branding.

   DERIVATIVE means a design relationship, NOT a live CSS calculation. Only var()
   aliases follow their source automatically. Hex/RGBA tints, shadows and gradients
   remain independent: update the documented family together, preserving alpha.
   Token names are historical: wave-*, gallery-text and text-tone-* sometimes have
   different actual roles. Read COLOR ROLE plus the original Used by comment below.

   Both author stylesheets define the same global --color-* names. Synchronize these
   definitions in assets/css/styles.css and contact/assets/css/contact-form.css;
   if both are loaded, the later :root declaration wins. Do not reorder the cascade.
   Main .contact-form and auxiliary .nap-contact-form are distinct components.
   The auxiliary green palette is NOT automatically linked to the main teal palette.

   REBRAND ORDER: select primary / dark text / base paper; coordinate hover, light
   surfaces and borders; update shadows and overlay stops; inspect inverse text,
   field labels, links, keyboard focus, status feedback and photo-overlay contrast.
   Preserve readable contrast and visible states; never use color as the sole cue.
   Do not change spacing, fonts, responsive rules, content or form behavior for a recolor.
   SVG currentColor follows CSS. Inline SVG var() fills follow palette tokens.
   External logo/palm SVGs may embed PNGs: page CSS cannot recolor those pixels.
   Recreate/recolor those assets separately only when a rebrand explicitly requests it.
   See COLOR-SYSTEM.md at the site root for the complete token map and workflow.
*/
/* COLOR PALETTE — all literal author-style colors live here.
   Values exactly match the reference design; no visual palette change is intended.
   Edit semantically related text/surface/hover/focus tokens together, checking contrast.
   Alpha-bearing tokens are independent values: changing the primary color does NOT
   automatically recolor its shadows/gradients. Match their hue and retain opacity.
   transparent/currentColor/inherit retain their CSS meaning and are not brand literals.
   SVG/raster artwork colors are inside image assets; these variables cannot recolor them.
   Sizes, font stacks, spacing, breakpoints and selector order are structural.
*/
:root {
  /* Used by :root → --paper; inline SVG index.html → fill. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: NEUTRAL / BASE SURFACE. Warm off-white page canvas, footer and curve cutouts. Keep every matching cutout synchronized with the surface it reveals; this is not a tint of the primary. */
  --color-page-paper: #f8f6f3;
  /* Used by :root → --ink. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: SECONDARY VISUAL COLOR / DARK INK. Main headings, body text and dark UI marks. Independent dark neutral, not a second CTA color or an automatic primary shade; pair with light surfaces. */
  --color-text-ink: #1b2a38;
  /* Used by :root → --muted. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: SECONDARY TEXT FAMILY. Softer dark neutral for descriptions; coordinate with ink while retaining legibility. Independently specified, not generated from ink. */
  --color-text-muted: #4a5568;
  /* Used by :root → --teal. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY BRAND COLOR. Teal identity and main action color: buttons, links, eyebrows, icons and solid CTA backgrounds via --teal. Starting point for a rebrand; review all primary-family tokens below together. */
  --color-brand-primary: #0056b3;
  /* Used by :root → --hover. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / DARK INTERACTION VARIANT. Darker teal for hover via --hover. Update with primary, preserving a visible state change and readable button text. Fixed value, not a computed shade. */
  --color-brand-hover: #003d82;
  /* Used by :root → --soft. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / VERY LIGHT SURFACE VARIANT. Pale cool tint for section backgrounds and icon badges via --soft. Keep distinct from page paper; coordinate hue with primary, but this is a hand-selected value. */
  --color-surface-soft: #eef4fa;
  /* Used by :root → --line. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / LIGHT BORDER VARIANT. Pale teal separators, card and field outlines, plus SVG accents via --line. Coordinate with soft surfaces; do not use as small body text. */
  --color-border-default: #cbdceb;
  /* Used by :focus-visible → outline. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: ACCESSIBILITY ACCENT. Independent warm gold for keyboard focus, not a primary derivative or warning status. Preserve clear visibility on both light and teal surfaces; do not replace it blindly with a pale brand tint. */
  --color-focus-ring: #b57c28;
  /* Used by .button → color; .button-white → background; .circle-button:hover:not(:disabled) → color; .content-template .cta p[data-copy] a → color; .cta → color; .gallery-retry → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: INVERSE NEUTRAL. White text on dark/primary surfaces; also white button surfaces in existing selectors. Review both uses together before changing this shared value. */
  --color-text-on-dark: white;
  /* Used by .services-dropdown → box-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: SECONDARY / INK SHADOW. Same RGB as text-ink; alpha 0x15/255 for dropdown elevation. Fixed literal: changing its related base does not update this value automatically; retain alpha when adjusting hue. */
  --color-shadow-tone-01: #1b2a3815;
  /* Used by .button:hover → box-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / BRAND SHADOW. Same RGB as brand-primary; alpha 0x20/255 for button hover. Fixed literal: changing its related base does not update this value automatically; retain alpha when adjusting hue. */
  --color-shadow-tone-02: #0056b320;
  /* Used by .header-phone__copy small → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: TERTIARY TEXT NEUTRAL. Small supporting location text near the phone. Coordinate with ink/muted; do not make it as pale as decorative borders. */
  --color-text-secondary: #6a747d;
  /* Used by .content-photo → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / PALE SURFACE VARIANT. Cool fallback behind content photos while loading. Coordinate with soft surface, not a new brand accent. */
  --color-surface-alternate: #eef4fa;
  /* Used by .small-number → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / MUTED MEDIUM VARIANT. Teal process numbers; coordinate with primary while retaining contrast against their background. */
  --color-process-number: #4c6078;
  /* Used by .step-number → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / MUTED MEDIUM VARIANT. Step-number decoration. The name accent means a supporting teal here, not the independent gold focus accent. */
  --color-decoration-accent: #53667a;
  /* Used by .cta .eyebrow → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / LIGHT VARIANT. Currently CTA eyebrow text, despite the wave name. Coordinate with primary CTA background and preserve readable inverse contrast; see usage comment below. */
  --color-wave-primary: #eef4fa;
  /* Used by .button-white:hover → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / VERY LIGHT INTERACTION VARIANT. White-button hover surface, despite the wave name. Keep distinct from the normal white state. */
  --color-wave-light: #eef4fa;
  /* Used by .related-article-card:hover .card-copy → border-color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / MEDIUM BORDER VARIANT. Related-card hover outline, despite the wave name. Not a separate secondary brand color. */
  --color-wave-secondary: #cbdceb;
  /* Used by .related-article-card:hover .card-copy → box-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: SECONDARY / INK SHADOW. Same RGB as text-ink; alpha 0x10/255 for related-card hover. Fixed literal: changing its related base does not update this value automatically; retain alpha when adjusting hue. */
  --color-shadow-tone-03: #1b2a3810;
  /* Used by .form-card → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: NEUTRAL / CARD SURFACE. Warm nearly-white form card; coordinate with page paper and field surface while preserving gentle separation. */
  --color-surface-card-warm: #faf9f7;
  /* Used by .form-card → box-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY-RELATED / DARK COOL SHADOW. Independently chosen RGB #003c7d, alpha 0x10/255 for form cards; not an exact primary conversion. Fixed literal: changing its related base does not update this value automatically; retain alpha when adjusting hue. */
  --color-shadow-tone-04: #003c7d10;
  /* Used by .contact-form input,.contact-form textarea → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: NEUTRAL / FIELD SURFACE. Warm nearly-white input background; check text, placeholder, border and focus visibility together. */
  --color-surface-form-warm: #fbfaf9;
  /* Used by .contact-form :is(input,textarea):focus → box-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / BRAND FOCUS HALO. Same RGB as brand-primary; alpha 0x24/255 for form focus. Complements, not replaces, the gold focus outline. Fixed literal: changing its related base does not update this value automatically; retain alpha when adjusting hue. */
  --color-shadow-tone-05: #0056b324;
  /* Used by .main-nav → box-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: SECONDARY / INK SHADOW. Same RGB as text-ink; alpha 0x18/255 for mobile navigation. Fixed literal: changing its related base does not update this value automatically; retain alpha when adjusting hue. */
  --color-shadow-tone-06: #1b2a3818;
  /* Used by .circle-button → border. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / MUTED BORDER VARIANT. Currently circular-control borders. This token does NOT recolor the palm PNG or its SVG image wrapper, despite its name. */
  --color-decoration-palm: #eef4fa;
  /* Used by .gallery-dialog → border. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: SECONDARY / DARK BORDER VARIANT. Gallery dialog border, despite the caption name. Coordinate with the dark gallery surface. */
  --color-caption-muted: #536166;
  /* Used by .gallery-dialog → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: SECONDARY / DARK SURFACE VARIANT. Gallery dialog background, despite the text name. Pair with inverse text; not an accent color. */
  --color-gallery-text: #172b32;
  /* Used by .content-template .article-body a.button → color; .gallery-dialog .circle-button → color; .gallery-dialog → color; .site-bottom-cta → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: INVERSE NEUTRAL. Pure white used as foreground in several CTA/gallery selectors, despite the surface name. Inspect actual usage before changing. */
  --color-surface-white: #fff;
  /* Used by .gallery-dialog → box-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: NEUTRAL SHADOW. Black with alpha 0x6/0xF (40%) for the dialog shadow. Preserve translucency and layer separation; not a brand hue. */
  --color-overlay-black-translucent: #0006;
  /* Used by .gallery-dialog::backdrop → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: SECONDARY / DARK OVERLAY VARIANT. Dark blue-black with alpha 0xE8/255 behind the gallery. Keep the image prominent and background subdued; fixed independent color. */
  --color-gallery-backdrop: #09171ce8;
  /* Used by .gallery-dialog .circle-button → border-color; .gallery-retry → border. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: SECONDARY / MUTED INVERSE BORDER. Gallery controls and retry outlines on dark backgrounds. Coordinate with the gallery surface and inverse text. */
  --color-decoration-muted: #91acb2;
  /* Used by .gallery-dialog-footer > p → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: SECONDARY / LIGHT INVERSE TEXT. Gallery footer caption color, despite the divider name. Preserve legibility on the dark dialog. */
  --color-gallery-divider: #cbdceb;
  /* Used by .home-cta → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / MEDIUM CTA VARIANT. Background fallback of the image-backed home CTA. Supporting teal, not an independent accent; may be unused on pages using site-bottom-cta instead. */
  --color-cta-accent: #0056b3;
  /* Used by .home-cta:after → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / PHOTO OVERLAY STOP. All six legacy CTA stops share independently selected teal RGB #0056b3; this stop has alpha 0xE6/255. Recolor all six as a family while retaining each opacity and gradient stop position; do not flatten the gradient. Check text over the underlying photograph. */
  --color-gradient-tone-01: #0056b3e6;
  /* Used by .home-cta:after → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / PHOTO OVERLAY STOP. All six legacy CTA stops share independently selected teal RGB #0056b3; this stop has alpha 0xCC/255. Recolor all six as a family while retaining each opacity and gradient stop position; do not flatten the gradient. Check text over the underlying photograph. */
  --color-gradient-tone-02: #0056b3cc;
  /* Used by .home-cta:after → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / PHOTO OVERLAY STOP. All six legacy CTA stops share independently selected teal RGB #0056b3; this stop has alpha 0x40/255. Recolor all six as a family while retaining each opacity and gradient stop position; do not flatten the gradient. Check text over the underlying photograph. */
  --color-gradient-tone-03: #0056b340;
  /* Used by .home-footer .brand__name → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / DARK IDENTITY VARIANT. Legacy home-footer brand text. Coordinate with primary; preserve this optional component rule even when currently unused. */
  --color-cta-dark: #003d82;
  /* Used by .home-footer .footer-bottom → border-color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: NEUTRAL WITH COOL TINT / HAIRLINE. Subtle footer divider; coordinate with paper and the primary-tinted border family. */
  --color-footer-divider: #cbdceb;
  /* Used by .home-cta:after → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / PHOTO OVERLAY STOP. All six legacy CTA stops share independently selected teal RGB #0056b3; this stop has alpha 0xF2/255. Recolor all six as a family while retaining each opacity and gradient stop position; do not flatten the gradient. Check text over the underlying photograph. */
  --color-gradient-tone-04: #0056b3f2;
  /* Used by .home-cta:after → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / PHOTO OVERLAY STOP. All six legacy CTA stops share independently selected teal RGB #0056b3; this stop has alpha 0xD9/255. Recolor all six as a family while retaining each opacity and gradient stop position; do not flatten the gradient. Check text over the underlying photograph. */
  --color-gradient-tone-05: #0056b3d9;
  /* Used by .home-cta:after → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / PHOTO OVERLAY STOP. All six legacy CTA stops share independently selected teal RGB #0056b3; this stop has alpha 0x44/255. Recolor all six as a family while retaining each opacity and gradient stop position; do not flatten the gradient. Check text over the underlying photograph. */
  --color-gradient-tone-06: #0056b344;
  /* Used by .home-service-areas .area-link-list a → border-bottom. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / LIGHT BORDER VARIANT. Location-link separators; coordinate with border-default and the base surface. */
  --color-area-link-border: #cbdceb;
  /* Used by .nap-contact-form → --contact-form-text. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - TEXT / DARK BASE. Alias --contact-form-text; dark green neutral. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-surface-tone-01: #17211c;
  /* Used by .nap-contact-form → --contact-form-muted. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - TEXT / MUTED BASE. Alias --contact-form-muted; supporting green-gray. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-surface-tone-02: #4e6157;
  /* Used by .nap-contact-form → --contact-form-placeholder. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - TEXT / PLACEHOLDER BASE. Alias --contact-form-placeholder; muted green-gray. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-surface-tone-03: #70827d;
  /* Used by .nap-contact-form input,
.nap-contact-form textarea → background; .nap-contact-form → --contact-form-input. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - SURFACE / INPUT BASE. Alias --contact-form-input and field backgrounds; pale neutral. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-surface-tone-04: #fbfefd;
  /* Used by .nap-contact-form → --contact-form-primary. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - PRIMARY / COMPONENT BASE. Alias --contact-form-primary; green identity, distinct from the main teal palette. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-surface-tone-05: #0056b3;
  /* Used by .nap-contact-form → --contact-form-primary-hover. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - PRIMARY / DARK COMPONENT VARIANT. Alias --contact-form-primary-hover; coordinate with surface-tone-05. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-surface-tone-06: #003d82;
  /* Used by .nap-contact-form → --contact-form-primary-border. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - PRIMARY / TRANSLUCENT BORDER. Same RGB as surface-tone-05 at .30 alpha; fixed literal, not computed. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-border-tone-01: rgba(0, 86, 179, 0.3);
  /* Used by .nap-contact-form input,
.nap-contact-form textarea → border; .nap-contact-form → --contact-form-border; .nap-contact-form → border; .nap-contact-form__captcha-image → border. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - PRIMARY / PALE BORDER. Alias --contact-form-border and component/field borders. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-border-tone-02: #abcfc5;
  /* Used by .nap-contact-form → --contact-form-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY FORM / DARK GREEN SHADOW. Separate component palette, RGB (20,72,62), alpha .14. Fixed literal: changing its related base does not update this value automatically; retain alpha when adjusting hue. */
  --color-shadow-tone-07: rgba(20, 72, 62, 0.14);
  /* Used by .nap-contact-form input,
.nap-contact-form textarea → color; .nap-contact-form → color; .nap-contact-form__title → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - TEXT / DARK OVERRIDE. Actual text in several form selectors; inspect cascade as well as base aliases. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-text-tone-01: #18332d;
  /* Used by .nap-contact-form → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - SURFACE / TRANSLUCENT WHITE. White at .58 alpha in the form background; not a primary tint. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-gradient-tone-07: rgba(255, 255, 255, 0.58);
  /* Used by .nap-contact-form → box-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY FORM / GREEN SHADOW. RGB (23,107,91), alpha .12; coordinate with text-tone-02. Fixed literal: changing its related base does not update this value automatically; retain alpha when adjusting hue. */
  --color-shadow-tone-08: rgba(0, 86, 179, 0.12);
  /* Used by .nap-contact-form #submitter,
.nap-contact-form .quickFormSend → background; .nap-contact-form #submitter,
.nap-contact-form .quickFormSend → border; .nap-contact-form #submitter:hover,
.nap-contact-form #submitter:focus-visible,
.nap-contact-form .quickFormSend:hover,
.nap-contact-form .quickFormSend:focus-visible → background; .nap-contact-form input:focus,
.nap-contact-form textarea:focus → border-color; .nap-contact-form__captcha-refresh → color; .nap-contact-form__message .success → border. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - PRIMARY / DEEP GREEN OVERRIDE. Shared by button, focus, captcha and success-border selectors. Coordinate all consumers; do not mistake the text prefix for a text-only token. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-text-tone-02: #0056b3;
  /* Used by .nap-contact-form__message .success → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - STATUS / SUCCESS SURFACE. Pale green at .95 alpha; semantic feedback, not an ordinary decorative tint. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-gradient-tone-08: rgba(232, 247, 239, 0.95);
  /* Used by .nap-contact-form__message .error → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - STATUS / ERROR TEXT. Dark red. Retain an error meaning independently of the customer brand. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-text-tone-03: #8e2c24;
  /* Used by .nap-contact-form__message .error → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - STATUS / ERROR SURFACE. Pale red. Pair with error text and border; not a brand gradient. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-gradient-tone-09: #fff0f0;
  /* Used by .nap-contact-form label span → color; .nap-contact-form__message .error → border. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - STATUS / ERROR AND REQUIRED MARKER. Red; do not recolor as primary. Keep text/labels as well as color to communicate status. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-border-tone-03: #b42318;
  /* Used by .nap-contact-form label → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - TEXT / LABEL OVERRIDE. Muted dark green-gray for field labels. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-text-tone-04: #506760;
  /* Used by .nap-contact-form input::placeholder,
.nap-contact-form textarea::placeholder → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - TEXT / PLACEHOLDER OVERRIDE. Light green-gray; keep readable and retain visible field labels. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-text-tone-05: #899690;
  /* Used by .nap-contact-form input:hover,
.nap-contact-form textarea:hover → border-color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - BORDER / HOVER OVERRIDE. Muted green-gray; visibly distinguish hover from the normal border. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-border-tone-04: #b9cbc6;
  /* Used by .nap-contact-form input:focus,
.nap-contact-form textarea:focus → box-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY FORM / GREEN FOCUS HALO. RGB (23,107,91), alpha .14; coordinate with text-tone-02. Fixed literal: changing its related base does not update this value automatically; retain alpha when adjusting hue. */
  --color-shadow-tone-09: rgba(0, 86, 179, 0.14);
  /* Used by .nap-contact-form #submitter,
.nap-contact-form .quickFormSend → background; .nap-contact-form #submitter:hover,
.nap-contact-form #submitter:focus-visible,
.nap-contact-form .quickFormSend:hover,
.nap-contact-form .quickFormSend:focus-visible → background; .nap-contact-form__captcha-refresh:hover,
.nap-contact-form__captcha-refresh:focus-visible → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - PRIMARY / DARK BUTTON VARIANT. Shared gradient endpoint and captcha hover; coordinate with text-tone-02. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-text-tone-06: #003d82;
  /* Used by .nap-contact-form #submitter,
.nap-contact-form .quickFormSend → color. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY CONTACT COMPONENT - INVERSE / BUTTON TEXT. Pure white over green button states. Applies to .nap-contact-form, not the home demo form. This separate palette must be reviewed explicitly during a rebrand; preserve status semantics. */
  --color-text-tone-07: #ffffff;
  /* Used by .nap-contact-form #submitter:hover,
.nap-contact-form #submitter:focus-visible,
.nap-contact-form .quickFormSend:hover,
.nap-contact-form .quickFormSend:focus-visible → box-shadow. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY FORM / GREEN HOVER SHADOW. RGB (23,107,91), alpha .22; coordinate with text-tone-02. Fixed literal: changing its related base does not update this value automatically; retain alpha when adjusting hue. */
  --color-shadow-tone-10: rgba(0, 86, 179, 0.22);
  /* Used by inline SVG index.html → fill. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / PALE HERO WAVE. Light upper SVG wave layer; coordinate with surface-tone-08, primary and paper. Fixed color, not automatically mixed from primary. */
  --color-surface-tone-07: #e0eaf5;
  /* Used by inline SVG index.html → fill. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: PRIMARY / PALE HERO WAVE. Slightly stronger lower SVG wave layer; preserve the two-tone separation from surface-tone-07 and the page-paper cutout. */
  --color-surface-tone-08: #b7cfe9;
  /* Used by body → background. Keep contrast appropriate to these surfaces/states. */
  /* COLOR ROLE: AUXILIARY PAGE / NEUTRAL BACKGROUND. Pale green-white body background of the standalone contact example; not a gradient stop despite its name. */
  --color-gradient-tone-10: #f4f7f5;
}

/* assets/css/styles.css: annotated author stylesheet. See TEMPLATE-GUIDE.md for palette and cascade rules. */
/* TOKENS AND LOCAL FONTS */

@font-face  {
  font-family: "The Nautigal";
  src: url("../fonts/the-nautigal.ttf") format("truetype");
  font-display: swap;
}

@font-face  {
  font-family: Inter;
  src: url("../fonts/inter-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face  {
  font-family: Inter;
  src: url("../fonts/inter-500.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face  {
  font-family: Inter;
  src: url("../fonts/inter-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face  {
  font-family: "Libre Caslon Display";
  src: url("../fonts/libre-caslon-display.ttf") format("truetype");
  font-display: swap;
}

/* Component rules: :root — preserve cascade position. */

:root {
  /* Brand color alias; adjust its referenced palette token, not layout. */
  --paper: var(--color-page-paper);
  /* Brand color alias; adjust its referenced palette token, not layout. */
  --ink: var(--color-text-ink);
  /* Brand color alias; adjust its referenced palette token, not layout. */
  --muted: var(--color-text-muted);
  /* Brand color alias; adjust its referenced palette token, not layout. */
  --teal: var(--color-brand-primary);
  /* Brand color alias; adjust its referenced palette token, not layout. */
  --hover: var(--color-brand-hover);
  /* Brand color alias; adjust its referenced palette token, not layout. */
  --soft: var(--color-surface-soft);
  /* Brand color alias; adjust its referenced palette token, not layout. */
  --line: var(--color-border-default);
  /* Structural/component setting; preserve unless intentionally changing typography, geometry or behaviour. */
  --sans: Inter,Arial,sans-serif;
  /* Structural/component setting; preserve unless intentionally changing typography, geometry or behaviour. */
  --serif: Georgia,"Libre Caslon Display",serif;
  /* Structural/component setting; preserve unless intentionally changing typography, geometry or behaviour. */
  --gutter: clamp(24px,5.3135vw,80px);
}

/* Component rules: * — preserve cascade position. */

* {
  box-sizing: border-box;
}

/* Component rules: html — preserve cascade position. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

/* Component rules: body — preserve cascade position. */

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Component rules: body.menu-open — preserve cascade position. */

body.menu-open {
  overflow: hidden;
}

/* Component rules: [hidden] — preserve cascade position. */

[hidden] {
  display: none !important;
}

/* Component rules: h1,h2,h3,p,figure — preserve cascade position. */

h1,h2,h3,p,figure {
  margin: 0;
}

/* Component rules: h1,h2 — preserve cascade position. */

h1,h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
}

/* Component rules: h1 — preserve cascade position. */

h1 {
  font-size: 48px;
}

/* Component rules: h2 — preserve cascade position. */

h2 {
  font-size: 36px;
}

/* Component rules: h3 — preserve cascade position. */

h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
}

/* Component rules: a — preserve cascade position. */

a {
  color: inherit;
  text-decoration: none;
}

/* Component rules: button,input,textarea — preserve cascade position. */

button,input,textarea {
  font: inherit;
}

/* Component rules: button — preserve cascade position. */

button {
  cursor: pointer;
}

/* Component rules: img — preserve cascade position. */

img {
  display: block;
  max-width: 100%;
}

/* Component rules: svg — preserve cascade position. */

svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Component rules: a,button — preserve cascade position. */

a,button {
  touch-action: manipulation;
}

/* Component rules: :focus-visible — preserve cascade position. */

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 4px;
}

/* Component rules: p,h1,h2,h3,a — preserve cascade position. */

p,h1,h2,h3,a {
  overflow-wrap: anywhere;
}

/* Component rules: .container — preserve cascade position. */

.container {
  width: calc(100% - var(--gutter)*2);
  max-width: 1280px;
  margin-inline: auto;
}

/* Component rules: .section — preserve cascade position. */

.section {
  padding-block: 64px;
}

/* Component rules: .soft — preserve cascade position. */

.soft {
  background: var(--soft);
}

/* Component rules: .eyebrow — preserve cascade position. */

.eyebrow {
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: 12px;
}

/* Component rules: .lead — preserve cascade position. */

.lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 22px;
}

/* Component rules: .section h2+p,.split-section p,.value-grid p — preserve cascade position. */

.section h2+p,.split-section p,.value-grid p {
  margin-top: 18px;
  color: var(--muted);
}

/* Component rules: .section-heading — preserve cascade position. */

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

/* Component rules: .prose — preserve cascade position. */

.prose {
  max-width: 900px;
}

/* Component rules: .prose p — preserve cascade position. */

.prose p {
  margin-top: 22px;
}

/* Component rules: .prose a:not(.button),.contextual a:not(.button),.article-body a:not(.button) — preserve cascade position. */

.prose a:not(.button),.contextual a:not(.button),.article-body a:not(.button) {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Component rules: .contextual — preserve cascade position. */

.contextual {
  margin-top: 28px;
  color: var(--muted);
}

/* Component rules: .sr-only — preserve cascade position. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Component rules: .skip-link — preserve cascade position. */

.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  background: var(--ink);
  color: var(--color-text-on-dark);
  padding: 12px 20px;
}

/* Component rules: .skip-link:focus — preserve cascade position. */

.skip-link:focus {
  top: 12px;
}

/* CHROME */

/* Component rules: .site-header — preserve cascade position. */

.site-header {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 90px;
  position: relative;
  z-index: 30;
}

/* Component rules: .brand — preserve cascade position. */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  max-width: 240px;
}

/* Component rules: .brand>img — preserve cascade position. */

.brand>img {
  width: 54px;
  height: 50px;
  object-fit: contain;
}

/* Component rules: .brand__name — preserve cascade position. */

.brand__name {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  max-width: 180px;
}

/* Component rules: .brand__name span — preserve cascade position. */

.brand__name span {
  display: block;
}

/* Component rules: .main-nav — preserve cascade position. */

.main-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  font-size: 12px;
}

/* Component rules: .main-nav>a,.services-menu>summary — preserve cascade position. */

.main-nav>a,.services-menu>summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  position: relative;
  cursor: pointer;
}

/* Component rules: .main-nav>a:hover,.main-nav [aria-current=page],.services-menu>summary:hover — preserve cascade position. */

.main-nav>a:hover,.main-nav [aria-current=page],.services-menu>summary:hover {
  color: var(--teal);
}

/* Component rules: .main-nav>[aria-current=page] — preserve cascade position. */

.main-nav>[aria-current=page] {
  text-decoration: underline;
  text-underline-offset: 8px;
}

/* Component rules: .services-menu — preserve cascade position. */

.services-menu {
  position: relative;
}

/* Component rules: .services-menu>summary — preserve cascade position. */

.services-menu>summary {
  list-style: none;
  gap: 6px;
}

/* Component rules: .services-menu>summary::-webkit-details-marker — preserve cascade position. */

.services-menu>summary::-webkit-details-marker {
  display: none;
}

/* Component rules: .services-menu>summary:after — preserve cascade position. */

.services-menu>summary:after {
  content: "⌄";
}

/* Component rules: .services-dropdown — preserve cascade position. */

.services-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 250px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 35px var(--color-shadow-tone-01);
}

/* Component rules: .services-dropdown a — preserve cascade position. */

.services-dropdown a {
  display: block;
  padding: 10px 12px;
  min-height: 44px;
}

/* Component rules: .services-dropdown a:hover — preserve cascade position. */

.services-dropdown a:hover {
  background: var(--soft);
  color: var(--teal);
}

/* Component rules: .button — preserve cascade position. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 25px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--teal);
  color: var(--color-text-on-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: background .2s,box-shadow .2s;
}

/* Component rules: .button:hover — preserve cascade position. */

.button:hover {
  background: var(--hover);
  box-shadow: 0 5px 16px var(--color-shadow-tone-02);
}

/* Component rules: .button svg — preserve cascade position. */

.button svg {
  flex-shrink: 0;
  transition: transform .2s;
}

/* Component rules: .button:hover svg — preserve cascade position. */

.button:hover svg {
  transform: translateX(3px);
}

/* Component rules: .header-cta — preserve cascade position. */

.header-cta {
  font-size: 12px;
  padding: 10px 17px;
  white-space: nowrap;
}

/* Component rules: .text-link — preserve cascade position. */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--teal);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Component rules: .menu-toggle — preserve cascade position. */

.menu-toggle {
  display: none;
}

/* Component rules: .site-footer — preserve cascade position. */

.site-footer {
  padding-block: 30px;
}

/* Component rules: .footer-top — preserve cascade position. */

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* Component rules: .footer-phone — preserve cascade position. */

.footer-phone {
  color: var(--teal);
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Component rules: .site-footer nav — preserve cascade position. */

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 25px 0;
  font-size: 14px;
}

/* Component rules: .site-footer nav a — preserve cascade position. */

.site-footer nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Component rules: .site-footer nav a:hover — preserve cascade position. */

.site-footer nav a:hover {
  color: var(--teal);
}

/* Component rules: .footer-bottom — preserve cascade position. */

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  color: var(--muted);
}

/* Component rules: .header-phone — preserve cascade position. */

.header-phone {
  gap: 9px;
  white-space: nowrap;
}

/* Component rules: .header-phone svg — preserve cascade position. */

.header-phone svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--teal);
  stroke-width: 2;
}

/* Component rules: .header-phone__copy — preserve cascade position. */

.header-phone__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

/* Component rules: .header-phone__copy strong — preserve cascade position. */

.header-phone__copy strong {
  font-size: 13px;
  font-weight: 600;
}

/* Component rules: .header-phone__copy small — preserve cascade position. */

.header-phone__copy small {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: -.1px;
}

/* Component rules: .header-phone:hover — preserve cascade position. */

.header-phone:hover {
  color: var(--teal);
}

/* INTRO AND SHARED CONTENT */

/* Component rules: .page-intro — preserve cascade position. */

.page-intro {
  padding-block: 32px 40px;
}

/* Component rules: .breadcrumb — preserve cascade position. */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 40px;
}

/* Component rules: .breadcrumb a — preserve cascade position. */

.breadcrumb a {
  color: var(--teal);
  min-height: 32px;
}

/* Component rules: .intro-grid — preserve cascade position. */

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: 64px;
}

/* Component rules: .intro-copy — preserve cascade position. */

.intro-copy {
  max-width: 850px;
  padding-bottom: 16px;
}

/* Component rules: .content-photo — preserve cascade position. */

.content-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 38% 10% 22% 3% / 50% 14% 26% 4%;
  background: var(--color-surface-alternate);
}

/* Component rules: .split-section — preserve cascade position. */

.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Component rules: .split-section>* — preserve cascade position. */

.split-section>* {
  min-width: 0;
}

/* Component rules: .value-grid — preserve cascade position. */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 40px;
  margin-top: 35px;
}

/* Component rules: .small-number — preserve cascade position. */

.small-number {
  display: block;
  color: var(--color-process-number);
  font: 32px var(--serif);
  margin-bottom: 16px;
}

/* Component rules: .steps-grid — preserve cascade position. */

.steps-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 30px;
  padding: 0;
  margin: 35px 0 0;
}

/* Component rules: .steps-grid li — preserve cascade position. */

.steps-grid li {
  display: flex;
  gap: 18px;
  border-left: 1px solid var(--line);
  padding-left: 22px;
}

/* Component rules: .steps-grid li:first-child — preserve cascade position. */

.steps-grid li:first-child {
  border: 0;
  padding-left: 0;
}

/* Component rules: .step-number — preserve cascade position. */

.step-number {
  font: 36px var(--serif);
  color: var(--color-decoration-accent);
}

/* Component rules: .steps-grid h3 — preserve cascade position. */

.steps-grid h3 {
  font-size: 20px;
}

/* Component rules: .steps-grid p — preserve cascade position. */

.steps-grid p {
  font-size: 15px;
  color: var(--muted);
  margin-top: 8px;
}

/* Component rules: .cta — preserve cascade position. */

.cta {
  position: relative;
  padding: 65px 0 75px;
  background: var(--teal);
  color: var(--color-text-on-dark);
  overflow: hidden;
}

/* Component rules: .cta:after — preserve cascade position. */

.cta:after {
  content: "";
  position: absolute;
  bottom: -60px;
  width: 120%;
  left: -10%;
  height: 95px;
  border-radius: 50%;
  background: var(--paper);
}

/* Component rules: .cta .eyebrow — preserve cascade position. */

.cta .eyebrow {
  color: var(--color-wave-primary);
}

/* Component rules: .cta h2 — preserve cascade position. */

.cta h2 {
  max-width: 820px;
}

/* Component rules: .cta p:not(.eyebrow) — preserve cascade position. */

.cta p:not(.eyebrow) {
  max-width: 650px;
  margin-top: 20px;
}

/* Component rules: .cta .button — preserve cascade position. */

.cta .button {
  margin-top: 25px;
}

/* Component rules: .button-white — preserve cascade position. */

.button-white {
  background: var(--color-text-on-dark);
  color: var(--teal);
}

/* Component rules: .button-white:hover — preserve cascade position. */

.button-white:hover {
  background: var(--color-wave-light);
}

/* HUBS */

/* Component rules: .hub-grid,.text-card-grid — preserve cascade position. */

.hub-grid,.text-card-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 32px 24px;
}

/* Component rules: .link-card — preserve cascade position. */

.link-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Component rules: .link-card .content-photo — preserve cascade position. */

.link-card .content-photo {
  aspect-ratio: 4/3;
  transition: filter .2s;
}

/* Component rules: .link-card:hover .content-photo — preserve cascade position. */

.link-card:hover .content-photo {
  filter: brightness(.95);
}

/* Component rules: .card-copy — preserve cascade position. */

.card-copy {
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Component rules: .card-copy p — preserve cascade position. */

.card-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 10px 0 14px;
}

/* Component rules: .card-copy .text-link — preserve cascade position. */

.card-copy .text-link {
  margin-top: auto;
  align-self: start;
}

/* Component rules: .text-card-grid — preserve cascade position. */

.text-card-grid {
  margin-top: 28px;
}

/* Component rules: .text-card-grid .card-copy — preserve cascade position. */

.text-card-grid .card-copy {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px 22px 22px 4px;
  background: var(--paper);
  gap: 20px;
}

/* Component rules: .pagination — preserve cascade position. */

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* Component rules: .pagination button — preserve cascade position. */

.pagination button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--teal);
  border-radius: 50%;
}

/* Component rules: .pagination button[aria-current=page],.pagination button:hover — preserve cascade position. */

.pagination button[aria-current=page],.pagination button:hover {
  background: var(--teal);
  color: var(--color-text-on-dark);
}

/* Component rules: .related-article-grid — preserve cascade position. */

.related-article-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin-top: 0;
}

/* Component rules: .related-article-card .card-copy — preserve cascade position. */

.related-article-card .card-copy {
  height: 100%;
  transition: border-color .2s,box-shadow .2s,transform .2s;
}

/* Component rules: .related-article-card:hover .card-copy — preserve cascade position. */

.related-article-card:hover .card-copy {
  border-color: var(--color-wave-secondary);
  box-shadow: 0 12px 28px var(--color-shadow-tone-03);
  transform: translateY(-2px);
}

/* FAQ AND REVIEWS */

/* Component rules: .faq-layout — preserve cascade position. */

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
}

/* Component rules: .faq-list — preserve cascade position. */

.faq-list {
  border-top: 1px solid var(--line);
  min-width: 0;
}

/* Component rules: .faq-item — preserve cascade position. */

.faq-item {
  border-bottom: 1px solid var(--line);
}

/* Component rules: .faq-item summary — preserve cascade position. */

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  list-style: none;
  min-height: 64px;
  padding: 18px 0;
  cursor: pointer;
  font-weight: 500;
}

/* Component rules: .faq-item summary::-webkit-details-marker — preserve cascade position. */

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Component rules: .faq-item summary span — preserve cascade position. */

.faq-item summary span {
  font-size: 24px;
  color: var(--teal);
  flex-shrink: 0;
}

/* Component rules: .faq-item[open] summary span — preserve cascade position. */

.faq-item[open] summary span {
  transform: rotate(45deg);
}

/* Component rules: .faq-item p — preserve cascade position. */

.faq-item p {
  padding: 0 25px 24px 0;
  color: var(--muted);
}

/* Component rules: .review-grid — preserve cascade position. */

.review-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  margin-top: 32px;
}

/* Component rules: .review-card — preserve cascade position. */

.review-card {
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px 24px 24px 4px;
  min-width: 0;
}

/* Component rules: .review-card blockquote — preserve cascade position. */

.review-card blockquote {
  margin: 0;
}

/* Component rules: .review-card footer — preserve cascade position. */

.review-card footer {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 16px;
}

/* Component rules: .review-author — preserve cascade position. */

.review-author {
  font-weight: 600;
  font-size: 14px;
}

/* Component rules: .review-source — preserve cascade position. */

.review-source {
  font-size: 13px;
  color: var(--muted);
}

/* Component rules: .review-clamped — preserve cascade position. */

.review-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Component rules: .review-toggle — preserve cascade position. */

.review-toggle {
  background: none;
  color: var(--teal);
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  min-height: 44px;
  margin-top: 12px;
}

/* CONTACT AND ARTICLE */

/* Component rules: .contact-layout — preserve cascade position. */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0,35fr) minmax(0,65fr);
  gap: 48px;
  padding-top: 12px;
}

/* Component rules: .contact-layout aside — preserve cascade position. */

.contact-layout aside {
  padding-top: 30px;
}

/* Component rules: .contact-number — preserve cascade position. */

.contact-number {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 26px;
  color: var(--teal);
  margin: 14px 0;
}

/* Component rules: .contact-layout aside p — preserve cascade position. */

.contact-layout aside p {
  color: var(--muted);
}

/* Component rules: .contact-palm — preserve cascade position. */

.contact-palm {
  width: 140px;
  height: auto;
  margin-top: 50px;
  opacity: .55;
}

/* Component rules: .form-card — preserve cascade position. */

.form-card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--color-surface-card-warm);
  box-shadow: 0 16px 40px var(--color-shadow-tone-04);
  min-width: 0;
}

/* Component rules: .form-card h2 — preserve cascade position. */

.form-card h2 {
  font-size: 30px;
  margin-bottom: 26px;
}

/* Component rules: .contact-form — preserve cascade position. */

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Component rules: .contact-form>div — preserve cascade position. */

.contact-form>div {
  min-width: 0;
}

/* Component rules: .contact-form label — preserve cascade position. */

.contact-form label {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}

/* Component rules: .contact-form input,.contact-form textarea — preserve cascade position. */

.contact-form input,.contact-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--color-surface-form-warm);
  padding: 12px 14px;
  color: var(--ink);
  font-size: 16px;
}

/* Component rules: .contact-form textarea — preserve cascade position. */

.contact-form textarea {
  resize: vertical;
}

/* Component rules: .contact-form :is(input,textarea):focus — preserve cascade position. */

.contact-form :is(input,textarea):focus {
  box-shadow: 0 0 0 3px var(--color-shadow-tone-05);
}

/* Component rules: .full — preserve cascade position. */

.full {
  grid-column: 1/-1;
}

/* Component rules: .article — preserve cascade position. */

.article {
  max-width: 1120px;
  padding-bottom: 40px;
}

/* Component rules: .article>.content-photo — preserve cascade position. */

.article>.content-photo {
  margin: 24px 0 48px;
}

/* Component rules: .article-meta — preserve cascade position. */

.article-meta {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: var(--muted);
}

/* Component rules: .article-layout — preserve cascade position. */

.article-layout {
  display: grid;
  grid-template-columns: 250px minmax(0,1fr);
  gap: 64px;
}

/* Component rules: .article-toc — preserve cascade position. */

.article-toc {
  align-self: start;
  position: sticky;
  top: 25px;
  border-left: 2px solid var(--line);
  padding-left: 22px;
}

/* Component rules: .article-toc h2 — preserve cascade position. */

.article-toc h2 {
  font: 500 16px var(--sans);
  letter-spacing: 0;
  margin-bottom: 16px;
}

/* Component rules: .article-toc a — preserve cascade position. */

.article-toc a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  color: var(--muted);
}

/* Component rules: .article-body section — preserve cascade position. */

.article-body section {
  margin-bottom: 40px;
  scroll-margin-top: 32px;
}

/* Component rules: .article-body h2 — preserve cascade position. */

.article-body h2 {
  font-size: 30px;
  margin-bottom: 20px;
}

/* Component rules: .article-body p — preserve cascade position. */

.article-body p {
  margin-top: 16px;
}

/* Component rules: .error-page — preserve cascade position. */

.error-page {
  padding-block: 100px;
  min-height: 60vh;
}

/* Component rules: .error-page p — preserve cascade position. */

.error-page p {
  margin: 20px 0;
}

/* Component rules: .button-row — preserve cascade position. */

.button-row {
  display: flex;
  gap: 24px;
  align-items: center;
}

/* HOME */

/* Component rules: .home-hero — preserve cascade position. */

.home-hero {
  position: relative;
  min-height: 620px;
  padding: 82px 0 146px;
  isolation: isolate;
  overflow: hidden;
}

/* Component rules: .home-hero-copy — preserve cascade position. */

.home-hero-copy {
  max-width: 50%;
  position: relative;
  z-index: 4;
}

/* Component rules: .home-hero h1 — preserve cascade position. */

.home-hero h1 {
  max-width: 600px;
  font-family: "Libre Caslon Display",Georgia,serif;
  font-size: clamp(52px,4.55vw,66px);
  line-height: 1.02;
  letter-spacing: -1.5px;
}

/* Component rules: .home-hero h1 span — preserve cascade position. */

.home-hero h1 span {
  display: block;
}

/* Component rules: .home-hero .lead — preserve cascade position. */

.home-hero .lead {
  max-width: 465px;
  margin-top: 25px;
  font-size: 16px;
  line-height: 1.45;
}

/* Component rules: .home-hero .button — preserve cascade position. */

.home-hero .button {
  margin-top: 28px;
  min-width: 216px;
}

/* Component rules: .home-hero-photo .hero-photo-curve — preserve cascade position. */

.home-hero-photo .hero-photo-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  fill: var(--paper);
  stroke: none;
  pointer-events: none;
}

.home-hero-photo .hero-photo-curve path,
.hero-wave path:last-of-type {
  fill: var(--paper);
}

/* Component rules: .home-hero-photo — preserve cascade position. */

.home-hero-photo {
  position: absolute;
  inset: 0 0 0 38.5%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Component rules: .home-hero-photo img — preserve cascade position. */

.home-hero-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 50%;
  border-radius: 0;
}

/* Component rules: .home-hero-photo:after — preserve cascade position. */

.home-hero-photo:after {
  content: none;
}

/* Component rules: .hero-wave — preserve cascade position. */

.hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 168px;
  stroke: none;
  z-index: 3;
  pointer-events: none;
}

/* Component rules: .benefits — preserve cascade position. */

.benefits {
  display: flex;
  gap: 38px;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}

/* Component rules: .benefits li — preserve cascade position. */

.benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 145px;
  font-size: 12px;
  line-height: 1.35;
}

/* Component rules: .benefit-mark — preserve cascade position. */

.benefit-mark {
  font-size: 28px;
  color: var(--teal);
}

/* Component rules: .home-services — preserve cascade position. */

.home-services {
  padding-top: 42px;
  padding-bottom: 38px;
}

/* Component rules: .home-services .section-heading — preserve cascade position. */

.home-services .section-heading {
  margin-bottom: 26px;
}

/* Component rules: .home-services .section-heading h2 — preserve cascade position. */

.home-services .section-heading h2 {
  font-size: clamp(34px,3vw,42px);
}

/* Component rules: .home-services-grid — preserve cascade position. */

.home-services-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 38px 32px;
}

/* Component rules: .home-services .link-card .content-photo — preserve cascade position. */

.home-services .link-card .content-photo {
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 46% 18% 18% 2% / 48% 18% 20% 3%;
}

/* Component rules: .home-services .card-copy — preserve cascade position. */

.home-services .card-copy {
  padding-top: 15px;
}

/* Component rules: .home-services .card-copy h3 — preserve cascade position. */

.home-services .card-copy h3 {
  font-size: 20px;
  font-weight: 600;
}

/* Component rules: .home-services .card-copy p — preserve cascade position. */

.home-services .card-copy p {
  max-width: 245px;
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.42;
}

/* Component rules: .home-project — preserve cascade position. */

.home-project {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

/* Component rules: .home-project-grid — preserve cascade position. */

.home-project-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,3fr) minmax(0,2fr);
  align-items: center;
  gap: clamp(32px,4vw,64px);
  width: calc(100% - var(--gutter)*2);
  max-width: 1280px;
  margin-inline: auto;
}

/* Component rules: .home-project-media — preserve cascade position. */

.home-project-media {
  display: block;
  min-width: 0;
  aspect-ratio: 2.12/1;
  overflow: hidden;
  border-radius: 18%;
}

/* Component rules: .home-project-photo — preserve cascade position. */

.home-project-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* Component rules: .home-project-copy — preserve cascade position. */

.home-project-copy {
  max-width: 420px;
  padding-block: 36px;
}

/* Component rules: .home-project-copy h2 — preserve cascade position. */

.home-project-copy h2 {
  font-size: 34px;
  line-height: 1.08;
}

/* Component rules: .home-project-copy>p:not(.eyebrow) — preserve cascade position. */

.home-project-copy>p:not(.eyebrow) {
  margin-top: 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

/* Component rules: .home-project-copy .text-link — preserve cascade position. */

.home-project-copy .text-link {
  margin-top: 14px;
}

/* Component rules: .home-project-palm — preserve cascade position. */

.home-project-palm {
  position: absolute;
  right: -10px;
  bottom: 16px;
  z-index: 0;
  width: 170px;
  height: auto;
  opacity: .72;
  pointer-events: none;
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:1199px) {
  .site-header {
    min-height: 80px;
  }

  .header-cta {
    margin-left: auto;
    margin-right: 54px;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    position: absolute;
    right: 0;
    z-index: 32;
  }

  .menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink);
  }

  .main-nav {
    display: none;
    position: absolute;
    z-index: 31;
    top: 100%;
    left: calc(-1*var(--gutter));
    right: calc(-1*var(--gutter));
    padding: 20px var(--gutter) 30px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    max-height: calc(100dvh - 80px);
    overflow: auto;
    box-shadow: 0 24px 30px var(--color-shadow-tone-06);
    font-size: 16px;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav>a,.services-menu>summary {
    min-height: 48px;
  }

  .main-nav .header-phone {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }

  .header-phone__copy strong {
    font-size: 15px;
  }

  .header-phone__copy small {
    font-size: 12px;
  }

  .services-dropdown {
    position: static;
    width: auto;
    box-shadow: none;
    border-radius: 0;
    border: 0;
    border-left: 1px solid var(--line);
    margin-bottom: 12px;
    padding: 0 15px;
  }

  .services-dropdown a {
    font-size: 14px;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (min-width:1200px) and (max-width:1350px) {
  .main-nav {
    gap: 10px;
  }

  .brand__name {
    font-size: 14px;
  }

  .header-cta {
    padding-inline: 14px;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:899px) {
  .intro-grid,.split-section {
    gap: 32px;
  }

  .intro-grid h1 {
    font-size: 40px;
  }

  .hub-grid,.text-card-grid,.review-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px 20px;
  }

  .home-services-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 32px 20px;
  }

  .home-project-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-right: 0;
  }

  .home-project-media {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 18%;
  }

  .home-project-copy {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding: 0 0 52px;
  }

  .home-project-palm {
    width: 135px;
    opacity: .5;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-palm {
    display: none;
  }

  .contact-layout aside {
    padding-top: 0;
  }

  .article-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .article-toc {
    position: static;
  }

  .home-hero {
    min-height: 590px;
    padding-top: 64px;
  }

  .home-hero-copy {
    max-width: 58%;
  }

  .home-hero h1 {
    font-size: 50px;
  }

  .home-hero-photo {
    left: 35%;
  }

  .benefits {
    gap: 16px;
  }

  .value-grid {
    gap: 24px;
  }

  .steps-grid {
    gap: 18px;
  }

  .steps-grid li {
    padding-left: 12px;
    gap: 10px;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:599px) {
  .section {
    padding-block: 40px;
  }

  h1,.intro-grid h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 20px;
  }

  .lead {
    font-size: 16px;
  }

  .brand__name {
    font-size: 13px;
    max-width: 155px;
  }

  .brand {
    max-width: 220px;
  }

  .brand>img {
    width: 44px;
    height: 44px;
  }

  .header-cta {
    display: none;
  }

  .site-header {
    min-height: 76px;
  }

  .main-nav {
    max-height: calc(100dvh - 76px);
  }

  .page-intro {
    padding-top: 18px;
    padding-bottom: 20px;
  }

  .breadcrumb {
    margin-bottom: 25px;
  }

  .intro-grid,.split-section {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .intro-grid .content-photo {
    margin-top: 8px;
  }

  .hub-grid,.text-card-grid,.review-grid,.value-grid,.steps-grid,.related-article-grid,.home-services-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .home-services {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .home-services .section-heading {
    margin-bottom: 24px;
  }

  .home-project-media {
    width: 100%;
    border-radius: 18%;
  }

  .home-project-copy {
    width: 100%;
    padding-bottom: 44px;
  }

  .home-project-copy h2 {
    font-size: 30px;
  }

  .home-project-palm {
    right: -34px;
    width: 120px;
    opacity: .4;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 12px;
  }

  .steps-grid li,.steps-grid li:first-child {
    padding: 0 0 20px;
    border: 0;
    border-bottom: 1px solid var(--line);
    gap: 18px;
  }

  .steps-grid li:last-child {
    border: 0;
  }

  .faq-item summary {
    min-height: 56px;
  }

  .form-card {
    padding: 24px 20px;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-number {
    font-size: 23px;
  }

  .contact-layout {
    padding-top: 10px;
  }

  .footer-top {
    flex-direction: column;
    align-items: start;
    gap: 14px;
  }

  .site-footer nav {
    gap: 4px 22px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
  }

  .cta {
    padding: 45px 0 65px;
  }

  .article-body h2 {
    font-size: 28px;
  }

  .article>.content-photo {
    margin-bottom: 30px;
  }

  .home-hero {
    min-height: 0;
    padding: 38px 0 372px;
  }

  .home-hero-copy {
    max-width: 100%;
  }

  .home-hero h1 {
    font-size: 44px;
    line-height: 1.04;
  }

  .home-hero .lead {
    line-height: 1.55;
  }

  .home-hero-photo {
    inset: auto 0 0;
    height: 350px;
    clip-path: none;
    border-radius: 72px 0 0 0;
  }

  .home-hero-photo:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,var(--paper) 0,transparent 18%);
    pointer-events: none;
  }

  .benefits {
    gap: 12px;
    flex-wrap: wrap;
  }

  .benefits li {
    flex: 1 1 30%;
    min-width: 92px;
  }

  .hero-wave {
    height: 92px;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,*:before,*:after {
    transition: none !important;
    animation: none !important;
  }
}

/* RETAINED SCROLL SNAP AND DIALOG */

/* Component rules: .gallery-controls — preserve cascade position. */

.gallery-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Component rules: .gallery-range — preserve cascade position. */

.gallery-range {
  min-width: 68px;
  margin-right: 6px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Component rules: .circle-button — preserve cascade position. */

.circle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  color: var(--teal);
  background: transparent;
  border: 1px solid var(--color-decoration-palm);
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}

/* Component rules: .circle-button:hover:not(:disabled) — preserve cascade position. */

.circle-button:hover:not(:disabled) {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--color-text-on-dark);
}

/* Component rules: .circle-button:disabled — preserve cascade position. */

.circle-button:disabled {
  opacity: .35;
  cursor: default;
}

/* Component rules: .circle-button svg — preserve cascade position. */

.circle-button svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* Component rules: [data-gallery-previous] svg, [data-dialog-previous] svg — preserve cascade position. */

[data-gallery-previous] svg, [data-dialog-previous] svg {
  transform: rotate(180deg);
}

/* Component rules: .gallery-track — preserve cascade position. */

.gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  margin: 0;
  padding: 5px 0 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}

/* Component rules: .gallery-track::-webkit-scrollbar — preserve cascade position. */

.gallery-track::-webkit-scrollbar {
  display: none;
}

/* Component rules: .gallery-card — preserve cascade position. */

.gallery-card {
  min-width: 0;
  scroll-snap-align: start;
}

/* Component rules: .gallery-card figure — preserve cascade position. */

.gallery-card figure {
  margin: 0;
}

/* Component rules: .gallery-photo — preserve cascade position. */

.gallery-photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 40% 24% 18% 3% / 52% 24% 18% 4%;
}

/* Component rules: .gallery-photo:focus-visible — preserve cascade position. */

.gallery-photo:focus-visible {
  outline-offset: -4px;
}

/* Component rules: .gallery-photo img — preserve cascade position. */

.gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s;
}

/* Component rules: .gallery-photo:hover img — preserve cascade position. */

.gallery-photo:hover img {
  transform: scale(1.025);
}

/* Component rules: .gallery-card figcaption — preserve cascade position. */

.gallery-card figcaption {
  padding-top: 16px;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Component rules: .gallery-card figcaption span — preserve cascade position. */

.gallery-card figcaption span {
  display: block;
}

/* Component rules: .gallery-location — preserve cascade position. */

.gallery-location {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

/* Component rules: .gallery-dialog — preserve cascade position. */

.gallery-dialog {
  width: min(1100px, calc(100% - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 20px 24px;
  border: 1px solid var(--color-caption-muted);
  border-radius: 20px;
  background: var(--color-gallery-text);
  color: var(--color-surface-white);
  overflow: auto;
  box-shadow: 0 20px 80px var(--color-overlay-black-translucent);
}

/* Component rules: .gallery-dialog[open] — preserve cascade position. */

.gallery-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
}

/* Component rules: .gallery-dialog::backdrop — preserve cascade position. */

.gallery-dialog::backdrop {
  background: var(--color-gallery-backdrop);
}

/* Component rules: .gallery-dialog-header — preserve cascade position. */

.gallery-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Component rules: .gallery-dialog-header h2 — preserve cascade position. */

.gallery-dialog-header h2 {
  margin: 0;
  font: 500 18px/1.4 var(--sans);
  overflow-wrap: anywhere;
}

/* Component rules: .gallery-dialog .circle-button — preserve cascade position. */

.gallery-dialog .circle-button {
  color: var(--color-surface-white);
  border-color: var(--color-decoration-muted);
}

/* Component rules: .gallery-dialog-stage — preserve cascade position. */

.gallery-dialog-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: min(65dvh, 680px);
  min-height: 180px;
}

/* Component rules: .gallery-dialog-image — preserve cascade position. */

.gallery-dialog-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

/* Component rules: .gallery-load-state — preserve cascade position. */

.gallery-load-state {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
  font-size: 16px;
  line-height: 1.5;
}

/* Component rules: .gallery-retry — preserve cascade position. */

.gallery-retry {
  border: 1px solid var(--color-decoration-muted);
  border-radius: 999px;
  padding: 10px 20px;
  min-height: 44px;
  margin-top: 16px;
  color: var(--color-text-on-dark);
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

/* Component rules: .gallery-retry:hover — preserve cascade position. */

.gallery-retry:hover {
  background: var(--teal);
}

/* Component rules: .gallery-dialog-footer — preserve cascade position. */

.gallery-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Component rules: .gallery-dialog-footer > p — preserve cascade position. */

.gallery-dialog-footer > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-gallery-divider);
  overflow-wrap: anywhere;
}

/* Component rules: .gallery-dialog-navigation — preserve cascade position. */

.gallery-dialog-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Component rules: [data-dialog-counter] — preserve cascade position. */

[data-dialog-counter] {
  min-width: 54px;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:899px) {
  .gallery-track {
    grid-auto-columns: calc((100% - 20px)/2);
    gap: 20px;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:599px) {
  .gallery-track {
    grid-auto-columns: 88%;
    gap: 16px;
  }

  .gallery-dialog {
    width: calc(100% - 24px);
    padding: 14px;
  }

  .gallery-dialog-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .gallery-dialog-stage {
    height: 50dvh;
  }

  .gallery-dialog-navigation {
    justify-content: center;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:1199px) {
  html:not(.js) .main-nav {
    display: block;
    position: static;
    flex: 0 0 100%;
    max-height: none;
    box-shadow: none;
    padding: 15px 0;
  }

  html:not(.js) .site-header {
    flex-wrap: wrap;
  }

  html:not(.js) .menu-toggle {
    display: none;
  }
}

/* Component rules: .svg-library — preserve cascade position. */

.svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Component rules: .benefit-mark — preserve cascade position. */

.benefit-mark {
  width: 24px;
  height: 28px;
  flex-shrink: 0;
}

/* HOME PROCESS, COASTAL INVITATION AND FOOTER */

/* Component rules: .home-process — preserve cascade position. */

.home-process {
  position: relative;
  overflow: hidden;
  padding: 38px 0 44px;
  background: var(--paper);
}

/* Component rules: .home-process>.container — preserve cascade position. */

.home-process>.container {
  position: relative;
  z-index: 1;
  max-width: 980px;
}

/* Component rules: .home-process .eyebrow,.home-process h2 — preserve cascade position. */

.home-process .eyebrow,.home-process h2 {
  text-align: center;
}

/* Component rules: .home-process h2 — preserve cascade position. */

.home-process h2 {
  font-size: 36px;
}

/* Component rules: .home-process .steps-grid — preserve cascade position. */

.home-process .steps-grid {
  margin-top: 30px;
  gap: 30px;
}

/* Component rules: .home-process .steps-grid h3 — preserve cascade position. */

.home-process .steps-grid h3 {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -.3px;
}

/* Component rules: .home-process .steps-grid p — preserve cascade position. */

.home-process .steps-grid p {
  font-size: 15px;
  line-height: 1.45;
  margin-top: 8px;
}

/* Component rules: .home-process-palm — preserve cascade position. */

.home-process-palm {
  position: absolute;
  bottom: 16px;
  left: -12px;
  width: 145px;
  height: auto;
  opacity: .7;
  pointer-events: none;
}

/* Component rules: .home-cta — preserve cascade position. */

.home-cta {
  isolation: isolate;
  min-height: 300px;
  padding: 34px 0 65px;
  background: var(--color-cta-accent);
}

/* Component rules: .home-cta:after — preserve cascade position. */

.home-cta:after {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg,var(--color-gradient-tone-01) 0%,var(--color-gradient-tone-02) 32%,var(--color-gradient-tone-03) 64%,transparent 84%);
  pointer-events: none;
}

/* Component rules: .home-cta-photo — preserve cascade position. */

.home-cta-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  pointer-events: none;
}

/* Component rules: .home-cta-copy — preserve cascade position. */

.home-cta-copy {
  position: relative;
  z-index: 3;
}

/* Component rules: .home-cta .eyebrow — preserve cascade position. */

.home-cta .eyebrow {
  font-size: 11px;
  letter-spacing: 2.7px;
  margin-bottom: 14px;
}

/* Component rules: .home-cta h2 — preserve cascade position. */

.home-cta h2 {
  font-size: 46px;
  line-height: 1.1;
  max-width: 650px;
}

/* Component rules: .home-cta .home-cta-copy>p:not(.eyebrow) — preserve cascade position. */

.home-cta .home-cta-copy>p:not(.eyebrow) {
  font-size: 18px;
  line-height: 1.35;
  max-width: 410px;
  margin-top: 14px;
}

/* Component rules: .home-cta .button — preserve cascade position. */

.home-cta .button {
  margin-top: 22px;
  min-width: 206px;
  min-height: 46px;
}

/* Component rules: .home-cta .home-cta-writing — preserve cascade position. */

.home-cta .home-cta-writing {
  position: absolute;
  z-index: 2;
  left: 54%;
  top: 40%;
  max-width: 165px;
  margin: 0;
  color: var(--color-text-on-dark);
  font: 46px/.85 "The Nautigal",cursive;
  transform: rotate(-9deg);
  text-align: center;
  pointer-events: none;
}

/* Component rules: .home-cta-writing:after — preserve cascade position. */

.home-cta-writing:after {
  content: "";
  display: block;
  width: 55px;
  height: 2px;
  border-radius: 50%;
  background: var(--color-text-on-dark);
  margin: 15px 0 0 85px;
  transform: rotate(-5deg);
}

/* Component rules: .home-cta-wave — preserve cascade position. */

.home-cta-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: 4;
  stroke: none;
  pointer-events: none;
}

/* Component rules: .home-footer — preserve cascade position. */

.home-footer {
  padding-block: 18px 20px;
}

/* Component rules: .home-footer .footer-top — preserve cascade position. */

.home-footer .footer-top {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr) auto 190px;
  gap: 24px;
  min-height: 76px;
}

/* Component rules: .home-footer .brand>img — preserve cascade position. */

.home-footer .brand>img {
  width: 60px;
  height: 60px;
}

/* Component rules: .home-footer .brand__name — preserve cascade position. */

.home-footer .brand__name {
  color: var(--color-cta-dark);
  font-size: 16px;
  letter-spacing: 1.2px;
}

/* Component rules: .home-footer nav — preserve cascade position. */

.home-footer nav {
  justify-content: center;
  gap: 0 16px;
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
}

/* Component rules: .home-footer .footer-phone — preserve cascade position. */

.home-footer .footer-phone {
  gap: 10px;
  color: var(--ink);
  line-height: 1.3;
}

/* Component rules: .home-footer .footer-phone>svg — preserve cascade position. */

.home-footer .footer-phone>svg {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  color: var(--teal);
}

/* Component rules: .home-footer .footer-phone strong — preserve cascade position. */

.home-footer .footer-phone strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

/* Component rules: .home-footer .footer-phone small — preserve cascade position. */

.home-footer .footer-phone small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
}

/* Component rules: .footer-social — preserve cascade position. */

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

/* Component rules: .footer-social span — preserve cascade position. */

.footer-social span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 32px;
}

/* Component rules: .footer-social svg — preserve cascade position. */

.footer-social svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* Component rules: .home-footer .footer-bottom — preserve cascade position. */

.home-footer .footer-bottom {
  margin-top: 10px;
  padding-top: 14px;
  border-color: var(--color-footer-divider);
  font-size: 10px;
  gap: 20px;
}

/* Component rules: .home-footer .footer-bottom p:last-child — preserve cascade position. */

.home-footer .footer-bottom p:last-child {
  color: var(--teal);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: right;
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (min-width:1441px) {
  .home-cta {
    min-height: 350px;
    padding-top: 50px;
  }

  .home-cta-photo {
    object-position: center 52%;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:1099px) {
  .home-footer .footer-top {
    grid-template-columns: 200px 1fr 180px;
    gap: 18px;
  }

  .home-footer .footer-social {
    grid-column: 2;
    grid-row: 2;
    justify-content: center;
  }

  .home-footer .footer-phone {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .home-footer nav {
    gap: 0 12px;
  }

  .home-process>.container {
    width: calc(100% - var(--gutter)*2);
  }

  .home-process-palm {
    left: -45px;
    opacity: .45;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:599px) {
  .home-process {
    padding: 36px 0;
  }

  .home-process h2 {
    font-size: 30px;
  }

  .home-process .steps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home-process .steps-grid li {
    padding-left: 0;
  }

  .home-process-palm {
    width: 110px;
    opacity: .3;
    left: -55px;
  }

  .home-cta {
    padding: 36px 0 210px;
    min-height: 490px;
  }

  .home-cta h2 {
    font-size: 36px;
    max-width: 340px;
  }

  .home-cta .eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .home-cta .home-cta-copy>p:not(.eyebrow) {
    font-size: 16px;
    max-width: 320px;
  }

  .home-cta:after {
    background: linear-gradient(180deg,var(--color-gradient-tone-04) 0%,var(--color-gradient-tone-05) 44%,var(--color-gradient-tone-06) 74%,transparent);
  }

  .home-cta-photo {
    object-position: 72% center;
  }

  .home-cta .home-cta-writing {
    left: 48%;
    top: auto;
    bottom: 85px;
    font-size: 40px;
    max-width: 145px;
  }

  .home-cta-wave {
    height: 65px;
  }

  .home-footer .footer-top {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 10px;
  }

  .home-footer .brand {
    justify-self: center;
  }

  .home-footer nav {
    justify-content: center;
    font-size: 13px;
    gap: 0 18px;
  }

  .home-footer .footer-social {
    grid-column: 1;
    grid-row: auto;
    justify-content: center;
  }

  .home-footer .footer-phone {
    grid-column: 1;
    grid-row: auto;
    justify-content: center;
    min-height: 48px;
  }

  .home-footer .footer-phone small {
    font-size: 11px;
  }

  .home-footer .footer-bottom {
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .home-footer .footer-bottom p:last-child {
    text-align: center;
  }
}

/* Content-led inner layouts. Homepage typography and component layout stay intact. */

/* Component rules: .content-template .page-intro — preserve cascade position. */

.content-template .page-intro {
  padding-block: 32px 56px;
}

/* Component rules: .content-template .intro-grid — preserve cascade position. */

.content-template .intro-grid {
  gap: clamp(28px,4vw,64px);
  align-items: start;
}

/* Component rules: .content-template .intro-grid>.content-photo — preserve cascade position. */

.content-template .intro-grid>.content-photo {
  margin-top: 12px;
  position: sticky;
  top: 28px;
}

/* Component rules: .content-template .intro-copy — preserve cascade position. */

.content-template .intro-copy {
  max-width: 850px;
}

/* Component rules: .content-template .intro-text h1 — preserve cascade position. */

.content-template .intro-text h1 {
  max-width: 19ch;
  text-wrap: balance;
  font-size: clamp(36px,3.5vw,52px);
}

/* Component rules: .content-template .intro-text .lead — preserve cascade position. */

.content-template .intro-text .lead {
  font-size: 17px;
  line-height: 1.8;
  max-width: 70ch;
}

/* Component rules: .content-template .eyebrow — preserve cascade position. */

.content-template .eyebrow {
  display: block;
}

/* Component rules: .content-template .content-actions — preserve cascade position. */

.content-template .content-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 28px;
}

/* Component rules: .content-template .reading-section — preserve cascade position. */

.content-template .reading-section {
  display: block;
}

/* Component rules: .content-template .reading-section>.editorial-copy — preserve cascade position. */

.content-template .reading-section>.editorial-copy {
  display: grid;
  grid-template-columns: minmax(0,35fr) minmax(0,65fr);
  gap: clamp(48px,4.5vw,64px);
  align-items: start;
  max-width: none;
  width: 100%;
}

/* Component rules: .content-template .section:has(>.reading-section) — preserve cascade position. */

.content-template .section:has(>.reading-section) {
  padding-block: clamp(48px,4vw,56px);
}

/* Component rules: .content-template .reading-section .editorial-heading,.content-template .reading-section .editorial-body — preserve cascade position. */

.content-template .reading-section .editorial-heading,.content-template .reading-section .editorial-body {
  min-width: 0;
}

/* Component rules: .content-template .reading-section .editorial-heading h2 — preserve cascade position. */

.content-template .reading-section .editorial-heading h2 {
  font-size: clamp(32px,2.5vw,36px);
  max-width: 24ch;
}

/* Component rules: .content-template .reading-section .editorial-body — preserve cascade position. */

.content-template .reading-section .editorial-body {
  max-width: 72ch;
}

/* Component rules: .content-template .reading-section .editorial-body>p — preserve cascade position. */

.content-template .reading-section .editorial-body>p {
  margin-top: 0;
}

/* Component rules: .content-template .reading-section .editorial-body .content-actions — preserve cascade position. */

.content-template .reading-section .editorial-body .content-actions {
  margin-top: 24px;
}

/* Component rules: .content-template .editorial-copy — preserve cascade position. */

.content-template .editorial-copy {
  position: relative;
  max-width: 72ch;
}

/* Component rules: .content-template .editorial-copy h2 — preserve cascade position. */

.content-template .editorial-copy h2 {
  max-width: 24ch;
  text-wrap: balance;
}

/* Component rules: .content-template .editorial-copy p — preserve cascade position. */

.content-template .editorial-copy p {
  line-height: 1.85;
  margin-top: 22px;
  color: var(--muted);
}

/* Component rules: .content-template .section-index — preserve cascade position. */

.content-template .section-index {
  display: block;
  font: 20px/1.2 var(--serif);
  color: var(--teal);
  margin-bottom: 16px;
}

/* Component rules: .content-template p[data-copy] a — preserve cascade position. */

.content-template p[data-copy] a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Component rules: .content-template .cta p[data-copy] a — preserve cascade position. */

.content-template .cta p[data-copy] a {
  color: var(--color-text-on-dark);
}

/* Component rules: .content-template .cta h2 — preserve cascade position. */

.content-template .cta h2 {
  max-width: 26ch;
  text-wrap: balance;
}

/* Component rules: .content-template .cta p — preserve cascade position. */

.content-template .cta p {
  max-width: 72ch;
  line-height: 1.85;
}

/* Component rules: .content-template .hub-section — preserve cascade position. */

.content-template .hub-section {
  padding-top: 24px;
}

/* Component rules: .content-template .hub-grid — preserve cascade position. */

.content-template .hub-grid {
  gap: 52px 30px;
}

/* Component rules: .content-template article.link-card .content-photo — preserve cascade position. */

.content-template article.link-card .content-photo {
  transition: none;
}

/* Component rules: .content-template article.link-card:hover .content-photo — preserve cascade position. */

.content-template article.link-card:hover .content-photo {
  filter: none;
}

/* Component rules: .content-template .hub-grid .card-copy p — preserve cascade position. */

.content-template .hub-grid .card-copy p {
  line-height: 1.8;
}

/* Component rules: .content-template .text-card-grid .card-copy — preserve cascade position. */

.content-template .text-card-grid .card-copy {
  gap: 12px;
  padding: 28px;
}

/* Component rules: .content-template .text-card-grid .card-copy p — preserve cascade position. */

.content-template .text-card-grid .card-copy p {
  margin: 0;
  line-height: 1.8;
}

/* Component rules: .content-template .section-summary — preserve cascade position. */

.content-template .section-summary {
  max-width: 72ch;
  margin-top: 40px;
  line-height: 1.85;
  color: var(--muted);
}

/* Component rules: .content-template .article-subtitle — preserve cascade position. */

.content-template .article-subtitle {
  margin-top: 18px;
  font-size: 18px;
  color: var(--teal);
  max-width: 35ch;
}

/* Component rules: .content-template .editorial-layout — preserve cascade position. */

.content-template .editorial-layout {
  display: grid;
  grid-template-columns: 250px minmax(0,1fr);
  gap: clamp(36px,6vw,96px);
  padding-block: 24px 72px;
  align-items: start;
}

/* Component rules: .content-template .article-toc — preserve cascade position. */

.content-template .article-toc {
  position: sticky;
  top: 30px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-size: 14px;
}

/* Component rules: .content-template .article-toc ol — preserve cascade position. */

.content-template .article-toc ol {
  margin: 16px 0 0;
  padding-left: 22px;
}

/* Component rules: .content-template .article-toc li — preserve cascade position. */

.content-template .article-toc li {
  margin-top: 10px;
  padding-left: 3px;
}

/* Component rules: .content-template .article-toc a — preserve cascade position. */

.content-template .article-toc a {
  display: block;
  padding-block: 5px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Component rules: .content-template .article-toc a:hover — preserve cascade position. */

.content-template .article-toc a:hover {
  color: var(--teal);
}

/* Component rules: .content-template .article-body — preserve cascade position. */

.content-template .article-body {
  max-width: 72ch;
  min-width: 0;
}

/* Component rules: .content-template .article-section — preserve cascade position. */

.content-template .article-section {
  padding-block: 0 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 28px;
}

/* Component rules: .content-template .article-section:last-child — preserve cascade position. */

.content-template .article-section:last-child {
  margin-bottom: 0;
  border: 0;
  padding-bottom: 0;
}

/* Component rules: .content-template .article-section h2 — preserve cascade position. */

.content-template .article-section h2 {
  font-size: 32px;
  text-wrap: balance;
}

/* Component rules: .content-template .article-section p — preserve cascade position. */

.content-template .article-section p {
  line-height: 1.85;
  margin-top: 18px;
  color: var(--muted);
}

/* Component rules: .content-template .faq-layout .content-actions — preserve cascade position. */

.content-template .faq-layout .content-actions {
  margin-bottom: 32px;
}

/* Component rules: .content-template .faq-item p — preserve cascade position. */

.content-template .faq-item p {
  line-height: 1.8;
}

/* Component rules: .content-template .gallery-track — preserve cascade position. */

.content-template .gallery-track {
  margin-bottom: 0;
}

/* Component rules: .content-template .contact-layout — preserve cascade position. */

.content-template .contact-layout {
  padding-bottom: 72px;
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:999px) {
  .content-template .reading-section>.editorial-copy {
    grid-template-columns: minmax(0,1fr);
    gap: 24px;
    margin-inline: 0;
  }

  .content-template .reading-section .editorial-body {
    max-width: 72ch;
  }

  .content-template .editorial-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .content-template .article-toc {
    position: static;
  }

  .content-template .intro-grid,.content-template .split-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .content-template .intro-grid>.content-photo {
    position: static;
    margin-top: 0;
    max-width: 640px;
  }

  .content-template .split-section>.content-photo {
    max-width: 640px;
  }

  .content-template .section-heading>.button {
    flex-shrink: 0;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:767px) {
  .content-template .intro-grid,.content-template .split-section,.content-template .faq-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .content-template .intro-grid>.content-photo {
    position: static;
    margin-top: 0;
  }

  .content-template .editorial-layout {
    grid-template-columns: 1fr;
    padding-bottom: 48px;
  }

  .content-template .article-toc {
    position: static;
  }

  .content-template .section {
    padding-block: 42px;
  }

  .content-template .page-intro {
    padding-bottom: 36px;
  }

  .content-template .breadcrumb {
    margin-bottom: 28px;
  }

  .content-template .hub-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .content-template .intro-text .lead {
    font-size: 16px;
  }

  .content-template .section-heading {
    align-items: start;
  }

  .content-template .article-section h2 {
    font-size: 28px;
  }

  .content-template .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:599px) {
  .content-template .hub-grid,.content-template .text-card-grid {
    grid-template-columns: 1fr;
  }

  .content-template .section-heading {
    flex-direction: column;
    gap: 22px;
  }

  .content-template .intro-text h1 {
    font-size: 38px;
  }

  .content-template h2 {
    font-size: 30px;
  }

  .content-template .text-card-grid .card-copy {
    padding: 24px;
  }

  .content-template .content-actions {
    gap: 12px 20px;
  }

  .content-template .cta {
    padding-top: 44px;
    padding-bottom: 64px;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  .button,.button svg,.link-card .content-photo {
    transition: none;
  }
}

/* Compact introductory copy and balanced media, following layout review. */

/* Component rules: .content-template .intro-grid — preserve cascade position. */

.content-template .intro-grid {
  align-items: stretch;
}

/* Component rules: .content-template .intro-grid .intro-text — preserve cascade position. */

.content-template .intro-grid .intro-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* Component rules: .content-template .intro-grid .intro-media — preserve cascade position. */

.content-template .intro-grid .intro-media {
  position: relative;
  min-height: 300px;
  min-width: 0;
}

/* Component rules: .content-template .intro-media>.content-photo — preserve cascade position. */

.content-template .intro-media>.content-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  margin: 0;
}

/* Component rules: .content-template .intro-text .lead — preserve cascade position. */

.content-template .intro-text .lead {
  margin-top: 18px;
}

/* Component rules: .content-template .intro-text .content-actions — preserve cascade position. */

.content-template .intro-text .content-actions {
  margin-top: 22px;
}

/* Component rules: .content-template .article-subtitle — preserve cascade position. */

.content-template .article-subtitle {
  margin-top: 12px;
}

/* Component rules: .content-template .intro-followup — preserve cascade position. */

.content-template .intro-followup {
  max-width: 70ch;
  margin-top: 24px;
  color: var(--muted);
  line-height: 1.8;
}

/* Component rules: .content-template .article-body a.button — preserve cascade position. */

.content-template .article-body a.button {
  color: var(--color-surface-white);
  text-decoration: none;
}

/* Component rules: .content-template .article-body a.button-white — preserve cascade position. */

.content-template .article-body a.button-white {
  color: var(--teal);
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:999px) {
  .content-template .intro-grid .intro-media {
    min-height: 0;
    aspect-ratio: 16/9;
    max-width: 640px;
    width: 100%;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:599px) {
  .home-hero-photo .hero-photo-curve {
    display: none;
  }
}

/* Keep hero copy inside the light area at every viewport width. */

/* Component rules: .home-hero .home-hero-copy — preserve cascade position. */

.home-hero .home-hero-copy {
  width: 50%;
  max-width: none;
  padding-right: 32px;
  min-width: 0;
}

/* Component rules: .home-hero .home-hero-photo — preserve cascade position. */

.home-hero .home-hero-photo {
  left: 50%;
}

/* Component rules: .home-hero .benefits — preserve cascade position. */

.home-hero .benefits {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

/* Component rules: .home-hero .benefits li — preserve cascade position. */

.home-hero .benefits li {
  min-width: 0;
  max-width: none;
  align-items: center;
}

/* Component rules: .home-hero .benefit-mark — preserve cascade position. */

.home-hero .benefit-mark {
  flex-shrink: 0;
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:999px) {
  .home-hero {
    min-height: 0;
    padding: 32px 0 0;
  }

  .home-hero .home-hero-copy {
    width: 100%;
    max-width: none;
    padding-right: 0;
  }

  .home-hero .home-hero-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    margin-top: 24px;
    border-radius: 72px 0 0 0;
  }

  .home-hero .home-hero-photo .hero-photo-curve {
    display: none;
  }

  .home-hero .home-hero-photo:after {
    content: none;
  }

  .home-hero .hero-wave {
    height: clamp(48px,9vw,92px);
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (min-width:360px) and (max-width:599px) {
  .home-hero .benefits {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:359px) {
  .home-hero .benefits {
    grid-template-columns: minmax(0,1fr);
  }
}

/* Balance hero height with the image width instead of a fixed crop. */

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (min-width:1000px) {
  .home-hero {
    display: flex;
    align-items: center;
    min-height: clamp(600px,28.125vw,900px);
    padding-block: 64px 132px;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:999px) {
  .home-hero .home-hero-photo>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-hero .lead {
    margin-top: 18px;
  }

  .home-hero .button {
    margin-top: 22px;
  }

  .home-hero .benefits {
    margin-top: 24px;
  }
}

/* Keep palm tips inside their sections without changing the page-edge crop. */

/* Component rules: .home-project-palm,.home-process-palm — preserve cascade position. */

.home-project-palm,.home-process-palm {
  max-height: calc(100% - 32px);
  object-fit: contain;
}

/* Component rules: .home-project-palm — preserve cascade position. */

.home-project-palm {
  object-position: right bottom;
}

/* Component rules: .home-process-palm — preserve cascade position. */

.home-process-palm {
  object-position: left bottom;
}

/* Component rules: .home-faq>div:first-child — preserve cascade position. */

.home-faq>div:first-child {
  min-width: 0;
}

/* Full-width homepage FAQ: two independent columns of three questions. */

/* Component rules: .home-faq — preserve cascade position. */

.home-faq {
  display: block;
}

/* Component rules: .home-faq>.faq-list — preserve cascade position. */

.home-faq>.faq-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 48px;
  border-top: 0;
  margin-top: 32px;
  width: 100%;
}

/* Component rules: .home-faq-column — preserve cascade position. */

.home-faq-column {
  min-width: 0;
  border-top: 1px solid var(--line);
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:767px) {
  .home-faq>.faq-list {
    grid-template-columns: minmax(0,1fr);
    margin-top: 24px;
  }

  .home-faq-column+.home-faq-column {
    border-top: 0;
  }
}

/* Shared full-width closing CTA on every site page. */

/* Component rules: .site-bottom-cta — preserve cascade position. */

.site-bottom-cta {
  padding: 56px 0 80px;
  background: var(--teal);
  color: var(--color-surface-white);
}

/* Component rules: .site-bottom-cta h2,.content-template .site-bottom-cta h2 — preserve cascade position. */

.site-bottom-cta h2,.content-template .site-bottom-cta h2 {
  width: 100%;
  max-width: none;
  text-wrap: wrap;
}

/* Component rules: .site-bottom-cta p,.content-template .site-bottom-cta p — preserve cascade position. */

.site-bottom-cta p,.content-template .site-bottom-cta p {
  width: 100%;
  max-width: none;
  line-height: 1.8;
}

/* Component rules: .site-bottom-cta p a — preserve cascade position. */

.site-bottom-cta p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Component rules: .site-bottom-cta>.container — preserve cascade position. */

.site-bottom-cta>.container {
  position: relative;
  z-index: 1;
}

/* Component rules: .site-bottom-cta:after — preserve cascade position. */

.site-bottom-cta:after {
  pointer-events: none;
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:599px) {
  .site-bottom-cta {
    padding: 40px 0 64px;
  }
}

/* Dedicated FAQ page: five questions per column below the heading. */

/* Component rules: .content-template .faq-page-questions — preserve cascade position. */

.content-template .faq-page-questions {
  display: block;
}

/* Component rules: .faq-page-columns — preserve cascade position. */

.faq-page-columns {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 48px;
  margin-top: 32px;
  align-items: start;
}

/* Component rules: .faq-page-columns>.faq-list — preserve cascade position. */

.faq-page-columns>.faq-list {
  min-width: 0;
  margin: 0;
}

/* Component rules: .faq-page-questions>.content-actions — preserve cascade position. */

.faq-page-questions>.content-actions {
  margin-top: 28px;
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:767px) {
  .faq-page-columns {
    grid-template-columns: minmax(0,1fr);
    gap: 0;
    margin-top: 24px;
  }

  .faq-page-columns>.faq-list+.faq-list {
    border-top: 0;
  }
}

/* Full-width summary on location detail pages. */

/* Component rules: .content-template[data-page="location"] .section-summary — preserve cascade position. */

.content-template[data-page="location"] .section-summary {
  width: 100%;
  max-width: none;
}

/* Homepage enquiry section, reusing the contact form controls. */

/* Component rules: .home-contact — preserve cascade position. */

.home-contact {
  padding-block: 64px;
  scroll-margin-top: 24px;
}

/* Component rules: .home-contact-grid — preserve cascade position. */

.home-contact-grid {
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,3fr);
  gap: 48px;
  align-items: start;
}

/* Component rules: .home-contact-grid>* — preserve cascade position. */

.home-contact-grid>* {
  min-width: 0;
}

/* Component rules: .home-contact-copy — preserve cascade position. */

.home-contact-copy {
  padding-top: 12px;
}

/* Component rules: .home-contact-intro — preserve cascade position. */

.home-contact-intro {
  margin-top: 20px;
  color: var(--muted);
  max-width: 46ch;
}

/* Component rules: .home-contact-details — preserve cascade position. */

.home-contact-details {
  margin-top: 28px;
}

/* Component rules: .home-contact-phone — preserve cascade position. */

.home-contact-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--teal);
  font-size: clamp(20px,2vw,26px);
}

/* Component rules: .home-contact-phone svg — preserve cascade position. */

.home-contact-phone svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* Component rules: .home-contact-details>p — preserve cascade position. */

.home-contact-details>p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

/* Component rules: .home-contact .form-card — preserve cascade position. */

.home-contact .form-card {
  padding: 32px;
  border-radius: 24px;
}

/* Component rules: .home-contact .form-card>h3 — preserve cascade position. */

.home-contact .form-card>h3 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.5px;
  line-height: 1.2;
  margin-bottom: 26px;
}

/* Component rules: .home-contact .contact-form>.button — preserve cascade position. */

.home-contact .contact-form>.button {
  width: 100%;
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:899px) {
  .home-contact-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 32px;
  }

  .home-contact-copy {
    padding-top: 0;
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:599px) {
  .home-contact {
    padding-block: 40px;
  }

  .home-contact .form-card {
    padding: 24px;
  }

  .home-contact .contact-form {
    grid-template-columns: minmax(0,1fr);
  }
}

/* Useful enquiry guidance balances the height of the contact form. */

/* Component rules: .home-contact-grid — preserve cascade position. */

.home-contact-grid {
  align-items: stretch;
}

/* Component rules: .home-contact-copy — preserve cascade position. */

.home-contact-copy {
  display: flex;
  flex-direction: column;
}

/* Component rules: .home-enquiry-guide — preserve cascade position. */

.home-enquiry-guide {
  margin-top: auto;
  padding-top: 32px;
}

/* Component rules: .home-enquiry-guide>h3 — preserve cascade position. */

.home-enquiry-guide>h3 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 16px;
}

/* Component rules: .home-enquiry-guide ol — preserve cascade position. */

.home-enquiry-guide ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

/* Component rules: .home-enquiry-guide li — preserve cascade position. */

.home-enquiry-guide li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

/* Component rules: .home-guide-number — preserve cascade position. */

.home-guide-number {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--teal);
  font-size: 12px;
  font-weight: 600;
}

/* Component rules: .home-enquiry-guide li>div — preserve cascade position. */

.home-enquiry-guide li>div {
  min-width: 0;
}

/* Component rules: .home-enquiry-guide h4 — preserve cascade position. */

.home-enquiry-guide h4 {
  margin: 0;
  font: 600 14px/1.5 var(--sans);
  color: var(--ink);
}

/* Component rules: .home-enquiry-guide p — preserve cascade position. */

.home-enquiry-guide p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width:899px) {
  .home-enquiry-guide {
    margin-top: 0;
    padding-top: 28px;
  }
}

/* Excel content map: long anchors and compact local navigation. */

/* Component rules: .content-template .intro-text, .content-template .card-copy, .services-dropdown — preserve cascade position. */

.content-template .intro-text, .content-template .card-copy, .services-dropdown {
  min-width: 0;
}

/* Component rules: .content-template .intro-text h1 — preserve cascade position. */

.content-template .intro-text h1 {
  overflow-wrap: anywhere;
}

/* Component rules: .hub-grid .card-copy h3 a, .home-services-grid h3 a — preserve cascade position. */

.hub-grid .card-copy h3 a, .home-services-grid h3 a {
  color: inherit;
  text-decoration: none;
}

/* Component rules: .hub-grid .card-copy h3 a:hover, .home-services-grid h3 a:hover — preserve cascade position. */

.hub-grid .card-copy h3 a:hover, .home-services-grid h3 a:hover {
  color: var(--teal);
  text-decoration: underline;
}

/* Component rules: .home-hero .hero-subtitle — preserve cascade position. */

.home-hero .hero-subtitle {
  margin: 16px 0;
  font-family: inherit;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3;
}

/* Component rules: .home-hero-copy h1 — preserve cascade position. */

.home-hero-copy h1 {
  font-size: clamp(40px, 4vw, 60px);
}

/* Component rules: .home-service-areas .area-link-list — preserve cascade position. */

.home-service-areas .area-link-list {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 14px 24px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}

/* Component rules: .home-service-areas .area-link-list a — preserve cascade position. */

.home-service-areas .area-link-list a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-area-link-border);
}

/* Component rules: .review-placeholder-note — preserve cascade position. */

.review-placeholder-note {
  margin: 0 0 24px;
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width: 999px) {
  .home-service-areas .area-link-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* Responsive/conditional rules: preserve this condition, order and specificity. */

@media (max-width: 359px) {
  .home-service-areas .area-link-list {
    grid-template-columns: 1fr;
  }
}

/* Visual sync from the maintained HVAC design.
   Keep existing placeholder instructions and palette tokens above unchanged.
   CTA specificity overrides the generic paragraph width restriction. */
.cta.site-bottom-cta p:not(.eyebrow),
.content-template .cta.site-bottom-cta p:not(.eyebrow) {
  width: 100%;
  max-width: none;
  line-height: 1.8;
}

/* Footer SVG logos: filled brand marks must not inherit generic icon strokes.
   currentColor keeps the existing footer palette; no external icon font needed. */
.footer-social .social-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
  shape-rendering: geometricPrecision;
}
.footer-social .social-icon-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-social .social-icon-dot {
  fill: currentColor;
  stroke: none;
}

/* Hero HVAC symbols: thermometer, air filter and energy-efficiency leaf.
   Existing text placeholders remain adjacent; SVGs are decorative.
   Palette: teal = icon outline, soft = badge fill, line = border/accent. */
.home-hero .benefit-icon {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-hero .benefit-icon-bg {
  fill: var(--soft);
  stroke: var(--line);
  stroke-width: 1;
}
.home-hero .benefit-accent {
  fill: var(--line);
}

/* Compact badges below 600px; existing benefit grid breakpoints are retained. */
@media (max-width: 599px) {
  .home-hero .benefit-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
}

/* Retain card layout when a service image is populated as a link. */
.home-services-grid .home-service-photo-link {
  display: block;
}

.service-map > img.service-map__photo, .inner-service-map > img.service-map__photo { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none; }