@font-face {
  font-family: "Atlantic Display";
  src: url("fonts/anton.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Atlantic Sans";
  src: url("fonts/manrope-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Atlantic Sans";
  src: url("fonts/manrope-bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

:root {
  --ink: #0b1018;
  --ink-soft: #151d29;
  --paper: #f6f3eb;
  --white: #ffffff;
  --signal: #efff00;
  --signal-hover: #dbe900;
  --cobalt: #173dff;
  --cobalt-dark: #1028a8;
  --ice: #dfe9f3;
  --steel: #5f6e7d;
  --line-dark: rgba(255, 255, 255, 0.2);
  --line-light: #c7cdd2;
  --display: "Atlantic Display", sans-serif;
  --sans: "Atlantic Sans", Arial, sans-serif;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;
  --gutter: clamp(1rem, 4vw, 4.5rem);
  --content: 90rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--cobalt) var(--ink);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--signal);
  color: var(--ink);
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

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

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

p,
ul,
ol,
blockquote {
  margin-top: 0;
}

p {
  max-width: 72ch;
}

h1,
h2,
h3 {
  margin-top: 0;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.94;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(4.6rem, 12vw, 10.5rem);
}

h2 {
  font-size: clamp(3.5rem, 8.5vw, 7.5rem);
}

h3 {
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.15;
}

:focus-visible {
  outline: 0.2rem solid var(--signal);
  outline-offset: 0.3rem;
}

.skip-link {
  background: var(--signal);
  color: var(--ink);
  font-weight: 700;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: -6rem;
  z-index: 1000;
}

.skip-link:focus {
  top: 1rem;
}

.shell {
  margin-inline: auto;
  max-width: var(--content);
  padding-inline: var(--gutter);
  width: 100%;
}

.site-header {
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 4.8rem;
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 0.75rem;
  text-decoration: none;
}

.brand img {
  filter: grayscale(1) brightness(0) invert(1);
  height: 2.8rem;
  object-fit: contain;
  object-position: left center;
  width: 8.6rem;
}

.brand span {
  border-left: 1px solid var(--line-dark);
  color: #cbd3de;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  line-height: 1.25;
  padding-left: 0.75rem;
  text-transform: uppercase;
}

.desktop-nav {
  align-items: center;
  display: none;
  gap: 1.6rem;
}

.desktop-nav > a:not(.button) {
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.desktop-nav > a:not(.button)::after {
  background: var(--signal);
  content: "";
  display: block;
  height: 0.13rem;
  margin-top: 0.28rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}

.desktop-nav > a[aria-current="page"]::after,
.desktop-nav > a:hover::after {
  transform: scaleX(1);
}

.nav-disclosure {
  position: relative;
}

.header-social {
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: none;
  height: 2.25rem;
  justify-content: center;
  margin: 0 0.25rem 0 auto;
  transition: background 0.2s, color 0.2s;
  width: 2.25rem;
}

.header-social svg {
  height: 18px;
  width: 18px;
}

.brand span {
  white-space: nowrap;
}

@media (max-width: 55.99rem) {
  .brand img {
    width: 6.4rem;
  }
}

.header-social:hover,
.header-social:focus-visible {
  background: #1877f2;
  border-color: #1877f2;
}

.nav-disclosure summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  list-style: none;
  padding: 0.65rem;
  text-transform: uppercase;
}

.nav-disclosure summary::-webkit-details-marker {
  display: none;
}

.menu-lines,
.menu-lines::before,
.menu-lines::after {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 0.12rem;
  position: relative;
  width: 1.1rem;
}

.menu-lines {
  margin-left: 0.4rem;
  vertical-align: middle;
}

.menu-lines::before {
  left: 0;
  position: absolute;
  top: -0.36rem;
}

.menu-lines::after {
  left: 0;
  position: absolute;
  top: 0.36rem;
}

.mobile-nav {
  background: var(--ink-soft);
  border-top: 1px solid var(--line-dark);
  box-shadow: 0 1.2rem 2.4rem -1.6rem rgba(0, 0, 0, 0.8);
  display: grid;
  left: calc(-100vw + 4.5rem);
  min-width: 100vw;
  padding: 1rem var(--gutter) 1.5rem;
  position: absolute;
  top: 3.6rem;
}

.mobile-nav a {
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--display);
  font-size: 1.8rem;
  padding: 0.65rem 0;
  text-decoration: none;
  text-transform: uppercase;
}

.button {
  align-items: center;
  background: var(--signal);
  border: 1px solid var(--signal);
  border-radius: 0.12rem;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 700;
  gap: 0.7rem;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, transform 220ms var(--ease-out);
}

.button:hover {
  background: var(--signal-hover);
  border-color: var(--signal-hover);
  transform: translateY(-0.12rem);
}

.button--blue {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: var(--white);
}

.button--blue:hover {
  background: var(--cobalt-dark);
  border-color: var(--cobalt-dark);
}

.button--outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.button--outline:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.arrow-icon {
  fill: none;
  height: 1.15rem;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-width: 1.8;
  width: 1.15rem;
}

.hero-home {
  background: var(--ink);
  color: var(--white);
  min-height: calc(100svh - 4.8rem);
  overflow: hidden;
  position: relative;
}

.hero-photo {
  height: 45svh;
  margin-left: 1rem;
  min-height: 19rem;
  overflow: hidden;
  position: relative;
}

.hero-photo::after,
.project-hero__photo::after {
  background: rgba(11, 16, 24, 0.16);
  content: "";
  inset: 0;
  position: absolute;
}

.hero-photo img,
.project-hero__photo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

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

.hero-content {
  padding: 2.7rem var(--gutter) 2rem;
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  margin-bottom: 1.4rem;
  max-width: 7ch;
}

.hero-content h1 span {
  color: var(--signal);
  display: block;
}

.hero-summary {
  color: #d9e1eb;
  font-size: 0.94rem;
  max-width: 42ch;
}

.hero-actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.hero-stamp {
  align-items: center;
  border-top: 1px solid var(--line-dark);
  color: #b9c6d4;
  display: flex;
  font-size: 0.68rem;
  gap: 1rem;
  justify-content: space-between;
  letter-spacing: 0.08em;
  margin-top: 2rem;
  padding-top: 1rem;
  text-transform: uppercase;
}

.signal-strip {
  background: var(--signal);
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
}

.signal-strip__track {
  align-items: center;
  display: flex;
  min-width: max-content;
}

.signal-strip span {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  letter-spacing: 0.02em;
  padding: 1.2rem 2.4rem;
  text-transform: uppercase;
}

.signal-strip i {
  font-family: var(--sans);
  font-style: normal;
  padding-inline: 1rem;
}

.section {
  padding-block: var(--space-7);
}

.section--tight {
  padding-block: var(--space-6);
}

.section--dark {
  background: var(--ink);
  color: var(--white);
}

.section--blue {
  background: var(--cobalt);
  color: var(--white);
}

.section--ice {
  background: var(--ice);
}

.section-heading {
  display: grid;
  gap: 1.4rem;
  margin-bottom: var(--space-6);
}

.section-heading h2 {
  margin-bottom: 0;
}

.section-heading p {
  color: var(--steel);
  margin-bottom: 0;
  max-width: 45ch;
}

.section--dark .section-heading p,
.section--blue .section-heading p {
  color: #d5dfeb;
}

.service-list {
  border-top: 1px solid var(--line-dark);
}

.service-row {
  align-items: center;
  border-bottom: 1px solid var(--line-dark);
  display: grid;
  gap: 1rem;
  min-height: 10rem;
  overflow: hidden;
  padding-block: 1.5rem;
  position: relative;
  text-decoration: none;
}

.service-row__title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 5.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  transition: color 180ms ease;
  z-index: 2;
}

.service-row p {
  color: #dbe3f2;
  font-size: 0.84rem;
  margin-bottom: 0;
  max-width: 38ch;
  z-index: 2;
}

.service-row svg {
  height: 2rem;
  width: 2rem;
  z-index: 2;
}

/* Photos shown at full natural colour, in their own grid cell (no overlay on the blue). */
.service-row img {
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  display: block;
  height: auto;
  object-fit: cover;
  opacity: 1;
  order: -1;
  width: 100%;
}

.service-row:hover .service-row__title {
  color: var(--signal);
}

.proof-grid {
  display: grid;
  gap: 1rem;
}

.proof-image {
  min-height: 20rem;
  overflow: hidden;
  position: relative;
}

.proof-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.proof-copy {
  background: var(--signal);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 20rem;
  padding: clamp(1.5rem, 5vw, 4rem);
}

.proof-copy h2 {
  font-size: clamp(3.8rem, 9vw, 7rem);
  margin-bottom: 2rem;
}

.proof-copy p {
  max-width: 42ch;
}

.proof-copy .button {
  align-self: flex-start;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.gallery-grid {
  display: grid;
  gap: 0.8rem;
}

.gallery-item {
  background: var(--ink-soft);
  color: var(--white);
  margin: 0;
  min-height: 19rem;
  overflow: hidden;
  position: relative;
}

.gallery-item img {
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
  width: 100%;
}

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

.gallery-item figcaption {
  background: var(--ink);
  bottom: 0;
  font-size: 0.7rem;
  font-weight: 700;
  left: 0;
  letter-spacing: 0.05em;
  padding: 0.65rem 0.8rem;
  position: absolute;
  text-transform: uppercase;
}

.gallery-item--tall {
  min-height: 29rem;
}

.gallery-item--wide {
  min-height: 15rem;
}

.testimonial-grid {
  display: grid;
  gap: 1px;
  margin-top: 2rem;
}

.testimonial {
  background: var(--white);
  border-top: 1px solid var(--line-light);
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.testimonial p {
  font-size: clamp(1.15rem, 2.5vw, 1.8rem);
  line-height: 1.35;
  max-width: 39ch;
}

.testimonial footer {
  color: var(--steel);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.accreditation-band {
  align-items: center;
  border-block: 1px solid var(--line-light);
  display: grid;
  gap: 1.5rem;
  padding-block: 1.5rem;
}

.accreditation-band p {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0;
  text-transform: uppercase;
}

.accreditation-band img {
  max-height: 3.8rem;
  object-fit: contain;
  object-position: left center;
  width: min(100%, 31rem);
}

.cta-field {
  background: var(--cobalt);
  color: var(--white);
  overflow: hidden;
  padding-block: var(--space-7);
  position: relative;
}

.cta-field::after {
  border: clamp(2.8rem, 10vw, 8rem) solid transparent;
  border-right-color: var(--signal);
  border-top-color: var(--signal);
  content: "";
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
}

.cta-field h2 {
  max-width: 10ch;
}

.cta-field p {
  color: #dbe3ff;
  max-width: 45ch;
}

.cta-actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 2rem;
}

.page-hero {
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

.page-hero__grid {
  display: grid;
}

.page-hero__copy {
  padding: clamp(3rem, 8vw, 7rem) var(--gutter);
}

.page-hero__copy h1 {
  font-size: clamp(4.6rem, 11vw, 9rem);
  margin-bottom: 1.5rem;
  max-width: 8ch;
}

.page-hero__copy h1 span {
  color: var(--signal);
}

.page-hero__copy p {
  color: #ccd6e2;
  max-width: 44ch;
}

.page-hero__image {
  min-height: 24rem;
  overflow: hidden;
  position: relative;
}

.page-hero__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.page-hero__image::after {
  background: var(--cobalt);
  bottom: 0;
  color: var(--white);
  content: attr(data-label);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.8rem 1rem;
  position: absolute;
  right: 0;
  text-transform: uppercase;
}

.story-grid {
  display: grid;
  gap: 2.5rem;
}

.story-grid h2 {
  font-size: clamp(3.8rem, 8vw, 7rem);
}

.story-copy p:first-child {
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  line-height: 1.45;
}

.material-list {
  border-top: 1px solid var(--line-light);
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.material-list li {
  align-items: center;
  border-bottom: 1px solid var(--line-light);
  display: flex;
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.5vw, 3.6rem);
  justify-content: space-between;
  line-height: 1;
  padding-block: 1rem;
  text-transform: uppercase;
}

.material-list svg {
  color: var(--cobalt);
  height: 1.5rem;
  width: 1.5rem;
}

.feature-split {
  display: grid;
}

.feature-split__image {
  min-height: 22rem;
}

.feature-split__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.feature-split__copy {
  background: var(--white);
  padding: clamp(2rem, 6vw, 5rem);
}

.feature-split__copy h2 {
  font-size: clamp(3.5rem, 8vw, 6.7rem);
}

.feature-split--reverse .feature-split__copy {
  background: var(--signal);
}

.compact-list {
  columns: 1;
  padding-left: 1.2rem;
}

.compact-list li {
  margin-bottom: 0.55rem;
}

.service-detail {
  border-top: 1px solid var(--line-light);
  display: grid;
  gap: 1.5rem;
  padding-block: 2.4rem;
}

.service-detail h2 {
  font-size: clamp(3.4rem, 8vw, 6.6rem);
  margin-bottom: 0;
}

.service-detail__photo {
  min-height: 19rem;
  overflow: hidden;
}

.service-detail__photo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.contact-layout {
  display: grid;
  gap: 2.5rem;
}

.contact-panel {
  background: var(--ink);
  color: var(--white);
  padding: clamp(1.5rem, 5vw, 3.6rem);
}

.contact-panel h2 {
  font-size: clamp(3.6rem, 9vw, 7rem);
}

.contact-panel p {
  color: #cbd6e2;
}

.contact-lines {
  border-top: 1px solid var(--line-dark);
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.contact-lines li {
  border-bottom: 1px solid var(--line-dark);
  padding-block: 1rem;
}

.contact-lines small {
  color: #9daebe;
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.22rem;
  text-transform: uppercase;
}

.contact-lines a {
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 700;
}

.quote-form {
  background: var(--white);
  border: 1px solid var(--line-light);
  padding: clamp(1.5rem, 5vw, 3.5rem);
}

.quote-form h2 {
  font-size: clamp(3.3rem, 7vw, 5.4rem);
}

.quote-form > p {
  color: var(--steel);
}

.form-grid {
  display: grid;
  gap: 1.1rem;
  margin-top: 2rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  background: var(--paper);
  border: 1px solid #909ca8;
  border-radius: 0.12rem;
  min-height: 3.25rem;
  padding: 0.8rem 0.9rem;
  width: 100%;
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--cobalt);
  outline-color: var(--cobalt);
}

.honeypot {
  left: -9999px;
  position: absolute;
}

.form-note {
  color: var(--steel);
  font-size: 0.72rem;
  margin: 1rem 0 0;
}

.quote-assistant {
  bottom: 1rem;
  position: fixed;
  right: 1rem;
  z-index: 80;
}

.quote-assistant > summary {
  align-items: center;
  background: var(--signal);
  border: 0.15rem solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, 0.65);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  height: 3.8rem;
  justify-content: center;
  list-style: none;
  margin-left: auto;
  width: 3.8rem;
}

.quote-assistant > summary::-webkit-details-marker {
  display: none;
}

.quote-assistant > summary svg {
  fill: none;
  height: 1.65rem;
  stroke: currentColor;
  stroke-width: 1.8;
  width: 1.65rem;
}

.assistant-panel {
  background: var(--paper);
  border: 0.15rem solid var(--ink);
  bottom: 4.5rem;
  box-shadow: 0 1.5rem 4rem -1.5rem rgba(0, 0, 0, 0.65);
  max-height: min(38rem, calc(100svh - 7rem));
  overflow: auto;
  position: absolute;
  right: 0;
  width: min(23rem, calc(100vw - 2rem));
}

.assistant-head {
  background: var(--ink);
  color: var(--white);
  padding: 1.15rem;
}

.assistant-head strong {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.assistant-head span {
  color: #b9c5d1;
  font-size: 0.72rem;
}

.assistant-body {
  padding: 1rem;
}

.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.quick-replies button {
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.48rem 0.7rem;
}

.quick-replies button:hover {
  background: var(--signal);
}

.chat-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.chat-steps li {
  border-bottom: 0.2rem solid #aeb7bf;
  color: var(--steel);
  font-size: 0.63rem;
  font-weight: 700;
  padding: 0 0 0.45rem;
  text-transform: uppercase;
}

.chat-steps li:first-child {
  border-color: var(--cobalt);
  color: var(--ink);
}

.assistant-form {
  display: grid;
  gap: 0.7rem;
}

.assistant-form .field {
  gap: 0.25rem;
}

.assistant-form .field label {
  font-size: 0.62rem;
}

.assistant-form .field input,
.assistant-form .field select,
.assistant-form .field textarea {
  background: var(--white);
  min-height: 2.65rem;
  padding: 0.58rem 0.65rem;
}

.assistant-form .field textarea {
  min-height: 4.6rem;
}

.assistant-form .button {
  margin-top: 0.25rem;
  width: 100%;
}

.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: 3.5rem 0 6.5rem;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
}

.footer-brand h2 {
  color: var(--signal);
  font-size: clamp(3.2rem, 8vw, 6rem);
  max-width: 8ch;
}

.footer-links {
  display: grid;
  gap: 0.7rem;
}

.footer-links a {
  color: #c8d3df;
  width: fit-content;
}

.footer-meta {
  border-top: 1px solid var(--line-dark);
  color: #8ea0b3;
  font-size: 0.68rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
}

.mobile-call {
  align-items: center;
  background: var(--cobalt);
  bottom: 0;
  color: var(--white);
  display: flex;
  font-size: 0.76rem;
  font-weight: 700;
  gap: 0.55rem;
  justify-content: center;
  left: 0;
  min-height: 3.5rem;
  position: fixed;
  right: 0;
  text-decoration: none;
  text-transform: uppercase;
  z-index: 70;
}

.mobile-call svg {
  fill: none;
  height: 1.1rem;
  stroke: currentColor;
  stroke-width: 1.8;
  width: 1.1rem;
}

@media (min-width: 42rem) {
  .hero-actions,
  .cta-actions {
    align-items: center;
    flex-direction: row;
  }

  .proof-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

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

  .gallery-item--wide {
    grid-column: 1 / -1;
  }

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

  .testimonial:nth-child(even) {
    border-left: 1px solid var(--line-light);
  }

  .accreditation-band {
    grid-template-columns: 0.55fr 1.45fr;
  }

  .compact-list {
    columns: 2;
    column-gap: 2.5rem;
  }

  .form-grid--two {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid--two .field--full,
  .form-grid--two .button,
  .form-grid--two .form-note {
    grid-column: 1 / -1;
  }
}

@media (min-width: 56rem) {
  .desktop-nav {
    display: flex;
  }

  .nav-disclosure {
    display: none;
  }

  .header-social {
    margin: 0 0 0 1.2rem;
  }

  .desktop-nav {
    margin-left: auto;
  }

  .mobile-call {
    display: none;
  }

  .site-footer {
    padding-bottom: 3.5rem;
  }

  .hero-home {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(25rem, 0.95fr);
  }

  .hero-content {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    padding-block: 5rem;
    padding-left: var(--gutter);
    padding-right: clamp(1.5rem, 4vw, 4rem);
  }

  .hero-photo {
    grid-column: 2;
    grid-row: 1;
    height: auto;
    margin-left: 0;
    min-height: 46rem;
  }

  .hero-photo::before {
    background: var(--cobalt);
    clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
    content: "";
    height: 1.2rem;
    left: -5rem;
    position: absolute;
    top: 12%;
    width: 14rem;
    z-index: 2;
  }

  .signal-strip__track {
    animation: signal-scroll 26s linear infinite;
  }

  @keyframes signal-scroll {
    to {
      transform: translateX(-50%);
    }
  }

  .section {
    padding-block: var(--space-8);
  }

  .section-heading {
    align-items: end;
    grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr);
  }

  .service-row {
    grid-template-columns: minmax(0, 1.1fr) minmax(13rem, 0.7fr) minmax(16rem, 22rem) auto;
    min-height: 9rem;
  }

  .service-row img {
    aspect-ratio: 4 / 3;
    grid-column: 3;
    grid-row: 1;
    order: 0;
  }

  .service-row svg {
    grid-column: 4;
    grid-row: 1;
  }

  .gallery-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .gallery-item:nth-child(1) {
    grid-column: span 7;
  }

  .gallery-item:nth-child(2) {
    grid-column: span 5;
  }

  .gallery-item:nth-child(3) {
    grid-column: span 4;
  }

  .gallery-item:nth-child(4) {
    grid-column: span 8;
  }

  .gallery-item--wide {
    grid-column: span 8;
  }

  .page-hero__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(32rem, 1.1fr);
    min-height: 42rem;
  }

  .page-hero__copy {
    align-self: center;
  }

  .story-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(24rem, 1.15fr);
  }

  .feature-split {
    grid-template-columns: 1fr 1fr;
  }

  .feature-split--reverse .feature-split__image {
    order: 2;
  }

  .service-detail {
    align-items: start;
    grid-template-columns: minmax(15rem, 0.75fr) minmax(20rem, 0.9fr) minmax(19rem, 0.85fr);
  }

  .contact-layout {
    align-items: start;
    grid-template-columns: minmax(20rem, 0.8fr) minmax(28rem, 1.2fr);
  }

  .footer-grid {
    grid-template-columns: 1.4fr 0.6fr 0.7fr;
  }
}

@media (min-width: 80rem) {
  .gallery-grid {
    gap: 1rem;
  }

  .gallery-item {
    min-height: 27rem;
  }

  .gallery-item--tall {
    min-height: 38rem;
  }
}

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

  .signal-strip__track {
    animation: none;
  }

  .signal-strip__track > span:nth-child(2) {
    display: none;
  }

  .button,
  .service-row__title,
  .service-row img,
  .gallery-item img {
    transition: none;
  }

  .button:hover,
  .service-row:hover img,
  .service-row:focus-visible img,
  .gallery-item:hover img {
    transform: none;
  }
}

