/* Darren Web System — sector-specific web experience system.
   This file owns neutral mechanisms and project-controlled parameters only. */
[data-dws-experience-root] {
  --dws-x-canvas: #f6f4ef;
  --dws-x-surface: #ffffff;
  --dws-x-ink: #141412;
  --dws-x-muted: #6d6a63;
  --dws-x-accent: #244f45;
  --dws-x-accent-ink: #ffffff;
  --dws-x-rule: color-mix(in srgb, var(--dws-x-ink) 14%, transparent);
  --dws-x-radius-sm: 0.5rem;
  --dws-x-radius-md: 1.25rem;
  --dws-x-radius-lg: 2rem;
  --dws-x-elevation: 0 1.5rem 4rem color-mix(in srgb, var(--dws-x-ink) 10%, transparent);
  --dws-x-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --dws-x-duration: 420ms;
  --dws-x-section-gap: clamp(5rem, 9vw, 10rem);
  --dws-x-card-gap: clamp(0.85rem, 1.8vw, 1.5rem);
  --dws-x-display-tracking: -0.045em;
  --dws-x-media-ratio: 4 / 3;
  color: var(--dws-x-ink);
}

/* Sector profiles change morphology and hierarchy, not merely colour. */
[data-dws-sector="beauty-wellness"] {
  --dws-x-canvas: #f7f0f1;
  --dws-x-surface: #fffafb;
  --dws-x-ink: #321d25;
  --dws-x-muted: #7a636c;
  --dws-x-accent: #7b465b;
  --dws-x-radius-sm: 1.25rem;
  --dws-x-radius-md: 2.25rem;
  --dws-x-radius-lg: 4rem;
  --dws-x-elevation: 0 2rem 5rem rgba(88, 42, 61, 0.13);
  --dws-x-media-ratio: 4 / 5;
  --dws-x-display-tracking: -0.035em;
}

[data-dws-sector="legal-regulated"],
[data-dws-sector="finance-regulated"] {
  --dws-x-canvas: #f3f2ee;
  --dws-x-surface: #fbfbf8;
  --dws-x-ink: #101a25;
  --dws-x-muted: #59636d;
  --dws-x-accent: #153e56;
  --dws-x-radius-sm: 0.25rem;
  --dws-x-radius-md: 0.5rem;
  --dws-x-radius-lg: 0.75rem;
  --dws-x-elevation: 0 1.25rem 3rem rgba(16, 26, 37, 0.1);
  --dws-x-media-ratio: 16 / 10;
  --dws-x-display-tracking: -0.025em;
}

[data-dws-sector="food-retail"],
[data-dws-sector="food-hospitality"] {
  --dws-x-canvas: #f6efe2;
  --dws-x-surface: #fff9ee;
  --dws-x-ink: #172f28;
  --dws-x-muted: #6e6252;
  --dws-x-accent: #bd3e2d;
  --dws-x-radius-sm: 0.35rem;
  --dws-x-radius-md: 1rem;
  --dws-x-radius-lg: 2.5rem 0.75rem 2.5rem 0.75rem;
  --dws-x-elevation: 0 1.75rem 4rem rgba(64, 43, 26, 0.15);
  --dws-x-media-ratio: 5 / 4;
  --dws-x-display-tracking: -0.05em;
}

[data-dws-sector="hospitality-lifestyle"] {
  --dws-x-canvas: #eee9df;
  --dws-x-surface: #faf7f0;
  --dws-x-ink: #20211f;
  --dws-x-muted: #716f68;
  --dws-x-accent: #6c5038;
  --dws-x-radius-sm: 0.15rem;
  --dws-x-radius-md: 0.35rem;
  --dws-x-radius-lg: 0.5rem;
  --dws-x-media-ratio: 3 / 2;
  --dws-x-display-tracking: -0.02em;
}

