/* =========================================================================
   netex · /contact/ (templates/contact.php)
   Five paths (radio index rows) → the matching form (booking / brief / just talk), shown with :has()
   so it works without JS; a Scan-call slot request; two offices drawn from OpenStreetMap; the
   «Κλείστε τη διαγώνιο» moment at full size (footer band switched off on this page).
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- s1 hero (Indigo) ----------------------------------------------------------- */
.ct-hero { --hero-pad: var(--s-6); padding-bottom: calc(var(--ch-v) + var(--s-7)); }
.ct-hero__grid { row-gap: var(--s-7); align-items: center; }
.ct-hero__copy { display: grid; align-content: start; }
.ct-hero .nx-crumbs { margin-bottom: var(--s-4); }
/* Greek from 600px: max-width in em (and 8 columns on desktop), not 17ch. «ch» follows whichever face has loaded,
   so the fallback and the web font wrapped the Greek H1 into 4 and 3 lines: a layout shift whenever the font landed
   late. Measured with tools/qa/xray-fallback.mjs: one line count in both faces, EL and EN, from 360 to 1920 px. */
.ct-hero__h1 { --flar: 50; --volm: 40; max-width: 17ch; font-size: clamp(2.125rem, 1rem + 3.6vw, 4.5rem); line-height: var(--lh-display); letter-spacing: var(--tr-display); text-wrap: balance; }
html[lang="el"] .ct-hero__h1 { max-width: 10em; }
@media (min-width: 600px) { html[lang="el"] .ct-hero__h1 { max-width: 12em; } }
.ct-hero__display { max-width: 26ch; margin-top: var(--s-5); color: var(--fg-2); }
.ct-hero__sub { margin-top: var(--s-5); }
.ct-hero__actions { margin-top: var(--s-6); }
.ct-hero__mail { font: 500 .8125rem/1.4 var(--f-mono); color: var(--fg-2); }
.ct-hero__mail a { color: var(--fg); }
.ct-hero__art { display: none; }
.ct-n { width: 100%; height: auto; overflow: visible; }
.ct-n__a { stroke: var(--paper); }
.ct-n__b { stroke: var(--indigo); }
.ct-n__slot { stroke: var(--cyan); stroke-dasharray: 4 5; }
/* the fallen bar: the N-gradient along its own length (indigo → cyan) and a paper hairline, so its indigo end
   does not dissolve into the Indigo field and read as a glow */
.ct-n__bar { stroke: var(--paper); stroke-width: 1; }
.ct-n__dim { stroke: var(--paper-78i); }
.ct-n text { fill: var(--paper-78i); font: 500 9px var(--f-mono); letter-spacing: .04em; }
@media (min-width: 1024px) {
	.ct-hero__copy { grid-column: 1 / span 8; }
	.ct-hero__art { display: block; grid-column: 9 / -1; }
}

