/* ==========================================================================
   NNP RAISINS — CONTACT PAGE, v2 THE SAMPLE BOX (2026-09-22). Loaded by
   contacts/index.html only, after site.css.

   THE SAMPLE IS THE VISUAL. His brief: "form has to appear immediately,
   required blanks have to have this *, again, lets see what you are capable
   of." Every page its own idea, in the dark family (Products the bench,
   Certification the desk, News the map, Production the film, Tracking the
   journey). For an exporter every enquiry ends in a sample and a quote, so
   the page is the sample box: the form is in view from the first pixel on
   the right, and on the left a carton with a shipping label fills itself in
   as the buyer types - company, name, country, destination - and the
   variety they choose appears on the box. Then the two channels and the two
   addresses with their map sheets. No closing call to action: his rule of
   2026-08-15, a contact page IS the call to action.

   v1 (paper: hero, violet strip, addresses + form) is
   archives/contacts-index-v1-2026-09-22.html.

   ⚠ HIS LAPTOP IS 1270×680: headline, box and the WHOLE form fit one screen.
   ⚠ FIELD NAMES ARE mail.php's AND THE HOME FORM's. Do not rename one here.
   ========================================================================== */

/* ------------------------------------------------------------- page ---- */
.cs { --cs-bg: #08060e; --cs-line: rgba(242,237,248,.14); --cs-glass: rgba(242,237,248,.06); --cs-r: 16px;
      --cs-paper: #f3f0e7; --cs-ink: #1b1622; --cs-box: #4b1e78; --cs-box-dp: #33134f; --cs-box-lt: #6a2fa6;
      background: var(--cs-bg); color: var(--chalk); overflow-x: clip; }
