/* Homepage composition. Shared tokens, header, forms and service pages stay authoritative. */
.home-v2 main { overflow-wrap: anywhere; }

.home-v2 .home-hero {
     position: relative;
     overflow: hidden;
     padding-block: clamp(var(--space-7), 6vw, calc(var(--space-8) + var(--space-4)));
     background: linear-gradient(116deg, var(--page-bg) 43%, var(--surface-alt));
}
.home-v2 .home-hero::before {
     content: "";
     position: absolute;
     width: 40rem;
     height: 40rem;
     top: -10rem;
     right: -6rem;
     border: var(--border-width) solid var(--border-soft);
     border-radius: 50%;
     opacity: 0.4;
     pointer-events: none;
}
.home-v2 .home-hero-grid {
     position: relative;
     display: grid;
     gap: var(--space-6);
     align-items: center;
}
.home-v2 .home-hero-copy { min-width: 0; max-width: var(--content-max); }
.home-v2 .home-hero-copy > .v2-eyebrow { margin-bottom: var(--space-6); color: var(--text-muted); }
.home-v2 .home-hero h1 { font-weight: var(--weight-semibold); text-wrap: initial; }
.home-v2 .home-hero h1 > span,
.home-v2 .home-hero h1 > em { display: block; }
.home-v2 .home-hero h1 > em { color: var(--accent); }
.home-v2 .home-hero-introduction { margin-top: var(--space-5); color: var(--text-muted); }
.home-v2 .home-hero-introduction p + p { margin-top: var(--space-4); }
.home-v2 .home-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.home-v2 .home-hero-note { max-width: 28rem; margin-top: var(--space-5); color: var(--text-subtle); }

/* Intrinsic dimensions reserve the complete portrait illustration before it loads. */
.home-v2 .home-hero-visual {
     position: relative;
     min-width: 0;
     margin: 0;
}
.home-v2 .home-hero-visual::before {
     content: "";
     position: absolute;
     inset: 8% 4% 18% 0;
     background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
     pointer-events: none;
}
.home-v2 .home-hero-visual > img { position: relative; display: block; width: 100%; height: clamp(20rem, 90vw, 24rem); object-fit: contain; }
.home-v2 .home-hero-visual figcaption { position: relative; padding-top: var(--space-4); text-align: center; color: var(--text-muted); }
.home-v2 .home-hero-visual figcaption em { display: block; margin-top: var(--space-1); font-family: var(--font-serif); font-size: var(--type-h3); line-height: var(--leading-subheading); color: var(--text); }

.home-v2 .home-services { padding-block: clamp(calc(var(--space-7) + var(--space-2)), 6vw, calc(var(--space-8) + var(--space-4))) clamp(var(--space-8), 7vw, calc(var(--space-8) + var(--space-6))); border-top: var(--border-width) solid var(--border-soft); }
.home-v2 .home-service-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.home-v2 .home-service-heading .v2-eyebrow { margin-bottom: var(--space-3); color: var(--accent); }
.home-v2 .home-service-heading h2 em { color: var(--accent); }
.home-v2 .home-service-heading > a { padding-block: var(--space-2); }
.home-v2 .home-service-grid { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.home-v2 .home-service-grid > li { min-width: 0; }
.home-v2 .home-service-card {
     display: grid;
     grid-template-rows: auto 1fr;
     height: 100%;
     min-width: 0;
     overflow: hidden;
     border: var(--border-width) solid var(--border-soft);
     border-radius: calc(var(--radius-surface) * 2);
     background: var(--surface);
     box-shadow: 0 var(--space-4) calc(var(--space-6) + var(--space-2)) color-mix(in srgb, var(--button-text) 10%, transparent);
     color: var(--text);
     text-decoration: none;
     transition: border-color 0.15s ease, transform 180ms ease;
}
.home-v2 .home-service-card:hover { border-color: var(--accent); }
.home-v2 .home-service-card:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-color: var(--focus); }
.home-v2 .home-service-card:hover h3,
.home-v2 .home-service-card:focus-visible h3 { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: var(--border-width); }
.home-v2 .home-service-media {
     position: relative;
     height: 12rem;
     background: linear-gradient(128deg, var(--surface-alt), var(--surface));
}
.home-v2 .home-service-media::after { content: ""; position: absolute; inset: var(--space-3); border: var(--border-width) solid var(--border-soft); border-radius: var(--radius-surface); opacity: 0.4; pointer-events: none; }
.home-v2 .home-service-media > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: var(--space-3); object-fit: contain; }
.home-v2 .home-service-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-5); }
.home-v2 .home-service-kicker { color: var(--accent); font-size: var(--type-eyebrow); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.home-v2 .home-service-copy h3 { margin: 0; font-weight: var(--weight-semibold); }
.home-v2 .home-service-copy > p:not(.home-service-kicker) { color: var(--text-muted); }
.home-v2 .home-service-action { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); width: 100%; margin-top: auto; padding-top: var(--space-4); color: var(--accent); font-weight: var(--weight-semibold); }
.home-v2 .home-service-action > span { display: grid; place-items: center; flex-shrink: 0; width: var(--space-6); height: var(--space-6); border: var(--border-width) solid var(--border-soft); border-radius: 50%; }
.home-v2 .home-service-routes { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-6); margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-width) solid var(--border-soft); }
.home-v2 .home-service-routes > p { color: var(--text-muted); }
.home-v2 .home-service-routes ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: 0; padding: 0; }
.home-v2 .home-service-routes a { display: inline-block; padding-block: var(--space-2); color: var(--text); text-underline-offset: 0.3em; }
.home-v2 .home-service-routes a:hover { color: var(--accent); }

