/* ================================================================
   CCK CONSULTANCY — BESPOKE DESIGN SYSTEM
   Direction 02 / implementation layer for Divi 5-native modules.
   No legacy Divi shortcodes are introduced by this child theme.
   ================================================================ */

:root {
  --cck-ink: #1d1d1a;
  --cck-paper: #f3f0e9;
  --cck-paper-2: #ebe6dc;
  --cck-stone: #cfc7ba;
  --cck-stone-dark: #b9afa1;
  --cck-muted: #726d64;
  --cck-deep: #282721;
  --cck-accent: #9a684a;
  --cck-white: #fbfaf7;
  --cck-max: 1380px;
  --cck-serif: Georgia, 'Times New Roman', serif;
  --cck-sans: Arial, Helvetica, sans-serif;
  --cck-rule: 1px solid rgba(29, 29, 26, .16);
  --cck-space-xl: clamp(88px, 8vw, 132px);
  --cck-space-lg: clamp(64px, 6vw, 104px);
  --cck-space-md: clamp(38px, 4vw, 64px);
}

/* ---------- Global ---------- */
.cck-bespoke-site {
  background: var(--cck-paper);
  color: var(--cck-ink);
  font-family: var(--cck-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cck-bespoke-site #page-container,
.cck-bespoke-site #main-content {
  background: var(--cck-paper);
}

.cck-bespoke-site h1,
.cck-bespoke-site h2,
.cck-bespoke-site h3,
.cck-bespoke-site h4 {
  color: var(--cck-ink);
  font-family: var(--cck-serif);
  font-weight: 400;
  letter-spacing: -.03em;
}

.cck-bespoke-site p,
.cck-bespoke-site li {
  color: #504d47;
  line-height: 1.7;
}

.cck-bespoke-site a {
  transition: opacity .22s ease, color .22s ease, border-color .22s ease;
}

.cck-bespoke-site a:hover {
  opacity: .72;
}

/* Divi section width convention */
.cck-bespoke-site .cck-wrap,
.cck-bespoke-site .cck-wrap.et_pb_row {
  width: min(calc(100% - 64px), var(--cck-max));
  max-width: var(--cck-max);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Typography utilities ---------- */
.cck-kicker,
.cck-kicker .et_pb_text_inner {
  color: var(--cck-accent);
  font-family: var(--cck-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cck-display h1,
.cck-display .et_pb_text_inner h1 {
  font-size: clamp(52px, 5.2vw, 92px);
  line-height: .95;
  margin-bottom: .34em;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none;
}

.cck-heading h2,
.cck-heading .et_pb_text_inner h2 {
  font-size: clamp(40px, 4.5vw, 70px);
  line-height: 1.02;
}

.cck-editorial-copy,
.cck-editorial-copy .et_pb_text_inner,
.cck-editorial-copy p {
  font-family: var(--cck-serif);
  font-size: clamp(22px, 2.1vw, 29px);
  line-height: 1.42;
  color: #383630;
}

.cck-small-label,
.cck-small-label .et_pb_text_inner {
  color: var(--cck-muted);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------- Links / buttons ---------- */
.cck-text-link a,
.cck-text-link .et_pb_button,
.cck-text-link.et_pb_button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cck-ink) !important;
  border-radius: 0 !important;
  color: var(--cck-ink) !important;
  font-family: var(--cck-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .16em !important;
  padding: 0 0 8px !important;
  text-transform: uppercase;
}

.cck-text-link .et_pb_button:after,
.cck-text-link.et_pb_button:after {
  display: none !important;
}

/* ---------- Header ---------- */
.cck-header {
  background: rgba(243, 240, 233, .97);
  border-bottom: var(--cck-rule);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cck-header .et_pb_row {
  min-height: 92px;
}

.cck-header .et_pb_menu__menu > nav > ul > li > a {
  color: var(--cck-ink) !important;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
}

.cck-header .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
  opacity: .58;
}

.cck-header .mobile_menu_bar:before {
  color: var(--cck-ink) !important;
}

/* ---------- Hero ---------- */
.cck-hero {
  background: var(--cck-paper);
  border-bottom: var(--cck-rule);
  overflow: hidden;
}

.cck-hero .et_pb_row {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.cck-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 720px;
  padding: clamp(62px, 7vw, 105px) clamp(38px, 6vw, 96px) !important;
}

.cck-hero-media,
.cck-hero-media .et_pb_image_wrap,
.cck-hero-media img {
  height: 100%;
  min-height: 720px;
}

.cck-hero-media img {
  object-fit: cover;
  object-position: center 48%;
}

/* ---------- Standard section spacing ---------- */
.cck-section {
  padding-top: var(--cck-space-xl) !important;
  padding-bottom: var(--cck-space-xl) !important;
}

.cck-section-compact {
  padding-top: var(--cck-space-lg) !important;
  padding-bottom: var(--cck-space-lg) !important;
}

.cck-rule-top { border-top: var(--cck-rule); }
.cck-rule-bottom { border-bottom: var(--cck-rule); }

/* ---------- Intro / statements ---------- */
.cck-intro-grid .et_pb_column:first-child {
  padding-top: 7px;
}

.cck-intro-notes {
  border-top: 1px solid var(--cck-stone);
  margin-top: clamp(42px, 5vw, 72px);
  padding-top: 26px;
}

/* Keep the three introductory notes on one exact top baseline, regardless
   of Divi's internal text wrappers or paragraph formatting. */
.cck-intro-notes .et_pb_column,
.cck-intro-notes .et_pb_module,
.cck-intro-note,
.cck-intro-note .et_pb_text_inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.cck-intro-note .et_pb_text_inner > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.cck-intro-note strong {
  display: block;
  color: var(--cck-ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.cck-intro-note p { font-size: 13px; }

/* ---------- Project feature ---------- */
.cck-project-feature {
  background: var(--cck-paper-2);
}

.cck-project-feature-image,
.cck-project-feature-image .et_pb_image_wrap,
.cck-project-feature-image img {
  height: 670px;
}

.cck-project-feature-image img { object-fit: cover; }

.cck-project-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 670px;
  padding: clamp(34px, 4vw, 56px) !important;
}

.cck-project-title h3 {
  font-size: clamp(36px, 3.5vw, 50px);
  line-height: 1.04;
}

.cck-project-meta {
  border-top: 1px solid var(--cck-stone);
  font-size: 10px;
  letter-spacing: .12em;
  padding-top: 18px;
  text-transform: uppercase;
}

.cck-project-meta p { font-size: inherit; color: var(--cck-muted); }

/* ---------- Image treatments ---------- */
.cck-image-editorial img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.cck-image-tall img { aspect-ratio: 4 / 5; }
.cck-image-landscape img { aspect-ratio: 16 / 10; }
.cck-image-square img { aspect-ratio: 1 / 1; }

.cck-caption,
.cck-caption .et_pb_text_inner {
  color: var(--cck-muted);
  font-size: 10px;
  letter-spacing: .05em;
  margin-top: 9px;
}

/* ---------- Services ---------- */
.cck-services-section { background: #e9e3d9; }

.cck-service-list { border-top: 1px solid var(--cck-stone-dark); }

.cck-service-row {
  border-bottom: 1px solid var(--cck-stone-dark);
  padding: 25px 0;
}

.cck-service-row h3 {
  font-size: clamp(24px, 2.2vw, 31px);
  margin: 0;
}

.cck-service-row .cck-service-number {
  color: var(--cck-muted);
  font-size: 10px;
  letter-spacing: .12em;
}

/* ---------- Pull quote ---------- */
.cck-quote {
  border-left: 1px solid var(--cck-stone);
  padding-left: 28px;
}

.cck-quote p {
  color: var(--cck-ink);
  font-family: var(--cck-serif);
  font-size: clamp(25px, 2.5vw, 34px);
  line-height: 1.3;
}

/* ---------- Process ---------- */
.cck-process-row { border-top: 1px solid var(--cck-stone); }

.cck-process-step {
  border-right: 1px solid var(--cck-stone);
  min-height: 235px;
  padding: 28px 28px 28px 0 !important;
}

.cck-process-step:last-child { border-right: 0; }

.cck-process-step .cck-step-number {
  color: var(--cck-accent);
  font-size: 10px;
  letter-spacing: .18em;
}

.cck-process-step h3 {
  font-size: 25px;
  margin-top: 40px;
}

.cck-process-step p { font-size: 13px; }

/* ---------- Before / after ---------- */
.cck-before-after .et_pb_image_wrap,
.cck-before-after img {
  width: 100%;
}

.cck-before-after img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---------- Contact / Footer ---------- */
.cck-contact-section {
  background: var(--cck-deep);
  color: var(--cck-paper);
}

.cck-contact-section h1,
.cck-contact-section h2,
.cck-contact-section h3,
.cck-contact-section p,
.cck-contact-section a {
  color: var(--cck-paper) !important;
}

.cck-contact-section p { color: #c7c1b7 !important; }

.cck-contact-section .cck-text-link a,
.cck-contact-section .cck-text-link .et_pb_button {
  border-bottom-color: var(--cck-paper) !important;
  color: var(--cck-paper) !important;
}

.cck-footer-rule { border-top: 1px solid rgba(243, 240, 233, .16); }

/* ---------- Forms ---------- */
.cck-form input[type='text'],
.cck-form input[type='email'],
.cck-form input[type='tel'],
.cck-form textarea,
.cck-form select {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cck-stone) !important;
  border-radius: 0 !important;
  color: var(--cck-ink) !important;
  font-family: var(--cck-sans) !important;
  padding: 14px 0 !important;
}

.cck-form textarea { min-height: 130px; }

/* ---------- Accessibility / motion ---------- */
.cck-bespoke-site :focus-visible {
  outline: 2px solid var(--cck-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .cck-bespoke-site *,
  .cck-bespoke-site *::before,
  .cck-bespoke-site *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .cck-bespoke-site .cck-wrap,
  .cck-bespoke-site .cck-wrap.et_pb_row {
    width: min(calc(100% - 48px), var(--cck-max));
  }

  .cck-hero-copy,
  .cck-hero-media,
  .cck-hero-media .et_pb_image_wrap,
  .cck-hero-media img {
    min-height: 0;
  }

  .cck-hero-copy { padding: 76px 32px !important; }
  .cck-hero-media img { height: min(62vh, 620px); min-height: 420px; }

  .cck-project-feature-image,
  .cck-project-feature-image .et_pb_image_wrap,
  .cck-project-feature-image img { height: 520px; }

  .cck-project-feature-copy { min-height: auto; }

  .cck-process-step {
    border-bottom: 1px solid var(--cck-stone);
    border-right: 0;
    min-height: 0;
    padding: 28px 0 !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .cck-bespoke-site .cck-wrap,
  .cck-bespoke-site .cck-wrap.et_pb_row {
    width: calc(100% - 34px);
  }

  .cck-display h1,
  .cck-display .et_pb_text_inner h1 {
    font-size: clamp(48px, 14vw, 62px);
  }

  .cck-heading h2,
  .cck-heading .et_pb_text_inner h2 {
    font-size: 40px;
  }

  .cck-hero-copy { padding: 58px 20px !important; }
  .cck-hero-media img { min-height: 350px; height: 54vh; }

  .cck-project-feature-image,
  .cck-project-feature-image .et_pb_image_wrap,
  .cck-project-feature-image img { height: 390px; }

  .cck-project-feature-copy { padding: 32px 25px !important; }

  .cck-image-tall img,
  .cck-image-landscape img,
  .cck-image-square img { aspect-ratio: 4 / 3; }
}

/* ================================================================
   DIRECTION 03 — PROJECT ARCHIVE + CASE STUDIES + PLACEHOLDERS
   ================================================================ */
.cck-page-hero { padding: clamp(86px, 8vw, 136px) 0 !important; border-bottom: var(--cck-rule); }
.cck-page-hero .cck-display h1 { max-width: 1040px; }

.cck-project-archive-grid .et_pb_column { margin-bottom: clamp(48px, 6vw, 82px); }
.cck-project-card-image img { aspect-ratio: 16 / 11; object-fit: cover; }
.cck-project-card-title h2,
.cck-project-card-title h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.06; }
.cck-project-card-meta { color: var(--cck-muted); font-size: 11px; letter-spacing: .04em; }

/* Use a Text module for a temporary image placeholder. Replace that module
   with an Image module later; the row/column layout does not need rebuilding. */
.cck-image-placeholder {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px !important;
  border: 1px solid rgba(29,29,26,.08);
  background: linear-gradient(135deg, #e7e1d6, #dcd3c5);
}
.cck-image-placeholder,
.cck-image-placeholder .et_pb_text_inner,
.cck-image-placeholder p {
  color: #81796f !important;
  font-size: 10px !important;
  letter-spacing: .16em;
  line-height: 1.6;
  text-transform: uppercase;
}
.cck-placeholder-landscape { min-height: clamp(340px, 42vw, 620px); }
.cck-placeholder-detail { min-height: clamp(280px, 30vw, 420px); }

.cck-case-hero { border-bottom: var(--cck-rule); overflow: hidden; }
.cck-case-hero > .et_pb_row { width: 100% !important; max-width: none !important; padding: 0 !important; }
.cck-case-head { min-height: 680px; display:flex; flex-direction:column; justify-content:flex-end; padding: clamp(54px, 6vw, 100px) !important; }
.cck-case-media,
.cck-case-media .et_pb_image_wrap,
.cck-case-media img { min-height: 680px; height: 100%; }
.cck-case-media img { object-fit: cover; }
.cck-case-meta { border-top: 1px solid var(--cck-stone); padding-top: 20px; margin-top: 34px; }
.cck-case-meta p { font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: var(--cck-muted); }

.cck-story-grid .et_pb_column:first-child { padding-top: 8px; }
.cck-project-body p { font-size: 16px; line-height: 1.82; }
.cck-project-body h2 { font-size: clamp(40px, 4vw, 64px); margin-bottom: .55em; }

.cck-draft-note { border-left: 2px solid var(--cck-accent); background: var(--cck-paper-2); padding: 22px 24px !important; }
.cck-draft-note p { color: #5c554c; font-size: 13px; line-height: 1.7; }

.cck-material-row { border-top: 1px solid var(--cck-stone); border-bottom: 1px solid var(--cck-stone); }
.cck-material-item { min-height: 190px; padding: 28px 28px 28px 0 !important; border-right: 1px solid var(--cck-stone); }
.cck-material-item:last-child { border-right: 0; }
.cck-material-item h3 { font-size: 24px; }
.cck-material-item p { font-size: 13px; color: var(--cck-muted); }

.cck-next-project { border-top: var(--cck-rule); }
.cck-next-project h2 { font-size: clamp(38px, 4vw, 62px); }

@media (max-width: 980px) {
  .cck-case-head { min-height: auto; padding: 72px 32px 54px !important; }
  .cck-case-media,
  .cck-case-media .et_pb_image_wrap,
  .cck-case-media img { min-height: 500px; height: 58vh; }
  .cck-material-item { border-right: 0; border-bottom: 1px solid var(--cck-stone); padding: 26px 0 !important; }
}
@media (max-width: 767px) {
  .cck-case-head { padding: 56px 20px 44px !important; }
  .cck-case-media,
  .cck-case-media .et_pb_image_wrap,
  .cck-case-media img { min-height: 350px; height: 50vh; }
  .cck-image-placeholder { min-height: 320px; }
}

/* ================================================================
   DIRECTION 05 — APPROVED ARCHITECTURAL MOTIF LIBRARY
   Four transparent line-art assets can be varied section by section.
   Decorative only; no SEO-relevant information is embedded in them.
   ================================================================ */

/* Clock Tower card remains the reference proportion for all project overview media. */
.cck-project-card-image,
.cck-project-card-image .et_pb_image_wrap,
.cck-project-card-image img,
.cck-project-card-placeholder {
  aspect-ratio: 1.47 / 1;
}
.cck-project-card-image .et_pb_image_wrap,
.cck-project-card-image img {
  display: block;
  width: 100%;
  height: 100%;
}
.cck-project-card-image img { object-fit: cover; }
.cck-project-card-placeholder {
  min-height: 0 !important;
  width: 100%;
}

/* ---- Motif variants ------------------------------------------------
   Add ONE variant class to the same Divi row/column/module that carries
   cck-motif-aside or cck-motif-panel, or to the cck-wrap row inside a
   cck-page-hero.

   cck-motif-elevation
   cck-motif-plan
   cck-motif-plan-detail
   cck-motif-courtyard
   ------------------------------------------------------------------ */
.cck-motif-elevation {
  --cck-motif-image: url("../images/motifs/motif-elevation.png");
}
.cck-motif-plan {
  --cck-motif-image: url("../images/motifs/motif-plan.png");
}
.cck-motif-plan-detail {
  --cck-motif-image: url("../images/motifs/motif-plan-detail.png");
}
.cck-motif-courtyard {
  --cck-motif-image: url("../images/motifs/motif-courtyard.png");
}

/* Standard page hero: motif occupies otherwise quiet space to the right.
   Elevation is the fallback when no explicit variant class is supplied. */
.cck-page-hero .cck-wrap {
  position: relative;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: min(40vw, 560px) !important;
}
.cck-page-hero .cck-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: min(34vw, 470px);
  height: min(29vw, 365px);
  transform: translateY(-48%);
  pointer-events: none;
  opacity: .34;
  background-image: var(--cck-motif-image, url("../images/motifs/motif-elevation.png"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cck-page-hero .cck-wrap > * {
  position: relative;
  z-index: 1;
}

/* Optional smaller motif for editorial sections that intentionally leave
   breathing room in the label/aside area. Use sparingly. */
.cck-motif-aside {
  position: relative;
}
.cck-motif-aside::before {
  content: '';
  position: absolute;
  left: 0;
  top: 62px;
  width: min(29%, 330px);
  height: 235px;
  pointer-events: none;
  opacity: .22;
  background-image: var(--cck-motif-image, url("../images/motifs/motif-elevation.png"));
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cck-motif-aside > * {
  position: relative;
  z-index: 1;
}

/* Standalone motif panel. Apply to an otherwise empty Divi column or module
   when a composition benefits from a quiet architectural drawing rather than
   a photograph. It remains a decorative theme element, not project content. */
.cck-motif-panel {
  position: relative;
  min-height: clamp(250px, 29vw, 390px);
}
.cck-motif-panel::before {
  content: '';
  position: absolute;
  inset: 10% 5%;
  pointer-events: none;
  opacity: .27;
  background-image: var(--cck-motif-image, url("../images/motifs/motif-elevation.png"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Optional positioning refinements for composition only. */
.cck-motif-align-left::before  { background-position: left center; }
.cck-motif-align-right::before { background-position: right center; }
.cck-motif-faint::before       { opacity: .16; }

/* Keep motifs subordinate to content at tablet sizes. */
@media (max-width: 980px) {
  .cck-page-hero .cck-wrap {
    min-height: 330px;
    padding-right: min(34vw, 330px) !important;
  }
  .cck-page-hero .cck-wrap::after {
    width: min(31vw, 300px);
    height: 260px;
    opacity: .26;
  }
  .cck-motif-aside::before {
    display: none;
  }
  .cck-motif-panel {
    min-height: 250px;
  }
  .cck-motif-panel::before {
    opacity: .21;
  }
}

/* On phones, preserve the editorial spacing but make the motif a very faint
   accent so it never competes with headings or cause awkward crowding. */
@media (max-width: 767px) {
  .cck-page-hero .cck-wrap {
    min-height: 0;
    padding-right: 0 !important;
  }
  .cck-page-hero .cck-wrap::after {
    width: 175px;
    height: 145px;
    right: -22px;
    top: 20px;
    transform: none;
    opacity: .11;
  }
  .cck-motif-panel {
    min-height: 180px;
  }
  .cck-motif-panel::before {
    inset: 4% 2%;
    opacity: .16;
  }
}

/* ================================================================
   DIRECTION 06 — PROJECT SELECTION MEDIA LOCK
   Use the same Clock Tower reference frame for ALL archive cards.
   This overrides intrinsic image/module dimensions and keeps actual
   photographs and temporary Text-module placeholders identical.
   ================================================================ */
.cck-project-card-image,
.cck-project-card-placeholder {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.47 / 1 !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

.cck-project-card-image .et_pb_image_wrap {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

.cck-project-card-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

.cck-project-card-placeholder {
  min-height: 0 !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #e7e1d6, #dcd3c5) !important;
}

.cck-project-card-placeholder .et_pb_text_inner {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 32px !important;
}

.cck-project-card-placeholder p {
  margin: 0 !important;
}


/* ================================================================
   DIRECTION 07 — PROJECT GRID ALIGNMENT
   The archive is a clean, aligned two-column grid. Do not stagger alternate
   cards. Media, title starts and metadata rhythm remain consistent.
   ================================================================ */
.cck-project-archive-grid .et_pb_row,
.cck-project-archive-grid.et_pb_row {
  align-items: flex-start !important;
}
.cck-project-archive-grid .et_pb_column {
  margin-top: 0 !important;
  align-self: flex-start !important;
}
.cck-project-archive-grid .cck-project-card,
.cck-project-card {
  margin-top: 0 !important;
}
.cck-project-card-image,
.cck-project-card-placeholder {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}
.cck-project-card-title {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
.cck-project-card-title h2,
.cck-project-card-title h3 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.08 !important;
}
.cck-project-card-meta,
.cck-project-card-meta p {
  margin-top: 0 !important;
  line-height: 1.55 !important;
}

/* Never create alternating vertical offsets on project archive cards. */
.cck-project-archive-grid .et_pb_column:nth-child(even),
.cck-project-archive-grid .cck-project-card:nth-child(even) {
  transform: none !important;
  margin-top: 0 !important;
}


/* ================================================================
   RELEASE 8.1.2 — THEME BUILDER FOOTER TOP-EDGE CLEANUP
   Remove the unintended extra horizontal rule where page content meets
   the Theme Builder footer. Internal footer rules remain available via
   .cck-footer-rule and are not changed by this release.
   ================================================================ */
footer.et-l--footer,
footer.et-l--footer > .et_builder_inner_content,
footer.et-l--footer .et_pb_section:first-child,
footer.et-l--footer .et_pb_section:first-child .et_pb_row:first-child {
  border-top: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* ================================================================
   RELEASE 8.1.8 — CONSOLIDATED SITE-WIDE REFINEMENT LAYER
   Approved component-level refinements now live in the child theme
   rather than being added page-by-page. Routine copy and structure
   remain editable in native Divi 5 modules.
   ================================================================ */

/* Shared supporting-copy scale on tablet / desktop. Mobile remains
   on the already-approved responsive values defined in each layout. */
@media (min-width: 768px) {
  /* Home Services */
  .cck-services-list h3,
  .cck-services-list h4,
  .cck-services-list strong {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  .cck-services-list p {
    font-size: 18px !important;
    line-height: 1.58 !important;
  }

  /* Considered / Coordinated / Crafted editorial notes wherever the
     shared component is used. */
  .cck-intro-note strong {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  .cck-intro-note p:not(:first-child),
  .cck-intro-note p:not(:first-child) span {
    font-size: 18px !important;
    line-height: 1.58 !important;
  }

  /* About — How CCK Works */
  .cck-about-process-card strong {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  .cck-about-process-card p:last-child {
    font-size: 18px !important;
    line-height: 1.58 !important;
  }
}

/* Home Services: avoid a duplicate closing rule beneath the final item.
   The section boundary provides the single intentional closing rule. */
.cck-services-list:last-child {
  border-bottom: 0 !important;
}


/* ================================================================
   RELEASE 8.1.9 — DESKTOP EDITORIAL SCALE NORMALISATION
   Several page JSON layouts contain older, aggressive desktop sizes
   for shared .cck-heading and .cck-editorial-copy utilities. This
   higher-specificity theme layer restores a more balanced site-wide
   hierarchy without changing the approved 18px supporting components.
   Tablet/mobile layouts remain untouched.
   ================================================================ */
@media (min-width: 981px) {

  /* Shared section headings: substantial, but no longer oversized. */
  .cck-bespoke-site .cck-heading h2,
  .cck-bespoke-site .cck-heading .et_pb_text_inner h2 {
    font-size: clamp(42px, 3.2vw, 58px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.035em !important;
  }

  /* Shared serif supporting copy beneath section headings. */
  .cck-bespoke-site .cck-editorial-copy,
  .cck-bespoke-site .cck-editorial-copy .et_pb_text_inner,
  .cck-bespoke-site .cck-editorial-copy p,
  .cck-bespoke-site .cck-editorial-copy p span {
    font-size: clamp(20px, 1.25vw, 24px) !important;
    line-height: 1.50 !important;
  }

  /* About overlapping hero card only — retain impact without the
     previous very large 82px desktop ceiling. Main page heroes and
     project hero H1s are deliberately not changed. */
  .cck-bespoke-site .cck-about-hero-v5-card-row .cck-display h1,
  .cck-bespoke-site .cck-about-hero-v5-card-row .cck-display .et_pb_text_inner h1 {
    font-size: clamp(50px, 3.8vw, 68px) !important;
    line-height: .98 !important;
  }
}


/* ================================================================
   RELEASE 8.1.10 — CONTACT PAGE DESKTOP TYPOGRAPHY
   The Contact page uses several bespoke utility classes that sit
   outside the shared editorial-copy rules introduced in 8.1.9.
   This brings its supporting text into the same visual hierarchy.
   Tablet/mobile are deliberately unchanged.
   ================================================================ */
@media (min-width: 981px) {

  /* Hero supporting copy */
  .cck-contact-hero .cck-contact-hero-copy p,
  .cck-contact-hero-copy p {
    font-size: 18px !important;
    line-height: 1.58 !important;
  }

  /* Form introduction + What Happens Next supporting copy */
  .cck-contact-form-intro,
  .cck-contact-form-intro .et_pb_text_inner,
  .cck-contact-form-intro p,
  .cck-contact-next-copy p {
    font-size: 18px !important;
    line-height: 1.58 !important;
  }

  /* Left-hand contact information */
  .cck-contact-info-block p,
  .cck-contact-info-block a {
    font-size: 18px !important;
    line-height: 1.52 !important;
  }

  .cck-contact-info-block .cck-contact-info-label {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
  }

  .cck-contact-info-block .cck-contact-info-note p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  /* Contact-page eyebrow labels */
  .cck-contact-hero .cck-small-label,
  .cck-contact-form-row .cck-small-label,
  .cck-contact-next .cck-small-label {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* Keep fields comfortably readable on larger screens */
  .contact-box input,
  .contact-box textarea,
  .contact-box .input,
  .contact-box .et_pb_contact_field input,
  .contact-box .et_pb_contact_field textarea {
    font-size: 20px !important;
    line-height: 1.55 !important;
  }

  /* Slight lift to the restrained text-link submit treatment */
  .contact-box .et_pb_contact_submit,
  .contact-box button[type="submit"] {
    font-size: 13px !important;
  }
}


/* ================================================================
   RELEASE 8.1.11 — HOME SELECTED PROJECT FACTS
   Increase the PROJECT / LOCATION / FOCUS block and its CTA so the
   selected-project information carries appropriate visual weight on
   desktop. Tablet/mobile remain unchanged.
   ================================================================ */
@media (min-width: 981px) {

  .cck-selected-project .cck-project-facts strong {
    display: inline-block !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
  }

  .cck-selected-project .cck-project-facts span,
  .cck-selected-project .cck-project-facts p {
    font-size: 18px !important;
    line-height: 1.52 !important;
  }

  .cck-selected-project .cck-text-link a,
  .cck-selected-project .cck-text-link .et_pb_button,
  .cck-selected-project .cck-text-link.et_pb_button {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}


/* ================================================================
   RELEASE 8.1.12 — HOME HERO SUPPORTING COPY
   Lift the Home hero paragraph so it does not feel under-scaled
   beside the following editorial section. Desktop only.
   ================================================================ */
@media (min-width: 981px) {
  body.cck-bespoke-site .cck-hero .cck-hero-intro {
    max-width: 560px !important;
  }

  body.cck-bespoke-site .cck-hero .cck-hero-intro p,
  body.cck-bespoke-site .cck-hero .cck-hero-intro p span {
    font-size: clamp(19px, 1.15vw, 21px) !important;
    line-height: 1.56 !important;
  }
}


/* ================================================================
   RELEASE 8.1.13 — ABOUT HERO BALANCE
   Move the overlapping About card inward so it sits more naturally
   within the image composition, and lift the supporting copy so it
   matches the established desktop hierarchy. Desktop only.
   ================================================================ */
@media (min-width: 981px) {

  /* The image occupies roughly three-quarters of the viewport; 10%
     places the card much closer to the visual centre of that image
     instead of hugging the left edge. */
  body.cck-bespoke-site .cck-about-hero-v5-card-row {
    margin-left: 10% !important;
  }

  body.cck-bespoke-site .cck-about-hero-v5-intro {
    max-width: 620px !important;
    margin-top: 26px !important;
  }

  body.cck-bespoke-site .cck-about-hero-v5-intro p,
  body.cck-bespoke-site .cck-about-hero-v5-intro p span {
    font-size: clamp(18px, 1.1vw, 20px) !important;
    line-height: 1.58 !important;
  }

  body.cck-bespoke-site .cck-about-hero-v5-card-row .cck-text-link a,
  body.cck-bespoke-site .cck-about-hero-v5-card-row .cck-text-link .et_pb_button,
  body.cck-bespoke-site .cck-about-hero-v5-card-row .cck-text-link.et_pb_button {
    font-size: 13px !important;
  }
}


/* ================================================================
   RELEASE 8.1.14 — ABOUT HERO RIGHT-WEIGHTED COMPOSITION
   The hero image is visually left-heavy and leaves intentional open
   space to the right. Position the overlap card into that negative
   space so the composition feels deliberate and the transition into
   the following right-led About section is better balanced.
   Desktop only; tablet/mobile remain unchanged.
   ================================================================ */
@media (min-width: 981px) {

  body.cck-bespoke-site .cck-about-hero-v5-card-row {
    width: min(52%, 760px) !important;
    max-width: 760px !important;
    margin-left: clamp(32%, 36vw, 40%) !important;
    margin-right: auto !important;
  }
}

/* On very wide displays allow the card to sit a little further into
   the right-hand negative space without becoming excessively wide. */
@media (min-width: 1440px) {
  body.cck-bespoke-site .cck-about-hero-v5-card-row {
    width: min(50%, 780px) !important;
    max-width: 780px !important;
    margin-left: 39% !important;
  }
}


/* ================================================================
   RELEASE 8.1.15 — ABOUT PAGE MOBILE TYPOGRAPHY
   The About page's shared editorial classes were rendering too large
   on phone widths. Scope the correction to the About page only using
   its unique hero-card marker, leaving Home / Projects / Contact and
   all desktop/tablet typography untouched.
   ================================================================ */
@media (max-width: 767px) {

  /* About section headings:
     Local knowledge / How CCK Works / From brief to finish /
     Built around the project. */
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-heading h2,
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-heading .et_pb_text_inner h2 {
    font-size: clamp(34px, 9.5vw, 40px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
  }

  /* Main serif editorial paragraphs on the About page. */
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-editorial-copy,
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-editorial-copy .et_pb_text_inner,
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-editorial-copy p,
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-editorial-copy p span {
    font-size: clamp(18px, 4.8vw, 20px) !important;
    line-height: 1.52 !important;
  }

  /* Keep paragraph separation deliberate but tighter at phone widths. */
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-editorial-copy p + p {
    margin-top: 0.82em !important;
  }
}

/* Slightly tighter still on narrow phones. */
@media (max-width: 430px) {
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-heading h2,
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-heading .et_pb_text_inner h2 {
    font-size: 35px !important;
  }

  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-editorial-copy,
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-editorial-copy .et_pb_text_inner,
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-editorial-copy p,
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-editorial-copy p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }
}


/* ================================================================
   RELEASE 8.1.16 — SITE-WIDE PARAGRAPH FONT UNIFICATION
   Use the same serif family as headings for narrative paragraphs and
   descriptive copy throughout the CCK site. Keep navigation, labels,
   metadata, buttons, captions, placeholders and form controls in the
   existing sans-serif utility family so the hierarchy remains clear.
   No font-size or spacing changes are introduced by this release.
   ================================================================ */

/* Narrative / descriptive copy */
body.cck-bespoke-site p,
body.cck-bespoke-site p span {
  font-family: var(--cck-serif) !important;
}

/* Preserve the sans-serif utility language. */
body.cck-bespoke-site .cck-kicker,
body.cck-bespoke-site .cck-kicker *,
body.cck-bespoke-site .cck-small-label,
body.cck-bespoke-site .cck-small-label *,
body.cck-bespoke-site .cck-text-link,
body.cck-bespoke-site .cck-text-link *,
body.cck-bespoke-site .cck-project-meta,
body.cck-bespoke-site .cck-project-meta *,
body.cck-bespoke-site .cck-project-card-meta,
body.cck-bespoke-site .cck-project-card-meta *,
body.cck-bespoke-site .cck-case-meta,
body.cck-bespoke-site .cck-case-meta *,
body.cck-bespoke-site .cck-caption,
body.cck-bespoke-site .cck-caption *,
body.cck-bespoke-site .cck-image-placeholder,
body.cck-bespoke-site .cck-image-placeholder *,
body.cck-bespoke-site .cck-contact-info-label,
body.cck-bespoke-site .cck-contact-info-label *,
body.cck-bespoke-site .cck-service-number,
body.cck-bespoke-site .cck-step-number {
  font-family: var(--cck-sans) !important;
}

/* Component labels remain sans while their explanatory paragraphs now
   inherit the shared serif paragraph family above. */
body.cck-bespoke-site .cck-intro-note strong,
body.cck-bespoke-site .cck-about-process-card strong,
body.cck-bespoke-site .cck-services-list strong,
body.cck-bespoke-site .cck-selected-project .cck-project-facts strong {
  font-family: var(--cck-sans) !important;
}

/* Forms remain functional/utilitarian rather than editorial. */
body.cck-bespoke-site input,
body.cck-bespoke-site textarea,
body.cck-bespoke-site select,
body.cck-bespoke-site button,
body.cck-bespoke-site .et_pb_contact_field label,
body.cck-bespoke-site .et_pb_contact_submit {
  font-family: var(--cck-sans) !important;
}


/* ================================================================
   RELEASE 8.1.17 — ABOUT HERO COPY SCALE MATCH
   Match the supporting paragraph in the About hero/banner card to the
   exact desktop scale used by the following editorial copy so the
   transition between the two sections is visually consistent.
   Mobile/tablet sizing remains unchanged.
   ================================================================ */
@media (min-width: 981px) {
  body.cck-bespoke-site .cck-about-hero-v5-intro,
  body.cck-bespoke-site .cck-about-hero-v5-intro .et_pb_text_inner,
  body.cck-bespoke-site .cck-about-hero-v5-intro p,
  body.cck-bespoke-site .cck-about-hero-v5-intro p span {
    font-size: clamp(20px, 1.25vw, 24px) !important;
    line-height: 1.50 !important;
  }
}


/* ================================================================
   RELEASE 8.1.18 — PROJECTS OVERVIEW TYPOGRAPHY
   Bring the Projects overview into the same desktop type hierarchy as
   the rest of the site. The three-card grid, media sizing, alignment,
   responsive behaviour and mobile/tablet styling are untouched.
   ================================================================ */
@media (min-width: 981px) {

  /* Projects overview hero/supporting introduction — same editorial
     paragraph scale now used elsewhere across the site. */
  body:has(.cck-project-archive-grid).cck-bespoke-site .cck-page-hero p,
  body:has(.cck-project-archive-grid).cck-bespoke-site .cck-page-hero p span {
    font-size: clamp(20px, 1.25vw, 24px) !important;
    line-height: 1.50 !important;
  }

  /* Keep project titles strong without changing the existing card rhythm. */
  body.cck-bespoke-site .cck-project-archive-grid .cck-project-card-title h2,
  body.cck-bespoke-site .cck-project-archive-grid .cck-project-card-title h3 {
    font-size: clamp(34px, 2.55vw, 42px) !important;
    line-height: 1.07 !important;
  }

  /* Metadata is intentionally sans-serif but no longer undersized. */
  body.cck-bespoke-site .cck-project-archive-grid .cck-project-card-meta,
  body.cck-bespoke-site .cck-project-archive-grid .cck-project-card-meta p,
  body.cck-bespoke-site .cck-project-archive-grid .cck-project-card-meta span {
    font-size: 13px !important;
    line-height: 1.48 !important;
    letter-spacing: .06em !important;
  }

  /* Card descriptions use the shared serif body language at a size
     appropriate to a three-column archive. */
  body.cck-bespoke-site .cck-project-archive-grid .cck-project-card p {
    font-size: 18px !important;
    line-height: 1.52 !important;
  }

  /* Reassert metadata after the general card paragraph rule above. */
  body.cck-bespoke-site .cck-project-archive-grid .cck-project-card .cck-project-card-meta,
  body.cck-bespoke-site .cck-project-archive-grid .cck-project-card .cck-project-card-meta p,
  body.cck-bespoke-site .cck-project-archive-grid .cck-project-card .cck-project-card-meta span {
    font-size: 13px !important;
    line-height: 1.48 !important;
  }

  /* Placeholder labels remain understated utility text. */
  body.cck-bespoke-site .cck-project-archive-grid .cck-project-card-placeholder p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* CTA treatment matches the restrained site-wide text links. */
  body.cck-bespoke-site .cck-project-archive-grid .cck-text-link a,
  body.cck-bespoke-site .cck-project-archive-grid .cck-text-link .et_pb_button,
  body.cck-bespoke-site .cck-project-archive-grid .cck-text-link.et_pb_button {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}


/* ================================================================
   RELEASE 8.1.19 — PROJECTS CARD TYPOGRAPHY CORRECT TARGETING
   8.1.18 targeted an archive utility class that is not present on the
   live Projects JSON. The live layout uses .cck-projects-grid-section,
   .cck-projects-row and page-level !important typography. These
   higher-specificity selectors deliberately override that page CSS.
   Grid geometry, image sizes and responsive layout are unchanged.
   ================================================================ */
@media (min-width: 981px) {

  /* Projects intro paragraph */
  body.cck-bespoke-site .cck-projects-hero .cck-projects-lead p,
  body.cck-bespoke-site .cck-projects-hero .cck-projects-lead p span {
    font-family: var(--cck-serif) !important;
    font-size: clamp(20px, 1.25vw, 24px) !important;
    line-height: 1.50 !important;
  }

  /* Card titles */
  body.cck-bespoke-site .cck-projects-grid-section .cck-projects-row .cck-project-card-title h2,
  body.cck-bespoke-site .cck-projects-grid-section .cck-projects-row .cck-project-card-title h3 {
    font-family: var(--cck-serif) !important;
    font-size: clamp(36px, 2.7vw, 44px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.026em !important;
  }

  /* Location / project type metadata */
  body.cck-bespoke-site .cck-projects-grid-section .cck-projects-row .cck-project-card-meta p,
  body.cck-bespoke-site .cck-projects-grid-section .cck-projects-row .cck-project-card-meta p span {
    font-family: var(--cck-sans) !important;
    font-size: 14px !important;
    line-height: 1.48 !important;
    letter-spacing: .09em !important;
  }

  /* Descriptive paragraph */
  body.cck-bespoke-site .cck-projects-grid-section .cck-projects-row .cck-project-card-copy p,
  body.cck-bespoke-site .cck-projects-grid-section .cck-projects-row .cck-project-card-copy p span {
    font-family: var(--cck-serif) !important;
    font-size: 18px !important;
    line-height: 1.52 !important;
  }

  /* View Project */
  body.cck-bespoke-site .cck-projects-grid-section .cck-projects-row .cck-project-link .et_pb_button,
  body.cck-bespoke-site .cck-projects-grid-section .cck-projects-row .cck-project-link a {
    font-family: var(--cck-sans) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  /* Keep placeholders restrained and separate from editorial copy. */
  body.cck-bespoke-site .cck-projects-grid-section .cck-project-card-placeholder p,
  body.cck-bespoke-site .cck-projects-grid-section .cck-project-card-placeholder small {
    font-family: var(--cck-sans) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}


/* ================================================================
   RELEASE 8.1.20 — CONSOLIDATED MOBILE RHYTHM + TYPE SCALE
   Mobile QA pass based on live phone screenshots. This layer reduces
   excessive vertical whitespace, keeps narrative copy at a consistent
   readable serif scale, moderates oversized case-study headings and
   compacts the global CTA/footer. Desktop and tablet are unchanged.
   ================================================================ */
@media (max-width: 767px) {

  /* --------------------------------------------------------------
     Shared mobile editorial hierarchy
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-heading h2,
  body.cck-bespoke-site .cck-heading .et_pb_text_inner h2 {
    font-size: clamp(35px, 9.4vw, 40px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
  }

  body.cck-bespoke-site .cck-editorial-copy,
  body.cck-bespoke-site .cck-editorial-copy .et_pb_text_inner,
  body.cck-bespoke-site .cck-editorial-copy p,
  body.cck-bespoke-site .cck-editorial-copy p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  /* --------------------------------------------------------------
     Home — reduce accumulated section whitespace without changing
     the approved single-column mobile structure.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  body.cck-bespoke-site .cck-hero .cck-hero-intro p,
  body.cck-bespoke-site .cck-hero .cck-hero-intro p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-home-intro {
    padding-bottom: 30px !important;
  }

  body.cck-bespoke-site .cck-selected-project {
    padding-top: 34px !important;
  }

  body.cck-bespoke-site .cck-intro-notes {
    margin-top: 22px !important;
  }

  body.cck-bespoke-site .cck-intro-note {
    margin-bottom: 18px !important;
  }

  body.cck-bespoke-site .cck-feature-project {
    margin-top: 24px !important;
  }

  body.cck-bespoke-site .cck-feature-project-copy {
    margin-top: 22px !important;
  }

  body.cck-bespoke-site .cck-project-facts-row {
    margin-top: 24px !important;
  }

  body.cck-bespoke-site .cck-project-facts {
    margin-bottom: 16px !important;
  }

  /* --------------------------------------------------------------
     Project case studies — same mobile scale/rhythm across Hawkhurst,
     Clock Tower, Tenterden and future case-study pages using the
     shared CCK case-study classes.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-case-title h1,
  body.cck-bespoke-site .cck-case-title .et_pb_text_inner h1 {
    font-size: clamp(48px, 13vw, 56px) !important;
    line-height: .94 !important;
    letter-spacing: -.04em !important;
  }

  body.cck-bespoke-site .cck-case-lead p,
  body.cck-bespoke-site .cck-case-lead p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-case-section:not(.cck-materials-section) {
    padding-top: 42px !important;
    padding-bottom: 36px !important;
  }

  body.cck-bespoke-site .cck-case-heading h2,
  body.cck-bespoke-site .cck-case-heading .et_pb_text_inner h2,
  body.cck-bespoke-site .cck-project-gallery-heading h2,
  body.cck-bespoke-site .cck-project-gallery-heading .et_pb_text_inner h2 {
    margin-top: 12px !important;
    font-size: clamp(35px, 9.5vw, 40px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
  }

  body.cck-bespoke-site .cck-case-copy {
    margin-top: 18px !important;
  }

  body.cck-bespoke-site .cck-case-copy p,
  body.cck-bespoke-site .cck-case-copy p span,
  body.cck-bespoke-site .cck-project-body p,
  body.cck-bespoke-site .cck-project-body p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-case-copy p + p,
  body.cck-bespoke-site .cck-project-body p + p {
    margin-top: .85em !important;
  }

  /* Project mini gallery */
  body.cck-bespoke-site .cck-project-mini-gallery-section,
  body.cck-bespoke-site .cck-project-gallery-section {
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }

  body.cck-bespoke-site .cck-project-gallery-head {
    margin-bottom: 22px !important;
  }

  body.cck-bespoke-site .cck-project-gallery-grid > .et_pb_column {
    margin-bottom: 18px !important;
  }

  body.cck-bespoke-site .cck-project-gallery-placeholder,
  body.cck-bespoke-site .cck-project-gallery-placeholder.cck-project-tile-feature,
  body.cck-bespoke-site .cck-project-gallery-placeholder.cck-project-tile-wide,
  body.cck-bespoke-site .cck-project-gallery-placeholder.cck-project-tile-compact {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }

  body.cck-bespoke-site .cck-project-gallery-caption {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
  }

  /* Transformation / before-after */
  body.cck-bespoke-site .cck-case-transformation {
    padding-top: 40px !important;
    padding-bottom: 42px !important;
  }

  body.cck-bespoke-site .cck-before-after {
    margin-top: 20px !important;
    gap: 0 !important;
  }

  body.cck-bespoke-site .cck-before-after .et_pb_column {
    margin-bottom: 20px !important;
  }

  body.cck-bespoke-site .cck-case-caption {
    margin-top: 8px !important;
  }

  /* Materials / details */
  body.cck-bespoke-site .cck-materials-section {
    padding-top: 40px !important;
    padding-bottom: 38px !important;
  }

  body.cck-bespoke-site .cck-materials-grid {
    margin-top: 22px !important;
    gap: 0 !important;
  }

  body.cck-bespoke-site .cck-material-card {
    margin-bottom: 22px !important;
    padding-top: 18px !important;
  }

  body.cck-bespoke-site .cck-material-card h3 {
    margin-bottom: 10px !important;
    font-size: 28px !important;
    line-height: 1.08 !important;
  }

  body.cck-bespoke-site .cck-material-card p,
  body.cck-bespoke-site .cck-material-card p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-case-back-row {
    margin-top: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
  }

  /* --------------------------------------------------------------
     Theme Builder global CTA — reduce the oversized phone heading
     and remove the overlong vertical pause above/below it.
     -------------------------------------------------------------- */
  footer.et-l--footer .et_pb_row:has(.cck-footer-cta) {
    width: 88% !important;
    padding-top: 30px !important;
    padding-bottom: 32px !important;
  }

  footer.et-l--footer .cck-footer-eyebrow {
    margin: 0 0 16px !important;
  }

  footer.et-l--footer .cck-footer-cta h2 {
    margin: 0 0 16px !important;
    font-size: 40px !important;
    line-height: 1.00 !important;
    letter-spacing: -.025em !important;
  }

  footer.et-l--footer .cck-footer-cta > p,
  footer.et-l--footer .cck-footer-cta > p span {
    margin: 0 0 16px !important;
    font-family: var(--cck-serif) !important;
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  footer.et-l--footer .cck-footer-cta-link {
    margin-top: 18px !important;
  }

  /* --------------------------------------------------------------
     Main mobile footer — explicit flex gap replaces the accumulated
     column/module margins that were creating the very tall footer.
     -------------------------------------------------------------- */
  footer.et-l--footer .et_pb_section:last-of-type .et_pb_row:first-of-type {
    width: 88% !important;
    padding-top: 22px !important;
    padding-bottom: 8px !important;
    gap: 22px !important;
  }

  footer.et-l--footer .et_pb_section:last-of-type .et_pb_row:first-of-type > .et_pb_column {
    margin: 0 !important;
    padding: 0 !important;
  }

  footer.et-l--footer .et_pb_section:last-of-type .et_pb_row:first-of-type .et_pb_module {
    margin-bottom: 0 !important;
  }

  footer.et-l--footer .et_pb_image {
    max-width: 240px !important;
    margin: 0 0 8px !important;
  }

  footer.et-l--footer .cck-footer-brand-copy p,
  footer.et-l--footer .cck-footer-brand-copy p span {
    margin: 0 !important;
    font-family: var(--cck-serif) !important;
    font-size: 17px !important;
    line-height: 1.48 !important;
  }

  footer.et-l--footer .cck-footer-label {
    margin-bottom: 6px !important;
    font-family: var(--cck-sans) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  footer.et-l--footer .cck-footer-col p,
  footer.et-l--footer .cck-footer-col a,
  footer.et-l--footer .cck-footer-area {
    font-family: var(--cck-sans) !important;
    font-size: 17px !important;
    line-height: 1.48 !important;
  }

  footer.et-l--footer .cck-footer-col p {
    margin: 4px 0 0 !important;
  }

  footer.et-l--footer .cck-footer-area {
    margin-top: 8px !important;
  }

  footer.et-l--footer .et_pb_section:last-of-type .et_pb_row:last-of-type {
    width: 88% !important;
    padding-top: 12px !important;
    padding-bottom: 14px !important;
    gap: 8px !important;
  }

  footer.et-l--footer .et_pb_section:last-of-type .et_pb_row:last-of-type > .et_pb_column {
    margin: 0 !important;
    padding: 0 !important;
  }

  footer.et-l--footer .cck-footer-legal,
  footer.et-l--footer .cck-footer-legal a {
    font-family: var(--cck-sans) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  footer.et-l--footer .cck-footer-legal-links {
    gap: 10px 16px !important;
  }
}

/* Narrow-phone safeguard: keep large editorial headings decisive but
   prevent four/five-line blocks from dominating the viewport. */
@media (max-width: 430px) {
  body.cck-bespoke-site .cck-case-title h1,
  body.cck-bespoke-site .cck-case-title .et_pb_text_inner h1 {
    font-size: 50px !important;
  }

  body.cck-bespoke-site .cck-case-heading h2,
  body.cck-bespoke-site .cck-case-heading .et_pb_text_inner h2,
  body.cck-bespoke-site .cck-project-gallery-heading h2,
  body.cck-bespoke-site .cck-project-gallery-heading .et_pb_text_inner h2,
  body.cck-bespoke-site .cck-heading h2,
  body.cck-bespoke-site .cck-heading .et_pb_text_inner h2 {
    font-size: 35px !important;
  }

  footer.et-l--footer .cck-footer-cta h2 {
    font-size: 38px !important;
  }
}


/* ================================================================
   RELEASE 8.1.21 — GLOBAL MOBILE TYPE + RHYTHM SYSTEM
   One coherent mobile scale for all CCK pages. This deliberately
   overrides older page-level Divi CSS where shared components had
   drifted to different sizes or excessive vertical spacing.

   Mobile hierarchy:
   - narrative/body: 18px serif
   - utility labels: 13–14px sans
   - card/detail headings: 28–30px serif
   - section headings: 38px serif
   - principal page/case titles: 50px serif
   - compact, consistent vertical rhythm throughout
   Desktop/tablet remain unchanged.
   ================================================================ */
@media (max-width: 767px) {

  /* --------------------------------------------------------------
     1. GLOBAL NARRATIVE COPY
     Give ordinary Divi text paragraphs one consistent mobile scale.
     More specialised utility components are reasserted below.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .et_pb_text p,
  body.cck-bespoke-site .et_pb_text p span {
    font-family: var(--cck-serif) !important;
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .et_pb_text p {
    margin-top: 0 !important;
  }

  body.cck-bespoke-site .et_pb_text p + p {
    margin-top: .82em !important;
  }

  /* --------------------------------------------------------------
     2. SHARED UTILITY LABELS
     Keep uppercase navigation / metadata / captions distinctly sans.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-small-label p,
  body.cck-bespoke-site .cck-small-label p span,
  body.cck-bespoke-site .cck-kicker p,
  body.cck-bespoke-site .cck-kicker p span,
  body.cck-bespoke-site .cck-project-meta p,
  body.cck-bespoke-site .cck-project-meta p span,
  body.cck-bespoke-site .cck-caption p,
  body.cck-bespoke-site .cck-caption p span,
  body.cck-bespoke-site .cck-project-gallery-caption p,
  body.cck-bespoke-site .cck-project-gallery-caption p span {
    font-family: var(--cck-sans) !important;
    font-size: 13px !important;
    line-height: 1.40 !important;
  }

  body.cck-bespoke-site .cck-small-label p,
  body.cck-bespoke-site .cck-kicker p {
    letter-spacing: .14em !important;
  }

  /* Placeholder labels must remain subtle rather than inherit 18px. */
  body.cck-bespoke-site .cck-image-placeholder p,
  body.cck-bespoke-site .cck-image-placeholder p span,
  body.cck-bespoke-site .cck-project-gallery-placeholder p,
  body.cck-bespoke-site .cck-project-gallery-placeholder p span,
  body.cck-bespoke-site .cck-project-card-placeholder p,
  body.cck-bespoke-site .cck-project-card-placeholder p span {
    font-family: var(--cck-sans) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    letter-spacing: .10em !important;
  }

  /* --------------------------------------------------------------
     3. SHARED SECTION HEADINGS
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-heading h2,
  body.cck-bespoke-site .cck-heading .et_pb_text_inner h2,
  body.cck-bespoke-site .cck-case-heading h2,
  body.cck-bespoke-site .cck-case-heading .et_pb_text_inner h2,
  body.cck-bespoke-site .cck-project-gallery-heading h2,
  body.cck-bespoke-site .cck-project-gallery-heading .et_pb_text_inner h2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-family: var(--cck-serif) !important;
    font-size: 38px !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
  }

  /* Principal case-study / page titles. */
  body.cck-bespoke-site .cck-case-title h1,
  body.cck-bespoke-site .cck-case-title .et_pb_text_inner h1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 50px !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
  }

  /* --------------------------------------------------------------
     4. CONSIDERED / COORDINATED / CRAFTED
     Applies wherever the shared principles component is used.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-intro-notes {
    display: block !important;
    margin-top: 22px !important;
    padding-top: 0 !important;
    gap: 0 !important;
  }

  body.cck-bespoke-site .cck-intro-notes > .et_pb_column {
    width: 100% !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
  }

  body.cck-bespoke-site .cck-intro-notes > .et_pb_column:last-child {
    margin-bottom: 0 !important;
  }

  body.cck-bespoke-site .cck-intro-note,
  body.cck-bespoke-site .cck-intro-note .et_pb_text_inner {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.cck-bespoke-site .cck-intro-note p {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.48 !important;
  }

  body.cck-bespoke-site .cck-intro-note p:first-child,
  body.cck-bespoke-site .cck-intro-note p:first-child span,
  body.cck-bespoke-site .cck-intro-note strong {
    margin: 0 0 8px !important;
    font-family: var(--cck-sans) !important;
    font-size: 14px !important;
    line-height: 1.30 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
  }

  /* --------------------------------------------------------------
     5. HOME / ABOUT SUPPORTING COMPONENTS
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-editorial-copy,
  body.cck-bespoke-site .cck-editorial-copy .et_pb_text_inner,
  body.cck-bespoke-site .cck-editorial-copy p,
  body.cck-bespoke-site .cck-editorial-copy p span,
  body.cck-bespoke-site .cck-hero-intro p,
  body.cck-bespoke-site .cck-hero-intro p span,
  body.cck-bespoke-site .cck-about-hero-v5-intro p,
  body.cck-bespoke-site .cck-about-hero-v5-intro p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-about-process-card strong,
  body.cck-bespoke-site .cck-services-list h3,
  body.cck-bespoke-site .cck-services-list h4,
  body.cck-bespoke-site .cck-services-list strong {
    font-family: var(--cck-sans) !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  body.cck-bespoke-site .cck-about-process-card p:last-child,
  body.cck-bespoke-site .cck-services-list p {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  body.cck-bespoke-site .cck-section-compact {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* --------------------------------------------------------------
     6. PROJECT CASE STUDIES
     Same mobile typography and spacing for Hawkhurst, Clock Tower,
     Tenterden and future pages using the shared case classes.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-case-hero {
    padding-top: 0 !important;
  }

  body.cck-bespoke-site .cck-case-head {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 36px !important;
    padding-bottom: 24px !important;
  }

  body.cck-bespoke-site .cck-case-lead {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
  }

  body.cck-bespoke-site .cck-case-lead p,
  body.cck-bespoke-site .cck-case-lead p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-case-meta-row {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 16px !important;
    gap: 0 !important;
  }

  body.cck-bespoke-site .cck-case-meta-row > .et_pb_column {
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  body.cck-bespoke-site .cck-case-meta-row > .et_pb_column:last-child {
    margin-bottom: 0 !important;
  }

  body.cck-bespoke-site .cck-case-meta {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.cck-bespoke-site .cck-case-meta p {
    margin: 0 !important;
    font-family: var(--cck-sans) !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
  }

  body.cck-bespoke-site .cck-case-meta strong {
    display: inline-block !important;
    margin-bottom: 4px !important;
    font-family: var(--cck-sans) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: .11em !important;
  }

  body.cck-bespoke-site .cck-case-meta span {
    font-family: var(--cck-sans) !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
  }

  body.cck-bespoke-site .cck-case-section,
  body.cck-bespoke-site .cck-project-mini-gallery-section,
  body.cck-bespoke-site .cck-project-gallery-section,
  body.cck-bespoke-site .cck-case-transformation,
  body.cck-bespoke-site .cck-materials-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* Remove Divi's row padding accumulation inside the already-padded
     project sections; explicit margins below supply the rhythm. */
  body.cck-bespoke-site .cck-case-section > .et_pb_row,
  body.cck-bespoke-site .cck-project-mini-gallery-section > .et_pb_row,
  body.cck-bespoke-site .cck-project-gallery-section > .et_pb_row,
  body.cck-bespoke-site .cck-case-transformation > .et_pb_row,
  body.cck-bespoke-site .cck-materials-section > .et_pb_row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.cck-bespoke-site .cck-case-copy {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
  }

  body.cck-bespoke-site .cck-case-copy p,
  body.cck-bespoke-site .cck-case-copy p span,
  body.cck-bespoke-site .cck-project-body p,
  body.cck-bespoke-site .cck-project-body p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-case-copy p {
    margin-bottom: 14px !important;
  }

  body.cck-bespoke-site .cck-case-copy p:last-child {
    margin-bottom: 0 !important;
  }

  /* Gallery heading → first image: remove the large empty field. */
  body.cck-bespoke-site .cck-project-gallery-head {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.cck-bespoke-site .cck-project-gallery-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
    row-gap: 18px !important;
  }

  body.cck-bespoke-site .cck-project-gallery-grid > .et_pb_column {
    margin-bottom: 18px !important;
  }

  /* Transformation heading → media. */
  body.cck-bespoke-site .cck-before-after {
    margin-top: 18px !important;
    padding-top: 0 !important;
    gap: 0 !important;
  }

  body.cck-bespoke-site .cck-before-after > .et_pb_column {
    margin-bottom: 18px !important;
  }

  /* Materials heading → cards and cards themselves. */
  body.cck-bespoke-site .cck-materials-grid {
    margin-top: 18px !important;
    padding-top: 0 !important;
    gap: 0 !important;
  }

  body.cck-bespoke-site .cck-materials-grid > .et_pb_column {
    margin-bottom: 20px !important;
  }

  body.cck-bespoke-site .cck-material-card {
    margin: 0 !important;
    padding-top: 16px !important;
  }

  body.cck-bespoke-site .cck-material-card h3 {
    margin: 0 0 9px !important;
    font-family: var(--cck-serif) !important;
    font-size: 28px !important;
    line-height: 1.08 !important;
  }

  body.cck-bespoke-site .cck-material-card p,
  body.cck-bespoke-site .cck-material-card p span {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-case-back-row {
    margin-top: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* --------------------------------------------------------------
     7. PROJECTS OVERVIEW CARDS
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-projects-lead p,
  body.cck-bespoke-site .cck-projects-lead p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-project-card-title h2,
  body.cck-bespoke-site .cck-project-card-title h3 {
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  body.cck-bespoke-site .cck-project-card-meta,
  body.cck-bespoke-site .cck-project-card-meta p,
  body.cck-bespoke-site .cck-project-card-meta p span {
    font-family: var(--cck-sans) !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  body.cck-bespoke-site .cck-project-card-copy p,
  body.cck-bespoke-site .cck-project-card-copy p span {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  body.cck-bespoke-site .cck-project-link .et_pb_button,
  body.cck-bespoke-site .cck-project-link a,
  body.cck-bespoke-site .cck-text-link .et_pb_button,
  body.cck-bespoke-site .cck-text-link a {
    font-family: var(--cck-sans) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* --------------------------------------------------------------
     8. CONTACT SUPPORTING COPY
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-contact-form-intro,
  body.cck-bespoke-site .cck-contact-form-intro p,
  body.cck-bespoke-site .cck-contact-next-copy p,
  body.cck-bespoke-site .cck-contact-info-block p,
  body.cck-bespoke-site .cck-contact-info-block a {
    font-size: 18px !important;
    line-height: 1.50 !important;
  }
}

/* Slightly narrower phones retain the same readable body scale; only
   the largest principal title is trimmed a touch. */
@media (max-width: 430px) {
  body.cck-bespoke-site .cck-case-title h1,
  body.cck-bespoke-site .cck-case-title .et_pb_text_inner h1 {
    font-size: 48px !important;
  }

  body.cck-bespoke-site .cck-heading h2,
  body.cck-bespoke-site .cck-heading .et_pb_text_inner h2,
  body.cck-bespoke-site .cck-case-heading h2,
  body.cck-bespoke-site .cck-case-heading .et_pb_text_inner h2,
  body.cck-bespoke-site .cck-project-gallery-heading h2,
  body.cck-bespoke-site .cck-project-gallery-heading .et_pb_text_inner h2 {
    font-size: 36px !important;
  }
}


/* ================================================================
   RELEASE 8.1.22 — CONTACT MOBILE SCALE + RHYTHM
   The Contact layout contains older page-level mobile spacing rules.
   These higher-specificity theme selectors deliberately override those
   values so the Contact page sits comfortably inside the global 8.1.21
   mobile system rather than appearing larger and more widely spaced.
   Desktop/tablet and all non-Contact pages are unchanged.
   ================================================================ */
@media (max-width: 767px) {

  /* --------------------------------------------------------------
     Contact hero
     -------------------------------------------------------------- */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero-row {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero .cck-small-label {
    margin-bottom: 16px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero .cck-small-label p,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero .cck-small-label p span {
    font-family: var(--cck-sans) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .13em !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero-copy .cck-display h1,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero-copy .cck-display .et_pb_text_inner h1 {
    margin: 0 !important;
    font-size: 46px !important;
    line-height: .98 !important;
    letter-spacing: -.03em !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-lead {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-lead p,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-lead p span {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.48 !important;
  }

  /* --------------------------------------------------------------
     Main contact/form section
     -------------------------------------------------------------- */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-row {
    padding-top: 38px !important;
    padding-bottom: 40px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-info {
    margin-bottom: 30px !important;
    padding-right: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-info > .cck-small-label {
    margin-bottom: 16px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-info-block {
    margin: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-info-block .cck-contact-info-label {
    margin: 0 0 5px !important;
    font-family: var(--cck-sans) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .08em !important;
    font-weight: 600 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-info-block > p:not(.cck-contact-info-label),
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-info-block > p:not(.cck-contact-info-label) a {
    margin: 0 0 18px !important;
    font-family: var(--cck-serif) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-info-note {
    margin-top: 4px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-info-note p,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-info-note p span {
    margin: 0 0 9px !important;
    font-family: var(--cck-serif) !important;
    font-size: 16px !important;
    line-height: 1.46 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-info-note p:last-child {
    margin-bottom: 0 !important;
  }

  /* Form heading + intro */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-copy .cck-heading {
    margin-bottom: 14px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-copy .cck-heading h2,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-copy .cck-heading .et_pb_text_inner h2 {
    margin: 0 !important;
    font-size: 36px !important;
    line-height: 1.02 !important;
    letter-spacing: -.025em !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-intro {
    margin: 0 0 22px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-intro p,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-intro p span {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.48 !important;
  }

  /* --------------------------------------------------------------
     Form fields — the inherited 42px field margin + 24px field
     padding was creating very tall gaps on phones.
     -------------------------------------------------------------- */
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_pb_contact_field {
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .contact-box input,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box textarea,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .input,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_pb_contact_field input,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_pb_contact_field textarea {
    font-family: var(--cck-sans) !important;
    font-size: 17px !important;
    line-height: 1.42 !important;
    padding-top: 8px !important;
    padding-bottom: 12px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .contact-box textarea,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_pb_contact_field textarea {
    min-height: 132px !important;
    height: 132px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_contact_bottom_container,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_pb_contact_form .et_contact_bottom_container {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_pb_contact_submit,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box button[type="submit"],
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box button.et_pb_button {
    font-size: 12px !important;
    line-height: 1.30 !important;
  }

  /* --------------------------------------------------------------
     What Happens Next
     -------------------------------------------------------------- */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-row {
    padding-top: 34px !important;
    padding-bottom: 38px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next .cck-small-label {
    margin-bottom: 14px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-copy .cck-heading {
    margin-bottom: 14px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-copy .cck-heading h2,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-copy .cck-heading .et_pb_text_inner h2 {
    margin: 0 !important;
    font-size: 36px !important;
    line-height: 1.02 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-copy p,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-copy p span {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.48 !important;
  }
}

@media (max-width: 430px) {
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero-copy .cck-display h1,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero-copy .cck-display .et_pb_text_inner h1 {
    font-size: 44px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-copy .cck-heading h2,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-copy .cck-heading .et_pb_text_inner h2,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-copy .cck-heading h2,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-copy .cck-heading .et_pb_text_inner h2 {
    font-size: 34px !important;
  }
}


/* ================================================================
   RELEASE 8.1.23 — CONTACT FORM CONTROLS ONLY
   Keep all 8.1.22 Contact/page typography unchanged. This patch only
   refines the form controls themselves. Field names remain deliberately
   sans-serif (unlike the surrounding serif editorial copy), but at a
   more restrained 16px mobile size with a compact, consistent rhythm.
   ================================================================ */
@media (max-width: 767px) {

  /* Remove Divi/module height accumulation from each field wrapper. */
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box p.et_pb_contact_field,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_pb_contact_field {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
  }

  /* Text fields: deliberately utilitarian sans-serif, not editorial serif. */
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box input[type="text"],
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box input[type="email"],
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box input[type="tel"],
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_pb_contact_field input,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 5px 0 9px !important;
    font-family: var(--cck-sans) !important;
    font-size: 16px !important;
    line-height: 1.30 !important;
  }

  /* Placeholder / visible field names. */
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box input::placeholder,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box textarea::placeholder {
    font-family: var(--cck-sans) !important;
    font-size: 16px !important;
    line-height: 1.30 !important;
    opacity: .72 !important;
  }

  /* Message field: compact but still comfortable to type into. */
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box textarea,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_pb_contact_field textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 116px !important;
    min-height: 116px !important;
    margin: 0 !important;
    padding: 6px 0 10px !important;
    font-family: var(--cck-sans) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /* Keep the button close to the final field without changing its styling. */
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_contact_bottom_container,
  body:has(.cck-contact-hero).cck-bespoke-site .contact-box .et_pb_contact_form .et_contact_bottom_container {
    margin-top: 2px !important;
  }
}


/* ================================================================
   RELEASE 8.1.24 — GLOBAL FOOTER CTA COPY SCALE
   The "Start a conversation / Discuss your project" strip is part of
   the Theme Builder footer and therefore repeats across the site.
   Align only its supporting paragraph and utility text with the agreed
   global type scale. Heading size/layout are deliberately unchanged.
   ================================================================ */

/* Desktop: same editorial paragraph scale used elsewhere site-wide. */
@media (min-width: 981px) {
  footer.et-l--footer .cck-footer-cta > p,
  footer.et-l--footer .cck-footer-cta > p span {
    font-family: var(--cck-serif) !important;
    font-size: clamp(20px, 1.25vw, 24px) !important;
    line-height: 1.50 !important;
  }

  footer.et-l--footer .cck-footer-eyebrow,
  footer.et-l--footer .cck-footer-eyebrow p,
  footer.et-l--footer .cck-footer-eyebrow p span,
  footer.et-l--footer .cck-footer-cta-link,
  footer.et-l--footer .cck-footer-cta-link a,
  footer.et-l--footer .cck-footer-cta-link .et_pb_button {
    font-family: var(--cck-sans) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* Tablet: maintain the same hierarchy without over-scaling. */
@media (min-width: 768px) and (max-width: 980px) {
  footer.et-l--footer .cck-footer-cta > p,
  footer.et-l--footer .cck-footer-cta > p span {
    font-family: var(--cck-serif) !important;
    font-size: 19px !important;
    line-height: 1.50 !important;
  }

  footer.et-l--footer .cck-footer-eyebrow,
  footer.et-l--footer .cck-footer-eyebrow p,
  footer.et-l--footer .cck-footer-eyebrow p span,
  footer.et-l--footer .cck-footer-cta-link,
  footer.et-l--footer .cck-footer-cta-link a,
  footer.et-l--footer .cck-footer-cta-link .et_pb_button {
    font-family: var(--cck-sans) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* Mobile already uses the agreed 18px narrative scale from 8.1.20/21.
   Reassert it here so the global CTA cannot drift from page-level CSS. */
@media (max-width: 767px) {
  footer.et-l--footer .cck-footer-cta > p,
  footer.et-l--footer .cck-footer-cta > p span {
    font-family: var(--cck-serif) !important;
    font-size: 18px !important;
    line-height: 1.50 !important;
  }

  footer.et-l--footer .cck-footer-eyebrow,
  footer.et-l--footer .cck-footer-eyebrow p,
  footer.et-l--footer .cck-footer-eyebrow p span,
  footer.et-l--footer .cck-footer-cta-link,
  footer.et-l--footer .cck-footer-cta-link a,
  footer.et-l--footer .cck-footer-cta-link .et_pb_button {
    font-family: var(--cck-sans) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}


/* ================================================================
   RELEASE 8.1.25 — CONTACT DESKTOP HERO ALIGNMENT + TYPE
   Bring the Contact hero into the same editorial hierarchy as the
   rest of the site. Only the Contact hero is affected.
   ================================================================ */
@media (min-width: 981px) {

  /* Bring the left section label and main content slightly closer
     together than the original 1/3 + 2/3 visual split. */
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-row > .et_pb_column:first-child {
    flex: 0 0 29% !important;
    width: 29% !important;
    max-width: 29% !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-row > .et_pb_column:last-child {
    flex: 0 0 71% !important;
    width: 71% !important;
    max-width: 71% !important;
  }

  /* Site-wide utility-label scale. */
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label p,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label p span {
    font-family: var(--cck-sans) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: .14em !important;
  }

  /* Main Contact H1 explicitly follows the established site-wide
     display-heading scale rather than a Contact-specific value. */
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display {
    margin-bottom: 26px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display h1,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display .et_pb_text_inner h1 {
    margin: 0 !important;
    font-size: clamp(52px, 5.2vw, 92px) !important;
    line-height: .95 !important;
    letter-spacing: -.03em !important;
  }

  /* Remove the extra module gap that made the supporting paragraph
     sit noticeably farther from its heading than elsewhere. */
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-lead {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Match the agreed site-wide desktop editorial paragraph scale. */
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-lead p,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-lead p span {
    margin: 0 !important;
    font-family: var(--cck-serif) !important;
    font-size: clamp(20px, 1.25vw, 24px) !important;
    line-height: 1.50 !important;
  }
}


/* ================================================================
   RELEASE 8.1.28 — CONTACT HERO MATCHES APPROVED GLOBAL CTA
   Reference: the approved Theme Builder "START A CONVERSATION /
   Discuss your project." strip.

   The Contact page already uses the same 1/3 + 2/3 Divi structure,
   but its row was created with offset-columns_6 rather than the CTA's
   offset-columns_0. Do not resize or translate columns. Simply remove
   that extra column gap and match the CTA's content proportions.
   ================================================================ */
@media (min-width: 981px) {

  /* Keep the original Divi 1/3 + 2/3 structure exactly intact. */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero-row {
    display: flex !important;
    width: 92% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 60px !important;
    padding-bottom: 50px !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: flex-start !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-row > .et_pb_column:first-child {
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-row > .et_pb_column:last-child {
    flex: 0 0 66.666667% !important;
    width: 66.666667% !important;
    max-width: 66.666667% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* No positional hacks: second column begins naturally at 1/3. */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero-copy {
    position: static !important;
    left: auto !important;
    transform: none !important;
    max-width: 800px !important;
  }

  /* Same utility-label treatment as the approved CTA eyebrow. */
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label p,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label p span {
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: var(--cck-sans) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: .14em !important;
  }

  /* Match the approved CTA heading proportions, not the oversized
     page-display H1 that caused the Contact hero to feel different. */
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display {
    margin: 0 0 20px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display h1,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display .et_pb_text_inner h1 {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 800px !important;
    font-family: var(--cck-serif) !important;
    font-size: clamp(46px, 5vw, 74px) !important;
    font-weight: 400 !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
  }

  /* Supporting copy uses the agreed site-wide editorial scale while
     retaining the same 680px measure as the approved global CTA. */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-lead {
    max-width: 680px !important;
    margin: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-lead p,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-lead p span {
    margin: 0 !important;
    font-family: var(--cck-serif) !important;
    font-size: clamp(20px, 1.25vw, 24px) !important;
    line-height: 1.50 !important;
  }

  /* Apply the same zero-offset column relationship to What Happens
     Next, but do not otherwise alter that section's approved styling. */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-row {
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-copy {
    position: static !important;
    left: auto !important;
    transform: none !important;
  }
}


/* ================================================================
   RELEASE 8.1.29 — IPAD PORTRAIT HERO BALANCE
   QA reference: iPad portrait screenshots supplied 26 Aug 2026.

   Tenterden is the visual baseline: generous but controlled heading
   scale, readable supporting copy, and a deliberate title-to-copy gap.
   Apply that hierarchy consistently across the site's page headers
   without changing desktop, tablet-landscape or phone layouts.
   ================================================================ */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {

  /* --------------------------------------------------------------
     Shared supporting-copy scale for page heroes.
     20px is intentionally between desktop editorial copy and phone
     copy, and corrects the visibly undersized Tenterden lead.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-hero .cck-hero-intro p,
  body.cck-bespoke-site .cck-hero .cck-hero-intro p span,
  body.cck-bespoke-site .cck-case-lead p,
  body.cck-bespoke-site .cck-case-lead p span,
  body.cck-bespoke-site .cck-projects-lead p,
  body.cck-bespoke-site .cck-projects-lead p span,
  body.cck-bespoke-site .cck-about-hero-v5-intro p,
  body.cck-bespoke-site .cck-about-hero-v5-intro p span,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-lead p,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-lead p span {
    font-family: var(--cck-serif) !important;
    font-size: 20px !important;
    line-height: 1.50 !important;
  }

  /* --------------------------------------------------------------
     HOME
     The previous 10ch limit made the headline too tall in portrait.
     Give it a wider editorial measure and explicitly control the
     headline-to-copy rhythm.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-hero .cck-hero-copy {
    padding-top: 50px !important;
    padding-bottom: 46px !important;
  }

  body.cck-bespoke-site .cck-hero .cck-display {
    margin: 0 !important;
  }

  body.cck-bespoke-site .cck-hero .cck-display h1,
  body.cck-bespoke-site .cck-hero .cck-display .et_pb_text_inner h1 {
    max-width: 12.5ch !important;
    margin: 0 !important;
    font-size: clamp(58px, 7.4vw, 70px) !important;
    line-height: .95 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }

  body.cck-bespoke-site .cck-hero .cck-hero-intro {
    max-width: 680px !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
  }

  body.cck-bespoke-site .cck-hero .cck-text-link {
    margin-top: 28px !important;
  }

  /* --------------------------------------------------------------
     PROJECT CASE-STUDY HEROES
     Hawkhurst and Clock Tower had drifted to larger tablet title
     values than Tenterden. Normalise all case pages to Tenterden's
     successful portrait scale and remove hidden module margin.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-case-hero {
    padding-top: 34px !important;
  }

  body.cck-bespoke-site .cck-case-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.cck-bespoke-site .cck-case-title h1,
  body.cck-bespoke-site .cck-case-title .et_pb_text_inner h1 {
    margin: 0 !important;
    max-width: none !important;
    font-size: clamp(62px, 7vw, 82px) !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance !important;
  }

  body.cck-bespoke-site .cck-case-lead {
    max-width: 720px !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
  }

  /* The generic Divi tablet rule leaves 54px beneath the case-head
     row. Bring that down so the lead/meta transition feels intentional,
     while retaining Tenterden's overall generous hero composition. */
  body.cck-bespoke-site .cck-case-head {
    min-height: 0 !important;
    padding-bottom: 30px !important;
  }

  /* Metadata remains utilitarian and unchanged in size. Only remove
     accidental top-padding accumulation from the separate row. */
  body.cck-bespoke-site .cck-case-meta-row {
    padding-top: 0 !important;
  }

  /* --------------------------------------------------------------
     PROJECTS OVERVIEW
     Keep the successful label-left / title-right composition, but
     moderate the portrait H1 and close the title-to-introduction gap.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-projects-hero {
    padding-top: 50px !important;
    padding-bottom: 54px !important;
  }

  body.cck-bespoke-site .cck-projects-title {
    margin: 0 !important;
  }

  body.cck-bespoke-site .cck-projects-title h1,
  body.cck-bespoke-site .cck-projects-title .et_pb_text_inner h1 {
    margin: 0 !important;
    font-size: clamp(66px, 8vw, 78px) !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
  }

  body.cck-bespoke-site .cck-projects-lead {
    max-width: 700px !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
  }

  /* --------------------------------------------------------------
     ABOUT HERO CARD
     Preserve the overlapping-card concept, but bring its tablet type
     and heading-to-copy rhythm into the same portrait hierarchy.
     -------------------------------------------------------------- */
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site
  .cck-about-hero-v5-card-row .cck-display {
    margin: 0 !important;
  }

  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site
  .cck-about-hero-v5-card-row .cck-display h1,
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site
  .cck-about-hero-v5-card-row .cck-display .et_pb_text_inner h1 {
    margin: 0 !important;
    max-width: 11ch !important;
    font-size: clamp(54px, 6.8vw, 66px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }

  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site
  .cck-about-hero-v5-intro {
    max-width: 620px !important;
    margin-top: 26px !important;
    margin-bottom: 0 !important;
  }

  /* --------------------------------------------------------------
     CONTACT HERO
     Keep the approved Contact structure from 8.1.28. Tablet portrait
     receives only the same title/copy hierarchy used elsewhere.
     -------------------------------------------------------------- */
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display {
    margin: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display h1,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display .et_pb_text_inner h1 {
    margin: 0 !important;
    font-size: clamp(60px, 7.4vw, 72px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-lead {
    max-width: 680px !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
  }

  /* --------------------------------------------------------------
     Shared utility labels in hero contexts.
     Keep them restrained but not tiny on iPad portrait.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-case-hero .cck-small-label,
  body.cck-bespoke-site .cck-projects-hero .cck-small-label,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero .cck-small-label,
  body:has(.cck-about-hero-v5-card-row).cck-bespoke-site .cck-about-hero-v5-card-row .cck-small-label {
    font-family: var(--cck-sans) !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
  }
}


/* ================================================================
   RELEASE 8.1.30 — IPAD PORTRAIT BREAKPOINT CORRECTION
   iPad Safari in the supplied QA screenshots is rendering at a
   1024px CSS viewport in portrait. The original 8.1.29 max-width
   of 980px therefore never fired on the device. The 8.1.29 portrait
   system above now extends to 1100px so it covers 1024px iPads while
   still excluding landscape iPad widths.
   ================================================================ */


/* ================================================================
   RELEASE 8.1.31 — NO MOTIFS IN IPAD PORTRAIT
   iPad portrait should not use architectural motifs as gap-fillers.
   Remove every motif treatment and also release any space that was
   reserved specifically for those decorative graphics.
   ================================================================ */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {

  /* Hero motifs: remove graphic AND the right-side space reserved for it. */
  body.cck-bespoke-site .cck-page-hero .cck-wrap::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }

  body.cck-bespoke-site .cck-page-hero .cck-wrap {
    padding-right: 0 !important;
    min-height: 0 !important;
  }

  /* Editorial/aside motifs. */
  body.cck-bespoke-site .cck-motif-aside::before,
  body.cck-bespoke-site .cck-motif-elevation::before,
  body.cck-bespoke-site .cck-motif-plan::before,
  body.cck-bespoke-site .cck-motif-plan-detail::before,
  body.cck-bespoke-site .cck-motif-courtyard::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }

  /* Standalone motif panels are decorative-only: remove the whole panel
     in portrait so it cannot leave an empty architectural 'gap'. */
  body.cck-bespoke-site .cck-motif-panel {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.cck-bespoke-site .cck-motif-panel::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }

  /* If a Divi row contains a decorative motif column, let the real content
     occupy the full row instead of retaining the removed column's width. */
  body.cck-bespoke-site .et_pb_row:has(> .cck-motif-panel)
  > .et_pb_column:not(.cck-motif-panel) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Defensive: suppress any motif image variable used as a direct background
     on motif-labelled elements in portrait. */
  body.cck-bespoke-site .cck-motif-elevation,
  body.cck-bespoke-site .cck-motif-plan,
  body.cck-bespoke-site .cck-motif-plan-detail,
  body.cck-bespoke-site .cck-motif-courtyard {
    background-image: none !important;
  }
}


/* ================================================================
   RELEASE 8.1.32 — SELECTIVE MOTIFS FOR IPAD PORTRAIT
   Correction to 8.1.31: motifs are NOT to be removed wholesale.
   They should occupy genuine negative space where they improve the
   editorial balance, while staying out of content-dense grids,
   Contact, galleries and material/detail cards.
   ================================================================ */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {

  /* --------------------------------------------------------------
     1. RESTORE PURPOSE-BUILT HERO MOTIFS
     Only where a page already carries the cck-page-hero motif system.
     Keep them smaller/fainter than desktop and avoid reserving a huge
     empty column purely for the graphic.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-page-hero .cck-wrap {
    position: relative !important;
    min-height: 300px !important;
    padding-right: 235px !important;
  }

  body.cck-bespoke-site .cck-page-hero .cck-wrap::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    width: 220px !important;
    height: 175px !important;
    transform: translateY(-48%) !important;
    pointer-events: none !important;
    opacity: .14 !important;
    background-image: var(--cck-motif-image, url("../images/motifs/motif-elevation.png")) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  /* --------------------------------------------------------------
     2. RESTORE EDITORIAL ASIDE MOTIFS
     These are specifically intended for quiet left-hand/aside space,
     e.g. the About / How CCK Works type compositions.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-motif-aside {
    position: relative !important;
  }

  body.cck-bespoke-site .cck-motif-aside::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 64px !important;
    width: 210px !important;
    height: 155px !important;
    pointer-events: none !important;
    opacity: .12 !important;
    background-image: var(--cck-motif-image, url("../images/motifs/motif-plan.png")) !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  /* Standalone motif panels are restored only where the Divi layout
     explicitly contains one — i.e. an intentionally empty motif column. */
  body.cck-bespoke-site .cck-motif-panel {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 190px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.cck-bespoke-site .cck-motif-panel::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 8% 5% !important;
    pointer-events: none !important;
    opacity: .13 !important;
    background-image: var(--cck-motif-image, url("../images/motifs/motif-plan-detail.png")) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  /* --------------------------------------------------------------
     3. PROJECT CASE-STUDY HEROES
     The supplied iPad portraits leave a deliberate quiet area to the
     lower-right of the title/lead before metadata. Use that space.
     This applies to Hawkhurst, Clock Tower, Tenterden and future
     shared case-study pages.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-case-head {
    position: relative !important;
    overflow: visible !important;
  }

  body.cck-bespoke-site .cck-case-head::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: 2% !important;
    bottom: 8px !important;
    width: 225px !important;
    height: 145px !important;
    pointer-events: none !important;
    opacity: .095 !important;
    background-image: url("../images/motifs/motif-elevation.png") !important;
    background-position: right bottom !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    z-index: 0 !important;
  }

  body.cck-bespoke-site .cck-case-head > * {
    position: relative !important;
    z-index: 1 !important;
  }

  /* --------------------------------------------------------------
     4. PROJECTS OVERVIEW HERO
     Use the otherwise empty lower-left rail beneath SELECTED WORK.
     This is the kind of negative space the motif system was designed
     for and does not compete with the project title/copy.
     -------------------------------------------------------------- */
  body.cck-bespoke-site .cck-projects-hero {
    position: relative !important;
    overflow: hidden !important;
  }

  body.cck-bespoke-site .cck-projects-hero::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 5.5% !important;
    top: 155px !important;
    width: 235px !important;
    height: 175px !important;
    pointer-events: none !important;
    opacity: .10 !important;
    background-image: url("../images/motifs/motif-plan.png") !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    z-index: 0 !important;
  }

  body.cck-bespoke-site .cck-projects-hero > * {
    position: relative !important;
    z-index: 1 !important;
  }

  /* --------------------------------------------------------------
     5. DELIBERATE EXCLUSIONS
     No motifs where content already fills the composition.
     -------------------------------------------------------------- */

  /* Contact follows the approved clean CTA-like composition. */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero::before,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero::after,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-row::before,
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-form-row::after {
    content: none !important;
    display: none !important;
  }

  /* Full-width gallery / transformation / materials/detail grids remain
     motif-free — imagery/cards already occupy the available space. */
  body.cck-bespoke-site .cck-project-gallery-grid::before,
  body.cck-bespoke-site .cck-project-gallery-grid::after,
  body.cck-bespoke-site .cck-before-after::before,
  body.cck-bespoke-site .cck-before-after::after,
  body.cck-bespoke-site .cck-materials-grid::before,
  body.cck-bespoke-site .cck-materials-grid::after,
  body.cck-bespoke-site .cck-material-card::before,
  body.cck-bespoke-site .cck-material-card::after {
    content: none !important;
    display: none !important;
  }
}


/* ================================================================
   RELEASE 8.1.33 — CONTACT IPAD EYEBROW ONE-LINE FIX
   Keep the approved iPad portrait Contact hero geometry from 8.1.32.
   Only prevent the Contact eyebrow from wrapping at 1024px portrait.
   ================================================================ */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label .et_pb_text_inner,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label p,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label p span {
    display: inline-block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-family: var(--cck-sans) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .12em !important;
    margin: 0 !important;
  }
}


/* ================================================================
   RELEASE 8.1.34 — CONTACT IPAD PORTRAIT STACKED HERO
   The two-column Contact desktop composition does not balance at the
   1024px iPad portrait viewport: the eyebrow and title compete for the
   same horizontal band. In portrait, use the same successful editorial
   hierarchy as the project case-study heroes:
       eyebrow
       title
       supporting copy
   Desktop and landscape retain the two-column Contact composition.
   ================================================================ */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {

  /* HERO: collapse the Contact row to one editorial column. */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero-row {
    display: block !important;
    width: 92% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 42px !important;
    padding-bottom: 46px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-row > .et_pb_column {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Eyebrow sits above the title, matching Tenterden/Hawkhurst logic. */
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-row > .et_pb_column:first-child {
    margin-bottom: 24px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label .et_pb_text_inner,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label p,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero .cck-small-label p span {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-family: var(--cck-sans) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .12em !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-hero-copy {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 760px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display {
    margin: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display h1,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-hero-copy .cck-display .et_pb_text_inner h1 {
    margin: 0 !important;
    max-width: 9.5ch !important;
    font-family: var(--cck-serif) !important;
    font-size: clamp(62px, 7vw, 76px) !important;
    line-height: .94 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-lead {
    max-width: 690px !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-lead p,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-lead p span {
    margin: 0 !important;
    font-family: var(--cck-serif) !important;
    font-size: 20px !important;
    line-height: 1.50 !important;
  }

  /* WHAT HAPPENS NEXT: same portrait hierarchy for consistency. */
  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-row {
    display: block !important;
    width: 92% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 38px !important;
    padding-bottom: 40px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-row > .et_pb_column {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-row > .et_pb_column:first-child {
    margin-bottom: 22px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-copy {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 760px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-copy .cck-heading {
    margin: 0 0 24px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-copy .cck-heading h2,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-copy .cck-heading .et_pb_text_inner h2 {
    margin: 0 !important;
    max-width: 11ch !important;
    font-size: clamp(46px, 5.5vw, 58px) !important;
    line-height: 1.00 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-copy p,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-copy p span {
    margin: 0 !important;
    font-family: var(--cck-serif) !important;
    font-size: 20px !important;
    line-height: 1.50 !important;
  }
}


/* ================================================================
   RELEASE 8.1.35 — CONTACT 'WHAT HAPPENS NEXT' IPAD REVERT
   8.1.34 correctly improved the TOP Contact hero in iPad portrait,
   but it also stacked the lower 'What Happens Next' section. That
   lower section was already better as a label-left / content-right
   editorial composition. Restore only that section.
   ================================================================ */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-row {
    display: flex !important;
    width: 92% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 40px !important;
    padding-bottom: 42px !important;
    gap: 0 !important;
    align-items: flex-start !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-row > .et_pb_column:first-child {
    display: block !important;
    flex: 0 0 32% !important;
    width: 32% !important;
    max-width: 32% !important;
    margin: 0 !important;
    padding: 0 28px 0 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-row > .et_pb_column:last-child {
    display: block !important;
    flex: 0 0 68% !important;
    width: 68% !important;
    max-width: 68% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site .cck-contact-next-copy {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 680px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next .cck-small-label,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next .cck-small-label p,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next .cck-small-label p span {
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: var(--cck-sans) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .12em !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-copy .cck-heading {
    margin: 0 0 22px !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-copy .cck-heading h2,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-copy .cck-heading .et_pb_text_inner h2 {
    margin: 0 !important;
    max-width: 620px !important;
    font-family: var(--cck-serif) !important;
    font-size: clamp(46px, 5.1vw, 54px) !important;
    line-height: 1.00 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }

  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-copy p,
  body:has(.cck-contact-hero).cck-bespoke-site
  .cck-contact-next-copy p span {
    margin: 0 !important;
    font-family: var(--cck-serif) !important;
    font-size: 20px !important;
    line-height: 1.50 !important;
  }
}


/* ================================================================
   RELEASE 8.1.36 — FOOTER CTA IPAD PORTRAIT MOTIF RESTORE
   The global "Start a conversation / Discuss your project" footer CTA
   leaves a genuine quiet area in the left-hand column on iPad portrait.
   Reintroduce a subtle approved architectural motif there so the section
   feels intentionally balanced across all pages that use this CTA.
   ================================================================ */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {

  footer.et-l--footer .et_pb_row:has(.cck-footer-cta) {
    position: relative !important;
    overflow: visible !important;
  }

  footer.et-l--footer .et_pb_row:has(.cck-footer-cta) > .et_pb_column:first-child {
    position: relative !important;
    overflow: visible !important;
    min-height: 220px !important;
  }

  footer.et-l--footer .et_pb_row:has(.cck-footer-cta) > .et_pb_column:first-child::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 18px !important;
    width: 210px !important;
    height: 150px !important;
    pointer-events: none !important;
    opacity: .12 !important;
    background-image: url("../images/motifs/motif-courtyard.png") !important;
    background-position: left bottom !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  footer.et-l--footer .et_pb_row:has(.cck-footer-cta) > .et_pb_column:first-child > * {
    position: relative !important;
    z-index: 1 !important;
  }
}