/* Discount Beach Towing and Recovery: night shift. Ink ground, Atlantic navy bands, paper where reading matters,
   beacon amber only for Call and the hours line. Gloock (display) · Schibsted Grotesk (text) · DM Mono (dispatch layer). */
:root {
  --ink: #0C1117; --ink2: #141B23; --navy: #173C53; --navy2: #1D4762; --paper: #F2F0EB; --amber: #F2A33A;
  --fog: #AEB9C2; --mist: #C6D3DC; --quiet: #56616A;
  --rule-ink: #26323D; --rule-navy: #3D6580; --rule-paper: #C9CFD3;
  --disp: "Gloock", Georgia, "Times New Roman", serif;
  --text: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gut: 20px; --hdr: 72px;
  --m-dur: .65s; --m-ease: cubic-bezier(.3, .7, .2, 1); --m-rise: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html { background: var(--navy); }
body { margin: 0; background: var(--ink); color: #EEF1F3; font: 400 17px/1.6 var(--text); }
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ol, ul, figure, blockquote, table { margin: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--amber); color: var(--ink); padding: 12px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(1280px, 100% - 2 * var(--gut)); margin-inline: auto; }

/* Type roles: display (Gloock), label (DM Mono caps), body (Schibsted). */
.label { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font: 500 .8rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fog); }
.cut { width: 34px; height: 13px; flex: none; }
.mini { font: 500 .78rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fog); margin-bottom: 12px; }
h2 { font: 400 clamp(2.6rem, 10vw, 3.6rem)/1 var(--disp); letter-spacing: -.01em; }

