/* inSona EU · views/enquiry.css · area E · #/consultation (scoped under .v-enquiry)
   New components, drawn from the brand: choice tiles (select in deep clay, the band marker lengthens when chosen),
   the progress band (clay, slanted 12° leading edge), the consultation summary as the frame's foot (ground contact),
   the "what happens next" hour list, and the drawing drop zone (a small unlit wall with the band of light). */

.v-enquiry .e-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.v-enquiry .e-aside{position:sticky;top:calc(var(--hdr) + 32px)}
.v-enquiry .e-h1{font-size:56px;line-height:1.02;letter-spacing:-1.1px;max-width:9.5em}
.v-enquiry .e-h1:focus{outline:0}
.v-enquiry .e-lede{margin-top:20px}
.v-enquiry .e-lede .sm{display:none}
.v-enquiry .e-alt{margin-top:20px}

/* prefill line: quiet, says what was carried in and from where */
.v-enquiry .e-pre{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:20px;padding:11px 16px;border-radius:14px;background:var(--sel);box-shadow:inset 0 0 0 1px var(--line-2);font:400 15px/1.4 var(--sans);color:var(--ink)}
.v-enquiry .e-pre .bd{color:var(--clay);transform:translateY(-1px)}
.v-enquiry .e-pre span{flex:1;min-width:12em}
.v-enquiry .e-pre .tlink{font-size:14px}

/* the frame: the room you're planning, with your answers as its foot */
.v-enquiry .e-frame{display:grid;grid-template-rows:clamp(200px,30vh,320px) auto;margin-top:28px;background:var(--raised)}
.v-enquiry .e-frame>img,.v-enquiry .e-frame>.ph{grid-area:1/1;position:relative;inset:auto;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t-light) var(--ease-light)}
.v-enquiry .e-frame>img.on,.v-enquiry .e-frame>.ph.on{opacity:1}
.v-enquiry .e-frame>.tag{top:16px;bottom:auto}
.v-enquiry .e-sum{grid-row:2;padding:18px 24px 20px;font-family:var(--sans);box-shadow:0 -1px 0 var(--line-2);position:relative;z-index:2;min-height:96px}
.v-enquiry .e-sum .hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.v-enquiry .e-sum .hd b{font-weight:500;font-size:16px}
.v-enquiry .e-sum .hd span{font-size:13.5px;color:var(--ink-2)}
.v-enquiry .e-sum dl{display:grid;grid-template-columns:76px minmax(0,1fr);gap:6px 16px;font-size:15px;line-height:1.4}
.v-enquiry .e-sum dt{color:var(--ink-2);font-size:13.5px;padding-top:1px}
.v-enquiry .e-sum .em{font-size:15px;color:var(--ink-2)}

