/* www.edquiddity.com
   Hand-written base. build.py appends the generated type and button rules.

   Brand tokens are Duda's theme colors (--color_1..5 on the live site).
   Contrast measured on white (WCAG 2.x):
     green #0b9444  3.94:1  passes for large text only (all live uses are 20px bold or bigger)
     teal  #00a9a7  2.90:1  fails for any text: decoration only
     blue  #008ecb  3.66:1  large text only
   Wherever the live site set teal, blue or green at small sizes, the rebuild
   uses the same hue darkened about 15 percent (generated rules apply this
   automatically below 24px regular or 18.66px bold):
     teal-ink  #007c7a  5.04:1
     blue-ink  #0072a3  5.34:1
     green-ink #087a37  5.3:1
   The live gradient buttons (teal to blue, white 16px label) measured 2.90:1
   to 3.66:1; --grad keeps the look with both stops darkened to 5.0:1. */

/* Layout values travel as custom properties on each element. Custom properties
   INHERIT by default, so a Duda group with no padding of its own picked up its
   parent's --pl:58px and doubled the inset (the left/right padding drift Justin
   saw on every page). None of these may inherit. */
@property --acc-bg { syntax: '*'; inherits: false; }
@property --acc-chev { syntax: '*'; inherits: false; }
@property --acc-fg { syntax: '*'; inherits: false; }
@property --acc-gap { syntax: '*'; inherits: false; }
@property --ad { syntax: '*'; inherits: false; }
@property --adl { syntax: '*'; inherits: false; }
@property --an { syntax: '*'; inherits: false; }
@property --ar { syntax: '*'; inherits: false; }
@property --bh { syntax: '*'; inherits: false; }
@property --bw { syntax: '*'; inherits: false; }
@property --ch { syntax: '*'; inherits: false; }
@property --cols { syntax: '*'; inherits: false; }
@property --cw { syntax: '*'; inherits: false; }
@property --gap { syntax: '*'; inherits: false; }
@property --gcap-bg { syntax: '*'; inherits: false; }
@property --gcap-h { syntax: '*'; inherits: false; }
@property --gfit { syntax: '*'; inherits: false; }
@property --ggap { syntax: '*'; inherits: false; }
@property --gpos { syntax: '*'; inherits: false; }
@property --gradius { syntax: '*'; inherits: false; }
@property --gratio { syntax: '*'; inherits: false; }
@property --iw { syntax: '*'; inherits: false; }
@property --l { syntax: '*'; inherits: false; }
@property --m-ar { syntax: '*'; inherits: false; }
@property --m-bh { syntax: '*'; inherits: false; }
@property --m-bw { syntax: '*'; inherits: false; }
@property --m-ch { syntax: '*'; inherits: false; }
@property --m-cw { syntax: '*'; inherits: false; }
@property --m-gap { syntax: '*'; inherits: false; }
@property --m-iw { syntax: '*'; inherits: false; }
@property --m-l { syntax: '*'; inherits: false; }
@property --m-order { syntax: '*'; inherits: false; }
@property --m-pb { syntax: '*'; inherits: false; }
@property --m-pl { syntax: '*'; inherits: false; }
@property --m-pr { syntax: '*'; inherits: false; }
@property --m-pt { syntax: '*'; inherits: false; }
@property --m-sh { syntax: '*'; inherits: false; }
@property --m-t { syntax: '*'; inherits: false; }
@property --m-w { syntax: '*'; inherits: false; }
@property --mh { syntax: '*'; inherits: false; }
@property --ml { syntax: '*'; inherits: false; }
@property --order { syntax: '*'; inherits: false; }
@property --pb { syntax: '*'; inherits: false; }
@property --pl { syntax: '*'; inherits: false; }
@property --pr { syntax: '*'; inherits: false; }
@property --pt { syntax: '*'; inherits: false; }
@property --sh { syntax: '*'; inherits: false; }
@property --t { syntax: '*'; inherits: false; }
@property --w { syntax: '*'; inherits: false; }
@property --wp { syntax: '*'; inherits: false; }

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700-italic.woff2') format('woff2'); }
/* Metric-matched fallback so the swap does not move line breaks. */
@font-face { font-family: 'Poppins Fallback'; src: local('Arial'); size-adjust: 112.5%; ascent-override: 93%; descent-override: 31%; line-gap-override: 9%; }

:root {
  --color_1: #0b9444; --color_2: #00a9a7; --color_3: #ffffff; --color_4: #0a0a0a; --color_5: #008ecb;
  --green: #0b9444;
  --teal: #00a9a7;
  --blue: #008ecb;
  --blue-ink: #0072a3;
  --ink: #000000;
  --muted: #5d6b72;
  --header-bg: #f2fbfb;
  --pale-blue: #e5f3fa;
  --grad: linear-gradient(90deg, #007c7a 0%, #0076a8 100%);
  --grad-rev: linear-gradient(90deg, #0076a8 0%, #007c7a 100%);
  --teal-ink: #007c7a;
  --teal-large: #009b99;
  --green-ink: #087a37;
  --font: 'Poppins', 'Poppins Fallback', Arial, sans-serif;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink); background: #fff; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; }
a { color: var(--blue-ink); }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; padding: 8px 12px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 2px; }

/* ------------------------------------------------------------------ header */
.site-header { background: var(--header-bg); position: relative; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 24px); min-height: 90px; padding: 10px clamp(20px, 7.4vw - 32px, 74px); }
.brand img { width: clamp(160px, 15.4vw, 222px); height: auto; }
.site-nav { flex: 1; display: flex; justify-content: center; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.nav-item { position: relative; display: flex; align-items: center; }
/* The nav never wraps: type and spacing scale down with the screen until the
   960px drawer takes over (Justin, 2026-10-19). */
.nav-link { display: block; padding: 0 clamp(8px, 1.6vw - 3px, 20px); line-height: 35px; color: var(--ink); text-decoration: none; text-transform: uppercase;
  letter-spacing: .03em; font-size: clamp(13px, .55vw + 8.5px, 16px); white-space: nowrap; }
.nav-link:hover, .nav-link.is-active { color: var(--blue-ink); }
.nav-link.is-active { box-shadow: inset 0 -2px 0 var(--blue-ink); }
/* Jumbo nav (Websites/jumbomenu.md). Desktop hover panels; the drawer turns
   them into accordions at 960px. */
.nav-item.has-mega { position: relative; }
.nav-item.has-mega--wide { position: static; }               /* the VLC panel centers on the header, not the trigger */
.mega-trigger { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer;
  font: inherit; -webkit-appearance: none; appearance: none; }
.mega-trigger .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .3s; }
.has-mega:hover .caret, .has-mega:focus-within .caret, .has-mega.open .caret { transform: rotate(-135deg) translateY(0); }
.mega { position: absolute; top: calc(100% + 18px); left: 50%; z-index: 60; transform: translateX(-50%) translateY(10px);
  background: #fff; border: 1px solid #dfe9ec; border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.16); padding: 30px 32px;
  opacity: 0; visibility: hidden; pointer-events: none; text-align: left; }
