/* =========================================================================
   allanvijaypinto.com — site stylesheet
   One file for the whole site. Sections are marked below.
   Edit here and every page picks it up; head.php cache-busts on save.
   ========================================================================= */

/* ---------- 1. Base: tokens, layout, nav, hero, footer ---------- */
:root{
    --ink:#060D22;
    --ink-2:#0C152F;
    --ink-3:#141F41;
    --paper:#F3F1EA;
    --paper-dim:#AEB6C8;
    --slate:#77819B;
    --brass:#F2A81C;
    --rule:rgba(174,182,200,.20);
    --measure:66ch;

    /* Type scale — tune the whole site from these five values.
       Weights available: IBM Plex Sans 300/400/500/600, Newsreader 300/400/500. */
    --fs-body:18px;      /* was 17px */
    --fw-body:400;       /* was 300 (light) — 400 reads solid on the dark ground */
    --fw-head:500;       /* was 400 */
    --fs-nav:16px;       /* was 14px */
    --fw-nav:500;        /* was inherited 300 */
    --fs-mark:21px;      /* was 18px */
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-weight:var(--fw-body);
    font-size:var(--fs-body);
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
  section{padding:86px 0;border-top:1px solid var(--rule)}
  section:first-of-type{border-top:0}
  h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:var(--fw-head);letter-spacing:-.01em;margin:0}
  p{max-width:var(--measure)}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--brass);outline-offset:3px}

  /* ---------- nav ---------- */
  nav{display:flex;justify-content:space-between;align-items:baseline;padding:26px 0;gap:20px;flex-wrap:wrap}
  .mark{font-family:"Newsreader",serif;font-size:var(--fs-mark);font-weight:var(--fw-head);letter-spacing:.02em;text-decoration:none}
  .navlinks{display:flex;gap:26px;font-size:var(--fs-nav);font-weight:var(--fw-nav);color:var(--paper-dim)}
  .navlinks a{text-decoration:none;transition:color .16s ease}
  .navlinks a:hover{color:var(--brass)}

  /* ---------- hero ---------- */
  .hero{padding-top:56px;padding-bottom:0}
  .hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:44px}
  .hero-text{flex:1 1 auto;min-width:0}
  .crest{flex:0 0 auto;width:clamp(104px,15vw,234px);height:auto;margin-top:6px}
  /* Hero portrait. A cut-out on transparency, so no frame - it stands on the
     ground colour directly. Bottom-aligned with the text so the figure and the
     copy share a baseline instead of floating. */
  .hero-portrait{flex:0 0 auto;width:clamp(168px,24vw,304px);height:auto;display:block;align-self:flex-end;margin-bottom:-4px}
  .hero h1{font-size:clamp(38px,7.4vw,74px);line-height:1.04}
  .role{
    font-family:"IBM Plex Sans",sans-serif;
    font-size:clamp(15px,2.4vw,19px);
    font-weight:500;letter-spacing:.16em;
    color:var(--brass);margin:22px 0 26px;
  }
  .lede{font-family:"Newsreader",serif;font-size:clamp(20px,3.4vw,27px);line-height:1.45;color:var(--paper);max-width:24ch}
  .disciplines{margin-top:30px;font-size:14px;color:var(--slate);letter-spacing:.03em}

  /* ---------- the ladder: the page's one bold element ---------- */
  .ladder{margin:64px 0 0;padding-bottom:78px}
  .ladder-rule{position:relative;height:1px;background:var(--rule);margin:0 0 0}
  .ladder-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  .stage{position:relative;padding:22px 14px 0 0}
  .stage::before{
    content:"";position:absolute;top:-1px;left:0;
    width:1px;height:15px;background:var(--brass);
  }
  .stage:first-child::after{
    content:"";position:absolute;top:-2px;left:0;width:7px;height:3px;background:var(--brass);
  }
  .stage-name{font-family:"Newsreader",serif;font-size:19px;color:var(--paper)}
  .stage-note{font-size:13.5px;color:var(--slate);margin-top:5px;line-height:1.5;max-width:22ch}
  .stage:nth-child(n+3) .stage-name{color:var(--paper-dim)}

  /* ---------- statement ---------- */
  .statement h2{font-size:clamp(28px,4.8vw,44px);line-height:1.18;max-width:17ch}
  .statement p{margin-top:26px;color:var(--paper-dim)}

  .proofline{
    margin-top:44px;padding:26px 28px;
    background:var(--ink-2);border-left:2px solid var(--brass);
  }
  .proofline .big{font-family:"Newsreader",serif;font-size:clamp(21px,3.2vw,27px);line-height:1.4;max-width:34ch;margin:0}
  .proofline .sub{font-size:14px;color:var(--slate);margin:12px 0 0;max-width:52ch}

  /* ---------- system ---------- */
  .system p{color:var(--paper-dim)}
  .faults{margin:34px 0 0;padding:0;list-style:none;max-width:var(--measure)}
  .faults li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:16px;color:var(--paper-dim)}
  .faults li:first-child{border-top:1px solid var(--rule)}
  .faults b{font-weight:500;color:var(--paper)}

  /* ---------- capabilities ---------- */
  .caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);margin-top:38px;border:1px solid var(--rule)}
  .cap{background:var(--ink);padding:26px 24px}
  .cap h3{font-size:20px;margin-bottom:9px}
  .cap p{font-size:14.5px;color:var(--slate);line-height:1.55;margin:0}

  /* ---------- engagement tiers ---------- */
  .tier{display:grid;grid-template-columns:150px 1fr 190px;gap:28px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:start}
  .tier:first-of-type{border-top:1px solid var(--rule)}
  .tier-stage{font-family:"Newsreader",serif;font-size:21px;color:var(--brass)}
  .tier-who{font-size:15px;color:var(--paper-dim);margin:0}
  .tier-what{font-size:14.5px;color:var(--slate);margin:0}
  .ph{color:var(--brass);border-bottom:1px dotted var(--brass)}

  /* ---------- record ---------- */
  .record{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:36px}
  .rec{background:var(--ink);padding:28px 26px}
  .rec h3{font-size:21px;margin-bottom:6px}
  .rec .meta{font-size:13px;color:var(--brass);margin:0 0 12px}
  .rec p{font-size:14.5px;color:var(--slate);line-height:1.6;margin:0}

  .countries{margin-top:40px;font-size:14.5px;color:var(--paper-dim);max-width:60ch;line-height:1.9}
  .countries span{color:var(--slate)}

  /* ---------- fit ---------- */
  .fit{display:grid;grid-template-columns:1fr 1fr;gap:56px}
  .fit h3{font-size:22px;margin-bottom:14px}
  .fit p{font-size:15.5px;color:var(--paper-dim);margin:0}
  .fit .no p{color:var(--slate)}
  .questions{margin:0;padding:0;list-style:none}
  .questions li{font-family:"Newsreader",serif;font-size:18px;color:var(--paper-dim);padding:10px 0;border-bottom:1px solid var(--rule)}

  /* ---------- cta ---------- */
  .cta{text-align:left}
  .cta h2{font-size:clamp(28px,5vw,46px);max-width:16ch;line-height:1.15}
  .cta p{margin-top:22px;color:var(--paper-dim)}
  .btn{
    display:inline-block;margin-top:34px;padding:15px 30px;
    background:var(--brass);color:var(--ink);text-decoration:none;
    font-weight:500;font-size:15.5px;letter-spacing:.02em;
    transition:background .18s ease;
  }
  .btn:hover{background:#FFBE3D}

  .portrait{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
  .portrait img{width:100%;height:auto;display:block}
  .portrait .slot{width:100%;aspect-ratio:4/5;border:1px dashed var(--brass);display:flex;align-items:center;justify-content:center;color:var(--brass);font-size:13px;text-align:center;padding:16px}
  @media (max-width:820px){.portrait{grid-template-columns:1fr;gap:26px}}

  footer{border-top:1px solid var(--rule);padding:44px 0 60px;color:var(--slate);font-size:13.5px}
  footer .fmark{font-family:"Newsreader",serif;font-size:17px;color:var(--paper);display:block;margin-bottom:6px}

  @media (max-width:820px){
    section{padding:62px 0}
    .ladder-stages{grid-template-columns:1fr 1fr;gap:26px 0}
    .caps{grid-template-columns:1fr}
    .record{grid-template-columns:1fr}
    .fit{grid-template-columns:1fr;gap:38px}
    .tier{grid-template-columns:1fr;gap:8px}
    .navlinks{width:100%;gap:18px 20px;flex-wrap:wrap;padding-top:4px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- 2. Current menu item ----------
   Replaces the inline colour the old pages set by hand. This is what
   keeps the menu consistent from page to page. */
.navlinks a.is-current{color:var(--brass)}

/* ---------- 3. Back-to-home link (was repeated on three pages) ---------- */
.backlink{font-size:14px;color:var(--brass);text-decoration:none}

/* ---------- 4. Advisory page ---------- */
.block{padding:70px 0;border-top:1px solid var(--rule)}
  .block h2{font-size:clamp(26px,4.6vw,40px);max-width:20ch;line-height:1.18}
  .block p{color:var(--paper-dim);margin-top:20px}
  .phase{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:start}
  .phase:first-of-type{border-top:1px solid var(--rule)}
  .phase .n{font-family:"Newsreader",serif;font-size:22px;color:var(--brass)}
  .phase h3{font-size:20px;margin-bottom:6px}
  .phase p{font-size:15px;color:var(--slate);margin:0;line-height:1.6}
  .rule-box{margin-top:34px;padding:26px 28px;background:var(--ink-2);border-left:2px solid var(--brass)}
  .rule-box p{margin:0;color:var(--paper);max-width:58ch;font-size:16px}
  .rule-box p + p{margin-top:14px;color:var(--paper-dim);font-size:15px}

/* ---------- 5. Experience page ---------- */
.case{padding:72px 0;border-top:1px solid var(--rule)}
  .case-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:8px}
  .case h2{font-size:clamp(27px,4.6vw,40px)}
  .case-meta{font-size:13.5px;color:var(--brass);white-space:nowrap}
  .case p{color:var(--paper-dim);margin-top:18px}
  .lesson{margin-top:28px;padding:20px 24px;background:var(--ink-2);border-left:2px solid var(--brass)}
  .lesson p{margin:0;color:var(--paper);font-family:"Newsreader",serif;font-size:18.5px;line-height:1.5;max-width:46ch}
  .quote{margin:30px 0 0;padding:0}
  .quote p{font-family:"Newsreader",serif;font-size:clamp(19px,3vw,25px);line-height:1.45;color:var(--paper);margin:0;max-width:36ch}
  .quote .attrib{font-size:14px;color:var(--brass);margin-top:14px}
  .quote .attrib span{display:block;color:var(--slate);font-size:13.5px;margin-top:2px}

/* ---------- 6. Ventures page ---------- */
.venture{padding:66px 0;border-top:1px solid var(--rule)}
  .venture-head{display:flex;justify-content:space-between;align-items:baseline;gap:22px;flex-wrap:wrap}
  .venture h2{font-size:clamp(26px,4.4vw,38px)}
  .venture-meta{font-size:13.5px;color:var(--brass);white-space:nowrap}
  .venture p{color:var(--paper-dim);margin-top:18px}
  .divisions{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:34px}
  .div{background:var(--ink);padding:26px 24px}
  .div h3{font-size:21px;margin-bottom:4px}
  .div .role{font-size:13px;color:var(--brass);margin:0 0 12px}
  .div p{font-size:14.5px;color:var(--slate);line-height:1.55;margin:0}
  .pending{padding:60px 0;border-top:1px solid var(--rule);color:var(--slate);font-size:15px}
  
  @media (max-width:820px){.divisions{grid-template-columns:1fr}}

/* ---------- 7. Page-not-found ---------- */
.nf{padding:70px 0 90px}
.nf .code{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin:0 0 16px;font-weight:500}
.nf h1{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(2rem,5vw,2.9rem);line-height:1.14;letter-spacing:-.015em;margin:0 0 16px}
.nf .lede{color:var(--paper-dim);font-size:1.02rem;margin:0 0 36px;max-width:46ch}
.nf-list{border-top:1px solid var(--rule);display:flex;flex-direction:column}
.nf-list a{display:flex;align-items:baseline;gap:16px;padding:15px 2px;border-bottom:1px solid var(--rule);text-decoration:none;transition:color .18s ease,padding-left .18s ease}
.nf-list a:hover,.nf-list a:focus-visible{color:var(--brass);padding-left:8px}
.nf-list .t{font-family:"Newsreader",Georgia,serif;font-size:1.1rem;min-width:120px}
.nf-list .d{color:var(--slate);font-size:.88rem}
.nf-foot{margin-top:34px;font-size:.85rem;color:var(--slate)}
@media (prefers-reduced-motion:reduce){.nf-list a{transition:none}}
@media (max-width:520px){.nf-list a{flex-direction:column;gap:3px}.nf-list .t{min-width:0}}

/* ---------- 8. Enquiry form ---------- */
.enq{margin-top:38px;max-width:640px}
.enq fieldset{border:0;border-top:1px solid var(--rule);margin:0 0 8px;padding:26px 0 4px}
.enq legend{font-family:"Newsreader",Georgia,serif;font-size:20px;font-weight:var(--fw-head);padding:0 12px 0 0}
.fld{margin-bottom:24px}
.fld .lbl{display:block;font-size:15px;color:var(--paper);margin-bottom:7px}
.fld .help{display:block;font-size:13.5px;color:var(--slate);margin:-3px 0 8px}
.enq input[type=text],.enq input[type=email],.enq select,.enq textarea{
  width:100%;padding:11px 13px;background:var(--ink-2);color:var(--paper);
  border:1px solid var(--rule);border-radius:3px;font:inherit;font-size:15.5px}
.enq textarea{resize:vertical;min-height:150px;line-height:1.55}
.enq select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.enq input:focus-visible,.enq select:focus-visible,.enq textarea:focus-visible{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.opts{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:4px}
.opts.stack{flex-direction:column;gap:11px}
.opt{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--paper-dim);cursor:pointer;line-height:1.45}
.opt input{margin:4px 0 0;accent-color:var(--brass);flex:0 0 auto}
.opt:hover span{color:var(--paper)}
.fld.has-err input,.fld.has-err select,.fld.has-err textarea{border-color:#C2606A}
.err-msg{display:block;margin-top:6px;font-size:13.5px;color:#E39aa1}
.formnote{padding:13px 16px;border-radius:3px;margin:26px 0 0;font-size:14.5px}
.formnote.err{background:rgba(194,96,106,.12);border:1px solid #C2606A;color:#F0C3C7}
.disclose{font-size:13.5px;color:var(--slate);max-width:58ch;margin:8px 0 26px;padding-top:18px;border-top:1px solid var(--rule)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:620px){.opts{gap:10px 16px}}

/* ---------- 9. Stepped form ---------- */
.steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;padding:0;margin:34px 0 8px;
  border-top:1px solid var(--rule);padding-top:20px}
.steps li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--slate)}
.steps .sn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;border:1px solid var(--rule);font-size:12px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.steps li.now{color:var(--paper)}
.steps li.now .sn{border-color:var(--brass);color:var(--brass)}
.steps li.past{color:var(--paper-dim)}
.steps li.past .sn{border-color:var(--brass);background:var(--brass);color:var(--ink)}
.step-intro{color:var(--paper-dim);max-width:56ch;margin:16px 0 0;font-size:15.5px}
.stepnav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.enq button.btn{border:0;cursor:pointer;font-family:inherit;line-height:1.2}
.btn.ghost{background:transparent;border:1px solid var(--rule);color:var(--paper-dim)}
.btn.ghost:hover{background:transparent;border-color:var(--brass);color:var(--brass)}
.saved{font-size:13.5px;color:var(--slate)}
@media (max-width:560px){.steps{gap:8px 16px}.steps .st{display:none}.steps li.now .st{display:inline}}


/* ---------- 10. Portrait moved to the hero, crest to the footer ---------- */

/* The About section used to repeat the same portrait. One photograph of one
   person, once - the text now runs to a comfortable measure on its own. */
.about-block{max-width:64ch}

/* Footer: the crest sits right, quiet, as a mark rather than a picture. */
.foot-grid{display:flex;align-items:flex-end;justify-content:space-between;gap:36px}
.foot-text{flex:1 1 auto;min-width:0}
.foot-crest{flex:0 0 auto;width:clamp(72px,9vw,112px);height:auto;display:block;opacity:.85}

/* ---------- 11. Pull quote ----------
   The old markup capped the quote at 34ch, which left it filling about half
   the page with dead space beside it. Wider measure, larger type, and the
   attribution on its own ruled line underneath. */
.quotefeat blockquote{margin:0;position:relative}
.quotefeat blockquote p{
  font-family:"Newsreader",Georgia,serif;
  font-weight:var(--fw-head);
  font-size:clamp(23px,3.3vw,35px);
  line-height:1.32;
  letter-spacing:-.012em;
  color:var(--paper);
  margin:0;
  max-width:none;
  text-wrap:balance;
}
.quotefeat blockquote p::before{content:"\201C"}
.quotefeat blockquote p::after{content:"\201D"}

.qattrib{
  margin-top:32px;padding-top:18px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 22px;
}
.qname{font-size:15.5px;color:var(--brass);font-weight:500;letter-spacing:.01em}
.qrole{font-size:14px;color:var(--slate)}

@media (max-width:820px){
  .hero-top{flex-direction:column;align-items:flex-start;gap:30px}
  .hero-portrait{width:clamp(150px,46vw,230px);align-self:flex-start;margin-bottom:0}
  .foot-grid{flex-direction:column;align-items:flex-start;gap:26px}
  .foot-crest{width:84px}
  .qattrib{flex-direction:column;gap:4px}
}