/* ==========================================================================
   Future Is One (FIO) — replicated from FIO_Website_23 06 2026.xd
   Design canvas: 1920 px wide. 1rem === 10 design px.
   Fonts in the XD file: IvyMode, Montserrat, Helvetica Now Display, Graphik.
   Montserrat is on Google Fonts. IvyMode and Helvetica Now Display are
   licensed fonts, so the stacks below try the real face first and fall back
   to Playfair Display / Inter, which match their proportions closely.
   ========================================================================== */

/* ---------- 1. Scaling root ---------------------------------------------- */
:root{
  --yellow:#ffc500;
  --amber:#ffa800;
  --ink:#171717;
  --dark:#333;
  --grey:#bababa;
  --grey-mid:#808080;
  --grey-dark:#4d4d4d;
  --grey-line:#707070;
  --card:#f2f4f7;
  --forest:#233210;
  --green:#6bb119;
  --green-price:#02a326;
  --green-unit:#00a848;
  --blue-unit:#28aae1;
  --footer-link:#777;

  --serif:"IvyMode","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif;
  --ui:"Helvetica Now Display","Inter",-apple-system,"Segoe UI",Arial,sans-serif;

  --page:192rem;         /* 1920 design px */
  --shell:0rem;          /* left offset of the 1920 canvas inside the viewport */
}

html{
  font-size:10px;               /* fallback for very old browsers   */
  -webkit-text-size-adjust:100%;
}
/* Between 1024px and 2400px the whole desktop composition scales linearly, so
   at exactly 1920px every value below lands on its original artboard pixel. */
@media (min-width:1024px){
  html{ font-size:0.520833vw; }   /* 1920 * 0.00520833 = 10px */
}
@media (min-width:2400px){
  html{ font-size:12.5px; }       /* stop growing past 2400px */
}

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

body{
  margin:0;
  font-family:var(--sans);
  font-size:1.7rem;
  line-height:1.5;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}

.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;
}

/* The composition is 1920 wide and centred; bands bleed full width. */
.band{position:relative;width:100%}
.canvas{
  position:relative;
  width:min(100%,var(--page));
  margin-inline:auto;
  height:100%;
}

