/* ------------------------------------------------------------------
   The landing page, and it is the approved preview verbatim.

   This file is self contained on purpose. brand.css is NOT loaded on
   this page: it underlines links, puts a border and a shadow on every
   button and owns the header and footer, and mixing the two is what
   pulled the page away from the design. Everything the page needs is
   here.
   ------------------------------------------------------------------ */

/* ==================================================================
   Vishuddha Property Consultancy — proposed light theme, round four.
   A light blue ground and a deep corporate blue throughout, the way the
   client asked after showing us the HDFC net banking pages. Every colour
   is painted, so the page holds on any host ground.
   ================================================================== */

:root{
  --paper:#FFFFFF;
  --ground:#E9F1FA;        /* the light blue field the client pointed at */
  --ground-2:#D8E7F5;
  --ink:#0A2440;
  --navy:#00447E;
  --navy-2:#1A5FA0;
  --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, every focus ring, the success page. */
  --ok:#1B7A53;            /* success is a meaning of its own, so it stays green */
  --ok-wash:#E6F4EC;
  --green:#00539C;
  --green-2:#1372CB;
  --green-wash:#E2EEFB;

  /* the poster family, each with its rgb so it can be used at alpha */
  --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;
  --c-tel:#116A78;   --rgb-tel:17,106,120;    --w-tel:#E2F1F4;
  --c-gld:#96701F;   --rgb-gld:150,112,31;    --w-gld:#FAF1DC;

  --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;          /* the width the approved preview was actually judged at */
}

*{box-sizing:border-box}
figure{margin:0}
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)}
.dim{height:1px;background:var(--line);position:relative;margin:22px 0}
.dim::before,.dim::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--gold-lt)}
.dim::before{left:0}
.dim::after{left:56px}

/* ------------------------------------------------------------ header */

.head{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:30}
.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 nav{display:flex;gap:30px;margin-left:auto}
.head nav a{font-size:14.5px;color:var(--mid);padding:4px 0;border-bottom:2px solid transparent}
@media (hover:hover) and (pointer:fine){.head nav a:hover{color:var(--navy);border-bottom-color:var(--gold-lt)}}
.head .calls{display:flex;align-items:center;gap:18px}

/* the phone menu button, shown below 760px only; three bars that turn
   into a cross while the menu is open */
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:1px solid var(--line);border-radius:2px;color:var(--navy);background:var(--paper)}
.menu-btn .bars{position:relative;display:block;width:20px;height:14px}
.menu-btn i{position:absolute;left:0;width:100%;height:2px;border-radius:1px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease}
.menu-btn i:nth-child(1){top:0}
.menu-btn i:nth-child(2){top:6px}
.menu-btn i:nth-child(3){top:12px}
.head.open .menu-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.head.open .menu-btn i:nth-child(2){opacity:0}
.head.open .menu-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.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)}}

/* -------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;background:var(--ground);padding:44px 0 46px;border-bottom:1px solid var(--line)}
.hero::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(0,83,156,.075) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(110% 90% at 18% 6%,#000 0%,transparent 68%);mask-image:radial-gradient(110% 90% at 18% 6%,#000 0%,transparent 68%)}
.hero .wrap{position:relative}
/* the cap sits on the heading itself now, so the two lines below it can
   run the full width of the page instead of being boxed into 62ch */
.hero h1{max-width:26ch;font-size:clamp(28px,2.9vw,38px);line-height:1.07;margin:12px 0 0;color:var(--navy)}
.hero h1 em{font-style:italic;color:var(--gold-ink);font-weight:300}
.hero .lede{font-size:16px;color:var(--mid);max-width:60ch;margin-top:13px}
/* the carousel is exactly as tall as the four cards beside it */
.hero-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:34px;align-items:stretch;margin-top:26px}
.assure{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px}
.assure span{font-size:13px;color:var(--mid);display:flex;align-items:center;gap:8px}
.assure span::before{content:"";width:7px;height:7px;background:var(--gold-lt);transform:rotate(45deg);flex:none}

