/* =====================================================================
   TaDaA PROJECTS - site.css
   ---------------------------------------------------------------------
   ADDED IN 2.0.0 for the full site (shop, services, portfolio, journal,
   contact and the trust pages). It loads after sections.css.

   Same rules as the rest of the theme: square corners, 1px hairlines, no
   shadows, big light headings, tiny wide uppercase labels, and colour only
   from the Customizer variables. Nothing here changes in dark mode - the
   site looks the same whatever the visitor's device is set to.

   Contents
     1.  Home hero: the longer headline
     2.  Inner page heading (.page-hero) and the identity sentence
     3.  Photo placeholders (.ph) - grey tile, line drawing, photo brief
     4.  Facts lists, address block, hours
     5.  Category strip (home) and filter links (shop, portfolio)
     6.  Service summary rows, "why" points, area band, FAQ
     7.  Services page sections and jump links
     8.  Product page
     9.  Portfolio and journal cards
     10. Quote form, contact buttons, quote band
     11. Contact page
     12. Trust pages (rich text extras)
     13. Header call buttons and the mobile contact bar
     14. Footer: four columns
     15. WooCommerce pages (cart, checkout, account, notices)
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. HOME HERO - the headline states what we make and where, so it is
      longer than the approved "Design you can hold." and is allowed to
      wrap. Same weight, colour and grey second half.
   ------------------------------------------------------------------ */
.hero__heading--long {
  white-space: normal;
  text-wrap: balance;
  font-size: calc(clamp(40px, 5.6vw, 84px) * var(--heading-scale));
  line-height: 1.02;
}
.hero__heading--long em { display: block; }
.hero__description { max-width: 470px; }


/* ---------------------------------------------------------------------
   2. INNER PAGE HEADING
   ------------------------------------------------------------------ */
.page-hero {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(36px, 5vw, 64px);
  border-bottom: var(--border);
}
.page-hero .breadcrumbs { margin-bottom: clamp(30px, 5vw, 64px); }
.page-hero__grid {
  display: grid;
  gap: 28px 64px;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 990px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}
.page-hero__title {
  margin-top: 22px;
  font-size: calc(clamp(40px, 6.4vw, 92px) * var(--heading-scale));
  line-height: 1;
}
.page-hero__aside { display: flex; flex-direction: column; gap: 16px; max-width: 48ch; }
.page-hero__lead {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--color-text-soft);
}

/* The plain identity sentence at the top of every major page. */
.identity {
  margin: 0;
  padding-top: 16px;
  border-top: var(--border);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-soft);
}
.panel-ink .identity { border-color: var(--line-on-ink); }

.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.breadcrumbs__list li { display: inline-flex; align-items: center; gap: 10px; }

/* A section heading row used inside pages */
.section-head--plain { border-bottom: 0; margin-bottom: 28px; padding-bottom: 0; }


/* ---------------------------------------------------------------------
   3. PHOTO PLACEHOLDERS
   Grey tile at the right shape, the line drawing, and the photo brief
   written underneath so the photographer knows exactly what to shoot.
   ------------------------------------------------------------------ */
