/* ==========================================================================
   Castscape: stylesheet
   Palette drawn from the logo (marbled taupe stone, sage-olive leaves) and
   weathered limestone. Contrast ratios for text pairs are noted on the tokens
   and meet WCAG 2.2 AA.
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL; see /assets/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --limestone: #f4f1ea;   /* page background */
  --stone: #e8e2d7;       /* alternate sections, cards */
  --stone-deep: #ddd5c7;
  --sage-pale: #dde3d3;
  --concrete: #a8a196;    /* decorative rules only (fails as text) */
  --sage: #9caf88;        /* decorative / text on dark only */
  --taupe: #8c7b6b;       /* input borders, icons: 3.6:1 on limestone (UI only) */
  --taupe-text: #6b5d50;  /* secondary text: 5.6:1 on limestone, 4.8:1 on stone */
  --muted: #5a5048;       /* meta text: 7.0:1 on limestone */
  --charcoal: #2f2a25;    /* body text: 12.6:1 on limestone */
  --olive: #4a5a3a;       /* buttons, links: white on olive 7.5:1 */
  --olive-dark: #3a4730;  /* hover, CTA band: 9.9:1 with white */
  --white: #fff;

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --step-3: clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem);
  --step-4: clamp(2.6rem, 1.8rem + 3.6vw, 4.75rem);

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 1.5rem + 2vw, 3rem);
  --space-xl: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  --radius: 10px;
  --radius-l: 18px;
  --arch: 999px 999px var(--radius-l) var(--radius-l);
  --shadow-soft: 0 1px 2px rgb(47 42 37 / 0.06), 0 8px 24px -12px rgb(47 42 37 / 0.25);
  --shadow-lift: 0 2px 4px rgb(47 42 37 / 0.06), 0 18px 40px -18px rgb(47 42 37 / 0.35);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --header-h: 4.75rem;
  --container: 72rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem); /* WCAG 2.4.11: focus not hidden by sticky header */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--limestone);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}
p { margin: 0 0 var(--space-s); text-wrap: pretty; }
address { font-style: normal; }

a { color: var(--olive); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--olive-dark); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sage-pale); color: var(--charcoal); }

.container {
  width: min(100% - 2 * clamp(1rem, 4vw, 2.5rem), var(--container));
  margin-inline: auto;
}
.narrow { max-width: 46rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--olive-dark);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; color: var(--white); }

