/* AEZZE site frame — paper, blue, black; hard square boxes, thick rules.
   Source: the AEZZE Design System (claude.ai/design, "AEZZE Design System"), reconciled
   14 Sep 2026 as follows —
     inks:      the public ones win, so the Velocity end frame hands off seamlessly:
                blue #0033FF (DS: #2323ff), black #000 (DS: #0a0a0a), paper #F7F4EB (DS: #fbfbf8).
     structure: the DS wins — 4px structural border, 2px hairline, radius 0, no depth.
     type:      the DS wins — Anybody italic 900 (display, exceptional), Archivo Black caps
                (headings), Archivo 500 (body, inputs), Space Mono 700 caps (labels).
     motion:    the DS wins — FLIP 90ms, WIPE 180ms, REVEAL 320ms, one mechanical curve.
   Channel pages keep their own design systems, scoped under .channel--* (channels.css). */
:root {
  --blue: #0033FF;
  --ink: #000000;
  --paper: #F7F4EB;
  --paper-low: #EDE9DD;
  --muted: #5A5C6B;
  --error: #C4001A;
  --rule-w: 4px;
  --hair-w: 2px;
  --rule: var(--rule-w) solid var(--ink);
  --hair: var(--hair-w) solid var(--ink);
  --display: "Anybody", "Archivo Black", "Arial Black", sans-serif;
  --heading: "Archivo Black", "Arial Black", Impact, sans-serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --label: "Space Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 72px);
  --max: min(2040px, 94vw);
  --u: 4px;
  --ease: cubic-bezier(.16, .84, .34, 1);
  --dur-1: 90ms;   /* FLIP   — colour changes */
  --dur-2: 180ms;  /* WIPE   — a hard fill grows from an edge */
  --dur-3: 320ms;  /* REVEAL — a panel opens */
  --flip: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  --hatch: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 7px);
  /* the highlight inks: a drawer of Risograph inks beside the blue (sunflower, teal, purple,
     scarlet). --sun lights a word; the four service inks belong to the Reel */
  --sun: #FFB511; --teal: #00838A; --purple: #765BA7; --scarlet: #F15058;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 500 1.0625rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
  min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--blue); color: var(--paper); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* --- type roles ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--heading); font-weight: 400; text-transform: uppercase;
  letter-spacing: -.02em; line-height: .95; margin: 0;
}
h1 { font-size: clamp(2.6rem, 8vw, 5.5rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.display { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: none; letter-spacing: -.02em; line-height: .8; color: var(--blue); }
.label, .kicker {
  font: 700 .75rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase;
}
.kicker { display: inline-block; background: var(--ink); color: var(--paper); padding: 7px 9px; margin: 0 0 20px; }
.lede { font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.45; max-width: 44ch; margin: 22px 0 0; }
p { max-width: 60ch; }
.muted { color: var(--muted); }

/* --- the dock: there is no top bar. The mark and the three words ride in a paper pill (the
   site's own shape) fixed at the foot of the window; it grows a little under the pointer or with
   focus inside. Every page that carries it keeps --dock clear at its foot, so nothing ends under
   it. Phone: the mark on a row of its own over the words; desktop and landscape phones: one row.
   The pill is printed like the rest of the page, in the page's own ink (--dock-ink, with
   --dock-on for type on it; the AEZZE blue where a page has no ink of its own): a hard offset
   print of that ink off register under the black keyline, the same 4px halftone the page's
   grounds use lifting its top left, and the page's own word lit on a block of that ink, the
   way the logotype lights a word. The Reel and the Switcher pass the ink of the service or
   channel that is up (reel.css, switcher.css), so the dock changes with the page. --- */
:root { --dock: 136px; --dock-ink: var(--blue); --dock-on: var(--paper); }
body[data-page="work-with-us"] { --dock-ink: var(--sun); --dock-on: var(--ink); }
body[data-page="aezze-tv"] { --dock-ink: #f0b21f; --dock-on: #000; }
body[data-page="travelers-place"] { --dock-ink: #8BA7C8; --dock-on: #2D3438; }
body[data-page="toofani-town"] { --dock-ink: #A32A20; --dock-on: #F5F1E6; }
body[data-page="maximal-bharat"] { --dock-ink: #DFAB4A; --dock-on: #4A2356; }
body:has(> .bar) { padding-bottom: calc(var(--dock) + env(safe-area-inset-bottom, 0px)); }
.bar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20; translate: -50% 0;
  width: max-content; max-width: calc(100% - 24px);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 24px;
  padding: 12px 22px 12px; border: var(--rule); border-radius: 999px; background: var(--paper);
  box-shadow: 6px 6px 0 var(--dock-ink);
  transform-origin: 50% 100%; transition: scale var(--dur-2) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.bar:hover, .bar:focus-within { scale: 1.08; }
.bar::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--dock-ink) 50%, transparent) .9px, transparent 1.1px); background-size: 4px 4px;
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 60%); mask-image: linear-gradient(160deg, #000 0%, transparent 60%);
}
.bar-mark { position: relative; flex: none; display: flex; justify-content: center; flex-basis: 100%; text-decoration: none; }
.bar-mark .mark { width: 136px; }
.bar-mark .mark path { stroke-width: 7; }
/* the words: sized to the window on a phone, so the three fit a 320px screen on one row */
.bar-nav { position: relative; display: flex; gap: clamp(2px, 1.6vw, 10px); }
.bar-nav a {
  font: 700 clamp(.6875rem, 3.5vw, .875rem)/1 var(--label); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  text-decoration: none; padding: 7px 7px 6px 8px; transition: var(--flip), box-shadow var(--dur-1) var(--ease);
}
.bar-nav a:hover { box-shadow: inset 0 -4px 0 var(--dock-ink); }
.bar-nav a[aria-current="page"] { background: var(--dock-ink); color: var(--dock-on); box-shadow: none; }
@media (min-width: 900px), (max-height: 479px) {
  :root { --dock: 108px; }
  .bar { flex-wrap: nowrap; gap: 24px; padding: 12px 28px 12px 30px; }
  .bar-mark { flex-basis: auto; }
  .bar-nav { gap: 12px; }
}

/* --- page heads and sections ---------------------------------------------- */
.page-head { padding-block: clamp(40px, 7vw, 88px) clamp(28px, 4vw, 48px); }
.section { padding-block: clamp(36px, 6vw, 72px); border-top: var(--rule); }
.section-title { margin-bottom: 24px; }
.index { font: 700 .75rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* --- buttons: wipe from the bottom, flip the text -------------------------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  padding: 12px 20px; border: var(--rule); background: var(--paper); color: var(--ink);
  font: 700 .8125rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: var(--flip);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue);
  transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-2) var(--ease);
}
.btn:hover { color: var(--paper); border-color: var(--blue); }
.btn:hover::before { transform: scaleY(1); }
.btn:active::before { transition-duration: 0ms; }
.btn--solid { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.btn--solid::before { background: var(--ink); }
.btn--solid:hover { border-color: var(--ink); }
.btn[disabled] { opacity: .5; cursor: progress; }
.arrow { display: inline-block; transition: transform var(--dur-2) var(--ease); }
a:hover .arrow, button:hover .arrow { transform: translateX(8px); }

/* --- status plates --------------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: 8px; border: var(--hair); padding: 6px 9px;
  font: 700 .6875rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase;
}
.status::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.status--open::before { background: var(--blue); }
.status--pending::before { background: transparent; border: 2px solid currentColor; }

/* --- forms ----------------------------------------------------------------- */
.form { display: grid; gap: 20px; max-width: 760px; }
.field { display: grid; gap: 8px; }
.field > span, .form legend { font: 700 .75rem/1.2 var(--label); text-transform: uppercase; letter-spacing: .1em; }
.field-hint { font: 400 .8125rem/1.45 var(--label); color: var(--muted); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"], .form select, .form textarea {
  width: 100%; font: 500 1rem/1.4 var(--text); color: var(--ink); background: #fff;
  border: var(--rule); border-radius: 0; padding: 12px 14px; min-height: 52px;
  transition: border-color var(--dur-1) var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--blue); }
