@charset "utf-8";

/*
Theme Name: Relocia - Moving & Storage HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Dolly Tip & Room Tag
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Accordion
   7.2 Tabs & Arrows
   7.3 Review Badge & Newsletter
   7.4 Service & Photo Cards
   7.5 News, Post, Product & Team Cards
   7.6 Voices, Figures & Lists
   7.7 Day Strip
8. Home 01
   8.1 Hero
   8.2 About
   8.3 Move Day
   8.4 Contact Band & Figures
9. Home 02
   9.1 Full Photo Hero
   9.2 Intro, Slashed Photo & Tiles
   9.3 Unit Scale
   9.4 Units List, Team & Reserve
   9.5 Depot, Story & Voices
10. Home 03
   10.1 Centred Photo Hero
   10.2 Intro & Figures
   10.3 Box Stack
   10.4 Office Band, Rates & Supplies
11. Inner Pages
   11.1 Sidebar & Widgets
   11.2 Rows, Choices & Pages
   11.3 Quantity Stepper
12. Move Pages
   12.1 Estimator
   12.2 Move Dates
   12.3 Booking & Office Wizards
   12.4 Storage Page
   12.5 Rates, Services & Details
   12.6 Crew, Careers & Kit Finder
   12.7 Contact, Account & 404
13. Wizards & Summaries
14. Packing Supplies Shop
   14.1 Shop Grid
   14.2 Product Page
   14.3 Bag, Checkout & Wishlist
   14.4 Toast
15. Blog & Account
   15.1 Blog List
   15.2 Blog Details
   15.3 Account Pages
   15.4 Coming Soon & 404
16. Subheader
17. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --rc-white: #FFFFFF;
  --rc-signal: #F94735;
  --rc-signal-rgb: 249, 71, 53;
  --rc-action: #D63A27;
  --rc-signal-soft: #FF7A68;
  --rc-petrol: #0F313A;
  --rc-petrol-rgb: 15, 49, 58;
  --rc-petrol-2: #0B262E;
  --rc-petrol-3: #174452;
  --rc-mist: #B6CFD6;
  --rc-ink: #232323;
  --rc-ink-rgb: 35, 35, 35;
  --rc-kraft: #C9A270;
  --rc-kraft-2: #B48A55;
  --rc-kraft-3: #DDBF93;
  --rc-paper: #FFFFFF;
  /* semantic: the light page is the default; [data-theme="dark"] is the page after dark */
  --rc-bg: #FCFCFC;
  --rc-bg-rgb: 252, 252, 252;
  --rc-surface: #FFFFFF;
  --rc-surface-rgb: 255, 255, 255;
  --rc-tile: #EFEFEF;
  --rc-tile-2: #F6F6F6;
  --rc-heading: #232323;
  --rc-heading-rgb: 35, 35, 35;
  --rc-text: #454A50;
  --rc-muted: #5E6670;
  --rc-line: #DADADA;
  --rc-line-2: #C4C4C4;
  --rc-field: #F1F1F1;
  --rc-accent-text: #C8321F;
  --rc-leaf: #2E8A57;
  --rc-leaf-text: #237247;
  --rc-shadow: 0 18px 44px rgba(15, 49, 58, 0.1);
  --rc-shadow-lg: 0 30px 70px rgba(15, 49, 58, 0.18);
  --rc-ease: cubic-bezier(0.57, 0.57, 0, 0.97);
  --rc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* type: the base's pair - Inter Tight for every heading, Sora for the copy */
  --rc-ff-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --rc-ff-body: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --rc-fs-h1: clamp(42px, 4.6vw, 78px);
  --rc-fs-h2: clamp(32px, 3.3vw, 58px);
  --rc-fs-h3: clamp(23px, 1.9vw, 32px);
  --rc-fs-h4: 24px;
  --rc-fs-h5: 20px;
  --rc-fs-h6: 17px;
  /* WebGL colours (the corrugated bands) */
  --gl-1: #0F313A;
  --gl-2: #174452;
  --gl-3: #F94735;
  --gl-alpha: 0.55;
}
[data-theme="dark"] {
  --rc-bg: #0A1A1F;
  --rc-bg-rgb: 10, 26, 31;
  --rc-surface: #10262D;
  --rc-surface-rgb: 16, 38, 45;
  --rc-tile: #132D35;
  --rc-tile-2: #0F242B;
  --rc-heading: #F3F6F7;
  --rc-heading-rgb: 243, 246, 247;
  --rc-text: #BCCBD0;
  --rc-muted: #93A6AC;
  --rc-line: rgba(255, 255, 255, 0.1);
  --rc-line-2: rgba(255, 255, 255, 0.2);
  --rc-field: #15313A;
  --rc-accent-text: #FF7A68;
  --rc-leaf: #6BCB93;
  --rc-leaf-text: #6BCB93;
  --rc-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  --rc-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.5);
}
/* bands that stay petrol in both themes: the footer, the lists, the title bands */
.is-night {
  --rc-heading: #FFFFFF;
  --rc-heading-rgb: 255, 255, 255;
  --rc-text: rgba(255, 255, 255, 0.8);
  --rc-muted: #B6CFD6;
  --rc-line: rgba(255, 255, 255, 0.14);
  --rc-line-2: rgba(255, 255, 255, 0.26);
  --rc-accent-text: #FF7A68;
  --rc-leaf-text: #6BCB93;
  --rc-surface: #174452;
  --rc-surface-rgb: 23, 68, 82;
  --rc-tile: rgba(255, 255, 255, 0.06);
  --rc-tile-2: rgba(255, 255, 255, 0.04);
  --rc-field: rgba(255, 255, 255, 0.08);
  position: relative;
  isolation: isolate;
  background-color: var(--rc-petrol);
  color: var(--rc-text);
}
[data-theme="dark"] .is-night {
  background-color: #0D2A32;
}
/* a white panel laid on a photo or a petrol band keeps the light page's ink in both themes */
.rc-on-paper {
  --rc-heading: #232323;
  --rc-heading-rgb: 35, 35, 35;
  --rc-text: #454A50;
  --rc-muted: #5E6670;
  --rc-line: #DADADA;
  --rc-line-2: #C4C4C4;
  --rc-accent-text: #C8321F;
  --rc-surface: #FFFFFF;
  --rc-tile: #EFEFEF;
  --rc-field: #F1F1F1;
  background-color: var(--rc-paper);
  color: var(--rc-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--rc-bg);
  color: var(--rc-text);
  font-family: var(--rc-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--rc-ease), background-color 0.3s var(--rc-ease);
}
a:hover {
  color: var(--rc-accent-text);
}
::selection {
  background: var(--rc-signal);
  color: #FFFFFF;
}
:focus-visible {
  outline: 2px solid var(--rc-signal);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
/* the base's voice: Inter Tight 600 headings, tight and confident, in Title Case */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
h1 {
  font-size: var(--rc-fs-h1);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h2 {
  font-size: var(--rc-fs-h2);
  line-height: 1.07;
  letter-spacing: -0.025em;
}
h3 {
  font-size: var(--rc-fs-h3);
  line-height: 1.16;
}
h4 {
  font-size: var(--rc-fs-h4);
  line-height: 1.22;
}
h5 {
  font-size: var(--rc-fs-h5);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
h6 {
  font-size: var(--rc-fs-h6);
  line-height: 1.32;
  letter-spacing: -0.005em;
}
/* a heading at its outline level that looks like another level (or a span set like one) */
.rc-h1,
.rc-h2,
.rc-h3,
.rc-h4,
.rc-h5,
.rc-h6 {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
}
.rc-h1 {
  font-size: var(--rc-fs-h1);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.rc-h2 {
  font-size: var(--rc-fs-h2);
  line-height: 1.07;
  letter-spacing: -0.025em;
}
.rc-h3 {
  font-size: var(--rc-fs-h3);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.rc-h4 {
  font-size: var(--rc-fs-h4);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.rc-h5 {
  font-size: var(--rc-fs-h5);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.rc-h6 {
  font-size: var(--rc-fs-h6);
  line-height: 1.32;
  letter-spacing: -0.005em;
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.rc-lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--rc-text);
}
.rc-num {
  font-family: var(--rc-ff-display);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.rc-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the base's double chevron: two red arrowheads before a key word or a footer heading */
.rc-chev {
  display: inline-block;
  position: relative;
  width: 1.05em;
  height: 0.62em;
  margin-right: 0.18em;
  vertical-align: 0.06em;
}
.rc-chev::before,
.rc-chev::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.6em;
  height: 100%;
  background: var(--rc-signal);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.rc-chev::before {
  left: 0;
}
.rc-chev::after {
  left: 0.42em;
}
/* the base's striped numerals: big figures drawn in horizontal red bars */
.rc-stripes {
  display: inline-block;
  background: repeating-linear-gradient(180deg, var(--rc-signal) 0 0.07em, transparent 0.07em 0.12em);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--rc-ff-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
/* word masks for the soft title rise: padded on every side so no letter is cut */
.rc-words .w {
  display: inline-block;
  overflow: hidden;
  padding: 0.14em 0.08em 0.2em;
  margin: -0.14em -0.08em -0.2em;
  vertical-align: top;
}
.rc-words .w > span {
  display: inline-block;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-80 {
  padding-top: 80px;
}
.sec-pb-80 {
  padding-bottom: 80px;
}
.rc-bg-tile {
  background-color: var(--rc-tile);
}
.rc-bg-tile-2 {
  background-color: var(--rc-tile-2);
}
.rc-bg-surface {
  background-color: var(--rc-surface);
}
/* the base's chamfers: one corner (or two) cut at 45 degrees */
.rc-chamfer {
  clip-path: polygon(var(--cut, 56px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut, 56px));
}
.rc-chamfer-2 {
  clip-path: polygon(var(--cut, 56px) 0, 100% 0, 100% calc(100% - var(--cut, 56px)), calc(100% - var(--cut, 56px)) 100%, 0 100%, 0 var(--cut, 56px));
}
/* a working panel: forms, summaries, wizards */
.rc-panel {
  padding: 40px 42px;
  background: var(--rc-surface);
  box-shadow: 0 0 0 1px var(--rc-line);
}
.rc-panel.is-night {
  background: var(--rc-petrol);
  box-shadow: none;
}
.rc-panel h2,
.rc-panel h3 {
  margin-bottom: 20px;
}
/* frosted panel: a form laid on a photograph, the photo blurred through it */
.rc-frost {
  --rc-heading: #FFFFFF;
  --rc-text: rgba(255, 255, 255, 0.86);
  --rc-muted: rgba(255, 255, 255, 0.76);
  --rc-line: rgba(255, 255, 255, 0.22);
  --rc-field: rgba(255, 255, 255, 0.12);
  --rc-accent-text: #FF9A8C;
  position: relative;
  padding: 44px 40px;
  background: rgba(15, 49, 58, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: var(--rc-text);
}
/* photo band: one style everywhere (cover photo under a petrol wash from the copy side, white copy) */
.rc-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--rc-petrol);
  --rc-heading: #FFFFFF;
  --rc-text: rgba(255, 255, 255, 0.86);
  --rc-muted: rgba(255, 255, 255, 0.74);
  --rc-accent-text: #FF9A8C;
  --rc-line: rgba(255, 255, 255, 0.2);
  --rc-line-2: rgba(255, 255, 255, 0.32);
  --rc-tile: rgba(255, 255, 255, 0.08);
  --rc-field: rgba(255, 255, 255, 0.1);
  color: var(--rc-text);
}
.rc-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 38, 46, 0.92) 0%, rgba(11, 38, 46, 0.7) 44%, rgba(11, 38, 46, 0.18) 100%);
}
.rc-photo-band.is-centre::after {
  background: rgba(11, 38, 46, 0.58);
}

/*----- 1.3 Section Titles -----*/
/* eyebrow (the double chevron + a short line) -> the Inter Tight title -> a quiet lead */
.rc-title {
  margin-bottom: 60px;
}
.rc-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
.rc-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 23px;
  height: 11px;
  margin-right: 11px;
  background: var(--rc-signal);
  /* two arrowheads in one outline, joined by a zero-width bridge */
  clip-path: polygon(0 0, 6px 0, 12px 5.5px, 6px 11px, 0 11px, 6px 5.5px, 17px 5.5px, 11px 0, 17px 0, 23px 5.5px, 17px 11px, 11px 11px, 17px 5.5px, 6px 5.5px);
}
.rc-title h2,
.rc-title .rc-h2 {
  max-width: 900px;
}
.rc-title .rc-lead {
  max-width: 620px;
  margin: 22px 0 0;
}
.rc-title.text-center h2,
.rc-title.text-center .rc-h2,
.rc-title.text-center .rc-lead {
  margin-left: auto;
  margin-right: auto;
}
.rc-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.rc-title.is-split .rc-lead {
  max-width: 480px;
  margin: 0;
}
/* the base's ruled head: the title on the left, a button on the right, a hairline under both */
.rc-title.is-ruled {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rc-line-2);
}

/*----- 1.4 Buttons & Links -----*/
/* the base's pill: the action red face, a white label, an arrow; house physics on hover - the face turns petrol,
   the arrow slides out and its twin slides in */
.rc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 32px;
  border: 0;
  border-radius: 80px;
  background: var(--rc-action);
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.4s var(--rc-ease), color 0.4s var(--rc-ease), transform 0.4s var(--rc-ease), box-shadow 0.4s var(--rc-ease);
}
.rc-btn i {
  position: relative;
  font-size: 13px;
  transition: transform 0.4s var(--rc-ease);
}
.rc-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -26px;
  top: 0;
  opacity: 0;
  transition: transform 0.4s var(--rc-ease), opacity 0.3s ease;
}
.rc-btn:hover {
  background: var(--rc-petrol);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 49, 58, 0.22);
}
.rc-btn:hover i.fa-arrow-right {
  transform: translateX(26px);
}
.rc-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.rc-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
.is-night .rc-btn:hover,
.rc-photo-band .rc-btn:hover,
.rc-frost .rc-btn:hover,
[data-theme="dark"] .rc-btn:hover {
  background: #FFFFFF;
  color: var(--rc-petrol);
}
/* tonal: a grey face, ink label, a red arrow (secondary buttons) */
.rc-btn.is-tonal {
  background: var(--rc-tile);
  color: var(--rc-heading);
}
.rc-btn.is-tonal i {
  color: var(--rc-accent-text);
}
.rc-bg-tile .rc-btn.is-tonal {
  background: var(--rc-surface);
}
.rc-btn.is-tonal:hover {
  background: var(--rc-petrol);
  color: #FFFFFF;
}
.rc-btn.is-tonal:hover i {
  color: #FFFFFF;
}
.is-night .rc-btn.is-tonal,
.rc-photo-band .rc-btn.is-tonal,
.rc-frost .rc-btn.is-tonal {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.is-night .rc-btn.is-tonal i,
.rc-photo-band .rc-btn.is-tonal i,
.rc-frost .rc-btn.is-tonal i {
  color: #FF9A8C;
}
.is-night .rc-btn.is-tonal:hover,
.rc-photo-band .rc-btn.is-tonal:hover,
.rc-frost .rc-btn.is-tonal:hover {
  background: #FFFFFF;
  color: var(--rc-petrol);
}
.is-night .rc-btn.is-tonal:hover i,
.rc-photo-band .rc-btn.is-tonal:hover i {
  color: var(--rc-accent-text);
}
.rc-on-paper .rc-btn.is-tonal {
  background: #EFEFEF;
  color: #232323;
}
.rc-btn.is-sm {
  min-height: 44px;
  padding: 0 22px;
  font-size: 14.5px;
}
.rc-btn.is-block {
  width: 100%;
}
.rc-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* the base's quiet "View More ->" text link */
.rc-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 600;
}
.rc-more i {
  color: var(--rc-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--rc-ease);
}
.rc-more:hover {
  color: var(--rc-accent-text);
}
.rc-more:hover i {
  transform: translateX(6px);
}
.rc-link {
  color: var(--rc-accent-text);
  font-weight: 600;
}
.rc-link:hover {
  color: var(--rc-heading);
}
.rc-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

