/* Contact page only. Layout follows the supplied reference; every colour comes
   from the site tokens, so the page reads as the same brand as the rest.
   Icons are navy (--vv-navy), rules and rings are gold (--vv-gold). */

.vvt-contact {
	--ct-ink: var(--vv-muted);
	--ct-line: var(--vv-line);

	background: var(--vv-cream);
	color: var(--ct-ink);
}

/* ---------------------------------------------------- shared bits ----- */

.vvt-contact .vvt-divider { justify-content: flex-start; margin: .7rem 0 1.3rem; color: var(--vv-gold); }
.vvt-contact .vvt-divider svg { width: var(--vv-divider-w); }

.vvt-ct-eyebrow {
	display: inline-block;
	font-size: var(--vv-eyebrow); font-weight: 700; letter-spacing: var(--vv-eyebrow-track);
	text-transform: uppercase; color: var(--vv-gold-deep);
}

.vvt-ct-title {
	margin: 0;
	font-family: var(--vv-serif); font-weight: 700;
	font-size: var(--vv-h1);
	line-height: 1.16;
	color: var(--vv-navy);
}

.vvt-ct-h2 {
	margin: 0;
	font-family: var(--vv-serif); font-weight: 700;
	font-size: var(--vv-h2);
	color: var(--vv-navy);
}

.vvt-contact p { line-height: 1.7; }

/* ------------------------------------------------------- 1 · hero ----- */

.vvt-ct-hero {
	position: relative; overflow: hidden;
	padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}

.vvt-ct-hero__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
}

.vvt-ct-lede { max-width: 34ch; margin: .2rem 0 clamp(1.75rem, 3.5vw, 2.75rem); font-size: 1.02rem; }

.vvt-ct-hero__media { margin: 0; }
.vvt-ct-hero__media img { width: 100%; height: auto; }

/* Four trust marks, split by hairlines like the reference. */
.vvt-ct-marks {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 0; margin: 0; padding: 0; list-style: none;
}

.vvt-ct-marks li { padding: 0 1.15rem; border-right: 1px solid var(--ct-line); }
.vvt-ct-marks li:first-child { padding-left: 0; }
.vvt-ct-marks li:last-child { border-right: 0; }

.vvt-ct-marks__ico { display: block; margin-bottom: .7rem; color: var(--vv-navy); }
.vvt-ct-marks__ico svg { width: 30px; height: 30px; stroke-width: 1.2; }

.vvt-ct-marks h2 {
	margin: 0 0 .35rem;
	font-family: var(--vv-sans); font-size: .68rem; font-weight: 700;
	letter-spacing: .13em; text-transform: uppercase; color: var(--vv-gold-deep);
}

.vvt-ct-marks p { margin: 0; font-size: .74rem; line-height: 1.5; }

/* ---------------------------------------------- 2 · form + details ---- */

/* Sits below the hero, not over it - the lift was clipping the trust marks. */
.vvt-ct-panel { position: relative; z-index: 2; }

.vvt-ct-card {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
	background: #fffdf8;
	border: 1px solid var(--ct-line);
	border-radius: var(--vv-radius-lg);
	box-shadow: var(--vv-shadow);
}

.vvt-ct-form,
.vvt-ct-touch { position: relative; z-index: 2; }

/* Floral vine down the right edge only, as in the reference. The artwork's
   stem sits right of centre, so the crop is pulled that way to keep it. */
.vvt-ct-card__vine { position: absolute; inset: 0 0 0 auto; z-index: 1; width: 160px; opacity: .85; pointer-events: none; }
.vvt-ct-card__vine img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }

.vvt-ct-form,
.vvt-ct-touch { padding: clamp(1.75rem, 3.2vw, 3rem); }

/* Keep the details clear of the vine. */
.vvt-ct-touch { padding-right: clamp(1.75rem, 13vw, 11rem); }

.vvt-ct-form { border-right: 1px solid var(--ct-line); }

/* ---- the form itself ---- */

.vvt-ct-form__el {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.1rem; margin-top: .4rem;
}

.vvt-ct-field { margin: 0; display: grid; gap: .4rem; }
.vvt-ct-field--wide { grid-column: 1 / -1; }
.vvt-ct-field--phone { grid-column: 1 / -1; }
.vvt-ct-field--submit { margin-top: .5rem; }

.vvt-ct-field label {
	font-size: .76rem; font-weight: 600; letter-spacing: .04em;
	color: var(--vv-navy);
}

.vvt-ct-field label span { color: var(--vv-gold-deep); }

.vvt-ct-field input,
.vvt-ct-field select,
.vvt-ct-field textarea {
	width: 100%;
	padding: .8rem .95rem;
	background: #fff;
	border: 1px solid var(--ct-line);
	border-radius: var(--vv-radius);
	color: var(--vv-ink);
	font-family: var(--vv-sans); font-size: .92rem;
	transition: border-color .2s var(--vv-ease), box-shadow .2s var(--vv-ease);
}

.vvt-ct-field textarea { resize: vertical; min-height: 150px; }

.vvt-ct-field input:focus,
.vvt-ct-field select:focus,
.vvt-ct-field textarea:focus {
	outline: 0;
	border-color: var(--vv-navy-soft);
	box-shadow: 0 0 0 3px rgba(36, 64, 108, .12);
}

/* Country code sits against the number, reading as one control. */
.vvt-ct-phone { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); gap: .6rem; }

