/* ==========================================================================
   DAYANA — Base: reset, typography, layout primitives, utilities
   Mobile-first. Logical properties throughout for RTL readiness.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis owns scrolling */
}

body {
  margin: 0;
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-body);
  background: var(--c-bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

img, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }

a { color: var(--c-secondary); text-decoration: none; }
a:hover { color: var(--c-accent); }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Focus rings — never removed, only styled */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: 16px;
  padding: 10px 16px; background: var(--c-primary); color: #fff; z-index: 1000;
  font-weight: 600; border-radius: 2px;
}
.skip-link:focus { inset-block-start: 12px; }

.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Typography — fluid, never clipped
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--c-heading);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
h1, .h1 { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.625rem); }
h2, .h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.3; }
h4, .h4 { font-size: 1rem; line-height: 1.4; }

p { margin: 0; }
p + p { margin-block-start: 1em; }

.lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.7; }
.text-muted { color: var(--c-muted); }
.figure { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: 1320px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--alt { background: var(--c-bg-alt); }
.section--tint { background: var(--c-bg-tint); }

.section-head { max-inline-size: 720px; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
.section-head p { margin-block-start: 1rem; }
.section-head--center { margin-inline: auto; text-align: center; }

/* Mobile: center UI by default; long-form copy keeps natural alignment */
@media (max-width: 767.98px) {
  .section-head { text-align: center; }
}

/* --------------------------------------------------------------------------
   Angled section edges — the single brand motif borrowed from op2.
   Direction is always the same: the inline-end side sits higher.
   -------------------------------------------------------------------------- */
:root { --cut: clamp(22px, 4vw, 64px); }

.cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.cut-top    { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }
.cut-both   { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); }

[dir="rtl"] .cut-bottom { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--cut))); }
[dir="rtl"] .cut-top    { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%); }
[dir="rtl"] .cut-both   { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut))); }

/* --------------------------------------------------------------------------
   Reveal masks — kinetic line reveal needs overflow clipping per line
   -------------------------------------------------------------------------- */
.split-line { display: block; overflow: hidden; }
[data-reveal="lines"] { will-change: transform; }

/* Media frame: outer clips, inner moves (GSAP parallax), img scales on hover */
.media-frame { position: relative; overflow: hidden; background: var(--c-bg-tint); }
.media-frame__move { inline-size: 100%; block-size: 100%; will-change: transform; }
.media-frame img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.media-frame:hover img { transform: scale(1.06); }

/* Reduced motion: everything visible, no transforms */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .media-frame:hover img { transform: none; }
}