/* ─────────────────────────────────────────────────────────────────────────────
   Turnkey · About (page 9) · direction v2 "The Open House", Restraint rules.
   v3, imagery-rich and decoration-free: Hero (Avery's arch over a full-bleed living-room photo, neutral dark
   overlay) · My story (large square door photo) · How I work (ruled rows over an interior photo) · Kind words
   (one quote over a paper-washed photo) · Guest book CTA (house photo, dark overlay).
   Every rule is scoped to body.page-id-9 or a tk-ab-* section, so nothing leaks to other pages.
   Loaded after screen.css by the tk-*.css loader in inc/circles-functions.php.
   ───────────────────────────────────────────────────────────────────────────── */
body.page-id-9 {
	--ab-ink: #2b3a4a; --ab-ink-d: #1f2a36; --ab-paper: #f7f4ee; --ab-linen: #ece4d6;
	--ab-ochre: #c9962e; --ab-ochre-d: #9c7322; --ab-body: #3a4552; --ab-muted: #5d6773;
	--ab-hair: rgba(43, 58, 74, .18);
	--ab-serif: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
	--ab-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
	--ab-ease: cubic-bezier(.22, 1, .36, 1);
	--ab-pad: clamp(88px, 9.4vw, 160px);
}

/* ── 01 · Hero: full-bleed living-room photo, neutral dark overlay, white type, Avery in her arch ─ */
body.page-id-9 .ct2-hero-offset {
	position: relative; isolation: isolate; overflow: hidden;
	background: #1c1c1c url(/wp-content/uploads/2026/10/2541-wrenhaven-street-fort-worth-tx-home-for-sale-03-1536x1024.webp) center 60% / cover no-repeat !important;
}
/* black only (never slate): a gradient up from the bottom plus a fade from the left, where the copy sits */
body.page-id-9 .ct2-hero-offset::before {
	display: block !important; content: "" !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 0 !important;
	background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .3) 75%, rgba(0, 0, 0, .22) 100%), linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 68%) !important;
}
body.page-id-9 .ct2-hero-offset .ct2-ho {
	position: relative; z-index: 1;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 110px);
	align-items: end; padding-top: clamp(72px, 8vw, 140px) !important; padding-bottom: clamp(72px, 7vw, 120px) !important;
}
body.page-id-9 .ct2-hero-offset .ct2-ho-copy { margin: 0 !important; padding-bottom: clamp(8px, 2vw, 32px); }
body.page-id-9 .ct2-hero-offset .ct2-ho-media {
	width: min(100%, 470px) !important; margin: 0 !important; aspect-ratio: 4 / 5 !important;
	border-radius: 999px 999px 0 0 !important; outline: 0 !important; box-shadow: none !important; background: var(--ab-linen);
}
body.page-id-9 .ct2-hero-offset .ct2-ho-img { object-position: 57% 30%; }
body.page-id-9 .ct2-hero-offset .ct2-hero-eyebrow { color: #fff !important; }
body.page-id-9 .ct2-hero-offset .ct2-hero-eyebrow::after { background: rgba(255, 255, 255, .7) !important; }
body.page-id-9 .ct2-hero-offset .ct2-hero-title {
	color: #fff !important; font-size: clamp(56px, 7vw, 128px) !important; line-height: .95 !important; letter-spacing: -0.015em;
	margin: 0 !important; text-shadow: 0 1px 24px rgba(0, 0, 0, .25);
}
body.page-id-9 .ct2-hero-offset .ct2-hero-title em { display: inline !important; color: var(--ab-ochre) !important; }
body.page-id-9 .ct2-hero-offset .ct2-hero-title::after { display: none !important; content: none !important; }
body.page-id-9 .ct2-hero-offset .ct2-hero-sentence {
	margin-top: clamp(22px, 2.4vw, 36px) !important; max-width: 36ch;
	font-family: var(--ab-sans); font-size: clamp(18px, 1.35vw, 21px) !important; font-weight: 400; letter-spacing: 0; text-transform: none;
	line-height: 1.55 !important; color: rgba(255, 255, 255, .92) !important;
}
/* the shared hero motion draws a frame and an offset block; on About the arch stays plain */
body.page-id-9.tk-anim .ct2-hero-offset .ct2-ho-media, body.page-id-9 .tk-anim .ct2-hero-offset .ct2-ho-media,
body.page-id-9 .ct2-hero-offset.is-in .ct2-ho-media { outline: 0 !important; box-shadow: none !important; }

/* ── Shared section type ─────────────────────────────────────────────────────────────────── */
body.page-id-9 .tk-ab-story .titles:not(.small-titles),
body.page-id-9 .tk-ab-steps .ct2-head .titles:not(.small-titles),
body.page-id-9 .tk-ab-cta .titles:not(.small-titles) {
	font-family: var(--ab-serif) !important; font-weight: 300 !important; color: var(--ab-ink);
	font-size: clamp(40px, 4.6vw, 80px) !important; line-height: 1 !important; letter-spacing: -0.012em;
}
body.page-id-9 :is(.tk-ab-story, .tk-ab-steps) .titles em { font-style: italic; color: var(--ab-ochre-d); }

/* ── 02 · My story: text left, one large square door photo right ────────────────────────────── */
body.page-id-9 .tk-ab-story .image-wrapper-featured {
	aspect-ratio: 1 / 1; height: auto !important; padding: 0 !important; overflow: hidden; border-radius: 0 !important; background: var(--ab-linen);
}
body.page-id-9 .tk-ab-story .image-wrapper-featured img {
	position: static !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 45%; border-radius: 0 !important;
}
body.page-id-9 .tk-ab-story .small-titles { margin-bottom: 20px !important; }
body.page-id-9 .tk-ab-story .titles:not(.small-titles) { margin-bottom: clamp(28px, 2.6vw, 40px) !important; }
body.page-id-9 .tk-ab-story .wysiwyg { max-width: 600px; }
body.page-id-9 .tk-ab-story .wysiwyg p { font-family: var(--ab-sans); font-size: 18px !important; line-height: 1.68; color: var(--ab-body); margin: 0 0 1.1em; }
body.page-id-9 .tk-ab-story .wysiwyg p:first-child::first-letter { all: unset; }
body.page-id-9 .tk-ab-story .wysiwyg p.tk-ab-pull {
	font-family: var(--ab-serif); font-style: italic; font-weight: 400; color: var(--ab-ink);
	font-size: clamp(28px, 2.4vw, 38px) !important; line-height: 1.18; letter-spacing: -0.005em; margin: 1.1em 0 1.1em; text-wrap: balance;
}
@media (min-width: 768px) {
	body.page-id-9 .tk-ab-story .div-within-section > .relative { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 7vw, 120px); align-items: center; }
	body.page-id-9 .tk-ab-story .div-within-section > .relative > :is(.left, .right) { width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; }
	body.page-id-9 .tk-ab-story .div-within-section > .relative > .left { order: 2; }
	body.page-id-9 .tk-ab-story .div-within-section > .relative > .push { display: none; }
}
@media (max-width: 767px) {
	body.page-id-9 .tk-ab-story .div-within-section > .relative > .left { margin-bottom: 40px; }
}

