/*
Theme Name: TEC Blocks
Theme URI: https://theelevatorconsultant.com
Author: The Elevator Consultants
Description: Native WordPress block theme for The Elevator Consultants. Independent elevator consultants, advocates for building owners. Replaces the classic theme plus Elementor while preserving all existing URLs and content.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tec-blocks
Tags: full-site-editing, block-templates, blog, business
*/

/* -------------------------------------------------------------------------
   Only what theme.json cannot express.
   ---------------------------------------------------------------------- */

:root {
  --tec-blue: #003d79;
  --tec-mid: #3087b4;
  --tec-green: #5c8727;
  /* Accessible variant of the brand green: 4.65:1 on white, so it may carry
     normal-size text. --tec-green stays the brand colour for large text and
     decoration, where 3:1 is the requirement and it passes comfortably. */
  --tec-green-ink: #578025;
  --tec-lime: #a0b842;
  --tec-ink: #12202E;
  --tec-soft: #4E6274;
  --tec-line: #DDE6EE;
  --tec-surface: #F4F7FA;
  --tec-deep: #0A1D30;
}

body { -webkit-font-smoothing: antialiased; }

/* The signature device: an angled edge between sections. ------------------ */
.tec-slant-top { position: relative; }
.tec-slant-top::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 70px;
  background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none;
}
.tec-slant-top--right::before { clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* When the section above is not white, the wedge must match it. */
.tec-slant-from-surface::before { background: var(--tec-surface); }
.tec-slant-from-deep::before    { background: var(--tec-deep); }

/* -------------------------------------------------------------------------
 * HERO
 * A photograph, a directional gradient so the headline always has ground to
 * sit on, and the angled base with the green rule riding it.
 * ---------------------------------------------------------------------- */
.tec-hero { position: relative; overflow: hidden; }

/* Directional wash — dark at the headline, clearing towards the right so the
   photograph is still readable as a photograph. */
.tec-hero .wp-block-cover__background {
  background: linear-gradient(100deg,
    rgba(0,45,88,.86) 0%,
    rgba(0,61,121,.58) 46%,
    rgba(22,72,118,.24) 100%) !important;
  opacity: 1 !important;
}

/* The angled base. */
.tec-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 110px; background: #fff; z-index: 2; pointer-events: none;
  clip-path: polygon(0 100%, 100% 34%, 100% 100%);
}
/* The green rule riding the angle. */
.tec-hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 36px;
  height: 3px; background: var(--tec-lime); z-index: 3; pointer-events: none;
  transform: rotate(-2.85deg); transform-origin: right center;
}