/* ---- s2 the five paths: large typographic radio rows ---------------------------------- */
.ct-paths__head { margin-bottom: var(--s-5); }
.ct-paths__set { margin: 0; border-bottom: var(--bw) solid var(--rule); container-type: inline-size; }
.ct-path {
	position: relative;
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: var(--s-2) var(--s-4);
	align-items: start;
	padding: var(--s-5) var(--s-4);
	border-top: var(--bw) solid var(--rule);
	cursor: pointer;
	transition: background-color var(--dur-ui) var(--ease-mech), color var(--dur-ui) var(--ease-mech);
}
.ct-path input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-path__dot { width: 18px; height: 18px; margin-top: .45em; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; }
.ct-path__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform 120ms var(--ease-mech); }
.ct-path__main { display: grid; gap: var(--s-1); }
.ct-path__title { font: var(--w-h3) clamp(1.375rem, 1.1rem + 1vw, 2rem)/1.15 var(--f-sans); letter-spacing: var(--tr-h3); }
.ct-path__for { font-size: 1rem; color: var(--fg-2); }
.ct-path__next { margin-top: var(--s-2); font: 500 .75rem/1.5 var(--f-mono); letter-spacing: .02em; color: var(--fg-2); }
.ct-path__extra { margin-top: var(--s-2); font-size: var(--t-small); color: var(--fg-2); max-width: 60ch; }
.ct-path__read { grid-column: 2; font: 600 .9375rem/1.3 var(--f-mono); letter-spacing: .02em; }
.ct-path:has(input:checked) { background: var(--ink); color: var(--paper); --fg-2: var(--paper-72); }
.ct-path:has(input:checked) .ct-path__dot::before { transform: none; }
.ct-path:has(input:checked) .ct-path__read { color: var(--cyan); }
.ct-path:has(input:focus-visible) { outline: var(--bw-focus) solid var(--focus); outline-offset: -3px; }
@media (hover: hover) { .ct-path:not(:has(input:checked)):hover { background: var(--bg-2); } }
@container (min-width: 760px) {
	.ct-path { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; padding-block: var(--s-6); }
	.ct-path__read { grid-column: 3; text-align: right; align-self: center; }
}
@media (min-width: 1024px) {
	.ct-paths__head { grid-column: 1 / span 3; }
	.ct-paths__set { grid-column: 4 / -1; }
}

