/* ---------------------------------------------------------------------
   Umann — design notes

   PHONE FIRST, literally. The previous version was a desktop minimal
   layout shrunk down: a serif heading over an unstyled list of hairline
   rules. Typographically fine and, on an actual phone, it read as a
   document rather than an interface (Jacques, 2026-08-20).

   What makes it feel native to a phone:
     - a full-bleed dark hero, so the first screen is a designed surface
       rather than text on paper
     - rounded tiles instead of ruled rows, because a tile reads as
       something you tap and a rule reads as something you read
     - a sticky action bar pinned to the thumb, holding the only two
       things anyone came here to do
     - one corner radius everywhere, which is the visual grammar of every
       app already on the phone

   Still monochrome. The logo carries the only colour, and the copper in
   it is exactly why the page must not repeat that colour anywhere else.
   --------------------------------------------------------------------- */
:root {
  /* Warm, not neutral. The monochrome draft was clean and read cold and
     corporate (Jacques, 2026-08-20), which is the wrong register for someone
     who works in wood. Nothing here is a bright colour: the whole palette is
     simply pulled off the grey axis toward warm.

     The dark is espresso rather than black, the paper is cream rather than
     white, and the rules are sand rather than grey. Softer contrast, and it
     stops the page feeling like a bank. */
  --bone:  #F7F2EA;         /* warm cream paper */
  --card:  #FDFBF6;         /* warm white, sits just above the paper */
  --ink:   #2B241D;         /* espresso, not black */
  --ink-2: #3A3128;
  --muted: #7C7266;         /* warm grey-brown */
  --line:  #E6DCCC;         /* sand */
  --clay:  #A7683D;         /* the copper from Charles's own logo */
  --clay-2:#8E5631;
  --focus: #A7683D;
  --r: 16px;

  --max: 1040px;
  --gut: clamp(20px, 5vw, 48px);

  --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.85rem, 1.5rem + 1.5vw, 2.7rem);
  --s-3:  clamp(2.9rem, 2.1rem + 3.6vw, 5rem);
}

*, *::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(--bone); 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;
  /* Nothing hides behind the sticky bar. */
}

/* height:auto is load-bearing. The width/height attributes on an img become a
   definite height that beats aspect-ratio and any CSS width, so the logo
   renders at its full 472px tall inside a 164px box. */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
:where(a, button):focus-visible { outline: 2px solid var(--focus); 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;
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 17px 26px; 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, background .18s, color .18s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-light { background: #fff; color: var(--ink); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-dark  { background: var(--ink); color: #fff; }
.btn-out   { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-out:hover { background: var(--ink); color: #fff; }
.btn:hover { opacity: .9; }

/* ---------------- hero ----------------
   Photo bleeds off the right and dissolves on the edges that meet the page, with
   the words sitting on it. Same treatment and same shape as the painting site,
   because two sibling businesses should not make you relearn anything.
   (This replaced a flat ink block, which was good colour blocking but carried no
   photography, and Charles wanted the work visible above the fold.) */
.hero { position: relative; overflow: hidden; padding-block: 0; }
.hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 78%;
  background-image: url("img/hero.jpg");
  background-size: cover; background-position: center;
  -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: 9ch;
}
.hero h1 em { font-style: italic; margin-right: .14em; }
/* Narrow on purpose: the copy has to stop before it reaches the busy part of the
   photo or it stops being readable. */
.hero .sub { max-width: 18ch; 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; }
  .hero-inner { width: 100%; }
  .hero-photo { width: 58%; }
  .hero .sub { max-width: 28ch; }
}

/* ---------------- sections ---------------- */
section { padding-block: clamp(38px, 8vw, 88px); }
.eyebrow {
  font-size: var(--s--1); font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--clay); margin: 0 0 14px;
}
h2.display { font-size: var(--s-2); }

/* Tiles, not ruled rows. A tile reads as a thing; a rule reads as a list. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
@media (min-width: 780px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 14px; min-height: 88px;
  display: flex; align-items: flex-end;
  font-family: Fraunces, Georgia, serif; font-variation-settings: "opsz" 40;
  font-size: var(--s-1); font-weight: 300; line-height: 1.2; letter-spacing: -0.015em;
  text-wrap: balance;
}
@media (min-width: 780px) { .tile { padding: 26px 22px; min-height: 132px; } }
.note { margin: 18px 0 0; color: var(--muted); max-width: 52ch; }
.note + .note { margin-top: 10px; }

/* ---------------- charles ---------------- */
.who { border-top: 1px solid var(--line); }
.who-grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 780px) { .who-grid { grid-template-columns: 300px 1fr; gap: 52px; } }
/* Swap the <img> in and delete .ph. An empty considered frame beats a stock
   photo of a man who is not Charles. */
