/* wito597.css — OnlyCases Swiss International Precision System & Page Layouts */

.hero-opening {
	position:relative;
	width:100%;
	background-color:var(--ground);
	border-bottom:1px solid var(--line);
	overflow:hidden;
}

[data-opening] {
	display:grid;
	grid-template-columns:1fr;
	min-height:calc(100vh - var(--header-height-desktop));
	min-height:calc(100svh - var(--header-height-desktop));
}

@media (max-width: 719px) {
	[data-opening] {
		min-height:auto;
		display:flex;
		flex-direction:column;
	}

	.hero-media-col {
		order:1;
		width:100%;
		aspect-ratio:4 / 5;
		border-bottom:1px solid var(--line);
	}

	.hero-content-col {
		order:2;
		padding-block:var(--space-xl);
		padding-inline:var(--space-m);
	}
}

@media (min-width: 720px) {
	[data-opening] {
		grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
		align-items:stretch;
	}

	.hero-content-col {
		padding-block:var(--space-3xl);
		padding-inline:clamp(var(--space-m), 5vw, var(--space-3xl)) var(--space-xl);
		display:flex;
		flex-direction:column;
		justify-content:center;
		border-right:1px solid var(--line);
		min-width:0;
	}

	.hero-media-col {
		position:relative;
		width:100%;
		height:100%;
		min-height:100%;

		overflow:hidden;
		background-color:var(--surface);
		aspect-ratio:3 / 2;
	}
}

.hero-media-col picture {
	display:block;
	width:100%;
	height:100%;
}

.hero-media-col img {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:22% 28%;
	display:block;
}

.hero-eyebrow {
	display:inline-block;
	font-family:var(--lava-730);
	font-size:var(--step--2);
	text-transform:uppercase;
	letter-spacing:0.14em;
	color:var(--hairline);
	margin-bottom:var(--space-xs);
}

.hero-headline {
	font-family:var(--lava-14d);
	font-size:clamp(1.8rem, 3.8vw, 2.5rem);
	font-weight:800;
	line-height:1.08;
	letter-spacing:-0.04em;
	color:var(--ink);
	margin-bottom:var(--space-s);
	text-wrap:balance;
	word-break:normal;
	hyphens:none;
}

@media (min-width: 1024px) {
	.hero-headline { font-size:clamp(2.3rem, 3.6vw, 3.2rem); }
}

.hero-lede {
	font-size:var(--lava-e0d);
	line-height:1.55;

	color:var(--ink-soft);
	max-width:var(--content-measure);
	margin-bottom:var(--space-l);
}

.hero-actions {
	display:flex;
	align-items:center;
	gap:var(--space-s);
	margin-bottom:0;
}

.calc-section {
	position:relative;
	width:100%;
	border-bottom:1px solid var(--line);
	padding-block:var(--space-2xl);
	background-color:var(--surface);
}

.calc-grid {
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-xl);
}

@media (min-width: 900px) {
	.calc-grid {
		grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
		align-items:stretch;
		gap:var(--space-2xl);
	}
}

.calc-sidebar {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	gap:var(--space-m);

}

.calc-card-container {
	background-color:var(--ground);
	border:1px solid var(--line);
	border-top:3px solid var(--hairline);
	box-shadow:0 12px 32px rgba(0, 0, 0, 0.4);
}

.held-section {
	position:relative;
	width:100%;
	border-bottom:1px solid var(--line);
	padding-block:var(--space-2xl);
}

.held-section:nth-of-type(even) {
	background-color:#171515;
	padding-block:var(--space-3xl);
}

@media (min-width: 1024px) {
	.held-section { padding-block:var(--space-2xl); }

	.held-section:nth-of-type(even) { padding-block:var(--space-3xl); }
}

.held-layout {
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-xl);
}