/*----- 1.5 Forms -----*/
/* tonal fields (no outlines): a grey face, a red icon at the left, the label above */
.rc-field {
  position: relative;
  margin-bottom: 18px;
}
.rc-flabel {
  display: block;
  margin-bottom: 8px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.rc-input {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 14px 18px 14px 48px;
  border: 0;
  border-radius: 0;
  background: var(--rc-field);
  color: var(--rc-heading);
  font-family: var(--rc-ff-body);
  font-size: 15px;
  line-height: 1.4;
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.rc-bg-tile .rc-input {
  background: var(--rc-surface);
}
textarea.rc-input {
  min-height: 150px;
  resize: vertical;
}
.rc-input::placeholder {
  color: var(--rc-muted);
  opacity: 1;
}
.rc-input:focus {
  outline: 0;
  box-shadow: inset 0 -2px 0 var(--rc-signal);
}
.rc-input.is-invalid {
  box-shadow: inset 0 -2px 0 #C8321F;
}
.rc-input[type="date"] {
  color-scheme: light;
}
/* a native select keeps the field's face, with a drawn chevron */
select.rc-input {
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--rc-heading) 50%), linear-gradient(135deg, var(--rc-heading) 50%, transparent 50%);
  background-position: calc(100% - 23px) 50%, calc(100% - 18px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select.rc-input option {
  color: #232323;
}
[data-theme="dark"] .rc-input[type="date"],
.is-night .rc-input[type="date"],
.rc-frost .rc-input[type="date"] {
  color-scheme: dark;
}
[data-theme="dark"] .rc-on-paper .rc-input[type="date"] {
  color-scheme: light;
}
/* a native select keeps the field's face, with a drawn chevron */
select.rc-input {
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--rc-heading) 50%), linear-gradient(135deg, var(--rc-heading) 50%, transparent 50%);
  background-position: calc(100% - 23px) 50%, calc(100% - 18px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select.rc-input option {
  color: #232323;
}
.rc-field > i {
  position: absolute;
  left: 18px;
  bottom: 20px;
  z-index: 1;
  color: var(--rc-accent-text);
  font-size: 14px;
  pointer-events: none;
}
.rc-field.is-area > i {
  bottom: auto;
  top: 51px;
}
.rc-field.is-bare .rc-input {
  padding-left: 18px;
}
.form-status {
  min-height: 24px;
  margin-top: 14px;
  font-size: 15px;
}
.form-status.is-ok {
  color: var(--rc-leaf-text);
}
.form-status.is-error {
  color: var(--rc-accent-text);
}
.rc-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
}
.rc-check input {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--rc-action);
}
/* a native range in the brand colours */
.rc-range {
  width: 100%;
  height: 26px;
  accent-color: var(--rc-action);
  cursor: pointer;
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rc-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rc-tile);
  color: var(--rc-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--rc-ease);
}
.rc-social a:hover {
  background: var(--rc-signal);
  color: #FFFFFF;
  transform: translateY(-3px);
}
.is-night .rc-social a {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
/* a round portrait beside a name */
.rc-face {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
/* overlapping faces + a count */
.rc-faces {
  display: inline-flex;
  align-items: center;
}
.rc-faces img {
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--rc-bg);
  border-radius: 50%;
  object-fit: cover;
}
.rc-faces img:first-child {
  margin-left: 0;
}
.rc-faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--rc-bg);
  border-radius: 50%;
  background: var(--rc-action);
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 12.5px;
  font-weight: 700;
}
.rc-bg-tile .rc-faces img,
.rc-bg-tile .rc-faces .more {
  border-color: var(--rc-tile);
}
.is-night .rc-faces img,
.is-night .rc-faces .more,
.rc-photo-band .rc-faces img,
.rc-photo-band .rc-faces .more,
.rc-frost .rc-faces img,
.rc-frost .rc-faces .more {
  border-color: var(--rc-petrol);
}
.rc-avatars {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.rc-avatars .txt {
  display: flex;
  flex-direction: column;
  color: var(--rc-muted);
  font-size: 14px;
  line-height: 1.4;
}
.rc-avatars .txt b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 16px;
  font-weight: 600;
}
.rc-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--rc-action);
  color: #FFFFFF;
  font-size: 20px;
  box-shadow: 0 0 0 12px rgba(var(--rc-signal-rgb), 0.22);
  transition: transform 0.4s var(--rc-ease), background-color 0.4s ease, color 0.4s ease;
}
.rc-play i {
  margin-left: 4px;
}
.rc-play:hover {
  background: #FFFFFF;
  color: var(--rc-action);
  transform: scale(1.06);
}
/* progress line: filled by the engines */
.rc-meter {
  position: relative;
  height: 4px;
  background: var(--rc-line);
}
.rc-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--rc-signal);
  transition: width 1.2s var(--rc-ease-out);
}
.rc-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--rc-signal);
  font-size: 12px;
}
/* the base's red date tag and small status tags */
.rc-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.rc-tag.is-leaf {
  color: var(--rc-leaf-text);
}
.rc-tag.is-muted {
  color: var(--rc-muted);
}
.rc-datetag {
  display: inline-flex;
  font-family: var(--rc-ff-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.rc-datetag span {
  padding: 8px 10px;
  background: var(--rc-action);
  color: #FFFFFF;
}
.rc-datetag span + span {
  margin-left: 1px;
}
/* a status dot before "Open now" lines */
.rc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--rc-muted);
  vertical-align: middle;
}
.is-open .rc-dot,
.rc-dot.is-open {
  background: var(--rc-leaf);
  box-shadow: 0 0 0 4px rgba(46, 138, 87, 0.18);
}
.rc-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--rc-petrol);
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: var(--rc-shadow-lg);
  transform: translate(-50%, 140%);
  transition: transform 0.5s var(--rc-ease-out);
}
.rc-toast i {
  color: var(--rc-signal-soft);
}
.rc-toast.is-shown {
  transform: translate(-50%, 0);
}
.rc-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--rc-action);
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--rc-ease-out), background-color 0.3s ease;
}
.rc-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.rc-back-top:hover {
  background: var(--rc-petrol);
  color: #FFFFFF;
}
/* WebGL layers sit under a section's content */
.rc-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.rc-gl.is-on {
  opacity: 1;
}
/* illustrated icons in two inks: petrol lines on the light page, white lines on petrol and after dark */
.rc-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
.rc-ico img {
  width: 100%;
  height: 100%;
}
.rc-ico .ico-night,
[data-theme="dark"] .rc-ico .ico-day,
.is-night .rc-ico .ico-day,
.rc-photo-band .rc-ico .ico-day,
.rc-frost .rc-ico .ico-day {
  display: none;
}
[data-theme="dark"] .rc-ico .ico-night,
.is-night .rc-ico .ico-night,
.rc-photo-band .rc-ico .ico-night,
.rc-frost .rc-ico .ico-night {
  display: block;
}
[data-theme="dark"] .rc-on-paper .rc-ico .ico-day {
  display: block;
}
[data-theme="dark"] .rc-on-paper .rc-ico .ico-night {
  display: none;
}
/* label / value rows (hours, rates, figures) */
.rc-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rc-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rc-line);
}
.rc-rows li > span {
  color: var(--rc-text);
}
.rc-rows li > b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
  text-align: right;
}
.rc-rows li.is-today > span,
.rc-rows li.is-today > b {
  color: var(--rc-accent-text);
}
/* a small product beside its name and price (sidebars, the article) */
.product-mini {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rc-line);
  color: var(--rc-heading);
}
.product-mini img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: #EFEFEF;
}
.product-mini > span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.product-mini small {
  color: var(--rc-muted);
  font-size: 13px;
}
.product-mini b {
  font-family: var(--rc-ff-display);
  font-size: 16px;
  font-weight: 600;
}
.product-mini em {
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
}
/* the base's red marquee band: big white words and arrows running */
.rc-marquee {
  position: relative;
  overflow: hidden;
  padding: 22px 0;
  background: var(--rc-signal);
  color: #FFFFFF;
}
.rc-marquee .mq-track {
  display: flex;
  width: max-content;
  animation: rc-marquee 38s linear infinite;
}
.rc-marquee .mq-item {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  padding-right: 38px;
  font-family: var(--rc-ff-display);
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.rc-marquee .mq-item i {
  font-size: 0.62em;
  transform: rotate(-45deg);
}
@keyframes rc-marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rc-marquee .mq-track {
    animation: none;
  }
}
/* the hairline tile grid: tiles edge to edge, 1px rules between them */
.rc-tiles {
  display: grid;
  gap: 1px;
  background: var(--rc-line);
  box-shadow: 0 0 0 1px var(--rc-line);
}
.rc-tiles > * {
  background: var(--rc-bg);
}
.rc-bg-tile .rc-tiles > * {
  background: var(--rc-tile);
}

/*----- 1.7 Dolly Tip & Room Tag -----*/
/* Dolly Tip: cards are rolled in leaning back on a hand truck and tipped upright (main.js arms them; nothing is hidden
   by CSS); the room tag: a moving label slides in on the card's corner on hover */
