/* ==========================================================================
   JTD Carpentry & Joinery — 2026 redesign
   Additive stylesheet. Loaded after the HD Divi Child style.css.
   Scope: design tokens, typography, and the components Divi cannot produce
   natively. Does not modify the existing child theme stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --jtd-navy:            #0F2A44;
  --jtd-navy-deep:       #0B1E30;
  --jtd-blue:            #1B83AA;
  --jtd-copper:          #B4661F;
  --jtd-copper-light:    #E8B984;

  /* Text */
  --jtd-ink:             #16181A;
  --jtd-body:            #4A5560;
  --jtd-body-soft:       #5C6670;
  --jtd-muted:           #8A9199;
  --jtd-hero-sub:        #CBD6E1;
  --jtd-on-navy:         #9FB2C4;
  --jtd-on-navy-soft:    #7A8CA0;

  /* Surfaces */
  --jtd-page:            #F6F3EE;
  --jtd-surface:         #FFFFFF;
  --jtd-input:           #FBFAF8;
  --jtd-border:          #E3DCD2;
  --jtd-border-strong:   #D9D2C7;

  /* Layout */
  --jtd-container:       1240px;
  --jtd-gutter:          32px;
  --jtd-section-y:       84px;

  /* Type */
  --jtd-font-head:       "Archivo", system-ui, -apple-system, sans-serif;
  --jtd-font-body:       "Source Sans 3", system-ui, -apple-system, sans-serif;

  /* The one shadow in the system */
  --jtd-shadow-dropdown: 0 18px 40px rgba(15, 42, 68, .14);
}

/* --------------------------------------------------------------------------
   2. Base
   Square corners throughout — Divi defaults to rounded buttons and inputs,
   so these resets are deliberate and need the specificity.
   -------------------------------------------------------------------------- */
/* Scoped to .jtd-page. Unscoped, these would restyle every existing page on
   the site the moment the stylesheet is enqueued. */
body.jtd-page,
body.jtd-page.et-db #et-boc .et-l {
  background: var(--jtd-page);
  font-family: var(--jtd-font-body);
  color: var(--jtd-ink);
  font-size: 17px;
  line-height: 1.6;
}

/* THE CASCADE, IN THREE TIERS
   ---------------------------------------------------------------------------
   Everything below sits at specificity (0,1,0), so ORDER decides, and the
   order is deliberate:

     1. element defaults   .jtd-page :where(p)
     2. context defaults   .jtd-on-navy :where(p)
     3. component classes  .jtd-kicker, .jtd-lead, .jtd-h1

   Elements are wrapped in :where() so they contribute nothing, which is what
   stops `.jtd-page p` (0,1,1) from outranking every component class — the bug
   that silently turned every copper eyebrow into grey body text.

   The tiers must stay in this order. Dropping a tier to zero specificity
   instead of ordering it does not work: when the on-navy rules were wrapped
   whole, as :where(.jtd-on-navy h1), they fell to (0,0,0) and lost to the
   element default, which rendered the hero H1 in ink on a navy background.
   --------------------------------------------------------------------------- */

/* --- Tier 1: element defaults ------------------------------------------- */
.jtd-page :where(a) { color: var(--jtd-navy); text-decoration: none; }
.jtd-page :where(a):hover { color: var(--jtd-copper); }

.jtd-page :where(img) { display: block; max-width: 100%; height: auto; }

.jtd-page :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--jtd-font-head);
  color: var(--jtd-ink);
  margin: 0 0 .5em;
}

.jtd-page :where(p) {
  font-size: 17px;
  line-height: 1.65;
  color: var(--jtd-body);
}

/* --- Tier 2: context defaults ------------------------------------------- */
/* Text sitting on a navy ground. After tier 1 so it wins; before tier 3 so a
   component class can still override it. */
.jtd-on-navy { color: #FFFFFF; }
.jtd-on-navy :where(h1, h2, h3, h4, h5, h6) { color: #FFFFFF; }
.jtd-on-navy :where(p) { color: var(--jtd-hero-sub); }

/* --- Tier 3: component classes ------------------------------------------ */
/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.jtd-h1-home {
  font-size: clamp(30px, 3.9vw, 50px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.jtd-h1 {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
}

.jtd-h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.jtd-h3 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
}

.jtd-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--jtd-body);
}

.jtd-body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--jtd-body);
}

.jtd-kicker {
  font-family: var(--jtd-font-head);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--jtd-copper);
  margin: 0 0 14px;
}

.jtd-kicker--on-navy { color: var(--jtd-copper-light); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.jtd-container {
  max-width: var(--jtd-container);
  margin: 0 auto;
  padding-left: var(--jtd-gutter);
  padding-right: var(--jtd-gutter);
}

.jtd-section { padding: var(--jtd-section-y) 0; }
.jtd-section--navy { background: var(--jtd-navy); }
.jtd-section--surface { background: var(--jtd-surface); }

/* Auto-fit grids — collapse to one column on narrow screens with no
   media query, matching the prototype. */
.jtd-grid { display: grid; gap: 28px; }
.jtd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.jtd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.jtd-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.jtd-grid--5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Hairline grid: 1px gaps over a border-coloured background, rather than
   borders on each cell. Avoids doubled lines at the seams. */
.jtd-hairline {
  display: grid;
  gap: 1px;
  background: var(--jtd-border);
  border: 1px solid var(--jtd-border);
}
.jtd-hairline > * { background: var(--jtd-surface); }

/* --------------------------------------------------------------------------
   5. Buttons
   Divi's .et_pb_button carries its own border-radius, borders and ::after
   arrow. All three are overridden here.
   -------------------------------------------------------------------------- */
.jtd-btn,
.jtd-page .et_pb_button.jtd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--jtd-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  padding: 17px 30px;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}

.jtd-page .et_pb_button.jtd-btn::after { display: none; }

