/* ==========================================================================
   Airshape: product pages (/products/…), Figma frame "product".
   Built from the components of home, Studio and Contact (headings, service cards, clients, contact block,
   closing band, carousel controls); this file only adds what those pages do not have.
   1. Shared pieces   2. Hero, slider, USPs   3. Cards   4. CTA bands
   5. Tabs and three cards   6. Scroll story   7. Features, experience, logos, showcase
   8. Reviews, FAQ   9. Responsive
   ========================================================================== */

/* 1. Shared pieces -------------------------------------------------------- */
.product-page { overflow-x: clip; }

/* Soft band, the tint of the closing call to action */
.psoft { background: rgba(136, 136, 137, 0.067); }
.psoft + .page-cta { padding-top: 0; }

/* Heading row as "How we work" on home: title on the left, text on the right */
.phead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-5) var(--spacing-grid-gutter-2x);
	align-items: end;
	margin-bottom: var(--spacing-grid-gutter-3x);
}
.phead__text { max-width: 640px; color: var(--black-lighter); }

/* Label above a title: the pill badge of the Ohio landing page (24px high, light pill, dark text) */
.ptag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7.2px;
	width: fit-content;
	min-height: 24px;
	margin-bottom: var(--spacing-3);
	padding: 4px 12px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--brand-headlines) 68%, transparent);
	color: var(--components-page);
	font-size: 14.4px;
	font-weight: var(--font-weight-medium);
	line-height: 1;
	letter-spacing: -0.168px;
}
.is-dark-surface .ptag { background: rgba(242, 239, 228, 0.68); color: #151517; }
.heading > .ptag + .heading__title { padding-top: 0; }
.pfigure .ptag,
.preview .ptag { margin-bottom: 0; }

/* Round icon: the .touch-card__icon of the contact cards; here only what differs per place */
.pround { flex: none; margin-bottom: 0; }
.pround--olive { background: var(--brand-primary); color: var(--brand-headlines-fixed); }
.pround--dark { background: var(--black-lighter-dm); color: var(--brand-headlines-fixed); }

/* Figure with a small suffix, as the counters on Studio */
.pnumber {
	display: flex;
	align-items: flex-start;
	gap: 2px;
	font-family: var(--font-familiy-title);
	font-variation-settings: "opsz" 14;
	font-size: 46px;
	font-weight: var(--font-weight-medium);
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--brand-headlines);
}
.pnumber__suffix { font-size: 22.64px; line-height: 1.3; letter-spacing: normal; }

/* Round arrow: points up right and straightens on hover, as on the service cards */
.parrow .icon { transform: rotate(-45deg); transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1); }
.parrow:hover .icon { transform: none; }

/* Title + text under a line (story, experience) */
.ppoint { padding-top: var(--spacing-3); border-top: 1px solid var(--grey-neutral-32); }
.ppoint__text { max-width: 30em; margin-top: var(--spacing-1); color: var(--black-lighter); }

/* 2. Hero, slider, USPs --------------------------------------------------- */
/* Pill above the title: 32px high with a dark "New" inside and a chevron (Ohio landing page) */
.pbadge { min-height: 32px; padding: 4px 12px 4px 4px; border-radius: 20px; margin-bottom: var(--spacing-3); transition: background-color 0.3s var(--ease-out); }
.pbadge:not(:has(.pbadge__inner)) { padding-left: 12px; }
a.pbadge:hover { background: var(--brand-headlines); }
.pbadge__inner {
	padding: 0 8px;
	border-radius: 20px;
	background: var(--components-page);
	color: var(--brand-headlines);
	font-size: 11.808px;
	line-height: 24px;
}
.pbadge__chevron { width: 14px; height: 14px; margin-right: -2px; }
.phero__title { max-width: none; }
.phero .intro__text { text-wrap: balance; }
.phero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-2);
	margin-top: var(--spacing-7);
}
.phero__note { margin-top: var(--spacing-3); font-size: 14.76px; color: var(--grey-basic); }