/* the step card */
.v-enquiry .e-form{padding:0;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(60,40,20,.08)}
.v-enquiry #eStep{padding:44px 44px 12px;min-height:520px}
.v-enquiry .e-q{margin-bottom:30px}
.v-enquiry .e-q h2{font-size:40px;line-height:1.08;letter-spacing:-.6px}
.v-enquiry .e-q h2:focus{outline:0}
.v-enquiry .e-qh{margin-top:10px;font:400 16px/1.45 var(--sans);color:var(--ink-2);max-width:34em}
.v-enquiry .e-sub{font:400 21px/1.3 var(--sans);letter-spacing:-.1px;margin:36px 0 14px}
.v-enquiry .e-body>.e-sub:first-child{margin-top:0}
.v-enquiry .e-group{margin-bottom:8px}
.v-enquiry .e-group>.msg{margin-top:10px}
.v-enquiry .e-help{font:400 13.5px/1.4 var(--sans);color:var(--ink-2);margin-top:7px}
.v-enquiry .e-loc[hidden],.v-enquiry .e-office[hidden]{display:none}
.v-enquiry .e-loc{margin-top:16px}
.v-enquiry .e-office{margin-top:16px}
.v-enquiry .chips span small{margin-left:2px}
/* step 5: the meeting, then "Your details" under a rule 48 px below, then the two optional extras kept compact */
.v-enquiry .e-when{margin-top:24px}
.v-enquiry .e-rule{margin:48px 0 0}
.v-enquiry .e-sub.e-you{margin-top:32px}
.v-enquiry .e-extra{margin-top:8px;padding-top:20px;border-top:1px solid var(--line-2)}
.v-enquiry .e-extra .field{margin-bottom:0}
.v-enquiry .e-news{margin-top:16px}
.v-enquiry .e-news .tx{font-size:14px;line-height:1.45;color:var(--ink-2)}
.v-enquiry .e-news .opt{color:var(--ink-3)}
.v-enquiry .e-when[hidden]{display:none}
/* date: same field as .inp, a calendar glyph on the right; the native picker sits invisibly over it */
.v-enquiry .e-date{position:relative}
.v-enquiry .e-date .inp{padding-right:48px;cursor:text;font-variant-numeric:tabular-nums}
.v-enquiry .e-date .inp::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:48px;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.v-enquiry .e-date .inp::-webkit-datetime-edit{padding:0}
.v-enquiry .e-date .inp::-webkit-datetime-edit-fields-wrapper{padding:0}
.v-enquiry .e-date .inp:not(:focus):invalid,.v-enquiry .e-date .inp[value=""]:not(:focus){color:var(--ph)}
.v-enquiry .e-date .cal{position:absolute;right:16px;top:14px;width:20px;height:20px;color:var(--ink-2);pointer-events:none}

/* choice tiles */
.v-enquiry .e-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v-enquiry .e-tiles.rows{grid-template-columns:1fr}
.v-enquiry .e-tiles.mk>.e-tile:last-child:nth-child(odd),.v-enquiry .e-tiles.mt>.e-tile:last-child:nth-child(odd){grid-column:1/-1}
.v-enquiry .e-tile{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.v-enquiry .e-tile input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.v-enquiry .e-tile .tc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:108px;padding:17px 51px 17px 19px;border-radius:var(--r-card);background:var(--raised);border:1px solid var(--line);box-shadow:none;font-family:var(--sans);transition:background-color var(--t-ui),border-color var(--t-ui),box-shadow var(--t-ui),transform .12s}
.v-enquiry .e-tile b{font:400 19px/1.25 var(--sans);color:var(--ink);letter-spacing:-.1px}
.v-enquiry .e-tile small{font:400 14px/1.4 var(--sans);color:var(--ink-2)}
.v-enquiry .e-tile em{font:500 13px/1.3 var(--sans);font-style:normal;color:var(--ink-2)}
.v-enquiry .e-tile .mk{position:absolute;top:20px;right:20px;width:22px;height:10px;color:var(--ink-3);opacity:0;transition:opacity var(--t-ui),color var(--t-ui),transform var(--t-light) var(--ease-light);transform-origin:left center;transform:scaleX(.55)}
.v-enquiry .e-tile .mk .bd{width:22px;height:10px;display:block}
.v-enquiry .e-tile input:checked+.tc{background:var(--clay-deep);border-color:var(--clay-deep);box-shadow:0 1px 2px rgba(60,30,15,.22),0 14px 26px -16px rgba(70,34,18,.55)}
.v-enquiry .e-tile input:checked+.tc b{color:var(--clay-deep-ink)}
.v-enquiry .e-tile input:checked+.tc small,.v-enquiry .e-tile input:checked+.tc em{color:rgba(251,246,242,.8)}
.v-enquiry .e-tile input:checked+.tc .mk{color:var(--clay-deep-ink);opacity:1;transform:scaleX(1)}
.v-enquiry .e-tile input:focus-visible+.tc{border-color:var(--ink);box-shadow:var(--focus)}
.v-enquiry .e-tile input:checked:focus-visible+.tc{border-color:var(--clay-deep);box-shadow:var(--focus)}
.v-enquiry .e-tile:active .tc{transform:scale(.98)}
@media (hover:hover){.v-enquiry .e-tile:hover input:not(:checked)+.tc{border-color:var(--ink-3)}.v-enquiry .e-tile:hover input:not(:checked)+.tc .mk{opacity:1}}
.v-enquiry .e-group.is-err .e-tile input:not(:checked)+.tc{border-color:var(--err)}
/* row tiles: plain words left, RIBA stage right */
.v-enquiry .e-tiles.rows .tc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:20px;row-gap:2px;min-height:78px;padding:15px 55px 15px 21px}
.v-enquiry .e-tiles.rows b{grid-column:1}
.v-enquiry .e-tiles.rows small{grid-column:1}
.v-enquiry .e-tiles.rows em{grid-column:2;grid-row:1/3;font-size:14px}
.v-enquiry .e-tiles.rows .mk{top:50%;margin-top:-5px}

