/* ==========================================================================
   Annex Roofing — Single Project presentation layer
   Concept: PROJECT DOSSIER  ·  v2.0.0
   Replaces the v1.9.1 editorial stylesheet.
   Tokens come from the theme's Design System v2 (fallbacks kept for safety).
   ========================================================================== */

.annex-project {
	--ap-navy:        var(--annex-navy, #062452);
	--ap-navy-deep:   var(--annex-navy-deep, #071B3D);
	--ap-navy-2:      var(--annex-navy-secondary, #18375F);
	--ap-red:         var(--annex-red, #E52B24);
	--ap-red-dark:    var(--annex-red-dark, #C9231E);
	--ap-white:       var(--annex-white, #FFFFFF);
	--ap-light:       var(--annex-light, #F6F8FA);
	--ap-text:        var(--annex-text, #0A2148);
	--ap-text-2:      var(--annex-text-secondary, #5F6F84);
	--ap-text-light:  var(--annex-text-light, #B7C1D0);
	--ap-divider:     var(--annex-divider, #DCE3EA);

	--ap-max: 1280px;
	--ap-pad: 32px;
	--ap-inner: calc(var(--ap-max) - var(--ap-pad) * 2);
	--ap-hang: 88px;        /* cover overhang below the navy slab */
	--ap-heroh: 360px;      /* minimum height of the hero composition */
	--ap-rowh: 560px;       /* justified-row height cap             */

	background: var(--ap-white);
	color: var(--ap-text);
	font-family: "Inter Tight", var(--annex-font, system-ui), sans-serif;
}

.annex-project .ap-wrap {
	max-width: var(--ap-max);
	margin: 0 auto;
	padding: 0 var(--ap-pad);
}

.annex-project img { max-width: 100%; }

/* --------------------------------------------------------------------------
   1. HERO — navy slab
   -------------------------------------------------------------------------- */

.ap-hero {
	position: relative;
	background: var(--ap-navy-deep);
	background-image: linear-gradient(160deg, var(--ap-navy) 0%, var(--ap-navy-deep) 68%);
	color: var(--ap-white);
	/* The theme's fixed header is already cleared by body{padding-top:var(--ph-h)}
	   in header-morph.css — the hero must not add that offset a second time. */
	padding-top: 56px;
	padding-bottom: 72px;
}

.ap-hero__grid {
	display: grid;
	gap: 56px;
	align-items: end;
	min-height: var(--ap-heroh);
}

.ap-hero--landscape .ap-hero__grid { grid-template-columns: 6fr 6fr; }
.ap-hero--portrait  .ap-hero__grid { grid-template-columns: 7fr 5fr; --ap-heroh: 520px; }

/* The record card is pulled 96px up into the slab on the left-hand column,
   so the hero copy always stops clear of it. */
.ap-hero__info { align-self: end; padding-bottom: 104px; }

.ap-hero__kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--ap-text-light);
}
.ap-hero__kicker::before {
	content: "";
	width: 34px;
	height: 3px;
	background: var(--ap-red);
	flex: 0 0 auto;
}
.ap-hero__idx {
	color: rgba(255, 255, 255, .45);
	font-variant-numeric: tabular-nums;
}

.ap-hero__title {
	margin: 0;
	font-size: clamp(46px, 5.4vw, 84px);
	line-height: .96;
	font-weight: 600;
	letter-spacing: -.035em;
	color: var(--ap-white);
}
.ap-hero--portrait .ap-hero__title { font-size: clamp(52px, 6vw, 92px); }

.ap-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 22px 0 0;
	font-size: 17px;
	color: rgba(255, 255, 255, .82);
}
.ap-hero__meta span { display: inline-flex; align-items: center; }
.ap-hero__meta span + span::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--ap-red);
	margin-right: 18px;
	flex: 0 0 auto;
}

.ap-hero__summary {
	margin: 20px 0 0;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
}

.ap-hero__action {
	display: inline-block;
	margin-top: 28px;
	padding-bottom: 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ap-white);
	text-decoration: none;
	border-bottom: 2px solid var(--ap-red);
}
.ap-hero__action:hover { color: var(--ap-red); }

.ap-hero__media {
	margin: 0;
	position: relative;
	z-index: 2;
	align-self: end;
	margin-bottom: calc(-1 * (88px + var(--ap-hang)));
}

/* Wide cover runs off the right edge of the viewport. */
.ap-hero--landscape .ap-hero__media {
	margin-right: min(0px, calc((var(--ap-inner) - 100vw) / 2));
}
.ap-hero--landscape .ap-hero__img {
	display: block;
	width: 100%;
	height: clamp(340px, 36vw, 520px);
	object-fit: cover;
}

/* Portrait cover stays inside the grid and is never cropped. */
.ap-hero--portrait .ap-hero__media {
	display: flex;
	justify-content: flex-end;
}
.ap-hero--portrait .ap-hero__img {
	display: block;
	width: 100%;
	max-height: 600px;
	height: auto;
	object-fit: contain;
	object-position: bottom right;
}

/* --------------------------------------------------------------------------
   2. PROJECT RECORD
   -------------------------------------------------------------------------- */

.ap-record {
	background: var(--ap-light);
	padding: 0 0 36px;
}

.ap-record__card {
	position: relative;
	z-index: 3;
	width: fit-content;
	min-width: min(100%, 460px);
	max-width: min(100%, calc(50% - 28px));
	min-height: 178px;
	margin-top: -96px;
	padding: 34px 38px 36px;
	background: var(--ap-white);
	box-shadow: 0 20px 52px rgba(6, 36, 82, .12);
}
.ap-record__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 72px;
	height: 4px;
	background: var(--ap-red);
}

.ap-record__grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), minmax(0, max-content));
	justify-content: start;
	gap: 26px 44px;
	margin: 0;
}
.ap-record__cell dt {
	margin: 0 0 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ap-text-2);
}
.ap-record__cell dd {
	margin: 0;
	font-size: 24px;
	line-height: 1.12;
	white-space: nowrap;
	font-weight: 600;
	letter-spacing: -.022em;
	color: var(--ap-text);
}
.ap-record__card--4 .ap-record__cell dd,
.ap-record__card--5 .ap-record__cell dd { font-size: 21px; }

