/* ==========================================================================
   Out of the Toolbox: homepage v2
   One container (--ott-max 1280px), one section rhythm (--ott-section),
   one media radius (--h-r). Depends on ott-core.css.
   ========================================================================== */

:root { --h-r: 6px; --h-gap: 32px; }
@media (max-width: 1023.98px) { :root { --h-gap: 24px; } }

.ott-modern h1 em, .ott-modern h2 em { font-style: normal; color: var(--ott-blue); }

/* ---------- Section shells ---------- */
.h-sec { padding-block: var(--ott-section); }
.h-sec--pale { background: var(--ott-pale); }
.h-sec--tint { background: var(--ott-tint); }
.h-sec--blue { background: var(--ott-blue); color: rgba(255, 255, 255, 0.86); }
.h-sec--deep { background: var(--ott-blue-800); color: rgba(255, 255, 255, 0.8); }
.h-sec--blue h2, .h-sec--deep h2, .h-sec--blue h3, .h-sec--deep h3 { color: #fff; }
.h-sec--blue h2 em, .h-sec--deep h2 em { color: #bfe2f2; }

.h-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px !important;
  font: 700 0.75rem/1.2 var(--ott-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ott-blue);
}
.h-eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.h-eyebrow--light { color: #bfe2f2; }

.h-sec h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); line-height: 1.08; }

/* Section heading row: title left, supporting copy right, aligned on the baseline */
.h-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px var(--h-gap);
  align-items: end; margin-bottom: clamp(32px, 3vw, 48px);
}
.h-head h2 { max-width: 17ch; }
.h-head__aside { display: grid; gap: 14px; justify-items: start; }
.h-head__aside p { color: var(--ott-muted); max-width: 46ch; }
@media (max-width: 767.98px) { .h-head { grid-template-columns: 1fr; } }

.h-cat { display: block; font: 700 0.7rem/1.2 var(--ott-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ott-blue); }

