/* ============================================================
   AI PROPOSAL PAGE
   The old build used a gold-on-black identity that belongs to a different
   brand. Everything here is the STAIR palette: ivory ground, teal as the
   working colour, amber as the single accent, ink for type.
   ============================================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ HERO ============
   A solid deep-teal field rather than a photograph, so the decrypting headline
   has flat, high-contrast ground and nothing competes with it. The support art
   is a DRAWN proposal, not a stock image: vector, so it is exact at any size,
   weighs nothing, and is built from the brand palette rather than tinted into
   it. It also says what the page does, which a photograph could not. */
/* Light ground. The drawing below was mint-on-deep-teal; every one of its
   strokes is re-inked here rather than left to wash out on ivory. */
.pr-hero{position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
  background:linear-gradient(168deg,var(--ivory) 0%,var(--surface) 58%,var(--surface-2) 100%)}
.pr-hero-art{position:absolute;right:0;top:0;bottom:0;width:min(52%,760px);z-index:1;
  display:grid;place-items:center;pointer-events:none;padding:0 clamp(10px,3vw,54px)}
.pr-doodle{width:100%;max-width:560px;height:auto;overflow:visible}

/* the drawn proposal: hairline vector, brand mint on the deep field */
.pr-doodle .pd-sheet-b{stroke:rgba(11,133,125,.30);stroke-width:1.6;
  fill:rgba(11,133,125,.05)}
.pr-doodle .pd-sheet-f rect:first-of-type{stroke:rgba(11,133,125,.78);stroke-width:2;
  fill:rgba(10,22,20,.72)}
.pr-doodle .pd-fill{fill:#0B857D;stroke:none}
.pr-doodle .pd-amber{fill:var(--amber);stroke:none}
.pr-doodle .pd-lines line{stroke:rgba(11,133,125,.30);stroke-width:3}
.pr-doodle .pd-axis{stroke:rgba(28,59,56,.22);stroke-width:1.5}
.pr-doodle .pd-chart{stroke:#0B857D;stroke-width:2.6;
  stroke-dasharray:420;stroke-dashoffset:420;animation:pdDraw 2.2s var(--ease) .5s forwards}
.pr-doodle .pd-dot{fill:#0B857D;stroke:none;opacity:0;animation:pdPop .5s var(--ease) forwards}
.pr-doodle .pd-dot:nth-of-type(1){animation-delay:1.1s}
.pr-doodle .pd-dot:nth-of-type(2){animation-delay:1.6s}
.pr-doodle .pd-dot-a{fill:var(--amber);animation-delay:2.3s}
.pr-doodle .pd-sign{stroke:rgba(28,59,56,.42);stroke-width:2;
  stroke-dasharray:190;stroke-dashoffset:190;animation:pdDraw 1.6s var(--ease) 2.4s forwards}
.pr-doodle .pd-seal circle{stroke:var(--amber);stroke-width:2;fill:rgba(240,133,75,.14)}
.pr-doodle .pd-check{stroke:var(--amber);stroke-width:2.8;
  stroke-dasharray:52;stroke-dashoffset:52;animation:pdDraw .6s var(--ease) 3.1s forwards}
.pr-doodle .pd-nodes line{stroke:rgba(11,133,125,.32);stroke-width:1.4}
.pr-doodle .pd-nodes circle{fill:rgba(11,133,125,.55);stroke:none}
.pr-doodle .pd-node-a{fill:var(--amber)!important}
.pr-doodle .pd-float{animation:pdFloat 9s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes pdDraw{to{stroke-dashoffset:0}}
@keyframes pdPop{to{opacity:1}}
@keyframes pdFloat{to{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){
  .pr-doodle *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
}

/* a slow teal bloom so the flat field is not inert */
.pr-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(58% 46% at 74% 34%,rgba(14,156,147,.16),transparent 70%),
             radial-gradient(46% 38% at 12% 82%,rgba(240,133,75,.10),transparent 72%);
  animation:prBloom 18s ease-in-out infinite alternate}
@keyframes prBloom{to{transform:scale(1.08) translateY(-2%)}}

.pr-hero .wrap{position:relative;z-index:3;max-width:var(--maxw);width:100%;
  padding-top:var(--nav-h)}
/* the drawing runs behind the text column at narrow widths; this keeps a
   clean field under the words without hiding the artwork */
.pr-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--ivory) 0%,rgba(250,248,243,.92) 38%,rgba(250,248,243,0) 66%)}
.pr-k{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);
  font-size:clamp(10px,.86vw,12px);letter-spacing:.26em;text-transform:uppercase;
  color:#7FE3D9;font-weight:600}