/* --------------------------------------------------------------------------
   3. PROJECT SEQUENCE (gallery)
   -------------------------------------------------------------------------- */

.ap-sequence {
	background: var(--ap-light);
	padding: 4px 0 48px;
}

.ap-sequence__title {
	margin: 0 0 14px;
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 600;
	letter-spacing: -.025em;
	color: var(--ap-text);
}
.ap-sequence__title::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background: var(--ap-red);
	margin-bottom: 12px;
}

.ap-group + .ap-group { margin-top: 12px; }

.ap-group__inner {
	display: flex;
	gap: 20px;
	align-items: stretch;
}

.ap-cell {
	margin: 0;
	flex-basis: 0;
	flex-shrink: 1;
	min-width: 0;
	line-height: 0;
}
.ap-shot {
	display: block;
	width: 100%;
	aspect-ratio: var(--r, 1.5);
	object-fit: cover;
}

/* Lead — the main view of the object. Held inside the content width so it
   reads as a case-study frame, not a viewport-sized photograph. Its height is
   close to the supporting row below it, so the sequence has no weight jump. */
.ap-group--lead .ap-group__inner { display: block; }
.ap-group--lead .ap-cell { width: 100%; }
.ap-group--lead .ap-shot {
	aspect-ratio: auto;
	height: clamp(380px, 36vw, 520px);
}

/* Justified rows and stacks — height capped by the row's ratio sum. */
.ap-group--row .ap-group__inner,
.ap-group--stack .ap-group__inner {
	max-width: calc(var(--ap-rowh) * var(--sum, 2) + 20px);
	margin-inline: auto;
}

.ap-cell--column {
	display: flex;
	flex-direction: column;
	gap: 16px;
	line-height: 0;
}
.ap-cell__item {
	margin: 0;
	flex-basis: 0;
	min-height: 0;
	line-height: 0;
}
.ap-cell__item .ap-shot {
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
}

/* A portrait beside a landscape reads too narrow at its natural share, so the
   wide image is capped and the portrait takes the rest. The portrait keeps its
   exact proportions and sets the row height; the landscape fills what is left.
   Scoped with :has() so rows without a portrait keep the justified behaviour. */
.ap-group--row .ap-group__inner:has(.ap-cell--portrait, .ap-cell--narrow) .ap-cell--landscape,
.ap-group--row .ap-group__inner:has(.ap-cell--portrait, .ap-cell--narrow) .ap-cell--pano,
.ap-group--row .ap-group__inner:has(.ap-cell--portrait, .ap-cell--narrow) .ap-cell--square {
	position: relative;
	max-width: 64%;
}
.ap-group--row .ap-group__inner:has(.ap-cell--portrait, .ap-cell--narrow) .ap-cell--landscape .ap-shot,
.ap-group--row .ap-group__inner:has(.ap-cell--portrait, .ap-cell--narrow) .ap-cell--pano .ap-shot,
.ap-group--row .ap-group__inner:has(.ap-cell--portrait, .ap-cell--narrow) .ap-cell--square .ap-shot {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Trailing single image — sized to its own orientation, never stretched. */
.ap-group--solo .ap-group__inner { display: block; }
.ap-group--solo .ap-cell {
	width: min(100%, calc(var(--ap-rowh) * var(--r, 1.5)));
	margin-inline: auto;
}

/* Navy field — used only when a group holds a very tall narrow image that
   would otherwise sit in a dead white field. Never automatic. */
/* Navy field — a frame around the photographs, sized to them. Used only when
   a group holds a very tall narrow image that would otherwise sit in a dead
   white field. Never automatic, never a full-height screen. */
.ap-group--field {
	/* Width is derived from the photographs it frames: the composition's own
	   ratio sum, plus the 20px inner gap and 2x24px of navy. The navy never
	   becomes a field the images float in. */
	width: min(100%, calc(760px * var(--sum, 1.1) + 68px));
	margin: 22px auto;
	padding: 24px;
	background: var(--ap-navy);
}
.ap-group--field .ap-group__inner {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   4. PROJECT STORY (only rendered when the data exists)
   -------------------------------------------------------------------------- */

.ap-story { background: var(--ap-white); padding: 88px 0 96px; }
.ap-story--deep { background: var(--ap-light); }

.ap-story__grid {
	display: grid;
	grid-template-columns: 3fr 9fr;
	gap: 48px;
}
.ap-story__rail h2 {
	position: sticky;
	top: calc(var(--ph-h, 85px) + 24px);
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.02em;
}
.ap-story__rail h2::before {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	background: var(--ap-red);
	margin-bottom: 14px;
}
.ap-story__body { max-width: 74ch; }

.ap-transition {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 28px;
	padding: 30px 32px;
	background: var(--ap-navy);
	color: var(--ap-white);
	margin-bottom: 40px;
}
.ap-transition::before {
	display: none;
}
.ap-transition__side dt {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ap-text-light);
	margin-bottom: 8px;
}
.ap-transition__side dd {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.02em;
}
.ap-transition__side--new { position: relative; }
.ap-transition__side--new::before {
	content: "";
	position: absolute;
	left: -42px;
	top: 50%;
	width: 26px;
	height: 3px;
	background: var(--ap-red);
	transform: translateY(-50%);
}

.ap-story__block + .ap-story__block { margin-top: 34px; }
.ap-story__block h3 {
	margin: 0 0 12px;
	padding-left: 16px;
	border-left: 3px solid var(--ap-red);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
}
.ap-story__block p {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ap-text-2);
}

/* --------------------------------------------------------------------------
   5. NEXT PROJECT — transition band
   -------------------------------------------------------------------------- */

.ap-next { background: var(--ap-light); }
.ap-next__link {
	display: grid;
	grid-template-columns: 48% 52%;
	align-items: stretch;
	min-height: 312px;
	text-decoration: none;
	color: inherit;
}
/* The image fills the band; the band's height comes from the copy, so a wide
   photograph can no longer inflate this section into a second hero. */
.ap-next__media { position: relative; overflow: hidden; }
.ap-next__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.ap-next__link:hover .ap-next__img { transform: scale(1.03); }

.ap-next__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 38px 56px;
}
.ap-next__kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ap-text-2);
}
.ap-next__kicker::before {
	content: "";
	width: 30px;
	height: 3px;
	background: var(--ap-red);
}
.ap-next__title {
	margin: 0;
	font-size: clamp(34px, 3.6vw, 52px);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.02;
}
.ap-next__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 12px 0 0;
	font-size: 17px;
	color: var(--ap-text-2);
}
.ap-next__meta span + span::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	background: var(--ap-red);
	margin-right: 16px;
	vertical-align: middle;
}
.ap-next__cue {
	display: block;
	width: 64px;
	height: 4px;
	background: var(--ap-red);
	margin-top: 22px;
	transition: width .3s ease;
}
.ap-next__link:hover .ap-next__cue { width: 92px; }

/* --------------------------------------------------------------------------
   6. FINAL CTA — navy slab, butted to the transition band
   -------------------------------------------------------------------------- */

