/* ==========================================================================
   The Yard: component styles.
   Design tokens live in theme.json. This file styles the sections built by
   the block patterns. Every size, color, and spacing value comes from the
   Claude Design source files (Homepage.dc.html, FAQ.dc.html, Contact.dc.html,
   Login.dc.html, SiteHeader.dc.html, SiteFooter.dc.html).
   ========================================================================== */

:root {
	--ty-cyan: var(--wp--preset--color--cyan, #3CDBEE);
	--ty-cyan-dark: #28c7da;
	--ty-blue: var(--wp--preset--color--blue, #009BD0);
	--ty-blue-dark: #0087b5;
	--ty-navy: var(--wp--preset--color--navy, #1B232F);
	--ty-white: var(--wp--preset--color--white, #FFFFFF);
	--ty-light: var(--wp--preset--color--light, #F5F5F5);
	--ty-black: var(--wp--preset--color--black, #000000);
	--ty-gray: var(--wp--preset--color--gray, #9F9F9F);
	--ty-slate: var(--wp--preset--color--slate, #5B6470);
	--ty-cyan-soft: var(--wp--preset--color--cyan-soft, #E4F9FC);
	--ty-line: #E5E7EA;
	--ty-line-soft: #EDEEF0;
	--ty-dash: #C4C9CF;
	--ty-radius: 14px;
	--ty-section-pad: clamp(48px, 7vw, 88px);
	--ty-mono: ui-monospace, Menlo, Consolas, monospace;
	--ty-font-body: var(--wp--preset--font-family--body, "Source Sans 3", system-ui, sans-serif);
	--ty-font-heading: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
}

html { scroll-behavior: smooth; }
body {
	background-color: var(--ty-white);
	-webkit-font-smoothing: antialiased;
}

/* Sticky footer: pages shorter than the viewport keep the footer at the bottom. */
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > .ty-main-fill { flex: 1 0 auto; display: flex; flex-direction: column; }
.ty-main-fill > .wp-block-post-content { flex: 1 0 auto; display: flex; flex-direction: column; }
.ty-main-fill > .wp-block-post-content > .ty-page-section { flex: 1 0 auto; }

/* Inline SVG wrappers */
.ty-svg { display: inline-flex; line-height: 0; }
.ty-svg svg { display: block; width: 100%; height: 100%; }

/* WordPress adds a 24px block gap between siblings in flow and constrained
   containers. The design manages spacing per section, so switch it off on
   the page shell and on every component that uses gap or explicit margins. */
body .wp-site-blocks > * + *,
.ty-main > * + *,
.ty-main > .wp-block-post-content > * + *,
.ty-stats-grid > * + *, .ty-store-grid > * + *, .ty-reviews-grid > * + *,
.ty-commit-grid > * + *, .ty-amenities-grid > * + *, .ty-space-grid > * + *,
.ty-footer-grid > * + *, .ty-footer-col > * + *, .ty-store-card > * + *,
.ty-hero-inner > * + *, .ty-location-inner > * + *, .ty-commercial-inner > * + *,
.ty-contact-grid > * + *, .ty-contact-left > * + *, .ty-login-card > * + *,
.ty-dirs > * + *, .ty-stat > * + *, .ty-amenity > * + *, .ty-dir > * + *,
.ty-review-author > * + *, .ty-commit-tile > * + *, .ty-review-card > * + *,
.ty-store-body > * + *, .ty-section-head > * + *, .ty-page-head > * + *,
.ty-page-inner > * + *, .ty-location-copy > * + *, .ty-commercial-copy > * + *,
.ty-contact-form-card > * + *, .ty-faq-list > * + * {
	margin-block-start: 0;
}

/* Shared section rhythm ---------------------------------------------------- */
.ty-section {
	padding-top: var(--ty-section-pad);
	padding-bottom: var(--ty-section-pad);
}
.ty-section-title { text-align: center; margin: 0; }
.ty-section-head { max-width: 820px; margin-inline: auto; text-align: center; }
.ty-lead {
	margin: 14px auto 0;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.45;
	color: var(--ty-slate);
	text-wrap: pretty;
}
.ty-lead a { color: var(--ty-blue); font-weight: 700; text-decoration: none; }
.ty-lead a:hover { color: var(--ty-navy); }
.ty-page-title { margin: 0; font-size: var(--wp--preset--font-size--page-title); line-height: 1.08; letter-spacing: -0.02em; color: var(--ty-black); text-wrap: pretty; }
.ty-page-inner { max-width: 1200px; margin-inline: auto; }

/* Generic buttons used inside patterns and the contact form --------------- */
.theyard-btn {
	font-family: var(--ty-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	padding: 16px 28px;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.theyard-btn--cyan { background: var(--ty-cyan); color: var(--ty-navy); }
.theyard-btn--cyan:hover { background: var(--ty-cyan-dark); color: var(--ty-navy); }
.theyard-btn--blue { background: var(--ty-blue); color: var(--ty-white); }
.theyard-btn--blue:hover { background: var(--ty-blue-dark); color: var(--ty-white); }

/* Button block style variants. Default (cyan, navy text) comes from theme.json. */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--ty-blue);
	color: var(--ty-white);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus { background-color: var(--ty-blue-dark); color: var(--ty-white); }
.wp-block-button.is-style-outline-navy .wp-block-button__link {
	background-color: transparent;
	color: var(--ty-navy);
	border: 2px solid var(--ty-navy);
	padding: 10px 20px;
	font-size: 16px;
}
.wp-block-button.is-style-outline-navy .wp-block-button__link:hover,
.wp-block-button.is-style-outline-navy .wp-block-button__link:focus {
	background-color: var(--ty-navy);
	color: var(--ty-white);
}
.wp-block-buttons { gap: 14px; }

/* ==========================================================================
   Offer bar (SiteHeader.dc.html)
   ========================================================================== */
.ty-offerbar {
	background: var(--ty-navy);
	color: var(--ty-white);
}
.ty-offerbar .ty-offerbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding-top: 9px;
	padding-bottom: 9px;
	text-align: center;
}
.ty-offerbar p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ty-white); }
.ty-offerbar strong { color: var(--ty-cyan); font-weight: 600; }
.ty-offerbar .wp-block-buttons { margin: 0; }
.ty-offerbar .wp-block-button__link {
	background: var(--ty-cyan);
	color: var(--ty-navy);
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 6px;
}
.ty-offerbar .wp-block-button__link:hover { background: var(--ty-cyan-dark); }

/* ==========================================================================
   Header (SiteHeader.dc.html)
   ========================================================================== */
.ty-header {
	background: var(--ty-white);
	border-bottom: 1px solid var(--ty-line);
	position: relative;
}
.ty-header .ty-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.ty-header .ty-logo { margin: 0; flex: none; line-height: 0; }
.ty-header .ty-logo img { height: 62px; width: auto; display: block; }

/* Desktop navigation */
.ty-header .wp-block-navigation { flex: 0 1 auto; gap: 28px; }
.ty-header .wp-block-navigation .wp-block-navigation__container { gap: 28px; align-items: center; flex-wrap: nowrap; }
.ty-header .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--ty-font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--ty-navy);
	text-decoration: none;
	padding: 6px 0;
	white-space: nowrap;
	box-shadow: inset 0 -3px 0 transparent;
	transition: color .15s ease, box-shadow .15s ease;
}
.ty-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--ty-blue); }
.ty-page-faq .ty-header .ty-nav-faq .wp-block-navigation-item__content,
.ty-page-contact .ty-header .ty-nav-contact .wp-block-navigation-item__content {
	color: var(--ty-blue);
	box-shadow: inset 0 -3px 0 var(--ty-cyan);
}
.ty-header .ty-nav-mobile { display: none; }

/* Phone and Login on the right */
.ty-header .ty-header-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.ty-header .ty-header-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ty-navy);
	text-decoration: none;
	white-space: nowrap;
}
.ty-header .ty-header-phone svg { color: var(--ty-blue); flex: none; }
.ty-header .ty-header-phone:hover { color: var(--ty-blue); }
.ty-header .ty-header-login { margin: 0; }

/* Hamburger button (WordPress renders it; the design shows it under 980px) */
.ty-header .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	border: 2px solid var(--ty-navy);
	border-radius: 8px;
	background: var(--ty-white);
	color: var(--ty-navy);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	flex: none;
}
.ty-header .wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; }

/* ==========================================================================
   Hero (Hero.dc.html)
   ========================================================================== */
.ty-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--ty-navy);
	background-image: url("../images/Hero.jpg");
	background-image: image-set(url("../images/Hero.webp") type("image/webp"), url("../images/Hero.jpg") type("image/jpeg"));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--ty-white);
	min-height: clamp(460px, 48vw, 620px);
	display: grid;
	align-items: center;
}
.ty-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(27, 35, 47, 0.6);
	pointer-events: none;
}
.ty-hero .ty-hero-inner {
	position: relative;
	width: 100%;
	padding-top: clamp(56px, 8vw, 110px);
	padding-bottom: clamp(56px, 8vw, 110px);
	text-align: left;
}
.ty-hero .ty-hero-inner > * { max-width: 780px; }
.ty-hero h1 {
	color: var(--ty-white);
	margin: 0;
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}
.ty-hero .ty-hero-sub {
	color: var(--ty-white);
	font-size: clamp(18px, 1.7vw, 23px);
	line-height: 1.4;
	font-weight: 600;
	margin: 20px 0 0;
	text-wrap: pretty;
}
.ty-hero .wp-block-buttons { margin-top: 32px; gap: 14px; }
.ty-hero .wp-block-button__link { padding: 17px 30px; }

/* ==========================================================================
   Stats strip
   ========================================================================== */
.ty-stats {
	background: var(--ty-light);
	padding-top: 28px;
	padding-bottom: 28px;
}
.ty-stats .ty-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
}
.ty-stat {
	background: var(--ty-white);
	border-radius: 12px;
	padding: 22px 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.ty-stat .ty-icon-circle {
	width: 48px; height: 48px;
	background: var(--ty-cyan);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--ty-navy);
}
.ty-stat .ty-icon-circle .ty-svg { width: 24px; height: 24px; }
.ty-stat p { margin: 0; font-weight: 700; color: var(--ty-navy); font-size: 16px; line-height: 1.3; }

/* ==========================================================================
   Reserve your space
   ========================================================================== */
.ty-reserve { background: var(--ty-white); }
.ty-space-wrap, .ty-sixstorage {
	position: relative;
	margin-top: 48px;
}
.ty-space-wrap {
	border: 2px dashed var(--ty-dash);
	border-radius: 20px;
	padding: 32px 20px 20px;
}
.ty-space-flag {
	position: absolute;
	top: -13px;
	left: 20px;
	background: var(--ty-white);
	padding: 3px 10px;
	border: 1px dashed var(--ty-dash);
	border-radius: 6px;
	font-family: var(--ty-mono);
	font-size: 12px;
	line-height: 1.4;
	color: var(--ty-slate);
}
.ty-space-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}
.ty-space-card {
	background: var(--ty-white);
	border: 1px solid var(--ty-line);
	border-radius: var(--ty-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ty-space-card .ty-space-icon {
	width: 52px; height: 52px;
	background: var(--ty-cyan-soft);
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	color: var(--ty-navy);
}
.ty-space-card .ty-space-icon .ty-svg { width: 28px; height: 28px; }
.ty-space-card .ty-space-size { margin: 8px 0 0; font-size: 22px; letter-spacing: -0.01em; color: var(--ty-black); }
.ty-space-card .ty-price { display: flex; align-items: baseline; gap: 4px; }
.ty-space-card .ty-price-amount {
	font-family: var(--ty-font-heading);
	font-weight: 800;
	font-size: 34px;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ty-black);
}
.ty-space-card .ty-price-per { font-size: 17px; font-weight: 600; color: var(--ty-slate); }
.ty-space-card .ty-space-fits { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ty-slate); }
.ty-space-card .ty-space-btn { margin-top: 10px; padding: 14px 22px; font-size: 17px; }
.ty-reserve .ty-reserve-note {
	text-align: center;
	color: var(--ty-navy);
	font-size: 19px;
	font-weight: 600;
	margin: 30px 0 0;
}
.ty-reserve .ty-reserve-note a { color: var(--ty-blue); font-weight: 700; text-decoration: none; }
.ty-reserve .ty-reserve-note a:hover { color: var(--ty-navy); }

/* ==========================================================================
   6Storage plugin output: nudge its cards/buttons toward the design.
   Selectors are defensive since markup varies by plugin version.
   ========================================================================== */
.ty-sixstorage,
.six-storage,
[class*="six_storage"],
[class*="six-storage"] {
	--sixstorage-primary: var(--ty-cyan);
}
.ty-sixstorage button,
.ty-sixstorage .btn,
.ty-sixstorage input[type="submit"],
.six-storage button,
.six-storage .btn {
	background: var(--ty-cyan) !important;
	color: var(--ty-navy) !important;
	border: none !important;
	border-radius: 8px !important;
	font-family: var(--ty-font-body) !important;
	font-weight: 700 !important;
}
.ty-sixstorage .card,
.ty-sixstorage .unit,
.ty-sixstorage [class*="unit"],
.six-storage .card {
	border: 1px solid var(--ty-line) !important;
	border-radius: var(--ty-radius) !important;
}
.ty-sixstorage a { color: var(--ty-blue); }
.ty-sixstorage input,
.ty-sixstorage select {
	border: 1px solid var(--ty-dash) !important;
	border-radius: 8px !important;
}
.ty-login-frame { margin-top: 0; }

/* ==========================================================================
   What you can store
   ========================================================================== */
.ty-store { background: var(--ty-light); }
.ty-store-grid {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 20px;
}
.ty-store-card {
	background: var(--ty-white);
	border-radius: var(--ty-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.ty-store-illus {
	background: var(--ty-cyan-soft);
	padding: 16px 28px 6px;
}
.ty-store-illus svg { width: 100%; max-height: 140px; height: auto; display: block; }
.ty-store-body { padding: 22px 24px 26px; }
.ty-store-body h3 { margin: 0; font-size: 22px; letter-spacing: -0.01em; color: var(--ty-black); }
.ty-store-body p { margin: 8px 0 0; font-size: 17px; line-height: 1.45; color: var(--ty-slate); }

/* ==========================================================================
   Amenities (cyan section)
   ========================================================================== */
.ty-amenities { background: var(--ty-cyan); }
.ty-amenities h2 { color: var(--ty-black); text-align: center; margin: 0; text-wrap: pretty; }
.ty-amenities-grid {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 20px 28px;
}
.ty-amenity {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ty-check {
	flex: none;
	width: 30px; height: 30px;
	background: var(--ty-white);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--ty-navy);
}
.ty-check .ty-svg { width: 16px; height: 16px; }
.ty-amenity p { margin: 0; font-size: 19px; font-weight: 700; color: var(--ty-navy); line-height: 1.3; }

/* ==========================================================================
   Commercial
   ========================================================================== */
.ty-commercial { background: var(--ty-white); }
.ty-commercial .ty-commercial-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 48px;
	align-items: center;
}
.ty-commercial h2 { margin: 0; color: var(--ty-black); text-wrap: pretty; }
.ty-commercial .ty-commercial-sub { margin: 14px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; color: var(--ty-slate); text-wrap: pretty; }
.ty-checklist { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ty-checklist li { display: flex; align-items: center; gap: 14px; color: var(--ty-navy); font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0; }
.ty-checklist li::before {
	content: "";
	flex: none;
	width: 28px; height: 28px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%233CDBEE'/%3E%3Cpath d='M8.2 14l3.1 3.1 8.5-8.5' fill='none' stroke='%231B232F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ty-commercial .wp-block-buttons { margin-top: 32px; }
.ty-commercial-media {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	background: var(--ty-light);
	min-width: 0;
}
.ty-commercial-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.ty-reviews { background: var(--ty-light); }
.ty-reviews .ty-google-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--ty-white);
	border-radius: 999px;
	padding: 8px 18px 8px 8px;
	width: max-content;
	max-width: 100%;
	margin: 18px auto 0;
	font-weight: 700;
	font-size: 17px;
	color: var(--ty-navy);
}
.ty-reviews .ty-google-g {
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--ty-line);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 19px;
	color: var(--ty-blue);
}
.ty-stars { display: inline-flex; gap: 2px; color: var(--ty-cyan); }
.ty-stars .ty-svg { width: 18px; height: 18px; }
.ty-reviews-grid {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}
.ty-review-card {
	background: var(--ty-white);
	border-radius: var(--ty-radius);
	padding: 26px;
	display: flex; flex-direction: column; gap: 14px;
}
.ty-review-card .ty-stars { gap: 3px; }
.ty-review-card .ty-stars .ty-svg { width: 20px; height: 20px; }
.ty-review-card .ty-review-text { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ty-navy); flex: 1; }
.ty-review-author { display: flex; align-items: center; gap: 10px; }
.ty-avatar {
	flex: none;
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--ty-cyan-soft);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; color: var(--ty-blue);
}
.ty-review-author .ty-name { margin: 0; flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ty-navy); }
.ty-review-author .ty-ph {
	margin-left: auto;
	font-family: var(--ty-mono);
	font-size: 11px; font-weight: 400; color: var(--ty-slate);
	border: 1px dashed var(--ty-dash); border-radius: 5px; padding: 2px 6px;
}

/* ==========================================================================
   Commitment
   ========================================================================== */
.ty-commitment { background: var(--ty-white); }
.ty-commit-grid {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: 16px;
}
.ty-commit-tile {
	background: var(--ty-light);
	border-radius: var(--ty-radius);
	padding: 26px 22px;
	display: flex; flex-direction: column; gap: 14px;
}
.ty-commit-icon {
	width: 48px; height: 48px; border-radius: 12px;
	background: var(--ty-cyan);
	display: flex; align-items: center; justify-content: center;
	color: var(--ty-navy);
}
.ty-commit-icon .ty-svg { width: 24px; height: 24px; }
.ty-commit-tile h3 { margin: 0; font-size: 21px; letter-spacing: -0.01em; color: var(--ty-black); }
.ty-commit-tile p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ty-slate); }

/* ==========================================================================
   FAQ accordion (core/details)
   ========================================================================== */
.ty-faq { background: var(--ty-light); }
.ty-faq .ty-faq-list {
	max-width: 900px;
	margin: 40px auto 0;
	background: var(--ty-white);
	border-radius: 16px;
	padding: 8px 28px;
}
.ty-faq details.wp-block-details {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ty-line-soft);
	background: none;
}
.ty-faq details.wp-block-details summary {
	font-family: var(--ty-font-body);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	color: var(--ty-navy);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	text-align: left;
}
.ty-faq details.wp-block-details summary::-webkit-details-marker { display: none; }
.ty-faq details.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 22px; height: 22px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009BD0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	transition: transform .2s ease;
}
.ty-faq details[open] summary::after { transform: rotate(180deg); }
.ty-faq details.wp-block-details p {
	color: var(--ty-slate);
	font-size: 17px;
	line-height: 1.5;
	margin: 0 0 22px;
	max-width: 760px;
}
/* FAQ page variant (FAQ.dc.html): a touch larger, 1000px wide */
.ty-faq-page .ty-faq-page-inner { max-width: 1000px; }
.ty-faq-page .ty-faq-list { max-width: none; }
.ty-faq-page details.wp-block-details summary { padding: 22px 0; font-size: 20px; }
.ty-faq-page details.wp-block-details p { font-size: 18px; margin-bottom: 24px; max-width: 820px; }
.ty-faq-page .ty-faq-page-actions { margin-top: 40px; justify-content: center; }

/* ==========================================================================
   Location
   ========================================================================== */
.ty-location { background: var(--ty-white); }
.ty-location .ty-location-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 48px;
	align-items: center;
}
.ty-map {
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	line-height: 0;
	background: var(--ty-light);
	min-width: 0;
}
.ty-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.ty-location h2 { margin: 0; color: var(--ty-black); }
.ty-location .ty-addr { font-weight: 700; color: var(--ty-navy); font-size: 20px; margin: 14px 0 0; }
.ty-dirs { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.ty-dir { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
.ty-dir .ty-pin {
	flex: none; width: 32px; height: 32px; border-radius: 50%;
	background: var(--ty-cyan);
	display: flex; align-items: center; justify-content: center;
	color: var(--ty-navy);
}
.ty-dir .ty-pin .ty-svg { width: 18px; height: 18px; }
.ty-dir p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ty-slate); }
.ty-dir p strong { color: var(--ty-navy); }
.ty-location .wp-block-buttons { margin-top: 32px; }

/* ==========================================================================
   Footer (SiteFooter.dc.html)
   ========================================================================== */
.ty-footer {
	background: var(--ty-navy);
	color: var(--ty-white);
	padding-top: 56px;
	padding-bottom: 28px;
}
.ty-footer a { color: var(--ty-white); text-decoration: none; }
.ty-footer a:hover { color: var(--ty-cyan); }
.ty-footer .ty-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 40px 24px;
	align-items: start;
}
.ty-footer .ty-footer-col { display: flex; flex-direction: column; gap: 12px; }
.ty-footer .ty-footer-brand { gap: 14px; }
.ty-footer .ty-footer-logo { margin: 0; line-height: 0; }
.ty-footer .ty-footer-logo img { height: 92px; width: auto; display: block; }
.ty-footer h3 { color: var(--ty-white); font-size: 22px; letter-spacing: -0.01em; margin: 0; }
.ty-footer p { margin: 0; font-size: 16px; line-height: 1.5; color: #C9CED6; }
.ty-footer p strong { color: var(--ty-white); font-weight: 700; }
.ty-footer .ty-footer-addr { white-space: nowrap; }
.ty-footer .ty-col-label {
	color: var(--ty-cyan);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 14px;
	font-weight: 700;
}
.ty-footer .ty-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ty-footer .ty-footer-links li { margin: 0; font-size: 16px; font-weight: 600; }
.ty-footer .ty-footer-bottom {
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid #2E3844;
}
.ty-footer .ty-copy { color: #9AA3AE; font-size: 14px; margin: 0; }

/* ==========================================================================
   Contact page (Contact.dc.html)
   ========================================================================== */
.ty-contact-page { background: var(--ty-light); }
.ty-contact-intro { max-width: 760px; }
.ty-contact-intro .ty-lead { text-align: left; margin-left: 0; }
.ty-contact-grid {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 24px;
	align-items: start;
}
.ty-contact-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ty-contact-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 16px;
}
.ty-contact-card {
	background: var(--ty-white);
	border-radius: var(--ty-radius);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--ty-navy);
	text-decoration: none;
	min-width: 0;
}
a.ty-contact-card:hover { color: var(--ty-navy); }
a.ty-contact-card:hover .ty-contact-value { color: var(--ty-blue); }
.ty-contact-icon {
	width: 44px; height: 44px; border-radius: 12px;
	background: var(--ty-cyan);
	display: flex; align-items: center; justify-content: center;
	color: var(--ty-navy);
}
.ty-contact-icon .ty-svg { width: 22px; height: 22px; }
.ty-contact-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ty-slate);
}
.ty-contact-value { font-size: 18px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.ty-contact-value--phone { font-size: 20px; }
.ty-contact-value--hours { font-size: 17px; font-weight: 600; line-height: 1.4; }
.ty-contact-map {
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	line-height: 0;
	background: var(--ty-white);
}
.ty-contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.ty-contact-form-card {
	background: var(--ty-white);
	border-radius: 16px;
	padding: clamp(24px, 3vw, 36px);
	min-width: 0;
}
.ty-contact-form-card .wp-block-shortcode { margin: 0; }
.ty-contact-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.ty-contact-form h2,
.ty-form-sent h2 { margin: 0; font-size: 26px; letter-spacing: -0.01em; color: var(--ty-black); }
.ty-contact-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ty-navy);
}
.ty-contact-form input,
.ty-contact-form select,
.ty-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid var(--ty-dash);
	border-radius: 8px;
	font: inherit;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ty-navy);
	background: var(--ty-white);
	margin: 0;
}
.ty-contact-form textarea { resize: vertical; min-height: 120px; }
.ty-contact-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background: var(--ty-white) no-repeat right 16px center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B232F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.ty-contact-form select:invalid,
.ty-contact-form select option[value=""] { color: var(--ty-slate); }
.ty-contact-form input:focus,
.ty-contact-form select:focus,
.ty-contact-form textarea:focus {
	outline: 3px solid var(--ty-cyan);
	outline-offset: 0;
	border-color: var(--ty-blue);
}
.ty-contact-form .ty-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 18px;
}
.ty-contact-form .theyard-btn { align-self: flex-start; }
.ty-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ty-form-notice {
	margin: 0;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	background: #FDECEC;
	color: #8a2020;
}
.ty-form-sent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 8px 0;
}
.ty-form-sent-icon {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--ty-cyan);
	display: flex; align-items: center; justify-content: center;
	color: var(--ty-navy);
}
.ty-form-sent-icon .ty-svg { width: 28px; height: 28px; }
.ty-form-sent p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ty-slate); }
.ty-form-sent p a { color: var(--ty-blue); font-weight: 700; text-decoration: none; }
.ty-form-sent .ty-form-again { font-size: 16px; font-weight: 700; color: var(--ty-blue); text-decoration: none; }
.ty-form-sent .ty-form-again:hover,
.ty-form-sent p a:hover { color: var(--ty-navy); }

/* ==========================================================================
   Login page (Login.dc.html)
   ========================================================================== */
.ty-login-page { background: var(--ty-light); }
.ty-login .ty-login-card {
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
	background: var(--ty-white);
	border-radius: 16px;
	padding: clamp(28px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
}
.ty-login .ty-login-logo { margin: 0; line-height: 0; }
.ty-login .ty-login-logo img { height: 88px; width: auto; display: block; margin: 0 auto; }
.ty-login .ty-login-card h1 {
	margin: 0;
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ty-black);
}
.ty-login .ty-login-lead { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ty-slate); }
.ty-login .wp-block-shortcode { margin: 0; }
.ty-login-placeholder {
	min-height: 340px;
	border-radius: 12px;
	border: 2px dashed var(--ty-dash);
	background: repeating-linear-gradient(135deg, #F5F5F5 0 14px, #FBFBFB 14px 28px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: var(--ty-mono);
	font-size: 13px;
	line-height: 1.7;
	color: var(--ty-slate);
}
.ty-login .ty-login-note { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ty-slate); }
.ty-login .ty-login-note a { color: var(--ty-blue); font-weight: 700; text-decoration: none; }
.ty-login .ty-login-note a:hover { color: var(--ty-navy); }

/* ==========================================================================
   Generic page and 404
   ========================================================================== */
.ty-page-header { background: var(--ty-light); padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.ty-page-header h1 { text-align: center; margin: 0; font-size: var(--wp--preset--font-size--page-title); }
.ty-page-body { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.ty-404 .ty-section { text-align: center; }
.ty-404 .wp-block-buttons { margin-top: 32px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Below 980px the design collapses the header: cyan phone circle, hamburger,
   and a white drop-down menu with two buttons. WordPress only switches its
   menu at 600px, so widen that window here. */
@media (min-width: 600px) and (max-width: 979px) {
	.ty-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.ty-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 979px) {
	.ty-header .ty-header-inner { gap: 10px; }
	/* The open panel positions against the header, not the nav element */
	.ty-header .wp-block-navigation { order: 3; flex: none; position: static; }
	.ty-header .wp-block-navigation__responsive-container-open { display: flex; }
	.ty-header .wp-block-navigation__responsive-container-open[aria-expanded="true"],
	.ty-header .wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; }
	.ty-header .ty-header-actions { order: 2; gap: 10px; margin-left: auto; }
	.ty-header .ty-header-phone {
		width: 44px; height: 44px;
		border-radius: 50%;
		background: var(--ty-cyan);
		justify-content: center;
		gap: 0;
	}
	.ty-header .ty-header-phone svg { color: var(--ty-navy); }
	.ty-header .ty-header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ty-header .ty-header-login { display: none; }

	/* The open menu becomes a white panel under the header */
	html.has-modal-open { overflow: visible; }
	.ty-header .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		top: 100%; left: 0; right: 0; bottom: auto;
		height: auto;
		overflow: visible;
		background: var(--ty-white);
		border-top: 1px solid var(--ty-line);
		box-shadow: 0 24px 40px rgba(27, 35, 47, 0.16);
		padding: 8px 24px 24px;
		z-index: 1000;
		animation: none;
	}
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: relative; }
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: -72px; right: 0;
		width: 44px; height: 44px;
		border: 2px solid var(--ty-navy);
		border-radius: 8px;
		background: var(--ty-white);
		color: var(--ty-navy);
		display: flex; align-items: center; justify-content: center;
		padding: 0;
		cursor: pointer;
	}
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; }
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: block;
		padding-top: 0;
		gap: 0;
	}
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 12px;
		align-items: stretch;
	}
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		grid-column: 1 / -1;
		display: block;
		border-bottom: 1px solid #F0F1F3;
		margin: 0;
	}
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		display: block;
		padding: 14px 0;
		font-size: 19px;
		font-weight: 700;
		color: var(--ty-navy);
		box-shadow: none;
		white-space: normal;
	}
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ty-nav-mobile {
		display: block;
		grid-column: auto;
		border: 0;
		margin-top: 16px;
	}
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ty-nav-mobile .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 14px 20px;
		border-radius: 8px;
		font-size: 17px;
		font-weight: 700;
	}
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ty-nav-cta .wp-block-navigation-item__content {
		background: var(--ty-cyan);
		color: var(--ty-navy);
	}
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ty-nav-login .wp-block-navigation-item__content {
		border: 2px solid var(--ty-navy);
		color: var(--ty-navy);
	}
}

@media (max-width: 480px) {
	.ty-header .ty-logo img { height: 52px; }
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: -67px; }
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { grid-template-columns: 1fr; gap: 0; }
	.ty-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ty-nav-login { margin-top: 12px; }
	.ty-footer .ty-footer-addr { white-space: normal; }
}