/* The woodcut cut: seven fine parallel lines, run full width as the divider at each section boundary. */
.cutrule { display: block; width: 100%; height: 25px; --cr: #37506A; background: repeating-linear-gradient(to bottom, var(--cr) 0 1px, transparent 1px 4px); }
.cr-navy { --cr: #4F7894; }
/* Under the Impala band: on ink, between the photo and the paper, so it reads as the divider, not as road paint. */
.cr-band { --cr: #4F7894; background-color: var(--ink); }
/* Older pages (404, policy pages) still use the band name. */
.cutband { display: block; width: 100%; height: 25px; background: repeating-linear-gradient(to bottom, #4F7894 0 1px, transparent 1px 4px); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 24px; background: var(--amber); color: var(--ink); text-decoration: none; font: 700 1.06rem/1 var(--text); border-radius: 0; --m-fill: rgba(255, 255, 255, .3); transition: translate .15s; }
.btn:active { translate: 0 1px; }
.btn .ico { width: 20px; height: 20px; flex: none; }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: var(--ink); transition: transform .45s var(--m-ease), box-shadow .3s; }
.top.is-hidden { transform: translateY(-100%); }
.top.is-scrolled { box-shadow: 0 1px 0 var(--rule-ink); }
.preview { background: #000; color: #B9C0C6; font: 400 .8125rem/1.3 var(--text); text-align: center; padding: 6px 16px; }
.bar { display: flex; align-items: center; gap: 16px; height: var(--hdr); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.seal { width: 56px; height: 56px; }
.brand-name { font: 400 1.125rem/1 var(--disp); white-space: nowrap; }
.nav { display: none; }
/* The phone action bar carries Call, so the header number starts at tablet width. */
.topcall { display: none; margin-left: auto; font: 400 1.35rem/1 var(--disp); text-decoration: none; padding: 12px 0; white-space: nowrap; }

/* Hero: the wrecker at the oceanfront, the name on a solid ink panel. */
.hero { position: relative; background: var(--ink); --ph: clamp(260px, 38svh, 400px); }
.hero-photo { position: relative; height: var(--ph); overflow: hidden; }
/* Phones: the frame is cut in on the truck (light bar, dollies, wheel-lift deck); the Marriott is only the lit
   backdrop and the unlit lower body drops out. The photo is drawn 2x the frame height: the light bar sits 40% down,
   the frame's bottom edge just under the deck, the dollies and light bar centred, the cab cut at about two thirds. */
.hero-photo img { position: absolute; top: calc(var(--ph) * -.64); left: calc(50% - var(--ph) * 1.36); width: calc(var(--ph) * 2.667); height: calc(var(--ph) * 2); max-width: none; object-fit: cover; }
/* A soft ink fall-off from the top, so the lit tower sits back and the truck's lights lead. */
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 17, 23, .75), rgba(12, 17, 23, 0) 32px), linear-gradient(180deg, rgba(12, 17, 23, .55), rgba(12, 17, 23, 0) 42%); pointer-events: none; }
.panel { position: relative; z-index: 2; background: var(--ink); margin-top: -36px; padding: 26px var(--gut) 57px; }
.panel .label { margin-bottom: 16px; }
.name { position: relative; margin-bottom: 18px; }
/* Phones: the seal's top lines up with the cap height of "Discount", at the right of the name block
   (panel top pad 26 + label 16.6 + its 16px margin). */
.hero-seal { position: absolute; z-index: 1; top: calc(58.6px + min(14.4vw, 4.4rem) * .1); right: var(--gut); width: min(26vw, 112px); height: auto; aspect-ratio: 1; opacity: .85; }
.h1-main { display: block; font: 400 clamp(3.1rem, 14.4vw, 4.4rem)/.98 var(--disp); letter-spacing: -.012em; color: var(--paper); }
.h1-main .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.h1-main .w > span { display: inline-block; }
.h1-sub { display: block; margin-top: 12px; font: 500 .92rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }
.say { margin-bottom: 24px; font-size: 1.12rem; color: #D6DDE2; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.alt { display: none; gap: 8px; align-items: center; min-height: 48px; font-weight: 600; text-decoration: none; }
.cr-hero { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 3px; background: none; }
.cr-hero i { display: block; height: 1px; background: var(--cr); }

/* Hero entrance: one sequence on every screen size, played by keyframes from first paint (not by the kit's
   scroll reveals, which phones could finish before the first frame). Each keyframe only sets the start state,
   so the end state is the element's own style and no-motion visitors see everything at once. */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: h-photo 1.6s cubic-bezier(.2, .7, .2, 1) both; }
  .panel { animation: h-rise .8s var(--m-ease) .2s both; --rise: 24px; }
  .panel .label { animation: h-rise .65s var(--m-ease) .25s both; }
  .h1-main .w > span { animation: h-word .75s var(--m-ease) .3s both; }
  .h1-main .w + .w > span { animation-delay: .39s; }
  .h1-sub { animation: h-rise .65s var(--m-ease) .65s both; }
  .say { animation: h-rise .65s var(--m-ease) .65s both; }
  .acts { animation: h-rise .65s var(--m-ease) .8s both; }
  .hero-seal { animation: h-fade .7s var(--m-ease) .9s both; }
  /* The woodcut is carved in: the seven lines draw left to right one after another. */
  .cr-hero i { animation: h-cut .8s cubic-bezier(.6, 0, .2, 1) .95s both; }
  .cr-hero i:nth-child(2) { animation-delay: .99s; } .cr-hero i:nth-child(3) { animation-delay: 1.03s; }
  .cr-hero i:nth-child(4) { animation-delay: 1.07s; } .cr-hero i:nth-child(5) { animation-delay: 1.11s; }
  .cr-hero i:nth-child(6) { animation-delay: 1.15s; } .cr-hero i:nth-child(7) { animation-delay: 1.19s; }
}
@keyframes h-photo { from { scale: 1.12; filter: brightness(.45); } }
@keyframes h-rise { from { opacity: 0; translate: 0 var(--rise, 16px); } }
@keyframes h-word { from { translate: 0 110%; } }
@keyframes h-fade { from { opacity: 0; scale: .94; } }
@keyframes h-cut { from { clip-path: inset(0 100% 0 0); } }

/* Arrival log: a navy band set as a dispatch sheet. */
.log { background: var(--navy); padding: 64px 0 56px; }
.log .label, .log .mini { color: var(--mist); }
.log h2 { margin-bottom: 12px; }
.rate { color: #DCE5EB; font-size: 1.0625rem; max-width: 30em; }
.rate-n { font: 400 1.5rem/1 var(--disp); color: #fff; }
.rate-link { margin-bottom: 24px; }
.rate-link a { display: inline-block; padding: 12px 0; font: 500 .8125rem/1.3 var(--mono); letter-spacing: .04em; color: #fff; text-decoration: underline; text-decoration-color: var(--fog); text-underline-offset: 5px; }
.cols { display: none; }
.entry-list { list-style: none; padding: 0; border-top: 1px solid var(--rule-navy); }
.entry { position: relative; padding: 24px 0 26px; }
.entry::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-navy); transform-origin: left; transition: transform 1.1s var(--m-ease) .15s; }
html.m-on .entry:not(.is-in)::after { transform: scaleX(0); }
.entry .t { font: 400 2.5rem/1 var(--disp); color: #fff; margin-bottom: 14px; white-space: nowrap; clip-path: inset(-20% -2% -20% 0); transition: clip-path .5s var(--m-ease) .15s; }
html.m-on .entry:not(.is-in) .t { clip-path: inset(-20% 100% -20% 0); }
.entry blockquote p { font-size: 1.06rem; color: #F1F5F8; max-width: 38em; }
.entry .who { margin-top: 12px; font: 500 .8rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }

/* Their truck and its door lettering: one full-bleed photo with nothing over it; the cut runs under it on ink. */
.band { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--ink2); view-timeline: --band block; }
/* Phones: 3:2, so the whole rig shows (cab, door lettering, wheel-lift and the full Impala). */
.band img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* The photo eases from 1.06 to 1 over its passage. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .band img { animation: band-zoom linear both; animation-timeline: --band; animation-range: entry 0% exit 100%; }
      }
}
@keyframes band-zoom { from { scale: 1.06; } }

/* Services: a hairline index on paper. Phones show every photo under its row; desktop previews the active row. */
.svc { background: var(--paper); color: var(--ink); padding: 72px 0 56px; }
.svc .label, .svc .mini { color: var(--quiet); }
.svc :focus-visible { outline-color: var(--navy); }
.svc h2 { margin-bottom: 24px; }
.grp { margin-top: 32px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 500 .8rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.rows { list-style: none; padding: 0; }
.row { position: relative; display: grid; grid-template-columns: 2.4ch 1fr; column-gap: 14px; align-items: baseline; padding-top: 22px; }
.row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-paper); transform-origin: left; transition: transform 1s var(--m-ease) .1s, background-color .3s, height .3s; }
html.m-on .row:not(.is-in)::after { transform: scaleX(0); }
.row .n { font: 500 .8rem/1 var(--mono); letter-spacing: .06em; color: var(--quiet); font-variant-numeric: tabular-nums; }
.row .s { padding-bottom: 24px; font: 400 clamp(1.7rem, 7vw, 2.4rem)/1.08 var(--disp); transition: color .3s; }
.row .s { text-wrap: balance; }
.row .s small { text-wrap: pretty; display: block; margin-top: 10px; font: 400 1rem/1.5 var(--text); color: var(--quiet); }
.row.is-active .n, .row.is-active .s { color: var(--navy); }
.row.is-active::after { height: 2px; background: var(--ink); }
/* Phones: every photo sits under its row, each with its own crop and edge, so the four don't repeat one box. */
.row-ph { grid-column: 1 / -1; margin: 0 0 28px; background: var(--ink); overflow: hidden; }
.row-ph img { width: 100%; height: 100%; object-fit: cover; }
.r-tow { aspect-ratio: 3 / 2; }
.r-tow img { object-position: 50% 38%; }
.r-winch { aspect-ratio: 1; margin-left: 20px; margin-right: calc(-1 * var(--gut)); }
.r-winch img { object-position: 50% 60%; }
.r-boat { position: relative; aspect-ratio: 1; margin-left: calc(-1 * var(--gut)); margin-right: 20px; }
/* boat-night drawn 1.28x wide so the lit boat and dock fill the square; most of the black sky and water drop out. */
.r-boat img { position: absolute; top: -26.8%; left: -10.3%; width: 128.2%; height: 170.9%; max-width: none; }
.r-night { aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--gut)); }
.r-night img { object-position: 50% 60%; }
.rows:last-child .row:last-child::after { display: none; }
.rows:last-child .row:last-child .row-ph { margin-bottom: 0; }
.row-ph img[data-reveal] { scale: 1.06; }
.row-ph img.is-in { scale: 1; }
.svc-fig { margin: 0; background: var(--ink); display: none; }