.form textarea { min-height: 150px; resize: vertical; }
.form fieldset { border: var(--rule); margin: 0; padding: 18px; }
.checks { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.checks label { display: flex; gap: 10px; align-items: center; cursor: pointer; padding: 10px 6px; transition: var(--flip); }
.checks label:has(input:checked) { background: var(--ink); color: var(--paper); }
.checks input { width: 22px; height: 22px; accent-color: var(--blue); flex: none; margin: 0; }
.form [aria-invalid="true"] { border-color: var(--error); }
.form-status { font: 700 .875rem/1.4 var(--label); min-height: 1.4em; margin: 0; }
.form-status[data-kind="error"] { color: var(--error); }
.form-done { border: var(--rule); padding: clamp(24px, 4vw, 40px); background: var(--blue); color: var(--paper); max-width: 760px; }
.form-done h3 { color: var(--paper); font-size: clamp(2rem, 6vw, 3.5rem); }
.form-done:focus { outline: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.step { display: grid; gap: 18px; border-top: var(--hair); padding-top: 18px; }
.step-no { font: 700 .75rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }


/* --- reveal: panels open on grid rows, 0fr to 1fr -------------------------- */
.reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease); }
.reveal > * { overflow: hidden; min-height: 0; }
.reveal.is-open { grid-template-rows: 1fr; }

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



