/* Hodous Construction — company site. Plain CSS, no build step. Phone first.
   Layout and feel follow the reference the owner chose (hartmanbaldwin.com), written from scratch:
   white header with a pill button, large slideshow, centered serif headings, a plum band, frosted panels over photos, rounded photo mosaics, plum footer.
   Fonts are free open-license files hosted in fonts/ (owner tried Helvetica Neue on 2026-10-12 and preferred these). */
@font-face { font-family: "Work Sans"; src: url(fonts/WorkSans.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(fonts/Fraunces.woff2) format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --ink: #373737;
  --soft: #5b5956;
  --green: #4f6b5f;
  --plum: #5e5256;
  --gold: #c9973f;
  --pale: #f8f8f8;
  --line: #e7e5e2;
  --edge: #e2dfdc;
  --sans: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --pad: 20px;
  --max: 1250px;
  --r: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 16px/1.75 var(--sans); letter-spacing: .02em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--green); line-height: 1.15; letter-spacing: -0.005em; margin: 0; font-size: 30px; text-wrap: balance; }
.body { font-size: 15px; color: #4a4a4a; }
.body a { color: var(--green); font-weight: 500; }
.round { border-radius: var(--r); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }

/* Buttons */
.pill { display: inline-block; padding: 13px 30px; border: 1px solid var(--plum); border-radius: 999px; color: var(--plum); text-decoration: none; font-size: 13px; letter-spacing: .08em; line-height: 1.3; white-space: nowrap; transition: background .2s, color .2s; }
.pill:hover { background: var(--plum); color: #fff; }
.pill.solid { background: var(--plum); color: #fff; }
.pill.solid:hover { background: #473d41; }
.pill.light { border-color: #fff; color: #fff; }
.pill.light:hover { background: #fff; color: var(--plum); }

/* Header */
.top { background: #fff; position: sticky; top: 0; z-index: 30; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.brand img { height: 44px; width: auto; filter: brightness(0); opacity: .8; }
.menu { font: inherit; font-size: 14px; letter-spacing: .08em; background: none; border: 0; padding: 10px 0 10px 16px; color: var(--ink); cursor: pointer; }
.nav { display: none; }
.nav a:not(.pill) { text-decoration: none; font-size: 15px; letter-spacing: .08em; color: #2f2f2f; }
.nav a:not(.pill):hover, .nav a[aria-current="page"] { color: var(--gold); }
.nav.open { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; position: fixed; left: 0; right: 0; top: 76px; bottom: 0; background: #fff; padding: 28px var(--pad); overflow: auto; }
.nav.open a:not(.pill) { font-family: var(--serif); font-size: 28px; letter-spacing: 0; color: var(--green); }

/* Home slideshow */
.slides { position: relative; height: 62vh; min-height: 340px; max-height: 620px; background: #ddd; overflow: hidden; }
.slides > img, .slides > picture { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
.slides picture img { width: 100%; height: 100%; }
.slides img { object-fit: cover; }
.slides > .on { opacity: 1; }

/* Centered opener */
.intro { padding: 52px 0 56px; text-align: center; }
.intro h1, .intro h2 { margin-top: 10px; }
.intro .body { margin: 14px auto 0; max-width: 1140px; }
.intro .pill { margin-top: 26px; }

/* Plum band */
.band { background: var(--plum); color: #fff; padding: 44px 0; }
.band .wrap { display: grid; gap: 26px; }
.band img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.band h2 { color: #fff; }
.band .body { color: #f3eff0; margin-top: 14px; }
.band .who { font-weight: 500; }
.band .pill { margin-top: 24px; }
.band.founder img { aspect-ratio: auto; max-width: 240px; }

/* Image + text */
.split { padding: 56px 0; }
.split .wrap { display: grid; gap: 26px; }
.split img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.split .body { margin-top: 14px; }
.split .pill { margin-top: 24px; }
.split.first { padding-top: 24px; }

/* Photo with a frosted panel over it */
.over { background: #ccc center / cover no-repeat; padding: 44px 14px; }
.panel { max-width: 1120px; margin: 0 auto; padding: 34px 22px 38px; text-align: center; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: var(--r); }
.panel h1 { margin-top: 8px; }
.panel .body { margin: 14px auto 0; max-width: 960px; }
.panel .pill { margin-top: 24px; }

.glance { padding: 8px 0 64px; text-align: center; }
.glance p { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.glance a { font-family: var(--serif); font-size: 19px; letter-spacing: 0; color: var(--gold); text-decoration: none; }
.glance a:hover { text-decoration: underline; }

/* Services / reviews grid */
.services { padding: 52px 0 24px; }
.services .wrap { display: grid; gap: 48px 40px; }
.services img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.services h3 { margin: 18px 0 0; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.25; letter-spacing: 0; color: var(--gold); scroll-margin-top: 100px; }
.services p { margin-top: 10px; font-size: 15px; color: #555; }
.services .who { color: var(--ink); font-weight: 500; }
.services .see { display: inline-block; margin-top: 10px; font-size: 13px; letter-spacing: .08em; color: var(--plum); }
.reviews h3 { margin-top: 0; }
.services article { scroll-margin-top: 100px; }

/* Photo mosaic */
.grid { padding: 12px 0 0; }
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; grid-auto-flow: dense; gap: 10px; }
.mosaic a { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--pale); }
.mosaic a.wide { grid-column: span 2; }
.mosaic a.tall { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mosaic a:hover img { transform: scale(1.03); }
.mosaic span { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 18px 16px; color: #fff; font-size: 13px; letter-spacing: .06em; background: linear-gradient(transparent, rgba(40,32,35,.72)); }
.mosaic strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: 0; line-height: 1.2; }

.about-job { padding: 36px 0 64px; }
.about-job h1 { margin-top: 6px; }
.about-job .pill { margin-top: 24px; }
.next { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.next a { text-decoration: none; }
.next a:hover { color: var(--gold); }

/* Footer */
.foot { background: var(--plum); color: #f3eff0; padding: 52px 0 28px; font-size: 14px; }
.foot .wrap { display: grid; gap: 34px; }
.foot-brand img { height: 54px; width: auto; }
.foot-brand p { margin-top: 18px; max-width: 26em; }
.foot-brand .pill { margin-top: 20px; }
.foot h2 { font-family: var(--sans); color: #fff; font-size: 14px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.foot a:not(.pill) { display: block; text-decoration: none; font-weight: 500; margin-top: 6px; }
.foot a:not(.pill):hover { text-decoration: underline; }
.legal { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 13px; padding-top: 8px; }
.legal a:not(.pill) { margin-top: 0; font-weight: 400; }

.draft { position: fixed; left: 10px; bottom: 10px; z-index: 40; background: rgba(255,255,255,.92); color: #777; font-size: 11px; letter-spacing: 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; pointer-events: none; }

/* Photo viewer */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(255,255,255,.97); display: none; align-items: center; justify-content: center; }
.lb.open { display: flex; }
.lb img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 12px; }
.lb button { position: absolute; background: none; color: var(--plum); border: 0; width: 56px; height: 56px; font: 300 34px/1 var(--sans); cursor: pointer; }
.lb-x { top: 8px; right: 8px; }
.lb-p { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-n { right: 4px; top: 50%; transform: translateY(-50%); }
.lb-c { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--soft); font-size: 13px; }

@media (min-width: 760px) {
  :root { --pad: 40px; }
  h1, h2 { font-size: 38px; }
  .slides { height: calc(100vh - 116px); max-height: 820px; }
  .band .wrap, .split .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .split.flip img { order: 2; }
  .band.founder .wrap { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .band { padding: 56px 0; }
  .split { padding: 80px 0; }
  .over { padding: 72px 40px; }
  .over.head { padding: 26px 40px 60px; }
  .panel { padding: 52px 60px 56px; }
  .services .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 30vw, 390px); gap: 14px; }
  .foot .wrap { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
  .legal { grid-column: 1 / -1; padding-top: 28px; }
}
@media (min-width: 1040px) {
  .top .wrap { min-height: 116px; }
  .brand img { height: 70px; }
  .menu { display: none; }
  .nav { display: flex; align-items: center; gap: 42px; }
  .nav .pill { margin-left: -6px; }
  .intro { padding: 56px 0 64px; }
  .services .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 48px; }
  .services { padding: 72px 0 32px; }
}

/* Home: each section sits on its own photo, which drifts slowly as the page scrolls (site.js moves it) */
.px { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: min(82vh, 760px); padding: 150px 14px 70px; background: #d9d6d2; }
.px + .px { border-top: 6px solid #fff; }
.px-img, .px picture { position: absolute; left: 0; top: -14%; width: 100%; height: 128%; }
.px picture .px-img { top: 0; height: 100%; }
.px-img { object-fit: cover; will-change: transform; }
.px .panel { position: relative; width: 100%; margin: 0; background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 44px rgba(0,0,0,.16); }
.px .who { font-weight: 500; }
.px.hero { min-height: min(calc(100vh - 76px), 900px); min-height: min(calc(100svh - 76px), 900px); align-items: flex-end; padding-top: 230px; padding-bottom: 28px; }
.px .links { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.px .links a { font-family: var(--serif); font-size: 19px; letter-spacing: 0; color: var(--gold); text-decoration: none; }
.px .links a:hover { text-decoration: underline; }
@media (min-width: 760px) {
  .px { padding: 90px 40px; min-height: min(86vh, 860px); }
  .px .panel { max-width: 980px; }
  .px.slim .panel { max-width: 760px; }
  .px.hero { padding-bottom: 54px; }
}
@media (min-width: 1040px) { .px.hero { min-height: min(calc(100vh - 116px), 1000px); } }
.px { scroll-margin-top: 76px; }
@media (min-width: 1040px) { .px { scroll-margin-top: 116px; } }

/* Portfolio pages: name and links above the photos, call button centered below */
.jobhead { padding: 6px 0 14px; }
.jobhead .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 28px; }
.jobhead p { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 14px; }
.jobhead h1 { font-size: clamp(21px, 2.2vw, 26px); }
.jobhead a { text-decoration: none; white-space: nowrap; }
.jobhead a:hover { color: var(--gold); }
.callrow { padding: 44px var(--pad) 64px; text-align: center; }

/* Estimate request: photo and invitation left, form right */
.formrow { padding: 48px 0 56px; scroll-margin-top: 80px; }
.formrow .wrap { display: grid; gap: 34px; }
.formrow img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.formrow h1, .formrow h2 { margin-top: 18px; }
.formrow .body { margin-top: 12px; font-size: 16px; }
.form label { display: block; margin: 22px 0 8px; font-size: 15px; color: var(--ink); }
.form label:first-child { margin-top: 0; }
.form input, .form select { display: block; width: 100%; height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; background: #efeeec; color: var(--ink); font: inherit; font-size: 16px; letter-spacing: .02em; -webkit-appearance: none; appearance: none; }
.form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23373737' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; }
.form input:focus, .form select:focus { outline: none; border-color: var(--plum); background-color: #f6f5f3; }
.form .bad { border-color: #a4473d; }
.form button { margin-top: 28px; background: #fff; font-family: inherit; cursor: pointer; padding: 15px 46px; font-size: 14px; }
.form-note { margin-top: 18px; font-size: 15px; color: var(--ink); }
.form-note a { color: var(--green); font-weight: 500; }
@media (min-width: 760px) {
  .formrow { padding: 60px 0 76px; }
  .formrow .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 84px; align-items: center; }
  .form { padding-top: 22px; }
}

/* Portfolio photos fade in one after another as they come into view (site.js adds .fx, then .in; also used for the Services cards) */
.fx { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.fx.in { opacity: 1; transform: none; }
.fx.still { transform: none; }

/* Portfolio tiles: the name appears centered on frosted glass when the tile is pointed at (as on the reference).
   Touch screens have no pointer to hover with, so there the name sits on a glass strip along the bottom. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mosaic span { inset: 0; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #2f2f2f; font-size: 13px; letter-spacing: .08em; opacity: 0; transition: opacity .35s ease; }
.mosaic strong { font-family: var(--sans); font-weight: 400; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.mosaic a:hover span, .mosaic a:focus-visible span { opacity: 1; }
.mosaic a:hover img { transform: none; }
@media (hover: none) {
  .mosaic span { inset: auto 0 0 0; padding: 10px 12px 11px; opacity: 1; background: rgba(255,255,255,.72); font-size: 11px; }
  .mosaic strong { font-size: 13px; letter-spacing: .06em; }
}
.callrow p { margin-top: 22px; font-size: 14px; }
.callrow p a { text-decoration: none; }
.callrow p a:hover { color: var(--gold); }
.grid { padding-top: 4px; }

/* Services: kitchens, baths and additions lead as three large columns; the other services follow, smaller */
.thirds { padding: 6px 0 20px; }
.thirds .wrap { display: grid; gap: 52px; }
.thirds article { scroll-margin-top: 100px; }
.thirds img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.thirds h2 { margin-top: 22px; font-size: 22px; }
.thirds p { margin-top: 12px; font-size: 16px; color: #4a4a4a; }
.thirds .pill { margin-top: 22px; }
.services.small { padding: 56px 0 24px; }
.services.small .wrap { display: block; }
.services.small h2 { text-align: center; scroll-margin-top: 100px; }
.services.small .cols { margin-top: 30px; display: grid; gap: 36px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services.small img { aspect-ratio: 4 / 3; border-radius: 14px; }
.services.small h3 { margin-top: 12px; font-size: 18px; }
.services.small p { margin-top: 6px; font-size: 13.5px; line-height: 1.65; }
.services.small .see { font-size: 12px; }
@media (min-width: 760px) {
  .thirds .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .services.small .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
  .services.small { padding: 84px 0 32px; }
}
@media (min-width: 1040px) {
  .thirds .wrap { gap: 40px; }
  .thirds h2 { font-size: 26px; }
  .services.small .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 32px; }
}

/* Home, first section: photo gallery that cross-fades and slowly pans (site.js cycles .on / .mv) */
.kb { overflow: hidden; background: #cfcac5; }
.kb > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s ease; will-change: opacity, transform; }
.kb img { width: 100%; height: 100%; object-fit: cover; }
.kb > .on { opacity: 1; }
.kb > .mv { animation: kb-a 10s linear forwards; }
.kb > .mv:nth-child(even) { animation-name: kb-b; }
@keyframes kb-a { from { transform: scale(1.05) translate(-1.6%, 0.6%); } to { transform: scale(1.15) translate(1.6%, -0.8%); } }
@keyframes kb-b { from { transform: scale(1.15) translate(1.6%, -0.6%); } to { transform: scale(1.05) translate(-1.6%, 0.8%); } }
@media (prefers-reduced-motion: reduce) { .kb > .mv { animation: none; } }

/* Home top: a wide photo band under the menu with no words on it; the welcome text sits below on white */
.herogal { position: relative; height: 56vw; max-height: 62vh; min-height: 240px; }
.herogal .kb { position: absolute; inset: 0; }
@media (min-width: 760px) { .herogal { height: 36vw; max-height: 74vh; } }

/* Drop-down menus */
.has-sub svg { width: 11px; height: 8px; margin-left: 9px; vertical-align: middle; }
.sub { display: none; }
.nav.open .has-sub { width: 100%; }
.nav.open .has-sub svg { display: none; }
.nav.open .sub { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 2px 2px; padding-left: 16px; border-left: 1px solid var(--line); }
.nav.open .sub a:not(.pill) { font-family: var(--sans); font-size: 16px; letter-spacing: .06em; text-transform: none; color: #2f2f2f; }
@media (min-width: 1040px) {
  /* An open menu gets one light gray outline that wraps the menu word and its list together, like a tab */
  .has-sub { position: relative; }
  .has-sub > a:not(.pill) { position: relative; z-index: 41; display: inline-block; padding: 5px 12px 5px; margin: 0 -20px; border: 1px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0; }
  .has-sub:hover > a:not(.pill), .has-sub:focus-within > a:not(.pill) { border-color: var(--edge); background: #fff; color: var(--gold); }
  /* the inside corner where the tab meets the list is rounded: a small patch redraws that corner as a curve */
  .has-sub > a:not(.pill)::after { content: ""; position: absolute; right: -12px; bottom: 0; width: 12px; height: 12px; display: none;
    background: radial-gradient(circle at 100% 0, transparent 11px, var(--edge) 11.3px, var(--edge) 12px, #fff 12.3px); }
  .has-sub:hover > a:not(.pill)::after, .has-sub:focus-within > a:not(.pill)::after { display: block; }
  .has-sub .sub { position: absolute; left: -20px; top: 100%; margin-top: -1px; min-width: 250px; padding: 10px 0; background: #fff; border: 1px solid var(--edge); border-radius: 0 12px 12px 12px; box-shadow: 0 18px 30px rgba(0,0,0,.08); z-index: 40; }
  .has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
  .has-sub .sub a:not(.pill) { display: block; padding: 13px 28px; white-space: nowrap; }
}
.sub-label { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a8580; }
.nav.open .sub-label { margin-top: 6px; }
.nav.open .sub a.in { padding-left: 18px; }
@media (min-width: 1040px) {
  .has-sub .sub .sub-label { padding: 16px 28px 6px; margin-top: 6px; border-top: 1px solid var(--line); }
  .has-sub .sub a.in:not(.pill) { padding: 9px 28px 9px 48px; font-size: 14px; }
  .has-sub .sub a.in:last-child { padding-bottom: 14px; }
}

/* Header button: on hover "Schedule a Consultation" scrolls up out of the button and "Call 216-321-8477 -or- Email Us" scrolls in from below */
.sub .or { display: none; }
@media (min-width: 1040px) {
  .has-sub.cta .pill { overflow: hidden; vertical-align: top; }
  .has-sub.cta .pill span { display: block; transition: transform .38s cubic-bezier(.3,.7,.2,1); }
  .has-sub.cta:hover .pill, .has-sub.cta:focus-within .pill { background: #473d41; }
  .has-sub.cta:hover .pill span, .has-sub.cta:focus-within .pill span { transform: translateY(-46px); }
  .has-sub.cta .sub { display: flex; align-items: center; justify-content: center; gap: 7px; left: -6px; right: 0; top: 0; bottom: 0; min-width: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 999px; box-shadow: none; white-space: nowrap; overflow: hidden;
    visibility: hidden; transition: visibility 0s linear .38s; }
  .has-sub.cta .sub > * { transform: translateY(46px); transition: transform .38s cubic-bezier(.3,.7,.2,1); }
  .has-sub.cta:hover .sub, .has-sub.cta:focus-within .sub { display: flex; visibility: visible; transition: visibility 0s; }
  .has-sub.cta:hover .sub > *, .has-sub.cta:focus-within .sub > * { transform: none; }
  .has-sub.cta .sub a:not(.pill) { padding: 12px 0; font-size: 12px; letter-spacing: .04em; color: #fff; }
  .has-sub.cta .sub a:not(.pill):hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
  .has-sub.cta .sub .or { display: inline; font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.6); }
}

/* Phones: photos run edge to edge */
@media (max-width: 759px) {
  .split img, .formrow img, .thirds img { width: calc(100% + 2 * var(--pad)); max-width: none; margin-left: calc(-1 * var(--pad)); border-radius: 0; }
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 42vw; gap: 8px; }
}

/* Phone menu: a list that drops from the header. Rows with an arrow open their own short list; the current page is a gold band */
.menu { position: relative; width: 44px; height: 44px; padding: 0; font-size: 0; }
.menu::before, .menu::after { content: ""; position: absolute; left: 10px; right: 0; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, top .2s ease, box-shadow .2s ease; }
.menu::before { top: 13px; box-shadow: 0 8px 0 var(--ink); }
.menu::after { top: 29px; }
.menu[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); box-shadow: none; }
.menu[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }
@media (max-width: 1039px) {
  .nav.open { gap: 0; align-items: stretch; bottom: auto; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); padding: 4px 0 22px; box-shadow: 0 22px 30px rgba(0,0,0,.10); }
  .nav.open a:not(.pill) { display: block; padding: 17px var(--pad); font-family: var(--sans); font-size: 17px; letter-spacing: .06em; color: #2f2f2f; }
  .nav.open > a[aria-current="page"], .nav.open .has-sub > a[aria-current="page"] { background: var(--gold); color: #fff; }
  .nav.open .has-sub > a:not(.pill) { display: flex; align-items: center; justify-content: space-between; }
  .nav.open .has-sub svg { display: block; width: 15px; height: 10px; margin: 0 4px 0 0; transition: transform .2s ease; }
  .nav.open .has-sub.exp svg { transform: rotate(180deg); }
  .nav.open .sub { display: none; gap: 0; margin: 0; padding: 4px 0 10px; border: 0; background: #f6f5f3; }
  .nav.open .has-sub.exp .sub { display: flex; }
  .nav.open .sub a:not(.pill) { padding: 12px var(--pad) 12px calc(var(--pad) + 16px); font-size: 15px; }
  .nav.open .sub a.in:not(.pill) { padding-left: calc(var(--pad) + 32px); }
  .nav.open .sub-label { margin: 0; padding: 12px var(--pad) 4px calc(var(--pad) + 16px); }
  .nav.open .has-sub.cta { padding: 14px var(--pad) 0; width: auto; }
  .nav.open .has-sub.cta .pill { display: block; width: 100%; margin: 0; text-align: center; }
  .nav.open .has-sub.cta .sub { display: flex; flex-direction: row; justify-content: center; gap: 28px; padding: 14px 0 0; background: none; }
  .nav.open .has-sub.cta .sub a:not(.pill) { padding: 6px 0; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
}

/* Phones: tiles that carry a name (Portfolio and its categories) are a plain two-across grid with the name under the photo */
@media (max-width: 759px) {
  .mosaic:has(span) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 26px 14px; }
  .mosaic:has(span) a, .mosaic:has(span) a.wide, .mosaic:has(span) a.tall { grid-column: auto; grid-row: auto; overflow: visible; background: none; border-radius: 0; text-decoration: none; }
  .mosaic:has(span) img { height: auto; aspect-ratio: 4 / 3; border-radius: var(--r); display: block; }
  .mosaic:has(span) span { position: static; display: block; padding: 10px 2px 0; text-align: left; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; font-size: 12px; letter-spacing: .06em; color: #6b6663; }
  .mosaic:has(span) strong { display: block; font-family: var(--serif); font-size: 18px; letter-spacing: 0; text-transform: none; line-height: 1.25; color: var(--green); }
}

/* Estimate form: a field real visitors never see; anything typed in it marks the entry as spam */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }