/* =========================================================
   HERITAGE — traditional and restrained.
   Dark navy, brass accent, serif headings.

   TO CHANGE THE LOOK, EDIT THE VALUES BELOW.
   Everything on the site uses these, so changing one value
   here changes it everywhere.
   ========================================================= */

:root {
  /* Colours */
  --ink:        #1b1b1b;   /* main text */
  --ink-soft:   #4a4a4a;   /* less important text */
  --paper:      #faf8f5;   /* page background */
  --paper-alt:  #f1ece4;   /* alternating section background */
  --deep:       #16202e;   /* dark navy — header, hero, footer */
  --deep-text:  #ece7df;   /* text on the dark navy */
  --accent:     #a9762c;   /* brass — buttons and links */
  --accent-dark:#8a5f22;   /* brass, darker, for hover */
  --line:       #ddd5c8;   /* borders */

  /* Type */
  --font-head: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --gap: 1.25rem;
  --section-space: 4.5rem;
  --radius: 3px;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;   /* ~17px — bigger than feels necessary is correct */
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; }

a { color: var(--accent-dark); }

.link { text-decoration: underline; text-underline-offset: 2px; }
.link:hover { color: var(--accent); }

.muted { color: var(--ink-soft); font-size: 0.9rem; }
.center { text-align: center; }

/* Visible focus for keyboard users — do not remove. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--deep);
  color: var(--deep-text);
  padding: 0.75rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 100; }

.wrap {
  width: min(1100px, 92%);
  margin-inline: auto;
}
.wrap.narrow { width: min(720px, 92%); }

/* ---------- header ---------- */

.site-header {
  background: var(--deep);
  color: var(--deep-text);
  padding: 1rem 0;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  justify-content: space-between;
}

.brand { text-decoration: none; color: var(--deep-text); display: block; }
.brand-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
.brand-sub {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b9ae9c;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.site-header nav a {
  color: var(--deep-text);
  text-decoration: none;
  font-size: 0.95rem;
}
.site-header nav a:hover { color: #d9ab61; text-decoration: underline; }

/* Phone stays visible everywhere — people should never have to hunt for it. */
.header-phone {
  color: #e2c48d;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.header-phone:hover { text-decoration: underline; }

/* ---------- hero ---------- */

.hero {
  background: var(--deep);
  color: var(--deep-text);
  padding: clamp(3rem, 9vw, 6rem) 0 clamp(3.5rem, 9vw, 6.5rem);
  border-bottom: 4px solid var(--accent);
}
.hero h1 { max-width: 18ch; }
.lede {
  font-size: 1.15rem;
  max-width: 55ch;
  color: #d8d1c6;
}
.hero-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: #a89c88;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: #17130c;
}
.btn-primary:hover { background: #c08b3c; }
.btn-secondary {
  border-color: #7d8899;
  color: var(--deep-text);
  background: transparent;
}
.btn-secondary:hover { border-color: var(--accent); color: #e2c48d; }

/* ---------- sections ---------- */

.section { padding: var(--section-space) 0; }
.section-alt { background: var(--paper-alt); }

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 { color: var(--deep); }
.card p { margin: 0; color: var(--ink-soft); }

.quote {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.quote p { font-style: italic; }
.quote cite { font-style: normal; font-weight: 600; font-size: 0.95rem; }

.faq dt {
  font-weight: 700;
  margin-top: 1.5rem;
  font-family: var(--font-head);
  font-size: 1.1rem;
}
.faq dd { margin: 0.35rem 0 0; color: var(--ink-soft); }

/* ---------- form ---------- */

.form { margin-top: 1.5rem; }

.field { margin-bottom: 1.1rem; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
}
.optional { font-weight: 400; color: var(--ink-soft); }

input, textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  font-size: 1rem;          /* 16px minimum stops phones zooming on focus */
  border: 1px solid #b9ae9c;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
textarea { resize: vertical; }

.form-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--deep);
  color: #b9ae9c;
  padding: 2.5rem 0;
  margin-top: var(--section-space);
  font-size: 0.95rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: space-between;
}
.site-footer p { margin: 0 0 0.35rem; }
.footer-name {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--deep-text);
}
.site-footer .link { color: #d9ab61; }

/* =========================================================
   ADDITIONS
   ========================================================= */

/* ---------- piano-key motif (decorative) ----------
   A thin abstract keyboard strip. Delete the .keys div in
   index.html to remove it. */
.keys {
  height: 10px;
  background:
    repeating-linear-gradient(90deg,
      var(--deep) 0 3px,
      transparent 3px 22px);
  background-color: var(--accent);
  opacity: 0.85;
}

/* ---------- trust strip ---------- */
.trust {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
}
.trust-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  justify-content: center;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.trust-item strong { color: var(--deep); font-family: var(--font-head); }

/* ---------- sticky call bar (phones only) ---------- */
.callbar { display: none; }

@media (max-width: 720px) {
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    border-top: 1px solid rgba(0,0,0,0.15);
  }
  .callbar a {
    padding: 0.95rem 0.5rem;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
  }
  .callbar-call { background: var(--accent); color: #17130c; }
  .callbar-book { background: var(--deep); color: var(--deep-text); }
  /* Keep the footer clear of the fixed bar. */
  body { padding-bottom: 3.5rem; }
}

/* ---------- scroll reveal ----------
   Sections are visible by default. The animation only applies
   when JavaScript has run AND the visitor has not asked for
   reduced motion. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- work gallery ---------- */
.gallery {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1.5rem;
}
@media (min-width: 860px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.shot { margin: 0; }
.shot-ph {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.85rem;
  background: var(--paper-alt);
}
/* When a real photo replaces the placeholder, this keeps it tidy. */
.shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}