@charset "UTF-8";

/* =========================================================================
   PIXADOX
   One stylesheet, no framework, no build step. Custom properties carry the
   design system from section 26 of the spec so a colour is changed in one
   place rather than forty.
   ========================================================================= */

/* ----------------------------------------------------------------- fonts --
   Self-hosted. Google's CDN would be a third-party request on every page and
   a render-blocking one at that; section 30 rules it out. font-display: swap
   means text paints in the fallback immediately rather than staying invisible.
   Both @font-face blocks degrade to the system stack if the files are absent. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2-variations"),
       url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin-var.woff2") format("woff2-variations"),
       url("../fonts/caveat-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */

:root {
  /* Deep ocean through coastal blue to turquoise — the spine of the palette. */
  --ink:         #12283f;
  --ink-soft:    #1d3a55;
  --ocean:       #0e3355;
  --coastal:     #1f7fc4;
  --coastal-dim: #2e9bd6;
  --turquoise:   #17a9a0;

  /* Land: the laterite and sand that make it Coastal Karnataka and not
     any-blue-tech-company. Used as accents, never as large fields. */
  --coconut:     #3f8455;
  --laterite:    #a8492c;
  --sunset:      #ee7b3c;
  --sand:        #efe1c6;
  --sand-soft:   #f7eedd;

  --paper:       #ffffff;
  --page:        #f6f9fb;
  --page-tint:   #eef5f9;
  --body:        #4d6172;
  --muted:       #7a8c9b;
  --line:        #e2ebf1;

  --radius:      14px;
  --radius-lg:   20px;
  --radius-pill: 999px;
  /* Buttons are square-cornered, not pills. One token, so the whole set
     changes together and no button is left rounded by accident. */
  --radius-btn:  6px;

  --shadow-sm: 0 1px 2px rgba(18, 40, 63, .06), 0 2px 8px rgba(18, 40, 63, .05);
  --shadow:    0 4px 12px rgba(18, 40, 63, .07), 0 12px 32px rgba(18, 40, 63, .08);
  --shadow-lg: 0 8px 24px rgba(18, 40, 63, .10), 0 24px 60px rgba(18, 40, 63, .12);

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  --shell:  1240px;
  --gutter: 20px;

  --header-h: 80px;
}

/* ------------------------------------------------------------------ base -- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--coastal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ocean); }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}

p { margin: 0 0 1.1em; }

/* The handwritten face. Section 26: display and annotation only — never a
   paragraph of body copy, which it is genuinely hard to read as. */
.script {
  font-family: var(--font-hand);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
}

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

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .9rem;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* One visible focus ring everywhere, and it must never be removed:
   keyboard users navigate by it (section 31). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--coastal-dim);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit; font-weight: 600; font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn__icon { flex: 0 0 auto; width: 18px; height: 18px; transition: transform .18s ease; }
.btn:hover .btn__icon:not(.btn__icon--lead) { transform: translateX(3px); }

.btn--lg { padding: 15px 28px; font-size: 16px; }

.btn--dark  { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn--dark:hover  { background: var(--ocean); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }

.btn--ghost { background: rgba(255,255,255,.88); color: var(--ink); border-color: rgba(18,40,63,.14); }
.btn--ghost:hover { background: #fff; color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--sand-soft); color: var(--ink); }

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

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 24px;
}

/* Over the artwork the header is invisible; once the page scrolls it becomes
   a solid bar so the links stay legible against whatever is behind them. */
.site-header.is-stuck {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}

.wordmark { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; }
.wordmark__name {
  font-size: 23px; font-weight: 700; letter-spacing: .10em; color: var(--ink);
}
.wordmark__sub {
  font-size: 9.5px; font-weight: 600; letter-spacing: .34em;
  text-transform: uppercase; color: var(--muted); margin-top: 5px;
}
.custom-logo-link { display: inline-flex; }

.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }

.primary-nav__list {
  display: flex; align-items: center; gap: 26px;
  list-style: none; margin: 0; padding: 0;
}
.primary-nav__list a {
  position: relative;
  color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none;
  padding: 6px 0;
}
.primary-nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--coastal);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.primary-nav__list a:hover::after,
.primary-nav__list .current-menu-item > a::after,
.primary-nav__list .current_page_item > a::after { transform: scaleX(1); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: rgba(255,255,255,.9); border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; place-items: center; }
.nav-toggle__bars i {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .2s ease, opacity .2s ease;
}
[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

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

.hero {
  position: relative;
  isolation: isolate;
  /* The header sits over the artwork, so the hero starts underneath it. */
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 190px;
  min-height: min(84vh, 760px);
  display: flex; align-items: center;
  overflow: hidden;
}

.hero__art { position: absolute; inset: 0; z-index: -1; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 42%; }

/* Before any artwork is uploaded the hero still has to look intentional:
   a coastal sky, sea and sand, in the palette the painting uses. */
.hero--no-art {
  background:
    radial-gradient(120% 85% at 78% 22%, rgba(255, 225, 178, .95) 0%, rgba(255, 225, 178, 0) 58%),
    linear-gradient(180deg, #cbe4f4 0%, #e7f1f7 38%, #f7eedd 72%, var(--page) 100%);
}

/* A soft scrim so dark text stays readable over a bright painting without
   dulling the picture. Left-weighted, because the copy sits left. */
.hero:not(.hero--no-art) .hero__art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* the wash the copy sits on */
    linear-gradient(96deg,
      rgba(250,252,253,.97) 0%,
      rgba(250,252,253,.92) 26%,
      rgba(250,252,253,.70) 40%,
      rgba(250,252,253,.24) 54%,
      rgba(250,252,253,0)   68%),
    /* and a soft lift off the foot of the picture, so the cards below do not
       sit on a hard edge of dark rock */
    linear-gradient(to top,
      rgba(246,249,251,.85) 0%,
      rgba(246,249,251,.25) 14%,
      rgba(246,249,251,0)   32%);
}

.hero__inner { position: relative; }

.hero__copy { max-width: 620px; }

.hero__title {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(2.9rem, 7vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: .35em;
}

.hero__lede {
  max-width: 34rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--ink-soft);
  margin-bottom: 1.8rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }

/* The speech bubble. A real blockquote, positioned — not a picture of one. */
.speech {
  position: absolute; top: 4%; right: 0;
  max-width: 340px; margin: 0;
}
.speech__body {
  position: relative; margin: 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(2px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 26px;
  padding: 20px 24px;
  font-size: 1.45rem; line-height: 1.28;
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(8,42,66,.18);
}
.speech__body::after {
  content: "";
  position: absolute; left: 34px; bottom: -16px;
  border: 10px solid transparent;
  border-top-color: rgba(255,255,255,.94); border-top-width: 18px;
}

.hero__note {
  position: absolute; right: 10px; bottom: 34px;
  margin: 0;
  font-size: 1.7rem; color: #fff;
  transform: rotate(-4deg);
  text-shadow: 0 1px 2px rgba(6,32,52,.5), 0 6px 20px rgba(6,32,52,.45);
  pointer-events: none;
}

/* The wave between the artwork and the page. */
.wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; pointer-events: none; }
.wave svg { width: 100%; height: 110px; display: block; }
.wave path { fill: var(--page); }

/* ----------------------------------------------------------------- bands -- */

.band { padding-block: 72px; }
.band--tint { background: var(--page-tint); }
.band--list { padding-top: 8px; }

/* The four cards ride up over the foot of the artwork, as in the design. */
.band--float { padding-top: 0; margin-top: -96px; position: relative; z-index: 2; }

.section-kicker {
  font-size: 2rem; color: var(--coastal); text-align: center; margin: 0 0 .1em;
}
.section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  text-align: center;
  margin: 0 0 2.4rem;
}

.band__more { text-align: center; margin: 2.4rem 0 0; }

/* ---------------------------------------------------------- feature cards -- */

.feature-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}

