/* Components */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 50px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn--light { background: var(--color-on-dark); color: var(--color-dark); }
.btn--light:hover { background: var(--color-accent); }
.btn--ghost { border-color: var(--on-dark-line, rgba(241, 238, 232, .4)); color: var(--color-on-dark); }
.btn--ghost:hover { border-color: var(--color-on-dark); }
.btn--dark { background: var(--color-dark); color: var(--color-on-dark); }
.btn--dark:hover { background: var(--color-accent-strong); }
.btn--outline { border-color: var(--color-text); color: var(--color-text); }
.btn--outline:hover { background: var(--color-text); color: var(--color-bg); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
}
.text-link::after { content: ""; width: 22px; height: 1px; background: currentColor; transition: width var(--dur) var(--ease); }
.text-link:hover::after { width: 36px; }

/* Header: transparent over the film, solid once scrolled */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  color: var(--color-on-dark);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-solid { background: var(--color-dark); border-bottom-color: var(--color-on-dark-line); }
.header__inner { display: flex; align-items: center; gap: var(--space-7); height: var(--header); }
.brand { display: flex; align-items: center; gap: var(--space-3); margin-right: auto; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.brand span { font-size: .9375rem; font-weight: 600; letter-spacing: .22em; line-height: 1.1; text-transform: uppercase; }
.brand small { display: block; color: var(--color-on-dark-muted); font-size: .5625rem; letter-spacing: .26em; }
.nav { display: flex; gap: var(--space-6); }
.nav a { color: var(--color-on-dark-muted); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.nav a:hover { color: var(--color-on-dark); }
.header__call { display: inline-flex; align-items: center; gap: var(--space-3); padding-left: var(--space-6); border-left: 1px solid var(--color-on-dark-line); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none; }
.header__call::after { content: ""; width: 6px; height: 6px; background: var(--color-accent); }

/* Hero: an open dig with the logo in see-through white, fading down into the page */
.hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; color: var(--color-on-dark); background: var(--color-dark); overflow: hidden; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 20, 23, .8) 0%, rgba(18, 20, 23, .55) 40%, rgba(18, 20, 23, .08) 72%, transparent 100%),
    linear-gradient(180deg, rgba(18, 20, 23, .3) 0%, transparent 22%);
}
/* Soft landing: the photo melts into the bone page instead of stopping on a hard edge */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--fade);
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--color-bg) 12%, transparent) 22%,
    color-mix(in oklab, var(--color-bg) 45%, transparent) 50%,
    color-mix(in oklab, var(--color-bg) 85%, transparent) 78%,
    var(--color-bg) 100%);
  pointer-events: none;
}
.hero__mark {
  position: absolute;
  top: calc(var(--header) + var(--space-3));
  right: clamp(24px, 6vw, 110px);
  width: min(30vw, 470px);
  height: auto;
  opacity: .6;
  animation: mark-in var(--dur-slow) var(--ease) 150ms both;
  pointer-events: none;
}
@keyframes mark-in { from { opacity: 0; transform: scale(.96); } }
.hero__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header) + var(--space-8)); padding-bottom: calc(var(--fade) * .8); }
.hero__label { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); color: var(--color-on-dark); }
.hero__label::before { content: ""; width: 7px; height: 7px; background: var(--color-accent); }
.hero__label i { width: 36px; height: 1px; background: var(--color-on-dark-muted); }
.hero__label span { white-space: nowrap; }
.hero__title { max-width: 10.5em; color: var(--color-logo-bright); font-family: var(--font-block); font-size: var(--fs-block); font-stretch: 125%; font-weight: 800; line-height: .98; letter-spacing: -.01em; text-transform: uppercase; }
.hero__lede { max-width: 46ch; margin-top: var(--space-6); color: var(--color-on-dark-muted); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }
.hero__caption { position: relative; z-index: 1; padding-bottom: var(--space-5); color: var(--color-muted); }

/* Soft blend from the light page into a dark section, so colour changes feel like dusk, not a wall */
.blend-dark { position: relative; padding-top: calc(var(--fade) + var(--space-8)); }
.blend-dark::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--fade);
  background: linear-gradient(180deg,
    var(--blend-from, var(--color-bg)) 0%,
    color-mix(in oklab, var(--color-dark) 12%, var(--blend-from, var(--color-bg))) 22%,
    color-mix(in oklab, var(--color-dark) 50%, var(--blend-from, var(--color-bg))) 50%,
    color-mix(in oklab, var(--color-dark) 88%, var(--blend-from, var(--color-bg))) 78%,
    var(--color-dark) 100%);
  pointer-events: none;
}
.blend-dark > * { position: relative; }