/* ── Photo bands: the section photo sits under a neutral black overlay, content above it ──────── */
body.page-id-9 :is(.tk-ab-steps, .tk-ab-words, .tk-ab-cta) { position: relative; isolation: isolate; overflow: hidden; background-color: #1c1c1c !important; background-image: none !important; }
body.page-id-9 :is(.tk-ab-steps, .tk-ab-words, .tk-ab-cta)::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
body.page-id-9 :is(.tk-ab-steps, .tk-ab-words, .tk-ab-cta) > .section { position: relative; z-index: 3; }
body.page-id-9 .tk-ab-steps::before { background: linear-gradient(to right, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .66) 55%, rgba(0, 0, 0, .5) 100%); }
body.page-id-9 .tk-ab-steps .bg-section-img { object-position: 50% 50%; }

/* ── 03 · How I work: numbered ruled rows over an interior photo (white type, ochre numerals) ─── */
body.page-id-9 .tk-ab-steps { color: #fff; }
body.page-id-9 .tk-ab-steps .ct2-head .titles:not(.small-titles) { color: #fff !important; }
body.page-id-9 .tk-ab-steps .ct2-head .titles em { color: #fff !important; }
body.page-id-9 .tk-ab-steps .small-titles { color: #fff !important; }
body.page-id-9 .tk-ab-steps .small-titles::after { background: rgba(255, 255, 255, .7) !important; }
body.page-id-9 .tk-ab-steps .ct2-text-rows { border-top: 1px solid rgba(255, 255, 255, .3); }
body.page-id-9 .tk-ab-steps .ct2-tr { border-bottom: 1px solid rgba(255, 255, 255, .3); padding: clamp(28px, 2.8vw, 44px) 0; gap: 20px clamp(40px, 6vw, 100px); align-items: baseline; }
body.page-id-9 .tk-ab-steps .ct2-tr-label { gap: clamp(20px, 2.6vw, 44px); align-items: baseline; flex-wrap: nowrap; }
body.page-id-9 .tk-ab-steps .ct2-tr-n {
	flex: 0 0 auto; min-width: 1.15em; font-family: var(--ab-serif) !important; font-weight: 300; font-style: normal;
	font-size: clamp(56px, 5.4vw, 92px); line-height: .8; color: var(--ab-ochre) !important; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em;
}
body.page-id-9 .tk-ab-steps .ct2-tr-label .titles {
	font-family: var(--ab-serif) !important; font-weight: 400 !important; font-size: clamp(28px, 2.2vw, 34px) !important;
	line-height: 1.1 !important; color: #fff !important; letter-spacing: -0.005em;
}
body.page-id-9 .tk-ab-steps .ct2-tr-text .wysiwyg p { font-family: var(--ab-sans); font-size: 18px !important; line-height: 1.65; color: rgba(255, 255, 255, .9) !important; max-width: 46ch; margin: 0; }

/* ── 04 · Kind words: one quote over a living-room photo washed with paper (soft, ink type) ───── */
body.page-id-9 .tk-ab-words::before { background: linear-gradient(rgba(247, 244, 238, .86), rgba(247, 244, 238, .86)); }
body.page-id-9 .tk-ab-words .bg-section-img { object-position: 50% 55%; }
body.page-id-9 .tk-ab-words .section_titles_width { max-width: 1040px; margin-left: auto; margin-right: auto; }
body.page-id-9 .tk-ab-words .small-titles::after { margin-left: auto; margin-right: auto; }
body.page-id-9 .tk-ab-quote { margin: clamp(28px, 3vw, 48px) auto 0; padding: 0; border: 0; max-width: 980px; }
body.page-id-9 .tk-ab-quote::before, body.page-id-9 .tk-ab-quote::after { display: none !important; content: none !important; }
body.page-id-9 .tk-ab-words .tk-ab-quote p {
	font-family: var(--ab-serif) !important; font-weight: 300; font-style: normal; color: var(--ab-ink);
	font-size: clamp(32px, 3.5vw, 58px) !important; line-height: 1.14 !important; letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
body.page-id-9 .tk-ab-quote footer { margin-top: clamp(26px, 2.6vw, 40px); display: flex; flex-direction: column; align-items: center; gap: 8px; }
body.page-id-9 .tk-ab-quote-by { font-family: var(--ab-sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ab-ink); }
body.page-id-9 .tk-ab-quote-note { font-family: var(--ab-sans); font-size: 14px; color: var(--ab-muted); }

/* ── 05 · Sign the guest book: double-porch house photo, neutral dark overlay, one ochre button ──────────────── */
body.page-id-9 .tk-ab-cta::before { background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .45) 100%); }
body.page-id-9 .tk-ab-cta .bg-section-img { object-position: 50% 35%; }
body.page-id-9 .tk-ab-cta .overlay { display: none !important; }
body.page-id-9 .tk-ab-cta .titles:not(.small-titles) { color: #fff !important; font-size: clamp(48px, 5.6vw, 96px) !important; line-height: .98 !important; }
/* the framework dims spans in a CTA title on Main; the word-reveal wraps every word in a span */
body.page-id-9 .tk-ab-cta .ct2-cta .titles span { opacity: 1 !important; }
/* one ochre moment per viewport: the button; the italic word stays paper */
body.page-id-9 .tk-ab-cta .titles em { font-style: italic; color: var(--ab-paper) !important; }
body.page-id-9 .tk-ab-cta .wysiwyg { max-width: 540px !important; margin-top: 28px; }
body.page-id-9 .tk-ab-cta .wysiwyg p { font-family: var(--ab-sans); font-size: 19px !important; line-height: 1.6; color: rgba(255, 255, 255, .86) !important; }
body.page-id-9 .tk-ab-cta a.button.button-fourth-color { background: var(--ab-ochre) !important; border-color: var(--ab-ochre) !important; color: var(--ab-ink-d) !important; border-radius: 0 !important; }
body.page-id-9 .tk-ab-cta a.button.button-fourth-color:hover { background: #fff !important; border-color: #fff !important; color: var(--ab-ink) !important; }
body.page-id-9 .tk-ab-cta a.button:focus-visible { outline: 2px solid #fff !important; outline-offset: 4px; }

/* one shape language: square corners on everything but the arch */
body.page-id-9 :is(.tk-ab-story, .tk-ab-steps, .tk-ab-words, .tk-ab-cta) :is(a.button, .panel, img) { border-radius: 0 !important; }

/* ── Tablet ──────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
	body.page-id-9 .ct2-hero-offset .ct2-ho { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 40px; }
}
/* ── Phones: copy first, then the arch; rows stack ───────────────────────────────────────── */
@media (max-width: 900px) {
}
@media (max-width: 800px) {
	body.page-id-9 .tk-ab-steps .ct2-tr { grid-template-columns: 1fr; gap: 10px; }
	body.page-id-9 .tk-ab-steps .ct2-tr-n { font-size: 52px; }
	body.page-id-9 .tk-ab-steps .ct2-tr-text { padding-left: calc(52px * 1.15 + 20px); }
}
@media (max-width: 767px) {
	body.page-id-9 .ct2-hero-offset .ct2-ho { grid-template-columns: 1fr; padding-bottom: 64px !important; }
	body.page-id-9 .ct2-hero-offset .ct2-ho.ct2-img-right .ct2-ho-copy { grid-row: 1; margin: 0 !important; padding-bottom: 0; }
	body.page-id-9 .ct2-hero-offset .ct2-ho.ct2-img-right .ct2-ho-media { grid-row: 2; justify-self: start; width: min(82%, 340px) !important; aspect-ratio: 4 / 5 !important; margin: 36px 0 0 !important; }
	body.page-id-9 .ct2-hero-offset .ct2-hero-sentence { font-size: 18px !important; }
	body.page-id-9 .tk-ab-story .wysiwyg p, body.page-id-9 .tk-ab-steps .ct2-tr-text .wysiwyg p { font-size: 17px !important; }
	body.page-id-9 .ct2-hero-offset { background-image: url(/wp-content/uploads/2026/10/2541-wrenhaven-street-fort-worth-tx-home-for-sale-03-1024x682.webp) !important; background-position: 30% 50% !important; }
	body.page-id-9 .ct2-hero-offset::before { background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 100%) !important; }
	body.page-id-9 .tk-ab-steps::before { background: rgba(0, 0, 0, .74); }
	body.page-id-9 .tk-ab-cta .wysiwyg p { font-size: 18px !important; }
}

/* ── Motion: the arch opens like a door once; nothing else moves ─────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	body.page-id-9 .ct2-hero-offset .ct2-ho-img { animation: tk-ab-door 1.1s var(--ab-ease) .1s both; }
	@keyframes tk-ab-door { from { clip-path: inset(100% 0 0 0); transform: scale(1.04); } to { clip-path: inset(0 0 0 0); transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
	body.page-id-9 .ct2-hero-offset .ct2-ho-img { animation: none !important; clip-path: none !important; transform: none !important; }
}