.ph {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 5);
  overflow: hidden;
  background-color: var(--color-bg-alt);
  border: var(--border);
  border-radius: var(--radius);
}
.ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph__tile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px;
  color: var(--color-text-muted);
}
.ph__drawing { width: clamp(44px, 18%, 76px); height: auto; opacity: 0.75; }
.ph__brief,
.product-card__placeholder .ph__brief {
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  color: var(--color-text-soft); /* readable (WCAG AA) on the grey tile */
}
.ph__brief-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-soft);
}
/* In product cards the brief sits under the drawing, kept short. */
.product-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 56px 20px 20px;
  color: var(--color-text-muted);
}
.product-card__placeholder .ph__drawing { width: 64px; }
.product-card__placeholder .ph__brief {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
}
.ph-row { display: grid; gap: var(--grid-gap, 20px); grid-template-columns: repeat(var(--ph-cols, 3), minmax(0, 1fr)); }
@media (max-width: 699px) { .ph-row { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------------
   4. FACTS, ADDRESS, HOURS
   Short label + value rows on hairlines - easy to read, easy to quote.
   ------------------------------------------------------------------ */
.facts { margin: 0; border-top: var(--border); }
.facts > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
  gap: 6px 24px;
  padding-block: 14px;
  border-bottom: var(--border);
}
.facts dt {
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 3px;
}
.facts dd { margin: 0; font-size: 14.5px; line-height: 1.6; }
.facts dd ul { padding: 0; }
.facts dd li + li { margin-top: 4px; }
@media (max-width: 599px) { .facts > div { grid-template-columns: 1fr; } }
.panel-ink .facts,
.panel-ink .facts > div { border-color: var(--line-on-ink); }
.panel-ink .facts dt { color: var(--ink-text-faint); }

.nap { display: flex; flex-direction: column; gap: 6px; font-style: normal; line-height: 1.6; }
.nap__name { font-weight: 400; font-family: var(--font-heading-stack); font-size: 20px; }
.nap a { width: fit-content; border-bottom: var(--border-width) solid var(--color-border); }
.nap a:hover { border-bottom-color: var(--color-accent); }
.panel-ink .nap a,
.footer .nap a { border-bottom-color: var(--line-on-ink); }


/* ---------------------------------------------------------------------
   5. CATEGORY STRIP AND FILTER LINKS
   ------------------------------------------------------------------ */
.cat-strip {
  display: grid;
  gap: var(--border-width);
  background-color: var(--color-border);
  border: var(--border);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
@media (max-width: 989px) { .cat-strip { --cols: 2 !important; } }
@media (max-width: 479px) { .cat-strip { --cols: 1 !important; } }
.cat-tile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(18px, 2vw, 26px);
  background-color: var(--color-bg);
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.cat-tile .ph { border-color: var(--color-border); }
.cat-tile:hover { background-color: var(--color-ink); color: var(--color-ink-text); }
.cat-tile:hover .cat-tile__count,
.cat-tile:hover .cat-tile__text { color: var(--ink-text-soft); }
.cat-tile__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cat-tile__title { font-size: calc(clamp(20px, 1.8vw, 25px) * var(--heading-scale)); }
.cat-tile__count {
  flex: none;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cat-tile__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text-soft); }
.cat-tile__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}
.cat-tile:hover .cat-tile__cta .icon { transform: translateX(5px); }
.cat-tile__cta .icon { transition: transform var(--speed) var(--ease); }

/* Filter LINKS (work without JavaScript; the page reloads with the choice) */
.filter-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.filter-links + .filter-links { margin-bottom: 40px; }
.filter-links__label {
  display: inline-flex;
  align-items: center;
  min-width: 92px;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.filter-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  border: var(--border);
  border-radius: var(--radius);
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.filter-links a:hover { border-color: var(--color-text); color: var(--color-text); }
.filter-links a[aria-current='true'] {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.filter-links .filter-button__count { opacity: 0.6; }

.grid-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 40px; }

.empty-state--boxed {
  padding: clamp(40px, 6vw, 72px) 24px;
  border: var(--border);
  background-color: var(--color-bg-alt);
}
.empty-state--boxed p { max-width: 52ch; margin-inline: auto; color: var(--color-text-soft); }

.price-placeholder {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}


/* ---------------------------------------------------------------------
   6. HOME BANDS
   ------------------------------------------------------------------ */
/* The service rows on the home page are links to the services page. */
.service-item--link { cursor: pointer; }

/* Why TaDaA: four ruled cells */
.why-grid {
  display: grid;
  gap: var(--border-width);
  background-color: var(--color-border);
  border: var(--border);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 989px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .why-grid { grid-template-columns: 1fr; } }
.why-cell { padding: clamp(24px, 2.6vw, 38px); background-color: var(--color-bg); display: flex; flex-direction: column; gap: 14px; }
.why-cell__num { font-size: var(--label-size); letter-spacing: var(--label-spacing); color: var(--color-text-muted); }
.why-cell__title { font-size: calc(clamp(20px, 1.8vw, 24px) * var(--heading-scale)); }
.why-cell p { margin: 0; font-size: 14.5px; color: var(--color-text-soft); line-height: 1.65; }

/* Service-area band */
.area-band { border-top: var(--border); border-bottom: var(--border); }
.area-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
  padding-block: clamp(26px, 3vw, 40px);
}
.area-band__label { margin: 0; }
.area-band__list { display: flex; flex-wrap: wrap; gap: 0; }
.area-band__list li { display: flex; align-items: center; }
.area-band__list li + li::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-inline: 18px;
  border-radius: 50%;
  background-color: var(--color-accent);
}
.area-band__list a {
  font-family: var(--font-heading-stack);
  font-size: calc(clamp(19px, 1.9vw, 26px) * var(--heading-scale));
  border-bottom: var(--border-width) solid transparent;
}
.area-band__list a:hover { border-bottom-color: var(--color-accent); }

