/*
Theme Name: TACTILE Child
Description: Minimal project foundation for TACTILE, built with native Elementor elements.
Author: TACTILE Project
Template: hello-elementor
Version: 0.9.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: tactile-child
*/

.tactile-site {
	--tactile-ground: #f2f3f1;
	--tactile-surface: #ffffff;
	--tactile-ink: #202320;
	--tactile-muted: #555c56;
	--tactile-line: #cbd0ca;
	--tactile-accent: #b83d15;
	--tactile-focus: #b83d15;
	--tactile-ease: cubic-bezier(0.22, 1, 0.36, 1);
	color: var(--tactile-ink);
	background: var(--tactile-ground);
	font-family: "Manrope", system-ui, sans-serif;
	line-height: 1.55;
	overflow-wrap: break-word;
}

.tactile-site ::selection {
	color: var(--tactile-surface);
	background: var(--tactile-accent);
}

.tactile-site :focus-visible {
	outline: 3px solid var(--tactile-focus);
	outline-offset: 4px;
}

.tactile-site .tactile-dark {
	--tactile-focus: #ffffff;
	color: var(--tactile-ground);
	background: var(--tactile-ink);
}

.tactile-site [id] {
	scroll-margin-block-start: 24px;
}

.tactile-site img {
	max-inline-size: 100%;
	block-size: auto;
}

.tactile-shell {
	inline-size: min(100% - 128px, 1360px);
	margin-inline: auto;
}

.tactile-site .tactile-button {
	min-block-size: 44px;
	border-radius: 8px;
	transition: transform 140ms var(--tactile-ease);
}

@media (hover: hover) and (pointer: fine) {
	.tactile-site .tactile-button:hover {
		transform: translateY(-1px);
	}
}

.tactile-site .tactile-button:active {
	transform: translateY(1px) scale(0.985);
}

@media (max-width: 1024px) {
	.tactile-shell {
		inline-size: calc(100% - 64px);
	}
}

@media (max-width: 767px) {
	.tactile-shell {
		inline-size: calc(100% - 40px);
	}
}

@media (max-width: 359px) {
	.tactile-shell {
		inline-size: calc(100% - 32px);
	}
}

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

	.tactile-site .tactile-button:hover,
	.tactile-site .tactile-button:active {
		transform: none;
	}
}

@font-face {
 font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
 src: url('assets/fonts/manrope-latin.woff2') format('woff2');
}
@font-face {
 font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
 src: url('assets/fonts/geist-mono-latin.woff2') format('woff2');
}