.vvt-ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vvt-ct-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	width: 100%; padding: .95rem 1.5rem;
	background: var(--vv-navy); color: #fff;
	border: 0; border-radius: var(--vv-radius);
	font-family: var(--vv-sans); font-size: .8rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
	transition: background .22s var(--vv-ease), transform .22s var(--vv-ease);
}

.vvt-ct-submit:hover { background: var(--vv-navy-deep); transform: translateY(-2px); }

.vvt-ct-reply {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	margin: 1.1rem 0 0; font-size: .8rem; color: var(--vv-muted);
}

.vvt-ct-reply svg { width: 16px; height: 16px; color: var(--vv-gold); }

.vvt-ct-note {
	margin: 0 0 1.1rem; padding: .85rem 1rem;
	border-left: 3px solid var(--vv-gold);
	background: var(--vv-cream);
	font-size: .88rem;
}

.vvt-ct-note--ok { border-left-color: var(--vv-navy); color: var(--vv-navy); }
.vvt-ct-note--bad { border-left-color: var(--vv-gold-deep); color: var(--vv-gold-deep); }

/* ---- get in touch ---- */

.vvt-ct-list { display: grid; gap: 1.35rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.vvt-ct-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: .95rem; align-items: start; }

.vvt-ct-list__ico {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border: 1px solid var(--vv-gold); border-radius: 50%;
	background: #fff; color: var(--vv-navy);
}

.vvt-ct-list__ico svg { width: 20px; height: 20px; }

.vvt-ct-list h3 { margin: 0 0 .25rem; font-family: var(--vv-sans); font-size: .86rem; font-weight: 700; color: var(--vv-navy); }
.vvt-ct-list p { margin: 0; font-size: .86rem; line-height: 1.55; }
.vvt-ct-list a { color: inherit; }
.vvt-ct-list a:hover { color: var(--vv-navy); }

.vvt-ct-bulk {
	margin-top: 1.6rem; padding: 1.15rem 1.25rem;
	background: var(--vv-cream);
	border: 1px solid var(--ct-line); border-radius: var(--vv-radius);
}

.vvt-ct-bulk h3 { margin: 0 0 .3rem; font-family: var(--vv-sans); font-size: .88rem; font-weight: 700; color: var(--vv-navy); }
.vvt-ct-bulk p { margin: 0 0 .9rem; font-size: .82rem; }

/* The WhatsApp button (.vvt-wa) lives in cta-band.css - it is shared with the
   closing band and the policy pages. */

/* ------------------------------------------------ 3 · why connect ----- */

.vvt-ct-why { padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(2rem, 4vw, 3rem); text-align: center; }

.vvt-ct-eyebrow--mid { display: block; }
.vvt-ct-title--mid { margin: .55rem 0 clamp(1.75rem, 3.5vw, 2.5rem); font-size: var(--vv-h2); }

.vvt-ct-why__grid {
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1rem; margin: 0; padding: 0; list-style: none;
}

.vvt-ct-why__grid li {
	display: grid; align-content: start; gap: .55rem;
	padding: 1.6rem 1rem;
	background: #fffdf8;
	border: 1px solid var(--ct-line); border-radius: var(--vv-radius);
	transition: transform .28s var(--vv-ease), box-shadow .28s var(--vv-ease);
}

.vvt-ct-why__grid li:hover { transform: translateY(-4px); box-shadow: var(--vv-shadow-sm); }

.vvt-ct-why__ico { color: var(--vv-navy); }
.vvt-ct-why__ico svg { width: 30px; height: 30px; margin-inline: auto; stroke-width: 1.2; }

/* Two lines reserved for every heading, so the six paragraphs start on the
   same baseline whether the title wraps or not. */
.vvt-ct-why__grid h3 {
	margin: 0; min-height: 2.7em;
	font-family: var(--vv-sans); font-size: .86rem; font-weight: 700;
	line-height: 1.35; color: var(--vv-navy);
}

.vvt-ct-why__grid p { margin: 0; font-size: .76rem; line-height: 1.55; }

/* The closing band (.vvt-cta) lives in cta-band.css, shared with the policy
   pages via template-parts/cta-band.php. */

/* ------------------------------------------------------ responsive ---- */

@media (max-width: 1100px) {
	.vvt-ct-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
	.vvt-ct-hero__grid { grid-template-columns: 1fr; }
	.vvt-ct-hero__media { order: -1; max-width: 620px; margin-inline: auto; }
	.vvt-ct-lede { max-width: none; }

	.vvt-ct-card { grid-template-columns: 1fr; }
	.vvt-ct-form { border-right: 0; border-bottom: 1px solid var(--ct-line); }
	.vvt-ct-touch { padding-right: clamp(1.75rem, 3.2vw, 3rem); }
	.vvt-ct-card__vine { display: none; }
}

@media (max-width: 720px) {
	.vvt-ct-marks { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 0; }
	.vvt-ct-marks li:nth-child(2n) { border-right: 0; }
	.vvt-ct-marks li:nth-child(2n+1) { padding-left: 0; }

	.vvt-ct-form__el { grid-template-columns: 1fr; }
	.vvt-ct-phone { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }

	.vvt-ct-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.vvt-ct-why__grid { grid-template-columns: 1fr; }
	.vvt-ct-phone { grid-template-columns: 1fr; }
}

/* Shown when a product page has handed the form its opening line. Quieter than
   the success and error notes - it is context, not an outcome. */
.vvt-ct-note--info { border-left-color: var(--vv-gold); color: var(--vv-muted); }