/* FAQ: question headings with answers underneath, on hairlines */
.faq-list { border-top: var(--border); }
.faq-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 48px;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-bottom: var(--border);
}
@media (min-width: 900px) {
  .faq-item { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.faq-item__q { font-size: calc(clamp(19px, 1.7vw, 23px) * var(--heading-scale)); line-height: 1.3; }
.faq-item__a { margin: 0; font-size: 15px; line-height: 1.7; color: var(--color-text-soft); max-width: 62ch; }
.faq-group + .faq-group { margin-top: clamp(40px, 6vw, 72px); }


/* ---------------------------------------------------------------------
   7. SERVICES PAGE
   ------------------------------------------------------------------ */
.jump-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  background-color: var(--color-bg);
  border-bottom: var(--border);
}
.jump-nav__list {
  display: flex;
  gap: 6px 26px;
  overflow-x: auto;
  padding-block: 16px;
  scrollbar-width: none;
}
.jump-nav__list::-webkit-scrollbar { display: none; }
.jump-nav__list a {
  white-space: nowrap;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.jump-nav__list a:hover { color: var(--color-accent); }
/* Anchored sections land below the sticky header and the jump links. */
.service-section { scroll-margin-top: calc(var(--header-height) + 70px); }
.service-section + .service-section { border-top: var(--border); }
.service-section__grid {
  display: grid;
  gap: 36px 72px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 990px) {
  .service-section__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.service-section__num { font-size: var(--label-size); letter-spacing: var(--label-spacing); color: var(--color-text-muted); }
.service-section__title { margin-top: 18px; }
.service-section__q { margin-top: 18px; font-size: calc(clamp(18px, 1.5vw, 21px) * var(--heading-scale)); color: var(--color-text-soft); }
.service-section__body { margin-top: 26px; font-size: 15.5px; line-height: 1.8; color: var(--color-text-soft); max-width: 64ch; }
.service-section__aside { display: flex; flex-direction: column; gap: 26px; }
.steps-list { counter-reset: s; border-top: var(--border); }
.steps-list li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding-block: 10px;
  border-bottom: var(--border);
  font-size: 14.5px;
}
.steps-list li::before {
  content: counter(s, decimal-leading-zero);
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  color: var(--color-text-muted);
  padding-top: 3px;
}
.service-section .ph-row { margin-top: 40px; }
.service-section__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Process page: what you do / what we do */
.process-step { scroll-margin-top: calc(var(--header-height) + 20px); }
.process-step + .process-step { border-top: var(--border); }
.process-step__grid {
  display: grid;
  gap: 28px 64px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .process-step__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.process-step__title { margin-top: 16px; }
.duo { display: grid; gap: var(--border-width); background: var(--color-border); border: var(--border); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 699px) { .duo { grid-template-columns: 1fr; } }
.duo > div { background: var(--color-bg); padding: clamp(20px, 2.4vw, 32px); }
.duo h3 { font-size: calc(17px * var(--heading-scale)); margin-bottom: 10px; }
.duo p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--color-text-soft); }


/* ---------------------------------------------------------------------
   8. PRODUCT PAGE
   ------------------------------------------------------------------ */
.product-page { padding-top: clamp(24px, 3vw, 40px); }
.product-page .breadcrumbs { margin-bottom: clamp(24px, 3vw, 40px); }
.product__title { font-size: calc(clamp(34px, 4.4vw, 60px) * var(--heading-scale)); line-height: 1.04; }
.product__summary { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 990px) {
  .product__summary { position: sticky; top: calc(var(--header-height) + 24px); }
}
.product__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.product__short { font-size: 15.5px; line-height: 1.75; color: var(--color-text-soft); }
.product__short p:last-child { margin-bottom: 0; }
.product__gallery-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product__gallery-grid > :first-child { grid-column: 1 / -1; }
.product__buy form.cart { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; align-items: stretch; }
.product__buy form.cart .quantity { display: flex; }
.product__buy form.cart .qty {
  width: 76px;
  min-height: 52px;
  padding: 0 10px;
  border: var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: center;
}
.product__buy .single_add_to_cart_button { flex: 1; }
.product__note {
  padding: 16px 18px;
  border: var(--border);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-text-soft);
}
.product__note strong { font-weight: 400; color: var(--color-text); }
.product__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 18px 0;
  border-top: var(--border);
  border-bottom: var(--border);
}
.product__alt p { margin: 0; font-size: 15px; }
.product__details { margin-top: clamp(50px, 7vw, 96px); }
.product__details-grid { display: grid; gap: 40px 72px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 990px) { .product__details-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.notice-box {
  padding: 18px 20px;
  border: var(--border);
  border-left: 2px solid var(--color-accent);
  background: var(--color-bg-alt);
  font-size: 14.5px;
  line-height: 1.65;
}
.notice-box p:last-child { margin: 0; }


/* ---------------------------------------------------------------------
   9. PORTFOLIO AND JOURNAL CARDS
   ------------------------------------------------------------------ */
.card { display: flex; flex-direction: column; gap: 16px; }
.card__media { display: block; }
.card:hover .ph { border-color: var(--color-text); }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.card__title { font-size: calc(clamp(20px, 1.8vw, 25px) * var(--heading-scale)); line-height: 1.25; }
.card__title a:hover { color: var(--color-accent); }
.card__text { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--color-text-soft); }
.card__status { color: var(--color-accent); }

