/* ------------------------------------------------------------------
   The three step form, and it is the approved preview verbatim.

   Self contained on purpose. brand.css is NOT loaded on this page for
   the same reason it is not loaded on the landing page: it underlines
   links, borders every button and owns the chrome, and mixing the two
   is what pulled the page away from the design.
   ------------------------------------------------------------------ */

/* ==================================================================
   Vishuddha Property Consultancy, the three step plot registration.
   Same tokens, same faces and the same layout positions as the home
   page preview: step bar on top, card in the middle, both side rails.
   ================================================================== */

:root{
  --paper:#FFFFFF;
  --ground:#E9F1FA;        /* the light blue field the client pointed at */
  --ground-2:#D8E7F5;
  --ink:#0A2440;
  --navy:#00447E;
  --mid:#4B5F77;
  --soft:#8296AC;
  --line:#CBDCED;
  --line-2:#E2EDF8;

  /* ---------------------------------------------------------------
     The gold is sampled from the logo file itself, not guessed. The
     mark runs #FAB840 at the top to #B58121 at the foot, so:
       --gold      the body of it, for marks, rules, fills and borders
       --gold-lt   the highlight, which is what reads on navy
       --gold-deep the foot of it, for borders and pressed states
       --gold-ink  gold coloured TEXT on a light ground. The real gold
                   only reaches 2.5:1 on white, which is unreadable, so
                   lettering uses this darker one instead.
     --------------------------------------------------------------- */
  --gold:#D69A2C;
  --gold-lt:#F0B03C;
  --gold-deep:#B58121;
  --gold-ink:#8A6614;
  --gold-wash:#FAF1DC;

  /* the primary. Every button, the meter, every focus ring, every
     finished step. This is the blue the whole page now turns on. */
  --green:#00539C;
  --green-2:#1372CB;
  --green-wash:#E2EEFB;

  --c-blue:#1D5B96;  --rgb-blue:29,91,150;    --w-blue:#E6F0FA;
  --c-grn:#17705A;   --rgb-grn:23,112,90;     --w-grn:#E1F1EE;
  --c-ind:#3B4A87;   --rgb-ind:59,74,135;     --w-ind:#E9ECFA;
  --c-amb:#B0731A;   --rgb-amb:176,115,26;    --w-amb:#FBF0DC;

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans","Segoe UI",Arial,system-ui,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --wrap:1280px;          /* same as the home page */
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--green-2);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,1.9vw,40px)}
.wrap>*{min-width:0}
.tag{font-family:var(--data);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}

/* ------------------------------------------------------------ header */
.head{background:var(--paper);border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;gap:34px;min-height:86px;flex-wrap:wrap}
.head .logo{display:flex;align-items:center;gap:14px}
.head .logo img{height:56px;width:auto}
.head .logo span{font-family:var(--data);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);max-width:120px;line-height:1.55}
.head .calls{display:flex;align-items:center;gap:18px;margin-left:auto}
.phone-lg{font-family:var(--data);font-size:14.5px;color:var(--navy);white-space:nowrap}
.phone-lg small{display:block;font-family:var(--body);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--green);color:#fff;padding:13px 22px;border-radius:2px;font-size:14.5px;font-weight:500;white-space:nowrap;transition:background .18s ease,transform .18s ease}
@media (hover:hover) and (pointer:fine){ .btn:hover{background:#003F7A;transform:translateY(-1px)} }
.btn .arw{font-family:var(--data);font-size:13px}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover) and (pointer:fine){ .btn.ghost:hover{background:var(--paper);box-shadow:inset 0 0 0 1px var(--navy)} }
.btn.small{padding:9px 15px;font-size:13px}

/* ------------------------------------------------------- page opening */
.opening{background:var(--ground);padding:40px 0 0;position:relative;overflow:hidden}
.opening::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(0,83,156,.075) 1px,transparent 1px),linear-gradient(to bottom,rgba(184,135,59,.085) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(90% 80% at 20% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(90% 80% at 20% 0%,#000 0%,transparent 70%)}
.opening .wrap{position:relative}
.opening h1{font-size:clamp(26px,2.6vw,34px);line-height:1.08;color:var(--navy);margin-top:12px;max-width:26ch}
.opening h1 em{font-style:italic;color:var(--gold-ink);font-weight:300}
.opening .lede{font-size:16px;color:var(--mid);max-width:64ch;margin-top:13px}
.opening .assure{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px}
.opening .assure span{font-size:13px;color:var(--mid);display:flex;align-items:center;gap:8px}
.opening .assure span::before{content:"";width:7px;height:7px;background:var(--gold-lt);transform:rotate(45deg);flex:none}

/* ----------------------------------------------------- the form shell */
.form-shell{display:grid;grid-template-columns:256px minmax(0,1fr) 280px;gap:28px;align-items:start;padding:30px 0 60px}
.rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:60px}
.promo{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:18px}
.promo h3,.promo h4{font-family:var(--data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 11px;font-weight:500}
.promo ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.promo li{font-size:12.5px;color:var(--mid);line-height:1.5;padding-left:16px;position:relative}
.promo li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--gold-lt);transform:rotate(45deg)}
.promo li b{display:block;color:var(--ink);font-weight:600;font-size:13px}
.promo p{font-size:12.5px;color:var(--mid);line-height:1.5}
.promo.navy{background:var(--navy);border-color:var(--navy)}
.promo.navy h3,.promo.navy h4{color:var(--gold-lt)}
.promo.navy p{font-size:12.5px;color:#B9C6D6;line-height:1.5}
.promo.navy .phone,.promo.navy .ph{display:block;font-family:var(--data);font-size:19px;color:#fff;margin:6px 0 8px}
.stamps{display:flex;flex-wrap:wrap;gap:6px}
.stamps span{font-family:var(--data);font-size:10px;letter-spacing:.08em;color:var(--navy);border:1px solid var(--line);padding:4px 8px;border-radius:2px}
/* the contextual tip, which is what tells a seller what this step wants */
.tip{background:var(--green-wash);border:1px solid #B4D2F0;border-radius:6px;padding:16px 17px}
.tip h4{font-family:var(--data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0 0 9px;font-weight:500}
.tip p{font-size:12.5px;color:#274A6E;line-height:1.55}
.tip p + p{margin-top:8px}

.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 22px 48px -38px rgba(16,27,41,.5)}

/* ----------------------------------------------- the three step bar */
.steps-bar{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--ground);overflow-x:auto;scrollbar-width:thin}
.steps-bar .s{flex:1 0 auto;min-width:104px;padding:12px 12px 11px;text-align:left;border-right:1px solid var(--line-2);color:var(--soft);position:relative;transition:background .2s ease,color .2s ease}
.steps-bar .s:last-child{border-right:0}
.steps-bar .s{display:flex;flex-direction:column;justify-content:flex-start;gap:2px}
.steps-bar .s b{display:block;font-family:var(--data);font-size:10px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:3px}
.steps-bar .s i{font-style:normal;font-size:12px;line-height:1.3;display:block}
@media (hover:hover) and (pointer:fine){ .steps-bar .s:hover{background:var(--paper);color:var(--navy)} }
.steps-bar .s.done{color:var(--green);background:var(--green-wash)}
.steps-bar .s.on{color:var(--navy);background:var(--paper)}
.steps-bar .s.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold)}
.pageline{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 26px;border-bottom:1px solid var(--line-2);font-size:12px;color:var(--soft);flex-wrap:wrap}
.pageline b{font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);font-weight:500}
.meter{height:2px;background:var(--line-2);position:relative}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--green);transition:width .4s cubic-bezier(.5,0,.2,1)}

