/* EK Joinery editorial cohesion layer.
   Loaded after design, refinement and motion styles. The home hero is deliberately
   left alone; this layer gives the routes below it one quiet, glass-and-paper voice. */
:root {
  --cohesion-edge: rgba(239, 235, 217, .24);
  --cohesion-glass: linear-gradient(145deg, rgba(240, 232, 208, .13), rgba(255, 255, 255, .025) 48%, rgba(16, 21, 17, .18));
  --cohesion-surface: rgba(25, 30, 24, .48);
  --cohesion-shadow: 0 16px 42px rgba(0, 0, 0, .18);
  --cohesion-ease: cubic-bezier(.16, 1, .3, 1);
}

/* A centred editorial rhythm for every route after the opening frame. */
.page-intro,
.statement,
.section-heading,
.service-hero,
.split-feature,
.project-details,
.process-top,
.closing { text-align: center; }

.page-intro > .overline,
.statement .overline,
.section-heading .overline,
.service-hero .overline,
.project-details .overline,
.process-top .overline,
.closing .overline { margin-left: auto; margin-right: auto; }

.page-intro h1,
.statement h2,
.section-heading h2,
.service-hero h1,
.project-details h2,
.process-top h1,
.closing h2 { margin-left: auto; margin-right: auto; text-wrap: balance; }

.page-intro .intro-text,
.statement .intro-text,
.service-hero .intro-text,
.project-details .intro-text,
.process-top .intro-text,
.closing p { margin-left: auto; margin-right: auto; }

.page-intro .text-link,
.statement .text-link,
.service-hero .button,
.project-details .button,
.process-top .text-link,
.closing .button { margin-left: auto; margin-right: auto; }

/* New title pair: a calm serif statement followed by one handwritten thought. */
.editorial-title { display: grid; justify-items: center; gap: .08em; text-align: center; }
.editorial-title > .title-main {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(48px, 6vw, 94px);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--chalk);
}
.editorial-title > .title-note {
  display: block;
  color: var(--brass);
  font: clamp(40px, 5.2vw, 78px)/1.04 Caveat, cursive;
  letter-spacing: -.018em;
  transform: rotate(-2deg);
}

/* The same photographic treatment on supplied work and generated advertising. */
.editorial-photo,
.image-wrap,
.sketch-scene,
.crew-image,
.split-feature figure,
.process-top > img,
.process-top > .editorial-photo,
.service-hero > figure {
  position: relative;
  isolation: isolate;
}
.editorial-photo,
.image-wrap,
.sketch-scene,
.crew-image { border: 1px solid rgba(239, 235, 217, .12); box-shadow: var(--cohesion-shadow); }
.split-feature figure,
.process-top > img { overflow: hidden; border-radius: 20px; }
.editorial-photo,
.service-row .editorial-photo { display: block; overflow: hidden; border-radius: 20px; background: var(--panel); }
.editorial-photo img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.editorial-photo::before,
.image-wrap::before,
.sketch-scene::before,
.crew-image::before,
.split-feature figure::before,
.process-top > img::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: radial-gradient(rgba(255, 246, 220, .16) .55px, transparent .65px);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}
.editorial-photo::after,
.image-wrap::after,
.sketch-scene::after,
.crew-image::after,
.split-feature figure::after,
.process-top > img::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(221, 193, 136, .09), transparent 42%, rgba(10, 16, 12, .13));
}
.editorial-photo .photo-notes {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  fill: none;
  stroke: rgba(239, 235, 217, .86);
  stroke-width: 1.25;
}
.editorial-photo .photo-notes text {
  fill: var(--chalk);
  stroke: rgba(20, 25, 19, .66);
  stroke-width: 2.4px;
  paint-order: stroke;
  font: 34px Caveat, cursive;
}
.extension-frame .photo-notes { z-index: 2; }

/* Supplied photographs share one restrained warm grade. Hero imagery is excluded. */
.image-wrap img,
.editorial-photo img,
.sketch-scene img,
.crew-image img,
.split-feature figure img,
.process-top > img {
  filter: saturate(.82) sepia(.035) contrast(1.015) brightness(.965);
}
.split-feature p { margin-left: auto; margin-right: auto; }
.hero .hero-picture img,
.hero .build-lines { filter: none; }

/* Kitchen annotations are the story; controls and duplicate prose stay out of the frame. */
.scene-caption,
.sketch-scene .caption-tag,
.caption-tag { display: none; }
.sketch-scene {
  border-radius: 22px;
  border-color: var(--cohesion-edge);
  box-shadow: var(--cohesion-shadow);
}
.sketch-scene .scene-notes { z-index: 2; }
.scene-link,
.service-story-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 44px;
  margin: 22px auto 0;
  color: var(--chalk);
  border-bottom: 1px solid var(--cohesion-edge);
  font-size: 13px;
  transition: color .2s ease, border-color .2s ease, transform .22s var(--cohesion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .scene-link:hover,
  .service-story-link:hover { color: var(--brass); border-color: var(--brass); transform: translateY(-1px); }
}