.rc-dolly {
  will-change: transform;
}
.rc-roomtag {
  position: relative;
  overflow: hidden;
}
.rc-roomtag::after {
  content: attr(data-room);
  position: absolute;
  top: 16px;
  right: 0;
  z-index: 6;
  padding: 7px 14px 7px 22px;
  background:
    radial-gradient(circle at 10px 50%, transparent 3.5px, var(--rc-kraft-3) 4px) no-repeat;
  color: #3B2A14;
  font-family: var(--rc-ff-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(15, 49, 58, 0.18);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  transform: translateX(105%);
  opacity: 0;
  transition: transform 0.5s var(--rc-ease-out), opacity 0.3s ease;
  pointer-events: none;
}
.rc-roomtag:hover::after,
.rc-roomtag:focus-within::after {
  transform: translateX(0);
  opacity: 1;
}
@media (hover: none) {
  .rc-roomtag::after {
    display: none;
  }
}

/*======================
2. Preloader
========================*/
/* Box Tape: a kraft box drawn in CSS 3D (five faces and a top whose two flaps fold shut), one strip of red tape along
   the seam and down the side, the box sliding away (main.js plays it once a session) */
.rc-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--rc-bg);
}
.pre-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pre-scene {
  position: relative;
  width: 260px;
  height: 250px;
  perspective: 1300px;
  perspective-origin: 50% 20%;
}
.pre-box {
  position: absolute;
  left: 0;
  top: 52px;
  width: 260px;
  height: 180px;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(-36deg);
}
.pre-face,
.pre-top {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.pre-face {
  width: 260px;
  height: 180px;
  background-color: #C9A270;
  /* the faint flutes of corrugated board */
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0.03) 2px 5px);
}
.pre-face.is-front {
  transform: translateZ(90px);
  box-shadow: inset 0 0 0 1px rgba(110, 78, 42, 0.25);
}
.pre-face.is-front img {
  position: absolute;
  left: 30px;
  top: 52px;
  width: 74px;
  height: auto;
  opacity: 0.85;
}
.pre-up {
  position: absolute;
  right: 26px;
  top: 22px;
  display: flex;
  gap: 4px;
  color: #3A4A4E;
  font-size: 18px;
  opacity: 0.75;
}
.pre-face.is-back {
  transform: rotateY(180deg) translateZ(90px);
  background-color: #A8804C;
}
.pre-face.is-left,
.pre-face.is-right {
  left: 40px;
  width: 180px;
}
.pre-face.is-right {
  transform: rotateY(90deg) translateZ(130px);
  background-color: #AE844F;
  box-shadow: inset 0 0 0 1px rgba(110, 78, 42, 0.25);
}
.pre-face.is-left {
  transform: rotateY(-90deg) translateZ(130px);
  background-color: #AE844F;
}
.pre-face.is-bottom {
  transform: rotateX(-90deg) translateZ(90px);
  background-color: #8E6A3C;
}
.pre-top {
  width: 260px;
  height: 180px;
  background: #6B4C29;
  transform-style: preserve-3d;
  transform: rotateX(90deg) translateZ(90px);
}
.pre-flap {
  position: absolute;
  left: 0;
  display: block;
  width: 260px;
  height: 90px;
  background: #DEC196;
  box-shadow: inset 0 0 0 1px rgba(110, 78, 42, 0.28);
}
.pre-flap.is-back {
  top: 0;
  transform-origin: 50% 0;
}
.pre-flap.is-front {
  top: 90px;
  transform-origin: 50% 100%;
  background: #E3C89F;
}
.pre-tape {
  position: absolute;
  display: block;
  overflow: hidden;
  background: #F94735;
}
.pre-tape.is-top {
  left: -3px;
  right: -3px;
  top: 74px;
  height: 32px;
  transform-origin: 0 50%;
  background: linear-gradient(180deg, #FF6F5E, #F94735 40%, #E8402F);
}
.pre-tape.is-side {
  left: 74px;
  top: -1px;
  width: 32px;
  height: 66px;
  transform-origin: 50% 0;
  background: #D63A27;
}
.tape-print {
  display: block;
  padding: 7px 0 0 10px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--rc-ff-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.pre-shadow {
  position: absolute;
  left: 50%;
  top: 226px;
  width: 360px;
  height: 46px;
  margin-left: -180px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 49, 58, 0.22), rgba(15, 49, 58, 0));
}
.pre-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 46px;
}
.pre-word img {
  height: 40px;
  width: auto;
}
.pre-word span {
  color: var(--rc-muted);
  font-size: 13.5px;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .pre-word img {
  filter: brightness(0) invert(1);
}

/*======================
3. Header
========================*/
/* Relocia's header, in two moods from the base: "solid" is the white bar under a petrol top bar; "over" lies on the
   first photo or petrol band with white ink. Both turn into the white bar once the page scrolls. At the far right the
   base's red block holds the menu mark at every width. */
.rc-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--rc-surface);
  --hd-ink: var(--rc-heading);
  --hd-hover: var(--rc-accent-text);
  --hd-icon: var(--rc-tile);
  --hd-line: var(--rc-line);
}
.rc-header .wide {
  display: flex;
  align-items: center;
  padding: 0 0 0 40px;
}
.rc-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.rc-logo img {
  height: 42px;
  width: auto;
}
.rc-logo .logo-light,
[data-theme="dark"] .rc-logo .logo-main {
  display: none;
}
[data-theme="dark"] .rc-logo .logo-light {
  display: block;
}
.header-style-over:not(.is-sticky) .rc-logo .logo-main {
  display: none;
}
.header-style-over:not(.is-sticky) .rc-logo .logo-light {
  display: block;
}
.header-style-over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.header-style-over:not(.is-sticky) {
  --hd-bar: transparent;
  --hd-ink: #FFFFFF;
  --hd-hover: #FF9A8C;
  --hd-icon: rgba(255, 255, 255, 0.12);
  --hd-line: rgba(255, 255, 255, 0.2);
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 42px;
  background: var(--rc-petrol);
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  overflow: visible;
  transition: height 0.4s var(--rc-ease-out), opacity 0.3s ease;
}
.header-style-over:not(.is-sticky) .header-top {
  background: rgba(11, 38, 46, 0.42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
  padding-right: 40px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-top a:hover {
  color: #FFFFFF;
}
.header-top i {
  margin-right: 9px;
  color: var(--rc-signal-soft);
  font-size: 12px;
}
.rc-open {
  display: inline-flex;
  align-items: center;
}
.header-top .rc-dot {
  background: rgba(255, 255, 255, 0.5);
}
.header-top .is-open .rc-dot {
  background: #6BCB93;
  box-shadow: 0 0 0 4px rgba(107, 203, 147, 0.22);
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 86px;
  gap: 40px;
}
.header-right {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 26px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--rc-signal);
  color: #FFFFFF;
}
.header-icon .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--rc-action);
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.rc-theme-toggle .ti-sun,
[data-theme="dark"] .rc-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .rc-theme-toggle .ti-sun {
  display: inline-block;
}
/* the base's "+ Track Your Order" place, behind a hairline */
.header-quote {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px;
  border-left: 1px solid var(--hd-line);
  color: var(--hd-ink);
  font-family: var(--rc-ff-display);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.header-quote i {
  font-size: 12px;
  transition: transform 0.4s var(--rc-ease-out);
}
.header-quote:hover {
  color: var(--hd-hover);
}
.header-quote:hover i {
  transform: rotate(90deg);
}
/* the base's red block with its two-line menu mark */
.rc-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 86px;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: var(--rc-signal);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.rc-menu-toggle span {
  display: block;
  width: 30px;
  height: 2px;
  background: #FFFFFF;
  transition: width 0.3s var(--rc-ease-out), transform 0.3s var(--rc-ease-out);
}
.rc-menu-toggle span:nth-child(2) {
  width: 20px;
  transform: translateX(5px);
}
.rc-menu-toggle:hover {
  background: var(--rc-petrol);
}
.rc-menu-toggle:hover span:nth-child(2) {
  width: 30px;
  transform: none;
}

/*----- 3.3 Main Menu -----*/
.rc-nav > ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rc-nav li {
  position: relative;
}
.rc-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 31px 0;
  color: var(--hd-ink);
  font-family: var(--rc-ff-display);
  font-size: 16.5px;
  font-weight: 600;
}
.rc-nav > ul > li > a i {
  font-size: 9px;
  opacity: 0.55;
  transition: transform 0.3s var(--rc-ease-out);
}
/* the base marks the page's own menu item with the red double chevron */
.rc-nav > ul > li.active > a::before {
  content: "";
  width: 15px;
  height: 8px;
  margin-right: 2px;
  background: var(--rc-signal);
  clip-path: polygon(0 0, 4px 0, 8px 4px, 4px 8px, 0 8px, 4px 4px, 11px 4px, 7px 0, 11px 0, 15px 4px, 11px 8px, 7px 8px, 11px 4px, 4px 4px);
}
.rc-nav > ul > li:hover > a,
.rc-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.rc-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.rc-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -28px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  background: var(--rc-surface);
  box-shadow: var(--rc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--rc-ease-out), transform 0.35s var(--rc-ease-out), visibility 0.3s;
}
.rc-nav .sub-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--rc-signal);
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.rc-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.rc-nav li:hover > .sub-menu,
.rc-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rc-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 28px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 15.5px;
  font-weight: 500;
  transition: color 0.3s var(--rc-ease-out), padding 0.35s var(--rc-ease-out);
}
.rc-nav .sub-menu a i {
  font-size: 9px;
  color: var(--rc-muted);
}
.rc-nav .sub-menu li:hover > a,
.rc-nav .sub-menu li.active > a {
  padding-left: 36px;
  color: var(--rc-accent-text);
}
.rc-nav .sub-menu .sub-menu {
  top: -16px;
  left: 100%;
}
.rc-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Home Mega Menu -----*/
.rc-nav .has-mega {
  position: static;
}
.rc-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(980px, calc(100vw - 60px));
  padding: 30px;
  background: var(--rc-surface);
  box-shadow: var(--rc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--rc-ease-out), transform 0.35s var(--rc-ease-out), visibility 0.3s;
}
.rc-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.rc-nav .mega-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--rc-signal);
}
.rc-nav .has-mega:hover > .mega-menu,
.rc-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--rc-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--rc-tile);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--rc-ease-out);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-size: 14px;
  font-weight: 600;
}
.mega-meta b {
  font-family: var(--rc-ff-display);
  font-size: 17px;
  font-weight: 600;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--rc-accent-text);
}

/*----- 3.5 Sticky Header -----*/
.rc-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: rc-header-in 0.6s var(--rc-ease-out) both;
}
.rc-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.rc-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(15, 49, 58, 0.12);
}
.rc-header.is-sticky .header-main .wide {
  height: 74px;
}
.rc-header.is-sticky .rc-nav > ul > li > a {
  padding: 25px 0;
}
.rc-header-spacer {
  display: none;
}
.rc-header-spacer.is-on {
  display: block;
}
@keyframes rc-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
/* a viewport-sized frame clips the parked panel, so it never widens the page */
.rc-oc-frame {
  position: fixed;
  inset: 0;
  z-index: 2100;
  overflow: hidden;
  pointer-events: none;
}
.rc-offcanvas {
  position: absolute;
  pointer-events: auto;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--rc-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--rc-ease-out), box-shadow 0.6s var(--rc-ease-out);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.rc-offcanvas.open {
  box-shadow: var(--rc-shadow-lg);
  transform: none;
}
.rc-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(11, 38, 46, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.rc-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--rc-line);
}
.offcanvas-head .rc-logo img {
  height: 40px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--rc-tile);
  color: var(--rc-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--rc-ease-out);
}
.offcanvas-close:hover {
  background: var(--rc-signal);
  color: #FFFFFF;
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--rc-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--rc-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--rc-ease-out);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--rc-line);
  color: var(--rc-text);
  font-size: 15.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--rc-signal);
  color: var(--rc-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 26px;
  font-weight: 600;
}
.oc-mail {
  color: var(--rc-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.rc-select {
  position: relative;
}
.rc-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.rc-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 1px solid var(--rc-line-2);
  background: var(--rc-surface);
  font-size: 15px;
  text-align: left;
  color: var(--rc-heading);
  transition: border-color 0.3s var(--rc-ease-out);
}
.rc-select.is-open .select-button,
.rc-select .select-button:hover {
  border-color: var(--rc-signal);
}
.rc-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rc-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--rc-accent-text);
  transition: transform 0.35s var(--rc-ease-out);
}
.rc-select.is-open .select-button i {
  transform: rotate(180deg);
}
.rc-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--rc-surface);
  border-top: 2px solid var(--rc-signal);
  box-shadow: var(--rc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--rc-ease-out), transform 0.3s var(--rc-ease-out), visibility 0.3s;
}
.rc-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--rc-signal);
  transform: translateY(-10px);
}
.rc-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rc-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--rc-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--rc-ease-out), color 0.2s var(--rc-ease-out);
}
.rc-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--rc-accent-text);
}
.rc-select .select-option .option-meta.is-none {
  color: var(--rc-muted);
}
.rc-select .select-option.is-focused,
.rc-select .select-option:hover {
  background-color: var(--rc-tile);
}
.rc-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.rc-select .select-option.is-selected {
  color: var(--rc-accent-text);
}
.rc-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--rc-accent-text);
}
.rc-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: var(--rc-tile);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.rc-lang {
  position: relative;
  flex-shrink: 0;
}
.rc-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--rc-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rc-lang .lang-btn:hover,
.rc-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--rc-petrol);
}
.rc-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.rc-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.rc-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.rc-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--rc-tile);
  color: var(--rc-heading);
}
.rc-lang.is-icon .lang-btn:hover,
.rc-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--rc-petrol);
  color: #FFFFFF;
}
.rc-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 2px;
  background: var(--rc-surface);
  box-shadow: var(--rc-shadow-lg);
  font-family: var(--rc-ff-body);
  text-align: start;
  white-space: normal;
}
.rc-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.rc-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.rc-lang .lang-menu[hidden] {
  display: none;
}
.rc-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--rc-muted);
}
.rc-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rc-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--rc-line);
}
.rc-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--rc-heading);
  font-family: var(--rc-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.rc-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--rc-muted);
}
.rc-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--rc-accent-text);
  opacity: 0;
}
.rc-lang .lang-item:hover,
.rc-lang .lang-item[aria-pressed="true"] {
  background: var(--rc-tile);
}
.rc-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.rc-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.rc-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--rc-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--rc-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Accordion -----*/
.rc-accordion .acc-item {
  border-bottom: 1px solid var(--rc-line);
}
.rc-accordion .acc-item:first-child {
  border-top: 1px solid var(--rc-line);
}
.rc-accordion .acc-title {
  margin: 0;
  font-size: inherit;
}
.rc-accordion .acc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease;
}
.rc-accordion .acc-head i {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--rc-heading);
  font-size: 16px;
  transition: transform 0.35s var(--rc-ease-out), color 0.3s ease;
}
.rc-accordion .acc-item.is-open .acc-head i {
  transform: rotate(45deg);
  color: var(--rc-accent-text);
}
.rc-accordion .acc-body {
  padding: 0 50px 26px 0;
}
/* the base's ruled service table: a name column, a line column, a + at the end */
.rc-accordion.is-table .acc-head {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 30px;
  font-size: 20px;
}
.rc-accordion.is-table .acc-head small {
  color: var(--rc-text);
  font-family: var(--rc-ff-body);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
}
.rc-accordion.is-table .acc-body {
  padding-left: calc((100% - 62px) * 0.9 / 2.3 + 16px);
  padding-right: 46px;
}
.acc-thead {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 30px;
  gap: 16px;
  padding-bottom: 14px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 600;
}

/*----- 7.2 Tabs & Arrows -----*/
.rc-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 50px;
}
.rc-filter-tabs button {
  height: 46px;
  padding: 0 22px;
  border-radius: 80px;
  background: var(--rc-tile);
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rc-bg-tile .rc-filter-tabs button {
  background: var(--rc-surface);
}
.rc-filter-tabs button:hover {
  color: var(--rc-accent-text);
}
.rc-filter-tabs button.is-active {
  background: var(--rc-petrol);
  color: #FFFFFF;
}
.rc-filter-tabs.is-sm {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 22px;
}
.rc-filter-tabs.is-sm button {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}
.is-hidden,
.is-unmatched {
  display: none !important;
}
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--rc-tile);
  color: var(--rc-heading);
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.slider-arrow:hover {
  background: var(--rc-signal);
  color: #FFFFFF;
}
.rc-bg-tile .slider-arrow {
  background: var(--rc-surface);
}
.is-night .slider-arrow,
.rc-photo-band .slider-arrow {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.rail-wrap {
  position: relative;
}
.rail-arrow {
  position: absolute;
  top: 38%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--rc-surface);
  color: var(--rc-heading);
  font-size: 15px;
  box-shadow: var(--rc-shadow);
  transform: translateY(-50%);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rail-arrow:hover {
  background: var(--rc-signal);
  color: #FFFFFF;
}
.rail-arrow[class*="-prev"] {
  left: -27px;
}
.rail-arrow[class*="-next"] {
  right: -27px;
}
.rail-arrow.swiper-button-disabled,
.slider-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}
.rail-more {
  margin-top: 56px;
}
.swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  border: 1px solid var(--rc-heading);
  background: transparent;
  opacity: 0.5;
}
.swiper-pagination-bullet-active {
  background: var(--rc-heading);
  opacity: 1;
}