@media (min-width: 768px) {
     .home-v2 .home-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
     .home-v2 .home-hero-visual > img { height: clamp(26.25rem, 40vw, 34.375rem); }
     .home-v2 .home-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
     .home-v2 .home-service-featured { grid-column: 1 / -1; }
     .home-v2 .home-service-featured .home-service-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: 1fr; min-height: 27rem; }
     .home-v2 .home-service-featured .home-service-media { grid-column: 2; grid-row: 1; height: auto; }
     .home-v2 .home-service-featured .home-service-copy { grid-column: 1; grid-row: 1; padding: clamp(var(--space-5), 2.5vw, var(--space-6)); }
     .home-v2 .home-service-featured h3 { font-size: var(--type-h2); }
}
@media (min-width: 1024px) {
     .home-v2 .home-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
     .home-v2 .home-service-featured { grid-column: span 2; }
}
@media (max-width: 767px) {
     .home-v2 .home-hero-actions { align-items: stretch; flex-direction: column; }
     .home-v2 .home-hero-actions > .v2-button { justify-content: space-between; }
}
@media (hover: hover) and (pointer: fine) {
     .home-v2 .home-service-card:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
     .home-v2 .home-service-card { transition: none; }
     .home-v2 .home-service-card:hover { transform: none; }
}

/* Lower homepage: editorial layouts, using the shared palette and type scale. */
.home-v2 .home-section { padding-block: var(--section-space); color: var(--text); }
.home-v2 .home-section--surface { background: var(--surface); }
.home-v2 .home-editorial-split { display: grid; gap: var(--space-6); }
.home-v2 .home-editorial-split > * { min-width: 0; }
.home-v2 .home-section-heading { max-width: 36rem; }
.home-v2 .home-section-heading .v2-eyebrow,
.home-v2 .home-work-heading .v2-eyebrow { color: var(--text-muted); }
.home-v2 .home-section-heading h2 em { color: var(--accent); }
.home-v2 .home-section-copy { max-width: var(--content-max); color: var(--text-muted); }
.home-v2 .home-section-copy > p + p { margin-top: var(--space-5); }
.home-v2 .home-section-action { margin-top: var(--space-6); }
.home-v2 .home-section-action > a { max-width: 100%; }
.home-v2 .home-section-action .v2-text-link { display: inline-block; padding-block: var(--space-2); color: var(--text); }