.has-mega--wide .mega { top: calc(100% - 4px); width: min(1100px, calc(100vw - 48px)); }
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega { opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0); transition: opacity .3s ease, transform .3s ease; }
.mega::before { content: ''; position: absolute; top: -34px; left: 0; right: 0; height: 36px; }   /* hover bridge */
.mega-cols { display: grid; column-gap: 36px; row-gap: 28px; }
.mega-cols--vlc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-cols--ple { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); width: min(760px, calc(100vw - 48px)); }
.mega-col-title { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink);
  margin-bottom: 8px; padding-bottom: 9px; border-bottom: 1px solid #dfe9ec; }
.mega-links { display: flex; flex-direction: column; }
.mega-col a { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; font-size: 15px; line-height: 1.4; color: #1f2a30;
  text-decoration: none; text-transform: none; letter-spacing: 0; transition: color .22s, padding-left .22s; }
.mega-col a:hover, .mega-col a[aria-current] { color: var(--blue-ink); padding-left: 5px; }
.mega-ic { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; color: var(--teal-ink); transition: color .22s, transform .22s; }
.mega-col a:hover .mega-ic { color: var(--blue-ink); transform: scale(1.12); }
.mega-col a.mega-all { font-weight: 600; }                     /* "See all" sits in the list, one weight up */
.mega-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; border-radius: 12px;
  background: linear-gradient(135deg, #e6f6f6 0%, #e5f3fa 100%); }
@media (min-width: 961px) {                                     /* VLC card runs as a strip under the six columns */
  .mega-cols--vlc > .mega-cta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between;
    gap: 24px; padding: 18px 24px; }
}
.mega-cta-h { display: block; font-size: 18px; font-weight: 700; color: var(--teal-ink); line-height: 1.3; }
.mega-cta-txt p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: #33434b; }
.mega-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--grad); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; letter-spacing: .02em; transition: background .2s; }
.mega-cta-btn:hover { background: var(--grad-rev); }
.header-social { display: flex; gap: 10px; }
.header-social a, .social a { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; align-items: center; justify-content: center; }
.header-social svg, .social svg { width: 15px; height: 15px; }
.header-phone { display: none; color: var(--green-ink); padding: 8px; }
.header-phone svg { width: 26px; height: 26px; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; color: var(--teal); cursor: pointer; }
.nav-toggle svg { width: 30px; height: 30px; }
.nav-toggle svg + svg { display: none; }

/* ------------------------------------------------------------------ flex layout
   Every value comes from the capture as a custom property on the element. */
.fx { position: relative; overflow: hidden; }
.fx--photo { min-height: var(--sh); display: flex; flex-direction: column; justify-content: center; }
.fx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fx-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fx > .fx-g, .fx > .fx-w { position: relative; z-index: 1; width: 100%; max-width: var(--w, none); margin-inline: auto; }
.fx--photo > .fx-g { min-height: var(--sh); }
.fx-g { display: flex; gap: var(--gap, 0); padding: var(--pt, 0) var(--pr, 0) var(--pb, 0) var(--pl, 0); min-width: 0; }
.fx-row { flex-direction: row; }
.fx-col { flex-direction: column; }
.j-start { justify-content: flex-start; } .j-center { justify-content: center; } .j-end { justify-content: flex-end; }
.j-between { justify-content: space-between; } .j-around { justify-content: space-around; } .j-evenly { justify-content: space-evenly; }
.a-start { align-items: flex-start; } .a-center { align-items: center; } .a-end { align-items: flex-end; } .a-stretch { align-items: stretch; }
.as-s { align-self: flex-start; } .as-c { align-self: center; } .as-e { align-self: flex-end; }
/* Row children size as a FRACTION of the row (Duda's thirds, halves, two-thirds),
   so the layout stretches on wide screens instead of keeping 1440px pixel widths.
   Icons and buttons keep their fixed size. */