/* Header sitting over the hero image. ------------------------------------ */
.tec-hero .wp-block-navigation a,
.tec-hero .wp-block-navigation .wp-block-navigation-item__content { color: #EAF2F9; }
.tec-hero .wp-block-navigation__submenu-container a { color: #12202E; }
.tec-hero .wp-block-cover__inner-container { position: relative; z-index: 4; }

/* -------------------------------------------------------------------------
 * NAVIGATION
 * The submenu chevrons were dropping below their labels: a 44px min-height on
 * every nav link turned each item into a tall inline-flex box and the icon,
 * being a sibling, fell out of alignment. Tap-target sizing belongs on touch
 * widths only — see the mobile block.
 * ---------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item { align-items: center; }
.wp-block-navigation .wp-block-navigation-item__content { display: inline; }
.wp-block-navigation .wp-block-navigation__submenu-icon {
  align-self: center; display: inline-flex; align-items: center;
  margin: 0 0 0 3px; padding: 0; height: auto; line-height: 0;
}
.wp-block-navigation .wp-block-navigation__submenu-icon svg { display: block; }
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { margin-left: 6px; }

/* Header CTA — the one green thing in the chrome. */
.tec-nav-cta a.wp-block-button__link {
  padding: 12px 22px; font-size: 0.95rem; white-space: nowrap;
}
@media (max-width: 1180px) { .tec-nav-cta { display: none; } }

/* ACF compatibility rendering ------------------------------------------- */
.tec-banner {
  background-size: cover; background-position: center; background-color: var(--tec-deep);
  padding: 0;
}
.tec-banner__inner {
  max-width: 1200px; margin: 0 auto; padding: 5rem 24px 4rem;
  background: linear-gradient(100deg, rgba(0,45,88,.72) 0%, rgba(0,61,121,.42) 60%, rgba(22,72,118,.12) 100%);
}
.tec-banner:not([style*="background-image"]) .tec-banner__inner { background: none; }
.tec-banner__title {
  color: #fff; font-weight: 300; font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.08; letter-spacing: -.02em; margin: 0;
}
.tec-banner:not([style*="background-image"]) .tec-banner__title { color: var(--tec-blue); }
.tec-banner__body { color: #DCE9F4; font-size: 1.15rem; line-height: 1.6; margin-top: 1rem; max-width: 60ch; }

.tec-general { padding: 3rem 0; }
.tec-general__inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.tec-general__inner > * + * { margin-top: 1.1em; }
.tec-general__inner h2 { font-weight: 300; color: var(--tec-blue); margin-top: 2em; }
.tec-general__inner h3 { font-weight: 400; color: var(--tec-blue); margin-top: 1.6em; }
.tec-general__inner img { max-width: 100%; height: auto; }
.tec-general__inner table { width: 100%; border-collapse: collapse; }
.tec-general__inner td, .tec-general__inner th { border: 1px solid var(--tec-line); padding: .6em .8em; }

.tec-cols { padding: 3rem 0; background: var(--tec-surface); }
.tec-cols__inner {
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem;
}
.tec-col h3 { font-weight: 400; font-size: 1.25rem; color: var(--tec-blue); margin: 0 0 .5em; }
.tec-col p { color: var(--tec-soft); margin: 0; }
@media (max-width: 860px) { .tec-cols__inner { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
 * HOME — the existing site's own service copy, presented as cards.
 * The words and the links are the current page's, unedited. Only the
 * presentation is new: the 308px thumbnails from 2017 are dropped because
 * they were sized for a two-column 2017 layout and look broken at this scale.
 * ---------------------------------------------------------------------- */
.tec-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 26px;
}
.tec-card {
  background: #fff; padding: 30px 28px; display: flex; flex-direction: column;
}
.tec-card h3 { font-weight: 400; font-size: 1.31rem; margin: 0 0 10px; color: var(--tec-blue); line-height: 1.25; }
.tec-card h3 a { color: inherit; }
.tec-card p {
  font-size: 1.03rem; line-height: 1.6; color: var(--tec-soft); margin: 0 0 16px;
}
.tec-card p:last-of-type { margin-bottom: 18px; }
.tec-card .tec-more {
  margin-top: auto; font-size: 0.97rem; font-weight: 600; color: var(--tec-green-ink);
}
.tec-card .tec-more:hover { color: var(--tec-blue); text-decoration: underline; }
@media (max-width: 980px) { .tec-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) { .tec-cards { grid-template-columns: 1fr; } }

/* The quiet green arrow link used under each block of the home page. */
.tec-arrow a, a.tec-arrow { font-weight: 600; color: var(--tec-blue); }
.tec-arrow .arw { color: var(--tec-lime); }

/* Split section: copy one side, photograph the other, edge to edge. ------- */
.tec-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.tec-split__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .tec-split { grid-template-columns: 1fr; }
  .tec-split__media img { min-height: 260px; }
}

/* Contact form on the deep blue CTA ------------------------------------- */
.tec-form-card {
  background: #fff; padding: 30px 28px; border-radius: 3px; color: var(--tec-ink);
}
.tec-form-card p { margin: 0 0 14px; }
.tec-form-card label { display: block; font-size: 0.92rem; font-weight: 600; color: var(--tec-blue); }
.tec-form-card br { display: none; }
.tec-form-card input[type="text"],
.tec-form-card input[type="email"],
.tec-form-card input[type="tel"],
.tec-form-card textarea {
  width: 100%; max-width: 100%; margin-top: 5px; padding: 11px 12px;
  border: 1px solid var(--tec-line); border-radius: 2px; font: inherit; font-size: 1rem;
  background: #fff; color: var(--tec-ink);
}
.tec-form-card textarea { min-height: 120px; }
.tec-form-card input[type="submit"] {
  background: var(--tec-green-ink); color: #fff; border: 0; border-radius: 2px;
  padding: 14px 32px; font: inherit; font-weight: 600; font-size: 1.02rem; cursor: pointer;
}
.tec-form-card input[type="submit"]:hover { background: var(--tec-blue); }
.tec-form-card .wpcf7-not-valid-tip { color: #b3261e; font-size: 0.88rem; }
/* The 2024 stock photograph that shipped above this form is not needed here. */
.tec-form-card .wpbn-hide, .tec-form-card > p > img { display: none; }

/* Article readability ---------------------------------------------------- */
/* A readable measure for body copy, kept flush with the page title above it
   rather than centred inside the wider column. */
/* !important is needed, not preferred: core block layout sets
   `margin-left:auto!important` on every child of a constrained container,
   which is what was centring the body column away from its own title. */
.tec-article .entry-content { max-width: 700px; margin-left: 0 !important; margin-right: auto !important; }
.tec-answer {
  border-left: 4px solid var(--tec-green); background: #F4F8EC;
  padding: 1.4rem 1.6rem; margin: 0 0 2rem;
}
.tec-answer__label {
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tec-green); margin: 0 0 .5rem;
}

/* Post list (blog index and archives) ------------------------------------ */
.tec-postlist .wp-block-post { border-top: 1px solid var(--tec-line); padding: 26px 0; }
.tec-postlist .wp-block-post:first-child { border-top: 0; }
.tec-meta { font-size: 0.86rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tec-mid); font-weight: 700; }

/* Wide content must never scroll the page sideways. ---------------------- */
.wp-block-table, pre, .tec-general__inner table { overflow-x: auto; display: block; max-width: 100%; }

/* Accessibility ---------------------------------------------------------- */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--tec-mid); outline-offset: 3px;
}
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; background: #fff; padding: .6em 1em; }

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

/* -------------------------------------------------------------------------
 * Defend the root font size.
 *
 * The wp-blog-news plugin loads Bootstrap 3 on every page, and Bootstrap 3
 * sets html{font-size:10px}. That silently scales every rem in this theme to
 * 62.5% of its intended size — a 59px headline renders at 37px and all the
 * spacing collapses with it.
 * ---------------------------------------------------------------------- */
html { font-size: 100%; }

/* ACF blocks sit inside post-content. Let the card grids use the full
   container while keeping running text at a readable measure. ------------- */
.tec-cols__inner { max-width: 1140px; }
.tec-general__inner { max-width: 820px; }
.tec-cols, .tec-banner { width: 100%; }

/* Logo lockup — never distort, never smush. -------------------------------- */
.tec-logo { margin: 0; line-height: 0; }
.tec-logo img { display: block; width: 200px; max-width: 46vw; height: auto; }
.wp-block-group.has-tec-blue-background-color .tec-logo img { width: 180px; }
.tec-footer-logo img { width: 150px; opacity: .8; }

/* ---------------------------------------------------------------- MOBILE -- */
@media (max-width: 900px) {
  .tec-hero .wp-block-cover__inner-container > .wp-block-group { padding-left: 20px; padding-right: 20px; }
  .tec-cols__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .tec-general__inner, .tec-banner__inner { padding-left: 20px; padding-right: 20px; }
  .tec-slant-top::before { height: 40px; }
  .tec-hero::after { height: 56px; }
  .tec-hero::before { bottom: 18px; }

  /* Tap targets: 44px minimum on touch widths, where it matters — and never
     on the desktop nav, where it knocked the submenu chevrons out of line. */
  .wp-block-button__link,
  .wp-block-navigation__responsive-container-content a { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 700px) {
  /* Hero: shorter, and let the headline breathe rather than overflow. */
  .tec-hero { min-height: 480px !important; }
  .tec-hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem) !important; line-height: 1.12 !important; }
  .tec-hero .wp-block-buttons { gap: 10px; }
  .tec-hero .wp-block-button__link { padding: 14px 22px; }

  /* Stack every two/three column layout. */
  .wp-block-columns { flex-wrap: wrap !important; gap: 1.75rem; }
  .wp-block-column { flex-basis: 100% !important; }

  /* Sections were built for desktop rhythm; halve it on a phone. */
  .wp-block-group.alignfull { padding-top: 3.25rem !important; padding-bottom: 3rem !important; }

  .tec-logo img { width: 150px; }
  .tec-banner__inner { padding-top: 2.5rem; padding-bottom: 2rem; }

  /* Never let anything push the page sideways. */
  img, figure, table, iframe, pre { max-width: 100%; height: auto; }
  .tec-general__inner table { display: block; overflow-x: auto; }
}

html, body { overflow-x: hidden; }

/* Heading above the retained home-page content. ---------------------------- */
.tec-cards-intro { max-width: 900px; margin: 0 0 44px; }
.tec-cards-intro h2 {
  font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.5rem); color: var(--tec-blue);
  line-height: 1.14; letter-spacing: -.024em; margin: 0; text-wrap: balance;
}

/* Small green "Start →" and phone links. ---------------------------------- */
.tec-start a { color: var(--tec-green-ink); }
.tec-start a:hover { color: var(--tec-blue); text-decoration: underline; }
.tec-phone a { color: var(--tec-lime); }
.tec-phone a:hover { color: #fff; }
.tec-footer-line a { color: #9FB6C8; }
.tec-footer-line a:hover { color: #fff; }
.tec-questions .wp-block-post-title a:hover { color: var(--tec-blue); text-decoration: underline; }

/* Blog index and archives -------------------------------------------------- */
.tec-page-title {
  font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1.08;
  letter-spacing: -.024em; color: #fff; margin: 0;
}
.tec-index .wp-block-post { border-top: 1px solid var(--tec-line); padding: 30px 0; }
.tec-index .wp-block-post:first-child { border-top: 0; padding-top: 6px; }
.tec-index .wp-block-post-title { margin: 6px 0 8px; }
.tec-index .wp-block-post-title a:hover { text-decoration: underline; }
.tec-index .wp-block-post-date {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--tec-mid);
}
.tec-index .wp-block-post-excerpt__more-link { display: none; }
.tec-index .wp-block-query-pagination { margin-top: 52px; font-weight: 600; }
.tec-slant-from-blue::before { background: var(--tec-blue); }

/* The question list shares its section's measure with the heading above it. */
.tec-questions .wp-block-post-template { max-width: 100%; }
/* CF7 sets rows="10"; that is taller than this card needs. */
.tec-form-card textarea { height: 118px; min-height: 0; }

/* -------------------------------------------------------------------------
 * The root layout adds a gap between top-level blocks, which showed as a
 * white strip between the blue header and the blue band under it. Sections
 * carry their own padding; they do not need a gap as well.
 * ---------------------------------------------------------------------- */
.wp-site-blocks > * { margin-block-start: 0; }

/* -------------------------------------------------------------------------
 * Header CTA, corrected.
 *
 * `.wp-block-buttons{display:flex}` ships from core and loads after this
 * sheet, so a bare `.tec-nav-cta{display:none}` never won. Between roughly
 * 700 and 1180px the navigation is still inline and there is no room for the
 * button; below that the nav collapses to a toggle and the button fits again.
 * ---------------------------------------------------------------------- */
@media (min-width: 701px) and (max-width: 1180px) {
  .wp-block-buttons.tec-nav-cta { display: none; }
}
@media (max-width: 700px) {
  /* A compact header row: mark, menu toggle, one action. */
  .tec-logo img { width: 130px; }
  .wp-block-buttons.tec-nav-cta a.wp-block-button__link { padding: 10px 16px; font-size: 0.88rem; }
  header .wp-block-group, .tec-hero .wp-block-group.is-layout-flex { row-gap: 12px; }
}


/* =========================================================================
   INTERIOR PAGES
   The frame the pages have never had: where you are, what else to read,
   the free tool, and a way to get in touch without leaving the page.
   ====================================================================== */

/* Breadcrumb ------------------------------------------------------------- */
.tec-crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem;
  font-size: .88rem; color: var(--tec-soft);
}
.tec-crumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--tec-grey, #9AAAB8); }
.tec-crumbs a { color: var(--tec-soft); }
.tec-crumbs a:hover { color: var(--tec-blue); text-decoration: underline; }
.tec-crumbs li[aria-current] { color: var(--tec-blue); font-weight: 600; }

/* Two-column body -------------------------------------------------------- */
.tec-page { align-items: flex-start; }
/* The measure is set by the column here, so the article rule that narrows
   and centres a lone column of text must stand down. */
.tec-page__main .entry-content { max-width: none !important; margin-left: 0 !important; }
.tec-page__aside { position: sticky; top: 24px; }

/* On this page ----------------------------------------------------------- */
.tec-toc {
  border-left: 3px solid var(--tec-lime); background: #F7FAF1;
  padding: 1.1rem 1.4rem; margin: 0 0 2.2rem;
}
.tec-toc__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tec-green); margin: 0 0 .6rem;
}
.tec-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .38rem; }
.tec-toc a { color: var(--tec-blue); font-size: 1rem; }
.tec-toc a:hover { text-decoration: underline; }

/* Headings the contents list points at should not hide under a sticky bar. */
.tec-article h2[id] { scroll-margin-top: 24px; }