@media (min-width: 900px) {
	.held-layout {
		grid-template-columns:minmax(0, 360px) minmax(0, 1fr);
		align-items:start;
		gap:var(--space-2xl);
	}

	.held-layout--reverse { grid-template-columns:minmax(0, 1fr) minmax(0, 360px); }

	.held-layout--reverse .held-sticky { order:2; }

	.held-layout--reverse .held-scroller { order:1; }
}

@media (min-width: 1200px) {
	.held-layout {
		grid-template-columns:minmax(0, 420px) minmax(0, 1fr);
		gap:var(--space-3xl);
	}

	.held-layout--reverse { grid-template-columns:minmax(0, 1fr) minmax(0, 420px); }
}

.held-sticky {
	position:static;
	min-width:0;
}

@media (min-width: 900px) {
	.held-sticky {
		position:sticky;
		top:calc(var(--header-height-desktop) + var(--space-m));
		align-self:start;
		padding-bottom:var(--space-l);
	}
}

.held-title {
	font-family:var(--lava-14d);
	font-size:var(--lava-ebd);
	font-weight:800;
	line-height:1.1;
	letter-spacing:-0.03em;
	color:var(--ink);
	margin-bottom:var(--space-s);
	text-wrap:balance;
	word-break:normal;
	hyphens:none;
}

@media (min-width: 1024px) {
	.held-title { font-size:clamp(1.8rem, 2.5vw, 2.6rem); }
}

.held-standfirst {
	font-size:var(--lava-e0d);
	line-height:1.55;
	color:var(--ink-soft);
	max-width:45ch;
	margin-bottom:var(--space-m);
}

.held-meta-box {
	border-top:1px solid var(--line);
	padding-top:var(--space-s);
	margin-top:var(--space-m);
}

.held-scroller {
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:var(--space-xl);
}

.reveal-line-wrap {
	overflow:hidden;
	display:block;
}

.reveal-line {
	display:block;
	transform:translateY(0);
	opacity:1;
	will-change:transform, opacity;
}

.wipe-clip {
	position:relative;
	overflow:hidden;
	clip-path:inset(0 0 0 0);
	will-change:clip-path;
}

.wipe-clip img {
	transform:scale(1);
	transition:transform var(--dur-deliberate) var(--ease-out);
}

.wipe-clip:hover img { transform:scale(1.02); }

.legal-clauses-doc {
	width:100%;
	max-width:var(--container-max);
	margin-inline:auto;
	padding-block:var(--space-2xl);
}

.legal-clauses-header {
	border-bottom:1px solid var(--line);
	padding-bottom:var(--space-xl);
	margin-bottom:var(--space-2xl);
	max-width:860px;
}

.legal-clauses-header h1 {
	font-size:var(--lava-009);
	font-weight:800;
	margin-bottom:var(--space-s);
}

.legal-clauses-meta {
	display:flex;
	flex-wrap:wrap;
	gap:var(--space-m);
	font-family:var(--lava-730);
	font-size:var(--step--1);
	color:var(--ink-soft);
}

.legal-clauses-meta span { color:var(--ink); }

.legal-clause-item {
	display:grid;
	grid-template-columns:1fr;
	padding-block:var(--space-xl);
	border-bottom:1px solid var(--line);
	gap:var(--space-s);
	position:relative;
}

@media (min-width: 768px) {
	.legal-clause-item {
		grid-template-columns:100px minmax(0, 1fr);
		gap:var(--space-xl);
	}
}

@media (min-width: 1024px) {
	.legal-clause-item {
		grid-template-columns:140px minmax(0, 1fr);
		gap:var(--space-2xl);
	}
}

.clause-number {
	font-family:var(--lava-730);
	font-size:var(--step--1);
	color:var(--hairline);
	font-weight:700;
	letter-spacing:-0.02em;
	padding-top:0.15rem;
}

.nevi3e6 { min-width:0; }

.nevi3e6 h2 {
	font-size:var(--lava-f13);
	font-weight:700;
	margin-bottom:var(--space-s);
	color:var(--ink);
}

