/* Havento gradient polish v1. Index controls are reused.
   Light theme is intentional. The owner requested a cream-based alternative.
   DESIGN_VARIANCE: 7; MOTION_INTENSITY: 4; VISUAL_DENSITY: 3. */
:root {
  color-scheme: light;
  --canvas: #FBFAF7;
  --surface: #FFFDFA;
  --surface-tint: #F1EEE7;
  --text: #172A46;
  --muted: #535B63;
  --action: #172A46;
  --action-text: #FFFDFA;
  --brand-tile: #DDE85A;
  --brand-tile-text: #172A46;
  --rule: #C9C4BA;
  --control-border: #787B78;
  --input-bg: #FFFDFA;
  --selected-bg: #DEE6EC;
  --opening-cream: #F6F3ED;
  --opening-blue: #E5EDF5;
  --opening-citron: #F1F2D8;
  --opening-depth: 800px;
  --directory-bg: transparent;
  --directory-text: var(--text);
  --directory-muted: var(--muted);
  --directory-rule: var(--rule);
  --directory-hover: var(--selected-bg);
  --hero-size: clamp(40px, 4.5vw, 64px);
  --h2: clamp(28px, 3.2vw, 40px);
  --h3: clamp(20px, 2vw, 24px);
  --body: 18px;
  --line: 1.6;
  --content-width: 1280px;
  --radius: 8px;
  --section-space: 80px;
  --section-heading-gap: var(--s6);
  --grid-gap: var(--s6);
  --hero-space: var(--s8);
  --service-card-pad: var(--s5);
  --service-toggle-size: 44px;
  --project-frame-shadow: 0 8px 24px rgb(23 42 70 / 8%);
  --portfolio-ground: var(--opening-blue);
  --portfolio-project-title: clamp(24px, 2vw, 28px);
  --portfolio-gap: var(--s6);
  --portfolio-frame-rule: rgb(23 42 70 / 16%);
  --motion-micro: 160ms;
  --motion-state: 220ms;
  --motion-enter: 320ms;
  --motion-exit: 140ms;
  --motion-stagger: 40ms;
  --motion-rise: 8px;
  --motion-nudge: 2px;
  --hero-depth-shift: 6px;
  --hero-depth-tilt: .5deg;
  --hero-art-width: min(1440px, 112vw);
  --hero-art-top: -48px;
  --hero-art-right: -64px;
  --hero-art-opacity: 1;
  /* Local isolated hero layers; shared dialog/navigation layers remain intact. */
  --hero-layer-art: 0;
  --hero-layer-content: 1;
}

.gradient-page {
  background-color: var(--canvas);
  background-image:
    radial-gradient(ellipse at 88% 24%, var(--opening-blue), transparent 64%),
    radial-gradient(ellipse at 8% 20%, var(--opening-citron), transparent 56%),
    linear-gradient(180deg, var(--opening-cream), var(--canvas));
  background-size: 100% var(--opening-depth);
  background-repeat: no-repeat;
}

.gradient-page .site-header { min-height: 72px; }
.gradient-page .hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  min-height: clamp(440px, 64svh, 560px);
  box-sizing: border-box;
  margin: 0;
  gap: 0;
  padding-block: var(--hero-space);
}
.gradient-hero-content { position: relative; z-index: var(--hero-layer-content); }
.gradient-page .hero-intro { max-width: 760px; }
.gradient-page .hero h1 { max-width: 22ch; font-size: var(--hero-size); }
.gradient-page .hero .eyebrow { font-size: 16px; line-height: 1.5; }
.gradient-page .hero-description { max-width: 44ch; }
.gradient-page .hero-actions { --od-gap: var(--s5); }

.gradient-hero-backdrop {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: var(--hero-layer-art);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: var(--hero-art-opacity);
  /* This mask dissolves the artwork, preserving the approved gradient beneath it
     and keeping the live text in a light, low-detail region. */
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgb(0 0 0 / 14%) 40%, rgb(0 0 0 / 60%) 60%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 8%, rgb(0 0 0 / 14%) 40%, rgb(0 0 0 / 60%) 60%, #000 78%);
}
.gradient-hero-art {
  position: absolute;
  top: var(--hero-art-top);
  right: var(--hero-art-right);
  width: var(--hero-art-width);
  opacity: 0;
}
.gradient-hero-art.is-ready { opacity: 1; }
.gradient-hero-backdrop[hidden] { display: none; }
.gradient-hero-depth {
  display: block;
  transform: translate3d(var(--hero-shift-x, 0px), var(--hero-shift-y, 0px), 0) rotate(var(--hero-tilt, 0deg));
  transition: transform var(--motion-state) var(--motion-ease);
}
.gradient-hero-art .od-media { aspect-ratio: 1672 / 941; }

