/* DARK website. Brand: 01-Brand/DARK-Brandbook.html (the live dot, the wall, crew yellow).
   Mobile first: base styles are the phone layout; min-width queries add larger layouts. */

@font-face { font-family: "DARK Sans"; src: url("/fonts/dark-sans.woff2") format("woff2"); font-weight: 400 900; font-stretch: 100% 112.5%; font-display: swap; }
@font-face { font-family: "DARK Sans"; src: url("/fonts/dark-armenian.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: "DARK Mono"; src: url("/fonts/dark-mono.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --blackout: #0B0B0C;
  --blacks: #161618;
  --rule: #2C2C30;
  --haze: #94949A;
  --house: #F2EFE9;
  --house-ink: #5C5A57;
  --white: #FFFFFF;
  /* Crew yellow: crew and recruitment only, never next to the live red */
  --crew: #D7FF1F;
  --on-crew: #0B0B0C;

  --sans: "DARK Sans", "Noto Sans Armenian", system-ui, sans-serif;
  --mono: "DARK Mono", ui-monospace, Menlo, monospace;
  --gutter: 20px;
  --max: 1240px;
  --header: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip, not hidden: iOS Safari scrolls sideways past body { overflow-x: hidden }, and clip keeps body from becoming a scroll container, so the sticky header still sticks */
html { scroll-behavior: smooth; scroll-padding-top: var(--header); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.menu-open { overflow: hidden; }
body { margin: 0; background: var(--blackout); color: var(--white); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

html[data-lang="hy"] .en, html[data-lang="en"] .hy { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--white); color: var(--blackout); padding: 8px 14px; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.label { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--haze); }
h2 { font-weight: 850; font-stretch: 112.5%; font-size: clamp(2.5rem, 9vw, 6rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
/* A word too long for a phone (e.g. Armenian "աշխատանքներ" in the work heading) breaks instead of pushing the page sideways.
   break-word leaves layouts where words fit untouched. Grids widen to their longest word, so the hero columns are minmax(0, 1fr)
   and section headings may run into the right gutter, as before, but never past the screen edge */
h1, h2, h3, .band-lit, .nav a { overflow-wrap: break-word; }
.section-head h2 { max-width: calc(100vw - var(--gutter)); }
h3 { font-weight: 800; font-stretch: 112.5%; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.01em; }
.lead { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.45; color: var(--haze); max-width: 34em; }
.section { padding: clamp(72px, 11vw, 140px) 0; border-top: 1px solid var(--rule); }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
@media (min-width: 900px) { .section-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; background: var(--white); color: var(--blackout); transition: opacity .15s; }
.btn-ghost { background: transparent; color: var(--white); border: 1px solid var(--rule); }
.btn-crew { background: var(--crew); color: var(--on-crew); }
@media (hover: hover) { .btn:hover { opacity: .85; } .btn-ghost:hover { border-color: var(--haze); opacity: 1; } }


/* Header */
.site-header { position: sticky; top: 0; z-index: 40; height: var(--header); display: flex; align-items: center; gap: 16px; padding: 0 var(--gutter); border-bottom: 1px solid var(--rule); }
/* The blur sits on a pseudo-element: backdrop-filter on the header itself would make it the containing block of the fixed phone menu, which then shrinks to the header's height and lets the page show through */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 11, 12, .92); backdrop-filter: blur(10px); }
html.menu-open .site-header::before { background: var(--blackout); }
.brand { margin-right: auto; display: block; }
.brand svg { height: 22px; width: auto; }
.nav { position: fixed; inset: var(--header) 0 0; z-index: 35; display: flex; flex-direction: column; padding: 24px var(--gutter) 40px; background: var(--blackout); transform: translateY(-110%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .7, .1, 1), visibility 0s .35s; }
html.menu-open .nav { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .7, .1, 1); }
.nav a { font-weight: 850; font-stretch: 112.5%; font-size: 2rem; line-height: 1.1; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--rule); }
.nav .btn { margin-top: 24px; font-size: 1rem; font-stretch: 100%; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; padding: 3px; gap: 2px; background: var(--blacks); border: 1px solid var(--rule); cursor: pointer; font: 500 .75rem/1 var(--mono); color: var(--haze); }
.lang span { padding: 8px 8px; }
html[data-lang="hy"] .lang [data-l="hy"], html[data-lang="en"] .lang [data-l="en"] { background: var(--white); color: var(--blackout); }
.menu-btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; margin-right: -10px; }
.menu-btn i { display: block; width: 22px; height: 2px; background: var(--white); box-shadow: 0 -7px 0 var(--white), 0 7px 0 var(--white); transition: box-shadow .2s, transform .2s; }
html.menu-open .menu-btn i { box-shadow: none; transform: rotate(45deg); }
html.menu-open .menu-btn i::after { content: ""; display: block; width: 22px; height: 2px; background: var(--white); transform: rotate(-90deg); }
.header-cta { display: none; }
@media (min-width: 1020px) {
  .nav { position: static; transform: none; visibility: visible; flex-direction: row; align-items: center; gap: 26px; padding: 0; background: none; transition: none; }
  .nav a { font: 400 .9375rem/1 var(--sans); padding: 0; border: 0; color: var(--haze); }
  .nav a:hover { color: var(--white); }
  .nav .btn { display: none; }
  .menu-btn { display: none; }
  .header-cta { display: inline-flex; min-height: 40px; padding: 0 16px; font-size: .9375rem; }
}