.fx-row > * { flex: 0 1 var(--wp, var(--w, auto)); min-width: 0; max-width: 100%; }
.fx-row > .fx-fixed { flex: 0 0 var(--w, auto); }
.fx-row > [style*="--ml:"] { margin-left: var(--ml); }
.as-st { align-self: stretch; }
.fx-g > * { order: var(--order, 0); }
.fx-col > [style*="--w:"] { width: var(--w); max-width: 100%; }
.fx-deco { position: relative; }
.fx-ov-host { position: relative; isolation: isolate; }
.fx-ov { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; }
.fx-ov-host > :not(.fx-ov) { position: relative; z-index: 1; }
.fx-empty { min-height: var(--mh); }
.fx-w { min-width: 0; }
.fx-text { align-self: stretch; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.fx-col > .fx-text[style*="--w:"] { align-self: auto; width: var(--w); }
.fx-text.as-s { align-self: flex-start; } .fx-text.as-c { align-self: center; } .fx-text.as-e { align-self: flex-end; }
.fx-col > .fx-w[style*="--w:"] { width: var(--w); max-width: 100%; }
.fx-blank { min-height: 1.6em; }
.fx-list { margin: 0; padding-left: 1.25em; }
.fx-list li + li { margin-top: 4px; }
.ta-c { text-align: center; } .ta-r { text-align: right; } .ta-j { text-align: justify; }
.fx-img { width: 100%; max-width: var(--iw); height: auto; aspect-ratio: var(--ar, auto); }
.fx-w > .fx-img, .fx-w > a > .fx-img { max-width: 100%; }
.d-hide { display: none; }
.fx-graphic { display: inline-flex; width: var(--iw); flex: 0 0 auto; }
.fx-row > .fx-fixed { flex-shrink: 0; }
.fx-graphic svg { width: 100%; height: auto; }
.fx-spacer { height: var(--sh); }

/* collage: overlapping photos, positioned in percent so it scales as one */
.collage { position: relative; width: 100%; margin-inline: auto; aspect-ratio: var(--ar); }
.collage-item { position: absolute; left: var(--l); top: var(--t); width: var(--cw); height: var(--ch); }
.collage-item .fx-img { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 767px) {
  .collage-item .fx-img { max-width: none; aspect-ratio: auto; }
  .fx-g > .collage { width: var(--m-w, 100%); max-width: 100%; aspect-ratio: var(--m-ar, var(--ar)); flex: 0 0 auto; }
  .collage-item { left: var(--m-l, var(--l)); top: var(--m-t, var(--t)); width: var(--m-cw, var(--cw)); height: var(--m-ch, var(--ch)); }
}


/* ------------------------------------------------------------------ motion
   Measured on the live Duda site (2026-10-12), not invented:
   entrance fade   opacity 0 -> 1, linear, 1s, when the element enters the viewport
   entrance slide  translate by the element's OWN size from the named side
                   (up = from below, left = from the left), linear, 1s
   both desktop only on live; phones get them only where Duda set a phone config.
   scroll-linked   the three home cards: hidden and shifted up by their height
                   until their top passes 70% of the viewport, in place by 30%
                   (components.js drives opacity + translate from the scroll)
   hover           zoom = scale(1.06) .2s ease-out; down = translateY(10px)
   components.js adds .motion to <html> only when JS runs and the visitor has
   not asked for reduced motion, so nothing is ever hidden without it. */
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fx-down { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes fx-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes fx-right { from { transform: translateX(100%); } to { transform: none; } }
[data-anim="fade"] { --an: fx-fade; } [data-anim="up"] { --an: fx-up; } [data-anim="down"] { --an: fx-down; }
[data-anim="left"] { --an: fx-left; } [data-anim="right"] { --an: fx-right; }
.motion [data-anim]:not(.anim-in) { visibility: hidden; }
.motion [data-anim].anim-in { animation: var(--an) var(--ad, 1s) linear var(--adl, 0s) backwards; }
@media (max-width: 767px) {
  .motion .anim-d[data-anim]:not(.anim-in) { visibility: visible; }
  .motion .anim-d[data-anim].anim-in { animation: none; }
}
@media (hover: hover) {
  .hv-zoom { transition: transform .2s ease-out; }
  .hv-zoom:hover { transform: scale(1.06); }
  .hv-down { transition: transform .2s ease-out; }
  .hv-down:hover { transform: translateY(10px); }
  .hv-shadow { transition: box-shadow .2s ease-out; }
  .hv-shadow:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
  .hv-img img { transition: transform .2s ease-out; }
  .hv-img:hover img { transform: scale(1.06); }
}
body { overflow-x: clip; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-width: var(--bw, 0); min-height: var(--bh, 46px);
  padding: 8px 16px; white-space: nowrap; text-decoration: none; line-height: 1.2; cursor: pointer; border: 0; transition: filter .15s, transform .15s; }
.btn:hover { filter: none; }
.btn:active { transform: translateY(1px); }
.btn--gallery, .btn--submit { background: var(--grad); color: #fff; border-radius: 15px; font-weight: 600; }
.btn--gallery:hover, .btn--submit:hover { background: var(--grad-rev); }
.btn--gallery { min-height: 45px; padding: 10px 26px; }

/* ------------------------------------------------------------------ gallery
   Duda photo galleries (dump-galleries.js): columns, tile ratio and fit,
   caption below / over / revealed on hover, all from the live widget. */
.gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); justify-content: center; gap: 24px var(--ggap, 20px); width: 100%; }
.g-tile { position: relative; display: flex; flex-direction: column; margin: 0; min-width: 0; }
.g-img { aspect-ratio: var(--gratio, 1 / 1); overflow: hidden; border-radius: var(--gradius, 0); background: #fff; }
.g-img a { display: block; height: 100%; }
.g-img img { width: 100%; height: 100%; object-fit: var(--gfit, cover); object-position: var(--gpos, 50% 50%); }
.gallery--shadow .g-img { box-shadow: 0 3px 12px rgba(0, 0, 0, .14); }
.g-cap { display: flex; flex-direction: column; gap: 10px; }
.gallery--below .g-cap { padding: 14px 0 0; min-height: var(--gcap-h, 0); }
.g-title { line-height: 1.35; }
.g-text p { font-size: inherit; line-height: 1.6; }
.g-text p + p { margin-top: 10px; }
.g-text ul, .g-text ol { padding-left: 1.2em; text-align: left; }
.g-text li + li { margin-top: 4px; }
.g-btn { align-self: flex-start; margin: 6px 0; white-space: normal; max-width: 100%; min-width: min(var(--bw, 0px), 100%); }
.gallery--center .g-cap { align-items: center; text-align: center; }
.gallery--center .g-btn { align-self: center; }
.gallery--over .g-cap { position: absolute; inset: 0; justify-content: center; align-items: center; text-align: center; padding: 20px; background: var(--gcap-bg, transparent); border-radius: var(--gradius, 0); }
.gallery--over .g-btn { align-self: center; }
.gallery--reveal .g-cap { opacity: 0; transform: scale(1.05); transition: opacity .3s ease, transform .3s ease; }
.gallery--reveal .g-tile:hover .g-cap, .gallery--reveal .g-tile:focus-within .g-cap { opacity: 1; transform: none; }
/* Touch screens cannot hover: show hover-reveal captions under the image so
   their links stay reachable. */
@media (hover: none) {
  .gallery--reveal .g-cap { position: static; opacity: 1; transform: none; background: transparent; padding: 14px 0 0; }
}

/* ------------------------------------------------------------------ faq */
.faq { display: flex; flex-direction: column; gap: var(--acc-gap, 24px); width: 100%; }
.faq-item { background: var(--acc-bg, #fefffe); }
.faq-item summary { list-style: none; cursor: pointer; padding: 16px 64px 16px 16px; position: relative; color: var(--acc-fg, var(--teal-large)); font-weight: 700; font-size: 25px; line-height: 1.5; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; position: absolute; right: 26px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--acc-chev, #008383); border-bottom: 2px solid var(--acc-chev, #008383); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-a { overflow: hidden; padding: 0 16px 18px; font-size: 16px; color: var(--acc-fg-a, inherit); }
.faq[style*="#008f8d"] .faq-a { color: #fff; }
.faq-a p + p { margin-top: 10px; }

/* ------------------------------------------------------------------ slider */
.slider { position: relative; width: 100%; padding: 0 48px; min-height: var(--slh, 0); display: flex; align-items: center; }
.slider-track { width: 100%; }
@property --slh { syntax: '*'; inherits: false; }
@property --m-slh { syntax: '*'; inherits: false; }
.slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 8px; }
.slide img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; }
.slide figcaption { max-width: 720px; font-weight: 600; font-size: 16px; }
@keyframes fx-fadeup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.motion .slide.is-active > * { animation: fx-fadeup .8s ease both; }
.slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.slider-prev { left: 0; } .slider-next { right: 0; }
.slider-prev svg, .slider-next svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ video */
.yt { position: relative; width: 100%; max-width: var(--iw); background: #000; overflow: hidden; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.yt-play svg { width: 30px; height: 30px; }

/* ------------------------------------------------------------------ calendar */
.gcal { width: 100%; }
.gcal iframe { width: 100%; height: 640px; border: 0; background: #fff; }

/* VLC sessions: cards filled from /api/vlc-sessions (the "VLC Schedule" Google Calendar) */
.vlc-sessions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; text-align: left; }
.vlc-session { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px; border-radius: 14px; background: #fff;
  border: 1px solid #dfe9ec; box-shadow: 0 10px 28px rgba(0, 66, 80, .08); }
.vlc-session--skeleton { min-height: 330px; border-color: transparent; box-shadow: none;
  background: linear-gradient(100deg, #f2f7f8 30%, #e6f0f2 50%, #f2f7f8 70%) 0 0 / 300% 100%; animation: vlc-shimmer 1.4s linear infinite; }
@keyframes vlc-shimmer { to { background-position: -300% 0; } }
.vlc-session__name { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--teal-ink); text-transform: none; letter-spacing: 0; }
.vlc-session__dates { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: #1f2a30; }
.vlc-session__dates svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--blue-ink); }
.vlc-session__topics { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid #e6eef0; display: flex; flex-direction: column; gap: 9px; }
.vlc-session__topics li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.45; color: #1f2a30; }
.vlc-session__topics li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.vlc-session__topics a { color: inherit; text-decoration: none; }
.vlc-session__topics a:hover { color: var(--blue-ink); text-decoration: underline; }
.vlc-session__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 10px; }
.vlc-session__register { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 26px; border-radius: 999px;
  background: var(--grad); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; letter-spacing: .02em; transition: background .2s; }
.vlc-session__register:hover { background: var(--grad-rev); }
.vlc-session__pdf { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--blue-ink); text-decoration: none; }
.vlc-session__pdf svg { width: 18px; height: 18px; }
.vlc-session__pdf:hover span { text-decoration: underline; }
.vlc-sessions-contact { margin-top: 20px; font-size: 15px; color: #33434b; text-align: center; }
.vlc-sessions-note { grid-column: 1 / -1; font-size: 15px; color: #33434b; text-align: center; }
.vlc-sessions-contact a, .vlc-sessions-note a { color: var(--blue-ink); font-weight: 600; }
.vlc-sessions-all { margin-top: 22px; text-align: center; }
.vlc-sessions-all .btn--submit { align-self: center; min-width: 220px; }
@media (max-width: 767px) {
  .vlc-sessions { grid-template-columns: 1fr; gap: 18px; }
  .vlc-session { padding: 22px 20px; }
  .vlc-session--skeleton { min-height: 300px; }
}

/* /vlc-calendar: every upcoming session, then the Google Calendar itself */
.vlc-cal { padding: 64px 20px 84px; background: linear-gradient(180deg, var(--header-bg) 0, #fff 440px); }
.vlc-cal__inner { max-width: 1080px; margin: 0 auto; }
.vlc-cal__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink); }
.vlc-cal h1 { margin-top: 8px; font-size: clamp(30px, 4vw, 44px); color: #1f2a30; }
.vlc-cal__lead { max-width: 720px; margin: 14px 0 32px; font-size: 17px; color: #33434b; }
.vlc-cal__h2 { margin: 60px 0 18px; font-size: 26px; color: var(--teal-ink); scroll-margin-top: 110px; }

/* Registration popup (components.js builds it; bottom sheet on phones) */
html.vlc-pop-open { overflow: hidden; }
.vlc-pop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vlc-pop__scrim { position: absolute; inset: 0; background: rgba(8, 32, 40, .55); opacity: 0; transition: opacity .25s; }
.vlc-pop__panel { position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 34px 32px 28px;
  border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgba(0, 40, 50, .28); opacity: 0; transform: translateY(16px);
  transition: opacity .25s, transform .25s; outline: none; }
.vlc-pop.is-open .vlc-pop__scrim, .vlc-pop.is-open .vlc-pop__panel { opacity: 1; }
.vlc-pop.is-open .vlc-pop__panel { transform: none; }
.vlc-pop__x { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: #33434b; cursor: pointer; }
.vlc-pop__x:hover { background: #eef5f6; }
.vlc-pop__x svg { width: 22px; height: 22px; }
.vlc-pop__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink); }
.vlc-pop__h { margin: 6px 44px 18px 0; font-size: 24px; line-height: 1.25; color: #1f2a30; text-transform: none; letter-spacing: 0; }
.vlc-pop__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vlc-pop__list a, .vlc-pop__list div { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: center; padding: 14px 16px;
  border: 1px solid #dfe9ec; border-radius: 12px; background: linear-gradient(135deg, #f3fbfb 0%, #f1f8fc 100%); color: inherit;
  text-decoration: none; transition: border-color .2s, transform .2s; }
.vlc-pop__list a:hover { border-color: var(--teal); transform: translateY(-1px); }
.vlc-pop__name { font-weight: 700; color: var(--teal-ink); }
.vlc-pop__dates { grid-row: 2; font-size: 15px; color: #1f2a30; }
.vlc-pop__pdf { grid-row: 1 / 3; grid-column: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--blue-ink); }
.vlc-pop__pdf svg { width: 20px; height: 20px; }
.vlc-pop__blurb { margin-top: 18px; font-size: 15px; line-height: 1.6; color: #33434b; }
.vlc-pop__contact { margin-top: 12px; font-size: 15px; line-height: 1.6; color: #1f2a30; }
.vlc-pop__contact a { color: var(--blue-ink); font-weight: 600; }
.vlc-pop__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; font-weight: 600; color: var(--blue-ink); text-decoration: none; }
.vlc-pop__all svg { width: 18px; height: 18px; transition: transform .2s; }
.vlc-pop__all:hover svg { transform: translateX(3px); }
@media (max-width: 600px) {
  .vlc-pop { align-items: flex-end; padding: 0; }
  .vlc-pop__panel { width: 100%; max-height: 88vh; padding: 28px 20px 22px; border-radius: 18px 18px 0 0; }
  .vlc-pop__h { font-size: 21px; }
}

/* ------------------------------------------------------------------ forms */
.lead-form { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.lead-form--compact .form-grid { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field--wide, .field--check { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; }
/* Live forms: light teal fields with placeholders, labels not shown (kept for
   screen readers). */
.field input, .field select, .field textarea { font: inherit; font-size: 15px; padding: 10px 12px; border: 2px solid #fff; border-radius: 0; background: #e5f6f6; color: var(--ink); width: 100%; }
.field:not(.field--check) > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field select:invalid, .field select option[value=""] { color: #6b7a80; }
.field textarea { resize: vertical; }
.field--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.field--check input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }
.field--check label { font-weight: 400; }
.req { color: #b3261e; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #b3261e; }
.btn--submit { align-self: flex-start; min-width: 180px; min-height: 50px; text-transform: uppercase; }
.btn--submit[disabled] { opacity: .7; cursor: wait; }
.form-error { color: #b3261e; font-size: 14px; }
.form-success { background: #eaf6ef; border-left: 4px solid var(--green); padding: 12px 14px; }
.lead-form.is-sent .form-grid, .lead-form.is-sent .btn--submit { display: none; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: #fff; border-top: 1px solid rgba(0,0,0,.04); }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; padding: 85px 58px 40px; max-width: 1440px; margin: 0 auto; }
.footer-brand img { width: 255px; max-width: 100%; margin-bottom: 20px; }
.footer-col p { font-size: 15px; }
.footer-title { font-size: 20px; font-weight: 700; color: var(--green); margin-bottom: 18px; line-height: 1.3; }
.footer-contact, .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-contact a { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-size: 15px; }
.footer-contact svg { width: 18px; height: 18px; color: var(--teal); flex: 0 0 auto; }
.footer-links a { color: var(--ink); text-decoration: none; font-size: 15px; }
.footer-links a:hover, .footer-contact a:hover { color: var(--blue-ink); }
.footer-links a[aria-current] { color: var(--blue-ink); }
.site-footer .lead-form { margin-top: 16px; }
.lead-form--compact .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead-form--compact .field input { background: #e5f6f6; border: 2px solid #fff; border-radius: 0; height: 40px; padding: 0 10px; font-size: 16px; }
.lead-form--compact .btn--submit { min-width: 176px; min-height: 45px; border-radius: 5px; font-weight: 400; }
.footer-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 58px 30px; max-width: 1440px; margin: 0 auto; }
.footer-bar p { font-size: 14px; }
.social { display: flex; gap: 10px; }

/* ------------------------------------------------------------------ blog */
.blog-post-hero { background: #4a4a4a; color: #fff; padding: 46px 20px 50px; }
.blog-post-hero-content { max-width: 1160px; margin: 0 auto; }
.blog-post-hero h1 { font-size: 40px; font-weight: 700; text-transform: uppercase; line-height: 1.3; color: #fff; }
.blog-post-cat { display: none; }
.post-meta { margin-top: 22px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.post-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.share { max-width: 1160px; margin: 0 auto; padding: 22px 20px 0; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--green); }
.share a { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; align-items: center; justify-content: center; }
.share svg { width: 14px; height: 14px; }
.blog-post-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; max-width: 1160px; margin: 0 auto; padding: 28px 20px 80px; }
.blog-article { font-size: 15px; line-height: 1.75; min-width: 0; }
.blog-article > * + * { margin-top: 1.1em; }
.blog-article h2 { font-size: 30px; color: var(--green); text-transform: uppercase; font-weight: 700; margin-top: 1.6em; line-height: 1.3; }
.blog-article h3 { font-size: 22px; color: var(--green); font-weight: 600; margin-top: 1.4em; }
.blog-article h4 { font-size: 18px; font-weight: 700; margin-top: 1.3em; }
.blog-article ul, .blog-article ol { padding-left: 1.4em; }
.blog-article li + li { margin-top: .5em; }
.blog-article img { width: 100%; height: auto; border-radius: 4px; }
.blog-article figure figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.blog-article blockquote { border-left: 4px solid var(--teal); padding: 4px 0 4px 18px; font-style: italic; }
.blog-article .yt { margin-top: 1.4em; }
.blog-article table { border-collapse: collapse; width: 100%; font-size: 14px; }
.blog-article td, .blog-article th { border: 1px solid #dde4e6; padding: 8px 10px; vertical-align: top; }
.blog-sidebar { display: flex; flex-direction: column; gap: 22px; padding-top: 10px; }
.sidebar-card { display: flex; flex-direction: column; gap: 18px; }
.sidebar-head { font-weight: 700; font-size: 18px; color: var(--green); text-transform: uppercase; }
.sidebar-body { display: flex; flex-direction: column; gap: 18px; }
.sidebar-link { display: block; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); text-decoration: none; color: var(--ink); }
.sidebar-link img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sidebar-link span { display: block; padding: 14px 16px 4px; font-weight: 700; font-size: 15px; line-height: 1.4; }
.sidebar-link em { display: block; padding: 4px 16px 16px; font-style: normal; font-size: 13px; color: var(--muted); }
.sidebar-cta { background: var(--pale-blue); padding: 22px; text-align: center; }
.sidebar-cta-title { font-weight: 700; font-size: 18px; color: var(--green); margin-bottom: 8px; text-transform: uppercase; }
.sidebar-cta p { font-size: 14px; margin-bottom: 14px; }
.sidebar-cta a { display: inline-flex; padding: 10px 22px; background: var(--grad); color: #fff; border-radius: 15px; text-decoration: none; font-weight: 600; }

.blog-index-head { text-align: center; padding: 80px 20px 10px; }
.blog-index-head h1 { font-size: 40px; color: var(--ink); text-transform: uppercase; font-weight: 700; }
.blog-search { max-width: 1160px; margin: 0 auto; padding: 16px 20px 0; display: flex; justify-content: center; }
.blog-search input { font: inherit; font-size: 14px; padding: 11px 20px; border: 2px solid var(--green); border-radius: 999px; width: min(100%, 420px); }
.blog-filters { display: none; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1120px; margin: 0 auto; padding: 24px 20px 90px; }
.post-card { display: flex; flex-direction: column; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.14); text-decoration: none; color: var(--ink); transition: transform .2s ease-out; }
@media (hover: hover) { .post-card:hover { transform: translateY(-3px); } }
.post-card-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-body { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card-cat { display: none; }
.post-card-title { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--green-ink); }
.post-card-desc { font-size: 14px; line-height: 1.55; color: #555; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* The live list shows no dates; the element stays for My AI Editor's publisher. */
.post-card-meta { display: none; }
.post-card[hidden] { display: none; }


/* ------------------------------------------------------------------ /vlc topic explorer
   Redesign of "Explore our VLC topics" (Justin, 2026-10-18). */
.vt { background: linear-gradient(180deg, #fff 0%, var(--pale-blue) 100%); padding: 80px 20px 90px; }
.vt-inner { max-width: 1200px; margin: 0 auto; }
.vt-title { text-align: center; font-size: 36px; font-weight: 700; text-transform: uppercase; color: var(--blue-ink); letter-spacing: .01em; }
.vt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px auto 36px; }
.vt-chip { font: inherit; font-size: 15px; font-weight: 600; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--teal-ink); background: #fff; color: var(--teal-ink); cursor: pointer; transition: background .2s, color .2s; }
.vt-chip span { display: inline-block; min-width: 1.6em; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #e5f6f6; color: var(--teal-ink); font-size: 13px; }
.vt-chip[aria-pressed="true"] { background: var(--teal-ink); color: #fff; }
.vt-chip[aria-pressed="true"] span { background: rgba(255, 255, 255, .22); color: #fff; }
@media (hover: hover) { .vt-chip:hover { background: #e5f6f6; } .vt-chip[aria-pressed="true"]:hover { background: var(--teal-ink); } }
.vt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1180px) { .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt-card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 4px 18px rgba(0, 60, 80, .10); transition: transform .25s ease, box-shadow .25s ease; }
.vt-card[hidden] { display: none; }
.vt-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--pale-blue); }
.vt-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.vt-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.vt-tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-ink); background: #e5f6f6; padding: 4px 10px; border-radius: 999px; }
.vt-name { font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--green-ink); }
.vt-sub { font-size: 14.5px; line-height: 1.6; color: #444; }
.vt-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--blue-ink); }
.vt-more svg { width: 18px; height: 18px; transition: transform .25s ease; }
@media (hover: hover) {
  .vt-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0, 60, 80, .18); }
  .vt-card:hover .vt-img img { transform: scale(1.06); }
  .vt-card:hover .vt-more svg { transform: translateX(4px); }
}
.vt-card:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
.vt-cta { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.vt-cta-title { font-size: 22px; font-weight: 700; color: var(--green); }
.vt-cta-btn { background: var(--grad); color: #fff; border-radius: 15px; min-height: 50px; padding: 10px 28px; font-weight: 600; text-transform: uppercase; }
.vt-cta-btn:hover { background: var(--grad-rev); }
@media (max-width: 600px) {
  .vt { padding: 56px 16px 64px; }
  .vt-title { font-size: 26px; }
  .vt-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 20px -16px 24px; padding: 0 16px 6px; scrollbar-width: none; }
  .vt-chips::-webkit-scrollbar { display: none; }
  .vt-chip { flex: 0 0 auto; }
  .vt-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ------------------------------------------------------------------ 404 */
.notfound { text-align: center; padding: 110px 20px; }
.notfound h1 { font-size: 40px; color: var(--green); text-transform: uppercase; }
.notfound p { margin: 14px auto 28px; max-width: 560px; }
.notfound .links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ------------------------------------------------------------------ quote cards
   Evidence and impact. The section's own bottom padding is 0 on Duda (its
   slider stage made the space), so the cards carry the bottom spacing. */
.quotes { display: grid; grid-template-columns: repeat(var(--qn, 2), minmax(0, 1fr)); gap: 28px; width: 100%; max-width: 1100px;
  margin: 18px auto 72px; }
.quotes--3 { --qn: 3; }
.quote-card { position: relative; display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 40px 38px 32px; background: #fff;
  border-radius: 18px; box-shadow: 0 18px 44px rgba(0, 70, 95, .09); overflow: hidden; text-align: left;
  transition: transform .3s ease, box-shadow .3s ease; }
.quote-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad); }
.quote-card:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(0, 70, 95, .14); }
.quote-mark { display: block; height: 46px; font-family: Georgia, 'Times New Roman', serif; font-size: 110px; line-height: .9; color: var(--teal-large); }
.quote-card blockquote { margin: 0; flex: 1; }
.quote-card blockquote p { font-size: 21px; line-height: 1.55; font-weight: 500; color: #1f2a30; }
.quote-foot { display: flex; align-items: center; gap: 16px; }
.quote-avatar { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #eef3f5;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }
.quote-avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); transform-origin: 50% 24%; }   /* the photos are small figures on white */
.quote-rule { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(0,169,167,.45), rgba(0,142,203,0)); }
@media (max-width: 767px) {
  .quotes, .quotes--3 { grid-template-columns: 1fr; gap: 18px; margin: 4px auto 40px; }
  .quote-card { padding: 32px 24px 26px; gap: 16px; }
  .quote-mark { height: 36px; font-size: 86px; }
  .quote-card blockquote p { font-size: 18px; }
  .quote-avatar { width: 56px; height: 56px; }
}

/* ------------------------------------------------------------------ VLC registration (/vlc-register) */
.reg [hidden] { display: none !important; }   /* .btn, .reg__steps etc. set display, which beats the hidden attribute */
.reg { padding: 64px 20px 80px; background: linear-gradient(180deg, #f2fbfb 0%, #fff 340px); }
.reg__inner { max-width: 860px; margin: 0 auto; }
.reg__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink); text-align: center; }
.reg h1 { margin-top: 8px; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; color: var(--green-ink); text-align: center; text-transform: uppercase; }
.reg__lead { max-width: 640px; margin: 14px auto 0; font-size: 17px; line-height: 1.6; color: #33434b; text-align: center; }
.reg__steps { list-style: none; display: flex; justify-content: center; gap: 10px; margin: 34px 0 26px; padding: 0; counter-reset: none; }
.reg__steps li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #6b7a81; }
.reg__steps li + li::before { content: ''; width: 40px; height: 2px; margin-right: 0; background: #d5e2e6; }
.reg__steps span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: #e6eef0; color: #4a5a61; font-size: 14px; }
.reg__steps .is-current { color: #1f2a30; }
.reg__steps .is-current span { background: var(--grad); color: #fff; }
.reg__steps .is-done span { background: var(--teal-ink); color: #fff; }
.reg__form, .reg__done { background: #fff; border-radius: 18px; box-shadow: 0 18px 48px rgba(0, 70, 95, .1); padding: 36px 40px 30px; }
.reg__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.reg__h { display: block; padding: 0; margin: 0 0 16px; font-size: 22px; font-weight: 700; color: #1f2a30; }
.reg__h--sm { font-size: 17px; margin: 24px 0 12px; }
.reg__loading, .reg__note { font-size: 15px; color: #4a5a61; }
.reg__note { margin: 12px 0 4px; }
.reg__session-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.reg__session, .reg__topic, .reg__pill { position: relative; cursor: pointer; }
.reg__session input, .reg__topic input, .reg__pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reg__session { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 2px solid #dfe9ec; border-radius: 14px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.reg__session:hover { border-color: #9fd6d5; transform: translateY(-1px); }
.reg__session:has(input:checked) { border-color: var(--teal); box-shadow: 0 10px 26px rgba(0, 124, 122, .15); background: #f5fcfc; }
.reg__session:has(input:focus-visible), .reg__topic:has(input:focus-visible), .reg__pill:has(input:focus-visible) { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
.reg__session-wrap { display: flex; flex-direction: column; gap: 6px; }
.reg__session-wrap .reg__session { flex: 1; }
.reg__pdf { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 4px; font-size: 14px; font-weight: 600; color: var(--blue-ink); text-decoration: none; }
.reg__pdf svg { width: 18px; height: 18px; flex-shrink: 0; }
.reg__pdf:hover span:first-of-type { text-decoration: underline; }
.reg__summary .reg__pdf { margin-top: 10px; }
.reg__done .reg__pdf { margin-top: 6px; }
.reg__session-name { font-size: 18px; font-weight: 700; color: var(--teal-ink); }
.reg__session-dates { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #1f2a30; }
.reg__session-dates svg { width: 17px; height: 17px; color: var(--blue-ink); flex-shrink: 0; }
.reg__session-count { font-size: 13px; color: #5d6b72; }
.reg__topic-list { display: flex; flex-direction: column; gap: 10px; }
.reg__topic { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 2px solid #dfe9ec; border-radius: 12px; font-size: 16px; color: #1f2a30; transition: border-color .2s, background .2s; }
.reg__topic::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #9fb3ba; box-sizing: border-box; transition: border .15s; }
.reg__topic:hover { border-color: #9fd6d5; }
.reg__topic:has(input:checked) { border-color: var(--teal); background: #f5fcfc; }
.reg__topic:has(input:checked)::before { border: 6px solid var(--teal-ink); }
.reg__choice { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.reg__pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 2px solid #dfe9ec; border-radius: 999px; font-size: 15px; font-weight: 600; color: #33434b; transition: all .2s; }
.reg__pill:hover span { border-color: #9fd6d5; }
.reg__pill input:checked + span { border-color: var(--teal-ink); background: var(--teal-ink); color: #fff; }
.reg__check { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 16px; font-size: 15px; font-weight: 600; cursor: pointer; }
.reg__check input { width: 18px; height: 18px; accent-color: var(--teal-ink); }
.reg__team { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e6eef0; }
.reg__summary { margin-top: 22px; padding: 18px 22px; border-radius: 12px; background: #f2fbfb; }
.reg__summary .reg__h--sm { margin-top: 0; }
.reg__summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 15px; }
.reg__summary dt { font-weight: 600; color: #4a5a61; }
.reg__summary dd { margin: 0; color: #1f2a30; }
.reg__form .field--check { margin-top: 18px; }
.reg__nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid #e6eef0; }
.reg__nav .btn--submit { margin-left: auto; min-width: 200px; }
.reg__back { min-height: 44px; padding: 0 18px; border: 0; background: none; font-weight: 600; color: var(--blue-ink); cursor: pointer; }
.reg__back:hover { text-decoration: underline; }
.reg__done { text-align: center; }
.reg__done h2 { font-size: 30px; color: var(--green-ink); margin-bottom: 14px; }
.reg__done p { margin: 10px auto; max-width: 560px; font-size: 17px; color: #33434b; }
.reg__done .btn--submit { margin-top: 12px; }
.reg__help, .reg__done-help { margin-top: 20px; text-align: center; font-size: 15px; color: #4a5a61; }
.reg__help a, .reg__done-help a { color: var(--blue-ink); font-weight: 600; }
.vlc-pop__register { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 18px; border-radius: 999px;
  background: var(--grad); color: #fff; font-weight: 600; text-decoration: none; }
.vlc-pop__register:hover { background: var(--grad-rev); }
.vlc-pop__register svg { width: 18px; height: 18px; }
.reg-band { background: var(--grad); color: #fff; }
.reg-band__inner { max-width: 1200px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.reg-band__text { font-size: 17px; line-height: 1.5; }
.reg-band__text strong { margin-right: 6px; }
.reg-band .reg-band__btn { background: #fff; color: var(--teal-ink); border-color: #fff; flex-shrink: 0; }
.reg-band .reg-band__btn:hover { background: #e9f7f7; color: var(--teal-ink); }
@media (max-width: 767px) {
  .reg { padding: 40px 16px 56px; }
  .reg__form, .reg__done { padding: 24px 18px 22px; border-radius: 14px; }
  .reg__steps { gap: 6px; margin: 24px 0 18px; }
  .reg__steps li { font-size: 13px; gap: 6px; }
  .reg__steps li + li::before { width: 14px; }
  .reg__nav .btn--submit { min-width: 0; flex: 1; }
  .reg-band__inner { padding: 18px 16px; justify-content: center; text-align: center; }
  .reg-band__text span { display: block; }
}

.hero-cta { margin-top: 24px; }
@media (max-width: 767px) { .hero-cta { margin-top: 18px; } }

/* ------------------------------------------------------------------ tablet */

/* ------------------------------------------------------------------ phone and small tablet */
@media (max-width: 960px) {
  .header-inner { min-height: 72px; padding: 10px 16px; justify-content: space-between; }
  .header-social { display: none; }
  .header-phone { display: inline-flex; order: 1; }
  .nav-toggle { display: inline-flex; order: 3; }
  .brand { order: 2; }
  .brand img { width: 170px; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,.12); display: none; max-height: calc(100vh - 72px); overflow-y: auto; }
  .site-header.nav-open .site-nav { display: block; }
  .site-header.nav-open .nav-toggle svg:first-child { display: none; }
  .site-header.nav-open .nav-toggle svg + svg { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; padding: 8px 0 16px; }
  .nav-item { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid #eef2f3; }
  .nav-link { line-height: 48px; padding: 0 20px; font-size: 15px; }
  .nav-link.is-active { box-shadow: none; }
  .mega-trigger { width: 100%; justify-content: space-between; text-align: left; }
  .mega-trigger .caret { margin-right: 6px; }
  .nav-item.has-mega, .nav-item.has-mega--wide { position: static; }
  .mega, .has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega { position: static; transform: none; left: auto; width: 100%;
    border: 0; border-radius: 0; box-shadow: none; padding: 0 20px; background: #f6f9fa; max-height: 0; overflow: hidden; transition: none; }
  .has-mega.open .mega { max-height: 2400px; padding: 8px 20px 20px; }
  .has-mega:not(.open):hover .mega, .has-mega:not(.open):focus-within .mega { opacity: 0; visibility: hidden; }
  .mega::before { display: none; }
  .mega-cols--vlc, .mega-cols--ple { grid-template-columns: 1fr; width: auto; row-gap: 18px; }
  .mega-col a { min-height: 44px; align-items: center; padding: 8px 0 8px 12px; font-size: 15px; }
  .mega-cta { padding: 0; background: none; }
  .mega-cta-txt { display: none; }
  .mega-cta-btn { display: flex; width: 100%; min-height: 52px; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding: 56px 20px 30px; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-post-wrap { grid-template-columns: 1fr; }
}

/* Phones. Duda Flex keeps a separate phone layout; build.py reads it from the
   390px capture and sets --m-* properties and m-* classes per element. The
   min() fallbacks apply only where an element has no phone data. */
@media (max-width: 767px) {
  .m-ta-c { text-align: center; } .m-ta-l { text-align: left; } .m-ta-r { text-align: right; }
  .m-hide { display: none !important; }
  .d-hide { display: contents; }
  .fx--photo { min-height: var(--m-sh, calc(var(--sh) * .6)); }
  .fx--photo > .fx-g { min-height: 0; }
  .fx-g { gap: var(--m-gap, var(--gap, 0)); padding: var(--m-pt, min(var(--pt, 0px), 44px)) var(--m-pr, min(var(--pr, 0px), 16px)) var(--m-pb, min(var(--pb, 0px), 44px)) var(--m-pl, min(var(--pl, 0px), 16px)); }
  .fx-g.m-row { flex-direction: row; }
  .fx-g.m-col { flex-direction: column; }
  .fx-g.m-row > :is(.fx-g, .fx-w, .fx-text, *) { flex: 0 1 var(--m-w, auto); width: auto; max-width: 100%; }
  .fx-g.m-col > :is(.fx-g, .fx-w, .fx-text, *) { flex: 0 0 auto; width: var(--m-w, auto); max-width: 100%; }
  .fx-g.m-col > .fx-text { align-self: stretch; }
  .fx-g.m-col > .fx-text[style*="--m-w:"] { align-self: auto; }
  .fx-g > .fx-fixed { flex-shrink: 0; }
  .fx-row > [style*="--ml:"] { margin-left: 0; }
  .fx-g > * { order: var(--m-order, 0); }
  .fx-g.mj-start { justify-content: flex-start; } .fx-g.mj-center { justify-content: center; } .fx-g.mj-end { justify-content: flex-end; }
  .fx-g.mj-between { justify-content: space-between; } .fx-g.mj-around { justify-content: space-around; } .fx-g.mj-evenly { justify-content: space-evenly; }
  .fx-g.ma-start { align-items: flex-start; } .fx-g.ma-center { align-items: center; } .fx-g.ma-end { align-items: flex-end; } .fx-g.ma-stretch { align-items: stretch; }
  .fx-g > .mas-st { align-self: stretch; }
  .fx-g > .mas-s { align-self: flex-start; } .fx-g > .mas-c { align-self: center; } .fx-g > .mas-e { align-self: flex-end; }
  /* fallbacks for elements without phone data */
  .fx-row.fx-stack:not(.m-row):not(.m-col) { flex-direction: column; align-items: stretch; }
  .fx-row.fx-stack:not(.m-row):not(.m-col) > * { flex: 0 0 auto; width: 100%; }
  .fx-row.fx-buttons:not(.m-col) { flex-wrap: wrap; }
  .fx-empty { display: none; }
  .fx-img { max-width: var(--m-iw, var(--iw)); aspect-ratio: var(--m-ar, var(--ar)); }
  .fx-graphic { width: var(--m-iw, var(--iw)); }
  .btn { white-space: normal; min-width: min(var(--m-bw, var(--bw, 0px)), 100%); min-height: var(--m-bh, var(--bh, 46px)); }
  .gallery { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
  .gallery--below .g-cap { min-height: 0; }
  .faq-item summary { font-size: 18px; padding: 14px 52px 14px 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .slider { padding: 0 34px; min-height: var(--m-slh, var(--slh, 0)); }
  .gcal iframe { height: 520px; }
  .blog-post-hero h1 { font-size: 26px; }
  .blog-article h2 { font-size: 22px; }
  .blog-index-head h1 { font-size: 28px; }
  .footer-bar { flex-direction: column; align-items: flex-start; padding: 16px 20px 28px; }
}

@media (max-width: 520px) {
  .gallery, .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Generated by _build/flexrender.py from the Duda capture. One rule per
   distinct text or button look on the live site. Do not hand-edit; change
   the generator or override below the generated block. */
.t05f22{font-size:16px;font-weight:400;line-height:2;color:#000000}
@media (max-width:767px){.t05f22{font-size:15px}}
.t06190{font-size:25px;font-weight:700;color:#ffffff}
@media (max-width:767px){.t06190{font-size:20px}}
.t0a0c3{font-size:36px;font-weight:600;line-height:1.2;text-transform:uppercase;color:#0b9444}
@media (max-width:767px){.t0a0c3{font-size:24px}}
.t12f70{font-size:16px;font-weight:400;line-height:2;color:#ffffff}
@media (max-width:767px){.t12f70{font-size:15px}}
.t16285{font-size:36px;font-weight:700;line-height:1.2;color:#0b9444}
@media (max-width:767px){.t16285{font-size:24px}}
.t1a399{font-size:16px;font-weight:400;color:#0a0a0a}
@media (max-width:767px){.t1a399{font-size:15px}}
.t1ea6d{font-size:16px;font-weight:400;color:#ffffff}
.t2ad37{font-size:25px;font-weight:700;color:#0b9444}
@media (max-width:767px){.t2ad37{font-size:18px}}
.t2be2c{font-size:36px;font-weight:400;text-transform:uppercase;color:#0b9444}
@media (max-width:767px){.t2be2c{font-size:24px}}
.t3057b{font-size:16px;font-weight:400;line-height:1.38;color:#ffffff}
@media (max-width:767px){.t3057b{font-size:15px}}
.t3e1c8{font-size:16px;font-weight:700;color:#ffffff}
@media (max-width:767px){.t3e1c8{font-size:15px}}
.t3f07c{font-size:18px;font-weight:700;color:#000000}
@media (max-width:767px){.t3f07c{font-size:20px}}
.t40f8f{font-size:25px;font-weight:700;color:#0b9444}
@media (max-width:767px){.t40f8f{font-size:20px}}
.t4f200{font-size:36px;font-weight:700;text-transform:uppercase;color:#0b9444}
@media (max-width:767px){.t4f200{font-size:24px}}
.t52699{font-size:40px;font-weight:700;line-height:1.19;color:#0b9444}
@media (max-width:767px){.t52699{font-size:36px}}
.t5306c{font-size:40px;font-weight:700;line-height:1.2;text-transform:uppercase;color:#ffffff}
@media (max-width:767px){.t5306c{font-size:30px}}
.t54014{font-size:16px;font-weight:400;line-height:1.2;color:#000000}
@media (max-width:767px){.t54014{font-size:15px}}
.t54241{font-size:20px;font-weight:700;color:#0b9444}
.t60624{font-size:16px;font-weight:700;color:#000000}
@media (max-width:767px){.t60624{font-size:15px}}
.t6163f{font-size:40px;font-weight:700;text-transform:uppercase;color:#ffffff}
@media (max-width:767px){.t6163f{font-size:32px}}
.t67ded{font-size:36px;font-weight:600;line-height:1.2;text-transform:uppercase;color:#ffffff}
@media (max-width:767px){.t67ded{font-size:24px}}
.t76aac{font-size:18px;font-weight:400;color:#ffffff}
@media (max-width:767px){.t76aac{font-size:16px}}
.t898bd{font-size:25px;font-weight:600;line-height:1.2;color:#0b9444}
@media (max-width:767px){.t898bd{font-size:20px}}
.t8b4a9{font-size:36px;font-weight:700;text-transform:uppercase;color:#ffffff}
@media (max-width:767px){.t8b4a9{font-size:24px}}
.t8f057{font-size:16px;font-weight:400;color:#000000}
@media (max-width:767px){.t8f057{font-size:15px}}
.t92617{font-size:36px;font-weight:600;text-transform:uppercase;color:#0b9444}
@media (max-width:767px){.t92617{font-size:24px}}
.t9c66c{font-size:20px;font-weight:700;color:#008ecb}
@media (max-width:767px){.t9c66c{font-size:15px}}
.t9dbe8{font-size:20px;font-weight:700;color:#000000}
@media (max-width:767px){.t9dbe8{font-size:15px}}
.t9e1b9{font-size:16px;font-weight:700;line-height:2;color:#0072a3}
@media (max-width:767px){.t9e1b9{font-size:15px}}
.ta0ec3{font-size:18px;font-weight:700;color:#087a37}
@media (max-width:767px){.ta0ec3{font-size:20px}}
.ta1d21{font-size:16px;font-weight:400;color:#000000}
.tab600{font-size:15px;font-weight:700;color:#0072a3}
.tb45ed{font-size:36px;font-weight:700;line-height:1.2;text-transform:uppercase;color:#008ecb}
@media (max-width:767px){.tb45ed{font-size:24px}}
.tb7604{font-size:16px;font-weight:400;color:#000000}
.tbb904{font-size:40px;font-weight:700;line-height:1.19;color:#0b9444}
@media (max-width:767px){.tbb904{font-size:30px}}
.tc20e0{font-size:20px;font-weight:700;text-transform:uppercase;color:#ffffff}
@media (max-width:767px){.tc20e0{font-size:14px}}
.tc3d92{font-size:16px;font-weight:700;line-height:2;color:#000000}
@media (max-width:767px){.tc3d92{font-size:15px}}
.tc53c1{font-size:16px;font-weight:400;line-height:2;color:#0a0a0a}
@media (max-width:767px){.tc53c1{font-size:15px}}
.tc8357{font-size:36px;font-weight:700;line-height:1.2;text-transform:uppercase;color:#0b9444}
@media (max-width:767px){.tc8357{font-size:24px}}
.tc8d57{font-size:16px;font-weight:400;color:#ffffff}
@media (max-width:767px){.tc8d57{font-size:15px}}
.tdcbdf{font-size:40px;font-weight:700;text-transform:uppercase;color:#ffffff}
@media (max-width:767px){.tdcbdf{font-size:26px}}
.te180b{font-size:36px;font-weight:700;line-height:1.2;text-transform:uppercase;color:#ffffff}
@media (max-width:767px){.te180b{font-size:24px}}
.tf82c4{font-size:18px;font-weight:700;color:#ffffff}
@media (max-width:767px){.tf82c4{font-size:16px}}
.tf9a94{font-size:25px;font-weight:400;color:#ffffff}
@media (max-width:767px){.tf9a94{font-size:16px}}
.btn.b3c5c7{background:#ffffff;color:#007c7a;border-radius:15px;font-size:16px;font-weight:400;border:1px solid rgb(0, 169, 167)}
.btn.b3c5c7:hover{background:var(--teal-ink);color:#fff;border-color:transparent}
.btn.b7ce4f{background:var(--grad);color:#ffffff;border-radius:15px;font-size:16px;font-weight:400}
.btn.b7ce4f:hover{background:var(--grad-rev)}
.btn.ba022f{background:#ffffff;color:#007c7a;border-radius:15px;font-size:16px;font-weight:400}
.btn.ba022f:hover{background:var(--teal-ink);color:#fff;border-color:transparent}
.btn.bca982{background:#ffffff;color:#007c7a;border-radius:15px;font-size:16px;font-weight:500}
.btn.bca982:hover{background:var(--teal-ink);color:#fff;border-color:transparent}
.btn.bcc8b7{background:#ffffff;color:#0072a3;border-radius:15px;font-size:16px;font-weight:400}
.btn.bcc8b7:hover{background:var(--teal-ink);color:#fff;border-color:transparent}
