/* ThinkPark — ACF section layout.
   Layout only: sections, grids, cards, forms. Brand colours, fonts and the
   type scale come from GeneratePress — see Customizer, not here.

   Base rules first, then every media query, widest to narrowest.
   Keep it that way: a @media block sitting above an unconditional rule
   is how a correct-looking rule silently loses. */

/* No colours here. All ten brand colours are GeneratePress global colours
   (Customizer → Colours → Global Colours); GP emits them as these same
   --names on :root, ahead of this file, so every var() below still resolves.
   They were declared in both places until now, which meant a colour changed
   in the Customizer appeared to do nothing.

   What remains are layout tokens, which GP has no concept of. */
:root {
  --container: 1280px;
  --pad-x:     80px;
  --pad-y:     80px;
  --header-h:  96px;

  
  --font-head:  'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --track-head: -0.025em;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-x:       800; }
*, *::before, *::after { box-sizing: border-box; }
* { border-radius: 0; }
/* body background/colour and the h1-h6 family, weight and tracking were all
   declared here and all set identically in GP. Deleted, not re-tuned:
   Customizer → Colours for the first, → Typography for the rest. */
/* Body font family is GP's too — it emits this exact selector list. */
.tp-w-regular { font-weight: var(--weight-regular); }
.tp-w-medium { font-weight: var(--weight-medium); }
.tp-w-semi { font-weight: var(--weight-semi); }
.tp-w-bold { font-weight: var(--weight-bold); }
.site.grid-container { max-width: none !important; padding: 0 !important; }
.site-content { max-width: none !important; padding: 0 !important; display: block !important; }
.site-main { margin: 0 !important; width: 100%; min-width: 0; display: block; }
.site-footer { display: none !important; }
.tp-section { width: 100%; box-sizing: border-box; margin: 0; padding: var(--pad-y) 0; }
.tp-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.tp-tone-white { background: var(--white);       color: var(--ink); }
.tp-tone-grey { background: var(--grey-light);  color: var(--ink); }
.tp-tone-green-light { background: var(--green-light); color: var(--ink); }
.tp-tone-green-rich { background: var(--green-rich);  color: var(--white); }
.tp-tone-green-rich h1, .tp-tone-green-rich h2, .tp-tone-green-rich h3 { color: var(--white); }

/* Body copy on the dark tone. Headings, links, eyebrows and tick lists were
   each turned white individually, which left ordinary paragraphs behind:
   .tp-prose inherits --grey-text, so the intro under "Tell us what you need
   to park" was #4F4F4D on #4E6549 — about 1.1:1, which is not low contrast,
   it is invisible. */
.tp-tone-green-rich .tp-prose,
.tp-tone-green-rich p,
.tp-tone-green-rich li,
.tp-tone-green-rich dt,
.tp-tone-green-rich dd { color: var(--white); }

/* ...except inside a light panel sitting ON the dark tone. The form and the
   cards bring their own white background with them, so their text has to go
   back to ink or it disappears the other way. */
.tp-tone-green-rich .tp-form,
.tp-tone-green-rich .tp-card { color: var(--ink); }
.tp-tone-green-rich .tp-form p,
.tp-tone-green-rich .tp-form li,
.tp-tone-green-rich .tp-form label,
.tp-tone-green-rich .tp-card p,
.tp-tone-green-rich .tp-card li { color: var(--ink); }
.tp-tone-green-rich .tp-form .tp-note { color: var(--grey-text); }
.tp-tone-green-rich a { color: var(--white); }
/* Sizes, weights, line-heights and bottom margins for h1-h3 (and their
   mobile sizes) are GP typography settings now. All that is left here is
   line-breaking, which GP has no setting for and which is typesetting
   rather than brand. */
h1 { text-wrap: balance; }
h2 { text-wrap: pretty; }
.tp-card__title, .tp-card h3 { font-size: 20px; font-weight: var(--weight-bold); line-height: 1.3; margin: 0 0 8px; }
/* p inherited GP's body font-size and line-height anyway — this rule only
   restated them. Customizer → Typography → Body. */
.tp-prose, .tp-prose p { color: var(--grey-text); }
.tp-note { font-size: .875rem; color: var(--grey-text); }
.tp-tone-green-rich .tp-note { color: rgba(255,255,255,.75); }
.tp-eyebrow { display: block; font-size: 12px; font-weight: var(--weight-semi);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-text); margin-bottom: 14px; }
.tp-footer .tp-eyebrow, .tp-footer h3 { color: var(--green-brand); }
.tp-tone-green-rich .tp-eyebrow { color: rgba(255,255,255,.8); }
a.tp-btn, button.tp-btn, .tp-btn { --btn-bg: var(--green-rich);
  --btn-fg: var(--white);
  --btn-bd: var(--green-rich);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 28px;
  font-family: var(--font-body); font-size: .9375rem; font-weight: var(--weight-semi);
  text-decoration: none; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  transition: background .15s, color .15s, border-color .15s; }