.h-checks { list-style: none; display: grid; gap: 10px; margin: 24px 0 0 !important; }
.h-checks li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; color: var(--ott-ink); }
.h-checks svg { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; background: var(--ott-blue); color: #fff; }
.h-checks--light li { color: #fff; }
.h-checks--light svg { background: #fff; color: var(--ott-blue); }

/* Pause and play control */
.h-toggle {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 6px;
  border: 1px solid var(--ott-line); border-radius: var(--ott-pill); background: #fff; color: var(--ott-ink);
  font: 700 0.82rem/1 var(--ott-sans); cursor: pointer;
}
.h-toggle__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ott-blue); color: #fff; }
.h-toggle__icon svg { width: 13px; height: 13px; }
.h-toggle .i-play, .h-toggle .t-play { display: none; }
.h-toggle.is-paused .i-play, .h-toggle.is-paused .t-play { display: block; }
.h-toggle.is-paused .i-pause, .h-toggle.is-paused .t-pause { display: none; }
.h-toggle--light { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.h-toggle--light .h-toggle__icon { background: #fff; color: var(--ott-blue); }
.h-toggle--glass { background: rgba(255, 255, 255, 0.9); border-color: transparent; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ==========================================================================
   A. Hero: full-width film with a directional brand-blue shade
   ========================================================================== */
.h-hero {
  position: relative; display: flex; align-items: flex-end;
  height: clamp(600px, min(88svh, 62vw), 820px); overflow: hidden; background: #c9d6dd; isolation: isolate;
}
.h-hero__media { position: absolute; inset: 0; overflow: hidden; } /* Hotfix 01: was z-index: -1 */
.h-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 40%;
  transform: scale(1.18); transform-origin: 0% 38%; /* nudges the two people clear of the text column */
}
.h-hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 52, 77, 0.88) 0%, rgba(0, 61, 89, 0.72) 30%, rgba(0, 78, 112, 0.28) 54%, rgba(0, 78, 112, 0) 68%),
    linear-gradient(0deg, rgba(0, 52, 77, 0.5) 0%, rgba(0, 52, 77, 0) 42%);
}
/* Hotfix 01: small icon-only film control. The media layer no longer forms its own
   stacking context (it had z-index: -1, which trapped the button underneath the
   full-width text panel so clicks never reached it). The panel now stacks at 1 and
   the button at 2, so the button is on top; the painted result is unchanged. */
.h-hero__toggle {
  position: absolute; z-index: 2; bottom: clamp(40px, 6vh, 72px);
  right: max(var(--ott-gutter), calc((100% - var(--ott-max)) / 2));
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%;
  background: rgba(0, 40, 60, 0.3); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 0.2s, border-color 0.2s;
}
.h-hero__toggle::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; } /* 46px touch target */
.h-hero__toggle:hover { background: rgba(0, 40, 60, 0.55); border-color: rgba(255, 255, 255, 0.85); }
.h-hero__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.h-hero__toggle svg { width: 12px; height: 12px; }
.h-hero__toggle .i-play, .h-hero__toggle.is-paused .i-pause { display: none; }
.h-hero__toggle.is-paused .i-play { display: block; }
.h-hero__panel { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(40px, 6vh, 72px); }
.h-hero__content { max-width: 560px; color: #fff; }
.h-hero__eyebrow { margin: 0 0 18px !important; font: 700 0.75rem/1.2 var(--ott-sans); letter-spacing: 0.16em; text-transform: uppercase; color: #bfe2f2; }
.h-hero__title {
  font-size: clamp(2.5rem, 1.4rem + 3vw, 4.25rem) !important; line-height: 1.02 !important;
  letter-spacing: -0.02em !important; color: #fff !important;
}
.h-hero__title em { color: #bfe2f2 !important; }
.h-hero__lead { margin-top: 22px !important; max-width: 46ch; font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem); color: rgba(255, 255, 255, 0.9); }
.h-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

@media (min-width: 768px) and (max-width: 1023.98px) {
  .h-hero { height: clamp(560px, 72svh, 700px); }
  .h-hero__video { transform: none; object-position: 62% 40%; }
  .h-hero__shade {
    background:
      linear-gradient(0deg, rgba(0, 52, 77, 0.9) 0%, rgba(0, 61, 89, 0.7) 38%, rgba(0, 78, 112, 0) 70%);
  }
  .h-hero__toggle { top: calc(var(--ott-header-h) + 16px); bottom: auto; }
}
@media (max-width: 767.98px) {
  .h-hero { display: block; height: auto; background: var(--ott-blue); }
  .h-hero__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 1 / 1.02; }
  .h-hero__video { transform: none; object-position: 66% 40%; }
  .h-hero__shade { background: linear-gradient(0deg, var(--ott-blue) 0%, rgba(0, 111, 157, 0) 26%); }
  .h-hero__toggle { right: 16px; bottom: 28px; }
  .h-hero__panel { padding: 4px 0 36px; }
  .h-hero__lead { margin-top: 16px !important; }
  .h-hero__actions { margin-top: 24px; }
  .h-hero__actions .ott-btn { width: 100%; }
}

/* ==========================================================================
   B. Ribbon
   ========================================================================== */
.h-ribbon { background: #fff; border-bottom: 1px solid var(--ott-line-soft); overflow: hidden; }
.h-ribbon__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; }
.h-ribbon__list[aria-hidden] { display: none; }
.h-ribbon__list li {
  display: flex; align-items: center; justify-content: center; gap: 12px; height: 84px; padding: 0 12px;
  font: 700 0.9rem/1.2 var(--ott-sans); color: var(--ott-ink); white-space: nowrap;
}
.h-ribbon__list li + li { border-left: 1px solid var(--ott-line-soft); }
.h-ribbon__list svg { width: 26px; height: 26px; flex: none; color: var(--ott-blue); }
@media (max-width: 1023.98px) {
  .h-ribbon__wrap { padding: 0; max-width: none; }
  .h-ribbon__track { display: flex; width: max-content; animation: ott-marquee 32s linear infinite; }
  .h-ribbon__list, .h-ribbon__list[aria-hidden] { display: flex; }
  .h-ribbon__list li { height: 64px; padding: 0 24px; border-left: 1px solid var(--ott-line-soft); }
}
@keyframes ott-marquee { to { transform: translateX(-50%); } }
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .h-ribbon__track { animation: none; width: auto; }
  .h-ribbon__list { flex-wrap: wrap; justify-content: center; }
  .h-ribbon__list[aria-hidden] { display: none; }
  .h-ribbon__list li { height: 48px; border: 0; padding: 0 12px; }
}

/* ==========================================================================
   C. Services: five equal columns on one grid, rows aligned with subgrid
   ========================================================================== */
