/* ==========================================================================
   Home, v6.1. Blue hero with one amber phrase, three photo doors edge to edge,
   the licence line, the project wall on night, how a job runs, the amber phone
   band, the form plate over the seam, the crew.
   ========================================================================== */

/* ---- hero: ARC's logo at full scale. The headline on blue, the arc as the one
   splash of colour, ARC's film inside the dome. Text never sits on the film. ---- */
.ho-hero { position: relative; isolation: isolate; overflow: hidden; }
.ho-hero__copy { position: relative; z-index: var(--z-copy); padding-block: calc(var(--bar-arc) + var(--s-5)) var(--s-3); text-align: center; }
.ho-hero__title { color: var(--c-wall); font-family: var(--font-display); font-size: var(--fs-hero); font-weight: var(--fw-display); line-height: .94; letter-spacing: var(--track-display); }
.ho-hero__line { display: block; }
.ho-hero__lede { max-width: 36rem; margin: var(--s-3) auto 0; color: var(--c-wall); font-size: var(--fs-1); line-height: var(--lh-h3); text-wrap: balance; }
.ho-hero__start { margin-top: var(--s-4); min-height: 3.382rem; padding-inline: var(--s-6); font-size: 1.128rem; }
@media (max-width: 47.99em) { .ho-hero__start { width: 100%; } }
.ho-dome { position: relative; height: clamp(13rem, 36vw, 42rem); margin-top: calc(-1 * var(--s-3)); background: var(--c-blue); }
.ho-dome__poster, .ho-dome__film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 100%; }
.ho-dome__film { opacity: 0; transition: opacity 800ms var(--ease-out); }
.ho-dome__film.is-on { opacity: 1; }
.ho-dome__arc { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.ho-dome__sky { fill: var(--c-blue); }
.ho-dome__line { fill: var(--c-amber); }
@media (max-width: 47.99em) {
	.ho-dome { height: 15rem; }
	.ho-dome__arc { left: -40%; width: 180%; max-width: none; } /* base.css caps svg at 100%; the dome is wider than a phone on purpose */
}
.ho-dome__control { position: absolute; right: var(--s-4); bottom: var(--s-4); z-index: var(--z-copy); display: inline-flex; align-items: center; justify-content: center; width: var(--target); height: var(--target); border: 0; background: var(--c-night); color: var(--c-wall); cursor: pointer; }
.ho-dome__control[hidden] { display: none; }
.ho-dome__control:hover { background: var(--c-blue); }
.ho-dome__sym { width: 1.5rem; height: 1.5rem; }
.ho-dome__sym--play, [data-state="paused"] .ho-dome__sym--pause { display: none; }
[data-state="paused"] .ho-dome__sym--play { display: block; }

/* ---- the doors: the finished job first, the person working on it on hover ---- */
.ho-doors__list { display: grid; margin: 0; padding: 0; list-style: none; }
.ho-door { position: relative; isolation: isolate; min-width: 0; overflow: hidden; background: var(--c-night); }
.ho-door__link { position: relative; display: block; height: 15.5rem; color: var(--c-wall); text-decoration: none; }
.ho-door__media { position: absolute; inset: 0; z-index: var(--z-photo); display: block; }
.ho-door__img, .ho-door__reel { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.ho-door--industrial .ho-door__media > .ho-door__img { object-position: 50% 58%; }
.ho-door__work { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 500ms var(--ease-out); }
.ho-door__work .ho-door__img { object-position: 50% 40%; }
.ho-door__reel { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-out); }
.ho-door__reel.is-on { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	.ho-door__link:hover .ho-door__work, .ho-door__link:focus-visible .ho-door__work { opacity: 1; }
}
.ho-door__plate { position: absolute; left: 0; bottom: 0; z-index: var(--z-plate); display: block; max-width: calc(100% - var(--s-5)); padding: var(--s-3) var(--s-4) var(--s-3) var(--gutter); background: var(--c-blue); transition: background-color var(--t-fast) var(--ease-out); }
.ho-door__word { display: flex; align-items: center; gap: var(--s-3); color: var(--c-wall); font-family: var(--font-display); font-size: var(--fs-3); font-weight: var(--fw-display); line-height: 1; text-transform: uppercase; }
.ho-door__arrow { width: 1.618rem; height: 1.618rem; color: var(--c-amber); transition: transform var(--t-swap) var(--ease-out); }
.ho-door__line { display: block; margin-top: var(--s-1); color: var(--c-wall); font-size: var(--fs-0); line-height: var(--lh-h3); }
.ho-door__link:hover { color: var(--c-wall); text-decoration: none; }
.ho-door__link:hover .ho-door__plate { background: var(--c-amber); }
.ho-door__link:hover .ho-door__word, .ho-door__link:hover .ho-door__line, .ho-door__link:hover .ho-door__arrow { color: var(--c-ink); }
.ho-door__link:hover .ho-door__arrow { transform: translateX(.382rem); }
.ho-door__link:focus-visible { outline: var(--bw-focus) solid var(--c-amber); outline-offset: calc(-1 * var(--bw-focus)); }
@media (min-width: 48em) {
	.ho-doors__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ho-door__link { height: clamp(20rem, 34vw, 38rem); }
	.ho-door__plate { padding-left: var(--s-4); }
	.ho-door--commercial .ho-door__plate { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
}

/* ---- the licence line ---- */
.ho-proof { border-bottom: var(--bw-hair) solid var(--c-rule); }
.ho-proof__in { display: grid; gap: var(--s-2); padding-block: var(--s-4); }
.ho-proof__item { display: flex; align-items: center; gap: var(--s-3); color: var(--c-ink); font-weight: var(--fw-ui); line-height: var(--lh-h3); }
.ho-proof__item a { color: var(--c-blue); text-underline-offset: .2em; }
.ho-proof__sym { width: 1.75rem; height: 1.75rem; color: var(--c-blue); }
.ho-proof__item--res { font-weight: var(--fw-ui); }
@media (min-width: 64em) {
	.ho-proof__in { grid-template-columns: auto auto auto 1fr; gap: var(--s-6); align-items: center; }
	.ho-proof__item--res { justify-self: end; text-align: right; }
}

/* ---- the project wall: real photos at their true colour on night ---- */
.ho-work { position: relative; isolation: isolate; padding-block: var(--section); }
.ho-work__grid { display: grid; gap: var(--s-4); }
.ho-work__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.ho-work__title { color: var(--c-wall); font-family: var(--font-display); font-size: var(--fs-4); font-weight: var(--fw-display); line-height: var(--lh-plate); }
.ho-tile { position: relative; display: block; min-width: 0; color: var(--c-ink); text-decoration: none; }
.ho-tile__photo { display: block; aspect-ratio: 1.618 / 1; overflow: hidden; background: var(--c-blue-deep); }
.ho-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 500ms var(--ease-out); }
.ho-tile__plate { position: absolute; left: 0; bottom: 0; z-index: var(--z-plate); display: block; max-width: calc(100% - var(--s-5)); padding: var(--s-2) var(--s-4); background: var(--c-wall); transition: background-color var(--t-fast) var(--ease-out); }
.ho-tile__name { display: block; color: var(--c-blue); font-family: var(--font-display); font-size: var(--fs-1); font-weight: var(--fw-display); line-height: 1.1; }
.ho-tile:hover { color: var(--c-ink); text-decoration: none; }
.ho-tile:hover .ho-tile__img { transform: scale(1.03); }
.ho-tile:hover .ho-tile__plate { background: var(--c-amber); }
.ho-tile:hover .ho-tile__name { color: var(--c-ink); }
.ho-tile:focus-visible { outline: var(--bw-focus) solid var(--c-amber); outline-offset: 2px; }
/* The Branksome roofline steps over the seam. */
.ho-tile__cut { position: absolute; left: 0; right: 0; bottom: var(--cut-bottom, 100%); z-index: var(--z-cutout); display: none; pointer-events: none; }
.ho-tile__cut img, .ho-tile__cut-img { display: block; width: 100%; height: auto; }
@media (min-width: 48em) {
	.ho-work__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); }
	.ho-work__head { grid-column: 1 / 6; grid-row: 1; }
	.ho-tile { grid-column: span 4; }
	.ho-work__grid > .ho-tile--lead { grid-column: 6 / -1; grid-row: 1 / span 2; }
	.ho-work__grid > .ho-tile--lead + .ho-tile { grid-column: 1 / 6; grid-row: 2; align-self: end; }
}
@media (min-width: 64em) {
	.ho-tile__cut { display: block; }
	.ho-work__grid > .ho-tile--lead { margin-top: var(--s-5); }
}