.nevi3e6 h3 {
	font-size:var(--lava-0af);
	font-weight:600;
	margin-top:var(--space-m);
	margin-bottom:var(--space-xs);
	color:var(--ink);
}

.nevi3e6 p {
	font-size:var(--lava-e0d);
	line-height:1.6;
	color:var(--ink-soft);
	max-width:68ch;
	margin-bottom:var(--space-s);
}

.nevi3e6 p strong {
	color:var(--ink);
	font-weight:600;
}

.nevi3e6 ul {
	list-style:square;
	padding-left:var(--space-m);
	margin-block:var(--space-s);
	color:var(--ink-soft);
}

.nevi3e6 li {
	margin-bottom:var(--space-2xs);
	max-width:65ch;
	line-height:1.5;
}

.nevi3e6 li strong { color:var(--ink); }

.nevi3e6 a {
	color:var(--ink);
	text-decoration:underline;
	text-underline-offset:3px;
}

.nevi3e6 a:hover { color:var(--hairline); }

.cookies-doc { padding-block:var(--space-2xl); }

.cookies-header {
	border-bottom:1px solid var(--line);
	padding-bottom:var(--space-xl);
	margin-bottom:var(--space-xl);
	max-width:860px;
}

.cookie-tablist {
	display:none;
	border-bottom:1px solid var(--line);
	gap:2px;
	background-color:var(--ground);
}

@media (min-width: 768px) {
	.cookie-tablist {
		display:flex;
		flex-wrap:wrap;
		align-items:stretch;
	}
}

.cookie-tab-btn {
	background-color:var(--surface);
	border:1px solid var(--line);
	border-bottom:none;
	color:var(--ink-soft);
	padding:var(--space-xs) var(--space-m);
	font-family:var(--lava-7f0);
	font-size:var(--step--1);
	font-weight:600;
	cursor:pointer;
	min-height:48px;
	display:inline-flex;
	align-items:center;
	transition:background-color var(--dur-fast) var(--ease-out),
							color var(--dur-fast) var(--ease-out),
							border-color var(--dur-fast) var(--ease-out);
}

.cookie-tab-btn:hover {
	background-color:var(--surface-2);
	color:var(--ink);
}

.cookie-tab-btn:active { background-color:var(--ground); }

.cookie-tab-btn:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:-2px;
}

.cookie-tab-btn[aria-selected="true"] {
	background-color:var(--ground);
	color:var(--ink);
	border-color:var(--line);
	border-top:3px solid var(--accent);
	font-weight:700;
}

.cookie-panels-container {
	border:1px solid var(--line);
	border-top:none;
	background-color:var(--surface);
	padding:var(--space-l);
}

@media (max-width: 767px) {
	.cookie-panels-container {
		border-top:1px solid var(--line);
		padding:0;
		background-color:transparent;
	}
}

.cookie-panel { display:block; }

@media (min-width: 768px) {
	.cookie-panel { display:none; }

	.cookie-panel.is-active { display:block; }
}

/* Accordion trigger visible on mobile only */
.cookie-acc-trigger {
	width:100%;
	background-color:var(--surface);
	border:1px solid var(--line);
	color:var(--ink);
	padding:var(--space-s) var(--space-m);
	font-family:var(--lava-7f0);
	font-size:var(--lava-e0d);
	font-weight:600;
	text-align:left;
	display:flex;
	align-items:center;
	justify-content:space-between;
	cursor:pointer;
	margin-top:var(--space-xs);
	min-height:48px;
}

@media (min-width: 768px) {
	.cookie-acc-trigger { display:none; }
}

.cookie-acc-trigger:hover { background-color:var(--surface-2); }

.cookie-acc-trigger:active { background-color:var(--ground); }

.cookie-acc-trigger:focus-visible { outline:2px solid var(--accent); }