.pslider { --pslide: 45.5vw; padding-bottom: var(--space-section); }
.pslider__stage {
	position: relative;
	height: calc(var(--pslide) * 499 / 874);
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.pslider__stage.is-dragging { cursor: grabbing; }
.pslider__slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--pslide);
	height: 100%;
	margin-left: calc(var(--pslide) / -2);
	overflow: hidden;
	border-radius: var(--radius-xlarge);
	background: var(--grey-neutral-8);
	opacity: 0;
	transform: translateX(calc(var(--pos, 2) * 98% + var(--drag, 0px))) rotate(calc(var(--pos, 2) * 4deg)) scale(0.85);
	transition: transform 0.6s var(--ease-out), opacity 0.45s var(--ease-out);
	will-change: transform;
}
.pslider__stage.is-dragging .pslider__slide { transition: opacity 0.45s var(--ease-out); }
.pslider__slide[data-pos="-2"] { --pos: -2; }
.pslider__slide[data-pos="2"] { --pos: 2; }
.pslider__slide[data-pos="-1"] { --pos: -1; z-index: 1; opacity: 0.75; cursor: pointer; }
.pslider__slide[data-pos="1"] { --pos: 1; z-index: 1; opacity: 0.75; cursor: pointer; }
.pslider__slide[data-pos="0"] { z-index: 2; opacity: 1; transform: translateX(var(--drag, 0px)); }
.pslider__slide[data-pos="-1"]:hover,
.pslider__slide[data-pos="1"]:hover { opacity: 1; }
.pslider__image { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pslider__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--spacing-grid-gutter-2x);
	align-items: center;
	margin-top: var(--spacing-7);
}
.pslider__caption { grid-column: 2; max-width: 640px; text-align: center; }
.pslider__caption a { display: inline-block; margin-left: 4px; }
.pslider__nav { justify-self: end; }

/* USP bar (Ohio landing page): a centred row of icon boxes with a two-line label and 1px dividers. It closes the soft
   band that runs down from the hero: a gradient with 44px bottom corners, 20px from the screen edge. */
.pusps {
	margin-inline: clamp(8px, 1.19vw, 20px);
	padding-block: 80px var(--space-section);
	border-radius: 0 0 44px 44px;
	background: linear-gradient(to bottom, rgba(136, 136, 137, 0), rgba(136, 136, 137, 0.067));
}
.pslider:has(+ .pusps) { padding-bottom: 0; }
.pusps__list { display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--spacing-5); }
.pusps__item { display: flex; align-items: center; padding-inline: 24px; }
.pusps__item + .pusps__item { border-left: 1px solid rgba(136, 136, 137, 0.2); }
.pusps__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-right: 20px;
	border: 1px solid color-mix(in srgb, var(--brand-headlines) 20%, transparent);
	border-radius: 22px;
	background: var(--components-page);
	color: var(--brand-headlines);
}
.pusps__icon .icon { width: 28px; height: 28px; }
.pusps__label {
	max-width: 7.2em;
	text-wrap: balance;
	font-family: var(--font-familiy-title);
	font-variation-settings: "opsz" 14;
	font-size: 18.144px;
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color: var(--brand-headlines);
}

/* 3. Cards ---------------------------------------------------------------- */
.pstat { min-height: 340px; }
.pstat__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-5); }
.pstat:not(:has(.service-card__button)) { cursor: default; }
.pstat.service-card--highlight .pround { background: var(--black-lighter-dm); }

.pcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-grid-gutter-2x); }
* + .pcards { margin-top: var(--spacing-grid-gutter-2x); }
.phead + .pcards { margin-top: 0; }
.pcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--grey-neutral-32);
	border-radius: var(--radius-xlarge);
	background: var(--components-page);
}
.pcard__text { padding: var(--spacing-card-large); }
.pcard__lead { max-width: 30em; padding-top: var(--spacing-2); color: var(--black-lighter); }
.pcard__media { position: relative; flex: 1; min-height: clamp(220px, 24vw, 420px); overflow: hidden; }
.pcard__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease-out);
}
.pcard:hover .pcard__image { transform: scale(1.03); }
.pcard--frame .pcard__media {
	margin-left: var(--spacing-card-large);
	border: solid var(--grey-neutral-32);
	border-width: 1px 0 0 1px;
	border-radius: var(--radius-xlarge) 0 0 0;
}
.pcard--frame .pcard__image { object-position: left top; }

/* 4. CTA bands (closing band of Studio and Contact, with a figure on the right) ----------------- */
.pcta__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--spacing-5) var(--spacing-grid-gutter-2x); }
.pcta__figure { display: flex; flex-direction: column; gap: var(--spacing-1); max-width: 328px; text-align: right; align-items: flex-end; }
.pcta__pre,
.pcta__caption { color: var(--black-lighter); }

/* 5. Tabs and three cards --------------------------------------------------- */
.ptabs {
	display: grid;
	grid-template-columns: 448fr 928fr;
	gap: var(--spacing-grid-gutter-2x);
	align-items: stretch;
}
.ptabs__nav { display: flex; flex-direction: column; }
.ptabs__tab {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1);
	padding-block: var(--spacing-5);
	border-top: 1px solid var(--grey-neutral-32);
	text-align: left;
	opacity: 0.5;
	transition: opacity 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.ptabs__tab:last-child { border-bottom: 1px solid var(--grey-neutral-32); }