.h-svc {
  list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto; column-gap: 20px; row-gap: 0;
}
.h-svc__item { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.h-svc__link {
  grid-row: span 4; display: grid; grid-template-rows: subgrid;
  background: #fff; border-radius: var(--h-r); overflow: hidden; color: var(--ott-ink) !important; text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(0, 61, 89, 0.06);
  transition: box-shadow 0.35s var(--ott-ease), transform 0.35s var(--ott-ease);
}
.h-svc__link:hover { box-shadow: 0 18px 40px -24px rgba(0, 61, 89, 0.45); transform: translateY(-3px); }
.h-svc__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ott-tint); }
.h-svc__media img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.8s var(--ott-ease); }
.h-svc__link:hover .h-svc__media img { transform: scale(1.04); }
.h-svc__num {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--ott-blue); color: #fff; font: 400 1.05rem/1 var(--ott-serif);
}
.h-svc__title { margin: 0 !important; padding: 22px 22px 0; font-size: 1.32rem !important; line-height: 1.15 !important; }
.h-svc__text { display: block; padding: 10px 22px 0; font-size: 0.9rem; line-height: 1.55; color: var(--ott-muted); }
.h-svc__more {
  display: flex; align-items: center; gap: 8px; margin: 18px 22px 22px; padding-top: 16px; border-top: 1px solid var(--ott-line-soft);
  font: 700 0.85rem/1 var(--ott-sans); color: var(--ott-blue);
}
.h-svc__more svg { width: 16px; height: 16px; transition: transform 0.3s var(--ott-ease); }
.h-svc__link:hover .h-svc__more svg { transform: translateX(4px); }

