/* Contact Us page (template-contact.php) — dark-theme reskin of the
   supplied light/lime mockup, plus overrides for the plugin-default
   (Bootstrap-ish, light) styling Visual Form Builder Pro ships with, so
   the existing [vfb id=1] form fits the site's own look instead of
   fighting it. */

/* ---- Hero: same full-bleed-photo-behind-text treatment as every other
   full-bleed hero on the site (homepage/bar-v2/brand-marketing/our-bars/
   sustainability) — see style.css's bar-v2 block for the full reasoning.
   Scoped to .hero > .hero-art (direct child only), NOT the bare
   .hero-art class — that class is reused elsewhere on this page
   (.editorial__photo) and an unscoped rule here would strip that
   photo's own height/positioning too (confirmed gotcha on the
   Sustainability page — see style.css). */
.page-template-template-contact-php{ --maxw: 1440px; }
.page-template-template-contact-php .hero{
	position:relative; overflow:hidden; display:block;
	min-height:440px; max-width:none; margin-left:0; margin-right:0;
	padding-top:0; padding-bottom:0;
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.page-template-template-contact-php .hero > div:first-child{
	position:relative; z-index:1; max-width:610px;
	padding-block:50px;
}
.page-template-template-contact-php .hero > .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
/* Gradient lives on .hero itself, not on .hero-art (which is only 60% wide) — same as the other heroes — so the "solid black" part
   runs past the photo's own left edge instead of the picture appearing to start a long way in. */
.page-template-template-contact-php .hero:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
@media (max-width:900px){
	.page-template-template-contact-php .hero > div:first-child{ max-width:90%; padding-block:50px; }
	.page-template-template-contact-php .hero > .hero-art{ width:100%; }
	.page-template-template-contact-php .hero:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}

/* ---- Every other section on this page: 1440 content width (already
   the sitewide --maxw default, .wrap handles it) with a flat 30px
   top/bottom buffer instead of the shared components' own larger
   clamp()s. */
.page-template-template-contact-php .contact-brief,
.page-template-template-contact-php .contact-steps,
.page-template-template-contact-php .contact-here,
.page-template-template-contact-php .editorial{
	padding-top:30px; padding-bottom:30px;
}
.page-template-template-contact-php .hero h1 b{ color:var(--accent); }
/* Plain bold 16px note under the hero copy (body font) — no pullquote box. */
.contact-hero-note{
	margin:28px 0 0; font-family:'Open Sans',sans-serif; font-weight:700;
	font-size:16px; line-height:1.38; color:var(--ink);
}

/* ---- Give Us the Brief: form card (left, wider) + supporting copy
   (right, narrower) — roughly the mockup's proportions. */
.contact-brief{ display:grid; grid-template-columns:1.7fr 1fr; gap:56px; align-items:stretch; }
@media (max-width:900px){ .contact-brief{ grid-template-columns:minmax(0,1fr); } }

.contact-brief__card{
	background:var(--bg-panel); border:1px solid var(--rule); padding:16px 20px;
}
.contact-brief__card > .eyebrow, .contact-here__intro > .eyebrow, .contact-info-row__item > .eyebrow{ font-size:15px; }
.contact-brief__card > h2{ font-size:24px; line-height:.9; margin-bottom:.3em; }
.contact-brief__card > h2{ font-weight:300; }
.contact-brief__card > h2 b{ color:var(--accent); font-weight:700; }
.contact-brief__card > p{ margin:0 0 8px; font-size:.9rem; line-height:1.38; }

.contact-brief__aside{ display:flex; flex-direction:column; justify-content:flex-start; gap:32px; }
.contact-brief__aside h3{ font-size:32px; line-height:.9; margin:0 0 20px; }
.contact-brief__accent-rule{ display:block; width:50px; height:3px; background:var(--accent); margin-bottom:20px; }
.contact-brief__list{ list-style:none; margin:0 0 20px; padding:0; }
.contact-brief__list li{
	font-family:'Oswald',sans-serif; font-weight:600; font-size:22px; color:var(--ink);
	padding:0; margin:0; line-height:1.3;
}
.contact-brief__aside p{ margin:0; font-size:18px; line-height:1.38; }
/* one line (about 24px) less space under "Tell us what you know, and we'll help you work out the rest." */
.contact-brief__aside > .contact-brief__block:first-child{ margin-bottom:-24px; }

/* "What Happens Next?" lives in the right column under "One Brief / One Partner / One Seamless Delivery": the three steps
   stacked, each with its numbered badge, a thin rule between them. */
.contact-brief__next > .eyebrow{ display:block; font-size:15px; }
.contact-brief__next > h2{ font-size:32px; font-weight:300; line-height:.9; margin:0 0 20px; }
.contact-brief__next > h2 b{ color:var(--accent); font-weight:700; }
.contact-brief__next .contact-steps__row{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:0; }
.contact-brief__next .contact-steps__item{ padding:16px 0; border-left:0; border-top:1px solid var(--rule); }
.contact-brief__next .contact-steps__item:first-child{ padding-top:0; border-top:0; }
.contact-brief__next .contact-steps__item:last-child{ padding-bottom:0; }
.contact-brief__next .contact-steps__num{ width:56px; height:56px; font-size:1.3rem; }
.contact-brief__aside .contact-steps__item h3{ font-size:1rem; line-height:1.2; margin:0 0 4px; }
.contact-brief__aside .contact-steps__item p{ font-size:.92rem; line-height:1.38; }

/* ---- Visual Form Builder Pro restyle — plugin ships its own Bootstrap-
   ish light theme (vfb-style.min.css); these overrides just recolour
   its existing markup/grid (.vfb-row/.vfb-col-*) for the dark theme
   rather than rebuilding the form. Form 4's own fields carry no real
   label text (each field's name is baked into its placeholder instead,
   e.g. placeholder="Name *") — every .vfb-control-label here is empty
   except for a lone required-asterisk, so the label is hidden outright
   rather than left rendering as a floating "*" with nothing beside it. */
.contact-brief__card .vfbp-form .vfb-form-group{ margin-bottom:6px; }
.contact-brief__card .vfb-control-label{ display:none; }
/* VFB's own "heading" field type — the actual visible text sits in a
   sibling .vfb-form-group.vfb-col-12 (both classes on one element,
   which normal fields never combine), not inside the heading field
   itself — used here for the form's "YOUR DETAILS"/"YOUR EVENT"/"WHAT
   ARE YOU PLANNING ?" etc. section dividers. */
.contact-brief__card .vfb-form-group.vfb-col-12 > div > div{
	font-family:'Oswald',sans-serif; font-size:.78rem; letter-spacing:.1em; font-weight:700;
	text-transform:uppercase; color:var(--accent); margin:10px 0 0; line-height:1.2;
}
.contact-brief__card .vfb-form-group.vfb-col-12:first-child > div > div{ margin-top:0; }
.contact-brief__card input.vfb-form-control,
.contact-brief__card textarea.vfb-form-control{
	width:100%; background:var(--bg); border:1px solid var(--rule); border-radius:0;
	color:var(--ink); font-family:'Open Sans',sans-serif; font-size:.9rem;
	padding:7px 10px; box-shadow:none;
}
.contact-brief__card input.vfb-form-control:focus,
.contact-brief__card textarea.vfb-form-control:focus{
	outline:none; border-color:var(--accent);
}
.contact-brief__card input.vfb-form-control::placeholder,
.contact-brief__card textarea.vfb-form-control::placeholder{ color:var(--ink-faint); }
.contact-brief__card .vfb-checkbox label,
.contact-brief__card .vfb-radio label{
	display:flex; align-items:center; gap:8px; color:var(--ink-muted);
	font-size:.9rem; font-weight:400; line-height:1.3; margin-bottom:0;
}
/* Plugin puts a 10px bottom margin on every checkbox/radio row — tightened,
   and the checkbox groups flow across 3 columns (via display:contents on
   VFB's own .vfb-col-6 halves) instead of 2, so they take fewer rows. */
.contact-brief__card .vfbp-form .vfb-checkbox,
.contact-brief__card .vfbp-form .vfb-radio{ margin:0 0 2px; }
.contact-brief__card .vfb-fieldType-checkbox .vfb-row{
	display:grid; grid-template-columns:repeat(3,1fr); gap:0 16px; margin:0;
}
.contact-brief__card .vfb-fieldType-checkbox .vfb-row:before,
.contact-brief__card .vfb-fieldType-checkbox .vfb-row:after{ display:none; }
.contact-brief__card .vfb-fieldType-checkbox .vfb-row > [class*="vfb-col-"]{ display:contents; }
.contact-brief__card .vfbp-form textarea.vfb-form-control{ height:56px; min-height:0; resize:vertical; }
.contact-brief__card .vfbp-form input.vfb-form-control{ height:30px; }
.contact-brief__card .vfb-checkbox input,
.contact-brief__card .vfb-radio input{ width:auto; accent-color:var(--accent); }
/* Plugin's own vfb-style.min.css ships a competing .btn-primary (blue)
   that otherwise wins over our shared one here — force ours with
   !important rather than relying on cascade order against a plugin
   stylesheet we don't control the load order of. */
.contact-brief__card button[type="submit"]{
	margin-top:2px; border:0; cursor:pointer;
	background:var(--accent) !important; color:#0d1a1f !important;
	font-family:'Oswald',sans-serif !important; font-weight:600 !important;
	text-transform:uppercase !important; letter-spacing:.04em !important;
	padding:11px 24px !important; border-radius:2px !important; font-size:.9rem !important;
	box-shadow:none !important;
}
.contact-brief__card button[type="submit"]:hover{ background:#a8dc55 !important; }
.contact-brief__card .vfb-ajax-success{
	background:var(--accent-soft); border-left:3px solid var(--accent);
	color:var(--ink); padding:18px 22px; font-family:'Oswald',sans-serif;
}
.contact-brief__card a{ color:var(--accent); }

/* ---- From Enquiry to Event: 3-step row, vertical divider between
   steps, circular numbered badge per step. */
.contact-steps > .eyebrow{ display:block; }
.contact-steps > h2{ margin-bottom:.6em; }
.contact-steps > h2{ font-weight:300; }
.contact-steps > h2 b{ font-weight:700; }
.contact-steps > h2 b{ color:var(--accent); }
.contact-steps__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:8px; }
/* Badge sits in the left column, spanning the heading + text rows, so the
   number is on the same row as the text rather than above it. */
.contact-steps__item{
	display:grid; grid-template-columns:auto 1fr; column-gap:20px; align-items:center;
	padding-left:24px; border-left:1px solid var(--rule);
}
.contact-steps__item:first-child{ padding-left:0; border-left:0; }
.contact-steps__num{
	grid-row:1 / span 2; align-self:center;
	display:inline-flex; align-items:center; justify-content:center;
	width:72px; height:72px; border-radius:50%; background:var(--accent-soft);
	color:var(--accent); font-family:'Oswald',sans-serif; font-weight:700; font-size:1.7rem;
}
.contact-steps__item h3{ grid-column:2; align-self:end; font-size:1rem; margin:0 0 6px; }
.contact-steps__item p{ grid-column:2; align-self:start; margin:0; font-size:.92rem; }
@media (max-width:760px){
	.contact-steps__row{ grid-template-columns:1fr; }
	.contact-steps__item{ padding-left:0; border-left:0; padding-top:20px; border-top:1px solid var(--rule); }
	.contact-steps__item:first-child{ padding-top:0; border-top:0; }
}

/* ---- Prefer to Talk? — intro copy on the left, then the 3-column info
   row (email/phone/coverage) in the same row, vertical dividers between
   every column, matching the site's other icon+label row components
   (e.g. .bar3-iconrow). */
.contact-here{ display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:center; }
.contact-here__intro h2{
	font-size:38.4px; font-weight:300; line-height:.9; margin:8px 0 12px;
}
.contact-here__intro h2 b{ font-weight:700; color:var(--accent); font-size:inherit; }
.contact-here__intro p{ margin:0; }
.contact-here .contact-info-row{ margin-top:0; }
.contact-here .contact-info-row__item:first-child{ padding-left:24px; border-left:1px solid var(--rule); }
@media (max-width:900px){
	.contact-here{ grid-template-columns:1fr; }
	.contact-here .contact-info-row__item:first-child{ padding-left:0; border-left:0; }
}
.contact-info-row{
	display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:32px; text-align:left;
}
.contact-info-row__item{ padding-left:24px; border-left:1px solid var(--rule); }
.contact-info-row__item:first-child{ padding-left:0; border-left:0; }
.contact-info-row__item svg{
	width:32px; height:32px; fill:none; stroke:var(--accent); stroke-width:2;
	stroke-linecap:round; stroke-linejoin:round; margin-bottom:10px;
}
.contact-info-row__item p{ margin:0 0 8px; font-size:.92rem; }
.contact-info-row__item a{ color:var(--ink); }
.contact-info-row__item a:hover{ color:var(--accent); }
.contact-info-row__bases{ color:var(--ink-muted); }
@media (max-width:760px){
	.contact-info-row{ grid-template-columns:1fr; }
	.contact-info-row__item{ padding-left:0; border-left:0; padding-top:20px; border-top:1px solid var(--rule); }
	.contact-info-row__item:first-child{ padding-top:0; border-top:0; }
}

/* ---- Have an Idea? — copy-only section (photo removed), everything centred. */
.editorial.contact-cta{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; text-align:left; }
.contact-cta .editorial__copy h2{ font-size:38.4px; line-height:.9; font-weight:300; margin-bottom:0; }
.contact-cta__title > .eyebrow{ font-size:.96rem; }
.contact-cta .editorial__copy h2 b{ font-weight:700; font-size:inherit; }
.contact-cta .contact-cta__copy > p.contact-cta__lead{ max-width:none; margin:0 0 16px; }
.contact-cta__copy > p{ max-width:none; margin:0 0 16px; }
.contact-cta .hero-cta{ justify-content:flex-start; padding-left:0; }
@media (max-width:900px){ .editorial.contact-cta{ grid-template-columns:minmax(0,1fr); gap:20px; } .contact-cta .hero-cta{ padding-left:0; } }

/* Phones: the 3-column checkbox lists step down to 2, then 1, so long labels can't push the form wider than the screen. */
@media (max-width:760px){
	.contact-brief__card .vfb-fieldType-checkbox .vfb-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px){
	.contact-brief__card .vfb-fieldType-checkbox .vfb-row{ grid-template-columns:minmax(0,1fr); }
}