/**
 * Fitzroy redesign — Contact page (WP1)
 * Built to Hugo's EXACT Figma spec (node 432:49838, pulled via /files?ids=).
 * Every size/colour/space below is from the design, not eyeballed.
 * Desktop = the design's 1440 canvas; base styles stack for narrow screens.
 */

/* ====== CLEAN-ROOM BASELINE (2026-08-11, v1 stack retirement) ======
   This page used to run the classic stack, and two things it inherited from those sheets
   were never written down here. When the page moved to the clean room they vanished and
   the form moved. Both are restored EXACTLY as measured on the page before the migration
   (tools/shot/_ccsnap.js, evidence/contact-migration-2026-08-11/before-1440.json).

   1. The base type. The classic stack set the body to Roboto Flex 17px/26.86px and every
      wrapper in the form inherited it; the v2 stack sets no body font at all, so it fell
      back to Times New Roman 16px and each field lost a pixel of height (the textarea
      lost four). Restored on the page's own sections, NOT on <main>, so the shared footer
      partial keeps inheriting exactly what it inherits on every other v2 page. */
.contact-hero,
.reviews-strip,
.belief {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.58;   /* 17 x 1.58 = 26.86px, the measured v1 value */
}

/* 2. The contact-detail icons. #ic-pin is a bare path in the sprite: components/icons.css
      was giving every .ic `fill: none; stroke: currentColor`, and the v2 reset instead has
      a global `svg { fill: currentColor }`, which turns the outline pin into a solid gold
      blob (the currentColor trap, _contact-icon-check.js). The nav icons are deliberately
      NOT included: #ic-phone carries its own fill="none" in the sprite, so .btnav renders
      here exactly as it does on every other v2 page. */
.cd-row .ic {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--c-gold);
	vertical-align: middle;
}

/* ====== HERO ====== */
.contact-hero {
	background:
		linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
		url('../../img/r1/hero.jpg') center/cover no-repeat,
		#15292c;
	color: var(--c-sand);
}
.contact-hero__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