.cookie-acc-trigger[aria-expanded="true"] {
	border-left:3px solid var(--hairline);
	background-color:var(--surface-2);
}

.cookie-acc-content {
	display:none;
	padding:var(--space-m);
	background-color:var(--surface);
	border:1px solid var(--line);
	border-top:none;
}

@media (min-width: 768px) {
	.cookie-acc-content {
		display:block !important;
		padding:0;
		border:none;
		background-color:transparent;
	}
}

.cookie-acc-content.is-open { display:block; }

.statute-doc { padding-block:var(--space-2xl); }

.statute-header {
	border-bottom:2px solid var(--hairline);
	padding-bottom:var(--space-l);
	margin-bottom:var(--space-xl);
}

.statute-grid {
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-xl);
}

@media (min-width: 860px) {
	.statute-grid {
		grid-template-columns:1fr 1fr;
		position:relative;
		column-gap:var(--space-2xl);
	}

	.statute-grid::after {
		content:"";
		position:absolute;
		top:0;
		bottom:0;
		left:50%;
		width:1px;
		background-color:var(--line);
		transform:translateX(-50%);
	}
}

.statute-col {
	display:flex;
	flex-direction:column;
	gap:var(--space-l);
}

.statute-entry {
	font-size:var(--step--1);
	line-height:1.6;
	color:var(--ink-soft);
	text-align:justify;
}

.statute-run-in {
	font-family:var(--lava-730);
	font-size:var(--step--1);
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.05em;
	color:var(--ink);
	margin-right:0.45rem;
	display:inline;
}

.statute-sub-entry {
	margin-top:var(--space-xs);
	padding-left:var(--space-s);
	border-left:2px solid var(--line);
	font-size:var(--step--2);
	line-height:1.5;
	color:var(--ink-soft);
}

.data-table-wrap {
	width:100%;
	overflow-x:auto;
	border:1px solid var(--line);
	background-color:var(--surface);
	margin-block:var(--space-m);
	-webkit-overflow-scrolling:touch;
}

.data-table {
	width:100%;
	border-collapse:collapse;
	min-width:600px;
	font-size:var(--step--1);
}

.data-table th,
.data-table td {
	padding:var(--space-xs) var(--space-s);
	border-bottom:1px solid var(--line);
	text-align:left;
}

.data-table th {
	background-color:var(--surface-2);
	color:var(--ink);
	font-family:var(--lava-730);
	font-size:var(--step--2);
	text-transform:uppercase;
	letter-spacing:0.06em;
	font-weight:700;
	white-space:nowrap;
}

.data-table td { color:var(--ink-soft); }

.data-table tr:hover td {
	background-color:rgba(255, 255, 255, 0.03);
	color:var(--ink);
}

.data-table .code-cell {
	font-family:var(--lava-730);
	color:var(--ink);
	white-space:nowrap;
}

.data-table .badge-cell { white-space:nowrap; }

.product-detail-hero {
	border-bottom:1px solid var(--line);
	padding-block:var(--space-xl);
}

.product-detail-grid {
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-xl);
}

@media (min-width: 860px) {
	.product-detail-grid {
		grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
		align-items:start;
		gap:var(--space-2xl);
	}
}

.product-detail-gallery {
	position:relative;
	background-color:var(--surface);
	border:1px solid var(--line);
}

.product-detail-main-img {
	aspect-ratio:1 / 1;
	overflow:hidden;
}

.product-detail-main-img img {
	width:100%;
	height:100%;
	object-fit:cover;
}

.product-detail-summary {
	display:flex;
	flex-direction:column;
	gap:var(--space-s);
}

.product-detail-price {
	font-family:var(--lava-730);
	font-size:var(--lava-f13);
	font-weight:700;
	color:var(--ink);
	margin-block:var(--space-xs);
}

.spec-strip {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:1px;
	background-color:var(--line);
	border:1px solid var(--line);
	margin-block:var(--space-m);
}

