:root {
  --orange: #ff5b22;
  --grey: #626769;
  --charcoal: #111415;
  --ink: #111415;
  --paper: #ffffff;
  --white: #ffffff;
  --line: rgba(26, 29, 30, 0.16);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}
button,
input {
  font: inherit;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.topline {
  height: 34px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--orange);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
}
.topline span:nth-child(2) {
  margin-left: auto;
}
.topline a {
  display: flex;
  align-items: center;
  gap: 7px;
}
header {
  height: 100px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  gap: 46px;
  background: #fff;
  position: relative;
  z-index: 30;
}
.logo {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-right: auto;
}
.logo b {
  display: flex;
  font:
    900 italic 38px/0.8 Arial,
    sans-serif;
  letter-spacing: -0.14em;
}
.logo b i {
  font-style: italic;
}
.logo b i:nth-child(odd) {
  color: var(--orange);
}
.logo b i:nth-child(2) {
  color: var(--grey);
}
.logo b:after {
  content: "";
  position: absolute;
  width: 81px;
  height: 5px;
  margin-top: 34px;
  background: linear-gradient(
    90deg,
    var(--orange) 0 34%,
    var(--grey) 34% 62%,
    var(--orange) 62%
  );
  transform: skew(-16deg);
}
.logo > span {
  display: flex;
  flex-direction: column;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.14em;
}
.logo em {
  color: var(--orange);
  font-style: normal;
}
.logo small {
  color: var(--grey);
  font-size: 9px;
  font-weight: 900;
}
nav {
  display: flex;
  gap: 28px;
  font-size: 11px;
  font-weight: 800;
}
nav a:hover {
  color: var(--orange);
}
.header-cta {
  height: 48px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--charcoal);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}
.menu {
  display: none;
  border: 0;
  background: transparent;
}
.hero {
  min-height: 760px;
  padding: 75px 4vw 90px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: 7vw;
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  color: #fff;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to right, #000, transparent 80%);
}
.hero-copy,
.hero-visual {
  position: relative;
  z-index: 2;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
}
.eyebrow i {
  width: 28px;
  height: 2px;
  background: var(--orange);
}
.hero h1 {
  margin: 28px 0 32px;
  font:
    500 clamp(68px, 7.8vw, 124px)/0.78 Georgia,
    serif;
  letter-spacing: -0.07em;
}
.hero h1 em,
.flush h2 em,
.closing h2 em {
  color: var(--orange);
  font-weight: 400;
}
.hero-copy > p {
  max-width: 650px;
  color: #bdc0c0;
  font-size: 18px;
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  gap: 12px;
  margin: 34px 0;
}
.button {
  min-height: 54px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.orange {
  background: var(--orange);
  color: #fff;
}
.line {
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.trust-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: #a8adad;
  font-size: 9px;
  font-weight: 800;
}
.trust-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.trust-row svg {
  width: 14px;
  color: var(--orange);
}
.hero-visual {
  height: 600px;
}
.hero-photo {
  width: 83%;
  height: 100%;
  margin-left: auto;
  background: #282b2c url("/rjn-bathroom-project-1-overview.jpeg") center 50%/cover;
  box-shadow: 28px 28px 0 var(--orange);
}
.visual-tag {
  position: absolute;
  left: 0;
  bottom: 45px;
  width: 285px;
  padding: 26px;
  background: #fff;
  color: var(--ink);
}
.visual-tag span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.visual-tag strong {
  display: block;
  margin-top: 14px;
  font:
    500 28px/1.05 Georgia,
    serif;
}
.visual-tag em {
  color: var(--orange);
  font-weight: 400;
}
.roundel {
  position: absolute;
  right: -10px;
  top: -28px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--orange);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1em;
  transform: rotate(8deg);
}
.intro {
  padding: 135px 6vw 80px;
  display: grid;
  grid-template-columns: 0.4fr 1.6fr;
  gap: 60px;
}
.section-no {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #737878;
}
.intro h2,
.standard h2 {
  margin: 0;
  font:
    500 clamp(54px, 6vw, 92px)/0.9 Georgia,
    serif;
  letter-spacing: -0.06em;
}
.intro h2 em,
.standard h2 em {
  color: var(--orange);
  font-weight: 400;
}
.intro p {
  max-width: 650px;
  margin: 32px 0 0;
  color: #616767;
  font-size: 17px;
  line-height: 1.7;
}
.services {
  padding: 0 4vw 130px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.services article {
  min-height: 430px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: #fff;
}
.services article:nth-child(even) {
  background: #ffffff;
}
.service-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service-top span {
  font-size: 10px;
  font-weight: 900;
  color: #777;
}
.service-top svg {
  width: 36px;
  height: 36px;
  color: var(--orange);
  stroke-width: 1.5;
}
.services h3 {
  margin: auto 0 20px;
  font:
    500 32px/1 Georgia,
    serif;
}
.services p {
  min-height: 88px;
  color: #646969;
  font-size: 14px;
  line-height: 1.65;
}
.services a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: 900;
}
.services a svg {
  width: 16px;
  color: var(--orange);
}
.bathrooms {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 760px;
  background: #fff;
}
.bathroom-photo {
  min-height: 620px;
  background: #303334 url("/rjn-bathroom-project-1-overview.jpeg") center/cover;
}
.bathroom-copy {
  padding: 9vw 7vw;
}
.eyebrow.dark {
  color: var(--orange);
}
.bathroom-copy h2 {
  margin: 28px 0;
  font:
    500 clamp(60px, 6vw, 96px)/0.84 Georgia,
    serif;
  letter-spacing: -0.07em;
}
.bathroom-copy > p {
  color: #626868;
  line-height: 1.75;
}
.choice-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 30px 0;
}
.choice-row span {
  padding: 9px 11px;
  border: 1px solid var(--line);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.charcoal {
  background: var(--charcoal);
  color: #fff;
}
.flush {
  padding: 125px 7vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  background: var(--charcoal);
  color: #fff;
}
.section-no.light {
  color: #929898;
}
.flush h2 {
  margin: 28px 0 0;
  font:
    500 clamp(55px, 6vw, 92px)/0.9 Georgia,
    serif;
  letter-spacing: -0.06em;
}
.flush-copy > p {
  color: #b4b9b8;
  font-size: 17px;
  line-height: 1.75;
}
.flush ul {
  margin: 30px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  list-style: none;
}
.flush li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d7d9d9;
  font-size: 11px;
}
.flush li svg {
  width: 16px;
  color: var(--orange);
}
.flush-copy > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--orange);
  font-size: 10px;
  font-weight: 900;
}
.standard {
  padding: 140px 6vw;
}
.standard-title {
  display: grid;
  grid-template-columns: 0.4fr 1.6fr;
  gap: 60px;
}
.standard-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.standard-grid div {
  min-height: 190px;
  padding: 28px;
  border: 1px solid var(--line);
}
.standard-grid span {
  color: var(--orange);
  font-size: 9px;
  font-weight: 900;
}
.standard-grid p {
  max-width: 280px;
  margin: 55px 0 0;
  font:
    500 22px/1.2 Georgia,
    serif;
}
.quote {
  padding: 130px 6vw;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 8vw;
  background: var(--orange);
  color: #fff;
}
.quote-copy h2 {
  margin: 27px 0;
  font:
    500 clamp(57px, 6vw, 88px)/0.87 Georgia,
    serif;
  letter-spacing: -0.06em;
}
.quote-copy h2 em {
  color: var(--charcoal);
  font-weight: 400;
}
.quote-copy > p {
  max-width: 560px;
  line-height: 1.75;
}
.quote-note {
  margin-top: 40px;
  padding: 20px;
  display: flex;
  gap: 14px;
  background: rgba(255, 255, 255, 0.12);
}
.quote-note svg {
  flex: 0 0 auto;
}
.quote-note span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  line-height: 1.5;
}
.quote-tool {
  min-height: 560px;
  padding: 45px;
  background: #fff;
  color: var(--ink);
  box-shadow: 24px 24px 0 var(--charcoal);
}
.tool-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.quote-tool h3 {
  margin: 38px 0 25px;
  font:
    500 34px Georgia,
    serif;
}
.quote-options {
  display: grid;
  gap: 10px;
}
.quote-options button {
  height: 58px;
  justify-content: space-between;
  border-radius: 0;
  font-size: 11px;
}