/* Form card (left) — sand, 2px black border, 80/72 padding, 48 gap */
.contact-card {
	background: var(--c-sand);
	border: 2px solid rgba(0,0,0,0.1);   /* Hugo: #000 @10%, 2px inside */
	box-sizing: border-box;
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.cc-head { display: flex; flex-direction: column; gap: 24px; }
.contact-card__title {
	font-family: var(--font-title); font-weight: 400;
	font-size: 36px; line-height: 40px; color: var(--c-ink); margin: 0;
}
.contact-card__intro {
	font-family: var(--font-body); font-weight: 300;
	font-size: 16px; line-height: 26px; color: rgba(0,0,0,0.6); margin: 0;
}
.cc-body { display: flex; flex-direction: column; gap: 40px; }
.cc-inputs { display: flex; flex-direction: column; gap: 30px; }
.cc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.cc-field input,
.cc-field textarea {
	width: 100%; box-sizing: border-box;
	background: transparent; border: 0; border-bottom: 1px solid rgba(0,0,0,0.28);
	border-radius: 0; padding: 0 0 4px;
	font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 26px; color: #000000;
}
.cc-field input:focus, .cc-field textarea:focus { outline: none; border-bottom-color: var(--c-gold); }
/* simple fields: the field name is a black label-style placeholder on the line */
.cc-field input::placeholder { color: #000000; opacity: 1; }
/* About your trip: real label above + grey-placeholder textarea */
.cc-field--area label { display: block; font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 26px; color: #000; margin-bottom: 8px; }
.cc-field--area textarea { resize: vertical; min-height: 26px; }
.cc-field--area textarea::placeholder { color: rgba(0,0,0,0.3); }
.cc-phone { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(0,0,0,0.28); padding-bottom: 4px; }
.cc-phone:focus-within { border-bottom-color: var(--c-gold); }
.cc-phone .cf-flag { width: 20px; height: 15px; object-fit: cover; flex: 0 0 20px; display: block; }
.cc-phone select { border: 0; background: transparent; font-family: var(--font-body); font-weight: 300; font-size: 16px; color: #000; padding: 0; }
.cc-phone input { flex: 1; border-bottom: 0; padding: 0; }
/* Country-code picker (intl-tel-input 29, 2026-08-17). Keeps the design's flag + code + number on
   one underline; the library's list is recoloured to the sand palette. The list sits INSIDE the
   hero card on desktop and inherits its sand text colour, so colours are set explicitly here.
   The no-JavaScript fallback (flag image + two-option select) is hidden once the picker is up. */
.cc-phone.has-iti { gap: 0; }
.cc-phone.has-iti .cf-flag, .cc-phone.has-iti select[name="phone_cc"] { display: none; }
.cc-phone .iti { flex: 1; display: block; width: 100%; font-family: var(--font-body);
  --iti-hover-color: rgba(177,159,112,0.18); --iti-border-color: rgba(0,0,0,0.15); --iti-country-selector-bg: #f9f5f2; --iti-icon-color: #000; }
.cc-phone .iti input[type="tel"] { width: 100%; }
.cc-phone .iti__selected-country { color: #000; }
.cc-phone .iti__selected-country:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.cc-phone .iti__selected-country-primary { padding-left: 0; }
.cc-phone .iti__selected-dial-code { font-family: var(--font-body); font-weight: 300; font-size: 16px; color: #000; }
.cc-phone .iti__country-selector, .iti--detached-country-selector .iti__country-selector { color: #000; background: #f9f5f2; border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.5; }
.cc-phone .iti .iti__search-input, .iti--detached-country-selector .iti__search-input { font-family: var(--font-body); font-weight: 300; font-size: 16px; color: #000; background: transparent; border: 0; border-radius: 0; padding: 10px 40px 10px 37px; }
.cc-phone .iti .iti__search-input:focus, .iti--detached-country-selector .iti__search-input:focus { outline: 0; }
.cc-phone .iti__search-input-wrapper, .iti--detached-country-selector .iti__search-input-wrapper { border-bottom-color: rgba(0,0,0,0.28); }
/* The list height CANNOT be raised from CSS. Measured 2026-08-23: the library writes the panel's
   width/height/top onto it as an inline style when it opens, from its own constant (search 37 + list
   185 = 222), and it does not read the list's max-height at all -- set the list to 320 and it simply
   paints 98px of countries outside the panel's background, over the page behind it, which is what
   Paul saw. So the inline dropdown keeps the library's own height, where the panel and the list are
   guaranteed to agree at every width. The full-screen sheet on phones is a different element with a
   different mechanism (the panel is position:relative there and grows with its list, measured 365 =
   320 + 45), so it keeps the taller list. */
.iti--detached-country-selector .iti__country-list { max-height: 320px; }
/* The panel's height is written onto it as an inline style by the library, from its own constants
   (a 37px search row plus a 185px list). Our search box is taller than that -- it carries the site's
   16px type and a wider inset for the magnifier -- so the list was starting lower than the library
   had allowed for and its last rows painted outside the panel, over the page behind it. Rather than
   trim the search box back to the library's assumption, the panel becomes a flex column and the list
   takes exactly what is left of whatever height the library set, at any type size. Measured: 0px
   outside the panel at 1440 and 1920 on both forms. The full-screen sheet on phones sizes itself and
   is left alone. */
/* :not(.iti__hide) is load-bearing, not decoration. .iti__hide{display:none} is the ONLY thing the
   library uses to close the panel, and a bare display:flex here outranks it, so the list stayed on
   screen after a country was chosen even though the library had recorded the choice and set
   aria-expanded="false" (Paul, 2026-08-23). Never set display on this element unconditionally. */
.cc-phone .iti--inline-country-selector .iti__country-selector:not(.iti__hide) { display: flex; flex-direction: column; overflow: hidden; }
/* flex only. The library's own 185px cap STAYS: the closed panel is still in the document, and
   without a cap the list stood 9,500px tall and stretched the page 6,000px below its footer,
   which the responsive sweep failed on at 22 widths. Inside a 222px panel the list is handed
   174 by flex, under the cap either way. */
.cc-phone .iti--inline-country-selector .iti__country-list { flex: 1 1 auto; min-height: 0; }

/* Never narrower than the field it belongs to. Handled in js/phone-country.js by the library's own
   fixDropdownWidth:false, NOT by a min-width here: the panel is positioned against the flag button's
   62px container, so a percentage width resolves against 62 and does nothing. */
.cc-phone .iti__country, .iti--detached-country-selector .iti__country { padding: 8px 12px; color: #000; }
.cc-phone .iti__dial-code, .iti--detached-country-selector .iti__dial-code { color: #6b6353; margin-left: 6px; }
.iti--fullscreen-popup.iti--detached-country-selector { background-color: rgba(21,41,44,0.6); }
.iti--fullscreen-popup .iti__country-selector { max-height: 80vh; }

.cc-submit { display: flex; flex-direction: column; gap: 24px; }
.cc-submit__btn {
	width: 100%; height: 50px; border: 0; border-radius: 0;
	background: var(--c-gold); color: #ffffff;
	font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 24px;
	letter-spacing: 1.7px; text-transform: uppercase; cursor: pointer;
	transition: background-color 0.2s ease;
}
.cc-submit__btn:hover { background: var(--c-ink); }
.cc-privacy {
	text-align: center; font-family: var(--font-body); font-weight: 300;
	font-size: 16px; line-height: 26px; color: rgba(0,0,0,0.3); margin: 0;
}

/* Contact details (right) — transparent over the image */
.contact-details { padding: 32px 24px; color: #ffffff; display: flex; flex-direction: column; gap: 48px; }
.contact-details__title {
	font-family: var(--font-title); font-weight: 400;
	font-size: 28px; line-height: 28px; color: #ffffff; margin: 0;
}
.cd-head { display: flex; flex-direction: column; gap: 24px; }
.contact-details__intro {
	font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 26px; color: #ffffff; margin: 0;
}
.cd-rows { display: flex; flex-direction: column; }
.cd-row {
	display: flex; align-items: flex-start; gap: 18px;
	padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.18);
	font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 26px;
}
.cd-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }
.cd-row .ic { flex: 0 0 22px; color: var(--c-gold); margin-top: 2px; }
.cd-row a { color: inherit; text-decoration: none; }
.cd-row a:hover { color: var(--c-gold); }
/* The two phone numbers stack, one per line, rather than sharing a line separated by a
   slash (Paul, 2026-08-11: "I don't like them being written like that"). A deliberate
   departure from the Figma node, which runs them together. */
.cd-tel { display: block; }
.cd-tel + .cd-tel { margin-top: 8px; }

/* ====== REVIEWS STRIP ====== */
.reviews-strip {
	position: relative; overflow: hidden;
	background: var(--c-sand); text-align: center;
	padding: 64px 24px;
}
.reviews-strip::before {
	content: ""; position: absolute; inset: 0;
	background: url('../../img/r1/topo-contours.svg') center/cover no-repeat; opacity: 0.04; pointer-events: none;  /* Hugo: topographic-map-background opacity 0.04 */
}
.reviews-strip > * { position: relative; }
.reviews-strip__link { display: block; color: inherit; text-decoration: none; }
.reviews-strip__link:hover .reviews-strip__title, .reviews-strip__link:focus-visible .reviews-strip__title { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.reviews-strip__link:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 6px; }
.reviews-strip__stars { color: var(--c-gold); font-size: 40px; line-height: 1; letter-spacing: 8px; margin: 0 0 32px; }
.reviews-strip__title {
	font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 28px;
	letter-spacing: 2.2px; text-transform: uppercase; color: var(--c-ink); margin: 0 0 24px;
}
.reviews-strip__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; color: var(--c-ink); }
.reviews-strip__brand .rev-icon { display: inline-flex; width: 26px; height: 26px; color: var(--c-ink); }
.reviews-strip__brand .rev-icon svg { width: 100%; height: 100%; }
.reviews-strip__brand .rev-io { color: var(--c-ink); }
/* official REVIEWS.io wordmark (same asset + size as the v2reviews component site-wide) */
.reviews-strip__logo { display: block; width: 176px; height: 30px; }

/* ====== BELIEF BAND ====== */
.belief { background: #0e191b; color: var(--c-sand); }
.belief__inner {
	max-width: 1440px; margin: 0 auto;
	padding: 64px 24px;
	display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
}
.belief__media { aspect-ratio: 1 / 1; background: url('../../img/r1/belief.webp') center/cover no-repeat;   /* 125KB webp replaces the 320KB jpeg (2026-08-16 sweep) */ }
.belief__copy { display: flex; flex-direction: column; gap: 24px; }
.belief__eyebrow {
	font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 22px;
	letter-spacing: 1.4px; text-transform: uppercase; color: #ffffff; margin: 0;
}
.belief__title {
	font-family: var(--font-title); font-weight: 400; font-size: 40px; line-height: 40px; color: var(--c-sand); margin: 0;
}
.belief__title .hl { color: var(--c-gold); }
.belief__body { display: flex; flex-direction: column; gap: 18px; }
.belief__body p { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 30px; color: #ffffff; margin: 0; }

/* ====== DESKTOP (>=1280): exact 1440 spec ====== */
@media (min-width: 1280px) {
	.contact-hero__inner { grid-template-columns: 840fr 552fr; }
	.contact-card { padding: 80px 72px; }
	.cc-row2 { grid-template-columns: 1fr 1fr; gap: 28px; }
	.contact-details { padding: 80px 72px; }

	.reviews-strip { padding: 120px 168px; }
	.reviews-strip__stars { font-size: 56px; letter-spacing: 10px; }

	.belief__inner {
		padding: 152px 104px;
		grid-template-columns: 664px 464px; gap: 104px; justify-content: center;
	}
	.belief__copy { gap: 48px; }
	.belief__title { font-size: 50px; line-height: 50px; }
}

/* Tablet (768-1279): Hugo STACKS the form card + details block (NOT side by side),
   over the hero photo, with desktop-scale padding; details block is solid dark teal. */
@media (min-width: 768px) and (max-width: 1279px) {
	.contact-hero__inner { grid-template-columns: 1fr; gap: 0; padding: 24px; }
	.contact-card { padding: 80px 72px; }
	.contact-details { background: var(--c-ink); padding: 80px 72px; }
	.belief__inner { grid-template-columns: 1fr 1fr; gap: 56px; }
}

/* ====== MOBILE (<768): Hugo's mobile node 813:141420, EXACT ======
 * Hugo's mobile is NOT a shrunk desktop: there is no hero photo. The contact
 * area is two stacked full-bleed blocks — a sand form block then a solid dark
 * teal details block — followed by reviews, belief, footer. All values below
 * are read from the mobile frame (form/details/belief/reviews containers). */
@media (max-width: 767px) {
	/* No hero photo on mobile; sections are full-bleed and carry their own padding */
	.contact-hero { background: none; color: inherit; }
	.contact-hero__inner { padding: 0; }

	/* Form block: sand, NO border, pad 40/24, gap 48 between head/inputs/submit */
	.contact-card { border: 0; padding: 40px 24px; gap: 48px; }
	.contact-card__title { font-size: 32px; line-height: 32px; }
	.contact-card__intro { font-size: 14px; line-height: 24px; }
	.cc-head { gap: 24px; }
	.cc-body { gap: 48px; }
	.cc-inputs { gap: 40px; }
	.cc-row2 { grid-template-columns: 1fr; gap: 40px; }   /* fields stack full-width */
	.cc-field input, .cc-field textarea { line-height: 24px; padding-bottom: 0; }
	.cc-phone { padding-bottom: 0; }
	.cc-submit { gap: 32px; }
	.cc-submit__btn { height: 46px; }
	.cc-privacy { font-size: 14px; line-height: 24px; }

	/* Details block: SOLID dark teal (not over a photo), pad 40/24 */
	.contact-details { background: var(--c-ink); padding: 40px 24px; gap: 48px; }
	.contact-details__intro { font-size: 14px; line-height: 24px; }
	.cd-row { gap: 16px; padding: 8px 0; }

	/* Reviews: pad 120/24, title 16/26 */
	.reviews-strip { padding: 120px 24px; }
	.reviews-strip__title { font-size: 16px; line-height: 26px; }

	/* Belief: solid dark teal, image 400 tall full-width on top, heading 40/38, body 16/28 */
	.belief { background: var(--c-ink); }
	.belief__inner { padding: 0 24px 40px; gap: 40px; }
	.belief__media { aspect-ratio: auto; height: 400px; }
	.belief__copy { gap: 32px; }
	.belief__body { margin-top: 16px; gap: 16px; }
	.belief__title { font-size: 40px; line-height: 38px; }
	.belief__body p { font-size: 16px; line-height: 28px; }
}

/* enquiry submit failure notice (switchover 2026-07-22): mirrors .cc-privacy, red tint */
.cc-error { margin: 8px 0 0; font: 400 13px/1.5 'Roboto Flex', sans-serif; color: #b3261e; }
.cc-error a { color: #b3261e; text-decoration: underline; }