@font-face { /* Loads the self-hosted variable body font. */
  font-family: 'Open Sans'; /* Names the approved readable body typeface. */
  src: url('/assets/open-sans-latin.woff2') format('woff2'); /* Uses a local font file with no Google request. */
  font-weight: 400 600; /* Supports only the body weights this design needs. */
  font-style: normal; /* Declares the normal font style. */
  font-display: swap; /* Keeps text readable while the local font loads. */
} /* Ends the body font declaration. */
@font-face { /* Loads the self-hosted heading font. */
  font-family: 'Varela Round'; /* Uses the rounded heading typeface requested by the owner. */
  src: url('/assets/varela-round-latin.woff2') format('woff2'); /* Loads the official Latin font locally without a Google Fonts request. */
  font-weight: 400; /* Declares the font's real regular weight; heading bold is deliberately browser-synthesised. */
  font-style: normal; /* Declares normal heading typography. */
  font-display: swap; /* Makes headings readable before the font finishes loading. */
} /* Ends the heading font declaration. */
:root { /* Keeps shared visual decisions easy to edit. */
  --navy: #3f4e88; /* Supplies readable text, actions and the final contact panel. */
  --navy-dark: #303d70; /* Provides a clear darker hover state for filled actions. */
  --link: #246f65; /* Gives ordinary links accessible dark teal contrast on white and cream. */
  --teal: #3fa193; /* Retains the approved brand teal for restrained accents. */
  --pink: #d97a9f; /* Uses the exact requested logo pink for the current-page navigation marker. */
  --peach: #fad5b7; /* Supplies a warm high-contrast focus accent on dark surfaces. */
  --cream: #faf1e1; /* Supplies the single flat price-section background. */
  --white: #fff; /* Keeps most of the website light and open. */
  --heading-font: 'Varela Round', 'Trebuchet MS', sans-serif; /* Keeps the requested rounded heading face distinct from the body font. */
  --body-font: 'Open Sans', 'Segoe UI', sans-serif; /* Uses the approved humanist body typeface. */
  --content-width: 1176px; /* Limits large-screen content to a readable shared grid. */
} /* Ends the editable design tokens. */
* { /* Makes box dimensions predictable. */
  box-sizing: border-box; /* Includes padding in all declared widths. */
} /* Ends the universal sizing rule. */
html { /* Sets document-wide readable behaviour. */
  color-scheme: light; /* Keeps browser form controls compatible with the light design. */
  scroll-padding-top: 24px; /* Leaves room when following an anchor link. */
} /* Ends the root page settings. */
body { /* Establishes the open white brand canvas. */
  margin: 0; /* Removes browser-default page margins. */
  background: var(--white); /* Uses white as the primary page surface. */
  color: var(--navy); /* Keeps all ordinary text at an accessible contrast. */
  font-family: var(--body-font); /* Uses the local body font throughout. */
  font-size: 18px; /* Starts at the report's legible body-text size. */
  line-height: 1.65; /* Gives paragraphs comfortable reading space. */
  -webkit-text-size-adjust: 100%; /* Respects the authored size while retaining user zoom. */
} /* Ends the shared body presentation. */
a { /* Makes ordinary inline destinations recognisable. */
  color: var(--link); /* Highlights ordinary destinations with high-contrast brand-family teal. */
  text-decoration: none; /* Removes all default link underlines as requested. */
  font-weight: 600; /* Makes links visibly bolder than surrounding body text. */
} /* Ends the default link styling. */
a:hover { /* Reinforces that a labelled destination is interactive. */
  color: var(--navy-dark); /* Gives ordinary links a clear high-contrast hover colour. */
  text-decoration: none; /* Keeps hover states free of underlines. */
} /* Ends ordinary link hover styling. */
:focus-visible { /* Keeps keyboard position obvious on light surfaces. */
  outline: 3px solid var(--navy); /* Provides a strong, contrasting focus ring. */
  outline-offset: 5px; /* Separates the ring from the control's filled boundary. */
} /* Ends default keyboard-focus styling. */
main:focus { /* Allows the skip link to focus the main content without a decorative frame. */
  outline: none; /* The skip destination is a content region rather than an interactive control. */
} /* Ends main-region focus styling. */
img { /* Keeps all local images within their available width. */
  max-width: 100%; /* Prevents image-driven horizontal overflow. */
  height: auto; /* Preserves the actual image proportions. */
} /* Ends shared image sizing. */
h1, h2, h3, h4, h5, h6, p, figure, dl { /* Resets margins before applying a consistent spacing scale. */
  margin: 0; /* Prevents browser defaults from disrupting the layout. */
} /* Ends the content margin reset. */
h1, h2, h3, h4, h5, h6 { /* Establishes the same rounded bold family for every heading level. */
  font-family: var(--heading-font); /* Uses the self-hosted Varela Round heading face. */
  font-weight: 700; /* Requests the owner's bold treatment from the regular-only Varela Round font. */
  font-synthesis: weight; /* Explicitly permits synthetic bold without inventing a supplied bold font weight. */
  line-height: 1.22; /* Gives headings a compact but readable rhythm. */
  letter-spacing: normal; /* Preserves natural Varela Round spacing and clear word boundaries. */
  text-wrap: pretty; /* Avoids awkward short final heading lines when supported. */
} /* Ends shared heading typography. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } /* Preserves bold heading weight when a service heading is also a link. */
h1 { /* Sizes the main heading for desktop visitors. */
  font-size: clamp(36px, 4vw, 52px); /* Keeps the primary service promise prominent without oversizing it. */
  letter-spacing: normal; /* Keeps the rounded headline open and naturally spaced. */
} /* Ends the main heading scale. */
h2 { /* Sizes section headings as the second information level. */
  font-size: clamp(28px, 3vw, 35px); /* Maintains clear contrast with body text. */
  letter-spacing: normal; /* Preserves the requested rounded typeface's natural spacing. */
} /* Ends section heading scale. */
h3 { /* Names concrete service groups and offer details. */
  font-size: 21px; /* Keeps subheadings distinct from ordinary text. */
  letter-spacing: normal; /* Keeps service labels readable with natural word shapes. */
} /* Ends service-subheading scale. */
p + p { /* Separates connected paragraphs without extra containers. */
  margin-top: 18px; /* Gives each paragraph a visible natural break. */
} /* Ends adjacent paragraph spacing. */
.container { /* Defines the shared left and right alignment. */
  width: min(calc(100% - 64px), var(--content-width)); /* Gives desktop pages open gutters and a bounded measure. */
  margin-inline: auto; /* Centres the content grid without centring its text. */
} /* Ends the shared page container. */
.lead { /* Gives introductory explanations a little more emphasis. */
  font-size: 20px; /* Keeps the introduction readable without becoming another heading. */
  line-height: 1.65; /* Retains comfortable sentence spacing. */
} /* Ends introductory paragraph styling. */
.small-copy, .price-conditions { /* Keeps secondary explanations legible. */
  font-size: 16px; /* Uses a readable size for conditions and revision dates. */
  line-height: 1.65; /* Avoids cramped small text. */
} /* Ends secondary text styling. */
.skip-link { /* Keeps skip navigation available without occupying the normal header. */
  position: absolute; /* Places the link above the document until focused. */
  top: -100px; /* Moves the inactive link off the visible canvas. */
  left: 24px; /* Aligns the focused link with the mobile gutter. */
  z-index: 20; /* Keeps the focused link above the navigation. */
  padding: 12px 18px; /* Gives the keyboard control a generous target. */
  background: var(--navy); /* Uses a strong brand-colour surface. */
  color: var(--white); /* Ensures the label has sufficient contrast. */
} /* Ends the default skip-link presentation. */
.skip-link:focus { /* Reveals skip navigation when requested by keyboard. */
  top: 16px; /* Makes the link clearly visible inside the viewport. */
} /* Ends the focused skip-link state. */
.skip-link:hover, .skip-link:focus { /* Protects the revealed keyboard link from the general teal-link hover rule. */
  color: var(--white); /* Keeps the skip label readable against its navy surface in both states. */
} /* Ends skip-link state contrast protection. */
.site-header { /* Separates navigation through space rather than a hairline box. */
  padding: 26px 0; /* Gives the supplied logo enough breathing room. */
} /* Ends the header region. */
.header-inner { /* Aligns the desktop header items. */
  display: flex; /* Places brand, destinations and telephone in a shared row. */
  align-items: center; /* Keeps labels aligned with the logo's visual centre. */
  gap: 24px; /* Leaves room for the separate outings route without enclosing menu items. */
} /* Ends the desktop header layout. */
.brand { /* Keeps the original wordmark as the main brand signature. */
  display: block; /* Removes inline image baseline spacing. */
  width: 245px; /* Shows the supplied logo without excessive enlargement. */
  flex: 0 0 245px; /* Reserves the correct desktop logo width. */
} /* Ends the header brand sizing. */
.brand img { /* Displays the full supplied logo on the white header. */
  display: block; /* Prevents an unwanted inline baseline gap. */
  width: 100%; /* Fits the logo to its reserved space. */
} /* Ends the logo image sizing. */
.desktop-nav { /* Keeps ordinary page navigation compact. */
  display: flex; /* Arranges the main links in a conventional row. */
  align-items: center; /* Aligns navigation labels consistently. */
  gap: 16px; /* Fits practical, social and outing destinations with clear separation. */
  margin-left: auto; /* Pushes the navigation towards the right of the header. */
} /* Ends desktop navigation layout. */
.desktop-nav a, .header-phone { /* Keeps header labels readable and simple. */
  font-size: 14px; /* Fits the complete useful navigation into a compact header. */
  font-weight: 600; /* Gives navigation enough weight against the open background. */
  text-decoration: none; /* Uses standard navigation placement rather than inline-link underlines. */
  white-space: nowrap; /* Avoids breaking a destination label across lines. */
  padding: 10px 0; /* Adds a comfortable vertical hit area. */
} /* Ends shared header-link appearance. */
.desktop-nav a:hover, .desktop-nav a[aria-current], .header-phone:hover { /* Marks hover and the current destination clearly. */
  color: var(--navy-dark); /* Reinforces active navigation without underlines. */
} /* Ends active navigation cues. */
.header-phone { /* Keeps the actual contact number distinct from the menu. */
  font-size: 16px; /* Makes the number readable across the full header. */
  display: inline-flex; /* Keeps the phone icon and full number together. */
  align-items: center; /* Aligns the icon with the number baseline. */
  gap: 6px; /* Separates the decorative phone symbol from the real number. */
} /* Ends header-phone sizing. */
.desktop-nav a[aria-current] { /* Identifies the current destination beyond colour alone. */
  background: var(--pink); /* Highlights the current page with the requested logo pink. */
  color: var(--white); /* Keeps the active label and its inherited icon white. */
  padding-inline: 10px; /* Gives the filled current-page marker a clear edge around its label. */
  border-radius: 4px; /* Keeps the active marker modest and functional. */
} /* Ends active destination highlighting. */
.desktop-nav .link-cue { /* Keeps the complete desktop menu within its intended space. */
  width: 13px; /* Makes the secondary destination cue compact. */
  height: 13px; /* Retains crisp square vector proportions. */
  margin-left: 1px; /* Keeps the small cue close to its label. */
} /* Ends desktop menu cue sizing. */
.mobile-nav summary::-webkit-details-marker { /* Removes the duplicate browser marker beside the labelled menu icon. */
  display: none; /* Leaves one clear menu control rather than two competing symbols. */
} /* Ends the native marker override. */
.mobile-nav { /* Removes the narrow-screen menu from desktop flow. */
  display: none; /* Prevents duplicate visible navigation on wide screens. */
} /* Ends desktop handling of the mobile menu. */
.home-opening { /* Gives the homepage a clear editorial starting point. */
  padding-top: 38px; /* Separates the main message from the header. */
} /* Ends opening-region spacing. */
.opening-grid { /* Places the heading and short sales explanation in balanced columns. */
  display: grid; /* Creates a deliberate composition without card containers. */
  grid-template-columns: 1.3fr 1fr; /* Gives the core local promise the larger share of space. */
  gap: 68px; /* Keeps the two information roles visually separate. */
  align-items: center; /* Aligns the shorter introduction with the main promise. */
} /* Ends opening text layout. */
.opening-copy .lead { /* Keeps the opening explanation at a readable measure. */
  max-width: 440px; /* Avoids overly long lead lines. */
  margin-bottom: 26px; /* Separates the explanation from the call action. */
} /* Ends the opening lead measure. */
.contact-actions { /* Groups the same primary and secondary enquiry choices. */
  display: flex; /* Aligns the filled call link and secondary text link. */
  align-items: center; /* Keeps both contact labels visually balanced. */
  flex-wrap: wrap; /* Allows long labels to reflow instead of overflowing. */
  gap: 18px 24px; /* Adds comfortable space between distinct targets. */
} /* Ends the contact-action arrangement. */
.button { /* Defines the single-colour primary contact link. */
  display: inline-flex; /* Lets the filled anchor behave as a clear touch target. */
  gap: 10px; /* Separates the phone icon from its readable call label. */
  align-items: center; /* Centres the label vertically inside the filled action. */
  justify-content: center; /* Keeps the label balanced at narrower widths. */
  min-height: 52px; /* Exceeds the project minimum for an important touch target. */
  padding: 12px 20px; /* Gives the action a comfortable, moderate footprint. */
  border-radius: 7px; /* Softens the action without turning it into a pill. */
  background: var(--navy); /* Uses one solid brand-colour fill. */
  color: var(--white); /* Keeps the phone action at high text contrast. */
  font-size: 17px; /* Makes the action label easy to read. */
  font-weight: 600; /* Keeps the main action visually distinct. */
  line-height: 1.5; /* Preserves label readability when text is enlarged. */
  text-decoration: none; /* Uses the filled boundary as the action's main signifier. */
} /* Ends primary contact-link styling. */
.button:hover { /* Makes pointer interaction visible without animation. */
  background: var(--navy-dark); /* Darkens the solid fill while retaining contrast. */
  color: var(--white); /* Preserves readable labels on the darker hover fill. */
  text-decoration: none; /* Keeps filled actions free of underlines in every state. */
} /* Ends primary action hover styling. */
.text-link { /* Keeps the alternative SMS action quieter but obvious. */
  font-size: 17px; /* Maintains a readable target label. */
  padding-block: 10px; /* Gives the text action a generous vertical hit area. */
  font-weight: 600; /* Retains adequate visual presence beside the filled action. */
} /* Ends secondary contact styling. */
.icon { /* Keeps local library icons consistent and decorative. */
  display: inline-block; /* Allows icons beside ordinary inline link text. */
  width: 21px; /* Uses a modest size appropriate to text labels. */
  height: 21px; /* Preserves the original square view box. */
  flex: 0 0 auto; /* Prevents contact symbols from shrinking in a flex row. */
  vertical-align: -.2em; /* Aligns inline icons with the label baseline. */
} /* Ends the common vector-icon presentation. */
.link-cue { /* Distinguishes real links without adding underlines. */
  width: 18px; /* Keeps destination chevrons smaller than service icons. */
  height: 18px; /* Preserves clear consistent vector proportions. */
  margin-left: 3px; /* Separates a trailing cue from its readable label. */
} /* Ends link-icon sizing. */
.button .icon { /* Keeps the primary call action easy to recognise. */
  width: 21px; /* Gives its phone symbol a clear visual presence. */
  height: 21px; /* Matches the width of the original icon. */
  margin: 0; /* Uses the button gap instead of an inline chevron margin. */
} /* Ends the filled-action icon treatment. */
.service-icon { /* Marks concrete service groups within the open text layout. */
  width: 30px; /* Makes each service symbol visible without a badge background. */
  height: 30px; /* Preserves crisp square icon geometry. */
  margin-bottom: 15px; /* Separates the icon from the useful service heading. */
  color: var(--navy); /* Uses accessible brand navy rather than a pale decorative colour. */
} /* Ends open-service icon styling. */
.topic-heading { /* Groups supporting-page service names with a simple check. */
  display: flex; /* Aligns the icon with a potentially wrapped service label. */
  gap: 10px; /* Separates the check from the descriptive heading. */
  align-items: flex-start; /* Aligns multiline labels with the first line. */
} /* Ends topic-heading layout. */
.topic-icon { /* Matches the smaller supporting topic headings. */
  margin-top: 2px; /* Aligns the check with the first line of the heading. */
} /* Ends supporting-topic icon alignment. */
.detail-copy ul { /* Uses explicit check icons for genuinely parallel enquiry details. */
  list-style: none; /* Removes duplicate native bullets beside the checks. */
  padding-left: 0; /* Aligns the useful list text with surrounding paragraphs. */
} /* Ends icon-list reset. */
.detail-copy li { /* Keeps a decorative check beside each full readable list label. */
  display: flex; /* Preserves the relationship between the icon and its words. */
  align-items: flex-start; /* Keeps wrapped list text aligned to its first line. */
  gap: 10px; /* Gives the list labels enough breathing room. */
} /* Ends the enquiry-list layout. */
.list-icon { /* Aligns a list check to normal body copy. */
  margin-top: 5px; /* Balances the icon within the first line of body text. */
} /* Ends the enquiry-list icon alignment. */
.contact-band a:not(.button) { /* Keeps contact alternatives readable on navy. */
  color: var(--white); /* Maintains strong contrast in normal and hovered states. */
} /* Ends dark-panel text-link colour. */
a:link, a:visited, a:hover, a:active, a:focus { /* Applies the requested link treatment to every interaction state. */
  text-decoration: none; /* Prevents browser defaults or later state styles from adding underlines. */
} /* Ends the no-underline interaction rule. */
.opening-offer { /* Gives the genuine launch offer a clear early position. */
  margin-top: 30px; /* Separates pricing from the main service promise. */
  margin-bottom: 30px; /* Keeps the photograph from crowding the price conditions. */
  font-size: 16px; /* Keeps the price signpost subordinate to the main heading. */
} /* Ends the opening-offer presentation. */
.opening-offer strong { /* Emphasises the actual discounted rate without a badge. */
  font-weight: 600; /* Makes the amount easy to pick out when scanning. */
} /* Ends early price emphasis. */
.kitchen-photo picture { /* Preserves responsive image selection as one visible block. */
  display: block; /* Prevents inline-picture baseline spacing around the photograph. */
} /* Ends the responsive-image wrapper. */
.kitchen-photo img { /* Preserves the broad supplied photo. */
  display: block; /* Removes a baseline gap below the image. */
  width: 100%; /* Fits the photograph across the content grid. */
  border-radius: 9px; /* Adds a restrained soft edge to the image alone. */
} /* Ends hero-photo styling. */
figcaption { /* Clearly identifies the image without overpowering the service. */
  font-size: 12px; /* Uses a quiet caption size while preserving text zoom. */
  margin-top: 8px; /* Separates the provenance note from the image. */
} /* Ends figure-caption presentation. */
.section { /* Uses generous space to distinguish ordinary content sections. */
  padding-block: 76px; /* Creates the report's calm major-section rhythm. */
} /* Ends shared section spacing. */
.section-heading { /* Pairs a useful heading with a short explanation. */
  display: grid; /* Gives the section introduction a deliberate hierarchy. */
  grid-template-columns: 1fr 1fr; /* Balances the heading and supporting copy. */
  gap: 68px; /* Separates the two reading roles clearly. */
  align-items: start; /* Keeps both text blocks aligned to the same top edge. */
  margin-bottom: 42px; /* Leaves a strong break before details. */
} /* Ends the section-introduction layout. */
.service-list { /* Uses open descriptions instead of boxed feature cards. */
  display: grid; /* Aligns six descriptions in a straightforward reading order. */
  grid-template-columns: 1fr 1fr; /* Uses two columns on larger screens. */
  gap: 32px 68px; /* Separates tasks through proximity and whitespace. */
} /* Ends the open service list. */
.service-item { /* Gives each task a clear text measure. */
  max-width: 490px; /* Avoids long service-description lines. */
} /* Ends individual service measure. */
.service-item h3 { /* Separates concrete service names from their explanations. */
  margin-bottom: 9px; /* Keeps names visibly grouped with the relevant paragraph. */
} /* Ends task-heading spacing. */
.service-item h3 a { /* Keeps service navigation recognisable without looking like a button. */
  text-decoration: none; /* Uses the bold label and chevron instead of an underline. */
} /* Ends service-link presentation. */
.owner-section { /* Creates a distinct personal-introduction break using white space. */
  padding-top: 16px; /* Avoids doubling the previous section's bottom space. */
  padding-bottom: 82px; /* Gives the personal promise room before the price band. */
} /* Ends owner-section spacing. */
.owner-grid, .family-grid, .coverage-grid, .detail-section { /* Shares a readable editorial alignment across different content roles. */
  display: grid; /* Aligns section headings with their detailed copy. */
  grid-template-columns: .9fr 1.1fr; /* Gives detailed answers slightly more space. */
  gap: 84px; /* Keeps the heading distinct without an enclosing panel. */
  align-items: start; /* Keeps sections calm and predictable. */
} /* Ends the shared editorial content grid. */
.owner-copy .lead { /* Highlights the solo-provider promise. */
  margin-bottom: 18px; /* Separates that promise from supporting facts. */
  font-weight: 600; /* Makes the reassurance easy to find. */
} /* Ends continuity-promise emphasis. */
.owner-copy > a, .family-grid a { /* Separates relevant internal links from adjacent paragraphs. */
  display: inline-block; /* Allows deliberate spacing without a decorative wrapper. */
  margin-top: 20px; /* Gives the next page link its own readable position. */
} /* Ends personal-section link spacing. */
.price-band { /* Gives transparent pricing the one broad warm panel. */
  background: var(--cream); /* Uses a solid brand cream rather than a gradient. */
  padding-block: 64px; /* Adds enough space for prices and offer conditions. */
} /* Ends the flat price-section surface. */
.price-layout { /* Separates standard rates from the finite launch offer. */
  display: grid; /* Uses proportion and alignment rather than cards. */
  grid-template-columns: 1fr 1fr; /* Gives prices and eligibility equal reading weight. */
  gap: 68px; /* Keeps the two sets of information visually clear. */
  margin-bottom: 30px; /* Groups the shared conditions underneath. */
} /* Ends the price-and-offer layout. */
.standard-prices { /* Keeps each rate next to its visit length. */
  display: flex; /* Places the two standard options side by side. */
  gap: 44px; /* Gives each duration enough space without a card border. */
} /* Ends standard-rate alignment. */
.standard-prices dt { /* Labels each visit option before the amount. */
  font-size: 17px; /* Keeps the duration easy to compare. */
  font-weight: 600; /* Makes labels distinct from conditions. */
} /* Ends visit-duration labels. */
.standard-prices dd { /* Displays the actual visit amount. */
  margin: 6px 0 0; /* Removes default definition-list indent. */
  font-family: var(--heading-font); /* Relates prices to the heading hierarchy. */
  font-weight: 600; /* Keeps prices prominent and readable. */
  font-size: 52px; /* Gives the buying decision appropriate emphasis. */
  line-height: 1.25; /* Avoids excessive space around large figures. */
} /* Ends price-amount typography. */
.standard-prices dd span { /* Makes the unit explicit beside every standard amount. */
  display: block; /* Prevents the unit competing with the price figure. */
  font: 15px/1.6 var(--body-font); /* Keeps the price unit readable but subordinate. */
} /* Ends price-unit styling. */
.offer-copy h3 { /* Keeps the ongoing rate and offer duration connected. */
  margin-bottom: 12px; /* Separates the offer heading from its eligibility. */
} /* Ends offer-heading spacing. */
.price-conditions { /* Keeps travel and outing information next to the price. */
  max-width: 850px; /* Gives the conditions a readable line length. */
  margin-bottom: 22px; /* Separates terms from the repeated contact choice. */
} /* Ends price-condition measure. */
.price-band .contact-actions { /* Gives the enquiry route a clear final position after the rates. */
  margin-top: 25px; /* Adds deliberate space after the supporting link or conditions. */
} /* Ends pricing contact spacing. */
.family-grid .lead { /* Gives the client's agency appropriate emphasis. */
  margin-bottom: 18px; /* Separates the family reassurance from practical details. */
} /* Ends family-introduction spacing. */
.coverage-grid { /* Avoids excessive white space between two adjacent white sections. */
  padding-top: 18px; /* Retains a useful break without an unnecessary separator. */
} /* Ends local-coverage spacing. */
.coverage-grid h2 { /* Groups coverage with its explanation. */
  margin-bottom: 20px; /* Separates the heading from the location details. */
} /* Ends local-heading spacing. */
.questions details { /* Uses minimal boundaries only for interactive disclosure rows. */
  border-bottom: 2px solid var(--cream); /* Separates real controls rather than enclosing all content. */
  padding: 14px 0; /* Gives each disclosure a comfortable hit area. */
} /* Ends disclosure row styling. */
.questions summary { /* Makes each useful question recognisably interactive. */
  cursor: pointer; /* Reinforces that a question opens an answer. */
  font-weight: 600; /* Distinguishes the question from its expanded answer. */
  padding: 6px 0; /* Improves the question's vertical touch target. */
} /* Ends question-toggle styling. */
.questions p { /* Separates expanded answers from their summary controls. */
  margin-top: 14px; /* Adds a clear break inside an open disclosure. */
  font-size: 17px; /* Keeps answers comfortable to read. */
} /* Ends disclosure-answer styling. */
.contact-band { /* Provides one decisive closing brand panel. */
  background: var(--navy); /* Uses a single solid navy fill with no visual effects. */
  color: var(--white); /* Gives the final invitation high contrast. */
  padding-block: 62px; /* Makes the next step visible without a huge footer. */
} /* Ends the closing-panel surface. */
.contact-band-inner { /* Aligns the invitation with the contact choices. */
  display: grid; /* Creates a purposeful broad closing composition. */
  grid-template-columns: 1.15fr 1fr; /* Leaves more room for the complete invitation heading. */
  gap: 80px; /* Separates the invitation from the action labels. */
  align-items: center; /* Balances unequal content heights. */
} /* Ends the closing-panel grid. */
.contact-band h2 { /* Keeps the final invitation concise and readable. */
  margin-bottom: 18px; /* Separates the heading and supporting instruction. */
  max-width: 570px; /* Prevents an overly wide contact headline. */
} /* Ends closing-heading spacing. */
.button-inverse { /* Preserves the primary action on a dark background. */
  background: var(--white); /* Uses one contrasting white fill. */
  color: var(--navy); /* Keeps the phone label readable. */
} /* Ends the inverse action appearance. */
.button-inverse:hover { /* Makes inverse actions visibly responsive. */
  background: var(--cream); /* Uses another solid accessible brand surface. */
  color: var(--navy); /* Preserves contrast on the hover background. */
} /* Ends inverse hover styling. */
.contact-band :focus-visible { /* Keeps focus visible on the dark contact panel. */
  outline-color: var(--peach); /* Gives the ring strong contrast against navy. */
} /* Ends dark-surface keyboard focus. */
.email-line { /* Keeps the email alternative readable under call and text. */
  margin-top: 22px; /* Separates a third contact method without another button. */
  overflow-wrap: anywhere; /* Prevents a long email address causing mobile overflow. */
  font-size: 16px; /* Keeps the complete address at a comfortable size. */
} /* Ends contact-email styling. */
.site-footer { /* Returns the website to a quiet white ending. */
  background: var(--white); /* Keeps the final navy panel visually distinct. */
  padding: 45px 0 24px; /* Gives contact and utility links enough breathing room. */
  font-size: 14px; /* Keeps footer text secondary while still readable. */
} /* Ends the footer region. */
.footer-grid { /* Arranges the business, useful links and direct contact. */
  display: grid; /* Uses simple functional columns. */
  grid-template-columns: 1.2fr .8fr 1fr; /* Gives identity and email adequate room. */
  gap: 50px; /* Groups related footer information using whitespace. */
} /* Ends footer-column alignment. */
.footer-name { /* Keeps the trading name easy to identify at the end. */
  display: inline-block; /* Lets the name keep its own margin. */
  font-family: var(--heading-font); /* Connects footer identity to the site headings. */
  font-size: 19px; /* Gives the name a little extra hierarchy. */
  text-decoration: none; /* Uses placement and type to identify the home link. */
  margin-bottom: 10px; /* Separates the name from service-area text. */
} /* Ends footer-name styling. */
.footer-grid nav, .footer-contact { /* Keeps utility destinations in readable vertical lists. */
  display: flex; /* Allows each useful link its own line. */
  flex-direction: column; /* Keeps related destinations together. */
  align-items: flex-start; /* Preserves a shared left edge. */
  gap: 10px; /* Separates the small footer hit areas. */
} /* Ends footer link layout. */
.footer-contact a { /* Keeps long contact labels within the available column. */
  overflow-wrap: anywhere; /* Allows email text to wrap safely. */
} /* Ends footer contact wrapping. */
.legal-links { /* Groups the two privacy utility links. */
  display: flex; /* Places related notice links together. */
  gap: 20px; /* Prevents the targets from crowding each other. */
  margin-top: 8px; /* Separates utility notices from direct contact. */
} /* Ends legal-link grouping. */
.footer-bottom { /* Finishes the footer through space rather than a decorative rule. */
  display: flex; /* Aligns copyright with the short brand promise. */
  justify-content: space-between; /* Gives each short line its own edge. */
  flex-wrap: wrap; /* Keeps the bottom row usable on small screens. */
  gap: 12px; /* Separates wrapped lines. */
  margin-top: 38px; /* Provides a quiet final break. */
} /* Ends footer-bottom layout. */
.page-opening { /* Gives supporting pages a useful opening without a large hero image. */
  padding-block: 30px 64px; /* Separates breadcrumbs, title and the first information section. */
} /* Ends supporting-page introduction spacing. */
.breadcrumb { /* Keeps the simple home route distinct from the page title. */
  font-size: 14px; /* Uses a secondary but readable navigation label. */
  margin-bottom: 26px; /* Gives the page title a clear start. */
} /* Ends breadcrumb styling. */
.page-opening h1 { /* Keeps interest-led service headings at a useful measure. */
  max-width: 920px; /* Prevents an oversized single-line headline. */
  margin-bottom: 24px; /* Separates the main promise from its practical explanation. */
} /* Ends supporting-page heading spacing. */
.page-opening .lead { /* Gives unique page introductions a readable line length. */
  max-width: 800px; /* Keeps the lead below a very wide desktop measure. */
  margin-bottom: 28px; /* Separates the lead from the opening enquiry action. */
} /* Ends supporting-page lead spacing. */
.detail-section { /* Uses spacing to separate detailed topics rather than repetitive cards. */
  padding-block: 44px 56px; /* Keeps multiple useful sections compact but distinct. */
} /* Ends detailed section spacing. */
.service-navigation { /* Connects related practical-service pages without adding boxed cards. */
  margin-bottom: 22px; /* Separates service navigation from the next explanatory section. */
} /* Ends the service-navigation spacing. */
.service-navigation ul { /* Presents real service destinations as a compact readable group. */
  display: flex; /* Uses a simple row when there is enough room. */
  flex-wrap: wrap; /* Allows natural wrapping on phones and with larger text. */
  list-style: none; /* Avoids redundant bullets beside the link chevrons. */
  gap: 14px 28px; /* Separates each destination without a panel border. */
  padding: 0; /* Aligns the service group with the page heading. */
  margin: 0; /* Removes browser default list spacing. */
} /* Ends service-link arrangement. */
.service-navigation a { /* Makes grouped links comfortably clickable. */
  display: inline-block; /* Allows consistent padding around a readable text destination. */
  padding: 8px 0; /* Increases the vertical touch target without a button shape. */
} /* Ends grouped-service link targets. */
.service-navigation a[aria-current] { /* Highlights the selected page without relying only on a colour change. */
  background: var(--pink); /* Uses the exact logo pink for the current service page. */
  color: var(--white); /* Makes the active service label and decorative arrow white. */
  padding-inline: 10px; /* Makes the current service's highlight distinct from adjacent links. */
  border-radius: 4px; /* Keeps the functional highlight subtle and rectangular. */
} /* Ends the active service-page marker. */
.mobile-nav nav a[aria-current] { /* Applies the same current-page treatment within the narrow-screen menu. */
  background: var(--pink); /* Keeps the requested active colour consistent between both menu layouts. */
  color: var(--white); /* Keeps the current mobile-menu label and arrow white. */
  padding-inline: 10px; /* Separates the filled marker's label from its left and right edges. */
  border-radius: 4px; /* Matches the existing active service-link shape. */
} /* Ends the active mobile-page marker. */
.detail-copy h3 { /* Identifies practical task groups within the topic. */
  margin-top: 26px; /* Creates a natural break before each subtopic. */
  margin-bottom: 8px; /* Groups the heading with its explanation. */
} /* Ends detailed service-subheading spacing. */
.detail-copy ul { /* Lists useful initial enquiry details clearly. */
  padding-left: 0; /* Aligns check-marked enquiry details with surrounding copy. */
} /* Ends explanatory list indentation. */
.detail-copy li + li { /* Separates parallel enquiry details. */
  margin-top: 8px; /* Adds a little space between useful list items. */
} /* Ends list-item spacing. */
.contact-options { /* Makes all real contact methods immediately available. */
  display: grid; /* Aligns telephone and email without enclosing boxes. */
  grid-template-columns: 1fr 1fr; /* Gives both usable routes adequate room. */
  gap: 68px; /* Separates the contact methods clearly. */
  margin-bottom: 46px; /* Leaves a break before initial-enquiry guidance. */
} /* Ends direct-contact layout. */
.contact-options h2 { /* Names each contact method before its destination. */
  font-size: 26px; /* Keeps method headings below the page title. */
  margin-bottom: 20px; /* Separates labels from the contact links. */
} /* Ends contact-method headings. */
.contact-options a { /* Keeps complete contact labels safe on small screens. */
  overflow-wrap: anywhere; /* Allows long email text to fit. */
} /* Ends contact destination wrapping. */
.legal-page { /* Keeps policy content in a readable document format. */
  max-width: 850px; /* Avoids stretching long notice paragraphs across the full screen. */
  padding-block: 30px 80px; /* Gives the notice clear opening and closing space. */
} /* Ends legal document layout. */
.legal-page h1 { /* Separates the notice title from its date. */
  margin-bottom: 18px; /* Keeps the date connected to the correct notice. */
} /* Ends legal-title spacing. */
.legal-page h2 { /* Distinguishes each notice topic. */
  font-size: 26px; /* Keeps the policy hierarchy clear but restrained. */
  margin-top: 34px; /* Adds space before a new subject. */
  margin-bottom: 14px; /* Groups topic headings with their paragraphs. */
} /* Ends notice-topic styling. */
.error-page { /* Keeps the missing-page recovery useful and uncluttered. */
  padding-block: 60px 110px; /* Gives recovery links a clear standalone position. */
} /* Ends error-page layout. */
.error-page h1, .error-page p { /* Separates the recovery instructions and actions. */
  margin-bottom: 24px; /* Gives each recovery step a readable break. */
} /* Ends error-content spacing. */
.enquiry-section { /* Gives the contact form a deliberate open section rather than another boxed panel. */
  display: grid; /* Aligns the introduction with the useful enquiry fields. */
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); /* Reserves more space for the actual form. */
  align-items: start; /* Keeps the heading aligned with the first field. */
  gap: 68px; /* Separates the explanation and form through whitespace. */
  padding-block: 18px 76px; /* Creates a clear break after the direct contact choices. */
  scroll-margin-top: 28px; /* Leaves comfortable space when following an enquiry anchor. */
} /* Ends the open enquiry-section layout. */
.enquiry-intro h2 { /* Gives the form its own useful heading outside the embedded service. */
  margin-bottom: 20px; /* Groups the heading with its short explanation. */
} /* Ends the enquiry-heading spacing. */
.enquiry-intro p { /* Keeps the contact guidance readable beside the fields. */
  max-width: 410px; /* Prevents long lines in the introductory column. */
} /* Ends the enquiry-introduction measure. */
.enquiry-form-shell, #enquiry-form { /* Contains the seamlessly embedded form in its allocated column. */
  min-width: 0; /* Lets long vendor content shrink within the responsive grid. */
  width: 100%; /* Uses the available space without a fixed desktop form width. */
  max-width: 100%; /* Prevents the embedded form from widening the page. */
} /* Ends the form-shell containment. */
.form-status, .form-fallback { /* Keeps loading and alternate contact information useful and understated. */
  font-size: 16px; /* Preserves legibility without competing with the form heading. */
  line-height: 1.65; /* Gives status sentences comfortable reading space. */
  overflow-wrap: anywhere; /* Protects mobile layouts when a full email address appears. */
} /* Ends the form-status text styling. */
.form-status { /* Separates the temporary loading message from the embedded fields. */
  margin-bottom: 18px; /* Leaves a modest gap above the form. */
} /* Ends the loading-message spacing. */
.form-fallback { /* Leaves the telephone and email alternative available under the enquiry area. */
  margin-top: 22px; /* Separates the fallback from the form controls. */
} /* Ends the fallback-contact spacing. */
.form-status[hidden], .form-fallback[hidden] { display: none; } /* Removes finished or unused form messages from both layout and reading order. */
#enquiry-form .cog-cognito, #enquiry-form .cog-form, #enquiry-form form { /* Applies the local visual identity directly because Chameleon ignores vendor theme variables. */
  width: 100%; /* Fits the seamlessly rendered form to the contact column. */
  max-width: 100%; /* Prevents a vendor theme width from overflowing the page. */
  margin: 0; /* Aligns the first field with the website's shared grid. */
  padding: 0; /* Keeps the form open without an extra panel inset. */
  background: transparent; /* Retains the white page as the form surface. */
  color: var(--navy); /* Gives form copy the readable brand text colour. */
  font-family: var(--body-font); /* Uses the locally served Open Sans face for form text. */
  font-size: 18px; /* Makes the main form copy consistent with the page. */
  line-height: 1.65; /* Keeps instructions and confirmations comfortably spaced. */
} /* Ends the scoped Chameleon form base. */
#enquiry-form .cog-body, #enquiry-form .cog-field, #enquiry-form .cog-section, #enquiry-form .cog-choice-option { font-family: var(--body-font); color: var(--navy); } /* Overrides a saved vendor theme's nested font rules as well as supporting Chameleon inheritance. */
#enquiry-form .cog-section__heading, #enquiry-form h1, #enquiry-form h2, #enquiry-form h3, #enquiry-form h4, #enquiry-form h5, #enquiry-form h6 { /* Keeps any internal form section labels consistent with the requested heading face. */
  font-family: var(--heading-font); /* Uses local Varela Round rather than a vendor font. */
  font-weight: 700; /* Matches the bold heading treatment throughout the site. */
  font-synthesis: weight; /* Explicitly permits bold rendering from the official regular-only font. */
  color: var(--navy); /* Maintains contrast against the white form surface. */
  line-height: 1.3; /* Gives short form headings readable wrapped lines. */
  letter-spacing: normal; /* Keeps word boundaries naturally spaced. */
} /* Ends internal form-heading styling. */
#enquiry-form .cog-label, #enquiry-form label, #enquiry-form legend { /* Styles actual Cognito labels and any native Chameleon field labels. */
  color: var(--navy); /* Keeps each field's purpose readable at high contrast. */
  font-family: var(--body-font); /* Retains the readable body face for operational labels. */
  font-size: 17px; /* Keeps field labels clear without becoming section headings. */
  font-weight: 600; /* Differentiates the label from the visitor's entered text. */
  line-height: 1.5; /* Gives multiline labels room to wrap. */
} /* Ends field-label typography. */
#enquiry-form .cog-content, #enquiry-form .cog-helptext, #enquiry-form .cog-confirmation__message { /* Preserves readable instructions and confirmation content. */
  color: var(--navy); /* Uses the same accessible text colour as the surrounding page. */
  font-family: var(--body-font); /* Uses the local readable body typeface. */
  line-height: 1.65; /* Avoids cramped guidance and submission messages. */
  overflow-wrap: anywhere; /* Allows long text or email addresses to fit a narrow screen. */
} /* Ends embedded guidance styling. */
#enquiry-form .cog-helptext { font-size: 15px; } /* Keeps optional field guidance subordinate while comfortably readable. */
#enquiry-form .cog-field { min-width: 0; margin-bottom: 22px; } /* Gives each field a natural break without enclosing it in a decorative panel. */
#enquiry-form .cog-content ul, #enquiry-form .cog-content ol { margin-block: 12px; padding-left: 24px; } /* Restores conventional readable indentation for any embedded explanatory lists. */
#enquiry-form .cog-content li + li { margin-top: 6px; } /* Separates genuinely parallel form instructions. */
#enquiry-form :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='submit']):not([type='button']), select, textarea), #enquiry-form .el-input__inner, #enquiry-form .el-textarea__inner { /* Targets editable native and documented Cognito text controls without affecting hidden or choice inputs. */
  width: 100%; /* Makes the field use its allocated Cognito column. */
  max-width: 100%; /* Prevents an input from expanding the page width. */
  min-height: 52px; /* Gives touch users a generous input target. */
  border: 2px solid #7983a7; /* Gives operational fields a visible boundary against white. */
  border-radius: 5px; /* Softens useful control edges without introducing pill shapes. */
  padding: 11px 13px; /* Gives entered text breathing room inside the visible field. */
  background-color: var(--white); /* Keeps entered values on a simple clean surface. */
  color: var(--navy-dark); /* Gives typed values strong contrast. */
  font-family: var(--body-font); /* Prevents default browser or vendor control fonts. */
  font-size: 18px; /* Keeps typed values readable and avoids small-input mobile zoom. */
  font-weight: 400; /* Distinguishes the entered value from its semibold label. */
  line-height: 1.5; /* Provides room for accented characters and wrapped textarea content. */
  box-shadow: none; /* Removes vendor inset effects from the otherwise flat form. */
} /* Ends text-field and select styling. */
#enquiry-form textarea, #enquiry-form .el-textarea__inner { min-height: 150px; resize: vertical; } /* Leaves enough space for a useful enquiry and preserves visitor resizing. */
#enquiry-form input::placeholder, #enquiry-form textarea::placeholder { color: #606b8e; opacity: 1; } /* Keeps placeholder guidance readable while labels remain the field identifier. */
#enquiry-form input:focus, #enquiry-form select:focus, #enquiry-form textarea:focus, #enquiry-form .el-input__inner:focus, #enquiry-form .el-textarea__inner:focus { /* Makes the active editable field visible for mouse and keyboard users. */
  border-color: var(--navy); /* Reinforces the active boundary in the core brand colour. */
  outline: 3px solid var(--navy); /* Gives the current control a strong contrasting focus ring. */
  outline-offset: 3px; /* Separates the focus ring from the operational field border. */
} /* Ends focused field styling. */
#enquiry-form input[type='checkbox'], #enquiry-form input[type='radio'] { accent-color: var(--navy); } /* Uses the brand colour for native choice controls without changing their interaction. */
#enquiry-form .el-checkbox__inner, #enquiry-form .el-radio__inner { border: 2px solid #7983a7; } /* Keeps documented vendor choice boundaries visible against white. */
#enquiry-form .el-checkbox__input.is-checked .el-checkbox__inner, #enquiry-form .el-radio__input.is-checked .el-radio__inner { background-color: var(--navy); border-color: var(--navy); } /* Uses solid navy for the vendor's selected choice state. */
#enquiry-form .cog-button, #enquiry-form button[type='submit'] { /* Gives form actions the same useful target size as the website's main actions. */
  min-height: 52px; /* Makes the submission target comfortable on touchscreens. */
  max-width: 100%; /* Prevents a long action label from overflowing a phone. */
  padding: 12px 22px; /* Gives action labels a balanced, practical hit area. */
  border: 2px solid var(--navy); /* Provides an explicit boundary for the real form control. */
  border-radius: 7px; /* Matches the website's restrained button shape. */
  background: var(--white); /* Gives supporting vendor actions a simple white surface. */
  color: var(--navy); /* Keeps supporting action labels at strong contrast. */
  font-family: var(--body-font); /* Uses the locally served text face. */
  font-size: 17px; /* Matches the readable website action labels. */
  font-weight: 600; /* Keeps real actions distinct from explanatory text. */
  line-height: 1.5; /* Allows action labels to wrap when text is enlarged. */
  white-space: normal; /* Keeps long vendor labels within mobile widths. */
  cursor: pointer; /* Identifies the element as an actionable control. */
  box-shadow: none; /* Keeps operational buttons free from vendor gloss or shadows. */
} /* Ends the common embedded action treatment. */
#enquiry-form .cog-button--primary, #enquiry-form button[type='submit'] { background: var(--navy); color: var(--white); } /* Makes submission the single solid navy primary action. */
#enquiry-form .cog-button:hover { border-color: var(--navy-dark); color: var(--navy-dark); } /* Gives supporting actions a visible high-contrast hover cue. */
#enquiry-form .cog-button--primary:hover, #enquiry-form button[type='submit']:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: var(--white); } /* Keeps primary action labels readable on the darker hover fill. */
#enquiry-form .cog-button:focus-visible, #enquiry-form button:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; } /* Preserves an obvious keyboard position around embedded actions. */
#enquiry-form .cog-button:disabled, #enquiry-form button:disabled { cursor: wait; opacity: .7; } /* Communicates an in-progress or unavailable action without hiding its label. */
#enquiry-form .cog-page__navigation { justify-content: flex-start; flex-wrap: wrap; gap: 14px; padding-top: 12px; } /* Keeps submit and supporting controls aligned to the form's readable left edge. */
#enquiry-form .cog-error-message { color: #8b2639; background: #fff3f5; padding: 10px 12px; font-size: 16px; line-height: 1.5; } /* Makes validation messages visible through text and a restrained contrasting surface. */
#enquiry-form .cog-field.is-error .el-input__inner, #enquiry-form .cog-field.is-error .el-textarea__inner { border-color: #8b2639; } /* Connects a validation message to its corresponding field. */
#enquiry-form a, #enquiry-form a:link, #enquiry-form a:visited, #enquiry-form a:hover, #enquiry-form a:focus, #enquiry-form a:active { color: var(--link); font-weight: 600; text-decoration: none; } /* Preserves the owner's no-underline rule inside the third-party form. */
.cookie-banner { /* Provides a clear consent choice without a modal or a floating decorative card. */
  position: fixed; /* Keeps the initial choice available while allowing the page to remain usable. */
  inset: auto 0 0; /* Anchors one full-width notice to the bottom of the viewport. */
  z-index: 100; /* Keeps the consent controls above ordinary page content and navigation. */
  max-height: 70vh; /* Keeps an enlarged notice within the available phone screen. */
  max-height: 70dvh; /* Accounts for changing browser chrome where dynamic viewport units are supported. */
  overflow-y: auto; /* Preserves access to every consent control with enlarged text. */
  padding: 22px 0 max(22px, env(safe-area-inset-bottom)); /* Keeps controls away from device edges and home indicators. */
  background: var(--cream); /* Uses the existing solid cream brand surface. */
  color: var(--navy); /* Keeps consent text at readable contrast. */
  box-shadow: 0 -4px 18px rgb(48 61 112 / 12%); /* Separates the functional overlay from the page beneath it. */
} /* Ends the consent-notice region. */
#cookie-banner[hidden] { display: none !important; } /* Ensures a saved consent choice removes the banner even when layout rules set display. */
.cookie-banner-inner { display: flex; align-items: center; gap: 28px 44px; } /* Arranges the short explanation beside equally available choices on larger screens. */
.cookie-banner h2 { font-size: 23px; margin-bottom: 8px; } /* Gives the consent notice a modest rounded heading below the page hierarchy. */
.cookie-banner p { font-size: 15px; line-height: 1.6; max-width: 660px; } /* Keeps the explanation compact and legible without a long wall of legal text. */
.cookie-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; align-items: center; } /* Gives acceptance and rejection the same clear placement and prominence. */
.cookie-choice { min-height: 48px; padding: 10px 16px; border: 2px solid var(--navy); border-radius: 7px; background: var(--navy); color: var(--white); font: 600 16px/1.5 var(--body-font); cursor: pointer; } /* Makes both analytics choices equally visible solid brand-colour controls. */
.cookie-choice:hover { background: var(--navy-dark); border-color: var(--navy-dark); } /* Reinforces pointer interaction while retaining readable labels. */
.cookie-settings { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--link); font: 600 14px/1.5 var(--body-font); text-decoration: none; cursor: pointer; } /* Offers a permanent plain-text route to change the analytics choice. */
.cookie-settings:hover { color: var(--navy-dark); text-decoration: none; } /* Keeps the utility control visibly interactive without underlining it. */
@media (max-width: 1200px) { /* Switches the compact header before the expanded service navigation starts to crowd. */
  .desktop-nav, .header-phone { display: none; } /* Hides the desktop-only destinations at narrower widths. */
  .header-inner { justify-content: space-between; } /* Places the logo and native menu at opposite edges. */
  .mobile-nav { display: block; position: relative; } /* Enables the no-script disclosure menu. */
  .mobile-nav summary { cursor: pointer; font-weight: 600; padding: 12px 8px; display: flex; align-items: center; gap: 8px; list-style: none; } /* Gives the visible Menu label an accessible target. */
  .mobile-nav nav { position: absolute; z-index: 10; right: 0; top: 58px; width: 250px; padding: 18px 24px; background: var(--cream); display: flex; flex-direction: column; gap: 2px; } /* Opens a solid purposeful navigation panel when requested. */
  .mobile-nav nav a { padding: 10px 0; font-size: 16px; } /* Keeps every disclosed destination comfortably usable. */
  .opening-grid { gap: 40px; grid-template-columns: 1.2fr 1fr; } /* Keeps the editorial opening balanced at tablet widths. */
  .contact-band-inner { gap: 45px; } /* Gives closing actions more room before the mobile stack. */
  .cookie-banner-inner { flex-wrap: wrap; gap: 18px; } /* Lets the consent choices move below the explanation before they become crowded. */
} /* Ends compact-header and tablet changes. */
@media (max-width: 760px) { /* Adapts the whole site to phone-sized screens. */
  body { font-size: 18px; } /* Keeps useful body text readable on phones. */
  .container { width: calc(100% - 40px); } /* Gives narrow screens consistent 20px side gutters. */
  .site-header { padding: 20px 0; } /* Keeps the mobile header compact enough for the opening message. */
  .brand { width: 195px; flex-basis: 195px; } /* Preserves the full logo without crowding the Menu control. */
  .header-inner { gap: 16px; } /* Separates the logo and menu at narrow widths. */
  .home-opening { padding-top: 28px; } /* Retains a clear break below the compact header. */
  h1 { font-size: 35px; line-height: 1.24; letter-spacing: normal; } /* Keeps phone headings prominent with the rounded face's natural spacing. */
  h2 { font-size: 29px; } /* Keeps section hierarchy clear on a phone. */
  h3 { font-size: 20px; } /* Keeps task names above body text without taking over. */
  .opening-grid, .section-heading, .service-list, .owner-grid, .family-grid, .coverage-grid, .price-layout, .contact-band-inner, .detail-section, .contact-options { grid-template-columns: 1fr; gap: 28px; } /* Stacks the full content in its natural reading order. */
  .opening-copy .lead { margin-bottom: 22px; } /* Keeps the main phone action close to its promise. */
  .lead { font-size: 18px; } /* Preserves legibility without overfilling the first phone screen. */
  .opening-offer { margin-top: 24px; margin-bottom: 24px; } /* Keeps genuine offer context visible before the image. */
  .kitchen-photo img { border-radius: 6px; aspect-ratio: 640 / 201; } /* Reserves the small mobile crop's own proportions while retaining the full-size source on larger screens. */
  .section { padding-block: 50px; } /* Keeps major phone sections calm but compact. */
  .section-heading { margin-bottom: 30px; } /* Groups each heading with the service list it introduces. */
  .service-list { gap: 28px; } /* Gives each open description a clear phone-sized break. */
  .owner-section { padding-top: 6px; padding-bottom: 50px; } /* Avoids doubling white section gaps. */
  .price-band { padding-block: 48px; } /* Keeps the broad cream price panel proportionate on phones. */
  .standard-prices { gap: 36px; } /* Allows both standard visit prices to remain visible together. */
  .standard-prices dd { font-size: 46px; } /* Keeps prices easy to compare on a phone. */
  .price-layout { margin-bottom: 24px; } /* Groups travel conditions with the prices above. */
  .coverage-grid { padding-top: 0; } /* Keeps neighbouring white content sections from feeling disconnected. */
  .contact-band { padding-block: 48px; } /* Keeps the solid closing panel concise and usable. */
  .contact-band-inner { gap: 28px; } /* Places contact choices close to the final invitation. */
  .contact-band h2 { font-size: 29px; } /* Keeps the full contact heading readable on narrow screens. */
  .site-footer { padding-top: 36px; } /* Gives the footer a quiet start after the navy panel. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; } /* Keeps useful footer links compact without tiny text. */
  .footer-contact { grid-column: 1 / -1; } /* Gives the complete email address a full-width footer row. */
  .footer-bottom { margin-top: 32px; flex-direction: column; gap: 10px; } /* Keeps final text left-aligned and readable. */
  .page-opening { padding-block: 22px 42px; } /* Makes supporting page introductions fit phones naturally. */
  .breadcrumb { margin-bottom: 20px; } /* Separates the home link from the unique page heading. */
  .page-opening h1 { margin-bottom: 20px; } /* Keeps page promise and explanation together. */
  .page-opening .lead { margin-bottom: 24px; } /* Maintains a clear break before the enquiry choice. */
  .detail-section { padding-block: 26px 36px; gap: 22px; } /* Keeps substantial supporting topics easy to scan. */
  .contact-options { gap: 34px; margin-bottom: 28px; } /* Stacks real contact methods without extra containers. */
  .enquiry-section { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 12px 52px; } /* Stacks the introduction above the enquiry fields in the natural reading order. */
  .enquiry-intro p { max-width: none; } /* Uses the available phone width for the short form guidance. */
  .cookie-banner { padding-top: 18px; } /* Keeps the phone notice compact while preserving comfortable controls. */
  .cookie-banner h2 { font-size: 21px; } /* Keeps the consent heading subordinate on narrow screens. */
  .cookie-actions { width: 100%; flex: 1 1 auto; } /* Lets both analytics choices use the available mobile row. */
  .cookie-choice { flex: 1 1 160px; } /* Gives acceptance and rejection equal width and allows safe stacking. */
  .legal-page { padding-block: 22px 55px; } /* Keeps notice pages readable on phones. */
} /* Ends phone-specific layout changes. */
@media (max-width: 360px) { /* Protects the narrowest supported phone and zoomed layouts. */
  .brand { width: 170px; flex-basis: 170px; } /* Leaves space for the standard menu control. */
  .button { padding-inline: 17px; font-size: 16px; } /* Keeps the complete call label within the viewport. */
  .contact-actions { gap: 12px 18px; } /* Lets alternatives wrap without collision. */
  .standard-prices { gap: 24px; } /* Preserves both prices without horizontal scrolling. */
  .standard-prices dt { font-size: 15px; } /* Fits the actual visit durations at small widths. */
} /* Ends narrow phone protection. */
@media print { /* Makes the service details usable when printed. */
  .desktop-nav, .mobile-nav, .skip-link, .cookie-banner, .cookie-settings { display: none; } /* Removes repeated navigation and consent controls from paper. */
  .container { width: 100%; } /* Uses the printable page width. */
  .site-header, .section, .price-band, .contact-band { padding-block: 20px; } /* Keeps the printout reasonably compact. */
  .contact-band, .price-band { background: white; color: #3f4e88; } /* Avoids relying on background printing for readability. */
  a { text-decoration: none; } /* Preserves the requested no-underline treatment in print. */
  .button { background: white; color: #3f4e88; } /* Preserves readable contact numbers without solid ink panels. */
} /* Ends the print presentation. */