/* ---- the map: the corridor at night, with ARC's route in amber ---- */
.ho-map { position: relative; isolation: isolate; }
.ho-map__map, .ho-map .livemap { height: clamp(28rem, 52vw, 50rem); }
.ho-map .livemap .lm-canvas { height: 100%; }
.ho-map .livemap { --lm-legend-h: 0px; }
.ho-map .lm-key, .ho-map .maplibregl-ctrl-scale, .ho-map .lm-scale { display: none; }
.ho-map .lm-legend { position: absolute; right: 0; bottom: 0; left: auto; z-index: var(--z-plate); min-height: 0; padding: var(--s-1) var(--s-2); border: 0; background: var(--c-night); }
.ho-map__wrap { pointer-events: none; }
.ho-map__plate { padding: var(--s-5); pointer-events: auto; }
.ho-map__title { color: var(--c-wall); font-family: var(--font-display); font-size: var(--fs-3); font-weight: var(--fw-display); line-height: var(--lh-h2); text-wrap: balance; }
.ho-map__plate .btn--text { margin-top: var(--s-2); }
@media (min-width: 64em) {
	.ho-map__wrap { position: absolute; top: var(--s-6); left: 0; right: 0; z-index: var(--z-plate); }
	.ho-map__plate { max-width: 30rem; }
}