/* Case studies are open editorial rows rather than a second set of service cards. */
.home-v2 #selected-work { border-top: var(--border-width) solid var(--border-soft); background: var(--surface); }
.home-v2 .home-work-heading { display: grid; gap: var(--space-6); margin-bottom: var(--space-8); }
.home-v2 .home-work-heading h2 { max-width: 36rem; }
.home-v2 .home-work-heading h2 em { display: block; color: var(--accent); }
.home-v2 .home-work-phrase { display: inline-block; }
.home-v2 .home-work-intro { max-width: var(--content-max); align-self: end; color: var(--text-muted); }
.home-v2 .home-work-intro p + p { margin-top: var(--space-4); }
.home-v2 .home-work-grid { display: grid; gap: var(--space-7); }
.home-v2 .home-project { display: grid; align-items: center; gap: var(--space-6); min-width: 0; }
.home-v2 .home-project + .home-project { padding-top: var(--space-7); border-top: var(--border-width) solid var(--border-soft); }
.home-v2 .home-project-art {
     position: relative;
     display: grid;
     place-items: center;
     aspect-ratio: 4 / 3;
     min-width: 0;
     border: var(--border-width) solid var(--border-soft);
     border-radius: var(--radius-surface);
     background: linear-gradient(145deg, var(--surface), var(--surface-alt));
     color: var(--accent);
}
.home-v2 .home-project-number { position: absolute; top: var(--space-4); left: var(--space-5); font-size: var(--type-eyebrow); color: var(--text-muted); }
.home-v2 .home-project-art svg { display: block; width: 88%; height: auto; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.home-v2 .home-art-grid { display: none; }
.home-v2 .home-art-solid { fill: var(--accent); fill-opacity: 0.12; }
.home-v2 .home-project-copy { min-width: 0; }
.home-v2 .home-project-copy .v2-eyebrow { margin-bottom: var(--space-4); color: var(--text-muted); line-height: var(--leading-body); letter-spacing: 0.08em; }
.home-v2 .home-project-copy h3 { max-width: 34rem; }
.home-v2 .home-project-copy > p:last-child { max-width: 65ch; color: var(--text-muted); }

/* A concise support band and a quieter white-label partnership section. */
.home-v2 .home-support { padding-block: var(--space-8); border-block: var(--border-width) solid var(--border-soft); background: var(--surface-alt); }
.home-v2 .home-agency h2 em { display: block; margin-top: var(--space-2); }
.home-v2 .home-other-services { padding-top: 0; }
.home-v2 .home-other-services > .container { padding-top: var(--section-space); border-top: var(--border-width) solid var(--border-soft); }
.home-v2 .home-related-services { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
.home-v2 .home-related-services > article { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--space-5); border-top: var(--border-width) solid var(--border-soft); }
.home-v2 .home-related-services p { max-width: 56ch; color: var(--text-muted); }
.home-v2 .home-related-services a { display: inline-block; margin-top: auto; padding-top: var(--space-5); padding-bottom: var(--space-2); color: var(--text); }
.home-v2 #ongoing-development-support { scroll-margin-top: 7rem; }

/* The ordered list keeps sequence explicit without boxed steps. */
.home-v2 .home-process { display: grid; gap: var(--space-6); list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.home-v2 .home-process li { min-width: 0; padding-top: var(--space-5); border-top: var(--border-width) solid var(--border-soft); }
.home-v2 .home-step-number { display: block; margin-bottom: var(--space-5); color: var(--accent); font-size: var(--type-eyebrow); }
.home-v2 .home-process p { color: var(--text-muted); }

/* Native details retain their keyboard and disclosure behaviour. */
.home-v2 .home-faq details { border-bottom: var(--border-width) solid var(--border-soft); }
.home-v2 .home-faq details:first-child { border-top: var(--border-width) solid var(--border-soft); }
.home-v2 .home-faq summary { position: relative; padding: var(--space-5) var(--space-6) var(--space-5) 0; list-style: none; font-size: var(--type-body); font-weight: var(--weight-semibold); line-height: var(--leading-control); cursor: pointer; }
.home-v2 .home-faq summary::-webkit-details-marker { display: none; }
.home-v2 .home-faq summary::after { position: absolute; top: var(--space-5); right: var(--space-1); content: "+"; color: var(--accent); }
.home-v2 .home-faq details[open] summary::after { content: "−"; }
.home-v2 .home-faq details[open] summary { color: var(--accent); }
.home-v2 .home-faq details p { max-width: 65ch; padding: 0 var(--space-6) var(--space-5) 0; color: var(--text-muted); }

/* Shared form controls and JavaScript hooks stay authoritative. */
.home-v2 #contact { border-top: var(--border-width) solid var(--border-soft); background: var(--surface-alt); }
.home-v2 .home-contact-grid { display: grid; align-items: start; gap: var(--space-7); }
.home-v2 .home-contact-copy { min-width: 0; }
.home-v2 .home-contact-copy > p { max-width: 38ch; margin-top: var(--space-5); color: var(--text-muted); }
.home-v2 .home-contact-copy .home-section-heading { margin-bottom: var(--space-6); }
.home-v2 .home-contact-copy .v2-email { max-width: 100%; }
.home-v2 .home-contact-copy .v2-contact-note { margin-top: var(--space-4); }
.home-v2 .home-enquiry-panel { min-width: 0; padding: clamp(var(--space-5), 3vw, var(--space-7)); border: var(--border-width) solid var(--border-soft); border-radius: var(--radius-surface); background: var(--surface); }
.home-v2 .home-enquiry-panel .contact-form { gap: var(--space-5) var(--space-6); }
.home-v2 .home-enquiry-panel label { line-height: var(--leading-control); }
.home-v2 .home-enquiry-panel #message-help { margin-top: var(--space-3); color: var(--text-muted); }
.home-v2 .home-enquiry-panel .form-privacy-note { grid-column: 1 / -1; color: var(--text-muted); }
.home-v2 .home-enquiry-panel .form-privacy-note a { color: var(--accent); }

@media (min-width: 768px) {
     .home-v2 .home-work-heading,
     .home-v2 .home-editorial-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-7); }
     .home-v2 .home-project { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-7); }
     .home-v2 .home-related-services,
     .home-v2 .home-process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
}
@media (min-width: 1024px) {
     .home-v2 .home-work-heading,
     .home-v2 .home-editorial-split,
     .home-v2 .home-project { column-gap: var(--space-8); }
     .home-v2 .home-process { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
     .home-v2 .home-contact-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); }
     .home-v2 .home-enquiry-panel .form-field { display: flex; flex-direction: column; }
     .home-v2 .home-enquiry-panel .form-field > input,
     .home-v2 .home-enquiry-panel .form-field > select { margin-top: auto; }
}