/* =========================================================
   Pattern A — Dark Cinematic  (loads after style.css)
   ========================================================= */
:root {
  --ink: #09090c;
  --ink-2: #111116;
  --ink-3: #1a1a22;
  --text: #f4f4f2;
  --muted: rgba(244, 244, 242, 0.58);
  --line: rgba(255, 255, 255, 0.12);
  --amber: #e9b44c;
  --navy: #191970;
  --font-en: "Inter Tight", "Manrope", system-ui, sans-serif;
}
body { background: var(--ink); color: var(--text); }
::selection { background: var(--amber); color: #111; }

/* grain */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-2%,3%)} 40%{transform:translate(3%,-1%)} 60%{transform:translate(-1%,-3%)} 80%{transform:translate(2%,2%)} 100%{transform:translate(0,0)} }

/* loader */
.loader { background: #000; }
.loader__bar { background: linear-gradient(90deg, transparent, var(--amber), transparent); }

/* header */
.header { color: #fff; }
.header::after { background: rgba(9, 9, 12, 0.7); border-bottom-color: var(--line); }
.header.is-solid { color: #fff; }
.header.is-solid .logo { color: #fff; }
.header.is-solid .btn--ghost { --fg: #fff; border-color: rgba(255,255,255,0.35); }
.nav__link { font-weight: 500; letter-spacing: 0.12em; font-size: 12px; text-transform: uppercase; }
.btn { --bg: #fff; --fg: #111; }
.btn::before { background: linear-gradient(120deg, var(--amber), #f6d68a); }
.btn:hover { color: #111; box-shadow: 0 14px 30px -12px rgba(233,180,76,0.5); }
.btn--ghost { --bg: transparent; --fg: #fff; }
.btn--ghost:hover { color: #111; }
.drawer { background: #000; }

/* hero */
.hero { background: #000; padding-bottom: 160px; align-items: end; }
.hero__video { opacity: 0.7; filter: saturate(0.85) contrast(1.08) brightness(0.85); transform: scale(1.04); animation: kb 30s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.04) translate(0,0); } to { transform: scale(1.14) translate(-1.5%, 1.5%); } }
.hero__shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.9) 100%);
}
.hero__frame {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero__frame::before, .hero__frame::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.14);
}
.hero__frame::before { top: calc(var(--header-h) + 8px); }
.hero__frame::after { bottom: 72px; }
.hero__meta {
  position: absolute; right: var(--gutter); top: calc(var(--header-h) + 28px);
  display: grid; gap: 6px; text-align: right;
  font-family: var(--font-en); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6;
}
.hero__meta b { font-weight: 500; }
.hero__rec { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.hero__rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.hero__eyebrow { color: var(--amber); }
.hero__eyebrow::before { background: var(--amber); }
.hero__title {
  font-size: clamp(40px, 8.6vw, 120px); line-height: 1.12; letter-spacing: 0.02em; font-weight: 700;
}
.hero__title .grad { background: none; -webkit-text-fill-color: #fff; color: #fff; animation: none; -webkit-text-stroke: 1.5px #fff; color: transparent; -webkit-text-fill-color: transparent; }
.hero__lead { font-size: clamp(14px, 1.1vw, 16px); opacity: 0.75; max-width: 520px; }
.hero__en {
  margin-top: 26px; font-family: var(--font-en); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.5;
}
.hero__scroll { bottom: 96px; }
.hero__marquee { border-top: 0; background: none; padding: 26px 0; }
.marquee__item { opacity: 0.45; font-weight: 500; font-size: 12px; letter-spacing: 0.3em; }
.marquee__item::after { background: var(--amber); width: 4px; height: 4px; }

/* sections */
.section--paper { background: var(--ink-2); }
.section--dark { background: #000; }
.sec-head__label { color: var(--amber); }
.sec-head__desc { color: var(--muted); }
.bg-text { -webkit-text-stroke: 1px rgba(255,255,255,0.07); }

/* statement */
.statement { padding: clamp(120px, 16vw, 220px) 0; text-align: center; }
.statement__q {
  font-size: clamp(26px, 4.4vw, 62px); line-height: 1.45; font-weight: 700; letter-spacing: 0.02em; text-wrap: balance;
}
.statement__q em { font-style: normal; color: var(--amber); }
.statement__sub { margin-top: 32px; color: var(--muted); font-family: var(--font-en); letter-spacing: 0.2em; font-size: 12px; text-transform: uppercase; }
.statement__line { width: 1px; height: 80px; margin: 40px auto 0; background: linear-gradient(180deg, var(--amber), transparent); }

/* about */
.about__title { font-size: clamp(26px, 3.2vw, 44px); }
.about__body { color: var(--muted); }
.about__media { border-radius: 4px; }
.about__badge { background: #000; color: #fff; border: 1px solid var(--line); box-shadow: none; }
.about__badge small { color: var(--muted); }
.reveal-img::after { background: #000; }

.values { background: var(--line); border-color: var(--line); border-radius: 4px; }
.value { background: var(--ink); }
.value::before { background: radial-gradient(circle, rgba(233,180,76,0.25), rgba(233,180,76,0) 70%); }
.value__num { color: var(--muted); }
.value__en { color: #fff; }
.value__desc { color: var(--muted); }

/* service — full-bleed rows */
.svc { border-top: 1px solid var(--line); }
.svc__row {
  position: relative; display: grid; grid-template-columns: 90px 1fr 1.1fr; gap: 40px; align-items: center;
  padding: 56px 0; border-bottom: 1px solid var(--line); overflow: hidden;
  transition: padding 0.6s var(--ease);
}
.svc__row:hover { padding-left: 16px; }
.svc__num { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.2em; color: var(--amber); }
.svc__en { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.svc__title { margin-top: 10px; font-size: clamp(24px, 3vw, 40px); font-weight: 700; line-height: 1.3; }
.svc__title small { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.svc__desc { margin-top: 18px; color: var(--muted); font-size: 14px; max-width: 480px; }
.svc__tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc__tags li { font-size: 11px; letter-spacing: 0.06em; padding: 6px 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); }
.svc__links { margin-top: 24px; }
.link-arrow { color: #fff; }
.link-arrow .circ { border-color: rgba(255,255,255,0.4); }
.link-arrow:hover .circ { background: #fff; color: #111; }
.svc__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000; }
.svc__media img, .svc__media video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.05); transform: scale(1.06); transition: transform 1.2s var(--ease), filter 0.8s var(--ease); }
.svc__row:hover .svc__media img, .svc__row:hover .svc__media video { transform: scale(1); filter: none; }
.svc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6)); }
.svc__cap { position: absolute; left: 18px; bottom: 16px; z-index: 1; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; }

/* film strip */
.strip { position: relative; height: clamp(320px, 56vw, 720px); overflow: hidden; background: #000; }
.strip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.strip::before, .strip::after { content: ""; position: absolute; left: 0; right: 0; height: 14%; background: #000; z-index: 1; }
.strip::before { top: 0; } .strip::after { bottom: 0; }
.strip__txt {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center;
  font-size: clamp(22px, 3.6vw, 48px); font-weight: 700; letter-spacing: 0.06em; text-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.strip__txt small { display: block; margin-top: 14px; font-family: var(--font-en); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; font-weight: 500; }

/* flow */
.flow__grid::before { background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); }
.step__dot { background: #000; }
.step__dot::after { border-color: rgba(233,180,76,0.5); }
.step__en { background: linear-gradient(120deg, #fff, var(--amber)); -webkit-background-clip: text; background-clip: text; }
.step__desc { color: var(--muted); }

/* company */
.company__dl > div { border-color: var(--line); }
.company__dl dt { color: var(--muted); }
.company__map { border-radius: 4px; background: var(--ink-3); }
.company__map iframe { filter: grayscale(1) invert(0.92) contrast(0.9) brightness(0.9); }
.company__map:hover iframe { filter: grayscale(1) invert(0.92) contrast(0.9) brightness(1); }
.company__map .pin { background: rgba(9,9,12,0.85); color: #fff; }
.company__map .pin b { color: var(--amber); }

/* news */
.news__item { border-color: var(--line); }
.news__date { color: var(--muted); }
.news__cat { border-color: var(--line); color: var(--amber); }
.news__item .circ { border-color: var(--line); color: #fff; }
.news__item:hover .circ { background: #fff; border-color: #fff; color: #111; }
.news__note { color: var(--muted); }

/* cta */
.cta { background: #000; }
.cta__img { position: absolute; inset: 0; z-index: -1; }
.cta__img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.cta__shade { background: linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.3)); }
.cta__actions small { color: var(--muted); }

/* footer */
.footer { background: #000; border-top: 1px solid var(--line); }

/* glow */
.glow { background: radial-gradient(circle, rgba(233,180,76,0.12), rgba(233,180,76,0) 65%); mix-blend-mode: screen; }

@media (max-width: 1024px) {
  .svc__row { grid-template-columns: 60px 1fr; }
  .svc__media { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hero { align-items: center; }
  .hero__meta { display: none; }
  .hero__title { font-size: clamp(36px, 11vw, 60px); }
  .svc__row { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .svc__row:hover { padding-left: 0; }
  .svc__media { order: -1; }
}