/* Homepage */
.home-main { padding: 0; }
.home-section { padding-block: clamp(4.5rem, 8vw, 7rem); }
.section-label { display: flex; gap: 1rem; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; }
.section-label > span { color: var(--forest); font-variant-numeric: tabular-nums; }
.home-main em { color: var(--forest); font-weight: 400; }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; margin-block-end: 2.5rem; }
.section-heading h2 { margin-block-end: 0; line-height: 1.13; }
.section-heading > p { max-inline-size: 33ch; margin-block-end: 0.2rem; color: var(--text-muted); font-size: 1rem; }
.home-service-grid { display: grid; gap: 1rem; }
.home-service-grid .service-card { min-inline-size: 0; gap: 1rem; padding: clamp(1.5rem, 2.6vw, 2.2rem); }
.home-service-grid .service-card h3 { font-size: clamp(1.45rem, 1.8vw, 1.85rem); line-height: 1.2; }
.home-service-grid .service-card p { max-inline-size: 38ch; font-size: 0.94rem; line-height: 1.55; }
.service-top { display: flex; align-items: center; align-self: stretch; margin-block-end: 0.25rem; }
.home-service-grid .service-card--feature { background: var(--forest); border-color: var(--forest); }
.home-service-grid .service-card--feature:hover, .home-service-grid .service-card--feature:focus-within { background: var(--accent-strong); }
.service-card--feature h3 { color: var(--text-on-dark); }
.home-service-grid .service-card--feature p { color: #f3e5d9; }
.home-service-grid .service-card:hover p, .home-service-grid .service-card:focus-within p { color: #fff; }
.service-card--feature .icon-container { border-color: #bf8d79; color: var(--mint); }
.service-card--feature:focus-visible { outline-color: var(--forest); outline-offset: 0.3rem; }
.home-connected { display: grid; align-items: end; gap: 2rem 5rem; background: #222b30; color: #ece4d9; }
.home-connected h2 { max-inline-size: 22ch; margin: 0; color: #f7f7fa; font-size: clamp(1.9rem, 3.1vw, 3rem); line-height: 1.2; }
.connected-copy p { max-inline-size: 42ch; font-size: clamp(1.05rem, 1.45vw, 1.25rem); line-height: 1.6; }
.connected-copy .button--text { color: #ffbc9f; }
.home-connected :focus-visible { outline-color: var(--mint); }
.process-list { display: grid; gap: 2rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.process-list li { padding-block-start: 1.2rem; border-block-start: 1px solid #c8c7bd; }
.process-number { display: block; margin-block-end: 1.75rem; color: #a43e25; font-size: 0.875rem; }
.process-list h3 { font-size: 1.45rem; line-height: 1.2; }
.process-list p { margin: 0; color: var(--text-muted); font-size: 1rem; }
.home-enquiry { padding-block-start: clamp(3rem, 6vw, 5rem); }
.enquiry-inner { padding: clamp(1.5rem, 5vw, 4rem); border-block-start: 1px solid #e6b599; background: #f5e8dc; }
.home-enquiry h2 { margin-block: 0 2rem; font-size: clamp(2rem, 3.25vw, 3.1rem); line-height: 1.2; }
.enquiry-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; }
.enquiry-bottom p { max-inline-size: 45ch; margin: 0; color: #4c534f; }
.enquiry-bottom .button { flex-shrink: 0; }
/* All copy is visible by default. Only initialized elements receive this state. */
.reveal-pending { opacity: 0; transform: translateY(1.1rem); }
[data-reveal] { transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); }
.is-visible { opacity: 1; transform: none; }
.reveal-pending:focus-within { opacity: 1; transform: none; transition: none; }
@media (min-width: 48rem) {
  .home-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-service-grid .service-card--feature { grid-column: span 2; }
  .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .home-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-service-grid .service-card--feature h3 { font-size: 2.1rem; }
  .home-connected { grid-template-columns: 1.05fr 1fr; }
  .process-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .process-list h3 { min-block-size: 4rem; }
}
@media (max-width: 47.99rem) {
  .home-main h2 br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; transform: none; }
}

/* Service pages: a shared editorial vocabulary, varied by the subject. */
.service-main { padding: 0; }
.service-hero { padding-block: 1.75rem 3.5rem; border-block-end: 1px solid var(--border); }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.85rem; margin-block-end: clamp(2.5rem, 5vw, 4.5rem); color: var(--text-muted); font-size: 0.875rem; }
.breadcrumbs a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: inherit; }
.breadcrumbs > [aria-hidden] { color: #8c978f; }
.service-hero-grid { display: grid; gap: 3rem; align-items: end; }
.service-hero .page-intro { max-inline-size: none; padding: 0; }
.service-hero h1 { margin-block-end: 1.35rem; font-size: clamp(2.15rem, 3.8vw, 3.6rem); line-height: 1.16; }
.service-hero .lede { max-inline-size: 52ch; margin-block-end: 1.7rem; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.service-hero .button { max-inline-size: 100%; }
.service-brief { padding: 1.8rem; border-block-start: 2px solid var(--forest); background: #eeeae4; }
.service-brief .eyebrow { font-size: 0.875rem; letter-spacing: 0.04em; }
.service-brief dl { margin: 1.8rem 0 0; }
.service-brief dl > div { padding-block: 1rem; border-block-start: 1px solid #c8c7bd; }
.service-brief dt { margin-block-end: 0.35rem; color: var(--forest); font-weight: 650; }
.service-brief dd { margin: 0; color: #484c5d; font-size: 1rem; }
.service-hero--dark { background: #222b30; color: #ece4d9; border-color: #56605b; }
.service-hero--dark .page-intro { max-inline-size: 60rem; }
.service-hero--dark h1 { max-inline-size: 21ch; color: var(--text-on-dark); }
.service-hero--dark .eyebrow { color: var(--mint); }
.service-hero--dark .lede { max-inline-size: 53ch; color: #e6ddd4; }
.service-hero--dark .breadcrumbs { color: #e6ddd4; }
.service-hero--dark :focus-visible { outline-color: var(--mint); }
.service-hero-note { max-inline-size: none; margin: 3.5rem 0 0; padding-block-start: 1.4rem; border-block-start: 1px solid #56605b; color: #e6ddd4; font-size: 0.875rem; word-spacing: 0.3em; }
.service-hero--editorial .page-intro { max-inline-size: 64rem; margin-inline: auto; text-align: center; }
.service-hero--editorial h1 { max-inline-size: 22ch; margin-inline: auto; }
.service-hero--editorial .lede { margin-inline: auto; }
.service-hero--photo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: clamp(32rem, 68vh, 46rem);
  overflow: hidden;
  background: #23292c;
  color: #fff9f1;
  border: 0;
}
.service-hero--photo::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgb(17 22 26 / 80%), rgb(17 22 26 / 48%) 62%, rgb(17 22 26 / 40%)), linear-gradient(0deg, rgb(17 22 26 / 35%), transparent 60%);
}
.parallax-hero-media { position: absolute; z-index: -2; inset: -8% 0; overflow: hidden; }
.parallax-hero-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, var(--parallax-shift, 0px), 0) scale(1.08);
  will-change: transform;
}
.service-hero--photo .breadcrumbs, .service-hero--photo .lede { color: #f3ede8; }
.service-hero--photo .eyebrow { color: #ffae89; }
.service-hero--photo h1 { max-inline-size: 24ch; color: #fff9f1; }
.service-hero--photo .page-intro { max-inline-size: 63rem; }
.service-hero--photo .button { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.service-hero--photo .button:hover { background: #604de0; border-color: #604de0; }
.service-visual-break {
  max-inline-size: var(--content-width);
  margin: clamp(1.25rem, 3vw, 2.5rem) auto 0;
  padding-inline: var(--space-4);
}
.service-visual-break img {
  display: block;
  inline-size: 100%;
  block-size: clamp(16rem, 36vw, 29rem);
  object-fit: cover;
  background: #292e30;
  border-radius: .3rem;
}
.topic-strip { display: grid; gap: 1.5rem; margin-block-start: 4rem; padding-block-start: 1.5rem; border-block-start: 1px solid #c8c7bd; }
.topic-strip p { margin: 0; color: var(--text-muted); font-size: 1rem; }
.topic-strip span { display: block; margin-block-end: 0.45rem; color: var(--forest); font-size: 0.875rem; font-weight: 650; }
.service-hero--creative { background: #f3ede6; }
.creative-index { padding: 2rem; background: var(--forest); color: var(--text-on-dark); }
.creative-index .eyebrow { color: #f9c6af; font-size: 0.875rem; letter-spacing: 0.035em; }
.creative-index ol { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.creative-index li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.9rem; padding-block: 1rem; border-block-start: 1px solid #ac8b7d; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.35; }
.creative-index li span { padding-block-start: 0.25rem; color: #ffbc9f; font-family: var(--font-body); font-size: 0.875rem; }
.service-section { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.service-topics { background: #f0eee9; }
.service-topics h2 { margin-block-end: 1.75rem; }
.service-topics details { border-block-start: 1px solid #c8c7bd; }
.service-topics details:last-of-type { border-block-end: 1px solid #c8c7bd; }
.service-topics summary {
  display: flex; align-items: center; justify-content: space-between;
  min-block-size: 3.7rem; padding-block: .8rem;
  color: var(--forest); font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600;
  cursor: pointer; list-style: none;
}
.service-topics summary::-webkit-details-marker { display: none; }
.service-topics summary::after { content: '+'; color: var(--accent-strong); font-size: 1.5rem; font-weight: 400; }
.service-topics details[open] summary::after { content: '−'; }
.service-topics [data-topic-panel] { padding-block: .4rem 2rem; }
.service-topics [data-topic-panel] p { max-inline-size: 58ch; margin: 0 0 1rem; color: var(--text-muted); line-height: 1.65; }
.service-topics [data-topic-panel] p:last-child { margin: 0; }
.service-topics :is(summary, [role="tab"], [role="tabpanel"]):focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; }
.service-topics[data-enhanced="tabs"] { display: flex; flex-direction: column; }
.service-topics[data-enhanced="tabs"] .topic-tablist {
  order: 1; display: flex; gap: .4rem; overflow-x: auto; border-block-end: 1px solid #bab8b0;
  scrollbar-width: thin;
}
.service-topics[data-enhanced="tabs"] [role="tab"] {
  flex: 0 0 auto; min-block-size: 3.5rem; padding: .6rem 1rem;
  border: 0; border-block-end: 3px solid transparent; background: transparent;
  color: #4b5253; font: 600 1rem var(--font-display); white-space: nowrap; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.service-topics[data-enhanced="tabs"] [role="tab"]:hover { color: var(--accent-strong); }
.service-topics[data-enhanced="tabs"] [role="tab"][aria-selected="true"] { color: var(--forest); border-block-end-color: var(--accent-strong); }
.service-topics[data-enhanced="tabs"] details { order: 2; border: 0; }
.service-topics[data-enhanced="tabs"] details:not([open]) { display: none; }
.service-topics[data-enhanced="tabs"] summary[hidden] { display: none; }
.service-topics[data-enhanced="tabs"] [data-topic-panel] { min-block-size: 9rem; padding-block: 2rem .2rem; animation: topic-enter .27s ease both; }
@keyframes topic-enter { from { opacity: .4; transform: translateY(.45rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .service-topics[data-enhanced="tabs"] [data-topic-panel] { animation: none; } }
.service-section h2 { max-inline-size: 34ch; margin-block-end: 1.3rem; font-size: clamp(1.7rem, 2.25vw, 2.2rem); line-height: 1.24; }
.service-section h3 { margin-block-end: 0.8rem; font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1.2; }
.service-section p { font-size: 1rem; }
.service-split { display: grid; gap: 1.5rem 4rem; }
.service-copy { min-inline-size: 0; }
.editorial-figure { margin: 2rem 0 0; min-inline-size: 0; }
.editorial-figure img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; border-radius: 0.25rem; background: var(--ink); }
.editorial-figure figcaption { margin-block-start: 0.9rem; max-inline-size: 55ch; color: var(--text-muted); font-size: 0.875rem; line-height: 1.6; }
.service-copy p { max-inline-size: 59ch; margin-block-end: 1rem; color: var(--text-muted); line-height: 1.7; }
.service-copy p:last-child { margin-block-end: 0; }
.service-copy h3:not(:first-child) { margin-block-start: 2rem; }
.service-section .section-label { font-size: 0.875rem; }
.service-section .section-heading h2 { margin-block-end: 0; }
.service-section .section-heading > p { max-inline-size: 36ch; }
.service-surface { background: #f1f0eb; }
.service-columns, .service-steps, .pillar-grid { display: grid; gap: 2rem; }
.service-columns article { padding-block-start: 1.5rem; border-block-start: 1px solid #c8c7bd; }
.service-columns p, .service-steps p, .pillar-grid p { margin: 0; color: var(--text-muted); }
.service-steps { margin: 2.75rem 0 0; padding: 0; list-style: none; counter-reset: service-step; }
.service-steps li { counter-increment: service-step; padding-block-start: 1.3rem; border-block-start: 1px solid #c8c7bd; }
.service-steps li::before { content: "0" counter(service-step); display: block; margin-block-end: 1rem; color: #a43e25; font-size: 0.875rem; }
.journey-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.journey-list li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem 2rem; padding-block: 2rem; border-block-start: 1px solid #c8c7bd; }
.journey-index { color: var(--forest); font-family: var(--font-display); font-size: 1.8rem; line-height: 1.2; }
.journey-list p { max-inline-size: 76ch; margin: 0; color: var(--text-muted); }
.channel-grid { display: grid; gap: 1rem; }
.channel-panel { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--border); }
.channel-panel:first-child { background: var(--surface); }
.channel-panel:last-child { background: #eeeae4; }
.channel-panel p:not(.eyebrow) { color: var(--text-muted); }
.channel-panel p:last-child { margin: 0; }
.service-note { max-inline-size: 59rem; margin-block-start: 3rem; padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--forest); }
.service-note p { max-inline-size: 77ch; margin: 0; color: var(--text-muted); }
.service-dark { background: #222b30; color: #ece4d9; }
.service-dark h2, .service-dark h3 { color: var(--text-on-dark); }
.service-dark .section-label, .service-dark .service-copy p { color: #e6ddd4; }
.service-dark .section-label > span { color: var(--mint); }
.service-dark a { color: #ffbc9f; }
.service-dark :focus-visible { outline-color: var(--mint); }
.pillar-grid article { padding-block-start: 1.3rem; border-block-start: 1px solid #c8c7bd; }
.pillar-label { display: inline-block; margin-block-end: 2rem; color: var(--forest); font-size: 0.875rem; font-weight: 650; }
.format-list article { display: grid; gap: 0.5rem 3rem; padding-block: 2rem; border-block-start: 1px solid var(--border); }
.format-name { color: var(--forest); font-weight: 650; }
.format-list article > div p { max-inline-size: 77ch; margin: 0; color: var(--text-muted); }
.service-faq { display: grid; gap: 1.5rem 4rem; }
.faq-list { min-inline-size: 0; }
.faq-list details { border-block-start: 1px solid var(--border); }
.faq-list details:last-child { border-block-end: 1px solid var(--border); }
.faq-list summary { padding-block: 1.35rem; color: var(--text); font-size: 1.05rem; font-weight: 600; line-height: 1.5; cursor: pointer; }
.faq-list summary::marker { color: var(--forest); }
.faq-list details p { margin: 0; padding-block: 0.3rem 1.5rem; color: var(--text-muted); }
.service-enquiry { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--forest); }
.service-enquiry .cta-band { gap: 1.5rem; }
.service-enquiry .cta-band { max-inline-size: var(--content-width); margin-inline: auto; padding: clamp(1rem, 3vw, 2.5rem) 0; }
.service-enquiry .cta-band .eyebrow { color: var(--mint); font-size: 0.875rem; }
.service-enquiry h2 { max-inline-size: 34ch; font-size: clamp(1.85rem, 2.55vw, 2.6rem); line-height: 1.22; }
.service-enquiry .button { max-inline-size: 100%; }
@media (min-width: 48rem) {
  .service-hero-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .service-hero-grid h1 { font-size: clamp(2.3rem, 3.8vw, 3.6rem); }
  .service-hero-grid .lede { font-size: 1.125rem; }
  .topic-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .service-columns, .service-steps, .pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .format-list article { grid-template-columns: 1fr 3fr; }
}
@media (min-width: 64rem) {
  .service-hero { padding-block-end: 5.5rem; }
  .service-hero-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 5rem; }
  .service-hero-grid .lede { font-size: 1.3rem; }
  .service-split, .service-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .service-hero--creative .service-hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .creative-index { padding: 2.5rem; }
}
@media (max-width: 47.99rem) {
  .service-hero--photo { min-block-size: min(80svh, 41rem); }
  .service-hero--photo::before { background: linear-gradient(0deg, rgb(17 22 26 / 86%), rgb(17 22 26 / 45%) 80%); }
  .service-hero--photo .page-intro, .service-hero--editorial.service-hero--photo .page-intro { text-align: left; }
  .service-visual-break { margin-block-start: 0; padding-inline: 0; }
  .service-visual-break img { border-radius: 0; block-size: 16rem; }
  .service-hero { padding-block: 1.25rem 3rem; }
  .service-hero .eyebrow { font-size: 0.8rem; letter-spacing: 0.07em; }
  .service-hero h1 { font-size: clamp(2.15rem, 8.5vw, 3.3rem); }
  .service-hero--editorial .page-intro { text-align: start; }
  .service-hero--editorial h1, .service-hero--editorial .lede { margin-inline: 0; }
  .service-hero--editorial .topic-strip { margin-block-start: 3rem; }
  .service-section .section-heading { margin-block-end: 2rem; }
  .service-enquiry .cta-band { padding: 1.5rem; }
  .service-enquiry .button { inline-size: 100%; padding-inline: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .parallax-hero-media img { transform: none; will-change: auto; }
}

/* Company enquiry: explicit local-demo state, shared accessible form controls. */
.contact-layout { display: grid; gap: 3rem 5rem; align-items: start; }
.contact-aside > p:not(.section-label) { max-inline-size: 43ch; color: var(--text-muted); }
.contact-next { margin-block: 2.25rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); }
.contact-next h3 { font-size: 1.5rem; }
.contact-next ul { padding-inline-start: 1.1rem; color: var(--text-muted); font-size: 1rem; }
.contact-next li + li { margin-block-start: 0.6rem; }
.contact-email { display: grid; gap: .35rem; margin-block: 1.75rem; }
.contact-email span { color: var(--cyan); font-size: .72rem; font-weight: 750; letter-spacing: .12em; }
.contact-email a { color: var(--text); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: .3rem; }
.contact-email a:hover { color: var(--cyan); }
.contact-form-area { min-inline-size: 0; }
.demo-notice { margin-block-end: 2rem; padding: 1.5rem; border-inline-start: 2px solid var(--forest); background: #eeeae4; }
.demo-notice .eyebrow { margin-block-end: 0.75rem; font-size: 0.8rem; letter-spacing: 0.055em; }
.demo-notice p:not(.eyebrow) { color: #484c5d; font-size: 0.9rem; }
.demo-notice p:last-child { margin-block-end: 0; }
.contact-fields { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.contact-fields legend { padding: 0; margin-block: 1.5rem; font-size: 1rem; font-weight: 650; }
.contact-fields:disabled { opacity: 0.65; }
.contact-field-grid { display: grid; gap: 1.5rem; }
.contact-field-grid input, .contact-field-grid select, .contact-field-grid textarea { min-inline-size: 0; font-size: 1rem; border-color: #656b66; }
.contact-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-block-start: 2rem; }
.contact-submit .button { max-inline-size: 100%; }
.contact-fields .field-help, .contact-fields .field-error, .contact-submit .field-help { font-size: 0.8rem; }
.form-success { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid #c7b7a5; background: #eeeae4; }
.form-success h2 { font-size: clamp(2rem, 3vw, 2.75rem); }
.form-success p:not(.eyebrow) { color: #484c5d; }
@media (min-width: 48rem) {
  .contact-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-field-wide { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
}

/* Internal pages: one balanced editorial grid across services, About and Contact. */
.service-hero[data-editorial-hero]:not(.service-hero--photo) {
  background-image: radial-gradient(circle at 50% 115%, rgb(88 66 206 / 10%), transparent 38%);
}
.service-hero[data-editorial-hero]:not(.service-hero--photo) .page-intro {
  max-inline-size: 58rem;
  margin-inline: auto;
  text-align: center;
}
.service-hero[data-editorial-hero]:not(.service-hero--photo) h1,
.service-hero[data-editorial-hero]:not(.service-hero--photo) .lede { margin-inline: auto; }
.service-hero[data-editorial-hero]:not(.service-hero--photo) .breadcrumbs { justify-content: center; }
.editorial-pair { display: grid; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.editorial-copy { min-inline-size: 0; }
.editorial-copy > :last-child { margin-block-end: 0; }
.editorial-media {
  position: relative;
  min-inline-size: 0;
  margin: 0;
  overflow: hidden;
  background: #111827;
  border-radius: clamp(.35rem, 1vw, .8rem);
  box-shadow: 0 1.5rem 4rem rgb(12 18 34 / 12%);
}
.editorial-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: clamp(17rem, 54vw, 29rem);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.editorial-media figcaption {
  position: absolute;
  inset-inline: 1rem;
  inset-block-end: 1rem;
  inline-size: fit-content;
  max-inline-size: calc(100% - 2rem);
  margin: 0;
  padding: .55rem .75rem;
  border-radius: .3rem;
  background: rgb(7 12 25 / 78%);
  color: #fff;
  font-size: .8rem;
  line-height: 1.4;
  backdrop-filter: blur(.6rem);
}
.editorial-banner { margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.editorial-banner img { min-block-size: 16rem; max-block-size: 26rem; aspect-ratio: 16 / 7; }
.editorial-pair--reverse .editorial-media { order: 2; }
.editorial-pair--reverse .editorial-copy { order: 1; }
.editorial-pair.service-dark { padding-inline: clamp(1.5rem, 4vw, 4rem); }
.editorial-pair.service-dark .editorial-media { box-shadow: none; }
.responsibility-section { background: #f0eee9; }
.responsibility-section > h2 { margin-block-end: clamp(1.8rem, 4vw, 3rem); }
.responsibility-grid { display: grid; gap: 1rem; }
.responsibility-grid article {
  min-inline-size: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid #d1cec5;
  background: #faf9f6;
}
.responsibility-grid article:first-child { border-block-start: .25rem solid var(--accent-strong); }
.responsibility-grid article:last-child { border-block-start: .25rem solid #222b30; }
.responsibility-grid h3 { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
.responsibility-grid p { max-inline-size: 62ch; margin: 0; color: var(--text-muted); line-height: 1.7; }
.service-topics {
  margin-block: clamp(1rem, 2vw, 2rem);
  padding: clamp(2rem, 4vw, 4rem);
  border-radius: clamp(.35rem, 1vw, .8rem);
}
.service-topics[data-enhanced="tabs"] [data-topic-panel] { max-inline-size: 72rem; }
.service-surface { padding-inline: clamp(1.5rem, 4vw, 4rem); }
.service-faq { align-items: start; }
.contact-layout.editorial-pair { align-items: start; }
.contact-layout .editorial-media { margin-block-end: 1.75rem; }
.contact-layout .editorial-media img { min-block-size: 14rem; max-block-size: 19rem; }
.contact-form-area {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid #d1cec5;
  border-radius: clamp(.35rem, 1vw, .8rem);
  background: #faf9f6;
  box-shadow: 0 1.5rem 4rem rgb(12 18 34 / 7%);
}
.demo-notice { padding: 1rem 1.15rem; background: #f0eee9; }
.demo-notice p:not(.eyebrow) { font-size: .84rem; line-height: 1.55; }

@media (min-width: 48rem) {
  .responsibility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .editorial-pair { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .editorial-pair--copy-wide { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .editorial-pair--reverse { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .editorial-pair--reverse .editorial-media { order: 2; }
  .editorial-pair--reverse .editorial-copy { order: 1; }
  .editorial-media img { min-block-size: clamp(24rem, 32vw, 34rem); }
  .service-section { padding-block: clamp(4rem, 6vw, 6.5rem); }
  .service-topics { padding: clamp(3rem, 5vw, 5rem); }
  .service-surface { margin-block: 1rem; }
  .service-split:not(.editorial-pair) {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 0;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: .65rem;
    background: var(--surface-raised);
  }
  .service-split:not(.editorial-pair) > :first-child {
    display: flex;
    align-items: flex-start;
    padding: clamp(2rem, 4vw, 4rem);
    background: linear-gradient(140deg, var(--surface-soft), var(--surface-raised));
  }
  .service-split:not(.editorial-pair) > .service-copy {
    padding: clamp(2rem, 4vw, 4rem);
  }
  .service-split:not(.editorial-pair) :is(h2, h3) { color: var(--text); }
  .service-split:not(.editorial-pair) p { color: var(--muted); }
  .service-dark .service-split:not(.editorial-pair) { border-color: rgb(255 255 255 / 12%); background: var(--surface-raised); }
  .service-dark .service-split:not(.editorial-pair) > :first-child { background: linear-gradient(140deg, var(--surface-soft), var(--violet)); }
  .contact-layout.editorial-pair { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
}
@media (max-width: 63.99rem) {
  .editorial-pair--reverse .editorial-media,
  .editorial-pair--reverse .editorial-copy { order: initial; }
  .editorial-copy { max-inline-size: 44rem; }
}
@media (max-width: 47.99rem) {
  .service-hero[data-editorial-hero]:not(.service-hero--photo) .page-intro { text-align: left; }
  .service-hero[data-editorial-hero]:not(.service-hero--photo) .breadcrumbs { justify-content: flex-start; }
  .editorial-pair { gap: 1.75rem; }
  .editorial-media { inline-size: calc(100% + 2 * var(--space-4)); margin-inline: calc(-1 * var(--space-4)); border-radius: 0; }
  .editorial-media img { min-block-size: 15rem; }
  .responsibility-grid article { padding: 1.35rem; }
  .service-topics { margin-inline: 0; padding: 1.5rem var(--space-4); border-radius: 0; }
  .contact-layout .editorial-media { inline-size: 100%; margin-inline: 0; border-radius: .4rem; }
  .contact-form-area { padding: 1.2rem; }
}

/* Centred Digicraze-inspired homepage hero. */
.digital-hero {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  min-block-size: calc(100svh - 5.75rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgb(84 39 163 / 58%), transparent 36%),
    linear-gradient(180deg, var(--surface-deep), var(--surface));
  color: var(--text);
}
.digital-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .2;
  background-image:
    linear-gradient(rgb(40 215 238 / 18%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(40 215 238 / 18%) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(transparent 8%, #000 48%, transparent 92%);
}
.digital-hero__visual { position: absolute; inset: 5% 4% 0; z-index: -2; pointer-events: none; opacity: 1; transition: opacity 180ms ease-out; }
html.hero-scene-pending .digital-hero__visual { opacity: 0; }
.digital-hero__visual img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .62; mix-blend-mode: screen; mask-image: radial-gradient(ellipse 62% 70% at center, #000 35%, transparent 78%); }
.hero-glow {
  position: absolute;
  inset: 18% 12% 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(139 61 255 / 28%), transparent 68%);
  filter: blur(1rem);
  animation: hero-breathe 8s ease-in-out infinite alternate;
}
.hero-orbit {
  position: absolute;
  inset: 18% 19%;
  border: 1px solid rgb(40 215 238 / 22%);
  border-radius: 50%;
  transform: rotate(-10deg);
}
.hero-orbit--two { inset: 27% 12%; border-color: rgb(139 61 255 / 28%); transform: rotate(11deg); }
.digital-hero__content {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(1.1rem, 2vw, 1.75rem);
  padding-block: clamp(5rem, 11svh, 8rem);
  text-align: center;
}
.digital-hero .hero-kicker { margin: 0; color: var(--text); font-weight: 700; letter-spacing: .02em; }
.kinetic-title {
  max-inline-size: none;
  min-block-size: 1.08em;
  margin: 0;
  overflow: hidden;
  font-size: clamp(2.7rem, 8vw, 7.6rem);
  line-height: 1.02;
  letter-spacing: -.065em;
}
.kinetic-word {
  display: block;
  white-space: nowrap;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), filter 320ms var(--ease-out);
}
.kinetic-title.is-leaving .kinetic-word { opacity: 0; filter: blur(.7rem); transform: translateY(-45%); }
.kinetic-title.is-entering .kinetic-word { opacity: 0; filter: blur(.7rem); transform: translateY(45%); }
.digital-hero .hero-copy { max-inline-size: 49rem; margin: 0; color: var(--muted); font-size: clamp(.95rem, 1.35vw, 1.1rem); }
.digital-hero .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }
@keyframes hero-breathe { to { opacity: .72; transform: scale(1.08) translateY(-2%); } }
@media (min-width: 80rem) { .digital-hero { min-block-size: calc(100svh - 6.25rem); } }
@media (max-width: 47.99rem) {
  .digital-hero { min-block-size: calc(100svh - 5.75rem); }
  .digital-hero__content { padding-block: 4rem; }
  .kinetic-title { font-size: clamp(1.9rem, 9.5vw, 3rem); letter-spacing: -.055em; }
  .digital-hero .hero-copy { max-inline-size: 34ch; }
  .digital-hero .hero-actions { flex-direction: column; align-items: stretch; inline-size: min(100%, 20rem); }
}
@media (prefers-reduced-motion: reduce) {
  .kinetic-word { transition: none; }
  .hero-glow { animation: none; }
}

/* Immersive homepage composition. */
.home-services { max-inline-size: var(--content-width); }
/* The shared container padding already caps and centres the content on wide viewports. */
@media (min-width: 92rem) {
  .home-services { max-inline-size: none; }
}
.section-intro { display: grid; justify-items: center; max-inline-size: 48rem; margin-inline: auto; text-align: center; }
.section-intro > p { max-inline-size: 46rem; }
.service-showcase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.service-showcase__item { position: relative; grid-column: span 6; min-block-size: 25rem; overflow: hidden; border: 1px solid rgb(255 255 255 / 10%); border-radius: var(--radius-md); background: var(--surface-raised); color: #fff; text-decoration: none; }
.service-showcase__item:first-child, .service-showcase__item:last-child { grid-column: span 12; min-block-size: 30rem; }
.service-showcase__item img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .56; transition: transform 700ms var(--ease-out), opacity 450ms var(--ease-out); }
.service-showcase__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 12%, rgb(5 4 11 / 25%) 42%, rgb(5 4 11 / 94%) 100%); }
.service-showcase__copy { position: absolute; z-index: 1; inset-inline: clamp(1.4rem, 4vw, 3rem); inset-block-end: clamp(1.4rem, 4vw, 2.6rem); display: grid; gap: .8rem; }
.service-showcase__copy strong { font: 650 clamp(1.6rem, 3vw, 3rem)/1.05 var(--font-display); letter-spacing: -.045em; }
.service-showcase__copy > span:last-child { max-inline-size: 48ch; color: #d2ced9; line-height: 1.65; }
.service-showcase__item:hover img, .service-showcase__item:focus-visible img { opacity: .82; transform: scale(1.035); }
.service-showcase__item:hover { border-color: var(--cyan); }
.connection-panel { margin-block: clamp(3rem, 7vw, 7rem); border: 1px solid rgb(255 255 255 / 9%); border-radius: var(--radius-md); background: radial-gradient(circle at 10% 10%, rgb(40 215 238 / 12%), transparent 30%), linear-gradient(120deg, #101020, #1d0e38); }
.home-connected.connection-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.connection-panel { position: relative; isolation: isolate; }
.connection-panel::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(rgb(8 7 17 / 65%), rgb(8 7 17 / 85%)), url('../images/solid-matter-digital-hero.webp') center / cover no-repeat; opacity: .55; }
.connection-panel.has-scroll-parallax { overflow: hidden; }
.connection-panel.has-scroll-parallax::before { inset-block: -30%; border-radius: 0; transform: translate3d(0, var(--strategy-shift, 0px), 0); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .connection-panel.has-scroll-parallax::before { inset-block: 0; transform: none; will-change: auto; }
}
.connection-panel h2, .connection-panel .connected-copy p { margin-inline: auto; }
.home-process > .section-heading { justify-content: center; text-align: center; }
.home-process > .benefits-heading { margin-block: clamp(4rem, 7vw, 6rem) 2.5rem; }
.benefits-heading + .benefit-list { margin-block-start: 0; }
.process-grid .process-step { padding: 1.5rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: var(--radius-md); background: rgb(255 255 255 / 2%); }
.process-grid .process-step { transition: border-color 220ms ease, box-shadow 220ms ease; }
.process-grid .process-step.is-touch-lit,
.process-grid .process-step:focus-within { border-color: rgb(40 215 238 / 55%); box-shadow: 0 0 16px rgb(40 215 238 / 16%), 0 8px 30px rgb(139 61 255 / 20%), inset 0 0 18px rgb(40 215 238 / 6%); }
@media (hover: hover) and (pointer: fine) {
  .process-grid .process-step:hover { border-color: rgb(40 215 238 / 55%); box-shadow: 0 0 16px rgb(40 215 238 / 16%), 0 8px 30px rgb(139 61 255 / 20%), inset 0 0 18px rgb(40 215 238 / 6%); }
}
.benefit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block-start: clamp(3rem, 6vw, 5rem); }
.benefit-item { padding: clamp(1.5rem, 3vw, 2.5rem); border-block-start: 1px solid var(--violet); background: linear-gradient(180deg, rgb(139 61 255 / 10%), transparent); }
.benefit-item h3 { font-size: 1.25rem; }
.benefit-item p { margin: 0; color: var(--muted); }
.closing-cta .enquiry-inner, .cta-band { border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--radius-md); background: var(--gradient-accent); color: #fff; text-align: center; }
.closing-cta .cta-band { justify-items: center; }
.closing-cta .cta-band :is(h2, p) { margin-inline: auto; }
.closing-cta .cta-band .button { justify-self: center; }
.closing-cta .enquiry-bottom { justify-content: center; }
.closing-cta .enquiry-bottom p { color: rgb(255 255 255 / 82%); }

@media (min-width: 64rem) {
  .service-showcase { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .service-showcase__item,
  .service-showcase__item:first-child,
  .service-showcase__item:last-child { min-block-size: 27rem; }
  .service-showcase__item:nth-child(-n+2) { grid-column: span 3; }
  .service-showcase__item:nth-child(n+3) { grid-column: span 2; }
  .service-showcase__item { container-type: inline-size; }
  .service-showcase__copy { inset-inline: clamp(1.4rem, 2vw, 3rem); }
  .service-showcase__copy strong { font-size: clamp(1rem, 5cqi, 1.65rem); line-height: 1.2; }
  .service-showcase__copy > span:last-child { min-block-size: 6.6em; }
}

/* Shared dark internal-page language. */
.service-main { background: var(--surface); color: var(--text); }
.service-section { padding-block: clamp(4rem, 7vw, 7rem); }
.service-hero.internal-hero--image, .service-hero--photo { position: relative; isolation: isolate; display: grid; min-block-size: min(72svh, 48rem); align-content: center; max-inline-size: none; padding-inline: max(var(--space-4), calc((100% - var(--content-width)) / 2)); overflow: hidden; border: 0; }
.service-hero .parallax-hero-media { position: absolute; z-index: -2; inset: 0; }
.service-hero .parallax-hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .45; }
.service-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(5 4 11 / 35%), rgb(5 4 11 / 92%)), radial-gradient(circle at 50% 35%, rgb(139 61 255 / 35%), transparent 52%); }
.service-hero .page-intro { display: grid; justify-items: center; max-inline-size: 62rem; margin-inline: auto; text-align: center; }
.service-hero .breadcrumbs { justify-content: center; margin-block-end: 2rem; }
.service-hero h1 { max-inline-size: 18ch; margin-inline: auto; font-size: clamp(2rem, 4vw, 4rem); }
.service-hero .lede { max-inline-size: 62ch; margin-inline: auto; color: var(--muted); }
.editorial-pair.balanced-media { gap: clamp(2rem, 6vw, 6rem); }
.editorial-media { border: 1px solid rgb(255 255 255 / 10%); background: var(--surface-raised); box-shadow: 0 2rem 6rem rgb(0 0 0 / 30%); }
.editorial-copy p, .service-copy p { color: var(--muted); }
.service-topics { border: 1px solid rgb(255 255 255 / 9%); background: linear-gradient(140deg, rgb(139 61 255 / 9%), rgb(40 215 238 / 4%)); }
.service-topics h2 { max-inline-size: 22ch; margin-inline: auto; text-align: center; }
.service-topics details { border-color: rgb(255 255 255 / 12%); }
.service-topics summary { color: var(--text); }
.service-topics [data-topic-panel] p { color: var(--muted); }
.service-topics[data-enhanced="tabs"] .topic-tablist { justify-content: center; gap: .55rem; border: 0; }
.service-topics[data-enhanced="tabs"] [role="tab"] { min-block-size: 3rem; padding: .75rem 1.15rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 99rem; color: var(--muted); background: rgb(255 255 255 / 3%); }
.service-topics[data-enhanced="tabs"] [role="tab"]:hover { border-color: var(--cyan); color: #fff; }
.service-topics[data-enhanced="tabs"] [role="tab"][aria-selected="true"] { border-color: transparent; color: #fff; background: var(--gradient-accent); }
.service-topics[data-enhanced="tabs"] [data-topic-panel] { max-inline-size: 62rem; min-block-size: 12rem; margin-inline: auto; padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgb(255 255 255 / 8%); border-radius: var(--radius-md); background: var(--surface-raised); }
.responsibility-section, .responsibility-split { background: transparent; }
.responsibility-grid article, .responsibility-split > * { border-color: rgb(255 255 255 / 10%); background: var(--surface-raised); }
.service-surface, .contact-panel { border: 1px solid rgb(255 255 255 / 9%); border-radius: var(--radius-md); background: var(--surface-raised); }
.contact-panel { padding: clamp(2rem, 5vw, 4.5rem); background: radial-gradient(circle at 100% 0, rgb(40 215 238 / 13%), transparent 38%), var(--surface-raised); }
.contact-panel h2 { font-size: clamp(1.75rem, 3vw, 3rem); }
.contact-panel > p { color: var(--muted); }
.contact-facts { display: grid; gap: 0; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.contact-facts li { display: grid; gap: .35rem; padding-block: 1.15rem; border-block-start: 1px solid rgb(255 255 255 / 10%); }
.contact-facts span { color: var(--muted); }
.service-faq .faq-list details { border-color: rgb(255 255 255 / 12%); }
.service-faq summary { color: var(--text); }
.service-faq p { color: var(--muted); }

@media (max-width: 47.99rem) {
  .digital-hero__visual { inset: 12% -30% 5%; }
  .service-showcase { grid-template-columns: 1fr; }
  .service-showcase__item, .service-showcase__item:first-child, .service-showcase__item:last-child { grid-column: auto; min-block-size: 22rem; }
  .benefit-list { grid-template-columns: 1fr; }
  .service-hero.internal-hero--image, .service-hero--photo { min-block-size: 68svh; padding-inline: var(--space-4); }
  .service-hero .page-intro { text-align: center !important; }
  .service-hero h1 { font-size: clamp(2rem, 6vw, 2.5rem); }
  .service-hero .breadcrumbs { justify-content: center !important; }
}

/* Image gallery between the process and benefits groups. */
.digital-hero__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 0; opacity: 0; }
.digital-hero.webgl-ready .digital-hero__canvas { opacity: 1; }
.digital-hero.webgl-ready .digital-hero__visual { opacity: 0; }
.digital-hero.webgl-ready::before { display: none; }
.digital-hero.webgl-ready .digital-hero__content { z-index: 1; pointer-events: none; }
.digital-hero.webgl-ready .hero-actions a { pointer-events: auto; }
@media (max-width: 47.99rem) {
  .digital-hero { --mobile-art-height: clamp(6rem, calc(100svh - 31rem), 24rem); display: block; min-block-size: 0; padding-block-start: var(--mobile-art-height); background: var(--surface-deep); }
  .digital-hero__canvas { block-size: var(--mobile-art-height); mask-image: linear-gradient(#000 72%, transparent 100%); }
  .digital-hero__visual { inset: 0 0 auto; block-size: var(--mobile-art-height); }
  .digital-hero__visual img { object-fit: cover; opacity: .9; mask-image: linear-gradient(#000 72%, transparent); }
  .digital-hero__content { inline-size: 100%; padding: 0 1.5rem 1.5rem; gap: 1rem; }
  .digital-hero .hero-kicker { font-size: .8rem; letter-spacing: .02em; }
  .digital-hero .kinetic-title { inline-size: 100%; min-block-size: 1.08em; font-size: clamp(2.5rem, 11vw, 4.8rem); line-height: 1.08; }
  .digital-hero .kinetic-word { max-inline-size: none; margin-inline: auto; white-space: nowrap; word-spacing: normal; }
  .digital-hero .hero-copy { max-inline-size: 34ch; font-size: 1rem; line-height: 1.7; }
  .digital-hero .hero-actions { inline-size: min(100%, 22rem); gap: .75rem; margin-block-start: .5rem; }
  .digital-hero .hero-actions .button { min-block-size: 3rem; }
}

.image-slider { margin-block-start: clamp(3rem, 6vw, 5rem); min-inline-size: 0; }
.image-slider__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 1rem; margin-inline: -1rem; cursor: grab; }
.image-slider__track::-webkit-scrollbar { display: none; }
.image-slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.image-slider__card { position: relative; flex: 0 0 calc((100% - 3rem) / 4); min-inline-size: 0; margin: 0; aspect-ratio: 3 / 4; scroll-snap-align: start; scroll-margin-inline: 1rem; border: 1px solid rgb(255 255 255 / 15%); border-radius: 1rem; background: var(--surface-raised); overflow: hidden; transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease; }
.image-slider__card img { inline-size: 100%; block-size: 100%; object-fit: cover; user-select: none; }
.image-slider__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgb(8 7 17 / 35%) 55%, rgb(8 7 17 / 95%) 100%); pointer-events: none; }
.image-slider__card figcaption { position: absolute; z-index: 1; inset-inline: 1.25rem; inset-block-end: 1.4rem; display: grid; gap: .5rem; }
.image-slider__card strong { color: #fff; font: 650 clamp(1.1rem, 1.8vw, 1.7rem)/1.2 var(--font-display); }
.image-slider__card figcaption span { color: #d2ced9; font-size: .85rem; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) {
 .image-slider__card:hover { z-index: 2; transform: scale(1.025); border-color: var(--cyan); box-shadow: 0 0 18px rgb(40 215 238 / 24%), 0 8px 28px rgb(139 61 255 / 24%); }
}
.image-slider__card:active { border-color: var(--cyan); box-shadow: 0 0 18px rgb(40 215 238 / 24%); }
.image-slider__controls { display: flex; justify-content: space-between; align-items: center; margin-block-start: .75rem; }
.image-slider__controls[hidden] { display: none; }
.image-slider__count { color: var(--muted); font-size: .8rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.image-slider__buttons { display: flex; gap: .6rem; }
.image-slider__buttons button { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / 18%); background: rgb(255 255 255 / 4%); color: var(--text); font-size: 1.2rem; }
.image-slider__buttons button:hover { border-color: var(--cyan); background: rgb(40 215 238 / 10%); }
@media (max-width: 47.99rem) {
 .image-slider__track { gap: .75rem; }
 .image-slider__card { flex-basis: calc((100% - .75rem) / 2); border-radius: .75rem; aspect-ratio: 2 / 3; }
 .image-slider__card figcaption { inset-inline: .75rem; inset-block-end: 1rem; gap: .35rem; }
 .image-slider__card figcaption span { font-size: .75rem; }
}

.image-slider__track { scroll-snap-type: none; scroll-behavior: auto; }
.image-slider__track.is-dragging { cursor: grabbing; }
.image-slider__track img { -webkit-user-drag: none; }

.closing-cta .cta-band, .closing-cta .enquiry-inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: clamp(2rem, 5vw, 3.5rem); background: linear-gradient(120deg, #452187, #125061); }
.closing-cta .cta-band > div, .closing-cta .enquiry-bottom { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.closing-cta :is(h2,p) { margin: 0; max-inline-size: 52ch; }
.closing-cta h2 { max-inline-size: 28ch; font-size: clamp(1.65rem,3vw,2.6rem); line-height: 1.2; }
.closing-cta p { color: #f1edf8; line-height: 1.7; }
.contact-form-section { padding-block: 1rem 4rem; text-align: center; }
.contact-form-section > p { color: var(--muted); }
.enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; text-align: left; inline-size: 100%; max-inline-size: 44rem; margin: 1.75rem auto 0; }
.form-field { display: grid; gap: .5rem; min-inline-size: 0; }
.form-field--wide, .form-note { grid-column: 1 / -1; }
.enquiry-form label { color: #f5f3fa; font-size: .95rem; }
.enquiry-form label span, .form-note { color: var(--muted); font-size: .85rem; }
.enquiry-form :is(input:not([type="hidden"]),textarea) { box-sizing: border-box; inline-size: 100%; min-inline-size: 0; border: 1px solid #514860; border-radius: .5rem; background: #10101c; color: #fff; padding: .85rem 1rem; font: inherit; }
.enquiry-form textarea { resize: vertical; }
.enquiry-form :is(input,textarea):focus { outline: 2px solid #28d7ee; outline-offset: 2px; }
.enquiry-form .button { grid-column: 1 / -1; justify-self: start; }
.contact-panel { align-self: start; }
@media(max-width: 35rem) { .enquiry-form { grid-template-columns: 1fr; } .enquiry-form .button { inline-size: 100%; } }

body[data-page="contact"] .service-hero { min-block-size: 0; padding-block: clamp(2.5rem,6vw,4.5rem) 2rem; }
body[data-page="contact"] .service-hero .lede { margin-block-end: 0; }
body[data-page="contact"] .service-hero .parallax-hero-media { inset: -4rem 0; mask-image: linear-gradient(#000 45%, transparent 94%); }
body[data-page="contact"] .service-hero::after { background: linear-gradient(180deg, rgb(8 7 17 / 30%), #080711), radial-gradient(ellipse at center, rgb(139 61 255 / 18%), transparent 70%); }
body[data-page="contact"] .contact-layout { padding-block-start: 1.5rem; }

/* Service accents and aligned contact introduction. */
.service-showcase__copy .icon-container {
  color: #b8f7ff;
  border-color: rgb(107 231 255 / 70%);
  background: rgb(35 125 158 / 28%);
  box-shadow: 0 0 18px rgb(40 215 238 / 24%), inset 0 0 12px rgb(40 215 238 / 10%);
}
.contact-form-section > p {
  max-inline-size: none;
  margin-inline: auto;
  white-space: nowrap;
  font-size: clamp(.55rem, calc(3.4vw - 1.7px), 1.125rem);
}

/* Web Design: approved compact service-page template. */
body[data-page="web-design"] .service-section { padding-block: clamp(3.5rem, 5.5vw, 5rem); }
.web-design-hero.service-hero {
  min-block-size: clamp(23rem, 40vw, 29rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.web-design-hero .parallax-hero-media img { opacity: .72; }
.web-design-hero::after {
  background: linear-gradient(180deg, rgb(5 4 11 / 45%), rgb(5 4 11 / 82%)), radial-gradient(circle at 58% 35%, rgb(24 119 255 / 25%), transparent 48%);
}
.web-design-hero .page-intro { gap: 1rem; }
.web-design-hero .page-intro > * { margin-block: 0; }
.web-design-hero h1 { max-inline-size: none; font-size: clamp(2.5rem, 5vw, 4.6rem); }
.web-design-hero .lede { max-inline-size: 56rem; color: #e2deeb; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.web-design-hero .button { margin-block-start: .4rem; }
.web-design-section-heading {
  display: grid;
  justify-items: center;
  gap: .8rem;
  max-inline-size: 49rem;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}
.web-design-section-heading :is(h2, p) { margin: 0; }
.web-design-section-heading h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.web-design-section-heading p { max-inline-size: 48rem; color: var(--muted); }
.web-design-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.web-design-card {
  position: relative;
  display: grid;
  align-content: start;
  min-block-size: 18rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  overflow: hidden;
  border: 1px solid rgb(132 172 217 / 22%);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgb(16 24 42 / 96%), rgb(7 13 25 / 98%));
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
  transition: transform 280ms var(--ease-out), border-color 280ms ease, box-shadow 280ms ease, background 280ms ease;
}
.web-design-card::before {
  content: '';
  position: absolute;
  inset: -40% 35% 52% -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(139 61 255 / 13%), transparent 68%);
  pointer-events: none;
}
.web-design-card .icon-container,
.web-design-process-grid .icon-container {
  position: relative;
  margin-block-end: 1.5rem;
  color: #8c5cff;
  border-color: rgb(114 66 232 / 70%);
  background: rgb(67 37 133 / 20%);
  box-shadow: 0 0 20px rgb(92 48 220 / 20%);
}
.web-design-card h3 { position: relative; margin: 0 0 .8rem; font-size: clamp(1.2rem, 2vw, 1.45rem); }
.web-design-card p { position: relative; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
@media (hover: hover) and (pointer: fine) {
  .web-design-card:hover {
    transform: translateY(-.5rem);
    border-color: var(--cyan);
    background: linear-gradient(145deg, rgb(13 37 59 / 98%), rgb(8 16 30 / 98%));
    box-shadow: 0 0 0 1px rgb(40 215 238 / 18%), 0 1.4rem 3.5rem rgb(0 0 0 / 36%), inset 0 0 2rem rgb(40 215 238 / 7%);
  }
  .web-design-card:hover .icon-container { color: #b8f7ff; border-color: var(--cyan); box-shadow: 0 0 22px rgb(40 215 238 / 32%); }
}
.web-design-process { border-block: 1px solid rgb(255 255 255 / 6%); }
.web-design-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.web-design-process-grid article { position: relative; display: grid; justify-items: center; text-align: center; }
.web-design-process-grid article:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-block-start: 1.75rem;
  inset-inline-start: calc(50% + 3rem);
  inline-size: calc(100% - 3rem);
  block-size: 1px;
  background: linear-gradient(90deg, rgb(40 215 238 / 55%), rgb(139 61 255 / 32%));
}
.web-design-process-grid .icon-container { margin-block-end: 1.25rem; }
.web-design-process-grid h3 { margin: 0 0 .65rem; font-size: 1.1rem; }
.web-design-process-grid p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.web-design-faq .web-design-section-heading { margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.web-design-faq .faq-list { max-inline-size: 58rem; margin-inline: auto; }
.web-design-faq .faq-list details {
  margin-block: .7rem;
  padding: 0;
  border: 1px solid rgb(132 172 217 / 24%);
  border-radius: .65rem;
  background: rgb(8 17 31 / 75%);
  overflow: clip;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.web-design-faq .faq-list details:hover,
.web-design-faq .faq-list details[open] { border-color: rgb(40 215 238 / 55%); background: rgb(10 24 42 / 92%); }
.web-design-faq .faq-list details[open] { box-shadow: 0 0 24px rgb(40 215 238 / 7%); }
.web-design-faq .faq-list summary { padding: 1.15rem 1.3rem; font-weight: 700; }
.web-design-faq .faq-list details p { max-inline-size: none; margin: 0; padding: 0 1.3rem 1.3rem; line-height: 1.7; }
.web-design-faq .faq-list a { color: #a7edf7; }
.web-design-cta { padding-block-start: clamp(2rem, 4vw, 3rem) !important; }
.web-design-cta .cta-band { border: 1px solid rgb(75 174 255 / 65%); border-radius: 1rem; background: linear-gradient(120deg, rgb(62 27 131 / 90%), rgb(7 68 105 / 92%)); box-shadow: 0 0 3rem rgb(63 75 255 / 14%); text-align: center; }
@media (max-width: 63.99rem) {
  .web-design-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-design-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .web-design-process-grid article::after { display: none; }
}
@media (max-width: 47.99rem) {
  body[data-page="web-design"] .service-section { padding-block: 3.25rem; }
  .web-design-hero.service-hero { min-block-size: 27rem; padding-block: 3.5rem; }
  .web-design-hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .web-design-hero .lede { font-size: 1rem; }
  .web-design-card-grid, .web-design-process-grid { grid-template-columns: 1fr; }
  .web-design-card { min-block-size: 0; }
  .web-design-process-grid { gap: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .digital-hero__visual { transition: none; }
}

/* Hosting & Support: approved compact service-page template. */
body[data-page="hosting-support"] .service-section { padding-block: clamp(3.5rem, 5.5vw, 5rem); }
.hosting-hero.service-hero {
  min-block-size: clamp(23rem, 40vw, 29rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.hosting-hero .parallax-hero-media img { opacity: .74; }
.hosting-hero::after {
  background: linear-gradient(180deg, rgb(3 10 12 / 42%), rgb(3 10 12 / 84%)), radial-gradient(circle at 58% 35%, rgb(30 210 167 / 22%), transparent 48%);
}
.hosting-hero .page-intro { gap: 1rem; }
.hosting-hero .page-intro > * { margin-block: 0; }
.hosting-hero h1 { max-inline-size: none; font-size: clamp(2.5rem, 5vw, 4.6rem); }
.hosting-hero .lede { max-inline-size: 56rem; color: #e0ece8; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.hosting-hero .button { margin-block-start: .4rem; }
.hosting-section-heading {
  display: grid;
  justify-items: center;
  gap: .8rem;
  max-inline-size: 52rem;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}
.hosting-section-heading :is(h2, p) { margin: 0; }
.hosting-section-heading h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.hosting-section-heading p { max-inline-size: 50rem; color: var(--muted); }
.hosting-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.hosting-card {
  position: relative;
  display: grid;
  align-content: start;
  min-block-size: 17rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  overflow: hidden;
  border: 1px solid rgb(82 194 168 / 22%);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgb(11 27 30 / 97%), rgb(6 15 20 / 98%));
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
  transition: transform 280ms var(--ease-out), border-color 280ms ease, box-shadow 280ms ease, background 280ms ease;
}
.hosting-card::before {
  content: '';
  position: absolute;
  inset: -40% 35% 52% -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(38 218 173 / 13%), transparent 68%);
  pointer-events: none;
}
.hosting-card .icon-container,
.hosting-process-grid .icon-container {
  position: relative;
  margin-block-end: 1.5rem;
  color: #7ef2d1;
  border-color: rgb(62 212 171 / 72%);
  background: rgb(22 111 91 / 24%);
  box-shadow: 0 0 20px rgb(38 218 173 / 22%);
}
.hosting-card h3 { position: relative; margin: 0 0 .8rem; font-size: clamp(1.2rem, 2vw, 1.45rem); }
.hosting-card p { position: relative; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
@media (hover: hover) and (pointer: fine) {
  .hosting-card:hover {
    transform: translateY(-.5rem);
    border-color: #42e3ba;
    background: linear-gradient(145deg, rgb(11 46 48 / 98%), rgb(6 20 26 / 98%));
    box-shadow: 0 0 0 1px rgb(66 227 186 / 16%), 0 1.4rem 3.5rem rgb(0 0 0 / 36%), inset 0 0 2rem rgb(66 227 186 / 7%);
  }
  .hosting-card:hover .icon-container { color: #c5fff0; border-color: #42e3ba; box-shadow: 0 0 22px rgb(66 227 186 / 36%); }
}
.hosting-process { border-block: 1px solid rgb(255 255 255 / 6%); }
.hosting-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.hosting-process-grid article { position: relative; display: grid; justify-items: center; text-align: center; }
.hosting-process-grid article:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-block-start: 1.75rem;
  inset-inline-start: calc(50% + 3rem);
  inline-size: calc(100% - 3rem);
  block-size: 1px;
  background: linear-gradient(90deg, rgb(66 227 186 / 58%), rgb(40 215 238 / 26%));
}
.hosting-process-grid .icon-container { margin-block-end: 1.25rem; }
.hosting-process-grid h3 { margin: 0 0 .65rem; font-size: 1.1rem; }
.hosting-process-grid p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.hosting-faq .hosting-section-heading { margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.hosting-faq .faq-list { max-inline-size: 58rem; margin-inline: auto; }
.hosting-faq .faq-list details {
  margin-block: .7rem;
  padding: 0;
  border: 1px solid rgb(82 194 168 / 24%);
  border-radius: .65rem;
  background: rgb(7 21 24 / 76%);
  overflow: clip;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.hosting-faq .faq-list details:hover,
.hosting-faq .faq-list details[open] { border-color: rgb(66 227 186 / 58%); background: rgb(8 31 32 / 92%); }
.hosting-faq .faq-list details[open] { box-shadow: 0 0 24px rgb(66 227 186 / 8%); }
.hosting-faq .faq-list summary { padding: 1.15rem 1.3rem; font-weight: 700; }
.hosting-faq .faq-list details p { max-inline-size: none; margin: 0; padding: 0 1.3rem 1.3rem; line-height: 1.7; }
.hosting-faq .faq-list a { color: #9ff4dc; }
.hosting-cta { padding-block-start: clamp(2rem, 4vw, 3rem) !important; }
.hosting-cta .cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: stretch;
  align-items: center;
  gap: 2rem;
  border: 1px solid rgb(66 227 186 / 62%);
  border-radius: 1rem;
  background: linear-gradient(120deg, rgb(17 89 82 / 94%), rgb(7 61 77 / 94%));
  box-shadow: 0 0 3rem rgb(38 218 173 / 12%);
  text-align: left;
}
.hosting-cta .cta-band > div { align-items: flex-start; }
.hosting-cta .cta-band :is(h2, p) { margin-inline: 0; }
.hosting-cta .cta-band .button { justify-self: end; white-space: nowrap; }
@media (max-width: 63.99rem) {
  .hosting-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hosting-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .hosting-process-grid article::after { display: none; }
  .hosting-cta .cta-band { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hosting-cta .cta-band > div { align-items: center; }
  .hosting-cta .cta-band :is(h2, p) { margin-inline: auto; }
  .hosting-cta .cta-band .button { justify-self: center; }
}
@media (max-width: 47.99rem) {
  body[data-page="hosting-support"] .service-section { padding-block: 3.25rem; }
  .hosting-hero.service-hero { min-block-size: 27rem; padding-block: 3.5rem; }
  .hosting-hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .hosting-hero .lede { font-size: 1rem; }
  .hosting-card-grid, .hosting-process-grid { grid-template-columns: 1fr; }
  .hosting-card { min-block-size: 0; }
  .hosting-process-grid { gap: 2.5rem; }
}

/* SEO & Content: approved service template with Web Design colors. */
body[data-page="seo-content"] .service-section { padding-block: clamp(3.5rem, 5.5vw, 5rem); }
.seo-hero.service-hero { min-block-size: clamp(23rem, 40vw, 29rem); padding-block: clamp(3rem, 6vw, 5rem); }
.seo-hero .parallax-hero-media img { opacity: .72; }
.seo-hero::after { background: linear-gradient(180deg, rgb(5 4 11 / 45%), rgb(5 4 11 / 82%)), radial-gradient(circle at 58% 35%, rgb(24 119 255 / 25%), transparent 48%); }
.seo-hero .page-intro { gap: 1rem; }
.seo-hero .page-intro > * { margin-block: 0; }
.seo-hero h1 { max-inline-size: none; font-size: clamp(2.5rem, 5vw, 4.6rem); }
.seo-hero .lede { max-inline-size: 56rem; color: #e2deeb; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.seo-hero .button { margin-block-start: .4rem; }
.seo-section-heading { display: grid; justify-items: center; gap: .8rem; max-inline-size: 52rem; margin: 0 auto clamp(2rem, 4vw, 3.25rem); text-align: center; }
.seo-section-heading :is(h2, p) { margin: 0; }
.seo-section-heading h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.seo-section-heading p { max-inline-size: 50rem; color: var(--muted); }
.seo-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.seo-card {
  position: relative;
  display: grid;
  align-content: start;
  min-block-size: 18rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  overflow: hidden;
  border: 1px solid rgb(132 172 217 / 22%);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgb(16 24 42 / 96%), rgb(7 13 25 / 98%));
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
  transition: transform 280ms var(--ease-out), border-color 280ms ease, box-shadow 280ms ease, background 280ms ease;
}
.seo-card::before { content: ''; position: absolute; inset: -40% 35% 52% -20%; border-radius: 50%; background: radial-gradient(circle, rgb(139 61 255 / 13%), transparent 68%); pointer-events: none; }
.seo-card .icon-container,
.seo-process-grid .icon-container { position: relative; margin-block-end: 1.5rem; color: #8c5cff; border-color: rgb(114 66 232 / 70%); background: rgb(67 37 133 / 20%); box-shadow: 0 0 20px rgb(92 48 220 / 20%); }
.seo-card h3 { position: relative; margin: 0 0 .8rem; font-size: clamp(1.2rem, 2vw, 1.45rem); }
.seo-card p { position: relative; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
@media (hover: hover) and (pointer: fine) {
  .seo-card:hover { transform: translateY(-.5rem); border-color: var(--cyan); background: linear-gradient(145deg, rgb(13 37 59 / 98%), rgb(8 16 30 / 98%)); box-shadow: 0 0 0 1px rgb(40 215 238 / 18%), 0 1.4rem 3.5rem rgb(0 0 0 / 36%), inset 0 0 2rem rgb(40 215 238 / 7%); }
  .seo-card:hover .icon-container { color: #b8f7ff; border-color: var(--cyan); box-shadow: 0 0 22px rgb(40 215 238 / 32%); }
}
.seo-process { border-block: 1px solid rgb(255 255 255 / 6%); }
.seo-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.seo-process-grid article { position: relative; display: grid; justify-items: center; text-align: center; }
.seo-process-grid article:not(:last-child)::after { content: ''; position: absolute; inset-block-start: 1.75rem; inset-inline-start: calc(50% + 3rem); inline-size: calc(100% - 3rem); block-size: 1px; background: linear-gradient(90deg, rgb(40 215 238 / 55%), rgb(139 61 255 / 32%)); }
.seo-process-grid .icon-container { margin-block-end: 1.25rem; }
.seo-process-grid h3 { margin: 0 0 .65rem; font-size: 1.1rem; }
.seo-process-grid p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.seo-faq .seo-section-heading { margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.seo-faq .faq-list { max-inline-size: 58rem; margin-inline: auto; }
.seo-faq .faq-list details { margin-block: .7rem; padding: 0; border: 1px solid rgb(132 172 217 / 24%); border-radius: .65rem; background: rgb(8 17 31 / 75%); overflow: clip; transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease; }
.seo-faq .faq-list details:hover,
.seo-faq .faq-list details[open] { border-color: rgb(40 215 238 / 55%); background: rgb(10 24 42 / 92%); }
.seo-faq .faq-list details[open] { box-shadow: 0 0 24px rgb(40 215 238 / 7%); }
.seo-faq .faq-list summary { padding: 1.15rem 1.3rem; font-weight: 700; }
.seo-faq .faq-list details p { max-inline-size: none; margin: 0; padding: 0 1.3rem 1.3rem; line-height: 1.7; }
.seo-faq .faq-list a { color: #a7edf7; }
.seo-cta { padding-block-start: clamp(2rem, 4vw, 3rem) !important; }
.seo-cta .cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; align-items: center; gap: 2rem; border: 1px solid rgb(75 174 255 / 65%); border-radius: 1rem; background: linear-gradient(120deg, rgb(62 27 131 / 90%), rgb(7 68 105 / 92%)); box-shadow: 0 0 3rem rgb(63 75 255 / 14%); text-align: left; }
.seo-cta .cta-band > div { align-items: flex-start; }
.seo-cta .cta-band :is(h2, p) { margin-inline: 0; }
.seo-cta .cta-band .button { justify-self: end; white-space: nowrap; }
@media (max-width: 63.99rem) {
  .seo-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .seo-process-grid article::after { display: none; }
  .seo-cta .cta-band { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .seo-cta .cta-band > div { align-items: center; }
  .seo-cta .cta-band :is(h2, p) { margin-inline: auto; }
  .seo-cta .cta-band .button { justify-self: center; }
}
@media (max-width: 47.99rem) {
  body[data-page="seo-content"] .service-section { padding-block: 3.25rem; }
  .seo-hero.service-hero { min-block-size: 27rem; padding-block: 3.5rem; }
  .seo-hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .seo-hero .lede { font-size: 1rem; }
  .seo-card-grid, .seo-process-grid { grid-template-columns: 1fr; }
  .seo-card { min-block-size: 0; }
  .seo-process-grid { gap: 2.5rem; }
}

/* Social & Creative: approved service template with Web Design colors. */
body[data-page="social-creative"] .service-section { padding-block: clamp(3.5rem, 5.5vw, 5rem); }
.social-hero.service-hero { min-block-size: clamp(23rem, 40vw, 29rem); padding-block: clamp(3rem, 6vw, 5rem); }
.social-hero .parallax-hero-media img { opacity: .72; }
.social-hero::after { background: linear-gradient(180deg, rgb(5 4 11 / 45%), rgb(5 4 11 / 82%)), radial-gradient(circle at 58% 35%, rgb(24 119 255 / 25%), transparent 48%); }
.social-hero .page-intro { gap: 1rem; }
.social-hero .page-intro > * { margin-block: 0; }
.social-hero h1 { max-inline-size: none; font-size: clamp(2.5rem, 5vw, 4.6rem); }
.social-hero .lede { max-inline-size: 56rem; color: #e2deeb; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.social-hero .button { margin-block-start: .4rem; }
.social-section-heading { display: grid; justify-items: center; gap: .8rem; max-inline-size: 52rem; margin: 0 auto clamp(2rem, 4vw, 3.25rem); text-align: center; }
.social-section-heading :is(h2, p) { margin: 0; }
.social-section-heading h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.social-section-heading p { max-inline-size: 50rem; color: var(--muted); }
.social-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.social-card {
  position: relative;
  display: grid;
  align-content: start;
  min-block-size: 18rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  overflow: hidden;
  border: 1px solid rgb(132 172 217 / 22%);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgb(16 24 42 / 96%), rgb(7 13 25 / 98%));
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
  transition: transform 280ms var(--ease-out), border-color 280ms ease, box-shadow 280ms ease, background 280ms ease;
}
.social-card::before { content: ''; position: absolute; inset: -40% 35% 52% -20%; border-radius: 50%; background: radial-gradient(circle, rgb(139 61 255 / 13%), transparent 68%); pointer-events: none; }
.social-card .icon-container,
.social-process-grid .icon-container { position: relative; margin-block-end: 1.5rem; color: #8c5cff; border-color: rgb(114 66 232 / 70%); background: rgb(67 37 133 / 20%); box-shadow: 0 0 20px rgb(92 48 220 / 20%); }
.social-card h3 { position: relative; margin: 0 0 .8rem; font-size: clamp(1.2rem, 2vw, 1.45rem); }
.social-card p { position: relative; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
@media (hover: hover) and (pointer: fine) {
  .social-card:hover { transform: translateY(-.5rem); border-color: var(--cyan); background: linear-gradient(145deg, rgb(13 37 59 / 98%), rgb(8 16 30 / 98%)); box-shadow: 0 0 0 1px rgb(40 215 238 / 18%), 0 1.4rem 3.5rem rgb(0 0 0 / 36%), inset 0 0 2rem rgb(40 215 238 / 7%); }
  .social-card:hover .icon-container { color: #b8f7ff; border-color: var(--cyan); box-shadow: 0 0 22px rgb(40 215 238 / 32%); }
}
.social-process { border-block: 1px solid rgb(255 255 255 / 6%); }
.social-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.social-process-grid article { position: relative; display: grid; justify-items: center; text-align: center; }
.social-process-grid article:not(:last-child)::after { content: ''; position: absolute; inset-block-start: 1.75rem; inset-inline-start: calc(50% + 3rem); inline-size: calc(100% - 3rem); block-size: 1px; background: linear-gradient(90deg, rgb(40 215 238 / 55%), rgb(139 61 255 / 32%)); }
.social-process-grid .icon-container { margin-block-end: 1.25rem; }
.social-process-grid h3 { margin: 0 0 .65rem; font-size: 1.1rem; }
.social-process-grid p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.social-faq .social-section-heading { margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.social-faq .faq-list { max-inline-size: 58rem; margin-inline: auto; }
.social-faq .faq-list details { margin-block: .7rem; padding: 0; border: 1px solid rgb(132 172 217 / 24%); border-radius: .65rem; background: rgb(8 17 31 / 75%); overflow: clip; transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease; }
.social-faq .faq-list details:hover,
.social-faq .faq-list details[open] { border-color: rgb(40 215 238 / 55%); background: rgb(10 24 42 / 92%); }
.social-faq .faq-list details[open] { box-shadow: 0 0 24px rgb(40 215 238 / 7%); }
.social-faq .faq-list summary { padding: 1.15rem 1.3rem; font-weight: 700; }
.social-faq .faq-list details p { max-inline-size: none; margin: 0; padding: 0 1.3rem 1.3rem; line-height: 1.7; }
.social-faq .faq-list a { color: #a7edf7; }
.social-cta { padding-block-start: clamp(2rem, 4vw, 3rem) !important; }
.social-cta .cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; align-items: center; gap: 2rem; border: 1px solid rgb(75 174 255 / 65%); border-radius: 1rem; background: linear-gradient(120deg, rgb(62 27 131 / 90%), rgb(7 68 105 / 92%)); box-shadow: 0 0 3rem rgb(63 75 255 / 14%); text-align: left; }
.social-cta .cta-band > div { align-items: flex-start; }
.social-cta .cta-band :is(h2, p) { margin-inline: 0; }
.social-cta .cta-band .button { justify-self: end; white-space: nowrap; }
@media (max-width: 63.99rem) {
  .social-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .social-process-grid article::after { display: none; }
  .social-cta .cta-band { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .social-cta .cta-band > div { align-items: center; }
  .social-cta .cta-band :is(h2, p) { margin-inline: auto; }
  .social-cta .cta-band .button { justify-self: center; }
}
@media (max-width: 47.99rem) {
  body[data-page="social-creative"] .service-section { padding-block: 3.25rem; }
  .social-hero.service-hero { min-block-size: 27rem; padding-block: 3.5rem; }
  .social-hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .social-hero .lede { font-size: 1rem; }
  .social-card-grid, .social-process-grid { grid-template-columns: 1fr; }
  .social-card { min-block-size: 0; }
  .social-process-grid { gap: 2.5rem; }
}


/* About: approved centered compact editorial layout. */
body[data-page="about"] .service-main { background: #080711; }
body[data-page="about"] .service-section { padding-block: clamp(3.5rem, 5.5vw, 5rem); }
.about-hero.service-hero { min-block-size: clamp(23rem, 40vw, 29rem); padding-block: clamp(3rem, 6vw, 5rem); }
.about-hero .parallax-hero-media img { opacity: .7; }
.about-hero::after { background: linear-gradient(180deg, rgb(5 4 11 / 48%), rgb(5 4 11 / 88%)), radial-gradient(circle at 58% 35%, rgb(24 119 255 / 22%), transparent 48%); }
.about-hero .page-intro { gap: 1rem; }
.about-hero .page-intro > * { margin-block: 0; }
.about-hero h1 { max-inline-size: 20ch; font-size: clamp(2.6rem, 5vw, 4.8rem); }
.about-hero .lede { max-inline-size: 47rem; color: #ddd9e7; }
.about-intro-grid { display: grid; justify-items: center; gap: 2rem; max-inline-size: 66rem; margin-inline: auto; text-align: center; }
.about-intro h2 { max-inline-size: 18ch; margin: 0 auto; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.08; }
.about-statement { max-inline-size: 54rem; margin: 0; padding-block-start: 2rem; border-block-start: 2px solid #8b3dff; color: #f1edf8; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.68; text-align: center; }
.about-collaboration { border-block: 1px solid rgb(255 255 255 / 7%); background: radial-gradient(circle at 50% 10%, rgb(66 72 255 / 9%), transparent 42%); }
.about-heading { max-inline-size: 47rem; margin: 0 auto clamp(2rem, 5vw, 3.5rem); text-align: center; }
.about-heading h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.5rem); }
.about-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 72rem; margin-inline: auto; }
.about-matrix-item { display: grid; justify-items: center; align-content: center; min-block-size: 18rem; padding: clamp(2rem, 4vw, 3.5rem); text-align: center; }
.about-matrix-item:nth-child(odd) { border-inline-end: 1px solid rgb(255 255 255 / 10%); }
.about-matrix-item:nth-child(-n+2) { border-block-end: 1px solid rgb(255 255 255 / 10%); }
.about-matrix-item .matrix-word { margin: 0 0 .9rem; color: #35d9ee; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.about-matrix-item h3 { margin: 0 0 .85rem; font-size: clamp(1.45rem, 2.6vw, 2.15rem); }
.about-matrix-item p { max-inline-size: 31rem; margin: 0; color: #aaa6b5; line-height: 1.72; }
.about-closing { padding-block: clamp(3.5rem, 6vw, 5rem); }
.about-closing .cta-band { display: grid; justify-items: center; gap: 2rem; padding: clamp(2rem, 5vw, 3.5rem); border: 1px solid rgb(75 174 255 / 55%); border-radius: 1rem; background: linear-gradient(120deg, rgb(62 27 131 / 90%), rgb(7 68 105 / 92%)); text-align: center; }
.about-closing .cta-band > div { align-items: center; }
.about-closing .cta-band :is(h2,p) { margin-inline: auto; }
@media (max-width: 47.99rem) {
  body[data-page="about"] .service-section { padding-block: 3.25rem; }
  .about-hero.service-hero { min-block-size: 27rem; padding-block: 3.5rem; }
  .about-hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .about-statement { padding-block-start: 1.5rem; }
  .about-matrix { grid-template-columns: 1fr; }
  .about-matrix-item { min-block-size: 0; padding-block: 2.5rem; border-inline-end: 0 !important; border-block-end: 1px solid rgb(255 255 255 / 10%); }
}

/* Shared FAQ motion and mobile service-card alignment. */
.faq-list .faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 360ms var(--ease-out), opacity 260ms ease; }
.faq-list .faq-answer > div { min-block-size: 0; overflow: hidden; }
.faq-list details[open] .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-list details.faq-preparing .faq-answer,
.faq-list details.faq-closing .faq-answer { grid-template-rows: 0fr; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .faq-list .faq-answer { transition: none; } }
@media (max-width: 47.99rem) {
  :is(.web-design-card, .hosting-card, .seo-card, .social-card, .digital-card) {
    justify-items: center;
    text-align: center;
  }
}

/* Privacy and cookies: compact, readable legal pages linked only from the footer. */
body:is([data-page="privacy"], [data-page="cookies"]) .service-main { background: #080711; }
.legal-hero {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding-block: clamp(6rem, 11vw, 9rem) clamp(3rem, 6vw, 5rem);
  border-block-end: 1px solid rgb(255 255 255 / 8%);
  background: radial-gradient(circle at 50% 15%, rgb(60 81 255 / 16%), transparent 48%);
  text-align: center;
}
.legal-hero > * { margin: 0; }
.legal-hero h1 { max-inline-size: 18ch; font-size: clamp(2.6rem, 6vw, 5rem); }
.legal-hero .lede { max-inline-size: 48rem; color: #d7d3df; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.7; }
.legal-updated { color: var(--muted); font-size: .9rem; }
.legal-content { padding-block: clamp(3rem, 7vw, 6rem); }
.legal-prose { display: grid; gap: 0; max-inline-size: 58rem; margin-inline: auto; }
.legal-prose section { padding-block: clamp(1.6rem, 3vw, 2.4rem); border-block-end: 1px solid rgb(255 255 255 / 9%); }
.legal-prose section:first-child { padding-block-start: 0; }
.legal-prose h2 { margin: 0 0 .85rem; color: #f4f0f8; font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
.legal-prose p { max-inline-size: none; margin: 0; color: #b9b4c3; line-height: 1.82; }
.legal-prose a { color: #8ee9f4; text-underline-offset: .2em; }
.legal-prose a:hover { color: #c0f8ff; }
@media (max-width: 47.99rem) {
  .legal-hero { padding-block: 4.5rem 3rem; }
  .legal-hero h1 { font-size: clamp(2.25rem, 11vw, 3.3rem); }
  .legal-content { padding-block: 3rem; }
}