/* Section numbering (the sections run in order, so the numbers are real) */
.section-num { display: flex; align-items: center; gap: var(--space-3); color: var(--color-muted); }
.section-num b { color: var(--color-text); font-weight: 600; }
.section-num--dark { color: var(--color-on-dark-muted); }
.section-num--dark b { color: var(--color-on-dark); }

/* 2. Who we are */
.about { padding-block: var(--space-10); }
.about .grid { row-gap: var(--space-7); }
.about__num { grid-column: 1 / -1; }
.about__main { grid-column: 1 / span 7; }
.about__title { font-size: var(--fs-h1); max-width: 14ch; }
.about__title em { font-style: italic; color: var(--color-muted); }
.about__figure { width: min(100%, 560px); margin-top: var(--space-8); }
.about__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.about__figure figcaption { margin-top: var(--space-3); color: var(--color-muted); }
.about__side { grid-column: 8 / -1; align-self: end; display: grid; gap: var(--space-5); padding-bottom: var(--space-8); }
.about__lead { font-size: var(--fs-h3); font-family: var(--font-display); line-height: 1.3; }
.about__side p:not(.about__lead) { color: var(--color-muted); }

/* 3. Services: editorial strip */
.services { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 45%); padding-block: var(--space-8) var(--space-9); }
.services__head { row-gap: var(--space-4); margin-bottom: var(--space-8); }
.services__head .section-num { grid-column: 1 / span 4; }
.services__title { grid-column: 5 / -1; font-size: var(--fs-h2); }
.services__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-text); }
.services__list li { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-7); border-left: 1px solid var(--color-line); }
.services__list li:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.services__list li:nth-child(n + 4) { border-top: 1px solid var(--color-line); }
.services__list h3 { font-size: var(--fs-h3); }
.services__list .label { color: var(--color-accent-strong); }
.services__list p:last-child { color: var(--color-muted); font-size: var(--fs-small); }

/* 4. Work: dark band */
.work { --blend-from: var(--color-surface); background: var(--color-dark); color: var(--color-on-dark); padding-bottom: var(--space-9); }
.work__head { row-gap: var(--space-5); margin-bottom: var(--space-8); align-items: end; }
.work__head .section-num { grid-column: 1 / -1; }
.work__title { grid-column: 1 / span 7; font-size: var(--fs-h1); }
.work__title em { font-style: italic; color: var(--color-accent); }
.work__intro { grid-column: 9 / -1; color: var(--color-on-dark-muted); font-size: var(--fs-small); }
.work__panels { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-5); align-items: end; }

/* Before / after comparison */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-8); }
.compare__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; user-select: none; touch-action: pan-y; background-size: cover; background-position: center; }
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__img--after { clip-path: inset(0 0 0 var(--pos)); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--color-on-dark); pointer-events: none; }
.compare__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-on-dark);
  box-shadow: 0 0 0 4px rgba(18, 20, 23, .25);
}
.compare__handle::before { content: "‹ ›"; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -54%); color: #121417; font-size: 18px; font-weight: 600; letter-spacing: 4px; white-space: nowrap; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare__range:focus-visible + .compare__handle, .compare__frame:focus-within .compare__handle { background: var(--color-accent); }
.compare__tag { position: absolute; top: var(--space-4); padding: var(--space-1) var(--space-3); background: rgba(18, 20, 23, .72); color: var(--color-on-dark); pointer-events: none; }
.compare__tag--before { left: var(--space-4); }
.compare__tag--after { right: var(--space-4); }
.compare figcaption { display: grid; gap: var(--space-2); padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--color-on-dark-line); color: var(--color-on-dark-muted); font-size: var(--fs-small); }
.compare figcaption .label { color: var(--color-on-dark); }

/* 5. Reviews (reserved) */
.reviews { background: var(--color-dark); color: var(--color-on-dark); padding-block: var(--space-8) var(--space-9); }
.reviews .grid { row-gap: var(--space-5); }
.reviews__num { grid-column: 1 / -1; }
.reviews__title { grid-column: 1 / span 4; align-self: start; font-size: var(--fs-h2); }
.review { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--color-on-dark-line); background: var(--color-dark-2); }
.review:nth-of-type(1) { grid-column: 5 / span 4; }
.review:nth-of-type(2) { grid-column: 9 / span 4; }
.review__stars { color: var(--color-accent); font-size: 1rem; letter-spacing: .2em; }
.review blockquote { margin: 0; display: grid; gap: var(--space-4); flex: 1; }
.review__head { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; color: var(--color-on-dark); }
.review blockquote p:not(.review__head) { color: var(--color-on-dark-muted); font-size: var(--fs-small); }
.review figcaption { color: var(--color-on-dark-muted); }

