/* ============================================================
   Anyweather — Landing v6
   Ported from the Claude Design source (Anyweather Landing v6.dc.html).
   ============================================================ */

:root {
  --ink:      #10222E;
  --navy:     #0A2A38;
  --deep:     #071E2A;
  --darkest:  #06141C;
  --body:     #5A7182;
  --muted:    #7E93A3;
  --quote:    #40586A;
  --line:     #E3E9EE;
  --placeholder: #DCE5EC;
  --accent:   #0FA3B1;

  --shell: 1140px;
  --gutter: 24px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* ---------- shared ---------- */

.section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 9vw, 100px) var(--gutter);
}
.section--tight { padding-top: 0; }

.h2 {
  margin: 0 0 36px;
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  color: var(--navy);
  text-transform: uppercase;
  max-width: 560px;
}
.h2--light { color: #fff; }

.grid { display: grid; }
.grid--cards  { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.grid--places { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.grid--stats  { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.grid--quotes { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }

/* Full-bleed background image shared by the dark bands */
.band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--navy);
  /* Column flow so the header sits above the layout grid and the grid takes
     whatever height is left, instead of both being absolutely positioned. */
  display: flex;
  flex-direction: column;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
  opacity: 0;
  transition: opacity .9s var(--ease);
  pointer-events: none;
}

.hero__img.is-on {
  opacity: 1;
  will-change: transform;
  animation: hero-pan 26s ease-in-out infinite;
}

@keyframes hero-pan {
  0%   { transform: scale(1.12) translate(0, 0); }
  50%  { transform: scale(1.18) translate(-1.6%, -1.2%); }
  100% { transform: scale(1.12) translate(0, 0); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(8, 32, 44, 0.55) 0%,
    rgba(8, 32, 44, 0.20) 45%,
    rgba(8, 32, 44, 0.60) 100%);
}

/* ---------- header ---------- */

.header {
  position: relative;
  z-index: 7;
  flex: 0 0 auto;
}

.header__inner {
  max-width: none;
  margin: 0 auto;
  padding: var(--gutter) clamp(24px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.nav-desktop { display: none; }

.nav-desktop a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.nav-desktop a:hover { color: #7FD0E6; }

.nav-desktop__cta {
  color: #fff !important;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 2px rgba(255, 255, 255, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.18);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nav-desktop__cta:hover {
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 2px rgba(255, 255, 255, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.24);
}

@media (min-width: 981px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 34px);
  }
  .burger { display: none !important; }
}

/* ---------- EL / EN switch ----------
   Two labels in one pill; the live one is filled. On narrow screens the
   header copy is already gone, so the switch moves into the menu panel and
   the header keeps only the burger. */

.lang {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(6, 20, 28, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (min-width: 981px) {
  .header .lang { display: inline-flex; margin-left: clamp(14px, 1.8vw, 24px); }
}

.lang__opt {
  min-width: 34px;
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang__opt:hover { color: #fff; }
.lang__opt.is-on {
  background: #fff;
  color: var(--navy);
}
.lang__opt:focus-visible { outline: 2px solid #7FD0E6; outline-offset: 2px; }

/* in the mobile menu panel */
.lang--menu {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 18px;
}

/* ---------- burger ---------- */

.burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform .28s ease, opacity .2s ease;
}

/* ---------- hero carousel ----------
   The slides are stacked and cross-faded; only the live one carries the slow
   pan, so the browser is never animating six layers at once. */

.hero__slides {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
}

.hero__controls {
  position: relative;
  z-index: 5;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 var(--gutter) clamp(28px, 5vh, 56px);
}

.hero__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(6, 20, 28, 0.35);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.hero__arrow svg { width: 20px; height: 20px; }
.hero__arrow:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(10, 42, 56, 0.85);
  transform: scale(1.06);
}
.hero__arrow:focus-visible { outline: 2px solid #7FD0E6; outline-offset: 3px; }

.hero__dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color .25s var(--ease), width .25s var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero__dot[aria-selected="true"] {
  width: 26px;
  border-radius: 5px;
  background: #fff;
}
.hero__dot:focus-visible { outline: 2px solid #7FD0E6; outline-offset: 3px; }

/* On a phone the cluster at the bottom eats the image, so the arrows go out
   to the edges and shrink. The container stretches over the whole hero to
   become their anchor — doing it against `.hero` instead would break the
   moment GSAP puts a transform on this element during the entrance, since a
   transformed ancestor becomes the containing block. */
@media (max-width: 700px) {
  .hero__controls {
    position: absolute;
    inset: 0;
    margin-top: 0;
    padding: 0;
    pointer-events: none;
  }
  .hero__arrow,
  .hero__dots { pointer-events: auto; }

  .hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(6, 20, 28, 0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .hero__arrow svg { width: 15px; height: 15px; }
  .hero__arrow[data-dir="-1"] { left: 10px; }
  .hero__arrow[data-dir="1"]  { right: 10px; }

  /* the base hover rule drops the centring translate, so restate it */
  .hero__arrow:hover { transform: translateY(-50%) scale(1.06); }

  .hero__dots {
    position: absolute;
    left: 50%;
    bottom: clamp(20px, 4vh, 34px);
    transform: translateX(-50%);
  }
}


.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   MOBILE MENU
   ============================================================ */

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(6, 24, 34, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.menu[hidden] { display: none; }

.menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 82vw);
  padding: 96px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--deep);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu.is-open .menu__panel { transform: translateX(0); }

.menu__panel > a {
  color: #fff;
  text-decoration: none;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color .2s ease;
}
.menu__panel > a:hover { color: #7FD0E6; }

.menu__cta {
  margin-top: 22px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  padding: 15px 18px !important;
  transition: background .2s ease;
}
.menu__cta:hover { background: rgba(255, 255, 255, 0.12); color: #fff !important; }

.menu__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.menu__close:hover { background: rgba(255, 255, 255, 0.12); }

/* ============================================================
   ABOUT
   ============================================================ */

.about {
  position: relative;
  background: linear-gradient(180deg, var(--deep) 0%, #082432 100%);
}

.about__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(50px, 8vw, 90px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  align-items: start;
}

.about .h2 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
}

.about__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.7;
}
.about__copy p { margin: 0; text-wrap: pretty; }

/* An unstyled <a> here renders in the browser's default blue on a dark band —
   near-invisible whatever the palette. Carry the surrounding colour and lean
   on the underline instead, so this survives a theme swap. */
.about__copy a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}
.about__copy a:hover,
.about__copy a:focus-visible { text-decoration-color: #fff; }

/* ============================================================
   CONSTRUCTION CARDS
   ============================================================ */

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--placeholder);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__body {
  flex: 1;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.card__head h3 {
  margin: 0;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--navy);
}
.card__tag {
  color: var(--accent);
  font-size: 12px;
  white-space: nowrap;
}
.card__body p {
  flex: 1;
  margin: 0;
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ============================================================
   WHERE WE WORK
   ============================================================ */

.place {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.place__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--placeholder);
}
.place__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.place__text { display: flex; flex-direction: column; gap: 4px; }
.place__text h3 {
  margin: 0;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--navy);
  text-transform: uppercase;
}
.place__text p {
  margin: 0;
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ============================================================
   TEAM & EXPERTISE
   ============================================================ */

.team { position: relative; }

.team__intro {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 6vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  align-items: start;
}
.team__intro .h2 { margin: 0; }
.team__intro p {
  margin: 0;
  max-width: 480px;
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

.team__band {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: var(--navy);
}

.band__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 32, 44, 0.45);
  pointer-events: none;
}

.team__points {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 10vw, 120px) var(--gutter) 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.point {
  padding-top: 14px;
  border-top: 2px solid rgba(255, 255, 255, 0.8);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.point span {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   AT A GLANCE
   ============================================================ */

.stat { display: flex; flex-direction: column; gap: 6px; }

.stat__num {
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4vw, 48px);
  color: var(--navy);
}
.stat__label {
  color: var(--body);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================================================
   WHAT'S INCLUDED
   ============================================================ */

.included {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}

.included__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgba(7, 30, 42, 0.93) 0%,
    rgba(7, 30, 42, 0.72) 55%,
    rgba(7, 30, 42, 0.35) 100%);
}

.included__inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(70px, 11vw, 130px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
}

.included .h2 {
  align-self: start;
  margin: 0;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.08;
}

/* Frosted panel */
.glass {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 460px;
  padding: 30px 32px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 40px rgba(4, 16, 24, 0.32);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
}

.incl { display: flex; flex-direction: column; gap: 4px; }

.incl__title {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.incl__num {
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.incl__desc {
  padding-left: 34px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ============================================================
   A PROJECT UP CLOSE
   ============================================================ */

.project {
  position: relative;
  margin: 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--placeholder);
}
.project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 14px;
  background: rgba(8, 32, 44, 0.85);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .08em;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quote figcaption {
  color: var(--navy);
  font-weight: 700;
  font-size: 14.5px;
}
.quote figcaption span {
  font-weight: 400;
  color: var(--muted);
}
.quote blockquote {
  margin: 0;
  color: var(--quote);
  font-size: 14.5px;
  line-height: 1.75;
  text-wrap: pretty;
}

/* ============================================================
   CTA
   ============================================================ */

.cta {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}

.cta__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 30, 42, 0.68);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(70px, 10vw, 110px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  align-items: center;
}

.cta .h2 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.08;
}

.cta__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 440px;
}
.cta__col > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

.cta__tel {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13.5px;
  text-decoration: none;
}
.cta__tel span { font-weight: 700; color: #fff; }

/* ---------- lead form ---------- */

.lead {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lead[hidden] { display: none; }

.lead input {
  flex: 1;
  min-width: 180px;
  min-height: 44px;
  padding: 14px 16px;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}
.lead input:focus-visible { box-shadow: 0 0 0 3px var(--accent); }

.lead button {
  min-height: 44px;
  padding: 14px 22px;
  border: none;
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.lead button:hover { background: #E8F0F5; }

.lead__done {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 14.5px;
}
.lead__done[hidden] { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  position: relative;
  background: var(--darkest);
  overflow: hidden;
}

.footer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 16, 24, 0.78);
  pointer-events: none;
}

.footer__inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 9vw, 90px) var(--gutter) 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col:first-child { gap: 14px; }

.footer__logo {
  height: 24px;
  width: auto;
  align-self: flex-start;
}
.footer__col p {
  margin: 0;
  max-width: 260px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  line-height: 1.65;
}

.footer__label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.footer__col a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 13.5px;
  transition: color .2s ease;
}
.footer__col a:hover { color: #fff; }

.footer__tel {
  color: #fff !important;
  font-weight: 600;
}
.footer__hours {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
}

.footer__bar {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer__bar-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   STICKY FAB
   ============================================================ */

.fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: background .2s ease, transform .2s var(--ease);
}
.fab:hover { background: #103A4C; transform: translateY(-2px); }

.fab__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
}

/* ============================================================
   SCROLL REVEALS

   The design relied on `animation-timeline: view()`, which only ships
   in Chromium. `.js-reveal` is the IntersectionObserver fallback that
   main.js drives everywhere else.
   ============================================================ */

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes section-in {
  from { opacity: 0; transform: translateY(46px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: rise 0.7s var(--ease) both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  [data-reveal-section] {
    animation: section-in 0.9s var(--ease) both;
    animation-timeline: view();
    animation-range: entry 5% entry 42%;
  }
  /* Stagger direct children of a card grid. */
  .grid > * { animation-range: entry 0% entry 46%; }
  .grid > *:nth-child(2) { animation-range: entry 7% entry 53%; }
  .grid > *:nth-child(3) { animation-range: entry 14% entry 60%; }
  .grid > *:nth-child(4) { animation-range: entry 21% entry 67%; }
  .glass > *:nth-child(2) { animation-range: entry 5% entry 51%; }
  .glass > *:nth-child(3) { animation-range: entry 10% entry 56%; }
  .glass > *:nth-child(4) { animation-range: entry 15% entry 61%; }
  .glass > *:nth-child(5) { animation-range: entry 20% entry 66%; }
  .glass > *:nth-child(6) { animation-range: entry 25% entry 71%; }
}

/* Fallback path: JS adds .js-reveal to the html element. */
.js-reveal [data-reveal],
.js-reveal [data-reveal-section] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal-section] { transform: translateY(46px); }

.js-reveal [data-reveal].is-in,
.js-reveal [data-reveal-section].is-in {
  opacity: 1;
  transform: none;
}

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

  [data-reveal],
  [data-reveal-section],
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-section] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- focus ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ============================================================
   INNER PAGES (services / portfolio / contact)
   ============================================================ */

/* The landing header floats over the hero photo; inner pages sit on a
   solid gradient and show the wordmark. */
.header--solid {
  position: relative;
  z-index: 7;
}

.header__logo {
  height: 46px;
  width: auto;
  display: block;
}

/* Current page in the nav. */
.nav-desktop a[aria-current="page"] {
  color: #7FD0E6;
  border-bottom: 2px solid #7FD0E6;
  padding-bottom: 4px;
}
.nav-desktop__cta[aria-current="page"] {
  border: 1px solid rgba(127, 208, 230, 0.7);
  color: #7FD0E6 !important;
  padding-bottom: 11px;
}
.menu__panel > a[aria-current="page"] { color: #7FD0E6; }
.menu__cta[aria-current="page"] {
  border-color: #7FD0E6;
  color: #7FD0E6 !important;
}

/* ---------- page hero ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--deep) 0%, var(--navy) 100%);
}

.page-hero__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(50px, 8vw, 90px) var(--gutter) clamp(60px, 9vw, 100px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  align-items: end;
}
.page-hero__inner--single { display: flex; flex-direction: column; gap: 16px; }

.page-hero__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eyebrow {
  color: rgba(255, 255, 255, 0.55);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.h1 {
  margin: 0;
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: uppercase;
  text-wrap: balance;
}

.page-hero__lede {
  margin: 0;
  max-width: 440px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

/* Section header with a counter on the right. */
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.section__head .h2 { margin: 0; }

.section__count {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- buttons ---------- */

.btn-outline-light {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 15px 26px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .2s ease;
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.15); }

/* Same button on a light background. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 15px 26px;
  border: 1px solid rgba(10, 42, 56, 0.35);
  color: var(--navy);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease;
}
.btn-outline:hover { background: rgba(10, 42, 56, 0.06); border-color: var(--navy); }

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 15px 10px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.btn-ghost-light:hover { color: #7FD0E6; }

/* ============================================================
   SERVICES
   ============================================================ */

.grid--services { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

.service {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.service:hover {
  border-color: var(--navy);
  box-shadow: 0 16px 40px rgba(10, 42, 56, 0.1);
}

.service__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.service__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--navy);
  border-radius: 12px;
  color: var(--navy);
}

.service__num {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.service__text { display: flex; flex-direction: column; gap: 8px; }
.service__text h3 {
  margin: 0;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
  text-transform: uppercase;
}
.service__text p {
  margin: 0;
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

.service__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.service__features span {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--quote);
  font-size: 13px;
  line-height: 1.5;
}
.service__features span::before {
  content: "—";
  color: var(--navy);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

/* ---------- process strip ---------- */

.process { background: var(--deep); }

.process__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 9vw, 90px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.process__inner .h2 { margin: 0; color: #fff; }

.grid--process { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }

.step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 2px solid rgba(255, 255, 255, 0.8);
}
.step__num {
  color: rgba(255, 255, 255, 0.55);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.step__name {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.step__desc {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ============================================================
   PORTFOLIO GALLERY
   A vanilla port of the 21st.dev "gallery-grid-block" (larsen66), read off
   the component's own compiled bundle, so the numbers are its numbers:
   3-up grid at 1024px / 2-up at 640px, gap 16px, square cards, image lifts
   to 1.1 under a black/60 + 4px-blur veil, cards enter at scale .8 staggered
   50ms apart, lightbox panel springs in and caps at 80vh.
   Deviations, all deliberate: shadcn's greys become the site palette, the
   veil's text is white instead of --muted-foreground (which the original
   renders at roughly #8a8a8a on 60% black — unreadable), and the framer
   spring is the back-out bezier used elsewhere on this site.
   ============================================================ */

.gg__head {
  margin-bottom: 48px;
  text-align: center;
}

.gg__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #F2F6F9;
  color: var(--quote);
  font-size: 12px;
  font-weight: 600;
}
.gg__badge svg { width: 12px; height: 12px; color: var(--accent); }

.gg__badge--sm {
  padding: 2px 8px;
  font-size: 11px;
}

.gg__title {
  margin: 16px 0;
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--navy);
  text-transform: uppercase;
}

.gg__lede {
  max-width: 672px;
  margin: 0 auto;
  color: var(--body);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- filters ---------- */

.gg__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}

.gg__filter {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gg__filter:hover { background: #F2F6F9; }

.gg__filter.is-on {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.gg__empty {
  margin: 0 0 32px;
  text-align: center;
  color: var(--muted);
}

/* ---------- grid ---------- */

.gg__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px)  { .gg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Only hide the cards once the script is there to bring them back. */
.gg__grid.is-live .gg__card {
  opacity: 0;
  transform: scale(.8);
}
.gg__grid.is-live .gg__card.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease, transform .3s ease;
  transition-delay: calc(var(--i, 0) * 50ms);
}

.gg__hit {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--placeholder);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gg__hit:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.gg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.gg__hit:hover .gg__img { transform: scale(1.1); }

.gg__veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s ease;
}
.gg__hit:hover .gg__veil,
.gg__hit:focus-visible .gg__veil { opacity: 1; }

.gg__zoom {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  color: #fff;
}

.gg__name {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.gg__veil .gg__badge {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

/* ---------- lightbox ---------- */

.gg__lb {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .9);
}
.gg__lb[hidden] { display: none; }

.gg__lb-panel {
  position: relative;
  max-width: 1024px;
  max-height: 90vh;
  animation: gg-pop .35s cubic-bezier(.34, 1.42, .64, 1) both;
}

@keyframes gg-pop {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: none; }
}

.gg__lb-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  opacity: 0;
}
.gg__lb-img.is-in {
  opacity: 1;
  transition: opacity .2s ease;
}

.gg__lb-close,
.gg__lb-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.gg__lb-close:hover,
.gg__lb-nav:hover { background: rgba(255, 255, 255, .1); }

.gg__lb-close { top: 0; right: -48px; }
.gg__lb-close svg { width: 24px; height: 24px; }

.gg__lb-nav { top: 40%; transform: translateY(-50%); }
.gg__lb-nav svg { width: 32px; height: 32px; }
.gg__lb-nav--prev { left: 16px; }
.gg__lb-nav--next { right: 16px; }

.gg__lb-cap {
  margin-top: 16px;
  text-align: center;
  color: #fff;
}
.gg__lb-title {
  margin: 0 0 8px;
  font-family: Archivo, sans-serif;
  font-size: 20px;
  font-weight: 600;
}
.gg__lb-desc {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  line-height: 1.6;
}

/* The close button sits outside the panel, which there is no room for on a
   phone; bring it inside and drop the arrows onto the image corners. */
@media (max-width: 720px) {
  .gg__lb-close { top: 8px; right: 8px; background: rgba(0, 0, 0, .5); }
  .gg__lb-nav   { top: 50%; }
  .gg__lb-nav--prev { left: 4px; }
  .gg__lb-nav--next { right: 4px; }
  .gg__lb-nav, .gg__lb-close { background: rgba(0, 0, 0, .45); }
}

@media (prefers-reduced-motion: reduce) {
  .gg__card,
  .gg__card.is-in,
  .gg__img,
  .gg__lb-panel,
  .gg__lb-img {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- portfolio CTA ---------- */

.cta-strip { background: var(--deep); }

.cta-strip__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 9vw, 90px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: center;
}
.cta-strip .h2 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.08;
}
.cta-strip__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 9vw, 100px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 6vw, 72px);
  align-items: start;
}

/* Intro line above the form — sits in the same column, so it inherits the
   grid cell's width rather than needing its own measure cap. */
.contact__lede {
  margin: 0 0 28px;
  color: var(--body);
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

.cform {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* `display: flex` above would otherwise beat the [hidden] default. */
.cform[hidden] { display: none; }

.cform__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field > span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #C9D6DF;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  min-height: 44px;
  box-sizing: border-box;
  transition: border-color .15s ease;
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus { border-color: var(--navy); }

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  min-height: 44px;
  padding: 11px 16px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.chip:hover { background: #E8F0F5; }
.chip[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
}

.cform__submit {
  align-self: flex-start;
  min-height: 44px;
  padding: 16px 30px;
  background: var(--navy);
  border: 1px solid var(--navy);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}
.cform__submit:hover { background: #103A4C; }

.cform__error {
  color: #B4432F;
  font-size: 13.5px;
}
.cform__error[hidden] { display: none; }

.cform__done {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--navy);
}
.cform__done[hidden] { display: none; }
.cform__done strong {
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
  text-transform: uppercase;
}
.cform__done p {
  margin: 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.65;
}

/* ---------- contact info column ---------- */

.cinfo {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cinfo__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cinfo__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 2px solid var(--navy);
}
.cinfo__label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cinfo__item a {
  color: var(--navy);
  text-decoration: none;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 20px;
}
.cinfo__item a:hover { color: var(--accent); }
.cinfo__place {
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
}
.cinfo__hours {
  color: var(--body);
  font-size: 13.5px;
}

.cinfo__map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--placeholder);
}
.cinfo__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cinfo__map span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 10px;
  background: rgba(8, 32, 44, 0.85);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ============================================================
   RESTRUCTURE — catalogue pages, credentials, materials, promise
   ============================================================ */

/* ---------- photo placeholder ----------
   Sits in a .card__media where an <img> would go, for the categories the
   client builds but has never photographed. Same box as the image, so the
   grid keeps its rhythm and swapping one in later changes nothing else. */

.ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  background-color: var(--placeholder);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .45) 0 10px,
    transparent 10px 20px
  );
}
.ph svg { width: 30px; height: 30px; opacity: .65; }
.ph span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 12px;
}

/* ---------- delivery promise band ----------
   The second differentiator after Soliday, and the client rates it just as
   highly, so it gets a band of its own on every category page rather than
   a line in the small print. */

.promise {
  background: var(--navy);
  color: #fff;
}
.promise__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) var(--gutter);
  display: grid;
  gap: 18px;
}
.promise__line {
  margin: 0;
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.08;
  text-transform: uppercase;
  max-width: 15ch;
}
.promise__note {
  margin: 0;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

@media (min-width: 860px) {
  .promise__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 48px;
  }
}

/* ---------- Soliday credential block ----------
   One partner, so no logo cloud and no marquee: a mark, the claim, the
   evidence for it, and a link out. */

.cred {
  display: grid;
  gap: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.cred__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(28px, 4vw, 44px);
}
.cred__mark {
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .02em;
  color: var(--navy);
  padding-bottom: 10px;
  border-bottom: 3px solid var(--accent);
}
.cred__claim {
  margin: 0;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.15;
  color: var(--ink);
  max-width: 18ch;
}
.cred__copy {
  margin: 0;
  max-width: 46ch;
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.75;
  text-wrap: pretty;
}
.cred__link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
}
.cred__link:hover { text-decoration: underline; }

.cred__media {
  min-height: 260px;
  background: var(--placeholder);
}
.cred__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 900px) {
  .cred {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
  }
  .cred__body { justify-content: center; }
}

/* ---------- materials strip ----------
   Deliberately unlike .cred: these are brands whose material we buy, not
   partners. Different block, different part of the page, no logos we do
   not hold a licence for. */

.materials {
  display: grid;
  gap: 32px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 16px;
  background: var(--placeholder);
}
.materials__text .h2 { margin: 0 0 14px; }
.materials__text p {
  margin: 0;
  max-width: 56ch;
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.75;
  text-wrap: pretty;
}
.materials__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.material {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  filter: grayscale(1);
  transition: filter .3s var(--ease);
}
.material:hover { filter: none; }
.material span {
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--navy);
}
.material small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .materials {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
  }
}

