/**
 * Goddess Collection Quiz — styles
 * Matches the XD mockups (Quiz Introduction, quiz step 1-7, results).
 * Colours are approximations from the mockup; brand tokens are:
 *   Text:     #000e30 (site navy)
 *   Muted:    #7d7d7d
 *   Accent:   #5b9dbe (quiz blue, from mockup)
 *   Panel bg: #fdfbf6 (cream)
 */

:root {
	--ph-quiz-navy:   #000e30;
	--ph-quiz-muted:  #7d7d7d;
	--ph-quiz-accent: #5b9dbe;
	--ph-quiz-cream:  #fdfbf6;
	--ph-quiz-line:   #e9e4d8;
	--ph-quiz-tile-shadow: 0 1px 3px rgba(0, 14, 48, 0.05), 0 4px 12px rgba(0, 14, 48, 0.06);
}

.ph-quiz {
	background: #FAF8F5;
	color: var( --ph-quiz-navy );
	padding: 105.5px 1.25rem 192px;
	min-height: 60vh;
	font-family: Nunito, sans-serif;
	position: relative;
}
.ph-quiz:has(.ph-quiz__screen--result){
    padding: 0;
}
.ph-quiz:has(.ph-quiz__screen--intro)::before{
    position: absolute;
    content: "";
    width: calc(((100% - 732px) / 2) + 20px);
    height: calc(100% - 140px);
    background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Frame-2085668732-2.png");
    background-size: contain;
    background-repeat: no-repeat;
    left: 0;
    top: 90.56px;
    z-index:0;
    background-position: top left;
}
.ph-quiz:has(.ph-quiz__screen--intro)::after{
    position: absolute;
    content: "";
    width: calc(((100% - 732px) / 2) + 20px);
    height: calc(100% - 140px);
    background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Frame-2085668733-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    right: 0;
    top: 90.56px;
    z-index:0;
    background-position: top right;
}

.ph-quiz__screen {
	max-width: 732px;
	margin: 0 auto;
	text-align: center;
}
.ph-quiz__screen--question{
    max-width: 1065px;
}

.ph-quiz__title,
.ph-quiz__question,
.ph-quiz__result-title {
	font-weight: 400;
	letter-spacing: 0.01em;
	margin: 0 0 1rem;
}

