/* ==========================================================================
   Topogeny enquiry — drafting sheet
   Quiet paper, one question per screen, thin line-art.
   The grid is deliberately faint: it should read as the tooth of the paper,
   not as ruled graph paper.
   ========================================================================== */

.tg-enq{
  --paper:#F2EFE7;
  --paper-2:#EDE9DF;
  --ink:#1B1B19;
  --muted:#6B6862;
  --light:#9E9A91;
  --rule:#CFC8BA;
  --hair:#DED8CB;
  --rust:#C4552F;
  --teal:#1F8C7E;
  --dark:#141412;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---------------- floating trigger ---------------- */
.tg-fab{
  position:fixed;z-index:9000;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px 14px 16px;min-height:52px;
  background:var(--dark);color:#F2EFE7;
  border:0;border-radius:2px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;box-shadow:0 8px 30px rgba(20,20,18,.26);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s,opacity .3s;
}
.tg-fab:hover{background:var(--rust);transform:translateY(-2px)}
.tg-fab[hidden]{display:none}
.tg-fab-mark{width:17px;height:17px;flex:none;display:block}
.tg-fab-mark circle{fill:none;stroke-width:8}
@media(max-width:520px){
  .tg-fab{padding:0;width:54px;height:54px;justify-content:center;border-radius:50%}
  .tg-fab-label{display:none}
  .tg-fab-mark{width:21px;height:21px}
}

/* ---------------- overlay ---------------- */
.tg-overlay{
  position:fixed;inset:0;z-index:9500;
  display:flex;align-items:center;justify-content:center;padding:28px;
  background:rgba(24,24,21,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .36s ease;
}
.tg-overlay.open{opacity:1;pointer-events:auto}
.tg-overlay[hidden]{display:none}

.tg-panel{
  position:relative;width:100%;max-width:980px;height:min(84vh,660px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);color:var(--ink);
  border-radius:2px;box-shadow:0 40px 100px rgba(20,20,18,.42);
  transform:translateY(12px) scale(.99);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),opacity .3s;
  font-family:var(--sans);
}
.tg-overlay.open .tg-panel{transform:none}
.tg-panel.tg-collapsing{transform:translateY(10px) scale(.985);opacity:0}

/* the tooth of the paper — one faint 24px grid, nothing more */
.tg-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(27,27,25,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,27,25,.028) 1px, transparent 1px);
  background-size:24px 24px;
}
.tg-panel > *{position:relative;z-index:1}

@media(max-width:860px){
  .tg-overlay{padding:0;align-items:stretch}
  .tg-panel{max-width:none;height:100%;height:100svh;border-radius:0}
}

/* ---------------- head ---------------- */
.tg-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 34px 0;padding-top:max(22px,env(safe-area-inset-top));
}
.tg-step{
  display:flex;align-items:center;gap:12px;min-width:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.tg-step i{display:block;width:38px;height:1px;background:var(--rule);flex:none}
.tg-headright{display:flex;align-items:center;gap:16px;flex:none}
.tg-lang,.tg-close{
  background:none;border:0;cursor:pointer;padding:8px 2px;min-height:40px;
  font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);
  transition:color .2s;
}
.tg-lang:hover,.tg-close:hover{color:var(--rust)}
.tg-close span{margin-left:8px;font-size:13px}

@media(max-width:860px){ .tg-head{padding:18px 22px 0} }

/* ---------------- body ---------------- */
.tg-body{
  flex:1;display:grid;grid-template-columns:1fr 1fr;
  gap:34px;align-items:center;
  padding:8px 34px 0;overflow-y:auto;overscroll-behavior:contain;
}
.tg-body.solo{grid-template-columns:1fr;max-width:660px}
@media(max-width:860px){
  .tg-body{grid-template-columns:1fr;gap:20px;padding:14px 22px 0;align-items:start}
}

.tg-left{min-width:0;animation:tg-in .42s cubic-bezier(.2,.7,.3,1) both}
.tg-right{min-width:0;display:flex;align-items:center;justify-content:center;
  animation:tg-in .42s cubic-bezier(.2,.7,.3,1) .06s both}
@keyframes tg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.tg-q{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,3.1vw,35px);line-height:1.14;letter-spacing:-.025em;
  margin:0 0 14px;color:var(--ink);
}
.tg-note{
  margin:0 0 22px;font-size:14px;line-height:1.6;color:var(--muted);max-width:34ch;
}
@media(max-width:860px){
  .tg-q{font-size:26px}
  .tg-note{margin-bottom:16px}
}