/*----- 7.3 Review Badge & Newsletter -----*/
/* the real Google average and count, never a five-star tally */
.rc-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: var(--rc-surface);
  color: var(--rc-heading);
  box-shadow: 0 0 0 1px var(--rc-line);
}
.rc-review > i {
  color: var(--rc-accent-text);
  font-size: 22px;
}
.rc-review .rv-score {
  font-family: var(--rc-ff-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.rc-review .rv-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rc-review small {
  color: var(--rc-muted);
  font-size: 13px;
}
.is-night .rc-review,
.rc-photo-band .rc-review,
.rc-frost .rc-review {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
/* an inline field with its square red button (the base's "Enter your e-mail" + arrow) */
.rc-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  max-width: 470px;
}
.rc-newsletter input {
  flex: 1;
  min-width: 0;
  height: 58px;
  padding: 0 70px 0 20px;
  border: 0;
  border-radius: 0;
  background: var(--rc-field);
  color: var(--rc-heading);
  font-family: var(--rc-ff-body);
  font-size: 15px;
}
.rc-newsletter input::placeholder {
  color: var(--rc-muted);
}
.rc-newsletter input:focus {
  outline: 0;
  box-shadow: inset 0 -2px 0 var(--rc-signal);
}
.rc-newsletter button {
  position: absolute;
  right: 0;
  top: 0;
  width: 58px;
  height: 58px;
  background: var(--rc-action);
  color: #FFFFFF;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.rc-newsletter button:hover {
  background: var(--rc-petrol);
}
.rc-newsletter .form-status {
  flex-basis: 100%;
}

/*----- 7.4 Service & Photo Cards -----*/
/* a service: the illustrated icon, the name, a line, the price it starts from */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 38px 34px 34px;
  background: var(--rc-surface);
  box-shadow: 0 0 0 1px var(--rc-line);
  transition: transform 0.45s var(--rc-ease-out), box-shadow 0.45s var(--rc-ease-out);
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--rc-line), var(--rc-shadow);
}
.svc-card .rc-ico {
  margin-bottom: 26px;
}
.svc-card h3 {
  margin-bottom: 10px;
}
.svc-card p {
  margin-bottom: 22px;
  font-size: 15px;
}
.svc-from {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rc-line);
  color: var(--rc-muted);
  font-size: 13.5px;
}
.svc-from b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* the base's bare icon item: icon beside a two-line title, a line under it */
.icon-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.icon-item .ii-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.icon-item .rc-ico {
  width: 52px;
  height: 52px;
}
.icon-item p {
  font-size: 15px;
}
.icon-item small {
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-size: 14.5px;
  font-weight: 600;
}
/* the base's full-height photo columns: three photos side by side, the title and a line at the foot */
.photo-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.photo-col {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 640px;
  padding: 44px 40px;
  overflow: hidden;
  color: #FFFFFF;
  --rc-heading: #FFFFFF;
  --rc-text: rgba(255, 255, 255, 0.86);
}
.photo-col + .photo-col {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3);
}
.photo-col > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--rc-ease-out);
}
.photo-col::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 38, 46, 0) 30%, rgba(11, 38, 46, 0.86) 100%);
  transition: background-color 0.5s ease;
}
.photo-col:hover > img {
  transform: scale(1.05);
}
.photo-col h3 {
  max-width: 300px;
  margin-bottom: 10px;
}
.photo-col p {
  max-width: 340px;
  margin-bottom: 18px;
  font-size: 15px;
}
.photo-col .rc-more {
  color: #FFFFFF;
}
.photo-col .pc-from {
  position: absolute;
  top: 34px;
  left: 40px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--rc-ff-display);
  font-size: 14px;
  font-weight: 600;
}

/*----- 7.5 News, Post, Product & Team Cards -----*/
/* the base's news list: a red date tag, a small category, the title, a photo at the right, a hairline under each */
.news-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 60px;
  padding: 34px 0;
  border-bottom: 1px solid var(--rc-line);
}
.news-row:first-child {
  border-top: 1px solid var(--rc-line);
}
.news-row .nr-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 10px;
  color: var(--rc-text);
  font-size: 13.5px;
}
.news-row .nr-cat::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rc-heading);
}
.news-row h3 {
  max-width: 420px;
  margin-bottom: 16px;
}
.news-row .nr-img {
  display: block;
  overflow: hidden;
}
.news-row .nr-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.6;
  object-fit: cover;
  transition: transform 1s var(--rc-ease-out);
}
.news-row:hover .nr-img img {
  transform: scale(1.05);
}
/* a journal card: photo, the date tag laid on it, the title, a line, the link */
.post-card {
  position: relative;
  height: 100%;
}
.pcd-img {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--rc-tile);
}
.pcd-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1s var(--rc-ease-out);
}
.post-card:hover .pcd-img img {
  transform: scale(1.05);
}
.pcd-img .rc-datetag {
  position: absolute;
  left: 0;
  bottom: 0;
}
.pcd-body {
  padding-top: 22px;
}
.pcd-cat {
  display: block;
  margin-bottom: 8px;
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-size: 14px;
  font-weight: 600;
}
.pcd-body h3 {
  margin-bottom: 12px;
}
.pcd-text {
  margin: 0 0 16px;
  font-size: 15px;
}
/* the shop's card: the drawn product on the base's grey tile, the name, stars, the price */
.product-card {
  position: relative;
  height: 100%;
}
.pc-media {
  position: relative;
  overflow: hidden;
  background: #EFEFEF;
}
.pc-img {
  display: block;
}
.pc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.8s var(--rc-ease-out);
}
.product-card:hover .pc-img img {
  transform: scale(1.05);
}
.pc-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 6px 11px;
  background: var(--rc-petrol);
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 13px;
  font-weight: 600;
}
.pc-badge.is-sale {
  background: var(--rc-action);
}
.pc-wish {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #232323;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(15, 49, 58, 0.12);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pc-wish:hover,
.pc-wish.is-on {
  background: var(--rc-action);
  color: #FFFFFF;
}
.pc-add {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  background: var(--rc-petrol);
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 600;
  transform: translateY(100%);
  transition: transform 0.45s var(--rc-ease-out), background-color 0.3s ease;
}
.product-card:hover .pc-add,
.pc-add:focus-visible {
  transform: none;
}
.pc-add:hover {
  background: var(--rc-action);
}
.pc-body {
  padding-top: 18px;
}
.pc-body h3 {
  margin-bottom: 6px;
}
.pc-note {
  display: block;
  margin-bottom: 6px;
  color: var(--rc-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.pc-price {
  display: block;
  margin-top: 6px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 20px;
  font-weight: 600;
}
.pc-price del {
  margin-left: 6px;
  color: var(--rc-muted);
  font-size: 15px;
  font-weight: 400;
}
/* the base's team card: the portrait, a dark plate at the foot with a red edge, the role over the name */
.team-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--rc-tile);
}
.team-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.7;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.9s var(--rc-ease-out);
}
.team-card:hover img {
  transform: scale(1.05);
}
.tc-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 20px;
  border-left: 4px solid var(--rc-signal);
  background: linear-gradient(90deg, rgba(15, 49, 58, 0.94), rgba(15, 49, 58, 0.6));
  color: #FFFFFF;
}
.tc-plate small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}
.tc-plate b {
  font-family: var(--rc-ff-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.team-card:hover .tc-plate {
  background: linear-gradient(90deg, rgba(214, 58, 39, 0.95), rgba(214, 58, 39, 0.72));
}
/* a recent move: photo, the kind, the route, its crew and hours as label / value pairs */
.move-card {
  position: relative;
  display: block;
  height: 100%;
  background: var(--rc-surface);
  box-shadow: 0 0 0 1px var(--rc-line);
  transition: transform 0.45s var(--rc-ease-out), box-shadow 0.45s var(--rc-ease-out);
}
.move-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--rc-line), var(--rc-shadow);
}
.mc-img {
  display: block;
  overflow: hidden;
}
.mc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 1s var(--rc-ease-out);
}
.move-card:hover .mc-img img {
  transform: scale(1.05);
}
.mc-body {
  padding: 24px 26px 26px;
}
.mc-body h3 {
  margin: 8px 0 16px;
}
.mc-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--rc-line);
}
.mc-facts li {
  display: flex;
  flex-direction: column;
  color: var(--rc-muted);
  font-size: 12.5px;
  line-height: 1.3;
}
.mc-facts b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 18px;
  font-weight: 600;
}

/*----- 7.6 Voices, Figures & Lists -----*/
/* customers' voices: a face grid at the left, the quote large, the name, dots */
.voice-slide {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  gap: 60px;
}
.voice-faces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.voice-faces img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.voice-faces img:first-child {
  border-radius: 50%;
}
.voice-mark {
  position: relative;
  display: block;
  width: 40px;
  height: 34px;
  margin-bottom: 20px;
}
.voice-mark::before,
.voice-mark::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15px;
  height: 100%;
  background: var(--rc-signal);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 100%);
}
.voice-mark::before {
  left: 0;
}
.voice-mark::after {
  left: 23px;
}
.voice-text {
  margin-bottom: 26px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.voice-who {
  display: flex;
  flex-direction: column;
}
.voice-who b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
}
.voice-who span {
  color: var(--rc-muted);
  font-size: 14px;
}
/* the base's big figures: a large number with a short line under it */
.rc-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.rc-figures b {
  display: block;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: clamp(42px, 4.2vw, 68px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}
.rc-figures span {
  display: block;
  margin-top: 12px;
  color: var(--rc-text);
  font-size: 14px;
}
/* the base's numbered list on petrol: striped numerals, a name, a line, hairlines between */
.num-list li {
  display: grid;
  grid-template-columns: 0.8fr 1.1fr 1.1fr;
  align-items: start;
  gap: 30px;
  padding: 30px 0 26px;
  border-bottom: 1px solid var(--rc-line-2);
}
.num-list .rc-stripes {
  font-size: clamp(56px, 5.4vw, 92px);
}
.num-list h3 {
  padding-top: 6px;
}
.num-list p {
  margin: 4px 0 0;
  font-size: 14.5px;
}
.num-list .nl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 12px;
  color: var(--rc-muted);
  font-size: 13.5px;
}
.num-list .nl-meta b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
}

/*----- 7.7 Day Strip -----*/
/* the next fourteen moving days: each day's tier, its price for your move, the crews left */
.day-strip {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 6px;
}
.ds-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 4px 12px;
  background: var(--rc-surface);
  box-shadow: inset 0 3px 0 var(--ds, var(--rc-line-2)), 0 0 0 1px var(--rc-line);
  text-align: center;
}
.ds-day .ds-dow {
  color: var(--rc-muted);
  font-size: 12px;
}
.ds-day b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
}
.ds-day small {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 13px;
  font-weight: 600;
}
.ds-day em {
  color: var(--rc-muted);
  font-size: 11px;
  font-style: normal;
}
.ds-day.is-saver {
  --ds: #2E8A57;
}
.ds-day.is-standard {
  --ds: #8FA4AA;
}
.ds-day.is-peak {
  --ds: #E0A21B;
}
.ds-day.is-high {
  --ds: var(--rc-signal);
}
.ds-day.is-off,
.ds-day.is-full {
  background: var(--rc-tile);
}
.ds-day.is-off small,
.ds-day.is-full small {
  color: var(--rc-muted);
  font-weight: 500;
}
.tier-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 22px;
  color: var(--rc-text);
  font-size: 13.5px;
}
.tier-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tier-key span::before {
  content: "";
  width: 18px;
  height: 4px;
  background: var(--ds);
}
.tier-key .is-saver {
  --ds: #2E8A57;
}
.tier-key .is-standard {
  --ds: #8FA4AA;
}
.tier-key .is-peak {
  --ds: #E0A21B;
}
.tier-key .is-high {
  --ds: var(--rc-signal);
}

/*======================
8. Home 01
========================*/
/*----- 8.1 Hero -----*/
/* the base's moving home: the chamfered photo at the left edge, the title at the right with the red double chevron;
   the quick estimate and the grey info tile stay put under the title while the slides change */
.hero-split {
  position: relative;
  padding: 34px 0 0;
}
.hs-wrap {
  position: relative;
  padding: 0 40px;
}
.hs-slider {
  overflow: hidden;
}
.hs-grid {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: 80px;
  min-height: 800px;
}
.hs-photo {
  position: relative;
  overflow: hidden;
  background: var(--rc-tile);
  --cut: 70px;
}
.hs-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-split .hero-copy {
  padding-top: 72px;
}
.hero-title {
  margin-bottom: 22px;
}
.hero-title .rc-chev {
  width: 1.08em;
  height: 0.58em;
  margin-right: 0.12em;
  vertical-align: 0.1em;
}
.hero-lead {
  max-width: 520px;
  color: var(--rc-text);
  font-size: 15px;
}
.hs-side {
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 3;
  width: calc((100% - 160px) / 1.92);
  padding-right: 40px;
}
.quick-est h2 {
  margin-bottom: 16px;
}
.qe-fields {
  display: grid;
  grid-template-columns: 0.8fr 1fr 58px;
}
.qe-fields .rc-input {
  min-height: 58px;
  padding-left: 20px;
  background: var(--rc-surface);
  box-shadow: inset 0 0 0 1px var(--rc-line-2);
}
.qe-fields .rc-input:focus {
  box-shadow: inset 0 0 0 1px var(--rc-line-2), inset 0 -2px 0 var(--rc-signal);
}
.qe-fields select.rc-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--rc-heading) 50%), linear-gradient(135deg, var(--rc-heading) 50%, transparent 50%);
  background-position: calc(100% - 22px) 26px, calc(100% - 17px) 26px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.qe-fields .qe-miles {
  border-left: 0;
}
.qe-go {
  width: 58px;
  height: 58px;
  background: var(--rc-action);
  color: #FFFFFF;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.qe-go:hover {
  background: var(--rc-petrol);
}
.qe-out {
  margin: 12px 0 0;
  color: var(--rc-muted);
  font-size: 13.5px;
}
.qe-out b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 16px;
}
.hs-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 26px;
  padding: 28px 0;
  background: var(--rc-tile);
}
.hs-info > div {
  padding: 0 28px;
}
.hs-info > div + div {
  border-left: 1px solid var(--rc-line-2);
}
.hs-info h2 {
  margin-bottom: 8px;
}
.hs-info p {
  font-size: 13.5px;
  line-height: 1.6;
}
.hs-info a {
  color: var(--rc-heading);
  font-weight: 600;
}
.hs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0 0;
}
.hs-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-count {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 600;
}

/*----- 8.2 About -----*/
.ab-photo {
  position: relative;
  padding: 0 0 40px;
}
.ab-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  --cut: 64px;
}
.ab-figure {
  position: absolute;
  right: -30px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 28px 34px;
  background: var(--rc-petrol);
  color: #FFFFFF;
  box-shadow: var(--rc-shadow-lg);
}
.ab-figure b {
  font-family: var(--rc-ff-display);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}
.ab-figure span {
  margin-top: 8px;
  color: var(--rc-mist);
  font-size: 14px;
}
.ab-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 50px;
  margin: 44px 0 46px;
}

/*----- 8.3 Move Day -----*/
/* Home 01's scroll moment: pack -> load -> drive -> unload; as the section travels the bar fills, the truck rides it
   and each stop lights in turn, its photo and checklist taking the stage (scrubbed on its own travel, never pinned) */
