/* ============================================================
   Piano People Surveys - public survey experience

   The form is treated as a printed feedback card handed out at the
   gate: paper ground, deep-green ink, and a yellow highlighter that
   swipes across whichever answer you pick. The one loud element is
   the progress rail, which is the client's own London skyline
   line-work inking itself in from left to right as you advance.
   ============================================================ */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Ground and ink - the printed card */
  --paper:      #EFEDE2;
  --paper-2:    #E5E2D4;   /* recessed: inputs, wells */
  --ink:        #043F22;   /* the client's skyline ink, all body type */
  --ink-soft:   rgba(4, 63, 34, .74);   /* 4.8:1 on paper - safe for small text */
  --ink-line:   rgba(4, 63, 34, .18);
  --ink-line-2: rgba(4, 63, 34, .34);

  /* Brand marks */
  --park:       #019B4B;   /* park green - the inked skyline */
  --tangerine:  #FD6128;   /* wordmark orange - buttons and marks, never type on paper */
  --keys:       #FFFB3E;   /* line-up yellow - the highlighter, nothing else */
  --night:      #0A0B0A;

  --danger:     #A8321B;

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font:    'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --pad:    clamp(1.1rem, 4vw, 2rem);
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Paper tooth. Cheap, static, and stops the ground reading as flat #EEE. */
.sky {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .25 0 0 0 0 .13 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono { font-size: 13px; letter-spacing: .04em; }
.muted { color: var(--ink-soft); }

/* ---- brand mark ---- */
.ppmark {
  display: inline-block; width: clamp(34px, 4.4vw, 42px); aspect-ratio: 131 / 240; height: auto; flex: none;
  background: var(--ink);
  -webkit-mask: url('../img/pp-mark-white.png') center / contain no-repeat;
  mask: url('../img/pp-mark-white.png') center / contain no-repeat;
}
.ppmark.big { width: 46px; height: 84px; margin-bottom: 16px; }
.home-mark { display: none; }

.ribbon {
  position: relative; z-index: 2;
  background: var(--night);
  color: var(--keys);
  font-size: 13px; font-weight: 600;
  text-align: center; padding: 10px 14px;
}

.stage {
  position: relative; z-index: 1;
  max-width: 660px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 48px) var(--pad) 0;
}

/* ---- masthead ---- */
.masthead { display: flex; gap: 16px; align-items: center; margin-bottom: clamp(20px, 5vw, 32px); }
.masthead h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 4.2vw, 1.75rem);
  line-height: 1.1; margin: 0;
}

/* ============================================================
   Progress rail - the client's skyline, inking in left to right
   ============================================================ */
.rail {
  position: relative;
  width: 100%;
  aspect-ratio: 1400 / 365;
  margin: 0 0 clamp(14px, 3vw, 22px);
}
.rail__track,
.rail__ink {
  position: absolute; inset: 0;
  -webkit-mask: url('../img/skyline-rail.png') left bottom / 100% 100% no-repeat;
          mask: url('../img/skyline-rail.png') left bottom / 100% 100% no-repeat;
}
.rail__track { background: var(--ink); opacity: .17; }
.rail__ink {
  background: var(--park);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s cubic-bezier(.22, .8, .28, 1);
}
.rail__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-soft);
  border-top: 1px solid var(--ink-line);
  padding-top: 9px;
  margin: -2px 0 clamp(22px, 5vw, 34px);
}

/* ============================================================
   The card
   ============================================================ */
.panel {
  position: relative;
  background: transparent;
  padding: 0 0 clamp(28px, 6vw, 40px);
}
.panel.center { text-align: center; padding-top: clamp(28px, 8vw, 56px); }
.panel.center h1,
.panel.center h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 6.5vw, 2.6rem);
  line-height: 1.06; margin: 0 0 .5rem;
}

.intro { margin: 0 0 clamp(20px, 4vw, 28px); color: var(--ink-soft); max-width: 60ch; }
.intro p { margin: 0 0 .6rem; }

.step-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.35rem, 4.6vw, 1.9rem);
  line-height: 1.1; margin: 0 0 .35rem;
}
.step-sub { margin: 0 0 1.4rem; color: var(--ink-soft); }

/* ---- a question ---- */
.q { margin: 0 0 clamp(30px, 7vw, 46px); }
.q.hidden-cond { display: none; }

