/* Base: reset, typography, links, focus, the primary button and the shared controls. Every value is a token from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
html.is-locked { overflow: hidden; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
li, summary { text-wrap: pretty; }
a { color: var(--teal); text-underline-offset: .2em; }
a.is-hover { color: var(--teal-deep); }
@media (any-hover: hover) { a:hover { color: var(--teal-deep); } }
:focus-visible { outline: 0.1875rem solid var(--teal); outline-offset: 0.1875rem; border-radius: 0.125rem; }
.is-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--mint-light); }
.is-band :focus-visible { outline-color: #fff; }
.nowrap-parent > * { display: inline-block; }
.wrap { width: 100%; max-width: var(--measure-wrap); margin-inline: auto; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.caption { font-size: var(--fs-caption); line-height: 1.5; margin: 0; color: var(--muted); }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.55; margin: 0; }
.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.02; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.1; font-weight: 800; margin: 0; }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; margin: 0; }
.text-link { border-bottom: 1px solid var(--control-border); }
.text-link:hover { border-bottom-color: var(--teal); }

/* Gradient text: display sizes only (24px bold and up). Below that, plain colour. */
.gt { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-dark { background: var(--grad-text-dark); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (forced-colors: active) { .gt, .gt-dark { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .gt { color: var(--teal); } .gt-dark { color: var(--mint-light); } }

/* Eyebrow */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.2; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.is-dark .eyebrow { color: var(--mint-light); }

/* Diamond bullets: every unordered list that has no class of its own. Chrome lists (menus, footer) carry a class and reset their markers. */
ul:not([class]), ul.wp-block-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
ul:not([class]) > li, ul.wp-block-list > li { position: relative; padding-left: 2rem; }
ul:not([class]) > li::before, ul.wp-block-list > li::before { content: ""; position: absolute; left: .2rem; top: .6em; width: .65rem; height: .65rem; transform: rotate(45deg); border-radius: .12rem; background: linear-gradient(135deg, #0A5655, #14B8B2); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--teal) 14%, transparent); transition: transform .3s, box-shadow .3s; }
ul:not([class]) > li.is-hover::before, ul.wp-block-list > li.is-hover::before { transform: rotate(225deg) scale(1.15); box-shadow: 0 0 0 .32rem color-mix(in srgb, var(--teal) 22%, transparent); }
@media (any-hover: hover) { ul:not([class]) > li:hover::before, ul.wp-block-list > li:hover::before { transform: rotate(225deg) scale(1.15); box-shadow: 0 0 0 .32rem color-mix(in srgb, var(--teal) 22%, transparent); } }

/* Primary button: teal, white on teal; the shine sweeps and the button lifts on hover, the arrow slides. On a dark section it is mint; on the teal band it is white. */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.75rem; padding: .8rem 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; background: var(--teal); color: var(--on-teal); border: 1px solid var(--teal); border-radius: var(--radius); transition: background .2s, border-color .2s, color .2s, transform .25s, box-shadow .25s; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.btn .icon { transition: transform .25s; }
.btn.is-hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--on-teal); transform: translateY(-.15rem); box-shadow: var(--glow); }
.btn.is-hover::after { transform: translateX(120%); transition: transform .7s ease; }
.btn.is-hover .icon { transform: translateX(.25rem); }
@media (any-hover: hover) {
  .btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--on-teal); transform: translateY(-.15rem); box-shadow: var(--glow); }
  .btn:hover::after { transform: translateX(120%); transition: transform .7s ease; }
  .btn:hover .icon { transform: translateX(.25rem); }
}
.btn.btn-ghost { background: transparent; color: var(--teal); }
.btn.btn-ghost.is-hover { background: var(--tint-2); color: var(--teal-deep); border-color: var(--teal-deep); }
@media (any-hover: hover) { .btn.btn-ghost:hover { background: var(--tint-2); color: var(--teal-deep); border-color: var(--teal-deep); } }
.btn-sm { min-height: 2.5rem; padding: .6rem 1.15rem; }
.btn-lg { min-height: 3.25rem; padding: .95rem 1.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }
.btn .cta-label, .btn .cta-label > span { color: inherit; }
.btn .cta-label > span { display: inline-block; }
.is-dark .btn { background: var(--mint); border-color: var(--mint); color: #06201F; }
.is-dark .btn.is-hover { background: var(--mint-light); border-color: var(--mint-light); color: #06201F; box-shadow: 0 1rem 2.25rem -.75rem rgba(79, 195, 192, .6); }
@media (any-hover: hover) { .is-dark .btn:hover { background: var(--mint-light); border-color: var(--mint-light); color: #06201F; box-shadow: 0 1rem 2.25rem -.75rem rgba(79, 195, 192, .6); } }
.is-dark .btn.btn-ghost { background: transparent; color: var(--off); border-color: rgba(237, 239, 236, .55); box-shadow: none; }
.is-dark .btn.btn-ghost.is-hover { background: rgba(237, 239, 236, .1); border-color: var(--off); color: #fff; box-shadow: none; }
@media (any-hover: hover) { .is-dark .btn.btn-ghost:hover { background: rgba(237, 239, 236, .1); border-color: var(--off); color: #fff; box-shadow: none; } }
.is-band .btn { background: #fff; border-color: #fff; color: var(--teal-deep); }
.is-band .btn.is-hover { background: #EDFFFD; border-color: #EDFFFD; color: var(--teal-deep); box-shadow: 0 1rem 2rem -.75rem rgba(0, 0, 0, .5); }
@media (any-hover: hover) { .is-band .btn:hover { background: #EDFFFD; border-color: #EDFFFD; color: var(--teal-deep); box-shadow: 0 1rem 2rem -.75rem rgba(0, 0, 0, .5); } }

/* Shared controls (plain inputs; the floating-label field is sections/field.css) */
:is(input, textarea, select).input { min-height: 3.25rem; padding: 0 1.25rem; width: 100%; background: var(--panel); color: var(--ink); font: inherit; font-size: 1.125rem; border: 1px solid var(--control-border); border-radius: var(--radius); }
.input::placeholder { color: var(--muted); opacity: 1; }
:is(input, textarea, select).input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
textarea.input { height: auto; min-height: 7rem; padding: .875rem 1.25rem; line-height: 1.5; resize: vertical; }
.panel { padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.heading-tight { margin: 1rem 0 3rem; } .heading-wide { margin: 1rem 0 3.5rem; } .heading-measure { max-width: 56rem; }

/* Skip link (first focusable element) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .5rem 1rem; background: var(--ink); color: var(--off); font-family: var(--font-display); }
.skip-link:focus { left: 1rem; top: 1rem; }

/* GeneratePress layout wrappers. We use its hooks but not its container, sidebar or content padding. */
.site.grid-container, #page, .site-content { max-width: none; width: 100%; }
.site-content { display: block; padding: 0; }
.content-area, .site-main { width: 100%; float: none; margin: 0; padding: 0; }
/* Header, #page and the footer wrapper are siblings of body: #page grows so the footer stays at the bottom of a short page (404, no results). */
body.rr-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.rr-shell > #page { flex: 1 0 auto; display: flex; flex-direction: column; }
body.rr-shell > #page > .site-content { flex: 1 0 auto; }
.separate-containers .site-main { margin: 0; }
.site-main > * { margin-bottom: 0; }

/* Motion: every animation and transition is off when the visitor asks for less motion. */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Listing items (index.php, archive.php, search.php) */
.rr-post-item { padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.rr-post-item h2 a:hover { border-bottom: 1px solid var(--teal); }
.grecaptcha-badge { visibility: hidden !important; }