/* 300-point quality pass: navigation, trust, accessibility and conversion */
.skip-link {
  position: fixed;
  left: 18px;
  top: 12px;
  z-index: 1000;
  padding: 12px 16px;
  background: var(--charcoal);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
}
.menu {
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
  cursor: pointer;
}
.menu svg {
  width: 27px;
  height: 27px;
}
.hero-photo,
.bathroom-photo {
  background-image: none;
}
.hero-photo img,
.bathroom-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.credentials-rail {
  padding: 20px 5vw;
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  background: #fff;
  border-bottom: 1px solid var(--line);
  color: #4e5454;
}
.credentials-rail span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.credentials-rail svg {
  width: 17px;
  height: 17px;
  color: var(--orange);
}
.faqs {
  padding: 130px 6vw;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8vw;
  background: #fff;
}
.faq-heading h2 {
  margin: 27px 0;
  font: 500 clamp(52px, 5.5vw, 84px)/0.9 Georgia, serif;
  letter-spacing: -0.06em;
}
.faq-heading h2 em {
  color: var(--orange);
  font-weight: 400;
}
.faq-heading p {
  max-width: 520px;
  color: #676d6d;
  line-height: 1.7;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  position: relative;
  padding: 27px 48px 27px 0;
  list-style: none;
  cursor: pointer;
  font: 500 22px/1.25 Georgia, serif;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary:after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 22px;
  color: var(--orange);
  font: 400 31px/1 Arial, sans-serif;
}
.faq-list details[open] summary:after {
  content: "−";
}
.faq-list p {
  max-width: 700px;
  margin: -4px 0 27px;
  color: #626868;
  font-size: 14px;
  line-height: 1.75;
}
.consent-check {
  display: grid !important;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5;
}
.consent-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--orange);
}
.consent-check span {
  font-size: 10px;
  font-weight: 500;
}
.consent-check a {
  color: var(--orange);
  font-weight: 900;
  text-decoration: underline;
}
.whatsapp-continue.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.floating-whatsapp {
  position: fixed;
  left: 24px;
  bottom: 25px;
  z-index: 55;
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 28px;
  background: #087f5b;
  color: #fff;
  box-shadow: 0 14px 35px rgba(7, 94, 84, 0.3);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.floating-whatsapp:hover {
  background: #075e54;
  transform: translateY(-3px);
}
.floating-whatsapp svg {
  width: 20px;
  height: 20px;
}
section[id] {
  scroll-margin-top: 110px;
}
@media (max-width: 950px) {
  .menu {
    display: flex;
  }
  .faqs {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .credentials-rail {
    padding: 18px 22px;
    justify-content: flex-start;
    gap: 15px;
  }
  .credentials-rail span {
    width: calc(50% - 8px);
    line-height: 1.35;
  }
  .faqs {
    padding: 90px 22px;
    gap: 38px;
  }
  .faq-heading h2 {
    font-size: 53px;
  }
  .faq-list summary {
    font-size: 20px;
  }
  .floating-whatsapp {
    left: 12px;
    bottom: 79px;
    width: 52px;
    min-height: 52px;
    padding: 0;
    justify-content: center;
  }
  .floating-whatsapp span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Visible Facebook access in the main header */
.header-facebook {
  min-height: 48px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #1877f2;
  color: #1877f2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-facebook:hover { background: #1877f2; color: #fff; }
.header-facebook svg { width: 19px; height: 19px; }
@media (max-width: 950px) {
  .header-facebook { margin-left: auto; padding: 0; width: 48px; }
  .header-facebook span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 600px) {
  header .header-facebook { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Four honest customer journeys */
.route-picker {
  padding: 110px 6vw;
  background: #ffffff;
}
.route-picker-heading {
  max-width: 820px;
  margin-bottom: 48px;
}
.route-picker-heading h2 {
  margin: 17px 0;
  color: var(--charcoal);
  font: 500 clamp(48px, 6vw, 82px)/0.95 Georgia, serif;
  letter-spacing: -0.055em;
}
.route-picker-heading h2 em { color: var(--orange); font-weight: 500; }
.route-picker-heading p { max-width: 700px; color: #5d6363; line-height: 1.75; }
.route-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
.route-cards button {
  min-height: 330px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  background: #fff;
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.route-cards button:hover,
.route-cards button:focus-visible { transform: translateY(-6px); background: var(--charcoal); color: #fff; }
.route-cards button.featured { background: var(--orange); color: #fff; }
.route-cards button > span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.route-cards button.featured > span { color: #fff; }
.route-cards small { margin: 14px 0 -8px; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.route-cards strong { margin: auto 0 16px; font: 500 29px/1 Georgia, serif; }
.route-cards p { min-height: 68px; margin: 0; color: inherit; font-size: 13px; line-height: 1.6; opacity: .76; }
.route-cards em { margin-top: 24px; display: flex; align-items: center; gap: 8px; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.route-cards svg { width: 16px; }
@media (max-width: 1050px) { .route-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .route-picker { padding: 82px 22px; }
  .route-cards { grid-template-columns: 1fr; gap: 10px; }
  .route-cards button { min-height: 245px; }
}

/* Lightweight service and legal pages */
.simple-page {
  min-height: 100vh;
  background: var(--paper);
}
.simple-header {
  min-height: 88px;
  padding: 18px 5vw;
  display: flex;
  align-items: center;
  gap: 35px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 25px rgba(23, 25, 26, 0.08);
}
.simple-header > a {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.simple-header strong {
  color: var(--orange);
  font: 900 italic 34px Arial, sans-serif;
}
.simple-header span {
  max-width: 150px;
  color: var(--grey);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.simple-header nav {
  flex-wrap: wrap;
}
.simple-hero {
  padding: 110px 7vw 90px;
  background: var(--charcoal);
  color: #fff;
}
.simple-hero > span {
  color: var(--orange);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
}
.back-home {
  width: fit-content;
  margin-bottom: 42px;
  padding-bottom: 7px;
  display: block;
  border-bottom: 2px solid var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.back-home:hover {
  color: var(--orange);
}
.simple-hero h1 {
  max-width: 1050px;
  margin: 27px 0;
  font: 500 clamp(58px, 7vw, 108px)/0.88 Georgia, serif;
  letter-spacing: -0.06em;
}
.simple-hero p {
  max-width: 760px;
  color: #c4c8c7;
  font-size: 17px;
  line-height: 1.7;
}
.simple-content {
  max-width: 950px;
  margin: 0 auto;
  padding: 100px 24px;
}
.simple-content h2 {
  margin: 58px 0 18px;
  font: 500 clamp(32px, 4vw, 52px)/1 Georgia, serif;
  letter-spacing: -0.035em;
}
.simple-content h2:first-child {
  margin-top: 0;
}
.simple-content p,
.simple-content li {
  color: #5d6363;
  font-size: 16px;
  line-height: 1.8;
}
.simple-content a {
  color: var(--orange);
  font-weight: 800;
  text-decoration: underline;
}
.simple-content li::marker {
  color: var(--orange);
}
.end-home-link {
  margin-top: 65px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}
.simple-cta {
  padding: 80px 7vw;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--orange);
  color: #fff;
}
.simple-cta h2 {
  margin: 0 auto 0 0;
  font: 500 clamp(36px, 4vw, 58px)/1 Georgia, serif;
}
.simple-cta a {
  min-height: 50px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.simple-footer {
  padding: 55px 5vw;
  display: block;
  background: var(--charcoal);
  color: #fff;
}
.simple-footer p {
  color: #aeb3b2;
  line-height: 1.7;
}
.simple-footer nav {
  margin-top: 24px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 9px;
  font-weight: 900;
}
@media (max-width: 700px) {
  .simple-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
  .simple-header nav {
    gap: 15px;
  }
  .simple-hero {
    padding: 80px 22px 65px;
  }
  .simple-hero h1 {
    font-size: 56px;
  }
  .simple-content {
    padding: 75px 22px;
  }
  .simple-cta {
    padding: 65px 22px;
  }
}
.quote-options svg {
  width: 17px;
  color: var(--orange);
}
.back {
  padding: 20px 0 0;
  border: 0;
  background: transparent;
  color: #6c7272;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.quote-tool label {
  display: block;
  margin: 18px 0;
  color: #555b5b;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.quote-tool input {
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: none;
  color: var(--ink);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.quote-tool input:focus {
  border-color: var(--orange);
}
.continue {
  width: 100%;
  height: 54px;
  margin-top: 18px;
  border-radius: 0;
  background: var(--charcoal);
  color: #fff;
}
.whatsapp-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.whatsapp-continue:hover,
.whatsapp-continue:focus-visible {
  background: #075e54;
}
.prototype-note {
  color: #777;
  font-size: 9px;
  line-height: 1.5;
}
.closing {
  padding: 125px 6vw;
  text-align: center;
  background: #fff;
}
.closing > svg {
  width: 34px;
  height: 34px;
  color: var(--orange);
}
.closing > p {
  margin-top: 26px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
}
.closing h2 {
  margin: 25px auto 35px;
  font:
    500 clamp(55px, 6vw, 92px)/0.9 Georgia,
    serif;
  letter-spacing: -0.06em;
}
.closing a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--orange);
  font-size: 10px;
  font-weight: 900;
}
footer {
  padding: 70px 5vw 35px;
  display: grid;
  grid-template-columns: 0.65fr 1fr 0.7fr;
  gap: 40px;
  align-items: start;
  background: var(--charcoal);
  color: #fff;
}
.review-invite {
  padding: clamp(48px, 7vw, 78px) 5vw;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  background: #f3f4f3;
  border-top: 1px solid #d9dcda;
}
.review-stars { display: flex; gap: 5px; color: var(--orange); }
.review-stars svg { width: 21px; height: 21px; }
.review-invite span { color: var(--orange); font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.review-invite h2 { max-width: 720px; margin: 9px 0 8px; color: var(--charcoal); font: 500 clamp(28px, 3.2vw, 45px)/1.03 Georgia, serif; letter-spacing: -.04em; }
.review-invite p { max-width: 650px; margin: 0; color: #59605f; font-size: 15px; line-height: 1.65; }
.review-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 21px; background: white; color: #252a2e; border: 1px solid #d9dcda; border-radius: 4px; box-shadow: 0 10px 28px rgba(17,20,21,.1); font-size: 11px; font-weight: 950; letter-spacing: .035em; white-space: nowrap; }
.review-button svg { width: 17px; }
.review-button:hover { background: #fff; color: var(--orange); border-color: #c7cac8; transform: translateY(-2px); box-shadow: 0 15px 34px rgba(17,20,21,.15); }
.google-g { flex: 0 0 auto; font: 900 28px/1 Arial, sans-serif; letter-spacing: -.12em; background: conic-gradient(from -32deg, #4285f4 0 25%, #34a853 25% 42%, #fbbc05 42% 64%, #ea4335 64% 79%, #4285f4 79% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.google-word { display: inline-flex; margin-left: 2px; font: 700 13px/1 Arial, sans-serif; letter-spacing: 0; }
.google-word i { font-style: normal; }
.google-word i:nth-child(1), .google-word i:nth-child(4) { color: #4285f4; }
.google-word i:nth-child(2), .google-word i:nth-child(6) { color: #ea4335; }
.google-word i:nth-child(3) { color: #fbbc05; }
.google-word i:nth-child(5) { color: #34a853; }
.google-footer-link { display: inline-flex; align-items: center; gap: 5px; }
.google-g-small { font-size: 16px; }
.footer-logo {
  margin: 0;
}
.footer-logo .logo small {
  color: #aeb3b2;
}
footer > p {
  max-width: 410px;
  color: #aeb3b2;
  font-size: 13px;
  line-height: 1.7;
}
footer > div {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  font-size: 9px;
  font-weight: 900;
}
footer > small {
  grid-column: 1/3;
  color: #777f7e;
  font-size: 9px;
  line-height: 1.6;
}
.sorted-credit {
  justify-self: end;
  color: #aeb3b2;
  font-size: 9px;
}
.sorted-credit:hover {
  color: var(--orange);
}
@media (max-width: 950px) {
  header nav {
    display: none;
  }
  .header-cta {
    display: none;
  }
  .menu {
    display: block;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 100px;
  }
  .hero-copy {
    max-width: 780px;
  }
  .hero-visual {
    height: 560px;
  }
  .services {
    grid-template-columns: 1fr 1fr;
  }
  .bathrooms {
    grid-template-columns: 1fr;
  }
  .bathroom-photo {
    min-height: 650px;
  }
  .flush,
  .quote {
    grid-template-columns: 1fr;
  }
  .standard-grid {
    grid-template-columns: 1fr 1fr;
  }
  .quote-copy {
    max-width: 720px;
  }
}
@media (max-width: 820px) {
  .review-invite { grid-template-columns: 1fr; gap: 20px; }
  .review-button { width: 100%; white-space: normal; }
}
@media (max-width: 600px) {
  .topline {
    padding: 0 18px;
  }
  .topline span:nth-child(2) {
    display: none;
  }
  .topline a {
    margin-left: auto;
  }
  header {
    height: 84px;
    padding: 0 20px;
  }
  .logo b {
    font-size: 31px;
  }
  .logo b:after {
    width: 67px;
    margin-top: 29px;
  }
  .hero {
    min-height: auto;
    padding: 85px 22px 55px;
    gap: 55px;
  }
  .hero h1 {
    font-size: 65px;
  }
  .hero-copy > p {
    font-size: 16px;
  }
  .hero-actions {
    flex-direction: column;
  }
  .trust-row {
    gap: 10px;
  }
  .hero-visual {
    height: 440px;
  }
  .hero-photo {
    width: 90%;
    box-shadow: 14px 14px 0 var(--orange);
  }
  .visual-tag {
    width: 245px;
    left: 0;
    bottom: 25px;
    padding: 20px;
  }
  .visual-tag strong {
    font-size: 23px;
  }
  .roundel {
    width: 88px;
    height: 88px;
    right: 0;
    font-size: 7px;
  }
  .intro,
  .standard {
    padding: 90px 22px;
  }
  .intro,
  .standard-title {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .intro h2,
  .standard h2 {
    font-size: 52px;
  }
  .services {
    padding: 0 22px 90px;
    grid-template-columns: 1fr;
  }
  .services article {
    min-height: 340px;
  }
  .bathroom-photo {
    min-height: 460px;
  }
  .bathroom-copy {
    padding: 85px 22px;
  }
  .bathroom-copy h2 {
    font-size: 60px;
  }
  .flush,
  .quote {
    padding: 90px 22px;
    gap: 55px;
  }
  .flush h2,
  .quote-copy h2 {
    font-size: 54px;
  }
  .flush ul {
    grid-template-columns: 1fr;
  }
  .standard-grid {
    margin-top: 50px;
    grid-template-columns: 1fr;
  }
  .standard-grid div {
    min-height: 145px;
  }
  .standard-grid p {
    margin-top: 35px;
  }
  .quote-tool {
    padding: 28px 22px;
    box-shadow: 12px 12px 0 var(--charcoal);
  }
  .closing {
    padding: 90px 22px;
  }
  .closing h2 {
    font-size: 53px;
  }
  footer {
    padding: 60px 22px 30px;
    grid-template-columns: 1fr;
  }
  footer > div {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  footer > small {
    grid-column: auto;
  }
  .sorted-credit {
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Premium RJN art direction */
.hero:before {
  content: "RJN";
  position: absolute;
  right: -0.04em;
  bottom: -0.23em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  font:
    900 italic clamp(220px, 36vw, 600px)/1 Arial,
    sans-serif;
  letter-spacing: -0.15em;
  pointer-events: none;
}
.hero:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(var(--orange), transparent 74%);
}
.hero-copy {
  animation: rise-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-visual {
  animation: rise-in 0.8s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-photo {
  position: relative;
  filter: saturate(0.82) contrast(1.05);
  transition:
    filter 0.5s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-visual:hover .hero-photo {
  filter: saturate(1) contrast(1.03);
  transform: translate(-5px, -5px);
}
.roundel {
  box-shadow: 0 0 0 9px rgba(255, 91, 34, 0.16);
  animation: float 4s ease-in-out infinite;
}
.visual-tag {
  border-top: 5px solid var(--orange);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
}
.services article {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.services article:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s ease;
}
.services article:hover {
  z-index: 2;
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(23, 25, 26, 0.13);
}
.services article:hover:before {
  transform: scaleY(1);
}
.services article:hover .service-top svg {
  transform: rotate(-8deg) scale(1.1);
}
.service-top svg {
  transition: transform 0.35s ease;
}
.bathroom-photo {
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
}
.bathroom-photo:before {
  content: "RJN / BATHROOMS";
  position: absolute;
  left: 30px;
  bottom: 30px;
  padding: 12px 15px;
  background: var(--orange);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.bathroom-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 55%, rgba(23, 25, 26, 0.42));
}
.bathroom-copy {
  position: relative;
}
.bathroom-copy:after {
  content: "04";
  position: absolute;
  right: 5vw;
  top: 4vw;
  color: rgba(23, 25, 26, 0.055);
  font:
    900 150px/1 Arial,
    sans-serif;
}
.choice-row span {
  background: #fff;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.choice-row span:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.standard-grid div {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.25)
  );
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}
.standard-grid div:hover {
  background: #fff;
  transform: translateY(-5px);
}
.standard-grid div:after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.standard-grid div:hover:after {
  transform: scaleX(1);
}
.quote {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #ff5b22 0%,
    var(--orange) 54%,
    #ff5b22 100%
  );
}
.quote:before {
  content: "QUOTE";
  position: absolute;
  left: -0.05em;
  bottom: -0.25em;
  color: rgba(255, 255, 255, 0.075);
  font:
    900 260px/1 Arial,
    sans-serif;
}
.quote-copy,
.quote-tool {
  position: relative;
  z-index: 1;
}
.quote-tool {
  border-top: 8px solid var(--charcoal);
}
.quote-options button {
  transition:
    background 0.2s,
    color 0.2s,
    padding 0.2s;
}
.quote-options button:hover {
  padding-left: 22px;
  background: var(--charcoal);
  color: #fff;
}
.quote-options button:hover svg {
  color: var(--orange);
}
.button,
.header-cta {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.button:hover,
.header-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes float {
  0%,
  100% {
    transform: rotate(8deg) translateY(0);
  }
  50% {
    transform: rotate(5deg) translateY(-9px);
  }
}
@media (max-width: 600px) {
  .hero:before {
    font-size: 210px;
    bottom: -0.08em;
    right: -0.16em;
  }
  .hero:after {
    width: 4px;
  }
  .bathroom-photo {
    background-attachment: scroll;
  }
  .bathroom-photo:before {
    left: 18px;
    bottom: 18px;
  }
  .bathroom-copy:after {
    font-size: 95px;
    top: 35px;
    right: 15px;
  }
  .services article:hover {
    transform: none;
  }
  .quote:before {
    font-size: 130px;
  }
  .visual-tag {
    border-top-width: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .hero-visual,
  .roundel {
    animation: none;
  }
  .hero-photo,
  .services article,
  .standard-grid div {
    transition: none;
  }
}

/* The site should feel alive, without getting in the customer's way */
.proof-rail {
  overflow: hidden;
  padding: 19px 0;
  background: var(--orange);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 35px rgba(255, 91, 34, 0.2);
}
.proof-rail > div {
  width: max-content;
  display: flex;
  gap: 34px;
  animation: rjn-marquee 42s linear infinite;
}
.proof-rail span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
  white-space: nowrap;
}
.proof-rail i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--charcoal);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}
.service-depth {
  padding: 0 6vw 125px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 8vw;
}
.depth-intro h2 {
  max-width: 620px;
  margin: 28px 0 0;
  font:
    500 clamp(45px, 5vw, 75px)/0.94 Georgia,
    serif;
  letter-spacing: -0.055em;
}
.depth-list {
  border-top: 1px solid var(--line);
}
.depth-list > div {
  display: grid;
  grid-template-columns: 0.36fr 1fr;
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.depth-list strong {
  font:
    500 22px Georgia,
    serif;
}
.depth-list p {
  margin: 0;
  color: #676d6d;
  font-size: 13px;
  line-height: 1.75;
}
.journey {
  padding: 135px 6vw;
  background: #101314;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.journey:after {
  content: "FLOW";
  position: absolute;
  right: -0.06em;
  top: -0.2em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.055);
  font:
    900 300px/1 Arial,
    sans-serif;
}
.journey-heading {
  max-width: 850px;
  position: relative;
  z-index: 1;
}
.journey-heading h2 {
  margin: 27px 0;
  font:
    500 clamp(58px, 6vw, 92px)/0.88 Georgia,
    serif;
  letter-spacing: -0.06em;
}
.journey-heading h2 em {
  color: var(--orange);
  font-weight: 400;
}
.journey-heading > p {
  max-width: 640px;
  color: #aeb4b3;
  font-size: 16px;
  line-height: 1.7;
}
.journey-grid {
  margin-top: 75px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 1;
}
.journey-grid article {
  min-height: 330px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  transition:
    transform 0.35s ease,
    background 0.35s ease;
}
.journey-grid article:hover {
  transform: translateY(-10px);
  background: #1c2021;
}
.journey-grid article > div {
  display: flex;
  justify-content: space-between;
}
.journey-grid span {
  color: var(--orange);
  font-size: 9px;
  font-weight: 900;
}
.journey-grid svg {
  width: 29px;
  height: 29px;
  color: var(--orange);
  stroke-width: 1.5;
}
.journey-grid h3 {
  margin: 95px 0 18px;
  font:
    500 27px Georgia,
    serif;
}
.journey-grid p {
  color: #aab0af;
  font-size: 13px;
  line-height: 1.7;
}
.choices {
  padding: 140px 6vw;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8vw;
  background: #fff;
}
.choices h2 {
  margin: 27px 0;
  font:
    500 clamp(52px, 5.5vw, 84px)/0.9 Georgia,
    serif;
  letter-spacing: -0.06em;
}
.choices h2 em {
  color: var(--orange);
  font-weight: 400;
}
.choices > div > p {
  color: #676d6d;
  line-height: 1.7;
}
.choice-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
.choice-cards article {
  min-height: 340px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform 0.35s ease;
}
.choice-cards article:hover {
  transform: translateY(-9px);
}
.choice-cards article.featured {
  min-height: 400px;
  background: var(--orange);
  color: #fff;
  box-shadow: 20px 20px 0 var(--charcoal);
}
.choice-cards span {
  margin-bottom: auto;
  font-size: 9px;
  font-weight: 900;
}
.choice-cards h3 {
  margin: 0 0 18px;
  font:
    500 31px Georgia,
    serif;
}
.choice-cards p {
  min-height: 67px;
  margin: 0;
  color: #656b6b;
  font-size: 12px;
  line-height: 1.65;
}
.choice-cards .featured p {
  color: #fff;
}
.quote-tool select {
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  outline: none;
}
.upload-box {
  min-height: 92px;
  padding: 17px !important;
  display: flex !important;
  align-items: center;
  gap: 15px;
  border: 1px dashed #b8bcbb !important;
  cursor: pointer;
}
.upload-box svg {
  width: 25px;
  height: 25px;
  color: var(--orange);
  flex: 0 0 auto;
}
.upload-box span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #777;
  font-size: 9px;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}
.upload-box strong {
  color: var(--ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.upload-box input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.quote-success {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quote-success > svg {
  width: 54px;
  height: 54px;
  padding: 12px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
}
.quote-success > span {
  margin-top: 24px;
  color: var(--orange);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.quote-success p {
  color: #676d6d;
  line-height: 1.65;
}
@keyframes rjn-marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes scroll-reveal {
  from {
    opacity: 0.1;
    transform: translateY(55px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes image-drift {
  from {
    background-position: center 68%;
  }
  to {
    background-position: center 32%;
  }
}
@supports (animation-timeline: view()) {
  .intro > div,
  .service-depth > *,
  .bathroom-copy,
  .journey-heading,
  .choices > div,
  .flush > div,
  .standard-title,
  .quote-copy,
  .quote-tool {
    animation: scroll-reveal both linear;
    animation-timeline: view();
    animation-range: entry 8% cover 35%;
  }
  .services article,
  .journey-grid article,
  .standard-grid div,
  .choice-cards article {
    animation: scroll-reveal both linear;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }
  .bathroom-photo {
    animation: image-drift both linear;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

html {
  scroll-padding-top: 100px;
}
header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(23, 25, 26, 0.08);
  backdrop-filter: blur(14px);
}
.mobile-nav {
  display: none;
}
@media (max-width: 950px) {
  header nav.open {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    padding: 22px 5vw;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    box-shadow: 0 20px 35px rgba(23, 25, 26, 0.14);
  }
  header nav.open a {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 600px) {
  body {
    padding-bottom: 67px;
  }
  header nav.open {
    top: 84px;
    padding: 16px 22px;
  }
  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    height: 67px;
    padding: 0 7px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(23, 25, 26, 0.12);
  }
  .mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #5c6263;
    font-size: 8px;
    font-weight: 900;
  }
  .mobile-nav svg {
    width: 17px;
    height: 17px;
  }
  .mobile-nav .mobile-quote {
    margin: 7px 0;
    background: var(--orange);
    color: #fff;
  }
  .mobile-nav .mobile-quote svg {
    transform: rotate(-45deg);
  }
}
@media (max-width: 950px) {
  .service-depth,
  .choices {
    grid-template-columns: 1fr;
  }
  .journey-grid {
    grid-template-columns: 1fr 1fr;
  }
  .choice-cards {
    max-width: 760px;
  }
}
@media (max-width: 600px) {
  .service-depth,
  .choices {
    padding: 90px 22px;
  }
  .depth-list > div {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .journey {
    padding: 90px 22px;
  }
  .journey-grid {
    margin-top: 50px;
    grid-template-columns: 1fr;
  }
  .journey-grid article {
    min-height: 260px;
  }
  .journey-grid h3 {
    margin-top: 70px;
  }
  .choice-cards {
    grid-template-columns: 1fr;
  }
  .choice-cards article,
  .choice-cards article.featured {
    min-height: 260px;
  }
  .choice-cards article.featured {
    box-shadow: 10px 10px 0 var(--charcoal);
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .proof-rail > div {
    animation-duration: 22s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .proof-rail > div {
    animation: none;
  }
  .journey-grid article,
  .choice-cards article {
    transition: none;
  }
  @supports (animation-timeline: view()) {
    .intro > div,
    .service-depth > *,
    .bathroom-copy,
    .journey-heading,
    .choices > div,
    .flush > div,
    .standard-title,
    .quote-copy,
    .quote-tool,
    .services article,
    .journey-grid article,
    .standard-grid div,
    .choice-cards article,
    .bathroom-photo {
      animation: none;
    }
  }
}
.footer-phone {
  display: inline-block;
  margin-top: 8px;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.footer-phone:hover {
  color: var(--orange);
}
.footer-email {
  display: inline-block;
  margin-top: 5px;
  color: #aeb3b2;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.footer-email:hover {
  color: var(--orange);
}
.footer-facebook {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-facebook svg {
  width: 15px;
  height: 15px;
}
.back-to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 60;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  box-shadow: 0 16px 40px rgba(23, 25, 26, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.86);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.2s ease;
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.back-to-top:hover {
  background: var(--charcoal);
  transform: translateY(-4px);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
}
.back-to-top span {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
@media (max-width: 600px) {
  .back-to-top {
    right: 14px;
    bottom: 81px;
    width: 52px;
    height: 52px;
  }
  .proof-rail {
    padding: 16px 0;
  }
  .proof-rail > div {
    animation-duration: 34s;
  }
}
.logo b i:nth-child(odd) {
  color: var(--grey);
}
.logo b i:nth-child(2) {
  color: var(--orange);
}
.logo b:after {
  background: linear-gradient(
    90deg,
    var(--grey) 0 34%,
    var(--orange) 34% 62%,
    var(--grey) 62%
  );
}
.quote-options button {
  padding: 0 16px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.continue {
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.logo {
  gap: 6px;
}
.logo-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo-lockup b {
  position: relative;
  font-family: Georgia, serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.12em;
}
.logo-lockup b:after {
  display: none;
}
.logo-lockup b i {
  font-style: normal;
}
.logo-lockup b i:nth-child(odd) {
  color: transparent;
  background: linear-gradient(
    135deg,
    #f0f0ee 0%,
    #85898a 40%,
    #d6d7d5 68%,
    #666a6b 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}
.logo-lockup b i:nth-child(2) {
  color: var(--orange);
  text-shadow: 0 1px 0 rgba(17, 20, 21, 0.35);
}
.logo-lockup em {
  margin-top: 6px;
  color: var(--orange);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.07em;
  white-space: nowrap;
}
.logo > small {
  align-self: center;
  color: var(--orange);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.footer-logo .logo-lockup b i:nth-child(odd) {
  background: linear-gradient(
    135deg,
    #f6f6f4,
    #777b7c 45%,
    #d9dad8 75%,
    #686c6d
  );
  -webkit-background-clip: text;
  background-clip: text;
}
.footer-logo .logo-lockup em,
.footer-logo > small {
  color: var(--orange);
}

@media (max-width: 600px) {
  .hero-visual { height: 320px; padding: 0 8px 10px; }
  .hero-photo { width: 100%; height: 300px; aspect-ratio: auto; margin: 0; box-shadow: 8px 8px 0 var(--orange); }
  .hero-photo img { object-position: center 50%; }
  .visual-tag { display: none; }
  .roundel { top: -1rem; right: -.2rem; width: 70px; height: 70px; font-size: .55rem; }
}

/* 2026 cohesive visual refinement */
.hero{min-height:720px;gap:clamp(2.5rem,6vw,6rem);padding-inline:max(1.5rem,calc((100vw - 1240px)/2))}
.hero h1{max-width:760px;margin:1.5rem 0 1.75rem;font:500 clamp(3.8rem,6.5vw,7rem)/.94 Georgia,serif;letter-spacing:-.06em}.hero h1 em{font-style:normal}.hero-copy>p{max-width:620px;font-size:1.08rem;line-height:1.7}.hero-visual{height:570px}.hero-photo{width:90%;box-shadow:18px 18px 0 var(--orange)}.hero-photo img{object-position:center 58%}.visual-tag{left:-1.5rem;bottom:2rem;width:260px;padding:1.25rem 1.4rem}.visual-tag strong{margin-top:.55rem;font:500 1.28rem/1.25 Georgia,serif}.roundel{right:-.5rem;top:-1rem;width:96px;height:96px}
.intro{padding:clamp(5rem,8vw,8rem) max(1.5rem,calc((100vw - 1180px)/2)) 4.5rem;grid-template-columns:210px minmax(0,820px);gap:clamp(2rem,6vw,6rem)}.intro h2,.standard h2{font-size:clamp(3rem,5vw,5.25rem);line-height:.97}.services{max-width:1280px;margin:auto;padding:0 1.5rem 7rem;gap:1px}.services article{min-height:360px;padding:2rem}.services h3{font-size:1.8rem}.services p{min-height:0;font-size:1rem}.section-no{font-size:.72rem;line-height:1.5}
@media(max-width:600px){body{padding-bottom:64px}.hero{display:flex;min-height:auto;padding:3.75rem 1.25rem 2.5rem;gap:2.25rem;flex-direction:column}.hero:before{display:none}.hero-copy{width:100%}.eyebrow{font-size:.67rem;line-height:1.5;letter-spacing:.12em}.hero h1{margin:1.15rem 0 1.25rem;font-size:clamp(3rem,14.5vw,4.15rem);line-height:.96;letter-spacing:-.06em}.hero-copy>p{font-size:1rem;line-height:1.65}.hero-actions{margin:1.6rem 0 1.35rem;gap:.65rem}.button{min-height:52px;font-size:.75rem}.trust-row{display:grid;gap:.65rem;font-size:.73rem}.hero-visual{width:100%;height:auto;padding:0 8px 10px}.hero-photo{width:100%;height:auto;aspect-ratio:4/4.5;margin:0;box-shadow:10px 10px 0 var(--orange)}.hero-photo img{object-position:center 58%}.visual-tag{left:-.25rem;bottom:1rem;width:218px;padding:1rem}.visual-tag span{font-size:.62rem}.visual-tag strong{font-size:1.08rem}.roundel{top:-1.25rem;right:-.35rem;width:78px;height:78px;font-size:.58rem}.credentials-rail{padding:1rem 1.25rem;gap:.65rem}.credentials-rail span{width:100%;font-size:.72rem}.meet-richard+.intro{padding-top:4rem}.intro{padding:4.25rem 1.25rem 2.5rem;gap:1rem}.intro h2,.standard h2{font-size:2.75rem;line-height:1}.intro p{margin-top:1.25rem;font-size:1rem}.services{padding:0 1.25rem 4.5rem;gap:.75rem}.services article{min-height:0;padding:1.4rem}.services h3{margin:2.25rem 0 .75rem;font-size:1.7rem}.services p{font-size:1rem}.service-depth,.choices,.journey,.faqs,.standard,.quote,.flush,.closing{padding:4.5rem 1.25rem}.journey-grid{margin-top:2rem;gap:.75rem}.journey-grid article{min-height:0;padding:1.5rem}.journey-grid h3{margin-top:2.5rem}.choice-cards article,.choice-cards article.featured{min-height:0}.faq-heading h2,.closing h2,.flush h2,.quote-copy h2{font-size:2.75rem;line-height:1}.mobile-nav{height:64px}.floating-whatsapp{bottom:76px}}

/* Curated RJN project showcase — part of the primary bundle. */
.real-projects{padding:clamp(4rem,6vw,6.5rem) 1.25rem;background:#ffffff;color:#111415}.projects-heading{width:min(1040px,100%);margin:0 auto 2rem}.projects-heading span{display:block;margin-bottom:.65rem;color:var(--orange);font-size:.68rem;font-weight:900;letter-spacing:.14em}.projects-heading h2{max-width:720px;margin:0;font:500 clamp(2.25rem,4vw,4rem)/1 Georgia,serif;letter-spacing:-.045em}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,500px));justify-content:center;gap:2rem;width:min(1040px,100%);margin:auto}.project-card{min-width:0}.project-card h3{margin:0 0 .8rem;font:800 .72rem/1.2 Arial,Helvetica,sans-serif;letter-spacing:.12em;text-transform:uppercase}.project-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.project-photo{height:170px;margin:0;overflow:hidden;background:#d8d9d7}.project-photo img{width:100%;height:100%;display:block;object-fit:cover}.project-photos-botanical .project-photo-0 img{object-position:center 55%}.project-photos-contemporary .project-photo-0 img{object-position:center 86%;transform:scale(1.25);transform-origin:center bottom}.project-photo img{transition:transform .35s ease}.project-photo:hover img{transform:scale(1.025)}.project-photos-contemporary .project-photo-0:hover img{transform:scale(1.28)}
@media(max-width:760px){.real-projects{padding:3rem 1.1rem}.projects-heading{max-width:560px;margin-bottom:1.5rem}.projects-heading h2{font-size:2.35rem}.project-grid{grid-template-columns:1fr;max-width:560px;gap:2rem}.project-photo{height:155px}}
@media(max-width:950px){.intro{display:block!important;grid-template-columns:minmax(0,1fr)!important}.intro .section-no{display:block;margin-bottom:1rem}.intro>div{width:100%;min-width:0}}
@media(max-width:600px){.real-projects{padding:2.75rem 1rem}.projects-heading{max-width:340px}.projects-heading h2{font-size:2rem}.project-grid{max-width:340px;gap:1.65rem}.project-card h3{margin-bottom:.55rem}.project-photos{gap:.4rem}.project-photo{height:118px}}
@media(prefers-reduced-motion:reduce){.project-photo img{transition:none}}

.continue:disabled{cursor:not-allowed;opacity:.45}.form-guidance{margin:.75rem 0 0;color:#646a6a;font-size:.82rem;line-height:1.5}.quote .form-guidance{color:#646a6a}

/* Final mobile system: calm spacing, compact type and one clear action bar. */
@media(max-width:600px){
  body{overflow-x:hidden;padding-bottom:64px}
  section[id]{scroll-margin-top:84px}
  .credentials-rail{padding:.85rem 1rem;gap:.5rem}.credentials-rail span{font-size:.68rem}
  .real-projects{padding:2.5rem 1rem}.projects-heading{margin-bottom:1.25rem}.projects-heading h2{font-size:1.9rem;line-height:1.05}.project-grid{gap:1.4rem}.project-photo{height:112px}
  .intro{display:block;grid-template-columns:1fr;padding:3.25rem 1.15rem 2.5rem}.intro .section-no{display:block;margin-bottom:1rem}.intro>div{width:100%;min-width:0}.intro h2{max-width:100%;font-size:2.35rem;line-height:1.02}.intro p{max-width:100%;font-size:.97rem;line-height:1.65}
  .services{padding:0 1rem 3.5rem;gap:.6rem}.services article{padding:1.2rem;min-height:0}.services h3{margin:1.5rem 0 .6rem;font-size:1.45rem}.services p{font-size:.95rem;line-height:1.55}.services a{padding-top:.9rem}
  .journey{padding:3.75rem 1.15rem}.journey:after{font-size:145px}.journey-heading h2{font-size:2.65rem;line-height:.98}.journey-heading>p{font-size:.96rem;line-height:1.65}.journey-grid{margin-top:1.75rem;gap:.6rem}.journey-grid article{padding:1.25rem;min-height:0}.journey-grid h3{margin-top:1.5rem;font-size:1.45rem}.journey-grid p{font-size:.92rem;line-height:1.55}
  .flush{padding:3.75rem 1.15rem;gap:2rem}.flush h2{font-size:2.6rem;line-height:.98}.flush-copy>p{font-size:.97rem;line-height:1.65}.flush ul{margin:1.4rem 0;gap:.7rem}
  .standard{padding:3.75rem 1.15rem}.standard h2{font-size:2.45rem;line-height:1}.standard-grid{margin-top:1.75rem}.standard-grid div{min-height:0;padding:1.15rem}.standard-grid p{margin-top:1.4rem;font-size:1.15rem}
  .faqs{padding:3.75rem 1.15rem;gap:2rem}.faq-heading h2{font-size:2.45rem;line-height:1}.faq-list summary{padding:1.15rem 0;font-size:1.05rem}
  .quote{padding:3.75rem 1.15rem;gap:2.25rem}.quote-copy h2{font-size:2.55rem;line-height:.98}.quote-tool{min-height:0;padding:1.35rem 1rem;box-shadow:8px 8px 0 var(--charcoal)}.quote-tool h3{margin:1.5rem 0 1rem;font-size:1.7rem}.quote-options button{min-height:54px;height:auto;padding:.85rem}.continue{min-height:52px}
  .closing{padding:4rem 1.15rem}.closing h2{font-size:2.45rem;line-height:1.02}
  footer{padding:3.5rem 1.15rem 2rem;gap:1.5rem}footer>div{gap:.85rem 1.1rem}
  .floating-whatsapp,.back-to-top{display:none}
}

/* Keep the introduction in a single, dependable reading column everywhere. */
.intro{display:block!important;grid-template-columns:none!important;width:100%;max-width:1180px;margin-inline:auto}
.intro .section-no{display:block;margin-bottom:clamp(1rem,2vw,1.5rem)}
.intro>div{width:100%;min-width:0}

/* RJN final presentation layer. This intentionally sits after the historic
   stylesheet so every viewport follows one predictable responsive system. */
:root {
  --rjn-orange: #ff5b22;
  --rjn-charcoal: #111415;
  --rjn-silver: #717779;
  --rjn-paper: #ffffff;
  --rjn-white: #ffffff;
}

body {
  overflow-x: clip;
  background: var(--rjn-paper);
  text-rendering: optimizeLegibility;
}

header {
  height: 92px;
  padding-inline: max(24px, calc((100vw - 1320px) / 2));
  gap: clamp(20px, 3vw, 42px);
}

.hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  min-height: 680px;
  padding: 64px max(24px, calc((100vw - 1240px) / 2)) 72px;
  gap: clamp(48px, 6vw, 88px);
}

.hero h1 {
  font-size: clamp(58px, 6.1vw, 96px);
  line-height: .92;
}

.hero-visual {
  height: min(540px, 58vw);
}

.hero-photo {
  width: 100%;
  height: 100%;
  box-shadow: 16px 16px 0 var(--rjn-orange);
}

.hero-photo img {
  object-position: center 54%;
}

.credentials-rail {
  justify-content: center;
  padding: 18px max(24px, calc((100vw - 1240px) / 2));
  gap: 14px 30px;
}

/* The genuine work appears immediately after the hero and behaves like a
   considered case-study gallery rather than a wall of phone photographs. */
.real-projects {
  padding: clamp(64px, 7vw, 104px) 24px;
  background: #ffffff;
}

.projects-heading {
  width: min(1120px, 100%);
  margin: 0 auto 34px;
}

.projects-heading h2 {
  max-width: 760px;
  font-size: clamp(42px, 5vw, 68px);
  line-height: .96;
}

.projects-heading p {
  max-width: 600px;
  margin: 18px 0 0;
  color: #62686a;
  font-size: 16px;
  line-height: 1.65;
}

.project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(1120px, 100%);
  gap: clamp(24px, 3vw, 42px);
}

.project-card {
  padding: 12px;
  background: var(--rjn-white);
  box-shadow: 0 18px 50px rgba(28, 32, 34, .11);
}

.project-card h3 {
  margin: 0;
  padding: 12px 10px 16px;
  color: var(--rjn-charcoal);
  font-size: 13px;
  letter-spacing: .08em;
}

.project-photos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 360px 92px;
  gap: 8px;
}

.project-photo {
  height: auto;
  min-width: 0;
}

.project-photo:first-child {
  grid-column: 1 / -1;
}

.project-photo img,
.project-photos-contemporary .project-photo-0 img {
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
}

.project-photos-botanical .project-photo-0 img {
  object-position: center 56%;
}

.project-photos-contemporary .project-photo-0 img {
  object-position: center 73%;
}

.project-photo:hover img,
.project-photos-contemporary .project-photo-0:hover img {
  transform: none;
}

.intro {
  max-width: 1120px;
  padding: clamp(72px, 8vw, 112px) 24px 52px;
}

.intro > div {
  max-width: 880px;
}

.intro h2 {
  font-size: clamp(48px, 5.5vw, 76px);
  line-height: .98;
}

.services {
  width: min(1240px, calc(100% - 48px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-inline: 0;
  gap: 10px;
}

.services article {
  min-height: 340px;
  border: 0;
  box-shadow: 0 12px 34px rgba(28, 32, 34, .07);
}

@media (max-width: 950px) {
  header {
    height: 84px;
    padding-inline: 22px;
  }

  header nav.open {
    top: 84px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
    min-height: 620px;
    padding: 56px 28px 64px;
    gap: 38px;
  }

  .hero h1 {
    font-size: clamp(48px, 7vw, 68px);
  }

  .hero-visual {
    height: 460px;
  }

  .project-photos {
    grid-template-rows: 310px 82px;
  }

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

@media (max-width: 600px) {
  body {
    padding-bottom: 64px;
  }

  .topline {
    height: 28px;
    padding: 0 16px;
    justify-content: center;
    font-size: 8px;
  }

  .topline span {
    display: none;
  }

  .topline a {
    display: flex;
  }

  header {
    height: 76px;
    padding: 0 16px;
    gap: 13px;
  }

  header nav.open {
    top: 76px;
  }

  .logo b {
    font-size: 32px;
  }

  .logo-lockup em {
    font-size: 7px;
  }

  .logo > small {
    font-size: 6px;
  }

  .header-facebook {
    width: 42px !important;
    height: 42px;
  }

  .menu {
    width: 42px;
    height: 42px;
    padding: 8px;
  }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding: 46px 18px 42px;
    gap: 32px;
  }

  .hero h1 {
    margin: 16px 0 20px;
    font-size: clamp(46px, 13.5vw, 61px);
    line-height: .95;
  }

  .hero-copy > p {
    font-size: 16px;
    line-height: 1.58;
  }

  .hero-actions {
    display: grid;
    margin: 24px 0;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 52px;
  }

  .hero-visual {
    width: 100%;
    height: auto;
    padding: 0 7px 7px 0;
  }

  .hero-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 4.35;
    margin: 0;
    box-shadow: 8px 8px 0 var(--rjn-orange);
  }

  .hero-photo img {
    object-position: center 54%;
  }

  .roundel {
    width: 68px;
    height: 68px;
  }

  .credentials-rail {
    padding: 14px 18px;
  }

  .real-projects {
    padding: 52px 16px 58px;
  }

  .projects-heading {
    max-width: none;
    margin-bottom: 24px;
  }

  .projects-heading h2 {
    max-width: 330px;
    font-size: 38px;
    line-height: 1;
  }

  .projects-heading p {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.55;
  }

  .project-grid {
    max-width: none;
    gap: 22px;
  }

  .project-card {
    padding: 8px;
  }

  .project-card h3 {
    padding: 10px 6px 13px;
    font-size: 11px;
    line-height: 1.35;
  }

  .project-photos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: min(72vw, 310px) 70px;
    gap: 6px;
  }

  .project-photo {
    height: auto;
  }

  .intro {
    max-width: none;
    padding: 58px 18px 34px;
  }

  .intro .section-no {
    margin-bottom: 15px;
  }

  .intro h2 {
    max-width: 100%;
    font-size: 40px;
    line-height: 1;
  }

  .intro p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.6;
  }

  .services {
    width: auto;
    margin: 0 14px;
    grid-template-columns: 1fr;
    padding: 0 0 58px;
    gap: 10px;
  }

  .services article {
    min-height: 0;
    padding: 22px;
  }

  .services h3 {
    margin: 34px 0 10px;
    font-size: 26px;
  }

  .services p {
    font-size: 16px;
    line-height: 1.55;
  }

  .journey,
  .flush,
  .standard,
  .faqs,
  .quote,
  .closing {
    padding-inline: 18px;
  }

  .mobile-nav {
    height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-photo img {
    transition: none;
  }
}

/* Focused homepage: four project routes, one case study, one decisive enquiry. */
.premium-intro { padding-bottom: 46px; }
.services { grid-template-columns: repeat(2,minmax(0,1fr)); width:min(1320px,calc(100% - 48px)); }
.services .primary-service { position:relative; isolation:isolate; min-height:470px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; color:#fff; background:#17191a center/cover no-repeat; box-shadow:0 30px 70px rgba(17,19,20,.18); }
.services .primary-service::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(18,20,21,.08) 15%,rgba(18,20,21,.92) 88%); transition:background .5s ease; }
.services .primary-service::after { content:""; position:absolute; inset:auto 0 0; z-index:-1; height:5px; background:var(--rjn-orange); transform:scaleX(.16); transform-origin:left; transition:transform .55s cubic-bezier(.16,1,.3,1); }
.services .primary-service:hover::after { transform:scaleX(1); }
.services .primary-service:hover::before { background:linear-gradient(180deg,rgba(18,20,21,.02),rgba(18,20,21,.82) 88%); }
.services .primary-service h3,.services .primary-service p,.services .primary-service a,.services .primary-service .service-top { color:#fff; }
.services .primary-service h3 { margin-top:110px; font-size:clamp(2rem,3vw,3.2rem); max-width:540px; }
.services .primary-service p { max-width:570px; color:rgba(255,255,255,.82); }
.service-route-1 { background-image:url('/rjn-bathroom-project-1-overview.jpeg') !important; }
.service-route-2 { background-image:linear-gradient(135deg,#35393b,#151718) !important; }
.service-route-3 { background-image:linear-gradient(135deg,#292d2f,#111314) !important; }
.service-route-4 { background-image:linear-gradient(135deg,#34383a,#17191a) !important; }
.service-route-3::before,.service-route-4::before { background:linear-gradient(135deg,rgba(255,91,34,.2),transparent 55%),repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.045) 80px) !important; }
.featured-project { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:clamp(36px,6vw,92px); align-items:center; padding:clamp(80px,10vw,150px) max(24px,calc((100vw - 1320px)/2)); overflow:hidden; background:#181b1c; color:#fff; }
.featured-project-copy h2 { margin:24px 0; font:500 clamp(3.5rem,6vw,6.8rem)/.87 Georgia,serif; letter-spacing:-.07em; }
.featured-project-copy h2 em { color:var(--rjn-orange); font-style:italic; }
.featured-project-copy p { max-width:520px; color:rgba(255,255,255,.72); font-size:1.05rem; line-height:1.7; }
.featured-project-copy a { display:inline-flex; align-items:center; gap:12px; margin-top:24px; color:#fff; font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; border-bottom:2px solid var(--rjn-orange); padding-bottom:8px; }
.featured-project-images { position:relative; min-height:680px; }
.featured-shot { position:absolute; margin:0; overflow:hidden; box-shadow:0 28px 70px rgba(0,0,0,.35); }
.featured-shot img { width:100%; height:100%; object-fit:cover; }
.featured-shot-1 { inset:0 16% 8% 0; clip-path:polygon(7% 0,100% 0,93% 100%,0 94%); }
.featured-shot-2 { right:0; top:9%; width:34%; height:39%; border:7px solid #181b1c; }
.featured-shot-3 { right:3%; bottom:0; width:42%; height:38%; border:7px solid #181b1c; }
.secondary-services { display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,48px); padding:26px 24px; background:var(--rjn-orange); color:#fff; font-size:.68rem; font-weight:900; letter-spacing:.1em; }
.secondary-services>a { display:flex; align-items:center; gap:8px; }
.secondary-services>a:hover { color:#17191a; }
.standard { padding-block:clamp(70px,8vw,110px); }
.standard-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }

@media(max-width:760px){
  .services { grid-template-columns:1fr; width:auto; }
  .services .primary-service { min-height:420px; }
  .featured-project { grid-template-columns:1fr; padding:70px 18px; }
  .featured-project-copy h2 { font-size:3.5rem; }
  .featured-project-images { min-height:500px; }
  .secondary-services { align-items:flex-start; flex-direction:column; gap:15px; }
  .standard-grid { grid-template-columns:1fr 1fr; }
}

.simple-page .simple-hero { position:relative; overflow:hidden; background:linear-gradient(125deg,#17191a 0 68%,#25292b 68%); }
.simple-page .simple-hero::after { content:"RJN"; position:absolute; right:-.08em; bottom:-.28em; color:rgba(255,255,255,.035); font:900 italic clamp(16rem,34vw,34rem)/1 Arial,sans-serif; letter-spacing:-.16em; }
.simple-page .simple-hero>* { position:relative; z-index:1; }
.service-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:52px 0 74px; }
.service-gallery img { width:100%; height:460px; object-fit:cover; }
.service-gallery img:nth-child(2),.service-gallery img:nth-child(4) { transform:translateY(28px); }
.service-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; padding:1px; background:rgba(255,255,255,.12); color:#fff; }
.service-links span,.service-links a { min-height:100px; padding:22px; display:flex; align-items:flex-end; background:#202426; }
.service-links span { color:var(--rjn-orange); font-size:.65rem; letter-spacing:.2em; }
.service-links a { font:500 1.15rem Georgia,serif; }
.service-links a:hover { background:var(--rjn-orange); color:#fff; }
@media(max-width:700px){
  .service-gallery { grid-template-columns:1fr 1fr; gap:6px; }
  .service-gallery img { height:260px; }
  .service-links { grid-template-columns:1fr 1fr; }
  .service-links span,.service-links a { min-height:84px; padding:16px; }
}

/* RJN art direction — an architectural editorial built around genuine work. */
:root { --scroll: 0; }
body::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .032; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scroll-line { position: fixed; inset: 0 auto auto 0; z-index: 500; width: 100%; height: 4px; background: var(--rjn-orange); transform: scaleX(var(--scroll)); transform-origin: left; }
.site-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; gap: 22px; overflow: hidden; background: #17191a; color: #fff; transition: transform .9s cubic-bezier(.77,0,.18,1); }
.site-loader.finished { transform: translateY(-105%); }
.site-loader>div { display: flex; font: 900 italic clamp(5rem,16vw,12rem)/.7 Arial,sans-serif; letter-spacing: -.15em; transform: translateX(-.06em); }
.site-loader>div span:nth-child(odd) { color: var(--rjn-orange); }
.site-loader>div span:nth-child(2) { color: #858b8d; }
.site-loader p { margin: 0; text-align: center; font-size: .62rem; font-weight: 900; letter-spacing: .35em; }
.site-loader>i { position: fixed; left: 0; bottom: 17%; width: 34%; height: 3px; background: var(--rjn-orange); animation: rjnLoad 1.15s cubic-bezier(.65,0,.35,1) both; }
@keyframes rjnLoad { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

.hero { isolation: isolate; min-height: calc(100svh - 126px); background: #181b1c; }
.hero::before { content: "RJN"; position: absolute; left: -.07em; bottom: -.25em; z-index: 0; color: rgba(255,255,255,.025); font: 900 italic clamp(18rem,38vw,40rem)/1 Arial,sans-serif; letter-spacing: -.17em; }
.hero::after { content: "01 / COMPLETE INTERIORS"; position: absolute; right: 18px; top: 50%; z-index: 4; color: rgba(255,255,255,.7); font-size: .55rem; font-weight: 900; letter-spacing: .28em; writing-mode: vertical-rl; }
.hero-grid { background-size: 48px 48px; opacity: .6; }
.hero h1 { position: relative; z-index: 2; font-size: clamp(4.4rem,7.2vw,7.7rem); line-height: .82; text-wrap: balance; }
.hero h1 em { display: inline-block; position: relative; }
.hero h1 em::after { content: ""; position: absolute; left: .03em; right: -.08em; bottom: -.09em; height: .12em; background: var(--rjn-orange); transform: skewX(-28deg); z-index: -1; }
.hero-photo { position: relative; clip-path: polygon(9% 0,100% 0,100% 93%,0 100%); box-shadow: none; }
.hero-photo::after { content: "GENUINE RJN PROJECT"; position: absolute; right: 0; bottom: 0; padding: 13px 18px; background: var(--rjn-orange); color: #fff; font-size: .52rem; font-weight: 900; letter-spacing: .18em; }
.hero-photo img { transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.hero-photo:hover img { transform: scale(1.035); }
.roundel { right: auto; left: -34px; top: 9%; width: 122px; height: 122px; box-shadow: 0 20px 50px rgba(0,0,0,.25); animation: roundelFloat 5s ease-in-out infinite; }
@keyframes roundelFloat { 50% { transform: rotate(2deg) translateY(-10px); } }
.proof-rail { position: relative; z-index: 5; transform: rotate(-1deg) scale(1.015); box-shadow: 0 15px 40px rgba(0,0,0,.18); }

.real-projects { position: relative; padding-top: clamp(7rem,11vw,12rem); overflow: hidden; }
.real-projects::before { content: "REAL WORK"; position: absolute; left: -.035em; top: -.06em; color: rgba(28,32,34,.045); font: 900 clamp(7rem,19vw,20rem)/1 Arial,sans-serif; letter-spacing: -.1em; white-space: nowrap; }
.projects-heading { position: relative; z-index: 1; display: grid; grid-template-columns: .55fr 1.45fr; column-gap: 4rem; align-items: end; }
.projects-heading>span { align-self: start; margin-top: .8rem; color: var(--rjn-orange); font-size: .62rem; font-weight: 900; letter-spacing: .25em; }
.projects-heading h2 { margin: 0; font: 500 clamp(3.8rem,7vw,7rem)/.84 Georgia,serif; letter-spacing: -.075em; }
.projects-heading p { grid-column: 2; }
.project-grid { position: relative; z-index: 1; width: min(1320px,100%); gap: clamp(1rem,2vw,2rem); perspective: 1400px; }
.project-card { position: relative; padding: 0; overflow: hidden; background: #181b1c; box-shadow: 0 35px 80px rgba(28,32,34,.2); transition: transform .65s cubic-bezier(.16,1,.3,1); }
.project-card:first-child { transform: translateY(3.5rem) rotate(-.5deg); }
.project-card:last-child { transform: translateY(-1.5rem) rotate(.5deg); }
.project-card:hover { transform: translateY(-10px) rotate(0); }
.project-card h3 { position: absolute; z-index: 3; left: 24px; top: 22px; padding: 10px 12px; background: rgba(24,27,28,.86); backdrop-filter: blur(10px); color: #fff; }
.project-photos { grid-template-rows: min(43vw,560px) 125px; gap: 3px; }
.project-photo { overflow: hidden; }
.project-photo img { filter: saturate(.92) contrast(1.03); transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.project-photo:hover img { transform: scale(1.06); filter: saturate(1.08) contrast(1.03); }

.art-break { position: relative; overflow: hidden; min-height: 78vh; padding: clamp(6rem,10vw,11rem) max(24px,calc((100vw - 1240px)/2)); display: flex; flex-direction: column; justify-content: center; background: var(--rjn-orange); color: #fff; }
.art-break::before { content: "R"; position: absolute; right: -.05em; top: -.28em; color: rgba(255,255,255,.1); font: 900 italic min(70vw,55rem)/1 Arial,sans-serif; }
.art-break>p,.art-break>h2,.art-break>div { position: relative; z-index: 1; }
.art-break>p { margin: 0 0 1.8rem; font-size: .65rem; font-weight: 900; letter-spacing: .32em; }
.art-break h2 { margin: 0; font: 500 clamp(5rem,10.5vw,11rem)/.78 Georgia,serif; letter-spacing: -.08em; }
.art-break h2 em { color: #181b1c; font-weight: 400; }
.art-break>div { display: flex; gap: 1rem; margin-top: 4rem; }
.art-break>div span { padding: .8rem 1.1rem; border: 1px solid rgba(255,255,255,.5); font-size: .58rem; font-weight: 900; letter-spacing: .18em; }

.services article { position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease; }
.services article::after { content: ""; position: absolute; inset: 0; background: var(--rjn-orange); transform: translateY(101%); transition: transform .55s cubic-bezier(.77,0,.18,1); z-index: 0; }
.services article>* { position: relative; z-index: 1; }
.services article:hover { transform: translateY(-12px); color: #fff; }
.services article:hover::after { transform: none; }
.services article:hover p,.services article:hover .service-top span,.services article:hover svg { color: #fff; }
.flush { position: relative; overflow: hidden; }
.flush::after { content: "BUILD"; position: absolute; left: -.05em; bottom: -.26em; color: rgba(255,255,255,.035); font: 900 clamp(12rem,29vw,29rem)/1 Arial,sans-serif; letter-spacing: -.11em; }
.flush>* { position: relative; z-index: 1; }
.standard-grid div { transition: background .3s ease, color .3s ease, transform .3s ease; }
.standard-grid div:hover { background: #181b1c; color: #fff; transform: translateY(-8px); }
.closing { position: relative; overflow: hidden; }
.closing::after { content: "RJN"; position: absolute; left: -.06em; bottom: -.35em; color: rgba(255,255,255,.08); font: 900 italic clamp(12rem,32vw,33rem)/1 Arial,sans-serif; letter-spacing: -.16em; }
.closing>* { position: relative; z-index: 1; }
.sorted-signature { position: relative; overflow: hidden; padding: clamp(6rem,11vw,11rem) max(24px,calc((100vw - 1240px)/2)); background: #fff; color: #181b1c; }
.sorted-signature::after { content: "SORTED"; position: absolute; right: -.05em; bottom: -.28em; color: rgba(255,91,34,.08); font: 900 clamp(9rem,24vw,25rem)/1 Arial,sans-serif; letter-spacing: -.12em; }
.sorted-signature small,.sorted-signature h2 { position: relative; z-index: 1; }
.sorted-signature small { color: var(--rjn-orange); font-size: .62rem; font-weight: 900; letter-spacing: .24em; }
.sorted-signature h2 { margin: 1.6rem 0 0; font: 500 clamp(4.4rem,9vw,9rem)/.84 Georgia,serif; letter-spacing: -.075em; }
.sorted-signature h2 em { color: var(--rjn-orange); font-weight: 400; }

@media (max-width: 950px) {
  .hero::after { display: none; }
  .projects-heading { grid-template-columns: 1fr; gap: 1rem; }
  .projects-heading p { grid-column: auto; }
  .project-card:first-child,.project-card:last-child { transform: none; }
  .project-photos { grid-template-rows: min(62vw,490px) 100px; }
}
@media (max-width: 600px) {
  .site-loader p { font-size: .48rem; letter-spacing: .2em; }
  .hero { min-height: auto; }
  .hero::before { font-size: 72vw; bottom: 8%; }
  .hero h1 { font-size: clamp(3.6rem,15vw,5rem); line-height: .86; }
  .roundel { left: -8px; width: 92px; height: 92px; }
  .real-projects::before { font-size: 29vw; top: 0; }
  .projects-heading h2 { font-size: 3.45rem; }
  .project-grid { gap: 1rem; }
  .project-photos { grid-template-rows: min(87vw,390px) 78px; }
  .art-break { min-height: 70vh; padding-inline: 18px; }
  .art-break h2 { font-size: clamp(4.1rem,19vw,6rem); }
  .art-break>div { flex-wrap: wrap; margin-top: 2.7rem; }
  .sorted-signature { padding: 6.5rem 18px; }
  .sorted-signature h2 { font-size: 3.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader { display: none; }
  .site-loader>i,.roundel { animation: none; }
}

/* Cinematic refinement — immersive genuine work, editorial pacing. */
html,body { max-width:100%; overflow-x:hidden; }
header { position:absolute; top:34px; left:0; right:0; z-index:40; background:linear-gradient(180deg,rgba(12,14,15,.88),rgba(12,14,15,.08)); color:#fff; box-shadow:none; }
header::after { content:""; position:absolute; left:max(24px,calc((100vw - 1320px)/2)); right:max(24px,calc((100vw - 1320px)/2)); bottom:0; height:1px; background:rgba(255,255,255,.2); }
header .logo { transform:scale(1.16); transform-origin:left center; }
header .logo small,header .logo-lockup em { color:#fff; }
header nav a { color:rgba(255,255,255,.86); }
header nav a:hover { color:var(--rjn-orange); }
.header-facebook { border-color:rgba(255,255,255,.35) !important; color:#fff !important; }
.header-cta { background:var(--rjn-orange); }

.hero { position:relative; display:flex; align-items:flex-end; min-height:calc(100svh - 34px); padding:clamp(160px,20vh,230px) max(24px,calc((100vw - 1320px)/2)) clamp(64px,9vh,104px); overflow:hidden; background:#111; }
.hero::before { content:""; inset:0; z-index:1; background:linear-gradient(90deg,rgba(9,11,12,.92) 0%,rgba(9,11,12,.63) 43%,rgba(9,11,12,.14) 70%),linear-gradient(0deg,rgba(9,11,12,.72),transparent 45%),radial-gradient(circle at 78% 35%,rgba(255,91,34,.20),transparent 34%); }
.hero::after { content:"01 / GENUINE RJN WORK"; right:18px; top:47%; z-index:5; color:rgba(255,255,255,.72); }
.hero-grid { z-index:2; opacity:.22; mask-image:linear-gradient(90deg,#000,transparent 70%); }
.hero-visual { position:absolute; inset:0; z-index:0; width:100%; height:100%; padding:0; }
.hero-photo { width:100%; height:100%; margin:0; clip-path:none; box-shadow:none; }
.hero-photo::after { display:none; }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:center 67%; filter:saturate(.78) contrast(1.09) brightness(.73); transform:scale(1.035); animation:heroDrift 16s ease-in-out infinite alternate; }
@keyframes heroDrift { to { transform:scale(1.095) translate3d(-.7%,0,0); } }
.hero-copy { position:relative; z-index:4; width:min(900px,78%); animation:heroCopyIn 1.15s .78s cubic-bezier(.16,1,.3,1) both; }
@keyframes heroCopyIn { from { opacity:0; transform:translateY(34px); } }
.hero h1 { max-width:900px; margin:clamp(22px,3vh,34px) 0; font:500 clamp(4.7rem,8.3vw,9.2rem)/.82 Georgia,serif; letter-spacing:-.078em; text-shadow:0 8px 40px rgba(0,0,0,.28); }
.hero h1 em { color:var(--rjn-orange); font-weight:400; }
.hero h1 em::after { display:none; }
.hero-copy>p { max-width:720px; color:rgba(255,255,255,.82); font-size:clamp(1rem,1.25vw,1.16rem); line-height:1.65; }
.hero-actions .button.line { border-color:rgba(255,255,255,.46); color:#fff; backdrop-filter:blur(8px); background:rgba(15,17,18,.18); }
.trust-row { color:rgba(255,255,255,.78); }
.roundel { left:auto; right:max(34px,calc((100vw - 1320px)/2)); top:21%; z-index:5; width:112px; height:112px; border-color:rgba(255,255,255,.5); background:rgba(22,24,25,.38); color:#fff; backdrop-filter:blur(12px); }
.hero-caption { position:absolute; right:max(28px,calc((100vw - 1320px)/2)); bottom:34px; z-index:4; display:flex; gap:16px; align-items:center; color:#fff; font-size:.58rem; font-weight:900; letter-spacing:.2em; }
.hero-caption span { padding:9px 12px; background:var(--rjn-orange); }
.hero-caption strong { font-size:inherit; }

.motion-ready [data-reveal] { opacity:0; transform:translateY(42px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.motion-ready [data-reveal].is-visible { opacity:1; transform:none; }
.services .primary-service:nth-child(2),.services .primary-service:nth-child(4) { transition-delay:.1s; }
.services .primary-service { min-height:540px; clip-path:polygon(0 0,100% 0,100% 94%,0 100%); }
.services .primary-service:nth-child(even) { clip-path:polygon(0 5%,100% 0,100% 100%,0 95%); }
.services .primary-service::before { background:linear-gradient(180deg,rgba(18,20,21,.03) 10%,rgba(18,20,21,.94) 93%); }
.services .primary-service h3 { font-family:Georgia,serif; font-weight:500; letter-spacing:-.045em; }
.service-route-1 { background-size:106% auto !important; transition:background-size 1.4s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),opacity .9s !important; }
.service-route-1:hover { background-size:112% auto !important; }
.service-route-3::after,.service-route-4::after { top:0; bottom:auto; height:100%; width:5px; transform:scaleY(.2); transform-origin:top; }
.service-route-3:hover::after,.service-route-4:hover::after { transform:scaleY(1); }

.featured-project { min-height:92svh; grid-template-columns:minmax(290px,.55fr) minmax(0,1.45fr); padding-block:clamp(90px,11vw,160px); }
.featured-project::before { content:"PROJECT 01"; position:absolute; left:-.04em; bottom:-.18em; color:rgba(255,255,255,.025); font:900 clamp(8rem,22vw,23rem)/1 Arial,sans-serif; letter-spacing:-.09em; white-space:nowrap; }
.featured-project-copy,.featured-project-images { position:relative; z-index:1; }
.featured-project-images { min-height:min(76vh,780px); }
.featured-shot-1 { inset:0 9% 5% 0; clip-path:polygon(4% 0,100% 0,95% 100%,0 95%); }
.featured-shot-2 { top:5%; right:0; width:30%; height:42%; }
.featured-shot-3 { right:2%; bottom:0; width:38%; height:40%; }
.featured-shot img { transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.featured-shot:hover img { transform:scale(1.035); }

@media(max-width:950px){
  header { top:28px; }
  header .logo { transform:scale(1.05); }
  .hero { min-height:calc(100svh - 28px); padding-inline:28px; }
  .hero-copy { width:86%; }
  .hero h1 { font-size:clamp(4.3rem,10vw,6.8rem); }
  .hero-photo img { object-position:62% 66%; }
}
@media(max-width:600px){
  header { top:28px; background:linear-gradient(180deg,rgba(10,12,13,.9),rgba(10,12,13,.18)); }
  header nav.open { top:76px; background:#17191a; color:#fff; }
  .menu { color:#fff; border-color:rgba(255,255,255,.35); }
  .hero { min-height:calc(100svh - 28px); justify-content:flex-end; padding:148px 18px 82px; }
  .hero::before { display:block; background:linear-gradient(0deg,rgba(9,11,12,.95) 0%,rgba(9,11,12,.48) 62%,rgba(9,11,12,.22)),radial-gradient(circle at 75% 30%,rgba(255,91,34,.16),transparent 38%); }
  .hero-copy { width:100%; }
  .hero h1 { margin:16px 0 20px; font-size:clamp(3.45rem,15vw,5.15rem); line-height:.87; }
  .hero-copy>p { max-width:35rem; font-size:1rem; }
  .hero-photo img { object-position:57% 65%; }
  .hero-caption { right:18px; bottom:22px; }
  .hero-caption strong { display:none; }
  .roundel { right:18px; top:18%; width:82px; height:82px; font-size:.52rem; }
  .services .primary-service { min-height:440px; clip-path:polygon(0 0,100% 0,100% 97%,0 100%); }
  .services .primary-service:nth-child(even) { clip-path:polygon(0 3%,100% 0,100% 100%,0 97%); }
  .featured-project { min-height:auto; }
  .featured-project-images { min-height:540px; }
}
@media(prefers-reduced-motion:reduce){
  .hero-photo img,.hero-copy,.motion-ready [data-reveal],.featured-shot img,.service-route-1,.service-route-2 { animation:none !important; transition:none !important; transform:none !important; }
  .motion-ready [data-reveal] { opacity:1 !important; }
}

/* Chapter homepage — seven scenes, one continuous cinematic journey. */
.chapter-index {
  position: sticky;
  top: 0;
  z-index: 32;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-height: 38px;
  background: rgba(15, 17, 18, .96);
  color: rgba(255,255,255,.52);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.chapter-index span { display:flex; align-items:center; justify-content:center; padding:8px 5px; border-right:1px solid rgba(255,255,255,.08); font-size:.5rem; font-weight:900; letter-spacing:.14em; }

.service-chapter { position:relative; isolation:isolate; min-height:calc(100svh - 38px); display:flex; align-items:flex-end; overflow:hidden; background:#17191a; color:#fff; }
.service-chapter>img { position:absolute; inset:-4%; z-index:-3; width:108%; height:108%; object-fit:cover; filter:saturate(.86) contrast(1.05); transform:scale(1.04); transition:transform 7s cubic-bezier(.16,1,.3,1),filter 1s ease; }
.service-chapter.is-visible>img { transform:scale(1); }
.service-chapter:hover>img { filter:saturate(.98) contrast(1.04); }
.chapter-shade { position:absolute; inset:0; z-index:-2; }
.chapter-copy { width:min(760px,62vw); margin:clamp(3.5rem,8vh,7rem) max(24px,calc((100vw - 1320px)/2)); padding:clamp(1.7rem,3vw,3rem); border-left:4px solid var(--rjn-orange); background:linear-gradient(120deg,rgba(13,15,16,.9),rgba(13,15,16,.52)); box-shadow:0 30px 90px rgba(0,0,0,.32); backdrop-filter:blur(12px); }
.chapter-copy-right { margin-left:auto; }
.chapter-copy-centre { width:min(940px,75vw); margin-inline:auto; text-align:center; border-left:0; border-top:4px solid var(--rjn-orange); }
.chapter-number { display:inline-flex; align-items:center; gap:12px; color:#fff; font-size:.62rem; font-weight:900; letter-spacing:.24em; }
.chapter-number::before { content:""; width:26px; height:3px; background:var(--rjn-orange); }
.chapter-copy h2,.project-chapter h2,.trust-chapter h2 { margin:1.4rem 0 1.6rem; font:500 clamp(4.2rem,7.7vw,8.5rem)/.82 Georgia,serif; letter-spacing:-.075em; text-wrap:balance; }
.chapter-copy h2 em,.project-chapter h2 em,.trust-chapter h2 em { color:var(--rjn-orange); font-weight:400; }
.chapter-copy p { max-width:620px; margin:0 0 1.8rem; color:rgba(255,255,255,.82); font-size:1.05rem; line-height:1.65; }
.chapter-copy-centre p { margin-inline:auto; }
.chapter-copy a,.project-chapter-heading>a { display:inline-flex; align-items:center; gap:12px; padding-bottom:9px; border-bottom:2px solid var(--rjn-orange); color:#fff; font-size:.68rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.chapter-kitchen .chapter-shade { background:linear-gradient(90deg,rgba(14,16,17,.12),rgba(14,16,17,.78) 72%),linear-gradient(0deg,rgba(14,16,17,.5),transparent 55%); }
.chapter-extension { align-items:center; }
.chapter-extension .chapter-shade { background:linear-gradient(90deg,rgba(14,16,17,.82),rgba(14,16,17,.08) 72%),linear-gradient(0deg,rgba(14,16,17,.42),transparent 50%); }
.chapter-refurbishment { align-items:center; }
.chapter-refurbishment .chapter-shade { background:linear-gradient(0deg,rgba(10,12,13,.76),rgba(10,12,13,.12) 62%),radial-gradient(circle at 50% 45%,transparent,rgba(8,10,11,.42)); }
.temporary-label { position:absolute; right:max(18px,calc((100vw - 1320px)/2)); top:30px; padding:9px 12px; background:rgba(15,17,18,.74); color:rgba(255,255,255,.62); backdrop-filter:blur(10px); font-size:.48rem; font-weight:800; letter-spacing:.13em; }

.project-chapter { position:relative; min-height:100svh; padding:clamp(6rem,10vw,10rem) max(24px,calc((100vw - 1320px)/2)); display:grid; grid-template-columns:minmax(300px,.62fr) minmax(0,1.38fr); gap:clamp(3rem,7vw,8rem); align-items:center; overflow:hidden; background:#111415; color:#fff; }
.project-chapter::before { content:"REAL WORK"; position:absolute; left:-.04em; bottom:-.22em; color:rgba(255,255,255,.025); font:900 clamp(10rem,25vw,27rem)/1 Arial,sans-serif; letter-spacing:-.1em; white-space:nowrap; }
.project-chapter-heading,.editorial-gallery { position:relative; z-index:1; }
.project-chapter-heading h2 { font-size:clamp(4.4rem,7vw,7.8rem); }
.project-chapter-heading p { max-width:520px; margin:0 0 1.8rem; color:rgba(255,255,255,.72); font-size:1.05rem; line-height:1.7; }
.editorial-gallery { min-height:min(78vh,780px); perspective:1300px; }
.editorial-shot { position:absolute; margin:0; overflow:hidden; background:#25292a; box-shadow:0 28px 80px rgba(0,0,0,.42); }
.editorial-shot img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.editorial-shot:hover img { transform:scale(1.04); }
.editorial-shot span { position:absolute; right:12px; bottom:12px; width:34px; height:34px; display:grid; place-items:center; background:var(--rjn-orange); color:#fff; font-size:.55rem; font-weight:900; }
.editorial-shot-1 { inset:0 22% 7% 0; transform:rotate(-1.1deg); }
.editorial-shot-1 img { object-position:center 56%; }
.editorial-shot-2 { right:0; top:2%; width:35%; height:39%; transform:rotate(1.3deg); border:6px solid #111415; }
.editorial-shot-3 { right:2%; bottom:1%; width:42%; height:43%; transform:rotate(-.7deg); border:6px solid #111415; }
.editorial-shot-4 { left:9%; bottom:-1%; width:27%; height:28%; transform:rotate(1.8deg); border:6px solid #111415; }

.trust-chapter { position:relative; isolation:isolate; min-height:94svh; padding:clamp(6rem,10vw,10rem) max(24px,calc((100vw - 1320px)/2)); display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,7vw,8rem); align-items:center; overflow:hidden; background:var(--rjn-orange); color:#17191a; }
.trust-backdrop { position:absolute; inset:0; z-index:-1; overflow:hidden; }
.trust-backdrop span { position:absolute; right:-.12em; bottom:-.31em; color:rgba(255,255,255,.12); font:900 italic min(74vw,62rem)/1 Arial,sans-serif; letter-spacing:-.18em; }
.trust-intro .chapter-number { color:#17191a; }
.trust-intro .chapter-number::before { background:#17191a; }
.trust-intro h2 { font-size:clamp(4.4rem,7.5vw,8rem); }
.trust-intro h2 em { color:#fff; }
.trust-intro p { max-width:480px; font-size:1.08rem; line-height:1.65; }
.trust-facts { display:grid; grid-template-columns:1fr 1fr; border:1px solid rgba(23,25,26,.38); background:rgba(255,255,255,.08); backdrop-filter:blur(8px); }
.trust-facts div { min-height:200px; padding:clamp(1.5rem,3vw,2.6rem); display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid rgba(23,25,26,.28); border-bottom:1px solid rgba(23,25,26,.28); }
.trust-facts div:nth-child(even) { border-right:0; }
.trust-facts div:nth-child(n+3) { border-bottom:0; }
.trust-facts strong { font:900 clamp(2.7rem,5vw,5rem)/.85 Arial,sans-serif; letter-spacing:-.07em; }
.trust-facts span { max-width:240px; font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.secondary-service-links { position:absolute; left:max(24px,calc((100vw - 1320px)/2)); right:max(24px,calc((100vw - 1320px)/2)); bottom:26px; display:flex; gap:clamp(1rem,3vw,3rem); }
.secondary-service-links a { display:flex; align-items:center; gap:7px; font-size:.6rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }

.quote-chapter { position:relative; min-height:100svh; margin:0; padding:clamp(6rem,9vw,9rem) max(24px,calc((100vw - 1320px)/2)); background:#111415; color:#fff; }
.quote-chapter::before { content:"07"; position:absolute; right:-.04em; top:-.15em; color:rgba(255,91,34,.09); font:900 clamp(22rem,54vw,56rem)/1 Arial,sans-serif; letter-spacing:-.12em; }
.quote-chapter>* { position:relative; z-index:1; }
.quote-chapter .quote-copy h2 { color:#fff; font-size:clamp(4.2rem,7vw,7.6rem); line-height:.84; }
.quote-chapter .quote-copy>p { color:rgba(255,255,255,.7); }
.quote-chapter .quote-note { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.045); }
.quote-chapter .quote-tool { box-shadow:0 35px 90px rgba(0,0,0,.45); }

@media(max-width:950px){
  .chapter-index { display:none; }
  .service-chapter { min-height:88svh; }
  .chapter-copy { width:min(720px,82vw); }
  .project-chapter,.trust-chapter { grid-template-columns:1fr; }
  .project-chapter { min-height:auto; }
  .editorial-gallery { min-height:700px; }
  .trust-chapter { padding-bottom:8rem; }
  .secondary-service-links { flex-wrap:wrap; }
}

@media(max-width:600px){
  .service-chapter { min-height:84svh; align-items:flex-end; }
  .service-chapter>img { inset:0; width:100%; height:100%; }
  .chapter-kitchen>img { object-position:58% center; }
  .chapter-extension>img { object-position:62% center; }
  .chapter-refurbishment>img { object-position:58% center; }
  .chapter-copy,.chapter-copy-centre { width:auto; margin:0 14px 54px; padding:1.4rem; text-align:left; }
  .chapter-copy h2 { font-size:clamp(3.25rem,14.5vw,4.6rem); line-height:.86; }
  .chapter-copy p { font-size:.96rem; }
  .temporary-label { top:18px; right:14px; left:14px; text-align:center; font-size:.42rem; }
  .project-chapter { padding:6rem 18px; gap:3rem; }
  .project-chapter h2,.trust-chapter h2 { font-size:clamp(3.6rem,16vw,5rem); }
  .editorial-gallery { min-height:610px; }
  .editorial-shot-1 { inset:0 10% 28% 0; }
  .editorial-shot-2 { width:42%; height:31%; }
  .editorial-shot-3 { width:52%; height:35%; }
  .editorial-shot-4 { left:0; width:36%; height:25%; }
  .trust-chapter { min-height:auto; padding:6.5rem 18px 10rem; gap:2.5rem; }
  .trust-facts div { min-height:150px; padding:1.2rem; }
  .trust-facts strong { font-size:2.5rem; }
  .trust-facts span { font-size:.56rem; }
  .secondary-service-links { left:18px; right:18px; bottom:26px; gap:.7rem 1.2rem; }
  .quote-chapter { min-height:auto; padding:6rem 18px 5rem; }
}

@media(prefers-reduced-motion:reduce){
  .service-chapter>img,.editorial-shot img { animation:none !important; transition:none !important; transform:none !important; }
  .editorial-shot-1,.editorial-shot-2,.editorial-shot-3,.editorial-shot-4 { transform:none !important; }
}

/* Mobile navigation and control system. */
html { scroll-behavior:smooth; }
.mobile-menu-panel { display:none; }

@media(max-width:760px){
  html,body { width:100%; max-width:100%; overflow-x:clip; }
  body { padding-bottom:0; }
  .topline { display:none; }
  header,header.menu-active {
    position:fixed;
    inset:0 0 auto;
    z-index:90;
    height:72px;
    padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:linear-gradient(180deg,rgba(10,12,13,.98),rgba(10,12,13,.86));
    border-bottom:1px solid rgba(255,255,255,.18);
    box-shadow:0 12px 34px rgba(0,0,0,.2);
    backdrop-filter:blur(16px);
  }
  header::after { display:none; }
  header .logo { flex:0 1 auto; min-width:0; transform:scale(.88); transform-origin:left center; }
  header .logo b { font-size:31px; }
  header .logo-lockup em { font-size:6px; }
  header .logo>small { font-size:5.5px; }
  header #primary-navigation,.header-facebook,.header-cta { display:none!important; }
  .menu {
    position:relative;
    z-index:2;
    flex:0 0 48px;
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    padding:0;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:50%;
    background:rgba(255,91,34,.96);
    color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.28);
  }
  .menu span { display:block; width:21px; height:2px; border-radius:2px; background:currentColor; transform-origin:center; transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s ease,width .25s ease; }
  .menu[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .menu[aria-expanded="true"] span:nth-child(2) { opacity:0; width:0; }
  .menu[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .menu:focus-visible { outline:3px solid #fff; outline-offset:3px; }

  .mobile-menu-panel {
    position:fixed;
    inset:72px 0 0;
    z-index:80;
    min-height:calc(100dvh - 72px);
    padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#111415;
    color:#fff;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-16px);
    transition:opacity .28s ease,transform .42s cubic-bezier(.16,1,.3,1),visibility .42s;
  }
  .mobile-menu-panel::before { content:"RJN"; position:fixed; right:-.1em; bottom:-.2em; color:rgba(255,91,34,.075); font:900 italic 55vw/1 Arial,sans-serif; letter-spacing:-.17em; pointer-events:none; }
  .mobile-menu-panel.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .mobile-menu-heading,.mobile-menu-links,.mobile-menu-contact { position:relative; z-index:1; }
  .mobile-menu-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.16); }
  .mobile-menu-heading small { color:var(--rjn-orange); font-size:.63rem; font-weight:900; letter-spacing:.2em; }
  .mobile-menu-heading span { color:rgba(255,255,255,.58); font-size:.72rem; }
  .mobile-menu-links { display:grid; grid-template-columns:1fr; }
  .mobile-menu-links a { min-height:54px; display:grid; grid-template-columns:30px minmax(0,1fr) 24px; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,.13); color:#fff; }
  .mobile-menu-links a small { color:var(--rjn-orange); font-size:.58rem; font-weight:900; }
  .mobile-menu-links a span { min-width:0; font:500 clamp(1.15rem,5.5vw,1.45rem)/1.05 Georgia,serif; letter-spacing:-.025em; }
  .mobile-menu-links a svg { width:18px; height:18px; color:var(--rjn-orange); }
  .mobile-menu-links a:focus-visible,.mobile-menu-contact a:focus-visible { outline:3px solid var(--rjn-orange); outline-offset:-3px; }
  .mobile-menu-links .mobile-menu-cta { min-height:60px; margin-top:10px; padding-inline:12px; border:0; background:var(--rjn-orange); }
  .mobile-menu-links .mobile-menu-cta small,.mobile-menu-links .mobile-menu-cta svg { color:#fff; }
  .mobile-menu-contact { margin-top:auto; padding-top:22px; display:grid; gap:8px; }
  .mobile-menu-contact a { min-height:44px; display:flex; align-items:center; color:#fff; font-size:.72rem; font-weight:900; letter-spacing:.1em; }
  .mobile-menu-contact span { color:rgba(255,255,255,.5); font-size:.58rem; font-weight:800; letter-spacing:.13em; }

  .mobile-nav { display:none!important; }
  .floating-whatsapp { left:max(14px,env(safe-area-inset-left)); right:auto; bottom:max(18px,calc(env(safe-area-inset-bottom) + 18px)); z-index:64; min-width:52px; min-height:52px; display:flex!important; }
  .floating-whatsapp span { display:none; }
  .back-to-top {
    right:max(14px,env(safe-area-inset-right));
    bottom:max(82px,calc(env(safe-area-inset-bottom) + 82px));
    z-index:65;
    width:52px;
    height:52px;
    min-width:52px;
    min-height:52px;
    display:flex!important;
    border:2px solid rgba(255,255,255,.8);
  }
  .back-to-top span { font-size:7px; }

  .hero { padding-top:132px; }
  .service-chapter,.project-chapter,.trust-chapter,.quote-chapter,footer { max-width:100%; overflow-x:clip; }
  .chapter-copy h2,.project-chapter h2,.trust-chapter h2,.quote-copy h2 { overflow-wrap:normal; word-break:normal; hyphens:none; }
  .chapter-copy p,.project-chapter p,.trust-chapter p,.quote-copy p { overflow-wrap:anywhere; }
}

@media(max-width:340px){
  header { height:68px; }
  .mobile-menu-panel { inset-block-start:68px; min-height:calc(100dvh - 68px); padding-inline:12px; }
  header .logo { transform:scale(.8); }
  .menu { width:46px; height:46px; min-width:46px; min-height:46px; }
  .mobile-menu-heading span { display:none; }
  .mobile-menu-links a { min-height:50px; }
  .mobile-menu-links a span { font-size:1.08rem; }
  .chapter-copy,.chapter-copy-centre { margin-inline:10px; padding:1.15rem; }
  .chapter-copy h2 { font-size:3rem; }
  .trust-facts { grid-template-columns:1fr; }
  .trust-facts div,.trust-facts div:nth-child(even),.trust-facts div:nth-child(n+3) { min-height:118px; border-right:0; border-bottom:1px solid rgba(23,25,26,.28); }
  .trust-facts div:last-child { border-bottom:0; }
}

@media(max-width:760px) and (orientation:landscape){
  header { height:64px; }
  .mobile-menu-panel { inset-block-start:64px; min-height:calc(100dvh - 64px); padding-top:14px; }
  .mobile-menu-heading { margin-bottom:8px; padding-bottom:9px; }
  .mobile-menu-links { grid-template-columns:1fr 1fr; column-gap:16px; }
  .mobile-menu-links a { min-height:46px; }
  .mobile-menu-links a span { font-size:1rem; }
  .mobile-menu-links .mobile-menu-cta { margin-top:0; }
  .mobile-menu-contact { margin-top:12px; padding-top:8px; grid-template-columns:1fr 1fr; align-items:center; }
}

@media(prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  .menu span,.mobile-menu-panel,.back-to-top { transition:none!important; }
}

/* Multi-page RJN service architecture. */
.static-menu-button,.static-mobile-menu,.static-back-to-top,.static-whatsapp { display:none; }
.simple-page.menu-open { overflow:hidden; }
.simple-page .simple-header { position:sticky; top:0; z-index:90; background:rgba(18,20,21,.96); backdrop-filter:blur(16px); }
.simple-page .simple-header>nav a { position:relative; }
.simple-page .simple-header>nav a::after { content:""; position:absolute; right:0; bottom:-7px; left:0; height:2px; background:var(--rjn-orange); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.simple-page .simple-header>nav a:hover::after,.simple-page .simple-header>nav a:focus-visible::after { transform:scaleX(1); }

.service-cinema { position:relative; min-height:clamp(650px,88vh,920px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; background:#17191a; color:#fff; }
.service-cinema>img { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; animation:service-drift 18s ease-in-out infinite alternate; }
.service-cinema-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(10,11,12,.9) 0%,rgba(10,11,12,.65) 42%,rgba(10,11,12,.16) 72%),linear-gradient(0deg,rgba(10,11,12,.82),transparent 60%); }
.service-cinema>small { position:absolute; top:30px; right:max(30px,calc((100vw - 1320px)/2)); padding:10px 13px; border:1px solid rgba(255,255,255,.38); background:rgba(12,14,15,.72); font-size:.56rem; font-weight:900; letter-spacing:.16em; }
.service-cinema>div:last-child { width:min(780px,calc(100% - 48px)); margin:0 max(24px,calc((100vw - 1320px)/2)) 8vh; }
.service-cinema .back-services { display:inline-flex; margin-bottom:clamp(3rem,8vh,6rem); color:#fff; font-size:.65rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.service-cinema span { display:block; color:var(--rjn-orange); font-size:.64rem; font-weight:900; letter-spacing:.2em; }
.service-cinema h1 { max-width:900px; margin:.8rem 0 1.1rem; font:500 clamp(4.5rem,8vw,8.4rem)/.84 Georgia,serif; letter-spacing:-.065em; text-wrap:balance; }
.service-cinema p { max-width:660px; margin:0; color:rgba(255,255,255,.78); font-size:1.08rem; line-height:1.65; }
.cinema-cta { display:inline-flex; margin-top:1.8rem; padding:1rem 1.25rem; background:var(--rjn-orange); color:#fff; font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
@keyframes service-drift { from{transform:scale(1.025)} to{transform:scale(1.085) translate3d(-.7%,.4%,0)} }

.services-hub-intro { max-width:920px; margin:0 auto 70px; text-align:center; }
.services-hub-intro>span { color:var(--rjn-orange); font-size:.65rem; font-weight:900; letter-spacing:.2em; }
.services-hub-intro h2 { margin:1rem 0 1.2rem; font:500 clamp(3.3rem,7vw,7rem)/.9 Georgia,serif; letter-spacing:-.06em; }
.services-hub-intro p { max-width:660px; margin:auto; font-size:1.08rem; line-height:1.7; }
.services-hub-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.hub-tile { position:relative; min-height:620px; padding:30px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; color:#fff!important; }
.hub-tile::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(10,12,13,.92),rgba(10,12,13,.04) 70%); transition:background .4s ease; }
.hub-tile img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.hub-tile:hover img,.hub-tile:focus-visible img { transform:scale(1.055); }
.hub-tile small { font-size:.58rem; font-weight:900; letter-spacing:.17em; color:var(--rjn-orange); }
.hub-tile h2 { max-width:560px; margin:.7rem 0 1rem; font:500 clamp(2.8rem,5vw,5.4rem)/.88 Georgia,serif; letter-spacing:-.055em; }
.hub-tile>span { font-size:.66rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.hub-support { margin-top:18px; display:grid; grid-template-columns:1.2fr repeat(3,1fr); background:#17191a; color:#fff; }
.hub-support>* { min-height:112px; padding:22px; display:flex; align-items:flex-end; border-right:1px solid rgba(255,255,255,.14); }
.hub-support>span { color:var(--rjn-orange); font-size:.62rem; font-weight:900; letter-spacing:.16em; }
.hub-support>a { font:500 1.2rem Georgia,serif; }
.hub-support>a:hover { background:var(--rjn-orange); }
.priority-service .simple-content { padding-top:7rem; }
.priority-service .simple-content>h2 { font-size:clamp(2.6rem,5vw,5rem); letter-spacing:-.04em; }
.priority-service .service-links { margin-top:0; }

.static-back-to-top,.static-whatsapp { position:fixed; z-index:65; width:52px; height:52px; border-radius:50%; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(0,0,0,.25); }
.static-back-to-top { right:18px; bottom:82px; flex-direction:column; background:#17191a; color:#fff; border:2px solid rgba(255,255,255,.85); opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s ease; }
.static-back-to-top.show { opacity:1; visibility:visible; transform:none; }
.static-back-to-top b { font-size:20px; line-height:.8; }.static-back-to-top span { font-size:7px; font-weight:900; }
.static-whatsapp { left:18px; bottom:18px; background:#25d366; color:#071f10; font-size:.68rem; font-weight:950; }

@media(max-width:760px){
  .simple-page { overflow-x:clip; }
  .simple-page .simple-header { height:72px; padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right)); display:flex; align-items:center; justify-content:space-between; }
  .simple-page .simple-header>a strong { font-size:30px; }.simple-page .simple-header>a span { font-size:6px; }
  .simple-page .simple-header>nav { display:none; }
  .static-menu-button { flex:0 0 48px; width:48px; height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:var(--rjn-orange); color:#fff; }
  .static-menu-button i { width:21px; height:2px; border-radius:2px; background:currentColor; transition:transform .3s ease,opacity .2s ease; }
  .static-menu-button[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .static-menu-button[aria-expanded="true"] i:nth-child(2){opacity:0}
  .static-menu-button[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .static-menu-button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
  .static-mobile-menu { position:fixed; inset:72px 0 0; z-index:85; padding:22px max(14px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; background:#111415; color:#fff; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-14px); transition:opacity .25s ease,transform .35s ease,visibility .35s; }
  .static-mobile-menu.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .static-menu-heading { padding-bottom:12px; display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.16); }
  .static-menu-heading small { color:var(--rjn-orange); font-size:.62rem; font-weight:900; letter-spacing:.18em; }.static-menu-heading span{color:rgba(255,255,255,.55);font-size:.72rem}
  .static-menu-links { display:grid; }.static-menu-links a { min-height:50px; display:grid; grid-template-columns:30px minmax(0,1fr) 20px; align-items:center; border-bottom:1px solid rgba(255,255,255,.13); color:#fff; }
  .static-menu-links a small{color:var(--rjn-orange);font-size:.55rem;font-weight:900}.static-menu-links a span{font:500 clamp(1.02rem,5vw,1.35rem)/1.05 Georgia,serif}.static-menu-links a b{color:var(--rjn-orange)}
  .static-menu-contact { margin-top:auto; padding-top:18px; display:grid; gap:7px; }.static-menu-contact a{min-height:44px;display:flex;align-items:center;font-size:.72rem;font-weight:900;letter-spacing:.08em}.static-menu-contact span{color:rgba(255,255,255,.5);font-size:.58rem;font-weight:800;letter-spacing:.1em}
  .static-back-to-top,.static-whatsapp { display:flex; }
  .service-cinema { min-height:calc(100svh - 72px); }
  .service-cinema>small { top:18px; right:14px; left:14px; text-align:center; font-size:.48rem; }
  .service-cinema>div:last-child { width:auto; margin:0 18px 8vh; }
  .service-cinema .back-services { margin-bottom:clamp(5rem,16vh,9rem); }
  .service-cinema h1 { font-size:clamp(3.15rem,15vw,5rem); line-height:.88; }
  .service-cinema p { font-size:1rem; }
  .service-cinema-shade { background:linear-gradient(0deg,rgba(10,11,12,.94),rgba(10,11,12,.18) 84%); }
  .services-hub-grid { grid-template-columns:1fr; gap:10px; }.hub-tile { min-height:72svh; padding:22px; }.hub-tile h2{font-size:clamp(2.9rem,14vw,4.6rem)}
  .hub-support { grid-template-columns:1fr; }.hub-support>*{min-height:76px;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .service-links { grid-template-columns:1fr 1fr; }
  .priority-service .simple-content { padding-top:5rem; }
}
@media(max-width:340px){
  .simple-page .simple-header{height:68px}.static-mobile-menu{inset-block-start:68px}.static-menu-button{width:46px;height:46px;flex-basis:46px}.static-menu-heading span{display:none}.static-menu-links a{min-height:48px}.static-menu-links a span{font-size:1rem}.service-cinema{min-height:calc(100svh - 68px)}
}
@media(max-width:760px) and (orientation:landscape){
  .simple-page .simple-header{height:64px}.static-mobile-menu{inset-block-start:64px;padding-top:12px}.static-menu-heading{padding-bottom:7px}.static-menu-links{grid-template-columns:1fr 1fr;column-gap:14px}.static-menu-links a{min-height:44px}.static-menu-links a span{font-size:.94rem}.static-menu-contact{margin-top:10px;grid-template-columns:1fr 1fr}.service-cinema{min-height:620px}
}
@media(prefers-reduced-motion:reduce){
  .service-cinema>img{animation:none!important}.hub-tile img,.static-mobile-menu,.static-menu-button i,.static-back-to-top{transition:none!important}
}

/* RJN identity lock: hub and service pages share the homepage design system. */
.simple-page { --page-orange:#ff5b22; --page-charcoal:#111415; --page-white:#ffffff; background:var(--page-white); color:var(--page-charcoal); }
.simple-page .simple-header {
  min-height:92px;
  height:92px;
  padding:0 max(24px,calc((100vw - 1320px)/2));
  gap:clamp(20px,3vw,42px);
  background:rgba(17,20,21,.97);
  border-bottom:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 34px rgba(0,0,0,.16);
  color:var(--page-white);
}
.static-logo { display:flex!important; align-items:center!important; gap:6px!important; margin-right:auto!important; color:inherit!important; }
.static-logo-lockup { display:flex!important; flex-direction:column; align-items:center; max-width:none!important; color:inherit!important; }
.static-logo-lockup b { display:flex; font:700 38px/.8 Georgia,serif; letter-spacing:-.12em; }
.static-logo-lockup b i { font-style:normal; }
.static-logo-lockup b i:nth-child(odd) { color:transparent; background:linear-gradient(135deg,#f0f0ee 0%,#85898a 40%,#d6d7d5 68%,#666a6b 100%); -webkit-background-clip:text; background-clip:text; }
.static-logo-lockup b i:nth-child(2) { color:var(--page-orange); }
.static-logo-lockup em { margin-top:6px; color:var(--page-orange); font-size:8px; font-style:normal; font-weight:900; letter-spacing:.07em; white-space:nowrap; }
.static-logo>small { align-self:center; color:var(--page-orange); font-size:7px; font-weight:900; letter-spacing:.08em; writing-mode:vertical-rl; transform:rotate(180deg); }
.simple-page .simple-header>nav { display:flex; align-items:center; gap:28px; font-size:11px; font-weight:800; }
.simple-page .simple-header>nav a { color:rgba(255,255,255,.86); }
.simple-page .simple-header>nav a:hover,.simple-page .simple-header>nav a:focus-visible { color:var(--page-orange); }
.simple-page .simple-header>nav .static-header-cta { min-height:48px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; background:var(--page-orange); color:var(--page-white); border:1px solid var(--page-orange); }
.simple-page .simple-header>nav .static-header-cta:hover,.simple-page .simple-header>nav .static-header-cta:focus-visible { background:var(--page-white); border-color:var(--page-white); color:var(--page-charcoal); }
.simple-page .simple-header>nav .static-header-cta::after { display:none; }

.simple-page .simple-hero { background:var(--page-charcoal); color:var(--page-white); }
.simple-page .simple-hero>span,.services-hub-intro>span,.hub-tile small,.hub-support>span,.service-cinema span { color:var(--page-orange); }
.simple-page .simple-hero h1,.services-hub-intro h2,.hub-tile h2,.service-cinema h1,.priority-service .simple-content>h2,.simple-page .simple-content h2,.simple-page .simple-cta h2 {
  font-family:Arial,Helvetica,sans-serif;
  font-style:normal;
  font-weight:850;
  letter-spacing:-.055em;
}
.simple-page .simple-hero h1 { font-size:clamp(3.6rem,6.5vw,7.2rem); line-height:.88; }
.services-hub-intro h2 { font-size:clamp(3.2rem,6vw,6.2rem); line-height:.9; }
.hub-tile h2 { font-size:clamp(2.6rem,4.5vw,4.9rem); line-height:.9; }
.service-cinema h1 { font-size:clamp(4rem,7vw,7.5rem); line-height:.86; }
.simple-page .simple-content { background:var(--page-white); }
.simple-page .simple-content p,.simple-page .simple-content li { color:#51585a; }
.simple-page .simple-content a { color:var(--page-orange); text-decoration-color:var(--page-orange); }
.simple-page .simple-content a:hover { color:var(--page-charcoal); }
.back-home,.back-services { min-height:44px; padding:0 15px!important; display:inline-flex!important; align-items:center; border:1px solid rgba(255,255,255,.7)!important; color:var(--page-white)!important; background:rgba(17,20,21,.4); text-decoration:none!important; }
.back-home:hover,.back-home:focus-visible,.back-services:hover,.back-services:focus-visible { border-color:var(--page-orange)!important; background:var(--page-orange); color:var(--page-white)!important; }
.service-cinema-shade { background:linear-gradient(90deg,rgba(17,20,21,.92) 0%,rgba(17,20,21,.62) 43%,rgba(17,20,21,.12) 72%),linear-gradient(0deg,rgba(17,20,21,.82),transparent 60%); }
.service-cinema>small { background:rgba(17,20,21,.78); border-color:rgba(255,255,255,.42); color:rgba(255,255,255,.78); }
.cinema-cta,.simple-page .simple-cta a:first-of-type { min-height:52px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--page-orange); border-radius:0; background:var(--page-orange); color:var(--page-white); font-size:.7rem; font-weight:900; letter-spacing:.12em; line-height:1.2; text-transform:uppercase; transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease; }
.cinema-cta:hover,.cinema-cta:focus-visible,.simple-page .simple-cta a:first-of-type:hover,.simple-page .simple-cta a:first-of-type:focus-visible { background:var(--page-white); border-color:var(--page-white); color:var(--page-charcoal); transform:translateY(-2px); }
.simple-page .simple-cta { background:var(--page-charcoal); color:var(--page-white); }
.simple-page .simple-cta a:last-of-type { min-height:52px; padding:0 22px; border:1px solid rgba(255,255,255,.72); border-radius:0; color:var(--page-white); }
.simple-page .simple-cta a:last-of-type:hover,.simple-page .simple-cta a:last-of-type:focus-visible { border-color:var(--page-orange); color:var(--page-orange); }
.service-links { background:var(--page-white); gap:1px; padding:1px 0; }
.service-links span,.service-links a { background:var(--page-charcoal); color:var(--page-white); }
.service-links a:hover,.service-links a:focus-visible,.hub-support>a:hover,.hub-support>a:focus-visible { background:var(--page-orange); color:var(--page-white); }
.hub-tile::after { background:linear-gradient(0deg,rgba(17,20,21,.94),rgba(17,20,21,.05) 72%); }
.hub-tile:focus-visible { outline:3px solid var(--page-orange); outline-offset:3px; }
.hub-support,.simple-footer { background:var(--page-charcoal); color:var(--page-white); }
.simple-footer .static-footer-logo { width:fit-content; margin:0 0 28px; }
.simple-footer .static-footer-logo .static-logo-lockup b i:nth-child(odd) { background:linear-gradient(135deg,#ffffff,#777b7c 45%,#d9dad8 75%,#686c6d); -webkit-background-clip:text; background-clip:text; }
.hub-support>a { font-family:Arial,Helvetica,sans-serif; font-weight:800; }
.simple-footer a:hover,.simple-footer a:focus-visible { color:var(--page-orange); }
.static-back-to-top { background:var(--page-charcoal); color:var(--page-white); }
.static-back-to-top:hover,.static-back-to-top:focus-visible { border-color:var(--page-orange); color:var(--page-orange); }

@media(max-width:760px){
  .simple-page .simple-header { min-height:72px; height:72px; }
  .static-logo-lockup b { font-size:31px; }.static-logo-lockup em{font-size:6px}.static-logo>small{font-size:5.5px}
  .static-menu-button { background:var(--page-orange); border-color:rgba(255,255,255,.5); min-width:48px; min-height:48px; }
  .static-mobile-menu { background:var(--page-charcoal); }
  .static-menu-links a { min-height:52px; }
  .simple-page .simple-hero { padding-inline:18px; }
  .simple-page .simple-hero h1 { font-size:clamp(3rem,14vw,4.35rem); overflow-wrap:normal; word-break:normal; hyphens:none; }
  .services-hub-intro { margin-bottom:42px; }.services-hub-intro h2{font-size:clamp(2.9rem,13vw,4.2rem)}
  .hub-tile { padding:22px 18px; }.hub-tile h2{font-size:clamp(2.6rem,12.5vw,4rem);overflow-wrap:normal;word-break:normal}
  .service-cinema>div:last-child { margin-inline:18px; }
  .service-cinema h1 { font-size:clamp(3rem,13.5vw,4.65rem); overflow-wrap:normal; word-break:normal; hyphens:none; }
  .cinema-cta,.simple-page .simple-cta a:first-of-type,.simple-page .simple-cta a:last-of-type { width:100%; min-height:54px; }
  .simple-page .simple-cta { align-items:stretch; }
  .back-home,.back-services { width:fit-content; max-width:100%; }
  .static-back-to-top { right:max(14px,env(safe-area-inset-right)); bottom:max(82px,calc(env(safe-area-inset-bottom) + 82px)); }
  .static-whatsapp { left:max(14px,env(safe-area-inset-left)); bottom:max(18px,calc(env(safe-area-inset-bottom) + 18px)); }
}
@media(max-width:340px){
  .simple-page .simple-header{min-height:68px;height:68px}.static-logo{transform:scale(.86);transform-origin:left center}.static-menu-button{min-width:46px;min-height:46px}.simple-page .simple-hero h1{font-size:2.85rem}.service-cinema h1{font-size:2.9rem}.hub-tile h2{font-size:2.7rem}
}
@media(prefers-reduced-motion:reduce){
  .cinema-cta,.simple-page .simple-cta a,.hub-tile,.simple-page .simple-header>nav a::after{transition:none!important}
}

/* Final RJN brand-detail system — shared across the Services hub and all service routes. */
.simple-page :focus-visible { outline:3px solid #ff5b22; outline-offset:3px; }
.simple-page .simple-header>nav a { position:relative; }
.simple-page .simple-header>nav a:not(.static-header-cta)::after { content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; background:#ff5b22; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.simple-page .simple-header>nav a:not(.static-header-cta):hover::after,.simple-page .simple-header>nav a:not(.static-header-cta):focus-visible::after { transform:scaleX(1); }
.simple-page .simple-header>nav a[href="/services/"] { color:#ff5b22; }
.simple-page .simple-hero { padding-top:clamp(8rem,14vw,12rem); padding-bottom:clamp(5rem,9vw,8rem); }
.simple-page .simple-hero h1,.service-cinema h1 { color:#fff; }
.simple-page .simple-hero h1 .brand-word,.service-cinema h1 .brand-word { color:#ff5b22; }
.simple-page .simple-hero h1 .title-word,.service-cinema h1 .title-word { color:#fff; }
.hero-brand-rule { display:block; width:clamp(72px,9vw,132px); height:4px; margin:clamp(1.3rem,2vw,2rem) 0; background:#ff5b22; }
.service-cinema h1 { position:relative; padding-bottom:clamp(1rem,2vw,1.5rem); }
.service-cinema h1::after { content:""; position:absolute; left:0; bottom:0; width:clamp(72px,8vw,120px); height:4px; background:#ff5b22; }
.inspiration-panel{position:absolute;z-index:3;right:max(18px,calc((100vw - 1320px)/2));top:30px;width:min(340px,calc(100% - 36px));padding:15px 17px;border-left:4px solid #ff5b22;background:rgba(17,20,21,.88);color:#fff;backdrop-filter:blur(12px)}.inspiration-panel strong,.inspiration-panel span{display:block}.inspiration-panel strong{color:#ff5b22;font-size:.62rem;letter-spacing:.15em}.inspiration-panel span{margin-top:7px;color:rgba(255,255,255,.82);font-size:.72rem;line-height:1.45}.simple-page h1,.simple-page h2,.hero h1{text-wrap:balance;overflow-wrap:normal;word-break:normal}
.service-cinema>div:last-child>span { display:block; color:#ff5b22; font-size:.66rem; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
.cinema-cta b,.simple-page .simple-cta a:first-of-type b { margin-left:4px; font-size:1rem; line-height:1; transition:transform .2s ease; }
.cinema-cta:hover b,.cinema-cta:focus-visible b,.simple-page .simple-cta a:first-of-type:hover b,.simple-page .simple-cta a:first-of-type:focus-visible b { transform:translateX(3px); }
.end-home-link a { min-height:44px; display:inline-flex; align-items:center; padding:0 15px; border:1px solid #111415; color:#111415!important; font-size:.72rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; text-decoration:none!important; }
.end-home-link a:hover,.end-home-link a:focus-visible { border-color:#ff5b22; background:#ff5b22; color:#fff!important; }
.static-menu-links a span { font-family:Arial,Helvetica,sans-serif; font-weight:800; letter-spacing:-.025em; }
.static-menu-button:hover,.static-menu-button:focus-visible { background:#fff; border-color:#fff; color:#111415; }
.static-menu-button:hover i,.static-menu-button:focus-visible i { background:#111415; }
.static-whatsapp { border:2px solid #ff5b22; background:#111415; color:#fff; }
.static-whatsapp:hover,.static-whatsapp:focus-visible { background:#ff5b22; color:#fff; }
.static-back-to-top { border-color:#ff5b22; }
.simple-footer { border-top:3px solid #ff5b22; }
.hub-tile small,.hub-tile>span,.hub-support>span,.service-links>span { color:#ff5b22; }
.hub-tile>span { font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.simple-page .simple-content h2::after { content:""; display:block; width:48px; height:3px; margin-top:.7rem; background:#ff5b22; }

@media(max-width:760px){
  .simple-page .simple-header { padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right)); }
  .simple-page .simple-hero { padding-top:6.5rem; }
  .simple-page .simple-hero h1,.service-cinema h1 { letter-spacing:-.045em; text-wrap:balance; }
  .static-mobile-menu { padding-bottom:max(92px,calc(env(safe-area-inset-bottom) + 72px)); }
  .static-whatsapp { bottom:max(16px,calc(env(safe-area-inset-bottom) + 16px)); }
  .static-back-to-top { right:max(14px,env(safe-area-inset-right)); bottom:max(84px,calc(env(safe-area-inset-bottom) + 84px)); }
}
@media(max-width:340px){
  .inspiration-panel{top:14px;right:14px;padding:12px 13px}.inspiration-panel span{font-size:.66rem}
  .simple-page .simple-hero h1 { font-size:2.65rem; }
  .service-cinema h1 { font-size:2.7rem; }
  .cinema-cta { padding-inline:15px; letter-spacing:.08em; }
}
@media(prefers-reduced-motion:reduce){
  .cinema-cta b,.simple-page .simple-cta a:first-of-type b,.simple-page .simple-header>nav a::after { transition:none!important; }
}

/* One control language across the React homepage and static service routes. */
.header-facebook { border-color:rgba(255,255,255,.38)!important; color:#fff!important; }
.header-facebook:hover,.header-facebook:focus-visible { border-color:#ff5b22!important; background:#ff5b22!important; color:#fff!important; }
.floating-whatsapp { border:2px solid #ff5b22!important; background:#111415!important; color:#fff!important; }
.floating-whatsapp:hover,.floating-whatsapp:focus-visible { background:#ff5b22!important; color:#fff!important; }
.back-to-top { border-color:#ff5b22!important; background:#111415!important; color:#fff!important; }
.back-to-top:hover,.back-to-top:focus-visible { background:#ff5b22!important; color:#fff!important; }