/* Option B: "the line". Wayfinding signage in Bradshaw's own colors, layered over styles.css.
   Navy pylon plates name things, two line inks (logo blue and logo green) run as stripes and stops,
   photos are square-cornered and full-bleed, and legibility comes from solid plates, never scrims. */

:root {
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --paper: #ffffff;
  --tint: #eef3f6;
  --ink-2: #33495a;
  --muted: #566a78;
  --r-sm: 4px;
  --r-lg: 4px;
  --header-h: 76px;
  --stripe: 6px;
  --shadow: 0 1px 2px rgba(13, 36, 51, .08), 0 18px 36px -22px rgba(13, 36, 51, .35);
}

html { scroll-padding-top: calc(var(--header-h) + 24px); scrollbar-color: var(--navy) var(--tint); }
body { background: #fff; font-size: 1.0625rem; }
::selection { background: var(--go); color: var(--navy); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; font-stretch: normal; text-transform: uppercase; letter-spacing: .005em; line-height: .92; }
.h-xl { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.h-md { font-size: clamp(1.8rem, 3vw, 2.4rem); }

/* Buttons: signage plates, not pills */
.btn { font: 700 1rem/1 var(--sans); border-radius: var(--r-sm); border-width: 2px; }
.btn-lg { padding: 1.05rem 1.45rem; }
.btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
.text-link { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; border-bottom-width: 3px; }

/* Header: a solid navy sign band with the two line stripes running under it */
.site-header { padding: 0; background: var(--navy); pointer-events: auto; }
.header-bar { max-width: none; min-height: calc(var(--header-h) - 2 * var(--stripe)); padding: 0 var(--gutter); color: #fff; }
.header-bar::before { display: none; }
.site-header.solid .header-bar { color: #fff; }
.solid .brand-name { color: #fff; }
.solid .brand-sub { color: var(--go); }
.brand img { border-radius: 4px; }
.site-nav a { font: 800 1.125rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; opacity: .92; border-radius: 0; padding: .7rem .75rem; }
.site-nav a:hover, .solid .site-nav a:hover { background: rgba(255, 255, 255, .1); opacity: 1; }
.site-nav a[aria-current="page"], .solid .site-nav a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--go); }
.header-cta { padding: .85rem 1.1rem; }
.header-lines { display: grid; }
.header-lines span { height: var(--stripe); background: var(--sky); }
.header-lines span + span { background: var(--go); }
@media (max-width: 1060px) {
  .site-nav { padding-top: calc(var(--header-h) + 32px); }
  .site-nav a { font: 800 2.1rem/1 var(--display); letter-spacing: .02em; }
  .nav-open .header-lines { visibility: hidden; }
}
@media (max-width: 400px) { .site-header { padding: 0; } }

/* Dots: line stops */
.dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--sky); flex-shrink: 0; }
.dot-green { border-color: var(--go); }

/* ---------- Home: hero ---------- */
.b-hero {
  position: relative; isolation: isolate; background: var(--navy); color: #fff;
  min-height: min(100svh, 980px); padding-top: var(--header-h);
  display: grid; grid-template-rows: 1fr auto;
}
.b-hero-photo { position: absolute; inset: var(--header-h) 0 0 0; z-index: -1; overflow: hidden; }
.b-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.b-hero-plate {
  align-self: end; justify-self: start; width: min(620px, calc(100% - 2 * var(--gutter)));
  margin: clamp(120px, 18vh, 240px) 0 0 var(--gutter);
  background: var(--navy); padding: clamp(26px, 3.4vw, 48px) clamp(24px, 3.4vw, 52px) clamp(26px, 3vw, 40px);
}
.b-hero-title { font-size: clamp(3rem, 5.4vw, 5.25rem); font-weight: 900; line-height: .88; letter-spacing: 0; max-width: 15ch; text-wrap: balance; }
.b-hero-lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--on-dark); max-width: 46ch; margin: 1.25rem 0 1.75rem; }
.b-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.b-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem;
  background: var(--navy); padding: 1.1rem var(--gutter);
  border-top: 1px solid var(--navy-line);
}
.b-stops { display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.b-stops li, .b-rating { display: inline-flex; align-items: center; gap: .6rem; font: 800 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.b-rating { color: #fff; text-decoration: none; min-height: 44px; }
.b-rating:hover { color: var(--go); }
.b-rating .stars { color: var(--star); display: inline-flex; gap: 2px; font-size: .95rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .b-hero-plate { animation: plate .9s var(--ease-out) both .1s; }
  .js .b-hero-photo img { animation: settle-photo 1.4s var(--ease-out) both; }
}
@keyframes plate { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes settle-photo { from { transform: scale(1.04); } to { transform: none; } }
@media (max-width: 760px) {
  .b-hero { min-height: 0; grid-template-rows: auto auto auto; }
  .b-hero-photo { position: relative; inset: auto; aspect-ratio: 4 / 3.4; z-index: 0; }
  .b-hero-plate { width: auto; margin: -64px 12px 0; position: relative; padding: 24px 20px 26px; }
  .b-hero-title { font-size: clamp(2.6rem, 12.5vw, 3.4rem); }
  .b-actions .btn { flex: 1 1 100%; }
  .b-strip { padding: 1rem 20px 1.25rem; }
  .b-stops li, .b-rating { font-size: 1.1rem; }
}

/* ---------- Home: the route ---------- */
/* One continuous line runs down the left of the page. Each section is a stop: a navy sign plate with a dot on the line. */
.b-route { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 9vw, 128px) calc(var(--gutter) + 64px); }
.b-track { position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) + 18px); width: calc(2 * var(--stripe) + 4px); view-timeline-name: --route; }
.b-track::before, .b-track-fill { content: ''; position: absolute; inset: 0; border-left: var(--stripe) solid var(--sky); border-right: var(--stripe) solid var(--go); }
.b-track::before { opacity: .2; }
.b-track-fill { display: block; transform-origin: top; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .b-track-fill { animation: fill linear both; animation-timeline: --route; animation-range: entry 10% exit 0%; }
  }
}
@keyframes fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.b-stop { padding-top: clamp(72px, 9vw, 120px); }
.b-sign {
  position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 2rem;
  background: var(--navy); color: #fff; padding: 20px clamp(20px, 2.4vw, 32px) 18px; margin-bottom: clamp(24px, 3vw, 36px);
}
.b-sign::before { content: ''; position: absolute; left: -54px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: #fff; border: 7px solid var(--navy); box-sizing: border-box; }
.b-sign h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.b-sign-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--go); text-decoration: none; font: 800 1.2rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.b-sign-link:hover { color: #fff; }

/* Services: a mixed grid of stops, each named on a navy plate */
.b-services { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); gap: 12px; }
.sv > a { position: relative; display: flex; flex-direction: column; justify-content: end; height: 100%; min-height: 260px; overflow: hidden; color: inherit; text-decoration: none; }
.sv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.sv-plate { position: relative; align-self: start; max-width: min(92%, 440px); background: var(--navy); color: #fff; padding: 14px 18px 16px; }
.sv-name { display: block; font: 800 1.75rem/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.sv-text { display: block; font-size: .9375rem; line-height: 1.45; margin-top: .45rem; color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) { .sv > a:hover img { transform: scale(1.035); } .sv > a:hover .sv-name { color: var(--go); } }
.sv-a { grid-column: 1 / 6; grid-row: span 2; }
.sv-b { grid-column: 6 / 13; }
.sv-c { grid-column: 6 / 9; }
.sv-price { grid-column: 9 / 13; }
.sv-d { grid-column: 1 / 8; }
.sv-ink { grid-column: 8 / 13; }
.sv-price > a, .sv-ink > a { padding: clamp(22px, 2.4vw, 32px); justify-content: space-between; }
.sv-price > a { background: var(--go); color: var(--navy); }
.sv-price .sv-text { color: var(--navy); }
.sv-big { font: 900 clamp(4rem, 7vw, 6rem)/.85 var(--display); }
.sv-big small { font: 800 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; margin-left: .4rem; }
.sv-ink > a { background: var(--navy); color: #fff; }
.sv-ink i { font-size: 2.6rem; color: var(--go); }
@media (max-width: 900px) {
  .b-services { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .sv-a, .sv-b, .sv-c, .sv-price, .sv-d, .sv-ink { grid-column: auto; grid-row: auto; }
  .sv-a, .sv-b, .sv-d { grid-column: 1 / -1; }
  .sv > a { min-height: 300px; }
  .sv-a > a { min-height: 420px; }
}
@media (max-width: 560px) {
  .b-services { grid-template-columns: 1fr; }
  .sv > a { min-height: 0; aspect-ratio: 4 / 3.6; }
  .sv-a > a { aspect-ratio: 4 / 4.6; }
  .sv-price > a, .sv-ink > a { aspect-ratio: auto; gap: 1rem; }
}

/* Rooms answered by clients' words, across a seam of the two line stripes */
.b-spreads { display: grid; gap: clamp(28px, 4vw, 56px); }
.spread { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; position: relative; }
.spread-photo { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
/* Station-name plates on photos */
.photo-plate { position: absolute; left: 0; bottom: 0; background: var(--navy); color: #fff; padding: 10px 16px 9px; font: 800 1.15rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.photo-plate .dot { width: 12px; height: 12px; border-width: 3px; margin-right: .5rem; vertical-align: -1px; }
.spread-photo img { width: 100%; height: 100%; object-fit: cover; }
.spread-quote { padding: clamp(24px, 4vw, 64px); position: relative; }
.spread-quote::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: calc(2 * var(--stripe)); border-left: var(--stripe) solid var(--sky); border-right: var(--stripe) solid var(--go); }
.spread-quote p { font: 600 clamp(1.35rem, 2.2vw, 1.85rem)/1.32 var(--sans); color: var(--navy); letter-spacing: -.01em; margin-bottom: 1.25rem; }
.spread-quote footer { display: flex; flex-direction: column; gap: .2rem; }
.spread-quote footer strong { font: 800 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.spread-quote footer span { color: var(--muted); font-size: .9375rem; }
.spread-flip { grid-template-columns: 1fr 1.2fr; }
.spread-flip .spread-photo { order: 2; }
.spread-flip .spread-quote::before { left: auto; right: 0; }
@media (max-width: 860px) {
  .spread, .spread-flip { grid-template-columns: 1fr; }
  .spread-flip .spread-photo { order: 0; }
  .spread-quote { padding: 46px 0 0; }
  .spread-quote::before, .spread-flip .spread-quote::before { left: 0; right: auto; top: 16px; bottom: auto; width: 56px; height: calc(2 * var(--stripe)); border: 0; border-top: var(--stripe) solid var(--sky); border-bottom: var(--stripe) solid var(--go); }
}

/* How it works: three stops on a horizontal line */
.b-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); position: relative; padding-top: 44px; }
.b-line::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: calc(2 * var(--stripe)); border-top: var(--stripe) solid var(--sky); border-bottom: var(--stripe) solid var(--go); }
.b-line li { position: relative; }
.b-line li::before { content: ''; position: absolute; top: -44px; left: 0; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 7px solid var(--navy); box-sizing: border-box; }
.b-line h3 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); color: var(--navy); margin: .4rem 0 .75rem; }
.b-line p { color: var(--ink-2); max-width: 34ch; margin: 0; }
@media (max-width: 760px) {
  .b-line { grid-template-columns: 1fr; padding: 0 0 0 48px; gap: 28px; }
  .b-line::before { left: 9px; right: auto; top: 6px; bottom: 6px; width: calc(2 * var(--stripe)); height: auto; border: 0; border-left: var(--stripe) solid var(--sky); border-right: var(--stripe) solid var(--go); }
  .b-line li::before { top: 2px; left: -48px; }
  .b-line h3 { margin-top: 0; }
}

/* Story */
.b-story { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.b-story-photo { aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.b-story-photo img { width: 100%; height: 100%; object-fit: cover; }
.b-story-quote { font: 900 clamp(2.4rem, 4.6vw, 4rem)/.92 var(--display); text-transform: uppercase; color: var(--navy); margin-bottom: 1.5rem; }
.b-story-copy h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--sky-ink); margin-bottom: 1rem; }
.b-story-copy p:not(.b-story-quote) { color: var(--ink-2); max-width: 54ch; }
.b-story-copy .text-link { margin-top: .75rem; }
@media (max-width: 860px) { .b-story { grid-template-columns: 1fr; } .b-story-photo { aspect-ratio: 4 / 3.4; } }

/* More voices */
.b-voice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.b-voice-row li { padding-top: 26px; position: relative; }
.b-voice-row li::before { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: calc(2 * var(--stripe)); border-top: var(--stripe) solid var(--sky); border-bottom: var(--stripe) solid var(--go); }
.b-voice-row p { font: 600 1.1875rem/1.45 var(--sans); color: var(--navy); }
.b-voice-row span { color: var(--muted); font-size: .9375rem; }
.b-voice-row strong { display: block; font: 800 1.2rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--navy); margin-bottom: .25rem; }
@media (max-width: 860px) { .b-voice-row { grid-template-columns: 1fr; } }