.cs-dark-page, .cs-dark-page body { background: #08060e; }
.cs-dark-page body { padding-top: 0; }

/* ------------------------------------------------------- masthead ---- */
.cs-dark-page .masthead:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.cs-dark-page .masthead.is-stuck { background: rgba(14,7,28,.42); border-bottom-color: rgba(242,237,248,.12);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .cs-dark-page .masthead.is-stuck { background: rgba(14,7,28,.86); }
}
.cs-dark-page .masthead .brand { color: #fff; }
.cs-dark-page .masthead .navtoggle { color: #fff; border-color: rgba(255,255,255,.35); }
@media (min-width: 1001px) {
  .cs-dark-page .masthead .mainnav a:not(.btn) { color: var(--chalk-dim); }
  .cs-dark-page .masthead .mainnav a:not(.btn):hover,
  .cs-dark-page .masthead .mainnav a:not(.btn)[aria-current="page"] { color: #fff; }
  .cs-dark-page .masthead .btn-primary { background: var(--chalk); color: var(--violet-dp); }
  .cs-dark-page .masthead .btn-primary::before { background: #fff; }
  .cs-dark-page .masthead :focus-visible { outline-color: #fff; }
}

/* ------------------------------------------------------------- type ---- */
.cs-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 14px; }
.cs-h1 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(40px, 8.4vh, 84px); line-height: .92; letter-spacing: -.045em; margin: 0 0 14px; text-shadow: 0 12px 50px rgba(0,0,0,.6); }
.cs-h1 .accent { color: var(--violet-lt); }
.cs-lead { margin: 0; font-size: clamp(14.5px, 1.2vw, 17px); line-height: 1.55; color: var(--chalk-dim); max-width: 44ch; }
.cs-h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(30px, 5.6vh, 52px); line-height: .96; letter-spacing: -.04em; margin: 0 0 12px; }
.cs-glass { background: rgba(14,10,22,.55); border: 1px solid var(--cs-line); border-radius: var(--cs-r);
  box-shadow: 0 1px 0 rgba(242,237,248,.06) inset, 0 40px 80px -30px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.btn-ghost-light { background: transparent; color: var(--chalk); border: 1px solid rgba(242,237,248,.38); }
.btn-ghost-light:hover { border-color: var(--chalk); background: rgba(242,237,248,.08); }

/* ============================================================== HALL ====
   The first screen: the words and the box on the left, the form on the
   right, both in view at once. */
.cs-hall { position: relative; min-height: 100vh; display: grid; align-content: center; padding: 96px 0 40px; overflow: hidden;
  background: radial-gradient(ellipse at 22% 70%, #1a1230 0%, #0c0816 45%, #08060e 100%); }
.cs-hall > .wrap { width: 100%; box-sizing: border-box; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.cs-intro { display: grid; gap: 0; }

/* THE BOX: a carton in three faces, a label on the front that mirrors the
   form, the chosen variety on the lid. Tilts with the pointer. */
.cs-scene { position: relative; height: clamp(250px, 40vh, 340px); margin-top: clamp(18px, 3vh, 30px); perspective: 1100px; }
.cs-box { position: absolute; left: 58%; bottom: 8%; width: min(72%, 380px); aspect-ratio: 400 / 230; transform-style: preserve-3d;
  /* rx +8: the top edge goes away and we look down on the lid; ry -22: the
   right side comes forward so its face shows (the first build had both signs
   the other way and the carton read as a flat card) */
  transform: translate(-50%, 0) rotateX(var(--rx, 8deg)) rotateY(var(--ry, -22deg)); will-change: transform; }
.js .cs-box { transition: transform .5s cubic-bezier(.22,.9,.3,1); }
.cs-face { position: absolute; inset: 0; border-radius: 4px; }
.cs-front { background: linear-gradient(160deg, #5a2590 0%, var(--cs-box) 45%, var(--cs-box-dp) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(0,0,0,.5) inset, 0 60px 80px -30px rgba(0,0,0,.95); overflow: hidden; }
.cs-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 60%); }
.cs-side { width: 28%; left: auto; right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg);
  background: linear-gradient(180deg, var(--cs-box-dp), #23103a); box-shadow: -8px 0 20px rgba(0,0,0,.4) inset; }
.cs-top { height: 28%; top: auto; bottom: 100%; transform-origin: 50% 100%; transform: rotateX(90deg);
  background: linear-gradient(180deg, #6a2fa6, #55229a); }
.cs-top::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.35); }
/* the mark and the word on the front */
.cs-mark { position: absolute; left: 22px; top: 18px; width: 92px; color: #fff; }
.cs-mark svg { display: block; width: 100%; height: auto; }
/* wraps inside the space left of the label: the last letter ran under the label (his flag) */
.cs-word { position: absolute; left: 22px; bottom: 16px; max-width: calc(46% - 34px); font-family: var(--mono); font-size: 10px; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7); }
/* THE LABEL on the front: paper, typed lines, filled by the form */
.cs-label { position: absolute; right: 18px; top: 16px; bottom: 16px; width: 54%; background: var(--cs-paper); color: var(--cs-ink); border-radius: 3px; padding: 12px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.15); display: grid; align-content: start; gap: 7px; transform: rotate(-.6deg); }
.cs-label::before { content: 'SAMPLE · SAMARKAND → '; font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; color: #6b6478; }
.cs-line { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 11.5px; line-height: 1.25; min-height: 14px; }
.cs-line span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #6b6478; }
.cs-line b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--cs-ink); border-bottom: 1px dotted rgba(27,22,34,.45); min-height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cs-line b:empty::before { content: '\00a0'; }
.cs-line b.is-set { border-bottom-color: transparent; }
.cs-line.is-from b { color: var(--cs-box); border-bottom: 0; }
/* the variety on the lid */
/* the sample on the floor beside the box (a pile pasted on the tilted lid read
   as a ball floating in front of the carton, his flag) */
.cs-pile { position: absolute; left: 0; bottom: 4%; width: 30%; aspect-ratio: 1; transform: translateY(14px) scale(.92); opacity: 0; pointer-events: none; }
.cs-pile img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 22px 16px rgba(0,0,0,.6)); }
.js .cs-pile { transition: opacity .5s ease, transform .6s cubic-bezier(.22,.9,.3,1); }
.cs-pile.is-on { opacity: 1; transform: translateY(0) scale(1); }
/* the floor: a soft shadow and the glow */
.cs-floor { position: absolute; left: 50%; bottom: 2%; width: 70%; height: 24px; transform: translateX(-50%); border-radius: 50%; background: rgba(0,0,0,.7); filter: blur(12px); }
.cs-glow { position: absolute; left: 50%; bottom: -10%; width: 110%; height: 60%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(226,183,255,.16) 0%, rgba(226,183,255,0) 65%); filter: blur(10px); pointer-events: none; }

/* THE FORM: in view from the first pixel */
.cs-form { padding: clamp(18px, 2.6vh, 26px) clamp(18px, 2.2vw, 26px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.cs-form .cs-h2 { grid-column: 1 / -1; margin-bottom: 0; font-size: clamp(24px, 4.2vh, 34px); }
.cs-form .cs-sub { grid-column: 1 / -1; margin: -4px 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--chalk-dim); }
/* ⚠ `align-content: start`, 2026-09-23. A field is a grid, and a grid stretches
   its rows to fill the cell; the Product cell shares a row with Destination,
   which is taller by its hint, so the Product label row grew and the select
   sat 18px below the input beside it (his PC screenshot). */
.cs-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
/* the unpicked select reads as a placeholder, like the textarea beside it */
.cs-field select:has(option[value=""]:checked) { color: var(--chalk-dim); }
.cs-field.is-full { grid-column: 1 / -1; }
.cs-field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); }
.cs-field label i { font-style: normal; color: var(--violet-lt); margin-left: 3px; }
.cs-field input, .cs-field select, .cs-field textarea { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(242,237,248,.16);
  background: rgba(8,6,14,.55); color: #fff; font: inherit; font-size: 14.5px; transition: border-color .2s ease, background-color .2s ease; }
.cs-field textarea { height: auto; min-height: 66px; padding: 10px 12px; resize: vertical; line-height: 1.4; }
.cs-field select { -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--chalk-dim) 50%), linear-gradient(135deg, var(--chalk-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.cs-field select option { background: #14101d; color: #fff; }
.cs-field input::placeholder, .cs-field textarea::placeholder { color: rgba(242,237,248,.3); }
.cs-field input:focus, .cs-field select:focus, .cs-field textarea:focus { outline: 2px solid var(--violet-lt); outline-offset: 1px; border-color: var(--violet-lt); background: rgba(8,6,14,.8); }
.cs-field.is-missing input, .cs-field.is-missing select { border-color: #ff8a8a; background: rgba(120,20,30,.25); }
.cs-field .cs-hint { font-size: 11.5px; line-height: 1.35; color: var(--chalk-dim); }
.cs-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.cs-req { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim); }
.cs-req i { font-style: normal; color: var(--violet-lt); }
.cs-foot .btn-light { height: 46px; padding-inline: 26px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================= LINES ====
   The two channels, big; WhatsApp is the number. */
.cs-lines { padding: clamp(56px, 9vh, 96px) 0 0; }
.cs-lines .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cs-lineCard { display: grid; gap: 10px; padding: clamp(22px, 3vh, 30px) clamp(22px, 2.4vw, 32px); text-decoration: none; color: inherit; transition: border-color .3s ease, transform .4s var(--ease-out); }
.cs-lineCard:hover { border-color: rgba(226,183,255,.5); transform: translateY(-3px); }
.cs-lineCard b { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4.4vh, 40px); letter-spacing: -.03em; line-height: 1; color: #fff; word-break: break-word; }
.cs-lineCard .cs-sub { margin: 0; font-size: 13.5px; color: var(--chalk-dim); }

/* ============================================================ PLACES ====
   The two addresses with their map sheets. */
.cs-places { padding: clamp(56px, 9vh, 96px) 0 clamp(72px, 11vh, 120px); }
.cs-places .cs-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.cs-addr { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cs-addr li { padding: clamp(20px, 3vh, 26px) clamp(20px, 2.4vw, 28px); display: grid; gap: 8px; }
.cs-addr address { font-style: normal; font-size: 15px; line-height: 1.5; color: #fff; }
/* the ghost button is drawn for paper (ink on ink here): re-drawn for the dark ground */
.cs-addr .mapbtn { justify-self: start; margin-top: 6px; background: transparent; color: var(--chalk); border: 1px solid rgba(242,237,248,.38); }
.cs-addr .mapbtn::before { background: rgba(242,237,248,.12); }
.cs-addr .mapbtn:hover, .cs-addr .mapbtn:focus-visible { color: #fff; border-color: #fff; }
.cs-addr .mapbtn svg { stroke: currentColor; }

/* the country, dotted, with the two addresses pinned: fills the left column
   under the words (his note: "map section feels empty") */
.cs-map { display: block; width: 100%; height: auto; margin-top: clamp(18px, 3vh, 28px); overflow: visible; }
.cs-map-edge { fill: none; stroke: rgba(226,183,255,.35); stroke-width: 1.2; stroke-linejoin: round; }
.cs-pin circle { fill: #fff; }
.cs-pin .cs-pin-halo { fill: rgba(226,183,255,.22); }
.cs-pin text { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.01em; fill: #fff; }
.cs-pin .cs-pin-sub { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; fill: var(--chalk-dim); }

/* ----------------------------------------------------------- short ----
   His laptop: 1270×680. */
@media (min-width: 901px) and (max-height: 760px) {
  .cs-hall { padding-top: 84px; padding-bottom: 24px; }
  .cs-h1 { font-size: 50px; margin-bottom: 10px; }
  .cs-lead { font-size: 14px; }
  .cs-scene { height: 292px; margin-top: 10px; }   /* room for the pile on the lid under the lead */
  .cs-form { gap: 8px 12px; }
  .cs-form .cs-h2 { font-size: 24px; }
  .cs-form .cs-sub { display: none; }
  .cs-field input, .cs-field select { height: 38px; font-size: 14px; }
  .cs-field textarea { min-height: 56px; }
  .cs-field .cs-hint { display: none; }
  .cs-foot .btn-light { height: 42px; }
}
/* ----------------------------------------------------------- phone ----
   The form first, then the box; the channels and addresses stack. */
@media (max-width: 900px) {
  .cs-hall { min-height: 0; padding: 96px 0 40px; }
  .cs-hall > .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cs-intro { order: 2; }
  .cs-form { order: 1; grid-template-columns: minmax(0, 1fr); }
  .cs-h1 { font-size: clamp(36px, 10vw, 48px); }
  .cs-scene { height: 260px; }
  .cs-box { width: 88%; }
  .cs-lines .wrap, .cs-places .cs-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-foot { flex-direction: column; align-items: stretch; }
  .cs-foot .btn { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cs-box { transition: none; }
  .js .cs-pile { transition: none; }
}