@media (min-width: 480px) {
	.spec-strip { grid-template-columns:repeat(4, 1fr); }
}

.spec-strip-item {
	background-color:var(--surface);
	padding:var(--space-xs);
	display:flex;
	flex-direction:column;
	gap:var(--space-3xs);
}

.spec-strip-label {
	font-family:var(--lava-730);
	font-size:var(--step--2);
	text-transform:uppercase;
	color:var(--ink-soft);
	letter-spacing:0.04em;
}

.spec-strip-val {
	font-family:var(--lava-730);
	font-size:var(--lava-e0d);
	font-weight:700;
	color:var(--ink);
}

.faq-list {
	display:flex;
	flex-direction:column;
	gap:var(--space-xs);
}

.faq-item {
	border:1px solid var(--line);
	background-color:var(--surface);
}

.faq-trigger {
	width:100%;
	background:transparent;
	border:none;
	padding:var(--space-s) var(--space-m);
	color:var(--ink);
	font-family:var(--lava-7f0);
	font-size:var(--lava-e0d);
	font-weight:600;
	text-align:left;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--space-s);
	cursor:pointer;
	min-height:52px;
	transition:background-color var(--dur-fast) var(--ease-out);
}

.faq-trigger:hover { background-color:var(--surface-2); }

.faq-trigger:active { background-color:var(--ground); }

.faq-trigger:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:-2px;
}

.faq-trigger .icon {
	transition:transform var(--dur-fast) var(--ease-out);
	color:var(--ink-soft);
}

.faq-trigger[aria-expanded="true"] .icon {
	transform:rotate(180deg);
	color:var(--hairline);
}

.faq-body {
	display:none;
	padding:0 var(--space-m) var(--space-m) var(--space-m);
	color:var(--ink-soft);
	font-size:var(--step--1);
	line-height:1.55;
	border-top:1px solid transparent;
}

.faq-body.is-open { display:block; }

.contact-hero {
	border-bottom:1px solid var(--line);
	padding-block:var(--space-2xl);
}

.contact-grid {
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-xl);
}

@media (min-width: 860px) {
	.contact-grid {
		grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
		gap:var(--space-2xl);
	}
}

.contact-card-fact {
	background-color:var(--surface);
	border:1px solid var(--line);
	padding:var(--space-m);
	display:flex;
	flex-direction:column;
	gap:var(--space-2xs);
	margin-bottom:var(--space-m);
}

.contact-card-fact-label {
	font-family:var(--lava-730);
	font-size:var(--step--2);
	text-transform:uppercase;
	color:var(--hairline);
	letter-spacing:0.06em;
}

.contact-card-fact-val {
	font-size:var(--lava-e0d);
	font-weight:600;
	color:var(--ink);
}

.contact-card-fact a {
	color:var(--ink);
	text-decoration:underline;
	text-underline-offset:2px;
}

.contact-card-fact a:hover { color:var(--hairline); }

.workflow-steps {
	display:flex;
	flex-direction:column;
	gap:var(--space-m);
	position:relative;
}

.workflow-step-card {
	background-color:var(--surface);
	border:1px solid var(--line);
	padding:var(--space-m);
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-s);
	transition:border-color var(--dur-fast) var(--ease-out);
}

@media (min-width: 640px) {
	.workflow-step-card {
		grid-template-columns:140px minmax(0, 1fr);
		align-items:start;
		gap:var(--space-m);
	}
}

.workflow-step-card:hover { border-color:var(--hairline); }

.workflow-step-tag {
	font-family:var(--lava-730);
	font-size:var(--step--1);
	font-weight:700;
	color:var(--hairline);
	letter-spacing:0.05em;
}

.workflow-step-content h3 {
	font-size:var(--lava-0af);
	font-weight:700;
	margin-bottom:var(--space-2xs);
	color:var(--ink);
}

