/* ==========================================================================
   Anthony Harding Extensions & Alterations
   Palette and type derived directly from the client's logo:
   Didone monogram -> Bodoni Moda display face
   Geometric caption -> Jost for UI
   Gradient dot (#EB493E -> #EE8153) -> site accent
   ========================================================================== */

:root {
  --ink:        #1E1E1E;   /* sampled from the logo artwork */
  --ink-soft:   #5A564F;
  --charcoal:   #1E1E1E;
  --charcoal-2: #2A2A2A;

  --paper:      #FBF9F5;
  --stone:      #F1EDE6;
  --line:       #DDD6C9;

  /* Brand coral, sampled from the logo's gradient dot. The bright tones are
     used for graphics and decoration; anything that must be READ uses
     --coral-text (light backgrounds) or --coral-lite (dark backgrounds),
     both of which clear WCAG AA. */
  --coral:      #EB493E;   /* logo gradient, start — graphics only */
  --coral-lite: #EE8153;   /* logo gradient, end — text on dark, 6.3:1 */
  --coral-text: #C3392F;   /* text/UI on light, 5.1:1 */
  --coral-deep: #A82E25;   /* pressed / hover */

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --ui:      "Jost", "Century Gothic", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.68,.28,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--stone);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--charcoal);
  margin: 0;
  line-height: 1.14;
}
/* even out ragged lines instead of leaving a single word stranded */
h1, h2 { text-wrap: balance; }
p  { text-wrap: pretty; }

.eyebrow {
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--coral-text);
  display: inline-block;
  margin-bottom: 16px;
}

p { line-height: 1.75; color: var(--ink-soft); }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,249,245,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.site-header.scrolled { box-shadow: 0 10px 30px rgba(30,30,30,.07); }

.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 88px;
}

.brand img { height: 58px; width: auto; }

nav.main-nav { display: flex; align-items: center; gap: 34px; }
nav.main-nav a {
  font-family: var(--ui);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
nav.main-nav a:hover, nav.main-nav a.active { color: var(--coral-text); border-color: var(--coral-text); }

.nav-cta {
  background: var(--charcoal); color: var(--paper) !important;
  padding: 11px 22px !important; border-radius: 2px; border-bottom: none !important;
}
.nav-cta:hover { background: var(--coral-text) !important; }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--charcoal); margin: 5px 0; }

.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 120;
  background: var(--charcoal); flex-direction: column;
  padding: 110px 40px; gap: 26px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { color: var(--paper); font-family: var(--display); font-size: 30px; }
.mobile-nav .close-btn {
  position: absolute; top: 28px; right: 30px;
  background: none; border: none; color: var(--paper); font-size: 30px; cursor: pointer;
}

/* ---------- Hero ---------- */

.hero {
  position: relative; min-height: 86vh;
  display: flex; align-items: flex-end;
  background: var(--charcoal); overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  /* unify photography shot across 9 years, several cameras and all weathers */
  filter: saturate(.72) contrast(1.06) brightness(.86);
  transform: scale(1.1);
  animation: kenburns 16s var(--ease) forwards;
}
@keyframes kenburns { from { transform: scale(1.13); } to { transform: scale(1); } }

.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,30,30,.20) 0%, rgba(30,30,30,.52) 55%, rgba(30,30,30,.90) 100%);
}
.hero-content {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: 90px 32px 68px;
}
.hero-content .eyebrow { color: #F0AF95; }
.hero h1 { color: var(--paper); font-size: clamp(36px, 5.5vw, 68px); max-width: 17ch; }
.hero-sub {
  color: rgba(251,249,245,.72); font-family: var(--ui);
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin-top: 20px;
}
.hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

.page-hero { min-height: 48vh; align-items: center; }
.page-hero .hero-content { padding: 64px 32px; }
.page-hero h1 { font-size: clamp(32px, 4.5vw, 54px); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ui);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 2px;
  transition: background .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.btn-primary { background: var(--coral-text); color: #fff; }
.btn-primary:hover { background: var(--coral-deep); transform: translateY(-2px); }
.btn-outline { border: 1.5px solid rgba(251,249,245,.65); color: var(--paper); }
.btn-outline:hover { background: var(--paper); color: var(--charcoal); }
.btn-dark { background: var(--charcoal); color: var(--paper); }
.btn-dark:hover { background: var(--coral-text); }

/* ---------- Sections ---------- */

section { padding: 104px 0; }
section.tight { padding: 68px 0; }
section.paper { background: var(--paper); }
section.dark { background: var(--charcoal); }
section.dark h2, section.dark h3 { color: var(--paper); }
section.dark p { color: rgba(251,249,245,.70); }
/* accents need the lighter coral to stay legible on charcoal */
section.dark .eyebrow, footer .eyebrow { color: var(--coral-lite); }
section.dark .tile-cap .tag { color: var(--coral-lite); }

.section-head { max-width: 660px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(26px, 3vw, 36px); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: start; }
.two-col p { margin: 0 0 18px; }

/* ---------- Rule motif (scale-rule tick marks) ---------- */

.rule {
  height: 12px; border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 26px);
  background-position: bottom; background-repeat: repeat-x; background-size: 100% 7px;
}

/* ---------- Trust badges ---------- */

.badges-strip {
  background: var(--paper);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 34px 0;
}
.badges-strip .wrap { text-align: center; }
.badges-label {
  display: block; font-family: var(--ui); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 22px;
}
.badge-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 4vw, 52px); flex-wrap: wrap;
}
.badge-row img {
  height: 60px; width: auto; flex: 0 0 auto;
  /* print-brochure extracts, so hold them back a touch until higher-res
     versions arrive from the trade bodies */
  filter: saturate(.94);
}
.badge-row img.tall { height: 74px; }
@media (max-width: 620px) {
  .badge-row { gap: 22px; }
  .badge-row img { height: 44px; }
  .badge-row img.tall { height: 56px; }
}

/* ---------- Spec list ---------- */

.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.spec-list li:first-child { border-top: 1px solid var(--line); }
.spec-list .tick { color: var(--coral-text); font-size: 15px; line-height: 1; }
.spec-list strong {
  display: block; font-family: var(--display); font-size: 18px;
  font-weight: 500; color: var(--charcoal); margin-bottom: 5px;
}
.spec-list .desc { color: var(--ink-soft); font-size: 15px; line-height: 1.65; }

/* ---------- Filter bar ---------- */

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-btn {
  font-family: var(--ui); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 11px 22px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: all .18s var(--ease);
}
.filter-btn:hover { border-color: var(--charcoal); color: var(--charcoal); }
.filter-btn.active { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper); }
.filter-count { opacity: .55; margin-left: 6px; }

/* ---------- Masonry gallery ----------
   Photos span 2017-2026 in both orientations, so natural aspect ratios are
   preserved rather than force-cropping tall shots into landscape tiles. */

.masonry { column-count: 3; column-gap: 26px; }

.tile {
  break-inside: avoid;
  margin: 0 0 26px;
  display: block; width: 100%;
  padding: 0; border: none; background: none;
  font: inherit; text-align: left; cursor: pointer;
}

.tile-media {
  position: relative; overflow: hidden;
  background: var(--stone);
}
.tile-media img {
  width: 100%; height: auto;
  filter: saturate(.86) contrast(1.04);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.tile-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(235,73,62,.07), rgba(30,30,30,.16));
  mix-blend-mode: multiply; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.tile:hover .tile-media img { transform: scale(1.05); filter: saturate(1) contrast(1.06); }
.tile:hover .tile-media::after { opacity: .35; }

/* corner marks — a nod to the CAD drawings the firm provides */
.tile-media .corner {
  position: absolute; width: 16px; height: 16px;
  border: 2px solid rgba(251,249,245,.9);
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
.tile-media .c1 { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.tile-media .c2 { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.tile-media .c3 { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.tile-media .c4 { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.tile:hover .corner { opacity: 1; }

.tile-cap { padding: 14px 2px 0; }
.tile-cap .tag {
  font-family: var(--ui); font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--coral-text);
}
.tile-cap h3 { font-size: 18px; margin-top: 6px; }
section.dark .tile-cap h3 { color: var(--paper); }

.tile.is-hidden { display: none; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,20,20,.96);
  display: none; align-items: center; justify-content: center; padding: 48px;
}
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: 1180px; width: 100%; text-align: center; }
.lightbox img {
  max-width: 100%; max-height: 76vh; width: auto; margin: 0 auto;
  box-shadow: 0 40px 110px rgba(0,0,0,.6);
}
.lightbox figcaption {
  margin-top: 20px; font-family: var(--ui);
  font-size: 13px; letter-spacing: .06em; color: rgba(251,249,245,.9);
}
.lightbox figcaption .tag {
  color: var(--coral-lite); text-transform: uppercase;
  letter-spacing: .18em; font-size: 10.5px; margin-right: 12px;
}
.lb-close, .lb-nav {
  position: absolute; background: rgba(251,249,245,.10);
  border: 1px solid rgba(251,249,245,.28); color: var(--paper);
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: rgba(251,249,245,.24); }
.lb-close { top: 26px; right: 30px; width: 44px; height: 44px; font-size: 22px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 20px; }
.lb-prev { left: 30px; }
.lb-next { right: 30px; }
.lb-counter {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--ui); font-size: 12px; letter-spacing: .16em;
  color: rgba(251,249,245,.55);
}

/* ---------- Scroll reveal ---------- */

/* only hide when JS is confirmed running, so content is never lost without it */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; text-align: center; }
.stats .num { font-family: var(--display); font-size: 48px; color: var(--coral-lite); }
.stats .lbl {
  font-family: var(--ui); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(251,249,245,.6); margin-top: 8px;
}

/* ---------- CTA band ---------- */

.cta-band {
  padding: 84px 0; text-align: center;
  background-color: var(--coral-text);          /* fallback + audit anchor */
  background-image: linear-gradient(135deg, var(--coral-text) 0%, #D14435 100%);
}
.cta-band h2 { color: #fff; font-size: clamp(26px,3.5vw,40px); }
.cta-band p { color: rgba(255,255,255,.92); max-width: 520px; margin: 18px auto 32px; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; }
.contact-detail {
  display: grid; grid-template-columns: 118px 1fr; gap: 6px 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.contact-detail dt {
  font-family: var(--ui); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--coral-text); font-weight: 500;
}
.contact-detail dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.contact-detail a:hover { color: var(--coral); }

/* grid items default to min-width:auto, so a long <select> option can force
   the column wider than the viewport — pin them to zero and let them shrink */
.contact-grid > *, .two-col > *, .stats > * { min-width: 0; }

form.enquiry { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
form.enquiry input, form.enquiry select, form.enquiry textarea { min-width: 0; max-width: 100%; }
form.enquiry textarea { resize: vertical; }
form.enquiry label {
  display: block; font-family: var(--ui); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
form.enquiry input, form.enquiry select, form.enquiry textarea {
  width: 100%; padding: 14px; border: 1px solid var(--line);
  background: var(--paper); font-family: var(--body); font-size: 15px;
  color: var(--ink); border-radius: 2px;
}
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus {
  outline: 2px solid var(--coral-text); outline-offset: 1px; border-color: transparent;
}
form.enquiry button { align-self: flex-start; border: none; cursor: pointer; margin-top: 6px; }
.form-note {
  font-size: 13px; color: var(--ink-soft);
  border-left: 3px solid var(--coral); padding-left: 16px; margin-top: 26px;
}

/* ---------- Footer ---------- */

footer.site-footer { background: var(--charcoal); padding: 72px 0 32px; }
footer .foot-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 52px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(251,249,245,.14);
}
footer .brand img { height: 96px; width: auto; }
footer p { color: rgba(251,249,245,.6); font-size: 14.5px; }
footer .foot-col h4 {
  font-family: var(--ui); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(251,249,245,.5);
  margin: 0 0 18px; font-weight: 500;
}
footer .foot-col a, footer .foot-col div {
  display: block; color: rgba(251,249,245,.78); font-size: 14.5px; margin-bottom: 12px;
}
footer .foot-col a:hover { color: var(--coral-lite); }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: 28px; font-size: 12.5px; color: rgba(251,249,245,.4);
}

/* ---------- Accessibility ---------- */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--coral-text); outline-offset: 3px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--charcoal); color: var(--paper); padding: 12px 20px;
  font-family: var(--ui); font-size: 13px;
}
.skip-link:focus { left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .hero-bg { transform: scale(1); }
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  nav.main-nav { display: none; }
  .menu-toggle { display: block; }
  .two-col, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .masonry { column-count: 2; }
  .stats { grid-template-columns: repeat(2,1fr); gap: 36px; }
  footer .foot-grid { grid-template-columns: 1fr; gap: 34px; }
  section { padding: 76px 0; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 20px; }
  .masonry { column-count: 1; }
  .site-header .wrap { height: 74px; }
  .brand img { height: 46px; }
  .lightbox { padding: 16px; }
  .lb-nav { width: 40px; height: 40px; }
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
  .lb-close { top: 12px; right: 12px; }
  .contact-detail { grid-template-columns: 1fr; gap: 4px; }
  section { padding: 60px 0; }
  .hero-content { padding: 70px 20px 52px; }
}