:root {
  color-scheme: light;
  --ink: #102c51;
  --blue: #24548c;
  --muted: #43566e;
  --line: #cfdeed;
  --pale: #f2f7fc;
  --white: #fff;
  --wrap: 1180px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid #2265bd; outline-offset: 4px; }
:where(h1, h2, h3, p, figure) { margin: 0; }
:where(p, li) { line-height: 1.65; }
:where(section, article)[id] { scroll-margin-top: 24px; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-weight: 800; letter-spacing: -.055em; line-height: 1.03; }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
h3 { font-size: 1.25rem; line-height: 1.18; letter-spacing: -.032em; }
p { color: var(--muted); }
.wrap { width: min(calc(100% - 88px), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3.25rem, 7vw, 6.25rem); }
.icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: .95rem; color: var(--blue); font-size: .7rem; font-weight: 800; letter-spacing: .14em; line-height: 1.4; }
.eyebrow > span:empty { width: 18px; height: 2px; flex: 0 0 auto; background: #6694c9; }
.lead { max-width: 55ch; font-size: clamp(1rem, 1.7vw, 1.15rem); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.button { display: inline-flex; width: fit-content; min-height: 48px; align-items: center; justify-content: center; gap: .65rem; padding: .75rem 1.15rem; border: 1px solid transparent; border-radius: 8px; background: var(--ink); color: var(--white); text-decoration: none; text-align: center; font-size: .88rem; font-weight: 750; line-height: 1.25; }
.button:hover { background: #254f83; }
.button.secondary { color: var(--ink); background: #fff; border-color: #a8bfda; }
.button.secondary:hover { background: #eaf3fc; }
.button.light { color: var(--ink); background: #f6faff; }
.button.light:hover { background: #d8e9ff; }
.inline-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--blue); font-size: .88rem; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.inline-link:hover { color: var(--ink); }
.skip { position: absolute; z-index: 5; top: .5rem; left: 1rem; padding: .75rem; background: var(--white); transform: translateY(-150%); }
.skip:focus { transform: translateY(0); }

.utility { background: var(--ink); color: #eff6ff; }
.utility .wrap { display: flex; justify-content: space-between; gap: .75rem; min-height: 34px; }
.utility span, .utility a { display: inline-flex; align-items: center; gap: .42rem; font-size: .74rem; font-weight: 650; }
.utility a { text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility a:focus-visible, .closing a:focus-visible, .site-footer a:focus-visible { outline-color: #a9ceff; }
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 77px; }
.brand { display: inline-flex; align-items: center; gap: .7rem; width: fit-content; text-decoration: none; color: var(--ink); }
.brand img { width: 45px; height: 45px; object-fit: contain; border-radius: 4px; }
.brand span { display: grid; gap: .25rem; font-size: 1.09rem; line-height: 1; font-weight: 850; letter-spacing: .105em; }
.brand small { color: var(--blue); font-size: .54rem; font-weight: 800; letter-spacing: .22em; }
#primary-nav { display: flex; align-items: center; gap: clamp(.8rem, 2.1vw, 1.85rem); }
#primary-nav > a:not(.button) { display: flex; min-height: 44px; align-items: center; color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 650; white-space: nowrap; }
#primary-nav > a:not(.button):hover, #primary-nav > a[aria-current] { text-decoration: underline; text-decoration-color: #739ccc; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-cta { min-height: 44px; white-space: nowrap; }
.menu-toggle { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .55rem .7rem; border: 1px solid #a8bfda; border-radius: 7px; background: var(--white); color: var(--ink); font-weight: 750; font-size: .85rem; }
.menu-toggle span { width: 14px; height: 9px; border-block: 2px solid currentColor; }

.home-hero, .page-hero { background: linear-gradient(110deg, #f4f9ff 20%, #eaf2fd 68%, #edeafa); border-block: 1px solid #dae6f3; }
.hero-grid { display: grid; grid-template-columns: 1.16fr 1fr; gap: clamp(1.5rem, 4vw, 4.25rem); align-items: center; padding-block: clamp(2.5rem, 5.6vw, 5.35rem); }
.hero-copy h1 { font-size: clamp(3.15rem, 5.7vw, 5.25rem); text-wrap: wrap; }
.hero-copy h1 em { color: #2a5a96; font-style: normal; }
.hero-copy .lead { max-width: 43ch; margin-top: 1.35rem; }
.hero-copy .actions { margin-top: 1.65rem; }
.hero-art { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 1rem; overflow: hidden; padding: 1.3rem; background-color: #d7e7fb; background-image: radial-gradient(circle, #789dca66 1px, transparent 1px), linear-gradient(135deg, #d0e4fa, #e7e2fa); background-size: 16px 16px, auto; border: 1px solid #b8cee9; border-radius: 22px; }
.hero-art::before, .hero-art::after { position: absolute; z-index: -1; top: 50%; left: 50%; width: 84%; aspect-ratio: 1; border: 1px solid #789ac673; border-radius: 50%; transform: translate(-50%, -50%); content: ""; }
.hero-art::after { width: 72%; }
.logo-plate { display: grid; place-items: center; width: min(72%, 322px); aspect-ratio: 1; padding: clamp(.8rem, 2.2vw, 1.65rem); background: #fff; border: 1px solid #abc2de; border-radius: 15%; box-shadow: 0 12px 25px #274f8124; }
.art-label, .art-caption { color: #234f7f; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.art-label { justify-self: start; padding: .35rem .55rem; border-radius: 5px; background: #eef6ff; }
.art-caption { display: flex; justify-content: space-between; gap: .4rem; width: 100%; }
.art-caption span { background: #e6effb; padding: .2rem .35rem; border-radius: 4px; }
.service-band { border-bottom: 1px solid var(--line); background: #fff; }
.band-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.band-inner a { display: flex; align-items: center; justify-content: center; min-height: 65px; gap: .6rem; padding: .65rem .5rem; text-align: center; font-size: .86rem; font-weight: 750; line-height: 1.3; text-decoration: none; }
.band-inner a + a { border-left: 1px solid var(--line); }
.band-inner a:hover { color: var(--blue); background: var(--pale); text-decoration: underline; text-underline-offset: 4px; }
.band-inner a:focus-visible { outline-offset: -4px; }
.band-inner .icon { width: 1.45rem; height: 1.45rem; color: var(--blue); }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2.5rem; margin-bottom: 1.8rem; }
.section-head > p { max-width: 34ch; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.service-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
.card-art { position: relative; display: grid; place-items: center; isolation: isolate; min-height: 125px; overflow: hidden; color: #235184; border-bottom: 1px solid var(--line); background-color: #e5f0fc; background-image: repeating-linear-gradient(135deg, transparent 0 16px, #779ac521 16px 17px); }
.card-art::before { position: absolute; z-index: -1; width: 92px; aspect-ratio: 1; border: 1px solid #7d9fc699; border-radius: 50%; background: #f7fbff9c; content: ""; }
.card-art .icon { width: 50px; height: 50px; stroke-width: 1.65; }
.card-art > span { position: absolute; left: .8rem; bottom: .65rem; color: #345885; font-weight: 800; font-size: .66rem; letter-spacing: .1em; }
.wash-art { background-color: #e5e8fb; }
.yard-art { background-color: #e0eff7; }
.car-art { background-color: #eae8fa; }
.card-copy { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: 1.15rem; }
.card-copy p { flex: 1; font-size: .9rem; }
.card-copy a { align-self: start; min-height: 44px; margin-bottom: -.4rem; }

.about-band { background: var(--pale); border-block: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; padding-block: clamp(2.8rem, 5.7vw, 5rem); }
.about-grid h2 + p { max-width: 46ch; margin-block: 1rem; }
.area-mini { display: grid; grid-template-columns: .72fr 1fr; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.area-mini > img { height: 100%; object-fit: cover; object-position: 75% 50%; }
.area-mini > div { padding: 1.25rem; }
.area-mini .eyebrow { margin-bottom: .5rem; }
.area-mini p { margin: .5rem 0; font-size: .86rem; }

.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.review-grid figure { display: flex; flex-direction: column; padding: 1.4rem; background: #f7faff; border: 1px solid var(--line); border-radius: 12px; }
.quote-mark { display: block; height: 2.25rem; color: #3b669f; font: 700 3rem/1 Georgia, serif; }
blockquote { flex: 1; margin: 0 0 .9rem; color: var(--ink); line-height: 1.55; }
figcaption { font-size: .85rem; font-weight: 750; color: var(--blue); }
.closing { background: var(--ink); color: #fff; }
.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: clamp(2rem, 4vw, 3.5rem); }
.closing h2 { font-size: clamp(1.75rem, 3.7vw, 2.65rem); }
.closing p { margin-top: .55rem; color: #e0ecff; }
.closing .button { flex-shrink: 0; }
.site-footer { background: #f2f7fd; }
.footer-main { display: grid; grid-template-columns: 1.2fr .7fr 1fr; align-items: start; gap: 1.5rem; padding-block: 2.4rem; }
.footer-main p { margin-top: .6rem; font-size: .87rem; }
.footer-main nav, .footer-contact { display: grid; gap: .6rem; justify-items: start; }
.footer-main a:not(.brand) { font-size: .86rem; font-weight: 650; text-underline-offset: 3px; }
.footer-main .icon { vertical-align: middle; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-block: .9rem; color: var(--muted); border-top: 1px solid var(--line); }

.page-hero .wrap { padding-block: clamp(2.6rem, 6vw, 5rem); }
.page-hero h1 { max-width: 19ch; font-size: clamp(3rem, 6.8vw, 5.65rem); }
.page-hero .lead { margin-top: 1rem; }
.service-details { display: grid; gap: 1.25rem; }
.service-detail { display: grid; grid-template-columns: .68fr 1.32fr; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.service-detail:target { outline: 2px solid #6990be; outline-offset: 3px; }
.detail-art { min-height: 240px; border: 0; border-right: 1px solid var(--line); }
.detail-art::before { width: min(58%, 185px); }
.detail-art .icon { width: min(30%, 105px); height: auto; aspect-ratio: 1; }
.detail-art > span { bottom: 1.05rem; left: 1.2rem; }
.detail-copy { padding: clamp(1.25rem, 3.5vw, 2.55rem); }
.detail-copy h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
.detail-tag { margin: .55rem 0 .3rem; color: var(--blue); font-weight: 750; }
.check-list { display: grid; gap: .35rem; list-style: none; padding: 0; margin: 1rem 0 1.25rem; }
.check-list li { display: flex; align-items: baseline; gap: .5rem; color: var(--muted); font-size: .9rem; }
.check-list .icon { align-self: center; color: var(--blue); }
.faq-section { background: var(--pale); border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.25rem 3rem; }
details { border-bottom: 1px solid #b8cce1; }
summary { padding: .9rem 0; color: var(--ink); font-weight: 750; line-height: 1.45; cursor: pointer; }
details p { padding: 0 .5rem .85rem 1rem; }

.coverage-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.coverage-copy { padding-top: clamp(.5rem, 2vw, 1.75rem); }
.coverage-map { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--pale); }
.coverage-map-graphic { display: block; width: 100%; height: auto; font-family: inherit; }
.coverage-zone-regular { fill: #7daee2; fill-opacity: .32; }
.coverage-zone-availability { fill: #f7d36d; fill-opacity: .8; }
.coverage-zone-border, .coverage-zone-transition { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.coverage-zone-border { stroke: #52779f; stroke-width: 1.8; }
.coverage-zone-transition { stroke: #8e814a; stroke-width: 1.6; }
.map-context { fill: #4a6065; font-size: 27px; font-weight: 650; paint-order: stroke; stroke: #f5f4eb; stroke-width: 3px; stroke-linejoin: round; }
.map-route rect { fill: #fff9e8; stroke: #a49a7f; }
.map-route text, .map-north { fill: #454c45; font-size: 23px; font-weight: 800; }
.map-place .map-label { fill: #fff; stroke: #9cbadd; stroke-width: 1.5; }
.map-place .map-marker { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.map-place text { fill: var(--ink); font-size: 31px; font-weight: 750; }
.map-place:hover .map-label, .map-place:focus-visible .map-label { fill: #edf5ff; stroke: #2265bd; stroke-width: 3; }
.map-place-confirm .map-marker { fill: #856014; }
.map-place-confirm .map-label { stroke: #c69c3d; }
.coverage-map-caption { display: grid; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid var(--line); }
.coverage-map-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.coverage-map-key { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-size: .85rem; font-weight: 750; }
.coverage-map-key > span { width: 21px; height: 13px; border: 1.5px solid #52779f; border-radius: 3px; background: #c6ddf5; }
.coverage-map-key-confirm > span { border-color: #856014; border-style: solid; background: #fae39b; }
.coverage-map-caption small { color: var(--muted); font-size: .72rem; }
.coverage-map-caption a { text-underline-offset: 2px; }
.coverage-grid h2 + p { margin-block: .75rem; }
.coverage-extra { margin-top: 1.6rem; }
.coverage-extra + p { margin-top: .4rem; }
.area-list { display: grid; gap: .55rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.area-list a { display: flex; align-items: center; gap: .6rem; min-height: 49px; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; font-weight: 750; }
.area-list a:hover { background: var(--pale); text-decoration: underline; }
.area-list a span { flex: 1; }
.area-list .icon { color: var(--blue); }
.area-list-confirm a { border-color: #d8c797; }
.area-list-confirm a:hover { background: #fff8e4; }
.area-list-confirm .icon { color: #856014; }

.contact-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.25rem, 5vw, 4.25rem); align-items: start; }
.contact-grid h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.contact-side { padding: 1.5rem 0; }
.contact-methods { display: grid; gap: .65rem; margin-block: 1.25rem; }
.contact-methods a { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 8px; font-weight: 750; text-decoration: none; overflow-wrap: anywhere; }
.contact-methods a:hover { background: var(--pale); }
.contact-methods .icon, .contact-location .icon { color: var(--blue); }
.contact-methods small { display: block; margin-bottom: .15rem; color: var(--muted); font-weight: 600; }
.contact-location { display: flex; align-items: start; gap: .55rem; }
.contact-location > .icon { margin-top: .28rem; }
.quote-panel { background: #f5f9fe; border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.1rem, 3.4vw, 2.25rem); }
#estimate-form { display: grid; gap: 1rem; margin-top: .65rem; }
.form-intro, .field-note { font-size: .88rem; }
#details-help { margin-top: .3rem; }
#estimate-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#estimate-form legend, #estimate-form label, .estimate-review label { display: block; color: var(--ink); font-size: .92rem; font-weight: 700; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
#estimate-form .choice { display: inline-flex; align-items: center; gap: .42rem; min-height: 44px; padding: .45rem .65rem; border: 1px solid #a8bfd8; border-radius: 7px; background: #fff; cursor: pointer; }
#estimate-form .choice:has(input:checked) { border-color: #376ba9; background: #e1efff; }
.choice input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--blue); }
.form-error { margin-top: .5rem; color: #982d2d; font-size: .88rem; font-weight: 700; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.quote-panel :is(input:not([type="checkbox"], [type="hidden"]), textarea) { display: block; width: 100%; min-height: 46px; margin-top: .4rem; padding: .6rem .65rem; border: 1px solid #9fb9d5; border-radius: 6px; background: #fff; color: var(--ink); font-size: 1rem; font-weight: 450; }
.quote-panel textarea { resize: vertical; }
.quote-panel input::placeholder, .quote-panel textarea::placeholder { color: #53667d; }
.estimate-review { display: grid; gap: .85rem; margin-top: 1rem; }
.text-button { width: fit-content; min-height: 44px; padding: 0; background: transparent; border: 0; color: var(--blue); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.estimate-review button:disabled { opacity: .65; cursor: wait; }

@media (max-width: 980px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-copy h1 { font-size: clamp(2.55rem, 5.65vw, 4.8rem); }
  .about-grid { gap: 2rem; }
  .area-mini { grid-template-columns: .6fr 1fr; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .nav-shell { flex-wrap: wrap; gap: 0 1rem; min-height: 68px; padding-block: .6rem; }
  #primary-nav { width: 100%; flex-direction: column; align-items: stretch; gap: .15rem; padding-block: .65rem .2rem; }
  #primary-nav > a:not(.button) { padding-inline: .25rem; }
  #primary-nav .nav-cta { align-self: start; margin-top: .4rem; }
  .hero-grid, .about-grid, .coverage-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 1.5rem; }
  .hero-copy h1 { font-size: clamp(2.85rem, 9.5vw, 5.3rem); }
  .hero-copy .lead, .hero-copy .actions { margin-top: 1rem; }
  .hero-art { border-radius: 15px; }
  .logo-plate { width: min(57%, 230px); }
  .section-head { align-items: start; flex-direction: column; }
  .band-inner { grid-template-columns: repeat(2, 1fr); }
  .band-inner a { min-height: 51px; }
  .band-inner a:nth-child(3) { border-left: 0; }
  .band-inner a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .service-detail { grid-template-columns: .55fr 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .contact-side { padding: 0; }
}

@media (max-width: 480px) {
  .wrap { width: calc(100% - 32px); }
  .card-grid { gap: .65rem; }
  .card-art { min-height: 97px; }
  .card-art::before { width: 69px; }
  .card-art .icon { width: 39px; height: 39px; }
  .card-copy { padding: .8rem; }
  .card-copy h3 { font-size: 1.08rem; }
  .card-copy p, .card-copy .inline-link { font-size: .82rem; }
  .card-copy .inline-link { overflow-wrap: anywhere; }
  .closing-inner { align-items: start; flex-direction: column; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > div:first-child { grid-column: 1 / -1; }
  .footer-contact { overflow-wrap: anywhere; }
  .service-detail { grid-template-columns: 1fr; }
  .detail-art { min-height: 132px; border-right: 0; border-bottom: 1px solid var(--line); }
  .detail-art::before { width: 103px; }
  .detail-art .icon { width: 60px; height: 60px; }
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 345px) {
  .nav-shell { column-gap: .4rem; }
  .brand { gap: .45rem; }
  .brand img { width: 39px; height: 39px; }
  .brand span { font-size: 1rem; }
  .utility .wrap { gap: .3rem; }
  .utility span, .utility a { font-size: .67rem; }
  .hero-copy h1 { font-size: 2.8rem; }
  .card-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
}

/* Real RynoServe work: responsive photos and service guidance. */
.service-detail { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.service-photo, .owner-photo { margin: 0; position: relative; min-width: 0; overflow: hidden; background: #e5edf5; }
.service-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.service-photo figcaption, .owner-photo figcaption { position: absolute; inset: auto 0 0; padding: 2.5rem 1.25rem 1rem; color: white; background: linear-gradient(transparent, #071c36d9); font-size: .82rem; }
.service-scope { padding: 1rem 0; margin: 0 0 1rem; border-top: 1px solid var(--line); }
.service-scope h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.service-scope p { font-size: .91rem; line-height: 1.65; }
.detail-showcase { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-top: 1px solid var(--line); background: var(--pale); }
.detail-showcase > img { width: 100%; height: 300px; object-fit: cover; object-position: center 57%; }
.detail-showcase > div { align-self: center; padding: clamp(1.25rem, 3.5vw, 2.55rem); }
.detail-showcase h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: .75rem; }
.about-with-photo { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 2rem 3.5rem; }
.owner-photo { border-radius: 14px; }
.owner-photo > img { width: 100%; height: 430px; object-fit: cover; object-position: center 55%; }
.about-with-photo .area-mini { grid-column: 1 / -1; grid-template-columns: .45fr 1fr; }
.about-with-photo .area-mini > img { max-height: 180px; width: 100%; }
@media (max-width: 760px) {
 .service-detail, .detail-showcase, .about-with-photo { grid-template-columns: minmax(0, 1fr); }
 .service-photo { aspect-ratio: 4 / 3; }
 .service-photo > img { height: 100%; }
 .cargo-photo { aspect-ratio: 4 / 3; }
 .detail-showcase > img { height: auto; max-height: 360px; aspect-ratio: 4 / 3; }
 .owner-photo > img { height: clamp(320px, 100vw, 480px); }
 .about-with-photo { gap: 1.5rem; }
 .about-with-photo .area-mini { grid-template-columns: 1fr; }
 .about-with-photo .area-mini > img { height: 120px; object-position: center; }
 .detail-art { min-height: 145px; border-right: 0; border-bottom: 1px solid var(--line); }
 .detail-art .icon { width: 70px; height: 70px; }
}

/* A simpler homepage lead, with real finished work. */
.hero-work { margin: 0; position: relative; overflow: hidden; border-radius: 16px; background: #dbe7ef; }
.hero-work > img { width: 100%; height: 460px; object-fit: cover; object-position: center 46%; }
.hero-work figcaption { position: absolute; inset: auto 0 0; padding: 4rem 1.6rem 1.4rem; background: linear-gradient(transparent, #071c36df); color: #fff; font-size: 1.65rem; letter-spacing: -.025em; }
.hero-work figcaption span { display: block; margin-bottom: .4rem; font-size: .65rem; letter-spacing: .15em; }
.bin-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; min-width: 0; background: #e1eaf2; }
.bin-photos figure { position: relative; margin: 0; overflow: hidden; min-width: 0; }
.bin-photos img { width: 100%; height: 100%; object-fit: cover; }
.bin-photos figcaption { position: absolute; inset: auto 0 0; padding: 3rem .85rem 1rem; background: linear-gradient(transparent, #071c36df); color: white; font-size: .78rem; }
@media(max-width:760px) {
 .hero-work > img { height: 320px; }
 .bin-photos { height: 320px; }
}

.yard-feature { margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: #edf3ef; min-width: 0; }
.yard-feature img { width: 100%; height: auto; }
.yard-feature figcaption { padding: 1.25rem 1.5rem; font-size: 1.25rem; line-height: 1.4; }
.yard-feature figcaption span { display: block; font-size: .65rem; letter-spacing: .12em; margin-bottom: .4rem; }
.yard-results { grid-column: 1 / -1; padding: clamp(1.1rem, 3vw, 2rem); background: var(--pale); border-top: 1px solid var(--line); }
.yard-results-heading { max-width: 65ch; margin-bottom: 1.25rem; }
.yard-results-heading .eyebrow { margin-bottom: .6rem; }
.yard-results-heading h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: .6rem; }
.yard-results-heading p:last-child { font-size: .92rem; }
.yard-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.yard-comparison figure { margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; }
.yard-comparison img { width: 100%; height: auto; }
.yard-comparison figcaption { padding: .8rem 1rem; }
.yard-comparison figcaption span { display: block; font-weight: 450; font-size: .8rem; color: var(--muted); margin-top: .2rem; }
@media(max-width:760px) { .yard-comparison { grid-template-columns: 1fr; } }