.ptabs__tab:hover { opacity: 0.8; }
.ptabs__tab.is-active { border-top-color: var(--brand-headlines); opacity: 1; }
.ptabs__text { max-width: 26em; color: var(--black-lighter); }
.ptabs__media {
	position: relative;
	display: grid;
	min-height: clamp(260px, 30vw, 520px);
	overflow: hidden;
	border-radius: var(--radius-xlarge);
	background: var(--grey-neutral-8);
}
.ptabs__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.6s var(--ease-out), transform 1.2s var(--ease-out);
}
.ptabs__image.is-active { opacity: 1; transform: none; }

.pmoments__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-grid-gutter-2x); margin-top: var(--spacing-grid-gutter-2x); }
.pmcard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--spacing-grid-gutter-3x);
	min-height: 390px;
	padding: var(--spacing-card-large);
	overflow: hidden;
	border: 1px solid var(--grey-neutral-32);
	border-radius: var(--radius-xlarge);
}
.pmcard > * { position: relative; }
.pmcard--highlight { border-color: transparent; background: var(--brand-primary); }
.pmcard__bg { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pmcard__text { max-width: 26em; padding-top: var(--spacing-2); color: var(--black-lighter); }
.pmcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-3); }
.pmcard__rows li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-3);
	padding-block: var(--spacing-2);
	border-top: 1px solid var(--grey-neutral-32);
}
.pmcard__rows li:last-child { padding-bottom: 0; }
.pmcard__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-grid-gutter-2x); align-items: end; }
.pfigure { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-1); }
.pfigure .ptag,
.pfigure__bar { margin-bottom: var(--spacing-1); }
.pfigure__bar { display: block; width: 100%; }
.pmcard__icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-3); }
.pmcard__icons li { display: flex; flex-direction: column; gap: var(--spacing-3); }
.pmcard__icons .t-h6 { max-width: 7em; }

/* 6. Scroll story: text aligned with the container, photo running to the edge (as the split rows of Studio) ---- */
.pstory {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--spacing-grid-gutter-6x);
	/* Left edge = the container's (measured on the page width without the scrollbar, so the text lines up exactly) */
	padding: var(--space-section) 0 var(--space-section) max(16px, (100% - min(var(--page-container-full-width), var(--container-fluid))) / 2);
}
/* Every step is as tall as the photo, so the text sits level with it at the start, while it sticks and at the end */
.pstory__steps { display: flex; flex-direction: column; gap: 32vh; }
.pstory__step { display: flex; align-items: center; min-height: 34vw; }
.pstory__text {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	width: 100%;
	opacity: 0.25;
	transition: opacity 0.5s var(--ease-out);
}
.pstory__step.is-active .pstory__text { opacity: 1; }
.pstory__text .heading { padding-bottom: var(--spacing-3); }
.pstory__note { font-size: 14.76px; color: var(--grey-basic); }
.pstory__inline { display: none; }
.pstory__sticky {
	position: sticky;
	top: calc(50vh - 17vw);
	display: grid;
	height: 34vw;
	overflow: hidden;
	border-radius: var(--radius-xlarge) 0 0 var(--radius-xlarge);
	background: var(--grey-neutral-8);
}
.pstory__sticky .pstory__image {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.7s var(--ease-out), transform 1.2s var(--ease-out);
}
.pstory__sticky .pstory__image.is-active { opacity: 1; transform: none; }

/* 7. Features, experience, logos, showcase ---------------------------------- */
.pfeatures__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-grid-gutter-2x); }
.pfeature { background: none; box-shadow: inset 0 0 0 1px var(--grey-neutral-32); }
.pfeature .pround { margin-bottom: var(--spacing-1); }

.pexp__row { display: grid; grid-template-columns: 448fr 928fr; gap: var(--spacing-grid-gutter-2x); align-items: stretch; }
.pexp__points { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-5); }
.pexp__points .ppoint { width: 100%; }
.pexp__points .button { margin-top: var(--spacing-1); }
.pexp__image { width: 100%; height: 100%; min-height: clamp(260px, 30vw, 520px); border-radius: var(--radius-xlarge); object-fit: cover; }

/* Experience → clients: the clients block brings its own top space, as on home */
.pexp { padding-bottom: 0; }
/* Home has 140px under the clients because its next block has no top space; here a band follows */
.plogos { padding-bottom: var(--space-section); }

.pshow__usps { justify-content: flex-start; margin-bottom: var(--spacing-grid-gutter-2x); }
.pshow__usps .pusps__item:first-child { padding-left: 0; }
.pshow__image { display: block; width: 100%; aspect-ratio: 1422 / 651; border-radius: var(--radius-xlarge); object-fit: cover; }