/* ---------- Shared pieces ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--space-s);
  color: var(--taupe-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.button {
  --btn-bg: var(--olive);
  --btn-fg: var(--white);
  --btn-border: var(--olive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid var(--btn-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 1rem/1.2 var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.button svg { flex: none; transition: transform 0.25s var(--ease); }
.button:hover { --btn-bg: var(--olive-dark); --btn-border: var(--olive-dark); color: var(--btn-fg); text-decoration: none; box-shadow: var(--shadow-soft); }
.button:hover svg { transform: translateX(3px); }
.button:active { transform: translateY(1px); }

.button--ghost { --btn-bg: transparent; --btn-fg: var(--olive); }
.button--ghost:hover { --btn-bg: var(--olive); --btn-fg: var(--white); }

.button--light { --btn-bg: var(--limestone); --btn-fg: var(--olive-dark); --btn-border: var(--limestone); }
.button--light:hover { --btn-bg: var(--white); --btn-fg: var(--olive-dark); --btn-border: var(--white); }
.button--outline-light { --btn-bg: transparent; --btn-fg: var(--limestone); --btn-border: rgb(244 241 234 / 0.6); }
.button--outline-light:hover { --btn-bg: rgb(244 241 234 / 0.12); --btn-fg: var(--white); --btn-border: var(--limestone); }
.button--small { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: 0.95rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.text-link svg { transition: transform 0.25s var(--ease); }
.text-link:hover { text-decoration: none; }
.text-link:hover svg { transform: translateX(3px); }

.arch { margin: 0; border-radius: var(--arch); overflow: hidden; background: var(--stone); }
.arch picture { height: 100%; }
.arch img { width: 100%; height: 100%; object-fit: cover; }

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-l) var(--space-xl); }
.section__head { max-width: 42rem; margin-bottom: var(--space-l); }
.section__title { font-size: var(--step-3); }
.section__intro { color: var(--muted); font-size: var(--step-1); line-height: 1.5; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(244 241 234 / 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgb(244 241 234 / 0.82); backdrop-filter: blur(10px) saturate(1.2); }
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  color: var(--charcoal);
  text-decoration: none;
}
.brand:hover { color: var(--charcoal); text-decoration: none; }
.brand__mark { width: auto; height: 3rem; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}

.site-nav ul {
  display: flex;
  gap: clamp(0.25rem, 1.5vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.4rem;
  color: var(--charcoal);
  font-weight: 600;
  text-decoration: none;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0.4rem; right: 0.4rem; bottom: 0.45rem;
  height: 1.5px;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--olive); }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--olive);
  border-radius: 999px;
  color: var(--olive);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.header-call:hover { background: var(--olive); color: var(--white); text-decoration: none; }

@media (max-width: 47.99em) {
  .header-call { width: 2.75rem; padding: 0; justify-content: center; }
  .header-call__label { display: none; }
}
@media (max-width: 33.99em) {
  :root { --header-h: 7.25rem; }
  .site-header__inner { flex-wrap: wrap; row-gap: 0; padding-top: 0.5rem; }
  .brand__mark { height: 2.5rem; }
  .brand__name { font-size: 1.45rem; }
  .site-nav { order: 3; width: 100%; border-top: 1px solid var(--stone-deep); }
  .site-nav ul { justify-content: space-between; }
  .site-nav a { padding-inline: 0.25rem; }
  .site-nav a::after { left: 0.25rem; right: 0.25rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 1rem + 4vw, 5rem) var(--space-xl);
  background:
    radial-gradient(60rem 40rem at 85% 10%, rgb(221 227 211 / 0.7), transparent 60%),
    radial-gradient(40rem 30rem at 0% 100%, rgb(232 226 215 / 0.8), transparent 70%);
}
.hero__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 64em) {
  .hero__inner { grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
}
.hero__title { font-size: var(--step-4); font-weight: 600; margin-bottom: var(--space-m); }
.hero__title em { display: block; font-style: italic; font-weight: 500; color: var(--olive); }
.hero__lede { max-width: 34rem; color: var(--muted); font-size: var(--step-1); line-height: 1.55; margin-bottom: var(--space-l); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__actions--centred { justify-content: center; }

.hero__media {
  position: relative;
  justify-self: center;
  width: min(100%, 30rem);
  padding: 0 0 2.5rem 2.5rem;
}
.hero__media::before { /* fine stone-coloured arch outline echoing the logo's C */
  content: "";
  position: absolute;
  inset: -1.25rem -1.25rem 1.25rem 1.25rem;
  border: 1px solid var(--concrete);
  border-radius: 999px 999px var(--radius-l) var(--radius-l);
  opacity: 0.7;
}
@media (max-width: 39.99em) {
  .hero__media { padding: 0 0 3.5rem 1.5rem; }
  .hero__media::before { inset: -0.75rem -0.5rem 1rem 0.75rem; }
}
.hero__main { position: relative; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lift); }
.hero__inset {
  position: absolute;
  left: 0; bottom: 0;
  width: 42%;
  margin: 0;
}
.hero__inset picture {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--limestone);
  box-shadow: var(--shadow-soft);
}
.hero__inset img { width: 100%; height: 100%; object-fit: cover; }
.hero__inset figcaption {
  position: relative;
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  background: var(--limestone);
  color: var(--taupe-text);
  font-size: var(--step--1);
  line-height: 1.35;
}

/* ---------- Values strip ---------- */
.values { padding-block: var(--space-l); background: var(--stone); }
.values__list {
  display: grid;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48em) { .values__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); } }
.value { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; }
.value svg { grid-row: span 2; color: var(--olive); margin-top: 0.15rem; }
.value__title { font-size: var(--step-2); margin-bottom: 0.25rem; }
.value p { margin: 0; color: var(--muted); }

/* ---------- Featured work (home) ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* two per row on phones keeps the home page short */
  gap: var(--space-m) var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) { .work-grid { gap: var(--space-l) var(--space-m); } }