.qtext {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 5.6vw, 2.35rem);
  line-height: 1.07;
  margin: 0 0 .5rem;
  max-width: 22ch;
}
.optional {
  font-size: .8125rem; font-weight: 600; letter-spacing: .06em;
  text-transform: none; color: var(--ink-soft);
  margin: -.25rem 0 .7rem;
}
.qtext2 { font-size: 1rem; color: var(--ink-soft); margin: -.15rem 0 .5rem; }
.qhelp  { font-size: .9375rem; color: var(--ink-soft); margin: 0 0 .9rem; max-width: 62ch; }

/* Contact step: these are field labels, not questions - they must not
   inherit the Anton headline treatment .qtext carries. */
.fieldlabel {
  display: block;
  font-size: .9375rem; font-weight: 650; letter-spacing: .01em;
  color: var(--ink);
}
.q[data-contact] { margin-bottom: clamp(18px, 3.5vw, 24px); }

.qerr {
  display: none;
  color: var(--danger); font-size: .875rem; font-weight: 600;
  margin-top: .65rem;
}
.q.has-error .qerr { display: block; }
.q.has-error .choices,
.q.has-error .pills { box-shadow: -14px 0 0 -12px var(--danger); }

/* Contact step: these are field labels, not questions - they must not
   inherit the Anton headline treatment .qtext carries. */
.fieldlabel {
  display: block;
  font-size: .9375rem; font-weight: 650; letter-spacing: .01em;
  color: var(--ink);
}
.q[data-contact] { margin-bottom: clamp(18px, 3.5vw, 24px); }

/* ---- choices: ruled lines on a form, marked with a highlighter ---- */
.choices { margin: 0; border-top: 1px solid var(--ink-line); }
.choice {
  position: relative;
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .85rem .2rem;
  border-bottom: 1px solid var(--ink-line);
  cursor: pointer;
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }

/* the tick box */
.choice::before {
  content: '';
  flex: none;
  width: 20px; height: 20px;
  margin-top: .18rem;
  border: 1.5px solid var(--ink-line-2);
  background: transparent;
  transition: border-color .16s, background .16s;
}
.choice:has(input[type=radio])::before { border-radius: 50%; }
.choice:hover::before { border-color: var(--ink); }
.choice.checked::before {
  border-color: var(--tangerine);
  background: var(--tangerine);
  box-shadow: inset 0 0 0 3px var(--paper);
}

