/* ==========================================================================
   IYATTVA LLP — Quantity Surveying | Cost Management | BIM
   style.css
   ========================================================================== */

:root{
  --ink:#000000;
  --body:#6f6f6f;
  --muted:#a9a9a9;
  --faint:#c8c8c8;
  --line:#ececec;
  --line-soft:#f4f4f4;
  --paper:#ffffff;
  --fill:#f0f0f0;

  --nav-w:225px;
  --gut:clamp(26px,5.4vw,78px);
  --col-gap:clamp(34px,4.4vw,64px);

  --fs-body:15.5px;
  --lh-body:1.78;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}

html,body{height:100%;width:100%;}

html{
  overflow-x:hidden;
  scrollbar-width:none;      /* Firefox: hide scrollbar, keep scrolling */
  -ms-overflow-style:none;   /* old Edge / IE */
}

html::-webkit-scrollbar{display:none;}  /* Chrome / Safari / new Edge */

body{
  margin:0;
  width:100%;
  background:var(--paper);
  color:var(--body);
  font-family:"Jost","Century Gothic","Futura",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

body::-webkit-scrollbar{display:none;}

a{color:inherit;text-decoration:none;}

img{max-width:100%;display:block;}

::selection{background:#000;color:#fff;}

:focus-visible{
  outline:1.5px solid var(--ink);
  outline-offset:4px;
  border-radius:1px;
}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

.stage{
  position:relative;
  height:100%;
  display:flex;
  align-items:stretch;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav{
  position:fixed;
  top:50%;
  left:var(--gut);
  transform:translateY(-50%);
  width:var(--nav-w);
  z-index:40;
}

.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(20px,3.4vh,34px);
}

.nav-link{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:17.5px;
  line-height:1.2;
  color:var(--faint);
  transition:color .4s var(--ease), transform .4s var(--ease);
  will-change:transform;
}

.nav-icon{
  width:34px;
  height:34px;
  flex:none;
  object-fit:contain;
  opacity:.38;
  transition:opacity .4s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible{
  color:var(--ink);
  transform:translateX(3px);
}

.nav-link:hover .nav-icon,
.nav-link:focus-visible .nav-icon{opacity:.85;}

.nav-item.is-active .nav-link{color:var(--ink);}
.nav-item.is-active .nav-icon{opacity:1;}

.nav-ext{
  position:relative;
}

.nav-ext .nav-link::after{
  content:"";
  width:5px;height:5px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
  opacity:0;
  transition:opacity .4s var(--ease);
}

.nav-ext .nav-link:hover::after{opacity:.6;}

/* --------------------------------------------------------------------------
   Hero — intro screen
   -------------------------------------------------------------------------- */

.hero{
  position:fixed;
  inset:0 0 0 calc(var(--gut) + var(--nav-w));
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:10;
  opacity:0;
  visibility:hidden;
  transition:opacity .7s var(--ease), visibility .7s;
}

body[data-route="intro"] .hero{opacity:1;visibility:visible;}

.hero-mark {
  width: clamp(220px, 65vw, 360px) !important;
  height: auto;
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.content{
  position:relative;
  margin-left:calc(var(--gut) + var(--nav-w) + var(--col-gap));
  margin-right:var(--gut);
  flex:1 1 auto;
  min-width:0;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;      /* Firefox: hide scrollbar, keep scrolling */
  -ms-overflow-style:none;   /* old Edge / IE */
  z-index:20;
}

.content::-webkit-scrollbar{display:none;}  /* Chrome / Safari / new Edge */

.panel{
  display:none;
  max-width:clamp(880px, 68vw, 1180px);
  padding:16vh 4px 18vh;
}

.panel.is-open{display:block;}

.panel.is-entering{animation:panel-in .6s var(--ease) both;}

@keyframes panel-in{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:none;}
}

/* Head ------------------------------------------------------------------- */

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:30px;
}

.panel-head h1{
  margin:0;
  font-size:clamp(25px,2.5vw,33px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--ink);
}

.mark-link{
  flex:none;
  display:block;
  margin-top:4px;
  line-height:0;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}

.mark-link:hover,
.mark-link:focus-visible{
  opacity:.65;
  transform:scale(1.05);
}

.mark{
  width:26px;
  flex:none;
  margin-top:0;
  opacity:.9;
}

.lead{
  margin:0 0 6px;
  font-size:16px;
  color:var(--ink);
  font-weight:500;
}

.intro{
  max-width:64ch;
  margin:0 0 20px;
}

.intro p{margin:0 0 14px;}

/* Blocks ------------------------------------------------------------------ */

.block{
  margin-top:clamp(40px,5.2vh,58px);
  padding-top:26px;
  border-top:1px solid var(--line);
}

.block > h2{
  margin:0 0 22px;
  font-size:16px;
  font-weight:500;
  color:var(--ink);
  line-height:1.3;
}

.block-note{
  margin:18px 0 0;
  max-width:64ch;
  font-size:14.5px;
}

/* Column groups ----------------------------------------------------------- */

.cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(192px,1fr));
  gap:30px 28px;
}