/* Tiling: a clean placeholder graphic until a real tiling photo is supplied */
.h-tileart { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; background: #fff; }
.h-tileart i { background: var(--ott-pale); }
.h-tileart i:nth-child(3n + 2) { background: var(--ott-tint); }
.h-tileart i:nth-child(7n + 1), .h-tileart i:nth-child(11) { background: var(--ott-blue); }
.h-tileart i:nth-child(5n + 4) { background: #b9d9e8; }

.h-svc__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  margin-top: 20px; padding: 20px 20px 20px 28px; border-radius: var(--h-r); background: var(--ott-blue); color: rgba(255, 255, 255, 0.88);
}
.h-svc__bar strong { color: #fff; font: 400 1.25rem/1.3 var(--ott-serif); margin-right: 6px; }
.h-svc__bar .ott-btn--primary { --btn-bg: #fff; --btn-fg: var(--ott-blue-800); --btn-bd: #fff; box-shadow: none; }
.h-svc__bar .ott-btn--primary:hover { --btn-bg: var(--ott-blue-50); }

@media (max-width: 1023.98px) {
  .h-svc { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 12px; }
  .h-svc__item, .h-svc__link { grid-row: auto; }
  .h-svc__link {
    grid-template-columns: 124px 1fr; grid-template-rows: auto 1fr auto; column-gap: 0;
  }
  .h-svc__media { grid-row: 1 / span 3; aspect-ratio: auto; min-height: 150px; }
  /* Hotfix 01: the photo fills the column instead of setting the row height from its own proportions */
  .h-svc__media img { position: absolute; inset: 0; }
  .h-svc__num { width: 36px; height: 36px; font-size: 0.95rem; }
  .h-svc__title { padding: 18px 18px 0; font-size: 1.2rem !important; }
  .h-svc__text { padding: 6px 18px 0; font-size: 0.88rem; }
  .h-svc__more { margin: 12px 18px 16px; padding-top: 0; border-top: 0; }
  .h-svc__bar { padding: 20px; }
  .h-svc__bar .ott-btn { width: 100%; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .h-svc__link { grid-template-columns: 180px 1fr; }
  .h-svc__media { min-height: 170px; }
  .h-svc__title { padding: 24px 28px 0; }
  .h-svc__text { padding: 8px 28px 0; font-size: 0.95rem; }
  .h-svc__more { margin: 14px 28px 22px; }
}

/* ==========================================================================
   D. About
   ========================================================================== */
.h-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--h-gap) clamp(40px, 5vw, 72px); align-items: center; }
.h-about__media { position: relative; margin: 0; border-radius: var(--h-r); overflow: hidden; aspect-ratio: 1 / 1; background: var(--ott-pale); }
.h-about__media img { width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 45%; }
.h-about__media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 24px 20px;
  background: linear-gradient(0deg, rgba(0, 40, 60, 0.72), rgba(0, 40, 60, 0));
  font: 600 0.85rem/1.4 var(--ott-sans); color: #fff;
}
.h-about__text h2 { max-width: 16ch; }
.h-lead { margin-top: 22px !important; font-size: 1.12rem; line-height: 1.6; color: var(--ott-ink) !important; }
.h-about__text > p:not(.h-eyebrow):not(.h-lead) { margin-top: 14px !important; color: var(--ott-muted); }
.h-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 30px 0 0; }
.h-facts > div { padding-top: 16px; border-top: 2px solid var(--ott-blue); }
.h-facts dt { font: 400 1.2rem/1.2 var(--ott-serif); color: var(--ott-ink); }
.h-facts dd { margin: 4px 0 0; font-size: 0.86rem; color: var(--ott-muted); }
.h-about__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 1023.98px) {
  .h-about__grid { grid-template-columns: 1fr; }
  .h-about__media { aspect-ratio: 4 / 3; }
  .h-about__media img { object-position: 50% 35%; }
}
@media (max-width: 559.98px) {
  .h-facts { grid-template-columns: 1fr; gap: 0; }
  .h-facts > div { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; gap: 12px; padding: 12px 0; border-top-width: 1px; border-top-color: var(--ott-line); }
  .h-facts > div:first-child { border-top: 2px solid var(--ott-blue); }
  .h-facts dt { font-size: 1.08rem; }
  .h-facts dd { margin: 0; }
  .h-about__actions .ott-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   E. Work in motion (brand blue)
   ========================================================================== */
.h-motion__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: var(--h-gap); align-items: stretch;
}
.h-motion__text { align-self: center; padding-right: clamp(0px, 2vw, 24px); }
.h-motion__text > p:not(.h-eyebrow) { margin-top: 20px !important; }
.h-motion__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.h-motion__video, .h-motion__photo { display: flex; flex-direction: column; margin: 0; }
.h-motion__video video { width: 100%; aspect-ratio: 480 / 848; height: auto !important; object-fit: cover; border-radius: var(--h-r); background: var(--ott-blue-700); }
.h-motion__photo picture { flex: 1; min-height: 0; display: block; }
.h-motion__photo img { width: 100%; height: 100% !important; object-fit: cover; object-position: 60% 50%; border-radius: var(--h-r); }
.h-motion figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
.h-motion figcaption span { font: 700 0.7rem/1 var(--ott-sans); letter-spacing: 0.14em; text-transform: uppercase; color: #bfe2f2; }
@media (max-width: 1023.98px) {
  .h-motion__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .h-motion__text { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 559.98px) {
  .h-motion__grid { gap: 20px 12px; }
  .h-motion figcaption { flex-direction: column; gap: 4px; font-size: 0.82rem; }
  .h-motion__actions .ott-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   F. Selected work: one featured project, then a regular 4-up grid
   ========================================================================== */
.h-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--h-gap) clamp(32px, 4vw, 56px); align-items: center; }
.h-feature__viewer { position: relative; aspect-ratio: 4 / 3; border-radius: var(--h-r); overflow: hidden; background: var(--ott-pale); }
.h-feature__stage { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.6s var(--ott-ease); }
.h-feature__stage.is-active { opacity: 1; }
.h-feature__stage img { width: 100%; height: 100% !important; object-fit: cover; }
.h-feature__stage:first-child img { object-position: 50% 30%; }
.h-feature__info h3 { margin-top: 12px !important; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem) !important; }
.h-feature__info > p:not(.h-cat) { margin-top: 16px !important; color: var(--ott-muted); }
.h-feature__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.h-feature__step { display: grid; gap: 10px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ott-muted); }
.h-feature__thumb { display: block; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.25s; }
.h-feature__thumb img { width: 100%; height: 100% !important; object-fit: cover; }
.h-feature__label { font: 600 0.82rem/1.2 var(--ott-sans); }
.h-feature__label b { color: var(--ott-blue); font-weight: 700; margin-right: 2px; }
.h-feature__step:hover { color: var(--ott-ink); }
.h-feature__step[aria-selected="true"] { color: var(--ott-ink); }
.h-feature__step[aria-selected="true"] .h-feature__thumb { outline-color: var(--ott-blue); }
@media (max-width: 1023.98px) { .h-feature { grid-template-columns: 1fr; } }