/* ---- s3 the form: the chosen path's form slides in at 47° ----------------------------------- */
.ct-form__head { display: grid; gap: var(--s-3); align-content: start; margin-bottom: var(--s-6); }
.ct-form__title { max-width: 16ch; }
.ct-form__hint { font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.45; max-width: 36ch; }
.ct-form__prefill { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--sig); background: var(--bg-2); font-size: var(--t-small); }
.ct-form__mail { font: 500 .8125rem/1.4 var(--f-mono); color: var(--fg-2); }
.ct-form__forms { display: grid; gap: var(--s-8); align-content: start; }
.ct-form__pick { display: none; }
@supports selector(:has(*)) {
	.ct-form__pick:not([hidden]) { display: grid; gap: var(--s-4); padding: var(--s-7) var(--s-6); border: var(--bw) dashed color-mix(in srgb, var(--fg) 35%, transparent); background: var(--bg); }
	.ct-form__pick-label { font: 500 .75rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
	body:has(.ct-path input:checked) .ct-form__pick { display: none; }
	.ct-form__variant { display: none; }
	body:has(#ct-path-xray:checked, #ct-path-plant:checked) .ct-form__variant[data-variant="booking"],
	body:has(#ct-path-mechanism:checked, #ct-path-web:checked) .ct-form__variant[data-variant="brief"],
	body:has(#ct-path-talk:checked) .ct-form__variant[data-variant="contact"] { display: block; animation: nx-wipe-in var(--dur-cut) var(--ease-cut) backwards; }
	body:has(.ct-path input:checked) .ct-form__title, body:has(.ct-path input:checked) .ct-form__hint { display: none; }
	#ct-book .xr-plant-only { display: none; }
	body:has(#ct-path-plant:checked) #ct-book .xr-plant-only { display: block; }
}
html.rm .ct-form__variant { animation: none !important; }
@media (min-width: 1024px) {
	.ct-form__head { grid-column: 1 / span 4; margin: 0; position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
	.ct-form__forms { grid-column: 5 / -1; }
}

/* ---- s4 slot request ---------------------------------------------------------------------- */
.ct-slot__head { display: grid; gap: var(--s-4); align-content: start; margin-bottom: var(--s-6); }
.xr-slotform { gap: var(--s-5); }
@media (min-width: 1024px) {
	.ct-slot__head { grid-column: 1 / span 5; margin: 0; }
	.ct-slot__form { grid-column: 7 / -1; }
}

/* ---- s5 offices ---------------------------------------------------------------------------- */
.ct-offices__grid { display: grid; gap: var(--s-8) var(--gutter); }
.ct-office { display: grid; gap: var(--s-5); align-content: start; }
.ct-office__name { font-size: var(--t-h3); line-height: 1.1; }
.ct-office__addr { font-size: 1.0625rem; margin-top: var(--s-2); }
.ct-office__region { font-size: var(--t-small); color: var(--fg-2); margin-top: var(--s-1); }
.ct-office__meta { display: grid; gap: var(--s-1); margin: var(--s-4) 0 0; font: 500 .8125rem/1.5 var(--f-mono); }
.ct-office__meta div { display: flex; gap: var(--s-3); }
.ct-office__meta dt { color: var(--fg-2); }
.ct-office__meta dd { margin: 0; }
.ct-office__meta b { color: var(--fg); font-variant-numeric: tabular-nums; }
.ct-offices__foot { display: grid; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: var(--bw) solid var(--rule); }
.ct-reach { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-7); margin: 0; font: 500 .875rem/1.5 var(--f-mono); }
.ct-reach div { display: flex; gap: var(--s-3); }
.ct-reach dt { color: var(--fg-2); }
.ct-reach dd { margin: 0; }
.ct-offices__privacy { font-size: var(--t-small); color: var(--fg-2); max-width: 60ch; }
@media (min-width: 900px) {
	.ct-offices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- s7 what happens next: three stamps on a 47° timeline ------------------------------------ */
.ct-steps { position: relative; display: grid; gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.ct-step { position: relative; display: grid; gap: var(--s-2); align-content: start; padding-left: var(--s-6); }
.ct-step::before { content: ""; position: absolute; left: 6px; top: 2px; width: 2px; height: 22px; background: var(--sig); transform: rotate(43deg); transform-origin: 50% 100%; }
.ct-step__when { justify-self: start; font: 600 .875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--sig); }
.ct-step__what { font-size: 1.0625rem; line-height: 1.5; max-width: 38ch; }
@media (min-width: 900px) {
	.ct-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); padding-top: var(--s-6); border-top: var(--bw) solid var(--rule); }
	.ct-step { padding: var(--s-5) var(--s-5) 0 0; margin-top: calc(var(--i) * var(--s-6)); }
	/* a 47° tick drops from the rule to each stamp; each step sits one notch lower: the timeline runs down the diagonal */
	.ct-step::before { left: 0; top: calc(-1 * var(--s-6) - var(--i) * var(--s-6)); width: 1px; height: calc(var(--s-6) + var(--i) * var(--s-6)); transform: none; }
}
.ct-next__honest { margin-top: var(--s-7); font-family: var(--f-serif); font-style: italic; font-size: var(--t-lead); }

/* ---- s8 the diagonal at full size; s9 other reasons ------------------------------------------- */
.ct-skipdiag:focus { display: inline-block; margin: var(--s-3) var(--margin); padding: var(--s-2) var(--s-4); background: var(--paper); color: var(--ink); }
.ct-close .nx-close__title { font-size: clamp(2.5rem, 1.2rem + 5vw, 6.5rem); }
/* here the eyebrow carries the deck's caption (a full sentence): sentence case reads; a three-line all-caps run does not */
.ct-close .nx-close__copy > .nx-eyebrow { text-transform: none; letter-spacing: .01em; line-height: 1.5; max-width: 52ch; }
.ct-also__title { margin-bottom: var(--s-4); }
.ct-also__list { display: grid; gap: var(--s-4) var(--gutter); margin: 0; padding: 0; list-style: none; font-size: 1.0625rem; line-height: 1.5; color: var(--fg); }
.ct-also__list li { max-width: 46ch; padding-top: var(--s-3); border-top: var(--bw) solid var(--rule); }
.ct-also__list a { color: var(--link); }
@media (min-width: 1024px) {
	.ct-also__title { grid-column: 1 / span 3; margin: 0; padding-top: var(--s-3); }
	.ct-also__list { grid-column: 4 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

} /* end @layer pages */