/* Route on small screens: the line moves to the very edge */
@media (max-width: 760px) {
  .b-route { padding-left: calc(var(--gutter) + 34px); }
  .b-track { left: 8px; }
  .b-sign::before { left: -40px; width: 26px; height: 26px; margin-top: -13px; border-width: 6px; }
}

/* Closing: a navy terminus with the service-area line map */
.b-end { background: var(--navy); color: #fff; padding: clamp(72px, 9vw, 128px) 0; }
.b-end-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.b-end h2 { font-size: clamp(2.8rem, 6vw, 5.4rem); font-weight: 900; max-width: 10ch; }
.b-end-lede { color: var(--on-dark); max-width: 44ch; margin: 1.25rem 0 .5rem; }
.b-end-phone { display: inline-block; position: relative; font: 900 clamp(2.6rem, 6vw, 4.6rem)/1 var(--display); color: var(--go); text-decoration: none; margin: .25rem 0 1.5rem; }
.b-end-phone:hover { color: #fff; }
.b-map svg { width: 100%; height: auto; display: block; }
.b-map .map-big { font: 900 24px var(--display); fill: #fff; letter-spacing: .04em; }
.b-map .map-sm { font: 800 17px var(--display); fill: var(--on-dark); letter-spacing: .06em; }
.b-map figcaption { color: var(--on-dark-2); font-size: .9375rem; margin-top: .75rem; }
@media (max-width: 860px) { .b-end-grid { grid-template-columns: 1fr; } .b-end .b-actions .btn { flex: 1 1 100%; } }

/* ---------- Every page ---------- */
.masthead { padding: calc(var(--header-h) + clamp(56px, 8vw, 104px)) 0 clamp(56px, 7vw, 96px); }
.masthead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(2 * var(--stripe)); border-top: var(--stripe) solid var(--sky); border-bottom: var(--stripe) solid var(--go); }
.masthead h1 { font-size: clamp(3rem, 7vw, 6rem); font-weight: 900; letter-spacing: 0; line-height: .88; max-width: 14ch; }
.mast-photo { border-radius: 0; }
.rb-big, .proof-score { font-family: var(--display); font-weight: 900; font-stretch: normal; }
@media (prefers-reduced-motion: no-preference) { .js .mast-photo img { animation: settle-photo 1.2s var(--ease-out) both; } }

.section-tint { background: var(--tint); }
.big-phone { font-family: var(--display); font-weight: 900; font-stretch: normal; letter-spacing: 0; }
/* Panels are flat: a 1px rule and a navy top bar, no floating shadows */
.detail-list, .panel { border-radius: var(--r-lg); box-shadow: none; border: 1px solid var(--line); border-top: 6px solid var(--navy); }
.review { border-radius: var(--r-lg); box-shadow: none; border: 1px solid var(--line); }
.review-ink { border-color: var(--navy); }
.review-ink blockquote { font: 600 1.1875rem/1.5 var(--sans); }
.review figcaption strong { font: 800 1.2rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }

/* About values: three stops on the line, like How it works */
.values { gap: clamp(20px, 3vw, 40px); position: relative; padding-top: 44px; }
.values::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: calc(2 * var(--stripe)); border-top: var(--stripe) solid var(--sky); border-bottom: var(--stripe) solid var(--go); }
.values li, .values li:first-child, .values li:nth-child(2) { position: relative; padding: 0; background: none; color: var(--ink-2); border-radius: 0; }
.values li::before { content: ''; position: absolute; top: -44px; left: 0; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 7px solid var(--navy); box-sizing: border-box; }
.values h3, .values li:first-child h3 { color: var(--navy); font-size: clamp(1.8rem, 2.6vw, 2.3rem); margin: .4rem 0 .75rem; }
.values li:nth-child(3) p { color: var(--ink-2); }
@media (max-width: 860px) {
  .values { grid-template-columns: 1fr; padding: 0 0 0 48px; gap: 28px; }
  .values::before { left: 9px; right: auto; top: 6px; bottom: 6px; width: calc(2 * var(--stripe)); height: auto; border: 0; border-left: var(--stripe) solid var(--sky); border-right: var(--stripe) solid var(--go); }
  .values li::before { top: 2px; left: -48px; }
  .values h3 { margin-top: 0; }
}
.gallery img, .gallery a, .svc-photo, .svc-photo img, .split-photo, .split-photo img { border-radius: 0; }
.svc-index a.is-active { box-shadow: inset 4px 0 0 var(--go); }
.placeholder { border-radius: var(--r-lg); }

.site-footer { position: relative; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(2 * var(--stripe)); border-top: var(--stripe) solid var(--sky); border-bottom: var(--stripe) solid var(--go); }
.footer-h { font: 800 1.15rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.footer-brand img { border-radius: var(--r-lg); }
.call-bar a { border-radius: var(--r-sm); }