/* 6. Get a quote: call + enquiry form */
.contact { background: var(--color-dark); color: var(--color-on-dark); padding-block: var(--space-9) var(--space-10); }
.contact .grid { row-gap: var(--space-7); align-items: start; }
.contact__num { grid-column: 1 / -1; }
.contact__lead { grid-column: 1 / span 5; display: grid; justify-items: start; gap: var(--space-5); }
.contact__title { font-size: var(--fs-display); line-height: .98; }
.contact__title em { font-style: italic; color: var(--color-accent); }
.contact__lead p { color: var(--color-on-dark-muted); }
.contact__number { font-family: var(--font-display); font-size: var(--fs-h2); text-decoration: none; font-variant-numeric: lining-nums; transition: color var(--dur-fast) var(--ease); }
.contact__number:hover { color: var(--color-accent); }
.contact__email { margin-top: calc(var(--space-3) * -1); color: var(--color-on-dark-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.contact__email:hover { color: var(--color-accent); }

.enquiry { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding: var(--space-7); border: 1px solid var(--color-on-dark-line); background: var(--color-dark-2); }
.enquiry__title { grid-column: 1 / -1; font-size: var(--fs-h3); }
.enquiry__trap { position: absolute; left: -9999px; }
.field { display: grid; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.field label { color: var(--color-on-dark-muted); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--color-on-dark-line);
  border-radius: 0;
  background: transparent;
  color: var(--color-on-dark);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-position: right 6px center, right 0 center; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { color: #121417; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--color-on-dark-muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--color-accent); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: 0 2px 0 var(--color-accent); }
.field input::placeholder, .field textarea::placeholder { color: rgba(241, 238, 232, .38); }
.field .is-invalid { border-bottom-color: #F08A7A; }
.enquiry__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.enquiry button:disabled { opacity: .55; cursor: progress; }
.enquiry__status { color: var(--color-on-dark-muted); font-size: var(--fs-small); }
.enquiry__status.is-error { color: #F08A7A; }
.enquiry__status.is-ok { color: var(--color-accent); }

.footer { background: var(--color-dark); color: var(--color-on-dark-muted); border-top: 1px solid var(--color-on-dark-line); padding-block: var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-small); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.footer .brand { margin-right: 0; color: var(--color-on-dark); }
.footer a { color: var(--color-on-dark); text-decoration: none; }
.footer .nowrap { white-space: nowrap; }

/* Floating call button (phones) */
.callbar { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 30; display: none; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.callbar.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 960px) {
  .nav { display: none; }
  .about__main, .about__side, .services__head .section-num, .services__title,
  .work__title, .work__intro, .reviews__title, .review:nth-of-type(1), .review:nth-of-type(2),
  .contact__lead, .enquiry { grid-column: 1 / -1; }
  .compare-grid { grid-template-columns: 1fr; }
  .services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services__list li, .services__list li:nth-child(3n + 1) { padding-left: var(--space-5); border-left: 1px solid var(--color-line); }
  .services__list li:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .services__list li:nth-child(n + 3) { border-top: 1px solid var(--color-line); }
  .work__panels { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --header: 72px; }
  .brand small, .header__call span, .hide-sm { display: none; }
  .header__call { padding-left: var(--space-4); }
  .hero__shade { background: linear-gradient(180deg, rgba(18, 20, 23, .45) 0%, rgba(18, 20, 23, .72) 45%, rgba(18, 20, 23, .8) 100%); }
  .hero__photo { object-position: 74% 0%; }
  .hero__mark { top: calc(var(--header) + var(--space-5)); right: 50%; width: 54vw; opacity: .45; transform: translateX(50%); animation-name: mark-in-sm; }
  @keyframes mark-in-sm { from { opacity: 0; transform: translateX(50%) scale(.96); } }
  .hero__inner { justify-content: flex-end; padding-top: calc(var(--header) + var(--space-5) + 58vw + var(--space-6)); padding-bottom: calc(var(--fade) * .55); }
  .callbar { display: inline-flex; }
  .services__list { grid-template-columns: 1fr; }
  .services__list li, .services__list li:nth-child(n) { padding: var(--space-5) 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--color-line); }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .enquiry { grid-template-columns: 1fr; padding: var(--space-5); }
}