/* documents carried in from a download request */
.v-enquiry .e-docs{margin:16px 0 4px;padding:14px 18px;border-radius:16px;background:var(--inset)}
.v-enquiry .e-docs .lbl{margin-bottom:4px}
.v-enquiry .e-docs li{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 15px/1.4 var(--sans)}
.v-enquiry .e-docs + .field,.v-enquiry .e-group + .field{margin-top:24px}

/* drawing drop zone: a small unlit wall waiting for its band of light */
.v-enquiry .e-fin{position:absolute;opacity:0;width:1px;height:1px}
.v-enquiry .e-drop{display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:var(--r-card);border:1px dashed var(--ink-3);background:var(--field);cursor:pointer;transition:border-color var(--t-ui),background-color var(--t-ui)}
.v-enquiry .e-fin:focus-visible+.e-drop{box-shadow:var(--focus)}
.v-enquiry .e-drop.over{border-color:var(--ink);border-style:solid;background:var(--sel)}
@media (hover:hover){.v-enquiry .e-drop:hover{border-color:var(--ink)}}
.v-enquiry .e-drop .w{position:relative;flex:none;width:64px;height:44px;border-radius:9px;background:var(--inset);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-2)}
.v-enquiry .e-drop .w:before{content:"";position:absolute;left:-10%;right:-10%;top:40%;height:9px;background:linear-gradient(90deg,rgba(255,199,146,0),rgba(255,199,146,.6) 35%,rgba(255,215,174,.75) 65%,rgba(255,199,146,0));transform:rotate(-12deg)}
.v-enquiry .e-drop .tx{display:flex;flex-direction:column;gap:2px;font-family:var(--sans)}
.v-enquiry .e-drop b{font:500 15.5px/1.3 var(--sans)}
.v-enquiry .e-drop small{font:400 13.5px/1.35 var(--sans);color:var(--ink-2)}
.v-enquiry .e-flist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);font:400 15px/1.3 var(--sans)}
.v-enquiry .e-flist li:first-child{margin-top:8px}
.v-enquiry .e-flist .fi{width:40px;height:44px;border-radius:5px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:end center;padding-bottom:5px;font:500 12px/1 var(--sans);letter-spacing:0;color:var(--ink-2)}
.v-enquiry .e-flist .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-enquiry .e-flist .sz{color:var(--ink-2);font-size:13.5px}
.v-enquiry .e-files .honest{margin-top:10px}

/* the unit inside a size field */
.v-enquiry .e-unit{position:relative}
.v-enquiry .e-unit .inp{padding-right:132px}
.v-enquiry .e-unit .u{position:absolute;right:16px;top:0;line-height:48px;font-size:15px;color:var(--ink-3);pointer-events:none}

/* the review list */
.v-enquiry .e-rev .row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:4px 24px;padding:16px 0;border-top:1px solid var(--line-2)}
.v-enquiry .e-rev .row:last-child{border-bottom:1px solid var(--line-2)}
.v-enquiry .e-rev dt{font:400 14.5px/1.5 var(--sans);color:var(--ink-2)}
.v-enquiry .e-rev dd{font:400 16px/1.5 var(--sans);color:var(--ink);min-width:0;overflow-wrap:anywhere}
.v-enquiry .e-rev dd span{display:block}
.v-enquiry .e-rev dd span+span{color:var(--ink-2);font-size:15px}
.v-enquiry .e-rev .ch{text-align:right}
.v-enquiry .e-rev .ch .tlink{font-size:14.5px}
.v-enquiry .e-rev.sm .row{grid-template-columns:130px minmax(0,1fr)}
.v-enquiry .e-noob{margin-top:20px}

/* the action bar: sticky at the foot of the card, the band of progress along its top edge */
.v-enquiry #eBar{position:sticky;bottom:0;z-index:5;margin-top:24px}
/* hairline on top, 2 px of card ground, then the progress band */
.v-enquiry .e-bar{position:relative;background:var(--card);border-radius:0 0 23px 23px;border-top:1px solid var(--line);padding-top:2px}
.v-enquiry .e-prog{position:absolute;left:0;right:0;top:2px;height:5px;background:var(--line-2)}
.v-enquiry .e-pn{margin:-8px 0 0;padding:0 28px 18px 44px;font:400 13.5px/1.45 var(--sans);color:var(--ink-2);text-align:right}
.v-enquiry .e-pn .tlink{font:inherit;display:inline}
.v-enquiry .e-prog i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--clay);clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%);transition:width var(--t-light) var(--ease-light)}
.v-enquiry .e-bar .in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px 20px 44px}
.v-enquiry .e-bar .cnt{display:flex;align-items:center;gap:10px;font:500 15px/1.3 var(--sans);color:var(--ink)}
.v-enquiry .e-bar .cnt .bd{color:var(--clay)}
.v-enquiry .e-bar .cnt em{font-style:normal;font-weight:400;color:var(--ink-2)}
.v-enquiry .e-bar .cnt em:before{content:"·";margin-right:10px}
.v-enquiry .e-bar .acts{display:flex;gap:10px}

/* ---------- confirmation ---------- */
.v-enquiry .e-done .e-h1+.lede{margin-top:20px}
.v-enquiry .e-ref{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:28px;padding:18px 22px;border-radius:var(--r-card);background:var(--raised);box-shadow:var(--sh)}
.v-enquiry .e-ref .lbl{width:100%;margin:0;font:500 14px/1.3 var(--sans);color:var(--ink-2)}
.v-enquiry .e-ref .v{font:300 40px/1.05 var(--sans);letter-spacing:.02em;margin-right:auto}
.v-enquiry .e-ref .ok{display:inline-flex;align-items:center;gap:6px;font:500 13.5px var(--sans);color:var(--ok)}
.v-enquiry .e-ref .ok svg{width:14px;height:11px}
.v-enquiry .e-frame-done{margin-top:28px}
.v-enquiry .e-next-col{padding-top:6px}
.v-enquiry .e-next{margin-top:20px;border-bottom:1px solid var(--line-2)}
.v-enquiry .e-next li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 32px;padding:24px 0;border-top:1px solid var(--line-2)}
.v-enquiry .e-next .w{font:500 15px/1.35 var(--sans);color:var(--ink)}
.v-enquiry .e-next .w b{display:block;font:300 32px/1.1 var(--sans);letter-spacing:-.4px;margin-top:6px}
.v-enquiry .e-next .w b+b{margin-top:0}
.v-enquiry .e-next .w small{display:block;font:400 13px/1.4 var(--sans);color:var(--ink-2);margin-top:4px}
.v-enquiry .e-next p{max-width:34em}
.v-enquiry .e-next .pill-row{margin-top:16px}
.v-enquiry .e-next .micro{margin-top:8px}
.v-enquiry .e-next-col .det{margin-top:40px}
.v-enquiry .e-while{font:300 28px/1.2 var(--sans);letter-spacing:-.3px;margin:48px 0 16px}
.v-enquiry .e-honest{margin-top:28px}

@media (max-width:1240px){
  .v-enquiry .e-grid{gap:56px}
  .v-enquiry #eStep{padding:36px 32px 12px}
  .v-enquiry .e-bar .in{padding:18px 24px 18px 32px}
  .v-enquiry .e-pn{padding:0 24px 16px 32px}
}
@media (max-width:980px){
  .v-enquiry .e-grid{grid-template-columns:1fr;gap:28px}
  .v-enquiry .e-aside{position:static}
  .v-enquiry .e-flow .e-frame,.v-enquiry .e-flow .e-alt{display:none}
  .v-enquiry .e-h1{max-width:none}
  .v-enquiry .e-next li{grid-template-columns:160px minmax(0,1fr)}
}
@media (max-width:600px){
  .v-enquiry .e-h1{font-size:40px;letter-spacing:-.8px}
  .v-enquiry .e-lede .lg{display:none}
  .v-enquiry .e-lede .sm{display:inline}
  .v-enquiry .e-lede{margin-top:12px}
  .v-enquiry .e-flow.sec-top{padding-top:32px}
  .v-enquiry .e-form{border-radius:20px;margin:0 -4px}
  .v-enquiry #eStep{padding:26px 18px 8px;min-height:0}
  .v-enquiry .e-q{margin-bottom:22px}
  .v-enquiry .e-q h2{font-size:30px;letter-spacing:-.4px}
  .v-enquiry .e-qh{font-size:15px}
  .v-enquiry .e-sub{font-size:19px;margin-top:28px}
  .v-enquiry .e-tiles{grid-template-columns:1fr;gap:10px}
  .v-enquiry .e-tile .tc{min-height:0;padding:14px 47px 14px 17px;justify-content:center}
  .v-enquiry .e-tile b{font-size:18px}
  .v-enquiry .e-tile .mk{top:50%;margin-top:-5px;right:18px}
  .v-enquiry .e-tiles.rows .tc{padding:13px 47px 13px 17px;grid-template-columns:minmax(0,1fr) auto}
  .v-enquiry .e-pn{margin-top:-4px;padding:0 16px calc(12px + env(safe-area-inset-bottom));text-align:left;font-size:13px}
  .v-enquiry .e-bar{border-radius:0 0 19px 19px}
  .v-enquiry .e-bar .in{flex-wrap:wrap;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .v-enquiry .e-bar .cnt{width:100%;font-size:14px}
  .v-enquiry .e-bar .acts{width:100%}
  .v-enquiry .e-bar .acts .pill-p{flex:1}
  .v-enquiry .e-bar .acts .pill-s{padding:0 20px}
  .v-enquiry .e-rev .row{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .v-enquiry .e-rev dt{grid-column:1;grid-row:1}
  .v-enquiry .e-rev dd{grid-column:1/-1}
  .v-enquiry .e-rev .ch{grid-column:2;grid-row:1}
  .v-enquiry .e-rev.sm .row{grid-template-columns:1fr}
  .v-enquiry .e-unit .inp{padding-right:120px}
  .v-enquiry .e-ref .v{font-size:32px}
  .v-enquiry .e-next li{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .v-enquiry .e-next .w b{display:inline;font-size:26px;margin:0 8px 0 0}
  .v-enquiry .e-next .w small{display:inline}
  .v-enquiry .e-next .w{display:block}
  .v-enquiry .e-next .pp .w{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .v-enquiry .e-next .pp .w b{margin:0}
  .v-enquiry .e-while{font-size:24px}
  .v-enquiry .e-done .pill-row .pill{white-space:normal;height:auto;min-height:48px;padding-top:12px;padding-bottom:12px;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .v-enquiry .e-tile .mk{transform:none}
}
.v-enquiry .e-tile,.v-enquiry .chips label,.v-enquiry .field .inp,.v-enquiry .check,.v-enquiry .e-drop{scroll-margin-bottom:160px;scroll-margin-top:96px}