@media (min-width: 64em) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-card a { display: block; color: inherit; text-decoration: none; }
.work-card__media {
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--radius) var(--radius);
  overflow: hidden;
  background: var(--stone);
  margin-bottom: var(--space-s);
  box-shadow: var(--shadow-soft);
}
.work-card__media picture, .work-card__media img { width: 100%; height: 100%; }
.work-card__media img { object-fit: cover; transition: transform 0.8s var(--ease); }
.work-card a:hover .work-card__media img { transform: scale(1.04); }
.work-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.15;
}
.work-card a:hover .work-card__title { color: var(--olive); }
@media (max-width: 39.99em) { .work-card__title { font-size: var(--step-1); } }
.work-card__meta { margin: 0.15rem 0 0; color: var(--taupe-text); font-size: var(--step--1); letter-spacing: 0.04em; }
.featured__more { margin: var(--space-l) 0 0; text-align: center; }

/* ---------- Finish (plain vs painted) ---------- */
.finish { background: var(--stone); }
.finish__inner { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 64em) { .finish__inner { grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 6rem); } }
.finish__pair { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-s); }
.finish__fig { position: relative; margin: 0; }
.finish__fig picture {
  aspect-ratio: 1;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.finish__fig img { width: 100%; height: 100%; object-fit: cover; }
.finish__fig--offset { margin-top: var(--space-l); }
.finish__fig figcaption {
  position: absolute;
  left: 0.75rem; bottom: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgb(244 241 234 / 0.94);
  color: var(--charcoal);
  font-size: var(--step--1);
  font-weight: 600;
}
.finish__copy p { color: var(--muted); max-width: 34rem; }

/* ---------- Story ---------- */
.story__inner { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 64em) { .story__inner { grid-template-columns: 1fr 0.85fr; gap: clamp(2rem, 6vw, 6rem); } }
.story__copy p { color: var(--muted); max-width: 36rem; }
.story__media { justify-self: center; width: min(100%, 26rem); }
.story__media .arch { aspect-ratio: 4 / 5; box-shadow: var(--shadow-lift); }

/* ---------- FAQ ---------- */
.faq { background: linear-gradient(var(--limestone), var(--sage-pale) 140%); }
.faq__inner { display: grid; gap: var(--space-l); }
@media (min-width: 64em) { .faq__inner { grid-template-columns: 0.8fr 1.2fr; } .faq .section__head { margin: 0; } }
.faq__list { border-top: 1px solid var(--stone-deep); }
.faq__item { border-bottom: 1px solid var(--stone-deep); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.75rem; height: 0.75rem;
  border-right: 2px solid var(--olive);
  border-bottom: 2px solid var(--olive);
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(15%) rotate(225deg); }
.faq__item summary:hover { color: var(--olive); }
.faq__body { padding-bottom: 1.25rem; color: var(--muted); max-width: 40rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- FAQ extras, About, Visiting ---------- */
.faq__more { margin: var(--space-m) 0 0; }
.faq--page { background: none; }
.faq__group { font-size: var(--step-2); margin: var(--space-l) 0 var(--space-s); }
.faq__group:first-child { margin-top: 0; }
.about__fig { margin: 0; }
.about__caption { margin: 0.75rem 0 0; color: var(--taupe-text); font-size: var(--step--1); text-align: center; }
.about__subhead { margin-top: var(--space-l); font-size: var(--step-2); }
.visiting { background: var(--stone); }
.finish--about .finish__pair { max-width: 30rem; }
@media (max-width: 63.99em) { .finish--about .finish__copy { order: -1; } }
.visiting__inner { max-width: 46rem; }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-m); }

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-xl);
  background: var(--olive-dark);
  color: var(--limestone);
  text-align: center;
}
.cta::before, .cta::after { /* two faint leaf sprigs, decorative */
  content: "";
  position: absolute;
  width: 16rem; height: 16rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%239caf88' stroke-width='1.4'%3E%3Cpath d='M20 110C45 80 60 50 92 14'/%3E%3Cpath d='M40 86c-14-2-22-10-24-22 12 0 21 8 24 22Z'/%3E%3Cpath d='M52 68c2-14 10-22 22-24 0 12-8 21-22 24Z'/%3E%3Cpath d='M60 56c-13-4-19-13-19-25 12 2 19 11 19 25Z'/%3E%3Cpath d='M74 38c3-13 12-20 24-21-1 12-10 20-24 21Z'/%3E%3Cpath d='M30 98c-13 0-22-7-26-18 12-1 22 6 26 18Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
}
.cta::before { left: -3rem; bottom: -4rem; }
.cta::after { right: -3rem; top: -4rem; transform: rotate(180deg); }
.cta__inner { position: relative; max-width: 40rem; }
.cta__title { font-size: var(--step-3); color: var(--white); }
.cta p { color: var(--limestone); font-size: var(--step-1); line-height: 1.5; }
@media (max-width: 47.99em) { .cta::before, .cta::after { opacity: 0.15; } }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: var(--space-m); }
.cta :focus-visible { outline-color: var(--limestone); }
.site-footer :focus-visible { outline-color: var(--charcoal); }

