/*
Theme Name: Hartamas
Template: blocksy
Description: The Hartamas design framework as a theme, so migrated articles and
             WordPress-rendered pages use the same design as the built pages.
Version: 1.0
*/

/* Everything below is lifted from the built pages, not rewritten:
   - the framework (tokens, header, nav, footer, buttons, sections) from index.html
   - the rules the article page adds on top
   - the migrated-article rules, rescoped from .entry-content to .post-body
*/

:root{
    --green:#161616;
    --green-700:#202020;
    --green-900:#0A0A0A;
    --mint:#FFDE00;
    --gold:#FFDE00;
    --ink:#141414;
    --paper:#FAFAFA;
    --paper-2:#EFF1F2;
    --table-head:#161616;   /* black head, per the reference table */
    --table-band:#FAFAFA;   /* the banding between rows */
    --table-line:#E7E7E7;
    --table-ink:#5A5E63;
    --callout:#00CFFF;     /* the single-cell 'Pro Tip' boxes */
    --line:rgba(0,0,0,0.12);
    --muted:#5A5E63;
    --white:#ffffff;
    --shadow:0 24px 60px -28px rgba(0,0,0,0.5);
    --maxw:1240px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:-0.01em}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
  .eyebrow{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:12px}
  .eyebrow::before{content:"";width:34px;height:2px;background:var(--gold);display:inline-block}
  .hero .eyebrow,.services .eyebrow,.contact .eyebrow,.news .eyebrow,.launch .eyebrow,.values .eyebrow{color:var(--mint)}
  .services .eyebrow::before,.contact .eyebrow::before,.news .eyebrow::before,.launch .eyebrow::before,.values .eyebrow::before{background:var(--mint)}
  .btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:0.02em;padding:15px 30px;border-radius:2px;transition:.35s ease;cursor:pointer;border:1px solid transparent}
  .btn-primary{background:var(--mint);color:#000}
  .btn-primary:hover{background:var(--white);transform:translateY(-2px)}
  .btn-ghost{border-color:rgba(255,255,255,0.4);color:#fff}
  .btn-ghost:hover{background:#fff;color:#000;border-color:#fff}
  .btn-dark{background:var(--green);color:#fff}
  .btn-dark:hover{background:var(--green-900);transform:translateY(-2px)}

  header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.4s ease;padding:22px 0}
  header.scrolled{background:var(--green-900);box-shadow:0 10px 40px -18px rgba(0,0,0,.5);padding:14px 0}
  .nav{display:flex;align-items:center;justify-content:space-between}
  .brand{display:flex;align-items:center;gap:14px}
  .brand img{height:34px;width:auto;display:block}
  .brand .sub{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#fff;padding-left:14px;border-left:1px solid rgba(255,255,255,.35)}
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav-links a{color:rgba(255,255,255,.82);font-size:13.5px;font-weight:500;letter-spacing:.03em;transition:.25s}
  .nav-links a:hover{color:var(--mint)}
  .nav-cta{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:11px 22px;border-radius:2px;font-size:13px;font-weight:600;transition:.3s}
  .nav-cta:hover{background:var(--mint);border-color:var(--mint);color:#000!important}
  .has-dd{position:relative;display:flex;align-items:center}
  .dd-toggle{color:rgba(255,255,255,.82);font-size:13.5px;font-weight:500;letter-spacing:.03em;cursor:pointer;transition:.25s}
  .dd-toggle:hover{color:var(--mint)}
  .dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:184px;background:var(--green-900);border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:8px 0;opacity:0;visibility:hidden;transition:.25s;box-shadow:0 22px 44px -16px rgba(0,0,0,.6)}
  .has-dd:hover .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .dd-menu a{display:block;padding:11px 20px;font-size:13.5px;color:rgba(255,255,255,.82);white-space:nowrap;transition:.2s}
  .dd-menu a:hover{color:var(--mint);background:rgba(255,255,255,.05)}
  .menu-btn{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer}

  .hero{position:relative;min-height:100vh;display:flex;align-items:center;background:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/09/kuala-lumpur-buildings.webp') center/cover no-repeat;color:#fff;padding:150px 0 90px}
  .hero-inner{max-width:880px}
  .hero h1{font-size:clamp(42px,6.2vw,88px);margin:26px 0 24px;color:#fff}
  .hero h1 em{font-style:italic;color:var(--mint)}
  .hero p{font-size:clamp(16px,1.5vw,19px);max-width:640px;color:rgba(255,255,255,.85);font-weight:300}
  .hero-actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
  .hero-stats{display:flex;gap:54px;margin-top:66px;padding-top:36px;border-top:1px solid rgba(255,255,255,.18);flex-wrap:wrap}
  .hero-stats .num{font-family:'Cormorant Garamond',serif;font-size:54px;color:var(--mint);font-weight:600;line-height:1}
  .hero-stats .num span{color:var(--mint)}
  .hero-stats .lbl{font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.72);margin-top:12px;max-width:160px}

  section{position:relative}
  .pad{padding:118px 0}
  .section-head{margin-bottom:60px}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .section-head.center .eyebrow{justify-content:center}
  .section-head h2{font-size:clamp(34px,4.4vw,58px);margin:20px 0 18px}
  .section-head p{color:var(--muted);font-size:17px;font-weight:300}

  /* WHY / INTRO */
  .intro{background:var(--paper)}
  .intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
  .intro-copy .lead{font-family:'Cormorant Garamond',serif;font-size:27px;color:var(--ink);line-height:1.4;font-weight:500;margin:18px 0 24px}
  .intro-copy p{color:var(--muted);margin-bottom:20px;font-weight:300;font-size:16.5px}
  .why-list{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
  .why-item{display:flex;gap:14px;align-items:flex-start}
  .why-item .dot{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center;color:#000;font-weight:700;font-size:15px}
  .why-item h4{font-size:18px;color:var(--ink);font-weight:600;margin-bottom:3px}
  .why-item p{font-size:13.5px;color:var(--muted);font-weight:300;margin:0}
  .intro-media{position:relative}
  .intro-media img{border-radius:3px;box-shadow:var(--shadow);height:560px;object-fit:cover;width:100%}
  .intro-badge{position:absolute;left:-34px;bottom:42px;background:var(--green);color:#fff;padding:28px 32px;border-radius:3px;box-shadow:var(--shadow);max-width:230px}
  .intro-badge .big{font-family:'Cormorant Garamond',serif;font-size:50px;color:var(--mint);line-height:1}
  .intro-badge .t{font-size:13px;color:rgba(255,255,255,.82);margin-top:8px}

  /* SERVICES */
  .services{background:var(--green);color:#fff}
  .services .section-head p{color:rgba(255,255,255,.72)}
  .cat{margin-bottom:54px}
  .cat:last-child{margin-bottom:0}
  .cat-head{display:flex;align-items:center;gap:20px;margin-bottom:24px}
  .cat-label{font-family:'Cormorant Garamond',serif;font-size:30px;color:#fff;font-weight:600}
  .cat-tag{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);background:rgba(255,222,0,.12);padding:5px 12px;border-radius:40px}
  .cat-line{flex:1;height:1px;background:rgba(255,255,255,.16)}
  .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13)}
  .scard{background:var(--green);padding:32px 30px;display:flex;flex-direction:column;min-height:178px;transition:.4s ease}
  .scard:hover{background:var(--green-900)}
  .scard h3{font-size:23px;color:#fff;margin-bottom:10px;line-height:1.12}
  .scard p{font-size:13.5px;color:rgba(255,255,255,.7);font-weight:300;flex:1}
  .scard .arrow{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mint);display:inline-flex;align-items:center;gap:7px}
  .scard .arrow::after{content:"→";transition:.3s;display:inline-block}
  .scard:hover .arrow::after{transform:translateX(5px)}

  /* STATS BAND */
  .band{background:var(--green-900);color:#fff;padding:78px 0}
  .band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center}
  .band .num{font-family:'Cormorant Garamond',serif;font-size:54px;color:var(--mint);line-height:1}
  .band .lbl{font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.72);margin-top:12px}

  /* CORE VALUES */
  .values{background:var(--green);color:#fff}
  .values .section-head p{color:rgba(255,255,255,.72)}
  .val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13)}
  .vcard{background:var(--green);padding:42px 32px;min-height:220px;display:flex;flex-direction:column;transition:.4s}
  .vcard:hover{background:var(--green-900)}
  .vcard .no{font-family:'Cormorant Garamond',serif;font-size:34px;color:var(--mint);opacity:.85;line-height:1;margin-bottom:18px}
  .vcard h3{font-size:26px;color:#fff;line-height:1.12}
  /* AWARDS */
  .awards{background:var(--paper-2)}
  .aw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .awcard{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:36px 32px}
  .awcard h4{font-size:21px;color:var(--ink);margin-bottom:18px;font-weight:600;line-height:1.2}
  .awcard ul{list-style:none}
  .awcard li{font-size:14px;color:var(--muted);font-weight:300;padding:11px 0 11px 22px;border-top:1px solid var(--line);position:relative}
  .awcard li:first-child{border-top:none}
  .awcard li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;background:var(--mint);border-radius:50%}
  .awcard li strong{color:var(--ink);font-weight:600}
  /* MANAGEMENT TEAM */
  .team{background:var(--paper)}
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .tmember{background:#fff;border:1px solid var(--line);border-radius:4px;padding:38px 34px;display:flex;flex-direction:column;align-items:flex-start;transition:.35s}
  .tmember:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--mint)}
  .mono{width:64px;height:64px;border-radius:50%;background:var(--mint);color:#000;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;margin-bottom:22px}
  .tmember .photo{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center top;margin-bottom:22px;border:3px solid var(--mint);background:var(--paper-2);transition:.35s}
  .tmember:hover .photo{border-color:var(--green)}
  .tmember h3{font-size:25px;color:var(--ink);margin-bottom:6px}
  .tmember p{font-size:13.5px;color:var(--muted);font-weight:400;letter-spacing:.01em}

  /* FEATURED NEW LAUNCHES */
  .launch{background:var(--green-900);color:#fff}
  .launch .section-head p{color:rgba(255,255,255,.7)}
  .launch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
  .lcard{background:#fff;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:.35s ease}
  .lcard:hover{transform:translateY(-7px);box-shadow:0 26px 52px -24px rgba(0,0,0,.65)}
  .lc-logo{height:128px;display:flex;align-items:center;justify-content:center;padding:24px;background:#fff;border-bottom:3px solid var(--mint)}
  .lc-logo img{max-height:56px;max-width:80%;object-fit:contain}
  .lc-info{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
  .lc-info h3{font-size:19px;color:var(--ink);line-height:1.12}
  .lc-info .loc{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin-top:6px}
  .lc-info .go{margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green);display:inline-flex;gap:6px}
  .lc-info .go::after{content:"→";transition:.3s;display:inline-block}
  .lcard:hover .lc-info .go::after{transform:translateX(4px)}

  /* FIND A PROPERTY */
  .find{background:var(--paper)}
  .find-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .fcard{position:relative;height:350px;border-radius:4px;overflow:hidden;display:flex;align-items:flex-end;color:#fff}
  .fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.7s ease;z-index:0}
  .fcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.38) 58%,rgba(0,0,0,.1) 100%);z-index:1;transition:.4s}
  .fcard:hover img{transform:scale(1.08)}
  .fcard:hover::after{background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.2) 100%)}
  .fc-body{position:relative;z-index:2;padding:30px}
  .fc-ico{width:42px;height:42px;margin-bottom:14px}
  .fc-ico svg{width:100%;height:100%;stroke:var(--mint);fill:none;stroke-width:1.5}
  .fc-body h3{font-size:24px;color:#fff;margin-bottom:8px;line-height:1.1}
  .fc-body p{font-size:13px;color:rgba(255,255,255,.82);font-weight:300;margin-bottom:14px}
  .fc-go{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mint);display:inline-flex;gap:7px}
  .fc-go::after{content:"→";transition:.3s;display:inline-block}
  .fcard:hover .fc-go::after{transform:translateX(5px)}

  /* GUIDES (resource cards) */
  .guides{background:var(--paper-2)}
  .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .res{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:.35s ease}
  .res:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .res-img{display:block;height:200px;overflow:hidden;position:relative}
  .res-img img{width:100%;height:100%;object-fit:cover;transition:.7s ease}
  .res:hover .res-img img{transform:scale(1.07)}
  /* Every category the post is in, above the date. These used to be one pill
     floated over the photo, which made a post in four categories look like it
     was in one. */
  .res-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
  .res-cat{display:inline-block;background:var(--mint);color:#000;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:2px}
  .res-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
  .res-date{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .res-body h3{font-size:22px;color:var(--ink);margin:12px 0 12px;line-height:1.22}
  .res-body p{font-size:14px;color:var(--muted);font-weight:300;flex:1}
  .res-link{margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
  .res-link::after{content:"→";color:var(--green);transition:.3s;display:inline-block}
  .res:hover .res-link::after{transform:translateX(5px)}
  .center-cta{display:flex;justify-content:center;margin-top:52px}

  /* TESTIMONIALS */
  .testi{background:var(--paper)}
  .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .tcard{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:36px 32px;display:flex;flex-direction:column}
  .tcard .quote{font-family:'Cormorant Garamond',serif;font-size:54px;color:var(--mint);line-height:.6;height:28px}
  .tcard p{font-size:15.5px;color:var(--ink);font-weight:300;line-height:1.6;margin:8px 0 22px;flex:1}
  .tcard .who{font-size:13px;color:var(--muted);font-weight:500;border-top:1px solid var(--line);padding-top:16px}
  .tcard .who strong{color:var(--ink);font-weight:600}
  .g-reviews{min-height:380px}

  /* NEWS */
  .news{background:var(--green-900);color:#fff}
  .news .section-head p{color:rgba(255,255,255,.7)}
  .news-list{border-top:1px solid rgba(255,255,255,.14)}
  .news-item{display:grid;grid-template-columns:200px 1fr auto;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.14);transition:.3s}
  .news-item:hover{background:rgba(255,255,255,.03);padding-left:14px;padding-right:14px}
  .news-date{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mint);font-weight:600}
  .news-title{font-family:'Cormorant Garamond',serif;font-size:25px;color:#fff;line-height:1.2}
  .news-go{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap;transition:.3s}
  .news-item:hover .news-go{color:var(--mint)}
  .news-go::after{content:" →"}

  /* TOOLS / USEFUL RESOURCES */
  .tools{background:var(--paper-2)}
  .tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .tool{background:var(--green);color:#fff;border-radius:4px;padding:42px 36px;min-height:230px;display:flex;flex-direction:column;transition:.4s ease;position:relative;overflow:hidden}
  .tool::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,222,0,.08);transition:.5s}
  .tool:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .tool:hover::after{transform:scale(1.5)}
  .tool .ico{width:48px;height:48px;margin-bottom:20px}
  .tool .ico svg{width:100%;height:100%;stroke:var(--mint);fill:none;stroke-width:1.4}
  .tool h3{font-size:25px;color:#fff;margin-bottom:10px;position:relative}
  .tool p{font-size:14px;color:rgba(255,255,255,.7);font-weight:300;flex:1;position:relative}
  .tool .arrow{margin-top:18px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--mint);position:relative;display:inline-flex;gap:8px}
  .tool .arrow::after{content:"→";transition:.3s;display:inline-block}
  .tool:hover .arrow::after{transform:translateX(5px)}

  /* CAREER */
  .career{background:var(--paper)}
  .career-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
  .career-intro .lead{font-family:'Cormorant Garamond',serif;font-size:25px;color:var(--ink);line-height:1.35;font-weight:500;margin:18px 0 18px}
  .career-intro p{color:var(--muted);font-weight:300;font-size:16px;margin-bottom:26px}
  .job-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
  .job{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink);font-weight:500;transition:.25s}
  .job:hover{padding-left:8px}
  .job .go{color:var(--green);font-weight:700;transition:.3s;font-size:14px}
  .job:hover .go{color:var(--mint);transform:translateX(3px)}

  /* CONTACT */
  .contact{background:var(--green);color:#fff}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
  .contact h2{font-size:clamp(34px,4.4vw,58px);margin:20px 0 22px;color:#fff}
  .contact p.lead{color:rgba(255,255,255,.8);font-weight:300;font-size:17px;margin-bottom:36px;max-width:460px}
  .contact-info{display:flex;flex-direction:column;gap:22px}
  .ci{display:flex;gap:16px;align-items:flex-start}
  .ci .ic{width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center}
  .ci .ic svg{width:18px;height:18px;stroke:var(--mint);fill:none;stroke-width:1.6}
  .ci .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
  .ci .val{font-size:15.5px;color:#fff;margin-top:3px}
  .ci a.val:hover{color:var(--mint)}
  .form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);padding:42px;border-radius:4px}
  .form h3{font-size:27px;color:#fff;margin-bottom:6px}
  .form .fsub{font-size:13.5px;color:rgba(255,255,255,.6);margin-bottom:26px}
  .field{margin-bottom:18px}
  .field label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:8px}
  .field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;padding:13px 15px;border-radius:2px;font-family:inherit;font-size:14.5px;transition:.25s}
  .field select option{color:#000}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--mint);background:rgba(255,255,255,.1)}
  .field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
  .form .btn{width:100%;justify-content:center;margin-top:6px}
  .form .btn[disabled]{opacity:.6;cursor:default;transform:none}
  .field .hint{display:block;font-size:11.5px;color:rgba(255,255,255,.45);margin-top:6px;letter-spacing:0;text-transform:none}
  .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .form-note{font-size:13.5px;margin-top:14px;line-height:1.5}
  .form-note.ok{color:var(--mint)}
  .form-note.err{color:#ffb4a2}

  footer{background:var(--green-900);color:rgba(255,255,255,.65);padding:64px 0 30px}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.12)}
  .foot-logo{height:42px;width:auto;display:block;margin-bottom:14px}
  .foot-brand .sub{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mint);margin:0 0 18px}
  .foot-brand p{font-size:14px;font-weight:300;max-width:300px}
  .foot-social{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
  .foot-social a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;transition:.25s}
  .foot-social a:hover{background:var(--mint);border-color:var(--mint);transform:translateY(-3px)}
  .foot-social svg{width:15px;height:15px;fill:#fff;transition:.25s}
  .foot-social a:hover svg{fill:#000}
  .foot-social .xhs{font-size:9px;font-weight:700;color:#fff;letter-spacing:-.02em;transition:.25s}
  .foot-social a:hover .xhs{color:#000}

  .foot-col h4{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:600}
  .foot-col a{display:block;font-size:14px;margin-bottom:11px;color:rgba(255,255,255,.65);font-weight:300;transition:.25s}
  .foot-col a:hover{color:var(--mint)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:12.5px;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:12px}
  .lppeh-logo{height:80px;width:auto;display:block;margin-bottom:14px}


  .reveal{transition:.9s cubic-bezier(.16,.8,.3,1)}
  .js .reveal{opacity:0;transform:translateY(38px)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

  @media(max-width:980px){
    .intro-grid,.contact-grid{grid-template-columns:1fr;gap:48px}
    .sgrid,.res-grid,.t-grid,.tool-grid{grid-template-columns:repeat(2,1fr)}
    .launch-grid{grid-template-columns:repeat(3,1fr)}
    .find-grid,.val-grid,.aw-grid,.team-grid{grid-template-columns:repeat(2,1fr)}
    .band-grid{grid-template-columns:repeat(2,1fr);gap:46px}
    .intro-media img{height:420px}
    .foot-top{grid-template-columns:1fr 1fr}
    .news-item{grid-template-columns:1fr;gap:8px}
  }
  @media(max-width:980px){.career-grid{grid-template-columns:1fr;gap:40px}}
  @media(max-width:680px){
    .wrap{padding:0 22px}
    .pad{padding:80px 0}
    .job-grid{grid-template-columns:1fr}
    .nav-links{display:none}
    .menu-btn{display:block}
    .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--green-900);flex-direction:column;gap:0;padding:10px 22px 22px}
    .nav-links.open a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);width:100%}
    .nav-links.open .nav-cta{margin-top:14px;text-align:center}
    .sgrid,.res-grid,.t-grid,.tool-grid,.band-grid,.why-list,.launch-grid,.find-grid,.val-grid,.aw-grid,.team-grid{grid-template-columns:1fr}
    .has-dd{flex-direction:column;align-items:flex-start;width:100%}
    .dd-toggle{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);width:100%}
    .dd-menu{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:none;box-shadow:none;padding:4px 0 8px 14px;min-width:0}
    .dd-menu a{padding:9px 0}
    .hero-stats{gap:30px}
    .intro-badge{left:0;bottom:-20px;position:relative;margin-top:24px;max-width:none}
    .form{padding:30px 24px}
  }

  /* LCP: the hero is a CSS background, so it cannot be discovered until this
     sheet parses -- it is preloaded in <head>. Each screen gets a size that fits:
     76 KB on a phone instead of the original's 399 KB. */
  .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/09/kuala-lumpur-buildings-768x430.webp')}
  @media(min-width:701px){.hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/09/kuala-lumpur-buildings-1024x573.webp')}}
  @media(min-width:1201px){.hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/09/kuala-lumpur-buildings-1536x860.webp')}}

/* ---- article page additions ---- */

.post-hero{position:relative;display:flex;align-items:center;background:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%);
;color:#fff;padding:150px 0 90px}
/* SINGLE POST */
.post-hero{min-height:auto;padding:120px 0 58px;align-items:flex-end}
.crumb{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:13px}
.crumb a:hover{color:var(--mint)}
.post-hero h1{font-size:clamp(32px,4.4vw,60px);max-width:940px;margin-bottom:15px}
.post-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13px;color:rgba(255,255,255,.72)}
.post-meta .post-tags{display:flex;flex-wrap:wrap;gap:6px}
.post-meta .tag{background:var(--mint);color:#000;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:2px}
.post-wrap{max-width:820px;margin:0 auto}
.post-lead-img{border-radius:3px;box-shadow:var(--shadow);margin-bottom:52px;width:100%;height:auto}
.post-body{font-size:17px;line-height:1.75;color:var(--muted);font-weight:300}
.post-body h2{font-size:clamp(26px,3vw,36px);color:var(--ink);margin:52px 0 18px;line-height:1.18}
.post-body h3{font-size:23px;color:var(--ink);margin:36px 0 14px}
.post-body h4{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;color:var(--ink);margin:28px 0 10px}
.post-body > :first-child{margin-top:0}
.post-body p{margin-bottom:22px}
.post-body a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--mint);transition:.25s}
.post-body a:hover{background:var(--mint)}
.post-body b,.post-body strong{color:var(--ink);font-weight:600}
.post-body ul,.post-body ol{margin:0 0 24px 0;padding-left:0;list-style:none}
.post-body ol{counter-reset:pb}
.post-body li{position:relative;padding-left:24px;margin-bottom:11px}
.post-body ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.post-body ol li{counter-increment:pb}
.post-body ol li::before{content:counter(pb) ".";position:absolute;left:0;top:0;color:var(--ink);font-weight:700;font-size:14px}
.post-body figure{margin:34px 0}
.post-body figure img{border-radius:3px;width:100%;height:auto}
.post-body figcaption{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}
.post-body blockquote{border-left:3px solid var(--mint);padding:6px 0 6px 24px;margin:30px 0;font-family:'Cormorant Garamond',serif;font-size:23px;line-height:1.4;color:var(--ink)}
/* tables — the source ships its own stylesheet 10 times over; this replaces it,
     keeping the data-label trick that stacks each row into a card on small screens */
  .wp-custom-table-container{margin:30px 0;overflow-x:auto}
.wp-custom-table .fw-bold{font-weight:600;color:var(--ink)}
.table-note{font-size:13px;color:var(--muted);line-height:1.55;margin:-18px 0 30px}
.table-note a,.footer-link{color:var(--ink);border-bottom:1px solid var(--mint);cursor:pointer}
/* the fixed header would otherwise cover a heading jumped to from the contents list */
  .post-body h2[id]{scroll-margin-top:104px}
.byline{display:flex;align-items:center;gap:10px}
.byline a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.byline a:hover{color:var(--mint);border-color:var(--mint)}
.share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:52px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.share .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-right:4px}
.share a,.share button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s;padding:0}
.share a:hover,.share button:hover{background:var(--mint);border-color:var(--mint);transform:translateY(-2px)}
.share svg{width:16px;height:16px;fill:var(--ink)}
.share .copied{font-size:12.5px;color:var(--green);font-weight:600;margin-left:2px}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.post-nav a{border:1px solid var(--line);border-radius:4px;padding:22px 24px;background:#fff;transition:.3s;display:block}
.post-nav a:hover{border-color:var(--mint);transform:translateY(-3px);box-shadow:var(--shadow)}
.post-nav .dir{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:9px;display:block}
.post-nav .t{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--ink);line-height:1.25}
.post-nav .nxt{text-align:right}
/* CTA sits immediately under the closing paragraph, so it reads as part of the article */
  .cta-agent{margin-top:26px}
.cta-news{margin-top:38px;background:var(--paper-2);border-top:3px solid var(--mint);border-radius:4px;padding:32px 34px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.cta-news-copy{flex:1 1 300px;min-width:0}
.cta-news-copy h3{font-size:26px;line-height:1.15;color:var(--ink);margin:0 0 10px}
.cta-news-copy p{font-size:15.5px;color:var(--muted);font-weight:300;line-height:1.6;margin:0}
/* the form takes the right-hand column; under ~640px of strip width the two
   columns wrap and the form goes full width beneath the copy */
.cta-news-act{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.cta-news .em-embed{background:#fff;border-radius:4px;overflow:hidden}
.cta-news-note{font-size:12.5px;color:var(--muted);font-weight:300;margin:0;line-height:1.5;text-align:center}
.post-foot{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.post-foot .back{font-size:14px;font-weight:600;color:var(--ink)}
.post-foot .back:hover{color:var(--green)}
#optedInFormWrapper{padding:10px 26px 26px}
/* every copy of the EngineMailer form; its own height message replaces the
   starting height once it has measured itself (266px for the current form, so
   the swap is barely a nudge) */
iframe.em-form{width:100%;height:270px;border:0;display:block}
@media(max-width:700px){.post-nav{grid-template-columns:1fr}.post-nav .nxt{text-align:left}}
@media(max-width:700px){
    .post-hero{padding:96px 0 44px}
    .post-body{font-size:16px}
    .wp-custom-table-container{overflow-x:visible}
    .wp-custom-table thead{display:none}
    .wp-custom-table,.wp-custom-table tbody,.wp-custom-table tr,.wp-custom-table td{display:block;width:100%!important}
    .wp-custom-table tr{margin-bottom:14px;border:1px solid var(--line)}
    .wp-custom-table td{text-align:right;padding-left:45%;position:relative;border:none;border-bottom:1px solid var(--line)}
    .wp-custom-table td::before{content:attr(data-label);position:absolute;left:14px;top:13px;width:40%;padding-right:10px;font-weight:600;text-align:left;color:var(--ink)}
    .wp-custom-table td:last-child{border-bottom:none;text-align:left;padding-left:14px}
    .wp-custom-table td:last-child::before{position:static;display:block;width:auto;margin-bottom:5px}
  }

/* ---- migrated article content ---- */

/* Styling for migrated articles.
 *
 * Converting a post from Elementor drops Elementor's stylesheet along with its
 * markup, so the handful of structures the converter emits arrive unstyled. These
 * are the same rules the static article pages use, with the same tokens, so a
 * migrated post and a hand-built page look alike.
 *
 * Install: paste into Appearance > Customize > Additional CSS, or append to the
 * child theme's style.css.
 *
 * Scope: .post-body is Blocksy's post content wrapper. If these rules appear
 * to do nothing, check what the theme actually wraps the content in and change
 * the scope below -- nothing else needs to change.
 */

.post-body {
	--green: #161616;
	--mint: #FFDE00;
	--ink: #141414;
	--paper: #FAFAFA;
	--line: rgba(0, 0, 0, 0.12);
	--muted: #5A5E63;
}

/* ---- an image and its text, kept together -------------------------------- */
/* Elementor's image box pairs a picture with a caption, heading or list. The
   converter keeps the pair as one block; this is what puts the two halves beside
   each other again, and stacks them on a narrow screen. */
.post-body .media-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 30px;
	align-items: center;
	margin: 34px 0;
}

.post-body .media-pair > figure {
	margin: 0;
}

.post-body .media-pair img {
	width: 100%;
	height: auto;
	display: block;
}

.post-body .media-pair > div > *:first-child {
	margin-top: 0;
}

.post-body .media-pair ul,
.post-body .media-pair ol {
	margin: 0 0 14px;
	padding-left: 20px;
}

/* A pair that somehow arrives with only a picture in it spans the full width
   rather than sitting in half a column with nothing beside it. */
.post-body .media-pair > figure:only-child {
	grid-column: 1 / -1;
}

@media (max-width: 760px) {
	.post-body .media-pair {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ---- a standalone image --------------------------------------------------- */
.post-body .article-image {
	margin: 30px 0;
}

.post-body .article-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---- a call to action that used to be a button ---------------------------- */
.post-body .article-cta {
	margin: 26px 0;
}

.post-body .article-cta a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--green);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: .02em;
	padding: 15px 30px;
	border-radius: 2px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: .35s ease;
}

.post-body .article-cta a::after {
	content: "\2192";
}

/* Some posts carry their own call to action as <div class="cta-wrap"><a class="cta-btn">.
   The migration keeps that markup intact, so the classes come through and are styled
   here to match .article-cta rather than left to whatever defined them before. */
.post-body .cta-wrap {
	margin: 26px 0;
}

.post-body .cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--green);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: .02em;
	padding: 15px 30px;
	border-radius: 2px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: .35s ease;
}

.post-body .cta-btn::after {
	content: "\2192";
}

.post-body .cta-btn:hover,
.post-body .cta-btn:focus {
	background: var(--green-900);
	color: #fff;
	transform: translateY(-2px);
}

.post-body .article-cta a:hover,
.post-body .article-cta a:focus {
	background: var(--green-900);
	color: #fff;
	transform: translateY(-2px);
}

/* ---- tables --------------------------------------------------------------- */
.post-body .wp-custom-table-container {
	margin: 30px 0;
	overflow-x: auto;
}

.post-body .wp-custom-table-container table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-size: 15px;
	border: 1px solid var(--table-line);
}

.post-body .wp-custom-table-container th {
	background: var(--table-head);
	color: #fff;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
	border: none;
	border-right: 1px solid rgba(255, 255, 255, .14);
	font-size: 13.5px;
	line-height: 1.4;
	letter-spacing: .02em;
}

.post-body .wp-custom-table-container th:last-child {
	border-right: none;
}

.post-body .wp-custom-table-container td {
	padding: 14px 18px;
	border: none;
	border-right: 1px solid var(--table-line);
	border-bottom: 1px solid var(--table-line);
	vertical-align: top;
	line-height: 1.55;
	color: var(--table-ink);
}

.post-body .wp-custom-table-container td:last-child {
	border-right: none;
}

/* the opening column names the row, so it carries the weight rather than the values */
.post-body .wp-custom-table-container td:first-child {
	color: var(--ink);
	font-weight: 600;
}

/* the closing row of these tables is almost always a total */
.post-body .wp-custom-table-container tbody tr:last-child td {
	border-bottom: none;
	color: var(--ink);
	font-weight: 700;
}

.post-body .wp-custom-table-container tbody tr:nth-child(even) {
	background: var(--table-band);
}

/* Text inside a header cell takes the header's colour rather than its own. These
   posts wrap every cell in <strong>, and .post-body strong sets a near-black ink --
   which on a black header meant the headings could not be read at all. */
.post-body .wp-custom-table-container th,
.post-body .wp-custom-table-container th p,
.post-body .wp-custom-table-container th span,
.post-body .wp-custom-table-container th strong,
.post-body .wp-custom-table-container th b {
	color: #fff;
}

/* ---- callout boxes ---------------------------------------------------------
   A one-column table is a "Pro Tip" or "Quick Answer" panel, not data. The theme
   only adds .wp-custom-table to tables with two or more columns, so the absence of
   that class is what marks a callout. */
.post-body .wp-custom-table-container table:not(.wp-custom-table) {
	border: none;
}

.post-body .wp-custom-table-container table:not(.wp-custom-table) th,
.post-body .wp-custom-table-container table:not(.wp-custom-table) td {
	background: var(--callout);
	color: var(--ink);
	text-align: left;
	font-weight: 400;
	padding: 22px 24px;
	border: none;
}

/* the colour override above is on the header cells generally, so a callout has to
   take its ink back */
.post-body .wp-custom-table-container table:not(.wp-custom-table) th p,
.post-body .wp-custom-table-container table:not(.wp-custom-table) th span,
.post-body .wp-custom-table-container table:not(.wp-custom-table) th strong,
.post-body .wp-custom-table-container table:not(.wp-custom-table) th b,
.post-body .wp-custom-table-container table:not(.wp-custom-table) td strong,
.post-body .wp-custom-table-container table:not(.wp-custom-table) td b {
	color: var(--ink);
}

.post-body .wp-custom-table-container table:not(.wp-custom-table) p:last-child {
	margin-bottom: 0;
}

/* The source note under a table. The converter leaves the plugin's own class on
   it; table-note is the name the static pages use. */
.post-body .wp-table-footer,
.post-body .table-note {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.55;
	margin: -18px 0 30px;
}

.post-body .wp-table-footer a,
.post-body .table-note a {
	color: var(--ink);
	border-bottom: 1px solid var(--mint);
	text-decoration: none;
}

/* Below this width a wide table cannot be read by scrolling, so each row becomes
   a card and every cell is labelled from the data-label the converter preserves. */
@media (max-width: 700px) {
	/* Only a table the converter could label becomes cards, and only then is the
	   scroll dropped. One that had no heading row keeps scrolling sideways, which
	   is worse to use but still readable -- cards without labels would not be. */
	.post-body .wp-custom-table-container:has(.wp-custom-table) {
		overflow-x: visible;
	}

	.post-body .wp-custom-table thead {
		display: none;
	}

	.post-body .wp-custom-table,
	.post-body .wp-custom-table tbody,
	.post-body .wp-custom-table tr,
	.post-body .wp-custom-table td {
		display: block;
		width: 100% !important;
	}

	.post-body .wp-custom-table tr {
		margin-bottom: 14px;
		border: 1px solid var(--line);
	}

	.post-body .wp-custom-table td {
		text-align: right;
		padding-left: 45%;
		position: relative;
		border: none;
		border-right: none;
		border-bottom: 1px solid var(--line);
	}

	.post-body .wp-custom-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 14px;
		top: 13px;
		width: 40%;
		padding-right: 10px;
		font-weight: 600;
		text-align: left;
		color: var(--ink);
	}

	/* The last cell is usually prose rather than a short value, so it reads across
	   the full width instead of being squeezed into the right-hand column. */
	.post-body .wp-custom-table td:last-child {
		border-bottom: none;
		text-align: left;
		padding-left: 14px;
	}

	/* Its label has to come out of the absolute corner and sit on its own line --
	   the cell no longer leaves a gap on the left for it to occupy, so leaving it
	   positioned would print the label straight through the text. */
	.post-body .wp-custom-table td:last-child::before {
		position: static;
		display: block;
		width: auto;
		margin-bottom: 5px;
	}
}