[data-dws-sector="creative-photography"] {
  --dws-x-canvas: #0d0f10;
  --dws-x-surface: #171a1c;
  --dws-x-ink: #f5f4ee;
  --dws-x-muted: #aaa9a3;
  --dws-x-accent: #d7ff5d;
  --dws-x-accent-ink: #10110d;
  --dws-x-rule: rgba(255, 255, 255, 0.18);
  --dws-x-radius-sm: 0;
  --dws-x-radius-md: 0;
  --dws-x-radius-lg: 0;
  --dws-x-elevation: 0 2rem 7rem rgba(0, 0, 0, 0.42);
  --dws-x-media-ratio: 16 / 11;
}

[data-dws-sector="editorial-social"],
[data-dws-sector="entertainment-campaign"] {
  --dws-x-canvas: #efeee9;
  --dws-x-surface: #f9f7f0;
  --dws-x-ink: #171717;
  --dws-x-muted: #625f59;
  --dws-x-accent: #df3d2e;
  --dws-x-radius-sm: 0;
  --dws-x-radius-md: 0;
  --dws-x-radius-lg: 0;
  --dws-x-elevation: 0.75rem 0.75rem 0 var(--dws-x-ink);
  --dws-x-media-ratio: 4 / 5;
  --dws-x-display-tracking: -0.06em;
}

[data-dws-sector="commerce-product"] {
  --dws-x-canvas: #f5f6f4;
  --dws-x-surface: #ffffff;
  --dws-x-ink: #131617;
  --dws-x-muted: #62686a;
  --dws-x-accent: #235a49;
  --dws-x-radius-sm: 0.5rem;
  --dws-x-radius-md: 1rem;
  --dws-x-radius-lg: 1.5rem;
  --dws-x-media-ratio: 1 / 1;
}

[data-dws-sector="dashboard-product"] {
  --dws-x-canvas: #eef1f4;
  --dws-x-surface: #ffffff;
  --dws-x-ink: #17202a;
  --dws-x-muted: #64717d;
  --dws-x-accent: #2f5bea;
  --dws-x-radius-sm: 0.5rem;
  --dws-x-radius-md: 0.75rem;
  --dws-x-radius-lg: 1rem;
  --dws-x-elevation: 0 0.75rem 2rem rgba(21, 34, 50, 0.08);
}

[data-dws-experience-root] :where([data-dws-component="navigation-shell"]) {
  isolation: isolate;
  z-index: 20;
  border-block-end: 1px solid var(--dws-x-rule);
  background: color-mix(in srgb, var(--dws-x-canvas) 86%, transparent);
  backdrop-filter: blur(1rem) saturate(135%);
}

[data-dws-experience-root] :where([data-dws-zone]) {
  position: relative;
  min-inline-size: 0;
}

[data-dws-experience-root] :where([data-dws-zone]:not(:first-child)) {
  margin-block-start: var(--dws-x-section-gap);
}

[data-dws-experience-root] :where([data-dws-layout="hero-stage"]) {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  min-block-size: min(54rem, calc(100svh - 5rem));
}

[data-dws-experience-root][data-dws-sector="creative-photography"] :where([data-dws-layout="hero-stage"]),
[data-dws-experience-root][data-dws-sector="editorial-social"] :where([data-dws-layout="hero-stage"]),
[data-dws-experience-root][data-dws-sector="entertainment-campaign"] :where([data-dws-layout="hero-stage"]) {
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
  align-items: end;
}

[data-dws-experience-root][data-dws-sector="beauty-wellness"] :where([data-dws-layout="hero-stage"]) {
  grid-template-columns: minmax(17rem, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
}

[data-dws-experience-root] :where([data-dws-component="media-stage"]) {
  position: relative;
  overflow: clip;
  aspect-ratio: var(--dws-x-media-ratio);
  border-radius: var(--dws-x-radius-lg);
  background: var(--dws-x-surface);
  box-shadow: var(--dws-x-elevation);
}

[data-dws-experience-root] :where([data-dws-component="media-stage"] > img, [data-dws-component="media-stage"] > video, [data-dws-component="media-stage"] picture, [data-dws-component="media-stage"] picture > img) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 900ms var(--dws-x-ease), filter 600ms var(--dws-x-ease);
}