.jtd-btn--primary { background: var(--jtd-blue); color: #FFFFFF; }
.jtd-btn--primary:hover { background: var(--jtd-navy); color: #FFFFFF; }

.jtd-btn--ghost-navy {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .35);
}
.jtd-btn--ghost-navy:hover {
  background: #FFFFFF;
  color: var(--jtd-navy);
  border-color: #FFFFFF;
}

.jtd-btn--outline {
  background: transparent;
  color: var(--jtd-navy);
  border-color: var(--jtd-border-strong);
}
.jtd-btn--outline:hover { background: var(--jtd-navy); color: #FFFFFF; border-color: var(--jtd-navy); }

/* Form submit sits on ink rather than navy on hover */
.jtd-btn--form { background: var(--jtd-blue); color: #FFFFFF; width: 100%; }
.jtd-btn--form:hover { background: var(--jtd-ink); color: #FFFFFF; }

/* Copper text link with chevron */
.jtd-link {
  font-family: var(--jtd-font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--jtd-copper);
}
.jtd-link:hover { color: var(--jtd-navy); }
.jtd-link::after { content: " →"; }

/* --------------------------------------------------------------------------
   6. Utility bar + header
   -------------------------------------------------------------------------- */
.jtd-utility {
  background: var(--jtd-navy-deep);
  color: #D8DFE7;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.jtd-utility .jtd-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 9px;
  padding-bottom: 9px;
}
.jtd-utility a[href^="tel:"] { color: var(--jtd-copper-light); }
.jtd-utility a[href^="tel:"]:hover { color: #FFFFFF; }
.jtd-utility__reg { color: var(--jtd-on-navy-soft); }

.jtd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--jtd-surface);
  border-bottom: 1px solid var(--jtd-border);
}
.jtd-header .jtd-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.jtd-header__logo img { height: 46px; width: auto; }

.jtd-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: var(--jtd-font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
}
.jtd-nav a { color: var(--jtd-ink); }
.jtd-nav a:hover,
.jtd-nav .current-menu-item > a,
.jtd-nav .current-menu-ancestor > a { color: var(--jtd-copper); }

/* Services dropdown */
.jtd-nav .menu-item-has-children { position: relative; }
.jtd-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  width: 290px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--jtd-surface);
  border: 1px solid var(--jtd-border);
  box-shadow: var(--jtd-shadow-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.jtd-nav .menu-item-has-children:hover > .sub-menu,
.jtd-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.jtd-nav .sub-menu a {
  display: block;
  padding: 11px 14px;
  font-weight: 700;
}
.jtd-nav .sub-menu a:hover { background: var(--jtd-page); }
/* Extensions children sit indented under their parent */
.jtd-nav .sub-menu .sub-menu {
  position: static;
  width: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.jtd-nav .sub-menu .sub-menu a {
  padding: 8px 14px 8px 28px;
  font-weight: 500;
  color: var(--jtd-body);
}
.jtd-nav .sub-menu .sub-menu a:hover { background: var(--jtd-page); color: var(--jtd-copper); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.jtd-card {
  background: var(--jtd-surface);
  border: 1px solid var(--jtd-border);
  display: flex;
  flex-direction: column;
}
.jtd-card__media { height: 200px; width: 100%; object-fit: cover; }
.jtd-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.jtd-card__body .jtd-link { margin-top: auto; }

/* --------------------------------------------------------------------------
   8. Chips
   -------------------------------------------------------------------------- */
.jtd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.jtd-chip {
  font-family: var(--jtd-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 10px 16px;
  border: 1px solid var(--jtd-border-strong);
  background: var(--jtd-surface);
  color: var(--jtd-body);
}

/* Case study filter chips — interactive */
.jtd-chip--filter { cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.jtd-chip--filter:hover { border-color: var(--jtd-navy); color: var(--jtd-navy); }
.jtd-chip--filter[aria-pressed="true"] {
  background: var(--jtd-navy);
  border-color: var(--jtd-navy);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   9. Numbered process steps
   -------------------------------------------------------------------------- */
.jtd-steps { display: grid; gap: 1px; background: var(--jtd-border); border: 1px solid var(--jtd-border); }
.jtd-step { background: var(--jtd-surface); padding: 26px 28px; display: flex; gap: 20px; }
.jtd-step__num {
  font-family: var(--jtd-font-head);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--jtd-copper);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   10. Sticky service sidebar
   -------------------------------------------------------------------------- */
.jtd-layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 60px;
  align-items: start;
}
.jtd-sidebar { position: sticky; top: 104px; display: grid; gap: 20px; }

@media (max-width: 1024px) {
  .jtd-layout-sidebar { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .jtd-sidebar { position: static; }
}

/* --------------------------------------------------------------------------
   11. Gravity Forms
   Reshapes GF's default markup to the design: square corners, the warm
   input background, Archivo labels. Applies only inside .jtd-form.
   -------------------------------------------------------------------------- */
.jtd-form { background: var(--jtd-surface); border: 1px solid var(--jtd-border); padding: 30px; }
.jtd-form--on-navy { border-color: transparent; }

.jtd-form .gform_wrapper .gform_fields { gap: 16px 18px; }

.jtd-form .gform_wrapper .gfield_label {
  font-family: var(--jtd-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jtd-body-soft);
  margin-bottom: 5px;
}

.jtd-form .gform_wrapper input[type="text"],
.jtd-form .gform_wrapper input[type="email"],
.jtd-form .gform_wrapper input[type="tel"],
.jtd-form .gform_wrapper input[type="file"],
.jtd-form .gform_wrapper select,
.jtd-form .gform_wrapper textarea {
  width: 100%;
  font-family: var(--jtd-font-body);
  font-size: 16px;
  color: var(--jtd-ink);
  background: var(--jtd-input);
  border: 1px solid var(--jtd-border-strong);
  border-radius: 0;
  padding: 11px 13px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.jtd-form .gform_wrapper input:focus,
.jtd-form .gform_wrapper select:focus,
.jtd-form .gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--jtd-blue);
  box-shadow: 0 0 0 2px rgba(27, 131, 170, .18);
}

.jtd-form .gform_wrapper textarea { min-height: 84px; resize: vertical; }

.jtd-form .gform_wrapper .gform_footer { margin: 16px 0 0; padding: 0; }
.jtd-form .gform_wrapper .gform_button {
  width: 100%;
  font-family: var(--jtd-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 15px 30px;
  background: var(--jtd-blue);
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .18s ease;
}
.jtd-form .gform_wrapper .gform_button:hover { background: var(--jtd-ink); }

/* Validation */
.jtd-form .gform_wrapper .gfield_error input,
.jtd-form .gform_wrapper .gfield_error select,
.jtd-form .gform_wrapper .gfield_error textarea { border-color: #D90A0A; }
.jtd-form .gform_wrapper .gfield_validation_message,
.jtd-form .gform_wrapper .validation_message {
  font-size: 14px;
  color: #D90A0A;
  background: none;
  border: 0;
  padding: 6px 0 0;
}

/* Success state */
.jtd-form .gform_confirmation_message {
  font-family: var(--jtd-font-head);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--jtd-navy);
  padding: 8px 0;
}

/* Half-width fields.
   Gravity Forms 2.5+ lays .gform_fields out as a 12-column grid itself, but
   the same values are declared here so the form does not depend on a third
   party stylesheet for its layout — if GF's CSS is deferred, minified away by
   an optimiser, or the plugin is older, the pairs still sit correctly.
   The span classes are belt and braces: .gfield--width-half is GF 2.5+'s own,
   .gfield--span-6 is applied through each field's cssClass by the generator. */
.jtd-form .gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 18px;
  row-gap: 12px;
}
.jtd-form .gform_wrapper .gfield { grid-column: span 12; }
.jtd-form .gform_wrapper .gfield--width-half,
.jtd-form .gform_wrapper .gfield--span-6 { grid-column: span 6; }

/* Collapse the pairs well before GF's own breakpoint: the service sidebar is
   380px wide, where two fields per row are unusable. */
@media (max-width: 600px) {
  .jtd-form .gform_wrapper .gfield--width-half,
  .jtd-form .gform_wrapper .gfield--span-6 { grid-column: span 12; }
}

/* The sidebar form is 380px wide, so it is single-column regardless.
   !important because Gravity Forms sets .gfield--width-half through long
   selector chains whose specificity is not safe to match by hand. */
.jtd-sidebar .jtd-form .gform_wrapper .gfield { grid-column: 1 / -1 !important; }

/* Hidden source field must not occupy a grid row. */
.jtd-form .jtd-field--source { display: none; }

/* Field description (budget helper text, attachment limits) */
.jtd-form .gform_wrapper .gfield_description {
  font-size: 12px;
  line-height: 1.4;
  color: var(--jtd-muted);
  padding: 4px 0 0;
}

/* File upload: Divi and GF both style this, neither to the design. */
.jtd-form .gform_wrapper input[type="file"] {
  padding: 9px 13px;
  font-size: 14px;
  color: var(--jtd-body);
}
.jtd-form .gform_wrapper .gform_fileupload_rules { display: none; }

/* Validation summary at the top of the form */
.jtd-form .gform_wrapper .gform_validation_errors {
  background: #FDF2F2;
  border: 1px solid #D90A0A;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 18px;
  margin: 0 0 20px;
}
.jtd-form .gform_wrapper .gform_validation_errors h2 {
  font-family: var(--jtd-font-head);
  font-size: 15px;
  font-weight: 700;
  color: #D90A0A;
  margin: 0;
}

/* GF's honeypot field — hidden from people, left in the markup for bots. */
.jtd-form .gform_wrapper .gform_validation_container { display: none !important; }

.jtd-form__intro {
  font-size: 15px;
  line-height: 1.45;
  color: var(--jtd-body-soft);
  margin: 0 0 16px;
}

.jtd-form__privacy { font-size: 13px; line-height: 1.5; color: var(--jtd-muted); margin-top: 14px; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.jtd-footer { background: var(--jtd-navy); color: var(--jtd-on-navy); }
.jtd-footer a { color: var(--jtd-on-navy); }
.jtd-footer a:hover { color: #FFFFFF; }
.jtd-footer h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #FFFFFF;
}
.jtd-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  letter-spacing: .04em;
  padding-top: 22px;
  padding-bottom: 40px;
}

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */
@keyframes jtdRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.jtd-rise { animation: jtdRise .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  .jtd-rise { animation: none; }
  .jtd-page *, .jtd-page *::before, .jtd-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   14. Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  :root { --jtd-section-y: 56px; --jtd-gutter: 20px; }
  .jtd-header { position: static; }
  .jtd-utility { font-size: 12px; }
  .jtd-utility .jtd-container { justify-content: center; text-align: center; }
}

/* ==========================================================================
   15. Divi integration
   Divi ships its own section padding, row width and column gutters. The
   design's spacing lives in this stylesheet, so Divi's defaults are reset
   here rather than overridden per-module in the builder. Keeping the design
   in CSS (not in hundreds of builder settings) is what makes the five service
   pages maintainable and the whole build reviewable in a diff.
   ========================================================================== */

/* These are scoped to .jtd-sec / .jtd-row, which the generator puts on every
   section and row it produces — NOT to .jtd-page alone. The Theme Builder
   header and footer are Divi sections too, and on a rebuilt page they share
   the body class; resetting every .et_pb_section strips the footer's padding
   and breaks its layout. */

/* Sections: no default padding; .jtd-section supplies it where wanted. */
.jtd-page .et_pb_section.jtd-sec { padding: 0; }

/* Rows: the design container is 1240px with a 32px gutter, not Divi's 1080/80%. */
.jtd-page .et_pb_row.jtd-row {
  width: 100%;
  max-width: var(--jtd-container);
  padding: 0 var(--jtd-gutter);
  margin-left: auto;
  margin-right: auto;
}

/* Two rows stacked in one section would otherwise touch: the module and
   column margins are reset below, and a row has no spacing of its own. The
   home page's service cards sat flush against their own heading because of
   this. Generic rather than a one-off class, so it covers any section built
   as heading-row + content-row. */
.jtd-page .jtd-sec > .et_pb_row + .et_pb_row { margin-top: 48px; }

/* Divi adds a bottom margin to every column and module. The design uses
   grid gap and explicit section padding instead. */
.jtd-page .jtd-row .et_pb_column { margin-bottom: 0; }
.jtd-page .jtd-row .et_pb_column:last-child { margin-right: 0; }
.jtd-page .jtd-sec .et_pb_module { margin-bottom: 0; }

/* A Text module used as a form wrapper is itself the .jtd-form card, so its
   inner wrapper must not add a second box. */
.jtd-page .jtd-form .et_pb_text_inner { margin: 0; }

/* Divi forces its own heading and paragraph sizing inside Text modules. */
.jtd-page .et_pb_text h1,
.jtd-page .et_pb_text h2,
.jtd-page .et_pb_text h3,
.jtd-page .et_pb_text h4 { padding-bottom: 0; }
.jtd-page .et_pb_text p:last-child { padding-bottom: 0; }

/* Divi floats its columns (.et_pb_column { float: left }) and contains them
   with a clearfix: .et_pb_row::after { content: ""; clear: both }.
   
   In a GRID container that pseudo-element becomes a grid ITEM and consumes a
   whole track — a two-column row resolves to three tracks and every column
   comes out a third too narrow.
   
   So it is removed ONLY from the rows that are grid containers. Removing it
   from every row takes float containment away from the ones that are still
   floated, and those rows collapse to zero height — the section then renders
   as nothing but its own padding, with the content overflowing it. Grid items
   ignore float, so the grid rows need no containment of their own. */
.jtd-page .et_pb_row.jtd-row-2col::before,
.jtd-page .et_pb_row.jtd-row-2col::after,
.jtd-page .et_pb_row.jtd-layout-sidebar::before,
.jtd-page .et_pb_row.jtd-layout-sidebar::after { display: none; }

/* Two-column rows: the design controls the gap, so Divi's percentage
   gutters are removed and the row becomes a grid. */
.jtd-page .et_pb_row.jtd-row-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 48px;
  align-items: start;
}

/* EVERY grid row needs this, not just the two-column one.
   Divi sizes columns with percentages (.et_pb_column_1_4 { width: 20.875% }).
   Inside a grid track that percentage resolves against the TRACK, so a column
   in a correct 380px track renders at 79px and the track looks right while the
   content does not. Grid places the items; their own width must be 100%. */
.jtd-page .et_pb_row.jtd-row-2col > .et_pb_column,
.jtd-page .et_pb_row.jtd-layout-sidebar > .et_pb_column {
  width: 100% !important;
  margin-right: 0 !important;
  float: none;
}

.jtd-page .et_pb_row.jtd-row-2col--center { align-items: center; gap: 56px; }
.jtd-page .et_pb_row.jtd-row-2col--end { align-items: end; gap: 40px; }

@media (max-width: 980px) {
  .jtd-page .et_pb_row.jtd-row-2col { gap: 36px; }
}

/* ==========================================================================
   16. Home page components
   ========================================================================== */

/* Hero ------------------------------------------------------------------ */
.jtd-hero {
  position: relative;
  background: var(--jtd-navy);
  color: #FFFFFF;
  overflow: hidden;
}
.jtd-hero .et_pb_row { position: relative; z-index: 2; }

.jtd-hero__media { position: absolute; inset: 0; z-index: 0; }
.jtd-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .38;
}
.jtd-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0B1E30 18%, rgba(11, 30, 48, .55) 70%);
}

/* Vertical padding lives on the SECTION, not here — see section 21. The row
   reset sets `padding: 0 32px` at (0,3,0) and would override it. */
.jtd-hero__inner { }
.jtd-hero__sub {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--jtd-hero-sub);
  max-width: 600px;
}

/* Credential stats */
.jtd-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 30px;
  margin-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.jtd-stats__figure { font-family: var(--jtd-font-head); font-size: 30px; font-weight: 700; }
.jtd-stats__label {
  font-size: 14px;
  color: var(--jtd-on-navy);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* The hero form card carries the design's only drop shadow besides the nav. */
.jtd-page .jtd-form--hero {
  padding: 34px 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
  border: 0;
}

/* Credentials strip ----------------------------------------------------- */
.jtd-strip {
  background: var(--jtd-surface);
  border-bottom: 1px solid var(--jtd-border);
}
.jtd-strip-items {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  padding-bottom: 26px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jtd-body-soft);
  font-weight: 600;
}

/* Image stacks ---------------------------------------------------------- */
.jtd-stack { display: grid; gap: 14px; }
.jtd-stack__lead { width: 100%; height: 330px; object-fit: cover; }
.jtd-stack__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jtd-stack__pair img { width: 100%; height: 190px; object-fit: cover; }

/* Offset grid (Why JTD) */
/* Two columns, not auto-fit: the nth-child offsets below describe a 2x2
   arrangement, and auto-fit resolves to three or four columns at the width
   this grid actually gets. */
.jtd-offset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jtd-offset-grid img { width: 100%; object-fit: cover; }
.jtd-offset-grid img:nth-child(1) { height: 300px; }
.jtd-offset-grid img:nth-child(2) { height: 300px; margin-top: 40px; }
.jtd-offset-grid img:nth-child(3) { height: 240px; }
.jtd-offset-grid img:nth-child(4) { height: 240px; margin-top: 40px; }

@media (max-width: 600px) {
  .jtd-offset-grid img { margin-top: 0 !important; height: 220px !important; }
}

/* Numbered reasons (Why JTD) -------------------------------------------- */
.jtd-reasons { display: grid; gap: 24px; }
.jtd-reason { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.jtd-reason__num {
  font-family: var(--jtd-font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--jtd-copper);
  padding-top: 3px;
}
.jtd-reason h4 { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.jtd-reason :where(p) { font-size: 16px; line-height: 1.55; color: var(--jtd-body-soft); margin: 0; }

/* Service card grid ----------------------------------------------------- */
/* 2px gaps over the border colour, per the design's hairline rule. */
/* Three across, two rows. There are exactly six cells — five services and
   the navy "not sure which one" cell — so a fixed three-column grid fills
   both rows evenly. auto-fit resolved to four at 1240px and left an orphan. */
.jtd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--jtd-border);
}

@media (max-width: 1100px) {
  .jtd-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .jtd-cards { grid-template-columns: 1fr; }
}
.jtd-cards > * { background: var(--jtd-surface); }
.jtd-cards a.jtd-card-link { display: block; color: inherit; }
.jtd-cards a.jtd-card-link:hover { background: #FFFDF9; }
.jtd-cards img { width: 100%; height: 200px; object-fit: cover; }
.jtd-cards__body { padding: 26px 26px 30px; }
.jtd-cards__body h3 { font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.jtd-cards__body :where(p) { font-size: 16px; line-height: 1.55; color: var(--jtd-body-soft); margin: 0 0 16px; }

/* The navy "not sure which one" cell that closes the grid */
.jtd-cards__cta {
  background: var(--jtd-navy);
  color: #FFFFFF;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.jtd-cards__cta h3 { font-size: 24px; font-weight: 700; margin: 0 0 12px; line-height: 1.2; color: #FFFFFF; }
.jtd-cards__cta :where(p) { font-size: 16px; line-height: 1.55; color: #BCCBD9; margin: 0 0 22px; }
.jtd-cards__cta .jtd-btn { text-align: center; }
.jtd-cards__cta .jtd-btn--primary:hover { background: #FFFFFF; color: var(--jtd-navy); }

/* Featured projects ----------------------------------------------------- */
.jtd-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.jtd-projects a { display: block; }
.jtd-projects img { width: 100%; height: 290px; object-fit: cover; }
/* Several source photos are portrait. Centre-cropping them to a landscape box
   lands on the foreground; biasing upward keeps the building in frame. */
.jtd-crop-high { object-position: center 30%; }
.jtd-projects__meta { padding: 18px 0 0; }
.jtd-projects__eyebrow {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jtd-muted);
  margin: 0 0 6px;
}
.jtd-projects h3 { font-size: 21px; font-weight: 700; margin: 0; }

.jtd-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.jtd-link-underline {
  font-weight: 700;
  color: var(--jtd-navy);
  border-bottom: 2px solid var(--jtd-copper);
  padding-bottom: 4px;
  font-family: var(--jtd-font-head);
}

/* Testimonials ---------------------------------------------------------- */
.jtd-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 32px; }
.jtd-quote { margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--jtd-border); }
.jtd-quote :where(p) {
  font-family: var(--jtd-font-head);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--jtd-ink);
  margin: 0 0 16px;
}
.jtd-quote footer { font-size: 15px; color: var(--jtd-muted); }

/* Credibility band */
.jtd-credband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px;
  background: var(--jtd-border);
  margin-top: 48px;
}
.jtd-credband > div { background: var(--jtd-page); padding: 26px 28px; }
.jtd-credband__figure { font-family: var(--jtd-font-head); font-size: 28px; font-weight: 800; color: var(--jtd-navy); }
.jtd-credband__label { font-size: 15px; color: var(--jtd-body-soft); margin-top: 6px; }

/* A note left in the design for the client, not for the public. */
.jtd-placeholder-note { font-size: 13px; color: var(--jtd-copper); margin: 26px 0 0; }

/* CTA band -------------------------------------------------------------- */
.jtd-ctaband { background: var(--jtd-copper); color: #FFFFFF; }
.jtd-ctaband .jtd-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 64px;
  padding-bottom: 64px;
}
.jtd-ctaband h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; margin: 0 0 10px; color: #FFFFFF; }
.jtd-ctaband :where(p) { font-size: 19px; margin: 0; color: #FBEDDF; }
.jtd-ctaband__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.jtd-ctaband .jtd-btn--outline { border-color: #FFFFFF; color: #FFFFFF; }
.jtd-ctaband .jtd-btn--outline:hover { background: #FFFFFF; color: var(--jtd-copper); border-color: #FFFFFF; }

/* ==========================================================================
   17. Inner page heroes
   ========================================================================== */
.jtd-hero--inner .jtd-hero__media img { opacity: .28; }
.jtd-hero--inner .jtd-hero__media::after {
  background: linear-gradient(90deg, #0B1E30 25%, rgba(11, 30, 48, .45));
}


/* Extensions overview sits slightly lighter and taller */
.jtd-hero--overview .jtd-hero__media img { opacity: .30; }
.jtd-hero--overview .jtd-hero__media::after {
  background: linear-gradient(90deg, #0B1E30 22%, rgba(11, 30, 48, .5));
}


/* Flat navy hero, no image (services index, case studies, contact) */
.jtd-hero--flat { background: var(--jtd-navy); }


.jtd-breadcrumb { font-size: 14px; color: var(--jtd-on-navy); margin: 0 0 24px; }
.jtd-breadcrumb a { color: var(--jtd-on-navy); }
.jtd-breadcrumb a:hover { color: #FFFFFF; }
.jtd-breadcrumb__current { color: var(--jtd-copper-light); }

.jtd-hero__tagline {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.6;
  color: var(--jtd-hero-sub);
  max-width: 680px;
  margin: 0;
}

/* ==========================================================================
   18. Service page template
   ========================================================================== */
.jtd-article { font-size: 18px; line-height: 1.72; color: #3B444D; }
.jtd-article > p { font-size: 18px; line-height: 1.72; color: #3B444D; margin: 0 0 20px; }
.jtd-article__lead {
  font-size: clamp(18px, 2vw, 21px) !important;
  line-height: 1.6 !important;
  color: var(--jtd-ink) !important;
  margin: 0 0 20px;
}
.jtd-article h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  color: var(--jtd-ink);
  letter-spacing: -.01em;
  margin: 44px 0 18px;
}
.jtd-article h2:first-child { margin-top: 0; }
.jtd-article ul { margin: 0 0 20px; padding-left: 22px; }
.jtd-article li { margin-bottom: 12px; }

.jtd-body-image { width: 100%; height: 360px; object-fit: cover; margin: 36px 0; }

/* "Wherever you are in the planning process" */
.jtd-planning {
  background: var(--jtd-navy);
  color: #FFFFFF;
  padding: 34px 36px;
  margin: 0 0 40px;
}
.jtd-planning h2 {
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 14px;
}
.jtd-planning :where(p) { font-size: 17px; line-height: 1.65; color: var(--jtd-hero-sub); margin: 0 0 20px; }
.jtd-planning__grid {
  display: grid;
  /* 130px, not 150px: inside the block's 36px padding the main column leaves
     ~728px, which rounds down to four columns at 150px and orphans the fifth. */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .18);
  font-size: 15px;
}
.jtd-planning__grid > div { background: var(--jtd-navy); padding: 14px 16px; }

/* Numbered process steps */
.jtd-steps { margin-bottom: 20px; }
.jtd-step strong { font-family: var(--jtd-font-head); display: block; margin-bottom: 2px; }
.jtd-step span { font-size: 17px; color: var(--jtd-body-soft); }

/* Closing CTA block */
.jtd-cta-block { background: var(--jtd-navy); color: #FFFFFF; padding: 34px 36px; margin-top: 36px; }
.jtd-cta-block h3 { font-size: 26px; font-weight: 700; margin: 0 0 10px; color: #FFFFFF; }
.jtd-cta-block :where(p) { font-size: 17px; color: #BCCBD9; margin: 0 0 22px; line-height: 1.55; }
.jtd-cta-block .jtd-btn--primary:hover { background: #FFFFFF; color: var(--jtd-navy); }

/* Sidebar cards */
.jtd-sidebar .jtd-form { padding: 28px 26px; }
.jtd-sidebar .jtd-form h3 { font-size: 21px; font-weight: 700; margin: 0 0 6px; }
.jtd-form__call { font-size: 14px; color: var(--jtd-body-soft); margin: 16px 0 0; text-align: center; }
.jtd-form__call a { font-weight: 700; }

.jtd-related { background: var(--jtd-page); border: 1px solid var(--jtd-border); padding: 24px 26px; }
.jtd-related h4 {
  font-family: var(--jtd-font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jtd-body-soft);
  margin: 0 0 14px;
}
.jtd-related__links { display: grid; gap: 10px; font-size: 16px; font-weight: 600; }

/* ==========================================================================
   19. Services index
   ========================================================================== */
/* Alternating image/text rows, hairline-separated */
.jtd-rows { display: grid; gap: 2px; background: var(--jtd-border); }
.jtd-row-item {
  background: var(--jtd-surface);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
}
.jtd-row-item img { width: 100%; height: 230px; object-fit: cover; }
.jtd-row-item__body { padding: 26px 34px; }
.jtd-row-item__body h2 { font-size: clamp(23px, 2.4vw, 30px); font-weight: 700; margin: 0 0 14px; }
.jtd-row-item__body :where(p) {
  font-size: 16px;
  line-height: 1.55;
  color: var(--jtd-body);
  margin: 0 0 18px;
  max-width: 620px;
}
.jtd-row-item__eyebrow {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jtd-copper);
  font-weight: 600;
  margin: 0 0 10px;
}
.jtd-row-item__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* A secondary text link sitting beside an outlined button — same vertical
   rhythm as the button, no border. */
.jtd-link-plain {
  display: inline-flex;
  align-items: center;
  font-family: var(--jtd-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 12px 20px;
  color: var(--jtd-copper);
}
.jtd-link-plain:hover { color: var(--jtd-navy); }

/* Three-phase process.
   Named .jtd-phases, not .jtd-process: the existing site already uses
   .jtd-process for a different component, and the two would fight on any
   page carrying both. */
.jtd-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 32px; }
.jtd-phases img { width: 100%; height: 230px; object-fit: cover; }
.jtd-phases h3 { font-size: 23px; font-weight: 700; margin: 22px 0 10px; }
.jtd-phases :where(p) { font-size: 16px; line-height: 1.6; color: var(--jtd-body-soft); margin: 0; }

/* FAQ */
.jtd-faq { display: grid; }
.jtd-faq__item { border-top: 1px solid var(--jtd-border); padding: 24px 0; }
.jtd-faq__item:last-child { border-bottom: 1px solid var(--jtd-border); }
.jtd-faq__item h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.jtd-faq__item :where(p) { font-size: 17px; line-height: 1.6; color: var(--jtd-body-soft); margin: 0; }

/* ==========================================================================
   20. Extensions overview
   ========================================================================== */
.jtd-pathcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 32px; }
.jtd-pathcard {
  display: block;
  background: var(--jtd-surface);
  border: 1px solid var(--jtd-border);
  color: inherit;
}
.jtd-pathcard:hover { border-color: var(--jtd-copper); }
.jtd-pathcard img { width: 100%; height: 300px; object-fit: cover; }
.jtd-pathcard__body { padding: 34px 34px 38px; }
.jtd-pathcard__body h2 { font-size: clamp(23px, 2.4vw, 30px); font-weight: 700; margin: 0 0 14px; }
.jtd-pathcard__body :where(p) { font-size: 17px; line-height: 1.6; color: var(--jtd-body-soft); margin: 0 0 20px; }
.jtd-pathcard__body ul {
  margin: 0 0 22px;
  padding-left: 20px;
  color: var(--jtd-body-soft);
  font-size: 16px;
  line-height: 1.9;
}

/* Comparison table — built as a grid so the 1px rules never double up */
.jtd-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  border: 1px solid var(--jtd-border);
  font-size: 17px;
}
.jtd-compare__head {
  padding: 15px 16px;
  background: var(--jtd-navy);
  color: #FFFFFF;
  font-weight: 700;
  font-family: var(--jtd-font-head);
}
.jtd-compare__key { padding: 15px 16px; border-top: 1px solid var(--jtd-border); font-weight: 600; }
.jtd-compare__val { padding: 15px 16px; border-top: 1px solid var(--jtd-border); color: var(--jtd-body-soft); }

@media (max-width: 600px) {
  .jtd-compare { font-size: 15px; }
  .jtd-compare__head, .jtd-compare__key, .jtd-compare__val { padding: 12px 10px; }
}

/* ==========================================================================
   21. Legacy override layer
   ==========================================================================

   TEMPORARY. Delete this whole section once the old custom CSS is removed.

   The theme carries a block of custom CSS for the PREVIOUS design (visible in
   Divi's unified stylesheet) that uses !important on bare element selectors:

     h1,h2,h3,h4,h5,h6 { font-family:'Raleway'!important; font-weight:600!important;
                         color:#111210!important; line-height:1.15!important }
     .et_pb_section    { padding:80px 0!important }
     .et_pb_button     { border-radius:2px!important; padding:14px 28px!important;
                         border:none!important }

   !important cannot be out-specified, only matched. These rules exist solely
   to win those three fights on rebuilt pages, and are scoped to .jtd-sec so
   the rest of the site keeps the old styling until launch.

   At launch the old custom CSS should be deleted from Divi > Theme Options >
   Custom CSS, and this section deleted with it. Nothing else depends on it.
   -------------------------------------------------------------------------- */

/* Headings: the legacy rule forces Raleway 600 at #111210. */
.jtd-page .jtd-sec :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--jtd-font-head) !important;
  color: var(--jtd-ink) !important;
}

/* Every block with a navy ground must be listed here. The legacy rule forces
   #111210 on all headings with !important, so a block left off this list gets
   dark text on a dark background. */
.jtd-page .jtd-sec .jtd-on-navy :where(h1, h2, h3, h4, h5, h6),
.jtd-page .jtd-sec .jtd-planning :where(h1, h2),
.jtd-page .jtd-sec .jtd-cta-block :where(h1, h2, h3),
.jtd-page .jtd-sec .jtd-cards__cta :where(h3),
.jtd-page .jtd-sec .jtd-sidebar-cta :where(h1, h2, h3),
.jtd-page .jtd-sec .jtd-enquiry :where(h1, h2, h3),
.jtd-page .jtd-sec .jtd-contact-card--navy :where(h1, h2, h3),
.jtd-page .jtd-sec .jtd-ctaband-inner :where(h1, h2, h3),
.jtd-page .jtd-sec .jtd-footer-grid :where(h1, h2, h3, h4) {
  color: #FFFFFF !important;
}

/* Weight and line-height are forced too, so the display sizes need restating. */
.jtd-page .jtd-sec .jtd-h1-home {
  font-weight: 800 !important;
  line-height: 1.08 !important;
}
.jtd-page .jtd-sec .jtd-h1 {
  font-weight: 800 !important;
  line-height: 1.06 !important;
}
.jtd-page .jtd-sec .jtd-h2 {
  font-weight: 700 !important;
  line-height: 1.15 !important;
}
.jtd-page .jtd-sec .jtd-h3,
.jtd-page .jtd-sec .jtd-cards__body h3,
.jtd-page .jtd-sec .jtd-row-item__body h2,
.jtd-page .jtd-sec .jtd-pathcard__body h2,
.jtd-page .jtd-sec .jtd-faq__item h3,
.jtd-page .jtd-sec .jtd-phases h3,
.jtd-page .jtd-sec .jtd-projects h3 {
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Section padding: the legacy rule forces 80px top and bottom on every
   section, which breaks the design's own vertical rhythm. */
.jtd-page .et_pb_section.jtd-sec { padding: 0 !important; }
.jtd-page .jtd-sec.jtd-section { padding: var(--jtd-section-y) 0 !important; }

/* Heroes carry their own vertical padding, for the same reason: a row-level
   rule loses to the row reset. */
.jtd-page .jtd-sec.jtd-hero { padding: 96px 0 88px !important; }
.jtd-page .jtd-sec.jtd-hero--flat { padding: 80px 0 !important; }
.jtd-page .jtd-sec.jtd-hero--inner { padding: 80px 0 !important; }
.jtd-page .jtd-sec.jtd-hero--overview { padding: 88px 0 !important; }

@media (max-width: 980px) {
  .jtd-page .jtd-sec.jtd-hero,
  .jtd-page .jtd-sec.jtd-hero--flat,
  .jtd-page .jtd-sec.jtd-hero--inner,
  .jtd-page .jtd-sec.jtd-hero--overview { padding: 56px 0 !important; }
}

/* Buttons: the legacy rule forces a 2px radius, its own padding and no border.
   The design is square-cornered with an outline variant. */
.jtd-page .jtd-sec .jtd-btn {
  border-radius: 0 !important;
  padding: 17px 30px !important;
  font-family: var(--jtd-font-head) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
.jtd-page .jtd-sec .jtd-btn--outline {
  border: 1px solid var(--jtd-border-strong) !important;
}
.jtd-page .jtd-sec .jtd-btn--ghost-navy {
  border: 1px solid rgba(255, 255, 255, .35) !important;
}
.jtd-page .jtd-sec .jtd-link-plain {
  padding: 12px 20px !important;
  font-family: var(--jtd-font-head) !important;
  font-weight: 700 !important;
}

/* Body copy: the legacy rule sets Open Sans at #3a3a38 without !important, so
   specificity alone settles it — restated here only for the font. */
.jtd-page .jtd-sec :where(p, li) { font-family: var(--jtd-font-body); }

/* The page background: Divi's own wrappers paint white over the body colour. */
.jtd-page #page-container,
.jtd-page #et-boc,
.jtd-page .et-l--body { background: transparent; }
.jtd-page .jtd-sec.jtd-section { background: var(--jtd-page); }
.jtd-page .jtd-sec.jtd-section--surface { background: var(--jtd-surface); }
.jtd-page .jtd-sec.jtd-section--navy { background: var(--jtd-navy); }

/* ==========================================================================
   22. Service page: sticky CTA + inline enquiry form
   ==========================================================================

   The sidebar originally held the full enquiry form. It could not work:
   measured at 1440x900 the sidebar was 1419px against 772px of available
   height, and on a laptop with the WP admin bar there is barely room for four
   fields. A sticky element taller than the viewport hides its own submit
   button until you reach the bottom of the page — the one place a sticky CTA
   is pointless.

   So the sidebar now holds a short CTA that always fits, and the form moved
   into the article where it has the full 736px column. That is a better place
   for it anyway: at 736px the field pairs sit two-up and the whole form is
   shorter than it was at 380px.
   -------------------------------------------------------------------------- */

.jtd-sidebar-cta {
  background: var(--jtd-navy);
  color: #FFFFFF;
  padding: 28px 26px 30px;
}
.jtd-sidebar-cta h3 {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 10px;
}
/* Its own class, not a bare `p`.
   :where(p) was not enough: at (0,1,0) it ties with .jtd-kicker--on-navy and
   this section sits later in the file, so it won the tie and the kicker lost
   its copper. A block that contains a modifier-carrying element must not style
   that element type generically at all. */
.jtd-sidebar-cta__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--jtd-hero-sub);
  margin: 0 0 20px;
}
.jtd-sidebar-cta .jtd-btn { width: 100%; }
.jtd-sidebar-cta .jtd-btn--primary:hover { background: #FFFFFF; color: var(--jtd-navy); }
.jtd-sidebar-cta__call {
  font-size: 15px;
  color: var(--jtd-on-navy) !important;
  margin: 16px 0 0 !important;
  text-align: center;
}
.jtd-sidebar-cta__call a { color: var(--jtd-copper-light); font-weight: 700; }
.jtd-sidebar-cta__call a:hover { color: #FFFFFF; }

/* The enquiry block, inline in the article at full column width. */
.jtd-enquiry {
  background: var(--jtd-navy);
  padding: 36px 38px 40px;
  margin: 44px 0 0;
}
.jtd-enquiry h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 10px;
}
.jtd-enquiry__intro {
  font-size: 17px;
  line-height: 1.55;
  color: var(--jtd-hero-sub);
  margin: 0 0 26px;
}

/* The form sits on navy here, so its labels and helper text invert. */
.jtd-enquiry .jtd-form {
  background: transparent;
  border: 0;
  padding: 0;
}
.jtd-enquiry .gform_wrapper .gfield_label { color: #BCCBD9; }
/* --jtd-on-navy (6.7:1) not --jtd-on-navy-soft (4.2:1): both of these are
   13px, and 4.2:1 is below the 4.5:1 WCAG AA needs for small text. The soft
   tone is fine on the utility bar, whose ground is darker (#0B1E30, 4.9:1). */
.jtd-enquiry .gform_wrapper .gfield_description { color: var(--jtd-on-navy); }
.jtd-enquiry .jtd-form__privacy { color: var(--jtd-on-navy); }

/* Anchor target: clears the sticky header when jumped to. */
.jtd-anchor { display: block; scroll-margin-top: 120px; }
.jtd-page { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .jtd-page { scroll-behavior: auto; }
}

/* Short viewports: never let a sticky element hide its own controls. */
@media (max-height: 700px) {
  .jtd-sidebar { position: static; }
}

/* ==========================================================================
   23. Case studies
   ========================================================================== */
.jtd-cases { display: grid; gap: 56px; }

.jtd-case {
  background: var(--jtd-surface);
  border: 1px solid var(--jtd-border);
}
.jtd-case[hidden] { display: none; }

/* Three-image strip with stage labels */
.jtd-case__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  background: var(--jtd-border);
}
.jtd-case__shot { position: relative; }
.jtd-case__shot img { width: 100%; height: 300px; object-fit: cover; }
.jtd-case__stage {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--jtd-navy);
  color: #FFFFFF;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 12px;
}
.jtd-case__stage--after { background: var(--jtd-copper); }

.jtd-case__body { padding: 38px 40px 42px; }
.jtd-case__eyebrow {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jtd-copper);
  font-weight: 600;
  margin: 0 0 12px;
}
.jtd-case__body h2 {
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 18px;
}

/* 4-up spec row */
.jtd-case__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--jtd-border);
  border-bottom: 1px solid var(--jtd-border);
  font-size: 15px;
  margin-bottom: 26px;
}
.jtd-case__specs dt {
  color: var(--jtd-muted);
  margin: 0 0 4px;
}
.jtd-case__specs dd {
  margin: 0;
  font-weight: 700;
  color: var(--jtd-ink);
}

.jtd-case__narrative {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--jtd-body);
}
.jtd-case__narrative h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--jtd-ink);
  margin: 0 0 8px;
}
.jtd-case__narrative p { margin: 0 0 22px; }
.jtd-case__narrative p:last-child { margin-bottom: 0; }

.jtd-case__quote {
  margin-top: 30px;
  border-left: 3px solid var(--jtd-copper);
  padding: 4px 0 4px 22px;
}
.jtd-case__quote p:first-child {
  font-family: var(--jtd-font-head);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--jtd-ink);
  margin: 0 0 8px;
}
.jtd-case__quote p:last-child { font-size: 15px; color: var(--jtd-muted); margin: 0; }

