/* ------------------------------------------------------------------
   editorial.css — inner-page look, matching editorial-preview.php
   Loaded AFTER style.css / custom.css, overrides only.
   Nothing here touches the banner, the navigation or the CMS.
   To remove: delete the <link> line from the page. Nothing else changes.
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Hanken+Grotesk:wght@200;300;400;500&display=swap');

/* ---- the content section ------------------------------------------ */

section.background-11 {
  background-color: #FFFFFF !important;
  /* the banner already leaves ~51px of white below its photo, and Bootstrap's
     pt-4 on the sidebar adds ~29 more — so this is the only knob that's mine */
  padding-top: 30px !important;
  padding-bottom: 82px !important;
}

/* drop Bootstrap's extra top padding on the sidebar column */
section.background-11 .sticky-lg-top { padding-top: 0 !important; }

section.background-11,
section.background-11 .font-1,
section.background-11 p,
section.background-11 li,
section.background-11 .lead {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.95;
  color: #2A2A2A;
}

section.background-11 p { margin-bottom: 18px; }

/* sidebar heading — the display face */
section.background-11 h2,
section.background-11 h3 {
  font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: 0 !important;
  text-transform: none;
  color: #111111;
  margin-bottom: 28px;
}

/* in-copy headings — letterspaced small caps */
section.background-11 h4,
section.background-11 h5,
section.background-11 h6 {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 2.4px !important;
  text-transform: uppercase;
  color: #111111;
  margin: 44px 0 16px;
}