.project-meta { margin-top: 10px; }
.article-head { max-width: 860px; }
.article-head .breadcrumbs { margin-bottom: 30px; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.article-title { margin-top: 20px; font-size: calc(clamp(36px, 5vw, 70px) * var(--heading-scale)); }
.article-body { max-width: 720px; margin-inline: auto; font-size: 16.5px; line-height: 1.8; }
.article-foot {
  max-width: 720px;
  margin: 50px auto 0;
  padding-top: 24px;
  border-top: var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.share__label { font-size: var(--label-size); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--color-text-muted); }
.share a { font-size: 14px; border-bottom: var(--border); }
.share a:hover { border-bottom-color: var(--color-accent); }
.draft-note {
  max-width: 720px;
  margin: 0 auto 30px;
}


/* ---------------------------------------------------------------------
   10. QUOTE FORM, CONTACT BUTTONS, QUOTE BAND
   ------------------------------------------------------------------ */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.quote-form { width: 100%; text-align: start; }
.form-grid {
  display: grid;
  gap: 18px 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 899px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .form-grid { grid-template-columns: 1fr; } }
.form-row { margin: 0; display: flex; flex-direction: column; }
.form-row--wide { grid-column: 1 / -1; }
.field--select {
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field--select option { color: #111; background: #fff; }
.field--file { padding: 14px 16px; font-size: 13px; }
.form-help { display: block; margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--color-text-muted); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.form-note { font-size: 13.5px; color: var(--color-text-muted); }
.form-note a { border-bottom: var(--border); }
.form-message {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: var(--border);
  border-left: 2px solid var(--color-accent);
  font-size: 14.5px;
}
.form-message--error { border-left-color: #b3261e; }

/* On a dark panel */
.quote-form--dark .field { border-color: var(--line-on-ink); color: var(--color-ink-text); }
.quote-form--dark .field:focus { border-color: var(--color-ink-text); }
.quote-form--dark .field-label,
.quote-form--dark .form-help,
.quote-form--dark .form-note { color: var(--ink-text-faint); }
.quote-form--dark .form-note a { border-color: var(--line-on-ink); color: var(--ink-text-soft); }
.quote-form--dark .form-message { border-color: var(--line-on-ink); color: var(--color-ink-text); }
.quote-form--dark .field--file::file-selector-button {
  margin-right: 12px;
  padding: 8px 12px;
  border: var(--border-width) solid var(--line-on-ink);
  background: transparent;
  color: var(--color-ink-text);
  font: inherit;
}

.contact-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-buttons .button { gap: 10px; }
.contact-buttons .icon { flex: none; }

.quote-band__inner { max-width: 760px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.quote-band__title { font-size: calc(clamp(34px, 5vw, 66px) * var(--heading-scale)); }
.quote-band__text { margin: 0; max-width: 52ch; }
.quote-band .contact-buttons { justify-content: center; }
.quote-band__link { margin: 0; font-size: 13px; letter-spacing: var(--label-spacing); text-transform: uppercase; }
.quote-band__link a { color: var(--ink-text-soft); border-color: var(--line-on-ink); }

/* Home closing panel: heading, contact, and the full form */
.cta--home .cta__inner { max-width: 980px; }
.cta__contact { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 6px; }
.cta__phone {
  font-family: var(--font-heading-stack);
  font-size: calc(clamp(26px, 3vw, 40px) * var(--heading-scale));
  color: var(--color-ink-text);
  border-bottom: var(--border-width) solid var(--line-on-ink);
}
.cta__form-wrap {
  width: 100%;
  margin-top: 26px;
  padding-top: 34px;
  border-top: var(--border-ink);
  text-align: start;
}


/* ---------------------------------------------------------------------
   11. CONTACT PAGE
   ------------------------------------------------------------------ */
.contact-grid { display: grid; gap: 48px 72px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 990px) { .contact-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.contact-aside { display: flex; flex-direction: column; gap: 30px; }
.map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: var(--border);
  background: var(--color-bg-alt);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1); }
.map__link { display: inline-block; margin-top: 10px; font-size: 13px; border-bottom: var(--border); }


/* ---------------------------------------------------------------------
   12. TRUST PAGES AND ABOUT (rich text extras)
   ------------------------------------------------------------------ */
.prose { max-width: 760px; }
.prose .rte { font-size: 16px; line-height: 1.8; }
.rte h2 { font-size: calc(clamp(24px, 2.4vw, 32px) * var(--heading-scale)); }
.rte h3 { font-size: calc(clamp(19px, 1.7vw, 23px) * var(--heading-scale)); }
.rte .facts { margin-top: 1.4em; }
.rte .facts a,
.facts a { border-bottom: var(--border); }
.lead-note {
  padding: 20px 22px;
  border: var(--border);
  border-left: 2px solid var(--color-accent);
  background-color: var(--color-bg-alt);
  font-size: 16px;
}
.rte strong { font-weight: 600; }
.updated { font-size: var(--label-size); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--color-text-muted); }
.about-figures { margin-block: 10px 40px; }
.page-index { columns: 2 260px; column-gap: 48px; }
.page-index li { break-inside: avoid; padding-block: 10px; border-bottom: var(--border); }


/* ---------------------------------------------------------------------
   13. HEADER CALL BUTTONS AND THE MOBILE CONTACT BAR
   ------------------------------------------------------------------ */
.header__contact {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: inherit;
}
.header__contact:hover { color: var(--color-accent); }
@media (min-width: 1100px) { .header__contact { display: inline-flex; } }

.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 55;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--border-width);
  background-color: var(--line-on-ink);
  border-top: var(--border-width) solid var(--line-on-ink);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  background-color: var(--color-ink);
  color: var(--color-ink-text);
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}
.mobile-bar a:hover,
.mobile-bar a:focus-visible { background-color: var(--color-ink-text); color: var(--color-ink); }
@media (min-width: 1100px) { .mobile-bar { display: none; } }
@media (max-width: 1099px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .toast { inset-block-end: 80px; }
}


/* ---------------------------------------------------------------------
   14. FOOTER - four columns
   ------------------------------------------------------------------ */
.footer__top--four { display: grid; gap: 48px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .footer__top--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer__top--four { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.7fr)); } }
.footer__brand .nap { font-size: 14px; color: var(--ink-text-soft); }
.footer__brand .facts { border-top: var(--border-ink); }
.footer__brand .facts > div { border-color: var(--line-on-ink); grid-template-columns: 64px minmax(0, 1fr); padding-block: 10px; }
.footer__brand .facts dd { font-size: 13.5px; color: var(--ink-text-soft); }
.footer__gst { font-size: 12px; color: var(--ink-text-faint); letter-spacing: 0.04em; }