/* Scope refinements to the native TACTILE page. Content stays in Elementor. */
.tactile-site { isolation: isolate; }
.tactile-site a { text-underline-offset: 5px; }
.elementor .tactile-site [role='tab'][aria-selected='true'] {
 background: #202320; color: #fff; border-color: #202320;
}
.elementor .tactile-site [role='tab'][aria-selected='true']::after {
 content: ''; display: block; width: 20px; height: 2px; background: #fff;
 margin: 6px auto 0;
}
.tactile-site [role='tab']:focus-visible { outline-width: 3px; outline-style: solid; }
.tactile-site [role='tabpanel'] { padding: 0; }
.tactile-site [role='tabpanel'] img { width: 100%; aspect-ratio: 10/7; object-fit: contain; }
.tactile-site .tactile-dark :focus-visible { outline: 3px solid white; outline-offset: 4px; }
.tactile-site .tactile-skip {
 position: absolute; left: 20px; top: 12px; z-index: 20; transform: translateY(-200%);
 background: #fff; color: #202320; padding: 12px 20px; border-radius: 8px;
}
.tactile-site .tactile-skip:focus { transform: none; }
@media (max-width: 359px) { .tactile-site .tactile-shell { width: calc(100% - 32px); } }
.tactile-site header { border-bottom: 1px solid #CBD0CA; }
.elementor .tactile-site header nav a { display: inline-flex; min-height: 44px; align-items: center; }
.tactile-site footer { border-top: 1px solid #555C56; }
.tactile-site .tactile-spec-row { border-bottom: 1px solid #CBD0CA; }
.tactile-site [role='tab'] p { color: inherit; }
@media (max-width: 767px) {
 .tactile-site [role='tablist'] { gap: 8px; }
 .tactile-site [role='tab'] { width: auto; flex: 1; padding: 14px 12px; }
}
.tactile-site [role='tabpanel'].e--selected { animation: tactile-settle 180ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes tactile-settle { from { opacity: 0.65; } to { opacity: 1; } }

/* Make your mark: physical detail on native, editable content. */
.elementor .tactile-hero-product { position: relative; z-index: 1; }
img.tactile-hero-product { width: 100%; height: auto; aspect-ratio: 1692 / 929; object-fit: contain; filter: drop-shadow(0 28px 22px rgba(32,35,32,.12)); transform-origin: center; }
.tactile-site [data-interaction-id='5de79b6d'] { position: relative; z-index: 2; pointer-events: none; }
.tactile-site [data-interaction-id='4744b6f2'] { position: relative; }
.tactile-site [data-interaction-id='6ae3b9bb'],
.tactile-site [data-interaction-id='6ed86bf3'],
.tactile-site [data-interaction-id='116cc445'] { position: relative; z-index: 3; }
.elementor .tactile-lab { --tactile-focus: #fff; border-radius: 0; }
.tactile-lab > * { max-width: 1360px; width: 100%; margin-inline: auto; }
.elementor .tactile-lab .tactile-phrase { padding: 36px 0 48px; min-height: 280px; border-bottom: 1px solid #626960; overflow-wrap: anywhere; word-break: normal; white-space: pre-wrap; caret-color: #ff835b; }
.tactile-phrase[contenteditable] { cursor: text; }
.tactile-phrase.is-empty:empty::before { content: attr(data-placeholder); color: #aab2a8; pointer-events: none; }
.tactile-phrase:focus-visible { outline-offset: 12px; border-radius: 2px; }
.tactile-lab .tactile-rhythm { overflow: hidden; }
.tactile-rhythm > * { transform-origin: center; transition: background-color 140ms ease; }
.elementor .tactile-rhythm > .is-recent { background: #ff835b; }
.tactile-lab [data-interaction-id='4c26a875'] { border-top: 1px solid #626960; }
.elementor .tactile-lab button { min-height: 48px; border: 1px solid #626960; background: #30362f; color: #f2f3f1; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22); transition: transform 140ms cubic-bezier(.22,1,.36,1), background-color 140ms ease; }
.elementor .tactile-lab .tactile-start { background: #f2f3f1; color: #202320; border-color: #f2f3f1; }
.elementor .tactile-lab button[aria-pressed='true'] { background: #f2f3f1; color: #202320; }
.elementor .tactile-lab button:active { transform: translateY(2px); box-shadow: none; }
.elementor .tactile-lab button:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.tactile-lab:not(.is-ready) [data-interaction-id='3c2942d4'] { display: none; }
.tactile-lab:not(.is-ready) .tactile-count::after { content: ' · Enable JavaScript to try the typing studio.'; }
.tactile-inspect { overflow: hidden; border-radius: 12px; }
.tactile-inspect img { transform-origin: 25% 55%; transition: transform 500ms cubic-bezier(.22,1,.36,1); }
.tactile-inspect.is-inspecting img { transform: scale(1.65); }
.tactile-inspect-button:not(.is-ready) { display: none; }
.elementor .tactile-inspect-button { border-bottom: 1px solid #202320; border-radius: 0; }
.tactile-site .tactile-button { box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
@media (hover:hover) and (pointer:fine) {
 .elementor .tactile-lab button:not(:disabled):hover { transform: translateY(-2px); }
}
@media (max-width: 1024px) {
 .elementor .tactile-lab .tactile-phrase { font-size: 76px; }
}
@media (max-width: 767px) {
 .elementor .tactile-lab .tactile-phrase { font-size: 46px; padding: 28px 0; min-height: 240px; }
 .tactile-lab > * { max-width: 100%; }
 .elementor .tactile-lab button { padding: 13px 16px; }
 .tactile-lab .tactile-rhythm { gap: 4px; }
 .tactile-phrase:focus-visible { outline-offset: 6px; }
 img.tactile-hero-product { filter: drop-shadow(0 16px 12px rgba(32,35,32,.1)); }
}
@media (prefers-reduced-motion: reduce) {
 img.tactile-hero-product { transform: none !important; }
 .elementor .tactile-lab button:active, .elementor .tactile-lab button:hover { transform: none; }
}

.elementor .tactile-lab .tactile-save { background: #f2f3f1; color: #202320; border-color: #f2f3f1; }
@media (max-width:359px) { .elementor .tactile-site [data-interaction-id="5de79b6d"] { font-size: 48px; } }

/* Descriptive, persistent navigation; native links remain useful without JS. */
.elementor .tactile-site .tactile-header { position: sticky; top: 0; z-index: 30; box-shadow: 0 3px 12px rgba(32,35,32,.035); }
body.admin-bar .tactile-site .tactile-header { top: 32px; }
.tactile-site [id] { scroll-margin-block-start: 144px; }
.elementor .tactile-header nav a { position: relative; padding: 0; text-decoration: none; }
.tactile-header nav a::after { content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 2px; background: #b83d15; transform: scaleX(0); transform-origin: left; transition: transform 160ms cubic-bezier(.22,1,.36,1); }
.tactile-header nav a[aria-current='location']::after { transform: scaleX(1); }
.tactile-site .tactile-header-cta { white-space: nowrap; }
.elementor .tactile-footer-index a, .elementor .tactile-footer-meta a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.tactile-footer-index a:hover, .tactile-footer-meta a:hover { text-decoration: underline; }
.tactile-site .tactile-footer-meta { border-top: 1px solid #555c56; margin-top: 28px; }
.tactile-site footer [data-interaction-id='b74a961'] a { display: block; color: inherit; }
.elementor .tactile-lab .tactile-sound-choice { line-height: 1.4; white-space: normal; }
.tactile-sound-choice span { font-size: 13px; opacity: .8; font-weight: 400; }
.elementor .tactile-lab .tactile-sound-choice[aria-pressed='true'] { background: #f2f3f1; color: #202320; border-color: #f2f3f1; }
.tactile-lab:not(.is-ready) .tactile-sound-choices, .tactile-lab:not(.is-ready) [data-interaction-id='3f04d555'], .tactile-inspect-help:not(.is-ready) { display: none; }
.tactile-inspect { touch-action: pan-y; cursor: zoom-in; }
.tactile-inspect.is-inspecting { cursor: grab; }
.tactile-inspect.is-dragging { cursor: grabbing; }
.tactile-inspect img { user-select: none; -webkit-user-drag: none; }
.tactile-inspect.is-dragging img { transition: none; }
.tactile-inspect:focus-visible { outline: 3px solid #b83d15; outline-offset: 6px; }
@media (hover:hover) and (pointer:fine) { .tactile-header nav a:hover::after { transform: scaleX(1); } }
@media (max-width:782px) { body.admin-bar .tactile-site .tactile-header { top: 46px; } }
@media (max-width:600px) { body.admin-bar .tactile-site .tactile-header { top: 0; } }
@media (max-width:767px) {
 .elementor .tactile-header nav { grid-column: 1 / -1; order: 3; }
 .elementor .tactile-header .tactile-header-cta { padding: 12px 16px; font-size: 14px; }
 .tactile-site [id] { scroll-margin-block-start: 152px; }
 .elementor .tactile-lab .tactile-sound-choices { gap: 8px; }
 .elementor .tactile-lab .tactile-sound-choice { flex: 1 1 0px; min-width: 0; padding-inline: 8px; }
}
@media (max-width:359px) { .elementor .tactile-site footer [data-interaction-id='b74a961'] { font-size: 66px; } }

@media (hover:hover) and (pointer:fine) { .elementor .tactile-header nav a:hover { text-decoration: none; } }


/* Product cinema: native text and imagery, progressively staged. */
.elementor #top .tactile-cinema { background: #f2f3f1; color: #202320; isolation: isolate; }
.elementor #top .tactile-cinema-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 64px; overflow: clip; }
.elementor #top .tactile-cinema-stage > [data-interaction-id='4744b6f2'] { grid-column: 1 / -1; }
.elementor #top .tactile-cinema-stage > img { grid-column: 1 / -1; max-width: 1120px; justify-self: center; }
.elementor #top .tactile-cinema-detail, .elementor #top .tactile-cinema-flow { padding: 0; gap: 20px; display: flex; flex-direction: column; }
.elementor #top .tactile-cinema-detail h2, .elementor #top .tactile-cinema-flow h2 { font-weight: 500; font-size: clamp(40px,5vw,80px); line-height: .98; letter-spacing: -.04em; }
.elementor #top .tactile-cinema-detail p, .elementor #top .tactile-cinema-flow p { font-size: 17px; line-height: 1.55; }
.elementor #top .tactile-cinema-flow a { display: inline-flex; min-height: 44px; align-items: center; align-self: flex-start; border-bottom: 1px solid currentColor; font-size: 16px; }
.elementor #top .tactile-cinema-word, .elementor #top .tactile-cinema-rail, .elementor #top .tactile-cinema-cue { display: none; }
.elementor #top .tactile-cinema-skip { display: inline-flex; min-height: 44px; align-items: center; font-size: 13px; }
.elementor #top .tactile-cinema-stage > [data-interaction-id='116cc445'] { align-self: end; }
.elementor #top .tactile-cinema.is-cinema { min-height: 300svh; }
.elementor #top .is-cinema .tactile-cinema-stage { position: sticky; top: var(--cinema-top,86px); height: calc(100svh - var(--cinema-top,86px)); min-height: 0; display: block; padding: 0; }
.is-cinema .tactile-cinema-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #b83d15; opacity: var(--cinema-field-opacity,0); pointer-events: none; }
.elementor #top .is-cinema .tactile-cinema-stage > [data-interaction-id='4744b6f2'] { position: absolute; left: 5%; top: 6%; width: 80%; gap: 24px; z-index: 3; }
.elementor #top .is-cinema [data-interaction-id='5de79b6d'] { font-size: clamp(64px,10.4vw,158px); }
.elementor #top .is-cinema [data-interaction-id='6ae3b9bb'] { font-size: 17px; }
.elementor #top .is-cinema [data-interaction-id='6ed86bf3'] { font-size: 15px; padding: 13px 20px; }
.elementor #top .is-cinema img.tactile-hero-product { position: absolute; left: 59%; top: 59%; width: 70%; max-width: 1240px; margin: 0; z-index: 2; transform: translate3d(-50%,-50%,0) rotate(-9deg); filter: drop-shadow(0 30px 24px rgba(32,35,32,.16)); }
.elementor #top .is-cinema .tactile-cinema-word { display: block; position: absolute; top: 2%; left: 2%; width: 100%; font-size: 30vw; letter-spacing: -.04em; font-weight: 600; line-height: .85; color: #f2f3f1; opacity: 0; pointer-events: none; z-index: 0; }
.elementor #top .is-cinema .tactile-cinema-detail, .elementor #top .is-cinema .tactile-cinema-flow { position: absolute; right: 5%; bottom: 16%; width: 33%; z-index: 3; opacity: 0; }
.elementor #top .is-cinema .tactile-cinema-detail { color: #fff; top: 8%; bottom: auto; width: 29%; }
.elementor #top .is-cinema .tactile-cinema-detail h2 { font-size: clamp(40px,4.2vw,64px); }
.elementor #top .is-cinema .tactile-cinema-detail p { font-size: 16px; }
.elementor #top .is-cinema .tactile-cinema-detail h2, .elementor #top .is-cinema .tactile-cinema-detail p { color: inherit; }
.elementor #top .is-cinema .tactile-cinema-rail { position: absolute; bottom: 5%; left: 5%; right: 5%; width: 90%; display: flex; gap: 0; padding: 0; z-index: 4; border-top: 1px solid #7b8075; }
.elementor #top .tactile-cinema-rail .tactile-cinema-step { flex: 1; font-size: 13px; padding-top: 16px; color: #202320; position: relative; }
.tactile-cinema-step::before { content: ''; position: absolute; top: -1px; height: 3px; left: 0; right: 24px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 180ms cubic-bezier(.22,1,.36,1); }
.tactile-cinema-step.is-current::before { transform: scaleX(1); }
.elementor #top .is-cinema .tactile-cinema-cue { display: block; position: absolute; right: 5%; top: 7%; font-size: 12px; writing-mode: vertical-rl; z-index: 4; }
.elementor #top .is-cinema .tactile-cinema-skip { position: absolute; bottom: 9%; left: 5%; z-index: 4; }
.elementor #top .is-cinema .tactile-cinema-stage > [data-interaction-id='116cc445'] { position: absolute; right: 5%; bottom: 9%; font-size: 11px; z-index: 4; }
@media (hover:hover) and (pointer:fine) { .tactile-cinema-flow a:hover { transform: translateX(4px); } }
@media (max-width:1024px) {
 .elementor #top .tactile-cinema-stage { padding: 48px 32px; }
 .elementor #top .is-cinema .tactile-cinema-detail, .elementor #top .is-cinema .tactile-cinema-flow { width: 37%; }
}
@media (max-width:767px) {
 .elementor #top .tactile-cinema-stage { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px; }
 .elementor #top .tactile-cinema-stage > [data-interaction-id='4744b6f2'], .elementor #top .tactile-cinema-stage > img { grid-column: 1; }
 .elementor #top .tactile-cinema.is-cinema { min-height: 280svh; }
 .elementor #top .is-cinema .tactile-cinema-stage > [data-interaction-id='4744b6f2'] { left: 20px; top: 6%; width: calc(100% - 40px); gap: 16px; }
 .elementor #top .is-cinema [data-interaction-id='5de79b6d'] { font-size: clamp(48px,12.8vw,90px); }
 .elementor #top .is-cinema [data-interaction-id='6ae3b9bb'] { font-size: 16px; max-width: 25ch; }
 .elementor #top .is-cinema img.tactile-hero-product { left: 50%; top: 60%; width: 100%; max-width: none; }
 .elementor #top .is-cinema .tactile-cinema-word { top: 40%; left: 0; font-size: 40vw; }
 .elementor #top .is-cinema .tactile-cinema-detail, .elementor #top .is-cinema .tactile-cinema-flow { left: 20px; right: 20px; width: auto; top: 8%; bottom: auto; gap: 16px; }
 .elementor #top .is-cinema .tactile-cinema-detail h2, .elementor #top .is-cinema .tactile-cinema-flow h2 { font-size: clamp(38px,11.8vw,72px); }
 .elementor #top .is-cinema .tactile-cinema-detail p, .elementor #top .is-cinema .tactile-cinema-flow p { font-size: 16px; }
 .elementor #top .is-cinema .tactile-cinema-rail { left: 20px; right: 20px; width: calc(100% - 40px); bottom: 4%; }
 .elementor #top .is-cinema .tactile-cinema-step { font-size: 11px; }
 .elementor #top .is-cinema .tactile-cinema-cue { writing-mode: horizontal-tb; top: auto; bottom: 22%; right: 20px; }
 .elementor #top .is-cinema .tactile-cinema-skip { bottom: 9%; left: 20px; }
 .elementor #top .is-cinema .tactile-cinema-stage > [data-interaction-id='116cc445'] { right: 20px; bottom: 16%; font-size: 10px; }
}

.elementor #top .is-cinema .is-feel .tactile-cinema-rail { border-color: #f2f3f1; }
.elementor #top .is-cinema .is-feel .tactile-cinema-step, .elementor #top .is-cinema .is-feel .tactile-cinema-skip,
.elementor #top .is-cinema .is-feel > [data-interaction-id='116cc445'] { color: #f2f3f1; }
@media (min-width:768px) and (max-width:1024px) {
 .elementor #top .is-cinema img.tactile-hero-product { top: 65%; }
 .elementor #top .is-cinema .tactile-cinema-detail { width: 38%; }
 .elementor #top .is-cinema .tactile-cinema-detail h2 { font-size: 40px; }
 .elementor #top .is-cinema .tactile-cinema-word { top: 12%; font-size: 27vw; }
 .elementor #top .is-cinema .tactile-cinema-flow { top: 8%; bottom: auto; width: 45%; }
}

@media (min-width:1025px) {
 .elementor #top .is-cinema .tactile-cinema-flow { top: 35%; bottom: auto; }
}
@media (min-width:1025px) and (min-aspect-ratio:8/5) {
 .elementor #top .is-cinema img.tactile-hero-product { max-height: 56%; top: 57%; }
 .elementor #top .is-cinema [data-interaction-id='5de79b6d'] { font-size: min(10.4vw,15.8svh); }
 .elementor #top .is-cinema .tactile-cinema-flow { top: 32%; }
}

@media (min-width:1025px) and (min-aspect-ratio:8/5) { .elementor #top .is-cinema .tactile-cinema-stage > [data-interaction-id="116cc445"] { bottom: 12%; } }