@media (prefers-reduced-motion: no-preference) {
  .gradient-hero-art.is-ready {
    animation: gradient-art-enter var(--motion-enter) var(--motion-ease) backwards;
  }
}
@keyframes gradient-art-enter {
  from { opacity: 0; transform: translateY(var(--motion-rise)) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@supports not ((mask-image: linear-gradient(transparent, #000)) or (-webkit-mask-image: linear-gradient(transparent, #000))) {
  .gradient-hero-backdrop { opacity: .15; }
}

/* Move the existing links, including their selection feedback, into normal flow. */
.gradient-page .service-shortcuts {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--content-width);
  padding: var(--s3) 0;
  border-block: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  gap: 0;
}
.gradient-page .service-shortcuts .directory-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s2);
}
.gradient-page .service-shortcuts .directory-link {
  min-height: 64px;
  height: 100%;
  gap: var(--s2);
  padding: var(--s3);
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 16px;
}
.gradient-page .service-shortcuts :focus-visible { outline-color: var(--action); }
.gradient-page .service-shortcuts .directory-name { font-weight: 600; }

.gradient-page .services-section { padding-block: var(--section-space); }
.gradient-page .section-heading { margin-bottom: var(--section-heading-gap); }
.gradient-page .section-heading .od-stack { --od-gap: var(--s3); }
.gradient-page .section-description { max-width: 64ch; }
/* Completed work uses an open gallery, visually separate from service cards. */
.gradient-page .portfolio-section {
  padding-block: var(--section-space);
  background: var(--portfolio-ground);
}
.gradient-page .portfolio-projects-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
.gradient-page .portfolio-section .section-heading .od-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s4) var(--s6);
}
.gradient-page .portfolio-projects-bar {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--portfolio-frame-rule);
}
.gradient-page .portfolio-preview-hint {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.gradient-page .portfolio-projects {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  --od-gap: var(--portfolio-gap);
  align-items: start;
  margin-top: var(--s6);
}
.gradient-page .portfolio-project { height: auto; grid-template-rows: auto auto; gap: var(--s4); }
.gradient-page .project-preview {
  padding: 0;
  border: 0;
  background: transparent;
}
.gradient-page .project-frame {
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  outline: 1px solid var(--portfolio-frame-rule);
  box-shadow: var(--project-frame-shadow);
}
.gradient-page .project-preview .od-media { border-radius: var(--radius); }
.gradient-page .project-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2) var(--s4);
  align-items: center;
}
.gradient-page .project-caption h4 { font-size: var(--portfolio-project-title); }
.gradient-page .project-caption .project-description { grid-column: 1 / -1; max-width: 48ch; }
.gradient-page .project-caption .project-website {
  margin: 0;
  gap: var(--s2);
  text-decoration: underline;
  text-underline-offset: var(--s1);
}
.gradient-page .project-website svg { width: 16px; height: 16px; }
.gradient-page .approach-section { background: var(--surface-tint); }
.gradient-page .process-step:first-child { padding-top: 0; }
.gradient-page .faq-section { max-width: var(--content-width); }
.gradient-page .faq-body { max-width: 880px; }
.gradient-page .faq-plus { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.gradient-page .faq-answer { padding-right: var(--s8); }
.gradient-page .enquiry-section { padding-block: var(--section-space); gap: var(--s7); }
.gradient-page .enquiry-workspace { background: var(--surface); border-color: var(--control-border); box-shadow: none; }
.gradient-page .brief-aside { margin-top: 0; }
.gradient-page .service-choice:has(input:checked) { box-shadow: inset 0 0 0 1px var(--action); }
.gradient-page .form-field input:focus-visible,
.gradient-page .form-field textarea:focus-visible { outline-offset: var(--s1); }
.gradient-page .required-note,
.gradient-page .field-error { font-size: 16px; }
.gradient-page .site-footer { background: var(--surface-tint); }
.gradient-page .site-footer.index-footer { padding-top: var(--s8); }

@media (max-width: 1279px) {
  .gradient-page .service-shortcuts .directory-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  :root { --section-space: var(--s8); --portfolio-gap: var(--s6); }
  .gradient-page .project-caption { grid-template-columns: minmax(0, 1fr); }
  .gradient-page .project-caption .project-description { grid-row: 2; }
  .gradient-page .project-caption .project-website { grid-row: 3; justify-self: start; }
  .gradient-page .hero-intro { max-width: 680px; }
  .gradient-page .service-shortcuts { max-width: var(--content-width); }
  .gradient-page .enquiry-section { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  :root {
    --body: 16px;
    --section-space: 56px;
    --section-heading-gap: var(--s5);
    --grid-gap: var(--s5);
    --hero-space: var(--s7);
    --portfolio-gap: var(--s7);
    --opening-depth: 960px;
    --hero-art-width: 960px;
    --hero-art-top: -32px;
    --hero-art-right: -256px;
    --hero-art-opacity: .48;
  }
  .gradient-page .hero { min-height: 0; }
  .gradient-page .hero-intro { max-width: 100%; }
  .gradient-page .hero-actions { --od-gap: var(--s4); }
  .gradient-page .service-shortcuts .directory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gradient-page .service-shortcuts .directory-link { padding: var(--s2); }
  .gradient-page .portfolio-projects {
    grid-template-columns: minmax(0, 1fr);
    --od-cols: 1;
  }
  .gradient-page .portfolio-section .section-heading .od-stack { grid-template-columns: minmax(0, 1fr); }
  .gradient-page .process-step { grid-template-columns: minmax(0, 1fr); }
  .gradient-page .faq-answer { padding-right: 0; }
  .gradient-page .enquiry-section { gap: var(--s6); }
  .gradient-page .enquiry-workspace { padding: var(--s5); }
  .gradient-page .site-footer.index-footer { padding-top: var(--s7); }
}

@media (max-width: 479px) {
  .gradient-page .service-choices { --od-cols: 1; }
}

@media (max-width: 374px) {
  .gradient-page .service-shortcuts .directory-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-hero-art.is-ready { animation: none; transform: none; }
  .gradient-hero-depth { transition: none; transform: none; }
}

/* Service previews are part of each native summary, not additional controls.
   Their measured intrinsic ratios keep their full frames. Existing reveal motion applies
   to the original details nodes, and the shared reduced-motion rule remains active. */
.gradient-page .service-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}
/* Closed pairs share a bottom edge. Open disclosures return to natural heights. */
.gradient-page .service-list:has(.service[open]) { align-items: start; }
.gradient-page .service-visual-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-tint);
}
.gradient-page .service-visual-card[open] { background: var(--surface); border-color: var(--control-border); }
.gradient-page .service-visual-card summary {
  grid-template-columns: minmax(0, 1fr) var(--service-toggle-size);
  grid-template-rows: auto 1fr auto;
  gap: var(--s5) var(--s4);
  padding: var(--service-card-pad);
  min-height: 0;
  height: 100%;
}
.gradient-page .service-visual-card[open] summary { height: auto; }
.gradient-page .service-visual-group {
  grid-column: 1 / -1;
  --od-cols: 1;
  --od-gap: var(--s5);
  align-self: start;
}
.gradient-page .service-platforms { grid-column: 1 / -1; }
.gradient-page .service-platforms .service-visual-group { --od-cols: 2; }
.gradient-page .service-visual {
  --od-gap: var(--s3);
  min-width: 0;
}
.gradient-page .service-visual .od-media {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.gradient-page .service-visual-caption {
  display: block;
  padding-inline: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.gradient-page .service-visual-card .service-heading {
  padding-left: 0;
  min-width: 0;
  align-self: center;
}
.gradient-page .service-visual-card .service-heading strong { font-size: var(--h3); line-height: 1.35; }
.gradient-page .service-visual-card .service-need {
  display: block;
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  min-height: 3.2em;
}
.gradient-page .service-visual-card .service-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--service-toggle-size);
  min-height: var(--service-toggle-size);
  margin: 0;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
}
.gradient-page .service-visual-card[open] .service-plus {
  color: var(--action-text);
  background: var(--action);
  border-color: var(--action);
}
.gradient-page .service-visual-card .service-content {
  padding: var(--service-card-pad);
  border-top: 1px solid var(--rule);
  --od-gap: var(--s5);
}
.gradient-page .service-projects {
  --od-gap: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.gradient-page .service-projects h3,
.gradient-page .service-projects h4 {
  font-size: var(--body);
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
}
.gradient-page .service-project-copy { --od-gap: var(--s2); }
.gradient-page .service-project-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.gradient-page .service-project-example {
  --od-gap: var(--s4);
  margin: 0;
}
.gradient-page .service-project-example .od-media {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-tint);
}
.gradient-page .direct-contact {
  --od-gap: var(--s4);
  margin: 0;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5;
}
.gradient-page .direct-contact-link {
  --od-gap: var(--s1);
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.gradient-page .direct-contact-label { color: var(--muted); }
.gradient-page .direct-contact-value {
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: var(--s1);
}
@media (hover: hover) {
  .gradient-page .direct-contact-link:hover { text-decoration: none; }
  .gradient-page .direct-contact-link:hover .direct-contact-value { text-decoration-thickness: 2px; }
  .gradient-page .service-visual-card:not([open]) summary:hover {
    background: transparent;
  }
  .gradient-page .service-visual-card:not([open]) summary:hover .service-plus {
    background: var(--selected-bg);
    border-color: var(--control-border);
  }
}
@media (max-width: 767px) {
  .gradient-page .service-visual-card { --service-card-pad: var(--s4); }
  .gradient-page .service-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .gradient-page .service-visual-card summary { height: auto; row-gap: var(--s4); }
  .gradient-page .service-visual-card .service-need { min-height: 0; }
  .gradient-page .service-platforms .service-visual-group { --od-cols: 1; }
}