/* ---- posts-page pagination ---- */

/* Pagination for the Property Guides posts page.
   Append to wherever the revamp CSS lives (child theme stylesheet, or
   Appearance > Customise > Additional CSS). Uses the existing design tokens. */

.guides-pagination{margin-top:56px}
.guides-pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.guides-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.guides-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 14px;
  border:1px solid var(--line);border-radius:2px;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink);transition:.25s;
}
.guides-pagination .page-numbers:hover{border-color:var(--ink);transform:translateY(-2px)}
.guides-pagination .page-numbers.current{background:var(--mint);border-color:var(--mint);color:#000}
.guides-pagination .page-numbers.dots{border-color:transparent;background:none;min-width:24px;padding:0}
.guides-pagination .page-numbers.dots:hover{transform:none}
.guides-pagination .prev,.guides-pagination .next{font-weight:700;letter-spacing:.02em}

/* card title becomes a link on the WP template — keep it looking like the static pages */
.res-body h3 a{color:inherit;transition:.25s}
.res:hover .res-body h3 a{color:var(--green)}

@media(max-width:700px){
  .guides-pagination .page-numbers{min-width:38px;height:38px;padding:0 10px;font-size:13px}
}


/* ================= shared by the built pages ================= */

:root{
    --green:#161616;
    --green-700:#202020;
    --green-900:#0A0A0A;
    --mint:#FFDE00;
    --gold:#FFDE00;
    --ink:#141414;
    --paper:#FAFAFA;
    --paper-2:#EFF1F2;
    --line:rgba(0,0,0,0.12);
    --muted:#5A5E63;
    --white:#ffffff;
    --shadow:0 24px 60px -28px rgba(0,0,0,0.5);
    --maxw:1240px;
  }
.res-img{height:200px;overflow:hidden;position:relative}
/* .res-cat is deliberately NOT redeclared here. The framework already
   owns it (display:inline-block, in a .res-cats row). The eleven sibling
   .html files still carry the old absolute badge version, and because
   they all declare it identically rebuild_page_css.py used to hoist it
   into this shared block unscoped, where it outranked the framework and
   stacked every pill in one corner. That script now skips selectors the
   framework declares. */
.hero-sm{min-height:auto;padding:190px 0 110px;align-items:flex-end}
.hero-sm h1{font-size:clamp(38px,5.2vw,72px)}
.crumb{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:26px}
.svcs{background:var(--green);color:#fff}
.svcs .section-head h2{color:#fff}
.svcs .section-head p{color:rgba(255,255,255,.72)}
.svc:hover{background:rgba(255,255,255,.08);border-color:var(--mint);transform:translateY(-5px)}
.folio{background:var(--paper-2)}
.folio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.folio-item:hover{border-color:var(--mint);transform:translateY(-4px)}
.ci .ic svg.wa-glyph{fill:var(--mint);stroke:none;width:19px;height:19px}
/* Same reason as .wa-glyph above: .ci .ic svg draws with strokes and no
   fill, which renders a solid brand mark as nothing at all. */
.ci .ic svg.fb-glyph{fill:var(--mint);stroke:none;width:19px;height:19px}
.who{background:var(--paper-2)}
.who-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.who-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.who-list div:hover{border-color:var(--mint);transform:translateX(4px)}
.who-list .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:0 0 8px}
@media(max-width:700px){
.hero-sm{padding:150px 0 80px}
}


/* ---- from about.html ---- */

.hartamas-page-about .hero{position:relative;min-height:100vh;display:flex;align-items:center;background:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2020/12/MIEA-Awards-2020.jpg') center/cover no-repeat;color:#fff;padding:150px 0 90px}
.hartamas-page-about .lead-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:start}
.hartamas-page-about .bio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.hartamas-page-about .bio{background:#fff;border:1px solid var(--line);border-radius:4px;padding:38px 34px;display:flex;flex-direction:column;transition:.35s}
.hartamas-page-about .bio:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--mint)}
.hartamas-page-about .bio-head{display:flex;align-items:center;gap:22px;margin-bottom:22px}
.hartamas-page-about .bio-head .photo{width:128px;height:128px;flex:0 0 128px;border-radius:50%;object-fit:cover;object-position:center top;background:var(--paper-2);border:3px solid var(--mint);transition:.35s}
.hartamas-page-about .bio:hover .bio-head .photo{border-color:var(--green)}
.hartamas-page-about .bio h3{font-size:27px;color:var(--ink);margin-bottom:4px}
.hartamas-page-about .bio .role{font-size:13.5px;color:var(--muted);font-weight:400;letter-spacing:.01em}
.hartamas-page-about .bio .txt{font-size:15px;color:var(--muted);font-weight:300;line-height:1.68;flex:1}
.hartamas-page-about .creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.hartamas-page-about .creds span{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--ink);background:var(--paper-2);border-radius:2px;padding:6px 11px}
.hartamas-page-about .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2020/12/MIEA-Awards-2020-768x512.jpg')}
@media(max-width:980px){
.hartamas-page-about .lead-grid, .hartamas-page-about .bio-grid{grid-template-columns:1fr;gap:48px}
}
@media(max-width:700px){
.hartamas-page-about .bio-grid{gap:20px}
}
@media(min-width:701px){
.hartamas-page-about .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2020/12/MIEA-Awards-2020-1024x683.jpg')}
}
@media(min-width:1201px){
.hartamas-page-about .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2020/12/MIEA-Awards-2020.jpg')}
}


/* ---- from architectural-consultancy-services.html ---- */

.hartamas-page-architectural-consultancy-services .hero{position:relative;min-height:100vh;display:flex;align-items:center;background:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2023/04/architecture-services.jpg') center/cover no-repeat;color:#fff;padding:150px 0 90px}
.hartamas-page-architectural-consultancy-services .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hartamas-page-architectural-consultancy-services .svc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);border-radius:4px;padding:34px 30px;display:flex;flex-direction:column;transition:.3s}
.hartamas-page-architectural-consultancy-services .svc img{width:46px;height:46px;object-fit:contain;margin-bottom:20px;display:block;
    filter:brightness(0) invert(1);opacity:.92;transition:.3s}
