/* ==========================================================================
   Seen Media Group FZ LLC, corporate site
   Design system
   Display type : Bodoni Moda (Didone, matches the SEEN wordmark)
   Text type    : Jost (geometric grotesk, matches the MEDIA GROUP lockup)
   Brand device : the Seen Arabia double tick, drawn as SVG (hero and list markers)
   ========================================================================== */

:root {
  --paper: #faf8f5;
  --paper-2: #f2eee7;
  --ink: #000000;
  --body: #3a3a3a;
  --muted: #5d574d;
  --rule: #ded8cf;
  --rule-dark: #2e2e2e;
  --accent: #5c2a7e;          /* deep violet, legible for links and small type */
  --accent-bright: #c760fe;   /* the Seen Arabia violet, for the tick device */
  --accent-tint: #e9dbf3;     /* pale violet, for the oversized hero tick */

  --serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --gutter: 2rem;
  --max: 1240px;
  --measure: 62ch;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(78px + env(safe-area-inset-top, 0px));
  background: #faf8f5;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Editorial 3:9 grid. Section label sits in a narrow left column,
   content runs in the wide right column, like a magazine contents page. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}

.split__label {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  padding-top: 0.85rem;
  border-top: 2px solid var(--accent);
}

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --------------------------------------------------------------- type */

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 0 0 0.6em;
  letter-spacing: -0.012em;
  /* Bodoni Moda is a variable Didone. Left alone, the browser raises the
     optical size with the font size, which thins the hairlines to almost
     nothing at display sizes. Pinning opsz low keeps the strokes solid. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 16, "wght" 600;
  font-weight: 600;
}

h4 {
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.9rem, 7.4vw, 6.2rem);
  line-height: 1.0;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 14, "wght" 600;
}

h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
}

h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.2;
}

h4 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  color: var(--body);
  font-weight: 400;
  max-width: 54ch;
}

.pull {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 24ch;
  margin: 0;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 16, "wght" 500;
}

.small { font-size: 0.95rem; line-height: 1.65; color: var(--muted); }

/* --------------------------------------------------------------- header */

.masthead {
  position: sticky;
  top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 100;
  background: rgba(250, 248, 245, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.masthead__logo img { width: clamp(170px, 20vw, 226px); }

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: var(--body);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}

@media (max-width: 960px) {
  .nav__toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
  }
  .nav li + li { border-top: 1px solid var(--rule); }
  .nav a { display: block; padding: 0.85rem 0; border-bottom: 0; }
}

/* --------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(4.5rem, 12vw, 9.5rem);
}

.hero__mark {
  position: absolute;
  right: -7vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(26rem, 64vw, 62rem);
  height: auto;
  fill: none;
  stroke: var(--accent-tint);
  stroke-width: 4.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  z-index: 0;
}

.hero__inner { position: relative; z-index: 1; }

.hero h1 { max-width: 15ch; }

.hero .lede { margin-top: 1.6rem; }

.hero__actions {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

@media (max-width: 700px) {
  .hero__mark { right: -26vw; opacity: 0.75; }
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.97rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.7rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: background 0.18s ease, color 0.18s ease;
  cursor: pointer;
}
.btn:hover { background: transparent; color: var(--ink); text-decoration: none; }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: transparent; color: var(--paper); }

/* Buttons must win over the generic link colour inside inverted sections,
   otherwise the label disappears into the button face. */
.inverted a.btn { color: var(--paper); background: transparent; border-color: var(--paper); }
.inverted a.btn:hover { color: var(--ink); background: var(--paper); }

/* Declared last on purpose. These share specificity with the rules above,
   so source order decides, and the light button must have the final say. */