/* ---------------------------------------------------------------------
   15. WOOCOMMERCE PAGES
   Cart, checkout and account come from WooCommerce. These rules make
   them sit on the same hairlines and square fields as the rest.
   ------------------------------------------------------------------ */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  margin: 0 0 24px;
  padding: 16px 20px;
  border: var(--border);
  border-left: 2px solid var(--color-accent);
  background: var(--color-bg-alt);
  list-style: none;
  font-size: 14.5px;
}
.woocommerce-message .button,
.woocommerce-info .button { float: right; margin-left: 16px; min-height: 0; padding: 10px 16px; }
.woocommerce-error { border-left-color: #b3261e; }
.wc-page .rte table,
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: 14px 10px; border-bottom: var(--border); text-align: start; vertical-align: middle; }
.woocommerce table.shop_table img { width: 64px; height: auto; }
.woocommerce form:not(.quote-form) .form-row { margin: 0 0 16px; }
.woocommerce form:not(.quote-form) .form-row label { display: block; margin-bottom: 8px; font-size: var(--label-size); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--color-text-muted); }
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce-page form .input-text {
  width: 100%;
  padding: 14px 16px;
  border: var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
}
/* WooCommerce's own buttons carry the class "button", so they already take
   the theme's square button style from base.css - nothing to add here. */
