/*
  Moravia Prime: the whole site's stylesheet.

  Contents
    1  fonts and design tokens (colours, sizes, spacing: change them here)
    2  base
    3  layout: the page column, sections, section headings
    4  buttons and links
    5  photographs (black and white with the crew's blue kept)
    6  the top menu
    7  the home banner (film) and its strip of services
    8  the banner of every other page
    9  services: filter and tiles
   10  projects: the carousel, the grid, the list
   11  the statement band
   12  text beside a photograph, lists of rows, the list that swaps its photograph
   13  the three steps
   14  questions
   15  pairs of photographs, films, the gallery and its viewer
   16  the areas line, the quote form
   17  the closing call and the footer
   18  reading pages, the cookie notice
   19  the rope down the page edge
   20  motion (and "reduce motion")
*/

/* ================================================================ 1 fonts and tokens */
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* the brand: navy from the logo, royal blue as the highlight */
  --navy: #000080;
  --navy-deep: #00004d;
  --navy-ink: #00002e;
  --royal: #2a52e8;
  --royal-dark: #1c3fd0;
  --royal-soft: #8fb0ff;
  --ink: #0b0e2a;
  --muted: #56607a;
  --paper: #ffffff;
  --mist: #f1f3f8;
  --line: #d9deea;
  --card: var(--mist);

  --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* sizes grow with the screen, so a wide monitor gets large type and a phone gets small */
  --t-h1: clamp(2.5rem, 1.15rem + 5.4vw, 6.5rem);
  --t-h1-page: clamp(2.25rem, 1.3rem + 3.6vw, 5rem);
  --t-h2: clamp(1.9rem, 1.2rem + 2.5vw, 4rem);
  --t-h3: clamp(1.2rem, 1.08rem + 0.45vw, 1.5rem);
  --t-lead: clamp(1.0625rem, 0.98rem + 0.36vw, 1.375rem);
  --t-body: clamp(1rem, 0.95rem + 0.16vw, 1.125rem);
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;

  /* the page column: up to 1920 wide, with a gutter that grows from 20 to 96. Banners, navy bands
     and the carousel run from edge to edge of the screen whatever its width. */
  --max: 1920px;
  --gut: clamp(20px, 5vw, 96px);
  --wrap: min(var(--max), 100% - 2 * var(--gut));
  --edge: max(var(--gut), (100vw - var(--max)) / 2); /* from the screen edge to the column */
  --sec: clamp(64px, 7.5vw, 136px); /* above and below every section */
  --gap: clamp(14px, 1.4vw, 24px);
  --nav-h: 88px;
  --r: 16px;
  --r-sm: 10px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --shadow: 0 30px 60px -28px rgba(0, 0, 80, 0.45);
}
@media (max-width: 1099px) { :root { --nav-h: 68px; } }
/* a very wide monitor: everything one size up, so the page fills the screen and is not a strip in its middle */
@media (min-width: 2200px) { html { font-size: 112.5%; } :root { --nav-h: 96px; } }

/* ================================================================ 2 base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  margin: 0; font: 400 var(--t-body)/1.6 var(--font); color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 0.98; letter-spacing: -0.04em; }
h2 { font-size: var(--t-h2); line-height: 1.03; letter-spacing: -0.035em; }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; border-radius: 4px; }
.band :focus-visible, .hero :focus-visible, .banner :focus-visible, .closing :focus-visible, .nav--over:not(.is-stuck, .is-menu) :focus-visible { outline-color: #fff; }
::selection { background: var(--royal); color: #fff; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gut); top: -80px; z-index: 5; background: #fff; color: var(--navy); font-weight: 700; padding: 12px 18px; border-radius: var(--r-sm); }
.skip:focus { top: 14px; }

/* ================================================================ 3 layout */
.wrap { width: var(--wrap); margin-inline: auto; }
.sec { position: relative; padding-block: var(--sec); }
/* sections alternate white and mist by themselves; a navy band is asked for by name */
main > .sec:nth-child(odd):not(.band) { background: var(--mist); --card: var(--paper); }
.band { background: var(--navy-deep); color: #fff; --card: rgba(255, 255, 255, 0.07); }
.band--navy { background: var(--navy); }

.head { margin-bottom: clamp(32px, 3.6vw, 64px); }
.head--row { display: flex; align-items: end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(14px, 1.3vw, 20px); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--royal); }
.eyebrow::before { content: ''; width: 40px; height: 3px; border-radius: 2px; background: currentColor; transform-origin: 0 50%; }
.band .eyebrow, .closing .eyebrow { color: var(--royal-soft); }
.head h2 { max-width: 20ch; }
.head > p, .head > div > p:not(.eyebrow) { margin-top: clamp(14px, 1.4vw, 22px); font-size: var(--t-lead); line-height: 1.5; color: var(--muted); max-width: 36em; }
.band .head > p, .band .head > div > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.8); }
/* a word marked in a heading: the highlight colour, and a line that draws under it */
h1 em, h2 em { font-style: normal; color: var(--royal); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 0.07em no-repeat; padding-bottom: 0.06em; }
.band h2 em, .hero h1 em, .banner h1 em, .closing h2 em { color: var(--royal-soft); }

/* ================================================================ 4 buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: var(--r-sm); font-weight: 700; font-size: 1rem; line-height: 1; white-space: nowrap; text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.16s var(--ease-out);
}
.btn .ico { width: 1.15em; height: 1.15em; transition: transform 0.2s var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn--royal { background: var(--royal); color: #fff; box-shadow: 0 12px 28px -14px rgba(42, 82, 232, 0.95); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--white { background: #fff; color: var(--navy); }
.btn--ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
.btn--line { color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: var(--t-small); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btns { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
/* a text link that asks to be followed: bold, on a royal line */
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding-bottom: 5px; white-space: nowrap; color: var(--navy); background: linear-gradient(var(--royal), var(--royal)) 0 100% / 100% 3px no-repeat; transition: color 0.2s ease, background-size 0.25s var(--ease-out); }
.more .ico { width: 1.1em; height: 1.1em; transition: transform 0.2s var(--ease-out); }
.band .more, .closing .more { color: #fff; background-image: linear-gradient(var(--royal-soft), var(--royal-soft)); }
/* a link inside running text */
.tlink { font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--royal); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color 0.2s ease; }
.band .tlink, .closing .tlink { color: #fff; text-decoration-color: var(--royal-soft); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .ico { transform: translateX(4px); }
  .btn--royal:hover { background: var(--royal-dark); }
  .btn--navy:hover { background: var(--royal); }
  .btn--white:hover { background: var(--royal); color: #fff; }
  .btn--ghost:hover { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px #fff; }
  .btn--line:hover { background: var(--navy); color: #fff; }
  .more:hover { color: var(--royal); }
  .more:hover .ico { transform: translateX(5px); }
  .band .more:hover, .closing .more:hover { color: var(--royal-soft); }
  .tlink:hover { color: var(--royal); }
  .band .tlink:hover, .closing .tlink:hover { color: var(--royal-soft); }
}

/* ================================================================ 5 photographs
   A photograph is shown in black and white. Where the crew's blue has been marked (media/photo-pop.json)
   a see-through layer holding only that blue lies over it. Under the pointer the photograph turns to
   colour. On a phone there is no pointer, so the photograph in the middle of the screen is the one in colour. */
.pic { position: relative; display: block; overflow: hidden; background: var(--line); border-radius: var(--r); isolation: isolate; }
.pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.pic--bw > .pic__img { filter: grayscale(1) contrast(1.08); transition: filter 0.5s ease, transform 0.8s var(--ease-out); }
.pic__pop { pointer-events: none; transition: opacity 0.5s ease, transform 0.8s var(--ease-out); }
.pic--bw.is-live > .pic__img, .is-live .pic--bw > .pic__img { filter: none; }
.pic--bw.is-live > .pic__pop, .is-live .pic--bw > .pic__pop { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .pic--bw:hover > .pic__img, a:hover .pic--bw > .pic__img, .lively:hover .pic--bw > .pic__img { filter: none; }
  .pic--bw:hover > .pic__pop, a:hover .pic--bw > .pic__pop, .lively:hover .pic--bw > .pic__pop { opacity: 0; }
  a:hover .pic--zoom > img { transform: scale(1.05); }
}

/* ================================================================ 6 the top menu */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--ink); background: #fff; box-shadow: 0 1px 0 var(--line); transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.nav--over:not(.is-stuck, .is-menu, .is-open) { color: #fff; background: transparent; box-shadow: none; }
.nav__bar { position: relative; display: flex; align-items: center; height: var(--nav-h); gap: clamp(16px, 2.2vw, 40px); }
.nav__logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.5vw, 1.5rem); letter-spacing: -0.02em; white-space: nowrap; }
.nav__logo svg, .nav__logo .wordmark { color: var(--navy); transition: color 0.25s ease; }
.nav__logo svg { height: 1.45em; width: auto; }
.nav--over:not(.is-stuck, .is-menu, .is-open) .nav__logo :is(svg, .wordmark) { color: #fff; }
/* MORAVIA in the owner's own lettering (public/icons/moravia-wordmark.svg), shown in the current text colour */
.wordmark { display: block; flex: none; height: 1.8em; aspect-ratio: 1515 / 392; background: currentColor; -webkit-mask: url(/icons/moravia-wordmark.svg) 50% 50% / contain no-repeat; mask: url(/icons/moravia-wordmark.svg) 50% 50% / contain no-repeat; }
@media (forced-colors: active) { .wordmark { forced-color-adjust: none; background: CanvasText; } }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; white-space: nowrap; transition: background-color 0.18s ease, color 0.18s ease; }
.nav__link .ico { width: 0.95em; height: 0.95em; stroke-width: 2.2; transition: transform 0.2s var(--ease-out); }
.nav__link[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--royal); border-radius: 0; }
.nav--over:not(.is-stuck, .is-menu, .is-open) .nav__link[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--royal-soft); }
.nav__item.is-open > .nav__link { background: var(--navy); color: #fff; border-radius: 8px; box-shadow: none; }
.nav__item.is-open > .nav__link .ico { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px); }
.nav__phone { display: grid; text-align: right; line-height: 1.15; white-space: nowrap; }
.nav__phone small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.nav__phone b { font-size: 1.25rem; letter-spacing: -0.01em; transition: color 0.18s ease; }
.nav__burger { display: none; width: 46px; height: 46px; margin-left: auto; border-radius: var(--r-sm); place-items: center; box-shadow: inset 0 0 0 1.5px currentColor; }
.nav__burger .ico { width: 24px; height: 24px; }
.nav__burger .ico + .ico, .nav.is-open .nav__burger .ico:first-child { display: none; }
.nav.is-open .nav__burger .ico + .ico { display: block; }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { background: var(--navy); color: #fff; border-radius: 8px; box-shadow: none; }
  .nav--over:not(.is-stuck, .is-menu, .is-open) .nav__link:hover { background: #fff; color: var(--navy); }
  .nav__phone:hover b { color: var(--royal); }
  .nav--over:not(.is-stuck, .is-menu, .is-open) .nav__phone:hover b { color: var(--royal-soft); }
}

/* the panel under "Services" and "Clients": bold navy headings over the links they group */
.nav__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: -1; padding: clamp(28px, 2.6vw, 44px) 0 clamp(28px, 2.6vw, 40px);
  background: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line) inset, 0 40px 60px -30px rgba(0, 0, 60, 0.35);
  visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0s 0.18s;
}
.nav__item.is-open > .nav__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav__panel { border-radius: 0 0 var(--r) var(--r); }
.nav__panel .wrap { width: auto; margin: 0; padding-inline: clamp(20px, 2.6vw, 44px); }
.nav__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px clamp(20px, 2.4vw, 48px); }
.nav__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcol__head { display: flex; align-items: center; gap: 12px; padding: 0 12px 14px; margin-bottom: 8px; border-bottom: 3px solid var(--navy); font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); }
.mcol__head .ico { width: 28px; height: 28px; color: var(--royal); stroke-width: 1.5; }
a.mcol__head { transition: color 0.18s ease, border-color 0.18s ease; }
.mcol__link { display: block; padding: 9px 12px; border-radius: 8px; font-weight: 600; font-size: 1rem; line-height: 1.3; transition: background-color 0.16s ease, color 0.16s ease; }
.mcol__link span { display: block; margin-top: 2px; font-weight: 400; font-size: 0.875rem; color: var(--muted); transition: color 0.16s ease; }
.nav__panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(20px, 2vw, 32px); padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  a.mcol__head:hover { color: var(--royal); border-color: var(--royal); }
  .mcol__link:hover { background: var(--navy); color: #fff; }
  .mcol__link:hover span { color: rgba(255, 255, 255, 0.78); }
}

/* without script the panels still open, under the pointer or the keyboard focus */
html:not(.js) .nav__item:is(:hover, :focus-within) > .nav__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

