@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

/* Everything below is DERIVED from the ten palette tokens in /styles/palette.css.
   Nothing here may be a literal colour, and tools/check-palette.mjs enforces that.
   The Miami fleet learned this the hard way: five palettes overrode six of nine rules
   and the other three stayed the pilot's turquoise on twenty-four live sites. */
:root{
  --radius:12px; --content:1200px; --gutter:32px;

  /* accent, against the surface */
  --accent-glow-1:color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-glow-2:color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-border:color-mix(in srgb, var(--accent) 32%, var(--surface));
  --accent-border-soft:color-mix(in srgb, var(--accent) 25%, var(--surface));
  --accent-wash:color-mix(in srgb, var(--accent) 7%, var(--surface));
  --accent-wash-2:color-mix(in srgb, var(--accent) 5%, var(--surface));
  --accent-bright:color-mix(in srgb, var(--accent) 80%, var(--surface));

  /* hairlines and pale grounds */
  --line-soft:color-mix(in srgb, var(--line) 72%, var(--surface));
  --line-strong:color-mix(in srgb, var(--line) 82%, var(--ink) 6%);
  --tint-neutral:color-mix(in srgb, var(--tint) 86%, var(--ink) 4%);
  --tint-deep:color-mix(in srgb, var(--tint) 64%, var(--accent) 11%);
  --muted-soft:color-mix(in srgb, var(--muted) 82%, var(--surface));

  /* translucent surfaces: glass buttons, the header, photo captions, copy panels */
  --glass-bg:color-mix(in srgb, var(--surface) 77%, transparent);
  --glass-border:color-mix(in srgb, var(--muted) 46%, transparent);
  --glass-border-strong:color-mix(in srgb, var(--muted) 74%, var(--surface));
  --header-bg:color-mix(in srgb, var(--surface) 94%, transparent);
  --photo-caption-bg:color-mix(in srgb, var(--surface) 91%, transparent);
  --photo-caption-border:color-mix(in srgb, var(--surface) 68%, transparent);
  --panel-glass:color-mix(in srgb, var(--tint) 82%, transparent);
  --panel-glass-border:color-mix(in srgb, var(--surface) 65%, transparent);

  /* shadows are the scrim, never black */
  --shadow-1:color-mix(in srgb, var(--scrim) 4%, transparent);
  --shadow-2:color-mix(in srgb, var(--scrim) 2%, transparent);
  --shadow-panel:color-mix(in srgb, var(--scrim) 7%, transparent);

  /* Motion. Three speeds, one curve. There were six durations in this file, each
     chosen where it was written, so a card, its photograph and its arrow all settled
     at different moments. Deliberately NO scroll-reveal: a fade-and-slide on every
     section is the default that makes a page look generated, and this one has eleven
     sections. Motion here answers the pointer and the keyboard, nothing else. */
  --t-fast:.15s;
  --t-base:.22s;
  --t-slow:.38s;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* text and hairlines that sit ON the ink band: footer, brand band */
  --on-ink-muted:color-mix(in srgb, var(--surface) 74%, var(--ink));
  --on-ink-faint:color-mix(in srgb, var(--surface) 62%, var(--ink));
  --on-ink-accent:color-mix(in srgb, var(--surface) 56%, var(--accent));
  --on-ink-line:color-mix(in srgb, var(--surface) 9%, transparent);

  /* --- Material depth. A flat fill and a hairline is what made this read as a template;
     these are the four things that make a surface look like a surface. --- */
  --edge-hi:color-mix(in srgb, var(--surface) 72%, transparent);
  --card-top:var(--surface);
  --card-bottom:color-mix(in srgb, var(--tint) 62%, var(--surface));
  --ground-wash:color-mix(in srgb, var(--tint) 55%, var(--surface));
  --lift-1:0 1px 2px var(--shadow-2), 0 8px 22px var(--shadow-1);
  --lift-2:0 2px 4px var(--shadow-2), 0 18px 42px var(--shadow-panel);

  /* Material bands: a photograph carries the band, a scrim makes the type legible on it,
     and a glass panel holds the copy. This is the site's signature, so it is a token set
     rather than six one-off rules. */
  --scrim-deep:color-mix(in srgb, var(--scrim) 90%, transparent);
  --scrim-mid:color-mix(in srgb, var(--scrim) 68%, transparent);
  --scrim-soft:color-mix(in srgb, var(--scrim) 34%, transparent);
  --glass-dark:color-mix(in srgb, var(--scrim) 46%, transparent);
  --glass-dark-edge:color-mix(in srgb, var(--surface) 18%, transparent);

  /* the vendor form card is white on EVERY palette, because it is vendor markup.
     Its fields are therefore derived against the surface, never against the tint. */
  --field-bg:color-mix(in srgb, var(--surface) 97%, var(--accent) 3%);
  --field-border:color-mix(in srgb, var(--line) 88%, var(--ink) 4%);
  --field-label:color-mix(in srgb, var(--muted) 86%, var(--ink));
}

/* A tinted icon is a mask, not a hue-rotate filter. The filter that used to do this
   produced exactly one colour and survived every palette change. */
.rr .ikon{display:inline-block;flex:0 0 auto;width:20px;height:20px;background:var(--accent);
  -webkit-mask:var(--ikon) center/contain no-repeat;mask:var(--ikon) center/contain no-repeat}
.rr .ikon-ink{background:var(--ink)}
.rr .ikon-surface{background:var(--surface)}

/* Shared design tokens. All vendor adjustments are isolated at the end. */
html{scroll-behavior:smooth;scroll-padding-top:104px}
body.rr{margin:0;background:var(--white);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.rr *{box-sizing:border-box}
.rr [hidden]{display:none!important}
.rr a{color:inherit;text-decoration:none}
.rr button,.rr input,.rr select,.rr textarea{font:inherit}
.rr button,.rr summary{cursor:pointer}
.rr img{display:block;max-width:100%}
.rr :is(h1,h2,h3,p,ul,ol,figure){margin:0}
.rr :is(ul,ol){padding:0;list-style:none}
.rr :is(a,button,summary,select,input,textarea):focus-visible{outline:3px solid var(--focus);outline-offset:5px}
.rr .container{width:calc(100% - var(--gutter)*2);max-width:var(--content);margin-inline:auto}
.rr .section{padding-block:88px}
.rr .eyebrow{margin-bottom:24px;color:var(--accent);font-size:11px;font-weight:750;line-height:1.5;letter-spacing:.13em;text-transform:uppercase}
.rr h2{font-size:clamp(30px,3.3vw,44px);font-weight:750;line-height:1.2;letter-spacing:-.045em}
.rr h2 span,.rr h1 span{color:var(--accent)}
.rr .section-description{max-width:370px;margin-top:22px;color:var(--muted);font-size:16px;line-height:1.75}
.rr .icon{flex:0 0 auto;width:20px;height:20px}
.rr .button{display:inline-flex;justify-content:center;align-items:center;gap:16px;min-height:52px;padding:13px 23px;border:1px solid transparent;border-radius:8px;font-size:13px;font-weight:700;line-height:1.45;white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.rr .button-primary{background:var(--accent);color:var(--surface);box-shadow:0 5px 15px var(--accent-glow-1)}
.rr .button-primary:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 8px 20px var(--accent-glow-2)}
.rr .button-primary .icon{filter:brightness(0) invert(1)}
.rr .button-outline{border-color:var(--accent-border);color:var(--accent);background:transparent}
.rr .button-outline:hover{background:var(--accent-wash);border-color:var(--accent)}
.rr .button-glass{border-color:var(--glass-border);background:var(--glass-bg);backdrop-filter:blur(12px);color:var(--ink)}
.rr .button-glass:hover{background:var(--surface);border-color:var(--glass-border-strong)}
.rr .text-link{display:inline-flex;align-items:center;gap:12px;color:var(--accent);font-size:13px;font-weight:700;line-height:1.6}
.rr .text-link:hover .icon,.rr .text-link:focus-visible .icon{transform:translateX(4px)}
.rr .text-link .icon{transition:transform var(--t-fast)}
.rr .skip-link{position:fixed;z-index:100;top:-100px;left:20px;padding:12px 20px;border-radius:6px;background:var(--ink);color:var(--surface)}
.rr .skip-link:focus{top:12px}

/* Header */
.rr .site-header{position:sticky;top:0;z-index:40;background:var(--header-bg);border-bottom:1px solid var(--line-soft);backdrop-filter:blur(18px)}
.rr .header-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;height:80px}
.rr .wordmark{display:inline-block;font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-1.1px;white-space:nowrap}
.rr .wordmark span{color:var(--accent)}
/* 🔴 `white-space:nowrap`. Without it the row broke into two lines the moment the header
   button gained a few pixels of padding — "What we / do", "Error / codes", "Refrigerator /
   types". A navigation label is one word-object; it may be dropped from the row but never
   folded in half. The gap gives way first, then the whole nav goes to the menu button. */
.rr .desktop-nav{display:flex;align-items:center;gap:clamp(16px,1.6vw,28px);min-width:0}
.rr .desktop-nav a{font-size:12px;font-weight:650;line-height:1.4;white-space:nowrap;
  transition:color var(--t-fast)}
