/* ============================================================
   Yacht Shelter — Landing v6
   Ported from the Claude Design source by way of the marine-shading
   template.
   ============================================================ */

: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; }

/* A line under a section heading. The heading carries its own 36px below it,
   so the lede is pulled back up against it and keeps the gap for itself. */
.section__lede {
  margin: -22px 0 34px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}

.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;
  /* Two layers. The short one keeps the white logo and nav legible when the
     top of the photograph is bright sky — measured at 1.65:1 against the
     desert slide before it existed. Its stops are in pixels, not percentages,
     because what it has to cover is the header, whose height does not follow
     the height of the hero. */
  background:
    linear-gradient(180deg,
      rgba(8, 32, 44, 0.50) 0,
      rgba(8, 32, 44, 0.22) 120px,
      rgba(8, 32, 44, 0) 240px),
    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;
}

/* No `margin-top: auto` here. `.hero__copy` above already claims the free
   space, and a second auto margin in the same flex column splits it between
   the two instead of giving it all to the first — which parked the tagline at
   49% of the viewport, dead centre, with an equal hole beneath it. The copy
   is meant to sit on the bottom edge with the controls under it. */
.hero__controls {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 var(--gutter) clamp(28px, 5vh, 56px);
}

.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 dots sit on the bottom edge of the photo. 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__dots { pointer-events: auto; }

  .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);
  /* The meta block at the foot grew by two rows, and on a short screen — a
     small phone, or any phone turned sideways — the language switch fell off
     the bottom with no way to reach it. `margin-top: auto` still pins the
     block low when there is room; this only takes over when there is not. */
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* No rules between the items. A border under each one turns a list into a
   table and adds a horizontal tick for every vertical step; the spacing
   below carries the rhythm on its own.

   Tracking is a system rather than one number: display type at 22px gets
   .04em, and the small 13px uppercase labels get .12em, because letters that
   small need the air and letters that big do not. What it must not be is
   .02em here and .14em there by accident. */
.menu__panel > a {
  color: #fff;
  text-decoration: none;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 16px 0;
  transition: color .2s ease;
}
.menu__panel > a:hover { color: #7FD0E6; }

/* Filled, in the accent. On this much dark blue an outline button reads as
   one more thing to look at; a solid one reads as the thing to press. The
   label goes dark because white on the accent is only 2.9:1. */
.menu__cta {
  margin-top: 24px;
  text-align: center;
  border: 0;
  border-radius: 2px;
  background: var(--accent);
  color: var(--deep) !important;
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  padding: 16px 18px !important;
  transition: filter .2s ease;
}
.menu__cta:hover { filter: brightness(1.12); color: var(--deep) !important; }

/* ---------- menu footer block ----------
   The panel used to stop after the links and leave the bottom 40% of a phone
   screen empty. What belongs there is not decoration but the three things
   someone on a phone actually wants: the number to call, where we are, and
   whether we are open. `margin-top: auto` pins it to the bottom. */
.menu__meta {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  /* A single seam, dashed like a stitch line — the one divider in the panel
     that separates two kinds of thing rather than two items of one kind. */
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
}

/* The ways to reach us, all at the same weight: on a phone, tapping WhatsApp
   or Viber is as likely as tapping call, and making any of them quieter would
   be guessing which. They keep the larger mark — these are the rows you are
   meant to press. */
.menu__tel,
.menu__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #7FD0E6;
  text-decoration: none;
  transition: color .2s ease;
}
.menu__tel svg,
.menu__wa svg { width: 17px; height: 17px; flex: none; }
.menu__tel:hover,
.menu__wa:hover { color: #fff; }

.menu__where,
.menu__hours {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Instagram and Facebook. Quieter than the phone above them — a place to look
   at the work, not the way to reach us — so they sit at the weight of the two
   lines they follow and brighten only on hover. */
.menu__social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color .2s ease;
}
/* Same correction as the footer: 16px against 12px text was a third taller
   than the letters beside it. The phone row above keeps its larger mark —
   that one is the row you are meant to press. */
.menu__social svg {
  width: 14px;
  height: 14px;
  flex: none;
  stroke-width: 1.4;
  opacity: .85;
}
/* The gap above belongs to the pair, not to each of them. */
.menu__social + .menu__social { margin-top: 0; }
.menu__social:hover { color: #7FD0E6; }

/* The mark from the logo — those swept bands — held very faint behind the
   footer block. It is the one thing in this panel that could not be lifted
   into somebody else's site unchanged. */
.menu__mark {
  position: absolute;
  right: -30px;
  bottom: 70px;
  z-index: 0;
  width: 250px;
  height: auto;
  opacity: .07;
  pointer-events: none;
}
/* The mark is absolute and would otherwise paint over its static siblings. */
.menu__meta { position: relative; z-index: 1; }
.menu__meta .lang--menu { margin-top: 11px; }

/* A bare thin cross. The box around it made a second rectangle on screen
   competing with the Contact button for attention, over a control nobody
   needs to find twice. The 46px hit area stays; only the border goes. */
.menu__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: color .2s ease;
}
.menu__close svg { width: 22px; height: 22px; }
.menu__close:hover { color: #fff; }

/* ---------- menu entrance ----------
   Each row arrives 50ms after the one above it. Cheap, and it is most of the
   difference between a panel that appears and a panel that opens. Scoped to
   `no-preference` so a reduced-motion visitor never meets the opacity: 0
   state at all, rather than relying on a later rule to undo it. */
@media (prefers-reduced-motion: no-preference) {
  .menu__panel > a,
  .menu__meta {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
  }
  .menu.is-open .menu__panel > a,
  .menu.is-open .menu__meta {
    opacity: 1;
    transform: none;
  }
  .menu.is-open .menu__panel > a:nth-of-type(1) { transition-delay: .08s; }
  .menu.is-open .menu__panel > a:nth-of-type(2) { transition-delay: .13s; }
  .menu.is-open .menu__panel > a:nth-of-type(3) { transition-delay: .18s; }
  .menu.is-open .menu__panel > a:nth-of-type(4) { transition-delay: .23s; }
  .menu.is-open .menu__panel > a:nth-of-type(5) { transition-delay: .28s; }
  .menu.is-open .menu__panel > a:nth-of-type(6) { transition-delay: .33s; }
  .menu.is-open .menu__meta { transition-delay: .38s; }
}

/* ============================================================
   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); }

/* A card that opens a gallery of its own photographs. The button covers the
   whole picture, so the target is the picture; the pill only says so. It is
   written by category-gallery.js and is simply absent on a card with no
   photographs behind it. */
.card__hit {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.card__hit-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(7, 30, 42, .72);
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.card__hit-pill svg { width: 15px; height: 15px; flex: none; }
.card__hit:hover .card__hit-pill,
.card__hit:focus-visible .card__hit-pill { background: var(--accent); color: #071E2A; }
.card__hit:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.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; }

/* The four ways to reach us — phone, WhatsApp, Viber, email — as one block:
   same white, same weight, and each with its mark. They are alternatives to
   each other, so none of them gets to be quieter, and a column where only
   some rows carry an icon reads as a ragged edge rather than a list. */
.footer__tel,
.footer__wa,
.footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  color: #fff !important;
  font-weight: 600;
}
.footer__tel svg,
.footer__wa svg,
.footer__mail svg {
  width: 14px;
  height: 14px;
  flex: none;
  stroke-width: 1.4;
}
.footer__hours {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
}

/* Instagram and Facebook, in the contacts column. Icon and name rather than a
   bare glyph: at 16px a lone mark is a guess, and the handle is the thing
   someone might want to read or search for. */
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
}
/* 14px, not 16: an inline icon should sit about the cap height of the text
   it labels, and the outlined square reads heavier than a letter at the same
   size. The stroke is thinned to match — 1.6 was drawn for a larger box. */
.footer__social svg {
  width: 14px;
  height: 14px;
  flex: none;
  stroke-width: 1.4;
  opacity: .8;
}

.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;
}

.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);
}

/* ---------- twelve at a time ---------- */

.gg__count {
  margin: 0 0 18px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.gg__more {
  margin: 28px 0 0;
  text-align: center;
}

.gg__more-btn {
  min-height: 48px;
  padding: 13px 30px;
  border: 1px solid var(--line, #D9E0E6);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #071E2A);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.gg__more-btn:hover { background: #F2F6F9; }

.gg__more-btn:focus-visible {
  outline: 2px solid var(--accent, #0E3B52);
  outline-offset: 3px;
}

/* ---------- 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); }
/* WhatsApp and Viber under the number rather than as rows of their own: they
   are the same line of contact opened another way. Side by side, because they
   are alternatives to each other — and kept small so the row still has one
   thing to read first. */
.cinfo__chat {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 2px;
}
.cinfo__item a.cinfo__wa {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--body);
}
.cinfo__item a.cinfo__wa svg {
  width: 14px;
  height: 14px;
  flex: none;
  stroke-width: 1.5;
}
.cinfo__item a.cinfo__wa: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 ----------
   Given a band of its own on every category page rather than a line in the
   small print, because keeping the agreed date is the promise the client
   wants read, not skimmed. */

.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;
  }
}

/* ---------- 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;
  }
}

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

.footer__tagline {
  margin: 0;
  color: #fff;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
}

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

   Deliberately not held to the `--shell` band the rest of the page aligns
   to: on a wide screen that centred column parks the tagline a third of the
   way in. It hugs the left edge instead, and sits as low as the controls
   below it allow. */

.hero__copy {
  position: relative;
  z-index: 5;
  margin-top: auto;
  width: 100%;
  padding: 0 var(--gutter) clamp(8px, 1.4vh, 16px);
  padding-left: clamp(20px, 3.5vw, 56px);
  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);
}
/* 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); }