/* the menu on a phone or a tablet: one sheet under the bar */
.nav__sheet { display: none; }
@media (max-width: 1099px) {
  .nav__links, .nav__actions { display: none; }
  .nav__burger { display: grid; }
  .nav__sheet {
    display: block; position: fixed; inset: var(--nav-h) 0 0 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px var(--gut) calc(28px + env(safe-area-inset-bottom)); background: #fff; color: var(--ink); border-top: 1px solid var(--line);
    visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0s 0.22s;
  }
  .nav.is-open .nav__sheet { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .sheet__link, .sheet__group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; }
  .sheet__group > summary::-webkit-details-marker { display: none; }
  .sheet__group > summary .ico { transition: transform 0.2s var(--ease-out); }
  .sheet__group[open] > summary .ico { transform: rotate(45deg); }
  .sheet__group[open] > summary { color: var(--navy); border-bottom-color: var(--navy); }
  .sheet__body { padding: 12px 0 18px; border-bottom: 1px solid var(--line); }
  .sheet__cat { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 0; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--royal); }
  .sheet__cat .ico { width: 20px; height: 20px; }
  .sheet__body a:not(.sheet__cat) { display: flex; align-items: center; min-height: 44px; font-weight: 600; }
  .sheet__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .sheet__foot { display: grid; gap: 12px; margin-top: 24px; }
  .sheet__foot .btn { width: 100%; }
}
@media (max-width: 479px) { .sheet__cols { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ 7 the home banner */
.hero { position: relative; display: flex; flex-direction: column; min-height: max(640px, 100svh); color: #fff; background: var(--navy-deep); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media > picture > img, .hero__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
.hero__media > video { opacity: 0; transition: opacity 0.9s ease; }
.hero__media > video.is-playing { opacity: 1; }
/* the navy tint: deep on the side of the words, clear on the side of the picture */
.hero__tint { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(0, 0, 70, 0.9) 0%, rgba(0, 0, 90, 0.7) 32%, rgba(0, 0, 70, 0.22) 66%, rgba(0, 0, 50, 0.08) 100%),
  linear-gradient(180deg, rgba(0, 0, 45, 0.62) 0%, rgba(0, 0, 45, 0) 24%, rgba(0, 0, 45, 0) 62%, rgba(0, 0, 45, 0.55) 100%); }
.hero__in { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) + 24px); padding-bottom: clamp(28px, 4vw, 64px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: clamp(18px, 2vw, 30px); }
.chips li { padding: 8px 14px; border-radius: 999px; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
/* the heading also answers to the height of the screen, so the banner and its strip fit a small laptop */
.hero h1 { max-width: 11ch; font-size: min(var(--t-h1), 9.4svh); }
.hero__lead { margin-top: clamp(18px, 1.9vw, 30px); max-width: 38em; font-size: var(--t-lead); font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.hero .btns { margin-top: clamp(22px, 2.4vw, 38px); }
.hero__pause { position: absolute; right: 0; bottom: clamp(28px, 4vw, 64px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); background: rgba(0, 0, 60, 0.3); transition: background-color 0.2s ease, color 0.2s ease, opacity 0.3s ease; }
.hero__pause .ico { width: 18px; height: 18px; }
.hero__pause .ico + .ico, .hero__pause[aria-pressed='true'] .ico:first-child { display: none; }
.hero__pause[aria-pressed='true'] .ico + .ico { display: block; }
.hero__pause[hidden] { display: none; }

/* the strip of services: see-through, so the film runs on behind it */
.strip { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.2); background: rgba(10, 14, 80, 0.16); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.strip__in { padding-block: clamp(18px, 2.2vw, 34px) clamp(16px, 1.7vw, 26px); }
.strip__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; margin-inline: auto; }
.strip__list a { display: grid; justify-items: center; gap: clamp(8px, 1vw, 14px); padding: clamp(6px, 1vw, 14px) 8px; border-radius: var(--r-sm); text-align: center; font-size: clamp(0.6875rem, 0.55rem + 0.42vw, 0.9375rem); font-weight: 700; letter-spacing: 0.08em; line-height: 1.25; text-transform: uppercase; transition: background-color 0.2s ease; }
.strip__list .ico { width: clamp(30px, 3.4vw, 60px); height: clamp(30px, 3.4vw, 60px); stroke-width: 1.1; transition: transform 0.3s var(--ease-out), color 0.2s ease; }
.strip__all { display: flex; justify-content: center; margin-top: clamp(8px, 1vw, 16px); }
.strip__all a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; font-weight: 700; font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1.0625rem); }
.strip__all .ico { width: 1.05em; height: 1.05em; stroke-width: 2.2; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .hero__pause:hover { background: #fff; color: var(--navy); }
  .strip__list a:hover { background: rgba(255, 255, 255, 0.14); }
  .strip__list a:hover .ico { transform: translateY(-4px); color: var(--royal-soft); }
  .strip__all a:hover { color: var(--royal-soft); }
  .strip__all a:hover .ico { transform: translateX(5px); }
}
/* a short screen (a small laptop): the same banner, a little tighter */
@media (min-width: 761px) and (max-height: 820px) {
  .chips { margin-bottom: 14px; }
  .hero__lead { margin-top: 14px; }
  .hero .btns { margin-top: 20px; }
  .hero__in { padding-bottom: 24px; }
  .strip__in { padding-block: 14px 12px; }
  .strip__list .ico { width: 36px; height: 36px; }
  .strip__all { margin-top: 4px; }
}
@media (max-width: 760px) {
  .hero { min-height: max(600px, 100svh); }
  .hero__media > picture > img, .hero__media > video { object-position: 50% 50%; }
  .hero__tint { background: linear-gradient(180deg, rgba(0, 0, 50, 0.62) 0%, rgba(0, 0, 50, 0.05) 18%, rgba(0, 0, 50, 0) 30%, rgba(0, 0, 60, 0.8) 58%, rgba(0, 0, 50, 0.94) 100%); }
  .hero__in { justify-content: flex-end; padding-bottom: 22px; }
  .chips li:nth-child(n + 3) { display: none; }
  .chips li { padding: 6px 11px; font-size: 0.6875rem; }
  .hero .btns .btn { flex: 1 1 0; padding: 0 12px; }
  .hero__pause { top: calc(var(--nav-h) + 8px); bottom: auto; }
  .hero h1 { font-size: min(var(--t-h1), 6.2svh); }
  .strip__list a { letter-spacing: 0.05em; padding: 4px 2px; }
}

/* ================================================================ 8 the banner of every other page
   Navy from edge to edge, the words on the left, the photograph running in from the right. */
.banner { position: relative; display: flex; align-items: flex-end; min-height: clamp(440px, 66svh, 820px); padding-top: var(--nav-h); color: #fff; background: var(--navy-deep); overflow: hidden; isolation: isolate; }
.banner__media { position: absolute; inset: 0 0 0 auto; width: 64%; z-index: -2; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%); mask-image: linear-gradient(90deg, transparent 0%, #000 46%); }
.banner__media .pic { width: 100%; height: 100%; border-radius: 0; background: var(--navy-deep); }
.banner__tint { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 77, 0.6) 0%, rgba(0, 0, 77, 0.2) 55%, rgba(0, 0, 60, 0.12) 100%), linear-gradient(180deg, rgba(0, 0, 50, 0.6) 0%, rgba(0, 0, 50, 0) 26%, rgba(0, 0, 50, 0) 64%, rgba(0, 0, 50, 0.5) 100%); }
.banner__in { padding-block: clamp(36px, 5vw, 80px) clamp(36px, 4.4vw, 72px); }
.banner h1 { font-size: var(--t-h1-page); line-height: 1; letter-spacing: -0.038em; max-width: 15ch; }
.banner__lead { margin-top: clamp(14px, 1.6vw, 26px); max-width: 36em; font-size: var(--t-lead); font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.banner .btns { margin-top: clamp(20px, 2.2vw, 34px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: clamp(14px, 1.5vw, 24px); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--royal-soft); }
.crumbs a { color: rgba(255, 255, 255, 0.82); transition: color 0.18s ease; }
.crumbs li + li::before { content: '/'; margin-right: 10px; color: rgba(255, 255, 255, 0.45); }
.crumbs li { display: flex; align-items: center; }
.banner__facts { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 3vw, 56px); margin-top: clamp(24px, 2.6vw, 40px); padding-top: clamp(18px, 2vw, 28px); border-top: 1px solid rgba(255, 255, 255, 0.24); }
.banner__facts dt { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--royal-soft); }
.banner__facts dd { margin-top: 4px; font-size: 1.125rem; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: #fff; } }
@media (max-width: 860px) {
  .banner { min-height: clamp(420px, 70svh, 620px); }
  .banner__media { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .banner__tint { background: linear-gradient(180deg, rgba(0, 0, 55, 0.66) 0%, rgba(0, 0, 55, 0.25) 26%, rgba(0, 0, 60, 0.72) 62%, rgba(0, 0, 50, 0.95) 100%); }
}

/* ================================================================ 9 services */
.filter { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: clamp(20px, 2.2vw, 36px); }
.filter button { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: var(--t-small); white-space: nowrap; color: var(--navy); box-shadow: inset 0 0 0 2px var(--line); transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.filter button span { font-weight: 600; font-size: 0.8125rem; opacity: 0.6; }
.filter button .ico { width: 20px; height: 20px; }
.filter button[aria-pressed='true'] { background: var(--navy); color: #fff; box-shadow: inset 0 0 0 2px var(--navy); }
@media (hover: hover) and (pointer: fine) { .filter button:not([aria-pressed='true']):hover { box-shadow: inset 0 0 0 2px var(--navy); } }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
/* the home page opens on one family of services: the other tiles wait, without a flash, until the script takes over */
.js .tiles[data-start] > .tile--later { display: none; }
.tile { position: relative; display: flex; flex-direction: column; min-height: clamp(180px, 13vw, 232px); padding: clamp(20px, 1.9vw, 32px); border-radius: var(--r); background: var(--card); color: var(--ink); transition: background-color 0.22s ease, color 0.22s ease, transform 0.25s var(--ease-out), box-shadow 0.25s ease; }
.tile > .ico { width: clamp(36px, 2.9vw, 48px); height: clamp(36px, 2.9vw, 48px); color: var(--navy); stroke-width: 1.35; transition: color 0.22s ease; }
.tile h3 { margin-top: clamp(14px, 1.5vw, 24px); }
.tile p { margin-top: 8px; font-size: var(--t-small); line-height: 1.5; color: var(--muted); transition: color 0.22s ease; }
.tile__go { position: absolute; right: clamp(16px, 1.6vw, 26px); top: clamp(16px, 1.6vw, 26px); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.25s var(--ease-out); }
.tile__go .ico { width: 18px; height: 18px; stroke-width: 2; }
.tile--ask { background: var(--royal); color: #fff; justify-content: space-between; }
.tile--ask h3 { margin-top: 0; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); }
.tile--ask p { color: rgba(255, 255, 255, 0.92); }
.tile--ask b { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding-bottom: 4px; border-bottom: 2px solid #fff; }
.tile--ask b .ico { width: 1.05em; height: 1.05em; stroke-width: 2.2; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tile:not(.tile--ask):hover { background: var(--navy); color: #fff; transform: translateY(-8px); box-shadow: var(--shadow); }
  .tile:not(.tile--ask):hover > .ico { color: var(--royal-soft); }
  .tile:not(.tile--ask):hover p { color: rgba(255, 255, 255, 0.85); }
  .tile:hover .tile__go { background: var(--royal); color: #fff; box-shadow: none; transform: rotate(-45deg); }
  .tile--ask:hover { background: var(--navy); transform: translateY(-8px); box-shadow: var(--shadow); }
  .tile--ask:hover b .ico { transform: translateX(5px); }
}
.tile:active { transform: scale(0.98); }
@media (max-width: 1199px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a phone: two tidy columns of short tiles, an icon over a name; the filter chips scroll sideways */
@media (max-width: 600px) {
  .filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scrollbar-width: none; scroll-snap-type: x proximity; }
  .filter::-webkit-scrollbar { display: none; }
  .filter button { scroll-snap-align: start; min-height: 44px; padding: 0 15px; }
  .tiles { gap: 10px; }
  .tile { min-height: 124px; padding: 16px; border-radius: 14px; }
  .tile > .ico { width: 32px; height: 32px; }
  .tile h3 { margin-top: 12px; font-size: 1.0625rem; line-height: 1.2; padding-right: 0; }
  .tile p, .tile__go { display: none; }
  .tile--ask { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 16px; }
  .tile--ask p { display: none; }
  .tile--ask b { margin-top: 0; white-space: nowrap; }
}
/* the services page: one family of services per section */
.cat-head { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.cat-head > .ico { width: clamp(44px, 4vw, 72px); height: clamp(44px, 4vw, 72px); color: var(--royal); stroke-width: 1.2; }
.cat-head { margin-bottom: clamp(28px, 3vw, 52px); }
.cat-head .head { flex: 1; margin-bottom: 0; }
.cat-head .head .eyebrow:empty { display: none; }
@media (max-width: 600px) { .cat-head { align-items: flex-start; } }

/* ================================================================ 10 projects */
/* the carousel: cards in a row that runs off the right edge of the screen */
.rail { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 16px 24px; margin-block: -16px -24px; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-snap { scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); }
.rail__track { display: flex; gap: var(--gap); width: max-content; padding-inline: var(--edge); }
.rail__track > li { scroll-snap-align: start; }
.rail__nav { display: flex; gap: 12px; }
.rail__nav button { display: grid; place-items: center; width: clamp(48px, 4vw, 60px); height: clamp(48px, 4vw, 60px); border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.16s var(--ease-out); }
.rail__nav button .ico { width: 22px; height: 22px; stroke-width: 2; }
.rail__nav button:active { transform: scale(0.94); }
.rail__nav button[disabled] { opacity: 0.35; cursor: default; }
.rail__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: clamp(28px, 3vw, 48px); }
.rail__count { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: var(--t-small); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.rail__bar { position: relative; width: clamp(120px, 24vw, 420px); height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.rail__bar i { position: absolute; inset: 0; background: var(--royal-soft); transform-origin: 0 50%; transform: scaleX(0.08); }
@media (hover: hover) and (pointer: fine) { .rail__nav button:not([disabled]):hover { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px #fff; } }

/* held on screen (a desktop): the section is as tall as the screen plus the distance its cards travel (--travel,
   set by site.js); its contents stick to the screen while the page scrolls through that distance */
[data-rail].is-pinned { padding-block: 0; height: calc(100svh + var(--travel, 0px)); }
.is-pinned > .rail__stick { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + clamp(8px, 1.6svh, 20px)) clamp(16px, 3svh, 40px); overflow: hidden; }
.is-pinned > .rail__stick .head { margin-bottom: clamp(14px, 2.6svh, 40px); }
.is-pinned > .rail__stick .rail { overflow-x: hidden; flex: none; cursor: grab; }
.is-pinned > .rail__stick .pcard { height: clamp(300px, calc(100svh - var(--nav-h) - 372px), 600px); }
.is-pinned > .rail__stick .rail__foot { margin-top: clamp(14px, 2.4svh, 40px); }

/* a project on a photograph: the words stand on a navy gradient, so they read on a light picture too */
.pcard { position: relative; display: flex; align-items: flex-end; width: clamp(280px, 24vw, 460px); height: clamp(420px, 31vw, 600px); border-radius: 18px; overflow: hidden; color: #fff; background: var(--navy-ink); transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease; transform-style: preserve-3d; }
.pcard > .pic { position: absolute; inset: 0; border-radius: 0; background: var(--navy-ink); }
.pcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 46, 0) 22%, rgba(0, 0, 46, 0.5) 46%, rgba(0, 0, 46, 0.9) 70%, rgba(0, 0, 46, 0.97) 100%); pointer-events: none; }
.pcard__txt { position: relative; z-index: 1; width: 100%; padding: clamp(20px, 1.8vw, 30px); }
.pcard__tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--royal-soft); }
.pcard h3 { margin-top: 10px; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.1; }
.pcard p { margin-top: 10px; font-size: var(--t-small); line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.pcard__go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; padding: 0 18px; border-radius: 8px; font-weight: 700; font-size: var(--t-small); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.pcard__go .ico { width: 1.05em; height: 1.05em; stroke-width: 2.2; transition: transform 0.2s var(--ease-out); }
.pcard--all { align-items: stretch; background: var(--royal); }
.pcard--all::after { display: none; }
.pcard--all .pcard__txt { display: flex; flex-direction: column; justify-content: space-between; }
.pcard--all h3 { margin-top: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); }
@media (hover: hover) and (pointer: fine) {
  a.pcard:hover { box-shadow: 0 40px 60px -30px #000, 0 0 0 3px var(--royal); }
  a.pcard:hover .pcard__go { background: var(--royal); box-shadow: inset 0 0 0 2px var(--royal); }
  a.pcard:hover .pcard__go .ico { transform: translateX(5px); }
  a.pcard--all:hover { background: #fff; color: var(--navy); }
}
a.pcard:active { transform: scale(0.985); }
.pcard.is-tilt { transition: transform 0.14s ease-out, box-shadow 0.35s ease; }
@media (max-width: 600px) { .pcard { width: min(78vw, 320px); height: 430px; } }

/* the grid on the projects page and the city pages: the photograph over the words */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 48px) var(--gap); }
.gcard { display: flex; flex-direction: column; position: relative; border-radius: var(--r); background: var(--card); overflow: hidden; transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease; }
.gcard > .pic { aspect-ratio: 4 / 3; border-radius: 0; }
.gcard__count { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; color: #fff; background: rgba(0, 0, 60, 0.72); }
.gcard__count .ico { width: 16px; height: 16px; }
.gcard__txt { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 1.9vw, 32px); }
.gcard__tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--royal); }
.gcard h3 { margin-top: 10px; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }
.gcard p { margin-top: 10px; color: var(--muted); font-size: var(--t-small); line-height: 1.55; }
.gcard__go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding-top: 20px; font-weight: 700; color: var(--navy); }
.gcard__go span { padding-bottom: 4px; background: linear-gradient(var(--royal), var(--royal)) 0 100% / 100% 3px no-repeat; }
.gcard__go .ico { width: 1.1em; height: 1.1em; stroke-width: 2.2; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.gcard:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
  a.gcard:hover .gcard__go { color: var(--royal); }
  a.gcard:hover .gcard__go .ico { transform: translateX(5px); }
}
@media (max-width: 1099px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 2000px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* projects with no photograph yet: a plain list */
.plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 80px); }
.plist li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4px 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.plist b { font-size: 1.0625rem; }
.plist b small { display: block; font-weight: 600; font-size: var(--t-small); color: var(--royal); }
.plist span { color: var(--muted); font-size: var(--t-small); }
@media (max-width: 900px) { .plist { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .plist li { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ 11 the statement band */
.statement__text { max-width: 26ch; font-size: clamp(1.75rem, 1.1rem + 2.7vw, 4.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.statement__text strong { color: var(--royal-soft); }
.statement__text .w { opacity: 0.32; transition: opacity 0.35s ease; }
.statement__text .w.on { opacity: 1; }
.proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(40px, 4.4vw, 80px); padding-top: clamp(28px, 3vw, 48px); border-top: 1px solid rgba(255, 255, 255, 0.2); }
.proofs li { display: flex; gap: 16px; align-items: flex-start; }
.proofs .ico { width: clamp(34px, 2.8vw, 46px); height: clamp(34px, 2.8vw, 46px); color: var(--royal-soft); stroke-width: 1.3; }
.proofs b { display: block; font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.2; }
.proofs span { display: block; margin-top: 6px; font-size: var(--t-small); color: rgba(255, 255, 255, 0.78); }
@media (max-width: 860px) { .proofs { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* ================================================================ 12 text beside a photograph */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.split__text { grid-column: 1 / span 5; }
.split__media { grid-column: 7 / span 6; }
/* every second one puts its photograph on the left, so the page zigzags */
main > .sec--split:nth-child(odd) .split__text { grid-column: 8 / span 5; order: 2; }
main > .sec--split:nth-child(odd) .split__media { grid-column: 1 / span 6; order: 1; }
.split__media .pic { aspect-ratio: 5 / 5.4; max-height: min(78svh, 820px); width: 100%; }
.split .head { margin-bottom: clamp(22px, 2.4vw, 40px); }
.prose > * + * { margin-top: 1.1em; }
.prose { font-size: var(--t-lead); line-height: 1.6; }
.split__more { margin-top: clamp(24px, 2.4vw, 40px); }
@media (max-width: 1023px) {
  .split { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .split__text, .split__media, main > .sec--split:nth-child(odd) .split__text, main > .sec--split:nth-child(odd) .split__media { grid-column: 1 / -1; order: 0; }
  .split__media .pic { aspect-ratio: 4 / 3; }
}

/* rows: a name, a line, sometimes a link */
.rows > li { position: relative; padding: clamp(14px, 1.3vw, 20px) 0; border-top: 1px solid var(--line); }
.rows > li:last-child { border-bottom: 1px solid var(--line); }
.band .rows > li { border-color: rgba(255, 255, 255, 0.2); }
.rows__name { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.rows__name .ico { width: 22px; height: 22px; stroke-width: 2; color: var(--royal); opacity: 0; transform: translateX(-8px); transition: opacity 0.2s ease, transform 0.25s var(--ease-out); }
.rows p { margin-top: 6px; color: var(--muted); font-size: var(--t-body); line-height: 1.5; max-width: 40em; }
a.rows__name { transition: color 0.18s ease; }
a.rows__name::after { content: ''; position: absolute; inset: 0; } /* the whole row is the link */
.rows > li::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--royal); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s var(--ease-out); }
.rows--spec > li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4px 24px; align-items: baseline; }
.rows--spec .rows__name { font-size: var(--t-body); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.rows__value { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
@media (hover: hover) and (pointer: fine) {
  .rows > li:has(a.rows__name):hover::before, .rows > li.is-on::before { transform: none; }
  .rows > li:hover a.rows__name { color: var(--royal); }
  .rows > li:hover a.rows__name .ico { opacity: 1; transform: none; }
}
@media (max-width: 600px) { .rows--spec > li { grid-template-columns: minmax(0, 1fr); } .rows__name .ico { opacity: 1; transform: none; } }
.rows > li.is-on a.rows__name { color: var(--royal); }
.rows > li.is-on a.rows__name .ico { opacity: 1; transform: none; }

/* plain links in one or two columns */
.links { display: grid; gap: 0 var(--gap); }
.links--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--line); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; transition: color 0.18s ease, padding 0.25s var(--ease-out); }
.links a .ico { width: 20px; height: 20px; stroke-width: 2; color: var(--royal); transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .links a:hover { color: var(--royal); } .links a:hover .ico { transform: translateX(5px); } }
@media (max-width: 480px) { .links--2 { grid-template-columns: minmax(0, 1fr); } }

/* the list that swaps its photograph: the picture follows the row under the pointer */
.peek__media { position: relative; }
.peek__media .pic { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; aspect-ratio: auto; max-height: none; height: 100%; }
.peek__media .pic.is-on { opacity: 1; }
.peek__media { aspect-ratio: 5 / 5.4; max-height: min(78svh, 820px); border-radius: var(--r); overflow: hidden; background: var(--line); }
@media (max-width: 1023px) { .peek__media { aspect-ratio: 4 / 3; } }

/* ================================================================ 13 the three steps
   On a desktop the section holds on screen while its steps take turns: the list on the left, one
   photograph on the right. Without script, on a phone and under "reduce motion" it is three cards. */
.steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); counter-reset: step; }
.steps__list > li { display: flex; flex-direction: column; border-radius: var(--r); background: var(--card); overflow: hidden; }
.steps__list .pic { order: -1; aspect-ratio: 4 / 3; border-radius: 0; }
.step__txt { padding: clamp(20px, 1.9vw, 32px); }
.step__n { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: 1.125rem; }
.step__txt p { margin-top: 8px; color: var(--muted); }
@media (max-width: 900px) { .steps__list { grid-template-columns: minmax(0, 1fr); } }
/* a row that leads to a page: its name is the link, and the whole row takes the click */
.step__link { transition: color 0.18s ease; }
/* the arrow stays beside the last word when a long name runs to two lines */
.step__link .ico { display: inline-block; vertical-align: -0.14em; width: 20px; height: 20px; margin-left: 10px; stroke-width: 2; color: var(--royal); transition: transform 0.2s var(--ease-out); }
.step__link::after { content: ''; position: absolute; inset: 0; }
.steps__list > li:has(.step__link) { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .steps__list > li:hover .step__link { color: var(--royal); }
  .steps__list > li:hover .step__link .ico { transform: translateX(5px); }
}

/* a service's list (five rows or so) where nothing is held: a small photograph beside each row */
.steps--rows .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps--rows .steps__list > li { flex-direction: row; }
.steps--rows .steps__list .pic { flex: none; width: clamp(96px, 30%, 190px); aspect-ratio: auto; min-height: 100%; }
.steps--rows .step__txt { padding: clamp(14px, 1.6vw, 26px); }
.steps--rows .step__n { width: 34px; height: 34px; margin-bottom: 10px; font-size: 0.9375rem; }
@media (max-width: 900px) { .steps--rows .steps__list { grid-template-columns: minmax(0, 1fr); } }

.steps.is-pinned { padding-block: 0; height: 280svh; }
/* the longer list holds for a shorter scroll per row, and sits tighter so five rows fit a laptop screen */
.steps--rows.is-pinned { height: calc(100svh + var(--n, 5) * 42svh); }
.steps--rows.is-pinned .head { margin-bottom: clamp(12px, 2.2svh, 36px); }
.steps--rows.is-pinned .head h2 { font-size: min(var(--t-h2), 6.6svh); }
.steps--rows.is-pinned .steps__list > li { padding-block: clamp(9px, 1.7svh, 22px); }
.steps--rows.is-pinned .step__n { top: -3px; }
.steps.is-pinned .steps__stick { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; }
.steps.is-pinned .steps__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; width: var(--wrap); min-height: min(72svh, 760px); }
.steps.is-pinned .steps__text { grid-column: 1 / span 5; }
.steps.is-pinned .head { margin-bottom: clamp(20px, 2.4vw, 40px); }
.steps.is-pinned .steps__list { display: block; position: static; }
.steps.is-pinned .steps__list > li { display: block; position: static; background: none; border-radius: 0; overflow: visible; padding: clamp(14px, 1.5vw, 24px) 0 clamp(14px, 1.5vw, 24px) clamp(60px, 4.6vw, 76px); border-top: 1px solid var(--line); opacity: 0.38; transition: opacity 0.4s ease; }
.steps.is-pinned .steps__list > li.is-on { opacity: 1; }
.steps.is-pinned .step__txt { position: relative; padding: 0; }
.steps.is-pinned .step__n { position: absolute; left: calc(-1 * clamp(60px, 4.6vw, 76px)); top: -4px; margin: 0; background: var(--line); color: var(--navy); transition: background-color 0.4s ease, color 0.4s ease; }
.steps.is-pinned li.is-on .step__n { background: var(--royal); color: #fff; }
.steps.is-pinned .step__txt p { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 0.45s var(--ease-out), margin 0.45s var(--ease-out); }
.steps.is-pinned .step__txt p > span { overflow: hidden; }
.steps.is-pinned li.is-on .step__txt p { grid-template-rows: 1fr; margin-top: 8px; }
.steps.is-pinned .steps__list .pic { position: absolute; right: 0; top: 0; width: calc(50% - var(--gap) / 2); height: 100%; aspect-ratio: auto; border-radius: var(--r); opacity: 0; transform: scale(1.03); transition: opacity 0.6s ease, transform 0.9s var(--ease-out); }
.steps.is-pinned .steps__list li.is-on .pic { opacity: 1; transform: none; }
.steps__progress { display: none; }
.steps.is-pinned .steps__progress { display: block; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--line); }

/* ================================================================ 14 questions */
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.faq-grid__side { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-grid__side .pic { aspect-ratio: 16 / 10; margin-top: clamp(28px, 3vw, 48px); }
.faq { grid-column: 7 / span 6; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(18px, 1.7vw, 26px) 0; font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; cursor: pointer; list-style: none; transition: color 0.18s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: inherit; line-height: inherit; letter-spacing: inherit; text-wrap: pretty; }
.faq summary .ico { width: 44px; height: 44px; padding: 11px; border-radius: 50%; stroke-width: 2; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); transition: transform 0.3s var(--ease-out), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.faq details[open] summary .ico { transform: rotate(45deg); background: var(--navy); color: #fff; box-shadow: none; }
.faq details > p { padding: 0 64px clamp(18px, 1.8vw, 28px) 0; color: var(--muted); font-size: var(--t-lead); line-height: 1.6; max-width: 44em; }
.faq-links { display: grid; gap: 4px; margin-top: 8px; }
.faq-links .label { margin-bottom: 6px; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.faq-links .more { justify-self: start; margin-top: 10px; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--royal); } .faq summary:hover .ico { box-shadow: inset 0 0 0 1.5px var(--royal); } }
@media (max-width: 1023px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .faq-grid__side, .faq { grid-column: 1 / -1; position: static; }
  .faq-grid__side .pic { display: none; }
  .faq details > p { padding-right: 0; }
}

/* ================================================================ 15 pairs, films, the gallery */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pair .pic { aspect-ratio: 4 / 3.4; }
.pair--film { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pair--film .pic { aspect-ratio: auto; height: 100%; min-height: 320px; }
.pair--film-wide { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.clip { position: relative; border-radius: var(--r); overflow: hidden; background: #000; }
.clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip--tall { aspect-ratio: 9 / 16; max-height: min(80svh, 760px); justify-self: center; width: 100%; }
.clip--wide { aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .pair, .pair--film, .pair--film-wide { grid-template-columns: minmax(0, 1fr); } .pair--film .pic { aspect-ratio: 4 / 3; height: auto; min-height: 0; } }

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(8px, 0.9vw, 16px); }
.gallery button { position: relative; display: block; width: 100%; border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.gallery .pic { aspect-ratio: 1; border-radius: 0; }
.gallery li:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gallery button::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--royal); transition: box-shadow 0.2s ease; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .gallery button:hover::after { box-shadow: inset 0 0 0 4px var(--royal); } .gallery button:hover .pic > img { transform: scale(1.05); } }
.gallery .pic > img { transition: transform 0.8s var(--ease-out); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the viewer: one photograph large on a navy ground, arrows, a count */
.viewer { position: fixed; inset: 0; z-index: 100; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 30, 0.96); color: #fff; }
.viewer::backdrop { background: rgba(0, 0, 30, 0.6); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: viewer-in 0.25s var(--ease-out); }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(14px, 2vw, 28px); font-weight: 700; font-variant-numeric: tabular-nums; }
.viewer__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 clamp(8px, 6vw, 96px); }
.viewer__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.viewer__cap { padding: 14px clamp(14px, 2vw, 28px) calc(18px + env(safe-area-inset-bottom)); text-align: center; font-size: var(--t-small); color: rgba(255, 255, 255, 0.8); min-height: 3em; }
.viewer button { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); background: rgba(0, 0, 40, 0.5); transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out); }
.viewer button:active { transform: scale(0.94); }
.viewer button .ico { width: 22px; height: 22px; stroke-width: 2; }
.viewer__prev, .viewer__next { position: absolute; top: 50%; margin-top: -26px; z-index: 1; }
.viewer__prev { left: clamp(8px, 1.6vw, 28px); }
.viewer__next { right: clamp(8px, 1.6vw, 28px); }
@media (hover: hover) and (pointer: fine) { .viewer button:hover { background: #fff; color: var(--navy); } }
@keyframes viewer-in { from { opacity: 0; } }

/* ================================================================ 16 the areas line, the quote form */
.areas-line { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 24px clamp(32px, 5vw, 96px); align-items: center; }
.areas-line h2 { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 3rem); }
.areas-line__cities { font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.875rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.45; }
.areas-line__cities span { white-space: nowrap; }
.areas-line__cities i { font-style: normal; color: var(--royal); margin-inline: 0.28em; }
.areas-line .more { margin-top: 20px; }
@media (max-width: 860px) { .areas-line { grid-template-columns: minmax(0, 1fr); } }

.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.contact__side { grid-column: 1 / span 5; }
.contact__form { grid-column: 7 / span 6; padding: clamp(22px, 2.6vw, 48px); border-radius: var(--r); background: var(--card); }
.facts { display: grid; gap: 0; }
.facts > div { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.facts .ico { width: 28px; height: 28px; color: var(--royal); stroke-width: 1.5; }
.facts dt { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.facts dd { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--gap); }
.field { display: grid; gap: 7px; }
.field--full, .form > .btns, .form > p, .form > .hp, .form > noscript, .form > .cf-turnstile { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: var(--t-small); }
.field input, .field textarea { width: 100%; min-height: 54px; padding: 13px 16px; border: 2px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); font: inherit; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 4px rgba(42, 82, 232, 0.18); }
.field [aria-invalid='true'] { border-color: #b3261e; }
.field__error { color: #b3261e; font-size: var(--t-small); font-weight: 600; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-weight: 700; color: var(--navy); min-height: 1.6em; }
.form__note { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 1023px) { .contact { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } .contact__side, .contact__form { grid-column: 1 / -1; } }
@media (max-width: 560px) { .form { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ 17 the closing call and the footer */
.closing { position: relative; color: #fff; background: var(--navy-ink); isolation: isolate; }
.cta { position: relative; padding-block: clamp(72px, 9vw, 168px); overflow: hidden; background: var(--navy-deep); isolation: isolate; }
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media .pic { width: 100%; height: 100%; border-radius: 0; background: var(--navy-deep); }
.cta__tint { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 77, 0.92) 0%, rgba(0, 0, 90, 0.72) 45%, rgba(0, 0, 77, 0.4) 100%); }
.cta__in { display: flex; align-items: end; justify-content: space-between; gap: 32px 64px; flex-wrap: wrap; }
.cta h2 { max-width: 14ch; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 5rem); line-height: 1; }
.cta p:not(.eyebrow) { margin-top: clamp(16px, 1.6vw, 26px); max-width: 32em; font-size: var(--t-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.cta__act { display: grid; gap: 14px; justify-items: start; }
.cta__phone { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; transition: color 0.18s ease; }
.cta__phone .ico { width: 1em; height: 1em; color: var(--royal-soft); }
.footer { padding-block: clamp(48px, 5vw, 88px) 28px; font-size: var(--t-small); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px var(--gap); }
.footer__logo { display: inline-flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.footer__logo svg { height: 1.45em; width: auto; }
.footer__about p { margin-top: 16px; max-width: 26em; color: rgba(255, 255, 255, 0.72); line-height: 1.55; }
.footer__about .tlink { display: inline-block; margin-top: 4px; }
.footer h3 { margin-bottom: 14px; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--royal-soft); }
.footer__col a { display: inline-flex; align-items: center; min-height: 34px; color: rgba(255, 255, 255, 0.86); transition: color 0.18s ease, transform 0.2s var(--ease-out); }
.footer__areas { margin-top: clamp(32px, 3.4vw, 56px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); line-height: 2; }
.footer__areas a { color: rgba(255, 255, 255, 0.82); transition: color 0.18s ease; white-space: nowrap; }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer__legal a, .footer__legal button { color: rgba(255, 255, 255, 0.78); min-height: 32px; display: inline-flex; align-items: center; transition: color 0.18s ease; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.socials svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .cta__phone:hover { color: var(--royal-soft); }
  .footer__col a:hover { color: #fff; transform: translateX(4px); }
  .footer__areas a:hover, .footer__legal a:hover, .footer__legal button:hover { color: #fff; }
  .socials a:hover { background: #fff; color: var(--navy); box-shadow: none; }
}
@media (max-width: 1023px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__about { grid-column: 1 / -1; } }
/* a phone: the quote button stays within reach at the foot of the screen */
.actionbar { display: none; }
@media (max-width: 760px) {
  .actionbar { display: block; position: fixed; inset: auto 0 0 0; z-index: 40; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--line); transform: translateY(110%); transition: transform 0.3s var(--ease-out); }
  .actionbar.is-on { transform: none; }
  .actionbar .btn { width: 100%; }
  .footer { padding-bottom: 96px; }
}

/* ================================================================ 18 reading pages, the cookie notice */
.doc { padding: calc(var(--nav-h) + clamp(40px, 5vw, 88px)) 0 var(--sec); }
.doc__body { max-width: 46rem; }
.doc__body > * + * { margin-top: 1em; }
.doc__body h1 { font-size: var(--t-h2); line-height: 1.05; margin-bottom: 0.5em; }
.doc__body h2 { font-size: var(--t-h3); letter-spacing: -0.02em; margin-top: 2.2em; }
.doc__body h3 { font-size: 1.125rem; letter-spacing: 0; margin-top: 1.6em; }
.doc__body ul { list-style: disc; padding-left: 1.25em; display: grid; gap: 0.4em; }
.doc__body a { font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--royal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.doc__body a:hover { color: var(--royal); }
.doc__meta { color: var(--muted); font-size: var(--t-small); }
.doc__body table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.doc__body th, .doc__body td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.doc__body th { font-weight: 700; }
.doc__table { overflow-x: auto; }

.consent { position: fixed; z-index: 60; right: 20px; bottom: 20px; width: min(440px, calc(100vw - 40px)); display: grid; gap: 16px; padding: 22px; border-radius: var(--r); background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.consent p { font-size: var(--t-small); line-height: 1.5; }
.consent a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.consent .btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.consent .btn { width: 100%; padding: 0 12px; }
@media (max-width: 639px) { .consent { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--r) var(--r) 0 0; padding: 18px var(--gut) calc(18px + env(safe-area-inset-bottom)); } }
.linklike { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

/* ================================================================ 19 the rope down the page edge
   A rope hangs down the right side of the window and a technician comes down it as the page is read.
   Only where the page's gutter has room for it (a wide desktop), and never in the way of a click. */
.rope { display: none; }
@media (min-width: 1360px) and (hover: hover) and (pointer: fine) {
  /* the strip is the page's right gutter; --tw is the width of the figure, which grows with the gutter.
     Dark royal over a light section; site.js adds .is-over-dark while the figure hangs in front of a
     navy one, where dark blue would not show. Both blues can be seen on both, so a rope that runs on
     into the other kind of section does not vanish. */
  .rope { display: block; position: fixed; z-index: 30; right: 0; top: 0; bottom: 0; width: var(--edge); pointer-events: none; color: var(--royal-dark); transition: color 0.35s ease; --tw: clamp(38px, calc(var(--edge) * 0.5), 67px); }
  .rope.is-over-dark { color: var(--royal-soft); }
  .rope__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
  .rope__lines path:nth-child(even) { opacity: 0.6; }
  .rope__tech { position: absolute; left: calc(50% - var(--tw) / 2); top: 0; width: var(--tw); aspect-ratio: 385 / 451; will-change: transform; }
  .rope__tech svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
}

/* ================================================================ 20 motion
   Things rise into place the first time they come on screen. The page works without any of it:
   nothing is hidden unless the script is running (html.js), and "reduce motion" keeps only fades. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal='fade'] { transform: none; }
/* a section heading: its small line draws, the heading rises, the marked word is underlined */
.js .head[data-reveal] { opacity: 1; transform: none; }
.js .head[data-reveal] .eyebrow::before { transform: scaleX(0); transition: transform 0.7s var(--ease-out); }
.js .head[data-reveal] .eyebrow, .js .head[data-reveal] h2, .js .head[data-reveal] p:not(.eyebrow), .js .head[data-reveal] > .more, .js .head[data-reveal] > .rail__nav { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.js .head[data-reveal] h2 { transition-delay: 80ms; }
.js .head[data-reveal] p:not(.eyebrow) { transition-delay: 160ms; }
.js .head[data-reveal] > .more, .js .head[data-reveal] > .rail__nav { transition-delay: 220ms; }
.js .head[data-reveal].in .eyebrow, .js .head[data-reveal].in h2, .js .head[data-reveal].in p:not(.eyebrow), .js .head[data-reveal].in > .more, .js .head[data-reveal].in > .rail__nav { opacity: 1; transform: none; }
.js .head[data-reveal].in .eyebrow::before { transform: none; transition-delay: 120ms; }
.js .head[data-reveal] h2 em, .js .cta h2 em { background-size: 0 0.07em; transition: background-size 0.8s var(--ease-out) 0.5s; }
.js .head[data-reveal].in h2 em, .js .cta [data-reveal].in h2 em, .js .cta h2.in em { background-size: 100% 0.07em; }

/* the banner's words arrive once, on load (a CSS animation, so it runs while the page is still loading) */
.hero__in > *, .banner__in > *, .strip { animation: arrive 0.9s var(--ease-out) both; }
.hero__in > :nth-child(2), .banner__in > :nth-child(2) { animation-delay: 80ms; }
.hero__in > :nth-child(3), .banner__in > :nth-child(3) { animation-delay: 160ms; }
.hero__in > :nth-child(4), .banner__in > :nth-child(4) { animation-delay: 240ms; }
.banner__in > :nth-child(5) { animation-delay: 320ms; }
.strip { animation-name: arrive-fade; animation-delay: 420ms; }
.hero h1 em, .banner h1 em { animation: underline 0.9s var(--ease-out) 0.7s both; }
@keyframes arrive { from { opacity: 0; transform: translateY(28px); } }
@keyframes arrive-fade { from { opacity: 0; } }
@keyframes underline { from { background-size: 0 0.07em; } }
.tiles > .tile.is-in { animation: arrive 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .head[data-reveal] .eyebrow, .js .head[data-reveal] h2, .js .head[data-reveal] p:not(.eyebrow), .js .head[data-reveal] > .more, .js .head[data-reveal] > .rail__nav { transform: none; transition-duration: 0.3s; transition-delay: 0s; }
  .hero__in > *, .banner__in > *, .strip, .tiles > .tile.is-in { animation-name: arrive-fade; animation-duration: 0.3s; animation-delay: 0s; }
  .pic--zoom > img, .gallery .pic > img { transition: none; }
  .tile, .gcard, .pcard { transition-property: background-color, color, box-shadow; }
  .tile:hover, a.gcard:hover, .tile--ask:hover { transform: none; }
}