.rr .desktop-nav a:hover{color:var(--accent)}
.rr .header-cta{min-height:42px;padding:10px 17px;font-size:12px;gap:10px}
.rr .menu-toggle{display:none;justify-content:center;align-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.rr .mobile-nav{padding:8px var(--gutter) 20px;border-top:1px solid var(--line);background:var(--surface)}
.rr .mobile-nav a{display:block;padding:12px 0;font-size:15px;font-weight:600}

/* Hero */
.rr .hero{position:relative;isolation:isolate;min-height:690px;background:var(--tint-neutral);overflow:hidden}
.rr .hero-image{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.rr .hero-inner{display:flex;align-items:center;min-height:690px;padding-block:64px}
.rr .hero-copy{width:58%;max-width:650px}
.rr .hero .eyebrow{margin-bottom:28px}
.rr h1{font-size:clamp(48px,6vw,82px);font-weight:800;line-height:1.04;letter-spacing:-.055em}
.rr .hero-description{margin-top:28px;color:var(--ink-soft);font-size:16px;line-height:1.7;max-width:510px}
.rr .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.rr .hero-services{display:flex;flex-wrap:wrap;gap:25px;margin-top:36px}
.rr .hero-services li{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;line-height:1.5}
.rr .hero-services .icon{width:25px;height:25px;background:var(--accent)}

/* One consistent two-column booking section. No repeated quick form. */
.rr .booking-section{background:var(--tint-deep) url('/assets/images/steel-background.webp') center center/cover no-repeat;border-top:1px solid var(--surface);border-bottom:1px solid var(--line)}
.rr .booking-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,576px);gap:92px;align-items:start}
.rr .booking-copy{padding:28px;background:var(--panel-glass);border:1px solid var(--panel-glass-border);border-radius:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rr .booking-copy h2{font-size:42px;line-height:1.22}
.rr .booking-steps{margin-top:34px;max-width:395px;scroll-margin-top:110px}
.rr .booking-steps li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:20px;padding:25px 0;border-bottom:1px solid var(--line-strong)}
.rr .booking-steps li:first-child{padding-top:0}
.rr .step-number{font-size:24px;font-weight:550;line-height:1.25;color:var(--accent);letter-spacing:-.04em}
.rr .booking-steps h3{font-size:14px;line-height:1.5;font-weight:750;letter-spacing:-.02em}
.rr .booking-steps p{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.75}
.rr .booking-note{display:flex;align-items:flex-start;gap:12px;max-width:365px;margin-top:26px}
.rr .booking-note .icon{margin-top:3px;opacity:.7}
.rr .booking-note p{color:var(--muted);font-size:12px;line-height:1.7}
.rr .booking-panel{min-width:0;padding:36px;background:var(--surface);border:1px solid var(--surface);border-radius:16px;box-shadow:0 14px 46px var(--shadow-1),0 1px 4px var(--shadow-2)}
.rr .form-status{min-height:630px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:14px}
.rr .form-error{margin-top:20px;padding:18px;border:1px solid var(--line-strong);border-radius:8px;background:var(--tint);font-size:13px;color:var(--muted)}
.rr .form-error .button{margin-top:14px;min-height:42px}
.rr .form-noscript{padding:24px;color:var(--muted)}

/* Problems */
.rr .services-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.18fr);gap:48px;align-items:center}
.rr .services-copy .text-link{margin-top:32px}
.rr .services-copy h2{font-size:37px;line-height:1.24}
.rr .services-copy .section-description{font-size:14px}

.rr .service-list{min-width:0}
.rr .service-item{display:grid;grid-template-columns:54px minmax(0,1fr) 20px;align-items:center;gap:16px;padding:23px 0;border-bottom:1px solid var(--line)}
.rr .service-item:first-child{padding-top:0}
.rr .service-item:last-child{border-bottom:0;padding-bottom:0}

.rr .service-icon img{width:29px;height:29px;background:var(--accent)}
.rr .service-item h3{font-size:15px;line-height:1.5;font-weight:750;letter-spacing:-.03em}
.rr .service-item p{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.7}
.rr .service-arrow{width:17px;height:17px;opacity:.85;transition:transform var(--t-fast)}
.rr .service-item:hover h3,.rr .service-item:focus-visible h3{color:var(--accent)}

.rr .service-item:hover .service-arrow,.rr .service-item:focus-visible .service-arrow{transform:translateX(3px)}

/* Brands */
.rr .brands-section{padding-block:54px;background:var(--ink);color:var(--surface)}
.rr .brands-grid{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:center;gap:74px}
.rr .eyebrow-light{color:var(--on-ink-accent);font-size:10px;margin-bottom:16px}
.rr .brands-copy h2{font-size:28px;line-height:1.28;letter-spacing:-.035em}
.rr .brands-copy>p:last-child{margin-top:18px;color:var(--on-ink-faint);font-size:10px;line-height:1.65}
/* The wall. One mark height for all twenty-six; the width follows each mark's own ratio,
   which has to arrive as --r from brandMarks.json because a mask has no intrinsic size. */
/* 🔴 A grid cannot centre a short last row, and 26 marks never divide evenly into a
   column count — six across left a ragged pair hanging at the left edge. A centred flex
   wrap is how a logo wall is actually set, and it lets a wide mark take the room it needs
   instead of being squeezed into an equal cell. */
.rr .brand-logos{--mark-h:26px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:24px 34px}
.rr .brand-mark{display:block;height:var(--mark-h);width:calc(var(--mark-h) * var(--r));
  max-width:100%;background:currentColor;opacity:.78;
  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;
  transition:opacity var(--t-fast)}
.rr .brand-mark:hover,.rr .brand-mark:focus-visible{opacity:1}

/* FAQ */
.rr .faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.rr .family-photo{position:relative;overflow:hidden;border-radius:var(--radius)}
.rr .family-photo>img{width:100%;height:445px;object-fit:cover;object-position:48% 50%}
.rr .family-photo figcaption{position:absolute;left:20px;bottom:20px;padding:11px 18px;border:1px solid var(--photo-caption-border);border-radius:6px;background:var(--photo-caption-bg);backdrop-filter:blur(10px);font-size:12px;font-weight:600}
.rr .faq-copy h2{font-size:38px}
.rr .faq-copy .eyebrow{margin-bottom:18px}
.rr .faq-list{margin-top:26px}
.rr .faq-list details{border-bottom:1px solid var(--line)}
.rr .faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px;padding-block:18px;list-style:none;font-size:13px;font-weight:650;line-height:1.6}
.rr .faq-list summary::-webkit-details-marker{display:none}
.rr .faq-list summary:hover{color:var(--accent)}
.rr .faq-list .icon{width:17px;height:17px}
.rr .faq-minus{display:none}
.rr details[open] .faq-plus{display:none}
.rr details[open] .faq-minus{display:block}
.rr .faq-answer{padding:0 26px 20px 0;font-size:13px;line-height:1.8;color:var(--muted)}

/* Closing panel and footer */

.rr .site-footer{padding:56px 0 22px;background:var(--ink);color:var(--surface)}
/* 🔴 This was written as `.sisters + .site-footer` and never matched: the band is inside
   <main> and the footer is a sibling of <main>, so they are not adjacent siblings at all.
   The rule sat there looking correct and did nothing. The separator belongs to the band
   itself, which has no such dependency. */
.rr main:has(.sisters) + .site-footer{padding-top:42px}
.rr .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:44px}
.rr .footer-grid .wordmark{font-size:20px}
.rr .footer-grid h3{font-size:12px;line-height:1.5;font-weight:700;margin-bottom:16px}
.rr .footer-grid a:not(.wordmark){display:flex;align-items:center;gap:7px;font-size:11px;line-height:1.7;color:var(--on-ink-muted);margin-top:7px}
.rr .footer-grid a:hover{color:var(--surface);text-decoration:underline;text-underline-offset:4px}
/* 🔴 `filter:invert(1)` is left over from when these were <img> icons that had to be
   flipped white for the dark footer. They are masks now — the colour IS the background,
   set two rules below — and inverting a mask's light grey turns it dark again, on a dark
   footer. The phone icon beside the number was the one that showed it. */
.rr .footer-grid .icon{width:14px;height:14px}
.rr .footer-grid p{margin-top:14px;font-size:11px;line-height:1.8;color:var(--on-ink-faint)}
/* Sections first, then the legal line. They used to share one row, which put Brands and
   Guides next to the privacy policy — the one place on a page where a link reads as
   something you are not meant to click. */
.rr .footer-sections{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;
  padding-top:26px;border-top:1px solid var(--on-ink-line)}
.rr .footer-sections a{font-size:12px;font-weight:700;color:var(--on-ink-muted);
  transition:color var(--t-fast)}
.rr .footer-sections a:hover{color:var(--surface)}
.rr .footer-book{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  color:var(--on-ink-accent)!important}
.rr .footer-book .ikon{width:15px;height:15px;background:var(--on-ink-accent);
  transition:transform var(--t-fast)}
.rr .footer-book:hover .ikon{transform:translateX(3px);background:var(--surface)}

.rr .footer-bottom{display:flex;align-items:center;gap:26px;margin-top:26px;padding-top:18px;
  border-top:1px solid var(--on-ink-line);color:var(--on-ink-faint);font-size:11px}
.rr .footer-bottom small{font-size:inherit;margin-right:auto}

/* The number is the one thing in this column anyone scans for. */
.rr .footer-phone{margin-top:16px!important;font-size:14px!important;font-weight:750;
  color:var(--surface)!important;letter-spacing:-.02em}
.rr .footer-phone small{display:block;margin-top:2px;font-size:10px;font-weight:600;
  color:var(--on-ink-faint);letter-spacing:0}
.rr .footer-phone .ikon{width:16px;height:16px;background:var(--on-ink-accent)}
.rr .footer-tagline{max-width:26ch}
.rr .footer-disclaimer{margin-top:18px!important;max-width:38ch}
.rr .footer-more{margin-top:12px!important;color:var(--on-ink-accent)!important;font-weight:700}
.rr .footer-grid h3 a{color:inherit;transition:color var(--t-fast)}
.rr .footer-grid h3 a:hover{color:var(--on-ink-accent)}
.rr .footer-bottom a:hover{color:var(--surface)}