.md-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-bottom: 34px;
}
.md-stop button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  color: var(--rc-muted);
}
.md-num {
  color: var(--rc-muted);
  font-family: var(--rc-ff-display);
  font-size: 14px;
  font-weight: 600;
  transition: color 0.4s ease;
}
.md-stop b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  opacity: 0.35;
  transition: opacity 0.4s ease, color 0.4s ease;
}
.md-stop small {
  font-size: 13.5px;
}
.md-stop.is-on .md-num {
  color: var(--rc-accent-text);
}
.md-stop.is-on b,
.md-stop.is-done b {
  opacity: 1;
}
.md-bar {
  position: absolute;
  left: 0;
  right: 16px;
  bottom: 0;
  height: 4px;
  background: var(--rc-line-2);
}
.md-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  background: var(--rc-signal);
}
.md-bar span::after {
  content: "\f4df";
  position: absolute;
  right: -14px;
  bottom: 8px;
  color: var(--rc-petrol);
  font-family: "Font Awesome 6 Free";
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}
[data-theme="dark"] .md-bar span::after {
  color: #FFFFFF;
}
.md-stage {
  display: grid;
  margin-top: 50px;
}
.md-panel {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 70px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.md-panel.is-on {
  opacity: 1;
  visibility: visible;
}
.md-photo {
  overflow: hidden;
  --cut: 56px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.md-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--rc-ease-out);
}
.md-panel.is-on .md-photo img {
  transform: none;
}
.md-copy .rc-ico {
  margin-bottom: 20px;
}
.md-when {
  display: block;
  margin: 8px 0 22px;
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-size: 17px;
  font-weight: 600;
}
.md-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rc-line-2);
}
.md-list i {
  color: var(--rc-accent-text);
  font-size: 13px;
}
.md-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px 18px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--rc-line-2);
}
.md-total span {
  color: var(--rc-muted);
  font-size: 14px;
}
.md-total b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.md-total small {
  color: var(--rc-text);
  font-size: 14px;
}

/*----- 8.4 Contact Band & Figures -----*/
.contact-band {
  padding: 120px 0;
}
.rc-photo-band.is-wash-right::after {
  background: linear-gradient(270deg, rgba(11, 38, 46, 0.55) 0%, rgba(11, 38, 46, 0.25) 50%, rgba(11, 38, 46, 0.05) 100%);
}
.contact-band .rc-frost h2 {
  margin-bottom: 30px;
}
.contact-band textarea.rc-input {
  min-height: 130px;
}
.contact-band .rc-btn {
  margin-top: 10px;
}
.rc-chev.is-big {
  display: block;
  width: 70px;
  height: 36px;
  margin: 0 auto 24px;
}
.rc-chev.is-big::before,
.rc-chev.is-big::after {
  width: 40px;
}
.rc-chev.is-big::after {
  left: 28px;
}
.figures-area .rc-title {
  margin-bottom: 80px;
}

/*======================
9. Home 02
========================*/
/*----- 9.1 Full Photo Hero -----*/
/* the base's main home: a full-bleed photo, the title in big white type, the numbered tab boxes at the foot as the
   slides' own buttons, each filling as its slide plays */
.hero-full {
  position: relative;
  overflow: hidden;
}
.hf-slider .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 900px;
  padding: 200px 0 230px;
  overflow: hidden;
}
.hero-full .hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hf-slider .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 38, 46, 0.78) 0%, rgba(11, 38, 46, 0.42) 55%, rgba(11, 38, 46, 0.12) 100%);
}
.hero-full .hero-copy {
  max-width: 760px;
}
.hero-full .hero-title {
  font-size: clamp(48px, 6.4vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.hero-full .hero-lead {
  max-width: 500px;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
}
.hf-tabs {
  position: absolute;
  left: max(24px, calc((100% - 1296px) / 2));
  bottom: 60px;
  z-index: 5;
  display: flex;
  gap: 16px;
}
.hf-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 132px;
  height: 128px;
  padding: 14px 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
  text-align: left;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.hf-tab span {
  align-self: flex-end;
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 600;
}
.hf-tab b {
  font-family: var(--rc-ff-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}
.hf-tab i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--rc-signal);
}
.hf-tab.is-on {
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hf-tab.is-on i {
  animation: rc-tab-fill 7s linear forwards;
}
@keyframes rc-tab-fill {
  to {
    width: 100%;
  }
}
.hf-tab:hover {
  background: rgba(255, 255, 255, 0.14);
}
.hf-nav {
  position: absolute;
  right: max(24px, calc((100% - 1296px) / 2));
  bottom: 60px;
  z-index: 5;
  display: flex;
  gap: 12px;
}

/*----- 9.2 Intro, Slashed Photo & Tiles -----*/
/* the base's slashed photo: one picture cut into three diagonal pieces with gaps between */
.slash-photo {
  position: relative;
  aspect-ratio: 16 / 9;
}
.slash-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slash-photo .sl-1 {
  clip-path: polygon(0 0, 31% 0, 18% 50%, 31% 100%, 0 100%);
}
.slash-photo .sl-2 {
  clip-path: polygon(34% 0, 64% 0, 51% 50%, 64% 100%, 34% 100%, 21% 50%);
}
.slash-photo .sl-3 {
  clip-path: polygon(67% 0, 100% 0, 100% 100%, 67% 100%, 54% 50%);
}
.store-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rc-line-2);
}
.store-tile {
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 40px 36px 38px;
  background: var(--rc-tile);
  transition: background-color 0.4s ease;
}
.store-tile .rc-ico {
  align-self: flex-end;
  width: 66px;
  height: 66px;
  margin-bottom: auto;
}
.store-tile h3 {
  margin: 40px 0 10px;
}
.store-tile p {
  font-size: 14.5px;
}
.store-tile:hover {
  background: var(--rc-surface);
}

/*----- 9.3 Unit Scale -----*/
/* Home 02's scroll moment: the unit outline grows over a 5 ft grid, the pieces that fit appear as it grows */
.unit-scale {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 80px;
}
.us-plan {
  position: relative;
}
.us-grid {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--rc-surface);
  background-image:
    linear-gradient(var(--rc-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rc-line) 1px, transparent 1px);
  background-size: 50% 50%;
  box-shadow: 0 0 0 1px var(--rc-line);
}
.us-unit {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 50%;
  border: 4px solid var(--rc-petrol);
  background: rgba(var(--rc-signal-rgb), 0.06);
}
[data-theme="dark"] .us-unit {
  border-color: #FFFFFF;
}
.us-door {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -6px;
  height: 8px;
  background: var(--rc-signal);
}
.us-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2px;
  overflow: hidden;
  background: var(--rc-kraft);
  box-shadow: inset 0 0 0 2px rgba(110, 78, 42, 0.45);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.us-item b {
  color: #3B2A14;
  font-family: var(--rc-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.us-item.is-in {
  opacity: 1;
  transform: none;
}
.us-scale {
  display: block;
  margin-top: 14px;
  color: var(--rc-muted);
  font-size: 13px;
}
.us-marks {
  display: flex;
  gap: 8px;
  margin-bottom: 34px;
}
.us-marks li {
  padding: 8px 16px;
  border-radius: 80px;
  background: var(--rc-tile);
  color: var(--rc-muted);
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.us-marks li.is-on {
  background: var(--rc-petrol);
  color: #FFFFFF;
}
.us-side {
  display: grid;
}
.us-side .us-marks {
  grid-area: 1 / 1;
}
.us-read {
  display: flex;
  flex-direction: column;
  grid-area: 2 / 1;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s var(--rc-ease-out), visibility 0.45s;
}
.us-read.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.us-size {
  color: var(--rc-muted);
  font-size: 16px;
}
.us-size b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: clamp(80px, 8vw, 132px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.us-dims {
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-size: 18px;
  font-weight: 600;
}
.us-fits {
  max-width: 420px;
  padding: 14px 0;
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
}
.us-price b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 26px;
  font-weight: 600;
}

/*----- 9.4 Units List, Team & Reserve -----*/
.unit-list-area {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.unit-list-area .rc-title.is-ruled {
  border-color: var(--rc-line-2);
}
.team-rail {
  padding-left: max(24px, calc((100% - 1296px) / 2));
  overflow: hidden;
}
.reserve-band {
  padding: 140px 0 120px;
}
.reserve-band::after {
  background: linear-gradient(90deg, rgba(11, 38, 46, 0.6) 0%, rgba(11, 38, 46, 0.2) 60%, rgba(11, 38, 46, 0.35) 100%);
}
.reserve-title {
  color: #FFFFFF;
  font-size: clamp(54px, 7vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.unit-quote h3 {
  margin-bottom: 24px;
}
.unit-quote .rc-check {
  margin: 4px 0 22px;
}
.uq-out {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding: 16px 0;
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
}
.uq-out span {
  font-size: 14px;
}
.uq-out b {
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.unit-quote select.rc-input option {
  color: #232323;
}

/*----- 9.5 Depot, Story & Voices -----*/
.depot-map {
  position: relative;
}
.rc-map {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  filter: grayscale(0.35);
}
.depot-tag {
  position: absolute;
  left: 30px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 320px;
  padding: 10px 18px 10px 10px;
  background: var(--rc-action);
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.depot-tag img {
  width: 74px;
  height: 52px;
  object-fit: cover;
}
.depot-label {
  display: block;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
}
.depot-phone {
  display: block;
  margin: 4px 0 30px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.depot-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.depot-cols h3 {
  margin-bottom: 8px;
}
.depot-cols p {
  font-size: 14.5px;
}
.story-area {
  position: relative;
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.story-copy {
  padding: 110px 70px 110px max(24px, calc((100vw - 1296px) / 2));
}
.story-years li + li {
  margin-top: 34px;
}
.story-years small {
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rc-line-2);
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 600;
}
.sy-row {
  display: grid;
  grid-template-columns: 150px 30px 1fr;
  align-items: center;
  gap: 18px;
}
.sy-row b {
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.sy-row .rc-chev {
  font-size: 18px;
}
.sy-row p {
  margin: 0;
  font-size: 14.5px;
}
.story-photo {
  position: relative;
  min-height: 560px;
  --cut: 90px;
}
.story-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voices-wrap {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}
.voices-dots {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-50%);
}
.voices-dots.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0;
}

/*======================
10. Home 03
========================*/
/*----- 10.1 Centred Photo Hero -----*/
/* the base's photo title band grown into a hero: the title centred in white over the photo, the review, the arrows and
   the faces along its foot */
.hero-centre {
  position: relative;
  overflow: hidden;
}
.hc-slider .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 880px;
  padding: 190px 0 210px;
  overflow: hidden;
}
.hero-centre .hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hc-slider .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 38, 46, 0.58);
}
.hero-centre .hero-copy {
  max-width: 1000px;
  margin: 0 auto;
}
.hero-centre .hero-title {
  font-size: clamp(46px, 5.6vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.hero-centre .hero-lead {
  max-width: 600px;
  margin: 0 auto 34px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
}
.hero-centre .hero-lead b {
  color: #FFFFFF;
}
.hero-centre .rc-eyebrow {
  color: #FFFFFF;
}
.hc-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  padding: 26px max(24px, calc((100% - 1296px) / 2));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hc-foot .rc-avatars {
  justify-self: end;
}
.hc-foot .rc-avatars .txt b {
  color: #FFFFFF;
}
.hc-foot .rc-avatars .txt {
  color: rgba(255, 255, 255, 0.76);
}
.hc-foot .hero-count {
  color: #FFFFFF;
}

/*----- 10.2 Intro & Figures -----*/
.plan-sub {
  margin-top: 22px;
  font-size: 14px;
}
.plan-figures {
  margin-top: 90px;
  padding-top: 60px;
  border-top: 1px solid var(--rc-line);
}
.plan-figures div:nth-child(3) b::before {
  content: "+";
}

/*----- 10.3 Box Stack -----*/
/* Home 03's scroll moment: kraft boxes drop onto a pile as the room count runs from one to eight */
.box-stack {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 70px;
}
.bs-stage {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: var(--rc-surface);
  box-shadow: 0 0 0 1px var(--rc-line);
}
.bs-pile {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 62px;
  height: 400px;
}
.bs-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62px;
  background: repeating-linear-gradient(90deg, var(--rc-tile) 0 120px, var(--rc-tile-2) 120px 240px);
  box-shadow: inset 0 1px 0 var(--rc-line-2);
}
.bs-box {
  position: absolute;
  width: 14%;
  height: 18%;
  margin-left: -7%;
  background: linear-gradient(180deg, #D9B987, #C9A270 30%, #B88E58);
  box-shadow: inset 0 0 0 2px rgba(110, 78, 42, 0.35), 0 6px 12px rgba(15, 49, 58, 0.12);
  transform: translateY(-460px) rotate(var(--r, 0deg));
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.25s ease;
}
.bs-box::before {
  content: "";
  position: absolute;
  left: 44%;
  top: 0;
  width: 12%;
  height: 40%;
  background: var(--rc-signal);
}
.bs-box i {
  position: absolute;
  left: 8%;
  bottom: 14%;
  max-width: 84%;
  padding: 1px 5px;
  overflow: hidden;
  background: #FFFFFF;
  color: #3B2A14;
  font-family: var(--rc-ff-display);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bs-box.is-in {
  transform: translateY(0) rotate(var(--r, 0deg));
  opacity: 1;
}
.bs-rooms {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  color: var(--rc-muted);
  font-size: 18px;
}
.bs-rooms > b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: clamp(90px, 9vw, 150px);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.05em;
}
.bs-rows {
  margin-bottom: 26px;
}
.bs-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.bs-price span {
  color: var(--rc-muted);
  font-size: 14px;
}
.bs-price b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

/*----- 10.4 Office Band, Rates & Supplies -----*/
.office-band {
  padding: 230px 0 110px;
}
.office-band h2 {
  max-width: 620px;
  color: #FFFFFF;
}
.office-band .rc-eyebrow {
  color: #FFFFFF;
}
.of-tiles {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
.of-tiles a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 140px;
  height: 130px;
  padding: 14px 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  color: #FFFFFF;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.of-tiles span {
  align-self: flex-end;
  font-family: var(--rc-ff-display);
  font-weight: 600;
}
.of-tiles b {
  font-family: var(--rc-ff-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}
.of-tiles a:hover {
  background: #FFFFFF;
  color: var(--rc-petrol);
}
.rates-area {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.rates-area .rc-rows li {
  border-color: var(--rc-line);
}
.supplies-area .swiper {
  overflow: hidden;
}

/*======================
11. Inner Pages
========================*/
/*----- 11.1 Sidebar & Widgets -----*/
/* Relocia's sidebar is quiet: a small heading, a coral stroke, plain lists. Relocia sets each widget on linen */
.rc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.rc-sidebar .widget {
  padding: 34px 32px;
  background: var(--rc-tile);
}
.rc-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.rc-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--rc-signal);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 18px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--rc-field);
  color: var(--rc-heading);
  font-family: var(--rc-ff-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-bottom-color: var(--rc-signal);
}
.widget-search .fs-ico {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: var(--rc-accent-text);
  pointer-events: none;
}
.faq-group + .faq-group {
  margin-top: 64px;
}
.faq-group .rc-accordion {
  margin-top: 26px;
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: var(--rc-signal);
  color: var(--rc-ink);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: var(--rc-petrol);
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--rc-line-2);
  color: var(--rc-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--rc-ease-out);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--rc-muted);
  font-size: 14px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  color: var(--rc-accent-text);
}
.widget-cats li button.is-active span {
  color: var(--rc-accent-text);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  background: var(--rc-surface);
  color: var(--rc-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--rc-accent-text);
  font-size: 13px;
  transition: transform 0.3s var(--rc-ease-out), color 0.3s ease;
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--rc-signal);
  color: var(--rc-ink);
}
.widget-nav li a:hover i,
.widget-nav li a.is-current i {
  color: var(--rc-petrol);
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rc-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--rc-ease-out);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--rc-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.side-posts li > div {
  flex: 1 1 auto;
  min-width: 0;
}
.side-posts h3 a {
  color: var(--rc-heading);
}
.side-posts h3 a:hover {
  color: var(--rc-accent-text);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--rc-text);
}
.widget-tags a:hover {
  color: var(--rc-accent-text);
}
.rc-sidebar .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--rc-petrol);
  text-align: center;
}
.widget-cta .rc-script {
  display: block;
  color: var(--rc-signal-soft);
  font-size: 26px;
  line-height: 1.2;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.widget-line .line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rc-line-2);
}
.widget-line .line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget-line .rc-ico {
  width: 54px;
  height: 54px;
}
.line-row small {
  display: block;
  color: var(--rc-muted);
  font-size: 13px;
}
.line-row b {
  color: var(--rc-heading);
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.line-row:hover b {
  color: var(--rc-accent-text);
}

/*----- 11.2 Rows, Choices & Pages -----*/
.rc-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 24px;
  color: var(--rc-heading);
  font-size: 18px;
  font-weight: 500;
}
.sum-total b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 30px;
  font-weight: 400;
}
.rc-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rc-line);
}
.rc-kv li:first-child {
  border-top: 1px solid var(--rc-line);
}
.rc-kv li b {
  color: var(--rc-heading);
  font-weight: 500;
  text-align: end;
}
.rc-kv.is-plain li:first-child {
  border-top: 0;
}
.choice-list {
  display: grid;
  gap: 12px;
}
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 60px 16px 18px;
  background: var(--rc-tile);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.rc-bg-tile .choice-card,