.h-grid {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px;
  margin-top: clamp(40px, 4vw, 56px) !important; padding-top: clamp(40px, 4vw, 56px) !important; border-top: 1px solid var(--ott-line-soft);
}
.h-grid__item a { display: grid; gap: 8px; color: var(--ott-ink) !important; text-decoration: none !important; }
.h-grid__media { position: relative; display: block; aspect-ratio: 1 / 1; margin-bottom: 8px; border-radius: var(--h-r); overflow: hidden; background: var(--ott-pale); }
.h-grid__media img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.8s var(--ott-ease); }
.h-grid__item a:hover img { transform: scale(1.04); }
.h-grid__zoom {
  position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ott-blue);
  transition: background-color 0.25s, color 0.25s;
}
.h-grid__zoom svg { width: 16px; height: 16px; }
.h-grid__item a:hover .h-grid__zoom, .h-grid__item a:focus-visible .h-grid__zoom { background: var(--ott-blue); color: #fff; }
.h-grid__title { font: 400 1.14rem/1.25 var(--ott-serif); }
@media (max-width: 767.98px) { .h-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .h-grid__title { font-size: 1.02rem; } }

/* ==========================================================================
   G. Why (deep brand blue)
   ========================================================================== */
.h-why__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--h-gap) clamp(40px, 5vw, 72px); align-items: start; }
.h-why__intro h2 { max-width: 13ch; }
.h-why__intro > p:not(.h-eyebrow) { margin-top: 20px !important; max-width: 36ch; }
.h-why__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px var(--h-gap); }
.h-why__list li { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.h-why__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #bfe2f2; }
.h-why__icon svg { width: 22px; height: 22px; }
.h-why__list h3 { margin-top: 18px !important; font-size: 1.25rem !important; }
.h-why__list p { margin-top: 8px !important; font-size: 0.92rem; color: rgba(255, 255, 255, 0.76); }
@media (max-width: 1023.98px) {
  .h-why__grid { grid-template-columns: 1fr; }
  .h-why__intro h2 { max-width: 20ch; }
}
@media (max-width: 767.98px) {
  .h-why__list { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}
@media (max-width: 479.98px) {
  .h-why__list { grid-template-columns: 1fr; gap: 0; }
  .h-why__list li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 18px 0; }
  .h-why__icon { grid-row: span 2; }
  .h-why__list h3 { margin-top: 0 !important; font-size: 1.15rem !important; }
  .h-why__list p { margin-top: 4px !important; }
}

/* ==========================================================================
   H. How it works (pale)
   ========================================================================== */
.h-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.h-step { position: relative; padding: 28px 26px 30px; border-radius: var(--h-r); background: #fff; }
.h-step__num {
  display: flex; align-items: center; gap: 14px; font: 400 2.4rem/1 var(--ott-serif); color: var(--ott-blue);
  padding-bottom: 18px; border-bottom: 1px solid var(--ott-line-soft);
}
.h-step h3 { margin-top: 20px !important; font-size: 1.3rem !important; }
.h-step p { margin-top: 10px !important; font-size: 0.93rem; color: var(--ott-muted); }
@media (max-width: 1023.98px) {
  .h-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559.98px) {
  .h-steps { grid-template-columns: 1fr; gap: 12px; }
  .h-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; padding: 22px 20px; }
  .h-step__num { grid-row: span 2; align-self: start; padding: 0; border: 0; font-size: 2rem; }
  .h-step h3 { margin-top: 2px !important; font-size: 1.18rem !important; }
  .h-step p { margin-top: 6px !important; }
}

/* ==========================================================================
   I. Reviews: one row, equal-height cards, slow movement with a pause control
   ========================================================================== */
.h-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.h-marquee__track { display: flex; width: max-content; animation: ott-marquee 80s linear infinite; }
.h-marquee:hover .h-marquee__track, .h-marquee.is-paused .h-marquee__track { animation-play-state: paused; }
.h-marquee__set { display: flex; align-items: stretch; gap: 20px; padding-right: 20px; }
.h-review {
  display: flex; flex-direction: column; width: 380px; margin: 0; padding: 30px 30px 26px;
  border-radius: var(--h-r); background: var(--ott-pale);
}
.h-review__mark { width: 30px; height: 22px; color: var(--ott-blue); }
.h-review blockquote { margin: 18px 0 0; flex: 1; }
.h-review p { font-size: 0.98rem; line-height: 1.6; color: var(--ott-ink-2); }
.h-review figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ott-tint); }
.h-review__name { font: 400 1.14rem/1.2 var(--ott-serif); color: var(--ott-ink); }
.h-review__place { font: 600 0.78rem/1.2 var(--ott-sans); color: var(--ott-muted); }
.h-reviews__foot { margin-top: 24px; }
@media (max-width: 559.98px) { .h-review { width: 300px; padding: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .h-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--ott-gutter); }
  .h-marquee__track { animation: none; }
  .h-marquee__set[aria-hidden] { display: none; }
  .h-review { scroll-snap-align: start; }
  .h-reviews__foot { display: none; }
}

/* ==========================================================================
   J. Service area (blue tint)
   ========================================================================== */
.h-area__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--h-gap) clamp(40px, 5vw, 72px); align-items: center; }
.h-area__text > p:not(.h-eyebrow) { margin-top: 18px !important; max-width: 56ch; color: var(--ott-ink-2); }
/* Region list: typographic, with separators rather than cards */
.h-area__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin-top: 24px !important; border-top: 1px solid rgba(0, 111, 157, 0.2); }
.h-area__list li {
  display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(0, 111, 157, 0.2);
  font: 400 1.08rem/1.2 var(--ott-serif); color: var(--ott-ink);
}
.h-area__list svg { width: 18px; height: 18px; flex: none; color: var(--ott-blue); }
/* Locator panel: a factual base-and-hours card in place of a map */
.h-locator { border-radius: var(--h-r); overflow: hidden; background: #fff; box-shadow: 0 20px 44px -30px rgba(0, 61, 89, 0.45); }
.h-locator__head { display: flex; align-items: center; gap: 16px; padding: 24px 28px; background: var(--ott-blue); color: #fff; }
.h-locator__pin { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: #fff; color: var(--ott-blue); }
.h-locator__pin svg { width: 24px; height: 24px; }
.h-locator__label { display: block; font: 700 0.7rem/1.2 var(--ott-sans); letter-spacing: 0.14em; text-transform: uppercase; color: #bfe2f2; }
.h-locator__place { display: block; margin-top: 4px; font: 400 1.75rem/1.1 var(--ott-serif); color: #fff; }
.h-locator__rows { margin: 0; }
.h-locator__rows > div { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--ott-line-soft); }
.h-locator__rows > div:first-child { border-top: 0; }
.h-locator__rows dt { font: 700 0.7rem/1.6 var(--ott-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ott-muted); }
.h-locator__rows dd { margin: 0; font-weight: 700; color: var(--ott-ink); }
.h-locator__rows a { color: var(--ott-blue-800); }
.h-locator__note { padding: 16px 28px 22px; border-top: 1px solid var(--ott-line-soft); font-size: 0.88rem; color: var(--ott-muted); }
@media (max-width: 1023.98px) {
  .h-area__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .h-area__list { grid-template-columns: 1fr 1fr; }
  .h-area__list { column-gap: 20px; }
  .h-area__list li { padding: 12px 0; font-size: 1rem; }
  /* Small phones: the heading already says "Based in Zetland", so the panel is hidden to keep the section compact */
  .h-locator { display: none; }
}

/* ==========================================================================
   K. Quote (brand blue)
   ========================================================================== */
.h-quote__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--h-gap) clamp(40px, 5vw, 72px); align-items: start; }
.h-quote__intro { padding-top: 8px; }
.h-quote__intro > p:not(.h-eyebrow) { margin-top: 20px !important; max-width: 42ch; }
.h-quote__direct { display: grid; justify-items: start; gap: 6px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.9rem; }
.h-quote__phone { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; font: 400 clamp(1.8rem, 1.4rem + 1vw, 2.3rem)/1.15 var(--ott-serif); color: #fff !important; text-decoration: none; }
.h-quote__phone svg { width: 26px; height: 26px; color: #bfe2f2; }
.h-quote__email { font-weight: 700; color: #fff !important; word-break: break-word; }
.h-quote .ott-qf { box-shadow: 0 30px 70px -30px rgba(0, 30, 45, 0.6); border: 0; border-radius: 10px; }
@media (max-width: 1023.98px) { .h-quote__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559.98px) {
  .h-quote__grid { gap: 28px; }
  .h-quote .ott-wrap { padding-inline: 12px; }
  .h-quote__intro { padding: 0 4px; }
}

@keyframes ott-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Lightbox */
/* Hotfix 01: the lightbox is built around the viewport. The dialog is exactly the
   viewport (dvh), its middle row can shrink to fit (minmax(0, 1fr)), and the photo is
   absolutely positioned inside that row with max-width/max-height 100%, so percentage
   limits always resolve against the real space left between the top bar and the
   caption bar. Portrait, landscape, square, tall and wide photos all scale down with
   object-fit: contain and are never cropped. Nothing inside the dialog scrolls except
   an unusually long caption on a very small screen. */
.ott-lightbox {
  inset: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; background: rgba(243, 247, 249, 0.97); color: var(--ott-ink);
}
.ott-lightbox::backdrop { background: rgba(243, 247, 249, 0.9); }
.ott-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: ott-fade 0.3s var(--ott-ease); }
@keyframes ott-fade { from { opacity: 0; } to { opacity: 1; } }
.ott-lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: calc(16px + env(safe-area-inset-top)) var(--ott-gutter) 16px; }
.ott-lightbox__count { font: 700 0.78rem/1 var(--ott-sans); letter-spacing: 0.12em; color: var(--ott-muted); }
.ott-lightbox__stage { position: relative; min-height: 0; margin: 0 var(--ott-gutter); }
.ott-lightbox__stage img {
  position: absolute; inset: 0; margin: auto;
  max-width: min(100%, 900px); max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 12px; box-shadow: var(--ott-shadow);
}
.ott-lightbox__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--ott-gutter) calc(20px + env(safe-area-inset-bottom)); }
.ott-lightbox__cap { min-width: 0; max-height: 28vh; max-height: 28dvh; overflow-y: auto; font: 400 1.2rem/1.3 var(--ott-serif); }
.ott-lightbox__nav { display: flex; flex: none; gap: 8px; }
.ott-lightbox button {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--ott-line); background: #fff; color: var(--ott-ink); cursor: pointer; padding: 0;
}
.ott-lightbox button svg { width: 20px; height: 20px; }
.ott-lightbox button:hover { border-color: var(--ott-ink); }

.ott-qf {
  position: relative; align-self: start; padding: clamp(20px, 3.2vw, 40px); border-radius: 24px;
  background: #fff; box-shadow: var(--ott-shadow); border: 1px solid rgba(0, 111, 157, 0.08);
}
.ott-qf__progress { margin-bottom: 28px; }
.ott-qf__count { display: flex; justify-content: space-between; font: 700 0.75rem/1 var(--ott-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ott-muted); }
.ott-qf__count b { color: var(--ott-blue); }
.ott-qf__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px !important; list-style: none; }
.ott-qf__bar i { display: block; height: 4px; border-radius: 4px; background: var(--ott-line-soft); overflow: hidden; position: relative; }
.ott-qf__bar i::after { content: ""; position: absolute; inset: 0; background: var(--ott-blue); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ott-ease); }
.ott-qf__bar li.is-active i::after, .ott-qf__bar li.is-done i::after { transform: none; }
.ott-qf__bar span { display: block; margin-top: 8px; font: 600 0.74rem/1 var(--ott-sans); color: #9aa7b1; }
.ott-qf__bar li.is-active span, .ott-qf__bar li.is-done span { color: var(--ott-ink); }
@media (max-width: 419.98px) { .ott-qf__bar span { display: none; } }

.ott-qf__form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ott-qf__step.is-active { animation: ott-fadeup 0.45s var(--ott-ease) both; }
.ott-qf__title { display: block; padding: 0; margin: 0 0 6px; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--ott-serif); color: var(--ott-ink); }
.ott-qf__title:focus { outline: none; }
.ott-qf__hint { margin-top: 8px !important; font-size: 0.86rem; color: var(--ott-muted); }
.ott-qf__error { margin-top: 8px !important; font: 600 0.86rem/1.35 var(--ott-sans); color: #b42318; }
.ott-qf__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.ott-choice { position: relative; display: block; cursor: pointer; }
.ott-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ott-choice__box {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; height: 100%;
  padding: 14px 40px 14px 14px; border-radius: 14px; border: 1px solid var(--ott-line);
  font: 700 0.92rem/1.25 var(--ott-sans); color: var(--ott-ink);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.ott-choice__box > svg { width: 30px; height: 30px; flex: none; color: var(--ott-blue); }
.ott-choice__tick {
  position: absolute; right: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  border: 1px solid var(--ott-line); display: grid; place-items: center; color: #fff; transition: background-color 0.2s, border-color 0.2s;
}
.ott-choice__tick svg { width: 14px; height: 14px; opacity: 0; }
.ott-choice:hover .ott-choice__box { border-color: #9fb3c0; }
.ott-choice input:checked + .ott-choice__box { border-color: var(--ott-blue); background: var(--ott-blue-50); box-shadow: inset 0 0 0 1px var(--ott-blue); }
.ott-choice input:checked + .ott-choice__box .ott-choice__tick { background: var(--ott-blue); border-color: var(--ott-blue); }
.ott-choice input:checked + .ott-choice__box .ott-choice__tick svg { opacity: 1; }
.ott-choice input:focus-visible + .ott-choice__box { outline: 2px solid var(--ott-focus); outline-offset: 2px; }
@media (max-width: 419.98px) { .ott-qf__choices { grid-template-columns: 1fr; } }

.ott-field { margin-top: 20px; min-width: 0; }
.ott-field label, .ott-field__label { display: block; margin-bottom: 8px; font: 700 0.88rem/1.3 var(--ott-sans); color: var(--ott-ink); }
.ott-field .req { color: var(--ott-blue); }
.ott-field .opt { margin-left: 6px; font-weight: 600; font-size: 0.78rem; color: var(--ott-muted); }
.ott-field input[type="text"], .ott-field input[type="email"], .ott-field input[type="tel"], .ott-field textarea, .ott-select select {
  width: 100%; min-height: 54px; padding: 14px 16px; margin: 0;
  border: 1px solid var(--ott-line); border-radius: 12px; background: #fff; color: var(--ott-ink);
  font: 500 16px/1.4 var(--ott-sans); /* 16px stops iOS Safari zooming on focus */
  -webkit-appearance: none; appearance: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.ott-field textarea { min-height: 140px; resize: vertical; }
.ott-field input:hover, .ott-field textarea:hover, .ott-select select:hover { border-color: #9fb3c0; }
.ott-field input:focus, .ott-field textarea:focus, .ott-select select:focus { outline: none; border-color: var(--ott-blue); box-shadow: 0 0 0 4px rgba(0, 111, 157, 0.14); }
.ott-field [aria-invalid="true"] { border-color: #b42318 !important; box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.1) !important; }
.ott-field ::placeholder { color: #8b98a3; }
.ott-qf__row { display: flex; flex-wrap: wrap; gap: 0 14px; }
.ott-field--grow { flex: 1 1 220px; }
.ott-field--postcode { flex: 0 1 150px; }
@media (max-width: 419.98px) { .ott-field--postcode { flex: 1 1 100%; } }
.ott-select { position: relative; }
.ott-select select { padding-right: 44px; cursor: pointer; }
.ott-select svg { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; color: var(--ott-ink); }

.ott-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.ott-seg label { position: relative; margin: 0; cursor: pointer; }
.ott-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ott-seg span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--ott-pill);
  border: 1px solid var(--ott-line); font: 700 0.88rem/1 var(--ott-sans); color: var(--ott-ink);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.ott-seg input:checked + span { background: var(--ott-ink); border-color: var(--ott-ink); color: #fff; }
.ott-seg input:focus-visible + span { outline: 2px solid var(--ott-focus); outline-offset: 2px; }

.ott-drop {
  position: relative; display: flex !important; align-items: center; gap: 16px; margin: 0 !important; padding: 18px;
  border: 1.5px dashed #b9c8d2; border-radius: 14px; background: var(--ott-mist); cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.ott-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ott-drop:hover, .ott-drop.is-over { border-color: var(--ott-blue); background: var(--ott-blue-50); }
.ott-drop:focus-within { outline: 2px solid var(--ott-focus); outline-offset: 2px; }
.ott-drop__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #fff; color: var(--ott-blue); flex: none; }
.ott-drop__icon svg { width: 24px; height: 24px; }
.ott-drop__text strong { display: block; font: 700 0.95rem/1.3 var(--ott-sans); color: var(--ott-ink); }
.ott-drop__text span { display: block; font: 500 0.82rem/1.3 var(--ott-sans); color: var(--ott-muted); }
.ott-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px !important; list-style: none; }
.ott-thumbs:empty { display: none; }
.ott-thumbs li { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--ott-mist); }
.ott-thumbs img { width: 100%; height: 100% !important; object-fit: cover; }
.ott-thumbs button {
  position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(23, 33, 43, 0.8); color: #fff; cursor: pointer;
}
.ott-thumbs button svg { width: 14px; height: 14px; }

.ott-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ott-qf__privacy { margin-top: 20px !important; font-size: 0.82rem; color: var(--ott-muted); }

.ott-qf__nav { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ott-line-soft); }
.ott-qf__next, .ott-qf__submit { margin-left: auto; }
.ott-qf__nav [hidden] { display: none !important; }
.ott-qf__submit[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
@media (max-width: 419.98px) {
  .ott-qf__nav .ott-btn { padding: 0 18px; }
  .ott-qf__submit { flex: 1; }
}

.ott-qf__done { text-align: left; padding: 12px 0; }
.ott-qf__done:focus { outline: none; }
.ott-qf__done-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ott-blue); color: #fff; }
.ott-qf__done-icon svg { width: 28px; height: 28px; }
.ott-qf__done h3 { margin-top: 22px !important; font-size: var(--ott-fs-h3) !important; }
/* Phase 3A fix: the white card sits inside blue sections on the service pages, so the thank-you heading inherited white text. Restore the standard heading ink. */
.h-sec--blue .ott-qf__done h3, .h-sec--deep .ott-qf__done h3 { color: var(--ott-ink); }
.ott-qf__done p { margin-top: 14px !important; color: var(--ott-muted); }
.ott-qf__done .ott-textlink { margin-top: 24px; border-top: 0; border-left: 0; border-right: 0; background: none; cursor: pointer; padding: 0 0 4px; }
.ott-qf__preview { padding: 14px 16px; border-radius: 12px; background: #fff8e6; border: 1px solid #f1dca3; color: #5c4a14 !important; font-size: 0.88rem; }
.ott-qf__fail { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #fdecea; color: #7a1c14; font-size: 0.9rem; }