/* Original ProLeadService minimal form: presentation only, no field/flow changes. */
.rr #schedule-appointment{color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:14px;line-height:1.5}
.rr #schedule-appointment>div{min-height:0!important;background:transparent!important}
.rr #schedule-appointment>div>div{max-width:none!important;padding:0!important}
.rr #schedule-appointment header{margin-bottom:26px!important}
.rr #schedule-appointment header h1{font-family:inherit;font-weight:650;font-size:30px;line-height:1.3;letter-spacing:-.045em;color:var(--ink)}
.rr #schedule-appointment header h1 span{color:var(--accent)}
.rr #schedule-appointment header p:first-child{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.14em;margin-bottom:12px}
.rr #schedule-appointment header p:last-child{color:var(--muted);font-size:12px;margin-top:9px;line-height:1.7}
.rr #schedule-appointment nav{margin-bottom:28px!important}
.rr #schedule-appointment nav li{min-width:0}
.rr #schedule-appointment nav ol{gap:8px}
.rr #schedule-appointment nav li span{font-family:inherit;font-size:10px;letter-spacing:.035em}
.rr #schedule-appointment nav span.hidden{display:inline!important}
.rr #schedule-appointment nav li>div{gap:8px}
.rr #schedule-appointment :is(select,input:not([type=checkbox]),textarea){min-height:48px;border:1px solid var(--field-border)!important;border-radius:8px!important;padding:12px 13px!important;background-color:var(--field-bg)!important;color:var(--ink)!important;font-family:inherit!important;font-size:13px!important;line-height:1.5;box-shadow:none!important}
.rr #schedule-appointment textarea{min-height:94px;resize:vertical}
.rr #schedule-appointment :is(select,input,textarea):focus{outline:2px solid var(--accent-bright);outline-offset:1px;border-color:var(--accent-bright)!important}
.rr #schedule-appointment label{font-family:inherit;font-size:11px;color:var(--field-label);background:var(--surface);padding-inline:5px}
.rr #schedule-appointment button.bg-gray-900{min-height:48px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--surface);padding:12px 25px;font-family:inherit;font-size:13px;font-weight:700;line-height:1.5}
.rr #schedule-appointment button.bg-gray-900:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.rr #schedule-appointment button:disabled{cursor:not-allowed;opacity:.55}
.rr #schedule-appointment .mt-10{margin-top:27px}
.rr #schedule-appointment .text-xs{font-size:10px}
.rr #schedule-appointment .text-gray-400{color:var(--muted-soft)}
.rr #schedule-appointment .border-gray-200{border-color:var(--line)}
.rr #schedule-appointment .text-blue-700{color:var(--accent)}
.rr #schedule-appointment a{color:var(--accent)}

@media(min-width:1600px){.rr .hero{min-height:710px}.rr .hero-inner{min-height:710px}.rr .hero-image{object-position:center 44%}}
@media(max-width:1199px){:root{--gutter:28px}.rr .header-inner{gap:16px}.rr .wordmark{font-size:19px}.rr .desktop-nav{gap:16px}.rr .header-phone small{display:none}.rr .header-cta{padding-inline:15px}.rr .booking-grid{gap:50px;grid-template-columns:minmax(0,1fr) minmax(0,520px)}.rr .booking-copy h2{font-size:36px}.rr .services-grid{gap:28px}.rr .services-copy h2{font-size:31px}.rr .service-item{gap:11px;grid-template-columns:46px minmax(0,1fr) 16px}.rr .service-item p br{display:none}.rr .brands-grid{gap:40px;grid-template-columns:250px minmax(0,1fr)}.rr .brand-logos{gap:24px}.rr .faq-grid{gap:45px}.rr .footer-grid{gap:30px}}
@media(max-width:1023px){.rr .desktop-nav{display:none}.rr .header-cta{margin-left:auto}.rr .menu-toggle{display:flex}.rr .hero,.rr .hero-inner{min-height:605px}.rr .hero-image{object-position:57% center}.rr .hero-copy{width:66%}.rr h1{font-size:60px}.rr .hero-description{max-width:400px;font-size:14px}.rr .hero-services{gap:18px}.rr .booking-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:32px}.rr .booking-panel{padding:26px}.rr .booking-copy{padding-top:15px}.rr .booking-copy h2{font-size:32px}.rr .booking-steps li{grid-template-columns:32px 1fr;gap:14px}.rr .booking-steps h3{font-size:13px}.rr .booking-steps p{font-size:12px}.rr #schedule-appointment header h1{font-size:26px}.rr #schedule-appointment nav ol{gap:5px}.rr #schedule-appointment nav li span{font-size:9px}.rr .services-copy .section-description{margin-top:0;max-width:350px}.rr .services-copy .text-link{margin-top:14px}.rr .brands-grid{grid-template-columns:1fr;gap:35px}.rr .brands-copy{display:flex;align-items:center;justify-content:space-between;gap:30px}.rr .brands-copy .eyebrow{display:none}.rr .brands-copy>p:last-child{margin:0}.rr .brand-logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:28px}.rr .faq-copy h2{font-size:31px}.rr .family-photo>img{height:400px}.rr .footer-grid{grid-template-columns:1.5fr 1fr 1fr}.rr .footer-grid>div:last-child{grid-column:1/-1;display:flex;gap:25px;align-items:center}.rr .footer-grid>div:last-child>*{margin:0}}
@media(max-width:767px){:root{--gutter:22px}.rr .section{padding-block:56px}.rr .header-inner{height:68px;gap:14px}.rr .wordmark{font-size:19px;letter-spacing:-.9px}.rr .header-cta{display:none}.rr .menu-toggle{margin-left:auto}.rr .hero{display:flex;flex-direction:column;padding:0;background:var(--tint-neutral)}.rr .hero-image{position:relative;inset:auto;z-index:0;order:2;width:100%;height:320px;object-fit:cover;object-position:right center}.rr .hero-inner{min-height:0;padding-block:42px 32px}.rr .hero-copy{width:100%;max-width:none}.rr .hero .eyebrow{font-size:11px;margin-bottom:21px}.rr h1{font-size:clamp(44px,8.4vw,60px);line-height:1.06;letter-spacing:-.055em}.rr h1 br:nth-of-type(2){display:none}.rr .hero-description{font-size:14px;max-width:440px;margin-top:23px}.rr .desktop-break{display:none}.rr .hero-actions{gap:10px;margin-top:24px}.rr .button{min-height:49px;padding:12px 17px;font-size:12px;gap:12px}.rr .hero-services{gap:20px;margin-top:25px}.rr .hero-services li{font-size:11px;gap:7px}.rr .hero-services .icon{width:23px;height:23px}.rr .booking-grid{grid-template-columns:1fr;gap:32px}.rr .booking-copy{padding-top:0}.rr .booking-copy h2{font-size:34px}.rr .booking-copy .section-description{font-size:14px;margin-top:16px}.rr .booking-copy .section-description br{display:none}.rr .booking-steps{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:none}.rr .booking-steps li,.rr .booking-steps li:first-child{display:block;padding:0;border:0}.rr .step-number{display:block;margin-bottom:10px;font-size:22px}.rr .booking-steps h3{font-size:12px;line-height:1.6}.rr .booking-steps p{display:none}.rr .booking-note{display:none}.rr .booking-panel{padding:28px 24px;border-radius:12px}.rr #schedule-appointment header h1{font-size:28px;line-height:1.35}.rr #schedule-appointment nav li span{font-size:10px}.rr .services-grid{gap:30px}.rr .services-copy h2{font-size:34px}.rr .services-copy .section-description{margin-top:18px;font-size:14px}.rr .services-copy .text-link{margin-top:20px}.rr .service-item{grid-template-columns:36px minmax(0,1fr);gap:11px;padding-block:19px}.rr .service-arrow{display:none}.rr .service-item h3{font-size:13px}.rr .service-item p{font-size:11px;line-height:1.6}.rr .brands-section{padding-block:40px}.rr .brands-copy h2{font-size:27px}.rr .brand-logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:23px}.rr .brand-mark{height:30px}.rr .faq-grid{grid-template-columns:1fr;gap:32px}.rr .family-photo>img{height:320px}.rr .faq-copy h2{font-size:34px}.rr .faq-copy h2 br{display:none}.rr .faq-list{margin-top:18px}.rr .faq-list summary{font-size:13px}.rr .site-footer{padding-top:42px}.rr .footer-grid{grid-template-columns:1fr 1fr;gap:32px}.rr .footer-brand{grid-column:1/-1}.rr .footer-grid>div:last-child{display:block}.rr .footer-grid>div:last-child>h3{margin-bottom:12px}.rr .footer-grid>div:last-child>p{margin-top:8px}.rr .footer-bottom{flex-wrap:wrap;gap:14px 22px;line-height:1.7}.rr .footer-bottom small{flex-basis:100%}}
/* --- Phone: reading size and tap size ------------------------------------------------
   Measured at 320/375/430: nothing overflowed, but a list of navigation links is not a
   link inside a sentence, and these were 17-20px tall — the city index (30 of them), the
   footer columns (23), the sister sites and the brand overflow. WCAG 2.2 exempts an
   inline link in prose from the target-size rule; none of these are that. 11px is the
   floor for body text here; the vendor booking widget sets its own and is not ours. */
@media(max-width:767px){
  .rr .area-list li{line-height:1.5}
  .rr .area-list a{display:inline-block;padding-block:10px}
  .rr .footer-grid a:not(.wordmark){min-height:40px;margin-top:0;font-size:12px}
  .rr .footer-bottom{gap:6px 22px}
  .rr .footer-bottom a{display:inline-flex;align-items:center;min-height:40px}
  .rr .footer-bottom small{font-size:11px}
  /* The two rows added below the columns want the same treatment as the columns. */
  .rr .footer-sections a,.rr .sisters-list a{display:inline-flex;align-items:center;min-height:40px}
  .rr .brand-rest a{display:inline-block;padding-block:9px}
  .rr .site-footer p,.rr .site-footer small{font-size:11px}
  .rr .footer-bottom{font-size:11px}
  .rr .pill{min-height:36px}
  /* Standalone links, not links inside a sentence: the section "read more", the logo,
     the breadcrumb trail and the job column of the cost table. */
  .rr .text-link{min-height:40px}
  .rr .wordmark{min-height:44px}
  .rr .crumbs a{display:inline-block;padding-block:9px}
  .rr .cost-table td:first-child a{display:inline-block;padding-block:8px}
  .rr .brand-logos a{display:flex;align-items:center;min-height:44px}
  .rr .brands-copy>p:last-child{font-size:11px}   /* matches the base rule's specificity, or it loses */
}
@media(max-width:479px){:root{--gutter:20px}.rr .hero-image{height:245px;object-position:75% center}.rr .hero-inner{padding-top:36px}.rr .hero-services{gap:11px}.rr .hero-services li{font-size:11px;gap:5px}.rr .hero-services .icon{width:20px;height:20px}.rr .hero-actions{flex-wrap:nowrap}.rr .hero-actions .button{font-size:11px;padding-inline:14px;gap:8px}.rr .hero-actions .button .icon{width:17px;height:17px}.rr .hero-actions .button:first-child{flex:1}.rr .booking-panel{padding:25px 18px}.rr #schedule-appointment header h1{font-size:25px}.rr #schedule-appointment nav ol{gap:5px}.rr #schedule-appointment nav li span{font-size:8px}.rr .services-grid{grid-template-columns:1fr}.rr .services-copy,.rr .cooling-image,.rr .service-item{grid-template-columns:49px minmax(0,1fr) 20px;gap:15px;padding:20px 0}.rr .service-arrow{display:block}.rr .service-item h3{font-size:15px}.rr .service-item p{font-size:12px}.rr .service-item p br{display:none}.rr .brands-copy{display:block}.rr .brands-copy>p:last-child{margin-top:16px}.rr .brand-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:23px 18px}.rr .brand-mark{height:28px}.rr .family-photo>img{height:280px}}
@media(max-width:1023px){.rr .booking-copy{padding:24px}}
@media(max-width:767px){.rr .booking-copy{padding:24px 20px}.rr .booking-copy h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rr *{transition:none!important}}

/* --- Mask icons: contextual colour, so no template has to think about it --- */

.rr .button-primary .ikon{background:var(--surface)}
.rr :is(.button-outline,.button-glass,.text-link,.booking-note) .ikon{background:var(--accent)}
.rr :is(.service-arrow,.faq-list .ikon,.form-status .ikon){background:var(--muted)}
.rr .footer-grid .ikon{background:var(--on-ink-muted)}
.rr .menu-toggle .ikon{background:var(--ink)}
.rr .hero-services .ikon{width:25px;height:25px}

/* --- Sections added after the Codex prototype --- */
.rr .callbar{display:none}
/* Two ways to reach us, at two weights. They used to be a two-line phone block and a
   pale outlined button, both about the same size and both boxy — nothing said which one
   the page wanted you to use, and the outline read as an unfinished button on an almost
   white header. Now: the phone is quiet type, the button is the one solid thing up here,
   and a hairline separates the pair from the navigation so the header reads as two
   groups rather than nine items in a row. */
.rr .header-rule{width:1px;height:24px;margin-inline:6px;background:var(--line-strong);flex:0 0 auto}
.rr .header-phone{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
  letter-spacing:-.02em;white-space:nowrap;color:var(--ink);transition:color var(--t-fast)}
.rr .header-phone:hover{color:var(--accent)}
.rr .header-phone small{display:block;margin-top:1px;font-size:10px;font-weight:600;
  color:var(--muted);letter-spacing:0}
.rr .header-phone .ikon{width:16px;height:16px;background:var(--muted);
  transition:background var(--t-fast)}
.rr .header-phone:hover .ikon{background:var(--accent)}
.rr .header-cta{padding-inline:20px}

.rr .trust-band{border-bottom:1px solid var(--line-soft)}
.rr .trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding-block:26px}
.rr .trust-item{display:flex;align-items:flex-start;gap:12px}
.rr .trust-item .ikon{margin-top:2px;width:22px;height:22px}
.rr .trust-item h3{font-size:12px;font-weight:750;line-height:1.5;letter-spacing:-.02em}
.rr .trust-item p{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.6}

.rr .step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:46px}
.rr .step-card{padding-top:22px;border-top:2px solid var(--accent-border)}
.rr .step-card .step-number{display:block;margin-bottom:12px}
.rr .step-card h3{font-size:15px;font-weight:750;line-height:1.45;letter-spacing:-.03em}
.rr .step-card p{margin-top:9px;color:var(--muted);font-size:13px;line-height:1.75}

.rr .tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px}
.rr .tile{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:transform var(--t-base),border-color var(--t-fast),box-shadow var(--t-fast)}
.rr .tile:hover,.rr .tile:focus-within{transform:translateY(-3px);border-color:var(--accent-border);box-shadow:0 10px 26px var(--shadow-1)}
.rr .tile .ikon{width:26px;height:26px}
.rr .tile h3{font-size:14px;font-weight:750;line-height:1.45;letter-spacing:-.03em}
.rr .tile p{color:var(--muted);font-size:12px;line-height:1.7}
.rr .tile-more{display:flex;align-items:center;justify-content:center;border-style:dashed;color:var(--accent);font-size:13px;font-weight:700}

/* Editorial two-column header: heading left, deck and link in a narrower right column,
   sharing a bottom edge. The old rule was `justify-content:space-between` on a flex row,
   which parked the link against the far edge of the container and left 600-800px of dead
   air in the middle of five different section headers. */
.rr .band-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(280px,32%,400px));
  gap:28px 72px;align-items:end}
.rr .band-head h2{margin:0}
.rr .band-head-aside{padding-bottom:6px}
.rr .band-head .section-description{margin-top:0}
.rr .band-head .text-link{margin-top:20px}

/* Sentence case, weighted rather than tracked. The all-caps eyebrow is kept only where it
   names the KIND of page and nothing else does. */
.rr .band-kicker{margin-bottom:14px;color:var(--accent);font-size:13px;font-weight:700;
  line-height:1.5;letter-spacing:-.01em}
.rr .band .band-kicker,.rr .page-cta-panel .band-kicker{color:var(--on-ink-accent)}

.rr .cost-section{background:var(--tint)}
.rr .cost-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
/* Only what the squared-up block further down does NOT restate. Everything else that
   used to live here was a duplicate, and a duplicate that comes LATER silently kills
   the .band override written between the two copies — see tools/check-css.mjs. */
.rr .cost-table{margin-top:8px}
.rr .cost-table th{color:var(--accent);border-bottom:1px solid var(--line-strong)}
.rr .cost-table td{border-bottom:1px solid var(--line)}
.rr .cost-note{margin-top:22px;padding:18px 20px;border-left:2px solid var(--accent);background:var(--surface);color:var(--muted);font-size:12px;line-height:1.75}

.rr .area-section{background:var(--surface)}
.rr .area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}

.rr .guides-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.rr .guide-card{display:flex;flex-direction:column;gap:9px;padding:26px;border-radius:var(--radius);background:var(--tint);transition:transform var(--t-base)}
.rr .guide-card:hover{transform:translateY(-3px)}
.rr .guide-card span{font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.rr .guide-card h3{font-size:15px;font-weight:750;line-height:1.5;letter-spacing:-.03em}
.rr .guide-card p{color:var(--muted);font-size:12px;line-height:1.7}

/* Runs into the footer rather than interrupting it: same ink, one hairline between them,
   so the page closes in a single dark block instead of dark / white / dark. */
.rr .sisters{padding-block:34px 30px;background:var(--ink);color:var(--surface);
  border-bottom:1px solid var(--on-ink-line)}
.rr .sisters-inner{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr);
  gap:22px 56px;align-items:start}
.rr .sisters-lede{font-size:13px;line-height:1.7;color:var(--on-ink-muted);max-width:26ch;
  padding-top:12px}
.rr .sisters-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 26px}
.rr .sisters-list li{display:flex;flex-direction:column;gap:3px;
  padding-top:12px;border-top:1px solid var(--on-ink-line)}
.rr .sisters-list a{font-size:14px;font-weight:750;letter-spacing:-.02em;color:var(--surface);
  transition:color var(--t-fast)}
.rr .sisters-list a:hover{color:var(--on-ink-accent)}
.rr .sisters-list span{font-size:11px;line-height:1.55;color:var(--on-ink-faint)}
@media(max-width:767px){
  .rr .sisters{padding-block:28px 26px}
  .rr .sisters-inner{grid-template-columns:1fr;gap:18px}
  .rr .sisters-list{grid-template-columns:1fr;gap:0}
  .rr .sisters-list li{padding-block:12px}
}


/* --- Inner pages --- */
.rr .crumbs{padding-block:18px;border-bottom:1px solid var(--line-soft);font-size:11px;color:var(--muted)}
.rr .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rr .crumbs li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--line-strong)}
.rr .crumbs a:hover{color:var(--accent)}

.rr .page-head{padding-block:58px 44px;background:var(--tint);border-bottom:1px solid var(--line-soft)}
.rr .page-head h1{font-size:clamp(34px,4.6vw,56px);max-width:16ch}
.rr .page-lede{margin-top:22px;max-width:62ch;color:var(--ink-soft);font-size:17px;line-height:1.7}
.rr .page-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.rr .pill{padding:6px 13px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);font-size:11px;font-weight:650;color:var(--muted)}
.rr .pill-accent{border-color:var(--accent-border);color:var(--accent)}
.rr a.pill:hover{border-color:var(--accent);color:var(--accent)}

.rr .prose{max-width:68ch}
.rr .prose p{margin-top:18px;font-size:16px;line-height:1.8;color:var(--ink-soft)}
.rr .prose p:first-child{margin-top:0}
.rr .page-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:72px;align-items:start}
.rr .page-aside{position:sticky;top:104px}
.rr h2.block-title{font-size:clamp(24px,2.6vw,32px);margin-bottom:8px}
.rr .block{padding-block:54px;border-top:1px solid var(--line-soft)}
.rr .block:first-child{border-top:0}