/* ---------------- inputs ---------------- */
.tg-in{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:12px 2px;min-height:48px;outline:none;
  transition:border-color .22s;
}
.tg-in::placeholder{color:var(--light)}
.tg-in:focus{border-bottom-color:var(--ink)}
textarea.tg-in{
  border:1px solid var(--rule);padding:14px;min-height:104px;
  line-height:1.55;resize:vertical;background:rgba(255,255,255,.4);
}
textarea.tg-in:focus{border-color:var(--ink)}
.tg-err{margin:10px 0 0;font-size:13px;color:var(--rust)}

/* tile choices */
.tg-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tg-tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  gap:14px;padding:16px;min-height:104px;
  background:rgba(255,255,255,.45);border:1px solid var(--rule);border-radius:2px;
  cursor:pointer;text-align:left;
  transition:border-color .2s,background .2s,transform .14s;
}
.tg-tile:hover{border-color:var(--ink);background:rgba(255,255,255,.7)}
.tg-tile:active{transform:scale(.985)}
.tg-tile.on{border-color:var(--ink);border-width:2px;padding:15px;background:rgba(255,255,255,.85)}
.tg-tile svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.1}
.tg-tile-l{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);line-height:1.4;
}
@media(max-width:400px){ .tg-tile{min-height:88px;padding:13px} }

/* plain chips, for the longer option lists */
.tg-chips{display:flex;flex-wrap:wrap;gap:8px}
.tg-chip{
  max-width:100%;overflow-wrap:anywhere;
  font-family:var(--sans);font-size:14px;line-height:1.3;text-align:left;
  padding:10px 15px;min-height:44px;
  background:rgba(255,255,255,.45);border:1px solid var(--rule);border-radius:2px;
  color:var(--ink);cursor:pointer;
  transition:border-color .2s,background .2s,transform .14s;
}
.tg-chip:hover{border-color:var(--ink);background:rgba(255,255,255,.75)}
.tg-chip:active{transform:scale(.98)}
.tg-chip.on{background:var(--dark);color:#F2EFE7;border-color:var(--dark)}

/* slider */
.tg-slider{margin-top:18px}
.tg-slider input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;
  background:transparent;height:26px;cursor:pointer;
}
.tg-slider input[type=range]::-webkit-slider-runnable-track{
  height:1px;background:var(--rule)}
.tg-slider input[type=range]::-moz-range-track{height:1px;background:var(--rule)}
.tg-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--ink);margin-top:-7px;border:0}
.tg-slider input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--ink);border:0}
.tg-slider-ends{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--light);
}
.tg-unitrow{display:flex;align-items:baseline;gap:10px}
.tg-unit{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}
.tg-hint{
  margin-top:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--light);text-align:center;
}

/* time slots */
.tg-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tg-slot{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:14px 16px;min-height:66px;
  background:rgba(255,255,255,.45);border:1px solid var(--rule);border-radius:2px;
  cursor:pointer;text-align:left;transition:border-color .2s,background .2s;
}
.tg-slot:hover{border-color:var(--ink);background:rgba(255,255,255,.75)}
.tg-slot-t{font-family:var(--sans);font-size:15px;color:var(--ink)}
.tg-slot-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;color:var(--light)}
@media(max-width:400px){.tg-slots{grid-template-columns:1fr}}

/* language grid */
.tg-langgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tg-langbtn{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  padding:14px 16px;min-height:62px;
  background:rgba(255,255,255,.45);border:1px solid var(--rule);border-radius:2px;
  cursor:pointer;text-align:left;transition:border-color .2s,background .2s;
}
.tg-langbtn:hover{border-color:var(--ink);background:rgba(255,255,255,.75)}
.tg-langnative{font-size:17px;line-height:1.25;color:var(--ink)}
.tg-langen{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--light)}

/* ---------------- drawn panel (right column) ---------------- */
.tg-figure{width:100%;max-width:400px}
.tg-figure svg{width:100%;height:auto;display:block;overflow:visible}
.tg-fig-cap{
  margin-top:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--light);text-align:center;
}
.tg-drawline{
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
  animation:tg-draw 1.15s cubic-bezier(.3,.7,.3,1) forwards;
}
@keyframes tg-draw{to{stroke-dashoffset:0}}
.tg-fadein{opacity:0;animation:tg-fade .55s ease .5s forwards}
@keyframes tg-fade{to{opacity:1}}
.tg-ring{transform-origin:center;animation:tg-ping 3s ease-out infinite}
.tg-ring2{animation-delay:1s}
.tg-ring3{animation-delay:2s}
@keyframes tg-ping{
  0%{transform:scale(.2);opacity:0}
  22%{opacity:.55}
  100%{transform:scale(1);opacity:0}
}
@media(max-width:860px){
  .tg-right{order:-1}
  .tg-figure{max-width:280px}
}

/* ---------------- foot ---------------- */
.tg-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 34px max(20px,env(safe-area-inset-bottom));
}
.tg-nav{
  background:none;border:0;cursor:pointer;padding:10px 2px;min-height:44px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:9px;transition:color .2s,gap .2s;
}
.tg-nav:hover{color:var(--ink);gap:13px}
.tg-nav[disabled]{opacity:.28;pointer-events:none}
.tg-nav.skip{color:var(--light)}
.tg-nav.skip:hover{color:var(--muted)}
.tg-primary{
  background:var(--dark);color:#F2EFE7;border:0;border-radius:2px;cursor:pointer;
  padding:15px 26px;min-height:48px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:11px;
  transition:background .24s,gap .24s;
}
.tg-primary:hover{background:var(--rust);gap:15px}
.tg-footmid{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
@media(max-width:860px){
  .tg-foot{padding:16px 22px max(18px,env(safe-area-inset-bottom))}
  .tg-primary{padding:14px 20px}
}

/* ---------------- brief card ---------------- */
.tg-brief{
  background:rgba(255,255,255,.62);border:1px solid var(--rule);
  padding:20px;position:relative;
  box-shadow:6px 6px 0 rgba(255,255,255,.4), 7px 7px 0 var(--hair);
}
.tg-brief h4{
  margin:0 0 16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-weight:400;
}
.tg-briefgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.tg-briefcell{min-width:0}
.tg-briefcell dt{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--light);margin-bottom:5px;
}
.tg-briefcell dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink);
  overflow-wrap:anywhere}
.tg-briefcell.wide{grid-column:1 / -1}

/* ---------------- done ---------------- */
.tg-done{padding:0 34px;max-width:620px}
.tg-done h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,32px);
  line-height:1.18;letter-spacing:-.025em;margin:0 0 12px;color:var(--ink);
}
.tg-done p{margin:0 0 16px;font-size:15px;line-height:1.62;color:var(--muted)}
.tg-sign{
  font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted);
  margin:0 0 4px;
}
.tg-summary{
  background:rgba(255,255,255,.6);border:1px solid var(--rule);
  padding:14px;font-family:var(--mono);font-size:11.5px;line-height:1.8;
  white-space:pre-wrap;word-break:break-word;max-height:190px;overflow:auto;color:var(--ink);
}
@media(max-width:860px){ .tg-done{padding:0 22px} }

.tg-hidden{display:none!important}
.tg-enq :where(button,input,textarea,[tabindex]):focus-visible{
  outline:1px solid var(--ink);outline-offset:3px;
}
.tg-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.tg-locked{overflow:hidden}
/* The site's custom cursor and grain sit at a higher stacking context than
   the page but below the overlay; leaving them on painted a stray ring over
   the panel's buttons. Hide them while the enquiry is open and restore the
   real pointer. */
body.tg-locked #cursor,
body.tg-locked #cursor-ping,
body.tg-locked #grain{display:none!important}
body.tg-locked,
body.tg-locked *{cursor:auto!important}
body.tg-locked button,
body.tg-locked a,
body.tg-locked .tg-chip,
body.tg-locked .tg-tile,
body.tg-locked .tg-slot,
body.tg-locked .tg-langbtn{cursor:pointer!important}
body.tg-locked input,
body.tg-locked textarea{cursor:text!important}

@media(prefers-reduced-motion:reduce){
  .tg-enq *,.tg-overlay,.tg-panel{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .tg-drawline{stroke-dashoffset:0!important}
  .tg-fadein{opacity:1!important}
  .tg-ring{animation:none!important;opacity:.3!important}
}