.wc-page .wp-block-woocommerce-cart,
.wc-page .wp-block-woocommerce-checkout { font-size: 15px; }

/* Four process steps: two by two on tablets. */
@media (min-width: 820px) and (max-width: 1099px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cta__contact { margin-top: 34px; }

/* ---------------------------------------------------------------------
   CONTRAST (WCAG AA) - added in 2.0.0
   The walnut accent is kept exactly as it is for dots, lines and hover
   states. Where it colours small TEXT at rest (the Digital tag, step
   numbers), a slightly deeper shade of the same walnut is used so the
   words reach the 4.5:1 contrast that WCAG AA asks for.
   ------------------------------------------------------------------ */
:root { --color-accent-text: color-mix(in srgb, var(--color-accent) 80%, #000); }
.badge--accent,
.text-accent,
.card__status,
.process .step__num,
.step__num,
.form-status { color: var(--color-accent-text); }
.badge--accent { border-color: var(--color-accent-text); }
.footer .facts dt { color: var(--ink-text-faint); }

/* ---------------------------------------------------------------------
   SECTION RHYTHM - added in 2.0.1
   Two light sections side by side used to stack their full padding
   (96px + 96px), so the white gaps varied from about 110px to 190px
   depending on what sat next to what. Now:
     light next to light   one shared gap (about 120px at full width)
     light next to a band  the band keeps its full padding, so the colour
                           change has room either side
   Every gap still scales from "Space between sections" in the Customizer.
   ------------------------------------------------------------------ */
:root { --section-join: calc(var(--section-spacing) * 0.62); }

.main > :is(.section, .page-hero):not(.panel-ink):not(.bg-warm):has(+ :is(.section:not(.panel-ink):not(.bg-warm), .area-band, .jump-nav)) {
  padding-bottom: var(--section-join);
}
.main > :is(.section:not(.panel-ink):not(.bg-warm), .page-hero, .area-band, .jump-nav) + .section:not(.panel-ink):not(.bg-warm) {
  padding-top: var(--section-join);
}
/* The service-area strip sits between two light sections: same gap. */
.area-band__inner { padding-block: calc(var(--section-join) * 0.55); }

/* "Have something / in mind?" on two lines (it was squeezed to three). */
.cta__heading { max-width: none; }
.footer__contact { font-size: 14px; line-height: 1.9; color: var(--ink-text-soft); }
.footer__contact a { border-bottom-color: var(--line-on-ink); }

/* After "Add to cart" on a card: the button stays in view and WooCommerce's
   "View cart" link sits under it as a second small button. */
.product-card__action--overlay:has(.added),
.product-card__action--overlay:has(.loading) { opacity: 1 !important; }
.product-card .add_to_cart_button.loading { opacity: 0.6; }
.product-card .added_to_cart {
  display: block;
  margin-top: 6px;
  padding: 11px 16px;
  border: var(--border-width) solid var(--color-text);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 11px;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  text-align: center;
}
.product-card .added_to_cart:hover { background: var(--color-text); color: var(--color-bg); }

/* Cart and checkout buttons: the theme's square black button. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained {
  background-color: var(--color-button-bg) !important;
  color: var(--color-button-text) !important;
  border: var(--border-width) solid var(--color-button-bg) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body-stack);
  font-size: 12px;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  min-height: 52px;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: transparent !important;
  color: var(--color-button-bg) !important;
}
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text { color: inherit; }
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-form .wc-block-components-text-input input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-radio-control-accordion-option,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option { border-radius: var(--radius) !important; }