.hartamas-page-architectural-consultancy-services .svc:hover img{opacity:1}
.hartamas-page-architectural-consultancy-services .svc h3{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:20px}
.hartamas-page-architectural-consultancy-services .svc h4{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 10px}
.hartamas-page-architectural-consultancy-services .svc .grp+.grp{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.hartamas-page-architectural-consultancy-services .svc ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.hartamas-page-architectural-consultancy-services .svc li{font-size:14.5px;color:rgba(255,255,255,.82);font-weight:300;line-height:1.5;padding-left:17px;position:relative}
.hartamas-page-architectural-consultancy-services .svc li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.hartamas-page-architectural-consultancy-services .folio-item{border-radius:4px;overflow:hidden;border:1px solid var(--line);background:#fff;transition:.3s}
.hartamas-page-architectural-consultancy-services .folio-item img{width:100%;height:230px;object-fit:cover;display:block;transition:.6s}
.hartamas-page-architectural-consultancy-services .folio-item:hover img{transform:scale(1.04)}
.hartamas-page-architectural-consultancy-services .folio-item:first-child{grid-column:span 2}
.hartamas-page-architectural-consultancy-services .folio-item:first-child img{height:100%;min-height:230px}
.hartamas-page-architectural-consultancy-services .arch-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.hartamas-page-architectural-consultancy-services .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2023/04/architecture-services-768x460.jpg')}
@media(max-width:980px){
.hartamas-page-architectural-consultancy-services .svc-grid{grid-template-columns:1fr}
.hartamas-page-architectural-consultancy-services .folio-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-architectural-consultancy-services .folio-item:first-child{grid-column:span 2}
.hartamas-page-architectural-consultancy-services .arch-form-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:700px){
.hartamas-page-architectural-consultancy-services .folio-grid{grid-template-columns:1fr}
.hartamas-page-architectural-consultancy-services .folio-item:first-child{grid-column:span 1}
}
@media(min-width:701px){
.hartamas-page-architectural-consultancy-services .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2023/04/architecture-services-1024x613.jpg')}
}
@media(min-width:1201px){
.hartamas-page-architectural-consultancy-services .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2023/04/architecture-services.jpg')}
}


/* ---- from capital-market.html ---- */

.hartamas-page-capital-market .hero{position:relative;min-height:100vh;display:flex;align-items:center;background:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2024/05/capital-market.jpg') center/cover no-repeat;color:#fff;padding:150px 0 90px}
.hartamas-page-capital-market .cm-intro{background:var(--paper)}
.hartamas-page-capital-market .cm-copy{max-width:880px}
.hartamas-page-capital-market .cm-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:22px}
.hartamas-page-capital-market .cm-copy p:first-child{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.45;color:var(--ink);font-weight:500}
.hartamas-page-capital-market .assets{background:var(--green);color:#fff}
.hartamas-page-capital-market .assets .section-head h2{color:#fff}
.hartamas-page-capital-market .assets .section-head p{color:rgba(255,255,255,.72)}
.hartamas-page-capital-market .asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hartamas-page-capital-market .asset{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);border-radius:4px;padding:32px 28px;transition:.3s}
.hartamas-page-capital-market .asset:hover{background:rgba(255,255,255,.08);border-color:var(--mint);transform:translateY(-5px)}
.hartamas-page-capital-market .asset svg{width:34px;height:34px;stroke:var(--mint);fill:none;stroke-width:1.4;margin-bottom:18px;display:block}
.hartamas-page-capital-market .asset h3{font-size:22px;color:#fff;margin-bottom:8px}
.hartamas-page-capital-market .asset p{font-size:14.5px;color:rgba(255,255,255,.72);font-weight:300;line-height:1.6}
.hartamas-page-capital-market .who-list div{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:16px 18px;font-size:15px;color:var(--ink);font-weight:500;transition:.25s}
.hartamas-page-capital-market .cm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.hartamas-page-capital-market .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2024/05/capital-market-768x432.jpg')}
@media(max-width:980px){
.hartamas-page-capital-market .asset-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-capital-market .who-inner, .hartamas-page-capital-market .cm-form-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:700px){
.hartamas-page-capital-market .asset-grid, .hartamas-page-capital-market .who-list{grid-template-columns:1fr}
}
@media(min-width:701px){
.hartamas-page-capital-market .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2024/05/capital-market-1024x575.jpg')}
}
@media(min-width:1201px){
.hartamas-page-capital-market .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2024/05/capital-market-1536x863.jpg')}
}


/* ---- from career.html ---- */

.hartamas-page-career .hero{position:relative;min-height:100vh;display:flex;align-items:center;background:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/career.jpg') center/cover no-repeat;color:#fff;padding:150px 0 90px}
.hartamas-page-career .dept{margin-bottom:52px}
.hartamas-page-career .dept:last-child{margin-bottom:0}
.hartamas-page-career .dept-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:4px}
.hartamas-page-career .dept-head h3{font-size:29px;color:var(--ink)}
.hartamas-page-career .dept-head .n{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hartamas-page-career .vac{border-bottom:1px solid var(--line)}
.hartamas-page-career .vac summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;transition:.25s}
.hartamas-page-career .vac summary::-webkit-details-marker{display:none}
.hartamas-page-career .vac summary:hover{padding-left:8px}
.hartamas-page-career .vac .t{font-size:16.5px;color:var(--ink);font-weight:600}
.hartamas-page-career .vac .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.hartamas-page-career .vac .meta span{font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--muted);background:var(--paper-2);border-radius:2px;padding:5px 10px}
.hartamas-page-career .vac .sign{flex:0 0 auto;font-size:22px;color:var(--green);font-weight:300;line-height:1;transition:.3s}
.hartamas-page-career .vac[open] .sign{transform:rotate(45deg);color:var(--mint)}
.hartamas-page-career .vac-body{padding:2px 0 34px;max-width:860px}
.hartamas-page-career .vac-block{margin-bottom:26px}
.hartamas-page-career .vac-block:last-of-type{margin-bottom:0}
.hartamas-page-career .vac-body h4{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:13px}
.hartamas-page-career .vac-body ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.hartamas-page-career .vac-body li{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.6;padding-left:18px;position:relative}
.hartamas-page-career .vac-body li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hartamas-page-career .vac-body .lead-in{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.6;margin:-4px 0 13px}
.hartamas-page-career .vac-body .intro{font-size:15px;color:var(--muted);font-weight:300;line-height:1.68;margin-bottom:26px}
.hartamas-page-career .vac-apply{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.hartamas-page-career .apply-hint{font-size:13px;color:var(--muted);font-weight:300}
.hartamas-page-career .how{background:var(--paper-2)}
.hartamas-page-career .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
.hartamas-page-career .step{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:34px 30px}
.hartamas-page-career .step .num{font-family:'Cormorant Garamond',serif;font-size:44px;color:var(--mint);line-height:1;margin-bottom:14px}
.hartamas-page-career .step h4{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--ink);margin-bottom:8px;font-weight:500;letter-spacing:0;text-transform:none}
.hartamas-page-career .step p{font-size:14.5px;color:var(--muted);font-weight:300}
.hartamas-page-career .step a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--mint)}
.hartamas-page-career .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/career-768x465.jpg')}
@media(max-width:980px){
.hartamas-page-career .career-grid, .hartamas-page-career .how-grid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:700px){
.hartamas-page-career .dept-head h3{font-size:24px}
}
@media(min-width:701px){
.hartamas-page-career .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/career-1024x620.jpg')}
}
@media(min-width:1201px){
.hartamas-page-career .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/career.jpg')}
}


/* ---- from project-management.html ---- */

/* The 768 crop is declared unconditionally, as the base. It has to be: this
   page previously had nothing but min-width rules, so below 701px no
   page-specific rule matched at all and the hero fell through to the framework
   default at the top of this file -- the KL skyline. That is the image that
   was appearing on phones.

   A second @media(min-width:701px) block also used to sit further down, after
   the 1201 rule, pinning the 768 crop at every width from 701 up. Same
   specificity and written later, so it beat both the 1024 and the 1536 rules
   and desktop was being served the smallest file, upscaled. It is gone; the
   ladder below is the whole of it. */
.hartamas-page-project-management .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/project-management-768x512.jpg')}
@media(min-width:701px){
.hartamas-page-project-management .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/project-management-1024x683.jpg')}
}
@media(min-width:1201px){
.hartamas-page-project-management .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/project-management-1536x1024.jpg')}
}


.hartamas-page-project-management .pmg-intro{background:var(--paper)}
.hartamas-page-project-management .pmg-copy{max-width:880px}
.hartamas-page-project-management .pmg-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:22px}
.hartamas-page-project-management .pmg-copy p:first-child{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.45;color:var(--ink);font-weight:500}
.hartamas-page-project-management .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hartamas-page-project-management .svc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);border-radius:4px;padding:30px 26px;transition:.3s}
.hartamas-page-project-management .svc svg{width:32px;height:32px;stroke:var(--mint);fill:none;stroke-width:1.4;margin-bottom:16px;display:block}
.hartamas-page-project-management .svc h3{font-size:20px;color:#fff;margin-bottom:7px;line-height:1.2}
.hartamas-page-project-management .svc p{font-size:14px;color:rgba(255,255,255,.72);font-weight:300;line-height:1.6}
.hartamas-page-project-management .who-list div{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:18px 20px;font-size:16px;color:var(--ink);font-weight:500;transition:.25s}
.hartamas-page-project-management .pmg-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media(max-width:1100px){
.hartamas-page-project-management .svc-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
.hartamas-page-project-management .svc-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-project-management .who-inner, .hartamas-page-project-management .pmg-form-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:700px){
.hartamas-page-project-management .svc-grid, .hartamas-page-project-management .who-list{grid-template-columns:1fr}
}


/* ---- from project-marketing.html ---- */

.hartamas-page-project-marketing .hero{position:relative;min-height:100vh;display:flex;align-items:center;background:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/project-marketing.jpg') center/cover no-repeat;color:#fff;padding:150px 0 90px}
.hartamas-page-project-marketing .pm-stat{display:flex;gap:54px;margin-top:46px;padding-top:32px;border-top:1px solid rgba(255,255,255,.18);flex-wrap:wrap}
.hartamas-page-project-marketing .pm-stat .num{font-family:'Cormorant Garamond',serif;font-size:50px;color:var(--mint);font-weight:600;line-height:1}
.hartamas-page-project-marketing .pm-stat .lbl{font-size:13px;color:rgba(255,255,255,.72);margin-top:10px;max-width:190px}
.hartamas-page-project-marketing .pm-intro{background:var(--paper)}
.hartamas-page-project-marketing .pm-intro .lead-copy{max-width:860px}
.hartamas-page-project-marketing .pm-intro p{color:var(--muted);font-weight:300;font-size:16.5px;margin-bottom:20px}
.hartamas-page-project-marketing .scope{background:var(--green);color:#fff}
.hartamas-page-project-marketing .scope .section-head h2{color:#fff}
.hartamas-page-project-marketing .scope .section-head p{color:rgba(255,255,255,.72)}
.hartamas-page-project-marketing .scope-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.hartamas-page-project-marketing .scope-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);border-radius:4px;padding:30px 26px;transition:.3s}
.hartamas-page-project-marketing .scope-item:hover{background:rgba(255,255,255,.08);border-color:var(--mint);transform:translateY(-4px)}
.hartamas-page-project-marketing .scope-item img{width:46px;height:46px;object-fit:contain;margin-bottom:18px;display:block;
    filter:brightness(0) invert(1);opacity:.92;transition:.3s}
.hartamas-page-project-marketing .scope-item:hover img{opacity:1}
.hartamas-page-project-marketing .scope-item p{font-size:14.5px;color:rgba(255,255,255,.8);font-weight:300;line-height:1.6}
.hartamas-page-project-marketing .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hartamas-page-project-marketing .proj{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:.35s}
.hartamas-page-project-marketing .proj:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--mint)}
.hartamas-page-project-marketing .proj-img{overflow:hidden;background:var(--paper-2)}
.hartamas-page-project-marketing .proj-img img{width:100%;height:190px;object-fit:cover;display:block;transition:.6s}
.hartamas-page-project-marketing .proj:hover .proj-img img{transform:scale(1.05)}
.hartamas-page-project-marketing .proj-body{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.hartamas-page-project-marketing .proj-body h3{font-size:22px;color:var(--ink);margin-bottom:5px;line-height:1.2}
.hartamas-page-project-marketing .proj-body .loc{font-size:13px;color:var(--muted);font-weight:400}
.hartamas-page-project-marketing .proj-body .go{margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.hartamas-page-project-marketing .proj-body .go::after{content:" →";color:var(--green);transition:.3s;display:inline-block}
.hartamas-page-project-marketing .proj:hover .proj-body .go::after{transform:translateX(4px)}
.hartamas-page-project-marketing .folio-item{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.3s}
.hartamas-page-project-marketing .folio-item img{width:100%;height:150px;object-fit:cover;display:block}
.hartamas-page-project-marketing .folio-item .cap{padding:16px 18px}
.hartamas-page-project-marketing .folio-item .n{font-size:13.5px;font-weight:700;letter-spacing:.03em;color:var(--ink);text-transform:uppercase}
.hartamas-page-project-marketing .folio-item .l{font-size:12.5px;color:var(--muted);font-weight:300;margin-top:3px}
.hartamas-page-project-marketing .join-band{background:var(--green-900);color:#fff}
.hartamas-page-project-marketing .join-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hartamas-page-project-marketing .join-inner h2{font-size:clamp(28px,3.4vw,44px);color:#fff;margin-bottom:12px}
.hartamas-page-project-marketing .join-inner p{color:rgba(255,255,255,.75);font-weight:300;font-size:16.5px}
.hartamas-page-project-marketing .join-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.hartamas-page-project-marketing .pm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.hartamas-page-project-marketing .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/project-marketing-768x432.jpg')}
@media(max-width:980px){
.hartamas-page-project-marketing .scope-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-project-marketing .proj-grid, .hartamas-page-project-marketing .folio-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-project-marketing .join-inner, .hartamas-page-project-marketing .pm-form-grid{grid-template-columns:1fr;gap:34px}
.hartamas-page-project-marketing .join-actions{justify-content:flex-start}
}
@media(max-width:700px){
.hartamas-page-project-marketing .scope-grid, .hartamas-page-project-marketing .proj-grid, .hartamas-page-project-marketing .folio-grid{grid-template-columns:1fr}
.hartamas-page-project-marketing .pm-stat{gap:30px}
}
@media(min-width:701px){
.hartamas-page-project-marketing .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/project-marketing-1024x576.jpg')}
}
@media(min-width:1201px){
.hartamas-page-project-marketing .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/project-marketing-1536x864.jpg')}
}


/* ---- from real-estate-news.html ---- */

.hartamas-page-real-estate-news .hero{position:relative;min-height:100vh;display:flex;align-items:center;background:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2025/08/kuala-lumpur-skyline.jpg') center/cover no-repeat;color:#fff;padding:150px 0 90px}
.hartamas-page-real-estate-news .archive{background:var(--paper)}
.hartamas-page-real-estate-news .archive .res-body h3{flex:1}
.hartamas-page-real-estate-news .archive .res-img img{height:210px;object-fit:cover;width:100%}
.hartamas-page-real-estate-news .arch-note{font-size:13.5px;color:var(--muted);font-weight:300;margin-top:44px;text-align:center}
.hartamas-page-real-estate-news .sub-band{background:var(--paper-2)}
.hartamas-page-real-estate-news .sub-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.hartamas-page-real-estate-news .sub-form .em-embed{background:#fff;border-radius:4px;overflow:hidden;box-shadow:var(--shadow)}
.hartamas-page-real-estate-news .sub-inner h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:16px}
.hartamas-page-real-estate-news .sub-inner p{color:var(--muted);font-weight:300;font-size:16.5px}
.hartamas-page-real-estate-news .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2025/08/kuala-lumpur-skyline-768x403.jpg')}
@media(max-width:980px){
.hartamas-page-real-estate-news .sub-inner{grid-template-columns:1fr;gap:30px}
}
@media(min-width:701px){
.hartamas-page-real-estate-news .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2025/08/kuala-lumpur-skyline-1024x538.jpg')}
}
@media(min-width:1201px){
.hartamas-page-real-estate-news .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2025/08/kuala-lumpur-skyline.jpg')}
}

/* ---- from asset-management ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

.hartamas-page-asset-management .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/asset-management-768x512.jpg')}
@media(min-width:701px){
.hartamas-page-asset-management .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/asset-management-1024x683.jpg')}
}
@media(min-width:1201px){
.hartamas-page-asset-management .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/asset-management-1536x1024.jpg')}
}

.hartamas-page-asset-management .am-copy{max-width:880px}
.hartamas-page-asset-management .am-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:18px}
.hartamas-page-asset-management .am-copy p:first-child{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.45;color:var(--ink);font-weight:400}
.hartamas-page-asset-management .am-copy p:last-child{margin-bottom:0}

/* The portfolio photos are square 300x300 crops, so the grid is tighter than
   the three-column .folio-grid the other pages use. */
.hartamas-page-asset-management .am-folio{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hartamas-page-asset-management .am-item{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.35s;display:flex;flex-direction:column}
.hartamas-page-asset-management .am-item:hover{border-color:var(--mint);transform:translateY(-4px)}
.hartamas-page-asset-management .am-item img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;background:var(--paper-2)}
.hartamas-page-asset-management .am-item .cap{padding:16px 18px 18px}
.hartamas-page-asset-management .am-item .n{font-size:13.5px;font-weight:700;letter-spacing:.03em;color:var(--ink);text-transform:uppercase;line-height:1.3}
.hartamas-page-asset-management .am-item .l{font-size:12.5px;color:var(--muted);font-weight:300;margin-top:3px}
.hartamas-page-asset-management .am-item .cap p{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.6;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

.hartamas-page-asset-management .am-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}

@media(max-width:1100px){
.hartamas-page-asset-management .am-folio{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
.hartamas-page-asset-management .am-folio{grid-template-columns:repeat(2,1fr)}
.hartamas-page-asset-management .am-form-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:520px){
.hartamas-page-asset-management .am-folio{grid-template-columns:1fr}
}

/* ---- from valuation-consultancy ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

.hartamas-page-valuation-consultancy .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/valuation-consultancy-768x512.jpg')}
@media(min-width:701px){
.hartamas-page-valuation-consultancy .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/valuation-consultancy-1024x683.jpg')}
}
@media(min-width:1201px){
.hartamas-page-valuation-consultancy .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/valuation-consultancy-1536x1024.jpg')}
}

.hartamas-page-valuation-consultancy .vc-copy{max-width:880px}
.hartamas-page-valuation-consultancy .vc-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:18px}
.hartamas-page-valuation-consultancy .vc-intro .vc-copy p:first-child{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.45;color:var(--ink);font-weight:400}
.hartamas-page-valuation-consultancy .vc-copy p:last-child{margin-bottom:0}

/* Ten purposes, icon over a short label -- a tighter grid than the cards the
   other sections use. White on the dark band, like .awcard. */
.hartamas-page-valuation-consultancy .vc-purposes{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.hartamas-page-valuation-consultancy .vc-purpose{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:26px 18px;text-align:center;transition:.35s}
.hartamas-page-valuation-consultancy .vc-purpose:hover{transform:translateY(-4px)}
.hartamas-page-valuation-consultancy .vc-purpose img{width:52px;height:52px;object-fit:contain;display:block;margin:0 auto 14px}
.hartamas-page-valuation-consultancy .vc-purpose h3{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:.01em}

.hartamas-page-valuation-consultancy .vc-res-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.hartamas-page-valuation-consultancy .vc-res-imgs{display:grid;gap:20px}
.hartamas-page-valuation-consultancy .vc-res-imgs img{width:100%;height:auto;display:block;border-radius:4px;border:1px solid var(--line)}

.hartamas-page-valuation-consultancy .vc-track{margin-bottom:46px}
.hartamas-page-valuation-consultancy .vc-track:last-child{margin-bottom:0}
.hartamas-page-valuation-consultancy .vc-track h3{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hartamas-page-valuation-consultancy .vc-track-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hartamas-page-valuation-consultancy .vc-track-imgs img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;border-radius:4px;background:var(--paper-2)}

.hartamas-page-valuation-consultancy .vc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}

@media(max-width:1100px){
.hartamas-page-valuation-consultancy .vc-purposes{grid-template-columns:repeat(4,1fr)}
.hartamas-page-valuation-consultancy .vc-res-grid{grid-template-columns:1fr;gap:38px}
.hartamas-page-valuation-consultancy .vc-res-imgs{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
.hartamas-page-valuation-consultancy .vc-purposes{grid-template-columns:repeat(3,1fr)}
.hartamas-page-valuation-consultancy .vc-form-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:520px){
.hartamas-page-valuation-consultancy .vc-purposes{grid-template-columns:repeat(2,1fr)}
.hartamas-page-valuation-consultancy .vc-track-imgs{grid-template-columns:1fr 1fr}
.hartamas-page-valuation-consultancy .vc-res-imgs{grid-template-columns:1fr}
}

/* ---- from hartamas-concierge ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

/* Hero art: hartamas-concierge.jpg, the clean desk photograph. NOT
   hartamas-concierge-thumbnail.jpg, which the live page uses -- that one is a
   share card with the wordmark burned into its top-left, right where the
   breadcrumb and heading sit, and it renders as a duplicate of the eyebrow.
   Only the one size exists (722x440), so there are no breakpoint variants; a
   larger upload would sharpen it on wide screens. */
.hartamas-page-hartamas-concierge .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2024/02/hartamas-concierge.jpg')}

.hartamas-page-hartamas-concierge .hc-intro-grid{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:64px;align-items:start}
.hartamas-page-hartamas-concierge .hc-mark img{width:100%;height:auto;display:block}
.hartamas-page-hartamas-concierge .hc-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:18px}
.hartamas-page-hartamas-concierge .hc-copy p:first-child{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.45;color:var(--ink);font-weight:400}
.hartamas-page-hartamas-concierge .hc-hours{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px!important;margin-bottom:0!important}
.hartamas-page-hartamas-concierge .hc-hours strong{color:var(--ink);font-weight:600}

/* Five people, on the dark band so the .ci rows keep their light-on-dark
   treatment without a second set of rules. */
.hartamas-page-hartamas-concierge .hc-team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hartamas-page-hartamas-concierge .hc-person{border:1px solid rgba(255,255,255,.16);border-top:3px solid var(--mint);border-radius:4px;padding:30px 28px;transition:.35s}
.hartamas-page-hartamas-concierge .hc-person:hover{border-color:rgba(255,255,255,.34);border-top-color:var(--mint);transform:translateY(-4px)}
.hartamas-page-hartamas-concierge .hc-for{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1.5;margin-bottom:10px;min-height:33px}
.hartamas-page-hartamas-concierge .hc-person h3{font-size:22px;color:#fff;font-weight:600;margin-bottom:22px}
.hartamas-page-hartamas-concierge .hc-person .contact-info{gap:16px}
.hartamas-page-hartamas-concierge .hc-person .ci .val{word-break:break-word}

.hartamas-page-hartamas-concierge .hc-form-sec{background:var(--paper-2)}
.hartamas-page-hartamas-concierge .hc-jotform{background:#fff;border:1px solid var(--line);border-radius:4px;padding:10px;max-width:900px;margin:0 auto}
.hartamas-page-hartamas-concierge .hc-jotform iframe{display:block;width:100%;min-width:100%;max-width:100%;height:1100px;border:none}

.hartamas-page-hartamas-concierge .hc-cta{text-align:center;max-width:680px}
.hartamas-page-hartamas-concierge .hc-cta .eyebrow::before{margin:0 auto}
.hartamas-page-hartamas-concierge .hc-cta .eyebrow{display:block}
.hartamas-page-hartamas-concierge .hc-cta .btn{margin-top:28px}

@media(max-width:1100px){
.hartamas-page-hartamas-concierge .hc-team{grid-template-columns:repeat(2,1fr)}
.hartamas-page-hartamas-concierge .hc-intro-grid{grid-template-columns:1fr;gap:38px}
.hartamas-page-hartamas-concierge .hc-mark{max-width:300px}
}
@media(max-width:820px){
.hartamas-page-hartamas-concierge .hc-for{min-height:0}
}
@media(max-width:620px){
.hartamas-page-hartamas-concierge .hc-team{grid-template-columns:1fr}
.hartamas-page-hartamas-concierge .hc-jotform iframe{height:1400px}
}

/* ---- from secondary-market-rental-sales ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

.hartamas-page-secondary-market-rental-sales .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/secondary-market-768x432.jpg')}
@media(min-width:701px){
.hartamas-page-secondary-market-rental-sales .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/secondary-market-1024x576.jpg')}
}
@media(min-width:1201px){
.hartamas-page-secondary-market-rental-sales .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/secondary-market-1536x864.jpg')}
}

.hartamas-page-secondary-market-rental-sales .sm-intro-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:64px;align-items:start}
.hartamas-page-secondary-market-rental-sales .sm-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:18px}
.hartamas-page-secondary-market-rental-sales .sm-copy p:first-child{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.45;color:var(--ink);font-weight:400}
.hartamas-page-secondary-market-rental-sales .sm-copy p:last-child{margin-bottom:0}

/* The two offerings were one paragraph of en-dash-wrapped text split by a
   <br>. Same words, listed instead of dressed in dashes. */
.hartamas-page-secondary-market-rental-sales .sm-offer{list-style:none;border-top:3px solid var(--mint);background:var(--paper-2);padding:28px 30px;border-radius:4px}
.hartamas-page-secondary-market-rental-sales .sm-offer li{position:relative;padding:14px 0 14px 24px;font-size:16px;line-height:1.5;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line)}
.hartamas-page-secondary-market-rental-sales .sm-offer li:last-child{border-bottom:none;padding-bottom:0}
.hartamas-page-secondary-market-rental-sales .sm-offer li:first-child{padding-top:0}
.hartamas-page-secondary-market-rental-sales .sm-offer li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;background:var(--mint);border-radius:50%}
.hartamas-page-secondary-market-rental-sales .sm-offer li:first-child::before{top:7px}

/* Guide icons are solid black SVGs, so these cards stay light. */
.hartamas-page-secondary-market-rental-sales .sm-guides{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hartamas-page-secondary-market-rental-sales .sm-guide{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:32px 26px 28px;text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center;transition:.35s}
.hartamas-page-secondary-market-rental-sales .sm-guide:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-secondary-market-rental-sales .sm-guide img{width:56px;height:56px;object-fit:contain;display:block;margin-bottom:18px}
.hartamas-page-secondary-market-rental-sales .sm-guide h3{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:14px}
.hartamas-page-secondary-market-rental-sales .sm-guide .go{margin-top:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:.35s}
.hartamas-page-secondary-market-rental-sales .sm-guide:hover .go{color:var(--ink)}
.hartamas-page-secondary-market-rental-sales .sm-guide .go::after{content:" \2192"}

.hartamas-page-secondary-market-rental-sales .sm-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hartamas-page-secondary-market-rental-sales .sm-tool{background:var(--paper-2);border-radius:4px;padding:34px 28px;display:flex;flex-direction:column;align-items:flex-start;transition:.35s}
.hartamas-page-secondary-market-rental-sales .sm-tool:hover{background:#fff;box-shadow:var(--shadow)}
.hartamas-page-secondary-market-rental-sales .sm-tool h3{font-size:19px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:22px}
.hartamas-page-secondary-market-rental-sales .sm-tool .btn{margin-top:auto}

.hartamas-page-secondary-market-rental-sales .sm-cta{text-align:center;max-width:680px}
.hartamas-page-secondary-market-rental-sales .sm-cta .eyebrow{display:block}
.hartamas-page-secondary-market-rental-sales .sm-cta .eyebrow::before{margin:0 auto}
.hartamas-page-secondary-market-rental-sales .sm-cta .btn{margin-top:28px}

@media(max-width:1100px){
.hartamas-page-secondary-market-rental-sales .sm-guides{grid-template-columns:repeat(3,1fr)}
.hartamas-page-secondary-market-rental-sales .sm-tool-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-secondary-market-rental-sales .sm-intro-grid{grid-template-columns:1fr;gap:38px}
}
@media(max-width:820px){
.hartamas-page-secondary-market-rental-sales .sm-guides{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.hartamas-page-secondary-market-rental-sales .sm-guides{grid-template-columns:1fr}
.hartamas-page-secondary-market-rental-sales .sm-tool-grid{grid-template-columns:1fr}
}

/* ---- from buyer-guide ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

.hartamas-page-buyer-guide .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/buyer-guide-768x512.jpg')}
@media(min-width:701px){
.hartamas-page-buyer-guide .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/buyer-guide-1024x683.jpg')}
}
@media(min-width:1201px){
.hartamas-page-buyer-guide .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/buyer-guide-1536x1024.jpg')}
}

/* An ordered list carries the sequence; the numerals are drawn from the data so
   they match the source exactly, and the list's own markers are suppressed. */
.hartamas-page-buyer-guide .bg-list{list-style:none;counter-reset:none;max-width:980px}
.hartamas-page-buyer-guide .bg-step{display:grid;grid-template-columns:240px 1fr;gap:38px;align-items:start;padding:34px 0;border-bottom:1px solid var(--line)}
.hartamas-page-buyer-guide .bg-step:first-child{padding-top:0}
.hartamas-page-buyer-guide .bg-step:last-child{border-bottom:none;padding-bottom:0}
.hartamas-page-buyer-guide .bg-step-img img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;border-radius:4px;background:var(--paper-2)}
.hartamas-page-buyer-guide .bg-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--ink);font-size:14px;font-weight:700;margin-bottom:14px}
.hartamas-page-buyer-guide .bg-step-body h3{font-size:23px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:16px}
.hartamas-page-buyer-guide .bg-step-body ul{list-style:none}
.hartamas-page-buyer-guide .bg-step-body li{position:relative;padding:9px 0 9px 22px;font-size:15.5px;line-height:1.65;color:var(--muted);font-weight:300}
.hartamas-page-buyer-guide .bg-step-body li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:7px;background:var(--mint);border-radius:50%}

.hartamas-page-buyer-guide .bg-tools{background:var(--paper-2)}
.hartamas-page-buyer-guide .bg-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hartamas-page-buyer-guide .bg-tool{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px 28px;display:flex;flex-direction:column;align-items:flex-start;transition:.35s}
.hartamas-page-buyer-guide .bg-tool:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-buyer-guide .bg-tool h3{font-size:19px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:22px}
.hartamas-page-buyer-guide .bg-tool .btn{margin-top:auto}

.hartamas-page-buyer-guide .bg-back{text-align:center;max-width:680px}
.hartamas-page-buyer-guide .bg-back .eyebrow{display:block}
.hartamas-page-buyer-guide .bg-back .eyebrow::before{margin:0 auto}
.hartamas-page-buyer-guide .bg-back .btn{margin-top:28px}

@media(max-width:1100px){
.hartamas-page-buyer-guide .bg-tool-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
.hartamas-page-buyer-guide .bg-step{grid-template-columns:1fr;gap:20px}
.hartamas-page-buyer-guide .bg-step-img{max-width:220px}
}
@media(max-width:520px){
.hartamas-page-buyer-guide .bg-tool-grid{grid-template-columns:1fr}
}

/* ---- from tenant-guide ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

.hartamas-page-tenant-guide .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/tenant-guide-768x512.jpg')}
@media(min-width:701px){
.hartamas-page-tenant-guide .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/tenant-guide-1024x683.jpg')}
}
@media(min-width:1201px){
.hartamas-page-tenant-guide .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/tenant-guide-1536x1024.jpg')}
}

/* The icons replace Font Awesome glyphs, so they follow the framework's own
   stroke treatment rather than bringing an icon font along. */
.hartamas-page-tenant-guide .tg-need-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.hartamas-page-tenant-guide .tg-need{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:28px 24px;transition:.35s}
.hartamas-page-tenant-guide .tg-need:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-tenant-guide .tg-need svg{width:32px;height:32px;stroke:var(--mint);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:16px}
.hartamas-page-tenant-guide .tg-need h3{font-size:16px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:10px}
.hartamas-page-tenant-guide .tg-need p{font-size:14px;line-height:1.65;color:var(--muted);font-weight:300}

.hartamas-page-tenant-guide .tg-find{background:var(--paper-2)}
.hartamas-page-tenant-guide .tg-ways{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:56px}
.hartamas-page-tenant-guide .tg-way{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 24px 12px 18px}
.hartamas-page-tenant-guide .tg-way svg{width:22px;height:22px;stroke:var(--mint);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 22px}
.hartamas-page-tenant-guide .tg-way span{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:.01em}

.hartamas-page-tenant-guide .tg-split{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
.hartamas-page-tenant-guide .tg-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:18px}
.hartamas-page-tenant-guide .tg-copy p:last-child{margin-bottom:0}
.hartamas-page-tenant-guide .tg-copy h2{font-size:30px;line-height:1.2;color:var(--ink);margin-bottom:18px}
.hartamas-page-tenant-guide .tg-copy .tg-h2-sp{margin-top:46px}
.hartamas-page-tenant-guide .tg-copy h3{font-size:19px;font-weight:600;color:var(--ink);margin:34px 0 14px}
.hartamas-page-tenant-guide .tg-copy-wide{max-width:980px;margin-top:48px}

.hartamas-page-tenant-guide .tg-deposits{list-style:none;background:var(--paper-2);border-left:3px solid var(--mint);border-radius:0 4px 4px 0;padding:18px 24px;margin-bottom:18px}
.hartamas-page-tenant-guide .tg-deposits li{position:relative;padding:10px 0 10px 20px;font-size:15.5px;line-height:1.6;color:var(--ink);font-weight:400;border-bottom:1px solid var(--line)}
.hartamas-page-tenant-guide .tg-deposits li:last-child{border-bottom:none;padding-bottom:0}
.hartamas-page-tenant-guide .tg-deposits li:first-child{padding-top:0}
.hartamas-page-tenant-guide .tg-deposits li::before{content:"";position:absolute;left:0;top:19px;width:7px;height:7px;background:var(--mint);border-radius:50%}
.hartamas-page-tenant-guide .tg-deposits li:first-child::before{top:9px}

.hartamas-page-tenant-guide .tg-pics{display:grid;gap:20px;position:sticky;top:110px}
.hartamas-page-tenant-guide .tg-pics img{width:100%;height:auto;display:block;border-radius:4px;border:1px solid var(--line)}

.hartamas-page-tenant-guide .tg-money{background:var(--paper-2)}

.hartamas-page-tenant-guide .tg-tool{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;background:var(--green);border-radius:4px;padding:44px 48px}
.hartamas-page-tenant-guide .tg-tool h2{color:#fff;font-size:30px;line-height:1.2;margin-top:8px}
.hartamas-page-tenant-guide .tg-tool .eyebrow{color:var(--mint)}
.hartamas-page-tenant-guide .tg-tool .btn{background:var(--mint);color:var(--ink);border-color:var(--mint);flex:0 0 auto}

.hartamas-page-tenant-guide .tg-back{text-align:center;max-width:680px}
.hartamas-page-tenant-guide .tg-back .eyebrow{display:block}
.hartamas-page-tenant-guide .tg-back .eyebrow::before{margin:0 auto}
.hartamas-page-tenant-guide .tg-back .btn{margin-top:28px}

@media(max-width:1200px){
.hartamas-page-tenant-guide .tg-need-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
.hartamas-page-tenant-guide .tg-split{grid-template-columns:1fr;gap:34px}
.hartamas-page-tenant-guide .tg-pics{position:static;grid-template-columns:1fr 1fr}
.hartamas-page-tenant-guide .tg-need-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-tenant-guide .tg-tool{padding:34px 30px}
.hartamas-page-tenant-guide .tg-tool h2{font-size:25px}
}
@media(max-width:560px){
.hartamas-page-tenant-guide .tg-need-grid{grid-template-columns:1fr}
.hartamas-page-tenant-guide .tg-pics{grid-template-columns:1fr}
.hartamas-page-tenant-guide .tg-copy h2{font-size:25px}
}

/* ---- shared: rate tables, then acquisition-cost ---- */
/* Hand-written, not generated by rebuild_page_css.py: these pages have no
   sibling .html source. Re-running that script would drop this block. */

/* .rate-table is a shared component, not scoped to one page: the article
   tables' styling sits under .post-body and never reaches a page template, and
   the other fee guides need the same table. The name is used nowhere else. */
.rate-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--table-line);border-radius:4px;background:#fff}
.rate-table{width:100%;border-collapse:collapse;font-size:15px}
.rate-table th{background:var(--table-head);color:#fff;font-weight:700;text-align:left;padding:14px 18px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;border-right:1px solid rgba(255,255,255,.12)}
.rate-table th:last-child{border-right:none}
.rate-table td{padding:14px 18px;border:none;border-right:1px solid var(--table-line);border-bottom:1px solid var(--table-line);color:var(--table-ink)}
.rate-table td:last-child{border-right:none}
.rate-table td:first-child{color:var(--ink);font-weight:600}
.rate-table tbody tr:nth-child(even){background:var(--table-band)}
.rate-table tbody tr:last-child td{border-bottom:none}

/* Below the breakpoint each row becomes a card, the header is dropped and each
   cell carries its own label.

   The label is a flex child, not absolutely positioned. Absolute positioning is
   what the article tables use and it works there because their labels are
   short, but a label that wraps to three lines ("Part III - non-citizens &
   foreign companies") escapes a fixed box and lands on top of the next row.
   As a flex row the cell simply grows to fit whatever the label needs.

   The label's min-width is min-content, not 0. With 0 it has no floor,
   so when the value is a long sentence the label absorbs all the leftover
   shrinkage -- it was measured at 35px against a 64px word -- and the word
   paints out of its box and over the value. */
@media(max-width:620px){
.rate-table-wrap{overflow-x:visible;border:none;background:none}
.rate-table thead{display:none}
.rate-table,.rate-table tbody,.rate-table tr{display:block;width:100%}
.rate-table tr{margin-bottom:12px;border:1px solid var(--table-line);border-radius:4px;background:#fff}
.rate-table tbody tr:nth-child(even){background:#fff}
.rate-table td{display:flex;gap:16px;align-items:baseline;justify-content:space-between;width:100%;text-align:right;padding:12px 14px;border-right:none;border-bottom:1px solid var(--table-line)}
.rate-table td::before{content:attr(data-label);flex:1 1 44%;min-width:min-content;text-align:left;font-size:12px;line-height:1.4;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rate-table td:first-child{font-size:15.5px}
.rate-table tbody tr td:last-child{border-bottom:none}
}

.hartamas-page-acquisition-cost .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/malaysian-ringgit-768x512.jpg')}
@media(min-width:701px){
.hartamas-page-acquisition-cost .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/malaysian-ringgit-1024x683.jpg')}
}
@media(min-width:1201px){
.hartamas-page-acquisition-cost .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/malaysian-ringgit-1536x1024.jpg')}
}

.hartamas-page-acquisition-cost .ac-table{max-width:820px;margin-bottom:46px}
.hartamas-page-acquisition-cost .ac-table:last-of-type{margin-bottom:0}
.hartamas-page-acquisition-cost .ac-table h3{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:16px;padding-bottom:12px;border-bottom:3px solid var(--mint);display:inline-block}
.hartamas-page-acquisition-cost .ac-note{max-width:820px;margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;line-height:1.7;color:var(--muted);font-weight:300}

.hartamas-page-acquisition-cost .ac-tools{background:var(--paper-2)}
.hartamas-page-acquisition-cost .ac-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hartamas-page-acquisition-cost .ac-tool{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px 28px;display:flex;flex-direction:column;align-items:flex-start;transition:.35s}
.hartamas-page-acquisition-cost .ac-tool:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-acquisition-cost .ac-tool h3{font-size:19px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:22px}
.hartamas-page-acquisition-cost .ac-tool .btn{margin-top:auto}

.hartamas-page-acquisition-cost .ac-back{text-align:center;max-width:680px}
.hartamas-page-acquisition-cost .ac-back .eyebrow{display:block}
.hartamas-page-acquisition-cost .ac-back .eyebrow::before{margin:0 auto}
.hartamas-page-acquisition-cost .ac-back .btn{margin-top:28px}

@media(max-width:1100px){
.hartamas-page-acquisition-cost .ac-tool-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.hartamas-page-acquisition-cost .ac-tool-grid{grid-template-columns:1fr}
}

/* ---- from real-property-gains-tax-rpgt ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block.
   The rate table itself uses the shared .rate-table component. */

.hartamas-page-real-property-gains-tax-rpgt .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/property-tax-768x512.jpg')}
@media(min-width:701px){
.hartamas-page-real-property-gains-tax-rpgt .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/property-tax-1024x683.jpg')}
}
@media(min-width:1201px){
.hartamas-page-real-property-gains-tax-rpgt .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/property-tax-1536x1024.jpg')}
}

/* Four columns of percentages: the holding period needs the room, the rates
   read better centred and narrow. */
.hartamas-page-real-property-gains-tax-rpgt .rpgt-table{max-width:1000px}
.hartamas-page-real-property-gains-tax-rpgt .rate-table th:not(:first-child),
.hartamas-page-real-property-gains-tax-rpgt .rate-table td:not(:first-child){text-align:center;width:17%}
.hartamas-page-real-property-gains-tax-rpgt .rate-table td:not(:first-child){font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}

.hartamas-page-real-property-gains-tax-rpgt .rpgt-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px;max-width:1000px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-parts div{font-size:13.5px;line-height:1.65;color:var(--muted);font-weight:300;padding-top:16px;border-top:2px solid var(--mint)}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-parts strong{display:block;color:var(--ink);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}

.hartamas-page-real-property-gains-tax-rpgt .rpgt-calc{background:var(--paper-2)}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-split{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-split h2{font-size:32px;line-height:1.15;color:var(--ink);margin:10px 0 16px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-lead{font-family:'Cormorant Garamond',serif;font-size:23px;line-height:1.45;color:var(--ink);margin-bottom:22px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-split p{color:var(--muted);font-weight:300;font-size:16px;line-height:1.75;margin-bottom:16px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-split p strong{color:var(--ink);font-weight:600}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-steps-list{list-style:none;counter-reset:rp;margin-bottom:22px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-steps-list li{counter-increment:rp;position:relative;padding:14px 0 14px 34px;font-size:15.5px;line-height:1.7;color:var(--muted);font-weight:300;border-bottom:1px solid var(--line)}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-steps-list li::before{content:counter(rp);position:absolute;left:0;top:14px;width:22px;height:22px;border-radius:50%;background:var(--mint);color:var(--ink);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-steps-list strong{color:var(--ink);font-weight:600}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-note{font-size:14px!important;padding-top:16px;border-top:1px solid var(--line);margin-bottom:0!important}

.hartamas-page-real-property-gains-tax-rpgt .rpgt-formula{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:32px 30px;position:sticky;top:110px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-f-row span{display:block;font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-f-row em{display:block;font-style:normal;font-size:13px;color:var(--muted);font-weight:300;margin-top:5px;line-height:1.5}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-f-op{font-size:20px;color:var(--mint);font-weight:700;margin:14px 0;line-height:1}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-f-total{padding-top:16px;border-top:1px solid var(--line)}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-f-total span{color:var(--ink)}

.hartamas-page-real-property-gains-tax-rpgt .rpgt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-top:3px solid var(--mint);border-radius:4px;padding:28px 24px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--ink);font-size:13px;font-weight:700;margin-bottom:14px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-step h3{font-size:17px;font-weight:600;color:#fff;line-height:1.3;margin-bottom:10px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-step p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.72);font-weight:300}

.hartamas-page-real-property-gains-tax-rpgt .rpgt-ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-ex{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:30px 28px;transition:.35s}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-ex:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-ex svg{width:34px;height:34px;stroke:var(--mint);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:16px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-ex h3{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:11px;line-height:1.3}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-ex p{font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-source{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.7;color:var(--muted);font-weight:300;max-width:900px}

.hartamas-page-real-property-gains-tax-rpgt .rpgt-tools{background:var(--paper-2)}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-tool{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px 28px;display:flex;flex-direction:column;align-items:flex-start;transition:.35s}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-tool:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-tool h3{font-size:19px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:22px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-tool .btn{margin-top:auto}

.hartamas-page-real-property-gains-tax-rpgt .rpgt-back{text-align:center;max-width:680px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-back .eyebrow{display:block}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-back .eyebrow::before{margin:0 auto}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-back .btn{margin-top:28px}

@media(max-width:1100px){
.hartamas-page-real-property-gains-tax-rpgt .rpgt-steps{grid-template-columns:repeat(2,1fr)}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-tool-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-split{grid-template-columns:1fr;gap:38px}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-formula{position:static}
}
@media(max-width:820px){
.hartamas-page-real-property-gains-tax-rpgt .rpgt-ex-grid{grid-template-columns:1fr}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-parts{grid-template-columns:1fr;gap:16px}
}
@media(max-width:620px){
/* the shared component turns each row into a card; the centring would fight it */
.hartamas-page-real-property-gains-tax-rpgt .rate-table td:not(:first-child){text-align:right;width:auto}
.hartamas-page-real-property-gains-tax-rpgt .rate-table th:not(:first-child){text-align:left;width:auto}
}
@media(max-width:520px){
.hartamas-page-real-property-gains-tax-rpgt .rpgt-steps{grid-template-columns:1fr}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-tool-grid{grid-template-columns:1fr}
.hartamas-page-real-property-gains-tax-rpgt .rpgt-split h2{font-size:26px}
}

/* ---- from epf-withdrawal ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

/* withdrawal.jpg is 1600x1063, so its crops are 768x510 / 1024x680 / 1536x1020,
   not the usual 3:2 sizes. */
.hartamas-page-epf-withdrawal .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/withdrawal-768x510.jpg')}
@media(min-width:701px){
.hartamas-page-epf-withdrawal .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/withdrawal-1024x680.jpg')}
}
@media(min-width:1201px){
.hartamas-page-epf-withdrawal .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/withdrawal-1536x1020.jpg')}
}

.hartamas-page-epf-withdrawal .epf-split{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start}
.hartamas-page-epf-withdrawal .epf-split h2{font-size:32px;line-height:1.15;color:var(--ink);margin:10px 0 16px}
.hartamas-page-epf-withdrawal .epf-lead{font-family:'Cormorant Garamond',serif;font-size:23px;line-height:1.45;color:var(--ink);margin-bottom:20px}
.hartamas-page-epf-withdrawal .epf-split p{color:var(--muted);font-weight:300;font-size:16px;line-height:1.75;margin-bottom:16px}
.hartamas-page-epf-withdrawal .epf-split p:last-child{margin-bottom:0}

.hartamas-page-epf-withdrawal .epf-callout{background:var(--green);border-radius:4px;border-top:3px solid var(--mint);padding:32px 30px}
.hartamas-page-epf-withdrawal .epf-callout h3{color:#fff;font-size:19px;font-weight:600;line-height:1.3;margin-bottom:12px}
.hartamas-page-epf-withdrawal .epf-callout p{color:rgba(255,255,255,.74);font-size:14.5px;line-height:1.7;font-weight:300;margin:0}
.hartamas-page-epf-withdrawal .epf-callout strong{color:var(--mint);font-weight:600}

.hartamas-page-epf-withdrawal .epf-elig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hartamas-page-epf-withdrawal .epf-elig{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:28px 26px;transition:.35s}
.hartamas-page-epf-withdrawal .epf-elig:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-epf-withdrawal .epf-elig h3{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:10px}
.hartamas-page-epf-withdrawal .epf-elig p{font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300}

/* The cells hold sentences, so the first column is pinned narrow and the two
   wide columns share what is left. */
.hartamas-page-epf-withdrawal .epf-table{max-width:1080px}
.hartamas-page-epf-withdrawal .rate-table th:first-child,.hartamas-page-epf-withdrawal .rate-table td:first-child{width:19%}
.hartamas-page-epf-withdrawal .rate-table td{font-size:14.5px;line-height:1.65}
.hartamas-page-epf-withdrawal .epf-note{max-width:1080px;margin-top:24px;font-size:14px;line-height:1.7;color:var(--muted);font-weight:300}

.hartamas-page-epf-withdrawal .epf-detail{background:var(--paper-2)}
.hartamas-page-epf-withdrawal .epf-two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.hartamas-page-epf-withdrawal .epf-two h2{font-size:26px;line-height:1.2;color:var(--ink);margin-bottom:12px}
.hartamas-page-epf-withdrawal .epf-two > div > p{color:var(--muted);font-weight:300;font-size:15.5px;line-height:1.7;margin-bottom:18px}
.hartamas-page-epf-withdrawal .epf-list{list-style:none;background:#fff;border-radius:4px;border-left:3px solid var(--mint);padding:20px 24px}
.hartamas-page-epf-withdrawal .epf-list li{position:relative;padding:12px 0 12px 20px;font-size:14.5px;line-height:1.65;color:var(--muted);font-weight:300;border-bottom:1px solid var(--line)}
.hartamas-page-epf-withdrawal .epf-list li:last-child{border-bottom:none;padding-bottom:0}
.hartamas-page-epf-withdrawal .epf-list li:first-child{padding-top:0}
.hartamas-page-epf-withdrawal .epf-list li::before{content:"";position:absolute;left:0;top:20px;width:7px;height:7px;background:var(--mint);border-radius:50%}
.hartamas-page-epf-withdrawal .epf-list li:first-child::before{top:8px}
.hartamas-page-epf-withdrawal .epf-warn{margin-top:20px;padding:16px 18px;background:#fff;border-left:3px solid var(--callout);border-radius:0 4px 4px 0;font-size:13.5px!important;line-height:1.7;color:var(--ink)!important;margin-bottom:0!important}

.hartamas-page-epf-withdrawal .epf-other-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.hartamas-page-epf-withdrawal .epf-other{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-top:3px solid var(--mint);border-radius:4px;padding:26px 22px;text-decoration:none;display:flex;flex-direction:column;transition:.35s}
.hartamas-page-epf-withdrawal .epf-other:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.hartamas-page-epf-withdrawal .epf-other h3{font-size:15.5px;font-weight:600;color:#fff;line-height:1.3;margin-bottom:9px}
.hartamas-page-epf-withdrawal .epf-other p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.66);font-weight:300;margin-bottom:16px}
.hartamas-page-epf-withdrawal .epf-other .go{margin-top:auto;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.hartamas-page-epf-withdrawal .epf-other .go::after{content:" \2197"}
.hartamas-page-epf-withdrawal .epf-source{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.6);font-weight:300;max-width:900px}
.hartamas-page-epf-withdrawal .epf-source a{color:var(--mint);border-bottom:1px solid rgba(255,222,0,.4)}

.hartamas-page-epf-withdrawal .epf-tools{background:var(--paper-2)}
.hartamas-page-epf-withdrawal .epf-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hartamas-page-epf-withdrawal .epf-tool{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px 28px;display:flex;flex-direction:column;align-items:flex-start;transition:.35s}
.hartamas-page-epf-withdrawal .epf-tool:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-epf-withdrawal .epf-tool h3{font-size:19px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:22px}
.hartamas-page-epf-withdrawal .epf-tool .btn{margin-top:auto}

.hartamas-page-epf-withdrawal .epf-back{text-align:center;max-width:680px}
.hartamas-page-epf-withdrawal .epf-back .eyebrow{display:block}
.hartamas-page-epf-withdrawal .epf-back .eyebrow::before{margin:0 auto}
.hartamas-page-epf-withdrawal .epf-back .btn{margin-top:28px}

@media(max-width:1200px){
.hartamas-page-epf-withdrawal .epf-other-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1100px){
.hartamas-page-epf-withdrawal .epf-split{grid-template-columns:1fr;gap:34px}
.hartamas-page-epf-withdrawal .epf-two{grid-template-columns:1fr;gap:40px}
.hartamas-page-epf-withdrawal .epf-elig-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-epf-withdrawal .epf-tool-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
.hartamas-page-epf-withdrawal .epf-other-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
/* the shared component turns each row into a card; the pinned width fights it */
.hartamas-page-epf-withdrawal .rate-table th:first-child,.hartamas-page-epf-withdrawal .rate-table td:first-child{width:auto}
/* These cells hold sentences, not figures. Side by side, the value gets
   about 200px and rags badly (168px tall per cell); stacked it gets the
   full width and comes back to 142px. Scoped here because the other
   three tables using this component hold short numbers, where the
   two-column card is the more scannable of the two. */
.hartamas-page-epf-withdrawal .rate-table td{display:block;text-align:left}
.hartamas-page-epf-withdrawal .rate-table td::before{display:block;margin-bottom:5px}
}
@media(max-width:520px){
.hartamas-page-epf-withdrawal .epf-elig-grid{grid-template-columns:1fr}
.hartamas-page-epf-withdrawal .epf-other-grid{grid-template-columns:1fr}
.hartamas-page-epf-withdrawal .epf-tool-grid{grid-template-columns:1fr}
.hartamas-page-epf-withdrawal .epf-split h2{font-size:26px}
}

/* ---- from professional-fees ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

/* professional.jpg is 1600x1068, so its crops are 768x513 / 1024x684 /
   1536x1025 rather than the usual 3:2 sizes. */
.hartamas-page-professional-fees .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/professional-768x513.jpg')}
@media(min-width:701px){
.hartamas-page-professional-fees .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/professional-1024x684.jpg')}
}
@media(min-width:1201px){
.hartamas-page-professional-fees .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/professional-1536x1025.jpg')}
}

.hartamas-page-professional-fees .pf-band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1080px}
.hartamas-page-professional-fees .pf-band{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:30px 28px;transition:.35s}
.hartamas-page-professional-fees .pf-band:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-professional-fees .pf-rate{display:block;font-family:'Cormorant Garamond',serif;font-size:34px;line-height:1;color:var(--ink);margin-bottom:14px}
.hartamas-page-professional-fees .pf-band p{font-size:14.5px;line-height:1.65;color:var(--muted);font-weight:300}

.hartamas-page-professional-fees .pf-notes{list-style:none;max-width:1080px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.hartamas-page-professional-fees .pf-notes li{position:relative;padding:9px 0 9px 22px;font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300}
.hartamas-page-professional-fees .pf-notes li::before{content:"";position:absolute;left:0;top:18px;width:7px;height:7px;background:var(--mint);border-radius:50%}
.hartamas-page-professional-fees .pf-notes strong{color:var(--ink);font-weight:600}

.hartamas-page-professional-fees .pf-table{max-width:1080px}
/* the valuation table's middle column is the Board's fraction: narrow, centred
   and tabular so it reads as a figure rather than as prose */
.hartamas-page-professional-fees .pf-val .rate-table th:not(:first-child),
.hartamas-page-professional-fees .pf-val .rate-table td:not(:first-child){text-align:center;width:22%;font-variant-numeric:tabular-nums}
.hartamas-page-professional-fees .pf-val .rate-table td:last-child{font-weight:700;color:var(--ink)}

.hartamas-page-professional-fees .pf-val{background:var(--paper-2)}

.hartamas-page-professional-fees .pf-claim-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hartamas-page-professional-fees .pf-claim{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-top:3px solid var(--mint);border-radius:4px;padding:28px 24px}
.hartamas-page-professional-fees .pf-claim h3{font-size:16.5px;font-weight:600;color:#fff;line-height:1.3;margin-bottom:11px}
.hartamas-page-professional-fees .pf-claim p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.72);font-weight:300}
.hartamas-page-professional-fees .pf-claim-note{margin-top:26px;padding:18px 20px;background:rgba(255,255,255,.05);border-left:3px solid var(--mint);border-radius:0 4px 4px 0;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.8);font-weight:300;max-width:1000px}
.hartamas-page-professional-fees .pf-source{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.6);font-weight:300;max-width:1000px}

.hartamas-page-professional-fees .pf-tools{background:var(--paper-2)}
.hartamas-page-professional-fees .pf-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hartamas-page-professional-fees .pf-tool{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px 28px;display:flex;flex-direction:column;align-items:flex-start;transition:.35s}
.hartamas-page-professional-fees .pf-tool:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-professional-fees .pf-tool h3{font-size:19px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:22px}
.hartamas-page-professional-fees .pf-tool .btn{margin-top:auto}

.hartamas-page-professional-fees .pf-back{text-align:center;max-width:680px}
.hartamas-page-professional-fees .pf-back .eyebrow{display:block}
.hartamas-page-professional-fees .pf-back .eyebrow::before{margin:0 auto}
.hartamas-page-professional-fees .pf-back .btn{margin-top:28px}

@media(max-width:1100px){
.hartamas-page-professional-fees .pf-claim-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-professional-fees .pf-tool-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
.hartamas-page-professional-fees .pf-band-grid{grid-template-columns:1fr}
.hartamas-page-professional-fees .pf-rate{font-size:29px}
}
@media(max-width:620px){
/* the shared component turns each row into a card; the pinned widths and the
   centring would fight it */
.hartamas-page-professional-fees .pf-val .rate-table th:not(:first-child),
.hartamas-page-professional-fees .pf-val .rate-table td:not(:first-child){text-align:right;width:auto}
}
@media(max-width:520px){
.hartamas-page-professional-fees .pf-claim-grid{grid-template-columns:1fr}
.hartamas-page-professional-fees .pf-tool-grid{grid-template-columns:1fr}
}

/* ---- from loan-application-process ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

/* signature-paper.jpg is 1600x1068, so its crops are 768x513 / 1024x684 /
   1536x1025, not the usual 3:2 sizes. */
.hartamas-page-loan-application-process .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/signature-paper-768x513.jpg')}
@media(min-width:701px){
.hartamas-page-loan-application-process .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/signature-paper-1024x684.jpg')}
}
@media(min-width:1201px){
.hartamas-page-loan-application-process .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/signature-paper-1536x1025.jpg')}
}

/* A timeline: the numbers sit in a fixed gutter with a rule running behind
   them, so the eye follows one line down the ten steps. */
.hartamas-page-loan-application-process .lap-list{list-style:none;max-width:900px;position:relative}
.hartamas-page-loan-application-process .lap-list::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:1px;background:var(--line)}
.hartamas-page-loan-application-process .lap-step{display:grid;grid-template-columns:48px 1fr;gap:26px;align-items:start;padding-bottom:30px}
.hartamas-page-loan-application-process .lap-step:last-child{padding-bottom:0}
.hartamas-page-loan-application-process .lap-marker{position:relative;z-index:1}
.hartamas-page-loan-application-process .lap-n{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--mint);color:var(--ink);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}

.hartamas-page-loan-application-process .lap-body{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px 26px;transition:.35s}
.hartamas-page-loan-application-process .lap-step:hover .lap-body{border-color:var(--mint)}

.hartamas-page-loan-application-process .lap-block+.lap-block{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.hartamas-page-loan-application-process .lap-when{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink);background:var(--paper-2);border-radius:999px;padding:7px 14px 7px 11px;margin-bottom:14px}
.hartamas-page-loan-application-process .lap-when svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 15px}

.hartamas-page-loan-application-process .lap-parts{margin:0}
/* label over value, the same treatment .ci uses in the contact blocks -- the
   brand yellow is unreadable as small text on white, so the label is muted and
   the detail carries the weight */
.hartamas-page-loan-application-process .lap-parts dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:5px}
.hartamas-page-loan-application-process .lap-parts dd{margin:0 0 14px;font-size:15.5px;line-height:1.65;color:var(--muted);font-weight:300}
.hartamas-page-loan-application-process .lap-parts dd:last-child{margin-bottom:0}
.hartamas-page-loan-application-process .lap-parts dt+dd{color:var(--ink);font-weight:400}

.hartamas-page-loan-application-process .lap-alt{margin-top:14px;font-size:12.5px;letter-spacing:.02em;color:var(--muted);font-weight:300;font-style:italic}
.hartamas-page-loan-application-process .lap-note{max-width:900px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;line-height:1.7;color:var(--muted);font-weight:300}

.hartamas-page-loan-application-process .lap-tools{background:var(--paper-2)}
.hartamas-page-loan-application-process .lap-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hartamas-page-loan-application-process .lap-tool{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px 28px;display:flex;flex-direction:column;align-items:flex-start;transition:.35s}
.hartamas-page-loan-application-process .lap-tool:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-loan-application-process .lap-tool h3{font-size:19px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:22px}
.hartamas-page-loan-application-process .lap-tool .btn{margin-top:auto}

.hartamas-page-loan-application-process .lap-back{text-align:center;max-width:680px}
.hartamas-page-loan-application-process .lap-back .eyebrow{display:block}
.hartamas-page-loan-application-process .lap-back .eyebrow::before{margin:0 auto}
.hartamas-page-loan-application-process .lap-back .btn{margin-top:28px}

@media(max-width:1100px){
.hartamas-page-loan-application-process .lap-tool-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
/* the gutter costs too much width on a phone: the number sits above the card
   and the connecting rule comes off, since there is nothing left to connect */
.hartamas-page-loan-application-process .lap-list::before{display:none}
.hartamas-page-loan-application-process .lap-step{grid-template-columns:1fr;gap:12px}
.hartamas-page-loan-application-process .lap-n{width:40px;height:40px;font-size:15px}
.hartamas-page-loan-application-process .lap-body{padding:20px 20px}
}
@media(max-width:520px){
.hartamas-page-loan-application-process .lap-tool-grid{grid-template-columns:1fr}
}

/* ---- from career-talk ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

/* The only art is the event poster. The square crop is the poster itself; the
   1200x630 share version is the one that works behind the hero. */
.hartamas-page-career-talk .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/08/career-talk.webp')}

.hartamas-page-career-talk .ct-grid{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:60px;align-items:start}
.hartamas-page-career-talk .ct-poster{position:sticky;top:110px}
.hartamas-page-career-talk .ct-poster img{width:100%;height:auto;display:block;border-radius:4px;border:1px solid var(--line)}

.hartamas-page-career-talk .ct-when{margin-top:22px;background:var(--green);border-top:3px solid var(--mint);border-radius:4px;padding:24px 26px}
.hartamas-page-career-talk .ct-line{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82);font-weight:300}
.hartamas-page-career-talk .ct-line strong{color:#fff;font-weight:600;font-size:17px}
.hartamas-page-career-talk .ct-line a{color:var(--mint);border-bottom:1px solid rgba(255,222,0,.4)}
.hartamas-page-career-talk .ct-free{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);font-weight:700}

/* The past state is deliberately plain: no yellow, nothing that reads as a
   call to action for something that is over. */
.hartamas-page-career-talk .ct-when-past{background:var(--paper-2);border-top-color:var(--line)}
.hartamas-page-career-talk .ct-when-past .ct-line{color:var(--muted)}
.hartamas-page-career-talk .ct-flag{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);margin-bottom:10px}

.hartamas-page-career-talk .ct-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.8;margin-bottom:18px}
.hartamas-page-career-talk .ct-lead{font-family:'Cormorant Garamond',serif;font-size:25px!important;line-height:1.4!important;color:var(--ink)!important;font-weight:400!important;margin-bottom:24px!important}
.hartamas-page-career-talk .ct-lead strong{font-weight:400}
.hartamas-page-career-talk .ct-speaker{margin-top:34px;padding:28px 30px;background:var(--paper-2);border-left:3px solid var(--mint);border-radius:0 4px 4px 0}
.hartamas-page-career-talk .ct-speaker p:last-child{margin-bottom:0}

.hartamas-page-career-talk .ct-form{margin-top:38px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:34px 32px}
.hartamas-page-career-talk .ct-form h3{font-size:23px;font-weight:600;color:var(--ink);margin-bottom:6px}
.hartamas-page-career-talk .ct-form-sub{font-size:14.5px!important;color:var(--muted);margin-bottom:24px!important}
.hartamas-page-career-talk .ct-form .btn{width:100%;justify-content:center;margin-top:8px}
.hartamas-page-career-talk .ct-msg{margin-top:14px!important;margin-bottom:0!important;text-align:center;font-size:14px!important;font-weight:600!important;min-height:20px}
.hartamas-page-career-talk .ct-msg.ok{color:#1c7c3c!important}
.hartamas-page-career-talk .ct-msg.err{color:#b3261e!important}

.hartamas-page-career-talk .ct-closed{margin-top:38px;background:var(--paper-2);border-radius:4px;padding:32px 30px}
.hartamas-page-career-talk .ct-closed h3{font-size:21px;font-weight:600;color:var(--ink);margin-bottom:10px}
.hartamas-page-career-talk .ct-closed p{margin-bottom:22px}

.hartamas-page-career-talk .ct-back{text-align:center;max-width:680px}
.hartamas-page-career-talk .ct-back .eyebrow{display:block}
.hartamas-page-career-talk .ct-back .eyebrow::before{margin:0 auto}
.hartamas-page-career-talk .ct-back .btn{margin-top:28px}

@media(max-width:940px){
.hartamas-page-career-talk .ct-grid{grid-template-columns:1fr;gap:36px}
.hartamas-page-career-talk .ct-poster{position:static;max-width:420px}
}
@media(max-width:520px){
.hartamas-page-career-talk .ct-lead{font-size:21px!important}
.hartamas-page-career-talk .ct-form{padding:26px 22px}
.hartamas-page-career-talk .ct-speaker{padding:22px 22px}
}

/* ---- from privacy-policy ---- */
/* Hand-written, not generated by rebuild_page_css.py: this page has no
   sibling .html source. Re-running that script would drop this block. */

/* privacy-policy.jpg is 3:2, so its crop ladder is 768x512 / 1024x683 /
   1536x1024 -- not the 16:9 sizes the other heroes use. Checked each one
   returns 200; there is no 2048 crop. */
.hartamas-page-privacy-policy .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/privacy-policy-768x512.jpg')}
@media(min-width:701px){
.hartamas-page-privacy-policy .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/privacy-policy-1024x683.jpg')}
}
@media(min-width:1201px){
.hartamas-page-privacy-policy .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2022/09/privacy-policy-1536x1024.jpg')}
}

.hartamas-page-privacy-policy .pp-grid{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:70px;align-items:start}

.hartamas-page-privacy-policy .pp-toc{position:sticky;top:110px;background:var(--paper-2);border-top:3px solid var(--mint);border-radius:4px;padding:26px 26px 22px}
.hartamas-page-privacy-policy .pp-toc h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink);margin-bottom:16px}
.hartamas-page-privacy-policy .pp-toc ol{list-style:none;counter-reset:none}
.hartamas-page-privacy-policy .pp-toc li{border-top:1px solid var(--line)}
.hartamas-page-privacy-policy .pp-toc li:first-child{border-top:none}
.hartamas-page-privacy-policy .pp-toc a{display:flex;gap:10px;align-items:baseline;padding:9px 0;font-size:13.5px;line-height:1.45;color:var(--muted);font-weight:300;text-decoration:none;transition:.25s}
.hartamas-page-privacy-policy .pp-toc a:hover{color:var(--ink)}
.hartamas-page-privacy-policy .pp-toc-n{flex:0 0 18px;font-size:11px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.hartamas-page-privacy-policy .pp-issued{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--muted);font-weight:300}

/* A legal notice is read line by line, so the measure stays narrow and the
   type a shade larger than the marketing pages. */
.hartamas-page-privacy-policy .pp-main{max-width:760px}
.hartamas-page-privacy-policy .pp-main p{color:var(--muted);font-weight:300;font-size:16px;line-height:1.8;margin-bottom:18px}
.hartamas-page-privacy-policy .pp-intro p:first-child{font-family:'Cormorant Garamond',serif;font-size:22px;line-height:1.55;color:var(--ink);font-weight:400}
.hartamas-page-privacy-policy .pp-intro{padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--line)}

.hartamas-page-privacy-policy .pp-clause{padding-top:34px;scroll-margin-top:100px}
.hartamas-page-privacy-policy .pp-clause h2{display:flex;gap:14px;align-items:baseline;font-size:20px;line-height:1.3;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.hartamas-page-privacy-policy .pp-n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 7px;border-radius:3px;background:var(--mint);color:var(--ink);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

.hartamas-page-privacy-policy .pp-list{list-style:none;margin:0 0 18px}
.hartamas-page-privacy-policy .pp-list li{position:relative;padding:8px 0 8px 22px;font-size:15.5px;line-height:1.75;color:var(--muted);font-weight:300}
.hartamas-page-privacy-policy .pp-list li::before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;background:var(--mint);border-radius:50%}

.hartamas-page-privacy-policy .pp-contact{background:var(--paper-2);border-left:3px solid var(--mint);border-radius:0 4px 4px 0;padding:22px 24px;margin-bottom:18px}
.hartamas-page-privacy-policy .pp-c-line{font-size:15px;line-height:1.75;color:var(--muted);font-weight:300}
.hartamas-page-privacy-policy .pp-c-line:first-child{font-weight:700;color:var(--ink);font-size:15.5px;margin-bottom:6px}
.hartamas-page-privacy-policy .pp-c-line a{color:var(--ink);border-bottom:1px solid var(--mint)}
/* "Address:", "Contact No.:", "Email Address:" -- the field name, not the value */
.hartamas-page-privacy-policy .pp-c-label{color:var(--ink);font-weight:600}

.hartamas-page-privacy-policy .pp-credit{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px!important;color:var(--muted)}

@media(max-width:940px){
.hartamas-page-privacy-policy .pp-grid{grid-template-columns:1fr;gap:34px}
.hartamas-page-privacy-policy .pp-toc{position:static}
.hartamas-page-privacy-policy .pp-main{max-width:none}
}
@media(max-width:520px){
.hartamas-page-privacy-policy .pp-clause h2{font-size:17px;gap:10px}
.hartamas-page-privacy-policy .pp-intro p:first-child{font-size:19px}
.hartamas-page-privacy-policy .pp-contact{padding:18px 18px}
}

/* ---- header: Services mega menu ---- */
/* Unscoped: the header appears on every page, so these cannot hang off a
   .hartamas-page-* class. The names are new and unused elsewhere.

   The panel hangs off the header, not off the toggle. .has-dd is
   position:relative, so a panel inside it is measured from the "Services" link
   -- which sits near the left of the bar, so a wide panel runs off the right
   edge as the window narrows. Making this one item static hands the containing
   block to #header, which is position:fixed and spans the viewport, so the
   panel centres on the bar and cannot reach past either edge. Width is a
   percentage of that header rather than 100vw, which also avoids 100vw
   counting the scrollbar. */
.has-dd.has-mega{position:static}

/* .dd-menu centres itself with translateX(-50%) and .has-dd:hover restates that
   transform, so both rules below carry .mega to outrank them on specificity
   rather than on source order. */
.dd-menu.mega{
  left:50%;right:auto;
  transform:translateX(-50%) translateY(10px);
  /* Plain width plus a max-width clamp, not min(760px, calc(100% - 32px)).
     The nested calc inside min() was being dropped here -- width fell back to
     shrink-to-fit and the panel sized itself to its content, which is how it
     ended up overflowing. These two do the same job with nothing to parse
     wrongly. */
  width:760px;
  max-width:calc(100% - 32px);
  min-width:0;
  padding:30px 34px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px;
}
.has-dd:hover .dd-menu.mega{transform:translateX(-50%) translateY(0)}

.dd-menu.mega .mega-col{min-width:0}
.dd-menu.mega .mega-h{
  display:block;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:#fff;
  padding-bottom:12px;margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.dd-menu.mega a{
  padding:8px 0;
  white-space:normal;          /* the one-column dropdowns keep a line; these wrap */
  line-height:1.4;
}

/* 680px is where the framework swaps to the burger nav (.nav-links{display:none}),
   so the panel's desktop and mobile treatments split on the same number. An
   invented breakpoint would leave a band where the desktop bar is still showing
   but the panel has already gone flat. */
@media(min-width:681px){
  .dd-menu.mega{
    background:var(--green-900);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:var(--shadow);
  }
}

/* A two-column panel (Grow With Us) hangs under its own toggle. Centring it on the
   bar, as the three-column Services panel is, left it well to the left of a toggle
   that sits near the right of the bar. Its parent is the small .has-dd, so the
   max-width clamp above (a % of the header) has to be lifted here. */
@media(min-width:681px){
  .dd-menu.mega.mega-2{width:480px;max-width:none;grid-template-columns:repeat(2,1fr)}
}

/* Narrower desktops: three columns stop fitting before the burger takes over,
   so the third wraps underneath. Only the column count changes -- the panel
   keeps its 760px and the max-width clamp above is what keeps it on screen,
   which is the behaviour actually measured at 1085, 985 and 700 CSS px. */
@media(max-width:1100px) and (min-width:681px){
  .dd-menu.mega{grid-template-columns:repeat(2,1fr)}
}

/* Mobile: .dd-menu is already static inside the open nav, so the panel only has
   to stop being a grid and let the headings separate the groups. */
@media(max-width:680px){
  .dd-menu.mega{
    display:block;width:auto;max-width:none;padding:0;left:auto;
    background:transparent;border:none;box-shadow:none;transform:none;
  }
  .dd-menu.mega .mega-col{margin-bottom:6px}
  .dd-menu.mega .mega-h{
    color:var(--mint);
    padding:12px 0 6px;margin-bottom:0;
    border-bottom:none;
  }
}

/* ---- contact: Hartamas Group of Companies ---- */
/* Hand-written, not generated by rebuild_page_css.py. Scoped to the Contact page
   (moved there from About);
   the names avoid .grp, which architectural-consultancy already uses. */

.hartamas-page-contact .gco{background:var(--paper-2)}

.hartamas-page-contact .gco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hartamas-page-contact .gco-card{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);
  border-radius:4px;padding:26px 26px 22px;transition:.35s;
}
.hartamas-page-contact .gco-card:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-contact .gco-card h3{
  font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1.4;
  color:var(--ink);text-transform:uppercase;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.hartamas-page-contact .gco-card ul{list-style:none;margin:0}
.hartamas-page-contact .gco-card li{
  font-size:13.5px;line-height:1.65;color:var(--muted);font-weight:300;
  padding:6px 0;
}
.hartamas-page-contact .gco-card a{color:var(--muted);transition:.2s}
.hartamas-page-contact .gco-card a:hover{color:var(--ink)}

/* An address is the long line and reads as text; the rest are contact details
   and read as links, so they get the weight and the underline. */
.hartamas-page-contact .gco-address{padding-bottom:10px!important}
/* a branch heading inside a card (HQ, Johor Bharu Branch ...) */
.hartamas-page-contact .gco-label{padding:10px 0 0!important;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.hartamas-page-contact .gco-label:first-child{padding-top:0!important}
.hartamas-page-contact .gco-label+.gco-address{padding-top:2px}
.hartamas-page-contact .gco-email a,
.hartamas-page-contact .gco-phone a,
.hartamas-page-contact .gco-site a{
  color:var(--ink);font-weight:500;border-bottom:1px solid var(--mint);
}
.hartamas-page-contact .gco-email a:hover,
.hartamas-page-contact .gco-phone a:hover,
.hartamas-page-contact .gco-site a:hover{color:var(--muted)}
.hartamas-page-contact .gco-site a{word-break:break-all}

@media(max-width:1100px){
  .hartamas-page-contact .gco-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .hartamas-page-contact .gco-grid{grid-template-columns:1fr}
}

/* ---- property guides: hero ---- */
/* Property Guides is the Posts page, so it is is_home() and never gets a
   .hartamas-page-* body class. home.php carries .hero-guides on the section
   instead, and the art matches property-guides.html.

   author.php carries the same class, on purpose: an author archive is the same
   guides, filtered to one writer, so it reads as part of that section rather
   than as a page of its own. It adds .hero-author for the layout only. */
.hero-guides{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/09/property-guides-768x512.webp')}
@media(min-width:701px){
.hero-guides{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/09/property-guides-1024x682.webp')}
}
@media(min-width:1201px){
.hero-guides{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/09/property-guides-1536x1023.webp')}
}

/* ---- header: mobile nav, collapsed dropdowns + scroll ---- */
/* Hand-written. Appended deliberately at the end of the file: the closed state
   below ties with .dd-menu.mega on specificity and only wins on source order. */
@media(max-width:680px){

  /* The burger panel gets its own scroller. Without this the overflow is not
     just hidden, it is unreachable -- the panel is fixed, so it adds nothing
     to the document height for the page to scroll to. */
  .nav-links.open{
    max-height:calc(100vh - 78px);
    max-height:calc(100dvh - 78px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  /* Closed by default, which is the state mobile never had. */
  .has-dd .dd-menu{display:none}
  .has-dd.open .dd-menu{display:block}

  /* The caret cannot rotate -- it is a text glyph inside the label -- so the
     open group is marked by colour instead. */
  .has-dd.open > .dd-toggle{color:var(--mint)}

  /* STICKY :hover. A tap on a touch screen leaves the element in :hover until
     something else is tapped, so these two desktop rules keep firing here:

       .has-dd:hover .dd-menu       {transform:translateX(-50%) translateY(0)}   (0,3,0)
       .has-dd:hover .dd-menu.mega  {transform:translateX(-50%) translateY(0)}   (0,3,0)

     The flat mobile layout declares transform:none at (0,1,0) and (0,2,0), so
     it loses on specificity no matter where it is written -- source order never
     enters into it. The panel is then slid half its own width to the left and
     its first ~90px sit off the screen edge.

     Restated here with .nav-links in front, which puts them at (0,4,0) and
     (0,5,0) -- above anything :hover can reach. */
  .nav-links .has-dd:hover .dd-menu,
  .nav-links .has-dd:hover .dd-menu.mega,
  .nav-links .has-dd.open .dd-menu{transform:none;left:auto}

  /* .has-dd is a flex column with align-items:flex-start, so the submenu was
     shrink-to-fit -- 182px of it against full-width top-level items, which is
     the short underlines in the screenshot. box-sizing is border-box globally,
     so the 14px indent stays inside the 100%. */
  .nav-links .has-dd .dd-menu{width:100%}
}

/* ---- buyer guide: inline links in the step bullets ---- */
/* Bullets are var(--muted); without this an anchor inherits that and reads as
   plain text. Same treatment the About and Privacy pages use for inline links. */
.hartamas-page-buyer-guide .bg-step-body li a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--mint);transition:.2s}
.hartamas-page-buyer-guide .bg-step-body li a:hover{color:var(--muted)}

/* ---- author archive ---- */
/* Hand-written, no sibling .html source. Everything else on this page -- the
   hero, .res cards, the pagination -- is the Property Guides furniture reused
   as-is; these rules are only the author identity block that page does not
   have. */

.hero-author .au-id{display:flex;gap:26px;align-items:flex-start}

/* Initials, not a Gravatar: see the note in author.php. flex:0 0 so the circle
   never squashes when a long display name wraps beside it. */
.hero-author .au-avatar{
  flex:0 0 76px;width:76px;height:76px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mint);color:var(--ink);
  font-size:26px;font-weight:700;letter-spacing:.04em;line-height:1;
  margin-top:6px;
}
.hero-author .au-who{min-width:0}
.hero-author h1{margin:18px 0 16px}
.hero-author .au-bio{margin-bottom:14px}

/* The count is quieter than the bio -- it is a fact about the page, not a
   sentence someone wrote. */
.hero-author .au-count{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:500;
}
.hero-author .au-count a{color:var(--mint);border-bottom:1px solid rgba(255,222,0,.4)}

.au-archive{background:var(--paper)}
/* .arch-note is unstyled at framework level; it only shows when a writer has
   published nothing, which is exactly when it should not look broken. */
.au-archive .arch-note{font-size:15.5px;color:var(--muted);font-weight:300;text-align:center;padding:10px 0 4px}
.au-back{margin-top:54px;padding-top:34px;border-top:1px solid var(--line);text-align:center}

@media(max-width:560px){
  .hero-author .au-id{gap:18px}
  .hero-author .au-avatar{flex:0 0 58px;width:58px;height:58px;font-size:20px;margin-top:2px}
}

/* ---- archive: category / tag chips ---- */
/* Only category archives render these (archive.php decides), so the row is a
   way round twelve topic pages rather than a wall of a hundred tags. */
.arc-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:46px}
.arc-chips a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--muted);
  font-size:13px;font-weight:500;letter-spacing:.02em;line-height:1;
  text-decoration:none;transition:.25s;
}
.arc-chips a:hover{border-color:var(--mint);color:var(--ink)}
/* The current one is filled rather than outlined: colour alone would be the
   only signal, and aria-current carries it for anyone not seeing colour. */
.arc-chips a.on{background:var(--mint);border-color:var(--mint);color:var(--ink);font-weight:700}
.arc-chips .arc-n{
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--muted);background:var(--paper-2);
  padding:3px 7px;border-radius:999px;
}
.arc-chips a.on .arc-n{background:rgba(0,0,0,.14);color:var(--ink)}

@media(max-width:620px){
  .arc-chips{gap:7px;margin-bottom:34px}
  .arc-chips a{padding:7px 12px;font-size:12.5px}
}

/* ---- 404 ---- */
/* No .hartamas-page-* class here -- a 404 is not a page, so the body-class
   helper never reaches it and these stay unscoped. The nf- prefix is used
   nowhere else in this file. */

.nf-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.nf{background:var(--paper)}
.nf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* The whole card is the link, so there is one tab stop per destination rather
   than a heading and a "go" that both point at the same place. */
.nf-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);
  border-radius:4px;padding:28px 26px 24px;
  text-decoration:none;transition:.35s;
}
.nf-card:hover{transform:translateY(-4px);border-color:var(--mint)}
.nf-card h3{font-size:18px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:9px}
.nf-card p{font-size:14.5px;line-height:1.65;color:var(--muted);font-weight:300;margin-bottom:18px}
.nf-card .go{
  margin-top:auto;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);font-weight:700;
}
.nf-card .go::after{content:" \2192";transition:.25s}
.nf-card:hover .go::after{padding-left:4px}

.nf-latest{background:var(--paper-2)}

@media(max-width:980px){
  .nf-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .nf-grid{grid-template-columns:1fr}
  .nf-actions{gap:10px}
  .nf-actions .btn{flex:1 1 100%;justify-content:center}
}

/* ---- contact page ---- */
/* Hand-written, no sibling .html source. Re-running rebuild_page_css.py would
   drop this block. The contact section itself, the form and .ci rows are the
   framework's; only what this page adds is here. */

/* The section is the page's first element, so it has to clear the fixed header
   on its own. .pad is 118px desktop and 80px under 680px, and the header is
   about 78px tall -- 80px would put the heading hard against it. This outranks
   .pad on specificity, so it wins at every width without ordering tricks. */
.hartamas-page-contact .ct-top{padding-top:160px}
/* h1 here, h2 on every other .contact section: same look, so the rule is repeated
   rather than changing the heading level the other pages use. */
.hartamas-page-contact .contact h1{font-size:clamp(34px,4.4vw,58px);margin:20px 0 22px;color:#fff}

/* The map is a full-width band between a dark section and a light one. line-height
   0 stops the inline iframe leaving a descender gap under itself. */
.hartamas-page-contact .ct-map{line-height:0;background:var(--paper-2)}
.hartamas-page-contact .ct-map iframe{display:block;width:100%;height:460px;border:0}

@media(max-width:980px){
.hartamas-page-contact .ct-top{padding-top:140px}
}
@media(max-width:680px){
.hartamas-page-contact .ct-top{padding-top:130px}
.hartamas-page-contact .ct-map iframe{height:360px}
}

/* ---- international property ---- */
/* Hand-written, no sibling .html source. Re-running rebuild_page_css.py would
   drop this block. */

/* The hero is international-property.webp, 1200x700 and only 35 KB. WordPress
   generated no intermediate crops for it (every -WxH name 404s), so the one
   original serves every width. The scoped selector outranks the framework's
   min-width hero rules, so no media queries are needed. */
.hartamas-page-international-property .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/international-property.webp')}

.hartamas-page-international-property .ip-svcs{background:var(--paper)}

/* Five cards in a 6-column grid: the first three span two columns, the last two
   span three, so both rows fill the width instead of leaving a gap at the end
   of a 3+2 layout. */
.hartamas-page-international-property .ip-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.hartamas-page-international-property .ip-card{
  grid-column:span 2;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);
  border-radius:4px;padding:30px 28px 26px;transition:.35s;
}
.hartamas-page-international-property .ip-card:nth-child(n+4){grid-column:span 3}
.hartamas-page-international-property .ip-card:hover{transform:translateY(-4px);border-color:var(--mint)}

/* The icons are colourful flat illustrations on a transparent ground. They sit on
   the white card, not a dark band, where they read as intended. */
.hartamas-page-international-property .ip-ic{width:68px;height:68px;margin-bottom:20px}
.hartamas-page-international-property .ip-ic img{width:100%;height:100%;object-fit:contain;display:block}
.hartamas-page-international-property .ip-card h3{font-size:22px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:12px}
.hartamas-page-international-property .ip-card p{font-size:15px;line-height:1.7;color:var(--muted);font-weight:300;margin-bottom:22px}
.hartamas-page-international-property .ip-card ul{list-style:none;margin:0 0 22px}
.hartamas-page-international-property .ip-card li{position:relative;padding:5px 0 5px 20px;font-size:14.5px;line-height:1.55;color:var(--muted);font-weight:300}
.hartamas-page-international-property .ip-card li::before{content:"";position:absolute;left:1px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--mint)}
/* margin-top:auto pins the link to the bottom edge, so it lines up across a row
   even though the property-management card is taller than the others. */
.hartamas-page-international-property .ip-link{
  margin-top:auto;align-self:flex-start;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);
  border-bottom:2px solid var(--mint);padding-bottom:3px;transition:.2s;
}
.hartamas-page-international-property .ip-link::after{content:" \2197"}
.hartamas-page-international-property .ip-link:hover{color:var(--muted)}

.hartamas-page-international-property .ip-folio{background:var(--paper-2)}
.hartamas-page-international-property .ip-pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.hartamas-page-international-property .ip-item{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.35s}
.hartamas-page-international-property .ip-item:hover{border-color:var(--mint);transform:translateY(-4px)}
.hartamas-page-international-property .ip-item img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;background:var(--paper-2)}
.hartamas-page-international-property .ip-item .cap{padding:14px 16px 16px}
.hartamas-page-international-property .ip-item .n{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink);text-transform:uppercase;line-height:1.35}
.hartamas-page-international-property .ip-item .l{font-size:12.5px;color:var(--muted);font-weight:300;margin-top:3px;line-height:1.4}

.hartamas-page-international-property .ip-cta{background:var(--green);color:#fff}
.hartamas-page-international-property .ip-cta .section-head{margin-bottom:34px}
.hartamas-page-international-property .ip-cta .eyebrow{color:var(--mint)}
.hartamas-page-international-property .ip-cta h2{color:#fff}
.hartamas-page-international-property .ip-cta p{color:rgba(255,255,255,.8);margin-left:auto;margin-right:auto;max-width:560px}
.hartamas-page-international-property .ip-cta .center-cta{text-align:center;margin-top:0}

@media(max-width:1100px){
.hartamas-page-international-property .ip-pgrid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:980px){
/* 2 columns; the fifth card would sit alone, so it takes the full row */
.hartamas-page-international-property .ip-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-international-property .ip-card,.hartamas-page-international-property .ip-card:nth-child(n+4){grid-column:span 1}
.hartamas-page-international-property .ip-card:last-child{grid-column:span 2}
.hartamas-page-international-property .ip-pgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
.hartamas-page-international-property .ip-grid{grid-template-columns:1fr}
.hartamas-page-international-property .ip-card,.hartamas-page-international-property .ip-card:last-child{grid-column:span 1}
.hartamas-page-international-property .ip-pgrid{gap:12px}
.hartamas-page-international-property .ip-item .cap{padding:12px 12px 14px}
}

/* ---- industrial property ---- */
/* Hand-written, no sibling .html source. Re-running rebuild_page_css.py would
   drop this block. */

/* Hero: 768 and 1024 are WordPress's own crops; there is no 1536, so the 1200x800
   original takes the widest breakpoint. */
.hartamas-page-industrial-property .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/industrial-property-768x512.webp')}
@media(min-width:701px){
.hartamas-page-industrial-property .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/industrial-property-1024x683.webp')}
}
@media(min-width:1201px){
.hartamas-page-industrial-property .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/industrial-property.webp')}
}

.hartamas-page-industrial-property .ind-intro{background:var(--paper)}
.hartamas-page-industrial-property .ind-copy{max-width:880px}
.hartamas-page-industrial-property .ind-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:22px}
.hartamas-page-industrial-property .ind-copy p:first-child{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.45;color:var(--ink);font-weight:500}

/* Services: icon and title only, so five narrow cards sit in one row. The icons
   are colourful Flaticon artwork on a transparent ground, so they live on white
   cards, never on a dark band. */
.hartamas-page-industrial-property .ind-svcs{background:var(--paper-2)}
.hartamas-page-industrial-property .ind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.hartamas-page-industrial-property .ind-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:30px 20px 26px;text-align:center;transition:.35s}
.hartamas-page-industrial-property .ind-card:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-industrial-property .ind-card img{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto 18px}
.hartamas-page-industrial-property .ind-card h3{font-size:19px;font-weight:600;color:var(--ink);line-height:1.25}

.hartamas-page-industrial-property .ind-os{background:var(--green);color:#fff}
.hartamas-page-industrial-property .ind-os .section-head{max-width:760px}
.hartamas-page-industrial-property .ind-os .section-head h2{color:#fff}
.hartamas-page-industrial-property .ind-os .section-head p{color:rgba(255,255,255,.76);font-weight:300}
.hartamas-page-industrial-property .ind-os .eyebrow{color:var(--mint)}
.hartamas-page-industrial-property .ind-os-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hartamas-page-industrial-property .ind-os-card{background:#fff;border-radius:4px;padding:26px 18px 22px;text-align:center;transition:.35s}
.hartamas-page-industrial-property .ind-os-card:hover{transform:translateY(-4px)}
.hartamas-page-industrial-property .ind-os-card img{width:60px;height:60px;object-fit:contain;display:block;margin:0 auto 14px}
.hartamas-page-industrial-property .ind-os-card h3{font-size:17px;font-weight:600;color:var(--ink);line-height:1.25}

/* Property type and focused areas share one tile: a photo, a name, and a "view
   listings" cue. The whole tile is the link, one tab stop each. */
.hartamas-page-industrial-property .ind-types{background:var(--paper)}
.hartamas-page-industrial-property .ind-areas{background:var(--paper-2)}
.hartamas-page-industrial-property .ind-tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.hartamas-page-industrial-property .ind-agrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.hartamas-page-industrial-property .ind-tile,.hartamas-page-industrial-property .ind-area{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;text-decoration:none;transition:.35s}
.hartamas-page-industrial-property .ind-tile:hover,.hartamas-page-industrial-property .ind-area:hover{border-color:var(--mint);transform:translateY(-4px)}
.hartamas-page-industrial-property .ind-tile img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;background:var(--paper-2)}
.hartamas-page-industrial-property .ind-area img{width:100%;aspect-ratio:7/5;height:auto;object-fit:cover;display:block;background:var(--paper-2)}
.hartamas-page-industrial-property .ind-tile .cap,.hartamas-page-industrial-property .ind-area .cap{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px}
.hartamas-page-industrial-property .ind-tile .n,.hartamas-page-industrial-property .ind-area .n{font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--ink);text-transform:uppercase;line-height:1.3}
.hartamas-page-industrial-property .ind-tile .go,.hartamas-page-industrial-property .ind-area .go{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.hartamas-page-industrial-property .ind-tile .go::after,.hartamas-page-industrial-property .ind-area .go::after{content:" \2197"}
.hartamas-page-industrial-property .ind-tile:hover .go,.hartamas-page-industrial-property .ind-area:hover .go{color:var(--ink)}

/* 22 names, in columns. column-fill balance + break-inside keeps a name from
   being split across two columns. */
.hartamas-page-industrial-property .ind-clientele{background:var(--paper)}
.hartamas-page-industrial-property .ind-clients{list-style:none;columns:3;column-gap:48px}
.hartamas-page-industrial-property .ind-clients li{break-inside:avoid;position:relative;padding:9px 0 9px 20px;font-size:14.5px;line-height:1.5;color:var(--muted);font-weight:300;border-bottom:1px solid var(--line)}
.hartamas-page-industrial-property .ind-clients li::before{content:"";position:absolute;left:1px;top:17px;width:6px;height:6px;border-radius:50%;background:var(--mint)}


/* the Flaticon credit is a licence requirement, so it is small but not hidden */
.hartamas-page-industrial-property .ind-cta{background:var(--green);color:#fff}
.hartamas-page-industrial-property .ind-cta .section-head{margin-bottom:34px}
.hartamas-page-industrial-property .ind-cta .eyebrow{color:var(--mint)}
.hartamas-page-industrial-property .ind-cta h2{color:#fff}
.hartamas-page-industrial-property .ind-cta p{color:rgba(255,255,255,.8);margin-left:auto;margin-right:auto;max-width:560px}
.hartamas-page-industrial-property .ind-cta .center-cta{text-align:center;margin-top:0}

.hartamas-page-industrial-property .ind-credit{background:var(--paper);margin:0;padding:18px 0;text-align:center;font-size:12px;color:var(--muted);font-weight:300}
.hartamas-page-industrial-property .ind-credit a{color:var(--ink);border-bottom:1px solid var(--mint)}

@media(max-width:1100px){
/* 5 -> 3 + 2: a 6-column grid, first three span two, last two span three */
.hartamas-page-industrial-property .ind-grid{grid-template-columns:repeat(6,1fr)}
.hartamas-page-industrial-property .ind-card{grid-column:span 2}
.hartamas-page-industrial-property .ind-card:nth-child(n+4){grid-column:span 3}
.hartamas-page-industrial-property .ind-tgrid,.hartamas-page-industrial-property .ind-agrid{grid-template-columns:repeat(4,1fr)}
.hartamas-page-industrial-property .ind-os-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:980px){
.hartamas-page-industrial-property .ind-tgrid,.hartamas-page-industrial-property .ind-agrid{grid-template-columns:repeat(3,1fr)}
.hartamas-page-industrial-property .ind-os-grid{grid-template-columns:repeat(2,1fr)}
.hartamas-page-industrial-property .ind-clients{columns:2}
}
@media(max-width:620px){
.hartamas-page-industrial-property .ind-grid{grid-template-columns:1fr 1fr}
.hartamas-page-industrial-property .ind-card,.hartamas-page-industrial-property .ind-card:nth-child(n+4){grid-column:span 1}
.hartamas-page-industrial-property .ind-card:last-child{grid-column:span 2}
.hartamas-page-industrial-property .ind-tgrid,.hartamas-page-industrial-property .ind-agrid{grid-template-columns:repeat(2,1fr);gap:12px}
.hartamas-page-industrial-property .ind-os-grid{gap:12px}
.hartamas-page-industrial-property .ind-clients{columns:1}
.hartamas-page-industrial-property .ind-tile .cap,.hartamas-page-industrial-property .ind-area .cap{padding:12px 12px 14px}
}

/* ---- corporate real estate ---- */
/* Hand-written, no sibling .html source. Re-running rebuild_page_css.py would
   drop this block. */

/* corporate-real-estate.webp has no WordPress crops (every -WxH name 404s), so the
   one 89 KB original serves every width. The scoped selector outranks the
   framework's min-width hero rules, so no media queries are needed. */
.hartamas-page-corporate-real-estate .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/corporate-real-estate.webp')}

.hartamas-page-corporate-real-estate .cre-intro{background:var(--paper)}
.hartamas-page-corporate-real-estate .cre-copy{max-width:880px}
.hartamas-page-corporate-real-estate .cre-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:22px}
.hartamas-page-corporate-real-estate .cre-copy p:first-child{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.45;color:var(--ink);font-weight:500}
.hartamas-page-corporate-real-estate .cre-copy .btn{margin-top:10px}

/* Nine services in a 3x3. The icons are colourful Flaticon artwork on a
   transparent ground, so they sit on white cards, never on a dark band. */
.hartamas-page-corporate-real-estate .cre-svcs{background:var(--paper-2)}
.hartamas-page-corporate-real-estate .cre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hartamas-page-corporate-real-estate .cre-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:30px 28px 26px;transition:.35s}
.hartamas-page-corporate-real-estate .cre-card:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-corporate-real-estate .cre-card img{width:64px;height:64px;object-fit:contain;display:block;margin-bottom:18px}
.hartamas-page-corporate-real-estate .cre-card h3{font-size:21px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:10px}
.hartamas-page-corporate-real-estate .cre-card p{font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300}

.hartamas-page-corporate-real-estate .cre-folio{background:var(--paper)}
.hartamas-page-corporate-real-estate .cre-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hartamas-page-corporate-real-estate .cre-item{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:.35s}
.hartamas-page-corporate-real-estate .cre-item:hover{border-color:var(--mint);transform:translateY(-4px)}
.hartamas-page-corporate-real-estate .cre-item img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;background:var(--paper-2)}
.hartamas-page-corporate-real-estate .cre-item .cap{padding:16px 18px 18px}
.hartamas-page-corporate-real-estate .cre-item .n{font-size:13.5px;font-weight:700;letter-spacing:.03em;color:var(--ink);text-transform:uppercase;line-height:1.3}
.hartamas-page-corporate-real-estate .cre-item .l{font-size:12.5px;color:var(--muted);font-weight:300;margin-top:3px}
.hartamas-page-corporate-real-estate .cre-item .cap p{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.6;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

/* Four clientele lists as cards. Lengths are 22 / 22 / 10 / 14, so rows are
   top-aligned rather than stretched, or the short ones would be mostly air. */
.hartamas-page-corporate-real-estate .cre-clients{background:var(--paper-2)}
.hartamas-page-corporate-real-estate .cre-lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
.hartamas-page-corporate-real-estate .cre-list{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:26px 24px 22px}
.hartamas-page-corporate-real-estate .cre-list h3{font-size:18px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hartamas-page-corporate-real-estate .cre-list ul{list-style:none;margin:0}
.hartamas-page-corporate-real-estate .cre-list li{position:relative;padding:6px 0 6px 16px;font-size:13.5px;line-height:1.5;color:var(--muted);font-weight:300}
.hartamas-page-corporate-real-estate .cre-list li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;border-radius:50%;background:var(--mint)}
/* LHDN and Customs sit under the Ministry of Finance, one step in and with an
   en dash instead of a dot, so they read as part of it rather than as peers. */
.hartamas-page-corporate-real-estate .cre-list ul.sub{margin:4px 0 0}
.hartamas-page-corporate-real-estate .cre-list ul.sub li{padding:3px 0 3px 14px;font-size:13px}
.hartamas-page-corporate-real-estate .cre-list ul.sub li::before{width:7px;height:1px;border-radius:0;top:13px;background:var(--muted)}

.hartamas-page-corporate-real-estate .cre-cta{background:var(--green);color:#fff}
.hartamas-page-corporate-real-estate .cre-cta .section-head{margin-bottom:34px}
.hartamas-page-corporate-real-estate .cre-cta .eyebrow{color:var(--mint)}
.hartamas-page-corporate-real-estate .cre-cta h2{color:#fff}
.hartamas-page-corporate-real-estate .cre-cta p{color:rgba(255,255,255,.8);margin-left:auto;margin-right:auto;max-width:560px}
.hartamas-page-corporate-real-estate .cre-cta .center-cta{text-align:center;margin-top:0}

/* the Flaticon credit is a licence requirement, so it is small but not hidden */
.hartamas-page-corporate-real-estate .cre-credit{background:var(--paper);margin:0;padding:18px 0;text-align:center;font-size:12px;color:var(--muted);font-weight:300}
.hartamas-page-corporate-real-estate .cre-credit a{color:var(--ink);border-bottom:1px solid var(--mint)}

@media(max-width:1100px){
.hartamas-page-corporate-real-estate .cre-pgrid{grid-template-columns:repeat(3,1fr)}
.hartamas-page-corporate-real-estate .cre-lgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
.hartamas-page-corporate-real-estate .cre-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
.hartamas-page-corporate-real-estate .cre-pgrid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:620px){
.hartamas-page-corporate-real-estate .cre-grid,.hartamas-page-corporate-real-estate .cre-lgrid{grid-template-columns:1fr}
.hartamas-page-corporate-real-estate .cre-pgrid{grid-template-columns:1fr}
}

/* ---- workspace interior design, mm2h, academy ---- */
/* Hand-written, no sibling .html source. Re-running rebuild_page_css.py would
   drop this block. */

/* ---------------- workspace interior design ---------------- */
/* 768 and 1024 are WordPress's own crops; the 1200px original takes the widest. */
.hartamas-page-workspace-interior-design .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/workspace-interior-design-768x512.webp')}
@media(min-width:701px){
.hartamas-page-workspace-interior-design .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/workspace-interior-design-1024x683.webp')}
}
@media(min-width:1201px){
.hartamas-page-workspace-interior-design .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/workspace-interior-design.webp')}
}
.hartamas-page-workspace-interior-design .wid-about{background:var(--paper)}
.hartamas-page-workspace-interior-design .wid-about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hartamas-page-workspace-interior-design .wid-copy h2{font-size:clamp(30px,3.6vw,46px);color:var(--ink);margin:16px 0 20px;line-height:1.12}
.hartamas-page-workspace-interior-design .wid-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:18px}
.hartamas-page-workspace-interior-design .wid-copy p:first-of-type{font-size:17.5px;color:var(--ink)}
.hartamas-page-workspace-interior-design .wid-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:4px;box-shadow:var(--shadow);background:var(--paper-2)}
.hartamas-page-workspace-interior-design .wid-group{background:var(--paper-2)}
.hartamas-page-workspace-interior-design .wid-group .wid-copy{max-width:820px}
.hartamas-page-workspace-interior-design .wid-link{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);border-bottom:2px solid var(--mint);padding-bottom:3px;transition:.2s}
.hartamas-page-workspace-interior-design .wid-link::after{content:" \2192"}
.hartamas-page-workspace-interior-design .wid-link:hover{color:var(--muted)}
.hartamas-page-workspace-interior-design .wid-svcs{background:var(--paper)}
/* Seven cards: four across, then the last three spread over the full width so the
   second row has no hole at the end. */
.hartamas-page-workspace-interior-design .wid-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.hartamas-page-workspace-interior-design .wid-card{grid-column:span 3;background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:30px 26px 26px;transition:.35s}
.hartamas-page-workspace-interior-design .wid-card:nth-child(n+5){grid-column:span 4}
.hartamas-page-workspace-interior-design .wid-card:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-workspace-interior-design .wid-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--mint);margin-bottom:18px}
.hartamas-page-workspace-interior-design .wid-ic svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hartamas-page-workspace-interior-design .wid-card h3{font-size:20px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:10px}
.hartamas-page-workspace-interior-design .wid-card p{font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300}
.hartamas-page-workspace-interior-design .wid-cta{background:var(--green);color:#fff}
.hartamas-page-workspace-interior-design .wid-cta .section-head{margin-bottom:34px}
.hartamas-page-workspace-interior-design .wid-cta .eyebrow{color:var(--mint)}
.hartamas-page-workspace-interior-design .wid-cta h2{color:#fff}
.hartamas-page-workspace-interior-design .wid-cta p{color:rgba(255,255,255,.8);margin-left:auto;margin-right:auto;max-width:560px}
.hartamas-page-workspace-interior-design .wid-cta .center-cta{text-align:center;margin-top:0}

/* ---------------- mm2h ---------------- */
.hartamas-page-mm2h .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/mm2h-768x512.webp')}
@media(min-width:701px){
.hartamas-page-mm2h .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/mm2h-1024x683.webp')}
}
@media(min-width:1201px){
.hartamas-page-mm2h .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/mm2h.webp')}
}
.hartamas-page-mm2h .hero-actions{margin-top:30px}
.hartamas-page-mm2h .mm-intro{background:var(--paper)}
.hartamas-page-mm2h .mm-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.hartamas-page-mm2h .mm-photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:4px;box-shadow:var(--shadow);background:var(--paper-2)}
.hartamas-page-mm2h .mm-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:20px}
/* the first paragraph is the programme's definition, so it leads */
.hartamas-page-mm2h .mm-copy p:first-child{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.45;color:var(--ink);font-weight:500}
.hartamas-page-mm2h .mm-why{background:var(--paper-2)}
.hartamas-page-mm2h .mm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hartamas-page-mm2h .mm-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:30px 26px 26px;transition:.35s}
.hartamas-page-mm2h .mm-card:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-mm2h .mm-card img{width:72px;height:72px;object-fit:contain;display:block;margin-bottom:18px}
.hartamas-page-mm2h .mm-card h3{font-size:21px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:10px}
.hartamas-page-mm2h .mm-card p{font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300}
.hartamas-page-mm2h .mm-cta{background:var(--green);color:#fff}
.hartamas-page-mm2h .mm-cta .section-head{margin-bottom:34px}
.hartamas-page-mm2h .mm-cta .eyebrow{color:var(--mint)}
.hartamas-page-mm2h .mm-cta h2{color:#fff}
.hartamas-page-mm2h .mm-cta p{color:rgba(255,255,255,.8);margin-left:auto;margin-right:auto;max-width:600px}
.hartamas-page-mm2h .mm-cta .center-cta{text-align:center;margin-top:0}

/* ---------------- academy & training ---------------- */
/* 768x432 and 1024x576 are WordPress's own crops (16:9, unlike the other heroes);
   the original takes the widest breakpoint. */
.hartamas-page-academy-training .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/hartamas-academy-768x432.webp')}
@media(min-width:701px){
.hartamas-page-academy-training .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/hartamas-academy-1024x576.webp')}
}
@media(min-width:1201px){
.hartamas-page-academy-training .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/hartamas-academy.webp')}
}
.hartamas-page-academy-training .ac-about{background:var(--paper)}
.hartamas-page-academy-training .ac-about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hartamas-page-academy-training .ac-copy h2{font-size:clamp(30px,3.6vw,46px);color:var(--ink);margin:16px 0 20px;line-height:1.12}
.hartamas-page-academy-training .ac-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:18px}
.hartamas-page-academy-training .ac-copy p:first-of-type{font-size:17.5px;color:var(--ink)}
.hartamas-page-academy-training .ac-photo img{width:100%;height:auto;aspect-ratio:1024/660;object-fit:cover;display:block;border-radius:4px;box-shadow:var(--shadow);background:var(--paper-2)}
.hartamas-page-academy-training .ac-stats{background:var(--green);color:#fff;padding:70px 0}
.hartamas-page-academy-training .ac-sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hartamas-page-academy-training .ac-stat{text-align:center;padding:10px 20px}
.hartamas-page-academy-training .ac-stat img{width:56px;height:56px;object-fit:contain;display:block;margin:0 auto 14px}
.hartamas-page-academy-training .ac-stat .num{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(44px,5vw,64px);line-height:1;color:var(--mint);font-weight:500}
.hartamas-page-academy-training .ac-stat .lbl{display:block;margin-top:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:600}
.hartamas-page-academy-training .ac-prog{background:var(--paper-2)}
.hartamas-page-academy-training .ac-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hartamas-page-academy-training .ac-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:30px 28px 26px;transition:.35s}
.hartamas-page-academy-training .ac-card:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-academy-training .ac-card img{width:64px;height:64px;object-fit:contain;display:block;margin-bottom:18px}
.hartamas-page-academy-training .ac-card h3{font-size:21px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:10px}
.hartamas-page-academy-training .ac-card p{font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300;margin-bottom:22px}
/* margin-top:auto pins the link to the bottom edge so all three line up even when
   the descriptions run to different lengths */
.hartamas-page-academy-training .ac-link{margin-top:auto;align-self:flex-start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);border-bottom:2px solid var(--mint);padding-bottom:3px;transition:.2s}
.hartamas-page-academy-training .ac-link::after{content:" \2197"}
.hartamas-page-academy-training .ac-link:hover{color:var(--muted)}
.hartamas-page-academy-training .ac-inhouse{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.hartamas-page-academy-training .ac-inhouse img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block;background:var(--paper-2)}
.hartamas-page-academy-training .ac-inhouse-body{padding:38px 40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hartamas-page-academy-training .ac-inhouse-body h3{font-size:26px;font-weight:600;color:var(--ink);line-height:1.2;margin-bottom:12px}
.hartamas-page-academy-training .ac-inhouse-body p{color:var(--muted);font-weight:300;font-size:15.5px;line-height:1.7;margin-bottom:24px;max-width:520px}
.hartamas-page-academy-training .ac-cta{background:var(--green);color:#fff}
.hartamas-page-academy-training .ac-cta .section-head{margin-bottom:34px}
.hartamas-page-academy-training .ac-cta .eyebrow{color:var(--mint)}
.hartamas-page-academy-training .ac-cta h2{color:#fff}
.hartamas-page-academy-training .ac-cta p{color:rgba(255,255,255,.8);margin-left:auto;margin-right:auto;max-width:560px}
.hartamas-page-academy-training .ac-cta .center-cta{text-align:center;margin-top:0}

@media(max-width:1100px){
.hartamas-page-workspace-interior-design .wid-card,.hartamas-page-workspace-interior-design .wid-card:nth-child(n+5){grid-column:span 6}
.hartamas-page-workspace-interior-design .wid-card:last-child{grid-column:span 12}
.hartamas-page-mm2h .mm-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
.hartamas-page-workspace-interior-design .wid-about-grid,.hartamas-page-mm2h .mm-intro-grid,.hartamas-page-academy-training .ac-about-grid{grid-template-columns:1fr;gap:38px}
.hartamas-page-academy-training .ac-pgrid{grid-template-columns:1fr 1fr}
.hartamas-page-academy-training .ac-card:last-child{grid-column:span 2}
.hartamas-page-academy-training .ac-inhouse{grid-template-columns:1fr}
.hartamas-page-academy-training .ac-inhouse img{min-height:0;aspect-ratio:1280/693;height:auto}
}
@media(max-width:620px){
.hartamas-page-workspace-interior-design .wid-card,.hartamas-page-workspace-interior-design .wid-card:nth-child(n+5),.hartamas-page-workspace-interior-design .wid-card:last-child{grid-column:span 12}
.hartamas-page-mm2h .mm-grid{grid-template-columns:1fr}
.hartamas-page-academy-training .ac-pgrid{grid-template-columns:1fr}
.hartamas-page-academy-training .ac-card:last-child{grid-column:span 1}
.hartamas-page-academy-training .ac-sgrid{grid-template-columns:1fr;gap:10px}
.hartamas-page-academy-training .ac-inhouse-body{padding:28px 24px}
}

/* ---- newsletter popup (articles) ---- */
/* A card, not a takeover: 380px wide, no backdrop, the article stays scrollable
   and readable behind it. Bottom-left on desktop. Above the fixed header (z 50); the form dialog
   it opens lives in the top layer, above everything. */
.nl-pop{position:fixed;left:24px;bottom:24px;z-index:60;width:min(380px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:6px;box-shadow:0 24px 60px -20px rgba(0,0,0,.45);padding:26px 26px 20px;opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.nl-pop.on{opacity:1;transform:none}
.nl-pop[hidden]{display:none}
.nl-pop h3{font-size:24px;line-height:1.15;color:var(--ink);margin:0 28px 10px 0}
.nl-pop p{font-size:14px;line-height:1.6;color:var(--muted);font-weight:300;margin:0 0 16px}
/* the form makes the card taller than a button did, so it scrolls inside
   itself rather than ever running off the screen */
.nl-pop{max-height:calc(100vh - 48px);overflow-y:auto}
.nl-pop .em-embed{margin:0 -4px}
.nl-pop .nl-pop-note{font-size:12px;margin:12px 0 0;text-align:center}
.nl-pop-x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 6px;transition:.2s}
.nl-pop-x:hover{color:var(--ink)}
/* Mobile: a compact card across the width, lifted 88px so the chat launcher in
   the bottom-right corner is not buried under it. Still well short of the
   screen height -- the article remains visible above it. */
@media(max-width:680px){
.nl-pop{left:12px;right:12px;width:auto;bottom:88px;padding:20px 18px 14px;max-height:calc(100vh - 110px)}
.nl-pop h3{font-size:21px}
/* with a whole form in the card, the description goes on phones -- the title
   and the form say enough, and it keeps the card well short of full screen */
.nl-pop .nl-pop-desc{display:none}
}
@media(prefers-reduced-motion:reduce){.nl-pop{transition:none;transform:none}}

/* ---------------- academy calendar ---------------- */
.hartamas-page-academy-calendar .cal{background:var(--paper)}
.hartamas-page-academy-calendar .cal-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.hartamas-page-academy-calendar .cal-bar[hidden]{display:none}
.hartamas-page-academy-calendar .cal-bar h2{font-size:clamp(26px,3vw,38px);color:var(--ink);margin:0;text-align:center;flex:1}
.hartamas-page-academy-calendar .cal-nav{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;transition:.2s}
.hartamas-page-academy-calendar .cal-nav:hover:not(:disabled){background:var(--mint);border-color:var(--mint)}
.hartamas-page-academy-calendar .cal-nav:disabled{opacity:.35;cursor:default}
.hartamas-page-academy-calendar .cal-month[hidden]{display:none}
.hartamas-page-academy-calendar .cal-month+.cal-month{margin-top:60px}
.hartamas-page-academy-calendar .cal-table{width:100%;table-layout:fixed;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
.hartamas-page-academy-calendar .cal-table caption{caption-side:top;text-align:left;font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--ink);padding:0 0 12px}
.hartamas-page-academy-calendar .js-cal .cal-table caption{display:none}
.hartamas-page-academy-calendar .cal-table th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);padding:12px 8px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.hartamas-page-academy-calendar .cal-table td{height:118px;vertical-align:top;padding:8px;border:1px solid var(--line);overflow:hidden}
.hartamas-page-academy-calendar .cal-table td.off{background:var(--paper-2)}
.hartamas-page-academy-calendar .cal-table .d{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.hartamas-page-academy-calendar .cal-table td.has-ev .d{color:var(--ink)}
.hartamas-page-academy-calendar .cal-ev{display:block;font-size:11.5px;line-height:1.35;font-weight:500;color:var(--ink);background:rgba(0,0,0,.04);border-left:3px solid var(--mint);border-radius:2px;padding:5px 7px;margin-bottom:4px;transition:.2s;overflow-wrap:anywhere}
.hartamas-page-academy-calendar .cal-ev:hover{background:var(--mint)}
.hartamas-page-academy-calendar .cal-ev .tm{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.hartamas-page-academy-calendar .cal-ev.sold{opacity:.6}
.hartamas-page-academy-calendar .cal-list{margin-top:34px}
.hartamas-page-academy-calendar .cal-list h3{font-size:22px;color:var(--ink);margin:0 0 14px}
.hartamas-page-academy-calendar .cal-item{display:grid;grid-template-columns:64px 1fr auto;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-left:3px solid var(--mint);border-radius:4px;padding:18px 22px;margin-bottom:12px}
.hartamas-page-academy-calendar .cal-date{text-align:center;line-height:1}
.hartamas-page-academy-calendar .cal-date .n{display:block;font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--ink);font-weight:500}
.hartamas-page-academy-calendar .cal-date .w{display:block;margin-top:5px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.hartamas-page-academy-calendar .cal-info h4{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3;margin:0 0 8px}
.hartamas-page-academy-calendar .cal-info h4 a:hover{color:var(--muted)}
.hartamas-page-academy-calendar .cal-info .meta{display:flex;flex-wrap:wrap;gap:8px}
.hartamas-page-academy-calendar .cal-info .meta span{font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--muted);background:var(--paper-2);border-radius:2px;padding:5px 10px}
.hartamas-page-academy-calendar .cal-info .meta .hrd{color:var(--ink);background:rgba(0,0,0,.06)}
.hartamas-page-academy-calendar .cal-info .meta .so{color:#b00020;background:rgba(176,0,32,.08)}
.hartamas-page-academy-calendar .cal-go{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);border-bottom:2px solid var(--mint);padding-bottom:3px;white-space:nowrap}
.hartamas-page-academy-calendar .cal-go:hover{color:var(--muted)}
.hartamas-page-academy-calendar .cal-none,.cal-empty p{color:var(--muted);font-weight:300}
.hartamas-page-academy-calendar .cal-empty{text-align:center;padding:30px 0}
.hartamas-page-academy-calendar .cal-empty p{margin-bottom:20px}
.hartamas-page-academy-calendar .ac-cta{background:var(--green);color:#fff}
.hartamas-page-academy-calendar .ac-cta .section-head{margin-bottom:34px}
.hartamas-page-academy-calendar .ac-cta .eyebrow{color:var(--mint)}
.hartamas-page-academy-calendar .ac-cta h2{color:#fff}
.hartamas-page-academy-calendar .ac-cta p{color:rgba(255,255,255,.8);margin-left:auto;margin-right:auto;max-width:560px}
.hartamas-page-academy-calendar .ac-cta .center-cta{text-align:center;margin-top:0}
@media(max-width:760px){
.hartamas-page-academy-calendar .cal-table{display:none}
.hartamas-page-academy-calendar .cal-list{margin-top:0}
.hartamas-page-academy-calendar .cal-item{grid-template-columns:52px 1fr;gap:16px;padding:16px}
.hartamas-page-academy-calendar .cal-go{grid-column:1 / -1;justify-self:start}
}

/* ---------------- agent mastery: orientation, RMS, RMS+ ---------------- */
.hartamas-page-orientation .tr-intro,
.hartamas-page-rms-training .tr-intro,
.hartamas-page-rmsplus-training .tr-intro{background:var(--paper)}
.hartamas-page-orientation .tr-intro-grid,
.hartamas-page-rms-training .tr-intro-grid,
.hartamas-page-rmsplus-training .tr-intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hartamas-page-orientation .tr-copy h2,
.hartamas-page-rms-training .tr-copy h2,
.hartamas-page-rmsplus-training .tr-copy h2{font-size:clamp(30px,3.6vw,46px);color:var(--ink);margin:16px 0 20px;line-height:1.12}
.hartamas-page-orientation .tr-copy p,
.hartamas-page-rms-training .tr-copy p,
.hartamas-page-rmsplus-training .tr-copy p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.75;margin-bottom:18px}
.hartamas-page-orientation .tr-copy p:first-of-type,
.hartamas-page-rms-training .tr-copy p:first-of-type,
.hartamas-page-rmsplus-training .tr-copy p:first-of-type{font-size:17.5px;color:var(--ink)}
.hartamas-page-orientation .tr-callout,
.hartamas-page-rms-training .tr-callout,
.hartamas-page-rmsplus-training .tr-callout{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:3px solid var(--mint);border-radius:4px;padding:20px 22px;margin:8px 0 22px}
.hartamas-page-orientation .tr-callout .tr-ic,
.hartamas-page-rms-training .tr-callout .tr-ic,
.hartamas-page-rmsplus-training .tr-callout .tr-ic{flex:0 0 28px;width:28px;height:28px;color:var(--ink)}
.hartamas-page-orientation .tr-callout p,
.hartamas-page-rms-training .tr-callout p,
.hartamas-page-rmsplus-training .tr-callout p{margin:0;font-size:15.5px;font-weight:500;color:var(--ink)}
.hartamas-page-orientation .tr-next,
.hartamas-page-rms-training .tr-next,
.hartamas-page-rmsplus-training .tr-next{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);border-bottom:2px solid var(--mint);padding-bottom:3px;margin-top:6px}
.hartamas-page-orientation .tr-next:hover,
.hartamas-page-rms-training .tr-next:hover,
.hartamas-page-rmsplus-training .tr-next:hover{color:var(--muted)}
.hartamas-page-orientation .tr-photo,
.hartamas-page-rms-training .tr-photo,
.hartamas-page-rmsplus-training .tr-photo{aspect-ratio:4/3;border-radius:4px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2)}
.hartamas-page-orientation .tr-photo img,
.hartamas-page-rms-training .tr-photo img,
.hartamas-page-rmsplus-training .tr-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hartamas-page-orientation .tr-photo.is-empty,
.hartamas-page-rms-training .tr-photo.is-empty,
.hartamas-page-rmsplus-training .tr-photo.is-empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--green) 0%,#1d1d1d 100%)}
.hartamas-page-orientation .tr-photo.is-empty .tr-ic,
.hartamas-page-rms-training .tr-photo.is-empty .tr-ic,
.hartamas-page-rmsplus-training .tr-photo.is-empty .tr-ic{width:34%;height:34%;color:var(--mint);stroke-width:1.1}
.hartamas-page-orientation .tr-list,
.hartamas-page-rms-training .tr-list,
.hartamas-page-rmsplus-training .tr-list{background:var(--paper-2)}
.hartamas-page-orientation .tr-grid,
.hartamas-page-rms-training .tr-grid,
.hartamas-page-rmsplus-training .tr-grid{display:grid;gap:18px}
.hartamas-page-orientation .tr-grid-3,
.hartamas-page-rms-training .tr-grid-3,
.hartamas-page-rmsplus-training .tr-grid-3{grid-template-columns:repeat(3,1fr)}
.hartamas-page-orientation .tr-grid-2,
.hartamas-page-rms-training .tr-grid-2,
.hartamas-page-rmsplus-training .tr-grid-2{grid-template-columns:repeat(2,1fr)}
.hartamas-page-orientation .tr-grid-4,
.hartamas-page-rms-training .tr-grid-4,
.hartamas-page-rmsplus-training .tr-grid-4{grid-template-columns:repeat(4,1fr)}
.hartamas-page-orientation .tr-card,
.hartamas-page-rms-training .tr-card,
.hartamas-page-rmsplus-training .tr-card{position:relative;display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:26px 24px 24px;transition:transform .25s,border-color .25s}
.hartamas-page-orientation .tr-card:hover,
.hartamas-page-rms-training .tr-card:hover,
.hartamas-page-rmsplus-training .tr-card:hover{transform:translateY(-4px);border-color:var(--mint)}
.hartamas-page-orientation .tr-card > .tr-ic,
.hartamas-page-rms-training .tr-card > .tr-ic,
.hartamas-page-rmsplus-training .tr-card > .tr-ic{flex:0 0 40px;width:40px;height:40px;color:var(--ink)}
.hartamas-page-orientation .tr-card-body,
.hartamas-page-rms-training .tr-card-body,
.hartamas-page-rmsplus-training .tr-card-body{min-width:0}
.hartamas-page-orientation .tr-card h3,
.hartamas-page-rms-training .tr-card h3,
.hartamas-page-rmsplus-training .tr-card h3{font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.35;margin:0 0 6px;padding-right:34px}
.hartamas-page-orientation .tr-card p,
.hartamas-page-rms-training .tr-card p,
.hartamas-page-rmsplus-training .tr-card p{font-size:14px;line-height:1.65;color:var(--muted);font-weight:300;margin:0}
.hartamas-page-orientation .tr-badge,
.hartamas-page-rms-training .tr-badge,
.hartamas-page-rmsplus-training .tr-badge{position:absolute;top:14px;right:16px;font-family:'Cormorant Garamond',serif;font-size:22px;line-height:1;color:var(--muted);opacity:.6;text-transform:uppercase}
.hartamas-page-orientation .tr-grid-4 .tr-card,
.hartamas-page-rms-training .tr-grid-4 .tr-card,
.hartamas-page-rmsplus-training .tr-grid-4 .tr-card{flex-direction:column;align-items:flex-start;gap:16px;padding:32px 26px}
.hartamas-page-orientation .tr-grid-4 .tr-card > .tr-ic,
.hartamas-page-rms-training .tr-grid-4 .tr-card > .tr-ic,
.hartamas-page-rmsplus-training .tr-grid-4 .tr-card > .tr-ic{width:52px;height:52px;flex-basis:auto}
.hartamas-page-orientation .tr-grid-4 .tr-card h3,
.hartamas-page-rms-training .tr-grid-4 .tr-card h3,
.hartamas-page-rmsplus-training .tr-grid-4 .tr-card h3{font-size:20px;padding-right:0}
.hartamas-page-orientation .tr-cta .wrap,
.hartamas-page-rms-training .tr-cta .wrap,
.hartamas-page-rmsplus-training .tr-cta .wrap{text-align:center;max-width:680px}
.hartamas-page-orientation .tr-cta .eyebrow,
.hartamas-page-rms-training .tr-cta .eyebrow,
.hartamas-page-rmsplus-training .tr-cta .eyebrow{display:block}
.hartamas-page-orientation .tr-cta .eyebrow::before,
.hartamas-page-rms-training .tr-cta .eyebrow::before,
.hartamas-page-rmsplus-training .tr-cta .eyebrow::before{margin:0 auto}
.hartamas-page-orientation .tr-cta .btn,
.hartamas-page-rms-training .tr-cta .btn,
.hartamas-page-rmsplus-training .tr-cta .btn{margin-top:28px}
@media(max-width:1100px){
.hartamas-page-orientation .tr-grid-4,
.hartamas-page-rms-training .tr-grid-4,
.hartamas-page-rmsplus-training .tr-grid-4{grid-template-columns:repeat(2,1fr)}
.hartamas-page-orientation .tr-grid-3,
.hartamas-page-rms-training .tr-grid-3,
.hartamas-page-rmsplus-training .tr-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
.hartamas-page-orientation .tr-intro-grid,
.hartamas-page-rms-training .tr-intro-grid,
.hartamas-page-rmsplus-training .tr-intro-grid{grid-template-columns:1fr;gap:38px}
}
@media(max-width:620px){
.hartamas-page-orientation .tr-grid-4,
.hartamas-page-rms-training .tr-grid-4,
.hartamas-page-rmsplus-training .tr-grid-4{grid-template-columns:1fr}
.hartamas-page-orientation .tr-grid-3,
.hartamas-page-rms-training .tr-grid-3,
.hartamas-page-rmsplus-training .tr-grid-3{grid-template-columns:1fr}
.hartamas-page-orientation .tr-grid-2,
.hartamas-page-rms-training .tr-grid-2,
.hartamas-page-rmsplus-training .tr-grid-2{grid-template-columns:1fr}
}

/* ---- hero backgrounds: academy calendar, orientation, RMS, RMS+ ---- */
.hartamas-page-academy-calendar .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/hartamas-academy-calendar.webp')}
.hartamas-page-orientation .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/orientation-day.webp')}
.hartamas-page-rms-training .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/rms-training-2.webp')}
.hartamas-page-rmsplus-training .hero{background-image:linear-gradient(120deg,rgba(0,0,0,.92) 0%,rgba(10,10,10,.78) 45%,rgba(0,0,0,.5) 100%),url('https://hartamas.com/wp-content/uploads/2026/10/rms-training-1.webp')}

/* ---- RMS+ cards: headline and checklist ---- */
.hartamas-page-orientation .tr-card .tr-lead,
.hartamas-page-rms-training .tr-card .tr-lead,
.hartamas-page-rmsplus-training .tr-card .tr-lead{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4;margin:0 0 12px}
.hartamas-page-orientation .tr-points,
.hartamas-page-rms-training .tr-points,
.hartamas-page-rmsplus-training .tr-points{list-style:none;margin:0;padding:0}
.hartamas-page-orientation .tr-points li,
.hartamas-page-rms-training .tr-points li,
.hartamas-page-rmsplus-training .tr-points li{position:relative;padding:3px 0 3px 24px;font-size:14px;line-height:1.5;color:var(--muted);font-weight:300}
.hartamas-page-orientation .tr-points li::before,
.hartamas-page-rms-training .tr-points li::before,
.hartamas-page-rmsplus-training .tr-points li::before{content:'\2713';position:absolute;left:0;top:2px;font-weight:700;color:var(--ink)}

/* ---- academy calendar: About block above the calendar ---- */
.hartamas-page-academy-calendar .cal-about{background:#fff;padding-bottom:20px}
.hartamas-page-academy-calendar .cal-about-in{max-width:860px;margin:0 auto;text-align:center}
.hartamas-page-academy-calendar .cal-about-in .eyebrow{display:block;margin-bottom:18px}
.hartamas-page-academy-calendar .cal-about-in .eyebrow::before{margin:0 auto}
.hartamas-page-academy-calendar .cal-about-in p{color:var(--muted);font-weight:300;font-size:16.5px;line-height:1.8;margin-bottom:16px}
.hartamas-page-academy-calendar .cal-about-in p:first-of-type{font-size:17.5px;color:var(--ink)}

/* ---- career talk: speaker name, closing lines ---- */
.hartamas-page-career-talk .ct-speaker .ct-name{font-size:18px;color:var(--ink);margin-bottom:6px}
.hartamas-page-career-talk .ct-close{margin-top:32px}
.hartamas-page-career-talk .ct-close p{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.35;color:var(--ink);margin-bottom:4px}

/* ---- career talk: form fields on the white card ----
   The shared .field rules are written for the dark sections (white labels, translucent
   white inputs, white text), which on this white card made every field invisible. */
.hartamas-page-career-talk .ct-form .field label{color:var(--ink);font-weight:600}
.hartamas-page-career-talk .ct-form .field input,.hartamas-page-career-talk .ct-form .field select{background:#fff;border:1px solid #cfcdc4;color:var(--ink)}
.hartamas-page-career-talk .ct-form .field input::placeholder{color:rgba(0,0,0,.35)}
.hartamas-page-career-talk .ct-form .field input:focus,.hartamas-page-career-talk .ct-form .field select:focus{border-color:var(--ink);background:#fff}

/* ---------------- area insights: ara damansara ---------------- */
.hartamas-page-area-insights-ara-damansara .ai-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hartamas-page-area-insights-ara-damansara .ai-tags span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:8px 15px}
.hartamas-page-area-insights-ara-damansara .ai-tags .ai-ic{width:16px;height:16px;color:var(--mint)}
.hartamas-page-area-insights-ara-damansara .hero h1 em{display:block;font-size:.5em;line-height:1.2;margin-top:10px}
.hartamas-page-area-insights-ara-damansara .ai-overview{background:var(--paper)}
.hartamas-page-area-insights-ara-damansara .ai-life{background:var(--paper-2)}
.hartamas-page-area-insights-ara-damansara .ai-land{background:var(--paper)}
.hartamas-page-area-insights-ara-damansara .ai-market{background:var(--paper-2)}
.hartamas-page-area-insights-ara-damansara .ai-analysis{background:var(--paper)}
.hartamas-page-area-insights-ara-damansara .ai-two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hartamas-page-area-insights-ara-damansara .ai-three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hartamas-page-area-insights-ara-damansara .ai-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);border-radius:4px;padding:28px 28px 26px}
.hartamas-page-area-insights-ara-damansara .ai-card h3{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:600;color:var(--ink);margin:0 0 14px}
.hartamas-page-area-insights-ara-damansara .ai-card h4{font-size:17px;font-weight:600;color:var(--ink);margin:0 0 8px}
.hartamas-page-area-insights-ara-damansara .ai-card p{font-size:15px;line-height:1.75;color:var(--muted);font-weight:300;margin:0 0 12px}
.hartamas-page-area-insights-ara-damansara .ai-card p:last-child{margin-bottom:0}
.hartamas-page-area-insights-ara-damansara .ai-card p strong{color:var(--ink);font-weight:600}
.hartamas-page-area-insights-ara-damansara .ai-card > .ai-ic{width:34px;height:34px;color:var(--ink);margin-bottom:14px}
.hartamas-page-area-insights-ara-damansara .ai-ic{width:22px;height:22px;flex:0 0 auto}
.hartamas-page-area-insights-ara-damansara .ai-card h3 .ai-ic{width:26px;height:26px;color:var(--ink)}
.hartamas-page-area-insights-ara-damansara .ai-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--ink);font-size:15px;font-weight:700;flex:0 0 auto}
.hartamas-page-area-insights-ara-damansara .ai-facts{list-style:none;margin:0;padding:0}
.hartamas-page-area-insights-ara-damansara .ai-facts li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.hartamas-page-area-insights-ara-damansara .ai-facts li:first-child{border-top:0;padding-top:0}
.hartamas-page-area-insights-ara-damansara .ai-facts .ai-ic{width:24px;height:24px;margin-top:2px;color:var(--ink)}
.hartamas-page-area-insights-ara-damansara .ai-facts strong{display:block;font-size:15px;color:var(--ink);font-weight:600}
.hartamas-page-area-insights-ara-damansara .ai-facts span{display:block;font-size:14.5px;line-height:1.65;color:var(--muted);font-weight:300}
.hartamas-page-area-insights-ara-damansara .ai-group{margin-top:34px}
.hartamas-page-area-insights-ara-damansara .ai-group:first-of-type{margin-top:0}
.hartamas-page-area-insights-ara-damansara .ai-gh{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);margin:0 0 14px}
.hartamas-page-area-insights-ara-damansara .ai-gh .ai-ic{width:20px;height:20px}
.hartamas-page-area-insights-ara-damansara .ai-list{list-style:none;margin:6px 0 0;padding:0}
.hartamas-page-area-insights-ara-damansara .ai-list li{font-size:14.5px;line-height:1.65;color:var(--muted);font-weight:300;padding:8px 0 8px 18px;position:relative;border-top:1px solid var(--line)}
.hartamas-page-area-insights-ara-damansara .ai-list li::before{content:'';position:absolute;left:0;top:17px;width:7px;height:7px;border-radius:50%;background:var(--mint)}
.hartamas-page-area-insights-ara-damansara .ai-list strong{color:var(--ink);font-weight:600}
.hartamas-page-area-insights-ara-damansara .ai-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.hartamas-page-area-insights-ara-damansara .ai-chips span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:99px;padding:8px 16px}
.hartamas-page-area-insights-ara-damansara .ai-chips .ai-ic{width:18px;height:18px}
.hartamas-page-area-insights-ara-damansara .ai-landgrid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:56px;align-items:center}
.hartamas-page-area-insights-ara-damansara .ai-pie{width:100%;max-width:300px;aspect-ratio:1;border-radius:50%;margin:0 auto;box-shadow:var(--shadow)}
.hartamas-page-area-insights-ara-damansara .ai-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:15px}
.hartamas-page-area-insights-ara-damansara .ai-table th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:12px 16px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.hartamas-page-area-insights-ara-damansara .ai-table th:last-child,.ai-table td:last-child{text-align:right}
.hartamas-page-area-insights-ara-damansara .ai-table td{padding:11px 16px;border-top:1px solid var(--line);color:var(--ink)}
.hartamas-page-area-insights-ara-damansara .ai-table td i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:12px;vertical-align:-1px}
.hartamas-page-area-insights-ara-damansara .ai-table td:last-child{font-weight:600}
.hartamas-page-area-insights-ara-damansara .ai-source{margin:18px 0 0;font-size:13px;font-style:italic;color:var(--muted)}
.hartamas-page-area-insights-ara-damansara .ai-panel{background:#fff;border:1px solid var(--line);border-radius:4px;padding:28px 28px 24px;margin-bottom:22px}
.hartamas-page-area-insights-ara-damansara .ai-panel > h3{font-size:20px;font-weight:600;color:var(--ink);margin:0 0 22px}
.hartamas-page-area-insights-ara-damansara .ai-insight{margin:20px 0 0;padding:14px 18px;background:var(--paper-2);border-left:3px solid var(--mint);border-radius:0 4px 4px 0;font-size:14.5px;line-height:1.65;color:var(--muted)}
.hartamas-page-area-insights-ara-damansara .ai-insight strong{color:var(--ink)}
.hartamas-page-area-insights-ara-damansara .ai-quad{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.hartamas-page-area-insights-ara-damansara .ai-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.hartamas-page-area-insights-ara-damansara .ai-trio{display:grid;grid-template-columns:1fr;gap:22px}
.hartamas-page-area-insights-ara-damansara .ai-mini{min-width:0}
.hartamas-page-area-insights-ara-damansara .ai-mini h4{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 4px}
.hartamas-page-area-insights-ara-damansara .ai-cap{font-size:12px;color:var(--muted);margin:0 0 12px}
.hartamas-page-area-insights-ara-damansara .ai-bars{display:flex;gap:10px;align-items:stretch;height:300px;padding-top:6px}
.hartamas-page-area-insights-ara-damansara .ai-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.hartamas-page-area-insights-ara-damansara .ai-track{position:relative;flex:1;border-bottom:1px solid #cfcdc4}
.hartamas-page-area-insights-ara-damansara .ai-fill{position:absolute;left:12%;right:12%;bottom:0;background:var(--ink);border-radius:4px 4px 0 0;min-height:2px}
.hartamas-page-area-insights-ara-damansara .ai-fill.is-top{background:var(--mint);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.hartamas-page-area-insights-ara-damansara .ai-val{position:absolute;left:-4px;right:-4px;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink)}
.hartamas-page-area-insights-ara-damansara .ai-lab{font-size:12px;line-height:1.3;color:var(--muted);text-align:center;padding-top:8px;min-height:44px}
.hartamas-page-area-insights-ara-damansara .ai-dense{gap:3px;height:260px}
.hartamas-page-area-insights-ara-damansara .ai-dense .ai-fill{left:6%;right:6%}
.hartamas-page-area-insights-ara-damansara .ai-dense .ai-val{font-size:9.5px;left:-6px;right:-6px;font-weight:600}
.hartamas-page-area-insights-ara-damansara .ai-dense .ai-lab{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;min-height:64px;padding:0 0 6px;align-self:center;text-align:right;white-space:nowrap}
.hartamas-page-area-insights-ara-damansara .ai-line{width:100%;height:auto;display:block;overflow:visible}
.hartamas-page-area-insights-ara-damansara .ai-axis{stroke:#cfcdc4;stroke-width:1}
.hartamas-page-area-insights-ara-damansara .ai-area{fill:rgba(255,222,0,.28)}
.hartamas-page-area-insights-ara-damansara .ai-stroke{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.hartamas-page-area-insights-ara-damansara .ai-dot{fill:var(--mint);stroke:var(--ink);stroke-width:1.6}
.hartamas-page-area-insights-ara-damansara .ai-t-val{font-size:11px;font-weight:600;fill:#161616}
.hartamas-page-area-insights-ara-damansara .ai-t-lab{font-size:11px;fill:#5d5d5d}
.hartamas-page-area-insights-ara-damansara .ai-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:-8px 0 22px;padding:0;font-size:13px;color:var(--muted)}
.hartamas-page-area-insights-ara-damansara .ai-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.hartamas-page-area-insights-ara-damansara .ai-stack{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.hartamas-page-area-insights-ara-damansara .ai-srow{display:flex;align-items:center;gap:10px}
.hartamas-page-area-insights-ara-damansara .ai-sname{flex:0 0 58px;font-size:12px;color:var(--muted)}
.hartamas-page-area-insights-ara-damansara .ai-sbar{flex:1;display:flex;height:34px;border-radius:4px;overflow:hidden;background:var(--paper-2)}
.hartamas-page-area-insights-ara-damansara .ai-sbar span{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#161616;min-width:0;overflow:hidden}
.hartamas-page-area-insights-ara-damansara .ai-ticks{list-style:none;margin:0;padding:0}
.hartamas-page-area-insights-ara-damansara .ai-ticks li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300}
.hartamas-page-area-insights-ara-damansara .ai-ticks li:first-child{border-top:0;padding-top:0}
.hartamas-page-area-insights-ara-damansara .ai-ticks .ai-ic{width:22px;height:22px;margin-top:3px;color:#1c7c3c}
.hartamas-page-area-insights-ara-damansara .ai-ticks strong{color:var(--ink);font-weight:600}
.hartamas-page-area-insights-ara-damansara .ai-cta .wrap{text-align:center;max-width:760px}
.hartamas-page-area-insights-ara-damansara .ai-cta .btn{margin-top:26px}
.hartamas-page-area-insights-ara-damansara .ai-disc{margin-top:34px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.6)}
@media(max-width:1100px){
.hartamas-page-area-insights-ara-damansara .ai-three{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
.hartamas-page-area-insights-ara-damansara .ai-two{grid-template-columns:1fr}
.hartamas-page-area-insights-ara-damansara .ai-quad{grid-template-columns:1fr}
.hartamas-page-area-insights-ara-damansara .ai-pair{grid-template-columns:1fr}
.hartamas-page-area-insights-ara-damansara .ai-trio{grid-template-columns:1fr}
.hartamas-page-area-insights-ara-damansara .ai-landgrid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:620px){
.hartamas-page-area-insights-ara-damansara .ai-three{grid-template-columns:1fr}
.hartamas-page-area-insights-ara-damansara .ai-card{padding:24px 20px 22px}
.hartamas-page-area-insights-ara-damansara .ai-panel{padding:22px 16px 20px}
.hartamas-page-area-insights-ara-damansara .ai-bars{height:260px;gap:6px}
.hartamas-page-area-insights-ara-damansara .ai-dense{gap:2px;height:230px}
.hartamas-page-area-insights-ara-damansara .ai-dense .ai-val{font-size:8.5px}
}