.pr-k i{width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 4px rgba(240,133,75,.22)}
.pr-hero h1{font-family:var(--serif);font-weight:800;color:var(--ink);
  font-size:clamp(34px,5.4vw,82px);letter-spacing:-.04em;line-height:1.02;
  margin-top:clamp(16px,2.4vh,26px);max-width:17ch}
.pr-hero h1 em{font-style:normal;color:var(--teal-deep)}
.pr-hero .lead{font-size:clamp(15px,1.25vw,19px);line-height:1.7;margin-top:clamp(18px,2.6vh,28px);
  color:rgba(28,59,56,.92);max-width:52ch}
.pr-hero-cue{display:inline-flex;align-items:center;gap:11px;margin-top:clamp(26px,4vh,44px);
  font-family:var(--disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(28,59,56,.86)}
.pr-hero-cue svg{width:18px;height:18px;fill:none;stroke:var(--amber);stroke-width:1.8;
  animation:prBob 2s var(--ease) infinite}
@keyframes prBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* the decrypting glyphs */
[data-decrypt] .dt-w{display:inline-block;white-space:pre}
[data-decrypt] [data-s="scramble"]{color:rgba(11,133,125,.45)}
[data-decrypt] [data-s="lock"]{animation:prFlash .42s cubic-bezier(.2,0,0,1)}
@keyframes prFlash{0%{color:var(--amber);text-shadow:0 0 22px rgba(240,133,75,.7)}
                   100%{text-shadow:0 0 0 transparent}}

/* ============ THE FORM ============ */
.pr-start{background:var(--ivory);padding:clamp(56px,9vh,110px) 0}
.pr-start .wrap{max-width:var(--maxw)}
.pr-card{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:clamp(26px,3.6vw,46px);
  box-shadow:0 40px 80px -56px rgba(28,42,40,.5)}
.pr-card h2{font-family:var(--serif);font-weight:750;font-size:clamp(22px,2.6vw,34px);
  letter-spacing:-.028em;color:var(--ink);line-height:1.12}
.pr-card h2 em{font-style:normal;color:var(--teal-deep)}
.pr-card > p{font-size:clamp(14px,1.05vw,16px);color:var(--ink-soft);margin-top:12px;line-height:1.65}
.pr-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(20px,2.8vh,30px)}
.pr-f label{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-mut);margin-bottom:8px}
.pr-f input{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--ivory);border:1px solid var(--line);border-radius:12px;
  padding:14px 15px;outline:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.pr-f input::placeholder{color:var(--ink-mut)}
.pr-f input:focus{border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 16%,transparent)}
.pr-go{width:100%;margin-top:20px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:.06em;
  color:#fff;background:var(--grad);padding:16px 22px;
  box-shadow:0 20px 40px -20px rgba(11,133,125,.7);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pr-go:hover{transform:translateY(-2px);box-shadow:0 28px 52px -20px rgba(11,133,125,.8)}
.pr-go:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.pr-note{font-size:12.5px;color:var(--ink-mut);margin-top:14px;text-align:center}
.pr-err{color:#B4462F;font-size:14px;margin-top:12px}
@media(max-width:620px){.pr-fields{grid-template-columns:1fr}}

/* loading */
.pr-load{max-width:720px;margin:26px auto 0;text-align:center}
.pr-load-row{display:inline-flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft)}
.pr-spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--teal);
  border-radius:50%;animation:prSpin .8s linear infinite}