/* The window: a photo or light seen through a straight opening in the black. Each option styles .win .fill */
.win { position: relative; overflow: hidden; background: var(--blackout); }
.win .fill { position: absolute; inset: 0; background-position: center; background-size: cover; transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }

/* Hero */
.hero { position: relative; min-height: calc(100svh - var(--header)); display: grid; overflow: hidden; }
.hero .win { position: absolute; inset: 0; }
.hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: 22px; padding-top: 48px; padding-bottom: clamp(36px, 6vw, 72px); }
.hero h1 { font-weight: 850; font-stretch: 112.5%; font-size: clamp(3rem, 12vw, 7.75rem); line-height: 1; letter-spacing: -.035em; }
@media (min-width: 900px) { .hero h1 { font-size: clamp(3rem, 7.6vw, 7.75rem); } }
/* The second half of the line is grey: what you don't see */
.hero h1 .en > span, .hero h1 .hy > span { color: var(--haze); }
.hero .lead { color: #D2D2D6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 100%; }
@media (min-width: 900px) { .hero-copy { max-width: 62%; } }

/* Trusted by */
.trust { padding: 36px 0; border-top: 1px solid var(--rule); }
.trust .wrap { display: grid; gap: 18px; }
@media (min-width: 900px) { .trust .wrap { grid-template-columns: 160px 1fr; align-items: center; } }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; }
.logos img { height: var(--h, 32px); width: auto; filter: brightness(0) invert(1); opacity: .72; }
.trust .more, .trust .more-btn { grid-column: 1 / -1; }
@media (min-width: 900px) { .trust .more, .trust .more-btn { grid-column: 2; } }

/* "See more": the extra logos, names and events. Open without JS; main.js folds them away */
.more { display: grid; gap: 32px; }
.more[hidden] { display: none; }
.name-groups { display: grid; gap: 28px; }
@media (min-width: 760px) { .name-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } .name-groups > :only-child { grid-column: 1 / -1; } }
.name-groups h3 { margin-bottom: 12px; }
.names { display: flex; flex-wrap: wrap; gap: 8px; }
.names li { padding: 7px 12px; border: 1px solid var(--rule); font-size: .9375rem; line-height: 1.3; }
.more-btn { justify-self: start; min-height: 44px; padding: 0 18px; background: transparent; color: var(--white); border: 1px solid var(--rule); font: inherit; font-weight: 700; cursor: pointer; }
.more-btn:hover { border-color: var(--haze); }
.more-btn::after { content: " ↓"; }
.more-btn[aria-expanded="true"]::after { content: " ↑"; }
#work .more { margin-top: 32px; }
#work .more-btn { margin-top: 24px; }