/* Reusable translucent call-to-action, with legible text over every photograph. */
.section .button,
.page-intro .button,
.service-hero .button,
.split-feature .button,
.closing .button,
.privacy-text .button,
.form-panel .button {
  position: relative;
  isolation: isolate;
  min-height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(239, 235, 217, .46);
  color: var(--chalk);
  background: var(--cohesion-glass), var(--cohesion-surface);
  -webkit-backdrop-filter: blur(13px) saturate(145%);
  backdrop-filter: blur(13px) saturate(145%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 237, .42), inset 0 -1px 1px rgba(0, 0, 0, .14), 0 9px 28px rgba(0, 0, 0, .18);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .46);
  transition: transform .22s var(--cohesion-ease), box-shadow .18s ease, background-color .18s ease;
}
.section .button::before,
.page-intro .button::before,
.service-hero .button::before,
.split-feature .button::before,
.closing .button::before,
.privacy-text .button::before,
.form-panel .button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(255,255,245,.12), transparent 45%);
}
.form-panel .button:disabled { opacity: .55; cursor: default; box-shadow: none; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .section .button:hover,
  .page-intro .button:hover,
  .service-hero .button:hover,
  .split-feature .button:hover,
  .closing .button:hover,
  .privacy-text .button:hover,
  .form-panel .button:hover:not(:disabled) {
    color: var(--chalk);
    background: linear-gradient(145deg, rgba(255,255,245,.23), rgba(255,255,255,.06) 52%), rgba(25, 30, 24, .54);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 1px rgba(255,255,237,.62), 0 12px 30px rgba(0,0,0,.22);
  }
}

/* Text-light service rail; the image, title and arrow carry the hierarchy. */
.service-list { max-width: 1220px; margin: 0 auto; }
.service-row { grid-template-columns: minmax(160px, .75fr) minmax(0, 1.25fr) 48px; }
.service-row > div { text-align: center; }
.service-row > div p { margin-left: auto; margin-right: auto; }
.service-row .editorial-photo { aspect-ratio: 4 / 3; }
.service-row .editorial-photo img { aspect-ratio: 4 / 3; }
.service-row .card-arrow { transition: transform .22s var(--cohesion-ease), background .18s ease, color .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .service-row:hover .card-arrow { transform: translate(2px, -2px); }
}