/* ---------- Page intro (inner pages) ---------- */
.page-intro {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--space-m);
  background: radial-gradient(50rem 26rem at 90% 0%, rgb(221 227 211 / 0.7), transparent 65%);
}
.page-intro--centred { text-align: center; padding-block: var(--space-xl); }
.page-intro--centred .container { margin-inline: auto; }
.page-intro--centred .eyebrow::before { display: none; }
.page-intro__title { font-size: var(--step-4); }
.page-intro__lede { max-width: 40rem; color: var(--muted); font-size: var(--step-1); line-height: 1.55; }
.page-intro--centred .page-intro__lede { margin-inline: auto; }

/* ---------- Gallery ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-l);
}
.chip {
  min-height: 2.75rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--taupe);
  border-radius: 999px;
  background: transparent;
  color: var(--charcoal);
  font: 600 0.95rem/1.2 var(--font-body);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover { border-color: var(--olive); color: var(--olive); }
.chip[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: var(--white); }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m) clamp(0.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48em) { .gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72em) { .gallery__grid { grid-template-columns: repeat(4, 1fr); } }
.tile[hidden] { display: none; }
.tile a { display: block; color: inherit; text-decoration: none; border-radius: var(--radius); }
.tile__media {
  display: block;
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--stone);
  box-shadow: var(--shadow-soft);
}
.tile__media picture, .tile__media img { width: 100%; height: 100%; }
.tile__media img { object-fit: cover; transition: transform 0.8s var(--ease), filter 0.4s var(--ease); }
.tile__media::after { /* "view" hint on hover */
  content: "";
  position: absolute;
  right: 0.65rem; bottom: 0.65rem;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: rgb(244 241 234 / 0.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%234a5a3a' stroke-width='2' stroke-linecap='round' d='M10.5 4a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm4.8 11.3L20 20M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") no-repeat center / 1.25rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.tile a:hover .tile__media img, .tile a:focus-visible .tile__media img { transform: scale(1.04); }
.tile a:hover .tile__media::after, .tile a:focus-visible .tile__media::after { opacity: 1; transform: none; }
.tile__caption { display: block; padding-top: 0.65rem; }
.tile__title { display: block; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1.2; }
.tile a:hover .tile__title { color: var(--olive); }
.tile__meta { display: block; color: var(--taupe-text); font-size: var(--step--1); }
.tile__badge { /* e.g. "Personalisation available"; white on olive-dark is 9.9:1 */
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  z-index: 1;
  max-width: calc(100% - 1.2rem);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--olive-dark);
  color: var(--white);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  box-shadow: var(--shadow-soft);
}
.tile__details { display: block; margin-top: 0.15rem; color: var(--charcoal); font-size: var(--step--1); font-weight: 600; }
.gallery__note { margin: var(--space-l) 0 0; color: var(--muted); text-align: center; }

/* ---------- Lightbox ---------- */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(0.75rem, 3vw, 2rem);
  border: 0;
  background: transparent;
  color: var(--limestone);
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgb(26 23 20 / 0.92); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__panel {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 62rem);
}
.lightbox__figure { margin: 0; width: 100%; }
.lightbox__figure picture { width: fit-content; max-width: 100%; margin-inline: auto; }
.lightbox__figure img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  max-height: calc(100dvh - 11rem);
  margin-inline: auto;
  border-radius: var(--radius);
  background: var(--charcoal);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.lightbox__figure img.is-loaded { opacity: 1; }