.portrait { aspect-ratio: 16/10; width: 100%; background: #EFE7DA; border-radius: var(--r); overflow: hidden; position: relative; }
@media (min-width: 780px) { .portrait { aspect-ratio: 4/5; } }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.ph { position: absolute; inset: 0; display: grid; place-content: center; color: var(--muted); font-size: var(--s--1); letter-spacing: .1em; text-transform: uppercase; }
.who p { color: var(--muted); max-width: 54ch; margin: 18px 0 0; text-wrap: pretty; }

/* ---------------- quote form ---------------- */
.quote { border-top: 1px solid var(--line); }
.form { display: grid; gap: 12px; margin-top: 22px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.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='%237C7266' 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: 104px; resize: vertical; }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.form .btn { width: 100%; margin-top: 4px; }
.form-note { font-size: var(--s--1); color: var(--muted); margin: 2px 0 0; }
.form-msg { font-size: var(--s--1); margin: 6px 0 0; min-height: 1.2em; }
.form-msg.err { color: #A3341F; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* Shown after the email has actually been sent. WhatsApp then opens from
   its own tap rather than being launched at people mid-submit. */
.sent { display: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 5vw, 32px); margin-top: 26px; max-width: 560px; }
.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 .btn { width: 100%; background: #25D366; color: #fff; }
.sent .tick { display: flex; align-items: center; gap: 8px; color: var(--clay); font-size: var(--s--1); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.sent .tick svg { width: 16px; height: 16px; }

/* ---------------- review ask ---------------- */
.rev { padding-top: 0; }
.rev-card {
  background: linear-gradient(155deg, var(--clay) 0%, var(--clay-2) 100%);
  color: #fff; border-radius: 24px;
  padding: clamp(28px, 6vw, 52px);
  display: grid; gap: 22px; align-items: center;
}
@media (min-width: 780px) { .rev-card { grid-template-columns: 1fr auto; gap: 44px; } }
.rev-card h2 { color: #fff; margin-bottom: 10px; }
.rev-card p { margin: 0; color: rgba(255,255,255,.7); max-width: 46ch; }
.stars { display: flex; gap: 4px; margin-bottom: 16px; }
.stars svg { width: 16px; height: 16px; }
.rev-card .btn { width: 100%; }
@media (min-width: 780px) { .rev-card .btn { width: auto; } }


.sibling { margin: 0 0 22px; color: var(--muted); font-size: var(--s--1); }
.sibling a { color: var(--clay); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--clay) 35%, transparent); padding-bottom: 1px; }
.sibling a:hover { border-bottom-color: var(--clay); }

/* ---------------- sticky action bar ---------------- */


/* ---------------- header ----------------
   Same component, same place, same order as the painting site: logo, then
   Call, then the menu. Two sibling businesses should not make you relearn
   where things are. */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-block: clamp(18px, 4vw, 26px);
}
.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(43,36,29,.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(--bone); }
.menu-list a[aria-current="page"] { color: var(--clay); font-weight: 500; }

/* ---------------- footer ----------------
   Mirrors the header rather than being an event of its own: same paper, one
   thin rule, brand left and details right. */
.foot { background: var(--bone); border-top: 1px solid var(--line); margin-top: clamp(30px, 7vw, 64px); }
.foot-main {
  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; }
.foot .tag { margin: 0 0 14px; color: var(--muted); font-size: var(--s--1); line-height: 1.7; }
.foot .sibling { margin: 0; color: var(--muted); font-size: var(--s--1); }
.foot .sibling a { color: var(--clay); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--clay) 35%, transparent); padding-bottom: 1px; }
.foot-bar { 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; }

/* Page-level spacing for the two inner pages, matching the painting site. */
.prose { padding-block: clamp(10px, 3vw, 20px) clamp(30px, 6vw, 56px); }
.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: 30px 0 10px; }
.prose p { margin: 0 0 14px; color: var(--muted); text-wrap: pretty; }
.prose p strong { color: var(--ink); font-weight: 500; }

/* ---------------- how it works ----------------
   Lives on the landing page, same as the painting site: someone deciding
   whether to enquire wants to know what happens next before they tap. */
.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; } }
.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(--clay); color: #fff; display: grid; place-items: center;
  font-size: .74rem; font-weight: 600;
}
.steps svg { width: 28px; height: 28px; color: var(--clay); flex: none; }

/* ---------------- work photography ----------------
   Category illustration, not a portfolio. Captions say what kind of work it
   is, never "our work", because these are not Charles's jobs. The day he
   sends real photos they replace these one for one. */
.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; 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; }

/* Footer photograph: atmosphere, not a panel. Bleeds right, dissolves on every
   edge that meets the page, held back in opacity so the words stay the thing
   you read. */
.foot { position: relative; overflow: hidden; }
.foot-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 66%;
  background: url("img/footer.jpg") center 45% / cover;
  opacity: .34;
  -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; }
.foot-bar { position: relative; }

/* Landing CTA. The page previously ended on "leave a review", which is aimed at
   past customers, so a first-time visitor's last instruction was one that did not
   apply to them. This puts the ask where the decision actually happens: straight
   after How A Job Runs. */
.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; }