.rc-bg-tile-2 .choice-card {
  background: var(--rc-surface);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card:hover {
  box-shadow: inset 3px 0 0 var(--rc-line-2);
}
.choice-card:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--rc-signal-rgb), 0.18);
}
.choice-card.is-checked {
  background: var(--rc-tile-2);
  box-shadow: inset 3px 0 0 var(--rc-signal);
}
.choice-card.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice-ico {
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rc-tile);
  color: var(--rc-accent-text);
  font-size: 18px;
}
.choice-card.is-checked .choice-ico {
  background: var(--rc-signal);
  color: var(--rc-ink);
}
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.choice-body b {
  color: var(--rc-heading);
  font-size: 17px;
  font-weight: 500;
}
.choice-body span {
  color: var(--rc-muted);
  font-size: 14.5px;
}
.choice-tick {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--rc-line-2);
  color: transparent;
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.choice-card.is-checked .choice-tick {
  background: var(--rc-signal);
  box-shadow: none;
  color: var(--rc-petrol);
}
.rc-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.rc-pagination a,
.rc-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--rc-tile);
  color: var(--rc-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rc-pagination a i {
  color: var(--rc-accent-text);
  font-size: 13px;
}
.rc-pagination .is-current,
.rc-pagination a:hover,
.rc-pagination a:hover i {
  background: var(--rc-signal);
  color: var(--rc-ink);
}
.rc-zoom {
  display: block;
  overflow: hidden;
}
.rc-zoom img {
  width: 100%;
  transition: transform 0.9s var(--rc-ease-out);
}
.rc-zoom:hover img {
  transform: scale(1.05);
}
.grid-empty {
  padding: 40px 0;
  color: var(--rc-muted);
  text-align: center;
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
.rc-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 2px;
  background: var(--rc-line-2);
  accent-color: var(--rc-action);
  appearance: none;
  -webkit-appearance: none;
}
.rc-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 5px solid var(--rc-surface);
  border-radius: 50%;
  background: var(--rc-signal);
  box-shadow: 0 2px 8px rgba(8, 11, 15, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.rc-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--rc-surface);
  border-radius: 50%;
  background: var(--rc-signal);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--rc-muted);
  font-size: 14px;
}