.fbody{padding:26px 30px 30px}
.fbody>h2{font-size:24px;color:var(--navy);font-weight:600;letter-spacing:-.01em}
.fbody>h2::after{content:"";display:block;width:54px;height:3px;background:var(--gold);margin-top:11px;border-radius:2px}
.fbody .blurb{font-size:14.5px;color:var(--mid);margin-top:7px;max-width:70ch}
.panel{display:none}
.panel.on{display:block;animation:swap .34s ease}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.group{margin-top:26px}
.group>.glabel{display:flex;align-items:baseline;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--line-2);margin-bottom:16px;flex-wrap:wrap}
.group>.glabel b{font-family:var(--data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
                 color:var(--navy);font-weight:600;display:flex;align-items:center;gap:9px}
/* a slim upright rule rather than a diamond: it marks the heading without
   decorating it, and does not repeat the ornament used out in the rails */
.group>.glabel b::before{content:"";flex:none;width:3px;height:14px;border-radius:1px;
                         background:var(--gold)}
.group>.glabel span{font-size:12px;color:var(--soft)}

/* --------------------------------------------------------- controls */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:17px 20px}
.fgrid.three{grid-template-columns:1fr 1fr 1fr}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
/* display:flex would otherwise beat the hidden attribute, which is what
   keeps the "tell us which" boxes out of sight until they are needed */
.fld[hidden],.pair[hidden]{display:none}
.fld.wide{grid-column:1/-1}

/* ------------------------------------------------- two boxes sharing a line
   The one on the right follows from the one on the left, so they are read
   together: mandal and its district, village and its sub registrar office. */
.pair{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:17px 20px;min-width:0}
.pair>.fld{min-width:0}

/* ------------------------------------------------------------- approvals
   One list, ruled between the rows, rather than six cards floating apart at
   whatever height their contents happened to make them. Every row is the same
   height whether or not it has a number to give, so the column of ticks and
   the column of boxes both read straight down. */
.approvals{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--paper)}
.appr{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);
      gap:0 22px;align-items:center;padding:12px 18px;min-height:86px;
      border-top:1px solid var(--line-2);transition:background .18s ease}
.appr:first-child{border-top:0}
.appr:has(input[type=checkbox]:checked){background:var(--green-wash)}
.appr.bad{background:rgba(190,52,52,.05)}
.appr-tick{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;
           color:var(--navy);cursor:pointer;min-width:0}
.appr-tick input{position:absolute;opacity:0;width:0;height:0}
.appr-tick .dot{flex:none;width:18px;height:18px;border:1.6px solid #b9c6d4;border-radius:3px;
                background:var(--paper);position:relative;
                transition:border-color .18s ease,background .18s ease}
.appr-tick .dot::after{content:"";position:absolute;left:5.2px;top:1.8px;width:5px;height:10px;
                       border:solid var(--paper);border-width:0 2.2px 2.2px 0;
                       transform:rotate(45deg) scale(.5);opacity:0;
                       transition:opacity .15s ease,transform .15s ease}
.appr-tick input:checked+.dot{background:var(--green);border-color:var(--green)}
.appr-tick input:checked+.dot::after{opacity:1;transform:rotate(45deg) scale(1)}
.appr-tick input:focus-visible+.dot{box-shadow:0 0 0 3px rgba(0,83,156,.22)}

/* the right hand column, the same height on every row */
.appr-no{display:grid;grid-template-columns:1fr;gap:0 16px;align-content:center;min-width:0}
/* Others names its authority and then gives that authority's LP number */
.appr-no.two{grid-template-columns:1fr 1fr}
.appr-box{display:flex;flex-direction:column;gap:5px;min-width:0}
.appr-no label{font-size:11px;font-weight:600;color:var(--soft);letter-spacing:.03em}
.appr-no input{font:inherit;font-size:15px;padding:9px 12px;border:1px solid var(--line);
               border-radius:3px;background:var(--paper);color:var(--ink);width:100%;
               transition:border-color .18s ease,box-shadow .18s ease}