.ph-quiz__title, .ph-quiz__question { font-size: 50px; line-height: 45px; font-family: 'Cormorant Garamond', serif; margin-bottom: 59px; }
.ph-quiz__result-title { font-size: 30px; font-weight: 500; color: #4AA9C4; letter-spacing: 6px; line-height: 35px; text-transform: uppercase;margin-bottom: 55.81px; text-decoration: underline; text-underline-offset: 6.19px;text-decoration-thickness: 2px; }
.ph-quiz__question{margin-bottom: 43px}
.ph-quiz__body {
	margin: 0 auto 2rem;
	color: var( --ph-quiz-navy );
	line-height: 1.7;
	font-size: 1rem;
}

.ph-quiz__body p {
    margin-bottom: 18px;
    font-size: 18px;
    letter-spacing: 0.29px;
    line-height: 25px;
    color: #4D4D4D;
    text-align: left;
}

.ph-quiz__cta-row {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
	margin: 2rem 0 1.25rem;
}
.ph-quiz__result-card .ph-quiz__cta-row{
    gap: 20px;
    flex-wrap: nowrap;
    margin: 0 0 37.19px;
}
.ph-quiz__result-card .ph-quiz__cta-row a{
    flex: 1;
    min-width: auto;
}

.ph-quiz__cta, .ph-competition__two-col-item p a {
    display: inline-block;
    background: #ffffff;
    color: var(--ph-quiz-accent);
    border: 1px solid var(--ph-quiz-accent);
    padding: 26px 20px;
    min-width: 312px;
    font-size: 14px;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
    position:relative;
    z-index: 1;
}

.ph-quiz__cta:hover,
.ph-competition__two-col-item p a:hover,
.ph-competition__two-col-item p a:focus,
.ph-quiz__cta:focus {
	background: var( --ph-quiz-accent );
	color: #fff;
}


.ph-quiz__cta--ghost {
	background-color: transparent;
}
.ph-quiz__cta--ghost:hover,
.ph-quiz__cta--ghost:focus {
	background: var( --ph-quiz-navy );
	color: #fff;
}

.ph-quiz__back,
.ph-quiz__skip,
.ph-quiz__retake {
	display: inline-block;
	color: var( --ph-quiz-accent );
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: none;
	border: none;
	cursor: pointer;
	margin-top: 1rem;
	font-family: inherit;
	padding: 0.4rem 0.6rem;
}
.ph-quiz__retake {
	color: #747474;
	font-size: 16px;
	line-height: 22px;
	padding: 0;
	letter-spacing: 0;
	text-transform: math-auto;
	width: 50%;
	position: relative;
}
.ph-quiz__retake::after{
    position: absolute;
    content: "🡢";
    font-size: 14px;
    right: 50px;
    color: rgb(74, 169, 196);
    top: 50%;
    transform: translateY(-50%);
}
.ph-quiz__back:hover,
.ph-quiz__skip:hover,
.ph-quiz__retake:hover { text-decoration: underline; }

.ph-quiz__nav {
	margin-top: 2rem;
}

/* Progress bar --------------------------------------------------------- */
.ph-quiz__progress {
	position: relative;
	height: 10px;
	background: #EBEBEB;
	max-width: 100%;
	margin: 0 auto 79px;
}
.ph-quiz__progress-bar {
	position: absolute;
	inset: 0 auto 0 0;
	background: var( --ph-quiz-accent );
	border-radius: 2px;
	transition: width 0.3s ease;
}
.ph-quiz__progress-label {
	position: absolute;
	right: 0;
	top: 8px;
	font-size: 20px;
	color: #4AA9C4;
	font-weight: 600;
	letter-spacing: 0.32px;
	line-height: 28px;
}

/* Answer tiles ---------------------------------------------------------- */
.ph-quiz__tiles {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 40px 43px;
	margin: 0 auto;
}

@media ( max-width: 720px ) {
	.ph-quiz__tiles { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( max-width: 420px ) {
	.ph-quiz__tiles { grid-template-columns: 1fr; }
}
.ph-quiz__back{
    font-size: 16px;
    letter-spacing: 3.2px;
    line-height: 28px;
    color: #4D4D4D;
    position: relative;
}
.ph-quiz__screen--question .ph-quiz__back::first-letter{
    opacity: 0;
}
.ph-quiz__screen--question .ph-quiz__back::after{
    position: absolute;
    content: "🡠";
    left: 10px;
    color: #4AA9C4;
    top: 50%;
    transform: translateY(-50%);
}
.ph-quiz__tile {
	background: #fff;
	border-radius: 19px !important;
	box-shadow: 0 3px 6px #00000026;
	padding: 45px 23px;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
	font-family: inherit;
	color: inherit;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	min-height: 130px;
	position: relative;
	z-index: 1;
}
.ph-quiz__tile:hover {
	transform: translateY( -2px );
	box-shadow: 0 4px 14px rgba( 0, 14, 48, 0.12 );
	border-color: var( --ph-quiz-accent );
}
.ph-quiz__tile.is-selected {
	border-color: var( --ph-quiz-accent );
	background: #f6fbfd;
}
.ph-quiz__tile-letter, .ph-quiz__tile-text {
	color: #4D4D4D;
	font-size: 25px;
	line-height: 35px;
}
.ph-quiz__tile-letter{
    font-weight: 600;
}
.ph-quiz__tile-icon {
	display: block;
	color: var( --ph-quiz-accent );
	margin-bottom: 0.25rem;
	line-height: 1;
}
.ph-quiz__tile-icon svg { display: block; margin: 0 auto; }
.ph-quiz__tile.has-icon { min-height: 170px; padding-top: 1.25rem; }

/* Email capture --------------------------------------------------------- */
.ph-quiz__form {
	max-width: 480px;
	margin: 1.5rem auto 0;
	text-align: left;
}
.ph-quiz__input {
	width: 100%;
	padding: 11.31px 0;
	border: none;
	border-bottom: 1px solid #282D4686;
	border-radius: 0px;
	font-size: 1rem;
	letter-spacing: 1.6px;
	line-height: 19px;
	font-family: inherit;
	background: #fff;
	outline: none;
	box-shadow: none;
	margin-bottom: 0;
}
.ph-quiz__input::placeholder{
    color: #A7A7A7 !important;
}

.ph-quiz__input:focus {
	border-color: var( --ph-quiz-accent );
}
.ph-quiz__consent {
	display: flex !important;
	align-items: flex-start;
	gap: 16.5px;
	font-size: 14px;
	color: #4d4d4d;
	line-height: 18px;
	letter-spacing: 0.22px;
	margin-bottom: 1rem;
	cursor: pointer;
}
.ph-quiz__consent input { margin: 2px 0 0; width: 18px; height: 18px; }

/* Result screen --------------------------------------------------------- */
.ph-quiz__screen--result {
	position: relative;
	padding: 0;
	max-width: 100%;
}
.ph-quiz__result-hero {
	width: 100%;
	height: 100vh;
	min-height: 320px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.ph-quiz__result-card {
	background: #FAF8F5;
	width: 737px;
	max-width: calc(100% - 40px);
	padding: 35px 80px 59.58px;
	position: relative;
	box-shadow: 0 3px 6px #00000029;
	text-align: center;
	position: absolute;
	top: 182.5px;
	left: 50%;
	transform: translateX(-50%);
}
.ph-quiz__result-eyebrow {
	color: #0F1324;
	font-size: 50px;
	line-height: 50px;
	margin: 0 0 37px;
	font-family: 'Cormorant Garamond', serif;
}
.ph-quiz__result-tagline {
	color: #4D4D4D;
	line-height: 28px;
	font-size: 20px;
	letter-spacing: 0.32px;
	margin: 0 0 55.81px;
}
.ph-quiz__share {
	display: inline-flex;
	width: 50%;
	gap: 12.58px;
	justify-content: start;
	align-items: center;
	color: #747474;
	font-size: 16px;
	line-height: 22px;
}
.ph-quiz__share-link {
	display: inline-flex;
	width: 40.42px;
	height: 40.42px;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --ph-quiz-line );
	border-radius: 50% !important;
	color: #B4B4B4;
	background: #fff;
	text-decoration: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ph-quiz__share-link--copy{
    display: none;
}
.ph-quiz__share-link svg { display: block;width: 18px; height: 18px; }
.ph-quiz__share-link:hover,
.ph-quiz__share-link:focus {
	background: var( --ph-quiz-accent );
	color: #fff;
	border-color: var( --ph-quiz-accent );
	outline: none;
}
.ph-quiz__share-link.is-copied {
	background: #2e7d32;
	border-color: #2e7d32;
	color: #fff;
}

.ph-quiz__noscript,
.ph-quiz__loading {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	color: var( --ph-quiz-muted );
}

/* ============================================================
 * Goddess Collection archive (6.0) — /goddesses/
 * ============================================================ */
.ph-goddess-collection {
	background: var( --ph-quiz-cream );
	color: var( --ph-quiz-navy );
	font-family: Nunito, sans-serif;
}
.ph-goddess-collection__hero {
	min-height: calc(100vh - 200px);
	background: #eae4d4 center / cover no-repeat;
	position: relative;
	display: flex;
	align-items: flex-end;
	color: #fff;
}
.ph-goddess-collection__hero-overlay {
	width: 100%;
	background: linear-gradient( to top, rgba( 0, 14, 48, 0.55 ), transparent );
	padding: 3rem 1.5rem 2.5rem;
	text-align: center;
}
.ph-goddess-collection__hero-eyebrow {
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-size: 0.8rem;
	margin: 0 0 0.5rem;
	opacity: 0.95;
}
.ph-goddess-collection__hero-title {
	font-weight: 400;
	font-size: clamp( 2rem, 5vw, 3.25rem );
	margin: 0;
	letter-spacing: 0.05em;
}
.ph-goddess-collection__intro {
	padding: 53.16px 1.25rem 38px;
	text-align: center;
}
.ph-goddess-collection__inner {
	max-width: 720px;
	margin: 0 auto;
}
.ph-goddess-collection__eyebrow {
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var( --ph-quiz-accent );
	font-size: 0.85rem;
	margin: 0 0 0.5rem;
}
.ph-goddess-collection__title {
	font-weight: 400;
	font-size: clamp( 2rem, 4vw, 2.75rem );
	margin: 0 0 1rem;
}
.ph-goddess-collection__body { line-height: 1.7; margin-bottom: 2rem; }
.ph-goddess-collection__body p { margin-bottom: 0.75rem; font-size: 18px; line-height: 25px; color: #0F1324; }

.ph-goddess-collection__grid-wrap { padding: 2rem 1.25rem 5rem; }
.ph-goddess-collection__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}
.vd-quiz-cta {
	display: inline-block;
	background: transparent;
	color: #0F1324;
	border: 1.5px solid var( --ph-quiz-accent );
	padding: 26px 13px;
	font-size: 14px;
	letter-spacing: 2.8px;
	font-weight: 500;
	line-height: 18px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	font-family: inherit;
}

.vd-quiz-cta:hover,
.vd-quiz-cta:focus {
	background: var( --ph-quiz-accent );
	color: #fff;
}
.ph-goddess-collection__intro-cta{
    margin-top: 41px;
}
.ph-competition-form-cta{
    border: 2px solid var(--ph-quiz-accent);
    padding: 20px 2rem;
    font-weight: 600;
    background-color: #FAF8F5;
}
@media ( max-width: 900px ) {
	.ph-goddess-collection__grid { grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 540px ) {
	.ph-goddess-collection__grid { grid-template-columns: 1fr; }
}
.ph-goddess-card {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: var( --ph-quiz-tile-shadow );
	transition: transform 0.2s, box-shadow 0.2s;
}
.ph-goddess-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 6px 22px rgba( 0, 14, 48, 0.14 );
}
.ph-goddess-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.ph-goddess-card__media {
	aspect-ratio: 4 / 3;
	background: #f0ece0 center / cover no-repeat;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ph-goddess-card__placeholder {
	color: var( --ph-quiz-muted );
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 0.85rem;
}
.ph-goddess-card__body {
	padding: 1.25rem 1.25rem 1.5rem;
	text-align: center;
}
.ph-goddess-card__title {
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ph-quiz-accent );
	margin: 0 0 0.4rem;
}
.ph-goddess-card__tagline {
	color: var( --ph-quiz-navy );
	line-height: 1.55;
	margin: 0 0 0.75rem;
	min-height: 3em;
}
.ph-goddess-card__cta {
	color: var( --ph-quiz-navy );
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ============================================================
 * Single Goddess (5.0) — /goddesses/{slug}/
 * ============================================================ */
.ph-goddess-single {
	background: var( --ph-quiz-cream );
	color: var( --ph-quiz-navy );
	font-family: Nunito, sans-serif;
}
.ph-goddess-single__hero {
	min-height: 60vh;
	background: #f0ece0 center / cover no-repeat;
	position: relative;
	display: flex;
	align-items: flex-end;
	color: #fff;
}
.ph-goddess-single__hero-overlay {
	width: 100%;
	background: linear-gradient( to top, rgba( 0, 14, 48, 0.55 ), transparent );
	padding: 3rem 1.5rem 2.5rem;
	text-align: center;
}
.ph-goddess-single__eyebrow {
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-size: 0.8rem;
	margin: 0 0 0.5rem;
	opacity: 0.9;
}
.ph-goddess-single__title {
	font-weight: 400;
	font-size: clamp( 2.5rem, 6vw, 4rem );
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}
.ph-goddess-single__tagline {
	max-width: 620px;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.6;
}

.ph-goddess-single__body {
	max-width: 1080px;
	margin: 3rem auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 3rem;
	align-items: start;
}
@media ( max-width: 820px ) {
	.ph-goddess-single__body { grid-template-columns: 1fr; }
}
.ph-goddess-single__story {
	line-height: 1.75;
	font-size: 1rem;
}
.ph-goddess-single__story p { margin-bottom: 1rem; }
.ph-goddess-single__traits {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.ph-goddess-single__traits li {
	background: #fff;
	border: 1px solid var( --ph-quiz-line );
	padding: 0.4rem 1rem;
	border-radius: 999px;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: var( --ph-quiz-accent );
}
.ph-goddess-single__talisman {
	margin: 1.5rem 0;
	color: var( --ph-quiz-muted );
	font-style: italic;
}

.ph-goddess-single__product {
	background: #fff;
	padding: 2rem;
	border-radius: 6px;
	box-shadow: var( --ph-quiz-tile-shadow );
	text-align: center;
}
.ph-goddess-single__product-image img {
	max-width: 260px;
	height: auto;
	margin: 0 auto 1rem;
}
.ph-goddess-single__product-title {
	font-weight: 400;
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}
.ph-goddess-single__product-price {
	color: var( --ph-quiz-accent );
	font-size: 1.1rem;
	margin: 0 0 1rem;
}
.ph-goddess-single__product-excerpt {
	color: var( --ph-quiz-muted );
	font-size: 0.9rem;
	line-height: 1.55;
	margin-bottom: 1.5rem;
}
.ph-goddess-single__product-detail-link {
	display: block;
	margin-top: 0.85rem;
	font-size: 0.85rem;
	color: var( --ph-quiz-navy );
	letter-spacing: 0.05em;
	text-decoration: none;
}
.ph-goddess-single__product-detail-link:hover { text-decoration: underline; }

.ph-goddess-single__styling {
	max-width: 720px;
	margin: 0 auto 3rem;
	padding: 0 1.5rem;
	text-align: center;
}
.ph-goddess-single__styling h2 {
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 1rem;
	color: var( --ph-quiz-accent );
	margin: 0 0 1rem;
	font-weight: 500;
}

.ph-goddess-single__others {
	background: #fff;
	padding: 3.5rem 1.5rem;
	text-align: center;
}
.ph-goddess-single__others-title {
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --ph-quiz-accent );
	margin: 0 0 2rem;
}
.ph-goddess-single__others-grid {
	max-width: 1000px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 1rem;
}
@media ( max-width: 700px ) {
	.ph-goddess-single__others-grid { grid-template-columns: repeat( 3, 1fr ); }
}
@media ( max-width: 440px ) {
	.ph-goddess-single__others-grid { grid-template-columns: repeat( 2, 1fr ); }
}
.ph-goddess-single__others-grid a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.ph-goddess-single__others-media {
	aspect-ratio: 1 / 1;
	background: #f0ece0 center / cover no-repeat;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}
.ph-goddess-single__others-name {
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ph-quiz-navy );
}
.ph-goddess-single__quiz-cta { margin-top: 2.5rem; }

/* ============================================================
 * Competition page (/goddess-competition/)
 * ============================================================ */
.ph-competition {
	background: var( --ph-quiz-cream );
	color: var( --ph-quiz-navy );
	font-family: Nunito, sans-serif;
}
.ph-competition__hero {
	min-height: 50vh;
	background: #eae4d4 center / cover no-repeat;
}
.ph-competition__intro { padding: 77.16px 20px 82px; rem 1.25rem 2rem; text-align: center; position: relative;}
.ph-competition__inner { max-width: 839px; margin: 0 auto; line-height: 1.7; }
.ph-competition__inner h2 { font-weight: 400; letter-spacing: 6px; text-transform: uppercase; font-size: 30px; color: #0F1324; line-height: 45px; margin: 0 0 50px; text-align: center; font-family: 'Cormorant Garamond', serif;}
.ph-competition__headline { font-weight: 400; font-size: 30px; margin: 0 0 59.84px;font-family: 'Cormorant Garamond', serif; line-height: 45px; }
.ph-competition__headline span { font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 24px;}
.ph-competition__body p { margin-bottom: 0.75rem;font-size: 18px;font-style: normal; line-height: 25px; }
.ph-competition__prize-value,
.ph-competition__dates { color: var( --ph-quiz-muted ); font-size: 0.95rem; margin: 0.5rem 0; }

.ph-competition__form-wrap { padding: 1rem 1.25rem 3rem; }
.ph-competition__form-inner { max-width: 839px; margin: 0 auto; background: #fff; padding: 33.41px 90.88px 38.89px; border-radius: 6px; box-shadow: 0px 3px 6px #00000012; }
.ph-competition__form-title { text-align: center; font-weight: 400; letter-spacing: 3.6px; text-transform: uppercase; font-size: 18px; color: #0F1324; margin: 0 0 1.5rem; font-family: 'Cormorant Garamond', serif; line-height: 45px; }
.ph-competition__form-title span{font-family: 'Cormorant Garamond', serif;}
.ph-competition__row { display: grid; grid-template-columns: 1fr 1fr; gap: 57.75px; }
.ph-competition__row label { display: block; }
.ph-competition__label { display: block; font-size: 0.8rem; letter-spacing: 0.05em; color: var( --ph-quiz-muted ); margin-bottom: 0.25rem; text-transform: uppercase; }
.ph-competition__form-inner label { margin-bottom: 40.98px; display: block; }
.ph-competition__error { color: #b23a3a; margin-top: 1rem; }
.ph-competition__success { color: #2e7d32; margin-top: 1rem; font-weight: 600; }
.ph-competition__form-inner label.ph-competition_email-input{margin-bottom: 36px;}
.ph-competition__form-inner label.ph-quiz__consent.first{margin-bottom: 28.98px;}
.ph-competition__form-inner label.ph-quiz__consent.last{margin-bottom: 40.83px;}

.ph-competition__two-col {
	max-width: calc(100% - 280px);
	margin: 3rem auto 101.5px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px 0;
	align-items: center;
	position: relative;
}
.ph-competition__two-col-item{
    padding: 0 157px;
}
.ph-competition__two-col-item h2, .ph-competition__two-col-mobile-title {
	font-weight: 400;
	letter-spacing: 6px;
	line-height: 45px;
	text-transform: uppercase;
	font-family: 'Cormorant Garamond', serif;
	font-size: 30px;
	color: #0F1324;
	margin: 0 0 81px;
}
.ph-competition__two-col-item p { margin-bottom: 20px; line-height: 25px; font-size: 15px; color: #0F1324; }
.ph-competition__terms { padding: 82.5px 1.25rem 76px; background: #fdfbf6; position: relative; }
.ph-competition__terms::before{
    position: absolute;
    content: "";
    width: 641.9px;
    max-width: 40%;
    height: 50%;
    background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-307.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: -57.37px;
    bottom: 100%;
    transform: translateY(37%);
}
.ph-competition__terms::after{
    position: absolute;
    content: "";
    max-width: calc(75% - 250px);
    width: calc(100% - 800px);
    background-color: #D6D6D6;
    height: 1px;
    right: 140px;
    top: 0%;
}
.ph-competition__terms .ph-competition__inner { max-width: 1080px; }
.ph-competition__terms-cols {
	column-count: 2;
	column-gap: 88px;
	color: #0F1324;
	font-size: 15px;
	line-height: 25px;
	position: relative;
}
.ph-competition__terms-cols::after{
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background-color: #D3D3D3;
}
.ph-competition__terms-cols p{
    margin-bottom: 0;
}
.ph-competition__terms-cols ol { padding-left: 1.2rem; margin: 0; }
.ph-competition__terms-cols li { break-inside: avoid; margin-bottom: 0.5rem; }
@media ( max-width: 820px ) {
	.ph-competition__terms-cols { column-count: 1; }
	.ph-competition__terms-cols::after{
	    display: none;
	}
}
@media ( max-width: 500px ) {
	.ph-competition__row { grid-template-columns: 1fr; }
}


/* ============================================================
 * VD Competition page (/goddess-competition/) New CSS
 * ============================================================ */

.ph-competition__hero{
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: calc(100vh - 200px);
}
.ph-competition__hero::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    background: linear-gradient(transparent, #00000094);
}
.ph-competition__hero-title{
    text-align: center;
    color: #fff;
    font-size: 40px;
    line-height: 45px;
    font-family: 'Cormorant Garamond', serif;
    position: relative;
    margin-bottom: 43px;
    letter-spacing: 8px;
    padding: 0 20px;
}
.ph-competition .ph-quiz__form{
    max-width: 100%;
}
.ph-competition__hero-title span{
    font-family: 'Cormorant Garamond', serif;
    white-space: nowrap;
}
.ph-competition__two-col-item p a{
    margin-top: 24px;
    background-color: transparent;
}
.vd-ph-competition-title{
    text-align: center;
    color: #0F1324;
    font-size: 30px;
    font-family: 'Cormorant Garamond', serif;
    position: relative;
    letter-spacing: 6px;
    line-height: 45px;
}
.ph-goddess-collection__body-title{
    margin-bottom: 43.84px;
}
.ph-competition__two-col-mobile-title, .ph-competition__two-col-item-media .mobile-img{
    display: none;
}
.ph-competition__intro::after{
    position: absolute;
    content: "";
    width: 287.02px;
    max-width: 25%;
    height: 100%;
    background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-8081-2-scaled.png");
    background-size: contain;
    background-repeat: no-repeat;
    left: 0;
    top: 66.33px;
}
.ph-competition__intro::before{
    position: absolute;
    content: "";
    width: 439px;
    max-width: 15%;
    height: 100%;
    background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-306-3.png");
    background-size: contain;
    background-repeat: no-repeat;
    right: 0;
    top: 33.29px;
}
.ph-competition__two-col::after{
    position: absolute;
    content: "";
    width: 213.54px;
    max-width: 10%;
    height: 100%;
    background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-312-2.png");
    background-size: contain;
    background-repeat: no-repeat;
    right: -140px;
    top: 0;
}
.ph-competition__two-col::before{
    position: absolute;
    content: "";
    width: 213.54px;
    max-width: 14%;
    height: 100%;
    background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-331-1-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    left: 0px;
    top: -30px;
    display: none;
}
.ph-quiz__body p span[style="text-decoration: underline;"], .ph-quiz__body p span[style="text-decoration: underline;"] span{
   font-size: 22px;
    color: #5b9dbe;
    letter-spacing: 0.35px;
    line-height: 35px;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: block;
    width: 100%;
    text-align:center;
}
.ph-quiz__body p:has(span[style="text-decoration: underline;"]) + p {
    text-align: center;
    color: #0F1324;
    font-size: 22px;
    letter-spacing: 0.35px;
    line-height: 35px;
    margin-bottom: 59px;
}
.ph-quiz__body p:has(span[style="text-decoration: underline;"]){
    margin-bottom: 0;
    margin-top: 83px;
}
.ph-quiz:has(.ph-quiz__screen--question){
    padding: 80.5px 1.25rem 152px;
}
.ph-quiz:has(.ph-quiz__screen--question)::before{
    position: absolute;
    content: "";
    width: 310.13px;
    max-width: 14%;
    height: 100%;
    background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-24.png");
    background-size: contain;
    background-repeat: no-repeat;
    left: 19.26px;
    top: 30.56px;
}
.ph-quiz:has(.ph-quiz__screen--question)::after{
    position: absolute;
    content: "";
    width: 310.13px;
    max-width: 14%;
    height: 100%;
    background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-23.png");
    background-size: contain;
    background-repeat: no-repeat;
    right: 19.26px;
    top: 30.56px;
}
@media ( max-width: 1500px ){
    .ph-competition__two-col-item{
        padding: 0 0 0 80px;
    }
    .ph-competition__two-col-item.last{
        padding: 0 80px 0 0;
    }
    .ph-quiz:has(.ph-quiz__screen--question)::after, .ph-quiz:has(.ph-quiz__screen--question)::before{
        max-width: 10%;
    }
}
@media ( max-width: 1280px ){
    .ph-quiz:has(.ph-quiz__screen--question)::after, .ph-quiz:has(.ph-quiz__screen--question)::before{
        top: 14px;
    }
    .ph-competition__two-col-item{
        padding: 0 0 0 40px;
    }
    .ph-competition__two-col::after{
        right: -60px;
    }
    .ph-competition__two-col-item.last{
        padding: 0 40px 0 0;
    }
    .ph-competition__two-col {
    	max-width: calc(100% - 120px);
    	padding: 0 20px;
    }
    .ph-competition__terms::after{
        width: calc(100% - 250px);
        right: 80px;
    }
    .ph-quiz:has(.ph-quiz__screen--intro)::before, .ph-quiz:has(.ph-quiz__screen--intro)::after{
        width: calc(((100% - 680px) / 2) + 20px);
    }
}
@media ( max-width: 1023px ){
    .ph-quiz:has(.ph-quiz__screen--intro)::before{
        background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Frame-2085668732-3.png");
        width: 35%;
        top: 30px;
    }
    .ph-competition__two-col-item.first{
        margin-bottom: 10px;
    }
    .ph-competition__two-col-item.last h2{
        margin-bottom: 35.84px;
    }
    .ph-quiz:has(.ph-quiz__screen--intro)::after{
        background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Frame-2085668733-2.png");
        width: 35%;
        top: 30px;
    }
    .ph-competition__two-col-mobile-title, .ph-competition__two-col-item h2{
        display: block;
        text-align: center;
        font-size: 25px;
        letter-spacing: 5px;
        line-height: 30px;
        margin-bottom: 0px;
    }
    .ph-competition__two-col-item p:has(a){
        text-align: center;
    }
    .ph-competition__two-col::after{
        right: 0px;
        max-width: 14%;
        top: -30px;
        background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-331-1.png");
    }
    .ph-competition__two-col::before{
        display: inline-block;
    }
    .ph-competition__two-col{
        display: flex;
        gap: 23px;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        margin-top: 1px;
    }
    .ph-competition__terms::after{
        max-width: calc(75% - 170px);
        right: 20px;
    }
    
    .ph-competition__two-col-item.last{
        order: 4;
    }
    .ph-competition__two-col-item.first h2, .ph-competition__two-col-item-media .desktop-img{
        display: none;
    }
    .ph-competition__two-col-item-media .mobile-img{
        display: block;
        width: 100vw;
        max-width: 100vw;
        margin-left: -20px;
        margin-top: -40px;
        margin-bottom: -58px;
    }
    .ph-competition__two-col-item-media{
        margin-bottom: 8px;
    }
    .ph-competition__two-col-item, .ph-competition__two-col-item.last{
        padding: 0;
    }
    .ph-competition__two-col-item-media, .ph-competition__two-col-item-media img{
         width: 100%;
    }
    .vd-ph-competition-title, .ph-quiz__question{
        font-size: 25px;
        line-height: 30px;
        letter-spacing: 5px;
        margin-bottom: 30px;
    }
    .ph-goddess-collection__body p {
        line-height: 25px;
        font-size: 15px;
        margin-bottom: 20px;
    }
    .ph-competition__intro::after{
        max-width: 15%;
    }
    .ph-competition__intro::before{
        max-width: 12%;
    }
}




@media ( max-width: 820px ){
    .ph-quiz__retake::after{
        right: calc(50% - 84px);
    }
    .ph-quiz__result-card{
        padding: 35px 20px 59.58px;
    }
    .ph-competition__hero-title{
        font-size: 25px;
        margin-bottom: 16px;
        letter-spacing: 5px;
        line-height: 35px;
    }
    .ph-competition__terms::after{
        max-width: calc(100% - 40px);
        width: calc(100% - 40px);
        right: 20px;
    }
    .ph-competition__terms::before{
        display: none;
    }
    .ph-quiz:has(.ph-quiz__screen--question) {
        padding: 80px 1.25rem 50px;
    }
    .ph-quiz__progress-label{
        font-size: 14px;
    }
    .ph-quiz:has(.ph-quiz__screen--question)::after, .ph-quiz:has(.ph-quiz__screen--question)::before{
        max-width: 114px;
    }
    .ph-quiz__progress{
        margin: 0 auto 55px;
    }
    .ph-quiz__tiles{
        gap: 25px;
    }
    .ph-quiz__tile-letter, .ph-quiz__tile-text{
        font-size: 18px;
    }
    .ph-competition__inner::after{
        position: absolute;
        content: "";
        width: 213.54px;
        max-width: 10%;
        height: 100%;
        background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-331-1.png");
        background-size: contain;
        background-repeat: no-repeat;
        right: 0px;
        top: -135px;
    }
    .ph-competition__inner::before{
        position: absolute;
        content: "";
        width: 213.54px;
        max-width: 10%;
        height: 100%;
        background-image: url("https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-331-1-1.png");
        background-size: contain;
        background-repeat: no-repeat;
        left: 0px;
        top: -135px;
    }
    .ph-competition__terms{
        margin-top: 46.69px;
    }
}
@media ( max-width: 640px ){
    .ph-competition__inner::after, .ph-competition__inner::before{
        top: -100px;
        max-width: 12%;
    }
    .ph-competition__hero{
        max-height: 500px;
        min-height: 50vh;
    }
    .ph-competition__two-col{
        margin-bottom: 30px;
    }
    .ph-competition__terms{
        padding-top: 44.5px;
    }
    .ph-competition__inner h2{
        font-size: 18px;
        letter-spacing: 3.6px;
        line-height: 30px;
        margin-bottom: 36px;
    }
    
    .ph-competition__terms-cols{
        font-size: 12px;
        line-height: 15px;
        p{
            margin-bottom: 10px;
        }
    }
    .ph-quiz__result-card .ph-quiz__cta-row{
        flex-wrap: wrap;
        margin-bottom: 30px;
    }
    .ph-quiz__result-card .ph-quiz__cta-row a{
        min-width: 100%;
    }
    .ph-quiz:has(.ph-quiz__screen--intro)::after, .ph-quiz:has(.ph-quiz__screen--intro)::before{
        width: 40%;
    }
    .ph-competition__two-col-mobile-title br, .ph-competition__headline br{
        display: block;
    }
    .ph-competition__intro::after{
        background-image: url(https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-326-1-1.png);
        width: 61px;
        top: 0;
    }
    .ph-competition__intro::before{
        background-image: url(https://staging.philippaherbert.co.uk/wp-content/uploads/2026/08/Group-326-1.png);
        width: 61px;
        top: 0;
    }
    .ph-quiz__title{
        font-size: 25px;
        margin-bottom: 25px;
    }
    .ph-quiz{
        padding: 70px 1.25rem 60px;
    }
    .ph-quiz__body p{
        font-size: 14px;
        line-height: 18px;
    }
    .ph-quiz__body p span[style="text-decoration: underline;"], .ph-quiz__body p span[style="text-decoration: underline;"] span {
        font-size:18px;
    }
    .ph-quiz__body p:has(span[style="text-decoration: underline;"]) + p{
        font-size:18px;
        line-height: 25px;
        margin-bottom: 40px;
        
    }
    .ph-quiz__body p:has(span[style="text-decoration: underline;"]){
            margin-top: 45px;
    }
    .ph-quiz__cta, .ph-competition__two-col-item p a{
        min-width: 251px;
        font-size: 14px;
        padding: 16px 16px;
    }
    .ph-competition__two-col-item p{
        line-height: 20px;
        font-size: 12px;
    }
    .ph-competition__headline{
        line-height: 35px;
        font-size: 20px;
        margin: 0 0 39.84px;
    }
    .ph-competition__intro{
        padding: 54.16px 56px 3px;
    }
    .ph-competition__headline span{
        font-size: 18px;
    }
    .ph-competition__body p{
        font-size: 14px;
    }
    .ph-competition__form-title span, .ph-competition__form-title{
        display:block;
        text-align:center;
        line-height: 25px;
        letter-spacing: 3.5px;
        margin: 0 0 32.2px;
    }
    .ph-competition__row{
        display: grid;
        grid-template-columns: 1fr;
        gap: 35.33px;
        margin-bottom: 35.32px;
    }
    .ph-competition__form-inner label{
        margin-bottom: 0px;
    }
    .ph-quiz__input{
        font-size: 12px;
        line-height: 15px;
        letter-spacing: 1.2px;
        color: #A7A7A7;
    }
    .ph-competition__form-inner{
        padding:25px 22.63px 35.02px;
    }
    .ph-competition__form-wrap{
        padding: 1rem 56px 3rem;
    }
    .ph-quiz__consent{
        font-size: 12px;
    }
    .ph-competition__form-inner label.ph-quiz__consent.first{
        margin-bottom: 20.2px;
    }
    .ph-competition__form-inner label.ph-quiz__consent.last{
        margin-bottom: 37.61px;
    }
    .ph-competition__form-inner label span{
        font-style: italic;
    }
    .ph-competition-form-cta{
        padding: 16px;
        min-width: auto;
        font-weight: 500;
        border-width: 1px;
    }
    .ph-quiz:has(.ph-quiz__screen--question)::before{
        left: 0px;
        top: 10px;
    }
    .ph-quiz:has(.ph-quiz__screen--question)::after{
        right: 0px;
        top: 10px;
    }
    .ph-quiz__result-eyebrow{
        font-size: 25px;
        line-height: 30px;
        letter-spacing: 5px;
        margin: 0 0 18px;
    }
    .ph-quiz__result-title{
        font-size: 20px;
        letter-spacing: 3px;
        margin-bottom: 40px;
    }
    .ph-quiz__result-tagline{
        line-height: 20px;
        font-size: 16px;
        margin: 0 0 40px;
    }
    .ph-quiz__share, .ph-quiz__retake{
        width: 100%;
    }
    .ph-quiz__share{
    	justify-content: center;
    }
    .ph-quiz__retake::after{
        right: calc(50% - 86px);
    }
    
}


@media ( max-width: 400px ){
    .ph-competition__inner::after, .ph-competition__inner::before{
        top: -80px;
    }
}