/* Services */
.services { display: grid; border-top: 1px solid var(--rule); }
.services li { display: grid; gap: 8px 32px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .services li { grid-template-columns: 80px 1fr 1fr; align-items: baseline; } }
.services .n { font-family: var(--mono); font-size: .8125rem; color: var(--haze); }
.services h3 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 850; letter-spacing: -.025em; }
.services p { color: var(--haze); max-width: 30em; }

/* Work */
.work { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .work { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .work { grid-template-columns: repeat(3, 1fr); } }
.work li { background: var(--blackout); position: relative; min-height: 260px; display: grid; align-content: space-between; padding: 22px; overflow: hidden; }
.work li .win { position: absolute; inset: 0; }
.work li > :not(.win) { position: relative; z-index: 1; }
.work h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 850; letter-spacing: -.02em; max-width: 60%; }
.work .meta { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--haze); }

/* How we work */
.steps { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.steps li { background: var(--blackout); padding: 24px 22px 28px; display: grid; gap: 12px; align-content: start; }
.steps .n { font-weight: 850; font-stretch: 112.5%; font-size: 3rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--haze); }
.steps p { color: var(--haze); font-size: 1rem; }

/* Why */
.promise { display: grid; gap: 32px; }
@media (min-width: 900px) { .promise { grid-template-columns: repeat(3, 1fr); } }
.promise li { display: grid; gap: 10px; padding-top: 18px; border-top: 2px solid var(--white); }
.promise p { color: var(--haze); }

/* Crew */
.crew { background: var(--crew); color: var(--on-crew); border-top: 0; }
.crew .label, .crew .lead { color: currentColor; opacity: .75; }
.crew-grid { display: grid; gap: 48px; }
@media (min-width: 1020px) { .crew-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.path { display: grid; gap: 12px; }
.path li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid currentColor; }
.path .n { font-weight: 850; font-stretch: 112.5%; font-size: 2rem; line-height: 1; }
.path h3 { margin-bottom: 4px; }
.crew .btn { background: var(--on-crew); color: var(--crew); }
.faq details { border-top: 1px solid currentColor; padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; font-family: var(--mono); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: 8px; opacity: .8; }
.crew-note { font-size: .875rem; opacity: .75; margin-top: 12px; }

/* Contact */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 1020px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
/* The three ways to work with us, each opening the request form (/proposal) */
.offers { align-content: start; }
.offers li { border-top-color: var(--rule); }
.offers h3 a { text-decoration: none; }
.offers h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.offers p { color: var(--haze); }
.contact-direct { display: grid; gap: 10px; margin-top: 28px; }
.contact-direct a { font-weight: 700; text-underline-offset: 4px; }

/* Footer */
.site-footer { padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
.footer-in { display: grid; gap: 24px; }
@media (min-width: 900px) { .footer-in { grid-template-columns: 1fr auto; align-items: end; } }
.footer-in svg { height: 28px; width: auto; }
.social { display: flex; flex-wrap: wrap; gap: 20px; }
.social a { text-decoration: none; color: var(--haze); }
.social a:hover { color: var(--white); }
.footnote { font-size: .8125rem; color: var(--haze); max-width: 60em; }
.footnote a { color: var(--haze); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- The wall: every job behind an event, dim, with one line lit ---------- */
.win { container-type: inline-size; }
.win .fill { display: none; }
.win::before { content: "PERMITS SUPPLIERS CABLES TIMING SECURITY BUDGET SOUNDCHECK GUEST LIST LOAD-IN RIDER CATERING TICKETS STAGE CREW CALL LIGHTS RUN OF SHOW RADIOS BACKUP POWER ACCREDITATION PARKING FIRST AID RAIN PLAN WRISTBANDS SIGNAGE TRANSFERS HOSPITALITY VIDEO RIGGING TEARDOWN CONTRACTS INSURANCE CUES BRIEFING DOORS PERMITS SUPPLIERS CABLES TIMING SECURITY BUDGET SOUNDCHECK GUEST LIST LOAD-IN RIDER CATERING TICKETS STAGE CREW CALL LIGHTS RUN OF SHOW RADIOS BACKUP POWER ACCREDITATION PARKING FIRST AID RAIN PLAN WRISTBANDS SIGNAGE TRANSFERS HOSPITALITY VIDEO RIGGING TEARDOWN CONTRACTS INSURANCE CUES BRIEFING DOORS PERMITS SUPPLIERS CABLES TIMING SECURITY BUDGET SOUNDCHECK GUEST LIST LOAD-IN RIDER CATERING TICKETS STAGE CREW CALL LIGHTS RUN OF SHOW RADIOS BACKUP POWER ACCREDITATION PARKING FIRST AID RAIN PLAN WRISTBANDS SIGNAGE TRANSFERS HOSPITALITY VIDEO RIGGING TEARDOWN CONTRACTS INSURANCE CUES BRIEFING DOORS PERMITS SUPPLIERS CABLES TIMING SECURITY BUDGET SOUNDCHECK GUEST LIST LOAD-IN RIDER CATERING TICKETS STAGE CREW CALL LIGHTS RUN OF SHOW RADIOS BACKUP POWER ACCREDITATION PARKING FIRST AID RAIN PLAN WRISTBANDS SIGNAGE TRANSFERS HOSPITALITY VIDEO RIGGING TEARDOWN CONTRACTS INSURANCE CUES BRIEFING DOORS PERMITS SUPPLIERS CABLES TIMING SECURITY BUDGET SOUNDCHECK GUEST LIST LOAD-IN RIDER CATERING TICKETS STAGE CREW CALL LIGHTS RUN OF SHOW RADIOS BACKUP POWER ACCREDITATION PARKING FIRST AID RAIN PLAN WRISTBANDS SIGNAGE TRANSFERS HOSPITALITY VIDEO RIGGING TEARDOWN CONTRACTS INSURANCE CUES BRIEFING DOORS "; position: absolute; inset: -1% -3%; font-weight: 850; font-stretch: 112.5%; font-size: max(9cqi, 40px); line-height: .9; letter-spacing: -.02em; word-spacing: .12em; color: rgba(255, 255, 255, .075); overflow: hidden; transition: opacity .6s ease; }
.win.is-closed::before { opacity: 0; }
.band { position: relative; height: clamp(320px, 50vw, 620px); border-top: 1px solid var(--rule); display: grid; align-items: center; }
.band .win { position: absolute; inset: 0; }
.band-lit { position: relative; z-index: 1; font-weight: 850; font-stretch: 112.5%; font-size: clamp(2.5rem, 8vw, 7rem); line-height: 1.02; letter-spacing: -.03em; }

/* The live dot blinks twice after load, like a camera starting to record */
@keyframes live { 0%, 49% { opacity: 1; } 50%, 99% { opacity: .1; } 100% { opacity: 1; } }
.brand .dot { animation: live .5s steps(1, end) 1s 4; }

/* Privacy policy: one readable column */
.legal { padding: clamp(48px, 8vw, 96px) 0; }
.legal .wrap { max-width: calc(44em + 2 * var(--gutter)); display: grid; gap: 20px; }
.legal h1 { font-weight: 850; font-stretch: 112.5%; font-size: clamp(1.875rem, 7vw, 4rem); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 12px; }
.legal section { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--rule); }
.legal h2 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.01em; }
.legal p { color: var(--haze); }
.legal a { color: var(--white); }