/* chips: tonal round faces for amounts, days and times (the input stays in the form, hidden) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--rc-tile);
  color: var(--rc-heading);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rc-panel .chip-choice > span {
  background: var(--rc-tile);
}
.chip-choice:hover > span {
  background: var(--rc-tile-2);
}
.chip-choice input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(var(--rc-signal-rgb), 0.25);
}
.chip-choice.is-checked > span {
  background: var(--rc-signal);
  color: var(--rc-ink);
}
.chip-choice > span small {
  color: var(--rc-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.chip-choice.is-off {
  cursor: not-allowed;
}
.chip-choice.is-off > span {
  opacity: 0.5;
  text-decoration: line-through;
}

/*----- 11.3 Quantity Stepper -----*/
.rc-qty {
  display: inline-flex;
  align-items: center;
  background: var(--rc-tile);
}
.rc-bg-tile .rc-qty {
  background: var(--rc-surface);
}
.rc-qty button {
  width: 46px;
  height: 54px;
  color: var(--rc-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rc-qty button:hover {
  background: var(--rc-tile-2);
  color: var(--rc-accent-text);
}
.rc-qty input {
  width: 52px;
  height: 54px;
  border: 0;
  border-inline: 1px solid var(--rc-line);
  background: transparent;
  color: var(--rc-heading);
  font-family: var(--rc-ff-body);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  outline: 0;
  -moz-appearance: textfield;
}
.rc-qty input::-webkit-outer-spin-button,
.rc-qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.rc-qty.is-sm button {
  width: 36px;
  height: 42px;
}
.rc-qty.is-sm input {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

/*======================
12. Move Pages
========================*/
/*----- 12.1 Estimator -----*/
.rc-field > label:not(.rc-check) {
  display: block;
  margin-bottom: 8px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.est-form {
  padding: 16px 44px;
}
.est-block {
  min-width: 0;
  margin: 0;
  padding: 30px 0;
  border: 0;
  border-bottom: 1px solid var(--rc-line);
}
.est-block:last-child {
  border-bottom: 0;
}
.est-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 14px;
  padding: 0;
}
.est-num {
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 700;
}
.est-out {
  margin-left: auto;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 18px;
  font-weight: 600;
}
.est-note {
  margin: 10px 0 0;
  color: var(--rc-muted);
  font-size: 13.5px;
}
.est-note b {
  color: var(--rc-accent-text);
}
.est-floors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.rc-stepper {
  display: inline-flex;
  align-items: stretch;
  background: var(--rc-field);
}
.rc-stepper button {
  width: 52px;
  height: 52px;
  color: var(--rc-heading);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rc-stepper button:hover {
  background: var(--rc-petrol);
  color: #FFFFFF;
}
.rc-stepper input {
  width: 64px;
  border: 0;
  background: transparent;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.rc-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.choice-price {
  margin-left: auto;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
  white-space: nowrap;
}
/* the petrol result panel: the price, the facts, every line it is made of */
.est-result,
.bk-summary,
.day-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 38px;
}
.est-result,
.bk-summary {
  position: sticky;
  top: 110px;
}
.er-label {
  display: block;
  color: var(--rc-muted);
  font-size: 14px;
}
.er-total {
  display: block;
  margin: 6px 0 4px;
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: clamp(48px, 4.4vw, 72px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}
.er-total.is-range {
  font-size: clamp(32px, 2.8vw, 44px);
}
.er-day {
  display: block;
  margin-bottom: 26px;
  color: var(--rc-signal-soft);
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 600;
}
.er-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-bottom: 24px;
  background: var(--rc-line);
}
.er-facts li {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: var(--rc-petrol);
}
.er-facts small {
  color: var(--rc-muted);
  font-size: 12.5px;
}
.er-facts b {
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 18px;
  font-weight: 600;
}
.er-lines li span small,
.rc-rows li span small {
  display: block;
  color: var(--rc-muted);
  font-size: 12.5px;
}
.rc-rows li.is-total > span,
.rc-rows li.is-total > b {
  color: var(--rc-heading);
  font-weight: 600;
}
.is-night .rc-rows li.is-total > b {
  color: var(--rc-signal-soft);
}
.est-result .rc-btns,
.bk-summary .rc-review {
  margin-top: 28px;
}

/*----- 12.2 Move Dates -----*/
.dates-move {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
  padding: 18px 24px;
  background: var(--rc-tile);
}
.dates-move p {
  margin: 0;
  font-size: 14px;
}
.dates-move small {
  display: block;
  color: var(--rc-muted);
}
.dates-move b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
}
.dates-move .rc-btn {
  margin-left: auto;
}
.cal-panel {
  padding: 34px;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.cal-dow,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-dow li {
  padding-bottom: 8px;
  color: var(--rc-muted);
  font-family: var(--rc-ff-display);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.cal-day button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 92px;
  padding: 10px 10px 8px;
  background: var(--rc-tile-2);
  box-shadow: inset 0 3px 0 var(--ds, transparent);
  color: var(--rc-heading);
  text-align: left;
  transition: background-color 0.3s ease, transform 0.3s var(--rc-ease-out);
}
.cal-day button b {
  font-family: var(--rc-ff-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}
.cal-price {
  margin-top: auto;
  font-family: var(--rc-ff-display);
  font-size: 13.5px;
  font-weight: 600;
}
.cal-day small {
  color: var(--rc-muted);
  font-size: 11px;
  line-height: 1.3;
}
.cal-day.is-saver {
  --ds: #2E8A57;
}
.cal-day.is-standard {
  --ds: #8FA4AA;
}
.cal-day.is-peak {
  --ds: #E0A21B;
}
.cal-day.is-high {
  --ds: var(--rc-signal);
}
.cal-day button:not(:disabled):hover {
  background: var(--rc-surface);
  transform: translateY(-2px);
  box-shadow: inset 0 3px 0 var(--ds, transparent), var(--rc-shadow);
}
.cal-day button:disabled {
  cursor: default;
  opacity: 0.6;
}
.cal-day.is-past button {
  opacity: 0.3;
}
.cal-day.is-chosen button {
  background: var(--rc-petrol);
  color: #FFFFFF;
  opacity: 1;
}
.cal-day.is-chosen small {
  color: var(--rc-mist);
}
.cal-day.is-blank {
  visibility: hidden;
}
.day-panel {
  position: sticky;
  top: 110px;
}
.day-panel h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.day-panel h3 {
  margin: 24px 0 12px;
}
.day-tier {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ds, #8FA4AA);
}
.day-tier.is-saver {
  --ds: #6BCB93;
}
.day-tier.is-peak {
  --ds: #E0A21B;
}
.day-tier.is-high {
  --ds: var(--rc-signal);
}
.day-left {
  display: block;
  margin-top: 10px;
  color: var(--rc-muted);
  font-size: 13.5px;
}
.win-list {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}
.win-list.is-row {
  grid-template-columns: repeat(3, 1fr);
}
.win-chip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 10px;
  padding: 12px 16px;
  background: var(--rc-tile);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.win-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.win-chip b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
}
.win-chip span {
  grid-column: 1;
  color: var(--rc-muted);
  font-size: 12.5px;
}
.win-chip em {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-style: normal;
  font-weight: 600;
}
.win-chip.is-checked {
  box-shadow: inset 0 0 0 2px var(--rc-signal);
}
.win-chip:focus-within {
  box-shadow: inset 0 0 0 2px var(--rc-signal);
}
.day-diff {
  margin: 14px 0 24px;
  color: var(--rc-muted);
  font-size: 13.5px;
}
.factor-card {
  height: 100%;
  padding: 34px 30px;
  background: var(--rc-surface);
  box-shadow: inset 0 4px 0 var(--ds), 0 0 0 1px var(--rc-line);
}
.factor-card b {
  display: block;
  margin-bottom: 18px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.factor-card h3 {
  margin-bottom: 8px;
}
.factor-card p {
  font-size: 14.5px;
}
.factor-card.is-saver {
  --ds: #2E8A57;
}
.factor-card.is-standard {
  --ds: #8FA4AA;
}
.factor-card.is-peak {
  --ds: #E0A21B;
}
.factor-card.is-high {
  --ds: var(--rc-signal);
}

/*----- 12.3 Booking & Office Wizards -----*/
.wz-panel {
  padding: 40px 42px;
}
.wz-steps.is-five {
  grid-template-columns: repeat(5, 1fr);
}
.bk-extras {
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}
.bk-daynote {
  min-height: 24px;
  margin: -6px 0 20px;
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-size: 14.5px;
  font-weight: 600;
}
.bk-addr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 10px;
}
.bk-floor {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
}
.bk-lift {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.bk-lift legend {
  width: 100%;
}
.wz-done {
  padding: 10px 0;
}
.wz-done .rc-ico {
  margin-bottom: 18px;
}
.wz-done h3 {
  margin-bottom: 12px;
}
.wz-done .rc-btns {
  margin-top: 24px;
}
.oi-photo {
  position: relative;
  padding-bottom: 40px;
}
.oi-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  --cut: 60px;
}
.oi-card {
  position: absolute;
  right: -20px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  padding: 24px 28px;
  box-shadow: var(--rc-shadow-lg);
}
.oi-card small {
  color: var(--rc-muted);
  font-size: 13px;
}
.oi-card b {
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.oi-card span {
  color: var(--rc-signal-soft);
  font-size: 13.5px;
}
.of-range {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 18px;
}
.of-range .rc-range {
  grid-column: 1 / -1;
}
.of-range output {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
}
.choice-list.is-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.of-plan-title {
  margin: 26px 0 12px;
  color: #FFFFFF;
}
.of-plan li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0 10px 18px;
  border-left: 2px solid var(--rc-line-2);
  font-size: 13.5px;
}
.of-plan li b {
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-weight: 600;
}
.of-plan li.is-move {
  border-color: var(--rc-signal);
}
.of-plan li.is-move b {
  color: var(--rc-signal-soft);
}

/*----- 12.4 Storage Page -----*/
.size-finder {
  width: min(460px, 100%);
}
.sf-out {
  margin: 10px 0 0;
  font-size: 14px;
}
.sf-out b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
}
.unit-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin: 0 0 60px;
  padding: 0;
  border: 0;
}
.unit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px 18px;
  background: var(--rc-surface);
  box-shadow: 0 0 0 1px var(--rc-line);
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.35s var(--rc-ease-out);
}
.unit-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.unit-card:hover {
  transform: translateY(-4px);
}
.unit-card.is-checked,
.unit-card:focus-within {
  box-shadow: 0 0 0 2px var(--rc-signal), var(--rc-shadow);
}
.uc-plan {
  position: relative;
  display: block;
  height: 70px;
  margin-bottom: 12px;
  background-image:
    linear-gradient(var(--rc-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rc-line) 1px, transparent 1px);
  background-size: 14px 14px;
}
.uc-plan span {
  position: absolute;
  left: 0;
  bottom: 0;
  border: 2px solid var(--rc-petrol);
  background: rgba(var(--rc-signal-rgb), 0.12);
}
[data-theme="dark"] .uc-plan span {
  border-color: #FFFFFF;
}
.uc-plan .is-u25 {
  width: 16.7%;
  height: 50%;
}
.uc-plan .is-u50 {
  width: 33.3%;
  height: 50%;
}
.uc-plan .is-u75 {
  width: 50%;
  height: 50%;
}
.uc-plan .is-u100 {
  width: 33.3%;
  height: 100%;
}
.uc-plan .is-u150 {
  width: 50%;
  height: 100%;
}
.uc-plan .is-u200 {
  width: 66.7%;
  height: 100%;
}
.uc-plan .is-u300 {
  width: 100%;
  height: 100%;
}
.uc-size {
  color: var(--rc-muted);
  font-size: 13px;
}
.uc-size b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.uc-dims,
.uc-fits {
  color: var(--rc-muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.uc-price {
  margin-top: 8px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 18px;
  font-weight: 600;
}
.uc-price small {
  color: var(--rc-muted);
  font-family: var(--rc-ff-body);
  font-size: 12px;
  font-weight: 400;
}
.st-plan {
  position: relative;
  height: 110px;
  margin: 10px 0 26px;
  background-image:
    linear-gradient(var(--rc-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rc-line) 1px, transparent 1px);
  background-size: 18px 18px;
}
.st-plan span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 33.3%;
  height: 100%;
  border: 3px solid var(--rc-petrol);
  background: rgba(var(--rc-signal-rgb), 0.12);
  transition: width 0.5s var(--rc-ease-out), height 0.5s var(--rc-ease-out);
}
[data-theme="dark"] .st-plan span {
  border-color: #FFFFFF;
}
.st-plan small {
  position: absolute;
  right: 0;
  bottom: -22px;
  color: var(--rc-muted);
  font-size: 12px;
}
.st-calc .rc-check {
  margin-top: 14px;
}
.st-fits {
  margin: 18px 0 0;
  color: var(--rc-muted);
  font-size: 13.5px;
}
.st-reserve {
  margin-top: 40px;
}
.st-depot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/*----- 12.5 Rates, Services & Details -----*/
.truck-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 24px 26px;
  background: var(--rc-surface);
  box-shadow: 0 0 0 1px var(--rc-line);
  transition: transform 0.45s var(--rc-ease-out), box-shadow 0.45s var(--rc-ease-out);
}
.truck-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--rc-line), var(--rc-shadow);
}
.truck-card .rc-ico {
  margin-bottom: 18px;
}
.truck-card h3 {
  margin-bottom: 10px;
}
.truck-card .rc-rows li {
  padding: 8px 0;
  font-size: 13.5px;
}
.tc-hour {
  margin-top: auto;
  padding-top: 18px;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 24px;
  font-weight: 600;
}
.tc-hour small {
  display: block;
  color: var(--rc-muted);
  font-family: var(--rc-ff-body);
  font-size: 12.5px;
  font-weight: 400;
}
.rate-block + .rate-block {
  margin-top: 60px;
}
.rate-block h2 {
  margin-bottom: 18px;
}
.sd-photo {
  margin-bottom: 40px;
}
.sd-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.sd-main > h2 {
  margin-bottom: 20px;
}
.sd-points {
  margin: 20px 0 50px;
}
.sd-point {
  height: 100%;
  padding: 30px 28px;
  background: var(--rc-tile);
}
.sd-point .rc-ico {
  margin-bottom: 16px;
}
.sd-point h3 {
  margin-bottom: 8px;
}
.sd-point p {
  font-size: 14.5px;
}
.sd-sub {
  margin: 10px 0 14px;
}
.sd-table {
  margin: 20px 0 60px;
}
.sd-table li {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 0.7fr 0.8fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rc-line);
  font-size: 14.5px;
}
.sd-table li.is-head {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
  border-bottom-color: var(--rc-line-2);
}
.sd-table b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
  text-align: right;
}
.quick-est.is-side .qe-fields {
  grid-template-columns: 1fr 1fr 52px;
  margin-top: 16px;
}
.quick-est.is-side .qe-fields .rc-input {
  min-height: 52px;
  padding-left: 14px;
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: #FFFFFF;
}
.quick-est.is-side .qe-fields select.rc-input {
  background-image: linear-gradient(45deg, transparent 50%, #FFFFFF 50%), linear-gradient(135deg, #FFFFFF 50%, transparent 50%);
}
.quick-est.is-side .qe-fields select.rc-input option {
  color: #232323;
}
.quick-est.is-side .qe-go {
  width: 52px;
  height: 52px;
}
.quick-est.is-side .qe-out,
.quick-est.is-side .qe-out b {
  color: rgba(255, 255, 255, 0.86);
}

/*----- 12.6 Crew, Careers & Kit Finder -----*/
.pf-photo {
  position: relative;
}
.pf-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.8;
  object-fit: cover;
  object-position: center top;
}
.pf-plate {
  position: absolute;
  left: 0;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  border-left: 4px solid var(--rc-signal);
  background: var(--rc-petrol);
  color: #FFFFFF;
}
.pf-plate small {
  color: var(--rc-mist);
  font-size: 13px;
}
.pf-plate b {
  font-family: var(--rc-ff-display);
  font-size: 22px;
  font-weight: 600;
}
.profile-area h2 {
  margin-bottom: 18px;
}
.profile-area .rc-rows {
  margin: 26px 0 40px;
}
.pf-sub {
  margin-bottom: 18px;
}
.pf-meters {
  margin-bottom: 34px;
}
.pf-meters li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14.5px;
}
.pf-meters b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
}
.pf-meters .rc-meter {
  grid-column: 1 / -1;
}
.rc-meter .is-64 {
  width: 64%;
}
.rc-meter .is-21 {
  width: 21%;
}
.rc-meter .is-15 {
  width: 15%;
}
.crew-band {
  padding: 120px 0;
}
.crew-band h2 {
  color: #FFFFFF;
}
.crew-band .rc-eyebrow {
  color: #FFFFFF;
}
.job-row {
  display: grid;
  grid-template-columns: 60px 1.6fr 1fr 1.2fr 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 26px 30px;
  background: var(--rc-surface);
  box-shadow: 0 0 0 1px var(--rc-line);
  transition: transform 0.4s var(--rc-ease-out), box-shadow 0.4s var(--rc-ease-out);
}
.job-row + .job-row {
  margin-top: 12px;
}
.job-row:hover {
  transform: translateX(6px);
  box-shadow: 0 0 0 1px var(--rc-line), var(--rc-shadow);
}
.jr-num {
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-size: 18px;
  font-weight: 700;
}
.jr-meta {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.jr-meta small {
  color: var(--rc-muted);
  font-size: 12px;
}
.jr-pay {
  color: var(--rc-muted);
  font-size: 13px;
}
.jr-pay b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 24px;
  font-weight: 600;
}
.apply-area .oi-photo {
  padding-bottom: 0;
}
.kit-finder {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 70px;
}
.kf-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.kf-copy h2 {
  margin-bottom: 26px;
}
.kf-copy .rc-rows {
  margin: 10px 0 26px;
}
.kf-buy {
  display: flex;
  align-items: center;
  gap: 24px;
}
.kf-price {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

/*----- 12.7 Contact, Account & 404 -----*/
.info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--rc-tile);
}
.info-strip li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px 32px;
}
.info-strip li + li {
  border-left: 1px solid var(--rc-line-2);
}
.info-strip span {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.info-strip small {
  color: var(--rc-muted);
}
.info-strip b {
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-size: 16px;
  font-weight: 600;
}
.info-strip em {
  font-style: normal;
  font-size: 12.5px;
}
.contact-area h2 {
  margin-bottom: 18px;
}
.contact-rows {
  margin: 26px 0 30px;
}
.contact-form h3 {
  margin-bottom: 22px;
}
.map-area .rc-map {
  height: 520px;
}
.dash-side {
  position: sticky;
  top: 110px;
}
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rc-line);
}
.dash-who img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.dash-who span {
  color: var(--rc-muted);
  font-size: 13.5px;
}
.dash-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: transparent;
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
  text-align: left;
  transition: background-color 0.3s ease;
}
.dash-tabs .rc-ico {
  width: 40px;
  height: 40px;
}
.dash-tabs button:hover,
.dash-tabs button.is-active {
  background: var(--rc-tile);
}
.dash-tabs button.is-active {
  box-shadow: inset 3px 0 0 var(--rc-signal);
}
.dash-panel h2 {
  margin-bottom: 24px;
}
.dash-panel .rc-rows {
  margin-bottom: 30px;
}
.move-ticket {
  margin-bottom: 26px;
  padding: 30px 32px;
}
.mt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--rc-line-2);
}
.mt-head b {
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-weight: 600;
}
.mt-date {
  display: flex;
  flex-direction: column;
  padding: 22px 0;
}
.mt-date small,
.mt-facts small {
  color: var(--rc-muted);
  font-size: 12.5px;
}
.mt-date b {
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mt-date span {
  color: var(--rc-signal-soft);
  font-size: 14px;
}
.mt-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.mt-facts li {
  display: flex;
  flex-direction: column;
}
.mt-facts b {
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-weight: 600;
}
.table-wrap {
  margin-bottom: 30px;
}
.rc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.rc-table th {
  padding: 12px 10px;
  border-bottom: 1px solid var(--rc-line-2);
  color: var(--rc-heading);
  font-family: var(--rc-ff-display);
  font-weight: 600;
  text-align: left;
}
.rc-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--rc-line);
  vertical-align: top;
}
.dash-btns {
  margin-top: 6px;
}
/* 404: an open box with nothing in it */
.lost-box {
  position: relative;
  width: min(440px, 100%);
  height: 380px;
  margin: 0 auto;
}
.lb-back {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 30%;
  height: 22%;
  background: #6B4C29;
}
.lb-flap {
  position: absolute;
  top: 18%;
  width: 40%;
  height: 26%;
  background: #DEC196;
  box-shadow: inset 0 0 0 2px rgba(110, 78, 42, 0.3);
}
.lb-flap.is-left {
  left: 0;
  transform: skewY(18deg) rotate(-12deg);
  transform-origin: right bottom;
}
.lb-flap.is-right {
  right: 0;
  transform: skewY(-18deg) rotate(12deg);
  transform-origin: left bottom;
}
.lb-front {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 48%;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #D2AC7C, #C9A270);
  box-shadow: inset 0 0 0 2px rgba(110, 78, 42, 0.35);
}
.lb-front b {
  color: rgba(15, 49, 58, 0.82);
  font-family: var(--rc-ff-display);
  font-size: 92px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}
.lb-front i {
  margin-top: 6px;
  padding: 4px 12px;
  background: var(--rc-signal);
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
.lb-shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 2%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 49, 58, 0.22), rgba(15, 49, 58, 0));
}
.rc-error h1 {
  margin: 6px 0 20px;
}
.rc-error .rc-btns {
  margin-top: 30px;
}

/*======================
13. Wizards & Summaries
========================*/
.wz-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 36px;
}
.wz-steps.is-three {
  grid-template-columns: repeat(3, 1fr);
}
.wz-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--rc-tile);
  color: var(--rc-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: default;
}
.wz-steps li span {
  color: var(--rc-accent-text);
  font-family: var(--rc-ff-display);
  font-size: 21px;
  letter-spacing: 0;
}
.wz-steps li.is-done {
  cursor: pointer;
  color: var(--rc-heading);
}
.wz-steps li.is-active {
  background: var(--rc-petrol);
  color: #FFFFFF;
}
.wz-steps li.is-active span {
  color: var(--rc-signal-soft);
}
[data-theme="dark"] .wz-steps li.is-active {
  background: var(--rc-signal);
  color: #FFFFFF;
}
[data-theme="dark"] .wz-steps li.is-active span {
  color: #FFFFFF;
}
.wz-step {
  display: none;
}
.wz-step.is-active {
  display: block;
}
.wz-step > h3 {
  margin-bottom: 24px;
}
.wz-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--rc-line);
}
.wz-nav .rc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wz-review li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rc-line);
}
.wz-review li span {
  color: var(--rc-muted);
}
.wz-review li b {
  color: var(--rc-heading);
  font-weight: 500;
  text-align: end;
}
.wz-step .rc-check {
  margin-top: 20px;
}
.wz-done {
  padding: 20px 0 10px;
  text-align: center;
}
.done-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--rc-signal);
  color: #FFFFFF;
  font-size: 26px;
}
.tk-summary h3 {
  margin-bottom: 16px;
}
.tk-summary .rc-rows + .rc-rows {
  margin-top: 16px;
}
.tk-lines li {
  font-size: 15.5px;
}
.visit-small {
  margin: 16px 0 0;
  color: var(--rc-muted);
  font-size: 15px;
}
.visit-small a {
  color: var(--rc-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*======================
14. Packing Supplies Shop
========================*/
/*----- 14.1 Shop Grid -----*/
.side-posts .thumb.is-product {
  background: var(--rc-shelf);
}
.side-posts .thumb.is-product img {
  object-fit: contain;
}
.tr-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--rc-accent-text);
}
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rc-line-2);
}
.shop-toolbar p {
  margin: 0;
}
.shop-toolbar p b {
  font-size: 22px;
  font-weight: 500;
  color: var(--rc-heading);
}
.shop-sort {
  width: 230px;
}
[data-shop-grid] > .is-hidden {
  display: none;
}
/*----- 14.2 Product Page -----*/
.pd-main {
  position: relative;
  padding: 20px;
  background: var(--rc-shelf);
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.pd-thumbs button {
  padding: 4px;
  background: var(--rc-shelf);
  box-shadow: inset 0 0 0 1px var(--rc-line-2);
  transition: box-shadow 0.3s var(--rc-ease-out);
}
.pd-thumbs button.is-active,
.pd-thumbs button:hover {
  box-shadow: inset 0 0 0 2px var(--rc-signal);
}
.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-info h2 {
  margin: 6px 0 14px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
}
.pd-price {
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--rc-accent-text);
}
.pd-price del {
  margin-left: 10px;
  font-size: 26px;
  color: var(--rc-muted);
}
.pd-info .rc-kv {
  margin: 24px 0 30px;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.pd-buy .rc-btn {
  height: 54px;
}
.pd-wish {
  width: 54px;
  height: 54px;
}
.pd-wish.is-on {
  background: var(--rc-signal);
  color: var(--rc-ink);
}
.pd-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14.5px;
}
.pd-note i {
  font-size: 26px;
  color: var(--rc-accent-text);
}
.pd-tabs {
  margin-top: 80px;
}
.pd-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--rc-line-2);
}
.pd-tablist button {
  position: relative;
  padding: 0 0 18px;
  font-size: 19px;
  font-weight: 500;
  color: var(--rc-muted);
}
.pd-tablist button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--rc-signal);
  transform: scaleX(0);
  transition: transform 0.4s var(--rc-ease-out);
}
.pd-tablist button.is-active {
  color: var(--rc-heading);
}
.pd-tablist button.is-active::after {
  transform: scaleX(1);
}
.pd-tabs [role="tabpanel"] {
  max-width: 900px;
}
.review-list li {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rc-line);
}
.review-list img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.review-list b {
  margin-right: 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--rc-heading);
}
.review-list p {
  margin: 6px 0 0;
}

/*----- 14.3 Bag, Checkout & Wishlist -----*/
.bag-lines {
  border-top: 1px solid var(--rc-line-2);
}
.bag-line {
  display: grid;
  grid-template-columns: 110px 1fr auto auto 40px;
  align-items: center;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rc-line-2);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 110px 1fr auto 40px;
}
.bl-img {
  padding: 4px;
  background: var(--rc-shelf);
  box-shadow: inset 0 0 0 1px var(--rc-line);
}
.bl-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.bl-cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--rc-accent-text);
}
.bl-body h4 {
  margin: 2px 0 4px;
  font-size: 20px;
}
.bl-body h4 a {
  color: var(--rc-heading);
}
.bl-price {
  font-size: 14px;
  color: var(--rc-muted);
}
.bl-total {
  min-width: 90px;
  font-size: 20px;
  font-weight: 500;
  text-align: right;
  color: var(--rc-heading);
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rc-tile);
  color: var(--rc-heading);
  font-size: 13px;
  transition: background-color 0.3s var(--rc-ease-out), color 0.3s var(--rc-ease-out);
}
.bl-remove:hover {
  background: var(--rc-signal);
  color: var(--rc-ink);
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  position: relative;
  display: flex;
  gap: 10px;
}
.coupon-form input {
  width: 220px;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--rc-line-2);
  background: var(--rc-surface);
  color: var(--rc-heading);
  font-family: var(--rc-ff-body);
  font-size: 15px;
  outline: none;
}
.coupon-form input:focus {
  border-color: var(--rc-signal);
}
.coupon-form .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  white-space: nowrap;
}
.order-summary {
  position: sticky;
  top: 120px;
}
.ship-meter {
  height: 4px;
  overflow: hidden;
  background: var(--rc-line);
}
.ship-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--rc-signal);
  transition: width 0.8s var(--rc-ease-out);
}
.ship-note {
  margin: 10px 0 20px;
  font-size: 14px;
}
.ship-note b {
  color: var(--rc-accent-text);
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rc-line);
  font-size: 15px;
}
.ol-img {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  padding: 2px;
  background: var(--rc-shelf);
  box-shadow: inset 0 0 0 1px var(--rc-line);
}
.ol-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.ol-img b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rc-signal);
  color: var(--rc-ink);
  font-size: 11px;
}
.ol-name {
  flex: 1 1 auto;
  color: var(--rc-heading);
}
.order-lines li > b {
  font-weight: 500;
  color: var(--rc-heading);
}
.order-summary .rc-kv {
  margin-top: 18px;
}
.choice-list.is-pay {
  margin: 10px 0 20px;
}
.pay-choice {
  padding: 14px 56px 14px 18px;
}
.co-terms {
  margin-bottom: 20px;
}
.cart-empty,
.order-done {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 50px;
  text-align: center;
}
.cart-empty > i {
  margin-bottom: 20px;
  font-size: 46px;
  color: var(--rc-accent-text);
}
.cart-empty h2,
.order-done h2 {
  margin-bottom: 12px;
}
.order-done p b {
  color: var(--rc-accent-text);
}

/*----- 14.4 Toast -----*/
.rc-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--rc-petrol);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  color: var(--rc-paper);
  font-size: 14.5px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.4s var(--rc-ease-out), transform 0.4s var(--rc-ease-out), visibility 0.4s;
}
.rc-toast i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rc-signal);
  color: var(--rc-ink);
  font-size: 11px;
}
.rc-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/*======================
15. Blog & Account
========================*/
/*----- 15.1 Blog List -----*/
/* Relocia's blog: wide photo posts with a coral date tile, and coloured quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--rc-ease-out);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--rc-signal);
  color: var(--rc-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.post-date b {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 15, 0.28);
}
.post-thumb.is-video .rc-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--rc-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .rc-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--rc-accent-text);
}
.bp-body h3 a {
  color: var(--rc-heading);
}
.bp-body h3 a:hover {
  color: var(--rc-accent-text);
}
.bp-body .rc-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the quote post: a night card with the title set large in light caps and a faint quote mark behind it */
.blog-post.is-quote {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
  background: var(--rc-petrol);
  --rc-heading: #EEF0F2;
}
.blog-post.is-quote .pcd-meta,
.blog-post.is-quote .pcd-meta a {
  color: var(--rc-signal-soft);
}
.blog-post.is-quote .pcd-meta a:hover {
  color: #EEF0F2;
}
.blog-post.is-quote h3 {
  position: relative;
  max-width: 560px;
  margin: 12px 0 18px;
}
.blog-post.is-quote h3 a {
  color: #EEF0F2;
}
.blog-post.is-quote h3 a:hover {
  color: var(--rc-signal-soft);
}
.blog-post .nc-by {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.blog-post.is-quote .nc-by {
  color: rgba(238, 240, 242, 0.78);
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: 30px;
  color: rgba(238, 240, 242, 0.1);
  font-size: 120px;
}

/*----- 15.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .rc-rule {
  margin: 20px 0 26px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--rc-tile-2);
  border-inline-start: 4px solid var(--rc-signal);
}
.article-quote p {
  margin-bottom: 14px;
  color: var(--rc-heading);
  font-size: 24px;
  line-height: 1.5;
}
.article-quote cite {
  color: var(--rc-accent-text);
  font-size: 42px;
  font-style: normal;
  line-height: 1;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rc-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--rc-line);
}
.article-rows dt {
  color: var(--rc-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--rc-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rc-signal);
  color: var(--rc-ink);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--rc-petrol);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  background: var(--rc-tile);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .rc-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--rc-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--rc-accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.post-nav b {
  font-weight: 500;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--rc-tile);
  color: var(--rc-accent-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--rc-signal);
  color: var(--rc-ink);
}
.post-nav .pn-all {
  color: var(--rc-accent-text);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rc-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--rc-heading);
  font-size: 18px;
  font-weight: 500;
}
.comment-list li > div > span {
  color: var(--rc-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 15.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--rc-surface);
  box-shadow: var(--rc-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: var(--rc-petrol);
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(8, 11, 15, 0.1) 0%, rgba(8, 11, 15, 0.55) 45%, rgba(8, 11, 15, 0.95) 100%);
}
.account-side > .rc-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.account-side .as-seal {
  width: 96px;
}
.as-copy {
  margin-top: auto;
}
.as-copy .rc-script {
  color: var(--rc-signal);
  font-size: 44px;
  line-height: 1;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .rc-avatars .faces img,
.as-copy .rc-avatars .more {
  border-color: var(--rc-petrol);
}
.account-form {
  padding: 56px 54px;
}
.account-form .rc-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--rc-accent-text);
  font-weight: 500;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--rc-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--rc-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--rc-chilli);
  transition: width 0.4s var(--rc-ease-out), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--rc-signal);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--rc-leaf);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--rc-muted);
  font-size: 13px;
}

/*----- 15.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other: Relocia's split, with the seal turning on the seam */
.rc-bare-page {
  min-height: 100vh;
  background: var(--rc-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-seal {
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 2;
  width: 140px;
  margin-top: -70px;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner {
  --gl-1: #FFFFFF;
  --gl-2: #E4E9EA;
  --gl-alpha: 0.9;
}
[data-theme="dark"] .bare-inner {
  --gl-1: #0A1A1F;
  --gl-2: #17343C;
}
.bare-inner > .rc-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 58px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .rc-rule {
  margin: 24px 0;
}
.bare-inner .rc-lead {
  max-width: 560px;
}
.bare-inner .rc-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--rc-accent-text);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line .rc-ico {
  width: 58px;
  height: 58px;
}
.bare-line small {
  display: block;
  color: var(--rc-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--rc-heading);
  font-size: 22px;
  font-weight: 500;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  background: var(--rc-surface);
  color: var(--rc-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}
.launch-count .is-red {
  background: var(--rc-signal);
  color: var(--rc-ink);
}
.launch-count b {
  font-family: var(--rc-ff-body);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--rc-surface);
  color: var(--rc-heading);
  font-family: var(--rc-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--rc-signal);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.mini-nav .slider-arrow {
  border-color: transparent;
  background: var(--rc-paper);
  color: var(--rc-ink);
}

/*======================
16. Subheader
========================*/
/* two title moods from the base: a photo band with the title centred in white (about, services), and the petrol title
   band with the title large at the left (the request pages); corrugated ridges move behind both */
.rc-subheader {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #FFFFFF;
  --rc-heading: #FFFFFF;
  --rc-text: rgba(255, 255, 255, 0.84);
  --gl-1: #0F313A;
  --gl-2: #2C6170;
  --gl-alpha: 0.6;
}
.rc-subheader h1 {
  max-width: 980px;
}
.rc-subheader .rc-lead {
  max-width: 620px;
  margin: 18px 0 0;
}
.rc-subheader .rc-eyebrow {
  color: #FFFFFF;
}
.rc-subheader.is-photo {
  padding: 250px 0 120px;
  background: var(--rc-petrol);
}
.rc-subheader.is-photo .sub-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc-subheader.is-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(11, 38, 46, 0.62) 0%, rgba(11, 38, 46, 0.5) 50%, rgba(11, 38, 46, 0.72) 100%);
}
.rc-subheader.is-photo .rc-gl {
  --gl-alpha: 0.32;
}
.rc-subheader.is-photo .sub-copy {
  max-width: 900px;
  margin: 0 auto;
}
.rc-subheader.is-photo h1,
.rc-subheader.is-photo .rc-lead {
  margin-left: auto;
  margin-right: auto;
}
.rc-subheader.is-band {
  padding: 230px 0 90px;
}
.rc-subheader.is-band .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.rc-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--rc-ff-display);
  font-size: 15px;
  font-weight: 500;
}
.rc-crumbs a:hover {
  color: #FFFFFF;
}
.rc-crumbs i {
  color: var(--rc-signal-soft);
  font-size: 9px;
}
.rc-crumbs span {
  color: #FFFFFF;
}
.rc-subheader.is-band .rc-crumbs {
  flex-shrink: 0;
  justify-content: flex-end;
  margin: 0 0 6px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.07);
}

/*======================
17. Footer
========================*/
/* the base's petrol footer: four columns split by full-height hairlines; the first holds the taped box wobbling on
   its springs above the logo; corrugated ridges move slowly behind */
.rc-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  --gl-1: #0F313A;
  --gl-2: #1F4F5D;
  --gl-alpha: 0.5;
}
[data-theme="dark"] .rc-footer {
  --gl-1: #0D2A32;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.2fr;
  border-bottom: 1px solid var(--rc-line);
}
.footer-col {
  padding: 70px 44px 64px;
  border-left: 1px solid var(--rc-line);
}
.footer-col:first-child {
  border-left: 0;
  padding-left: 60px;
}
.footer-col h2 {
  display: flex;
  align-items: center;
  margin-bottom: 26px;
  color: #FFFFFF;
}
.footer-col .rc-chev {
  font-size: 15px;
}
.footer-box {
  position: relative;
  width: 230px;
  height: 170px;
  margin: -24px 0 6px -26px;
}
.footer-box canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.footer-logo img {
  height: 44px;
  width: auto;
}
.footer-brand p {
  max-width: 300px;
  margin: 22px 0 26px;
  color: var(--rc-text);
  font-size: 14.5px;
  line-height: 1.7;
}
.footer-links li + li {
  margin-top: 11px;
}
.footer-links a {
  color: var(--rc-text);
  font-size: 15px;
}
.footer-links a:hover {
  color: #FFFFFF;
}
.footer-address {
  margin-bottom: 14px;
  color: var(--rc-text);
  font-size: 15px;
  line-height: 1.6;
}
.footer-phone {
  display: block;
  color: #FFFFFF;
  font-family: var(--rc-ff-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.footer-mail {
  display: block;
  margin: 4px 0 18px;
  color: var(--rc-muted);
  font-size: 14.5px;
}
.footer-open {
  margin-bottom: 8px;
  font-size: 13.5px;
  color: var(--rc-text);
}
.footer-open .rc-dot {
  background: rgba(255, 255, 255, 0.5);
}
.footer-open .is-open .rc-dot {
  background: #6BCB93;
  box-shadow: 0 0 0 4px rgba(107, 203, 147, 0.22);
}
.hours-list li {
  padding: 6px 0;
  font-size: 13.5px;
}
.hours-list li > b {
  font-family: var(--rc-ff-body);
  font-weight: 500;
  font-size: 13.5px;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 60px;
  color: var(--rc-muted);
  font-size: 13.5px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: #FFFFFF;
}
.footer-bottom ul {
  display: flex;
  gap: 26px;
}