/* Work in progress grid */
.jtd-wip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.jtd-wip img { width: 100%; height: 220px; object-fit: cover; }

.jtd-filters { margin-bottom: 48px; }

/* ==========================================================================
   24. Contact
   ========================================================================== */
.jtd-contact-card {
  background: var(--jtd-surface);
  border: 1px solid var(--jtd-border);
  padding: 28px;
}
.jtd-contact-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 14px; }
.jtd-contact-card__body { font-size: 16px; line-height: 1.7; color: var(--jtd-body-soft); margin: 0; }
.jtd-contact-card__reg { font-size: 14px; color: var(--jtd-muted); margin: 16px 0 0; }

.jtd-hours { font-size: 16px; color: var(--jtd-body-soft); display: grid; gap: 7px; }
.jtd-hours__row { display: flex; justify-content: space-between; }
.jtd-hours__row strong { color: var(--jtd-ink); }

.jtd-contact-card--navy {
  background: var(--jtd-navy);
  border-color: transparent;
}
.jtd-contact-card--navy h3 { color: #FFFFFF; }
.jtd-contact-card--navy .jtd-contact-card__body { color: #BCCBD9; }

.jtd-contact-stack { display: grid; gap: 28px; }

/* "What happens next" timeline */
.jtd-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  border-top: 2px solid var(--jtd-navy);
}
.jtd-timeline__step { padding: 26px 26px 0 0; }
.jtd-timeline__when {
  font-family: var(--jtd-font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--jtd-copper);
  letter-spacing: .1em;
  margin: 0 0 10px;
}
.jtd-timeline__step h3 { font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.jtd-timeline__step p { font-size: 16px; line-height: 1.6; color: var(--jtd-body-soft); margin: 0; }
.jtd-timeline-note {
  font-size: 15px;
  color: #3B444D;
  margin: 28px 0 0;
  max-width: 760px;
  line-height: 1.6;
}

/* ==========================================================================
   25. Blog post
   ========================================================================== */
.jtd-post { font-size: 18px; line-height: 1.75; color: #3B444D; }
.jtd-post :where(p) { font-size: 18px; line-height: 1.75; color: #3B444D; margin: 0 0 22px; }
.jtd-post h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  color: var(--jtd-ink);
  letter-spacing: -.01em;
  margin: 44px 0 18px;
}
.jtd-post__image { width: 100%; height: 340px; object-fit: cover; margin: 32px 0; }
.jtd-post__meta {
  font-size: 15px;
  color: var(--jtd-on-navy);
  letter-spacing: .04em;
  margin: 0;
}
.jtd-related-reading {
  border-top: 1px solid var(--jtd-border);
  margin-top: 40px;
  padding-top: 32px;
}
.jtd-related-reading h3 { font-size: 22px; font-weight: 700; margin: 0 0 20px; }
.jtd-related-reading__links { display: grid; gap: 14px; font-size: 17px; font-weight: 600; }

/* ==========================================================================
   26. Theme Builder header and footer
   ==========================================================================
   These sit outside .jtd-sec, so the legacy overrides in section 21 do not
   reach them. Where the legacy CSS forces a value with !important — headings,
   section padding, buttons — it is matched here.
   -------------------------------------------------------------------------- */

/* Utility bar ------------------------------------------------------------ */
.jtd-page .et_pb_section.jtd-utility { padding: 0 !important; }
.jtd-utility-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 9px 0;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #D8DFE7;
}
.jtd-utility-items a[href^="tel:"] { color: var(--jtd-copper-light) !important; font-weight: 700; }
.jtd-utility-items a[href^="tel:"]:hover { color: #FFFFFF !important; }
.jtd-utility-items__reg { color: var(--jtd-on-navy); }

/* Header ----------------------------------------------------------------- */
.jtd-page .et_pb_section.jtd-header {
  padding: 0 !important;
  background: var(--jtd-surface);
  border-bottom: 1px solid var(--jtd-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.jtd-page .et_pb_row.jtd-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  max-width: var(--jtd-container);
}
.jtd-page .jtd-header-row .et_pb_column { width: auto !important; margin: 0 !important; }
.jtd-header-logo img { height: 46px; width: auto; }

/* The Divi Menu module, styled to the design.
   Divi renders .et_pb_menu__menu > nav > ul.et-menu > li, with .sub-menu for
   children — close enough to a standard WordPress menu that the design's
   dropdown rules apply with small adjustments. */
.jtd-nav .et_pb_menu__menu > nav > ul {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: var(--jtd-font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
}
.jtd-nav .et-menu > li { padding: 0; }
.jtd-nav .et-menu > li > a { color: var(--jtd-ink) !important; }
.jtd-nav .et-menu > li > a:hover,
.jtd-nav .et-menu > li.current-menu-item > a,
.jtd-nav .et-menu > li.current-menu-ancestor > a { color: var(--jtd-copper) !important; }

/* Dropdown: square, hairline border, the design's single shadow. */
.jtd-nav .et-menu li ul.sub-menu {
  width: 290px;
  padding: 8px;
  background: var(--jtd-surface) !important;
  border: 1px solid var(--jtd-border) !important;
  border-top: 1px solid var(--jtd-border) !important;
  box-shadow: var(--jtd-shadow-dropdown);
}
.jtd-nav .et-menu li li { padding: 0; margin: 0; }
.jtd-nav .et-menu li li a {
  display: block;
  width: auto;
  padding: 11px 14px !important;
  font-weight: 700;
  color: var(--jtd-ink) !important;
}
.jtd-nav .et-menu li li a:hover { background: var(--jtd-page); opacity: 1; }

/* Extensions children sit indented beneath their parent. */
.jtd-nav .et-menu li li ul.sub-menu {
  position: static;
  width: auto;
  padding: 0;
  border: 0 !important;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  display: block !important;
}
.jtd-nav .et-menu li li li a {
  padding: 8px 14px 8px 28px !important;
  font-weight: 500;
  color: var(--jtd-body) !important;
}
.jtd-nav .et-menu li li li a:hover { color: var(--jtd-copper) !important; }

.jtd-header-cta .jtd-btn { padding: 12px 22px !important; }

/* Mobile menu: Divi's own toggle, restyled. */
@media (max-width: 980px) {
  .jtd-page .et_pb_section.jtd-header { position: static; }
  .jtd-nav .et_mobile_menu {
    border-top: 2px solid var(--jtd-copper);
    background: var(--jtd-surface);
    padding: 8px 0;
  }
  .jtd-nav .et_mobile_menu li a {
    font-family: var(--jtd-font-head);
    font-weight: 600;
    color: var(--jtd-ink) !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--jtd-border);
  }
  .jtd-nav .et_mobile_menu li li a { padding-left: 36px !important; font-weight: 500; }
  .jtd-nav .mobile_menu_bar:before { color: var(--jtd-navy) !important; }
}

/* CTA band --------------------------------------------------------------- */
.jtd-page .et_pb_section.jtd-ctaband {
  background: var(--jtd-copper) !important;
  padding: 0 !important;
}
.jtd-ctaband-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 64px 0;
}
.jtd-ctaband-inner h2 {
  font-family: var(--jtd-font-head);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 10px;
  letter-spacing: -.015em;
}
/* White, not the design's #FBEDDF: cream on copper is 3.76:1 at 19px, below
   the 4.5:1 WCAG AA needs. White lifts it to 4.32:1 — still short, and only
   the darker copper closes the gap (5.02:1). See docs/contrast-findings.md. */
.jtd-ctaband-inner p { font-size: 19px; margin: 0; color: #FFFFFF; }
.jtd-ctaband-inner .jtd-btn--outline {
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF;
}
.jtd-ctaband-inner .jtd-btn--outline:hover { background: #FFFFFF; color: var(--jtd-copper); }
.jtd-ctaband__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Footer ----------------------------------------------------------------- */
.jtd-page .et_pb_section.jtd-footer {
  background: var(--jtd-navy) !important;
  padding: 0 !important;
}
.jtd-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  padding: 64px 0 34px;
  color: #AFC0D0;
}
.jtd-footer-grid h4 {
  font-family: var(--jtd-font-head);
  font-size: 14px;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  margin: 0 0 18px;
}
.jtd-footer-grid a { color: #AFC0D0; }
.jtd-footer-grid a:hover { color: #FFFFFF; }
.jtd-footer-grid p { font-size: 16px; line-height: 1.65; color: #AFC0D0; margin: 20px 0 0; max-width: 340px; }
.jtd-footer-links { display: grid; gap: 11px; font-size: 16px; }
.jtd-footer-logo {
  height: 48px;
  width: auto;
  background: #FFFFFF;
  padding: 10px 14px;
}
.jtd-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  letter-spacing: .04em;
  padding: 22px 0 40px;
  color: #AFC0D0;
}