/* ---------------------------------------------------------------------------
   Umann Painting — shared stylesheet

   Three pages now (landing, quote, about) rather than one long scroll, which
   is what Charles asked for: a small dropdown menu and the form on its own
   page. Shared CSS lives here so the header and footer only get styled once.

   The landing page is deliberately light with a dark footer, which is the
   inverse of the first version. That came from Charles's own mockup and it is
   the better call: photography needs a light page to sit on, and the black
   footer then lands as a full stop rather than more of the same.

   Copper (--copper) is pulled from the swoosh in the Umann logo and is used
   only in the footer rules and the bottom bar. Teal stays the working accent.
   --------------------------------------------------------------------------- */
:root {
  --paper:  #F5F3EF;
  --card:   #FCFBF8;
  --ink:    #1D2A2E;         /* slate, the sibling of the joinery espresso */
  --dark:   #14191B;         /* footer, a shade deeper than the ink */
  --muted:  #6C7479;
  --line:   #E2DFD8;
  --accent: #3F6B63;         /* muted teal-green: paint, not timber */
  --copper: #B5793F;         /* from the logo swoosh, footer only */
  --r: 16px;

  --max: 1080px;
  --narrow: 720px;
  --gut: clamp(20px, 5vw, 44px);

  --s--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --s-0:  clamp(1.02rem, 0.98rem + 0.2vw, 1.1rem);
  --s-1:  clamp(1.16rem, 1.08rem + 0.4vw, 1.4rem);
  --s-2:  clamp(1.75rem, 1.45rem + 1.4vw, 2.4rem);
  --s-3:  clamp(2.9rem, 2.1rem + 3.6vw, 4.6rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--s-0); font-weight: 300; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters more than it looks. Every img carries width/height
   attributes so the browser can reserve space before the file lands, but those
   attributes become a definite height, which beats aspect-ratio entirely and
   stretches the photo to its full intrinsic height. */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
.wrap   { max-width: var(--max);    margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: var(--narrow); margin-inline: auto; padding-inline: var(--gut); }
:where(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.display {
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "opsz" 96;
  font-weight: 300; letter-spacing: -0.03em; line-height: 1.04;
  text-wrap: balance; margin: 0;
}
.eyebrow {
  font-size: var(--s--1); font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 17px 28px; border-radius: 999px; text-decoration: none;
  font-size: var(--s--1); font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: opacity .18s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-dark { background: var(--ink); color: #fff; }
.btn:hover { opacity: .88; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------------- header ----------------
   Logo, then Call, then the menu. The Call pill stays here rather than in a
   floating bar, so it is always one tap away without covering the page.
   The brand and the h1 share the same left edge, which is the alignment
   Charles marked in blue. */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-block: clamp(18px, 4vw, 26px);
}
/* The logo is Charles's own mark with the descriptor reset from HOME
   REFINEMENTS to PAINTING, so the two businesses read as family without this
   site carrying the wrong company name. Sized by width, because the swoosh
   makes the useful height hard to reason about. */
.brand { display: block; text-decoration: none; flex: none; }
.brand img { width: clamp(132px, 36vw, 164px); }
.top-right { display: flex; align-items: center; gap: 10px; }
.call {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: var(--s--1); font-weight: 500; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 999px; padding: 11px 17px;
  background: var(--card);
}
.call svg { width: 15px; height: 15px; }

.menu { position: relative; }
.menu-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
}
.menu-btn svg { width: 24px; height: 24px; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 190px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 40px -22px rgba(29,42,46,.5);
  display: none;
}
.menu-list.open { display: block; }
.menu-list a {
  display: block; text-decoration: none; padding: 11px 14px; border-radius: 9px;
  font-size: var(--s--1); letter-spacing: .04em;
}
.menu-list a:hover { background: var(--paper); }
.menu-list a[aria-current="page"] { color: var(--accent); font-weight: 500; }

/* ---------------- hero ----------------
   The photo runs off the right edge of the screen and dissolves into the page
   on the two edges that would otherwise show a hard line, so the words sit on
   it rather than next to it. No frame, no radius, no visible boundary.

   A cut-out PNG was the first idea and it does not survive contact with real
   photography: white houses against pale sky defeat every background remover,
   and you get a chewed roofline and mush along the ground. A gradient mask
   gets the same seamless result with no silhouette to get wrong. */
.hero { position: relative; overflow: hidden; }
.hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 78%;
  background-image: url("img/hero.jpg");
  background-size: cover; background-position: center;
  /* Both edges that meet the page get faded. The top one matters as much as
     the left: without it the photo starts on a hard horizontal line halfway
     down the screen, which is the exact seam this treatment exists to avoid. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 34%, #000 74%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 34%, #000 74%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 60%, transparent 100%);
          mask-composite: intersect;
}
.hero-inner { position: relative; padding-block: clamp(18px, 5vw, 34px) clamp(40px, 8vw, 64px); }
.hero h1 {
  font-variation-settings: "opsz" 144;
  font-size: var(--s-3); letter-spacing: -0.042em; line-height: .95;
  margin: 0 0 18px; max-width: 8ch;
}
.hero h1 em { font-style: italic; }
/* Deliberately narrow. The copy has to stop before it runs into the busy part
   of the photo, or it stops being readable. */
.hero .sub { max-width: 17ch; font-size: var(--s-1); color: var(--muted); margin: 0 0 26px; text-wrap: pretty; }
@media (min-width: 880px) {
  .hero { min-height: min(46vw, 560px); display: grid; align-items: center; }
  /* A grid item with margin-inline:auto shrinks to fit-content and centres,
     which pulls the copy off the left edge the logo sits on. */
  .hero-inner { width: 100%; }
  .hero-photo { width: 58%; }
  .hero .sub { max-width: 26ch; }
}

/* ---------------- how it works ---------------- */
.how { padding-block: clamp(28px, 6vw, 48px); }
.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
/* Numbered card with the step icon above the label, which is the shape Charles
   liked in his mockup. The number badge sits top-left so the icon stays on the
   card's centre line. */
.steps li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 34px 12px 16px; font-size: var(--s--1); color: var(--muted);
  line-height: 1.35; text-align: center;
}
.steps .n {
  position: absolute; top: 11px; left: 11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: .74rem; font-weight: 600;
}
.steps svg { width: 28px; height: 28px; color: var(--accent); flex: none; }

/* ---------------- work ---------------- */
.work { padding-block: clamp(28px, 6vw, 48px); }
.shots { display: grid; gap: 10px; margin-top: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .shots { grid-template-columns: repeat(3, 1fr); } }
.shot { border-radius: var(--r); overflow: hidden; position: relative; background: var(--card); }
.shot img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.shot p {
  margin: 0; padding: 12px 14px 14px;
  font-size: var(--s--1); color: var(--muted); letter-spacing: .04em;
}

/* ---------------- CTA band ----------------
   This sits where the form used to be on the landing page. Charles's red line
   said the button takes over the form's space, so it gets the same weight the
   form had rather than being tucked into a corner. */
.cta { padding-block: clamp(30px, 6vw, 56px); text-align: center; }
.cta h2 { font-size: var(--s-2); margin: 0 0 10px; }
.cta p { color: var(--muted); margin: 0 0 24px; max-width: 42ch; margin-inline: auto; }
.cta .btn { padding-inline: 40px; }

/* ---------------- form ---------------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field .opt { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--muted); opacity: .75; }
.field > span { font-size: var(--s--1); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--s-0); color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236C7479' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px;
}
.field textarea { min-height: 92px; resize: vertical; }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.two { display: grid; gap: 14px; }
/* Short pairs go side by side even on a phone; long ones stay stacked. */
.two.tight { grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 560px) { .two { grid-template-columns: 1fr 1fr; gap: 18px; } }

/* Chips: tap targets instead of a multi-select, which is unusable on a phone.
   Real checkboxes underneath, so it still works without JS. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; padding: 0; border: 0; margin: 0; }
.chip span {
  display: inline-block; padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-size: var(--s--1); cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.form .btn { width: 100%; margin-top: 4px; }
.form-note { font-size: var(--s--1); color: var(--muted); margin: 0; }
.form-msg { font-size: var(--s--1); margin: 0; min-height: 1.2em; }
.form-msg.err { color: #A3341F; }

.sent { display: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 5vw, 32px); }
.sent.show { display: block; }
.sent h3 { font-family: Fraunces, Georgia, serif; font-variation-settings: "opsz" 60; font-weight: 400; font-size: var(--s-1); margin: 0 0 8px; letter-spacing: -0.015em; }
.sent p { margin: 0 0 18px; color: var(--muted); font-size: var(--s--1); }
.sent .tick { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: var(--s--1); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.sent .tick svg { width: 16px; height: 16px; }

/* ---------------- prose (about) ---------------- */
.prose { padding-block: clamp(10px, 3vw, 20px) clamp(34px, 7vw, 64px); }
.prose h1 { font-size: var(--s-2); margin: 0 0 20px; }
.prose h2 { font-family: Fraunces, Georgia, serif; font-variation-settings: "opsz" 60; font-weight: 400; font-size: var(--s-1); letter-spacing: -0.015em; margin: 34px 0 10px; }
.prose p { margin: 0 0 16px; color: var(--muted); text-wrap: pretty; }
.prose p strong { color: var(--ink); font-weight: 500; }
.prose img { border-radius: var(--r); margin-bottom: 28px; aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.prose .partners { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.prose .partners li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.prose .partners b { display: block; font-family: Fraunces, Georgia, serif; font-variation-settings: "opsz" 60; font-weight: 400; font-size: var(--s-1); letter-spacing: -0.015em; margin-bottom: 2px; }
.prose .partners span { font-size: var(--s--1); color: var(--muted); }

/* ---------------- footer ----------------
   Built to mirror the header rather than to be an event of its own: same paper,
   same thin rule, brand on the left and the details on the right. The header is
   the quietest thing on the page and the footer should be its bookend.

   The colour-blocked band and the dark version both failed for the same reason:
   they made the bottom of the page louder than the top. */
/* The footer supplies its own separation with a border and its internal padding.
   An extra margin-top on top of the preceding section's bottom padding stacked into
   a dead band of nothing above it, which on the short pages (quote, about) reads as
   the page having run out before the footer arrives. */
.foot {
  position: relative; overflow: hidden;
  background: var(--paper);
  border-top: 1px solid var(--line);
  
}
/* The photo is atmosphere here, not a panel. It bleeds off the right and
   dissolves on every edge that meets the page, and it is held well back in
   opacity so the words in front of it stay the thing you read.
   The earlier version failed by being a solid block that competed with the
   header; the fix is not removing the photo, it is holding it back. */
.foot-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 66%;
  background: url("img/footer.jpg") center 45% / cover;
  opacity: .62;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 42%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 42%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 58%, transparent 100%);
          mask-composite: intersect;
}
@media (min-width: 760px) { .foot-photo { width: 52%; } }
.foot-main {
  position: relative;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  padding-block: clamp(30px, 6vw, 46px) clamp(24px, 5vw, 36px);
  display: grid; gap: clamp(26px, 6vw, 40px);
}
@media (min-width: 760px) {
  .foot-main { grid-template-columns: auto 1fr; align-items: start; }
}
.foot-brand img { width: clamp(120px, 32vw, 150px); }
.foot .label {
  font-size: var(--s--1); font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px;
}
/* Stacked, not inline. Inline needs a separator, and a wrapped separator
   starts the next line with an orphan middot. */
.partners-list { list-style: none; margin: 0 0 18px; padding: 0; }
.partners-list li { font-size: var(--s-0); color: var(--ink); line-height: 1.75; }
.foot .tag { margin: 0; color: var(--muted); font-size: var(--s--1); line-height: 1.7; }

.foot-bar { position: relative; border-top: 1px solid var(--line); padding: 15px 0 calc(15px + env(safe-area-inset-bottom)); }
.foot-bar div {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: flex; flex-wrap: wrap; gap: 4px 22px; justify-content: space-between;
  color: var(--muted); font-size: var(--s--1); letter-spacing: .04em;
}
.foot-bar p { margin: 0; }
.foot-bar a { text-decoration: none; color: var(--ink); }
.foot-bar a:hover { text-decoration: underline; }