/* ---------- 2. Header ----------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;justify-content:center;
  pointer-events:none;
}
.nav-bar{
  pointer-events:auto;
  position:relative;
  width:97rem;height:9.6rem;
  background:rgba(23,23,23,.81);
  border-radius:0 0 3rem 3rem;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.nav-logo{position:absolute;left:4.33rem;top:2.52rem;width:8.67rem;height:4.56rem}
.nav-logo img{width:100%;height:100%}
.nav-rule{
  position:absolute;left:18.85rem;top:1.85rem;
  width:1px;height:5.7rem;background:var(--grey);
}
.nav-links{
  position:absolute;left:27.2rem;top:0;height:100%;
  display:flex;align-items:center;
}
.nav-links a{
  font-family:var(--sans);font-weight:500;font-size:1.7rem;line-height:2.5rem;
  color:#fff;text-transform:uppercase;letter-spacing:.01em;
  white-space:nowrap;transition:color .2s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--yellow)}
.nav-links li+li{margin-left:6.6rem}
.nav-call{
  position:absolute;left:90.63rem;top:3.31rem;
  width:2.5rem;height:2.61rem;
}
.nav-call img{width:100%;height:100%}
.nav-toggle{display:none}

/* ---------- 3. Hero ------------------------------------------------------- */
.hero{
  height:108rem;
  /* The artboard hero is 1080 tall. On a 1366x768 or 1440x900 laptop that
     overflows the viewport and the headline gets cut off, so the hero is
     capped at the visible viewport height and its copy is anchored to the
     bottom edge instead of the top. At 1920x1080 nothing changes. */
  max-height:100vh;
  max-height:100svh;
  min-height:58rem;
  background:#333 url("../img/hero-aerial.jpg") no-repeat center -23.2rem;
  background-size:auto 192rem;
  overflow:hidden;
}
@media (min-width:1024px) and (max-height:900px){
  .hero{background-position:center top;background-size:cover}
}
/* The artboard has no scrim; a very light one only at the extreme bottom keeps
   the headline readable when the image is scaled on small screens. */
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:34rem;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.18));
  pointer-events:none;
}
.hero .canvas{z-index:2}
/* bottom-anchored so a short viewport crops the sky, never the words */
.hero-eyebrow{
  position:absolute;left:10.7rem;bottom:23.3rem;
  margin:0;width:47.7rem;
  font-family:var(--serif);font-weight:400;font-size:2.4rem;line-height:2.6rem;
  color:#fff;
}
.hero-title{
  position:absolute;left:10rem;bottom:2.9rem;
  margin:0;width:77.6rem;
  font-family:var(--serif);font-weight:400;font-size:10rem;line-height:9.5rem;
  color:#fff;text-transform:uppercase;
  text-shadow:0 .2rem 3rem rgba(0,0,0,.35);
}
.hero-scroll{
  position:absolute;left:94.7rem;bottom:8.8rem;
  width:2.7rem;height:3.6rem;
  border:.2rem solid #fff;border-radius:2rem;
  display:block;
}
.hero-scroll span{
  position:absolute;left:50%;top:1.5rem;width:.2rem;height:.9rem;
  background:#fff;transform:translateX(-50%);
  animation:scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint{0%,100%{opacity:1;transform:translate(-50%,0)}50%{opacity:.2;transform:translate(-50%,.6rem)}}

/* ---------- 4. Hero enquiry form ----------------------------------------- */
/* On desktop the panel floats over the hero (artboard x 1155, y 631); on
   mobile it becomes its own full-width band, exactly like the phone artboard. */
.lead-band{height:0;position:relative;z-index:5}
.lead-form{
  position:absolute;left:115.5rem;top:-44.9rem;
  width:64.3rem;min-height:38.5rem;
  background:rgba(112,112,112,.85);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:3.2rem 3.5rem 3.4rem;
}
.lead-form h2{
  margin:0 0 2.6rem;
  font-family:var(--serif);font-weight:600;font-size:2.4rem;line-height:2.6rem;
  color:#fff;
}
.lead-grid{display:grid;grid-template-columns:27.1rem 27.1rem;gap:2rem 2.4rem}
.lead-grid .full{grid-column:1/-1;width:56.6rem}
.lead-form input[type=text],
.lead-form input[type=tel],
.lead-form input[type=email],
.lead-form select{
  width:100%;height:3.3rem;
  border:0;border-radius:.5rem;background:#fff;
  padding:0 1.2rem;
  font-family:var(--sans);font-weight:500;font-size:1.7rem;
  color:var(--ink);
}
.lead-form ::placeholder{color:var(--grey-line);opacity:1}
.lead-consent{
  display:flex;gap:1rem;margin-top:2rem;
  font-family:var(--sans);font-weight:500;font-size:1.7rem;line-height:2.6rem;
  color:#dedede;
}
.lead-consent input{
  appearance:none;-webkit-appearance:none;
  flex:0 0 auto;width:2.4rem;height:2.3rem;margin:.2rem 0 0;
  border-radius:.7rem;background:#fff;border:.1rem solid #cfcfcf;cursor:pointer;
}
.lead-consent input:checked{
  background:#0078d4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.4 5 9.5 13 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/1.4rem 1.1rem;
  border-color:#0078d4;
}
.lead-consent a{text-decoration:underline}
.btn-submit{
  margin-top:1.8rem;
  width:14.5rem;height:4.1rem;
  border:0;border-radius:.5rem;background:var(--amber);
  font-family:var(--sans);font-weight:600;font-size:1.7rem;color:#fff;
  cursor:pointer;transition:background .2s,transform .2s;
}
.btn-submit:hover{background:#ffb62e;transform:translateY(-1px)}

/* ---------- 5. Project cards --------------------------------------------- */
.projects{background:#000;padding:2.2rem 0 2.4rem}
.project-grid{
  display:grid;grid-template-columns:repeat(3,61.1rem);gap:2rem;
  padding-inline:2rem;
}
.p-card{
  position:relative;
  background:var(--card);border-radius:2rem;
  height:80rem;overflow:hidden;
  display:flex;flex-direction:column;
}
.p-card__media{
  position:relative;height:53.9rem;border-radius:2rem;overflow:hidden;flex:0 0 auto;
}
.p-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.p-card:hover .p-card__media img{transform:scale(1.04)}
.p-tags{position:absolute;left:2.5rem;top:2.5rem;display:flex;gap:.3rem}
.p-tags span{
  min-width:8.3rem;height:2.9rem;padding:0 1rem;border-radius:1.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--dark);
  font-size:1.9rem;font-weight:400;line-height:1;text-transform:capitalize;
}
.p-tags span.is-active{background:#000;color:#fff}
.p-card__body{padding:3rem 5.7rem 0;flex:1 1 auto;display:flex;flex-direction:column}
.p-loc{
  display:flex;align-items:center;gap:.75rem;margin:0;
  font-size:2rem;line-height:2.6rem;color:var(--grey-mid);text-transform:capitalize;
}
.p-card h3{
  margin:.9rem 0 0;
  font-size:2.4rem;font-weight:600;line-height:2.6rem;color:var(--dark);
}
.p-specs{
  display:flex;gap:2.2rem;margin-top:2.1rem;
  font-size:2rem;line-height:2.6rem;color:var(--dark);text-transform:capitalize;
}
.p-specs li{display:flex;align-items:center;gap:.65rem;white-space:nowrap}
.p-specs li:last-child{color:var(--grey-mid)}
.p-card__foot{
  margin-top:auto;border-top:.1rem solid var(--grey);
  padding:2.45rem 0 2.6rem;
  display:flex;align-items:center;justify-content:space-between;
}

/* icons keep their artboard proportions */
.ic-pin {flex:0 0 auto;width:1.74rem;height:2.21rem}
.ic-bed {flex:0 0 auto;width:2.44rem;height:1.79rem}
.ic-bath{flex:0 0 auto;width:2.46rem;height:2.14rem}
.ic-sqft{flex:0 0 auto;width:2.74rem;height:1.79rem}
.p-card__foot .p-logo{height:5.4rem;width:auto}
.p-price{font-size:2.9rem;font-weight:700;color:var(--dark)}
.carousel-dots{display:none}

/* ---------- 6. Philosophy (yellow) --------------------------------------- */
.philosophy{background:var(--yellow);padding-top:10.8rem}
.philosophy .lotus{display:block;margin:0 auto;width:6rem;height:6.3rem}
.philosophy blockquote{
  margin:1.9rem auto 0;max-width:60.7rem;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:2.4rem;line-height:2.6rem;text-align:center;color:var(--ink);
}
.about{position:relative;margin-top:4.2rem;padding-bottom:9.5rem}
.about__media{
  width:125.5rem;height:38rem;margin-inline:auto;
  overflow:hidden;
}
.about__media img{width:100%;height:71.4rem;object-fit:cover;object-position:center top}
.about__cols{
  display:grid;grid-template-columns:64.3rem 60.9rem;
  width:125.2rem;margin:0 auto;
}
.about__lead{
  background:var(--forest);color:#fff;
  padding:3.6rem 4.7rem;min-height:29.5rem;
  font-family:var(--serif);font-weight:400;font-size:3.2rem;line-height:4rem;
}
.about__body{
  background:#fff;color:var(--ink);
  padding:4.2rem 4.2rem 4.2rem 4.2rem;min-height:29.5rem;
  font-size:2.1rem;line-height:2.5rem;
}
.about__body p{margin:0 0 2.5rem}
.about__body p:last-child{margin-bottom:0}

/* ---------- 7. Vision + sustainability strip ----------------------------- */
.vision{
  height:105.3rem;
  background:#1d2318 url("../img/futuristic-office.jpg") no-repeat center -2.3rem;
  background-size:cover;
  display:flex;align-items:flex-end;
}
.vision h2{
  position:absolute;left:52rem;top:31.8rem;margin:0;width:66rem;
  font-family:var(--serif);font-weight:400;font-size:6.5rem;line-height:6rem;
  color:#fff;text-transform:uppercase;
  text-shadow:0 .3rem 3rem rgba(0,0,0,.45);
}
.pillars{
  position:absolute;left:37.8rem;bottom:0;
  width:116.5rem;height:13.4rem;
  background:var(--forest);border-radius:3rem 3rem 0 0;
  display:flex;align-items:stretch;
}
.pillar{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;padding-top:1.9rem;
  color:#fff;text-align:center;position:relative;
}
.pillar+.pillar::before{
  content:"";position:absolute;left:0;top:2.6rem;
  width:1px;height:9rem;background:var(--grey);opacity:.65;
}
.pillar img{height:4.9rem;width:auto;margin-bottom:.7rem}
.pillar span{
  font-family:var(--sans);font-weight:500;font-size:1.7rem;line-height:2rem;
  display:block;
}
.pillar:nth-child(1){flex-grow:205.5}
.pillar:nth-child(2){flex-grow:217}
.pillar:nth-child(3){flex-grow:203.5}
.pillar:nth-child(4){flex-grow:166}
.pillar:nth-child(5){flex-grow:170}
.pillar:nth-child(6){flex-grow:203}

/* ---------- 8. Awards ---------------------------------------------------- */
.awards{background:var(--grey);height:54.6rem;padding-top:7.2rem;text-align:center}
.awards h2{
  margin:0 auto;width:70.2rem;
  font-family:var(--serif);font-weight:400;font-size:6.5rem;line-height:6rem;
  color:var(--ink);text-transform:uppercase;
}
.award-row{
  display:flex;justify-content:center;gap:7.2rem;
  margin-top:7.7rem;
}
.award-row img{height:18.33rem;width:auto}

/* ---------- 9. Testimonials ---------------------------------------------- */
.testimonials{background:var(--dark);height:95.9rem;color:#fff}
.testimonials h2{
  position:absolute;left:31.5rem;top:13.5rem;margin:0;width:60rem;
  font-family:var(--serif);font-weight:400;font-size:6.5rem;line-height:6rem;
  text-transform:uppercase;
}
.tst-media{
  position:absolute;left:31.7rem;top:29.9rem;
  width:64.3rem;height:50rem;border-radius:.9rem;overflow:hidden;
}
.tst-media img{width:100%;height:100%;object-fit:cover}
.tst-play{
  position:absolute;inset:0;margin:auto;width:7.5rem;height:8.7rem;
  border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;
}
.tst-play svg{width:100%;height:100%;fill:rgba(255,255,255,.59);transition:fill .2s,transform .2s}
.tst-play:hover svg{fill:rgba(255,255,255,.85);transform:scale(1.06)}
.tst-panel{position:absolute;left:100.35rem;top:29.95rem;width:65.5rem;padding-top:2.8rem;border-top:.1rem solid var(--grey-line)}
.tst-badge{display:flex;align-items:flex-start;gap:1rem}
.tst-score{font-family:Helvetica,Arial,sans-serif;font-size:3.3rem;line-height:1;color:#595a5d;letter-spacing:-.04em}
.tst-google{position:relative}
.tst-google img{width:8.16rem;height:4.59rem}
.tst-google::after{
  content:"";position:absolute;left:1rem;bottom:-1.4rem;
  border:.8rem solid transparent;border-top-color:#fff;
}
.tst-badge-shell{background:#fff;border-radius:.4rem;padding:.6rem 1rem;display:flex;gap:1rem;align-items:center}
.tst-dots{display:flex;gap:.9rem;margin-top:3rem}
.tst-dots button{
  width:3rem;height:3rem;border-radius:50%;
  border:.1rem solid var(--grey-dark);background:transparent;color:var(--grey-dark);
  font-family:var(--sans);font-weight:500;font-size:2.1rem;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.tst-dots button[aria-selected="true"]{border-color:var(--grey);color:var(--grey)}
.tst-dots button:hover{border-color:#fff;color:#fff}
.tst-quote{
  margin:2.6rem 0 0;width:52.6rem;
  font-size:2.1rem;line-height:2.5rem;color:#fff;
}
.tst-author{
  margin:3.6rem 0 0;display:flex;align-items:center;gap:.8rem;
  font-family:var(--serif);font-size:2.1rem;line-height:2.5rem;color:#fff;
}
.tst-stars{display:flex;gap:.3rem}
.tst-stars img{width:2.25rem;height:2.16rem}

/* ---------- 10. FAQ ------------------------------------------------------ */
.faq{background:var(--grey);padding:14.1rem 0 13.8rem}
.faq h2{
  margin:0 0 4.05rem 44.25rem;width:70.2rem;
  font-family:var(--serif);font-weight:400;font-size:6.5rem;line-height:6rem;
  color:var(--ink);text-transform:uppercase;
}
.faq-list{width:156rem;margin:0 auto 0 19.15rem;border-top:.1rem solid var(--grey-line)}
.faq-item{
  border-bottom:.1rem solid var(--grey-line);
  display:grid;grid-template-columns:77.6rem 51.4rem 1fr;align-items:start;
  min-height:11.45rem;
}
.faq-q{
  grid-column:1;width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:3rem 1fr;align-items:start;
  gap:0 3.05rem;padding:2.25rem 0 2.4rem 20.2rem;
}
.faq-num{
  width:3rem;height:3rem;border-radius:50%;border:.1rem solid var(--grey-dark);
  display:grid;place-items:center;margin-top:.9rem;
  font-family:var(--sans);font-weight:500;font-size:2.1rem;color:var(--grey-dark);
  transition:border-color .25s,color .25s;
}
.faq-q h3{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:3.2rem;line-height:4rem;color:var(--grey-dark);
  transition:color .25s;
}
.faq-q:hover h3{color:var(--ink)}
.faq-a{
  grid-column:2;overflow:hidden;max-height:0;transition:max-height .35s ease;
  font-size:2rem;line-height:2.8rem;color:var(--grey-dark);
}
.faq-a > div{padding:1.1rem 0 2.6rem}
.faq-item.is-open .faq-a{max-height:44rem}
.faq-item.is-open .faq-num{border-color:var(--ink);color:var(--ink)}
.faq-item.is-open .faq-q h3{color:var(--ink)}

/* ---------- 11. Footer --------------------------------------------------- */
.site-footer{background:#000;color:var(--footer-link);padding:16.8rem 0 0;min-height:64.1rem}
.footer-grid{
  display:grid;grid-template-columns:54.4rem 18.3rem 21.3rem 1fr;
  padding-left:41.6rem;
}
.footer-logo{width:12.9rem;height:6.8rem;margin-bottom:1.7rem}
.footer-contact{margin:0 0 2.8rem;display:grid;gap:.5rem}
.footer-contact a{
  display:flex;align-items:center;gap:1.4rem;
  font-family:var(--ui);font-size:1.7rem;line-height:3rem;color:#d3d3d3;
}
.footer-contact a:hover{color:#fff}
.footer-contact .at{
  font-family:var(--sans);font-weight:600;font-size:2.9rem;line-height:1;
  color:var(--green);width:2.4rem;text-align:center;
}
.footer-contact img{width:2.2rem;height:2.2rem}
.footer-contact .tel{font-family:var(--ui);font-weight:700}
.footer-legal{
  font-family:var(--ui);font-weight:300;font-size:2rem;line-height:2.5rem;
  color:#d9d9d9;margin:0 0 2rem;
}
.footer-privacy{
  font-family:var(--ui);font-weight:300;font-size:1rem;line-height:1;
  color:#d9d9d9;max-width:45.3rem;margin:0;
}
.footer-nav a{
  display:block;font-family:var(--ui);font-size:1.7rem;line-height:3rem;color:var(--footer-link);
}
.footer-nav a:hover{color:#fff}
.footer-bar{background:var(--yellow);height:9.1rem;display:flex;align-items:center}
.footer-bar .canvas{display:flex;align-items:center;padding-left:38.2rem;height:auto}
.footer-bar a,.footer-bar span{
  font-family:var(--ui);font-weight:300;font-size:1.5rem;color:#000;width:14.9rem;
}

/* ==========================================================================
   12. Project pages
   ========================================================================== */
.page-head{background:#e9e9e9;padding:15.9rem 0 0;text-align:center}
.page-lockup{margin-inline:auto;display:block}
.page-lockup.vector{
  width:20.6rem;height:12.1rem;background:#fff;border-radius:1.4rem;
  display:grid;place-items:center;box-shadow:0 .4rem 2rem rgba(0,0,0,.08);
}
.page-lockup.vector img{width:11.9rem;height:auto}
.page-lockup.raster{width:28.9rem;height:auto}
.page-lockup.raster.narrow{width:25rem}
.page-place{
  margin:1.4rem 0 0;font-family:var(--sans);font-weight:400;font-size:2rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grey-dark);
}
.page-intro{
  margin:4.2rem auto 0;max-width:74.1rem;
  font-family:var(--serif);font-style:italic;font-size:2.4rem;line-height:3rem;
  text-align:center;color:var(--ink);
}
.unit-section{background:#e9e9e9;padding:6.6rem 0 8.6rem}
.unit-grid{
  display:grid;grid-template-columns:repeat(2,53.3rem);
  gap:6.3rem 4.1rem;justify-content:center;
}
.u-card{
  background:#fff;border-radius:1.6rem;overflow:hidden;
  box-shadow:0 .6rem 2.4rem rgba(0,0,0,.06);
  display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s;
}
.u-card:hover{transform:translateY(-.6rem);box-shadow:0 1.6rem 4rem rgba(0,0,0,.14)}
.u-card__media{height:45.4rem;border-radius:3rem;overflow:hidden;background:#f4f4f4;display:block}
.u-card__media img{width:100%;height:100%;object-fit:cover}
/* the Mirai North artboard ships without unit photography yet */
.u-placeholder{
  display:block;width:100%;height:100%;
  background:repeating-linear-gradient(135deg,#f4f4f4 0 2rem,#efefef 2rem 4rem);
}
.u-card__body{padding:2.4rem 1.3rem 2.4rem}
.u-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem}
.u-head h3{margin:0;font-size:2.4rem;font-weight:600;line-height:2.6rem;color:var(--green-unit)}
.u-head .u-price{font-size:2.4rem;font-weight:600;color:var(--green-price)}
.u-card.blue .u-head h3,.u-card.blue .u-head .u-price{color:var(--blue-unit)}
.u-loc{margin:.9rem 0 0;font-size:1.8rem;color:var(--grey);text-transform:capitalize}
.u-specs{
  display:flex;gap:3.9rem;margin-top:1.4rem;
  font-size:2rem;color:var(--ink);text-transform:capitalize;
}
.u-specs li{display:flex;align-items:center;gap:.9rem;white-space:nowrap}
.u-specs img{flex:0 0 auto}

/* --- unit detail page --- */
.detail{background:#e9e9e9;padding:6.6rem 0 9rem}
.detail-hero{
  width:110.4rem;height:55.3rem;margin:0 auto;
  border-radius:3rem;overflow:hidden;
}
.detail-hero img{width:100%;height:100%;object-fit:cover}
.detail-thumbs{
  display:grid;grid-template-columns:repeat(3,34.8rem);gap:3.1rem;
  justify-content:center;margin-top:2.4rem;
}
.detail-thumbs button{
  height:29.6rem;border:0;padding:0;border-radius:3rem;overflow:hidden;
  cursor:pointer;background:#ddd;
}
.detail-thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.detail-thumbs button:hover img{transform:scale(1.05)}
.detail-cols{
  display:grid;grid-template-columns:65.6rem 64.3rem;gap:7.5rem;
  width:137.4rem;margin:6.6rem auto 0;
}
.spec-loc{font-size:1.8rem;color:var(--grey-dark);text-transform:capitalize}
.spec-title{
  margin:1.2rem 0 0;background:#d1d1d1;height:6.8rem;
  display:flex;align-items:center;padding-left:1.7rem;
  font-size:2.4rem;font-weight:600;color:var(--ink);
}
.spec-price-label{margin:1.4rem 0 0;font-size:1.8rem;color:var(--grey-dark);text-transform:capitalize}
.spec-price{margin:.2rem 0 0;font-size:2.4rem;font-weight:600;color:var(--ink)}
.spec-table{
  margin-top:1.4rem;background:#d1d1d1;height:8.6rem;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
  padding:0 1.7rem;
}
.spec-table dt{font-size:1.8rem;color:var(--ink);text-transform:capitalize;margin-bottom:.6rem}
.spec-table dd{margin:0;font-size:2rem;color:var(--ink);display:flex;align-items:center;gap:.9rem}
.spec-table dd img{height:2rem;width:auto}
.spec-table > div{display:flex;flex-direction:column}
.spec-desc{margin-top:2.4rem;font-size:1.8rem;line-height:2.6rem;color:var(--grey-dark)}
.spec-desc strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.4rem}

.detail-form-intro{
  margin:0 0 3.4rem;
  font-family:var(--serif);font-style:italic;font-size:2.4rem;line-height:3rem;color:var(--ink);
}
.detail-form{
  background:rgba(112,112,112,.92);padding:3.4rem 3.5rem 3.6rem;
  width:64.3rem;
}
.detail-form label{
  display:block;font-family:var(--sans);font-weight:500;font-size:1.7rem;
  line-height:2.6rem;color:#fff;margin-bottom:.5rem;
}
.detail-form label.req{color:#ff0303}
.detail-form .row{display:grid;grid-template-columns:27.1rem 27.1rem;gap:2.4rem;margin-bottom:2.3rem}
.detail-form input,.detail-form select{
  width:100%;height:3.3rem;border:0;border-radius:.5rem;background:#fff;
  padding:0 1.2rem;font-family:var(--sans);font-weight:500;font-size:1.7rem;
}
.detail-form .full input{width:56.6rem;max-width:100%}
.detail-form .verify{
  background:none;border:0;color:#fff;border-bottom:.1rem solid rgba(255,255,255,.5);
  font-family:var(--sans);font-weight:500;font-size:1.7rem;cursor:pointer;
  padding:0 0 .2rem;align-self:end;justify-self:end;height:auto;
}
.detail-form .phone-row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2rem}
.detail-form .agree{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.detail-form .agree input{
  appearance:none;-webkit-appearance:none;width:2.4rem;height:2.3rem;
  border-radius:.4rem;background:#fff;cursor:pointer;flex:0 0 auto;
}
.detail-form .agree input:checked{
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.4 5 9.5 13 1' fill='none' stroke='%23171717' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/1.4rem 1.1rem;
}
.detail-form .agree span{font-size:1.7rem;color:#dedede}
.detail-form .fineprint{
  margin:1rem 0 0;max-width:36rem;font-size:1.7rem;line-height:2.6rem;color:#dedede;
}
.detail-form .actions{display:flex;justify-content:flex-end;margin-top:-3.6rem}

/* --- "other projects" strip on project pages --- */
.other-projects{background:#000;padding:2.3rem 0 3rem}
.other-projects .project-grid{
  grid-template-columns:repeat(2,61.1rem);justify-content:center;padding-inline:0;
}

/* ==========================================================================
   13. Tablet  (<1440px keeps the scaled desktop; <1280 reflows)
   ========================================================================== */
@media (max-width:1279.98px){
  html{font-size:10px}
  .canvas{width:100%;padding-inline:4rem}

  .nav-bar{width:calc(100% - 8rem);height:8rem}
  .nav-links{left:auto;right:9rem}
  .nav-links li+li{margin-left:3rem}
  .nav-links a{font-size:1.4rem}
  .nav-call{left:auto;right:3rem;top:2.7rem}
  .nav-logo{left:3rem;top:1.8rem}
  .nav-rule{left:15rem;top:1.5rem;height:5rem}

  .hero{height:70rem;max-height:100svh;background-position:center center;background-size:cover}
  .hero-title{font-size:6.4rem;line-height:6rem;width:auto;right:4rem;bottom:9rem;left:4rem}
  .hero-eyebrow{left:4rem;bottom:22rem;width:auto}
  .hero-scroll{left:50%;bottom:3rem;transform:translateX(-50%)}
  .lead-band{height:auto;background:#474747}
  .lead-band .canvas{padding-inline:0}
  .lead-form{position:static;width:100%;background:#474747;backdrop-filter:none;
             padding:3.2rem 3.5rem 4.3rem}

  .project-grid{grid-template-columns:repeat(2,1fr);gap:2.4rem;padding-inline:4rem}
  .p-card{height:auto}
  .p-card__media{height:34rem}
  .p-card__body{padding:2.4rem 3rem 0}
  .p-specs{gap:2.4rem;font-size:1.6rem;flex-wrap:wrap}

  .about__media{width:100%;height:32rem}
  .about__cols{grid-template-columns:1fr 1fr;width:100%}
  .about__lead{font-size:2.6rem;line-height:3.4rem;padding:3rem}
  .about__body{padding:3rem}

  .vision{height:60rem}
  .vision h2{position:static;width:auto;font-size:4.8rem;line-height:5rem;
             padding:0 4rem 22rem;margin-top:14rem}
  .vision .canvas{display:flex;flex-direction:column;justify-content:center}
  .pillars{left:4rem;right:4rem;width:auto}
  .pillar span{font-size:1.3rem;line-height:1.6rem}
  .pillar img{height:3.6rem}

  .awards{height:auto;padding:6rem 0}
  .awards h2{width:auto;font-size:4.4rem;line-height:4.6rem}
  .award-row{gap:3rem;flex-wrap:wrap}
  .award-row img{height:13rem}

  .testimonials{height:auto;padding:6rem 0}
  .testimonials h2,.tst-panel{position:static;width:auto}
  .testimonials h2{font-size:4.4rem;line-height:4.6rem;margin-bottom:3rem}
  .tst-media{position:relative;left:auto;top:auto;width:auto;height:38rem;margin-bottom:3rem}
  .tst-quote{width:auto}

  .faq{padding:6rem 0}
  .faq h2{margin:0 0 3rem;font-size:4.4rem;line-height:4.6rem;width:auto}
  .faq-list{width:100%;margin-left:0}
  .faq-item{grid-template-columns:1fr;min-height:0}
  .faq-q{grid-column:1;grid-template-columns:3rem 1fr;padding:2rem 0;gap:0 1.6rem}
  .faq-q h3{font-size:2.4rem;line-height:3.2rem}
  .faq-a{grid-column:1}
  .faq-a > div{padding:0 0 2.4rem 4.6rem}

  .site-footer{padding:6rem 0 4rem;min-height:0}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:3rem;padding-left:0}
  .footer-grid > :first-child{grid-column:1/-1}
  .footer-bar .canvas{padding-left:0;gap:4rem}
  .footer-bar a,.footer-bar span{width:auto}

  .unit-grid{grid-template-columns:repeat(2,1fr);gap:3rem}
  .u-card__media{height:30rem}
  .detail-hero{width:100%;height:42rem}
  .detail-thumbs{grid-template-columns:repeat(3,1fr)}
  .detail-thumbs button{height:20rem}
  .detail-cols{grid-template-columns:1fr 1fr;gap:4rem;width:100%}
  .detail-form,.detail-form .full input{width:100%}
  .detail-form .row{grid-template-columns:1fr 1fr}
  .detail-form{padding:3rem 2.6rem 3.2rem}
  .spec-table{height:auto;padding:1.6rem;gap:1.2rem}
  .spec-table dd{font-size:1.8rem;flex-wrap:wrap}
  .other-projects .project-grid{grid-template-columns:repeat(2,1fr)}
}

/* the unit detail two-column split needs more room than a small tablet has */
@media (max-width:1023.98px){
  .detail-cols{grid-template-columns:1fr;gap:3.6rem}
  .detail-form,.detail-form .full input{width:100%;max-width:100%}
}

/* ==========================================================================
   14. Mobile (<768px) — follows the iPhone 14 Pro Max artboard
   ========================================================================== */
@media (max-width:767.98px){
  .canvas{padding-inline:2rem}

  .site-header{pointer-events:auto}
  .nav-bar{                       /* phone artboard: 430 x 95, radius 0 0 30 30 */
    width:100%;height:9.5rem;border-radius:0 0 3rem 3rem;
    background:#2c2824;
  }
  .nav-logo{left:2.9rem;top:2.5rem;width:8.7rem;height:4.6rem}
  .nav-rule{display:none}
  .nav-toggle{
    display:block;position:absolute;right:2.4rem;top:2.9rem;
    width:3.6rem;height:3.6rem;background:none;border:0;cursor:pointer;padding:.6rem;
  }
  .nav-toggle span{display:block;height:.2rem;background:#fff;margin:.6rem 0;
                   border-radius:2px;transition:transform .3s,opacity .3s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(.8rem) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-.8rem) rotate(-45deg)}
  .nav-links{
    position:fixed;left:0;right:0;top:9.5rem;height:auto;
    flex-direction:column;align-items:stretch;
    background:rgba(23,23,23,.97);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .nav-links.is-open{max-height:40rem}
  .nav-links li+li{margin-left:0;border-top:.1rem solid rgba(255,255,255,.12)}
  .nav-links a{display:block;padding:1.8rem 2.4rem;font-size:1.6rem}
  .nav-call{
    left:auto;right:8.4rem;top:3.4rem;width:2.4rem;height:2.5rem;
  }

  /* phone artboard: hero image clipped to 0–633 */
  .hero{height:63.3rem;background-position:center top;background-size:cover}
  /* 58px in IvyMode; Playfair sets wider, so the size is trimmed to keep the
     two-line break of the artboard inside the 430px frame */
  .hero-title{font-size:4.9rem;line-height:4.7rem;bottom:7.3rem;padding-top:0;left:2.9rem;right:2rem}
  .hero-eyebrow{bottom:17.6rem;left:3.5rem;font-size:2.4rem;line-height:2.6rem;padding-right:5rem}
  .hero-scroll{display:none}
  .hero::after{height:26rem;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.42))}

  /* phone artboard: form band 633–1125, inputs 364x40 on a 49px pitch */
  .lead-form{padding:3.2rem 3.5rem 4.3rem}
  .lead-form h2{font-size:2rem;line-height:2.6rem;margin-bottom:2.6rem}
  .lead-grid{grid-template-columns:1fr;gap:.9rem}
  .lead-grid .full{width:100%}
  .lead-form input,.lead-form select{height:4rem;font-size:1.6rem;background:#d1d1d1}
  .lead-form ::placeholder{color:#7c7c7c}
  .lead-consent{font-size:1.6rem;line-height:2.2rem;margin-top:1.6rem}
  .btn-submit{width:14.5rem;height:4.1rem;margin-top:2.4rem}

  /* project cards become a swipeable carousel */
  .projects{padding:2rem 0 3rem}
  .project-grid{
    display:flex;gap:1.6rem;padding-inline:2rem;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .project-grid::-webkit-scrollbar{display:none}
  .p-card{flex:0 0 88%;scroll-snap-align:center}
  .p-card__media{height:26rem}
  .p-card__body{padding:2rem 2.2rem 0}
  .p-card h3{font-size:2.2rem}
  .p-specs{gap:1.6rem;font-size:1.4rem}
  .p-card__foot{padding:1.8rem 0 2.2rem}
  .p-card__foot .p-logo{height:4rem}
  .p-price{font-size:2.4rem}
  .carousel-dots{display:flex;justify-content:center;gap:.8rem;margin-top:2rem}
  .carousel-dots button{
    width:1rem;height:1rem;border-radius:50%;border:0;background:#666;cursor:pointer;padding:0;
  }
  .carousel-dots button[aria-selected="true"]{background:var(--yellow)}

  .philosophy{padding-top:5rem}
  .philosophy blockquote{font-size:2rem;line-height:2.6rem;padding-inline:2rem}
  .about{margin-top:3rem;padding-bottom:0}
  .about__media{height:24rem}
  .about__cols{grid-template-columns:1fr}
  .about__lead{font-size:2rem;line-height:2.6rem;padding:2.4rem 2rem;min-height:0}
  .about__body{padding:2.4rem 2rem;font-size:1.6rem;line-height:2.2rem;min-height:0}

  .vision{height:40rem}
  .vision h2{font-size:3.4rem;line-height:3.6rem;padding:0 2rem 0;margin-top:0}
  .pillars{
    position:static;width:100%;height:auto;border-radius:0;
    display:grid;grid-template-columns:1fr 1fr;padding:3rem 0;
  }
  .pillar{flex:none!important;padding:2rem 1rem}
  .pillar+.pillar::before{display:none}
  .pillar:nth-child(odd)::after{
    content:"";position:absolute;right:0;top:1.5rem;bottom:1.5rem;width:1px;
    background:var(--grey);opacity:.5;
  }
  .vision-wrap{display:flex;flex-direction:column}

  .awards{padding:4rem 0}
  .awards h2{font-size:3.4rem;line-height:3.6rem}
  .award-row{
    display:flex;gap:2rem;overflow-x:auto;scroll-snap-type:x mandatory;
    flex-wrap:nowrap;padding-inline:2rem;justify-content:flex-start;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .award-row::-webkit-scrollbar{display:none}
  .award-row img{flex:0 0 auto;height:16rem;scroll-snap-align:center}

  .testimonials{padding:4rem 0}
  .testimonials h2{font-size:3.4rem;line-height:3.6rem}
  .tst-media{height:32rem}
  .tst-panel{padding-top:2rem}
  .tst-quote{font-size:1.6rem;line-height:2.4rem}
  .tst-dots button{width:2.6rem;height:2.6rem;font-size:1.6rem}

  .faq{padding:4rem 0}
  .faq h2{font-size:3.4rem;line-height:3.6rem}
  .faq-q{padding:1.8rem 0}
  .faq-q h3{font-size:2rem;line-height:2.6rem}
  .faq-a > div{padding:0 0 2rem 6rem;font-size:1.6rem;line-height:2.4rem}

  .footer-grid{grid-template-columns:1fr 1fr;gap:2.4rem}
  .footer-legal{font-size:1.6rem;line-height:2rem}
  .footer-bar{height:auto;padding:1.8rem 0}
  .footer-bar .canvas{flex-wrap:wrap;gap:2rem;justify-content:center}

  .page-head{padding:11rem 0 0}
  .page-intro{font-size:1.8rem;line-height:2.6rem;padding-inline:2rem}
  .unit-section{padding:4rem 0}
  .unit-grid{grid-template-columns:1fr;gap:2.4rem}
  .u-card__media{height:24rem}
  .u-specs{gap:1.6rem;font-size:1.5rem;flex-wrap:wrap}
  .detail{padding:4rem 0}
  .detail-hero{height:26rem;border-radius:2rem}
  .detail-thumbs{gap:1.2rem}
  .detail-thumbs button{height:9rem;border-radius:1.6rem}
  .detail-cols{grid-template-columns:1fr;gap:3.4rem;margin-top:4rem}
  .spec-table{height:auto;grid-template-columns:1fr 1fr;gap:1.4rem;padding:1.6rem}
  .detail-form{padding:2.4rem 2rem 3rem}
  .detail-form .row{grid-template-columns:1fr;gap:1.6rem;margin-bottom:1.6rem}
  .detail-form .actions{margin-top:2rem;justify-content:stretch}
  .detail-form .actions .btn-submit{width:100%}
  .other-projects .project-grid{
    display:flex;grid-template-columns:none;
  }
}

/* ---------- 15. Motion preferences --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   16. Lightbox — tap to zoom on every image and video
   ========================================================================== */
[data-lb]{cursor:zoom-in}
.lb{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  background:rgba(9,9,9,.94);
  opacity:0;transition:opacity .28s ease;
}
.lb.is-open{display:flex}
.lb.is-visible{opacity:1}
.lb__stage{
  position:relative;
  width:min(94vw,150rem);height:min(88vh,92rem);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;
}
.lb__img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  transform-origin:center center;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  will-change:transform;user-select:none;-webkit-user-drag:none;
  cursor:zoom-in;
}
.lb__img.is-zoomed{cursor:grab;transition:transform .12s linear}
.lb__img.is-dragging{cursor:grabbing}
.lb__frame{width:min(94vw,150rem);aspect-ratio:16/9;height:auto;border:0;background:#000}
.lb__btn{
  position:absolute;z-index:2;
  width:5.6rem;height:5.6rem;min-width:44px;min-height:44px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  cursor:pointer;transition:background .2s,transform .2s;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.lb__btn:hover{background:rgba(255,255,255,.24)}
.lb__btn:active{transform:scale(.94)}
.lb__btn:focus-visible{outline:.2rem solid var(--yellow);outline-offset:.3rem}
.lb__btn svg{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:2;
             stroke-linecap:round;stroke-linejoin:round}
.lb__close{top:2.4rem;right:2.4rem}
.lb__prev{left:2.4rem;top:50%;transform:translateY(-50%)}
.lb__next{right:2.4rem;top:50%;transform:translateY(-50%)}
.lb__prev:active,.lb__next:active{transform:translateY(-50%) scale(.94)}
.lb__zoom{bottom:2.4rem;right:2.4rem}
.lb__caption{
  position:absolute;left:0;right:0;bottom:2.4rem;
  text-align:center;color:#e6e6e6;
  font-family:var(--sans);font-size:1.6rem;line-height:2.2rem;
  padding:0 12rem;pointer-events:none;
}
.lb__count{
  position:absolute;top:3.4rem;left:2.4rem;
  color:#bdbdbd;font-family:var(--sans);font-size:1.5rem;letter-spacing:.08em;
}
body.lb-open{overflow:hidden}
@media (max-width:767.98px){
  .lb__btn{width:4.4rem;height:4.4rem}
  .lb__prev{left:1rem}.lb__next{right:1rem}
  .lb__close{top:1.2rem;right:1.2rem}
  .lb__zoom{display:none}          /* pinch to zoom instead */
  .lb__caption{padding:0 2rem;bottom:1.6rem;font-size:1.4rem}
  .lb__stage{width:100vw;height:78vh}
}

/* ==========================================================================
   17. Testimonial arrows + video
   ========================================================================== */
.tst-nav{
  position:absolute;right:0;top:-.6rem;
  display:flex;gap:1rem;
}
.tst-nav button{
  width:4.4rem;height:4.4rem;border-radius:50%;
  border:.1rem solid rgba(255,255,255,.35);background:transparent;color:#fff;
  display:grid;place-items:center;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
}
.tst-nav button:hover{background:rgba(255,255,255,.14);border-color:#fff}
.tst-nav button:active{transform:scale(.94)}
.tst-nav button:focus-visible{outline:.2rem solid var(--yellow);outline-offset:.2rem}
.tst-nav svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:2;
             stroke-linecap:round;stroke-linejoin:round}
.tst-quote,.tst-author{transition:opacity .22s ease,transform .22s ease}
.tst-panel.is-swapping .tst-quote,
.tst-panel.is-swapping .tst-author{opacity:0;transform:translateY(.8rem)}
.tst-media.is-swapping img{opacity:0}
.tst-media img{transition:opacity .22s ease}
.tst-play::after{
  content:"";position:absolute;inset:-2.4rem;border-radius:50%;
}
@media (max-width:1279.98px){
  .tst-nav{position:static;justify-content:flex-end;margin-bottom:1.6rem}
}

/* ==========================================================================
   18. Motion polish
   ========================================================================== */
.reveal{opacity:0;transform:translateY(2.2rem);
        transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal-cut{clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.2,.7,.2,1)}
.reveal-cut.is-in{clip-path:inset(0 0 0 0)}

.p-card,.u-card{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.p-card:hover{transform:translateY(-.8rem);box-shadow:0 2.4rem 5rem rgba(0,0,0,.35)}
.p-tags span{transition:background .25s,color .25s}
.p-card__foot .p-logo{transition:transform .35s ease}
.p-card:hover .p-card__foot .p-logo{transform:translateX(.4rem)}

.btn-submit,.lb__btn,.tst-dots button,.tst-nav button,.faq-q{
  -webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:.2rem solid var(--yellow);outline-offset:.2rem;
}
.detail-thumbs button{transition:transform .3s ease,box-shadow .3s ease}
.detail-thumbs button:hover{transform:translateY(-.4rem);box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.16)}
.award-row img{transition:transform .35s ease}
.award-row img:hover{transform:scale(1.05)}
.pillar img{transition:transform .35s ease}
.pillar:hover img{transform:translateY(-.4rem) scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-cut{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ==========================================================================
   19. WordPress content normalisation
   Editor content arrives wrapped in <p>; these keep the artboard rhythm.
   ========================================================================== */
.faq-a p,
.spec-desc p,
.page-intro p,
.about__lead p{margin:0 0 1.6rem}
.faq-a p:last-child,
.spec-desc p:last-child,
.page-intro p:last-child,
.about__lead p:last-child{margin-bottom:0}
.spec-desc p{margin-bottom:1.2rem}
.faq-a ul,.faq-a ol,.spec-desc ul,.spec-desc ol{margin:0 0 1.6rem 2.2rem;list-style:disc}
.faq-a ol,.spec-desc ol{list-style:decimal}
.faq-a li,.spec-desc li{margin:.4rem 0}
.faq-a a,.spec-desc a,.fio-prose a{text-decoration:underline}

/* generic pages (privacy, terms, blog posts) */
.fio-prose h2{font-family:var(--serif);font-weight:400;font-size:4rem;line-height:4.6rem;margin:4rem 0 1.6rem}
.fio-prose h3{font-family:var(--serif);font-weight:400;font-size:3rem;line-height:3.6rem;margin:3rem 0 1.2rem}
.fio-prose p{margin:0 0 2rem}
.fio-prose ul,.fio-prose ol{margin:0 0 2rem 2.4rem;list-style:disc}
.fio-prose ol{list-style:decimal}
.fio-prose img{border-radius:1.2rem;margin:2rem 0}
.fio-prose blockquote{
  margin:3rem 0;padding-left:2.4rem;border-left:.4rem solid var(--yellow);
  font-family:var(--serif);font-style:italic;font-size:2.4rem;line-height:3.4rem;
}

/* ==========================================================================
   20. Shared UI added after the artboard
   ========================================================================== */
.sec-title{
  font-family:var(--serif);font-weight:400;font-size:5rem;line-height:5.4rem;
  color:var(--ink);margin:0 auto 4rem;text-transform:uppercase;
  width:137.4rem;max-width:100%;
}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.9rem;
  height:4.6rem;padding:0 2.4rem;border-radius:2.3rem;
  border:.1rem solid currentColor;background:transparent;
  font-family:var(--sans);font-weight:500;font-size:1.6rem;color:var(--ink);
  cursor:pointer;transition:background .25s,color .25s,transform .2s;
  text-decoration:none;
}
.btn-ghost:hover{background:var(--ink);color:#fff;transform:translateY(-.2rem)}
.btn-ghost svg{width:1.8rem;height:1.8rem;fill:none;stroke:currentColor;stroke-width:1.8;
               stroke-linecap:round;stroke-linejoin:round}
.chip{
  display:inline-flex;align-items:center;height:3.4rem;padding:0 1.8rem;
  border-radius:1.7rem;background:#e0e0e0;color:var(--ink);
  font-size:1.5rem;font-weight:500;letter-spacing:.02em;
}
.chip--ongoing{background:#fff0c2}
.chip--ready{background:#d7f0d9}
.chip--launching{background:var(--yellow)}
.page-actions{
  display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;
  margin-top:3.6rem;
}
.page-actions--left{justify-content:flex-start;margin-top:2.8rem}

/* ==========================================================================
   21. Types table (unlimited custom layouts per home)
   ========================================================================== */
.types{background:#fff;padding:9rem 0}
.types .sec-title{text-align:center}
.type-table{
  width:137.4rem;max-width:100%;margin-inline:auto;
  border:.1rem solid #e2e2e2;border-radius:1.6rem;overflow:hidden;background:#fff;
}
.type-row{
  display:grid;
  grid-template-columns:2.2fr 1.2fr 1fr .7fr .7fr 1.2fr 1.2fr;
  align-items:center;gap:1.6rem;
  padding:2.2rem 2.8rem;border-bottom:.1rem solid #ededed;
  font-size:1.8rem;color:var(--ink);
}
.type-row:last-child{border-bottom:0}
.type-row--head{
  background:#f6f6f6;font-size:1.4rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--grey-dark);
  padding-block:1.6rem;
}
.type-row:not(.type-row--head):hover{background:#fbfbfb}
.type-row[data-status="sold"]{opacity:.55}
.type-name{display:flex;flex-direction:column;gap:.4rem;font-weight:600}
.type-name em{font-style:normal;font-size:1.5rem;font-weight:400;color:var(--grey-mid)}
.type-status{
  align-self:flex-start;font-size:1.2rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:.3rem 1rem;border-radius:1rem;
}
.type-status--available{background:#e3f5e5;color:#1a7f37}
.type-status--few{background:#fff3d6;color:#8a6100}
.type-status--sold{background:#eee;color:#777}
.type-price{font-weight:700;font-size:2rem}
.type-plan{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:1.6rem;font-weight:500;color:var(--ink);
  border-bottom:.1rem solid var(--yellow);padding-bottom:.2rem;
  cursor:pointer;transition:color .2s;
}
.type-plan:hover{color:var(--green-price)}
.type-plan.is-empty{border:0;color:#bbb;cursor:default}
.type-plan svg{width:1.7rem;height:1.7rem;fill:none;stroke:currentColor;stroke-width:1.8;
               stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   22. Amenities
   ========================================================================== */
.amenities{background:var(--card);padding:9rem 0}
.amenities .sec-title{text-align:center}
.amenity-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(26rem,1fr));
  gap:2.4rem;width:137.4rem;max-width:100%;margin-inline:auto;
}
.amenity{
  display:flex;align-items:center;gap:1.6rem;
  background:#fff;border-radius:1.2rem;padding:2.2rem 2.4rem;
  font-size:1.8rem;color:var(--ink);
  transition:transform .3s ease,box-shadow .3s ease;
}
.amenity:hover{transform:translateY(-.4rem);box-shadow:0 1.2rem 2.8rem rgba(0,0,0,.08)}
.amenity img{width:3.6rem;height:3.6rem;flex:0 0 auto;filter:invert(1) brightness(.2)}
.amenity__dot{
  width:1rem;height:1rem;border-radius:50%;background:var(--yellow);flex:0 0 auto;
}

/* ==========================================================================
   23. Location & connectivity
   ========================================================================== */
.location{background:#fff;padding:9rem 0}
.location-grid{
  display:grid;grid-template-columns:1fr 52rem;gap:4.8rem;
  width:137.4rem;max-width:100%;margin-inline:auto;align-items:start;
}
.location-map{
  border-radius:2rem;overflow:hidden;background:#eee;
  aspect-ratio:16/11;position:relative;
}
.location-map iframe,.location-map img{
  width:100%;height:100%;border:0;display:block;object-fit:cover;
}
.location-address{
  font-style:normal;font-size:1.9rem;line-height:2.9rem;color:var(--grey-dark);
  margin:0 0 2rem;
}
.conn-group{margin-top:3.2rem}
.conn-group h3{
  margin:0 0 1.2rem;font-family:var(--sans);font-size:1.4rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey-mid);
}
.conn-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  padding:1.1rem 0;border-bottom:.1rem solid #ededed;font-size:1.8rem;
}
.conn-list li:last-child{border-bottom:0}
.conn-label{color:var(--ink)}
.conn-val{color:var(--grey-dark);white-space:nowrap;font-weight:500}
.conn-val em{font-style:normal;color:var(--grey-mid);font-weight:400;margin-left:.6rem}

/* ==========================================================================
   24. Construction progress
   ========================================================================== */
.progress{background:var(--card);padding:9rem 0}
.progress .sec-title{text-align:center}
.progress-list{
  width:137.4rem;max-width:100%;margin-inline:auto;
  list-style:none;padding:0;counter-reset:none;
}
.progress-item{
  display:grid;grid-template-columns:24rem 1fr;gap:3.2rem;
  padding:3.2rem 0;border-top:.1rem solid #dcdcdc;
}
.progress-item:first-child{border-top:0}
.progress-when{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.progress-when time{
  font-family:var(--serif);font-size:2.8rem;line-height:3.2rem;color:var(--ink);
}
.progress-badge{
  font-size:1.2rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--yellow);color:var(--ink);padding:.4rem 1.1rem;border-radius:1rem;
}
.progress-body h3{margin:0 0 .8rem;font-size:2.2rem;font-weight:600;color:var(--ink)}
.progress-body p{margin:0 0 1.8rem;font-size:1.8rem;line-height:2.8rem;color:var(--grey-dark)}
.progress-shots{display:flex;gap:1.4rem;flex-wrap:wrap}
.progress-shots button{
  width:22rem;height:16rem;border:0;padding:0;border-radius:1.2rem;overflow:hidden;
  cursor:pointer;background:#ddd;
}
.progress-shots img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.progress-shots button:hover img{transform:scale(1.06)}

/* ==========================================================================
   25. RERA
   ========================================================================== */
.rera{background:#fff;padding:0 0 8rem}
.rera-box{
  display:flex;gap:3.2rem;align-items:flex-start;
  width:137.4rem;max-width:100%;margin-inline:auto;
  border:.1rem solid #e2e2e2;border-left:.5rem solid var(--yellow);
  border-radius:1.2rem;padding:3rem 3.4rem;background:#fcfcfc;
}
.rera-qr{width:12rem;height:12rem;flex:0 0 auto;background:#fff;padding:.6rem;border-radius:.8rem}
.rera-eyebrow{
  margin:0 0 .6rem;font-size:1.3rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-mid);
}
.rera-number{
  margin:0 0 1.6rem;font-family:var(--sans);font-weight:600;font-size:2.1rem;
  letter-spacing:.02em;color:var(--ink);word-break:break-all;
}
.rera-meta{display:flex;gap:4rem;flex-wrap:wrap;margin:0 0 1.6rem}
.rera-meta dt{font-size:1.3rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-mid);margin-bottom:.3rem}
.rera-meta dd{margin:0;font-size:1.7rem;color:var(--ink)}
.rera-links{display:flex;gap:2.4rem;flex-wrap:wrap;margin:0 0 1.4rem;font-size:1.6rem}
.rera-links a{text-decoration:underline;color:var(--ink)}
.rera-links a:hover{color:var(--green-price)}
.rera-disclaimer{margin:0;font-size:1.4rem;line-height:2.2rem;color:var(--grey-mid);max-width:90ch}

.rera-line{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:1.4rem;color:var(--grey-dark);margin:1.6rem 0 0;
}
.rera-line__tag{
  background:var(--yellow);color:var(--ink);font-weight:600;font-size:1.1rem;
  letter-spacing:.1em;padding:.3rem .8rem;border-radius:.4rem;
}
.rera-line__no{font-weight:500;word-break:break-all}
.rera-line a{text-decoration:underline}

.footer-rera{background:#0b0b0b;color:#8f8f8f;padding:3.6rem 0;border-top:.1rem solid #1e1e1e}
.footer-rera .canvas{padding-left:41.6rem}
.footer-rera__label{
  margin:0 0 1.2rem;font-size:1.2rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow);
}
.footer-rera__list{display:flex;gap:3.6rem;flex-wrap:wrap;margin:0 0 1.4rem}
.footer-rera__list li{font-size:1.4rem;line-height:2.2rem}
.footer-rera__list strong{display:block;color:#d3d3d3;font-weight:500}
.footer-rera__list span{word-break:break-all}
.footer-rera__agent{margin:0 0 1rem;font-size:1.4rem}
.footer-rera__note{margin:0;font-size:1.25rem;line-height:2rem;max-width:110ch}
.footer-rera__note a{text-decoration:underline;margin-left:.6rem}

/* ==========================================================================
   26. Sticky call / WhatsApp bar
   ========================================================================== */
.action-bar{
  position:fixed;right:2.4rem;bottom:2.4rem;z-index:80;
  display:flex;flex-direction:column;gap:1.2rem;
}
.action-bar__btn{
  display:inline-flex;align-items:center;gap:1rem;
  height:5.4rem;padding:0 2.2rem;border-radius:2.7rem;
  font-family:var(--sans);font-weight:600;font-size:1.6rem;color:#fff;
  box-shadow:0 .8rem 2.4rem rgba(0,0,0,.28);
  transition:transform .25s ease,box-shadow .25s ease;
  text-decoration:none;
}
.action-bar__btn:hover{transform:translateY(-.3rem);box-shadow:0 1.2rem 3rem rgba(0,0,0,.34)}
.action-bar__btn svg{width:2.2rem;height:2.2rem;fill:currentColor;flex:0 0 auto}
.action-bar__btn--call{background:var(--ink)}
.action-bar__btn--wa{background:#25d366;color:#07301a}
.action-bar__btn--wa svg{fill:#07301a}

@media (max-width:767.98px){
  .action-bar{
    left:0;right:0;bottom:0;flex-direction:row;gap:0;
    border-radius:0;box-shadow:0 -.4rem 2rem rgba(0,0,0,.22);
  }
  .action-bar__btn{
    flex:1 1 50%;justify-content:center;height:6rem;border-radius:0;
    box-shadow:none;font-size:1.7rem;
  }
  .action-bar__btn:hover{transform:none}
  body{padding-bottom:6rem}          /* keep the footer clear of the bar */
  .lb__caption{bottom:7.6rem}
}

/* ==========================================================================
   27. Download gate
   ========================================================================== */
.gate{
  position:fixed;inset:0;z-index:210;display:none;
  align-items:center;justify-content:center;padding:2rem;
  background:rgba(9,9,9,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s ease;
}
.gate.is-open{display:flex}
.gate.is-visible{opacity:1}
.gate__panel{
  position:relative;width:min(100%,52rem);
  background:#fff;border-radius:1.8rem;padding:4.2rem 4rem 3.6rem;
  box-shadow:0 3rem 8rem rgba(0,0,0,.4);
  transform:translateY(1.6rem);transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.gate.is-visible .gate__panel{transform:none}
.gate__close{
  position:absolute;top:1.6rem;right:1.6rem;width:4rem;height:4rem;
  border:0;border-radius:50%;background:#f2f2f2;cursor:pointer;
  display:grid;place-items:center;transition:background .2s;
}
.gate__close:hover{background:#e2e2e2}
.gate__close svg{width:1.8rem;height:1.8rem;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.gate__eyebrow{
  margin:0 0 .8rem;font-size:1.2rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-price);
}
.gate__title{
  margin:0 0 .8rem;font-family:var(--serif);font-weight:400;
  font-size:3.4rem;line-height:3.8rem;color:var(--ink);
}
.gate__sub{margin:0 0 2.8rem;font-size:1.7rem;line-height:2.5rem;color:var(--grey-dark)}
.gate__row{margin-bottom:1.4rem}
.gate__row input{
  width:100%;height:5rem;border:.1rem solid #dcdcdc;border-radius:.8rem;
  padding:0 1.6rem;font-family:var(--sans);font-size:1.7rem;background:#fafafa;
  transition:border-color .2s,background .2s;
}
.gate__row input:focus{border-color:var(--ink);background:#fff;outline:none}
.gate__consent{display:flex;gap:1rem;align-items:flex-start;margin:1.8rem 0 2.2rem;
               font-size:1.5rem;line-height:2.2rem;color:var(--grey-dark)}
.gate__consent input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:2.2rem;height:2.2rem;margin-top:.1rem;border-radius:.5rem;
  border:.1rem solid #cfcfcf;background:#fff;cursor:pointer;
}
.gate__consent input:checked{
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.4 5 9.5 13 1' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/1.2rem 1rem;
  border-color:var(--ink);
}
.gate__submit{width:100%;height:5.4rem;font-size:1.8rem}
.gate__note{margin:1.2rem 0 0;font-size:1.5rem;color:#b32d2e;min-height:2rem;text-align:center}
.gate__done{text-align:center;padding:1.6rem 0}
.gate__tick{
  width:7rem;height:7rem;margin:0 auto 2rem;border-radius:50%;
  background:#e3f5e5;display:grid;place-items:center;
}
.gate__tick svg{width:3.4rem;height:3.4rem;fill:none;stroke:#1a7f37;stroke-width:2.4;
                stroke-linecap:round;stroke-linejoin:round}
.gate__done-title{margin:0 0 .6rem;font-family:var(--serif);font-size:2.8rem;color:var(--ink)}
.gate__done-sub{margin:0 0 2.4rem;font-size:1.7rem;color:var(--grey-dark)}
.gate__link{display:inline-flex;align-items:center;justify-content:center;
            width:auto;padding:0 3rem;height:5rem;text-decoration:none}
body.gate-open{overflow:hidden}

/* ==========================================================================
   28. Calculators
   ========================================================================== */
.calc{
  width:137.4rem;max-width:100%;margin:0 auto;
  background:#fff;border-radius:2rem;padding:5rem 5rem 4rem;
  box-shadow:0 1.4rem 4rem rgba(0,0,0,.07);
}
.calc__title{
  margin:0 0 4rem;font-family:var(--serif);font-weight:400;
  font-size:4.4rem;line-height:4.8rem;color:var(--ink);
}
.calc__grid{display:grid;grid-template-columns:1fr 46rem;gap:5rem;align-items:start}
.calc__field{margin-bottom:3rem}
.calc__field > label{
  display:flex;align-items:center;gap:1rem;margin-bottom:1rem;
  font-size:1.5rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--grey-dark);
}
.calc__pill{
  background:var(--yellow);color:var(--ink);border-radius:1rem;
  padding:.2rem .9rem;font-size:1.3rem;letter-spacing:0;text-transform:none;
}
.calc__inputwrap{
  display:flex;align-items:center;gap:.6rem;
  border:.1rem solid #dcdcdc;border-radius:.8rem;background:#fafafa;
  padding:0 1.4rem;height:5.2rem;transition:border-color .2s,background .2s;
}
.calc__inputwrap:focus-within{border-color:var(--ink);background:#fff}
.calc__inputwrap input{
  flex:1 1 auto;border:0;background:transparent;height:100%;
  font-family:var(--sans);font-size:2rem;font-weight:600;color:var(--ink);
  min-width:0;
}
.calc__inputwrap input:focus{outline:none}
.calc__prefix,.calc__suffix{font-size:1.7rem;color:var(--grey-mid);flex:0 0 auto}
.calc__range{
  -webkit-appearance:none;appearance:none;width:100%;height:.4rem;margin-top:1.4rem;
  background:#e4e4e4;border-radius:.2rem;outline:none;
}
.calc__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--ink);cursor:pointer;border:.3rem solid #fff;
  box-shadow:0 .2rem .8rem rgba(0,0,0,.3);
}
.calc__range::-moz-range-thumb{
  width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ink);cursor:pointer;
  border:.3rem solid #fff;box-shadow:0 .2rem .8rem rgba(0,0,0,.3);
}
.calc__result{background:var(--card);border-radius:1.6rem;padding:3.4rem 3rem}
.calc__resultlabel{
  margin:0 0 .6rem;font-size:1.4rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey-mid);
}
.calc__big{
  margin:0 0 2.8rem;font-family:var(--sans);font-weight:700;
  font-size:4.4rem;line-height:1.1;color:var(--ink);
}
.calc__breakdown{margin:0 0 2.4rem}
.calc__breakdown > div{
  display:flex;justify-content:space-between;gap:2rem;
  padding:1.1rem 0;border-bottom:.1rem solid #dcdcdc;font-size:1.7rem;
}
.calc__breakdown > div:last-child{border-bottom:0}
.calc__breakdown dt{color:var(--grey-dark)}
.calc__breakdown dd{margin:0;font-weight:600;color:var(--ink)}
.calc__breakdown-total{border-top:.2rem solid var(--ink);margin-top:.6rem;padding-top:1.4rem!important}
.calc__breakdown-total dd{font-size:2rem}
.calc__bar{display:flex;height:1.2rem;border-radius:.6rem;overflow:hidden;background:#ddd;margin-bottom:1.2rem}
.calc__bar-principal{background:var(--ink)}
.calc__bar-interest{background:var(--yellow)}
.calc__legend{display:flex;gap:2.4rem;margin:0 0 2.4rem;font-size:1.4rem;color:var(--grey-dark)}
.calc__legend .dot{display:inline-block;width:1rem;height:1rem;border-radius:50%;margin-right:.6rem}
.dot--p{background:var(--ink)}
.dot--i{background:var(--yellow)}
.calc__cta{width:100%;height:5.4rem;font-size:1.7rem}
.calc__disclaimer{
  margin:3.4rem 0 0;padding-top:2.4rem;border-top:.1rem solid #ededed;
  font-size:1.4rem;line-height:2.2rem;color:var(--grey-mid);
}

/* ==========================================================================
   29. Responsive for the new blocks
   ========================================================================== */
@media (max-width:1279.98px){
  .sec-title{font-size:3.8rem;line-height:4.2rem;margin-bottom:3rem}
  .types,.amenities,.location,.progress{padding:6rem 0}
  .type-table{width:100%}
  .type-row{grid-template-columns:2fr 1.2fr 1fr 1.2fr;gap:1.2rem;font-size:1.6rem}
  .type-row > :nth-child(4),.type-row > :nth-child(5){display:none}
  .location-grid{grid-template-columns:1fr;gap:3rem}
  .amenity-grid,.progress-list,.calc{width:100%}
  .progress-item{grid-template-columns:16rem 1fr;gap:2rem}
  .progress-when time{font-size:2.2rem}
  .rera-box{width:100%;flex-direction:column;gap:2rem}
  .footer-rera .canvas{padding-left:4rem;padding-right:4rem}
  .calc{padding:3.4rem 3rem}
  .calc__grid{grid-template-columns:1fr;gap:3rem}
  .calc__title{font-size:3.4rem;line-height:3.8rem;margin-bottom:3rem}
  .calc__big{font-size:3.6rem}
}

@media (max-width:767.98px){
  .sec-title{font-size:3rem;line-height:3.4rem}
  .types,.amenities,.location,.progress{padding:4.4rem 0}
  .type-row{
    grid-template-columns:1fr;gap:.6rem;padding:2rem 1.8rem;
    border-bottom:.6rem solid #f4f4f4;
  }
  .type-row--head{display:none}
  .type-row > span[data-label]{
    display:flex;justify-content:space-between;gap:1.6rem;
    font-size:1.6rem;padding:.3rem 0;
  }
  .type-row > span[data-label]::before{
    content:attr(data-label);color:var(--grey-mid);font-size:1.4rem;
  }
  .type-name{margin-bottom:.8rem;font-size:1.9rem}
  .type-plan{margin-top:.6rem}
  .amenity-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
  .amenity{padding:1.6rem;font-size:1.5rem;gap:1rem}
  .amenity img{width:2.8rem;height:2.8rem}
  .progress-item{grid-template-columns:1fr;gap:1.4rem;padding:2.4rem 0}
  .progress-when{flex-direction:row;align-items:center;gap:1.2rem}
  .progress-shots button{width:14rem;height:10.5rem}
  .location-map{aspect-ratio:4/3;border-radius:1.4rem}
  .rera-box{padding:2.2rem 2rem;border-radius:1rem}
  .rera-number{font-size:1.7rem}
  .rera-meta{gap:2rem}
  .footer-rera .canvas{padding-left:2rem;padding-right:2rem}
  .footer-rera__list{gap:1.8rem}
  .page-actions{gap:1rem}
  .btn-ghost{height:4.2rem;padding:0 1.8rem;font-size:1.5rem}
  .gate__panel{padding:3.4rem 2.4rem 2.8rem;border-radius:1.4rem}
  .gate__title{font-size:2.8rem;line-height:3.2rem}
  .calc{padding:2.6rem 2rem;border-radius:1.4rem}
  .calc__big{font-size:3.2rem}
  .calc__result{padding:2.4rem 2rem}
}