/* ===========================================================
   AURALIS — Start a project
   A Typeform-style enquiry: one question per screen, advancing
   with a vertical "wheel" transition (wheel / arrows / Enter).
   Black brand throughout — only the four brand colours.
   =========================================================== */

/* class display rules (e.g. .sap-input{display:block}) outrank the UA [hidden]
   style, so the "Other" field would show before it's chosen — re-assert it */
[hidden]{display:none !important}

.sap-body{height:100%;overflow:hidden}                 /* the deck owns scrolling */
.sap-body #top{height:100dvh}

/* nav stays transparent over the black deck (page never scrolls) */
.sap-body .nav{background:transparent;border-bottom-color:transparent}
.sap-body .to-top{display:none}                        /* shared scroll-top button is moot here */

/* ---- viewport-locked deck ---- */
.sap{position:fixed;inset:0;height:100dvh;overflow:hidden;background:var(--ink)}
/* gradient hero video + legibility veil, fixed behind the translating deck */
.sap-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.sap-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.58) 56%,rgba(0,0,0,.34) 100%),
    linear-gradient(180deg,var(--ink) 0%,transparent 18%,transparent 76%,var(--ink) 100%);
}
.sap-track{
  position:relative;z-index:2;
  display:flex;flex-direction:column;height:100%;
  transform:translate3d(0,calc(var(--i,0) * -100dvh),0);
  transition:transform .85s var(--ease-inout);
  will-change:transform;
}
.sap-step{
  flex:0 0 100dvh;height:100dvh;
  display:flex;align-items:center;
  padding:clamp(96px,14vh,150px) var(--shell) clamp(96px,12vh,140px);
  /* off-screen panels: faded + nudged so the active one reads as "in focus" */
  opacity:.18;transition:opacity .6s var(--ease);
}
.sap-step.is-active{opacity:1}

.sap-wrap{width:100%;max-width:760px;margin:0 auto}

/* ---- progress bar (above the nav) — thin, branded, always visible ---- */
.sap-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:260;
  background:var(--line-2)}
.sap-progress__bar{display:block;height:100%;width:0;background:var(--cream);
  box-shadow:0 0 10px rgba(230,228,196,.45);
  transition:width .85s var(--ease-inout)}

/* ---- shared question typography ---- */
.sap-q{display:block;font-size:clamp(1.6rem,3.6vw,2.7rem);font-weight:500;line-height:1.12;
  letter-spacing:-.025em;color:var(--cream);margin-bottom:14px}
.sap-hint{font-size:clamp(.95rem,1.3vw,1.05rem);color:var(--cream-60);margin-bottom:6px}

/* ---- free-text inputs ---- */
.sap-input{
  display:block;width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--line-2);
  color:var(--cream);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.3;
  padding:14px 2px;margin-top:10px;
  transition:border-color .3s var(--ease);
}
.sap-input::placeholder{color:var(--cream-40)}
.sap-input:focus{outline:none;border-bottom-color:var(--cream)}
.sap-area{resize:none;min-height:1.6em;max-height:42vh;overflow:auto;font-size:clamp(1.2rem,2.4vw,1.7rem)}

/* £-prefixed money field */
.sap-money{display:flex;align-items:baseline;gap:6px;border-bottom:1px solid var(--line-2);
  margin-top:10px;transition:border-color .3s var(--ease)}
.sap-money:focus-within{border-bottom-color:var(--cream)}
.sap-money__sign{font-size:clamp(1.4rem,3vw,2.1rem);color:var(--cream-60);font-weight:400}
.sap-money .sap-input{border-bottom:none;margin-top:0;padding-left:0}

.sap-input--other{margin-top:18px;font-size:clamp(1.05rem,1.8vw,1.3rem)}

/* ---- options (single + multi) ---- */
.sap-opts{list-style:none;display:flex;flex-direction:column;gap:10px;margin:26px 0 0;max-width:660px}
.sap-opts--multi{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:760px}
.sap-opts li{display:flex}             /* let each button fill its (stretched) grid cell — keeps a row's cards equal height */
.sap-opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 16px;border:1px solid var(--line-2);border-radius:10px;
  color:var(--cream);font-size:clamp(.95rem,1.5vw,1.1rem);
  background:transparent;transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.sap-opt:hover{border-color:var(--cream)}
.sap-opt__key{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;
  border:1px solid var(--line-2);border-radius:5px;font-size:.78rem;font-weight:600;color:var(--cream-60);
  transition:inherit}
.sap-opt__lab{flex:1 1 auto}
.sap-opt.is-on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.sap-opt.is-on .sap-opt__key{border-color:var(--ink-72);color:var(--ink)}

/* ---- footer (OK · Enter hint · wheel arrows) ---- */
.sap-foot{display:flex;align-items:center;gap:18px;margin-top:32px;max-width:760px}
.sap-ok,.sap-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--cream);color:var(--ink);
  padding:13px 22px;border-radius:999px;font-size:1rem;font-weight:500;letter-spacing:-.01em;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.sap-ok:hover,.sap-cta:hover{transform:translateY(-2px)}
.sap-ok[disabled]{opacity:.5;pointer-events:none}
.sap-enter{font-size:.85rem;color:var(--cream-60)}
.sap-enter b{color:var(--cream);font-weight:500}

/* ---- error ---- */
.sap-err{margin-top:14px;font-size:.9rem;color:var(--cream);opacity:0;height:0;overflow:hidden;
  transition:opacity .3s var(--ease)}
.sap-step.has-error .sap-err{opacity:1;height:auto}
.sap-step.has-error .sap-input{border-bottom-color:var(--cream)}

/* ---- intro / done ---- */
.sap-eyebrow{font-size:14px;letter-spacing:0;color:var(--cream-60);margin-bottom:22px}
.sap-intro__title{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:500;line-height:.98;
  letter-spacing:-.035em;color:var(--cream)}
.sap-intro__lede{font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--cream-60);
  max-width:34ch;margin-top:22px;line-height:1.4}
.sap-intro__lede--wide{max-width:46ch}   /* longer ledes (e.g. Get in touch) */
/* quiet reassurance line under the lede (green dot + secondary text) */
.sap-note{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-size:14px;color:var(--cream-60)}
.sap-note::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--green);flex:0 0 auto}
.sap-step--intro .sap-foot,.sap-step--done .sap-foot{margin-top:38px}

/* ---- wheel arrows (injected into each footer, hugging the right) ---- */
.sap-nav{margin-left:auto;display:inline-flex;gap:8px;flex:0 0 auto}
.sap-arrow{position:relative;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--cream);font-size:0;line-height:1;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
/* masked SVG glyph (matches the site arrows); colour follows currentColor on hover */
.sap-arrow::before{content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:center/18px no-repeat;mask:center/18px no-repeat}
.sap-arrow[data-up]::before{-webkit-mask-image:var(--arrow-u);mask-image:var(--arrow-u)}
.sap-arrow[data-down]::before{-webkit-mask-image:var(--arrow-d);mask-image:var(--arrow-d)}
.sap-arrow:hover{border-color:var(--cream);background:var(--cream);color:var(--ink);transform:translateY(-2px)}
.sap-arrow[disabled]{opacity:.28;pointer-events:none}

/* honeypot stays hidden */
.sap-hp{position:absolute;left:-9999px}

@media (max-width:680px){
  .sap-opts--multi{grid-template-columns:1fr}
  .sap-foot{gap:12px}
  .sap-enter{display:none}            /* no physical keyboard — keep room for OK + arrows */
  .sap-arrow{width:42px;height:42px}
}

@media (prefers-reduced-motion:reduce){
  .sap-track{transition:none}
  .sap-step{opacity:1;transition:none}
}