/* Sidebar ---------------------------------------------------------------- */
.tec-aside { display: grid; gap: 20px; }
.tec-aside__card {
  border: 1px solid var(--tec-line); border-radius: 3px; padding: 24px 22px; background: #fff;
}
.tec-aside__card h2 {
  font-size: 1.16rem; font-weight: 600; color: var(--tec-blue); margin: 0 0 .5rem; line-height: 1.3;
}
.tec-aside__card p { font-size: .97rem; line-height: 1.55; color: var(--tec-soft); margin: 0 0 1rem; }
.tec-aside__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tec-green); margin: 0 0 .5rem;
}
.tec-aside__card--tool { background: var(--tec-surface); border-color: #D3E0EC; }
.tec-aside__card--ask { background: var(--tec-blue); border-color: var(--tec-blue); }
.tec-aside__card--ask h2 { color: #fff; }
.tec-aside__card--ask p { color: #BFD5E8; }
.tec-aside__btn {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--tec-green-ink); color: #fff; font-weight: 600; font-size: .97rem;
  padding: 11px 22px; border-radius: 2px;
}
.tec-aside__btn:hover { background: var(--tec-blue); color: #fff; text-decoration: none; }
.tec-aside__card--ask .tec-aside__btn { background: var(--tec-lime); color: #10314F; }
.tec-aside__card--ask .tec-aside__btn:hover { background: #fff; color: var(--tec-blue); }
.tec-aside__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tec-aside__links a { font-size: .99rem; line-height: 1.4; color: var(--tec-blue); }
.tec-aside__links a:hover { text-decoration: underline; }

/* Closing call to action ------------------------------------------------- */
.tec-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.tec-cta__copy h2 {
  font-weight: 300; font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.08;
  letter-spacing: -.026em; color: #fff; margin: 0 0 1rem; text-wrap: balance;
}
.tec-cta__copy p { font-size: 1.18rem; font-weight: 300; line-height: 1.5; color: #BFD5E8; margin: 0; }
.tec-cta__phone { margin-top: 1.1rem !important; font-size: 1.4rem; }
.tec-cta__phone a { color: var(--tec-lime); }
.tec-cta__phone a:hover { color: #fff; }

@media (max-width: 900px) {
  .tec-cta { grid-template-columns: 1fr; gap: 34px; }
  .tec-page__aside { position: static; }
}
@media (max-width: 700px) {
  .tec-aside__card { padding: 20px 18px; }
  .tec-toc { padding: 1rem 1.1rem; }
}

/* Where the page already carries its own form, the closing section is a
   short prompt rather than a second form: one column, not two. */
.tec-cta--compact { grid-template-columns: 1.4fr 1fr; }
.tec-cta--compact .tec-cta__form { justify-self: start; align-self: center; }

/* -------------------------------------------------------------------------
 * ACF wrappers inside the two-column page.
 *
 * `.tec-general__inner` and `.tec-cols__inner` centre themselves and add
 * their own 24px gutter, which made sense when they were the whole page.
 * Inside a column they push the body copy out of line with its headings and
 * add a gutter on top of the column's own. Stand them down here.
 * ---------------------------------------------------------------------- */
.tec-page__main .tec-general,
.tec-page__main .tec-cols { padding: 0; background: none; }
.tec-page__main .tec-general + .tec-general { padding-top: 1.6rem; }
.tec-page__main .tec-general__inner,
.tec-page__main .tec-cols__inner { max-width: none; margin: 0; padding: 0; }
.tec-page__main .tec-cols__inner { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.6rem; }
.tec-page__main .tec-banner { margin-bottom: 1.8rem; }
.tec-page__main .tec-banner__inner { padding: 2.6rem 1.6rem 2.2rem; max-width: none; }
@media (max-width: 700px) {
  .tec-page__main .tec-cols__inner { grid-template-columns: 1fr; }
}

/* CF7 inputs are 100% wide with their own padding and border; without
   border-box that overflowed the card by 26px and clipped the right edge. */
.tec-form-card input,
.tec-form-card textarea,
.tec-form-card select { box-sizing: border-box; }
.tec-form-card .wpcf7-form-control-wrap { display: block; }

/* -------------------------------------------------------------------------
 * Gravity Forms inside the call-to-action card.
 *
 * Gravity ships its own layout CSS, so these rules are scoped to the card and
 * kept to what the design actually needs: brand labels, a consistent field
 * treatment, and the green submit button.
 * ---------------------------------------------------------------------- */
.tec-form-card .gform_wrapper { margin: 0; }
.tec-form-card .gform_heading { display: none; }
.tec-form-card .gform_fields { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tec-form-card .gfield { margin: 0; padding: 0; }
.tec-form-card .gfield_label,
.tec-form-card legend.gfield_label {
  display: block; font-size: 0.92rem; font-weight: 600; color: var(--tec-blue);
  margin: 0 0 5px; line-height: 1.3;
}
.tec-form-card .gfield_required { color: var(--tec-green-ink); }
.tec-form-card .gfield_description {
  font-size: 0.85rem; color: var(--tec-soft); margin: 5px 0 0; padding: 0; line-height: 1.45;
}
.tec-form-card .ginput_container input[type="text"],
.tec-form-card .ginput_container input[type="email"],
.tec-form-card .ginput_container input[type="tel"],
.tec-form-card .ginput_container textarea {
  box-sizing: border-box; width: 100%; max-width: 100%;
  padding: 11px 12px; border: 1px solid var(--tec-line); border-radius: 2px;
  font: inherit; font-size: 1rem; background: #fff; color: var(--tec-ink);
}
.tec-form-card .ginput_container textarea { height: 118px; min-height: 0; resize: vertical; }
.tec-form-card .gform_footer { margin: 18px 0 0; padding: 0; }
.tec-form-card .gform_button {
  background: var(--tec-green-ink); color: #fff; border: 0; border-radius: 2px;
  padding: 14px 32px; font: inherit; font-weight: 600; font-size: 1.02rem; cursor: pointer;
  min-height: 44px;
}
.tec-form-card .gform_button:hover { background: var(--tec-blue); }
.tec-form-card .validation_message,
.tec-form-card .gform_validation_errors { color: #B3261E; font-size: 0.88rem; }
.tec-form-card .gform_validation_errors { background: #FDECEA; border: 0; padding: .7rem .9rem; margin: 0 0 14px; }
.tec-form-card .gform_confirmation_message { color: var(--tec-ink); font-size: 1.02rem; line-height: 1.6; }
.tec-form-card .gform_confirmation_message strong { color: var(--tec-blue); }
/* Gravity's honeypot must stay invisible whatever else is going on. */
.tec-form-card .gform_validation_container { display: none !important; }

/* Gravity ships a blue primary button through its own design tokens; point
   those at the brand green rather than fighting the cascade selector by
   selector, and keep a direct override for older markup. */
.tec-form-card .gform_wrapper {
  --gf-ctrl-btn-bg-color-primary: var(--tec-green-ink);
  --gf-ctrl-btn-bg-color-hover-primary: var(--tec-blue);
  --gf-ctrl-btn-bg-color-focus-primary: var(--tec-blue);
  --gf-ctrl-btn-border-color-primary: var(--tec-green-ink);
  --gf-ctrl-btn-border-color-hover-primary: var(--tec-blue);
  --gf-ctrl-btn-border-color-focus-primary: var(--tec-blue);
  --gf-ctrl-btn-color-primary: #fff;
  --gf-color-primary: var(--tec-green);
  --gf-local-color: var(--tec-ink);
}
.tec-form-card .gform_wrapper .gform_footer input[type="submit"],
.tec-form-card .gform_wrapper .gform_footer button,
.tec-form-card .gform_wrapper .gform_footer .gform_button {
  background: var(--tec-green-ink) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 2px !important;
  padding: 14px 32px !important;
  font: inherit !important;
  font-weight: 600 !important;
  font-size: 1.02rem !important;
  min-height: 44px;
  width: auto;
}
.tec-form-card .gform_wrapper .gform_footer input[type="submit"]:hover,
.tec-form-card .gform_wrapper .gform_footer button:hover,
.tec-form-card .gform_wrapper .gform_footer .gform_button:hover {
  background: var(--tec-blue) !important;
}

/* -------------------------------------------------------------------------
 * Contact
 * The form is the point of the page, so it sits first and full-height, with
 * the addresses and the regional numbers beside it rather than under a fold.
 * ---------------------------------------------------------------------- */
.tec-contact { align-items: flex-start; }
.tec-form-card--plain { padding: 0; background: none; border-radius: 0; }
.tec-form-card--plain .gfield_label { color: var(--tec-blue); }

.tec-contact__details .entry-content { max-width: none !important; margin-left: 0 !important; }
.tec-contact__details h2 {
  font-size: 1.7rem; font-weight: 300; color: var(--tec-blue);
  line-height: 1.15; margin: 0 0 .8rem; letter-spacing: -.018em;
}
.tec-contact__details h2 strong { font-weight: 300; }
.tec-contact__details p { margin: 0 0 .9rem; color: var(--tec-soft); font-size: 1.03rem; line-height: 1.6; }
.tec-contact__details a { font-weight: 600; }

/* The regional numbers read as a list, not as a column of paragraphs. */
.tec-contact__details p strong:only-child,
.tec-contact__details p:has(> strong:first-child) { color: var(--tec-ink); }
.tec-contact__details .tec-regions {
  display: grid;
  /* auto-fit rather than a fixed 2: if two columns cannot hold the longest
     entry on one line, it drops to one column instead of wrapping the phone
     number onto its own row. */
  /* 13.8rem = 221px; the longest entry ("San Francisco, CA - (415) 799-7971")
     measures 215px at this font, so a column always holds it on one line.
     Two columns need 454px and the container is 466px. Where there is not
     room for two, auto-fit drops to one rather than wrapping the number. */
  grid-template-columns: repeat(auto-fit, minmax(13.8rem, 1fr));
  gap: .5rem .8rem;
  margin-top: .4rem;
}
.tec-contact__details .tec-regions p {
  margin: 0; padding: .55rem 0; border-top: 1px solid var(--tec-line);
  font-size: .94rem; color: var(--tec-ink);
  white-space: nowrap;
}
.tec-contact__details .tec-regions p strong { color: var(--tec-blue); font-weight: 600; }

@media (max-width: 900px) {
  .tec-contact__details { margin-top: 2.5rem; }
  .tec-contact__details .tec-regions { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * Pages rendered by a plugin through get_header() / get_footer().
 * They have no block template to set their measure, so give them the same
 * rhythm as the rest of the site.
 * ---------------------------------------------------------------------- */
.tec-plugin-main {
  max-width: 1120px; margin: 0 auto; padding: 60px 32px 80px;
}
.tec-plugin-main h1 { font-weight: 300; letter-spacing: -.022em; line-height: 1.1; margin-top: 0; }
.tec-plugin-main form { max-width: 420px; }
.tec-plugin-main input[type="text"],
.tec-plugin-main input[type="email"],
.tec-plugin-main input[type="password"] {
  box-sizing: border-box; width: 100%; padding: 11px 12px; margin-top: 5px;
  border: 1px solid var(--tec-line); border-radius: 2px; font: inherit; font-size: 1rem;
}
.tec-plugin-main input[type="submit"],
.tec-plugin-main button[type="submit"] {
  background: var(--tec-green-ink); color: #fff; border: 0; border-radius: 2px;
  padding: 13px 30px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px;
}
.tec-plugin-main input[type="submit"]:hover,
.tec-plugin-main button[type="submit"]:hover { background: var(--tec-blue); }
@media (max-width: 700px) { .tec-plugin-main { padding: 36px 20px 56px; } }

/* --- Article byline and category line ---------------------------------- */
.tec-post-terms {
  margin: 0 0 .1rem; font-size: .9rem; letter-spacing: .01em; color: var(--tec-soft);
}
.tec-post-terms a { color: inherit; text-decoration: none; }
.tec-post-terms a:hover { color: var(--tec-blue); text-decoration: underline; }

.tec-byline { margin: 0; font-size: .92rem; color: var(--tec-soft); }
.tec-byline__author { font-weight: 600; color: var(--tec-ink); }
.tec-post-terms__sep, .tec-byline__sep { margin: 0 .55em; opacity: .5; }

/* --- CTA lead-in above the phone number --------------------------------- */
.tec-cta__reach {
  margin-top: 1.4rem !important; font-size: .95rem !important; font-weight: 400 !important;
  letter-spacing: .05em; text-transform: uppercase; color: #BFD5E8;
}
.tec-cta__phone { margin-top: .25rem !important; }

/* --- WCAG 2.2 AA fixes from the pre-production audit --------------------
 *
 * 2.4.1 Bypass Blocks — the skip link carries .screen-reader-text, which
 * clips it to a 1px box. The previous :focus rule repositioned it but never
 * undid the clip, so it stayed 1x1 even while focused and the keyboard user
 * got no way past the navigation. These four properties are what actually
 * make it appear.
 *
 * 2.5.8 Target Size (Minimum) — "Read more" and "All services" are the only
 * link in their paragraph, so the inline exception does not apply to them and
 * they need a 24px target. Padding is added and pulled back out with negative
 * margin, so the clickable area grows without moving anything on the page.
 */
.skip-link:focus {
  width: auto; height: auto; clip: auto; clip-path: none;
  white-space: nowrap; color: var(--tec-blue); text-decoration: underline;
}

.tec-card .tec-more,
.tec-arrow a,
a.tec-arrow {
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
}

/* Mobile hardening — found in the 375px pass. -------------------------------
   1. Legacy in-content images carry width/height attributes from the old
      builder and were being sized by the layout rule (max-width:760px), so on
      a phone the right-hand side of the picture was cut off. Content images
      must never be wider than the column they sit in.
   2. "Start →" card links were 20px tall; WCAG 2.5.8 wants 24px.
   3. One Gravity Forms field renders at 14px, which makes iOS Safari zoom the
      whole page the moment it is tapped. 16px is the threshold. */

.entry-content img,
.wp-block-post-content img,
.tec-general__inner img,
.entry-content iframe,
.entry-content video {
  max-width: 100% !important;
}
.entry-content img,
.wp-block-post-content img,
.tec-general__inner img { height: auto; }

.tec-start a {
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select,
.gform_wrapper input[type="file"] { font-size: 16px; }

/* Cookie banner. -------------------------------------------------------------
   CookieYes re-applies its stock blue (#1863DC) as inline styles at runtime
   from its own JSON config, so editing the stored template is not enough —
   these have to win on !important. Accept and Reject keep identical weight on
   purpose: making "Reject" the quieter button is the dark pattern regulators
   look for. */
.cky-btn-accept,
.cky-btn-reject,
button[data-cky-tag="detail-accept-button"],
button[data-cky-tag="detail-reject-button"],
button[data-cky-tag="detail-save-button"] {
  background-color: var(--tec-blue) !important;
  border-color: var(--tec-blue) !important;
  color: #fff !important;
}
.cky-btn-customize {
  color: var(--tec-blue) !important;
  border-color: var(--tec-blue) !important;
}
.cky-btn-revisit-wrapper { background-color: var(--tec-blue) !important; }
.cky-show-desc-btn { color: var(--tec-blue) !important; }
.cky-always-active { color: var(--tec-green-ink) !important; }
a.cky-policy { color: var(--tec-blue) !important; text-decoration: underline; }
.cky-consent-bar { border-radius: 6px; }

@media (max-width: 600px) {
  /* It was taking roughly half a phone screen. */
  .cky-consent-container { max-height: 78vh; }
  .cky-consent-bar { padding: 16px !important; }
  .cky-title { font-size: 16px !important; }
  .cky-notice-des p,
  .cky-notice-des { font-size: 13.5px !important; line-height: 1.45 !important; }
  .cky-notice-btn-wrapper .cky-btn { min-height: 44px; }
}

/* Page head carrying the banner photograph. ----------------------------------
   The image used to render as a band inside the body, directly under the
   heading. It belongs behind the heading, which is where the old site had it.

   The angled bottom edge is normally drawn by a wedge on <main> painted in a
   flat colour; a flat colour cannot continue a photograph, so on these pages
   the wedge is switched off and the head clips itself instead. */
.tec-pagehead { position: relative; }

body.tec-pagehead--image .tec-pagehead {
  background-image: var(--tec-pagehead-img);
  background-size: cover;
  background-position: center;
  background-color: var(--tec-deep) !important;
  padding-top: 44px !important;
  padding-bottom: 116px !important;   /* 46 of its own + the 70 of the wedge */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%);
}

/* Ground for the type. Same wash as the home-page hero, so the two read as
   one system rather than two different treatments of a photograph. */
body.tec-pagehead--image .tec-pagehead::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(0,45,88,.86) 0%,
    rgba(0,61,121,.62) 52%,
    rgba(22,72,118,.30) 100%);
  pointer-events: none;
}
body.tec-pagehead--image .tec-pagehead > * { position: relative; z-index: 1; }

body.tec-pagehead--image .tec-pagehead .wp-block-post-title,
body.tec-pagehead--image .tec-pagehead .tec-crumbs,
body.tec-pagehead--image .tec-pagehead .tec-crumbs li[aria-current] { color: #fff; }
body.tec-pagehead--image .tec-pagehead .tec-crumbs a { color: #CFE0EE; }
body.tec-pagehead--image .tec-pagehead .tec-crumbs a:hover { color: #fff; text-decoration: underline; }
body.tec-pagehead--image .tec-pagehead .tec-crumbs li + li::before { color: #8FB0C9; }

body.tec-pagehead--image main.tec-slant-top::before { display: none; }

.tec-pagehead__body { color: #DCE9F4; font-size: 1.1rem; line-height: 1.6; margin-top: .9rem; max-width: 60ch; }
.tec-pagehead__body p { margin: 0 0 .6em; }
.tec-pagehead__body p:last-child { margin-bottom: 0; }
body:not(.tec-pagehead--image) .tec-pagehead__body { color: var(--tec-soft); }

@media (max-width: 782px) {
  body.tec-pagehead--image .tec-pagehead {
    padding-top: 30px !important;
    padding-bottom: 78px !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
  }
}