.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
}
.lightbox__title { display: block; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.1; color: var(--white); }
.lightbox__meta { display: block; color: rgb(244 241 234 / 0.8); font-size: var(--step--1); }
.lightbox__close, .lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid rgb(244 241 234 / 0.35);
  border-radius: 50%;
  background: rgb(26 23 20 / 0.6);
  color: var(--limestone);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--olive); border-color: var(--olive); }
.lightbox :focus-visible { outline-color: var(--limestone); }
.lightbox__close { top: -0.5rem; right: -0.5rem; z-index: 2; }
.lightbox__nav { top: calc(50% - 3rem); }
.lightbox__nav--prev { left: -0.5rem; }
.lightbox__nav--next { right: -0.5rem; }
@media (min-width: 72em) {
  .lightbox__nav--prev { left: -4.5rem; }
  .lightbox__nav--next { right: -4.5rem; }
  .lightbox__close { right: -4.5rem; top: 0; }
}
body:has(.lightbox[open]) { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__panel { animation: lightbox-in 0.35s var(--ease); }
  .lightbox[open]::backdrop { animation: fade-in 0.3s var(--ease); }
}
@keyframes lightbox-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Contact ---------- */
.contact__inner { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 60em) { .contact__inner { grid-template-columns: 0.85fr 1.4fr; gap: clamp(2rem, 5vw, 4rem); } }

.contact-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-l);
  background: var(--stone);
}
@media (min-width: 60em) { .contact-card { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.contact-card__title { font-size: var(--step-2); }
.contact-card__list { margin: 0 0 var(--space-m); padding: 0; list-style: none; }
.contact-card__list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.85rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--stone-deep);
}
.contact-card__list li:first-child { padding-top: 0; }
.contact-card__list svg { color: var(--olive); margin-top: 0.3rem; }
.contact-card__label {
  display: block;
  color: var(--taupe-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-card__list a { font-weight: 600; overflow-wrap: anywhere; }
.contact-card__note { margin: 0; color: var(--muted); font-size: var(--step--1); }

.form {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--stone-deep);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.form__title { font-size: var(--step-2); margin-bottom: 0.25rem; }
.form__hint { color: var(--muted); font-size: var(--step--1); margin-bottom: var(--space-m); }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__row { display: grid; gap: 0 var(--space-m); }
@media (min-width: 36em) { .form__row--split { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.35rem; align-content: start; margin-bottom: var(--space-m); }
/* Side-by-side fields share label, control, hint and error rows (subgrid), so the boxes line up
   even when one label wraps or only one field has a hint. Labels sit on the box they belong to. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 36em) {
    .form__row--split { grid-template-rows: repeat(4, auto); }
    .form__row--split > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .form__row--split > .field > * + * { margin-top: 0.35rem; }
    .form__row--split > .field > label { align-self: end; }
  }
}
.field label { font-weight: 600; line-height: 1.35; }
.field__req { color: var(--olive); }
.field__opt { color: var(--taupe-text); font-weight: 400; font-size: var(--step--1); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--taupe);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
/* Extra clearance so the label above a focused field is not hidden by the sticky header */
.field input, .field select, .field textarea { scroll-margin-top: 3.5rem; }
.field select {
  appearance: none;
  padding-right: 2.5rem;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%234a5a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.8rem center / 1.1rem;
}
.field input::placeholder, .field textarea::placeholder { color: #776b60; opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--olive); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 1px;
  border-color: var(--olive);
}
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid, .field [aria-invalid="true"] {
  border-color: #a3362b;
  box-shadow: inset 0 0 0 1px #a3362b;
}
.field__hint { color: var(--muted); font-size: var(--step--1); }
.field__error { color: #a3362b; font-size: var(--step--1); font-weight: 600; }
.field__error:empty { display: none; }
.form__privacy { color: var(--muted); font-size: var(--step--1); }
.contact-card__sub { display: block; color: var(--muted); font-size: var(--step--1); }
.contact__jump { margin: var(--space-m) 0 0; }
@media (min-width: 60em) { .contact__jump { display: none; } }

/* ---------- Prose (privacy) ---------- */
.prose h2:not(.section__title) { font-size: var(--step-2); margin-top: var(--space-l); }
.prose p { color: var(--charcoal); }
.prose ul { margin: 0 0 var(--space-s); padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--olive); }

/* ---------- Footer ---------- */
.site-footer { background: var(--stone); padding-top: var(--space-xl); color: var(--charcoal); }
.site-footer__grid { display: grid; gap: var(--space-l); }
@media (min-width: 40em) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 0.8fr; } }
.site-footer__brand img { height: 4rem; width: auto; margin-bottom: 0.5rem; }
.site-footer__brand p { color: var(--muted); max-width: 22rem; }
.site-footer__brand .site-footer__name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; color: var(--charcoal); margin-bottom: 0.25rem; }
.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe-text);
  margin-bottom: var(--space-s);
}
.site-footer address { margin-bottom: 0.5rem; }
.site-footer__list { margin: 0; padding: 0; list-style: none; }
.site-footer__list li + li { margin-top: 0.4rem; }
.site-footer__list a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem; color: var(--charcoal); overflow-wrap: anywhere; }
.site-footer__list a:hover { color: var(--olive); }
.site-footer__list svg { color: var(--olive); flex: none; }
.site-footer__base {
  margin-top: var(--space-l);
  padding-block: var(--space-m);
  border-top: 1px solid var(--stone-deep);
  color: var(--muted);
  font-size: var(--step--1);
}
.site-footer__base p { margin: 0; }