.workflow-step-content p {
	font-size:var(--step--1);
	color:var(--ink-soft);
	line-height:1.5;
	margin:0;
}

.error-scene {
	min-height:calc(100vh - var(--header-height-desktop) - 200px);
	min-height:calc(100svh - var(--header-height-desktop) - 200px);
	display:flex;
	align-items:center;
	justify-content:center;
	padding-block:var(--space-3xl);
	text-align:center;
}

.error-box {
	max-width:620px;
	padding:var(--space-xl);
	background-color:var(--surface);
	border:1px solid var(--line);
	margin-inline:auto;
}

.error-status {
	font-family:var(--lava-730);
	font-size:var(--lava-957);
	font-weight:700;
	color:var(--hairline);
	line-height:1;
	margin-bottom:var(--space-s);
}

.error-title {
	font-size:var(--lava-ebd);
	font-weight:800;
	margin-bottom:var(--space-s);
	color:var(--ink);
}

.error-desc {
	font-size:var(--lava-e0d);
	color:var(--ink-soft);
	margin-bottom:var(--space-l);
	max-width:50ch;
	margin-inline:auto;
}

.error-actions {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:var(--space-s);
	flex-wrap:wrap;
}

/* Thanks Confirmation Box */
.thanks-card {
	background-color:var(--surface);
	border:1px solid var(--line);
	border-left:4px solid var(--accent);
	padding:var(--space-l);
	max-width:720px;
	margin-inline:auto;
	margin-block:var(--space-2xl);
}

.thanks-ticket-bar {
	background-color:var(--surface-2);
	border:1px solid var(--line);
	padding:var(--space-s);
	font-family:var(--lava-730);
	font-size:var(--lava-e0d);
	color:var(--ink);
	margin-block:var(--space-m);
}

.matrix-toolbar {
	display:flex;
	flex-wrap:wrap;
	gap:var(--space-2xs);
	align-items:center;
	margin-bottom:var(--space-m);
}

.filter-chip {
	background-color:var(--surface);
	border:1px solid var(--line);
	color:var(--ink-soft);
	padding:var(--space-2xs) var(--space-s);
	font-family:var(--lava-730);
	font-size:var(--step--2);
	cursor:pointer;
	min-height:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	transition:background-color var(--dur-fast) var(--ease-out),
							color var(--dur-fast) var(--ease-out),
							border-color var(--dur-fast) var(--ease-out);
}

.filter-chip:hover {
	background-color:var(--surface-2);
	color:var(--ink);
}

.filter-chip:active { background-color:var(--ground); }

.filter-chip:focus-visible { outline:2px solid var(--accent); }

.filter-chip.is-active,
.filter-chip[aria-pressed="true"] {
	background-color:var(--surface-2);
	border-color:var(--hairline);
	color:var(--ink);
	font-weight:700;
}

.swiss-grid-marker {
	display:inline-flex;
	align-items:center;
	gap:var(--space-2xs);
	font-family:var(--lava-730);
	font-size:var(--step--2);
	color:var(--ink-soft);
	text-transform:uppercase;
	letter-spacing:0.08em;
	padding-bottom:var(--space-3xs);
}

.swiss-grid-marker::before {
	content:"";
	display:inline-block;
	width:8px;
	height:8px;
	background-color:var(--hairline);
}

.swiss-divider {
	display:flex;
	align-items:center;
	width:100%;
	margin-block:var(--space-l);
}

.swiss-divider::before {
	content:"";
	flex-grow:1;
	height:1px;
	background-color:var(--line);
}

.swiss-divider-text {
	padding-inline:var(--space-s);
	font-family:var(--lava-730);
	font-size:var(--step--2);
	color:var(--ink-soft);
	text-transform:uppercase;
	letter-spacing:0.05em;
}

.swiss-divider::after {
	content:"";
	flex-grow:1;
	height:1px;
	background-color:var(--line);
}