@keyframes prSpin{to{transform:rotate(360deg)}}
.pr-track{max-width:420px;height:3px;margin:16px auto 0;border-radius:3px;
  background:color-mix(in srgb,var(--teal) 16%,transparent);overflow:hidden}
.pr-track span{display:block;height:100%;width:0;border-radius:3px;background:var(--grad);
  transition:width .5s var(--ease)}

/* ============ THE PROPOSAL ============ */
.pr-out{background:var(--surface);padding:clamp(40px,6vh,80px) 0 clamp(60px,9vh,110px)}
.pr-out .wrap{max-width:var(--maxw)}
.pr-ready{max-width:860px;margin:0 auto clamp(20px,3vh,30px);display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 20px}
.pr-ready p{flex:1 1 220px;font-size:14.5px;color:var(--ink);margin:0}
.pr-tick{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--teal);color:#fff;font-weight:800;flex:none}
.pr-dl{border:0;border-radius:999px;cursor:pointer;font-family:var(--disp);font-size:12.5px;
  font-weight:600;letter-spacing:.06em;color:#fff;background:var(--teal-deep);padding:11px 20px;
  transition:transform .3s var(--ease),background .3s}
.pr-dl:hover{transform:translateY(-2px);background:var(--teal)}

/* the sheets: paper on the ivory desk */
.pr-sheet{max-width:860px;margin:0 auto 22px;background:#FCFAF4;color:var(--ink);
  border:1px solid var(--pline,rgba(28,59,56,.1));border-radius:8px;
  padding:clamp(28px,4vw,52px);box-shadow:0 30px 70px -50px rgba(28,42,40,.55)}
.pr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.pr-logo{height:38px;width:auto}
.pr-meta{font-family:var(--disp);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mut);text-align:right;line-height:1.7}
.pr-rule{height:2px;background:var(--grad);margin:18px 0 22px;border-radius:2px}
.pr-for span{font-family:var(--disp);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-deep)}
.pr-for h2{font-family:var(--serif);font-weight:800;font-size:clamp(22px,2.6vw,30px);
  letter-spacing:-.03em;color:var(--ink);line-height:1.1;margin-top:6px}
.pr-sec{font-size:13px;color:var(--ink-soft);margin-top:4px}
/* The researched one-liner. Only rendered when a backend actually looked the
   company up, so its presence is meaningful - it is styled as a verified note,
   not as body copy, and it survives into the PDF. */
.pr-snap{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 1.5rem;padding:.85rem 1rem;
  border-left:2px solid var(--teal);background:rgba(14,156,147,.055);
  font-size:.85rem;line-height:1.6;color:#3C4A47;border-radius:0 4px 4px 0}
.pr-snap i{flex:0 0 auto;width:14px;height:14px;margin-top:.28rem;border-radius:50%;
  background:var(--teal);position:relative}
.pr-snap i::after{content:"";position:absolute;left:4px;top:4.5px;width:5px;height:2.5px;
  border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}

.pr-att{font-size:12.5px;color:var(--ink-mut);margin-top:8px}
.pr-title{font-family:var(--serif);font-weight:800;font-size:clamp(24px,3vw,36px);
  letter-spacing:-.032em;line-height:1.14;color:var(--ink);margin:clamp(20px,3vh,30px) 0 12px}
.pr-exec{font-size:15px;line-height:1.68;color:var(--ink);margin:0 0 14px}
.pr-why{margin:0 0 26px;padding-left:14px;border-left:3px solid var(--amber);
  font-size:14px;line-height:1.6;color:var(--teal-deep);font-style:italic}
.pr-lbl{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-deep);margin:0 0 8px}
.pr-row{display:flex;gap:16px;padding:13px 0;border-top:1px solid rgba(28,59,56,.1)}
.pr-theme{min-width:132px;font-family:var(--disp);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber-deep);font-weight:700;padding-top:2px}
.pr-row b{display:block;font-family:var(--serif);font-weight:700;font-size:14.5px;color:var(--ink)}
.pr-row span{display:block;font-size:13.5px;line-height:1.56;color:var(--ink-soft);margin-top:3px}
.pr-step{display:flex;gap:14px;padding:11px 0}
.pr-n{font-family:var(--serif);font-weight:800;font-size:17px;color:var(--teal);min-width:28px}
.pr-step b{font-family:var(--serif);font-size:14.5px;color:var(--ink)}
.pr-step span{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin-top:2px}
.pr-impact{background:#F3EFE3;border-radius:10px;padding:18px 20px;margin:22px 0;
  display:flex;gap:16px;flex-wrap:wrap}