.col h3{
  margin:0 0 12px;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  padding-bottom:9px;
  border-bottom:1px solid var(--line-soft);
}

.list{
  list-style:none;
  margin:0;
  padding:0;
  font-size:14.5px;
  line-height:1.95;
}

.list li{position:relative;padding-left:14px;}

.list li::before{
  content:"";
  position:absolute;
  left:0;top:.95em;
  width:5px;height:1px;
  background:var(--faint);
}

/* Definition rows --------------------------------------------------------- */

.defs{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}

@media (min-width:901px){
  .defs{
    grid-template-columns:1fr 1fr;
    column-gap:44px;
  }
  .def{grid-template-columns:minmax(110px,150px) 1fr;}
  .def:nth-child(-n+2){border-top:1px solid var(--line-soft);}
}

.def{
  display:grid;
  grid-template-columns:minmax(120px,190px) 1fr;
  gap:24px;
  padding:15px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:14.5px;
  line-height:1.7;
}

.def:first-child{border-top:1px solid var(--line-soft);}

.def dt{color:var(--ink);font-weight:500;}
.def dd{margin:0;}

/* Steps ------------------------------------------------------------------- */

.steps{
  list-style:none;
  counter-reset:step;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:26px 34px;
}

.steps li{
  counter-increment:step;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:14.5px;
  line-height:1.7;
}

.steps li::before{
  content:counter(step,decimal-leading-zero);
  display:block;
  margin-bottom:7px;
  font-size:12px;
  color:var(--faint);
  letter-spacing:.04em;
}

.steps b{
  display:block;
  color:var(--ink);
  font-weight:500;
}

/* Chain ------------------------------------------------------------------- */

.chain{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 4px;
  font-size:14px;
  color:var(--ink);
}

.chain span{
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:100px;
  white-space:nowrap;
}

.chain span + span{
  position:relative;
  margin-left:28px;
}

.chain span + span::before{
  content:"";
  position:absolute;
  left:-21px;
  top:50%;
  width:14px;
  height:1px;
  background:var(--faint);
}

/* Stack (vertical flow) --------------------------------------------------- */

.stack{
  list-style:none;
  margin:0;
  padding:0;
  max-width:62ch;
}

.stack li{
  position:relative;
  padding:0 0 22px 28px;
  font-size:14.5px;
  line-height:1.7;
}

.stack li::before{
  content:"";
  position:absolute;
  left:4px;top:8px;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--ink);
}

.stack li::after{
  content:"";
  position:absolute;
  left:7px;top:19px;
  width:1px;
  height:calc(100% - 19px);
  background:var(--line);
}

.stack li:last-child{padding-bottom:0;}
.stack li:last-child::after{display:none;}

.stack b{
  display:block;
  margin-bottom:3px;
  color:var(--ink);
  font-weight:500;
}

/* FAQ --------------------------------------------------------------------- */

.faq details{
  border-bottom:1px solid var(--line-soft);
}

.faq details:first-of-type{border-top:1px solid var(--line-soft);}

.faq summary{
  list-style:none;
  cursor:pointer;
  padding:15px 34px 15px 0;
  position:relative;
  color:var(--ink);
  font-size:14.5px;
  transition:opacity .3s var(--ease);
}

.faq summary::-webkit-details-marker{display:none;}

.faq summary:hover{opacity:.55;}

.faq summary::after{
  content:"";
  position:absolute;
  right:6px;top:calc(50% - 4px);
  width:7px;height:7px;
  border-right:1px solid var(--muted);
  border-bottom:1px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .35s var(--ease);
}

.faq details[open] summary::after{transform:rotate(-135deg);}

.faq .answer{
  padding:0 0 18px;
  max-width:62ch;
  font-size:14.5px;
  animation:answer-in .35s var(--ease) both;
}

@keyframes answer-in{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:none;}
}

/* Tags -------------------------------------------------------------------- */

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:13.5px;
}

.tags li{
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:100px;
  color:var(--ink);
}

/* Contact ----------------------------------------------------------------- */

.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(192px,1fr));
  gap:30px 28px;
}

.contact-item h3{
  margin:0 0 10px;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  padding-bottom:9px;
  border-bottom:1px solid var(--line-soft);
}

.contact-item a{
  display:inline-block;
  font-size:14.5px;
  line-height:1.9;
  position:relative;
  transition:color .3s var(--ease);
}

.contact-item a:hover{color:var(--ink);}

.form{
  display:grid;
  gap:20px;
  max-width:560px;
}

.field{display:grid;gap:7px;}