/* ------------------- the four services: photograph first, words on hover */
.services{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:18px}
.svc{
  position:relative;display:block;overflow:hidden;
  min-height:302px;border-radius:8px;
  border:1px solid var(--line);
  box-shadow:0 14px 30px -22px rgba(8,30,54,.55);
  transition:transform .25s ease,box-shadow .25s ease;
}
@media (hover:hover) and (pointer:fine){.svc:hover{transform:translateY(-3px);box-shadow:0 24px 44px -26px rgba(8,30,54,.6)}}
.svc-photo{position:absolute;inset:0}
/* posters with lettering, so they are fitted rather than cropped: the card
   colour shows as a band behind them instead of the words being cut off */
.svc-photo img{width:100%;height:100%;object-fit:contain;object-position:50% 0;transition:transform .7s cubic-bezier(.3,0,.2,1)}
@media (hover:hover) and (pointer:fine){.svc:hover .svc-photo img{transform:scale(1.07)}}

/* at rest: the picture, one colour band, the name. Nothing else. */
.svc-rest{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:13px;
  padding:44px 18px 18px;
  background:linear-gradient(to top,rgba(var(--rgb),.96) 0%,rgba(var(--rgb),.78) 48%,rgba(var(--rgb),0) 100%);
  transition:opacity .3s ease;
}
.svc-rest .badge{width:44px;height:44px;flex:none;border-radius:50%;background:var(--paper);display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.svc-rest .badge svg{width:22px;height:22px;color:var(--c)}
.svc-rest h3{font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;line-height:1.25}
/* the client's artwork carries its own title across the top, so the flag
   sits at the foot of the card, on the plain colour rather than over
   the lettering */
.svc-flag{position:absolute;bottom:14px;right:14px;z-index:2;font-family:var(--data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(8,30,54,.45);padding:5px 10px;border-radius:2px;transition:opacity .3s ease}

/* on hover: the colour fills and the words arrive */
.svc-more{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:26px 24px;
  background:linear-gradient(155deg,rgba(var(--rgb),.96) 0%,rgba(var(--rgb),.9) 100%);
  opacity:0;transition:opacity .32s ease;
}
.svc:focus-visible .svc-more{opacity:1}
@media (hover:hover) and (pointer:fine){.svc:hover .svc-more{opacity:1}}
.svc:focus-visible .svc-rest,.svc:focus-visible .svc-flag{opacity:0}
@media (hover:hover) and (pointer:fine){.svc:hover .svc-rest,.svc:hover .svc-flag{opacity:0}}
.svc-more .badge{width:50px;height:50px;border-radius:50%;background:var(--paper);display:grid;place-items:center;transform:translateY(9px);transition:transform .38s cubic-bezier(.3,1.2,.4,1)}
.svc-more .badge svg{width:25px;height:25px;color:var(--c)}
@media (hover:hover) and (pointer:fine){.svc:hover .svc-more .badge{transform:translateY(0)}}
.svc-more h3{font-family:var(--body);font-size:15.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-top:13px}
.svc-more .hr{width:32px;height:2px;background:rgba(255,255,255,.55);margin:10px 0}
.svc-more p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.93);max-width:30ch}
.svc-more .cta{display:inline-flex;align-items:center;gap:8px;margin-top:15px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.62);padding:9px 17px;border-radius:2px;transition:background .2s ease,color .2s ease}
@media (hover:hover) and (pointer:fine){.svc:hover .svc-more .cta{background:#fff;color:var(--c)}}

/* the coming soon reveal, on top of everything */
.soon-veil{position:absolute;inset:0;z-index:5;color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;overflow:hidden;padding:22px;text-align:center;
  background:linear-gradient(160deg,#0E3357 0%,#082742 55%,#06213A 100%)}
/* a surveyor's grid across it, so the panel reads as a drawing board */
.soon-veil::before{content:"";position:absolute;inset:-2px;pointer-events:none;opacity:.30;
  background-image:linear-gradient(to right,rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:24px 24px}
/* and a survey tape across the corner, the way a site is marked off */
.soon-veil::after{content:"";position:absolute;right:-64px;top:26px;width:210px;height:26px;
  transform:rotate(38deg);opacity:.8;
  background:repeating-linear-gradient(135deg,var(--c) 0 13px,rgba(255,255,255,.9) 13px 26px)}
.soon-veil>*{position:relative;z-index:1}
.soon-veil .eyebrow{font-family:var(--data);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-lt);opacity:0}
.svc.showing .soon-veil .eyebrow{animation:fade .4s ease .1s forwards}
/* the three stages a venture passes through before it can be listed */
.soon-veil .track{display:flex;align-items:center;gap:0;margin-top:14px;opacity:0}
.svc.showing .soon-veil .track{animation:fade .4s ease 1.5s forwards}
.soon-veil .track i{width:26px;height:1px;background:rgba(255,255,255,.4)}
.soon-veil .track span{font-family:var(--data);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:6px}
.soon-veil .track span::before{content:"";width:7px;height:7px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5)}
.soon-veil .track span.on{color:#fff}
.soon-veil .track span.on::before{background:var(--gold-lt);border-color:var(--gold-lt)}
.svc.showing .soon-veil{opacity:1;visibility:visible}
.svc.showing .svc-name,.svc.showing .svc-flag{opacity:0;transition:opacity .25s ease}
.soon-veil svg.draw{width:126px;height:70px;overflow:visible;margin:12px 0 4px}
.soon-veil .plot{fill:none;stroke:#fff;stroke-width:1.8;stroke-dasharray:300;stroke-dashoffset:300}
.svc.showing .soon-veil .plot{animation:draw .85s cubic-bezier(.5,.05,.2,1) forwards}
.soon-veil .peg{opacity:0}
.svc.showing .soon-veil .peg{animation:drop .34s cubic-bezier(.3,1.5,.5,1) .76s forwards}
.soon-veil .stamp{font-family:var(--display);font-size:25px;font-weight:400;letter-spacing:0;
  text-transform:none;color:#fff;background:none;border:0;padding:0;margin-top:6px;
  opacity:0;transform:scale(1.18)}
.svc.showing .soon-veil .stamp{animation:rise .5s cubic-bezier(.2,.9,.3,1) 1.02s forwards}
@keyframes rise{to{opacity:1;transform:scale(1)}}
.soon-veil small{font-size:12.5px;color:rgba(255,255,255,.78);opacity:0;text-align:center;
  padding:0 12px;margin-top:5px;max-width:30ch}
.svc.showing .soon-veil small{animation:fade .35s ease 1.42s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drop{from{opacity:0;transform:translateY(-13px)}to{opacity:1;transform:translateY(0)}}
@keyframes press{to{opacity:1;transform:scale(1) rotate(-7deg)}}
@keyframes fade{to{opacity:1}}

/* -------------------------------------------- the vertical carousel */
.reel{display:flex;flex-direction:column;background:#0B2036;border:1px solid var(--line);border-radius:8px;padding:0;overflow:hidden;box-shadow:0 18px 40px -30px rgba(8,30,54,.5)}
/* the frame is the whole card now: no heading, no list, no footer. It takes
   whatever height the four tiles beside it come to, and the photograph is
   cropped to fill it rather than letterboxed inside a fixed 3:2 slot. */
.reel-frame{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#0B2036}
.reel-track{position:absolute;inset:0;display:flex;flex-direction:column;transition:transform .8s cubic-bezier(.65,0,.2,1)}
.reel-slide{position:relative;flex:0 0 100%;min-height:0}
/* these are posters with lettering on them, not photographs, so they are
   shown whole on the navy rather than cropped to the panel */
.reel-slide img{width:100%;height:100%;object-fit:contain;background:#0B2036}
.reel-dots{position:absolute;right:15px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:3}
.reel-dots button{width:3px;height:20px;background:rgba(255,255,255,.5);border-radius:2px;transition:background .25s ease,height .25s ease}
.reel-dots button[aria-current="true"]{background:var(--gold-lt);height:32px}

/* ------------------------------------- what the buyer wants, the landing
   spot for the Tell us what you want button on the buyer column */
.want-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,344px);gap:34px;margin-top:44px;align-items:start}
.want-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:26px 28px 22px;box-shadow:0 20px 44px -34px rgba(8,30,54,.55)}
.want-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 22px}
.wf label{display:block;font-family:var(--data);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.wf .box{border:1px solid var(--line);border-radius:6px;padding:11px 14px;font-size:14.5px;color:var(--ink);background:var(--ground)}
.wf .box.mono{font-family:var(--data);letter-spacing:.02em}
.wf.full{flex:1;min-width:220px}
.want-foot{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2)}
.want-foot .btn{background:var(--green);padding:13px 22px;white-space:nowrap}
.want-note{font-size:12px;color:var(--soft);margin-top:14px}
.want-side{background:var(--navy);color:#fff;border-radius:10px;padding:24px 26px}
.want-side h3{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
.want-steps{list-style:none;margin:18px 0 0;padding:0;counter-reset:w}
.want-steps li{counter-increment:w;position:relative;padding-left:38px;font-size:13px;line-height:1.5;color:#BDD0E4}
.want-steps li + li{margin-top:16px}
.want-steps li::before{content:counter(w,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--data);font-size:11px;color:var(--gold-lt);border:1px solid rgba(240,176,60,.5);border-radius:4px;width:26px;height:26px;display:grid;place-items:center}
.want-steps b{display:block;color:#fff;font-weight:600;font-size:13.5px;margin-bottom:3px}
.want-call{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.want-call span{display:block;font-size:12.5px;color:#9FB6CD}
.want-call a{display:block;font-family:var(--data);font-size:22px;color:#fff;margin-top:5px}
.want-call small{display:block;font-size:11.5px;color:#8CA5BE;margin-top:3px}
@media (max-width:1180px){.want-shell{grid-template-columns:1fr}}

/* ------------- approvals: the original band, full colour, bordered tiles */
.band{background:var(--paper);border-bottom:1px solid var(--line);padding:22px 0 26px}
.band-say{text-align:center;margin:0 0 18px;font-size:11.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--gold-ink);font-weight:700}
.marquee{overflow:hidden;position:relative;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{--set-width:calc((190px + 46px) * 5);display:flex;align-items:center;gap:46px;width:max-content;animation:roll 30s linear infinite}
@media (hover:hover) and (pointer:fine){.marquee:hover .marquee-track{animation-play-state:paused}}
.marquee-track .mark{flex:none;width:190px;height:96px;display:flex;align-items:center;justify-content:center;padding:10px 16px;background:var(--paper);border:1px solid var(--line-2);transition:border-color .2s ease,box-shadow .2s ease}
.marquee-track .mark img{max-width:100%;max-height:76px;width:auto;height:auto;object-fit:contain}
@media (hover:hover) and (pointer:fine){.marquee-track .mark:hover{border-color:var(--gold);box-shadow:0 6px 16px -10px rgba(18,35,63,.55)}}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--set-width)))}}

/* ---------------------------------------------------------- sections */
.sec{padding:78px 0;border-bottom:1px solid var(--line)}
.sec.paper{background:var(--paper)}
.sec-head{max-width:58ch}
.sec-head.mid{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(24px,2.5vw,31px);line-height:1.13;margin-top:12px;color:var(--navy)}
.sec-head p{margin-top:14px;color:var(--mid);font-size:16px}
.sec-head.mid .dim{margin:20px auto}
.sec-head.mid .dim::before{left:calc(50% - 28px)}
.sec-head.mid .dim::after{left:calc(50% + 28px)}

/* ------------------------- why choose us: dressed before anyone hovers */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.why-card{
  position:relative;overflow:hidden;
  border-radius:10px;padding:30px 28px 28px;
  background:linear-gradient(168deg,var(--w) 0%,var(--paper) 58%);
  border:1px solid rgba(var(--rgb),.24);
  box-shadow:0 14px 30px -24px rgba(var(--rgb),.6);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
@media (hover:hover) and (pointer:fine){.why-card:hover{transform:translateY(-5px);border-color:rgba(var(--rgb),.5);box-shadow:0 28px 48px -28px rgba(var(--rgb),.7)}}
/* a wash of the colour in the corner, so the card is never a blank sheet */
.why-card::before{content:"";position:absolute;top:-58px;right:-58px;width:150px;height:150px;border-radius:50%;background:rgba(var(--rgb),.09);pointer-events:none}
.why-card .num{position:absolute;top:14px;right:22px;font-family:var(--data);font-size:34px;font-weight:500;color:rgba(var(--rgb),.34);line-height:1;pointer-events:none;transition:color .3s ease}
@media (hover:hover) and (pointer:fine){.why-card:hover .num{color:rgba(var(--rgb),.62)}}
/* a solid seal, filled from the first look, with a dashed ring around it */
.seal2{position:relative;width:58px;height:58px;border-radius:50%;background:var(--c);display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(var(--rgb),.9)}
.seal2::after{content:"";position:absolute;inset:-7px;border:1.5px dashed rgba(var(--rgb),.5);border-radius:50%;transition:transform .9s cubic-bezier(.4,0,.2,1)}
@media (hover:hover) and (pointer:fine){.why-card:hover .seal2::after{transform:rotate(150deg)}}
.seal2 svg{width:26px;height:26px;color:#fff}
.why-card h3{font-size:21px;line-height:1.24;color:var(--ink);margin-top:22px}
.why-card p{margin-top:10px;font-size:14px;color:var(--mid);line-height:1.6}
.why-card .rule{width:46px;height:3px;border-radius:2px;background:var(--c);margin-top:18px;transition:width .35s cubic-bezier(.6,0,.2,1)}
@media (hover:hover) and (pointer:fine){.why-card:hover .rule{width:82px}}

/* ------------------------------- how it works: buyer and seller columns */
.journey{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:46px;align-items:stretch}
/* a flex column, so both footers sit on the floor of an equal height card */
.jcol{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 16px 34px -28px rgba(8,30,54,.55)}
.jcol-head{display:flex;align-items:center;gap:14px;padding:18px 22px;color:#fff;background:linear-gradient(150deg,var(--c) 0%,var(--c2) 100%)}
.jcol-head .cap{width:44px;height:44px;flex:none;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center}
.jcol-head .cap svg{width:23px;height:23px;color:var(--c)}
.jcol-head b{display:block;font-size:18px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.15}
.jcol-head i{display:block;font-style:normal;font-size:12px;color:rgba(255,255,255,.87);margin-top:2px}
/* the client's own headline for each side, sitting under the coloured cap */
.jtitle{padding:17px 22px 15px;font-family:var(--display);font-size:19.5px;line-height:1.3;
  color:var(--navy);border-top:0}
/* and his closing line, the one he marked to keep */
.jclose{margin-top:auto;padding:18px 22px 16px;border-top:1px solid var(--line-2);
  font-family:var(--display);font-size:17px;line-height:1.32;color:var(--navy)}
.jclose span{display:block;margin-top:7px;font-family:var(--body);font-size:12.5px;
  line-height:1.55;color:var(--mid)}
.jfoot .btn{white-space:nowrap}
.jstep{display:flex;gap:15px;padding:15px 22px;border-top:1px solid var(--line-2);transition:background .22s ease}
@media (hover:hover) and (pointer:fine){.jstep:hover{background:var(--w)}}
.jstep .no{width:36px;height:36px;flex:none;border-radius:5px;background:var(--c);color:#fff;font-family:var(--data);font-size:13.5px;display:grid;place-items:center;transition:transform .22s ease}
@media (hover:hover) and (pointer:fine){.jstep:hover .no{transform:scale(1.07)}}
.jstep .txt{min-width:0}
.jstep b{display:block;font-size:13.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);line-height:1.3}
.jstep p{font-size:13px;color:var(--mid);margin-top:5px;line-height:1.55}
.jfoot{min-height:84px;padding:16px 22px;background:var(--w);border-top:1px solid var(--line-2);display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--mid)}
.jfoot .btn{padding:12px 19px;font-size:13.5px;background:var(--c)}
@media (hover:hover) and (pointer:fine){.jfoot .btn:hover{background:var(--c2)}}

/* ------------------------------------------------------------ footer */
.foot{background:var(--ground-2);padding:52px 0 30px}
.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}

/* ------------------------------------------------------- reveal + rwd */
.rv{opacity:0;transform:translateY(15px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:1180px){
  .hero-body{grid-template-columns:1fr;gap:22px}
  /* stacked, the frame has no tiles to match, so it takes its own shape.
     The photographs are upright, so the panel stays upright too and is held
     to a sensible width rather than running the whole way across. */
  .reel{width:100%;max-width:430px;margin-left:auto;margin-right:auto}
  .reel-frame{flex:0 0 auto;aspect-ratio:3/4}
  .why{grid-template-columns:1fr 1fr}
  .journey{grid-template-columns:1fr}
  .form-shell{grid-template-columns:1fr}
  .rail{display:grid;grid-template-columns:1fr 1fr}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  .sec{padding:54px 0}
  .services{grid-template-columns:1fr;grid-template-rows:none}
  .why{grid-template-columns:1fr}
  .notes{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr}
  .steps-bar{grid-template-columns:1fr}
  .steps-bar .s{border-right:0;border-bottom:1px solid var(--line-2)}
  .fbody{padding:22px 18px 24px}
  .head .wrap{min-height:0;padding-top:14px;padding-bottom:14px;gap:12px 20px}
  /* the links fold away behind the menu button at the right of the logo,
     and drop down over the page when it is pressed (menu.js). The phone
     and the register button keep a row of their own underneath */
  .menu-btn{display:inline-flex;order:1;margin-left:auto}
  /* the logo already carries the words, and beside it they push the
     button onto a row of its own on a small phone */
  .head .logo span{display:none}
  .head .calls{order:2;flex-basis:100%}
  .head nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;
    flex-direction:column;gap:0;padding:4px 20px 10px;background:var(--paper);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px -20px rgba(8,30,54,.45)}
  .head.open nav{display:flex}
  .head nav a{font-size:16px;color:var(--navy);padding:14px 0;border-bottom:1px solid var(--line-2)}
  .head nav a:last-child{border-bottom:0}
  .foot .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .marquee-track{animation:none}
  .soon-veil .plot{stroke-dashoffset:0}
  .soon-veil .peg,.soon-veil .stamp,.soon-veil small{opacity:1;transform:none}
  .seal .ring,.seal .tick{stroke-dashoffset:0}
  .done-top h2,.done-top>p,.refbox{opacity:1}
}


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

.corridors{background:var(--paper)}
.roads{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.road{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--paper);
  border:1px solid var(--line);border-radius:8px;font-size:14.5px;color:var(--ink);
  box-shadow:0 12px 26px -24px rgba(8,30,54,.5);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
@media (hover:hover) and (pointer:fine){.road:hover{border-color:var(--gold-lt);transform:translateY(-3px);box-shadow:0 20px 36px -26px rgba(8,30,54,.6)}}
.road b{font-weight:600}
.road .go{margin-left:auto;font-family:var(--data);color:var(--gold-ink);opacity:0;
  transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease}
@media (hover:hover) and (pointer:fine){.road:hover .go{opacity:1;transform:none}}
/* the coloured road marker, kept exactly as the client asked */
.road .marker{width:38px;height:38px;flex:none;border-radius:50%;display:grid;
  place-items:center;color:#fff;box-shadow:0 4px 10px -4px rgba(8,30,54,.55);
  transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){.road:hover .marker{transform:scale(1.08)}}
.road .marker .ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.marker.blue{background:#2f6fb0}   .marker.green{background:#2e8b57}
.marker.orange{background:#d2792c} .marker.purple{background:#7a4f9e}
.marker.teal{background:#1f8a8a}   .marker.red{background:#c0392b}
.marker.amber{background:#c9971f}  .marker.sky{background:#3a8fd0}
.marker.olive{background:#6f8b34}
@media (max-width:900px){.roads{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.roads{grid-template-columns:1fr}}

/* --------------------------------------------- the buyer panel, real boxes */
.wf input,.wf select{width:100%;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:11px 14px;
  transition:border-color .18s ease,box-shadow .18s ease}
.wf input::placeholder{color:var(--soft)}
.wf input:focus,.wf select:focus{outline:0;border-color:var(--green-2);
  box-shadow:0 0 0 3px rgba(19,114,203,.16)}
.wf label i{font-style:normal;color:var(--gold-ink)}
.wf.bad input,.wf.bad select{border-color:#B03A2E}
.wf .err{display:block;margin-top:6px;font-size:12px;color:#B03A2E}
.want-done{border:1px solid rgba(27,122,83,.4);background:var(--ok-wash);border-radius:7px;
  padding:14px 16px;margin-bottom:20px}
.want-done b{display:block;color:#14603F;font-size:14.5px}
.want-done p{font-size:13px;color:#2C5A4A;margin-top:4px}
.want-bad{border:1px solid rgba(176,58,46,.4);background:#FDECEA;border-radius:7px;
  padding:12px 15px;margin-bottom:18px;font-size:13.5px;color:#8C2C22}

/* anchors land clear of the header, and the jump between sections is eased */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:20px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==================================================================
   Touch screens, of any width.

   A phone fires :hover on the first tap and then leaves it stuck until
   you touch something else, so cards sat lifted, photographs stayed
   zoomed and badges hung mid slide. Every hover rule above is now shut
   behind (hover:hover), so on a touch screen the resting state is the
   only state and none of that can happen.

   That leaves one thing to answer. The service cards keep their words
   behind the hover, and a finger cannot ask for them, so on a touch
   screen the card is laid out the other way round: the photograph on
   top at a fixed shape, the words in a solid band underneath, all of it
   readable without touching anything.
   ================================================================== */
@media (hover:none),(pointer:coarse){

  .svc{min-height:0;display:flex;flex-direction:column}

  /* the photograph stops being a backdrop and becomes the top of the card */
  .svc-photo{position:relative;inset:auto;aspect-ratio:3/2;flex:none}

  /* the band that floated over the picture is replaced by the panel below */
  .svc-rest{display:none}

  .svc-more{
    position:relative;inset:auto;z-index:1;
    opacity:1;flex:1;
    align-items:flex-start;justify-content:flex-start;text-align:left;
    padding:16px 18px 18px;
    background:linear-gradient(155deg,rgba(var(--rgb),.98) 0%,rgba(var(--rgb),.92) 100%);
  }
  .svc-more .badge{width:42px;height:42px;transform:none}
  .svc-more .badge svg{width:21px;height:21px}
  .svc-more h3{margin-top:11px}
  .svc-more .hr{margin:9px 0}
  .svc-more p{max-width:none}
  .svc-more .cta{background:#fff;color:var(--c);border-color:#fff}

  /* on a touch screen the card is opened out and its own button already
     says Coming soon, so the flag would only say it a second time */
  .svc-flag{display:none}

  /* a tap should still show it was received, just without the lift */
  .svc:active,.why-card:active,.road:active,.btn:active{opacity:.82}
}