/* Project cards become quiet story tiles, retaining native horizontal swipe. */
.section-heading { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.section-heading .meta { max-width: 300px; text-align: center; }
.project-track { padding-top: 4px; scroll-padding-inline: var(--gutter); }
.project-card .image-wrap { border-radius: 18px; }
.project-card .card-bottom { padding: 17px 4px 0; }
.project-card .card-bottom > div { flex: 1; text-align: center; }
.project-card .card-bottom h3 { text-wrap: balance; }
.project-card .card-bottom p { display: none; }
.project-card .story-number { display: none; }
.project-card .story-note { top: auto; right: auto; bottom: 16px; left: 16px; z-index: 3; padding: 5px 10px; border-radius: 999px; background: rgba(24, 29, 23, .56); border: 1px solid rgba(239, 235, 217, .22); backdrop-filter: blur(9px); }
.project-card .card-arrow { flex-shrink: 0; }

/* Centre the people-and-craft caption, keeping the van image prominent. */
.crew-heading { display: block; text-align: center; }
.crew-heading .overline { margin-bottom: 14px; }
.crew-heading h2 { margin-left: auto; margin-right: auto; }
.crew-image figcaption { justify-content: center; text-align: center; }
.crew-image figcaption { position: relative; z-index: 3; }
.crew-image figcaption .handwritten { display: block; }
.crew-caption { display: block; letter-spacing: .06em; text-transform: uppercase; }
.crew-copy { grid-column: 1 / -1; max-width: 680px; margin: 0 auto; text-align: center; }
.crew-copy p { margin-left: auto; margin-right: auto; }
.crew-copy .text-link { margin-left: auto; margin-right: auto; }
.split-feature figure .handwritten { z-index: 3; }

/* Calm centred proof and timeline cards, without turning the form into decoration. */
.proof { text-align: center; }
.proof > div { min-width: 0; }
.proof .number,
.proof .small-number { margin-left: auto; margin-right: auto; }
.proof p { margin-left: auto; margin-right: auto; }
.facts > div { padding: 22px 18px; border: 1px solid rgba(239,235,217,.12); border-radius: 16px; background: var(--cohesion-glass), rgba(25,30,24,.25); box-shadow: inset 0 1px 1px rgba(255,255,237,.12); text-align: center; }
.facts p { display: none; }
.facts h3 { margin: 0; }
.timeline-row { text-align: center; }
.timeline-row > div { margin: 0 auto; }
.timeline-row p { margin-left: auto; margin-right: auto; }

/* A polished footer reads as a studio, with links still easy to scan. */
.site-footer { position: relative; }
.site-footer .footer-intro { text-align: center; }
.site-footer .footer-intro p { max-width: 500px; margin-left: auto; margin-right: auto; }
.site-footer .footer-columns { text-align: center; }
.site-footer .footer-columns nav { align-items: center; }
.site-footer .footer-contact .button { margin-left: auto; margin-right: auto; }

@media (min-width: 761px) {
  .statement { display: block; max-width: 1080px; }
  .statement > div + div { margin-top: 25px; }
  .closing { display: block; max-width: 960px; }
  .closing > div { margin-top: 24px; }
  .process-top { display: grid; }
  .service-hero > div { max-width: 610px; margin-left: auto; margin-right: auto; }
  .service-hero > figure { margin: 0; }
}

@media (max-width: 760px) {
  .editorial-title > .title-main { font-size: clamp(40px, 12.5vw, 62px); }
  .editorial-title > .title-note { font-size: clamp(35px, 11.5vw, 56px); }
  .page-intro,
  .statement,
  .section-heading,
  .service-hero,
  .project-details,
  .process-top,
  .closing { text-align: center; }
  .statement > div + div { margin-top: 24px; }
  .sketch-scene { border-radius: 17px; }
  .editorial-photo,
  .service-row .editorial-photo { border-radius: 15px; }
  .editorial-photo .photo-notes text { font-size: 30px; }
  .service-row { grid-template-columns: clamp(74px, 22vw, 100px) minmax(0, 1fr) 24px; }
  .service-row .editorial-photo,
  .service-row .editorial-photo img { aspect-ratio: 3 / 4; }
  .service-row .card-arrow { width: 28px; }
  .project-card .story-note { bottom: 12px; left: 12px; font-size: 23px; }
  .project-card .card-bottom { padding-top: 13px; }
  .project-card .card-bottom h3 { font-size: 25px; }
  .facts > div { padding: 19px 14px; }
  .timeline-row { display: block; }
  .timeline-num { display: block; margin-bottom: 8px; }
  .crew-image figcaption { text-align: center; }
  .crew-caption { margin-top: 8px; }
  .site-footer .footer-columns nav { align-items: start; text-align: left; }
  .site-footer .footer-contact { text-align: center; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .editorial-photo,
  .facts > div,
  .section .button,
  .page-intro .button,
  .service-hero .button,
  .split-feature .button,
  .closing .button,
  .privacy-text .button,
  .form-panel .button { background: #20271e; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #d6c99f; }
}
@supports not ((backdrop-filter: blur(1px))) {
  .section .button,
  .page-intro .button,
  .service-hero .button,
  .split-feature .button,
  .closing .button,
  .privacy-text .button,
  .form-panel .button { background: #20271e; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-link,
  .service-story-link,
  .section .button,
  .page-intro .button,
  .service-hero .button,
  .split-feature .button,
  .closing .button,
  .privacy-text .button,
  .form-panel .button,
  .service-row .card-arrow { transition: none; transform: none; }
}

.craft-film-section{display:grid;grid-template-columns:1fr 360px;max-width:1040px;align-items:center;gap:80px;text-align:center}.craft-film-section p{font-size:18px;line-height:1.6;color:#bdb7a4}.craft-film{position:relative;margin:0;border-radius:24px;overflow:hidden;isolation:isolate;aspect-ratio:9/16}.craft-film video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.7) sepia(.08) contrast(.965) brightness(.89)}.craft-film::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#19201699,transparent 45%,#d5b87a08);box-shadow:inset 0 0 60px #d5b87a11}.craft-film figcaption{position:absolute;bottom:22px;left:20px;right:20px;z-index:2;display:grid;justify-items:center;gap:18px}.craft-film .handwritten{font:34px Caveat,cursive;text-shadow:0 1px 8px #000}.craft-film button{color:var(--ek-glass-ink);background:var(--ek-glass-light),var(--ek-glass-tint);border:1px solid var(--ek-glass-edge);box-shadow:var(--ek-glass-shadow);backdrop-filter:var(--ek-glass-optics);border-radius:30px;padding:12px 24px;min-height:44px;cursor:pointer}@media(max-width:760px){.craft-film-section{grid-template-columns:1fr;gap:28px}.craft-film{width:min(100%,330px);margin:auto}.craft-film-section p{font-size:16px}}