.field label{
  font-size:13px;
  color:var(--muted);
}

.field input,
.field select,
.field textarea{
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:9px 0;
  border-radius:0;
  transition:border-color .3s var(--ease);
}

.field textarea{resize:vertical;min-height:92px;line-height:1.7;}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--ink);
}

.field select{appearance:none;cursor:pointer;}

.btn{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:inherit;
  font-size:14.5px;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  border-radius:100px;
  padding:11px 26px;
  cursor:pointer;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}

.btn:hover{background:var(--ink);color:#fff;}

.form-note{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

/* Panel foot -------------------------------------------------------------- */

.panel-foot{
  margin-top:clamp(44px,6vh,64px);
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:14px;
}

.panel-foot strong{color:var(--ink);font-weight:500;}

.panel-foot a{
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
  transition:border-color .35s var(--ease);
}

.panel-foot a:hover{border-bottom-color:var(--ink);}

/* --------------------------------------------------------------------------
   Mobile bar + menu
   -------------------------------------------------------------------------- */

.bar{
  display:none;
  position:fixed;
  top:0;left:0;right:0;
  height:60px;
  padding:0 20px;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  z-index:60;
}

.bar-brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:16px;
  color:var(--ink);
}

.bar-brand img{width:17px;}

.burger{
  width:42px;height:42px;
  margin-right:-10px;
  border:0;
  background:transparent;
  display:grid;
  place-content:center;
  gap:5px;
  cursor:pointer;
  padding:0;
}

.burger i{
  display:block;
  width:20px;height:1px;
  background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}

body.menu-open .burger i:nth-child(1){transform:translateY(3px) rotate(45deg);}
body.menu-open .burger i:nth-child(2){opacity:0;}
body.menu-open .burger i:nth-child(3){transform:translateY(-3px) rotate(-45deg);}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:1100px){
  :root{--nav-w:190px;--col-gap:clamp(28px,4vw,44px);}
  .nav-link{font-size:16px;}
  .nav-icon{width:27px;height:27px;}
}

@media (max-width:900px){
  body{overflow:auto;}

  .bar{display:flex;}

  .stage{
    display:flex;
    flex-direction:column;
    height:auto;
    padding-top:60px;
  }

  .hero{order:1;}
  .nav{order:2;}
  .content{order:3;}

  body[data-route="intro"] .bar{display:none;}
  body[data-route="intro"] .stage{padding-top:0;}

  /* Nav becomes a full-screen overlay */
  .nav{
    position:fixed;
    inset:60px 0 0 0;
    width:100%;
    transform:none;
    padding:min(7vh,52px) 26px 60px;
    background:var(--paper);
    overflow-y:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s var(--ease), visibility .35s;
    z-index:55;
  }

  .nav::-webkit-scrollbar{display:none;}

  body.menu-open .nav{opacity:1;visibility:visible;}
  body.menu-open{overflow:hidden;}

  .nav-list{gap:22px;}
  .nav-link{font-size:19px;gap:20px;color:var(--ink);}
  .nav-icon{width:32px;height:32px;opacity:.55;}
  .nav-item.is-active .nav-link{opacity:1;}

  /* Intro: logo + menu stacked */
  .hero{
    position:static;
    inset:auto;
    height:auto;
    padding:min(15vh,116px) 26px min(8vh,58px);
    opacity:1;
    visibility:visible;
    display:none;
  }

  body[data-route="intro"] .hero{display:flex;}

  body[data-route="intro"] .nav{
    position:static;
    opacity:1;
    visibility:visible;
    padding:0 26px min(12vh,90px);
    background:transparent;
  }

  body[data-route="intro"] .nav-list{gap:20px;}

  .hero-mark{width:clamp(200px, 65vw, 320px) !important;}

  .content{
    margin:0;
    width:auto;
    height:auto;
    overflow:visible;
    padding:0 26px;
  }

  .panel{padding:min(7vh,52px) 0 14vh;max-width:none;}

  .panel-head{margin-bottom:24px;}

  .mark{display:none;}
}

@media (max-width:560px){
  :root{--fs-body:15px;}

  .panel-head h1{font-size:24px;}

  .cols,
  .steps,
  .contact-grid{grid-template-columns:1fr;gap:26px;}

  .def{grid-template-columns:1fr;gap:4px;}

  .chain{font-size:13px;}

  .chain span{padding:6px 12px;}

  .chain span + span::before{width:10px;margin-right:10px;}

  .panel-foot{flex-direction:column;align-items:flex-start;gap:12px;}
}

/* --------------------------------------------------------------------------
   Motion preferences / print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media print{
  .nav,.bar,.hero{display:none !important;}
  .content{margin:0;height:auto;overflow:visible;}
  .panel{display:block !important;padding:0 0 40px;}
  body{overflow:visible;color:#000;}
}