.appr-no input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,83,156,.16)}
/* shut until the approval beside it is ticked */
.appr-no.off{opacity:.5}
.appr-no.off input{background:var(--ground);color:var(--soft);cursor:not-allowed}
/* a row that has no number to give still fills its half of the line */
.appr-no.none{justify-content:center}
.appr-no.none span{font-size:12.5px;color:#aab6c4}

/* --------------------------------------------------- what the price comes to
   A rate for each square yard means little on its own. The figure the seller
   is actually deciding about is the whole plot, so it is shown large. */
.pricebox{margin-top:18px;border:1px solid var(--line);border-left:3px solid var(--gold);
          border-radius:4px;background:var(--ground);padding:16px 18px}
.pricebox[hidden]{display:none}
.pb-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pb-head b{font-family:var(--data);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
           color:var(--navy);font-weight:600}
.pb-head span{font-size:12.5px;color:var(--soft)}
.pb-figs{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.pb-fig{display:flex;flex-direction:column;gap:3px;min-width:0;padding:11px 14px;border-radius:4px;
        background:var(--paper);border:1px solid var(--line-2)}
.pb-fig.hi{border-color:var(--green);background:var(--green-wash)}
.pb-cap{font-size:11.5px;font-weight:600;color:var(--soft);letter-spacing:.02em}
.pb-fig b{font-size:clamp(19px,2.1vw,25px);color:var(--navy);font-weight:600;line-height:1.2;
          overflow-wrap:anywhere}
.pb-fig.hi b{color:var(--green)}
.pb-words{font-size:12.5px;color:var(--soft)}
.pb-words:empty{display:none}
.pb-note{margin-top:12px;font-size:12.5px;color:var(--mid);line-height:1.55}
.fld label,.fld .lbl{font-size:12.5px;font-weight:600;color:var(--navy)}
.fld label i,.fld .lbl i{font-style:normal;color:var(--soft);font-weight:400}
.fld input,.fld select,.fld textarea{font:inherit;font-size:15.5px;padding:11px 13px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);width:100%;transition:border-color .18s ease,box-shadow .18s ease}
.fld textarea{min-height:88px;resize:vertical;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,83,156,.16)}
.fld select:disabled{background:var(--ground);color:var(--soft);cursor:not-allowed}
.fld input.mono{font-family:var(--data);letter-spacing:.04em}
.fld .hint{font-size:11.5px;color:var(--soft);line-height:1.45}
.typein[hidden]{display:none}
select[hidden]{display:none}
.unit-in{position:relative}
.unit-in input{padding-right:52px}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
.unit-in span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--data);font-size:11px;color:var(--soft);letter-spacing:.06em}

/* chips */
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);border-radius:40px;font-size:13.5px;color:var(--mid);background:var(--paper);transition:all .18s ease}
@media (hover:hover) and (pointer:fine){ .chip:hover{border-color:var(--green);color:var(--green)} }
.chip .dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--line);transition:all .18s ease}
.chip[aria-pressed="true"]{border-color:var(--green);background:var(--green-wash);color:var(--green);font-weight:600}
.chip[aria-pressed="true"] .dot{background:var(--green);border-color:var(--green);box-shadow:0 0 0 2px var(--green-wash) inset}

/* the toggle between the two ways of giving an area */
.switch{display:inline-flex;background:var(--ground);border:1px solid var(--line);border-radius:40px;padding:3px;gap:3px}
.switch button{padding:8px 16px;border-radius:40px;font-size:13px;color:var(--mid);transition:all .2s ease}
.switch button[aria-pressed="true"]{background:var(--paper);color:var(--navy);font-weight:600;box-shadow:0 2px 6px -2px rgba(16,27,41,.28)}

/* the four units, all shown at once so nobody has to choose */
.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:16px}
.area-cell{background:var(--paper);padding:15px 14px;text-align:center;transition:background .25s ease}
.area-cell.lead{background:var(--green-wash)}
.area-cell b{display:block;font-family:var(--data);font-size:21px;font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.2}
.area-cell.lead b{color:var(--green)}
.area-cell span{display:block;font-family:var(--data);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--soft);margin-top:5px}
.areas-note{font-size:12px;color:var(--soft);margin-top:9px}

/* road and boundary rows */
.sides{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.side{display:grid;grid-template-columns:104px minmax(0,1.1fr) minmax(0,.85fr) minmax(0,.85fr);gap:14px;align-items:center;background:var(--paper);padding:14px 16px}
.side .dir{display:flex;align-items:center;gap:10px}
.side .dir .badge{width:32px;height:32px;border-radius:6px;background:var(--w-ind);color:var(--c-ind);font-family:var(--data);font-size:12px;font-weight:500;display:grid;place-items:center}
.side .dir b{font-size:13.5px;font-weight:600;color:var(--ink)}
.side select,.side input{font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);width:100%}
.side select:focus,.side input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,83,156,.16)}
.side .rw{position:relative}
.side .rw input{padding-right:48px}
.side .rw span{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-family:var(--data);font-size:10.5px;color:var(--soft)}
.side .rw.off,.side .pn.off{opacity:.32;pointer-events:none}
.side .pn{position:relative}
.prefill-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px;font-size:12.5px;color:var(--soft)}