/* Work: heading on ink, then two daylight photos stacked: the wide Murano, the smaller boat frame laid over its
   lower corner. */
.work { background: var(--ink); padding-bottom: 56px; }
.work-head { padding: 64px 0 32px; }
.work-idx { display: none; font: 500 .8125rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fog); }
.work-idx .sep { display: none; }
.mosaic { display: grid; }
.tile { position: relative; overflow: hidden; background: var(--ink2); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-murano { aspect-ratio: 4 / 3; }
.t-murano img { object-position: 50% 60%; }
/* boat-swamped drawn 1.5x wide / 2.67x tall: the boathouse roofline (~4% down) to the reeds; no houses, lawn or rope. */
.t-boat { position: relative; z-index: 1; width: 80%; justify-self: end; margin-top: -56px; aspect-ratio: 4 / 3; }
.t-boat img { inset: auto; top: -60%; left: -18.2%; width: 152%; height: 270.3%; max-width: none; }

/* Call and hours: the number as the biggest type after the name. Navy, running on into the footer. */
.call { background: var(--navy); padding: 0 0 72px; }
.call > .wrap { padding-top: 72px; }
.call .label, .call .mini { color: var(--mist); }
.bignum { font: 400 clamp(4.5rem, 24.5vw, 6.25rem)/.92 var(--disp); letter-spacing: -.02em; margin-bottom: 40px; white-space: nowrap; }
.bignum a { text-decoration: none; background: linear-gradient(var(--amber), var(--amber)) 0 100% / 0 3px no-repeat; transition: background-size .6s var(--m-ease); }
.bignum a:hover { background-size: 100% 3px; }
.bignum .area { display: block; color: var(--mist); }
.call-grid { display: grid; gap: 32px; }
.open { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0 14px; border-top: 1px solid var(--rule-navy); border-bottom: 2px solid var(--amber); font: 500 .94rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.open .now { color: var(--amber); white-space: nowrap; }
/* Address, email and links as one ruled list: a mono label column and the value beside it. */
.reach { margin: 0; border-bottom: 1px solid var(--rule-navy); }
.reach > div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; padding: 16px 0; border-top: 1px solid var(--rule-navy); }
.reach dt { padding-top: .45em; font: 500 .75rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.reach dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: #DCE5EB; min-width: 0; }
.reach a { color: #fff; display: inline-block; padding: 6px 0; text-decoration: underline 1px var(--fog); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.reach a:hover, .reach a:focus-visible { text-decoration-color: var(--paper); }.reach .sep { color: var(--mist); }

/* Footer: the seal over the cut, then one line of small print. */
.foot { background: var(--navy); padding: 0 0 calc(72px + env(safe-area-inset-bottom)); --seal: 216px; }
.foot-mark { position: relative; display: grid; place-items: center; padding: 8px 0 24px; }
.foot-mark .cutrule { position: absolute; left: 0; right: 0; top: calc(8px + var(--seal) / 2 - 12.5px); }
/* The seal art fills 80% of its file: a 216px box with 3px padding shows a 168px seal (281px: 220px on desktop). */
.foot-seal { position: relative; width: var(--seal); height: var(--seal); padding: 3px; background: var(--navy); border-radius: 50%; --m-dur: .6s; }
.foot-legal { display: grid; gap: 0; padding-top: 20px; border-top: 1px solid var(--rule-navy); font-size: .94rem; color: var(--mist); }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }
.credit { margin-top: 0; }
.credit a { display: inline-block; padding: 10px 0; text-decoration: none; }
.legal-links a { display: inline-block; padding: 10px 0; text-decoration: none; }

/* Phone action bar */
.actionbar { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--navy); border-top: 1px solid var(--rule-navy); padding-bottom: env(safe-area-inset-bottom); transition: translate .5s var(--m-ease); translate: 0 calc(100% + 24px); animation: ab-nojs 0s 3s forwards; }
/* Hidden until the kit shows it, so it never paints during the entrance; without JS it appears after 3s */
html.m-on .actionbar { animation: none; }
.actionbar.is-shown { translate: 0 0; }
@keyframes ab-nojs { to { translate: 0 0; } }
.actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 0 8px; color: #fff; text-decoration: none; font: 600 1rem/1 var(--text); --m-fill: rgba(255, 255, 255, .12); }
.actionbar a + a { border-left: 1px solid var(--rule-navy); }
.actionbar .ab-call { background: var(--amber); color: var(--ink); --m-fill: rgba(255, 255, 255, .3); }
.actionbar .ico { width: 18px; height: 18px; }

/* 404 */
.lost { padding: 96px 0 120px; min-height: 70svh; }
.lost h1 { font: 400 clamp(3rem, 13vw, 6rem)/1 var(--disp); margin-bottom: 20px; }
.lost p { max-width: 34em; color: #D6DDE2; margin-bottom: 28px; }
.lost .alt { display: inline-flex; }

@media (min-width: 600px) {
  :root { --gut: 32px; }
  .topcall { display: block; }
  .alt { display: inline-flex; }
  .band { aspect-ratio: 16 / 10; }
  .band img { top: 0; height: 100%; object-position: 40% 62%; }
  .r-winch, .r-boat { max-width: 640px; }
}

@media (min-width: 900px) {
  :root { --gut: 48px; --hdr: 96px; }
  html { scroll-padding-top: 104px; }
  body { font-size: 18px; }
  /* The seal art fills about 80% of its file, so an 84px box shows a 68px seal. */
  .seal { width: 84px; height: 84px; margin-block: -6px; }
  .brand-name { font-size: 1.625rem; }
  .nav { display: flex; gap: 32px; margin-left: auto; font: 500 .8rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .nav a { text-decoration: none; padding: 14px 0; color: #D6DDE2; }
  .topcall { margin-left: 40px; font-size: 1.5rem; }

  .hero { --hh: clamp(620px, 100svh - var(--hdr) - 30px, 1100px); height: var(--hh); overflow: hidden; }
  .hero-photo { position: absolute; inset: 0; height: auto; }
  /* Cropped like the phone: the photo drawn 1.7x the hero height, the light bar about 46% down at 58% across, the
     frame's bottom edge just under the wheel-lift deck; the hotel crops at its upper floors, the dark lower cab leaves. */
  .hero-photo img { top: calc(var(--hh) * -.595); left: calc(58% - var(--hh) * 1.44 + 72px); width: calc(var(--hh) * 2.72); height: calc(var(--hh) * 2.04); object-position: 50% 50%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
  /* One left-to-right ink gradient over the full hero height carries the text: the panel has no edges of its own. */
  /* Plus a bottom-right fall-off that sinks the detail-less cab, so the light bar, boom and dollies are the bright shape. */
  .hero-photo::after { background: linear-gradient(90deg, rgba(12, 17, 23, .96) 0%, rgba(12, 17, 23, .94) 30%, rgba(12, 17, 23, 0) 57%), radial-gradient(ellipse at 100% 0%, rgba(12, 17, 23, .7), rgba(12, 17, 23, 0) 48%), radial-gradient(ellipse at 100% 100%, rgba(12, 17, 23, .8), rgba(12, 17, 23, 0) 50%), linear-gradient(180deg, rgba(12, 17, 23, .7), rgba(12, 17, 23, 0) 40%); }
  .panel { position: absolute; left: 0; bottom: 0; margin: 0; width: min(42%, 680px); padding: 56px 48px 57px max(var(--gut), (100vw - 1280px) / 2); background: none; }
  /* Desktop: the seal heads the panel, above the label, in the darkest part of the gradient. */
  .hero-seal { position: static; display: block; width: 120px; margin: 0 0 12px -12px; }
  .h1-main { font-size: clamp(4.4rem, 6.2vw, 7rem); }
  .h1-sub { font-size: 1rem; margin-top: 16px; }
  .say { font-size: 1.25rem; }

  h2 { font-size: clamp(3rem, 4.4vw, 3.8rem); }

  .log { padding: 144px 0 96px; }
  .rate-link { margin-bottom: 0; }
  .log-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
  .log-head { grid-column: 1 / 5; position: sticky; top: 140px; }
  .entries { grid-column: 5 / -1; }
  .cols { display: grid; grid-template-columns: 14rem 1fr 12rem; gap: 32px; padding-bottom: 14px; font: 500 .75rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
  .entry { display: grid; grid-template-columns: 14rem 1fr 12rem; gap: 32px; align-items: start; padding: 32px 0; }
  .entry .t { margin: 0; font-size: clamp(2rem, 2.5vw, 2.6rem); line-height: 1.02; }
  .entry blockquote p { font-size: 1.12rem; }
  .entry .who { margin: 0; }

  .band { aspect-ratio: auto; height: 72svh; min-height: 520px; max-height: 860px; }
  .band img { object-position: 40% 58%; }

  .svc { padding: 128px 0 96px; }
  .svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
  .svc-main { grid-column: 1 / 7; }
  .svc h2 { margin-bottom: 40px; }
  .grp { margin-top: 40px; }
  .row { grid-template-columns: 3.4ch 1fr; column-gap: 20px; padding-top: 28px; cursor: default; }
  .row .s { padding-bottom: 30px; }
  .row-ph { display: none; }
  /* One 4:5 preview, 460px wide (2x pixels for every photo), sticky beside the list; it changes as each row crosses the middle of the screen (or on hover). */
  .svc-fig { display: block; grid-column: 8 / -1; justify-self: end; width: min(100%, 460px); position: sticky; top: 120px; aspect-ratio: 4 / 5; overflow: hidden; }
  .svc-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.04; transition: opacity .5s var(--m-ease), scale .9s var(--m-ease); }
  .svc-fig img.is-active { opacity: 1; scale: 1; }
  .svc-fig img[data-key="tow"] { object-position: 62% 50%; }
  /* The Mack file is 1170 square: its row gets a 1:1 frame so it is never stretched to 4:5. */
  .svc-fig:has(img[data-key="winch"].is-active) { aspect-ratio: 1; }
  .svc-fig img[data-key="winch"] { object-position: 60% 45%; }
  .svc-fig img[data-key="boat"] { inset: auto; top: -18.3%; left: -17.1%; width: 142.9%; height: 152.4%; max-width: none; }
  .svc-fig img[data-key="night"] { object-position: 46% 50%; }

  /* Heading on cols 1-7, the plain index of the two photos on cols 8-12 on the same baseline. */
  .work-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: last baseline; padding: 96px 0 40px; }
  .work-head .label { grid-column: 1 / -1; }
  .work-head h2 { grid-column: 1 / 8; }
  .work-idx { grid-column: 8 / -1; display: block; margin: 0; text-align: right; }
  .work-idx .sep { display: inline; }
  /* Murano flush left on cols 1-8; the boat frame on cols 8-12 (to the content edge), overlapping the Murano by one
     column, its top 160px below the Murano's top and its bottom 100px below the Murano's bottom. */
  .work { padding-bottom: 196px; }
  .mosaic { grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding-right: max(var(--gut), (100vw - 1280px) / 2); }
  .t-murano { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 16 / 10; }
  .t-boat { grid-column: 8 / -1; grid-row: 1; width: auto; aspect-ratio: auto; justify-self: stretch; align-self: stretch; margin: 160px 0 -100px; }
  /* The 1536 file drawn 2.64x the frame height: roofline (22% down the photo) to the reeds (60%), centred on the boat. */
  .t-boat img { top: -63.6%; left: 50%; width: auto; height: 264%; translate: -47% 0; }

  .call { padding-bottom: 96px; }
  .call > .wrap { padding-top: 128px; }
  .bignum { font-size: clamp(7rem, 15.2vw, 13.6rem); white-space: nowrap; margin-bottom: 40px; }
  .bignum .area { display: inline; }
  .call-grid { grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
  /* The hours line runs the full width under the number; the three contact entries sit in a row beneath it. */
  .open { grid-column: 1 / -1; }
  .reach { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; border-bottom: 0; }
  .reach > div { grid-template-columns: 1fr; gap: 10px; padding: 0; border-top: 0; }
  .reach dt { padding-top: 0; font-size: .75rem; }
  .reach dd { font-size: 1.125rem; font-weight: 450; }
  .reach a { padding: 0; }

  .foot { padding-bottom: 40px; --seal: 281px; }
  .foot-legal { grid-template-columns: 1fr auto auto; gap: 40px; align-items: center; }
  .legal-links, .credit { margin: 0; }
  .actionbar { display: none; }
}

@media (min-width: 1500px) {
  .panel { width: min(44%, 760px); }
}