.pr-impact .pr-lbl{flex:1 1 100%}
.pr-imp{flex:1 1 160px;display:flex;gap:9px;font-size:13px;line-height:1.45;color:var(--ink)}
.pr-imp i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-top:5px}
.pr-gov{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 22px}
.pr-creds{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.pr-creds li{position:relative;padding-left:15px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.pr-creds li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--amber)}
.pr-cta{background:#0A1614;border-radius:12px;padding:24px;margin-top:26px;text-align:center}
.pr-cta-h{font-family:var(--serif);font-weight:700;font-size:19px;color:#fff;margin:0}
.pr-cta-p{font-size:13px;color:rgba(250,248,243,.7);margin:8px 0 16px}
.pr-cta-b{border:0;border-radius:999px;cursor:pointer;font-family:var(--disp);font-size:12.5px;
  font-weight:600;letter-spacing:.06em;color:#0A1614;background:var(--amber);padding:12px 24px;
  transition:transform .3s var(--ease),background .3s}
.pr-cta-b:hover{transform:translateY(-2px);background:#FFA06B}
.pr-sig{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid rgba(28,59,56,.1)}
.pr-sig b{display:block;font-family:var(--serif);font-size:14.5px;color:var(--ink)}
.pr-sig span{display:block;font-size:12px;color:var(--ink-mut);margin-top:3px}
.pr-mark{height:30px;width:auto;opacity:.85}
.pr-actions{max-width:860px;margin:26px auto 0;display:flex;gap:12px;justify-content:center;
  flex-wrap:wrap}
.pr-send{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:999px;text-decoration:none;
  border:1px solid var(--teal);color:var(--teal-deep);background:rgba(14,156,147,.06);
  font-family:var(--disp);font-size:13.5px;font-weight:600;letter-spacing:.03em;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.pr-send:hover{background:rgba(14,156,147,.14);transform:translateY(-2px)}
.pr-send:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media print{.pr-send{display:none !important}}
.pr-again{border:1px solid var(--line);background:transparent;border-radius:999px;cursor:pointer;
  font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--ink);
  padding:11px 20px;transition:border-color .3s,color .3s}
.pr-again:hover{border-color:var(--teal);color:var(--teal-deep)}
@media(max-width:620px){
  .pr-row{flex-direction:column;gap:4px}
  .pr-theme{min-width:0}
  .pr-creds{grid-template-columns:1fr}
}

/* ============ PDF ============
   window.print() to PDF. Only the two sheets are printed, on the STAIR
   template, one per page, with the screen furniture removed. */
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff}
  body > *{display:none !important}
  .pr-out{display:block !important;background:#fff;padding:0}
  .pr-out .wrap{max-width:none;padding:0}
  .pr-ready,.pr-actions,.pr-cta-b{display:none !important}
  #prDoc,#prDoc *{visibility:visible}
  .pr-sheet{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;
    padding:0 0 10mm;page-break-after:always;background:#fff}
  .pr-sheet:last-child{page-break-after:auto}
  .pr-cta{background:#F3EFE3;color:var(--ink)}
  .pr-cta-h{color:var(--ink)}
  .pr-cta-p{color:var(--ink-soft)}
  .pr-cta::after{content:"saraff@stair.digital  ·  +91 99302 20342";
    display:block;font-size:12px;color:var(--teal-deep);font-weight:600}
}