/* ============================================================================
   THE BACKGROUND — one faint giant pill, the same on every page.
   Fixed to the window so it never scrolls away; hatch at half ink, so it reads
   through the paper without competing with type. It prints itself in on load
   (on Home, the moment the opening ends) and then sways. 15 s, not the mockup's
   45 s: at 45 s the edge crept 21 px in 5 s and the even stripes hid the turn,
   so it read as frozen. On tall screens it stands more upright and swings wider.
   ========================================================================== */
.bg-pill {
  position: fixed; z-index: -1; left: 50%; top: 52%;
  width: 104vw; aspect-ratio: 1200 / 500; translate: -50% -50%; pointer-events: none;
}
.bg-pill-sway { width: 100%; height: 100%; animation: pill-sway 15s ease-in-out infinite alternate; }
.bg-pill-ink {
  width: 100%; height: 100%; border-radius: 9999px;
  background: repeating-linear-gradient(45deg, var(--pill-ink, rgb(0 0 0 / .12)) 0 1.5px, transparent 1.5px 13px);
}
html:not(.intro-pending) .bg-pill-ink { animation: pill-print var(--dur-3) var(--ease) both; }
.intro-pending .bg-pill { visibility: hidden; }
@keyframes pill-sway { from { transform: rotate(-22deg); } to { transform: rotate(-10deg); } }
@keyframes pill-sway-tall { from { transform: rotate(-64deg); } to { transform: rotate(-48deg); } }
@keyframes pill-print { from { clip-path: inset(-30% 100% -30% -30%); } to { clip-path: inset(-30%); } }
@media (max-aspect-ratio: 4/5) {
  .bg-pill { top: 50%; width: 132vw; }
  .bg-pill-sway { animation-name: pill-sway-tall; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-pill-sway, .bg-pill-ink { animation: none; }
  .home-mark path, .home-mark g { transition: none; }
}

/* ============================================================================
   THE LOGO — one mark everywhere (Home, every top bar, the icon). The letters
   sit 8 units tighter than the drawn file (7% narrower overall); on Home they
   start at the opening's spacing and draw together as the outline inks in.
   ========================================================================== */
.mark { display: block; width: 100%; height: auto; overflow: visible; }
.mark path {
  fill: var(--blue); fill-rule: evenodd;
  stroke: var(--ink); stroke-width: 6; stroke-linejoin: miter;
  transform: translateX(calc(var(--i) * -8px));
}

/* ============================================================================
   HOME. The opening's picture stays as the page: a sunflower
   table with three drawn pills, one a door (intro/engine.js draws them, and
   keeps drawing at rest). The page's three links are laid over the drawn pills
   by velocity.js and show nothing themselves but a focus ring. The page's own
   wordmark sits over the drawn one at the top and inks in its outline once the
   picture is at rest. Without a picture (.no-picture: no WebGL, assets late)
   the page stands on its own: the mark, a CSS burst, three plain doors.
   ========================================================================== */
.home { position: relative; min-height: 100svh; overflow: hidden; }
.home-burst {
  position: fixed; z-index: -1; left: 50%; top: 60%; width: 260vmax; height: 260vmax; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, var(--ink) 0 .45deg, transparent .45deg 4.3deg, var(--blue) 4.3deg 4.75deg, transparent 4.75deg 8.6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 13%, #000 38%); mask: radial-gradient(circle, transparent 0 13%, #000 38%);
  opacity: 0; animation: burst-turn 240s linear infinite;
}
@keyframes burst-turn { to { rotate: 360deg; } }
.no-picture .home-burst { opacity: .5; }
/* The mark: 3.309 × --wm-size matches the blue of the drawn wordmark at the opening's own
   spacing, at --wm-top (velocity.js: where the word lands); the letters then draw 7% tighter as
   the outline inks in. Until the picture rests the page's mark is hidden (the drawn one shows). */
.home-mark {
  position: absolute; left: 50%; top: var(--wm-top, 22%); margin: 0; line-height: 0;
  width: calc(var(--wm-size, min(26svh, 23vw)) * 3.309);
  transform: translate(-50%, -50%);
}
.home-mark path { transition: transform var(--dur-3) var(--ease), stroke-opacity var(--dur-3) var(--ease); }
.home-mark g { transition: transform var(--dur-3) var(--ease); }
.intro-pending .home-mark path { transform: none; stroke-opacity: 0; }
.intro-pending .home-mark g { transform: translateX(-16px); }
.intro-pending .home-mark { visibility: hidden; }
/* Content lab — a line over the mark */
.home-tag {
  position: absolute; left: 50%; top: calc(var(--wm-top, 22%) - var(--wm-size, min(26svh, 23vw)) * .46 - clamp(26px, 4svh, 40px)); transform: translateX(-50%);
  margin: 0; display: flex; align-items: center; gap: 14px;
  font: 700 clamp(.6875rem, .9vw, .875rem)/1 var(--label);
  letter-spacing: .38em; text-transform: uppercase; white-space: nowrap;
  transition: opacity var(--dur-3) var(--ease) 200ms;
}
.home-tag i { width: clamp(24px, 3vw, 44px); height: 2px; background: var(--ink); }
.intro-pending .home-tag { opacity: 0; transition: none; }
/* the doors: laid over the drawn pills (velocity.js sets left/top/width/height); the nav itself
   spans the page and lets the pointer through */
.home-doors { position: absolute; inset: 0; pointer-events: none; }
.home-doors a { pointer-events: auto; }
.home-doors a {
  position: absolute; display: block; border-radius: 999px; color: transparent; font-size: 0;
  text-decoration: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.home-doors a:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.intro-pending .home-doors { visibility: hidden; }
/* no picture: three plain doors under the mark, the mark at the top */
.no-picture .home-mark { top: calc(clamp(48px, 8svh, 112px) + var(--wm-size, min(26svh, 23vw)) * .46); }
.no-picture .home-tag { top: calc(clamp(48px, 8svh, 112px) - clamp(26px, 4svh, 40px)); }
.no-picture .home-doors {
  position: absolute; inset: auto; left: var(--gutter); right: var(--gutter); pointer-events: auto;
  top: calc(clamp(48px, 8svh, 112px) + var(--wm-size, min(26svh, 23vw)) * .92 + clamp(20px, 4svh, 44px));
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
}
.no-picture .home-doors a {
  position: static; border-radius: 0; color: var(--ink); font: 700 .875rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase;
  min-width: 180px; padding: 16px 22px; border: var(--rule); text-align: center; background: var(--paper); transition: var(--flip);
  width: auto !important; height: auto !important; left: auto !important; top: auto !important;
}
.no-picture .home-doors a + a { margin-left: calc(var(--rule-w) * -1); }
.no-picture .home-doors a:hover { background: var(--blue); color: var(--paper); }
@media (max-width: 560px) {
  .no-picture .home-doors { flex-direction: column; align-items: center; }
  .no-picture .home-doors a { width: min(100%, 280px) !important; }
  .no-picture .home-doors a + a { margin-left: 0; margin-top: calc(var(--rule-w) * -1); }
}
@media (prefers-reduced-motion: reduce) {
  .home-burst { animation: none; }
  .home-mark path, .home-mark g, .home-tag { transition: none; }
}

/* --- media galleries (clips appear only once approved) -------------------- */
.media-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.media-grid figure { margin: 0; display: grid; gap: 8px; }
.media-grid video, .media-grid img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink); border: var(--rule); }
.media-grid figcaption { font: 400 .8125rem/1.4 var(--label); }

/* Big monitors: hold the type to the screen, not to a 1240 px column, so the
   page fills a 27" display the way it fills a laptop. */
@media (min-width: 1600px) { html { font-size: 112.5%; } }
@media (min-width: 2100px) { html { font-size: 125%; } }
@media (min-width: 2600px) { html { font-size: 137.5%; } }