/* ------------------------------------------------ the 3D plot viewer */
.viewer{margin-top:24px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
.viewer-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap;background:linear-gradient(150deg,#00539C 0%,#062A4D 100%);color:#fff}
.viewer-head .tag{color:#A9C8E8;font-size:10px}
.viewer-head h3{font-family:var(--body);font-size:14.5px;font-weight:600;letter-spacing:.03em;color:#fff}
.viewer-head .new{margin-left:auto;font-family:var(--data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#062A4D;background:var(--gold-lt);padding:4px 10px;border-radius:2px}
.stage{position:relative;background:linear-gradient(180deg,#E8EFF8 0%,#D3E1F0 100%)}
#plot3d{display:block;width:100%;height:480px;touch-action:none;cursor:grab}
#plot3d.grabbing{cursor:grabbing}
#plotlabels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.noglmsg{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;color:var(--mid)}
.noglmsg b{display:block;font-size:15px;color:var(--navy);margin-bottom:6px}
.noglmsg p{font-size:13px}
.stage-hint{position:absolute;left:16px;bottom:14px;font-family:var(--data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);background:rgba(255,255,255,.86);padding:6px 11px;border-radius:2px;pointer-events:none}
.compass{position:absolute;right:16px;top:14px;width:60px;height:60px;pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding:11px 18px;border-top:1px solid var(--line-2);background:var(--paper)}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mid)}
.legend i{width:11px;height:11px;border-radius:2px;border:1px solid rgba(16,27,41,.18);flex:none}
.viewer-tools{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line-2);flex-wrap:wrap;background:var(--ground)}
.tool{font-family:var(--data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);border:1px solid var(--line);background:var(--paper);padding:8px 13px;border-radius:3px;transition:all .18s ease}
@media (hover:hover) and (pointer:fine){ .tool:hover{border-color:var(--c-ind);color:var(--c-ind)} }
.tool[aria-pressed="true"]{background:var(--c-ind);border-color:var(--c-ind);color:#fff}
.viewer-tools .spacer{margin-left:auto;font-size:11.5px;color:var(--soft)}

/* what the buyer will see, step 5 */
.public{margin-top:22px;border:1px dashed var(--c-grn);border-radius:8px;background:var(--w-grn);padding:18px 20px}
.public h4{font-family:var(--data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-grn);margin:0 0 12px;font-weight:500}
.public-card{background:var(--paper);border:1px solid rgba(var(--rgb-grn),.3);border-radius:6px;padding:16px 18px}
.public-card .price{font-family:var(--data);font-size:21px;font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}
.public-card .neg{display:inline-block;margin-left:10px;font-size:11.5px;font-weight:600;color:var(--c-grn);background:var(--w-grn);padding:4px 10px;border-radius:40px;vertical-align:middle}
.public-card p{font-size:13.5px;color:var(--mid);margin-top:9px;line-height:1.55}
.public>p{font-size:12px;color:#2C5A4A;margin-top:11px;line-height:1.5}

/* categorised amenity blocks, step 6 */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cat{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
.cat-head{display:flex;align-items:center;gap:11px;padding:12px 16px;background:var(--w);border-bottom:1px solid var(--line-2)}
.cat-head .ic{width:30px;height:30px;border-radius:7px;background:var(--c);display:grid;place-items:center;flex:none}
.cat-head .ic svg{width:16px;height:16px;color:#fff}
.cat-head b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.cat-head i{font-style:normal;font-size:11.5px;color:var(--soft);margin-left:auto;font-family:var(--data)}
/* one full width row per tick, so every group reads as the same list
   instead of chips wrapping into a ragged block of different widths */
.cat-body{padding:14px 14px 16px;display:grid;grid-template-columns:1fr;gap:7px;align-content:start}
.cat .chip{font-size:13px;padding:9px 13px;width:100%;justify-content:flex-start;text-align:left;border-radius:6px;line-height:1.35}
@media (hover:hover) and (pointer:fine){ .cat .chip:hover{border-color:var(--c);color:var(--c)} }
.cat .chip[aria-pressed="true"]{border-color:var(--c);background:var(--w);color:var(--c)}
.cat .chip[aria-pressed="true"] .dot{background:var(--c);border-color:var(--c)}

/* document and photograph guidance */
.docs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#uploads{grid-template-columns:repeat(3,1fr)}
.doc{border:1px solid var(--line);border-radius:8px;padding:16px 17px;background:var(--paper);display:flex;gap:14px;transition:border-color .2s ease,box-shadow .2s ease}
@media (hover:hover) and (pointer:fine){ .doc:hover{border-color:var(--c-blue);box-shadow:0 14px 28px -24px rgba(var(--rgb-blue),.8)} }
.doc .ic{width:38px;height:38px;flex:none;border-radius:8px;background:var(--w-blue);display:grid;place-items:center}
.doc .ic svg{width:19px;height:19px;color:var(--c-blue)}
.doc b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.doc>div{display:flex;flex-direction:column;flex:1;min-width:0}
/* the title reserves two lines and the drop box is pushed to the floor
   of the card, so every drop box in the row sits on the same line no
   matter how long the name or the explanation above it runs */
.doc b{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:38px}
.doc .why{font-size:12.5px;color:var(--mid);margin-top:5px;line-height:1.5;padding-bottom:11px}
.doc .drop{margin-top:auto;border:1px dashed var(--line);border-radius:5px;padding:9px 12px;font-size:12px;color:var(--soft);display:flex;align-items:center;gap:8px;transition:all .18s ease}
@media (hover:hover) and (pointer:fine){ .doc .drop:hover{border-color:var(--c-blue);color:var(--c-blue);background:var(--w-blue)} }
.doc .opt{font-family:var(--data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);padding:2px 7px;border-radius:2px;margin-left:8px;vertical-align:middle}
.doc .req{color:var(--c-amb);border-color:var(--c-amb)}

.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.shot{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
.shot .frame{height:96px;background:var(--ground-2);display:grid;place-items:center;border-bottom:1px solid var(--line-2);position:relative}
.shot .frame svg{width:34px;height:34px;color:var(--soft)}
.shot .frame .n{position:absolute;top:8px;left:9px;font-family:var(--data);font-size:10px;color:var(--soft)}
.shot .cap{padding:11px 13px}
.shot b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.shot p{font-size:11.5px;color:var(--mid);margin-top:4px;line-height:1.45}

/* the review, step 9 */
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:18px}
.rrow{background:var(--paper);padding:14px 17px;display:flex;align-items:flex-start;gap:12px}
.rrow .n{font-family:var(--data);font-size:10.5px;color:var(--soft);flex:none;width:20px;padding-top:2px}
.rrow .t{min-width:0;flex:1}
.rrow b{display:block;font-size:11px;font-family:var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);font-weight:500}
.rrow span{display:block;font-size:14px;color:var(--ink);margin-top:3px;line-height:1.4}
.rrow .edit{font-size:11.5px;color:var(--c-blue);border-bottom:1px solid rgba(var(--rgb-blue),.35);flex:none}
@media (hover:hover) and (pointer:fine){ .rrow .edit:hover{color:var(--navy);border-bottom-color:var(--navy)} }

.after{margin-top:22px;border:1px solid rgba(var(--rgb-grn),.34);border-radius:8px;overflow:hidden}
.after-head{background:var(--c-grn);color:#fff;padding:14px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.after-head b{font-size:14.5px;font-weight:600;letter-spacing:.03em}
.after-head span{font-size:12.5px;color:rgba(255,255,255,.86);margin-left:auto}
.after-body{background:var(--paper);padding:18px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.after-item{display:flex;gap:12px}
.after-item .n{width:26px;height:26px;flex:none;border-radius:50%;background:var(--w-grn);color:var(--c-grn);font-family:var(--data);font-size:11px;display:grid;place-items:center}
.after-item b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.after-item p{font-size:12.5px;color:var(--mid);margin-top:4px;line-height:1.5}

.consent{margin-top:20px;display:flex;gap:12px;align-items:flex-start;background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:15px 17px}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--green)}
.consent label{font-size:13px;color:var(--mid);line-height:1.55}
.consent label b{color:var(--ink);font-weight:600}

/* the foot of the card: what is happening on the left, the two ways out
   of the step together on the right, so neither side is ever a gap */
.f-actions{display:flex;align-items:center;gap:16px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.f-actions .note{font-size:11.5px;color:var(--soft);margin-right:auto;max-width:44ch}
.f-actions .go{display:flex;align-items:center;gap:10px;margin-left:auto}

.proposal{display:inline-flex;align-items:center;gap:7px;font-family:var(--data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-amb);border:1px solid var(--c-amb);background:var(--w-amb);padding:4px 10px;border-radius:2px;margin-left:12px;vertical-align:middle}
.subhead{font-family:var(--display);font-size:23px;font-weight:400;letter-spacing:-.01em;color:var(--navy);margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line-2);position:relative}
.subhead::before{content:"";position:absolute;left:0;top:-1px;width:52px;height:2px;background:var(--gold)}
.blurb.sub{font-size:14.5px;color:var(--mid);margin-top:8px}



/* ==================================================================
   The parts the preview had no need of: it was one page driven by
   JavaScript, this is three pages driven by the server. Written in the
   preview's own language so nothing looks bolted on.
   ================================================================== */

.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}

/* the notices above the form */
.notice{border-radius:7px;padding:14px 17px;margin-bottom:20px;font-size:13.5px;line-height:1.55;
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.notice b{display:block;font-size:14px;margin-bottom:3px}
.notice.bad{background:#FDECEA;border:1px solid rgba(176,58,46,.4);color:#8C2C22}
.notice.bad b{color:#8C2C22}
.notice.warn{background:var(--gold-wash);border:1px solid rgba(181,129,33,.4);color:#6B4E12}
.notice ul{margin:8px 0 0;padding-left:18px}
.notice a{color:inherit;text-decoration:underline}
.notice .btn{margin-left:auto}

/* one field, the preview's .fld with the app's required and error marks */
.fld .star{color:#B03A2E;margin-left:3px}
.fld .opt{color:var(--soft);font-weight:400;font-size:11.5px;margin-left:5px}
.fld .err{display:block;margin-top:6px;font-size:12px;color:#B03A2E}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:#B03A2E}
.fld textarea{width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:6px;padding:11px 13px;resize:vertical}
.fld textarea:focus{outline:0;border-color:var(--green-2);box-shadow:0 0 0 3px rgba(19,114,203,.16)}
.fld.muted{opacity:.5}

/* the summary, which the preview builds in JavaScript */
.summary{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:18px}
.summary .r{background:var(--paper);padding:14px 17px;display:flex;align-items:flex-start;gap:12px}
.summary .k{flex:1;min-width:0;font-size:11px;font-family:var(--data);letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft)}
.summary .v{flex:2;min-width:0;font-size:14px;color:var(--ink);line-height:1.4}
.summary .v.empty{color:var(--soft);font-style:italic}
.summary .e a{font-size:11.5px;color:var(--c-blue);border-bottom:1px solid rgba(29,91,150,.35)}
@media (hover:hover) and (pointer:fine){ .summary .e a:hover{color:var(--navy);border-bottom-color:var(--navy)} }

/* the consent block */
.agree{display:flex;gap:13px;align-items:flex-start;margin-top:24px;padding:17px 19px;
  background:var(--green-wash);border:1px solid #B4D2F0;border-radius:8px}
.agree input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--green)}
.agree b label{font-size:14.5px;color:var(--ink);cursor:pointer}
.agree .t{font-size:13px;color:#274A6E;line-height:1.55}
.agree.bad{background:#FDECEA;border-color:rgba(176,58,46,.45)}
.agree .err{color:#B03A2E;margin-top:6px}

/* the row of buttons at the foot of every step */
.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px;padding-top:22px;
  border-top:1px solid var(--line-2)}
.nav .say{font-size:12.5px;color:var(--soft);margin-right:auto}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--green);color:#fff;
  padding:13px 22px;border-radius:2px;font-size:14.5px;font-weight:500;white-space:nowrap;border:0;
  cursor:pointer;transition:background .18s ease,transform .18s ease}
@media (hover:hover) and (pointer:fine){ .btn:hover{background:#003F7A;transform:translateY(-1px)} }
.btn .arw{font-family:var(--data);font-size:13px}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover) and (pointer:fine){ .btn.ghost:hover{background:var(--paper);box-shadow:inset 0 0 0 1px var(--navy)} }
.btn.small{padding:9px 15px;font-size:13px}
.clear-link{font-size:12.5px;color:var(--soft);border-bottom:1px solid transparent;background:none}
@media (hover:hover) and (pointer:fine){ .clear-link:hover{color:#B03A2E;border-bottom-color:#B03A2E} }

/* the footer, the same one the landing page carries */
.foot{background:var(--ground-2);padding:52px 0 30px;margin-top:60px}
.foot .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.foot img{height:56px;width:auto}
.foot p{font-size:13.5px;color:var(--mid);margin-top:14px;max-width:34ch}
.foot h4{font-family:var(--data);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);margin:0 0 14px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot ul a{font-size:14px;color:var(--mid)}
@media (hover:hover) and (pointer:fine){ .foot ul a:hover{color:var(--navy)} }
.foot ul .addr{font-size:12.5px;color:var(--soft);line-height:1.5;max-width:34ch}
.foot-end{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;
  color:var(--soft);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:900px){.foot .wrap{grid-template-columns:1fr}}
@media (max-width:760px){.summary{grid-template-columns:1fr}}

/* The two breakpoints the preview carried and this file had lost. Without
   them the three column shell, the rails and every tick grid stayed wide
   on a tablet or a phone and the page simply overflowed. */
@media (max-width:1220px){
  .form-shell{grid-template-columns:1fr}
  .rail{position:static;display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .after-body{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .rail{grid-template-columns:1fr}
  .fgrid,.fgrid.three{grid-template-columns:1fr}
  .areas{grid-template-columns:1fr 1fr}
  .side{grid-template-columns:1fr;gap:10px}
  .cats,.docs,.review-grid{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr 1fr}
  .fbody{padding:22px 18px 24px}
  #plot3d{height:330px}
}

/* ==================================================================
   The chips are real checkboxes here, not the preview's buttons, so the
   form works with JavaScript switched off. The input itself is taken out
   of the flow and the label carries the whole look, and :has() does the
   ticked state.
   ================================================================== */

.chips .chip input { position: absolute; opacity: 0; width: 0; height: 0; }

.chips .chip { cursor: pointer; }
.chips .chip:has(input:checked),
.chips .chip.on {
  border-color: var(--green); background: var(--green-wash);
  color: var(--green); font-weight: 600;
}
.chips .chip:has(input:checked) .dot,
.chips .chip.on .dot {
  background: var(--green); border-color: var(--green);
  box-shadow: 0 0 0 2px var(--green-wash) inset;
}
.chips .chip:has(input:focus-visible) { outline: 2px solid var(--green-2); outline-offset: 3px; }

/* the tick lists that the sheet groups: site condition and documents get
   one full width row each, the way the design settled on */
.fld[data-name="site_features"] .chips,
.fld[data-name="documents_have"] .chips {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.fld[data-name="site_features"] .chip,
.fld[data-name="documents_have"] .chip {
  width: 100%; justify-content: flex-start; text-align: left;
  border-radius: 6px; padding: 10px 14px; line-height: 1.35;
}
@media (max-width: 760px) {
  .fld[data-name="site_features"] .chips,
  .fld[data-name="documents_have"] .chips { grid-template-columns: 1fr; }
}

/* the three upload boxes, as the design's dashed drop targets */
.fld .drop input[type="file"] { width: 100%; font-size: 13px; color: var(--mid); }
.fld .drop { margin-top: 4px; }

/* ==================================================================
   Classes the templates have always written that this sheet never had
   a rule for. They are the reason the form drifted from the preview:
   the rail headings fell through to the big serif, the rail illustration
   sat bare, the What happens next list ran its title into its text, the
   note in the step footer did not push the buttons right, and Back came
   out the same solid blue as Continue.
   ================================================================== */

/* the illustration at the head of a rail */
.promo-shot{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.promo-shot img{width:100%;height:auto;display:block}
.promo-shot figcaption{font-size:12px;color:var(--mid);line-height:1.45;padding:10px 14px 12px;border-top:1px solid var(--line-2)}

/* What happens next, the same shape as .promo li but built from divs */
.steps-mini{display:flex;flex-direction:column;gap:11px}
.steps-mini>div{font-size:12.5px;color:var(--mid);line-height:1.5;padding-left:16px;position:relative}
.steps-mini>div::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--gold-lt);transform:rotate(45deg)}
.steps-mini b{display:block;color:var(--ink);font-weight:600;font-size:13px}

/* the panels that are extra once the rails drop under the card */
@media (max-width:760px){.panel-hide-small{display:none}}

/* the note on the left of the step footer, the preview's .nav .say */
.nav .note-left{font-size:12.5px;color:var(--soft);line-height:1.5;max-width:46ch;margin-right:auto}

/* the same sentence in the line above the card, kept on the right */
.save-note{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end;text-align:right}

/* Back. The sheet styles .ghost, the template writes .sec, same button */
.btn.sec{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover) and (pointer:fine){ .btn.sec:hover{background:var(--paper);color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)} }

/* ==================================================================
   The responsive pass.

   Everything above was sized on one large monitor: fixed pixel type,
   fixed rails and a shell that only collapsed below 1220px. A 1366
   laptop therefore got a desktop's sizes in a smaller window, the
   three step bar overflowed and grew a horizontal scrollbar, and the
   card was squeezed between two rails that never gave way.

   These rules make one design hold from a 360px phone to a wide
   monitor: type and spacing scale with the viewport, the rails give
   way before the card does, and nothing scrolls sideways.
   ================================================================== */
:root {
  --wrap: min(1720px, 94vw);

  /* one fluid step for type: a minimum that stays readable on a phone,
     a slope that follows the viewport, and a cap so a large monitor is
     not shouted at */
  --fs-xs:   clamp(10px,   0.10vw + 9.2px,  11px);
  --fs-sm:   clamp(11.5px, 0.18vw + 10.4px, 13px);
  --fs-base: clamp(13.5px, 0.22vw + 12.2px, 15.5px);
  --fs-lg:   clamp(15px,   0.30vw + 13.5px, 18px);
  --fs-h2:   clamp(18px,   0.75vw + 14.5px, 26px);
  --fs-h3:   clamp(16px,   0.50vw + 13.5px, 22px);

  /* and one for the space around things */
  --pad-card:  clamp(16px, 1.7vw, 30px);
  --gap-shell: clamp(14px, 1.5vw, 28px);
  --rail-l:    clamp(186px, 16vw, 300px);
  --rail-r:    clamp(196px, 17vw, 324px);
}

body { font-size: var(--fs-base); }

.form-shell {
  grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r);
  gap: var(--gap-shell);
  padding: clamp(18px, 2vw, 30px) 0 clamp(36px, 4vw, 60px);
}
.fbody { padding: var(--pad-card) var(--pad-card) calc(var(--pad-card) + 4px); }
.group { margin-top: clamp(18px, 2vw, 26px); }

/* the step bar is three steps, so it is three columns and never scrolls */
.steps-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.steps-bar .s { flex: none; min-width: 0; padding: clamp(9px, 0.9vw, 13px) clamp(8px, 0.9vw, 13px); }
.steps-bar .s b { font-size: var(--fs-xs); }
.steps-bar .s i { font-size: var(--fs-sm); overflow-wrap: anywhere; }

.pageline { padding: 9px var(--pad-card); font-size: var(--fs-sm); }
.body h1  { font-size: var(--fs-h2); }
.subhead  { font-size: var(--fs-h3); margin-top: clamp(26px, 3vw, 44px); padding-top: clamp(16px, 1.8vw, 26px); }
.blurb, .body .blurb { font-size: var(--fs-base); }
.blurb.sub { font-size: var(--fs-sm); }

.fld label, .f label.lbl, .f span.lbl { font-size: var(--fs-sm); }
.fld input, .fld select, .fld textarea,
.f input, .f select, .f textarea,
.side select, .side input {
  font-size: var(--fs-base);
  padding: clamp(8px, 0.8vw, 11px) clamp(9px, 0.9vw, 12px);
}
.fld .hint, .f .hint, .hint { font-size: var(--fs-xs); }
.glabel b { font-size: var(--fs-sm); }
.glabel span { font-size: var(--fs-xs); }
.btn, a.btn { font-size: var(--fs-sm); padding: clamp(10px, 1vw, 13px) clamp(16px, 1.8vw, 26px); }
.chip { font-size: var(--fs-sm); padding: clamp(7px, 0.7vw, 9px) clamp(11px, 1.2vw, 15px); }
.promo li, .promo p, .promo.navy p, .tip p { font-size: var(--fs-xs); }
.promo, .tip { padding: clamp(13px, 1.3vw, 18px); }

/* ---------------------------------------------------- laptops first.
   Below this the right rail goes under the card instead of stealing
   width from it, which is what made a 1366 screen feel cramped. */
/* Between a phone and a wide screen the page keeps a side rail, the way the
   desktop has one, rather than dropping everything under the form. The card
   holds the left column and both rails stack down the right. */
@media (min-width: 641px) and (max-width: 1250px) {
  .form-shell {
    grid-template-columns: minmax(0, 1fr) clamp(196px, 24vw, 248px);
    align-items: start;
    /* the card is taller than the two rails, so pack the rows at the
       top rather than letting the slack fall between them */
    align-content: start;
  }
  .form-shell > .card { grid-column: 1; grid-row: 1 / span 2; }
  .rail.left  { grid-column: 2; grid-row: 1; position: static;
                display: flex; flex-direction: column; gap: 12px; }
  .rail.right { grid-column: 2; grid-row: 2; position: static;
                display: flex; flex-direction: column; gap: 12px; }
  .promo-shot { display: none; }
}

/* the left rail follows at tablet width */
@media (max-width: 640px) {
  .form-shell { grid-template-columns: minmax(0, 1fr); }
  .rail, .rail.left, .rail.right {
    position: static; grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px; align-items: start;
  }
}

/* a phone: one column of everything, and the step bar stacks its label */
@media (max-width: 640px) {
  .form-shell { padding-top: 14px; }
  .rail, .rail.left, .rail.right { grid-template-columns: 1fr; }
  .fgrid, .fgrid.three, .cats, .docs, .review-grid, .summary { grid-template-columns: 1fr; }
  .areas { grid-template-columns: 1fr 1fr; }
  .side { grid-template-columns: 1fr; gap: 10px; }
  /* on a phone only the step number shows, the title would not fit three
     across. The title is an element of its own now, so it is simply hidden. */
  .steps-bar .s b { font-size: var(--fs-xs); margin-bottom: 0; }
  .steps-bar .s i { display: none; }

  /* the new blocks stack rather than sitting two across */
  .appr { grid-template-columns: 1fr; gap: 9px; align-items: start; min-height: 0; }
  .appr-no.two { grid-template-columns: 1fr; gap: 9px; }
  .pair { grid-template-columns: 1fr; }
  .pb-figs { grid-template-columns: 1fr; }
  .pageline { padding: 9px 16px; }
  .f-actions, .nav { flex-wrap: wrap; }
  .f-actions .note, .nav .note-left { order: 3; width: 100%; text-align: left; max-width: none; }
  .btn, a.btn { width: 100%; text-align: center; }
  .f-actions .go, .nav .go { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* nothing on this page may ever scroll sideways */
html, body { overflow-x: hidden; }
.card, .fbody, .form-shell { max-width: 100%; }

/* ==================================================================
   The phone, treated as its own layout rather than a squeezed desktop.

   Nothing overflowed before this, but the page still read badly: the
   promotional rail came before the form, so a seller on a phone had to
   scroll past four panels of marketing to reach the first question,
   and the header crammed a 56px logo, a strapline, a link and a phone
   number onto one line.
   ================================================================== */
@media (max-width: 640px) {
  /* the form is what the page is for, so it comes first */
  .form-shell > .card { order: -1; grid-row: auto; }
  .form-shell > .rail.left { order: 1; }
  .form-shell > .rail.right { order: 2; }

  /* the header keeps the logo and the number, and drops the rest */
  .head .wrap { min-height: 0; gap: 12px 18px; padding-top: 12px; padding-bottom: 12px; }
  .head .logo img { height: clamp(38px, 9vw, 48px); }
  .head .logo span { display: none; }
}

@media (max-width: 640px) {
  /* the rails read as one list of notes under the form, not four boxes */
  .rail .promo, .rail .tip { border-radius: 6px; }
  .promo-shot { display: none; }

  .head .wrap { gap: 10px 14px; }
  .head .calls, .head .phone-lg { font-size: var(--fs-sm); }
}

/* a wide monitor: let the reading column breathe rather than stretch */
@media (min-width: 1600px) {
  .form-shell { gap: clamp(28px, 2.4vw, 44px); }
}

/* ==================================================================
   Touch screens have no hover: see the long note at the foot of
   home.css. Every hover rule in this file is shut behind (hover:hover)
   where it stands, so nothing can stick after a tap. All that is
   wanted here is some sign that the tap landed.
   ================================================================== */
@media (hover:none),(pointer:coarse){
  .chip:active,.btn:active,a.btn:active,.tool:active,.doc:active{opacity:.82}
}

/* ==================================================================
   The page after the form is sent. It had markup and no stylesheet at
   all, so it fell back to the browser's own serif and read like a
   draft. Green appears here and nowhere else on the site, because here
   it means the thing actually worked.
   ================================================================== */

:root{ --ok:#1B7A53; --ok-wash:#E7F4EE; --ok-line:#B8DECB; }

/* one column, no rails, and not the full 1280 either: a confirmation is
   read once and should sit under the eye, not stretch across the screen */
.form-shell.done-shell{grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto}

.done{padding:44px 40px 40px;text-align:center}
.done .tick{width:58px;height:58px;margin:0 auto 20px;border-radius:50%;
            background:var(--ok);color:#fff;font-size:29px;line-height:58px;
            box-shadow:0 0 0 7px var(--ok-wash)}
.done h1{font-size:clamp(26px,3vw,33px);color:var(--navy)}
.done h1::after{content:"";display:block;width:54px;height:3px;background:var(--gold);
                margin:14px auto 0;border-radius:2px}
.done>p{font-size:15px;color:var(--mid);margin:16px auto 0;max-width:52ch}

/* the reference number is the one thing on this page worth copying down,
   so it is set in the mono face the survey numbers use and boxed */
.done .ref{display:inline-block;margin-top:22px;padding:12px 22px;border-radius:4px;
           background:var(--ok-wash);border:1px solid var(--ok-line);
           font-family:var(--data);font-size:17px;font-weight:600;letter-spacing:.06em;
           color:var(--ok)}

/* what happens next is instructions, so it is left aligned however the
   rest of the card is centred */
.done .next{margin:30px auto 0;max-width:520px;text-align:left;padding:20px 24px;
            border-radius:6px;background:var(--w-blue);border:1px solid var(--line-2)}
.done .next>b{font-family:var(--data);font-size:11.5px;letter-spacing:.14em;
              text-transform:uppercase;color:var(--navy);display:block;margin-bottom:12px}
.done .next ol{margin:0;padding-left:20px;font-size:14.5px;color:var(--mid);line-height:1.65}
.done .next li+li{margin-top:9px}
.done a{color:var(--green);font-weight:600}

/* register another plot: ruled off, because it is a fresh decision and
   not part of the confirmation above it */
.done .again{margin-top:34px;padding-top:26px;border-top:1px solid var(--line-2)}
.done .again-head{font-family:var(--display);font-size:19px;color:var(--navy);margin:0 0 16px}
.again-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* two lines in one button: what it does, then what it keeps */
.again-row .btn{flex-direction:column;align-items:center;gap:3px;text-align:center;
                padding:14px 22px;white-space:normal}
.again-row .btn small{font-size:11.5px;font-weight:400;opacity:.78;letter-spacing:.01em}
.btn.navy{background:var(--navy)}
.btn.ghost-navy{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost-navy small{opacity:1;color:var(--soft)}
@media (hover:hover) and (pointer:fine){ .btn.ghost-navy:hover{background:var(--w-blue);box-shadow:inset 0 0 0 1px var(--green)} }
.done .again-note{font-size:13px;color:var(--soft);margin:18px 0 0}

@media (max-width:640px){
  .done{padding:32px 20px 28px}
  .done .next{padding:16px 18px}
  .again-row{flex-direction:column}
  .again-row .btn{width:100%}
}

/* ==================================================================
   The condition of the site, under the headings it was written in.

   Thirty ticks in one undivided run is thirty things to read before
   finding the one about the water. The client grouped them himself, so
   the groups are kept: a quiet heading, then its own row of chips.
   ================================================================== */
.tickbands { display: grid; gap: 16px; }
.tickband-head {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--soft);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px;
}
.tickband .chips { gap: 8px; }

@media (max-width: 640px) { .tickbands { gap: 13px; } }

/* The RERA status and its number, sitting under the LRS tick in the same
   group. A rule above them says they are a separate question. */
.appr-rest { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }