/* ==========================================================================
   Base / global styles
   Ported verbatim (same selectors, same values) from the original theme's
   compiled modules.min.css reset + base typography block, so the site's
   basic look (body font/color, heading sizes/letter-spacing, link colors,
   list/table resets) no longer depends on that file being loaded.
   ========================================================================== */

a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center,
cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3,
h4, h5, h6, html, i, iframe, ins, kbd, label, legend, li, object, ol, p, pre,
q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot,
th, thead, tr, tt, u, ul, var {
	background: 0 0;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	outline: 0;
}

article, aside, details, figcaption, figure, footer, header, nav, section {
	display: block;
}

del { text-decoration: line-through; }

table {
	border-collapse: collapse;
	border-spacing: 0;
	border: medium none;
	vertical-align: middle;
	width: 100%;
}
table th { border: 0; padding: 5px 7px; text-align: center; }
table td { padding: 5px 10px; text-align: center; }
table tbody tr, table thead tr { border: 1px solid #e1e1e1; }

a img { border: none; }
.wp-caption, img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

.clearfix:after, .clearfix:before { content: " "; display: table; }
.clearfix:after { clear: both; }
.clear:after { clear: both; content: ""; display: block; }

html { overflow-y: scroll !important; }
body {
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 27px;
	color: #6c6c6c;
	background-color: #fff;
	overflow-x: hidden !important;
	-webkit-font-smoothing: antialiased;
}

h1 { font-family: "Open Sans Condensed", sans-serif; font-size: 38px; line-height: 1.315789473684211em; font-weight: 300; letter-spacing: 15px; color: #232323; }
h2 { font-family: "Open Sans Condensed", sans-serif; font-size: 35px; line-height: 1.342857142857143em; font-weight: 300; letter-spacing: 14px; color: #232323; }
h3 { font-family: "Open Sans Condensed", sans-serif; font-size: 26px; line-height: 1.461538461538462em; font-weight: 300; letter-spacing: 7px; color: #232323; }
h4 { font-family: Abel, sans-serif; font-size: 18px; line-height: 1.666666666666667em; font-weight: 400; letter-spacing: 5px; color: #6c6c6c; }
h5 { font-family: "Open Sans Condensed", sans-serif; font-size: 17px; line-height: 1.705882352941176em; font-weight: 300; letter-spacing: 5px; color: #232323; }
h6 { font-family: Abel, sans-serif; font-size: 12px; line-height: 1.666666666666667em; font-weight: 400; letter-spacing: 1px; color: #6c6c6c; }
h1, h2, h3, h4, h5, h6 { margin: 20px 0; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #6c6c6c; }

a, p a {
	color: #6c6c6c;
	text-decoration: none;
	transition: color 0.2s ease-out;
}
a:hover, p a:hover { color: #232323; }

p { margin: 10px 0; }
input[type="submit"] { -webkit-appearance: none; }

ol, ul { list-style-position: inside; margin: 15px 0; }
ol ol, ol ul, ul ol, ul ul { margin: 0; padding: 0 0 0 15px; }

pre {
	background-color: #fff;
	padding: 15px;
	max-width: 100%;
	white-space: pre-wrap;
	word-wrap: break-word;
	margin: 15px 0;
}

dt { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
dd { margin-bottom: 15px; }

sub, sup { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; }
sub { top: 0.5ex; }
sup { bottom: 0.5ex; }

.wp-caption-text { margin: 0; font-style: italic; }

:root {
	--wp-block-synced-color: #7a00df;
	--wp-block-synced-color--rgb: 122, 0, 223;
	--wp-bound-block-color: var(--wp-block-synced-color);
	--wp-editor-canvas-background: #ddd;
	--wp-admin-theme-color: #007cba;
	--wp-admin-theme-color--rgb: 0, 124, 186;
	--wp-admin-theme-color-darker-10: #006ba1;
	--wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
	--wp-admin-theme-color-darker-20: #005a87;
	--wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
	--wp-admin-border-width-focus: 2px
}

@media (min-resolution:192dpi) {
	:root {
		--wp-admin-border-width-focus: 1.5px
	}
}

.wp-element-button {
	cursor: pointer
}

:root .has-very-light-gray-background-color {
	background-color: #eee
}

:root .has-very-dark-gray-background-color {
	background-color: #313131
}

:root .has-very-light-gray-color {
	color: #eee
}

:root .has-very-dark-gray-color {
	color: #313131
}

:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
	background: linear-gradient(135deg, #00d084, #0693e3)
}

:root .has-purple-crush-gradient-background {
	background: linear-gradient(135deg, #34e2e4, #4721fb 50%, #ab1dfe)
}

:root .has-hazy-dawn-gradient-background {
	background: linear-gradient(135deg, #faaca8, #dad0ec)
}

:root .has-subdued-olive-gradient-background {
	background: linear-gradient(135deg, #fafae1, #67a671)
}

:root .has-atomic-cream-gradient-background {
	background: linear-gradient(135deg, #fdd79a, #004a59)
}

:root .has-nightshade-gradient-background {
	background: linear-gradient(135deg, #330968, #31cdcf)
}

:root .has-midnight-gradient-background {
	background: linear-gradient(135deg, #020381, #2874fc)
}

:root {
	--wp--preset--font-size--normal: 16px;
	--wp--preset--font-size--huge: 42px
}

.has-regular-font-size {
	font-size: 1em
}

.has-larger-font-size {
	font-size: 2.625em
}

.has-normal-font-size {
	font-size: var(--wp--preset--font-size--normal)
}

.has-huge-font-size {
	font-size: var(--wp--preset--font-size--huge)
}

.has-text-align-center {
	text-align: center
}

.has-text-align-left {
	text-align: left
}

.has-text-align-right {
	text-align: right
}

.has-fit-text {
	white-space: nowrap !important
}

#end-resizable-editor-section {
	display: none
}

.aligncenter {
	clear: both
}

.items-justified-left {
	justify-content: flex-start
}

.items-justified-center {
	justify-content: center
}

.items-justified-right {
	justify-content: flex-end
}

.items-justified-space-between {
	justify-content: space-between
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important
}

.screen-reader-text:focus {
	background-color: #ddd;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000
}

html :where(.has-border-color) {
	border-style: solid
}

html :where([style*=border-top-color]) {
	border-top-style: solid
}

html :where([style*=border-right-color]) {
	border-right-style: solid
}

html :where([style*=border-bottom-color]) {
	border-bottom-style: solid
}

html :where([style*=border-left-color]) {
	border-left-style: solid
}

html :where([style*=border-width]) {
	border-style: solid
}

html :where([style*=border-top-width]) {
	border-top-style: solid
}

html :where([style*=border-right-width]) {
	border-right-style: solid
}

html :where([style*=border-bottom-width]) {
	border-bottom-style: solid
}

html :where([style*=border-left-width]) {
	border-left-style: solid
}

html :where(img[class*=wp-image-]) {
	height: auto;
	max-width: 100%
}

:where(figure) {
	margin: 0 0 1em
}

html :where(.is-position-sticky) {
	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px)
}

@media screen and (max-width:600px) {
	html :where(.is-position-sticky) {
		--wp-admin--admin-bar--position-offset: 0px
	}
}

.is-small-text {
	font-size: .875em
}

.is-regular-text {
	font-size: 1em
}

.is-large-text {
	font-size: 2.25em
}

.is-larger-text {
	font-size: 3em
}

.has-drop-cap:not(:focus):first-letter {
	float: left;
	font-size: 8.4em;
	font-style: normal;
	font-weight: 100;
	line-height: .68;
	margin: .05em .1em 0 0;
	text-transform: uppercase
}

body.rtl .has-drop-cap:not(:focus):first-letter {
	float: none;
	margin-left: .1em
}

p.has-drop-cap.has-background {
	overflow: hidden
}

:root :where(p.has-background) {
	padding: 1.25em 2.375em
}

:where(p.has-text-color:not(.has-link-color)) a {
	color: inherit
}

p.has-text-align-left[style*="writing-mode:vertical-lr"],
p.has-text-align-right[style*="writing-mode:vertical-rl"] {
	rotate: 180deg
}

:root {
	--wp--preset--aspect-ratio--square: 1;
	--wp--preset--aspect-ratio--4-3: 4/3;
	--wp--preset--aspect-ratio--3-4: 3/4;
	--wp--preset--aspect-ratio--3-2: 3/2;
	--wp--preset--aspect-ratio--2-3: 2/3;
	--wp--preset--aspect-ratio--16-9: 16/9;
	--wp--preset--aspect-ratio--9-16: 9/16;
	--wp--preset--color--black: #000000;
	--wp--preset--color--cyan-bluish-gray: #abb8c3;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--pale-pink: #f78da7;
	--wp--preset--color--vivid-red: #cf2e2e;
	--wp--preset--color--luminous-vivid-orange: #ff6900;
	--wp--preset--color--luminous-vivid-amber: #fcb900;
	--wp--preset--color--light-green-cyan: #7bdcb5;
	--wp--preset--color--vivid-green-cyan: #00d084;
	--wp--preset--color--pale-cyan-blue: #8ed1fc;
	--wp--preset--color--vivid-cyan-blue: #0693e3;
	--wp--preset--color--vivid-purple: #9b51e0;
	--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%);
	--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
	--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgb(252, 185, 0) 0%, rgb(255, 105, 0) 100%);
	--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgb(255, 105, 0) 0%, rgb(207, 46, 46) 100%);
	--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
	--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
	--wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
	--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
	--wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
	--wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
	--wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
	--wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: 20px;
	--wp--preset--font-size--large: 36px;
	--wp--preset--font-size--x-large: 42px;
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2.25rem;
	--wp--preset--spacing--70: 3.38rem;
	--wp--preset--spacing--80: 5.06rem;
	--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
	--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
	--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
	--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
	--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
}

:where(.is-layout-flex) {
	gap: 0.5em;
}

:where(.is-layout-grid) {
	gap: 0.5em;
}

body .is-layout-flex {
	display: flex;
}

.is-layout-flex {
	flex-wrap: wrap;
	align-items: center;
}

.is-layout-flex> :is(*, div) {
	margin: 0;
}

body .is-layout-grid {
	display: grid;
}

.is-layout-grid> :is(*, div) {
	margin: 0;
}

:where(.wp-block-columns.is-layout-flex) {
	gap: 2em;
}

:where(.wp-block-columns.is-layout-grid) {
	gap: 2em;
}

:where(.wp-block-post-template.is-layout-flex) {
	gap: 1.25em;
}

:where(.wp-block-post-template.is-layout-grid) {
	gap: 1.25em;
}

.has-black-color {
	color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-color {
	color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-color {
	color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-color {
	color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-color {
	color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-color {
	color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-color {
	color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-color {
	color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-color {
	color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-color {
	color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-color {
	color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-color {
	color: var(--wp--preset--color--vivid-purple) !important;
}

.has-black-background-color {
	background-color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-background-color {
	background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-background-color {
	background-color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-background-color {
	background-color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-background-color {
	background-color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-background-color {
	background-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-background-color {
	background-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-background-color {
	background-color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-background-color {
	background-color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-background-color {
	background-color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-background-color {
	background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-background-color {
	background-color: var(--wp--preset--color--vivid-purple) !important;
}

.has-black-border-color {
	border-color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-border-color {
	border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-border-color {
	border-color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-border-color {
	border-color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-border-color {
	border-color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-border-color {
	border-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-border-color {
	border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-border-color {
	border-color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-border-color {
	border-color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-border-color {
	border-color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-border-color {
	border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-border-color {
	border-color: var(--wp--preset--color--vivid-purple) !important;
}

.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
	background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;
}

.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
	background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;
}

.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
	background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;
}

.has-luminous-vivid-orange-to-vivid-red-gradient-background {
	background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;
}

.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
	background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;
}

.has-cool-to-warm-spectrum-gradient-background {
	background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;
}

.has-blush-light-purple-gradient-background {
	background: var(--wp--preset--gradient--blush-light-purple) !important;
}

.has-blush-bordeaux-gradient-background {
	background: var(--wp--preset--gradient--blush-bordeaux) !important;
}

.has-luminous-dusk-gradient-background {
	background: var(--wp--preset--gradient--luminous-dusk) !important;
}

.has-pale-ocean-gradient-background {
	background: var(--wp--preset--gradient--pale-ocean) !important;
}

.has-electric-grass-gradient-background {
	background: var(--wp--preset--gradient--electric-grass) !important;
}

.has-midnight-gradient-background {
	background: var(--wp--preset--gradient--midnight) !important;
}

.has-small-font-size {
	font-size: var(--wp--preset--font-size--small) !important;
}

.has-medium-font-size {
	font-size: var(--wp--preset--font-size--medium) !important;
}

.has-large-font-size {
	font-size: var(--wp--preset--font-size--large) !important;
}

.has-x-large-font-size {
	font-size: var(--wp--preset--font-size--x-large) !important;
}

.wp-elements-9733180b7a03ab67798db81cb2e9bc4e a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--white);
}

.wp-block-button__link {
	color: #fff;
	background-color: #32373c;
	border-radius: 9999px;
	box-shadow: none;
	text-decoration: none;
	padding: calc(.667em + 2px) calc(1.333em + 2px);
	font-size: 1.125em
}

.wp-block-file__button {
	background: #32373c;
	color: #fff;
	text-decoration: none
}

/* Decorative wavy-line divider — was .vc_custom_1486732089482.
   Renamed while rebuilding the Contact page's wrapper markup; the
   min-height fix (see below) is unrelated and already correct. */
.wave-divider {
    padding-top: 5% !important;
    padding-bottom: 2% !important;
    /* The decorative wavy-line artwork in this background image sits at
       y:41-123px within the file, not at the top — the percentage padding
       above only reveals it in full on very wide (~1760px+) viewports, and
       shrinks below the point of showing anything at real mobile widths.
       This floor (padding included, via border-box) guarantees the full
       motif is always visible without changing the height anywhere the
       padding alone already exceeded it. */
    box-sizing: border-box;
    min-height: 130px;
    background-image: url(/assets/wave-divider-background.jpg?id=4229) !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
}

/* Site-wide announcement bar (src/components/layout/AnnouncementBar.astro) */
.announcement {
  width: 100%;
  background-color: #030C3D;
  color: #ffffff;
  position: relative;
  z-index: 120;
}

.announcement__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  text-align: center;
}

.announcement__eyebrow {
  display: block;
  font-family: 'Abel', sans-serif;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #03B7E0;
  margin-bottom: 6px;
}

.announcement__text {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.announcement__link,
.announcement__link:visited {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.announcement__link:hover,
.announcement__link:focus {
  color: #03B7E0;
}

@media (max-width: 768px) {
  .announcement__inner {
    padding: 12px 15px;
  }

  .announcement__eyebrow {
    font-size: 12px;
    letter-spacing: 3px;
  }

  .announcement__text {
    font-size: 14px;
  }
}


/* Contact form (src/components/forms/ContactForm.astro) — real values read
   from the live site's computed styles, not hand-derived from the theme's
   minified CSS (several rules there turned out to be scoped to ancestor
   classes this markup never had, so they never actually applied). */
.contact-form p {
	margin: 0;
}

.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	height: 1px;
	width: 1px;
	opacity: 0;
}

.contact-field {
	position: relative;
	display: inline-block;
	width: 100%;
	vertical-align: middle;
	margin: 0 0 15px;
	padding: 15px;
	font-family: Abel, sans-serif;
	font-size: 12px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0.16em;
	color: #232323;
	background-color: transparent;
	border: 1px solid #232323;
	border-radius: 0;
	outline: 0;
	-webkit-appearance: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease-in-out;
}
.contact-field::placeholder {
	color: #232323;
}

.contact-field--textarea {
	height: 137px;
	resize: none;
	overflow: hidden;
}

.contact-submit {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	margin: 0;
	font-family: Abel, sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0.3em;
	outline: 0;
	border-radius: 0;
	cursor: pointer;
	box-sizing: border-box;
	transition:
		color 0.2s ease-in-out,
		background-color 0.2s ease-in-out,
		border-color 0.2s ease-in-out;
	padding: 14px 25px;
	color: #232323;
	background-color: transparent;
	border: 1px solid #232323;
}
.contact-submit:hover {
	color: #fff;
	background-color: #232323;
	border-color: #232323;
}

.contact-response {
	margin-top: 15px;
}

.contact-form__row {
	margin-left: -8px;
	margin-right: -8px;
}
.contact-form__row:after,
.contact-form__row:before {
	content: " ";
	display: table;
}
.contact-form__row:after {
	clear: both;
}

.contact-form__col {
	position: relative;
	float: left;
	width: 50%;
	min-height: 1px;
	padding-left: 8px;
	padding-right: 8px;
	box-sizing: border-box;
}

/* Prints & cards promo band (src/components/PrintsAndCardsPromo.astro) */
.prints {
  background-color: #03B7E0;
  padding: 70px 0;
}

.prints__inner {
  display: flex;
  align-items: center;
  gap: 50px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.prints__media {
  flex: 0 0 38%;
  max-width: 38%;
}

.prints__img {
  display: block;
  width: 100%;
  height: auto;
}

.prints__body {
  flex: 1 1 auto;
}

.prints__eyebrow {
  display: block;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #030C3D;
  margin-bottom: 14px;
}

.prints__title {
  font-family: 'Abel', sans-serif;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #030C3D;
  margin: 0 0 18px;
}

.prints__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #1a2340;
  margin: 0 0 28px;
}

.prints__cta,
.prints__cta:visited {
  display: inline-block;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #030C3D;
  padding: 14px 32px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.prints__cta:hover,
.prints__cta:focus {
  background-color: #ffffff;
  color: #030C3D;
}

@media (max-width: 900px) {
  .prints {
    padding: 50px 0;
  }

  .prints__inner {
    flex-direction: column;
    gap: 30px;
    text-align: center;
    width: 90%;
  }

  .prints__media {
    flex: 0 0 auto;
    max-width: 320px;
  }

  .prints__title {
    font-size: 28px;
  }
}


/* Static homepage hero (src/pages/index.astro), replacing Revolution Slider */
/* Fluid scaling throughout: every size below interpolates continuously
   between a mobile value (at 375px viewport width) and a desktop value
   (at 1600px viewport width) via clamp(), rather than jumping at fixed
   breakpoints. This is deliberate — there's no separate tablet spec, so
   letting everything scale continuously avoids needing one. Desktop
   values (min-height 745px + the ~98px nav stack = 843px total slide
   height, tagline Abel/26px/41px line-height/570px container) and
   mobile values (tagline 17px/27px line-height/375px container) are
   both computed from real values, not guessed. */
.hero {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: clamp(480px, calc(398.878px + 21.6327vw), 745px);
  padding: clamp(40px, calc(12.449px + 7.3469vw), 130px)
    clamp(16px, calc(14.776px + 0.3265vw), 20px)
    clamp(40px, calc(21.633px + 4.898vw), 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero__deco {
  position: absolute;
  display: block;
  pointer-events: none;
}

.hero__deco--1 {
  left: 6%;
  top: clamp(116px, calc(96.408px + 5.2245vw), 180px);
  width: clamp(40px, calc(29.286px + 2.8571vw), 75px);
  height: clamp(40px, calc(29.286px + 2.8571vw), 75px);
}
.hero__deco--2 {
  left: 9%;
  top: clamp(45px, calc(37.347px + 2.0408vw), 70px);
  width: clamp(70px, calc(45.51px + 6.5306vw), 150px);
  height: clamp(74px, calc(48.286px + 6.8571vw), 158px);
}
.hero__deco--3 {
  right: 9%;
  top: clamp(58px, calc(48.204px + 2.6122vw), 90px);
  width: clamp(45px, calc(31.224px + 3.6735vw), 90px);
  height: clamp(55px, calc(37.857px + 4.5714vw), 111px);
}
.hero__deco--4 {
  right: 7%;
  top: clamp(206px, calc(171.102px + 9.3061vw), 320px);
  width: clamp(40px, calc(28.367px + 3.102vw), 78px);
  height: clamp(56px, calc(39.776px + 4.3265vw), 109px);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 1150px;
  margin: 0 auto;
}

.hero__title {
  margin: 0;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 300;
  font-size: clamp(52px, calc(25.061px + 7.1837vw), 140px);
  line-height: 1.2;
  color: #232323;
}

.hero__divider {
  display: block;
  margin: 20px auto;
  width: 180px;
  height: auto;
}

.hero__tagline {
  margin: 20px auto 0;
  max-width: clamp(375px, calc(315.306px + 15.9184vw), 570px);
  font-family: 'Abel', sans-serif;
  font-size: clamp(17px, calc(14.245px + 0.7347vw), 26px);
  font-weight: 300;
  line-height: clamp(27px, calc(22.714px + 1.1429vw), 41px);
  letter-spacing: 0;
  white-space: normal;
  color: #6c6c6c;
}

/* white-space is binary (can't clamp() it), so it's the one property
   that still needs a hard breakpoint: nowrap is the real desktop
   behavior (confirmed on develop) but overflows a mobile-width
   container, so it only switches on above the point where the fluid
   container is wide enough to hold each hard-coded <br> line. */
@media (min-width: 700px) {
  .hero__tagline {
    white-space: nowrap;
  }
}

/* ==========================================================================
   Phase 5 — Header / Nav / Footer / global chrome
   Owned replacement for the Koto theme's .eltdf-page-header / .eltdf-grid /
   .eltdf-page-footer / .eltdf-btt-light system. Values below were read as
   computed styles off the live production site (dark-header, grid-1300
   variant — the only variant this site actually uses), not guessed from the
   compiled theme CSS, which carries dozens of unused boxed/vertical-header
   variants alongside the real rules.
   ========================================================================== */

/* Page wrapper — was .eltdf-wrapper / .eltdf-wrapper-inner */
.page {
  position: relative;
  left: 0;
  z-index: 1000;
}
.page-inner {
  width: 100%;
  overflow: hidden;
}

/* Shared fixed-step responsive container — was .eltdf-grid.
   Kept as the theme's original hard breakpoints (not fluid) since this is
   the general-purpose content container other templates rely on too. */
.container {
  width: 1100px;
  max-width: 95%;
  margin: 0 auto;
}
@media (min-width: 1400px) {
  .container {
    width: 1300px;
  }
}
@media (max-width: 1200px) {
  .container {
    width: 950px;
  }
}
@media (max-width: 1024px) {
  .container {
    width: 768px;
  }
}
/* Below 768px, the theme's generic stepped ladder (600/420/300px) is
   overridden site-wide by a real, deliberate hand-authored fix already
   present on develop (a flat 96% instead) — but ONLY for elements that
   were originally .eltdf-grid/.eltdf-row-grid-section. Elements that were
   originally .eltdf-container-inner (the single blog post's container is
   the one template still using that kind) keep the theme's real stepped
   ladder instead — confirmed by comparing against develop directly, not
   assumed to be the same for every .container usage. */
@media (max-width: 768px) {
  .container {
    width: 96%;
    max-width: none;
  }
}
.container--stepped {
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .container--stepped {
    width: 600px;
  }
}
@media (max-width: 680px) {
  .container--stepped {
    width: 420px;
  }
}
@media (max-width: 480px) {
  .container--stepped {
    width: 300px;
  }
}

/* Top-of-content spacer — was .eltdf-full-width-inner/.eltdf-container-inner's
   own padding-top: 0px at desktop (>1024px), forced back to 40px !important
   at <=1024px by style_dynamic_responsive.css. Real, deliberate, and only
   visible at mobile/tablet widths — easy to miss by testing desktop only.
   Applied to whichever top-level wrapper sits directly under the page's
   hero/chrome on a given page (not universal on .container itself, since
   some pages, e.g. Contact/page-id-4198, have their own page-specific
   override forcing 0px at every width instead). */
@media (max-width: 1024px) {
  .content-top-pad {
    padding-top: 40px;
  }
}

/* Desktop header — was .eltdf-page-header .eltdf-menu-area etc.
   Note: the theme's separate "sticky header" duplicate nav (shown fixed
   above the viewport, meant to slide down on scroll-up) was dropped rather
   than ported — confirmed dead during Phase 3 testing (its trigger class
   never actually changes on scroll, on the live site as it stands today,
   not just on our branch), so there is nothing for it to slide into view. */
.header {
  position: relative;
  z-index: 110;
  background-color: #03b7e0;
}
@media (max-width: 1024px) {
  .header {
    display: none;
  }
}
.header__inner {
  padding: 0 40px;
  box-sizing: border-box;
}
.header__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 100px;
}
.header__logo {
  display: block;
}
.header__logo img {
  display: block;
  height: 90px;
  width: auto;
}
.header__nav {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
}
.header__nav-list {
  display: flex;
  align-items: center;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header__nav-link {
  position: relative;
  display: inline-block;
  flex: none;
  white-space: nowrap;
  padding: 0 55px 0 16px;
  font-family: "Abel", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 4.2px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
}
.header__nav-text {
  position: relative;
  display: inline-block;
}
.header__nav-text::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border-bottom: 1px solid currentColor;
  opacity: 0;
  transform: scale(0.6);
  transition:
    transform 0.56s cubic-bezier(0, 0.275, 0.125, 1),
    opacity 0.4s cubic-bezier(0, 0.275, 0.125, 1);
}
.header__nav-link:hover .header__nav-text::before,
.header__nav-link.is-active .header__nav-text::before {
  opacity: 0.5;
  transform: scale(1);
}

/* Mobile header bar — was .eltdf-mobile-header */
.mobile-header {
  display: none;
  position: relative;
  z-index: 101;
}
@media (max-width: 1024px) {
  .mobile-header {
    display: block;
  }
}
.mobile-header__bar {
  height: 100px;
  background-color: #fff;
  border-bottom: 1px solid #e1e1e1;
  box-sizing: border-box;
}
.mobile-header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100px;
}
.mobile-header__toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: #6c6c6c;
  cursor: pointer;
}
.mobile-header__toggle-lines {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 48px;
  height: 32px;
}
.mobile-header__toggle-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  border-radius: 12px;
}
.mobile-header__logo {
  display: block;
  align-self: start;
}
.mobile-header__logo img {
  display: block;
  height: 90px;
  width: auto;
}

/* Mobile nav slide toggle — was .eltdf-mobile-nav.
   The max-height is driven by src/layouts/BaseLayout.astro's vanilla-JS
   toggle script (replacing the theme's jQuery slideUp/slideDown). */
.mobile-header__nav {
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}
.mobile-header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e1e1e1;
}
.mobile-header__nav-item:last-child .mobile-header__nav-link {
  border-bottom: none;
}
.mobile-header__nav-link {
  position: relative;
  display: block;
  padding: 12px 0 12px 4px;
  margin: 0;
  color: #232323;
  font-family: "Open Sans Condensed", sans-serif;
  font-size: 13px;
  line-height: 27px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid #e1e1e1;
}
.mobile-header__nav-text {
  position: relative;
  display: inline-block;
  padding: 0 1px 0 3px;
  color: inherit;
}
.mobile-header__nav-text::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border-bottom: 1px solid currentColor;
  opacity: 0;
  transform: scale(0.6);
  transition:
    transform 0.56s cubic-bezier(0, 0.275, 0.125, 1),
    opacity 0.4s cubic-bezier(0, 0.275, 0.125, 1);
}
.mobile-header__nav-link:hover .mobile-header__nav-text::before,
.mobile-header__nav-link.is-active .mobile-header__nav-text::before {
  opacity: 1;
  transform: scale(1);
}

/* Footer — was .eltdf-page-footer / .eltdf-footer-top-holder.
   The theme's real koto-child/style.css rule sets margin-top: -8px here
   (confirmed against develop), but removed at the user's explicit
   request as an unwanted visual quirk rather than kept for fidelity. */
.footer__bar {
  background-color: #040c3d;
  padding: 76px 0;
  box-sizing: border-box;
}
.footer__text {
  margin: 0;
  font-family: "Abel", sans-serif;
  font-size: 14px;
  line-height: 27px;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
}

/* Back-to-top button — was #eltdf-back-to-top.eltdf-btt-light.
   The theme's on/off scroll-position toggle was already dead before this
   phase (confirmed during Phase 3b: it renders permanently "on" regardless
   of scroll position), so it's just always shown here rather than porting
   non-functional show/hide state. */
.back-to-top {
  position: fixed;
  right: 35px;
  bottom: 35px;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 67px;
  box-sizing: border-box;
  border: 1px solid #fff;
  color: #fff;
  overflow: hidden;
  text-decoration: none;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.back-to-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  transition: transform 0.5s cubic-bezier(0, 0.275, 0.125, 1);
}

/* Google sets the reCAPTCHA badge's z-index to 2000000000 by default,
   which puts it above every other fixed element on the page (e.g. the
   back-to-top button, also bottom-right). Cap it in line with the rest
   of the site's fixed-position stacking. */
.grecaptcha-badge {
  z-index: 9999;
}
.back-to-top:hover {
  color: #232323;
}
.back-to-top:hover::before {
  transform: scaleX(1);
}


/* Was .eltdf-content. modules.css's real rule set a white background-color
   "because of the uncovering footer" (its own comment) — a parallax
   footer-reveal effect this site's plain static footer never uses. That
   leftover white fill was the actual cause of the white gap reported
   between the contact page's map and the footer: whatever trailing space
   sits below the last child was being painted opaque white instead of
   just showing through to the page's own background. */
.page-content {
  background-color: transparent;
}
/* Was .uos-889ef02a94 (an inline-style-extraction hash name), applied
   alongside .eltdf-content only on the Home page. */
.page-content--home {
  margin-top: -100px;
}

/* ==========================================================================
   Phase 5b — Collection template (also covers the shared page-title band
   used by Blog listing and Category listing, and a reusable button style)
   Owned replacement for .eltdf-title/.page-title-block, the WPBakery
   vc_row/wpb_column wrappers in CollectionLayout.astro, and
   .eltdf-portfolio-list-holder's gallery grid + hover "shader" effect.
   Values read from computed styles on the live production /abstract/ page.
   ========================================================================== */

/* Shared page-title band — was .eltdf-title.page-title-block */
.page-title {
  position: relative;
  /* The row/container below can't be given height:100% themselves —
     percentage height against an auto-height ancestor (.container)
     resolves to nothing, leaving them at their content height and stuck
     at the top of this band instead of centered. Making this element
     the flex container instead sidesteps that entirely. */
  display: flex;
  align-items: center;
}
.page-title__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  box-sizing: border-box;
}
.page-title__heading {
  margin: 0;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 38px;
  letter-spacing: 7px;
  text-transform: uppercase;
}
.page-title__breadcrumbs {
  font-family: "Abel", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #232323;
  text-transform: uppercase;
  letter-spacing: 0.5em;
}
.page-title__breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.page-title__delimiter {
  display: inline-block;
}

/* Collection: shop CTA buttons (top and bottom of the grid) — was
   .eltdf-btn.eltdf-btn-solid.eltdf-btn-medium */
.btn {
  display: inline-block;
  box-sizing: border-box;
  padding: 17px 34px 17px 39px;
  font-family: "Abel", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 4.2px;
  color: #fff;
  background-color: #232323;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}
.btn:hover {
  color: #232323;
  background-color: #6cff6c;
}

.collection__shop-row {
  /* Matches js_composer.min.css's default .vc_column-inner side padding
     (15px) — this section is full-bleed to the viewport, not capped by
     .container like the header/footer, so that padding has to be
     applied directly here instead. */
  padding: 20px 15px;
  box-sizing: border-box;
  background-color: #fafafa;
  text-align: center;
}

/* Collection: the portfolio gallery grid — was .eltdf-portfolio-list-holder
   (float + negative-margin gutter technique) replaced with CSS Grid. */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 66px;
  /* Matches js_composer.min.css's default .vc_column-inner{padding-top:35px}
     — the shop-button rows above/below zero this out via their own
     vc_custom_* class, but the grid's row never had one, so this gap is
     real (present on develop) and was missing from the first pass here. */
  margin-top: 35px;
}
.collection-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1280px) {
  .collection-grid {
    gap: 30px;
  }
}
@media (max-width: 680px) {
  .collection-grid {
    grid-template-columns: 1fr;
  }
}

.collection-item {
  position: relative;
}
.collection-item__media {
  position: relative;
  overflow: hidden;
}
.collection-item__media img {
  display: block;
  width: 100%;
  height: auto;
}
.collection-item__text {
  padding: 28px 0 52px;
  text-align: center;
}
.collection-item__title {
  margin: 0;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 5px;
  color: #232323;
}
.collection-item__excerpt {
  margin: 3px 0 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 27px;
  color: #6c6c6c;
}

/* ==========================================================================
   Phase 5b — Blog template (listing grid + single post)
   Owned replacement for .eltdf-blog-list-holder (listing) and
   .eltdf-blog-holder/.eltdf-post-* (single post). Like Collection, this
   content is full-bleed to the viewport (.eltdf-blog-list-holder carries
   no side padding of its own) — confirmed via the same develop-worktree
   pixel comparison used for the Collection container fix, not assumed.
   ========================================================================== */

/* Blog listing grid — was .eltdf-blog-list-holder.eltdf-bl-boxed.eltdf-bl-three-columns */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 30px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}
.blog-card {
  /* The 30px gap between images comes from this per-card inset, not a
     grid column-gap — matches develop's .eltdf-bl-item{padding:0 15px}
     exactly (confirmed by comparing pixel positions), rather than an
     approximately-equivalent but differently-sized column. */
  box-sizing: border-box;
  padding: 0 15px;
}
.blog-card__media {
  display: block;
  position: relative;
}
.blog-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.blog-card__body {
  padding: 40px 30px;
  background-color: #f6f6f6;
}
.blog-card__meta {
  margin: 37px 0 11px;
  font-family: "Abel", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.4px;
  letter-spacing: 1.2px;
  color: #6c6c6c;
}
.blog-card__meta a {
  color: inherit;
  text-decoration: none;
}
.blog-card__meta-sep {
  margin: 0 4px;
}
.blog-card__title {
  display: block;
  margin: 0;
  font-family: "Open Sans Condensed", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 29px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #232323;
}
.blog-card__title a {
  color: inherit;
  text-decoration: none;
}
.blog-card__title a:hover {
  color: #6c6c6c;
}
.blog-card__excerpt {
  margin: 19px 0 0;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 27px;
  color: #6c6c6c;
}
.blog-card__cta {
  display: inline-block;
  margin-top: 23px;
  padding: 5px 1px 5px 3px;
  font-family: "Abel", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #232323;
  text-decoration: none;
}

/* Single post — was .eltdf-blog-holder/.eltdf-post-* */
.post__hero {
  margin: 0 0 40px;
}
.post__hero img {
  /* No forced width here on purpose — koto-child's real rule is
     width:auto + max-height:800px, so a naturally-narrower-than-1100px
     image (most of this site's portrait blog photos) stays at its
     natural size instead of being stretched to fill the container,
     centered via margin:auto. Forcing width:100% here was the actual
     cause of "images on post pages are too wide".
     Astro's <Image> adds real width/height attributes, which combined
     with max-height clamping the rendered height (but not the width)
     made object-fit's default "fill" non-uniformly squish portrait
     images — object-fit:contain plus an explicit width:auto keeps the
     real aspect ratio intact instead. */
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 800px;
  object-fit: contain;
}
.post__title {
  margin: 0;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 300;
  font-size: 35px;
  line-height: 42px;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: #232323;
}
.post__meta {
  margin: 5px 0 24px;
  font-family: "Abel", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #6c6c6c;
}
.post__meta a {
  color: inherit;
  text-decoration: none;
}
.post__meta-sep {
  margin: 0 6px;
}
.post__content {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 27px;
  color: #6c6c6c;
}
.post__content p {
  margin: 10px 0;
}
.post__content a {
  color: #232323;
}
.post__content img {
  max-width: 100%;
  height: auto;
}
.post__content h1,
.post__content h2,
.post__content h3,
.post__content h4 {
  margin: 30px 0 10px;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 300;
  color: #232323;
}

/* Single post — prev/next navigation, was .eltdf-blog-single-navigation.
   Simplified the theme's hand-built two-bar rotated chevron to a plain
   inline SVG arrow — same treatment given to the Instagram/back-to-top
   icons in Phase 2. */
.post-nav {
  display: flex;
  justify-content: space-between;
  padding: 54px 0 22px;
}
.post-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #6c6c6c;
  text-decoration: none;
}
.post-nav__link:hover {
  color: #232323;
}
.post-nav__link--next {
  flex-direction: row-reverse;
}
.post-nav__label {
  font-family: "Abel", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
}

/* Single post — share links, was .eltdf-blog-share.
   Restores real icons via inline SVG (Elegant Icons, which used to
   provide these, was removed in Phase 2 — this was left as a bare label
   at the time; matching the Phase 2 Instagram/back-to-top SVG pattern
   now that this phase is touching the rest of the post template anyway). */
.share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.share__label {
  font-family: "Abel", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #6c6c6c;
}
.share__link {
  display: inline-flex;
  color: #6c6c6c;
  text-decoration: none;
}
.share__link:hover {
  color: #232323;
}

/* ==========================================================================
   Phase 5b — Home template (+ CallToActionRow, shared with Contact/Events/
   About). Owned replacement for the nested vc_row/wpb_column wrappers and
   .eltdf-custom-font-holder's data-attribute-driven font styling.
   ========================================================================== */

/* "MY COLLECTIONS" / "Click here to..." banners — was
   .vc_row.vc_custom_1753821792878 + .eltdf-custom-font-holder.
   The theme's "custom font" holder recomputes letter-spacing and
   line-height via JS on resize (modules.js eltdfInitCustomFontResize) —
   NOT a flat value at every width as previously assumed. For a
   data-letter-spacing of 10 (this banner's value), its exact branches are:
   >=1200px: 10px/line-height auto; 768-1199px: 8px/line-height 1.2;
   <768px: 3px/line-height 1. font-size (30) is below its own scaling
   thresholds so it stays a flat 30px at every width. */
.cta-banner {
  min-height: 133px;
  padding: 30px 0;
  box-sizing: border-box;
  background-color: #03b7e0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-banner__title {
  margin: 0;
}
.cta-banner__title a {
  display: inline-block;
  font-size: 30px;
  letter-spacing: 10px;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.cta-banner__title a:hover {
  color: #fff;
}
@media (max-width: 1199px) {
  .cta-banner__title a {
    letter-spacing: 8px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .cta-banner__title a {
    letter-spacing: 3px;
    line-height: 1;
  }
}

/* Homepage "My Collections" tile grid — was .portfolio-categories-home
   .pli-cat (a hand-written, site-specific copy of the same shader/hover
   pattern used elsewhere, confirmed real and NOT disabled by
   pointer-events:none the way the Collection template's is — these tiles
   link to real, working collection pages). Full-bleed, 3 equal columns,
   collapsing to 1 below 768px (matches .vc_col-sm-4's own breakpoint). */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 30px;
  padding-top: 35px;
}
@media (max-width: 767px) {
  .collections-grid {
    grid-template-columns: 1fr;
    row-gap: 35px;
  }
}
.tile--centered {
  grid-column: 2;
}
@media (max-width: 767px) {
  .tile--centered {
    grid-column: 1;
  }
}
.tile__link {
  display: block;
  text-align: center;
  text-decoration: none;
}
.tile__image {
  position: relative;
  overflow: hidden;
}
.tile__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.tile__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #03b7e0;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.tile:hover .tile__image::after {
  opacity: 0.7;
}
.tile__text {
  padding: 28px 0 52px;
}
.tile__text h4 {
  margin: 0;
  font-family: "Abel", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 5px;
  color: #6c6c6c;
}

/* Correction (found while working on Events): a 40px top margin used
   to be added here, but it was wrong. modules.css's generic
   .eltdf-full-width-inner{padding-top:40px} rule is itself overridden
   by a site-specific rule in style_dynamic.css (loaded after
   modules.css, same selector) down to 0px — confirmed via
   getComputedStyle on the real .eltdf-full-width-inner on develop's
   Events page (0px, not 40). The .eltdf-container variant genuinely
   does get 40px in that same site-specific file, so this 0-vs-40 split
   is real, not an oversight in the original theme — it's just two
   different values for two different wrapper kinds, and Home's
   CollectionsGrid used the "full-width" kind. Removed the wrapper and
   this rule entirely — see CollectionsGrid.astro. */

/* Events page calendar row — was .vc_row.vc_custom_1743023594254.
   Percentage vertical padding always resolves against the PARENT's
   width, not the element's own (regardless of box-sizing) — so this
   only reproduces the real 114px/55px values when nested *inside*
   .container as a separate element (events.astro does this), not
   combined onto the same element as .container. Confirmed by comparing
   the actual iframe offset against develop after getting this wrong
   once already. */
.calendar-row {
  padding: 10.4% 0 5%;
  box-sizing: border-box;
}

.contact-page__container {
  padding-bottom: 20px;
}

/* Contact page — was the nested vc_row/vc_col-lg-5/vc_col-lg-2 (5-2-5)
   Bootstrap-style column split around the "My Studio"/"Tucson Studio"
   text and the contact form, with an empty middle column purely for
   spacing. Reproduced as a 3-track grid with only 2 real children,
   explicitly placed — no empty spacer element needed. */
.contact-columns {
  display: grid;
  grid-template-columns: 5fr 2fr 5fr;
}
.contact-info {
  grid-column: 1;
}
/* was .vc_column-inner.vc_custom_1488281917216 { padding-top: 7% !important }
   — real, deliberate top offset on just the form column so its first
   field doesn't align with the info column's first line of text. */
.contact-form-col {
  grid-column: 3;
  padding-top: 7%;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .contact-columns {
    grid-template-columns: 1fr;
  }
  .contact-info,
  .contact-form-col {
    grid-column: 1;
  }
}
.contact-info h4 {
  font-family: "Abel", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 5px;
  color: #6c6c6c;
  margin: 20px 0 0;
}
.contact-info p {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 27px;
  color: #6c6c6c;
  margin: 10px 0 0;
}
.contact-info a {
  color: inherit;
  text-decoration: none;
}
.spacer-3 {
  height: 3px;
}
.spacer-12 {
  height: 12px;
}
.spacer-24 {
  height: 24px;
}

/* About page — was the vc_row.vc_custom_1743023594254 5/7 column split
   (image + bio), sharing the same 10.4%/5% vertical padding as the
   Events calendar row (same generated class). Reproduced as a 2-track
   grid nested inside .container, same percentage-padding-resolves-
   against-parent lesson as .calendar-row above. */
.about-intro {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0 40px;
  padding: 10.4% 0 5%;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .about-intro {
    grid-template-columns: 1fr;
  }
}

.about-intro__image {
  padding: 0 3% 0 8%;
  margin-bottom: 50px;
}
@media (max-width: 1024px) {
  .about-intro__image {
    padding: 0;
  }
}

/* No border/matte frame here: the original markup only ever carried
   .vc_box_border_grey (a color modifier), never the base .vc_box_border
   class its padding/background rule requires alongside it
   (.vc_box_border.vc_box_border_grey) — so this never actually rendered
   on the real site. Confirmed via computed styles on the deployed page,
   not assumed from the shortcode's class name. Plain image, no frame. */
.about-intro__image img {
  display: block;
  width: 100%;
  height: auto;
}

.about-intro__text {
  margin-top: 11px;
}

.about-intro__heading {
  margin: 0;
  font-family: "Open Sans Condensed", sans-serif;
  font-size: 38px;
  line-height: 1.316em;
  font-weight: 300;
  letter-spacing: 15px;
  color: #232323;
}

.about-intro__separator {
  display: block;
  margin: 35px 0 0;
}

.about-intro__bio p {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 27px;
  color: #6c6c6c;
  margin: 10px 0;
}
.about-intro__bio p:last-child {
  margin-bottom: 0;
}

.about-intro__social {
  display: inline-block;
  margin-top: 68px;
  color: #232323;
}
.about-intro__social:hover {
  color: #999999;
}

/* About page image gallery — the generic modules.css grid for
   .eltdf-ig-columns-4 is overridden site-specifically in koto-child's
   style.css to a CSS multi-column masonry layout instead (column-count:4,
   16px gaps, rounded corners) — confirmed via that file directly, not
   the generic theme default. */
.image-gallery {
  column-count: 4;
  column-gap: 16px;
  padding-top: 35px;
  margin-bottom: 60px;
}
@media (max-width: 768px) {
  .image-gallery {
    column-count: 2;
  }
}
@media (max-width: 480px) {
  .image-gallery {
    column-count: 1;
  }
}
.image-gallery__item img {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 8px;
}

.contact-map {
  display: block;
  border: 0;
}