.feature-card__link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon body" "icon arrow";
  gap: 4px 16px;
  height: 100%;
  padding: 22px 22px 18px;
  background: #fff;
  border: 1px solid rgba(226,235,241,.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card__link:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.feature-card__icon {
  grid-area: icon;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  color: var(--coastal);
  background: #eaf2fd;
}
.feature-card__icon[data-tint="1"] { color: var(--coconut);   background: #e8f6ec; }
.feature-card__icon[data-tint="2"] { color: var(--coastal);   background: #e7f2fb; }
.feature-card__icon[data-tint="3"] { color: #6b56c8;          background: #efeafb; }

.feature-card__body { grid-area: body; display: block; }
.feature-card__title {
  display: block; margin-bottom: 4px;
  color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1.3;
}
.feature-card__text { display: block; font-size: 14px; line-height: 1.5; color: var(--body); }

.feature-card__arrow { grid-area: arrow; align-self: end; color: var(--coastal); }
.feature-card__arrow svg { width: 18px; height: 18px; transition: transform .2s ease; }
.feature-card__link:hover .feature-card__arrow svg { transform: translateX(4px); }

/* ----------------------------------------------------------------- proof -- */

.band--proof { padding-block: 40px; }

.proof {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 28px;
}
.proof__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 40px;
}
.proof__item { display: grid; }
.proof__value { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.proof__label { font-size: 13px; color: var(--muted); }

.proof__note {
  margin: 0; max-width: 16rem;
  font-size: 1.28rem; color: var(--ink); line-height: 1.2;
  padding-left: 28px; border-left: 1px solid var(--line);
}

/* ----------------------------------------------------------------- cards -- */

.card-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.card__link {
  position: relative; display: block; height: 100%;
  padding: 26px 26px 52px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card__link:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.card__media { display: block; margin: -26px -26px 20px; }
.card__media img { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card__meta { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.card__title { font-size: 1.05rem; margin-bottom: .4em; }
.card__text { font-size: 14.5px; color: var(--body); margin: 0; }
.card__arrow { position: absolute; left: 26px; bottom: 22px; color: var(--coastal); }
.card__arrow svg { width: 18px; height: 18px; transition: transform .2s ease; }
.card__link:hover .card__arrow svg { transform: translateX(4px); }

.service-group { margin-bottom: 52px; }
.service-group__title { font-size: 1.25rem; margin-bottom: .3em; }
.service-group__intro { max-width: 52ch; margin-bottom: 1.6rem; }

/* ------------------------------------------------------- page furniture -- */

.page-head { padding-block: 56px 20px; }
.page-title { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: .3em; }
.page-title.script { font-size: clamp(2.4rem, 6vw, 4rem); }
.page-meta, .page-intro { color: var(--muted); }
.page-intro { max-width: 62ch; font-size: 1.05rem; }

.breadcrumb { margin-bottom: 18px; font-size: 13px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--coastal); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

.prose { max-width: 74ch; padding-bottom: 72px; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; }
.prose h3 { font-size: 1.22rem; margin-top: 1.7em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose img { border-radius: var(--radius); }
.prose blockquote {
  margin: 2em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--sand);
  color: var(--ink-soft); font-size: 1.08rem;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { color: var(--ink); font-weight: 600; background: var(--page-tint); }

.single__media { padding-bottom: 32px; }
.single__media img { border-radius: var(--radius-lg); }

.empty { color: var(--muted); }
.search-wrap { margin-top: 28px; max-width: 30rem; }
.searchform { display: flex; gap: 10px; }
.searchform input[type="search"] {
  flex: 1; min-width: 0;
  padding: 12px 16px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: #fff; color: var(--ink);
}

.pagination { margin-top: 40px; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 40px; height: 40px; padding-inline: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: #fff; color: var(--ink); text-decoration: none;
}
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* -------------------------------------------------------------- responsive -- */

@media (max-width: 1080px) {
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }

  .nav-toggle { display: grid; place-items: center; }

  /* Off-canvas panel rather than a squeezed row. Hidden from the
     accessibility tree when closed, not merely moved off-screen. */
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 16px var(--gutter) 24px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav__list a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .primary-nav__list a::after { display: none; }
  .primary-nav__cta { margin-top: 18px; justify-content: center; }

  /* The painting is wide; on a phone the speech bubble and the handwritten
     note would land on top of the headline, so they move into the flow. */
  .hero { padding-bottom: 110px; }
  .hero:not(.hero--no-art) .hero__art::after {
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.66) 52%, rgba(255,255,255,.42) 100%);
  }
  .hero__copy { max-width: none; }
  .speech { position: static; max-width: none; margin-top: 28px; }
  .speech__body { font-size: 1.25rem; }
  .speech__body::after { display: none; }
  .hero__note { position: static; margin-top: 18px; transform: none; text-align: left; }

  .band { padding-block: 52px; }
  .band--float { margin-top: -70px; }
  .feature-cards { grid-template-columns: 1fr; }
  .proof__note { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 16px; max-width: none; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .proof__list { gap: 24px; }
  .btn { width: 100%; justify-content: center; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .wave svg { height: 60px; }
}

/* ----------------------------------------------------------- motion off -- */

/* Section 31: with reduced motion requested, animation is replaced by the
   static state — not merely made faster. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover, .card__link:hover, .feature-card__link:hover { transform: none; }
}

/* ---------------------------------------------------------------- print -- */

@media print {
  .site-header, .site-footer, .band--float, .band--closing, .wave, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { padding: 0; margin: 0; }
  .hero__art { display: none; }
}

/* =========================================================================
   SECTIONS ADDED IN 0.2 — services tabs, about, industries, process
   ========================================================================= */

.section-sub {
  text-align: center; color: var(--muted);
  max-width: 46ch; margin: 0 auto 2.2rem;
}

/* The handwritten margin notes. Decoration, hidden from assistive tech, and
   dropped entirely on narrow screens where there is no margin to sit in. */
.aside-note {
  position: absolute; left: 12px; top: 96px;
  max-width: 9rem;
  font-size: 1.35rem; line-height: 1.15; color: var(--coastal);
  transform: rotate(-7deg);
  margin: 0; pointer-events: none;
}
.aside-note--right { left: auto; right: 12px; transform: rotate(5deg); color: var(--ink); }

.band--services, .band--industries, .band--process { position: relative; }

.link-more {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; font-size: 15px; color: var(--coastal); text-decoration: none;
}
.link-more svg { width: 18px; height: 18px; transition: transform .18s ease; }
.link-more:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------------ tabs -- */

.tabs__strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: 2.2rem;
}
.tabs__tab {
  padding: 11px 22px;
  font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tabs__tab:hover { border-color: var(--coastal); }
.tabs__tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Without JavaScript the strip is pointless and every panel shows, each under
   its own heading. Once enhanced, the headings go and the strip takes over. */
.tabs:not(.is-enhanced) .tabs__strip { display: none; }
.tabs:not(.is-enhanced) .tabs__panel + .tabs__panel { margin-top: 44px; }
.tabs.is-enhanced .tabs__fallbackTitle { display: none; }
.tabs__fallbackTitle { font-size: 1.2rem; margin-bottom: 1.2rem; }
.tabs__panel:focus-visible { outline-offset: 6px; }

/* --------------------------------------------------------- compact cards -- */

.card--compact .card__link { padding: 24px 22px 48px; text-align: center; }
.card__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto 14px;
  border-radius: 13px;
  color: var(--coastal); background: #eaf2fd;
}
.card__icon[data-tint="1"] { color: var(--coconut); background: #e8f6ec; }
.card__icon[data-tint="2"] { color: var(--sunset);  background: #fdeee4; }
.card__icon[data-tint="3"] { color: #6b56c8;        background: #efeafb; }
.card--compact .card__title { font-size: .98rem; }
.card--compact .card__text { font-size: 13.5px; }
.card--compact .card__arrow { left: 50%; transform: translateX(-50%); }

/* ----------------------------------------------------------------- about -- */

.about {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: .85fr 1.25fr .7fr;
}
.about__art img, .about__artPlaceholder { border-radius: var(--radius-lg); width: 100%; }
.about__artPlaceholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #cfe6f4, #f3e6cd 60%, #e7d3bb);
}
.about__title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: .5em; }
.about__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6rem 0 0; }

.about__stats { list-style: none; margin: 0; padding: 0 0 0 28px; display: grid; gap: 22px; border-left: 1px solid var(--line); }
.about__statValue { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.about__statLabel { display: block; font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------ industries -- */

.band--industries {
  background: linear-gradient(180deg, #d7ecf7 0%, #eaf4fa 55%, var(--page) 100%);
}
.industry-bar {
  list-style: none; margin: 0; padding: 22px 18px;
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.industry-bar__item a {
  display: grid; gap: 8px; justify-items: center; text-align: center;
  padding: 10px 6px; border-radius: var(--radius);
  color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.3;
  text-decoration: none; transition: background-color .18s ease, transform .18s ease;
}
.industry-bar__item a:hover { background: var(--page-tint); transform: translateY(-3px); }
.industry-bar__icon { color: var(--coastal); }

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

.process {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px;
  position: relative;
}
/* The dotted path. Decoration only, so it is drawn with a border and never
   announced. */
.process::before {
  content: ""; position: absolute;
  left: 7%; right: 7%; top: 27px;
  border-top: 2px dashed #c6dcea;
  z-index: 0;
}
.process__step { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 6px; }
.process__dot {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--coastal); color: #fff;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 0 0 6px var(--page);
}
.process__step:nth-child(3n+2) .process__dot { background: var(--sunset); }
.process__step:nth-child(3n) .process__dot   { background: var(--coconut); }
.process__label { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.process__detail { font-size: 12.5px; color: var(--muted); line-height: 1.4; max-width: 15ch; }

/* --------------------------------------------- closing CTA, coastal blue -- */

.band--closing:not(.has-art) {
  background: linear-gradient(160deg, #10527f 0%, #0d3b63 55%, #0b2d4c 100%);
}
.band--closing:not(.has-art) .closing__title { color: #fff; }
.band--closing:not(.has-art) .closing__text { color: #cfe2f0; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1080px) {
  .about { grid-template-columns: 1fr 1fr; }
  .about__stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); padding-left: 0; padding-top: 22px; border-left: 0; border-top: 1px solid var(--line); }
  .industry-bar { grid-template-columns: repeat(5, 1fr); }
  .process { grid-template-columns: repeat(4, 1fr); row-gap: 32px; }
  .process::before { display: none; }
}

@media (max-width: 860px) {
  .aside-note { display: none; }
  .about { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: repeat(2, 1fr); }
  .industry-bar { grid-template-columns: repeat(3, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  /* No sideways scrolling on a phone. The strip wraps onto as many rows as
     it needs and the tabs share the width, so nothing is ever off-screen and
     there is no scrollbar to discover. */
  .tabs__strip { justify-content: stretch; flex-wrap: wrap; gap: 8px; }
  .tabs__tab { flex: 1 1 auto; min-width: 0; padding-inline: 14px; text-align: center; }
}

@media (max-width: 520px) {
  .industry-bar { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: 1fr; }
  .about__actions .btn { width: auto; }
}

/* The section heading is the script line itself, so it carries h2 semantics
   and needs the heading margins reset rather than the browser's defaults. */
h2.section-kicker { margin: 0 0 .1em; font-weight: 700; letter-spacing: 0; }

/* ------------------------------------------------- no horizontal overflow --
   A page that scrolls sideways on a phone feels broken however good the rest
   of it is. These are the three things that normally cause it: a wide table, a
   long unbroken string, and a pre block. Each is contained rather than allowed
   to push the body wider than the screen. */
@media (max-width: 860px) {
  .prose table { display: block; width: 100%; overflow-x: auto; }
  .prose pre { white-space: pre-wrap; word-break: break-word; }
  .prose a, .site-footer a { overflow-wrap: anywhere; }
}

/* =========================================================================
   CLOSING BAND + FOOTER
   ========================================================================= */

.closing {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 92px 0 54px;
  background: linear-gradient(180deg, #17567f 0%, #0f3f63 48%, #0c3350 100%);
  color: #fff;
}

/* The wave sits on the top edge of the band, three passes deep so it reads as
   water rather than as one decorative curve. */
.closing__wave { position: absolute; inset: 0 0 auto 0; line-height: 0; z-index: -1; }
.closing__wave svg { width: 100%; height: 92px; display: block; }
.closing__waveBack  { fill: #7fd3d0; opacity: .55; }
.closing__waveMid   { fill: #3fa8b8; opacity: .6; }
.closing__waveFront { fill: #17567f; }

.closing__palms { position: absolute; bottom: -10px; z-index: -1; color: #072438; opacity: .55; pointer-events: none; }
.closing__palms--left  { left: -18px; transform: scaleX(-1); }
.closing__palms--right { right: -18px; }
.closing__palmArt { width: 130px; height: auto; }

.closing__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 26px;
  padding-top: 28px;
}
.closing__copy { flex: 1 1 24rem; }
.closing__title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: #fff; margin: 0 0 .25em; }
.closing__text { margin: 0; color: #c7dced; font-size: 15px; max-width: 46ch; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.btn--navy { background: #0b2f4d; color: #fff; border-color: rgba(255,255,255,.14); }
.btn--navy:hover { background: #082438; color: #fff; transform: translateY(-2px); }

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

.site-footer { background: #faf7f0; color: var(--body); }

.site-footer__grid {
  display: grid; gap: 34px;
  grid-template-columns: 1.15fr .8fr 1.1fr 1.1fr 1.15fr;
  padding-block: 54px 44px;
}

.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--coastal); text-decoration: underline; }

.wordmark--footer .wordmark__name { color: var(--ink); }
.wordmark--footer .wordmark__sub { color: var(--muted); }
.site-footer__tagline { margin: 20px 0 0; font-size: 14px; color: var(--body); }

.site-footer__heading {
  color: var(--ink); font-size: 15px; font-weight: 700;
  letter-spacing: 0; text-transform: none; margin: 0 0 16px;
}

.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }

.site-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.site-footer__contact li { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 8px; }
.site-footer__contact address { font-style: normal; }
.site-footer__icon { color: var(--coastal); padding-top: 1px; }

/* Social marks. Each carries its own brand colour through a custom property
   set on the element, so one rule styles the whole row. */
.social { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.social__link {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--social, var(--ink));
  color: #fff;
  transition: transform .18s ease, filter .18s ease;
}
.social__link:hover { transform: translateY(-2px); filter: brightness(1.12); color: #fff; }

.site-footer__art { position: relative; display: grid; align-content: start; justify-items: end; }
.site-footer__artNote {
  margin: 0 0 -6px; max-width: 9rem;
  font-size: 1.15rem; line-height: 1.15; color: var(--ink); text-align: center;
  transform: rotate(-5deg);
}
.site-footer__sketch { width: 100%; max-width: 260px; height: auto; color: #5d7385; }

/* ------------------------------------------------------------------- bar -- */

.site-footer__bar { background: #f3efe5; border-top: 1px solid #e7e0d1; }
.site-footer__barInner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-block: 16px;
  font-size: 13px;
}
.site-footer__barInner p { margin: 0; }
.site-footer__copy { color: var(--muted); }

.site-footer__legalList { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer__legalList li + li::before { content: "|"; margin-right: 10px; color: #c9bfa9; }
.site-footer__legalList a { color: var(--body); }

.site-footer__sign { font-size: 1.1rem; color: var(--ink); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1080px) {
  .site-footer__grid { grid-template-columns: 1.2fr 1fr 1.2fr 1.2fr; }
  .site-footer__art { grid-column: 1 / -1; justify-items: center; }
  .site-footer__sketch { max-width: 300px; }
}

@media (max-width: 860px) {
  .closing { padding-top: 80px; }
  .closing__inner { flex-direction: column; align-items: flex-start; }
  .closing__actions { width: 100%; }
  .closing__palmArt { width: 92px; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer__barInner { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .closing__actions .btn { width: 100%; justify-content: center; }
  .site-footer__sign { font-size: 1rem; }
}

/* --------------------------------------------------- hero art framing --
   The painting is 2:1. A phone viewport crops it to roughly 3:4, and the
   default centre crop would land on empty water. The character sits a little
   left of centre, so the crop is anchored there instead. */
@media (max-width: 860px) {
  .hero__art img { object-position: 40% center; }
}
@media (max-width: 520px) {
  .hero__art img { object-position: 37% center; }
}

/* =========================================================================
   PASS 3 — density and detail
   ========================================================================= */

/* Six services across, as in the design, rather than four and two orphans.
   auto-fit with a floor means it steps down to 4, 3, 2 and 1 on its own
   without a media query per breakpoint. */
.card-grid--services { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 16px; }
.card--compact .card__link { padding: 22px 16px 42px; }
.card--compact .card__title { font-size: .92rem; line-height: 1.32; }
.card--compact .card__text { font-size: 13px; line-height: 1.45; }

/* The proof strip: a mark beside each number, as in the design. */
.proof__item { display: flex; align-items: center; gap: 12px; }
.proof__icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 10px;
  color: var(--coastal); background: #e9f2fb;
}
.proof__icon svg { width: 20px; height: 20px; }
.proof__text { display: grid; }
.proof__value { font-size: 1.7rem; }

/* The handwritten margin notes were positioned against the full-width band and
   ran off the left edge of the screen. They belong in the gutter beside the
   shell, and there is only a gutter to sit in on a wide screen — below that
   they are hidden rather than allowed to overlap the content. */
.aside-note {
  left: max(8px, calc(50% - (var(--shell) / 2) - 150px));
  max-width: 140px;
  font-size: 1.22rem;
}
.aside-note--right {
  left: auto;
  right: max(8px, calc(50% - (var(--shell) / 2) - 150px));
}
@media (max-width: 1560px) { .aside-note { display: none; } }

/* Tighter vertical rhythm. The bands were set at a spacing that suits long
   reading pages, and this is a landing page — the design runs noticeably
   denser than what was built. */
.band { padding-block: 58px; }
.band--proof { padding-block: 30px; }
.section-sub { margin-bottom: 1.8rem; }
.section-kicker { font-size: 1.85rem; }

/* A faint pen-and-ink island behind the quieter bands, the way the design
   carries the coastal world through the whole page rather than only the hero.
   Decorative and non-interactive. */
.band--services::after,
.band--process::after {
  content: "";
  position: absolute; right: 2%; bottom: 8%;
  width: 240px; height: 150px;
  background: url("../svg/lighthouse-sketch.svg") center / contain no-repeat;
  opacity: .13; pointer-events: none;
}
.band--services::before {
  content: "";
  position: absolute; left: 2%; top: 14%;
  width: 190px; height: 120px;
  background: url("../svg/lighthouse-sketch.svg") center / contain no-repeat;
  opacity: .1; transform: scaleX(-1); pointer-events: none;
}
@media (max-width: 1200px) {
  .band--services::after, .band--services::before, .band--process::after { display: none; }
}

/* ------------------------------------------- headline clear of the figure --
   The copy column ran to 620px and the headline to 5.1rem, which put the last
   word of every line straight over the character's face. The design keeps the
   text inside the left third, where the painting is sky and sea, and starts
   the figure after it. Narrower column, smaller headline: the text now stops
   before he does. */
.hero__copy { max-width: 512px; }
.hero__title { font-size: clamp(2.5rem, 4.4vw, 3.9rem); }
.hero__lede { max-width: 30rem; font-size: clamp(.98rem, 1.25vw, 1.06rem); }

@media (min-width: 1600px) {
  /* On a very wide screen the painting fills the width and there is no slack
     left to crop with, so the copy column is what has to stay narrow. */
  .hero__copy { max-width: 560px; }
}

/* =========================================================================
   PASS 4 — the handwritten detailing from the design
   ========================================================================= */

/* The blue squiggle that underlines every handwritten line. A background
   image rather than a border so it keeps the hand-drawn wobble. */
.squiggle {
  display: block;
  width: 84px; height: 9px;
  margin-top: 6px;
  color: var(--coastal-dim);
  background: url("../svg/squiggle.svg") left center / contain no-repeat;
}
.hero__note .squiggle { margin-left: auto; color: #fff; }
.proof__note .squiggle { color: var(--coastal-dim); }

/* The note over the water is white on a bright picture and needs the lift. */
.hero__note {
  text-align: right;
  filter: drop-shadow(0 2px 6px rgba(6,32,52,.45));
}

/* Proof strip: numbers on the left, the handwritten line and the map closing
   it on the right, with a rule between — as the design has it. */
.proof__closing {
  display: flex; align-items: center; gap: 18px;
  padding-left: 28px; border-left: 1px solid var(--line);
}
.proof__note { padding-left: 0; border-left: 0; max-width: 15rem; margin: 0; }
.proof__map {
  display: block; flex: 0 0 auto;
  width: 130px; height: 66px;
  color: var(--ink);
  background: url("../svg/worldmap.svg") center / contain no-repeat;
  opacity: .16;
}

@media (max-width: 1080px) { .proof__map { display: none; } }
@media (max-width: 860px) {
  .proof__closing { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 16px; width: 100%; }
}

/* =========================================================================
   PASS 5 — laying the copy over the signpost render
   ========================================================================= */

.hero { align-items: flex-start; padding-top: calc(var(--header-h) + 34px); }

/* Start after the signpost rather than on top of it. Clamped so it never eats
   the column on a laptop, where there is no spare width to give away. */
.hero__copy {
  max-width: 500px;
  padding-left: clamp(0px, 3.2vw, 62px);
}

.hero__title { font-size: clamp(2.3rem, 3.6vw, 3.35rem); line-height: 1.05; }
.hero__lede  { max-width: 27rem; }

/* A stronger, tighter wash: it has to carry dark type over painted wood and
   foliage, not over open sky. */
.hero:not(.hero--no-art) .hero__art::after {
  background:
    linear-gradient(97deg,
      rgba(249,251,252,.96) 0%,
      rgba(249,251,252,.90) 22%,
      rgba(249,251,252,.66) 34%,
      rgba(249,251,252,.20) 46%,
      rgba(249,251,252,0)   60%),
    linear-gradient(to top,
      rgba(246,249,251,.9) 0%,
      rgba(246,249,251,.3) 15%,
      rgba(246,249,251,0)  34%);
}

/* Hold the sunrise and the boats in frame; the crop takes it off the bottom
   foliage, which carries no subject. */
.hero__art img { object-position: 50% 38%; }

@media (max-width: 1100px) {
  /* No room for both the signpost and the copy — anchor the crop past it. */
  .hero__art img { object-position: 34% 38%; }
  .hero__copy { padding-left: 0; }
}

/* =========================================================================
   PASS 6 — a wash shaped around the signpost
   ========================================================================= */

/* A flat wash across the left third bleached the signpost, and the signpost is
   the whole "Udupi, Manipal, Mangalore, Karkala, Kundapura" idea made visible —
   it is the most on-brand object in the painting. So the wash is shaped: light
   over the far left where the boards are, strong only across the band the
   copy actually occupies, then gone by the time it reaches the water. */
.hero:not(.hero--no-art) .hero__art::after {
  background:
    linear-gradient(97deg,
      rgba(249,251,252,.50) 0%,
      rgba(249,251,252,.58) 9%,
      rgba(249,251,252,.93) 15%,
      rgba(249,251,252,.90) 30%,
      rgba(249,251,252,.52) 40%,
      rgba(249,251,252,.14) 50%,
      rgba(249,251,252,0)   62%),
    linear-gradient(to top,
      rgba(246,249,251,.9) 0%,
      rgba(246,249,251,.3) 15%,
      rgba(246,249,251,0)  34%);
}

/* The bubble tail pointed into open sky. It belongs on the right, aimed back
   down the picture toward the person who is supposedly speaking. */
.speech__body::after { left: auto; right: 42px; }

/* =========================================================================
   PASS 7 — the process stays in one line on mobile
   ========================================================================= */

/* It was breaking to four columns, then two, then one, which turned a
   seven-step journey into a stack of unrelated boxes — the sequence is the
   whole point of the section, and a stack does not read as a sequence.

   So on a phone it stays a single connected strip: seven numbered stops with
   the dashed path still running between them. The supporting sentence under
   each step cannot fit in a 47px column at any readable size, so at this width
   it is taken out of the visual flow but LEFT IN THE ACCESSIBILITY TREE —
   display:none would have dropped it for screen-reader users too, and it is
   real content, not decoration. */
@media (max-width: 1080px) {
  .process { grid-template-columns: repeat(7, 1fr); gap: 8px; }
  .process::before { display: block; left: 7%; right: 7%; top: 22px; }
}

@media (max-width: 860px) {
  .process { grid-template-columns: repeat(7, 1fr); gap: 6px; row-gap: 0; }
  .process::before { display: block; left: 7%; right: 7%; top: 19px; }

  .process__dot {
    width: 38px; height: 38px;
    font-size: 11px;
    box-shadow: 0 0 0 5px var(--page);
  }
  .process__label { font-size: 10px; line-height: 1.25; }

  .process__detail {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .process { gap: 4px; }
  .process::before { top: 16px; left: 6%; right: 6%; }
  .process__dot { width: 32px; height: 32px; font-size: 10px; box-shadow: 0 0 0 4px var(--page); }
  .process__label { font-size: 8.8px; letter-spacing: -.01em; overflow-wrap: anywhere; }
}

/* The band tightens with it — seven small stops need nothing like the vertical
   room seven stacked cards did. */
@media (max-width: 860px) {
  .band--process { padding-block: 44px; }
}

/* =========================================================================
   PASS 8 — the hero on a phone
   ========================================================================= */

/* THE CHARACTER WAS BEING CUT IN HALF AND BLEACHED.
   Two causes, both mine.

   One: the hero was min-height: min(84vh, 760px). A 1.78:1 painting forced
   into a 0.55:1 box has to scale to the HEIGHT, which made it 1261px wide
   inside a 390px window — so 69% of the picture was cropped away and whatever
   survived was a narrow vertical slice of him.

   Two: passes 5 and 6 added an unscoped .hero__art::after, which sat later in
   the file than the phone rule it was meant to leave alone, so the sideways
   wash written for a desktop column was running across a phone screen and
   washing out the middle of the picture.

   Fixed by letting the hero be shorter — less height means less scaling, which
   means more of the width survives — and by giving the phone its own
   top-to-bottom wash that clears well before he does. */
@media (max-width: 860px) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: 210px;
  }

  /* Hold him a little left of centre and low in the frame, which is where he
     sits in the painting. */
  .hero__art img { object-position: 40% 62%; }

  .hero:not(.hero--no-art) .hero__art::after {
    background: linear-gradient(180deg,
      rgba(249,251,252,.96) 0%,
      rgba(249,251,252,.93) 30%,
      rgba(249,251,252,.62) 48%,
      rgba(249,251,252,.16) 66%,
      rgba(249,251,252,0)   84%);
  }
}

@media (max-width: 520px) {
  .hero { padding-bottom: 190px; }
  .hero__art img { object-position: 40% 66%; }
}

/* "Understand" was breaking as "Understan / d". overflow-wrap: anywhere is for
   URLs, not for words — a word should shrink or wrap whole, never split. */
@media (max-width: 560px) {
  .process__label { font-size: 8px; overflow-wrap: normal; word-break: normal; hyphens: none; }
}

/* ------------------------------------------------------- footer artwork -- */
.site-footer__art.has-photo { justify-items: stretch; }
.site-footer__photo {
  width: 100%; max-width: 260px;
  margin-left: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(18,40,63,.14);
}
@media (max-width: 1080px) {
  .site-footer__photo { margin-inline: auto; max-width: 320px; }
}

/* =========================================================================
   PASS 10 — on a phone, the picture stops being a backdrop
   ========================================================================= */

/* Every attempt to keep the painting behind the copy on a 390px screen failed
   the same way: the copy needs about 600px of vertical space, the character's
   head sits a third of the way down the picture, and the two therefore land on
   top of each other. object-position could not move him because at this ratio
   the image fills the height exactly — there is no vertical slack to shift.

   So on a phone the hero stops being a text-over-image composition and becomes
   what it should be at that width: the words first, on a clean coastal ground,
   and then the picture underneath at a size where the man, the dog and the
   laptop are all actually visible. Nothing is cropped out of the message and
   nothing is washed out of the artwork. */
@media (max-width: 860px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: calc(var(--header-h) + 22px) 0 0;
    padding-bottom: 0;
    background: linear-gradient(180deg, #dcecf6 0%, #eef6fa 52%, var(--page) 100%);
  }

  .hero__inner { order: 1; }

  .hero__art {
    order: 2;
    position: relative; inset: auto; z-index: 0;
    width: 100%; margin-top: 24px;
    aspect-ratio: 1 / 1;
  }
  .hero__art img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 26%;
  }

  /* No wash at all now — nothing is printed over the picture, so nothing needs
     to be lifted off it. Just a whisper at the top where it meets the copy. */
  .hero:not(.hero--no-art) .hero__art::after {
    background: linear-gradient(to bottom,
      rgba(238,246,250,.85) 0%,
      rgba(238,246,250,.25) 9%,
      rgba(238,246,250,0)  20%);
  }

  /* The handwritten note has no picture to sit on any more. */
  .hero__note {
    position: static;
    margin: 14px 0 0;
    text-align: left;
    color: var(--coastal);
    text-shadow: none;
    filter: none;
    transform: rotate(-2deg);
    font-size: 1.35rem;
  }
  .hero__note .squiggle { margin-left: 0; color: var(--coastal-dim); }

  /* The cards still ride up over the foot of the picture, as they do on
     desktop — just less of it. */
  .band--float { margin-top: -52px; }
}

@media (max-width: 520px) {
  .hero__art { aspect-ratio: 4 / 5; }
  .hero__art img { object-position: 50% 22%; }
}

/* =========================================================================
   FOOTER ARTWORK — corrected
   ========================================================================= */

/* The note was pulled down onto the picture with a negative margin meant for
   a line drawing that had white space at its top. A photograph has no white
   space to sit in, so it read as a caption dropped on a face. It goes above,
   with room, and leans the way a note pinned to a board would. */
.site-footer__art { align-content: start; gap: 0; }

.site-footer__artNote {
  margin: 0 0 14px;
  max-width: none;
  text-align: right;
  font-size: 1.2rem;
  color: var(--coastal);
  transform: rotate(-3deg) translateX(-6px);
}

.site-footer__art.has-photo .site-footer__photo {
  display: block;
  width: 100%;
  max-width: 250px;
  margin-left: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 54% 34%;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(18,40,63,.18);
}

/* The last column needs enough width to hold a picture rather than a stamp.
   SCOPED to the width where five columns exist at all — appended unscoped it
   sat after the responsive rules and overrode the single-column phone layout,
   forcing five min-content columns into 390px and pushing the page 71px wider
   than the screen. Same mistake as the unscoped .hero__art::after: a rule
   added at the end of a stylesheet wins over the media queries above it. */
@media (min-width: 1081px) {
  .site-footer__grid { grid-template-columns: 1.1fr .75fr 1.05fr 1fr 1.05fr; }
}

@media (max-width: 1080px) {
  .site-footer__artNote { text-align: center; transform: rotate(-3deg); }
  .site-footer__art.has-photo .site-footer__photo { margin-inline: auto; max-width: 260px; }
}

/* =========================================================================
   CLOSING BAND — the palms were reading as dark sticks
   ========================================================================= */

/* Too small, too opaque and too saturated against the blue, so they looked
   like damage rather than planting. Bigger, softer, and pushed further into
   the corners where a silhouette belongs. */
.closing__palms { bottom: -24px; opacity: .38; color: #04202f; }
.closing__palms--left  { left: -34px; }
.closing__palms--right { right: -34px; }
.closing__palmArt { width: 210px; }

@media (max-width: 860px) {
  .closing__palms { opacity: .3; bottom: -16px; }
  .closing__palmArt { width: 120px; }
}

/* =========================================================================
   PROOF STRIP — corrected at every width
   ========================================================================= */

/* It was a flex row that wrapped wherever it happened to run out of space,
   which at a tablet width dropped two stats onto a second line with a 40px
   gap and left the handwritten note stranded under a full-width rule. A
   four-item row should degrade to a deliberate 4 / 2 grid, not to whatever
   wrapping produces. */
.proof {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px 32px;
}

.proof__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 20px;
  margin: 0; padding: 0;
}

.proof__item { align-items: center; gap: 11px; min-width: 0; }
.proof__value { font-size: 1.55rem; line-height: 1.05; }
.proof__label { font-size: 12.5px; line-height: 1.3; }
.proof__icon { width: 36px; height: 36px; flex-basis: 36px; }

.proof__closing { gap: 14px; }
.proof__note { font-size: 1.15rem; max-width: 13rem; }

@media (max-width: 1080px) {
  /* The map goes first — it is the most decorative thing here and the least
     missed. */
  .proof { grid-template-columns: 1fr; }
  .proof__closing {
    padding-left: 0; border-left: 0;
    border-top: 1px solid var(--line); padding-top: 18px;
    justify-content: center;
  }
  .proof__note { text-align: center; max-width: none; }
  .proof__note .squiggle { margin-inline: auto; }
}

@media (max-width: 700px) {
  .proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .proof__value { font-size: 1.4rem; }
}

@media (max-width: 380px) {
  .proof__icon { display: none; }
  .proof__list { gap: 16px 12px; }
}

/* =========================================================================
   TABLET CORRECTIONS
   ========================================================================= */

/* 1. THE CLOSING BAND HAD 380px OF EMPTY BLUE IN IT.
   .closing__copy was set to flex: 1 1 24rem. In a row that 24rem is a width
   basis, which is what it was written for. The moment the media query turned
   the container into a column, the same 24rem became a HEIGHT basis and the
   copy block reserved 384px of vertical space it had no content for. This is
   the flex-basis axis trap and it is invisible until the direction changes. */
@media (max-width: 860px) {
  .closing__copy { flex: 0 1 auto; }
  .closing__inner { gap: 20px; padding-top: 18px; }
  .closing { padding-bottom: 46px; }
}

/* 2. THE ABOUT PORTRAIT FILLED THE WHOLE COLUMN.
   A 4:5 portrait given the full 728px of a tablet column is 900px tall — one
   picture taller than most phones. It is a supporting image, not a poster. */
.about__art img, .about__artPlaceholder {
  max-width: 100%;
  object-fit: cover;
}

@media (max-width: 1080px) {
  .about__art { max-width: 340px; }
}

@media (max-width: 860px) {
  .about { gap: 28px; }
  .about__art { max-width: 300px; margin-inline: auto; }
  .about__art img { aspect-ratio: 4 / 5; }
}

/* 3. THE FOUR HERO CARDS DROPPED STRAIGHT FROM TWO COLUMNS TO ONE AT 860px.
   At 768 that makes four very wide, very short boxes with two words in them.
   Two columns holds all the way down to a phone. */
@media (max-width: 860px) {
  .feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .feature-card__link { padding: 18px 16px 16px; gap: 4px 12px; }
  .feature-card__icon { width: 40px; height: 40px; border-radius: 11px; }
  .feature-card__title { font-size: 14.5px; }
  .feature-card__text { font-size: 12.5px; }
}

@media (max-width: 560px) {
  .feature-cards { grid-template-columns: 1fr; }
}

/* 4. The hero art block was a full square at tablet too, which is a lot of
   height on a wide screen. Squarer as it narrows, wider when there is room. */
@media (max-width: 860px) {
  .hero__art { aspect-ratio: 16 / 11; }
}
@media (max-width: 620px) {
  .hero__art { aspect-ratio: 1 / 1; }
}

/* =========================================================================
   NAV FIT + THE GLOBE
   ========================================================================= */

/* Seven links plus a pill button ran into each other just under 1440px. The
   gaps close up before the collision rather than after it. */
@media (max-width: 1400px) {
  .primary-nav { gap: 18px; }
  .primary-nav__list { gap: 18px; }
  .primary-nav__list a { font-size: 14.5px; }
  .primary-nav__cta { padding: 11px 18px; font-size: 14.5px; }
}
@media (max-width: 1180px) {
  .primary-nav__list { gap: 14px; }
  .primary-nav__list a { font-size: 14px; }
  .wordmark__name { font-size: 20px; }
}

/* The hand-drawn continents read as three grey smudges. A dot-grid sphere is
   abstract on purpose — it says "global" without pretending to be a map. */
.proof__map {
  width: 74px; height: 74px;
  opacity: .26;
  color: var(--coastal);
}