/* pull quotes, however the CMS wraps them */
section.background-11 blockquote {
  margin: 0 0 40px;
  padding: 0;
  border: none;
  font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.4;
  color: #111111;
}
section.background-11 blockquote p {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* links in body copy */
section.background-11 a:not(.btn) {
  color: #111111;
  text-decoration: none;
  border-bottom: 1px solid #008795;
}
section.background-11 a:not(.btn):hover { color: #006975; }

/* photographs, but not the logos or the APT mark */
section.background-11 img:not([src*="logo"]) {
  filter: grayscale(1);
  transition: filter .4s ease;
}
section.background-11 img:not([src*="logo"]):hover { filter: grayscale(0); }

/* ---- buttons become editorial links -------------------------------- */

.btn-outline-primary {
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid #008795 !important;
  border-radius: 0 !important;
  padding: 0 0 9px !important;
  color: #111111 !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 3px !important;
  text-transform: uppercase;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: none !important;
  border-bottom-color: #008795 !important;
  color: #006975 !important;
  box-shadow: none !important;
}

/* ---- the contact band goes black ----------------------------------- */

section.section-footer.background-10 {
  background-color: #111111 !important;
  padding-top: 70px;
  padding-bottom: 70px;
}
section.section-footer.background-10 p.color-white {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: #E8E6E1 !important;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
section.section-footer.background-10 a { color: #FFFFFF; }
section.section-footer.background-10 a:hover { color: #7FC4CB; }

/* ---- the credit strip ---------------------------------------------- */

/* multiply needs a painted backdrop. body's colour propagates to the page canvas,
   which isn't part of the blending backdrop — so the badges blended against nothing
   and kept their white box. Painting the strip itself fixes it. */
section.section-footer:not(.background-10) {
  background-color: #F7F7F5;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 11px;
}

/* ---- redesigned inner pages ---------------------------------------- */

/* grey ground. NOT on <main>: the banner photo is a z-index:-1 element, so a
   background on an ancestor paints over it and the photo disappears. */
body { background: #F7F7F5 !important; }
main { background: transparent !important; }
.znav-white, .znav-container { background-color: #F7F7F5 !important; }
section.background-11 { background-color: transparent !important; }

.ed { font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #111111; background: transparent; }
.ed .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* phone / email strip under the banner */
.ed-contact { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; }
.ed-contact a { font-size: 16.5px; letter-spacing: 1.6px; color: #111111; text-decoration: none; }
.ed-contact a:hover { color: #006975; }
.ed-contact .sep { color: #008795; }

/* the opening statement */
.ed-lede { padding: 81px 0 0; text-align: center; }
.ed-eyebrow {
  display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 2.6px;
  text-transform: uppercase; color: #006975;
}
.ed-lede-body { max-width: 760px; margin: 0 auto; }
.ed-lede-body p {
  margin: 22px 0 0; font-size: 21px; line-height: 1.7; font-weight: 300; color: #2A2A2A;
}

/* the numbered list of services */
.ed-list { padding: 72px 0 84px; }
.ed-item {
  display: flex; align-items: flex-start; gap: 36px;
  padding: 34px 0; border-top: 1px solid #D9D6D0;
}
.ed-item:last-child { border-bottom: 1px solid #D9D6D0; }
.ed-num {
  font-family: 'Bodoni Moda', Didot, Georgia, serif; font-size: 19px; color: #006975;
  width: 40px; flex-shrink: 0; padding-top: 10px;
}
.ed-item-title {
  font-family: 'Bodoni Moda', Didot, Georgia, serif; font-weight: 400; font-size: 31px;
  line-height: 1.2; color: #111111; width: 300px; flex-shrink: 0; margin: 0;
  letter-spacing: 0; text-transform: none;
}
.ed-item-body { flex-grow: 1; }

/* CMS content sometimes floats an image (the APT logo). flow-root makes the
   container wrap the float instead of letting it escape under the next section. */
.ed-lede-body,
.ed-prose,
.ed-item-body { display: flow-root; }
/* CMS images sit centred on their own line — the float is an inline style,
   so it needs !important to override */
.ed-prose img,
.ed-item-body img {
  float: none !important;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 40px auto;
}
.ed-item-body p,
.ed-prose p {
  margin: 0 0 16px; font-size: 15.5px; line-height: 1.95; font-weight: 300; color: #2A2A2A;
}
.ed-item-body p:last-child, .ed-prose p:last-child { margin-bottom: 0; }
/* nothing trailing at the end of a block — the section's own padding handles it */
.ed-prose:last-child { margin-bottom: 0; }
.ed-prose > *:last-child { margin-bottom: 0; }
.ed-prose > *:last-child img,
.ed-item-body > *:last-child img { margin-bottom: 0; }
.ed-prose { max-width: 760px; margin: 0 auto 40px; }
.ed-prose-wide { max-width: 860px; }
.ed-prose h1, .ed-prose h2, .ed-prose h3, .ed-prose h4 {
  font-family: 'Bodoni Moda', Didot, Georgia, serif; font-weight: 400; font-size: 28px;
  line-height: 1.25; letter-spacing: 0; text-transform: none; color: #111111; margin: 44px 0 18px;
}
.ed-prose blockquote {
  margin: 36px 0; padding: 0; border: none; font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-style: italic; font-size: 27px; line-height: 1.4; color: #111111;
}
.ed-prose blockquote p { margin: 0; font: inherit; color: inherit; }

/* a photograph inside a page */
.ed-figure { max-width: 860px; margin: 56px auto 0; }
.ed-figure img { width: 100%; height: auto; display: block; filter: grayscale(1); transition: filter .4s ease; }
.ed-figure img:hover { filter: grayscale(0); }

/* the testimonials page */
.ed-quotes { column-count: 2; column-gap: 64px; }
.ed-quote { break-inside: avoid; margin: 0 0 48px; padding: 0; }
.ed-quote blockquote {
  margin: 0 0 18px; padding: 0; border: none;
  font-family: 'Bodoni Moda', Didot, Georgia, serif; font-size: 21px; line-height: 1.5; color: #111111;
}
.ed-quote blockquote p { margin: 0 0 14px; font: inherit; color: inherit; }
.ed-quote blockquote p:last-child { margin-bottom: 0; }
.ed-quote figcaption {
  font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase; color: #006975;
  padding-top: 14px; border-top: 1px solid #D9D6D0;
}
.ed-form-wrap { max-width: 760px; }
.ed a:not(.btn) { color: #111111; border-bottom: 1px solid #008795; text-decoration: none; }
.ed a:not(.btn):hover { color: #006975; }

@media (max-width: 900px) {
  .ed-lede { padding-top: 57px; }
  .ed-item { flex-direction: column; gap: 14px; padding: 28px 0; }
  .ed-num { padding-top: 0; width: auto; }
  .ed-item-title { width: auto; font-size: 27px; }
  .ed-list { padding: 48px 0 60px; }
  .ed-quotes { column-count: 1; }
  .ed-figure { margin-top: 40px; }
}

@media (max-width: 640px) {
  .ed-contact { flex-direction: column; gap: 6px; text-align: center; padding: 0 20px; }
  .ed-contact .sep { display: none; }
  .ed-contact a { font-size: 15px; letter-spacing: 0.4px; overflow-wrap: anywhere; }
  .ed-lede-body p { font-size: 18px; }
}

/* ---- contact form (replaces the 123FormBuilder embed) -------------- */

.ed-form { max-width: 620px; margin: 0 auto; }
.ed-form .ed-row { display: flex; gap: 24px; }
.ed-form .ed-row .ed-field { flex: 1; }
.ed-form .ed-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.ed-form label {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #5B6668;
  margin: 0;
}
.ed-form input,
.ed-form textarea {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #111111;
  background: #FFFFFF;
  border: 1px solid #D8D2C5;
  border-radius: 0;
  padding: 0 14px;
  height: 50px;
  width: 100%;
}
.ed-form textarea { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.ed-form input:focus,
.ed-form textarea:focus { outline: none; border-color: #008795; }
.ed-form button {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #111111;
  border: none;
  padding: 18px 34px;
  cursor: pointer;
}
.ed-form button:hover { background: #006975; }
.ed-form .ed-form-small { font-size: 13px; color: #5B6668; margin: 20px 0 0; }

/* honeypot — hidden from people, visible to bots */
.ed-form .ed-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ed-form-note,
.ed-form-error { max-width: 620px; padding: 22px 26px; margin: 0 auto 28px; }
.ed-form-note { border-left: 2px solid #008795; background: #F5F8F8; }
.ed-form-error { border-left: 2px solid #A33; background: #FBF4F4; }
.ed-form-note p:last-child,
.ed-form-error p:last-child { margin-bottom: 0; }

/* ---- narrow screens ------------------------------------------------ */

@media (max-width: 900px) {
  section.background-11 { padding-top: 54px !important; padding-bottom: 54px !important; }
  section.background-11 h2,
  section.background-11 h3 { font-size: 27px; }
  section.background-11 blockquote { font-size: 22px; }
  .ed-form .ed-row { flex-direction: column; gap: 0; }
}