/* Premium experience layer
   This file sits after page styles and applies a consistent high-end visual language */

:root {
  --prm-text: color-mix(in srgb, var(--text) 96%, #000 4%);
  --prm-muted: color-mix(in srgb, var(--muted) 92%, var(--text) 8%);
  --prm-line: color-mix(in srgb, var(--line) 80%, var(--text) 20%);
  --prm-surface-1: color-mix(in srgb, var(--surface) 95%, var(--bg) 5%);
  --prm-surface-2: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);
  --prm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --prm-shadow-soft: 0 20px 45px -34px rgba(0, 0, 0, 0.45);
  --prm-shadow-hover: 0 28px 58px -34px rgba(0, 0, 0, 0.52);
  --prm-radius-lg: 20px;
  --prm-radius-md: 14px;
  --prm-duration-fast: 200ms;
  --prm-duration-mid: 260ms;
  --prm-box-gutter: clamp(0.75rem, 1.8vw, 1.45rem);
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--prm-text);
  letter-spacing: 0.001em;
}

/* Editorial typography rhythm */
main h1,
main h2,
main h3 {
  color: var(--prm-text);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

main h1 {
  font-size: clamp(2.28rem, 5.6vw, 4.65rem) !important;
  line-height: 1.03 !important;
  margin-bottom: clamp(0.8rem, 1.6vw, 1.15rem);
}

main h2 {
  font-size: clamp(1.52rem, 3.2vw, 2.8rem) !important;
  line-height: 1.1;
}

main h3 {
  font-size: clamp(1.05rem, 2.1vw, 1.45rem) !important;
  line-height: 1.2;
}

main .lead {
  color: var(--prm-muted) !important;
  max-width: 62ch !important;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.74;
}

main p,
main li {
  line-height: 1.7;
}

main .eyebrow {
  letter-spacing: 0.14em !important;
  font-weight: 560;
  color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%) !important;
}

/* Curated spacing and section rhythm */
main > section,
main > .main-section {
  position: relative;
  padding-top: clamp(3.4rem, 7vw, 6.4rem) !important;
  padding-bottom: clamp(3.4rem, 7vw, 6.4rem) !important;
}

main > section:nth-of-type(even)::before,
main > .main-section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  inset: 1.15rem 0;
  border-radius: 22px;
  background:
    radial-gradient(120% 160% at 6% 0%, color-mix(in srgb, var(--surface) 68%, transparent), transparent 58%),
    linear-gradient(170deg, color-mix(in srgb, var(--surface) 56%, transparent), transparent);
  pointer-events: none;
  z-index: -1;
}

/* Inner gutter for highlighted white sections so headings are detached from edges */
main > section:nth-of-type(even),
main > .main-section:nth-of-type(even) {
  padding-left: var(--prm-box-gutter) !important;
  padding-right: var(--prm-box-gutter) !important;
}

main .section-head {
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem) !important;
}

/* Premium surface treatment */
:is(.card, .plan-card, .faq-item, .project, .media-card, .legal-grid .card, .contact-layout .card, .result-card, .metric-card) {
  border-color: var(--prm-line) !important;
  border-radius: var(--prm-radius-md) !important;
  background:
    linear-gradient(160deg, var(--prm-surface-1), var(--prm-surface-2)) !important;
  box-shadow: var(--prm-shadow-soft);
  transition:
    transform var(--prm-duration-mid) var(--prm-ease),
    box-shadow var(--prm-duration-mid) var(--prm-ease),
    border-color var(--prm-duration-mid) var(--prm-ease),
    background-color var(--prm-duration-mid) var(--prm-ease);
}

/* More breathing room in white cards so titles never touch edges */
:is(.card, .plan-card, .project, .legal-grid .card, .contact-layout .card, .result-card, .metric-card) {
  padding-left: clamp(1.15rem, 2vw, 1.7rem) !important;
  padding-right: clamp(1.15rem, 2vw, 1.7rem) !important;
}

.faq-item .faq-trigger,
.faq-item .faq-panel {
  padding-left: clamp(1.1rem, 2vw, 1.6rem) !important;
  padding-right: clamp(1.1rem, 2vw, 1.6rem) !important;
}

/* Extra spacing for the section you mentioned */
#principles .section-head {
  padding-left: clamp(0.7rem, 1.8vw, 1.3rem) !important;
  padding-right: clamp(0.7rem, 1.8vw, 1.3rem) !important;
}

#principles .principles-grid .card {
  padding-left: clamp(1.25rem, 2.2vw, 1.85rem) !important;
  padding-right: clamp(1.25rem, 2.2vw, 1.85rem) !important;
}

:is(.card, .plan-card, .faq-item, .project, .media-card, .legal-grid .card, .contact-layout .card):hover {
  transform: translateY(-3px);
  box-shadow: var(--prm-shadow-hover);
  border-color: color-mix(in srgb, var(--text) 26%, var(--line));
}