/* ==========================================================================
   Motion: restrained, and only when the visitor has not asked to reduce it.
   Without JavaScript, or with reduced motion, everything is visible as normal.
   ========================================================================== */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Hero entrance on first load */
  .hero__copy > * { animation: rise 0.8s var(--ease) both; }
  .hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero__copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero__copy > :nth-child(4) { animation-delay: 0.24s; }
  .hero__main { animation: unveil 1.1s var(--ease) 0.1s both; }
  .hero__main img { animation: settle 1.6s var(--ease) 0.1s both; }
  .hero__inset { animation: rise 0.9s var(--ease) 0.55s both; }
  .hero__media::before { animation: fade-in 1.2s var(--ease) 0.4s both; }

  /* Scroll reveals (class added by main.js) */
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .reveal-ready [data-reveal][data-delay="1"] { transition-delay: 0.09s; }
  .reveal-ready [data-reveal][data-delay="2"] { transition-delay: 0.18s; }
  .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes unveil { from { clip-path: inset(100% 0 0 0 round 999px 999px 18px 18px); } to { clip-path: inset(0 0 0 0 round 999px 999px 18px 18px); } }
@keyframes settle { from { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .cta, .filters, .lightbox, .skip-link { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   v1.1: workshop character
   Stamped labels, square yard frames and a faint cast-concrete grain.
   Arches stay for finished pieces; squared frames and stamps mark the yard.
   ========================================================================== */
:root {
  --ink: var(--olive-dark);  /* stamp ink: 8.8:1 on limestone, 7.7:1 on stone, 6.4:1 on textured stone (darkest pixel) */
  --radius-s: 3px;           /* squared, workshop corners */
  --stamp-border: 1.5px solid currentColor;
  /* Cast-concrete grain: two SVG noise layers (soft mottle + fine pits), data: URI so CSP img-src 'self' data: allows it */
  --texture-concrete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .28 0 0 0 2 -.9'/%3E%3C/filter%3E%3Cfilter id='s' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .23 0 0 0 9 -5.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23m)' opacity='.08'/%3E%3Crect width='240' height='240' filter='url(%23s)' opacity='.18'/%3E%3C/svg%3E");
}

/* ---------- 1. Stamped eyebrow ---------- */
.eyebrow.eyebrow--stamp {
  gap: 0;
  padding: 0.3em 0.75em 0.25em;
  border: var(--stamp-border);
  border-radius: var(--radius-s);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.3;
}
.eyebrow--stamp::before { display: none; }

/* ---------- 2. Proof strip ---------- */
/* Open figures with hairline dividers (Hemanth's option 2), no boxes. */
.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-s);
  max-width: 34rem;
  margin: var(--space-l) 0 0;
  padding: var(--space-m) 0 0;
  border-top: 1px solid var(--stone-deep);
  list-style: none;
}
@media (min-width: 48em) {
  .proof--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: none; }
  .proof--wide .proof__item { padding-inline: clamp(0.75rem, 2vw, 1.75rem); border-left: 1px solid var(--stone-deep); }
  .proof--wide .proof__item:first-child { padding-left: 0; border-left: 0; }
}
.proof__item { color: var(--ink); }
.proof__figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
}
.proof__label {
  display: block;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.35;
}