.inverted a.btn--light { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.inverted a.btn--light:hover { color: var(--paper); background: transparent; }

/* --------------------------------------------------------------- inverted */

.inverted {
  background: var(--ink);
  color: #d6d2cb;
}
.inverted h1, .inverted h2, .inverted h3 { color: var(--paper); }
.inverted h4 { color: var(--paper); }
.inverted .split__label { color: var(--paper); border-top-color: var(--accent-bright); }
.inverted a { color: var(--paper); }
.inverted .small { color: #b5afa5; }
.inverted .pull { color: var(--paper); }

/* --------------------------------------------------------------- lists */

.stack > * + * { margin-top: clamp(2rem, 3.4vw, 3rem); }

.entry {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1rem, 3vw, 2.5rem);
}
.inverted .entry { border-top-color: var(--rule-dark); }
.entry h3 { margin: 0; }
.entry h4 { margin: 0; }

@media (max-width: 760px) {
  .entry { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Marker list: the Seen double tick used as the bullet */
.marks { list-style: none; margin: 0; padding: 0; }
.marks li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.55rem;
  max-width: var(--measure);
}
.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 1.25em;
  height: 0.58em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2058%2027%22%20fill%3D%22none%22%20stroke%3D%22%235c2a7e%22%20stroke-width%3D%225.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1.8%2017.6%20L11%2024.2%20L37.2%202.3%22%2F%3E%3Cpath%20d%3D%22M24.8%2021.6%20L28.2%2024.2%20L55.4%202.3%22%2F%3E%3C%2Fsvg%3E") no-repeat left center;
  background-size: contain;
}
.inverted .marks li::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2058%2027%22%20fill%3D%22none%22%20stroke%3D%22%23c79ae8%22%20stroke-width%3D%225.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1.8%2017.6%20L11%2024.2%20L37.2%202.3%22%2F%3E%3Cpath%20d%3D%22M24.8%2021.6%20L28.2%2024.2%20L55.4%202.3%22%2F%3E%3C%2Fsvg%3E");
}

/* Numbered sequence, used only where the content really is a sequence */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step;
  border-top: 1px solid var(--rule);
  padding: 1.1rem 0 1.1rem 3.2rem;
  position: relative;
  max-width: var(--measure);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--accent);
  line-height: 1;
}

/* --------------------------------------------------------------- cards */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.inverted .grid { border-top-color: var(--rule-dark); }

.grid > * {
  padding: 1.6rem 1.75rem 1.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.inverted .grid > * { border-bottom-color: var(--rule-dark); }

.title-card { padding-block: 2rem; }
.title-card__logo { width: 118px; margin-bottom: 1.1rem; }

.brand-logo { width: clamp(150px, 20vw, 196px); margin-bottom: 1.5rem; }

/* Heading kept for search engines and screen readers where the
   brand logo above it carries the same name visually. */
.visually-hidden-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.title-card__status {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.inverted .title-card__status { color: #c79ae8; }

/* --------------------------------------------------------------- contact */

.contact-lines { margin: 0 0 2rem; }
.contact-lines a { font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-optical-sizing: none; font-variation-settings: "opsz" 16, "wght" 500;
  color: var(--ink); text-decoration: none; line-height: 1.25; display: inline-block; }
.contact-lines a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.12em; }

/* --------------------------------------------------------------- forms */

.form { max-width: 640px; }
.field { margin-bottom: 1.3rem; }
.field label {
  display: block;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -2px;
}
.field textarea { min-height: 150px; resize: vertical; }

/* --------------------------------------------------------------- legal */

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-top: 2.4rem; }
.prose h2:first-of-type { margin-top: 1rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.45rem; max-width: var(--measure); }

/* --------------------------------------------------------------- footer */

.footer {
  background: var(--ink);
  color: #b5afa5;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  font-size: 0.92rem;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule-dark);
}
.footer__logo img { width: 210px; }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
}
.footer h4 {
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--paper);
  margin-bottom: 0.9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.45rem; }
.footer a { color: #cfc9bf; }
.footer a:hover { color: var(--paper); }
.footer__legal {
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  justify-content: space-between;
  font-size: 0.85rem;
}
.footer__legal p { margin: 0; max-width: none; }

@media (max-width: 800px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- page head */

.pagehead {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.pagehead h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); max-width: 17ch; }
.pagehead .lede { margin-top: 1.4rem; }

/* --------------------------------------------------------------- reveal */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal--in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}