:root{
    --ink:#16242B; --paper:#F3F1EC; --civil:#2C6E91; --eucalypt:#5E6F5A;
    --line:#CBC6BB; --muted:#5B6168;
    --display:'Archivo',system-ui,sans-serif;
    --body:'Hanken Grotesk',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;}
  body{font-family:var(--body);color:var(--ink);background:var(--paper);
       -webkit-font-smoothing:antialiased;line-height:1.5;}
  a{color:inherit;text-decoration:none;}

  /* ───────── top bar (transparent over hero) ───────── */
  .topbar{position:absolute;top:0;left:0;right:0;z-index:5;
          display:flex;align-items:flex-start;justify-content:space-between;
          padding:clamp(26px,4vh,40px) clamp(22px,5vw,64px);}
  .mark{font-family:var(--display);font-weight:600;
        font-size:clamp(30px,4vw,70px);letter-spacing:-.03em;line-height:.92;
        color:#fff;display:inline-block;}
  .mark .iq{color:#b6ccd6;font-weight:700;}
  /* v16.2 - hero image logo, sized larger than the header pill mark to
     match the display presence of the previous text mark. Landing page
     only; regular headers use height:28px via .logo-img. */
  .mark-img{display:block;height:clamp(48px,6vw,90px);width:auto;
            image-rendering:-webkit-optimize-contrast;}
  /* v16.4 - Bennett + Bennett logo in the top-right of the landing page.
     Stacked "white text" variant sized slightly smaller than the UrbIQ
     mark so it reads as a partner attribution rather than competing for
     brand hierarchy. Links out to bennettandbennett.com.au. Drop a new
     PNG at /static/Stacked-B+B-Logo_White-Text.png to update. */
  .bb-logo{display:block;height:clamp(52px,5.5vw,82px);width:auto;
           image-rendering:-webkit-optimize-contrast;
           opacity:.92;transition:opacity .2s;}
  .bb-logo:hover{opacity:1;}
  .bb-link{display:inline-block;text-decoration:none;line-height:0;}
  .mark .tag{display:block;font-family:var(--mono);font-weight:300;
             font-size:clamp(9px,.78vw,11px);letter-spacing:.32em;
             text-transform:uppercase;color:#d7e0e5;margin-top:9px;
             padding-left:2px;}
  .enter{margin-top:8px;}
  .enter{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#e7e3d9;
         text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;
         padding:9px 4px;border-bottom:1px solid transparent;transition:border-color .25s;}
  .enter:hover{border-bottom-color:#acc4d0;}
  .enter .arr{transition:transform .25s;}
  .enter:hover .arr{transform:translateX(4px);}

  /* ───────── hero ───────── */
  .hero{position:relative;min-height:94vh;display:flex;align-items:flex-end;
        overflow:hidden;}
  /* layer 1: designed dusk fallback (shows if no render supplied) */
  .hero-bg{position:absolute;inset:0;z-index:0;
    background:linear-gradient(176deg,#172a33 0%,#274550 34%,#7e8a82 56%,
              #b7a888 70%,#8d7f64 84%,#3c4a45 100%);}
  /* layer 2: your render — drop a file at /static/hero.jpg and it covers the gradient */
  .hero-img{position:absolute;inset:0;z-index:1;
    background-image:url('/static/hero.jpg');
    background-size:cover;background-position:center 56%;}
  /* layer 3: legibility scrim */
  .hero-scrim{position:absolute;inset:0;z-index:2;
    background:
      linear-gradient(180deg,rgba(13,21,26,.5) 0%,rgba(13,21,26,0) 20%),
      linear-gradient(92deg,rgba(13,21,26,.72) 0%,rgba(13,21,26,.4) 42%,rgba(13,21,26,0) 80%),
      linear-gradient(0deg,rgba(13,21,26,.62) 0%,rgba(13,21,26,0) 38%);}
  /* layer 4: cadastral signature overlay */
  .cad{position:absolute;z-index:3;right:clamp(16px,4vw,60px);bottom:6vh;
       width:min(46vw,520px);opacity:.16;pointer-events:none;}
  @media(max-width:760px){.cad{opacity:.1;width:80vw;}}

  .hero-inner{position:relative;z-index:4;width:100%;
              padding:0 clamp(22px,5vw,64px) clamp(60px,9vh,110px);
              max-width:1180px;}
  .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.34em;
           text-transform:uppercase;color:#cfe0e8;margin:0 0 22px;}
  h1{font-family:var(--display);font-weight:600;color:#fff;
     font-size:clamp(34px,6.4vw,60px);line-height:1.03;letter-spacing:-.025em;
     margin:0;max-width:14ch;}
  h1 .b{display:block;}
  .lede{font-size:clamp(15px,1.7vw,19px);color:#e9e6dd;max-width:46ch;
        margin:26px 0 36px;line-height:1.55;}
  .cta{display:inline-flex;align-items:center;gap:12px;
       background:#fff;color:var(--ink);font-family:var(--display);font-weight:600;
       font-size:15px;letter-spacing:-.01em;padding:15px 26px;border-radius:2px;
       transition:transform .2s ease, box-shadow .2s ease;}
  .cta .arr{transition:transform .22s ease;}
  .cta:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.28);}
  .cta:hover .arr{transform:translateX(5px);}

  /* load reveal */
  .rise{opacity:0;transform:translateY(16px);
        animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;}
  .d1{animation-delay:.05s;} .d2{animation-delay:.16s;}
  .d3{animation-delay:.28s;} .d4{animation-delay:.4s;}
  @keyframes rise{to{opacity:1;transform:none;}}
  @media(prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none;}}

  /* ───────── capability strip ───────── */
  .work{max-width:1180px;margin:0 auto;padding:clamp(56px,9vh,104px) clamp(22px,5vw,64px);}
  .work-head{font-family:var(--mono);font-size:12px;letter-spacing:.28em;
             text-transform:uppercase;color:var(--muted);margin:0 0 38px;}
  .caps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
        border-top:1px solid var(--line);}
  .cap{padding:32px 30px 30px 0;border-bottom:1px solid var(--line);}
  .cap:not(:last-child){border-right:1px solid var(--line);}
  .cap{padding-left:clamp(0px,2vw,30px);}
  .cap:first-child{padding-left:0;}
  .cap .n{font-family:var(--mono);font-size:12px;color:var(--civil);letter-spacing:.08em;}
  .cap h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;
          margin:14px 0 10px;color:var(--ink);}
  .cap p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6;max-width:34ch;}
  @media(max-width:760px){
    .caps{grid-template-columns:1fr;}
    .cap{border-right:none!important;padding:26px 0;}
  }

  /* ───────── footer ───────── */
  footer{border-top:1px solid var(--line);}
  .foot{max-width:1180px;margin:0 auto;
        padding:30px clamp(22px,5vw,64px);
        display:flex;align-items:center;justify-content:space-between;gap:16px;
        font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);}
  .foot .bb{color:var(--ink);}
  @media(max-width:560px){.foot{flex-direction:column;align-items:flex-start;gap:8px;}}