/* ---------- fact rows (service page) ---------- */

.facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.fact {
  display: grid;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.fact__k {
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}
.fact__v {
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 62ch;
  text-wrap: pretty;
}

@media (min-width: 760px) {
  .fact {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
}

/* ---------- inline Soliday badge (home page) ---------- */

.soliday-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
}
.soliday-badge strong {
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--navy);
}
.soliday-badge span {
  color: var(--body);
  font-size: 12px;
  letter-spacing: .06em;
}
.soliday-badge:hover { border-color: var(--accent); }

/* ---------- footer additions ---------- */

.footer__tagline {
  margin: 0;
  color: #fff;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
}
.footer__soliday {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  text-decoration: none;
  align-self: flex-start;
}
.footer__soliday:hover { border-color: rgba(255, 255, 255, 0.6); }
.footer__soliday-mark {
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  letter-spacing: .02em;
}
.footer__soliday-note {
  color: rgba(255, 255, 255, 0.65);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- hero copy ----------
   The hero carried no text at all, which left the landing page without an
   h1. The tagline is that h1 now, with the delivery promise under it.
   `margin-top: auto` here absorbs the free space, so the controls that
   follow keep sitting directly beneath it. */

.hero__copy {
  position: relative;
  z-index: 5;
  margin-top: auto;
  max-width: var(--shell);
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(20px, 3vh, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__tagline {
  margin: 0;
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 6vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(6, 20, 28, .35);
}
.hero__promise {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.65;
  text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(6, 20, 28, .45);
}

/* Below 700px the carousel dots leave their row and float over the photo,
   so the copy has to keep clear of them. */
@media (max-width: 700px) {
  .hero__copy { padding-bottom: clamp(58px, 9vh, 82px); }
}

/* ---------- card link ---------- */

.card__more {
  margin-top: auto;
  padding-top: 6px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .02em;
}
.card__more:hover { text-decoration: underline; }

/* ---------- gallery: scope row ----------
   The first of the two filter levels. Deliberately heavier than the
   category chips below it, so the order to read them in is obvious. */

.gg__scopes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.gg__scope {
  height: 42px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-family: Archivo, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gg__scope:hover { border-color: var(--accent); }
.gg__scope.is-on {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.gg__filter[hidden] { display: none; }

/* ---------- lightbox caption meta ---------- */

.gg__lb-meta {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: .06em;
}
.gg__lb-meta[hidden] { display: none; }

/* ---------- contact form: select, consent, honeypot ---------- */

.field select {
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.field select:focus { border-color: var(--navy); }

/* Off-screen rather than display:none — a bot reading the DOM fills in
   what it can see, and what it cannot render it still finds. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}
.consent a { color: var(--accent); }

/* ---------- contact info: map ask + promise ---------- */

.cinfo__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.cinfo__map-ask {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.cinfo__map-ask p {
  margin: 0;
  max-width: 34ch;
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
}
.cinfo__map-ask a {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.cinfo__map-ask a:hover { text-decoration: underline; }

.cinfo__promise {
  margin: 0;
  padding: 18px 20px;
  border-left: 3px solid var(--accent);
  background: var(--placeholder);
  color: var(--navy);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 600;
  text-wrap: pretty;
}

/* ---------- prose (privacy policy) ---------- */

.prose {
  max-width: 760px;
  color: var(--body);
  font-size: 16px;
  line-height: 1.75;
}
.prose__updated {
  margin: 0 0 40px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.prose h2 {
  margin: 44px 0 12px;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.25;
  color: var(--navy);
}
.prose h2:first-of-type { margin-top: 0; }
.prose p { margin: 0 0 14px; text-wrap: pretty; }
.prose ul { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--navy); }
.prose a { color: var(--accent); }