/* 8. Reviews, FAQ ---------------------------------------------------------------- */
.previews__head { grid-template-columns: 1fr auto; }
.previews__score { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1); }
.previews__stars { font-size: 18px; line-height: 1; letter-spacing: 2px; color: var(--link-hover); }
.previews__grid { columns: 3; column-gap: var(--spacing-grid-gutter-2x); }
.preview {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-3);
	break-inside: avoid;
	margin-bottom: var(--spacing-grid-gutter-2x);
	padding: var(--spacing-card-large);
	border: 1px solid var(--grey-neutral-32);
	border-radius: var(--radius-xlarge);
}
.preview__quote { font-size: 17.2px; line-height: 1.6; color: var(--black-lighter); }
.preview--large .preview__quote {
	font-family: var(--font-familiy-title);
	font-variation-settings: "opsz" 14;
	font-size: clamp(19.92px, 1.5vw + 4px, 22.64px);
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--brand-headlines);
}
.preview .testimonial__author { padding-top: var(--spacing-1); }
.preview__avatar { width: 48px; height: 48px; font-size: 18px; }
.previews__note { text-align: center; }

.pfaq__card { position: relative; align-self: stretch; justify-content: space-between; align-items: flex-start; overflow: hidden; min-height: 420px; }
.pfaq__card > * { position: relative; }
.pfaq__card-text { max-width: 30em; padding-top: var(--spacing-3); color: rgba(242, 239, 228, 0.75); }
.pfaq__row--single { grid-template-columns: 1fr; }

/* 9. Responsive ------------------------------------------------------------------ */
@media (max-width: 1199px) {
	.pslider { --pslide: 62vw; }
	.pstats__grid.services__grid { grid-template-columns: repeat(2, 1fr); }
	.pstat { min-height: 260px; }
	.pmoments__cards { grid-template-columns: repeat(2, 1fr); }
	.pmoments__cards > :last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }
	.pmcard { min-height: 320px; }
	.pfeatures__list { grid-template-columns: repeat(2, 1fr); }
	.previews__grid { columns: 2; }
	.pstory { gap: var(--spacing-grid-gutter-3x); }
	.pstory__step { min-height: 44vw; }
	.pstory__sticky { top: calc(50vh - 22vw); height: 44vw; }
}

@media (max-width: 767px) {
	.phead { grid-template-columns: 1fr; margin-bottom: var(--spacing-grid-gutter-2x); }
	.phero__title { text-wrap: balance; }
	.phero__title br { display: none; }
	.previews__head { grid-template-columns: 1fr; }
	.previews__score { align-items: flex-start; }
	.pslider { --pslide: 80vw; }
	.pslider__bar { grid-template-columns: 1fr auto; gap: var(--spacing-4); }
	.pslider__caption { grid-column: 1 / -1; grid-row: 1; max-width: none; text-align: left; }
	.pslider__caption a { margin-left: 0; }
	.pusps { padding-block: 48px 64px; border-radius: 0 0 28px 28px; }
	.pusps__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4) var(--spacing-3); }
	.pusps__item,
	.pshow__usps .pusps__item { padding-inline: 0; }
	.pusps__item + .pusps__item { border-left: 0; }
	.pusps__icon { width: 48px; height: 48px; margin-right: 12px; border-radius: 18px; }
	.pusps__icon .icon { width: 24px; height: 24px; }
	.pusps__label { font-size: 16.4px; }
	.pstats__grid.services__grid,
	.pcards,
	.pmoments__cards,
	.pfeatures__list,
	.ptabs,
	.pexp__row { grid-template-columns: 1fr; }
	.pstat { min-height: 0; }
	.pcard__media { min-height: 62vw; }
	.pcta__figure { max-width: none; text-align: left; align-items: flex-start; }
	.ptabs__media,
	.pexp__image { min-height: 60vw; }
	.pmcard { min-height: 0; }
	.pstory { display: block; padding-inline: max(16px, (100% - min(var(--page-container-full-width), var(--container-fluid))) / 2); }
	.pstory__media { display: none; }
	.pstory__steps { gap: var(--spacing-grid-gutter-5x); }
	.pstory__step { display: block; min-height: 0; }
	.pstory__text { opacity: 1; }
	.pstory__inline { display: block; margin-top: var(--spacing-5); }
	.pstory__inline .pstory__image { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-xlarge); object-fit: cover; }
	.pshow__image { aspect-ratio: 4 / 3; }
	.previews__grid { columns: 1; }
	.previews__note { text-align: left; }
	.pfaq__card { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
	.pstory__text { opacity: 1; }
}