[data-dws-experience-root] :where([data-dws-component="media-stage"]:hover > img, [data-dws-component="media-stage"]:hover > video, [data-dws-component="media-stage"]:hover picture > img) {
  transform: scale(1.025);
}

[data-dws-experience-root] :where([data-dws-component="sector-card"]) {
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(0.75rem, 1.4vw, 1.15rem);
  min-inline-size: 0;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  border: 1px solid var(--dws-x-rule);
  border-radius: var(--dws-x-radius-md);
  background: var(--dws-x-surface);
  box-shadow: 0 0 0 transparent;
  transition: transform var(--dws-x-duration) var(--dws-x-ease), box-shadow var(--dws-x-duration) var(--dws-x-ease), border-color var(--dws-x-duration) var(--dws-x-ease);
}

[data-dws-experience-root] :where([data-dws-component="sector-card"]:hover, [data-dws-component="sector-card"]:focus-within) {
  transform: translateY(-0.35rem);
  border-color: color-mix(in srgb, var(--dws-x-accent) 48%, var(--dws-x-rule));
  box-shadow: var(--dws-x-elevation);
}

[data-dws-sector="legal-regulated"] :where([data-dws-component="sector-card"]),
[data-dws-sector="finance-regulated"] :where([data-dws-component="sector-card"]) {
  border-inline-start: 0.28rem solid var(--dws-x-accent);
  box-shadow: none;
}

[data-dws-sector="food-retail"] :where([data-dws-component="sector-card"]:nth-child(3n + 2)),
[data-dws-sector="food-hospitality"] :where([data-dws-component="sector-card"]:nth-child(3n + 2)) {
  transform: translateY(clamp(0rem, 2vw, 1.5rem));
}

[data-dws-sector="editorial-social"] :where([data-dws-component="sector-card"]),
[data-dws-sector="entertainment-campaign"] :where([data-dws-component="sector-card"]) {
  border-width: 2px;
}

[data-dws-experience-root] :where([data-dws-component="proof-grid"], [data-dws-component="product-grid"], [data-dws-component="service-grid"]) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--dws-x-card-gap);
}

[data-dws-experience-root] :where([data-dws-component="proof-grid"], [data-dws-component="product-grid"], [data-dws-component="service-grid"]) > * {
  grid-column: span 4;
  min-inline-size: 0;
}

[data-dws-experience-root] :where([data-dws-component="proof-grid"], [data-dws-component="product-grid"], [data-dws-component="service-grid"]) > :first-child:nth-last-child(2),
[data-dws-experience-root] :where([data-dws-component="proof-grid"], [data-dws-component="product-grid"], [data-dws-component="service-grid"]) > :first-child:nth-last-child(2) ~ * {
  grid-column: span 6;
}

[data-dws-experience-root] :where([data-dws-component="narrative-index"]) {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--dws-x-rule);
}

[data-dws-experience-root] :where([data-dws-component="narrative-index"] > *) {
  display: grid;
  grid-template-columns: minmax(2.5rem, 0.16fr) minmax(12rem, 0.84fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(1rem, 2vw, 1.6rem);
  border-block-end: 1px solid var(--dws-x-rule);
}

[data-dws-experience-root] :where([data-dws-component="conversion-form"]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--dws-x-radius-lg);
  background: var(--dws-x-surface);
  box-shadow: var(--dws-x-elevation);
}

[data-dws-experience-root] :where([data-dws-component="conversion-form"] > [class*="full"], [data-dws-component="conversion-form"] > button, [data-dws-component="conversion-form"] > [type="submit"]) {
  grid-column: 1 / -1;
}

[data-dws-experience-root] :where([data-dws-action-cluster]) {
  position: relative;
  border-radius: var(--dws-x-radius-sm);
  transition: transform 220ms var(--dws-x-ease), box-shadow 220ms var(--dws-x-ease), background-color 220ms var(--dws-x-ease), color 220ms var(--dws-x-ease);
}