@media (forced-colors: active) {
  .button,
  .quote-assistant > summary,
  .quick-replies button {
    border: 2px solid currentColor;
  }
}

picture { display: contents; }
.footer-brand__title {
  margin: 0 0 0.83em;
  color: var(--signal);
  font: 400 clamp(3.2rem, 8vw, 6rem) / 0.94 var(--display);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  max-width: 8ch;
}

/* Phone first screen: keep the hero headline clear of the fixed call bar,
   and lift the quote-assistant button above the bar. */
@media (max-width: 55.99rem) {
  .hero-content {
    padding-top: 2rem;
  }

  .hero-content h1 {
    font-size: clamp(3.2rem, 14vw, 4.4rem);
    margin-bottom: 1rem;
  }

  .quote-assistant {
    bottom: calc(3.5rem + 0.9rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Home on phones: the call bar slides in only after the visitor scrolls past
   the hero (the hero already has its own call button). Needs the small script
   in index.html; without JavaScript the bar simply stays visible. */
@media (max-width: 55.99rem) {
  .js-callbar .mobile-call {
    transform: translateY(105%);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    visibility: hidden;
  }

  .js-callbar.callbar-on .mobile-call {
    transform: none;
    transition: transform 0.25s ease;
    visibility: visible;
  }

  .js-callbar:not(.callbar-on) .quote-assistant {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .quote-assistant {
    transition: bottom 0.25s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-callbar .mobile-call,
  .quote-assistant {
    transition: none;
  }
}

/* h1 keyword line (option 2) */
.h1-seo{display:block;margin-top:1rem;font-size:clamp(1rem,1.6vw,1.35rem);font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;max-width:none;color:inherit}

/* minmax(0,…) stops long headings forcing the columns wider than the screen. */
.feature-split{grid-template-columns:minmax(0,1fr)}
@media (min-width:56rem){.feature-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Long single words (WORKMANSHIP, WATERPROOFING) must fit their column at every width. */
.page-hero__copy,
.feature-split__copy{container-type:inline-size}
#about-title{font-size:min(clamp(4.6rem,11vw,9rem),18cqi)}
.feature-split__copy h2{font-size:min(clamp(3.5rem,8vw,6.7rem),17cqi)}

/* Production quote assistant: status message and WhatsApp alternative. */
.atlantic-form-result:empty{display:none}
.atlantic-form-result{font-size:.85rem;font-weight:700}
.assistant-alt{font-size:.75rem;margin:0}
.assistant-alt a{color:var(--cobalt);font-weight:700}

/* Cookie banner (existing CookieYes consent, carried over) in the site's colours.
   !important beats the inline colours in the plugin's template. */
.cky-consent-bar,.cky-modal{background:var(--paper)!important;border:.15rem solid var(--ink)!important;border-radius:0!important;font-family:var(--sans)}
.cky-title,.cky-preference-title{font-family:var(--display)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink)!important}
.cky-notice-des,.cky-notice-des *{color:var(--ink)!important}
.cky-btn{border-radius:.12rem!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.04em}
.cky-btn-accept,.cky-btn-preferences{background:var(--signal)!important;border-color:var(--ink)!important;color:var(--ink)!important}
.cky-btn-reject,.cky-btn-customize{background:transparent!important;border-color:var(--ink)!important;color:var(--ink)!important}
.cky-btn-revisit-wrapper{background:var(--ink)!important}

/* Full live-site copy: dark text on the white copy panel inside blue sections,
   sub-headings inside long service copy, and the "Why choose" list. */
.feature-split__copy{color:var(--ink)}
.feature-split__copy h3,.service-detail h3,.story-copy h3{font-size:clamp(1.1rem,1.6vw,1.35rem);margin:1.6rem 0 .6rem}
.service-detail h3{margin-top:0}
.why{background:var(--cobalt);color:var(--white)}
.why-list li::before{color:var(--signal)}
.why-list p{color:#dbe3ff}
.why-list{counter-reset:why;display:grid;gap:0;list-style:none;margin:2rem 0 0;padding:0}
.why-list li{border-top:1px solid rgba(255,255,255,.35);counter-increment:why;display:grid;gap:.4rem 2rem;padding:1.6rem 0}
.why-list li::before{content:"0" counter(why);font:400 clamp(2.4rem,5vw,4rem)/1 var(--display)}
.why-list h3{font:400 clamp(1.8rem,3.4vw,2.8rem)/1 var(--display);margin:0;text-transform:uppercase}
.why-list p{margin:0;max-width:60ch}
@media (min-width:56rem){
  .why-list li{align-items:start;grid-template-columns:6rem minmax(0,.8fr) minmax(0,1.2fr)}
}
@media (min-width:56rem){.service-detail__photo img{aspect-ratio:4/5;height:auto;object-fit:cover;width:100%}}

/* Home hero: full-bleed photo; the copy sits on a dark panel whose right edge is
   cut at a roof pitch, with a yellow "flashing" strip along the cut. The panel
   slowly drifts through deep colours (all keep white/yellow text readable). */
.hero-home{display:grid;align-items:end;grid-template-columns:minmax(0,1fr);min-height:calc(100svh - 4.8rem)}
.hero-home .hero-photo{grid-column:1/-1;grid-row:1;height:auto;inset:0;margin:0;min-height:0;position:absolute}
.hero-home .hero-photo::before{content:none}
.hero-home .hero-photo::after{background:rgba(11,16,24,.1)}
.hero-home .hero-content{align-self:end;display:flex;flex-direction:column;isolation:isolate;justify-content:center;padding:3rem 1.4rem 4.5rem;position:relative}
.hero-home .hero-content::before{animation:hero-panel-colour 16s ease-in-out infinite;background-color:var(--ink);background-image:linear-gradient(135deg,rgba(255,255,255,.06),rgba(0,0,0,.25));clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);content:"";inset:0;position:absolute;z-index:-1}
@keyframes hero-panel-colour{
  0%,100%{background-color:var(--ink)}
  25%{background-color:#1028a8}
  50%{background-color:#7a0040}
  75%{background-color:#08524c}
}
/* Phones: the roof photo IS the first screen (portrait crop of the roof lines and
   mountain, slow zoom). The panel unwraps (display:contents) so the headline and
   buttons sit over the photo's foot and the description follows below it. */
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.12)}}
@media (max-width:55.99rem){
  .hero-home{align-items:stretch;grid-template-rows:calc(100svh - 4.8rem) auto auto;min-height:0;padding-bottom:1rem}
  .hero-home .hero-photo{bottom:auto;grid-row:1;height:calc(100svh - 4.8rem);position:relative}
  .hero-home .hero-photo img{animation:hero-zoom 18s ease-out both;object-position:66% 50%}
  .hero-home .hero-photo::after{background:linear-gradient(180deg,rgba(11,16,24,.25) 0%,rgba(11,16,24,0) 30%,rgba(11,16,24,.55) 58%,rgba(11,16,24,.96) 100%)}
  .hero-home .hero-content{display:contents}
  .hero-home .hero-content::before{content:none}
  .hero-home .hero-content > *{grid-column:1;margin-inline:1.25rem;position:relative;z-index:2}
  .hero-home .hero-content h1{align-self:end;font-size:clamp(3rem,13vw,4rem);grid-row:1;margin-bottom:calc(7rem + 2.6rem)}
  .hero-home .hero-actions{align-self:end;grid-row:1;margin:0 1.25rem 1.6rem}
  .hero-home .hero-summary{border-top:.35rem solid var(--signal);grid-row:2;margin-top:0;padding-top:1.4rem}
  .hero-home .hero-stamp{grid-row:3}
}
@media (max-width:55.99rem){html.js-callbar:not(.callbar-on):has(.hero-home) .quote-assistant:not([open]){opacity:0;pointer-events:none;visibility:hidden}.quote-assistant{transition:bottom .25s ease,opacity .25s ease,visibility .25s}}
@media (min-width:42rem) and (max-width:55.99rem){.hero-home .hero-content h1{margin-bottom:calc(3.2rem + 2.6rem)}}
@media (max-width:55.99rem) and (prefers-reduced-motion:reduce){.hero-home .hero-photo img{animation:none}}
@media (min-width:56rem){
  .hero-home .hero-content{align-self:stretch;grid-column:1;grid-row:1;padding:4rem 9rem 4rem var(--gutter);width:min(62rem,62%)}
  .hero-home .hero-content::before{clip-path:polygon(0 0,100% 0,78% 100%,0 100%)}
  .hero-home .hero-content::after{background:var(--signal);clip-path:polygon(100% 0,calc(100% + .9rem) 0,calc(78% + .9rem) 100%,78% 100%);content:"";inset:0;position:absolute;transform:translateX(-.9rem);z-index:-1}
  .hero-home .hero-content h1{font-size:clamp(4.4rem,7vw,7.6rem);max-width:none}
  .hero-home .hero-stamp{margin-right:12%}
}
@media (prefers-reduced-motion:reduce){.hero-home .hero-content::before{animation:none}}
.hero-home .hero-photo img{object-position:60% 40%}

/* Accreditation logos scrolling past (four identical sets; the track moves one set width). */
.accreditation-band{grid-template-columns:minmax(0,1fr)}
@media (min-width:42rem){.accreditation-band{grid-template-columns:minmax(0,.35fr) minmax(0,1.65fr)}}
.logo-marquee{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);overflow:hidden}
.logo-track{animation:logo-scroll 24s linear infinite;display:flex;width:max-content}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-set{align-items:center;display:flex;flex:none;gap:clamp(2.5rem,6vw,5rem);padding-right:clamp(2.5rem,6vw,5rem)}
.accreditation-band .logo-set img{height:clamp(3.2rem,6vw,4.6rem);max-height:none;width:auto}
@keyframes logo-scroll{to{transform:translateX(-25%)}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none}.logo-set[aria-hidden]{display:none}}

/* Weather loop over the home hero photo (weather.js). */
.weather-canvas{height:100%;inset:0;pointer-events:none;position:absolute;width:100%;z-index:1}
.weather-chip{background:rgba(11,16,24,.72);border-left:.25rem solid var(--signal);color:var(--white);font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:.55rem .8rem;position:absolute;right:1rem;text-transform:uppercase;top:1rem;z-index:2}
.weather-chip:empty{display:none}

/* Service row titles (WATERPROOFING): atlantic.js shrinks any that overflow their column. */
.service-row>*{min-width:0}
.service-row__title{display:block}

/* Readability pass: headings about a third smaller, body copy beside them larger
   and brighter. Placed last so it wins over the earlier sizes. */
h1{font-size:clamp(3rem,7.5vw,6.4rem)}
h2{font-size:clamp(2.3rem,5vw,4.4rem)}
.page-hero__copy h1{font-size:clamp(3rem,7vw,5.8rem)}
#about-title{font-size:min(clamp(3rem,7vw,5.8rem),16cqi)}
.proof-copy h2,.story-grid h2,.contact-panel h2{font-size:clamp(2.3rem,5vw,4.2rem)}
.feature-split__copy h2{font-size:min(clamp(2.3rem,4.6vw,4rem),15cqi)}
.service-detail h2,.quote-form h2{font-size:clamp(2.2rem,4.6vw,3.8rem)}
.service-row__title{font-size:clamp(1.9rem,3.6vw,3.2rem)}
.why-list h3{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.footer-brand__title,.footer-brand h2{font-size:clamp(2.4rem,5vw,4rem)}
@media (min-width:56rem){.hero-home .hero-content h1{font-size:clamp(3.6rem,5.6vw,6rem)}}

body{font-size:1.06rem}
.hero-summary{font-size:1.05rem;line-height:1.6}
.section-heading p{font-size:1.1rem;line-height:1.6;max-width:52ch}
.section--dark .section-heading p,.section--blue .section-heading p{color:#eef2fb}
.service-row p{color:#f1f4fb;font-size:1.02rem;line-height:1.55}
.why-list p{color:#f1f4fb;font-size:1.02rem}
.testimonial footer,.hero-stamp,.accreditation-band p{font-size:.8rem}
.story-copy p:first-child{font-size:clamp(1.15rem,1.9vw,1.45rem)}
.testimonial p{font-size:clamp(1.1rem,1.9vw,1.45rem)}

/* Signal strip: both copies end with a dot and carry no outer padding, so the loop
   joins as "… Painting • New roofs …" with even spacing. */
.signal-strip span{padding:1.2rem 0 1.2rem 1rem}
@media (min-width:56rem){.section-heading{align-items:center}.section-heading h2{margin-bottom:0}}

/* Review fixes 2026-10-21 */
/* 1 Zincalume list: one column so no bullet is stranded across a column break. */
.service-detail .compact-list,.feature-split__copy .compact-list{columns:1}
/* 2 Roofing section: no double gap under "Our services". */
#roofing{padding-top:var(--space-5)}
#roofing .service-detail{border-top:0}
/* 3 About gallery: the third photo spans the full row instead of sitting alone. */
@media (min-width:56rem){.gallery-grid>.gallery-item:nth-child(3):last-child{grid-column:1/-1}.gallery-grid>.gallery-item:nth-child(3):last-child img{aspect-ratio:21/8;height:auto;object-fit:cover}}
/* 4 Material lists: calmer size, closer to the section headings. */
.material-list li{font-size:clamp(1.4rem,2.6vw,2.2rem);padding-block:.85rem}
/* 5 Quote band: copy and buttons sit side by side on wide screens, no dead right half. */
@media (min-width:56rem){
  .cta-field .shell{align-items:center;display:grid;gap:1rem 4rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cta-field h2{grid-row:1/3;margin:0;max-width:none}
  .cta-field p{margin:0}
  .cta-field .cta-actions{margin-top:0}
}
/* 6 Intro text on light backgrounds: darker grey. */
.section-heading p{color:#3c4a59}
.section--dark .section-heading p,.section--blue .section-heading p{color:#eef2fb}
/* 7 Form fields white so they read as fields, not as page. */
.quote-form .field input,.quote-form .field textarea,.quote-form .field select{background:var(--white)}
.quote-form>p,.contact-panel>p{color:#3c4a59}.contact-panel>p{color:#d5dfeb}

/* Gallery page */
.page-hero--compact{padding-block:clamp(3rem,7vw,5.5rem)}
.page-hero--compact h1{margin-bottom:1rem}
.page-hero--compact p{color:#ccd6e2;font-size:1.05rem;max-width:52ch}
.gallery-wall{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));list-style:none;margin:0;padding:0}
.gallery-thumb{background:var(--ink-soft);display:block;overflow:hidden}
.gallery-thumb img{aspect-ratio:4/3;display:block;height:auto;object-fit:cover;transition:transform .35s ease,opacity .2s;width:100%}
.gallery-thumb:hover img,.gallery-thumb:focus-visible img{opacity:.88;transform:scale(1.04)}
@media (max-width:41.99rem){.gallery-wall{gap:.35rem;grid-template-columns:repeat(2,minmax(0,1fr))}}
.lightbox{background:transparent;border:0;height:100%;margin:0;max-height:none;max-width:none;padding:0;width:100%}
.lightbox::backdrop{background:rgba(6,9,15,.94)}
.lightbox[open]{align-items:center;display:flex;justify-content:center}
.lightbox img{height:auto;max-height:calc(100svh - 7rem);max-width:min(94vw,1800px);object-fit:contain;width:auto}
.lightbox button{background:rgba(11,16,24,.7);border:1px solid rgba(255,255,255,.35);color:var(--white);cursor:pointer;font-size:2rem;height:3.2rem;line-height:1;position:fixed;width:3.2rem}
.lightbox button:hover,.lightbox button:focus-visible{background:var(--signal);color:var(--ink)}
.lightbox__close{right:1rem;top:1rem}
.lightbox__prev{left:1rem;top:50%;transform:translateY(-50%)}
.lightbox__next{right:1rem;top:50%;transform:translateY(-50%)}
.lightbox__count{bottom:1rem;color:#ccd6e2;font-size:.85rem;left:50%;margin:0;position:fixed;transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){.gallery-thumb img{transition:none}}

/* ===== AI chat assistant ===== */
.sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px;white-space:nowrap}
.chat>summary{background:none;border:0;border-radius:999px;box-shadow:none;gap:.6rem;height:auto;width:auto}
.chat>summary img{background:var(--cobalt);border:.2rem solid var(--signal);border-radius:50%;box-shadow:0 1rem 2.5rem -1rem rgba(0,0,0,.7);height:4rem;width:4rem}
.chat>summary::after{background:#2fd16a;border:2px solid var(--white);border-radius:50%;content:"";height:.85rem;position:absolute;right:.15rem;top:.15rem;width:.85rem}
.chat>summary{position:relative}
.chat-launch-label{background:var(--ink);border:1px solid rgba(255,255,255,.2);border-radius:999px;color:var(--white);font-size:.85rem;font-weight:700;order:-1;padding:.6rem 1rem;white-space:nowrap}
@media (max-width:55.99rem){.chat-launch-label{display:none}}
.chat[open] .chat-launch-label{display:none}
.chat-panel{background:var(--paper);display:flex;flex-direction:column;height:min(40rem,calc(100svh - 7rem));max-height:none;overflow:hidden;padding:0;width:min(25rem,calc(100vw - 2rem))}
.chat-head{align-items:center;background:var(--ink);color:var(--white);display:flex;gap:.75rem;padding:.85rem 1rem}
.chat-head img{background:var(--cobalt);border:.15rem solid var(--signal);border-radius:50%;height:2.9rem;width:2.9rem}
.chat-head div{display:grid;flex:1;line-height:1.25}
.chat-head strong{font-size:1rem}
.chat-head span{align-items:center;color:#b9c5d1;display:flex;font-size:.78rem;gap:.4rem}
.chat-head i{background:#2fd16a;border-radius:50%;display:inline-block;height:.5rem;width:.5rem}
.chat-close{background:none;border:0;color:var(--white);cursor:pointer;font-size:1.8rem;line-height:1;padding:.2rem .4rem}
.chat-close:hover,.chat-close:focus-visible{color:var(--signal)}
.chat-log{display:flex;flex:1;flex-direction:column;gap:.6rem;overflow-y:auto;overscroll-behavior:contain;padding:1rem}
.chat-msg{border-radius:1rem;font-size:.95rem;line-height:1.5;max-width:88%;padding:.65rem .9rem}
.chat-msg p{margin:0 0 .45rem}.chat-msg p:last-child{margin:0}
.chat-msg ul{margin:.2rem 0 .45rem;padding-left:1.1rem}.chat-msg li{margin:.15rem 0}
.chat-msg--bot{align-self:flex-start;background:var(--white);border:1px solid #dfe3e8;border-bottom-left-radius:.25rem;color:var(--ink)}
.chat-msg--bot a{color:var(--cobalt);font-weight:700}
.chat-msg--user{align-self:flex-end;background:var(--cobalt);border-bottom-right-radius:.25rem;color:var(--white);white-space:pre-wrap}
.chat-typing{display:flex;gap:.3rem;padding:.85rem 1rem}
.chat-typing span{animation:chat-dot 1.2s infinite ease-in-out;background:#9aa6b2;border-radius:50%;height:.45rem;width:.45rem}
.chat-typing span:nth-child(2){animation-delay:.15s}.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-.25rem)}}
.chat-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .75rem}
.chat-chips[hidden]{display:none}
.chat-chips button{background:var(--white);border:1px solid var(--ink);border-radius:999px;color:var(--ink);cursor:pointer;font-size:.8rem;font-weight:700;padding:.45rem .75rem}
.chat-chips button:hover,.chat-chips button:focus-visible{background:var(--signal)}
.chat-handoff{background:var(--white);border:1px solid #dfe3e8;border-radius:1rem;display:grid;gap:.55rem;padding:.9rem}
.chat-handoff[hidden]{display:none}
.chat-handoff__title{font-weight:700;margin:0}
.chat-handoff .field label{font-size:.75rem}
.chat-handoff .field input{background:var(--white);min-height:2.6rem;padding:.5rem .65rem}
.chat-compose{align-items:flex-end;background:var(--white);border-top:1px solid #dfe3e8;display:flex;gap:.5rem;padding:.65rem .75rem}
.chat-compose textarea{border:1px solid #c3cad2;border-radius:1.2rem;flex:1;font:inherit;font-size:.95rem;max-height:7.5rem;min-height:2.6rem;padding:.6rem .9rem;resize:none}
.chat-compose textarea:focus-visible{border-color:var(--cobalt);outline:2px solid var(--cobalt);outline-offset:1px}
.chat-compose button{align-items:center;background:var(--cobalt);border:0;border-radius:50%;color:var(--white);cursor:pointer;display:flex;flex:none;height:2.6rem;justify-content:center;width:2.6rem}
.chat-compose button:disabled{opacity:.5}
.chat-compose svg{fill:none;height:1.25rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.2;width:1.25rem}
.chat-foot{background:var(--white);color:#55616d;font-size:.7rem;margin:0;padding:0 .9rem .6rem;text-align:center}
.chat-foot a{color:var(--cobalt)}
@media (max-width:41.99rem){
  .chat[open] .chat-panel{border:0;bottom:0;height:100svh;left:0;position:fixed;right:0;top:0;width:100vw;z-index:120}
  .chat[open]>summary{visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.chat-typing span{animation:none}}
.chat-foot a{white-space:nowrap}
.chat-handoff__skip{background:none;border:0;color:#55616d;cursor:pointer;font-size:.8rem;justify-self:center;text-decoration:underline}
.chat-msg a{white-space:nowrap}

/* Chat v2: messenger look with Leah's photo (light, centred intro, small avatar per reply). */
.chat>summary img{background:var(--white);border:.2rem solid var(--white);box-shadow:0 .8rem 2rem -.6rem rgba(0,0,0,.55),0 0 0 .15rem var(--cobalt)}
.chat-launch-label{background:var(--white);border:1px solid #dfe3e8;color:var(--ink);box-shadow:0 .6rem 1.6rem -.8rem rgba(0,0,0,.45)}
.chat-panel{background:var(--white);border:1px solid #dfe3e8;border-radius:1.1rem;box-shadow:0 1.5rem 4rem -1.2rem rgba(0,0,0,.45)}
.chat-head{background:var(--white);border-bottom:1px solid #eef0f3;color:var(--ink);justify-content:space-between;padding:.55rem .6rem}
.chat-head__title{color:#55616d;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.chat-restart,.chat-close{align-items:center;background:none;border:0;border-radius:50%;color:#55616d;cursor:pointer;display:flex;height:2.4rem;justify-content:center;padding:0;width:2.4rem}
.chat-close{font-size:1.7rem;line-height:1}
.chat-restart svg{fill:none;height:1.2rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:1.2rem}
.chat-restart:hover,.chat-close:hover,.chat-restart:focus-visible,.chat-close:focus-visible{background:#eef0f3;color:var(--ink)}
.chat-log{background:var(--white);padding:1.2rem 1rem}
.chat-intro{align-items:center;display:flex;flex-direction:column;gap:.15rem;margin:.4rem 0 1rem;text-align:center}
.chat-intro img{border-radius:50%;box-shadow:0 .5rem 1.4rem -.6rem rgba(0,0,0,.45);height:6.5rem;margin-bottom:.6rem;object-fit:cover;width:6.5rem}
.chat-intro strong{font-size:1.15rem}
.chat-intro span{color:#55616d;font-size:.82rem}
.chat-row{align-items:flex-end;align-self:flex-start;display:flex;gap:.5rem;max-width:92%}
.chat-row img{border-radius:50%;flex:none;height:2rem;object-fit:cover;width:2rem}
.chat-row .chat-msg{max-width:none}
.chat-msg--bot{background:#eef0f3;border:0;border-bottom-left-radius:.3rem}
.chat-msg--user{border-bottom-right-radius:.3rem}
.chat-typing{background:#eef0f3}
.chat-chips{background:var(--white)}
.chat-chips button{border-color:#c3cad2}
.chat-chips button:hover,.chat-chips button:focus-visible{background:var(--cobalt);border-color:var(--cobalt);color:var(--white)}
.chat-handoff{background:#f6f7f9;border-color:#e3e7eb}
.chat-compose{border-top-color:#eef0f3}
@media (max-width:41.99rem){.chat[open] .chat-panel{border-radius:0}}
.page-hero__image::after{left:0;right:auto}

/* Less blue (Antonio): "Why choose" on paper, cobalt only as a small accent. */
.why{background:var(--paper);color:var(--ink)}
.why-list li{border-top:1px solid var(--line-light)}
.why-list li::before{color:var(--cobalt)}
.why-list p{color:#3c4a59}
html:has(details.chat[open]) .cky-btn-revisit-wrapper{display:none!important}