a.tp-btn:visited, button.tp-btn:visited { color: var(--btn-fg); }
a.tp-btn--outline, button.tp-btn--outline, .tp-btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
a.tp-btn:hover, button.tp-btn:hover, a.tp-btn:focus-visible { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); }
.tp-tone-green-rich a.tp-btn, .tp-tone-green-rich button.tp-btn { --btn-bg: var(--white); --btn-fg: var(--green-rich); --btn-bd: var(--white); }
.tp-tone-green-rich a.tp-btn--outline, .tp-tone-green-rich button.tp-btn--outline { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: var(--white); }
.tp-tone-green-rich a.tp-btn:hover, .tp-tone-green-rich button.tp-btn:hover { --btn-bg: var(--green-light); --btn-fg: var(--ink); --btn-bd: var(--green-light); }
.tp-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.5rem 0; padding: 0; }
.tp-chip { display: inline-block; padding: 6px 14px; font-size: .8125rem; font-weight: var(--weight-medium);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: inherit; }
.tp-tone-white .tp-chip, .tp-tone-grey .tp-chip, .tp-tone-green-light .tp-chip { background: var(--white); border-color: var(--line); color: var(--ink); }
.tp-chip--status { font-weight: var(--weight-semi); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.tp-loc-hero__content .tp-chip--status { margin-bottom: 1rem; }
.tp-chip--available { background: var(--green-light); border-color: var(--green-brand); color: var(--green-rich); }
.tp-chip--limited,
.tp-chip--limited-availability { background: #FFF4E0; border-color: #C9922E; color: #6B4E12; }
.tp-chip--full,
.tp-chip--at-capacity { background: var(--grey-light); border-color: var(--line); color: var(--grey-text); }
/* Coming soon reads as forward-looking rather than unavailable: the mid green
   is the brand's, and it is deliberately not the grey used for Full — a site
   that is opening is a reason to enquire, not a dead end. */
.tp-chip--soon { background: var(--green-mid); border-color: var(--green-rich); color: var(--green-rich); }
.tp-chip--video { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* A tick list draws its own tick as a background on the li. Inside .tp-prose
   every li ALSO gets one from .tp-prose li::before, so the two stack up and
   each point shows a doubled glyph. That only started happening when the tick
   list moved into a WYSIWYG field, which renders inside .tp-prose — the markup
   is identical, the context is not.
   The list keeps its own tick, since that rule also owns the 32px indent the
   glyph is positioned against; the prose one is switched off here. */
.tp-prose .tp-ticks li::before { content: none; }

.tp-ticks { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; row-gap: 14px; }
.tp-ticks li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.5; color: var(--ink);
  
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3.5 10.5L7.8 14.8L16.5 5.2' stroke='%234E6549' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat 0 2px; }
.tp-tone-green-rich .tp-ticks li { color: var(--white);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3.5 10.5L7.8 14.8L16.5 5.2' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E"); }
/* border:0 because GeneratePress draws a box around every table —
   `table{border:1px solid rgba(0,0,0,.1); border-width:1px 0 0 1px}` — and
   this one is a list of rows, not a grid of cells. Our rules set
   border-collapse and the cell rules below, but never the table's own edge,
   so GP's keyline sat around the outside of the drive times. */
.tp-table { width: 100%; border: 0; border-collapse: collapse; margin-bottom: 1rem; }
/* border:0 first, then only the bottom rule back. GeneratePress gives every
   cell `border:1px solid rgba(0,0,0,.1)` with `border-width:1px 1px 0 0`, so
   setting border-bottom alone left GP's right-hand edge on each cell — a line
   down the middle of the table and another down its right side. Resetting the
   table's own border was not enough; the cells carry their own. */
.tp-table th, .tp-table td { text-align: left; padding: .875rem 0; border: 0; border-bottom: 1px solid var(--line); font-weight: var(--weight-regular); }
.tp-loc-distances .tp-table th,
.tp-loc-distances .tp-table td,
.tp-landing-distances .tp-table th,
.tp-landing-distances .tp-table td { border-bottom: 0; padding: .5rem 0; }
.tp-table th { font-weight: var(--weight-medium); }
.tp-table td { text-align: right; font-variant-numeric: tabular-nums; }
.tp-breadcrumb { font-size: .875rem; margin-bottom: 2rem; opacity: .85; }
.tp-breadcrumb a { color: inherit; }
.tp-breadcrumb span { margin: 0 .5rem; }
.tp-loc-hero__grid { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: start; }
.tp-loc-hero__intro { font-size: 18px; line-height: 1.62; color: rgba(255,255,255,.88); max-width: 560px; }
.tp-loc-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.tp-loc-facts__grid,
.tp-loc-getting-here__grid,
.tp-loc-video__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.tp-loc-video__player { position: relative; aspect-ratio: 16 / 9; background: var(--green-rich); border-radius: 10px; overflow: hidden; }
.tp-loc-video__player iframe { width: 100%; height: 100%; border: 0; display: block; }
.tp-loc-video__play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: #fff; font-size: 3rem; line-height: 1; }
.tp-loc-video__play:hover { background: rgba(0,0,0,.15); }
.tp-loc-facts__figures { display: flex; gap: 3rem; margin: 0; }
.tp-loc-facts__figures dt { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--grey-text); }
.tp-loc-facts__figures dd { margin: .25rem 0 0; font-family: var(--font-head); font-size: 2.5rem; font-weight: var(--weight-x); }
/* Site plans share one 4:3 box so the block is the same height on every lot.
   The three real plans are 0.87, 0.91 and 1.18 to 1, so left to themselves
   each page would set its own height and the pages would not line up beside
   each other.
   object-fit: CONTAIN, never cover — a plan is a drawing with edges, and
   cropping it to fill a box cuts off the end of the lot. Letterboxing on the
   paper colour is the honest answer; the alternative is a site plan missing
   its last row of bays. */
.tp-loc-facts__plan { aspect-ratio: 4 / 3; overflow: hidden; background: var(--white); }
.tp-loc-facts__plan img,
.tp-loc-facts__plan-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tp-loc-facts__plan figcaption { margin-top: .5rem; }

/* Gallery. One ratio for every tile so the rows line up whatever mix of
   landscape and portrait photographs the client uploads — the thing that
   makes an ad-hoc gallery look unfinished is tiles of different heights. */
/* "View all N sites" had no rule at all, so it inherited paragraph margins
   and sat left, tight under the grid as though it were part of the last row. */
.tp-home-locations__more { margin: 3rem 0 0; text-align: center; }

.tp-loc-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tp-loc-gallery__item { margin: 0; }
.tp-loc-gallery__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey-light); }
.tp-loc-gallery__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The plan is a drawing, so it is contained rather than cropped — the same
   rule as the plan in the block above, for the same reason. */
.tp-loc-gallery__item--plan .tp-loc-gallery__media { background: var(--white); }
.tp-loc-gallery__item--plan .tp-loc-gallery__media img { object-fit: contain; }
.tp-loc-gallery__item figcaption { margin-top: .5rem; font-size: 14px; color: var(--grey-text); }
.tp-card__media { display: block; flex: 0 0 auto; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grey-light); }
.tp-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tp-address { font-style: normal; line-height: 1.7; margin-bottom: 1rem; }
.tp-hours { margin: 1.5rem 0; }
.tp-hours div { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.tp-hours dt { font-weight: var(--weight-medium); }
.tp-hours dd { margin: 0; }
.tp-accordion__item { border-bottom: 1px solid var(--line); }
.tp-accordion__item summary { cursor: pointer; padding: 1.25rem 0; font-family: var(--font-head);
  font-weight: var(--weight-bold); font-size: 1.125rem; list-style: none; }
.tp-accordion__item summary::-webkit-details-marker { display: none; }
.tp-accordion__item summary::after { content: "+"; float: right; color: var(--green-brand); }
.tp-accordion__item[open] summary::after { content: "–"; }
.tp-accordion__item summary:focus-visible { outline: 2px solid var(--green-rich); outline-offset: 2px; }
.tp-accordion__body { padding-bottom: 1.25rem; max-width: 70ch; }
.tp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tp-card { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; color: var(--ink); }
.tp-card h2, .tp-card h3, .tp-card p { color: var(--ink); }
.tp-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tp-card__meta { display: flex; gap: .5rem; }
.tp-card__title { margin: 0; font-size: 1.25rem; }
.tp-card__title a { color: var(--ink); text-decoration: none; }
.tp-card__address, .tp-card__note { color: var(--grey-text); font-size: .9375rem; margin: 0; }
.tp-card__link { margin-top: auto; padding-top: .75rem; color: var(--green-rich); font-weight: var(--weight-semi); }
.tp-chips--small { margin: .5rem 0; }
.tp-map { position: relative; min-height: 320px; background: var(--grey-light); border: 1px solid var(--line); color: var(--ink); }
/* The branded still. No min-height: the image carries its own ratio, and a
   320px floor would letterbox it against the panel. No border either — the
   keyline existed to give the iframe an edge while it was an empty grey box
   waiting on consent. The still has its own edge. */
.tp-map--still { min-height: 0; border: 0; background: none; }
.tp-map--still a { display: block; }
.tp-map--still img { display: block; width: 100%; height: auto; }
.tp-map__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; height: 100%; min-height: 320px; padding: 2rem; text-align: center; }
.tp-map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.tp-form { background: var(--green-light); color: var(--ink); padding: 2rem; border: 1px solid var(--green-mid, #D4E0CF); }
.tp-form--white { background: rgb(255 255 255 / .75); border-color: var(--green-mid, #D4E0CF); }
.tp-form--grey { background: rgb(244 244 244 / .75); border-color: var(--green-mid, #D4E0CF); }
.tp-form--greenlight { background: rgb(233 239 230 / .75); border-color: var(--green-mid, #D4E0CF); }
.tp-form--greenrich { background: rgb(78 101 73 / .90);   border-color: var(--green-rich); }
.tp-form--greenrich,
.tp-form--greenrich .tp-form__title,
.tp-form--greenrich label,
.tp-form--greenrich legend,
.tp-form--greenrich p { color: var(--white); }
.tp-form--greenrich input,
.tp-form--greenrich select,
.tp-form--greenrich textarea { color: var(--ink); background: var(--white); border-color: var(--white); }
.tp-form h1, .tp-form h2, .tp-form h3,
.tp-form label, .tp-form legend, .tp-form p { color: var(--ink); }
.tp-form__title { font-size: 1.25rem; margin-bottom: 1.25rem; }
.tp-form label { display: block; margin-bottom: .75rem; font-size: .875rem; font-weight: var(--weight-medium); }
.tp-form input:not([type="submit"]):not([type="button"]),
.tp-form select,
.tp-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: .25rem;
  min-height: 46px; padding: 10px 14px;
  font-family: var(--font-body); font-size: 1rem;
  
  border: 1px solid var(--field-border, #4E6549); background: var(--white); color: var(--ink); }
.tp-form textarea { min-height: auto; }
.tp-form input:focus, .tp-form select:focus, .tp-form textarea:focus { outline: 2px solid var(--green-rich); outline-offset: -2px; }
.tp-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1.5rem; }
.tp-form--full { max-width: 760px; }
.tp-cta-band { text-align: center; }
.tp-cta-band__text { max-width: 52ch; margin: 0 auto 2rem; }
.tp-cta-band__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.tp-sticky-bar { display: none; }
.tp-footer { background: var(--ink); color: rgba(255,255,255,.86); padding: 64px 0 40px; }
.tp-footer a { color: var(--white); text-decoration: none; }
.tp-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 48px; }
.tp-footer__cols > div { display: flex; flex-direction: column; gap: 12px; }
.tp-footer h3 { font-family: var(--font-body); font-size: 11px; font-weight: var(--weight-semi);
  letter-spacing: .18em; text-transform: uppercase; color: var(--green-brand); margin: 0; }
.tp-footer p { margin: 0; font-size: 15px; line-height: 1.5; }
/* The company links under Contact. The column is already a flex stack with
   its own gap, but the nav is one child of it, so its links need their own. */
.tp-footer__more { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.tp-footer__tagline { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.64); }
.tp-footer__legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.52); }
.tp-footer__legal p { font-size: 13px; color: inherit; }
.tp-footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tp-footer__legal-links a { color: rgba(255,255,255,.82); text-decoration: underline; }
.tp-footer__legal-links a:hover,
.tp-footer__legal-links a:focus-visible { color: #fff; }
.tp-hero__grid { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: start; }
.tp-hero__grid--solo { grid-template-columns: 1fr; max-width: 60ch; }
.tp-hero__intro { font-size: 18px; line-height: 1.62; color: rgba(255,255,255,.88); max-width: 560px; }
.tp-hero__ctas { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.tp-rich-text__title { max-width: 24ch; }
.tp-rich-text__cols--two { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.tp-prose { max-width: 720px; }
.tp-rich-text__cols--two .tp-prose { max-width: none; }
.tp-prose h3 { margin-top: 2rem; }
.tp-prose ul { list-style: none; padding: 0; }
.tp-prose li { position: relative; padding: .375rem 0 .375rem 32px; }
.tp-prose li::before { content: ""; position: absolute; left: 0; top: 7px; width: 20px; height: 20px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3.5 10.5L7.8 14.8L16.5 5.2' stroke='%234E6549' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat; }
.tp-text-media__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

/* Video facade: a poster and a play button, with the iframe swapped in on
   click. Fixed 16:9 so the block does not jump when the embed replaces the
   poster — a layout shift at the moment of clicking play is how you end up
   clicking something else. */
.tp-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-rich); }
.tp-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tp-video__play { position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: rgba(7, 7, 7, .25); cursor: pointer;
  transition: background .15s ease; }
.tp-video__play:hover,
.tp-video__play:focus-visible { background: rgba(7, 7, 7, .40); }
/* The triangle is drawn with borders rather than a glyph: ▶ renders as an
   emoji on some platforms and as a different size on every one. */
.tp-video__play span { width: 72px; height: 72px; border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center; }
.tp-video__play span::after { content: ""; margin-left: 5px;
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--green-rich); }

/* Map + text. The map column is the wider of the two: it carries the pins and
   the place names, and below about 520px those stop being readable. */
.tp-map-section__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
/* Source order is text then map, so "map left" is the default and needs no
   reordering; "map right" moves the map after the copy. Order, not
   direction, so the DOM order a screen reader follows stays the same. */
.tp-map-section__map { order: -1; }
.tp-map-section--map-right .tp-map-section__map { order: 1; }
.tp-map-section--single .tp-map-section__grid { grid-template-columns: 1fr; }
.tp-map-section__map img,
.tp-map-section__map svg { display: block; width: 100%; height: auto; }
.tp-text-media--image-left .tp-text-media__content { order: 2; }
.tp-text-media__media { aspect-ratio: 4 / 3; overflow: hidden; }
.tp-text-media__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A video in this slot is 16:9, not the block's 4:3. Video is shot 16:9 and
   nothing else; forcing it into 4:3 either letterboxes it inside the poster
   or crops the frame, and the embed that replaces the poster on click is 16:9
   regardless — so the 4:3 version would resize the moment anyone pressed
   play. Written as two classes to beat the rule above on specificity, since
   the element carries both. */
.tp-text-media__media.tp-video { aspect-ratio: 16 / 9; }
.tp-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 2.5rem; }
.tp-filter { display: inline-block; padding: 10px 18px; min-height: 44px; line-height: 24px;
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  text-decoration: none; font-size: .875rem; font-weight: var(--weight-medium); }
.tp-filter:hover { border-color: var(--ink); }
.tp-filter.is-active { background: var(--green-rich); border-color: var(--green-rich); color: var(--white); }
.tp-cards--list { grid-template-columns: 1fr; }
.tp-cards--list .tp-card { flex-direction: row; }
.tp-cards--list .tp-card__media { flex: 0 0 240px; }
.tp-stat-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 0; }
.tp-stat-band__grid dd { margin: 0; font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--weight-x); letter-spacing: var(--track-head); line-height: 1; }
.tp-stat-band__grid dt { margin-top: 10px; font-size: 13px; color: var(--grey-text); }
.tp-home-locations__town { margin: 2.5rem 0 1rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--grey-text); }
.tp-home-locations .tp-cards + .tp-cards { margin-top: 1.5rem; }
.tp-cards--two { grid-template-columns: repeat(2, 1fr); }
.tp-card--next { border-style: dashed; background: transparent; }
.tp-home-locations .tp-map { margin: 2rem 0; }
.tp-pagination { margin-top: 2.5rem; }
.tp-pagination ul { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.tp-pagination a, .tp-pagination span { display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; padding: 0 .75rem;
  background: var(--white); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tp-pagination .current { background: var(--green-rich); border-color: var(--green-rich); color: var(--white); }
.tp-article .tp-prose { margin: 0 auto; }
.tp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tp-form__msg { padding: 1rem; margin-bottom: 1.5rem; border-left: 4px solid; font-size: .9375rem; }
.tp-form__msg--ok { background: var(--green-light); border-color: var(--green-rich); color: var(--ink); }
.tp-form__msg--error { background: #FDECEC; border-color: #B3261E; color: #5F1A16; }
/* align-self because the footer column is a COLUMN flex container, so a
   flex item stretches to the column's full width by default. That beat
   width:auto and pinned the logo to the column while the height stayed
   at 34px, stretching it wider the wider the screen got — 176px at
   1024, and worse above that. */
.tp-footer__logo { height: 34px; width: auto; align-self: flex-start; display: block;
  /* object-fit for the narrow end: on a phone the column is narrower than
     the logo's natural 151px, and GeneratePress's img{max-width:100%}
     clamps the width while the height stays at 34px. contain scales it
     down instead of squashing it. */
  max-width: 100%; object-fit: contain; object-position: left; }
.tp-hero--photo, .tp-loc-hero--photo { background-image:
    linear-gradient(90deg, rgba(43,58,40,.95) 0%, rgba(58,77,54,.9) 46%, rgba(78,101,73,.72) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center 58%; }
.tp-loc-facts__grid--solo { grid-template-columns: 1fr; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.tp-home-enquire__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 56px; align-items: start; }
.tp-map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.tp-prose blockquote.tp-pullquote,
blockquote.tp-pullquote { margin: 2.5rem 0; padding: 0 0 0 28px;
  border-left: 4px solid var(--green-rich);
  font-family: var(--font-head); font-size: 24px; font-weight: var(--weight-bold);
  line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.tp-pullquote p { font-size: inherit; line-height: inherit; color: inherit; margin: 0 0 .5rem; }
.tp-pullquote p:last-child { margin-bottom: 0; }
.tp-pullquote cite { display: block; margin-top: .75rem; font-family: var(--font-body); font-size: 15px; font-weight: var(--weight-regular); font-style: normal; color: var(--grey-text); }
/* ── Preferred vendors ─────────────────────────────────────────
   A fixed 3:2 tile per logo, with the logo CONTAINED inside it. The tile
   is what keeps the row even; contain is what keeps every logo its own
   shape whatever file the vendor sent. max-width/max-height rather than
   width/height so a small logo is never blown up past its real size. */
.tp-vendors__intro { max-width: 720px; }
.tp-vendors__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.5rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.tp-vendor { display: flex; flex-direction: column; gap: .75rem; text-decoration: none; color: inherit; }
/* A DEFINITE height, not aspect-ratio. With aspect-ratio the height is only
   a preference, so "max-height: 100%" on the logo has nothing firm to resolve
   against and a tall logo pushes its tile taller instead of being contained —
   six vendors, six different tile heights. A fixed height makes the percentage
   real and every tile match. 160px with 20px padding leaves a 198x120 well,
   which is why the field asks for 3:2. */
.tp-vendor__media { height: 160px; display: grid; place-items: center; padding: 20px;
  /* minmax(0,1fr) rather than the implicit auto track. An auto track is sized
     BY its content, so "max-height: 100%" on the logo has nothing definite to
     resolve against — the percentage goes circular, is dropped, and a tall
     logo renders at its natural height straight out through the tile. A
     definite track breaks the cycle and the percentage starts meaning
     something. The fixed height above is not enough on its own. */
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  background: var(--white); border: 1px solid var(--line); }
/* tp_img() wraps the image in a div and puts the class on the WRAPPER, the
   way every other media block here does — .tp-card__media img and friends.
   Styling the wrapper alone left the img untouched inside it, rendering at
   its natural size and straight out through the tile while the wrapper sat
   neatly contained. The box is the wrapper; the fit belongs on the img. */
.tp-vendor__logo { display: block; width: 100%; height: 100%; }
.tp-vendor__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tp-vendor__fallback { font-family: var(--font-head); font-weight: var(--weight-bold);
  font-size: 18px; color: var(--green-rich); text-align: center; }
.tp-vendor__name { font-weight: var(--weight-medium); font-size: 15px; }
a.tp-vendor:hover .tp-vendor__media,
a.tp-vendor:focus-visible .tp-vendor__media { border-color: var(--green-rich); }
a.tp-vendor:hover .tp-vendor__name { text-decoration: underline; }

.tp-news-head__intro { max-width: 720px; }
.tp-news-head__intro p { color: var(--grey-text); font-size: 18px; }
.tp-news-head .tp-filters { margin-bottom: 0; }

/* On green, two of the head's parts stop working and the tone class cannot
   fix them on its own. The intro keeps its grey, which lands at 1.3:1 on
   green-rich and is unreadable; and the active filter chip is filled with
   green-rich, so on a green-rich band it dissolves into the background. The
   chip inverts instead — a white pill is the one treatment that reads on
   both tones. Headings, eyebrow and breadcrumb need nothing: the tone class
   already turns those white. */
.tp-news-head.tp-tone-green-rich .tp-news-head__intro p { color: rgba(255,255,255,.88); }
/* The idle chips too. They carry their own white pill, but ".tp-tone-green-rich a"
   is (0,1,1) and outranks ".tp-filter" at (0,1,0), so the label turned white on
   a white pill and vanished. The active chip survived that on its own, being
   (0,2,0), which is why checking only the active one missed this. */
.tp-news-head.tp-tone-green-rich .tp-filter { color: var(--ink); }
.tp-news-head.tp-tone-green-rich .tp-filter.is-active {
  background: var(--white); border-color: var(--white); color: var(--ink); }
.tp-news-featured { padding-top: 16px; }
.tp-article-head__title { max-width: 20ch; }
.tp-article-head__meta { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--grey-text); font-size: 15px; margin: 0; }
.tp-article-media { padding-top: 0; padding-bottom: 0; }
.tp-article__figure { margin: 0; }
.tp-article__figure img { display: block; width: 100%; height: auto; }
.tp-article__figure figcaption { margin-top: 12px; font-size: 14px; color: var(--grey-text); }
.tp-article { padding-top: 40px; }
.tp-card__meta .tp-chip { text-decoration: none; }
.tp-district-text__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: start; }
.tp-district-text__grid--solo { grid-template-columns: 1fr; }
.tp-tone-white .tp-chip,
.tp-tone-grey .tp-chip,
.tp-tone-green-light .tp-chip,
.tp-card .tp-chip { background: var(--green-light);
  border: 1px solid #D4E0CF;
  color: var(--green-rich);
  font-size: 12.5px; font-weight: var(--weight-semi); letter-spacing: .04em;
  padding: 7px 13px; }
.tp-card__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tp-card__date { font-size: 13px; color: var(--grey-text); margin: 0; }
.tp-card__link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.tp-arrow { width: 16px; height: 16px; flex-shrink: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8h10.5M9 4.2L12.8 8 9 11.8' stroke='%234E6549' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center; }
.tp-article .tp-prose > p:first-child { font-size: 18px; font-weight: var(--weight-medium); line-height: 1.55; color: var(--ink);
  margin-bottom: 26px; }
body.error404 .site-content,
body.error404 #content,
body.error404 #primary,
body.error404 .content-area,
body.error404 .inside-article,
body.error404 #main { max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important; }
body.error404 .widget-area,
body.error404 #secondary { display: none !important; }
.tp-form .wpcf7-form-control-wrap { display: block; }
.tp-form .wpcf7-form p { margin: 0; font-size: inherit; }
.tp-form input[type="text"],
.tp-form input[type="email"],
.tp-form input[type="tel"],
.tp-form select,
.tp-form textarea { width: 100%; }
.tp-form .wpcf7-submit { margin-top: 1rem; }
.tp-form .wpcf7-not-valid { border-color: #B3261E; }
.tp-form .wpcf7-not-valid-tip { display: block; margin-top: 6px;
  font-size: 13px; font-weight: var(--weight-medium); color: #B3261E; }
.tp-form .wpcf7-response-output { margin: 1.5rem 0 0; padding: 1rem;
  border: 0; border-left: 4px solid var(--green-rich);
  background: var(--green-light); color: var(--ink); font-size: .9375rem; }
.tp-form .wpcf7-form.invalid .wpcf7-response-output,
.tp-form .wpcf7-form.failed .wpcf7-response-output,
.tp-form .wpcf7-form.aborted .wpcf7-response-output { border-left-color: #B3261E; background: #FDECEC; color: #5F1A16; }
.tp-form .wpcf7-spinner { margin: 0 0 0 12px; }
.tp-form input[type="hidden"] { display: none; }
.tp-form__grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 1.5rem; }

/* A field that needs the whole row. "Vehicles or space needed" is the one
   answer that is never one word — trucks, square footage and stall counts all
   at once — and a half-width box asked for it in a space that showed about
   four. Spanning both columns is the fix; the rest of the grid is unchanged. */
.tp-form__grid > .tp-form__wide { grid-column: 1 / -1; }
/* Contact details beside an enquiry form. The old .tp-contact__grid is gone
   with the fixed contact template — the enquiry block owns the columns now, so
   the only thing left to say is that the details sit clear of the copy above
   them. Headings, paragraphs and links come from the type scale and the tone,
   exactly as they did in the old template. */
.tp-contact-details { margin-top: 1.5rem; }

/* Phone above email, as contact detail rather than prose: tight leading so the
   two read as one block, and clear of whatever sits above. */
.tp-contact-pair,
.tp-form-section__contact { margin-top: 1.25rem; line-height: 1.6; }
.tp-form__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Enquiry block proportions. Named, so a form cannot end up at a width the
   design does not have. */
.tp-form-section__grid { display: grid; gap: 3rem; align-items: start; }
.tp-form-section__grid--third     { grid-template-columns: 2fr 1fr; }
.tp-form-section__grid--half      { grid-template-columns: 1fr 1fr; }
.tp-form-section__grid--twothirds { grid-template-columns: 1fr 2fr; }
/* The form fills whichever column it is given — the 760px reading measure is
   for the form running on its own, and would leave a gap inside a column. */
.tp-form-section__grid .tp-form--full { max-width: none; }

.tp-form-section--narrow .tp-form { max-width: 760px; }
.tp-form-section .tp-form--full { max-width: none; }
.tp-form-section--narrow .tp-form--full { max-width: 760px; }
.tp-sitemap { margin: 0; }
.tp-sitemap__canvas { position: relative; border: 1px solid var(--line); background: var(--white); }
.tp-sitemap__canvas img { display: block; width: 100%; height: auto; }
.tp-sitemap__pin { position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-semi);
  white-space: nowrap; }
.tp-sitemap__dot { width: 14px; height: 14px; flex-shrink: 0;
  background: var(--green-rich);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white); }
.tp-sitemap__label { background: rgba(255,255,255,.88);
  padding: 2px 6px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.88); }
.tp-sitemap__pin:hover .tp-sitemap__dot,
.tp-sitemap__pin:focus-visible .tp-sitemap__dot { background: var(--ink); }
.tp-sitemap__pin:focus-visible { outline: 2px solid var(--green-rich); outline-offset: 4px; }


/* 6800 and 7000 Lougheed sit side by side, so their labels collided.
   Stack them instead: 6800 above its dot, 7000 below. Labels are
   hidden at mobile widths further down, so this is desktop only. */
.tp-sitemap__pin[href*="6800-lougheed"],
.tp-sitemap__pin[href*="7000-lougheed"] { align-items: center; }
.tp-sitemap__pin[href*="6800-lougheed"] { flex-direction: column-reverse; margin-top: -20px; }
.tp-sitemap__pin[href*="6800-lougheed"] .tp-sitemap__label { margin: 0 0 4px 0; }
.tp-sitemap__pin[href*="7000-lougheed"] { flex-direction: column; margin-top: 20px; }
.tp-sitemap__pin[href*="7000-lougheed"] .tp-sitemap__label { margin: 4px 0 0 0; }.tp-landing-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: start; }
.tp-landing-hero__title { margin-top: 0; }
.tp-landing-hero__intro { font-size: 1.125rem; max-width: 48ch; }
.tp-landing-hero__points { margin: 1.5rem 0; }
.tp-landing-hero__figures { display: flex; gap: 2.5rem; margin: 1.75rem 0 0; }
.tp-landing-hero__figures dt { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.tp-landing-hero__figures dd { margin: .15rem 0 0; font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.tp-landing-hero__call { margin: 1.75rem 0 0; }
.tp-landing-facts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.tp-landing-hero { padding-top: 3.5rem; }

/* ── Breakpoints ─────────────────────────────────────────── */

@media (max-width: 1000px) {
  .tp-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .tp-loc-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .tp-loc-hero__grid,
  .tp-loc-facts__grid,
  .tp-loc-getting-here__grid,
  .tp-loc-video__grid { grid-template-columns: 1fr; }

  /* The enquiry block's side-by-side widths never had a stacking rule, so copy
     and form stayed in two columns all the way down — on every page using the
     block, not only contact. The modifiers are named individually because they
     are what set the columns: a rule on .tp-form-section__grid alone is one
     class lighter and loses to them at any width. */
  .tp-form-section__grid--third,
  .tp-form-section__grid--half,
  .tp-form-section__grid--twothirds { grid-template-columns: 1fr; gap: 2rem; }

  /* The hero enquiry form stacks below the hero copy on narrow screens; it
     used to be display:none. Hiding it left the sticky bar as the only way to
     enquire from the top of the page — and a hidden form is also removed from
     the accessibility tree and from the tab order, so it was not merely
     invisible, it was gone. The grid above is already single-column here, so
     stacking is what it does by default once it is allowed to render. */
  .tp-loc-hero__card { margin-top: 1.5rem; }
  .tp-sticky-bar { display: flex; gap: .75rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    padding: .75rem var(--pad-x); background: var(--white); border-top: 1px solid var(--line); }
  .tp-sticky-bar .tp-btn { flex: 1; }
  body { padding-bottom: 76px; }
  .tp-hero__grid, .tp-rich-text__cols--two, .tp-text-media__grid,
  .tp-map-section__grid { grid-template-columns: 1fr; }
  /* Stacked, the map goes under the copy that introduces it. */
  .tp-map-section__map, .tp-map-section--map-right .tp-map-section__map { order: 0; }
  .tp-hero__card { margin-top: 1.5rem; }
  .tp-text-media--image-left .tp-text-media__content { order: 0; }
  .tp-cards--list .tp-card { flex-direction: column; }
  .tp-cards--list .tp-card__media { flex: none; }
  .tp-home-enquire__grid { grid-template-columns: 1fr; }
  .tp-district-text__grid { grid-template-columns: 1fr; }
  .tp-cta-band { text-align: left; }
  .tp-cta-band__text { margin-left: 0; margin-right: 0; }
  .tp-cta-band__ctas { justify-content: flex-start; flex-direction: column; align-items: stretch; }
  .tp-cta-band__ctas .tp-btn { width: 100%; }
  .tp-landing-hero__grid,
  .tp-landing-facts__grid { grid-template-columns: 1fr; gap: 2rem; }
  .tp-landing-hero__figures { gap: 2rem; }
}

/* The footer drops to two columns at 960, not at the page's 768.
   Four columns below that squeezes each one to ~120px: the logo column
   falls under the logo's natural 151px so it scales down and then jumps
   back at the breakpoint, the tagline wraps to five lines, and every
   location name breaks across two. 960 keeps the narrowest four-column
   case at 161px, which clears the logo and reads properly. */
@media (max-width: 960px) {
  .tp-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* And one column on a phone. Two columns there left ~97px each: the logo
   shrank to 97px wide and the tagline ran to seven lines. Stacking is not
   just more legible, it is SHORTER — 760px against 845px at 320px wide,
   because the wrapping cost more height than the stack does. */
@media (max-width: 480px) {
  .tp-footer__cols { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  :root { --pad-x:    20px;
    --pad-y:    52px;
    --header-h: 72px; }
  /* Mobile h1/h2/h3 sizes removed — GP emits exactly these three values from
     Typography → Mobile font size, at this same 768px breakpoint. */
  .tp-form__grid { grid-template-columns: 1fr; }
  .tp-loc-facts__figures { gap: 2rem; }
  .tp-stat-band__grid { grid-template-columns: 1fr 1fr; }
  .tp-hero--photo, .tp-loc-hero--photo { background-image:
      linear-gradient(180deg, rgba(43,58,40,.94) 0%, rgba(58,77,54,.9) 55%, rgba(78,101,73,.8) 100%),
      var(--hero-image);
    background-position: center; }
  blockquote.tp-pullquote { font-size: 20px; padding-left: 20px; }
}

@media (max-width: 640px) {
  .tp-cards,
  .tp-cards--two { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .tp-sitemap__label { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
}