/* ---- how a job runs ---- */
.ho-how { padding-block: var(--section); }
.ho-how__head { display: grid; gap: var(--s-4); }
.ho-how__title { color: var(--c-blue); font-family: var(--font-display); font-size: var(--fs-4); font-weight: var(--fw-display); line-height: var(--lh-plate); }
.ho-how__intro { max-width: var(--measure); font-size: var(--fs-1); line-height: var(--lh-h3); text-wrap: pretty; }
.ho-how__steps { display: grid; gap: var(--s-5) var(--gutter); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.ho-how__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s-4); align-items: start; }
.ho-how__sym { grid-row: 1 / span 2; width: 3.2rem; height: 3.2rem; color: var(--c-blue); }
.ho-how__name { color: var(--c-ink); font-size: var(--fs-1); font-weight: var(--fw-strong); line-height: var(--lh-h3); }
.ho-how__text { margin-top: var(--s-1); color: var(--c-steel); text-wrap: pretty; }
.ho-how__more { margin-top: var(--s-5); }
@media (min-width: 48em) { .ho-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
	.ho-how__head { grid-template-columns: 1.618fr 1fr; align-items: end; gap: var(--gutter); }
	.ho-how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ho-how__step { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
	.ho-how__sym { grid-row: auto; width: 4.236rem; height: 4.236rem; }
}

/* ---- the amber band ---- */
.ho-call { padding-block: var(--s-7); }
.ho-call__in { display: grid; gap: var(--s-2); }
.ho-call__title { color: var(--c-ink); font-family: var(--font-display); font-size: var(--fs-2); font-weight: var(--fw-display); line-height: var(--lh-plate); }
.ho-call__tel { color: var(--c-ink); font-family: var(--font-display); font-size: clamp(2.6rem, 13.5vw, 12rem); font-weight: var(--fw-display); line-height: 1; letter-spacing: var(--track-caps); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.ho-call__tel:hover { color: var(--c-night); text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }
.ho-call__hours { color: var(--c-ink); font-size: var(--fs-1); line-height: var(--lh-h3); font-weight: var(--fw-ui); }

/* ---- the form ---- */
.ho-start { position: relative; isolation: isolate; padding-block: var(--section); }
@media (min-width: 64em) {
	.ho-call { padding-bottom: calc(var(--section) * 1.618); }
	.ho-call__in > * { max-width: 52%; }
	.ho-call__tel { font-size: clamp(5rem, 8.4vw, 11rem); }
	.ho-start .qf__plate { margin-top: calc(-1 * var(--section) - var(--s-8) - var(--s-7)); }
}

/* ---- careers ---- */
.ho-crew { padding-block: var(--section) calc(var(--section) + var(--s-6)); }
.ho-crew__grid { display: grid; gap: var(--s-5) var(--gutter); align-items: center; }
.ho-crew__title { color: var(--c-blue); font-family: var(--font-display); font-size: var(--fs-3); font-weight: var(--fw-display); line-height: var(--lh-h2); text-wrap: balance; }
.ho-crew__text .btn { margin-top: var(--s-4); }
.ho-crew__photo { aspect-ratio: 1.25 / 1; overflow: hidden; background: var(--c-fog); }
.ho-crew__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 80% 40%; }
@media (min-width: 64em) { .ho-crew__grid { grid-template-columns: 1fr 1.272fr; } }