.ap-cta {
	background: var(--ap-navy-deep);
	color: var(--ap-white);
	padding: 72px 0 80px;
}
.ap-cta__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
}
.ap-cta__title {
	margin: 0;
	max-width: 16ch;
	font-size: clamp(32px, 3.6vw, 48px);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.05;
}
.ap-cta__actions {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.ap-btn--red {
	display: inline-block;
	padding: 17px 34px;
	background: var(--ap-red-dark);
	color: var(--ap-white);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}
.ap-btn--red:hover { background: var(--ap-red); }
.ap-cta__phone {
	color: var(--ap-white);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--ap-red);
	padding-bottom: 4px;
}

.annex-project a:focus-visible {
	outline: 3px solid var(--ap-red);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7. TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.annex-project { --ap-rowh: 420px; }
	.ap-hero__grid { gap: 40px; }
	.ap-record__card { width: min(100%, 560px); }
	.ap-story__grid { grid-template-columns: 1fr; gap: 28px; }
	.ap-story__rail h2 { position: static; }
	.ap-next__body { padding: 44px 32px; }
}

/* --------------------------------------------------------------------------
   8. MOBILE — a separate composition, not a single column of the desktop
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	.annex-project {
		--ap-pad: 18px;
		--ap-hang: 0px;
		--ap-rowh: 320px;
	}

	.ap-hero {
		padding-top: 34px;
		padding-bottom: 0;
	}
	.ap-hero__grid,
	.ap-hero--landscape .ap-hero__grid,
	.ap-hero--portrait .ap-hero__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.ap-hero--portrait { min-height: 0; }
	.ap-hero__title,
	.ap-hero--portrait .ap-hero__title { font-size: clamp(40px, 12vw, 54px); }
	.ap-hero__meta { font-size: 15px; }
	.ap-hero__action { margin-top: 22px; }
	.ap-hero__info { padding-bottom: 0; }

	.ap-hero__media { margin-bottom: 0; }
	.ap-hero--landscape .ap-hero__media { margin-right: calc(-1 * var(--ap-pad)); }
	.ap-hero--landscape .ap-hero__img { height: clamp(210px, 46vw, 260px); }

	.ap-hero--portrait .ap-hero__media { justify-content: center; }
	.ap-hero--portrait .ap-hero__img {
		width: 78%;
		max-height: 420px;
		margin-bottom: -1px;
	}

	.ap-record { padding-bottom: 44px; }
	.ap-record__card {
		width: 100%;
		min-width: 0;
		max-width: none;
		min-height: 0;
		margin-top: -34px;
		padding: 26px 22px 28px;
	}
	.ap-record__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
	.ap-record__cell dd { white-space: normal; }
	.ap-record__cell dd,
	.ap-record__card--4 .ap-record__cell dd,
	.ap-record__card--5 .ap-record__cell dd { font-size: 19px; }

	.ap-sequence { padding: 2px 0 44px; }
	.ap-sequence__title { margin-bottom: 18px; }

	.ap-group + .ap-group { margin-top: 8px; }
	.ap-group__inner { gap: 6px; }
	/* The sequence runs edge to edge so two photographs side by side stay as
	   large as the screen allows, and every module shares the same edges. */
	.ap-group--lead,
	.ap-group--row,
	.ap-group--solo { margin-inline: calc(-1 * var(--ap-pad)); }
	.ap-group--row .ap-group__inner,
	.ap-group--stack .ap-group__inner,
	.ap-group--field .ap-group__inner { max-width: none; }
	.ap-cell--column { gap: 10px; }

	.ap-group--lead .ap-shot { height: clamp(240px, 64vw, 300px); }
	.ap-group--solo .ap-cell { width: min(100%, calc(320px * var(--r, 1.5))); }

	.ap-group--field {
		margin-top: 14px;
		margin-bottom: 14px;
		padding: 18px 14px;
	}

	.ap-story { padding: 48px 0 52px; }
	.ap-transition { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; }
	.ap-transition__side--new::before { left: 0; top: -12px; transform: none; }

	.ap-next__link { grid-template-columns: 1fr; }
	.ap-next__img { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
	.ap-next__link { min-height: 0; }
	.ap-next__media { position: static; aspect-ratio: 16 / 9; }
	.ap-next__img { position: static; }
	.ap-next__body { padding: 26px var(--ap-pad) 32px; }
	.ap-next__cue { margin-top: 20px; }

	/* body already reserves room for .msticky (site.css) — no second offset. */
	.ap-cta { padding: 52px 0 56px; }
	.ap-cta__grid { flex-direction: column; align-items: flex-start; gap: 26px; }
	.ap-cta__actions { flex-direction: column; align-items: flex-start; gap: 20px; }
	.ap-btn--red { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.annex-project * { transition: none !important; }
}