/* ---------- 3. What we make ---------- */
/* Icons, not numbers, and no rules or link-like weight: this is a summary, not navigation. */
.range__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48em) { .range__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m) var(--space-l); } }
.range__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--charcoal);
  font-size: var(--step-0);
  line-height: 1.25;
}
.range__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--stone);
  color: var(--olive-dark);
}
.range__note { margin: var(--space-l) 0 0; color: var(--muted); max-width: 40rem; }

/* ---------- 4. Who it is for (About) ---------- */
.who__inner { display: grid; gap: var(--space-l); }
@media (min-width: 64em) { .who__inner { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); } }
.who__head .section__title { margin-bottom: 0; }
.who__list { margin: 0 0 var(--space-m); padding: 0; list-style: none; }
.who__list li {
  position: relative;
  padding: 0.9rem 0 0.9rem 2rem;
  border-bottom: 1px solid var(--concrete);
  font-size: var(--step-1);
  line-height: 1.45;
}
.who__list li:first-child { border-top: 1px solid var(--concrete); }
.who__list li::before { /* small solid square, like a punched mark (solid so it never reads as a checkbox) */
  content: "";
  position: absolute;
  left: 0.2rem; top: 1.55rem;
  width: 0.55rem; height: 0.55rem;
  background: var(--ink);
}
.who__note { color: var(--muted); max-width: 38rem; margin: 0; }

/* ---------- 5. Squared frames for yard and process photos ---------- */
.frame { margin: 0; overflow: hidden; border-radius: var(--radius-s); background: var(--stone); }
.frame picture { height: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.story__media .frame { aspect-ratio: 4 / 5; box-shadow: var(--shadow-soft); }
.about__fig--yard { position: relative; padding: 0 0 0 1rem; }
.about__fig--yard::before { /* offset ruled outline, the squared cousin of the hero arch outline */
  content: "";
  position: absolute;
  top: 1rem; right: 1rem; left: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--concrete);
  border-radius: var(--radius-s);
  pointer-events: none;
}
.about__fig--yard .frame { position: relative; }
.about__fig--yard .about__caption { margin-top: 1.75rem; text-align: left; }

/* ---------- 6. Cast-concrete grain on stone bands ---------- */
.values, .who {
  background-color: var(--stone);
  background-image: var(--texture-concrete);
  background-size: 240px 240px;
}
@media (prefers-contrast: more) {
  .values, .who { background-image: none; }
}
@media print {
  .values, .who { background-image: none; }
}

/* ---------- Fix: inline link inside the CTA band (was olive on olive-dark, about 1.3:1) ---------- */
.cta a:not(.button) { color: var(--white); text-decoration-thickness: 1px; }
.cta a:not(.button):hover { color: var(--limestone); text-decoration-thickness: 2px; }

/* ---------- v1.1 review fixes ---------- */
/* Credentials strip sits under both hero columns so the photo stays in the first screen */
.hero__inner > .proof { grid-column: 1 / -1; margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > .proof { animation: rise 0.8s var(--ease) 0.32s both; }
}
.proof__label { overflow-wrap: anywhere; }
.proof__figure { text-wrap: balance; }
/* Badge: overlay on wider tiles, caption line on phones so it never covers the piece */
.tile__badge-text { display: block; margin-top: 0.15rem; color: var(--olive-dark); font-size: var(--step--1); font-weight: 600; }
@media (max-width: 47.99em) { .tile__badge { display: none; } }
@media (min-width: 48em) { .tile__badge-text { display: none; } }
[data-lightbox-count] { white-space: nowrap; }
.faq__more .text-link { min-height: 2.75rem; }

/* ---------- Opening hours (29 October 2026) ---------- */
.hours { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.25rem; margin: 0 0 var(--space-s); }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; }
.hours--card { margin: 0.35rem 0 0; font-size: var(--step--1); gap: 0.2rem 1rem; }
.hours--footer { font-size: var(--step--1); gap: 0.2rem 1rem; }
.hours dd { white-space: nowrap; }
.site-footer__heading--sub { margin-top: var(--space-m); }