.rr .obs-list{counter-reset:obs;margin-top:28px;display:grid;gap:2px}
.rr .obs-list li{counter-increment:obs;display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.rr .obs-list li::before{content:counter(obs,decimal-leading-zero);color:var(--accent);font-size:16px;font-weight:600}
.rr .obs-list p{font-size:14px;line-height:1.7}

.rr .cause-list{margin-top:28px;display:grid;gap:14px}
.rr .cause{padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.rr .cause-top{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.rr .cause h3{font-size:15px;font-weight:750;letter-spacing:-.03em}
.rr .cause-cost{flex:0 0 auto;font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.rr .cause p{margin-top:9px;color:var(--muted);font-size:13px;line-height:1.75}
.rr .cause .text-link{margin-top:12px;font-size:12px}

.rr .check-list{margin-top:24px;display:grid;gap:12px}
.rr .check-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font-size:14px;line-height:1.7}
.rr .check-list .ikon{width:18px;height:18px;margin-top:4px}

.rr .callout{margin-top:28px;padding:24px 26px;border:1px solid var(--accent-border);border-radius:var(--radius);background:var(--accent-wash)}
.rr .callout h3{font-size:13px;font-weight:750;letter-spacing:.02em}
.rr .callout p{margin-top:10px;font-size:13px;line-height:1.75;color:var(--ink-soft)}

.rr .rows{margin-top:26px;border-top:1px solid var(--line)}
.rr .row{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.rr .row h3{font-size:14px;font-weight:700;letter-spacing:-.02em}
.rr .row p{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.7}
.rr .row:hover h3{color:var(--accent)}
.rr .row:hover .ikon{transform:translateX(3px)}
.rr .row .ikon{width:17px;height:17px;transition:transform var(--t-fast)}

.rr .who-table{width:100%;border-collapse:collapse;margin-top:26px}
.rr .who-table th{padding:0 0 12px;text-align:left;font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--line-strong)}
.rr .who-table td{padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
.rr .who-table td:first-child{font-weight:700;width:34%}
.rr .who-table td:last-child{color:var(--muted)}

.rr .aside-card{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--tint)}
.rr .aside-card h2{font-size:20px;letter-spacing:-.035em}
.rr .aside-card p{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.75}
.rr .aside-card .button{margin-top:20px;width:100%}
.rr .aside-list{margin-top:18px;display:grid;gap:9px}
.rr .aside-list a{font-size:12px;line-height:1.6;color:var(--muted)}
.rr .aside-list a:hover{color:var(--accent)}

.rr .index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
.rr .mockup-flag{margin-top:26px;padding:14px 18px;border:1px dashed var(--accent-border);border-radius:8px;background:var(--accent-wash);color:var(--muted);font-size:11px;line-height:1.7}

@media(max-width:1199px){
  .rr .page-grid{grid-template-columns:minmax(0,1fr) 340px;gap:44px}
  .rr .trust-grid,.rr .step-grid,.rr .tile-grid,  .rr .cost-grid{grid-template-columns:1fr;gap:38px}
}
@media(max-width:1023px){
  .rr .page-grid{grid-template-columns:1fr;gap:44px}
  .rr .page-aside{position:static}
  .rr .area-grid,.rr .guides-grid,.rr .index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rr .header-phone,.rr .header-rule{display:none}
  .rr .band-head{grid-template-columns:minmax(0,1fr) minmax(0,38%);gap:24px 40px}
}
@media(max-width:767px){
  .rr .trust-grid,.rr .step-grid,.rr .tile-grid,.rr .area-grid,.rr .guides-grid,.rr .index-grid,
  .rr .band-head{display:block}
  .rr .band-head-aside{margin-top:18px;padding-bottom:0}
  .rr .band-head .text-link{margin-top:16px}
  .rr .band-head h2 br{display:none}
  .rr .page-head{padding-block:40px 34px}
  .rr .page-lede{font-size:15px}
  .rr .cost-table td:last-child{width:auto}
  .rr .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--header-bg);backdrop-filter:blur(18px)}
  .rr .callbar .button{flex:1;min-height:46px;font-size:12px}
  .rr body.rr{padding-bottom:0}
  .rr .site-footer{padding-bottom:86px}
}

/* A lede under a wide inner-page heading should not wrap to the width of a sidebar note. */
.rr .block .section-description{max-width:58ch}

/* --- Palette preview (mockup only; this page is not part of the site) --- */
.rr .pal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
.rr .pal-card{padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);text-align:left;cursor:pointer;transition:transform var(--t-base),border-color var(--t-fast)}
.rr .pal-card:hover{transform:translateY(-3px);border-color:var(--accent-border)}
.rr .pal-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.rr .pal-swatches{display:flex;height:64px}
.rr .pal-swatches span{flex:1}
.rr .pal-body{padding:16px 18px}
.rr .pal-body h3{font-size:13px;font-weight:750;letter-spacing:-.02em}
.rr .pal-body p{margin-top:5px;color:var(--muted);font-size:11px;line-height:1.6}
.rr .pal-derived{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:30px}
.rr .pal-derived div{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--muted)}
.rr .pal-derived i{width:26px;height:26px;border:1px solid var(--line);border-radius:6px;flex:0 0 auto}
@media(max-width:1023px){.rr .pal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.rr .pal-grid{grid-template-columns:1fr}}

/* --- Brands band: the copy sits with the top of the logo set, not floating beside it --- */
.rr .brands-grid{align-items:start}
.rr .brands-set{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.rr .brands-set .brand-logos{width:100%}
.rr .brand-rest{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 0;font-size:11px;line-height:1.9;color:var(--on-ink-faint)}
.rr .brand-rest span{margin-right:9px}
.rr .brand-rest a{color:var(--on-ink-muted)}
.rr .brand-rest a:not(:last-child)::after{content:"·";margin:0 9px;color:var(--on-ink-faint)}
.rr .brand-rest a:hover{color:var(--surface);text-decoration:underline;text-underline-offset:4px}
.rr .link-on-ink{color:var(--on-ink-accent)}
.rr .link-on-ink:hover{color:var(--surface)}
@media(max-width:1023px){.rr .brands-grid{align-items:start}}

/* --- Page lead frame --- */
.rr .page-figure{margin:0;padding-block:0 0}
.rr .page-figure img{width:100%;height:clamp(240px,36vw,470px);object-fit:cover;object-position:50% 32%;border-radius:0 0 var(--radius) var(--radius)}
/* The subject of these frames sits in the upper middle — a centred crop cuts the one
   detail the page is about, such as the ventilation grille above a built-in's doors. */
@media(max-width:767px){.rr .page-figure img{height:210px}}

/* --- Palette switcher (mockup only; delete with palette-preview.js) --- */
.rr .palsw{position:fixed;left:18px;bottom:18px;z-index:70;font-size:12px}
.rr .palsw-toggle{display:flex;align-items:center;gap:10px;padding:9px 15px 9px 11px;border:1px solid var(--line-strong);border-radius:999px;background:var(--header-bg);backdrop-filter:blur(14px);box-shadow:0 8px 24px var(--shadow-panel);color:var(--ink)}
.rr .palsw-toggle:hover{border-color:var(--accent)}
.rr .palsw-dot{width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--accent-border)}
.rr .palsw-label{display:flex;flex-direction:column;line-height:1.25;font-weight:700;letter-spacing:-.01em;text-align:left}
.rr .palsw-label small{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rr .palsw-list{position:absolute;left:0;bottom:calc(100% + 10px);min-width:206px;padding:8px;border:1px solid var(--line-strong);border-radius:14px;background:var(--header-bg);backdrop-filter:blur(14px);box-shadow:0 14px 40px var(--shadow-panel)}
.rr .palsw-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:12px;font-weight:650;text-align:left}
.rr .palsw-item:hover{background:var(--accent-wash)}
.rr .palsw-item[aria-pressed="true"]{background:var(--accent-wash);color:var(--accent)}
.rr .palsw-chip{width:15px;height:15px;flex:0 0 auto;border:2px solid;border-radius:4px}
.rr .palsw-more{display:block;margin-top:5px;padding:8px 10px 4px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.rr .palsw-more:hover{color:var(--accent)}
@media(max-width:767px){
  .rr .palsw{left:12px;bottom:78px}
  .rr .palsw-label small{display:none}
}
@media print{.rr .palsw{display:none}}

/* ======================================================================
   MATERIAL PASS
   The flatness was three things: cards that were a border and nothing else,
   section grounds that were solid slabs, and inner pages with no material at
   all. Everything below is derived from the ten palette tokens.
   ====================================================================== */

/* --- Cards become surfaces: a lit top edge, a ground that falls away, two shadows --- */
.rr :is(.tile,.area-card,.cause,.guide-card,.aside-card,.step-card,.booking-panel){
  background:linear-gradient(180deg,var(--card-top),var(--card-bottom));
  box-shadow:inset 0 1px 0 var(--edge-hi), var(--lift-1)}
.rr :is(.tile,.area-card,.cause,.guide-card):is(:hover,:focus-within){box-shadow:inset 0 1px 0 var(--edge-hi), var(--lift-2)}
.rr .booking-panel{box-shadow:inset 0 1px 0 var(--edge-hi), var(--lift-2)}

/* --- Section grounds stop being slabs --- */
.rr .trust-band{background:linear-gradient(180deg,var(--ground-wash),var(--tint))}
.rr :is(.cost-section,.page-head){background:linear-gradient(180deg,var(--tint),var(--ground-wash))}

/* --- A material band: photograph, scrim, glass. Used on the process band, the cost
       band, the closing band, and once on every inner page. --- */
.rr .band{position:relative;isolation:isolate;overflow:hidden;background-color:var(--ink)}
.rr .band::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--band-image);background-size:cover;background-position:var(--band-pos,center)}
.rr .band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,var(--scrim-deep) 0%,var(--scrim-mid) 52%,var(--scrim-soft) 100%)}
.rr .band :is(h2,h3,.wordmark){color:var(--surface)}
.rr .band :is(p,li){color:var(--on-ink-muted)}
.rr .band .eyebrow{color:var(--on-ink-accent)}
.rr .band .section-description{color:var(--on-ink-muted)}

/* Glass over a material band — the one surface treatment this site is built on */
.rr .glass{border:1px solid var(--glass-dark-edge);border-radius:var(--radius);
  background:var(--glass-dark);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--glass-dark-edge), 0 18px 46px var(--scrim-mid)}

/* Process band, now material instead of four hairlines on white */
.rr .steps-section{background:none}
.rr .steps-section .step-grid{margin-top:40px}
.rr .steps-section .step-card{padding:26px 24px;border-top:0;border-radius:var(--radius)}
.rr .band .step-card{background:var(--glass-dark);border:1px solid var(--glass-dark-edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--glass-dark-edge)}
.rr .band .step-number{color:var(--on-ink-accent)}

/* --- The four steps: one orchestrated reveal, one quiet hover -------------------------
   This is the ONE place on the page that animates on scroll, and it earns it because the
   content really is a sequence: 01 arrives, then 02, then 03, then 04, in the order a
   visit happens. A fade-and-slide on every section is the default that makes a page look
   generated — eleven of them would say nothing. One, on the only ordered thing here, says
   "these follow each other".

   It runs once, on entry, driven by `animation-timeline:view()` where the browser has it
   and by a one-shot class elsewhere. The cards are not links, so the hover is an
   acknowledgement, not an affordance: the glass lifts a little and the numeral comes up to
   full strength. Nothing moves that the pointer did not ask to move. */
.rr .band .step-card{transition:transform var(--t-base) var(--ease),
  background var(--t-base),border-color var(--t-base),box-shadow var(--t-base)}