[data-dws-experience-root] :where([data-dws-action-cluster]:hover) {
  transform: translateY(-0.12rem);
}

[data-dws-experience-root] :where([data-dws-action-cluster][data-dws-action-variant="primary"]) {
  padding: 0.72rem 0.82rem 0.72rem 1.15rem;
  border: 1px solid var(--dws-x-accent);
  background: var(--dws-x-accent);
  color: var(--dws-x-accent-ink);
}

[data-dws-experience-root] :where([data-dws-action-cluster][data-dws-action-variant="secondary"]) {
  padding: 0.72rem 0.82rem 0.72rem 1.15rem;
  border: 1px solid var(--dws-x-rule);
  background: color-mix(in srgb, var(--dws-x-surface) 72%, transparent);
  color: var(--dws-x-ink);
}

[data-dws-experience-root] :where([data-dws-action-cluster][data-dws-action-variant="text"])::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.18rem;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform 260ms var(--dws-x-ease);
}

[data-dws-experience-root] :where([data-dws-action-cluster][data-dws-action-variant="text"]:hover)::after {
  transform: scaleX(1);
}

[data-dws-experience-root] :where([data-dws-reveal]) {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 620ms var(--dws-x-ease), transform 620ms var(--dws-x-ease);
}

[data-dws-experience-root] :where([data-dws-reveal][data-dws-entered]) {
  opacity: 1;
  transform: none;
}

[data-dws-experience-root] :where(h1, [data-dws-display]) {
  letter-spacing: var(--dws-x-display-tracking);
}

[data-dws-experience-root] :where([data-dws-zone="proof"], [data-dws-zone="conversion"]) {
  isolation: isolate;
}

@media (max-width: 64rem) {
  [data-dws-experience-root] :where([data-dws-layout="hero-stage"]) {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.72fr);
    min-block-size: auto;
  }

  [data-dws-experience-root] :where([data-dws-component="proof-grid"], [data-dws-component="product-grid"], [data-dws-component="service-grid"]) > * {
    grid-column: span 6;
  }
}

@media (max-width: 48rem) {
  [data-dws-experience-root] {
    --dws-x-section-gap: clamp(3.5rem, 16vw, 6rem);
  }

  [data-dws-experience-root] :where([data-dws-layout="hero-stage"]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
  }

  [data-dws-experience-root] :where([data-dws-layout="hero-stage"] [data-dws-component="media-stage"]) {
    order: -1;
    max-block-size: 64svh;
  }

  [data-dws-sector="food-retail"] :where([data-dws-layout="hero-stage"] [data-dws-component="media-stage"]),
  [data-dws-sector="food-hospitality"] :where([data-dws-layout="hero-stage"] [data-dws-component="media-stage"]) {
    order: 0;
  }

  [data-dws-experience-root] :where([data-dws-component="proof-grid"], [data-dws-component="product-grid"], [data-dws-component="service-grid"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-dws-experience-root] :where([data-dws-component="proof-grid"], [data-dws-component="product-grid"], [data-dws-component="service-grid"]) > * {
    grid-column: 1;
  }

  [data-dws-sector="food-retail"] :where([data-dws-component="sector-card"]:nth-child(3n + 2)),
  [data-dws-sector="food-hospitality"] :where([data-dws-component="sector-card"]:nth-child(3n + 2)) {
    transform: none;
  }

  [data-dws-experience-root] :where([data-dws-component="narrative-index"] > *) {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  [data-dws-experience-root] :where([data-dws-component="conversion-form"]) {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.25rem;
  }

  [data-dws-experience-root] :where([data-dws-component="conversion-form"] > *) {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-dws-experience-root] :where([data-dws-reveal]) {
    opacity: 1;
    transform: none;
  }

  [data-dws-experience-root] :where([data-dws-component="media-stage"] > img, [data-dws-component="media-stage"] > video, [data-dws-component="sector-card"], [data-dws-action-cluster]) {
    transform: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  [data-dws-experience-root] :where([data-dws-component="sector-card"], [data-dws-component="conversion-form"], [data-dws-action-cluster]) {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}