/* Input refinement */
input,
textarea,
select {
  transition:
    border-color var(--prm-duration-fast) var(--prm-ease),
    box-shadow var(--prm-duration-fast) var(--prm-ease),
    background-color var(--prm-duration-fast) var(--prm-ease);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: color-mix(in srgb, var(--text) 42%, var(--line)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 12%, transparent);
  outline: none;
}

/* Elevated button language */
:where(a.button, button, .icon-btn):not(:disabled) {
  transition:
    transform var(--prm-duration-fast) var(--prm-ease),
    box-shadow var(--prm-duration-fast) var(--prm-ease),
    border-color var(--prm-duration-fast) var(--prm-ease),
    background-color var(--prm-duration-fast) var(--prm-ease),
    color var(--prm-duration-fast) var(--prm-ease),
    filter var(--prm-duration-fast) var(--prm-ease) !important;
}

:where(a.button, button, .icon-btn):not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.55) !important;
}

:where(a.button, button, .icon-btn):not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 6px 14px -14px rgba(0, 0, 0, 0.5) !important;
}

/* Elegant link underline */
main a:not(.button):not(.brand):not(.chip):not(.tab-btn):not(.faq-trigger),
.site-footer a:not(.button) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--prm-duration-mid) var(--prm-ease), color var(--prm-duration-mid) var(--prm-ease);
}

main a:not(.button):not(.brand):not(.chip):not(.tab-btn):not(.faq-trigger):hover,
main a:not(.button):not(.brand):not(.chip):not(.tab-btn):not(.faq-trigger):focus-visible,
.site-footer a:not(.button):hover,
.site-footer a:not(.button):focus-visible {
  background-size: 100% 1px;
}

/* Image/media presentation */
:is(.media-card, .project-image, .card figure, .hero-media figure, .card-image) {
  overflow: clip;
  border-radius: clamp(12px, 1.8vw, 18px);
}

:is(.media-card img, .project-image img, .card img, .hero-media img) {
  transform: scale(1);
  transform-origin: center;
  transition: transform 900ms var(--prm-ease), filter 600ms var(--prm-ease), opacity 500ms var(--prm-ease);
}

:is(.media-card:hover img, .project:hover .project-image img, .card:hover img, .hero-media figure:hover img) {
  transform: scale(1.04);
  filter: saturate(1.03) contrast(1.03);
}

/* Header polish */
.site-header {
  backdrop-filter: saturate(130%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(130%) blur(14px) !important;
  background: color-mix(in srgb, var(--bg) 82%, transparent) !important;
}

/* Scroll reveal animation classes (applied by premium.js) */
.prm-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 460ms var(--prm-ease),
    transform 460ms var(--prm-ease);
  transition-delay: var(--prm-delay, 0ms);
}

.prm-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.prm-media-reveal {
  overflow: clip;
}

.prm-media-reveal img {
  transform: scale(1.08);
  opacity: 0.02;
}

.prm-media-reveal.is-visible img {
  transform: scale(1);
  opacity: 1;
}

.prm-parallax {
  transform: translate3d(0, var(--prm-parallax-y, 0px), 0);
  will-change: transform;
}

/* Cinematic page intro */
body.prm-page-enter main {
  animation: prmPageIn 620ms var(--prm-ease) both;
}

@keyframes prmPageIn {
  from {
    opacity: 0.001;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive balance */
@media (max-width: 980px) {
  main > section:nth-of-type(even)::before,
  main > .main-section:nth-of-type(even)::before {
    inset: 0.55rem 0;
    border-radius: 16px;
  }

  :is(.card, .plan-card, .faq-item, .project, .media-card, .legal-grid .card, .contact-layout .card) {
    box-shadow: 0 14px 34px -28px rgba(0, 0, 0, 0.42);
  }
}

@media (max-width: 780px) {
  :root {
    --prm-box-gutter: 0.5rem;
  }

  main h1 {
    font-size: clamp(2rem, 8.6vw, 2.55rem) !important;
  }

  main > section,
  main > .main-section {
    padding-top: clamp(2.7rem, 8vw, 4rem) !important;
    padding-bottom: clamp(2.7rem, 8vw, 4rem) !important;
  }

  .prm-reveal {
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prm-reveal,
  .prm-media-reveal img,
  .prm-parallax,
  body.prm-page-enter main,
  :is(.card, .plan-card, .faq-item, .project, .media-card, .legal-grid .card, .contact-layout .card),
  :where(a.button, button, .icon-btn):not(:disabled),
  :is(.media-card img, .project-image img, .card img, .hero-media img),
  main a:not(.button):not(.brand):not(.chip):not(.tab-btn):not(.faq-trigger),
  .site-footer a:not(.button) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  .prm-reveal {
    opacity: 1 !important;
  }
}