.rr .band .step-card:hover{transform:translateY(-3px);
  background:color-mix(in srgb, var(--glass-dark) 82%, var(--surface));
  border-color:color-mix(in srgb, var(--glass-dark-edge) 55%, var(--surface));
  box-shadow:inset 0 1px 0 var(--edge-hi), 0 16px 38px var(--scrim-mid)}
.rr .band .step-card .step-number{transition:color var(--t-base)}
.rr .band .step-card:hover .step-number{color:var(--surface)}

/* --- Entrance -------------------------------------------------------------------------
   The version before this one was scroll-LINKED (`animation-timeline: view()`): elegant,
   reversible, no JavaScript. It was also effectively invisible, and that is a real miss
   rather than a matter of taste. Tying the animation to scroll POSITION means the whole
   range passes in the same handful of frames it takes to scroll past it, so at any normal
   scrolling speed the intermediate states never get drawn — by the time your eye arrives
   the block is already at rest. Measured as working, seen as nothing.

   Triggered, with a fixed duration, plays for its half second however fast you scroll.

   What is kept from the first attempt, because those parts were right:
   * FOURTEEN pixels. Settling into place, not arriving from off-stage.
   * Cards in a row go one after another; the grid is never animated as one rectangle.
   * Photographs resolve in opacity and do not slide.
   * Nothing above the fold waits: not the hero, not the trust band.
   * No section gets a second, different entrance. One idea, used once.

   🔴 The hidden state is applied ONLY under `.js-reveal`, a class the inline script in
   <head> sets before the body paints. No script, no class, nothing hidden — a page whose
   content waits on JavaScript that may not run is the one failure here that costs a
   customer, and it is worth more than the effect. */
@media(prefers-reduced-motion:no-preference){
  .js-reveal .rr :is(
    .band-head, .step-grid>*, .ptile-grid>*, .gtile-grid>*, .tile-grid>*, .index-grid>*,
    .area-col, .service-item, .cause, .guides-aside, .cost-panel, .cost-note, .faq-list,
    .brands-set, .sisters-inner, .page-cta-panel, .booking-copy,
    .family-photo, .cooling-image, .page-figure
  ){opacity:0}
  .js-reveal .rr :is(
    .band-head, .step-grid>*, .ptile-grid>*, .gtile-grid>*, .tile-grid>*, .index-grid>*,
    .area-col, .service-item, .cause, .guides-aside, .cost-panel, .cost-note, .faq-list,
    .brands-set, .sisters-inner, .page-cta-panel, .booking-copy
  ){transform:translateY(14px)}

  /* 🔴 The transition belongs on the HIDDEN state, not on `.is-revealed`. Declared only
     on the end state it measured as an instant jump from 0 to 1 — no animation at all,
     which is exactly the complaint that started this. The property has to be transitionable
     on the element BEFORE the value changes. */
  .js-reveal .rr :is(
    .band-head, .step-grid>*, .ptile-grid>*, .gtile-grid>*, .tile-grid>*, .index-grid>*,
    .area-col, .service-item, .cause, .guides-aside, .cost-panel, .cost-note, .faq-list,
    .brands-set, .sisters-inner, .page-cta-panel, .booking-copy,
    .family-photo, .cooling-image, .page-figure
  ){transition:opacity .52s var(--ease),transform .52s var(--ease)}

  .js-reveal .rr .is-revealed{opacity:1;transform:none}

  /* 🔴 The hero and the trust band are on screen at scroll 0. Anything already in view
     when the page paints must never be part of this — the trust band spent a build
     sitting at 0.39 opacity on first paint. */
  /* 🔴 The hero and the trust band are on screen at scroll 0; nothing there may wait.
     🔴 But this must NOT reach the hero's own images. Written as `.hero *` it forced
     `opacity:1 !important` onto all three hero frames at once and stopped the cross-fade
     dead — that animation IS an opacity animation, and !important beats a keyframe.
     Scoped to the copy, not to the media. */
  .js-reveal .rr .hero-copy *,.js-reveal .rr .trust-band *{opacity:1!important;transform:none!important}
}
}

/* Cost band: the table sits on glass over condensation */
.rr .band .cost-table th{color:var(--on-ink-accent);border-bottom-color:var(--glass-dark-edge)}
.rr .band .cost-table td{border-bottom-color:var(--glass-dark-edge);color:var(--on-ink-muted)}
.rr .band .cost-table td:first-child{color:var(--surface)}
.rr .band .cost-note{background:var(--glass-dark);border-left-color:var(--on-ink-accent);color:var(--on-ink-muted)}
.rr .band .text-link{color:var(--on-ink-accent)}
.rr .band .text-link .ikon{background:var(--on-ink-accent)}
.rr .cost-panel{padding:34px 36px}

/* Closing band keeps its glass panel but gets its own material, so no photograph
   is used twice inside the site. */

/* --- Inner pages: one material moment each, built from the page's own photograph --- */
.rr .page-cta{position:relative;isolation:isolate;overflow:hidden;padding-block:72px;background-color:var(--ink)}
.rr .page-cta::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--band-image);background-size:cover;background-position:center 38%;transform:scale(1.04)}
.rr .page-cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--scrim-deep),var(--scrim-mid) 62%,var(--scrim-soft))}
.rr .page-cta-panel{display:flex;align-items:center;justify-content:space-between;gap:34px;
  padding:36px 40px;border:1px solid var(--glass-dark-edge);border-radius:var(--radius);
  background:var(--glass-dark);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--glass-dark-edge), 0 18px 46px var(--scrim-mid)}
.rr .page-cta-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* A second action on a dark band must not compete with the first: outline only, and it
   borrows the band's own hairline rather than introducing a colour. */
.rr .button-ghost-on-ink{border-color:var(--glass-dark-edge);background:transparent;
  color:var(--surface)}
.rr .button-ghost-on-ink:hover{border-color:var(--on-ink-muted);
  background:color-mix(in srgb, var(--surface) 8%, transparent)}
.rr .button-ghost-on-ink .ikon{background:var(--surface)}
.rr .page-cta-panel h2{color:var(--surface);font-size:clamp(22px,2.4vw,30px);max-width:18ch}
.rr .page-cta-panel p{margin-top:10px;color:var(--on-ink-muted);font-size:13px;line-height:1.7;max-width:46ch}
.rr .page-cta-panel .eyebrow{color:var(--on-ink-accent);margin-bottom:12px}

/* The lead frame now bleeds under the page head instead of stacking below it */
.rr .page-figure{position:relative;margin-top:-28px;background:none}
.rr .page-figure img{border-radius:var(--radius);box-shadow:var(--lift-2)}

/* The aside stops being a tinted rectangle */
.rr .aside-card{border-color:var(--line-strong)}
.rr .aside-card::before{content:"";display:block;height:2px;width:46px;margin-bottom:18px;
  border-radius:2px;background:var(--accent)}

@media(max-width:767px){
  .rr .page-cta{padding-block:48px}
  .rr .page-cta-panel{display:block;padding:28px 24px}
  .rr .page-cta-actions{margin-top:22px;flex-wrap:wrap}
  .rr .page-cta-actions .button{flex:1 1 auto;justify-content:center}
  .rr .page-cta-panel .button{margin-top:22px;width:100%}
  .rr .cost-panel{padding:26px 22px}
}

/* --- The light variant of a material band. -------------------------------------------
   🔴 Every rule the dark band sets is re-set here, not most of them. On the last fleet a
   light band redefined six of nine rules and the other three kept the pilot's accent on
   twenty-four live sites. If a rule exists for `.band`, it exists for `.band-light`. */
.rr .band-light{background-color:var(--tint)}
.rr .band-light::after{background:linear-gradient(105deg,
  color-mix(in srgb, var(--surface) 82%, transparent) 0%,
  color-mix(in srgb, var(--surface) 62%, transparent) 55%,
  color-mix(in srgb, var(--surface) 34%, transparent) 100%)}
.rr .band-light :is(h2,h3,.wordmark){color:var(--ink)}
.rr .band-light :is(p,li){color:var(--muted)}
.rr .band-light .eyebrow{color:var(--accent)}
.rr .band-light .section-description{color:var(--muted)}
.rr .band-light .text-link{color:var(--accent)}
.rr .band-light .text-link .ikon{background:var(--accent)}
.rr .band-light .step-number{color:var(--accent)}
.rr .band-light :is(.glass,.step-card,.cost-note){
  border-color:var(--panel-glass-border);background:var(--panel-glass);
  box-shadow:inset 0 1px 0 var(--edge-hi), 0 16px 40px var(--shadow-panel)}
.rr .band-light :is(.cost-table th){color:var(--accent);border-bottom-color:var(--line-strong)}
.rr .band-light :is(.cost-table td){border-bottom-color:var(--line);color:var(--muted)}
.rr .band-light .cost-table td:first-child{color:var(--ink)}
.rr .band-light .cost-note{border-left-color:var(--accent);color:var(--muted)}

/* A material page head still has to hold a dark headline, and the lead frame below it
   must not be dragged up over a photographic band. */
.rr .page-head.band{border-bottom:0}
.rr .page-head.band + .page-figure{margin-top:0}
.rr .page-head.band .page-lede{color:var(--ink-soft)}
.rr .page-head.band .pill{background:var(--panel-glass);border-color:var(--panel-glass-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* --- Hero scrim ------------------------------------------------------------------
   The headline must not depend on what a generated photograph happens to put behind
   it. A scrim guarantees the copy side reads on any hero, on any palette, and it is
   also where the hero gets its depth. */
.rr .hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(98deg,
      color-mix(in srgb, var(--surface) 74%, transparent) 0%,
      color-mix(in srgb, var(--surface) 62%, transparent) 30%,
      color-mix(in srgb, var(--surface) 26%, transparent) 50%,
      transparent 66%),
    radial-gradient(120% 90% at 12% 45%,
      color-mix(in srgb, var(--surface) 34%, transparent) 0%,
      transparent 62%)}
/* 🔴 A scrim heavy enough to guarantee contrast turns the copy side into a flat panel,
   which is the defect we are removing. It is a veil over the room, not a fill: the
   kitchen stays legible behind the headline and keeps the hero three-dimensional. */
.rr .hero-copy{position:relative}
@media(max-width:767px){
  /* On mobile the photograph sits BELOW the copy, so the scrim has nothing to do. */
  .rr .hero::before{display:none}
}
/* 🔴 The scrim and the photograph both sat at z-index:-1, so DOM order decided which
   won and the image painted over the scrim. The photograph goes one layer down. */
.rr .hero-image{z-index:-2}

/* --- Hero crossfade -----------------------------------------------------------------
   Three renditions of the same scene, dissolving one into the next. No controls, no
   bullets: it is meant to be noticed only if you are looking for it — ten seconds on
   each frame, a three-second dissolve.

   The three run one animation with negative delays rather than three keyframe sets, so
   the timing exists in one place. Delays 0 / -20s / -10s put them in the order they are
   written; with 0 / -10s / -20s the second and third swap, which is easy to get wrong
   and invisible until you sit and watch it. */
.rr .hero-media{position:absolute;inset:0;z-index:-2}
.rr .hero-media .hero-image{position:absolute;inset:0;z-index:auto;width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;opacity:0;
  animation:hero-cross 30s linear infinite}
.rr .hero-media .hero-image:nth-child(1){animation-delay:0s}
.rr .hero-media .hero-image:nth-child(2){animation-delay:-20s}
.rr .hero-media .hero-image:nth-child(3){animation-delay:-10s}
@keyframes hero-cross{
  0%{opacity:1} 23.33%{opacity:1} 33.33%{opacity:0} 90%{opacity:0} 100%{opacity:1}}

/* 🔴 Reduced motion must stop the animation, not just transitions: the existing
   reduce block only cancelled `transition`, which would have left this running. */
@media(prefers-reduced-motion:reduce){
  .rr .hero-media .hero-image{animation:none;opacity:0}
  .rr .hero-media .hero-image:nth-child(1){opacity:1}
}
@media(max-width:767px){
  .rr .hero-media{position:relative;inset:auto;z-index:0;order:2;width:100%;height:320px}
  .rr .hero-media .hero-image{object-position:right center}
}
@media(max-width:479px){.rr .hero-media{height:245px}}

/* --- Photographic cards -------------------------------------------------------------
   These replaced eight identical rounded rectangles carrying the same cube icon five
   times over. An icon repeated across a grid encodes nothing; the photograph of the
   thing does. */
.rr .ptile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px}
.rr .ptile-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:6px}
.rr .ptile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--ink);
  box-shadow:var(--lift-1);transition:transform var(--t-slow),box-shadow var(--t-slow)}
.rr .ptile:hover,.rr .ptile:focus-within{transform:translateY(-4px);box-shadow:var(--lift-2)}
.rr .ptile-media{position:absolute;inset:0;z-index:0}
.rr .ptile-media img{width:100%;height:100%;object-fit:cover;object-position:var(--ptile-pos,50% 42%);
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.rr .ptile:is(:hover,:focus-within) .ptile-media img{transform:scale(1.05)}
.rr .ptile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,var(--scrim-deep) 0%,var(--scrim-deep) 22%,var(--scrim-mid) 48%,transparent 84%)}
/* 🔴 The scrim has to cover the whole text block, not taper into it. The first version
   reached mid-strength where the copy began, and on the one card with a lit interior
   behind it the description dropped under 4.5:1. */
.rr .ptile-body{position:relative;z-index:2;padding:22px 22px 24px}
.rr .ptile-body h3{color:var(--surface);font-size:16px;font-weight:750;line-height:1.35;letter-spacing:-.03em}
.rr .ptile-body p{margin-top:8px;color:var(--on-ink-muted);font-size:12px;line-height:1.65}
/* The accent rule is the only chrome these cards get, and it grows on hover. */
.rr .ptile-body::before{content:"";display:block;width:26px;height:2px;margin-bottom:14px;
  border-radius:2px;background:var(--accent);transition:width var(--t-slow)}
.rr .ptile:is(:hover,:focus-within) .ptile-body::before{width:52px}

@media(max-width:1199px){.rr .ptile-grid,.rr .ptile-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1023px){.rr .ptile-grid,.rr .ptile-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .rr .ptile-grid,.rr .ptile-grid-3{grid-template-columns:1fr;gap:14px}
  .rr .ptile{aspect-ratio:16/10}
}
@media(prefers-reduced-motion:reduce){
  .rr .ptile,.rr .ptile-media img,.rr .ptile-body::before{transition:none}
}

/* --- Problems band, rebuilt ---------------------------------------------------------
   Was three columns centred against each other: a 300px copy column floating in the
   middle of a 700px list, with the photograph orphaned between them belonging to
   neither. Now the photograph is part of the copy column and takes up the slack, so the
   two columns finish level. */
.rr .services-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:72px;align-items:stretch}
.rr .services-copy{display:flex;flex-direction:column}
.rr .services-copy h2{font-size:clamp(28px,3vw,37px);line-height:1.24}
.rr .services-copy .section-description{max-width:38ch}
.rr .services-copy .text-link{margin-top:24px;align-self:flex-start}
.rr .services-copy .cooling-image{flex:1 1 auto;width:100%;height:auto;min-height:260px;max-height:440px;
  margin-top:36px;object-fit:cover;object-position:50% 55%;border-radius:var(--radius);
  box-shadow:inset 0 1px 0 var(--edge-hi),var(--lift-1)}

/* The circled outline around each icon was chrome repeating six times over four icons.
   The icon still encodes cold / water / ice / noise; the circle encoded nothing. */
.rr .service-item{grid-template-columns:28px minmax(0,1fr) 18px;gap:20px;padding:22px 0;align-items:start}
.rr .service-item .service-icon{width:24px;height:24px;margin-top:2px;background:var(--accent)}
.rr .service-item h3{font-size:15px;line-height:1.45}
.rr .service-item p{margin-top:5px;font-size:12.5px;line-height:1.7;max-width:52ch}
.rr .service-item .service-arrow{margin-top:5px}

@media(max-width:1023px){
  .rr .services-grid{grid-template-columns:1fr;gap:40px}
  .rr .services-copy{display:flex}
  .rr .services-copy .cooling-image{max-height:300px;margin-top:28px}
}
@media(max-width:767px){
  .rr .services-copy .cooling-image{max-height:240px}
  .rr .service-item{grid-template-columns:24px minmax(0,1fr);gap:14px}
}
.rr .ptile-meta{display:block;margin-bottom:7px;color:var(--on-ink-accent);font-size:10px;
  font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.rr .guides-aside{margin-top:30px;padding-left:16px;border-left:2px solid var(--accent-border);
  color:var(--muted);font-size:13px;line-height:1.75;max-width:66ch}
.rr .guides-aside a{color:var(--accent);font-weight:650}
.rr .guides-aside a:hover{text-decoration:underline;text-underline-offset:4px}

/* --- Wordmark ------------------------------------------------------------------------
   Was a text string with the TLD painted in the accent colour — a mark that is only type,
   and an accent that competes with every other accent on the page. Now: one drawn mark
   carrying the accent, and the type doing its work through weight and tone instead of
   a second colour. */
.rr .wordmark{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}
.rr .wordmark-mark{flex:0 0 auto;overflow:visible}
.rr .wordmark-mark .wm-body{fill:none;stroke:var(--ink);stroke-width:1.6}
.rr .wordmark-mark .wm-inner path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round}
.rr .wordmark:hover .wm-body{stroke:var(--accent)}
.rr .wordmark-mark .wm-body,.rr .wordmark-mark .wm-inner path{transition:stroke var(--t-base)}
.rr .wordmark-type{display:inline-block;font-size:21px;line-height:1.1;letter-spacing:-.045em}
.rr .wordmark-type b{font-weight:800;color:var(--ink)}
.rr .wordmark-type i{font-style:normal;font-weight:500;color:var(--muted)}

/* On the ink band the whole mark is drawn in the surface, with the accent kept for the
   interior so the appliance still reads. */
.rr .site-footer .wordmark-mark .wm-body{stroke:var(--surface)}
.rr .site-footer .wordmark-mark .wm-inner path{stroke:var(--on-ink-accent)}
.rr .site-footer .wordmark-type b{color:var(--surface)}
.rr .site-footer .wordmark-type i{color:var(--on-ink-muted)}
.rr .site-footer .wordmark:hover .wm-body{stroke:var(--on-ink-accent)}

@media(max-width:1199px){.rr .wordmark-type{font-size:19px}.rr .wordmark{gap:9px}}
@media(max-width:767px){
  .rr .wordmark-type{font-size:17px;letter-spacing:-.04em}
  .rr .wordmark-mark{width:26px;height:26px}
}

/* --- Category cards ------------------------------------------------------------------
   Deliberately NOT the type card. A type card is a plate: the photograph identifies an
   object you own, so the type sits on it. A category is a shelf, so the photograph is a
   band and the surface below carries what is actually inside the section. Same materials,
   same accent rule, different construction — which is the point. */
.rr .gtile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.rr .gtile{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius);background:linear-gradient(180deg,var(--card-top),var(--card-bottom));
  box-shadow:inset 0 1px 0 var(--edge-hi),var(--lift-1);
  transition:transform var(--t-slow),box-shadow var(--t-slow),border-color var(--t-base)}
.rr .gtile:hover,.rr .gtile:focus-within{transform:translateY(-4px);border-color:var(--accent-border);
  box-shadow:inset 0 1px 0 var(--edge-hi),var(--lift-2)}
.rr .gtile-media{position:relative;z-index:0;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.rr .gtile-media img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.rr .gtile:is(:hover,:focus-within) .gtile-media img{transform:scale(1.04)}
.rr .gtile-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 20px}
.rr .gtile-intent{position:relative;z-index:2;display:block;color:var(--accent);font-size:12px;
  font-weight:700;letter-spacing:-.01em}
.rr .gtile h3{margin-top:9px;font-size:17px;font-weight:750;line-height:1.3;letter-spacing:-.035em}
/* Stretched over the whole card, so the card is still one click — but underneath the guide
   titles, which sit above it and are reachable on their own. */
.rr .gtile-link{color:inherit}
.rr .gtile-link::after{content:"";position:absolute;inset:0;z-index:1}
.rr .gtile:is(:hover,:focus-within) .gtile-link{color:var(--accent)}
.rr .gtile-list{margin-top:16px;display:grid}
.rr .gtile-list li{position:relative;z-index:2;border-top:1px solid var(--line)}
.rr .gtile-list a{display:block;padding:9px 0;color:var(--muted);font-size:12px;line-height:1.55;
  transition:color var(--t-fast)}
.rr .gtile-list a:hover{color:var(--accent)}
.rr .gtile-more{position:relative;z-index:2;display:flex;align-items:center;gap:9px;margin-top:auto;
  padding-top:16px;color:var(--accent);font-size:12px;font-weight:700}
.rr .gtile-more:hover{text-decoration:underline;text-underline-offset:4px}
.rr .gtile:is(:hover,:focus-within) .gtile-more .ikon{transform:translateX(3px)}
.rr .gtile-more .ikon{width:16px;height:16px;transition:transform var(--t-base)}

@media(max-width:1023px){.rr .gtile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rr .gtile-grid{grid-template-columns:1fr;gap:16px}}
@media(prefers-reduced-motion:reduce){.rr .gtile,.rr .gtile-media img,.rr .gtile-more .ikon{transition:none}}

/* Only the job name links. Making the whole row a link would turn a price list into a
   menu and put seven accents on one band. */
.rr .cost-table td:first-child a{color:inherit;text-decoration:underline;
  text-decoration-color:var(--accent-border);text-underline-offset:4px;
  text-decoration-thickness:1px;transition:text-decoration-color var(--t-fast),color var(--t-fast)}
.rr .cost-table td:first-child a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.rr .band .cost-table td:first-child a{text-decoration-color:var(--glass-dark-edge)}
.rr .band .cost-table td:first-child a:hover{color:var(--on-ink-accent);text-decoration-color:var(--on-ink-accent)}
.rr .cost-note a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--accent-border)}
.rr .band .cost-note a{color:var(--surface);text-decoration-color:var(--glass-dark-edge)}

/* --- Cost table, squared up ----------------------------------------------------------
   The band column had no width of its own, so "moderate" pushed the notes further right
   than "low" did and every row started somewhere different. Fixed columns fix the ragged
   left edge; and the band is an ordinal scale of four steps, so it is drawn as one
   instead of being set as prose. */
.rr .cost-table{table-layout:fixed;width:100%;border-collapse:collapse}
.rr .cost-table .c-job{width:38%}
.rr .cost-table .c-band{width:20%}
.rr .cost-table .c-note{width:42%}
.rr .cost-table th{padding:0 18px 14px 0;text-align:left;vertical-align:bottom;
  font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.rr .cost-table th:last-child,.rr .cost-table td:last-child{padding-right:0}
.rr .cost-table td{padding:18px 18px 18px 0;vertical-align:top;font-size:13px;line-height:1.6}
.rr .cost-table tbody tr:first-child td{padding-top:16px}
.rr .cost-table td:first-child{font-weight:700;letter-spacing:-.01em}
.rr .cost-table td:last-child{color:var(--muted);width:auto}
/* 🔴 This block is a LATER copy of the cost-table rules above, and `td:last-child` here
   has exactly the same specificity as `.rr .band .cost-table td` — so, coming later in the
   file, it won, and the notes column printed the LIGHT-theme --muted on the dark cost band:
   rgb(86,109,129) on navy, measured at 2.5:1. Nine rows of body text, unreadable, and every
   gate was green because no gate measures contrast. The band overrides have to be restated
   for the same selector, not for the shorter one. */
.rr .band .cost-table td:last-child{color:var(--on-ink-muted)}
.rr .band-light .cost-table td:last-child{color:var(--muted)}

/* 🔴 This meter was first written as `.band`, which is already the material-band section
   class. `.rr .band{display:flex}` would have turned every photographic band on the site
   into a flex row. Same lesson as the fleet before: never name a small component after
   something the layout already calls itself. */
.rr .cost-meter{display:flex;gap:3px;align-items:center}
.rr .cost-meter i{display:block;width:12px;height:4px;border-radius:2px;
  background:color-mix(in srgb, var(--muted) 26%, transparent)}
.rr .cost-meter i.on{background:var(--accent)}
.rr .cost-meter-label{display:block;margin-top:7px;font-size:11px;line-height:1.4;color:var(--muted)}
.rr .band .cost-meter i{background:color-mix(in srgb, var(--surface) 22%, transparent)}
.rr .band .cost-meter i.on{background:var(--on-ink-accent)}
.rr .band .cost-meter-label{color:var(--on-ink-muted)}

@media(max-width:900px){
  .rr .cost-table .c-job{width:44%}
  .rr .cost-table .c-band{width:26%}
  .rr .cost-table .c-note{width:30%}
}
@media(max-width:600px){
  .rr .cost-table .c-note{display:none}
  .rr .cost-table th:last-child,.rr .cost-table td:last-child{display:none}
  .rr .cost-table .c-job{width:60%}
  .rr .cost-table .c-band{width:40%}
}


/* --- The card that closes a grid -----------------------------------------------------
   A five-item grid in four columns leaves three dead cells. This card takes exactly what
   is left of the last row, and the arithmetic is done in CSS rather than baked in:

       span = cols - (n mod cols)

   `--n` comes from the template (how many items the grid holds) and `--cols` is set per
   breakpoint beside the column count it belongs to, so the two can never disagree. When
   the last row is already full, `mod` is 0, the span is the full width, and the card takes
   a row of its own — which is also correct.

   Measured in this browser before relying on it: `span calc()` and CSS `mod()` both work,
   and the formula was checked against every combination of 4-9 items and 4/3/2/1 columns.
   Where `mod()` is missing the card falls back to a full row, which never breaks either. */
.rr .ptile-grid,.rr .gtile-grid{--cols:4}
.rr .ptile-grid-3{--cols:3}
.rr .gtile-grid{--cols:3}
.rr .fill-tile{grid-column:1 / -1;display:flex;flex-direction:column;justify-content:center;
  gap:22px;padding:24px;border:1px dashed var(--accent-border);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--accent-wash),var(--card-bottom));
  box-shadow:inset 0 1px 0 var(--edge-hi)}
@supports (grid-column-end: span calc(4 - mod(5, 4))) {
  .rr .fill-tile{grid-column:auto / span calc(var(--cols) - mod(var(--n), var(--cols)))}
}
.rr .fill-tile h3{margin-top:9px;font-size:17px;font-weight:750;line-height:1.3;letter-spacing:-.035em}
.rr .fill-tile p{margin-top:9px;color:var(--muted);font-size:12px;line-height:1.7;max-width:46ch}
.rr .fill-tile-list{display:flex;flex-wrap:wrap;gap:8px}
.rr .fill-tile-list a{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-size:11px;font-weight:650;color:var(--ink);transition:border-color var(--t-fast),color var(--t-fast)}
.rr .fill-tile-list a:hover{border-color:var(--accent);color:var(--accent)}
.rr .fill-tile-list .ikon{width:13px;height:13px;background:var(--accent)}

@media(max-width:1199px){.rr .ptile-grid,.rr .ptile-grid-3,.rr .gtile-grid{--cols:3}}
@media(max-width:1023px){.rr .ptile-grid,.rr .ptile-grid-3,.rr .gtile-grid{--cols:2}}
@media(max-width:600px){.rr .ptile-grid,.rr .ptile-grid-3,.rr .gtile-grid{--cols:1}}
/* The filler is a link now, so it gets the same lift as the cards around it. */
.rr a.fill-tile{transition:transform var(--t-slow),border-color var(--t-base),box-shadow var(--t-slow)}
.rr a.fill-tile:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:inset 0 1px 0 var(--edge-hi),var(--lift-2)}
.rr .fill-tile-list{display:flex;flex-wrap:wrap;gap:7px}
.rr .fill-tile-list span{padding:5px 11px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);font-size:10px;font-weight:650;color:var(--muted)}
.rr .fill-tile-more{display:flex;align-items:center;gap:9px;color:var(--accent);
  font-size:12px;font-weight:700}
.rr a.fill-tile:hover .fill-tile-more .ikon{transform:translateX(3px)}
.rr .fill-tile-more .ikon{width:16px;height:16px;transition:transform var(--t-base)}




/* --- Service area, set as an index ---------------------------------------------------
   This sits between two grids of cards and used to be a third one, which is why it read
   as a long light stretch rather than a change of pace. A list of places is a list: set
   in columns under a rule it is roughly half the height, twice the density, and it does
   not repeat the shape of its neighbours. The only rule on it is the one that separates
   each column from the heading above — a measure, not a decoration. */
.rr .area-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;margin-top:44px}
/* Flex column with the city list pushed to the bottom: the six notes are 277-342
   characters, so the columns are never the same height, and the lists used to start at six
   different places. They were `truncate(120)` before, which cut them off mid-clause with an
   ellipsis and no "read more" — that reads as an unfinished page, not as a teaser. */
.rr .area-col{position:relative;display:flex;flex-direction:column;padding:22px 0 26px;
  border-top:1px solid var(--line)}
.rr .area-col:nth-child(-n+3){border-top-color:var(--line-strong)}
.rr .area-place{display:flex;flex-direction:column;gap:3px}
.rr .area-link{font-size:20px;font-weight:750;line-height:1.2;letter-spacing:-.04em;color:var(--ink);
  transition:color var(--t-fast)}
.rr .area-link:hover,.rr .area-col:focus-within .area-link{color:var(--accent)}
.rr .area-place span{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}
.rr .area-note{margin-top:12px;color:var(--muted);font-size:12.5px;line-height:1.7}
.rr .area-list{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:4px 0}
.rr .area-list li{font-size:12px;line-height:1.8}
.rr .area-list li:not(:last-child)::after{content:"·";margin:0 8px;color:var(--line-strong)}
.rr .area-list a{color:var(--muted);transition:color var(--t-fast)}
.rr .area-list a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

@media(max-width:1023px){
  .rr .area-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
  .rr .area-col:nth-child(-n+3){border-top-color:var(--line)}
  .rr .area-col:nth-child(-n+2){border-top-color:var(--line-strong)}
}
@media(max-width:600px){
  .rr .area-index{grid-template-columns:1fr}
  .rr .area-col:nth-child(-n+2){border-top-color:var(--line)}
  .rr .area-col:first-child{border-top-color:var(--line-strong)}
}