/*
Theme Name: Stratus Medical
Template: generatepress
Author: Stratus Medical
Version: 1.4
*/

/* Styling lives inline in each template. Only global resets belong here. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

/* GeneratePress chrome we replace with our own nav/footer */
.site-header, .main-navigation, .site-footer, .site-info { display: none; }
.site-content, .content-area, .site-main { margin: 0; padding: 0; max-width: none; }

/* Kill the dark page frame: the parent theme paints a body background and
   insets/borders the content wrapper. Our pages own their own backgrounds. */
html, body, #page, .site, .site-content, .content-area, .site-main,
#sm-page, .entry-content, .page-content {
  background: #FFFFFF;
  border: 0;
  outline: 0;
  box-shadow: none;
  max-width: none;
  width: auto;
  padding: 0;
  margin: 0;
}
#sm-page { display: block; }
/* GeneratePress separating-containers adds vertical gutters around content */
.separate-containers .site-main,
.separate-containers .inside-article,
.separate-containers .page-header { margin: 0; padding: 0; background: none; }
.one-container .site-content { padding: 0; }

/* Last resort on the dark frame: whatever paints it, this outranks it.
   Nothing in our design relies on a body-level background. */
html, body { background-color: #FFFFFF !important; }
#page, .site, #content, .site-content, .content-area, .site-main, #sm-page {
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* TranslatePress ships its own floating switcher; ours lives in the utility bar. */
#trp-floater-ls { display: none !important; }

/* Reveal-on-scroll (driven by js/stratus.js) */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
[data-reveal].sm-in { opacity: 1; transform: none; }

/* Phone nav: links become one thumb-scrollable row */
[data-navrow] { height: auto !important; min-height: 52px; }
@media (max-width: 760px) {
  [data-navrow] { flex-wrap: wrap !important; gap: 10px 14px !important; }
  [data-navlinks] { order: 3; width: 100%; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 22px !important; padding-bottom: 2px; }
  [data-navlinks]::-webkit-scrollbar { display: none; }
  [data-navlinks] a { flex: 0 0 auto; white-space: nowrap; padding: 6px 0; }
  [data-utilrow] { justify-content: flex-start !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 16px !important; }
  [data-utilrow]::-webkit-scrollbar { display: none; }
  [data-utilrow] > * { flex: 0 0 auto; }
}

/* Fixed header: nothing outside our own markup may draw a line under it.
   (The nav's own hairline is applied by js/stratus.js on scroll.) */
[data-chrome] { border: 0 !important; box-shadow: none !important; }
[data-chrome] > div { border-top: 0 !important; }
[data-utilbar] { border-left: 0 !important; border-right: 0 !important; }

/* Some GeneratePress setups outline the content wrapper; that line reads as a
   dark bar directly beneath a fixed header. */
#content, #page, .site-content, .inside-article, .entry-content {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* backdrop-filter needs a compositing context to blur reliably when fixed. */
[data-chrome] { will-change: backdrop-filter; isolation: isolate; }

/* ===========================================================
   Phone hardening (<= 760px)
   =========================================================== */

/* 1. Opaque header. iOS Safari drops backdrop-filter on a fixed, transformed
      ancestor, which left page content legible straight through the nav. */
@media (max-width: 760px) {
  [data-utilbar] { background: #EDF1F4 !important; }
  [data-nav]     { background: #FFFFFF !important; box-shadow: 0 1px 0 rgba(42,48,54,0.10); }
}
/* Same guard on any browser that cannot blur at all. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-utilbar] { background: #EDF1F4 !important; }
  [data-nav]     { background: #FFFFFF !important; }
}

@media (max-width: 760px) {
  /* 2. Nothing may exceed the viewport. Fixed px widths and heights get baked
        into inline styles by the block editor's resize handles; on a phone
        they cause horizontal overflow and clipped text. */
  #sm-page h1, #sm-page h2, #sm-page h3, #sm-page p,
  [data-herocopy], [data-herocopy] > * {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  [data-herocopy] { max-width: 100% !important; }

  /* 3. Hero CTAs stack instead of running off the right edge. */
  [data-herobtns] { flex-wrap: wrap !important; gap: 8px !important; }
  [data-herobtns] > a { flex: 1 1 auto; justify-content: center; }

  /* 4. Nav collapses to a hamburger; the inline link row is replaced by the
        drop-down panel below the bar. */
  [data-navlinks] { display: none !important; }
  [data-navtoggle] { display: flex !important; }
  [data-navrow] { padding-left: 16px !important; padding-right: 16px !important; flex-wrap: nowrap !important; }
  [data-navpanel].sm-open { display: block !important; }

  /* Hamburger morphs to an X while the panel is open. */
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(2) { opacity: 0; }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* 5. Horizontal card rails keep their scroll but reveal the next card. */
  [data-stagger] > [style*="flex:0 0 300px"],
  [data-stagger] > [style*="flex: 0 0 300px"] { flex: 0 0 82vw !important; }
}

/* 6. Belt and braces against a page wider than the screen. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Parent-theme wrappers occasionally paint side borders/outlines that read as
   dark vertical bars beside our fixed header. Nothing outside our markup draws. */
#page, .site, #content, .site-content, .content-area, .site-main,
.inside-article, .entry-content, .page-content, #sm-page {
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* The utility bar must collapse to nothing, hairline included. */
[data-utilbar] { min-height: 0 !important; box-sizing: border-box; }

/* Frosted header, without the edge fringe.
   Safari's backdrop-filter paints a dark band where the blurred element's edge
   is. Blurring [data-utilbar] and [data-nav] directly puts such an edge at both
   viewport sides (bars) and, once the utility bar collapses, along the nav's
   top (sliver). Bleeding them sideways failed because [data-chrome] clipped it.

   Instead the blur lives on a pseudo-element behind the two tiers, extended 60px
   past the top and both sides so every fringe-able edge is off-screen. The tiers
   keep their translucent tints and stop blurring. [data-chrome]'s own box is
   untouched — nav.php sets its offsets inline and js/stratus.js measures its
   height for the content spacer, so changing its padding/position breaks both. */
[data-utilbar], [data-nav] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  z-index: 1;
}
/* The language menu hangs out of the utility bar and must clear the nav tier
   below it — the nav comes later in the DOM, so equal z-index put it on top. */
[data-utilbar] { z-index: 3; }
[data-utilbar][data-open] { overflow: visible !important; }
[data-chrome] { will-change: auto !important; overflow: visible !important; }
[data-chrome]::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: 0;
  backdrop-filter: saturate(1.7) blur(20px);
  -webkit-backdrop-filter: saturate(1.7) blur(20px);
  pointer-events: none;
  z-index: 0;
}

/* Header search: the phone uses the field inside the drop-down panel instead. */
@media (max-width: 760px) { [data-search] { display: none !important; } }

/* ===========================================================
   Tablet (<= 1024px): the inline link row plus logo, search and
   CTA no longer fit on one line, so the hamburger takes over here
   too — not just on phones.
   =========================================================== */
@media (max-width: 1024px) {
  [data-navlinks]  { display: none !important; }
  [data-navtoggle] { display: flex !important; }
  [data-navrow]    { flex-wrap: nowrap !important; }
  [data-navpanel].sm-open { display: block !important; }
  [data-search]    { display: none !important; }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
 [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] &gt; span:nth-child(2) { opacity: 0; }
 [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] &gt; span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* GeneratePress lays its content inside a width-capped .grid-container and
 paints the area outside it. That inset is what shows as dark vertical bars
 down each side of a full-bleed page. Our templates are full-bleed by design,
 so no wrapper may cap width or paint a frame. */
.grid-container, .site.grid-container, .container, .wp-site-blocks,
#page, #main, #primary, #content, .site, .site-content, .content-area, .site-main {
 max-width: none !important;
 width: auto !important;
 margin-left: 0 !important;
 margin-right: 0 !important;
 padding-left: 0 !important;
 padding-right: 0 !important;
 border: 0 !important;
 outline: 0 !important;
 box-shadow: none !important;
 background-image: none !important;
 background-color: transparent !important;
}

/* Whatever the parent theme paints behind that inset, it is not ours to show. */
html, body { background: #FFFFFF !important; background-image: none !important; }

/* Our page wrapper paints its own white. Earlier rules made every wrapper
 transparent, which is precisely what let a dark ancestor show through at the
 edges. #sm-page is the last layer before our content — it is never see-through. */
#sm-page {
 background: #FFFFFF !important;
 background-color: #FFFFFF !important;
 width: 100% !important;
 max-width: none !important;
 margin: 0 !important;
 padding: 0 !important;
 border: 0 !important;
 position: relative;
 z-index: 1;
}

/* Full-viewport white underlay, behind everything, pinned to the viewport so no
 ancestor's width cap or inset can expose a dark edge beside it. */
body::before {
 content: '';
 position: fixed;
 inset: 0;
 background: #FFFFFF;
 z-index: -1;
 pointer-events: none;
}

[data-audience-card]:hover { border-color: rgba(41,143,194,0.35); box-shadow: 0 14px 34px rgba(42,48,54,0.10); transform: translateY(-3px); }

/* Product catalog page — cover cards and CTA lifts. */
[data-catalog-card]:hover { border-color: rgba(41,143,194,0.35); box-shadow: 0 16px 40px rgba(42,48,54,0.10); }


/* Product band: the overlay sits over the image on desktop. Narrow viewports
 shrink the image faster than the text, so below 760px it becomes a normal
 block on a dark panel instead of being clipped by the band's overflow. */
@media (max-width: 760px) {
 [data-band] { background: #2B3138; }
 [data-band-overlay] { position: static !important; width: 100% !important; padding: clamp(20px, 5vw, 28px) !important; }
}


/* ===========================================================
 Post reading view (single.php) and post lists
 =========================================================== */
.sm-prose { font-size: 18px; line-height: 1.7; color: #3C4248; }
.sm-prose &gt; *:first-child { margin-top: 0; }
.sm-prose p { margin: 0 0 1.15em; text-wrap: pretty; }
.sm-prose h2 { font-weight: 600; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -0.02em; color: #2B3138; margin: 2em 0 0.6em; }
.sm-prose h3 { font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: #2B3138; margin: 1.7em 0 0.5em; }
.sm-prose h4 { font-weight: 600; font-size: 17px; color: #2B3138; margin: 1.5em 0 0.4em; }
.sm-prose a { color: #298FC2; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(41,143,194,0.35); text-underline-offset: 2px; }
.sm-prose a:hover { text-decoration-color: #298FC2; }
.sm-prose ul, .sm-prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.sm-prose li { margin-bottom: 0.5em; }
.sm-prose li::marker { color: #9AA3AB; }
.sm-prose strong { font-weight: 600; color: #2B3138; }
.sm-prose blockquote { margin: 1.6em 0; padding: 22px 26px; background: #F5F6F8; border-radius: 18px; font-size: 19px; line-height: 1.55; color: #2B3138; }
.sm-prose blockquote p:last-child { margin: 0; }
.sm-prose img, .sm-prose iframe, .sm-prose video { max-width: 100%; height: auto; border-radius: 18px; display: block; }
.sm-prose figure { margin: 1.8em 0; }
.sm-prose figcaption { font-size: 13px; color: #9AA3AB; margin-top: 10px; }
.sm-prose hr { border: 0; border-top: 1px solid rgba(42,48,54,0.10); margin: 2.2em 0; }
.sm-prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1.6em 0; }
.sm-prose th, .sm-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(42,48,54,0.10); }
.sm-prose th { font-weight: 600; color: #2B3138; }

/* Card and row lifts */
[data-reveal] &gt; img { display: block; }
a[data-reveal]:hover { color: inherit; }

/* Pagination */
.sm-pager .page-numbers {
 display: inline-flex; align-items: center; justify-content: center;
 min-width: 40px; height: 40px; padding: 0 14px;
 font-size: 14px; font-weight: 600; color: #4B5157;
 background: #F5F6F8; border-radius: 999px;
}
.sm-pager a.page-numbers:hover { color: #298FC2; background: rgba(41,143,194,0.10); }
.sm-pager .page-numbers.current { color: #FFFFFF; background: #298FC2; }
.sm-pager .page-numbers.dots { background: none; min-width: 20px; padding: 0; color: #9AA3AB; }
/* ===========================================================
 Stratus Medical — WooCommerce cart &amp; checkout restyle
 Covers BOTH the classic shortcode checkout and the newer
 Checkout/Cart blocks. Unused selectors are inert.

 Install: WP Admin → Appearance → Customize → Additional CSS
 (or enqueue this file from your theme/child theme).
 =========================================================== */

:root {
 --sm-blue: #298FC2;
 --sm-blue-dark: #237AA6;
 --sm-ink: #2B3138;
 --sm-body: #6E7378;
 --sm-muted: #9AA3AB;
 --sm-panel: #F5F6F8;
 --sm-line: rgba(42, 48, 54, 0.10);
 --sm-field-line: rgba(42, 48, 54, 0.14);
 --sm-radius: 20px;
 --sm-radius-field: 11px;
}

/* ---------- Typography + page frame ---------- */

.woocommerce-cart, .woocommerce-checkout,
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
 font-family: 'Hanken Grotesk', system-ui, sans-serif;
 color: var(--sm-ink);
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.wc-block-components-title {
 font-weight: 500;
 letter-spacing: -0.03em;
 line-height: 1.05;
 color: #464646;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
 font-size: clamp(28px, 4.4vw, 44px);
 margin-bottom: clamp(24px, 3.5vw, 36px);
}

/* Woo's default notice / breadcrumb noise */
.woocommerce-info, .woocommerce-message {
 border-top: none;
 background: #EAF1F6;
 border-radius: 14px;
 padding: 14px 18px;
 color: #4B5157;
 font-size: 14px;
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--sm-blue); }

/* ---------- Fields (classic + block) ---------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input {
 width: 100%;
 border: 1px solid var(--sm-field-line);
 background: #fff;
 border-radius: var(--sm-radius-field);
 padding: 13px 15px;
 font-size: 15px;
 line-height: 1.3;
 color: var(--sm-ink);
 box-shadow: none;
 transition: border-color .2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus {
 border-color: var(--sm-blue);
 outline: none;
 box-shadow: none;
}

.woocommerce form .form-row label,
.wc-block-components-checkout-step__heading-content {
 font-size: 13px;
 font-weight: 600;
 color: #4B5157;
 margin-bottom: 6px;
}

.woocommerce form .form-row { margin-bottom: 12px; padding: 0; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: calc(50% - 6px); }

/* Woo's asterisk */
.woocommerce form .form-row .required { color: var(--sm-muted); text-decoration: none; }

/* ---------- Grouped panels ---------- */

/* Classic: billing/shipping and order review */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #order_review,
.woocommerce-cart .cart_totals,
.woocommerce-cart .woocommerce-cart-form,
/* Blocks */
.wc-block-checkout__form .wc-block-components-checkout-step,
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child {
 background: var(--sm-panel);
 border: none;
 border-radius: var(--sm-radius);
 padding: clamp(22px, 3vw, 28px);
 margin-bottom: 16px;
}

.woocommerce-checkout h3,
.woocommerce-cart .cart_totals h2,
.wc-block-components-checkout-step__title {
 font-size: 11px !important;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--sm-muted);
 margin: 0 0 18px;
}

/* Two-column layout: form + summary */
@media (min-width: 900px) {
 .woocommerce-checkout form.checkout {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
 gap: 20px;
 align-items: start;
 }
 .woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
 .woocommerce-checkout form.checkout #order_review,
 .woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; }
 .woocommerce-checkout #customer_details .col2-set,
 .woocommerce-checkout #customer_details .col-1,
 .woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
}

/* ---------- Order review / totals tables ---------- */

.woocommerce table.shop_table,
.woocommerce-cart .cart_totals table {
 border: none;
 border-radius: 0;
 background: transparent;
 font-size: 14.5px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
 border: none;
 border-bottom: 1px solid var(--sm-line);
 padding: 11px 0;
 color: #4B5157;
 font-weight: 400;
}

.woocommerce table.shop_table th { color: var(--sm-muted); font-weight: 500; }

.woocommerce table.shop_table tfoot .order-total th,
.woocommerce table.shop_table tfoot .order-total td,
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
 border-bottom: none;
 padding-top: 16px;
 font-size: 17px;
 color: var(--sm-ink);
}
.woocommerce table.shop_table tfoot .order-total .amount { font-weight: 500; font-size: 20px; }
.woocommerce .amount, .wc-block-formatted-money-amount { font-variant-numeric: tabular-nums; }

/* Product thumbnails: never crop the book cover */
.woocommerce table.cart img,
.wc-block-components-order-summary-item__image img {
 width: 76px;
 height: auto;
 border-radius: 5px;
 box-shadow: 0 10px 26px rgba(42, 48, 54, 0.22);
 object-fit: contain;
}

/* Quantity control */
.woocommerce .quantity .qty,
.wc-block-components-quantity-selector {
 border: 1px solid var(--sm-field-line);
 border-radius: 999px;
 background: #fff;
 padding: 8px 10px;
 font-weight: 600;
 font-variant-numeric: tabular-nums;
}
.wc-block-components-quantity-selector { overflow: hidden; }

/* ---------- Buttons ---------- */

.woocommerce #payment #place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .checkout-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
 background: var(--sm-blue);
 color: #fff;
 border: none;
 border-radius: 999px;
 padding: 14px 26px;
 font-size: 15px;
 font-weight: 600;
 letter-spacing: 0;
 text-transform: none;
 box-shadow: 0 8px 24px rgba(41, 143, 194, 0.32);
 transition: transform .2s ease, background .2s ease;
 width: 100%;
}

.woocommerce #payment #place_order:hover,
.woocommerce a.button.alt:hover,
.woocommerce .checkout-button:hover,
.wc-block-components-checkout-place-order-button:hover {
 background: var(--sm-blue-dark);
 color: #fff;
 transform: translateY(-2px);
}

/* Secondary buttons (update cart, apply coupon) */
.woocommerce button.button,
.woocommerce a.button {
 background: rgba(41, 143, 194, 0.10);
 color: var(--sm-blue);
 border: none;
 border-radius: 999px;
 padding: 11px 20px;
 font-size: 14px;
 font-weight: 600;
 text-transform: none;
}
.woocommerce button.button:hover, .woocommerce a.button:hover {
 background: rgba(41, 143, 194, 0.16);
 color: var(--sm-blue);
}

/* ---------- Payment box ---------- */

.woocommerce-checkout #payment,
.wc-block-checkout__payment-method {
 background: #fff;
 border-radius: 16px;
 padding: 20px;
}
.woocommerce-checkout #payment div.payment_box {
 background: var(--sm-panel);
 border-radius: 12px;
 color: var(--sm-body);
 font-size: 13.5px;
 line-height: 1.6;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--sm-line); padding: 0 0 14px; }

/* ---------- Coupon: collapsed, not shouting ---------- */

.woocommerce-form-coupon-toggle .woocommerce-info {
 background: transparent;
 padding: 0 0 10px;
 font-size: 13.5px;
 color: var(--sm-muted);
}

/* ---------- Confirmation (thank you) page ---------- */

.woocommerce-order-received .woocommerce-thankyou-order-received {
 font-size: clamp(24px, 3.6vw, 34px);
 font-weight: 500;
 letter-spacing: -0.02em;
 color: #464646;
 background: none;
 padding: 0;
 margin-bottom: 20px;
}
.woocommerce ul.order_details {
 background: var(--sm-panel);
 border-radius: var(--sm-radius);
 padding: 24px 26px;
 margin: 0 0 26px;
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
}
.woocommerce ul.order_details li {
 border: none;
 margin: 0;
 padding: 0;
 font-size: 12px;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--sm-muted);
}
.woocommerce ul.order_details li strong {
 display: block;
 font-size: 16px;
 letter-spacing: -0.01em;
 text-transform: none;
 color: var(--sm-ink);
 margin-top: 5px;
}

/*
 * Contact Form 7 restyle.
 *
 * CF7 ships almost no styling, so its default inputs look like raw browser
 * fields inside the Stratus cards. These rules match the site's type, radii,
 * and accent color. Scoped to .wpcf7 so nothing else is affected.
 */

.wpcf7 {
 font-family: 'Hanken Grotesk', sans-serif;
 color: #2B3138;
}

.wpcf7 form &gt; p,
.wpcf7 .wpcf7-form &gt; p {
 margin: 0 0 16px;
}

/* Field labels */
.wpcf7 label {
 display: block;
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.01em;
 color: #4B5157;
 margin-bottom: 7px;
}

/* Inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
 width: 100%;
 box-sizing: border-box;
 font-family: inherit;
 font-size: 16px;
 line-height: 1.5;
 color: #2B3138;
 background: #FFFFFF;
 border: 1px solid rgba(42, 48, 54, 0.14);
 border-radius: 12px;
 padding: 13px 15px;
 transition: border-color 0.16s ease, box-shadow 0.16s ease;
 appearance: none;
 -webkit-appearance: none;
}

.wpcf7 textarea {
 min-height: 132px;
 resize: vertical;
}

.wpcf7 select {
 background-image: url("data:image/svg+xml;charset=utf-8,svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'path fill='none' stroke='6E7378' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'//svg");
 background-repeat: no-repeat;
 background-position: right 15px center;
 padding-right: 40px;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
 color: #9AA3AB;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
 outline: none;
 border-color: #298FC2;
 box-shadow: 0 0 0 3px rgba(41, 143, 194, 0.14);
}

/* Checkboxes and radios */
.wpcf7 .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-radio .wpcf7-list-item {
 display: block;
 margin: 0 0 8px;
}

.wpcf7 .wpcf7-list-item-label {
 font-size: 15px;
 color: #4B5157;
 font-weight: 400;
}

/* Submit */
.wpcf7 input[type="submit"] {
 font-family: inherit;
 font-size: 15px;
 font-weight: 600;
 color: #FFFFFF;
 background: #298FC2;
 border: 0;
 border-radius: 999px;
 padding: 14px 30px;
 cursor: pointer;
 transition: background 0.16s ease;
 -webkit-appearance: none;
 appearance: none;
}

.wpcf7 input[type="submit"]:hover {
 background: #1F7BA8;
}

.wpcf7 input[type="submit"]:disabled {
 opacity: 0.55;
 cursor: default;
}

/* Validation + response messages */
.wpcf7 .wpcf7-not-valid {
 border-color: #D0473E;
}

.wpcf7 .wpcf7-not-valid-tip {
 font-size: 13px;
 color: #D0473E;
 margin-top: 6px;
}

.wpcf7 .wpcf7-response-output {
 font-size: 14px;
 line-height: 1.55;
 border: 0;
 border-radius: 12px;
 margin: 18px 0 0;
 padding: 13px 16px;
 background: rgba(41, 143, 194, 0.09);
 color: #2B3138;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
 background: rgba(208, 71, 62, 0.09);
 color: #98322B;
}

.wpcf7 form.sent .wpcf7-response-output {
 background: rgba(46, 143, 95, 0.10);
 color: #1F6B45;
}

.wpcf7 .wpcf7-spinner {
 margin: 0 0 0 12px;
}

/* Two-up rows: wrap two fields in <span class="stratus-row"> in the CF7 editor */
.wpcf7 .stratus-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
/* ============================================================
   Stratus header fix — paste as the ENTIRE Additional CSS, Publish,
   then hard-reload (Cmd-Shift-R).

   What was actually wrong (reproduced locally against the theme's own
   style.css + nav.php, not guessed):

   1. Dark vertical bars / top sliver = backdrop-filter edge fringe. Safari
      paints a dark band at the edge of a blurred element. [data-utilbar] and
      [data-nav] each blurred themselves, putting such an edge at both viewport
      sides, and — once the utility bar collapses on scroll — along the nav's
      exposed top edge. The theme bled the bars -28px to hide it, but
      [data-chrome] had overflow:hidden and clipped the bleed right back.

   2. Gap above the header / logo pushed right = nav.php sets the chrome's
      position, top, left and right INLINE, so any stylesheet offset is ignored
      while its padding still applies, indenting the whole header.

   Fix: blur once, on a pseudo-element behind both tiers, bled 60px past the
   top and sides so every fringe-able edge is off-screen. The chrome's own box
   is left alone — js/stratus.js measures its height for the content spacer.
   ============================================================ */

html body [data-utilbar],
html body [data-nav] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  outline: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

html body [data-chrome] {
  overflow: visible !important;
  will-change: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

html body [data-chrome]::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: -60px !important;
  left: -60px !important;
  right: -60px !important;
  bottom: 0 !important;
  backdrop-filter: saturate(1.7) blur(20px) !important;
  -webkit-backdrop-filter: saturate(1.7) blur(20px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* border-BOTTOM is deliberately untouched: stratus.js animates the utility
   bar's to 0px on scroll and adds the nav's hairline. An !important here would
   outrank that animation and leave a 1px line behind. */

html, body { margin-top: 0 !important; padding-top: 0 !important; }

html body .site-header,
html body .main-navigation,
html body .site-footer,
html body .site-info { display: none !important; }