/* the highlighter swipe */
.choice > span {
  position: relative;
  z-index: 0;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.choice > span::before {
  content: '';
  position: absolute; z-index: -1;
  inset: -.3em -.55em -.26em -.4em;
  background: var(--keys);
  mix-blend-mode: multiply;
  border-radius: 2px 14px 4px 11px / 14px 4px 12px 3px;
  transform: rotate(-.8deg) scaleX(0);
  transform-origin: left center;
  transition: transform .24s cubic-bezier(.2, .8, .3, 1);
}
.choice.checked > span::before { transform: rotate(-.8deg) scaleX(1); }

.choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.otherwrap { display: none; padding: .7rem 0 .2rem; }
.otherwrap.show { display: block; }

/* running count for "pick up to N" questions */
.maxnote {
  font-size: .875rem; font-weight: 600; color: var(--ink-soft);
  margin: .7rem 0 0;
}
.maxnote.full { color: var(--ink); }
.choice.locked { opacity: .5; cursor: not-allowed; }
.choice.locked:hover::before { border-color: var(--ink-line-2); }

/* ---- rating / scale pills ---- */
.pills { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; }
.pill {
  position: relative;
  z-index: 0;
  min-width: 2.85rem; height: 2.85rem;
  padding: 0 .5rem;
  border: 1.5px solid var(--ink-line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: 600 1.0625rem/1 var(--font);
  cursor: pointer;
  transition: border-color .16s, transform .16s;
}
.pill::before {
  content: '';
  position: absolute; z-index: -1;
  inset: -3px;
  background: var(--keys);
  border-radius: 48% 52% 51% 49% / 53% 47% 53% 47%;
  transform: scale(0) rotate(-6deg);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.pill:hover { border-color: var(--ink); }
.pill.on { border-color: var(--tangerine); }
.pill.on::before { transform: scale(1) rotate(-6deg); }
.pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.pill-anchors {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .8125rem; color: var(--ink-soft);
  margin-top: .7rem; max-width: 30rem;
}

/* ---- text inputs ---- */
input[type=text], input[type=email], input[type=tel], input[type=number], textarea, select {
  width: 100%;
  margin-top: .55rem;
  padding: .8rem .85rem;
  background: var(--paper-2);
  border: 1px solid var(--ink-line-2);
  border-radius: var(--radius);
  color: var(--ink);
  font: 1.0625rem/1.5 var(--font);
}
textarea { min-height: 8.5rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(4, 63, 34, .45); }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}

/* ---- buttons ---- */
.navrow {
  display: flex; align-items: center; gap: .75rem;
  border-top: 1px solid var(--ink-line);
  padding-top: clamp(18px, 4vw, 26px);
}
.btn {
  appearance: none;
  padding: .85rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 600 1rem/1 var(--font);
  cursor: pointer;
  transition: transform .12s, background .16s, border-color .16s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* ink on tangerine measures 5.3:1 - white on tangerine would not pass */
.btn.go { background: var(--tangerine); color: var(--ink); }
.btn.go:hover { background: #ff7440; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink-line-2); }
.btn.ghost:hover { border-color: var(--ink); }

.finemeta { font-size: .875rem; color: var(--ink-soft); margin-top: 1rem; }

.pagefoot {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: .35rem 1.1rem;
  text-align: center; color: var(--ink-soft);
  font-size: 13px; letter-spacing: .01em;
  border-top: 1px solid var(--ink-line);
  margin: clamp(30px, 7vw, 48px) 0 0;
  padding: 16px 0 24px;
}
.pagefoot a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.pagefoot a:hover { text-decoration-thickness: 2px; }
.pagefoot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- built-by mark ---- */
.site-built { display: block; text-align: center; line-height: 0; padding-bottom: 30px; }
.site-built a {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .9rem;
  font: 12px var(--font);
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
}
.site-built a:hover { color: var(--ink); border-color: var(--ink-line-2); }
.site-built img { display: inline-block; filter: grayscale(1) brightness(.28); vertical-align: middle; }

/* ---- intl-tel-input, themed for paper ----
   The library exposes a --iti-* custom-property API; use that rather than
   fighting its class selectors. Two gotchas this block exists to handle:
   (a) its stylesheet must load BEFORE this file (see survey.php) or these
       rules lose every equal-specificity tie;
   (b) the base `input[type=text]` rule above is specificity 0,1,1 and so
       beats a bare `.iti__search-input` (0,1,0) - hence `input.` below. */
:root {
  --iti-dropdown-bg:      var(--paper);
  --iti-border-color:     var(--ink-line-2);
  --iti-hover-color:      rgba(4, 63, 34, .06);   /* flag button + row hover */
  --iti-dialcode-color:   var(--ink-soft);
  --iti-arrow-color:      var(--ink-soft);
  --iti-search-icon-color: var(--ink-soft);
}
.iti { width: 100%; margin-top: .55rem; }
.iti input[type=tel] { margin-top: 0; }
.iti__selected-country { background: transparent; color: var(--ink); }
.iti__selected-country-primary:hover { background: rgba(4, 63, 34, .06); border-radius: 11px 0 0 11px; }

.iti__dropdown-content {
  border: 1px solid var(--ink-line-2);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(4, 63, 34, .18);
  overflow: hidden;
}
input.iti__search-input {
  margin: 0;
  padding: .75rem .85rem .75rem 30px;
  background: var(--paper-2);
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  border-radius: 0;
  color: var(--ink);
  font: 1rem/1.4 var(--font);
}
input.iti__search-input::placeholder { color: rgba(4, 63, 34, .5); }
input.iti__search-input:focus {
  outline: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: calc(.75rem - 1px);
}

.iti__country-list { max-height: 15rem; }
.iti__country { padding: .6rem .85rem; color: var(--ink); }
.iti__country.iti__highlight { background: rgba(255, 251, 62, .5); }  /* the highlighter, list only */
.iti__dial-code, .iti__selected-dial-code { color: var(--ink-soft); }

/* ---- home ---- */
.home-title { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.05; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}